/* =====================================================================
   SUKHOTHAI ACADEMY · Schulstart — Seite v4 „Der Drache"
   ---------------------------------------------------------------------
   Nikita, 12.09.2026: „zu generisch, nach KI aber ohne Kunst und ohne
   Geschmack. Hat sich die ganzen Male nicht viel verändert." Dazu der
   Auftrag: sukhothai.eu soll mit Design und Animationen einfließen — die
   Präsentation vom Team und die Kachel-Designs waren „ziemlich geil".

   v3 war handwerklich sauber und MARKENLOS. Das Zeichen der Marke — der
   Drache — kam auf der ganzen Seite nicht vor, Blau und Orange nur als
   6-px-Punkt, die freigestellten Trainer (das stärkste Material, das die
   Marke hat) lagen ungenutzt im Ordner. Genau daraus entsteht der
   Eindruck „KI ohne Geschmack": nicht schlechtes Handwerk, sondern
   fehlende Herkunft.

   Vier Signatur-Elemente kommen von sukhothai.eu herüber. Der Bauplan
   dazu steht in ../../RICHTUNG-v4.md und gilt für Seite UND Anzeigen:
     1 Drachen-Wasserzeichen, riesig und angeschnitten (GUIDELINES §4)
     2 Kachel-Mosaik mit ungleichen Höhen — aber die Farbe kommt aus
       eigenen Farb-Kacheln, NICHT aus einem Schleier über dem Foto
       (sukhothai.eu legt dort 48 % Blau über die Gesichter, GUIDELINES §5
       verbietet uns das, und es frisst genau das, was verkauft)
     3 Freisteller, die über eine farbige Kante brechen
     4 Riesen-Headline Outfit 500, ein Wort in Orange

   Kontrast-Entscheidungen, gemessen statt geraten:
     · Marken-Blau #008CD2 trägt gegen Weiß nur 3,70:1. Es steht deshalb
       nur dort flächig, wo AUSSCHLIESSLICH große Typo oder gar kein Text
       darauf liegt (Matte unter dem Team, Wort-Kachel im Mosaik).
     · Flächen mit Fließtext laufen auf #0079B6 (4,76:1) — seit 02.09. als
       `blau-tief` in DESIGN.md, bleibt in der Markenfamilie.
     · Die Leitfarbe selbst bleibt unangetastet. (Offen als SU8.)
   ===================================================================== */

@import url("marken-tokens.css");   /* Spiegel von brand/tokens.css */

:root{
  /* Marken-Werte werden durchgereicht, nicht kopiert — sonst erreicht eine
     Korrektur in brand/tokens.css diese Fläche nie. */
  --blau:        var(--sa-blau);
  --orange:      var(--sa-orange);
  --anthrazit:   var(--sa-anthrazit);
  --schwarz:     var(--sa-schwarz);
  --hell:        var(--sa-hell);
  --weiss:       var(--sa-weiss);

  /* Auch die Ableitungen kommen aus der Markenquelle — sie standen bis
     12.09. nur hier und liefen damit am Token-Spiegel-Tor vorbei. */
  --blau-tief:   var(--sa-blau-tief);
  --blau-dunkel: var(--sa-blau-dunkel);

  --text-hell:   var(--sa-text-hell);
  --text-dunkel: var(--sa-text-dunkel);
  --text-blau:   var(--sa-weiss);  /* auf #0079B6 gemessen 4,76:1 —
                               gedämpfte Fassungen bleiben unter 4,5:1 */
  --linie-hell:  rgba(0,0,0,.10);
  --linie-dunkel:rgba(255,255,255,.14);

  --display: clamp(38px, 7.4vw, 96px);
  --gross:   clamp(34px, 5.2vw, 54px);
  --mittel:  clamp(21px, 2.4vw, 30px);
  --body:    18px;
  --klein:   16px;
  --label:   16px;

  --rand:  clamp(20px, 5vw, 64px);
  --block: clamp(64px, 8vw, 116px);
  --wrap:  1240px;
  --fuge:  2px;              /* die enge Fuge des Mosaiks */
  --kurve: cubic-bezier(.22,.61,.36,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-size:var(--body);line-height:1.55;color:var(--text-hell);
  background:var(--hell);overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
h1,h2,h3{font-family:'Outfit',system-ui,sans-serif;font-weight:500;letter-spacing:-.018em}
h1{font-size:var(--display);line-height:.98}
h2{font-size:var(--gross);line-height:1.02}
h3{font-size:clamp(22px,2.5vw,31px);line-height:1.16}
.akz{color:var(--orange)}

/* Das Raster: EIN Maß, drei erlaubte Spuren (02.09.). minmax(0,1fr) statt
   1fr — sonst bläht ein breites Kind das Grid und die Seite scrollt seitlich. */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--rand);
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:clamp(16px,2vw,28px);row-gap:clamp(32px,4vw,56px)}
.spur-text{grid-column:1/9}
@media(max-width:860px){.spur-text{grid-column:1/-1}}

.block{padding:var(--block) 0;position:relative;isolation:isolate}
/* Nur die Sektionen MIT Wasserzeichen kappen seitlich: overflow:hidden
   auf allen .block würde das sticky Bild in .punkte-bild abschalten. */
.block.hat-drache{overflow:hidden}
/* Die Freisteller enden im Material am Schienbein — es gibt keine Aufnahme
   mit Fuessen. Statt die Beine in einen Rest Anthrazit laufen zu lassen,
   endet die Sektion GENAU auf der Beschnittlinie: sie gehen ueber eine echte
   Kante in die Flaeche darunter. Aus dem Unfall wird eine Entscheidung. */
.block--buendig{padding-bottom:0}
/* Das Team-Band steht NICHT bündig (13.09.2026, design-critic): unter der
   Feldkante bleibt ein Stück Figur auf Anthrazit, und direkt darunter beginnt
   die Gründer-Sektion im selben Blau. Bündig gesetzt wäre dieser Rest ein
   Schlitz zwischen zwei gleichen Flächen — mit Fuß ist er eine gesetzte
   dunkle Zone, auf der die Figuren stehen. */
.block--team{padding-bottom:clamp(56px,8vw,112px)}
.block-hell{background:var(--hell);color:var(--text-hell)}
.block-hell h2,.block-hell h3{color:var(--anthrazit)}
.block-dunkel{background:var(--schwarz);color:var(--text-dunkel)}
.block-dunkel h2,.block-dunkel h3{color:var(--weiss)}
.block-anthrazit{background:var(--anthrazit);color:var(--text-dunkel)}
.block-anthrazit h2,.block-anthrazit h3{color:var(--weiss)}
.block-blau{background:var(--blau-tief);color:var(--text-blau)}
.block-blau h2,.block-blau h3{color:var(--weiss)}

/* ---------------------------------------------------------------------
   SIGNATUR 1 · Der Drache als Wasserzeichen
   GUIDELINES §4: „großflächig, sehr leise, einfarbig hinter Sektionen.
   Nie über Gesichtern." Höchstens einer je Sektion, höchstens drei auf
   der Seite — vier wären Tapete.
   --------------------------------------------------------------------- */
.drache{position:absolute;z-index:-1;pointer-events:none;
  width:clamp(420px,58vw,900px);height:auto;
  will-change:transform}
.drache--dunkel{opacity:.06}
.drache--hell{opacity:.05}
.drache--blau{opacity:.07}
/* Der Parallaxe-Versatz kommt als --p aus assets/seite.js; die Grundlage
   der transform bleibt hier, sonst wirft das Skript sie weg. */
.drache--rechts{right:-14%;top:50%;transform:translateY(-50%) translate3d(0,var(--p,0),0)}
.drache--links{left:-20%;bottom:-18%;transform:translate3d(0,var(--p,0),0)}
/* 13.09.2026: Im Team-Block lag das Zeichen bei top:50% GENAU hinter der
   rechten Fliesstextspalte — RICHTUNG-v4 §2.1 verbietet das („nie über einer
   Fliesstextspalte"), auch bei 6 % Deckung. Es rutscht nach unten und weiter
   nach aussen, wo unter dem Freisteller-Band ohnehin nur Flaeche ist. */
.drache--tief{top:auto;bottom:-34%;right:-22%;transform:translate3d(0,var(--p,0),0)}
@media(max-width:700px){
  .drache{width:min(150vw,700px)}
  .drache--rechts{right:-40%}
  .drache--links{left:-45%}
}

/* Körnung — das einzige Ornament der Marke (GUIDELINES §4). Sehr leise. */
.korn::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:url("../medien/v4/korn.png");background-size:256px 256px;
  opacity:.55;mix-blend-mode:screen}

/* Knöpfe — 5 px Radius, nie Pillenform (GUIDELINES §4), Tippziel 48 px. */
.knopf{display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:16px 28px;border-radius:5px;border:0;
  font-family:'Inter',system-ui,sans-serif;font-weight:600;font-size:var(--klein);
  line-height:1;text-decoration:none;
  background:var(--blau-tief);color:var(--weiss);cursor:pointer;
  transition:background .18s ease, transform .18s var(--kurve)}
.knopf:hover{background:var(--blau-dunkel);transform:translateY(-2px)}
.knopf--hell{background:var(--weiss);color:var(--anthrazit)}
.knopf--hell:hover{background:color-mix(in srgb, var(--weiss) 92%, var(--blau-tief));
  color:var(--anthrazit)}
a{color:inherit}
a:focus,.knopf:focus,button:focus{outline:3px solid var(--orange);outline-offset:3px}
a:focus-visible,.knopf:focus-visible,button:focus-visible{
  outline:3px solid var(--orange);outline-offset:3px}
.block-blau a:focus-visible,.block-blau .knopf:focus-visible{outline-color:var(--weiss)}

/* =====================================================================
   HERO — zwei Bauarten, bewusst nicht vereinheitlicht (01.09. gemessen):
   ab 860 px Vollbild mit Vignette hinter dem Text; darunter Marke → Zeile
   → Text → Knopf → dann Bild, weil das Vollbild-Scrim am 390er Gerät
   genau das Gesicht frisst, wegen dem das Motiv gewählt wurde.
   Neu in v4: Körnung und ein angeschnittener Drache hinter dem Textfeld.
   ===================================================================== */
.hero{position:relative;background:var(--schwarz);display:flex;flex-direction:column;
  isolation:isolate;overflow:hidden}
.hero-text{order:1}
.hero-bild{order:2}
.hero-schleier{display:none}
.hero-bild{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:78% center}
/* 13.09.2026: Nach dem engeren Hero-Beschnitt (Hallen-Wandschrift raus, CLAUDE.md
   Regel 6) schnitt der 4:5-Ausschnitt am Handy genau das Gesicht ab, wegen dem
   das Motiv gewaehlt wurde. 78 % holt das Maedchen ganz ins Bild und laesst den
   Jungen angeschnitten stehen — gemessen, nicht geschaetzt. */
.hero-text{position:relative;padding:44px var(--rand) 48px;background:var(--schwarz);
  isolation:isolate;overflow:hidden}
.hero-marke{width:176px;margin-bottom:28px}
.hero h1{color:var(--weiss);max-width:15ch}
.hero-sub{color:var(--text-dunkel);font-size:var(--body);margin:24px 0 32px;max-width:44ch}
/* Der Drache sitzt am Handy hinter dem TEXTFELD, nicht hinter dem Foto —
   über Gesichtern hat er nichts verloren (GUIDELINES §4). */
.hero-drache{position:absolute;z-index:-1;pointer-events:none;opacity:.07;
  width:min(115vw,560px);right:-38%;top:50%;
  transform:translateY(-50%) translate3d(0,var(--p,0),0)}

@media(min-width:860px){
  .hero{min-height:min(90vh,940px);display:grid}
  .hero-text{order:0;overflow:visible}.hero-bild{order:0}
  .hero-schleier{display:block}
  .hero-bild{grid-area:1/1;width:100%;height:100%;aspect-ratio:auto;min-height:min(90vh,940px)}
  .hero-schleier{grid-area:1/1;align-self:end;width:100%;height:82%;
    background:linear-gradient(180deg,
      color-mix(in srgb, var(--schwarz) 0%, transparent) 0%,
      color-mix(in srgb, var(--schwarz) 60%, transparent) 22%,
      color-mix(in srgb, var(--schwarz) 80%, transparent) 58%,
      color-mix(in srgb, var(--schwarz) 90%, transparent) 100%)}
  /* 13.09.2026 (Vorschlag Design §5): der Block sitzt rund 40 px tiefer.
     Grund: die Wortmarke stand oben im Motiv auf dem orangen Kaefignetz und
     las nur knapp — tiefer liegt sie im ruhigen Grau und im dichten Teil der
     Vignette. Verschoben wird der ganze Textblock, nicht die Marke allein:
     Marke, Zeile, Text und Knopf sind EIN Satz. */
  .hero-text{grid-area:1/1;align-self:end;background:none;
    padding:0 var(--rand) clamp(42px,5.2vw,66px);
    max-width:calc(var(--wrap) + 2*var(--rand));margin:0 auto;width:100%}
  .hero-marke{width:206px}
  /* Ab Desktop liegt der Drache links unten im ruhigen Bildbereich hinter
     dem Text — nie über dem Gesicht rechts im Motiv. */
  .hero-drache{width:min(46vw,620px);left:-13%;right:auto;bottom:-24%;top:auto;
    transform:translate3d(0,var(--p,0),0);opacity:.09}
}

/* Faktenleiste — drei Angaben, keine erfundene Zahl. Das Gründungsjahr
   fehlt bewusst (Website „seit 1997" vs. Presse 2004 — SU3). */
.fakten{background:var(--anthrazit);border-top:1px solid var(--linie-dunkel)}
.fakten .wrap{row-gap:0;padding-top:26px;padding-bottom:26px}
.fakten ul{grid-column:1/-1;list-style:none;display:flex;flex-wrap:wrap;
  gap:12px clamp(24px,4vw,56px)}
.fakten li{color:var(--weiss);font-weight:600;font-size:var(--label);line-height:1.4;
  text-transform:uppercase;letter-spacing:.12em;
  display:flex;align-items:baseline;gap:12px}
.fakten li::before{content:'';flex:0 0 auto;width:6px;height:6px;
  background:var(--orange);transform:translateY(-3px)}

/* Sektionskopf: Überschrift links, Einleitung rechts, gemeinsame Grundlinie. */
.kopf{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:clamp(16px,2vw,28px);align-items:end}
.kopf h2{grid-column:1/8}   /* 1/7 liess bei 60 px drei Ueberschriften mit einem Wort auf der letzten Zeile enden */
.kopf p{grid-column:9/-1;padding-bottom:8px}
@media(max-width:860px){.kopf h2,.kopf p{grid-column:1/-1}.kopf p{margin-top:16px}}

/* Behauptungs-Liste statt Kachelraster — der Inhalt IST eine Aufzählung. */
.punkte{grid-column:1/8;list-style:none;margin-top:8px}
.punkte-bild{grid-column:9/-1;align-self:start;position:sticky;top:48px}
.punkte-bild img{width:100%;aspect-ratio:4/5;object-fit:cover}
@media(max-width:860px){
  .punkte{grid-column:1/-1;order:2}
  .punkte-bild{grid-column:1/-1;position:static;order:1}
  .punkte-bild img{aspect-ratio:16/10}
}
.punkte li{border-top:1px solid var(--linie-hell);padding:24px 0;position:relative}
.punkte li:last-child{border-bottom:1px solid var(--linie-hell)}
.punkte h3{margin-bottom:8px}
/* Die Haarlinie über dem jeweils ersten Punkt trägt den Blau-Akzent der
   Fläche — ein Punkt, keine Fläche (GUIDELINES §2). */
.punkte li:first-child{border-top:2px solid var(--blau-tief)}
.block-dunkel .punkte li{border-color:var(--linie-dunkel)}
.block-dunkel .punkte li:first-child{border-top-color:var(--blau-tief)}

/* Vollbreites Bildband — trägt keinen Text. Die Atempause. */
.band{display:block;width:100%;height:clamp(260px,34vw,460px);object-fit:cover}
.band-bu{background:var(--anthrazit);color:var(--text-dunkel);
  font-size:var(--label);padding:16px var(--rand);text-align:center}

/* =====================================================================
   SIGNATUR 2 · Das Mosaik
   Die Geometrie von sukhothai.eu (ungleiche Höhen, harte Kanten, enge
   Fuge), aber ohne Schleier: Farbe kommt aus eigenen Farb-Kacheln.
   ===================================================================== */
.mosaik{grid-column:1/-1;display:grid;gap:var(--fuge);
  grid-template-columns:repeat(4,minmax(0,1fr));
  grid-auto-rows:clamp(78px,9.4vw,132px)}

.kachel{position:relative;overflow:hidden;background:var(--anthrazit);
  display:flex;flex-direction:column;justify-content:flex-end}
.kachel img{width:100%;height:100%;object-fit:cover;
  transition:transform .5s var(--kurve)}
/* Zoom nur auf Zeigergeräten — auf dem Handy gibt es kein Hover, und ein
   Dauer-Zoom wäre nur Unschärfe. */
@media(hover:hover){
  .kachel--foto:hover img,.kachel--foto:focus-within img{transform:scale(1.04)}
}
/* Feste Größenklassen statt freier Spans: die Reihen gehen genau auf
   (2+1+1 · 1+1+1+1 · 2+2), damit das Raster keine Löcher reißt. */
.s-2x3{grid-column:span 2;grid-row:span 3}
.s-1x3{grid-column:span 1;grid-row:span 3}
.s-1x2{grid-column:span 1;grid-row:span 2}
.s-2x2{grid-column:span 2;grid-row:span 2}

/* Am Handy trägt kein Vier-Spalten-Mosaik: zwei Spalten, Fotos im festen
   Format, Textkacheln über die volle Breite mit eigener Höhe. */
@media(max-width:760px){
  .mosaik{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto}
  .mosaik .kachel{grid-column:span 1;grid-row:auto}
  .mosaik .kachel--foto{grid-column:span 2;aspect-ratio:4/3}
  .mosaik .kachel--foto.s-2x3{aspect-ratio:3/2}
  /* Eine echte Zweier-Reihe bleibt stehen, sonst ist die Geometrie am Handy
     nicht mehr zu sehen — und genau dort kommt der Anzeigenklick an. */
  .mosaik .kachel--zeichen,.mosaik .kachel--wort{grid-column:span 1;
    aspect-ratio:1/1;min-height:0}
  .mosaik .kachel--nr{grid-column:span 2;min-height:0}
}

/* Farb-Kachel: trägt ein Wort oder eine Zahl, nie Fließtext. Auf der
   Leitfarbe #008CD2 steht deshalb ausschließlich große Typo (3,70:1 reicht
   für Großtext, nicht für Fließtext). */
.kachel--wort{background:var(--blau-tief);justify-content:flex-end;padding:24px}
.kachel--wort p{font-family:'Outfit',system-ui,sans-serif;font-weight:500;
  font-size:clamp(24px,2.7vw,34px);line-height:1.02;color:var(--weiss);
  letter-spacing:-.015em}
/* Dritte Kachelsorte (RICHTUNG §2.2): Anthrazit mit einem Ausschnitt des
   Zeichens. Sie ersetzt eine Foto-Kachel, die dieselbe Aufnahme zeigte wie
   die Power-Kids-Karte — Farbe statt Wiederholung. */
.kachel--zeichen{background:var(--anthrazit);overflow:hidden}
.kachel--zeichen img{position:absolute;width:210%;height:auto;
  left:-58%;top:50%;transform:translateY(-50%);opacity:.20}
.kachel--nr{background:var(--anthrazit);padding:24px;justify-content:flex-end}
.kachel--nr .nr{font-weight:600;font-size:var(--label);line-height:1;
  color:var(--orange);letter-spacing:.14em;margin-bottom:12px}
.kachel--nr h3{color:var(--weiss);font-size:clamp(18px,1.9vw,23px)}
.kachel--nr p{color:var(--text-dunkel);font-size:var(--klein);margin-top:8px}

/* Bildunterschrift des Mosaiks */
.mosaik-bu{grid-column:1/-1;font-size:var(--label);margin-top:-14px}
.block-dunkel .mosaik-bu{color:var(--text-dunkel)}

/* --- Die Gruppen: Foto-Kachel über Tafel, drei Spalten mit ungleichen
       Höhen und versetzter Mitte. Das Mosaik trägt hier echte Information
       (Alter, Zeiten), deshalb steht der Text auf einer eigenen Fläche und
       nicht auf dem Foto. --------------------------------------------- */
.gruppen{grid-column:1/-1;display:grid;gap:clamp(18px,2.2vw,30px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));
  align-items:start}
.gruppe{display:flex;flex-direction:column;background:var(--anthrazit)}
.gruppe .bild{overflow:hidden}
.gruppe img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--kurve)}
@media(hover:hover){.gruppe:hover img{transform:scale(1.04)}}
.gruppe--a .bild{aspect-ratio:4/5}
.gruppe--b .bild{aspect-ratio:1/1}
.gruppe--c .bild{aspect-ratio:5/7}
@media(min-width:900px){.gruppe--b{margin-top:clamp(28px,3.4vw,52px)}}
.gruppe-innen{padding:24px;flex:1;display:flex;flex-direction:column}
.gruppe-innen h3{margin-top:0}
/* Kachel, nicht Etikett: sie läuft von Kartenkante zu Kartenkante und
   schließt oben bündig ans Foto an. Ihre Textkante liegt damit auf 24 px —
   dieselbe wie Überschrift und Fließtext darunter. Vorher stand sie im
   gepolsterten Innenblock und erzeugte eine zweite linke Kante. */
.gruppe .alter{display:block;background:var(--blau-tief);color:var(--weiss);
  font-weight:600;font-size:var(--label);line-height:1;letter-spacing:.12em;
  text-transform:uppercase;padding:16px 24px;margin:0}
.gruppe h3{color:var(--weiss);margin-bottom:12px}
.gruppe p{font-size:var(--klein);flex:1;color:var(--text-dunkel)}
.zeiten{list-style:none;margin-top:20px;border-top:1px solid var(--linie-dunkel);padding-top:16px}
.zeiten li{display:flex;justify-content:space-between;gap:16px;padding:8px 0;
  font-size:var(--label);color:var(--text-dunkel)}
.zeiten b{color:var(--weiss);font-weight:600}

/* Stimme — heller Strich in Orange, keine Riesen-Anführungszeichen. */
.stimmen{grid-column:1/-1;display:grid;gap:clamp(32px,4vw,56px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr))}
.stimme{border-left:3px solid var(--orange);padding-left:28px}
.stimme blockquote{font-family:'Outfit',system-ui,sans-serif;font-weight:500;
  font-size:clamp(21px,2.3vw,28px);line-height:1.28;color:var(--anthrazit);
  letter-spacing:-.01em}
.stimme cite{display:block;margin-top:20px;font-style:normal;font-size:var(--label);
  color:var(--text-hell)}
.stimme cite b{color:var(--anthrazit);font-weight:600;display:block}
.block-dunkel .stimme blockquote{color:var(--weiss)}
.block-dunkel .stimme cite{color:var(--text-dunkel)}
.block-dunkel .stimme cite b{color:var(--weiss)}

/* =====================================================================
   SIGNATUR 3 · Die Freisteller auf der blauen Matte
   Das Bauteil, das sukhothai.eu stark macht: farbige Fläche, Figur bricht
   über ihre Kante. Bei uns steht das Team auf einer Matte in der
   Leitfarbe — Kopf und Rumpf ragen darüber auf Anthrazit.
   Warum nicht die ganze Fläche blau: zwei der vier tragen blaue
   Thai-Shorts, die auf #008CD2 verschwinden. Auf der Matte liegen nur
   Beine und Füße. Gemessen, nicht geraten.
   ===================================================================== */
/* Die Polsterung oben ist kein Zierrat: ohne sie beginnt die farbige
   Fläche exakt am Scheitel und die Köpfe kleben an der Kante. */
.team{grid-column:1/-1;position:relative;margin-top:clamp(24px,4vw,48px);
  padding-top:clamp(28px,4vw,56px)}

/* DIE FARBFLÄCHE — Stand 13.09.2026 abends, nach Nikitas Zuruf
   („den Bereich da unten abschneiden, so dass sie hinter dem blauen Balken
   sind"). Vorher lag die Kante bei 82 % und Shorts und Beine hingen darunter
   auf dem Anthrazit-Grund. Jetzt endet die Fläche UNTEN bündig mit den
   Figuren — die Freisteller selbst sind auf 787 px beschnitten, es steht also
   nichts mehr darunter.
   Die Kante liegt dafür OBEN: alle vier Köpfe treten über sie hinaus auf den
   Anthrazit-Grund. Ohne diesen Bruch wäre die Fläche ein Kasten, in
   dem vier Menschen stecken — mit ihm ist sie das Signatur-Device von
   sukhothai.eu (RICHTUNG-v4 §2.2): die Figur bricht über die Farbkante. */
.team-feld{position:absolute;left:0;right:0;top:clamp(44px,6vw,86px);bottom:0;
  pointer-events:none;background:var(--blau-tief);z-index:0}
/* Flex statt Raster: die vier ruecken zusammen und ueberlappen wie auf
   sukhothai.eu — eine Mannschaft, die zusammensteht, keine vier Passbilder
   mit Abstand. Die beiden Inneren liegen vorn (z-index), das gibt Tiefe. */
.team-reihe{position:relative;z-index:1;display:flex;align-items:flex-end;
  justify-content:center}
.team-reihe figure:not(:last-child){margin-right:-5%}
.team-reihe figure:nth-child(3),.team-reihe figure:nth-child(4){z-index:3}
.team-reihe figure:nth-child(2),.team-reihe figure:nth-child(5){z-index:2}
/* Tiefe wie im Vorbild von sukhothai.eu: die beiden Inneren stehen vorn und
   damit eine Spur groesser. Ohne diese Staffelung muesste die Ueberlappung
   allein die Tiefe tragen — und die frisst dann den COACH-Schriftzug. */
.team-reihe figure:nth-child(3) img,.team-reihe figure:nth-child(4) img{
  height:clamp(261px,38.2vw,538px)}   /* 6 % groesser als die Aeusseren */
/* Die Matte liegt seit heute IM Scroll-Inhalt (sonst waere sie am Handy nur
   fensterbreit gewesen). Damit ist sie ein positioniertes Geschwister der
   Figuren und wuerde sie ueberdecken — die Figuren brauchen deshalb selbst
   eine Ebene. */
.team-reihe figure{display:flex;flex-direction:column;align-items:center;
  justify-content:flex-end;position:relative;z-index:1;flex:0 0 auto}
/* Alle vier mit EINER Schnittkante und EINER Höhe: die Bilder sind alle bei
   derselben Koerperhoehe beschnitten, also stimmen die Groessenverhaeltnisse
   der Menschen zueinander, obwohl jedes Bild gleich hoch dargestellt wird. */
.team-reihe img{height:clamp(246px,36vw,508px);width:auto;max-width:none;
  object-fit:contain}

/* Am Handy stehen die vier in EINER Reihe mit einem Feld — die alte
   Zwei-Reihen-Fassung ist am 13.09. entfallen. */
/* Am Handy ruecken sie enger zusammen, statt zum Wischen wegzulaufen
   (Nikita, 13.09.: „auf Mobil vielleicht auch mehr zusammenruecken, aehnlich
   wie auf der Webseite das Team gezeigt wurde"). Vier Figuren mit 22 %
   Ueberlappung tragen bei 350 px nutzbarer Breite rund 200 px Hoehe — die
   Gesichter sind damit groesser als in der alten Wisch-Reihe, in der man die
   hinteren zwei erst suchen musste. */
@media(max-width:700px){
  .team{margin-left:calc(-1 * var(--rand));margin-right:calc(-1 * var(--rand));
    padding-left:8px;padding-right:8px;overflow:hidden}
  .team-reihe figure:not(:last-child){margin-right:-13%}
  .team-reihe img{height:clamp(197px,52vw,262px)}
  /* Ausdruecklich nachgesetzt: ein Media-Query erhoeht die Spezifitaet nicht,
     die Staffelungs-Regel oben schlug den Mobil-Wert sonst um 27 % statt 6 %. */
  .team-reihe figure:nth-child(3) img,.team-reihe figure:nth-child(4) img{
    height:clamp(209px,55vw,278px)}
}
@media(max-width:400px){
  .team-reihe figure:not(:last-child){margin-right:-17%}
}
/* Ein Wisch-Behaelter ohne fokussierbares Kind ist in Safari und Firefox
   per Tastatur nicht erreichbar — dort kaeme man an Coach 3 und 4 nie. */
.team:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.team-bu{grid-column:1/-1;font-size:var(--label);color:var(--text-dunkel);margin:0}

/* Der Gründer bekommt die volle blaue Fläche: schwarzes Polo und dunkle
   Jeans tragen darauf — genau der Kontrast, der auf sukhothai.eu sitzt. */
.gruender{grid-column:1/-1;display:grid;gap:clamp(24px,4vw,56px);
  grid-template-columns:minmax(0,1fr);align-items:end}
@media(min-width:820px){.gruender{grid-template-columns:minmax(0,7fr) minmax(0,4fr)}}
.gruender-text{padding-bottom:clamp(32px,5vw,72px)}
.gruender-text h2{margin-bottom:20px}
.gruender-text p{max-width:52ch}
/* Die Figur steht auf der Sektionskante, nicht in einem Kasten mit Luft
   darunter (Nikita 13.09.: „etwas groesser machen und abschneiden"). Der Name
   ist deshalb in den Text gerutscht — unter einer angeschnittenen Figur hat
   keine Bildunterschrift mehr Platz. */
.gruender-figur{position:relative;justify-self:center;align-self:end;margin-bottom:0}
.gruender-figur img{display:block}
.gruender-name{font-size:var(--label);color:var(--text-blau);margin-top:20px;
  font-weight:600}
/* 13.09.2026 (Nikita): „Die Sektion danach mit Christian bitte genau dasselbe.
   Etwas groesser machen und abschneiden." Dieselbe Schnittkante wie beim Team
   (am Polo statt am Schienbein), dieselbe Groessenordnung. */
.gruender-figur img{height:clamp(360px,46vw,620px);width:auto;max-width:100%}
.gruender-figur figcaption{font-size:var(--label);color:var(--text-blau);
  margin-top:12px;text-align:center}

/* Standorte */
.orte{grid-column:1/-1;display:grid;gap:clamp(24px,3vw,40px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.ort{border-top:3px solid var(--orange);padding-top:24px}
.ort h3{margin-bottom:12px}
.ort address{font-style:normal;font-size:var(--klein)}

.abschluss{text-align:center}
.abschluss .wrap{justify-items:center}
.abschluss h2{grid-column:1/-1;max-width:20ch;margin:0 auto;color:var(--weiss)}
.abschluss p{grid-column:1/-1;max-width:52ch;margin:24px auto 40px;color:var(--text-blau)}
.abschluss .knopf{grid-column:1/-1;justify-self:center;padding:20px 32px}

.fuss{background:var(--schwarz);border-top:1px solid var(--linie-dunkel);
  padding:40px 0;font-size:var(--label);color:var(--text-dunkel)}
.fuss .wrap{row-gap:16px}
.fuss nav{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:12px 28px}
.fuss a{min-height:44px;display:inline-flex;align-items:center}
.fuss p{grid-column:1/-1}

/* Mitlaufender Knopf auf dem Handy — Schaltung in assets/seite.js. */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:40;
  background:color-mix(in srgb, var(--schwarz) 97%, transparent);
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  display:none;gap:12px;align-items:center;justify-content:space-between;
  border-top:1px solid var(--linie-dunkel)}
.sticky .txt{color:var(--text-dunkel);font-size:var(--label);line-height:1.3}
.sticky .knopf{padding:12px 20px;min-height:48px}
@media(max-width:899px){
  .sticky.an{display:flex}
  body.hat-sticky{padding-bottom:calc(88px + env(safe-area-inset-bottom))}
}

/* =====================================================================
   SIGNATUR 4 · Bewegung
   sukhothai.eu enthüllt Überschriften beim Scrollen (Elementor fadeIn /
   slideInUp) und bewegt das Programm-Mosaik leicht gegen den Zeiger. Das
   kommt herüber — ohne Bibliothek, mit IntersectionObserver und CSS.
   Grundsatz: einmalig, kurz, und beim ersten Bildschirm gar nicht (was
   sofort sichtbar ist, wird nicht eingeblendet).
   ===================================================================== */
.reveal{opacity:0;transform:translateY(18px);
  transition:opacity .62s var(--kurve), transform .62s var(--kurve)}
.reveal.da{opacity:1;transform:none}
.reveal-1{transition-delay:.07s}
.reveal-2{transition-delay:.14s}
.reveal-3{transition-delay:.21s}
/* Ohne JavaScript bleibt nichts unsichtbar — der Endzustand ist der
   Ausgangszustand, sobald das Skript fehlt oder scheitert. */
.kein-js .reveal{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .reveal{opacity:1!important;transform:none!important}
  .drache--links,.hero-drache,.drache--tief{transform:none!important}
  .drache--rechts{transform:translateY(-50%)!important}
}

/* Handlungsangebot in der Mitte der Seite. Am Handy trägt das der mitlaufende
   Knopf; am Schreibtisch gab es zwischen Hero und Abschluss fünf Bildschirme
   ohne einen einzigen Auslöser — und zwar genau über der Sektion mit den
   Trainingszeiten, der Stelle mit der höchsten Absicht. */
.mitte-cta{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;
  gap:16px 24px;border-top:1px solid var(--linie-hell);padding-top:28px}
.mitte-cta span{font-size:var(--klein);max-width:38ch}