/* =====================================================================
   SUKHOTHAI ACADEMY · Neue Hauptseite — Fassung 2 (20.10.2026)
   ---------------------------------------------------------------------
   Eigenständig: erbt NUR die Marken-Tokens (marken-tokens.css, Spiegel von
   brand/tokens.css) und die Schriften. Outfit läuft im Schnitt 500, nie fett
   (GUIDELINES §3) — die Wucht kommt aus Größe und engem Zeilenabstand.
   Orange ist der Lichtpunkt: das eine Akzentwort je Überschrift (<em>),
   sonst nirgends als Fläche. Blau trägt Flächen und Knöpfe.
   ===================================================================== */
@import url("marken-tokens.css");

:root{
  --schwarz:var(--sa-schwarz); --anthrazit:var(--sa-anthrazit); --hell:var(--sa-hell);
  --weiss:var(--sa-weiss); --blau:var(--sa-blau-tief); --blau-dunkel:var(--sa-blau-dunkel);
  --orange:var(--sa-orange); --grau-dunkel:var(--sa-text-dunkel); --grau-hell:var(--sa-text-hell);
  --linie-d:rgba(255,255,255,.14); --linie-h:rgba(0,0,0,.10);
  --rand:clamp(20px,4.4vw,64px); --breit:1320px;
  --mega:clamp(52px,9.6vw,156px); --gross:clamp(38px,5.6vw,84px); --mittel:clamp(24px,2.4vw,34px);
  --kurve:cubic-bezier(.2,.7,.2,1); --leiste:68px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:var(--leiste)}
body{background:var(--schwarz);color:var(--grau-dunkel);font:400 18px/1.55 'Inter',system-ui,sans-serif;
  overflow-x:clip;-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%}
h1,h2,h3,h4{font-family:'Outfit',system-ui,sans-serif;font-weight:500;letter-spacing:-.025em;line-height:.98;color:var(--weiss)}
h2{font-size:var(--gross)}
em{font-style:normal;color:var(--orange)}
/* Auf Hell trägt Orange nur 2,2:1 — dort übernimmt das tiefe Blau den Akzent. */
.wer em,.zeiten em,.orte em{color:var(--blau)}
a{color:inherit}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.rahmen{max-width:var(--breit);margin:0 auto;padding:0 var(--rand)}
.ueber{font:600 14px/1 'Inter',system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--weiss);margin-bottom:24px}
.ueber--dunkel{color:var(--blau)}
.sprung{position:absolute;left:-9999px}
.sprung:focus{left:16px;top:16px;z-index:99;background:var(--weiss);color:var(--schwarz);padding:12px 16px}

.knopf{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:16px 28px;
  border-radius:var(--sa-radius-button);background:var(--blau);color:var(--weiss);text-decoration:none;
  font:600 16px/1 'Inter',system-ui,sans-serif;transition:background .2s ease,transform .2s var(--kurve)}
.knopf::after{content:'→';transition:transform .2s var(--kurve)}
.knopf:hover{background:var(--blau-dunkel)}
.knopf:hover::after{transform:translateX(4px)}
.knopf--klein{min-height:44px;padding:12px 16px;font-size:15px}
.knopf--klein::after{content:none}

/* --- Kopfleiste: über der Bühne durchsichtig, danach dunkel ------------- */
.leiste{position:fixed;inset:0 0 auto;z-index:60;height:var(--leiste);display:flex;align-items:center;gap:28px;
  padding:0 var(--rand);transition:background .3s ease,border-color .3s ease;border-bottom:1px solid transparent}
.leiste.fest{background:rgba(41,41,41,.94);border-color:var(--linie-d);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.leiste-marke img{width:56px;height:auto}
.leiste-wege{display:flex;gap:24px;margin-left:auto}
.leiste-wege a{text-decoration:none;color:var(--weiss);font-weight:500;font-size:15px;min-height:44px;display:inline-flex;align-items:center;opacity:.86}
.leiste-wege a:hover{opacity:1}
@media(max-width:900px){.leiste-wege{display:none}.leiste .knopf{margin-left:auto}}

/* =====================================================================
   1 · BÜHNE — fünf Fenster
   ===================================================================== */
.buehne{position:relative;height:100svh;min-height:620px;background:#1f1f1f;overflow:hidden;isolation:isolate}
.fenster{position:absolute;inset:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.fenster figure{position:relative;overflow:hidden;background:var(--anthrazit);margin:0}
.fenster video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fenster figcaption{position:absolute;left:14px;top:calc(var(--leiste) + 70px);font:600 14px/1 'Inter',system-ui,sans-serif;
  letter-spacing:.14em;text-transform:uppercase;color:var(--weiss);background:rgba(24,24,24,.62);padding:8px 12px;border-radius:4px}
/* Ring-Pfosten: die Fenster stehen versetzt — Bewegung, kein Raster-Smell. */
.fenster-1,.fenster-3,.fenster-5{transform:translateY(var(--hub,0px))}
.fenster-2,.fenster-4{transform:translateY(calc(var(--hub,0px) * -1))}
@media(min-width:901px){.fenster{inset:-48px 0}}

/* Vignette NUR unter dem Text (harte Regel 3) — unteres Drittel. */
.buehne::after{content:'';position:absolute;inset:auto 0 0;height:62%;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(24,24,24,.92) 0%,rgba(24,24,24,.72) 38%,rgba(24,24,24,0) 100%)}
/* Obere Vignette nur hinter der Leiste, damit die Wege auf hellem Deckenlicht lesbar bleiben. */
.buehne::before{content:'';position:absolute;inset:0 0 auto;height:calc(var(--leiste) + 48px);z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(24,24,24,.6),rgba(24,24,24,0))}
.buehne-text{position:absolute;z-index:2;inset:auto 0 0;padding:0 var(--rand) clamp(28px,5vh,64px);max-width:calc(var(--breit) + 2*var(--rand));margin:0 auto}
.buehne h1{font-size:var(--mega);line-height:.9;letter-spacing:-.04em}
.buehne h1 span{display:block}
.buehne h1 .z2{padding-left:clamp(0px,8vw,140px)}
.buehne-fuss{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px;margin-top:clamp(20px,3vh,36px);
  padding-top:clamp(16px,2.6vh,28px);border-top:1px solid rgba(255,255,255,.28)}
.buehne-fuss p{color:var(--weiss);max-width:42ch;font-size:clamp(17px,1.3vw,19px)}
.film-pause{position:absolute;z-index:3;right:var(--rand);top:calc(var(--leiste) + 10px);width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(255,255,255,.5);background:rgba(0,0,0,.25);cursor:pointer;display:grid;place-items:center}
.film-pause span{width:12px;height:14px;border-left:4px solid var(--weiss);border-right:4px solid var(--weiss)}
.film-pause[aria-pressed="true"] span{width:0;height:0;border:0;border-left:13px solid var(--weiss);border-top:8px solid transparent;border-bottom:8px solid transparent;margin-left:4px}
.story-balken{display:none}

/* Handy: EIN Film, Story-Balken oben, die anderen kommen nacheinander. */
@media(max-width:900px){
  .buehne{height:100svh;min-height:600px}
  .fenster{display:block}
  .fenster figure{position:absolute;inset:0;opacity:0;transition:opacity .6s ease;transform:none!important}
  .fenster figure.an{opacity:1}
  .kein-js .fenster figure:first-child{opacity:1}
  .fenster figcaption{top:auto;bottom:auto;left:var(--rand);top:calc(var(--leiste) + 30px)}
  .story-balken{display:flex;gap:4px;position:absolute;z-index:3;left:var(--rand);right:calc(var(--rand) + 56px);top:calc(var(--leiste) + 12px)}
  .story-balken i{flex:1;height:3px;background:rgba(255,255,255,.35);border-radius:2px;overflow:hidden;position:relative}
  .story-balken i::after{content:'';position:absolute;inset:0;background:var(--weiss);transform:scaleX(var(--f,0));transform-origin:left}
  .buehne h1 .z2{padding-left:0}
  .buehne-fuss{flex-direction:column;align-items:flex-start}
  .buehne-fuss .knopf{width:100%}
}

/* Handy-Varianten mit allen fünf Fenstern (Nikita 20.10.: „hat am Rechner voll
   die Wirkung und geht bei Mobile voll verloren"). Gewählt per data-buehne. */
@media(max-width:900px){
  .buehne:not([data-buehne="story"]) .story-balken,
  .buehne:not([data-buehne="story"]) .fenster figcaption{display:none}
  .buehne:not([data-buehne="story"]) .fenster figure{position:relative;inset:auto;opacity:1}
  /* REIHE — fünf schmale Hochkant-Fenster nebeneinander, versetzt wie Ring-Pfosten. */
  .buehne[data-buehne="reihe"] .fenster{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;inset:-28px 0}
  .buehne[data-buehne="reihe"] .fenster-1,.buehne[data-buehne="reihe"] .fenster-3,.buehne[data-buehne="reihe"] .fenster-5{transform:translateY(18px)!important}
  .buehne[data-buehne="reihe"] .fenster-2,.buehne[data-buehne="reihe"] .fenster-4{transform:translateY(-18px)!important}
  /* MOSAIK — oben drei, darunter zwei, der Text steht frei auf Schwarz darunter. */
  .buehne[data-buehne="mosaik"] .fenster{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));
    gap:4px;inset:0 0 auto;height:min(52%,max(22%,calc(100% - 440px)))}
  .buehne[data-buehne="mosaik"] .fenster figure{grid-column:span 2}
  .buehne[data-buehne="mosaik"] .fenster figure.fenster-4,.buehne[data-buehne="mosaik"] .fenster figure.fenster-5{grid-column:span 3}
  /* Die Überschrift steht auf Dunkel, nicht auf der hellen Bildfuge (design-critic 20.10.). */
  .buehne[data-buehne="mosaik"]::after{height:64%;background:linear-gradient(to top,rgba(24,24,24,.96) 0%,rgba(24,24,24,.92) 52%,rgba(24,24,24,0) 100%)}
  /* BÄNDER — fünf Querstreifen untereinander. */
  .buehne[data-buehne="baender"] .fenster{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(5,minmax(0,1fr));gap:4px}
  .buehne[data-buehne="baender"] .fenster video{object-position:50% 38%}
}

/* =====================================================================
   3 · WER TRAINIERT?
   ===================================================================== */
.wer{background:var(--hell);color:var(--grau-hell);padding:clamp(80px,10vw,152px) 0}
.wer h2,.wer h3{color:var(--anthrazit)}
.kopf{margin-bottom:clamp(36px,5vw,64px)}
.kopf h2{max-width:14ch}
.wer-buehne{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,64px);align-items:start}
.wahlen{display:flex;flex-direction:column;border-top:1px solid var(--linie-h);position:sticky;top:calc(var(--leiste) + 24px)}
.wahlen button{display:grid;grid-template-columns:96px minmax(0,1fr);align-items:baseline;gap:16px;text-align:left;cursor:pointer;
  background:none;border:0;border-bottom:1px solid var(--linie-h);padding:24px 0;color:var(--grau-hell);min-height:72px;
  transition:color .2s ease,padding .3s var(--kurve)}
.wahlen .nr{font:500 clamp(30px,3vw,44px)/1 'Outfit',system-ui,sans-serif;letter-spacing:-.03em;color:var(--grau-hell);transition:color .2s ease}
.wahlen b{font:500 clamp(19px,1.6vw,23px)/1.2 'Outfit',system-ui,sans-serif;color:var(--anthrazit)}
.wahlen button:hover .nr{color:var(--anthrazit)}
.wahlen button[aria-selected="true"]{padding-left:16px;box-shadow:inset 4px 0 0 var(--blau)}
.wahlen button[aria-selected="true"] .nr{color:var(--blau)}
.tafel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch;background:var(--weiss);border:1px solid var(--linie-h)}
.tafel+.tafel{margin-top:24px}
.js .tafel+.tafel{margin-top:0}
.tafel[hidden]{display:none}
.tafel-bild{position:relative;overflow:hidden;min-width:0;min-height:420px}
.tafel-bild img{position:absolute;inset:0}
.tafel-bild img{width:100%;height:100%;object-fit:cover;animation:auf .7s var(--kurve)}
.tafel-text{padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;gap:16px;animation:auf .5s var(--kurve)}
.tafel-name{font:600 14px/1 'Inter',system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--blau)}
.tafel h3{font-size:var(--mittel);line-height:1.08}
.tafel-text>p:not(.tafel-name){font-size:17px;line-height:1.55}
/* Zeiten als Wochenleiste (Nikita 20.10.: „visuell greifbarer" statt „Mo + Mi · 16:00").
   Sechs Tagesfelder, die Trainingstage in Blau, daneben die Uhrzeit groß. */
.slots{list-style:none;display:grid;gap:16px;margin-top:auto;border-top:1px solid var(--linie-h);padding-top:16px}
.slot{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"ort zeit" "tage tage";gap:8px 12px;align-items:baseline}
.slot-ort{grid-area:ort;font-weight:600;font-size:15px;color:var(--anthrazit)}
.slot-ort small{font-weight:400;font-size:14px;color:var(--grau-hell);margin-left:4px;white-space:nowrap}
.slot-zeit{grid-area:zeit;font:500 24px/1 'Outfit',system-ui,sans-serif;letter-spacing:-.02em;color:var(--anthrazit);font-variant-numeric:tabular-nums}
.slot-zeit small{font-size:16px;color:var(--grau-hell);letter-spacing:0}
.tage{grid-area:tage;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}
.tage i{font:600 14px/1 'Inter',system-ui,sans-serif;font-style:normal;text-align:center;padding:8px 0;border-radius:6px;
  color:var(--grau-hell);border:1px solid var(--linie-h);transition:background .3s ease,color .3s ease}
.tage i.an{background:var(--blau);border-color:var(--blau);color:var(--weiss)}
.naechstes{display:flex;align-items:center;gap:12px;font-size:15px;color:var(--anthrazit)}
.naechstes[hidden]{display:none}
.naechstes::before{content:'';flex:none;width:8px;height:8px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 0 rgba(243,146,0,.5);animation:puls 2.2s ease-out infinite}
@keyframes puls{70%{box-shadow:0 0 0 8px rgba(243,146,0,0)}100%{box-shadow:0 0 0 0 rgba(243,146,0,0)}}
.tafel .knopf{align-self:stretch}
@keyframes auf{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.wahlen .kurz{display:none}
.wahlen-fuss{display:grid;gap:8px;margin-top:32px}
.wahlen-fuss p{font:500 22px/1.2 'Outfit',system-ui,sans-serif;letter-spacing:-.01em;color:var(--anthrazit)}
.wahlen-fuss a{color:var(--blau);font-weight:600;text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.wahlen-fuss a:hover{text-decoration:underline}
/* Unter 1000 px: die Wahl wird eine Leiste, die beim Lesen der Tafel oben stehen
   bleibt — kein Hochscrollen zum Umstellen (Nikita 20.10.). */
@media(max-width:1000px){
  .wer-buehne{grid-template-columns:minmax(0,1fr);gap:16px}
  .wer .kopf{margin-bottom:16px}
  .wahlen{position:sticky;top:var(--leiste);z-index:5;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;
    border-top:0;margin:0 calc(var(--rand) * -1);padding:8px var(--rand);background:rgba(250,250,250,.94);
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
  .wahlen button{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;min-height:60px;padding:8px;
    border:1px solid var(--linie-h);border-radius:8px;background:var(--weiss)}
  .wahlen button[aria-selected="true"]{padding-left:8px;box-shadow:none;background:var(--blau);border-color:var(--blau)}
  .wahlen button[aria-selected="true"] .nr,.wahlen button[aria-selected="true"] .kurz{color:var(--weiss)}
  .wahlen .nr{font-size:clamp(19px,5.4vw,26px)}
  .wahlen .kurz{display:block;font:600 14px/1.1 'Inter',system-ui,sans-serif;color:var(--anthrazit);max-width:100%;overflow-wrap:anywhere}
  .wahlen b{display:none}
  .wahlen-fuss{display:none}
}
@media(max-width:620px){
  .tafel{grid-template-columns:minmax(0,1fr)}
  .tafel-bild{min-height:0;aspect-ratio:4/3}
}

/* =====================================================================
   4 · MANIFEST
   ===================================================================== */
.manifest{position:relative;background:var(--schwarz);padding:clamp(100px,14vw,200px) 0;overflow:hidden;isolation:isolate}
.manifest-drache{position:absolute;z-index:-1;width:min(90vw,980px);height:auto;right:-18%;top:50%;transform:translateY(-50%);opacity:.08}
.manifest-text{font:500 clamp(30px,4.4vw,66px)/1.12 'Outfit',system-ui,sans-serif;letter-spacing:-.025em;color:var(--weiss);max-width:22ch}
.manifest-text .w{color:rgba(255,255,255,var(--a,1));transition:color .25s linear}
.manifest-text em .w{color:var(--orange)}
.belege{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,48px);margin-top:clamp(56px,7vw,100px);
  border-top:1px solid var(--linie-d);padding-top:clamp(24px,3vw,36px)}
.belege b{display:block;font:500 clamp(40px,4.6vw,72px)/1 'Outfit',system-ui,sans-serif;letter-spacing:-.04em;color:var(--weiss);margin-bottom:12px}
.belege span{font-size:16px;line-height:1.45;max-width:24ch;display:block}
@media(max-width:700px){
  .belege{grid-template-columns:minmax(0,1fr)}
  /* Am Handy sitzt der Drache ganz unten rechts hinter den Zahlen, Kopf sichtbar —
     nicht mehr angeschnitten quer hinter dem Manifest (Nikita 20.10.). */
  .manifest-drache{width:78vw;right:-14vw;top:auto;bottom:24px;transform:none;opacity:.09}
}

/* =====================================================================
   5 · DISZIPLINEN — Scroll-Bahn
   ===================================================================== */
.disziplinen{background:var(--anthrazit)}
.bahn-halt{padding:clamp(80px,9vw,128px) 0}
.bahn-kopf{padding:0 var(--rand);max-width:calc(var(--breit) + 2*var(--rand));margin:0 auto clamp(32px,4vw,56px)}
.bahn-kopf h2{max-width:12ch}
.bahn-kopf>p:last-child{max-width:46ch;margin-top:20px}
.dkarten{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding:0 var(--rand)}
.dkarte{position:relative;overflow:hidden;background:var(--schwarz);aspect-ratio:3/4;isolation:isolate}
.dkarte>img,.dkarte>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--kurve)}
.dkarte::after{content:'';position:absolute;inset:auto 0 0;height:55%;z-index:0;
  background:linear-gradient(to top,rgba(24,24,24,.9),rgba(24,24,24,0))}
.dkarte-text{position:absolute;z-index:1;inset:auto 0 0;padding:clamp(16px,2vw,28px)}
.dkarte .nr{font:600 14px/1 'Inter',system-ui,sans-serif;letter-spacing:.14em;color:var(--weiss);opacity:.8}
.dkarte h3{font-size:clamp(28px,2.8vw,42px);margin:8px 0 8px}
.dkarte p{font-size:15px;line-height:1.45;color:var(--weiss);max-width:30ch}
.dkarte--wort{background:var(--blau)}
.dkarte--wort::after{content:none}
.dkarte--wort h3{font-size:clamp(40px,4.2vw,64px)}
.dkarte--kinder>img{object-position:30% 50%}
.dkarte-link{display:inline-flex;align-items:center;min-height:44px;margin-top:8px;color:var(--weiss);font-weight:600;font-size:15px}
@media(hover:hover){.dkarte:hover>img,.dkarte:hover>video{transform:scale(1.04)}}
/* Handy: Zweier-Raster statt acht Vollbild-Karten untereinander (Fassung 3) —
   der Abschnitt schrumpft von rund 3.800 auf rund 1.300 px. */
@media(max-width:620px){
  .dkarten{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .dkarte{aspect-ratio:3/4}
  .dkarte-text{padding:12px}
  .dkarte .nr{font-size:14px}
  .dkarte h3{font-size:20px;margin:4px 0 0;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:anywhere}
  .dkarte p{display:none}
  .dkarte--wort p,.dkarte--kinder p{display:block;font-size:14px;line-height:1.35}
  .dkarte--wort h3{font-size:28px}
  .dkarte--kinder{grid-column:1/-1;aspect-ratio:16/10}
  .dkarte--wort{grid-column:1/-1;aspect-ratio:16/7}
}

/* Scroll-Bahn ab 901 px: Abschnitt bleibt stehen, Karten fahren seitlich. */
@media(min-width:901px){
  .js .bahn{height:var(--bahn-hoehe,300vh);position:relative}
  .js .bahn-halt{position:sticky;top:0;height:100vh;padding:calc(var(--leiste) + 36px) 0 40px;display:flex;flex-direction:column;overflow:hidden}
  .js .bahn-kopf{margin-bottom:28px;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:end;gap:24px 48px;width:100%}
  .js .bahn-kopf .ueber{grid-column:1/-1;margin-bottom:0}
  .js .bahn-kopf>p:last-child{margin-top:0}
  .js .dkarten{display:flex;flex:1;min-height:0;gap:16px;width:max-content;
    padding-left:max(var(--rand),calc((100vw - var(--breit))/2 + var(--rand)));padding-right:var(--rand);
    transform:translate3d(var(--x,0px),0,0);will-change:transform}
  .js .dkarte{height:100%;aspect-ratio:3/4;width:auto}
  .js .dkarte--kinder{aspect-ratio:4/3}
}

/* =====================================================================
   6 · STUNDENPLAN
   ===================================================================== */
.zeiten{background:var(--hell);color:var(--grau-hell);padding:clamp(80px,10vw,152px) 0}
.zeiten h2,.zeiten h3,.zeiten h4{color:var(--anthrazit)}
.kopf--zeile{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px}
.ort-wahl{display:inline-flex;padding:4px;gap:4px;background:var(--weiss);border:1px solid var(--linie-h);border-radius:6px}
.ort-wahl[hidden]{display:none}
.ort-wahl button{min-height:48px;padding:0 24px;border:0;border-radius:4px;background:none;cursor:pointer;font:600 16px/1 'Inter',system-ui,sans-serif;color:var(--anthrazit)}
.ort-wahl button[aria-selected="true"]{background:var(--anthrazit);color:var(--weiss)}
.gruppen-wahl{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.gruppen-wahl[hidden]{display:none}
.gruppen-wahl button{min-height:44px;padding:0 12px;border-radius:22px;border:1px solid var(--linie-h);background:var(--weiss);cursor:pointer;
  font:600 15px/1 'Inter',system-ui,sans-serif;color:var(--anthrazit);font-variant-numeric:tabular-nums}
.gruppen-wahl button[aria-pressed="true"]{background:var(--anthrazit);border-color:var(--anthrazit);color:var(--weiss)}
.heute{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px;background:var(--anthrazit);color:var(--weiss);
  padding:20px clamp(16px,2.4vw,28px);margin-bottom:28px;font-size:17px}
.heute[hidden]{display:none}
.heute b{font:500 clamp(22px,2vw,28px)/1.1 'Outfit',system-ui,sans-serif;color:var(--weiss)}
.heute .puls{width:10px;height:10px;border-radius:50%;background:var(--orange);align-self:center}
.woche+.woche{margin-top:56px}
.js .woche+.woche{margin-top:0}
.woche[hidden]{display:none}
.woche-ort{font-size:clamp(20px,1.8vw,24px);margin-bottom:16px}
.woche-tage{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-top:2px solid var(--anthrazit)}
.woche-tage--drei{grid-template-columns:repeat(3,minmax(0,1fr))}
.tag{border-right:1px solid var(--linie-h);padding:16px clamp(8px,1vw,16px) 20px}
.tag:last-child{border-right:0}
.tag h4{font-size:22px;margin-bottom:16px}
.tag.ist-heute{background:var(--weiss);box-shadow:inset 0 3px 0 var(--blau)}
.tag.ist-heute h4::after{content:' · heute';font:600 14px/1 'Inter',system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--blau)}
.tag ul{list-style:none;display:grid;gap:12px}
.tag li{display:grid;gap:1px;padding-left:12px;border-left:3px solid #D6D6D6;transition:border-color .2s ease,opacity .2s ease}
.tag time{font:500 18px/1.1 'Outfit',system-ui,sans-serif;color:var(--anthrazit);font-variant-numeric:tabular-nums}
.tag b{font-size:15px;font-weight:600;color:var(--anthrazit);line-height:1.25}
.tag small{font-size:14px;color:var(--grau-hell);line-height:1.3}
.gefiltert .tag li{opacity:.38}
.gefiltert .tag li.passt{opacity:1;border-left-color:var(--blau)}
.zeiten-fuss{margin-top:28px;font-size:16px}
@media(max-width:1000px){.woche-tage{grid-template-columns:repeat(3,minmax(0,1fr))}.tag:nth-child(3n){border-right:0}.tag{border-bottom:1px solid var(--linie-h)}}
@media(max-width:620px){
  .woche-tage,.woche-tage--drei{grid-template-columns:minmax(0,1fr)}
  .tag{border-right:0;display:grid;grid-template-columns:56px minmax(0,1fr);gap:12px}
  .tag h4{margin:0}
  .tag.ist-heute h4::after{content:'';}
  .tag.ist-heute{background:var(--weiss);box-shadow:inset 3px 0 0 var(--blau)}
  /* Am Handy blendet die Gruppenwahl Fremdes ganz aus — die Liste wird kurz. */
  .gefiltert .tag li:not(.passt),.gefiltert .tag.leer{display:none}
}

/* =====================================================================
   7 · STIMMEN — die Note als Maßstabssprung
   ===================================================================== */
.stimmen{background:var(--weiss);color:var(--grau-hell);padding:clamp(80px,10vw,150px) 0;overflow:hidden}
.stimmen-raster{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(32px,5vw,80px);align-items:center}
.note b{display:block;font:500 clamp(160px,26vw,380px)/.8 'Outfit',system-ui,sans-serif;letter-spacing:-.06em;color:var(--blau)}
.note p{margin-top:clamp(16px,2vw,28px);font:500 clamp(20px,1.8vw,26px)/1.3 'Outfit',system-ui,sans-serif;color:var(--anthrazit)}
.note .sterne{display:block;color:var(--anthrazit);letter-spacing:.12em;margin-bottom:8px;font-size:clamp(22px,2vw,30px)}
.note small{font:400 15px/1.4 'Inter',system-ui,sans-serif;color:var(--grau-hell)}
.stimmen-spalte{display:grid;gap:28px}
.stimme{margin:0;padding-top:24px;border-top:1px solid var(--linie-h)}
.stimme blockquote{font:500 clamp(20px,1.6vw,23px)/1.35 'Outfit',system-ui,sans-serif;color:var(--anthrazit);letter-spacing:-.01em}
.stimme figcaption{margin-top:12px;font-size:15px}
.stimme figcaption b{color:var(--anthrazit);font-weight:600}
.stimme--gross{border-top:0;padding-top:0}
.stimme--gross blockquote{font-size:clamp(30px,3.2vw,48px);line-height:1.08;letter-spacing:-.025em}
@media(max-width:860px){.stimmen-raster{grid-template-columns:minmax(0,1fr)}}

/* =====================================================================
   8 · TEAM — fünf Fenster wie auf der Bühne
   ===================================================================== */
.team{background:var(--schwarz);padding:clamp(80px,10vw,140px) 0 0}
.team-kopf{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:24px 48px;align-items:end;margin-bottom:clamp(36px,5vw,64px)}
.team-kopf p{max-width:40ch}
.team-fenster{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.team-fenster figure{position:relative;margin:0;aspect-ratio:4/5;overflow:hidden;background:var(--anthrazit)}
.team-fenster figure::before{content:'';position:absolute;inset:auto 0 0;height:38%;background:var(--blau)}
.team-fenster img{position:absolute;left:-17%;width:134%;max-width:none;bottom:-34%;height:auto}
.team-fenster figure:nth-child(odd){transform:translateY(var(--hub2,0px))}
.team-fenster figcaption{position:absolute;left:12px;bottom:12px;z-index:1;font:600 14px/1.2 'Inter',system-ui,sans-serif;color:var(--weiss);
  background:rgba(24,24,24,.62);padding:8px 12px;border-radius:4px}
@media(max-width:860px){
  .team-kopf{grid-template-columns:minmax(0,1fr)}
  .team-fenster{gap:4px}
  .team-fenster figure{aspect-ratio:2/5}
  .team-fenster img{left:-36%;width:172%;bottom:-18%}
  .team-fenster figcaption{display:none}
}

/* =====================================================================
   9 · START — Text links auf Schwarz, Bild rechts unbehandelt
   ===================================================================== */
.start{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);background:var(--schwarz)}
.start-bild{grid-column:2;grid-row:1;width:100%;height:100%;min-height:640px;object-fit:cover}
.start-text{grid-column:1;grid-row:1;align-self:center;padding:clamp(72px,8vw,120px) clamp(28px,4vw,64px) clamp(72px,8vw,120px) max(var(--rand),calc((100vw - var(--breit))/2 + var(--rand)))}
.start h2{font-size:clamp(44px,6vw,96px);line-height:.94;max-width:9.5ch}
.start-text>p{color:var(--weiss);max-width:36ch;margin:24px 0 36px;font-size:19px}
.wege{display:grid;gap:12px;max-width:520px}
.weg{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 16px;min-height:72px;padding:16px 24px;
  border-radius:var(--sa-radius-button);text-decoration:none;color:var(--weiss);border:1px solid rgba(255,255,255,.4);
  transition:background .2s ease,border-color .2s ease,transform .2s var(--kurve)}
.weg::after{content:'→';grid-row:1/3;grid-column:2;font-size:22px;color:var(--orange)}
.weg b{font:500 22px/1.1 'Outfit',system-ui,sans-serif}
.weg span{font-size:15px;opacity:.85}
.weg:hover{border-color:var(--weiss);transform:translateX(4px)}
.weg--voll{background:var(--blau);border-color:var(--blau)}
.weg--voll::after{color:var(--weiss)}
.weg--voll:hover{background:var(--blau-dunkel)}
@media(max-width:860px){
  .start{grid-template-columns:minmax(0,1fr)}
  .start-bild{grid-column:1;grid-row:1;min-height:0;aspect-ratio:4/5;height:auto}
  .start-text{grid-column:1;grid-row:2;padding:48px var(--rand) 64px}
}

/* =====================================================================
   10 · STANDORTE + FRAGEN
   ===================================================================== */
.orte{background:var(--hell);color:var(--grau-hell);padding:clamp(80px,10vw,140px) 0}
.orte h2,.orte h3{color:var(--anthrazit)}
.orte-raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)) minmax(0,1.3fr);gap:clamp(24px,3vw,48px)}
.ort h3{font-size:clamp(34px,3.4vw,52px);margin-bottom:16px}
.ort address{font-style:normal;font-size:17px}
.ort-was{margin-top:8px;font-size:15px;font-weight:600;color:var(--anthrazit)}
.karte{position:relative;margin-top:20px;aspect-ratio:4/3;background:var(--anthrazit);display:grid;place-items:center;overflow:hidden}
.karte iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.karte-laden{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px;text-align:center}
.karte-laden button{min-height:48px;padding:12px 16px;border-radius:var(--sa-radius-button);cursor:pointer;background:transparent;color:var(--weiss);
  border:1px solid rgba(255,255,255,.55);font:600 16px/1 'Inter',system-ui,sans-serif}
.karte-laden small{font-size:14px;color:var(--grau-dunkel);max-width:26ch}
.fragen h2{font-size:clamp(34px,3.4vw,52px);margin-bottom:16px}
.fragen details{border-top:1px solid var(--linie-h)}
.fragen details:last-child{border-bottom:1px solid var(--linie-h)}
.fragen summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;align-items:center;min-height:60px;padding:16px 0;
  font:500 19px/1.25 'Outfit',system-ui,sans-serif;color:var(--anthrazit)}
.fragen summary::-webkit-details-marker{display:none}
.fragen summary::after{content:'+';font:400 26px/1 'Inter',system-ui,sans-serif;color:var(--blau);transition:transform .2s ease}
.fragen details[open] summary::after{transform:rotate(45deg)}
.fragen details p{padding:0 0 16px;font-size:16px;max-width:52ch}
.fragen a{color:var(--blau);font-weight:600}
@media(max-width:1000px){.orte-raster{grid-template-columns:repeat(2,minmax(0,1fr))}.fragen{grid-column:1/-1}}
@media(max-width:620px){.orte-raster{grid-template-columns:minmax(0,1fr)}}

/* --- Fuss ------------------------------------------------------------- */
.fuss{background:var(--schwarz);padding:clamp(56px,6vw,88px) 0 40px;border-top:1px solid var(--linie-d)}
.fuss-raster{display:grid;grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr));gap:32px}
.fuss-marke{width:140px;height:auto}
.fuss h3{font-size:24px;margin-bottom:8px}
.fuss-raster div a{display:flex;align-items:center;min-height:44px;text-decoration:none;font-size:16px;color:var(--grau-dunkel)}
.fuss-raster div a:hover{color:var(--weiss)}
.fuss-recht{grid-column:1/-1;font-size:14px;border-top:1px solid var(--linie-d);padding-top:24px}
@media(max-width:800px){.fuss-raster{grid-template-columns:repeat(2,minmax(0,1fr))}.fuss-marke{grid-column:1/-1}}

/* --- Mitläufer am Handy -------------------------------------------------- */
.mitlaeufer{position:fixed;z-index:55;left:16px;right:16px;bottom:calc(14px + env(safe-area-inset-bottom));display:none;
  justify-content:center;gap:8px;align-items:center;min-height:54px;border-radius:var(--sa-radius-button);
  background:var(--blau);color:var(--weiss);font:600 16px/1 'Inter',system-ui,sans-serif;text-decoration:none;
  box-shadow:0 8px 24px rgba(0,0,0,.28);transform:translateY(140%);transition:transform .35s var(--kurve)}
@media(max-width:900px){.mitlaeufer{display:flex}.mitlaeufer.an{transform:none}.fuss{padding-bottom:104px}}

/* --- Aufziehen: Blöcke kommen beim Scrollen leicht von unten ------------ */
.js [data-auf]{opacity:0;transform:translateY(24px);transition:opacity .7s var(--kurve),transform .7s var(--kurve)}
.js [data-auf].da{opacity:1;transform:none}

/* --- Ruhig, wer es ruhig will ------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .tafel-bild img,.tafel-text{animation:none}
  .fenster figure{transform:none!important}
  .js [data-auf]{opacity:1;transform:none;transition:none}
  .naechstes::before{animation:none}
}