/* Anmeldung /start (AUFTRAG-ANMELDUNG-DATEN.md): dieselbe Nacht wie die Landing (Farbrollen siehe static/landing/wow.css).
   Rollen: Nachtfläche #0E1016 · Feld #151824 · Linie #262A3A / #3A3F55 · Text 1 #F3F2EE · Text 2 #A6AABD · Aktion #5B4BDB
           · Akzent auf dunkel #ABA2FF · Fehler #FF8A8A.  Radius: Feld/Knopf 14 · Bestand-Knopf 12.
   Handy: zwei Schritte ohne Scrollen, „Weiter“ fest unten (start.js schaltet sie ein, ohne JS ist alles ein Formular).
   Desktop ab 900 px: links Überschrift, rechts das ganze Formular in einem Schritt. */
.w-nacht{--n:#0E1016;--n2:#151824;--n3:#1C2030;--nl:#262A3A;--nl2:#3A3F55;--nt:#F3F2EE;--nt2:#A6AABD;--na:#ABA2FF;--nf:#FF8A8A;
  background:var(--n);color:var(--nt);color-scheme:dark}
html:has(.s-seite),body:has(.s-seite){background:#0E1016}
.s-seite{min-height:100dvh;display:flex;flex-direction:column;--rand:clamp(16px,4vw,48px)}
.s-seite ::selection{background:#5B4BDB;color:#fff}
.s-seite :focus-visible{outline:2px solid var(--na);outline-offset:2px}
.s-seite a{color:var(--nt)}
.w-versal{font-family:var(--titel);font-weight:800;font-stretch:78%;text-transform:uppercase;letter-spacing:-.012em;line-height:1;text-wrap:balance}

/* Kopf */
.s-kopf{display:flex;align-items:center;justify-content:space-between;gap:12px;height:60px;padding:0 var(--rand)}
.s-kopf .marke{padding:0;color:var(--nt)}
.s-stand{display:flex;align-items:center;gap:6px;font-size:.85rem;color:var(--nt2)}
.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(--nt);font:600 .9rem/1 var(--fliess);cursor:pointer}
.s-zurueck:hover{background:var(--n3)}
.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(--nl2)}
.s-balken i:first-child,.s-seite[data-aktiv="2"] .s-balken i{background:var(--na)}

/* Inhalt */
.s-haupt{flex:1;width:100%;max-width:520px;margin:0 auto;padding:4px var(--rand) 20px;display:flex;flex-direction:column}
.s-intro h1{font-size:clamp(1.85rem,1.2rem + 2.6vw,2.6rem);margin:6px 0 0}
.s-unter{margin:8px 0 0;color:var(--nt2);font-size:1rem;line-height:1.45;max-width:44ch}
.s-punkte{display:none}
.s-empf{margin:12px 0 0;padding:10px 12px;border-radius:12px;border:1px solid color-mix(in oklch,var(--na) 32%,var(--nl));background:var(--n2);font-size:.88rem;line-height:1.4}
.s-empf span{color:var(--nt2)}

.s-form{margin-top:20px}
.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:.9rem;color:var(--nt);padding:0}
.s-bestand legend{display:block;margin-bottom:6px}
.s-hilfe{font-weight:450;font-size:.84rem;color:var(--nt2)}
.s-reihe{display:grid;grid-template-columns:1fr 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:14px;
  border:1px solid var(--nl2);background:var(--n2);color:var(--nt);font:inherit;font-size:1rem;transition:border-color .15s,box-shadow .15s}
.s-seite input::placeholder{color:#6F7389}
.s-seite input:hover,.s-seite select:hover{border-color:#4A5068}
.s-seite input:focus,.s-seite select:focus{outline:none;border-color:var(--na);box-shadow:0 0 0 3px rgb(171 162 255/.22)}
.s-seite [aria-invalid=true]{border-color:var(--nf)}
.s-seite input[aria-invalid=true]:focus{box-shadow:0 0 0 3px rgb(255 138 138/.22)}
.s-fehler{color:var(--nf);font-size:.85rem;font-weight:600;line-height:1.35}
.s-meldung{margin:0 0 16px;padding:12px 14px;border-radius:12px;border:1px solid rgb(255 138 138/.4);background:rgb(255 138 138/.08);color:var(--nt);font-size:.92rem}

/* 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(--n2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A6AABD' 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}
.s-tel select option{background:#151824;color:#F3F2EE}

/* 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:12px;border:1px solid var(--nl2);background:var(--n2);
  font-weight:650;font-size:.9rem;line-height:1.15;text-align:center;font-variant-numeric:tabular-nums;color:var(--nt);transition:background .15s,border-color .15s}
.s-knopf:hover span{border-color:#4A5068}
.s-knopf input:checked + span{background:#5B4BDB;border-color:#5B4BDB;color:#fff}
.s-knopf input:focus-visible + span{outline:2px solid var(--na);outline-offset:2px}
.s-bestand[aria-invalid=true] .s-knopf span{border-color:var(--nf)}
.s-bestand .s-fehler{display:block;margin-top:6px}

.s-rueckruf{margin:16px 0 0;font-size:.88rem;line-height:1.45;color:var(--nt2)}
.s-rueckruf a{color:var(--nt);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}

/* Absende-Leiste */
.s-leiste{margin-top:18px}
.s-leiste .w-cta{width:100%;min-height:56px;font-size:1.05rem}
.w-cta{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:60px;padding:0 30px;border:0;border-radius:14px;background:#5B4BDB;color:#fff;cursor:pointer;
  font:800 1.14rem/1 var(--titel);font-stretch:95%;letter-spacing:.02em;text-transform:uppercase;text-decoration:none;
  box-shadow:0 1px 0 rgb(255 255 255/.18) inset,0 10px 24px -14px rgb(8 8 20/.9);transition:transform .16s var(--ease),background .2s}
.w-cta:hover{background:#4A3BC4}
.w-cta:active{transform:scale(.97)}
.w-cta svg{width:20px;height:20px;transition:transform .25s var(--ease)}
.w-cta:hover svg{transform:translateX(3px)}
.w-cta[disabled]{opacity:.7;cursor:progress}

/* Fuß */
.s-fuss{margin-top:22px;display:grid;gap:8px;font-size:.85rem;line-height:1.45;color:var(--nt2)}
.s-fuss p{margin:0}
.s-fuss .start-fuss{margin:0;text-align:left;color:var(--nt2)}
.s-fuss .start-fuss a{color:var(--nt2)}
.s-fuss a:hover{color:var(--nt)}

/* 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 oklch,#0E1016 94%,transparent);border-top:1px solid var(--nl)}
.s-schritte .s-leiste .w-cta,.s-login .s-leiste-fest .w-cta{max-width:488px;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:0;gap:0}}
.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:700px) and (max-width:899px){
  .s-intro h1{font-size:1.75rem}
  .s-form{margin-top:16px}
  .s-feld,.s-reihe .s-feld{margin-bottom:12px}
  .s-fuss{margin-top:16px;gap:6px}
}
@media (max-width:899px){
  .s-login .s-haupt{padding-bottom:calc(88px + env(safe-area-inset-bottom))}
}
@media (min-width:900px){
  .s-kopf{height:76px}
  .s-haupt{max-width:1120px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);column-gap:clamp(48px,7vw,112px);align-items:start;padding-top:clamp(12px,4vh,56px);padding-bottom:16px}
  .s-intro{grid-column:1;padding-top:12px}
  .s-intro h1{font-size:clamp(2.8rem,1rem + 3.4vw,4.4rem)}
  .s-unter{margin-top:18px;font-size:1.12rem;line-height:1.55}
  .s-empf{max-width:44ch}
  .s-punkte{display:grid;gap:0;list-style:none;margin:32px 0 0;padding:0;max-width:40ch;border-top:1px solid var(--nl)}
  .s-punkte li{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--nl);color:var(--nt);font-size:.98rem}
  .s-punkte svg{width:18px;height:18px;flex:none;color:var(--na)}
  .s-form,.s-login .s-form{grid-column:2;grid-row:1/3;margin:0;padding:32px;border-radius:20px;background:#121521;border:1px solid var(--nl)}
  .s-fuss{grid-column:1;grid-row:2;align-self:end;margin-top:40px;max-width:52ch}
  .s-login .s-haupt{grid-template-columns:minmax(0,1fr) minmax(0,420px)}
  .s-form{padding:28px 32px}
  .s-feld,.s-reihe .s-feld{margin-bottom:12px}
  .s-schritt + .s-schritt{margin-top:12px}
  .s-rueckruf{margin-top:12px}
  .s-leiste{margin-top:16px}
}
@media (prefers-reduced-motion:reduce){.s-schritte .s-schritt.aktiv{animation:none}.w-cta,.w-cta svg{transition:none}}

/* Bestätigung „Bitte Postfach prüfen“ */
.s-gesendet .s-haupt{justify-content:center;padding-bottom:12vh}
.s-gesendet .s-post{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;background:var(--n2);border:1px solid var(--nl);color:var(--na);margin-bottom:22px}
.s-gesendet .s-post svg{width:28px;height:28px}
.s-gesendet h1{font-size:clamp(2rem,1.4rem + 2.4vw,3rem)}
.s-gesendet .s-unter{margin-top:14px;font-size:1.05rem}
.s-gesendet .s-unter strong{color:var(--nt);font-weight:650;overflow-wrap:anywhere}
.s-gesendet .s-fuss{display:block}
@media (min-width:900px){.s-gesendet .s-haupt{display:flex;max-width:560px}}

/* 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:800 1.5rem/1 var(--titel);font-stretch:78%;text-transform:uppercase;letter-spacing:-.01em;color:var(--nt)}
@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:.92rem;line-height:1.35;font-weight:600;color:var(--nt);cursor:pointer;min-height:24px}
.s-haken input{flex:none;width:20px;height:20px;margin:0;accent-color:#5B4BDB;cursor:pointer}
.s-haken.aus{color:var(--nt2);cursor:default}
.s-haken.aus input{cursor:default}
.s-feld .s-haken + .s-rueckruf{margin:4px 0 0 30px}