@import url("marken-tokens.css");
/* 13.09.2026: Ohne diesen Import war `var(--sa-text-70)` auf datenschutz.html
   undefiniert — das Blatt hielt nur seine eigene :root-Kopie, und ein korrekter
   Fix wurde dadurch zur toten Deklaration (design-critic, 3. Pass). Der Spiegel
   steht vorn, die lokale Kopie darunter gewinnt weiterhin fuer alles andere;
   geaendert wird sie in brand/tokens.css, nie hier. */
/* =====================================================================
   Sukhothai Academy — Schulstart-Landingpage
   Alle Farben und Größen stammen aus brand/tokens.css (gemessen an den
   Elementor-Global-Styles von sukhothai.eu, 19.08.2026). Hier stehen sie
   noch einmal, weil die ausgelieferte Seite nicht auf den Marken-Ordner
   zugreifen kann — bei Änderungen IMMER dort zuerst.
   ===================================================================== */

:root {
  --sa-blau:      #008CD2;
  --sa-orange:    #F39200;
  --sa-anthrazit: #323232;
  --sa-schwarz:   #292929;
  --sa-weiss:     #FFFFFF;
  --sa-hell:      #FAFAFA;
  --sa-text:      #333333;

  /* Nachgezogen 13.09.2026 aus brand/tokens.css. Dieses Blatt hielt eine
     eigene Kopie OHNE die Ableitungen — `var(--sa-blau-tief)` lief hier ins
     Leere und der Absendeknopf der Anfrage-Strecke rendete ohne Fuellung.
     Die Werte sind gemessen: Weiss auf der Leitfarbe traegt nur 3,70:1. */
  --sa-blau-tief:   #0079B6;   /* Flaechen und Knoepfe mit Text: 4,76:1 */
  --sa-blau-dunkel: #00658F;   /* Hover: 6,45:1 */

  --font-h: 'Outfit', system-ui, -apple-system, sans-serif;
  --font-b: 'Inter', system-ui, -apple-system, sans-serif;

  --rand: clamp(20px, 5vw, 64px);
  --block: clamp(56px, 9vw, 112px);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: var(--font-b);
  font-size: 18px;
  line-height: 1.55;
  color: var(--sa-text);
  background: var(--sa-weiss);
  -webkit-font-smoothing: antialiased;
}

/* `height: auto` ist hier NICHT kosmetisch: Die Bilder tragen im HTML echte
   width/height-Attribute (gegen Layout-Springen beim Laden). Ohne diese Zeile
   gilt das height-Attribut als feste Höhe und schlägt jedes `aspect-ratio` aus
   dem CSS — die Team-Porträts standen am 20.08. deshalb 875 px hoch statt im
   4:5-Rahmen. Spezifischere Regeln (Hero, Bildband) setzen ihre Höhe danach
   bewusst selbst. */
img { max-width: 100%; height: auto; display: block; }

/* Outfit läuft im mittleren Schnitt (500), NIE fett — die Wucht kommt aus
   Größe und engem Zeilenabstand (GUIDELINES §3). */
h1, h2, h3 { font-family: var(--font-h); font-weight: 500; margin: 0; }
h1 { font-size: clamp(34px, 5.6vw, 68px); line-height: 1.02; letter-spacing: -.015em; }
h2 { font-size: clamp(28px, 4.2vw, 52px); line-height: 1.06; letter-spacing: -.012em; }
h3 { font-size: clamp(20px, 2.2vw, 27px); line-height: 1.15; }

p { margin: 0 0 1em; }
a { color: inherit; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 var(--rand); }

/* Fließtext läuft gedämpft, Überschriften voll deckend — dieser Kontrast ist
   ein Merkmal des Auftritts (GUIDELINES §2). */
.gedaempft { color: var(--sa-text-70); }
.gedaempft-hell { color: rgba(255,255,255,.72); }

/* ---- Knopf: 5px Radius, fast eckig, nie Pillen-Form ------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-b); font-weight: 600; font-size: 16px; line-height: 1;
  padding: 17px 26px; border-radius: 5px; border: 0;
  text-decoration: none; cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}
.btn-primaer { background: var(--sa-blau-tief); color: #fff; }
.btn-primaer:hover { background: var(--sa-blau-dunkel); }
.btn-hell { background: var(--sa-weiss); color: var(--sa-anthrazit); }
.btn-hell:hover { background: #ececec; }
.btn:active { transform: translateY(1px); }

/* ---- Hero: geteilt. Der Text steht auf EIGENER Fläche, nie als Schleier
   über dem Foto (harte Regel 3 der Kunden-CLAUDE.md). ------------------- */
.hero { background: var(--sa-schwarz); color: var(--sa-weiss); }
.hero-grid { display: grid; grid-template-columns: 1fr; }
.hero-text {
  padding: clamp(36px, 6vw, 76px) var(--rand) clamp(44px, 6vw, 80px);
  display: flex; flex-direction: column; justify-content: center;
}
.hero-logo { width: 168px; height: auto; margin-bottom: clamp(24px, 4vw, 44px); }
.hero h1 { margin-bottom: 20px; }
.hero h1 .akzent { color: var(--sa-orange); }
.hero-sub { font-size: clamp(17px, 1.6vw, 20px); max-width: 30em; margin-bottom: 30px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.hero-bild { position: relative; min-height: 300px; background: #1d1d1d; }
.hero-bild img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }

/* Vertrauens-Zeile direkt unter dem Knopf — sie beantwortet die stumme
   Frage „kostet das gleich was?" an der Stelle, an der sie entsteht. */
.hero-trust {
  margin-top: 22px; font-size: 15px; display: flex; flex-wrap: wrap;
  gap: 8px 18px; color: rgba(255,255,255,.66);
}
.hero-trust b { color: #fff; font-weight: 600; }

@media (min-width: 900px) {
  /* Bild LINKS, Argument rechts — der Scanpfad in westlichen Märkten
     (Verkaufspsychologe § Bildwirkung). Dazu passt das Motiv: der Junge
     schaut nach rechts, sein Blick führt also in die Headline statt aus dem
     Bild heraus („people look at people"). Am Handy bleibt die Reihenfolge
     umgekehrt — dort muss die Headline zuerst kommen, nicht ein Bild. */
  .hero-grid { grid-template-columns: .95fr 1.05fr; min-height: 640px; }
  .hero-text { order: 2; padding-left: clamp(32px, 4vw, 60px); padding-right: var(--rand); }
  .hero-bild { order: 1; min-height: 100%; }
}

/* ---- Abschnitte ------------------------------------------------------- */
.block { padding: var(--block) 0; }
.block-hell { background: var(--sa-hell); }
.block-dunkel { background: var(--sa-anthrazit); color: var(--sa-weiss); }

.kopf { max-width: 24em; margin-bottom: clamp(32px, 5vw, 56px); }
.kopf h2 { margin-bottom: 16px; }
.kopf p { font-size: clamp(17px, 1.5vw, 19px); margin: 0; }

/* ---- Karten ----------------------------------------------------------- */
.karten { display: grid; gap: clamp(18px, 2.4vw, 28px); grid-template-columns: 1fr; }
@media (min-width: 760px) { .karten-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 760px) { .karten-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.karte { background: var(--sa-weiss); padding: clamp(24px, 3vw, 34px); border: 1px solid rgba(0,0,0,.09); }
.block-hell .karte { background: var(--sa-weiss); }
.karte h3 { margin-bottom: 10px; }
.karte p { margin: 0; font-size: 17px; }
.karte .nr {
  font-family: var(--font-h); font-size: 15px; font-weight: 500;
  color: var(--sa-blau); letter-spacing: .06em; display: block; margin-bottom: 14px;
}

/* ---- Gruppen (Alter + echte Trainingszeiten) -------------------------- */
.gruppe { background: var(--sa-weiss); border: 1px solid rgba(0,0,0,.09); overflow: hidden; }
.gruppe-bild { aspect-ratio: 4 / 3; }
.gruppe-bild img { width: 100%; height: 100%; object-fit: cover; }
.gruppe-inhalt { padding: clamp(24px, 3vw, 34px); }
.gruppe-alter {
  display: inline-block; font-family: var(--font-b); font-weight: 600; font-size: 14px;
  letter-spacing: .04em; color: #fff; background: var(--sa-blau);
  padding: 6px 11px; border-radius: 5px; margin-bottom: 14px;
}
.zeiten { list-style: none; margin: 18px 0 0; padding: 0; font-size: 16px; }
.zeiten li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid rgba(0,0,0,.09); }
.zeiten li span:last-child { font-variant-numeric: tabular-nums; color: var(--sa-text-70); white-space: nowrap; }

/* ---- Stimmen ---------------------------------------------------------- */
/* Stimmen als geschlossener BLOCK, nicht als Kette einzelner Kästen:
   schon auf dem Handy zwei nebeneinander (20.08., Nikita — untereinander
   riss die Sektion auseinander und lief seitlich aus). Damit das trägt,
   sind die Zitate auf ihren Kern gekürzt; die Kachel bleibt so kurz, dass
   zwei nebeneinander lesbar sind. */
.stimmen { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Vier Stimmen seit 02.09. — bei drei Spalten blieb die vierte allein in
   Reihe zwei stehen. Zwei Spalten ab 700, vier ab 1000. */
@media (min-width: 700px) { .stimmen { gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .stimmen { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stimme {
  /* `margin: 0` ist hier Pflicht, kein Feinschliff: <figure> bringt vom
     Browser 40 px Rand links UND rechts mit. In einer 170-px-Spalte blieben
     davon 90 px Kachel übrig — der Text brach am Handy buchstabenweise um
     (20.08. gemessen, Nikita hatte es sofort gesehen). */
  margin: 0;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.13);
  border-radius: 5px; padding: 14px 13px; display: flex; flex-direction: column;
}
@media (min-width: 700px) { .stimme { padding: 24px 22px; } }
.stimme blockquote {
  /* KEIN `hyphens: auto`: in schmalen Spalten trennt der Browser dann fast
     jedes Wort und die Kachel wird zur Buchstabensuppe. Lieber ein etwas
     unruhigerer rechter Rand als zerhackte Wörter. */
  margin: 0 0 12px; font-size: 14px; line-height: 1.45; color: rgba(255,255,255,.9);
  overflow-wrap: break-word;
}
@media (min-width: 700px) { .stimme blockquote { font-size: 16px; line-height: 1.5; } }
.stimme .wer { font-size: 12px; color: rgba(255,255,255,.55); margin-top: auto; line-height: 1.35; }
@media (min-width: 700px) { .stimme .wer { font-size: 13px; } }
.sterne { color: var(--sa-orange); letter-spacing: .1em; font-size: 13px; margin-bottom: 10px; }

/* Die Google-Zeile über dem Block trägt den Sozialbeweis, den die einzelne
   Kachel nicht tragen kann. */
.stimmen-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; margin-bottom: 18px; }
.stimmen-kopf b { font-family: var(--font-h); font-weight: 500; font-size: 30px; color: #fff; line-height: 1; }

/* ---- Bildband --------------------------------------------------------- */
.band { position: relative; }
/* Die beiden Bildband-Dateien sind bereits im richtigen Verhältnis
   geschnitten (breit 21:9, schmal 4:3) — hier wird nur noch die Breite
   gesetzt, kein zweiter Beschnitt. */
.band img { width: 100%; height: auto; }
.band picture { display: block; }

/* ---- Formular --------------------------------------------------------- */
.formular-grid { display: grid; gap: clamp(28px, 4vw, 56px); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .formular-grid { grid-template-columns: 1fr 1fr; } }

.feld { margin-bottom: 18px; }
.feld label { display: block; font-size: 14px; font-weight: 600; letter-spacing: .02em; margin-bottom: 7px; }
.feld input, .feld select {
  width: 100%; font-family: var(--font-b); font-size: 17px;
  padding: 14px 15px; border: 1px solid rgba(0,0,0,.22); border-radius: 5px;
  background: #fff; color: var(--sa-text);
}
.feld input:focus, .feld select:focus { outline: 2px solid var(--sa-blau); outline-offset: 1px; border-color: transparent; }
.block-dunkel .feld input, .block-dunkel .feld select { background: #fff; }
.feld-zwei { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .feld-zwei { grid-template-columns: 1fr 1fr; } }

.dsgvo { display: flex; gap: 11px; align-items: flex-start; font-size: 14px; line-height: 1.45; margin: 20px 0 24px; }
.dsgvo input { margin-top: 3px; width: 18px; height: 18px; flex: none; }

.hinweis { font-size: 14px; margin-top: 16px; }
.fehler { color: #ffb4a2; font-size: 15px; margin-top: 14px; display: none; }

/* ---- FAQ -------------------------------------------------------------- */
.faq { max-width: 780px; }
.faq details { border-top: 1px solid rgba(0,0,0,.12); padding: 6px 0; }
.faq details:last-child { border-bottom: 1px solid rgba(0,0,0,.12); }
.faq summary {
  cursor: pointer; list-style: none; padding: 18px 34px 18px 0; position: relative;
  font-family: var(--font-h); font-weight: 500; font-size: clamp(18px, 2vw, 21px);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font-size: 24px; color: var(--sa-blau); font-family: var(--font-b); font-weight: 400;
}
.faq details[open] summary::after { content: '–'; }
.faq details p { padding: 0 0 18px; margin: 0; font-size: 17px; }

/* ---- Fuß ------------------------------------------------------------- */
.fuss { background: var(--sa-schwarz); color: rgba(255,255,255,.72); padding: clamp(48px, 6vw, 72px) 0 40px; font-size: 15px; }
.fuss-grid { display: grid; gap: 32px; grid-template-columns: 1fr; margin-bottom: 40px; }
@media (min-width: 760px) { .fuss-grid { grid-template-columns: 1.2fr 1fr 1fr; } }
.fuss h3 { font-size: 16px; color: #fff; margin-bottom: 12px; font-family: var(--font-b); font-weight: 600; letter-spacing: .02em; }
.fuss a { color: rgba(255,255,255,.78); text-decoration: none; }
.fuss a:hover { color: #fff; text-decoration: underline; }
.fuss-logo { width: 150px; margin-bottom: 18px; }
.fuss-unten { border-top: 1px solid rgba(255,255,255,.14); padding-top: 22px; display: flex; flex-wrap: wrap; gap: 10px 24px; font-size: 14px; }

/* ---- Mitlaufender Knopf auf dem Handy -------------------------------- */
.sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: rgba(41,41,41,.97); 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 rgba(255,255,255,.14);
}
.sticky .btn { padding: 14px 20px; font-size: 15px; }
.sticky .txt { color: rgba(255,255,255,.8); font-size: 13px; line-height: 1.3; }
@media (max-width: 899px) { .sticky.an { display: flex; } body.hat-sticky { padding-bottom: 84px; } }

.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ---- Team: die Menschen, die vor der Gruppe stehen -------------------- */
.team-reihe { display: grid; gap: 2px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 700px) { .team-reihe { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.team-kachel { background: #1d1d1d; position: relative; }
.team-kachel img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
/* Die Bilder sind bereits als 4:5-Porträts geschnitten (tools: magick-Crop
   aus den Ganzkörper-Originalen). Ein zusätzlicher CSS-Beschnitt hat am
   20.08. die Köpfe oben angeschnitten — deshalb hier KEIN object-position. */
/* Die fuenfte Kachel steht auf dem Handy allein in der letzten Reihe —
   sie nimmt dort die volle Breite, sonst klafft rechts ein Loch. */
@media (max-width: 699px) {
  .team-kachel:nth-child(5) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 1px); }
}

/* ---- Standorte -------------------------------------------------------- */
.ort { background: var(--sa-weiss); border: 1px solid rgba(0,0,0,.09); padding: clamp(24px, 3vw, 34px); }
.block-dunkel .ort { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.13); }
.ort h3 { margin-bottom: 6px; }
.ort .adr { font-size: 17px; margin-bottom: 18px; }

/* ---- Anfrage-Strecke: ein Schritt je Bildschirm ----------------------- */
.strecke { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
  background: var(--sa-schwarz); color: var(--sa-weiss); }
.strecke-kopf { padding: 22px var(--rand); display: flex; align-items: center;
  justify-content: space-between; gap: 16px; border-bottom: 1px solid rgba(255,255,255,.12); }
.strecke-kopf img { width: 132px; height: auto; }
.balken { height: 3px; background: rgba(255,255,255,.14); }
.balken i { display: block; height: 100%; background: var(--sa-blau); width: 0; transition: width .35s ease; }
.strecke-mitte { flex: 1; display: flex; align-items: center; padding: clamp(32px, 6vw, 72px) var(--rand); }
.strecke-inhalt { width: 100%; max-width: 760px; margin: 0 auto; }
.schritt { display: none; }
.schritt.an { display: block; animation: auf .32s ease both; }
@keyframes auf { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .schritt.an { animation: none; } }
.schritt h1 { font-size: clamp(28px, 4.4vw, 46px); margin-bottom: 12px; }
.schritt .hilfe { color: rgba(255,255,255,.66); font-size: 17px; margin-bottom: 30px; max-width: 30em; }

/* Auswahl-Knoepfe: gross genug fuer den Daumen, eine Spalte auf dem Handy */
.wahl { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .wahl { grid-template-columns: 1fr 1fr; } }
.wahl button { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  text-align: left; font-family: var(--font-b); font-size: 17px; font-weight: 600; color: #fff;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16);
  border-radius: 5px; padding: 20px 22px; cursor: pointer; transition: .16s ease; }
.wahl button:hover, .wahl button:focus-visible { background: rgba(0,140,210,.16); border-color: var(--sa-blau); outline: none; }
.wahl button .neben { display: block; font-weight: 400; font-size: 14px; color: rgba(255,255,255,.6); margin-top: 4px; }
.wahl button .pfeil { color: var(--sa-blau); font-size: 20px; flex: none; }

.strecke-fuss { padding: 18px var(--rand) calc(22px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255,255,255,.12); display: flex; align-items: center;
  justify-content: space-between; gap: 16px; font-size: 14px; color: rgba(255,255,255,.55); }
.zurueck { background: none; border: 0; color: rgba(255,255,255,.72); font-family: var(--font-b);
  font-size: 15px; cursor: pointer; padding: 8px 0; }
.zurueck:hover { color: #fff; }
.zurueck[hidden] { visibility: hidden; }

.merker { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.merker span { font-size: 13px; font-weight: 600; letter-spacing: .02em; color: #fff;
  background: rgba(0,140,210,.2); border: 1px solid rgba(0,140,210,.42);
  border-radius: 5px; padding: 6px 11px; }

/* Der Schritt-Wechsel setzt den Fokus auf die neue Überschrift, damit
   Screenreader den neuen Inhalt vorlesen. Sichtbar soll dieser Fokus NICHT
   sein — er entsteht nicht durch Tastatur-Navigation, und ein blauer Rahmen
   um die Frage liest sich wie ein Fehler (im Sicht-Gate am 20.08. gefangen).
   Fokusrahmen für echte Tastatur-Nutzung bleiben überall sonst erhalten. */
[tabindex="-1"]:focus { outline: none; }

/* =====================================================================
   SCHULSTART v2 (01.09.2026) — der Sprung von "solide Textseite" zu
   "bildgetriebene Kampagnenseite". Grund: die 33-MP-Fotos aus dem Shooting
   vom August waren in v1 postkartengross verbaut; das staerkste Kapital der
   Marke lag brach. Alle Zusaetze arbeiten mit dem BESTEHENDEN Token-Satz —
   keine neue Farbe, keine neue Schrift.
   ===================================================================== */

/* ---- Hero v2 — ZWEI Bauarten, absichtlich.
   Handy: Foto oben in voller Breite, Text darunter auf eigener dunkler
   Flaeche. Grund: am 390er Geraet ist der Hero fast doppelt so hoch wie
   breit; ein Vollbild-Scrim frisst dort genau das Gesicht, wegen dem das
   Bild ueberhaupt gewaehlt wurde (01.09. gemessen und verworfen).
   Ab 760px: echtes Vollbild — dort ist genug Breite, dass der Scrim nur die
   linke Textseite bedeckt und das Kind frei stehen laesst.
   In BEIDEN Faellen gilt Regel 3: kein Filter ueber dem Motiv. ---------- */
.hero--voll { position: relative; background: var(--sa-schwarz); overflow: hidden; }
.hero--voll .hero-foto { display: block; }
/* Am Handy quadratisch statt 4:5 — so bleibt das Gesicht komplett drin und
   die Headline rutscht nicht unter die Falz (01.09. gemessen). */
.hero--voll .hero-foto img { width: 100%; aspect-ratio: 1/1; object-fit: cover; object-position: 50% 20%; display: block; }
.hero--voll .hero-inhalt {
  position: relative; z-index: 2;
  padding: clamp(26px,6vw,40px) var(--rand) clamp(30px,7vw,44px);
  max-width: 1180px; margin: 0 auto;
  display: flex; flex-direction: column;
}
.hero--voll .hero-logo { width: 148px; margin: 0 0 18px; }
.hero--voll h1 { color: #fff; margin: 0 0 18px; max-width: 13em; }
.hero--voll h1 .akzent { color: var(--sa-orange); }
.hero--voll .hero-sub { color: rgba(255,255,255,.86); max-width: 32em; margin-bottom: 26px; }

/* Anlass-Marke ueber der Headline: sagt in drei Worten, WARUM diese Seite
   jetzt gilt. Kein Countdown, kein kuenstlicher Druck — nur das Datum. */
.anlass-marke {
  display: inline-flex; align-items: center; gap: 10px; align-self: flex-start;
  font-family: var(--font-b); font-weight: 600; font-size: 16px; letter-spacing: .09em;
  text-transform: uppercase; color: #fff;
  /* 16px nach GUIDELINES §3 (Label = Inter 600, 16px). Stand vorher auf
     12/13px — unter der Marken-Vorgabe UND unter dem 14px-Hausfloor,
     ausgerechnet auf der 3,70:1-Blauflaeche, wo Kontrast am knappsten ist. */
  background: var(--sa-blau); padding: 9px 14px; border-radius: 5px;
  margin-bottom: 18px; line-height: 1.2;
}

@media (min-width: 760px) {
  .hero--voll { min-height: 86svh; display: flex; align-items: stretch; }
  .hero--voll .hero-foto { position: absolute; inset: 0; }
  .hero--voll .hero-foto img,
  .hero--voll .hero-foto picture { width: 100%; height: 100%; object-fit: cover; object-position: 62% 42%; display: block; }
  /* KEIN SCHLEIER MEHR (06.09.2026).
     Hier lagen zwei uebereinandergelegte Verlaeufe mit 86 % und 88 % Deckung
     — nach oben bis 72 %, nach rechts bis 64 % der Breite. Damit lagen gut
     zwei Drittel des Fotos im Dunkeln, und ein 33-Megapixel-Shooting sah aus
     wie eine Handyaufnahme im Daemmerlicht. Es war die bequeme Antwort auf
     ein echtes Problem (die Halle ist im Hintergrund laut: orange Waben,
     blaue Fahnen, gespiegelte Wandschrift), aber es verstiess gegen die
     eigene Projektregel 3 („kein Farbschleier ueber Motiven") und gegen
     Nikitas Ausschlusskriterium vom 05.08. („Verlaufs-Overlays ueber Fotos").

     Stattdessen dieselbe Bauart wie die Anzeigen: das Foto laeuft
     ungedaempft ueber die volle Flaeche, der Text sitzt in einem DECKENDEN
     Block unten links mit harten Kanten. Rechts daneben bleibt das Bild
     stehen. Die Wiedererkennung zwischen Anzeige und Seite kommt aus dieser
     Bauart — hier wie dort laeuft das Foto ungebrochen und der Textblock
     greift als deckende Flaeche hinein. Ein erster Entwurf hatte zusaetzlich
     ein Blau-nach-Orange-Band als Signatur; es verstiess gegen GUIDELINES §2
     („Blau und Orange treffen sich nie flaechig") und §4 („keine Verlaeufe
     als Flaeche") und ist am 06.09. wieder raus. Nicht neu einbauen. */
  .hero--voll .hero-inhalt {
    justify-content: flex-end; align-self: flex-end;
    width: min(58%, 680px);
    /* margin:0 — die Basisregel setzt `margin: 0 auto` und wuerde den Block
       mitten ins Bild zentrieren, wo er schwebt statt zu sitzen. */
    margin: 0; max-width: none;
    background: var(--sa-anthrazit);
    padding: clamp(30px,3.4vw,46px) clamp(30px,3vw,52px) clamp(34px,4vw,56px);
    position: relative;
  }

  /* Das Logo bleibt IM Block, oben. Der erste Anlauf hat es per
     position:absolute in die obere Blattecke gesetzt — es landete mitten in
     der Headline, weil der Block selbst position:relative traegt und damit
     zum Bezugspunkt wird. Im Block ist es ohnehin richtiger: die Marke steht
     an der Aussage, nicht als Aufkleber in der Bildecke. */
  .hero--voll .hero-logo { width: 152px; margin: 0 0 20px; padding: 0; }
  /* Ohne Schleier braucht die Schrift keinen Schatten mehr: sie steht auf
     einer deckenden Flaeche, nicht auf dem Foto. */
  .hero--voll h1 { font-size: clamp(44px,5.2vw,72px); text-shadow: none; }
}

/* ---- Anlass-Leiste: vier harte Fakten direkt unter dem Hero. Sie beantwortet
   die vier Fragen, die ein Elternteil in Sekunde drei stellt. ------------ */
.fakten { background: var(--sa-anthrazit); color: #fff; }
.fakten ul {
  list-style: none; margin: 0; padding: clamp(18px,2.4vw,26px) 0;
  display: grid; gap: 2px 26px; grid-template-columns: repeat(2, minmax(0,1fr));
}
@media (min-width: 820px) { .fakten ul { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.fakten li { padding: 10px 0; display: flex; flex-direction: column; gap: 3px; }
.fakten b { font-family: var(--font-h); font-weight: 500; font-size: clamp(19px,2.2vw,26px); line-height: 1.1; }
.fakten span { font-size: 14px; color: rgba(255,255,255,.62); }
.fakten .hebt { color: var(--sa-orange); }

/* ---- 45 Minuten: die Signatur-Sektion. Vier echte Szenen aus EINEM
   Kindertraining, quadratisch, gleichrangig. Das ist der Beweis, den keine
   Wettbewerbsseite in Lahr fuehrt: nicht behaupten, sondern zeigen. ------ */
.szenen { display: grid; gap: clamp(14px,1.8vw,20px); grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (min-width: 900px) { .szenen { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.szene { min-width: 0; }
.szene img { width: 100%; aspect-ratio: 1/1; object-fit: cover; }
.szene h3 { font-size: clamp(17px,1.8vw,21px); margin: 14px 0 6px; }
.szene p { font-size: 15px; margin: 0; }
.echt-hinweis {
  margin-top: clamp(26px,3vw,38px); padding-top: 20px;
  border-top: 1px solid rgba(0,0,0,.12); font-size: 15px; max-width: 46em;
}
.block-dunkel .echt-hinweis { border-color: rgba(255,255,255,.16); }

/* ---- Grosses Elternzitat auf eigener Flaeche: EIN Satz, gross gesetzt,
   daneben ein Gesicht. Trennt die Stimmen-Kacheln vom Rest und gibt dem
   staerksten Zitat den Raum, den es in einer 14-px-Kachel nie hat. ------ */
.zitat-flaeche { background: var(--sa-schwarz); color: #fff; }
.zitat-grid { display: grid; grid-template-columns: 1fr; align-items: stretch; }
@media (min-width: 900px) { .zitat-grid { grid-template-columns: 1.15fr .85fr; } }
.zitat-bild img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/5; }
@media (min-width: 900px) { .zitat-bild img { aspect-ratio: auto; } }
.zitat-text {
  padding: clamp(38px,6vw,84px) var(--rand);
  display: flex; flex-direction: column; justify-content: center;
}
.zitat-text blockquote {
  margin: 0 0 22px; font-family: var(--font-h); font-weight: 500;
  font-size: clamp(24px,3.4vw,40px); line-height: 1.16; letter-spacing: -.01em; color: #fff;
}
.zitat-text .wer { font-size: 15px; color: rgba(255,255,255,.6); }
.zitat-text .sterne { margin-bottom: 20px; font-size: 15px; }

/* ---- Vollbreiten-Band mit Bildunterschrift ---------------------------- */
.band-breit { position: relative; background: #1d1d1d; }
.band-breit img { width: 100%; height: auto; display: block; }
.band-bu {
  background: var(--sa-schwarz); color: rgba(255,255,255,.6);
  font-size: 14px; padding: 14px var(--rand); text-align: center;
}

/* =====================================================================
   RUNDE 2 (01.09.2026, nach Nikitas Kritik)
   „Die Sektionen sind sehr standard, sehr langweilig."
   Befund: Die Seite hatte FÜNF Abschnitte in derselben Form — drei bzw.
   zwei weiße Kästen im Raster. Kasten, Kasten, Kasten. Jede Sektion bekommt
   jetzt ihre eigene Form; die Kachel-Reihe bleibt nur dort, wo sie inhaltlich
   ein Raster IST (die Altersgruppen, die vier Szenen).
   ===================================================================== */

/* ---- Behauptungs-Liste: große Zeile, dünne Linie, kein Kasten ---------- */
.behauptungen { list-style: none; margin: 0; padding: 0; max-width: 46em; }
.behauptungen li { border-top: 1px solid rgba(0,0,0,.13); padding: clamp(20px,2.6vw,28px) 0; }
.block-dunkel .behauptungen li { border-color: rgba(255,255,255,.16); }
.behauptungen li:last-child { border-bottom: 1px solid rgba(0,0,0,.13); }
.block-dunkel .behauptungen li:last-child { border-color: rgba(255,255,255,.16); }
.behauptungen h3 { font-size: clamp(19px,2.4vw,25px); margin-bottom: 8px; }
.behauptungen p { margin: 0; font-size: 17px; }

/* ---- Einwand: Frage groß links, Antwort rechts, Beweisbild darunter ---- */
.einwand { display: grid; gap: clamp(20px,3vw,44px); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 860px) { .einwand { grid-template-columns: .85fr 1.15fr; } }
.einwand-frage h2 { margin-bottom: 14px; }
.einwand-antwort > div + div { margin-top: clamp(22px,2.6vw,30px);
  padding-top: clamp(22px,2.6vw,30px); border-top: 1px solid rgba(0,0,0,.13); }
.einwand-antwort h3 { margin-bottom: 8px; }
.einwand-antwort p { margin: 0; font-size: 17px; }

/* ---- Ablauf als Zeitleiste statt Schritt-Kästen ------------------------ */
.leiste { list-style: none; margin: 0; padding: 0; position: relative; }
.leiste li { position: relative; padding: 0 0 clamp(26px,3.4vw,38px) clamp(46px,5vw,62px); }
.leiste li:last-child { padding-bottom: 0; }
/* Die Linie verbindet die Punkte — sie endet am letzten Punkt, läuft nicht
   ins Leere weiter (sonst hängt unten ein Faden in der Luft). */
.leiste li:not(:last-child)::before {
  content: ''; position: absolute; left: clamp(15px,1.7vw,21px); top: 26px; bottom: 0;
  width: 1px; background: rgba(0,0,0,.16);
}
.leiste li::after {
  content: counter(schritt); counter-increment: schritt;
  position: absolute; left: 0; top: 0;
  width: clamp(31px,3.4vw,43px); height: clamp(31px,3.4vw,43px);
  display: grid; place-items: center; border-radius: 50%;
  background: var(--sa-blau); color: #fff;
  font-family: var(--font-b); font-weight: 600; font-size: 15px;
}
.leiste { counter-reset: schritt; }
.leiste h3 { margin-bottom: 7px; }
.leiste p { margin: 0; font-size: 17px; }

/* ---- Gründer-Karte: der Mensch, dem Eltern ihr Kind anvertrauen -------- */
.gruender { display: grid; gap: clamp(22px,3vw,44px); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 780px) { .gruender { grid-template-columns: minmax(0,300px) 1fr; } }
.gruender-bild img { width: 100%; aspect-ratio: 1/1; object-fit: cover; }
.gruender-text h3 { font-size: clamp(22px,2.8vw,30px); margin-bottom: 12px; }
.gruender-text p { font-size: 17px; margin: 0 0 14px; }
.gruender-text p:last-child { margin-bottom: 0; }

/* Die Coach-Reihe wird ruhiger: vier statt fünf, mit Zwischenraum statt
   Stoß an Stoß — die Porträts sind jetzt einheitlich geschnitten und
   brauchen die Fuge nicht mehr als Krücke. */
.coach-reihe { display: grid; gap: clamp(10px,1.4vw,16px);
  grid-template-columns: repeat(2, minmax(0,1fr)); margin-top: clamp(30px,4vw,48px); }
@media (min-width: 700px) { .coach-reihe { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.coach-reihe img { width: 100%; aspect-ratio: 4/5; object-fit: cover;
  /* Die Portraets sind auf die Sektionsfarbe freigestellt — kein Kasten
     um jeden Kopf, die Reihe steht als Reihe. */
  background: var(--sa-anthrazit); }

/* ---- Standorte ohne Kastenrahmen -------------------------------------- */
.orte { display: grid; gap: clamp(26px,4vw,56px); grid-template-columns: 1fr; }
@media (min-width: 760px) { .orte { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.orte .ort { background: none; border: 0; padding: 0; border-top: 2px solid var(--sa-blau); padding-top: 20px; }
.block-dunkel .orte .ort { background: none; border-color: var(--sa-blau); }

/* =========================================================================
   RASTER (02.09.2026) — die eine Ordnung, die der Seite gefehlt hat.
   -------------------------------------------------------------------------
   Befund vor diesem Block: die Seite hatte EIN gemeinsames Mass (.wrap 1180)
   und darunter nichts. Jede Sektion erfand ihre Breite selbst — in em am
   Textblock (24 / 28 / 30 / 46), in festen px (.faq 780), in Grid-Bruechen
   (.85/1.15, 1.15/.85, 300px/1fr) und in voller Breite. Ergebnis: SIEBEN
   verschiedene rechte Kanten (654 / 828 / 894 / 942 / 1052 / 1166 …), alle
   linksbuendig beginnend. Acht Kopf-Bloecke belegten 37–46 % des Containers
   und hatten rechts daneben NICHTS — deshalb Nikitas Satz „man sieht nur die
   Haelfte" und „die Sektionen sind zerschossen". Das Layout war nicht falsch
   gerechnet, es war gar nicht gerechnet.

   Ab hier gilt: 12 Spalten, und genau DREI erlaubte Spuren.
     .spur-text    1 / 8    Fliesstext und Kopf ueber vollbreitem Inhalt
     .spur-kopf    1 / 6  + .spur-inhalt 6 / -1   Kopf links, Inhalt rechts
     .spur-voll    1 / -1   Bildgitter, Karten, Baender, Orte
   Keine Sektion erfindet ein eigenes Mass. Neue Sektion = eine der drei
   Spuren waehlen, sonst nichts.
   ========================================================================= */

@media (min-width: 1000px) {
  .block > .wrap {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(18px, 2vw, 28px);
    row-gap: clamp(32px, 4vw, 56px);
    align-items: start;
  }
  /* Alles ohne Zuweisung liegt vollbreit — nie halb, nie zufaellig. */
  .block > .wrap > * { grid-column: 1 / -1; }

  /* Der zentrierte Schluss-Ruf ist bewusst KEIN Rasterfall: seine Teile
     stehen mittig auf eigener Achse. Im Grid wuerde der inline-flex-Knopf
     blockifiziert und liefe ueber die volle Spur (1052 px Knopf). */
  .block > .wrap.wrap--mitte { display: block; }

  /* Gleiche Spezifitaet wie die Grundregel darueber (zwei Klassen + *),
     sonst gewinnt 1 / -1 und die Spuren tun nichts. */
  .block > .wrap > .spur-text   { grid-column: 1 / 8; }
  .block > .wrap > .spur-kopf   { grid-column: 1 / 6; }
  .block > .wrap > .spur-inhalt { grid-column: 6 / -1; }
  .block > .wrap > .spur-voll   { grid-column: 1 / -1; }

  /* Der Sektionskopf steht nicht mehr als schmale Saeule links, sondern
     spannt die volle Breite: Ueberschrift links, Einleitung rechts, auf
     gemeinsamer Grundlinie. Das war die eigentliche Ursache des Eindrucks
     „rechts ist nichts" — acht Koepfe belegten 37–46 % und daneben stand
     leere Flaeche. Jetzt tragen beide Haelften. */
  .block > .wrap > .kopf.spur-text {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 5fr 7fr;
    column-gap: clamp(24px, 3vw, 48px);
    align-items: end;
  }
  .block > .wrap > .kopf.spur-text > h2 { margin-bottom: 0; }
  .block > .wrap > .kopf.spur-text > p  { padding-bottom: .35em; }

  /* Im Raster traegt row-gap den Abstand — der alte Eigenabstand des
     Kopfblocks wuerde ihn verdoppeln und die Sitzhoehe verschieben. */
  .block > .wrap > .kopf { margin-bottom: 0; }

  /* Die alten Einzelmasse sind ersatzlos weg. Sie standen teils inline im
     Markup (24em/28em/30em) — dort entfernt, hier zusaetzlich neutralisiert,
     damit ein spaeterer Copy-Paste-Fund nicht wieder ein Mass einschleppt. */
  .block > .wrap > .kopf,
  .block > .wrap > .behauptungen,
  .block > .wrap > .faq,
  .block > .wrap > .echt-hinweis,
  .block > .wrap > p { max-width: none; }

  /* Zwei Behauptungen nebeneinander statt untereinander in halber Breite:
     sie sind gleichrangig, das Raster darf das zeigen. */
  .behauptungen.paarweise {
    display: grid; grid-template-columns: 1fr 1fr;
    column-gap: clamp(28px, 3vw, 48px);
  }
  .behauptungen.paarweise li:last-child { border-bottom: 0; }
}

/* Unter 1000px bleibt die Seite einspaltig — die Spur-Klassen tun dort
   nichts, und der Kopfabstand bleibt wie gehabt. */

/* =========================================================================
   HERO-REIHENFOLGE AM HANDY (02.09.2026, Nikita)
   -------------------------------------------------------------------------
   „Dass erst Bild kommt und dann Logo — find ich nicht gut. Sollte erst Logo,
   dann ne knackige gute Headline, Body-Text, Call to Action und dann Bild."
   Im Markup steht .hero-foto vor .hero-inhalt, weil ab 760 px das Foto als
   absolut gesetzter Vollbild-Grund dient. Am Handy ist es ein eigener Block —
   dort wird die Lesefolge per order gedreht statt das Markup zu zerlegen.
   ========================================================================= */
@media (max-width: 759px) {
  .hero--voll { display: flex; flex-direction: column; }
  .hero--voll .hero-inhalt { order: 1; }
  .hero--voll .hero-foto   { order: 2; }
  /* Der Inhalt steht jetzt oben auf dunklem Grund: unten braucht er keinen
     Abschlussabstand mehr, das Foto schliesst den Block. */
  .hero--voll .hero-inhalt { padding-bottom: clamp(26px,6vw,36px); }
  /* Ohne Foto darueber darf die Wortmarke etwas mehr Luft nach oben haben. */
  .hero--voll .hero-inhalt { padding-top: clamp(30px,7vw,44px); }
}


/* =====================================================================
   Nachtrag 13.09.2026 — Befunde des UI-Gates auf danke.html und
   datenschutz.html. Beide Seiten liefen bis zum Launch-Umbau nie durchs
   Tor; sie gehoeren zur Kampagne und damit ab jetzt dazu.
   ===================================================================== */

/* Die Schritt-Ziffern liefen auf der Leitfarbe (3,70:1 auf Hell). */
.karte .nr { color: var(--sa-blau-tief); }

/* Fussnoten-Links massen 73x22 px — unter dem Tippziel-Mindestmass
   (WCAG 2.5.8: 24x24). Sie bekommen Hoehe, nicht Schriftgroesse. */
.fuss a,
.fuss .cookie-einstellungen {
  display: inline-flex; align-items: center;
  min-height: 24px; padding: 2px 0;
}