/* Die Strecke laedt assets/seite.css, und das Blatt haelt eine EIGENE Kopie
   der Marken-Tokens — ohne die Ableitungen, die seit 13.09. in
   brand/tokens.css stehen. Folge: `var(--sa-blau-tief)` war hier undefiniert
   und der Absendeknopf rendete ohne Fuellung (im Handy-Rendering gefangen,
   nicht im Code). Der Spiegel wird deshalb hier nachgeladen — er steht in der
   Kaskade nach seite.css und richtet damit auch die Kopien gerade. */
@import url("marken-tokens.css");

/* =====================================================================
   SUKHOTHAI ACADEMY · Anfrage-Strecke — Auflage v4
   ---------------------------------------------------------------------
   Die Strecke ist die Landefläche der Anzeigen: wer auf eine Anzeige
   klickt, landet über die Seite hier. Sie lief bis 12.09. noch im alten
   Kleid — dunkler Kasten, eine schmale Spalte Text, die rechte Hälfte
   leer. Neben der neuen Seite (seite-v4.css) sah das aus wie ein anderes
   Unternehmen, und genau an dieser Stelle entscheidet sich der Lead.

   Diese Datei liegt ÜBER assets/seite.css und ändert nur das Kleid der
   Strecke. Die Logik (assets/strecke.js), die Schritt-Adressen und die
   Feld-Struktur bleiben unangetastet — dort hängt der Funnel-Vertrag mit
   /api/funnel-lead dran, der schon einmal einen Anlauf gekostet hat.

   Übernommen aus RICHTUNG-v4.md: Drachen-Wasserzeichen, Körnung, harte
   Kanten, Marken-Blau als führende Farbe, Outfit 500.
   ===================================================================== */

.strecke{position:relative;isolation:isolate;overflow:hidden}

/* Körnung und Zeichen — dieselben Dateien wie auf der Seite. */
.strecke::after{content:'';position:absolute;inset:0;z-index:-2;pointer-events:none;
  background-image:url("../medien/v4/korn.png");background-size:256px 256px;
  opacity:.5;mix-blend-mode:screen}
.strecke-drache{position:absolute;z-index:-1;pointer-events:none;opacity:.06;
  width:min(120vw,620px);left:-24%;bottom:-16%}

.strecke-kopf{border-bottom:0}
.strecke-kopf img{width:150px}

/* Der Balken ist der einzige Fortschrittsanzeiger — er trägt die
   Leitfarbe, nicht die abgedunkelte Knopffarbe. */
.balken{height:4px;background:rgba(255,255,255,.12)}
.balken i{background:var(--sa-blau)}

/* Bis zum 14.09.2026 stand hier ein Motiv neben der Frage. Nikita: „Beim
   Frage-Formular bitte das Bild raus. Nur Fokus auf die Fragen." Die Strecke
   fuehrt jetzt EINE Spalte, mittig — wer hier ist, hat sich schon entschieden
   und soll nur noch antworten. */
.strecke-bild{display:none}
@media(min-width:960px){
  .strecke-mitte{padding:clamp(40px,5vw,72px) var(--rand)}
  .strecke-inhalt{max-width:640px;margin:0 auto}
}

.schritt h1{letter-spacing:-.018em;line-height:1.02}
.schritt .hilfe{font-size:18px;margin-bottom:32px}

/* Die Auswahl: eine Spalte, große Flächen, harte Kanten. Zwei Spalten
   nebeneinander erzwangen zweizeilige Beschriftungen und machten die
   Entscheidung schwerer, als sie ist. */
.wahl{gap:2px}
@media(min-width:620px){.wahl{grid-template-columns:1fr}}
.wahl button{border-radius:0;border:0;border-left:3px solid transparent;
  background:rgba(255,255,255,.055);padding:20px 22px;min-height:76px;
  transition:background .18s ease,border-color .18s ease}
.wahl button:hover,.wahl button:focus-visible{
  background:rgba(0,140,210,.20);border-left-color:var(--sa-blau);outline:none}
.wahl button:focus-visible{outline:3px solid var(--sa-orange);outline-offset:2px}
.wahl button .neben{font-size:15px;margin-top:6px}
.wahl button .pfeil{font-size:24px}

/* Was schon gewählt wurde, bleibt als Merker stehen — in der Marken-Farbe
   statt als grauer Chip.
   14.09.2026 (design-critic, gemessen): auf der Leitfarbe #008CD2 misst Weiß
   3,69:1, nötig sind 4,5:1 — und `brand/tokens.css` schreibt selbst, dass die
   Leitfarbe keinen Fließtext tragen darf. Ausgerechnet hier liest ein
   Elternteil vor dem Absenden gegen, was es gewählt hat. Also dieselbe
   Ableitung wie beim Knopf und bei `.gruppe .alter`: #0079B6 = 4,76:1. */
.merker span{background:var(--sa-blau-tief);border-radius:0;padding:8px 12px;
  color:var(--sa-weiss)}

@media(prefers-reduced-motion:reduce){
  .balken i{transition:none}
  .wahl button{transition:none}
}

/* Nachtrag 13.09. — Befunde aus dem UI-Gate, das diese Fläche zum ersten Mal
   gesehen hat (sie lief bis gestern unter dem alten Stilblatt mit). */

/* Die Schritt-Überschriften sind jetzt h2; das eine h1 der Seite steht
   unsichtbar davor, damit die Gliederung stimmt, ohne dass zweimal
   dasselbe auf dem Bildschirm steht. */
.nur-vorlesen{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.schritt h2{font-family:'Outfit',system-ui,sans-serif;font-weight:500;
  font-size:clamp(28px,4.4vw,46px);line-height:1.02;letter-spacing:-.018em;
  color:var(--sa-weiss);margin-bottom:12px}

/* Rufnummer im Fuß: 101×17 px war unter dem Tippziel-Mindestmaß (WCAG 2.5.8). */
.fuss-tel{display:inline-flex;align-items:center;min-height:24px;padding:4px 2px;
  color:rgba(255,255,255,.86)}


/* --- Schriftgrad-Boden (13.09.) ------------------------------------------
   Kein Grad unter 16 px auf dieser Marke — die GUIDELINES definieren keinen
   kleineren. Die Strecke erbte aus assets/seite.css 13, 14 und 15 px,
   ausgerechnet an den Merker-Chips: den Angaben, die ein Elternteil vor dem
   Absenden gegenliest. */
.merker span{font-size:16px}
.feld label{font-size:16px}
.dsgvo,.dsgvo label,.hinweis{font-size:16px}
.strecke-fuss{font-size:16px}
.wahl button .neben{font-size:16px}
.strecke-kopf #zaehler{font-size:16px}

.strecke-kopf #zaehler{color:rgba(255,255,255,.72)}
/* Die Fehlerzeile erscheint erst im Zustand — deshalb rutschte sie durch den
   Boden-Block darüber (design-critic 13.09.: „Boden-Blöcke fangen nur, was im
   Grundzustand sichtbar ist"). Farbe aus dem Marken-Orange abgeleitet statt
   als Roh-Hex, damit der Token-Spiegel sie sieht. */
.fehler{font-size:16px;color:color-mix(in srgb, var(--sa-orange) 55%, var(--sa-weiss))}
.feld input.feld-fehler,.feld select.feld-fehler{
  outline:3px solid color-mix(in srgb, var(--sa-orange) 55%, var(--sa-weiss));outline-offset:2px}

/* Der Sonderfall fuer den Absendeknopf ist entfallen: seit 13.09. traegt
   assets/seite.css die Ableitungen selbst, die Ursache ist damit weg statt
   ueberschrieben. */

/* Meldung direkt unter dem betroffenen Feld. Die Sammelzeile unter dem Knopf
   bleibt als Zusammenfassung stehen — am Handy lag sie 600 px vom Fokus weg. */
.feld-meldung{font-size:16px;line-height:1.35;margin-top:8px;
  color:color-mix(in srgb, var(--sa-orange) 55%, var(--sa-weiss))}

/* Der Widerrufs-Link im Streckenfuss (13.09.2026). Er steht neben der
   Telefonnummer, bleibt aber leiser als sie — gefragt ist hier die Nummer,
   der Widerruf muss nur jederzeit erreichbar sein. Umbruch auf schmalen
   Geraeten, damit die Zeile nicht dritte Spalte spielt. */
.strecke-fuss{flex-wrap:wrap}
.strecke-fuss .fuss-cookie{color:rgba(255,255,255,.55);text-decoration:underline;
  text-underline-offset:3px;min-height:44px;display:inline-flex;align-items:center}
.strecke-fuss .fuss-cookie:hover{color:var(--sa-weiss)}

/* Der Zurück-Knopf der Strecke (design-critic 14.09.2026). Er stand auf 15 px
   ohne Mindesthöhe — der 16-px-Boden dieser Marke (GUIDELINES §3) griff nicht,
   weil Buttons keinen Grad erben und .zurueck seinen eigenen setzte. Durch
   acht Runden gerutscht ist er, weil er in Schritt 1 `hidden` ist und nur
   Schritt 1 gerendert wurde: ein Zustand, den kein Abzug zeigte. */
.zurueck{font-size:16px;min-height:44px;display:inline-flex;align-items:center;
  padding:8px 4px}
.zurueck[hidden]{display:none}