/* Anmeldung /start, „Postfach prüfen“ (AUFTRAG-HELL-APP.md, 11.11.2026): heller Look der Landingpage „Idee 2“.
   Farben, Schriften, Radien und der Magenta-Verlauf kommen aus app.css (eine Quelle); hier steht nur das Layout.
   Handy (< 900 px): Vollbild-Schritte ohne Scrollen, „Weiter“ fest unten (start.js schaltet sie ein; ohne JS ein Formular).
   Desktop (≥ 900 px): links Überschrift + Formular-Karte, rechts das Beispiel-Reel in voller Schärfe (720×1280, angezeigt ≤ 420 px breit). */
.s-seite{--rand:clamp(1.25rem,4vw,2rem);min-height:100dvh;display:flex;flex-direction:column;background:var(--flaeche);color:var(--text)}
.s-seite ::selection{background:#FFD6E8;color:var(--text)}
.s-seite :focus-visible{outline:2px solid var(--akzent);outline-offset:3px}
.s-seite a{color:var(--text)}
.s-titel{font:700 clamp(2rem,1.5rem + 2vw,3.1rem)/1.06 var(--titel);letter-spacing:-.03em;text-wrap:balance;margin:0}

/* Kopf */
.s-kopf{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px;padding:0 max(var(--rand),env(safe-area-inset-left))}
.s-kopf .marke{padding:0}
.s-stand{display:flex;align-items:center;gap:6px;font-size:.875rem;color:var(--text2)}
.s-zurueck{display:inline-flex;align-items:center;gap:2px;min-height:44px;padding:0 10px 0 4px;border:0;border-radius:10px;background:none;color:var(--text);font:600 .9375rem/1 var(--fliess);cursor:pointer}
.s-zurueck:hover{background:var(--linie2)}
.s-zurueck svg{width:20px;height:20px}
.s-zaehler{display:inline-flex;align-items:center;gap:8px;font-variant-numeric:tabular-nums;white-space:nowrap}
.s-balken{display:inline-flex;gap:3px}
.s-balken i{width:16px;height:4px;border-radius:2px;background:var(--linie)}
.s-balken i:first-child,.s-seite[data-aktiv="2"] .s-balken i{background:var(--akzent)}

/* Inhalt */
.s-haupt{flex:1;width:100%;max-width:560px;margin:0 auto;padding:4px var(--rand) 24px;display:flex;flex-direction:column}
.s-links{display:flex;flex-direction:column;min-width:0}
.s-unter{margin:10px 0 0;color:var(--text2);font-size:clamp(1rem,.95rem + .25vw,1.125rem);line-height:1.5;max-width:34em}
.s-empf{margin:14px 0 0;padding:12px 14px;border-radius:var(--r-feld);background:var(--akzent-weich);color:var(--text);font-size:.9375rem;line-height:1.45}
.s-empf span{color:var(--text2)}

.s-form{margin-top:22px}
.s-schritt{border:0;margin:0;padding:0;min-width:0}
.s-schritt + .s-schritt{margin-top:14px}
.s-feld{display:grid;gap:6px;margin:0 0 14px;min-width:0;border:0;padding:0}
.s-feld:last-child{margin-bottom:0}
.s-feld > label,.s-bestand legend{font-weight:600;font-size:.9375rem;color:var(--text);padding:0}
.s-bestand legend{display:block;margin-bottom:6px}
.s-hilfe{font-weight:450;font-size:.875rem;color:var(--text2)}
.s-reihe{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.s-reihe .s-feld{margin-bottom:14px}
.s-seite input[type=text],.s-seite input[type=email],.s-seite input[type=tel],.s-seite select{width:100%;min-width:0;min-height:50px;padding:12px 14px;border-radius:var(--r-feld);
  border:1px solid var(--linie);background:var(--karte);color:var(--text);font:inherit;font-size:1rem;transition:border-color .15s,box-shadow .15s}
.s-seite input::placeholder{color:#8A8A9C}
.s-seite input:hover,.s-seite select:hover{border-color:#C9C9D6}
.s-seite input:focus,.s-seite select:focus{outline:none;border-color:var(--akzent);box-shadow:0 0 0 3px var(--akzent-weich)}
.s-seite [aria-invalid=true]{border-color:var(--rot)}
.s-seite input[aria-invalid=true]:focus{box-shadow:0 0 0 3px var(--rot-w)}
.s-fehler{color:var(--rot);font-size:.875rem;font-weight:600;line-height:1.35}
.s-meldung{margin:0 0 16px;padding:12px 14px;border-radius:var(--r-feld);background:var(--rot-w);color:var(--rot);font-size:.9375rem;font-weight:550}

/* Telefon: Vorwahl + Nummer in einer Zeile */
.s-tel{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px}
.s-tel select{width:auto;padding-right:30px;appearance:none;-webkit-appearance:none;cursor:pointer;font-variant-numeric:tabular-nums;
  background:var(--karte) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355556A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 10px center/16px no-repeat}

/* Bestand: fünf gleich breite Knöpfe, aufsteigend */
.s-bestand{display:block}
.s-knoepfe{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.s-knopf{position:relative;display:block;cursor:pointer}
.s-knopf input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.s-knopf span{display:flex;align-items:center;justify-content:center;min-height:50px;padding:4px 2px;border-radius:var(--r-feld);border:1px solid var(--linie);background:var(--karte);
  font-weight:650;font-size:.9375rem;line-height:1.2;text-align:center;font-variant-numeric:tabular-nums;color:var(--text);transition:background .15s,border-color .15s,color .15s}
.s-knopf:hover span{border-color:#C9C9D6}
.s-knopf input:checked + span{background:var(--akzent-weich);border-color:var(--akzent);color:var(--akzent-dunkel);box-shadow:inset 0 0 0 1px var(--akzent)}
.s-knopf input:focus-visible + span{outline:2px solid var(--akzent);outline-offset:2px}
.s-bestand[aria-invalid=true] .s-knopf span{border-color:var(--rot)}
.s-bestand .s-fehler{display:block;margin-top:6px}

.s-rueckruf{margin:16px 0 0;font-size:.875rem;line-height:1.45;color:var(--text2)}
.s-rueckruf a{color:var(--text);white-space:nowrap}

/* Honigtopf: für Menschen unsichtbar, außerhalb des Bildschirms */
.s-topf{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

/* Hauptknopf: derselbe Magenta-Verlauf wie auf der Landingpage */
.s-leiste{margin-top:20px}
.w-cta{display:inline-flex;align-items:center;justify-content:center;gap:.5em;width:100%;min-height:56px;padding:0 1.4em;border:0;border-radius:14px;cursor:pointer;
  background:var(--akzent);background-image:var(--knopf-verlauf);color:#fff;font:700 1.0625rem/1.15 var(--fliess);text-decoration:none;
  box-shadow:0 10px 24px -12px rgb(168 19 122/.6);transition:transform .2s var(--ease);-webkit-tap-highlight-color:transparent}
.w-cta:hover{background-image:var(--knopf-verlauf-tief)}
.w-cta:active{transform:scale(.97)}
.w-cta svg{width:1.15em;height:1.15em;flex:none;transition:transform .25s var(--ease)}
.w-cta:hover svg{transform:translateX(3px)}
.w-cta[disabled]{opacity:.7;cursor:progress}

/* Fuß */
.s-fuss{margin-top:24px;display:grid;gap:8px;font-size:.875rem;line-height:1.5;color:var(--text2);max-width:35em}
.s-fuss p{margin:0}
.s-fuss .start-fuss{margin:0;text-align:left;color:var(--text2);font-size:inherit}
.s-fuss .start-fuss a{color:var(--text2)}
.s-fuss a:hover{color:var(--akzent-dunkel)}
.s-konto a{font-weight:650}

/* Beispiel-Reel (nur Desktop) */
.s-beispiel{display:none}

/* Schritte (nur mit JS und unter 900 px): fester Knopf unten, je Schritt ohne Scrollen */
.s-schritte .s-schritt{display:none}
.s-schritte .s-schritt.aktiv{display:block;animation:s-rein .22s var(--ease)}
.s-schritte .s-schritt + .s-schritt{margin-top:0}
.s-schritte .s-leiste,.s-login .s-leiste-fest{position:fixed;left:0;right:0;bottom:0;z-index:20;margin:0;
  padding:10px var(--rand) calc(10px + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--flaeche) 94%,transparent);border-top:1px solid var(--linie)}
.s-schritte .s-leiste .w-cta,.s-login .s-leiste-fest .w-cta{max-width:520px;margin:0 auto;display:flex}
.s-mit-leiste .s-haupt{padding-bottom:calc(88px + env(safe-area-inset-bottom))}
.s-seite[data-aktiv="2"] .s-intro,.s-seite[data-aktiv="2"] .s-konto,.s-seite[data-aktiv="1"] .s-danach{display:none}
@media (max-width:420px){.s-seite[data-aktiv="2"] .s-kopf .marke{font-size:1.2rem}}
.s-seite[data-aktiv="2"] .s-form{margin-top:8px}
@keyframes s-rein{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}

@media (max-height:780px) and (max-width:899px){
  .s-kopf{min-height:56px}
  .s-titel{font-size:1.75rem}
  .s-unter{margin-top:6px}
  .s-form{margin-top:14px}
  .s-feld,.s-reihe .s-feld{margin-bottom:10px}
  .s-seite input[type=text],.s-seite input[type=email],.s-seite input[type=tel],.s-seite select,.s-knopf span{min-height:46px;padding-top:10px;padding-bottom:10px}
  .s-haken{margin-top:8px}
  .s-fuss{margin-top:16px;gap:6px}
}
/* Sehr kurze Handys (375×667): Unterzeile und Schritt-Überschrift weg, damit jeder Schritt ohne Scrollen passt (auch FR) */
@media (max-height:700px) and (max-width:899px){
  .s-schritte ~ * .s-unter,.s-mit-leiste .s-unter,.s-mit-leiste .s-titel2{display:none}
  .s-mit-leiste .s-form{margin-top:12px}
}
@media (max-width:899px){
  .s-login .s-haupt{padding-bottom:calc(88px + env(safe-area-inset-bottom))}
}

@media (min-width:900px){
  .s-kopf{min-height:80px;max-width:1180px;width:100%;margin:0 auto}
  .s-haupt{max-width:1180px;display:grid;grid-template-columns:minmax(0,600px) minmax(0,420px);justify-content:space-between;column-gap:clamp(40px,5vw,80px);
    align-items:start;padding-top:clamp(8px,3vh,40px);padding-bottom:48px}
  .s-links{grid-column:1}
  .s-titel{font-size:clamp(2.4rem,1.2rem + 2.4vw,3.4rem)}
  .s-unter{margin-top:14px}
  .s-form,.s-login .s-form{margin-top:24px;padding:26px 30px 28px;border-radius:var(--r-karte);background:var(--karte);box-shadow:var(--schatten)}
  .s-feld,.s-reihe .s-feld{margin-bottom:14px}
  .s-schritt + .s-schritt{margin-top:14px}
  .s-leiste{margin-top:22px}
  .s-fuss{margin-top:24px}

  /* Desktop-Karte kompakt, damit „Test starten“ bei 1440×900 ohne Scrollen sichtbar ist:
     Autohaus + Website nebeneinander, Bestand darunter über die volle Breite */
  .s-schritt[data-schritt="2"]{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:10px}
  .s-schritt[data-schritt="2"] > legend{position:absolute}
  .s-schritt[data-schritt="2"] > .s-feld:has(#autohaus){grid-column:1;grid-row:1}
  .s-schritt[data-schritt="2"] > .s-feld:has(#website){grid-column:2;grid-row:1;margin-bottom:14px}
  .s-schritt[data-schritt="2"] > .s-bestand{grid-column:1/-1;grid-row:2;margin-bottom:0}
  .s-schritt[data-schritt="2"] .s-hilfe#website-h{line-height:1.3}
  .s-titel{font-size:clamp(2.2rem,1.2rem + 1.6vw,2.75rem)}
  .s-schritt[data-schritt="2"] > .s-feld{align-content:start}
  .s-unter{max-width:40em}
  .s-seite input[type=text],.s-seite input[type=email],.s-seite input[type=tel],.s-seite select,.s-knopf span{min-height:48px;padding-top:11px;padding-bottom:11px}
  .s-feld,.s-reihe .s-feld{margin-bottom:12px}
  .s-form .s-rueckruf{margin-top:4px}
  .s-beispiel{grid-column:2;display:grid;gap:20px;position:sticky;top:24px;align-self:start}
  .s-reel{position:relative;margin:0;width:100%;aspect-ratio:9/16;border-radius:28px;overflow:hidden;background:#15151B;box-shadow:var(--schatten-hoch)}
  .s-reel img,.s-reel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
  .s-reel video{opacity:0;transition:opacity .4s var(--ease)}
  .s-reel video.laeuft{opacity:1}
  .s-reel-etikett{position:absolute;left:14px;top:14px;padding:6px 10px;border-radius:99px;background:rgb(255 255 255/.94);color:var(--text2);font:600 .875rem/1 var(--fliess)}
  .s-bsp-text{display:grid;gap:12px}
  .s-bsp-titel{font:700 1.25rem/1.25 var(--titel);letter-spacing:-.015em;text-wrap:balance}
  .s-punkte{display:grid;gap:8px;list-style:none;margin:0;padding:0}
  .s-punkte li{display:flex;align-items:center;gap:10px;color:var(--text);font-size:1rem;line-height:1.4}
  .s-punkte svg{width:18px;height:18px;flex:none;color:var(--akzent)}
}
/* Sehr flache Desktop-Fenster: Reel kleiner, damit es neben das Formular passt */
@media (min-width:900px) and (max-height:820px){.s-haupt{grid-template-columns:minmax(0,600px) minmax(0,320px)}}
@media (prefers-reduced-motion:reduce){.s-schritte .s-schritt.aktiv{animation:none}.w-cta,.w-cta svg,.s-reel video{transition:none}}

/* Bestätigung „Bitte Postfach prüfen“ */
.s-gesendet .s-haupt{display:flex;justify-content:center;padding-bottom:12vh;max-width:600px}
.s-gesendet .s-karte{padding:clamp(24px,4vw,40px);border-radius:var(--r-karte);background:var(--karte);box-shadow:var(--schatten)}
.s-gesendet .s-post{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;background:var(--akzent-weich);color:var(--akzent-dunkel);margin-bottom:22px}
.s-gesendet .s-post svg{width:28px;height:28px}
.s-gesendet .s-titel{font-size:clamp(2rem,1.5rem + 1.6vw,2.6rem)}
.s-gesendet .s-unter{margin-top:14px}
.s-gesendet .s-unter strong{color:var(--text);font-weight:650;overflow-wrap:anywhere}
.s-gesendet .s-fuss{display:block;margin-top:18px}
@media (min-width:900px){.s-gesendet .s-haupt{display:flex;grid-template-columns:none}}

/* Prüfung Autohaus-Inhaber: Rückruf-Hinweis direkt am Telefonfeld, Schritt 2 mit Überschrift */
.s-feld .s-rueckruf{margin:8px 0 0}
.s-titel2{margin:0 0 14px;font:700 1.5rem/1.15 var(--titel);letter-spacing:-.02em;color:var(--text)}
@media (min-width:900px){.s-titel2{display:none}}

/* Telefon freiwillig + Häkchen „Rückruf erwünscht“ (AUFTRAG-SCHNELLE-GEWINNE.md) */
.s-haken{display:flex;align-items:flex-start;gap:10px;margin:12px 0 0;font-size:.9375rem;line-height:1.35;font-weight:600;color:var(--text);cursor:pointer;min-height:24px}
.s-haken input{flex:none;width:20px;height:20px;margin:0;accent-color:var(--akzent);cursor:pointer}
.s-haken.aus{color:var(--text2);cursor:default}
.s-haken.aus input{cursor:default}
.s-feld .s-haken + .s-rueckruf{margin:4px 0 0 30px}
/* Sinngruppe in Überschriften: nie innen umbrechen (AUFTRAG-SINN-UMBRUECHE.md, typo.sinngruppen) */
.sg{white-space:nowrap}

/* ---------- Käfer „Fehler melden“ oben rechts (AUFTRAG-APP-DOMAIN-KAEFER-OBEN.md, 11.11.2026): Platzhalter ::after im Kopf */
:root{--dfk-oben:12px;--dfk-oben-h:8px;--dfk-rechts:var(--rand)}
.s-kopf{justify-content:flex-start}
.s-kopf > .s-stand{margin-inline-start:auto}
.s-kopf::after{content:"";flex:none;inline-size:var(--dfk-b,100px);block-size:1px}
@media (min-width:900px){:root{--dfk-oben:20px}}
/* Handy: Schritt-Anzeige (Zurück, Balken, „Schritt 1 von 2“) bekommt eine eigene schmale Zeile unter Marke + Käfer,
   sonst läge sie unter dem Käfer-Knopf (gemessen 360 px: Marke 101 + Stand 225 + Knopf 102 px) */
@media (max-width:899px){
  :root{--dfk-oben:8px}
  .s-kopf{flex-wrap:wrap;row-gap:0;min-height:0}
  .s-kopf .marke{display:inline-flex;align-items:center;min-height:56px}
  .s-stand{order:3;flex:1 0 100%;min-height:30px;margin-top:-6px}
}