/* =====================================================================
   SUKHOTHAI ACADEMY · Schulstart — Seite v6 (Nikitas Feedback 15.09.2026)
   ---------------------------------------------------------------------
   Liegt ÜBER seite-v4.css: v4 bleibt das Fundament (Tokens, Raster,
   Hero-Bauarten, Gruppen, Team-Matte), hier stehen nur die neuen Bauteile.
   Farben und Schriften ausschliesslich aus den Marken-Tokens.
   Neu: Nutzen-Leiste mit Zeichen · „Was lernt dein Kind" zentriert ·
   Stunden-Bausteine · Google-Bewertungen in drei Spalten · Gründer vorn in
   der Mannschaft · Häufige Fragen · Hallen je Standort · Fuss mit Karte
   (erst nach Klick geladen), Anruf und WhatsApp.
   ===================================================================== */

/* --- Hero: Ortszeile unter dem Knopf -------------------------------- */
.hero-ort{display:flex;align-items:center;gap:10px;margin-top:18px;
  font-size:var(--label);font-weight:600;color:var(--weiss);letter-spacing:.02em}
.hero-ort svg{width:18px;height:18px;flex:0 0 auto;color:var(--orange)}

/* --- Nutzen-Leiste: drei Zeilen mit Zeichen ------------------------- */
.nutzen{background:var(--anthrazit);border-top:1px solid var(--linie-dunkel)}
.nutzen .wrap{row-gap:0;padding-top:clamp(28px,3.4vw,44px);padding-bottom:clamp(28px,3.4vw,44px)}
.nutzen ul{grid-column:1/-1;list-style:none;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,48px)}
@media(max-width:760px){.nutzen ul{grid-template-columns:minmax(0,1fr);gap:20px}}
.nutzen li{display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:16px;align-items:start}
.zeichen{width:48px;height:48px;display:grid;place-items:center;
  border:1px solid var(--linie-dunkel);border-radius:var(--sa-radius-flaeche)}
.zeichen svg{width:26px;height:26px;color:var(--orange)}
.nutzen h2{font-size:clamp(20px,1.9vw,23px);line-height:1.15;color:var(--weiss);margin:2px 0 6px}
.nutzen p{font-size:var(--klein);line-height:1.45;color:var(--text-dunkel)}

/* --- Was lernt dein Kind: reiner Text, mittig ----------------------- */
.lernen .wrap{justify-items:center}
.lernen-kopf{grid-column:2/-2;text-align:center;max-width:720px}
.lernen-kopf p{margin-top:20px;font-size:clamp(18px,1.6vw,21px);line-height:1.5}
.schritte{grid-column:2/-2;list-style:none;width:100%;max-width:780px;counter-reset:schritt}
@media(max-width:860px){.lernen-kopf,.schritte{grid-column:1/-1}}
.schritte li{counter-increment:schritt;display:grid;grid-template-columns:64px minmax(0,1fr);
  column-gap:clamp(16px,2.4vw,28px);padding:28px 0;border-top:1px solid var(--linie-hell)}
.schritte li:last-child{border-bottom:1px solid var(--linie-hell)}
.schritte li::before{content:counter(schritt);font-family:'Outfit',system-ui,sans-serif;
  font-weight:500;font-size:clamp(40px,4.4vw,56px);line-height:.9;color:var(--blau-tief)}
.schritte h3{margin-bottom:8px}
@media(max-width:620px){.schritte li{grid-template-columns:36px minmax(0,1fr);column-gap:12px}}
.schritte .alltag{margin-top:12px;font-size:var(--klein);color:var(--anthrazit);
  display:flex;gap:10px;align-items:baseline}
.schritte .alltag b{font-weight:600;color:var(--anthrazit);white-space:nowrap}
.schritte .alltag::before{content:'';flex:0 0 auto;width:6px;height:6px;background:var(--orange);transform:translateY(-2px)}

/* --- Stunden-Bausteine: vier Kacheln, Foto über Text ---------------- */
.kopf--mitte{text-align:left}
.bausteine{grid-column:1/-1;list-style:none;display:grid;gap:var(--fuge);
  grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1000px){.bausteine{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.bausteine{grid-template-columns:minmax(0,1fr)}}
.baustein{background:var(--anthrazit);display:flex;flex-direction:column}
.baustein .bild{aspect-ratio:4/3;overflow:hidden}
/* Am Handy stehen die vier untereinander — im 4:3 wurde daraus ein
   Bildschirm-Marathon (Abzug 390, 15.09.). Flacher, damit Titel und Satz
   im selben Blick bleiben wie das Bild. */
@media(max-width:520px){.baustein .bild{aspect-ratio:16/9}}
.baustein img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--kurve)}
@media(hover:hover){.baustein:hover img{transform:scale(1.04)}}
.baustein-text{padding:22px 24px 26px}
.baustein .nr{font-weight:600;font-size:var(--label);line-height:1;color:var(--orange);
  letter-spacing:.14em;margin-bottom:12px}
.baustein h3{color:var(--weiss);font-size:clamp(21px,2vw,25px);margin-bottom:8px}
.baustein p{color:var(--text-dunkel);font-size:var(--klein);line-height:1.45}

/* --- Gruppen: gleiche Bildhöhen nach dem Tausch --------------------- */
.zeiten li span{text-align:right}

/* --- Google-Bewertungen: drei Spalten, klein ------------------------ */
.bewertungen{grid-column:1/-1;display:grid;gap:clamp(16px,2vw,24px);
  grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:980px){.bewertungen{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.bewertungen{grid-template-columns:minmax(0,1fr)}}
.bewertung{background:var(--weiss);color:var(--sa-text);padding:24px;display:flex;flex-direction:column;
  border:1px solid var(--linie-hell)}
.bewertung-kopf{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.sterne{display:flex;gap:2px;color:var(--orange)}
.sterne svg{width:18px;height:18px}
.g-marke{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--text-hell)}
.g-marke svg{width:18px;height:18px}
.bewertung blockquote{font-size:var(--klein);line-height:1.5;color:var(--sa-text);flex:1}
.bewertung cite{display:block;margin-top:16px;font-style:normal;font-size:14px;color:var(--text-hell)}
.bewertung cite b{color:var(--anthrazit);font-weight:600}
.bewertungen-fuss{grid-column:1/-1;font-size:14px;color:var(--text-dunkel)}

/* --- Team: Gründer vorn in der Mitte -------------------------------- */

.gruender-kurz{background:var(--blau-tief);color:var(--text-blau)}
.gruender-kurz .wrap{padding-top:clamp(24px,3vw,40px);padding-bottom:clamp(56px,6vw,88px)}
.gruender-kurz .innen{grid-column:3/-3;text-align:center}
@media(max-width:860px){.gruender-kurz .innen{grid-column:1/-1}}
.gruender-kurz h3{color:var(--weiss);margin-bottom:12px}
.gruender-kurz p{max-width:58ch;margin:0 auto}

/* --- Häufige Fragen (Nikita 16.09.: nicht mehr aufklappbar) ---------
   Vorher standen die Antworten hinter einem Klick — bei zwei Saetzen Inhalt
   ist das ein Hindernis ohne Gegenwert. Jetzt stehen sie offen da und lassen
   sich in einem Zug lesen. */
.fragen{grid-column:3/-3;width:100%}
@media(max-width:860px){.fragen{grid-column:1/-1}}
.fragen--offen .frage{border-top:1px solid var(--linie-hell);padding:24px 0}
.fragen--offen .frage:last-child{border-bottom:1px solid var(--linie-hell)}
.fragen--offen h3{font-family:'Outfit',system-ui,sans-serif;font-weight:500;
  font-size:clamp(19px,1.8vw,22px);line-height:1.25;color:var(--anthrazit);
  margin-bottom:10px}
.fragen--offen p{max-width:50ch}
.fragen--offen a{color:var(--blau-tief);font-weight:600}
.fragen-kopf{grid-column:3/-3;text-align:center}
@media(max-width:860px){.fragen-kopf{grid-column:1/-1}}

/* --- Fuss ----------------------------------------------------------- */
.fuss--v6{padding:clamp(48px,6vw,80px) 0 32px}
.fuss--v6 .wrap{row-gap:clamp(28px,3vw,40px)}
.fuss-marke{grid-column:1/5}
.fuss-marke img{width:150px;height:auto;margin-bottom:16px}
.fuss-marke p{font-size:var(--klein);max-width:32ch}
.fuss-kontakt{grid-column:5/-1;display:grid;gap:clamp(20px,2.4vw,32px);
  grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:900px){.fuss-marke,.fuss-kontakt{grid-column:1/-1}}
@media(max-width:620px){.fuss-kontakt{grid-template-columns:minmax(0,1fr)}}
.fuss-ort h3{font-size:20px;color:var(--weiss);margin-bottom:8px}
.fuss-ort address{font-style:normal;font-size:var(--klein);line-height:1.5}
.karte{position:relative;margin-top:14px;aspect-ratio:16/10;background:var(--anthrazit);
  border:1px solid var(--linie-dunkel);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:10px;padding:16px;text-align:center}
.karte-laden button{min-height:48px;padding:12px 18px;border-radius:var(--sa-radius-button, 0);cursor:pointer;
  background:transparent;color:var(--weiss);border:1px solid rgba(255,255,255,.55);
  font:600 var(--klein)/1 'Inter',system-ui,sans-serif}
.karte-laden button:hover{background:rgba(255,255,255,.08)}
.karte-laden small{font-size:14px;line-height:1.4;color:var(--text-dunkel);max-width:30ch}
.fuss-wege{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:12px;
  padding-top:clamp(20px,2.4vw,28px);border-top:1px solid var(--linie-dunkel)}
.fuss-wege .knopf svg{width:20px;height:20px;margin-right:10px}
.fuss--v6 nav{padding-top:8px}
.fuss .fuss-wege a{min-height:48px}

/* --- Respekt-Kachel: Farbe statt Beinahe-Bild ------------------------
   Das Zeichen liegt leise auf dem tiefen Blau (GUIDELINES §4), nie als
   volle weisse Grafik — die stand im ersten Abzug lauter als jedes Foto. */
.baustein--farbe .bild--zeichen{background:var(--blau-tief);position:relative;overflow:hidden}
.baustein--farbe .bild--zeichen img{position:absolute;width:150%;height:auto;max-width:none;
  left:-12%;top:50%;transform:translateY(-50%);opacity:.18;object-fit:contain}
@media(hover:hover){.baustein--farbe:hover img{transform:translateY(-50%)}}

/* --- Team mit fünf: Gründer vorn, alle in einer Reihe ----------------
   Fünf Figuren in der v4-Grösse liefen bei 1280 px links und rechts aus dem
   Blatt (Abzug 15.09.). Die Höhe hängt deshalb an der Breite, und die Kante
   der Matte rechnet mit derselben Zahl (--figur-hoehe). */
.team--fuenf{--figur-hoehe:clamp(200px,28vw,380px)}
.team--fuenf .team-reihe img,
.team--fuenf .team-reihe figure:nth-child(3) img,
.team--fuenf .team-reihe figure:nth-child(4) img{height:clamp(200px,28vw,380px)}
.team--fuenf .team-reihe figure:not(:last-child){margin-right:-4%}
@media(max-width:700px){
  .team--fuenf{--figur-hoehe:clamp(118px,33vw,150px)}
  .team--fuenf .team-reihe img,
  .team--fuenf .team-reihe figure:nth-child(3) img,
  .team--fuenf .team-reihe figure:nth-child(4) img{height:clamp(118px,33vw,150px)}
    .team--fuenf .team-reihe figure:not(:last-child){margin-right:-9%}
}

/* =====================================================================
   RUNDE 2 nach design-critic FAIL 8/16 (15.09.2026)
   ===================================================================== */

/* --- Hero ab 860 px: geteilt statt Vollbild mit Schleier -------------
   Harte Regel 3 (CLAUDE.md des Kunden): kein Schleier über dem Motiv. Der
   v4-Verlauf lag über 82 % des Bildes. Beim Motiv 118 (Hochformat) lässt
   sich der Junge im Breitbild nicht nach rechts schieben — links von ihm
   stehen weitere Köpfe, jede Vignette hätte über ihnen gelegen. Deshalb:
   Text auf eigener Fläche links, das Foto rechts vollständig unbehandelt,
   harte Kante wie im Rest der Marke. */
@media(min-width:860px){
  .hero{grid-template-columns:minmax(0,5fr) minmax(0,6fr);min-height:min(88vh,860px)}
  .hero-schleier{display:none!important}
  .hero-bild{grid-area:1/2;min-height:min(88vh,860px);height:100%;object-fit:cover;object-position:50% 40%}
  .hero-text{grid-area:1/1;align-self:stretch;display:flex;flex-direction:column;justify-content:center;
    background:var(--schwarz);max-width:none;margin:0;
    padding:clamp(48px,6vw,88px) clamp(28px,4vw,64px) clamp(48px,6vw,88px) max(var(--rand),calc((100vw - var(--wrap))/2));
    overflow:hidden}
  .hero h1{font-size:clamp(44px,5.4vw,80px)}
  .hero-text .knopf{align-self:flex-start}
  .hero-drache{left:auto;right:-30%;bottom:-20%;width:min(42vw,560px);opacity:.07}
}

/* --- Schrift: nichts unter 16 px, KI-Hinweis mindestens 14 px ------- */
.g-marke{font-size:var(--label)}
.bewertung cite,.bewertungen-fuss{font-size:var(--label)}
.karte-laden small{font-size:var(--label)}
.g-marke img{width:20px;height:20px;display:block}
.bewertung-kopf .sterne{align-items:center}

/* --- Gruppen: gleiche Bildhöhe, Altersbalken auf einer Linie -------- */
.gruppe--a .bild,.gruppe--b .bild,.gruppe--c .bild{aspect-ratio:4/5}
@media(min-width:900px){.gruppe--b{margin-top:0}}
.gruppen{align-items:stretch}
/* `.gruppe p{flex:1}` (v4) streckte auch die Altersleiste — bei kürzerem
   Text wurde sie in der Mittelkarte 24 px höher (Abzug 15.09.). */
.gruppe .alter{flex:0 0 auto}

/* --- Standorte: beide Hallen auf einer Höhe, Bild darunter voll ---- */

/* --- Team: Block näher an die Überschrift --------------------------- */
@media(min-width:861px){.team--fuenf{margin-top:-96px}}

/* --- Nutzen-Leiste: belegtes Eltern-Zitat als Einstieg (Copy Runde 4) --- */
.nutzen-zitat{grid-column:1/-1;margin:0 0 clamp(20px,2.4vw,28px);
  font-family:'Outfit',system-ui,sans-serif;font-weight:500;font-size:clamp(20px,2vw,24px);
  line-height:1.25;color:var(--weiss)}
.nutzen-zitat span{display:inline-block;font-family:'Inter',system-ui,sans-serif;font-weight:400;
  font-size:var(--label);color:var(--text-dunkel);margin-left:8px}

/* --- Zeiten am Handy: Tag und Uhrzeit nie mitten im Wort umbrechen ---
   Abzug 390 (15.09.): „Gengenbach · Mo, Mi, / Fr" und „16:00 – / 17:00".
   Die Uhrzeit bleibt eine Einheit; wird es eng, rutscht sie als Ganzes
   unter den Tag. */
.zeiten li{flex-wrap:wrap;column-gap:12px;row-gap:2px}
.zeiten b,.zeiten span{white-space:nowrap}
.zeiten span{margin-left:auto}

/* =====================================================================
   RUNDE 4 nach design-critic 13/16 (15.09.2026)
   ===================================================================== */

/* --- Zeilenfall: keine Einzelwörter am Zeilenende ------------------- */
h1,h2,h3,.kopf p,.lernen-kopf p,.hero-sub,.abschluss p,.gruender-kurz p,.nutzen p{text-wrap:balance}
.hero-sub{max-width:34ch}
.abschluss p{max-width:36ch}

/* --- Bewertungen ohne Widget-Optik: eine große Stimme, drei kleine --- */
.bewertungen--v6{display:block}
.stimme-kennung{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.bewertungen--v6 .g-marke{color:var(--text-dunkel)}
.stimme-gross{margin:0;padding:0 0 clamp(32px,4vw,48px);border-bottom:1px solid var(--linie-dunkel)}
.stimme-gross blockquote{font-family:'Outfit',system-ui,sans-serif;font-weight:500;
  font-size:clamp(24px,3vw,38px);line-height:1.22;letter-spacing:-.012em;color:var(--weiss);max-width:30ch;
  text-wrap:pretty}
.stimme-gross cite,.stimme-klein cite{display:block;margin-top:18px;font-style:normal;
  font-size:var(--label);color:var(--text-dunkel)}
.stimme-gross cite b,.stimme-klein cite b{color:var(--weiss);font-weight:600}
.stimmen-reihe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(24px,3vw,48px)}
.stimme-klein{margin:0;padding:clamp(24px,3vw,36px) 0 0}
.stimme-klein+.stimme-klein{border-left:1px solid var(--linie-dunkel);padding-left:clamp(24px,3vw,48px)}
.stimme-klein blockquote{font-size:var(--body);line-height:1.5;color:var(--text-dunkel);text-wrap:pretty}
@media(max-width:860px){
  .stimmen-reihe{grid-template-columns:minmax(0,1fr)}
  .stimme-klein+.stimme-klein{border-left:0;padding-left:0;border-top:1px solid var(--linie-dunkel);margin-top:24px}
}

/* --- Team am Handy: zwei Reihen statt Briefmarken (16.09.) -----------
   Erst fielen zwei Figuren per display:none heraus (Nikitas Befund), dann
   standen alle fuenf bei 88 px Breite nebeneinander — sichtbar, aber niemand
   erkennbar, und das Gesicht ist das staerkste Material der Marke. Jetzt
   bricht die Reihe am Handy auf 3 + 2 um; die Figuren bleiben dadurch
   doppelt so gross. */
@media(max-width:700px){
  .team--fuenf .team-reihe{flex-wrap:wrap;justify-content:center;row-gap:0}
  .team--fuenf{--figur-hoehe:clamp(178px,46vw,220px)}
  .team--fuenf .team-reihe img,
  .team--fuenf .team-reihe figure:nth-child(2) img,
  .team--fuenf .team-reihe figure:nth-child(3) img,
  .team--fuenf .team-reihe figure:nth-child(4) img,
  .team--fuenf .team-reihe figure:nth-child(5) img,
  .team--fuenf .team-reihe figure:nth-child(6) img{height:clamp(178px,46vw,220px)}
  /* Prozent bezieht sich bei margin auf die CONTAINERbreite, nicht auf die
     Figur — deshalb ein fester Wert. */
  .team--fuenf .team-reihe figure:not(:last-child){margin-right:-46px}
  /* Umbruch nach der dritten Figur erzwingen: das Farbfeld ist nth-child(1),
     die Figuren sind 2-6. Ein Flex-Trenner mit order:1 schiebt 5 und 6 in die
     zweite Reihe — ohne ihn entschied die Breite und es wurde 4+1. */
  .team--fuenf .team-reihe::after{content:'';flex-basis:100%;height:0;order:1}
  .team--fuenf .team-reihe figure:nth-child(n+5){order:2}
  .team--fuenf .team-reihe figure:nth-child(4){margin-right:0}
}

/* =====================================================================
   RUNDE 5 nach design-critic 13/16 (15.09.2026)
   ===================================================================== */
/* Nutzen-Zitat: Zuschreibung am Handy in eigener Zeile */
@media(max-width:700px){.nutzen-zitat span{display:block;margin:6px 0 0}}

/* Hero ab 860 px: Hochformat-Zuschnitt (hat Kopfluft), oben ausgerichtet,
   niedrigerer Rahmen — der Quadrat-Zuschnitt endete am Scheitel, weil das
   Rohbild dort endet. */
@media(min-width:860px){
  .hero{min-height:min(80vh,780px)}
  .hero-bild{min-height:min(80vh,780px);object-position:50% 0}
}

/* Abschluss: Überschrift→Text enger als Text→Knopf */
.abschluss h2{margin-bottom:0}
.abschluss p{margin:16px auto 40px}
.abschluss .wrap{row-gap:0}

/* --- Weißraum-Hinweise R5 ------------------------------------------- */
/* Hero-Textblock steht auf der Rasterlinie des Blocks, nicht frei zentriert */
@media(min-width:860px){.hero-text{justify-content:flex-start;padding-top:var(--block)}}
/* Einleitung direkt unter der Überschrift statt rechts in der Luft */
.kopf--gestapelt h2,.kopf--gestapelt p{grid-column:1/-1}
.kopf--gestapelt p{padding-bottom:0;margin-top:12px}

/* --- Fuss, Signatur und mitlaufender Knopf (Nikita 16.09.) -----------
   Drei Befunde aus seinem Durchgang:
   1. Unter der Partner-Signatur blitzte der helle Body-Grund durch — als
      weisser Balken zwischen Signatur und mitlaufendem Knopf.
   2. Der Knopf-Balken wirkte „armselig": Kleingedrucktes neben einem Knopf.
   3. Ein Copyright fehlte ganz. */
body{background:var(--schwarz)}
.fuss-recht{grid-column:1/-1;margin-top:20px;font-size:var(--label);line-height:1.5;
  color:var(--text-dunkel)}

.sticky{background:var(--weiss);align-items:center;
  border-top:3px solid var(--blau-tief);
  padding:12px 16px calc(12px + env(safe-area-inset-bottom))}
.sticky .txt{display:flex;align-items:center;color:var(--anthrazit)}
.sticky .txt b{font-family:'Outfit',system-ui,sans-serif;font-weight:600;
  font-size:clamp(17px,4.6vw,20px);line-height:1.15;color:var(--anthrazit)}
.sticky .knopf{background:var(--blau-tief);color:var(--weiss);font-weight:600;
  padding:14px 22px;min-height:48px;white-space:nowrap}

/* Solange der Cookie-Dialog unten steht, bleibt der Knopf weg — sonst
   ueberdeckt der Dialog genau die Handlung, zu der er einlaedt. */
body.consent-offen .sticky.an{display:none}

/* --- Bausteine: Farbwechsel auf dem Bild (Nikita 16.09.) -------------
   Er will den Rhythmus von sukhothai.eu: Orange, Blau, Orange, Blau als
   leichte Lage ueber dem Foto — das Bild bleibt sichtbar, die Reihe bekommt
   Takt. Bewusste Ausnahme zur Hausregel „kein Farbschleier ueber Motiven":
   hier liegt kein Text auf dem Bild, die Lage ist leise und der Wechsel ist
   das Gestaltungsmittel, nicht eine Notloesung fuer Lesbarkeit. */
.baustein .bild{position:relative}
.baustein .bild::after{content:'';position:absolute;inset:0;pointer-events:none;
  mix-blend-mode:color}
.baustein:nth-child(odd) .bild::after{background:rgba(243,146,0,.34)}
.baustein:nth-child(even) .bild::after{background:rgba(0,121,182,.32)}
.baustein--farbe .bild--zeichen::after{display:none}

/* --- Band mit Wort (Nikita 16.09.) -----------------------------------
   Das Motiv traegt links eine unscharfe, ruhige Flaeche. Der Text liegt
   genau dort — kein Schleier ueber dem Gesicht, nur eine weiche Abdunklung
   zur linken Kante, damit Weiss auf Weiss nicht kippt. */
.band-mit-wort{position:relative}
.band-mit-wort::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(41,41,41,.86) 0%,rgba(41,41,41,.62) 34%,rgba(41,41,41,0) 62%)}
.band-mit-wort figcaption{position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:min(46%,560px);padding-left:clamp(20px,6vw,88px);color:var(--weiss)}
.band-zeile{font-family:'Outfit',system-ui,sans-serif;font-weight:500;
  font-size:clamp(24px,3.4vw,54px);line-height:1.06;letter-spacing:-.018em;color:var(--weiss)}
.band-zeile span{color:var(--orange)}
.band-sub{margin-top:clamp(8px,1.4vw,18px);font-size:clamp(16px,1.3vw,18px);
  line-height:1.45;color:rgba(255,255,255,.86)}
@media(max-width:560px){
  .band-mit-wort figcaption{width:64%}
  .band-sub{display:none}
}

/* --- Hallenbild vor dem Abschluss ------------------------------------
   Rest der gestrichenen Standort-Sektion: das Bild bleibt, die doppelte
   Adressliste faellt weg (die Karte steht im Fuss). */
.band-halle-ende{position:relative}

@media(max-width:899px){
  /* Die Leiste ist mit zwei Zeilen hoeher als die alte — der Seitenfuss
     braucht entsprechend mehr Luft, sonst steht die Unterzeile im Nichts. */
  body.hat-sticky{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
}

/* Der Team-Absatz lief bei 1280 px ueber 113 Zeichen je Zeile — Lesefenster
   ist 45-75 (design-critic 16.09.). */
.block--team .kopf--gestapelt p{max-width:50ch}
/* KI-Kennzeichnung zum Gruender-Portraet (harte Kundenregel). Sie haengt
   nicht mehr am Bild, weil Christian nicht mehr allein vorn steht — sie
   gehoert jetzt der Reihe. */
/* .ki-hinweis-team entfaellt seit 17.09.2026 — Nikita hat den Hinweis unter
   der Team-Reihe ausdruecklich gestrichen (Eintrag in kunden/sukhothai/CLAUDE.md
   §Christian Benz). Die Regel ist geloescht, damit kein toter Bauschutt bleibt. */

/* =====================================================================
   RUNDE 8 — Team-Reihe nach Nikitas Durchgang vom 17.09.2026
   ---------------------------------------------------------------------
   Vier Ansagen in einem Zug:
   1. mehr Luft zwischen Text und Reihe (bisher zog -96px sie an die Zeile),
   2. deutlich enger zusammen und groesser, mit Tiefenstaffelung wie in v4 —
      eine Mannschaft, die zusammensteht, keine fuenf Passbilder mit Abstand,
   3. die Reihe sitzt tiefer und wird von der Sektionskante beschnitten. Damit
      verschwindet die kaputte Freistell-Kante am zweiten von rechts (fehlendes
      Stueck Bauch, Ringpolster quer ueber der Huefte, Uebergang zur Hose).
      Nikita hatte das mehrfach gemeldet; verdecken ist hier der ehrliche Weg —
      unterhalb der Unterarme ist an der Maske nichts zu retten.
   4. Am Handy bleiben alle fuenf in EINER Reihe (der 3+2-Umbruch vom 16.09.
      entfaellt) — dafuer kleiner und mit mehr Ueberlappung.
   Die Sektion endet mit der blauen Flaeche: der KI-Hinweis darunter ist raus
   (Nikita 17.09.), und damit auch der graue Streifen hinter ihm.
   ===================================================================== */

/* Der Schnitt ist eine Rechnung, keine Zahl: die kaputte Stelle beginnt bei
   72 % der Figurenhoehe von coach-b, und coach-b steht 5 % groesser als die
   Aeusseren — 0.30 der Grundhoehe legt die Kante sicher darueber. */
.block--team{overflow:hidden}
.team--fuenf{--figur-hoehe:clamp(260px,38vw,530px);--schnitt:calc(.30 * var(--figur-hoehe));--decke:.40}
@media(min-width:861px){.team--fuenf{margin-top:clamp(16px,2vw,36px)}}
.team--fuenf .team-reihe{margin-bottom:calc(-1 * var(--schnitt))}

/* Ueberlappung in Figurenhoehe gerechnet, nicht in Prozent der Containerbreite
   (Prozent bezieht sich bei margin auf die Breite des Elterns und driftet
   deshalb mit jedem Viewport). Die Rechnung dahinter, am Abzug
   nachgemessen (design-critic 17.09.: „Rechnung im Kommentar statt am Abzug" —
   die erste Fassung stand bei 1280 px real 72 px je Seite ueber der Blattkante
   und schnitt beiden Aussenfiguren die Schulter ab):

     Reihenbreite = hoehe * 0.844 * (1 + 1.05 + 1.09 + 1.05 + 1)
                    - 4 * decke * hoehe
                  = hoehe * (4.380 - 4 * decke)

   Sie darf hoechstens Blattbreite + 2 * transparenter Saum der Aussenfigur
   sein; der knappste Saum ist der von coach-d rechts (11.9 % der Bildbreite,
   also 0.100 * hoehe). Mit 38vw und decke 0.40 ergibt das auf 1280 px eine
   Reihe von 1351 px, 35 px Ueberstand je Seite und rund 30 px Koerperluft —
   gemessen, nicht geschaetzt. Am Handy dieselbe Rechnung mit 40vw/0.45. */
.team--fuenf .team-reihe figure:not(:last-child){
  margin-right:calc(-1 * var(--decke) * var(--figur-hoehe))}

/* Tiefe: Mitte vorn und groesser, nach aussen kleiner und weiter hinten.
   Kind 1 der Reihe ist das Farbfeld — die Figuren sind 2 bis 6. */
.team--fuenf .team-reihe figure:nth-child(2) img,
.team--fuenf .team-reihe figure:nth-child(6) img{height:var(--figur-hoehe)}
.team--fuenf .team-reihe figure:nth-child(3) img,
.team--fuenf .team-reihe figure:nth-child(5) img{height:calc(1.05 * var(--figur-hoehe))}
.team--fuenf .team-reihe figure:nth-child(4) img{height:calc(1.09 * var(--figur-hoehe))}
/* Die blaue Flaeche haengt jetzt an derselben Rechnung wie die Figuren und
   endet an der Schnittkante — vorher lief sie darunter weiter und wurde vom
   Beschnitt halbiert (am Handy blieben 30 px uebrig statt der Haelfte der
   sichtbaren Figur). 0.40 der Grundhoehe liegt unter jedem Kinn: die Aeusseren
   stehen 0.09 tiefer und tragen ihr Kinn bei 0.34. */
.team--fuenf .team-feld{top:calc(.40 * var(--figur-hoehe));bottom:var(--schnitt)}
.team--fuenf .team-reihe figure:nth-child(2){z-index:1}
.team--fuenf .team-reihe figure:nth-child(3){z-index:2}
.team--fuenf .team-reihe figure:nth-child(4){z-index:4}
.team--fuenf .team-reihe figure:nth-child(5){z-index:3}
.team--fuenf .team-reihe figure:nth-child(6){z-index:2}

/* Am Handy: EINE Reihe, kleiner, mehr Ueberlappung. Der Umbruch-Trenner vom
   16.09. wird ausdruecklich zurueckgenommen. */
@media(max-width:700px){
  .team--fuenf .team-reihe{flex-wrap:nowrap}
  .team--fuenf .team-reihe::after{content:none}
  .team--fuenf .team-reihe figure:nth-child(n+5){order:0}
  .team--fuenf{--figur-hoehe:clamp(126px,40vw,200px);--decke:.45}
  .team--fuenf .team-reihe figure:nth-child(2) img,
  .team--fuenf .team-reihe figure:nth-child(6) img{height:var(--figur-hoehe)}
  .team--fuenf .team-reihe figure:nth-child(3) img,
  .team--fuenf .team-reihe figure:nth-child(5) img{height:calc(1.05 * var(--figur-hoehe))}
  .team--fuenf .team-reihe figure:nth-child(4) img{height:calc(1.09 * var(--figur-hoehe))}
  .team--fuenf .team-reihe figure:not(:last-child),
  .team--fuenf .team-reihe figure:nth-child(4){
    margin-right:calc(-1 * var(--decke) * var(--figur-hoehe))}
  .team--fuenf .team-reihe figure:last-child{margin-right:0}
}

/* Das Band nach den Fragen steht seit 17.09. ohne Bildunterschrift (Nikita:
   „macht den Text mit Halle Vogesenstrasse weg") — der Standort steht im Fuss
   und in den strukturierten Daten.
   Die feste Hoehe aus seite-v4 ist hier durch das Verhaeltnis ersetzt: die
   Zelle traegt genau das Verhaeltnis der geschnittenen Datei, damit
   `object-fit:cover` nichts mehr nachschneidet (design-critic 17.09.: am
   Handy waren es 28 % seitlich). */
.band-halle-ende--kinder .band{height:auto;aspect-ratio:100/34}
@media(max-width:859px){.band-halle-ende--kinder .band{aspect-ratio:3/2}}