:root{
  --bg:#0b0c10;--text:#e8eef3;--muted:#a9b3bd;
  --card:#14161b;--card-border:#222;--card-border-hover:#2a2f3a;
  --accent:#4e8cff;--accent2:#ffd166;
  --aufgabe-bg:#23304a;--aufgabe-border:#2e3a56;
  --box-einstieg-bg:#1e2a44;--box-erarbeitung-bg:#121a28;--box-zusammenfassung-bg:#162033;
  --page-1-bg:#162033;--page-2-bg:#121a28;--page-3-bg:#1e2a44;
  --num-bg:#1d2331;--num-fg:#9fb1c7;
  --badge-bg:#222;--badge-ok-bg:#123018;--badge-ok-fg:#bfe8c7;
  --btn-secondary-bg:#2a2f3a;
}
:root[data-theme="light"]{
  --bg:#f7f9fc;--text:#0a0f1a;--muted:#556274;
  --card:#ffffff;--card-border:#dfe3ea;--card-border-hover:#c9d1e0;
  --accent:#1e66f5;--accent2:#e08800;
  --aufgabe-bg:#f7fbff;--aufgabe-border:#cfd9ea;
  --box-einstieg-bg:#e9f2ff;--box-erarbeitung-bg:#f5faff;--box-zusammenfassung-bg:#fff3e6;
  --page-1-bg:#f0f4ff;--page-2-bg:#eef7ff;--page-3-bg:#fff7ec;
  --num-bg:#e8eef7;--num-fg:#334155;
  --badge-bg:#eef2f7;--badge-ok-bg:#dff3e4;--badge-ok-fg:#176236;
  --btn-secondary-bg:#e9eef7;
}
:root[data-theme="test1"]{
  --bg:#001b63;--text:#ffffff;--muted:#b9d7ff;
  --card:#003399;--card-border:#76b7ff;--card-border-hover:#ffffff;
  --accent:#fff36b;--accent2:#ff8bd8;
  --aufgabe-bg:#0047b3;--aufgabe-border:#8fd3ff;
  --box-einstieg-bg:#003f9e;--box-erarbeitung-bg:#002b7a;--box-zusammenfassung-bg:#0050ad;
  --page-1-bg:#002776;--page-2-bg:#00358e;--page-3-bg:#00439f;
  --num-bg:#00194f;--num-fg:#ffffff;
  --badge-bg:#00194f;--badge-ok-bg:#fff36b;--badge-ok-fg:#001b63;
  --btn-secondary-bg:#0054bd;
}
:root[data-theme="test2"]{
  --bg:#071d12;--text:#e7f7e9;--muted:#9bc5a3;
  --card:#102f1d;--card-border:#285b38;--card-border-hover:#56a66c;
  --accent:#79dc8f;--accent2:#d5e86d;
  --aufgabe-bg:#173f27;--aufgabe-border:#3f7950;
  --box-einstieg-bg:#153a24;--box-erarbeitung-bg:#0d2919;--box-zusammenfassung-bg:#21492c;
  --page-1-bg:#102f1d;--page-2-bg:#133823;--page-3-bg:#193f27;
  --num-bg:#21492c;--num-fg:#bfe8c7;
  --badge-bg:#1a4228;--badge-ok-bg:#315f3d;--badge-ok-fg:#dff7e4;
  --btn-secondary-bg:#285b38;
}
:root[data-theme="test3"]{
  --bg:#f3eee4;--text:#2f352e;--muted:#6d7569;
  --card:#fffdf8;--card-border:#d8d0c1;--card-border-hover:#9cae91;
  --accent:#52735b;--accent2:#b86449;
  --aufgabe-bg:#edf2e8;--aufgabe-border:#bdcbb4;
  --box-einstieg-bg:#e8efe3;--box-erarbeitung-bg:#f8f3e9;--box-zusammenfassung-bg:#f4e5dc;
  --page-1-bg:#f9f5ec;--page-2-bg:#eef3e9;--page-3-bg:#f5eae2;
  --num-bg:#dde6d7;--num-fg:#3f5945;
  --badge-bg:#ece5d8;--badge-ok-bg:#dce9d6;--badge-ok-fg:#36543e;
  --btn-secondary-bg:#e4ddd0;
}
*{box-sizing:border-box}
body{margin:0;font:16px/1.5 system-ui,Segoe UI,Roboto,Arial,sans-serif;color:var(--text);background:var(--bg)}
header,footer{padding:1rem 1.25rem}
header{position:sticky;top:0;background:var(--card);border-bottom:1px solid var(--card-border)}
main{padding:1rem}
.grid{display:grid;grid-template-columns:280px 1fr;gap:1rem}
.card{background:var(--card);border:1px solid var(--card-border);border-radius:10px;padding:1rem}
a{color:var(--accent)}a:hover{opacity:.9}
.btn{background:var(--accent);color:#001;border:none;border-radius:8px;padding:.5rem .75rem;cursor:pointer;font-weight:600}
.btn.secondary{background:var(--btn-secondary-bg);color:var(--text)}
.list{list-style:none;margin:0;padding:0}
.list li{padding:.25rem 0}
.badge{display:inline-block;padding:.15rem .5rem;border-radius:6px;background:var(--badge-bg);color:var(--muted);font-size:.8rem}
.badge.ok{background:var(--badge-ok-bg);color:var(--badge-ok-fg)}
.page{padding:.9rem;border-radius:12px;margin:1.25rem 0;border:1px solid var(--card-border)}
.page:nth-of-type(3n+1){background:var(--page-1-bg)}
.page:nth-of-type(3n+2){background:var(--page-2-bg)}
.page:nth-of-type(3n){background:var(--page-3-bg)}
.block{margin:.75rem 0}
.block h4{margin:.25rem 0}
.block.theorie{}
.block.aufgaben{padding-bottom:.5rem}
.block.einstieg-first{background:var(--box-einstieg-bg);border:1px solid var(--card-border);border-radius:12px;padding:.6rem .85rem}
.block.erarbeitung-first{background:var(--box-erarbeitung-bg);border:1px solid var(--card-border);border-radius:12px;padding:.6rem .85rem}
.block.zusammenfassung-first{background:var(--box-zusammenfassung-bg);border:1px solid var(--card-border);border-radius:12px;padding:.6rem .85rem}
.aufgaben-list{display:flex;flex-direction:column;gap:.75rem;margin:.75rem 0}
.aufgabe{background:var(--aufgabe-bg);border:1px solid var(--aufgabe-border);border-radius:12px;padding:.6rem .85rem}
.aufgabe-title{font-weight:700;margin-bottom:.35rem}
.aufgabe-body{line-height:1.6}
.muted{color:var(--muted)}
.flags img{height:100px;width:100px;margin-right:8px;vertical-align:middle}
.video, .media{margin:.5rem 0}
.video iframe{max-width:100%;border:0;border-radius:8px}
.chapter-nav{position:fixed;z-index:1000;left:0;right:0;bottom:0;display:grid;grid-template-columns:1fr minmax(0,2fr) 1fr;align-items:center;padding:.45rem 1rem;background:var(--card);border-top:1px solid var(--card-border);box-shadow:0 -4px 14px rgba(0,0,0,.18)}
.chapter-nav-left{display:flex;align-items:center;gap:12px}
.chapter-nav img{display:block;width:59px;height:auto;border:0}
.chapter-nav .up-arrow{transform:rotate(90deg)}
.chapter-nav .disabled{opacity:.25;filter:grayscale(1)}
.chapter-path{min-width:0;padding:0 .75rem;color:var(--muted);font-size:.78rem;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chapter-nav-next{justify-self:end}
body:has(.chapter-nav) main{padding-bottom:76px}
:root[data-theme="test1"] body{font-family:"Courier New","Lucida Console",monospace;letter-spacing:.025em;text-shadow:1px 1px 0 #00113f;background-image:linear-gradient(rgba(255,255,255,.025) 50%,transparent 50%);background-size:100% 4px}
:root[data-theme="test1"] header,:root[data-theme="test1"] .card,:root[data-theme="test1"] .page,:root[data-theme="test1"] .block,:root[data-theme="test1"] .aufgabe,:root[data-theme="test1"] .chap-card,:root[data-theme="test1"] .code,:root[data-theme="test1"] .chapter-nav{border-radius:0;box-shadow:4px 4px 0 #00113f}
:root[data-theme="test1"] header h1,:root[data-theme="test1"] h2,:root[data-theme="test1"] h3,:root[data-theme="test1"] h4{text-transform:uppercase;letter-spacing:.08em}
:root[data-theme="test1"] .btn,:root[data-theme="test1"] input,:root[data-theme="test1"] select{border-radius:0;font-family:inherit}
:root[data-theme="test1"] .btn{border:2px outset #b9d7ff}
:root[data-theme="test2"] body{background-image:radial-gradient(circle at top right,rgba(74,145,91,.16),transparent 35%)}
:root[data-theme="test2"] header,:root[data-theme="test2"] .chapter-nav{background-image:linear-gradient(90deg,#102f1d,#173f27)}
:root[data-theme="test3"] body{font-family:Georgia,"Times New Roman",serif;background-image:radial-gradient(circle at 12% 8%,rgba(154,174,139,.16),transparent 28%),radial-gradient(circle at 90% 28%,rgba(184,100,73,.09),transparent 24%)}
:root[data-theme="test3"] header,:root[data-theme="test3"] .chapter-nav{background:rgba(255,253,248,.96);backdrop-filter:blur(8px)}
:root[data-theme="test3"] .card,:root[data-theme="test3"] .page,:root[data-theme="test3"] .aufgabe,:root[data-theme="test3"] .chap-card,:root[data-theme="test3"] .code{border-radius:18px;box-shadow:0 5px 18px rgba(63,71,58,.07)}
:root[data-theme="test3"] h1,:root[data-theme="test3"] h2,:root[data-theme="test3"] h3,:root[data-theme="test3"] h4{font-weight:600;letter-spacing:.01em}
:root[data-theme="test3"] .btn{color:#fffdf8}
.chap-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.chap-card{display:block;padding:.75rem;border:1px solid var(--card-border);border-radius:10px;background:var(--card);text-decoration:none;color:var(--text)}
.chap-card:hover{border-color:var(--card-border-hover)}
.chap-card .num{display:inline-block;width:2.2rem;text-align:center;margin-right:.5rem;border-radius:6px;background:var(--num-bg);color:var(--num-fg)}
.chap-card .title{font-weight:600}
/* Code blocks: proportional font, keep line breaks */
.code{background:var(--card);border:1px solid var(--card-border);border-radius:10px;padding:.6rem .85rem;margin:.6rem 0}
.code-lang{color:var(--muted);font-size:.85rem;margin-bottom:.35rem}
.code-content{white-space:pre-wrap;font-family:inherit;line-height:1.5}
@media (max-width: 920px){.grid{grid-template-columns:1fr}}