:root{
  --bg:#f6f7f9;--card:#fff;--ink:#1a1a1a;--muted:#5b6170;--line:#d9dde3;
  --notfall:#C62828;--notfall-bg:#FDECEA;--warn:#E65100;--warn-bg:#FFF0E0;
  --frage:#1565C0;--frage-bg:#E3F0FB;--refer:#6A1B9A;--refer-bg:#F3E8F7;
  --scope:#2E7D32;--scope-bg:#E8F5E9;--dx:#616161;--dx-bg:#F1F1F1;--accent:#1565C0;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#14161a;--card:#1d2026;--ink:#eceef1;--muted:#a3a9b5;--line:#343a44;
  --notfall-bg:#3a1c1c;--warn-bg:#3a2714;--frage-bg:#16283d;--refer-bg:#2c1a36;--scope-bg:#16301a;
  --notfall:#ff8a80;--warn:#ffb74d;--frage:#90caf9;--refer:#ce93d8;--scope:#81c784;--dx:#bdbdbd;--dx-bg:#2a2a2a;--accent:#90caf9;}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.wrap{max-width:1080px;margin:0 auto;padding:0 16px}
.top{background:var(--card);border-bottom:1px solid var(--line);padding:18px 0 0}
h1{margin:0;font-size:1.5rem}
h2{font-size:1.15rem;margin:0 0 .6rem}
.sub{margin:.2rem 0 .8rem;color:var(--muted)}
.tabs{display:flex;gap:4px;flex-wrap:wrap}
.tabs button{border:0;background:none;padding:.6rem 1rem;font:inherit;color:var(--muted);border-bottom:3px solid transparent;cursor:pointer}
.tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent);font-weight:600}
main{padding:20px 16px 40px}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:18px}
.split{display:grid;grid-template-columns:300px 1fr;gap:16px}
@media (max-width:760px){.split{grid-template-columns:1fr}}
.list{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:8px;max-height:75vh;overflow:auto}
.list h3{font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin:.8rem .4rem .3rem}
.list button{display:flex;gap:.5rem;width:100%;text-align:left;border:0;background:none;padding:.45rem .5rem;border-radius:6px;font:inherit;color:var(--ink);cursor:pointer}
.list button:hover,.list button.on{background:var(--frage-bg)}
.list .nr{min-width:1.8rem;font-weight:700;color:var(--muted)}
.list .done::after{content:"✓";margin-left:auto;color:var(--scope)}
.pane{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:18px;min-height:300px}
.hint{color:var(--muted)}
.node{border:2px solid var(--frage);background:var(--frage-bg);border-radius:10px;padding:14px 16px;margin:12px 0}
.node .tag{font-size:.75rem;font-weight:700;letter-spacing:.05em}
.node.notfall{border-color:var(--notfall);background:var(--notfall-bg)}.node.notfall .tag{color:var(--notfall)}
.node.warn{border-color:var(--warn);background:var(--warn-bg)}.node.warn .tag{color:var(--warn)}
.node.frage .tag{color:var(--frage)}
.node.refer{border-color:var(--refer);background:var(--refer-bg)}.node.refer .tag{color:var(--refer)}
.node.scope{border-color:var(--scope);background:var(--scope-bg)}.node.scope .tag{color:var(--scope)}
.node.dx{border-color:var(--dx);background:var(--dx-bg)}.node.dx .tag{color:var(--dx)}
.opts{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
button.opt,.gate button,#gateForm button,.ghost,.primary{font:inherit;padding:.55rem .9rem;border-radius:8px;border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer}
button.opt:hover{border-color:var(--accent)}
.primary,#gateForm button{background:var(--accent);border-color:var(--accent);color:#fff}
@media (prefers-color-scheme:dark){.primary,#gateForm button{color:#111}}
.trail{font-size:.85rem;color:var(--muted);margin:.4rem 0}
.trail span+span::before{content:" › "}
.meta{font-size:.85rem;color:var(--muted)}
.parts dt{font-weight:700;margin-top:.7rem}.parts dd{margin:.2rem 0 0}
.subtabs{display:flex;gap:6px;margin:.6rem 0}
.subtabs button{font:inherit;padding:.35rem .7rem;border-radius:20px;border:1px solid var(--line);background:none;color:var(--ink);cursor:pointer}
.subtabs button.on{background:var(--frage-bg);border-color:var(--frage)}
.step{margin:1rem 0}
.choice{display:block;width:100%;text-align:left;margin:6px 0}
.choice.right{border-color:var(--scope);background:var(--scope-bg)}
.choice.wrong{border-color:var(--notfall);background:var(--notfall-bg)}
.fb{border-radius:8px;padding:10px 12px;margin-top:10px;background:var(--frage-bg)}
.score{display:flex;gap:16px;flex-wrap:wrap;color:var(--muted);font-size:.9rem}
.legend{list-style:none;padding:0}.legend li{margin:.35rem 0;display:flex;gap:.6rem;align-items:center}
.sw{display:inline-block;width:18px;height:18px;border-radius:4px;border:2px solid}
.sw.notfall{background:var(--notfall-bg);border-color:var(--notfall)}.sw.warn{background:var(--warn-bg);border-color:var(--warn)}
.sw.frage{background:var(--frage-bg);border-color:var(--frage)}.sw.refer{background:var(--refer-bg);border-color:var(--refer)}
.sw.scope{background:var(--scope-bg);border-color:var(--scope)}.sw.dx{background:var(--dx-bg);border-color:var(--dx)}
#gateForm{display:flex;gap:8px;flex-wrap:wrap}#gateForm input{font:inherit;padding:.55rem;border:1px solid var(--line);border-radius:8px;min-width:220px;background:var(--card);color:var(--ink)}
.msg{color:var(--notfall)}
.foot{color:var(--muted);font-size:.8rem;padding-bottom:30px}