/* 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)}

/* Ab 960 px steht neben der Frage ein Motiv in voller Höhe. Ohne das war
   die rechte Bildschirmhälfte leer — auf einem 1440er Schirm die Hälfte
   der Fläche für nichts. Kein Schleier darüber: das Foto zeigt das Foto. */
.strecke-bild{display:none;margin:0}
@media(min-width:960px){
  .strecke-mitte{display:grid;align-items:stretch;gap:clamp(36px,5vw,80px);
    grid-template-columns:minmax(0,1fr) minmax(0,.8fr);
    padding:clamp(40px,5vw,72px) 0 clamp(40px,5vw,72px) var(--rand)}
  .strecke-inhalt{max-width:640px;margin:0;align-self:center}
  .strecke-bild{display:block;position:relative;min-height:520px;align-self:stretch}
  .strecke-bild img{width:100%;height:100%;object-fit:cover;display:block}
  /* Die blaue Kante zitiert die Matte aus dem Team-Bauteil der Seite. */
  .strecke-bild::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:10px;
    background:var(--sa-blau)}
}

.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 — jetzt in der
   Leitfarbe statt als grauer Chip. */
.merker span{background:var(--sa-blau);border-radius:0;padding:8px 12px}

@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:#fff;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%, #FFFFFF)}
.feld input.feld-fehler,.feld select.feld-fehler{
  outline:3px solid color-mix(in srgb, var(--sa-orange) 55%, #FFFFFF);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%, #FFFFFF)}

/* 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:#fff}