:root{--bg:#f3f6fa;--card:#fff;--ink:#1c2733;--mut:#5b6b7b;--pri:#1d4ed8;--pri2:#1e40af;--line:#d5dde6;--ok:#0f766e;--warn:#92400e;--warnbg:#fef3c7;--err:#b91c1c;--errbg:#fee2e2}
@media(prefers-color-scheme:dark){:root:not([data-l]){--bg:#0f1720;--card:#18222e;--ink:#e6edf4;--mut:#9fb0c1;--pri:#6ea0ff;--pri2:#9bbcff;--line:#2b3a4a;--ok:#5eead4;--warn:#fcd34d;--warnbg:#3b2f10;--err:#fca5a5;--errbg:#3b1616}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.wrap{max-width:860px;margin:0 auto;padding:0 16px}
header{background:var(--card);border-bottom:1px solid var(--line)}
.bar{display:flex;justify-content:space-between;align-items:center;height:56px}
.logo{font-weight:700;color:var(--pri);text-decoration:none}
nav a{margin-left:16px;color:var(--ink);text-decoration:none}
a{color:var(--pri)}
h1{font-size:clamp(1.7rem,5vw,2.4rem);line-height:1.2;margin:24px 0 8px}
h2{font-size:1.3rem;margin:28px 0 10px}.card h2{margin-top:0}
.intro{color:var(--mut);margin:0 0 20px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px;margin:0 0 24px;box-shadow:0 2px 10px rgba(20,40,70,.06)}
fieldset{border:0;margin:0 0 14px;padding:0;min-width:0}
legend{font-weight:600;padding:0;margin-bottom:6px}
.modes{display:flex;flex-wrap:wrap;gap:8px}.modes legend{width:100%}
.modes label{border:1px solid var(--line);border-radius:999px;padding:6px 14px;cursor:pointer}
.modes label:has(:checked){background:var(--pri);color:#fff;border-color:var(--pri)}
.grid{display:grid;gap:14px;grid-template-columns:1fr;margin-bottom:14px}
.grid4{display:grid;gap:14px;grid-template-columns:1fr 1fr}
@media(min-width:640px){.grid{grid-template-columns:1fr 1fr}.grid4{grid-template-columns:repeat(4,1fr)}}
.f{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px}
.f label{font-size:.9rem;font-weight:600}
.f[hidden]{display:none}
input,select{width:100%;font:inherit;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink);min-height:44px}
:focus-visible{outline:3px solid var(--pri);outline-offset:2px}
.i{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--line);color:var(--ink);font:700 .7rem/1 system-ui;cursor:help;position:relative}
.i:hover::after,.i:focus::after{content:attr(data-tip);position:absolute;z-index:9;left:0;top:24px;width:230px;max-width:70vw;background:#1c2733;color:#fff;font:400 .8rem/1.4 system-ui;padding:8px 10px;border-radius:8px;box-shadow:0 4px 14px rgba(0,0,0,.3)}
.f:nth-child(even) .i:hover::after,.f:nth-child(even) .i:focus::after{left:auto;right:-20px}
.hint{color:var(--mut);font-size:.85rem;margin:0 0 8px}
.warn,.err{border-radius:8px;padding:10px 12px;margin:10px 0}
.warn{background:var(--warnbg);color:var(--warn)}.err{background:var(--errbg);color:var(--err)}
.err ul{margin:0;padding-left:18px}
.zs{margin-bottom:14px}.zs summary{cursor:pointer;font-weight:600;margin-bottom:10px}
.btns{display:flex;gap:10px;flex-wrap:wrap}
button{font:inherit;cursor:pointer;border-radius:10px;padding:12px 18px;min-height:44px;border:1px solid var(--line);background:var(--card);color:var(--ink)}
.primary{background:var(--pri);color:#fff;border-color:var(--pri);flex:1 1 100%;font-weight:700}
.primary:hover{background:var(--pri2)}
.sec{flex:0 0 auto}
.hero{display:grid;gap:12px;grid-template-columns:1fr;margin-bottom:16px}
@media(min-width:640px){.hero{grid-template-columns:1fr 1fr}}
.tile{background:var(--bg);border-radius:12px;padding:16px;border:1px solid var(--line)}
.tile.alt{border-color:var(--ok)}
.tile span{display:block;color:var(--mut);font-size:.9rem}
.tile b{display:block;font-size:clamp(1.8rem,7vw,2.5rem);line-height:1.2;color:var(--pri)}
.tile.alt b{color:var(--ok)}
.tile small{color:var(--mut)}
.det{list-style:none;padding:0;margin:0 0 14px}
.det li{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line)}
.det li.tot{font-weight:700}
.bars{margin:14px 0}.bar-row{display:flex;align-items:center;gap:10px;margin:6px 0;font-size:.9rem}
.bar-row>span{width:52px}.bar-track{flex:1;background:var(--bg);border-radius:6px;height:22px;overflow:hidden}
.bar-fill{height:100%;background:var(--pri);color:#fff;font-size:.8rem;padding:2px 8px;white-space:nowrap}
.bar-fill.n{background:var(--ok)}
.extra{color:var(--mut);font-size:.92rem;margin:4px 0}
.act{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.act button{padding:8px 14px}
.disc{font-size:.82rem;color:var(--mut);margin:10px 0 0}
.cmp{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:640px){.cmp{grid-template-columns:1fr 1fr}}
.hist{list-style:none;padding:0;margin:0}.hist li{margin:4px 0}.hist button{width:100%;text-align:left;font-size:.9rem;padding:8px 12px}
details{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:2px 14px;margin:8px 0}
#faq summary{cursor:pointer;font-weight:600;padding:12px 0}
#faq details p{margin:0 0 12px}
.rel{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:640px){.rel{grid-template-columns:repeat(3,1fr)}}
.rel a{display:block;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px;text-decoration:none;color:var(--ink)}
.rel a:hover{border-color:var(--pri)}.rel span{display:block;color:var(--mut);font-size:.88rem}
footer{background:var(--card);border-top:1px solid var(--line);margin-top:32px;padding:20px 0;font-size:.9rem;color:var(--mut)}
.trust{font-weight:600;color:var(--ink)}
@media print{
.noprint,.act,#histbox{display:none!important}
body{background:#fff;color:#000;font-size:12pt}
.card{border:0;box-shadow:none;padding:0}
.tile{border:1px solid #999;background:#fff}.tile b{color:#000}
.bar-fill,.bar-fill.n{background:#555!important;color:#fff;-webkit-print-color-adjust:exact;print-color-adjust:exact}
h1::after{content:" – Ergebnis"}
}