html{scroll-padding-top:env(safe-area-inset-top,0px)}body{margin:0;padding:0;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}img{max-width:100%}[hidden]{display:none!important}
/* Layout: one study column on graph paper; Heute = daily round + test readiness; Themen = topics with learning goals; Üben = pick topic + mode. */
:root{
  --paper:#f5f7fc; --surface:#ffffff; --ink:#18203b; --muted:#5a6383; --line:#d8deec;
  --grid:rgba(36,64,196,.065); --blue:#2440c4; --blue-soft:#e6eafb; --marker:#ffe45c; --marker-ink:#18203b;
  --ok:#1d7f47; --ok-soft:#e1f3e8; --bad:#b8332c; --bad-soft:#fae5e3; --warn:#a86400;
  --display:"Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --body:"Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --r:14px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --paper:#0e1222; --surface:#161b30; --ink:#e7eaf6; --muted:#9aa2c2; --line:#2a3152;
  --grid:rgba(142,162,255,.06); --blue:#8ea2ff; --blue-soft:#232b52; --marker:#e8cc33; --marker-ink:#141a2e;
  --ok:#5fd18f; --ok-soft:#173326; --bad:#ff8a80; --bad-soft:#3a1d1f; --warn:#f0b35a; color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#0e1222; --surface:#161b30; --ink:#e7eaf6; --muted:#9aa2c2; --line:#2a3152;
  --grid:rgba(142,162,255,.06); --blue:#8ea2ff; --blue-soft:#232b52; --marker:#e8cc33; --marker-ink:#141a2e;
  --ok:#5fd18f; --ok-soft:#173326; --bad:#ff8a80; --bad-soft:#3a1d1f; --warn:#f0b35a; color-scheme:dark}

*{box-sizing:border-box}
body{background-color:var(--paper);color:var(--ink);font:16px/1.55 var(--body);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:22px 22px}
.wrap{max-width:720px;margin:0 auto;padding-inline:16px;padding-block:20px 72px;display:flex;flex-direction:column;gap:18px}
h1,h2,h3{font-family:var(--display);text-wrap:balance;margin:0;line-height:1.15}
h1{font-size:clamp(1.9rem,6vw,2.5rem);font-weight:800;letter-spacing:-.02em}
h2{font-size:1.3rem;font-weight:800}
h3{font-size:1.05rem;font-weight:700}
p{margin:0}
.hl{background:linear-gradient(transparent 55%,var(--marker) 55%,var(--marker) 92%,transparent 92%);padding-inline:2px}
.muted{color:var(--muted)} .small{font-size:.875rem}
.label{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700}
header{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap}
.sync{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;color:var(--muted)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--muted)} .dot.on{background:var(--ok)}

nav{display:flex;gap:4px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:4px;position:sticky;top:env(safe-area-inset-top,0px);z-index:5}
nav button{flex:1;border:0;background:transparent;color:var(--muted);font:700 .95rem var(--body);padding:10px 6px;border-radius:999px;cursor:pointer}
nav button[aria-selected="true"]{background:var(--blue);color:var(--surface)}
section.view{display:flex;flex-direction:column;gap:16px}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;display:flex;flex-direction:column;gap:12px;min-width:0}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.stack{display:flex;flex-direction:column;gap:10px;min-width:0}

.btn{font:700 .95rem var(--body);border-radius:10px;padding:11px 16px;cursor:pointer;border:1px solid var(--blue);background:var(--blue);color:var(--surface);text-align:center}
.btn.ghost{background:transparent;color:var(--blue)}
.btn.quiet{background:transparent;color:var(--muted);border-color:var(--line)}
.btn.help{background:var(--marker);border-color:var(--marker);color:var(--marker-ink)}
.btn.big{font-size:1.05rem;padding:14px 20px}
.btn:disabled{opacity:.45;cursor:not-allowed}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,label:focus-visible{outline:3px solid var(--marker);outline-offset:2px}
input[type=text],select,textarea{width:100%;font:16px var(--body);color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
textarea{min-height:150px;resize:vertical;line-height:1.5}
.field{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1 1 200px}

/* hero */
.hero{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center}
@media (max-width:440px){.hero{grid-template-columns:1fr;justify-items:start}}
.ring{width:118px;height:118px;position:relative}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring .num{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--display);font-weight:800;font-size:1.7rem;line-height:1;font-variant-numeric:tabular-nums}
.ring .num small{font:700 .7rem var(--body);color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-top:4px}

/* topics */
.topic{display:flex;flex-direction:column;gap:10px;padding-block:14px;border-top:1px solid var(--line)}
.topic:first-child{border-top:0;padding-top:0}
.topic .title{font-weight:700;font-size:1.05rem;overflow-wrap:anywhere}
.tag{display:inline-block;font-size:.75rem;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--blue-soft);color:var(--blue)}
.tag.new{background:var(--marker);color:var(--marker-ink)}
.tag.ex{background:transparent;border:1px dashed var(--muted);color:var(--muted)}
.bar{height:8px;background:var(--line);border-radius:4px;overflow:hidden;flex:1;min-width:80px}
.bar i{display:block;height:100%;background:var(--blue);border-radius:4px}
.pct{font-variant-numeric:tabular-nums;font-weight:700;min-width:4ch;text-align:right}
.goals{display:flex;flex-direction:column;gap:4px;margin:0;padding:0;list-style:none}
.goals li{display:flex;gap:8px;align-items:center;font-size:.9rem}
.goals .g{width:10px;height:10px;border-radius:50%;border:2px solid var(--muted);flex:none}
.goals .g.half{border-color:var(--blue);background:linear-gradient(90deg,var(--blue) 50%,transparent 50%)}
.goals .g.full{border-color:var(--ok);background:var(--ok)}
.subjrow{display:grid;grid-template-columns:minmax(90px,140px) 1fr auto;gap:10px;align-items:center}
.notechip{font-family:var(--display);font-weight:800;font-variant-numeric:tabular-nums}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:999px;padding:7px 12px;font:600 .9rem var(--body);cursor:pointer;max-width:100%;overflow-wrap:anywhere;text-align:left}
.chip[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:var(--surface)}
.modes{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.mode{border:1px solid var(--line);background:var(--paper);border-radius:12px;padding:12px;text-align:left;cursor:pointer;color:var(--ink);font:inherit;display:flex;flex-direction:column;gap:2px}
.mode b{font-family:var(--display);font-size:1.05rem}
.mode span{font-size:.85rem;color:var(--muted)}
.mode[aria-pressed="true"]{border-color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue);background:var(--blue-soft)}

/* player */
.sesstop{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.progress{display:flex;gap:3px}
.progress i{flex:1;height:6px;border-radius:3px;background:var(--line)}
.progress i.ok{background:var(--ok)} .progress i.bad{background:var(--bad)} .progress i.cur{background:var(--blue)}
.kind{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--blue)}
.question{font-size:1.15rem;font-weight:700;line-height:1.45;overflow-wrap:anywhere}
.opts{display:flex;flex-direction:column;gap:8px}
.opt{text-align:left;border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:10px;padding:12px 14px;font:16px var(--body);cursor:pointer;display:flex;gap:10px;align-items:flex-start}
.opt .k{font-weight:700;color:var(--muted)}
.opt.right{border-color:var(--ok);background:var(--ok-soft)}
.opt.wrong{border-color:var(--bad);background:var(--bad-soft)}
.opt.picked{border-color:var(--blue);background:var(--blue-soft)}
.opt:disabled{cursor:default}
.tf{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.match{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.match .col{display:flex;flex-direction:column;gap:8px;min-width:0}
.match .opt{font-size:.95rem;overflow-wrap:anywhere}
.match .opt.done{border-color:var(--ok);background:var(--ok-soft);opacity:.8}
.feedback{border-left:4px solid var(--blue);padding:10px 12px;background:var(--blue-soft);border-radius:0 8px 8px 0;overflow-wrap:anywhere}
.feedback.ok{border-color:var(--ok);background:var(--ok-soft)}
.feedback.bad{border-color:var(--bad);background:var(--bad-soft)}
.card{min-height:190px;border:1px solid var(--line);border-radius:var(--r);background:var(--paper);display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;cursor:pointer;font:700 1.15rem var(--body);overflow-wrap:anywhere;width:100%;color:var(--ink)}
.card.back{background:var(--blue-soft);font-weight:400}
.explainbox{border:2px dashed var(--marker);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:10px}
.prose{display:flex;flex-direction:column;gap:8px;overflow-wrap:anywhere}
.prose h4{font-family:var(--display);font-size:1.02rem;margin:6px 0 0}
.prose ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:4px}
.result{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.bignote{font-family:var(--display);font-weight:800;font-size:4.2rem;line-height:1;color:var(--blue)}
.review{display:flex;flex-direction:column;gap:6px;padding-block:10px;border-top:1px solid var(--line)}
.loading{display:flex;align-items:center;gap:10px;color:var(--muted)}
.spin{width:18px;height:18px;border:3px solid var(--line);border-top-color:var(--blue);border-radius:50%;animation:sp .8s linear infinite;flex:none}
@keyframes sp{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation:none}}
.err{color:var(--bad);font-weight:700}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(16px + env(safe-area-inset-bottom,0px));background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:10px;font-weight:700;z-index:20;max-width:calc(100% - 32px)}
.timer{font-variant-numeric:tabular-nums;font-weight:700;color:var(--muted)}