/* ============================================================
   LETTERTYPE — van je eigen server, niet van Google

   Tot v1.27 haalde de app Plus Jakarta Sans bij fonts.googleapis.com.
   Daarmee ging bij élk paginabezoek het IP-adres van de gebruiker naar
   Google, ook op het inlogscherm. Een IP-adres is een persoonsgegeven,
   en er is geen goede reden om het weg te geven voor iets wat je zelf
   kunt neerzetten.

   Ontbreekt een bestand, dan valt de browser terug op het
   systeemlettertype. Anders van vorm, even leesbaar — daarom staat
   hier geen tweede bron naar het internet.

   Waar je de bestanden vandaan haalt: assets/fonts/LEESMIJ.txt.
   ============================================================ */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/jakarta-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/jakarta-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/jakarta-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/jakarta-800.woff2') format('woff2');
}

/* Het icoonlettertype heeft geen regel nodig in dit bestand. Dat komt
   uit assets/css/tabler-icons.min.css, waar naast de @font-face ook de
   ruim vierduizend iconenklassen in staan. Header.php kiest welke van
   de twee wordt geladen: de eigen kopie als die er staat, anders het
   CDN. Zonder die klassen zie je lege vakjes in plaats van betekenis,
   en dat is erger dan een ander lettertype. */

/* ============================================================
   RecruiterIQ — gamified stijl
   Kleuren centraal aanpassen? Doe het hier bovenin.
   ============================================================ */
:root {
  --kleur: #2563eb;         /* oceaanblauw (hoofdkleur) */
  --kleur-donker: #1d4ed8;
  --kleur-diep: #1e40af;    /* knop-onderrand */
  --kleur-licht: #e8f0fe;   /* zachte blauwe tint */
  --groen: #22c55e;
  --groen-donker: #16a34a;
  --groen-fel: #16d05f;          /* fellere groen: start de quiz */
  --groen-fel-donker: #0ea54a;
  --amber: #f59e0b;
  --amber-licht: #fef3c7;
  --rood: #ef4444;
  --grijs: #64748b;
  --licht: #f4f7fb;         /* paginakleur */
  --rand: #e2e8f0;
  --tekst: #1f2937;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  background: var(--licht);
  color: var(--tekst);
  line-height: 1.6;
}

/* ---------- Testomgeving-balk ---------- */
.testbalk {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: repeating-linear-gradient(45deg, #b91c1c, #b91c1c 12px, #a31616 12px, #a31616 24px);
  color: #fff; font-weight: 800; font-size: .85rem; letter-spacing: .03em;
  padding: 8px 14px; text-align: center;
}
.testbalk i { font-size: 1.1rem; }

/* ============================================================
   MENUBALK
   Vier elementen: logo, zoeken, punten, avatar. Alles wat over
   de gebruiker gaat zit achter de avatar.
   De balk loopt van rand tot rand: het logo staat helemaal links,
   de avatar helemaal rechts. De inhoud eronder blijft gecentreerd.
   ============================================================ */
.topbar { background: #fff; border-bottom: 1px solid var(--rand); }
.topbar-in {
  padding: 0 24px;
  height: 68px; display: flex; align-items: center; gap: 14px;
}
.topbar-in .rek { flex: 1; }

/* Logo: het woordmerk draagt, het beeldmerk is de begeleider */
.topbar .logo { display: inline-flex; align-items: center; text-decoration: none; flex: none; }
/* Alleen het woordmerk. Zonder icoon ernaast mag de naam iets groter:
   hij is nu in zijn eentje het merk. */
.logo-tekst { font-size: 1.55rem; font-weight: 800; color: var(--tekst); letter-spacing: -.025em; }
.logo-tekst span { color: var(--kleur); }
.topbar .logo:hover .logo-tekst { opacity: .85; }

/* Licht dat door de IQ loopt.
   -------------------------------------------------------------
   Twee eerdere pogingen lieten de letters zélf van kleur worden:
   het verloop wás de letter, dus waar het licht passeerde werd de
   IQ lichter en op een witte balk las dat als wegvegen.

   Nu ligt het anders. De letters blijven onaangeroerd en volledig
   blauw. Daar bovenop komt een tweede, identieke "IQ" als
   ::after-laag, die alleen uit licht bestaat: doorzichtig, met een
   smalle lichtstreep erin. Die streep schuift over de letters
   heen. Buiten de streep is de laag volledig doorzichtig, dus zie
   je gewoon het blauw eronder.

   Het licht is halfdoorzichtig wit, geen dekkende kleur. Het telt
   dus op bij het blauw in plaats van het te vervangen — daardoor
   licht de letter op en verdwijnt hij niet.

   Het loopt alleen waar .glans staat: het inlogscherm en de
   homepage. Op elk ander scherm is de gebruiker aan het leren en
   hoort er niets te bewegen in de ooghoek. */
.logo-tekst.glans span {
  position: relative;
  display: inline-block;
  color: var(--kleur);
}
.logo-tekst.glans span::after {
  content: 'IQ';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(100deg,
    transparent 0%,             transparent 43%,
    rgba(255,255,255,.35) 47%,  rgba(255,255,255,.8) 50%,  rgba(255,255,255,.35) 53%,
    transparent 57%,            transparent 100%);
  background-size: 300% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: logoglans 3.2s linear infinite;
}
@keyframes logoglans {
  from { background-position: 130% 0; }
  to   { background-position: -30% 0; }
}

/* Kent de browser background-clip: text niet, dan zou de ::after
   als een tweede, ondoorzichtige IQ over de eerste heen komen te
   staan. Daarom komt de laag er alleen als de browser de techniek
   ook echt aankan. Zo niet: gewoon blauwe letters, precies wat er
   voorheen stond. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .logo-tekst.glans span::after { content: none; }
}

/* Wie beweging heeft uitgezet, krijgt het gewone woordmerk. De
   lichtlaag verdwijnt in zijn geheel; de letters eronder zijn al
   goed, dus er valt niets te herstellen. */
@media (prefers-reduced-motion: reduce) {
  .logo-tekst.glans span::after { content: none; }
}

/* Zoeken: dicht een vergrootglas, open een veld dat naar links groeit */
/* De zoekbalk staat altijd open. Zoeken is de snelste weg naar een
   begrip dat je net in een gesprek hoorde; dat verstop je niet achter
   een klik. */
.zoekbalk {
  display: flex; align-items: center; gap: 9px; position: relative;
  /* Vaste breedte, met een rekstuk aan weerszijden: zo blijft het veld
     midden in de balk staan, ook als de puntenteller groeit. */
  flex: 0 1 420px; min-width: 0; max-width: 420px; padding: 7px 14px;
  background: var(--licht); border: 1px solid var(--rand); border-radius: 999px;
  transition: border-color .15s;
}
.zoekbalk:focus-within { border-color: var(--kleur); background: #fff; }
.zoekbalk .zoek-dropdown { left: 0; right: auto; }
.zoek-icoon { color: var(--kleur); font-size: 1.05rem; flex: none; }
/* De 2px links is geen sierruimte. Zonder padding begint de tekst
   precies op de rand van het veld, en een input knipt alles af wat
   daarbuiten valt. Bij een b, h, k of l steekt de linkerstok een
   fractie uit en verdween die. Bij een o of e zag je het niet.
   Boven en onder blijft het nul: de hoogte van de balk komt van
   .zoekbalk zelf. */
.zoekbalk input[type=search] {
  flex: 1; min-width: 0; border: 0; background: none; outline: none;
  font-family: inherit; font-size: .95rem; color: var(--tekst); padding: 0 2px;
}

/* Op slot tijdens een quiz. Zichtbaar vergrendeld, niet weggehaald:
   een element dat ineens verdwenen is, leest als een storing. En zo
   weet je meteen dat het straks weer kan. */
.zoekbalk.opslot { border-style: dashed; background: #f1f5f9; cursor: not-allowed; }
.zoekbalk.opslot .zoek-icoon { color: #b6bfcd; }
.zoek-slottekst {
  font-size: .9rem; color: #94a3b8; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}

/* Punten: doel van de vliegende sterren */
.topbar .punten {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  background: var(--amber-licht); color: #92600a;
  padding: 6px 13px; border-radius: 999px; font-size: .9rem; font-weight: 700;
}
.topbar .scheiding { width: 1px; height: 22px; background: var(--rand); flex: none; }

/* ---------- Avatar met voortgangsring ---------- */
.accountblok { position: relative; flex: none; }
/* De avatarknop is een <button> en erfde daardoor het verloop en de
   schaduw van de basisregel. Hij is geen knop met een vlak maar een
   ring met een rondje erin; alles wat de basisregel meegeeft moet er
   hier weer af. */
.avatarknop {
  background: none; background-image: none;
  box-shadow: none; border-radius: 0; padding: 0;
}
.avatarknop:hover, .avatarknop:active { box-shadow: none; transform: none; }
.avatarknop {
  position: relative; width: 54px; height: 54px; padding: 0;
  background: none; border: 0; cursor: pointer; display: block;
}
.avatarknop .ring { position: absolute; inset: 0; }
.ring-baan path { stroke: #ccd6e4; stroke-width: 3; fill: none; stroke-linecap: round; }
.ring-vol  path { stroke: var(--groen); stroke-width: 3; fill: none; stroke-linecap: round; }
.avatar-in {
  position: absolute; inset: 8px; border-radius: 50%;
  background: var(--kleur-licht); color: var(--kleur-diep);
  display: flex; align-items: center; justify-content: center;
  font-size: .92rem; font-weight: 800; letter-spacing: .02em;
}
.lvl-schild {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: -3px;
  min-width: 31px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--kleur); color: #fff; font-size: .68rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #fff; white-space: nowrap;
}
/* Alles af: de avatar zelf kleurt groen. Eenmalig moment. */
.avatarknop.klaar .avatar-in { background: var(--groen); color: #fff; }
.avatarknop.klaar .lvl-schild { background: var(--groen-donker); }
.avatarknop:hover .avatar-in { background: #dbe6fb; }

/* ---------- Accountmenu ---------- */
.accountmenu {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 70;
  width: 292px; background: #fff; border: 1px solid var(--rand);
  border-radius: 16px; padding: 6px; text-align: left;
  box-shadow: 0 14px 34px rgba(15,23,42,.14);
  animation: infade .15s ease;
}
.accountmenu[hidden] { display: none; }
.am-kop { display: flex; align-items: center; gap: 12px; padding: 12px 14px 13px; }
.am-avatar {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  background: var(--kleur-licht); color: var(--kleur-diep);
  display: flex; align-items: center; justify-content: center;
  font-size: .88rem; font-weight: 800;
}
.am-wie { min-width: 0; }
.am-naam { display: block; font-size: .95rem; font-weight: 700; }
.am-level { display: block; font-size: .8rem; color: var(--grijs); }
.am-voortgang { background: var(--licht); border-radius: 10px; padding: 12px 14px; margin: 0 8px 6px; }
.am-blokjes { display: flex; gap: 4px; margin-bottom: 7px; }
.am-blok { flex: 1; height: 6px; border-radius: 3px; background: #e0e6ef; overflow: hidden; }
.am-blok span { display: block; height: 100%; border-radius: 3px; background: var(--groen); }
.am-regel { margin: 0; font-size: .8rem; color: var(--grijs); line-height: 1.45; }
.am-regel strong { color: var(--tekst); }
.am-traject-rij { border-top: 1px solid var(--rand); margin-top: 10px; padding-top: 10px; }
.am-levelbalk { height: 6px; border-radius: 3px; background: #e0e6ef; overflow: hidden; margin-bottom: 7px; }
.am-levelbalk span { display: block; height: 100%; border-radius: 3px; background: var(--kleur); }
.am-link {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; margin: 0 6px; border-radius: 10px;
  text-decoration: none; color: var(--tekst); font-size: .93rem; font-weight: 600;
}
.am-link i { font-size: 1.1rem; color: var(--grijs); }
.am-link:hover { background: var(--licht); }
.am-link.actief { color: #92600a; }
.am-link.uit { color: var(--rood); margin-top: 4px; border-top: 1px solid var(--rand); border-radius: 0 0 10px 10px; }
.am-link.uit i { color: var(--rood); }
.am-kopje {
  margin: 8px 20px 2px; font-size: .68rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .07em; color: var(--grijs);
  border-top: 1px solid var(--rand); padding-top: 10px;
}

@media (max-width: 640px) {
  .topbar-in { height: 60px; gap: 10px; padding: 0 14px; }
  .logo-tekst { font-size: 1.25rem; }
  .topbar .punten, .topbar .scheiding { display: none; }
  .avatarknop { width: 46px; height: 46px; }
  .lvl-schild { display: none; }
  .accountmenu { width: 268px; }
}

/* Level-kaart op voortgangspagina */
.level-kaart { display: flex; align-items: center; gap: 18px; }
.level-badge {
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--kleur); color: #fff; font-size: 30px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.level-titel { font-weight: 800; font-size: 1.2rem; margin-bottom: 6px; }

/* Badges */
.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; }
.badge-item {
  background: #fff; border: 2px solid var(--rand); border-radius: 16px;
  padding: 18px 12px; text-align: center; transition: transform .15s;
}
.badge-item.behaald { border-color: var(--groen); background: #f0fdf4; }
.badge-item.behaald:hover { transform: translateY(-3px); }
.badge-cirkel {
  width: 54px; height: 54px; border-radius: 50%; margin: 0 auto 8px;
  display: flex; align-items: center; justify-content: center; font-size: 26px;
  background: var(--kleur-licht); color: var(--kleur);
}
.badge-item.behaald .badge-cirkel { background: #dcfce7; color: var(--groen-donker); }
.badge-item.vergrendeld { opacity: .6; }
.badge-item.vergrendeld .badge-cirkel { filter: grayscale(1); }
.badge-naam { font-weight: 700; font-size: .95rem; }
.badge-status { font-size: .82rem; color: var(--grijs); margin-top: 4px; display: flex; align-items: center; justify-content: center; gap: 4px; }
.badge-item.behaald .badge-status { color: var(--groen-donker); font-weight: 700; }

.container { max-width: 960px; margin: 0 auto; padding: 28px 16px; }

h1 { margin-top: 0; font-weight: 800; }
h2 { font-weight: 700; }

/* ---------- Kaarten ----------
   Vanaf v1.39.0 draagt de rand niet meer, maar het licht.

   Een rand van 2px tekent elk vak in; je oog gaat naar de lijnen in
   plaats van naar wat erin staat. Eén pixel plus een flinterdunne
   schaduw doet hetzelfde werk — de kaart afbakenen — maar dan door
   hem los te tillen van de achtergrond in plaats van hem te omlijnen.

   De hoeken gaan van 20 naar 16px. Twintig is zacht, en naast een
   knop van 12 lijken het twee vormentalen. Zestien en twaalf horen
   bij elkaar.

   Bij hover groeit de schaduw en tilt de kaart 2px op. Drie was een
   sprong; twee is zweven. */
.kaart {
  background: #fff; border: 1px solid #e8edf5; border-radius: 16px;
  padding: 22px; margin-bottom: 16px;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
  transition: transform .2s, box-shadow .2s;
}
.kaart:hover { box-shadow: 0 6px 20px rgba(15,23,42,.08); }
.kaart.smal { max-width: 400px; margin: 40px auto; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.grid .kaart:hover { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) {
  .kaart { transition: none; }
  .grid .kaart:hover { transform: none; }
}

/* Module-icoon in gekleurd blok */
.module-icoon {
  width: 52px; height: 52px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  background: var(--kleur-licht); color: var(--kleur); font-size: 26px;
  margin-bottom: 10px;
}
.module h2 { margin: 8px 0 4px; font-size: 1.15rem; }
.module p { color: var(--grijs); font-size: .92rem; }

/* Voortgangsring op modulekaart */
.ring { position: relative; width: 54px; height: 54px; float: right; }
.ring svg { transform: rotate(-90deg); }
.ring span {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; color: var(--kleur);
}
.ring.ring-klaar span { color: var(--groen); font-size: 20px; }
.ring.slot span { color: #b0b8c9; font-size: 22px; }
.kaart.module.vergrendeld { opacity: .82; }
.kaart.module.vergrendeld .module-icoon { filter: grayscale(1); background: #eef2f7; color: var(--grijs); }
.badge.slot { background: #eef2f7; color: var(--grijs); }

/* ---------- Knoppen ----------
   Tot v1.38 stond hier een nagebootste 3D-knop: een onderrand van 4px
   in een donkerder blauw. Dat is de Duolingo-truc, en die zegt "druk
   mij in, dit is leuk". Precies goed voor een taalapp voor tieners,
   precies verkeerd voor iets waar een bureau per recruiter voor
   betaalt.

   Vanaf v1.39.0 komt de diepte van licht in plaats van een streep.
   Drie lagen, van boven naar beneden:

     1. inset 0 1px 0 rgba(255,255,255,.28)
        Een lichtlijn langs de bovenrand — hetzelfde idee als het licht
        dat door de IQ in het woordmerk loopt. Dat rijm is de reden dat
        deze vorm bij dit merk hoort en niet zomaar mooi is.

     2. het verloop
        Van boven iets lichter naar onder iets donkerder, alsof er
        licht van boven op valt. Zo subtiel dat je het pas ziet als je
        het wegneemt.

     3. twee schaduwen
        Eén scherpe van 1px die de knop op de ondergrond zet, en één
        wijde met een blauwe ondertoon die hem laat zweven. Die tint is
        wat het duur maakt: een grijze schaduw onder een blauwe knop
        ziet er vuil uit.

   Hover tilt 1px op en laat de wijde schaduw groeien. Klikken duwt
   1px terug. Geen filter: brightness meer — dat verschoot alleen de
   kleur en voelde als een lampje, niet als een knop.

   Voor de gekleurde varianten staat het verloop in een variabele, zo
   hoeft elke variant maar één regel. */
.knop, button {
  --knop-boven: #3b7ef0;
  --knop-onder: #1f57cf;
  --knop-glans: rgba(255,255,255,.28);
  --knop-schaduw: 37,99,235;
  display: inline-flex; align-items: center; gap: 8px;
  background-image: linear-gradient(180deg, var(--knop-boven) 0%, var(--knop-onder) 100%);
  background-color: var(--kleur);
  color: #fff; border: none;
  padding: 12px 22px; border-radius: 12px;
  text-decoration: none; cursor: pointer;
  font-size: .96rem; font-weight: 700; font-family: inherit;
  letter-spacing: -.006em;
  box-shadow:
    inset 0 1px 0 var(--knop-glans),
    0 1px 2px rgba(15,23,42,.16),
    0 5px 14px rgba(var(--knop-schaduw), .22);
  transition: transform .18s, box-shadow .18s;
}
/* display:inline-flex wint van hidden; deze regel zet dat recht. */
.knop[hidden], button[hidden] { display: none; }
.knop:hover, button:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 var(--knop-glans),
    0 2px 4px rgba(15,23,42,.16),
    0 9px 22px rgba(var(--knop-schaduw), .3);
}
.knop:active, button:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 1px 0 var(--knop-glans),
    0 1px 2px rgba(15,23,42,.18);
}
/* Wie beweging heeft uitgezet, krijgt geen sprongetje. De schaduw mag
   blijven groeien: dat is geen beweging, dat is licht. */
@media (prefers-reduced-motion: reduce) {
  .knop, button { transition: box-shadow .18s; }
  .knop:hover, button:hover, .knop:active, button:active { transform: none; }
}

/* Vier elementen zijn wél een <button> maar geen knop: de antwoorden
   in een les, de twee helften van een koppelopdracht en de kop van een
   uitklaptegel. Het zijn vlakken waar je op klikt, geen knoppen die
   naar voren komen.

   Ze zetten zelf al `background: #fff`, dus het verloop verdwijnt
   vanzelf — maar de schaduw en de lichtlijn niet, en die gaven ze een
   blauwe gloed. Hier gaat alles er in één keer af. Zonder dit blok is
   de nieuwe knopstijl een regressie in elke les. */
.tv-optie, .kp-vraag, .kp-ant, .ekop {
  background-image: none;
  box-shadow: none;
  letter-spacing: normal;
}
.tv-optie:hover, .kp-vraag:hover, .kp-ant:hover, .ekop:hover,
.tv-optie:active, .kp-vraag:active, .kp-ant:active, .ekop:active {
  box-shadow: none;
}
/* De uitklapkop heeft helemaal geen eigen achtergrond: die hoort de
   kleur van de tegel eronder te tonen. */
.ekop { background-color: transparent; color: var(--tekst); }
/* Grijs is een nevenweg, geen knop die roept: geen gekleurde schaduw
   en een zwakkere lichtlijn, anders gaat hij glimmen. */
.knop.grijs {
  --knop-boven: #f3f6fa; --knop-onder: #e6ebf3;
  --knop-glans: rgba(255,255,255,.9); --knop-schaduw: 15,23,42;
  color: var(--grijs);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9),
              0 1px 2px rgba(15,23,42,.08), 0 3px 8px rgba(15,23,42,.06);
}
.knop.groen { --knop-boven: #34c06f; --knop-onder: #189a4d; --knop-schaduw: 34,197,94; }
/* Quiz-startknop: fellere groen, want dit is de eindstap van een module */
.knop.groen-fel {
  --knop-boven: #37cf72; --knop-onder: #17a34f; --knop-schaduw: 34,197,94; color: #fff;
}
/* Quiz-icoon: rood, als visueel signaal dat er getoetst wordt */
.quiz-icoon { color: var(--rood); }
.knop.groot { font-size: 1.08rem; padding: 13px 26px; }
.knop.klein { padding: 8px 15px; font-size: .85rem; border-radius: 10px; }

/* Admin-testblok op de modulepagina */
.admin-test {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; justify-content: center;
  margin-top: 10px; padding: 10px; border: 1px dashed var(--rand); border-radius: 12px;
}
.admin-test-label { font-size: .8rem; font-weight: 800; color: var(--grijs); display: inline-flex; align-items: center; gap: 5px; }
.knop.uit { opacity: .55; cursor: not-allowed; pointer-events: none; }

/* ---------- Formulieren ---------- */
form label { display: block; margin-bottom: 14px; font-weight: 700; font-size: .95rem; }
form input[type=text], form input[type=email], form input[type=password],
form input[type=search], form textarea, form select {
  display: block; width: 100%; margin-top: 5px; padding: 11px 13px;
  border: 2px solid var(--rand); border-radius: 12px; font-size: 1rem;
  font-family: inherit; background: #fff;
}
form input:focus, form textarea:focus, form select:focus {
  outline: none; border-color: var(--kleur);
}
.optie {
  display: block; font-weight: 600; margin: 8px 0; cursor: pointer;
  padding: 12px 14px; border: 2px solid var(--rand); border-radius: 14px;
  transition: background .15s, border-color .15s;
}
.optie:hover { background: var(--kleur-licht); border-color: var(--kleur); }
.optie input { margin-right: 10px; }
.vraagtekst { font-weight: 700; font-size: 1.05rem; }

.fout { background: #fee2e2; color: var(--rood); padding: 12px; border-radius: 12px; font-weight: 600; }
.hint { color: var(--grijs); font-size: .9rem; }
/* Links in een hint hadden geen eigen kleur, dus koos de browser er
   zelf een: paarsblauw met een streep eronder. Naast het blauw van de
   app leest dat als een link die iemand vergeten is af te maken.
   Drie plekken gebruiken dit: "Wachtwoord vergeten?" op het
   inlogscherm en twee keer "Terug naar inloggen".
   De streep komt pas bij hover. Zonder streep is het een nette
   nevenweg; met streep vraagt hij evenveel aandacht als de knop
   ernaast, en dat is niet de bedoeling. */
.hint a { color: var(--kleur-donker); font-weight: 600; text-decoration: none; }
.hint a:hover { text-decoration: underline; }
.hint a:focus-visible { outline: 3px solid var(--kleur-licht); outline-offset: 2px; border-radius: 4px; }
code { background: #eef2f7; padding: 2px 6px; border-radius: 6px; font-size: .95rem; }

/* ---------- Badges & resultaat ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px; border-radius: 999px; font-size: .85rem; font-weight: 700;
}
.badge.klaar { background: #dcfce7; color: var(--groen-donker); }
.resultaat { text-align: center; }
.resultaat .knop { margin: 6px 4px 0; }

/* ============================================================
   HET UITSLAGSCHERM VAN DE QUIZ (v1.59.0)

   Eén regel bepaalt alles hieronder, en die stond al bij
   .tv-reactie: amber bij mis, groen bij raak — nooit rood. Je hebt
   niets fout gedaan, je wist het nog niet.

   Dit scherm hield zich daar als enige niet aan: rode rand, rood
   cijfer, een verdrietig gezichtje. Dat is drie keer hetzelfde
   verwijt op één scherm, terwijl de gebruiker net iets probeerde.

   De score staat nu in een bol, want dat is waar je oog als eerste
   heen gaat en het is het enige wat je echt wilt weten.
   ============================================================ */
.uitslag-bol {
  width: 104px; height: 104px; border-radius: 50%; margin: 4px auto 14px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
}
.uitslag-bol strong { font-size: 1.6rem; font-weight: 800; line-height: 1; }
.uitslag-bol span   { font-size: .82rem; font-weight: 700; }

/* Geen opacity op deze tekst: die vermenigvuldigt met de ondergrond
   en dan staat er niet meer wat je in de code leest. Zie de
   toelichting bij .leer-kop.zacht. */
.uitslag-bol.goed  { background: #dcfce7; color: var(--groen-donker); }
.uitslag-bol.bijna { background: var(--amber-licht); color: #78500a; }

/* De regel bovenaan bij een bewaarde poging (v1.60.0). Rustig grijs:
   het is een verduidelijking, geen mededeling. Zonder deze regel denk
   je bij terugkomst dat je zojuist een quiz hebt gemaakt. */
.uitslag-eerder {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--licht); border-radius: 999px;
  padding: 7px 15px; margin: 0 0 16px;
  font-size: .86rem; color: var(--grijs); font-weight: 600;
}
.uitslag-eerder i { color: var(--grijs); font-size: 1rem; }

.uitslag-kop { margin: 0 0 4px; font-size: 1.35rem; }
.uitslag-kop.goed { color: var(--groen-donker); }
.uitslag-kop i { font-size: 1.2rem; vertical-align: -2px; }

.uitslag-sub    { margin: 0 0 16px; color: var(--grijs); }
.uitslag-punten { margin: 0 0 14px; color: var(--grijs); }
.uitslag-punten strong { color: #92600a; font-weight: 800; }
.uitslag-punten i { color: var(--amber); }

/* Wat er hierna komt. Rustig grijs: het is een vooruitblik, geen
   opdracht — de knoppen eronder zeggen wat je nu kunt doen. */
.uitslag-volgende {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--licht); border-radius: 11px;
  padding: 9px 15px; margin: 0 0 4px;
  font-size: .9rem; color: var(--grijs); font-weight: 600;
}
.uitslag-volgende i { color: var(--kleur); }

/* De rand blijft neutraal. Een rode kaartrand maakt van "nog niet"
   een storing. */
.nog-niet { border-color: var(--amber); }

/* ---- Waar het misging ----
   De eigenlijke reden dat dit scherm bestaat. "Probeer het opnieuw"
   stuurt je terug met dezelfde kennis; een lijst met wat je miste
   stuurt je terug naar de les die je nodig hebt.
   Links uitgelijnd, want het zijn zinnen en geen labels. */
.mis-blok { text-align: left; margin: 0 auto 18px; max-width: 470px; }

/* Dezelfde lijst op een geslaagd scherm (v1.60.2). Daar staat hij ónder
   de knoppen: het feest komt eerst, het nalezen daarna. Een streep en
   wat lucht erboven, zodat het duidelijk een naschrift is en niet een
   tweede mededeling die om aandacht vecht met de medaille. */
.mis-blok.naleeslijst {
  margin-top: 26px; padding-top: 20px;
  border-top: 1px solid var(--rand);
}

.mis-kop-rij {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 9px;
}
.mis-kop {
  font-size: .8rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em; color: var(--grijs);
}
.mis-tel { font-size: .82rem; color: var(--grijs); font-weight: 600; flex: none; }

/* Eén kaartje per les (v1.59.3).

   Eerst stond hier een platte lijst van vijf vragen met een klein
   linkje erachter; "les 4" stond er dan twee keer en de rest
   verdween achter "en nog 3 vragen".

   Acht losse vragen zijn niet te overzien, drie lessen wel — en dat
   is ook wat je werkelijk moet doen. Door te groeperen past alles en
   is het afkappen niet meer nodig. */
.mis-les-blok {
  background: var(--licht); border-radius: 14px;
  padding: 13px 16px; margin-bottom: 9px;
}
.mis-les-blok:last-child { margin-bottom: 0; }

/* Vragen zonder les: geen knop, dus ook geen kaartje dat een actie
   belooft. Alleen een randje, zodat het bij de rest hoort maar niet
   om een klik vraagt. */
.mis-les-blok.los { background: transparent; border: 1px dashed var(--rand); }

.mis-les-kop {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 7px;
}
.mis-les-titel { font-size: .95rem; font-weight: 700; color: var(--tekst); }
.mis-vraagtel  { font-size: .78rem; color: var(--grijs); font-weight: 600; flex: none; }

.mis-vraagregel {
  margin: 0 0 4px; font-size: .89rem; line-height: 1.5; color: var(--grijs);
}
.mis-vraagregel:last-of-type { margin-bottom: 10px; }

/* Een echte knop en geen tekstlink. Een link van veertig pixels is op
   een telefoon nauwelijks te raken; dit is de handeling waar het hele
   blok om draait. */
.mis-knop {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--kleur); color: #fff;
  font-size: .88rem; font-weight: 700; text-decoration: none;
  padding: 8px 15px; border-radius: 10px;
}
.mis-knop:hover { background: var(--kleur-donker, #1d4ed8); color: #fff; }
.mis-knop i { font-size: 1rem; }

/* Een les die nog op slot staat. Geen link, want les.php stuurt je
   dan door naar het moduleoverzicht en dat leest als een storing.
   Wel de reden: "rond eerst les 4 af" zegt wat je moet doen, een
   slotje alleen zegt dat het niet kan. */
.mis-knop.op-slot {
  background: transparent; color: var(--grijs);
  border: 1px solid var(--rand); cursor: default; font-weight: 600;
}
.mis-knop.op-slot:hover { background: transparent; color: var(--grijs); }
.mis-knop.op-slot i { color: var(--grijs); }

/* De scheiding op resultaat.php tussen de lessenlijst en de antwoorden
   per vraag (v1.60.1). Zonder kopje lopen die twee in elkaar over,
   terwijl het twee verschillende dingen zijn: het eerste blok is om
   iets mee te doen, de rest is om na te lezen. */
.mis-tussenkop {
  display: flex; align-items: center; gap: 8px;
  margin: 26px 0 10px; font-weight: 700; color: var(--grijs);
}
.mis-tussenkop i { color: var(--kleur); font-size: 1.05rem; }

@media (max-width: 560px) {
  .uitslag-bol { width: 92px; height: 92px; }
  .uitslag-bol strong { font-size: 1.4rem; }
  .uitslag-volgende { display: flex; text-align: left; }
}
.antwoord { border-radius: 0; border-left: 4px solid var(--rand); }
.antwoord.goed { border-left-color: var(--groen); }
.antwoord.mis  { border-left-color: var(--rood); }
.uitleg { color: var(--grijs); font-style: italic; }

/* ---------- Voortgang ---------- */
.balk { background: #e8ecf3; border-radius: 999px; height: 14px; overflow: hidden; margin: 12px 0; }
.balk-vol { background: var(--groen); height: 100%; border-radius: 999px; transition: width .4s; }
.punten-groot { font-size: 1.3rem; font-weight: 700; }
.voortgang-mini { margin-bottom: 12px; }
.stap-tekst { color: var(--grijs); font-size: .9rem; margin: 4px 0 0; font-weight: 600; }

/* ---------- Lessen ---------- */
.les-rij {
  display: flex; align-items: center; gap: 14px;
  background: #fff; border: 2px solid var(--rand); border-radius: 16px;
  padding: 15px 17px; margin-bottom: 10px;
  text-decoration: none; color: var(--tekst); font-weight: 700;
  transition: transform .12s, border-color .15s;
}
a.les-rij:hover { transform: translateX(3px); border-color: var(--kleur); }
.les-rij.done { border-color: var(--groen); background: #f0fdf4; }
.les-rij.lock { opacity: .55; }
.les-rij .les-status { font-size: 1.4rem; color: var(--kleur); display: flex; }
.les-rij.done .les-status { color: var(--groen); }
.les-rij.lock .les-status { color: #b0b8c9; }
.les-rij .les-titel { flex: 1; }
.les-rij .chev { margin-left: auto; color: #b0b8c9; }
.les-rij.actief { border-color: var(--kleur); box-shadow: 0 4px 14px rgba(37,99,235,.12); }
.les-start-knop {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--kleur); color: #fff; font-size: .85rem; font-weight: 700;
  padding: 8px 15px; border-radius: 999px; white-space: nowrap;
  background-image: linear-gradient(180deg, #3b7ef0 0%, #1f57cf 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28),
              0 1px 2px rgba(15,23,42,.16), 0 4px 10px rgba(37,99,235,.22);
}

.les-kop { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.les-kop .module-icoon { width: 46px; height: 46px; font-size: 22px; margin: 0; }
.les-kop .sub { font-size: .8rem; color: var(--grijs); font-weight: 800; letter-spacing: .05em; }
/* Was 800. Dat is de zwaarste snede die het lettertype heeft, en op
   een kop van 1,4rem wordt dat een blok inkt. 700 leest even duidelijk
   en klinkt een toon rustiger -- wat past bij lesmateriaal voor
   volwassenen. Raakt ook de koppen in de lessen; dat is de bedoeling. */
.les-kop .titel { font-weight: 700; font-size: 1.2rem; }

.les-item {
  display: flex; gap: 14px; align-items: flex-start;
  border: 2px solid var(--rand); border-radius: 14px;
  padding: 13px 15px; margin: 10px 0;
}
.les-item > i, .les-item > strong { font-size: 1.3rem; color: var(--kleur); }
.les-item span { color: var(--grijs); font-size: .92rem; font-weight: 400; }
.les-tip {
  background: var(--amber-licht); border-radius: 12px; padding: 12px 14px;
  font-size: .95rem; display: flex; gap: 8px; align-items: flex-start;
}
.les-tip i { color: var(--amber); font-size: 1.2rem; }
.les-keten { text-align: center; padding: 6px 0; }
.les-laag {
  display: block; max-width: 300px; margin: 8px auto; padding: 11px;
  background: var(--kleur-licht); color: var(--kleur-diep);
  border-radius: 999px; font-weight: 600;
}
.les-laag i { vertical-align: -2px; }
.les-pijl { color: var(--grijs); font-size: .9rem; }

/* Rol-tegels (klik om open te klappen) */
.rol-groep { font-weight: 800; color: var(--kleur-diep); margin: 18px 0 8px; font-size: 1.05rem; }
.rol-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; align-items: start; }
.rol-tegel {
  background: #fff; border: 2px solid var(--rand); border-radius: 14px;
  overflow: hidden; cursor: pointer; transition: border-color .15s, background .15s;
}
.rol-tegel:hover { border-color: var(--kleur); }
.rol-tegel.open { border-color: var(--kleur); box-shadow: 0 6px 16px rgba(37,99,235,.12); }
.rol-kop { display: flex; align-items: center; gap: 8px; padding: 12px 14px; font-weight: 700; }
.rol-kop > span { flex: 1; }
.rol-kop > i:first-child { color: var(--kleur); font-size: 1.2rem; }
.rol-chevron { color: #b0b8c9; transition: transform .2s; }
.rol-tegel.open .rol-chevron { transform: rotate(180deg); }
.rol-body { display: none; padding: 0 14px 13px; color: #334155; font-size: .92rem; line-height: 1.6; }
.rol-tegel.open .rol-body { display: block; }
.rol-body p { margin: 0 0 8px; }
.rol-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.rol-tag {
  background: var(--kleur-licht); color: var(--kleur-diep);
  font-size: .74rem; font-weight: 700; padding: 3px 9px; border-radius: 999px;
}

/* Interactieve applicatie-lagen (les 2) */
.app-keten { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; margin: 8px 0 14px; }
.app-laag {
  display: flex; align-items: center; gap: 10px;
  background: #fff; border: 2px solid var(--rand); border-radius: 14px;
  padding: 13px 15px; font-weight: 700; cursor: pointer; transition: .15s;
}
.app-laag:hover { border-color: var(--kleur); }
.app-laag.actief { border-color: var(--kleur); background: var(--kleur-licht); }
.app-laag i { color: var(--kleur); font-size: 1.2rem; }
.app-pijl { color: #94a3b8; font-size: .82rem; text-align: center; margin: 4px 0; }
.app-detail {
  background: #f8fafc; border: 2px solid var(--rand); border-radius: 14px;
  padding: 16px; min-height: 150px;
  display: flex; flex-direction: column; justify-content: center;
}
.app-detail-leeg { color: #94a3b8; font-size: .9rem; margin: 0; text-align: center; }
.app-detail-naam { font-weight: 800; font-size: 1.05rem; color: var(--kleur-diep); margin-bottom: 6px; }
.app-detail-wat { margin: 0 0 10px; color: #334155; font-size: .95rem; line-height: 1.55; }
.app-detail-vb { background: var(--kleur-licht); border-radius: 10px; padding: 10px 12px; }
.app-detail-label { font-size: .72rem; font-weight: 800; color: var(--kleur-diep); text-transform: uppercase; letter-spacing: .04em; }
.app-detail-vb p { margin: 4px 0 0; font-size: .92rem; color: var(--tekst); }
.app-meer { margin: 6px 0 4px; }
.app-meer summary { cursor: pointer; color: var(--kleur); font-weight: 700; font-size: .95rem; list-style: none; padding: 6px 0; }
.app-meer summary::-webkit-details-marker { display: none; }
.app-meer summary::before { content: '›'; display: inline-block; margin-right: 8px; transition: transform .2s; }
.app-meer[open] summary::before { transform: rotate(90deg); }
.app-meer p { color: #334155; font-size: .92rem; line-height: 1.6; background: #f8fafc; border-radius: 12px; padding: 12px 14px; margin: 6px 0 0; }
@media (max-width: 560px) { .app-keten { grid-template-columns: 1fr; } }

/* "Onthoud" — spraakbubbel van Iggy (afsluiting van elke les) */
.les-onthoud { display: flex; align-items: flex-start; gap: 12px; margin-top: 16px; }
/* Zelfde ingreep als bij .coach-figuur (v1.62.1): de witte rand met
   blauwe gloed eromheen is weg. Twee keer dezelfde figuur op twee
   schermen hoort er ook twee keer hetzelfde uit te zien — anders valt
   precies op dat het twee keer is. */
.onthoud-avatar {
  flex-shrink: 0; width: 52px; height: 52px; border-radius: 50%; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(15,23,42,.10);
}
.onthoud-bubbel {
  position: relative; flex: 1; background: #fff; border: 2px solid var(--rand);
  border-radius: 16px; padding: 16px 18px;
}
.onthoud-bubbel::before {
  content: ''; position: absolute; left: -9px; top: 18px; width: 16px; height: 16px;
  background: #fff; border-left: 2px solid var(--rand); border-bottom: 2px solid var(--rand);
  transform: rotate(45deg);
}
.onthoud-kop { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: 1.05rem; color: #1e293b; margin-bottom: 12px; }
.onthoud-tag {
  display: inline-block;
  background: var(--kleur-licht); color: var(--kleur-diep);
  font-size: .7rem; font-weight: 800; padding: 3px 10px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: .04em;
}
.onthoud-tekst { font-size: 1rem; line-height: 1.6; color: #1f2937; margin: 12px 0; }
.onthoud-tekst strong { color: #1e293b; }
.onthoud-rij { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 10px; }
.onthoud-rij:last-child { margin-bottom: 0; }
.onthoud-rij > i { color: var(--groen); font-size: 1.15rem; margin-top: 1px; flex-shrink: 0; }
.onthoud-rij span { font-size: .95rem; color: #334155; line-height: 1.5; }
.onthoud-rij strong { color: #1e293b; }
.onthoud-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.onthoud-chip { background: var(--kleur-licht); color: var(--kleur-diep); font-size: .78rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
@media (max-width: 560px) { .onthoud-avatar { width: 42px; height: 42px; } }

/* ---------- 4-staps-lessjabloon ---------- */
/* De stapbalk met namen (v1.46.0). Het balkje zit nu in een <b> zodat
   het label eronder kan hangen zonder de hoogte van de balk te sturen.
   Op een smal scherm vallen de namen weg: vier woorden naast elkaar
   worden daar vier afgebroken woorden, en dat is onrustiger dan geen
   woorden. */
.stapbalk { display: flex; gap: 6px; margin-bottom: 6px; }
.stapdeel { flex: 1; min-width: 0; }
.stapdeel b { display: block; height: 8px; border-radius: 999px;
  background: #e8ecf3; transition: background .3s; }
.stapdeel.actief b { background: var(--groen); }
.stapdeel em {
  display: block; font-style: normal; font-size: .72rem; color: var(--grijs);
  margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.stapdeel.nu em { color: var(--kleur-diep); font-weight: 700; }
@media (max-width: 560px) { .stapdeel em { display: none; } }
.staptitel { color: var(--grijs); font-size: .85rem; font-weight: 700; margin: 10px 0 14px; }

/* ---------- De situatie, typografisch (v1.50.0) ----------
   De getekende poppetjes zijn eruit. Wat een klant zegt is nu het
   grootste op het scherm, met een accentstreep ernaast; wie er spreekt
   staat als label erboven.

   Waarom geen tekening: middelmatige illustratie laat een product
   goedkoper lijken dan géén illustratie, en dit is het scherm dat een
   bureau als eerste ziet. Bovendien botst een ingekochte tekenstijl
   met de tachtig eigen illustraties in de lessen.

   Iggy blijft gewoon in stap 1 tot 4 staan, als rondje van 50 pixels.
   Daar draagt hij het gesprek en daar werkt hij. */
/* ---------- Het gesprek in beurten (terug in v1.51.0) ----------
   De klant links, Iggy rechts eronder, jij weer links. Om en om, zodat
   het als een gesprek leest waarin jij aan zet bent.

   TWEE DINGEN DIE EERDER MISGINGEN, EN NU VASTLIGGEN:

   1. flex: 0 1 auto op .beurt-tekst, niet flex: 1. Met flex: 1 rekte
      een ballon van vier woorden uit tot de volle kolombreedte.
   2. max-width op de ballon. Zonder dat groeit een lange zin door tot
      850 pixels, en dat is bijna negentig tekens per regel. */
.beurt { display: flex; gap: 13px; align-items: flex-start; margin-bottom: 16px; }
.beurt.klant { max-width: 78%; }
.beurt.iggy  { max-width: 78%; margin-left: auto; flex-direction: row-reverse; }
.beurt.jij   { max-width: 100%; margin-bottom: 4px; }
.beurt-fig   { flex: none; width: 56px; height: auto; display: block; }
/* Een icoon in een rond vlak, in plaats van een getekende figuur. Zegt
   in één teken wie er belt, zonder om aandacht te vragen. */
.beurt-icoon {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--licht); border: 1px solid var(--rand);
  color: var(--kleur-diep); font-size: 1.5rem;
  display: flex; align-items: center; justify-content: center;
}
/* Iggy in hetzelfde formaat rondje, zodat de twee sprekers gelijk
   ogen. Zijn tekening vult het vlak via .iggy-tekening. */
.beurt-iggy {
  width: 56px; height: 56px; border-radius: 50%;
  overflow: hidden; box-shadow: 0 0 0 1px var(--rand);
}
.beurt-tekst { flex: 0 1 auto; min-width: 0; max-width: 620px; }
/* Jouw beurt is de uitzondering: daar staan vier antwoorden in, en die
   horen de volle breedte te pakken. */
.beurt.jij .beurt-tekst { flex: 1; max-width: 100%; }
.beurt.iggy .spreker-naam { text-align: right; }
/* Jouw rondje is kleiner dan de figuren: jij bent de lezer, geen
   personage in het verhaal. */
.beurt-av {
  flex: none; width: 52px; height: 52px; border-radius: 50%;
  background: var(--kleur-licht); color: var(--kleur-diep);
  font-weight: 800; font-size: .95rem;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #fff; box-shadow: 0 0 0 1px var(--rand);
}
/* Wit met een rand is iemand anders, vlak blauw is Iggy. */
.beurt .kandidaat-bubbel { padding: 15px 19px; }
.beurt .kandidaat-quote { font-size: 1.12rem !important; }
.beurt .iggy-bubbel { padding: 13px 18px; border-radius: 16px; }
.beurt .iggy-bubbel > p { font-size: 1.02rem; }
.beurt.iggy .iggy-bubbel::before { left: auto; right: -7px; }
/* Jouw ballon: rustiger van kleur, ruimer van binnen. */
.jij-bubbel {
  background: #f7f9fd; border: 2px solid var(--rand);
  border-radius: 18px; padding: 17px 20px;
}
.jij-bubbel .opties { margin: 0; }
.jij-bubbel .opening-na {
  margin-top: 15px; padding: 15px 0 0; background: none;
  border-top: 1px dashed var(--rand); border-radius: 0;
}
@media (max-width: 560px) {
  .beurt.klant, .beurt.iggy { max-width: 100%; margin-left: 0; }
  .beurt.iggy { flex-direction: row; }
  .beurt.iggy .spreker-naam { text-align: left; }
  .beurt.iggy .iggy-bubbel::before { left: -7px; right: auto; }
  .beurt-fig, .beurt-icoon, .beurt-iggy { width: 46px; height: 46px; }
  .beurt-icoon { font-size: 1.25rem; }
  .beurt-av { width: 44px; height: 44px; font-size: .85rem; }
  .beurt .kandidaat-quote { font-size: 1rem !important; }
  .jij-bubbel { padding: 14px 15px; }
}

/* ---------- Waar je begon, waar je eindigde (v1.52.0) ----------
   In stap 4, onder de antwoorden, zodra je het juiste hebt aangeklikt. Twee regels met
   een pijl ertussen: je eerste ingeving en je uiteindelijke antwoord.

   Het label links is smal en vast; de tekst rechts krijgt de rest. Een
   gestippelde lijn tussen de rijen, geen kader eromheen — het staat al
   in een ballon en een kader in een kader is één rand te veel. */
/* 26px en niet 14 (v1.58.6). Het reisblok komt na het gele uitlegblok,
   en dat zijn twee blokken die allebei iets uitleggen. Op veertien
   pixels lezen ze als één brok tekst; op zesentwintig zie je dat het
   twee dingen zijn — de uitleg bij het antwoord, en jouw eigen weg. */
.afrond-reis-blok { margin-top: 26px; }
.reis-rij { display: flex; gap: 12px; align-items: flex-start; padding: 9px 0; }
.reis-rij + .reis-rij { border-top: 1px dashed #cfdcf2; }
/* Ook hier geen opacity: op 12,5 px zakte het label naar 4,29 : 1.
   Zie de toelichting bij .leer-kop.zacht. */
.reis-lbl {
  flex: none; width: 92px; font-size: .78rem;
  color: var(--kleur-diep); padding-top: 2px;   /* 7,61 : 1 */
}
.reis-ant {
  flex: 1; min-width: 0; font-size: 1rem; line-height: 1.45;
  color: var(--donker); font-weight: 600;
}
.reis-ant em {
  display: block; font-style: normal; font-weight: 400;
  font-size: .85rem; color: var(--grijs); margin-top: 2px;
}
.reis-pijl {
  display: flex; justify-content: center; color: #8fa5c9;
  font-size: 1rem; margin: -2px 0;
}
.reis-slot {
  margin: 14px 0 0 !important; font-size: .95rem !important;
  line-height: 1.6 !important; color: var(--kleur-diep);
}
@media (max-width: 560px) {
  .reis-rij { flex-direction: column; gap: 3px; }
  .reis-lbl { width: auto; }
}

/* De typografische variant blijft bestaan voor lessen met een
   'situatie' maar zonder 'figuur' — les 3 gebruikt die. */
.scene { max-width: 720px; margin-bottom: 22px; }
.scene-kop { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
/* Het rondje voor de spreker. Klein — het zegt wie er praat, verder
   niets. Bij de klant een icoon, bij Iggy zijn eigen tekening. */
.scene-icoon {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: var(--licht); border: 1px solid var(--rand);
  color: var(--kleur-diep); font-size: .95rem;
  display: flex; align-items: center; justify-content: center;
}
.scene-av {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  overflow: hidden; display: block; box-shadow: 0 0 0 1px var(--rand);
}
/* Iggy's naam stond als losse alinea onder het citaat; nu staat hij
   naast zijn rondje en is de marge dus overbodig. */
.scene-kop .scene-naam { margin: 0 !important; }
.scene-pil {
  font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
  font-weight: 700; color: var(--kleur-diep); background: var(--kleur-licht);
  border-radius: 999px; padding: 4px 12px; white-space: nowrap;
}
.scene-lijn { flex: 1; height: 1px; background: var(--rand); }
/* Het citaat draagt het scherm. Groot, met een streep die zegt: dit
   zijn andermans woorden. */
.scene-quote {
  margin: 0 0 22px !important; padding-left: 17px;
  border-left: 3px solid var(--kleur);
  font-size: 1.5rem !important; line-height: 1.35 !important;
  font-weight: 600; color: var(--donker); letter-spacing: -.01em;
}
.scene-naam {
  font-size: .72rem !important; letter-spacing: .09em; text-transform: uppercase;
  color: var(--grijs); font-weight: 700; margin: 0 0 7px !important;
}
.scene-vraag { margin: 0 !important; font-size: 1.05rem !important;
  line-height: 1.5 !important; color: var(--tekst); }
@media (max-width: 560px) {
  .scene-quote { font-size: 1.2rem !important; padding-left: 13px; }
}

/* ---------- De openingsvraag van een les (v1.46.0) ---------- */
.opties.opening .optie.gekozen {
  border-color: var(--kleur); border-width: 2px; background: var(--kleur-licht);
}
/* Na je keuze treden de andere terug. Je oog hoort naar wat je koos te
   gaan, niet naar het rijtje dat je hebt laten liggen. */
.opties.opening .optie.vaag { opacity: .45; }
.opening-na {
  margin-top: 16px; padding: 16px 18px; border-radius: 14px;
  background: var(--kleur-licht);
}
.opening-na p { margin: 0 0 14px; font-size: .98rem; line-height: 1.65; color: var(--kleur-diep); }
.opening-na .knop { margin: 0; }

.stap-inhoud { min-height: 210px; animation: infade .25s ease; }
.stap-inhoud p { font-size: .98rem; line-height: 1.6; margin: 0 0 12px; }
.stap-tag {
  display: inline-block; background: var(--kleur-licht); color: var(--kleur-diep);
  font-size: .7rem; font-weight: 800; padding: 3px 10px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 10px;
}
.stap-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; align-items: center; }
.stap-hint { color: var(--grijs); font-size: .85rem; font-weight: 600; text-align: right; margin: 14px 0 0; min-height: 1.2em; }
.knop:disabled { cursor: not-allowed; }

/* Uitklaptegels in stap 1 */
.etegel { border: 2px solid var(--rand); border-radius: 14px; margin-bottom: 10px; overflow: hidden; cursor: pointer; transition: border-color .15s; }
.etegel:hover { border-color: var(--kleur); }
.etegel.open { border-color: var(--kleur); }
.etegel .ekop { display: flex; align-items: center; gap: 9px; padding: 13px 15px; font-weight: 700; }
.etegel .ekop > i:first-child { color: var(--kleur); font-size: 1.2rem; }
.etegel .ekop > span { flex: 1; }
.etegel .chev { color: #b0b8c9; transition: transform .2s; }
.etegel.open .chev { transform: rotate(180deg); }
.etegel .ebody { display: none; padding: 0 15px 13px; color: #334155; font-size: .92rem; line-height: 1.55; }
.etegel.open .ebody { display: block; }

/* Keuzechips in stap 2 */
.chiprij { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.chip {
  border: 2px solid var(--rand); border-radius: 999px; padding: 7px 15px;
  font-weight: 700; font-size: .9rem; cursor: pointer; user-select: none; transition: .15s;
}
.chip:hover { border-color: var(--kleur); }
.chip.sel { border-color: var(--kleur); background: var(--kleur-licht); color: var(--kleur-diep); }
.chip.goed { border-color: var(--groen); background: #f0fdf4; color: var(--groen-donker); cursor: default; }
.chip.fout { border-color: var(--rood); background: #fef2f2; color: #b91c1c; cursor: default; }
.fb { margin-top: 10px; padding: 10px 13px; border-radius: 10px; font-weight: 700; font-size: .92rem; }
.fb.goed { background: #dcfce7; color: var(--groen-donker); }
.fb.mis  { background: #fee2e2; color: #b91c1c; }

/* Gespreksvraag in stap 3 — rustig, zonder kader */
.zeg-introkop { color: var(--grijs); font-size: .85rem; font-weight: 600; margin: 4px 0 6px !important; }
.zeg-vraag {
  display: flex; gap: 9px; align-items: flex-start;
  font-size: 1.05rem; line-height: 1.55; color: var(--tekst); margin: 0 0 20px !important;
}
.zeg-vraag i { color: #cbd5e1; font-size: 1.3rem; flex-shrink: 0; }
.zeg-uitleg { color: #334155; font-size: .93rem; margin: 0 0 16px !important; }

/* Voorbeelden in stap 3: wat je hoort -> wat het betekent */
.zeg-kop { font-weight: 700; font-size: .93rem; color: #334155; margin: 16px 0 8px !important; }
.zeg-rij {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
  border: 2px solid var(--rand); border-radius: 12px; padding: 11px 14px; margin-bottom: 8px;
}
.zeg-antwoord { flex: 1; min-width: 200px; font-size: .93rem; color: var(--tekst); font-style: italic; }
.zeg-antwoord i { color: #b0b8c9; margin-right: 4px; }
.zeg-betekenis {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--kleur-licht); color: var(--kleur-diep);
  font-size: .82rem; font-weight: 700; padding: 4px 11px; border-radius: 999px; white-space: nowrap;
}

/* Beeldkaarten in stap 3 */
.zeg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.zeg-kaart { background: #fff; border: 2px solid var(--rand); border-radius: 16px; padding: 12px; }
.zeg-beeld { display: block; width: 100%; height: auto; border-radius: 10px; margin-bottom: 10px; }
.zeg-quote { font-size: .92rem; font-style: italic; color: #334155; margin: 0 0 10px !important; line-height: 1.45; }
.zeg-quote i { color: #b0b8c9; font-style: normal; }
.zeg-label {
  display: inline-block; background: var(--kleur-licht); color: var(--kleur-diep);
  font-size: .8rem; font-weight: 700; padding: 5px 12px; border-radius: 999px;
}

/* Module-afrondingsscherm (na een gehaalde quiz) */
.medaille {
  width: 76px; height: 76px; border-radius: 50%; margin: 0 auto;
  background: var(--amber); color: #fff; font-size: 40px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 8px var(--amber-licht);
}
.stats { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 16px 0; }
.stat { background: #f8fafc; border-radius: 12px; padding: 10px 18px; min-width: 96px; }
.stat-nr { font-weight: 800; font-size: 1.3rem; color: var(--kleur); }
.stat-lb { font-size: .78rem; color: var(--grijs); font-weight: 600; }
.ontgrendeld {
  display: flex; align-items: center; gap: 12px; justify-content: center; text-align: left;
  background: #f0fdf4; border: 2px solid var(--groen); border-radius: 14px; padding: 12px 16px;
}
.ontgrendeld > i { font-size: 1.6rem; color: var(--groen-donker); flex-shrink: 0; }
.ontgr-titel { font-weight: 800; }

/* Afrondscherm */
/* ============================================================
   AFRONDSCHERM VAN EEN LES
   Vier dingen, in deze volgorde: de beloning, de belofte die je
   bovenaan de les kreeg en nu is ingelost, wat je onthoudt, en
   waar je staat. Daarna de volgende stap — want dit is het moment
   waarop iemand doorgaat.
   Bewust géén confetti: die is van de quiz en van een afgeronde
   module. Gebruik je hem ook per les, dan is hij niets meer waard.
   ============================================================ */
.afrond-kop { text-align: center; padding: 4px 0 20px; }
.afrond-vink {
  width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 12px;
  background: #dcfce7; color: var(--groen-donker); font-size: 2.1rem;
  display: flex; align-items: center; justify-content: center;
  animation: vinkpop .45s cubic-bezier(.3,1.4,.5,1);
}
@keyframes vinkpop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.afrond-titel { font-weight: 800; font-size: 1.5rem; margin: 0 0 10px; }
.afrond-punten {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--amber-licht); color: #92600a;
  padding: 7px 16px; border-radius: 999px; font-size: .98rem; font-weight: 700;
}

/* De belofte van bovenaan de les, nu met een vinkje. */
.afrond-belofte {
  display: flex; gap: 11px; align-items: flex-start;
  background: #f0fdf4; border-radius: 12px; padding: 14px 18px; margin-bottom: 20px;
}
.afrond-belofte i { font-size: 1.25rem; color: var(--groen-donker); flex-shrink: 0; margin-top: 1px; }
.afrond-belofte p { margin: 0 !important; font-size: .98rem !important;
  line-height: 1.5 !important; color: var(--groen-donker); }

/* Onthoud als genummerde kaarten, uit Iggy's mond. Hij heeft je door
   de hele les begeleid; dan hoort hij er ook te zijn als hij samenvat.
   Geen uitleg dat de quiz hierover gaat: onthouden mag een uitdaging
   blijven. */
.afrond-onthoud-blok { margin-bottom: 22px; }
.afrond-kopje { font-size: .98rem !important; font-weight: 700; margin: 0 0 10px !important;
  color: var(--kleur-diep); }
.afrond-onthoud { display: grid; gap: 9px; }
/* Witte kaarten in de blauwe ballon: de punten blijven los leesbaar. */
.afrond-onthoud-rij {
  display: flex; gap: 13px; align-items: center; background: #fff;
  border: 1px solid #c7d9fb; border-radius: 12px; padding: 13px 16px;
  font-size: .98rem;
}
.afrond-nr {
  width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%;
  background: var(--kleur-licht); color: var(--kleur-diep);
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem; font-weight: 800;
}

/* Twee knoppen van gelijke maat, midden op de kaart. Gelijk in maat,
   niet in stem: kleur wijst de weg vooruit. Vaste breedte plus stretch,
   zodat een lange lestitel de knoppen niet scheeftrekt. */
.afrond-knoppen {
  display: flex; flex-wrap: wrap; gap: 12px;
  justify-content: center; align-items: stretch; margin-top: 4px;
}

/* Een knop die iets wist hoort een formulier te zijn, geen link
   (v1.60.0). Maar een <form> is een blok en zou de rij knoppen
   breken. Deze regel laat hem zich gedragen als de knop erin.

   De marge gaat naar 0: .resultaat .knop zet er 6px 4px op, en met
   het formulier eromheen zou dat dubbel tellen. */
.afrond-knoppen .knopform { display: contents; }
.afrond-knoppen .knopform .knop { margin: 0; }
.afrond-verder, .afrond-terug {
  width: 236px; box-sizing: border-box; min-height: 58px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px;
  text-align: center; text-decoration: none;
  border-radius: 12px; padding: 13px 16px;
  font-size: 1rem; font-weight: 700; letter-spacing: -.006em;
  transition: transform .18s, box-shadow .18s;
}
.afrond-verder {
  background-image: linear-gradient(180deg, #3b7ef0 0%, #1f57cf 100%); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28),
              0 1px 2px rgba(15,23,42,.16), 0 5px 14px rgba(37,99,235,.22);
}
.afrond-verder.groen {
  background-image: linear-gradient(180deg, #37cf72 0%, #17a34f 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28),
              0 1px 2px rgba(15,23,42,.16), 0 5px 14px rgba(34,197,94,.22);
}
.afrond-terug {
  background-image: linear-gradient(180deg, #f3f6fa 0%, #e6ebf3 100%); color: var(--grijs);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9),
              0 1px 2px rgba(15,23,42,.08), 0 3px 8px rgba(15,23,42,.06);
}
.afrond-verder:hover, .afrond-terug:hover { transform: translateY(-1px); }
.afrond-verder:active, .afrond-terug:active { transform: translateY(1px); }
@media (prefers-reduced-motion: reduce) {
  .afrond-verder, .afrond-terug { transition: none; }
  .afrond-verder:hover, .afrond-terug:hover,
  .afrond-verder:active, .afrond-terug:active { transform: none; }
}
.av-label { font-size: .68rem; letter-spacing: .07em;
  text-transform: uppercase; opacity: .85; }
.av-titel { font-size: .98rem; font-weight: 700; line-height: 1.25; }

@media (max-width: 560px) {
  .afrond-titel { font-size: 1.3rem; }
  .afrond-verder, .afrond-terug { width: 100%; }
}

/* De volgende stap aanwijzen (v1.45.0)
   ------------------------------------------------------------------
   Hiervoor stuiterde deze knop eindeloos. Dat wees de eerste seconde
   goed aan en was daarna ruis: iets dat altijd beweegt betekent nooit
   "nu". Het trok bovendien de aandacht weg van de tekst ernaast, en
   WCAG 2.2.2 vraagt om een pauzemogelijkheid bij beweging die vanzelf
   start en langer dan vijf seconden duurt.

   Nu komt de knop één keer op, precies op het moment dat hij vrijkomt.
   Daarna staat hij stil en doet contrast de rest: de volgende stap is
   het enige gevulde blauwe vlak op het scherm.

   De pijl schuift bij hover. Beweging hoort bij een bedoeling, niet
   bij niets doen.

   De klasse heette .stuiter. Die naam is meeveranderd, anders staat er
   over een half jaar een naam die iets anders belooft dan hij doet. */
@keyframes zachtopkomen {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none;             }
}
.aanwijzen { animation: zachtopkomen .5s cubic-bezier(.2,.9,.3,1) 1 both; }
.aanwijzen i.ti { transition: transform .18s ease; }
.aanwijzen:hover i.ti { transform: translateX(4px); }

/* Respecteer de voorkeur voor minder beweging. Let op: animation none
   betekent hier ook dat de begintoestand van 'both' vervalt, dus de
   knop staat gewoon zichtbaar en op zijn plek. */
@media (prefers-reduced-motion: reduce) {
  .aanwijzen { animation: none; }
  .aanwijzen i.ti, .aanwijzen:hover i.ti { transition: none; transform: none; }
}

/* Bevestigingsvenster (bv. quiz verlaten) */
.bevestig-laag {
  position: fixed; inset: 0; z-index: 9999; background: rgba(15,23,42,.55);
  display: flex; align-items: center; justify-content: center; animation: infade .2s ease;
}
.bevestig-kaart {
  background: #fff; border-radius: 20px; padding: 26px; max-width: 340px; text-align: center;
  box-shadow: 0 20px 50px rgba(0,0,0,.3); animation: levelpop .35s cubic-bezier(.2,1.3,.5,1);
}
.bevestig-icoon { font-size: 2rem; color: var(--amber); }
.bevestig-titel { font-weight: 800; font-size: 1.1rem; margin: 8px 0 4px; }
.bevestig-tekst { color: var(--grijs); font-size: .93rem; margin: 0 0 18px; }
.bevestig-knoppen { display: flex; gap: 10px; justify-content: center; }
.knop.rood {
  --knop-boven: #fdeaea; --knop-onder: #fbd5d5;
  --knop-glans: rgba(255,255,255,.85); --knop-schaduw: 226,75,74;
  color: #b91c1c;
}

/* Klikbare gespreksvragen (les 3) */
.les-vraag {
  background: #fff; border: 2px solid var(--rand); border-radius: 14px;
  padding: 14px 16px; margin-bottom: 10px; cursor: pointer; transition: border-color .15s;
}
.les-vraag:hover { border-color: var(--kleur); }
.les-vraag.open { border-color: var(--kleur); }
.vraag-rij { display: flex; align-items: center; gap: 12px; }
.vraag-nr { color: var(--kleur); font-weight: 800; font-size: 1.1rem; }
.vraag-tekst { flex: 1; font-weight: 700; }
.vraag-hint { color: #94a3b8; font-size: .82rem; font-weight: 700; display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.les-vraag.open .vraag-hint { display: none; }
.vraag-antwoord {
  display: none; color: #334155; font-size: .92rem; line-height: 1.55;
  margin: 10px 0 0; padding: 10px 12px; background: #f8fafc; border-radius: 10px;
}
.les-vraag.open .vraag-antwoord { display: block; }

/* ---------- Zwevende punten ---------- */
.vlieg-punt {
  position: fixed; z-index: 999; pointer-events: none;
  color: var(--amber); font-size: 24px; opacity: 1;
  transition: transform 1.5s cubic-bezier(.45,-.15,.55,1), opacity 1.5s ease;
  text-shadow: 0 1px 3px rgba(0,0,0,.15);
}
/* Elke landende ster geeft de teller een korte tik, zodat je ziet
   waar ze heen gaan. Kort en klein: het is een bevestiging, geen
   tweede viering. */
.punten-raak { animation: puntraak .4s ease; }
@keyframes puntraak {
  0%   { box-shadow: 0 0 0 0 rgba(245,158,11,.5); }
  55%  { box-shadow: 0 0 0 8px rgba(245,158,11,0); background: #fde68a; }
  100% { box-shadow: 0 0 0 0 rgba(245,158,11,0); }
}
.punten-pop { animation: puntpop .5s ease; }
@keyframes puntpop {
  0% { transform: scale(1); }
  40% { transform: scale(1.35); background: #fde68a; }
  100% { transform: scale(1); }
}

/* ---------- Quiz ---------- */
.quiz-stap { animation: infade .25s ease; }
@keyframes infade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.quiz-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 16px; align-items: center; }

/* Directe feedback per vraag */
.opties.vergrendeld { pointer-events: none; }
.optie.goed { background: #f0fdf4; border-color: var(--groen); }
.optie.goed::after { content: '✓'; float: right; color: var(--groen-donker); font-weight: 800; }
.optie.mis  { background: #fef2f2; border-color: var(--rood); }
.optie.mis::after { content: '✗'; float: right; color: var(--rood); font-weight: 800; }
.feedback {
  display: flex; align-items: center; gap: 8px;
  margin-top: 12px; padding: 10px 14px; border-radius: 12px; font-weight: 700;
}
.feedback.goed { background: #dcfce7; color: var(--groen-donker); }
.feedback.mis  { background: #fee2e2; color: var(--rood); }
.uitleg-box {
  margin-top: 10px; padding: 12px 14px; border-radius: 12px;
  background: var(--amber-licht); font-size: .95rem;
}
.uitleg-box i { color: var(--amber); }

/* Afbeelding bij een quizvraag */
.vraag-fig { margin: 0 0 16px; }
.vraag-fig img { display: block; width: 100%; max-width: 620px; margin: 0 auto; border-radius: 14px; border: 1px solid var(--rand); }

/* "jouw antwoord"-label op de terugkijkpagina */
.jouw-keuze {
  float: right; font-size: .72rem; font-weight: 800; color: var(--grijs);
  background: #eef2f7; padding: 2px 8px; border-radius: 999px;
}
.optie.goed .jouw-keuze, .optie.mis .jouw-keuze { color: #fff; background: rgba(0,0,0,.18); }

/* ---------- Coach met tekstballon ---------- */
.coach { display: flex; align-items: flex-start; gap: 4px; margin-bottom: 18px; }
/* Iggy vult altijd zijn houdertje (v1.45.3)
   ------------------------------------------------------------------
   De app staat op border-box. Een rondje van 88 pixels met een rand
   van 3 heeft binnenin dus 82 pixels, en de tekening kwam er op 88 in.
   Het verschil werd door overflow: hidden weggeknipt: bovenaan de
   capuchon, onderaan de schouders, rondom het sparkje.

   Dit lost het op voor elk houdertje tegelijk, en het blijft kloppen
   als er ooit een rand bij komt of af gaat. Het getal dat aan
   iggy_mini() wordt meegegeven is daarmee alleen nog een startmaat. */
.iggy-tekening { display: block; width: 100%; height: 100%; }

/* Iggy stond hier eindeloos op en neer te wiebelen (weg in v1.45.1).
   Dezelfde reden als bij de knop: beweging die nooit ophoudt wijst
   nergens meer naar, en dit is de grootste figuur op het scherm.
   De achtergrond was een verloop; de tekening brengt nu zijn eigen
   vlakke vlak mee, dus dit is alleen nog een vangnet voor de randen. */
/* De witte rand met blauwe slagschaduw eromheen maakte er een sticker
   van: een figuur die boven de pagina zweeft. Een haarlijn houdt hem
   op het blad. De achtergrondkleur kan weg — de tekening brengt sinds
   v1.62.1 zijn eigen vlak mee. */
.coach-figuur {
  flex-shrink: 0; width: 88px; height: 88px; border-radius: 50%;
  background: #e9eef5;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(15,23,42,.10);
}
.tekstballon {
  position: relative; background: #fff; border: 1px solid var(--rand);
  border-radius: 14px; padding: 18px 22px; margin-left: 12px; flex: 1;
}
.tekstballon::before {
  content: ''; position: absolute; left: -9px; top: 30px;
  border: 7px solid transparent; border-right-color: #fff;
  filter: drop-shadow(-1px 0 0 var(--rand));
}
/* Was 800 en accentblauw. Dat las als een link en schreeuwde harder
   dan de zin eronder. Een sprekernaam hoort een label te zijn, niet
   een kop: kleiner, grijs, met wat letterafstand. */
.ballon-naam {
  font-weight: 600; color: var(--grijs); font-size: .74rem;
  letter-spacing: .06em; text-transform: uppercase; margin-bottom: 10px;
}
/* REGELLENGTE (v1.62.1)
   ------------------------------------------------------------------
   De ballon is zo breed als de pagina. Op een gewoon scherm werd dat
   ruim honderd tekens per regel. Voor doorlopende tekst ligt het
   prettige bereik tussen de 50 en 75: daarboven verlies je bij elke
   terugsprong de volgende regel uit het oog, en dat voel je als
   vermoeidheid, niet als een probleem met de tekst.

   De maat staat op de alinea's en niet op de ballon zelf. Zo houdt de
   ballon zijn breedte -- die hoort bij de kaart eronder -- en worden
   alleen de regels korter. */
.tekstballon p { font-size: 1.02rem; line-height: 1.7; margin: 0 0 12px; max-width: 62ch; }
.tekstballon p:last-child { margin-bottom: 0; }
#coach-tekst { min-height: 1.7em; }
/* Vervangt de title-tooltip van de browser; zie de toelichting in
   module.php. Rechts uitgelijnd omdat hij een uitweg is, geen
   hoofdhandeling: de hoofdhandeling staat onder de lessenlijst. */
.ballon-overslaan {
  display: block; margin: 14px 0 0 auto;
  background: none; border: 1px solid var(--rand); border-radius: 999px;
  padding: 5px 14px; font: inherit; font-size: .8rem; font-weight: 600;
  color: var(--grijs); cursor: pointer;
}
.ballon-overslaan:hover { border-color: #cbd5e1; color: var(--tekst); background: var(--licht); }
.ballon-overslaan:focus-visible { outline: 2px solid var(--kleur); outline-offset: 2px; }

/* Meta-label (tijd + punten) */
.module-meta { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 16px; }
.meta-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: #fff; border: 1px solid var(--rand); border-radius: 999px;
  padding: 5px 12px; font-size: .82rem; font-weight: 700; color: #334155;
}
.meta-chip i { color: var(--kleur); }
/* De puntenchip had een amber vlak en de tijdchip niet. Twee feiten
   van gelijk gewicht, waarvan er een schreeuwde -- en juist het
   minst belangrijke van de twee: hoe lang iets duurt bepaalt of je
   eraan begint, punten niet.
   Nu dezelfde chip, en alleen de ster houdt zijn kleur. */
.meta-chip.goud i { color: #b4770c; }

/* Leeruitkomsten (vinkjes in de coach-ballon) */
.coach-uitkomsten { border-top: 1px solid #eef1f6; margin-top: 12px; padding-top: 12px; }
.uitkomsten-kop { font-weight: 600; font-size: .88rem; color: var(--grijs); margin-bottom: 10px; }
.uitkomst-rij { display: flex; align-items: center; gap: 8px; font-size: .98rem; margin: 5px 0; }
.uitkomst-rij i { color: var(--groen); font-size: 1.2rem; }

/* ---------- Video ---------- */
.video-wrap { position: relative; padding-top: 56.25%; border-radius: 14px; overflow: hidden; }
.video-wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
.video-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; background: var(--kleur-licht); border: 2px dashed #bcd0f5;
  border-radius: 14px; padding: 44px 16px; color: var(--grijs); text-align: center;
}
.video-placeholder i { font-size: 2.4rem; color: var(--kleur); }

/* ---------- Tabellen ---------- */
.tabel { width: 100%; border-collapse: collapse; background: #fff; border-radius: 16px; overflow: hidden; }
.tabel th, .tabel td { padding: 11px 13px; text-align: left; border-bottom: 1px solid var(--rand); }
.tabel th { background: var(--licht); font-weight: 700; }
.tabel form { display: inline; }

/* ---------- Level-up viering ---------- */
.levelup-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(15,23,42,.55); display: flex; align-items: center; justify-content: center;
  animation: infade .3s ease;
}
/* Het scherm staat altijd klaar en wordt met hidden aan- en uitgezet.
   Zonder deze regel wint display:flex van hidden en staat hij er meteen. */
.levelup-overlay[hidden] { display: none; }
.levelup-kaart {
  position: relative; overflow: hidden; text-align: center;
  background: #fff; border-radius: 24px; padding: 34px 40px; max-width: 340px;
  box-shadow: 0 20px 50px rgba(0,0,0,.3); animation: levelpop .45s cubic-bezier(.2,1.3,.5,1);
}
@keyframes levelpop { from { transform: scale(.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.levelup-kaart canvas { position: absolute; inset: 0; pointer-events: none; }
.levelup-badge {
  width: 84px; height: 84px; border-radius: 50%; margin: 0 auto 12px;
  background: var(--amber); color: #fff; font-size: 44px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 8px var(--amber-licht);
}
.levelup-titel { font-weight: 800; font-size: 1.5rem; color: var(--kleur); }
.levelup-level { font-weight: 800; font-size: 2.4rem; margin: 4px 0; }
.levelup-naam {
  display: inline-block; background: var(--kleur-licht); color: var(--kleur-diep);
  padding: 5px 16px; border-radius: 999px; font-weight: 700; margin-bottom: 18px;
}

.terug {
  display: inline-flex; align-items: center; gap: 5px;
  margin-bottom: 12px; color: var(--grijs); text-decoration: none; font-weight: 600;
}
.terug:hover { color: var(--kleur); }
.voet { text-align: center; color: var(--grijs); padding: 26px; font-size: .9rem; }
.voet a { color: var(--grijs); text-decoration: underline; }
.voet a:hover { color: var(--kleur); }

/* ---------- Privacystrook onder het moduleoverzicht ---------- */
/* Een linkerrand in plaats van een gekleurd vlak: dit is een
   mededeling, geen waarschuwing. Vierkante hoeken, want een randje
   aan één kant met ronde hoeken ziet er stuk uit. */
.privacystrook {
  display: flex; gap: 14px; align-items: flex-start;
  background: #fff; border: 1px solid var(--rand);
  border-left: 4px solid var(--kleur);
  padding: 17px 20px; margin-top: 22px;
}
.privacystrook .ps-icoon { font-size: 1.4rem; color: var(--kleur); line-height: 1.3; }
.ps-tekst { min-width: 0; }
.ps-kop { margin: 0 0 3px; font-weight: 700; font-size: 1.02rem; }
.ps-sub { margin: 0 0 11px; font-size: .93rem; color: var(--grijs); line-height: 1.55; }
.ps-sub a { color: var(--kleur-donker); }
.ps-vink {
  display: flex; gap: 9px; align-items: center;
  font-size: .93rem; cursor: pointer;
}
.ps-vink input { width: 17px; height: 17px; accent-color: var(--kleur); cursor: pointer; }

/* ---------- Einde van de proef, op het uitslagscherm ---------- */
/* Zelfde vorm als .ontgrendeld, andere kleur. Groen zegt "dit is
   voor jou opengegaan"; hier gaat er niets open, en dan is groen
   een leugen. Amber zegt: hier houdt het op. */
.proefeind {
  display: flex; gap: 13px; align-items: flex-start; text-align: left;
  background: var(--amber-licht); border: 1px solid #f3d99a;
  border-radius: 14px; padding: 16px 19px; margin: 18px 0;
}
.proefeind i { font-size: 1.5rem; color: #b45309; line-height: 1.25; }
.proefeind .ontgr-titel { color: #92610a; }
.proefeind .hint { margin: 3px 0 0; line-height: 1.6; }

.knop.amber {
  --knop-boven: #f7ac2b; --knop-onder: #d4820a;
  --knop-schaduw: 245,158,11; color: #fff;
}

@media (max-width: 560px) {
  .privacystrook { padding: 15px 16px; }
  .privacystrook .ps-icoon { display: none; }
}

/* ---------- Klopt er iets niet? ---------- */
/* Een tekstlink boven een dunne lijn, geen knop. Een opvallende
   meldknop suggereert dat je fouten verwacht — geen prettig signaal
   voor wie net begonnen is. Wie iets ziet, zoekt hem vanzelf. */
.meldregel {
  text-align: center; margin: 26px 0 8px; padding-top: 18px;
  border-top: 1px solid var(--rand);
}
.meldregel a {
  color: var(--grijs); text-decoration: underline; font-size: .92rem;
}
.meldregel a:hover { color: var(--kleur); }
.meldregel i { margin-right: 5px; }

.meldkaart textarea {
  width: 100%; padding: 12px 14px; border: 2px solid var(--rand);
  border-radius: 12px; font-family: inherit; font-size: .98rem;
  line-height: 1.6; resize: vertical;
}
.meldkaart textarea:focus { outline: none; border-color: var(--kleur); }
.meldkaart.smal { max-width: 560px; }

/* Wat er meegaat, zichtbaar vóór het versturen. Dat scheelt de
   gebruiker uitleg én het is eerlijk: hij ziet welke gegevens hij
   verstuurt voordat hij op de knop drukt. */
.meldcontext {
  background: var(--licht); border-radius: 12px;
  padding: 12px 15px; margin: 16px 0 18px;
}
.mc-kop {
  margin: 0 0 5px; font-size: .74rem; color: var(--grijs);
  letter-spacing: .04em; text-transform: uppercase; font-weight: 700;
}
.mc-regel { margin: 0; font-size: .9rem; color: var(--grijs); line-height: 1.6; }

.meldknoppen { display: flex; gap: 10px; align-items: center; margin-top: 4px; }

/* ---------- Proefaccount ---------- */
/* Amber en niet grijs: dit is geen storing en geen fout, het is een
   grens. Amber zegt "hier houdt het op" zonder alarm te slaan. */
.badge.proef {
  background: var(--amber-licht); color: #92610a; border: 1px solid #f3d99a;
}
.proefstrook {
  display: flex; gap: 14px; align-items: center;
  background: #fff; border: 1px solid var(--rand);
  border-left: 4px solid var(--amber);
  padding: 17px 20px; margin-top: 22px;
}
.proefstrook .ps-icoon { font-size: 1.45rem; color: var(--amber); }
.proefstrook .ps-tekst { flex: 1; min-width: 0; }
.proefstrook .knop { white-space: nowrap; }

@media (max-width: 620px) {
  .proefstrook { flex-wrap: wrap; padding: 15px 16px; }
  .proefstrook .ps-icoon { display: none; }
  .proefstrook .knop { width: 100%; text-align: center; }
}

/* ---------- Privacyverklaring ---------- */
/* Leesbreedte boven schermbreedte: een regel van 1120 px lees je niet
   prettig. De tabellen mogen wel de volle kaart gebruiken. */
.privacytekst { max-width: 780px; margin: 0 auto; }
.privacytekst h2 { margin: 34px 0 10px; font-size: 1.25rem; }
.privacytekst h3 { margin: 22px 0 6px; font-size: 1.05rem; }
.privacytekst p  { line-height: 1.7; }
.privacytekst .tabel { margin: 12px 0 6px; font-size: .95rem; }
.privacytekst .tabel th { width: 34%; }
.privacytekst .tabel td i { color: var(--rood); margin-right: 7px; }
.privacy-lead { font-size: 1.05rem; color: var(--grijs); }
.privacy-noot { font-size: .93rem; color: var(--grijs); }
.privacy-datum {
  margin-top: 34px; padding-top: 16px; border-top: 1px solid var(--rand);
  font-size: .9rem; color: var(--grijs);
}

/* ---------- Zoeken ---------- */
/* Hier stonden tot v1.38.0 drie regels van de oude zoekbalk: een
   tweede `position: relative`, een `.zoekbalk input` met eigen rand en
   padding, en een `:focus` die het veld breder maakte. Ze hoorden bij
   de zoekbalk van vóór de nieuwe menubalk (v1.13) en zijn bij die
   verbouwing blijven staan.
   Ze deden niets zichtbaars meer, maar wel iets vervelends: die
   `:focus` had toevallig evenveel gewicht als de nieuwe regel bovenin
   en stond verderop in het bestand, dus won hij. En om de padding van
   het oude blok te neutraliseren stond er bovenin `padding: 0` — en
   dáárdoor werd de eerste letter afgeknipt. De kwaal werd bestreden,
   de oorzaak bleef staan.
   De opmaak van de zoekbalk staat nu op één plek: bij de menubalk. */
.zoek-dropdown {
  position: absolute; top: 115%; left: 0; z-index: 50;
  width: 340px; max-height: 420px; overflow-y: auto;
  background: #fff; border: 2px solid var(--rand); border-radius: 16px;
  box-shadow: 0 10px 28px rgba(30,40,80,.14); padding: 10px;
}
.zoek-dropdown .kaart { padding: 10px 12px; margin-bottom: 8px; border-width: 1px; border-radius: 12px; }
.zoek-dropdown .term { margin: 0 0 4px; }
.zoek-dropdown p { font-size: .9rem; margin: 0 0 4px; }
.zoekveld-groot {
  width: 100%; padding: 15px 20px; font-size: 1.1rem; font-family: inherit;
  border: 2px solid var(--kleur); border-radius: 16px; background: #fff;
}
.zoekveld-groot:focus { outline: none; }
.zoek-resultaat .term { font-weight: 800; font-size: 1.05rem; margin: 0 0 6px; }
mark { background: var(--amber-licht); border-radius: 4px; padding: 0 2px; }

/* ============================================================
   BEHEERPAGINA GEBRUIKERS
   ============================================================ */
.beheer-kop { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.beheer-kop h1 { margin: 0; }

.beheer-filter { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 14px 0 16px; }
.beheer-filter input[type="search"] { flex: 1 1 220px; min-width: 180px; margin: 0; }
.beheer-filter select { width: auto; min-width: 160px; margin: 0; }
.beheer-filter button { margin: 0; }

.gebruikerslijst td { vertical-align: top; }
.gebruikerslijst .sub { font-size: .8rem; color: var(--grijs); margin-top: 3px; }
.gebruikerslijst tr.rij-open > td { background: var(--kleur-licht); }

.statuslabel { display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: .78rem; font-weight: 700; white-space: nowrap; }
.st-actief      { background: #f0fdf4; color: var(--groen-donker); }
.st-uitgenodigd { background: var(--amber-licht); color: #92400e; }
.st-geblokkeerd { background: #fef2f2; color: #b91c1c; }
.st-inactief    { background: #f1f5f9; color: #64748b; }

.chip.mini { padding: 2px 8px; font-size: .72rem; vertical-align: middle; }

.mini-balk { width: 110px; height: 6px; background: #e2e8f0; border-radius: 999px; overflow: hidden; }
.mini-balk span { display: block; height: 6px; background: var(--kleur); }
.mini-balk.vol span { background: var(--groen); }

/* ============================================================
   GEBRUIKERSBEHEER — de stand van zaken (v1.35.0)

   Vier getallen boven de lijst. Ze tellen iedereen, ook wat er na een
   zoekopdracht wegvalt: een teller die meebeweegt met je filter is
   geen stand van zaken.

   Alleen wat aandacht vraagt krijgt kleur. Nul aflopende licenties is
   een grijs nulletje, drie is amber. Zo hoef je niet te lezen om te
   zien of er iets te doen is.
   ============================================================ */
/* De stand van zaken op één regel.
   -------------------------------------------------------------
   Tot v1.41.0 stonden hier vier kaarten van zestig pixels, waarvan er
   één geel oplichtte. Vier getallen die je één keer per dag bekijkt
   namen daarmee meer ruimte en meer kleur dan de lijst eronder — en
   die lijst is waar je het voor doet.
   Nu één zin, met de getallen als link naar het bijbehorende filter. */
.beheer-stand { margin: 14px 0 2px; font-size: .92rem; color: var(--grijs); }
.beheer-stand strong { color: var(--tekst); font-weight: 700; }
.beheer-stand a { color: var(--kleur-donker); font-weight: 600; text-decoration: none; }
.beheer-stand a:hover { text-decoration: underline; }
.beheer-stand a:focus-visible { outline: 3px solid var(--kleur-licht); outline-offset: 2px; border-radius: 4px; }

/* De licentie als woord, niet als gekleurd label. "Actief" plus "Proef"
   waren twee chips naast elkaar, terwijl je het als één ding leest.
   Alleen een status die iets van jou vraagt houdt zijn label. */
.lic-naam { font-weight: 700; color: var(--tekst); font-size: .93rem; }

/* De chip "Beheerder" achter een naam is een etiket, geen keuzechip.
   Hij erfde van .chip een klikcursor en een rand die oplichtte zodra je
   over de rij ging — nu de hele rij hover heeft, viel dat op. */
.gebruikerslijst .chip.mini { cursor: default; border-color: var(--rand); background: #eef2f7; color: var(--grijs); }
.gebruikerslijst tr:hover .chip.mini { border-color: var(--rand); }

/* Onder de licentie: hoe lang hij nog loopt.
   Alleen de echte uitzonderingen kleuren. De drempel staat in
   gebruikers.php bij LET_OP_DAGEN — zeven dagen, niet dertig. */
.gebruikerslijst .sub.let-op { color: #b45309; font-weight: 700; }
.gebruikerslijst .sub.verlopen { color: #b91c1c; font-weight: 700; }
.gebruikerslijst .sub.gehaald { color: var(--groen-donker); font-weight: 700; }
.gebruikerslijst .sub i { font-size: .95rem; vertical-align: -1px; margin-right: 2px; }
/* "Nog nooit ingelogd" stond in oranje. Dat is geen storing maar een
   uitnodiging die openstaat; die hoort niet te alarmeren. */
.gebruikerslijst .nooit { color: var(--grijs); }

/* Het pijltje rechts vervangt zeven grijze knoppen onder elkaar. Stil
   tot je over de rij gaat; dan wijst hij zichzelf aan. */
.gebruikerslijst .rij-actie { width: 40px; text-align: right; }
.rij-open-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 8px;
  color: #b0b8c9; font-size: 1.15rem; text-decoration: none;
  transition: color .15s, background .15s;
}
.gebruikerslijst tbody tr:hover { background: #f8fafc; }
.gebruikerslijst tbody tr:hover .rij-open-link { color: var(--kleur); background: var(--kleur-licht); }
.rij-open-link:focus-visible { outline: 3px solid var(--kleur-licht); outline-offset: 1px; color: var(--kleur); }
@media (prefers-reduced-motion: reduce) { .rij-open-link { transition: none; } }

.detailrij > td { background: var(--licht); padding: 0 !important; }
.detailpaneel { padding: 18px 16px 6px; }
.detailpaneel h3 { margin: 0 0 4px; }
.detailpaneel h3 .sub { font-size: .82rem; font-weight: 500; color: var(--grijs); margin-left: 8px; }
.detailpaneel h4 { margin: 0 0 8px; font-size: .95rem; }
.detail-blok { background: #fff; border: 1px solid var(--rand); border-radius: 14px;
  padding: 14px 16px; margin-bottom: 14px; }
.detail-blok.gevaar { border-color: #fecaca; }
.detail-blok .hint { margin: 8px 0 0; }

.rij-form { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.rij-form label { display: block; margin: 0; font-size: .82rem; flex: 1 1 180px; }
.rij-form input { margin: 4px 0 0; }
.rij-form button { margin: 0; }

.actieknoppen { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.actieknoppen form { display: flex; gap: 6px; align-items: center; margin: 0; }
.actieknoppen input[type="date"] { margin: 0; width: auto; }

@media (max-width: 720px) {
  .gebruikerslijst th:nth-child(4), .gebruikerslijst td:nth-child(4) { display: none; }
}

/* Lessen en quizzen per module in het detailpaneel */
.modulerij { border-top: 1px solid var(--rand); padding: 10px 0 4px; }
.modulerij:first-of-type { border-top: 0; padding-top: 0; }
.modulerij-kop { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.modulerij-kop .sub { flex: 1; font-size: .8rem; color: var(--grijs); margin: 0; }
/* De knop staat altijd rechts op dezelfde regel als de moduletitel.
   flex: none voorkomt dat hij bij weinig ruimte onder de titel springt;
   dan lijkt hij namelijk bij de volgende regel te horen. */
.modulerij-kop form.modulereset { margin: 0; flex: none; margin-left: auto; }
.modulerij-kop form { margin: 0; }
.modulerij-leeg {
  margin-left: auto; flex: none;
  font-size: .78rem; color: #94a3b8; font-style: italic;
}

.leslijst { list-style: none; margin: 6px 0 0; padding: 0; }
.leslijst li { display: flex; align-items: center; gap: 8px; padding: 3px 0 3px 4px; }
.leslijst form { margin: 0; }
.lestitel { flex: 1; font-size: .86rem; }
.lesstatus { font-size: 1rem; line-height: 1; }
.lesstatus.af    { color: var(--groen); }
.lesstatus.bezig { color: var(--amber); }
.lesstatus.open  { color: #cbd5e1; }

.knop.mini { padding: 4px 9px; font-size: .78rem; border-radius: 8px; }

/* ============================================================
   WACHTWOORD TONEN EN KOPIEREN
   ============================================================ */

/* Het oogje in een wachtwoordveld.
   -------------------------------------------------------------
   De huls wordt door footer.php om het veld heen gezet, zodat er
   niets aan de formulieren zelf hoeft te veranderen. Hij neemt de
   breedte over van het veld dat erin zit.

   De rechterruimte in het veld is er om de knop, zodat het oogje
   nooit over de tekst valt — ook niet bij een lang wachtwoord. */
/* De marge verhuist van het veld naar de huls. Zonder dat staat het
   oogje 5px te hoog: het rekent vanaf het midden van de huls, en die
   is dan hoger dan het veld zelf. */
.veld-oog { position: relative; display: block; margin-top: 5px; }
.veld-oog input[type="password"],
.veld-oog input[type="text"] { padding-right: 46px; margin-top: 0; }

.oogknop {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; padding: 0;
  background: none; background-image: none; border: 0; box-shadow: none;
  color: var(--grijs); font-size: 1.15rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  border-radius: 9px;
  transition: color .15s, background .15s;
}
.oogknop:hover { background: var(--licht); color: var(--kleur); box-shadow: none; transform: translateY(-50%); }
.oogknop:active { transform: translateY(-50%); box-shadow: none; }
.oogknop:focus-visible { outline: 3px solid var(--kleur-licht); outline-offset: 1px; color: var(--kleur); }
@media (prefers-reduced-motion: reduce) { .oogknop { transition: none; } }

/* Het wachtwoord met de kopieerknop ernaast, op de beheerpagina. */
.kopieerrij { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kopieerrij code { font-size: 1rem; letter-spacing: .04em; }

/* Het mailblok staat in een verborgen <textarea>: dan hoeft de tekst
   nergens ontsnapt te worden en kan een apostrof in een naam het
   script niet breken. Deze regel is het vangnet — `form textarea` zet
   display op block, en als het paneel ooit ín een formulier belandt
   zou de textarea zichtbaar worden ondanks `hidden`. */
textarea[hidden] { display: none; }

/* Groen zodra er is gekopieerd. Kort — het is een bevestiging, geen
   viering. */
.knop.kopie-klaar, .knop.kopie-klaar:hover {
  --knop-boven: #34c06f; --knop-onder: #189a4d; --knop-schaduw: 34,197,94;
  color: #fff;
}
.knop.grijs.kopie-klaar, .knop.grijs.kopie-klaar:hover {
  background-image: linear-gradient(180deg, #dcfce7 0%, #bbf7d0 100%);
  color: var(--groen-donker);
}

/* ============================================================
   STAP 1 — LEER HET: rustiger intro en tegels met beeld
   ============================================================ */
.leer-intro { background: var(--kleur-licht); border-radius: 14px;
  padding: 14px 16px; margin: 0 0 16px; }
.leer-kop { margin: 0; font-size: 1.02rem; line-height: 1.6; color: var(--kleur-diep); font-weight: 700; }
.leer-sub { margin: 6px 0 0; font-size: .92rem; line-height: 1.6; color: var(--kleur); }

/* ============================================================
   IGGY BEGELEIDT ELKE STAP
   Zelfde tekstballon als bij het Onthoud, zodat de les één stem heeft.
   ============================================================ */
.iggy-stap { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 18px; }
.iggy-avatar { flex-shrink: 0; width: 50px; height: 50px; border-radius: 50%;
  background: var(--kleur-licht); overflow: hidden; }
.iggy-bubbel { position: relative; flex: 1; background: var(--kleur-licht);
  border-radius: 16px; padding: 14px 18px; }
.iggy-bubbel::before { content: ''; position: absolute; left: -7px; top: 20px;
  width: 14px; height: 14px; background: var(--kleur-licht);
  transform: rotate(45deg); border-radius: 3px; }
.iggy-bubbel > p { margin: 0; }
.iggy-bubbel > p + p { margin-top: 8px; }
.iggy-bubbel .stap-tag { margin: 0 0 8px; background: #fff; }
.iggy-bubbel .leer-kop { font-size: 1.02rem; line-height: 1.6;
  color: var(--kleur-diep); font-weight: 700; }
.iggy-bubbel .leer-sub { font-size: .92rem; line-height: 1.6; color: var(--kleur); }
.iggy-bubbel .zeg-introkop { font-size: .82rem; color: var(--kleur); font-weight: 700; }
.iggy-bubbel .zeg-vraag { font-size: 1.02rem; color: var(--kleur-diep); font-weight: 700; }

@media (max-width: 560px) {
  .iggy-stap { gap: 8px; }
  .iggy-avatar { width: 40px; height: 40px; }
  .iggy-bubbel { padding: 12px 14px; }
}

/* Beeld is inhoud, geen versiering: meteen groot, niet achter een klik. */
.etegel-afb { display: block; width: 100%; max-width: 440px;
  aspect-ratio: 220 / 170; object-fit: contain; padding: 10px;
  border-radius: 12px; border: 1px solid var(--rand); background: #fff;
  margin: 4px 0 14px; }
.etegel.gezien { border-color: var(--kleur); }

.stap-hint.klaar { color: var(--groen-donker); font-weight: 700; }
.stap-hint.klaar i { margin-right: 4px; }

@media (max-width: 560px) {
  .etegel-afb { max-width: 100%; }
}

/* ============================================================
   STAP 3 — GESPREKSOEFENING
   De kandidaat zegt iets, de recruiter kiest de vervolgvraag.
   ============================================================ */
/* Volgorde als in een echt gesprek: de kandidaat zegt iets, Iggy
   denkt met je mee, dan is het jouw beurt. Twee sprekers, twee
   vormen — een witte ballon tegenover Iggy's blauwe. */
.gesprek { margin-bottom: 22px; }
.gesprek-kop { font-size: .72rem !important; letter-spacing: .09em;
  text-transform: uppercase; color: var(--grijs); font-weight: 700;
  margin: 0 0 14px !important; }
.spreker { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 18px; }
.spreker:last-child { margin-bottom: 0; }
.spreker-avatar { flex-shrink: 0; width: 58px; height: 58px; border-radius: 50%;
  background: var(--licht); border: 2px solid var(--rand); color: var(--grijs);
  display: flex; align-items: center; justify-content: center; font-size: 1.7rem; }
.spreker-tekst { flex: 1; min-width: 0; }
/* Allebei een naam boven de ballon: twee sprekers, gelijk behandeld. */
.spreker-naam { font-size: .8rem !important; color: var(--grijs);
  margin: 0 0 5px !important; font-weight: 600; }
.kandidaat-bubbel { position: relative; background: #fff;
  border: 2px solid var(--rand); border-radius: 18px; padding: 16px 22px; }
.kandidaat-bubbel::before { content: ''; position: absolute; left: -9px; top: 20px;
  width: 14px; height: 14px; background: #fff; transform: rotate(45deg);
  border-left: 2px solid var(--rand); border-bottom: 2px solid var(--rand); }
.kandidaat-quote { margin: 0 !important; font-size: 1.28rem !important;
  line-height: 1.45 !important; color: var(--donker); font-weight: 600; }
/* Het woord waar Iggy op wijst, licht zacht op in het citaat. */
.kandidaat-quote mark { background: var(--amber-licht); color: inherit;
  padding: 1px 5px; border-radius: 5px; }

/* Iggy krijgt in stap 3 meer gewicht: hij is de begeleider. */
.gesprek .iggy-avatar { width: 58px; height: 58px; flex-shrink: 0; }
.gesprek .iggy-bubbel { padding: 16px 22px; border-radius: 18px; }
.gesprek .iggy-bubbel::before { top: 18px; }
.gesprek .iggy-bubbel > p { font-size: 1.06rem !important; line-height: 1.6 !important;
  color: var(--kleur-diep); }
/* Iggy wijst één woord aan, cursief. Geen vetgedrukte blokken meer:
   die maken van een zin een puzzel. */
.gesprek .iggy-bubbel em { font-style: italic; }

/* De opdracht staat los, klein en neutraal — niet in Iggy's mond. */
.zeg-opdracht { font-size: 1.02rem !important; font-weight: 700;
  margin: 0 0 12px !important; color: var(--tekst); }

/* Cv-fragment: opgemaakt zoals een echt cv, niet als code */
.cvkaart { background: #fff; border: 1px solid var(--rand); border-radius: 14px;
  padding: 18px 22px; margin: 0 0 18px; }
.cvkaart-kop { font-size: 1.12rem; color: #1f2937; padding-bottom: 9px;
  border-bottom: 1px solid #d1d5db; margin-bottom: 14px; }
.cvkaart-rij { display: flex; gap: 12px; }
.cvkaart-stip { flex-shrink: 0; width: 9px; height: 9px; margin-top: 7px;
  border: 1.5px solid #9ca3af; border-radius: 50%; }
.cvkaart-periode { font-size: .86rem; font-style: italic; color: #4b5563; margin-bottom: 5px; }
.cvkaart-functie { font-size: .95rem; font-weight: 700; color: #111827; margin-bottom: 9px; }
.cvkaart-lijst { margin: 0; padding-left: 18px; font-size: .9rem; line-height: 1.85; color: #374151; }
.cvkaart-lijst li { margin-bottom: 3px; border-radius: 5px; padding: 2px 6px;
  margin-left: -6px; transition: background .4s ease; }
.cvkaart-lijst li.bron { background: #dcfce7; }

/* Opfrisser binnen de tekstballon van Iggy */
.opfrisser { background: #fff; border-radius: 10px; padding: 11px 14px;
  margin-top: 11px; font-size: .92rem; line-height: 2; color: var(--kleur-diep); }
.herken-vraag { font-size: .98rem; color: var(--donker); margin: 0 0 10px; }

@media (max-width: 560px) {
  .spreker { gap: 10px; margin-bottom: 14px; }
  .spreker-avatar, .gesprek .iggy-avatar { width: 44px; height: 44px; font-size: 1.3rem; }
  .kandidaat-bubbel, .gesprek .iggy-bubbel { padding: 13px 16px; }
  .spreker-naam { font-size: .75rem !important; }
  .kandidaat-quote { font-size: 1.08rem !important; }
  .gesprek .iggy-bubbel > p { font-size: .98rem !important; }
  .cv-fragment { font-size: .8rem; padding: 13px 14px; }
}

/* ============================================================
   QUIZ ALS TOETS
   Tijdens de quiz nergens groen of rood: alleen de eigen keuze
   wordt gemarkeerd. Goed en fout komen pas na het inleveren.
   ============================================================ */
.quizkop .stap-tekst { text-align: right; color: var(--grijs); font-size: .88rem; font-weight: 700; margin: 0; }
.optie.gekozen { border-color: var(--kleur); background: var(--kleur-licht); color: var(--kleur-diep); }
.quiz-hint { flex: 1; text-align: right; padding-right: 4px; margin: 0;
  color: var(--grijs); font-size: .85rem; font-weight: 600; }
.quiz-nav { border-top: 2px solid var(--rand); margin-top: 20px; padding-top: 16px; }

/* De quiz leest als een les: zelfde breedte, zelfde antwoordkaarten.
   Wie van les 5 naar de quiz gaat, valt niet in een ander leesritme. */
.quiz-stap { min-height: 380px; display: flex; flex-direction: column; }
.quiz-stap .quizkop { margin-bottom: 4px; }
.quiz-stap .quizkop .balk { height: 10px; margin: 0 0 6px; }
/* ---- De rangorde op het vraagscherm (v1.61.1) ----

   Stond de vraag op 1,15 rem en het antwoord op 1,05. Tien honderdsten
   verschil is geen rangorde — dan zoekt je oog zelf uit wat het
   belangrijkste is, en dat kost aandacht.

   Nu drie duidelijke treden:

     vraag      1,35 rem  vet      wat er van je gevraagd wordt
     antwoord   1,05 rem  halfvet  waar je uit kiest
     situatie   1,02 rem  schreef  waar het over gaat

   De antwoorden blijven staan waar ze stonden. Kleiner maken zou de
   rangorde ook oplossen, maar dan lees je vier keer iets kleins —
   en die vier regels zijn waar je de meeste tijd naar kijkt. */
.quiz-stap .vraagtekst {
  font-size: 1.35rem; line-height: 1.35;
  margin: 4px 0 20px;
}

/* Op een telefoon iets terug: 1,35 rem over drie regels duwt de
   antwoorden onder de vouw, en dan zie je niet meer dat het er vier
   zijn. */
@media (max-width: 560px) {
  .quiz-stap .vraagtekst { font-size: 1.2rem; margin-bottom: 16px; }
}

/* ---- De situatie boven de vraag (v1.61.0) ----

   Sinds de quizvragen situaties zijn, stond het citaat en de vraag in
   één vetgedrukte zin van soms 117 tekens. Nu drie lagen: waar het
   vandaan komt, wat er gezegd wordt, en dan pas wat er van je gevraagd
   wordt.

   Dezelfde opbouw als .toets-bron in de IQ-check. Wie van de ene naar
   de andere gaat, ziet hetzelfde patroon. */
.quiz-situatie {
  background: var(--licht); border-radius: 14px;
  padding: 13px 16px; margin: 12px 0 16px;
}
.qs-bron {
  margin: 0 0 5px; font-size: .74rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .07em; color: var(--grijs);
}
.qs-bron i { font-size: .95rem; margin-right: 3px; }

/* Georgia is een systeemletter — er wordt niets extra's geladen. De
   schreef zet het citaat apart van de rest van het scherm, zodat je
   ziet dat dit iemands woorden zijn en niet die van de app. */
.qs-tekst {
  margin: 0; font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.02rem; line-height: 1.55; color: var(--tekst);
}

/* In het terugkijklijstje staat de situatie op dezelfde regel als de
   vraag. Daar wordt gescand, niet gelezen: een apart citaatvak per
   vraag zou die lijst twee keer zo lang maken. */
.antw-situatie { color: var(--grijs); font-weight: 600; }
.antw-situatie::before { content: '“'; }
.antw-situatie::after  { content: '” '; }

@media (max-width: 560px) {
  .quiz-situatie { padding: 11px 13px; }
  .qs-tekst { font-size: .98rem; }
}
.quiz-stap .opties { display: grid; gap: 12px; }
.quiz-stap .optie {
  display: flex; align-items: center; gap: 14px; margin: 0;
  padding: 17px 18px; border-radius: 14px; font-size: 1.05rem; line-height: 1.45;
}
/* Het keuzerondje zit in de letter verwerkt, maar blijft in het
   formulier staan: zonder radio geen antwoord. */
.quiz-stap .optie input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.quiz-stap .optie:focus-within { border-color: var(--kleur); box-shadow: 0 0 0 3px var(--kleur-licht); }
.quiz-stap .optie.gekozen .antwletter { background: var(--kleur); color: #fff; }
.quiz-stap .quiz-nav { margin-top: auto; }

/* Antwoorden achter de knop, na het inleveren */
.antwoordlijst { margin-top: 6px; animation: infade .25s ease; }
.antwoordlijst h3 { margin: 0 0 12px; }
.antwoordlijst .antwoord { padding: 16px 20px; }
.antw-vraag { font-weight: 700; font-size: 1rem; margin: 0 0 7px; }
.antw-goed, .antw-mis { font-size: .93rem; font-weight: 600; margin: 0 0 4px;
  display: flex; align-items: flex-start; gap: 7px; }
.antw-goed { color: var(--groen-donker); }
.antw-mis  { color: var(--rood); }
.antw-uitleg { font-size: .93rem; color: #475569; margin: 7px 0 0; line-height: 1.55; }
[data-toon-antwoorden] { display: inline-flex; align-items: center; gap: 7px; }

/* ============================================================
   RUIMERE LESKAART
   De les mag het scherm vullen: bredere kaart, grotere kop en
   antwoorden als kaarten in plaats van kleine chips.
   ============================================================ */
.container.breed { max-width: 1120px; }

.les-kop { gap: 16px; margin-bottom: 18px; }
.les-kop .module-icoon { width: 54px; height: 54px; font-size: 26px; border-radius: 14px; }
.les-kop .titel { font-size: 1.42rem; }
.les-kop .rest { flex: 1; }
.les-duur {
  display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
  font-size: .85rem; font-weight: 600; color: var(--grijs);
}
.breed .stapdeel b { height: 10px; }
.breed .staptitel { font-size: .9rem; margin-bottom: 18px; }
.breed .stap-inhoud { min-height: 320px; }
.breed .stap-inhoud p { font-size: 1.02rem; }

/* Tegels in stap 1: naast elkaar, met gelijke randen.
   Twee regels:
   1. Een DICHTE tegel houdt zijn eigen hoogte (align-self: start).
      Zou hij meerekken met een open buurman, dan staat er een leeg
      vak dat eruitziet alsof die tegel ook openstaat.
   2. OPEN tegels rekken wél mee tot de langste in de rij, want die
      hebben allemaal inhoud en moeten gelijk lopen.
   De kop is altijd twee regels hoog, zodat een titel die afbreekt
   de tegel niet hoger maakt dan zijn buurman. */
.etegelrij {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 14px;
}
.etegelrij.met-beeld { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.etegelrij .etegel { margin-bottom: 0; display: flex; flex-direction: column; }
.etegelrij .etegel:not(.open) { align-self: start; }
.etegelrij .ekop { padding: 15px 17px; font-size: 1.05rem; align-items: flex-start; }
.etegelrij .ekop > span { line-height: 1.4; min-height: 2.8em; }
.etegelrij .ekop > i:first-child, .etegelrij .ekop .chev { margin-top: 3px; }
.etegelrij .ebody { padding: 0 17px 15px; font-size: .95rem; line-height: 1.6; }
.etegelrij .etegel.open .ebody { flex: 1; }

/* De opbrengst van de les: stil onderschrift, geen eigen blok.
   Staat zowel in de lessenlijst als onder de lestitel. */
.les-kop .les-opbrengst {
  font-size: .93rem; font-weight: 600; color: var(--grijs);
  line-height: 1.4; margin-top: 2px;
}

/* In de lessenlijst: titel plus wat die les je oplevert. Ook bij een
   vergrendelde les, want dan is het slot geen dichte deur maar een
   vooruitzicht. */
.les-rij .les-titel { display: flex; flex-direction: column; gap: 2px; }
.les-naam { font-weight: 700; }
.les-rij .les-opbrengst { font-size: .87rem; font-weight: 600; color: var(--grijs); line-height: 1.4; }
.les-rij.done .les-opbrengst { color: var(--groen-donker); }

/* "Wat je dan kunt horen": verschijnt pas na het juiste antwoord,
   dus het is een beloning en geen voorzet. Het citaat is het luidst —
   dat is wat je hoort. Daaronder wat het betekent en wat je ermee
   doet. De tekening is eruit: die kostte de halve kaart en zei niets
   wat de woorden niet al zeggen. Een icoon van 46 px houdt het
   herkenbaar. De tekeningen blijven in stap 1 gewoon in gebruik. */
.hoortje-kop { font-size: 1.06rem; font-weight: 700; margin: 24px 0 2px !important; }
.hoortje-sub { font-size: .9rem !important; color: var(--grijs);
  margin: 0 0 14px !important; }
.hoortje {
  display: grid; align-items: stretch;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px; animation: infade .3s ease;
}
.hoortje-kaart {
  border: 2px solid var(--rand); border-radius: 14px; background: #fff;
  padding: 16px 18px; display: flex; flex-direction: column;
}
.hoortje-quote {
  margin: 0 0 14px !important; font-size: 1.02rem !important;
  line-height: 1.5 !important; color: var(--tekst); flex: 1;
}
.hoortje-quote::before { content: '\201C'; }
.hoortje-quote::after  { content: '\201D'; }
.hoortje-duiding {
  display: flex; align-items: center; gap: 12px;
  border-top: 1px solid var(--rand); padding-top: 13px;
}
.hoortje-icoon {
  width: 46px; height: 46px; flex-shrink: 0; border-radius: 11px;
  background: var(--kleur-licht); color: var(--kleur);
  display: flex; align-items: center; justify-content: center; font-size: 1.4rem;
}
.hoortje-uitkomst { min-width: 0; }
.hoortje-label { display: block; font-size: .95rem; font-weight: 700; color: var(--tekst); }
.hoortje-gevolg { display: block; font-size: .85rem; color: var(--grijs); line-height: 1.4; }

/* Antwoorden in stap 2: kaarten in een raster, met letter ervoor.
   Vast twee kolommen, geen auto-fit. Bij vier kolommen bleef er per
   antwoord te weinig over voor een woord als "Tweefactorauthenticatie"
   (23 tekens) en liep de tekst de kaart uit. Vier antwoorden vormen
   nu een net blok van twee bij twee. */
.stap-inhoud .chiprij {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 12px; margin-bottom: 16px;
}
.stap-inhoud .chip {
  display: flex; align-items: center; gap: 13px;
  border-radius: 14px; padding: 17px 18px; font-size: 1.05rem;
}
/* Onder de 780 px blijft er per kolom te weinig over voor het langste
   woord in de lessen. Dan liever onder elkaar dan afgebroken. */
@media (max-width: 780px) {
  .stap-inhoud .chiprij { grid-template-columns: 1fr; }
}
.antwletter {
  width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
  background: #f1f5f9; color: var(--grijs);
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem; font-weight: 800;
}
.stap-inhoud .chip.goed .antwletter,
.stap-inhoud .optie.goed .antwletter { background: #dcfce7; color: var(--groen-donker); }
.stap-inhoud .chip.fout .antwletter,
.stap-inhoud .optie.mis  .antwletter { background: #fee2e2; color: #b91c1c; }
/* min-width: 0 laat de tekst krimpen binnen de flexkaart; zonder die
   regel duwt een lang woord de kaart uit elkaar. break-word is het
   vangnet voor een smal venster, niet de normale weergave. */
.antwtekst { flex: 1; min-width: 0; overflow-wrap: break-word; }

/* Antwoorden in stap 3 en 4: hogere kaarten, tekst op leesformaat */
/* Twee kolommen, net als bij de voorspelvraag (v1.61.2).

   Dit raakt drie plekken tegelijk, want alle drie hangen onder
   .stap-inhoud: de openingsvraag, de vervolgvraag van stap 3 en de
   controlevraag van stap 4.

   Vier antwoorden onder elkaar zijn vier regels waar je langs moet
   voordat je kunt kiezen. Naast elkaar zijn het er twee, en dan zie je
   ze in één blik.

   De ruimte is er: de lescontainer is 1120 pixels breed, dus een kolom
   is ruim 500. Het langste antwoord in de hele app is 71 tekens en past
   daarin op twee regels.

   Twee buren zijn even hoog, ook als de een twee regels heeft en de
   ander een. Dat is de grid-standaard en het is hier de juiste keuze:
   vier vakken van verschillende hoogte lezen als vier verschillende
   dingen, terwijl het vier gelijkwaardige antwoorden zijn. */
.stap-inhoud .opties {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
/* Bij ongelijke hoogte staat de tekst bovenaan in plaats van in het
   midden van een te hoog vak. */
.stap-inhoud .optie { align-items: center; }
/* Een oneven laatste alleen in de linkerkolom leest als een fout in de
   opmaak. Over de volle breedte is het een keuze. */
.stap-inhoud .opties > .optie:last-child:nth-child(odd) { grid-column: 1 / -1; }

.stap-inhoud .optie {
  display: flex; align-items: center; gap: 14px; margin: 0;
  padding: 17px 18px; border-radius: 14px; font-size: 1.05rem; line-height: 1.45;
}
.stap-inhoud .optie.goed::after,
.stap-inhoud .optie.mis::after { float: none; margin-left: auto; font-size: 1.15rem; }

/* ---------- Antwoorden als kaarten (v1.47.0, hersteld in v1.47.1) ----
   Twee kolommen, en álle vier de antwoorden krijgen dezelfde kaart.
   Eerst kregen alleen de twee kandidaten er een en liepen de andere
   twee over de volle breedte — dat las als twee soorten antwoord
   terwijl het één keuze is.

   Elk antwoord houdt zijn letter, net als overal elders in de app.
   Initialen in een rondje zeiden niets: "RD" naast "R. Doornbos" is
   dezelfde informatie twee keer, en het kostte de naam zijn ruimte.

   DEZE REGELS MOETEN NA .stap-inhoud .optie STAAN.
   Die zet display: flex met dezelfde specificiteit. Stond dit blok
   eerder in het bestand, dan won flex en kwamen de kop en de regel
   naast elkaar te staan in plaats van onder elkaar. Precies dat ging
   de eerste keer mis. */
.stap-inhoud .opties.kaarten { grid-template-columns: 1fr 1fr; gap: 10px; }
.stap-inhoud .opties.kaarten .optie {
  display: block; padding: 15px 16px; font-size: 1rem; line-height: 1.5;
}
.kaart-kop { display: flex; align-items: center; gap: 12px; }
.kaart-naam { display: block; min-width: 0; font-weight: 700; line-height: 1.3; }
.kaart-naam em {
  display: block; font-style: normal; font-weight: 400;
  font-size: .8rem; color: var(--grijs); margin-top: 3px;
}
.kaart-regel {
  display: block; font-size: .88rem; line-height: 1.55; color: var(--grijs);
  margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--rand);
}
/* Op de gekleurde achtergrond van een goed of fout antwoord is de
   streep te bleek; dan een tint van de rand zelf. */
.stap-inhoud .opties.kaarten .optie.goed .kaart-regel,
.stap-inhoud .opties.kaarten .optie.mis  .kaart-regel,
.stap-inhoud .opties.kaarten .optie.gekozen .kaart-regel {
  border-top-color: rgba(15,23,42,.14);
}
/* Het vinkje van een goed antwoord zweeft bij een blokkaart naar de
   verkeerde plek; hier hoort hij rechtsboven bij de letter. */
.stap-inhoud .opties.kaarten .optie.goed::after,
.stap-inhoud .opties.kaarten .optie.mis::after {
  float: right; margin: -30px 0 0;
}
/* De terugval naar één kolom staat nu bij de andere antwoordvormen, in
   de media-query op 700 pixels (v1.61.2). Stond hier eerst op 560; twee
   cv's naast elkaar zijn op 640 net zo krap als op 560. */

/* ---------- Toelichting in het antwoordvak (v1.56.0) ----------------
   Het juiste antwoord in stap 4 krijgt de uitleg in zijn eigen vak,
   onder een haarlijn. Het oordeel is groen, de toelichting amber —
   zie de toelichting bij .optie-uitleg hieronder.

   DEZE REGELS MOETEN NA .stap-inhoud .optie STAAN. Die zet display
   op flex; hier moet het blok zijn, anders komt de uitleg naast het
   antwoord te staan in plaats van eronder.

   Het vinkje via ::after vervalt: het staat nu als woord in de rij,
   en twee vinkjes in één vak is er één te veel.

   De inspringing van 64px is de letter (32) plus de tussenruimte (14)
   plus de padding (18). Zo begint de uitleg precies onder de eerste
   letter van het antwoord. text-indent trekt alleen het lampje weer
   naar links, de rest van de regel blijft uitgelijnd. */
.stap-inhoud .optie.met-uitleg {
  /* Ruimte onderaan: het ambervak zweeft binnen het groene vlak in
     plaats van tegen de rand aan te plakken (v1.61.12). Twee kaders die
     elkaar raken leest als een fout in de opmaak. */
  display: block; padding: 0 0 14px; cursor: default;
}
.stap-inhoud .optie.met-uitleg:hover {
  background: #f0fdf4; border-color: var(--groen);
}
.stap-inhoud .optie.met-uitleg::after { content: none; }

/* align-items: flex-start, niet center. Bij een antwoord van twee
   regels stond de letter er verticaal gecentreerd naast te zweven;
   nu staat hij naast de eerste regel, waar hij hoort. De padding-top
   op de tekst vangt het hoogteverschil op tussen het letterblok (32px)
   en de eerste regel tekst. */
.optie-rij {
  display: flex; align-items: flex-start; gap: 13px; padding: 16px 18px 14px;
}
.optie-rij .antwtekst { flex: 1; padding-top: 4px; line-height: 1.4; }
.optie-merk {
  margin-left: auto; flex-shrink: 0; padding-top: 7px;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .8rem; font-weight: 800; color: var(--groen-donker);
}
.optie-merk i { font-size: 1.1rem; }
/* De toelichting is amber, niet groen (v1.61.11).

   Het oordeel blijft groen: de rand, het vlak achter het antwoord en
   het woord "Goed". Dat is wat groen hier betekent.

   De uitleg eronder is iets anders — het is dezelfde soort tekst als de
   uitleg in de quiz, bij stap 2 en op de uitslagpagina, en die is daar
   overal amber. Deze plek was de uitzondering.

   Groen op groen liet de toelichting bovendien meelezen als onderdeel
   van het oordeel, terwijl het de reden erachter is. */
/* Het ambervak als eigen blok binnen het groene kader.

   Geen border-top meer en geen text-indent: het lampje staat nu als
   eigen kolom naast de tekst in plaats van met een negatieve
   inspringing buiten de tekstkolom te hangen.

   De inspringing van 64px is ook weg. Die maakte de regel smal, zodat
   een korte toelichting alsnog over twee regels brak. */
.optie-uitleg {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--amber-licht); border-radius: 10px;
  margin: 0 14px; padding: 12px 15px;
  font-size: .95rem; font-weight: 500; line-height: 1.6;
  color: #5a3d06;
}
.optie-uitleg i {
  flex: none; margin-top: 2px; font-size: 1.05rem; color: var(--amber);
}
.optie-uitleg-tekst { flex: 1; min-width: 0; }
@media (max-width: 560px) {
  .optie-rij { padding: 14px 15px 12px; }
  .optie-uitleg { margin: 0 11px; padding: 11px 13px; }
}

/* Onderbalk: Terug links, hint in het midden, Volgende rechts */
.stap-nav { border-top: 2px solid var(--rand); margin-top: 22px; padding-top: 16px; }
.stap-nav .stap-hint { flex: 1; margin: 0; text-align: right; padding-right: 4px; }

@media (max-width: 560px) {
  .etegelrij, .etegelrij.met-beeld { grid-template-columns: 1fr; }
  .etegelrij .ekop { padding: 13px 15px; font-size: 1rem; }
  .hoortje { grid-template-columns: 1fr; }
  .hoortje-kaart { padding: 13px 15px; }
  .hoortje-icoon { width: 40px; height: 40px; font-size: 1.2rem; }
  .les-kop .les-opbrengst, .les-rij .les-opbrengst { font-size: .85rem; }
  .stap-inhoud .chip, .stap-inhoud .optie { padding: 14px 15px; font-size: .98rem; }
  .quiz-stap { min-height: 0; }
  .quiz-stap .optie { padding: 14px 15px; font-size: .98rem; }
  .quiz-stap .vraagtekst { font-size: 1.05rem; }
  .les-kop .titel { font-size: 1.2rem; }
  .les-duur { display: none; }
  .stap-nav { flex-wrap: wrap; }
  .stap-nav .stap-hint { order: 3; flex-basis: 100%; text-align: center; }
}

/* ============================================================
   CERTIFICAAT
   Eén blad dat op het scherm hetzelfde is als op papier. De pagina
   eromheen valt bij het printen weg; het blad blijft staan.
   ============================================================ */
.certblad {
  background: #fff; border: 2px solid var(--rand); border-radius: 14px;
  padding: 14px; max-width: 940px; margin: 0 auto;
  box-shadow: 0 10px 34px rgba(15,23,42,.10);
}
.cert-rand {
  position: relative; border: 1px solid #cbd5e1; border-radius: 6px;
  padding: 34px 40px 26px; text-align: center;
}

/* Zegel rechtsboven, buiten de tekstkolom zodat hij niets verdringt */
.cert-zegel {
  position: absolute; top: 18px; right: 22px;
  width: 82px; height: 82px; border-radius: 50%;
  background: var(--amber-licht); border: 3px solid var(--amber); color: #92600a;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  line-height: 1.1; text-transform: uppercase; letter-spacing: .06em;
}
.cz-lb { font-size: .56rem; font-weight: 800; }
.cz-nr { font-size: 1.35rem; font-weight: 800; letter-spacing: 0; }

.cert-merk { display: flex; align-items: center; justify-content: center; margin-bottom: 22px; }
.cert-merknaam { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; }
.cert-merknaam span { color: var(--kleur); }

.cert-kop {
  font-size: .95rem; font-weight: 800; letter-spacing: .3em;
  text-transform: uppercase; color: var(--grijs); margin: 0 0 6px;
}
/* De aantallen onderbouwen de zin erboven; ze zijn de zin niet. */
.cert-tel { font-size: .93rem; color: var(--grijs); margin: 0 0 26px; }

.cert-naam { font-size: 2.6rem; font-weight: 800; letter-spacing: -.02em; margin: 0; line-height: 1.15; }
.cert-naam.lang { font-size: 2rem; }
.cert-streep { width: 340px; max-width: 60%; height: 2px; background: var(--rand); margin: 16px auto 22px; }

.cert-zin { font-size: 1.08rem; color: #334155; max-width: 620px; margin: 0 auto 26px; line-height: 1.55; }

.cert-modules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; margin-bottom: 26px; }
.cert-module {
  display: flex; align-items: center; gap: 9px; text-align: left;
  background: #f8fafc; border: 1px solid var(--rand); border-radius: 12px;
  padding: 13px 15px; font-size: .98rem; font-weight: 700;
}
.cert-module i { color: var(--groen-donker); font-size: 1.05rem; flex-shrink: 0; }

.cert-voet {
  display: flex; justify-content: space-between; gap: 20px;
  border-top: 1px solid var(--rand); padding-top: 16px;
}
.cert-veld { display: block; text-align: left; font-size: .85rem; color: var(--grijs); }
.cert-veld.midden { text-align: center; }
.cert-veld.rechts { text-align: right; }
.cert-veld b { display: block; color: var(--tekst); font-size: 1.02rem; font-weight: 800; }
.cert-nr { font-family: ui-monospace, Menlo, monospace; letter-spacing: .02em; }

.cert-knoppen { display: flex; justify-content: center; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
.cert-uitleg { text-align: center; color: var(--grijs); font-size: .9rem; margin: 12px 0 0; }

/* Nog niet gehaald: een teller, geen dichte deur */
.cert-slot { text-align: center; max-width: 480px; margin: 30px auto; border-style: dashed; }
.cert-slot-icoon {
  width: 52px; height: 52px; border-radius: 50%; background: #f1f5f9; color: #94a3b8;
  display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin: 0 auto 12px;
}
.cert-slot-kop { font-weight: 800; font-size: 1.15rem; margin: 0 0 4px; }
.cert-slot-sub { color: var(--grijs); font-size: .93rem; margin: 0; }
.cert-slot-balk { height: 8px; background: #e8ecf3; border-radius: 4px; margin: 18px 0 7px; overflow: hidden; }
.cert-slot-balk span { display: block; height: 100%; background: var(--groen); border-radius: 4px; }
.cert-slot-tel { color: var(--grijs); font-size: .87rem; margin: 0 0 18px; }

/* Ingang op de voortgangspagina en het overzicht */
.cert-uitnodiging {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: linear-gradient(135deg, #fffbeb, #fef3c7);
  border: 2px solid #fde68a; border-radius: 18px; padding: 18px 22px; margin-bottom: 18px;
}
.cert-uitnodiging .cu-icoon {
  width: 46px; height: 46px; border-radius: 50%; background: #fff; color: #92600a;
  border: 2px solid var(--amber); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 1.3rem;
}
.cert-uitnodiging .cu-tekst { flex: 1; min-width: 200px; }
.cert-uitnodiging .cu-kop { font-weight: 800; margin: 0; }
.cert-uitnodiging .cu-sub { color: #92600a; font-size: .9rem; margin: 0; }

@media (max-width: 760px) {
  .cert-rand { padding: 26px 20px 20px; }
  .cert-zegel { width: 62px; height: 62px; top: 12px; right: 12px; }
  .cert-naam { font-size: 1.9rem; }
  .cert-naam.lang { font-size: 1.5rem; }
  .cert-modules { grid-template-columns: 1fr; }
  .cert-voet { flex-direction: column; gap: 12px; }
  .cert-veld, .cert-veld.midden, .cert-veld.rechts { text-align: left; }
}

/* ---------- Printen en opslaan als pdf ----------
   Alleen het blad gaat mee. print-color-adjust is niet optioneel:
   zonder die regel drukt Safari de gekleurde vlakken wit af en houd
   je een leeg vel over. */
@media print {
  @page { size: A4 landscape; margin: 12mm; }
  body { background: #fff; }
  /* Alleen wat expliciet .geenprint heeft valt weg, plus de vaste
     onderdelen van de app. Nooit h1 of .hint in het algemeen: dan
     verandert er ook iets aan pagina's waar dit niet over gaat. */
  .topbar, .voet, .geenprint, .levelup-overlay { display: none !important; }
  .container, .container.breed { max-width: none; padding: 0; }
  .certblad {
    border: 0; border-radius: 0; box-shadow: none; padding: 0; max-width: none;
  }
  .cert-rand { border: 2px solid #cbd5e1; padding: 26px 32px 20px; }
  .cert-naam { font-size: 2.3rem; }
  .cert-module, .cert-zegel, .cert-module i, .cert-merknaam span {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .certblad, .cert-rand { page-break-inside: avoid; break-inside: avoid; }
}

/* ============================================================
   TERUGKIJKEN
   Een afgeronde les en een gehaalde quiz zijn te lezen, niet te
   wijzigen. Wat je destijds koos blijft staan — dat is het punt.
   ============================================================ */
.terugkijk {
  display: flex; align-items: center; gap: 11px;
  background: var(--kleur-licht); border: 1px solid #c7d9fb; border-radius: 12px;
  padding: 11px 15px; margin-bottom: 16px;
  font-size: .93rem; color: var(--kleur-diep); font-weight: 600;
}
.terugkijk i { font-size: 1.15rem; flex-shrink: 0; }

/* Vaste antwoordkaart: geen muisaanwijzer, geen hover, geen belofte
   dat er iets gebeurt als je klikt. */
.stap-inhoud .chip.vast { cursor: default; }
.stap-inhoud .chip.vast:hover { border-color: inherit; }
.chip-na {
  margin-left: auto; padding-left: 10px; flex-shrink: 0;
  font-size: .78rem; font-weight: 700; opacity: .8;
}

/* Score bij een gehaalde quiz op de modulepagina */
.quizscore {
  display: inline-flex; align-items: center; gap: 8px;
  background: #dcfce7; color: var(--groen-donker);
  border-radius: 999px; padding: 8px 18px;
  font-weight: 800; font-size: 1rem; margin: 0 0 16px;
}
.hint.klein { font-size: .84rem; margin-top: 12px; }

/* Modulekaart in het overzicht: één knop over de volle breedte, op
   dezelfde plek bij elke kaart. Bij een afgeronde module gaat die naar
   de module zelf: daar staan de lessen om terug te kijken én de
   quizscore met de knop naar je antwoorden. */
.knop.vol { width: 100%; box-sizing: border-box; justify-content: center; }

/* ============================================================
   VOORSPELLEN IN STAP 1
   Vóór de tekst één vraag met twee antwoorden. Je denkt eerst zelf
   na en leest daarna — dat leest scherper dan een tekst waar je nog
   niets bij verwacht. Geen toets: geen score, en de tegel opent hoe
   dan ook. Daarom nergens rood.
   ============================================================ */
.etegel .ekop {
  width: 100%; background: none; border: 0; text-align: left;
  font-family: inherit; color: inherit; cursor: pointer;
  border-bottom: 0; border-radius: 0;
}
.etegel .ekop:hover { filter: none; background: #f8fafc; }
.etegel .ekop:active { transform: none; }
.etegel .ekop:focus-visible { outline: 3px solid var(--kleur-licht); outline-offset: -3px; }

.tvoorspel { padding-top: 2px; }

/* De vraag is het werk, de antwoorden zijn de knoppen. Stonden ze even
   groot, dan wist je oog niet waar te beginnen. De vraag staat nu een
   maat groter en donkerder; de antwoorden houden hun eigen gewicht. */
.tv-vraag {
  margin: 0 0 14px !important; font-size: 1.08rem; line-height: 1.5;
  color: var(--tekst); font-weight: 600;
}
.tv-optie {
  display: flex; align-items: center; gap: 12px;
  width: 100%; text-align: left; margin-bottom: 9px;
  background: #fff; color: var(--tekst);
  border: 2px solid var(--rand); border-bottom: 2px solid var(--rand); border-radius: 12px;
  padding: 13px 15px; font-size: .95rem; font-weight: 700; font-family: inherit;
  transition: border-color .15s, background .15s, transform .1s;
}
/* A en B. Twee even grote grijze rechthoeken zien er niet uit als iets
   waar je op drukt; de letter geeft het oog een plek om te landen en
   maakt er een keuze van in plaats van een lijstje. */
.tv-let {
  flex: 0 0 28px; height: 28px; border-radius: 8px;
  background: #f1f5f9; border: 1px solid var(--rand);
  display: flex; align-items: center; justify-content: center;
  font-size: .78rem; font-weight: 700; color: var(--grijs);
  transition: background .15s, color .15s, border-color .15s;
}
.tv-optietekst { flex: 1; }
.tv-optie:hover { border-color: var(--kleur); background: var(--kleur-licht); filter: none; transform: translateY(-1px); }
.tv-optie:hover .tv-let { background: #fff; border-color: var(--kleur); color: var(--kleur); }
.tv-optie:active { transform: translateY(0); }
.tv-optie:focus-visible { outline: 3px solid var(--kleur-licht); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .tv-optie, .tv-let { transition: none; }
  .tv-optie:hover { transform: none; }
}

/* De reactie na je keuze. Amber bij mis, groen bij raak — nooit rood:
   je hebt niets fout gedaan, je wist het nog niet. */
.tv-reactie {
  display: flex; gap: 9px; align-items: flex-start;
  background: var(--amber-licht); color: #78500a;
  border-radius: 11px; padding: 10px 13px; margin-bottom: 12px;
  font-size: .88rem; line-height: 1.5; font-weight: 600;
}
.tv-reactie.raak { background: #f0fdf4; color: var(--groen-donker); }
.tv-reactie i { font-size: 1.05rem; flex-shrink: 0; margin-top: 1px; }
.tv-tekst { margin: 0 !important; }

/* Een tegel die nog een vraag open heeft, vraagt om aandacht */
.etegel.vraagt { border-color: var(--kleur); }

/* ============================================================
   EÉN VRAAG TEGELIJK (v1.33.0)

   Staat er nog een voorspelvraag open, dan is dat het hele scherm:
   één kaart, met eronder een rij stippen die zegt hoeveel er volgen.

   Het waren eerst gestippelde vakken met een hangslot. Dat las als
   "jij mag hier niet komen", terwijl de bedoeling is "dit komt zo".
   Een stip verbiedt niets.
   ============================================================ */
/* Een gesprek van twee kanten: Iggy links, jij rechts. Dezelfde taal
   die stap 3 "Zeg het" al spreekt. De kant waar de ballon staat zegt
   zonder woorden wie er aan zet is. */
.vraagsolo { max-width: 860px; margin: 0 auto; }

/* De vraag staat in dezelfde ballon als de intro: het is nog altijd
   Iggy die praat. Maar niet met dezelfde stem.

   De opening is context, de vraag is het werk. Stonden ze even zwaar —
   allebei vet, allebei kleur-diep, zes honderdsten verschil in grootte —
   dan wist je oog niet welke van de twee een antwoord van je wilde.
   Nu: opening klein en rustig, vraag groot, met een lijn ertussen die
   markeert dat Iggy van de les naar de vraag overstapt. */
/* ---------- GEEN OPACITY OP TEKST (v1.57.0) --------------------------
   Hier stond eerst `color: var(--kleur); opacity: .8`. Dat leest in de
   code als "een tikje rustiger", maar doorzichtigheid vermenigvuldigt
   met de ondergrond: #2563eb op #e8f0fe wordt daarmee feitelijk
   #4c7fef, en het contrast zakt van 4,51 naar 3,28 op 1. De grens voor
   gewone tekst is 4,5 (WCAG 1.4.3). Op een scherm in een lichte kamer
   viel de tekst daardoor weg.

   Nu staat er een echte kleurwaarde. Wat in de code staat is wat de
   gebruiker ziet — dat is de hele reden om opacity niet op tekst te
   gebruiken.

   De maten gaan mee omhoog: dit is geen bijschrift maar de kern van de
   les, en op .92rem met regelafstand 1.55 las het als een voetnoot. */
.iggy-bubbel .leer-kop.zacht,
.iggy-bubbel .leer-sub.zacht {
  font-size: .95rem; font-weight: 600; line-height: 1.6;
  color: #1e3a8a;                       /* 9,04 : 1 */
}
.iggy-bubbel .leer-sub.zacht { margin-top: 5px !important; }
.iggy-bubbel .leer-vraag {
  margin-top: 13px !important; padding-top: 13px;
  border-top: 1px solid rgba(30, 64, 175, .22);
  font-size: 1.18rem; line-height: 1.5;
  color: #172554; font-weight: 700;     /* 12,82 : 1 */
}
/* Hoe de werkvorm werkt. Klein en rustig: het is een aanwijzing, geen
   opdracht — en je hebt hem maar één keer nodig. Rustig mag, onleesbaar
   niet: vandaar --kleur-donker in plaats van --kleur met opacity. */
.iggy-bubbel .leer-hoe {
  display: flex; gap: 7px; align-items: center;
  margin-top: 8px !important; font-size: .88rem;
  color: var(--kleur-donker);           /* 5,85 : 1 */
}
.iggy-bubbel .leer-hoe i { font-size: 1rem; flex-shrink: 0; }

/* Jouw beurt: alleen de knoppen, rechts uitgelijnd.
   min-width is er om de reden die je op het scherm zag: zonder die
   ondergrens kneep de knop zich samen tot de smalste breedte waarop de
   tekst nog past, en stond "De" boven "voorkant". */
/* ---------- Twee naast twee, in het midden (v1.61.2) ----------

   De antwoorden stonden rechts onder elkaar: dat was de kant van het
   gesprek waar jij aan het woord bent. Met twee opties werkte dat, want
   dan is het een korte kolom naast de vraag.

   Met vier opties niet meer. Vier blokken onder elkaar tegen de
   rechterrand duwen het gesprek uit beeld, en je oog moet van de vraag
   linksboven naar de antwoorden rechtsonder — twee keer diagonaal.

   Nu staan ze in een raster van twee, gecentreerd onder de vraag. Vier
   antwoorden passen dan in twee regels in plaats van vier, en ze staan
   recht onder waar je net las.

   Het label JIJ blijft: dat is wat de weergave nog aan het gesprek
   bindt nu de rechteruitlijning weg is. */
.jij-keuze {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  max-width: 620px; margin: 0 auto 18px;
}
.jij-keuze .spreker-naam {
  grid-column: 1 / -1; text-align: center; margin: 0 0 2px !important;
}
.jij-keuze .tv-optie {
  width: 100%; min-width: 0; margin-bottom: 0;
  border-color: var(--kleur); border-radius: 14px;
  /* Even hoog als de buurman, ook bij een antwoord van twee regels. */
  height: 100%; align-items: center;
}
/* Geen flex: 1 hier — dat is wat de tekst liet afbreken. */
.jij-keuze .tv-optietekst { flex: 0 1 auto; }
.jij-keuze .tv-let { background: var(--kleur-licht); border-color: var(--kleur-licht); color: var(--kleur); }

/* Een oneven aantal laat de laatste alleen achter in de linkerkolom, en
   dat leest als een fout in de opmaak. Over de volle breedte is het een
   keuze. Geldt ook voor je verstuurde antwoord: dat is er altijd een.

   LET OP DE TELLING — hier ging het mis in v1.61.2.
   nth-child telt ALLE kinderen, en het label JIJ is het eerste. Vier
   antwoorden zijn dus kind 2 t/m 5, en de laatste is oneven. Met
   :nth-child(odd) kreeg D daardoor de volle breedte terwijl er niets
   mis was. De opties zijn oneven in aantal als de laatste EVEN is. */
.jij-keuze .tv-optie:last-child:nth-child(even) { grid-column: 1 / -1; }

/* Je verstuurde antwoord: geen knop meer, maar wat je zei. */
.jij-keuze div.tv-optie.gekozen { background: var(--kleur-licht); }

@media (max-width: 560px) {
  /* Twee kolommen naast elkaar op een telefoon knijpt "Een frontend
     developer" tot drie regels. Onder elkaar dus, zoals het was. */
  .jij-keuze { grid-template-columns: 1fr; max-width: 100%; }
  .jij-keuze .tv-optie:last-child:nth-child(even) { grid-column: auto; }
  .iggy-bubbel .leer-vraag { font-size: 1rem; }
}

/* Iggy reageert terug in zijn eigen ballon — zijn eigen blauw, niet
   groen of amber. Kleurde de hele ballon mee met je antwoord, dan kreeg
   de lesstof eronder diezelfde kleur en las die als feedback in plaats
   van als uitleg. Het oordeel is een klein label; de stof blijft
   neutraal. Nooit rood: je hebt niets fout gedaan, je wist het nog niet. */
.iggy-bubbel.reactie { border-radius: 18px; padding: 16px 20px; }

.reactie-vonnis {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .82rem; font-weight: 700; padding: 4px 12px; border-radius: 20px;
}
.reactie-vonnis i { font-size: 1rem; }
.reactie-vonnis strong { font-weight: 700; }
.reactie-vonnis.raak { background: #dcfce7; color: var(--groen-donker); }
.reactie-vonnis.mis  { background: var(--amber-licht); color: #78500a; }

.reactie-kop {
  margin: 11px 0 0 !important;
  font-size: 1rem; line-height: 1.6; font-weight: 600; color: var(--kleur-diep);
}

/* De lesstof in een eigen wit kaartje: hij hoort bij de reactie, maar
   hij is er geen onderdeel van. */
.reactie-stof {
  background: #fff; border-radius: 12px; padding: 13px 16px; margin-top: 14px;
}
.reactie-titel { margin: 0 0 5px !important; font-size: 1rem; font-weight: 700; color: var(--donker); }
.reactie-tekst { margin: 0 !important; font-size: .95rem; line-height: 1.6; color: #334155; }
.reactie-stof .etegel-afb { margin: 8px 0; }

@media (max-width: 560px) {
  .iggy-bubbel.reactie { padding: 13px 16px; }
}

/* Na je keuze blijven de opties staan, maar als plaatje: die van jou
   krijgt een stip, de juiste wordt groen. Verdwijnen ze, dan weet je
   een seconde later niet meer wat je ook alweer koos. */
.tv-optie.gekozen { border-color: var(--kleur); background: var(--kleur-licht); }
.tv-optie.juist   { border-color: var(--groen); background: #f0fdf4; }
.tv-optie.juist .tv-let { background: #fff; border-color: var(--groen); color: var(--groen-donker); }
.tv-optie.gekozen .tv-let { background: #fff; border-color: var(--kleur); color: var(--kleur); }
.tv-vink { font-size: 1.1rem; color: var(--kleur); }
.tv-optie.juist .tv-vink { color: var(--groen-donker); }
/* Als div gerenderd hoeft hij niet meer te reageren op de muis. */
div.tv-optie { cursor: default; }
div.tv-optie:hover { transform: none; }

.vraagverder { display: flex; justify-content: flex-end; margin: 14px 0 0; }

/* ============================================================
   KOPPELEN (v1.34.0) — stap 1 in module 4 en 6

   Alle vragen van de les tegelijk, de antwoorden ernaast door elkaar.
   Je legt ze aan elkaar door er twee aan te tikken.

   Wat je gelegd hebt verlaat de puzzel en komt bovenaan als één regel.
   Bleven de paren in de kolommen staan, dan zag je twee groene vakken
   op verschillende rijen en moest je zelf uitzoeken dat die bij elkaar
   hoorden. Nu staat het er, en de puzzel eronder krimpt zichtbaar.

   Slepen zou mooier ogen maar werkt slecht op een telefoon en breekt
   sneller. Tikken doet hetzelfde en gaat overal.
   ============================================================ */
.kp-wrap { max-width: 880px; margin: 0 auto; }

/* ---- Gelegde paren ---- */
.kp-gelegd { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.kp-paar {
  background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 12px;
  padding: 11px 15px; font-size: .92rem; line-height: 1.45;
}
.kp-paar-rij { display: flex; align-items: center; gap: 11px; }
.kp-vink { color: var(--groen-donker); font-size: 1.15rem; flex-shrink: 0; }
.kp-paar-vraag { flex: 1; min-width: 0; color: #334155; }
.kp-paar-vraag b { color: var(--donker); }
.kp-pijl { color: #86bfa0; font-size: 1.15rem; flex-shrink: 0; }
.kp-paar-ant { flex-shrink: 0; font-weight: 700; color: var(--groen-donker); }

/* Lag hij pas na een correctie goed, dan amber in plaats van groen, met
   Iggy's nuance eronder. Nooit rood: je hebt niets fout gedaan. */
.kp-paar.bijna { background: var(--amber-licht); border-color: #f3d79a; }
.kp-paar.bijna .kp-vink { color: #78500a; }
.kp-paar.bijna .kp-pijl { color: #c9a25a; }
.kp-paar.bijna .kp-paar-ant { color: #78500a; }

/* Iggy's slotwoord onder de gelegde paren. Tijdens het koppelen zegt
   hij niets — een misser krijgt alleen een gele oplichting. Uitleg
   midden in een puzzel onderbreekt je; aan het eind niet. */
.kp-slot { margin: 20px 0 0; }
.kp-nuance {
  margin: 11px 0 0 !important; padding-top: 11px;
  border-top: 1px solid rgba(0, 0, 0, .08);
  font-size: .93rem; line-height: 1.6; color: #334155;
}
.kp-nuance + .kp-nuance { border-top: 1px solid rgba(0, 0, 0, .06); }
.kp-nuance b { color: var(--donker); }

/* ============================================================
   HET THEORIESCHERM (v1.36.0)

   Eén begrip per rij, over de volle breedte. Het stonden drie smalle
   kolommen naast elkaar: regels van dertig tekens, waarbij je oog elke
   vier woorden terugspringt. Op één rij komen de regels op vijfenzeventig
   tekens uit — waar het leesbaarheidsonderzoek al decennia op uitkomt.

   Rustige kaarten: één haarlijn in plaats van een blauwe rand van twee
   pixels om alles. De aandacht hoort naar de tekst te gaan.
   ============================================================ */
.theorie { max-width: 900px; margin: 0 auto; }

.th-kaart {
  display: flex; gap: 20px; align-items: flex-start;
  background: #fff; border: 1px solid var(--rand); border-radius: 14px;
  padding: 20px 22px; margin-bottom: 12px;
}
.th-kaart:last-child { margin-bottom: 0; }

.th-beeld {
  flex: 0 0 170px; min-height: 118px;
  border-radius: 12px; background: var(--kleur-licht);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.th-beeld img { width: 100%; height: auto; display: block; }
.th-beeld > i { font-size: 2.6rem; color: var(--kleur); }

.th-tekst { flex: 1; min-width: 0; }
.th-titel {
  display: flex; align-items: center; gap: 11px;
  margin: 0 0 9px !important; font-size: 1.12rem; font-weight: 700; color: var(--donker);
}
.th-nr {
  flex: 0 0 26px; height: 26px; border-radius: 50%;
  background: var(--kleur); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: .78rem; font-weight: 700;
}
.th-body { margin: 0 !important; font-size: 1rem; line-height: 1.65; color: #334155; }

/* Sinds v1.58.6 staat hier alleen nog de knop. De regel "2 begrippen ·
   daarna 2 vragen" is eruit: de stapbalk bovenaan zegt al waar je bent.
   Daarom flex-end en geen space-between — anders zou de knop bij één
   kind naar links springen. */
.th-voet {
  display: flex; align-items: center; justify-content: flex-end; gap: 14px;
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--rand);
}

/* ---- Breed: groot beeld naast de tekst, om en om ----

   Voor tegels waar de illustratie het begrip moet dragen — een
   webwinkelpagina, een scherm met code. Die hebben ruimte nodig, maar
   twee volle-breedte beelden onder elkaar lezen als een fotoalbum: je
   scrolt langs plaatjes en de tekst raakt los.

   Naast elkaar, om en om links en rechts, leest natuurlijker. Het beeld
   krijgt 46 procent; genoeg om leesbaar te zijn, en de tekst houdt een
   comfortabele regellengte. De tekeningen zijn op díé maat getekend, niet
   verkleind — een tekening die je halveert moet je hertekenen. */
.theorie.breed .th-kaart.vol { gap: 26px; padding: 20px 22px; align-items: center; }
.theorie.breed .th-kaart.vol:nth-child(even) { flex-direction: row-reverse; }
.theorie.breed .th-kaart.vol .th-beeld {
  flex: 0 0 46%; min-height: 0; background: none; border-radius: 12px; padding: 0;
}
.theorie.breed .th-kaart.vol .th-beeld img {
  width: 100%; display: block;
  border: 1px solid var(--rand); border-radius: 10px;
}

@media (max-width: 720px) {
  .theorie.breed .th-kaart.vol,
  .theorie.breed .th-kaart.vol:nth-child(even) { flex-direction: column; gap: 14px; }
  .theorie.breed .th-kaart.vol .th-beeld { flex: 1 1 auto; width: 100%; }
}

/* ---- Zigzag: de tweede theorievorm ----

   Groter beeld, om en om links en rechts, geen kaart eromheen maar een
   haarlijn ertussen. Leest als een artikel in plaats van als een
   opsomming — en dat is precies het punt: twee vormen naast elkaar
   zorgen dat geen twee modules achter elkaar hetzelfde voelen. */
.theorie.zigzag .th-kaart {
  background: none; border: 0; border-bottom: 1px solid var(--rand);
  border-radius: 0; padding: 24px 0; margin-bottom: 0; gap: 26px;
  align-items: center;
}
.theorie.zigzag .th-kaart:last-child { border-bottom: 0; padding-bottom: 8px; }
.theorie.zigzag .th-kaart:first-child { padding-top: 8px; }
.theorie.zigzag .th-kaart:nth-child(even) { flex-direction: row-reverse; }
.theorie.zigzag .th-beeld { flex: 0 0 210px; min-height: 150px; border-radius: 16px; }
.theorie.zigzag .th-beeld > i { font-size: 3.2rem; }
.theorie.zigzag .th-titel { font-size: 1.2rem; }

@media (max-width: 640px) {
  .th-kaart { flex-direction: column; gap: 14px; padding: 16px 17px; }
  .th-beeld { flex: 1 1 auto; width: 100%; max-width: 260px; }
  .th-voet { flex-direction: column; align-items: stretch; gap: 10px; }
  .th-voet .knop { justify-content: center; }
  /* Op een telefoon staat alles onder elkaar; om en om heeft daar geen
     betekenis meer en zou de tekst alleen maar laten springen. */
  .theorie.zigzag .th-kaart,
  .theorie.zigzag .th-kaart:nth-child(even) { flex-direction: column; padding: 18px 0; }
  .theorie.zigzag .th-beeld { flex: 1 1 auto; width: 100%; max-width: 260px; }
}

/* ---- De puzzel ----

   De antwoorden staan als losse kaartjes op één rij bóven de vragen,
   niet in een kolom ernaast. Stonden ze in twee kolommen, dan lag er
   een rooster van rijen overheen en gokte je op "de eerste hoort bij
   de eerste". Bij drie paren raadt dat zichzelf. */
.kp-bank { margin-bottom: 20px; }
/* Drie gelijke kolommen, niet drie kaartjes op maat. Was elk kaartje
   zo breed als zijn tekst, dan kreeg je drie breedtes, drie hoogtes en
   stonden A, B en C op drie verschillende plekken.
   Het raster rekt ze naar dezelfde hoogte; de inhoud staat verticaal
   in het midden. Dáármee komen de letters vanzelf op één lijn, zonder
   dat er ergens ruimte leeg blijft. */
.kp-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.kp-vragen { display: flex; flex-direction: column; gap: 10px; }

.kp-kop { display: flex; align-items: center; height: 32px; margin-bottom: 6px; }
.kp-kop .spreker-naam { margin: 0 !important; }
.kp-jij { justify-content: flex-end; gap: 8px; }
.kp-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: #fff; border: 2px solid var(--kleur); color: var(--kleur);
  display: flex; align-items: center; justify-content: center; font-size: 1rem;
}

.kp-vraag, .kp-ant {
  text-align: left; font-family: inherit; color: var(--tekst);
  background: #fff; border: 2px solid var(--rand); border-radius: 12px;
  padding: 13px 16px; cursor: pointer;
  transition: border-color .15s, background .15s, transform .1s;
}
.kp-vraag { width: 100%; min-height: 62px; }

/* display:flex is hier nodig, niet netjes: de algemene knopregel zet
   alle buttons op inline-flex, en dan gaan twee blokken naast elkaar
   staan in plaats van onder elkaar. */
.kp-vraag {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  gap: 5px; font-size: .95rem; line-height: 1.45;
}
.kp-situatie { font-weight: 400; color: #334155; }
.kp-ask { font-weight: 700; color: var(--donker); }
.kp-ant { display: flex; align-items: center; gap: 11px; font-size: .95rem; font-weight: 700; }

.kp-vraag:hover, .kp-ant:hover { border-color: var(--kleur); background: var(--kleur-licht); transform: translateY(-1px); }
.kp-vraag.gekozen, .kp-ant.gekozen {
  border-color: var(--kleur); background: var(--kleur-licht);
  box-shadow: 0 0 0 3px var(--kleur-licht);
}
.kp-vraag:focus-visible, .kp-ant:focus-visible { outline: 3px solid var(--kleur-licht); outline-offset: 2px; }

/* Mis: allebei even amber, dan weer los. Nooit rood — je hebt niets
   fout gedaan, je wist het nog niet. */
.kp-vraag.fout, .kp-ant.fout {
  border-color: var(--amber); background: var(--amber-licht); transform: none;
}

/* ---- Voortgang ---- */
.kp-voortgang {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin: 18px 0 0;
}
.kp-seg {
  width: 34px; height: 5px; border-radius: 3px; background: #e7ebf2;
  transition: background .3s ease;
}
.kp-seg.af { background: var(--groen); }
.kp-teller { margin-left: 7px; font-size: .84rem; font-weight: 600; color: var(--grijs); }

@media (prefers-reduced-motion: reduce) {
  .kp-vraag, .kp-ant, .kp-seg { transition: none; }
  .kp-vraag:hover, .kp-ant:hover { transform: none; }
}

@media (max-width: 720px) {
  .kp-chips { grid-template-columns: 1fr; }
  .kp-vraag, .kp-ant { padding: 12px 14px; min-height: 0; }
  .kp-jij { justify-content: flex-start; }
  .kp-paar { flex-wrap: wrap; gap: 8px; }
  .kp-pijl { display: none; }
  .kp-paar-ant { padding-left: 27px; }
}

/* Stof die niet langs is gekomen in het gesprek, alsnog bij Iggy's
   samenvatting. Als opsomming, niet genummerd: dit is aanvulling en
   geen les op zich. */
.afrond-kopje.ook { margin-top: 16px !important; }
.afrond-gemist { margin: 8px 0 0; padding-left: 20px; }
.afrond-gemist li { margin-bottom: 7px; font-size: .93rem; line-height: 1.55; color: #334155; }
.afrond-gemist li:last-child { margin-bottom: 0; }
.afrond-gemist strong { color: var(--donker); }

/* De stippenrij onder een voorspelvraag is weg in v1.61.2. Het was een
   teller bij een gesprek van twee vragen, en de knop "Volgende vraag"
   zei hetzelfde al op het moment dat het ertoe deed. */

/* Onder 700 pixels wordt een halve kolom te smal: "Iemand die met
   versiebeheer werkt en code laat nakijken" breekt dan in vier regels,
   en dan is de winst van twee kolommen weg. Onder elkaar dus.

   700 en niet 560: dit gaat om de breedte van de kolom, en die is de
   helft. Een tablet van 640 heeft dezelfde krapte als een telefoon. */
@media (max-width: 700px) {
  .stap-inhoud .opties { grid-template-columns: 1fr; }
  .stap-inhoud .opties > .optie:last-child:nth-child(odd) { grid-column: auto; }
  /* De cv-kaarten stonden hier al op twee; die volgen dezelfde regel. */
  .stap-inhoud .opties.kaarten { grid-template-columns: 1fr; }
}

/* ============================================================
   VOORTGANGSREGEL IN STAP 1 (v1.33.0)
   Vervangt "Klap beide tegels open om verder te gaan". Dezelfde
   informatie, maar het meldt wat je hebt gehad in plaats van wat
   je nog moet.
   ============================================================ */
.vgregel { display: inline-flex; align-items: center; gap: 10px; }
.vgbalk {
  display: block; width: 64px; height: 5px; border-radius: 3px;
  background: #e7ebf2; overflow: hidden;
}
.vgbalk > i { display: block; height: 100%; background: var(--kleur); transition: width .35s ease; }
.stap-hint.klaar .vgbalk > i { background: var(--groen-donker); }

@media (prefers-reduced-motion: reduce) { .vgbalk > i { transition: none; } }

/* Een knop die nog niet mag. Halfdoorzichtig blauw leest als kapot;
   rustig grijs leest als "nog niet". */
/* Op slot: geen verloop, geen schaduw, geen beweging. Een knop die
   niet kan, moet er ook niet uitzien als een knop die kan.
   background-image expliciet op none — anders blijft het verloop van
   de basisregel staan, want `background:` overschrijft dat wel maar
   `background-color:` niet. */
.knop.op-slot,
.knop.op-slot:hover {
  background: #f1f5f9; background-image: none; color: var(--grijs);
  box-shadow: none; filter: none; transform: none;
}

/* Een ballon die zo breed is als zijn tekst, niet breder. Zonder deze
   regel rekt flex: 1 hem uit tot de volle kaartbreedte — één zin in een
   blok van 1300 pixels, en de vraag eronder valt buiten beeld. */
.iggy-bubbel.krimp { flex: 0 1 auto; max-width: 100%; }
/* Eén regel hoeft ook niet veel hoogte. */
.iggy-bubbel.kort { padding: 12px 18px; }
.iggy-bubbel.kort .leer-kop { margin-bottom: 0; }

/* ============================================================
   DE GRATIS TOETS (v1.58.0)

   Publieke pagina, dus alles wat hier staat moet ook werken zonder
   ingelogde gebruiker. Geen enkele regel hieronder leunt op de
   menubalk of op de voortgangsring.

   Alle kleuren zijn echte waarden, geen opacity op tekst. Zie de
   toelichting bij .leer-kop.zacht: doorzichtigheid vermenigvuldigt
   met de ondergrond en dan staat er in de code niet meer wat de
   bezoeker ziet.
   ============================================================ */

/* ---------- Twee tekstlinks rechts in de balk ----------
   Geen knoppen. Een knop zegt "doe dit nu", en met twee knoppen naast
   elkaar zegt het scherm dat twee keer tegelijk. De IQ-check staat
   links van Inloggen: wie hier voor het eerst komt heeft nog geen
   account. */
.tb-links { display: flex; align-items: center; gap: 20px; flex: none; }
.tb-links a {
  font-size: .95rem; font-weight: 600; color: var(--tekst);
  text-decoration: none; padding: 4px 0;
  border-bottom: 2px solid transparent;
}
.tb-links a:hover { color: var(--kleur); }
.tb-links a.nu { color: var(--kleur); border-bottom-color: var(--kleur); }

/* ---------- De toetspagina ---------- */
/* De kaart vult het scherm beter dan eerst. Op 660 px met 22 px padding
   stond hij als een postzegel in een groot grijs vlak; nu is hij breder,
   ruimer van binnen, en heeft hij een ondergrens in hoogte.

   Die ondergrens is niet alleen cosmetisch: zonder vaste hoogte krimpt en
   groeit de kaart bij elke vraag mee met de lengte van de antwoorden, en
   dan springt het hele scherm tien keer op en neer. */
.toets-kaart {
  max-width: 760px; margin-left: auto; margin-right: auto;
  padding: 32px 34px;
}
#toets-vak { display: flex; flex-direction: column; }
/* De ondergrens geldt alleen tijdens de vragen. Daar houdt hij het scherm
   stil: zonder vaste hoogte krimpt en groeit de kaart bij elke vraag mee
   met de lengte van de antwoorden.
   Bij Iggy's intro staat er weinig, en dan zou dezelfde ondergrens een
   groot leeg vlak onder hem laten staan. De klasse komt er dus pas bij
   als de eerste vraag getekend wordt. */
#toets-vak.vragen { min-height: 520px; }
/* MOET HIERNA STAAN.
   De browser maakt van het hidden-attribuut display:none, maar dat is een
   regel uit zijn eigen stijlblad en die verliest van elke regel die je
   zelf schrijft. De display:flex hierboven zette het vak dus altijd aan —
   ook vóór de bezoeker op de knop had gedrukt, en dan staat er een lege
   witte kaart onder het startscherm.

   Dezelfde valkuil staat elders in dit bestand al opgelost voor knoppen:
   zie .knop[hidden]. */
#toets-vak[hidden] { display: none; }
#toets-inhoud { flex: 1; }
/* De vraagkaart mag breed; een uitslag met lopende tekst niet. Boven de
   ongeveer 75 tekens per regel wordt lezen merkbaar trager, en de uitslag
   is het scherm waar de bezoeker echt moet lezen. */
.toets-kaart.smaller { max-width: 680px; padding: 28px 30px; }
.toets-tag {
  margin: 0 0 6px; font-size: .7rem; letter-spacing: .08em;
  font-weight: 800; color: var(--kleur);
}
.toets-lead { font-size: 1.02rem; line-height: 1.65; color: #334155; }
.toets-punten { list-style: none; margin: 20px 0 24px; padding: 0; }
.toets-punten li {
  display: flex; gap: 10px; align-items: center;
  padding: 9px 0; font-size: .95rem; color: #334155;
  border-top: 1px solid var(--rand);
}
.toets-punten li:last-child { border-bottom: 1px solid var(--rand); }
.toets-punten i { color: var(--kleur); font-size: 1.15rem; flex-shrink: 0; }

/* ---------- De vraag ----------
   Het scherm had geen rangorde: situatie, vraag en antwoorden hadden
   allemaal dezelfde kleur en hetzelfde gewicht, en dan weet je oog
   niet waar het moet beginnen. Nu: eerst wie het zegt, dan de vraag
   groot, dan de antwoorden compact eronder. */

/* Tien streepjes in plaats van één balk. Bij precies tien vragen zie
   je zo ook hoeveel er nog komen. */
.toets-stappen { display: flex; align-items: center; gap: 14px; margin-bottom: 30px; }
.ts-rij { display: flex; gap: 5px; flex: 1; }
.ts-rij span {
  height: 5px; flex: 1; border-radius: 99px; background: var(--rand);
  transition: background .2s ease;
}
.ts-rij .gedaan { background: #9dc0f5; }
.ts-rij .nu     { background: var(--kleur); }
.ts-tel { flex: none; font-size: .78rem; color: var(--grijs); white-space: nowrap; }

/* Wie zegt dit? Elke vraag heeft een andere spreker; zonder dat label
   zien tien schermen er hetzelfde uit. */
.toets-bron { display: flex; gap: 15px; align-items: flex-start; margin-bottom: 26px; }
.tb-icoon {
  flex: none; width: 42px; height: 42px; border-radius: 12px;
  background: var(--kleur-licht); color: var(--kleur);
  display: flex; align-items: center; justify-content: center; font-size: 1.3rem;
}
.tb-tekst { flex: 1; min-width: 0; }
.tb-label {
  display: block; margin-bottom: 2px;
  font-size: .68rem; letter-spacing: .07em; font-weight: 800;
  color: var(--grijs); text-transform: uppercase;
}
/* De situatie is een citaat, geen instructie. Het schreeflettertype
   maakt dat verschil hoorbaar zonder dat er een woord bij hoeft. */
.tb-citaat {
  display: block; font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.34rem; line-height: 1.45; color: var(--tekst);
}

.toets-vraag {
  margin: 0 0 20px; font-size: 1.4rem; line-height: 1.3;
  font-weight: 800; color: var(--tekst);
}

/* Compacter dan in een les: vier antwoorden moeten in één blik passen,
   anders scrol je bij elke vraag opnieuw. */
.toets-opties { display: grid; gap: 10px; }
.toets-opties .optie {
  display: flex; align-items: center; gap: 15px; margin: 0;
  padding: 17px 19px; border-width: 1px; border-radius: 13px;
  font-size: 1.06rem; font-weight: 500; line-height: 1.4;
}
.toets-opties .antwletter {
  width: 30px; height: 30px; border-radius: 9px; font-size: .84rem;
}
/* De pijl verschijnt pas bij aanwijzen: hij zegt "hier ga je heen",
   en dat hoeft niet vier keer tegelijk op het scherm te staan. */
.optie-pijl { margin-left: auto; font-size: 1.05rem; color: var(--kleur); opacity: 0; }
.toets-opties .optie:hover .optie-pijl { opacity: 1; }
.toets-hint { margin: 20px 0 0; font-size: .84rem; color: var(--grijs); }

@media (prefers-reduced-motion: reduce) {
  .ts-rij span { transition: none; }
}

/* ---------- De uitslag ---------- */
.toets-uitslag { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.toets-uitslag h1 { margin: 0 0 5px; font-size: 1.35rem; }
.toets-uitslag > div:last-child { flex: 1; min-width: 220px; }
.toets-bol {
  flex: 0 0 auto; width: 96px; height: 96px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.toets-bol strong { font-size: 1.9rem; line-height: 1; font-weight: 800; }
.toets-bol span { font-size: .74rem; margin-top: 3px; }
.toets-bol.goed   { background: #dcfce7; color: #14532d; }
.toets-bol.midden { background: var(--amber-licht); color: #7c4a03; }
.toets-bol.laag   { background: #fee2e2; color: #7f1d1d; }

/* Tien blokjes: in één blik zie je waar het misging, zonder dat er
   staat wát het goede antwoord was. Dat is de hele ruil. */
.toets-strip { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; margin: 18px 0 0; }
.toets-strip span { height: 8px; border-radius: 99px; }
.toets-strip .raak { background: #86c93f; }
.toets-strip .mis  { background: #f19595; }
.toets-fouten { margin: 9px 0 0; font-size: .86rem; color: var(--grijs); }

/* ---------- Het ruilblok ---------- */
/* Geen kaart in een kaart. Het formulier stond in een blauw vak, in
   een witte kaart, met daarin nog een wit vak om het vinkje — vier
   randen over elkaar. Nu scheidt één lijn de blokken. */
.toets-ruil {
  margin-top: 24px; padding-top: 22px;
  border-top: 1px solid var(--rand);
}
.tr-kop { margin: 0 0 4px; font-size: 1.05rem; font-weight: 700; color: #1e3a8a; }
.tr-sub { margin: 0 0 15px; font-size: .9rem; line-height: 1.6; color: #475569; }
.tr-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.toets-form label { display: block; font-size: .88rem; font-weight: 700; color: var(--tekst); }
.toets-form input[type=text], .toets-form input[type=email] { width: 100%; }
.tr-akkoord {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 13px 0 15px; font-size: .85rem; font-weight: 400;
  line-height: 1.55; color: #475569; cursor: pointer;
}
.tr-akkoord input { margin-top: 3px; flex-shrink: 0; }

/* ---------- Het lokveld ----------
   Niet display:none. Sommige bots slaan verborgen velden over, maar
   een weggeschoven veld vullen ze wel. tabindex="-1" en aria-hidden
   houden het buiten bereik van toetsenbord en schermlezer. */
.lokveld {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

/* ---------- Delen ---------- */
.toets-delen {
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--rand);
  font-size: .92rem; color: #475569;
}
/* Een knop die geen knop is. Twee blauwe blokken onder elkaar vechten
   om dezelfde aandacht, en delen is niet wat je hier het liefst wilt. */
.tekstknop {
  background: none; border: 0; padding: 0; box-shadow: none;
  font-size: .92rem; font-weight: 600; color: var(--kleur);
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
}
.tekstknop:hover { background: none; color: var(--kleur-diep); text-decoration: underline; }
.tekstknop:active { transform: none; }

@media (max-width: 560px) {
  .tr-rij { grid-template-columns: 1fr; }
  .toets-bol { width: 78px; height: 78px; }
  .toets-bol strong { font-size: 1.6rem; }
  .toets-kaart { padding: 18px 16px; }
  #toets-vak { min-height: 0; }
  .toets-opties .optie { padding: 13px 14px; font-size: .98rem; gap: 12px; }
  .toets-opties .antwletter { width: 26px; height: 26px; }
  .tb-icoon { width: 36px; height: 36px; font-size: 1.15rem; }
  .tb-citaat { font-size: 1.12rem; }
  .toets-vraag { font-size: 1.16rem; }
  .tb-links { gap: 14px; }
  .tb-links a { font-size: .88rem; }
}

/* ---------- Toetsdeelnemers in Beheer (v1.58.0) ---------- */
.tl-cijfers {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px; margin-top: 12px;
}
.tl-cijfers div { background: var(--licht); border-radius: 10px; padding: 12px 14px; }
.tl-cijfers span { display: block; font-size: .76rem; color: var(--grijs); margin-bottom: 3px; }
.tl-cijfers strong { font-size: 1.5rem; font-weight: 800; color: var(--tekst); }
.tl-cijfers strong.nadruk { color: var(--kleur); }

.tl-tabel { width: 100%; border-collapse: collapse; font-size: .9rem; margin-top: 10px; }
.tl-tabel th {
  text-align: left; padding: 9px 10px; font-size: .78rem; font-weight: 700;
  color: var(--grijs); background: var(--licht);
}
.tl-tabel td { padding: 11px 10px; border-top: 1px solid var(--rand); vertical-align: top; }
.tl-tabel tr.gedaan td { color: var(--grijs); }
.tl-tabel tr.let-op { background: var(--amber-licht); }
.tl-score { font-weight: 800; white-space: nowrap; }
.tl-fout, .tl-datum { color: var(--grijs); white-space: nowrap; }
.tl-knopje { margin: 0; }
.tl-reden {
  display: inline-block; font-size: .74rem; font-weight: 700;
  padding: 2px 9px; border-radius: 999px;
  background: #fee2e2; color: #b91c1c;
}
.tl-reden.te_snel { background: var(--amber-licht); color: #7c4a03; }
.tl-reden.te_vaak { background: #e2e8f0; color: #475569; }

@media (max-width: 560px) {
  .tl-tabel { font-size: .84rem; }
  .tl-tabel td, .tl-tabel th { padding: 8px 6px; }
  .tl-fout { display: none; }
}

/* De merknaam boven de vraag op de toetspagina. Klein en blauw: de
   vraag eronder is de kop, de naam is het etiket. Andersom zou "De
   IQ-check" gaan schreeuwen, en dat is precies de toon die iemand die
   denkt dat hij het weet wegjaagt. */
.toets-merk {
  margin: 0 0 2px; font-size: 1.02rem; font-weight: 800;
  color: var(--kleur); letter-spacing: -.01em;
}

/* ---------- Uitslag: het gemiddelde, het bewijs, het aanbod (v1.58.1) ----
   De volgorde op het scherm is klap → bewijs → e-mail → aanbod. Het
   aanbod komt pas nadat de bezoeker heeft gezien dat de uitleg iets
   waard is; andersom leest het scherm als een advertentie. */
.toets-gem { margin: 7px 0 0; font-size: .9rem; color: #475569; }
.toets-gem strong { color: var(--tekst); }

/* Het gratis uitlegblok. Groen, want het is het goede antwoord — en
   dezelfde kleur die de gebruiker straks in de lessen terugziet. */
/* Iggy legt het uit, in zijn eigen ballon.
   Op het scherm ervoor belooft hij dat hij dat doet; hier doet hij het.
   Dezelfde vorm als in de betaalde lessen, dus wie doorklikt herkent
   het meteen. */
.toets-gratis { margin: 24px 0; }
.toets-gratis .iggy-bubbel { padding: 15px 19px; }
.tg-tag {
  margin: 0 0 6px !important; font-size: .68rem; letter-spacing: .07em;
  font-weight: 800; color: var(--kleur-diep);
}
.tg-vraag { margin: 0 0 8px !important; font-size: .9rem; line-height: 1.5; color: #4a63a8; }
/* Het goede antwoord in het groen: dat is het enige stukje op dit
   scherm dat "dit was goed" zegt, en het hoort bij de blokjes erboven. */
.tg-goed {
  margin: 0 0 10px !important; font-size: 1.06rem; font-weight: 700;
  color: #15803d;
}
.tg-uitleg { margin: 0 !important; font-size: .95rem; line-height: 1.7; color: #1e3a8a; }

/* Het aanbod als vinkje in hetzelfde formulier. Geen tweede knop: wie
   hier staat is warm, en een tweede scherm koelt hem af. */
.tr-aanbod {
  display: flex; gap: 10px; align-items: center;
  margin: 0 0 16px; font-size: .93rem; font-weight: 400;
  line-height: 1.5; color: #334155; cursor: pointer;
}
.tr-aanbod input { flex-shrink: 0; }
.tr-aanbod:hover { color: var(--kleur-diep); }

/* ---------- Prijzen op het bedanktscherm (v1.58.2) ----------
   Het laatste scherm dat de bezoeker ziet. Hem wegsturen met alleen
   "dank je wel" is de enige plek verspillen waar hij nog kijkt. */
.toets-prijs {
  margin: 20px 0 0; padding: 18px;
  border: 1px solid var(--rand); border-radius: 16px; background: #fbfcfe;
}
.tp-kop { margin: 0 0 12px; font-size: 1.02rem; font-weight: 700; color: var(--tekst); }
.tp-rij {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 11px 0; border-top: 1px solid var(--rand);
}
.tp-wat { flex: 1; min-width: 0; font-size: .95rem; font-weight: 600; color: var(--tekst); }
.tp-wat em {
  display: block; margin-top: 2px;
  font-style: normal; font-size: .84rem; font-weight: 400; line-height: 1.5;
  color: #475569;
}
.tp-bedrag {
  flex: none; font-size: 1.25rem; font-weight: 800; color: var(--tekst);
  white-space: nowrap; padding-top: 1px;
}
.tp-bedrag.tp-vraag { font-size: .88rem; font-weight: 600; color: #475569; }
.tp-klein {
  margin: 12px 0 0; padding-top: 11px; border-top: 1px solid var(--rand);
  font-size: .82rem; color: #475569;
}
.toets-prijs .knop { margin-top: 12px; }

/* De regel onder de verzendknop. Klein, maar hij moet er staan: de AVG
   vraagt om informatie op het moment dat je gegevens verzamelt. */
.tr-klein { margin: 11px 0 0; font-size: .8rem; line-height: 1.5; color: #475569; }

/* ---------- Iggy op het bedanktscherm (v1.58.3) ----------
   Zijn eerste optreden. Wie later een licentie neemt, komt hem in
   elke les tegen; hier maakt hij zich alvast bekend. Een gezicht dat
   je al kent, is één drempel minder.

   Hergebruikt .iggy-stap, .iggy-avatar en .iggy-bubbel uit de lessen,
   zodat het scherm er hetzelfde uitziet als het product erachter. */
.toets-iggy { margin-bottom: 20px; }
.toets-iggy .iggy-bubbel { padding: 15px 19px; }
.toets-iggy .iggy-bubbel p { font-size: .98rem; line-height: 1.65; color: #1e3a8a; }
.toets-iggy .iggy-groet {
  font-size: 1.32rem; font-weight: 800; line-height: 1.3;
  color: var(--kleur-diep); margin-bottom: 8px !important;
}
@media (max-width: 560px) {
  .toets-iggy .iggy-bubbel { padding: 13px 15px; }
  .toets-iggy .iggy-groet { font-size: 1.15rem; }
}

/* Iggy bij de eerste vraag. Iets kleiner dan op het bedanktscherm: daar
   is hij de spreker, hier stelt hij zich alleen even voor en moet de
   vraag eronder het meeste gewicht houden. */
.toets-iggy-start { margin-bottom: 22px; }
.toets-iggy-start .iggy-avatar { width: 50px; height: 50px; }
.toets-iggy-start .iggy-bubbel { padding: 13px 17px; }
.toets-iggy-start .iggy-bubbel p { font-size: .98rem; line-height: 1.65; }
.toets-iggy-start .iggy-bubbel p + p { margin-top: 10px; }
/* De knop staat gecentreerd onder de ballon, met lucht ertussen.
   Iggy praat, je leest, en dan pas komt de keuze — die scheiding maak je
   met ruimte, niet met een lijn.

   62 px inspringen aan de linkerkant (50 avatar + 12 tussenruimte) zodat
   het midden van de knop het midden van de ballon is, en niet het midden
   van de hele kaart. Die twee maten komen uit .iggy-avatar en .iggy-stap. */
/* De knop staat gecentreerd onder de ballon, met lucht ertussen.
   Iggy praat, je leest, en dan pas komt de keuze — die scheiding maak
   je met ruimte, niet met een lijn.

   Het blok eromheen springt links 62 px in: 50 px avatar plus 12 px
   tussenruimte, zodat het precies onder de ballon begint. Wat overblijft
   is even breed als de ballon, en daarin centreert de knop vanzelf.

   Dat is met opzet een omhullend blok en geen calc op de knop zelf: zo
   klopt het ook als de knoptekst langer wordt. De twee maten komen uit
   .iggy-avatar en .iggy-stap. */
.toets-iggy-start { margin-bottom: 0; }
.tis-knop { padding-left: 62px; padding-top: 48px; text-align: center; }

@media (max-width: 560px) {
  /* Op een telefoon staat de avatar op 40 px met 8 px ertussen. */
  .tis-knop { padding-left: 48px; padding-top: 34px; }
}

/* ---------- Wie om een prijs vroeg (v1.58.4) ----------
   Het vinkje op het uitslagscherm staat nu ook in de database, en dus
   in dit overzicht. Een regel met een vlammetje is geen lead maar een
   gesprek: die persoon vroeg zelf wat het kost. */
.tl-tabel tr.warm { background: #fff8ec; }
.tl-lic { white-space: nowrap; }
.tl-vlag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .76rem; font-weight: 800;
  padding: 3px 9px; border-radius: 999px;
  background: var(--amber-licht); color: #7c4a03;
}
.tl-vlag i { font-size: .92rem; }
.tl-nee { color: var(--rand); }

@media (max-width: 560px) {
  /* Op een telefoon vervalt "fout bij"; de licentiekolom blijft, want
     dat is de kolom waarop je handelt. */
  .tl-lic { font-size: .78rem; }
}

/* ============================================================
   DE LES ALS TWEE VLAKKEN (v1.61.3) — nu alleen IT-basis

   Kop en werkgebied liepen in elkaar over: één wit vlak met de
   titel, de voortgangsbalk en het gesprek erin. Je zag niet waar
   het "waar ben ik" ophield en het werk begon.

   Nu staat de kop op grijs en het werk op wit. Een ander vlak zegt
   "dit is iets anders"; een streep zegt alleen "hier houdt iets
   op". Voor deze vraag is het eerste sterker — en het kost geen
   nieuwe kleur, want het grijs is de paginakleur die er al was.

   Alles hangt onder .les-blad. Die klasse zet les.php alleen bij
   IT-basis; de andere vijf modules raken hier niets van.
   ============================================================ */

/* De kaart zelf krijgt geen padding meer: de twee vlakken bepalen
   nu zelf hun ruimte, en alleen zo kan het grijs tot aan de rand
   lopen. Zonder overflow steekt het door de afgeronde hoek heen. */
.kaart.les-blad { padding: 0; overflow: hidden; }

/* ---- Boven: waar ben ik ---- */
.les-blad .les-hoofd {
  background: var(--licht);
  border-bottom: 1px solid #dfe6f0;
  padding: 20px 24px 16px;
}
.les-blad .les-hoofd .les-kop { margin-bottom: 16px; }

/* De stapteller stond hier eerst naast de balk. Sinds v1.61.4 staat
   diezelfde tekst ook achter "LES 1 VAN 5" in de kopregel, en dan
   stond hij er twee keer — één scherm, twee keer hetzelfde getal.

   Het element blijft bestaan maar wordt verborgen: het script schrijft
   ernaar, en bij de vijf modules zonder de nieuwe indeling is dit nog
   steeds de enige plek waar de stap staat. Weghalen uit de HTML zou
   die modules dus hun teller kosten. */
.les-blad .stapbalk-rij .stapbalk { margin-bottom: 0; }
.les-blad .stapbalk-rij .staptitel { display: none; }

/* ---- Onder: wat moet ik doen ---- */
.les-blad .les-werk { padding: 24px; }

/* ---- De voet ---- */
/* Een eigen strook in plaats van een zwevende knop onder het werk.
   De rand loopt van rand tot rand, want hij scheidt twee zones —
   niet twee alinea's. */
.les-blad .stap-nav {
  background: var(--licht);
  border-top: 1px solid #dfe6f0;
  margin: 0; padding: 14px 24px;
}

/* De terugkijkmelding hoort bij de kop: het zegt in welke stand je
   kijkt, niet wat je moet doen. */
.les-blad .les-hoofd .terugkijk { margin: 0 0 14px; }


@media (max-width: 700px) {
  .les-blad .les-hoofd { padding: 16px 16px 14px; }
  .les-blad .les-werk  { padding: 18px 16px; }
  .les-blad .stap-nav  { padding: 12px 16px; }
}

/* ---------- Twee correcties na de eerste proef (v1.61.4) ----------

   1. "STAP 1 VAN 4" staat achter "LES 1 VAN 5" in plaats van naast de
      voortgangsbalk. Twee keer "waar ben ik" hoort op één regel; los
      van elkaar las het als twee losse mededelingen.

   2. De hint "geen goed of fout" staat in Iggy's tekstballon. Als losse
      regel boven de antwoorden begon hij een tweede blok, terwijl het
      bij zijn vraag hoort. */

/* Het streepje wordt door CSS gezet, niet door het script: staat er
   geen stap (een module zonder de nieuwe indeling, of het afrondscherm),
   dan is de span leeg en verschijnt er ook geen losse | . */
.les-kop .sub-stap:not(:empty)::before {
  content: "|"; margin: 0 7px; color: #c3ccda; font-weight: 400;
}

/* De hint in de ballon. Kleiner dan de vraag en met een lijn erboven:
   hij hoort erbij, maar hij is niet wat er gevraagd wordt.

   Zonder informatie-icoontje (v1.61.5). Dat icoon zei niets wat de
   tekst niet al zei, en het trok het oog naar de minst belangrijke
   regel op het scherm. De lijn erboven doet het scheidingswerk al. */
.bubbel-hint {
  margin: 10px 0 0; padding-top: 9px;
  border-top: 1px solid rgba(37,99,235,.16);
  font-size: .85rem; font-weight: 400; color: #4b6a9b;
}

/* In de labelvorm (scene) staat de hint op wit in plaats van in een
   blauwe ballon; daar past de blauwe scheidingslijn niet. */
.scene .bubbel-hint { border-top-color: var(--rand); color: var(--grijs); }


/* ---------- De herken-stap na afloop (v1.61.10) ----------

   Drie dingen zeiden hetzelfde: het groen, de vinkjes en een balk met
   "Goed!" eronder. De balk is weg; het groen en het vinkje blijven.

   En: zodra je de twee juiste hebt, staat alles vast. Hiervoor kon je
   daarna nog een derde aantikken die dan rood werd, onder een stap die
   al af was. */

/* Het vinkje in een juist antwoord. Alleen bij .goed, en alleen als er
   een letter staat om te vervangen — anders zou er bij de chipvorm
   zonder letter een leeg rondje verschijnen. */
.stap-inhoud .chip.goed .antwletter {
  position: relative; color: transparent;
}
.stap-inhoud .chip.goed .antwletter::after {
  /* Een gewoon vinkje uit het lettertype, geen icoonfont. De codepoint
     van een Tabler-icoon opzoeken en hier hardcoderen werkt tot iemand
     die bibliotheek bijwerkt; dit teken bestaat overal. */
  content: "\2713";
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1rem; font-weight: 700;
}
.stap-inhoud .chip.goed .antwletter {
  background: var(--groen); border-color: var(--groen);
}

/* Wat je niet koos treedt terug zodra de stap af is. Niet verbergen:
   je moet kunnen nalezen waaruit je koos. */
.stap-inhoud .chip.terug {
  opacity: .5; border-color: var(--rand); background: #fff; color: var(--grijs);
}
.stap-inhoud .chip.terug:hover { border-color: var(--rand); }