/* =====================================================================
   Kraak-proof! · ww.css — eigen laag bovenop het gedeelde designsysteem
   (styles.css / tokens.css uit kampen-v4 → coderdojo). Hier: secties op één
   pagina, lesklok, kraakmachine, Jonas-spel, recept-kaarten, tester,
   dobbelmachine, sorteerspel, werkblad + printregels.
   ===================================================================== */

/* ---------------- secties op één pagina ---------------- */
section.sectie{scroll-margin-top:calc(var(--topbar-h) + 16px);margin:0 0 var(--s-16);position:relative}
section.sectie:last-of-type{margin-bottom:var(--s-8)}
.sectiekop{display:flex;align-items:center;gap:14px;margin:0 0 var(--s-5);padding-top:var(--s-2)}
.sectiekop h2{margin:0;font-size:var(--t-2xl);line-height:1.15}
.sectiekop .sk-ico{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;color:#fff;flex:none;
  background:linear-gradient(140deg,var(--sc),color-mix(in srgb,var(--sc) 62%,#000 10%));box-shadow:0 6px 16px color-mix(in srgb,var(--sc) 40%,transparent)}
.sectiekop .sk-ico svg.ico{width:24px;height:24px;stroke-width:1.9}
.sectiekop .sk-sub{display:block;font-family:var(--font-body);font-weight:700;font-size:13px;color:var(--ink-soft);margin-top:2px}

/* ===================================================================
   KINDVRIENDELIJKE LEESMAAT
   Alles in een .kids-sectie is groter, luchtiger en smaller gezet dan de
   standaard (volwassen) maat. De leerkrachtsectie blijft bewust compact.
   =================================================================== */
section.kids p,
section.kids li,
section.kids .card p,
section.kids .regel p{font-size:17.5px;line-height:1.75}
section.kids p,
section.kids .lead{max-width:60ch}
section.kids .lead{font-size:19px;line-height:1.7;color:var(--ink)}
section.kids h3{font-size:22px;margin-top:var(--s-8)}
section.kids .card h3{font-size:19px;margin-top:0}
section.kids .regel h3{font-size:19px}
section.kids ol.stappen>li{padding-bottom:16px;font-size:17.5px}
section.kids .callout{font-size:17px;line-height:1.7}
section.kids .small{font-size:14.5px}
.kernzin{font-family:var(--font-display);font-weight:800;font-size:22px;line-height:1.35;color:var(--brand-ink);
  margin:var(--s-4) 0;max-width:56ch}
:root[data-theme="dark"] .kernzin{color:var(--brand-2)}

/* ---------------- eigen tekeningen ---------------- */
svg.tekening{display:block;width:100%;height:auto;border-radius:var(--r-xl);box-shadow:var(--e-1)}
figure.tk{margin:var(--s-5) 0}
figure.tk figcaption{font-size:14.5px;color:var(--ink-soft);padding:9px 4px 0;font-weight:700;text-align:center}
svg.wicon{width:64px;height:64px;display:block}
.zinstrook .zs svg.wicon{margin:0 auto}

/* ---------------- prenten (getekende illustraties) ---------------- */
figure.prent{margin:var(--s-5) 0}
figure.prent img{display:block;width:100%;height:auto;border-radius:var(--r-xl);box-shadow:var(--e-1);background:var(--surface)}
figure.prent figcaption{font-size:14.5px;color:var(--ink-soft);padding:9px 4px 0;font-weight:700;text-align:center}
.prentrij{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--s-5);margin:var(--s-6) 0}
.prentrij figure.prent{margin:0}

/* ---------------- lesvideo (leerkrachtsectie) ---------------- */
video.lesvideo{display:block;width:100%;max-width:820px;border-radius:var(--r-xl);box-shadow:var(--e-2);
  background:#0f1424;margin:0 0 var(--s-6)}

/* ---------------- mascotte "Slotje" ---------------- */
/* ondertitel in een snelkoppelingskaartje hoort op een eigen regel */
.card.qa .bk-sub{display:block;margin-top:3px;font-weight:600}

.mascotte{display:flex;gap:14px;align-items:flex-start;margin:0 0 var(--s-6)}
.mascotte .m-ico{width:56px;height:63px;flex:none;align-self:flex-start;
  filter:drop-shadow(0 6px 14px color-mix(in srgb,var(--brand) 45%,transparent))}
.mascotte .m-bubble{position:relative;background:var(--surface);border:1.5px solid var(--glass-border);border-radius:var(--r-lg);
  padding:12px 18px;font-weight:700;font-size:15.5px;line-height:1.5;box-shadow:var(--e-1);max-width:640px;margin-top:6px}
.mascotte .m-bubble::before{content:"";position:absolute;left:-7px;top:16px;width:14px;height:14px;background:var(--surface);
  border-left:1.5px solid var(--glass-border);border-bottom:1.5px solid var(--glass-border);transform:rotate(45deg)}
.mascotte .m-naam{color:var(--brand-ink);font-family:var(--font-display);font-weight:800;margin-right:4px}
:root[data-theme="dark"] .mascotte .m-naam{color:var(--brand-2)}
@media (max-width:560px){.mascotte .m-ico{width:44px}.mascotte .m-bubble{font-size:14.5px;padding:10px 14px}}
.sectie-lijn{height:1px;background:linear-gradient(90deg,var(--line),transparent);margin:var(--s-12) 0 var(--s-8)}

.hero .h-tags{margin-top:var(--s-4);display:flex;flex-wrap:wrap;gap:6px}
.hero .bigpw{margin-top:var(--s-5)}

.bigpw{display:inline-flex;align-items:center;gap:10px;font-family:Consolas,"Cascadia Mono",monospace;font-size:clamp(17px,2.6vw,26px);font-weight:700;
  background:var(--surface);border:2px solid color-mix(in srgb,var(--l4) 45%,transparent);border-radius:16px;padding:10px 18px;box-shadow:var(--e-1);
  color:var(--ink);letter-spacing:.5px;word-break:break-all}
.bigpw svg.ico{color:var(--l4);width:1.1em;height:1.1em}
.bigpw.slecht{border-color:color-mix(in srgb,var(--l1) 55%,transparent);text-decoration:line-through;text-decoration-color:var(--l1);text-decoration-thickness:3px}
.bigpw.slecht svg.ico{color:var(--l1)}

figure.imgslot{margin:var(--s-5) 0;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--e-2);border:1px solid var(--glass-border);background:var(--surface)}
figure.imgslot img{display:block;width:100%;height:auto}
figure.imgslot figcaption{font-size:12.5px;color:var(--ink-soft);padding:9px 14px;background:var(--surface)}
figure.imgslot.klein{max-width:520px}
.imgslot-ph{padding:var(--s-5);aspect-ratio:16/9;display:flex;flex-direction:column;justify-content:center;gap:8px;
  background:repeating-linear-gradient(135deg,var(--surface-2) 0 14px,var(--surface) 14px 28px)}
.imgslot-ph .ph-head{display:flex;align-items:center;gap:8px;font-weight:800;font-size:13px;color:var(--ink-soft);flex-wrap:wrap}
.imgslot-ph code{font-size:12px;background:var(--surface);padding:2px 6px;border-radius:6px;border:1px solid var(--line)}
.imgslot-ph .ph-note{font-size:13px;color:var(--ink)}
.imgslot-ph .ph-prompt{font-size:11.5px;color:var(--ink-faint);border:1px dashed var(--line);border-radius:10px;padding:8px 10px;cursor:copy;max-height:96px;overflow:auto}
.pill.pgrey{background:var(--surface-2);color:var(--ink-soft);border:1px solid var(--line)}

.tweekolom{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--s-6);align-items:start}
@media (max-width:900px){.tweekolom{grid-template-columns:1fr}}

/* ---------------- statistiek-tegels ---------------- */
.stat.slecht .stat-ico{background:linear-gradient(135deg,var(--l1),var(--l1-2))}

/* ---------------- lesklok ---------------- */
.lesklok{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--r-xl);padding:var(--s-5) var(--s-6);box-shadow:var(--e-1);
  display:flex;align-items:center;gap:var(--s-6);flex-wrap:wrap;margin-bottom:var(--s-5);position:relative;overflow:hidden}
.lesklok .lk-tijd{font-family:var(--font-display);font-weight:800;font-size:54px;line-height:1;letter-spacing:1px;
  background:linear-gradient(135deg,var(--l2),var(--xp));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;min-width:150px}
.lesklok .lk-fase{font-weight:800;font-size:15px;color:var(--ink)}
.lesklok .lk-sub{font-size:12.5px;color:var(--ink-soft)}
.lesklok .lk-knoppen{display:flex;gap:8px;margin-left:auto;flex-wrap:wrap}
.lesklok .lk-balkwrap{position:absolute;left:0;right:0;bottom:0;height:6px;background:var(--line)}
.lesklok .lk-balk{height:100%;width:0;background:linear-gradient(90deg,var(--l2),var(--xp));transition:width .5s linear}
.lesklok.loopt .lk-tijd{animation:lkpuls 2s ease-in-out infinite}
@keyframes lkpuls{50%{opacity:.75}}
.knop{height:42px;padding:0 18px;border-radius:13px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-family:var(--font-body);
  font-weight:800;font-size:13.5px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:transform var(--dur-1) var(--ease),border-color var(--dur-1),filter var(--dur-1)}
.knop:hover{transform:translateY(-1px);border-color:var(--brand)}
.knop.primair{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;border:none;box-shadow:var(--e-brand)}
.knop.primair:hover{filter:brightness(1.06)}
.knop.groen{background:linear-gradient(135deg,var(--l4),var(--l4-2));color:#fff;border:none}
.knop.klein{height:34px;padding:0 12px;font-size:12.5px}

table.lesfases{width:100%;border-collapse:separate;border-spacing:0;font-size:14px}
table.lesfases th{text-align:left;font-size:12px;letter-spacing:.4px;text-transform:uppercase;color:var(--ink-soft);padding:6px 12px;border-bottom:2px solid var(--line)}
table.lesfases td{padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:top}
table.lesfases tr{cursor:pointer;transition:background var(--dur-1)}
table.lesfases tr:hover td{background:color-mix(in srgb,var(--brand) 7%,transparent)}
table.lesfases td.lf-tijd{white-space:nowrap;font-weight:800;font-family:var(--font-display);color:var(--ink-soft);width:86px}
table.lesfases td.lf-naam{font-weight:800}
table.lesfases td.lf-naam small{display:block;font-weight:600;color:var(--ink-soft);font-size:12.5px;margin-top:2px}
table.lesfases td.lf-wat{color:var(--ink-soft);font-size:13.5px}
table.lesfases td.lf-wat b{color:var(--ink)}
table.lesfases tr.nu td{background:color-mix(in srgb,var(--l2) 14%,transparent) !important}
table.lesfases tr.nu td.lf-tijd{color:var(--l2)}
table.lesfases tr.nu td:first-child{box-shadow:inset 5px 0 var(--l2)}
table.lesfases tr.voorbij td{opacity:.55}
table.lesfases .lf-link{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:800;color:var(--brand-ink);
  background:color-mix(in srgb,var(--brand) 10%,transparent);border-radius:var(--r-pill);padding:2px 10px;margin-top:5px}
:root[data-theme="dark"] table.lesfases .lf-link{color:var(--brand-2)}

/* ---------------- kraakmachine ---------------- */
.kraak{background:#0f1424;color:#dfe5ff;border-radius:var(--r-xl);padding:var(--s-5) var(--s-6);box-shadow:var(--e-3);border:1px solid rgba(255,255,255,.08);
  font-family:Consolas,"Cascadia Mono",monospace;position:relative;overflow:hidden;min-height:250px}
.kraak::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 2px,transparent 2px 4px);pointer-events:none}
.kraak .k-top{display:flex;align-items:center;gap:10px;font-size:12px;color:#8a93c4;margin-bottom:12px;font-family:var(--font-body);font-weight:800}
.kraak .k-top .dots{display:flex;gap:5px}.kraak .k-top .dots i{width:10px;height:10px;border-radius:50%;background:#ff5f57}.kraak .k-top .dots i:nth-child(2){background:#febc2e}.kraak .k-top .dots i:nth-child(3){background:#28c840}
.kraak .kraak-teller{margin-left:auto;color:#ffd166}
.kraak .kraak-lijst{font-size:14px;line-height:1.55;min-height:112px}
.kraak .kraak-lijst>div{display:flex;gap:16px;align-items:baseline}
.kraak .k-nr{color:#6f79a8;min-width:190px;font-size:12.5px}
.kraak .k-pw{color:#dfe5ff;letter-spacing:.5px}
.kraak .k-x{color:#ff5f57}
.kraak .k-ok{color:#28c840;font-weight:800}
.kraak .k-hit{background:rgba(40,200,64,.12);border-radius:8px;padding:2px 8px;margin:4px -8px 0}
.kraak .k-hit .k-pw{color:#8dffa4;font-weight:800}
.kraak .k-wait{background:rgba(124,92,255,.15);border-radius:8px;padding:2px 8px;margin:4px -8px 0}
.kraak .kraak-res{margin-top:14px;font-family:var(--font-body);font-size:14.5px;line-height:1.55;color:#eef0fb;border-top:1px solid rgba(255,255,255,.1);padding-top:12px;min-height:44px}
.kraak .kraak-res i{font-style:normal;background:rgba(255,255,255,.1);padding:1px 7px;border-radius:6px;font-family:Consolas,monospace}
.kraak.gekraakt .kraak-res b{color:#ff8a80}
.kraak.veilig .kraak-res b{color:#8dffa4}
.kraak.bezig .kraak-lijst{animation:flikker .18s steps(2) infinite}
@keyframes flikker{50%{opacity:.85}}
.kraak-keuze{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 var(--s-4)}
.kraak-keuze button{font-family:Consolas,"Cascadia Mono",monospace;font-weight:700;font-size:14px;padding:9px 14px;border-radius:12px;border:1.5px solid var(--line);
  background:var(--surface);color:var(--ink);cursor:pointer;transition:transform var(--dur-1),border-color var(--dur-1),background var(--dur-1)}
.kraak-keuze button:hover{transform:translateY(-2px);border-color:var(--brand)}
.kraak-keuze button.on{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;border-color:transparent;box-shadow:var(--e-brand)}

/* ---------------- kraakladder (tabel tekens → tijd) ---------------- */
.ladder{display:grid;grid-template-columns:auto 1fr auto;gap:8px 14px;align-items:center;font-size:14px}
.ladder .l-n{font-family:var(--font-display);font-weight:800;color:var(--ink-soft);white-space:nowrap}
.ladder .l-bar{height:14px;border-radius:8px;background:var(--surface-2);overflow:hidden;border:1px solid var(--line)}
.ladder .l-bar i{display:block;height:100%;border-radius:8px;background:linear-gradient(90deg,var(--l1),var(--l2),var(--l4),var(--brand))}
.ladder .l-t{font-weight:800;white-space:nowrap}

/* ---------------- Jonas-spel ---------------- */
.profiel{background:var(--surface);border:1px solid var(--glass-border);border-radius:var(--r-xl);box-shadow:var(--e-2);overflow:hidden}
.profiel .pf-kop{background:linear-gradient(135deg,#3f8ef0,#8b5cf6);height:76px;position:relative}
.profiel .pf-avatar{width:78px;height:78px;border-radius:50%;background:#ffe0b2;border:4px solid var(--surface);position:absolute;left:20px;bottom:-38px;display:grid;place-items:center;font-size:40px}
.profiel .pf-body{padding:46px 22px 20px}
.profiel h3{margin:0;font-size:20px}
.profiel .pf-handle{color:var(--ink-soft);font-size:13px;font-weight:700}
.profiel ul{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:8px}
.profiel li{display:flex;gap:10px;align-items:flex-start;font-size:14px;background:var(--surface-2);border-radius:12px;padding:8px 12px}
.profiel li span:first-child{font-size:18px;line-height:1.2}
.kandidaten{display:grid;gap:10px}
.kandidaat{text-align:left;font-family:Consolas,"Cascadia Mono",monospace;font-weight:700;font-size:16px;padding:12px 16px;border-radius:14px;border:1.5px solid var(--line);
  background:var(--surface);color:var(--ink);cursor:pointer;transition:transform var(--dur-1),border-color var(--dur-1);position:relative}
.kandidaat:hover{transform:translateX(3px);border-color:var(--brand)}
.kandidaat.gedaan{cursor:default}
.kandidaat.raadbaar{border-color:var(--l1);background:color-mix(in srgb,var(--l1) 10%,var(--surface))}
.kandidaat.veilig{border-color:var(--l4);background:var(--ok-bg)}
.kandidaat .kand-why{font-family:var(--font-body);font-weight:600;font-size:13px;color:var(--ink-soft);margin-top:6px;line-height:1.45}
.kandidaat.gedaan .kand-why{color:var(--ink)}

/* ---------------- het recept: 5 regels ---------------- */
.regels{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:var(--s-4);margin:var(--s-4) 0}
.regel{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--r-lg);padding:var(--s-5);box-shadow:var(--e-1);position:relative;overflow:hidden;
  transition:transform var(--dur-2) var(--ease-out),box-shadow var(--dur-2)}
.regel:hover{transform:translateY(-3px);box-shadow:var(--e-2)}
.regel::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--rc)}
.regel .r-nr{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;color:#fff;font-family:var(--font-display);font-weight:800;font-size:19px;
  background:linear-gradient(135deg,var(--rc),color-mix(in srgb,var(--rc) 62%,#000 10%));box-shadow:0 5px 12px color-mix(in srgb,var(--rc) 40%,transparent);margin-bottom:10px}
.regel h3{margin:0 0 4px;font-size:18px}
.regel .r-kort{font-weight:800;color:var(--rc);font-size:13px;letter-spacing:.3px;text-transform:uppercase;margin-bottom:6px}
.regel p{margin:0;font-size:13.5px;color:var(--ink-soft);line-height:1.5}
.regel .r-vb{margin-top:10px;font-family:Consolas,monospace;font-size:13px;display:flex;flex-direction:column;gap:4px}
.regel .r-vb span{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:8px;background:var(--surface-2);width:fit-content;max-width:100%;word-break:break-all}
.regel .r-vb span.nee{color:var(--l1);text-decoration:line-through}
.regel .r-vb span.ja{color:#0a7c56}
:root[data-theme="dark"] .regel .r-vb span.ja{color:#4fddaa}

/* zinmethode: stappen-strook */
.zinstrook{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:var(--s-4) 0;justify-content:center}
.zinstrook .zs{background:var(--surface);border:1.5px solid var(--line);border-radius:14px;padding:10px 14px;text-align:center;box-shadow:var(--e-1);min-width:96px}
.zinstrook .zs .e{font-size:30px;line-height:1.1;display:block}
.zinstrook .zs .w{font-weight:800;font-size:14px;display:block;margin-top:3px}
.zinstrook .plus{font-family:var(--font-display);font-weight:800;font-size:24px;color:var(--ink-faint)}
.zinstrook .pijl{font-size:26px;color:var(--brand)}

/* ---------------- tester ---------------- */
.tester{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--r-xl);padding:var(--s-6);box-shadow:var(--e-2)}
.t-invoer{display:flex;gap:8px;align-items:center}
.t-invoer input{flex:1;height:56px;font-family:Consolas,"Cascadia Mono",monospace;font-size:22px;font-weight:700;letter-spacing:.5px;padding:0 18px;border-radius:16px;
  border:2px solid var(--line);background:var(--surface);color:var(--ink);outline:none;transition:border-color var(--dur-1),box-shadow var(--dur-1);min-width:0}
.t-invoer input:focus{border-color:var(--brand);box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 18%,transparent)}
.t-invoer .t-oog{width:56px;height:56px;border-radius:16px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink-soft);cursor:pointer;display:grid;place-items:center;flex:none}
.t-invoer .t-oog svg.ico{width:22px;height:22px}
.t-meta{display:flex;justify-content:space-between;font-size:12.5px;color:var(--ink-soft);font-weight:700;margin:6px 4px 0}
.t-meter{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:14px 0 8px}
.t-meter i{display:block;height:14px;border-radius:8px;background:var(--surface-2);border:1px solid var(--line);transition:background var(--dur-2),transform var(--dur-2) var(--ease-spring)}
.t-meter i.on{border-color:transparent;transform:scaleY(1.25)}
.t-label{font-family:var(--font-display);font-weight:800;font-size:26px;line-height:1.1;transition:color var(--dur-2)}
.t-resultaat{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4);margin-top:var(--s-4)}
@media (max-width:760px){.t-resultaat{grid-template-columns:1fr}}
.t-kaart{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s-4) var(--s-5)}
.t-kaart h4{margin:0 0 8px;font-size:13px;letter-spacing:.4px;text-transform:uppercase;color:var(--ink-soft);display:flex;align-items:center;gap:6px}
.t-tijd{font-family:var(--font-display);font-weight:800;font-size:clamp(20px,3vw,30px);line-height:1.15;color:var(--ink)}
.t-pog{font-size:12.5px;color:var(--ink-soft);margin-top:4px;font-weight:700}
.t-tokens{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;min-height:34px}
.tok{font-family:Consolas,"Cascadia Mono",monospace;font-weight:700;font-size:15px;padding:4px 10px;border-radius:9px;background:var(--surface-2);border:1.5px solid var(--line);display:inline-flex;flex-direction:column;align-items:center;line-height:1.1}
.tok small{font-family:var(--font-body);font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.3px;margin-top:2px}
.tok.woord{border-color:var(--l2);color:#a2650a;background:color-mix(in srgb,var(--l2) 14%,transparent)}
.tok.naam{border-color:var(--l1);color:#b23b2a;background:color-mix(in srgb,var(--l1) 14%,transparent)}
.tok.jaar{border-color:var(--xp);color:#a52a76;background:color-mix(in srgb,var(--xp) 14%,transparent)}
.tok.reeks,.tok.toets,.tok.herhaling{border-color:var(--l5);color:#6636cf;background:color-mix(in srgb,var(--l5) 14%,transparent)}
.tok.los{border-color:var(--l4);color:#0a7c56;background:color-mix(in srgb,var(--l4) 12%,transparent)}
:root[data-theme="dark"] .tok.woord{color:#f7b733}:root[data-theme="dark"] .tok.naam{color:#ff9180}:root[data-theme="dark"] .tok.jaar{color:#f37bc0}
:root[data-theme="dark"] .tok.reeks,:root[data-theme="dark"] .tok.toets,:root[data-theme="dark"] .tok.herhaling{color:#c6b0ff}:root[data-theme="dark"] .tok.los{color:#4fddaa}
ul.t-regels{list-style:none;padding:0;margin:0;display:grid;gap:6px}
ul.t-regels li{display:flex;gap:9px;align-items:center;font-size:14px;font-weight:700;color:var(--ink-soft);padding:6px 10px;border-radius:10px;background:var(--surface-2)}
ul.t-regels li .r-ico{width:22px;height:22px;display:grid;place-items:center;color:var(--ink-faint)}
ul.t-regels li .r-ico svg.ico{width:20px;height:20px}
ul.t-regels li.ok{color:var(--ink);background:var(--ok-bg)}ul.t-regels li.ok .r-ico{color:var(--ok)}
ul.t-regels li.nok{background:color-mix(in srgb,var(--l1) 10%,transparent)}ul.t-regels li.nok .r-ico{color:var(--l1)}
ul.t-tips{margin:8px 0 0;padding-left:18px;font-size:13.5px;line-height:1.5}
ul.t-tips li{margin:4px 0}
.t-voorbeelden{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;align-items:center;font-size:12.5px;color:var(--ink-soft);font-weight:700}
.t-voorbeelden button{font-family:Consolas,monospace;font-size:12.5px;font-weight:700;padding:4px 10px;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer}
.t-voorbeelden button:hover{border-color:var(--brand)}

/* ---------------- dobbelmachine ---------------- */
.dobbel{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--r-xl);padding:var(--s-6);box-shadow:var(--e-2);text-align:center}
.d-stenen{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:var(--s-2) 0 var(--s-5);min-height:110px}
.steen{width:104px;height:104px;border-radius:22px;background:var(--surface);border:2px solid var(--line);box-shadow:var(--e-2),inset 0 -6px 0 color-mix(in srgb,var(--xp) 25%,transparent);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;animation:rol .55s var(--ease-spring) both}
.steen .s-emo{font-size:36px;line-height:1.1}
.steen .s-w{font-weight:800;font-size:13.5px;line-height:1.1;padding:0 4px;word-break:break-word}
.steen.cijfer{box-shadow:var(--e-2),inset 0 -6px 0 color-mix(in srgb,var(--l3) 30%,transparent)}
.steen.sym{box-shadow:var(--e-2),inset 0 -6px 0 color-mix(in srgb,var(--l4) 30%,transparent)}
@keyframes rol{0%{transform:rotate(-180deg) scale(.3);opacity:0}100%{transform:none;opacity:1}}
.d-out{font-family:Consolas,"Cascadia Mono",monospace;font-weight:800;font-size:clamp(18px,3vw,30px);letter-spacing:.5px;background:var(--surface);border:2px solid color-mix(in srgb,var(--xp) 45%,transparent);
  border-radius:18px;padding:14px 22px;display:inline-block;max-width:100%;word-break:break-all;box-shadow:var(--e-1);color:var(--ink)}
.d-sterkte{margin-top:10px;font-size:13.5px;font-weight:700;color:var(--ink-soft)}
.d-knoppen{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:var(--s-5);align-items:center}
.d-knoppen select{height:42px;border-radius:13px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);font-family:var(--font-body);font-weight:800;font-size:13.5px;padding:0 12px}

/* ---------------- sorteerspel ---------------- */
.sorteer{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--s-4);margin:var(--s-4) 0}
.sorteerkaart{background:var(--glass-bg);border:1.5px solid var(--glass-border);border-radius:var(--r-lg);padding:var(--s-4) var(--s-5);box-shadow:var(--e-1);transition:border-color var(--dur-2)}
.sorteerkaart .s-pw{font-family:Consolas,"Cascadia Mono",monospace;font-weight:800;font-size:17px;word-break:break-all;margin-bottom:10px}
.sorteerkaart .s-keuze{display:flex;gap:8px}
.sorteerkaart .s-keuze button{flex:1;height:38px;border-radius:11px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);font-family:var(--font-body);font-weight:800;font-size:13px;cursor:pointer;transition:all var(--dur-1)}
.sorteerkaart .s-keuze button:hover{border-color:var(--brand)}
.sorteerkaart .s-keuze button.on[data-v="zwak"]{background:linear-gradient(135deg,var(--l1),var(--l1-2));color:#fff;border-color:transparent}
.sorteerkaart .s-keuze button.on[data-v="sterk"]{background:linear-gradient(135deg,var(--l4),var(--l4-2));color:#fff;border-color:transparent}
.sorteerkaart .s-why{display:none;margin-top:10px;font-size:13px;color:var(--ink-soft);line-height:1.45;border-top:1px dashed var(--line);padding-top:8px}
.sorteerkaart.goed{border-color:var(--l4);background:var(--ok-bg)}
.sorteerkaart.fout{border-color:var(--l1);background:color-mix(in srgb,var(--l1) 10%,var(--surface))}
.sorteerkaart.goed{box-shadow:inset 0 0 0 3px var(--l4),var(--e-1)}
.sorteerkaart.fout{box-shadow:inset 0 0 0 3px var(--l1),var(--e-1)}
.s-balk{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:var(--s-4)}
.s-balk .score{font-weight:800;font-family:var(--font-display);font-size:16px}

/* ---------------- quiz ---------------- */
.quizgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:var(--s-4);margin:var(--s-4) 0}
.quizmc{padding:var(--s-5)!important;margin:0!important}
.quizmc .q-nr{font-family:var(--font-display);font-weight:800;color:var(--brand-ink);font-size:12.5px;letter-spacing:.4px;text-transform:uppercase}
:root[data-theme="dark"] .quizmc .q-nr{color:var(--brand-2)}
.quizmc .q-vraag{font-weight:800;font-size:15px;margin:4px 0 8px}
.quizmc button.q-opt:disabled{cursor:default;opacity:.85}
.quizmc button.q-opt code{font-family:Consolas,monospace;font-weight:800}

/* ---------------- tabs ---------------- */
.alleenprint{display:none}
.tabs .tab-balk{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 var(--s-4)}
.tabs .tab-knop{height:40px;padding:0 16px;border-radius:12px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);font-family:var(--font-body);font-weight:800;font-size:13.5px;cursor:pointer;display:inline-flex;align-items:center;gap:7px}
.tabs .tab-knop.on{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;border-color:transparent;box-shadow:var(--e-brand)}

/* ---------------- leerkracht ---------------- */
.doelen{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:8px}
.doelen li{display:flex;gap:10px;align-items:flex-start;font-size:14px;background:var(--surface-2);border-radius:12px;padding:9px 12px}
.doelen li svg.ico{color:var(--l4);flex:none;margin-top:3px}
.sleutelrij{display:flex;flex-wrap:wrap;gap:6px}
.sleutelrij span{font-family:Consolas,monospace;font-size:12.5px;font-weight:700;padding:3px 9px;border-radius:8px;border:1px solid var(--line);background:var(--surface)}
.sleutelrij span.z{border-color:var(--l1);color:#b23b2a}.sleutelrij span.s{border-color:var(--l4);color:#0a7c56}
:root[data-theme="dark"] .sleutelrij span.z{color:#ff9180}:root[data-theme="dark"] .sleutelrij span.s{color:#4fddaa}

/* ---------------- werkblad (werkblad.html) ---------------- */
.werkblad{background:var(--surface);border:1px solid var(--glass-border);border-radius:var(--r-xl);box-shadow:var(--e-2);padding:var(--s-8) var(--s-10);max-width:820px;margin:0 auto}
.wb-kop{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;border-bottom:3px solid var(--ink);padding-bottom:12px;margin-bottom:16px}
.wb-kop h1{margin:0;font-size:26px}
.wb-kop .wb-sub{color:var(--ink-soft);font-size:13px;font-weight:700}
.wb-naam{display:flex;gap:18px;flex-wrap:wrap;font-size:13.5px;margin-bottom:18px}
.wb-naam span{border-bottom:1.5px solid var(--ink-faint);min-width:180px;display:inline-block;padding-left:4px}
.wb-deel{margin:18px 0}
.wb-deel h2{font-size:17px;margin:0 0 8px;display:flex;align-items:center;gap:9px}
.wb-deel h2 .wb-nr{width:28px;height:28px;border-radius:9px;background:var(--ink);color:var(--surface);display:grid;place-items:center;font-size:14px}
.wb-deel p{font-size:13.5px;margin:4px 0 8px;color:var(--ink-soft)}
.wb-sorteer{display:grid;grid-template-columns:1fr 1fr;gap:6px 22px;font-size:14px}
.wb-sorteer div{display:flex;align-items:center;gap:10px;padding:5px 0;border-bottom:1px dotted var(--line)}
.wb-sorteer code{font-family:Consolas,monospace;font-weight:800;flex:1;font-size:14px}
.wb-sorteer .o{width:24px;height:24px;border:2px solid var(--ink);border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:800;flex:none}
.wb-vakken{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:8px 0}
.wb-vak{border:2px solid var(--ink);border-radius:12px;height:46px;min-width:118px;flex:1;position:relative}
.wb-vak::after{content:attr(data-lbl);position:absolute;left:8px;top:-9px;background:var(--surface);padding:0 5px;font-size:10.5px;font-weight:800;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.3px}
.wb-vak.klein{flex:0 0 74px;min-width:74px}
.wb-lijn{border-bottom:2px solid var(--ink);height:34px;margin:6px 0 4px}
.wb-lijn.dun{border-bottom:1.5px solid var(--ink-faint);height:28px}
.wb-check{list-style:none;padding:0;margin:6px 0 0;display:grid;gap:6px;font-size:13.5px}
.wb-check li{display:flex;gap:10px;align-items:center}
.wb-check .box{width:18px;height:18px;border:2px solid var(--ink);border-radius:5px;flex:none}
.wb-belofte{border:2px dashed var(--ink);border-radius:14px;padding:12px 16px;margin-top:6px}
.wb-hand{display:flex;justify-content:flex-end;gap:12px;align-items:flex-end;margin-top:10px;font-size:13px}
.wb-hand span{border-bottom:1.5px solid var(--ink);min-width:200px;display:inline-block}

/* ---------------- printkop / printvoet ---------------- */
.printkop{display:none}
.printvoet{display:none;margin-top:6mm;border-top:1pt solid #ccc;padding-top:2mm;font-size:8.5pt;color:#666}

@media print{
  @page{size:A4;margin:14mm 15mm}
  /* Een verborgen tabblad print anders niet mee. De leerkracht kreeg wel de
     antwoordsleutel van de quiz maar niet de quiz zelf. Op papier tonen we
     daarom alle oefeningen onder elkaar, met een eigen kop. */
  .tabs .tab-paneel[hidden]{display:block !important}
  .tabs .tab-paneel{break-before:page}
  .tabs .tab-paneel:first-of-type{break-before:auto}
  .alleenprint{display:block !important;font-family:var(--font-display);font-weight:800;
    font-size:15pt;margin:0 0 4mm;border-bottom:1.5pt solid #111;padding-bottom:2mm}
  html{scroll-behavior:auto}
  body::before{display:none}
  body{background:#fff;color:#111;font-size:11pt}
  .rail,.topbar,.geenprint,.kraak-keuze,.t-voorbeelden,.d-knoppen,.s-balk,#q-reset,.lesklok .lk-knoppen,.mascotte{display:none !important}
  main,footer.sitefooter{margin-left:0 !important;padding:0 !important;max-width:none}
  .printkop{display:flex !important;align-items:center;justify-content:space-between;gap:10mm;border-bottom:1.5pt solid #111;padding-bottom:3mm;margin-bottom:6mm;font-size:9pt;color:#444}
  .printkop b{font-family:var(--font-display);font-size:12pt;color:#111}
  .printvoet{display:block !important}
  [data-reveal]{opacity:1 !important;transform:none !important}
  section.sectie{margin-bottom:8mm;page-break-inside:auto}
  .card,.callout,.docentbox,.regel,.quizmc,.sorteerkaart,.tester,.dobbel,.profiel,.kraak,.lesklok,figure.imgslot{box-shadow:none !important;border:1pt solid #bbb;page-break-inside:avoid;backdrop-filter:none}
  .kraak{background:#f4f5fa;color:#111}.kraak .k-nr,.kraak .k-pw,.kraak .kraak-res{color:#111}
  .werkblad{box-shadow:none;border:none;padding:0;max-width:none}
  .wb-vak::after{background:#fff}
  .wb-kop{border-bottom-color:#111}
  a{color:inherit;text-decoration:none}
}

/* ---------------- getekende markeringen i.p.v. emoji ---------------- */
svg.mk{width:1.05em;height:1.05em;vertical-align:-.15em;display:inline-block}
.kraak .k-x svg.mk{color:#ff5f57}
.kraak .k-ok svg.mk{color:#58e08a}
.steen svg.s-ico{width:42px;height:42px;display:block;margin:0 auto 2px}
.steen .s-w.groot{font-size:26px;line-height:1.5}
.profiel li svg.pf-ico{width:30px;height:30px;display:block}
.profiel .pf-avatar svg{width:100%;height:100%;display:block}
.zinstrook .pijl svg{width:34px;height:34px;color:var(--brand);display:block}
button.optie svg.mk{width:1.1em;height:1.1em}