:root { color-scheme: light dark; --bg: light-dark(#faf8f4, #0c1322); --bg-2: light-dark(#ffffff, #121b2f);
  --bg-3: light-dark(#f1ede6, #1a2540); --ink: light-dark(#1d1a15, #f4ecda); --ink-dim: light-dark(#5f584c, #c9bfa8);
  --line: color-mix(in srgb, var(--ink) 12%, transparent); --accent: #4f46e5; --accent-2: #6366f1;
  --accent-text: light-dark(#4338ca, #a5b4fc); }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.5 system-ui, sans-serif; padding: 24px 16px; }
.karte { max-width: 560px; margin: 0 auto; background: var(--bg-2); border: 1px solid var(--line); border-radius: 18px; padding: 24px; }
.kicker { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); margin: 0; }
h1 { font-size: 36px; letter-spacing: -.02em; margin: 4px 0 8px; }
h2 { font-size: 24px; margin: 24px 0 8px; }
.neben { color: var(--ink-dim); font-size: 15px; }
a { color: var(--accent-text); }
form { display: grid; gap: 12px; margin-top: 16px; }
label { display: grid; gap: 4px; font-size: 15px; color: var(--ink-dim); }
input, select { font: inherit; color: var(--ink); background: var(--bg-3); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.btn { font: inherit; display: inline-block; background: var(--accent); color: #fff; border: 0; border-radius: 999px; padding: 10px 18px; cursor: pointer; text-decoration: none; }
.btn:hover { background: var(--accent-2); }
.btn--ghost { background: var(--bg-3); color: var(--ink); }
.btn--ghost:hover { background: var(--line); }
.meldung { min-height: 1.5em; }
.meldung.fehler { color: light-dark(#b42318, #f97066); }
pre { background: var(--bg-3); border-radius: 10px; padding: 12px; overflow-x: auto; font-size: 13px; }
.zeile { display: flex; gap: 8px; flex-wrap: wrap; }