/* Sektions-Varianten · Masterclass Blut
   Baut auf ../07_landingpage/css/components.css und page.css auf (Design System „Dr. Spitzbart“, Theme Masterclass).
   Präfix .x- für alles, was nur hier vorkommt. */

/* ---------- Rahmen der Vergleichsseiten ---------- */
.x-nav { display: flex; flex-wrap: wrap; gap: 0 calc(1.5 * var(--padding-link)); margin: 0; padding: 0; list-style: none; }
.x-nav a[aria-current="page"] { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.x-intro { padding-top: calc(1.5 * var(--sb-pv)); padding-bottom: calc(1.5 * var(--sb-pv)); }
.x-intro .sb-p { color: var(--front-high); max-width: 46em; }
.x-label { display: grid; gap: calc(var(--sb-pv) / 4); padding-top: calc(3 * var(--sb-pv)); padding-bottom: calc(1.5 * var(--sb-pv)); box-shadow: inset 0 1.5px 0 var(--table-rule); }
.x-label .sb-small { color: var(--front-high); max-width: 60em; }
.x-label .x-no { display: inline-flex; flex-wrap: wrap; gap: calc(var(--sb-pv) / 2); align-items: center; }
.x-variant { padding-bottom: calc(4 * var(--sb-pv)); }
.x-pager { display: flex; justify-content: space-between; gap: var(--sb-pv); padding-top: calc(2 * var(--sb-pv)); padding-bottom: calc(4 * var(--sb-pv)); box-shadow: inset 0 1.5px 0 var(--table-rule); }

/* ---------- Bausteine ---------- */
.x-lead { margin: 0; font-family: var(--font-text); font-weight: 400; font-size: calc(17px + 0.55vw); line-height: 1.5; hyphens: auto; }
@media (max-width: 1039px) { .x-lead { font-size: calc(16.5px + 0.5vw); } }
.x-hi { color: var(--front-high); }
.x-mid { color: var(--front-middle); }
.x-glass { background: var(--back-light); -webkit-backdrop-filter: var(--backdrop-blur); backdrop-filter: var(--backdrop-blur); }
.x-pad { padding: calc(1.2 * var(--sb-pv)); }
.x-rule { box-shadow: inset 0 1.5px 0 var(--table-rule); }
.x-cols-2, .x-cols-3, .x-cols-4 { display: grid; gap: calc(var(--sb-pv) / 1.5); }
@media (min-width: 700px) { .x-cols-2 { grid-template-columns: repeat(2, 1fr); } .x-cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .x-cols-3 { grid-template-columns: repeat(3, 1fr); } .x-cols-4 { grid-template-columns: repeat(4, 1fr); } }
.x-num { font-family: var(--font-display); font-weight: 400; line-height: .9; letter-spacing: -0.02em; }
.x-num-xl { font-size: calc(64px + 5vw); }
.x-num-l { font-size: calc(44px + 2.6vw); }
.x-quote { font-family: var(--font-display); font-weight: 500; }
.x-center { text-align: center; }
.x-center .sb-heading { margin-left: auto; margin-right: auto; align-items: center; }
.x-sticky { position: sticky; top: calc(2 * var(--sb-pv)); }
.x-badge { display: inline-flex; align-items: center; justify-content: center; width: calc(1.8 * var(--sb-pv)); height: calc(1.8 * var(--sb-pv)); border-radius: var(--radius-round); background: rgba(255,255,255,var(--opacity-button-fill)); font-family: var(--font-display); font-weight: 500; font-size: calc(16px + 0.5vw); }

/* Text-Link mit Play-Symbol */
.x-play { display: inline-flex; align-items: center; gap: calc(var(--sb-pv) / 3); border: 0; padding: var(--padding-link) 0; background: none; color: var(--color-front); cursor: pointer; font: inherit; text-align: left; transition: opacity var(--duration-link); }
.x-play:hover { opacity: var(--opacity-hover); }
.x-play .x-ring { flex: none; display: inline-flex; align-items: center; justify-content: center; width: calc(1.8 * var(--sb-pv)); height: calc(1.8 * var(--sb-pv)); border-radius: var(--radius-round); background: rgba(255,255,255,var(--opacity-button-fill)); -webkit-backdrop-filter: var(--backdrop-blur); backdrop-filter: var(--backdrop-blur); }
.x-play .x-ring img { width: 58%; }

/* Tabelle mit Linien oben (table-rule, wie Vergleichstabellen der Marke) */
.x-table { width: 100%; border-collapse: collapse; }
.x-table th, .x-table td { padding: calc(var(--sb-pv) / 2) calc(var(--sb-pv) / 2) calc(var(--sb-pv) / 2) 0; text-align: left; vertical-align: baseline; box-shadow: inset 0 1.5px 0 var(--table-rule); font-weight: 400; }
.x-table thead th { box-shadow: none; color: var(--front-high); }
.x-table td.is-yes { font-weight: 650; }
.x-table td.is-no { color: var(--front-middle); }

/* Tabs */
.x-tabs { display: flex; flex-wrap: wrap; gap: calc(var(--sb-pv) / 3); margin-bottom: var(--sb-pv); }
.x-tab { border: 0; padding: calc(var(--sb-pb) * .9) var(--sb-pb); background: rgba(255,255,255,var(--opacity-button-fill)); color: var(--color-front); cursor: pointer; font: inherit; transition: background-color var(--duration-link); }
.x-tab[aria-selected="true"] { background: var(--color-front); color: var(--color-back); }
.x-tabpanel[hidden] { display: none; }

/* Slider (Pager wie im Original: Punkt + Fortschritt über 7,1s) */
.x-slider { position: relative; }
.x-slide { display: none; }
.x-slide.is-active { display: block; animation: x-fade var(--duration-fadein-fast) ease-in-out; }
@keyframes x-fade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.x-pagers { display: flex; gap: calc(var(--sb-pv) / 3); margin-top: var(--sb-pv); }
.x-pagers button { position: relative; width: calc(2.4 * var(--sb-pv)); height: 4px; border: 0; padding: 0; background: rgba(255,255,255,.29); cursor: pointer; overflow: hidden; }
.x-pagers button.is-active { background: rgba(255,255,255,.58); }
.x-pagers button.is-active::after { content: ""; position: absolute; inset: 0; background: var(--color-front); transform-origin: left; animation: x-progress 7.1s linear forwards; }
@keyframes x-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Endlosband (horizontal-roll, an den Rändern ausgeblendet) */
.x-roll { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.x-roll-track { display: flex; gap: calc(3 * var(--sb-pv)); width: max-content; animation: x-roll 57s linear infinite; }
.x-roll:hover .x-roll-track { animation-play-state: paused; }
@keyframes x-roll { to { transform: translateX(-50%); } }
.x-roll-item { flex: none; max-width: 30ch; }

/* Lightbox */
.x-lightbox { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: var(--gutter); background: rgba(4,25,34,.92); -webkit-backdrop-filter: var(--backdrop-blur); backdrop-filter: var(--backdrop-blur); }
.x-lightbox video { width: min(1100px, 100%); max-height: 86vh; background: #000; }
.x-lightbox.is-portrait video { width: auto; height: min(86vh, 900px); max-width: 100%; aspect-ratio: 2 / 3; }
.x-lightbox-close { position: absolute; top: calc(var(--sb-pv) / 2); right: calc(var(--sb-pv) / 2); border: 0; background: none; cursor: pointer; padding: calc(var(--sb-pv) / 2); }
.x-lightbox-close img { width: calc(1.6 * var(--sb-pv)); }

/* Hintergrund-Loop */
.x-loop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: var(--opacity-middle); }

/* Bereichsregler */
.x-range { -webkit-appearance: none; appearance: none; width: 100%; height: calc(1.6 * var(--sb-pv)); margin: 0; background: transparent; cursor: pointer; }
.x-range::-webkit-slider-runnable-track { height: calc(1.6 * var(--sb-pv)); background: linear-gradient(90deg, rgba(255,255,255,.11) 0 33.33%, rgba(255,255,255,.16) 33.33% 66.66%, rgba(255,255,255,.87) 66.66%); }
.x-range::-moz-range-track { height: calc(1.6 * var(--sb-pv)); background: linear-gradient(90deg, rgba(255,255,255,.11) 0 33.33%, rgba(255,255,255,.16) 33.33% 66.66%, rgba(255,255,255,.87) 66.66%); }
.x-range::-webkit-slider-thumb { -webkit-appearance: none; width: 6px; height: calc(2.6 * var(--sb-pv)); margin-top: calc(-0.5 * var(--sb-pv)); background: var(--color-front); box-shadow: 0 0 0 3px var(--color-back); }
.x-range::-moz-range-thumb { width: 6px; height: calc(2.6 * var(--sb-pv)); border: 0; border-radius: 0; background: var(--color-front); box-shadow: 0 0 0 3px var(--color-back); }

/* Vertikale Messskalen */
.x-gauges { display: grid; grid-template-columns: repeat(2, 1fr); gap: calc(2 * var(--sb-pv)); }
.x-gauge { display: grid; grid-template-columns: calc(1.8 * var(--sb-pv)) 1fr; gap: calc(var(--sb-pv) / 1.5); align-items: stretch; }
.x-gauge-bar { display: grid; grid-template-rows: repeat(3, 1fr); height: calc(14 * var(--sb-pv)); background: var(--back-light); }
.x-gauge-bar span { background: rgba(255,255,255,var(--opacity-button-fill)); }
.x-gauge-bar span + span { box-shadow: inset 0 1px 0 rgba(4,25,34,.6); }
.x-gauge-bar span.is-target { background: var(--color-front); opacity: .87; }
.x-gauge-labels { display: flex; flex-direction: column; justify-content: space-between; }

/* Zeitachse */
.x-timeline { display: grid; gap: calc(var(--sb-pv) / 1.2); margin: 0; padding: 0; list-style: none; counter-reset: step; }
@media (min-width: 1040px) { .x-timeline { grid-template-columns: repeat(5, 1fr); } .x-timeline.is-4 { grid-template-columns: repeat(4, 1fr); } }
.x-timeline li { position: relative; display: grid; gap: calc(var(--sb-pv) / 4); padding-top: calc(var(--sb-pv) * 1.6); }
.x-timeline li::before { content: ""; position: absolute; top: calc(var(--sb-pv) * .5); left: 0; right: 0; height: 1.5px; background: var(--table-rule); }
.x-timeline li::after { content: ""; position: absolute; top: calc(var(--sb-pv) * .5 - 5px); left: 0; width: 11px; height: 11px; background: var(--color-front); }

/* Inhaltsliste in schmalen Karten immer einspaltig */
.x-card-stack .offer-list li { grid-template-columns: 1fr; gap: calc(var(--sb-pv) / 4); }