/* ============================================================
   KUNG FU & FITNESS SCHOOL WENTORF — „Zwei Welten"
   Welt A: Der Film (Shaw Brothers × Grindhouse)
   Welt B: Die Schule heute (Premium-Editorial)

   Die einzige Stilvorlage des Themes. Sie stammt aus dem HTML-Entwurf
   und ist seither um alles gewachsen, was der Umbau auf mehrere Seiten
   gebraucht hat — Seitenkopf, Verweis-Blöcke, Personenkarten,
   Burger-Menü, Formular. Eine zweite Datei für „Ergänzungen" gab es
   eine Weile; sie ist hier aufgegangen, weil bei zwei Dateien nie klar
   war, in welcher eine Regel zu suchen ist.

   Reihenfolge der Abschnitte:
     Maßskala · Grundlagen · Kopfzeile · Burger · Hero · Seitenkopf
     Welt A (Film) · Welt B (Abschnitte, Verweis-Blöcke, Personen,
     Formular) · Standardseiten · Reduced Motion

   Abstände und Schriftgrößen kommen ausschließlich aus der Maßskala
   unten. Keine neuen freien Werte einführen.
   ============================================================ */

:root{
  /* Welt A — Druckfarben des Plakats */
  --kino:      #0C0A08;   /* warmes Tiefschwarz (Kinosaal) */
  --papier:    #E9DCBA;   /* vergilbtes Plakatpapier */
  --papier-2:  #DECFA4;   /* Papier, tiefere Vergilbung / Ränder */
  --zinnober:  #C8102E;   /* Plakatrot — Hauptakzent, verbindet beide Welten */
  --zinnober-t:#9A0C23;   /* Plakatrot gedunkelt (Druckversatz) */
  --senf:      #E6B31E;   /* Senfgold — NUR Welt A */
  /* Welt B — kühles Premium-Set */
  --b-bg:      #F6F7F7;
  --b-bg-2:    #ECEEEF;
  --b-ink:     #17191B;
  --b-grau:    #6B7176;
  --b-hair:    #DDE0E2;
  /* Typo-Rollen — vier Schriften, wie im Entwurf unter design/klickdummy.

     Der frühere Satz war ein anderer: Fließtext in der Serife Newsreader,
     Überschriften in ultra-schmalem Archivo (font-stretch 62–72 %) mit
     leicht gesperrten Versalien — Plakatsprache. Jetzt trägt eine
     Grotesk den Text, und die Überschriften laufen in normaler Breite,
     dafür eng gesetzt (negative Laufweite). Die Serife bleibt, aber nur
     noch als kursiver Akzent in Überschriften und Zitaten. */
  --f-display: 'Archivo', 'Helvetica Neue', sans-serif;
  --f-body:    'Inter Tight', 'Helvetica Neue', Arial, sans-serif;
  --f-serif:   'Instrument Serif', Georgia, serif;
  --f-mono:    'JetBrains Mono', 'SFMono-Regular', monospace;
  --nav-h: 72px;

  /* ----------------------------------------------------------
     Maßskala

     Der Entwurf setzte jeden Abstand und jede Schriftgröße frei —
     19 feste Schriftgrößen samt Halbschritten, 14 gap-Werte, fast
     jeder Innenabstand ein Einzelfall. Seitdem sind Seiten und
     Bausteine dazugekommen, die sich daran ausrichten müssen.
     Alles greift jetzt auf diese Stufen zu; freie Werte nur noch
     dort, wo eine Gestaltung sie wirklich braucht (Hero, Plakate).
     ---------------------------------------------------------- */

  /* Abstände, feste Stufen */
  --space-3xs: 4px;
  --space-2xs: 8px;
  --space-xs:  12px;
  --space-sm:  16px;
  --space-md:  20px;
  --space-lg:  28px;
  --space-xl:  40px;

  /* Abstände, mitwachsend */
  --section-y:    clamp(80px, 12vh, 150px);  /* Standardabschnitt, oben/unten */
  --section-y-lg: clamp(90px, 16vh, 180px);  /* betonter Abschnitt (Leitsatz) */
  --gap-grid:     clamp(28px, 5vw, 64px);    /* Spalten und Raster */
  --gap-head:     clamp(36px, 5.5vh, 64px);  /* Abschnittskopf → Inhalt */
  --gap-block:    clamp(56px, 9vh, 100px);   /* zwischen Teilen eines Abschnitts */
  --pad-card:     clamp(26px, 3.5vw, 44px);  /* Innenabstand von Karten */

  /* Eckenradien, feste Stufen

     Der Entwurf war durchweg kantig — Plakatsprache. Eine leichte Rundung
     nimmt der Seite die Härte, ohne die Tonlage zu wechseln. Die Stufe
     richtet sich nach der Größe der Fläche: je größer, desto runder darf
     sie sein, sonst wirkt der Radius verloren. Wie bei Abständen und
     Schriftgrößen gilt: keine freien Werte.

     Bewusst kantig bleiben die Zitate aus Welt A, deren Form etwas erzählt —
     das Plakat mit den ausgefransten Kanten, die Kino-Balken, die
     Kapitelkarten. */
  --radius-xs:  6px;   /* kleine Marken, Slots, Hinweiszeilen */
  --radius-sm: 10px;   /* Schaltflächen, Eingabefelder, Chips */
  --radius-md: 14px;   /* Bilder und einzelne Karten */
  --radius-lg: 20px;   /* Kartenraster und große Flächen */

  /* Schriftgrößen, fest */
  --fs-2xs:  10px;   /* Mikro-Marken auf Bildern */
  --fs-xs:   11px;   /* kleine Beschriftungen, Bildunterschriften */
  --fs-sm:   11px;   /* Mono-Standard: Labels, Navigation, Buttons, Filter */
  --fs-md:   13px;   /* kleiner Fließtext, Legenden */
  --fs-base: 16px;   /* Fließtext */
  --fs-lg:   17px;   /* betonter Fließtext, Eingabefelder */
  --fs-xl:   20px;   /* Wortmarke */

  /* Schriftgrößen, mitwachsend — Kurven aus dem Entwurf übernommen. Sie
     wachsen dort nicht rein mit der Fensterbreite, sondern aus einem festen
     Sockel heraus (clamp mit calc im Mittelwert): Auf mittleren Bildschirmen
     bleibt der Sprung dadurch kleiner. */
  --fs-hero:    clamp(44px, 16px + 9.5vw, 136px);   /* nur der Hero-Titel */
  --fs-display: clamp(40px, 9.5vw, 120px);          /* Kapitelkarten, Leitsatz, Abspann */
  --fs-h1:      clamp(38px, 22.4px + 4.6vw, 84px);  /* Abschnittsüberschriften */
  --fs-h2:      clamp(30px, 20.8px + 2.9vw, 56px);  /* Blocküberschriften, große Zahlen */
  --fs-h3:      clamp(22px, 17.6px + 1.4vw, 34px);  /* Kartenüberschriften */
  --fs-h4:      clamp(18px, 16px + .7vw, 24px);     /* kleine Überschriften, Zitate */
  --fs-lead:    clamp(17px, 15.2px + .55vw, 21px);  /* Einleitungen und Fließtext im Block */

  /* Laufweiten

     Die eine Größe, an der die neue Typografie hängt. Display läuft eng:
     Je größer der Grad, desto stärker wird zusammengezogen — sonst fallen
     große Überschriften auseinander. Mono läuft weit, damit Versalien in
     kleinen Graden atmen. */
  --ls-display:    -.03em;   /* Abschnitts- und Blocküberschriften */
  --ls-display-lg: -.045em;  /* Hero, Leitsatz, Abspann, Preise */
  --ls-display-sm: -.02em;   /* kleine Überschriften, FAQ-Fragen */
  --ls-mono:        .18em;   /* Labels und Vorzeilen */
  --ls-mono-2:      .14em;   /* Navigation, Buttons, Verweise */
  /* Instrument Serif setzt von Haus aus eng — als Auszeichnung in einer
     Überschrift stimmt das, über mehrere Zeilen Zitat kleben die Buchstaben
     aneinander. Zusammenhängende Serifen-Kursive bekommt deshalb Luft. */
  --ls-serif:       .015em;  /* Zitate und kursive Serifen-Zeilen */
}

/* Auf Handys sitzen die Abschnitte enger: drei Viertel des Standardwertes.
   Weil hier die Variable selbst überschrieben wird, ziehen alle Stellen mit —
   auch die, die sie in einer Rechnung verwenden (etwa der erste Abschnitt
   einer Seite, der die Kopfzeilenhöhe dazuzählt). --section-y-lg behält seine
   Betonung. */
@media (max-width:670px){
  :root{ --section-y: calc(clamp(80px, 12vh, 150px) * .5); }
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
html.lenis{ scroll-behavior:auto; height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto; }

body{
  font-family:var(--f-body);
  font-size:var(--fs-base);
  font-optical-sizing:auto;
  /* Inter Tight hat keine echte Kursive und keine fetten Schnitte jenseits
     von 700 — der Browser soll sich keine ausrechnen. */
  font-synthesis-weight:none;
  background:var(--b-bg);
  color:var(--b-ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg,video{ display:block; max-width:100%; }
a{ color:inherit; }
button{ font:inherit; cursor:pointer; background:none; border:none; color:inherit; }

::selection{ background:var(--zinnober); color:#fff; }

/* Sichtbarer Tastatur-Fokus — Qualitätsboden. Ohne eigenen Radius: Der
   Umriss übernimmt die Rundung des Elements, das gerade den Fokus hat —
   ein fester Wert hier würde einer Schaltfläche im Fokus ihre Ecken
   geradebiegen. */
:focus-visible{ outline:3px solid var(--zinnober); outline-offset:3px; }

.skip-link{
  position:fixed; top:-100px; left:16px; z-index:999;
  background:var(--b-ink); color:#fff; padding:10px 18px;
  border-radius:var(--radius-sm);
  font-family:var(--f-mono); font-size:var(--fs-sm); letter-spacing:var(--ls-mono-2);
  text-transform:uppercase; transition:top .2s;
}
.skip-link:focus{ top:12px; }

/* ---------- Display-Typo-Helfer ----------

   .disp trägt die ganz großen Titel: Hero, Wortmarke, Abspann. Sie stehen
   weiter in Versalien — das ist der Rest Plakat, den die Seite behält. Die
   Abschnitts- und Kartenüberschriften weiter unten tun das nicht mehr; sie
   laufen in gemischter Schreibung, wie im Entwurf. */
.disp{
  font-family:var(--f-display);
  font-weight:800;
  text-transform:uppercase;
  line-height:.86;
  letter-spacing:var(--ls-display-lg);
}

/* Kursives im Fließtext. Inter Tight bringt keine echte Kursive mit; der
   Browser würde sie sonst schräg rechnen und die Buchstabenformen verzerren.
   Betonungen übernimmt deshalb dieselbe Serife wie die Akzente darunter. */
p em, p i, li em, li i, figcaption em{
  font-family:var(--f-serif); font-style:italic; letter-spacing:var(--ls-serif);
}

/* Der kursive Akzent in Überschriften und Zitaten — die eine Stelle, an der
   die Seite „Film" sagt. Vorher stand hier aufrechtes Archivo in Zinnober;
   jetzt die Serife, kursiv. Sie sitzt optisch etwas höher als die Grotesk
   daneben, deshalb kein zusätzlicher Ausgleich. */
.serif,
h1 em, h2 em, h3 em{
  font-family:var(--f-serif); font-style:italic; font-weight:400;
  letter-spacing:-.01em; color:var(--zinnober);
}

.mono{
  font-family:var(--f-mono); font-size:var(--fs-sm); letter-spacing:var(--ls-mono);
  text-transform:uppercase; font-weight:500;
}

/* ---------- Icons (Lucide, inline eingebunden) ---------- */
/* Ein Icon verhält sich wie ein Schriftzeichen: Es übernimmt Schriftgröße
   und Textfarbe seiner Umgebung. Dadurch wirken bestehende Regeln wie
   font-size oder color unverändert weiter — auch die in Medienabfragen. */
.icon{
  width:1em; height:1em;
  display:inline-block; flex:none;
  vertical-align:-.125em;
}

.wrap{ width:min(1240px, 92vw); margin-inline:auto; }

/* ============================================================
   STICKY NAV — Welt-B-Sprache, immer erreichbar
   ============================================================ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:200; height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between;
  padding-inline:clamp(16px, 4vw, 40px);
  background:color-mix(in srgb, var(--b-bg) 88%, transparent);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--b-hair);
  transition:background .5s, border-color .5s, color .5s;
}
.nav.nav--kino{
  background:color-mix(in srgb, var(--kino) 82%, transparent);
  border-color:#2a2620; color:var(--papier);
}
.nav__brand{ display:flex; align-items:center; gap:var(--space-xs); text-decoration:none; }

/* Die Beizeile rechts neben der Wortmarke (brand.subtitle) ist derzeit
   auskommentiert; die vier Regeln dafür bleiben stehen, damit sie beim
   Wiedereinschalten in jedem Zustand der Kopfzeile sitzt.

   Wortmarke, zweizeilig wie im Entwurf. Vorher stand hier eine Zeile in
   Versalien (.disp, 20px); jetzt der ausgeschriebene Name in gemischter
   Schreibung, eng gesetzt und klein — er soll die Kopfzeile tragen, nicht
   beherrschen. Die Größe wächst zwischen Telefon und Rechner um zwei
   Punkte mit. */
.nav__brand-txt{ display:flex; flex-direction:column; line-height:1.14; }
.nav__brand-name{
  font-family:var(--f-display); font-weight:700;
  font-size:clamp(13px, 1.1vw, 15px);
  letter-spacing:-.025em; white-space:nowrap;
}
/* Die zweite Zeile tritt zurück — über die Deckkraft statt über eine feste
   Farbe, damit sie das auch über dem dunklen Hero und im Filmteil tut. */
.nav__brand-name--2{ font-weight:600; opacity:.62; }

.nav__brand .mono{ font-size:var(--fs-2xs); letter-spacing:var(--ls-mono-2); color:var(--b-grau); }
.nav--kino .nav__brand .mono{ color:var(--papier-2); }

/* Über dem dunklen Hero tritt die Kopfzeile zurück und lässt das Bild ganz
   durch; sobald der Hero durchgescrollt ist, füllt sie sich wieder. Die
   Klasse setzt js/whkd.js — der Übergang steckt schon in .nav. */
.nav--ueber-hero{
  background:transparent;
  backdrop-filter:none; -webkit-backdrop-filter:none;
  border-bottom-color:transparent;
  color:#fff;
}
/* Ein weicher Verlauf unter der Zeile hält sie auch über hellen Motiven
   lesbar, ohne als Balken zu wirken. */
.nav--ueber-hero::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(rgba(12,10,8,.55), rgba(12,10,8,0));
}
.nav--ueber-hero .nav__brand .mono{ color:rgba(255,255,255,.72); }
.nav--ueber-hero .nav__links a{ color:#fff; opacity:.85; }
.nav--ueber-hero .nav__links a:hover{ opacity:1; }
.nav--ueber-hero .nav__burger span{ background:#fff; }

/* Bei offenem Menü liegt der helle Overlay-Grund darunter — dann braucht die
   Kopfzeile ihre eigene Fläche zurück, sonst steht Weiß auf Weiß. */
body.nav-open .nav--ueber-hero{
  background:color-mix(in srgb, var(--b-bg) 88%, transparent);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom-color:var(--b-hair); color:var(--b-ink);
}
body.nav-open .nav--ueber-hero::before{ display:none; }
body.nav-open .nav--ueber-hero .nav__links a{ color:var(--b-ink); }
body.nav-open .nav--ueber-hero .nav__brand .mono{ color:var(--b-grau); }
body.nav-open .nav--ueber-hero .nav__burger span{ background:var(--b-ink); }
.nav__links{ display:flex; gap:clamp(14px,2.4vw,30px); list-style:none; align-items:center; }
.nav__links a{
  font-family:var(--f-mono); font-size:var(--fs-sm); letter-spacing:var(--ls-mono-2); text-transform:uppercase;
  text-decoration:none; opacity:.75; transition:opacity .2s;
  /* Fünf Seitennamen statt vier kurzer Anker — ohne dies bricht die Zeile um. */
  white-space:nowrap;
}
.nav__links a:hover{ opacity:1; }

/* Instagram: nur das Zeichen, ohne Wort. Es steht als letztes in der Reihe
   und bleibt auch dann, wenn die Seitennamen dem Burger weichen — ein Icon
   braucht keine Breite. Die Farbe kommt von der Kopfzeile, damit es im
   Filmteil und über dem Hero mitzieht; nur die Größe wird gesetzt, weil
   .nav__links a die Schriftgröße der Menüpunkte vorgibt. */
.nav__links a.nav__social{
  display:flex; align-items:center;
  font-size:20px;
}
.nav__links a.nav__social:hover{ color:var(--zinnober); }
.nav__social:focus-visible{ outline:2px solid var(--zinnober); outline-offset:3px; }

/* Der Umschaltpunkt zum Burger-Menü steht weiter unten bei den
   Menü-Regeln — hier stünde sonst eine zweite, abweichende Breite. */

/* --- Burger und Menü-Overlay --- */

/* Der Entwurf hatte vier kurze Ankerlinks; heute stehen dort fünf Seiten
   mit längeren Namen. Ohne nowrap brechen "Unsere Schule" und "Stundenplan
   & Preise" um und sprengen die Kopfzeile. Der Umschaltpunkt zum Burger
   liegt deshalb bei 1080px statt bei 820px. */


/* Verbandslogo links vor der Wortmarke. */
.nav__logo {
  width: 44px;
  height: 44px;
  flex: none;
  object-fit: contain;
}

/* Zwischen 1080px und 1300px wird es knapp — dort entfällt zuerst die
   Unterzeile der Wortmarke, bevor das Menü ganz weicht. */
@media (max-width: 1300px) {
  .nav__brand .mono { display: none; }
}
@media (max-width: 420px) {
  /* Auf sehr schmalen Geräten hätte die Wortmarke neben Logo und Burger
     sonst zu wenig Platz. */
  .nav__logo { width: 36px; height: 36px; }
}

.nav__burger-item { display: none; }

.nav__burger {
  display: grid;
  gap: var(--space-3xs);
  padding: var(--space-2xs) var(--space-3xs);
  background: none;
  border: 0;
  cursor: pointer;
}
.nav__burger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--b-ink);
  transition: transform .25s ease, opacity .2s ease;
}
.nav--kino .nav__burger span { background: var(--papier); }

/* Aufgeklappt wird aus dem Burger ein Kreuz. */
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.navmenu {
  position: fixed;
  inset: var(--nav-h) 0 0 0;
  z-index: 190;
  background: var(--b-bg);
  border-top: 1px solid var(--b-hair);
  padding: var(--gap-head) clamp(16px, 6vw, 40px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.navmenu[hidden] { display: none; }

.navmenu ul {
  list-style: none;
  margin: 0 0 var(--space-xl);
  padding: 0;
  display: grid;
  gap: var(--space-3xs);
}
/* Dieselbe Schrift und Stärke wie die Menüpunkte am Desktop (.nav__links a):
   Mono, normale Stärke, gesperrt und in Großbuchstaben. Nur der Schriftgrad
   ist größer, damit die Ziele mit dem Finger gut zu treffen sind. */
.navmenu a {
  display: block;
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--b-hair);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(24px, 6.5vw, 36px);
  line-height: 1.15;
  letter-spacing: var(--ls-display);
  text-decoration: none;
  color: var(--b-ink);
}
.navmenu a[aria-current="page"] { color: var(--zinnober); }

/* Solange das Menü offen ist, soll die Seite darunter nicht mitscrollen. */
body.nav-open { overflow: hidden; }

@media (max-width: 1080px) {
  .nav__burger-item { display: flex; }
  .nav__links li.nav__hide-m { display: none; }
}


/* Mit Tastatur bedienbar halten. */
.nav__burger:focus-visible,
.navmenu a:focus-visible { outline: 2px solid var(--zinnober); outline-offset: 3px; }

/* ============================================================
   HERO — Welt B mit einem einzigen Welt-A-Fragment
   ============================================================ */
.hero{
  min-height:100svh; position:relative; overflow:clip;
  display:grid; align-content:center;
  padding:calc(var(--nav-h) + 8vh) 0 10vh;
  background:var(--b-bg);
}
.hero__eyebrow{ color:var(--b-grau); margin-bottom:var(--space-md); display:flex; gap:var(--space-sm); align-items:center; }

@media (max-width:670px){
  .hero__eyebrow{ display: none;}

  .hero {
  padding: calc(var(--nav-h) + 5vh) 0 10vh;
  }
}

.hero__title{
  font-size:var(--fs-hero);
  line-height:.84;
  color:var(--b-ink);
  max-width:11ch;
}
/* Im Titel wird das betonte Wort zur kursiven Serife und tritt eine Spur
   zurück — Versalien und Kursive tragen unterschiedlich weit. */
.hero__title em{
  font-family:var(--f-serif); font-style:italic; font-weight:400;
  font-size:.74em; text-transform:none; letter-spacing:0; color:var(--zinnober);
}
.hero__sub{
  margin-top:var(--space-lg); max-width:52ch; font-size:var(--fs-lead);
  line-height:1.55; color:var(--b-grau); font-weight:400;
}
.hero__sub strong{ color:var(--b-ink); font-weight:600; }
.hero__ctas{ display:flex; gap:var(--space-sm); margin-top:var(--space-xl); flex-wrap:wrap; }
.btn{
  display:inline-flex; align-items:center; gap:var(--space-xs); text-decoration:none;
  font-family:var(--f-mono); font-size:var(--fs-sm); font-weight:500;
  letter-spacing:var(--ls-mono-2); text-transform:uppercase;
  /* Die Polsterung hängt an der Schriftgröße, nicht an festen Pixeln. Als
     die Beschriftung mit der neuen Typografie von 13px auf 11px ging, blieben
     die alten 16/26px stehen — der Text saß seitdem verloren in einer viel zu
     großen Fläche. 1.9em sind bei 11px rund 21px und wachsen mit, falls die
     Größe je wieder steigt.

     Die Höhe steht dagegen fest: 46px sind auf dem Telefon ein sicher zu
     treffendes Ziel, unabhängig davon, wie klein die Beschriftung ist. */
  padding:0 1.9em; min-height:46px; border-radius:var(--radius-sm);
  transition:transform .15s, background .2s, color .2s;
}
.btn:active{ transform:scale(.97); }
.btn--solid{ background:var(--zinnober); color:#fff; }
.btn--solid:hover{ background:var(--zinnober-t); }
.btn--ghost{ border:1px solid var(--b-ink); color:var(--b-ink); }
.btn--ghost:hover{ background:var(--b-ink); color:var(--b-bg); }

/* Hintergrund des Heros: Bild oder Video über die ganze Fläche, entsättigt und
   blass. Beides sitzt in derselben Ebene — welche Quelle es ist, entscheidet
   die Vorlage, nicht das Stylesheet.

   --hero-film regelt, wie deutlich der Grund durchkommt. Unter etwa 20 % ist
   kaum noch Bewegung zu ahnen, über etwa 45 % beginnt der Fließtext zu leiden. */
.hero{ --hero-film:.26; }

/* ---------- Feststehender Hintergrund ----------
   Das Bild bleibt beim Scrollen stehen, der Inhalt schiebt sich darüber
   hinweg. Dafür hängt die Bildebene am Fenster (position:fixed) statt am
   Abschnitt und liegt mit z-index:-1 hinter dem gesamten Seiteninhalt — die
   folgenden Abschnitte decken sie zu wie ein Vorhang, der hochgeht.

   Zwei Bedingungen hängen daran:
   • Jeder Abschnitt braucht eine eigene Hintergrundfarbe (siehe .sec oben) —
     sonst schiene das Bild hindurch.
   • Der Hero selbst darf keine haben, sonst deckte er sein eigenes Bild zu.

   Kein background-attachment:fixed: Das ruckelt auf iOS und arbeitet nicht
   mit einem Video. Lenis scrollt das Fenster selbst, feste Ebenen bleiben
   dabei stehen. */
.hero{ background:transparent; }
.hero__media{ position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:clip; }
/* <picture> steht nur um das Bild herum, wenn es eine schmale Fassung gibt —
   es muss die Fläche durchreichen, sonst fällt die Höhe des Bildes zusammen. */
.hero__media picture{ display:block; width:100%; height:100%; }
.hero__media-el{
  width:100%; height:100%; object-fit:cover; object-position:50% 30%;
  filter:grayscale(1) contrast(1.06) brightness(1.06);
  opacity:var(--hero-film);
  /* Ein langsamer Atem: Das Bild wächst über achtzehn Sekunden um vierzehn
     Prozent und geht wieder zurück (alternate). Es bleibt dabei immer über
     100 % — darunter kämen unter dem Rand des Fensters Ränder hervor.
     Bei „Bewegung reduzieren" steht es still; das regelt die globale Regel
     am Ende der Datei. */
  transform-origin:50% 45%;
  animation:heroAtem 18s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes heroAtem{
  from{ transform:scale(1); }
  to  { transform:scale(1.14); }
}
/* Wäsche in der Seitenfarbe: links deckend, nach rechts auslaufend — dort steht
   die Schlagzeile, dort muss der Grund ruhig sein. */
/* Die Wäsche gehört zum Bild, nicht zum Inhalt — sie steht deshalb ebenso
   fest. Sie folgt der Bildebene im Quelltext und liegt damit über ihr. */
.hero::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(96deg,
    var(--b-bg) 4%,
    color-mix(in srgb, var(--b-bg) 42%, transparent) 58%,
    transparent 100%);
}
.hero .wrap{ position:relative; z-index:2; }
@media (max-width:900px){
  /* Hochkant läuft dieselbe Wäsche von oben nach unten statt von links nach
     rechts: oben bleibt der Grund offen, nach unten deckt sie zu — dort stehen
     Text und Buttons. Sie bleibt bis unten durchscheinend, damit der
     Hintergrund so präsent ist wie am Desktop. */
  .hero__media-el{ object-position:50% 38%; }
  .hero::after{
    background:linear-gradient(176deg,
      transparent 0%,
      color-mix(in srgb, var(--b-bg) 45%, transparent) 44%,
      color-mix(in srgb, var(--b-bg) 72%, transparent) 100%);
  }
  .hero{ padding-bottom:6vh; }
}

/* ---------- Kino-Letterbox: Balken fahren im Film ein ---------- */
.lb{ position:fixed; left:0; right:0; height:5.5vh; background:#000; z-index:190; pointer-events:none; }
.lb--top{ top:0; transform:translateY(-101%); }
.lb--bottom{ bottom:0; transform:translateY(101%); }

/* Projektor-Flackern — kaum wahrnehmbare Helligkeitsschwankung, nur Welt A */
.film__flicker{
  position:absolute; inset:0; z-index:4; pointer-events:none;
  background:radial-gradient(85% 60% at 50% 45%, rgba(233,220,186,.05), transparent 75%);
  animation:flicker 5.2s steps(6) infinite;
}
@keyframes flicker{
  0%,100%{ opacity:.5; } 17%{ opacity:.9; } 34%{ opacity:.4; }
  52%{ opacity:.75; } 71%{ opacity:.35; } 88%{ opacity:.8; }
}

/* Scroll-Progress: Zinnober-Faden unter der Nav */
.progress{
  position:fixed; top:0; left:0; right:0; height:3px; z-index:220;
  background:var(--zinnober); transform-origin:0 50%; transform:scaleX(0);
}

/* Anker landen unter der Sticky-Nav */
section[id], div[id="transition"]{ scroll-margin-top:72px; }

/* Typo-Feinschliff */
h1,h2,h3{ text-wrap:balance; }
.faq summary{ transition:color .2s; }
.faq summary:hover{ color:var(--zinnober); }
.btn{ will-change:transform; }
.btn--solid:hover{ transform:translateY(-1px); }
.sticky-cta.is-off{ display:none; }

/* ============================================================
   SEITENKOPF der Unterseiten
   ============================================================ */

/* Einheitlicher Kopf der Unterseiten. Nimmt Schrift und Farben der Seite
   auf: Archivo in gemischter Schreibung wie die Abschnittsüberschriften, der
   Zinnober-Strich der Mono-Zeilen, grauer Fließtext. Oben ist Platz für die
   fest stehende Kopfzeile eingerechnet. */

.pagehead {
  padding: calc(var(--nav-h) + var(--section-y)) 0 var(--gap-head);
  background: var(--b-bg);
  border-bottom: 1px solid var(--b-hair);
}

.pagehead__rule {
  display: block;
  width: 34px;
  height: 1px;
  background: var(--zinnober);
}

.pagehead__eyebrow {
  display: block;
  margin-top: var(--space-sm);
  color: var(--zinnober);
}

.pagehead__title {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: 1.02;
  letter-spacing: var(--ls-display);
  text-wrap: balance;
  color: var(--b-ink);
  margin-top: var(--space-sm);
}

.pagehead__lead {
  margin-top: var(--space-md);
  max-width: 60ch;
  font-size: var(--fs-lg);
  color: var(--b-grau);
}

/* Der folgende Abschnitt braucht oben weniger Luft — der Seitenkopf hat
   den Abstand zur Kopfzeile bereits geschaffen. */
.pagehead + .sec,
.pagehead + .ctablock { padding-top: var(--gap-head); }

/* ============================================================
   WELT A — DER FILM
   ============================================================ */
.film{ position:relative; background:var(--kino); color:var(--papier); }

/* Filmkorn + Kratzer: existiert NUR innerhalb von .film */
.film__grain{
  position:absolute; inset:0; z-index:5; pointer-events:none;
  opacity:.5; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  animation:grain .42s steps(3) infinite;
}
@keyframes grain{
  0%{ transform:translate(0,0); } 33%{ transform:translate(-6px,4px); }
  66%{ transform:translate(4px,-7px); } 100%{ transform:translate(0,0); }
}
/* Gate Weave — sehr subtiles Bildzittern des ganzen Films */
.film__weave{ animation:weave 7s ease-in-out infinite; }
@keyframes weave{
  0%,100%{ transform:translateY(0); } 24%{ transform:translateY(.6px); }
  55%{ transform:translateY(-.5px); } 80%{ transform:translateY(.3px); }
}
/* Cue Mark („Cigarette Burn") oben rechts, blitzt selten auf */
.film__cue{
  position:absolute; top:8vh; right:5vw; z-index:6; width:34px; height:34px;
  border-radius:50%; border:3px solid var(--papier);
  opacity:0; pointer-events:none;
  animation:cue 11s linear infinite;
}
@keyframes cue{
  0%,96.5%,100%{ opacity:0; } 97%,98.2%{ opacity:.75; }
}
/* VHS-„Kisseln": Scanlines + Tracking-Band — Opacity steuert JS über Scroll-Geschwindigkeit */
.film__vhs{
  position:absolute; inset:0; z-index:6; pointer-events:none; opacity:0;
  mix-blend-mode:screen; overflow:hidden;
  background:repeating-linear-gradient(0deg,
    rgba(233,220,186,.16) 0 2px, transparent 2px 5px);
}
.film__vhs::before{ /* zweite, gröbere Linienlage für den Röhren-Look */
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(0deg,
    transparent 0 90px, rgba(233,220,186,.10) 90px 92px);
}
.film__vhs::after{ /* wanderndes Tracking-Band */
  content:""; position:absolute; left:-2%; right:-2%; height:130px; top:-20%;
  background:linear-gradient(transparent, rgba(233,220,186,.5) 42%, rgba(200,16,46,.22) 58%, transparent);
  filter:blur(1.5px);
  animation:vhsband 3.4s linear infinite;
}
@keyframes vhsband{
  0%{ top:-14%; transform:skewX(0deg); }
  48%{ transform:skewX(-1.2deg); }
  100%{ top:110%; transform:skewX(.8deg); }
}

/* --- Vorhang / Filmstart --- */
.film__leader{
  min-height:70svh; display:grid; place-items:center; text-align:center;
  position:relative; padding:16vh 6vw;
}
.film__leader .mono{ color:var(--senf); }
.film__leader h2{
  font-family:var(--f-display); font-weight:800;
  text-transform:uppercase; line-height:.92; letter-spacing:var(--ls-display-lg);
  font-size:var(--fs-display); margin-top:var(--space-sm); color:var(--papier);
  text-wrap:balance;
}
.film__leader h2 em{
  font-family:var(--f-serif); font-style:italic; font-weight:400;
  text-transform:none; letter-spacing:0; color:var(--senf);
}
.film__leader p{ margin-top:var(--space-md); color:var(--papier-2); font-family:var(--f-serif); font-style:italic; letter-spacing:var(--ls-serif); font-size:var(--fs-h4); }
.film__skip{
  margin-top:var(--space-xl); display:inline-block; text-decoration:none;
  font-family:var(--f-mono); font-size:var(--fs-sm); letter-spacing:var(--ls-mono-2); text-transform:uppercase;
  color:var(--papier-2); border-bottom:1px dashed var(--papier-2); padding-bottom:4px;
}
.film__skip:hover{ color:var(--senf); border-color:var(--senf); }

/* --- Kapitelkarten (Tarantino-Zitat) --- */
.chapcard{
  min-height:46svh; display:grid; place-items:center; text-align:center;
  background:var(--kino); position:relative; padding:10vh 6vw 6vh;
}
.chapcard .mono{ color:var(--papier-2); margin-bottom:var(--space-sm); display:block; }
.chapcard h3{
  font-family:var(--f-display); font-weight:800;
  text-transform:uppercase; line-height:.92; letter-spacing:var(--ls-display-lg);
  font-size:var(--fs-display);
  color:var(--senf);
  text-shadow:0 0 60px rgba(230,179,30,.14);
}
.chapcard h3 span{ display:block; color:#fff; font-size:.42em; letter-spacing:var(--ls-display); margin-top:var(--space-sm); }

/* --- Plakat-Kapitel --- */
.poster-section{
  min-height:auto; display:grid; place-items:center;
  padding:2vh 4vw 10vh; position:relative;
}
.poster{
  position:relative; width:min(880px, 94vw);
  background:
    radial-gradient(120% 90% at 50% 0%, var(--papier) 60%, var(--papier-2) 100%);
  color:var(--kino);
  padding:clamp(28px,5vw,64px) clamp(22px,5vw,60px) clamp(34px,5vw,56px);
  box-shadow:0 40px 120px rgba(0,0,0,.55);
  overflow:hidden;
  /* ausgefranste Kanten */
  clip-path:polygon(0.6% 1.2%, 4% 0%, 12% .8%, 25% 0%, 40% 1%, 55% .2%, 70% 1.1%, 85% .1%, 96% 1%, 100% 2.5%, 99.4% 15%, 100% 30%, 99.2% 48%, 100% 65%, 99.3% 82%, 100% 97%, 96% 99.6%, 82% 99%, 66% 100%, 50% 99.2%, 34% 100%, 18% 99.1%, 6% 100%, 0.4% 98%, 1% 84%, 0% 66%, .8% 48%, 0% 30%, .7% 14%);
}
/* Sunburst hinter der Figur */
.poster__burst{
  position:absolute; inset:-32% -32% auto; aspect-ratio:1; z-index:0;
  background:repeating-conic-gradient(from 0deg,
    var(--zinnober) 0deg 6.5deg, transparent 6.5deg 15deg);
  opacity:.16; border-radius:50%;
}
.poster__inner{ position:relative; z-index:2; display:grid; grid-template-columns:1fr 1.1fr; gap:var(--space-xl); align-items:end; }
@media (max-width:720px){ .poster__inner{ grid-template-columns:1fr; } }

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 670px) {
  .poster__inner{ grid-template-columns:1fr; }
  .poster__burst{ inset:-20% -120% auto; }
}

.poster__inner__content { 
  position: relative;
}

/* Vertikale Schriftspalte (dekorativ, sparsam) */
.poster__hanzi{
  position:absolute; z-index:2; top:26px; right:22px;
  writing-mode:vertical-rl; font-family:var(--f-serif);
  font-size:var(--fs-h4); letter-spacing:.5em; font-weight:400;
  color:var(--zinnober-t); opacity:.8;
}

.poster__hanzi__mobile {
  display: none;
  position:absolute; z-index:2; top:26px; right:22px;
  writing-mode:vertical-rl; font-family:var(--f-serif);
  font-size:var(--fs-h4); letter-spacing:.5em; font-weight:400;
  color:var(--zinnober-t); opacity:.8;
}

@media only screen and (max-width: 670px) {
  .poster__hanzi {
    display: none;
  }

  .poster__hanzi__mobile {
    display: block;
  }
}

.poster__year{
  font-family:var(--f-mono); font-weight:500; color:var(--zinnober);
  font-size:var(--fs-sm); letter-spacing:var(--ls-mono); text-transform:uppercase;
  display:flex; align-items:center; gap:var(--space-xs); flex-wrap:wrap;
}
.poster__year::before{ content:""; width:34px; height:2px; background:var(--zinnober); }
.poster__year b{ flex-basis:100%; }
.poster__year b.poster__word{ font-size:var(--fs-h2); letter-spacing:var(--ls-display); }
.poster__year b{
  font-family:var(--f-serif); font-weight:400;
  font-size:var(--fs-display); line-height:1; color:var(--kino);
  letter-spacing:.05em; padding-bottom:.04em; /* Unterlängen (p, g) nicht anschneiden */
}
.poster h3{
  font-family:var(--f-display); font-weight:800; text-transform:uppercase;
  font-size:var(--fs-h1); line-height:.88; letter-spacing:var(--ls-display-lg); margin:16px 0 18px;
  color:var(--kino);
}
.poster h3 em{
  font-family:var(--f-serif); font-style:italic; font-weight:400;
  text-transform:none; letter-spacing:0; color:var(--zinnober);
}
.poster p{ font-size:var(--fs-lead); line-height:1.55; max-width:46ch; }
.poster__credit{
  margin-top:var(--space-lg); padding-top:var(--space-sm); border-top:2px solid var(--kino);
  font-family:var(--f-mono); font-size:var(--fs-sm); letter-spacing:var(--ls-mono-2); text-transform:uppercase;
  display:flex; justify-content:space-between; gap:var(--space-sm); flex-wrap:wrap;
}
.poster__credit i{ font-style:normal; color:var(--zinnober-t); }

/* Halftone-Porträt-Platzhalter (Duotone Zinnober/Schwarz) */
.halftone{
  position:relative; aspect-ratio:3/4; background:var(--papier-2);
  border:2px solid var(--kino); border-radius:var(--radius-md); overflow:hidden;
}
.halftone::after{ /* Rasterpunkte */
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(circle, rgba(12,10,8,.3) 1.1px, transparent 1.3px);
  background-size:6px 6px; mix-blend-mode:multiply; pointer-events:none;
}
.halftone__tag{
  position:absolute; left:8px; bottom:8px; z-index:3;
  background:var(--kino); color:var(--papier);
  font-family:var(--f-mono); font-size:var(--fs-2xs); letter-spacing:var(--ls-mono-2); text-transform:uppercase;
  padding:5px 8px; border-radius:var(--radius-xs);
}
/* Offset-Druckversatz beim Hover */

/* Freeze-Frame Cast-Credit (Kapitel 4) */
.cast-credit{
  position:absolute; left:10px; bottom:44px; z-index:3;
  font-family:var(--f-mono); font-size:var(--fs-2xs); letter-spacing:var(--ls-mono-2); text-transform:uppercase;
  color:#fff; background:rgba(12,10,8,.85); padding:8px 10px;
  border-left:3px solid var(--senf); border-radius:0 var(--radius-xs) var(--radius-xs) 0;
}

/* YouTube Klick-to-load-Facade (DSGVO) */
.yt{
  position:relative; margin-top:var(--space-lg); aspect-ratio:16/9; width:100%;
  background:var(--kino); border:2px solid var(--kino);
  border-radius:var(--radius-md); overflow:hidden;
}
.yt__poster{
  position:absolute; inset:0; width:100%; display:grid; place-items:center; gap:0;
  background:
    radial-gradient(80% 120% at 50% 50%, rgba(200,16,46,.25), transparent 70%),
    repeating-conic-gradient(from 8deg at 50% 50%, rgba(233,220,186,.06) 0deg 6deg, transparent 6deg 14deg),
    var(--kino);
  color:var(--papier); text-align:center; padding:var(--space-md);
}
.yt__poster:hover .yt__play{ transform:scale(1.06); background:var(--zinnober); }
.yt__play{
  width:68px; height:68px; border-radius:50%; display:grid; place-items:center;
  background:var(--zinnober-t); color:#fff; font-size:26px; transition:transform .2s, background .2s;
  margin-bottom:var(--space-sm);
}

.yt__poster .mono{ color:var(--senf); }
.yt__poster small{ display:block; margin-top:var(--space-xs); font-family:var(--f-mono); font-size:var(--fs-2xs); color:var(--papier-2); letter-spacing:.08em; text-transform:none; }
.yt iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

@media only screen and (max-width: 670px) {
  .yt__play {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--zinnober-t);
    color: #b1b1b1;
    font-size: 20px;
    transition: transform .2s, background .2s;
    margin-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
  }

  .yt__poster small{ 
    display: none; 
  }
}

/* --- Abspann --- */
.credits{
  min-height:100svh; background:var(--kino); position:relative;
  display:grid; place-items:center; text-align:center; overflow:hidden;
  padding:16vh 6vw;
}
.credits__roll{ display:grid; gap:var(--space-xl); }
.credits__roll .role{ color:var(--papier-2); font-family:var(--f-mono); font-size:var(--fs-sm); font-weight:500; letter-spacing:var(--ls-mono); text-transform:uppercase; }
.credits__roll .name{
  font-family:var(--f-display); font-weight:800; text-transform:uppercase;
  letter-spacing:var(--ls-display-lg);
  color:var(--papier); font-size:var(--fs-h3); line-height:1; margin-top:6px;
}
.credits__star .name{ color:var(--senf); font-size:var(--fs-display); }
.credits__cta{ margin-top:var(--space-xl); }

/* ============================================================
   DER SCHNITT — „Licht geht an"
   ============================================================ */
.cut{
  height:42svh; background:linear-gradient(var(--kino), var(--b-bg));
  display:grid; place-items:center;
}
.cut .mono{ color:var(--b-grau); }

/* ============================================================
   WELT B — DIE SCHULE HEUTE (Premium-Editorial, kein Grunge)
   ============================================================ */
/* Die eigene Hintergrundfarbe ist nötig, seit das Hero-Bild am Fenster hängt
   (siehe „Feststehender Hintergrund" weiter oben): Ohne sie schiene das Bild
   durch jeden Abschnitt hindurch, der keine eigene Fläche hat. */
.sec{ padding:var(--section-y) 0; background:var(--b-bg); }

/* Beginnt eine Seite unmittelbar mit einem Abschnitt, rückt dieser unter
   die fest stehende Kopfzeile — deren Höhe kommt deshalb oben hinzu.
   Startseite und Geschichte sind nicht betroffen: Hero und Filmvorspann
   bringen ihren Abstand selbst mit. */
main > .sec:first-of-type{ padding-top:calc(var(--nav-h) + var(--section-y)); }
.sec--alt{ background:var(--b-bg-2) !important;}
.sec__head{ margin-bottom:var(--gap-head); }

/* h1 gilt hier gleichberechtigt: Auf Seiten ohne eigenen Auftritt (Impressum,
   Datenschutz, Fehlerseite) ist der Seitentitel die erste Überschrift und
   soll aussehen wie eine Abschnittsüberschrift. */
.sec__head h2, .sec__head h1{
  font-family:var(--f-display); font-weight:700;
  line-height:1.02; letter-spacing:var(--ls-display); text-wrap:balance;
  font-size:var(--fs-h1); 
  /* margin-top:var(--space-sm); */
  color:var(--b-ink);
}
.sec__head p{ margin-top:var(--space-sm); color:var(--b-grau); max-width:62ch; font-size:var(--fs-lead); line-height:1.55; text-wrap:pretty; }

/* --- Leitsatz: kinetische Typografie --- */
.principle{ background:var(--b-bg); text-align:center; padding:var(--section-y) 0; }
.principle .mono{ color:var(--b-grau); }
.kinetic{
  font-family:var(--f-display); font-weight:800; text-transform:uppercase;
  letter-spacing:var(--ls-display-lg); line-height:.92; margin-top:var(--space-lg);
  font-size:var(--fs-display); color:var(--b-ink);
}
.kinetic .w{ display:inline-block; white-space:pre; }
.kinetic .word--accent{ color:var(--zinnober); }
.principle cite{ display:block; margin-top:var(--space-lg); font-family:var(--f-serif); font-style:italic; letter-spacing:var(--ls-serif); color:var(--b-grau); font-size:var(--fs-h4); }

.stages{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--b-hair); border-block:1px solid var(--b-hair); margin-top:var(--gap-block); text-align:left; }
.stage{ background:var(--b-bg); padding:var(--pad-card); }
.stage .mono{ color:var(--zinnober); }
.stage h3{ font-family:var(--f-display); font-weight:700; font-size:var(--fs-h3); letter-spacing:-.025em; line-height:1.08; margin:12px 0 12px; }
.stage p{ color:var(--b-grau); font-size:var(--fs-base); }
.principle__note{ margin-top:var(--space-xl); color:var(--b-grau); font-family:var(--f-serif); font-size:var(--fs-lead); font-style:italic; letter-spacing:var(--ls-serif); }
@media (max-width:820px){ .stages{ grid-template-columns:1fr; } }

/* --- Kinder Kung Fu (Eltern-Sektion) --- */
/* Die Rasterflächen (.approach, .areas, .schedule, .prices) sind eine
   einzige Fläche mit Haarlinien als Fugen — der Radius gehört deshalb an
   den Rahmen, und overflow:hidden schneidet die Karten an den Ecken mit. */
.approach{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1px; background:var(--b-hair); border:1px solid var(--b-hair); border-radius:var(--radius-lg); overflow:hidden; margin-top:var(--gap-head); }
.approach__item{ background:var(--b-bg); padding:var(--pad-card); }
.approach__item .mono{ color:var(--zinnober); }
/* Zwei Darstellungen für dasselbe Icon, umschaltbar über icon_style.

   Marke (Standard): das Icon steht an der Stelle der Mono-Zeile über der
   Überschrift. Es ist 1em groß — die Schriftgröße hier bestimmt also,
   wie groß es erscheint. */
.approach__item .approach__icon{ display:block; color:var(--zinnober); font-size:var(--fs-h4); line-height:1; }
.approach__item h3{ font-family:var(--f-display); font-weight:600; font-size:var(--fs-h4); letter-spacing:var(--ls-display-sm); margin:var(--space-xs) 0; line-height:1.2; }

/* Wasserzeichen: dasselbe Icon groß und blass hinter dem Text, unten rechts
   leicht über den Kartenrand hinaus, damit es als Fläche wirkt und nicht als
   zweites Bildzeichen. Die Deckkraft ist niedrig genug, dass der Fließtext
   seinen Kontrast behält — über etwa 14 % beginnt es zu stören. */
.approach--watermark .approach__item{ position:relative; overflow:hidden; }
.approach--watermark .approach__item > *{ position:relative; z-index:1; }
.approach--watermark .approach__item .approach__icon{
  position:absolute; z-index:0; right:-.08em; bottom:-.12em;
  font-size:clamp(150px, 17vw, 230px);
  opacity:.09; pointer-events:none;
}
/* Ohne vorangestellte Zeile braucht die Überschrift oben keinen Abstand. */
.approach--watermark .approach__item:has(.approach__icon) h3{ margin-top:0; }
.approach__item p{ color:var(--b-grau); font-size:var(--fs-base); }
.approach__item p b{ color:var(--b-ink); font-weight:600; }
.textmedia__lead{ display:grid; grid-template-columns:1.15fr .85fr; gap:var(--gap-grid); align-items:start; }
@media (max-width:860px){
  .textmedia__lead{ grid-template-columns:1fr; }
  /* Untereinander zuerst das Bild: Es führt in den Abschnitt ein, statt
     hinter einem langen Textblock zu verschwinden. Die Reihenfolge im
     Markup bleibt Text vor Bild — nur die Darstellung dreht sich. */
  .textmedia__figure{ order:-1; }
}
.textmedia__figure img{ width:100%; aspect-ratio:4/3.4; object-fit:cover; object-position:center 18%; border:1px solid var(--b-hair); border-radius:var(--radius-md); }
.textmedia__figure figcaption{ color:var(--b-grau); padding-top:var(--space-xs); }
.textmedia__intro{ max-width:68ch; font-size:var(--fs-lead); line-height:1.55; text-wrap:pretty; }
.textmedia__intro + .textmedia__intro{ margin-top:var(--space-sm); }
.textmedia__cta{ margin-top:var(--gap-head); display:flex; gap:var(--space-md); align-items:center; flex-wrap:wrap; }
.textmedia__cta .mono{ color:var(--b-grau); }
.textmedia__outro { margin-top: var(--gap-head); }

/* --- Trainings-Finder Wizard --- */
.finder{ border:1px solid var(--b-hair); border-radius:var(--radius-lg); background:var(--b-bg); padding:var(--pad-card); }
.finder__step .mono{ color:var(--b-grau); margin-bottom:var(--space-sm); display:block; }
.finder__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:var(--space-xs); }
.finder__opt{
  border:1px solid var(--b-hair); border-radius:var(--radius-md); background:#fff; padding:22px 20px 20px; text-align:left;
  display:grid; gap:var(--space-xs); align-content:start;
  transition:border-color .2s, transform .15s;
}
.finder__opt:hover{ border-color:var(--b-ink); transform:translateY(-2px); }
.finder__opt:hover .finder__opt-title{ color:var(--zinnober); }
.finder__opt .mono{ color:var(--b-grau); font-size:var(--fs-2xs); letter-spacing:var(--ls-mono-2); }
.finder__opt-title{
  font-family:var(--f-display); font-weight:600;
  font-size:var(--fs-h4); line-height:1.2; letter-spacing:var(--ls-display-sm);
  color:var(--b-ink); transition:color .2s;
}
.finder__opt-desc{ color:var(--b-grau); font-size:var(--fs-md); font-family:var(--f-body); line-height:1.55; }
.finder__result{ display:none; gap:var(--space-md); align-items:center; justify-content:space-between; flex-wrap:wrap; }
.finder__result.is-on{ display:flex; }
.finder__result h3{ font-family:var(--f-display); font-weight:700; font-size:var(--fs-h3); letter-spacing:-.025em; line-height:1.08; color:var(--zinnober); }
.finder__result p{ color:var(--b-grau); max-width:52ch; margin-top:6px; }
.finder__back{ font-family:var(--f-mono); font-size:var(--fs-sm); letter-spacing:var(--ls-mono-2); text-transform:uppercase; color:var(--b-grau); border-bottom:1px dashed currentColor; padding-bottom:2px; margin-top:var(--space-xs); }

/* --- Sparten --- */
.filter{ display:flex; gap:var(--space-2xs); flex-wrap:wrap; margin-bottom:var(--space-xl); }
.filter button{
  font-family:var(--f-mono); font-size:var(--fs-sm); font-weight:500;
  letter-spacing:var(--ls-mono-2); text-transform:uppercase;
  border:1px solid var(--b-hair); border-radius:var(--radius-sm); padding:9px 16px; color:var(--b-grau);
  transition:all .2s;
}
.filter button[aria-pressed="true"]{ background:var(--b-ink); color:#fff; border-color:var(--b-ink); }
.filter button:hover{ border-color:var(--b-ink); color:var(--b-ink); }
.filter button[aria-pressed="true"]:hover{ color:#fff; }

.areas{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1px; background:var(--b-hair); border:1px solid var(--b-hair); border-radius:var(--radius-lg); overflow:hidden; }
/* Ab drei Spalten ist Schluss: von allein käme oberhalb von rund 1220px eine
   vierte dazu, dann werden die Karten schmal und die Zeilen ungleich besetzt.
   Darunter bleibt es beim automatischen Umbruch — dort ändert sich nichts. */
@media (min-width:1000px){ .areas{ grid-template-columns:repeat(3,1fr); } }
.area{ background:var(--b-bg); padding:30px 28px 26px; display:grid; grid-template-rows:auto auto 1fr auto; gap:var(--space-xs); transition:background .25s; position:relative; }
.area:hover{ background:#fff; }
.area.is-hidden{ display:none; }
.area.is-flash{ outline:3px solid var(--zinnober); outline-offset:-3px; }
.area .mono{ color:var(--zinnober); font-size:var(--fs-xs); }
/* Bild zwischen Überschrift und Text. Die Karte verteilt ihre Zeilen fest —
   mit Bild kommt eine dazu, und der Textabsatz bleibt die dehnbare Zeile,
   damit „Für wen?" in allen Karten auf gleicher Höhe abschließt. */
.area:has(.area__img){ grid-template-rows:auto auto auto 1fr auto; }
.area__img{ width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:var(--radius-sm); margin:var(--space-3xs) 0; }
.area h3{ font-family:var(--f-display); font-weight:700; font-size:var(--fs-h3); letter-spacing:-.025em; line-height:1.08; }
.area p{ color:var(--b-grau); font-size:var(--fs-md); }
.area__who{ font-size:var(--fs-md); color:var(--b-ink); border-top:1px solid var(--b-hair); padding-top:var(--space-xs); }
.area__who b{ font-family:var(--f-mono); font-size:var(--fs-xs); letter-spacing:var(--ls-mono-2); text-transform:uppercase; color:var(--b-grau); display:block; margin-bottom:4px; font-weight:500; }
.area a{ font-family:var(--f-mono); font-size:var(--fs-sm); letter-spacing:var(--ls-mono-2); text-transform:uppercase; color:var(--zinnober); text-decoration:none; }
.area a:hover{ text-decoration:underline; }
.area__link { color: var(--zinnober); }

/* --- Stundenplan & Preise --- */
.schedule{ display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--b-hair); border:1px solid var(--b-hair); border-radius:var(--radius-lg); overflow:hidden; }
.schedule__day{ background:var(--b-bg); padding:22px 18px 26px; min-height:190px; }
.schedule__day h3{ font-family:var(--f-mono); font-weight:500; font-size:var(--fs-sm); letter-spacing:var(--ls-mono); text-transform:uppercase; color:var(--b-grau); border-bottom:1px solid var(--b-hair); padding-bottom:var(--space-xs); margin-bottom:var(--space-sm); }
.slot{ display:grid; gap:2px; padding:var(--space-xs); margin-bottom:var(--space-xs); border-left:3px solid var(--zinnober); border-radius:0 var(--radius-xs) var(--radius-xs) 0; background:var(--b-bg-2); }
.slot--kids{ border-color:var(--senf); }
.slot time{ font-family:var(--f-mono); font-size:var(--fs-xs); font-weight:500; letter-spacing:.1em; }
.slot span{ font-size:var(--fs-md); color:var(--b-grau); }
.schedule__legend{ display:flex; gap:var(--space-md); margin-top:var(--space-sm); flex-wrap:wrap; color:var(--b-grau); font-size:var(--fs-md); }
.schedule__legend i{ display:inline-block; width:12px; height:12px; border-radius:50%; margin-right:7px; transform:translateY(1px); }
@media (max-width:900px){ .schedule{ grid-template-columns:1fr 1fr; } }
@media (max-width:540px){ .schedule{ grid-template-columns:1fr; } }

.prices{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1px; background:var(--b-hair); border:1px solid var(--b-hair); border-radius:var(--radius-lg); overflow:hidden; margin-top:var(--space-xl); }
.price{ background:var(--b-bg); padding:34px 28px; }
.price .mono{ color:var(--b-grau); }
.price strong{ font-family:var(--f-display); font-weight:800; font-size:var(--fs-h2); letter-spacing:var(--ls-display-lg); line-height:1; display:block; margin:10px 0 6px; }
.price strong sup{ font-size:.35em; font-weight:700; letter-spacing:0; vertical-align:super; margin-left:.15em; }
.price span{ color:var(--b-grau); font-size:var(--fs-md); }
.price--free strong{ color:var(--zinnober); }
.schedule__badge{
  margin-top:var(--space-lg); display:inline-flex; gap:var(--space-xs); align-items:center;
  border:1px dashed var(--b-grau); border-radius:var(--radius-sm); padding:14px 20px; color:var(--b-ink); font-size:var(--fs-base);
}
.schedule__badge b{ font-family:var(--f-mono); font-size:var(--fs-sm); letter-spacing:var(--ls-mono-2); text-transform:uppercase; color:var(--zinnober); font-weight:500; }
.schedule__phone { color: var(--zinnober); font-weight: 600; }

/* --- Stimmen & Ohana --- */

/* Heritage-Filmstreifen — einziges Kino-Zitat in Welt B */
/* Der Streifen scrollt selbst weiter (js/whkd.js), lässt sich aber jederzeit
   mit dem Finger verschieben. Deshalb ein echter Scroll-Container statt einer
   CSS-Animation — Wischen und Schwung kommen so vom Browser.
   Der Scrollbalken bleibt verborgen, der Streifen ist ja selbstlaufend. */
.strip{
  margin-top:clamp(16px,3vh,32px); background:var(--kino); padding:16px 0;
  overflow-x:auto; overflow-y:hidden;
  touch-action:pan-x;                 /* senkrecht weiter die Seite scrollen */
  overscroll-behavior-x:contain;      /* kein Zurückblättern am Streifenende */
  scrollbar-width:none;
}
.strip::-webkit-scrollbar{ display:none; }
.strip__track{ display:flex; gap:var(--space-sm); width:max-content; }
.frame{
  position:relative; width:280px; aspect-ratio:4/3; background:var(--b-grau);
  display:grid; place-items:center; text-align:center; padding:var(--space-sm);
  /* Perforationslöcher oben+unten */
  border-block:14px solid var(--kino);
  background-image:
    linear-gradient(rgba(12,10,8,.32), rgba(12,10,8,.32)),
    radial-gradient(circle at 30% 40%, #9aa1a6, #565c61);
}
.frame::before,.frame::after{
  content:""; position:absolute; left:0; right:0; height:8px;
  background-image:radial-gradient(circle, var(--b-bg) 2.6px, transparent 3px);
  background-size:24px 8px; background-position:center;
}
.frame::before{ top:-11px; } .frame::after{ bottom:-11px; }
.frame figcaption{ color:#fff; }
.frame figcaption b{ font-family:var(--f-mono); font-weight:500; font-size:var(--fs-xs); letter-spacing:var(--ls-mono-2); text-transform:uppercase; display:block; }
.frame figcaption span{ font-size:var(--fs-md); opacity:.75; }

/* --- Verweis-Block --- */

/* Führt von der Startseite auf die Unterseiten. Übernimmt die Sprache der
   Abschnittsköpfe: Mono-Zeile in Zinnober mit Strich, Display-Überschrift,
   grauer Fließtext. Die Überschrift steht eine Stufe unter der von
   .sec__head, weil sie nur eine halbe Spalte breit ist. */

.ctablock { padding: var(--section-y) 0; background: var(--b-bg); }
.ctablock--kino { background: var(--kino); color: var(--papier); }

.ctablock__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-grid);
  align-items: center;
}
.ctablock--flip .ctablock__media { order: -1; }

.ctablock__media { margin: 0; overflow: hidden; border-radius: var(--radius-lg); }
.ctablock__media img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 520px;
  object-fit: cover;
  filter: grayscale(1) contrast(1.08);
  transition: filter .5s ease, transform .6s ease;
}
/* Ausgelöst beim Hineinscrollen, nicht beim Darüberfahren: is-inview setzt
   der Beobachter in js/whkd.js. Beim Wegscrollen fällt es zurück auf Grau.
   Vorher hing es an :hover — auf Tastbildschirmen also nie. */
.ctablock.is-inview .ctablock__media img { filter: grayscale(0) contrast(1); transform: scale(1.02); }

/* Wie .sec__head .mono */
.ctablock__body .mono {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--zinnober);
}
.ctablock__body .mono::before {
  content: "";
  width: 34px;
  height: 1px;
  background: currentColor;
}
.ctablock--kino .ctablock__body .mono { color: var(--senf); }
/* Der kursive Akzent steht hier auf Kino-Schwarz. Reiner Zinnober käme dort
   nur auf gut 3:1 — für große Schrift zulässig, aber schon knapp. Eine
   Spur Weiß hebt ihn über die Grenze, ohne die Farbe zu wechseln. */
.ctablock--kino .ctablock__body h2 em { color: color-mix(in srgb, var(--zinnober) 78%, #fff); }

/* Wie .sec__head h2, eine Größenstufe kleiner */
.ctablock__body h2 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: 1.02;
  letter-spacing: var(--ls-display);
  text-wrap: balance;
  margin-top: var(--space-sm);
}
.ctablock__body p {
  margin-top: var(--space-sm);
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--b-grau);
}
.ctablock--kino .ctablock__body p { color: var(--papier-2); }

.ctablock__body .btn { margin-top: var(--gap-head); }

.ctablock__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xl);
  margin-top: var(--space-lg);
  padding: 0;
  list-style: none;
}
.ctablock__facts b {
  display: block;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: 1;
  letter-spacing: var(--ls-display);
}
.ctablock__facts span {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-mono-2);
  text-transform: uppercase;
  color: var(--b-grau);
}
.ctablock--kino .ctablock__facts span { color: var(--papier-2); }

@media (max-width: 820px) {
  /* Bild immer über den Text — auch bei umgekehrter Anordnung am Desktop. */
  .ctablock__inner { grid-template-columns: 1fr; }
  .ctablock--flip .ctablock__media { order: 0; }
  .ctablock__media img { max-height: 320px; }
}

/* --- Bildergalerie --- */

/* Die Reihe läuft seitlich und rastet an jedem Bild ein. Auf dem Handy
   wird gewischt, am Rechner führen die Pfeile — sie erscheinen erst, wenn
   JavaScript sie einblendet und tatsächlich etwas zu blättern ist. */

.gallery{ position:relative; margin-top:var(--gap-head); }

.gallery__viewport{
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  /* Rollbalken ausblenden — geführt wird über Wischen und die Pfeile. */
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.gallery__viewport::-webkit-scrollbar{ display:none; }

.gallery__track{
  display:flex;
  gap:var(--space-sm);
  list-style:none;
  margin:0; padding:0;
}

.gallery__item{
  flex:0 0 clamp(240px, 32vw, 380px);
  scroll-snap-align:start;
}

.gallery__link{
  position:relative;
  display:block;
  text-decoration:none;
  background:var(--kino);
  border-radius:var(--radius-md);
  overflow:hidden;
}
.gallery__link img{
  width:100%; height:auto;
  aspect-ratio:4 / 3;
  object-fit:cover;
  transition:transform .5s ease;
}
.gallery__link:hover img,
.gallery__link:focus-visible img{ transform:scale(1.03); }

.gallery__caption{
  position:absolute; inset:auto 0 0 0;
  padding:var(--space-md) var(--space-sm) var(--space-xs);
  background:linear-gradient(transparent, rgba(12,10,8,.85));
  color:var(--papier);
  font-family:var(--f-mono); font-size:var(--fs-xs);
  letter-spacing:var(--ls-mono-2); text-transform:uppercase;
}

.gallery__nav{
  position:absolute; top:50%; translate:0 -50%;
  z-index:2;
  width:44px; height:44px;
  display:grid; place-items:center;
  font-size:20px;
  color:#fff;
  background:var(--zinnober);
  border:1px solid var(--zinnober);
  border-radius:var(--radius-sm);
  transition:background .2s, border-color .2s, opacity .2s;
}
.gallery__nav:hover{ background:var(--zinnober-t); border-color:var(--zinnober-t); }
.gallery__nav--prev{ left:calc(var(--space-sm) * -1); }
.gallery__nav--next{ right:calc(var(--space-sm) * -1); }
.gallery__nav[disabled]{ opacity:.25; pointer-events:none; }

@media (max-width:820px){
  /* Am Rand angeschnitten zeigen, dass es seitlich weitergeht. */
  .gallery__item{ flex-basis:78vw; }
  .gallery__nav{ display:none; }
}

/* --- Vergrößerung (Overlay) --- */

.lightbox{
  position:fixed; inset:0; z-index:300;
  display:grid;
  grid-template-rows:auto 1fr auto;
  background:color-mix(in srgb, var(--kino) 96%, transparent);
  backdrop-filter:blur(4px);
  /* Einblenden: hidden fällt zuerst weg, im nächsten Bild setzt das Skript
     die Klasse — sonst gäbe es keinen Zustand, von dem aus überblendet
     werden könnte. */
  opacity:0;
  transition:opacity .3s ease;
}
.lightbox.is-open{ opacity:1; }
.lightbox[hidden]{ display:none; }

.lightbox__stage > *{
  transition:transform .3s ease;
}
.lightbox:not(.is-open) .lightbox__stage > *{
  transform:scale(.97);
}

.lightbox__bar{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--space-sm);
  padding:var(--space-sm) clamp(16px, 4vw, 40px);
  color:var(--papier-2);
  font-family:var(--f-mono); font-size:var(--fs-xs);
  letter-spacing:var(--ls-mono-2); text-transform:uppercase;
}

.lightbox__stage{
  position:relative;
  min-height:0;   /* damit die Reihe im Raster schrumpfen darf */
}

/* Die Bilder liegen nebeneinander und rasten mittig ein — dadurch gleiten
   sie beim Blättern herein, und auf dem Handy wischt man wie in der
   Galerie darunter. */
.lightbox__track{
  display:flex;
  height:100%;
  margin:0; padding:0;
  list-style:none;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;
  -ms-overflow-style:none;
  /* Dem Browser sagen, dass hier waagerecht gewischt wird: sonst deutet er
     die Geste als Seitenscrollen und die Reihe rührt sich nicht. */
  touch-action:pan-x pinch-zoom;
}
.lightbox__track::-webkit-scrollbar{ display:none; }

.lightbox__slide{
  flex:0 0 100%;
  scroll-snap-align:center;
  display:grid; place-items:center;
  padding:0 clamp(8px, 4vw, 40px);
  min-width:0;
}
.lightbox__slide img{
  max-width:100%; max-height:100%;
  width:auto; height:auto;
  object-fit:contain;
  border-radius:var(--radius-md);
  /* Ohne dies beginnt auf dem Bild ein Ziehvorgang und die Wischgeste
     kommt nie beim Scroller an. Kein pointer-events:none — sonst fiele
     jeder Tipp auf das Bild an die Fläche dahinter und würde schließen. */
  -webkit-user-drag:none;
  user-select:none;
}

.lightbox__caption{
  padding:var(--space-md) clamp(16px, 4vw, 40px) var(--space-xl);
  color:var(--papier);
  font-size:var(--fs-base);
  line-height:1.55;
  text-align:center;
  max-width:70ch; margin-inline:auto;
  min-height:2.5em;   /* verhindert Springen bei Bildern ohne Text */
}

.lightbox__btn{
  width:48px; height:48px;
  display:grid; place-items:center;
  font-size:24px;
  color:var(--papier);
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  border-radius:var(--radius-sm);
  transition:background .2s, color .2s;
}
.lightbox__btn:hover{ background:var(--zinnober); color:#fff; border-color:var(--zinnober); }
.lightbox__btn[disabled]{ opacity:.3; pointer-events:none; }

.lightbox__nav{
  position:absolute; top:50%; translate:0 -50%;
  z-index:2;
}
.lightbox__nav--prev{ left:clamp(4px, 2vw, 24px); }
.lightbox__nav--next{ right:clamp(4px, 2vw, 24px); }

body.lightbox-open{ overflow:hidden; }

@media (max-width:820px){
  /* Daumenfreundlich: Blättern unten in der Leiste statt am Bildrand. */
  .lightbox{ grid-template-rows:auto 1fr auto auto; }
  .lightbox__nav{ position:static; translate:none; }
  .lightbox__steuerung{
    display:flex; align-items:center; justify-content:center;
    gap:var(--space-lg);
    padding:0 var(--space-sm) var(--space-lg);
  }
  .lightbox__caption{
    padding:var(--space-sm) var(--space-md);
    font-size:var(--fs-base);
    min-height:3em;
  }
  .lightbox__btn{ width:56px; height:56px; }
}
@media (min-width:821px){
  .lightbox__steuerung{ display:contents; }
}

/* --- Personen --- */

/* Kartensprache wie .area: Mono-Zeile in Zinnober, Display-Überschrift,
   grauer Fließtext, Trennlinie über der Fußzeile der Karte. */

.people {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--gap-grid);
  margin-top: var(--gap-head);
}

.person {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: var(--space-md);
  border-top: 2px solid var(--b-ink);
  padding-top: var(--space-md);
}
/* Ohne Foto beginnt die Karte direkt beim Text, statt Platz freizuhalten. */
.person--no-photo { grid-template-rows: 1fr; }

.person__figure { margin: 0; overflow: hidden; border-radius: var(--radius-md); aspect-ratio: 4 / 5; }
.person__figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.06);
}

.person__body .mono {
  display: block;
  margin-bottom: var(--space-2xs);
  font-size: var(--fs-xs);
  color: var(--zinnober);
}
.person__body h3 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: 1.08;
  letter-spacing: -.025em;
  margin-bottom: var(--space-3xs);
}
.person__rank {
  margin-bottom: var(--space-xs);
  font-family: var(--f-mono);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-mono-2);
  text-transform: uppercase;
  color: var(--b-grau);
}
.person__body p { font-size: var(--fs-base); color: var(--b-grau); }

.person__timeline {
  list-style: none;
  margin-top: var(--space-md);
  padding: 0;
  display: grid;
  gap: var(--space-xs);
}
.person__timeline li {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: var(--space-xs);
  padding-top: var(--space-xs);
  border-top: 1px solid var(--b-hair);
  font-size: var(--fs-md);
}
.person__timeline b {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--zinnober);
  font-weight: 500;
}
.person__timeline span { color: var(--b-ink); }

/* --- FAQ --- */
.faq{ max-width:820px; }
.faq details{ border-bottom:1px solid var(--b-hair); }
.faq summary{
  list-style:none; cursor:pointer; padding:24px 40px 24px 0; position:relative;
  font-family:var(--f-display); font-weight:600;
  font-size:var(--fs-h4); letter-spacing:var(--ls-display-sm); line-height:1.25;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; position:absolute; right:4px; top:50%; translate:0 -50%;
  font-family:var(--f-mono); font-size:20px; color:var(--zinnober); transition:rotate .25s;
}
.faq details[open] summary::after{ rotate:45deg; }
.faq details p{ padding:0 0 26px; color:var(--b-grau); max-width:64ch; }

/* --- Kontakt --- */

/* Mobile-first: eine Spalte, Formular über Kontaktkarte. Erst ab 900px
   stehen beide nebeneinander — darunter wären sie zu schmal für zwei
   Spalten Formularfelder. */
.contact{ display:grid; gap:var(--gap-grid); align-items:start; }
@media (min-width:900px){
  .contact{ grid-template-columns:1.05fr .95fr; gap:clamp(36px, 5vw, 72px); }
}

/* --- Formular ---

   Die Felder sitzen auf einer eigenen weißen Fläche. Auf dem grauen Grund
   des Abschnitts liest sich das Formular dadurch als ein Ding und nicht als
   Reihe einzelner Kästen — dieselbe Kartensprache wie rechts daneben. */
.contact .form-wrapper{
  background:#fff;
  border:1px solid var(--b-hair);
  border-radius:var(--radius-lg);
  padding:var(--pad-card);
}

.form{ display:grid; gap:var(--space-md); }

/* Ab 640px teilen sich die kurzen Felder eine Zeile — im Probetraining-
   Formular sind das Name und Alter. Alles andere läuft über die volle
   Breite. Die Auswahl hängt am Feldtyp, nicht an der Reihenfolge: Kommt im
   Admin ein Feld dazu, ordnet es sich von selbst ein. Das Form-Plugin
   schreibt den Typ als data-grav-field an den Feldrumpf. */
@media (min-width:640px){
  .form{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .form > *{ grid-column:1 / -1; }
  .form .form-field:has([data-grav-field="text"]),
  .form .form-field:has([data-grav-field="number"]){ grid-column:span 1; }
}

.form label{gap:var(--space-2xs); font-family:var(--f-mono); font-size:var(--fs-sm); font-weight:500; letter-spacing:var(--ls-mono-2); text-transform:uppercase; color:var(--b-grau); }
/* Der Einwilligungshaken ist ausgenommen: Rahmen, Polsterung und
   Mindesthöhe eines Textfeldes bliesen ihn sonst auf ein 50px-Quadrat auf.
   Er bleibt ein nativer Haken und färbt sich über accent-color. */
.form input:not([type="checkbox"]),.form select,.form textarea{
  width:100%; font-family:var(--f-body); font-size:var(--fs-lg); color:var(--b-ink);
  background:#fff; border:1px solid var(--b-hair); padding:14px 16px; border-radius:var(--radius-sm);
  /* Fingerbreite Ziele: 52px liegt über den 44px, die auf Tastbildschirmen
     als Untergrenze gelten. Die Schriftgröße von 17px hält iOS zugleich
     davon ab, beim Hineintippen hineinzuzoomen (ab 16px). */
  min-height:52px;
  transition:border-color .2s, box-shadow .2s; appearance:none; -webkit-appearance:none;
}
.form input::placeholder,.form textarea::placeholder{ color:#A6ACB1; }
/* Das Feld, in dem man gerade schreibt, bekommt denselben Zinnober wie der
   Tastatur-Fokus im Rest der Seite — vorher war es ein neutrales Grau, das
   sich von der Umrandung kaum unterschied. */
.form input:not([type="checkbox"]):focus,.form select:focus,.form textarea:focus{
  outline:none; border-color:var(--zinnober);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--zinnober) 16%, transparent);
}
.form select{
  cursor:pointer; padding-right:var(--space-xl);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2317191B' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center;
}
.form textarea{ resize:vertical; min-height:130px; max-height:340px; line-height:1.55; }
.form input[type="number"]{ -moz-appearance:textfield; }
.form input[type="number"]::-webkit-outer-spin-button,
.form input[type="number"]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

/* --- Kontaktkarte ---

   Anrufen, schreiben, hinfinden in einer Fläche, durch Haarlinien getrennt.
   Vorher waren es drei Blöcke mit schwarzer Oberkante und darunter ein
   grauer Kartenkasten — vier Dinge, die nichts zusammenhielt. */
.contact__info{ display:grid; gap:var(--space-lg); align-content:start; }

.contact__card{
  background:#fff; border:1px solid var(--b-hair);
  border-radius:var(--radius-lg);
  /* Schneidet die Karte am unteren Ende mit den Ecken der Fläche ab. */
  overflow:hidden;
}
.contact__row{ padding:var(--space-md) var(--space-lg); }
.contact__row + .contact__row{ border-top:1px solid var(--b-hair); }
.contact__row .mono{ display:block; color:var(--b-grau); margin-bottom:var(--space-2xs); }

.contact__call{
  display:inline-block;
  font-family:var(--f-display); font-weight:800; text-decoration:none;
  font-size:var(--fs-h2); letter-spacing:var(--ls-display-lg); color:var(--zinnober); line-height:1;
}
.contact__call:hover{ color:var(--zinnober-t); }
.contact__hours{ color:var(--b-grau); margin-top:var(--space-2xs); font-size:var(--fs-md); }

/* Die E-Mail steht unter der Telefonnummer, eine Stufe leiser als diese:
   Anrufen ist der kürzere Weg, schreiben der zweite. Lange Adressen dürfen
   umbrechen, sonst sprengen sie auf dem Telefon die Karte. */
.contact__mail{
  display:inline-block; font-size:var(--fs-lg);
  color:var(--zinnober); text-decoration:none; overflow-wrap:anywhere;
}
.contact__mail:hover{ color:var(--zinnober-t); text-decoration:underline; }

.contact__adresse{ font-style:normal; font-size:var(--fs-lg); line-height:1.5; }

/* Der Weg zur Anfahrt, in der Sprache der übrigen Verweise (Mono, gesperrt,
   Zinnober) — kein zweiter roter Knopf neben dem Absenden des Formulars. */
.contact__route{
  display:inline-flex; align-items:center; gap:var(--space-2xs);
  margin-top:var(--space-sm); padding:var(--space-2xs) 0;
  font-family:var(--f-mono); font-size:var(--fs-sm); font-weight:500;
  letter-spacing:var(--ls-mono-2); text-transform:uppercase;
  color:var(--zinnober); text-decoration:none;
}
.contact__route:hover{ color:var(--zinnober-t); text-decoration:underline; }

/* Die Karte schließt die Kontaktkarte nach unten ab: keine eigene Kante,
   keine eigenen Ecken — die der Fläche schneiden sie mit. */
.contact__card .map{
  border:0; border-top:1px solid var(--b-hair); border-radius:0;
  aspect-ratio:16/10;
}

.map{
  aspect-ratio:4/3; background:var(--b-bg-2); border:1px solid var(--b-hair);
  border-radius:var(--radius-md); overflow:hidden;
  display:grid; place-items:center; color:var(--b-grau); text-align:center;
}
.map small { text-transform: none; letter-spacing: 0; font-size:var(--fs-md); }
/* Schaltfläche vor dem Laden: füllt die ganze Fläche, damit überall geklickt
   werden kann. Danach ersetzt die Karte den Inhalt und muss sich dehnen —
   das Raster der Fläche würde sie sonst mittig zusammenschrumpfen. */
.map__load{
  place-self:stretch; display:grid; place-content:center; gap:var(--space-2xs);
  text-align:center; color:var(--b-grau); padding:var(--space-md);
  background:none; border:none; transition:background .2s, color .2s;
}
.map__load:hover{ background:var(--b-bg); color:var(--b-ink); }
.map__load .mono{ color:var(--zinnober); }
.map__load small{ font-size:var(--fs-md); line-height:1.45; }
.map__canvas{ place-self:stretch; }

/* --- Einwilligung (Cookies und externe Dienste) ---
   Sitzt unten am Rand, ohne die Seite zu sperren: Wer weiterlesen will, kann
   das — die Entscheidung ist keine Bedingung für den Zugang. Zustimmen und
   Ablehnen sind gleich groß und stehen nebeneinander, nichts ist
   vorausgewählt. Die Einzelauswahl klappt darunter auf. */
.consent{
  position:fixed; left:0; right:0; bottom:0; z-index:300;
  background:var(--b-ink); color:var(--papier-2);
  border-top:2px solid var(--zinnober);
  max-height:88svh; overflow-y:auto;
}
.consent[hidden]{ display:none; }
.consent__inner{
  width:min(1240px, 92vw); margin-inline:auto;
  padding:var(--space-md) 0;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:var(--space-sm) var(--space-lg);
}
.consent__text{ flex:1 1 32ch; }
.consent__text .mono{ color:var(--zinnober); display:block; margin-bottom:var(--space-2xs); }
.consent__text p{ font-size:var(--fs-md); line-height:1.5; max-width:78ch; }
.consent__text a{ color:#fff; text-decoration:underline; text-underline-offset:3px; }
.consent__btns{ display:flex; gap:var(--space-xs); flex-wrap:wrap; }
/* Der umrandete Knopf steht hier auf dunklem Grund und braucht helle Kanten. */
.consent .btn--ghost{ border-color:#5A6167; color:var(--papier-2); }
.consent .btn--ghost:hover{ border-color:#fff; color:#fff; }

/* Einzelauswahl */
.consent__details{ flex:1 1 100%; border-top:1px solid #3A4045; padding-top:var(--space-md); }
.consent__details[hidden]{ display:none; }
.consent__list{ display:grid; gap:var(--space-sm); list-style:none; margin:0; padding:0; }
.consent__list li{ margin:0; padding:0; }
.consent__list label{ display:flex; gap:var(--space-sm); align-items:start; cursor:pointer; }
.consent__list input{ margin-top:3px; width:18px; height:18px; flex:none; accent-color:var(--zinnober); cursor:pointer; }
.consent__list input:disabled{ cursor:default; opacity:.55; }
.consent__list b{ display:block; font-family:var(--f-mono); font-size:var(--fs-sm); font-weight:500;
  letter-spacing:var(--ls-mono-2); text-transform:uppercase; color:#fff; }
.consent__list small{ display:block; margin-top:2px; font-size:var(--fs-md); line-height:1.45; color:var(--papier-2); }
.consent__save{ margin-top:var(--space-md); }

@media (max-width:670px){
  .consent__inner{ padding:var(--space-sm) 0; }
  .consent__btns{ width:100%; }
  .consent__btns .btn{ flex:1 1 100%; justify-content:center; text-align:center; }
}

/* --- Gesperrte Einbettungen ---
   Video und Karte zeigen ohne Zustimmung einen Hinweis statt des Inhalts.
   Welcher der beiden Texte gilt, entscheidet die Klasse am Container. */
.yt__gesperrt{ display:none; }
.yt--blocked .yt__hinweis{ display:none; }
.yt--blocked .yt__gesperrt{ display:block; }
.yt--blocked .yt__play{ background:transparent; border:2px solid var(--papier-2); color:var(--papier-2); }
.yt--blocked .yt__poster:hover .yt__play{ background:transparent; border-color:#fff; color:#fff; }

/* --- Footer ---

   Aufbau wie im Entwurf: das Zitat als Auftakt, darunter zwei Spalten —
   links die Schule mit Anschrift und Verbandszeichen, rechts die Info-Zeiten
   mit den Verweisen. Ganz unten eine schmale Zeile mit dem Copyright.

   Vorher stand hier eine einzige Reihe: Copyright links, alle Verweise als
   gesperrte Versalien rechts. Das las sich wie eine Werkzeugleiste und
   verschenkte den Platz, den Anschrift und Zeiten brauchen. */
.footer{ background:var(--b-ink); color:#B9BEC2; padding:clamp(36px, 4vw, 56px) 0 var(--space-xl); }

/* Das Zitat läuft im Entwurf schmal — es soll drei, vier Zeilen brechen und
   als Block wirken, nicht als durchlaufender Satz. */
.footer__quote{
  max-width:24ch; font-family:var(--f-serif); font-size:clamp(22px, 3.4vw, 36px);
  font-style:italic; letter-spacing:var(--ls-serif); color:#fff; line-height:1.25;
}
.footer__quelle{ display:block; margin-top:var(--space-sm); color:#8B9196; }

.footer__grid{ display:grid; gap:var(--space-xl); margin-top:clamp(40px, 6vw, 64px); }
@media (min-width:880px){
  /* Die linke Spalte trägt Kontakt, Info-Zeiten und die Zeichen und darf
     deshalb breiter sein als die rechte mit den Pflichtangaben. */
  .footer__grid{ grid-template-columns:1.4fr 1fr; gap:var(--gap-grid); }
}

/* Eine Spalte kann mehrere Blöcke übereinander tragen (links: Kontakt,
   Info-Zeiten, Zeichen). Der Abstand steht hier und nicht als margin an den
   Überschriften — so bleibt er gleich, egal welcher Block wo landet. */
.footer__spalte{ display:grid; gap:var(--space-lg); align-content:start; }

.footer h4{
  font-family:var(--f-mono); font-weight:500; font-size:var(--fs-sm);
  letter-spacing:var(--ls-mono); text-transform:uppercase;
  color:#8B9196; margin-bottom:var(--space-md);
}
.footer ul{ list-style:none; display:grid; gap:var(--space-2xs); margin:0; padding:0; }
.footer li{ font-size:var(--fs-md); line-height:1.5; }

/* Verweise laufen im Fließtext mit; nur die Zeile ganz unten bleibt Mono.
   Vorher waren alle Verweise gesperrte Versalien — in einer Liste neben
   Anschrift und Öffnungszeiten liest sich das wie ein Formular. */
.footer a{ color:inherit; text-decoration:none; }
.footer li a{ color:#B9BEC2; transition:color .25s; }
.footer li a:hover{ color:#fff; }

/* Instagram im Fuß: hier mit Wort — ein einzelnes Zeichen bliebe in einer
   Liste aus Textzeilen unklar. */
.footer__social{ display:inline-flex; align-items:center; gap:var(--space-2xs); }
.footer__social .icon{ font-size:1.2em; }

.footer__base{
  margin-top:clamp(40px, 6vw, 64px); padding-top:var(--space-md);
  border-top:1px solid #33383C;
  display:flex; flex-wrap:wrap; gap:var(--space-2xs) var(--space-lg);
  justify-content:space-between; align-items:center;
  font-family:var(--f-mono); font-size:var(--fs-2xs);
  letter-spacing:var(--ls-mono-2); text-transform:uppercase; color:#8B9196;
}
.footer__base a:hover{ color:#fff; }

/* --- Formular des Form-Plugins --- */

/* Das Form-Plugin verschachtelt Label und Eingabefeld in eigene
   Container, statt sie wie im Entwurf gemeinsam in ein <label> zu
   legen. Der Abstand muss deshalb hier entstehen. */
.form .form-field                { display: grid; gap:var(--space-2xs); }
/* .form .form-field + .form-field  { margin-top: var(--space-md); } */
.form .form-field label          { margin: 0; }

/* Pflichtfeld-Stern und Feldhinweise */
.form .required                  { color: var(--zinnober); margin-left: 2px; }
.form .form-description          { font-size:var(--fs-md); color: var(--b-grau); text-transform: none; letter-spacing: 0; }

/* Einwilligung und Honeypot */
.form .form-field[class*="checkbox"] label,
.form .form-field[class*="checkbox"] .form-label,
.form .form-field:has(input[type="checkbox"]) label {
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--f-body, inherit);
  font-size:var(--fs-base);
  line-height: 1.5;
  color: var(--b-ink);
}

/* Das Plugin stellt jedem Feld einen Label-Container voran — beim
   Einwilligungshaken bleibt er leer, weil der Text am Haken selbst hängt.
   Leer stehen lassen hieße: eine Lücke über der Zeile. */
.form .form-field:has(input[type="checkbox"]) > .form-label:empty,
.form .form-field:has(input[type="checkbox"]) > .form-label:has(label:empty) { display: none; }

/* Haken und Text als eine anfassbare Zeile auf eigener Fläche: Der ganze
   Streifen ist Ziel des Fingers, nicht nur das 20px-Kästchen. */
.form .form-field:has(input[type="checkbox"]) .form-input-wrapper{
  display: flex; align-items: flex-start; gap: var(--space-xs);
  background: var(--b-bg); border: 1px solid var(--b-hair);
  border-radius: var(--radius-sm); padding: var(--space-xs) var(--space-sm);
}
.form .form-field:has(input[type="checkbox"]) label{ cursor: pointer; }
.form input[type="checkbox"]{
  width: 20px; height: 20px; min-height: 0; flex: none;
  margin: 3px 0 0; accent-color: var(--zinnober); cursor: pointer;
}
/* Das Honeypot-Feld versteckt sich per Inline-Style selbst; hier bleibt nur
   sein Container, der sonst eine leere Lücke im Formular hinterlässt. */
.form .form-field:has(.form-honeybear) { display: none; }

.form__submit                    { margin-top: var(--space-lg); }
/* Mobile-first: Der Knopf füllt die Zeile — auf dem Telefon das einfachste
   Ziel. Ab 560px darf er wieder nur so breit sein wie seine Beschriftung. */
.form__submit .btn               { width: 100%; justify-content: center; }
@media (min-width: 560px){
  .form__submit .btn             { width: auto; }
}

/* Rückmeldungen nach dem Absenden */
.form__errors,
.form .form-message              { font-size:var(--fs-base); line-height: 1.5; }
.form__errors                    { border-left: 3px solid var(--zinnober); border-radius: 0 var(--radius-xs) var(--radius-xs) 0; background: var(--b-bg-2); padding: 16px 18px; color: var(--b-ink); }

/* Statischer Hinweis, solange kein Formular eingerichtet ist. */
.form__hint {
  border-left: 3px solid var(--zinnober);
  border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
  background: var(--b-bg-2);
  padding: 16px 18px;
  font-size:var(--fs-base);
  color: var(--b-ink);
}

/* Sticky Mobile-CTA */
.sticky-cta{
  position:fixed; bottom:14px; left:14px; right:14px; z-index:150; display:none;
  justify-content:center;
}
.sticky-cta a{ width:100%; justify-content:center; box-shadow:0 12px 34px rgba(200,16,46,.35); }
/* Platz am Seitenende nur schaffen, wenn der Button tatsächlich mitläuft. */
@media (max-width:700px){
  .has-sticky-cta .sticky-cta{ display:flex; }
  .has-sticky-cta{ padding-bottom:70px; }
}

/* Ausgangszustand der Einblendungen.

   Ohne Skript und bei „Bewegung reduzieren" steht alles sichtbar da — die
   Regel darunter greift nur, wenn das Kopfskript die Klasse js-motion am
   <html> gesetzt hat (partials/base.html.twig).

   Warum hier und nicht im Skript: Wer die Deckkraft erst in js/whkd.js auf 0
   setzt, kommt zu spät. Der Browser hat den Text dann längst gezeichnet, er
   blitzt auf und verschwindet wieder. Diese Regel greift vor dem ersten
   Bild.

   Die Auswahl muss zur Liste `staffeln` in js/whkd.js passen — beide
   beschreiben dieselben Teile. Ändert sich eine, ändert sich die andere. */
.reveal,
.reveal--teil{ opacity:1; }

html.js-motion .reveal,
html.js-motion .sec__head > *,
html.js-motion .ctablock__body > *,
html.js-motion .faq > details,
html.js-motion .stage > *,
html.js-motion .textmedia__lead > div > p,
html.js-motion .contact__card > .contact__row{
  opacity:0;
  transform:translate3d(0, 20px, 0);
}

/* Welt A schneidet hart statt zu gleiten — kein Versatz, nur ein Hauch
   Maßstab, wie beim Schnitt im Film. */
html.js-motion .film .reveal{
  transform:scale(.985);
}

/* ============================================================
   FOTOS — Halftone-Duotone-Behandlung (Zinnober/Schwarz)
   ============================================================ */
.halftone--img{ background:var(--zinnober); }
.halftone--img img.halftone__img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  mix-blend-mode:multiply;
  filter:grayscale(1) contrast(1.3) brightness(1.12);
}
/* Presse-Clipping (Kapitel 3) */
.clipping{
  position:absolute; z-index:3; right:-14px; bottom:-18px; width:min(240px,34%);
  transform:rotate(-5deg); border:6px solid #fff; border-radius:var(--radius-xs);
  box-shadow:0 14px 34px rgba(12,10,8,.4);
  filter:sepia(.25) contrast(1.05);
}
@media (max-width:720px){ .clipping{ display:none; } }

/* ---------- Heritage-Filmstreifen mit echten Fotos ---------- */
.frame{ padding:0; overflow:hidden; border-radius:var(--radius-sm); background:var(--kino); }
.frame img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.08);
  transition:filter .3s;
}
/* Wie bei den Verweis-Blöcken: beim Hineinscrollen, nicht beim Darüberfahren. */
.is-inview .frame img{ filter:grayscale(0) contrast(1); }
.frame figcaption{
  position:absolute; inset:auto 0 0 0; z-index:2; padding:26px 12px 10px; text-align:left;
  background:linear-gradient(transparent, rgba(12,10,8,.88));
}

/* ---------- Kontakt: Kwoon-Foto (Welt B: clean & hell) ---------- */
.contact__figure{ border:1px solid var(--b-hair); border-radius:var(--radius-md); overflow:hidden; }
.contact__figure img{ width:100%; aspect-ratio:16/10; object-fit:cover; }
.contact__figure figcaption{ font-family:var(--f-mono); font-size:var(--fs-xs); letter-spacing:var(--ls-mono-2); text-transform:uppercase; color:var(--b-grau); padding:10px 2px 0; }

/* ---------- Footer: echte Verbandslogos ----------

   Wie im Entwurf ohne Kachel und ohne Beschriftung: Die Zeichen stehen frei,
   entsättigt und halb durchsichtig, und kommen erst beim Darüberfahren zu
   Farbe. Das nimmt ihnen mehr Aufmerksamkeit als die dunkle Kachel zuvor —
   sie sind Beleg, nicht Botschaft. Ihre Namen tragen die alt-Texte; beim
   verlinkten Zeichen ist das zugleich der Name des Verweises. */
.footer__logos{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:var(--space-md); margin-top:var(--space-2xs);
}
.footer__logos img{
  height:44px; width:auto;
  opacity:.5; filter:grayscale(1);
  transition:opacity .3s, filter .3s;
}
.footer__logos img:hover,
.footer__logos a:hover img,
.footer__logos a:focus-visible img{ opacity:1; filter:none; }

/* ============================================================
   STANDARDSEITEN (default.html.twig)
   ============================================================ */

.prose   { max-width: 70ch; font-size: var(--fs-base); line-height: 1.6; color: var(--b-ink); }
.prose p { margin-bottom: var(--space-md); }
.prose a { color: var(--zinnober); }

.prose h2 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: 1.08;
  letter-spacing: -.025em;
  margin: var(--gap-head) 0 var(--space-sm);
}
.prose h3 {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: 1.2;
  letter-spacing: var(--ls-display-sm);
  margin: var(--space-lg) 0 var(--space-2xs);
}

/* Aufzählungen tragen denselben Zinnober-Strich, der auch die Mono-Zeilen
   der Abschnittsköpfe anführt — statt eines Standard-Punkts. */
.prose ul, .prose ol { margin: 0 0 var(--space-md); padding: 0; list-style: none; }
.prose li            { position: relative; padding-left: var(--space-lg); margin-bottom: var(--space-2xs); }

.prose ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .7em;
  width: var(--space-sm);
  height: 1px;
  background: var(--zinnober);
}
.prose ol            { counter-reset: prose-ol; }
.prose ol li::before {
  counter-increment: prose-ol;
  content: counter(prose-ol, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: .15em;
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: .1em;
  color: var(--zinnober);
}

/* ============================================================
   REDUCED MOTION — alles Wesentliche bleibt lesbar
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; }
  html{ scroll-behavior:auto; }
  .strip__track{ transform:none; flex-wrap:wrap; width:auto; }
}


.no--padding--bottom { 
  padding-bottom: 0 !important;
}
/* ============================================================
   HERO — Bildmarke auf abgedunkeltem Grund (layout: logo)
   ============================================================
   Gegenentwurf zur hellen Schlagzeilen-Fassung: Das Foto oder Video liegt in
   voller Stärke da und wird durch einen Schleier abgedunkelt, davor steht die
   Bildmarke in Weiß. Beide Fassungen teilen sich dieselbe Medien-Ebene; nur
   Schleier, Farben und Ausrichtung unterscheiden sich.

   --hero-schleier regelt, wie stark abgedunkelt wird. Unter etwa 0.4 wird die
   Schrift auf hellen Motiven unruhig, über etwa 0.85 verschwindet das Bild. */
.hero--dunkel{
  --hero-schleier:.62;
  /* Größe des Verbandszeichens — Bild und Lichtkegel richten sich danach. */
  --emblem:clamp(84px, 9vw, 132px);
  /* Keine eigene Fläche: Sie läge über dem feststehenden Bild und deckte es
     zu. Das Kino-Schwarz trägt stattdessen die Bildebene selbst — dann steht
     es hinter dem Foto und springt ein, wenn das Bild nicht lädt. */
  background:transparent;
  text-align:center;
  justify-items:center;
  /* Der ganze Block — Bildmarke, Strich, Zusatz, Buttons — steht senkrecht
     in der Mitte des Fensters. Der Hero verteilt seinen Inhalt ohnehin
     zentriert (align-content:center); entscheidend ist, dass beide
     Innenabstände gleich groß sind, sonst schiebt der größere den Block zur
     anderen Seite. Sie greifen erst, wenn der Inhalt höher wird als das
     Fenster — dann bleibt oben Platz für die Kopfzeile, die über dem Hero
     liegt (position:fixed). */
  padding:calc(var(--nav-h) + 4vh) 0;
}
.hero--dunkel .hero__media{ background:var(--kino); }
/* Das Bild bleibt sichtbar — abgedunkelt wird über den Schleier, nicht über
   die Deckkraft. Ein Rest Entsättigung hält es in der Farbwelt der Seite. */
.hero--dunkel .hero__media-el{
  opacity:1;
  filter:grayscale(.45) contrast(1.06) brightness(.95);
  object-position:50% 40%;
}
/* Zwei Lagen: ein Verlauf für die Grundabdunklung, dazu eine weiche Vignette,
   die zur Mitte hin aufhellt — so steht die Marke frei, ohne dass die Ränder
   ausbleichen. */
.hero--dunkel::after{
  background:
    radial-gradient(115% 85% at 50% 45%,
      rgba(12,10,8,.20) 0%,
      rgba(12,10,8,calc(var(--hero-schleier) + .18)) 78%),
    linear-gradient(rgba(12,10,8,var(--hero-schleier)), rgba(12,10,8,var(--hero-schleier)));
}
.hero--dunkel .wrap{ display:grid; justify-items:center; }

.hero--dunkel .hero__eyebrow{ color:var(--papier-2); justify-content:center; margin-bottom:var(--space-lg); }

/* Die Bildmarke: oben der Name in voller Breite, darunter gesperrt der
   Zusatz. Der Zinnober-Strich dazwischen hält beide zusammen. */
.hero__logo{ display:grid; justify-items:center; gap:0; color:#fff; position:relative; }

/* Lichtkegel wie auf der Baustellen-Seite — dort auf schwarzem Grund, hier
   über dem Foto. Er hängt am Verbandszeichen: Mittelpunkt ist dessen Mitte,
   deshalb steht die Größe des Emblems als Variable und wird unten für Bild
   und Kegel zugleich verwendet. Verschiebt sich der Inhalt, wandert das
   Licht mit.

   z-index:-1 hält ihn hinter der Schrift, aber über der Abdunklung des
   Heros: Beides liegt in derselben Ebene wie .wrap, die über .hero::after
   steht. Zwei Lagen wie im Original — innen Senfgold, außen ein weiter
   Zinnober-Hof. */
.hero--dunkel .hero__logo::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  left:50%; top:calc(var(--emblem) / 2);
  transform:translate(-50%, -50%);
  width:min(1500px, 160vw); aspect-ratio:1;
  background:
    radial-gradient(30% 30% at 50% 50%, color-mix(in srgb, var(--senf) 22%, transparent), transparent 70%),
    radial-gradient(58% 58% at 50% 54%, color-mix(in srgb, var(--zinnober) 17%, transparent), transparent 76%);
}
/* Verbandszeichen über der Wortmarke. Der Schatten löst es vom Foto — ohne
   ihn verschwimmt der schwarze Grund des Emblems mit dem abgedunkelten
   Hintergrund. Feste Breite/Höhe im Markup, damit beim Laden nichts springt. */
.hero__logo-emblem{
  width:var(--emblem); height:auto;
  margin-bottom:clamp(14px, 2vw, 26px);
  filter:drop-shadow(0 6px 24px rgba(0,0,0,.55));
}
.hero__logo-haupt{
  font-family:var(--f-display); font-weight:800;
  text-transform:uppercase; line-height:.86;
  /* Normale Breite statt schmalem Schnitt: Dieselbe Zeile trägt jetzt
     deutlich weiter, der Grad muss also zurück. */
  font-size:clamp(30px, 7.2vw, 104px);
  letter-spacing:var(--ls-display-lg);
}
.hero__logo-rule{
  display:block; width:clamp(90px, 16vw, 200px); height:6px;
  background:var(--zinnober); border-radius:var(--radius-xs);
  margin:clamp(14px, 2.2vw, 28px) 0 clamp(12px, 1.8vw, 22px);
}
.hero__logo-zusatz{
  font-family:var(--f-display); font-weight:500;
  text-transform:uppercase; line-height:1.1;
  font-size:clamp(13px, 2vw, 26px);
  /* Sperrung ohne Ausgleich rechts rückt den Text optisch nach links. */
  letter-spacing:.32em; text-indent:.32em;
  color:#fff;
}

/* Über dem abgedunkelten Foto steht die Zeile in reinem Weiß — der
   Papierton der übrigen Welt-A-Texte wirkte hier wie eine Auszeichnung,
   obwohl der Satz durchgehend gleich gewichtet ist. */
.hero--dunkel .hero__sub{ color:#fff; max-width:46ch; }
.hero--dunkel .hero__sub strong{ color:#fff; }
.hero--dunkel .hero__ctas{ justify-content:center; }
/* Der umrandete Knopf steht hier auf dunklem Grund. */
.hero--dunkel .btn--ghost{ border-color:#fff; color:#fff; }
.hero--dunkel .btn--ghost:hover{ background:#fff; color:var(--kino); }

@media (max-width:670px){
  /* Hochkant trägt der Schleier etwas mehr: Das Motiv ist enger beschnitten
     und dadurch unruhiger unter der Schrift. */
  .hero--dunkel{ --hero-schleier:.68; }
  /* Die Ortszeile bleibt auch hochkant stehen — sie trägt den einzigen
     Hinweis auf Wentorf und Hamburg, den man ohne Scrollen sieht. Die
     allgemeine Hero-Regel blendet sie unter 670px aus; hier gilt anderes.
     Gesperrte Versalien brauchen auf schmalen Zeilen etwas Luft.
     Derzeit ohne Wirkung: Im Inhalt der Startseite ist `eyebrow`
     auskommentiert (user/pages/01.home/_01.hero/hero.md). Die Regel bleibt
     stehen, damit die Zeile beim Wiedereinschalten sitzt. */
  .hero--dunkel .hero__eyebrow{
    display:flex; flex-wrap:wrap; justify-content:center;
    font-size:var(--fs-2xs); letter-spacing:.14em; line-height:1.7;
    text-align:center; margin-bottom:var(--space-md);
  }
  .hero--dunkel .hero__ctas{ width:100%; }
  .hero--dunkel .hero__ctas .btn{ flex:1 1 100%; justify-content:center; }
}

/* --- Wink zum Weiterscrollen ---
   Zwei dünne Winkel unten mittig im Hero. Sie liegen dicht übereinander und
   pulsieren versetzt, so entsteht eine abwärts laufende Bewegung, ohne dass
   etwas hüpft. Dünner als die übrigen Icons: stroke-width überschreibt die
   Angabe aus der SVG-Datei. */
.hero__scroll{
  position:absolute; z-index:2;
  left:50%; bottom:clamp(16px, 3.5vh, 40px); transform:translateX(-50%);
  display:grid; justify-items:center;
  font-size:26px; color:#fff;
  /* Als Schaltfläche braucht sie eine anfassbare Fläche — 26px Zeichen allein
     wären auf dem Telefon zu klein zum Treffen. */
  padding:10px 22px; cursor:pointer;
  transition:opacity .2s, transform .2s;
}
.hero__scroll:hover{ transform:translateX(-50%) translateY(3px); }
.hero__scroll:focus-visible{ outline:2px solid #fff; outline-offset:4px; }
.hero__scroll svg{ stroke-width:1.25; }
/* Der zweite Winkel rückt in den ersten hinein — sonst stünden zwei einzelne
   Zeichen untereinander statt einer Doppelspitze. */
.hero__scroll .icon + .icon{ margin-top:-.62em; }
.hero__scroll .icon{
  opacity:0;
  animation:heroWink 2.1s cubic-bezier(.4,0,.4,1) infinite;
}
.hero__scroll .icon:last-child{ animation-delay:.24s; }

@keyframes heroWink{
  0%   { opacity:0; transform:translateY(-5px); }
  35%  { opacity:.9; transform:translateY(0); }
  70%  { opacity:0; transform:translateY(7px); }
  100% { opacity:0; transform:translateY(7px); }
}

/* Ohne Bewegung bleiben beide Winkel einfach sichtbar stehen — der Hinweis
   geht sonst verloren, weil die Grundstellung auf Deckkraft 0 steht. */
@media (prefers-reduced-motion: reduce){
  .hero__scroll .icon{ opacity:.9; }
}


/* ============================================================
   BAUSTELLE — „Coming Soon"

   Eine Seite ohne Navigation und ohne Fuß, in der Tonlage von Welt A:
   Kinoschwarz, ein warmer Lichtkegel, das Schulwappen im Licht. Sie steht
   nur, solange coming_soon in whkd.yaml eingeschaltet ist.
   ============================================================ */
.cs-body{ background:var(--kino); color:var(--papier); }

.cs{
  position:relative; min-height:100svh; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(48px, 9vh, 110px) 6vw;
}

/* Lichtkegel statt Bild: zwei sehr blasse Farbkreise, sonst nichts. */
.cs__spot{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(58% 42% at 50% 6%,  color-mix(in srgb, var(--senf) 13%, transparent), transparent 70%),
    radial-gradient(85% 60% at 50% 45%, color-mix(in srgb, var(--zinnober) 11%, transparent), transparent 72%);
}

.cs__inner{
  position:relative; z-index:1;
  width:min(760px, 100%);
  display:flex; flex-direction:column; align-items:center; text-align:center;
}

.cs__logo{
  width:clamp(104px, 17vw, 164px); height:auto;
  filter:drop-shadow(0 0 44px color-mix(in srgb, var(--zinnober) 45%, transparent));
}

.cs__eyebrow{ margin-top:var(--space-lg); color:var(--senf); }

.cs__title{
  /* Die Mono-Zeile darüber steht auf Abstand statt als Etikett am Titel zu
     kleben — bei dieser Schriftgröße braucht die Überschrift den Anlauf. */
  margin-top:var(--space-xl);
  font-size:var(--fs-h1); color:var(--papier);
}
.cs__title em{
  font-family:var(--f-serif); font-style:italic; font-weight:400;
  text-transform:none; letter-spacing:0; color:var(--zinnober);
}

/* Bühne für die Animation. Sie steht nur, wenn eine Datei im Seitenordner
   liegt — ohne Datei bleibt die Stelle leer statt einen leeren Rahmen zu
   zeigen. */
.cs__stage{
  position:relative; width:100%; margin-top:var(--space-xl);
  aspect-ratio:21/9; overflow:hidden; border-radius:var(--radius-lg);
  display:grid; place-items:center;
  background:color-mix(in srgb, var(--papier) 4%, transparent);
  border:1px solid color-mix(in srgb, var(--papier) 20%, transparent);
}
.cs__media{ width:100%; height:100%; object-fit:cover; display:block; }

.cs__text{
  margin-top:var(--space-xl); max-width:56ch;
  font-size:var(--fs-lead); line-height:1.55;
  color:color-mix(in srgb, var(--papier) 82%, transparent);
}
.cs__text p + p{ margin-top:var(--space-md); }
.cs__text strong{ color:var(--papier); font-weight:600; }
.cs__text a{ color:var(--senf); }

.cs__cta{
  margin-top:var(--space-xl);
  display:flex; flex-direction:column; align-items:center; gap:var(--space-sm);
}
.cs__note{ font-size:var(--fs-xs); color:color-mix(in srgb, var(--papier) 55%, transparent); }

/* Freischaltung: sichtbar, aber leise — sie gehört nicht zur Botschaft. */
.cs__gate{
  width:min(380px, 100%); margin-top:var(--gap-block);
  padding-top:var(--space-lg);
  border-top:1px solid color-mix(in srgb, var(--papier) 14%, transparent);
}
.cs__gate summary{
  list-style:none; cursor:pointer;
  font-size:var(--fs-xs); color:color-mix(in srgb, var(--papier) 45%, transparent);
  transition:color .2s;
}
.cs__gate summary::-webkit-details-marker{ display:none; }
.cs__gate summary:hover{ color:var(--papier); }
.cs__gate[open] summary{ color:var(--senf); }

.cs__form{ display:flex; gap:var(--space-2xs); margin-top:var(--space-md); }
.cs__form .btn{ padding-inline:var(--space-md); justify-content:center; }
.cs__input{
  flex:1; min-width:0; padding:14px 16px; border-radius:var(--radius-sm);
  background:transparent; color:var(--papier);
  border:1px solid color-mix(in srgb, var(--papier) 28%, transparent);
  font-family:var(--f-mono); font-size:var(--fs-sm); letter-spacing:var(--ls-mono-2);
}
.cs__input::placeholder{ color:color-mix(in srgb, var(--papier) 38%, transparent); text-transform:uppercase; }
.cs__input:focus-visible{ outline:2px solid var(--senf); outline-offset:2px; }

.cs__error{ margin-top:var(--space-2xs); color:var(--zinnober); }
.cs__help{
  margin-top:var(--space-2xs);
  font-size:var(--fs-md); line-height:1.5;
  color:color-mix(in srgb, var(--papier) 45%, transparent);
}

@media (max-width:670px){
  .cs__form{ flex-direction:column; }
  .cs__stage{ aspect-ratio:3/2; }
}

/* Einzug beim Laden — reines CSS, damit kein Skript darüber entscheidet, ob
   Text sichtbar wird. Ohne Bewegungswunsch steht alles sofort. */
@media (prefers-reduced-motion: no-preference){
  .cs__inner > *{ animation:csRise .8s cubic-bezier(.2,.7,.2,1) backwards; }
  .cs__inner > *:nth-child(1){ animation-delay:.05s; }
  .cs__inner > *:nth-child(2){ animation-delay:.15s; }
  .cs__inner > *:nth-child(3){ animation-delay:.22s; }
  .cs__inner > *:nth-child(4){ animation-delay:.30s; }
  .cs__inner > *:nth-child(5){ animation-delay:.38s; }
  .cs__inner > *:nth-child(6){ animation-delay:.46s; }
  .cs__inner > *:nth-child(7){ animation-delay:.54s; }
}
@keyframes csRise{
  from{ opacity:0; transform:translateY(14px); }
  to  { opacity:1; transform:none; }
}