/* Warteliste, Preview-Antrag und Abmeldung im Startseiten-Design (23.10.2026).
   Kopf, Fuss, Hero, Buttons und Farben kommen aus landing-v4.css, produkt.css und seiten.css; hier stehen
   nur die Formulare. Die Klassen wl-* und die Ids sind die, die js/warteliste.js und die Tests kennen.
   Zustand (Fehler, Erfolg) steht im Text und im Gewicht, nicht allein in der Farbe. */
.wl-hero{padding-bottom:36px}
.wl-hero h1{max-width:18ch}
.wl-count{margin:20px 0 0;font:12px/1.6 var(--mono);color:var(--muted);min-height:18px}
.wl-count b{color:var(--text);font-weight:500}
.wl-count[hidden]{display:none}
.wl-hero .wl-form,.wl-hero .wl-done{margin-inline:auto;margin-top:32px;text-align:left}

.wl-sheet{padding:64px 0 24px;border-top:1px solid var(--line)}
.wl-sheet .wl-kicker{margin:0 0 14px;font:10px/1.5 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:#8f8f8a}
.wl-sheet h2{font-size:clamp(26px,2.8vw,38px);font-weight:520;line-height:1.12;letter-spacing:-.026em;text-wrap:balance;max-width:24ch}
.wl-sub{margin:16px 0 30px;max-width:64ch;font-size:15px;line-height:1.65;color:var(--muted)}
.wl-sheet .wl-form,.wl-sheet .wl-done{margin-top:0}

.wl-form{width:100%;max-width:480px;padding:26px;border:1px solid #f2f2f027;border-radius:10px;background:linear-gradient(180deg,#1b1b24,#14141b)}
.wl-field{display:block;margin:0 0 18px}
.wl-field>span{display:block;margin:0 0 7px;font:10px/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.wl-field .opt{text-transform:none;letter-spacing:0}
.wl-input,.wl-textarea{width:100%;padding:12px 14px;border:1px solid #f2f2f038;border-radius:8px;background:#14141b;color:var(--text);font:15px/1.4 var(--font)}
.wl-textarea{resize:vertical;min-height:96px}
.wl-input::placeholder,.wl-textarea::placeholder{color:var(--dim)}
.wl-input:focus,.wl-textarea:focus{outline:2px solid #b3b3af;outline-offset:2px;border-color:#b3b3af}
.wl-hint{display:block;margin-top:8px;font-size:12.5px;line-height:1.55;color:var(--dim)}
.wl-field .wl-hint{text-transform:none;letter-spacing:0;font-family:var(--font)}

.wl-check{display:flex;align-items:flex-start;gap:12px;margin:4px 0 22px;font-size:13px;line-height:1.55;color:var(--muted)}
.wl-check input{flex:none;width:18px;height:18px;margin-top:2px;accent-color:#b3b3af}
.wl-check a,.wl-done a{color:#b3b3af;text-decoration:underline;text-decoration-color:#f2f2f066;text-underline-offset:3px}
.wl-provisional{margin:-8px 0 22px;padding:10px 12px;border:1px dashed var(--line);border-radius:8px;font:11px/1.6 var(--mono);color:var(--dim)}

.wl-btn{display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:46px;padding:0 23px;border:1px solid #f2f2f05c;border-radius:8px;background:linear-gradient(130deg,#f2f2f0,#b3b3af);box-shadow:0 0 30px #f2f2f012,0 1px 0 #ffffff77 inset;color:#2a2a32;font-size:12px;font-weight:560;transition:background .2s,box-shadow .2s,transform .2s}
@media (hover:hover) and (pointer:fine){.wl-btn:hover:not(:disabled){transform:translateY(-2px);background:#f2f2f0;box-shadow:0 5px 32px #f2f2f024}}
.wl-btn:disabled{opacity:.55;cursor:not-allowed}

.wl-msg{margin-top:14px;min-height:18px;font-size:13.5px;line-height:1.5;color:var(--muted)}
.wl-msg.is-err{color:var(--text);font-weight:600}
.wl-msg.is-ok{color:var(--text);font-weight:500}
.wl-msg:empty{margin-top:0}

/* Ersetzt das Formular nach der Anmeldung: dieselbe Stelle, damit ein Screenreader den Wechsel vorliest. */
.wl-done{display:none;max-width:480px;padding:22px 24px;border-left:2px solid rgba(var(--tint),.6);border-radius:0 12px 12px 0;background:#ffffff04}
.wl-done.is-shown{display:block}
.wl-done h3{font-size:18px;font-weight:560;letter-spacing:-.02em}
.wl-done p{margin-top:8px;font-size:14.5px;line-height:1.65;color:var(--muted)}
.wl-form.is-hidden{display:none}

@media (max-width:650px){
  .wl-form{padding:20px 18px}
}