:root{
  --bg:#faf9f7; --card:#fff; --ink:#1c1b19; --mut:#6b6862; --line:#e3e0da;
  --accent:#7a5c2e; --accent-soft:#f3ede1; --focus:#8a3324; --focus-soft:#f7e9e6;
  --ok:#3d6b4a; --ok-soft:#e8f0ea; --warm:#a8762a; --warm-soft:#f6eddc;
  --bio:#35704e; --psy:#6d4593; --ew:#9a6216; --spa:#ad4028; --fach:var(--accent);
  --move:200ms; --shift:8px; --pad:clamp(16px,4vw,28px);
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#15140f; --card:#1e1d18; --ink:#eceae4; --mut:#a09c93; --line:#33312a;
    --accent:#d4b483; --accent-soft:#2a2519; --focus:#e0917f; --focus-soft:#31211d;
    --ok:#8fbf9f; --ok-soft:#1e2a21; --warm:#dfa94e; --warm-soft:#2b2317;
    --bio:#74b58c; --psy:#b799dd; --ew:#d8a45a; --spa:#e08d6d; }
}
@media (prefers-reduced-motion: reduce){ :root{ --move:0ms; --shift:0px } }
[data-fach="bio"]{--fach:var(--bio)} [data-fach="psy"]{--fach:var(--psy)}
[data-fach="ew"]{--fach:var(--ew)} [data-fach="spa"]{--fach:var(--spa)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; overscroll-behavior-y:contain}
body{margin:0;background:var(--bg);color:var(--ink);
  font:400 clamp(16.5px,0.95rem + 0.3vw,18px)/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  padding:0 env(safe-area-inset-right) calc(env(safe-area-inset-bottom) + 40px) env(safe-area-inset-left);
  -webkit-font-smoothing:antialiased}
.wrap{max-width:640px;margin:0 auto;padding:0 var(--pad)}

.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:6px;
  min-height:calc(56px + env(safe-area-inset-top));margin:0 calc(-1 * var(--pad)) 6px;
  padding:env(safe-area-inset-top) var(--pad) 0;background:var(--bg);
  transition:box-shadow .2s ease}
.top.scrolled{box-shadow:0 1px 0 var(--line), 0 6px 16px -10px rgba(0,0,0,.22)}
.top .fach{font:inherit;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--mut);background:none;border:0;padding:8px 10px 8px 0;min-height:44px;cursor:default;
  text-align:left;-webkit-tap-highlight-color:transparent}
.top .fach.link{cursor:pointer;color:var(--fach)}
.top .fach.link:active{opacity:.6}
.top .spacer{flex:1}
.top .me{font-size:12.5px;font-weight:600;color:var(--accent);background:var(--accent-soft);
  padding:5px 11px;border-radius:999px;display:inline-flex;align-items:center;gap:6px;line-height:1}
.top .me::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none}
.top button.quiet{font:inherit;font-size:14px;background:none;border:none;color:var(--mut);
  padding:10px 8px;min-height:44px;min-width:44px;cursor:pointer;touch-action:manipulation}
.top button.quiet:hover{color:var(--ink)}

.dots{display:flex;gap:6px;align-items:center;height:22px;margin-bottom:22px}
.dot{width:7px;height:7px;border-radius:50%;background:var(--line);flex:none;
  transition:background var(--move) ease-out, transform var(--move) ease-out}
.dot.done{background:var(--fach)} .dot.now{background:var(--fach);transform:scale(1.7)}
.dots .lbl{margin-left:auto;font-size:12.5px;color:var(--mut);font-variant-numeric:tabular-nums}

.view{animation:in var(--move) ease-out both}
@keyframes in{from{opacity:0;transform:translateY(var(--shift))}to{opacity:1;transform:none}}

.kicker{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--fach);font-weight:600;margin-bottom:10px}
h1{font-size:clamp(25px,1.35rem + 1.1vw,32px);line-height:1.2;letter-spacing:-.02em;margin:0 0 12px}
h2.q{font-size:clamp(21px,1.15rem + .8vw,26px);line-height:1.3;letter-spacing:-.015em;margin:0 0 18px;max-width:24ch}
p{margin:0 0 14px;max-width:68ch}
.lead{color:var(--mut);font-size:16px}

.btn{display:block;width:100%;font:inherit;font-weight:600;font-size:17px;min-height:52px;
  padding:14px 18px;border-radius:13px;cursor:pointer;border:1px solid transparent;
  background:var(--ink);color:var(--bg);touch-action:manipulation;text-align:center;
  transition:transform 120ms ease-out}
.btn:active{transform:scale(.985)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent)}
.btnrow{display:grid;gap:9px;margin-top:6px}

.rate{font-weight:600;font-size:16px;min-height:56px;border-radius:13px;border:1px solid var(--line);
  background:var(--card);color:var(--ink);display:flex;flex-direction:column;justify-content:center;
  gap:3px;padding:11px 16px;cursor:pointer;touch-action:manipulation;text-align:left;font-family:inherit}
.rate small{font-weight:400;font-size:13px;color:var(--mut)}
.rate:active{transform:scale(.985)}
.rate.a:hover{border-color:var(--ok)} .rate.a small{color:var(--ok)}
.rate.b:hover{border-color:var(--warm)} .rate.b small{color:var(--warm)}
.rate.c:hover{border-color:var(--focus)} .rate.c small{color:var(--focus)}

.panel{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 20px;margin:0 0 16px}
.panel.soft{background:var(--accent-soft);border-color:transparent}
.panel h3{margin:0 0 8px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.panel ul{margin:0;padding-left:20px} .panel li{margin:6px 0}
.reveal{animation:in 260ms ease-out both}

/* Nachlesen */
.look{display:flex;align-items:center;gap:9px;font:inherit;font-size:15px;font-weight:600;
  background:none;border:none;color:var(--accent);cursor:pointer;padding:12px 0;min-height:44px;
  touch-action:manipulation;text-align:left;width:100%}
.look .tx{display:flex;flex-direction:column;gap:1px;min-width:0}
.look .tx em{font-style:normal;font-weight:400;font-size:13px;color:var(--mut);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.look:hover .tx b{text-decoration:underline}
.look .ic{width:20px;height:20px;border-radius:5px;background:var(--accent-soft);display:flex;
  align-items:center;justify-content:center;font-size:11px;flex:none}
.src{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:0 13px 13px 0;padding:16px 19px;margin:6px 0 16px;animation:in 240ms ease-out both}
.src .from{font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--mut);margin-bottom:9px}
.src p{font-size:15.5px;margin-bottom:10px}
.src figure{margin:14px 0 6px;padding:0}
.src svg{display:block;width:100%;height:auto;font-family:inherit}
.src figcaption{font-size:13px;color:var(--mut);margin-top:8px;line-height:1.5}
.srcfoot{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:12px;
  padding-top:12px;border-top:1px solid var(--line)}
.srcfoot a{font-size:14px;color:var(--accent);text-decoration:none;font-weight:600;
  min-height:44px;display:inline-flex;align-items:center}
.srcfoot a:hover{text-decoration:underline}
.srcfoot .back{margin-left:auto;font-size:13.5px;color:var(--mut)}

.hint{font-size:14.5px;color:var(--mut);margin-top:14px} .hint b{color:var(--ink);font-weight:600}

.timer{font-variant-numeric:tabular-nums;font-size:clamp(46px,2.4rem + 3vw,64px);font-weight:600;
  letter-spacing:-.03em;line-height:1;margin:6px 0 4px}
.timer.low{color:var(--focus)}
.bar{height:5px;background:var(--line);border-radius:3px;overflow:hidden;margin:14px 0 22px}
.bar i{display:block;height:100%;background:var(--accent);width:100%;transform-origin:left;
  transition:transform 1s linear}
.check{display:flex;gap:11px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--line);
  cursor:pointer;min-height:44px;touch-action:manipulation}
.check:last-child{border-bottom:none}
.check .bx{flex:none;width:22px;height:22px;border-radius:6px;border:1.5px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-size:13px;color:transparent;margin-top:1px;
  transition:background var(--move) ease-out,border-color var(--move) ease-out}
.check.on .bx{background:var(--ok);border-color:var(--ok);color:#fff}
.check span{font-size:15.5px} .check.on span{color:var(--mut)}

.receipt{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:13px;
  overflow:hidden;margin:18px 0}
.receipt div{background:var(--card);padding:13px 16px;display:flex;gap:14px;align-items:baseline}
.receipt .n{font-variant-numeric:tabular-nums;font-weight:600;font-size:19px;min-width:2ch}
.receipt .t{font-size:15px;color:var(--mut)}
.state{width:100%;font:inherit;font-size:13.5px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:11px;
  padding:12px 14px;min-height:88px;resize:vertical;line-height:1.5}
.tage{display:flex;align-items:baseline;gap:10px;margin:0 0 6px}
.tage b{font-size:34px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.tage span{color:var(--mut);font-size:15px}
.joker{display:inline-flex;gap:5px;margin-left:auto}
.joker i{width:9px;height:9px;border-radius:2px;background:var(--warm);display:block}
.joker i.used{background:var(--line)}

/* Abdeckung */
.cov{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:13px;
  overflow:hidden;margin:16px 0}
.cov div{background:var(--card);padding:11px 15px;display:flex;gap:12px;align-items:center;font-size:15px}
.cov .st{width:9px;height:9px;border-radius:50%;flex:none}
.cov .st.f{background:var(--ok)} .cov .st.m{background:var(--warm)} .cov .st.n{background:var(--focus)}
.cov .when{margin-left:auto;font-size:13px;color:var(--mut);text-align:right}

footer{margin-top:34px;padding-top:16px;border-top:1px solid var(--line);font-size:13px;color:var(--mut)}
.nojs{padding:16px;border:1px dashed var(--line);border-radius:12px;color:var(--mut);font-size:15px}

/* Ergänzungen der App gegenüber dem Prototyp */
.cov{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:13px;
  overflow:hidden;margin:16px 0}
.cov div{background:var(--card);padding:11px 15px;display:flex;gap:12px;align-items:center;font-size:15px}
.cov .st{width:9px;height:9px;border-radius:50%;flex:none}
.cov .st.f{background:var(--ok)} .cov .st.m{background:var(--warm)} .cov .st.n{background:var(--focus)}
.cov .when{margin-left:auto;font-size:13px;color:var(--mut);text-align:right;white-space:nowrap}
.faecher{display:grid;gap:9px;margin:18px 0}
.faecher button{font:inherit;text-align:left;background:var(--card);border:1px solid var(--line);
  border-radius:13px;padding:14px 17px;min-height:56px;cursor:pointer;color:var(--ink);
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;touch-action:manipulation}
.faecher button:hover{border-color:var(--accent)}
.faecher .fdot{width:10px;height:10px;border-radius:50%;flex:none}
.ifcode{font-size:11.5px;font-weight:700;letter-spacing:.02em;color:var(--fach);line-height:1.55;
  background:var(--accent-soft);background:color-mix(in srgb, var(--fach) 13%, transparent);
  padding:2px 8px;border-radius:6px;flex:none}

/* Landkarte auf der Übersicht */
[data-fachblock="bio"]{--fach:var(--bio)} [data-fachblock="psy"]{--fach:var(--psy)}
[data-fachblock="ew"]{--fach:var(--ew)} [data-fachblock="spa"]{--fach:var(--spa)}
.fachblock{margin:0 0 20px}
.fachzeile{width:100%;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;text-align:left;
  background:none;border:0;padding:6px 2px 10px;cursor:pointer;touch-action:manipulation;color:var(--fach)}
.fachzeile b{font-size:18px;font-weight:600;min-width:0}
.fachzeile em{font-style:normal;font-size:13px;color:var(--mut);font-weight:400;margin-left:auto}
.fachzeile:hover b{text-decoration:underline}
.ifliste{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.ifzeile{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:var(--card);border:0;
  padding:12px 15px;min-height:50px;cursor:pointer;color:var(--ink);touch-action:manipulation;font:inherit}
.ifzeile:active{background:var(--accent-soft)}
.ifzeile .st{width:8px;height:8px;border-radius:50%;flex:none;background:var(--line)}
.ifzeile.n .st{background:var(--focus)} .ifzeile.m .st{background:var(--warm)} .ifzeile.f .st{background:var(--ok)}
.ifzeile .ifname{font-size:14.5px;min-width:0;flex:1}
.resume{display:flex;flex-direction:column;gap:1px;width:100%;text-align:left;background:var(--accent-soft);
  border:0;border-radius:14px;padding:13px 18px;margin:0 0 20px;cursor:pointer;color:var(--ink);touch-action:manipulation}
.resume .rk{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);font-weight:700}
.resume b{font-size:16px;font-weight:600;margin-top:2px}
.resume em{font-style:normal;font-size:13px;color:var(--mut)}
.resume:active{opacity:.85}
.top #home{font-size:17px;line-height:1}

/* Fach-/Inhaltsfeld-Titel & Nachlese-Akkordeon */
.fachtitel{color:var(--fach)}
.mehr{font-size:15px;color:var(--fach);text-decoration:none;font-weight:600;min-height:44px;display:inline-flex;align-items:center}
.mehr:hover{text-decoration:underline}
.bausteine{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:13px;overflow:hidden;margin:6px 0 16px}
.bst{background:var(--card)}
.bsthead{width:100%;font:inherit;font-weight:600;font-size:15.5px;text-align:left;background:none;border:0;
  color:var(--ink);padding:14px 16px;min-height:54px;display:flex;align-items:center;gap:12px;
  cursor:pointer;touch-action:manipulation}
.bsthead span:first-child{flex:1}
.bsthead .chev{color:var(--fach);font-size:14px;flex:none;transition:transform var(--move) ease}
.bst.on .bsthead{color:var(--fach)}
.bst.on .chev{transform:rotate(180deg)}
.bstbody{padding:0 16px 16px;font-size:15.5px;line-height:1.62;color:var(--mut)}
.bstbody p{margin:0 0 10px;max-width:none}
.bstbody svg{display:block;width:100%;height:auto;margin-top:6px}
.bstbody figure{margin:12px 0 0;padding:0}
.bstbody figcaption{font-size:13px;color:var(--mut);margin-top:6px;line-height:1.5}
.faecher button:active{background:var(--accent-soft)}
.bsthead:active{background:var(--accent-soft)}
.faecher b{font-size:16.5px;min-width:0} .faecher em{font-style:normal;font-size:13.5px;color:var(--mut);margin-left:auto}
.warnbox{background:var(--focus-soft);border-radius:12px;padding:15px 18px;margin:16px 0;font-size:15px}
.sync{font-size:12.5px;color:var(--mut);display:inline-flex;align-items:center;gap:6px}
.sync i{width:7px;height:7px;border-radius:50%;background:var(--ok);display:block}
.sync i.off{background:var(--warm)}