:root{
  /* Oefi huisstijl (tokens uit oefi-brand). Kleur: data-kleur, licht/donker: data-modus of het systeem.
     Per kleur: a = accent, s = zacht, st = logostreep, b = knop in donker; -l licht, -d donker */
  --a-l:#2446B8; --a-d:#7B93E5; --s-l:#E1E7F9; --s-d:#17244F; --st-l:#758EE4; --st-d:#4568DB; --b-d:#526FD0;
  --support:#FFC93C; --on-support:#1B2140; --logo-dot:#FFC93C; --logo-fg:#FFFFFF;
  --display:"Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif;
  --body:"Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --bg:#F7F8FB; --surface:#FFFFFF; --surface-2:#EEF0F6; --text:#1B2140; --muted:#4A5170; --border:#E3E6EF; --border-strong:#C9CEDD;
  --accent:var(--a-l); --accent-soft:var(--s-l); --logo-stripe:var(--st-l); --logo-bg:var(--accent);
  --button-bg:var(--accent); --button-text:var(--accent); --on-accent:#FFFFFF;
  --good:#0B6B47; --good-line:#12A571; --good-soft:#E0F7EC; --bad:#B42335; --bad-line:#E5484D; --bad-soft:#FDE7EA;
  --disabled-bg:#EEF0F6; --disabled-text:#7A8099; --disabled-border:#C9CEDD;
  --press-shadow:rgba(27,33,64,.35); --support-press:#1B2140; --support-ring:#1B2140;
  --progress-track:var(--accent-soft); --marker:#FFE08A; --hover-tint:#000000; color-scheme:light;
  /* old names, still used everywhere */
  --paper:var(--bg); --card:var(--surface); --ink:var(--text); --line:var(--border); --blue:var(--accent); --blue-soft:var(--accent-soft);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]):not([data-modus="licht"]){
  --bg:#12162B; --surface:#1B2140; --surface-2:#232A4D; --text:#F7F8FB; --muted:#B7BCCF; --border:#2A3157; --border-strong:#3A4270;
  --accent:var(--a-d); --accent-soft:var(--s-d); --logo-stripe:var(--st-d); --logo-bg:#12162B;
  --button-bg:var(--b-d); --button-text:#FFFFFF; --on-accent:#12162B;
  --good:#4ADE9B; --good-line:#22C08A; --good-soft:#0F3A2B; --bad:#FF8A95; --bad-line:#F0646A; --bad-soft:#45182A;
  --disabled-bg:#2A3157; --disabled-text:#9AA0BF; --disabled-border:#4A5385;
  --press-shadow:color-mix(in srgb,var(--button-bg) 55%,#000); --support-press:#B38D2A; --support-ring:transparent;
  --progress-track:color-mix(in srgb,var(--accent) 35%,var(--surface)); --marker:#6B5618; --hover-tint:#FFFFFF; color-scheme:dark;
  }
}
:root[data-theme="dark"]:not([data-modus="licht"]),:root[data-modus="donker"]{
  --bg:#12162B; --surface:#1B2140; --surface-2:#232A4D; --text:#F7F8FB; --muted:#B7BCCF; --border:#2A3157; --border-strong:#3A4270;
  --accent:var(--a-d); --accent-soft:var(--s-d); --logo-stripe:var(--st-d); --logo-bg:#12162B;
  --button-bg:var(--b-d); --button-text:#FFFFFF; --on-accent:#12162B;
  --good:#4ADE9B; --good-line:#22C08A; --good-soft:#0F3A2B; --bad:#FF8A95; --bad-line:#F0646A; --bad-soft:#45182A;
  --disabled-bg:#2A3157; --disabled-text:#9AA0BF; --disabled-border:#4A5385;
  --press-shadow:color-mix(in srgb,var(--button-bg) 55%,#000); --support-press:#B38D2A; --support-ring:transparent;
  --progress-track:color-mix(in srgb,var(--accent) 35%,var(--surface)); --marker:#6B5618; --hover-tint:#FFFFFF; color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.5}
.wrap{max-width:560px;margin:0 auto;padding:24px 16px 48px}
h1,h2{font-family:var(--display);margin:0;text-wrap:balance;letter-spacing:-.01em}
h1{font-size:2.3rem;font-weight:800;line-height:1.05}
h2{font-size:1.6rem;font-weight:800}
.mark{background:linear-gradient(transparent 55%, var(--marker) 55%);padding:0 .1em}
.sub{color:var(--muted);margin:.4rem 0 0}
.crumbs{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:.9rem;color:var(--muted);margin-bottom:18px}
.crumbs button{background:none;border:0;color:var(--blue);font:inherit;padding:2px 0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.list{display:grid;gap:10px;margin-top:22px}
.tile{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;text-align:left;
  background:var(--card);border:2px solid var(--line);border-radius:14px;padding:16px 18px;font:inherit;color:inherit;cursor:pointer}
.tile:hover{border-color:var(--blue)}
.tile:focus-visible,.btn:focus-visible,input:focus-visible,.key:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.tile b{font-family:var(--display);font-size:1.25rem;display:block}
.tile small{color:var(--muted)}
.tile .arrow{font-size:1.4rem;color:var(--blue)}
.tile[disabled]{cursor:default;opacity:.55;border-style:dashed}
.tile[disabled]:hover{border-color:var(--line)}
.row{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.btn{font:inherit;font-weight:700;border-radius:12px;padding:12px 18px;cursor:pointer;border:2px solid var(--blue);background:var(--blue);color:var(--paper)}
.btn.ghost{background:transparent;color:var(--blue)}
table{border-collapse:collapse;width:100%;margin-top:14px;background:var(--card);border-radius:12px;overflow:hidden}
th,td{padding:9px 12px;border-bottom:1px solid var(--line);text-align:left}
th{font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
td.de{font-weight:700;color:var(--blue)}
.end{color:var(--bad);font-weight:700}
.note{background:var(--blue-soft);border-radius:12px;padding:12px 14px;margin-top:14px;font-size:.95rem}
.scroll{overflow-x:auto}
.progress{height:8px;background:var(--line);border-radius:99px;overflow:hidden;margin:6px 0 22px}
.progress i{display:block;height:100%;background:var(--blue);width:0;transition:width .25s}
.meta{display:flex;justify-content:space-between;font-size:.9rem;color:var(--muted);font-variant-numeric:tabular-nums}
.q{background:var(--card);border:2px solid var(--line);border-radius:18px;padding:22px 18px;text-align:center}
.q .ask{color:var(--muted);font-size:.95rem}
.q .big{font-family:var(--display);font-size:2.4rem;font-weight:800;line-height:1.1;margin:6px 0 2px}
.q .big.small{font-size:1.45rem;line-height:1.3;margin:10px 0 4px}
.q .gloss{color:var(--muted)}
.q .verb{display:inline-block;margin-top:10px;background:var(--blue-soft);color:var(--blue);border-radius:99px;padding:4px 14px;font-weight:700}
.answer{display:flex;gap:8px;margin-top:18px}
.answer input{flex:1;min-width:0;font:inherit;font-size:1.3rem;padding:12px 14px;border-radius:12px;border:2px solid var(--line);background:var(--paper);color:var(--ink)}
.keys{display:flex;gap:6px;justify-content:center;margin-top:10px}
.key{font:inherit;font-weight:700;width:44px;height:40px;border-radius:10px;border:2px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer}
.fb{margin-top:16px;border-radius:12px;padding:12px 14px;font-weight:700}
.fb.good{background:var(--good-soft);color:var(--good)}
.fb.bad{background:var(--bad-soft);color:var(--bad)}
.fb span{font-weight:400;color:var(--ink);display:block}
.fb span.nl{color:var(--muted);font-style:italic}
.fb .tipfb{margin-top:6px;font-size:.92rem}
.fb .tipfb .lbl{display:inline-block;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-right:6px}
.fb .terug{margin-top:6px;font-size:.9rem;color:var(--muted)}
.answer input.is-goed{border-color:var(--good);background:var(--good-soft)}
.answer input.is-fout{border-color:var(--bad);background:var(--bad-soft)}
.btn.volgende{white-space:nowrap}
.keys{flex-wrap:wrap}
.key.hintbtn{width:auto;padding:0 14px;border-color:var(--marker);background:var(--card)}
.key.hintbtn[disabled]{opacity:.5;cursor:default}
.opties{display:grid;gap:8px;margin-top:18px}
.opt{font:inherit;text-align:left;background:var(--paper);border:2px solid var(--line);border-radius:12px;padding:12px 14px;color:inherit;cursor:pointer}
.opt:hover:not([disabled]){border-color:var(--blue)}
.opt[disabled]{cursor:default;opacity:.7}
.opt.juist{border-color:var(--good);background:var(--good-soft);color:var(--good);font-weight:700;opacity:1}
.opt.mis{border-color:var(--bad);background:var(--bad-soft);color:var(--bad);opacity:1}
.row.center{justify-content:center}
.fb.goed-neutraal{background:var(--blue-soft);color:var(--ink)}
.hint{margin-top:12px;text-align:left;background:var(--blue-soft);border-radius:12px;padding:10px 14px;display:grid;gap:4px;font-size:.95rem}
.hint .lbl{display:inline-block;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-right:6px}
.score{font-family:var(--display);font-size:3.2rem;font-weight:800;font-variant-numeric:tabular-nums}
.mistakes{margin-top:12px;padding-left:18px}
@media (prefers-reduced-motion: reduce){.progress i{transition:none}}
h3.sectie{font-family:var(--display);font-size:1.1rem;font-weight:800;margin:30px 0 4px}
.toets{display:grid;grid-template-columns:88px minmax(0,1fr);gap:12px;background:var(--card);border:2px solid var(--line);border-radius:14px;padding:12px 14px;margin-top:10px}
.toets.dichtbij{border-color:var(--blue)}
.toets.voorbij{opacity:.6;border-style:dashed}
.toets .wanneer b{display:block;font-family:var(--display);font-size:1rem;line-height:1.2}
.toets .wanneer small{display:block;color:var(--muted);font-size:.85rem;font-variant-numeric:tabular-nums}
.tips{margin-top:10px;font-size:.95rem}
.tips summary{cursor:pointer;font-weight:700;color:var(--blue)}
.tips summary:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.tips ul{margin:6px 0 0;padding-left:18px;display:grid;gap:4px}
.twk{margin-top:10px}
.twk td.dag{font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums;width:1%}
.twk tr.voorbij td{color:var(--muted);text-decoration:line-through}
.twk tr.vandaag td{background:var(--blue-soft)}
.toets .wat p{margin:4px 0 0}
.toets .kop{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:.8rem}
.vaklbl{font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.type{font-weight:700;border-radius:6px;padding:1px 7px;background:var(--blue-soft);color:var(--blue)}
.type.t-PW{background:var(--blue);color:var(--card)}
.type.t-SO{background:var(--marker);color:var(--ink)}
.weging{color:var(--muted)}
.noot{color:var(--muted);font-size:.9rem}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.chip{font:inherit;font-size:.88rem;font-weight:700;border:2px solid var(--blue);color:var(--blue);background:transparent;border-radius:99px;padding:3px 11px;cursor:pointer}
.chip:hover{background:var(--blue-soft)}
.chip:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.links{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:8px;font-size:.92rem}
.links a{color:var(--blue);text-underline-offset:3px}
.links.blok{flex-direction:column;gap:10px;font-size:1rem;margin-top:10px}
a.btn{display:inline-block;text-decoration:none}
.stand{color:var(--blue);font-weight:700}
.klein{font-size:.85rem}
.dim{color:var(--muted)}
.fb.hinted{background:var(--blue-soft);color:var(--ink)}
.note.terug{background:var(--good-soft)}
.leestekst{text-align:left;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:10px 14px;margin:12px 0 4px;font-size:.95rem;max-height:340px;overflow:auto}
div.leestekst{max-height:none;margin-top:14px}
.leestekst summary{cursor:pointer;font-weight:700;color:var(--blue)}
.leestekst p{margin:.5em 0}
.figuur{margin:12px auto 4px;max-width:340px}
.figuur svg{width:100%;height:auto;display:block}
.figuur.breed{max-width:460px}
.kd-grid{stroke:var(--line);stroke-width:1}
.kd-bar{fill:var(--blue)}
.kd-lijn{fill:none;stroke:var(--ink);stroke-width:2.5;stroke-linejoin:round}
.kd-punt{fill:var(--ink)}
.kd-lbl{fill:var(--muted);font-size:10px;font-family:var(--body)}
.balk-lijn{stroke:var(--ink);stroke-width:1.3}
.nootkop{fill:var(--ink)}
.steel{stroke:var(--ink);stroke-width:1.6}
.nootopen{fill:none;stroke:var(--ink);stroke-width:2}
.vlag{fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round}
.punt,.dik{fill:var(--ink)}
.streep{stroke:var(--ink);stroke-width:1.6}
.cijfer{fill:var(--ink);font:800 22px var(--display)}
.sleutel{fill:var(--ink);font-size:90px;font-family:"Noto Music","Apple Symbols","Segoe UI Symbol",serif}
.br{display:inline-flex;flex-direction:column;vertical-align:middle;text-align:center;line-height:1.15;margin:0 .1em}
.br>span:first-child{border-bottom:.07em solid currentColor;padding:0 .15em}
.note .br{font-size:.9em}


.wrap{position:relative}
#app>h1,#app>.crumbs{padding-right:0}
.kleurkeuze{display:none} /* kleur en modus staan in het profiel (tik op je foto) */
.kleurknop{width:38px;height:38px;border-radius:50%;border:2px solid var(--line);background:var(--card);display:grid;place-items:center;cursor:pointer;padding:0}
.kleurknop:hover{border-color:var(--blue)}
.kleurknop:focus-visible,.swatch:focus-visible,.tab:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.stip{width:18px;height:18px;border-radius:50%;background:var(--blue)}
.kleurpaneel{position:absolute;right:0;top:46px;background:var(--card);border:2px solid var(--line);border-radius:14px;padding:12px;display:grid;grid-template-columns:repeat(5,auto);gap:10px;box-shadow:0 8px 24px rgba(0,0,0,.12)}
.swatch{display:grid;justify-items:center;gap:4px;background:none;border:0;font:inherit;font-size:.72rem;color:var(--muted);cursor:pointer;padding:2px}
.swatch i{width:30px;height:30px;border-radius:50%;display:block;border:3px solid transparent;box-shadow:0 0 0 1px var(--line)}
.swatch[aria-pressed="true"] i{border-color:var(--card);box-shadow:0 0 0 2px var(--ink)}
.swatch[aria-pressed="true"]{color:var(--ink);font-weight:700}
@media (max-width:400px){.kleurpaneel{grid-template-columns:repeat(3,auto)}}
.tabs{display:flex;gap:6px;margin-top:20px;border-bottom:2px solid var(--line)}
.tab{font:inherit;font-family:var(--display);font-weight:800;font-size:1.05rem;background:none;border:0;border-bottom:3px solid transparent;margin-bottom:-2px;padding:8px 14px 8px 2px;margin-right:10px;color:var(--muted);cursor:pointer}
.tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--blue)}
/* profiel en voortgang */
.wie{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.wie b{display:block;font-family:var(--display);font-size:1.2rem;line-height:1.2}
.wie small{color:var(--muted);font-variant-numeric:tabular-nums}
.avatar{width:100%;height:100%;display:block;border-radius:50%}
.avknop{width:56px;height:56px;flex:none;border-radius:50%;border:2px solid var(--line);padding:0;background:var(--card);cursor:pointer;overflow:hidden}
.avknop:hover{border-color:var(--blue)}
.avknop:focus-visible,.klas:focus-visible,.avkeus:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.profiel{display:grid;gap:34px;margin-top:26px}
.profiel section{display:grid;gap:12px}
.blok-titel{font-family:var(--display);font-weight:800;font-size:1.1rem;margin:0}
.verborgen{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.profiel label,.profiel legend{font-weight:700}
.profiel fieldset{border:0;padding:0;margin:0;display:grid;gap:8px}
.groot-invoer,.profiel input{font:inherit;font-size:1.25rem;padding:14px 16px;border-radius:14px;border:2px solid var(--line);background:var(--card);color:var(--ink);width:100%}
.groot-invoer:focus-visible,.profiel input:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.klaskeuze{display:flex;gap:12px;flex-wrap:wrap}
.klas{font:inherit;font-weight:800;font-family:var(--display);font-size:1.2rem;padding:14px 22px;border-radius:12px;border:2px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer}
.klas[aria-pressed="true"]{border-color:var(--blue);background:var(--blue);color:var(--paper)}
.avatarkeuze,.avatarkeuze.kol3{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;justify-items:center}
@media (min-width:480px){.avatarkeuze,.avatarkeuze.kol3{grid-template-columns:repeat(6,minmax(0,1fr))}}
.avkeus{aspect-ratio:1;width:100%;max-width:80px;border-radius:50%;border:3px solid transparent;padding:2px;background:none;cursor:pointer}
.avkeus[aria-pressed="true"]{border-color:var(--blue)}
.fout-melding{color:var(--bad);font-weight:700;margin:0}
.wissen{margin-top:28px}
.linkknop{font:inherit;background:none;border:0;padding:0;color:var(--muted);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.bron{margin-top:24px}
.sterren{color:var(--blue);letter-spacing:.08em;font-size:1rem}
.sterren .leeg{color:var(--line)}
.voortgang{display:flex;align-items:center;gap:8px;margin-top:6px}
.balkje{flex:1;max-width:160px;height:8px;background:var(--line);border-radius:99px;overflow:hidden}
.balkje i{display:block;height:100%;background:var(--blue)}
.voortgang .stand{font-size:.85rem;font-variant-numeric:tabular-nums}
.beloning{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:10px}
.beloning .plus{font-family:var(--display);font-weight:800;font-size:1.2rem;color:var(--good)}
.beloning .sterren{font-size:1.5rem}

.kastje{display:grid;gap:8px;width:100%;text-align:left;margin-top:16px;background:var(--card);border:2px solid var(--line);border-radius:14px;padding:12px 14px;font:inherit;color:inherit;cursor:pointer}
.kastje:hover{border-color:var(--blue)}
.kastje:focus-visible,.tr-pop:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.kastje-boven{display:grid;gap:6px}
.kastje-boven b{font-family:var(--display);font-size:1.05rem}
.balkje.groot{max-width:none;height:12px}
.kastje-onder{display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:var(--muted);font-size:.92rem}
.kastje-onder .naar{margin-left:auto;color:var(--blue);font-weight:700}
.mini{display:inline-flex;gap:2px}
.mini .ico{width:24px;height:24px}
.ico{display:block}
.kast-kop{display:flex;align-items:center;gap:14px;background:var(--blue-soft);border-radius:18px;padding:16px}
.kast-av{width:76px;height:76px;flex:none;border-radius:50%;overflow:hidden;border:3px solid var(--card)}
.kast-cijfers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:12px}
.kast-cijfers div{background:var(--card);border:2px solid var(--line);border-radius:12px;padding:10px 6px;text-align:center;display:grid}
.kast-cijfers b{font-family:var(--display);font-size:1.5rem;font-weight:800;font-variant-numeric:tabular-nums;color:var(--blue)}
.kast-cijfers span{font-size:.75rem;color:var(--muted);line-height:1.2}
.kast{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:10px}
.trofee{background:var(--card);border:2px solid var(--line);border-radius:14px;padding:12px 8px;text-align:center;display:grid;justify-items:center;gap:3px}
.trofee .ico{width:52px;height:52px}
.trofee b{font-family:var(--display);font-size:.95rem;line-height:1.15;hyphens:auto;overflow-wrap:break-word}
.trofee{min-width:0}
.trofee span{font-size:.75rem;color:var(--muted);line-height:1.25}
.trofee small{font-size:.72rem;color:var(--blue);font-weight:700}
.trofee.slot{background:transparent;border-style:dashed}
.trofee.slot b{color:var(--muted)}
.trofee.slot small{color:var(--muted);font-weight:400}
.nieuw{display:grid;gap:8px;margin-top:14px}
.tr-pop{display:flex;align-items:center;gap:12px;text-align:left;font:inherit;color:inherit;background:var(--blue-soft);border:2px solid var(--blue);border-radius:14px;padding:10px 14px;cursor:pointer;animation:pop .6s ease-out both}
.tr-pop .ico{width:48px;height:48px;flex:none}
.tr-pop b{display:block;font-family:var(--display);color:var(--blue)}
@keyframes pop{0%{transform:scale(.7);opacity:0}70%{transform:scale(1.06);opacity:1}100%{transform:scale(1)}}
@media (prefers-reduced-motion: reduce){.tr-pop{animation:none}}
/* aanmelden in stapjes */
.stappen{display:grid;gap:8px;margin-bottom:26px;padding-right:52px;color:var(--muted);font-size:.9rem;font-weight:700}
.stapbalk{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.stapbalk i{height:6px;border-radius:99px;background:var(--line)}
.stapbalk i.aan{background:var(--blue)}
.stap{display:grid;gap:28px}
.stap h1{font-size:2rem}
.stapknoppen{justify-content:space-between;margin-top:6px}
.stapknoppen .btn:only-child{margin-left:auto}
/* sterren per vak */
.sterrenkast{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 8px;margin-top:10px;background:var(--card);border:2px solid var(--line);border-radius:14px;padding:14px 8px}
.vakster{display:grid;justify-items:center;gap:2px;background:none;border:0;padding:4px 2px;font:inherit;color:inherit;cursor:pointer;border-radius:10px;min-width:0}
.vakster:hover{background:var(--blue-soft)}
.vakster:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.vulster{width:56px;height:56px;display:block}
.vs-leeg{fill:var(--line)}
.vs-rand{fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linejoin:round;opacity:.35}
.vakster b{font-family:var(--display);font-size:.82rem;line-height:1.15;text-align:center;hyphens:manual;overflow-wrap:anywhere}
.vakster span{font-size:.72rem;color:var(--muted);font-variant-numeric:tabular-nums}
/* prijzenkasten */
.kleurrij{display:flex;flex-wrap:wrap;gap:16px}
.kleurrij .swatch i{width:42px;height:42px}
.kleurrij .swatch{font-size:.8rem}
.kastkeuze{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 16px}
.kastkeus{display:grid;gap:8px;justify-items:center;font:inherit;font-size:.95rem;color:var(--muted);background:none;border:0;padding:0;cursor:pointer}
.kastkeus[aria-pressed="true"]{color:var(--ink);font-weight:700}
.kastkeus[aria-pressed="true"] .kastvoorbeeld{outline:3px solid var(--blue);outline-offset:2px}
.kastkeus:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.kastvoorbeeld{display:block;width:100%;aspect-ratio:16/10;border-radius:12px;overflow:hidden}
.plank{display:flex;justify-content:center;align-items:flex-end;gap:6px;height:100%;padding:0 10px 12px}
.plank .ico{width:30%;max-width:44px;height:auto}
/* ===== Prijzenkast: elke kast in een lichte en een donkere versie (kleuren via variabelen) ===== */
.kast-hout{--kast-bg:repeating-linear-gradient(180deg,#E9D2AC 0 150px,#C99A62 150px 160px),#E9D2AC;--kast-plank:7px solid #B98552;--kast-tekst:#5A361F;--kast-slot:rgba(90,54,31,.45);--kast-rand:0;--kast-size:auto;--kast-schaduw:none;--kast-plankschaduw:none;--kast-prev:linear-gradient(90deg,rgba(90,54,31,.07) 0 2px,transparent 2px 38px),#E9D2AC;}
.kast-glas{--kast-bg:linear-gradient(135deg,#DDEBF5 0%,#F4F9FC 45%,#CFE2EF 100%);--kast-plank:4px solid #A9C6DA;--kast-tekst:#1B2140;--kast-slot:rgba(27,33,64,.35);--kast-rand:2px solid #A9C6DA;--kast-size:auto;--kast-schaduw:none;--kast-plankschaduw:none;}
.kast-ruimte{--kast-bg:radial-gradient(1.5px 1.5px at 20% 30%,#8A97D6 50%,transparent 51%),radial-gradient(1px 1px at 70% 20%,#8A97D6 50%,transparent 51%),radial-gradient(1.5px 1.5px at 40% 80%,#8A97D6 50%,transparent 51%),radial-gradient(1px 1px at 85% 65%,#8A97D6 50%,transparent 51%),radial-gradient(1px 1px at 10% 90%,#8A97D6 50%,transparent 51%),linear-gradient(160deg,#E9EDFF,#DCD4FA 60%,#CCD9F7);--kast-plank:3px solid rgba(58,50,112,.3);--kast-tekst:#2E2766;--kast-slot:rgba(46,39,102,.4);--kast-rand:0;--kast-size:120px 120px,90px 90px,140px 140px,100px 100px,80px 80px,auto;--kast-schaduw:none;--kast-plankschaduw:none;}
.kast-neon{--kast-bg:radial-gradient(ellipse at 50% 115%,rgba(80,220,255,.35),transparent 62%),#F3F0FF;--kast-plank:3px solid #1FB8E0;--kast-tekst:#2B2452;--kast-slot:rgba(43,36,82,.4);--kast-rand:0;--kast-size:auto;--kast-schaduw:inset 0 0 0 2px rgba(80,220,255,.75),inset 0 0 22px rgba(255,79,216,.18);--kast-plankschaduw:0 3px 8px rgba(31,184,224,.45);}
:root[data-modus="donker"] .kast-hout,:root[data-theme="dark"]:not([data-modus="licht"]) .kast-hout{--kast-bg:repeating-linear-gradient(180deg,#3B281B 0 150px,#24170F 150px 160px),#3B281B;--kast-plank:7px solid #24170F;--kast-tekst:#EAD9C4;--kast-slot:rgba(234,217,196,.35);--kast-size:auto;--kast-schaduw:none;--kast-plankschaduw:none;--kast-prev:linear-gradient(90deg,rgba(0,0,0,.18) 0 2px,transparent 2px 38px),#3B281B;}
:root[data-modus="donker"] .kast-glas,:root[data-theme="dark"]:not([data-modus="licht"]) .kast-glas{--kast-bg:linear-gradient(135deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.03) 45%,rgba(169,198,218,.10) 100%),#1B2140;--kast-plank:4px solid rgba(169,198,218,.45);--kast-tekst:#DCE8F2;--kast-slot:rgba(220,232,242,.35);--kast-rand:2px solid rgba(169,198,218,.35);--kast-size:auto;--kast-schaduw:none;--kast-plankschaduw:none;}
:root[data-modus="donker"] .kast-ruimte,:root[data-theme="dark"]:not([data-modus="licht"]) .kast-ruimte{--kast-bg:radial-gradient(1.5px 1.5px at 20% 30%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 70% 20%,#fff 50%,transparent 51%),radial-gradient(1.5px 1.5px at 40% 80%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 85% 65%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 10% 90%,#fff 50%,transparent 51%),linear-gradient(160deg,#1B1F4A,#2A1B4F 60%,#0E1230);--kast-plank:3px solid rgba(255,255,255,.35);--kast-tekst:#E6E8FF;--kast-slot:rgba(255,255,255,.35);--kast-size:auto;--kast-schaduw:none;--kast-plankschaduw:none;}
:root[data-modus="donker"] .kast-neon,:root[data-theme="dark"]:not([data-modus="licht"]) .kast-neon{--kast-bg:radial-gradient(ellipse at 50% 115%,rgba(80,220,255,.30),transparent 62%),#15121F;--kast-plank:3px solid #50DCFF;--kast-tekst:#E8F9FF;--kast-slot:rgba(80,220,255,.45);--kast-size:auto;--kast-schaduw:inset 0 0 22px rgba(80,220,255,.18);--kast-plankschaduw:0 3px 8px rgba(80,220,255,.5);}
@media (prefers-color-scheme: dark){:root:not([data-modus="licht"]):not([data-theme="light"]) .kast-hout{--kast-bg:repeating-linear-gradient(180deg,#3B281B 0 150px,#24170F 150px 160px),#3B281B;--kast-plank:7px solid #24170F;--kast-tekst:#EAD9C4;--kast-slot:rgba(234,217,196,.35);--kast-size:auto;--kast-schaduw:none;--kast-plankschaduw:none;--kast-prev:linear-gradient(90deg,rgba(0,0,0,.18) 0 2px,transparent 2px 38px),#3B281B;}:root:not([data-modus="licht"]):not([data-theme="light"]) .kast-glas{--kast-bg:linear-gradient(135deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.03) 45%,rgba(169,198,218,.10) 100%),#1B2140;--kast-plank:4px solid rgba(169,198,218,.45);--kast-tekst:#DCE8F2;--kast-slot:rgba(220,232,242,.35);--kast-rand:2px solid rgba(169,198,218,.35);--kast-size:auto;--kast-schaduw:none;--kast-plankschaduw:none;}:root:not([data-modus="licht"]):not([data-theme="light"]) .kast-ruimte{--kast-bg:radial-gradient(1.5px 1.5px at 20% 30%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 70% 20%,#fff 50%,transparent 51%),radial-gradient(1.5px 1.5px at 40% 80%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 85% 65%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 10% 90%,#fff 50%,transparent 51%),linear-gradient(160deg,#1B1F4A,#2A1B4F 60%,#0E1230);--kast-plank:3px solid rgba(255,255,255,.35);--kast-tekst:#E6E8FF;--kast-slot:rgba(255,255,255,.35);--kast-size:auto;--kast-schaduw:none;--kast-plankschaduw:none;}:root:not([data-modus="licht"]):not([data-theme="light"]) .kast-neon{--kast-bg:radial-gradient(ellipse at 50% 115%,rgba(80,220,255,.30),transparent 62%),#15121F;--kast-plank:3px solid #50DCFF;--kast-tekst:#E8F9FF;--kast-slot:rgba(80,220,255,.45);--kast-size:auto;--kast-schaduw:inset 0 0 22px rgba(80,220,255,.18);--kast-plankschaduw:0 3px 8px rgba(80,220,255,.5);}}
.kast.kast-hout,.kast.kast-glas,.kast.kast-ruimte,.kast.kast-neon,.kastvoorbeeld{background:var(--kast-bg);background-size:var(--kast-size);border:var(--kast-rand,0);box-shadow:var(--kast-schaduw);border-radius:16px;padding:12px}
.kastvoorbeeld.kast-hout{background:var(--kast-prev);background-size:38px 100%}
.kastvoorbeeld .plank,.kast .plank{border-bottom:var(--kast-plank);box-shadow:var(--kast-plankschaduw)}
.kast.leeg p{margin:0;padding:18px 10px;text-align:center;font-weight:700;color:var(--kast-tekst);text-shadow:none}
.kast .trofee.slot{border-color:var(--kast-slot)}
.kast .trofee.slot b,.kast .trofee.slot span,.kast .trofee.slot small{color:var(--kast-tekst)}
.kast .trofee.slot span,.kast .trofee.slot small{opacity:.8}
@media (max-width:420px){.kast{grid-template-columns:repeat(2,minmax(0,1fr))}.kast-cijfers b{font-size:1.25rem}}
.note.ontbreekt{background:var(--card);border:2px dashed var(--bad);margin-top:14px}
.note.ontbreekt ul{margin:6px 0 0;padding-left:18px;display:grid;gap:6px}
.note.ontbreekt .waar{color:var(--muted);font-size:.9rem}
.boek-tag{display:inline-block;font-size:.72rem;font-weight:700;color:var(--bad);border:1.5px solid var(--bad);border-radius:99px;padding:0 7px;white-space:nowrap;vertical-align:1px}
.pdf-export .note.ontbreekt{background:#fff;border:2px dashed #B8322C}
.pdf-export .boek-tag{color:#B8322C;border-color:#B8322C}
.note.melding{background:var(--bad-soft);border-left:5px solid var(--bad);margin-top:16px}
.note.melding .row{margin-top:10px}
.pdf-export .note.melding{background:#FBE7E5;border-left:5px solid #B8322C}
/* samenvatting */
.chip.sv-hoofd{background:var(--blue);color:var(--paper)}
.chip.sv-hoofd:hover{background:var(--blue);opacity:.9}
.doelen{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:6px}
.doelen label{display:flex;gap:10px;align-items:flex-start;background:var(--card);border:2px solid var(--line);border-radius:12px;padding:10px 12px;cursor:pointer}
.doelen input{width:20px;height:20px;flex:none;margin:2px 0 0;accent-color:var(--blue)}
.doelen input:checked+span{color:var(--muted);text-decoration:line-through}
.sv-blok{border-top:2px solid var(--line);margin-top:26px}
.sv-blok h3.sectie{margin-top:18px}
.zelf{margin:8px 0 0;padding-left:20px;display:grid;gap:8px}
.zelf a{color:var(--blue);text-underline-offset:3px}
.note.let ul{margin:6px 0 0;padding-left:18px;display:grid;gap:4px}
.sv-print{align-items:center}
.pdf-export{--paper:#fff;--card:#fff;--ink:#1B2140;--muted:#5E6582;--line:#D5DAE8;--blue:#2446B8;--blue-soft:#EEF2FC;--marker:#FFE066;
  background:#fff;color:#1B2140;font-size:15px}
.pdf-export table{overflow:visible;border-radius:0;background:transparent}
.pdf-export td{color:#1B2140}
.pdf-export td.de{color:#2446B8}
.pdf-export .doelen label{border-width:1px;padding:7px 10px}
.pdf-export .vakje{font-size:1.1rem;line-height:1;margin-top:1px}
.pdf-export .url{display:block;font-size:.72rem;color:#5E6582;word-break:break-all}
.pdf-export .note{border:1px solid #D5DAE8}
@media print{
  :root{color-scheme:light}
  body{background:#fff;color:#000;font-size:12pt}
  .kleurkeuze,.crumbs,.sv-print,.sv-oefen,.doelen input{display:none!important}
  .wrap{max-width:none;padding:0}
  .note,.doelen label,table{break-inside:avoid;border:1px solid #ccc}
  .zelf a::after{content:" (" attr(href) ")";font-size:9pt;color:#555;word-break:break-all}
}
/* startscherm: tabs Nu, Vakken, Toetsweek */
.kastregel{display:flex;align-items:center;gap:6px;width:100%;margin-top:14px;background:var(--card);border:2px solid var(--line);border-radius:12px;padding:8px 12px;font:inherit;font-size:.92rem;color:var(--muted);cursor:pointer;text-align:left}
.kastregel:hover{border-color:var(--blue)}
.kastregel:focus-visible,.nu-rij:focus-visible,.vaktegel:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.kastregel b{color:var(--ink);font-variant-numeric:tabular-nums}
.kastregel .sterren{font-size:1.05rem;letter-spacing:0}
.kastregel .ico{width:20px;height:20px}
.kastregel .naar{margin-left:auto;color:var(--blue);font-weight:700;white-space:nowrap}
.kastregel .kr{white-space:nowrap}
@media (max-width:380px){.kastregel .naar .lang{display:none}}
.nu-toets{background:var(--card);border:2px solid var(--line);border-radius:14px;padding:12px 14px;margin-top:10px;display:grid;gap:4px}
.nu-toets.dichtbij{border-color:var(--blue)}
.nu-toets .kop{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:.8rem}
.nu-toets .wanneer{font-family:var(--display);font-size:1.1rem}
.nu-toets .wat{margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.nu-toets .noot{margin:0}
.nu-toets .row{margin-top:8px}
.nu-toets .btn{padding:9px 14px}
.nu-rij{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;text-align:left;margin-top:10px;background:var(--card);border:2px solid var(--line);border-radius:14px;padding:11px 14px;font:inherit;color:inherit;cursor:pointer}
.nu-rij:hover{border-color:var(--blue)}
.nu-rij b{display:block;font-family:var(--display);font-size:1.05rem;line-height:1.25}
.nu-rij small{color:var(--muted)}
.nu-rij .arrow{font-size:1.3rem;color:var(--blue)}
.nu-school{margin:8px 0 0;padding-left:20px;display:grid;gap:6px}
.vakgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:16px}
.vaktegel{display:grid;gap:4px;align-content:start;text-align:left;min-width:0;background:var(--card);border:2px solid var(--line);border-radius:14px;padding:12px;font:inherit;color:inherit;cursor:pointer}
.vaktegel:hover{border-color:var(--blue)}
.vaktegel b{font-family:var(--display);font-size:1.08rem;line-height:1.2;hyphens:auto;overflow-wrap:break-word}
.vaktegel small{color:var(--muted);font-size:.82rem}
.vaktegel small.stand{color:var(--blue);font-weight:700;font-variant-numeric:tabular-nums}
.vaktegel .balkje{max-width:none;margin-top:4px}
.tabbalk{display:flex;align-items:flex-end;gap:8px;margin-top:20px;border-bottom:2px solid var(--line)}
.tabbalk .tabs{margin-top:0;border-bottom:0;min-width:0}
.tabbalk .tab{padding-right:10px;margin-right:6px}
.perwissel{position:relative;margin-left:auto;align-self:center;padding-bottom:4px;flex:none}
.perwisselknop{display:flex;align-items:center;gap:5px;font:inherit;font-size:.85rem;font-weight:700;white-space:nowrap;border:2px solid var(--line);background:var(--card);color:var(--ink);border-radius:99px;padding:4px 11px;cursor:pointer}
.perwisselknop:hover,.perwisselknop[aria-expanded="true"]{border-color:var(--blue)}
.perwisselknop:focus-visible,.permenu button:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.perwisselknop .kort{display:none}
@media (max-width:400px){.perwisselknop .lang{display:none}.perwisselknop .kort{display:inline}}
.permenu{position:absolute;right:0;top:calc(100% + 4px);z-index:6;min-width:190px;display:grid;gap:2px;background:var(--card);border:2px solid var(--line);border-radius:14px;padding:6px;box-shadow:0 8px 24px rgba(0,0,0,.14)}
.permenu button{display:flex;justify-content:space-between;align-items:center;gap:14px;font:inherit;font-weight:700;text-align:left;background:none;border:0;border-radius:10px;padding:9px 10px;color:var(--ink);cursor:pointer}
.permenu button:hover{background:var(--blue-soft)}
.permenu button small{color:var(--muted);font-size:.78rem}
.permenu button[aria-pressed="true"]{background:var(--blue);color:var(--paper)}
.permenu button[aria-pressed="true"] small{color:var(--paper)}
.pernoot{margin-top:14px}
.perwissel.kop{position:absolute;top:30px;right:16px;z-index:5;margin:0;padding:0}
.wie.metper{padding-right:116px}
@media (max-width:400px){.wie.metper{padding-right:64px}}
.avwrap{position:relative;flex:none;display:block}
.avinst{position:absolute;right:-3px;bottom:-3px;width:22px;height:22px;border-radius:50%;background:var(--card);border:2px solid var(--line);display:grid;place-items:center;font-size:12px;line-height:1;color:var(--muted);pointer-events:none}
.tab small{white-space:nowrap}
@media (max-width:420px){.tabbalk .tab{font-size:.95rem;padding-right:5px;margin-right:3px}.tabbalk .tab small{margin-left:4px;padding:1px 5px}}
@media (max-width:380px){.tabbalk .tab{font-size:.88rem;padding-right:3px;margin-right:2px}.tabbalk .tab small{margin-left:3px;padding:1px 4px;font-size:.7rem}}
@media (max-width:340px){.tabbalk .tab{font-size:.8rem;margin-right:1px}}
.tabbalk .tabs{overflow-x:auto;scrollbar-width:none}.tabbalk .tabs::-webkit-scrollbar{display:none}
#app>h1{font-size:clamp(1.75rem,9vw,2.3rem)}
.wie b{overflow-wrap:anywhere}
.stemkaart{margin-top:26px;background:var(--card);border:2px solid var(--line);border-radius:16px;padding:2px 16px 14px}
.stemkaart h3.sectie{margin-top:14px}
.stemkaart.klaar{background:var(--good-soft);border-color:transparent}
.stemvraag{display:block;margin:12px 0 0;font-weight:700;font-size:.95rem}
.chip.stemchip[aria-pressed="true"]{background:var(--blue);color:var(--paper)}
.steminvoer{width:100%;margin-top:6px;font:inherit;padding:10px 12px;border-radius:12px;border:2px solid var(--line);background:var(--paper);color:var(--ink)}
.steminvoer:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
#stemknop[aria-disabled="true"]{opacity:.55}
/* perioden */
.perkeuze{display:flex;align-items:center;gap:8px;margin-top:18px;flex-wrap:wrap}
.perkeuze .lbl{font-weight:700;color:var(--muted);font-size:.9rem;margin-right:2px}
.perknop{display:grid;justify-items:center;min-width:54px;font:inherit;padding:5px 10px;border-radius:12px;border:2px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;line-height:1.15}
.perknop b{font-family:var(--display);font-size:1.15rem}
.perknop small{font-size:.72rem;color:var(--muted);font-weight:700}
.perknop:hover{border-color:var(--blue)}
.perknop:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.perknop[aria-pressed="true"]{border-color:var(--blue);background:var(--blue);color:var(--paper)}
.perknop[aria-pressed="true"] small{color:var(--paper)}
h2.perkop{margin-top:24px}
.afsluiting{background:var(--blue-soft);border-radius:18px;padding:2px 16px 14px;margin-top:20px}
.afsluiting h3.sectie{margin-top:14px}
.kast-cijfers.drie{grid-template-columns:repeat(3,minmax(0,1fr))}
.tab small{font-family:var(--body);font-weight:700;font-size:.75rem;background:var(--blue-soft);color:var(--blue);border-radius:99px;padding:1px 7px;margin-left:6px;vertical-align:2px}

/* ===== Kleur: de 12 accentkleuren uit de huisstijl (groen = Zeegroen) ===== */
:root[data-kleur="hemel"]{--a-l:#1F6FA8; --a-d:#449DDC; --s-l:#E1EFF9; --s-d:#17384F; --st-l:#3B98DB; --st-d:#2175B1; --b-d:#287AB5}
:root[data-kleur="groen"]{--a-l:#127E7A; --a-d:#18A8A2; --s-l:#E0FBFA; --s-d:#174F4D; --st-l:#17A29D; --st-d:#167C78; --b-d:#13827E}
:root[data-kleur="mint"]{--a-l:#0E8058; --a-d:#13AC76; --s-l:#E0FBF1; --s-d:#174F3B; --st-l:#12A571; --st-d:#17805B; --b-d:#0F855C}
:root[data-kleur="limoen"]{--a-l:#4E7D14; --a-d:#68A71A; --s-l:#EEFAE0; --s-d:#364F17; --st-l:#65A21A; --st-d:#4E7C16; --b-d:#518215}
:root[data-kleur="zon"]{--a-l:#A36308; --a-d:#D38617; --s-l:#FBEFE0; --s-d:#4F3817; --st-l:#D17F0A; --st-d:#9A661B; --b-d:#A76609}
:root[data-kleur="oranje"]{--a-l:#BC4A12; --a-d:#E9753C; --s-l:#FBE9E0; --s-d:#4F2917; --st-l:#EB6D2F; --st-d:#B85221; --b-d:#C45119}
:root[data-kleur="koraal"]{--a-l:#C53D4F; --a-d:#D87B88; --s-l:#F7E4E6; --s-d:#4F171F; --st-l:#D57481; --st-d:#C64152; --b-d:#C84859}
:root[data-kleur="roze"]{--a-l:#C81D5E; --a-d:#EA6C9C; --s-l:#FAE0EA; --s-d:#4F172C; --st-l:#E96597; --st-d:#D42568; --b-d:#D33772}
:root[data-kleur="fuchsia"]{--a-l:#A21CAF; --a-d:#DB67E7; --s-l:#F8E0FA; --s-d:#4A174F; --st-l:#D95EE5; --st-d:#BD24CC; --b-d:#BA3CC7}
:root[data-kleur="paars"]{--a-l:#6D40C9; --a-d:#A488DD; --s-l:#EAE3F7; --s-d:#29174F; --st-l:#9F82DC; --st-d:#7F58D0; --b-d:#855FD2}
:root[data-kleur="grafiet"]{--a-l:#3A4057; --a-d:#8E95B1; --s-l:#EAEBF1; --s-d:#292D3D; --st-l:#8991B0; --st-d:#68708D; --b-d:#6D748E}
.sw-blauw{background:#2446B8}
.sw-hemel{background:#1F6FA8}
.sw-groen{background:#127E7A}
.sw-mint{background:#0E8058}
.sw-limoen{background:#4E7D14}
.sw-zon{background:#A36308}
.sw-oranje{background:#BC4A12}
.sw-koraal{background:#C53D4F}
.sw-roze{background:#C81D5E}
.sw-fuchsia{background:#A21CAF}
.sw-paars{background:#6D40C9}
.sw-grafiet{background:#3A4057}
.kleurpaneel{grid-template-columns:repeat(4,auto)!important}
.kleurrij{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 8px!important}
.modusrij{grid-column:1/-1;display:flex;gap:6px;border-top:1px solid var(--line);padding-top:10px;margin-top:2px}
.modus{flex:1;font:inherit;font-size:.8rem;font-weight:700;padding:7px 8px;border-radius:10px;border:2px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer}
.modus[aria-pressed="true"]{border-color:var(--blue);background:var(--blue);color:var(--paper)}
.modus:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.profiel .modusrij,.stap .modusrij{border-top:0;padding-top:0;margin-top:4px}
/* ===== Header (sticky), full-screen menu, footer ===== */
.kop-balk{position:sticky;top:0;z-index:30;background:var(--logo-bg);padding-top:env(safe-area-inset-top)}
:root[data-modus="donker"] .kop-balk{border-bottom:1px solid var(--border)}
@media (prefers-color-scheme: dark){:root:not([data-modus="licht"]) .kop-balk{border-bottom:1px solid var(--border)}}
.kop-in{max-width:560px;height:64px;margin:0 auto;padding:0 6px 0 16px;display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;background:none;border:0;cursor:pointer;padding:0;border-radius:8px}
.logo-svg{height:40px;width:auto;display:block}
.logo:focus-visible,.hamburger:focus-visible,.menu-in button:focus-visible,.menu-in a:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:8px}
.hamburger{width:48px;height:48px;border:0;background:none;position:relative;cursor:pointer;border-radius:12px;color:#FFFFFF}
.hamburger span{position:absolute;left:12px;width:22px;height:2.5px;border-radius:2px;background:currentColor;
  transition:top .18s ease .18s,transform .18s ease 0s,opacity .1s linear .18s}
.hamburger span{left:13px}.hamburger span:nth-child(1){top:16px}.hamburger span:nth-child(2){top:23px}.hamburger span:nth-child(3){top:30px}
.hamburger[aria-expanded="true"] span{transition:top .18s ease 0s,transform .18s ease .18s,opacity .1s linear .18s}
.hamburger[aria-expanded="true"] span:nth-child(1){top:23px;transform:rotate(45deg)}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburger[aria-expanded="true"] span:nth-child(3){top:23px;transform:rotate(-45deg)}
.menu{position:fixed;inset:0;z-index:20;background:var(--paper);padding-top:calc(64px + env(safe-area-inset-top));overflow-y:auto;opacity:0;visibility:hidden;transition:opacity .25s ease,visibility 0s linear .25s}
.menu.open{opacity:1;visibility:visible;transition:opacity .25s ease}
.menu-in:focus{outline:none}
.menu-in{max-width:560px;margin:0 auto;padding:18px 16px 40px}
.menu-in .groot button{display:block;width:100%;text-align:left;font:inherit;font-family:var(--display);font-weight:800;font-size:1.5rem;line-height:1.15;padding:7px 0;background:none;border:0;color:var(--ink);cursor:pointer}
.menu-actie{position:fixed;left:0;right:0;bottom:0;background:var(--paper);border-top:1px solid var(--line);padding:12px 16px calc(12px + env(safe-area-inset-bottom))}
.menu-actie-in{max-width:528px;margin:0 auto}
.menu-actie .btn{width:100%;font-size:1.15rem;padding:14px 18px;text-align:center}
.menu-in.met-actie{padding-bottom:110px}
.menu-groep{margin-top:20px}
.menu-groep:first-child{margin-top:0}
.menu-groep h4{margin:0 0 2px;font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.menu-in .groot button:hover{color:var(--blue)}
.menu-in .klein{margin-top:22px;padding-top:16px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:4px}
.menu-in .klein button,.menu-in .klein a{text-align:left;font:inherit;font-size:1.05rem;padding:7px 0;background:none;border:0;color:var(--muted);cursor:pointer;text-decoration:none}
.menu-in .groot button,.menu-in .klein>*,.menu-actie .btn,.menu-groep h4{opacity:0;transform:translateY(10px);transition:opacity .25s ease,transform .25s ease}
.menu.open .menu-in .groot button,.menu.open .menu-in .klein>*,.menu.open .menu-actie .btn,.menu.open .menu-groep h4{opacity:1;transform:none;transition-delay:calc(var(--i,0)*30ms + 60ms)}
body.menu-open{overflow:hidden}
.voet{margin-top:48px;padding-top:16px;border-top:1px solid var(--line);color:var(--muted);font-size:.9rem;display:flex;flex-wrap:wrap;gap:4px 16px;justify-content:space-between}
.voet b{font-family:var(--display);color:var(--ink)}
.voet a{color:var(--muted)}
.wrap{position:relative}
@media (prefers-reduced-motion: reduce){.hamburger span,.menu,.menu-in .groot button,.menu-in .klein>*,.menu-actie .btn,.menu-groep h4{transition:none!important}}
@media print{.kop-balk,.menu,.voet{display:none!important}}

/* ===== Huisstijl: knoppen, kaarten, antwoorden, focus (README oefi-brand, UI-basis) ===== */
h1,h2,h3,.tile b,.nu-rij b,.vaktegel b{color:var(--text)}
.btn,a.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 22px;border:0;border-radius:var(--radius-button,16px);
  font-size:17px;font-weight:700;line-height:1.2;text-align:center;background:var(--button-bg);color:#FFFFFF;box-shadow:0 4px 0 var(--press-shadow);margin-bottom:4px;
  transition:transform .08s ease,box-shadow .08s ease;-webkit-tap-highlight-color:transparent}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--press-shadow)}
.btn.ghost{background:var(--surface);color:var(--button-text);box-shadow:inset 0 0 0 2px var(--accent)}
.btn.ghost:active{transform:none;background:var(--accent-soft)}
.btn[disabled],.btn[aria-disabled="true"]{background:var(--disabled-bg);color:var(--disabled-text);box-shadow:inset 0 0 0 2px var(--disabled-border);cursor:default;transform:none;opacity:1}
.nu-toets .btn{min-height:44px;padding:0 16px;font-size:16px}
.linkknop{color:var(--muted);font-weight:700}
/* focus: eigeel met inkt eromheen (licht), alleen eigeel (donker) */
:focus-visible{outline:none!important;box-shadow:0 0 0 3px var(--bg),0 0 0 6px var(--support),0 0 0 8px var(--support-ring)!important}
input:focus-visible,textarea:focus-visible{border-color:var(--accent)!important;box-shadow:0 0 0 4px var(--accent-soft)!important}
.kop-balk :focus-visible{box-shadow:0 0 0 3px var(--support)!important}
/* tikbare rijen: radius 16, rand 2 px. Vaste kaarten: radius 20, rand 1 px */
.tile,.nu-rij,.vaktegel,.kastregel,.kastje,.doelen label{border-radius:16px;border-color:var(--border)}
.tile,.nu-rij{min-height:56px}
.q,.toets,.nu-toets,.stemkaart,.sterrenkast,.kast-cijfers div,.trofee,.leestekst{border-width:1px;border-radius:20px}
.kast-cijfers div,.trofee{border-radius:16px}
.note,.hint,.fb{border-radius:16px}
.afsluiting,.kast-kop{border-radius:20px}
/* antwoorden en invoer */
.opt{min-height:56px;border-radius:16px;background:var(--surface);padding:12px 16px;font-size:17px}
.opt.juist{border-color:var(--good-line);background:var(--good-soft);color:var(--text)}
.opt.juist::after{content:"Goed!";float:right;color:var(--good);font-weight:700}
.opt.mis{border-color:var(--bad-line);background:var(--bad-soft);color:var(--text)}
.opt.mis::after{content:"Helaas";float:right;color:var(--bad);font-weight:700}
.answer input,.groot-invoer,.profiel input,.steminvoer{min-height:52px;border-radius:14px;border:2px solid var(--border);background:var(--surface)}
.answer input.is-goed{border-color:var(--good-line)}.answer input.is-fout{border-color:var(--bad-line)}
.key{border-radius:12px;min-height:44px}
.key.hintbtn{border-color:var(--accent-soft);background:var(--accent-soft);color:var(--button-text)}
/* voortgang en beloning: eigeel is de steunkleur, altijd met inkt */
.progress{height:10px;background:var(--progress-track)}
.balkje{background:var(--progress-track)}
.sterren{color:var(--support);-webkit-text-stroke:1px var(--support-ring);paint-order:stroke fill}
.sterren .leeg{color:var(--border-strong);-webkit-text-stroke:0}
.vs-rand{stroke:var(--support-ring);opacity:1}
.beloning .plus{display:inline-flex;align-items:center;font-family:var(--body);font-size:15px;font-weight:700;padding:5px 12px;border-radius:999px;background:var(--support);color:var(--on-support);box-shadow:inset 0 0 0 2px var(--support-ring)}
.mark{background:linear-gradient(transparent 58%, var(--marker) 58%)}
.tab[aria-selected="true"]{border-bottom-color:var(--accent)}
/* het ei: licht of donker plaatje volgens het thema */
.ei{display:inline-block;flex:none;width:64px;height:64px}
.ei img{width:100%;height:100%;display:block}
.ei .ei-d{display:none}
:root[data-modus="donker"] .ei .ei-l,:root[data-theme="dark"]:not([data-modus="licht"]) .ei .ei-l{display:none}
:root[data-modus="donker"] .ei .ei-d,:root[data-theme="dark"]:not([data-modus="licht"]) .ei .ei-d{display:block}
@media (prefers-color-scheme: dark){:root:not([data-modus="licht"]):not([data-theme="light"]) .ei .ei-l{display:none}:root:not([data-modus="licht"]):not([data-theme="light"]) .ei .ei-d{display:block}}
.ei.pop{animation:eipop .15s ease-out both}
@keyframes eipop{from{transform:scale(.9)}to{transform:scale(1)}}
@media (prefers-reduced-motion: reduce){.ei.pop{animation:none}.btn{transition:none}}
.ei-regel{display:flex;align-items:center;gap:12px;margin-top:4px}
.ei-regel b{display:block;font-family:var(--display);font-size:1.15rem;line-height:1.2}
.ei-regel small{color:var(--muted)}
.klaar-kop{display:flex;align-items:center;gap:14px}
.klaar-kop .ei{width:84px;height:84px}
/* welkom: logo met payoff op de accentkleur */
.welkom{background:var(--logo-bg);border-radius:24px;padding:28px 20px 24px;text-align:center;margin-bottom:26px}
.welkom .logo-svg{height:auto;width:min(220px,70%);margin:0 auto}
.welkom p{margin:14px 0 0;font-family:var(--display);font-weight:800;font-size:1.25rem;line-height:1.25;color:#FFFFFF;text-wrap:balance}
@media print{.ei{display:none}}
[tabindex="-1"]:focus-visible{box-shadow:none!important}
/* ===== Beginscherm (online, niet ingelogd): logo met payoff op de accentkleur ===== */
:root[data-buiten] .hamburger{visibility:hidden}
.poort-in{position:fixed;inset:0;z-index:40;background:var(--logo-bg);color:#FFFFFF;display:flex;flex-direction:column;align-items:center;gap:16px;
  padding:calc(24px + env(safe-area-inset-top)) 24px calc(20px + env(safe-area-inset-bottom));overflow-y:auto;text-align:center}
.poort-logo{margin:auto 0;display:grid;gap:22px;justify-items:center;width:100%;max-width:420px;padding-top:24px}
.poort-logo .logo-svg{width:min(260px,72%);height:auto}
.poort-logo p{margin:0;font-family:var(--display);font-weight:800;font-size:1.4rem;line-height:1.25;text-wrap:balance}
.poort-melding{margin:0;max-width:420px;background:rgba(255,255,255,.14);border-radius:16px;padding:12px 14px;font-size:15px;line-height:1.45}
.poort-knoppen{width:100%;max-width:420px;display:grid;gap:12px}
.poort-knoppen .btn{width:100%}
.btn.wit{background:#FFFFFF;color:var(--a-l);box-shadow:0 4px 0 rgba(0,0,0,.25)}
.btn.wit:active{box-shadow:0 1px 0 rgba(0,0,0,.25)}
.btn.wit-rand{background:transparent;color:#FFFFFF;box-shadow:inset 0 0 0 2px rgba(255,255,255,.85)}
.btn.wit-rand:active{transform:none;background:rgba(255,255,255,.12)}
.poort-klein{margin:0}.poort-klein a{color:#FFFFFF;opacity:.85;font-size:15px}
.poort-in :focus-visible{box-shadow:0 0 0 3px var(--logo-bg),0 0 0 6px var(--support)!important}
/* ===== Hover (alleen met muis, niet blijven hangen op touch) ===== */
@media (hover:hover){
  .btn:hover,.o-duelknop:hover{background:color-mix(in srgb,var(--button-bg) 86%,var(--hover-tint))}
  .btn.ghost:hover{background:var(--accent-soft)}
  .btn.wit:hover{background:#E9EDFA}
  .btn.wit-rand:hover{background:rgba(255,255,255,.14)}
  .btn[disabled]:hover,.btn[aria-disabled="true"]:hover{background:var(--disabled-bg)}
  .chip:hover{background:var(--accent-soft)}
  .chip.sv-hoofd:hover,.chip.stemchip[aria-pressed="true"]:hover{background:color-mix(in srgb,var(--accent) 86%,var(--hover-tint));opacity:1}
  .linkknop:hover{color:var(--text)}
  .key:hover:not([disabled]),.klas:hover,.perknop:hover,.modus:hover{border-color:var(--accent)}
  .hamburger:hover,.logo:hover{background:rgba(255,255,255,.12)}
  .o-sluit:hover{color:var(--text)}
  .menu-in .klein button:hover,.menu-in .klein a:hover{color:var(--text)}
}
.btn,.o-duelknop,.chip,.linkknop{transition:background-color .12s ease,color .12s ease,transform .08s ease,box-shadow .08s ease}
@media (prefers-reduced-motion: reduce){.btn,.o-duelknop,.chip,.linkknop{transition:none}}
/* Footer onderaan het scherm bij korte pagina's */
.wrap{display:flex;flex-direction:column;min-height:calc(100vh - 64px - env(safe-area-inset-top));min-height:calc(100dvh - 64px - env(safe-area-inset-top));padding-bottom:calc(20px + env(safe-area-inset-bottom))}
#app{flex:1 0 auto}
.voet{flex:none}
@media print{.wrap{display:block;min-height:0}}
.note .linkknop{color:var(--button-text)}
/* Knoppenrij: "← Terug" links, hoofdknop rechts; zonder terug staat de knop ook rechts */
.row.knoprij{justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:12px}
.row.knoprij>.btn:only-child{margin-left:auto}
.row.knoprij>.linkknop{flex:0 1 auto;text-align:left;padding:12px 0;min-width:0}
.row.knoprij>.btn{flex:none;white-space:nowrap}
@media (max-width:360px){.row.knoprij>.btn{padding:0 16px;font-size:16px}}
/* ===== Iconen (Claude Design): lijn 2 px, currentColor. "vol" = beloning in eigeel ===== */
.ico-l{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.25em}
.ico-l.vol{stroke:#1B2140;stroke-width:1.5}
.ico-l.vol .f{fill:#FFC93C}
:root[data-modus="donker"] .ico-l.vol,:root[data-theme="dark"]:not([data-modus="licht"]) .ico-l.vol{stroke:#FFC93C}
:root[data-modus="donker"] .ico-l.vol .f:not(.k),:root[data-theme="dark"]:not([data-modus="licht"]) .ico-l.vol .f:not(.k){stroke:none}
:root[data-modus="donker"] .ico-l.vol .d,:root[data-theme="dark"]:not([data-modus="licht"]) .ico-l.vol .d{stroke:#12162B}
@media (prefers-color-scheme: dark){:root:not([data-modus="licht"]):not([data-theme="light"]) .ico-l.vol{stroke:#FFC93C}:root:not([data-modus="licht"]):not([data-theme="light"]) .ico-l.vol .f:not(.k){stroke:none}:root:not([data-modus="licht"]):not([data-theme="light"]) .ico-l.vol .d{stroke:#12162B}}

.btn .ico-l{width:22px;height:22px}
.btn .ico-l.na{margin-left:-2px}
.chip .ico-l{width:18px;height:18px;margin-right:5px;vertical-align:-.3em}
.chip .ico-l.na{margin:0 0 0 4px}
.arrow{display:flex;align-items:center;color:var(--accent)}
.arrow .ico-l{width:24px;height:24px}
.linkknop{display:inline-flex;align-items:center;gap:6px}
.linkknop .ico-l{width:20px;height:20px}
.sterren{display:inline-flex;gap:1px;align-items:center;-webkit-text-stroke:0}
.sterren .ico-l{width:1.15em;height:1.15em;vertical-align:-.2em}
.sterren .leeg{display:inline-flex;gap:1px;color:var(--border-strong)}
.vaktegel small .ico-l,.kastregel .ico-l.vol{width:18px;height:18px}
.avinst .ico-l{width:13px;height:13px;stroke-width:2.2}
.o-sluit{display:grid;place-items:center;width:40px;height:40px;margin:-8px -8px 0 0}
.o-sluit .ico-l{width:20px;height:20px}
.beloning .plus{gap:5px}
.beloning .plus .ico-l{width:18px;height:18px}
.o-kaart .o-kop>.ico-l{width:26px;height:26px;color:var(--accent)}
.kastregel .naar{display:inline-flex;align-items:center;gap:4px}
.kastregel .naar .ico-l{width:20px;height:20px}
/* ===== Menu: profiel bovenaan, iconen bij de plekken ===== */
.menu-profiel{display:flex;align-items:center;gap:14px;width:100%;margin-bottom:22px;padding:12px 14px;text-align:left;font:inherit;color:var(--text);
  background:var(--surface);border:1px solid var(--border);border-radius:20px;cursor:pointer}
.menu-profiel .mp-av{width:56px;height:56px;flex:none;border-radius:50%;overflow:hidden;box-shadow:0 0 0 3px var(--accent-soft)}
.menu-profiel .mp-tekst{flex:1;min-width:0;display:grid;gap:2px}
.menu-profiel b{font-family:var(--display);font-weight:800;font-size:1.3rem;line-height:1.15;overflow-wrap:anywhere}
.menu-profiel small{color:var(--muted);font-size:15px;display:flex;flex-wrap:wrap;align-items:center;gap:0 4px}
.menu-profiel small .ico-l{width:17px;height:17px}
.menu-profiel .mp-inst{color:var(--muted);width:24px;height:24px}
@media (hover:hover){.menu-profiel:hover{border-color:var(--accent)}}
.menu-in .menu-profiel{opacity:0;transform:translateY(10px);transition:opacity .25s ease,transform .25s ease,border-color .12s ease}
.menu.open .menu-in .menu-profiel{opacity:1;transform:none;transition-delay:40ms}
.menu-in .groot button{display:flex;align-items:center;gap:14px}
.menu-in .groot button .ico-l{width:26px;height:26px;color:var(--accent)}
.menu-in .klein button,.menu-in .klein a{display:flex;align-items:center;gap:10px}
.menu-in .klein .ico-l{width:20px;height:20px}
@media (prefers-reduced-motion: reduce){.menu-in .menu-profiel{transition:none!important}}
/* ===== Het ei: twee vaste maten. 56 in rijen, kaarten en koppen; 96 op uitslagschermen ===== */
.ei,.ei-regel .ei,.o-duelknop .ei,.o-stapico .ei{width:56px;height:56px}
.ei.groot,.klaar-kop .ei.groot{width:96px;height:96px}
.key.hintbtn{display:inline-flex;align-items:center;gap:6px}.key.hintbtn .ico-l{width:18px;height:18px}
/* on a yolk pill the icon is an ink line (yolk on yolk would vanish) */
.beloning .plus .ico-l,.o-vlam .ico-l{stroke:#1B2140!important;stroke-width:2}
.beloning .plus .ico-l .f,.o-vlam .ico-l .f{fill:none!important;stroke:#1B2140!important}
.ei-regel{align-items:flex-start}
.ei-regel>div{min-width:0}
.ei-cta{margin-top:10px}
.btn.klein{min-height:44px;padding:0 16px;font-size:16px}
.btn.klein .ico-l{width:20px;height:20px}
/* Sterren per vak: merkster die volloopt */
.vs-leeg{fill:var(--surface-2)}
.vs-vol{fill:var(--support)}
.vs-rand{fill:none;stroke:var(--support-ring);stroke-width:1.2;stroke-linejoin:round;opacity:1}
:root[data-modus="donker"] .vs-rand,:root[data-theme="dark"]:not([data-modus="licht"]) .vs-rand{stroke:var(--border-strong)}
@media (prefers-color-scheme: dark){:root:not([data-modus="licht"]):not([data-theme="light"]) .vs-rand{stroke:var(--border-strong)}}
.vulster{width:52px;height:52px}
/* instellingen-rondje bij de avatar: ook klikbaar */
.avinst{pointer-events:auto;cursor:pointer;width:26px;height:26px}
@media (hover:hover){.avinst:hover{border-color:var(--accent);color:var(--accent)}}
/* ===== Nu: Vandaag (ei + een hoofdknop) en Samen (rijen zoals het menu) ===== */
.v-kaart{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:16px;margin-top:16px;display:grid;gap:14px}
.v-kop{display:flex;align-items:center;gap:14px}
.v-kop b{display:block;font-family:var(--display);font-weight:800;font-size:1.2rem;line-height:1.2}
.v-kop small{display:block;color:var(--muted);font-size:15px;line-height:1.4;margin-top:2px}
.v-cta{width:100%}
.v-ook{margin:-4px 0 0;font-size:15px;color:var(--muted)}
.v-ook .linkknop{color:var(--button-text)}
.o-kaart.samen{padding:4px 0;margin-top:8px}
.s-rij{display:flex;align-items:center;gap:12px;width:100%;min-height:60px;padding:10px 16px;background:none;border:0;border-top:1px solid var(--border);font:inherit;color:var(--text);text-align:left;cursor:pointer}
.s-rij:first-child{border-top:0}
.s-ico{width:40px;height:40px;flex:none;border-radius:12px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center}
.s-ico .ico-l{width:22px;height:22px}
.s-tekst{flex:1;min-width:0}
.s-tekst b{display:block;font-weight:700;line-height:1.25}
.s-tekst small{display:block;color:var(--muted);font-size:14px;line-height:1.35;margin-top:1px}
.s-pijl{color:var(--accent);width:22px;height:22px}
.s-stip{width:12px;height:12px;flex:none;border-radius:50%;background:var(--support);box-shadow:0 0 0 2px var(--support-ring)}
.s-label{flex:none;font-size:13px;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--support);color:var(--on-support);box-shadow:inset 0 0 0 2px var(--support-ring)}
.s-rij .o-vlam{margin-left:0}
@media (hover:hover){.s-rij:hover{background:var(--accent-soft)}.s-rij:hover .s-ico{background:var(--surface)}}
.o-kaart.samen .s-rij:first-child{border-radius:19px 19px 0 0}.o-kaart.samen .s-rij:last-child{border-radius:0 0 19px 19px}
/* ===== Profiel: account-kaart en gevaarlijke knoppen (rood) ===== */
:root{--gevaar:#B42335}
:root[data-modus="donker"],:root[data-theme="dark"]:not([data-modus="licht"]){--gevaar:#C93A47}
@media (prefers-color-scheme: dark){:root:not([data-modus="licht"]):not([data-theme="light"]){--gevaar:#C93A47}}
.o-kaart.acc{display:grid;gap:12px;padding:16px}
.acc-kop{display:flex;align-items:center;gap:12px}
.acc-kop .btn{flex:none}
.acc-voet{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 16px;border-top:1px solid var(--border);padding-top:12px}
.linkknop.gevaar{color:var(--bad)}
.btn.gevaar{background:var(--gevaar);color:#FFFFFF;box-shadow:0 4px 0 color-mix(in srgb,var(--gevaar) 55%,#000)}
@media (hover:hover){.btn.gevaar:hover{background:color-mix(in srgb,var(--gevaar) 86%,#000)}}
.gevaar-vraag{background:var(--bad-soft);border-radius:16px;padding:12px 14px}
.gevaar-vraag p{margin:0}
.gevaar-vraag .row{margin-top:10px}
.wissen .gevaar-vraag{margin-top:10px}
@media (max-width:360px){.acc-kop{flex-wrap:wrap}.acc-kop .btn{width:100%}}
/* #app is a flex item of .wrap: never wider than the screen */
#app{min-width:0;max-width:100%}
.gevaar-vraag .knoprij>.linkknop{flex:none}
/* Profiel: titel met Klaar rechts, meteen bewaard */
.p-kop{display:flex;align-items:center;justify-content:space-between;gap:12px}
.p-kop .btn{flex:none;margin-bottom:0}
.p-status{display:flex;align-items:center;gap:6px;min-height:1.6em}
.p-status.ok{color:var(--good);font-weight:700}
.p-status .ico-l{width:18px;height:18px}
/* no browser margin around the page (header edge to edge) */
body{margin:0}
/* ===== Tab Toetsweek: rooster als inhoudsopgave, uitklapkaart per toets ===== */
.tw-rooster{list-style:none;margin:12px 0 0;padding:4px 0;background:var(--surface);border:1px solid var(--border);border-radius:20px}
.tw-rooster li{display:flex;align-items:center;gap:12px;padding:8px 14px;border-top:1px solid var(--border)}
.tw-rooster li:first-child{border-top:0}
.tw-rooster li.voorbij{opacity:.5}
.tw-rooster li.vandaag .tw-dag{color:var(--accent)}
.tw-dag{flex:none;width:72px;font-weight:700;font-variant-numeric:tabular-nums}
.tw-vakken{display:flex;flex-wrap:wrap;gap:6px}
.tw-vak{font:inherit;font-size:15px;font-weight:700;border:0;border-radius:999px;padding:5px 12px;background:var(--accent-soft);color:var(--text);cursor:pointer}
.tw-vak.stil{background:none;padding:5px 0;color:var(--muted);font-weight:400;cursor:default}
.tw-vak.stil small{font-size:13px}
@media (hover:hover){button.tw-vak:hover{background:color-mix(in srgb,var(--accent-soft) 70%,var(--accent))}}
details.twt{background:var(--surface);border:1px solid var(--border);border-radius:20px;margin-top:10px;scroll-margin-top:80px}
details.twt[open]{border-color:var(--accent)}
details.twt>summary{list-style:none;display:flex;align-items:center;gap:12px;padding:12px 14px;cursor:pointer}
details.twt>summary::-webkit-details-marker{display:none}
.tw-datum{flex:none;width:56px;display:grid;justify-items:center;background:var(--accent-soft);border-radius:12px;padding:6px 0;line-height:1.1}
.tw-datum b{font-family:var(--display);font-size:1rem}
.tw-datum small{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.tw-sam{flex:1;min-width:0;display:grid;gap:4px}
.tw-titel{font-weight:700;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.tw-titel .type,.tw-titel .weging{font-size:.8rem}
.tw-sam .voortgang{margin:0}
.tw-pijl{color:var(--muted);transition:transform .15s ease}
details.twt[open] .tw-pijl{transform:rotate(180deg)}
.tw-in{padding:0 14px 14px;display:grid;gap:10px}
.tw-in>p{margin:0}
.tw-in .row{margin-top:2px}
.tw-onderdelen{border:1px solid var(--border);border-radius:16px;overflow:hidden}
.tw-ond{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;padding:8px 12px;background:none;border:0;border-top:1px solid var(--border);font:inherit;color:var(--text);text-align:left;cursor:pointer}
.tw-ond:first-child{border-top:0}
.tw-ond>span:first-child{flex:1;min-width:0}
@media (hover:hover){.tw-ond:hover{background:var(--accent-soft)}}
@media (prefers-reduced-motion: reduce){.tw-pijl{transition:none}}
.tw-dag{width:auto;min-width:84px;white-space:nowrap}
details.twt.voorbij{opacity:.6}
details.twt.voorbij[open]{opacity:1}
.tw-datum{width:64px}.tw-datum small{text-align:center;line-height:1.15}
/* no square browser tap highlight; own rounded feedback instead */
a,button,summary,label,[role="button"]{-webkit-tap-highlight-color:transparent}
details.twt>summary{border-radius:19px}
details.twt[open]>summary{border-radius:19px 19px 0 0}
details.twt>summary:active,.s-rij:active,.tw-ond:active,.nu-rij:active,.tile:active,.vaktegel:active{background:var(--accent-soft)}
details.twt>summary:focus-visible{box-shadow:inset 0 0 0 3px var(--support)!important}
.voet{align-items:center}
.voet-merk{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-weight:800;color:var(--text)}
.voet-merk img{width:28px;height:28px;border-radius:8px;flex:none}