/* =====================================================================
   SUKHOTHAI · Kinder-Seite im neuen Look (20.10.2026)
   Liegt über neu.css — nur was die Kinder-Seite anders macht:
   eine Bühne mit EINEM Film, die Altersfrage darauf, die vier Bausteine
   einer Stunde und eine Fünf-Tage-Woche nur mit Kinderstunden.
   Farben und Schriften ausschließlich aus den Tokens von neu.css.
   ===================================================================== */

/* --- Bühne: ein Film. Am Rechner steht er rechts im Hochformat, der Text
   links auf Schwarz — ein Hochkant-Film quer gezogen schnitte die Köpfe ab. */
@media(min-width:901px){
  .buehne--kinder{background:var(--schwarz)}
  .buehne--kinder .fenster{inset:0 0 0 auto;width:min(44vw,760px);display:block}
  .buehne--kinder .fenster figure{position:absolute;inset:0;transform:none!important}
  .buehne--kinder::after{display:none}
  .buehne--kinder .buehne-text{inset:var(--leiste) auto 0 0;display:flex;flex-direction:column;justify-content:center;
    width:min(56vw,calc(100vw - min(44vw,760px)));padding:clamp(24px,4vh,48px) clamp(32px,4vw,72px) clamp(32px,5vh,64px) var(--rand);margin:0}
  .buehne--kinder h1{font-size:clamp(56px,7.4vw,124px)}
  .buehne--kinder h1 .z2{padding-left:0}
  .buehne--kinder .buehne-fuss{flex-direction:column;align-items:stretch;justify-content:flex-start}
}
.buehne--kinder .buehne-fuss p{max-width:38ch}

/* --- Die Altersfrage: erste Frage der Anmeldung, drei gleich große Flächen.
   Zahl groß in Outfit, Einheit klein — wie die Wahlknöpfe der Strecke. --- */
.frage-oben{display:grid;gap:12px;width:100%;max-width:520px}
.frage-oben-titel{display:flex;flex-direction:column;gap:2px;font:600 17px/1.3 'Inter',system-ui,sans-serif;color:var(--weiss)}
.frage-oben-titel span{font-weight:500;font-size:15px;color:var(--orange)}
.alter-wahl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.alter-wahl a{display:grid;justify-items:center;align-content:center;gap:4px;min-height:80px;padding:12px 6px;
  border-radius:var(--sa-radius-button);background:var(--blau);color:var(--weiss);text-decoration:none;
  transition:background .2s ease,transform .2s var(--kurve)}
.alter-wahl a:hover{background:var(--blau-dunkel);transform:translateY(-2px)}
.alter-wahl b{font:500 clamp(28px,3vw,36px)/1 'Outfit',system-ui,sans-serif;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.alter-wahl span{font-size:14px;opacity:.88}
.frage-oben-mit{font-size:15px;font-weight:500;color:var(--weiss);text-underline-offset:4px;justify-self:start;display:inline-block;padding:8px 0;margin:-4px 0}
.frage-oben-mit:hover{color:var(--orange)}
.frage-oben--start{margin-bottom:28px}

/* --- Eine Stunde: vier Bausteine, Zelle = Dateimaß 4:3 ---------------- */
.stunde{background:var(--schwarz);padding:clamp(80px,10vw,152px) 0}
.stunde .kopf{margin-bottom:clamp(32px,4vw,56px)}
.stunde-raster{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.stunde-raster li{display:grid;gap:16px;align-content:start}
.stunde-raster img{width:100%;aspect-ratio:4/3;height:auto;object-fit:cover}
.stunde-raster .nr{font:600 14px/1 'Inter',system-ui,sans-serif;letter-spacing:.14em;color:var(--orange)}
.stunde-raster h3{font-size:var(--mittel);margin:10px 0 8px}
.stunde-raster p{color:var(--weiss);opacity:.82;font-size:16px;max-width:32ch}
@media(max-width:1000px){.stunde-raster{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.stunde-raster{grid-template-columns:minmax(0,1fr)}}

/* --- Kinderwoche Lahr: fünf Tage ---------------------------------------- */
.woche-tage--kinder{grid-template-columns:repeat(5,minmax(0,1fr))}
@media(max-width:1000px){.woche-tage--kinder{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:620px){.woche-tage--kinder{grid-template-columns:minmax(0,1fr)}}

@media (prefers-reduced-motion:reduce){.alter-wahl a{transition:none}.alter-wahl a:hover{transform:none}}

/* --- Nach design-critic 13/16 (20.10.2026) ------------------------------
   Handy-Bühne: Vignette reicht bis über die Headline — je nach Filmbild lag
   das orange „üben“ sonst auf dem orangen Gürtel. Nur Verlauf hinter dem
   Text, das Motiv darüber bleibt unbehandelt (Kunden-Regel 3). */
@media(max-width:900px){
  .buehne--kinder::after{height:82%;background:linear-gradient(to top,rgba(24,24,24,.95) 0%,rgba(24,24,24,.88) 62%,rgba(24,24,24,0) 100%)}
}
/* Gruppen-Wähler: eine Kante für alle Zeilen — Zahlspalte fasst „10–14“,
   jede Zeile trägt denselben Einzug, die Auswahl zeigt nur die Linie. */
.kinder .wahlen button{grid-template-columns:clamp(104px,9vw,128px) minmax(0,1fr);padding-left:16px}
.kinder .tafel .knopf{line-height:1.25;text-align:center}
@media(max-width:900px){
  .kinder .wahlen{grid-template-columns:repeat(3,minmax(0,1fr))}
  .kinder .wahlen button{padding-left:8px}
}