/* ==========================================================================
   1. DESIGN-TOKENS
   ========================================================================== */
:root {
  /* Farben [CD 2026] — Kernfarben aus design.md */
  --color-primary:        #2F7400;  /* Grün — Hauptfarbe */
  --color-primary-bright: #41A900;  /* Grün hell — auf dunklem Grund */
  --color-secondary:      #FFFFFF;  /* Weiß — Kontrast, Headlines */
  --color-text-soft:      #F8F7E8;  /* Beige — Fließtext auf Dunkel */
  --color-overlay:        rgba(0,0,0,.48); /* Foto-Overlay Schwarz 48 % */

  /* Sozial-Akzent [CD 2026, Richtwert — gegen Master-Asset kalibrieren] */
  --color-alarm:          #C4362B;  /* Stempel-Rot, NUR Verknappung/Alarm */

  /* UI-Neutrale [CD 2026, Web-Ergänzung] */
  --color-dark:           #0A0A0A;  /* Haupt-Hintergrund */
  --color-dark-raised:    #1C1C1C;  /* Anthrazit — Cards */
  --color-line:           #3A3A3A;  /* Grau 700 — Trennlinien/Rahmen */
  --color-muted:          #8C8C8C;  /* Grau 400 — Sekundärtext */

  /* Typo-Rollen — Familien sind [PLATZHALTER] (siehe Font-Kommentar oben) */
  --font-display: 'Anton', Impact, sans-serif;        /* → Lava Pro Grunge */
  --font-facts:   'Oswald', sans-serif;               /* → Alpha (Edo)     */
  --font-body:    'Barlow', system-ui, sans-serif;    /* Fließtext-Grotesk */

  /* Spacing-Skala [CD 2026]: 4 · 8 · 16 · 24 · 40 · 64 · 96 */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 16px; --sp-4: 24px;
  --sp-5: 40px; --sp-6: 64px; --sp-7: 96px;

  /* Layout [CD 2026] */
  --content-max: 1200px;
  --radius: 3px;             /* max. 2–4 px — raue Kanten */
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-right: env(safe-area-inset-right, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-left: env(safe-area-inset-left, 0px);
  --site-header-height: calc(var(--sp-6) + var(--safe-area-top) + 1px);

  /* Semantische z-Skala */
  --z-grain: 40;
  --z-sticky-cta: 50;
  --z-header: 60;
  --z-menu: 70;
}

/* ==========================================================================
   2. BASIS
   ========================================================================== */
/* Mini-Reset — ersetzt Tailwinds Preflight, das mit dem CDN-Skript entfallen ist.
   Nur das, worauf dieses Projekt tatsächlich baut (Kastenmodell, Nullmargen,
   Links ohne UA-Farbe/Unterstreichung, Bilder als Block).
   `scroll-behavior: smooth` steht hier bewusst NICHT: es würde jeden
   programmatischen Sprung animieren und ScrollTrigger stören. Weiches Scrollen
   gibt es gezielt beim Anker-Klick (site.js). */
*, ::before, ::after { box-sizing: border-box; border: 0 solid; }
* { margin: 0; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
a { color: inherit; text-decoration: inherit; }
ol, ul, menu { list-style: none; padding: 0; }
img, svg, video, canvas, iframe { display: block; vertical-align: middle; }
img, video { max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; background: transparent; padding: 0; }
button { cursor: pointer; -webkit-appearance: button; }

body {
  background: var(--color-dark);
  color: var(--color-text-soft);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  /* clip verhindert seitlichen Überlauf, ohne einen eigenen Scrollcontainer
     zu erzeugen, der den Sticky-Header vom Dokument-Scrollen entkoppelt. */
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--color-primary); color: #fff; }

h1, h2, h3 { text-wrap: balance; }
p { max-width: 65ch; text-wrap: pretty; }

.display {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 400;           /* Anton hat nur ein Gewicht */
  letter-spacing: 0.01em;
  line-height: 1.0;
  color: var(--color-secondary);
}
.h1 { font-size: clamp(2.5rem, 9vw, 4.5rem); }      /* 72 → 40 [CD 2026] */
.h2 { font-size: clamp(1.9rem, 6vw, 3rem); line-height: 1.05; } /* 48 → 30 */
.h3 { font-family: var(--font-body); font-weight: 700; font-size: clamp(1.375rem, 3vw, 1.75rem); line-height: 1.2; }

.caption {
  font-size: 13px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; line-height: 1.3; color: var(--color-muted);
}
.facts { font-family: var(--font-facts); text-transform: uppercase; }

.container {
  max-width: var(--content-max); margin-inline: auto;
  padding-left: max(clamp(20px, 4vw, 40px), var(--safe-area-left));
  padding-right: max(clamp(20px, 4vw, 40px), var(--safe-area-right));
}

/* ==========================================================================
   3. SIGNATUR-ELEMENTE [CD 2026]
   ========================================================================== */
/* Grüner Pinselstrich — roh, handgemalt (SVG-Maske, wiederverwendbar) */
.brush {
  position: relative; display: inline-block;
}
.brush::after {
  content: ""; position: absolute; left: -2%; right: -2%; bottom: -0.28em;
  height: 0.22em; background: var(--color-primary-bright);
  /* raue Kante über clip-path statt perfektem Rechteck */
  clip-path: polygon(0% 38%, 4% 12%, 15% 28%, 28% 6%, 41% 30%, 55% 10%, 68% 32%, 80% 8%, 92% 26%, 100% 14%, 99% 78%, 88% 95%, 74% 72%, 60% 96%, 45% 70%, 30% 92%, 16% 68%, 5% 88%, 0% 70%);
}

/* Roter Stempel — nur Verknappung/Alarm bzw. Mockup-Kennzeichnung */
.stamp {
  display: inline-block; padding: 6px 14px;
  border: 3px solid var(--color-alarm); color: var(--color-alarm);
  font-family: var(--font-facts); font-weight: 600; font-size: 13px;
  letter-spacing: 0.08em; text-transform: uppercase;
  transform: rotate(-4deg); border-radius: 2px;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='40'%3E%3Cfilter id='r'%3E%3CfeTurbulence baseFrequency='0.55' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.9 0.05'/%3E%3C/filter%3E%3Crect width='120' height='40' fill='white' filter='url(%23r)'/%3E%3C/svg%3E");
  mask-size: cover;
}

/* Dezente Grunge-Textur über der ganzen Seite (Lesbarkeit bleibt).
   OHNE mix-blend-mode: ein bildschirmfüllender Blend-Layer zwingt den Browser,
   bei JEDEM Frame den fertigen Hintergrund zurückzulesen und neu zu verrechnen —
   auf jeder Seite, bei jedem Scrollen. Auf dem dunklen Grund ist der Unterschied
   zwischen `overlay` und reiner Deckkraft nicht wahrnehmbar; die Deckkraft ist
   dafür leicht nachjustiert. */
.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: var(--z-grain);
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ==========================================================================
   4. BUTTONS [CD 2026]
   ========================================================================== */
.btn {
  display: inline-block; border-radius: var(--radius);
  /* Trägt die Pseudo-Elemente des CTA-Impulses (Abschnitt 20) und beschneidet
     das Lichtband. Steht bewusst HIER und nicht bei `.btn-primary` weiter
     unten: `.sticky-cta` setzt `position: fixed` und hat dieselbe Spezifität —
     eine spätere `position: relative`-Regel würde sie überschreiben und den
     Sticky-Button aus der Ecke ans Dokumentende reißen. */
  position: relative; overflow: hidden;
  font-family: var(--font-body); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  padding: 16px 32px; font-size: 15px; line-height: 1;
  transition: background-color .2s ease-out, color .2s ease-out, transform .15s cubic-bezier(.22,1,.36,1);
  cursor: pointer; text-align: center;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--color-primary-bright); color: #fff; }
.btn-primary:hover { background: var(--color-primary); }
.btn-secondary {
  background: transparent; color: var(--color-text-soft);
  border: 2px solid var(--color-text-soft);
}
.btn-secondary:hover { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

/* Sekundär-Button auf hellem (invertiertem) Grund */
.section-invert .btn-secondary { color: var(--color-dark); border-color: var(--color-dark); }
.section-invert .btn-secondary:hover { color: #fff; }

/* ==========================================================================
   5. HEADER & NAVIGATION [CD 2026]
   ========================================================================== */
.site-header {
  /* Native Sticky-Position statt einer separaten Fixed-Ebene: Die Leiste
     bleibt beim Ein-/Ausblenden der mobilen Browserleisten am Scrollrand.
     Der negative Außenabstand erhält die bisherige Überlagerung des Hero. */
  position: sticky; top: 0; z-index: var(--z-header);
  margin-bottom: calc(0px - var(--site-header-height));
  /* Die Aussparung liegt INNERHALB des durchgehenden Hintergrunds. */
  padding-top: var(--safe-area-top);
  background: var(--color-dark);
  border-bottom: 1px solid var(--color-line);
}
.nav-link {
  font-weight: 600; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-text-soft); position: relative; padding-bottom: 4px;
}
.nav-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 5px;
  background: var(--color-primary-bright); opacity: 0; transform: scaleX(.4);
  transform-origin: left; transition: opacity .2s ease-out, transform .25s cubic-bezier(.22,1,.36,1);
  clip-path: polygon(0% 30%, 12% 5%, 30% 35%, 50% 8%, 70% 38%, 88% 10%, 100% 30%, 98% 80%, 80% 100%, 58% 70%, 38% 98%, 15% 72%, 2% 95%);
}
.nav-link:hover::after, .nav-link[aria-current="true"]::after { opacity: 1; transform: scaleX(1); }

/* Mobiles Menü-Overlay */
.mobile-menu {
  --menu-padding: var(--sp-6);
  position: fixed; inset: 0; z-index: var(--z-menu);
  background: rgba(10,10,10,.97);
  display: none; flex-direction: column; align-items: flex-start;
  justify-content: center; gap: var(--sp-4);
  padding: calc(var(--sp-6) + var(--safe-area-top))
    max(var(--menu-padding), var(--safe-area-right))
    calc(var(--menu-padding) + var(--safe-area-bottom))
    max(var(--menu-padding), var(--safe-area-left));
}
.mobile-menu.open { display: flex; }
.mobile-menu .nav-link { font-size: 28px; font-family: var(--font-facts); font-weight: 500; }
#menuClose {
  top: calc(20px + var(--safe-area-top));
  right: max(20px, var(--safe-area-right));
}

/* ==========================================================================
   6. HERO — „Bühnenlicht": Echtfoto (HR Samstag 2026) in zwei Ebenen.
   Basis Mono-Noir-S/W [CD 2026]; im mausgeführten Lichtkegel scheint die
   Originalfarbe durch (Farb-Reveal). Banner mit Alt-Magenta-Branding sind
   per statischer Bandmaske dauerhaft vom Farb-Layer ausgenommen.
   Ebenen-Geometrie (Cover-Crop) setzt JS, damit Maskenkoordinaten exakt
   auf dem Bild liegen. --spot-*: Hero-Koordinaten, --spot-i*: Bild-Koordinaten.
   ========================================================================== */
.hero {
  position: relative; min-height: 100svh; display: flex; align-items: center;
  --spot-x: 50vw; --spot-y: 40vh; --spot-ix: 50vw; --spot-iy: 40vh; --spot-r: 36vmin;
}
.hero-media { position: absolute; inset: 0; overflow: hidden; background: var(--color-dark); }
.hero-layer { position: absolute; object-fit: cover; max-width: none; } /* max-width:none: Tailwind-Preflight clampt sonst den Cover-Crop */
/* Unbeleuchtet = deutlich zurückgenommen. Je dunkler die Basis, desto stärker
   wirkt der Kegel — das trägt den Effekt mehr als die Helligkeit des Lichts. */
.hero-base { filter: grayscale(1) contrast(1.22) brightness(.62); }
/* Der Kegel: Rahmen fester Größe (2R), STATISCHE radiale Maske. Bewegt wird er
   ausschließlich per transform (JS) — die Maske wird dadurch EINMAL gerastert
   statt bei jedem Frame neu. Stopps sind Prozent des Radius, `closest-side`
   trifft in einer 2R-Box denselben Verlauf wie vorher `circle var(--spot-r)`.
   Kern voll deckend und lange gehalten, dann kurze harte Kante — ein
   Scheinwerfer hat einen Rand, keinen Nebel. */
.hero-spot {
  position: absolute; top: 0; left: 0;
  width: calc(var(--spot-r) * 2); height: calc(var(--spot-r) * 2);
  will-change: transform;
  -webkit-mask-image: radial-gradient(circle closest-side at center, #000 0%, #000 42%, rgba(0,0,0,.82) 64%, rgba(0,0,0,.35) 84%, transparent 96%);
  mask-image: radial-gradient(circle closest-side at center, #000 0%, #000 42%, rgba(0,0,0,.82) 64%, rgba(0,0,0,.35) 84%, transparent 96%);
}
.hero-color {
  /* Bandmaske gegen die Alt-Branding-Banner (~24,5–32,5 % und 67,5–74,5 % der
     Bildbreite) — bleibt in BILDkoordinaten und damit exakt auf den Bannern.
     Verschachtelt mit der Kegelmaske am Rahmen multiplizieren sich die Alphas
     genau wie zuvor `mask-composite: intersect`. */
  filter: saturate(1.2) contrast(1.06);
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 22.5%, transparent 24.5%, transparent 32.5%, #000 34.5%, #000 65.5%, transparent 67.5%, transparent 74.5%, #000 76.5%, #000 100%);
  mask-image: linear-gradient(to right, #000 0%, #000 22.5%, transparent 24.5%, transparent 32.5%, #000 34.5%, #000 65.5%, transparent 67.5%, transparent 74.5%, #000 76.5%, #000 100%);
  will-change: transform;
}
/* Warmweiße Aufhellung am Kegelzentrum — „echtes Bühnenlicht", additiv.
   Zwei Radien: enger heißer Kern + weiter Abstrahlhof. Der äußere Gradient
   endet bei 78 % von 1,35 R ≈ 1,05 R, passt also vollständig in die 2,7-R-Box —
   `screen` wirkt damit nur noch auf dieser kleinen Fläche statt auf dem
   gesamten Viewport, bei identischem Ergebnis (screen auf transparent = no-op). */
.hero-spot-light {
  position: absolute; top: 0; left: 0; z-index: 1; pointer-events: none;
  width: calc(var(--spot-r) * 2.7); height: calc(var(--spot-r) * 2.7);
  mix-blend-mode: screen; opacity: .42; will-change: transform;
  background:
    radial-gradient(circle calc(var(--spot-r) * .55) at center,
      rgba(255,246,226,.9) 0%, rgba(255,241,214,.35) 55%, transparent 100%),
    radial-gradient(circle calc(var(--spot-r) * 1.35) at center,
      rgba(255,241,214,.62) 0%, rgba(255,238,205,.22) 50%, transparent 78%);
}
/* Foto-Overlay [CD 2026]: Schwarz 48 % + zusätzlicher Verlauf unten für Lesbarkeit */
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,10,10,.94) 0%, var(--color-overlay) 45%, rgba(0,0,0,.35) 100%);
}
.hero-content { position: relative; width: 100%; padding-block: calc(var(--sp-7) + var(--safe-area-top)) var(--sp-6); text-align: center; }
.hero-content .container { display: flex; flex-direction: column; align-items: center; }
.hero-title { width: min(100%, 42rem); line-height: 1; }
.hero-logo { display: block; width: 100%; height: auto; }
/* Scroll-Cue: hält den Einstieg „am Laufen", ohne zu schreien */
.hero-scroll-cue {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: var(--color-muted); animation: cue-pulse 2.6s ease-in-out infinite;
}
.hero-scroll-cue:hover { color: var(--color-text-soft); }
@keyframes cue-pulse {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: .75; }
  50% { transform: translateX(-50%) translateY(6px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .hero-scroll-cue { animation: none; } }

/* Countdown — Zahlen als Display [CD 2026], bewusst kompakt gehalten
   (Briefing: "dezent, nicht dominant" — Kompromiss beider Vorgaben) */
.countdown { display: flex; gap: clamp(16px, 4vw, 40px); }
.countdown .num {
  font-family: var(--font-display); font-size: clamp(1.75rem, 5vw, 2.75rem);
  color: var(--color-text-soft); line-height: 1; font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   7a. RÜCKBLICK-INTRO — gepinnter Pulse-Text (Rose-Bikes-Prinzip)
   Wörter starten gedimmt und werden per Scroll-Scrub nacheinander hell,
   mit kurzem Herzschlag-Puls. Der Dim-Zustand wird NUR per JS gesetzt —
   ohne JS/bei reduced motion ist der Text voll lesbar.
   ========================================================================== */
.pulse-stage { height: 100svh; display: grid; place-items: center; padding-inline: clamp(20px, 5vw, 64px); }
.pulse-text {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(1.6rem, 4.5vw, 3rem); line-height: 1.35;
  text-align: center; color: var(--color-text-soft);
  max-width: 26ch; text-wrap: balance;
}
/* Kein dauerhaftes `will-change`: 19 Wörter × eigene Compositor-Ebene, die
   permanent GPU-Speicher belegt und bei jedem Frame im Layer-Baum mitgeführt
   wird. GSAP promotet selbst für die Dauer eines Tweens. Gilt genauso für
   .retro-img (9 große Bilder) und .merch-card (5 × 666 kpx). */
.pulse-text .word { display: inline-block; }
.pulse-text .accent { color: var(--color-primary-bright); }

/* ==========================================================================
   7b. RÜCKBLICK — gepinnte Zoom-Sequenz (Rose-Bikes-Prinzip)
   ========================================================================== */
.retro-stage { position: relative; height: 100vh; overflow: hidden; background: var(--color-dark); }
.retro-img {
  position: absolute; opacity: 0;
  box-shadow: none; /* flacher Look — Tiefe kommt aus Skalierung, nicht Schatten */
}
.retro-img img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1) contrast(1.08); }
/* Die Rahmen gehören zum Entwurf, unabhängig von den Maßen neuer Uploads. */
.retro-img:has([data-retro-image="hands"]),
.retro-img:has([data-retro-image="drummer"]) { aspect-ratio: 1100 / 1466; }
.retro-img:has([data-retro-image="guitarist"]),
.retro-img:has([data-retro-image="camping"]),
.retro-img:has([data-retro-image="confetti"]) { aspect-ratio: 1100 / 826; }
.retro-img:has([data-retro-image="crowdsurfer"]),
.retro-img:has([data-retro-image="friends"]) { aspect-ratio: 1; }
.retro-img:has([data-retro-image="circlePit"]) { aspect-ratio: 1100 / 618; }
.retro-img:not([data-final]) { overflow: hidden; }
.retro-img:not([data-final]) img { position: absolute; inset: 0; object-position: center; }
.retro-claim {
  position: absolute; inset: 0; display: grid; place-items: center;
  text-align: center; opacity: 0; padding-inline: 20px;
}
/* Reduced-Motion-/No-JS-Fallback: statisches Grid statt Zoom-Flug.
   Achtung: keine Tailwind-Display-Klassen hier — display wird allein
   über diese Regeln gesteuert. */
.retro-fallback { display: none; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 768px) { .retro-fallback { grid-template-columns: repeat(4, 1fr); } }
@media (prefers-reduced-motion: reduce) {
  .retro-scrolly { display: none; }
  .retro-fallback { display: grid; }
}

/* ==========================================================================
   8. LINEUP
   ========================================================================== */
.lineup-tier1 { font-size: clamp(2.25rem, 8vw, 5rem); line-height: 1.02; }
#lineupList a { transition: color .2s ease-out; }
#lineupList a:hover, #lineupList a:focus-visible { color: var(--color-primary-bright); text-decoration: underline; text-underline-offset: .12em; }
#lineupList a:focus-visible { outline: 2px solid var(--color-primary-bright); outline-offset: 5px; }
.lineup-tier2 { font-family: var(--font-facts); font-weight: 600; font-size: clamp(1.375rem, 4vw, 2rem); text-transform: uppercase; line-height: 1.2; }
.lineup-tier3 { font-family: var(--font-facts); font-weight: 500; font-size: clamp(1rem, 2.5vw, 1.2rem); text-transform: uppercase; color: var(--color-muted); line-height: 1.5; }
/* "Redigierte" Platzhalter-Balken im Leer-Zustand */
.redacted {
  display: inline-block; height: .85em; border-radius: 2px;
  background: var(--color-dark-raised); border: 1px solid var(--color-line);
  vertical-align: baseline;
}

/* ==========================================================================
   9. KEYFACTS → „DROHNENFLUG" — echtes generiertes Video (Higgsfield Cinema
   Studio, Start→End-Fly-Through-Morphs zwischen 5 echten Fotos), scroll-
   gescrubbt über video.currentTime. An 4 Stopps (Segment-Enden) hält der Flug
   und blendet die Kennzahl ein. Mono-Noir [CD 2026] ist in die mp4 gerendert.
   Fallback ist Default sichtbar (ohne JS / reduced motion / Video-Fehler);
   JS schaltet auf das Video um.
   ========================================================================== */
.flight { position: relative; background: var(--color-dark); }
.flight-scrolly { display: none; }
.flight-stage { position: relative; height: 100svh; overflow: hidden; }
.flight-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  background: var(--color-dark);
}
.flight-stage::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: linear-gradient(to bottom, rgba(10,10,10,.5) 0%, rgba(10,10,10,.15) 38%, rgba(10,10,10,.72) 100%);
}
.flight-fact { position: absolute; inset-inline: 0; bottom: 12svh; z-index: 3; text-align: center; padding-inline: 24px; opacity: 0; }
.flight-fact .fact-num {
  font-family: var(--font-display); color: var(--color-secondary);
  font-size: clamp(4rem, 15vw, 7rem); line-height: 1; font-variant-numeric: tabular-nums;
}
.flight-fact .fact-num .unit { color: var(--color-primary-bright); }
.flight-fact.accent .fact-num { color: var(--color-primary-bright); }
.flight-fact.accent .fact-num .unit { color: var(--color-secondary); }
/* Beschriftung unter der Zahl: `p { max-width: 65ch }` macht den Absatz
   schmaler als den Container — ohne `margin-inline: auto` klebt er links,
   obwohl .flight-fact zentriert ist. Farbe vom Grau auf Beige, weil der Text
   über bewegtem Filmmaterial steht; der Schatten hält ihn auch über hellen
   Bildstellen lesbar. */
.flight-fact .caption {
  margin: 14px auto 0;
  color: var(--color-text-soft);
  font-size: 15px;
  letter-spacing: 0.1em;
  text-shadow: 0 2px 12px rgba(10,10,10,.9), 0 0 3px rgba(10,10,10,.8);
}

/* Fallback-Raster (Default sichtbar) */
.flight-fallback { display: grid; grid-template-columns: repeat(2, 1fr); }
@media (max-width: 767px) { .flight-fallback { grid-template-columns: 1fr; } }
.flight-fallback figure { position: relative; margin: 0; aspect-ratio: 16 / 10; overflow: hidden; }
.flight-fallback img { width: 100%; height: 100%; object-fit: cover; }
.flight-fallback figcaption {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(16px, 3vw, 28px); background: linear-gradient(to top, rgba(10,10,10,.85), transparent 65%);
}
.flight-fallback .fact-num {
  font-family: var(--font-display); color: var(--color-secondary);
  font-size: clamp(2.4rem, 6vw, 3.5rem); line-height: 1; font-variant-numeric: tabular-nums;
}
.flight-fallback .fact-num .unit { color: var(--color-primary-bright); }

/* ==========================================================================
   10. MERCH — Stacked Cards
   ========================================================================== */
.merch-card-wrap { position: sticky; }
.merch-card {
  background: var(--color-dark-raised); border: 1px solid var(--color-line);
  border-radius: var(--radius); overflow: hidden;
  transform-origin: center top;
  position: relative; /* trägt die Abdunkel-Ebene beim Stapeln */
}
/* Abdunkeln der darunterliegenden Karte beim Stapeln: früher ein animierter
   `filter: brightness()`, der auf jeder Karte dauerhaft eine Filter-Ebene
   stehen ließ. Eine überlagerte Fläche mit animierter Deckkraft sieht gleich
   aus — und eine Opacity-Animation kann der Compositor ohne Neuzeichnen. */
.merch-dim {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: var(--color-dark); opacity: 0;
}
.merch-collage { display: grid; gap: 2px; background: var(--color-line); }
.merch-collage figure { margin: 0; background: var(--color-dark-raised); position: relative; }
.merch-collage img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 1/1; }
.merch-collage figcaption {
  position: absolute; left: 10px; bottom: 8px; font-size: 11px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-soft);
  background: rgba(10,10,10,.55); padding: 2px 8px; border-radius: 2px;
}

/* ==========================================================================
   11. SPONSOREN — Auto-Marquee (endlos, gleichmäßig, NICHT scroll-gekoppelt)
   ========================================================================== */
.marquee { overflow: hidden; }
.marquee-track { display: flex; gap: var(--sp-3); width: max-content; animation: marquee 42s linear infinite; }
.hr-partner-tile img { display: block; width: 100%; height: 64px; object-fit: contain; }
@keyframes marquee { to { transform: translateX(-50%); } }
.hr-partner-tile {
  flex: 0 0 auto; width: 190px; height: 84px; display: grid; place-items: center;
  border: 1px solid var(--color-line); border-radius: var(--radius);
  color: var(--color-muted); font-family: var(--font-facts); font-weight: 500;
  font-size: 14px; letter-spacing: .04em; text-transform: uppercase; text-align: center;
  padding-inline: 12px;
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
}

/* ==========================================================================
   12. INVERTIERTE SEKTION (Verein) [CD 2026: Rhythmus Schwarz ↔ Off-White]
   ========================================================================== */
.section-invert { background: var(--color-text-soft); color: var(--color-dark); }
.section-invert .caption { color: #5a5a52; }
.section-invert .display { color: var(--color-dark); }

/* --- Verein-Layout: links Text + zwei Knöpfe, rechts das Teambild ---------- */
.verein-grid { display: grid; gap: clamp(32px, 5vw, 56px); }

/* Kopfzeile: Stempel-Emblem neben Kicker/Headline/Fließtext */
.verein-head { display: flex; align-items: flex-start; gap: clamp(20px, 3vw, 40px); }
.verein-emblem {
  flex: 0 0 auto; width: clamp(76px, 11vw, 155px); height: auto;
  margin-top: 4px; /* Oberkante Stempel auf Höhe der Headline, nicht des Kickers */
}
.verein-copy { min-width: 0; }
.verein-copy p { color: #3d3d36; max-width: 46ch; }

/* Zwei gleichwertige Knöpfe — kein Primär/Sekundär-Gefälle [CD 2026] */
.verein-actions { display: grid; gap: var(--sp-3); }
.verein-card {
  display: flex; flex-direction: column;
  border: 1px solid #cfcec0; border-radius: var(--radius);
  padding: var(--sp-4); background: rgba(255,255,255,.35);
  transition: border-color .2s ease-out, background-color .2s ease-out;
}
.verein-card:hover { border-color: var(--color-dark); background: rgba(255,255,255,.7); }
.verein-card p { font-size: 15px; color: #3d3d36; margin-bottom: var(--sp-4); }
/* Beide Knöpfe stehen auf einer Linie, auch bei ungleich langem Text */
.verein-card .btn { margin-top: auto; align-self: flex-start; }

.verein-photo { margin: 0; }
.verein-photo img {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius); background: var(--color-dark);
}

@media (min-width: 640px) {
  .verein-actions { grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
}
@media (min-width: 1000px) {
  .verein-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    column-gap: clamp(40px, 5vw, 80px); row-gap: var(--sp-5);
    align-items: start;
  }
  .verein-head  { grid-column: 1; grid-row: 1; }
  .verein-actions { grid-column: 1; grid-row: 2; align-content: start; }
  /* Bild überspannt beide Zeilen und bleibt optisch mittig zum Textblock */
  .verein-photo { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}

/* ==========================================================================
   13. STICKY-CTA (global, erscheint nach dem Hero)
   ========================================================================== */
.sticky-cta {
  position: fixed;
  right: max(clamp(16px, 3vw, 32px), var(--safe-area-right));
  bottom: calc(clamp(16px, 3vw, 32px) + var(--safe-area-bottom));
  z-index: var(--z-sticky-cta);
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity .3s ease-out, transform .35s cubic-bezier(.22,1,.36,1);
}
.sticky-cta.visible { opacity: 1; transform: none; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .sticky-cta { transition: opacity .2s linear; transform: none; } }

/* ==========================================================================
   14. FOOTER
   ========================================================================== */
.social-icon { color: var(--color-text-soft); transition: color .2s ease-out; }
.social-icon:hover { color: var(--color-primary-bright); }

/* Reveal-Grundzustand wird per JS gesetzt (Inhalte bleiben ohne JS sichtbar) */

/* ==========================================================================
   15. UNTERSEITEN — Seitenkopf statt Hero
   Unterseiten haben keinen Hero; dieser Block trägt den Einstieg und hält
   Abstand zum fixierten Header.
   ========================================================================== */
.page-head { padding-block: calc(var(--site-header-height) + var(--sp-6)) var(--sp-5); border-bottom: 1px solid var(--color-line); }
.page-head .h1 { margin-top: var(--sp-2); }
.page-head p { color: var(--color-muted); max-width: 60ch; margin-top: var(--sp-4); }

/* ==========================================================================
   16. SHOP-SLOT (/tickets, /merch) — austauschbare Einbettung
   Der iFrame des Anbieters ersetzt später die gestrichelte Box; Größe und
   Rahmen bleiben gleich, damit sich das Layout nicht verschiebt.
   ========================================================================== */
.shop-slot {
  border: 2px dashed var(--color-line); border-radius: var(--radius);
  min-height: 420px; display: grid; place-items: center;
  padding: var(--sp-5); text-align: center;
}
.shop-slot iframe { width: 100%; min-height: 720px; border: 0; display: block; }
.shop-note { color: var(--color-muted); max-width: 62ch; margin-inline: auto; }

/* Begleitinfos neben dem Shop (Kategorien, Größen, Versand) */
.info-grid { display: grid; gap: var(--sp-4); }
@media (min-width: 720px) { .info-grid { grid-template-columns: repeat(3, 1fr); } }
.info-card {
  border: 1px solid var(--color-line); border-radius: var(--radius);
  padding: var(--sp-4); background: var(--color-dark-raised);
}
.info-card p { color: var(--color-muted); font-size: 15px; margin-top: var(--sp-2); }

/* Fußzeile der Merch-Karten auf der Startseite (Einstieg in den Shop) */
.merch-card-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-4);
  padding: var(--sp-4) var(--sp-4) calc(var(--sp-4) + 2px);
  border-top: 1px solid var(--color-line);
}

/* ==========================================================================
   17. NEWS — Übersicht (gestapelte Karten) + Beitrag
   ========================================================================== */
/* Raster: 3 Spalten, ab wenig Platz 2, auf dem Handy 1. */
.news-list { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
@media (min-width: 620px)  { .news-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .news-list { grid-template-columns: repeat(3, 1fr); } }
.news-card {
  display: block; border: 1px solid var(--color-line); border-radius: var(--radius);
  overflow: hidden; background: var(--color-dark-raised);
  transition: border-color .2s ease-out, transform .3s cubic-bezier(.22,1,.36,1);
}
.news-card:hover { border-color: var(--color-primary-bright); transform: translateY(-3px); }
.news-card img {
  width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block;
  filter: grayscale(1) contrast(1.06); transition: filter .3s ease-out;
}
.news-card:hover img { filter: grayscale(0) contrast(1.02); }
.news-card-body { padding: var(--sp-3) var(--sp-4) var(--sp-4); }
.news-date {
  font-family: var(--font-facts); font-weight: 500; font-size: 14px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--color-primary-bright);
}
/* Kleiner als auf der Detailseite — in einer Drittel-Spalte muss die
   Überschrift auch bei drei Zeilen noch ruhig wirken. */
.news-card h2 { margin-top: var(--sp-2); font-size: clamp(1.2rem, 1.6vw + 0.7rem, 1.6rem); }

/* Einzelbeitrag */
.article { max-width: 68ch; }
.article-lead { font-size: 19px; color: var(--color-secondary); margin-top: var(--sp-4); }
.article-body { margin-top: var(--sp-5); }
.article-body p { margin-top: var(--sp-4); color: var(--color-text-soft); }
.article-body h2 { font-family: var(--font-body); font-weight: 700; font-size: 22px; margin-top: var(--sp-5); color: var(--color-secondary); }
.article-body ul { margin-top: var(--sp-4); padding-left: 1.2em; list-style: square; }
.article-body li { margin-top: var(--sp-2); }
.article-body a { color: var(--color-primary-bright); text-decoration: underline; text-underline-offset: 3px; }
.article-figure { margin: 0 0 var(--sp-5); }
.article-figure img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; border-radius: var(--radius); filter: grayscale(1) contrast(1.06); }

/* ==========================================================================
   18. LAYOUT-UTILITIES
   Ersetzen das Tailwind-CDN-Skript. Das war ein Compiler im Browser: er hat das
   CSS zur Laufzeit erzeugt und per MutationObserver auf jede DOM-Änderung
   reagiert — und dieses Projekt baut Header, Footer, Merch- und News-Karten
   nachträglich per JS ein. Hier stehen nur die 33 Klassen, die wirklich
   vorkommen. Neue Utility-Klasse im Markup? Hier ergänzen.
   Skala wie bei Tailwind: 1 = 0,25rem … 10 = 2,5rem.
   ========================================================================== */
.absolute { position: absolute; }
.flex { display: flex; }
.grid { display: grid; }
.hidden { display: none; }
.flex-wrap { flex-wrap: wrap; }
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.items-baseline { align-items: baseline; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-8 { gap: 2rem; }
.gap-x-8 { column-gap: 2rem; }
.gap-y-2 { row-gap: 0.5rem; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-5 { margin-top: 1.25rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mt-10 { margin-top: 2.5rem; }
.p-2 { padding: 0.5rem; }
.p-5 { padding: 1.25rem; }
.top-5 { top: 1.25rem; }
.right-5 { right: 1.25rem; }
/* Responsive Varianten stehen NACH den Basisklassen — so gewinnt `md:flex`
   gegen `hidden` auf breiten Viewports, genau wie bei Tailwind. */
@media (min-width: 768px) {
  .md\:flex { display: flex; }
  .md\:hidden { display: none; }
  .md\:p-6 { padding: 1.5rem; }
}
@media (min-width: 1024px) {
  .lg\:block { display: block; }
}

/* ==========================================================================
   19. HERO-CHAT — die zwei jüngsten Meldungen treffen als Nachrichten ein
   Klassische Chat-Anordnung, aber in der harten Formensprache des CD:
   Anthrazit-Fläche, dünner Rahmen, 3 px Radius wie alle Cards
   („Kein starkes Border-Radius … keine weichen ‚App'-Buttons", design.md).
   Die Chat-Lesart trägt die Anordnung — linksbündiger Stapel, Absenderzeile,
   Uhrzeit, angeschnittener Schwanz, gestaffeltes Eintreffen — nicht die Rundung.
   ========================================================================== */
.hero-chat { display: none; }
.home-news { background: var(--color-dark-raised); padding-block: var(--sp-4); border-block: 1px solid var(--color-line); scroll-margin-top: 90px; }
.home-news[hidden] { display: none; }
.home-news-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.home-news-heading h2 { display: flex; align-items: center; gap: var(--sp-2); color: var(--color-text-soft); }
.home-news-heading h2::before { content: ""; width: 6px; height: 16px; background: var(--color-primary-bright); }
.home-news-all { font-size: 14px; font-weight: 600; padding-block: 10px; white-space: nowrap; }
.home-news-list { display: grid; gap: var(--sp-3); }
.home-news-list li { min-width: 0; }
.home-news-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--sp-3); align-items: center; height: 100%; padding-block: var(--sp-3); border-top: 1px solid var(--color-line); }
.home-news-item time { font-family: var(--font-facts); font-size: 13px; color: var(--color-text-soft); }
.home-news-item h3 { grid-column: 1; font-size: 18px; font-weight: 600; line-height: 1.35; color: var(--color-secondary); overflow-wrap: anywhere; margin-top: var(--sp-1); }
.home-news-arrow { grid-column: 2; grid-row: 1 / 3; color: var(--color-primary-bright); font-size: 24px; }
.home-news-item:hover h3, .home-news-all:hover { color: var(--color-primary-bright); }
.home-news a:focus-visible { outline: 2px solid var(--color-primary-bright); outline-offset: 4px; }
@media (min-width: 768px) { .home-news-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); } }
@media (min-width: 1200px) {
  .home-news { display: none; }
  /* Erst ab hier ist links neben der Headline Platz (die Headline läuft in
     Anton auf ~530 px und steht mittig). Darunter übernimmt .home-news. */
  .hero-chat {
    /* 22 px: der Schwanz der oberen Blase hängt 10 px herunter und braucht
       Luft, sonst stößt er an die nächste Nachricht. */
    display: grid; gap: 22px; justify-items: start;
    position: absolute; z-index: 3;
    left: clamp(20px, 4vw, 40px); top: 108px;
    width: clamp(258px, 22vw, 330px);
  }
}
.chat-bubble {
  position: relative; display: block; width: 100%;
  background: var(--color-dark-raised);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: 12px 14px 13px;
  transform-origin: left bottom;   /* poppt aus der Ecke mit dem Schwanz auf */
  transition: border-color .2s ease-out, background-color .2s ease-out;
}
/* Der „Schwanz" der Sprechblase als Vektorform. Er sitzt 1 px in die Blase
   hinein, damit deren Unterkante die Oberkante des Dreiecks überdeckt — die
   Kontur läuft dadurch durch, statt dass ein Dreieck angeklebt wirkt. Füllung
   und Linie folgen dem Hover-Zustand der Blase mit. */
.chat-tail { position: absolute; left: 0; bottom: -10px; display: block; overflow: visible; }
.chat-tail-fill { fill: var(--color-dark-raised); }
.chat-tail-line { stroke: var(--color-line); stroke-width: 1; }
.chat-bubble:hover { border-color: var(--color-primary-bright); background: #232323; }
.chat-bubble:hover .chat-tail-fill { fill: #232323; }
.chat-bubble:hover .chat-tail-line { stroke: var(--color-primary-bright); }

.chat-meta { display: flex; align-items: center; gap: 7px; }
.chat-meta img { flex: none; opacity: .85; }
.chat-from {
  font-size: 11px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--color-text-soft);
}
.chat-time {
  margin-left: auto; font-family: var(--font-facts);
  font-size: 11px; letter-spacing: .04em; color: var(--color-muted);
}
.chat-title {
  display: block; margin-top: 9px;
  font-family: var(--font-display); text-transform: uppercase;
  font-size: 17px; line-height: 1.1; color: var(--color-secondary);
}
.chat-text {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; margin-top: 6px;
  font-size: 13px; line-height: 1.45; color: var(--color-muted);
}
.chat-more {
  display: inline-block; margin-top: 10px;
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--color-primary-bright);
}
.chat-bubble:hover .chat-more { color: var(--color-secondary); }

/* Tipp-Indikator: eckige Blöcke statt runder Punkte — bleibt in der Formensprache */
.chat-typing {
  display: flex; align-items: center; gap: 5px; padding: 11px 13px;
  background: var(--color-dark-raised); border: 1px solid var(--color-line);
  border-radius: var(--radius);
}
.chat-typing span {
  width: 5px; height: 5px; background: var(--color-muted);
  animation: chat-tippen 1.1s ease-in-out infinite;
}
.chat-typing span:nth-child(2) { animation-delay: .18s; }
.chat-typing span:nth-child(3) { animation-delay: .36s; }
@keyframes chat-tippen { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; } }

.chat-all {
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--color-muted);
  padding-left: 2px;
}
.chat-all:hover { color: var(--color-primary-bright); }

@media (prefers-reduced-motion: reduce) {
  .chat-typing { display: none; }
  .chat-typing span { animation: none; }
}

/* ==========================================================================
   20. CTA-IMPULS — Primärbuttons machen gelegentlich auf sich aufmerksam
   Bewusst NICHT über `transform` am Button: Der Sticky-CTA nutzt transform
   bereits für sein Ein- und Ausblenden, eine zweite Quelle würde das
   überschreiben. Stattdessen laufen Lichtband und Aufhellung auf
   Pseudo-Elementen — die kollidieren mit nichts und sind compositor-billig.
   Ausgelöst per Klasse `.btn-impuls` aus site.js.
   ========================================================================== */
/* `position: relative` und `overflow: hidden` stehen bei `.btn` (Abschnitt 4) —
   siehe Begründung dort. */
.btn-primary::before,
.btn-primary::after { content: ""; position: absolute; pointer-events: none; opacity: 0; }
/* Aufhellung der Fläche — kurzer „Blitz" */
.btn-primary::before { inset: 0; background: var(--color-text-soft); }
/* Schräges Lichtband, das einmal über den Button wandert (Metall-Reflex) */
.btn-primary::after {
  top: -20%; bottom: -20%; left: 0; width: 42%;
  background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,.42) 50%, transparent 100%);
  transform: translateX(-220%) skewX(-14deg);
}
/* Kurzer Größen-Kick. Bewusst über die EIGENSTÄNDIGE `scale`-Eigenschaft und
   nicht über `transform`: Der Sticky-CTA benutzt transform für sein Ein- und
   Ausblenden, `.btn:active` für den Druckpunkt. `scale` ist eine separate
   Eigenschaft und wird mit beiden zusammen angewandt statt sie zu ersetzen. */
/* Harte Verzögerung ohne Überschwingen — dieselbe Kurve wie die
   Button-Übergänge. Ein federndes Zurückschwingen wirkt weich und
   widerspricht der mechanischen Formensprache des CD. */
.btn-impuls        { animation: cta-kick .5s cubic-bezier(.22,1,.36,1); }
.btn-impuls::before { animation: cta-blitz .55s ease-out; }
.btn-impuls::after  { animation: cta-band .7s ease-in-out; }
@keyframes cta-kick  { 0% { scale: 1; } 42% { scale: 1.05; } 100% { scale: 1; } }
@keyframes cta-blitz { 0% { opacity: 0; } 25% { opacity: .2; } 100% { opacity: 0; } }
@keyframes cta-band {
  0%   { opacity: 1; transform: translateX(-220%) skewX(-14deg); }
  100% { opacity: 1; transform: translateX(340%)  skewX(-14deg); }
}

/* Großer CTA im Abschluss-Claim der Rückblick-Sequenz */
.btn-gross { padding: 21px 48px; font-size: 17px; }

@media (prefers-reduced-motion: reduce) {
  .btn-impuls::before, .btn-impuls::after { animation: none; }
}

/* ==========================================================================
   21. FAQ — klare Themen, große Touch-Flächen, native Akkordeons
   ========================================================================== */
.site-wordmark { display: none; }
@media (min-width: 1200px) { .site-wordmark { display: block; } }
/* Der zusätzliche Menüpunkt muss auch im mobilen Querformat erreichbar sein. */
.mobile-menu { overflow-y: auto; }
@media (max-height: 620px) {
  .mobile-menu { --menu-padding: 32px; justify-content: flex-start; gap: 16px; }
  .mobile-menu .nav-link { font-size: 23px; }
}
.faq-skip { position: fixed; top: 8px; left: 20px; z-index: 80; padding: 12px 20px; background: var(--color-text-soft); color: var(--color-dark); transform: translateY(-160%); }
.faq-skip:focus { transform: translateY(0); }
.faq-page :is(a, summary):focus-visible { outline: 2px solid var(--color-primary-bright); outline-offset: 5px; }
.faq-head { position: relative; overflow: hidden; padding-bottom: var(--sp-6); }
.faq-head-layout { display: grid; grid-template-columns: minmax(0, 1fr) 240px; align-items: center; gap: var(--sp-5); }
.faq-head .faq-eyebrow { color: var(--color-text-soft); display: flex; align-items: center; gap: 10px; margin: 0 0 24px; }
.faq-eyebrow > span { width: 8px; height: 8px; background: var(--color-primary-bright); }
.faq-head h1 { white-space: pre-line; overflow-wrap: anywhere; }
.faq-head [data-faq-intro] { color: #b5b5ad; max-width: 53ch; font-size: 18px; margin-top: 24px; }
.faq-head-art { position: relative; padding-bottom: 64px; text-align: center; transform: rotate(8deg); user-select: none; }
.faq-head-art > span { font-family: var(--font-display); font-size: 200px; line-height: 1; color: var(--color-primary-bright); }
.faq-head-art > span + span { color: transparent; -webkit-text-stroke: 1px var(--color-primary-bright); margin-left: -8px; }
.faq-head-art p { position: absolute; inset: auto 0 0; color: var(--color-text-soft); font-size: 13px; letter-spacing: .08em; line-height: 1.5; margin: 0; }
.faq-content { padding-block: var(--sp-6) var(--sp-7); scroll-margin-top: 96px; }
.faq-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.faq-sidebar { position: sticky; top: 104px; }
.faq-sidebar > .caption { color: #b5b5ad; margin-bottom: 20px; }
.faq-topics { display: grid; }
.faq-topics a { display: flex; align-items: center; gap: 12px; min-height: 58px; border-bottom: 1px solid var(--color-line); font-weight: 600; font-size: 15px; transition: color .2s, background .2s; }
.faq-topics a:hover { color: var(--color-primary-bright); background: rgba(65,169,0,.05); }
.faq-topic-number { font-family: var(--font-facts); font-size: 12px; color: #aaa; }
.faq-topic-arrow { margin-left: auto; color: var(--color-primary-bright); font-size: 20px; }
.faq-hint { color: #aaa; font-size: 14px; margin-top: 32px; }
.faq-groups { min-width: 0; }
.faq-group { scroll-margin-top: 100px; }
.faq-group + .faq-group { margin-top: var(--sp-6); }
.faq-group-heading { display: flex; align-items: baseline; gap: 14px; margin-bottom: 24px; }
.faq-group-heading > .facts { color: var(--color-primary-bright); font-size: 16px; }
.faq-group-heading h2 { font-size: clamp(24px, 3vw, 32px); line-height: 1.15; }
.faq-count { margin-left: auto; color: #aaa; font-size: 12px; white-space: nowrap; }
.faq-items { border-top: 1px solid var(--color-line); }
.faq-item { position: relative; box-shadow: inset 0 -1px var(--color-line); transition: background .25s; }
.faq-item[open] { background: #131710; }
.faq-item.is-animating { overflow: hidden; }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 20px; list-style: none; cursor: pointer; font-size: 18px; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { content: ''; }
.faq-item summary:hover { color: var(--color-primary-bright); }
.faq-item summary:focus-visible { outline-offset: -3px; }
.faq-icon { position: relative; width: 30px; height: 30px; flex: 0 0 30px; border: 1px solid #4c4c45; border-radius: 50%; transition: background .25s, border-color .25s, transform .34s cubic-bezier(.22,1,.36,1); }
.faq-icon::before, .faq-icon::after { content: ''; position: absolute; background: currentColor; left: 8px; right: 8px; height: 1px; top: 13.5px; transition: transform .34s cubic-bezier(.22,1,.36,1); }
.faq-icon::after { transform: rotate(90deg); }
.faq-item.is-expanded .faq-icon, .faq-item[open]:not(.is-animating) .faq-icon { background: var(--color-primary-bright); border-color: var(--color-primary-bright); color: var(--color-dark); transform: rotate(180deg); }
.faq-item.is-expanded .faq-icon::after, .faq-item[open]:not(.is-animating) .faq-icon::after { transform: rotate(0); }
.faq-answer-inner { padding: 0 74px 28px 20px; color: #c4c6bf; overflow-wrap: anywhere; }
.faq-answer-inner > * + * { margin-top: 14px; }
.faq-answer-inner :is(h2,h3) { font-family: var(--font-body); font-size: 18px; font-weight: 700; color: var(--color-text-soft); }
.faq-answer-inner :is(ul,ol) { padding-left: 24px; }
.faq-answer-inner ul { list-style: disc; }
.faq-answer-inner ol { list-style: decimal; }
.faq-answer-inner a { color: var(--color-text-soft); text-decoration: underline; text-decoration-color: var(--color-primary-bright); text-underline-offset: 4px; }
.faq-answer-inner a:hover { color: var(--color-primary-bright); }
.faq-empty { padding-block: 24px; }
.faq-empty p { color: #b5b5ad; margin-block: 24px; }
.faq-outro { border-top: 1px solid var(--color-line); padding-block: var(--sp-6); background: var(--color-dark-raised); }
.faq-outro-layout { display: flex; justify-content: space-between; align-items: center; gap: 32px; }
.faq-outro .caption { color: #b5b5ad; margin-bottom: 12px; }
.faq-outro .btn { flex-shrink: 0; gap: 24px; }
@media (max-width: 900px) {
  .faq-layout { grid-template-columns: 190px minmax(0, 1fr); gap: 32px; }
  .faq-head-layout { grid-template-columns: minmax(0, 1fr) 160px; }
  .faq-head-art > span { font-size: 150px; }
}
@media (max-width: 700px) {
  .faq-head { padding-block: 112px 40px; }
  .faq-head-layout, .faq-layout { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .faq-head-art { display: none; }
  .faq-head h1 { font-size: clamp(36px, 9vw, 60px); }
  .faq-head [data-faq-intro] { font-size: 16px; }
  .faq-content { padding-block: 32px 64px; }
  .faq-sidebar { position: static; }
  .faq-sidebar > .caption { margin-bottom: 12px; }
  .faq-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .faq-topics a { border: 1px solid var(--color-line); border-radius: var(--radius); padding: 12px; font-size: 13px; min-height: 56px; gap: 8px; }
  .faq-topic-number, .faq-hint { display: none; }
  .faq-topic-arrow { font-size: 16px; }
  .faq-group + .faq-group { margin-top: 40px; }
  .faq-group-heading { gap: 10px; margin-bottom: 16px; }
  .faq-group-heading h2 { font-size: 25px; }
  .faq-item summary { padding: 20px 12px; gap: 16px; font-size: 16px; min-height: 72px; }
  .faq-answer-inner { padding: 0 16px 24px 12px; font-size: 16px; }
  .faq-outro-layout { flex-direction: column; align-items: flex-start; gap: 24px; }
  .faq-outro { padding-block: 40px; }
  .faq-outro .btn { width: 100%; }
  .faq-page footer { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  .faq-item, .faq-icon, .faq-icon::after, .faq-topics a { transition: none; }
}

/* Readable legal pages, including long addresses on narrow screens. */
.legal-page { max-width: 880px; padding-top: 160px; padding-bottom: var(--sp-7); min-height: 65vh; overflow-wrap: anywhere; }
.legal-page h1 { margin-top: var(--sp-4); font-size: clamp(2.5rem, 8vw, 5rem); }
.legal-page .article-body { line-height: 1.75; }
.legal-page .article-body h3 { margin-top: var(--sp-5); font-size: 1.15rem; }
.legal-page .article-body ol { list-style: decimal; padding-left: 1.5em; margin-top: var(--sp-4); }