/* HAN-huisstijl (QA-6): tokens uit de zusterdocumenten (docs/LRD-ELEARNING-A3.html). Systeemlettertypen, geen externe
   fonts. Kleuren van tekst worden gecontroleerd door tests/contrast.test.mjs (TG-3): tekst minstens 4,5:1. */
:root {
  --accent:#E50056; --zwart:#000000; --wit:#FFFFFF; --grijs:#F2F2F0;
  --grijs-tekst:#454545;              /* meta-tekst */
  --lijn-1:#E50056; --lijn-2:#0063B2; --lijn-3:#00804A; --lijn-4:#C2410C; /* metrolijn per leerblok, ≥ 3:1 op wit (SX-18, ADR B110) */
  --fout:#B0003F;                     /* foutmelding, ook op grijs 4,5:1 */
  --accent-donker:#B8004A;            /* hover van de accentknop, wit erop */
  --roze:#FFD9E6;                     /* achtergrond van een afwijkende rij (controlelab) */
  --groen:#1A7F37; --oker:#B7791F;    /* alleen onderstreping bij een status, nooit tekst (TG-4) */
  --link:#000000; --link-hover:#B8004A; /* linkkleur (SX-8); hover = --accent-donker, als hex voor de contrastcontrole */
  --leeg:#F2F2F0;                     /* „Te doen" en lege voortgangssegmenten; = --grijs */
  --rand:3px; --schaduw:5px 5px 0 var(--zwart);
  --f:"Avenir Next","Avenir","Nunito Sans","Segoe UI",Helvetica,Arial,sans-serif;
  --fm:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }   /* hidden wint altijd, ook van .knop of .kaart-tik */
body { margin:0; font:16px/1.5 var(--f); color:var(--zwart); background:var(--wit); }
header,main,footer { max-width:60rem; margin:0 auto; padding:1rem; }
a { color:var(--link); font-weight:700; text-decoration-thickness:3px; text-underline-offset:3px; }
a:hover { color:var(--link-hover); }
nav a { margin-right:1rem; color:var(--zwart); font-weight:700; }
nav a[aria-current="page"] { color:var(--accent); background:var(--wit); text-decoration:underline; text-decoration-thickness:4px; text-underline-offset:4px; }
h1 { border-bottom:4px solid var(--accent); padding-bottom:.25rem; }
.kaart { border:var(--rand) solid var(--zwart); padding:1rem; margin:1rem 0; background:var(--wit); }   /* informatief: geen schaduw (SX-7) */
.kaart-tik { box-shadow:var(--schaduw); display:block; color:var(--zwart); text-decoration:none; cursor:pointer; } /* aan te tikken */
.kaart-tik:hover { background:var(--grijs); color:var(--zwart); }
.kaart-tik:active { box-shadow:none; transform:translate(5px,5px); }
footer { border-top:3px solid var(--zwart); font-size:.875rem; margin-top:2rem; }
.pilot-chip { display:inline-block; vertical-align:top; margin:0 0 .5rem .75rem; border:2px solid var(--accent); border-radius:1rem; padding:0 .6rem; font-size:.8125rem; font-weight:700; }
.voor-docenten { font-weight:700; }

/* ---- formulieren: elk veld heeft een zichtbaar label en een duidelijke focusrand ---- */
label, legend { font-weight:700; display:block; margin:.75rem 0 .25rem; }
legend { float:left; width:100%; padding:0; }   /* de vraag valt nooit over de eerste optie (taak 2.2) */
legend + * { clear:both; }
fieldset { border:3px solid var(--zwart); margin:.75rem 0; padding:.25rem .75rem .75rem; }
input[type="text"], textarea, select { width:100%; font:inherit; color:var(--zwart); background:var(--wit); border:3px solid var(--zwart); padding:.4rem .6rem; }
textarea { min-height:4.5rem; resize:vertical; }
.optie { display:flex; align-items:center; gap:.5rem; margin:.25rem 0; min-height:2.75rem; padding:0 .5rem; border:2px solid transparent; }
.optie label { display:inline; margin:0; font-weight:400; flex:1; padding:.5rem 0; cursor:pointer; }
.optie:has(input:checked) { background:var(--grijs); border-color:var(--zwart); }
input[type="checkbox"], input[type="radio"] { width:1.25rem; height:1.25rem; accent-color:var(--zwart); flex:none; }
:focus-visible { outline:4px solid var(--accent); outline-offset:2px; }
.klein { font-size:.875rem; }
.meta { color:var(--grijs-tekst); }
.fout, .veld-fout { color:var(--fout); font-weight:700; }
.veld-fout { margin:.25rem 0 0; }

/* ---- knoppen ---- */
.knop { font:inherit; font-weight:700; cursor:pointer; color:var(--zwart); background:var(--wit); border:3px solid var(--zwart); box-shadow:3px 3px 0 var(--zwart); padding:.4rem .9rem; text-decoration:none; display:inline-block; }
.knop:hover { background:var(--grijs); }
.knop-accent { background:var(--accent); color:var(--wit); }
.knop-accent:hover { background:var(--accent-donker); }
.knop:active { box-shadow:none; transform:translate(3px,3px); }
.knoppen { display:flex; flex-wrap:wrap; gap:.75rem; margin:.75rem 0; }
/* bestandkiezer (SX-14, ADR B94): een brede knop om het echte, onzichtbare bestandveld heen; knopschaduw, want hij staat vaak in een kaart */
.bestandkiezer { display:flex; align-items:center; gap:1rem; width:100%; margin:.75rem 0; padding:.75rem 1rem; font-weight:400; cursor:pointer; background:var(--wit); border:var(--rand) solid var(--zwart); box-shadow:3px 3px 0 var(--zwart); }
.bestandkiezer:hover { background:var(--grijs); }
.bestandkiezer:active { box-shadow:none; transform:translate(3px,3px); }
.bestandkiezer:has(input:focus-visible) { outline:4px solid var(--accent); outline-offset:2px; }
.bestandkiezer.bk-slepen { background:var(--roze); border-style:dashed; }
.bk-icoon { flex:none; display:grid; place-items:center; width:3rem; height:3rem; background:var(--zwart); color:var(--wit); font-size:1.75rem; font-weight:800; line-height:1; }
.bestandkiezer:hover .bk-icoon, .bk-slepen .bk-icoon { background:var(--accent); }
.bk-tekst { display:grid; gap:.125rem; min-width:0; }
.bk-titel { font-size:1.125rem; font-weight:800; }
.bk-hulp { font-size:.875rem; color:var(--grijs-tekst); }
.bk-gekozen { font-weight:700; overflow-wrap:anywhere; }
.bk-gekozen:empty, .bk-sleep { display:none; }
@media (hover:hover) and (pointer:fine) { .bk-sleep { display:inline; } .bk-tik { display:none; } }
.bevestiging { border:3px solid var(--accent); padding:1rem; margin-top:.75rem; }

/* ---- status als tekst met kleur erbij (BW-3, TG-4) ---- */
.status { display:inline-block; border:3px solid var(--zwart); padding:.1rem .6rem; font-weight:700; background:var(--wit); color:var(--zwart); }
.status-compleet { box-shadow:inset 0 -6px 0 var(--groen); }
.status-bijna { box-shadow:inset 0 -6px 0 var(--oker); }
.status-nog-niet { background:var(--leeg); }

/* ---- leerblok en taak ---- */
.taken-nav ol { padding-left:1.25rem; }
.taak h2 { margin-top:0; }
.nr { display:inline-block; background:var(--zwart); color:var(--wit); padding:0 .5rem; margin-right:.25rem; }
.stap { border-top:2px solid var(--zwart); margin-top:1rem; padding-top:.25rem; }
.stap h3 { font-size:1.05rem; margin:.5rem 0; }
.oefening { background:var(--grijs); border:2px dashed var(--zwart); padding:.75rem 1rem; margin:.75rem 0; }
.oefening h4 { margin:0 0 .5rem; }
.model { border-left:6px solid var(--accent); background:var(--wit); padding:.25rem .75rem; margin-top:.75rem; }
.model-lijst dt { font-weight:700; margin-top:.5rem; }
.model-lijst dd { margin:0 0 0 1rem; }
.format, .voorbeeld { border:3px solid var(--zwart); padding:.5rem .75rem; background:var(--wit); font-weight:700; }
.uitkomst { margin-top:.75rem; }
.ontbreekt { margin:.25rem 0; padding:.1rem .5rem .1rem 1.75rem; border-left:6px solid var(--fout); }
.compleet { font-weight:700; }
.leerblokken { list-style:none; padding:0; }
.leerblok .leerblok-kop { display:block; font-size:1.125rem; font-weight:800; }
.leerblok .meta, .leerblok .leerblok-oplevert { display:block; font-weight:400; }
.leerblokken li { margin:1rem 0; }
.onderdeel { margin-right:.75rem; white-space:nowrap; }
.hints { color:var(--fout); padding-left:1.25rem; }
@media (max-width:40rem) { header, main, footer { padding:.75rem; } nav a { display:inline-block; margin:.25rem 1rem .25rem 0; } }

/* ---- de Wissel (fase 4, prefix wis-) ---- */
.wis-sectie[hidden], .wis-teamactie[hidden], .wis-herinnering[hidden], .wis-terug[hidden] { display:none; }
.wis-details > summary { cursor:pointer; font-weight:700; padding:.4rem .9rem; border:3px solid var(--zwart); box-shadow:3px 3px 0 var(--zwart); display:inline-block; background:var(--wit); }
.wis-details[open] > summary { background:var(--grijs); }
.wis-paneel { margin-top:.75rem; }
.wis-privacy { border-left:6px solid var(--accent); padding:.25rem .75rem; background:var(--grijs); }
.wis-stap { border-top:2px solid var(--zwart); margin-top:1rem; padding-top:.25rem; }
.wis-stap h3 { font-size:1.05rem; margin:.5rem 0; }
.wis-pre { white-space:pre-wrap; background:var(--grijs); border:2px dashed var(--zwart); padding:.5rem .75rem; }
.wis-blok { border:3px solid var(--zwart); padding:.5rem .75rem; margin:.75rem 0; }
.wis-herinnering { border:3px solid var(--accent); padding:.25rem .75rem; margin:.75rem 0; font-weight:700; }
.wis-log { list-style:none; padding:0; }
.wis-regel { border:3px solid var(--zwart); padding:.5rem .75rem; margin:.75rem 0; }
.wis-dl dt { font-weight:700; }
.wis-dl dd { margin:0 0 .25rem 1rem; }
.wis-handmatig { margin:.75rem 0; }
.wis-melding { min-height:1.25rem; }
/* ---- dossier (fase 3): eigen klassen met prefix dos- en ver- ---- */
.dos-stand { list-style:none; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(13rem,1fr)); gap:.75rem; }
.dos-tegel { border:3px solid var(--zwart); padding:.5rem .75rem; display:flex; flex-direction:column; gap:.25rem; background:var(--wit); }
.dos-tegel-id { font-weight:700; }
.dos-tegel-titel { font-size:.875rem; }
.dos-tegel-status { font-size:1.5rem; font-weight:700; }
.dos-tegel-compleet { box-shadow:inset 0 -8px 0 var(--groen); }
.dos-tegel-bijna { box-shadow:inset 0 -8px 0 var(--oker); }
.dos-tegel-nog-niet { background:var(--leeg); }
.dos-tabelwrap, .ver-tabelwrap { overflow-x:auto; }
.dos-tabel, .ver-tabel { border-collapse:collapse; width:100%; }
.dos-tabel th, .dos-tabel td, .ver-tabel th, .ver-tabel td { border:2px solid var(--zwart); padding:.4rem .6rem; text-align:left; vertical-align:top; }
.dos-tabel thead th, .ver-tabel thead th { background:var(--zwart); color:var(--wit); }
.dos-caption { text-align:left; font-size:.875rem; padding-bottom:.25rem; }
.dos-lijst { margin:0; padding-left:1.1rem; }
.dos-herinnering, .dos-geblokkeerd { border-color:var(--accent); }
.dos-pagina { border:3px solid var(--zwart); padding:1rem; margin:1rem 0; background:var(--wit); }
.dos-onderdeel { border-top:2px solid var(--zwart); margin-top:.75rem; }
.dos-velden dt { font-weight:700; margin-top:.5rem; }
.dos-velden dd { margin:0 0 0 1rem; white-space:pre-wrap; }
.dos-controlesom code { word-break:break-all; }
#dos-afdruk { display:none; }
body.dos-afdrukmodus #dos-afdruk { display:block; }
body.dos-afdrukmodus main > :not(#dos-afdruk) { display:none; }
.ver-bestanden { padding-left:1.25rem; }
.ver-gewijzigd .ver-melding, .ver-rij-gewijzigd th { color:var(--fout); font-weight:700; }
.ver-ok .ver-melding { font-weight:700; }
.ver-rij-gewijzigd td, .ver-rij-gewijzigd th { border-color:var(--accent); }
.ver-cel { white-space:nowrap; }
@media print {
  .dos-werkbalk { display:none; }
  .dos-pagina { border:0; padding:0; margin:0; break-after:page; }
  body.dos-afdrukmodus header, body.dos-afdrukmodus footer { display:none; }
}

/* ---- leerblok 2: zoektermen, route en promptgenerator, bronlog (lb2-) ---- */
.lb2-groep { margin:.75rem 0; }
.lb2-groep h4 { margin:.5rem 0 .25rem; }
.lb2-tabel-wrap { overflow-x:auto; }
.lb2-tabel { border-collapse:collapse; width:100%; margin:.5rem 0; }
.lb2-tabel th, .lb2-tabel td { border:3px solid var(--zwart); padding:.25rem .5rem; text-align:left; vertical-align:top; }
.lb2-tabel th { background:var(--grijs); }
.lb2-cel-veld .veld, .lb2-cel-veld fieldset { margin:0; }
.lb2-cel-veld label, .lb2-cel-veld legend { font-size:.8rem; font-weight:400; margin:0 0 .15rem; }
.lb2-cel-veld fieldset { border-width:2px; padding:.1rem .4rem .3rem; }
.lb2-cel-veld .optie { display:inline-flex; margin-right:.6rem; }
.lb2-generator { border:3px dashed var(--zwart); padding:.5rem .75rem; margin:.5rem 0; }
.lb2-prompt { font-family:var(--fm); font-size:.875rem; background:var(--wit); border:2px solid var(--zwart); padding:.5rem; overflow-wrap:anywhere; }
.lb2-generator-acties { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin:.5rem 0; }
.lb2-waarschuwing { list-style:none; margin:.5rem 0; padding:0; }
.lb2-waarschuwing li { border:3px solid var(--accent); border-left-width:10px; padding:.25rem .5rem; margin:.25rem 0; font-weight:700; }
.lb2-optioneel { margin:.75rem 0; }
@media (max-width:40rem) {
  .lb2-tabel thead { position:absolute; left:-9999px; }
  .lb2-tabel, .lb2-tabel tbody, .lb2-tabel tr, .lb2-tabel td { display:block; width:100%; }
  .lb2-tabel tr { border:3px solid var(--zwart); margin:.5rem 0; }
  .lb2-tabel td { border:0; border-bottom:1px solid var(--zwart); }
  .lb2-tabel td::before { content:attr(data-kolom) ": "; font-weight:700; font-size:.8rem; }
}

/* ---- leerblok 3: register (LB-12); het invloed/belang-raster (LB-9) is het stakeholderbord hieronder ---- */
.zoekvragen-hint { border-left:6px solid var(--zwart); padding:.1rem .75rem; margin:.5rem 0; }


/* ---- bronnen en in-tekstverwijzingen (bron-) ---- */
.bron-lijst { list-style:none; padding:0; }
.bron-regel { margin:.75rem 0; padding:.25rem .5rem .25rem 2rem; text-indent:-1.5rem; border-left:6px solid var(--zwart); overflow-wrap:anywhere; }
.bron-regel:target, .bron-doel {border-left-color:var(--accent); background:var(--grijs); }
.bron-link { color:var(--zwart); font-weight:700; }
.bron-verwijzing { color:var(--zwart); font-weight:700; text-decoration-thickness:3px; }

/* ---- terugblik (fase 7, prefix tb-) en feedback op het dossier (fb-) ---- */
.vorige-keer { border-color:var(--accent); }
.tb-onderdeel { border-top:2px solid var(--zwart); margin-top:1rem; padding-top:.25rem; }
.tb-onderdeel h3 { font-size:1.05rem; margin:.5rem 0; }
.tb-kaart { background:var(--grijs); }
.tb-bewijs { border-top:2px dashed var(--zwart); margin-top:.5rem; }
.tb-samenvatting { border-left:6px solid var(--accent); padding:.25rem .75rem; }
.fb-kolommen { display:grid; grid-template-columns:repeat(auto-fit,minmax(18rem,1fr)); gap:1rem; }
.fb-lijst { list-style:none; padding:0; margin:0; }
.fb-regel { border:2px solid var(--zwart); padding:.4rem .6rem; margin:.5rem 0; }

/* ---- leerblok 4: verbanden-kaart (VB-1…VB-10), STARR (LB-15), voorlopig en opnieuw doen (ST-4, ST-5), A3-blok (LB-16) ---- */
.vb-bord { margin:.75rem 0; }
.vb-kolommen { position:relative; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2.5rem; }
.vb-kolom > * { position:relative; z-index:1; }
.vb-kolom h5 { margin:.25rem 0 .5rem; font-size:.95rem; }
.vb-lijst { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.6rem; }
.vb-kaartje { display:block; width:100%; text-align:left; font:inherit; font-size:.9375rem; line-height:1.3; cursor:pointer; color:var(--zwart); background:var(--wit); border:3px solid var(--zwart); padding:.35rem .5rem; }
.vb-kaartje:hover { background:var(--grijs); }
.vb-kaartje[aria-pressed="true"] { background:var(--zwart); color:var(--wit); }
.vb-kaartje.vb-verbonden { box-shadow:inset 0 -6px 0 var(--groen); }
.vb-kop, .vb-gekozen { display:block; font-weight:700; }
.vb-gekozen { font-size:.75rem; }
.vb-tekst { display:-webkit-box; -webkit-line-clamp:3; line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.vb-lijnen { position:absolute; left:0; top:0; width:100%; height:100%; pointer-events:none; overflow:visible; z-index:0; }
.vb-lijn { fill:none; stroke:var(--zwart); stroke-width:2.5; }
.vb-lijn-koste { stroke:var(--accent); stroke-dasharray:7 5; stroke-width:3; }
.vb-pijl { fill:var(--zwart); }
.vb-form { border:3px solid var(--accent); padding:.5rem .75rem; margin:.75rem 0; }
.vb-form-kop { font-weight:700; margin:.25rem 0; }
.vb-tekst-lijst, .vb-open, .vb-model { padding-left:1.25rem; }
.vb-tekst-lijst li, .vb-open li { margin:.35rem 0; }
.vb-weg { font-size:.8125rem; padding:.1rem .6rem; box-shadow:2px 2px 0 var(--zwart); }
.vb-markering { display:grid; grid-template-columns:repeat(auto-fit,minmax(13rem,1fr)); gap:.25rem .75rem; }
.vb-markeer legend { font-size:.95rem; }
.vb-chips { display:flex; flex-wrap:wrap; gap:.4rem; margin:.5rem 0; }
.vb-chip { font:inherit; font-size:.8125rem; cursor:pointer; color:var(--zwart); background:var(--grijs); border:2px solid var(--zwart); border-radius:1rem; padding:.15rem .7rem; min-height:2.75rem; }
.vb-chip:hover { background:var(--wit); }
.starr .veld { margin:.5rem 0; }
.voorlopig-opnieuw { border:3px dashed var(--zwart); padding:.5rem .75rem; margin:.75rem 0; }
.versie-kolommen { display:grid; grid-template-columns:repeat(auto-fit,minmax(16rem,1fr)); gap:1rem; }
.a3-blok { white-space:pre-wrap; background:var(--grijs); border:2px solid var(--zwart); padding:.5rem .75rem; max-height:16rem; overflow:auto; }
.zwakste { border-left:8px solid var(--accent); }
@media (max-width:40rem) {
  .vb-kolommen { gap:1rem; }
  .vb-kaartje { font-size:.9375rem; padding:.3rem .35rem; }   /* SX-10: ≥ 15 px, ook op 360 px */
  .vb-kolommen { grid-template-columns:1fr; }
}

/* ---- toegankelijkheid en kleine schermen (fase 8: TG-2, TG-5, PF-1) ---- */
.skip { position:absolute; left:-9999px; top:0; background:var(--zwart); color:var(--wit); padding:.5rem 1rem; font-weight:700; z-index:10; }
.skip:focus { left:0; }
main:focus { outline:none; }
code, pre { font-family:var(--fm); overflow-wrap:anywhere; }
pre { white-space:pre-wrap; }
img, video, svg { max-width:100%; height:auto; }
h1, h2, h3, p, li, dd, dt, td, th, summary, legend, label { overflow-wrap:anywhere; }
button, .knop, summary, select { min-height:2.75rem; }
input[type="checkbox"], input[type="radio"] { min-width:1.25rem; }
@media (max-width:40rem) {
  body { font-size:1rem; }
  .kaart { padding:.75rem; }
  .kaart-tik { box-shadow:3px 3px 0 var(--zwart); }
  .knoppen .knop, .knoppen button { flex:1 1 100%; text-align:center; }
  .dos-stand { grid-template-columns:1fr; }
  .fb-kolommen { grid-template-columns:1fr; }
  .onderdeel, .ver-cel { white-space:normal; }
}
@media (forced-colors:active) { .status { border-style:double; } }

/* HAN-logo in de kop */
.han-logo { display:inline-block; color:var(--zwart); margin-bottom:.5rem; }
.han-logo .logo { display:block; height:28px; width:68px; }
@media print { .han-logo { display:block; } }

/* ---- media (fase 12): routekeuze md-, kijktips, video en spellen sp- ---- */
.md-routes { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.75rem; margin:.75rem 0; }
.md-knop { font-size:1rem; min-height:4.5rem; padding:.5rem; box-shadow:5px 5px 0 var(--zwart); }   /* drie grote tegels (MD-2) */
.md-knop[aria-pressed="true"] { background:var(--zwart); color:var(--wit); }
.md-paneel { border-top:2px solid var(--zwart); margin-top:.5rem; padding-top:.25rem; }
.md-paneel h3 { margin:.5rem 0; }
.md-klaar { border-left:6px solid var(--accent); padding:.1rem .75rem; margin-top:.75rem; background:var(--grijs); }
.md-concept, .sp-fictief { display:inline-block; border:3px solid var(--accent); padding:0 .4rem; font-weight:700; font-size:.85rem; }
.md-video { display:block; width:100%; max-width:48rem; background:var(--zwart); margin:.5rem 0; }
.md-transcript { border-left:6px solid var(--zwart); padding:.1rem .75rem; margin:.75rem 0; }
.md-transcript h4 { margin:.25rem 0; }
.md-kijktips { list-style:none; padding:0; }
.md-kijktips li { border-top:2px solid var(--zwart); padding-top:.25rem; margin-top:.5rem; }
.sp-intro, .sp-veld, .sp-tekstversie { margin:.5rem 0; }
.sp-kop { margin:.5rem 0; }
.sp-kop:focus { outline:4px solid var(--accent); outline-offset:2px; }
.sp-kaart, .sp-gegevens, .sp-aaocc { margin:.5rem 0; border:3px solid var(--zwart); padding:.25rem .75rem; }
.sp-kaart dt, .sp-gegevens dt, .sp-aaocc dt { font-weight:700; margin-top:.4rem; }
.sp-kaart dd, .sp-gegevens dd, .sp-aaocc dd { margin:0 0 .25rem 1rem; }
.sp-feedback:not(:empty) { border-left:6px solid var(--accent); padding:.1rem .75rem; margin:.75rem 0; background:var(--grijs); }
.sp-vraag { font-weight:700; margin:.75rem 0 .25rem; }
.sp-voorspel { display:grid; grid-template-columns:repeat(auto-fit,minmax(14rem,1fr)); gap:.25rem 1rem; }
.sp-tabelwrap { overflow-x:auto; }
.sp-tabel { border-collapse:collapse; width:100%; margin:.5rem 0; }
.sp-tabel th, .sp-tabel td { border:3px solid var(--zwart); padding:.25rem .5rem; text-align:left; vertical-align:top; }
.sp-tabel th { background:var(--grijs); }
.sp-tabel caption { text-align:left; font-weight:700; padding-bottom:.25rem; }
.sp-toelichting { padding-left:1.25rem; }
.sp-tekstversie > summary { cursor:pointer; font-weight:700; }
.sp-opties { margin:.5rem 0; }
.sp-na { margin:.5rem 0; }
.sp-samengesteld { border:3px solid var(--zwart); padding:.5rem .75rem; margin:.5rem 0; }
@media (max-width:40rem) {
  .sp-tabel thead { position:absolute; left:-9999px; }
  .sp-tabel, .sp-tabel tbody, .sp-tabel tr, .sp-tabel td, .sp-tabel th { display:block; width:100%; }
  .sp-tabel tr { border:3px solid var(--zwart); margin:.5rem 0; }
  .sp-tabel td, .sp-tabel th { border:0; border-bottom:1px solid var(--zwart); }
}
.han-sprite { position:absolute; }

/* ---- fase 17: voortgang zichtbaar (SX-4, SX-5, SX-9, SX-12; DESIGN §5 en §6) ---- */
html { scroll-padding-top:7rem; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.eyebrow { font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; margin:0 0 .25rem; }
.taak { border-top:var(--rand) solid var(--zwart); margin:2.5rem 0; }
.taakbalk { position:sticky; top:0; z-index:5; background:var(--wit); padding:.5rem 0; border-bottom:2px solid var(--zwart); }
.taak h2 { margin:.75rem 0 .25rem; }
.segmenten { display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:3px; height:6px; margin:.35rem 0; }
.segment { background:var(--leeg); transition:background-color 200ms ease-out; }
.segment-voltooid { background:var(--zwart); }
.segment-actief { background:var(--accent); }
.stappenrij { list-style:none; display:flex; flex-wrap:wrap; gap:.25rem 1rem; margin:0; padding:0; font-size:.875rem; }
.stap-link { font-weight:700; text-decoration:none; }
.stap-link[aria-current="step"] { text-decoration:underline; text-decoration-color:var(--accent); text-decoration-thickness:3px; }
.klaar-blok { border:2px solid var(--zwart); padding:.5rem .75rem; margin:1rem 0; }
.klaar-blok h4 { margin:.25rem 0; }
.klaar-lijst { list-style:none; margin:0; padding:0; }
.klaar-item { display:flex; align-items:center; gap:.6rem; min-height:2.75rem; }
.klaar-item .vink { flex:none; width:1.5rem; height:1.5rem; border:2px solid var(--zwart); display:inline-flex; align-items:center; justify-content:center; font-weight:800; transition:background-color 200ms ease-out; }
.klaar-ja .vink { background:var(--zwart); color:var(--wit); }
.klaar-zelf label { margin:0; font-weight:400; }
.klaar-voet { border-top:2px solid var(--zwart); margin-top:1rem; padding-top:.5rem; }
.verdieping { border-top:2px dashed var(--zwart); margin-top:1rem; padding-top:.25rem; }
.bevestig { position:fixed; left:50%; top:1rem; transform:translateX(-50%); z-index:20; background:var(--zwart); color:var(--wit); padding:.5rem 1rem; font-weight:700; border:3px solid var(--zwart); }
.a3-delen { list-style:none; margin:.5rem 0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; }
.a3-deel { border:2px solid var(--zwart); padding:.4rem .5rem; min-height:4.5rem; display:flex; flex-direction:column; gap:.15rem; background:var(--wit); }
.a3-nr { font-weight:800; }
.a3-label { font-size:.8125rem; font-weight:700; }
.a3-gevuld { background:var(--accent); color:var(--wit); }
.a3-onderschrift { margin:.25rem 0 0; }
.afsluit-moment { background:var(--accent); color:var(--wit); padding:1.25rem 1rem; margin:2.5rem 0; }
.afsluit-moment h2 { font-size:1.75rem; line-height:1.1; margin:.25rem 0 .75rem; }
.afsluit-moment a { color:var(--wit); background:var(--accent); }
.afsluit-moment .klein, .afsluit-moment .meta { color:var(--wit); background:var(--accent); }
.afsluit-moment .a3-deel { background:var(--wit); color:var(--zwart); box-shadow:none; }
.afsluit-moment .a3-gevuld { background:var(--zwart); color:var(--wit); }
.afsluit-moment .a3-nieuw { outline:4px solid var(--wit); outline-offset:-6px; }
.afsluit-onderdelen { list-style:none; padding:0; }
.afsluit-onderdelen li { margin:.35rem 0; }
.knop-wit { background:var(--wit); color:var(--zwart); }
.knop-omlijnd { background:var(--accent); color:var(--wit); border-color:var(--wit); box-shadow:none; }
.knop-omlijnd:hover { background:var(--accent-donker); color:var(--wit); }
@media (max-width:40rem) {
  .a3-delen { grid-template-columns:repeat(2,minmax(0,1fr)); }
  /* mobiel: het hoofdmenu als vaste tabbalk onderin (SX-1) */
  header nav[aria-label="Hoofdmenu"] { position:fixed; left:0; right:0; bottom:0; z-index:15; display:grid; grid-template-columns:repeat(4,1fr); background:var(--wit); border-top:3px solid var(--zwart); }
  header nav[aria-label="Hoofdmenu"] a { margin:0; display:flex; align-items:center; justify-content:center; min-height:3.5rem; font-size:.8125rem; text-decoration:none; color:var(--zwart); }
  header nav[aria-label="Hoofdmenu"] a[aria-current="page"] { color:var(--zwart); box-shadow:inset 0 -5px 0 var(--accent); text-decoration:none; }
  body { padding-bottom:4.5rem; }
  html { scroll-padding-bottom:4.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition:none !important; animation:none !important; scroll-behavior:auto !important; }
  .knop:active, .kaart-tik:active, .bestandkiezer:active { transform:none; }
}

/* ---- fase 19: één taak per scherm (SX-6, SX-10; DESIGN §5.3) ---- */
.taakvoet { display:none; }
.taakweergave .taakvoet:not([hidden]) { position:sticky; bottom:0; z-index:16; display:flex; gap:.75rem; background:var(--wit); border-top:3px solid var(--zwart); padding:.6rem 0; margin-top:1.5rem; }
.taakvoet .knop-accent { flex:1; }
.taakweergave .klaar-voet .knop-accent { display:none; }             /* de vaste voet heeft de enige hoofdknop */
.taakweergave .taak:not(.op-toepassen) > .verdieping { display:none; }
.taakweergave .taak { border-top:0; margin-top:0; }
.naar-overzicht { text-decoration:none; }
.model-paneel { border:3px solid var(--accent); margin-top:.75rem; background:var(--wit); }
.model-paneel > summary { cursor:pointer; font-weight:800; padding:.5rem .75rem; list-style-position:inside; }
.model-paneel[open] > summary { border-bottom:2px solid var(--accent); }
.model-paneel > div { padding:.25rem .75rem .5rem; }
.taken-nav ol { list-style:none; padding:0; }
.taak-link { display:block; padding:.6rem .75rem; border:3px solid var(--zwart); box-shadow:5px 5px 0 var(--zwart); margin:.75rem 0; text-decoration:none; }
.kaart-tik.taak-link:hover, .taak-link:hover { background:var(--grijs); color:var(--zwart); }
.taak-klaar { font-weight:400; }
html { scroll-padding-bottom:5rem; }
@media (max-width:40rem) {
  .md-routes { grid-template-columns:1fr; }
  body.in-taak header nav[aria-label="Hoofdmenu"] { display:none; }   /* focus: in een taak alleen de taak (DESIGN §2.1) */
  body.in-taak { padding-bottom:0; }
}
.verder-kaart { background:var(--zwart); color:var(--wit); padding:1rem; margin:1rem 0; }
.verder-kaart h2 { margin:.25rem 0; }
.verder-kaart .nr { background:var(--wit); color:var(--zwart); }
.verder-kaart .knop-accent { margin-top:.5rem; border-color:var(--wit); }
/* het verhaal bovenaan de startpagina (ST-8, ST-9, ADR B113, B119): altijd als eerste, een zwart vlak zoals „Verder waar je
   was”; de drie blokken zijn witte informatiekaarten zonder schaduw (SX-7) */
.verhaal { background:var(--zwart); color:var(--wit); padding:1.25rem; margin:1rem 0 1.5rem; }
.verhaal > h2, .verhaal > summary { font-size:1.6rem; font-weight:800; line-height:1.2; margin:0 0 .75rem; }
.verhaal-blokken { display:grid; grid-template-columns:repeat(auto-fit, minmax(14rem, 1fr)); gap:.75rem; margin:.5rem 0 1rem; }
.verhaal-blok { margin:0; color:var(--zwart); }
.verhaal-blok h3 { margin:0 0 .4rem; }
.verhaal-blok p { margin:0; }
.verhaal-knoppen { display:flex; flex-wrap:wrap; gap:.75rem; margin:0 0 .5rem; }
.verhaal .knop-accent { border-color:var(--wit); }
.verhaal .klein { margin:0; }
.verhaal .klein a { color:var(--wit); background:var(--zwart); }
.verhaal-details:not([open]) > summary { margin:0; }
.verhaal-details > summary { cursor:pointer; min-height:2.75rem; }
/* Waarde-simulator als spel (DESIGN §7.4, fase 19) */
.sp-keuzekaarten { display:grid; gap:.75rem; margin:.5rem 0; }
.sp-keuzekaart { font:inherit; font-weight:700; text-align:left; min-height:4rem; padding:.75rem 1rem; cursor:pointer; color:var(--zwart); background:var(--wit); border:3px solid var(--zwart); box-shadow:5px 5px 0 var(--zwart); }
.sp-keuzekaart:hover { background:var(--grijs); }
.sp-keuzekaart:active { box-shadow:none; transform:translate(5px,5px); }
.sp-voorspelrij { border-top:2px solid var(--zwart); padding:.4rem 0; }
.sp-kapitaal { font-weight:700; display:block; }
.sp-chips { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.25rem; }
.sp-chip { font:inherit; font-size:.875rem; cursor:pointer; min-height:2.75rem; padding:.2rem .7rem; color:var(--zwart); background:var(--wit); border:2px solid var(--zwart); border-radius:1rem; }
.sp-chip[aria-pressed="true"] { background:var(--zwart); color:var(--wit); }
.sp-balken { list-style:none; padding:0; margin:.5rem 0; }
.sp-balkrij { display:grid; grid-template-columns:minmax(7rem,1fr) 3fr; gap:.25rem .75rem; align-items:center; border-top:2px solid var(--zwart); padding:.4rem 0; }
.sp-oordeel { grid-column:2; font-size:.875rem; }
.sp-termijnen { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; }
.sp-balk { position:relative; display:flex; align-items:flex-end; height:3.25rem; border:2px solid var(--zwart); background:var(--wit); overflow:hidden; }
.sp-vulling { position:absolute; left:0; right:0; bottom:0; height:0; transition:height 250ms ease-out; background:var(--grijs); }
.sp-balk-plus .sp-vulling { background:var(--grijs); border-top:4px solid var(--zwart); }
.sp-balk-min .sp-vulling { background:var(--roze); border-top:4px solid var(--accent); }
.sp-balken-zichtbaar .sp-balk-plus .sp-vulling { height:85%; }
.sp-balken-zichtbaar .sp-balk-input .sp-vulling { height:50%; }
.sp-balken-zichtbaar .sp-balk-min .sp-vulling { height:20%; }
.sp-balktekst { position:relative; font-size:.8125rem; font-weight:700; padding:.1rem .3rem; background:var(--wit); margin:.15rem; }
@media (max-width:40rem) { .sp-balkrij { grid-template-columns:1fr; } .sp-oordeel { grid-column:1; } }
.vb-prompt { border:3px solid var(--zwart); border-left:10px solid var(--accent); padding:.5rem .75rem; font-weight:700; margin:.75rem 0; }
.vb-details { margin:.75rem 0; }
.vb-details > summary { cursor:pointer; font-weight:700; }
.vb-kaartje[aria-pressed="true"] .vb-tekst, .vb-kaartje:focus .vb-tekst { -webkit-line-clamp:unset; line-clamp:none; }   /* lange kaart klapt open bij tik */
.a3-bezig { border-style:dashed; border-width:3px; }
.a3-opbouw { font-size:.8125rem; }

/* ---- figuur als citaat (ADR B84): het A3-sjabloon (taak 1.1; Schwagerman & Ulmer, 2013), de six capitals (taak 2.1; IIRC, 2021), het VPC (taak 6.1; Strategyzer, z.d.-b) en het BMC (taak 7.1; Strategyzer, z.d.-a) ---- */
.a3-vel { margin:1rem 0; }
.a3-vel img { display:block; width:100%; height:auto; border:3px solid var(--zwart); background:var(--wit); }
.a3-vel figcaption { font-size:.875rem; margin-top:.4rem; }
.a3-vel figcaption p { margin:.25rem 0; }
.imrad { display:block; width:100%; max-width:26rem; height:auto; margin:0 auto; }
.mini-artikelen { display:grid; gap:1rem; grid-template-columns:repeat(auto-fit, minmax(16rem, 1fr)); margin:1rem 0; }
.mini-artikel { border:var(--rand) solid var(--zwart); background:var(--wit); padding:.75rem 1rem; font-size:.9375rem; }
.mini-artikel h5 { margin:.25rem 0; }
.mini-artikel h6 { margin:.75rem 0 .25rem; font-size:.9375rem; }
.mini-artikel .fictief { font-weight:700; color:var(--grijs-tekst); margin:0; }
.mini-figuur { margin:.5rem 0; }
.mini-grafiek { display:block; width:100%; height:auto; }
.ai-voorbeeld { border:var(--rand) dashed var(--zwart); background:var(--wit); padding:.75rem 1rem; margin:1rem 0; font-size:.9375rem; }
.ai-kop { font-weight:700; margin:.75rem 0 .25rem; }
.ai-aaocc { margin:0; }
.ai-aaocc dt { font-weight:700; border-top:1px solid var(--zwart); padding-top:.3rem; }
.ai-aaocc dd { margin:0 0 .3rem; }
.ai-oordeel { display:inline-block; min-width:1.5rem; text-align:center; border:2px solid var(--zwart); margin-left:.25rem; }
/* TOM-bord 8.1: de plek (ADR B98) */
.tm-plek:not(.tm-geladen) { min-height:8rem; margin:1rem 0; }
.a3-koppeling > summary { cursor:pointer; font-weight:700; min-height:2.75rem; display:flex; align-items:center; }
.a3-koppeling table { border-collapse:collapse; width:100%; font-size:.875rem; }
.a3-koppeling th, .a3-koppeling td { border:2px solid var(--zwart); padding:.25rem .4rem; text-align:left; vertical-align:top; }
@media print { .a3-vel { break-inside:avoid; } }

/* ---- hint bij een vraag (SX-13): uitklapbaar, geen mouse-over ---- */
.hint { margin:.15rem 0 .35rem; }
.hint > summary { display:inline-flex; align-items:center; min-height:2.75rem; cursor:pointer; font-weight:700; font-size:.875rem; list-style:none; text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:3px; }
.hint > summary::-webkit-details-marker { display:none; }
.hint > summary::before { content:"?"; display:inline-flex; align-items:center; justify-content:center; width:1.4rem; height:1.4rem; margin-right:.4rem; border:2px solid var(--zwart); border-radius:50%; font-size:.8125rem; text-decoration:none; }
.hint[open] > summary::before { background:var(--zwart); color:var(--wit); }
.hint > p { margin:.1rem 0 0; padding:.4rem .6rem; border-left:6px solid var(--accent); background:var(--grijs); font-size:.9375rem; }
.hint > .hint-waar { margin:0 0 .4rem; padding-top:0; font-size:.875rem; }

/* ---- invulplekken in een format-zin (DESIGN §5.3): <gebruiker>, <pain/gain>, <waarde> ---- */
.invulplek { background:var(--roze); box-shadow:inset 0 -3px 0 var(--accent); padding:0 .2em; -webkit-box-decoration-break:clone; box-decoration-break:clone; }
.invulplek-leeg { font-weight:800; }
.invulplek-gevuld { font-weight:700; }

/* ---- metrokaart (SX-18, SX-19; DESIGN §6 Metrokaart; ADR B110) ---- */
.metro { max-width:60rem; margin:.25rem auto .75rem; padding:0 1rem; } /* lijnt uit met header en main */
@media (max-width:40rem) { .metro { padding:0 .75rem; } }
.metro-doek { width:100%; }
.metro-kaart { display:block; max-width:100%; overflow:visible; }
.metro-spoor { stroke:var(--lijn); stroke-width:6; stroke-linecap:round; }
.metro-spoor.gestippeld { stroke-dasharray:6 4; stroke-linecap:butt; }
.metro-kaart.lijn-1 { --lijn:var(--lijn-1); }
.metro-kaart.lijn-2 { --lijn:var(--lijn-2); }
.metro-kaart.lijn-3 { --lijn:var(--lijn-3); }
.metro-kaart.lijn-4 { --lijn:var(--lijn-4); }
.metro-spoor.spoor-lijn-1 { stroke:var(--lijn-1); }
.metro-spoor.spoor-lijn-2 { stroke:var(--lijn-2); }
.metro-spoor.spoor-lijn-3 { stroke:var(--lijn-3); }
.metro-spoor.spoor-lijn-4 { stroke:var(--lijn-4); }
.metro-tik { fill:transparent; }
.metro-halte circle { fill:var(--wit); stroke:var(--lijn); stroke-width:3; transition:fill 200ms ease; }
.metro-halte.halte-af circle { fill:var(--lijn); }
.metro-halte.halte-hier circle { fill:var(--wit); stroke:var(--zwart); }
.metro-halte.halte-begin circle, .metro-halte.halte-eind circle { stroke:var(--zwart); stroke-width:4; }
.metro-halte.halte-begin.halte-af circle, .metro-halte.halte-eind.halte-af circle { fill:var(--zwart); }
.metro-halte:focus-visible .metro-tik { stroke:var(--accent); stroke-width:4; }
.metro-label { font-size:13px; fill:var(--grijs-tekst); }
.metro-label-hier, .metro-label-overstap { font-weight:700; fill:var(--zwart); }
.metro-regel { font-size:.8125rem; color:var(--grijs-tekst); margin:.25rem 0 0; }
/* infovenster bij een halte (SX-20, ADR B112): niet klikbaar, dus geen schaduw (SX-7) */
.metro { position:relative; }
.metro-info { position:absolute; z-index:10; max-width:16rem; background:var(--wit); color:var(--zwart); border:3px solid var(--zwart); padding:.4rem .6rem; font-size:13px; line-height:1.35; }
.metro-info strong { display:block; }
.metro-info[hidden] { display:none; }