/* ============================================
   Opmaak. Verwijst uitsluitend naar de variabelen uit brand.css —
   pas dáár de huisstijl aan, niet hier.
   ============================================ */

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-tekst);
  color: var(--inkt);
  background: var(--achtergrond);
  line-height: 1.55;
}

h1, h2, h3 { font-family: var(--font-kop); font-weight: var(--kop-gewicht); line-height: 1.25; }
a { color: var(--hoofdkleur); }

.wrap { max-width: var(--max-breedte); margin: 0 auto; padding: 0 20px 60px; }

/* ---------- navigatie ---------- */
.nav {
  background: var(--paneel);
  border-bottom: 1px solid var(--lijn);
  position: sticky; top: 0; z-index: 20;
}
.nav-inner {
  max-width: var(--max-breedte); margin: 0 auto; padding: 12px 20px;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.nav-merk { font-family: var(--font-kop); font-weight: var(--kop-gewicht); color: var(--hoofdkleur); text-decoration: none; font-size: 18px; }
.nav a:not(.nav-merk) { color: var(--grijs); text-decoration: none; font-size: 15px; }
/* .actief hoort buiten de hover-guard: de actieve pagina moet ook op een
   telefoon gemarkeerd staan. Alleen de hover zelf gaat erin. */
.nav a.actief { color: var(--hoofdkleur); }
@media (hover: hover) {
  .nav a:not(.nav-merk):hover { color: var(--hoofdkleur); }
}
.nav-rechts { margin-left: auto; }

/* ---------- koppen ---------- */
.kop { padding: 28px 0 18px; }
.kop h1 { margin: 0 0 6px; font-size: var(--kop-h1); }
.kop p { margin: 0; color: var(--grijs); }

/* Terwijl je een vraag beantwoordt is de paginakop 113 px aan ruimte die de
   vraag en de antwoorden nodig hebben — en de inleiding eronder ("Kies een
   onderwerp om te oefenen") klopt op dat moment niet eens meer: je hebt al
   gekozen. De titel blijft staan, want die zegt in welk onderwerp je zit; de
   rest krimpt weg. Scheelt ongeveer zeventig pixels per vraag. */
body.vraag-actief .kop { padding: 10px 0 8px; }
body.vraag-actief .kop h1 { font-size: 19px; margin: 0; }
body.vraag-actief .kop p { display: none; }

/* ---------- panelen en kaarten ---------- */
.paneel {
  background: var(--paneel); border: 1px solid var(--lijn);
  border-radius: var(--radius); padding: 20px; box-shadow: var(--schaduw);
  margin-bottom: 16px;
}
.kaarten { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.kaart {
  display: block; text-decoration: none; color: inherit;
  background: var(--paneel); border: 1px solid var(--lijn);
  border-radius: var(--radius); padding: 18px; box-shadow: var(--schaduw);
  transition: border-color .15s, transform .15s;
}
@media (hover: hover) {
  .kaart:hover { border-color: var(--hoofdkleur); transform: translateY(-2px); }
}
.kaart h3 { margin: 0 0 4px; font-size: 17px; }
.kaart p { margin: 0; color: var(--grijs); font-size: 14px; }
.kaart-icoon { font-size: 26px; display: block; margin-bottom: 8px; }

/* ---------- Portaalkaarten (de voordeur) ----------
   Een variant op .kaart, alleen voor het schap op examenflix.nl. Wat een
   generieke kaart niet heeft: een kop met een sfeerbeeld op een schijf in de
   heldenkleur, een vak-icoon, een regel met wat er in de trainer zit, een
   pijlknop, en een badge voor wat nog niet open is.

   De taakverdeling tussen beeld en CSS is de kern (besluit 260): het beeld is
   alleen het voorwerp, vrijstaand op een transparante achtergrond. Alles wat
   kleur van het merk draagt — de schijf, de pijl — tekent de CSS, in tokens.
   Zo volgt de kaart een nieuwe heldenkleur en de donkere modus zonder dat er
   één beeld opnieuw hoeft, en weegt het beeld tientallen kB in plaats van een
   volle foto.

   Schijf en pijl staan bij élke trainer in de heldenkleur. Er is een
   domeinschaal die per kaart een andere tint had kunnen geven, maar op de
   voordeur moet de familie juist één ding lijken — variatie hoort bínnen een
   trainer. Het palet zegt het zelf: één heldenkleur, geen regenboog. */
body[data-page="voordeur"] .kaarten { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }

/* ---------- De hero van de voordeur ----------
   Eén beeld over de volle breedte met de belofte erop, zoals een streamingdienst
   zijn voorpagina opent. De donkere sluier erover is geen opsmuk maar de reden
   dat de kop leesbaar blijft: hij is uit tokens opgebouwd (color-mix over
   --inktzwart), schuift dus mee als het palet wijzigt, en houdt de tekst boven
   de AA-grens ook op de lichtste plek van de foto.

   De hero is in beide modi donker. Dat mag hier: hij draagt zijn eigen
   achtergrond en leent er geen van de pagina. */
.hero { position: relative; overflow: hidden; background: var(--achtergrond); }
.hero-beeld {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 72% center;
}
/* Twee verlopen over elkaar, allebei in de kleur van de pagina zelf
   (--achtergrond) en niet in --inktzwart: dat token wordt in het donkere
   register juist licht, en dan zou de sluier een witte waas over de foto zijn.

   Het eerste verloop laat het beeld onderaan oplossen in exact de kleur van de
   pagina eronder — daarmee is de harde rand tussen foto en pagina weg in plaats
   van verzacht. Het tweede is de leesbaarheidssluier: donkerst links, waar de
   kop staat, en het lichtst rechts, waar het beeld zichtbaar mag blijven. */
.hero::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(to bottom,
      transparent 42%,
      color-mix(in srgb, var(--achtergrond) 70%, transparent) 78%,
      var(--achtergrond) 100%),
    linear-gradient(96deg,
      color-mix(in srgb, var(--achtergrond) 94%, transparent) 0%,
      color-mix(in srgb, var(--achtergrond) 80%, transparent) 46%,
      color-mix(in srgb, var(--achtergrond) 32%, transparent) 100%);
}
/* Alleen boven en onder: de zijmarge komt van .wrap, en een padding-shorthand
   zou die overschrijven — dan plakt de kop tegen de rand van het scherm. */
.hero-inhoud { position: relative; z-index: 1; padding-top: 62px; padding-bottom: 58px; }
/* Het merk groot boven de kop. De maat staat in BREEDTE en niet in hoogte:
   met een vaste hoogte plus max-width knijpt een smal scherm het beeld plat,
   want dan winnen allebei de regels en verdwijnt de verhouding. 540px komt
   overeen met 121px hoog, en daar is de tagline in het logo ~8px — de maat
   waarop gespatieerd kapitaal woorden wordt in plaats van een lijntje. */
.hero-merk {
  display: block;
  width: min(540px, 100%);
  height: auto;
  margin: 0 0 26px;
}
.hero-inhoud h1 {
  color: var(--white); font-size: clamp(30px, 4.6vw, 46px); line-height: 1.08;
  margin: 0 0 12px; max-width: 17ch;
}
.hero-inhoud p {
  color: color-mix(in srgb, var(--white) 84%, transparent);
  font-size: 17px; line-height: 1.5; margin: 0 0 24px; max-width: 54ch;
}
.hero-knop {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 22px; border-radius: var(--radius-s);
  background: var(--hoofdkleur); color: var(--white);
  font-family: var(--font-kop); font-weight: 800; font-size: 16px;
  text-decoration: none; border: 0;
}
@media (hover: hover) {
  .hero-knop:hover { background: var(--hoofdkleur-diep); }
}
/* Het zoekveld naast "Bekijk het aanbod" (besluit 648). Eén rij: het veld
   neemt de ruimte, de knop houdt zijn maat. Het veld is minstens een raakvlak
   hoog en schrijft op 16px, anders zoomt Safari op iOS in bij het tikken. Het
   vergrootglas en de wisknop liggen óp het veld, zodat de rij één vorm blijft.
   `scroll-margin-top` houdt veld en resultaten onder de plakkende balk als de
   pagina erheen schuift. */
.hero-zoekrij { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hero-zoek {
  position: relative; flex: 1 1 300px; max-width: 460px; margin: 0;
  scroll-margin-top: calc(var(--nav-hoogte) + 12px);
}
.hero-zoek input {
  width: 100%; box-sizing: border-box; min-height: var(--raakvlak);
  padding: 12px 46px 12px 44px;
  font-family: var(--font-body); font-size: var(--tekst-invoer);
  color: var(--inkt); background: var(--paneel);
  border: 2px solid var(--lijn); border-radius: var(--radius-s);
  -webkit-appearance: none; appearance: none;
}
.hero-zoek input::placeholder { color: var(--grijs); opacity: 1; }
.hero-zoek input:focus { outline: none; border-color: var(--hoofdkleur); }
.hero-zoek input:focus-visible { outline: 2px solid var(--hoofdkleur); outline-offset: 2px; }
/* De eigen wisknop vervangt die van de browser: die verschilt per browser en
   is op een telefoon te klein om te raken. */
.hero-zoek input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.hero-zoek-icoon {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  display: flex; color: var(--grijs); pointer-events: none;
}
.hero-zoek-icoon svg { width: 20px; height: 20px; }
.hero-zoek-wis {
  position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: var(--raakvlak); height: var(--raakvlak);
  color: var(--grijs); background: none; border: 0; cursor: pointer;
}
.hero-zoek-wis[hidden] { display: none; }
.hero-zoek-wis svg { width: 18px; height: 18px; }
.hero-zoek-wis:focus-visible { outline: 2px solid var(--hoofdkleur); outline-offset: -4px; border-radius: var(--radius-s); }
@media (hover: hover) {
  .hero-zoek-wis:hover { color: var(--inkt); }
}
/* De resultaten: een kop met het aantal, dan hetzelfde raster als in een
   schap — een treffer ziet eruit als de tegel die je al kent. */
.zoekresultaten { margin-bottom: 24px; scroll-margin-top: calc(var(--nav-hoogte) + 12px); }
.zoek-kop {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px;
  margin: 4px 0 16px; font-size: 19px; line-height: 1.25;
}
.zoek-leeg {
  padding: 18px; background: var(--paneel);
  border: 1px solid var(--lijn); border-radius: var(--radius);
}
.zoek-leeg p { margin: 0 0 14px; color: var(--grijs); }
.zoek-alles {
  min-height: var(--raakvlak); padding: 10px 18px; border-radius: var(--radius-s);
  background: var(--hoofdkleur); color: var(--white); border: 0; cursor: pointer;
  font-family: var(--font-kop); font-weight: 800; font-size: 15px;
}
.zoek-alles:focus-visible { outline: 2px solid var(--hoofdkleur); outline-offset: 2px; }
@media (hover: hover) {
  .zoek-alles:hover { background: var(--hoofdkleur-diep); }
}
@media (max-width: 700px) {
  /* Op een telefoon onder elkaar: het veld volle breedte, de knop eronder. */
  .hero-zoekrij { flex-direction: column; align-items: stretch; }
  .hero-zoek { flex: none; max-width: none; }
  .hero-zoekrij .hero-knop { justify-content: center; }
}
@media (max-width: 700px) {
  /* Ook hier geen shorthand: die zou de zijmarge van .wrap weer wegvagen. */
  .hero-inhoud { padding-top: 40px; padding-bottom: 36px; }
  /* Op een telefoon is de volle breedte al de grens; alleen de marge eronder
     mag krap. De tagline haalt hier ~5px, maar op een telefoonscherm zijn dat
     10 device-pixels en leest hij alsnog. */
  .hero-merk { margin-bottom: 20px; }
  .hero-beeld { object-position: 66% center; }
  .hero-inhoud p { font-size: 16px; }
}

/* Een schap per categorie van de examenkaart (besluit 273), dicht bij
   binnenkomst. `<details>` doet het open- en dichtklappen: de browser regelt
   dan toetsenbord, schermlezer en de knoprol, en het blijft werken als het
   JavaScript van de pagina uitvalt.

   Wat dicht is mag geen informatie kosten (besluit 181): de kop draagt de naam,
   het aantal trainers én de zin die op de examenkaart voor de klant staat. Je
   weet dus wat er in een schap zit zonder het te openen. */
.schap {
  margin-bottom: 12px; background: var(--paneel);
  border: 1px solid var(--lijn); border-radius: var(--radius);
  box-shadow: var(--schaduw);
}
.schap-kop {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: 3px 12px; padding: 16px 18px; cursor: pointer; list-style: none;
}
/* De standaardpijl van de browser weg; we tekenen onze eigen chevron. */
.schap-kop::-webkit-details-marker { display: none; }
.schap-titel { margin: 0; font-size: 19px; line-height: 1.25; }
.schap-aantal {
  font-size: 12px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
  color: var(--grijs); background: var(--vlak);
  padding: 4px 10px; border-radius: var(--pil); white-space: nowrap;
}
.schap-uitleg { grid-column: 2 / -1; margin: 0; color: var(--grijs); font-size: 14px; max-width: 70ch; }
.schap-chevron { display: flex; color: var(--hoofdkleur); transition: transform .15s; }
.schap-chevron svg { width: 20px; height: 20px; }
/* Alleen de eigen chevron draait: een open schap mag de chevrons van zijn
   (nog dichte) groepen niet meedraaien. */
.schap[open] > .schap-kop .schap-chevron { transform: rotate(90deg); }
.schap .kaarten { padding: 2px 18px 18px; }
/* Binnen een schap één uitklapblok per groep — Mavo, Niveau 4, Wft (besluiten
   460 en 466). Ook dicht bij binnenkomst, en ook hier kost dicht geen
   informatie: de kop draagt de naam, het aantal trainers en de klantzin van de
   groep. Een laag lager dan het schap, dus een lijn ertussen in plaats van een
   eigen kader. */
.schap-groepvak { border-top: 1px solid var(--lijn); margin: 0 18px; }
.schap-groepvak:last-child { margin-bottom: 8px; }
.schap-groep {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: 2px 10px; padding: 14px 0; min-height: 44px; cursor: pointer; list-style: none;
}
.schap-groep::-webkit-details-marker { display: none; }
.schap-groep-naam { margin: 0; font-family: var(--font-kop); font-size: 17px; font-weight: 800; line-height: 1.25; }
.schap-groep-uitleg { grid-column: 2 / -1; margin: 0; color: var(--grijs); font-size: 14px; }
.schap-groepvak[open] > .schap-groep .schap-chevron { transform: rotate(90deg); }
.schap-groepvak .kaarten { padding: 2px 0 18px; }
@media (hover: hover) {
  .schap-kop:hover .schap-titel, .schap-groep:hover .schap-groep-naam { color: var(--hoofdkleur); }
}
@media (prefers-reduced-motion: reduce) {
  .schap-chevron { transition: none; }
}
.trainer-kaart {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  padding: 0 20px 18px;
}
/* De schijf: half buiten de kaart, zodat hij als een vorm leest en niet als
   een knop. `overflow: hidden` op de kaart knipt hem af. */
.trainer-kaart::before {
  content: ''; position: absolute; top: -56px; right: -48px;
  width: 188px; height: 188px; border-radius: 50%;
  background: var(--hoofdkleur);
}
/* De kop reserveert de hoogte waar beeld en icoon staan. Het beeld hangt
   rechtsboven en is op hoogte begrensd, niet op breedte: een brede auto en een
   rechtopstaande passer krijgen zo dezelfde maat en dezelfde plek. */
.trainer-kop {
  height: 150px; display: flex; align-items: flex-end;
  padding-bottom: 16px;
}
.trainer-beeld {
  position: absolute; top: 14px; right: 12px; z-index: 1;
  display: flex; justify-content: flex-end;
  width: 72%; height: 136px; pointer-events: none;
}
.trainer-beeld img {
  display: block; width: auto; height: auto; max-width: 100%; max-height: 100%;
  align-self: center; object-fit: contain;
  transform-origin: 70% 60%; transition: transform .35s ease;
}
.trainer-icoon {
  position: relative; z-index: 2; flex: none;
  display: flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; border-radius: 50%;
  color: var(--paneel); background: var(--inkt);
  box-shadow: 0 0 0 4px var(--paneel);
}
.trainer-icoon svg { width: 26px; height: 26px; }
.trainer-kaart h3 { font-size: 19px; line-height: 1.25; margin-bottom: 5px; }
.trainer-kaart > p { margin-bottom: 16px; }

/* De voet: cijfers links, de pijlknop rechts. `margin-top: auto` duwt hem
   naar de onderkant, zodat vier kaarten naast elkaar hun voet op één lijn
   hebben ook als de ene naam twee regels kost en de andere één. */
.trainer-voet {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: auto; padding-top: 13px;
  border-top: 1px solid var(--lijn);
}
.trainer-pijl {
  flex: none; margin-left: auto;
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  color: var(--white); background: var(--hoofdkleur);
  transition: background .15s, transform .15s;
}
.trainer-pijl svg { width: 20px; height: 20px; }
@media (hover: hover) {
  .trainer-kaart:hover .trainer-pijl { background: var(--hoofdkleur-diep); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .trainer-kaart:hover .trainer-beeld img { transform: scale(1.05); }
  .trainer-kaart:hover .trainer-pijl { transform: translateX(2px); }
}

/* De cijferstrook: wat er in de trainer zit, in de taal van de deelnemer
   (een domein heet hier een onderwerp).

   Eerst stond dit als één regel met een middelpunt ertussen. Op een smalle
   kaart brak die regel af en begon de tweede regel met dat punt — dan is de
   scheiding geen scheiding meer maar rommel. Een kolom per cijfer breekt niet,
   en het getal krijgt bovendien het gewicht dat het verdient: dát is wat een
   bezoeker vergelijkt.

   `margin-top: auto` duwt de strook naar de onderkant van de kaart, zodat de
   cijfers van vier kaarten naast elkaar op één lijn staan ook als de ene naam
   twee regels kost en de andere één. */
.trainer-kaart .trainer-cijfers {
  display: grid; grid-auto-flow: column; justify-content: start; gap: 0 20px; margin: 0;
}
.trainer-kaart .trainer-cijfers span { display: flex; flex-direction: column; font-size: 12px; line-height: 1.35; }
.trainer-kaart .trainer-cijfers b { font-size: 17px; font-weight: 800; color: var(--inkt); font-variant-numeric: tabular-nums; }

/* Linksboven, want rechtsboven ligt de schijf: grijs op rood haalt de
   contrasteis niet. */
.trainer-badge {
  position: absolute; top: 14px; left: 20px; z-index: 2;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  padding: 4px 10px 4px 8px; border-radius: var(--pil);
  background: var(--paneel-grijs); color: var(--grijs);
}
.trainer-badge svg { width: 13px; height: 13px; }

/* Een trainer in aanbouw stond op opacity .65 over de hele kaart. Dat maakt
   grijze tekst op wit onleesbaar — precies de AA-eis die de huisstijl stelt.
   Nu dimt alleen wat kleur draagt — schijf, beeld, icoon, pijl — en blijven
   de woorden op volle sterkte. */
.trainer-kaart.is-verwacht { cursor: default; }
.trainer-kaart.is-verwacht::before { background: var(--lijn); }
.trainer-kaart.is-verwacht .trainer-beeld img { filter: grayscale(1); opacity: .6; }
.trainer-kaart.is-verwacht .trainer-icoon { background: var(--grijs); }
.trainer-kaart.is-verwacht .trainer-pijl { color: var(--grijs); background: var(--paneel-grijs); }
@media (hover: hover) {
  .trainer-kaart.is-verwacht:hover { border-color: var(--lijn); transform: none; }
  .trainer-kaart.is-verwacht:hover .trainer-pijl { background: var(--paneel-grijs); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .trainer-kaart.is-verwacht:hover .trainer-beeld img,
  .trainer-kaart.is-verwacht:hover .trainer-pijl { transform: none; }
}

/* ---------- De examenknop onder de hero (besluit 530) ----------
   Het examen is de kern van de trainer, dus het is de grootste knop op de
   pagina, in de vorm van de tegels: icoon in een cirkel, titel met een regel
   eronder, de pijl in een eigen cirkel. "Voorbereiding / theorie" staat
   eronder als kleinere, rustige knop (besluit 531): de eerste stap van de
   leerroute, visueel ondergeschikt. */
.hero-knoppen { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 18px; }
.hero-examen {
  display: flex; align-items: center;
  min-width: min(100%, 400px); padding: 10px 12px 10px 10px; gap: 13px;
  border-radius: var(--radius); text-decoration: none;
  background: var(--hoofdkleur); color: var(--white);
  box-shadow: var(--schaduw);
  transition: background .15s, transform .15s;
}
.hero-examen-icoon {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--white); color: var(--hoofdkleur-diep);
}
.hero-examen-icoon svg { width: 22px; height: 22px; }
.hero-examen-tekst { flex: 1; display: flex; flex-direction: column; line-height: 1.3; }
.hero-examen-tekst strong { font-family: var(--font-header); font-weight: 800; font-size: 17.5px; }
.hero-examen-tekst span { font-size: 13px; opacity: .92; }
.hero-examen-pijl {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--hoofdkleur-diep); color: var(--white);
  transition: transform .15s;
}
.hero-examen-pijl svg { width: 18px; height: 18px; }
@media (hover: hover) {
  .hero-examen:hover { background: var(--hoofdkleur-diep); color: var(--white); }
  .hero-examen:hover .hero-examen-pijl { background: var(--hoofdkleur); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .hero-examen:hover { transform: translateY(-2px); }
  .hero-examen:hover .hero-examen-pijl { transform: translateX(2px); }
}
.hero-voorbereiding {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: var(--raakvlak); padding: 6px 16px 6px 8px;
  border: 1px solid var(--lijn); border-radius: var(--radius);
  background: var(--paneel); color: var(--inkt);
  font-weight: 700; font-size: 15px; text-decoration: none;
  transition: border-color .15s, color .15s;
}
.hero-voorbereiding-icoon {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--inkt); color: var(--paneel);
}
.hero-voorbereiding-icoon svg { width: 17px; height: 17px; }
@media (hover: hover) {
  .hero-voorbereiding:hover { border-color: var(--hoofdkleur); color: var(--inkt); }
}
/* Het mini-proefexamen boven het examen (besluit 590): de rustige vorm van
   de voorbereidingsknop, met de icoonschijf in de hoofdkleur en een tweede
   regel. Met de betaalmuur wordt dit de volle rode knop. */
.hero-proef {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: var(--raakvlak); padding: 7px 16px 7px 8px;
  border: 1px solid var(--lijn); border-radius: var(--radius);
  background: var(--paneel); color: var(--inkt); text-decoration: none;
  transition: border-color .15s, color .15s;
}
.hero-proef-icoon {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--hoofdkleur); color: var(--white);
}
.hero-proef-icoon svg { width: 18px; height: 18px; }
.hero-proef-tekst { display: flex; flex-direction: column; line-height: 1.3; }
.hero-proef-tekst strong { font-weight: 700; font-size: 15px; }
.hero-proef-tekst span { font-size: 12.5px; color: var(--tekst-basis); }
@media (hover: hover) {
  .hero-proef:hover { border-color: var(--hoofdkleur); color: var(--inkt); }
}
@media (max-width: 600px) {
  .hero-examen { width: 100%; gap: 11px; }
  .hero-examen-icoon { width: 38px; height: 38px; }
  .hero-examen-icoon svg { width: 20px; height: 20px; }
  .hero-examen-tekst strong { font-size: 16px; }
  .hero-examen-tekst span { font-size: 12.5px; }
}

/* ---------- Starttegels van een trainer (besluiten 525–526) ----------
   Dezelfde kaart als op de voordeur — schijf, sfeerbeeld, icoon in een
   donkere cirkel, titel, voet met pijl — zonder uitleg. De titel zegt genoeg;
   wat de pagina inhoudt staat bovenaan die pagina. Eén vorm voor de familie:
   wie van de voordeur een trainer in stapt, herkent de tegels. Het beeld
   (kern/img/start-<naam>.png) is alleen het voorwerp, transparant; de schijf
   is CSS (besluit 260). `auto-fit`: drie of vier tegels vullen de rij. Op een
   telefoon twee naast elkaar, anders wordt het aanbod een lange stapel. */
.start-kaarten { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.start-kaart .trainer-kop { height: 134px; padding-bottom: 14px; }
.start-kaart .trainer-beeld { height: 116px; width: 74%; top: 12px; right: 10px; }
.start-kaart h3 { font-size: 19px; margin-bottom: 14px; }
.start-kaart .trainer-voet { min-height: 54px; }
.start-stand { font-size: 13px; line-height: 1.3; color: var(--grijs); }
@media (max-width: 600px) {
  .start-kaarten { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .start-kaart { padding: 0 14px 12px; }
  .start-kaart::before { top: -44px; right: -44px; width: 132px; height: 132px; }
  .start-kaart .trainer-kop { height: 104px; padding-bottom: 10px; }
  .start-kaart .trainer-beeld { height: 76px; width: 80%; top: 10px; right: 6px; }
  .start-kaart .trainer-icoon { width: 42px; height: 42px; }
  .start-kaart .trainer-icoon svg { width: 21px; height: 21px; }
  .start-kaart h3 { font-size: 15.5px; margin-bottom: 10px; }
  .start-kaart .trainer-voet { min-height: 48px; padding-top: 10px; }
  .start-kaart .trainer-pijl { width: 36px; height: 36px; }
  .start-kaart .trainer-pijl svg { width: 18px; height: 18px; }
  .start-stand { font-size: 12px; }
}

/* ---------- voortgangsbalk ---------- */
.balk { height: 6px; background: var(--lijn); border-radius: var(--pil); overflow: hidden; margin-top: 12px; }
.balk .vul { height: 100%; background: var(--hoofdkleur); transition: width .3s; }
.balk-tekst { font-size: 13px; color: var(--grijs); margin-top: 6px; }

/* ---------- knoppen ---------- */
.btn {
  font: inherit; font-weight: 600; cursor: pointer;
  border-radius: var(--radius-s); padding: 10px 18px;
  border: 1px solid transparent; background: var(--paneel); color: var(--inkt);
}
@media (hover: hover) {
  .btn:hover { filter: brightness(.97); }
}
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { background: var(--hoofdkleur); color: var(--white); }
@media (hover: hover) {
  .btn-primary:hover { background: var(--hoofdkleur-diep); }
}
.btn-ghost { background: transparent; border-color: var(--lijn); color: var(--inkt); }
.btn-warn { background: transparent; border-color: var(--waarschuwing); color: var(--waarschuwing); }
.btn-fout { background: transparent; border-color: var(--fout); color: var(--fout); }

/* ---------- topbalk met klok ---------- */
.topbalk {
  background: var(--paneel); border: 1px solid var(--lijn); border-radius: var(--radius);
  padding: 12px 16px; margin-bottom: 16px; box-shadow: var(--schaduw);
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.timer { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 19px; }
.timer.kritiek { color: var(--waarschuwing); }
.timer.afgelopen { color: var(--fout); }
.topbalk-acties { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- vraagkaart ---------- */
.vraag-kaart {
  background: var(--paneel); border: 1px solid var(--lijn);
  border-radius: var(--radius); padding: 22px; box-shadow: var(--schaduw);
}
.vraag-top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.vraag-nummer { font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--grijs); font-weight: 700; }
/* Een vraag draagt zijn regelovergangen: situatie en vraagzin, een opsomming,
   een papierinstructie ("Voer de volgende opdrachten uit:\n- …"). Die blijven
   staan, net als bij de uitwerking (besluit 569). pre-line, geen pre-wrap:
   spaties en inspringing vallen samen zoals altijd. */
.vraag-tekst { font-family: var(--font-kop); font-weight: var(--kop-gewicht); font-size: 21px; margin-bottom: 14px; white-space: pre-line; }
.vraag-instructie {
  background: var(--hoofdkleur-licht); border-radius: var(--radius-s);
  padding: 8px 12px; font-size: 14px; font-style: italic; margin-bottom: 12px;
}
/* Beeld bij een vraag — twee dingen die hier eerder misgingen.

   `width: 100%` blies een kleine afbeelding op tot de kaartbreedte: een
   verkeersbord van 138 px breed werd 1014 px breed en dus 2116 px hóóg, wazig
   én buiten beeld. `max-width` laat een afbeelding nooit groter worden dan hij
   is; alleen te brede beelden krimpen mee.

   En er stond geen hoogtegrens, waardoor het beeld de vraag en de antwoorden
   van het scherm duwde. De grens is bewust in `vh`: hoe groter het scherm, hoe
   meer beeld — maar altijd met de vraag en de eerste antwoorden ernaast in
   beeld. Wie meer detail wil, klikt het beeld groot (zie .beeld-groot). */
.vraag-beeld, .situatie-paneel { text-align: center; }
.vraag-beeld img, .situatie-paneel img {
  max-width: 100%;
  max-height: clamp(150px, 34vh, 420px);
  width: auto; height: auto;
  border-radius: var(--radius-s);
  display: inline-block; vertical-align: top;
  cursor: zoom-in;
}
.situatie-paneel img { max-height: clamp(120px, 26vh, 300px); }
.vraag-beeld { margin-bottom: 16px; position: relative; }
/* Sfeerbeeld bij een contextblok: een omslagfoto van de situatie, geen figuur
   om af te lezen (dat is .stimulus-figuur — besluit 204). Onder de kop, boven
   de tekst, binnen dezelfde paneelrand. Eigen regel in plaats van aansluiten
   bij .vraag-beeld img: die selector wordt letterlijk gecontroleerd
   (controleer-leesbaarheid.js) en een derde naam erbij zou die check breken. */
.stimulus-beeld { text-align: center; padding: 10px 14px 0; }
.stimulus-beeld img {
  max-width: 100%;
  max-height: clamp(120px, 24vh, 280px);
  width: auto; height: auto;
  border-radius: var(--radius-s);
  display: inline-block;
  cursor: zoom-in;
}
/* De hint hoort bij het beeld, niet bij een vraagtype: als pseudo-element staat
   hij er op élke plek waar een vraagbeeld verschijnt, zonder dat de drie
   renderplekken er iets voor hoeven te doen. Zonder cursor (aanraakscherm) is
   dit het enige dat verklapt dat vergroten kan. */
.vraag-beeld::after, .stimulus-beeld::after {
  content: '🔍 klik om te vergroten';
  display: block; margin-top: 4px;
  font-size: 12px; color: var(--grijs);
}
@media (hover: none) {
  .vraag-beeld::after, .stimulus-beeld::after { content: '🔍 tik om te vergroten'; }
}
/* Figuur bij een vraag: grafiek, meetlat, klok, getallenlijn.

   Geen bestand maar inline SVG uit een spec (kern/scripts/figuur.js). Daardoor
   staan de kleuren in tokens en volgt de donkere modus vanzelf, en is er geen
   .webp nodig — er is niets om te comprimeren.

   De breedtegrens houdt het figuur op een ruime kaart leesbaar in plaats van
   uitgerekt; de SVG schaalt zelf mee naar beneden. Een hoogtegrens zoals bij
   een foto is hier niet nodig: de tekenaar bepaalt de verhouding. */
.vraag-figuur {
  margin: 0 0 16px; text-align: center;
}
.vraag-figuur svg {
  width: 100%; max-width: 480px; height: auto; display: inline-block;
  font-family: var(--font-tekst);
}
.figuur-fout {
  background: var(--fout-bg); color: var(--fout-tekst); border: 1px solid var(--fout);
  border-radius: var(--radius-s); padding: 10px 12px; margin-bottom: 16px; font-size: 14px;
}
/* Een tabel is geen SVG: een schermlezer moet er doorheen kunnen lopen en de
   kolommen mogen schuiven als ze niet passen. */
.figuur-tabel-schuif { overflow-x: auto; display: inline-block; max-width: 100%; }
.figuur-tabel {
  border-collapse: collapse; font-size: 15px; margin: 0 auto;
  background: var(--paneel); border: 1px solid var(--lijn); border-radius: var(--radius-s);
}
.figuur-tabel caption {
  font-family: var(--font-kop); font-weight: var(--kop-gewicht);
  font-size: 14px; padding-bottom: 6px; color: var(--inkt);
}
.figuur-tabel th, .figuur-tabel td {
  padding: 7px 12px; border-bottom: 1px solid var(--lijn); text-align: left; white-space: nowrap;
}
.figuur-tabel th {
  font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--grijs); background: var(--vlak); font-weight: 700;
}
.figuur-tabel td.n, .figuur-tabel th.n { text-align: right; font-variant-numeric: tabular-nums; }
.figuur-tabel tr:last-child td { border-bottom: 0; }

/* Stimulus: de leestekst (of tabel) die meerdere vragen delen.

   Eigen scrollvak en niet meegroeien met de pagina: bij een tekst van vier
   alinea's moet de vraag mét de eerste antwoorden in beeld blijven, anders
   scrol je bij elke vraag opnieuw naar beneden om te zien wát er gevraagd
   wordt. Dezelfde afweging als de hoogtegrens op het vraagbeeld hierboven, en
   om dezelfde reden in vh. */
.vraag-stimulus {
  background: var(--paneel); border: 1px solid var(--lijn);
  border-radius: var(--radius-s); margin-bottom: 16px; overflow: hidden;
}
.stimulus-kop {
  display: flex; align-items: baseline; gap: 10px;
  padding: 10px 14px; border-bottom: 1px solid var(--lijn);
}
.stimulus-label { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--grijs); font-weight: 700; }
.stimulus-titel { font-family: var(--font-kop); font-weight: var(--kop-gewicht); font-size: 15px; }
.stimulus-tekst {
  padding: 12px 14px; font-size: 15px; line-height: 1.65;
  max-height: clamp(180px, 38vh, 460px); overflow-y: auto;
}
.stimulus-tekst p { margin: 0 0 10px; }
/* Een tussenkopje hoort bij de tekst maar is geen alinea: geen nummer (besluit 430). */
.stimulus-tekst .stimulus-tussenkop { font-weight: 700; margin: 14px 0 6px; }
.stimulus-tekst p:last-child { margin-bottom: 0; }
/* Het gedeelde figuur van een examencontext: onder het schuifvak, nooit erin. */
.stimulus-figuur { padding: 4px 14px 0; border-top: 1px solid var(--lijn); }
.stimulus-figuur .vraag-figuur { margin-bottom: 8px; }

.vraag-context {
  background: var(--achtergrond); border: 1px solid var(--lijn);
  border-radius: var(--radius-s); padding: 12px; margin-bottom: 16px; font-size: 15px;
}
/* De eerdere tussenteksten van de opgave staan dicht boven de eigen inleiding
   (besluit 701): dezelfde stijl als "verdieping", in het grijze vak zelf. */
.vraag-eerder { margin: 0 0 12px; }
.vraag-eerder:last-child { margin-bottom: 0; }
.vraag-eerder > summary { cursor: pointer; font-weight: 600; color: var(--hoofdkleur); padding: 6px 0; }
.vraag-eerder-tekst { padding-top: 6px; border-top: 1px solid var(--lijn); }
.vraag-eerder-tekst p:first-child { margin-top: 0; }
.vraag-eerder-tekst p:last-child { margin-bottom: 0; }
.context-label { display: block; font-size: 12px; text-transform: uppercase; color: var(--grijs); margin-bottom: 4px; }
.leeg { padding: 24px 8px; text-align: center; color: var(--grijs); font-size: 14px; background: var(--achtergrond); border-radius: var(--radius-s); }

.situaties-rij { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; margin-bottom: 16px; }
.situatie-paneel { border: 1px solid var(--lijn); border-radius: var(--radius-s); padding: 10px; }
.situatie-label { display: block; font-weight: 700; margin-bottom: 6px; font-size: 13px; text-transform: uppercase; color: var(--grijs); }

.volgorde-elementen { list-style: none; padding: 0; margin: 0 0 16px; }
.volgorde-elementen li { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--lijn); }
.volgorde-elementen .nr {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--hoofdkleur); color: var(--white); display: grid; place-items: center; font-weight: 700; font-size: 13px;
}

/* ---------- opties ---------- */
.opties-lijst { display: grid; gap: 8px; margin-bottom: 18px; }
/* Antwoordopties zijn de langste tekst op de kaart en worden het vaakst
   herlezen. Ze horen dus niet kleiner te zijn dan de rest van de pagina — en de
   basistekst zakt op een telefoon naar 14 px, wat voor een optie van twee
   regels te klein is om vlot te lezen. Vandaar een eigen, vaste maat.
   16 px is ook de grens waaronder Safari op iOS bij het aantikken van een veld
   gaat inzoomen; daaronder gaan we dus niet. */
.optie {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  border: 1px solid var(--lijn); border-radius: var(--radius-s);
  padding: 12px 14px; background: var(--paneel);
  font-size: var(--optie-tekst); line-height: 1.45;
}
.optie .optie-tekst { flex: 1; }
@media (hover: hover) {
  .optie:hover { border-color: var(--hoofdkleur); }
}
.optie.geselecteerd { border-color: var(--hoofdkleur); background: var(--hoofdkleur-licht); }
.optie.goed { border-color: var(--goed); background: var(--goed-bg); }
.optie.fout { border-color: var(--fout); background: var(--fout-bg); }
.optie input { accent-color: var(--hoofdkleur); width: 18px; height: 18px; flex: none; }

.opties-beeldgrid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); margin-bottom: 18px; }
.optie-beeld {
  position: relative; cursor: pointer; border: 2px solid var(--lijn);
  border-radius: var(--radius-s); padding: 8px; background: var(--paneel); text-align: center;
}
/* Beeldopties: een vaste hoogte houdt het raster netjes, `contain` voorkomt
   dat een bord wordt uitgerekt. Groter dan de 100 px van eerst: twee
   waarschuwingsborden verschillen soms in één streep, en die zie je op 100 px
   niet. Meebewegend met de schermhoogte, want op een klein scherm moet de
   vraag erboven ook nog passen. */
.optie-beeld img { width: 100%; height: clamp(110px, 16vh, 170px); object-fit: contain; display: block; cursor: zoom-in; }
.optie-beeld.geselecteerd { border-color: var(--hoofdkleur); background: var(--hoofdkleur-licht); }
.optie-beeld.goed { border-color: var(--goed); background: var(--goed-bg); }
.optie-beeld.fout { border-color: var(--fout); background: var(--fout-bg); }
.optie-letter { display: block; margin-top: 6px; font-weight: 700; font-size: 13px; color: var(--grijs); }

/* Een open antwoord is een paar zinnen, geen woord (besluit 367). */
.antwoord-open textarea {
  width: 100%; padding: 12px; font: inherit; font-size: 16px;
  border: 1px solid var(--lijn); border-radius: var(--radius-sm);
  background: var(--paneel); color: var(--inkt); resize: vertical;
}
.antwoord-open textarea:focus { outline: 2px solid var(--hoofdkleur); outline-offset: 1px; }
.antwoord-open p { margin: 6px 0 0; }

/* ---------- een historische bron (besluit 363) ----------
   De herkomst staat klein onder de bron en niet erboven: eerst kijk je, dan
   vraag je je af wie het maakte. Maar hij staat er altijd — een bron zonder
   datering en maker is niet te wegen, en dat wegen is wat dit examen toetst. */
.stimulus-herkomst {
  margin: 8px 0 0; font-size: 13px; color: var(--steengrijs); font-style: italic;
}
.stimulus-verwijzing {
  margin-top: 10px; padding: 12px 14px;
  background: var(--vlak); border-left: 3px solid var(--markering);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.stimulus-verwijzing p { margin: 0; font-size: 15px; }

/* ---------- Kijk- en luisterfragment (besluit 426) ----------
   Een fragment is een stimulus met delen; per deel een gewone audiospeler (de
   syllabus staat opnieuw afspelen toe, dus alle knoppen horen erop) en bij
   "video" een beeld dat met de tijd meeloopt. De speler is volle breedte: op
   een telefoon moet de tijdbalk raakbaar zijn, en dat is hij alleen breed. */
.fragment-lichaam { padding: 12px 14px; display: grid; gap: 12px; }
.fragment-inleiding { margin: 0; font-size: 15px; line-height: 1.55; }
.fragment-deel {
  display: grid; gap: 8px; padding: 10px 12px;
  border: 1px solid var(--lijn); border-radius: var(--radius-s); background: var(--achtergrond);
}
.fragment-deel-kop { font-weight: 700; font-size: 14px; }
.fragment-speler { width: 100%; min-height: var(--raakvlak); }
.fragment-beeld { text-align: center; }
.fragment-beeld img { max-width: 100%; max-height: 34vh; border-radius: var(--radius-s); }
.fragment-dos { font-size: 14px; display: flex; gap: 10px; align-items: flex-start; min-height: var(--raakvlak); cursor: pointer; line-height: 1.4; }
.fragment-dos input { flex: none; margin-top: 1px; }
.fragment-dos input { width: 20px; height: 20px; }
.fragment-transcript { margin-top: 8px; }
.fragment-transcript summary { cursor: pointer; font-weight: 700; min-height: var(--raakvlak); display: flex; align-items: center; }
.fragment-transcript-tekst { max-height: clamp(160px, 34vh, 420px); overflow-y: auto; font-size: 15px; line-height: 1.6; }
.fragment-transcript-tekst p { margin: 0 0 8px; }
/* Op een telefoon telt elke pixel voor de speler: onder ongeveer 300 px laat
   Chrome de tijdbalk weg, en zonder tijdbalk kun je niet terugspoelen. Daarom
   vervalt hier de binnenste rand en krimpen de marges. */
@media (max-width: 520px) {
  .fragment-lichaam { padding: 10px 0; }
  .fragment-inleiding, .fragment-dos { padding: 0 10px; }
  .fragment-deel { border: 0; border-radius: 0; padding: 8px 4px; }
}
.fragment-transcript-tekst mark { background: var(--markering-bg); color: var(--markering-tekst); padding: 0 2px; border-radius: 3px; }
.stimulus-verwijzing p + p { margin-top: 8px; }

/* ---------- het leespaneel: een examentekst Nederlands (besluit 391) ----------

   Een examentekst is 600 tot 900 woorden, drie keer de leestekst van de
   doorstroomtoets waarvoor het leesvak hierboven gemaakt is. In een vak van
   38vh is dat een kijkgaatje: acht vragen lang scrol je door dezelfde tekst.

   Alles hieronder hangt aan twee klassen die vragen.js alleen zet als een
   stimulus genummerd is of meer dan 350 woorden telt (`_isLangeTekst`). Geen
   trainer die al draait komt daarboven; voor hen verandert er niets. */

/* Nummering: een examenvraag verwijst naar "alinea 4" of naar "regels 70-73". */
.alinea-nr { color: var(--grijs); font-variant-numeric: tabular-nums; font-size: .9em; }
.regels { font-variant-numeric: tabular-nums; }
.regel { display: grid; grid-template-columns: 2.2em minmax(0, 1fr); column-gap: 10px; }
.regel-nr { color: var(--grijs); font-size: 12px; text-align: right; padding-top: 3px; user-select: none; }
.regel-gat { height: 10px; }
/* Een regel van het origineel blijft één regel. "(regels 70-73)" wijst naar
   regels van het tekstboekje; breekt een regel op het scherm om, dan is regel
   72 niet meer de 72e regel die je ziet. Op een telefoon brak zo 109 van de
   134 regels van 2024 tekst 1. Past een regel niet, dan schuift het leesvak
   liever een paar pixels opzij dan dat de telling zoekraakt. */
.regel > span:last-child { white-space: nowrap; }
.regels { overflow-x: auto; }

/* Noten, zoals in het tekstboekje: een cijfertje in de tekst, de uitleg eronder. */
.noot-ref { font-size: .72em; color: var(--grijs); margin-left: 1px; }
.stimulus-noten {
  margin: 14px 0 0; padding: 10px 0 0; border-top: 1px solid var(--lijn);
  list-style: none; font-size: 13px;
}
.stimulus-noten li + li { margin-top: 4px; }

.stimulus-lang .stimulus-tekst { max-height: clamp(260px, 55vh, 640px); }

/* Breed scherm: de tekst links, de vraag rechts — zoals een tekstboekje naast
   een opgavenboekje. De tekst blijft staan terwijl je door de vragen gaat; de
   scrollpositie per tekst bewaart vragen.js al. */
@media (min-width: 1000px) {
  .vraag-kaart.met-leestekst {
    display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    column-gap: 28px; align-items: start;
  }
  .vraag-kaart.met-leestekst > * { grid-column: 2; }
  .vraag-kaart.met-leestekst > .vraag-stimulus {
    grid-column: 1; grid-row: 1 / span 40; margin-bottom: 0;
    position: sticky; top: 12px;
  }
  .vraag-kaart.met-leestekst .stimulus-lang .stimulus-tekst { max-height: calc(100vh - 150px); }
}

/* Telefoon: de vraag wint nog steeds, maar een examentekst krijgt meer dan de
   26vh van een doorstroomtoetstekst — anders lees je hem door een brievenbus. */
@media (max-width: 600px) {
  .stimulus-lang .stimulus-tekst { max-height: clamp(220px, 45vh, 480px); }
  /* De breedste regel in 2024 en 2025 telt 40 tekens: bij 13px zo'n 224px,
     en dat past op een telefoon van 375px zonder te schuiven. */
  .regels { font-size: 13px; }
  .regel { grid-template-columns: 1.9em minmax(0, 1fr); column-gap: 6px; }
}

/* Een advertentie of flyer uit een examen: het beeld ís de tekst. De hoogte
   van een sfeerbeeld (24vh) maakt er een postzegel van; hier moet hij te
   lezen zijn, en vergroten blijft kunnen voor de kleine letters. */
/* De hoogtegrens zit op het vak, niet op het beeld (besluit 646). Een lang
   beeld kromp anders tot het in de hoogte paste: een blad van 961×1709 stond
   op 35% van zijn grootte. Nu krijgt het de volle breedte en schuift het vak;
   een breed of klein beeld merkt er niets van. */
.stimulus-beeld.beeld-is-tekst { padding-bottom: 10px; max-height: clamp(320px, 70vh, 900px); overflow-y: auto; }
.stimulus-beeld.beeld-is-tekst img { max-height: none; cursor: zoom-in; }
@media (min-width: 1000px) {
  .vraag-kaart.met-leestekst .stimulus-beeld.beeld-is-tekst { max-height: calc(100vh - 170px); }
}

/* Het bronnenblad als tekst (besluit 646): de informatiebronnen van een opgave
   in het schuifvak, elk met zijn kop, tekst en echte tabellen. Een grafiek of
   diagram is een uitsnede per bron op de volle breedte van het vak; het vak
   zelf begrenst de hoogte. */
.stimulus-origineel { font-size: 13px; margin: 0 0 12px; }
.stimulus-bron { margin: 0 0 16px; }
.stimulus-bron + .stimulus-bron { border-top: 1px solid var(--lijn); padding-top: 12px; }
.stimulus-tekst .stimulus-bronkop {
  font-family: var(--font-kop); font-weight: var(--kop-gewicht); font-size: 15px; margin: 0 0 8px;
}
.stimulus-bronnr {
  display: block; font-family: var(--font-tekst); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: var(--grijs);
}
.stimulus-brontabel .vraag-figuur { margin: 4px 0 12px; text-align: left; }
.stimulus-tekst .stimulus-tabeltitel { font-weight: 700; font-size: 14px; margin: 10px 0 4px; }
.stimulus-brontabel .figuur-tabel-schuif { display: block; }
.stimulus-brontabel .figuur-tabel { margin: 0; }
/* Een cel van een cao of een voorwaardenlijst is een zin: die breekt af. */
.stimulus-brontabel .figuur-tabel th, .stimulus-brontabel .figuur-tabel td { white-space: normal; }
.stimulus-brontabel .figuur-tabel td.n, .stimulus-brontabel .figuur-tabel th.n { white-space: nowrap; }
.stimulus-bronbeeld { margin: 4px 0 12px; }
.stimulus-bronbeeld img {
  max-width: 100%;
  width: auto; height: auto;
  border-radius: var(--radius-s);
  cursor: zoom-in;
}
.stimulus-bronbeeld::after {
  content: '🔍 klik om te vergroten';
  display: block; margin-top: 4px;
  font-size: 12px; color: var(--grijs);
}
@media (hover: none) {
  .stimulus-bronbeeld::after { content: '🔍 tik om te vergroten'; }
}
/* Op een telefoon is het schuifvak ±260 px breed en een balans heeft vier
   kolommen: kleinere letter, smallere cellen en geen spatiëring in de kop,
   zodat er minder zijwaarts geschoven hoeft te worden. */
@media (max-width: 600px) {
  .stimulus-brontabel .figuur-tabel { font-size: 14px; }
  .stimulus-brontabel .figuur-tabel th, .stimulus-brontabel .figuur-tabel td { padding: 5px 6px; }
  .stimulus-brontabel .figuur-tabel th { letter-spacing: 0; }
}

/* Een tekstfragment in de vraag (uit het opgavenboekje, niet het tekstboekje)
   en de melding bij een vervallen vraag. */
.vraag-fragment {
  background: var(--achtergrond); border: 1px solid var(--lijn); border-left: 3px solid var(--markering);
  border-radius: var(--radius-s); padding: 12px 14px; margin-bottom: 16px; font-size: 15px;
}
.vraag-fragment p { margin: 0 0 8px; }
.vraag-fragment p:last-child { margin-bottom: 0; }
/* De nakijkhulp bij de schrijfopdracht (B3b): een voorstel, naast het zelf
   nakijken. Zelfde vorm als een verwijzing, zodat het niet oogt als een
   officieel oordeel. */
.nakijkhulp { margin: 12px 0; }
.nakijkhulp p { margin: 6px 0 0; }
.nakijkhulp-uitkomst {
  margin-top: 10px; padding: 12px 14px; font-size: 15px;
  background: var(--vlak); border-left: 3px solid var(--hoofdkleur);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.nakijkhulp-uitkomst ul { margin: 6px 0; padding-left: 20px; }
.vraag-vervallen {
  margin-bottom: 14px; padding: 12px 14px; font-size: 15px;
  background: var(--vlak); border-left: 3px solid var(--markering);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* De woordteller: bij een open vraag met een woordlimiet en bij de
   schrijfopdracht. Waarschuwingskleur zodra de corrector niet verder leest,
   of zolang een schrijfopdracht onder de 100 woorden zit. */
.woordlimiet, .woordteller { margin: 6px 0 0; font-variant-numeric: tabular-nums; }
.woordlimiet.over-limiet, .woordteller.onder-drempel { color: var(--waarschuwing-tekst); }

/* ---------- keuze-invul en koppel (besluit 361) ----------
   Twee vraagtypes met meerdere keuzes binnen één vraag: een zin met gaten, en
   een rij items die je aan een begrip koppelt. Ze delen hun opmaak, want voor
   de kandidaat zijn het dezelfde beweging — per regel één keuze aantikken.

   De keuzes staan náást de zin op een breed scherm en eronder op een smal.
   Geen vast kolomaantal in een inline style: dat wint van de media query en
   duwt de laatste knop buiten beeld op een telefoon. */
.keuze-gat, .koppel-rij {
  padding: 12px 0; border-bottom: 1px solid var(--lijn);
}
.keuze-gat:last-of-type, .koppel-rij:last-of-type { border-bottom: 0; }
.keuze-zin {
  display: flex; align-items: baseline; gap: 10px;
  margin-bottom: 8px; font-size: 16px; line-height: 1.5;
}
.keuze-zin .nr {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--hoofdkleur); color: var(--white);
  display: grid; place-items: center; font-weight: 700; font-size: 13px;
}
.keuze-gat .opties, .koppel-rij .opties {
  display: flex; flex-wrap: wrap; gap: 8px; padding-left: 36px;
}
.keuze-gat .optie, .koppel-rij .optie { margin: 0; flex: 0 1 auto; }
/* Een koppelknop draagt alleen een letter, dus hij mag smal zijn — maar nooit
   smaller dan het aanraakminimum. */
.koppel-knop { min-width: 56px; justify-content: center; }
.koppel-keuzes {
  list-style: none; padding: 12px 14px; margin: 0 0 14px;
  background: var(--vlak); border-radius: var(--radius-sm); display: grid; gap: 8px;
}
.koppel-keuzes li { display: flex; align-items: center; gap: 10px; font-size: 16px; }
/* Een keuze als plaatje (besluit 427): klein genoeg om vier onder elkaar te
   zien, groot genoeg om te herkennen. Nooit width: 100% (CLAUDE.md). */
.koppel-beeld { max-width: 140px; max-height: 96px; border-radius: var(--radius-s); border: 1px solid var(--lijn); }
/* Zin aanwijzen (besluit 427): elke zin een eigen, raakbare regel, in de
   volgorde van de tekst. */
.zin-tekst { display: grid; gap: 6px; }
.zin-tekst .zin-knop { margin: 0; line-height: 1.5; font-size: 16px; }
.zin-plek { margin: 0 0 8px; }
.koppel-keuzes .nr {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--hoofdkleur); color: var(--white);
  display: grid; place-items: center; font-weight: 700; font-size: 13px;
}
@media (max-width: 600px) {
  .keuze-gat .opties, .koppel-rij .opties { padding-left: 0; }
}

/* ---------- reactievergelijking (besluit 555) ----------
   Eén invoerveld met daaronder een knoppenbalk voor wat een toetsenbord niet
   heeft (→, ⇄, ladingen, e⁻, toestanden), en een regel die laat zien hoe het
   platform de vergelijking leest. De knoppen lopen door op een telefoon. */
.rv-invoer {
  width: 100%; font-size: 18px; line-height: 1.4; min-height: var(--raakvlak);
  padding: 8px 12px; border: 1px solid var(--lijn); border-radius: var(--radius-sm);
  background: var(--achtergrond); color: var(--inkt); font-family: var(--font-body);
}
.rv-balk { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.rv-knop {
  min-width: var(--raakvlak); min-height: var(--raakvlak); padding: 4px 10px;
  border: 1px solid var(--lijn); border-radius: var(--radius-sm);
  background: var(--vlak); color: var(--inkt); font-size: 18px; cursor: pointer;
}
.rv-knop sup { font-size: 0.7em; line-height: 0; }
.rv-lezing { margin: 6px 0 0; font-size: 16px; }
.rv-oordeel { list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 4px; }
.rv-oordeel li { font-size: 15px; }
.rv-oordeel li.goed { color: var(--goed-tekst); }
.rv-oordeel li.fout { color: var(--fout-tekst); }

/* ---------- tekenen (besluit 556) ----------
   Het antwoord staat op papier; hier alleen de opdracht en het vinkje dat de
   tekening af is. Het modelantwoord is een figuur met de gewone beeldgrenzen
   (.vraag-beeld img: nooit width: 100%). */
.tekenen-uitleg { margin: 0 0 10px; font-size: 16px; line-height: 1.5; }
.tekenen-klaar {
  display: inline-flex; align-items: center; gap: 10px; min-height: var(--raakvlak);
  font-size: 16px; cursor: pointer;
}
.tekenen-klaar input { width: 22px; height: 22px; }
.modelbeeld { margin: 10px 0 12px; }
.modelbeeld figcaption { margin-top: 4px; }

/* ---------- beeld groot bekijken ----------
   De hoogtegrens hierboven houdt de vraag leesbaar, maar bij gevaarherkenning
   zit het antwoord soms in een detail. Eén klik op het beeld en het vult het
   scherm; klik, Escape of de knop sluit het weer. */
.beeld-groot {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(0,0,0,.88);
  display: grid; place-items: center;
  padding: 24px; cursor: zoom-out;
}
.beeld-groot img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  border-radius: var(--radius-s);
  box-shadow: 0 10px 40px rgba(0,0,0,.5);
}
.beeld-groot-sluit {
  position: absolute; top: 16px; right: 16px;
  width: 44px; height: 44px; border-radius: 50%;
  border: none; background: rgba(255,255,255,.92); color: var(--inkt);
  font-size: 22px; line-height: 1; cursor: pointer;
}
.beeld-groot-sluit:focus-visible { outline: 3px solid var(--white); outline-offset: 2px; }

.antwoord-rij { margin-bottom: 18px; }
.antwoord-veld { display: flex; align-items: center; gap: 8px; }
.antwoord-veld input {
  font: inherit; padding: 12px 14px; border: 1px solid var(--lijn);
  border-radius: var(--radius-s); width: 220px; background: var(--paneel); color: var(--inkt);
}
.antwoord-veld input:focus { outline: 2px solid var(--hoofdkleur); outline-offset: 1px; }
.eenheid { color: var(--grijs); font-weight: 600; }

/* ---------- uitslag en uitwerking ---------- */
/* De uitslagbalk: wit vlak met een gekleurde omlijning, niet een gevuld vlak.
   Een volvlak in de merkkleur leest als "let op" in plaats van als "goed", en
   een gevulde balk zet de uitslag zwaarder aan dan de vraag ernaast. Het icoon
   (✓ / ✗) staat in de tekst zelf, zodat kleur nooit de enige aanwijzing is. */
.uitslag {
  border-radius: var(--radius-s); padding: 12px 14px; font-weight: 700; margin-bottom: 12px;
  background: var(--paneel); border: 2px solid var(--lijn);
}
.uitslag.goed { border-color: var(--goed); color: var(--goed-tekst); }
.uitslag.fout { border-color: var(--fout); color: var(--fout-tekst); }
/* Half goed bestaat sinds keuze-invul en koppel (besluit 361). Niet groen en
   niet rood: dan zou de kandidaat denken dat hij het helemaal goed of helemaal
   fout had, terwijl hij er punten voor krijgt. */
.uitslag.deels { border-color: var(--waarschuwing); color: var(--waarschuwing-tekst); }
/* Nog geen oordeel (besluit 378). Niet groen, niet rood en ook niet oranje:
   er is niets mis en er is niets goed — er moet nog iets gebeuren. Daarom de
   neutrale lijn en de gewone tekstkleur, met het ✍️ als aanwijzing. */
.uitslag.zelf-nakijken { border-color: var(--hoofdkleur); color: var(--inkt); font-weight: 600; }
.zelf-punten { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.zelf-punten .stil { flex-basis: 100%; }
@media (max-width: 600px) {
  /* Op een telefoon zijn vier puntenknoppen naast elkaar te smal om te raken;
     ze mogen de hele breedte delen. */
  .zelf-punten .btn { flex: 1 1 auto; min-width: 88px; }
}
/* Het oordeel van de nakijker bij een open vraag (besluit 478): per criterium
   behaald of gemist, met de reden. Het teken draagt de betekenis, de kleur
   ondersteunt alleen. */
.nakijk-oordeel { background: var(--achtergrond); border-radius: var(--radius-s); padding: 14px; margin-bottom: 12px; }
.nakijk-oordeel p { margin: 0 0 8px; }
.nakijk-oordeel p:last-child { margin-bottom: 0; }
.nakijk-criteria { list-style: none; margin: 0 0 10px; padding: 0; }
.nakijk-criterium { display: flex; gap: 8px; align-items: baseline; padding: 4px 0; }
.nakijk-criterium .nakijk-teken { flex: 0 0 1.2em; font-weight: 700; text-align: center; }
.nakijk-criterium.behaald .nakijk-teken { color: var(--goed-tekst); }
.nakijk-criterium.gemist .nakijk-teken { color: var(--fout-tekst); }
.uitwerking { background: var(--achtergrond); border-radius: var(--radius-s); padding: 14px; margin-bottom: 12px; }
.uitwerking strong { display: block; font-size: 12px; text-transform: uppercase; color: var(--grijs); margin-bottom: 6px; }
/* De uitleg staat in stappen, elk op een eigen regel ("1. …\n2. …"): de regelovergangen
   uit de data blijven staan (besluit 496). */
.uitwerking p { margin: 0; white-space: pre-line; }
.verdieping { border: 1px solid var(--lijn); border-radius: var(--radius-s); padding: 10px 14px; margin-bottom: 12px; }
.verdieping summary { cursor: pointer; font-weight: 600; color: var(--hoofdkleur); }
.verdieping p { margin: 10px 0 0; }

.vraag-nav { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
/* Laatste examenvraag: Overzicht en Afronden horen bij elkaar, rechts. */
.vraag-nav-eind { display: flex; gap: 10px; flex-wrap: wrap; margin-left: auto; }

/* De rij bestaat alleen als er een formulier in staat; leeg kost hij niets.
   Zonder `:empty` hield een lege rij een streep en 26 px marge over. */
.meld-rij { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--lijn); }
.meld-rij:empty { margin: 0; padding: 0; border: none; }
.meld-form textarea, .meld-form select { font-size: var(--tekst-invoer); }
/* De teller onder het tekstvak: hoeveel ruimte er nog is. Zonder teller werd
   een lange melding stil afgekapt en wist de melder dat niet. */
.meld-teller { margin: 4px 0 0; font-size: 13px; color: var(--grijs); }
.meld-teller.is-vol { color: var(--waarschuwing-tekst); font-weight: 700; }

/* ---------- overzichtsoverlay ---------- */
.overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.5);
  display: grid; place-items: center; z-index: 50; padding: 20px;
}
.overlay.verborgen { display: none; }
.overlay-paneel {
  background: var(--paneel); border-radius: var(--radius); padding: 22px;
  max-width: 460px; width: 100%;
  /* Een examen van 52 vragen geeft een raster dat op een telefoon langer is dan
     het scherm. Zonder deze twee regels liep het paneel buiten beeld en was de
     sluitknop niet te bereiken — je zat vast in het overzicht. */
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}
.overzicht-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 8px; margin: 14px 0; }
.tegel {
  aspect-ratio: 1; border: 1px solid var(--lijn); border-radius: var(--radius-s);
  background: var(--paneel); color: var(--inkt); font-weight: 700; cursor: pointer;
}
.tegel { position: relative; }
.tegel.beantwoord { background: var(--hoofdkleur); color: var(--white); border-color: var(--hoofdkleur); }
/* Gemarkeerd moet leesbaar blijven op een beantwoorde (gevulde) tegel. Een
   randkleur alleen viel daar weg tegen de merkkleur; de ring plus het vlaggetje
   werken op allebei, en het vlaggetje draagt de betekenis ook zonder kleur. */
.tegel.gemarkeerd { border-color: var(--waarschuwing); border-width: 2px; box-shadow: 0 0 0 2px color-mix(in srgb, var(--waarschuwing) 45%, transparent); }
.tegel-vlag { position: absolute; top: -8px; right: -6px; font-size: 13px; line-height: 1; }

.overzicht-stand { font-size: 14px; margin: 0 0 6px; }
.overzicht-legenda { font-size: 13px; color: var(--grijs); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0; }
.legenda-item { display: inline-flex; align-items: center; gap: 6px; }
.legenda-uitleg { flex-basis: 100%; }
.tegel-voorbeeld {
  width: 15px; height: 15px; border-radius: 3px; flex: none;
  border: 1px solid var(--lijn); background: var(--paneel);
}
.tegel-voorbeeld.beantwoord { background: var(--hoofdkleur); border-color: var(--hoofdkleur); }
.tegel-voorbeeld.gemarkeerd { border-color: var(--waarschuwing); border-width: 2px; }
.overzicht-sprong { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.overzicht-sprong .btn { font-size: 13px; padding: 6px 12px; }
.overzicht-sprong .btn[hidden] { display: none; }
/* Achteraf nakijken bij oefenen (besluit 493). De tegels van het
   nakijkoverzicht dragen de uitslag: kleur én teken, zodat het ook zonder
   kleur leesbaar is. Nog niet gemaakt blijft de lege tegel. */
.vraag-nav .btn[hidden] { display: none; }
.tegel-teken { position: absolute; top: 2px; right: 4px; font-size: 11px; line-height: 1; }
.tegel.achteraf-goed, .tegel-voorbeeld.achteraf-goed { background: var(--goed-bg); border-color: var(--goed); color: var(--goed-tekst); }
.tegel.achteraf-deels, .tegel-voorbeeld.achteraf-deels { background: var(--waarschuwing-bg); border-color: var(--waarschuwing); color: var(--waarschuwing-tekst); }
.tegel.achteraf-fout, .tegel-voorbeeld.achteraf-fout { background: var(--fout-bg); border-color: var(--fout); color: var(--fout-tekst); }
.tegel.achteraf-zelf, .tegel-voorbeeld.achteraf-zelf { border-color: var(--hoofdkleur); border-width: 2px; }
.tegel.achteraf-beantwoord, .tegel-voorbeeld.achteraf-beantwoord { background: var(--hoofdkleur); color: var(--white); border-color: var(--hoofdkleur); }
.achteraf-paneel .schakelaar { margin: 0; }
.achteraf-paneel .achteraf-uitleg { margin: 6px 0 0; font-size: 14px; }
/* Vier knoppen passen niet naast elkaar op een telefoon (435 px op een
   scherm van 375). Daar staan Vorige en Volgende samen bovenaan, Nakijken
   over de volle breedte eronder, en de meldknop als laatste. */
.vraag-nav.achteraf-nav { flex-wrap: wrap; }
@media (max-width: 600px) {
  .vraag-nav.achteraf-nav .btn-primary { order: 2; }
  .vraag-nav.achteraf-nav .nakijk-alles { order: 3; flex-basis: 100%; }
  .vraag-nav.achteraf-nav #meld-open { order: 4; }
}
/* De markeerknop in de topbalk laat zien dat hij aanstaat. */
.topbalk-acties .btn.actief { box-shadow: inset 0 0 0 2px var(--waarschuwing); }

/* ---------- schakelaars ---------- */
.schakelaar { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.schakelaar input { display: none; }
.schakelaar .slider {
  width: 38px; height: 22px; border-radius: var(--pil); background: var(--lijn);
  position: relative; transition: background .2s; flex: none;
}
.schakelaar .slider::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--white); transition: transform .2s;
}
.schakelaar input:checked + .slider { background: var(--hoofdkleur); }
.schakelaar input:checked + .slider::after { transform: translateX(16px); }
.schakelaar.vergrendeld { opacity: .75; cursor: default; }
/* Vaststaande instelling: bewust géén schuifje — zie renderSchakelaar(). */
.vaste-instelling { margin: 0; padding: 6px 0; font-size: .95rem; }

/* ---------- diversen ---------- */
.badge { font-size: 12px; padding: 3px 8px; border-radius: var(--pil); border: 1px solid var(--lijn); color: var(--grijs); }
.badge.warn { color: var(--waarschuwing); border-color: var(--waarschuwing); }
.moeilijkheid { display: inline-flex; gap: 3px; margin-left: auto; }
.moeilijkheid .bol { width: 7px; height: 7px; border-radius: 50%; background: var(--lijn); }
.moeilijkheid .bol.actief { background: var(--hoofdkleur); }
.rij { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.stil { color: var(--grijs); font-size: 14px; }
.verborgen { display: none !important; }

table.resultaat { width: 100%; border-collapse: collapse; font-size: 15px; }
table.resultaat th, table.resultaat td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--lijn); }
table.resultaat th { font-size: 12px; text-transform: uppercase; color: var(--grijs); }

/* Uitslag als referentieniveau (blueprint.uitslagvorm) in plaats van als
   cijfer. Twee vakken naast elkaar op een ruim scherm, onder elkaar op een
   telefoon. Groen is hier betekenis en geen versiering: behaald tegenover nog
   niet behaald — dezelfde afspraak als bij een goed antwoord. */
.niveau-vakken { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
.niveau-kaart { margin-bottom: 0; }
.niveau-kop {
  font-family: var(--font-kop); font-weight: var(--kop-gewicht);
  font-size: 26px; line-height: 1.15; margin: 6px 0 2px;
}
.niveau-trap { display: flex; gap: 6px; margin-bottom: 16px; }
.niveau-stap {
  flex: 1; text-align: center; font-size: 13px; font-weight: 700;
  padding: 8px 4px; border-radius: var(--radius-s);
  border: 1px solid var(--lijn); background: var(--paneel); color: var(--grijs);
}
.niveau-stap.behaald { border-color: var(--goed); background: var(--goed-bg); color: var(--goed-tekst); }
.niveau-stap.huidig { border-width: 2px; }
.niveau-regel + .niveau-regel { margin-top: 10px; }
.niveau-regel-kop { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 14px; }
.niveau-regel .balk { margin-top: 6px; }
.niveau-regel .balk .vul.gehaald { background: var(--goed); }

.score-groot { font-size: 42px; font-family: var(--font-kop); font-weight: var(--kop-gewicht); }
.score-groot.geslaagd { color: var(--goed); }
.score-groot.gezakt { color: var(--fout); }
/* Eén regel per niveau onder de uitslag, bij een examen met meer grenzen
   (besluit 474). */
.niveau-uitslag { list-style: none; padding: 0; margin: 4px auto 8px; display: grid; gap: 6px; max-width: 34em; }
.niveau-uitslag li { padding: 8px 12px; border: 1px solid var(--lijn); border-radius: var(--radius-s); }

@media (max-width: 600px) {
  .situaties-rij { grid-template-columns: 1fr; }
  .kop h1 { font-size: 24px; }
  .vraag-tekst { font-size: 18px; }
  /* Op een telefoon wint de vraag van de tekst: 26vh is op een scherm van
     812 px ongeveer 210 px, de hoogte uit het ontwerpcanvas. Daarmee staat de
     eerste antwoordoptie nog boven de vouw. */
  .stimulus-tekst { max-height: clamp(140px, 26vh, 240px); padding: 10px 12px; }
  .vraag-figuur { margin-bottom: 12px; }
  .niveau-vakken { grid-template-columns: 1fr; }
  .niveau-kop { font-size: 22px; }
  .figuur-tabel th, .figuur-tabel td { padding: 6px 9px; }
  .vraag-stimulus { margin-bottom: 12px; }
}

/* Krap scherm, ruime tekst.

   Op een laptop van 800 px hoog viel een vraag met vijf antwoorden er net
   buiten — steeds met 18 tot 50 px. Die haal je niet uit de tekst (die moet
   juist goed leesbaar blijven) maar uit de witruimte eromheen. Deze regels
   gelden daarom alleen waar het krap ís: op een hoog scherm blijft alles ruim.
   De tekstgrootte staat er bewust niet bij. */
@media (min-width: 641px) and (max-height: 880px) {
  .vraag-kaart { padding: 16px 20px; }
  .vraag-tekst { margin-bottom: 10px; }
  .vraag-context { padding: 10px; margin-bottom: 12px; }
  .vraag-beeld { margin-bottom: 12px; }
  .opties-lijst { gap: 6px; margin-bottom: 12px; }
  .stimulus-tekst { max-height: clamp(160px, 30vh, 320px); }
  .vraag-stimulus { margin-bottom: 12px; }
  .optie { padding: 9px 14px; }
  .opties-beeldgrid { margin-bottom: 12px; }
}

/* ============================================
   Motiverende laag: readiness, XP, sprint, nieuwe vraagtypes
   Alleen zichtbaar als de bijbehorende vlag in trainer-features.json aan staat.
   ============================================ */

/* ---------- readiness ---------- */
.readiness-kaart {
  background: var(--paneel); border-radius: var(--radius); box-shadow: var(--schaduw);
  padding: 24px 28px; margin-bottom: 18px;
}
.readiness-cijfer { font-family: var(--font-kop); font-weight: var(--kop-gewicht); font-size: 52px; line-height: 1; }
.readiness-procent { font-size: 24px; margin-left: 2px; }
.readiness-band { font-family: var(--font-kop); font-weight: var(--kop-gewicht); font-size: 15px; margin-top: 4px; }
.readiness-meter { height: 8px; border-radius: var(--pil); background: var(--achtergrond); overflow: hidden; margin: 12px 0 10px; }
.readiness-meter-vul { height: 100%; border-radius: var(--pil); transition: width .5s ease; }
.readiness-advies { font-size: 14px; }
.readiness-uitleg { font-size: 13px; color: var(--grijs); margin-top: 4px; }
.readiness-disclaimer {
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--lijn);
  font-size: 12px; color: var(--grijs);
}
.readiness-zwaktes {
  background: var(--paneel); border-radius: var(--radius); box-shadow: var(--schaduw);
  padding: 18px 22px; margin-bottom: 22px;
}
.readiness-zwaktes h4 { font-size: 15px; margin: 0 0 8px; }
.readiness-zwakte-rij {
  display: flex; align-items: center; gap: 12px; padding: 9px 0;
  border-bottom: 1px solid var(--lijn); color: var(--inkt); text-decoration: none;
}
.readiness-zwakte-rij:last-child { border-bottom: none; }
.readiness-zwakte-naam { flex: 1; }
.readiness-zwakte-pct { font-family: var(--font-kop); font-weight: var(--kop-gewicht); color: var(--grijs); }
.readiness-zwakte-actie { font-size: 13px; font-weight: 700; color: var(--hoofdkleur); white-space: nowrap; }

/* ---------- XP ---------- */
.xp-kaart {
  background: var(--paneel); border-radius: var(--radius); box-shadow: var(--schaduw);
  padding: 18px 22px; margin-bottom: 22px;
}
.xp-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.xp-niveau { font-family: var(--font-kop); font-weight: 700; font-size: 14px; color: var(--grijs); }
.xp-totaal { font-family: var(--font-kop); font-weight: var(--kop-gewicht); font-size: 28px; line-height: 1.1; color: var(--hoofdkleur); }
.xp-streak { font-family: var(--font-kop); font-weight: 700; font-size: 14px; color: var(--waarschuwing); white-space: nowrap; }
.xp-meter { height: 6px; border-radius: var(--pil); background: var(--achtergrond); overflow: hidden; margin: 12px 0 8px; }
.xp-meter-vul { height: 100%; border-radius: var(--pil); background: var(--hoofdkleur); transition: width .5s ease; }
.xp-onder { font-size: 12px; color: var(--grijs); }

.xp-toast {
  position: fixed; right: 20px; bottom: 20px; z-index: 200;
  background: var(--inkt); color: var(--white); border-radius: var(--radius);
  padding: 12px 18px; box-shadow: 0 6px 20px rgba(0,0,0,.18);
  display: flex; align-items: baseline; gap: 8px;
  opacity: 0; transform: translateY(12px);
  transition: opacity .3s ease, transform .3s ease; pointer-events: none;
}
.xp-toast.toon { opacity: 1; transform: translateY(0); }
.xp-toast strong { font-family: var(--font-kop); font-size: 17px; color: var(--rood-op-donker); }
.xp-toast span { font-size: 13px; opacity: .85; }
@media (prefers-reduced-motion: reduce) {
  .xp-toast, .xp-toast.toon { transition: opacity .2s linear; transform: none; }
}

.herstel-banner {
  background: var(--waarschuwing-bg); border-left: 4px solid var(--waarschuwing);
  border-radius: var(--radius-s); padding: 10px 14px; margin-bottom: 14px; font-size: 14px;
}

/* Tweelingvraag: geen waarschuwing maar een uitleg, dus het info-register en
   niet het oranje van een herkansing. */
.tweeling-banner {
  background: var(--info-bg); border-left: 4px solid var(--info); color: var(--info-tekst);
  border-radius: var(--radius-s); padding: 10px 14px; margin-bottom: 14px; font-size: 14px;
}

/* ---------- sprint ---------- */
.sprint-start, .sprint-resultaat {
  background: var(--paneel); border-radius: var(--radius); box-shadow: var(--schaduw);
  padding: 28px; text-align: center;
}
.sprint-datum { font-family: var(--font-kop); font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--grijs); }
.sprint-streak { font-family: var(--font-kop); font-weight: 700; color: var(--waarschuwing); }
.sprint-balk { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.sprint-bolletje { width: 12px; height: 12px; border-radius: 50%; background: var(--lijn); }
.sprint-bolletje.gedaan { background: var(--hoofdkleur); }
.sprint-bolletje.nu { background: var(--waarschuwing); transform: scale(1.25); }
.sprint-teller { margin-left: auto; font-size: 13px; color: var(--grijs); }
.sprint-blokjes { font-size: 26px; letter-spacing: 3px; margin-bottom: 10px; }
.sprint-tijd { color: var(--grijs); font-size: 14px; margin-top: 4px; }
.sprint-acties { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }
.sprint-morgen { font-size: 13px; color: var(--grijs); margin-top: 14px; }
.sprint-stip { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--waarschuwing); margin-left: 5px; vertical-align: top; }

/* ---------- vraagtype: waar / niet waar ---------- */
.wnv-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 8px 0 4px; }
.wnv-knop {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 22px 16px; border: 2px solid var(--lijn); border-radius: var(--radius);
  background: var(--paneel); cursor: pointer;
  font-family: var(--font-kop); font-weight: 700; font-size: 17px;
  transition: border-color .15s ease, background .15s ease;
}
@media (hover: hover) {
  .wnv-knop:hover { border-color: var(--hoofdkleur); }
}
.wnv-knop.geselecteerd { border-color: var(--hoofdkleur); background: var(--hoofdkleur-licht); }
.wnv-knop.goed { border-color: var(--goed); background: var(--goed-bg); }
.wnv-knop.fout { border-color: var(--fout); background: var(--fout-bg); }
.wnv-icoon { font-size: 20px; }
/* Gevaarherkenning heeft drie keuzes in plaats van twee. */
.wnv-rij.wnv-drie { grid-template-columns: repeat(3, 1fr); }
/* Onder elkaar op een smal scherm: naast elkaar wordt de tekst een woord per
   regel en valt de laatste knop buiten beeld. */
@media (max-width: 640px) {
  .wnv-rij, .wnv-rij.wnv-drie { grid-template-columns: 1fr; }
  .wnv-knop { padding: 16px 14px; }
}

/* ---------- vraagtype: hotspot ---------- */
.hotspot-veld { position: relative; display: inline-block; max-width: 100%; line-height: 0; border-radius: var(--radius); overflow: hidden; }
.hotspot-veld img { max-width: 100%; height: auto; display: block; }
.hotspot-zone {
  position: absolute; transform: translate(-50%, -50%); height: 0; padding: 0;
  border-radius: 50%; border: 2px solid transparent; background: transparent; cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
@media (hover: hover) {
  .hotspot-zone:hover { border-color: var(--hoofdkleur); background: color-mix(in srgb, var(--hoofdkleur) 12%, transparent); }
}
.hotspot-zone.geselecteerd { border-color: var(--hoofdkleur); background: color-mix(in srgb, var(--hoofdkleur) 20%, transparent); }
.hotspot-zone.goed { border-color: var(--goed); background: color-mix(in srgb, var(--goed) 30%, transparent); }
.hotspot-zone.fout { border-color: var(--fout); background: color-mix(in srgb, var(--fout) 28%, transparent); }
.hotspot-veld.vergrendeld .hotspot-zone { cursor: default; }
@media (hover: hover) {
  .hotspot-veld.vergrendeld .hotspot-zone:hover { border-color: transparent; background: transparent; }
}
.hotspot-veld.vergrendeld .hotspot-zone.goed { border-color: var(--goed); background: color-mix(in srgb, var(--goed) 30%, transparent); }
.hotspot-veld.vergrendeld .hotspot-zone.fout { border-color: var(--fout); background: color-mix(in srgb, var(--fout) 28%, transparent); }

/* Tijdsindicatie op de aanbodkaarten: laat zien wat past bij de tijd die je hebt */
.kaart-tijd {
  margin-top: 10px !important;
  font-size: 12px !important;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--grijs);
}

/* Kleine regel onder de kop van het zwaktes-blok, zodat het op zichzelf te lezen is */
.readiness-zwaktes-uitleg { color: var(--grijs); font-size: 13px; margin: -4px 0 10px; }

/* ---------- Voorbereidingsscherm, doorverwijs-callout en instructievideo's ----------
   Overgenomen uit de Verkeersexamentrainer (fase 5b) — generiek bruikbaar. */
.vb-accordion { display: flex; flex-direction: column; gap: 14px; margin: 8px 0 32px; }
.voorbereiding-sectie {
  background: var(--paneel);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  overflow: hidden;
}
.voorbereiding-sectie > summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 26px;
  font-family: var(--font-header);
  font-weight: 700;
  font-size: 17px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--inktzwart);
}
.voorbereiding-sectie > summary::-webkit-details-marker { display: none; }
.voorbereiding-sectie > summary::after {
  content: '⌄';
  margin-left: auto;
  font-size: 20px;
  line-height: 1;
  color: var(--steengrijs);
  transition: transform 0.2s;
}
.voorbereiding-sectie[open] > summary { border-bottom: 1px solid var(--border-gray); }
.voorbereiding-sectie[open] > summary::after { transform: rotate(180deg); }
.vb-sectie-inhoud { padding: 18px 26px 24px; }
.vb-sectie-inhoud p, .vb-sectie-inhoud li { color: var(--steengrijs); line-height: 1.65; }
.vb-sectie-inhoud ul { padding-left: 20px; margin-top: 8px; }
.vb-sectie-inhoud li { margin-bottom: 6px; }
.vb-sectie-inhoud strong { color: var(--inktzwart); }
.vb-drieeenheid { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.vb-drieeenheid li {
  background: var(--mistgrijs);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.vb-drieeenheid .rang { font-family: var(--font-header); font-weight: 800; color: var(--examenflix-rood); }
.vb-cheatcodes { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 12px; margin-top: 10px; }
.vb-cheatcode { border-radius: var(--radius-sm); padding: 14px 16px; }
.vb-cheatcode.remmen { background: var(--error-bg); border-left: 4px solid var(--error); }
.vb-cheatcode.gas { background: var(--warning-bg); border-left: 4px solid var(--warning); }
.vb-cheatcode.niets { background: var(--mint); border-left: 4px solid var(--examenflix-rood); }
.vb-cheatcode h5 { font-family: var(--font-header); margin-bottom: 6px; }
.vb-gate {
  text-align: center;
  padding: 30px 0 8px;
}

/* ---------- Doorverwijs-callout naar een verwante pagina (bv. regels, borden) ---------- */
.pagina-verwijs-callout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  background: var(--mint);
  border: 1px solid var(--examenflix-rood);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin-bottom: 28px;
}
.pagina-verwijs-tekst { flex: 1 1 320px; }
.pagina-verwijs-tekst strong { display: block; margin-bottom: 4px; color: var(--inktzwart); }
.pagina-verwijs-tekst p { margin: 0; color: var(--steengrijs); font-size: 14px; }
.pagina-verwijs-knop {
  flex: 0 0 auto;
  font-size: 16px;
  padding: 14px 28px;
  box-shadow: 0 4px 14px var(--rood-gloed);
}
@media (hover: hover) {
  .pagina-verwijs-knop:hover {
    box-shadow: 0 6px 18px var(--rood-gloed-sterk);
    transform: translateY(-1px);
  }
}
@media (max-width: 560px) {
  .pagina-verwijs-callout { flex-direction: column; align-items: stretch; }
  /* In een kolom wordt de basis van 320px een hoogte: het kaartje werd ~430 px hoog. */
  .pagina-verwijs-tekst { flex-basis: auto; }
  .pagina-verwijs-knop { text-align: center; }
}

/* De omrekenaar voor het officiële oefenexamen (besluit 428). */
.vb-omrekenaar { display: grid; gap: 10px; max-width: 420px; }
.vb-omrekenaar label { display: grid; gap: 4px; font-weight: 700; font-size: 14px; }
.vb-omrekenaar select, .vb-omrekenaar input {
  /* Een keuzelijst in een grid krijgt zijn natuurlijke breedte als minimum en
     stak op 375 px ~20 px buiten de kaart (besluit 473). */
  min-width: 0; max-width: 100%;
  min-height: var(--raakvlak); padding: 8px 10px; font: inherit; font-size: 16px;
  border: 1px solid var(--lijn); border-radius: var(--radius-s); background: var(--paneel); color: inherit;
}
.omr-uitkomst { margin: 4px 0 0; min-height: 1.5em; }
/* ---------- Instructievideo's (op voorbereiding.html) — compacte grid, meerdere per rij ---------- */
.videos-sectie { margin-bottom: 28px; }
.videos-sectie h3 {
  font-size: 17px;
  margin-bottom: 12px;
}
.video-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px) {
  .video-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .video-grid { grid-template-columns: 1fr; }
}
.video-anchor { display: block; position: absolute; top: -84px; left: 0; visibility: hidden; }
.video-card {
  position: relative;
  background: var(--paneel);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.video-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--inktzwart);
}
.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Klikbare thumbnail in de kaart — opent de video groot in de lightbox */
.video-thumb {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--inktzwart);
  border: 0;
  padding: 0;
  cursor: pointer;
}
.video-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-thumb-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  color: var(--white);
  border-radius: 50%;
  font-size: 16px;
  padding-left: 3px; /* optisch centreren van het driehoekje */
  transition: background 0.15s, transform 0.15s;
}
@media (hover: hover) {
  .video-thumb:hover .video-thumb-play { background: var(--examenflix-rood); transform: translate(-50%, -50%) scale(1.08); }
}

/* Lightbox: video speelt groot af in een overlay */
.video-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
}
.video-lightbox.open { display: flex; }
.video-lightbox-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.85); }
body.video-lightbox-actief { overflow: hidden; }
.video-lightbox-inner {
  position: relative;
  width: 100%;
  max-width: 960px;
}
.video-lightbox-inner .video-embed { border-radius: var(--radius); overflow: hidden; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4); }
.video-lightbox-close {
  position: absolute;
  top: -44px;
  right: 0;
  width: 36px; height: 36px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: var(--white);
  font-size: 16px;
  cursor: pointer;
  transition: background 0.15s;
}
@media (hover: hover) {
  .video-lightbox-close:hover { background: rgba(255, 255, 255, 0.3); }
}
.video-card-body { padding: 12px 14px; }
.video-card-body h4 {
  margin-bottom: 4px;
  color: var(--inktzwart);
  font-size: 14px;
  line-height: 1.3;
}
.video-card-body p {
  color: var(--steengrijs);
  font-size: 12px;
  line-height: 1.4;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.video-domeinen { display: flex; flex-wrap: wrap; gap: 6px; }
.video-domein-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--diep-rood);
  background: var(--mint);
  border-radius: var(--pil);
  padding: 3px 9px;
  text-decoration: none;
}
@media (hover: hover) {
  .video-domein-badge:hover { background: var(--examenflix-rood); color: var(--white); }
}


/* ---------- Naslag (verkeersborden.html / verkeersregels.html) — geport uit de Verkeersexamentrainer ---------- */
/* ---------- Naslag (verkeersborden.html / verkeersregels.html) ---------- */
.naslag-zoek-wrap {
  margin-bottom: 28px;
}
.naslag-zoek-wrap input {
  width: 100%;
  box-sizing: border-box;
  padding: 14px 18px;
  font-size: var(--tekst-invoer);
  border: 2px solid var(--border-gray);
  border-radius: var(--radius);
  font-family: var(--font-body);
}
.naslag-zoek-wrap input:focus { border-color: var(--examenflix-rood); }
.naslag-zoek-rij {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.naslag-zoek-rij input { flex: 1; min-width: 220px; }
.naslag-zoek-rij select {
  /* Basis 'auto' is bij een select de breedste optietekst; met flex:0 0 auto
     liep het filter daardoor op een telefoon buiten beeld zodra een domeinnaam
     lang was. Krimpen tot min-width mag nu wél, en nooit breder dan de rij. */
  flex: 0 1 auto;
  max-width: 100%;
  box-sizing: border-box;
  min-width: 200px;
  padding: 14px 18px;
  font-size: var(--tekst-invoer);
  border: 2px solid var(--border-gray);
  border-radius: var(--radius);
  font-family: var(--font-body);
  background: var(--paneel);
}
.naslag-zoek-rij select:focus { border-color: var(--examenflix-rood); }

.naslag-groep { margin-bottom: 30px; }
.naslag-groep-titel {
  font-size: 18px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.naslag-aantal {
  font-size: 12px;
  font-weight: 700;
  color: var(--steengrijs);
  background: var(--mistgrijs);
  border-radius: var(--pil);
  padding: 2px 10px;
}
.naslag-domein-kop {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 10px 4px;
  border-bottom: 1px solid var(--border-gray);
  margin-bottom: 14px;
}
.naslag-domein-kop .groep-pijl { color: var(--steengrijs); font-size: 12px; width: 12px; }
.naslag-domein-inhoud { display: grid; gap: 14px; }

.borden-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 14px;
}
.bord-kaart {
  background: var(--paneel);
  border-radius: var(--radius-sm);
  box-shadow: var(--card-shadow);
  padding: 14px;
  text-align: center;
}
.bord-kaart-beeld { height: 64px; display: flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.bord-kaart-beeld img { max-width: 100%; max-height: 64px; }
.bord-kaart-code { font-family: var(--font-header); font-weight: 800; font-size: 13px; }
.bord-kaart-naam { font-size: 12px; color: var(--steengrijs); margin-top: 2px; }

.regel-kaart {
  background: var(--paneel);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  padding: 20px 24px;
}
.regel-kaart h4 { font-size: 16px; margin-bottom: 8px; }
/* Een theorie-item is tekst met alinea's (\n in de data); zonder pre-line
   vloeiden ze op de naslagpagina samen tot één blok (besluit 629). */
.regel-kaart p { color: var(--steengrijs); line-height: 1.6; font-size: 14px; white-space: pre-line; }
.regel-kaart .regel-bron {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border-gray);
  font-size: 12px;
  font-style: italic;
  color: var(--diep-rood);
  /* Een bron is vaak een lange URL zonder spatie; zonder breekpunt duwde die
     de kaart en de hele pagina op 375 px tot 1337 px breed (05-10). */
  overflow-wrap: anywhere;
}
.regel-kaart.gemarkeerd { box-shadow: 0 0 0 3px var(--examenflix-rood); transition: box-shadow 0.3s ease; }

.empty-state { text-align:center; color: var(--steengrijs); padding: 40px 12px; }
.hidden { display: none; }

/* ---------- Samen oefenen: aanmelden, team en ranglijst ----------
   Alle kleuren komen uit brand.css; hier staat geen enkele letterlijke
   kleurwaarde. Deze schermen horen bij het spelregister (body.register-spel),
   niet bij de examensimulatie. */

/* Aanmeldvenster (auth.js) — bovenop de bestaande .overlay/.overlay-paneel */
.auth-paneel { max-width: 420px; }
.auth-tabs { display: flex; gap: 6px; margin: 14px 0 12px; }
.auth-tab {
  flex: 1; border: 1px solid var(--lijn); background: var(--paneel); color: var(--grijs);
  border-radius: var(--radius-s); padding: 8px 10px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
.auth-tab.actief { border-color: var(--hoofdkleur); color: var(--hoofdkleur); background: var(--hoofdkleur-licht); }
.auth-label { display: block; margin-top: 10px; font-size: 14px; font-weight: 600; }
.auth-label input {
  width: 100%; margin-top: 4px; padding: 10px; font: inherit;
  border: 1px solid var(--lijn); border-radius: var(--radius-s); background: var(--paneel); color: var(--inkt);
}
.auth-label input:focus { outline: 2px solid var(--hoofdkleur); outline-offset: 1px; }
.auth-code-invoer { font-size: 22px; letter-spacing: 8px; text-align: center; }
.auth-nav-naam { color: var(--grijs); }
/* Wie oefent er? Alleen zichtbaar als het account meer dan één profiel draagt.
   Geen letterlijke kleuren: alles uit de tokens, zodat de donkere modus meekomt.
   44 px hoog is de mobiele ondergrens voor iets waar je op tikt. */
.auth-nav-profiel {
  font: inherit; min-height: 44px; padding: 6px 10px;
  border: 1px solid var(--lijn); border-radius: var(--radius-s);
  background: var(--paneel); color: var(--inkt);
}
.auth-nav-profiel:focus-visible { outline: 2px solid var(--hoofdkleur); outline-offset: 1px; }
/* De beheeringang in de menuvoet. Draagt de merkkleur omdat het het enige
   item daar is dat je ergens heen brengt; de naam ernaast is tekst. */
.auth-nav-beheer { color: var(--hoofdkleur); font-weight: 600; text-decoration: none; }
@media (hover: hover) {
  .auth-nav-beheer:hover { text-decoration: underline; }
}

/* "Je bent hier al eens ingelogd" — de snelle weg terug op een apparaat waar de
   code ooit is ingevuld. Staat bovenaan het venster, want voor wie terugkomt is
   dit de enige knop die telt. */
.auth-bekend {
  margin: 14px 0 4px; padding: 12px 14px;
  border: 1px solid var(--hoofdkleur); border-radius: var(--radius-s);
  background: var(--hoofdkleur-licht);
}
.auth-bekend .btn { width: 100%; }
.auth-scheiding {
  margin: 14px 0 10px; text-align: center; font-size: 13px; font-weight: 700; color: var(--grijs);
}

/* Uitnodiging om mee te doen — nooit blokkerend: oefenen kan zonder account. */
.uitnodiging { border-left: 5px solid var(--hoofdkleur); }

/* Keuzeschakelaar (bereik, tabbladen) — dezelfde pil als de variantschakelaar. */
.keuze-switch {
  display: inline-flex; flex-wrap: wrap; border-radius: var(--pil); overflow: hidden;
  border: 2px solid var(--border-gray); background: var(--paneel);
}
.keuze-knop {
  border: none; background: transparent; color: var(--steengrijs);
  font-family: var(--font-kop); font-weight: 800; font-size: 13px;
  padding: 7px 14px; cursor: pointer; white-space: nowrap;
}
.keuze-knop.actief { background: var(--examenflix-rood); color: var(--white); }

/* De tabbladen mogen niet afbreken: een pil die over twee regels wordt
   afgerond ziet eruit als een fout. Op een smal scherm scrol je er dus langs. */
.ranglijst-tabs { margin: 14px 0 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
.ranglijst-tabs .keuze-switch { flex-wrap: nowrap; }
.ranglijst-uitleg { margin: 8px 0 12px; }
.ranglijst-teamtip { margin: 0 0 6px; }
.tabel-scroll { overflow-x: auto; }
.ranglijst-tabel { min-width: 420px; }
.ranglijst-tabel td { font-variant-numeric: tabular-nums; }
/* Je eigen rij: je moet jezelf in één oogopslag terugvinden in een lijst van
   honderd. Kleur is niet het enige signaal — er staat ook een "jij"-label. */
.ranglijst-tabel tr.jij { background: var(--hoofdkleur-licht); }
.ranglijst-tabel tr.jij td { font-weight: 700; }

/* Team */
.team-hero {
  background: var(--paneel); border: 1px solid var(--lijn); border-left: 5px solid var(--hoofdkleur);
  border-radius: var(--radius); padding: 20px; margin-bottom: 18px;
}
.team-naam { font-family: var(--font-kop); font-weight: var(--kop-gewicht); font-size: 24px; margin-bottom: 12px; }
.team-code {
  font-family: var(--font-kop); font-weight: 800; font-size: 22px; letter-spacing: 6px;
  background: var(--hoofdkleur-licht); color: var(--hoofdkleur-diep);
  border-radius: var(--radius-s); padding: 8px 16px;
}
.team-code-veld, .team-naam-veld {
  padding: 10px; font: inherit; border: 1px solid var(--lijn);
  border-radius: var(--radius-s); background: var(--paneel); color: var(--inkt);
}
.team-code-veld { text-transform: uppercase; letter-spacing: 3px; font-weight: 700; width: 160px; }
.team-naam-veld { min-width: 220px; flex: 1; }
/* "jij" naast je eigen naam: klein en op één regel — in een smalle kolom
   wordt een gewone badge anders bijna net zo groot als de naam ernaast. */
.ranglijst-tabel .badge { white-space: nowrap; font-size: 11px; padding: 1px 6px; vertical-align: middle; }

/* Verplicht aanmelden: de pagina erachter mag niet te lezen zijn, anders is
   de drempel een vitrine. Geen kruisje, geen klik-naast-het-venster. */
.auth-overlay-verplicht { background: rgba(0, 0, 0, .74); backdrop-filter: blur(4px); }

/* Vinkjes boven het AI-opdrachtveld in beheer: welk onderdeel van de vraag mag
   het model aanraken. */
.ai-velden { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 8px; font-size: 14px; }
.ai-velden label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.ai-velden input { accent-color: var(--hoofdkleur); }

/* ============================================
   Mijn voortgang — het dashboard

   Eén scherm dat in één oogopslag alles meegeeft. Twee regels dragen de hele
   indeling:

   1. **Inklappen mag ruimte kosten, nooit informatie.** Elke uitklapper draagt
      zijn belangrijkste cijfer rechts in de kop, zodat een dichtgeklapt
      dashboard nog steeds leesbaar is. Een blok dat je moet openen om te weten
      of het de moeite waard is, open je elke keer opnieuw.
   2. **De volgorde is de boodschap.** Readiness en de examendatum staan naast
      elkaar bovenaan — een score zonder deadline zegt niets over urgentie, een
      deadline zonder score niets over wat je nog moet doen.
   ============================================ */

/* ---------- hero: readiness naast het examenmoment ---------- */
.dash-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
  margin-bottom: 16px;
}
.dash-hero.alleen-links { grid-template-columns: 1fr; }
.dash-hero-links > .readiness-kaart { margin: 0; height: 100%; }
.dash-hero-rechts { display: flex; }
.dash-hero-rechts > .streak-examen {
  margin-top: 0;
  width: 100%;
  align-content: center;
  /* De lege variant draagt `.leeg`, en dat is elders een gecentreerde
     lege-staat. Hier is het geen lege staat maar een invulformulier naast de
     readiness-score: die hoort links uit te lijnen zoals de rest van de kolom. */
  text-align: left;
}
@media (max-width: 820px) {
  .dash-hero { grid-template-columns: 1fr; }
}

/* ---------- de strook kerncijfers ---------- */
.kpi-strook {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.kpi {
  background: var(--paneel);
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  box-shadow: var(--schaduw);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.kpi-icoon { font-size: 18px; line-height: 1; }
.kpi-waarde {
  font-family: var(--font-kop);
  font-weight: var(--kop-gewicht);
  font-size: 26px;
  line-height: 1.1;
  color: var(--inkt);
}
.kpi-label { font-size: 12.5px; font-weight: 700; color: var(--grijs); }
.kpi-onder { font-size: 12px; color: var(--grijs); }

/* ---------- inklapbare blokken ---------- */
.dash-blok {
  background: var(--paneel);
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  box-shadow: var(--schaduw);
  margin-bottom: 12px;
  overflow: hidden;
}
.dash-blok > summary {
  list-style: none;
  cursor: pointer;
  /* Ruim genoeg om met een duim te raken: een kop van 32 px is op een telefoon
     een mikoefening, en dit is de enige manier om een blok te openen. */
  min-height: 52px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.dash-blok > summary::-webkit-details-marker { display: none; }
.dash-blok > summary::after {
  content: '⌄';
  margin-left: auto;
  order: 9;
  font-size: 20px;
  line-height: 1;
  color: var(--grijs);
  transition: transform .2s ease;
}
.dash-blok[open] > summary::after { transform: rotate(180deg); }
.dash-blok[open] > summary { border-bottom: 1px solid var(--lijn); }
/* Gemaakte vragen en de antwoorden van een examenpoging (besluit 421): een set
   per regel, openklappen voor de vragen. Op een telefoon mag een lange
   vraagtitel breken in plaats van de tabel buiten beeld te duwen. */
.gemaakt-groep { margin: 6px 0; }
.gemaakt-groep > summary { cursor: pointer; padding: 6px 0; }
.gemaakt-groep table.resultaat { font-size: 14px; }
.gemaakt-groep table.resultaat td { overflow-wrap: anywhere; vertical-align: top; }
@media (hover: hover) {
  .dash-blok > summary:hover { background: var(--achtergrond); }
}
.dash-blok-kop {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 200px;
  min-width: 0;
  font-family: var(--font-kop);
  font-weight: 700;
  font-size: 15.5px;
}
.dash-blok-kop-groot { font-family: var(--font-kop); font-weight: 700; font-size: 16.5px; }
.dash-blok-stand {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 13px;
  color: var(--grijs);
  white-space: nowrap;
}
.dash-stand-groot {
  font-family: var(--font-kop);
  font-weight: var(--kop-gewicht);
  font-size: 20px;
  color: var(--inkt);
}
.dash-blok-inhoud { padding: 18px; }
.dash-kaart {
  background: var(--paneel);
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  box-shadow: var(--schaduw);
  padding: 18px;
  margin-bottom: 12px;
}
.dash-voet { margin-top: 22px; }
.knop-klein { padding: 2px 8px; }
.uitslag-goed { color: var(--goed-tekst); }
.uitslag-fout { color: var(--fout-tekst); }

/* ---------- de uitleg bovenaan ---------- */
.uitleg-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}
.uitleg-item h4 { font-size: 14.5px; margin: 6px 0 4px; }
.uitleg-item p { color: var(--grijs); font-size: 13px; line-height: 1.55; margin: 0; }
.uitleg-icoon { font-size: 19px; line-height: 1; }

/* ---------- foutenherstel ---------- */
.herstel-kaart.leeg p { margin: 6px 0 0; }
.herstel-kop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--lijn);
}
.herstel-kop strong { display: block; font-family: var(--font-kop); font-size: 16px; }
.herstel-kop .stil { display: block; margin-top: 3px; max-width: 46ch; font-size: 13px; }
.herstel-totaal {
  font-family: var(--font-kop);
  font-weight: var(--kop-gewicht);
  font-size: 32px;
  line-height: 1;
  color: var(--hoofdkleur);
  text-align: right;
}
.herstel-totaal span { display: block; font-size: 12px; font-weight: 700; color: var(--grijs); }
.herstel-rij {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--lijn);
}
.herstel-rij:last-of-type { border-bottom: none; }
.herstel-rij-tekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.herstel-rij-tekst strong { font-size: 14.5px; }
.herstel-cijfers { font-size: 13.5px; color: var(--grijs); }
.herstel-cijfers strong { color: var(--inkt); }
.herstel-rij-tekst .stil { font-size: 12.5px; }
.herstel-ring {
  position: relative;
  flex-shrink: 0;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  /* Het verloop zelf komt uit de style van het element — het percentage
     verschilt per rij. Zie Trainer.Herstel._ring(). */
  background: var(--achtergrond);
  display: grid;
  place-items: center;
}
.herstel-ring::before {
  content: '';
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background: var(--paneel);
}
.herstel-ring-cijfer {
  position: relative;
  font-family: var(--font-kop);
  font-weight: var(--kop-gewicht);
  font-size: 15px;
  color: var(--inkt);
}
.herstel-actie { margin-top: 14px; }

/* ---------- schaalkiezer (dag / week / maand) ---------- */
.schaal-kiezer { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.schaal-knop {
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  /* 40 px hoog: dit zijn drie knoppen naast elkaar op een telefoon. */
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--lijn);
  border-radius: 999px;
  background: var(--paneel);
  color: var(--grijs);
  cursor: pointer;
}
.schaal-knop.actief { background: var(--hoofdkleur); border-color: var(--hoofdkleur); color: var(--white); }
@media (hover: hover) {
  .schaal-knop:not(.actief):hover { border-color: var(--hoofdkleur); color: var(--hoofdkleur); }
}

/* ---------- missiehistorie ---------- */
.historie-lijst { display: flex; flex-direction: column; gap: 10px; }
.historie-rij {
  border: 1px solid var(--lijn);
  border-radius: var(--radius-s);
  padding: 12px 14px;
  background: var(--achtergrond);
}
.historie-kop { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.historie-kop strong { font-family: var(--font-kop); font-size: 14.5px; }
.historie-score { font-family: var(--font-kop); font-weight: 700; font-size: 14px; color: var(--grijs); }
.historie-score.goed { color: var(--goed-tekst); }
.historie-score.matig { color: var(--waarschuwing-tekst); }
.historie-score.zwak { color: var(--fout-tekst); }
.historie-meta { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 4px; font-size: 12.5px; color: var(--grijs); }
.historie-meta strong { color: var(--inkt); }
.historie-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.historie-badge {
  font-size: 12px;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid var(--lijn);
  background: var(--paneel);
  color: var(--grijs);
}
.historie-badge.klaar { border-color: var(--goed); color: var(--goed-tekst); }
.historie-badge em { font-style: normal; font-weight: 700; }

/* ---------- dagboek ---------- */
.dagboek { display: flex; flex-direction: column; gap: 6px; }
.dagboek-rij { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.dagboek-label { flex: 0 0 118px; color: var(--grijs); }
.dagboek-balk {
  flex: 1 1 auto;
  min-width: 40px;
  height: 10px;
  border-radius: 999px;
  background: var(--achtergrond);
  overflow: hidden;
}
.dagboek-vul { display: block; height: 100%; border-radius: 999px; background: var(--hoofdkleur); }
.dagboek-getal { flex: 0 0 34px; text-align: right; font-weight: 700; }
.dagboek-pct { flex: 0 0 46px; text-align: right; font-family: var(--font-kop); font-weight: 700; color: var(--grijs); }
.dagboek-pct.goed { color: var(--goed-tekst); }
.dagboek-pct.matig { color: var(--waarschuwing-tekst); }
.dagboek-pct.zwak { color: var(--fout-tekst); }
.dagboek-merken { flex: 0 0 auto; display: flex; gap: 6px; font-size: 12px; color: var(--grijs); }
@media (max-width: 560px) {
  .dagboek-label { flex-basis: 74px; }
  .dagboek-merken { display: none; }
}

/* ---------- per onderwerp ---------- */
.dash-blok[data-blok^="onderwerp:"] {
  box-shadow: none;
  border-radius: var(--radius-s);
  margin-bottom: 8px;
}
.dash-blok[data-blok^="onderwerp:"] > summary { padding: 12px 14px; }
/* Mag krimpen en afbreken: een lange naam ("Deeltjes, bindingen en
   eigenschappen") viel op 375 px rechts weg (doorloop scheikunde-havo 06-10). */
.onderwerp-naam { flex: 0 1 auto; min-width: 0; }
.onderwerp-balk { flex: 1 1 90px; min-width: 60px; margin-top: 0; }
.onderwerp-score { font-family: var(--font-kop); font-weight: 700; color: var(--grijs); }
.onderwerp-score.goed { color: var(--goed-tekst); }
.onderwerp-score.matig { color: var(--waarschuwing-tekst); }
.onderwerp-score.zwak { color: var(--fout-tekst); }
.onderwerp-aantal { font-size: 12.5px; }
.onderwerp-cijfers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.onderwerp-getal {
  display: block;
  font-family: var(--font-kop);
  font-weight: var(--kop-gewicht);
  font-size: 20px;
  line-height: 1.2;
}
.onderwerp-cijfers .stil { font-size: 12.5px; }
@media (max-width: 560px) {
  .dash-blok-kop { flex-basis: 100%; flex-wrap: wrap; }
  .onderwerp-balk { flex-basis: 100%; }
}

/* ---------- Het mini-proefexamen en het koopscherm (besluit 586) ----------
   Het oproepblok onder de uitslag van de proef en de prijskeuze op /prijzen.
   Alleen tokens; de vorm is die van een paneel met een rand in de hoofdkleur,
   zodat het blok zich onderscheidt van de uitslag erboven zonder te schreeuwen. */
.proef-oproep { border-color: var(--hoofdkleur); border-width: 2px; }
.proef-oproep-lijst { margin: 0 0 12px; padding-left: 20px; display: grid; gap: 4px; }
.proef-oproep-prijs { margin: 0 0 14px; }
.proef-kop { background: var(--paneel-grijs); }
.prijs-keuze { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.prijs-optie {
  display: flex; flex-direction: column; gap: 4px; padding: 14px 16px;
  border: 1px solid var(--lijn); border-radius: var(--radius-s); background: var(--paneel);
}
.prijs-label { font-weight: 700; }
.prijs-bedrag { font-family: var(--font-kop); font-weight: var(--kop-gewicht); font-size: 28px; color: var(--hoofdkleur); }

/* De vectorpijl (besluit 618): vragen.js maakt van OP⃗ een span; de pijl staat
   erboven als een lijn met een punt, in de tekstkleur. Het combinerende teken
   U+20D7 zelf tekent Open Sans niet. */
.vec { position: relative; display: inline-block; padding-top: 0.28em; line-height: 1; }
.vec::before {
  content: ""; position: absolute; left: 0.04em; right: 0.12em; top: 0.08em;
  border-top: 0.07em solid currentColor;
}
.vec::after {
  content: ""; position: absolute; right: 0; top: -0.005em; width: 0; height: 0;
  border-left: 0.24em solid currentColor;
  border-top: 0.12em solid transparent; border-bottom: 0.12em solid transparent;
}
.vec-voorlezen {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}