:root{--bg:#f6f7f9;--card:#fff;--tx:#1b2430;--mut:#5b6675;--br:#d9dee6;--ac:#1f3a5f;--gr:#2e8b57;--ge:#c58a00;--ro:#c0392b;--bar:#5b8ab8}
@media (prefers-color-scheme:dark){:root{--bg:#14181e;--card:#1c222b;--tx:#e6e9ee;--mut:#9aa5b4;--br:#2e3744;--ac:#8fb3dd;--bar:#4f7ba8}}
*{box-sizing:border-box}
body{margin:0;font:16px/1.55 system-ui,Segoe UI,sans-serif;background:var(--bg);color:var(--tx)}
header{background:var(--card);border-bottom:1px solid var(--br);padding:12px 16px}
nav{max-width:1000px;margin:auto;display:flex;gap:18px;flex-wrap:wrap;align-items:center}
nav b{margin-right:auto}
a{color:var(--ac)}
main{max-width:1000px;margin:auto;padding:20px 16px 60px}
.card{background:var(--card);border:1px solid var(--br);border-radius:10px;padding:16px 18px;margin:0 0 16px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
h1{font-size:1.6rem;margin:.2em 0 .6em}
table{border-collapse:collapse;width:100%;margin:.6em 0;font-size:.95rem}
th,td{border:1px solid var(--br);padding:6px 8px;text-align:left;vertical-align:top}
th{background:rgba(127,127,127,.12)}
.num td:not(:first-child),.num th:not(:first-child){text-align:right}
.hinweis{border-left:4px solid var(--ge);background:rgba(197,138,0,.1);padding:10px 14px;border-radius:6px;font-size:.92rem}
.form{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
label{display:block;font-size:.85rem;color:var(--mut)}
input,select{width:100%;padding:7px 8px;border:1px solid var(--br);border-radius:6px;background:var(--bg);color:var(--tx);font:inherit}
button{padding:9px 16px;border:0;border-radius:6px;background:var(--ac);color:var(--bg);font:inherit;cursor:pointer}
.kpi{display:flex;gap:12px;flex-wrap:wrap;margin:10px 0}
.kpi div{flex:1 1 150px;border:1px solid var(--br);border-radius:8px;padding:10px 12px}
.kpi span{display:block;font-size:.8rem;color:var(--mut)}
.kpi b{font-size:1.35rem}
.ampel{padding:3px 10px;border-radius:12px;color:#fff;font-size:.85rem}
.ampel.gruen{background:var(--gr)}.ampel.gelb{background:var(--ge)}.ampel.rot{background:var(--ro)}
svg{width:100%;height:auto}
.bar{fill:var(--bar)}.tick{font-size:10px;fill:var(--mut);text-anchor:middle}.lab{font-size:11px;fill:var(--tx)}
.l-ann{stroke:var(--ro);stroke-width:2;stroke-dasharray:5 3}.l-str{stroke:var(--ge);stroke-width:2;stroke-dasharray:2 3}
details{border:1px solid var(--br);border-radius:8px;padding:8px 12px;margin:8px 0;background:var(--card)}
summary{cursor:pointer;font-weight:600}
.modul h2{margin-top:1.4em;border-bottom:1px solid var(--br);padding-bottom:4px}

/* Anmeldung und Fortschritt */
nav .rechts{margin-left:auto;display:flex;gap:12px;align-items:center}
form.inline{display:inline;margin:0}
button.link{background:none;border:0;padding:0;color:var(--ac);text-decoration:underline;cursor:pointer;font:inherit}
.card.schmal{max-width:420px;margin:40px auto}
.card.schmal label{display:block}
.fehler{border-left:4px solid var(--ro);background:rgba(192,57,43,.1);padding:8px 12px;border-radius:6px}
.ok{color:var(--gr);font-size:.85rem}
p.ok{border-left:4px solid var(--gr);background:rgba(46,139,87,.1);padding:8px 12px;border-radius:6px;font-size:1rem}
.bar-bg{background:var(--br);border-radius:6px;height:12px;overflow:hidden}
.bar-fg{background:var(--gr);height:100%}

/* Themen, Untermenü, Karteikarten */
nav.sub{margin-top:8px;padding-top:8px;border-top:1px solid var(--br);font-size:.92rem;gap:14px}
.balken{display:flex;align-items:center;gap:10px}.balken .bar-bg{flex:1}
blockquote.zitat{margin:0;font-size:1.15rem;line-height:1.6;border-left:4px solid var(--ac);padding:6px 14px}
.autor{color:var(--mut);font-size:.95rem;margin-top:6px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
.chips button,.wahl button{background:var(--bg);color:var(--tx);border:1px solid var(--br)}
.chips button.an{background:var(--ac);color:var(--bg)}
.wahl{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px;margin:12px 0}
.wahl button{text-align:left}
.wahl button.richtig{background:var(--gr);color:#fff;border-color:var(--gr)}
.wahl button.falsch{background:var(--ro);color:#fff;border-color:var(--ro)}
.karte{min-height:180px}
.leise{color:var(--mut);font-size:.9rem}
ul.liste{padding-left:0;list-style:none}ul.liste li{padding:6px 0;border-bottom:1px solid var(--br)}
.marke{display:inline-block;font-size:.75rem;padding:1px 8px;border-radius:10px;border:1px solid var(--br);color:var(--mut);margin-left:6px}
.zeile{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
input[type=checkbox]{width:auto}
[hidden]{display:none!important}