/* Twee paletten, één set rollen.
   Licht: zachtgeel vlak, lila en mint, warme donkerbruine inkt.
   Donker: diep indigo vlak, violet paneel, mint en perzik als accent.
   Elke kleur hieronder vult een rol; nergens anders in dit bestand staat nog
   een losse kleurwaarde, zodat beide modi gegarandeerd compleet zijn. */
:root {
  color-scheme: light;
  --paper:#fbf6dc;
  --panel-road:#3a3170;
  --surface:#fdf9e8;
  --surface-soft:#f5eed3;
  --card:#fffdf7;
  --line:#ebe1bd;

  --ink:#2b1f1a;
  --muted:#73634b;

  --blue:#5a4fc6;        /* lila: primaire actie, donker genoeg voor tekst */
  --blue-dark:#463ca8;
  --blue-ring:#cdc8f6;
  --on-blue-text:#f3f1fd;
  --on-blue-08:rgba(255,255,255,.10);
  --on-blue-12:rgba(255,255,255,.16);
  --on-blue-25:rgba(255,255,255,.30);

  --mint:#c6f0da;
  --on-mint:#372f8c;
  --mint-line:#8ed5b0;
  --mint-soft:#e7f8ee;

  --good:#2b7a53;
  --good-soft:#d9f4e4;

  --coral:#ae431c;
  --coral-line:#f0b49b;
  --coral-soft:#fce6db;
  --coral-ring:rgba(174,67,28,.16);
  --warn:#b0561f;
  --yellow:#f3cf5f;

  --scrim:rgba(43,31,26,.94);
  --scrim-soft:rgba(43,31,26,.45);
  --shadow-faint:rgba(43,31,26,.05);
  --shadow-soft:rgba(43,31,26,.10);
  --shadow:0 18px 40px rgba(43,31,26,.09);

  /* Illustraties zijn vlakke tekeningen met een donkere contour; die blijven
     in beide modi op een lichte ondergrond staan, anders vallen de lijnen weg. */
  --figure-bed:#fffdf7;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --paper:#1a1238;
  --panel-road:#2b1f5e;
  --surface:#211849;
  --surface-soft:#2a2056;
  --card:#251b4f;
  --line:#3e3076;
  --ink:#f2eefc;
  --muted:#b4aad9;
  --blue:#a08bff;
  --blue-dark:#b8a8ff;
  --blue-ring:#5b46b8;
  --on-blue-text:#170f33;
  --on-blue-08:rgba(255,255,255,.10);
  --on-blue-12:rgba(255,255,255,.16);
  --on-blue-25:rgba(255,255,255,.32);
  --mint:#372b76;
  --on-mint:#f2eefc;
  --mint-line:#5e4ba8;
  --mint-soft:#2a205e;
  --good:#8ef0c4;
  --good-soft:#1f4a3b;
  --coral:#f8a68a;
  --coral-line:#a65c43;
  --coral-soft:#45231a;
  --coral-ring:rgba(248,166,138,.18);
  --warn:#f0b183;
  --yellow:#f2cf6b;
  --scrim:rgba(9,5,24,.96);
  --scrim-soft:rgba(9,5,24,.55);
  --shadow-faint:rgba(0,0,0,.22);
  --shadow-soft:rgba(0,0,0,.34);
  --shadow:0 18px 40px rgba(0,0,0,.40);
  --figure-bed:#efe9fb;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper:#1a1238;
    --panel-road:#2b1f5e;
    --surface:#211849;
    --surface-soft:#2a2056;
    --card:#251b4f;
    --line:#3e3076;
    --ink:#f2eefc;
    --muted:#b4aad9;
    --blue:#a08bff;
    --blue-dark:#b8a8ff;
    --blue-ring:#5b46b8;
    --on-blue-text:#170f33;
    --on-blue-08:rgba(255,255,255,.10);
    --on-blue-12:rgba(255,255,255,.16);
    --on-blue-25:rgba(255,255,255,.32);
    --mint:#372b76;
    --on-mint:#f2eefc;
    --mint-line:#5e4ba8;
    --mint-soft:#2a205e;
    --good:#8ef0c4;
    --good-soft:#1f4a3b;
    --coral:#f8a68a;
    --coral-line:#a65c43;
    --coral-soft:#45231a;
    --coral-ring:rgba(248,166,138,.18);
    --warn:#f0b183;
    --yellow:#f2cf6b;
    --scrim:rgba(9,5,24,.96);
    --scrim-soft:rgba(9,5,24,.55);
    --shadow-faint:rgba(0,0,0,.22);
    --shadow-soft:rgba(0,0,0,.34);
    --shadow:0 18px 40px rgba(0,0,0,.40);
    --figure-bed:#efe9fb;
  }
}

/* Vlakke tekeningen krijgen hun eigen lichte bed, ook 's nachts. */
.question-visual img,.static-scene img,.read-figure img,.sign-image img {
  background:var(--figure-bed);
}

/* Schakelaar in de topbalk */
.theme-toggle {
  display:grid; place-items:center; width:38px; height:38px; flex:none;
  border:1px solid var(--line); border-radius:12px;
  color:var(--ink); background:var(--card); cursor:pointer;
}
.theme-toggle svg { width:19px; height:19px; fill:currentColor; }
.theme-toggle .icon-dark { display:none; }
:root[data-theme="dark"] .theme-toggle .icon-dark { display:block; }
:root[data-theme="dark"] .theme-toggle .icon-light { display:none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-dark { display:block; }
  :root:not([data-theme="light"]) .theme-toggle .icon-light { display:none; }
}

* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Manrope,system-ui,sans-serif; }
button { font:inherit; cursor:pointer; }
.app-shell { min-height:100vh; max-width:1280px; margin:auto; padding:0 36px; }
.topbar { height:86px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:11px; flex:none; margin-inline-end:20px; color:inherit; text-decoration:none; letter-spacing:-.03em; }
.brand-mark { display:grid; place-items:center; width:42px; height:38px; }
.brand-mark { flex:none; }
/* Het merkteken: open waarschuwingsdriehoek met twee V's, de linker hoger. Kleuren volgen licht en donker. */
.brand-mark svg { width:100%; height:100%; overflow:visible; }
.brand-mark path { fill:none; stroke-linecap:round; stroke-linejoin:round; }
.brand-mark .bm-rand { stroke:var(--ink); stroke-width:30; }
.brand-mark .bm-v1 { stroke:var(--blue); stroke-width:40; }
.brand-mark .bm-v2 { stroke:var(--good); stroke-width:40; }
.brand-v1 { color:var(--blue); }
.brand-v2 { color:var(--good); }
.brand strong,.brand small { display:block; }.brand strong { font-size:18px; }.brand small { color:var(--muted); font-size:11px; letter-spacing:.04em; text-transform:lowercase; white-space:nowrap; }
.top-nav { display:flex; gap:28px; align-items:center; margin-left:80px; }.nav-link { border:0; background:none; color:var(--muted); padding:10px 0; font-size:13px; font-weight:700; }.nav-link.is-active { color:var(--blue); border-bottom:2px solid var(--coral); }.nav-count { padding:2px 6px; border-radius:10px; color:var(--on-mint); background:var(--mint); font-size:10px; }
.streak { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:12px; }.streak b { color:var(--ink); }.streak-dot { width:8px; height:8px; border-radius:50%; background:var(--coral); box-shadow:0 0 0 5px var(--coral-ring); }
.main-content { padding:52px 0 76px; }.hero { display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center; margin-bottom:42px; }.eyebrow { color:var(--coral); font:500 11px/1.2 'DM Mono',monospace; letter-spacing:.12em; text-transform:uppercase; }.hero h1 { max-width:630px; margin:13px 0 18px; font-size:clamp(35px,5vw,64px); line-height:1.04; letter-spacing:-.065em; }.hero p { max-width:550px; margin:0; color:var(--muted); line-height:1.75; font-size:15px; }.hero-visual { min-height:260px; position:relative; overflow:hidden; border-radius:28px; background:var(--blue); padding:28px; color:var(--card); box-shadow:var(--shadow); }.hero-visual:after { content:''; position:absolute; width:230px; height:230px; border:34px solid var(--on-blue-12); border-radius:50%; right:-48px; bottom:-90px; }.road { position:absolute; left:24px; right:24px; bottom:0; height:62px; background:var(--panel-road); transform:skewY(-7deg); }.road:after { content:'—  —  —  —  —'; position:absolute; color:var(--yellow); letter-spacing:14px; left:25%; top:22px; }.visual-copy { position:relative; z-index:1; max-width:230px; }.visual-copy b { display:block; margin:9px 0; font-size:30px; line-height:1.02; letter-spacing:-.06em; }.visual-copy span { color:var(--on-blue-text); font-size:12px; line-height:1.5; }
.section-head { display:flex; justify-content:space-between; align-items:end; margin:30px 0 16px; }.section-head h2 { margin:0; font-size:19px; letter-spacing:-.04em; }.section-head p { margin:0; color:var(--muted); font-size:12px; }.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; }.card { background:var(--card); border:1px solid var(--line); border-radius:18px; padding:22px; box-shadow:0 5px 20px var(--shadow-faint); }.topic-card { min-height:160px; display:flex; flex-direction:column; justify-content:space-between; cursor:pointer; transition:.2s ease; }.topic-card:hover { border-color:var(--mint-line); transform:translateY(-3px); box-shadow:var(--shadow); }.topic-icon { display:grid; place-items:center; width:36px; height:36px; border-radius:12px; background:var(--mint); color:var(--on-mint); font-weight:800; }.topic-card h3 { margin:17px 0 5px; font-size:15px; }.topic-card p { color:var(--muted); margin:0; font-size:12px; }.topic-meta { display:flex; justify-content:space-between; color:var(--muted); font:11px 'DM Mono',monospace; }.topic-meta b { color:var(--blue); font-weight:500; }
.action-row { display:flex; gap:12px; margin-top:28px; }.primary,.secondary { border-radius:12px; padding:13px 19px; font-size:13px; font-weight:800; }.primary { border:1px solid var(--blue); background:var(--blue); color:var(--on-blue-text); }.primary:hover { background:var(--blue-dark); }.secondary { border:1px solid var(--line); background:var(--card); color:var(--ink); }.source-note { display:flex; gap:10px; align-items:flex-start; margin-top:25px; color:var(--muted); font-size:11px; line-height:1.5; }.source-note strong { color:var(--blue); }
.quiz-wrap { max-width:760px; margin:0 auto; }.quiz-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:34px; }.progress-line { height:5px; margin:14px 0 32px; border-radius:5px; background:var(--line); }.progress-line span { display:block; height:100%; border-radius:5px; background:var(--coral); transition:.3s; }.quiz-card { background:var(--card); border:1px solid var(--line); border-radius:22px; padding:34px; box-shadow:var(--shadow); }.quiz-card h1 { margin:8px 0 28px; font-size:27px; line-height:1.25; letter-spacing:-.045em; }.option { display:flex; gap:13px; align-items:center; width:100%; padding:16px; border:1px solid var(--line); border-radius:13px; background:var(--card); text-align:left; margin:9px 0; color:var(--ink); font-size:14px; }.option:hover { border-color:var(--mint-line); background:var(--surface); }.option.selected { border-color:var(--blue); background:var(--mint); }.option.correct { border-color:var(--good); background:var(--good-soft); }.option.wrong { border-color:var(--coral-line); background:var(--coral-soft); }.option-key { display:grid; place-items:center; flex:none; width:26px; height:26px; border:1px solid var(--line); border-radius:50%; color:var(--muted); font:12px 'DM Mono',monospace; }.feedback { margin-top:18px; padding:14px; border-radius:12px; background:var(--surface-soft); color:var(--muted); font-size:12px; line-height:1.6; }.feedback strong { color:var(--ink); }.quiz-actions { display:flex; justify-content:space-between; margin-top:25px; }.quiz-actions .primary:disabled { cursor:not-allowed; opacity:.4; }
.result { text-align:center; padding:36px 20px; }.result-score { display:grid; place-items:center; width:130px; height:130px; margin:20px auto; border:10px solid var(--mint); border-radius:50%; color:var(--blue); font-size:34px; font-weight:800; }.result h1 { margin:0 0 8px; }.result p { color:var(--muted); font-size:13px; }.review { text-align:left; margin-top:28px; }.review-row { display:flex; justify-content:space-between; border-top:1px solid var(--line); padding:13px 0; font-size:12px; }.ok { color:var(--good); }.bad { color:var(--coral); }
.empty { text-align:center; padding:60px 20px; color:var(--muted); }.empty h1 { color:var(--ink); }.back { border:0; background:none; padding:0; color:var(--blue); font-size:12px; font-weight:800; }.footer { display:flex; justify-content:space-between; border-top:1px solid var(--line); padding:17px 0; color:var(--muted); font-size:11px; }.source-badge { color:var(--blue); font-family:'DM Mono',monospace; }
@media (max-width:760px) { .app-shell { padding:0 18px; }.topbar { height:76px; }.top-nav { margin-left:0; gap:12px; }.top-nav .nav-link { font-size:11px; }.streak { display:none; }.hero { grid-template-columns:1fr; gap:22px; }.hero-visual { min-height:210px; }.cards { grid-template-columns:1fr; }.main-content { padding-top:34px; }.quiz-card { padding:22px; }.quiz-card h1 { font-size:23px; }.footer { gap:16px; flex-direction:column; } }
.question-visual { margin:18px 0 22px; overflow:hidden; border:1px solid var(--line); border-radius:15px; background:var(--surface); }
.question-visual img { display:block; width:100%; height:340px; object-fit:contain; }
.question-visual figcaption { padding:8px 12px; border-top:1px solid var(--line); color:var(--muted); background:var(--card); font:10px 'DM Mono',monospace; }
@media (max-width:760px) { .question-visual img { height:260px; } }
.trust-row { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.trust-row span { padding:7px 9px; border:1px solid var(--line); border-radius:20px; color:var(--blue); background:var(--card); font:10px 'DM Mono',monospace; }
.source-warning { padding:16px; border:1px solid var(--mint); border-radius:14px; background:var(--surface); }
.source-warning>span:first-child { display:grid; place-items:center; flex:none; width:21px; height:21px; border-radius:50%; color:var(--card); background:var(--blue); font-weight:800; }
.question-label { display:flex; align-items:center; gap:8px; color:var(--muted); font:11px 'DM Mono',monospace; }
.question-label span { padding:5px 8px; border-radius:7px; color:var(--on-mint); background:var(--mint); }
.question-label b { font-weight:500; }
.answer-source { display:grid; grid-template-columns:1fr auto; gap:3px 16px; margin-top:10px; padding:13px 14px; border:1px solid var(--mint); border-radius:12px; color:var(--blue); background:var(--card); text-decoration:none; }
.answer-source span { color:var(--muted); font:9px 'DM Mono',monospace; text-transform:uppercase; letter-spacing:.08em; }
.answer-source strong { font-size:11px; }
.answer-source b { grid-column:2; grid-row:1 / 3; align-self:center; font-size:10px; }
.answer-source:hover { border-color:var(--mint-line); }
.official-sources { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.source-link-card { display:flex; min-height:120px; flex-direction:column; padding:18px; border:1px solid var(--line); border-radius:15px; color:var(--ink); background:var(--card); text-decoration:none; }
.source-link-card span { color:var(--coral); font:9px 'DM Mono',monospace; text-transform:uppercase; }
.source-link-card strong { margin:7px 0 auto; font-size:13px; }
.source-link-card b { color:var(--blue); font-size:10px; }
.source-link-card:hover { border-color:var(--mint-line); }
.source-unavailable { color:var(--muted); font-weight:600; }
@media (max-width:760px) { .official-sources { grid-template-columns:1fr; }.answer-source { grid-template-columns:1fr; }.answer-source b { grid-column:1; grid-row:auto; margin-top:5px; } }
@media (max-width:760px) {
  .hero>* { min-width:0; }
  .hero-visual { width:100%; }
  .topbar { height:auto; min-height:112px; padding:13px 0 8px; flex-wrap:wrap; align-content:center; }
  .brand { width:100%; }
}
.static-scene img { width:100%; height:auto; max-height:420px; object-fit:contain; background:var(--surface-soft); }
.answer-source { width:100%; text-align:left; cursor:pointer; }
.topic-card:disabled { cursor:not-allowed; opacity:.55; transform:none; box-shadow:none; }
.topic-card:disabled:hover { border-color:var(--line); transform:none; box-shadow:none; }
.local-rule { cursor:default; }
.local-rule p { grid-column:1/-1; margin:5px 0 0; color:var(--muted); font-size:11px; line-height:1.55; }
.local-rule p b { display:inline; color:var(--blue); font-size:11px; }
.sign-heading { align-items:center; gap:24px; }
.sign-search { display:grid; gap:5px; min-width:250px; color:var(--muted); font:10px 'DM Mono',monospace; text-transform:uppercase; }
.sign-search input { width:100%; border:1px solid var(--line); border-radius:12px; padding:12px 14px; color:var(--ink); background:var(--card); font:13px Manrope,sans-serif; text-transform:none; outline:none; }
.sign-search input:focus { border-color:var(--mint-line); box-shadow:0 0 0 3px var(--mint); }
.sign-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:13px; }
.sign-card { min-width:0; overflow:hidden; border:1px solid var(--line); border-radius:16px; background:var(--card); }
.sign-image { display:grid; place-items:center; height:190px; padding:16px; overflow:hidden; background:var(--surface); border-bottom:1px solid var(--line); }
.sign-image img { display:block; width:auto; height:auto; min-width:0; min-height:0; max-width:100%; max-height:100%; object-fit:contain; }
.sign-card>div:last-child { padding:15px; }
.sign-card span { color:var(--coral); font:9px 'DM Mono',monospace; text-transform:uppercase; }
.sign-card h3 { margin:5px 0 6px; color:var(--blue); font-size:18px; }
.sign-card p { margin:0; color:var(--muted); font-size:11px; line-height:1.5; }
@media (max-width:980px) { .sign-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:760px) { .sign-heading { align-items:stretch; flex-direction:column; }.sign-search { min-width:0; }.sign-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.sign-image { height:150px; } }
@media (max-width:430px) { .sign-grid { grid-template-columns:1fr; } }

/* Interface refresh */
/* De tweede kleurdefinitie uit de oude opzet is vervallen; het palet staat bovenaan. */
body { min-width:320px; }
.app-shell { max-width:1360px; padding:0 42px; }
.topbar { position:sticky; top:0; z-index:20; height:82px; background:var(--surface); backdrop-filter:blur(14px); }
.top-nav { gap:5px; margin-left:auto; }
.nav-link { padding:10px 12px; border-radius:10px; }
.nav-link:hover { color:var(--on-mint); background:var(--mint); }
.nav-link.is-active { border-bottom:0; color:var(--on-mint); background:var(--mint); }
.main-content { padding:48px 0 80px; }
.hero { grid-template-columns:minmax(0,1.05fr) minmax(360px,.75fr); gap:54px; margin:12px 0 28px; }
.hero-copy { padding:22px 0; }
.hero h1 { max-width:690px; margin:14px 0 20px; font-size:clamp(42px,5vw,66px); line-height:1.01; }
.hero p { max-width:620px; font-size:16px; line-height:1.7; }
.primary,.secondary { min-height:46px; border-radius:13px; padding:13px 19px; transition:.18s ease; }
.primary span { margin-left:7px; opacity:.72; font-size:10px; }
.primary:hover,.secondary:hover { transform:translateY(-1px); box-shadow:0 10px 24px var(--shadow-soft); }
.hero-visual { min-height:320px; padding:34px; background:linear-gradient(145deg,var(--blue),var(--blue-dark)); }
.hero-visual:after { right:-30px; bottom:-82px; }
.visual-copy { max-width:310px; }
.how-list { display:grid; gap:15px; margin:24px 0 0; padding:0; list-style:none; }
.how-list li { display:flex; align-items:center; gap:13px; color:var(--surface-soft); font-size:13px; }
.how-list b { display:grid; place-items:center; flex:none; width:32px; height:32px; border:1px solid var(--on-blue-25); border-radius:10px; color:var(--yellow); font:500 12px 'DM Mono',monospace; }
.how-list span { line-height:1.35; }
.dashboard-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:28px 0 38px; }
.stat-card { display:grid; gap:4px; min-height:118px; padding:20px; border:1px solid var(--line); border-radius:18px; color:var(--ink); background:var(--card); text-align:left; transition:.18s ease; }
.stat-card:hover { border-color:var(--mint-line); transform:translateY(-2px); box-shadow:var(--shadow); }
.stat-card span { color:var(--muted); font:500 10px 'DM Mono',monospace; text-transform:uppercase; letter-spacing:.08em; }
.stat-card strong { color:var(--blue); font-size:28px; line-height:1; }
.stat-card small { color:var(--muted); font-size:11px; }
.section-head { margin:36px 0 17px; }
.section-head h2 { font-size:22px; }
.section-head p { margin-top:5px; font-size:12px; }
.home-chapter-head { align-items:center; }
.text-button { border:0; padding:8px 0; color:var(--blue); background:none; font-size:12px; font-weight:800; }
.cards { gap:16px; }
.topic-card { display:grid; grid-template-columns:auto 1fr; grid-template-rows:1fr auto; column-gap:15px; min-height:178px; padding:21px; text-align:left; }
.topic-icon { grid-column:1; grid-row:1; }
.topic-copy { grid-column:2; grid-row:1; align-self:start; }
.topic-card h3 { margin:2px 0 7px; font-size:16px; }
.topic-card p { min-height:36px; line-height:1.5; }
.topic-meta { grid-column:1/-1; grid-row:2; align-items:center; padding-top:18px; border-top:1px solid var(--surface); }
.topic-meta b { color:var(--blue); font-family:Manrope,sans-serif; font-weight:800; }
.page-intro { display:flex; align-items:end; justify-content:space-between; gap:28px; margin:4px 0 28px; }
.page-intro h1 { margin:8px 0 8px; font-size:42px; letter-spacing:-.055em; }
.page-intro p { max-width:650px; margin:0; color:var(--muted); font-size:13px; line-height:1.6; }
.topic-search { display:grid; gap:6px; max-width:520px; margin:0 0 22px; color:var(--muted); font:500 10px 'DM Mono',monospace; text-transform:uppercase; }
.topic-search input,.sign-search input { border:1px solid var(--line); border-radius:13px; padding:13px 15px; background:var(--card); }
.empty.compact { grid-column:1/-1; padding:38px 20px; }
.factcheck-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-bottom:38px; }
.factcheck-grid article { display:flex; gap:15px; min-height:126px; padding:20px; border:1px solid var(--mint-line); border-radius:17px; background:var(--mint-soft); }
.factcheck-grid article>span { display:grid; place-items:center; flex:none; width:34px; height:34px; border-radius:11px; color:var(--card); background:var(--blue); font:500 12px 'DM Mono',monospace; }
.factcheck-grid strong { font-size:13px; }
.factcheck-grid p { margin:6px 0 0; color:var(--muted); font-size:11px; line-height:1.55; }
.official-sources { grid-template-columns:repeat(5,minmax(0,1fr)); }
.source-link-card { min-height:170px; }
.source-link-card strong { margin:9px 0 7px; }
.source-link-card p { flex:1; margin:0 0 14px; color:var(--muted); font-size:11px; line-height:1.55; }
.source-link-card b { margin-top:auto; }
.quiz-wrap { max-width:820px; }
.quiz-top { margin-bottom:18px; }
.progress-line { margin:12px 0 28px; }
.quiz-card { padding:32px; border-radius:24px; }
.quiz-card h1 { margin:21px 0 26px; font-size:28px; }
.question-visual { margin:18px 0 0; }
.question-visual figcaption { padding:9px 12px; background:var(--card); text-transform:none; }
.option { min-height:58px; margin:10px 0; padding:15px 17px; border-radius:14px; line-height:1.45; }
.option:focus-visible,.primary:focus-visible,.secondary:focus-visible,.nav-link:focus-visible,.topic-card:focus-visible { outline:3px solid var(--blue-ring); outline-offset:2px; }
.feedback { margin-top:20px; padding:16px 17px; border-left:4px solid var(--blue); font-size:13px; }
.answer-source { display:block; margin-top:12px; padding:16px 17px; background:var(--mint-soft); }
.answer-source span { display:block; margin-bottom:7px; color:var(--coral); }
.answer-source strong { display:block; color:var(--ink); font-size:13px; }
.local-rule p { margin:8px 0 0; font-size:12px; line-height:1.65; }
.local-rule p b { color:var(--blue); font-size:12px; }
.footer { padding:22px 0 28px; }
.answer-source-links { display:flex; flex-wrap:wrap; gap:8px; margin-top:11px; }
.answer-source-links a { display:inline-flex; padding:8px 10px; border:1px solid var(--mint-line); border-radius:9px; color:var(--blue); background:var(--card); text-decoration:none; font-size:11px; font-weight:800; }
.answer-source-links a:hover { border-color:var(--blue); }
.local-rule .scenario-source { padding-top:8px; border-top:1px solid var(--mint); }

@media (max-width:1120px) {
  .official-sources { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:900px) {
  .app-shell { padding:0 24px; }
  .hero { grid-template-columns:1fr; }
  .hero-visual { min-height:260px; }
  .cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .top-nav { overflow-x:auto; scrollbar-width:none; }
}
@media (max-width:640px) {
  .app-shell { padding:0 16px; }
  .topbar { position:relative; min-height:154px; padding:14px 0 10px; }
  .brand { width:100%; }
  .main-content { padding:28px 0 54px; }
  .hero { gap:20px; margin-top:0; }
  .hero-copy { padding:0; }
  .hero h1 { font-size:40px; }
  .hero p { font-size:14px; }
  .action-row { display:grid; grid-template-columns:1fr; gap:9px; }
  .action-row .primary,.action-row .secondary { width:100%; }
  .hero-visual { min-height:245px; padding:25px; }
  .dashboard-stats { grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin:20px 0 34px; }
  .stat-card { min-height:92px; padding:13px 10px; }
  .stat-card strong { font-size:23px; }
  .stat-card small { display:none; }
  .home-chapter-head { align-items:flex-start; flex-direction:column; gap:8px; }
  .cards { grid-template-columns:1fr; }
  .topic-card { min-height:158px; }
  .page-intro { align-items:stretch; flex-direction:column; gap:18px; }
  .page-intro h1 { font-size:34px; }
  .page-intro .primary { width:100%; }
  .factcheck-grid,.official-sources { grid-template-columns:1fr; }
  .factcheck-grid article { min-height:0; }
  .quiz-wrap { width:100%; }
  .quiz-card { padding:20px; border-radius:20px; }
  .quiz-card h1 { font-size:24px; }
  .question-visual { border-radius:13px; }
  .option { align-items:flex-start; padding:14px; font-size:13px; }
  .question-visual img { height:auto; max-height:340px; }
  .quiz-actions { gap:10px; }
  .footer { flex-direction:column; gap:7px; }
}

/* Doorlopende leesweergave per hoofdstuk */
.read-shell { max-width:720px; margin:0 auto; }
.read-hero { margin:18px 0 40px; padding-bottom:26px; border-bottom:1px solid var(--line); }
.read-hero h1 { margin:12px 0 16px; font-size:clamp(30px,4.4vw,46px); line-height:1.06; letter-spacing:-.055em; }
.read-lead { margin:0; color:var(--ink); font-size:17px; line-height:1.72; }
.read-meta { display:flex; gap:18px; margin-top:22px; color:var(--muted); font:11px 'DM Mono',monospace; letter-spacing:.06em; text-transform:uppercase; }
.read-meta span+span { position:relative; padding-left:18px; }
.read-meta span+span:before { content:''; position:absolute; left:0; top:50%; width:5px; height:5px; margin-top:-2px; border-radius:50%; background:var(--coral); }

.read-body { font-size:16px; line-height:1.8; overflow-wrap:anywhere; }
.read-body p { margin:0 0 20px; }
.read-body>p:first-of-type:first-letter { float:left; margin:6px 10px 0 0; color:var(--blue); font-size:56px; line-height:.78; font-weight:800; }
.read-heading { margin:44px 0 16px; font-size:22px; line-height:1.25; letter-spacing:-.035em; }
.read-heading:first-child { margin-top:0; }
.read-list,.read-options { margin:0 0 20px; padding-left:22px; }
.read-list li,.read-options li { margin-bottom:8px; }
.read-options { list-style:none; padding-left:0; }
.read-options li { padding:11px 15px; margin-bottom:7px; border:1px solid var(--line); border-radius:11px; background:var(--card); font-size:14px; }

.read-figure { margin:0 auto 24px; }
.read-figure img { display:block; width:100%; height:auto; border-radius:12px; background:var(--card); }
.read-scene { max-width:min(100%,640px); }
.read-duo { display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:start; margin:1.2em 0; }
.read-duo .read-scene { max-width:100%; margin:0; }
@media (max-width:720px) { .read-duo { grid-template-columns:1fr; } }
.read-scene .scene-holder { border-radius:12px; overflow:hidden; background:var(--card); line-height:0; }
.read-scene .scene-holder svg { display:block; width:100%; height:auto; }
/* Fotorealistische render als achtergrond, met de annotatielaag van de SVG erover (zie paintScene). */
.scene-3d { position:relative; line-height:0; }
.scene-3d img, .scene-3d video { display:block; width:100%; height:auto; }
.scene-3d video { position:absolute; inset:0; height:100%; object-fit:cover; }
/* `hidden` moet winnen van display:block hierboven: anders blijft een gepauzeerde video over de foto en over de
   andere blikken liggen (de knoppen lijken dan niets te doen) */
.scene-3d video[hidden] { display:none; }
.scene-3d .scene-overlay { position:absolute; inset:0; pointer-events:none; }
.scene-3d .scene-overlay svg { width:100%; height:100%; max-height:none; }
.scene-3d .scene-overlay svg g[data-layer]:not([data-layer="annotation"]) { display:none; }
.scene-3d .scene-overlay svg .bewegend { display:none; }
.scene-3d .scene-overlay[hidden] { display:none; }
.scene-3d.tikbaar { cursor:pointer; }
.scene-3d .scene-pick { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.scene-views { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin:8px 0 0; }
.scene-views button { padding:6px 12px; border:1px solid var(--line); border-radius:999px; background:var(--card); color:var(--ink); font:600 12px 'DM Mono',monospace; cursor:pointer; }
.scene-views button[aria-pressed="true"] { border-color:var(--blue); background:var(--blue); color:#fff; }
.scene-views button:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }
.scene-tip { margin:8px 0 0; text-align:center; font:600 13px 'DM Mono',monospace; color:var(--ink); }
.scene-play[hidden] { display:none; }
.scene-3d .scene-diepte { position:absolute; inset:0; width:100%; height:100%; }
.scene-3d .scene-diepte[hidden] { display:none; }
.scene-pano { position:absolute; inset:0; overflow:hidden; cursor:grab; touch-action:pan-y; background:#0d1114; border-radius:inherit; }
/* 3D-weergave (gaussian splat): vult het vlak van de illustratie, knoppen onderin */
.splat-weergave { position:absolute; inset:0; overflow:hidden; border-radius:inherit; background:#c9dcea; line-height:normal; }
.splat-canvas { position:relative; z-index:1; display:block; width:100%; height:100%; touch-action:none; cursor:grab; }
/* lagen: spiegelfoto (0) onder het canvas (1), knoppen, paneel, status en spiegelrand (2) erboven */
.splat-status, .splat-knoppen, .splat-proef, .splat-spiegel { z-index:2; }
.splat-spiegel-foto { z-index:0; }
.splat-canvas:active { cursor:grabbing; }
.splat-status { position:absolute; inset:0; display:grid; place-items:center; margin:0; background:rgba(13,17,20,.45); color:#fff; font:600 14px 'DM Mono',monospace; }
.splat-status[hidden] { display:none; }
.splat-knoppen { position:absolute; left:8px; right:8px; bottom:8px; display:flex; flex-wrap:wrap; justify-content:center; gap:6px; pointer-events:none; }
.splat-knoppen button { pointer-events:auto; padding:6px 12px; border:1px solid rgba(255,255,255,.7); border-radius:999px; background:rgba(13,17,20,.6); color:#fff; font:600 12px 'DM Mono',monospace; cursor:pointer; }
.splat-knoppen button[aria-pressed="true"] { border-color:var(--blue); background:var(--blue); }
.splat-knoppen .splat-zone[aria-pressed="true"] { border-color:#e9a23b; background:#e9a23b; color:#1b1408; }
.splat-knoppen button:focus-visible { outline:2px solid #fff; outline-offset:2px; }
/* Probeer zelf: paneel met uitleg en knoppen bovenaan, de rechterbuitenspiegel als vak rechtsboven */
.splat-knoppen .splat-proef-knop[aria-pressed="true"] { border-color:#3fa36b; background:#3fa36b; }
.splat-proef { position:absolute; left:8px; top:8px; max-width:min(62%, 420px); padding:8px 10px; border-radius:10px; background:rgba(13,17,20,.72); color:#fff; display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.splat-proef[hidden] { display:none; }
.splat-proef p { flex:1 1 100%; margin:0 0 2px; font:500 13px/1.35 Manrope, system-ui, sans-serif; }
.splat-proef button { padding:6px 12px; border:1px solid rgba(255,255,255,.7); border-radius:999px; background:rgba(255,255,255,.08); color:#fff; font:600 12px 'DM Mono',monospace; cursor:pointer; }
.splat-proef button[aria-pressed="true"] { border-color:var(--blue); background:var(--blue); }
.splat-proef button[hidden] { display:none; }
.splat-spiegel, .splat-spiegel-foto { position:absolute; right:10px; top:10px; width:30%; aspect-ratio:1.4; border-radius:14px 14px 22px 22px; }
.splat-spiegel-foto { background:#cdd6dc center/cover no-repeat; }
.splat-spiegel-foto[hidden] { display:none; }
.splat-spiegel { border:3px solid #1d2226; border-radius:14px 14px 22px 22px; box-shadow:0 2px 8px rgba(0,0,0,.45); pointer-events:none; }
.splat-spiegel[hidden] { display:none; }
@media (max-width:520px){ .splat-proef { max-width:none; right:8px; } .splat-spiegel, .splat-spiegel-foto { top:auto; bottom:44px; width:36%; } }
/* Telefoon: kleinere knoppen op één rij, zodat ze niet een derde van het beeld bedekken (nog 24 px hoog) */
@media (max-width:520px){ .splat-knoppen { left:4px; right:4px; bottom:4px; gap:4px; flex-wrap:wrap; } .splat-knoppen button { padding:5px 8px; font-size:11px; white-space:nowrap; } }
.scene-pano:active { cursor:grabbing; }
.scene-pano:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }
.scene-pano-kubus { position:absolute; inset:0; transform-style:preserve-3d; }
.scene-pano-kubus img { position:absolute; max-width:none; user-select:none; -webkit-user-drag:none; }
.scene-pano-hint { position:absolute; left:50%; bottom:10px; transform:translateX(-50%); padding:5px 12px; border-radius:999px; background:rgba(13,17,20,.72); color:#fff; font:600 12px 'DM Mono',monospace; line-height:1.4; pointer-events:none; }
.scene-pano-hint[hidden] { display:none; }
.scene-spiegels img { position:absolute; width:auto; height:auto; border:2px solid #0d1114; border-radius:8px; box-shadow:0 2px 10px rgba(0,0,0,.45); }
.scene-spiegels .spiegel-binnen { top:4%; left:50%; width:32%; transform:translateX(-50%); }
.scene-spiegels .spiegel-links { left:2%; bottom:5%; width:19%; }
.scene-spiegels .spiegel-rechts { right:2%; bottom:5%; width:19%; }
.scene-play { display:block; margin:8px auto 0; padding:6px 14px; border:1px solid var(--line); border-radius:999px; background:var(--card); color:var(--ink); font:600 12px 'DM Mono',monospace; cursor:pointer; }
.scene-play:hover { border-color:var(--blue-ring); }
.scene-play:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }
.read-figure figcaption { margin-top:7px; color:var(--muted); font:11px 'DM Mono',monospace; text-align:center; line-height:1.5; }
.read-pair { display:grid; grid-template-columns:auto 1fr; gap:22px; align-items:start; margin:0 0 24px; }
.read-pair .read-figure { width:130px; }
.read-pair .read-figure { margin:0; }
.read-pair p:last-child { margin-bottom:0; }

.read-table { margin:0 0 26px; overflow-x:auto; border:1px solid var(--line); border-radius:14px; background:var(--card); }
.read-table table { border-collapse:collapse; width:100%; font-size:13px; }
.read-table th,.read-table td { padding:11px 14px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; line-height:1.6; }
.read-table tr:last-child td { border-bottom:0; }
.read-table th { background:var(--mint); color:var(--on-mint); font-size:12px; }
/* .read-body breekt lange woorden waar dan ook (overflow-wrap:anywhere); in een tabel perst de browser een kolom
   dan tot één letter breed. Hier breken alleen spaties en lettergrepen, en de eerste kolom houdt een leesbare breedte. */
.read-table th,.read-table td { overflow-wrap:normal; word-break:normal; hyphens:auto; }
.read-table th:first-child,.read-table td:first-child { min-width:9em; }

.read-checks { margin:44px 0 0; padding:26px; border:1px solid var(--mint-line); border-radius:20px; background:var(--mint-soft,var(--surface-soft)); }
.read-checks h2 { margin:0 0 6px; font-size:18px; letter-spacing:-.035em; }
.read-checks-intro { margin:0 0 16px; color:var(--muted); font-size:13px; line-height:1.6; }
.read-checks article+article { margin-top:12px; }
.read-checks article { padding:16px; border:1px solid var(--mint-line); border-radius:14px; background:var(--card); }
.read-checks article>span { color:var(--coral); font:9px 'DM Mono',monospace; letter-spacing:.08em; text-transform:uppercase; }
.read-checks article p { margin:7px 0 0; color:var(--muted); font-size:13px; line-height:1.65; }
.read-checks a { display:inline-block; margin-top:10px; color:var(--blue); font-size:12px; font-weight:800; }

.read-footer { display:flex; justify-content:space-between; align-items:center; gap:20px; margin:48px 0 0; padding:26px; border-radius:20px; background:var(--blue); color:var(--card); }
.read-footer strong { display:block; font-size:17px; }
.read-footer p { margin:5px 0 0; color:var(--on-blue-text); font-size:12px; }
.read-footer .primary { flex:none; border-color:var(--card); background:var(--card); color:var(--blue); }
.read-footer .primary:hover { background:var(--mint); }

@media (max-width:720px){
  .read-body { font-size:15px; }
  .read-pair { grid-template-columns:96px 1fr; gap:15px; }
  .read-footer { flex-direction:column; align-items:stretch; text-align:left; }
  .read-footer .primary { width:100%; }
}

/* Gratis oefenlimiet en eenmalige ontgrendeling */
.paywall { display:flex; justify-content:space-between; align-items:center; gap:20px; margin:0 0 22px; padding:20px 24px; border:1px solid var(--mint-line); border-radius:18px; background:var(--mint); }
.paywall.is-spent { border-color:var(--coral-line); background:var(--coral-soft); }
.paywall strong { display:block; margin:6px 0 4px; font-size:16px; letter-spacing:-.03em; }
.paywall p { margin:0; color:var(--muted); font-size:12px; line-height:1.6; max-width:52ch; }
.paywall .primary { flex:none; }
.paywall-card { text-align:center; padding:44px 34px; }
.paywall-card h1 { margin:12px 0 10px; font-size:26px; letter-spacing:-.04em; }
.paywall-card p { max-width:46ch; margin:0 auto; color:var(--muted); font-size:13px; line-height:1.7; }
@media (max-width:720px){ .paywall { flex-direction:column; align-items:stretch; } .paywall .primary { width:100%; } }

/* ---------------------------------------------------------------------------
   Navigatie en schermranden
   De app draait edge-to-edge in een WebView, dus de status- en gebarenbalk
   worden met env(safe-area-inset-*) vrijgehouden. Op telefoonformaat verhuist
   de navigatie naar een vaste onderbalk met korte labels.
   --------------------------------------------------------------------------- */
.topbar { padding-top:env(safe-area-inset-top,0px); box-sizing:content-box; }
.nav-icon { display:none; width:22px; height:22px; fill:currentColor; }
.nav-short { display:none; }

@media (min-width:761px){
  .top-nav { display:flex; }
  .nav-link { display:inline-flex; align-items:center; gap:6px; }
}

@media (max-width:760px){
  /* backdrop-filter maakt de topbalk een containing block; dan zou de
     vaste onderbalk eraan vastplakken in plaats van aan het scherm */
  .topbar { height:58px; min-height:0; padding:env(safe-area-inset-top,0px) 0 0; flex-wrap:nowrap;
            backdrop-filter:none; background:var(--paper); }
  .brand { width:auto; }
  .brand small { display:none; }
  .brand-mark { width:36px; height:33px; }
  .brand strong { font-size:16px; }

  .top-nav {
    position:fixed; left:0; right:0; bottom:0; z-index:40;
    display:grid; grid-auto-flow:column; grid-auto-columns:1fr;
    gap:0; margin:0; padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px));
    border-top:1px solid var(--line); background:var(--card);
    backdrop-filter:blur(10px); overflow:visible;
  }
  .nav-link {
    position:relative; display:flex; flex-direction:column; align-items:center; gap:3px;
    min-width:0; padding:6px 2px; border:0; border-radius:12px;
    font-size:10px; line-height:1.2; white-space:nowrap;
  }
  .nav-link.is-active { border-bottom:0; color:var(--on-mint); background:var(--mint); }
  .nav-icon { display:block; }
  .nav-long { display:none; }
  .nav-short { display:block; }
  .nav-count {
    position:absolute; top:2px; right:calc(50% - 22px);
    min-width:15px; padding:1px 4px; border-radius:8px;
    color:var(--card); background:var(--coral); font-size:9px; line-height:1.5; text-align:center;
  }
  .nav-count:empty,.nav-link[data-view="mistakes"] .nav-count { display:block; }

  /* ruimte onder de inhoud zodat de onderbalk niets afdekt */
  .main-content { padding-bottom:96px; }
  .footer { margin-bottom:78px; }
}

/* Voortgangsstrook op de startpagina en hoofdstukkaarten */
.progress-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:0 0 30px; }
.progress-summary article,.progress-summary button { padding:18px 20px; border:1px solid var(--line); border-radius:16px; background:var(--card); text-align:left; }
.progress-summary button { cursor:pointer; transition:.18s ease; }
.progress-summary button:hover { border-color:var(--mint-line); transform:translateY(-2px); box-shadow:var(--shadow); }
.progress-summary span,.progress-summary button span { display:block; color:var(--muted); font:10px 'DM Mono',monospace; letter-spacing:.1em; text-transform:uppercase; }
.progress-summary b,.progress-summary button b { display:block; margin-top:7px; font-size:26px; line-height:1; letter-spacing:-.05em; }
.progress-summary small,.progress-summary button small { display:block; margin-top:6px; color:var(--muted); font-size:11px; }
.progress-bar { height:5px; margin-top:11px; border-radius:5px; background:var(--line); overflow:hidden; }
.progress-bar i { display:block; height:100%; border-radius:5px; background:var(--blue); }
@media (max-width:760px){ .progress-summary { grid-template-columns:1fr 1fr; } .progress-summary>*:first-child { grid-column:1 / -1; } }

/* Compactere hoofdstukkaart met eigen voortgang */
.topic-card { min-height:0; padding:18px 20px; gap:0; }
.topic-card .topic-head { display:flex; align-items:center; gap:14px; }
.topic-card .topic-icon { flex:none; }
.topic-card h3 { margin:0; font-size:15px; }
.topic-card p { margin:3px 0 0; }
.topic-card .topic-meta { margin-top:15px; padding-top:13px; border-top:1px solid var(--line); align-items:center; }
.topic-card .topic-progress { display:flex; align-items:center; gap:8px; color:var(--muted); font:10px 'DM Mono',monospace; }
.topic-card .topic-progress i { display:block; width:34px; height:4px; border-radius:4px; background:var(--line); }
.topic-card .topic-progress i b { display:block; height:100%; border-radius:4px; background:var(--coral); }
.topic-card.is-done .topic-progress i b { background:var(--good); }

/* Toetsmodus: alle aandacht naar de vraag */
@media (max-width:760px){
  body.is-focused .top-nav { display:none; }
  body.is-focused .main-content { padding-bottom:28px; }
  body.is-focused .footer { margin-bottom:env(safe-area-inset-bottom,0px); }
  .quiz-card h1 { font-size:20px; line-height:1.32; margin:6px 0 18px; }
  .quiz-card { padding:18px; border-radius:18px; }
  .option { padding:14px; font-size:14px; }
  .question-visual img,.static-scene img { max-height:210px; }
  .quiz-top { margin-bottom:20px; }
  .progress-line { margin:12px 0 20px; }
}

/* Korte melding onder in beeld */
.app-notice { position:fixed; left:50%; bottom:calc(96px + env(safe-area-inset-bottom,0px)); z-index:60; transform:translateX(-50%); max-width:min(90vw,420px); padding:13px 18px; border-radius:14px; color:var(--card); background:var(--ink); box-shadow:var(--shadow); font-size:13px; line-height:1.55; }
@media (min-width:761px){ .app-notice { bottom:32px; } }
/* Toestemming voor de anonieme apparaatteller (device.js) */
.consent-bar { position:fixed; left:50%; bottom:calc(88px + env(safe-area-inset-bottom,0px)); z-index:70; transform:translateX(-50%); width:min(92vw,560px); padding:16px 18px; border:1px solid var(--line); border-radius:16px; background:var(--card); color:var(--ink); box-shadow:var(--shadow); font-size:13px; line-height:1.55; }
.consent-bar p { margin:0 0 12px; }
.consent-bar a { color:var(--blue); font-weight:700; }
.consent-actions { display:flex; gap:10px; justify-content:flex-end; }
.consent-actions button { padding:10px 16px; font-size:13px; }
@media (min-width:761px){ .consent-bar { bottom:28px; } }
.footer a { color:var(--blue); font-weight:700; text-decoration:none; }

/* Examenmodus: klok, voortgang en nabespreking */
.exam-bar { position:sticky; top:0; z-index:15; display:flex; align-items:center; gap:14px; margin:0 0 18px; padding:12px 16px; border:1px solid var(--line); border-radius:14px; background:var(--card); box-shadow:0 4px 16px var(--shadow-soft); }
.exam-clock { font:700 20px/1 'DM Mono',monospace; letter-spacing:-.02em; color:var(--blue); font-variant-numeric:tabular-nums; }
.exam-clock.is-urgent { color:var(--warn); }
.exam-clock.is-critical { color:var(--coral); }
.exam-count { flex:1; color:var(--muted); font-size:12px; }
.exam-bar .secondary { flex:none; padding:9px 15px; font-size:12px; }
.option.selected { border-color:var(--blue); background:var(--mint); }

.exam-result .result-score { font-size:30px; letter-spacing:-.03em; }
.exam-result.is-pass .result-score { border-color:var(--good); color:var(--good); }
.exam-result.is-fail .result-score { border-color:var(--coral-line); color:var(--coral); }

.review { margin-top:26px; }
.review-item { margin-bottom:8px; border:1px solid var(--line); border-radius:14px; background:var(--card); overflow:hidden; }
.review-item summary { display:flex; justify-content:space-between; align-items:center; gap:14px; padding:14px 18px; cursor:pointer; list-style:none; font-size:12px; }
.review-item summary::-webkit-details-marker { display:none; }
.review-item summary>span:first-child { color:var(--muted); }
.review-item>div { padding:0 18px 18px; }
.review-question { margin:0 0 10px; font-size:14px; font-weight:700; line-height:1.5; }
.review-answer { margin:0 0 5px; font-size:13px; }
.review-explain { margin:10px 0 0; padding:12px 14px; border-radius:11px; background:var(--surface-soft); color:var(--muted); font-size:12px; line-height:1.65; }
.review-source { margin:8px 0 0; color:var(--muted); font:10px/1.6 'DM Mono',monospace; }
@media (max-width:760px){ .exam-bar { flex-wrap:wrap; } .exam-count { order:3; flex-basis:100%; } }

/* Inline geplaatste illustratie: volgt de themakleuren */
.scene-holder { display:block; width:100%; background:var(--figure-bed); }
.scene-holder svg { display:block; width:100%; height:auto; max-height:420px; }
@media (max-width:760px){ .scene-holder svg { max-height:210px; } }

/* Kleuren van de illustraties, per thema.
   Licht: warme, iets ontzadigde tinten die naast het zachtgele vlak staan.
   Donker: dezelfde scene in gedempte, violet-getinte tonen, zodat een tekening
   'nachts niet als een lichtbak in het scherm hangt. */
:root {
  --scene-sky-top:#aec0c6;
  --scene-sky-bottom:#c5cac4;
  --scene-grass:#8dae7c;
  --scene-grass-deep:#759766;
  --scene-asphalt:#767c80;
  --scene-asphalt-deep:#656b6f;
  --scene-asphalt-light:#82888b;
  --scene-kerb:#bab5a6;
  --scene-kerb-deep:#a6a092;
  --scene-kerb-light:#c9c4b8;
  --scene-leaf:#85b48d;
  --scene-leaf-deep:#5d926b;
  --scene-wall:#ccc2b3;
  --scene-wall-shade:#bcae9a;
  --scene-roof:#a9785a;
  --scene-trunk:#8e6c55;
  --scene-ink:#3b2a22;
}

:root[data-theme="dark"] {
  --scene-sky-top:#332b5e;
  --scene-sky-bottom:#2a2450;
  --scene-grass:#415a49;
  --scene-grass-deep:#35493c;
  --scene-asphalt:#4d4a65;
  --scene-asphalt-deep:#403d59;
  --scene-asphalt-light:#5a5671;
  --scene-kerb:#5f5a76;
  --scene-kerb-deep:#4e4a64;
  --scene-kerb-light:#6f6a88;
  --scene-leaf:#568a68;
  --scene-leaf-deep:#3f6a4f;
  --scene-wall:#5c5573;
  --scene-wall-shade:#4c4663;
  --scene-roof:#6f4c3c;
  --scene-trunk:#5a4436;
  --scene-ink:#241a2e;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --scene-sky-top:#332b5e;
    --scene-sky-bottom:#2a2450;
    --scene-grass:#415a49;
    --scene-grass-deep:#35493c;
    --scene-asphalt:#4d4a65;
    --scene-asphalt-deep:#403d59;
    --scene-asphalt-light:#5a5671;
    --scene-kerb:#5f5a76;
    --scene-kerb-deep:#4e4a64;
    --scene-kerb-light:#6f6a88;
    --scene-leaf:#568a68;
    --scene-leaf-deep:#3f6a4f;
    --scene-wall:#5c5573;
    --scene-wall-shade:#4c4663;
    --scene-roof:#6f4c3c;
    --scene-trunk:#5a4436;
    --scene-ink:#241a2e;
  }
}

/* Inline geplaatst hoeft de tekening geen eigen licht bed meer: hij past zich aan. */
.scene-holder { background:transparent; }
:root { --scene-canvas:#cbc9c0; --scene-canvas-dusk:#3f5560; --scene-canvas-night:#13202c; --scene-canvas-night-soft:#22303f; }
:root[data-theme="dark"] { --scene-canvas:#271c4a; --scene-canvas-dusk:#312a5c; --scene-canvas-night:#150c2e; --scene-canvas-night-soft:#1d1440; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --scene-canvas:#271c4a; --scene-canvas-dusk:#312a5c; --scene-canvas-night:#150c2e; --scene-canvas-night-soft:#1d1440; }
}

/* Inloggen voor de beheerder (account.js). */
.footer-links { display:flex; gap:16px; align-items:center; }
.footer-link { border:0; background:none; padding:0; color:var(--blue); font:inherit; font-weight:700; cursor:pointer; }
.footer-link[hidden] { display:none; }
.account-card { max-width:460px; margin:0 auto; }
.account-card h1 { margin:10px 0 12px; }
.account-card p { color:var(--muted); line-height:1.6; }
.account-card p strong { color:var(--ink); }
.account-field { display:grid; gap:6px; margin-top:16px; color:var(--muted); font:10px 'DM Mono',monospace; text-transform:uppercase; letter-spacing:.08em; }
.account-field input { width:100%; box-sizing:border-box; border:1px solid var(--line); border-radius:12px; padding:12px 14px; color:var(--ink); background:var(--card); font:15px Manrope,sans-serif; text-transform:none; letter-spacing:0; outline:none; }
.account-field input:focus { border-color:var(--mint-line); box-shadow:0 0 0 3px var(--mint); }
.account-error { margin:14px 0 0; padding:10px 12px; border:1px solid var(--coral-line); border-radius:10px; background:var(--coral-soft); color:var(--ink) !important; font-size:13px; }
.account-notice { margin:0 0 6px; padding:10px 12px; border:1px solid var(--mint-line); border-radius:10px; background:var(--mint); color:var(--ink) !important; font-size:13px; }
.account-card .action-row { flex-wrap:wrap; }
.account-card button:disabled { opacity:.6; cursor:progress; }

/* Toegang tot de toetsen via de server (toets.js): toegangsscherm, telefoonbevestiging, accountstand. */
.toegang-stappen { margin:18px 0 22px; padding:0; list-style:none; display:grid; gap:12px; }
.toegang-stappen li { display:grid; grid-template-columns:auto 1fr; gap:4px 14px; padding:14px 16px; border:1px solid var(--line); border-radius:14px; background:var(--surface); }
.toegang-stappen li::before { content:counter(stap); counter-increment:stap; grid-row:1 / 3; display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--mint); color:var(--blue); font:700 13px 'DM Mono',monospace; }
.toegang-stappen { counter-reset:stap; }
.toegang-stappen b { font-size:14px; color:var(--ink); }
.toegang-stappen span { font-size:13px; line-height:1.6; color:var(--muted); }
.toegang-noot { margin:16px 0 0; font-size:12px; line-height:1.6; color:var(--muted); }
.toegang-noot a { color:var(--blue); }
.text-button { border:0; background:none; padding:0; color:var(--blue); font:inherit; font-weight:700; cursor:pointer; }
.status-list { margin:14px 0 6px; padding:0; list-style:none; display:grid; gap:8px; }
.status-list li { display:grid; grid-template-columns:1fr auto; gap:2px 14px; align-items:center; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:var(--surface); font-size:13px; }
.status-list li span { color:var(--muted); font:10px 'DM Mono',monospace; text-transform:uppercase; letter-spacing:.08em; grid-column:1 / -1; }
.status-list li b { color:var(--ink); font-weight:700; }
.status-list li .text-button { justify-self:end; font-size:13px; }
.account-sub { margin:24px 0 6px; font-size:16px; letter-spacing:-.02em; }
.account-sub small { color:var(--muted); font-weight:500; font-size:12px; margin-left:6px; }
.beheer-form { margin-top:4px; }
/* Kortingscode bij de pakketten, deelcode in het account, beheeroverzicht (bronnen.sql). */
.account-field select { width:100%; box-sizing:border-box; border:1px solid var(--line); border-radius:12px; padding:11px 12px; color:var(--ink); background:var(--card); font:15px Manrope,sans-serif; text-transform:none; letter-spacing:0; }
.korting-form { display:grid; grid-template-columns:1fr auto; gap:0 10px; align-items:end; max-width:420px; margin:18px auto 0; text-align:left; }
.korting-form .account-field input { text-transform:uppercase; letter-spacing:.06em; }
.korting-form .korting-stand { grid-column:1 / -1; margin-top:8px; font-size:12px; line-height:1.5; color:var(--muted); }
.korting-stand.is-ok { color:var(--blue); font-weight:700; }
.korting-stand.is-fout { color:var(--coral); }
.paywall-knoppen s, .paywall-card s { opacity:.6; font-weight:500; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.deelcode { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:10px 0 4px; }
.deelcode code { padding:9px 14px; border:1px dashed var(--mint-line); border-radius:10px; background:var(--mint); color:var(--ink); font:700 17px 'DM Mono',monospace; letter-spacing:.12em; }
.beheer-card { max-width:980px; }
.beheer-filter { display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center; margin:6px 0 14px; font-size:13px; }
.beheer-filter select { border:1px solid var(--line); border-radius:10px; padding:8px 10px; color:var(--ink); background:var(--card); font:14px Manrope,sans-serif; }
.beheer-vink { display:flex; gap:8px; align-items:center; color:var(--muted); font-size:13px; }
.beheer-totaal { margin:0 0 6px; padding:0; list-style:none; display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:8px; }
.beheer-totaal li { padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:var(--surface); }
.beheer-totaal span { display:block; color:var(--muted); font:10px 'DM Mono',monospace; text-transform:uppercase; letter-spacing:.08em; }
.beheer-totaal b { font-size:18px; color:var(--ink); }
.beheer-tabel { margin:0 0 8px; }
.beheer-tabel th.getal, .beheer-tabel td.getal { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.beheer-tabel td small { color:var(--muted); }
.beheer-tabel tr.is-uit td { opacity:.55; }
.beheer-tabel .text-button { font-size:12px; white-space:nowrap; }
.beheer-noot { font-size:12px; }
.beheer-raster { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:0 14px; align-items:end; }
.beheer-raster .beheer-vink { margin-top:16px; padding-bottom:12px; }
.beheer-raster .action-row { grid-column:1 / -1; }
@media (max-width:720px){ .korting-form { grid-template-columns:1fr; } .korting-form button { margin-top:10px; } }
body.is-loading, body.is-loading button { cursor:progress; }
.option:disabled { cursor:default; }
.option.selected:disabled { opacity:.85; }
@media (max-width:720px){ .status-list li { grid-template-columns:1fr; } .status-list li .text-button { justify-self:start; } }

/* ---------------------------------------------------------------------------
   Vernieuwing oktober 2026: startpagina, hoofdstuknavigatie en inklapbare blokken.
   --------------------------------------------------------------------------- */
.theme-toggle { margin-left:14px; }
.topbar { background:color-mix(in srgb,var(--paper) 95%,transparent); }
.nav-link { font-size:13px; }

/* Startpagina */
.home-hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:56px; align-items:center; margin:8px 0 40px; }
.home-hero-copy h1 { margin:14px 0 18px; font-size:clamp(40px,5.2vw,68px); line-height:1.02; letter-spacing:-.05em; text-wrap:balance; }
.home-hero-copy>p { max-width:540px; margin:0; color:var(--muted); font-size:17px; line-height:1.7; }
.home-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.home-actions .primary { display:inline-flex; flex-direction:column; align-items:flex-start; gap:2px; min-height:58px; padding:11px 22px; font-size:15px; }
.home-actions .primary span { margin:0; opacity:.78; font-size:11px; font-weight:600; }
.home-actions .secondary { min-height:58px; padding:0 22px; font-size:14px; }
.home-facts { display:flex; flex-wrap:wrap; gap:8px 26px; margin:30px 0 0; padding:22px 0 0; border-top:1px solid var(--line); list-style:none; color:var(--muted); font-size:13px; }
.home-facts b { margin-right:5px; color:var(--ink); font-size:20px; letter-spacing:-.03em; }
.home-hero-visual { position:relative; margin:0; overflow:hidden; border-radius:28px; background:var(--panel-road); box-shadow:var(--shadow); aspect-ratio:1200/840; }
.home-hero-visual img { display:block; width:100%; height:100%; object-fit:cover; }
.home-quiz-peek { position:absolute; left:18px; right:18px; bottom:18px; display:grid; gap:5px; padding:16px 18px; border:1px solid var(--line); border-radius:18px; color:var(--ink); background:color-mix(in srgb,var(--card) 94%,transparent); backdrop-filter:blur(10px); box-shadow:0 10px 30px var(--shadow-soft); }
.home-quiz-label { color:var(--coral); font:500 10px 'DM Mono',monospace; letter-spacing:.1em; text-transform:uppercase; }
.home-quiz-peek strong { font-size:17px; line-height:1.3; letter-spacing:-.02em; }
.home-quiz-rule { color:var(--muted); font-size:12px; }
.home-quiz-rule b { margin-right:6px; padding:2px 7px; border-radius:6px; color:var(--on-mint); background:var(--mint); font-size:10px; text-transform:uppercase; letter-spacing:.06em; }
.home-section { margin-top:46px; }
.home-section .section-head .text-button { font-size:13px; white-space:nowrap; }
.feature-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.feature-tile { display:grid; grid-template-columns:auto 1fr; gap:4px 14px; align-items:start; padding:20px; border:1px solid var(--line); border-radius:18px; color:var(--ink); background:var(--card); text-align:left; transition:.18s ease; }
.feature-tile:hover { border-color:var(--mint-line); transform:translateY(-2px); box-shadow:var(--shadow); }
.feature-tile:focus-visible,.chapter-row:focus-visible,.chapter-pager-link:focus-visible,.step-button:focus-visible,.read-checks summary:focus-visible { outline:3px solid var(--blue-ring); outline-offset:2px; }
.feature-icon { grid-row:1 / 3; display:grid; place-items:center; width:40px; height:40px; border-radius:12px; color:var(--on-mint); background:var(--mint); }
.feature-icon svg { width:20px; height:20px; fill:currentColor; }
.feature-tile strong { font-size:15px; letter-spacing:-.02em; }
.feature-tile>span:last-child { color:var(--muted); font-size:12.5px; line-height:1.55; }
.feature-tile { grid-template-columns:auto minmax(0,1fr); }
.feature-tile strong,.feature-tile>span:last-child { min-width:0; overflow-wrap:anywhere; }
.chapter-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.chapter-row { display:grid; grid-template-columns:auto minmax(0,1fr) 44px; gap:12px; align-items:center; min-height:54px; padding:9px 14px 9px 9px; border:1px solid var(--line); border-radius:14px; color:var(--ink); background:var(--card); text-align:left; transition:.15s ease; }
.chapter-row:hover:not(:disabled) { border-color:var(--mint-line); background:var(--surface); }
.chapter-row:disabled { cursor:not-allowed; opacity:.5; }
.chapter-row-num { display:grid; place-items:center; width:34px; height:34px; border-radius:10px; color:var(--on-mint); background:var(--mint); font:500 12px 'DM Mono',monospace; }
.chapter-row.is-done .chapter-row-num { color:var(--card); background:var(--good); }
.chapter-row-title { min-width:0; overflow-wrap:anywhere; font-size:13px; font-weight:700; line-height:1.3; }
.chapter-row-bar { display:block; height:4px; border-radius:4px; background:var(--line); overflow:hidden; }
.chapter-row-bar i { display:block; height:100%; border-radius:4px; background:var(--coral); }
.chapter-row.is-done .chapter-row-bar i { background:var(--good); }

/* Hoofdstuk: stappen bovenaan en vorige/volgende onderaan */
.chapter-stepper { display:flex; justify-content:space-between; align-items:center; gap:14px; margin-bottom:8px; }
.chapter-stepper>span { display:flex; align-items:center; gap:8px; color:var(--muted); font:500 11px 'DM Mono',monospace; }
.step-button { display:grid; place-items:center; width:36px; height:36px; border:1px solid var(--line); border-radius:11px; color:var(--ink); background:var(--card); font-size:20px; line-height:1; }
.step-button:hover { border-color:var(--blue); color:var(--blue); }
.chapter-pager { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:16px; }
.chapter-pager-link { display:grid; gap:5px; padding:18px 20px; border:1px solid var(--line); border-radius:18px; color:var(--ink); background:var(--card); text-align:left; transition:.18s ease; }
.chapter-pager-link.is-next { text-align:right; }
.chapter-pager-link:hover { border-color:var(--blue); transform:translateY(-2px); box-shadow:var(--shadow); }
.chapter-pager-link span { color:var(--muted); font:500 10px 'DM Mono',monospace; letter-spacing:.08em; text-transform:uppercase; }
.chapter-pager-link strong { font-size:15px; letter-spacing:-.02em; }

/* "Wat nu geldt" klapt in en uit */
details.read-checks { padding:0; }
.read-checks summary { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:20px 24px; cursor:pointer; list-style:none; }
.read-checks summary::-webkit-details-marker { display:none; }
.read-checks summary>span { display:grid; gap:4px; }
.read-checks summary strong { font-size:18px; letter-spacing:-.03em; }
.read-checks summary small { color:var(--muted); font-size:12.5px; line-height:1.5; }
.read-toggle { flex:none; display:grid; place-items:center; width:34px; height:34px; border:1px solid var(--mint-line); border-radius:50%; background:var(--card); }
.read-toggle::before { content:''; width:8px; height:8px; margin-top:-4px; border-right:2px solid var(--blue); border-bottom:2px solid var(--blue); transform:rotate(45deg); transition:transform .2s ease; }
.read-checks[open] .read-toggle::before { margin-top:4px; transform:rotate(-135deg); }
.read-checks-body { padding:0 24px 24px; }

@media (max-width:1050px){
  .home-hero { grid-template-columns:1fr; gap:30px; }
  .home-hero-visual { aspect-ratio:16/10; }
  .feature-grid,.chapter-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:760px){
  .theme-toggle { margin-left:auto; }
  .home-hero-copy h1 { font-size:38px; }
  .home-hero-copy>p { font-size:15px; }
  .home-actions { display:grid; grid-template-columns:1fr; }
  .home-actions .primary,.home-actions .secondary { width:100%; }
  .home-hero-visual { aspect-ratio:auto; border-radius:22px; }
  .home-hero-visual img { height:auto; aspect-ratio:4/3; }
  .home-quiz-peek { position:static; border:0; border-radius:0; padding:14px 16px; backdrop-filter:none; box-shadow:none; background:var(--card); }
  .home-quiz-peek strong { font-size:15px; }
  .feature-grid,.chapter-list { grid-template-columns:1fr; }
  .chapter-pager { grid-template-columns:1fr; }
  .chapter-pager-link.is-next { text-align:left; }
  .read-checks summary { padding:16px 18px; }
  .read-checks-body { padding:0 18px 18px; }
}

/* Een foto bij een vraag vult de breedte en houdt zijn eigen verhouding. De hoogtegrenzen hierboven zijn voor
   de tekeningen; bij een foto in 16:9 maakten ze er een smal plaatje met grijze balken van (tablet, smal venster). */
.question-visual .scene-3d img, .static-scene .scene-3d img { height:auto; max-height:none; object-fit:fill; }

/* Inloggen of Account in de bovenbalk, naast de themaknop */
.top-actions { display:flex; align-items:center; gap:10px; flex:none; }
.top-account { height:38px; padding:0 14px; border:1px solid var(--line); border-radius:12px; color:var(--ink); background:var(--card); font:inherit; font-size:13px; font-weight:700; cursor:pointer; }
.top-account:hover { border-color:var(--blue); color:var(--blue); }
.top-account[hidden] { display:none; }

/* Cloudflare Turnstile op het telefoonformulier */
.turnstile-vak { margin:14px 0 4px; min-height:65px; }

/* Twee pakketten naast elkaar in de betaalstrook */
.paywall-knoppen { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }

/* Volgordevraag: antwoorden naar genummerde vakken slepen (of aantikken) */
.sleep-uitleg { margin:-14px 0 16px; color:var(--muted); font-size:13px; }
.sleep-vakken { display:grid; gap:9px; }
.sleep-vak { display:flex; gap:13px; align-items:center; width:100%; min-height:58px; padding:14px 16px; border:1px dashed var(--line); border-radius:14px; background:var(--surface-soft); color:var(--muted); text-align:left; font-size:14px; touch-action:none; }
.sleep-vak.is-gevuld { border-style:solid; background:var(--card); color:var(--ink); cursor:grab; }
.sleep-vak.is-doel { border-color:var(--blue); background:var(--mint); }
.sleep-vak.correct { border:1px solid var(--good); background:var(--good-soft); color:var(--ink); }
.sleep-vak.wrong { border:1px solid var(--coral-line); background:var(--coral-soft); color:var(--ink); }
.sleep-stukken { display:flex; flex-wrap:wrap; gap:8px; min-height:52px; margin:16px 0; padding:10px; border:1px solid var(--line); border-radius:14px; background:var(--surface); }
.sleep-stuk { padding:10px 14px; border:1px solid var(--line); border-radius:11px; background:var(--card); color:var(--ink); font-size:14px; cursor:grab; touch-action:none; }
.sleep-stuk:hover,.sleep-vak.is-gevuld:hover { border-color:var(--mint-line); }
.sleep-stuk.gekozen { border-color:var(--blue); background:var(--mint); box-shadow:0 0 0 3px var(--blue-ring); }
.sleep-stuk.is-gesleept,.sleep-vak.is-gesleept { opacity:.35; }
.sleep-klaar { align-self:center; color:var(--muted); font-size:13px; }
.sleep-spook { position:fixed; z-index:1000; pointer-events:none; transform:translate(-50%,-50%) rotate(-1.5deg); box-shadow:var(--shadow); opacity:.95; }
.sleep-bevestig { width:100%; }
.sleep-bevestig:disabled { cursor:not-allowed; opacity:.45; }
.sleep-juist { margin:14px 0 0; color:var(--ink); font-size:13px; }
.sleep-stuk:focus-visible,.sleep-vak:focus-visible { outline:3px solid var(--blue-ring); outline-offset:2px; }
@media (prefers-reduced-motion: reduce) { .sleep-spook { transform:translate(-50%,-50%); } }

/* Meervraag: alle juiste antwoorden aanvinken en bevestigen */
.meer-uitleg { margin:-14px 0 16px; color:var(--muted); font-size:13px; }
/* Beeldkeuze: de antwoorden zijn verkeersborden, twee naast elkaar (op brede schermen vier) */
#options.bord-keuze { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
#options.bord-keuze .option { flex-direction:column; justify-content:center; align-items:center; gap:8px; min-height:132px; margin:0; padding:12px; }
#options.bord-keuze .option-key { align-self:flex-start; }
.option-bord { display:block; width:auto; height:88px; max-width:100%; object-fit:contain; }
#options.bord-keuze .meer-uitleg, #options.bord-keuze .meer-bevestig { grid-column:1 / -1; }
@media (min-width: 760px) { #options.bord-keuze { grid-template-columns:repeat(4, minmax(0, 1fr)); } }
.review-answer .option-bord { display:inline-block; height:44px; vertical-align:middle; margin:2px 4px; }
/* Plekvraag: een laag over het beeld vangt de tik; bij het nakijken het goede vlak (groen) en je stip */
.question-visual .scene-holder { position:relative; }
.question-visual .scene-holder > .plek-laag { position:absolute; inset:0; width:100%; height:100%; max-height:none; cursor:crosshair; touch-action:manipulation; z-index:3; }
.question-visual .scene-holder > .plek-laag:focus-visible { outline:3px solid var(--blue-ring, #2f6fb0); outline-offset:-3px; }
.plek-vlak { fill:rgba(46,139,87,.32); stroke:var(--good, #2e8b57); stroke-width:3; vector-effect:non-scaling-stroke; }
.plek-stip { fill:var(--blue, #2f6fb0); stroke:#fff; stroke-width:3; vector-effect:non-scaling-stroke; }
.plek-stip.goed { fill:var(--good, #2e8b57); }
.plek-stip.fout { fill:var(--coral, #d9534f); }
/* Getalvraag: invoerveld met de eenheid erachter */
.getal-veld { display:flex; align-items:center; gap:10px; margin:0 0 10px; }
.getal-invoer { width:9ch; padding:12px 14px; border:2px solid var(--line); border-radius:12px; background:var(--card); color:var(--ink); font:700 20px/1.2 'DM Mono',monospace; text-align:right; }
.getal-invoer:focus-visible { outline:none; border-color:var(--blue); }
.getal-eenheid { font:600 16px 'DM Mono',monospace; color:var(--muted); }
.getal-melding { margin:0 0 8px; color:var(--coral-line); font-size:14px; }
.getal-melding:empty { display:none; }
.getal-uitkomst { margin:6px 0; padding:10px 14px; border-radius:12px; border:2px solid var(--line); }
.getal-uitkomst.correct { border-color:var(--good); background:var(--good-soft); }
.getal-uitkomst.wrong { border-color:var(--coral-line); background:var(--coral-soft); }
.meer-optie .option-key { border-radius:7px; }
.meer-optie.selected .option-key,.meer-optie.correct:not(.gemist) .option-key,.meer-optie.wrong .option-key { color:var(--ink); }
.option.correct.gemist { border-style:dashed; background:var(--card); }
.meer-bevestig { width:100%; margin-top:6px; }
.meer-bevestig:disabled { cursor:not-allowed; opacity:.45; }
/* Een afgeschermd hoofdstuk: titel en de knop voor de pas (renderLockedChapter). */
.read-lock { margin:8px 0 28px; }
.read-lock-wacht { margin:8px 0 28px; color:var(--muted); font-size:14px; }

/* ---------------------------------------------------------------------------
   Talen (i18n.js): de taalkeuze in de bovenbalk, en Arabisch van rechts naar links.
   --------------------------------------------------------------------------- */
.taal-keuze { position:relative; display:flex; align-items:center; height:38px; flex:none; border:1px solid var(--line); border-radius:12px; color:var(--ink); background:var(--card); cursor:pointer; }
.taal-keuze:hover,.taal-keuze:focus-within { border-color:var(--blue); color:var(--blue); }
.taal-keuze svg { position:absolute; inset-inline-start:10px; width:17px; height:17px; fill:currentColor; pointer-events:none; }
.taal-keuze select { appearance:none; -webkit-appearance:none; height:100%; max-width:132px; padding:0 12px; padding-inline-start:33px; border:0; border-radius:12px; color:inherit; background:none; font:inherit; font-size:13px; font-weight:700; cursor:pointer; }
.taal-keuze select:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }
@media (max-width:760px){ .taal-keuze select { max-width:44px; padding:0; padding-inline-start:36px; color:transparent; } .taal-keuze select option { color:var(--ink); } }

/* Arabisch: lettertypen met Arabische tekens en wat meer regelafstand. Getallen, bordcodes en tekeningen blijven
   zoals ze zijn; de tekeningen worden niet gespiegeld (links en rechts in het verkeer veranderen niet). */
:root:is([lang="ar"],[lang="fa"]) body { font-family:system-ui,'Segoe UI',Tahoma,'Noto Sans Arabic','Geeza Pro',sans-serif; }
:root:is([lang="ar"],[lang="fa"]) .read-body p,:root:is([lang="ar"],[lang="fa"]) .feedback,:root:is([lang="ar"],[lang="fa"]) .option { line-height:1.75; }
[dir="rtl"] .eyebrow { letter-spacing:0; }
[dir="rtl"] .top-nav { margin-left:0; margin-right:80px; }
[dir="rtl"] .theme-toggle { margin-left:0; margin-right:14px; }
[dir="rtl"] .primary span { margin-left:0; margin-right:7px; }
[dir="rtl"] .answer-source,[dir="rtl"] .stat-card,[dir="rtl"] .topic-card,[dir="rtl"] .option,[dir="rtl"] .read-table th,
[dir="rtl"] .read-table td,[dir="rtl"] .progress-summary article,[dir="rtl"] .progress-summary button,[dir="rtl"] .korting-form,
[dir="rtl"] .feature-tile,[dir="rtl"] .chapter-row,[dir="rtl"] .chapter-pager-link,[dir="rtl"] .sleep-vak,[dir="rtl"] .read-footer { text-align:right; }
[dir="rtl"] .chapter-pager-link.is-next { text-align:left; }
[dir="rtl"] .feedback { border-left:0; border-right:4px solid var(--blue); }
[dir="rtl"] .read-meta span+span { padding-left:0; padding-right:18px; }
[dir="rtl"] .read-meta span+span:before { left:auto; right:0; }
[dir="rtl"] .read-list { padding-left:0; padding-right:22px; }
[dir="rtl"] .account-sub small { margin-left:0; margin-right:6px; }
[dir="rtl"] .home-facts b { margin-right:0; margin-left:5px; }
[dir="rtl"] .home-quiz-rule b { margin-right:0; margin-left:6px; }
[dir="rtl"] .chapter-row { padding:9px 9px 9px 14px; }
[dir="rtl"] .paywall-knoppen { justify-content:flex-start; }
/* Invoer van getallen, telefoonnummers en codes blijft van links naar rechts. */
[dir="rtl"] .getal-invoer,[dir="rtl"] input[type="tel"],[dir="rtl"] input[type="email"],[dir="rtl"] input[inputmode="numeric"],[dir="rtl"] .deelcode code { direction:ltr; }
[dir="rtl"] .getal-veld { direction:ltr; justify-content:flex-end; }
@media (max-width:760px){
  [dir="rtl"] .top-nav { margin-right:0; }
  [dir="rtl"] .theme-toggle { margin-left:0; margin-right:auto; }
  [dir="rtl"] .chapter-pager-link.is-next { text-align:right; }
}
@media (max-width:720px){ [dir="rtl"] .status-list li .text-button { justify-self:end; } }
/* Tekeningen blijven links-naar-rechts: anders verschuift text-anchor de labels. Arabische labels erin lopen vanzelf goed. */
[dir="rtl"] .scene-holder svg,[dir="rtl"] .scene-3d svg,[dir="rtl"] .plek-laag { direction:ltr; }
/* Arabische letters worden aan elkaar geschreven: geen letterafstand en geen monospace (DM Mono heeft geen Arabisch). */
:root:is([lang="ar"],[lang="fa"]) body * { font-family:inherit; letter-spacing:normal !important; }
[dir="rtl"] .step-button { transform:scaleX(-1); }

/* Tekstvergroting op telefoons: laat inhoud omlopen en bediening meegroeien.
   Geen text-size-adjust:none: de leesbaarheidsinstelling van de bezoeker blijft gelden. */
@media (max-width:760px){
  .topbar {
    height:auto; min-height:58px; flex-wrap:wrap; gap:8px 12px;
    padding-block:calc(8px + env(safe-area-inset-top,0px)) 8px;
  }
  .brand { flex:1 1 auto; min-width:0; max-width:100%; margin-inline-end:0; }
  .brand>span:last-child { min-width:0; }
  .brand strong { overflow-wrap:anywhere; }
  .top-actions { flex:0 1 auto; max-width:100%; flex-wrap:wrap; justify-content:flex-end; gap:8px; margin-inline-start:auto; }
  .top-account { height:auto; min-height:38px; max-width:100%; padding:8px 12px; overflow-wrap:anywhere; }
  .nav-link { white-space:normal; overflow-wrap:anywhere; }
  .nav-short { max-width:100%; line-height:1.4; min-block-size:1.4em; flex-shrink:0; }
  .nav-icon { flex:none; }
  .main-content { padding-bottom:calc(6em + env(safe-area-inset-bottom,0px)); }
  .footer { margin-bottom:calc(6em + env(safe-area-inset-bottom,0px)); }
  .home-hero-copy,.home-section,.section-head>div { min-width:0; }
  .home-hero-copy h1,.home-hero-copy>p { overflow-wrap:anywhere; }
  .main-content h1,.main-content h2,.main-content h3 { overflow-wrap:anywhere; }
  .topic-search { min-width:0; }
  .topic-search input { min-width:0; max-width:100%; }
  .topic-card,.topic-copy { min-width:0; overflow-wrap:anywhere; }
  .topic-meta { flex-wrap:wrap; gap:8px; }
  .topic-meta>b { min-width:0; overflow-wrap:anywhere; }
  .topic-icon { width:auto; min-width:36px; height:auto; min-height:36px; padding:4px; }
  .chapter-stepper { flex-wrap:wrap; }
  .chapter-pager-link { min-width:0; overflow-wrap:anywhere; }
  .section-head { flex-wrap:wrap; gap:12px; }
  .home-section .section-head .text-button { max-width:100%; white-space:normal; text-align:start; }
  .progress-summary>* { min-width:0; overflow-wrap:anywhere; }
  .chapter-row-num { width:auto; min-width:34px; height:auto; min-height:34px; padding:4px; }
  .footer-links { flex-wrap:wrap; }
  .footer-links>a,.footer-links>button { max-width:100%; overflow-wrap:anywhere; }
}