:root {
  --tinte:#101b33; --papier:#f4f6f8; --flaeche:#ffffff; --band:#ffcb1f; --bleibt:#2f5bea;
  --leise:#566178; --linie:#d9dee6; --fehler:#b42318; --ok:#1d6b3a; --zart:#eef1f6;
}
@media (prefers-color-scheme: dark) {
  :root { --tinte:#eef1f7; --papier:#0d1424; --flaeche:#152036; --leise:#9aa6bf; --linie:#2a3752;
          --fehler:#ff8a7a; --ok:#7bd39a; --bleibt:#7d9bff; --zart:#1b2843; }
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--papier); color:var(--tinte); font:16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
a { color:inherit; }
:focus-visible { outline:3px solid var(--bleibt); outline-offset:2px; }
.rahmen { max-width:920px; margin:0 auto; padding:0 16px 64px; }
header.kopf { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:20px 0; flex-wrap:wrap; }
.marke { font-weight:800; letter-spacing:.02em; font-size:18px; display:flex; align-items:center; gap:10px; }
.marke span { font-size:12px; background:var(--band); color:#101b33; padding:2px 8px; border-radius:3px; font-weight:700; letter-spacing:0; }
.wer { font-size:14px; color:var(--leise); display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.wer strong { color:var(--tinte); }
h1 { font-size:clamp(1.7rem, 4.5vw, 2.6rem); line-height:1.1; letter-spacing:-.02em; margin:12px 0 8px; }
h2 { font-size:20px; margin:0 0 12px; letter-spacing:-.01em; }
p.leise, .leise { color:var(--leise); }
.karte { background:var(--flaeche); border:1px solid var(--linie); border-radius:10px; padding:20px; margin:16px 0; }
label.feld { display:block; font-weight:600; font-size:14px; margin:0 0 6px; }
label.feld small { font-weight:400; color:var(--leise); }
input[type=email], input[type=text], input[type=month], select, textarea {
  display:block; width:100%; font:inherit; color:var(--tinte); background:var(--papier); border:1px solid var(--linie); border-radius:6px; padding:10px 12px; }
.knopf { display:inline-block; background:var(--tinte); color:var(--papier); font:inherit; font-weight:700; text-decoration:none; border:0; border-radius:6px; padding:11px 18px; cursor:pointer; }
.knopf.gelb { background:var(--band); color:#101b33; }
.knopf.zweit { background:transparent; color:var(--tinte); border:1px solid var(--linie); font-weight:600; }
.knopf.klein { padding:6px 12px; font-size:14px; }
.knopf[disabled] { opacity:.5; cursor:not-allowed; }
button.link { background:none; border:0; padding:0; font:inherit; color:var(--leise); text-decoration:underline; cursor:pointer; }
.meldung { margin:12px 0 0; padding:10px 12px; border-radius:6px; background:var(--zart); }
.meldung.fehler { background:transparent; border-left:4px solid var(--fehler); color:var(--fehler); }
.meldung:empty { display:none; }
footer { margin-top:32px; font-size:13px; color:var(--leise); }