/* ============================================================
   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 */
  --f-display: 'Archivo', 'Arial Narrow', sans-serif;
  --f-body:    'Newsreader', Georgia, serif;
  --f-mono:    'IBM Plex Mono', 'Courier New', monospace;
  /* Display = Archivo auf der Width-Achse ultra-condensed */
  --stretch-poster: 62.5%;
  --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 */

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

  /* Schriftgrößen, mitwachsend */
  --fs-hero:    clamp(56px, 12.5vw, 190px); /* nur der Hero-Titel */
  --fs-display: clamp(48px, 10vw, 150px);   /* Kapitelkarten, Leitsatz, Abspann */
  --fs-h1:      clamp(38px, 6.2vw, 84px);   /* Abschnittsüberschriften */
  --fs-h2:      clamp(30px, 4.6vw, 56px);   /* Blocküberschriften, große Zahlen */
  --fs-h3:      clamp(24px, 3vw, 34px);     /* Kartenüberschriften */
  --fs-h4:      clamp(19px, 2.2vw, 26px);   /* kleine Überschriften, Zitate */
  --fs-lead:    clamp(17px, 1.6vw, 20px);   /* Einleitungen und Fließtext im Block */
}

/* 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-optical-sizing:auto;
  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 */
:focus-visible{ outline:3px solid var(--zinnober); outline-offset:3px; border-radius:2px; }

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

/* ---------- Display-Typo-Helfer ---------- */
.disp{
  font-family:var(--f-display);
  font-stretch:var(--stretch-poster);
  font-weight:900;
  text-transform:uppercase;
  line-height:.86;
  letter-spacing:.005em;
}
.mono{
  font-family:var(--f-mono); font-size:var(--fs-sm); letter-spacing:.14em;
  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; }
.nav__brand .disp{ font-size:var(--fs-xl); letter-spacing:.04em; }
.nav__brand .mono{ font-size:var(--fs-2xs); 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:.12em; 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-mono);
  font-weight: 400;
  font-size: var(--fs-lg);
  line-height: 1.3;
  letter-spacing: .12em;
  text-transform: uppercase;
  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);
  color:var(--b-ink);
  max-width:11ch;
}
.hero__title em{ font-style:normal; color:var(--zinnober); }
.hero__sub{
  margin-top:var(--space-lg); max-width:52ch; font-size:var(--fs-lead);
  color:var(--b-grau); font-weight:300;
}
.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-md); letter-spacing:.1em; text-transform:uppercase;
  padding:16px 26px; 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; }
/* <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);
}
/* 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 Versalien 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-stretch: 66%;
  font-weight: 900;
  text-transform: uppercase;
  font-size: var(--fs-h1);
  line-height: .9;
  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-stretch:70%; font-weight:900;
  text-transform:uppercase; line-height:.92; letter-spacing:.005em;
  font-size:var(--fs-display); margin-top:var(--space-sm); color:var(--papier);
  text-wrap:balance;
}
.film__leader h2 em{ font-style:normal; color:var(--senf); }
.film__leader p{ margin-top:var(--space-md); color:var(--papier-2); font-style:italic; font-size:var(--fs-lg); }
.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:.16em; 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-stretch:70%; font-weight:900;
  text-transform:uppercase; line-height:.92;
  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:.06em; 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-body);
  font-size:var(--fs-h4); letter-spacing:.5em; font-weight:600;
  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-body);
  font-size:var(--fs-h4); letter-spacing:.5em; font-weight:600;
  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-md); letter-spacing:.2em; 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:.04em; }
.poster__year b{
  font-family:var(--f-display); font-stretch:62.5%; font-weight:900;
  font-size:var(--fs-display); line-height:1; color:var(--kino);
  letter-spacing:.01em; padding-bottom:.04em; /* Unterlängen (p, g) nicht anschneiden */
}
.poster h3{
  font-family:var(--f-display); font-stretch:64%; font-weight:900; text-transform:uppercase;
  font-size:var(--fs-h1); line-height:.88; margin:16px 0 18px;
  color:var(--kino);
}
.poster h3 em{ font-style:normal; color:var(--zinnober); }
.poster p{ font-size:var(--fs-lead); line-height:1.65; 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:.14em; 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); 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:.1em; text-transform:uppercase;
  padding:5px 8px;
}
/* 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-xs); letter-spacing:.16em; text-transform:uppercase;
  color:#fff; background:rgba(12,10,8,.85); padding:8px 10px;
  border-left:3px solid var(--senf);
}

/* 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); 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-xs); letter-spacing:.22em; text-transform:uppercase; }
.credits__roll .name{
  font-family:var(--f-display); font-stretch:66%; font-weight:900; text-transform:uppercase;
  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); }

.sec__head .mono{ 
  color: var(--zinnober);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin: 30px 0;
}

.sec__head .mono::before{
  content: "";
  width: 180px;
  height: 10px;
  background: var(--zinnober);
}

@media (max-width:670px){ 
  .sec__head .mono{ 
    color: var(--zinnober);
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    margin: 20px 0;
  }
  .sec__head .mono::before{
    content: "";
    width: 80px;
    height: 6px;
    background: var(--zinnober);
  }
 }

/* 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-stretch:66%; font-weight:900; text-transform:uppercase;
  line-height:.9; 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:60ch; font-size:var(--fs-lg); }

/* --- 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:900; text-transform:uppercase;
  font-stretch:66%; 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-style:italic; color:var(--b-grau); font-size:var(--fs-lg); }

.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-stretch:70%; font-weight:800; text-transform:uppercase; font-size:var(--fs-h3); margin:12px 0 12px; }
.stage p{ color:var(--b-grau); font-size:var(--fs-lg); }
.principle__note{ margin-top:var(--space-xl); color:var(--b-grau); font-size:var(--fs-base); font-style:italic; }
@media (max-width:820px){ .stages{ grid-template-columns:1fr; } }

/* --- Kinder Kung Fu (Eltern-Sektion) --- */
.approach{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1px; background:var(--b-hair); border:1px solid var(--b-hair); 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-stretch:70%; font-weight:800; text-transform:uppercase; font-size:var(--fs-h4); margin:var(--space-xs) 0; line-height:.95; }

/* 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); }
.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.7; }
.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); 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); 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); }
.finder__opt-title{
  font-family:var(--f-display); font-stretch:72%; font-weight:800; text-transform:uppercase;
  font-size:var(--fs-h4); line-height:1.08; letter-spacing:.015em;
  color:var(--b-ink); transition:color .2s;
}
.finder__opt-desc{ color:var(--b-grau); font-size:var(--fs-base); 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-stretch:68%; font-weight:900; text-transform:uppercase; font-size:var(--fs-h3); 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:.12em; 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); letter-spacing:.1em; text-transform:uppercase;
  border:1px solid var(--b-hair); 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); }
/* 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; margin:var(--space-3xs) 0; }
.area h3{ font-family:var(--f-display); font-stretch:70%; font-weight:800; text-transform:uppercase; font-size:var(--fs-h3); line-height:.95; }
.area p{ color:var(--b-grau); font-size:var(--fs-base); }
.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-2xs); letter-spacing:.12em; 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:.1em; 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); }
.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:.16em; 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); background:var(--b-bg-2); }
.slot--kids{ border-color:var(--senf); }
.slot time{ font-family:var(--f-mono); font-size:var(--fs-md); font-weight:500; }
.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; 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); 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-stretch:64%; font-weight:900; font-size:var(--fs-h2); line-height:1; display:block; margin:10px 0 6px; }
.price strong sup{ font-size:.4em; font-weight:800; vertical-align:super; }
.price span{ color:var(--b-grau); font-size:var(--fs-base); }
.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); padding:14px 20px; color:var(--b-ink); font-size:var(--fs-base);
}
.schedule__badge b{ font-family:var(--f-mono); font-size:var(--fs-xs); letter-spacing:.14em; 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:.12em; text-transform:uppercase; display:block; }
.frame figcaption span{ font-size:var(--fs-sm); 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; }
.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); }

/* Wie .sec__head h2, eine Größenstufe kleiner */
.ctablock__body h2 {
  font-family: var(--f-display);
  font-stretch: 66%;
  font-weight: 900;
  text-transform: uppercase;
  font-size: var(--fs-h2);
  line-height: .9;
  margin-top: var(--space-sm);
}
.ctablock__body p {
  margin-top: var(--space-sm);
  font-size: var(--fs-lg);
  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-stretch: 70%;
  font-weight: 800;
  font-size: var(--fs-h3);
  line-height: .95;
}
.ctablock__facts span {
  font-family: var(--f-mono);
  font-size: var(--fs-2xs);
  letter-spacing: .12em;
  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);
  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-2xs);
  letter-spacing:.12em; 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);
  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-2xs);
  letter-spacing:.12em; 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;
  /* 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-lg);
  line-height:1.5;
  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);
  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; 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-stretch: 70%;
  font-weight: 800;
  text-transform: uppercase;
  font-size: var(--fs-h3);
  line-height: .95;
  margin-bottom: var(--space-3xs);
}
.person__rank {
  margin-bottom: var(--space-xs);
  font-family: var(--f-mono);
  font-size: var(--fs-md);
  letter-spacing: .08em;
  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-2xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--b-grau);
  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-stretch:72%; font-weight:800; text-transform:uppercase;
  font-size:var(--fs-h4);
}
.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:22px; 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 --- */
.contact{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(36px,6vw,90px); }
@media (max-width:900px){ .contact{ grid-template-columns:1fr; } }
.form{ display:grid; gap:var(--space-md); }
.form label{gap:var(--space-2xs); font-family:var(--f-mono); font-size:var(--fs-xs); letter-spacing:.14em; text-transform:uppercase; color:var(--b-grau); }
.form input,.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:0;
  transition:border-color .2s, box-shadow .2s; appearance:none; -webkit-appearance:none;
}
.form input::placeholder,.form textarea::placeholder{ color:#A6ACB1; }
.form input:focus,.form select:focus,.form textarea:focus{
  outline:none; border-color:var(--b-ink); box-shadow:0 0 0 3px rgba(23,25,27,.08);
}
.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; }
@media (max-width:560px){ .form .btn{ width:100%; justify-content:center; } }
.contact__info{ display:grid; gap:var(--space-lg); align-content:start; }
.contact__block{ border-top:2px solid var(--b-ink); padding-top:var(--space-sm); }
.contact__block .mono{ color:var(--b-grau); margin-bottom:var(--space-2xs); display:block; }
.contact__block p{ font-size:var(--fs-lg); }
.contact__call{
  font-family:var(--f-display); font-stretch:64%; font-weight:900; text-decoration:none;
  font-size:var(--fs-h2); color:var(--zinnober); line-height:1;
}
.contact__call:hover{ color:var(--zinnober-t); }
.contact__hours { color: var(--b-grau); margin-top: var(--space-2xs); }
/* Die E-Mail steht unter der Telefonnummer, eine Stufe leiser als diese:
   Anrufen ist der kürzere Weg, schreiben der zweite. */
.contact__mail { margin-top: var(--space-2xs); font-size: var(--fs-base); }
.contact__mail a { color: var(--zinnober); text-decoration: none; }
.contact__mail a:hover { color: var(--zinnober-t); text-decoration: underline; }
.map{
  aspect-ratio:4/3; background:var(--b-bg-2); border:1px solid var(--b-hair);
  display:grid; place-items:center; color:var(--b-grau); text-align:center;
}
.map small { text-transform: none; letter-spacing: 0; font-size:var(--fs-sm); }
/* 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);
  background:none; border:none; transition:background .2s, color .2s;
}
.map__load:hover{ background:#fff; color:var(--b-ink); }
.map__load .mono{ color:var(--zinnober); }
.map__load small{ font-size:var(--fs-sm); 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:.08em; 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 --- */
.footer{ background:var(--b-ink); color:#B9BEC2; padding:70px 0 40px; }
.footer .wrap{ display:grid; gap:var(--space-xl); }
.footer__quote{ max-width:56ch; font-size:var(--fs-h4); font-style:italic; color:#fff; line-height:1.5; }
.footer__quote footer{ font-family:var(--f-mono); font-size:var(--fs-xs); letter-spacing:.14em; text-transform:uppercase; color:#8B9196; margin-top:var(--space-sm); font-style:normal; }
.footer__grid{ display:flex; justify-content:space-between; gap:var(--space-lg); flex-wrap:wrap; border-top:1px solid #33383C; padding-top:var(--space-lg); align-items:center; }
.footer__grid nav{ display:flex; gap:var(--space-md); flex-wrap:wrap; }
.footer__grid .mono{ color: #8B9196; }
.footer a{ color:inherit; text-decoration:none; font-family:var(--f-mono); font-size:var(--fs-xs); letter-spacing:.1em; text-transform:uppercase; }
.footer a:hover{ color:#fff; }
.footer__logos{ display:flex; gap:var(--space-xs); flex-wrap:wrap; }
.footer__logo{ border:1px dashed #4A5054; padding:10px 16px; font-family:var(--f-mono); font-size:var(--fs-2xs); letter-spacing:.1em; text-transform:uppercase; color:#8B9196; }

/* Instagram im Fuß: hier mit Wort — in einer Reihe aus Textverweisen bliebe
   ein einzelnes Zeichen unklar. Das Icon steht etwas größer als die
   Versalien daneben, sonst wirkt es verloren. */
.footer__social{ display:inline-flex; align-items:center; gap:var(--space-3xs); }
.footer__social .icon{ font-size:1.35em; }

@media (max-width:670px){
  .footer {
  padding: 30px 0 40px;
  }
}

/* --- 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 {
  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);
}
.form input[type="checkbox"]     { width: auto; margin-right: var(--space-2xs); }
/* 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); }

/* 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); 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);
  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; }
}

/* Reveal-Grundzustand (JS setzt Animation; ohne JS/Reduced Motion sichtbar) */
.reveal{ opacity:1; }

/* ============================================================
   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;
  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; 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); }
.contact__figure img{ width:100%; aspect-ratio:16/10; object-fit:cover; }
.contact__figure figcaption{ font-family:var(--f-mono); font-size:var(--fs-2xs); letter-spacing:.12em; text-transform:uppercase; color:var(--b-grau); padding:10px 2px 0; }

/* ---------- Footer: echte Verbandslogos ---------- */
.footer__logo--img{ background:#fff; border:none; padding:10px 14px; display:flex; align-items:center; gap:var(--space-xs); color:var(--b-ink); }
.footer__logo--img img{ height:40px; width:auto; }

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

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

.prose h2 {
  font-family: var(--f-display);
  font-stretch: 66%;
  font-weight: 900;
  text-transform: uppercase;
  font-size: var(--fs-h3);
  line-height: .95;
  margin: var(--gap-head) 0 var(--space-sm);
}
.prose h3 {
  font-family: var(--f-display);
  font-stretch: 70%;
  font-weight: 800;
  text-transform: uppercase;
  font-size: var(--fs-h4);
  line-height: 1;
  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: .12em;
  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;
}
.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:900; font-stretch:66%;
  text-transform:uppercase; line-height:.86;
  font-size:clamp(38px, 8.6vw, 128px);
  letter-spacing:-.005em;
}
.hero__logo-rule{
  display:block; width:clamp(90px, 16vw, 200px); height:6px;
  background:var(--zinnober);
  margin:clamp(14px, 2.2vw, 28px) 0 clamp(12px, 1.8vw, 22px);
}
.hero__logo-zusatz{
  font-family:var(--f-display); font-weight:500; font-stretch:88%;
  text-transform:uppercase; line-height:1.1;
  font-size:clamp(14px, 2.3vw, 30px);
  /* Sperrung ohne Ausgleich rechts rückt den Text optisch nach links. */
  letter-spacing:.32em; text-indent:.32em;
  color:#fff;
}

.hero--dunkel .hero__sub{ color:var(--papier-2); 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. */
  .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-style:normal; 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;
  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.7;
  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;
  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-md); letter-spacing:.1em;
}
.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; }
}