/* Paukheft – Layout: one narrow column like an exercise book; faint Karo grid on the page, mint margin line on lesson cards,
   red pen only for the grade. Palette: Tinte (navy), Mint (progress, correct), Rotstift (grade, errors), Countdown (tests). */
@font-face{font-family:"Archivo Wide";src:url(fonts/archivo-wide-800.woff) format("woff");font-weight:800;font-display:swap}
@font-face{font-family:"Figtree";src:url(fonts/figtree-400.woff) format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"Figtree";src:url(fonts/figtree-600.woff) format("woff");font-weight:600;font-display:swap}
@font-face{font-family:"Figtree";src:url(fonts/figtree-700.woff) format("woff");font-weight:700;font-display:swap}
@font-face{font-family:"Caveat";src:url(fonts/caveat-700.woff) format("woff");font-weight:700;font-display:swap}
:root{
  --bg:#f3f5f4; --surface:#ffffff; --grid:#e4e9e7; --line:#dce2e0;
  --ink:#0f1f3a; --muted:#566275; --accent:#0f1f3a; --accent-ink:#ffffff; --accent-soft:#e3e8f1;
  --mint:#3fd6a0; --mint-ink:#0f1f3a; --track:#e4e9e7; --hero:#0f1f3a; --hero-ink:#ffffff; --hero-muted:#a9b7cc; --hero-track:#24405f;
  --red:#c23a2d; --red-soft:#fce6e3; --pen:#e5483a; --green:#1f8f6a; --green-soft:#dff7ee; --amber:#b4471a; --amber-soft:#ffe9de;
  --countdown:#ff7a3d; --margin:#3fd6a0;
  --f-display:"Archivo Wide","Archivo","Avenir Next",system-ui,sans-serif;
  --f-body:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-hand:"Caveat","Bradley Hand","Segoe Print",cursive;
  --r:16px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root{
  --bg:#0b1424; --surface:#13213a; --grid:#1a2a45; --line:#263958;
  --ink:#e6edf5; --muted:#9aabc2; --accent:#3fd6a0; --accent-ink:#0b1424; --accent-soft:#173a3a;
  --mint:#3fd6a0; --mint-ink:#0b1424; --track:#263958; --hero:#1a2c4b; --hero-ink:#ffffff; --hero-muted:#a9b7cc; --hero-track:#2c4a6e;
  --red:#ff8a7c; --red-soft:#3a1e1f; --pen:#ff6f5f; --green:#55e0ae; --green-soft:#123326; --amber:#ffab7f; --amber-soft:#3a2516;
  --countdown:#ff8a52; --margin:#3fd6a0; color-scheme:dark}}
*{box-sizing:border-box}
html,body{margin:0;background-color:var(--bg);color:var(--ink)}
body{background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:24px 24px;background-attachment:fixed}
body{font-family:var(--f-body);font-size:16px;line-height:1.45;-webkit-text-size-adjust:100%;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
[hidden]{display:none!important}
#app{max-width:600px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:14px 56px;display:grid;gap:16px}
h1,h2,h3{font-family:var(--f-display);margin:0;text-wrap:balance;line-height:1.1;font-weight:800;letter-spacing:-.015em}
h1{font-size:26px} h2{font-size:22px} h3{font-size:18px}
p{margin:0}
a{color:var(--accent)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
button,select,input{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

.top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand h1{font-size:24px}
.brand svg{width:40px;height:40px;flex:none}
.who{color:var(--muted);font-size:14px}
.seg{display:flex;background:var(--grid);border-radius:12px;padding:4px;gap:4px;flex-wrap:wrap}
.seg button{flex:1 1 auto;border:0;background:transparent;padding:8px 12px;border-radius:9px;font-weight:700;color:var(--muted);cursor:pointer;min-height:42px}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgb(0 0 0 / .12)}
.tabs{display:flex;gap:8px;flex-wrap:wrap}
.tab{border:1.5px solid var(--line);background:var(--surface);border-radius:999px;padding:8px 14px;font-weight:700;cursor:pointer;display:inline-flex;gap:8px;align-items:center;min-height:42px}
.tab .count{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.tab[aria-pressed="true"]{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.tab[aria-pressed="true"] .count{color:inherit;opacity:.75}
.banner{background:var(--accent-soft);color:var(--ink);border-radius:12px;padding:10px 14px;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}

.card{background:var(--surface);border:0;box-shadow:0 1px 0 var(--line),0 1px 3px rgb(15 31 58 / .04);border-radius:var(--r);padding:16px;display:grid;gap:14px;min-width:0}
.eyebrow{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700}
.meta{color:var(--muted);font-size:14px}
.lesson-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.lesson-head h2{margin-top:2px}
.pill{font-weight:700;font-size:14px;padding:6px 10px;border-radius:999px;white-space:nowrap;font-variant-numeric:tabular-nums}
.g-good{background:var(--green-soft);color:var(--green)}
.g-mid{background:var(--amber-soft);color:var(--amber)}
.g-bad{background:var(--red-soft);color:var(--red)}
.g-none{background:var(--grid);color:var(--muted)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0}
.stats div{background:var(--bg);border-radius:10px;padding:8px 10px;min-width:0}
.stats dt{font-size:12px;color:var(--muted)}
.stats dd{margin:0;font-weight:700;font-size:17px;font-variant-numeric:tabular-nums}
.bars{display:flex;align-items:flex-end;gap:5px;height:40px;padding-top:4px;border-bottom:1px solid var(--line)}
.bars span{flex:1;max-width:28px;border-radius:4px 4px 0 0;min-height:4px}
.bars span.g-good{background:var(--green)} .bars span.g-mid{background:var(--amber)} .bars span.g-bad{background:var(--red)}
.bars-label{display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}
.row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.row label{font-size:15px}
select,input[type=date],input[type=time]{border:1.5px solid var(--line);background:var(--surface);border-radius:10px;padding:8px 10px;min-height:42px}
.actions{display:flex;gap:8px;flex-wrap:wrap}
.btn{border:1.5px solid var(--line);background:var(--surface);border-radius:12px;padding:11px 16px;font-weight:700;cursor:pointer;min-height:48px;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-align:center;text-decoration:none;color:var(--ink)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.ghost{border-color:transparent;background:transparent;color:var(--accent)}
.btn.danger{color:var(--red);border-color:var(--red-soft)}
.btn.wide{flex:1 1 170px}
.btn.small{min-height:40px;padding:8px 12px;font-size:15px}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn svg{width:18px;height:18px;flex:none}
.linkbtn{border:0;background:none;color:var(--muted);font-size:14px;text-decoration:underline;cursor:pointer;padding:6px 0;min-height:32px}
.linkbtn.danger{color:var(--red)}
.hint{font-size:14px;color:var(--muted)}
.chip-hard{font-size:14px;color:var(--amber);font-weight:700}
.more{border-top:1px solid var(--line);padding-top:10px;display:flex;gap:4px 16px;flex-wrap:wrap}

.paper{position:relative;background-color:var(--surface);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:18px 18px;background-position:-1px -1px;padding-left:46px}
.paper::before{content:"";position:absolute;top:0;bottom:0;left:30px;width:2px;background:var(--margin)}
.add{border-style:dashed}
.add-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}

.back{border:0;background:none;display:inline-flex;align-items:center;gap:6px;color:var(--accent);font-weight:700;cursor:pointer;padding:8px 0;min-height:40px;justify-self:start}
.back svg{width:18px;height:18px}
.section-title{font-family:var(--f-display);font-weight:700;font-size:17px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1.5px solid var(--line);background:var(--surface);border-radius:999px;padding:9px 14px;font-weight:700;cursor:pointer;min-height:44px;display:inline-flex;align-items:center;gap:8px}
.chip small{font-weight:400;color:var(--muted)}
.chip[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.chip[aria-pressed="true"] small{color:var(--accent)}
.chip .box{width:18px;height:18px;border-radius:5px;border:2px solid currentColor;display:grid;place-items:center;flex:none}
.chip[aria-pressed="true"] .box{background:var(--accent);border-color:var(--accent)}
.chip[aria-pressed="true"] .box::after{content:"";width:8px;height:5px;border-left:2px solid var(--accent-ink);border-bottom:2px solid var(--accent-ink);transform:translateY(-1px) rotate(-45deg)}

.quiz-top{display:flex;align-items:center;gap:12px}
.icon-btn{border:1.5px solid var(--line);background:var(--surface);width:44px;height:44px;border-radius:12px;display:grid;place-items:center;cursor:pointer;flex:none;color:var(--ink)}
.icon-btn svg{width:18px;height:18px}
.progress{flex:1;height:10px;background:var(--grid);border-radius:999px;overflow:hidden}
.progress div{height:100%;background:var(--accent);border-radius:999px;transition:width .25s}
.num{font-variant-numeric:tabular-nums;font-weight:700;color:var(--muted);font-size:14px}
.qcard{min-height:170px;padding-block:18px;padding-right:16px;display:grid;align-content:center;gap:10px}
.prompt{font-family:var(--f-display);font-weight:800;font-size:clamp(24px,7vw,34px);line-height:1.15;text-wrap:balance;overflow-wrap:anywhere}
.speak{justify-self:start;border:1.5px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 12px;font-size:14px;font-weight:700;cursor:pointer;display:inline-flex;gap:6px;align-items:center}
.speak svg{width:16px;height:16px}
.answer{width:100%;font-size:20px;padding:14px;border:2px solid var(--line);border-radius:12px;background:var(--surface)}
.answer:focus{outline:none;border-color:var(--accent)}
.answer.s-ok{border-color:var(--green)} .answer.s-half{border-color:var(--amber)} .answer.s-bad{border-color:var(--red);text-decoration:line-through;text-decoration-color:var(--red)}
.keys{display:flex;flex-wrap:wrap;gap:6px}
.keys button{min-width:42px;height:42px;border:1.5px solid var(--line);background:var(--surface);border-radius:10px;font-size:18px;cursor:pointer}
.fb{border-radius:12px;padding:12px 14px;display:grid;gap:4px}
.fb strong{font-family:var(--f-display);font-size:20px;display:flex;gap:8px;align-items:center}
.fb strong svg{width:20px;height:20px}
.fb.ok{background:var(--green-soft);color:var(--green)}
.fb.half{background:var(--amber-soft);color:var(--amber)}
.fb.bad{background:var(--red-soft);color:var(--red)}
.fb .sol{color:var(--ink)}

.res-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.mark{position:relative;width:118px;height:92px;flex:none;color:var(--red);display:grid;place-items:center}
.mark svg{position:absolute;inset:0;width:100%;height:100%}
.mark{color:var(--pen)}
.mark span{font-family:var(--f-hand);font-size:56px;font-weight:700;line-height:1;transform:rotate(-6deg);position:relative}
.rows{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.r{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:start;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.r .dot{width:10px;height:10px;border-radius:50%;margin-top:7px}
.r-ok .dot{background:var(--green)} .r-half .dot{background:var(--amber)} .r-bad .dot{background:var(--red)}
.r div{min-width:0;overflow-wrap:anywhere}
.r .q{font-weight:700}
.r .you{font-size:15px}
.r-ok .you{color:var(--green)} .r-half .you{color:var(--amber)} .r-bad .you{color:var(--red);text-decoration:line-through}
.r .sol{font-size:15px;color:var(--green)}
.tag{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:3px 8px;border-radius:999px}
.r-ok .tag{background:var(--green-soft);color:var(--green)} .r-half .tag{background:var(--amber-soft);color:var(--amber)} .r-bad .tag{background:var(--red-soft);color:var(--red)}

.field{display:grid;gap:6px}
.field>label,.field>.label{font-weight:700;font-size:14px}
.field input,.field select{border:1.5px solid var(--line);background:var(--surface);border-radius:10px;padding:10px 12px;min-height:46px;width:100%}
.check{display:flex;gap:10px;align-items:center;font-weight:600;min-height:40px}
.check input{width:22px;height:22px;accent-color:var(--accent)}
.filebtn{position:relative;overflow:hidden}
.filebtn input{position:absolute;inset:0;opacity:0;cursor:pointer;font-size:0}
.thumbs{display:flex;gap:8px;flex-wrap:wrap}
.thumbs img{width:64px;height:84px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
.spinner{width:28px;height:28px;border-radius:50%;border:3px solid var(--grid);border-top-color:var(--accent);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.pg{display:grid;gap:8px}
.pg-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pg-head input[type=number]{width:90px;border:1.5px solid var(--line);background:var(--surface);border-radius:10px;padding:8px;min-height:42px}
.pg-head label{display:flex;gap:8px;align-items:center;font-weight:700}
.wr{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1fr) auto;gap:6px;align-items:center}
.wr input[type=text]{min-width:0;width:100%;border:1.5px solid var(--line);background:var(--surface);border-radius:8px;padding:9px 8px;font-size:16px}
.wr.off input[type=text]{opacity:.45}
.wr input[type=checkbox],.pg-head input[type=checkbox]{width:22px;height:22px;accent-color:var(--accent)}
.colhead{display:grid;grid-template-columns:22px minmax(0,1fr) minmax(0,1fr) 32px;gap:6px;font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.x{border:0;background:none;color:var(--muted);cursor:pointer;width:32px;height:32px;display:grid;place-items:center}
.x svg{width:16px;height:16px}
.savebar{position:sticky;bottom:0;padding-block:12px calc(12px + env(safe-area-inset-bottom,0px));background:var(--bg);display:flex;gap:8px;flex-wrap:wrap;align-items:center;z-index:2}
.note{background:var(--amber-soft);color:var(--ink);border-radius:12px;padding:12px 14px;font-size:15px}
.err{background:var(--red-soft);color:var(--red);border-radius:12px;padding:12px 14px;font-size:15px;font-weight:600}
.okbox{background:var(--green-soft);color:var(--green);border-radius:12px;padding:12px 14px;font-size:15px;font-weight:600}
.foot{font-size:13px;color:var(--muted);display:flex;gap:6px 14px;flex-wrap:wrap}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--surface);padding:12px 18px;border-radius:12px;font-weight:700;max-width:min(92vw,480px);z-index:20;box-shadow:0 6px 20px rgb(0 0 0 / .25)}

.hero{display:grid;gap:10px;padding-block:18px 6px}
.hero h1{font-size:34px}
.choice{display:grid;gap:10px}
.choice .btn{justify-content:flex-start;min-height:64px;font-size:18px;padding-inline:18px}
.choice .btn small{display:block;font-weight:400;font-size:14px;color:inherit;opacity:.8}
.choice .btn span{text-align:left}
.kids{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.kid{border:1.5px solid var(--line);background:var(--surface);border-radius:var(--r);padding:18px 12px;font-weight:800;font-size:20px;cursor:pointer;display:grid;gap:8px;justify-items:center;font-family:var(--f-display)}
.avatar{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);font-size:24px;font-weight:800}
.pin-dots{display:flex;gap:14px;justify-content:center;padding:8px 0}
.pin-dots span{width:18px;height:18px;border-radius:50%;border:2px solid var(--ink)}
.pin-dots span.on{background:var(--ink)}
.pinpad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:320px;width:100%;justify-self:center}
.pinpad button{min-height:64px;border-radius:16px;border:1.5px solid var(--line);background:var(--surface);font-size:26px;font-weight:700;cursor:pointer;font-variant-numeric:tabular-nums}
.pinpad button.fn{font-size:15px;color:var(--muted)}
.codebig{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:30px;font-weight:800;letter-spacing:.14em}
.code-input{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:24px;letter-spacing:.14em;text-transform:uppercase;text-align:center}
.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:15px}
.kv dt{color:var(--muted)} .kv dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums}
.table-wrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:15px}
th,td{text-align:left;padding:8px 6px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.mono{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:14px;word-break:break-all}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}
@media (max-width:440px){.wr{grid-template-columns:22px minmax(0,1fr) 32px;row-gap:4px;padding-bottom:8px;border-bottom:1px dashed var(--line)}.wr>input[type=checkbox]{grid-row:1 / span 2;grid-column:1}.wr .wf{grid-column:2;grid-row:1}.wr .wd{grid-column:2;grid-row:2}.wr .x{grid-column:3;grid-row:1 / span 2}.colhead{display:none}.stats dd{font-size:15px}}

/* Paukheft components */
.wordmark{font-family:var(--f-display);font-weight:800;font-size:22px;line-height:1;letter-spacing:-.015em;color:var(--ink)}
.wordmark span{color:var(--green)}
.lesson{position:relative;padding-left:30px}
.lesson::before{content:"";position:absolute;top:0;bottom:0;left:16px;width:2px;background:var(--margin)}
.lesson.paper{background-color:var(--surface);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:18px 18px}
.lesson.paper::before{left:16px}
.pen{position:relative;width:60px;height:48px;display:grid;place-items:center;color:var(--pen);flex:none}
.pen svg{position:absolute;inset:0;width:100%;height:100%}
.pen span{font-family:var(--f-hand);font-weight:700;font-size:30px;line-height:1;transform:rotate(-6deg);position:relative}
.pbar{display:flex;align-items:center;gap:10px}
.pbar .track{flex:1;height:10px;border-radius:999px;background:var(--track);overflow:hidden;display:flex}
.pbar .fill{height:100%;background:var(--mint)}
.pbar .gain{height:100%;background:var(--green)}
.pbar b{font-size:14px;white-space:nowrap;font-variant-numeric:tabular-nums}
.hero-test{background:var(--hero);color:var(--hero-ink);border-radius:20px;padding:18px;display:grid;gap:14px}
.hero-test .eyebrow{color:var(--hero-muted)}
.hero-test .row{color:var(--hero-ink)}
.hero-body{display:flex;align-items:center;gap:16px}
.hero-body h2{color:var(--hero-ink);font-size:21px}
.hero-body .sub{color:var(--hero-muted);font-size:15px}
.hero-body .todo{color:var(--mint);font-weight:700;font-size:15px}
.ring{width:96px;height:96px;flex:none}
.ring .t{stroke:var(--hero-track)} .ring .v{stroke:var(--mint)}
.ring text{fill:var(--hero-ink);font-family:var(--f-display);font-weight:800}
.countdown{background:var(--countdown);color:#0f1f3a;font-weight:700;font-size:14px;padding:5px 12px;border-radius:999px;white-space:nowrap}
.btn.mint{background:var(--mint);border-color:var(--mint);color:var(--mint-ink);min-height:52px;font-size:17px}
.tag-new{font-size:13px;font-weight:700;color:var(--muted);background:var(--track);padding:4px 10px;border-radius:999px}
/* Lernthemen: one row per test topic on the child's home */
.topics{gap:10px}
.topic-row{display:grid;grid-template-columns:1fr auto;gap:6px 12px;align-items:center;text-decoration:none;color:var(--ink);border-top:1px solid var(--line);padding-top:12px}
.topic-row:first-of-type{border-top:0;padding-top:0}
.topic-main{display:grid;gap:2px;min-width:0}
.topic-fach{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700}
.topic-row .pbar{grid-column:1}
.topic-row .btn{grid-column:2;grid-row:1/3;align-self:center}
/* Notenbuch. Colours as the parents asked: 4 yellow, 5 orange, 6 red; 1–3 neutral */
:root{--g4:#ffe9a3;--g4-ink:#5a4300;--g5:#ffcf9e;--g5-ink:#6b3300;--g6:#ffc2bb;--g6-ink:#7d1209}
@media (prefers-color-scheme: dark){:root{--g4:#5a4a10;--g4-ink:#ffe9a3;--g5:#6b3a12;--g5-ink:#ffd2a6;--g6:#6e1e1a;--g6-ink:#ffc9c2}}
.gchips{display:flex;flex-wrap:wrap;gap:6px}
.gnote{display:inline-flex;align-items:center;gap:2px;border:0;border-radius:9px;padding:4px 10px;font:inherit;font-weight:700;font-size:15px;background:var(--accent-soft);color:var(--ink);font-variant-numeric:tabular-nums;min-height:32px}
button.gnote{cursor:pointer}
.gnote sup{font-size:10px;opacity:.75}
.gnote.g4,.gavg.g4,.gcat-avg.g4,.gv.g4[aria-pressed="true"]{background:var(--g4);color:var(--g4-ink)}
.gnote.g5,.gavg.g5,.gcat-avg.g5,.gv.g5[aria-pressed="true"]{background:var(--g5);color:var(--g5-ink)}
.gnote.g6,.gavg.g6,.gcat-avg.g6,.gv.g6[aria-pressed="true"]{background:var(--g6);color:var(--g6-ink)}
.gavg{display:grid;justify-items:center;border-radius:12px;padding:6px 12px;background:var(--accent-soft);min-width:72px}
.gavg b{font-family:var(--f-display);font-size:22px;font-variant-numeric:tabular-nums}
.gavg small{font-size:12px;opacity:.8}
.gcat{display:grid;grid-template-columns:minmax(110px,auto) 1fr auto;gap:8px;align-items:center;border-top:1px solid var(--line);padding-top:10px}
.gcat-name{font-weight:700;font-size:15px}
.gcat-name small{font-weight:400;color:var(--muted)}
.gcat-avg{font-size:14px;font-weight:700;border-radius:8px;padding:2px 8px;background:var(--accent-soft);white-space:nowrap;font-variant-numeric:tabular-nums}
.gform{display:grid;gap:12px;border-top:2px solid var(--line);padding-top:12px}
.gvalues{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:6px}
.gv{min-height:44px;border-radius:10px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;font-weight:700;font-size:16px}
.gv[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.srow{display:grid;grid-template-columns:1fr 90px auto auto;gap:8px;align-items:center}
.srow input:not([type=radio]){border:1.5px solid var(--line);border-radius:10px;padding:8px 10px;min-height:42px;background:var(--surface);color:var(--ink);font:inherit;min-width:0;width:100%}
.srow .pct{display:flex;align-items:center;gap:4px}
.srow .x{border:0;background:none;color:var(--muted);width:36px;height:36px}
.check.small{font-size:13px;gap:6px}
@media (max-width:420px){.gcat{grid-template-columns:1fr auto}.gcat .gchips{grid-column:1/-1;grid-row:2}.srow{grid-template-columns:1fr 80px}.srow .check,.srow .x{grid-column:auto}}
.gv.g4{border-color:var(--g4)}.gv.g5{border-color:var(--g5)}.gv.g6{border-color:var(--g6)}
/* grade of the test a Lernthema prepared for */
.topic-item{display:grid;gap:8px;border-top:1px solid var(--line);padding-top:12px}
.topic-item:first-of-type{border-top:0;padding-top:0}
.topic-item .topic-row{border-top:0;padding-top:0}
.topic-grade{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:15px}
/* Heute dran, Arbeiten, Was brauche ich */
.review-card{border-left:6px solid var(--mint)}
.review-card h3{margin:2px 0}
.exam-row{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:8px;font-size:15px}
.exam-row .linkbtn{text-align:left;color:var(--ink);text-decoration:none}
.exam-row.soon .exam-when{background:var(--countdown);color:#fff;border-radius:999px;padding:2px 10px;font-weight:700}
.exam-when{white-space:nowrap;color:var(--muted);font-size:14px}
.need{display:grid;gap:6px;background:var(--accent-soft);border-radius:12px;padding:10px 12px}
.need>span:first-child{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700}
.need p{margin:0}
.need .gnote{display:inline;padding:1px 6px}
.chip.small{min-height:34px;padding:5px 12px}
.speak.big{font-size:20px;padding:16px 20px;justify-self:start}
/* consent */
.check.top{align-items:flex-start;line-height:1.4;flex-wrap:nowrap}
.check.top input[type=checkbox]{width:22px;height:22px;min-height:0;margin-top:1px;flex:0 0 22px;padding:0}
ul.plain{margin:0;padding-left:18px;display:grid;gap:6px}