:root { --bg:#f4f6f8; --fg:#14212b; --muted:#56656f; --accent:#1c58c9; --line:#d5dbe0; }
@media (prefers-color-scheme: dark) { :root { --bg:#0e1418; --fg:#dbe4ea; --muted:#8b9ba6; --accent:#7ba6ff; --line:#26323b; } }
* { box-sizing: border-box; }
body { margin:0; min-height:100vh; display:flex; flex-direction:column; background:var(--bg); color:var(--fg);
       font-family: system-ui, "Segoe UI", Roboto, Arial, sans-serif; line-height:1.55; }
main { flex:1; width:100%; max-width:720px; margin:0 auto; padding:48px 24px; }
main.center { display:grid; place-items:center; max-width:none; }
.inner { max-width:560px; }
.tag { display:inline-block; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); font-weight:600; }
h1 { font-size:clamp(26px, 5vw, 36px); line-height:1.15; margin:8px 0 12px; }
h2 { font-size:18px; margin:28px 0 6px; }
p, li { color:var(--muted); margin:0 0 10px; }
strong { color:var(--fg); }
a { color:var(--accent); }
.line { height:3px; width:64px; background:var(--accent); border-radius:2px; margin:20px 0; }
footer { border-top:1px solid var(--line); padding:16px 24px; font-size:13px; color:var(--muted); display:flex; flex-wrap:wrap; gap:6px 20px; justify-content:center; }
footer a { color:var(--muted); }

/* ---------- Formulare und Bereiche ---------- */
header.top { border-bottom:1px solid var(--line); padding:14px 24px; display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
header.top .brand { font-weight:700; color:var(--fg); text-decoration:none; margin-right:auto; }
header.top a { color:var(--muted); text-decoration:none; font-size:14px; }
header.top a:hover { color:var(--fg); }
main.narrow { max-width:440px; }
main.wide { max-width:1100px; }
.card { background:color-mix(in srgb, var(--bg) 70%, #fff 30%); border:1px solid var(--line); border-radius:10px; padding:20px; margin:16px 0; }
@media (prefers-color-scheme: dark) { .card { background:color-mix(in srgb, var(--bg) 85%, #fff 15%); } }
label { display:block; font-size:14px; color:var(--fg); margin:12px 0 4px; font-weight:500; }
input[type=text], input[type=email], input[type=password], input[type=number], select, textarea {
  width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--fg); font:inherit; }
input:focus, select:focus, button:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
.check { display:flex; gap:8px; align-items:flex-start; font-weight:400; color:var(--muted); }
.check input { margin-top:4px; }
.row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.seg { display:flex; gap:8px; margin-top:4px; }
.seg label { margin:0; flex:1; border:1px solid var(--line); border-radius:8px; padding:10px; text-align:center; cursor:pointer; font-weight:500; }
.seg input { display:none; }
.seg input:checked + span { color:var(--accent); }
.seg label:has(input:checked) { border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); }
button { font:inherit; font-weight:600; border:1px solid var(--accent); background:var(--accent); color:#fff; padding:10px 16px; border-radius:8px; cursor:pointer; }
button.ghost { background:transparent; color:var(--accent); }
button.small { padding:6px 10px; font-size:13px; }
button:disabled { opacity:.5; cursor:default; }
.msg { margin:12px 0 0; padding:10px 12px; border-radius:8px; font-size:14px; display:none; }
.msg.err { display:block; background:color-mix(in srgb, #c2342c 14%, transparent); color:#c2342c; }
.msg.ok { display:block; background:color-mix(in srgb, #1d7f46 14%, transparent); color:#1d7f46; }
@media (prefers-color-scheme: dark) { .msg.err { color:#ff8a80; } .msg.ok { color:#6fd39a; } }
.hint { font-size:13px; color:var(--muted); }
.mono { font-family: ui-monospace, Consolas, monospace; letter-spacing:.05em; }
.codes { display:grid; grid-template-columns:repeat(2, 1fr); gap:6px 16px; font-family:ui-monospace, Consolas, monospace; font-size:15px; }
.pill { display:inline-block; font-size:12px; padding:2px 8px; border-radius:20px; border:1px solid var(--line); color:var(--muted); }
.pill.on { border-color:#1d7f46; color:#1d7f46; }
.tbl-wrap { overflow-x:auto; }
table { border-collapse:collapse; width:100%; font-size:14px; }
th, td { text-align:left; padding:8px; border-bottom:1px solid var(--line); vertical-align:middle; }
th { color:var(--muted); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.04em; }
td.c, th.c { text-align:center; }
.tabs { display:flex; gap:6px; border-bottom:1px solid var(--line); margin:12px 0 0; }
.tabs button { background:none; border:none; color:var(--muted); border-bottom:2px solid transparent; border-radius:0; padding:10px 12px; }
.tabs button[aria-selected=true] { color:var(--fg); border-bottom-color:var(--accent); }
[hidden] { display:none !important; }