@font-face { font-family:"Geist"; src:url("/demo/fonts/geist-latin-wght-normal.woff2") format("woff2"); font-weight:100 900; font-style:normal; font-display:swap; }
:root {
  --bg:#f3f3f1; --surface:#fff; --grau:#ebebe8; --line:#e2e2de; --line-strong:#cfcfc9;
  --text:#0e0e0e; --muted:#66665e; --error:#d63a2f; --ok:#3d7a12;
  --gruen:#b9f27c; --gruen-soft:#eafbd9; --gruen-dunkel:#3d7a12;
  --schatten:0 1px 2px rgba(0,0,0,.04); --schatten-hoch:0 16px 40px rgba(0,0,0,.08);
}
* { box-sizing:border-box; margin:0; padding:0; }
html { background:var(--bg); }
body { background:var(--bg); color:var(--text); font-family:"Geist",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif; font-weight:400; font-size:16px; line-height:1.55; min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:32px 16px; -webkit-font-smoothing:antialiased; }
a { color:var(--text); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--line-strong); }
a:hover { text-decoration-color:var(--text); }
.logo { display:inline-flex; align-items:center; gap:9px; font-size:22px; font-weight:800; letter-spacing:-0.04em; text-decoration:none; margin-bottom:28px; }
.logo::before { content:""; width:24px; height:24px; border-radius:7px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='9' cy='10' r='1.5' fill='%230e0e0e'/%3E%3Ccircle cx='15' cy='10' r='1.5' fill='%230e0e0e'/%3E%3Cpath d='M8.2 14.2c2 2 5.6 2 7.6 0' fill='none' stroke='%230e0e0e' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat, var(--gruen); border:2px solid var(--text); }
.card { width:100%; max-width:420px; background:var(--surface); border-radius:28px; padding:40px 36px; box-shadow:var(--schatten); }
h1 { font-size:30px; font-weight:800; letter-spacing:-0.045em; line-height:1.1; }
.sub { color:var(--muted); margin-top:6px; font-size:15px; }
form { margin-top:28px; display:flex; flex-direction:column; gap:18px; }
label { display:flex; flex-direction:column; gap:8px; font-size:14px; font-weight:600; color:var(--text); }
label[hidden] { display:none; }
input, select { height:50px; padding:0 16px; border-radius:14px; border:1px solid var(--line); background:var(--surface); color:var(--text); font:inherit; font-size:16px; font-weight:400; transition:border-color .15s, box-shadow .15s; }
input:focus, select:focus { outline:none; border-color:var(--text); box-shadow:0 0 0 4px rgba(185,242,124,.45); }
input[type="checkbox"] { width:18px; height:18px; accent-color:var(--text); }
button { height:50px; border:0; border-radius:14px; background:var(--text); color:#fff; font:inherit; font-size:16px; font-weight:700; cursor:pointer; margin-top:6px; transition:transform .15s, box-shadow .15s, opacity .15s; }
button:hover { box-shadow:0 10px 24px rgba(0,0,0,.14); transform:translateY(-1px); }
button:active { transform:none; }
button:disabled { opacity:.45; cursor:default; transform:none; box-shadow:none; }
.btn-ghost { background:var(--surface); border:1px solid var(--line); color:var(--text); }
.btn-ghost:hover { box-shadow:none; border-color:var(--text); }
.msg { font-size:14px; }
.msg:empty { display:none; }
.msg.error { color:var(--error); }
.msg.ok { color:var(--ok); }
.foot { margin-top:22px; font-size:15px; color:var(--muted); text-align:center; }
/* Rechtliche Links als Fußzeile: bei kurzen Seiten unten am Fenster, Logo + Karte bleiben in der Mitte des Rests */
body:has(> .recht) > .logo, body:has(> .recht) > .kopf { margin-top:auto; }
/* Seitenrahmen für Barrierefreiheit (Landmarks): Kopf mit Logo, Hauptteil mit Karte, Fußzeile mit den rechtlichen Links */
.kopf { display:flex; justify-content:center; }
.haupt { width:100%; display:flex; flex-direction:column; align-items:center; }
.recht { margin-top:auto; padding-top:28px; display:flex; flex-wrap:wrap; justify-content:center; gap:4px 16px; font-size:13px; }
.recht a { color:var(--muted); text-decoration:none; }
.recht a:hover { color:var(--text); }
.zustimmung { flex-direction:row; align-items:flex-start; gap:10px; font-size:14px; font-weight:400; line-height:1.5; color:var(--muted); }
.zustimmung input { flex:none; height:18px; margin-top:2px; }
strong { font-weight:700; color:var(--text); }
textarea { width:100%; padding:14px 16px; border-radius:14px; border:1px solid var(--line); background:var(--surface); color:var(--text); font:inherit; font-size:15px; line-height:1.5; resize:vertical; transition:border-color .15s, box-shadow .15s; }
textarea:focus { outline:none; border-color:var(--text); box-shadow:0 0 0 4px rgba(185,242,124,.45); }