/* ============================================
   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; }
.nav a:not(.nav-merk):hover, .nav a.actief { color: var(--hoofdkleur); }
.nav-rechts { margin-left: auto; }

/* ---------- koppen ---------- */
.kop { padding: 28px 0 18px; }
.kop h1 { margin: 0 0 6px; font-size: 30px; }
.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;
}
.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; }

/* ---------- voortgangsbalk ---------- */
.balk { height: 6px; background: var(--lijn); border-radius: 99px; 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);
}
.btn:hover { filter: brightness(.97); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { background: var(--hoofdkleur); color: var(--white); }
.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; }
.vraag-tekst { font-family: var(--font-kop); font-weight: var(--kop-gewicht); font-size: 21px; margin-bottom: 14px; }
.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; }
/* 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 {
  content: '🔍 klik om te vergroten';
  display: block; margin-top: 4px;
  font-size: 12px; color: var(--grijs);
}
@media (hover: none) {
  .vraag-beeld::after { content: '🔍 tik om te vergroten'; }
}
.vraag-context {
  background: var(--achtergrond); border: 1px solid var(--lijn);
  border-radius: var(--radius-s); padding: 12px; margin-bottom: 16px; font-size: 15px;
}
.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: 16px; line-height: 1.45;
}
.optie .optie-tekst { flex: 1; }
.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); }

/* ---------- 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 ---------- */
.uitslag { border-radius: var(--radius-s); padding: 12px 14px; font-weight: 700; margin-bottom: 12px; }
.uitslag.goed { background: var(--goed-bg); color: var(--goed); }
.uitslag.fout { background: var(--fout-bg); color: var(--fout); }
.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; }
.uitwerking p { margin: 0; }
.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; }

/* 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: 14px; }

/* ---------- 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; }
/* 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: 99px; 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: 99px; 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); }

.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); }

@media (max-width: 600px) {
  .situaties-rij { grid-template-columns: 1fr; }
  .kop h1 { font-size: 24px; }
  .vraag-tekst { font-size: 18px; }
}

/* 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; }
  .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: 999px; background: var(--achtergrond); overflow: hidden; margin: 12px 0 10px; }
.readiness-meter-vul { height: 100%; border-radius: 999px; 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: 999px; background: var(--achtergrond); overflow: hidden; margin: 12px 0 8px; }
.xp-meter-vul { height: 100%; border-radius: 999px; 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(--groen-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;
}

/* ---------- 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;
}
.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;
}
.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; }
.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); }

/* ---------- Spelstrook op de startpagina ----------
   Staat bewust ná het aanbod: het spelelement is een uitnodiging, geen eerste
   indruk. Wie hier voor het eerst komt wil weten wát hij kan doen. */
.spel-strook {
  background: var(--paneel);
  border-radius: var(--radius);
  box-shadow: var(--schaduw);
  padding: 24px 28px;
  margin-top: 26px;
}
.spel-strook h3 { margin: 0 0 6px; font-size: 18px; }
.spel-strook-intro { color: var(--grijs); font-size: 14px; margin: 0 0 20px; max-width: 640px; }
.spel-strook-rij { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.spel-item h4 { font-size: 15px; margin: 8px 0 4px; }
.spel-item p { color: var(--grijs); font-size: 13px; line-height: 1.5; margin: 0; }
.spel-icoon { font-size: 20px; line-height: 1; }
.spel-strook-acties {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--lijn);
}
@media (max-width: 700px) {
  .spel-strook { padding: 20px; }
  .spel-strook-rij { grid-template-columns: 1fr; gap: 16px; }
}

/* 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(--white);
  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 rgba(240, 34, 38, 0.35);
}
.pagina-verwijs-knop:hover {
  box-shadow: 0 6px 18px rgba(240, 34, 38, 0.45);
  transform: translateY(-1px);
}
@media (max-width: 560px) {
  .pagina-verwijs-callout { flex-direction: column; align-items: stretch; }
  .pagina-verwijs-knop { text-align: center; }
}

/* ---------- 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(--white);
  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;
}
.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;
}
.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: 999px;
  padding: 3px 9px;
  text-decoration: none;
}
.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: 16px;
  border: 2px solid var(--border-gray);
  border-radius: var(--radius);
  font-family: var(--font-body);
}
.naslag-zoek-wrap input:focus { outline: none; 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: 15px;
  border: 2px solid var(--border-gray);
  border-radius: var(--radius);
  font-family: var(--font-body);
  background: var(--white);
}
.naslag-zoek-rij select:focus { outline: none; 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: 999px;
  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(--white);
  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; }
.bord-kaart-naam.onbevestigd { font-style: italic; color: #b08900; }

.regel-kaart {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  padding: 20px 24px;
}
.regel-kaart h4 { font-size: 16px; margin-bottom: 8px; }
.regel-kaart p { color: var(--steengrijs); line-height: 1.6; font-size: 14px; }
.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);
}
.regel-kaart.onbevestigd { border-left: 3px solid #b08900; }
.regel-kaart.gemarkeerd { box-shadow: 0 0 0 3px var(--examenflix-rood); transition: box-shadow 0.3s ease; }
.regel-status {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  font-style: normal;
  color: #b08900;
  background: #fbf1d6;
  border-radius: 999px;
  padding: 2px 8px;
  margin-left: 6px;
  vertical-align: middle;
}

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

/* ---------- Variantschakelaar (bovenbalk) ----------
   De "4|3"-pil uit de rekentrainer, generiek: verschijnt automatisch bij
   elke trainer met twee of meer actieve varianten. */
.variant-switch {
  display: inline-flex;
  border-radius: 999px;
  overflow: hidden;
  border: 2px solid var(--border-gray);
  background: var(--white);
  margin-left: 14px;
  flex-shrink: 0;
}
.variant-knop {
  border: none;
  background: transparent;
  color: var(--steengrijs);
  font-family: var(--font-header);
  font-weight: 800;
  font-size: 13px;
  padding: 6px 14px;
  cursor: pointer;
}
.variant-knop.actief { background: var(--examenflix-rood); color: var(--white); }

/* ---------- 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); }

/* 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: 999px; overflow: hidden;
  border: 2px solid var(--border-gray); background: var(--white);
}
.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); }