/* ==========================================================================
   Scheikunde PA: Stoffen en Materialen — site.css
   Schoon en rustig, licht speels accent. Kleuraccent per niveau.
   Leesmodus: grotere letter, ruimere regelafstand, rustiger lettertype.
   ========================================================================== */

:root {
  --tekst: #1a1a1a;
  --tekst-zacht: #4a4a4a;
  --achtergrond: #fbfaf7;
  --vlak: #ffffff;
  --rand: #d9d5cc;
  --focus: #ff8c00;
  --goed: #1b7f4b;
  --goed-vlak: #e3f4ea;
  --fout: #c0392b;
  --fout-vlak: #fbe9e7;
  --let-op: #b7791f;
  --let-op-vlak: #fff4dc;
  --accent: #1a5fb4;
  --accent-vlak: #e5eef9;
  --accent-donker: #124a8c;
  --radius: 12px;
  --schaduw: 0 1px 3px rgba(0, 0, 0, 0.08);
  --lettertype: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

html[data-niveau="vmbo"] { --accent: #1b7f4b; --accent-vlak: #e3f4ea; --accent-donker: #135f37; }
html[data-niveau="havo"] { --accent: #1a5fb4; --accent-vlak: #e5eef9; --accent-donker: #124a8c; }
html[data-niveau="vwo"]  { --accent: #7a3e9d; --accent-vlak: #f1e8f6; --accent-donker: #5c2b78; }

/* Leesmodus */
html.leesmodus { font-size: 118%; }
html.leesmodus body { font-family: Verdana, Geneva, Tahoma, sans-serif; line-height: 1.85; letter-spacing: 0.01em; }
html.leesmodus p, html.leesmodus li, html.leesmodus td, html.leesmodus th { max-width: 65ch; }

* { box-sizing: border-box; }

html { font-size: 100%; }

body {
  margin: 0;
  font-family: var(--lettertype);
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--tekst);
  background: var(--achtergrond);
}

/* Toegankelijkheid: duidelijke focus overal */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.alleen-schermlezer {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}

.sla-over {
  position: absolute; left: -999px; top: 0;
  background: var(--accent); color: #fff; padding: 0.5rem 1rem; z-index: 100;
}
.sla-over:focus { left: 0.5rem; top: 0.5rem; }

a { color: var(--accent-donker); }
a:hover { color: var(--accent); }

h1, h2, h3, h4 { line-height: 1.25; margin: 1.6em 0 0.6em; }
h1 { font-size: 1.9rem; margin-top: 0.8em; }
h2 { font-size: 1.45rem; }
h3 { font-size: 1.2rem; }

p { margin: 0.6em 0 0.9em; }

table { border-collapse: collapse; margin: 0.8em 0 1.2em; width: 100%; font-size: 0.97em; }
th, td { border: 1px solid var(--rand); padding: 0.45em 0.7em; text-align: left; vertical-align: top; }
th { background: var(--accent-vlak); }
.tabel-scroll { overflow-x: auto; }

/* --------------------------------------------------------------------------
   Kop en navigatie
   -------------------------------------------------------------------------- */
.site-kop {
  background: var(--vlak);
  border-bottom: 3px solid var(--accent);
  box-shadow: var(--schaduw);
}
.kop-binnen {
  max-width: 1000px; margin: 0 auto; padding: 0.7rem 1rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.2rem;
}
.site-naam {
  text-decoration: none; color: var(--tekst); font-weight: 700; font-size: 1.15rem;
  display: inline-flex; align-items: center; gap: 0.5rem;
}
.site-naam .logo {
  display: inline-block; width: 1.6em; height: 1.6em; border-radius: 50%;
  background: var(--accent); position: relative;
}
.site-naam .logo::after {
  content: ""; position: absolute; width: 0.55em; height: 0.55em; border-radius: 50%;
  background: #fff; left: 0.3em; top: 0.3em;
}
.site-naam .logo::before {
  content: ""; position: absolute; width: 0.4em; height: 0.4em; border-radius: 50%;
  background: #fff; right: 0.3em; bottom: 0.3em;
}
.site-naam span.onder { font-weight: 400; color: var(--tekst-zacht); }

.hoofdnav { display: flex; flex-wrap: wrap; gap: 0.2rem; margin-left: auto; }
.hoofdnav a {
  text-decoration: none; padding: 0.35rem 0.7rem; border-radius: 999px; color: var(--tekst);
}
.hoofdnav a:hover { background: var(--accent-vlak); }
.hoofdnav a[aria-current="page"] { background: var(--accent); color: #fff; }
/* Afwijking van de bron (scheikunde5m, sessie 2): link "← Klas 3", zoals in Periode B. */
.hoofdnav a.terug { color: var(--tekst-zacht); border: 1px solid var(--rand); }
.hoofdnav a.terug::before { content: "\2190\00a0"; }

.kop-rechts { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }

/* Niveauschakelaar */
.niveau-schakelaar { display: inline-flex; border: 2px solid var(--rand); border-radius: 999px; overflow: hidden; background: var(--vlak); }
.niveau-schakelaar button {
  border: 0; background: transparent; padding: 0.35rem 0.85rem; font: inherit; cursor: pointer; color: var(--tekst);
}
.niveau-schakelaar button + button { border-left: 2px solid var(--rand); }
.niveau-schakelaar button[aria-pressed="true"] { background: var(--accent); color: #fff; font-weight: 700; }
.niveau-schakelaar button:focus-visible { outline-offset: -3px; }

.knop-schakel {
  border: 2px solid var(--rand); background: var(--vlak); border-radius: 999px;
  padding: 0.35rem 0.85rem; font: inherit; cursor: pointer; color: var(--tekst);
}
.knop-schakel[aria-pressed="true"] { background: var(--tekst); color: #fff; border-color: var(--tekst); }

/* --------------------------------------------------------------------------
   Pagina-indeling
   -------------------------------------------------------------------------- */
main { max-width: 1000px; margin: 0 auto; padding: 0.5rem 1rem 3rem; }

.paragraaf-kop { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1rem; }
.paragraaf-kop .nummer { color: var(--accent); font-weight: 800; }
.paragraaf-kop .ondertitel { font-size: 1rem; font-weight: 400; color: var(--tekst-zacht); flex-basis: 100%; }
.niveau-label {
  display: inline-block; background: var(--accent); color: #fff; border-radius: 999px;
  padding: 0.1em 0.7em; font-size: 0.85rem; font-weight: 700; vertical-align: middle;
}

.subnav {
  position: sticky; top: 0; z-index: 5;
  display: flex; flex-wrap: wrap; gap: 0.3rem; padding: 0.5rem 0;
  background: var(--achtergrond); border-bottom: 1px solid var(--rand); margin-bottom: 1rem;
}
.subnav a { text-decoration: none; padding: 0.3rem 0.8rem; border-radius: 999px; border: 1px solid var(--rand); background: var(--vlak); color: var(--tekst); }
.subnav a:hover { border-color: var(--accent); }

section.deel { margin-top: 2.5rem; }
section.deel > h2 { border-left: 6px solid var(--accent); padding-left: 0.6rem; }

.blok {
  background: var(--vlak); border: 1px solid var(--rand); border-radius: var(--radius);
  padding: 0.6rem 1.3rem 0.9rem; margin: 1rem 0; box-shadow: var(--schaduw);
}
.blok > h3 { margin-top: 0.6em; }
.blok.hoger { border-style: dashed; }
.blok .hoger-label {
  float: right; font-size: 0.8rem; font-weight: 700; color: var(--tekst-zacht);
  border: 1px solid var(--rand); border-radius: 999px; padding: 0.05em 0.6em; margin: 0.6em 0 0 0.6em;
}
.blok ul, .blok ol { padding-left: 1.4em; }
.blok li { margin: 0.25em 0; }

.hint { color: var(--tekst-zacht); font-size: 0.95em; }
.leeg { padding: 1rem; background: var(--accent-vlak); border-radius: var(--radius); }

.kader {
  border-left: 6px solid var(--accent); background: var(--accent-vlak);
  padding: 0.5rem 1rem; border-radius: 0 var(--radius) var(--radius) 0; margin: 1em 0;
}
.kader.let-op { border-color: var(--let-op); background: var(--let-op-vlak); }

/* Waarschuwingsblok (bijv. disclaimer oefentoets): rode rand, rood icoon en rode kop, tekst donker */
.waarschuwing {
  border: 3px solid var(--fout); background: #fff; border-radius: var(--radius);
  padding: 0.8rem 1.2rem; margin: 1em 0;
}
.waarschuwing > h3, .waarschuwing > strong.kop { color: var(--fout); margin-top: 0.2em; }
.waarschuwing > h3::before, .waarschuwing > strong.kop::before {
  content: "!"; display: inline-block; width: 1.4em; height: 1.4em; line-height: 1.4em; text-align: center;
  border-radius: 50%; background: var(--fout); color: #fff; margin-right: 0.5em; font-weight: 800;
}

/* Figuren (inline SVG) */
figure { margin: 1em 0; text-align: center; }
figure svg { max-width: 100%; width: 640px; height: auto; }
figcaption { font-size: 0.9em; color: var(--tekst-zacht); margin-top: 0.3em; }
/* vereenvoudigde gevarensymbolen in een tabel (§1 vmbo) */
.picto { width: 3.4em; height: 3.4em; vertical-align: middle; display: block; }
.picto-tabel td:first-child { width: 4em; text-align: center; }
.picto-ghs { display: inline-flex; flex-direction: column; align-items: center; gap: 0.1em; }
.picto-code { font-size: 0.75em; color: var(--tekst-zacht); letter-spacing: 0.02em; }
.fig-lijn { stroke: var(--accent); fill: none; stroke-width: 3; stroke-linejoin: round; }
.fig-lijn-b { stroke: var(--fout); fill: none; stroke-width: 3; stroke-linejoin: round; stroke-dasharray: 7 5; }
.fig-bol { fill: var(--accent); }
.fig-bol-b { fill: var(--let-op); }
.fig-water { fill: var(--accent-vlak); stroke: var(--accent); stroke-width: 1.5; }
.fig-water-donker { fill: var(--accent); }
.fig-vlam { fill: var(--let-op); }
.fig-stap { fill: var(--accent-vlak); stroke: var(--accent); stroke-width: 2; }
.fig-as { stroke: var(--tekst); stroke-width: 2; fill: none; }
.fig-tekst { font-family: var(--lettertype); font-size: 14px; fill: var(--tekst); }
.fig-tekst.klein { font-size: 12px; fill: var(--tekst-zacht); }
.fig-vak { fill: none; stroke: var(--rand); stroke-width: 2; }
.fig-pijl { stroke: var(--tekst); stroke-width: 2; fill: none; }
.fig-pijlkop { fill: var(--tekst); }
.fig-stippel { stroke: var(--tekst-zacht); stroke-width: 1; stroke-dasharray: 4 4; fill: none; }
/* figuren batch 2 */
.fig-licht { fill: var(--let-op); opacity: 0.55; }
.fig-licht-zwak { fill: var(--let-op); opacity: 0.15; }
.fig-straal { stroke: var(--let-op); stroke-width: 2; stroke-linecap: round; }
.fig-kool { fill: #4a4a4a; stroke: #262626; stroke-width: 2; }
.fig-porie { stroke: var(--achtergrond); stroke-width: 9; stroke-linecap: round; fill: none; }
.fig-stokje { fill: #8a5a2b; stroke: #5b3a17; stroke-width: 1.5; }
.fig-olie { fill: #f2d16b; stroke: #c9a227; stroke-width: 1.5; }
.fig-zand { fill: #c9a96e; stroke: #8a6a3a; stroke-width: 1; }
.fig-stroom { stroke: var(--accent); stroke-width: 4; fill: none; stroke-linecap: round; opacity: 0.8; }
.fig-tint { fill: var(--let-op); }
.fig-actief { fill: var(--let-op-vlak); }
.fig-bots { fill: var(--let-op); }
.fig-tril { stroke: var(--tekst-zacht); stroke-width: 1.5; stroke-linecap: round; fill: none; }
.fig-blad { fill: #79b25a; stroke: #3f7a2a; stroke-width: 2; }
.fig-nerf { stroke: #3f7a2a; stroke-width: 1.5; fill: none; }
.fig-papier { fill: #f4f1ea; stroke: var(--rand); stroke-width: 2; }
.fig-beton { fill: #cfcbc3; stroke: #8f8b83; stroke-width: 2; }
.fig-kiezel { fill: #a9a49a; }
.fig-vezel { stroke: #2b2b2b; stroke-width: 2.5; stroke-linecap: round; }
.fig-staaf { stroke: var(--tekst-zacht); stroke-width: 1.5; }
/* video's in de theorie (map media/) */
figure.video video { width: 640px; max-width: 100%; height: auto; border-radius: var(--radius); background: #000; display: block; margin: 0 auto; }

/* --------------------------------------------------------------------------
   Begrippen: popover in de theorie en begrippenlijst
   -------------------------------------------------------------------------- */
.begrip {
  font: inherit; font-weight: 700; color: var(--accent-donker); background: transparent; border: 0;
  border-bottom: 2px dotted var(--accent); padding: 0; cursor: pointer; border-radius: 2px;
}
.begrip[aria-expanded="true"] { background: var(--accent-vlak); }
.begrip-wrap { position: relative; display: inline; }
.popover {
  position: absolute; left: 0; top: 1.6em; z-index: 20; width: min(28rem, 85vw);
  background: var(--vlak); border: 2px solid var(--accent); border-radius: var(--radius);
  padding: 0.6rem 0.9rem; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15); font-weight: 400; font-size: 0.95rem;
}
.popover strong { color: var(--accent-donker); }
.popover .sluit { float: right; border: 0; background: transparent; font-size: 1.2em; cursor: pointer; line-height: 1; padding: 0 0.2em; }

dl.begrippenlijst { display: grid; grid-template-columns: max-content 1fr; gap: 0.4em 1.2em; }
dl.begrippenlijst dt { font-weight: 700; color: var(--accent-donker); }
dl.begrippenlijst dd { margin: 0; }
dl.begrippenlijst .kernwoord {
  font-size: 0.7rem; font-weight: 700; color: var(--tekst-zacht); border: 1px solid var(--rand);
  border-radius: 999px; padding: 0 0.5em; margin-left: 0.4em; vertical-align: middle;
}
@media (max-width: 600px) { dl.begrippenlijst { grid-template-columns: 1fr; } dl.begrippenlijst dd { margin-bottom: 0.6em; } }

/* Flashcards */
.flashcards { margin-top: 1rem; }
.flash-instel { display: flex; flex-wrap: wrap; gap: 0.6rem 1.2rem; align-items: center; margin-bottom: 0.8rem; }
.flash-instel label { display: inline-flex; align-items: center; gap: 0.4em; }
.flash-instel select { font: inherit; padding: 0.25em 0.5em; border-radius: 6px; border: 2px solid var(--rand); }
.kaart {
  background: var(--vlak); border: 2px solid var(--accent); border-radius: var(--radius);
  min-height: 9rem; padding: 1.2rem 1.4rem; display: flex; flex-direction: column; justify-content: center;
  text-align: center; box-shadow: var(--schaduw);
}
.kaart .kant-label { font-size: 0.8rem; color: var(--tekst-zacht); text-transform: uppercase; letter-spacing: 0.06em; }
.kaart .kant-tekst { font-size: 1.15rem; margin: 0.4em 0; }
.kaart.omgedraaid { background: var(--accent-vlak); }
.flash-knoppen { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-top: 0.8rem; align-items: center; }
.flash-teller { color: var(--tekst-zacht); }

/* --------------------------------------------------------------------------
   Knoppen
   -------------------------------------------------------------------------- */
.knop {
  font: inherit; font-weight: 600; cursor: pointer; border-radius: 999px;
  padding: 0.45rem 1.1rem; border: 2px solid var(--accent); background: var(--accent); color: #fff;
}
.knop:hover { background: var(--accent-donker); border-color: var(--accent-donker); }
.knop.licht { background: var(--vlak); color: var(--accent-donker); }
.knop.licht:hover { background: var(--accent-vlak); }
.knop.klein { padding: 0.25rem 0.7rem; font-size: 0.9rem; }
.knop[disabled] { opacity: 0.55; cursor: default; }

/* --------------------------------------------------------------------------
   Oefenen
   -------------------------------------------------------------------------- */
.voortgang-balk {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.2rem;
  background: var(--vlak); border: 1px solid var(--rand); border-radius: var(--radius); padding: 0.6rem 1rem;
}
.voortgang-balk .meter { flex: 1 1 12rem; height: 0.8rem; background: var(--rand); border-radius: 999px; overflow: hidden; position: relative; }
.voortgang-balk .meter .gemaakt { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent-vlak); border-right: 2px solid var(--accent); }
.voortgang-balk .meter .goed { position: absolute; left: 0; top: 0; bottom: 0; background: var(--goed); }

.vraag {
  background: var(--vlak); border: 1px solid var(--rand); border-radius: var(--radius);
  padding: 0.8rem 1.3rem 1rem; margin: 1.2rem 0; box-shadow: var(--schaduw);
}
.vraag.is-goed { border-color: var(--goed); }
.vraag.is-fout { border-color: var(--fout); }
.vraag-kop { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin-bottom: 0.4rem; }
.vraag-kop .vraag-nummer { font-weight: 800; color: var(--accent); }
.vraag-kop .vraag-type { font-size: 0.8rem; color: var(--tekst-zacht); border: 1px solid var(--rand); border-radius: 999px; padding: 0.05em 0.6em; }
.vraag-kop .vraag-status { margin-left: auto; font-weight: 700; }
.vraag-kop .vraag-status.goed { color: var(--goed); }
.vraag-kop .vraag-status.fout { color: var(--fout); }
.vraag-tekst { font-weight: 500; }
.vraag-tekst.vraag-deel { margin-top: 1rem; }
.vraag fieldset { border: 0; padding: 0; margin: 0; }
.vraag legend { padding: 0; font-weight: 500; }
.vraag-knoppen { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.8rem; }

.opties { list-style: none; padding: 0; margin: 0.5rem 0; }
.opties li { margin: 0.3rem 0; }
.opties label {
  display: flex; gap: 0.6em; align-items: flex-start; padding: 0.5rem 0.8rem;
  border: 2px solid var(--rand); border-radius: 10px; cursor: pointer; background: var(--vlak);
}
.opties label:hover { border-color: var(--accent); }
.opties input { margin-top: 0.3em; flex: none; }
.opties .letter { font-weight: 700; color: var(--accent-donker); min-width: 1.4em; }
.opties li.goed label { border-color: var(--goed); background: var(--goed-vlak); }
.opties li.fout label { border-color: var(--fout); background: var(--fout-vlak); }

.feedback { margin-top: 0.8rem; padding: 0.6rem 0.9rem; border-radius: 10px; border-left: 6px solid var(--rand); background: var(--achtergrond); }
.feedback.goed { border-color: var(--goed); background: var(--goed-vlak); }
.feedback.fout { border-color: var(--fout); background: var(--fout-vlak); }
.feedback.info { border-color: var(--let-op); background: var(--let-op-vlak); }
.feedback ul { margin: 0.3em 0 0; padding-left: 1.3em; }

/* Categoriseer (slepen of klikken) */
.cat-uitleg { font-size: 0.92em; color: var(--tekst-zacht); }
.cat-pool, .cat-vak { min-height: 3.2rem; border: 2px dashed var(--rand); border-radius: 10px; padding: 0.4rem; display: flex; flex-wrap: wrap; gap: 0.4rem; align-content: flex-start; }
.cat-vak { border-style: solid; background: var(--achtergrond); }
.cat-vak.doel { border-color: var(--accent); background: var(--accent-vlak); }
.cat-vakken { display: grid; gap: 0.7rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); margin-top: 0.7rem; }
.cat-vak-wrap > .cat-titel { font-weight: 700; margin: 0.2rem 0; }
.cat-vak-wrap.geselecteerd > .cat-titel { color: var(--accent-donker); }
.cat-item {
  font: inherit; text-align: left; cursor: grab; border: 2px solid var(--accent); background: var(--vlak); color: var(--tekst);
  border-radius: 8px; padding: 0.35rem 0.7rem; max-width: 100%;
}
.cat-item[aria-pressed="true"] { background: var(--accent); color: #fff; }
.cat-item.goed { border-color: var(--goed); background: var(--goed-vlak); color: var(--tekst); }
.cat-item.fout { border-color: var(--fout); background: var(--fout-vlak); color: var(--tekst); }
.cat-item.goed::before { content: "✓ "; color: var(--goed); font-weight: 800; }
.cat-item.fout::before { content: "✗ "; color: var(--fout); font-weight: 800; }
.cat-vak-knop { margin-top: 0.3rem; }

/* Volgorde */
ol.volgorde { list-style: none; padding: 0; margin: 0.5rem 0; counter-reset: stap; }
ol.volgorde li {
  display: flex; align-items: center; gap: 0.6rem; border: 2px solid var(--rand); border-radius: 10px;
  padding: 0.4rem 0.7rem; margin: 0.35rem 0; background: var(--vlak);
}
ol.volgorde li::before { counter-increment: stap; content: counter(stap); font-weight: 800; color: var(--accent); min-width: 1.4em; }
ol.volgorde li .tekst { flex: 1; }
ol.volgorde li.goed { border-color: var(--goed); background: var(--goed-vlak); }
ol.volgorde li.fout { border-color: var(--fout); background: var(--fout-vlak); }
ol.volgorde .pijlknop { font: inherit; border: 1px solid var(--rand); background: var(--vlak); border-radius: 6px; cursor: pointer; padding: 0.1rem 0.5rem; }
ol.volgorde .pijlknop[disabled] { opacity: 0.35; cursor: default; }

/* Getal / kort */
.invoer-rij { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.5rem; }
.invoer-rij input { font: inherit; padding: 0.4rem 0.6rem; border: 2px solid var(--rand); border-radius: 8px; width: 10rem; }
.invoer-rij .eenheid { font-weight: 700; }

/* Open vragen */
.vraag textarea { width: 100%; min-height: 7rem; font: inherit; padding: 0.6rem; border: 2px solid var(--rand); border-radius: 10px; resize: vertical; }
.modelantwoord { margin-top: 0.8rem; }
.checkpunten { list-style: none; padding: 0; margin: 0.5rem 0; }
.checkpunten li { border: 1px solid var(--rand); border-radius: 10px; padding: 0.5rem 0.8rem; margin: 0.4rem 0; }
.checkpunten .keuzes { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 0.3rem; }
.checkpunten .keuzes label { display: inline-flex; align-items: center; gap: 0.3em; cursor: pointer; }

/* Reflectie */
.reflectie-lijst { list-style: none; padding: 0; }
.reflectie-lijst li { display: flex; gap: 0.7rem; align-items: flex-start; padding: 0.5rem 0; border-bottom: 1px solid var(--rand); }
.reflectie-lijst input { margin-top: 0.4em; width: 1.2em; height: 1.2em; flex: none; }
details.ai-check { margin-top: 1.2rem; border: 1px solid var(--rand); border-radius: var(--radius); background: var(--vlak); padding: 0.4rem 1rem; }
details.ai-check summary { cursor: pointer; font-weight: 700; padding: 0.4rem 0; }
details.ai-check pre {
  white-space: pre-wrap; background: var(--achtergrond); border: 1px solid var(--rand); border-radius: 10px;
  padding: 0.8rem 1rem; font-size: 0.92em; line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Startpagina
   -------------------------------------------------------------------------- */
.intro { font-size: 1.1rem; max-width: 60ch; }
.niveau-keuze { display: grid; gap: 0.8rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); margin: 1rem 0 2rem; }
.niveau-keuze button {
  font: inherit; font-size: 1.15rem; font-weight: 700; cursor: pointer; padding: 1rem;
  border: 3px solid var(--rand); border-radius: var(--radius); background: var(--vlak); color: var(--tekst);
}
.niveau-keuze button[data-niveau="vmbo"]:hover, .niveau-keuze button[data-niveau="vmbo"][aria-pressed="true"] { border-color: #1b7f4b; background: #e3f4ea; }
.niveau-keuze button[data-niveau="havo"]:hover, .niveau-keuze button[data-niveau="havo"][aria-pressed="true"] { border-color: #1a5fb4; background: #e5eef9; }
.niveau-keuze button[data-niveau="vwo"]:hover, .niveau-keuze button[data-niveau="vwo"][aria-pressed="true"] { border-color: #7a3e9d; background: #f1e8f6; }
.niveau-keuze small { display: block; font-weight: 400; color: var(--tekst-zacht); }

.kaarten { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.kaart-par {
  background: var(--vlak); border: 1px solid var(--rand); border-radius: var(--radius); padding: 1rem 1.2rem;
  box-shadow: var(--schaduw); display: flex; flex-direction: column; gap: 0.4rem;
}
.kaart-par .nummer { color: var(--accent); font-weight: 800; font-size: 0.95rem; }
.kaart-par h3 { margin: 0; }
.kaart-par .binnenkort { color: var(--tekst-zacht); font-style: italic; }
.kaart-par .voortgang-klein { font-size: 0.92rem; color: var(--tekst-zacht); }
.kaart-par .meter { height: 0.6rem; background: var(--rand); border-radius: 999px; overflow: hidden; position: relative; }
.kaart-par .meter .gemaakt { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent-vlak); border-right: 2px solid var(--accent); }
.kaart-par .meter .goed { position: absolute; left: 0; top: 0; bottom: 0; background: var(--goed); }
.kaart-par .knop { align-self: flex-start; margin-top: 0.4rem; }

footer.site-voet { max-width: 1000px; margin: 0 auto; padding: 1rem; color: var(--tekst-zacht); font-size: 0.9rem; border-top: 1px solid var(--rand); }

/* Docentenpagina (docent.html): begrippen naast elkaar, samenvatting, antwoorden */
body[data-pagina="docent"] .niveau-schakelaar { display: none; }
.docent .intro { font-size: 1.05em; }
.docent .deel h3 { margin-top: 1.6em; }
.docent-begrippen th, .docent-cijfers th { width: 33%; }
.docent-begrippen td { width: 33%; font-size: 0.93em; }
.docent-begrip { margin: 0 0 0.5em; }
.docent-leeg { color: var(--tekst-zacht); }
.docent-kaarten { margin: 0; padding-left: 1.1em; font-size: 0.93em; }
.docent-vragen td:first-child { min-width: 14em; }
.docent-antwoord { margin-top: 0.5em; padding: 0.6em 0.8em; background: var(--achtergrond); border-radius: var(--radius); font-size: 0.95em; }
.docent-antwoord li.goed { font-weight: 600; }
.inklap { margin: 0.4em 0; }
.inklap-paneel { margin-top: 0.4em; }
.docent-knoppen-rij { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin: 0.6rem 0 1rem; }
.docent-knoppen { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.samenvatting { background: var(--vlak); border: 1px solid var(--rand); border-radius: var(--radius); padding: 1rem 1.2rem; }
.samenvatting-deel { break-inside: auto; }
.samenvatting h5 { margin: 0.9em 0 0.3em; font-size: 0.95em; text-transform: uppercase; letter-spacing: 0.04em; color: var(--tekst-zacht); }
.samenvatting-begrippen { display: grid; grid-template-columns: 1fr 1fr; gap: 0.3em 1.2em; margin: 0; }
.samenvatting-begrippen dt { font-weight: 700; }
.samenvatting-begrippen dd { margin: 0 0 0.4em; font-size: 0.93em; }
@media (max-width: 600px) { .samenvatting-begrippen { grid-template-columns: 1fr; } }
.samenvatting-kaarten, .samenvatting-check { margin: 0; padding-left: 1.1em; font-size: 0.93em; }
.samenvatting-check { list-style: none; padding-left: 0; }

@media print {
  .site-kop, .subnav, .knop, .flash-knoppen, .vraag-knoppen { display: none !important; }
  body { background: #fff; }
  .blok, .vraag { box-shadow: none; break-inside: avoid; }
  /* Docentenpagina: met een gekozen samenvatting wordt alleen die geprint. */
  body[data-samenvatting] .docent > *:not(#samenvatting), body[data-samenvatting] .site-voet { display: none !important; }
  body[data-samenvatting] #samenvatting > h2, body[data-samenvatting] #samenvatting > div > p, body[data-samenvatting] .docent-knoppen-rij { display: none !important; }
  .samenvatting { border: none; padding: 0; font-size: 10.5pt; }
  .samenvatting-deel { break-before: auto; }
  .samenvatting-deel h4 { break-after: avoid; margin-top: 1em; }
  .samenvatting-begrippen dt, .samenvatting-begrippen dd { break-inside: avoid; }
}

/* --------------------------------------------------------------------------
   Oefentoets (oefentoets.html): instructiekop, delen, vaste inleverbalk, resultaat
   -------------------------------------------------------------------------- */
body[data-pagina="oefentoets"] .intro { max-width: 70ch; }
.toets-instructie {
  background: var(--vlak); border: 1px solid var(--rand); border-radius: var(--radius);
  padding: 0.6rem 1.3rem 0.9rem; margin: 1rem 0; box-shadow: var(--schaduw);
}
.toets-instructie > h2, .toets-instructie > h3 { margin-top: 0.6em; }
.toets-instructie dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.3em 1.2em; margin: 0.6em 0; }
.toets-instructie dt { font-weight: 700; }
.toets-instructie dd { margin: 0; }
@media (max-width: 600px) { .toets-instructie dl { grid-template-columns: 1fr; } .toets-instructie dd { margin-bottom: 0.5em; } }
.toets-instructie.compact { font-size: 0.95em; }
.toets-keuze label { display: inline-flex; align-items: center; gap: 0.5em; cursor: pointer; }
.toets-keuze input { width: 1.2em; height: 1.2em; }
.toets-deel { margin-top: 2.5rem; }
.toets-deel > h2 { border-left: 6px solid var(--accent); padding-left: 0.6rem; }
.toets-vraag .vraag-status { font-weight: 700; }

.toets-balk {
  position: sticky; bottom: 0; z-index: 6;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.2rem;
  background: var(--vlak); border-top: 3px solid var(--accent); box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
  padding: 0.6rem 1rem; margin: 1.5rem -1rem 0;
}
.toets-balk .teller { font-weight: 700; }
.toets-balk .tijd { font-variant-numeric: tabular-nums; color: var(--tekst-zacht); }
.toets-balk .tijd:not(:empty)::before { content: "Tijd: "; }
.toets-balk .melding { flex-basis: 100%; color: var(--let-op); font-weight: 600; }
.toets-balk .melding:empty { display: none; }
.toets-balk .knop { margin-left: auto; }

.resultaat {
  background: var(--accent-vlak); border: 2px solid var(--accent); border-radius: var(--radius);
  padding: 0.8rem 1.3rem 1rem; margin: 1rem 0 2rem;
}
.resultaat > h2 { margin-top: 0.4em; }
.resultaat .score { font-size: 1.25rem; }
.resultaat .score-c { font-weight: 600; }
.resultaat .waarschuwing { background: var(--vlak); }
.resultaat-tabel, .eerdere-tabel { background: var(--vlak); }
.resultaat-tabel th, .eerdere-tabel th { background: var(--vlak); }
.eerdere { margin-top: 2.5rem; }

/* Toegankelijkheid: dubbele focusring (donkere binnenring + oranje buitenring), zichtbaar op
   elke achtergrond; de oranje ring alleen haalde op de lichte achtergrond geen 3 : 1. */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  box-shadow: 0 0 0 2px var(--tekst);
}

@media print {
  .toets-balk, .toets-keuze { display: none !important; }
  .resultaat { border-color: #000; }
}

/* --------------------------------------------------------------------------
   Interactieve figuren (js/figuren.js): wrapper, bediening, rijke stijl, beweging
   -------------------------------------------------------------------------- */
.fig-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.figuur-animatie[data-actief] > .fig-fallback { display: none; }
figure.fig-app { margin: 1em 0; }
.fig-rij { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: flex-start; justify-content: center; }
.fig-rij > svg { width: auto; flex: 1 1 240px; max-width: 100%; height: auto; }
.fig-rij > .fig-kolom { flex: 1 1 250px; max-width: 100%; display: flex; flex-direction: column; gap: 0.4rem; align-items: center; }
.fig-kolom > svg { width: 100%; max-width: 420px; height: auto; }
.fig-bediening { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; justify-content: center; margin-top: 0.6rem; }
.fig-bediening .fig-schuif { display: inline-flex; align-items: center; gap: 0.4em; flex: 1 1 14rem; max-width: 26rem; }
.fig-bediening .fig-schuif label { white-space: nowrap; font-size: 0.95em; }
.fig-bediening input[type="range"] { flex: 1 1 8rem; min-width: 6rem; accent-color: var(--accent); }
.fig-bediening .hint { flex-basis: 100%; margin: 0; }
.fig-schuiven .fig-schuif { flex-basis: 100%; }
.fig-status { font-size: 0.95em; margin: 0.5em auto 0; max-width: 62ch; text-align: center; }
.fig-formule { margin: 0.2em 0 0; font-size: 0.95em; text-align: center; max-width: 40ch; }
.fig-marker { fill: var(--let-op); stroke: #fff; stroke-width: 2.5; }
.fig-marker-b { fill: var(--fout); }
.fig-rij-destillatie > svg:first-child { flex: 3 1 300px; }
.fig-rij-destillatie > svg:last-child { flex: 1 1 200px; max-width: 340px; }
.fig-uitlezing { font-weight: 700; }
.fig-thermo-vul { fill: var(--fout); }
.fig-damp { fill: var(--accent); opacity: 0.4; }
.fig-druppel { fill: var(--accent); opacity: 0.9; }
.fig-bel { fill: #fff; stroke: var(--accent); stroke-width: 1; }
.fig-oplossing { fill: var(--fout); opacity: 0.6; }
.fig-glas { fill: #ffffff; stroke: var(--rand); stroke-width: 2; }
.fig-glans { fill: #ffffff; opacity: 0.5; }
.fig-vak-vul { fill: var(--achtergrond); }
.fig-blok { fill: var(--let-op); stroke: var(--tekst); stroke-width: 1.5; }
.fig-blok.fig-mat-hout { fill: url(#fig-def-hout); stroke: #8a6a3a; }
.fig-blok.fig-mat-water { fill: url(#fig-def-water); stroke: var(--accent); opacity: 0.85; }
.fig-blok.fig-mat-aluminium { fill: url(#fig-def-aluminium); stroke: #7a7f85; }
.fig-blok.fig-mat-ijzer { fill: url(#fig-def-ijzer); stroke: #26292c; }
.fig-blok.fig-mat-lood { fill: url(#fig-def-lood); stroke: #2f3a44; }
.fig-klik { cursor: pointer; }
.fig-afdek { fill: var(--let-op-vlak); stroke: var(--let-op); stroke-width: 2.5; }
/* figuren batch 3 (§2): fasedriehoek, smelten op microniveau, gasdruk, kookpunt en druk */
.fig-uitleg { margin: 0 auto 0.3em; font-size: 0.95em; color: var(--tekst-zacht); text-align: center; }
.fig-venster { fill: none; stroke: var(--rand); stroke-width: 2; }
.fig-venster-actief { stroke: var(--let-op); stroke-width: 4; }
.fig-pijl-actief { stroke: var(--let-op); stroke-width: 3.5; }
.fig-pijlkop-actief { fill: var(--let-op); }
.fig-tekst-actief { font-weight: 700; fill: var(--tekst); }
.fig-raak { stroke: transparent; stroke-width: 22; stroke-linecap: round; fill: none; }
.fig-pijlknop { cursor: pointer; outline: none; }
.fig-pijlknop:hover .fig-raak, .fig-pijlknop:focus .fig-raak { stroke: var(--let-op-vlak); }
.fig-pijlknop:focus-visible .fig-raak { stroke: var(--let-op-vlak); outline: none; }
.fig-pijlknop:focus-visible .fig-tekst { text-decoration: underline; }
.fig-aantrek { stroke: var(--let-op); stroke-width: 2.5; stroke-linecap: round; opacity: 0.85; }
.fig-zuiger { fill: #9aa0a6; stroke: #5f656b; stroke-width: 1.5; }
.fig-wand { fill: none; stroke: #7d838a; stroke-width: 7; stroke-linejoin: round; }
.fig-naald { stroke: var(--fout); stroke-width: 3; stroke-linecap: round; }
.fig-naald-as { fill: var(--tekst); }
.fig-model { font-size: 0.9em; color: var(--tekst-zacht); max-width: 62ch; margin: 0.4em auto 0; text-align: center; }
figure.fig-app svg.fig-groot { width: 560px; }
figure.fig-app svg.fig-middel { width: 400px; }
.fig-lucht { fill: #c7c9cc; stroke: #8a8d91; stroke-width: 1; }
.fig-hemel { fill: #e6f1fb; }
.fig-berg { fill: #8e9aa6; stroke: #5d6873; stroke-width: 1.5; }
.fig-sneeuw { fill: #ffffff; stroke: #cfd6dd; stroke-width: 1; }
.fig-zee { fill: #7fb3df; }
.fig-strand { fill: #ead9a8; }
.fig-keuken { fill: #f3efe6; }
.fig-pan { fill: #b9bec4; stroke: #6d737a; stroke-width: 2; }
.fig-grafiek-punt { fill: var(--let-op); stroke: #fff; stroke-width: 2; }
.fig-label-tag { fill: var(--vlak); stroke: var(--rand); stroke-width: 1.5; }
.fig-pil { fill: var(--vlak); stroke: var(--accent); stroke-width: 2; }
/* figuren batch 4 (§1, §3, §4) */
.fig-vouw { stroke: #cfc8b6; stroke-width: 1.2; fill: none; }
.fig-troebel { fill: #c9b27f; opacity: 0.75; }
.fig-straal-troebel { stroke: #c9b27f; stroke-width: 5; fill: none; stroke-linecap: round; opacity: 0.85; }
.fig-loeprand { fill: none; stroke: #7d838a; stroke-width: 5; }
.fig-loepsteel { stroke: #7d838a; stroke-width: 10; stroke-linecap: round; }
.fig-vezel-loep { fill: #efe9dc; stroke: #cfc8b6; stroke-width: 1.5; }
.fig-lamp { fill: #5f656b; stroke: #3c4146; stroke-width: 1.5; }
.fig-lampglas { fill: #e8e8e8; }
.fig-lampglas.fig-lamp-aan { fill: #ffe066; }
.fig-glas-rand { fill: none; stroke: var(--rand); stroke-width: 2.5; }
.fig-scherm { fill: #f4f1ea; stroke: var(--rand); stroke-width: 1.5; }
.fig-lichtvlek { fill: #ffe066; }
.fig-lichtstreep { stroke: #e0a800; stroke-width: 2.5; stroke-linecap: round; }
.fig-oog { fill: #ffffff; stroke: var(--tekst); stroke-width: 2; }
.fig-oog-iris { fill: var(--tekst); }
.fig-staafrand { fill: none; stroke: var(--tekst-zacht); stroke-width: 1.5; }
.fig-hand { fill: #f1c7a3; stroke: #b98a63; stroke-width: 1.5; }
.fig-au { fill: var(--fout); font-weight: 700; }
.fig-strook { fill: var(--vlak); stroke: var(--rand); stroke-width: 1.5; }
.fig-strook-actief { fill: var(--accent-vlak); stroke: var(--accent); stroke-width: 2.5; }
.fig-onderdeel { cursor: pointer; outline: none; }
.fig-onderdeel:hover .fig-raak, .fig-onderdeel:focus .fig-raak { stroke: var(--let-op-vlak); }
.fig-band { fill: none; stroke: #2f2f2f; stroke-width: 10; }
.fig-velg { fill: none; stroke: #b9bec4; stroke-width: 3; }
.fig-spaak { stroke: #b9bec4; stroke-width: 1.2; }
.fig-tandwiel { fill: #d7dade; stroke: #6d737a; stroke-width: 2; }
.fig-ketting { stroke: #4b4f54; stroke-width: 4; stroke-dasharray: 4 2; fill: none; }
.fig-frame { stroke: #9aa3ad; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.fig-zadel { fill: #3a3a3a; }
.fig-trapper { stroke: #3a3a3a; stroke-width: 4; stroke-linecap: round; fill: none; }
.fig-kaart { fill: var(--vlak); stroke: var(--accent); stroke-width: 2; }
.fig-kaartnaam { font-size: 20px; }
.fig-deeltje-a { fill: #b9bec4; stroke: #7d838a; stroke-width: 1; }
.fig-deeltje-ijzer { fill: #6d737a; stroke: #3c4146; stroke-width: 1; }
.fig-deeltje-koolstof { fill: #111111; }
.fig-deeltje-rubber { fill: #4a3b2f; stroke: #2a2019; stroke-width: 1; }
.fig-deeltje-roet { fill: #1f1f1f; }
.fig-deeltje-anders { fill: #9c7a3c; stroke: #6b5226; stroke-width: 1; }
.fig-druppel-rand { fill: #fbf1c9; stroke: #c9a227; stroke-width: 1.5; stroke-dasharray: 3 3; opacity: 0.9; }

/* Rijke stijl: gradients en schaduw uit de gedeelde <defs> (alleen als figuren.js geladen is) */
.fig-stop-licht { stop-color: var(--accent-vlak); }
.fig-stop-midden { stop-color: var(--accent); }
.fig-stop-donker { stop-color: var(--accent-donker); }
.fig-stop-b-licht { stop-color: var(--let-op-vlak); }
.fig-stop-b { stop-color: var(--let-op); }
html.fig-rijk .fig-bol { fill: url(#fig-def-bol); }
html.fig-rijk .fig-bol-b { fill: url(#fig-def-bol-b); }
html.fig-rijk .fig-water { fill: url(#fig-def-water); }
html.fig-rijk .fig-glas { fill: url(#fig-def-glas); }
html.fig-rijk .fig-vlam { fill: url(#fig-def-vlam); }
html.fig-rijk .fig-vak { fill: var(--vlak); }
html.fig-rijk .fig-schaduw { filter: url(#fig-def-schaduw); }

/* Beweging: vlam flakkert, koelwater stroomt; uit bij prefers-reduced-motion */
@keyframes fig-anim-flakker { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(0.94, 1.1); } }
.fig-anim-flakker { transform-box: fill-box; transform-origin: 50% 100%; animation: fig-anim-flakker 0.8s ease-in-out infinite; }
@keyframes fig-anim-stroom { to { stroke-dashoffset: -20; } }
.fig-anim-stroom { stroke-dasharray: 6 4; animation: fig-anim-stroom 0.9s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  .fig-anim-flakker, .fig-anim-stroom { animation: none; }
}
@media print {
  .fig-bediening, .fig-status { display: none !important; }
  html.fig-rijk .fig-schaduw { filter: none; }
}

/* --------------------------------------------------------------------------
   Delen (subparagrafen, latere fase): overzichtskaarten, deelstrook, deelnavigatie
   -------------------------------------------------------------------------- */
.subnav a[aria-current="page"] { background: var(--accent); color: #fff; border-color: var(--accent); }
.deel-strook { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0 0 1rem; }
.deel-strook a {
  text-decoration: none; padding: 0.25rem 0.75rem; border-radius: 999px; font-size: 0.92rem;
  border: 1px solid var(--rand); background: var(--vlak); color: var(--tekst);
}
.deel-strook a:hover { border-color: var(--accent); }
.deel-strook a[aria-current="true"] { background: var(--accent-vlak); border-color: var(--accent); color: var(--accent-donker); font-weight: 700; }
.hub-kop { margin: 1.4rem 0 0.6rem; }
.hub-kaarten { margin-bottom: 0.5rem; }
.kaart-par.hoger { border-style: dashed; }
.kaart-par .hoger-label {
  align-self: flex-start; font-size: 0.8rem; font-weight: 700; color: var(--tekst-zacht);
  border: 1px solid var(--rand); border-radius: 999px; padding: 0.05em 0.6em;
}
.kaart-par .kort { margin: 0; color: var(--tekst-zacht); }
.kaart-par .status-rij { display: flex; flex-wrap: wrap; gap: 0.3rem 0.5rem; }
.status-pil {
  display: inline-block; border-radius: 999px; padding: 0.05em 0.65em; font-size: 0.85rem;
  border: 1px solid var(--rand); background: var(--vlak); color: var(--tekst-zacht);
}
.status-pil.goed { border-color: var(--goed); color: var(--goed); background: var(--goed-vlak); }
.status-pil.bezig { border-color: var(--accent); color: var(--accent-donker); background: var(--accent-vlak); }
.kaart-par .proeven { font-size: 0.92rem; color: var(--tekst-zacht); }
.kaart-par .kaart-knoppen { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.4rem; }
.kaart-par .kaart-knoppen .knop { margin-top: 0; align-self: auto; }
.deel-acties { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin-top: 1.4rem; }
.gelezen-knop[aria-pressed="true"] { background: var(--goed); color: #fff; border-color: var(--goed); }
.deel-nav {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.6rem 1rem;
  margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--rand);
}
.deel-nav > div { flex: 1 1 12rem; }
.deel-nav .midden { text-align: center; color: var(--tekst-zacht); font-size: 0.92rem; }
.deel-nav .rechts { text-align: right; }
.blok, .vraag { scroll-margin-top: 4rem; }
@media print {
  .deel-strook, .deel-nav, .deel-acties { display: none; }
}

/* --------------------------------------------------------------------------
   Werkblad inleveren (latere fase, sessie 3)
   -------------------------------------------------------------------------- */
.wb-opgaven { display: flex; flex-direction: column; gap: 0.8rem; }
.wb-opgave {
  background: var(--vlak); border: 1px solid var(--rand); border-radius: var(--radius);
  padding: 0.7rem 1.2rem 0.9rem; box-shadow: var(--schaduw);
}
.wb-kop { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1rem; }
.wb-label { font-weight: 700; }
.wb-status { margin-left: auto; min-width: 5.5em; text-align: center; }
.wb-status:empty { display: none; }
.status-pil.fout { border-color: var(--fout); color: var(--fout); background: var(--fout-vlak); }
.wb-veld { display: inline-flex; align-items: center; gap: 0.3rem; }
.wb-veld input { width: 9em; }
.wb-velden { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-top: 0.4rem; }
.wb-veld-label { display: inline-flex; align-items: center; gap: 0.3rem; }
.wb-radios { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; margin-top: 0.4rem; }
.wb-radios label { display: inline-flex; align-items: center; gap: 0.3rem; }
.wb-tabel { border-collapse: collapse; margin-top: 0.4rem; }
.wb-tabel th, .wb-tabel td { border: 1px solid var(--rand); padding: 0.3rem 0.6rem; text-align: left; vertical-align: middle; }
.wb-tabel th[scope="row"] { font-weight: 400; }
.wb-tabel thead th { background: var(--accent-vlak); }
.wb-tabel select { max-width: 16em; }
.wb-melding { font-weight: 700; margin: 0.4rem 0 0; }
.wb-succes .vraag-knoppen { margin-top: 0.6rem; }
.wb-code { margin-top: 1.6rem; }
.wb-code h3 { margin-top: 0; }
.wb-code input { text-transform: uppercase; letter-spacing: 0.1em; width: 9em; }
@media print { .wb-code { display: none; } }

/* --------------------------------------------------------------------------
   Dashboard op de startpagina (latere fase, sessie 4)
   -------------------------------------------------------------------------- */
.stappen { display: grid; gap: 0.8rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); margin: 0.6rem 0 1.6rem; }
.stap { background: var(--vlak); border: 1px solid var(--rand); border-radius: var(--radius); padding: 0.9rem 1.1rem; box-shadow: var(--schaduw); }
.stap .nr {
  display: inline-block; width: 1.7em; height: 1.7em; line-height: 1.7em; text-align: center; border-radius: 50%;
  background: var(--accent); color: #fff; font-weight: 800; margin-right: 0.5em;
}
.stap strong { display: block; margin-bottom: 0.35em; }
.stap p { margin: 0; color: var(--tekst-zacht); }
details.zo-werkt-het { margin: 0.5rem 0 1.5rem; }
details.zo-werkt-het summary { cursor: pointer; font-weight: 700; }
details.zo-werkt-het .stappen { margin-top: 0.8rem; }
.dash-regels { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.95rem; color: var(--tekst-zacht); }
.dash-regels .open { color: var(--goed); font-weight: 700; }
.dash-regels .dicht { color: var(--tekst-zacht); }
.dash-code { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin-top: 0.5rem; }
.dash-code input { width: 8em; text-transform: uppercase; letter-spacing: 0.1em; }
.dash-wis { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--rand); }
.dash-wis h2 { font-size: 1.1rem; }