/* ==========================================================================
   scheikunde5m — site.css (gedeeld door alle periodes; afgeleid van Scheikunde PA)
   Schoon en rustig, licht speels accent. Kleuraccent per niveau.
   Leesmodus: grotere letter, ruimere regelafstand, rustiger lettertype.
   ========================================================================== */

:root {
  --tekst: #1a1a1a;
  --tekst-zacht: #4a4a4a;
  --achtergrond: #f6f7f9;
  --vlak: #ffffff;
  --rand: #dcdfe4;
  --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: 14px;
  --schaduw: 0 1px 2px rgba(16, 24, 40, 0.06), 0 4px 14px rgba(16, 24, 40, 0.06);
  --breedte: 1060px;                 /* breedte van de inhoud */
  --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; }
/* Een stukje tekst dat alleen op vwo hoort (bijv. een vwo-begrip in een havo/vwo-blok). */
.alleen-vwo { display: none; }
html[data-niveau="vwo"] .alleen-vwo { display: inline; }

/* 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 (sessie 2): één regel. Links "← Klas 3" en de naam (= link naar de startpagina),
   in het midden het menu met het uitklapmenu "Paragrafen", rechts het niveau en "Aa Weergave".
   Vaste maten in px: de kopbalk groeit niet mee met de leesmodus, anders past hij niet op één regel.
   -------------------------------------------------------------------------- */
.site-kop {
  background: var(--vlak); border-bottom: 3px solid var(--accent); position: relative; z-index: 30;
  font-family: var(--lettertype); font-size: 15.5px; line-height: 1.4; letter-spacing: normal;
}
.kop-binnen {
  max-width: 1280px; margin: 0 auto; min-height: 62px; padding: 6px 20px;
  display: flex; align-items: center; gap: 8px 14px;
}
.kop-links { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.kop-terug {
  font-size: 14px; color: var(--tekst-zacht); text-decoration: none; white-space: nowrap;
  border: 1px solid var(--rand); border-radius: 999px; padding: 3px 11px; background: var(--vlak);
}
.kop-terug:hover { border-color: var(--accent); color: var(--accent-donker); }
.site-naam {
  text-decoration: none; color: var(--tekst); font-weight: 700; font-size: 17.5px; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 9px;
}
.site-naam .logo {
  display: inline-block; width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto;
  background: var(--accent); position: relative;
}
.site-naam .logo::after {
  content: ""; position: absolute; width: 9px; height: 9px; border-radius: 50%;
  background: #fff; left: 7px; top: 7px;
}
.site-naam .logo::before {
  content: ""; position: absolute; width: 7px; height: 7px; border-radius: 50%;
  background: #fff; right: 7px; bottom: 7px;
}
.site-naam span.onder { font-weight: 400; color: var(--tekst-zacht); }

.hoofdmenu { flex: 1 1 auto; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 2px; }
.hoofdmenu > a, .menu-knop {
  font: inherit; background: none; border: 0; padding: 8px 13px; border-radius: 10px; color: var(--tekst);
  text-decoration: none; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; cursor: pointer;
}
.hoofdmenu > a:hover, .menu-knop:hover { background: var(--accent-vlak); }
.hoofdmenu > a[aria-current="page"], .menu-knop.actief { color: var(--accent-donker); background: var(--accent-vlak); font-weight: 600; }
.menu-knop[aria-expanded="true"] { background: var(--accent-vlak); color: var(--accent-donker); }
.menu-knop .pijltje { display: inline-block; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.menu-knop[aria-expanded="true"] .pijltje { transform: translateY(2px) rotate(-135deg); }
.menu-item { position: relative; }

/* uitklapmenu en paneel: dezelfde bouwsteen */
.uitklap, .weergave-paneel {
  position: absolute; top: calc(100% + 10px); z-index: 40; background: var(--vlak);
  border: 1px solid var(--rand); border-radius: 16px; box-shadow: 0 14px 36px rgba(16, 24, 40, 0.18);
}
.uitklap[hidden], .weergave-paneel[hidden] { display: none; }
.uitklap { left: 50%; transform: translateX(-50%); width: 400px; padding: 8px; margin: 0; list-style: none; }
.uitklap a {
  display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 12px;
  padding: 9px 10px; border-radius: 10px; text-decoration: none; color: var(--tekst);
}
.uitklap a:hover, .uitklap a:focus { background: var(--accent-vlak); }
.uitklap .nr {
  width: 40px; height: 40px; border-radius: 10px; background: var(--accent-vlak); color: var(--accent-donker);
  font-weight: 700; display: grid; place-items: center;
}
.uitklap a[aria-current="page"] .nr { background: var(--accent); color: #fff; }
.uitklap a[aria-current="page"] { background: var(--accent-vlak); }
.uitklap .mini { font-size: 12.5px; color: var(--tekst-zacht); text-align: right; white-space: nowrap; }
.uitklap .mini .balkje { width: 64px; margin: 3px 0 0 auto; height: 6px; }
.uitklap .scheiding { border-top: 1px solid var(--rand); margin: 6px 4px; }
.uitklap a.uitklap-start { color: var(--accent-donker); }
.uitklap a.uitklap-start .nr { background: none; font-size: 20px; }
.uitklap-hulp { font-size: 12.5px; color: var(--tekst-zacht); padding: 6px 10px 2px; }

/* niveauschakelaar (compact) */
.niveau-schakelaar { display: inline-flex; background: #eef0f3; border-radius: 999px; padding: 3px; }
.niveau-schakelaar button {
  border: 0; background: transparent; padding: 4px 11px; font: inherit; font-size: 14px; cursor: pointer;
  color: var(--tekst-zacht); border-radius: 999px;
}
.niveau-schakelaar button:hover { color: var(--tekst); }
.niveau-schakelaar button[aria-pressed="true"] { background: var(--accent); color: #fff; font-weight: 700; }

.kop-rechts { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.weergave-knop {
  font: inherit; font-size: 14px; border: 1px solid var(--rand); border-radius: 999px; padding: 5px 12px;
  background: var(--vlak); color: var(--tekst); display: inline-flex; gap: 6px; align-items: center; cursor: pointer; white-space: nowrap;
}
.weergave-knop:hover, .weergave-knop[aria-expanded="true"] { border-color: var(--accent); background: var(--accent-vlak); }
.weergave-knop .aa { font-family: Georgia, "Times New Roman", serif; font-weight: 700; font-size: 15px; }
.weergave-paneel { right: 0; width: 370px; padding: 14px 18px 12px; font-size: 15px; }
.weergave-paneel h2 { font-size: 16px; margin: 0 0 6px; }
.weergave-paneel fieldset { border: 0; margin: 0; padding: 0; }
.weergave-paneel legend { font-size: 16px; font-weight: 700; padding: 0; margin: 10px 0 4px; }
.schakel-rij { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; padding: 6px 0 10px; border: 0; border-bottom: 1px solid var(--rand); background: none; font: inherit; color: var(--tekst); text-align: left; cursor: pointer; }
.schakel-rij small { display: block; color: var(--tekst-zacht); font-size: 13px; }
.schakel { flex: 0 0 auto; width: 42px; height: 24px; border-radius: 12px; background: #b9c0c9; position: relative; }
.schakel::after { content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%; background: #fff; top: 3px; left: 3px; transition: left 0.15s; }
.schakel-rij[aria-pressed="true"] .schakel { background: var(--accent); }
.schakel-rij[aria-pressed="true"] .schakel::after { left: 21px; }
.kleurset { display: grid; grid-template-columns: 20px 64px 1fr; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; border: 2px solid transparent; margin-bottom: 3px; cursor: pointer; }
.kleurset:has(input:checked) { border-color: var(--accent); background: var(--accent-vlak); }
.kleurset input { margin: 0; width: 17px; height: 17px; accent-color: var(--accent); }
.kleurset .stipjes { display: flex; gap: 4px; }
.kleurset .stipjes i { width: 16px; height: 16px; border-radius: 50%; display: block; border: 1px solid rgba(0, 0, 0, 0.25); }
.kleurset small { display: block; color: var(--tekst-zacht); font-size: 12.5px; line-height: 1.3; }
.vinkje-rij { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0 4px; cursor: pointer; }
.vinkje-rij input { width: 17px; height: 17px; margin: 2px 0 0; accent-color: var(--accent); }
.paneel-noot { font-size: 12.5px; color: var(--tekst-zacht); margin: 8px 0 0; line-height: 1.4; }

/* knop-schakel: aan/uit-knoppen in de inhoud (niveau hoger, gelezen, docentpagina) */
.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:hover { border-color: var(--accent); }
.knop-schakel[aria-pressed="true"] { background: var(--tekst); color: #fff; border-color: var(--tekst); }

/* --------------------------------------------------------------------------
   Pagina-indeling
   -------------------------------------------------------------------------- */
main { max-width: var(--breedte); margin: 0 auto; padding: 0.5rem 1.5rem 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); }
.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: var(--breedte); 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; }

/* --------------------------------------------------------------------------
   Periodiek systeem (periode-b/js/periodiek.js): rooster, kleuren, popup, Bohr-model
   Kaartkleuren: grijs = metaal, geel = niet-metaal, groen = metalloïde.
   -------------------------------------------------------------------------- */
:root {
  --ps-metaal: #d9dde3; --ps-metaal-rand: #8d96a3;
  --ps-nietmetaal: #ffe88a; --ps-nietmetaal-rand: #c9a300;
  --ps-metalloide: #b9e6b1; --ps-metalloide-rand: #3f9a3a;
  /* kaartkleuren van het papieren kaartje (blijven altijd zo) en de deeltjeskleuren op het scherm (Weergave, sessie 2) */
  --kaart-proton: #d6362b; --kaart-neutron: #f2c200; --kaart-elektron: #1a5fb4;
  --ps-proton: var(--kaart-proton); --ps-neutron: var(--kaart-neutron); --ps-elektron: var(--kaart-elektron);
  --ps-proton-rand: #8c1f17; --ps-neutron-rand: #a07f00; --ps-elektron-rand: #0d3d78;
}
/* Rooster (sessie 3): één vormgeving voor alle periodieke systemen (pagina, lade, figuren, digibord, muur).
   Gelijke vakjes met een dunne lichte rand, de kaartkleuren en rustige letters ("egaal", #18).
   De pagina en de lade zetten de maat van de vakjes met --ps-kol (breedte), --ps-rij (hoogte) en --ps-h (lettermaat). */
.ps-balk { display: flex; flex-wrap: wrap; gap: 0.5rem 0.7rem; align-items: center; }
.ps-zoek { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; }
.ps-zoek input, .ps-klaskeuze select { font: inherit; font-weight: 400; padding: 0.3rem 0.55rem; border: 1px solid var(--rand); border-radius: 8px; background: var(--vlak); }
.ps-zoek input { width: 17rem; max-width: 100%; }
.ps-icoon { width: 15px; height: 15px; vertical-align: -2px; margin-right: 0.35rem; }
.ps-rooster {
  --ps-gap: 3px;
  display: grid; gap: var(--ps-gap); justify-content: center; align-items: stretch;
  grid-template-columns: 20px repeat(18, var(--ps-kol, minmax(0, 1fr)));
  grid-template-rows: minmax(14px, auto) repeat(7, var(--ps-rij, auto)) 8px repeat(2, var(--ps-rij, auto));
}
.ps-rooster.compact { --ps-gap: 2px; grid-template-columns: 1.2rem repeat(18, minmax(1.3rem, 1fr)); grid-template-rows: minmax(12px, auto) repeat(7, auto) 4px; }
.ps-groepnr, .ps-periodenr { font-size: 11px; line-height: 1; color: var(--tekst-zacht); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 2px; }
.ps-groepnr.laag { align-self: end; }
.ps-periodenr { align-items: center; justify-content: flex-end; padding: 0 4px 0 0; }
.ps-periodenr.klein { font-size: 11px; }
.ps-plek { border: 1px dashed rgba(0, 0, 0, 0.22); border-radius: 6px; font-size: min(calc(var(--ps-h, 52px) * 0.2), 12px); color: var(--tekst-zacht); display: flex; align-items: center; justify-content: center; }
.ps-cel {
  position: relative; box-sizing: border-box; min-width: 0; margin: 0; padding: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: var(--ps-min, 3.2rem); overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.13); border-radius: 6px; background: var(--vlak);
  font: inherit; color: var(--tekst); cursor: pointer; line-height: 1.1; text-align: center;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.ps-rooster[style] .ps-cel { --ps-min: 0px; }
.ps-cel:hover { box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.28); }
.ps-cel:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; z-index: 2; }
.ps-cel .ps-z { position: absolute; top: 2px; left: 4px; font-size: min(calc(var(--ps-h, 52px) * 0.2), 13px); line-height: 1; opacity: 0.85; }
.ps-cel .ps-sym { font-weight: 650; font-size: min(calc(var(--ps-h, 52px) * 0.36), 30px); line-height: 1; margin-top: calc(var(--ps-h, 52px) * 0.07); }
.ps-cel .ps-naam, .ps-cel .ps-massa { font-size: min(calc(var(--ps-h, 52px) * 0.18), 12.5px); line-height: 1.15; max-width: 96%; white-space: nowrap; overflow: hidden; opacity: 0.85; }
.compact .ps-cel { min-height: 1.5rem; border-radius: 4px; }
.compact .ps-cel .ps-z { display: none; }
.compact .ps-cel .ps-sym { font-size: 0.62rem; margin: 0; font-weight: 600; }
.ps-cel.markeer { outline: 3px solid var(--focus); outline-offset: 1px; z-index: 1; }
.ps-cel.bezet { background-image: repeating-linear-gradient(135deg, rgba(0,0,0,0.13) 0 4px, transparent 4px 9px); }
.ps-cel.bezet::after { content: "\2713"; position: absolute; top: 1px; right: 4px; font-size: 0.7rem; color: var(--goed); font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .ps-cel, .ps-groot { transition: none; } }

/* kleuren op soort (de kaartkleuren) */
.soort-metaal { background: var(--ps-metaal); }
.soort-niet-metaal { background: var(--ps-nietmetaal); }
.soort-metalloide { background: var(--ps-metalloide); }
/* kleuren op familie: rustige tinten, edelgassen, halogenen en alkalimetalen goed uit elkaar */
.fam-alkalimetaal { background: #f4c7c3; } .fam-aardalkalimetaal { background: #f9dcbc; }
.fam-overgangsmetaal { background: #dfe3e8; } .fam-hoofdgroepmetaal { background: #cbd9ea; }
.fam-lanthanide { background: #e6d6f0; } .fam-actinide { background: #f1d5e6; }
.fam-metalloide { background: var(--ps-metalloide); } .fam-niet-metaal { background: var(--ps-nietmetaal); }
.fam-halogeen { background: #fff3c4; } .fam-edelgas { background: #cdeefb; } .fam-onbekend { background: var(--vlak); }
/* kleuren op fase bij kamertemperatuur */
.fase-vast { background: #dfe3e8; } .fase-vloeibaar { background: #bfe0f3; } .fase-gas { background: #fff0b8; }
.fase-onbekend, .temp-onbekend { background: #f3f3f3; color: #5a5a5a; border-style: dashed; }
/* aantal schillen: blauw, licht naar donker */
.schil-1 { background: #eef5fb; } .schil-2 { background: #d6e6f5; } .schil-3 { background: #b9d3ee; } .schil-4 { background: #98bde3; }
.schil-5 { background: #78a6d6; } .schil-6 { background: #3f78b5; color: #fff; } .schil-7 { background: #24578f; color: #fff; }
/* elektronen in de buitenste schil: groenblauw, licht naar donker; oranje hoekje = zie het modelblok (sessie 7) */
.val-1 { background: #e7f5f1; } .val-2 { background: #c6e8de; } .val-3 { background: #a2d8c9; } .val-4 { background: #7cc5b2; }
.val-5 { background: #55ad99; } .val-6 { background: #2f8b78; color: #fff; } .val-7 { background: #1d6e5f; color: #fff; } .val-8 { background: #11524a; color: #fff; }
.val-18 { background: #f1d5e6; }
.model::after { content: ""; position: absolute; top: 0; right: 0; border-style: solid; border-width: 0 11px 11px 0; border-color: transparent #c56a14 transparent transparent; }
/* smelt- en kookpunt: blauw (koud) via wit naar oranje (heet), 7 stappen; grens in het midden = kamertemperatuur (20 °C) */
.temp-1 { background: #2c5aa0; color: #fff; } .temp-2 { background: #8fb3de; } .temp-3 { background: #e3edf7; }
.temp-4 { background: #fde8c8; } .temp-5 { background: #f7bd84; } .temp-6 { background: #e5843f; } .temp-7 { background: #a8441c; color: #fff; }
/* project: wit, gekozen elementen gestreept (zoals de muur) */
.proj { background: var(--vlak); }

/* kopregel en kleurknoppen (pagina, volledig scherm, lade) */
body[data-pagina="periodiek"] main { max-width: none; padding: 0 16px 1rem; }
.ps-kopregel { display: flex; align-items: center; justify-content: center; gap: 0.5rem 1.2rem; flex-wrap: wrap; margin: 0.5rem auto 0.3rem; }
.ps-kopregel .paragraaf-kop { margin: 0; font-size: 1.45rem; }
.ps-hint { color: var(--tekst-zacht); font-size: 0.9rem; }
.ps-knoppen { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; width: fit-content; max-width: 100%; margin: 0.15rem auto 0.4rem; padding: 3px; background: var(--vlak); border: 1px solid var(--rand); border-radius: 999px; box-sizing: border-box; }
.ps-kk { font: inherit; font-size: 13px; line-height: 1.2; padding: 4px 11px; border-radius: 999px; border: 1px solid transparent; background: transparent; color: var(--tekst); cursor: pointer; white-space: nowrap; }
.ps-kk:hover { background: var(--accent-vlak); }
.ps-kk[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.ps-kk:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.ps-wrap { display: flex; justify-content: center; }

/* het lege vak boven de overgangsmetalen: vergroot vakje en legenda */
.ps-blok { grid-column: 4 / 14; grid-row: 2 / 5; display: flex; align-items: stretch; gap: 12px; padding: 0 4px 16px; min-width: 0; }
.ps-groot { position: relative; flex: 0 0 auto; width: calc(var(--ps-h, 52px) * 2.5); box-sizing: border-box; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4px 6px; text-align: center; transition: background-color 0.3s ease; }
.ps-groot-z { position: absolute; top: 5px; left: 8px; font-size: 13px; }
.ps-groot-sym { font-size: min(calc(var(--ps-h, 52px) * 0.7), 46px); font-weight: 700; line-height: 1; }
.ps-groot-naam { font-size: 13px; }
.ps-groot-waarde { font-size: 12px; font-weight: 600; margin-top: 2px; line-height: 1.25; }
.ps-blok-rechts { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.ps-legenda-wrap { display: flex; flex-direction: column; gap: 4px; }
.ps-legenda { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 3px 12px; font-size: 12.5px; }
.ps-legenda li { display: inline-flex; align-items: center; gap: 5px; }
.ps-vak { position: relative; overflow: hidden; display: inline-block; width: 14px; height: 14px; box-sizing: border-box; border-radius: 3px; border: 1px solid rgba(0, 0, 0, 0.2); vertical-align: -2px; }
.ps-vak.model::after { border-width: 0 8px 8px 0; }
.ps-vak.bezet { background-image: repeating-linear-gradient(135deg, rgba(0,0,0,0.25) 0 2px, transparent 2px 5px); }
.ps-legenda-uitleg, .ps-status, .ps-klaskeuze { font-size: 12px; color: var(--tekst-zacht); text-align: center; margin: 0; }
.ps-status:empty { display: none; }
.ps-klaskeuze { margin-top: 2px; }
.ps-schaal { display: grid; grid-template-columns: repeat(7, minmax(0, 78px)); justify-content: center; font-size: 11px; line-height: 1.2; }
.ps-schaal span { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.ps-schaal .ps-vak { width: 100%; height: 12px; border-radius: 0; border-right-width: 0; vertical-align: 0; }
.ps-schaal span:last-child .ps-vak { border-right-width: 1px; }
.ps-schaal b { font-weight: 400; margin-top: 1px; white-space: nowrap; }
.ps-schaal b + b { margin-top: 0; color: var(--tekst-zacht); }

/* volledig scherm (#16): geen kopbalk, de vakjes worden groter */
html.ps-vs .site-kop, html.ps-vs .site-voet, html.ps-vs .sla-over, html.ps-vs .ps-hint { display: none; }
html.ps-vs, html.ps-vs body { background: var(--vlak); }

/* lade (KC 56): tab aan de rechterrand, lade van rechts over twee derde van de breedte */
.ps-tab { position: fixed; right: 0; top: 45%; z-index: 40; writing-mode: vertical-rl; transform: rotate(180deg); display: flex; align-items: center; gap: 6px; background: var(--accent); color: #fff; border: 0; border-radius: 0 10px 10px 0; padding: 14px 7px; font: inherit; font-size: 14px; font-weight: 600; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); cursor: pointer; }
.ps-tab .ps-icoon { transform: rotate(90deg); margin: 0; }
.ps-tab:hover { background: var(--accent-donker); }
.ps-tab:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
body.ps-lade-open { overflow: hidden; }
.ps-lade-achter { position: fixed; inset: 0; z-index: 45; background: rgba(20, 20, 20, 0.25); }
.ps-lade { position: fixed; top: 0; right: 0; bottom: 0; z-index: 46; box-sizing: border-box; display: flex; flex-direction: column; gap: 6px; padding: 10px 14px 10px 14px; background: var(--vlak); border-radius: 14px 0 0 14px; box-shadow: -8px 0 30px rgba(0, 0, 0, 0.25); font-size: 16px; }
.ps-lade-kop { display: flex; align-items: center; gap: 0.8rem; }
.ps-lade-kop h2 { margin: 0; font-size: 1.15rem; flex: 1 1 auto; }
.ps-lade-kop .ps-zoek input { width: 14rem; }
.ps-lade .ps-sluit { position: static; }
.ps-lade .ps-knoppen { margin: 0 auto; }
.ps-lade-voet { display: flex; justify-content: space-between; gap: 1rem; font-size: 12.5px; color: var(--tekst-zacht); }
@media print { .ps-tab, .ps-lade, .ps-lade-achter, .ps-knoppen { display: none !important; } }

/* popup */
body.ps-open { overflow: hidden; }
.ps-achter { position: fixed; inset: 0; background: rgba(20, 20, 20, 0.45); display: flex; align-items: flex-start; justify-content: center; padding: 2vh 1rem; overflow-y: auto; z-index: 50; }
.ps-popup { position: relative; background: var(--vlak); border-radius: var(--radius); box-shadow: 0 10px 40px rgba(0,0,0,0.3); max-width: 46rem; width: 100%; padding: 1rem 1.2rem 1rem; margin: auto 0; }
.ps-sluit { position: absolute; top: 0.5rem; right: 0.6rem; font-size: 1.6rem; line-height: 1; border: 0; background: transparent; cursor: pointer; padding: 0.2rem 0.5rem; border-radius: 8px; color: var(--tekst); }
.ps-sluit:hover { background: var(--accent-vlak); }
.ps-popup-kop { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 1rem; align-items: center; padding: 0.6rem 0.9rem; border-radius: 10px; border: 1px solid var(--rand); margin-right: 2.2rem; }
.ps-popup-z { grid-column: 1; grid-row: 1; font-size: 0.85rem; color: var(--tekst-zacht); }
.ps-popup-sym { grid-column: 1; grid-row: 2; font-size: 2.4rem; font-weight: 800; line-height: 1; }
.ps-popup-kop h2 { grid-column: 2; grid-row: 1 / span 2; margin: 0; font-size: 1.6rem; align-self: center; text-transform: capitalize; }
.ps-popup-soort { grid-column: 2; grid-row: 2; font-size: 0.9rem; color: var(--tekst-zacht); align-self: end; }
.ps-pillen { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.6rem 0 0; }
.ps-pil { font-size: 0.8rem; }
.ps-popup-kolommen { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 1rem; align-items: start; margin-top: 0.8rem; }
@media (max-width: 640px) { .ps-popup-kolommen { grid-template-columns: 1fr; } .ps-bohr svg { width: 100%; height: auto; } }
.ps-bohr { margin: 0; }
.ps-bohr figcaption { font-size: 0.8rem; color: var(--tekst-zacht); }
.ps-gegevens { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.15rem 0.8rem; margin: 0; font-size: 0.95rem; }
.ps-gegevens dd { overflow-wrap: anywhere; }
.ps-gegevens dt { color: var(--tekst-zacht); }
.ps-gegevens dd { margin: 0; font-weight: 600; }
.ps-gegevens dd.ps-bron { font-weight: 400; font-size: 0.85rem; color: var(--tekst-zacht); }
.ps-popup .ps-model { margin: 0.6rem 0 0; }
.ps-isotopen, .ps-weetjes { margin: 0.2rem 0 0.6rem; padding-left: 1.2rem; }
.ps-popup h3 { margin: 0.8rem 0 0.2rem; font-size: 1.05rem; }
.ps-popup-knoppen { justify-content: space-between; margin-top: 0.8rem; }

/* Bohr-model */
.bohr { display: block; max-width: 100%; height: auto; }
.bohr-kernvlak { fill: #fff3e0; stroke: #c9a300; stroke-width: 1; }
.bohr-proton { fill: var(--ps-proton); stroke: var(--ps-proton-rand); stroke-width: 0.4; }
.bohr-neutron { fill: var(--ps-neutron); stroke: var(--ps-neutron-rand); stroke-width: 0.4; }
.bohr-schil { fill: none; stroke: var(--tekst-zacht); stroke-width: 1; stroke-dasharray: 3 3; }
.bohr-elektron { fill: var(--ps-elektron); stroke: var(--ps-elektron-rand); stroke-width: 0.5; }
.bohr-kernlabel { font-size: 10px; font-weight: 700; fill: var(--tekst); }
.bohr-kernlabel.onder { font-size: 9px; }
.bohr-schilletter { font-size: 9px; fill: var(--tekst-zacht); }
@media print { .ps-balk, .ps-achter { display: none !important; } }

/* Meerdere figuren naast elkaar in één fallback (bijv. drie Bohr-modellen) */
.fig-rij { display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: center; align-items: center; }

/* Bohr-modellen in theorieblokken: niet oprekken tot de volle breedte */
.figuur-animatie .bohr, figure .bohr { width: auto; max-width: 240px; max-height: 240px; margin: 0 auto; }
.fig-rij .bohr { max-width: 140px; max-height: 140px; }

/* Statische mini-figuren in theorieblokken (periode B) */
.fig-ps-cel { stroke: rgba(0, 0, 0, 0.18); stroke-width: 1; }
.fig-ps-cel.soort-metaal { fill: var(--ps-metaal); } .fig-ps-cel.soort-niet-metaal { fill: var(--ps-nietmetaal); } .fig-ps-cel.soort-metalloide { fill: var(--ps-metalloide); }
.fig-ps-cel.fig-markeer { stroke: var(--focus); stroke-width: 3; }
/* ionen volgen de Weergave (sessie 5, M13): plus in de protonkleur, min in de elektronkleur, licht ingekleurd */
.fig-ion-plus { fill: var(--ps-proton); fill-opacity: 0.28; stroke: var(--ps-proton-rand); stroke-width: 1.2; }
.fig-ion-min { fill: var(--ps-elektron); fill-opacity: 0.28; stroke: var(--ps-elektron-rand); stroke-width: 1.2; }
.fig-atoomrest { fill: var(--ps-metaal); stroke: var(--ps-metaal-rand); }
.fig-vrij-elektron { fill: var(--ps-elektron); }
.fig-molecuul { fill: var(--ps-nietmetaal); stroke: var(--ps-nietmetaal-rand); }
.fig-binding { stroke: var(--tekst); stroke-width: 2.5; }
.fig-lamp-aan { fill: #ffd84d; stroke: #b7791f; }
.fig-lamp-uit { fill: #e8e8e8; stroke: #999; }
.fig-draad { stroke: #555; stroke-width: 2; fill: none; }

/* --------------------------------------------------------------------------
   Figuren Periode B (periode-b/js/figuren-pb.js)
   -------------------------------------------------------------------------- */
.fig-rij > .fig-kolom.fig-kolom-breed { flex: 2 1 380px; }
.fig-teller { display: flex; align-items: center; gap: 0.4rem; margin: 0.25rem 0; flex-wrap: wrap; }
.fig-teller-label { min-width: 5.5em; }
.fig-bolletje { display: inline-block; width: 0.9em; height: 0.9em; border-radius: 50%; border: 1px solid rgba(0,0,0,0.3); }
.fig-b-proton { background: var(--ps-proton); }
.fig-b-neutron { background: var(--ps-neutron); }
.fig-b-elektron { background: var(--ps-elektron); }
.fig-ps .ps-rooster.compact { min-width: 0; }
.fig-ps .ps-cel { min-height: 1.5rem; }
.fig-stoftype-uit { margin-top: 0.6rem; }
.fig-stoftype-kaart { padding: 0.7rem 1rem; border-radius: 10px; border: 1px solid var(--rand); text-align: center; max-width: 46ch; margin: 0 auto; }
.fig-atoom { stroke-width: 1.5; }
.fig-atoom-goed { fill: var(--goed-vlak); stroke: var(--goed); }
.fig-atoom-fout { fill: var(--fout-vlak); stroke: var(--fout); }
.fig-atoom-gekozen { stroke: var(--focus); stroke-width: 4; }
.fig-tabel { border-collapse: collapse; margin: 0.6rem auto; }
.fig-tabel th, .fig-tabel td { border: 1px solid var(--rand); padding: 0.3rem 0.6rem; text-align: left; }
figure.fig-app .invoer-rij { justify-content: center; }
figure.fig-app input[type="text"] { font: inherit; padding: 0.3rem 0.5rem; border: 1px solid var(--rand); border-radius: 8px; }
figure.fig-app select { font: inherit; padding: 0.3rem 0.5rem; border: 1px solid var(--rand); border-radius: 8px; background: var(--vlak); }

/* --------------------------------------------------------------------------
   Projectpagina (periode-b/js/project.js): voorbeeldkaart, formulier, checklist, expertcheck
   -------------------------------------------------------------------------- */
/* kaartkleuren in teksten over het papieren kaartje: volgen de Weergave-keuze niet */
.kleur-p { color: var(--kaart-proton); font-weight: 700; }
.kleur-n { color: #a07f00; font-weight: 700; }
.kleur-e { color: var(--kaart-elektron); font-weight: 700; }
.kaart-figuur { margin: 1rem 0; }
.kaart-figuur figcaption { font-size: 0.9rem; color: var(--tekst-zacht); text-align: center; margin-top: 0.4rem; }
.kaart-vlak { width: 210px; min-height: 297px; border: 2px solid var(--ps-metaal-rand); border-radius: 8px; padding: 0.5rem 0.6rem; display: flex; flex-direction: column; align-items: center; box-shadow: var(--schaduw); }
.kaart-vlak.kaart-achter { align-items: flex-start; font-size: 0.85rem; }
.kaart-zelfde-rij { display: flex; justify-content: space-between; width: 100%; }
.kaart-klein { font-size: 0.7rem; color: var(--tekst-zacht); }
.kaart-symbool { font-size: 3rem; font-weight: 800; line-height: 1.1; margin-top: 0.3rem; }
.kaart-naam { font-size: 1.1rem; margin-bottom: 0.3rem; }
.kaart-lijst { padding-left: 1.1rem; margin: 0.3rem 0; }
.inschrijfformulier { background: var(--vlak); border: 1px solid var(--rand); border-radius: var(--radius); padding: 1rem 1.2rem; max-width: 40rem; }
.inschrijfformulier .invoer-rij { display: grid; grid-template-columns: minmax(10rem, 16rem) 1fr; gap: 0.3rem 0.8rem; align-items: center; margin: 0.5rem 0; }
@media (max-width: 600px) { .inschrijfformulier .invoer-rij { grid-template-columns: 1fr; } }
.inschrijfformulier input[type="text"], .inschrijfformulier select { font: inherit; padding: 0.4rem 0.6rem; border: 1px solid var(--rand); border-radius: 8px; background: var(--vlak); width: 100%; max-width: 24rem; }
/* Inschrijven met code (sessie 1b): de knop naast het codeveld, groene melding als de code klopt. */
.inschrijfformulier .invoer-rij.met-knop { grid-template-columns: minmax(10rem, 16rem) minmax(8rem, 14rem) auto; }
@media (max-width: 600px) { .inschrijfformulier .invoer-rij.met-knop { grid-template-columns: 1fr; } }
.inschrijfformulier input[type="password"] { font: inherit; padding: 0.4rem 0.6rem; border: 1px solid var(--rand); border-radius: 8px; background: var(--vlak); width: 100%; max-width: 24rem; }
.in-code { font-family: Consolas, "Courier New", monospace; letter-spacing: 1px; text-transform: uppercase; }
.wb-melding.goed { color: var(--goed); }
.docent-inschrijvingen h4 { margin: 1.2rem 0 0.4rem; }
ul.checklist li { margin: 0.4rem 0; }
/* Kaart van je buur controleren (sessie 1c): ja/nee per vraag, tip bij nee; op papier hokjes. */
ol.buur-vragen li { margin: 0.6rem 0; }
.buur-knoppen { display: inline-flex; gap: 0.3rem; vertical-align: middle; }
.buur-knoppen .knop[aria-pressed="true"] { background: var(--accent, #1a5fb4); color: #fff; border-color: transparent; }
.buur-tip { background: var(--let-op-vlak, #fff7e0); border-left: 4px solid #d69e2e; padding: 0.3rem 0.6rem; margin: 0.4rem 0 0; border-radius: 4px; }
.alleen-print { display: none; }
.expertcheck { display: grid; gap: 1rem; }
.expert-blok .wb-velden { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 0.4rem 1rem; margin: 0.6rem 0; }
.expert-blok .wb-veld-label { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.expert-blok input[type="text"], .expert-blok select { font: inherit; padding: 0.3rem 0.5rem; border: 1px solid var(--rand); border-radius: 8px; }
/* Proefkaart naast de expertcheck (sessie 1c): staand 9 : 8, zoals het echte kaartje van 9 × 8 cm. */
.expert-zij { display: grid; grid-template-columns: minmax(0, 1fr) 13rem; gap: 1rem; align-items: start; }
@media (max-width: 800px) { .expert-zij { grid-template-columns: 1fr; } }
.proefkaart-vak { font-size: 0.85rem; }
.proef-kop { margin: 0 0 0.3rem; }
.proefkaart { width: 12rem; aspect-ratio: 8 / 9; box-sizing: border-box; border: 6px solid var(--ps-metaal-rand); border-radius: 8px; background: var(--vlak); padding: 0.3rem 0.5rem; display: flex; flex-direction: column; align-items: center; overflow: hidden; }
.proefkaart.rand-metaal { border-color: var(--ps-metaal-rand); }
.proefkaart.rand-nietmetaal { border-color: var(--ps-nietmetaal-rand); }
.proefkaart.rand-metalloide { border-color: var(--ps-metalloide-rand); }
.proefkaart.rand-leeg { border-style: dashed; border-color: var(--rand); }
.proef-symbool { font-size: 1.8rem; font-weight: 800; line-height: 1; }
.proef-naam { font-size: 0.8rem; min-height: 1em; }
.proef-tekening { flex: 1; display: flex; align-items: center; justify-content: center; }
.proef-tekening .bohr { width: 8.2rem; height: auto; }
.proef-leeg { color: var(--tekst-zacht); text-align: center; margin: 0; }
.proef-regel { margin: 0.3rem 0 0; color: var(--tekst-zacht); }
.proef-regel:empty { display: none; }
ol.opdrachten li { margin: 0.4rem 0; }
.docent-tabel { border-collapse: collapse; font-size: 0.92rem; }
.docent-tabel th, .docent-tabel td { border: 1px solid var(--rand); padding: 0.35rem 0.6rem; vertical-align: top; }
@media print {
  body[data-print="checklist"] main > *:not(#project), body[data-print="checklist"] #project > *:not(#checklist) { display: none !important; }
  body[data-print="buur"] main > *:not(#project), body[data-print="buur"] #project > *:not(#buurcontrole) { display: none !important; }
  body[data-print="buur"] .buur-knoppen, body[data-print="buur"] .buur-tip, body[data-print="buur"] .buur-uit, body[data-print="buur"] #buurcontrole .vraag-knoppen { display: none !important; }
  body[data-print="buur"] .alleen-print { display: inline; margin-left: 0.6rem; white-space: pre; }
  .inschrijfformulier, #project-nav { display: none !important; }
}

/* --------------------------------------------------------------------------
   Digibord "Zoek het element" (periode-b/js/zoek-het-element.js, sessie 1c): donker scherm, leeg rooster,
   grote letters voor achter in het lokaal (1920 × 1080), ook bruikbaar op 1366 × 768.
   -------------------------------------------------------------------------- */
html.zoek-actief, html.zoek-actief body { overflow: hidden; }
/* Vaste indeling (sessie 3): raadsel altijd boven, knoppen altijd onder; het rooster vult de ruimte ertussen en wordt nooit hoger
   dan die ruimte, zodat het raadsel op elk scherm (ook groot, met volledig scherm of leesmodus) in beeld blijft. */
.zoek-bord { position: fixed; inset: 0; z-index: 1000; box-sizing: border-box; background: #1f2933; color: #fff; display: flex; flex-direction: column; padding: 0.8rem 1.5rem; overflow: hidden; }
.zoek-bord > * { flex: none; }
.zoek-raadsel { font-size: clamp(1.3rem, 2.4vw, 2.6rem); font-weight: 800; text-align: center; margin: 0.2rem 0 0; line-height: 1.25; }
.zoek-teller { text-align: center; color: #cbd2d9; margin: 0.2rem 0 0; font-size: clamp(0.8rem, 1vw, 1.1rem); }
.zoek-melding { text-align: center; min-height: 1.5em; margin: 0.3rem 0; font-size: clamp(1rem, 1.6vw, 1.7rem); font-weight: 700; }
.zoek-melding.goed { color: #86efac; }
.zoek-melding.fout { color: #fecaca; }
.zoek-bord > .zoek-midden { display: flex; gap: 1.2rem; align-items: stretch; flex: 1 1 auto; min-height: 0; }
.zoek-rooster { flex: 1; min-width: 0; min-height: 0; display: flex; }
.zoek-bord .ps-rooster { flex: 1; min-width: 0; min-height: 0; max-height: 46rem; align-self: center; height: 100%; grid-template-columns: 2rem repeat(18, minmax(0, 1fr)); grid-template-rows: minmax(14px, auto) repeat(7, minmax(0, 1fr)) 6px repeat(2, minmax(0, 1fr)); }
.zoek-bord .ps-rooster .ps-cel { background: #3e4c59; border-color: #52606d; color: #fff; min-height: 0; transition: background-color 0.25s; }
.zoek-bord .ps-rooster .ps-cel .ps-sym, .zoek-bord .ps-rooster .ps-cel .ps-z, .zoek-bord .ps-rooster .ps-cel .ps-naam { visibility: hidden; }
.zoek-bord .ps-rooster .ps-cel.open { background: #f5f7fa; }
.zoek-bord .ps-rooster .ps-cel.open .ps-sym, .zoek-bord .ps-rooster .ps-cel.open .ps-z { visibility: visible; color: #111; }
.zoek-bord .ps-rooster .ps-cel.open .ps-sym { font-size: clamp(0.9rem, 1.4vw, 1.6rem); margin-top: 0.2rem; }
.zoek-bord .ps-rooster .ps-cel.fout { background: #b42318; }
.zoek-bord .ps-rooster .ps-cel:hover { filter: brightness(1.25); }
.zoek-bord .ps-rooster .ps-cel:focus { outline: 4px solid #fbbf24; outline-offset: 1px; z-index: 2; }
.zoek-bord .ps-groepnr, .zoek-bord .ps-periodenr { color: #cbd2d9; font-size: clamp(0.75rem, 1vw, 1.1rem); }
.zoek-kaart { align-self: flex-start; max-height: 100%; overflow: auto; box-sizing: border-box; width: clamp(13rem, 18vw, 20rem); background: #f5f7fa; color: #111; border-radius: 10px; padding: 0.8rem; text-align: center; }
.zoek-kaart p { margin: 0.2rem 0; }
.zoek-kaart .bohr { width: 100%; height: auto; max-width: 12rem; }
.zoek-kaart-sym { font-size: clamp(2.2rem, 3.5vw, 3.6rem); font-weight: 800; line-height: 1; }
.zoek-kaart-naam { font-size: clamp(1rem, 1.4vw, 1.5rem); font-weight: 700; }
.zoek-kaart-muur { background: var(--goed-vlak); color: var(--goed); border-radius: 6px; padding: 0.3rem; font-weight: 600; }
.zoek-knoppen { display: flex; gap: 0.8rem; justify-content: center; margin-top: 0.6rem; }
.zoek-knoppen .knop { font-size: clamp(0.95rem, 1.2vw, 1.3rem); }
.zoek-toetsen { text-align: center; color: #9aa5b1; font-size: 0.85rem; margin: 0.4rem 0 0; }
@media (max-width: 900px) { .zoek-midden { flex-direction: column; } .zoek-kaart { width: auto; } }
@media (prefers-reduced-motion: reduce) { .zoek-bord .ps-rooster .ps-cel { transition: none; } }

/* ==========================================================================
   Sessie 2: vormgeving (rustig en licht; kleurband alleen op de startpagina's)
   Bouwstenen: zie docs/vormgeving.md. Gaat voor de oudere regels hierboven.
   ========================================================================== */

/* ---------- knoppen ---------- */
.knop { display: inline-flex; align-items: center; justify-content: center; gap: 0.4em; text-decoration: none; line-height: 1.3; }
.knop.groot { font-size: 1.05rem; padding: 0.75rem 1.5rem; }
.knop.groot small { display: block; font-weight: 400; font-size: 0.8rem; opacity: 0.9; }
.gelezen-knop[aria-pressed="true"] { background: var(--goed); color: #fff; border-color: var(--goed); }
.gelezen-knop[aria-pressed="true"]:hover { background: #156a3e; border-color: #156a3e; }
.knoprij { display: flex; flex-wrap: wrap; gap: 0.7rem; justify-content: center; align-items: center; }
.midden { text-align: center; }

/* ---------- balkje (voortgang) en label-pil ---------- */
.balkje { display: inline-block; vertical-align: middle; height: 7px; border-radius: 4px; background: #e3e6eb; overflow: hidden; }
.balkje b { display: block; height: 100%; background: var(--goed); }
.label-pil { display: inline-block; font-size: 0.85rem; font-weight: 600; color: var(--accent-donker); background: var(--accent-vlak); border-radius: 999px; padding: 0.15em 0.8em; }

/* ---------- icoon (svg in een rondje) ---------- */
.icoon { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--accent-vlak); color: var(--accent-donker); flex: 0 0 auto; }
.icoon svg { width: 36px; height: 36px; }

/* ---------- kaarten: inhoud en knoppen in het midden ---------- */
.kaart-par { align-items: center; text-align: center; border-radius: 16px; padding: 1.2rem 1.1rem; }
.kaart-par .knop { align-self: center; }
.kaart-par .kaart-knoppen { justify-content: center; }
.kaart-par .status-rij { justify-content: center; }
.kaart-par .hoger-label { align-self: center; }
.kaart-par h3 { font-size: 1.12rem; }

/* ---------- paginakop en tabbladen in het midden ---------- */
.paragraaf-kop { justify-content: center; text-align: center; margin-top: 1.2rem; }
.paragraaf-kop .ondertitel { text-align: center; }
#hoger-kijken { text-align: center; margin: 0.4rem 0; }
.subnav { justify-content: center; }
.subnav a { font-size: 0.95rem; }
section.deel > h2 { margin-top: 1.4rem; }

/* ---------- delen bovenaan: één rij, met een vinkje bij gelezen delen ---------- */
.deel-strook { justify-content: center; gap: 0.35rem; margin: 0.4rem 0 1.2rem; }
.deel-strook a { display: inline-flex; gap: 0.35em; align-items: center; padding: 0.35rem 0.85rem; }
.deel-strook .vink { color: var(--goed); font-weight: 800; }
.deel-strook .nr { color: var(--tekst-zacht); }

/* ---------- onderkant van een deel (#8 en #9) ---------- */
.deel-einde { margin-top: 1.6rem; }
.deel-acties { justify-content: center; gap: 0.8rem; margin-top: 0; }
.deel-stappen { list-style: none; padding: 0; margin: 1.6rem auto 0.4rem; max-width: 820px; display: flex; }
.deel-stap { flex: 1 1 0; position: relative; text-align: center; }
.deel-stap::after { content: ""; position: absolute; top: 18px; left: 50%; width: 100%; height: 4px; background: #dfe3e8; border-radius: 2px; }
.deel-stap:last-child::after { display: none; }
.deel-stap.verbonden::after { background: var(--goed); }
.deel-stap a { position: relative; z-index: 1; display: inline-flex; flex-direction: column; align-items: center; gap: 0.35rem; text-decoration: none; color: var(--tekst-zacht); font-size: 0.85rem; line-height: 1.3; padding: 0 0.4rem; border-radius: 10px; }
.deel-stap a:hover .naam { text-decoration: underline; }
.deel-stap .bol { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: var(--vlak); border: 3px solid #c9ced5; color: var(--tekst-zacht); }
.deel-stap.gelezen .bol { background: var(--goed); border-color: var(--goed); color: #fff; }
.deel-stap.hier .bol { border-color: var(--accent); box-shadow: 0 0 0 5px var(--accent-vlak); }
.deel-stap.hier.gelezen .bol { border-color: var(--goed); box-shadow: 0 0 0 5px var(--goed-vlak); }
.deel-stap.hier a { color: var(--tekst); font-weight: 700; }
.deel-nav { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: center; border-top: 0; margin-top: 1rem; padding-top: 0.6rem; }
.deel-nav > div { flex: none; }
.deel-nav .links { justify-self: start; }
.deel-nav .rechts { justify-self: end; text-align: right; }
.deel-nav .midden { font-size: 0.95rem; }
.deel-nav .knop { text-align: left; }
.deel-nav .rechts .knop { text-align: right; }
@media print { .deel-einde { display: none; } }

/* ---------- startpagina: kleurband en dashboard ---------- */
.band { background: linear-gradient(180deg, var(--accent) 0%, var(--accent-donker) 100%); color: #fff; padding: 1.6rem 1.5rem 4.2rem; }
.band-binnen { max-width: var(--breedte); margin: 0 auto; display: grid; grid-template-columns: 1fr 240px; align-items: center; gap: 1.5rem; }
.band h1 { font-size: 2.2rem; margin: 0.35rem 0 0.4rem; color: #fff; }
.band p { margin: 0; color: rgba(255, 255, 255, 0.92); max-width: 60ch; font-size: 1.08rem; }
.band .label-pil { background: rgba(255, 255, 255, 0.2); color: #fff; }
.band-tekening svg { width: 230px; height: 150px; display: block; }
.band .niveau-regel { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.8rem; color: rgba(255, 255, 255, 0.92); }
.band .niveau-schakelaar { background: rgba(255, 255, 255, 0.18); }
.band .niveau-schakelaar button { color: #fff; }
.band .niveau-schakelaar button[aria-pressed="true"] { background: #fff; color: var(--accent-donker); }
/* op de band: witte focusrand (oranje is op groen te zwak) */
.band a:focus-visible, .band button:focus-visible { outline-color: #fff; box-shadow: 0 0 0 2px var(--accent-donker); }
main.over-band { margin-top: -3rem; position: relative; }
.dash-kaarten { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1rem; }
.dash-kaart { border: 0; box-shadow: 0 6px 20px rgba(16, 24, 40, 0.1); border-radius: 20px; gap: 0.3rem; }
.dash-kaart .icoon { width: 64px; height: 64px; background: var(--accent); color: #fff; margin-bottom: 0.3rem; }
.dash-kaart .icoon svg { width: 38px; height: 38px; }
.dash-kaart .nummer { text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.82rem; font-weight: 700; color: var(--accent-donker); }
.dash-kaart h3 { margin-bottom: 0.2rem; }
.status-lijst { display: grid; grid-template-columns: auto 1fr; gap: 0.2rem 0.7rem; text-align: left; font-size: 0.88rem; margin: 0.3rem 0 0.4rem; align-self: stretch; }
.status-lijst dt { color: var(--tekst-zacht); }
.status-lijst dd { margin: 0; display: flex; align-items: center; gap: 0.5rem; }
.status-lijst .balkje { flex: 0 0 56px; }
.status-lijst .status-pil { font-size: 0.8rem; }
.dash-kaart .verder { font-size: 0.88rem; margin-top: 0.3rem; }
.niveau-kaart { margin-bottom: 1.5rem; }
.niveau-kaart h2 { margin: 0 0 0.6rem; font-size: 1.3rem; }
.niveau-kaart .niveau-keuze { width: 100%; margin: 0.4rem 0; }
.tegels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1rem; margin-top: 1.1rem; }
.tegel { position: relative; display: flex; align-items: center; gap: 0.8rem; background: var(--vlak); border-radius: 18px; box-shadow: 0 4px 14px rgba(16, 24, 40, 0.08); padding: 0.8rem 1rem; }
.tegel:hover { box-shadow: 0 6px 18px rgba(16, 24, 40, 0.14); }
.tegel .icoon { width: 44px; height: 44px; }
.tegel .icoon svg { width: 26px; height: 26px; }
.tegel h3 { margin: 0; font-size: 1rem; }
.tegel-link { color: var(--tekst); text-decoration: none; }
.tegel-link::after { content: ""; position: absolute; inset: 0; border-radius: 18px; }
.tegel-link:focus-visible { outline: none; box-shadow: none; }
.tegel:has(.tegel-link:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.tegel p { margin: 0.1rem 0 0; font-size: 0.86rem; color: var(--tekst-zacht); line-height: 1.35; }
.tegel .tegel-extra a { position: relative; z-index: 1; }
main.over-band > h2:not(.alleen-schermlezer) { margin-top: 2rem; }
main.over-band .stappen { margin-top: 0.6rem; }

/* ---------- flashcards (#15) ---------- */
.flashcards > h3 { text-align: center; font-size: 1.3rem; }
.flash-instel { justify-content: center; }
.flash-rij { display: grid; grid-template-columns: 150px minmax(0, 1fr) 150px; gap: 1.4rem; align-items: center; margin: 0.6rem 0; }
.stapel { text-align: center; }
.stapel .kaartjes { position: relative; width: 110px; height: 78px; margin: 0 auto 0.5rem; }
.stapel .kaartjes i { position: absolute; inset: 0; border-radius: 10px; background: var(--vlak); border: 2px solid var(--rand); }
.stapel .kaartjes i:nth-child(1) { transform: rotate(-6deg) translate(-4px, 4px); }
.stapel .kaartjes i:nth-child(2) { transform: rotate(4deg) translate(3px, 2px); }
.stapel-getal { position: absolute; inset: 0; border-radius: 10px; display: grid; place-items: center; font-size: 1.8rem; font-weight: 800; color: #fff; }
.stapel.oefen .stapel-getal { background: var(--let-op); }
.stapel.ken .stapel-getal { background: var(--goed); }
.stapel b { display: block; }
.stapel small { color: var(--tekst-zacht); font-size: 0.82rem; }
.flash-scene { perspective: 1200px; }
.flashkaart { height: 300px; cursor: pointer; border-radius: 22px; outline-offset: 4px; }
.flash-binnen { position: relative; width: 100%; height: 100%; transition: transform 0.45s ease; transform-style: preserve-3d; }
.flashkaart.gedraaid .flash-binnen { transform: rotateY(180deg); }
.flash-kant {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: 22px; border: 2px solid var(--accent); background: var(--vlak); box-shadow: 0 10px 30px rgba(16, 24, 40, 0.12);
  display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 1.5rem 2.2rem; overflow: auto;
}
.flash-achter { transform: rotateY(180deg); background: var(--accent-vlak); }
.flash-kant .soort { font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-donker); font-weight: 700; margin-bottom: 0.6rem; }
.flash-kant .woord { font-size: 2.2rem; font-weight: 700; line-height: 1.2; }
.flash-kant .betekenis { font-size: 1.25rem; line-height: 1.5; max-width: 36ch; }
.flash-klaar { height: 300px; border-radius: 22px; border: 2px dashed var(--goed); background: var(--goed-vlak); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1rem; padding: 1.5rem; text-align: center; }
.flash-klaar[hidden], .flashkaart[hidden] { display: none; }
.flash-klaar-tekst { font-size: 1.2rem; font-weight: 600; margin: 0; }
.flash-stipjes { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin: 0.9rem 0 0.7rem; }
.flash-stipjes i { width: 12px; height: 12px; border-radius: 50%; background: #d5d9df; display: block; }
.flash-stipjes i.ken { background: var(--goed); }
.flash-stipjes i.oefen { background: var(--let-op); }
.flash-stipjes i.hier { box-shadow: 0 0 0 2px var(--vlak), 0 0 0 4px var(--accent); }
.flash-knoppen { gap: 0.6rem; }
.flash-knoppen .flash-oefen { background: var(--let-op); border-color: var(--let-op); }
.flash-knoppen .flash-oefen:hover { background: #95611a; border-color: #95611a; }
.flash-knoppen .flash-ken { background: var(--goed); border-color: var(--goed); }
.flash-knoppen .flash-ken:hover { background: #156a3e; border-color: #156a3e; }
.flash-teller { text-align: center; margin: 0.6rem 0 0; }
.flash-toetsen { text-align: center; font-size: 0.85rem; color: var(--tekst-zacht); margin: 0.2rem 0 0; }
@media (prefers-reduced-motion: reduce) { .flash-binnen { transition: none; } }
@media print { .flash-rij, .flash-stipjes, .flash-toetsen, .flash-teller, .flash-instel { display: none !important; } }

/* ---------- deeltjeskleuren (V17) en tekens ---------- */
.deeltjes-contrast { --ps-proton: #d55e00; --ps-neutron: #a7adb5; --ps-elektron: #0072b2; --ps-proton-rand: #7a3600; --ps-neutron-rand: #5f656d; --ps-elektron-rand: #003f63; }
.deeltjes-bos { --ps-proton: #2e7d32; --ps-neutron: #d9b77e; --ps-elektron: #7a3e9d; --ps-proton-rand: #174a19; --ps-neutron-rand: #8a6a35; --ps-elektron-rand: #4a2063; }
.deeltjes-snoep { --ps-proton: #d63384; --ps-neutron: #8ecae6; --ps-elektron: #3d2a7a; --ps-proton-rand: #8a1c52; --ps-neutron-rand: #3f8bb0; --ps-elektron-rand: #1e1240; }
.stipjes .stip-p { background: var(--ps-proton); }
.stipjes .stip-n { background: var(--ps-neutron); }
.stipjes .stip-e { background: var(--ps-elektron); }
/* printen: altijd de kaartkleuren (N17) */
@media print {
  html.deeltjes-contrast, html.deeltjes-bos, html.deeltjes-snoep {
    --ps-proton: var(--kaart-proton); --ps-neutron: var(--kaart-neutron); --ps-elektron: var(--kaart-elektron);
    --ps-proton-rand: #8c1f17; --ps-neutron-rand: #a07f00; --ps-elektron-rand: #0d3d78;
  }
  .bohr-teken, .kaartkleur-noot { display: none !important; }
  .fig-bolletje::after { content: none !important; }
}
/* tekens + en − (alleen waar bohrNode ze tekent: bolletjes die groot genoeg zijn) */
.bohr-teken { display: none; font-family: var(--lettertype); font-weight: 700; fill: #fff; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
html.met-tekens .bohr-teken { display: inline; }
html.met-tekens .fig-bolletje.fig-b-proton::after { content: "+"; }
html.met-tekens .fig-bolletje.fig-b-elektron::after { content: "−"; }
.fig-bolletje { position: relative; vertical-align: middle; }
.fig-bolletje::after { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 0.7em; font-weight: 800; line-height: 1; }
/* bij een andere set: de zin over het papieren kaartje (checklist, buurcontrole) */
.kaartkleur-noot { display: none; }
html.deeltjes-contrast .kaartkleur-noot, html.deeltjes-bos .kaartkleur-noot, html.deeltjes-snoep .kaartkleur-noot { display: block; }

/* ---------- docentpagina: zelfde kop, zonder niveau ---------- */
body[data-pagina="docent"] .kop-rechts .niveau-schakelaar { display: none; }
.status-lijst .status-pil { border: 0; background: none; padding: 0; color: var(--tekst); font-size: 0.85rem; border-radius: 0; }
.status-lijst .status-pil.goed { color: var(--goed); font-weight: 700; background: none; }
.status-lijst dd { white-space: nowrap; }
.status-lijst .balkje { flex-basis: 44px; }
.status-lijst dd .status-pil { white-space: normal; }

/* ---------- startpagina klas 3 (index.html, gewone html): neutraal donkerblauw, geen niveau ---------- */
html.klas3 { --accent: #2f4a6d; --accent-vlak: #e9eef5; --accent-donker: #22374f; }
.kop-ruimte { width: 230px; }               /* houdt het menu in het midden */
.binnenkort-kaart { opacity: 0.7; }
.binnenkort-kaart .icoon { background: #c3c9d1; }
.dash-kaart .kort { font-size: 0.92rem; }
.dash-kaart .kaart-knoppen { margin-top: auto; padding-top: 0.4rem; }

/* --------------------------------------------------------------------------
   Figuur perioden en groepen (§2, sessie 3, #20): één rij (blauw) en één kolom (oranje) lichten op.
   -------------------------------------------------------------------------- */
.pg-rij-wrap { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; justify-content: center; }
.pg-rooster-wrap { overflow-x: auto; max-width: 100%; }
.ps-rooster.pg-rooster { --pg: 27px; justify-content: start; grid-template-columns: 22px repeat(18, var(--pg)) minmax(9.5rem, auto); grid-template-rows: 22px repeat(7, var(--pg)) auto; }
.pg-rooster .ps-cel { min-height: 0; cursor: default; }
.pg-rooster .ps-sym { font-size: 11px; }
.pg-rooster .ps-cel.pg-dim { opacity: 0.4; }
.pg-rooster .ps-cel.pg-rij { box-shadow: inset 0 0 0 2px var(--accent); }
.pg-rooster .ps-cel.pg-kol { box-shadow: inset 0 0 0 2px #c56a14; }
.pg-rooster .ps-cel.pg-kruis { box-shadow: inset 0 0 0 3px var(--tekst); }
.pg-rooster .ps-cel.pg-kruis .ps-sym { font-weight: 800; }
.pg-nr { font: inherit; font-size: 11px; line-height: 1; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--tekst-zacht); cursor: pointer; }
.pg-nr:hover { background: var(--accent-vlak); }
.pg-nr:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.pg-nr.pg-rij-aan { background: var(--accent); color: #fff; font-weight: 700; }
.pg-nr.pg-kol-aan { background: #c56a14; color: #fff; font-weight: 700; }
.pg-label { font-size: 12.5px; font-weight: 700; white-space: nowrap; align-self: center; padding: 0 0 0 6px; }
.pg-label-rij { color: var(--accent-donker); }
.pg-label-kol { color: #9a520f; padding: 4px 0 0; }
.pg-uitleg { max-width: 14rem; font-size: 0.95rem; text-align: center; }
.pg-uitleg .bohr { margin: 0 auto; }
.pg-uitleg p { margin: 0.3rem 0; }
.pg-tekst-rij { color: var(--accent-donker); font-weight: 700; }
.pg-tekst-kol { color: #9a520f; font-weight: 700; }
.pg-model { text-align: left; font-size: 0.9rem; }
.pg-hint { text-align: center; }
.pg-rooster .ps-cel { cursor: pointer; }
.pg-rooster.pg-vastgezet .ps-cel.pg-kruis { box-shadow: inset 0 0 0 3px var(--tekst), 0 0 0 2px var(--focus); }
.pg-vast { font-size: 0.85rem; color: var(--tekst-zacht); text-align: center; margin: 0.3rem 0 0; }
.pg-vastgezet + .pg-vast { color: var(--tekst); font-weight: 600; }

/* --------------------------------------------------------------------------
   Sessie 4 (§1 De bouw van het atoom): groot atoom, atoombouwer (sleepbakjes, elementkaart, ladingsmeter),
   schillenfiguur, isotopen (pot, getallenlijn, vlag), zoomstrook, inzoomen, Bohr-model uitgelegd, stappenplaatje,
   voorbeeldtabel. Bouwstenen: zie docs/vormgeving.md, deel "Sessie 4".
   -------------------------------------------------------------------------- */
.sch-rechts, .ab-model, .sch-model, .iso-model, .zs-model, .iz-model, .st-noot, .bu-model, .zs-reken, .ab-feedback, .st-stap, .bu-rechts { text-align: left; }
.fig-bron { display: block; font-size: 0.75rem; color: var(--tekst-zacht); }
.fig-bron.niet { color: #8a4b00; font-weight: 600; }
.zs-reken .fig-bron { display: inline; }

/* groot atoom (PERIODIEK.atoomGroot) */
.bohr-groot { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.bg-band { fill: #eef3fa; }
.bg-band-wit { fill: var(--vlak); }
.bg-schil { stroke-width: 1.4; }
.bg-kern { stroke-width: 1.5; }
.bg-kernlabel { font-size: 13px; font-weight: 700; fill: var(--tekst); }
.bg-klein { font-size: 11px; fill: var(--tekst-zacht); }
.bg-letter-vak { fill: #ffffff; stroke: var(--rand); }
.bg-letter { font-size: 13px; font-weight: 700; fill: var(--accent-donker); }
.bg-hint { font-size: 13px; font-weight: 700; fill: #8a4b00; }

/* atoombouwer */
.ab-balk { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.ab-seg { display: inline-flex; border: 1px solid var(--rand); border-radius: 999px; overflow: hidden; }
.ab-seg button { font: inherit; font-size: 0.92rem; border: 0; background: var(--vlak); padding: 0.3rem 0.9rem; cursor: pointer; color: var(--tekst); }
.ab-seg button + button { border-left: 1px solid var(--rand); }
.ab-seg button[aria-pressed="true"] { background: var(--accent); color: #fff; font-weight: 600; }
.ab-seg button:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.ab-snel { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; }
.ab-opdracht { border: 2px solid var(--accent); border-radius: 12px; padding: 0.4rem 0.8rem 0.6rem; background: var(--accent-vlak); margin-bottom: 0.5rem; }
.ab-opdracht-kop { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem 1rem; flex-wrap: wrap; }
.ab-opdracht-kop h4 { margin: 0; font-size: 1rem; }
.ab-opdracht-tekst { margin: 0.15rem 0 0.4rem; font-size: 1.08rem; font-weight: 600; }
.ab-opdracht-tekst:focus { outline: none; }
.ab-sterren { font-size: 1.1rem; letter-spacing: 1px; white-space: nowrap; }
.ab-sterren .aan { color: #b77d00; }
.ab-sterren .uit { color: #c3c7cd; }
.ab-feedback { margin: 0.4rem 0 0; padding: 0.3rem 0.7rem; border-radius: 8px; font-size: 0.95rem; border-left: 4px solid var(--rand); background: var(--vlak); }
.ab-feedback:empty { display: none; }
.ab-feedback.fout { border-left-color: var(--let-op); background: var(--let-op-vlak); }
.ab-feedback.goed { border-left-color: var(--goed); background: var(--goed-vlak); }
.ab-raster { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 0.4rem 1.4rem; align-items: start; }
.ab-atoom { touch-action: none; user-select: none; -webkit-user-select: none; }
.ab-atoom [data-deeltje] { cursor: grab; }
.ab-bezig, .ab-bezig * { cursor: grabbing !important; }
.ab-zone { fill: none; stroke: none; pointer-events: none; }
.ab-zone.zichtbaar { stroke: var(--focus); stroke-width: 2.5; stroke-dasharray: 6 5; }
.ab-zone.actief { stroke-width: 4; fill: rgba(255, 140, 0, 0.08); }
.ab-bakjes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-top: 0.3rem; }
.ab-bak { border: 2px solid var(--rand); border-radius: 12px; padding: 0.25rem 0.4rem 0.4rem; background: #fbfbfc; text-align: center; }
.ab-bak-kop { font-weight: 600; font-size: 0.92rem; }
.ab-hoop { display: flex; justify-content: center; padding: 2px 0; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.ab-hoop svg { overflow: visible; }
.ab-bak-knoppen { display: flex; justify-content: center; gap: 0.4rem; }
.ab-bak-knoppen .knop { min-width: 2.4rem; font-size: 1.05rem; padding: 0.1rem 0.5rem; }
.ab-spook { position: fixed; width: 20px; height: 20px; border-radius: 50%; pointer-events: none; z-index: 50; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); }
.ab-spook-p { background: var(--ps-proton); border: 1px solid var(--ps-proton-rand); }
.ab-spook-n { background: var(--ps-neutron); border: 1px solid var(--ps-neutron-rand); }
.ab-spook-e { background: var(--ps-elektron); border: 1px solid var(--ps-elektron-rand); }
.ab-rechts { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.ab-kaartrij { display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap; }
.proefkaart.ab-kaart { width: 10.5rem; padding: 0.3rem 0.5rem 0.4rem; }
.ab-hoek { align-self: stretch; display: flex; justify-content: space-between; gap: 0.3rem; font-size: 0.68rem; color: var(--tekst-zacht); }
.ab-hoek b { display: block; color: var(--tekst); font-size: 0.95rem; }
.ab-hoek span + span { text-align: right; }
.ab-sym { font-size: 3.3rem; font-weight: 800; line-height: 1.05; margin-top: 0.3rem; border-radius: 8px; padding: 0 0.3rem; }
.ab-naam { font-size: 1rem; }
.ab-lading { margin-top: auto; font-size: 0.78rem; color: var(--tekst-zacht); text-align: center; }
@keyframes ab-flits { 0% { background: rgba(255, 140, 0, 0.45); } 100% { background: transparent; } }
.ab-flits { animation: ab-flits 0.9s ease-out; }
.ab-meter { flex: 1 1 13rem; min-width: 13rem; }
.ab-meter-kop { font-weight: 600; font-size: 0.92rem; margin: 0; }
.ab-meter-svg { display: block; max-width: 100%; height: auto; }
.ab-meter-balk { fill: #eef0f3; stroke: var(--rand); }
.ab-meter-nul { fill: var(--goed-vlak); stroke: var(--goed); }
.ab-meter-streep { stroke: var(--tekst-zacht); }
.ab-meter-getal { font-size: 12px; fill: var(--tekst); }
.ab-meter-eind { font-size: 10.5px; fill: var(--tekst-zacht); }
.ab-naald { fill: var(--let-op); stroke: #333; stroke-width: 0.8; }
.ab-naald.nul { fill: var(--goed); }
.ab-naald-g { transition: transform 0.25s ease; }
.ab-meter-tekst { margin: 0.1rem 0 0; font-size: 0.88rem; }
.ab-ps-kop { margin: 0.2rem 0 0; font-size: 0.85rem; color: var(--tekst-zacht); }
.ab-ps .ps-rooster.compact { font-size: 10px; }
.ab-model { margin-top: 0.6rem; font-size: 0.92rem; }

/* schillenfiguur */
.sch-raster { display: grid; grid-template-columns: minmax(0, 430px) minmax(0, 1fr); gap: 0.6rem 1.4rem; align-items: start; }
.sch-tel { display: flex; gap: 0.35rem; flex-wrap: wrap; justify-content: center; margin: 0.2rem 0 0; }
.sch-tel span { border: 1px solid var(--rand); border-radius: 8px; padding: 0.1rem 0.5rem; background: var(--vlak); font-size: 0.95rem; }
.sch-tel b { color: var(--accent-donker); }
.sch-naam { font-size: 1.12rem; font-weight: 700; margin: 0 0 0.2rem; }
.sch-rechts .fig-status { text-align: left; margin: 0 0 0.5rem; max-width: none; }
.sch-rechts .fig-bediening { justify-content: flex-start; }
.sch-model { font-size: 0.92rem; margin: 0.5rem 0 0; }

/* isotopen */
.iso-raster { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 0.4rem 1.2rem; align-items: start; }
.iso-links { min-width: 0; }
.iso-atomen > .fig-kolom { flex: 1 1 150px; }
.iso-extra { opacity: 0.85; }
.iso-stip { display: inline-block; width: 0.8em; height: 0.8em; border-radius: 50%; border: 2px solid #1c6b73; vertical-align: -0.08em; margin-right: 0.25em; box-sizing: border-box; }
.iso-stip.a { background: #1c6b73; }
.iso-stip.b { background: #ffffff; }
.iso-schuifvak .fig-schuif { display: flex; align-items: center; gap: 0.6rem; font-weight: 600; }
.iso-schuifvak input[type="range"] { flex: 1; accent-color: var(--accent); }
.iso-lijn-svg { display: block; max-width: 100%; height: auto; }
.iso-as { stroke: var(--tekst); stroke-width: 2; }
.iso-as.dun { stroke-width: 1; }
.iso-getal { font-size: 12px; fill: var(--tekst); }
.iso-vlagstok { stroke: #8a4b00; stroke-width: 2; }
.iso-vlag { fill: #e08a00; }
.iso-vlagtekst { font-size: 12px; font-weight: 700; fill: #8a4b00; }
.iso-pijl { fill: var(--accent); }
.iso-pijltekst { font-size: 12px; font-weight: 700; fill: var(--accent-donker); }
.iso-uitdaging { margin: 0.3rem 0 0; padding: 0.35rem 0.7rem; border: 2px dashed var(--accent); border-radius: 8px; font-size: 0.95rem; }
.iso-uitdaging.gelukt { border-style: solid; border-color: var(--goed); background: var(--goed-vlak); }
.iso-model { font-size: 0.9rem; margin: 0.5rem 0 0; }
.iso-pot { text-align: center; }
.iso-pot svg { display: block; margin: 0 auto; max-width: 100%; height: auto; }
.iso-glas { fill: #f7f9fb; stroke: #9aa3ad; stroke-width: 2.5; }
.iso-deksel { fill: #c9ced5; }
.iso-a { fill: #1c6b73; stroke: #1c6b73; stroke-width: 1; transition: fill 0.2s ease; }
.iso-b { fill: #ffffff; stroke: #1c6b73; stroke-width: 2; transition: fill 0.2s ease; }
.iso-pot-kop { margin: 0.2rem 0 0; font-weight: 700; font-size: 0.92rem; }
.iso-legenda { margin: 0.1rem 0 0; font-size: 0.88rem; }
.iso-legenda .iso-stip.b { margin-left: 0.6em; }

/* zoomstrook */
.zs-kop { font-weight: 700; margin: 0 0 0.5rem; text-align: left; }
.zs-kijker { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 1.2rem; align-items: center; margin: 0 0 0.85rem; padding: 0.7rem 0.9rem; border: 1px solid var(--rand); border-radius: 14px; background: #f8fafd; }
.zs-beeld { width: 280px; height: 230px; overflow: hidden; border: 2px solid var(--rand); border-radius: 12px; background: radial-gradient(circle at 50% 46%, #ffffff 0%, #f1f6fb 75%, #e6eef7 100%); box-shadow: inset 0 2px 6px rgba(16, 24, 40, 0.06); }
.zs-kijk-svg { display: block; width: 100%; height: 100%; }
.zs-ring { fill: none; stroke: #d5e0ec; stroke-width: 1; stroke-dasharray: 4 4; }
.zs-ring-binnen { fill: rgba(255, 140, 0, 0.05); stroke: rgba(255, 140, 0, 0.35); stroke-width: 1; }
.zs-kruis { stroke: #c5d3e2; stroke-width: 1.2; }
.zs-doelvak { fill: rgba(255, 140, 0, 0.08); stroke: var(--focus); stroke-width: 1.8; stroke-dasharray: 3 2; }
.zs-liniaal { fill: none; stroke: var(--accent-donker); stroke-width: 2; stroke-linecap: round; }
.zs-liniaal-tekst { font-size: 11.5px; font-weight: 700; fill: var(--tekst); }
.zs-factor-pil { font-size: 11px; font-weight: 700; fill: var(--accent-donker); }
.zs-kijk-rechts { display: flex; flex-direction: column; gap: 0.55rem; text-align: left; min-width: 0; }
.zs-bijschrift { margin: 0; min-height: 6.2rem; }
.zs-stappil { display: inline-block; background: var(--accent-vlak); color: var(--accent-donker); font-size: 0.76rem; font-weight: 700; padding: 0.1rem 0.55rem; border-radius: 999px; margin-bottom: 0.2rem; }
.zs-titel { margin: 0; font-size: 1.22rem; line-height: 1.2; }
.zs-maatregel { margin: 0.15rem 0 0; font-size: 1.02rem; color: var(--accent-donker); }
.zs-macht-groot { color: var(--tekst); font-weight: 600; }
.zs-weetje { margin: 0.25rem 0 0.15rem; font-size: 0.92rem; color: var(--tekst); }
.zs-schuifrij { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; background: var(--vlak); padding: 0.3rem 0.6rem; border: 1px solid var(--rand); border-radius: 999px; }
.zs-schuifrij label { font-weight: 700; margin-right: 0.1rem; }
.zs-schuifrij input[type="range"] { flex: 1; accent-color: var(--accent); cursor: pointer; }
.zs-schuif-min, .zs-schuif-max { color: var(--tekst-zacht); font-size: 0.78rem; white-space: nowrap; }
.zs-strook { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 0.6rem; }
.zs-vak { text-align: center; font-size: 0.8rem; line-height: 1.25; position: relative; cursor: pointer; border-radius: 10px; padding: 2px; transition: transform 0.15s ease; }
.zs-vak:hover { transform: translateY(-2px); }
.zs-vak:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.zs-vak svg { display: block; width: 100%; max-width: 104px; height: auto; margin: 0 auto 0.2rem; border: 1px solid var(--rand); border-radius: 10px; background: #fff; }
.zs-vak.hier svg { outline: 3px solid var(--focus); outline-offset: 1px; background: #fffdf9; }
.zs-vak.hier b { color: var(--accent-donker); }
.zs-vak b { display: block; font-size: 0.86rem; }
.zs-maat { display: block; font-weight: 600; color: var(--accent-donker); }
.zs-macht { display: block; color: var(--tekst-zacht); }
.zs-pijl { position: absolute; right: -0.75rem; top: 2.4rem; font-size: 10px; color: var(--tekst-zacht); background: var(--vlak); padding: 0 1px; z-index: 2; }
.zs-model { font-size: 0.9rem; }
.zs-reken { display: grid; grid-template-columns: 1.25fr 1fr; gap: 0.8rem; }
.zs-reken .kader { margin: 0; }
.zs-vwo { border: 2px solid #6b3fa0; border-radius: 10px; padding: 0.4rem 0.7rem; background: #f5f0fb; }
.zs-vwo p { margin: 0.2rem 0 0; }
.zs-vwo-label { display: inline-block; background: #6b3fa0; color: #fff; border-radius: 999px; font-size: 0.72rem; padding: 0 0.5rem; }
/* vormen in de zoomstrook en kijker */
.zs-zand { fill: #e6cf9b; stroke: #a98a4b; stroke-width: 2; stroke-linejoin: round; }
.zs-zand-licht { fill: #f3e2b8; stroke: #c4a668; stroke-width: 1; stroke-linejoin: round; }
.zs-zand-donker { fill: #d4b87c; stroke: #a98a4b; stroke-width: 1; stroke-linejoin: round; }
.zs-glim { fill: none; stroke: #fff9e6; stroke-width: 2.5; stroke-linecap: round; }
.zs-zona { fill: rgba(253, 233, 228, 0.45); stroke: #e2b2a7; stroke-width: 1.5; stroke-dasharray: 3 2; }
.zs-eicel { fill: #fde9e4; stroke: #c98b7e; stroke-width: 2; }
.zs-eicel-binnen { fill: #fff4f1; stroke: #e2b2a7; }
.zs-kern-roze { fill: #d79a8d; stroke: #a5675b; stroke-width: 1.5; }
.zs-kern-stip { fill: #a5675b; }
.zs-cel { fill: #e9f4e1; stroke: #6e9a55; stroke-width: 2; }
.zs-organel { fill: #cbe3bb; stroke: #6e9a55; stroke-width: 1.2; }
.zs-kern-groen { fill: #b9d7a6; stroke: #5e8a47; stroke-width: 1.5; }
.zs-kern-groen-binnen { fill: #6e9a55; }
.zs-bacterie { fill: #dfeefa; stroke: #4f7fa8; stroke-width: 2; }
.zs-bacterie-binnen { fill: #eef6fc; stroke: #9bc0df; stroke-width: 1; }
.zs-bacterie-dna { fill: none; stroke: #3b6b94; stroke-width: 1.6; }
.zs-staart { fill: none; stroke: #4f7fa8; stroke-width: 1.6; stroke-linecap: round; }
.zs-stekel { stroke: #8a5aa8; stroke-width: 2; }
.zs-stekelkop { fill: #8a5aa8; }
.zs-virus { fill: #efe3f6; stroke: #8a5aa8; stroke-width: 2; }
.zs-virus-binnen { fill: #dec7ec; stroke: #9d72b8; stroke-width: 1.2; }
.zs-dna-a { fill: none; stroke: #b5835a; stroke-width: 4.5; stroke-linecap: round; }
.zs-dna-b { fill: none; stroke: #d69f73; stroke-width: 4.5; stroke-linecap: round; }
.zs-dna-sport { stroke: #7b5637; stroke-width: 2; stroke-linecap: round; }
.zs-hemo { fill: #f2c7c0; stroke: #a9564a; stroke-width: 1.5; }
.zs-hemo.licht { fill: #f6dad4; }
.zs-heem { fill: #c0392b; stroke: #7f1d1d; stroke-width: 1; }
.zs-wolk { fill: rgba(30, 100, 180, 0.06); }
.zs-schil { fill: none; stroke: var(--tekst-zacht); stroke-width: 1.2; }
.zs-doorkijk { opacity: 0.7; }
.zs-zoom { fill: rgba(255, 140, 0, 0.08); stroke: var(--focus); stroke-width: 2; }

/* inzoomen */
.iz-niveau { display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--tekst-zacht); margin: 0 0.3rem 0.3rem; }
.iz-rij { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.8rem; }
.iz-stap { text-align: center; position: relative; font-size: 0.9rem; }
.iz-stap svg { display: block; width: 100%; max-width: 200px; height: auto; margin: 0 auto 0.3rem; border: 1px solid var(--rand); border-radius: 12px; background: #fff; }
.iz-stap b { display: block; }
.iz-pijl { position: absolute; right: -0.75rem; top: 4.5rem; font-size: 1.1rem; color: var(--tekst-zacht); }
.iz-model { font-size: 0.9rem; }
.iz-glas { fill: #f4f8fc; stroke: #8c99a6; stroke-width: 2.5; }
.iz-water { fill: #cfe3f6; }
.iz-golf { fill: none; stroke: #a9c7e6; stroke-width: 3; }
.iz-achter { fill: #f2f7fc; }
/* sessie 6 (M11, Q2): het watermolecuul in de atoomkleuren van §4 (O rood, H wit), zie .at-O en .at-H */
.iz-o { fill: #d63a2f; stroke: #8e1f18; stroke-width: 1.2; }
.iz-h { fill: #ffffff; stroke: #7d7d7d; stroke-width: 1.2; }
.iz-letter { font-size: 14px; font-weight: 700; fill: #333; }
.iz-letter.wit { font-size: 17px; fill: #fff; }

/* Bohr-model uitgelegd */
.bu-raster { display: grid; grid-template-columns: minmax(0, 600px) minmax(0, 1fr); gap: 1rem; align-items: start; }
.bu-lijn { fill: none; stroke: var(--tekst-zacht); stroke-width: 1; }
.bu-punt { fill: var(--tekst); }
.bu-label { font-size: 13px; fill: var(--tekst); }
.bu-label.vet { font-weight: 700; }
.bu-rechts > p { margin: 0 0 0.5rem; }
.bu-model { font-size: 0.92rem; }
.bu-model p { margin: 0 0 0.2rem; }
.bu-model ul { margin: 0; padding-left: 1.1rem; }

/* stappenplaatje "Zo teken je een atoom" (vaste kaartkleuren: het gaat over het papieren kaartje) */
.st-op { margin: 0 0 0.5rem; padding: 0.3rem 0.7rem; border-radius: 8px; background: var(--accent-vlak); }
.st-rij { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6rem; }
.st-stap { border: 1px solid var(--rand); border-radius: 12px; padding: 0.4rem 0.5rem 0.5rem; background: #fff; font-size: 0.88rem; }
.st-stap h4 { margin: 0 0 0.1rem; font-size: 0.98rem; }
.st-nr { display: inline-block; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--accent); color: #fff; text-align: center; line-height: 1.5rem; margin-right: 0.3rem; font-size: 0.85rem; }
.st-stap svg { display: block; width: 100%; max-width: 170px; height: auto; margin: 0.1rem auto; }
.st-stap ul { margin: 0.1rem 0 0; padding-left: 1.1rem; }
.st-kern { fill: #fff3e0; stroke: #c9a300; stroke-width: 1.5; }
.st-kerntekst { font-size: 10px; fill: var(--tekst-zacht); }
.st-schil { fill: none; stroke: var(--tekst); stroke-width: 1.4; }
.st-elektron { fill: var(--kaart-elektron); stroke: #123c6e; }
.st-p { font-size: 15px; font-weight: 700; fill: var(--kaart-proton); }
.st-n { font-size: 15px; font-weight: 700; fill: #8a6d00; }
.st-vinkbol { fill: var(--goed); }
.st-vinkteken { font-size: 18px; font-weight: 700; fill: #fff; }
.st-vink { color: var(--goed); font-weight: 700; }
.st-noot { font-size: 0.92rem; }

/* voorbeeldtabel en mini-oefening */
.vb-tabel { border-collapse: collapse; width: 100%; font-size: 0.95rem; }
.vb-tabel caption { text-align: left; font-weight: 700; padding: 0 0 0.3rem; }
.vb-tabel th, .vb-tabel td { border: 1px solid var(--rand); padding: 0.2rem 0.4rem; text-align: center; }
.vb-tabel thead th { background: var(--accent-vlak); font-size: 0.85rem; }
.vb-tabel tbody th { text-align: left; font-weight: 400; white-space: nowrap; }
.vb-tabel input { width: 2.6rem; font: inherit; text-align: center; padding: 0.05rem 0.1rem; border: 1px solid var(--rand); border-radius: 6px; }
.vb-tabel input.goed { border: 2px solid var(--goed); background: var(--goed-vlak); }
.vb-tabel input.fout { border: 2px solid var(--fout); background: var(--fout-vlak); }
.vb-regel { margin: 0.4rem 0 0; font-size: 0.92rem; }
.vb-oef-rij { display: grid; grid-template-columns: minmax(0, 1fr) 18rem; gap: 1rem; align-items: start; margin-top: 0.8rem; }
.vb-naast .ab-snel { margin-top: 1.7rem; }

@media (max-width: 900px) {
  .ab-raster, .sch-raster, .iso-raster, .bu-raster, .vb-oef-rij, .zs-reken { grid-template-columns: minmax(0, 1fr); }
  .zs-strook { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .zs-kijker { grid-template-columns: minmax(0, 1fr); }
  .iz-rij, .st-rij { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .ab-flits { animation: none; }
  .ab-naald-g, .iso-a, .iso-b, .zs-beeld svg.zs-groot { transition: none; }
}
@media print {
  .ab-balk, .ab-bakjes, .ab-opdracht, .vb-naast { display: none !important; }
}

/* --------------------------------------------------------------------------
   Sessie 5 (§2 en §3): symbooltegels, twee-atomige elementen, symbolentrainer, voorbeelden, stofplaatjes,
   bindingen, roosterfiguur in stappen, geleidingsfiguur. Bouwstenen: zie docs/vormgeving.md, deel "Sessie 5".
   -------------------------------------------------------------------------- */
/* gedeelde deeltjestekeningen */
.dt-rest-teken { fill: #333; }
.fig-ion-licht { fill-opacity: 0.6; stroke-width: 2.4; }
.dt-ion-teken { font-weight: 700; }
.dt-ion-teken.plus { fill: var(--ps-proton-rand); }
.dt-ion-teken.min { fill: var(--ps-elektron-rand); }
.dt-elektron { stroke: var(--ps-elektron-rand); stroke-width: 0.5; }
.dt-suiker circle { fill: #f4e7b0; stroke: #b49a3a; stroke-width: 0.8; }
.dt-pijl { stroke-width: 1.4; } .dt-pijl.plus { stroke: var(--ps-proton-rand); } .dt-pijl.min { stroke: var(--ps-elektron-rand); }
.dt-pijlpunt.plus { fill: var(--ps-proton-rand); } .dt-pijlpunt.min { fill: var(--ps-elektron-rand); }

/* symbooltegels (§2) */
.sy-kop { font-size: 0.98rem; font-weight: 700; margin: 0.7rem 0 0.3rem; }
.sy-kop small { font-weight: 400; color: var(--tekst-zacht); margin-left: 0.4rem; }
.blok ul.sy-groep { display: flex; flex-wrap: wrap; gap: 5px; list-style: none; padding: 0; margin: 0; }
.blok .sy-groep li { margin: 0; }
.sy-tegel { width: 3.35rem; min-height: 3.5rem; box-sizing: border-box; border: 1px solid var(--rand); border-top: 5px solid var(--ps-metaal-rand); border-radius: 8px; background: var(--vlak); display: flex; flex-direction: column; align-items: center; padding: 2px 2px 3px; text-align: center; }
.sy-tegel.nietmetaal { border-top-color: var(--ps-nietmetaal-rand); }
.sy-tegel.metalloide { border-top-color: var(--ps-metalloide-rand); }
.sy-tegel b { font-size: 1.35rem; line-height: 1.15; }
.sy-tegel span { font-size: 0.72rem; color: var(--tekst-zacht); }
.sy-tegel i { font-style: normal; font-size: 0.6rem; line-height: 1.15; color: var(--accent-donker); margin-top: 1px; }
.sy-groep.herkomst .sy-tegel { width: 3.95rem; min-height: 4.5rem; }
.sy-legenda { font-size: 0.78rem; color: var(--tekst-zacht); margin: 0.35rem 0 0; display: flex; gap: 0.9rem; flex-wrap: wrap; }
.sy-legenda span::before { content: ""; display: inline-block; width: 12px; height: 5px; margin-right: 4px; vertical-align: middle; background: var(--ps-metaal-rand); }
.sy-legenda .nm::before { background: var(--ps-nietmetaal-rand); }
.sy-legenda .ml::before { background: var(--ps-metalloide-rand); }
.sy-twee .sy-tegel { width: 7rem; min-height: 6rem; border-top-color: var(--ps-nietmetaal-rand); }
.sy-twee svg { display: block; margin: 2px auto; }
.sy-twee .sy-atoom { fill: var(--ps-nietmetaal); stroke: var(--ps-nietmetaal-rand); stroke-width: 1.4; }
.sy-twee text { font-weight: 700; fill: #333; }
.sy-ezel { margin: 0.5rem 0 0; }
.sy-ezel .sy-letters { letter-spacing: 1px; font-weight: 800; font-size: 1.12rem; color: var(--accent-donker); }
.sy-ezel .sy-letters u { text-decoration: none; border-bottom: 3px solid var(--ps-nietmetaal-rand); }

/* voorbeelden metalen, niet-metalen, metalloïden (§2) */
.mv-kolommen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.9rem; margin-top: 0.4rem; }
.mv-kol h4 { margin: 0 0 0.4rem; font-size: 0.98rem; padding: 3px 10px; border-radius: 8px; }
.mv-tegel { display: grid; grid-template-columns: 60px 1fr; gap: 0.5rem; align-items: center; border: 1px solid var(--rand); border-radius: 10px; background: var(--vlak); padding: 6px 8px; margin-bottom: 0.45rem; }
.mv-tegel svg { display: block; }
.mv-tegel b span { display: inline-block; min-width: 1.7em; font-weight: 800; color: var(--accent-donker); }
.mv-tegel p { margin: 1px 0 0; font-size: 0.88rem; line-height: 1.35; }
@media (max-width: 760px) { .mv-kolommen { grid-template-columns: 1fr; } }

/* symbolentrainer */
.tr-uitleg { text-align: center; margin: 0 0 0.3rem; color: var(--tekst-zacht); font-size: 0.95rem; }
.tr-paneel { max-width: 34rem; margin: 0.5rem auto 0; border: 1px solid var(--rand); border-radius: 12px; background: var(--vlak); padding: 0.5rem 1rem 0.6rem; text-align: center; }
.tr-vraag { margin: 0.5rem 0; font-size: 1.08rem; min-height: 1.5em; }
.tr-groot { display: block; font-size: 3rem; font-weight: 800; line-height: 1.1; }
.tr-invoer { display: flex; justify-content: center; gap: 0.5rem; align-items: center; }
figure.fig-app .tr-invoer input.tr-invoer-veld { font-size: 1.35rem; width: 9rem; text-align: center; border-width: 2px; }
figure.fig-app .tr-invoer input.tr-invoer-veld.bijna { border-color: var(--let-op); }
.tr-verborgen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tr-keuzes { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; max-width: 24rem; margin: 0 auto; }
.tr-keuze { font: inherit; padding: 0.45rem 0.7rem; border: 2px solid var(--rand); border-radius: 10px; background: var(--vlak); text-align: left; cursor: pointer; color: var(--tekst); }
.tr-keuze:hover:not(:disabled) { border-color: var(--accent); }
.tr-keuze:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.tr-keuze:disabled { cursor: default; color: var(--tekst); }
.tr-keuze kbd { display: inline-block; min-width: 1.3em; text-align: center; font: 0.75rem/1.4 var(--lettertype); border: 1px solid var(--rand); border-radius: 4px; margin-right: 0.4rem; color: var(--tekst-zacht); }
.tr-keuze.goed { border-color: var(--goed); background: var(--goed-vlak); font-weight: 700; }
.tr-keuze.fout { border-color: var(--fout); background: var(--fout-vlak); }
.tr-fb { margin: 0.5rem 0 0; padding: 0.35rem 0.7rem; border-radius: 8px; font-size: 0.95rem; text-align: left; }
.tr-fb:empty { padding: 0; margin: 0; }
.tr-fb.bijna { background: var(--let-op-vlak); border-left: 4px solid var(--let-op); }
.tr-fb.goed { background: var(--goed-vlak); border-left: 4px solid var(--goed); }
.tr-fb.fout { background: var(--fout-vlak); border-left: 4px solid var(--fout); }
.tr-verder { margin-top: 0.4rem; display: flex; justify-content: center; gap: 0.5rem; }
.tr-score { margin-top: 0.6rem; border-top: 1px solid var(--rand); padding-top: 0.4rem; }
.tr-tellers { margin: 0; font-size: 0.9rem; }
.tr-vakjes { display: flex; gap: 3px; margin-top: 0.35rem; flex-wrap: wrap; justify-content: center; }
.tr-vak { width: 13px; height: 13px; border-radius: 3px; background: #e3e6ea; }
.tr-vak.goed { background: var(--goed); }
.tr-vak.oefen { background: var(--let-op); }
.tr-vak.nu { outline: 2px solid var(--accent); outline-offset: 1px; }
.tr-record { font-size: 0.82rem; color: var(--tekst-zacht); margin: 0.3rem 0 0; }
.tr-toetsen { font-size: 0.78rem; color: var(--tekst-zacht); text-align: center; margin: 0.4rem 0 0; }

/* stofplaatjes en bindingen (§3) */
.sf-rij { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; }
.sf-kaart { border-radius: 12px; padding: 0.5rem 0.6rem 0.6rem; text-align: center; border: 1px solid var(--rand); }
.sf-kaart h4 { margin: 0; font-size: 1.02rem; }
.sf-formule { font-size: 1.55rem; font-weight: 800; margin: 0; }
.sf-regel { font-size: 0.85rem; color: var(--tekst-zacht); margin: 0; }
.sf-kaart svg, .bd-paneel svg { display: block; width: 100%; max-width: 290px; height: auto; margin: 0.3rem auto; background: var(--vlak); border-radius: 8px; }
.sf-uitleg { margin: 0.1rem 0 0; font-size: 0.9rem; line-height: 1.35; }
.sf-legenda { display: flex; gap: 0.9rem; justify-content: center; font-size: 0.8rem; color: var(--tekst-zacht); margin-top: 0.4rem; flex-wrap: wrap; }
figure.fig-app .sf-legenda svg { width: 22px; height: 22px; vertical-align: middle; margin-right: 3px; }
.sf-model, .bd-model, .gl-model, .rs-model, .sf-netwerk { text-align: left; }
.fig-stoftype-kaart .sf-netwerk { margin: 0.5rem 0 0; }
.bd-paneel { border: 1px solid var(--rand); border-radius: 12px; background: var(--vlak); padding: 0.5rem 0.6rem; }
.bd-paneel h4 { margin: 0; font-size: 1rem; text-align: center; }
.bd-paneel p { margin: 0.1rem 0 0; font-size: 0.9rem; line-height: 1.35; }
.bd-trek { stroke: #c98a00; stroke-width: 2.4; stroke-dasharray: 3 2; }
.bd-schil { fill: none; stroke: var(--tekst); stroke-width: 1.3; }
.bd-letter { font-size: 14px; font-weight: 700; fill: var(--tekst); }
.bd-paar { fill: #fff6d6; stroke: #c98a00; stroke-width: 1.4; stroke-dasharray: 4 3; }
.bd-paartekst { font-size: 12px; font-weight: 700; fill: #7a4b00; }
@media (max-width: 760px) { .sf-rij { grid-template-columns: 1fr; } }

/* roosterfiguur in stappen */
figure.fig-app svg.rs-svg { width: 440px; max-width: 100%; height: auto; display: block; margin: 0 auto; }
.rs-tabs { margin-top: 0; }
.rs-teller { font-size: 0.9rem; color: var(--tekst-zacht); min-width: 6.5em; text-align: center; }
.rs-knoppen .knop:disabled { opacity: 0.45; cursor: default; }
.fig-atoomrest.rs-vreemd { fill: #aab1ba; stroke: #5f6670; }
.rs-koolstof { fill: #4a4f55; stroke: #222; stroke-width: 0.8; }
.rs-c { font-size: 8px; font-weight: 700; fill: #fff; }
.dt-pijl.rs-duw { stroke: var(--focus); stroke-width: 3; } .dt-pijlpunt.rs-duw { fill: var(--focus); }
.rs-duwtekst { font-size: 11px; font-weight: 700; fill: #a85a00; }
.rs-afstoot { fill: #c0392b; }
.rs-afstoottekst { font-size: 11.5px; font-weight: 700; fill: #c0392b; }
.rs-breuk { fill: none; stroke: #c0392b; stroke-width: 1.4; stroke-dasharray: 3 2; }
.rs-haak { fill: none; stroke: var(--focus); stroke-width: 2.6; }
.rs-haakteken { font-size: 17px; font-weight: 800; fill: #a85a00; }
.rs-buig { fill: none; stroke: #8d96a3; stroke-width: 7; stroke-linecap: round; }
.rs-klein { font-size: 10px; fill: var(--tekst-zacht); }

/* geleidingsfiguur */
figure.fig-app svg.gl-svg { width: 560px; max-width: 100%; height: auto; display: block; margin: 0.3rem auto 0; }
.gl-bediening { margin-top: 0; }
.gl-label { font-size: 0.92rem; color: var(--tekst-zacht); }
.gl-pool-plus { stroke: #333; stroke-width: 2.5; }
.gl-pool-min { stroke: #333; stroke-width: 5; }
.gl-teken { font-size: 16px; font-weight: 700; }
.gl-teken.plus { fill: var(--ps-proton-rand); } .gl-teken.min { fill: var(--ps-elektron-rand); }
.gl-klein { font-size: 10.5px; fill: var(--tekst-zacht); }
.gl-klein.gl-vet { font-weight: 700; fill: var(--tekst); }
.gl-klein.gl-e { font-weight: 700; fill: var(--ps-elektron-rand); }
.gl-gloed { fill: #ffd84d; }
.gl-gloeidraad { fill: none; stroke: #7a5a10; stroke-width: 1.2; }
.gl-lamptekst { font-size: 11px; font-weight: 700; fill: var(--tekst-zacht); }
.gl-lamptekst.aan { fill: #8a5a00; }
.gl-elektrode { fill: #777; stroke: #444; }
.gl-staafje { fill: #e3a273; stroke: #9a5a2e; stroke-width: 1.5; }
.gl-klem { fill: #c0392b; stroke: #7a1d14; stroke-width: 1; }
.gl-kristal { fill: #f7f7f7; stroke: #999; }
.gl-bak { fill: none; stroke: #555; stroke-width: 1.6; }
.gl-water { fill: #dbeefa; }
.gl-smelt { fill: #fde2c4; }
.gl-koper-vloeibaar { fill: #f2b48a; }
.gl-vlam { fill: #f39c32; stroke: #c0601a; }
.gl-chevron { fill: none; stroke: var(--ps-elektron-rand); stroke-width: 1.5; }
@media print {
  .tr-balk, .tr-verder, .tr-toetsen, .rs-knoppen, .rs-tabs, .gl-bediening, .bd-pauze { display: none !important; }
}

/* ==========================================================================
   Sessie 6 (§4): atoomkleuren en bolletjesmodel, klikbare index, vanderwaals-figuur, rekentool, Probeer het nu zelf,
   meldingen bij formules. Bouwstenen: zie docs/vormgeving.md, deel "Sessie 6".
   ========================================================================== */
/* Atoomkleuren van een molecuulbouwdoos (Q1). Volgen "Kies je eigen kleur" niet: dat zijn protonen en elektronen. */
.at-C { fill: #2e2e2e; stroke: #000; }
.at-H { fill: #ffffff; stroke: #7d7d7d; }
.at-O { fill: #d63a2f; stroke: #8e1f18; }
.at-N { fill: #2f62cf; stroke: #1b3c86; }
.at-Cl { fill: #3d9e3a; stroke: #24661f; }
.at-letter { font-weight: 700; fill: #fff; pointer-events: none; }
.at-letter.donker { fill: #333; }
.at-uit { opacity: 0.28; }
.at-licht { stroke: #f08c00; stroke-width: 4 !important; }

/* Klikbare index */
.mi-rij { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.6rem 2rem; margin-top: 0.6rem; }
.mi-tekening { min-width: 200px; display: flex; justify-content: center; }
.mi-svg, figure.fig-app svg.mi-svg { display: block; max-width: 100%; height: auto; }   /* breedte zet de figuur zelf (style) */
.mi-svg .at { cursor: pointer; }
.mi-rechts { max-width: 26rem; text-align: center; }
.mi-formule { display: flex; justify-content: center; gap: 0.3rem; margin-bottom: 0.4rem; }
.mi-groep { font: inherit; font-size: 2.1rem; line-height: 1; padding: 0.25rem 0.5rem 0.4rem; border: 2px solid var(--rand); border-radius: 10px; background: var(--vlak); color: var(--tekst); font-weight: 700; cursor: pointer; }
.mi-groep sub { font-size: 1.35rem; color: var(--accent-donker); text-decoration: underline dotted; text-underline-offset: 3px; }
.mi-groep[aria-pressed="true"] { border-color: #f08c00; background: #fff4e0; box-shadow: 0 0 0 2px #f08c00; }
.mi-groep:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.mi-telling { margin: 0.2rem 0; }
.mi-telling b.aan { white-space: nowrap; background: #fff4e0; border-radius: 4px; padding: 0 3px; outline: 2px solid #f08c00; }
.mi-uitleg { font-size: 0.9rem; color: var(--tekst-zacht); margin: 0.2rem 0 0; }
.mi-model, .vw-model, .mm-model { font-size: 0.9rem; text-align: left; margin-top: 0.6rem; }

/* Vanderwaals-figuur */
.vw-bediening { margin-top: 0.4rem; }
.vw-label { font-size: 0.95em; }
.vw-schuif input[type="range"] { min-width: 12rem; }
.vw-waarde { white-space: nowrap; min-width: 8.5em; }
.vw-snel { display: inline-flex; flex-wrap: wrap; gap: 0.4rem; }
.vw-hoofd { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 0.8rem; margin-top: 0.6rem; }
.vw-hoofd svg { display: block; max-width: 100%; height: auto; }
figure.fig-app svg.vw-thermo { width: 130px; }
figure.fig-app svg.vw-bak { width: 430px; }
figure.fig-app svg.vw-ladder { width: 330px; }
.vw-bakrand { fill: #fbfcfd; stroke: #555; stroke-width: 1.5; }
.vw-bakkop { font-size: 11px; fill: var(--tekst-zacht); }
.vw-buis { fill: #fff; stroke: #666; stroke-width: 1.5; }
.vw-bol, .vw-kwik { fill: #d9473c; }
.vw-bol { stroke: #666; stroke-width: 1.5; }
.vw-streep { stroke: #666; }
.vw-klein { font-size: 9.5px; fill: var(--tekst-zacht); }
.vw-merk { stroke-width: 2.2; }
.vw-merktekst { font-size: 10px; font-weight: 700; }
.vw-smelt { stroke: #1d4f86; fill: #1d4f86; }
.vw-kook { stroke: #b4561a; fill: #b4561a; }
.vw-merktekst.vw-smelt, .vw-klein.vw-smelt, .vw-merktekst.vw-kook, .vw-klein.vw-kook { stroke: none; }
.vw-vast { fill: #dbe9f8; }
.vw-vloeibaar { fill: #bfe5c8; }
.vw-gas { fill: #fde0c6; }
.vw-ladnaam { font-size: 11px; fill: var(--tekst); }
.vw-ladnaam.actief { font-weight: 700; }
.vw-ladkader { fill: none; stroke: var(--accent); stroke-width: 1.5; }
.vw-nu { stroke: #d9473c; stroke-width: 2; }
.vw-nutekst { font-size: 10px; font-weight: 700; fill: #c0392b; }
.vw-fase { display: inline-block; font-weight: 700; padding: 0 0.5em; border-radius: 999px; }
.vw-fase.vast { background: #dbe9f8; color: #1d4f86; }
.vw-fase.vloeibaar { background: #dff2e3; color: #23683a; }
.vw-fase.gas { background: #fde8d6; color: #8a4310; }

/* Meldingen bij formules (rekentool, herkenner) */
.fm-melding { max-width: 46ch; margin: 0.6rem auto; text-align: left; }
.fm-melding p { margin: 0.2rem 0; }

/* Probeer het nu zelf */
.mo-kop { margin: 0 0 0.2rem; text-align: center; }
.mo-uitleg { font-size: 0.92rem; color: var(--tekst-zacht); text-align: center; max-width: 62ch; margin: 0 auto 0.4rem; }
.mo-vraag { text-align: center; font-size: 1.05rem; margin: 0.3rem 0; }
.mo-vraag b { font-size: 1.25rem; }
.mo-tabel th, .mo-tabel td { text-align: center; vertical-align: middle; }
.mo-tabel th.maal, .mo-tabel td.maal { border-left: 0; border-right: 0; padding: 0 0.15rem; color: var(--tekst-zacht); }
.mo-tabel .mo-totaalkop { text-align: right; }
.mo-tabel input { font: inherit; width: 4.6em; text-align: right; padding: 0.15rem 0.35rem; border: 2px solid var(--rand); border-radius: 6px; }
.mo-tabel input.goed { border-color: var(--goed); background: var(--goed-vlak); }
.mo-tabel input.fout { border-color: var(--fout); background: var(--fout-vlak); }
.mo-teken { font-weight: 700; }
.mo-teken.goed { color: var(--goed); }
.mo-teken.fout { color: var(--fout); }
.mo-hints { list-style: none; padding: 0; margin: 0.4rem auto; max-width: 46rem; }
.mo-hint { margin: 0.25rem 0; padding: 0.3rem 0.6rem; border-left: 4px solid var(--fout); background: var(--fout-vlak); border-radius: 6px; font-size: 0.92rem; text-align: left; }
.mo-hint.goed { border-left-color: var(--goed); background: var(--goed-vlak); }
.mo-sterren-rij { text-align: center; margin: 0.4rem 0 0; font-size: 0.9rem; color: var(--tekst-zacht); }
.mo-ster { font-size: 1.15rem; letter-spacing: 1px; color: #d5d8dd; }
.mo-ster.aan { color: #e0a000; }
figure.fig-app table.mo-tabel { width: auto; margin: 0.4rem auto; }
.mo-teller { margin-left: 0.6rem; }
@media print {
  .vw-bediening, .mi-kies, .mo-tabel input { display: none !important; }
}

/* --------------------------------------------------------------------------
   Sessie 7 (§4, #27, KC 51, KC 53): de molecuulbouwer (periode-b/js/molecuulbouwer.js). Atoomkleuren: .at-C enzovoort (sessie 6).
   -------------------------------------------------------------------------- */
.mb-doelen { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.3rem 0.5rem; margin: 0 0 0.35rem; }
.mb-doelen .ab-seg button { padding: 0.25rem 0.6rem; }
.mb-ster { color: #b77d00; font-size: 0.75em; margin-left: 2px; }
.mb-opdracht { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0.2rem 0.9rem; margin: 0 0 0.3rem; text-align: center; }
.mb-tip { text-align: center; margin: 0 0 0.35rem; }
.mb-hoofd { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 0.6rem; align-items: start; }
.mb-palet { display: flex; flex-direction: column; gap: 0.3rem; }
.mb-palet-kop { font-size: 0.75rem; color: var(--tekst-zacht); text-align: center; line-height: 1.2; }
.mb-tegel { display: flex; align-items: center; gap: 0.4rem; font: inherit; font-size: 0.88rem; border: 1px solid var(--rand); background: var(--vlak); border-radius: 10px; padding: 0.2rem 0.4rem; color: var(--tekst); text-align: left; cursor: pointer; touch-action: none; }
.mb-tegel:hover { border-color: var(--accent); background: var(--accent-vlak); }
figure.fig-app .mb-tegel svg { flex: none; width: 28px; height: 28px; }
.mb-vlak-wrap { position: relative; border-radius: 12px; }
.mb-vlak-wrap:focus { outline: none; }
.mb-vlak-wrap:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.mb-vlak-wrap.neerzetten .mb-vlak { border-color: var(--accent); background: var(--accent-vlak); }
figure.fig-app svg.mb-vlak { display: block; width: 100%; height: auto; border: 1px solid var(--rand); border-radius: 12px; background: #fbfcfd; touch-action: none; user-select: none; -webkit-user-select: none; }
.mb-stip { fill: #d4d8de; }
.mb-formule { position: absolute; left: 0.6rem; top: 0.5rem; font-size: 0.85rem; background: var(--vlak); border: 1px solid var(--rand); border-radius: 8px; padding: 0 0.5rem; color: var(--tekst-zacht); pointer-events: none; }
.mb-formule b { color: var(--tekst); }
.mb-bak { position: absolute; right: 0.6rem; bottom: 0.5rem; font-size: 0.78rem; border: 1px dashed var(--rand); border-radius: 8px; padding: 0.1rem 0.5rem; color: var(--tekst-zacht); background: var(--vlak); pointer-events: none; }
.mb-bak.zichtbaar { border-color: var(--fout); color: var(--fout); }
.mb-bak.actief { background: var(--fout-vlak); font-weight: 600; }
.mb-atoom, .mb-binding-g { cursor: pointer; }
.mb-binding { stroke: #3b3f46; stroke-width: 4; stroke-linecap: round; }
.mb-raak { stroke: transparent; stroke-width: 22; stroke-linecap: round; }
.mb-binding-g:hover .mb-raak { stroke: #f08c00; stroke-opacity: 0.22; }
.mb-gekozen { fill: none; stroke: #f08c00; stroke-width: 4; stroke-dasharray: 6 4; }
.mb-focusring { fill: none; stroke: var(--focus); stroke-width: 3.5; }
.mb-foutring { fill: none; stroke: var(--fout); stroke-width: 4; }
.mb-goedring { fill: none; stroke: var(--goed); stroke-width: 3; }
.mb-teller { font-size: 13px; fill: var(--tekst-zacht); pointer-events: none; }
.mb-teller.goed { fill: var(--goed); font-weight: 700; }
.mb-teller.fout { fill: var(--fout); font-weight: 700; }
.mb-ballon { pointer-events: none; }
.mb-ballon rect { fill: #fff; stroke: var(--fout); stroke-width: 1.5; }
.mb-ballon text { font-size: 13px; fill: var(--fout); font-weight: 600; }
.mb-leeg { font-size: 17px; fill: var(--tekst-zacht); pointer-events: none; }
.mb-spook { position: fixed; z-index: 60; pointer-events: none; opacity: 0.85; }
.mb-knoppen { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin: 0.45rem 0 0; }
.mb-knoppen button:disabled { opacity: 0.45; cursor: default; }
.mb-feedback { margin: 0.45rem auto 0; max-width: 70ch; padding: 0.3rem 0.7rem; border-radius: 8px; border-left: 4px solid var(--rand); background: var(--vlak); }
.mb-feedback:empty { display: none; }
.mb-feedback.goed { border-color: var(--goed); background: var(--goed-vlak); }
.mb-feedback.fout { border-color: var(--fout); background: var(--fout-vlak); }
.mb-feedback ul { margin: 0.15rem 0 0 1.2rem; padding: 0; }
.mb-toetsen { font-size: 0.8rem; color: var(--tekst-zacht); text-align: center; margin: 0.35rem 0 0; }
.mb-toetsen kbd { font: inherit; font-size: 0.75rem; border: 1px solid var(--rand); border-bottom-width: 2px; border-radius: 4px; padding: 0 0.25rem; background: var(--vlak); }
@media print {
  .mb-palet, .mb-knoppen, .mb-toetsen, .mb-bak, .mb-doelen { display: none !important; }
  .mb-hoofd { display: block; }
}

/* --------------------------------------------------------------------------
   Sessie 7 (nieuwe wens van Rick): het modelblok "Het model en de echte wereld". <details class="modelblok">, standaard dicht,
   rustig (geen oker), bij printen open (app.js). Vervangt de oude .kader.let-op voor modellen.
   -------------------------------------------------------------------------- */
details.modelblok { border: 1px solid var(--rand); border-left: 5px solid var(--accent); border-radius: 0 10px 10px 0; background: var(--vlak); margin: 0.8em 0; text-align: left; }
details.modelblok > summary { list-style: none; cursor: pointer; padding: 0.35rem 0.8rem; font-weight: 600; color: var(--accent-donker); display: flex; align-items: center; gap: 0.5rem; border-radius: 0 9px 9px 0; }
details.modelblok > summary::-webkit-details-marker { display: none; }
details.modelblok > summary::before { content: ""; flex: none; width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent currentColor; transition: transform 0.15s; }
details.modelblok[open] > summary::before { transform: rotate(90deg); }
details.modelblok > summary:hover { background: var(--accent-vlak); }
.modelblok-hint { margin-left: auto; font-weight: 400; font-size: 0.82rem; color: var(--tekst-zacht); }
.modelblok-hint::after { content: "klik om uit te klappen"; }
details.modelblok[open] .modelblok-hint::after { content: "klik om in te klappen"; }
.modelblok-tekst { padding: 0 0.9rem 0.5rem 1.9rem; }
.modelblok-tekst p { margin: 0.2rem 0; }
.modelblok-tekst ul { margin: 0.15rem 0 0.25rem 1.1rem; padding: 0; }
.modelblok-tekst li { margin: 0.1rem 0; }
.modelblok-tekst b { color: var(--accent-donker); }
.ps-popup details.modelblok { margin: 0.6rem 0 0; }
.ps-popup .modelblok-hint { display: none; }
@media (prefers-reduced-motion: reduce) { details.modelblok > summary::before { transition: none; } }
@media print {
  .modelblok-hint { display: none; }
  details.modelblok > summary::before { display: none; }
}

/* ---------- leerroute (sessie 8): slotjes, voortgangsblok, slotpagina, melding na een goed werkblad ---------- */
.slot-icoon { display: inline-block; width: 0.95em; height: 0.95em; vertical-align: -0.12em; line-height: 0; }
.slot-icoon svg { width: 100%; height: 100%; }
.hoofdmenu > a.dicht, .uitklap a.dicht { color: var(--tekst-zacht); }
.uitklap a.dicht .nr { opacity: 0.6; }
.slot-regel { display: block; font-size: 0.78rem; font-weight: 600; color: #6b5a2a; }
.route-blok { background: var(--vlak); border: 1px solid var(--rand); border-radius: var(--radius); padding: 14px 18px; margin: 0 0 18px; box-shadow: var(--schaduw); }
.route-blok h2 { margin: 0 0 4px; font-size: 1.15rem; }
.route-zin { margin: 0 0 10px; color: var(--tekst-zacht); font-size: 0.95rem; }
.route-welkom { margin: 0 0 12px; }
.route-welkom p { margin: 0 0 8px; }
.route { display: flex; margin: 0 0 12px; padding: 0; list-style: none; }
.route li { flex: 1 1 0; position: relative; text-align: center; font-size: 0.8rem; padding: 0 2px; min-width: 0; }
.route li::before { content: ""; position: absolute; top: 15px; left: -50%; width: 100%; height: 3px; background: var(--rand); }
.route li:first-child::before { display: none; }
.route li.af::before, .route li.nu::before { background: var(--goed); }
.route .stip { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; border: 3px solid var(--rand); background: var(--vlak); font-weight: 700; font-size: 0.85rem; color: var(--tekst-zacht); }
.route li.af .stip { background: var(--goed); border-color: var(--goed); color: #fff; }
.route li.nu .stip { border-color: var(--accent); color: var(--accent-donker); box-shadow: 0 0 0 4px var(--accent-vlak); }
.route .route-tekst { display: block; margin-top: 4px; line-height: 1.2; }
.route .route-tekst b { display: block; }
.route li.dicht .route-tekst { color: var(--tekst-zacht); }
.code-vak .hint { margin: 4px 0; }
.code-rij { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; border-top: 1px solid var(--rand); padding-top: 10px; font-size: 0.92rem; }
.code-rij label { font-weight: 700; }
.code-invoer { font: 700 1rem ui-monospace, Consolas, monospace; letter-spacing: 0.1em; width: 8.5em; padding: 4px 8px; border: 1px solid #8a949e; border-radius: 6px; }
.code-status { display: inline-block; padding: 3px 10px; border-radius: 999px; font-weight: 600; font-size: 0.85rem; }
.code-status.ok { background: var(--goed-vlak); color: #145c37; }
.code-status.wacht { background: var(--let-op-vlak); color: #7a5410; }
.code-status.niet { background: var(--achtergrond); color: var(--tekst-zacht); }
.linkknop { background: none; border: 0; color: var(--accent-donker); text-decoration: underline; padding: 0; font: inherit; cursor: pointer; }
.dash-kaart.kaart-dicht { background: var(--achtergrond); border-style: dashed; box-shadow: none; }
.dash-kaart.kaart-dicht h3, .dash-kaart.kaart-dicht .nummer { color: var(--tekst-zacht); }
.kaart-slot { display: flex; gap: 8px; align-items: flex-start; background: var(--let-op-vlak); border-radius: 8px; padding: 8px 10px; font-size: 0.88rem; color: #5c4a14; margin-top: 8px; text-align: left; }
.kaart-slot .slot-icoon { width: 1.2em; height: 1.2em; flex: none; margin-top: 2px; }
.slotpagina { max-width: 760px; margin: 28px auto; background: var(--vlak); border: 1px solid var(--rand); border-radius: var(--radius); padding: 26px 30px; box-shadow: var(--schaduw); }
.slotpagina .groot-slot { width: 64px; height: 64px; border-radius: 50%; background: var(--let-op-vlak); display: flex; align-items: center; justify-content: center; color: #8a6510; margin-bottom: 10px; }
.slotpagina .groot-slot .slot-icoon { width: 34px; height: 34px; }
.slotpagina h1 { margin: 0 0 8px; font-size: 1.6rem; }
.slotpagina .stappen-klein { margin: 12px 0; padding-left: 1.4em; }
.slotpagina .slot-code { margin-top: 14px; }
.melding-groot { border: 2px solid var(--goed); background: #eaf7ef; border-radius: 12px; padding: 16px 20px; margin: 0 0 14px; }
.melding-groot h3 { margin: 0 0 6px; color: #145c37; font-size: 1.25rem; }
.melding-groot ul { margin: 6px 0 10px; }
.melding-groot .doorgegeven { font-size: 0.9rem; margin: 10px 0 0; }
.wb-stappen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 8px 0 14px; }
.wb-stappen > div { background: var(--vlak); border: 1px solid var(--rand); border-radius: 10px; padding: 8px 12px; font-size: 0.9rem; }
.wb-stappen h4 { margin: 0 0 4px; font-size: 0.98rem; }
.wb-stappen p { margin: 0 0 6px; }
.wb-begrippen { margin: 0; padding-left: 1.1em; }
@media (max-width: 900px) { .wb-stappen { grid-template-columns: 1fr; } .route li { font-size: 0.7rem; } }
@media print { .route-blok, .slot-code, .code-vak { display: none; } }
.docent-tabel td.vg-goed { background: var(--goed-vlak); }
.docent-tabel td.vg-code { background: var(--let-op-vlak); }
.docent-tabel tfoot th, .docent-tabel tfoot td { font-weight: 700; background: var(--achtergrond); }

/* ---------- Sessie 9: het spel "Bouw het heelal" (periode-b/spel.html, js/bouw-het-heelal.js) ---------- */
main.spel-main { max-width: none; padding: 0; }
.spel-balk { display: flex; align-items: center; gap: 0.6rem 1.2rem; flex-wrap: wrap; padding: 0.35rem 1rem; background: #0d1230; color: #e8ecff; min-height: 46px; }
.spel-titel { font-size: 1.15rem; margin: 0 auto 0 0; color: #fff; }
.spel-modus { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; border-radius: 999px; padding: 0.12rem 0.55rem; vertical-align: middle; background: #2e3a7a; color: #fff; margin-left: 0.3rem; }
.spel-modus.storm { background: #ffd84a; color: #241c00; }
.spel-balk .knop[hidden] { display: none; }
/* Sessie 10, proefje G2: de knop Supernova (verschijnt pas met ijzer in je veld) */
.spel-balk .knop.spel-nova { background: linear-gradient(135deg, #ffd84a, #ff7a45); color: #2a1300; border-color: #ffb347; font-weight: 800; box-shadow: 0 0 0 0 rgba(255,180,70,0.7); animation: spel-nova-gloed 1.6s ease-in-out infinite; }
.spel-balk .knop.spel-nova:hover { filter: brightness(1.08); }
.spel-balk .knop.spel-nova:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
@keyframes spel-nova-gloed { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,180,70,0.7); } 50% { box-shadow: 0 0 14px 4px rgba(255,150,60,0.75); } }
@media (prefers-reduced-motion: reduce) { .spel-balk .knop.spel-nova { animation: none; box-shadow: 0 0 10px 3px rgba(255,150,60,0.6); } }
.spel-hulp { position: relative; font-size: 0.92rem; }
.spel-hulp summary { cursor: pointer; color: #fff; padding: 0.2rem 0.4rem; border-radius: 6px; }
.spel-hulp summary:focus-visible { outline: 3px solid #ffd84a; outline-offset: 2px; }
.spel-hulp ul { position: absolute; right: 0; top: 2rem; z-index: 20; width: 27rem; margin: 0; padding: 0.7rem 0.9rem 0.7rem 1.8rem; background: #fff; color: var(--tekst); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.35); }
.spel-hulp li { margin: 0.25rem 0; }
.spel-wrap { display: flex; align-items: stretch; background: #070b1a; }
.spel-veld { flex: 1; position: relative; min-width: 0; line-height: 0; }
#spel-canvas { display: block; width: 100%; touch-action: none; outline: none; }
#spel-canvas:focus-visible { box-shadow: inset 0 0 0 3px #ffd84a; }
.spel-laag { position: absolute; inset: 0; pointer-events: none; line-height: 1.4; }
.spel-laag > * { pointer-events: auto; }
.spel-laag [hidden], .spel-paneel[hidden] { display: none !important; }

/* paneel rechts: verzameling, doelen, record (Ontdekken) of hoe vol het veld is (Sterrenstorm) */
.spel-paneel { width: 344px; flex: none; background: #0d1230; color: #e8ecff; padding: 10px 10px 12px; box-sizing: border-box; border-left: 1px solid rgba(255,255,255,0.12); font-size: 0.88rem; line-height: 1.35; overflow-y: auto; }
.spel-paneel h2 { font-size: 0.95rem; margin: 4px 0 7px; color: #fff; display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.spel-paneel h2 span { font-weight: 500; font-size: 0.8rem; color: #c9d1f5; }
.spel-ps { display: grid; grid-template-columns: repeat(18, 17px); grid-auto-rows: 19px; gap: 1px; margin-bottom: 4px; }
.spel-cel { border-radius: 3px; font: 700 9.5px/1 system-ui, "Segoe UI", Arial, sans-serif; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.3); background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); box-sizing: border-box; padding: 0; }
.spel-cel.gevonden { color: #1b1f2a; border-color: rgba(0,0,0,0.25); cursor: pointer; }
.spel-cel.gevonden.soort-metaal { background: var(--ps-metaal); }
.spel-cel.gevonden.soort-niet-metaal { background: var(--ps-nietmetaal); }
.spel-cel.gevonden.soort-metalloide { background: var(--ps-metalloide); }
.spel-cel.gevonden:hover { outline: 2px solid #fff; }
.spel-cel.gevonden:focus-visible { outline: 3px solid #ffd84a; outline-offset: 1px; position: relative; z-index: 1; }
.spel-ps-hint { font-size: 0.75rem; color: #9aa4d6; margin: 0 0 12px; min-height: 1em; }
.spel-doelen { list-style: none; margin: 0 0 12px; padding: 0; }
.spel-doelen li { display: flex; gap: 7px; padding: 2px 0; color: #c9d1f5; }
.spel-doelen li .ster { color: rgba(255,255,255,0.3); flex: none; }
.spel-doelen li.af { color: #fff; }
.spel-doelen li.af .ster { color: #ffd84a; }
.spel-doelen li.kop { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: #9aa4d6; padding-top: 6px; }
.spel-record { background: rgba(255,255,255,0.06); border-radius: 10px; padding: 7px 10px; margin-bottom: 12px; }
.spel-record b { color: #fff; }
.spel-vol { margin: 4px 0 12px; }
.spel-vol b { color: #fff; }
.spel-vol-balk { height: 12px; border-radius: 999px; background: rgba(255,255,255,0.1); overflow: hidden; margin-top: 5px; }
.spel-vol-balk i { display: block; height: 100%; background: linear-gradient(90deg, #ffd84a, #ff7a45); }

/* startscherm, pauze en einde van Sterrenstorm */
.spel-scherm { position: absolute; inset: 0; }
.spel-sluier { position: absolute; inset: 0; background: rgba(5,8,20,0.55); }
.spel-kaartvlak { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 580px; max-width: calc(100% - 32px); background: rgba(13,18,48,0.96); border: 1px solid rgba(255,255,255,0.18); border-radius: 18px; padding: 24px 30px 20px; color: #e8ecff; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,0.55); box-sizing: border-box; }
.spel-kaartvlak.smal { width: 360px; }
.spel-kaartvlak h2 { font-size: 2.1rem; margin: 0 0 4px; color: #fff; }
.spel-kaartvlak p { margin: 0.3rem 0; }
.spel-standen { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 18px 0 14px; }
.spel-stand { background: #1a2150; border: 2px solid rgba(255,255,255,0.18); border-radius: 14px; padding: 14px 16px; text-align: left; color: #c9d1f5; font: inherit; font-size: 0.92rem; line-height: 1.4; cursor: pointer; }
.spel-stand b { display: block; font-size: 1.3rem; color: #fff; margin-bottom: 4px; }
.spel-stand.storm b { color: #ffd84a; }
.spel-stand:hover { border-color: rgba(255,255,255,0.45); }
.spel-stand:focus-visible { outline: 3px solid #ffd84a; outline-offset: 2px; }
.spel-onder { display: flex; justify-content: center; gap: 6px 18px; font-size: 0.86rem; color: #c9d1f5; flex-wrap: wrap; }
.spel-onder b { color: #fff; }
.spel-i { position: absolute; right: 14px; top: 14px; width: 32px; height: 32px; border-radius: 50%; border: 2px solid #c9d1f5; background: transparent; color: #fff; font: italic 700 17px Georgia, "Times New Roman", serif; cursor: pointer; }
.spel-i[aria-expanded="true"] { background: #fff; color: #0d1230; border-color: #fff; }
.spel-i:focus-visible, .spel-ipop .sluit:focus-visible, .spel-kaart-sluit:focus-visible { outline: 3px solid #ffd84a; outline-offset: 2px; }
.spel-ipop { position: absolute; left: calc(50% + 300px); top: 50%; transform: translateY(-50%); width: 330px; background: #fff; color: var(--tekst); border-radius: 14px; padding: 14px 16px; text-align: left; font-size: 0.9rem; line-height: 1.45; box-shadow: 0 12px 40px rgba(0,0,0,0.5); box-sizing: border-box; }
.spel-ipop h3 { margin: 0 24px 6px 0; font-size: 1.02rem; color: var(--accent-donker); }
.spel-ipop p { margin: 0.45rem 0; }
.spel-ipop .sluit { position: absolute; right: 8px; top: 6px; border: 0; background: transparent; font-size: 1.3rem; line-height: 1; color: var(--tekst-zacht); cursor: pointer; }
@media (max-width: 1250px) { .spel-ipop { left: 50%; top: auto; bottom: 12px; transform: translateX(-50%); } }
.spel-knoppen { display: flex; justify-content: center; gap: 10px; margin-top: 14px; }
.spel-uitslag { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0 6px; }
.spel-uitslag div { background: #1a2150; border-radius: 12px; padding: 10px; }
.spel-uitslag b { display: block; font-size: 1.7rem; color: #fff; }
.spel-nieuwrecord { display: inline-block; background: #ffd84a; color: #241c00; font-weight: 800; border-radius: 999px; padding: 2px 12px; font-size: 0.85rem; margin-top: 6px; }

/* het kaartje (elementkaart van sessie 4) en de berichten */
.spel-kaartwrap { position: absolute; right: 22px; top: 70px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.spel-kaart-kop { color: #ffd84a; font-weight: 800; font-size: 1.15rem; text-shadow: 0 2px 8px #000; min-height: 0.5em; }
.proefkaart.ab-kaart.spel-kaart { width: 12.5rem; aspect-ratio: auto; box-shadow: 0 12px 40px rgba(0,0,0,0.6); }
.spel-kaartwrap.nieuw .spel-kaart { box-shadow: 0 0 0 4px rgba(255,216,74,0.6), 0 12px 40px rgba(0,0,0,0.6); }
.spel-kaartwrap.nieuw .ab-sym { background: rgba(255,216,74,0.35); }
.spel-schil { font-size: 0.78rem; color: var(--tekst-zacht); margin: 2px 0 4px; }
.spel-iso { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; margin: 2px 0; }
.spel-iso span { font-size: 0.72rem; border: 1px dashed var(--rand); border-radius: 999px; padding: 0 6px; color: var(--tekst-zacht); }
.spel-iso span.ja { border-style: solid; border-color: var(--goed); color: var(--goed); font-weight: 700; }
.spel-niet { font-size: 0.68rem; color: #8a6a00; margin-top: 3px; }
.spel-klein { font-size: 0.78rem; color: #c9d1f5; text-shadow: 0 1px 4px #000; }
.spel-kaart-sluit { position: absolute; right: -6px; top: 22px; width: 28px; height: 28px; border-radius: 50%; border: 0; background: #fff; color: #0d1230; font-size: 1.1rem; line-height: 1; box-shadow: 0 2px 8px rgba(0,0,0,0.4); cursor: pointer; }
.spel-toast { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); background: #ffd84a; color: #241c00; border-radius: 999px; padding: 8px 18px; font-weight: 700; box-shadow: 0 8px 24px rgba(0,0,0,0.45); white-space: nowrap; }
.spel-hint { position: absolute; left: 14px; bottom: 14px; background: rgba(13,18,48,0.92); color: #fff; border: 1px solid rgba(255,255,255,0.2); border-radius: 10px; padding: 8px 12px; font-size: 0.9rem; max-width: 520px; }
.spel-hint b { color: #ffd84a; }
.spel-hint span { color: #c9d1f5; }

/* de brede tegel op de startpagina van Periode B (start.js: breedTegels) */
.spel-tegel { position: relative; display: flex; align-items: center; gap: 18px; border-radius: 18px; padding: 16px 22px; margin-top: 14px; color: #e8ecff; background: radial-gradient(circle at 12% 30%, rgba(120,90,220,0.45), transparent 45%), radial-gradient(circle at 85% 70%, rgba(40,140,200,0.35), transparent 50%), #0d1230; box-shadow: 0 4px 14px rgba(16,24,40,0.12); overflow: hidden; }
.spel-tegel::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(1px 1px at 20% 30%, #fff, transparent), radial-gradient(1px 1px at 70% 20%, #fff, transparent), radial-gradient(1.5px 1.5px at 45% 75%, #fff, transparent), radial-gradient(1px 1px at 88% 40%, #fff, transparent), radial-gradient(1px 1px at 60% 55%, #fff, transparent), radial-gradient(1px 1px at 30% 85%, #fff, transparent); opacity: 0.7; }
.spel-tegel > * { position: relative; }
.spel-tegel-icoon { width: 64px; height: 64px; flex: none; }
.spel-tegel-icoon svg { width: 100%; height: 100%; }
.spel-tegel-icoon .st-baan { fill: none; stroke: #9cb6ff; stroke-width: 1.5; }
.spel-tegel-icoon .st-p { fill: var(--ps-proton); }
.spel-tegel-icoon .st-n { fill: var(--ps-neutron); }
.spel-tegel-icoon .st-e { fill: var(--ps-elektron); stroke: #fff; stroke-width: 0.8; }
.spel-tegel-icoon .st-ster { fill: #fff; }
.spel-tegel-icoon .st-ster.geel { fill: #ffd84a; }
.spel-tegel h3 { margin: 0 0 2px; font-size: 1.2rem; }
.spel-tegel h3 a { color: #fff; text-decoration: none; }
.spel-tegel .tegel-link::after { content: ""; position: absolute; inset: 0; border-radius: 18px; }
.spel-tegel:has(.tegel-link:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.spel-tegel .tegel-link:focus-visible { outline: none; }
.spel-tegel p { margin: 0; color: #c9d1f5; }
.spel-tegel .spel-tegel-stand { font-size: 0.85rem; color: #ffd84a; margin-top: 3px; }
.spel-tegel .kaart-slot { margin: 0 0 0 auto; flex: none; }
.spel-tegel > .knop { margin-left: auto; flex: none; pointer-events: none; }
@media (max-width: 900px) { .spel-tegel { flex-wrap: wrap; } }
@media print { .spel-tegel { display: none; } }

/* ---------- Sessie 10 (O1): kleine schermen, tot 853 × 480 (een laptop van 1280 × 720 met 150 % schaal) ----------
   Smaller dan 1200 px: de losse knoppen gaan in het uitklapmenu "Meer" (app.js), zodat de kopbalk op één regel blijft. */
.menu-meer { display: none; }
.uitklap-meer { width: 320px; }
.uitklap .nr .icoon { width: 26px; height: 26px; border-radius: 0; background: none; color: inherit; }
.uitklap .nr .icoon svg { width: 24px; height: 24px; }
.uitklap a[aria-current="page"] .nr .icoon { color: #fff; }
@media (max-width: 1199px) {
  .hoofdmenu > a.los { display: none; }
  .menu-meer { display: block; }
  .kop-binnen { min-height: 52px; padding: 4px 14px; gap: 6px 10px; flex-wrap: nowrap; }
  .hoofdmenu { flex-wrap: nowrap; }
  .kop-terug { padding: 3px 9px; }
  .site-naam { font-size: 16.5px; }
  .weergave-knop { padding: 5px 10px; }
}
@media (max-width: 760px) { .kop-binnen { flex-wrap: wrap; } }
/* het spel: een lagere balk, een smaller paneel, en kaarten die passen of scrollen */
.spel-kaartvlak { max-height: calc(100% - 16px); overflow-y: auto; }
@media (max-height: 600px) {
  .spel-balk { min-height: 40px; padding: 2px 14px; }
  .spel-titel { font-size: 1.05rem; }
  .spel-kaartvlak { padding: 14px 22px 12px; }
  .spel-kaartvlak h2 { font-size: 1.65rem; }
  .spel-standen { margin: 10px 0 8px; gap: 10px; }
  .spel-stand { padding: 10px 14px; }
  .spel-kaartwrap { top: 58px; }
}
@media (max-width: 999px) {
  .spel-paneel { width: 252px; padding: 8px 8px 10px; font-size: 0.8rem; }
  .spel-ps { grid-template-columns: repeat(18, 12px); grid-auto-rows: 14px; }
  .spel-cel { font-size: 7px; }
}
/* N23: het kruisje van het kaartje staat niet meer over "massagetal" */
.spel-kaart-sluit { right: -14px; top: 10px; }

/* ---------- Sessie 10 (O3): ringetjes op het paragraafoverzicht (paragraaf.js) ---------- */
.kaart-par.met-ringen { position: relative; padding-top: 2.4rem; }
.status-ringen { position: absolute; top: 10px; right: 10px; display: flex; gap: 6px; }
.status-ring svg, .ringen-uitleg svg { display: block; width: 26px; height: 26px; }
.ringen-uitleg { display: flex; flex-wrap: wrap; gap: 6px 20px; justify-content: center; font-size: 0.9rem; color: var(--tekst-zacht); margin: -0.3rem 0 0.8rem; }
.ringen-uitleg span { display: inline-flex; align-items: center; gap: 6px; }
.ringen-uitleg svg { width: 20px; height: 20px; }
.ring-aan { fill: var(--goed); stroke: var(--goed); stroke-width: 2.5; }
.ring-uit { fill: none; stroke: #b9bfc8; stroke-width: 2.5; }
.ring-vink-aan, .ring-vink-uit, .ring-vink-vol { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ring-vink-aan { stroke: #fff; }
.ring-vink-uit { stroke: #b9bfc8; }
.ring-vink-vol { stroke: var(--goed); }
.ring-baan { fill: none; stroke: #dfe3e8; stroke-width: 4; }
.ring-vol { fill: none; stroke: var(--goed); stroke-width: 4; stroke-linecap: round; }
.kaart-par.met-ringen .hoger-label { margin-right: 66px; }
@media print { .status-ringen svg circle.ring-baan { stroke: #999; } }

/* ---------- Sessie 10 (O2, O5): startpagina met welkom, naam, "Verder waar je was" en het spel als doel (start.js) ---------- */
.band.band-klein { padding: 1rem 1.5rem 3.6rem; }
.band.band-klein .band-tekening svg { height: 100px; }
.band-welkom { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.band-welkom h1 { margin: 0.3rem 0 0.1rem; font-size: 2rem; }
.band-welkom h1:focus { outline: none; }
.band .band-onder { font-size: 1.05rem; }
.naam-potlood { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.6); background: rgba(255,255,255,0.12); color: #fff; font-size: 16px; line-height: 1; cursor: pointer; display: inline-grid; place-items: center; }
.naam-potlood:hover { background: rgba(255,255,255,0.25); }
.band .naam-potlood:focus-visible, .band .naam-wijzig input:focus-visible, .band .naam-wijzig .knop:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.naam-wijzig { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0.5rem 0 0.3rem; }
.naam-wijzig input { font: inherit; font-size: 1.05rem; padding: 0.35rem 0.6rem; border-radius: 10px; border: 1px solid rgba(255,255,255,0.7); width: 13rem; }
.band .naam-wijzig .knop.licht { background: rgba(255,255,255,0.15); color: #fff; border-color: rgba(255,255,255,0.7); }
.band .naam-wijzig .knop:not(.licht) { background: #fff; color: var(--accent-donker); border-color: #fff; }
.naam-kaart { max-width: 640px; margin: 14px auto 0; text-align: center; }
.naam-kaart h2 { margin-top: 0.2em; }
.naam-rij { display: flex; gap: 10px; justify-content: center; align-items: center; flex-wrap: wrap; margin: 0.4rem 0; }
.naam-rij input { font: inherit; padding: 0.45rem 0.7rem; border: 1px solid var(--rand); border-radius: 10px; width: 14rem; }
.naam-klein { font-size: 0.88rem; color: var(--tekst-zacht); max-width: 52ch; margin: 0.6rem auto 0.2rem; }
.start-boven { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; align-items: stretch; margin-bottom: 16px; }
.start-boven.een { grid-template-columns: 1fr; }
.verder-blok { background: var(--vlak); border-radius: var(--radius); box-shadow: var(--schaduw); padding: 16px 20px; display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; align-items: center; }
.verder-blok .icoon { grid-row: span 3; width: 56px; height: 56px; }
.verder-blok .icoon svg { width: 34px; height: 34px; }
.verder-blok h2 { margin: 0; font-size: 1.02rem; color: var(--tekst-zacht); font-weight: 600; }
.verder-waar { font-size: 1.2rem; font-weight: 700; line-height: 1.3; }
.verder-waar small { display: block; font-size: 0.95rem; font-weight: 400; color: var(--tekst-zacht); }
.verder-knoppen { display: flex; gap: 8px 14px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.spel-tegel.spel-boven { margin-top: 0; flex-direction: column; align-items: flex-start; justify-content: center; gap: 8px; padding: 14px 18px; }
.spel-boven-rij { display: flex; align-items: center; gap: 12px; }
.spel-boven .spel-tegel-icoon { width: 56px; height: 56px; }
.spel-boven h3 { font-size: 1.12rem; }
.spel-boven > .knop { margin-left: 0; align-self: flex-start; }
.spel-bolletjes { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.spel-bolletjes i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.45); display: inline-block; box-sizing: border-box; }
.spel-bolletjes i.af { background: #ffd84a; border-color: #ffd84a; }
.spel-nog { font-weight: 800; color: #ffd84a; margin-left: 4px; }
@media (max-width: 900px) { .start-boven { grid-template-columns: 1fr; } }
@media print { .start-boven, .naam-kaart, .naam-potlood { display: none; } }

/* ---------- Sessie 10 (O4): elke paragraaf een eigen kleur ----------
   Alleen op de rand van de pagina (lijn onder de kopbalk, het nummer, het gekozen tabblad, de kopjes, de bovenrand van de
   kaarten, het nummervakje in het menu, het icoon op de startpagina); nooit in een figuur. Knoppen houden de niveaukleur.
   Contrast op wit: petrol 5,4, oker 5,5, staalgrijs 6,5, framboos 6,2 (alle vier minstens 4,5 : 1). */
:root {
  --par1: #0e7490; --par1-vlak: #e0f2f5;
  --par2: #8a6100; --par2-vlak: #fbf1d9;
  --par3: #52606d; --par3-vlak: #e9edf1;
  --par4: #b5245e; --par4-vlak: #fbe7ef;
}
body[data-paragraaf="p1"] { --par: var(--par1); --par-vlak: var(--par1-vlak); }
body[data-paragraaf="p2"] { --par: var(--par2); --par-vlak: var(--par2-vlak); }
body[data-paragraaf="p3"] { --par: var(--par3); --par-vlak: var(--par3-vlak); }
body[data-paragraaf="p4"] { --par: var(--par4); --par-vlak: var(--par4-vlak); }
body[data-paragraaf] .site-kop { border-bottom-color: var(--par, var(--accent)); }
body[data-paragraaf] .paragraaf-kop .nummer { color: var(--par, var(--accent)); }
body[data-paragraaf] .subnav a[aria-current="page"] { background: var(--par, var(--accent)); border-color: var(--par, var(--accent)); }
body[data-paragraaf] .subnav a:hover { border-color: var(--par, var(--accent)); }
body[data-paragraaf] section.deel > h2 { border-left-color: var(--par, var(--accent)); }
body[data-paragraaf^="p"] .hub-kaarten .kaart-par { border-top: 5px solid var(--par, var(--rand)); }
.uitklap a[data-par="p1"] .nr { background: var(--par1-vlak); color: var(--par1); }
.uitklap a[data-par="p2"] .nr { background: var(--par2-vlak); color: var(--par2); }
.uitklap a[data-par="p3"] .nr { background: var(--par3-vlak); color: var(--par3); }
.uitklap a[data-par="p4"] .nr { background: var(--par4-vlak); color: var(--par4); }
.uitklap a[data-par="p1"][aria-current="page"] .nr { background: var(--par1); color: #fff; }
.uitklap a[data-par="p2"][aria-current="page"] .nr { background: var(--par2); color: #fff; }
.uitklap a[data-par="p3"][aria-current="page"] .nr { background: var(--par3); color: #fff; }
.uitklap a[data-par="p4"][aria-current="page"] .nr { background: var(--par4); color: #fff; }
.dash-kaart.par-p1 .icoon { background: var(--par1); }
.dash-kaart.par-p2 .icoon { background: var(--par2); }
.dash-kaart.par-p3 .icoon { background: var(--par3); }
.dash-kaart.par-p4 .icoon { background: var(--par4); }

/* ---------- Sessie 10 (G1 tot en met G5): het spel ---------- */
.spel-modus.dag { background: linear-gradient(90deg, #ffd84a, #ffb347); color: #241c00; }
/* G3: de uitdaging van de dag op het startscherm */
.spel-dag { display: flex; align-items: center; gap: 12px; width: 100%; background: linear-gradient(90deg, #2a1f63, #1a2150); border: 2px solid #ffd84a; border-radius: 14px; padding: 9px 14px; color: #c9d1f5; font: inherit; font-size: 0.88rem; text-align: left; margin: -2px 0 12px; line-height: 1.35; cursor: pointer; }
.spel-dag:hover { border-color: #ffe9a6; }
.spel-dag:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.spel-dag-ster { font-size: 1.7rem; color: #ffd84a; flex: none; }
.spel-dag-tekst b { display: block; color: #ffd84a; font-size: 1.08rem; }
.spel-dag-record { margin-left: auto; text-align: right; font-size: 0.8rem; flex: none; }
.spel-dag-record b { display: block; font-size: 0.98rem; color: #fff; white-space: nowrap; }
@media (max-height: 600px) { .spel-dag { margin-bottom: 8px; padding: 6px 12px; } }
/* G4: het isotopenalbum */
.spel-tabs { display: flex; gap: 4px; margin: 0 0 6px; flex-wrap: wrap; }
.spel-tabs button { font: inherit; font-size: 0.76rem; padding: 2px 9px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.3); background: transparent; color: #c9d1f5; cursor: pointer; }
.spel-tabs button[aria-pressed="true"] { background: #fff; color: #0d1230; font-weight: 700; border-color: #fff; }
.spel-tabs button:focus-visible { outline: 3px solid #ffd84a; outline-offset: 1px; }
.spel-ps.album .spel-cel.gevonden { position: relative; }
.spel-ps.album .spel-cel.gevonden::after { content: ""; position: absolute; left: 2px; right: 2px; bottom: 1px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, #1b7f4b var(--iso, 0%), rgba(0,0,0,0.25) var(--iso, 0%)); }
.spel-album { font-size: 0.74rem; color: var(--tekst-zacht); margin: 0 0 2px; }
/* G5: bestellingen (linksboven) en hulpjes (rechtsonder) */
.spel-bestellingen { position: absolute; left: 12px; top: 62px; display: flex; flex-direction: column; gap: 8px; pointer-events: none !important; }
.spel-bestel { width: 240px; background: rgba(13,18,48,0.9); border: 1px solid rgba(255,216,74,0.55); border-radius: 12px; padding: 8px 11px; color: #e8ecff; font-size: 0.82rem; line-height: 1.35; box-shadow: 0 8px 24px rgba(0,0,0,0.4); }
.spel-bestel h3 { margin: 0 0 2px; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: #ffd84a; }
.spel-bestel-opdracht { font-weight: 700; color: #fff; font-size: 0.95rem; }
.spel-bestel-stand { display: flex; gap: 5px; margin: 4px 0; }
.spel-bestel-stand i { width: 13px; height: 13px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.4); box-sizing: border-box; }
.spel-bestel-stand i.af { background: #7dff9a; border-color: #7dff9a; }
.spel-bestel-beloning { color: #c9d1f5; }
.spel-bestel-beloning b { color: #ffd84a; }
.spel-hulpjes { position: absolute; right: 12px; bottom: 12px; display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; max-width: 60%; }
.spel-hulpje { font: inherit; font-size: 0.85rem; font-weight: 700; background: rgba(255,216,74,0.18); border: 1px solid #ffd84a; color: #ffe9a6; border-radius: 999px; padding: 5px 12px; cursor: pointer; }
.spel-hulpje:hover { background: rgba(255,216,74,0.3); }
.spel-hulpje:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.spel-hulp-aan { font-size: 0.82rem; font-weight: 700; color: #7dff9a; background: rgba(13,18,48,0.85); border: 1px solid #7dff9a; border-radius: 999px; padding: 5px 12px; }
@media (max-width: 999px) { .spel-bestel { width: 200px; font-size: 0.76rem; } }
/* O1: op een smal scherm (zeker in de leesmodus) staan de paragraafkaarten van de startpagina twee aan twee */
@media (max-width: 999px) { .dash-kaarten { grid-template-columns: repeat(2, minmax(0, 1fr)); } .status-lijst dd { white-space: normal; } }
/* G8: grijze vakjes zijn klikbaar (zo kun je het maken) */
.spel-cel.nog { cursor: pointer; }
.spel-cel.nog:hover { outline: 1px dashed rgba(255,255,255,0.7); }
.spel-cel:focus-visible { outline: 3px solid #ffd84a; outline-offset: 1px; position: relative; z-index: 1; }
.spel-recept .ab-sym { opacity: 0.45; }
.spel-recept-kop { font-size: 0.8rem; font-weight: 700; margin: 6px 0 2px; text-align: left; }
.spel-recepten { text-align: left; font-size: 0.78rem; line-height: 1.35; margin: 0; padding-left: 1.1rem; }
.spel-recepten li { margin: 3px 0; }
/* G6: de fantasiestand */
.spel-modus.fantasie { background: linear-gradient(90deg, #d946ef, #ff6fae); color: #fff; }
.spel-stand.fantasie { width: 100%; margin: -2px 0 12px; background: linear-gradient(90deg, #4a1257, #2a1150); border-color: #e879f9; }
.spel-stand.fantasie b { color: #f5b8ff; }
.spel-stand[hidden] { display: none; }
.spel-ps.groot { grid-auto-rows: 17px; }
.spel-cel.gevonden.fantasie { box-shadow: inset 0 0 0 2px #d946ef; }
.spel-fantasie-uitleg { font-size: 0.74rem; color: #f0c6ff; margin: -2px 0 6px; }
.spel-fantasiekaart { box-shadow: 0 0 0 3px rgba(217,70,239,0.6), 0 12px 40px rgba(0,0,0,0.6) !important; }
@media (max-width: 999px) { .spel-ps.groot { grid-auto-rows: 13px; } }