/* Empire v2: componenten. Leest alleen variabelen uit tokens.css, nooit hexcodes.
   Regels per deel staan in v2/design-system.md. Beweging alleen via transform en opacity,
   en alles staat stil bij prefers-reduced-motion (onderaan). */

/* ---------------------------------------------------------------- letters (OFL, lokaal) */
@font-face { font-family: 'Lilita One'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/lilita-one-400.woff2?v=3b71f6c2') format('woff2'); }
@font-face { font-family: 'Fredoka'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('fonts/fredoka-600-700.woff2?v=6438e7de') format('woff2'); }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 500 800; font-display: swap; src: url('fonts/nunito-500-800.woff2?v=76388dbf') format('woff2'); }
@font-face { font-family: 'Archivo Black'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/archivo-black-400.woff2?v=1f965709') format('woff2'); }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 500 700; font-display: swap; src: url('fonts/archivo-500-700.woff2?v=65449f16') format('woff2'); }

/* ---------------------------------------------------------------- reset en basis */
*, *::before, *::after { box-sizing: border-box; caret-color: transparent; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { min-height: 100vh; cursor: default; }
/* Geen bewerkcursor buiten echte invoervelden (vaste eis, zie gedrag.js). */
input, textarea, select, [contenteditable="true"] { caret-color: auto; }
input, textarea { cursor: text; }
a[href], button:not(:disabled), label, select, summary { cursor: pointer; }
img { display: block; max-width: 100%; height: auto; }
svg { display: block; flex: none; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { background: none; border: 0; }
ul, ol { list-style: none; }
a { color: inherit; }
table { border-collapse: collapse; }
:focus-visible { outline: 3px solid var(--focus, var(--middernacht)); outline-offset: 2px; }
/* Het hidden-attribuut wint altijd, ook van een display uit een component (quiz.js wisselt zo). */
[hidden] { display: none !important; }
/* Koppen die quiz.js focust (tabindex -1) krijgen geen focusrand; ze zijn geen bedieningselement. */
[tabindex="-1"]:focus { outline: none; }

[data-stemming] {
  background: var(--vlak);
  color: var(--vlak-tekst);
  font-family: var(--font-ui);
  font-size: var(--tekst-maat);
  line-height: var(--tekst-regel);
  font-weight: var(--tekst-gewicht);
  letter-spacing: var(--spatie-tekst);
}

.binnen { width: min(100% - 2 * var(--goot), var(--inhoud-max)); margin-inline: auto; }
.visueel-verborgen { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.overslaan { position: absolute; left: 8px; top: -80px; z-index: 100; padding: 10px 16px; background: var(--middernacht); color: var(--papier); border-radius: 12px; font-weight: 800; }
.overslaan:focus-visible { top: 8px; }
.icoon { width: var(--icoon-maat, 24px); height: var(--icoon-maat, 24px); }

/* ---------------------------------------------------------------- tekst */
.label {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-ui); font-size: 12px; font-weight: var(--ui-gewicht); line-height: 1.2;
  letter-spacing: var(--spatie-label); text-transform: uppercase; color: var(--vlak-tekst);
}
.label .icoon { --icoon-maat: 18px; }
.poster-kop {
  font-family: var(--font-display); font-weight: var(--font-display-gewicht);
  font-size: clamp(30px, 5.2vw, 64px); line-height: 0.9; letter-spacing: var(--display-spatie);
  color: var(--kop); text-wrap: balance;
}
.poster-kop-klein { font-size: clamp(24px, 2.6vw, 30px); line-height: 1; }
.licht-kop {
  font-family: var(--font-display); font-weight: var(--font-display-gewicht);
  font-size: clamp(32px, 3.6vw, 48px); line-height: var(--display-regel); letter-spacing: var(--display-spatie);
  color: var(--kop); text-wrap: balance;
}
.licht-kop-klein { font-family: var(--font-ui); font-weight: 800; font-size: 19px; line-height: 1.33; letter-spacing: 0; color: var(--kop); }
.intro { max-width: 62ch; font-size: calc(var(--tekst-maat) + 1px); }
.bronregel { font-size: 13px; }
.bandkop { display: grid; gap: 12px; justify-items: start; margin-bottom: 28px; max-width: 780px; }

/* ---------------------------------------------------------------- knoppen
   Drie varianten (hoofd, tweede, spook) die hun kleuren uit de stemming halen. Toestanden:
   zweven, indrukken (2px omlaag, onderrand kleiner), focus en uit. De klassen is-zweef,
   is-actief, is-focus en is-uit tonen een toestand vast op de kleurproef. */
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: var(--knop-pad-v) var(--knop-pad-h);
  font-family: var(--font-ui); font-size: var(--knop-maat); font-weight: var(--ui-gewicht); line-height: 1.2;
  letter-spacing: var(--spatie-ui); text-transform: var(--knop-hoofdletters); text-decoration: none; white-space: nowrap;
  background: var(--knop-vlak); color: var(--knop-tekst);
  border: var(--knop-rand) solid var(--knop-omlijning);
  border-bottom: var(--knop-diepte) solid var(--knop-onder);
  border-radius: var(--radius-knop);
  transition: transform var(--snel) ease;
  -webkit-user-select: none; user-select: none;
}
.knop .icoon { --icoon-maat: 18px; }
.knop-tweede {
  --knop-vlak: var(--tweede-knop-vlak); --knop-tekst: var(--tweede-knop-tekst);
  --knop-onder: var(--tweede-knop-onder); --knop-omlijning: var(--tweede-knop-omlijning);
}
.knop-spook {
  --knop-vlak: var(--spook-vlak); --knop-tekst: var(--spook-tekst);
  --knop-onder: var(--spook-onder); --knop-omlijning: var(--spook-omlijning);
}
.knop-klein { --knop-pad-v: 8px; --knop-pad-h: 14px; --knop-maat: 13px; }
.knop-breed { width: 100%; }
.knop.is-zweef { background: color-mix(in srgb, var(--knop-vlak) 82%, var(--knop-zweef-naar, var(--knop-onder))); }
.knop-spook.is-zweef { background: var(--spook-zweef); }
@media (hover: hover) {
  .knop:hover { background: color-mix(in srgb, var(--knop-vlak) 82%, var(--knop-zweef-naar, var(--knop-onder))); }
  .knop-spook:hover { background: var(--spook-zweef); }
}
.knop:active, .knop.is-actief {
  transform: translateY(var(--knop-indruk));
  border-bottom-width: var(--knop-diepte-actief);
  margin-bottom: calc(var(--knop-diepte) - var(--knop-diepte-actief));
}
.knop:focus-visible, .knop.is-focus { outline: 3px solid var(--focus); outline-offset: 3px; }
.knop:disabled, .knop:disabled:hover, .knop.is-uit, .knop.is-uit:hover {
  background: var(--knop-uit-vlak); color: var(--knop-uit-tekst);
  border-color: var(--knop-uit-rand); cursor: not-allowed;
  transform: none; border-bottom-width: var(--knop-diepte); margin-bottom: 0;
}
.knoprij { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; }

.tag {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 12px;
  background: var(--papier); color: var(--kop); border: var(--omlijning); border-radius: var(--radius-knop);
  font-family: var(--font-ui); font-size: 12px; font-weight: var(--ui-gewicht); line-height: 1.2;
  letter-spacing: var(--spatie-label); text-transform: uppercase; white-space: nowrap;
}

/* ---------------------------------------------------------------- kleurproef: paneel, intro, blokken */
.proefpaneel { position: relative; z-index: 50; background: var(--papier); border-bottom: 2px solid var(--rand-neutraal); font-family: var(--font-nunito); }
.proefpaneel-rij { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding-block: 10px; }
.keuze { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; border: 0; }
.keuze-titel { float: left; font-size: 12px; font-weight: 800; line-height: 1.2; letter-spacing: 0.053em; text-transform: uppercase; color: var(--tekst-zacht); }
.keuze-opties { display: flex; flex-wrap: wrap; gap: 6px; }
.kies {
  position: relative; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 6px 10px;
  background: var(--papier); color: var(--kop-tekst);
  border: 2px solid var(--rand-neutraal); border-bottom-width: 4px; border-radius: 12px;
  font-size: 14px; font-weight: 800; line-height: 1.1; white-space: nowrap;
}
.kies input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.kies:hover { background: var(--vlak-zweef); }
.kies:has(input:checked) { background: var(--kies-zacht); border-color: var(--kies); }
.kies:has(input:focus-visible) { outline: 3px solid var(--middernacht); outline-offset: 2px; }
.kies-stip { display: inline-flex; gap: 2px; }
.kies-stip span { width: 11px; height: 11px; border-radius: 50%; border: 1px solid var(--inkt); }
.kies-stip span:nth-child(1) { background: var(--hoofd); }
.kies-stip span:nth-child(2) { background: var(--band-1); }
.kies-stip span:nth-child(3) { background: var(--tweede); }
.kies-lilita .kies-naam { font-family: 'Lilita One', var(--font-nunito); font-weight: 400; font-size: 17px; }
.kies-fredoka .kies-naam { font-family: 'Fredoka', var(--font-nunito); font-weight: 600; font-size: 17px; }

.proefintro { display: grid; gap: 14px; justify-items: start; padding-block: 36px 32px; }
.proefintro h1 { font-family: var(--font-display); font-weight: var(--font-display-gewicht); font-size: clamp(32px, 4.4vw, 48px); line-height: 1.2; letter-spacing: -0.02em; color: var(--kop); }
.proefintro p { max-width: 72ch; }
.proefnoot { font-size: 13px; color: var(--tekst-zacht); }

.proefblok-kop { background: var(--middernacht); color: var(--papier); font-family: var(--font-nunito); letter-spacing: 0; }
.proefblok-kop .binnen { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; padding-block: 14px; }
.proefblok-titel { font-size: 20px; font-weight: 800; line-height: 1.2; }
.proefblok-sub { font-size: 12px; font-weight: 800; letter-spacing: 0.053em; text-transform: uppercase; }

/* ---------------------------------------------------------------- kopbalk (beide stemmingen) */
.kopbalk { position: relative; z-index: 40; }
.woordmerk { display: inline-flex; align-items: center; gap: 8px; flex: none; color: var(--kop); text-decoration: none; }
.woordmerk-tekst { font-family: var(--font-display); font-weight: var(--font-display-gewicht); font-size: 24px; line-height: 1; text-transform: uppercase; }
.woordmerk .icoon { --icoon-maat: 30px; }
.tabs { min-width: 0; }
.tabs-lijst { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.tabs-lijst::-webkit-scrollbar { display: none; }
.tab {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
  border: var(--knop-rand) solid transparent; border-radius: var(--radius-knop);
  font-family: var(--font-ui); font-size: 14px; font-weight: var(--ui-gewicht); letter-spacing: var(--spatie-ui);
  white-space: nowrap; text-decoration: none; color: var(--kop);
}
a.tab:hover { background: var(--vlak-zweef); }

.proefblok-promo { background: var(--band-1); }
.kopbalk-poster { padding-block: 12px; }
.kopbalk-pil {
  display: flex; align-items: center; gap: 12px 16px; padding: 6px 8px 6px 20px;
  background: var(--papier); border: var(--omlijning); border-radius: var(--radius-knop);
}
.kopbalk-pil .tabs { flex: 1; }
.kopbalk-pil .tabs-lijst { justify-content: center; }
.kopbalk-poster .tab[aria-current="page"] { background: var(--band-1); border-color: var(--inkt); }
/* Breed staan de tabs in de pil; het paneel is dan alleen een doorgeefluik. Smal: zie onder 900 px. */
.menu-paneel { flex: 1; min-width: 0; display: flex; justify-content: center; }
.menu-18 { display: none; }
.kopbalk-pil .menuknop { width: 44px; height: 44px; background: var(--papier); color: var(--inkt); border: var(--omlijning); border-radius: 50%; transition: background-color var(--zweef-duur) ease; }
@media (hover: hover) { .kopbalk-pil .menuknop:hover { background: var(--band-1); } }
/* De taalknop (06-10-2026): een kleine ronde pil vóór de 18+-pil, gekleurd (zie hieronder) met een zwart randje van 1px, een
   wereldbol van 16 px en de code van de andere taal (EN of NL). Op elke breedte zichtbaar; smal zonder extra lucht. */
.taalknop {
  display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 32px; padding: 4px 12px 4px 9px;
  --taal-vlak: var(--sticker-4); --taal-tekst: var(--sticker-4-tekst);
  background: var(--taal-vlak); color: var(--taal-tekst); border: 1px solid var(--inkt); border-radius: var(--radius-knop);
  font-family: var(--font-ui); font-size: 12px; font-weight: var(--ui-gewicht); line-height: 1.2;
  letter-spacing: var(--spatie-label); text-transform: uppercase; white-space: nowrap; text-decoration: none;
  transition: background-color var(--zweef-duur) ease;
}
.taalknop .icoon { --icoon-maat: 16px; flex: none; }
.taalknop:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
@media (hover: hover) { .taalknop:hover { background: color-mix(in srgb, var(--taal-vlak) 85%, black); } }
/* Gekleurde kopbalkknoppen (06-10-2026, Kerim): taalknop en 18+ als stickers uit de hero, met hetzelfde zwarte
   randje van 1 px. Taal = sticker 4 (mint in refero en kroongoud, lila in koningsblauw, zand in bordeaux-licht; blauw
   naast oranje vond Kerim niet mooi), 18+ = sticker 2 (oranje). De menuknop blijft wit (tweede besluit Kerim). */
.kopbalk-pil > .tag, .kopbalk-promo .pil-18 { background: var(--sticker-2); color: var(--sticker-2-tekst); border: 1px solid var(--inkt); }
.kopbalk-licht .menuknop, .kopbalk-promo .menuknop { background: var(--papier); color: var(--inkt); border: var(--omlijning); border-radius: 50%; transition: background-color var(--zweef-duur) ease; }
@media (hover: hover) { .kopbalk-licht .menuknop:hover, .kopbalk-promo .menuknop:hover { background: var(--band-1); } }
/* De zes tabs in de pil (06-10-2026): sinds de taalknop erbij staat, en met de langere Engelse tabnamen, passen ze tussen
   900 en 1279 px alleen iets compacter (gemeten met een iframe van 900 tot 1920 px, Nederlands en Engels, met en zonder
   de tellers). "safe center": loopt de lijst toch over, dan begint hij links in plaats van aan beide kanten te knippen. */
.kopbalk-pil .tabs-lijst { justify-content: safe center; }
@media (min-width: 900px) and (max-width: 1279px) {
  .kopbalk-pil { column-gap: 10px; }
  .kopbalk-pil .tabs-lijst { gap: 2px; }
  .kopbalk-pil .tab { padding: 0 9px; }
}
@media (min-width: 900px) and (max-width: 1023px) {
  .kopbalk-pil .tab { padding: 0 6px; font-size: 13px; }
  .kopbalk-pil .woordmerk-tekst { font-size: 20px; }
  .taalknop { gap: 4px; padding: 4px 8px; }
}
/* Engels met de drie tellers in de pil (Kennisbank en Leerboek, vanaf 1200 px): nog iets minder lucht per tab. */
@media (min-width: 1200px) and (max-width: 1279px) { html[lang="en"] .kopbalk-pil:has(.kopbalk-tellers) .tab { padding: 0 7px; } }
@media (min-width: 1280px) { html[lang="en"] .kopbalk-pil:has(.kopbalk-tellers) .tab { padding: 0 10px; } }

.kopbalk-licht { background: var(--papier); border-bottom: 2px solid var(--rand-neutraal); }
.kopbalk-rij { display: flex; align-items: center; gap: 12px 24px; min-height: 72px; }
.woordmerk-licht { font-family: var(--font-display); font-weight: var(--font-display-gewicht); font-size: 32px; line-height: 1; letter-spacing: -0.01em; color: var(--hoofd); text-decoration: none; flex: none; }
.kopbalk-licht .tabs { flex: 1; }
.kopbalk-licht .tab { font-size: 13px; text-transform: uppercase; color: var(--tekst-zacht); border-radius: 12px; }
.kopbalk-licht .tab[aria-current="page"] { background: var(--hoofd-zacht); border-color: var(--hoofd); color: var(--kop-tekst); }

/* ---------------------------------------------------------------- banden (poster) */
.band { padding-block: var(--sectie-ruimte); }
.band-1 { background: var(--band-1); color: var(--inkt); }
.band-2 { background: var(--band-2); color: var(--inkt); }
.band-3 { background: var(--band-3); color: var(--inkt); }

/* ---------------------------------------------------------------- hero met reuzenwoord */
.held { position: relative; overflow: clip; padding-block: 8px 56px; }
.held-lint { position: absolute; z-index: 0; left: 50%; top: 50%; width: max(640px, 125vw); height: auto; translate: -50% -50%; pointer-events: none; }
.held-binnen { position: relative; z-index: 1; display: grid; gap: 20px; justify-items: center; }
.held-woord { position: relative; width: 100%; display: grid; place-items: center; padding-block: clamp(56px, 8vw, 104px) clamp(48px, 6.5vw, 88px); }
.reuzenwoord {
  font-family: var(--font-display); font-weight: var(--font-display-gewicht);
  font-size: clamp(56px, 20.5vw, 270px); line-height: var(--display-regel); letter-spacing: var(--display-spatie);
  text-transform: uppercase; white-space: nowrap; color: var(--kop);
}
.held-woord .reuzenwoord { position: relative; z-index: 1; }
.held-onder { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 16px 32px; width: 100%; }
.held-tekst { display: grid; gap: 16px; justify-items: start; }
.held-intro { max-width: 46ch; font-size: 17px; }

/* Stickers: plat, 1px zwart, gedraaid en overlappend, nooit op een raster. In de hero staan
   ze boven en onder het reuzenwoord, nooit over de letters; een sticker bij de letters is nooit
   zwart (feedback Kerim 05-10). */
.sticker {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 0.6em 1.05em; border: 1px solid var(--inkt); border-radius: var(--radius-knop);
  font-family: var(--font-ui); font-size: clamp(12px, 1.45vw, 19px); font-weight: 700; line-height: 1;
  letter-spacing: var(--spatie-label); text-transform: uppercase; white-space: nowrap;
  rotate: var(--draai, 0deg);
}
.sticker-1 { background: var(--sticker-1); color: var(--sticker-1-tekst); }
.sticker-2 { background: var(--sticker-2); color: var(--sticker-2-tekst); }
.sticker-3 { background: var(--sticker-3); color: var(--sticker-3-tekst); }
.sticker-4 { background: var(--sticker-4); color: var(--sticker-4-tekst); }
.sticker-5 { background: var(--sticker-5); color: var(--sticker-5-tekst); }
.sticker-6 { background: var(--sticker-6); color: var(--sticker-6-tekst); }
.sticker-wit { background: var(--papier); color: var(--inkt); }
.sticker-rond { width: 4.6em; height: 4.6em; padding: 0; border-radius: 50%; }
.sticker-hoekig { border-radius: var(--radius-sticker); }
.sticker .icoon { --icoon-maat: 2.3em; }
.held-woord .sticker { position: absolute; z-index: 2; }
.held-woord .sticker-rond { width: 3.6em; height: 3.6em; }
.sticker-kroon { top: clamp(2px, 0.6vw, 8px); left: 18%; --draai: -8deg; }
.sticker-krocht { top: clamp(10px, 1.8vw, 24px); right: 12%; --draai: 7deg; }
.sticker-haarlem { bottom: clamp(8px, 1.4vw, 18px); left: 20%; --draai: -5deg; }
.sticker-welkom { bottom: clamp(6px, 1vw, 12px); right: 22%; --draai: 6deg; }

/* Koning Empire in de Kennisbank (ronde 3): de low-poly render, subtiel klein. De hoogte ligt vast,
   de breedte volgt de render (width en height in de HTML zijn de echte maten van de webp). */
.mascotte { flex: none; width: auto; max-width: none; }
.mascotte-groot { height: 120px; }
.mascotte-middel { height: 84px; }
.mascotte-klein { height: 56px; }

/* Lint: inline svg, de kleuren volgen het palet. */
.lint .lint-rand { stroke: var(--inkt); }
.lint .lint-voor { stroke: var(--sticker-3); }
.lint .lint-achter { stroke: var(--sticker-5); }

/* ---------------------------------------------------------------- fotostickers */
.fotostickers { display: flex; justify-content: center; align-items: flex-start; padding-block: 12px 8px; }
.fotoband { overflow: clip; }
.fotosticker { position: relative; width: 36%; max-width: 340px; padding: 8px 8px 0; background: var(--papier); border: var(--omlijning); border-radius: var(--radius); rotate: var(--draai, 0deg); }
.fotosticker + .fotosticker { margin-left: -4%; }
.fotosticker:nth-child(1) { --draai: -5deg; }
.fotosticker:nth-child(2) { --draai: 3deg; z-index: 1; margin-top: 32px; }
.fotosticker:nth-child(3) { --draai: -2deg; }
.fotosticker img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: calc(var(--radius) - 8px); }
.fotosticker figcaption { padding: 10px 4px 12px; font-size: 13px; font-weight: 700; line-height: 1.2; letter-spacing: var(--spatie-label); text-transform: uppercase; }
.foto-gevel { object-position: 55% 50%; }
.foto-pool { object-position: 50% 60%; }

/* ---------------------------------------------------------------- Google-reviews (gouden standaard: zes witte kaarten) */
.gr-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.gr { display: flex; flex-direction: column; gap: 10px; padding: 24px; background: var(--papier); color: var(--inkt); border: var(--omlijning); border-radius: var(--radius); }
.gr-sterren { color: var(--kroon); font-size: 19px; line-height: 1; letter-spacing: 3px; -webkit-text-stroke: 1px var(--inkt); paint-order: stroke fill; }
.gr-tekst { font-size: 15px; line-height: 1.5; }
.gr-naam { margin-top: auto; font-weight: 700; }
.gr-bron { font-size: 12px; font-weight: 700; letter-spacing: var(--spatie-label); text-transform: uppercase; }
.gr-knoppen { margin-top: 24px; align-items: center; }
/* Tekstlink (ronde 3, punt 12): geen tweede zwarte pil in hetzelfde scherm. Zweven: alleen een dikkere streep. */
.tekstlink {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 4px;
  color: var(--inkt); font-family: var(--font-ui); font-size: 15px; font-weight: 700; letter-spacing: var(--spatie-ui);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px;
  transition: text-decoration-thickness var(--zweef-duur) ease;
}
.tekstlink .icoon { --icoon-maat: 18px; }
@media (hover: hover) { .tekstlink:hover { text-decoration-thickness: 3px; } }
.tekstlink:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.gr-bronregel { margin-top: 14px; }

/* ---------------------------------------------------------------- kaart
   Poster: wit, 1px zwart, radius 20px (verhoogd 40px, gevuld met een stickerkleur).
   Licht: wit, 2px rand #e5e5e5, radius 12px, nooit gevuld of met schaduw. */
.kaart { padding: clamp(22px, 3vw, 34px); background: var(--papier); color: var(--vlak-tekst); border: var(--omlijning); border-radius: var(--radius); }
.kaart-groot { border-radius: var(--radius-groot); }
.kaart-gevuld { background: var(--sticker-5); color: var(--sticker-5-tekst); }
.kaart-gevuld .label, .kaart-gevuld .poster-kop { color: inherit; }

/* ---------------------------------------------------------------- openingstijden en route */
.tijden-raster { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 20px; align-items: start; }
.tijdenkaart .poster-kop { margin-top: 10px; }
.tijden { width: 100%; margin-top: 18px; font-size: 15px; }
.tijden th, .tijden td { padding: 9px 0; border-bottom: 1px solid currentColor; text-align: left; vertical-align: middle; }
.tijden th { font-weight: 500; }
.tijden td { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tijden tr.is-vandaag th { font-weight: 700; }
.vandaag-tag { display: inline-block; margin-left: 8px; padding: 3px 8px; border: 1px solid currentColor; border-radius: var(--radius-knop); font-size: 11px; font-weight: 700; line-height: 1.1; letter-spacing: var(--spatie-label); text-transform: uppercase; }
.tijden-noot { margin-top: 16px; font-size: 14px; font-weight: 700; }
.routekaart { display: grid; gap: 16px; justify-items: start; }
.adres { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; }
.adres .icoon { --icoon-maat: 22px; }

/* ---------------------------------------------------------------- marquee (het enige dat beweegt in poster) */
.marquee { position: relative; overflow: hidden; background: var(--inkt); color: var(--papier); }
.marquee-spoor { display: flex; width: max-content; animation: marquee 34s linear infinite; }
.marquee-groep { display: flex; flex: none; align-items: center; gap: 28px; padding: 15px 28px 15px 0; font-family: var(--font-ui); font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.032em; text-transform: uppercase; white-space: nowrap; }
.marquee-groep .icoon { --icoon-maat: 20px; color: var(--kroon); }
.marquee:hover .marquee-spoor, .marquee:focus-within .marquee-spoor, .marquee.is-gepauzeerd .marquee-spoor { animation-play-state: paused; }
.marquee-knop { position: absolute; top: 50%; right: 6px; display: grid; place-items: center; width: 44px; height: 44px; translate: 0 -50%; background: var(--inkt); color: var(--papier); border: 1px solid var(--papier); border-radius: 50%; }
.marquee-knop .icoon { --icoon-maat: 18px; }
.marquee-knop .icoon-speel, .marquee-knop[aria-pressed="true"] .icoon-pauze { display: none; }
.marquee-knop[aria-pressed="true"] .icoon-speel { display: block; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------------------------------------------------------------- voet */
.voet { padding-block: 48px 28px; }
.voet-raster { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 28px; }
.voet .voet-merk { font-family: var(--font-display); font-weight: var(--font-display-gewicht); font-size: 44px; line-height: 0.85; text-transform: uppercase; color: var(--kop); }
.voet-leus { margin-top: 10px; max-width: 26ch; }
.voet .voet-kop { margin-bottom: 8px; font-size: 12px; font-weight: 700; letter-spacing: var(--spatie-label); text-transform: uppercase; }
.voet p { font-size: 15px; }
.voet a { text-decoration: underline; text-underline-offset: 3px; }
.voet-onder { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; margin-top: 32px; padding-top: 16px; border-top: var(--omlijning); font-size: 13px; }

/* ---------------------------------------------------------------- Kennisbank (licht): raster */
.kennis-raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; padding-block: 40px 56px; }
.kennis-onderdelen { display: grid; gap: 48px; padding-block: 8px 64px; }
.onderdeel { display: grid; gap: 18px; }

/* Eenheid en leerpad */
.eenheid { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; background: var(--hoofd); color: var(--hoofd-tekst); border-bottom: 4px solid var(--hoofd-donker); border-radius: var(--radius); }
.eenheid-label { font-size: 13px; font-weight: 800; line-height: 1.2; letter-spacing: var(--spatie-ui); text-transform: uppercase; }
.eenheid-titel { margin-top: 2px; font-size: 19px; font-weight: 800; line-height: 1.33; }
.eenheid .icoon { --icoon-maat: 34px; }

.leerpad { display: flex; flex-direction: column; align-items: center; gap: 22px; padding-top: 64px; }
.leerpad-vak { position: relative; }
.leerpad-koning { position: absolute; left: 2%; top: 44%; }
.leerpad-stap { position: relative; }
.leerpad-stap:nth-child(2) { translate: 56px 0; }
.leerpad-stap:nth-child(3) { translate: 84px 0; }
.leerpad-stap:nth-child(4) { translate: 56px 0; }
.knoop {
  display: grid; place-items: center; width: 72px; height: 72px;
  background: var(--hoofd); color: var(--hoofd-tekst);
  border-bottom: 7px solid var(--hoofd-donker); border-radius: 50%;
  text-decoration: none; transition: transform var(--snel) ease;
}
.knoop .icoon { --icoon-maat: 32px; }
a.knoop:active, .knoop.is-actief { transform: translateY(4px); border-bottom-width: 3px; margin-bottom: 4px; }
.knoop-vergrendeld { background: var(--rand-neutraal); color: var(--rand-uit); border-bottom-color: var(--rand-diep); }
.knoop-ring { display: grid; place-items: center; padding: 6px; border: 5px solid var(--hoofd-zacht); border-radius: 50%; }
.knoop-start {
  position: absolute; bottom: calc(100% + 12px); left: 50%; translate: -50% 0;
  padding: 8px 14px; background: var(--papier); color: var(--kop-tekst);
  border: 2px solid var(--rand-neutraal); border-radius: 12px;
  font-size: 14px; font-weight: 800; line-height: 1.2; letter-spacing: var(--spatie-ui); text-transform: uppercase; white-space: nowrap;
  animation: dobber 1.8s ease-in-out infinite;
}
.knoop-start::after {
  content: ""; position: absolute; top: 100%; left: 50%; width: 12px; height: 12px;
  background: var(--papier); border-right: 2px solid var(--rand-neutraal); border-bottom: 2px solid var(--rand-neutraal);
  transform: translate(-50%, -5px) rotate(45deg);
}
@keyframes dobber { 50% { transform: translateY(-5px); } }

/* Teller: XP, streak en levens */
.stats { display: flex; align-items: center; gap: 16px; flex: none; }
.stat { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 800; line-height: 1; color: var(--kop-tekst); white-space: nowrap; }
.stat-streak .icoon { color: var(--hoofd-donker); }
.vol-icoon { --icoon-maat: 24px; }
.vol-icoon .vol { stroke: var(--middernacht); stroke-width: 1.6; stroke-linejoin: round; }
.stat-xp .vol { fill: var(--kroon); }
.levens { display: inline-flex; align-items: center; gap: 3px; }
.leven .vol-icoon { --icoon-maat: 22px; }
.leven-kroon .vol { fill: var(--kroon); }
.leven-hart .vol { fill: var(--fout); }
.leven.is-leeg .vol { fill: var(--rand-neutraal); stroke: var(--rand-uit); }
html[data-levens="hart"] .leven-kroon, html:not([data-levens="hart"]) .leven-hart,
html[data-levens="hart"] .woord-kroon, html:not([data-levens="hart"]) .woord-hart { display: none; }

/* Voortgangsbalk: pilvorm, vulling via --vul (0 tot 1, gezet via CSSOM) */
.voortgang { position: relative; flex: 1; min-width: 80px; height: 16px; overflow: hidden; background: var(--rand-neutraal); border-radius: 999px; }
.voortgang-vul { position: relative; display: block; height: 100%; width: calc(var(--vul, 0) * 100%); background: var(--hoofd); border-radius: inherit; }
.voortgang-vul::after { content: ""; position: absolute; left: 8px; right: 8px; top: 3px; height: 4px; background: var(--glans); border-radius: 999px; }

/* Lesscherm */
.les-kop { display: flex; align-items: center; gap: 14px; }
.sluitknop { display: grid; place-items: center; width: 44px; height: 44px; flex: none; color: var(--tekst-zacht); border-radius: 12px; }
.sluitknop:hover { background: var(--vlak-zweef); }
.sluitknop .icoon { --icoon-maat: 22px; }
.vraag { display: grid; gap: 18px; margin-block: 28px 22px; }
.vraag-met-mascotte { display: flex; align-items: flex-end; gap: 12px; }
.ballon { position: relative; padding: 14px 18px; background: var(--papier); color: var(--tekst); border: 2px solid var(--rand-neutraal); border-radius: 12px; font-size: 19px; font-weight: 700; line-height: 1.33; }
.ballon::before {
  content: ""; position: absolute; left: -8px; bottom: 22px; width: 14px; height: 14px;
  background: var(--papier); border-left: 2px solid var(--rand-neutraal); border-bottom: 2px solid var(--rand-neutraal);
  transform: rotate(45deg);
}

/* Antwoordkaarten: rust, zweven, geselecteerd, goed, fout, uit */
.antwoorden { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.antwoord {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 12px 16px;
  background: var(--papier); color: var(--tekst);
  border: 2px solid var(--rand-neutraal); border-bottom-width: 4px; border-radius: var(--radius);
  font-size: 17px; font-weight: 700; line-height: 1.3; text-align: left;
  transition: transform var(--snel) ease;
}
.antwoord-nr {
  display: grid; place-items: center; width: 30px; height: 30px; flex: none;
  border: 2px solid var(--rand-neutraal); border-radius: 8px;
  font-size: 13px; font-weight: 800; line-height: 1; color: var(--tekst-zacht);
}
.antwoord-nr .icoon { --icoon-maat: 18px; }
.antwoord.is-zweef { background: var(--vlak-zweef); }
@media (hover: hover) { .antwoord:not(:disabled):hover { background: var(--vlak-zweef); } }
.antwoord:not(:disabled):active, .antwoord.is-actief { transform: translateY(2px); border-bottom-width: 2px; margin-bottom: 2px; }
.antwoord.is-geselecteerd, .antwoord.is-geselecteerd:hover { background: var(--kies-zacht); border-color: var(--kies); }
.antwoord.is-geselecteerd .antwoord-nr { border-color: var(--kies); color: var(--kop-tekst); }
.antwoord.is-goed, .antwoord.is-goed:hover { background: var(--goed-zacht); border-color: var(--goed); color: var(--goed-tekst); }
.antwoord.is-goed .antwoord-nr { border-color: var(--goed); color: var(--goed-tekst); }
.antwoord.is-fout, .antwoord.is-fout:hover { background: var(--fout-zacht); border-color: var(--fout); color: var(--fout-tekst); animation: wiebel 420ms ease 400ms 1; }
.antwoord.is-fout .antwoord-nr { border-color: var(--fout); color: var(--fout-tekst); }
.antwoord:disabled { cursor: default; }
.antwoord:disabled:not(.is-goed):not(.is-fout), .antwoord:disabled:not(.is-goed):not(.is-fout) .antwoord-nr { color: var(--rand-uit); }
@keyframes wiebel { 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }

.lesvoet { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 24px; padding-top: 20px; border-top: 2px solid var(--rand-neutraal); }

/* Feedbackpaneel: goed en fout, met statusknop */
.feedback { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px 18px; margin-top: 16px; padding: 18px 20px; border-radius: var(--radius); }
.feedback-goed { background: var(--goed-zacht); --knop-vlak: var(--goed); --knop-tekst: var(--op-status); --knop-onder: var(--goed-donker); --knop-omlijning: var(--goed); }
.feedback-fout { background: var(--fout-zacht); --knop-vlak: var(--fout); --knop-tekst: var(--op-status); --knop-onder: var(--fout-donker); --knop-omlijning: var(--fout); }
.feedback-kop { display: flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 800; line-height: 1.2; }
.feedback-goed .feedback-kop { color: var(--goed-tekst); }
.feedback-fout .feedback-kop { color: var(--fout-tekst); }
.feedback-teken { display: grid; place-items: center; width: 34px; height: 34px; flex: none; background: var(--papier); border-radius: 50%; }
.feedback-teken .icoon { --icoon-maat: 20px; }
.feedback-uitleg { margin-top: 6px; color: var(--tekst); }
.feedback-antwoord { margin-top: 4px; font-weight: 800; color: var(--fout-tekst); }
.feedback-goed .mascotte { animation: hup 640ms var(--veer) 500ms 2 both; }
@keyframes hup { 40% { transform: translateY(-10px) scale(1.04); } }

/* Toestanden en knoppenproef */
.toestanden { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
.toestand { display: grid; gap: 8px; align-content: start; }
.proefnaam { font-size: 12px; font-weight: 800; line-height: 1.2; letter-spacing: 0.053em; text-transform: uppercase; color: var(--tekst-zacht); }
[data-stemming="poster"] .proefnaam { color: var(--inkt); font-family: var(--font-ui); letter-spacing: var(--spatie-label); }
.knoppenproef { display: grid; gap: 22px; }
.knoppenproef-rij { display: grid; gap: 10px; }
.knoppenproef-lijst { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px 14px; }
.knoppenproef-item { display: grid; justify-items: start; gap: 8px; }

/* Woordchips */
.invul { display: grid; gap: 18px; }
.invul-zin { font-size: 19px; font-weight: 700; line-height: 2.4; color: var(--tekst); }
.gat { display: inline-block; min-width: 76px; padding: 0 6px 4px; border-bottom: 2px solid var(--rand-diep); vertical-align: middle; line-height: 1; }
.woordbank { display: flex; flex-wrap: wrap; gap: 10px; }
.woordchip {
  display: inline-flex; align-items: center; justify-content: center; min-width: 56px; min-height: 48px; padding: 8px 16px;
  background: var(--papier); color: var(--tekst);
  border: 2px solid var(--rand-neutraal); border-bottom-width: 4px; border-radius: var(--radius);
  font-size: 17px; font-weight: 700; line-height: 1.2; transition: transform var(--snel) ease;
}
@media (hover: hover) { button.woordchip:hover { background: var(--vlak-zweef); } }
button.woordchip:active { transform: translateY(2px); border-bottom-width: 2px; margin-bottom: 2px; }
.woordchip.is-gebruikt { background: var(--rand-neutraal); color: transparent; border-color: var(--rand-neutraal); }

/* Mascottes */
.mascottes { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 18px; }
.mascottes figure { display: grid; justify-items: center; gap: 8px; text-align: center; }

/* ---------------------------------------------------------------- speler (quiz.js) */
.speler-start, .speler-einde { display: grid; justify-items: center; gap: 14px; padding: 16px 8px 8px; text-align: center; }
.speler-label { font-size: 13px; font-weight: 800; line-height: 1.23; letter-spacing: var(--spatie-ui); text-transform: uppercase; color: var(--tekst-zacht); }
.speler-doel { max-width: 46ch; }
.speler-meta, .speler-melding { font-size: 13px; font-weight: 800; line-height: 1.23; color: var(--tekst-zacht); }
.speler .woordbank { margin-bottom: 4px; }
.ballon.is-invul { line-height: 2.6; }
.ballon .gat { min-width: 76px; }
.gat .woordchip { min-height: 44px; }
.gat.is-goed .woordchip { background: var(--goed-zacht); border-color: var(--goed); color: var(--goed-tekst); }
.gat.is-fout .woordchip { background: var(--fout-zacht); border-color: var(--fout); color: var(--fout-tekst); animation: wiebel 420ms ease 1; }
.woordchip:disabled { cursor: default; }
.feedback-over { background: var(--kies-zacht); --knop-vlak: var(--kies); --knop-tekst: var(--op-status); --knop-onder: var(--kies-donker); --knop-omlijning: var(--kies); }
.feedback-over .feedback-kop, .feedback-over .feedback-antwoord { color: var(--kop-tekst); }
/* Eén paneel voor goed, fout en overgeslagen: de klasse bepaalt welke kop, welk teken en welke mascotte. */
.feedback .fb-goed, .feedback .fb-fout, .feedback .fb-over { display: none; }
.feedback-goed .fb-goed, .feedback-fout .fb-fout, .feedback-over .fb-over { display: inline-flex; }
.feedback-goed img.fb-goed, .feedback-fout img.fb-fout, .feedback-over img.fb-over { display: block; }
.uitslag { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.uitslag li { display: inline-flex; align-items: center; gap: 10px; padding: 12px 16px; border: 2px solid var(--rand-neutraal); border-bottom-width: 4px; border-radius: var(--radius); font-size: 15px; font-weight: 700; color: var(--tekst); }
.uitslag strong { font-size: 19px; font-weight: 800; color: var(--kop-tekst); }
.uitslag .vol { fill: var(--kroon); }
.uitslag .icoon:not(.vol-icoon) { color: var(--goed-tekst); }
.uitslag-bonus { font-weight: 800; color: var(--goed-tekst); }

/* Stijlvoorbeelden onder de speler: vaste toestanden, niet klikbaar (inert). */
.stijlvoorbeeld-kop { display: grid; gap: 8px; justify-items: start; padding-top: 28px; border-top: 2px solid var(--rand-neutraal); }
.stijlvoorbeelden { display: grid; gap: 48px; }
.feedback-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.feedback-raster .feedback { margin-top: 0; grid-template-columns: auto minmax(0, 1fr); }
.feedback-raster .feedback .knop { grid-column: 1 / -1; justify-self: start; }

/* ---------------------------------------------------------------- vier paletten met legenda */
.paletten-kop { display: grid; gap: 12px; padding-block: 48px 28px; }
.paletsectie { padding-block: 44px 52px; border-top: 2px solid var(--rand-neutraal); }
.paletsectie-kop { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-bottom: 24px; }
.paletsectie-kop h3 { font-family: var(--font-display); font-weight: var(--font-display-gewicht); font-size: 32px; line-height: 1.2; color: var(--kop); }
.paletsectie-kop p { flex: 1 1 280px; }
.legenda { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 24px 32px; margin-bottom: 28px; }
.stalen { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px 10px; align-content: start; }
.staal { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 0 10px; }
.staal-vlak { grid-row: span 2; width: 36px; height: 36px; border: 1px solid var(--grafiet); border-radius: 10px; }
.staal-naam { font-size: 13px; font-weight: 800; line-height: 1.2; color: var(--kop-tekst); }
.staal-hex { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 12px; line-height: 1.3; color: var(--tekst); }
.staal-hoofd { background: var(--hoofd); }
.staal-hoofd-donker { background: var(--hoofd-donker); }
.staal-hoofd-zacht { background: var(--hoofd-zacht); }
.staal-hoofd-tekst { background: var(--hoofd-tekst); }
.staal-tweede { background: var(--tweede); }
.staal-tweede-donker { background: var(--tweede-donker); }
.staal-tweede-tekst { background: var(--tweede-tekst); }
.staal-kroon { background: var(--kroon); }
.staal-band-1 { background: var(--band-1); }
.staal-band-2 { background: var(--band-2); }
.staal-band-3 { background: var(--band-3); }
.staal-sticker-1 { background: var(--sticker-1); }
.staal-sticker-2 { background: var(--sticker-2); }
.staal-sticker-3 { background: var(--sticker-3); }
.staal-sticker-4 { background: var(--sticker-4); }
.staal-sticker-5 { background: var(--sticker-5); }
.staal-sticker-6 { background: var(--sticker-6); }
.staal-accent { background: var(--accent); }
.contrasten { display: grid; gap: 8px; align-content: start; }
.contrast { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 14px; line-height: 1.3; }
.contrast-voorbeeld { display: grid; place-items: center; width: 52px; height: 34px; border: 1px solid var(--grafiet); border-radius: 8px; font-size: 15px; font-weight: 800; }
.contrast-waarde { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--goed-tekst); }
.contrast.is-onvoldoende .contrast-waarde { color: var(--fout-tekst); }
.paar-hoofd { background: var(--hoofd); color: var(--hoofd-tekst); }
.paar-tweede { background: var(--tweede); color: var(--tweede-tekst); }
.paar-poster { background: var(--inkt); color: var(--papier); }
.paar-band-1 { background: var(--band-1); color: var(--inkt); }
.paar-band-2 { background: var(--band-2); color: var(--inkt); }
.paar-band-3 { background: var(--band-3); color: var(--inkt); }
.paar-sticker-1 { background: var(--sticker-1); color: var(--sticker-1-tekst); }
.paar-sticker-2 { background: var(--sticker-2); color: var(--sticker-2-tekst); }
.paar-sticker-3 { background: var(--sticker-3); color: var(--sticker-3-tekst); }
.paar-sticker-4 { background: var(--sticker-4); color: var(--sticker-4-tekst); }
.paar-sticker-5 { background: var(--sticker-5); color: var(--sticker-5-tekst); }
.paar-sticker-6 { background: var(--sticker-6); color: var(--sticker-6-tekst); }

.paletsectie-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.mini { overflow: clip; border: var(--omlijning); border-radius: var(--radius); }
.mini-held { position: relative; display: grid; gap: 14px; justify-items: start; padding: 20px; }
.reuzenwoord-mini { font-size: clamp(48px, 9vw, 104px); }
.mini-held .mascotte { position: absolute; top: 14px; right: 14px; }
.mini-stickers { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mini-stickers .sticker { font-size: 12px; }
.mini-stickers .sticker:nth-child(1) { --draai: -8deg; }
.mini-stickers .sticker:nth-child(2) { --draai: 5deg; margin-left: -8px; }
.mini-stickers .sticker:nth-child(3) { --draai: -3deg; margin-left: -6px; }
.mini-stickers .sticker:nth-child(4) { --draai: 9deg; margin-left: -6px; }
.mini-banden { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: var(--omlijning); }
.mini-band { padding: 12px 14px; font-size: 12px; font-weight: 700; line-height: 1.2; letter-spacing: var(--spatie-label); text-transform: uppercase; }
.mini-rij { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 16px; align-items: start; padding: 20px; }
.mini-rij .fotosticker { width: auto; max-width: none; margin: 0; --draai: -3deg; }
.mini-kennis { display: grid; gap: 18px; align-content: start; padding: 20px; }
.mini-pad { display: flex; align-items: flex-end; justify-content: center; gap: 22px; padding-top: 50px; }
.mini-pad .leerpad-stap:nth-child(n) { translate: none; }
.mini-status { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.mini-kennis .antwoorden { grid-template-columns: 1fr; }

/* ---------------------------------------------------------------- letterproef */
.letterproef { padding-block: var(--sectie-ruimte); border-top: 2px solid var(--rand-neutraal); }
.letters { display: grid; gap: 22px; margin-top: 24px; }
.letter-proef { margin-top: 4px; font-size: clamp(26px, 3.2vw, 40px); line-height: 1.15; color: var(--kop-tekst); overflow-wrap: anywhere; }
.letter-archivo-black { font-family: var(--font-archivo-black); font-weight: 400; }
.letter-archivo-500 { font-family: var(--font-archivo); font-weight: 500; }
.letter-archivo-700 { font-family: var(--font-archivo); font-weight: 700; }
.letter-lilita { font-family: 'Lilita One', var(--font-nunito); font-weight: 400; }
.letter-fredoka-600 { font-family: 'Fredoka', var(--font-nunito); font-weight: 600; }
.letter-fredoka-700 { font-family: 'Fredoka', var(--font-nunito); font-weight: 700; }
.letter-nunito-500 { font-family: var(--font-nunito); font-weight: 500; }
.letter-nunito-700 { font-family: var(--font-nunito); font-weight: 700; }
.letter-nunito-800 { font-family: var(--font-nunito); font-weight: 800; }

/* ---------------------------------------------------------------- ankers van de kopbalk (kleurproef) */
#over, #tijden, #voet, #les-speler { scroll-margin-top: 12px; }

/* ---------------------------------------------------------------- breed: plakkend paneel en plakkende kopbalk */
@media (min-width: 900px) {
  .proefpaneel { position: sticky; top: 0; }
  .kopbalk { position: sticky; top: var(--paneel-hoogte, 0px); }
  .proefblok, .paletsectie, .letterproef { scroll-margin-top: calc(var(--paneel-hoogte, 0px) + 24px); }
  #over, #tijden, #voet { scroll-margin-top: calc(var(--paneel-hoogte, 0px) + 96px); }
  #les-speler { scroll-margin-top: calc(var(--paneel-hoogte, 0px) + 92px); }
}

/* ---------------------------------------------------------------- smaller */
@media (max-width: 1023px) {
  .gr-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .voet-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  /* Smal (ronde 3, punt 7): woordmerk, 18+ en een menuknop in de pil; de vijf tabs plus de 18+-regel
     staan in een uitklappaneel in Slush-stijl onder de pil. */
  .kopbalk-pil { position: relative; padding: 6px 6px 6px 16px; }
  .kopbalk-pil .taalknop { margin-left: auto; }
  .kopbalk-pil .menuknop { display: grid; }
  .menu-paneel {
    position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 2; display: none; gap: 8px; padding: 10px;
    background: var(--papier); color: var(--inkt); border: var(--omlijning); border-radius: var(--radius);
    /* Een kolom op volle breedte (06-10-2026): de grid-kolom was auto en kromp naar de breedste regel. In het
       Nederlands vulde de lange 18+-zin het paneel, in het Engels is die zin kort en werd het menu smal. */
    grid-template-columns: minmax(0, 1fr); justify-content: stretch;
  }
  [data-menu].is-open .menu-paneel { display: grid; }
  .menu-paneel .tabs-lijst { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 6px; overflow: visible; }
  .menu-paneel .tab { width: 100%; min-height: 48px; padding: 0 18px; border: var(--omlijning); font-size: 15px; }
  .menu-18 { display: block; padding: 6px 8px 2px; font-size: 13px; font-weight: 700; line-height: 1.35; letter-spacing: var(--spatie-label); text-transform: uppercase; }
  .kopbalk-rij { flex-wrap: wrap; padding-block: 10px; min-height: 0; }
  .kopbalk-licht .tabs { order: 3; flex-basis: 100%; }
  .kopbalk-licht .stats { margin-left: auto; }
  .kennis-raster { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .feedback-raster { grid-template-columns: minmax(0, 1fr); }
  .tijden-raster { grid-template-columns: minmax(0, 1fr); }
  .legenda { grid-template-columns: minmax(0, 1fr); }
  .paletsectie-raster { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 639px) {
  .gr-raster { grid-template-columns: minmax(0, 1fr); }
  .antwoorden { grid-template-columns: minmax(0, 1fr); }
  .held-woord { padding-block: 54px 46px; }
  .held-woord .sticker { font-size: 11px; }
  .held-woord .sticker-kroon { top: 4px; left: 12%; }
  .held-woord .sticker-krocht { top: 14px; right: 6%; }
  .held-woord .sticker-haarlem { bottom: 8px; left: 8%; }
  .held-woord .sticker-welkom { bottom: 6px; right: 12%; }
  .mini-rij .fotosticker { max-width: 220px; }
  .held-onder { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
  .held-onder .mascotte-groot { height: 96px; }
  .held-intro { font-size: 16px; }
  .fotosticker figcaption { font-size: 11px; padding: 8px 2px 10px; }
  .leerpad-stap:nth-child(2) { translate: 36px 0; }
  .leerpad-stap:nth-child(3) { translate: 56px 0; }
  .leerpad-stap:nth-child(4) { translate: 36px 0; }
  .feedback { grid-template-columns: auto minmax(0, 1fr); }
  .feedback .knop { grid-column: 1 / -1; width: 100%; }
  .feedback .mascotte { height: 48px; }
  .lesvoet .knop { flex: 1 1 140px; }
  .stats { gap: 12px; }
  .mini-rij { grid-template-columns: minmax(0, 1fr); }
  .mini-held .mascotte { height: 48px; }
}
@media (max-width: 479px) {
  .voet-raster { grid-template-columns: minmax(0, 1fr); }
  /* 375 px (06-10-2026): naast het woordmerk passen de taalknop, 18+ en de menuknop alleen zonder extra lucht. */
  .kopbalk-pil { gap: 8px; }
  .taalknop { gap: 4px; padding: 4px 8px; }
}

/* ---------------------------------------------------------------- minder beweging */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
  .marquee-spoor { animation: none !important; }
  .antwoord.is-fout, .gat.is-fout .woordchip, .feedback .mascotte, .knoop-start { animation: none !important; }
  .marquee-knop { display: none; }
}

/* =====================================================================================
   HOMEPAGE: stemming promo (Design Loop 05-10-2026). Lat: v2/bar.md (Duolingo).
   Wit canvas, twee kolommen die van kant wisselen, koppen 48px in de merkkleur, tekst 17/24,
   knoppen 50px. Illustraties (koning en gefacetteerde voorwerpen) zijn inhoud: geen kader,
   geen vlak erachter. Beweging alleen via transform en opacity (knoppen: filter), en alles
   staat stil bij prefers-reduced-motion (onderaan dit blok).
   ===================================================================================== */
.promo-binnen { width: min(100% - 2 * var(--goot), var(--inhoud-promo)); margin-inline: auto; }
[data-stemming="promo"] .knop {
  min-height: var(--knop-hoogte); gap: 10px;
  transition: filter var(--zweef-duur) ease;
}
[data-stemming="promo"] .knop-spook { --knop-rand: 2px; }
@media (hover: hover) {
  [data-stemming="promo"] .knop:hover { background: var(--knop-vlak); filter: brightness(1.1); }
}
[data-stemming="promo"] .knop:active { transform: translateY(var(--knop-indruk)); }
.knop-stapel { display: grid; gap: 12px; width: min(100%, 330px); }
.knop-stapel .knop { width: 100%; }
.sectiekop {
  font-family: var(--font-display); font-weight: var(--font-display-gewicht);
  font-size: clamp(32px, 4.2vw, 48px); line-height: 1.1; letter-spacing: var(--display-spatie);
  color: var(--kop-merk); text-wrap: balance;
}
.lopend { font-size: 17px; line-height: 24px; font-weight: 500; color: var(--tekst-zacht); text-wrap: pretty; }
.kopblok-midden { display: grid; justify-items: center; gap: 16px; max-width: 40rem; margin-inline: auto; text-align: center; }
[data-stemming="promo"] .sticker { border-radius: 999px; font-size: 15px; }
[data-stemming="promo"] .sticker-hoekig { border-radius: var(--radius-sticker); }

/* ---------------------------------------------------------------- kopbalk: wit, plakkend, 2px onderrand */
.kopbalk-promo { position: sticky; top: 0; z-index: 40; background: var(--papier); border-bottom: 2px solid var(--rand-neutraal); }
.kopbalk-promo-rij { display: flex; align-items: center; gap: 12px 20px; min-height: 70px; width: min(100% - 2 * var(--goot), var(--inhoud-max)); margin-inline: auto; }
.merk-promo { display: inline-flex; align-items: center; gap: 10px; flex: none; color: var(--inkt); text-decoration: none; }
.merk-promo .icoon { --icoon-maat: 32px; }
.merk-promo-tekst { font-family: var(--font-archivo-black); font-size: 26px; line-height: 1; letter-spacing: 0.02em; text-transform: uppercase; }
.kopbalk-promo .tabs { flex: 1; }
.kopbalk-promo .tabs-lijst { justify-content: center; gap: 2px; }
.kopbalk-promo .tab {
  position: relative; min-height: 44px; padding: 0 12px; border: 0; border-radius: 12px;
  font-family: var(--font-archivo); font-size: 15px; font-weight: 700; letter-spacing: var(--spatie-ui);
  text-transform: uppercase; color: var(--tekst-zacht);
}
.kopbalk-promo a.tab:hover { background: var(--vlak-zweef); color: var(--tekst); }
.kopbalk-promo .tab[aria-current="page"] { color: var(--tekst); }
.kopbalk-promo .tab[aria-current="page"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 5px; height: 3px; border-radius: 2px; background: var(--hoofd); }
.pil-18 {
  display: inline-grid; place-items: center; flex: none; min-width: 52px; height: 36px; padding: 0 12px;
  border: 2px solid var(--rand-neutraal); border-radius: 999px;
  font-size: 15px; font-weight: 700; line-height: 1; color: var(--tekst);
}
.menuknop { display: none; place-items: center; width: 44px; height: 44px; flex: none; color: var(--tekst); border-radius: 12px; }
.menuknop .icoon { --icoon-maat: 24px; }
.menuknop .icoon-sluit, .kopbalk-promo.is-open .menuknop .icoon-menu, [data-menu].is-open .menuknop .icoon-menu { display: none; }
.kopbalk-promo.is-open .menuknop .icoon-sluit, [data-menu].is-open .menuknop .icoon-sluit { display: block; }

/* ---------------------------------------------------------------- hero (lat 7): koning links, tekst rechts, veel lucht */
.held-promo { background: var(--band-1); overflow: clip; scroll-margin-top: 72px; }
.held-promo-raster {
  display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); align-items: center; gap: 24px 56px;
  width: min(100% - 2 * var(--goot), 1080px); margin-inline: auto;
  min-height: clamp(560px, calc(100svh - 72px), 800px); padding-block: 32px;
}
.held-beeld { position: relative; width: min(100%, 560px); aspect-ratio: 1 / 1; justify-self: center; }
.held-tekst { display: grid; gap: 24px; justify-items: start; }
.held-kop { font-family: var(--font-display); font-weight: var(--font-display-gewicht); font-size: clamp(28px, 2.9vw, 36px); line-height: 1.2; letter-spacing: -0.01em; color: var(--tekst); text-wrap: balance; }
.held-alinea { max-width: 26em; font-size: 17px; line-height: 24px; color: var(--tekst-op-band); text-wrap: pretty; }
.sticker-held { position: absolute; right: 4%; bottom: 9%; z-index: 3; rotate: -7deg; background: var(--papier); }

/* ---------------------------------------------------------------- koning (render of video) en zwevende voorwerpen */
/* Flex in plaats van grid: dan lost height: 100% van de render op tegen de vaste hoogte van het vak. */
.koning { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; pointer-events: none; }
.koning-beeld { width: auto; height: 100%; max-width: none; transform-origin: 50% 100%; animation: wieg 5.2s ease-in-out infinite; }
.koning-video { width: 100%; height: 100%; object-fit: contain; }
.koning-spiegel { transform: scaleX(-1); }
.koning-held { inset: 2% 0 0; }
.koning-held .koning-beeld {
  animation-name: koning-entree, wieg; animation-duration: 700ms, 5.2s;
  animation-timing-function: var(--veer), ease-in-out; animation-delay: 0ms, 700ms;
  animation-iteration-count: 1, infinite; animation-fill-mode: backwards, none;
}
.koning-rij { inset: 4% 0 0; }
.koning-rij .koning-beeld { animation-duration: 6s; }
.zweef { position: absolute; z-index: 2; transform: translate3d(0, var(--parallax, 0px), 0); pointer-events: none; }
.zweef-beeld { width: 100%; height: auto; animation: zweef var(--duur, 6s) ease-in-out var(--fase, 0s) infinite; }
@keyframes wieg {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-6px) rotate(-1.5deg); }
  50% { transform: translateY(0) rotate(0deg); }
  75% { transform: translateY(-6px) rotate(1.5deg); }
}
@keyframes koning-entree { from { opacity: 0; transform: translateY(24px) scale(0.94); } }
@keyframes zweef {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(var(--draai-a, -4deg)); }
  50% { transform: translate3d(var(--zweef-x, 0px), var(--zweef-y, -14px), 0) rotate(var(--draai-b, 4deg)); }
}

/* Hero: kroon, ster en muntje om de koning */
.zw-held-kroon { left: -1%; top: 3%; width: 19%; --duur: 6.4s; --fase: -1.2s; --draai-a: -16deg; --draai-b: -8deg; --zweef-y: -16px; }
.zw-held-ster { right: 3%; top: 16%; width: 16%; --duur: 4.8s; --fase: -3s; --draai-a: 6deg; --draai-b: 16deg; --zweef-y: -12px; }
.zw-held-munt { left: 7%; bottom: 16%; width: 13%; --duur: 5.6s; --fase: -0.4s; --draai-a: -8deg; --draai-b: 6deg; --zweef-y: -10px; --zweef-x: 4px; }

/* ---------------------------------------------------------------- secties (lat 1 en 2): twee kolommen, wisselend, geen kaders */
.rij { scroll-margin-top: 72px; }
.rij-binnen {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 32px 56px;
  width: min(100% - 2 * var(--goot), var(--inhoud-promo)); margin-inline: auto; min-height: 530px; padding-block: 35px;
}
.rij-omgekeerd .rij-beeld { order: 2; }
.rij-beeld { position: relative; height: 460px; }
.rij-tekst { display: grid; gap: 16px; align-content: center; max-width: 31rem; }
.rij-omgekeerd .rij-tekst { justify-self: end; }
.zw-r1-pin { left: 2%; top: 10%; width: 17%; --duur: 5.4s; --fase: -2s; --draai-a: -8deg; --draai-b: 4deg; --zweef-y: -14px; }
.zw-r1-ster { right: 4%; top: 4%; width: 15%; --duur: 7.2s; --fase: -4.4s; --draai-a: 8deg; --draai-b: -6deg; }
.zw-r2-steen { left: 6%; top: 6%; width: 15%; --duur: 6.2s; --fase: -1s; --draai-a: -12deg; --draai-b: 6deg; --zweef-y: -18px; }
.zw-r2-munt { right: 6%; top: 30%; width: 14%; --duur: 4.6s; --fase: -2.6s; --draai-a: 10deg; --draai-b: -6deg; }
.zw-r3-pas { left: 0; bottom: 18%; width: 28%; --duur: 7.6s; --fase: -3.2s; --draai-a: -9deg; --draai-b: -3deg; --zweef-y: -12px; }
.zw-r3-lamp { right: 6%; top: 2%; width: 14%; --duur: 5s; --fase: -0.8s; --draai-a: 8deg; --draai-b: 14deg; --zweef-y: -10px; }

/* ---------------------------------------------------------------- vier kaarten: waarom Empire */
.kaarten-sectie { padding-block: 64px 72px; scroll-margin-top: 72px; }
.kaarten4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 40px; }
.kaart4 {
  display: grid; justify-items: start; align-content: start; gap: 12px; height: 100%;
  padding: 24px 22px 26px; background: var(--papier); color: var(--tekst-zacht); text-decoration: none;
  border: 2px solid var(--rand-neutraal); border-bottom-width: 4px; border-radius: var(--radius);
  transition: background-color var(--zweef-duur) ease, border-color var(--zweef-duur) ease;
}
.kaart4-icoon { display: flex; align-items: flex-end; height: 76px; }
.kaart4-beeld { width: auto; height: 100%; max-width: 104px; object-fit: contain; }
.kaart4-titel { font-family: var(--font-display); font-weight: var(--font-display-gewicht); font-size: 21px; line-height: 1.2; color: var(--kop-merk); }
.kaart4-tekst { font-size: 17px; line-height: 24px; }
@media (hover: hover) {
  .kaart4:hover { background: var(--vlak-zweef); border-bottom-color: var(--hoofd); }
}
.kaart4:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

/* ---------------------------------------------------------------- scene "leer hoe het zit" (lat 5): volle breedte, tekst boven de scene
   Ronde 2: drie echte lagen (achter klein, doorzichtig, vaag en traag; voor groot en snel) en een
   echte duik: de koning zit geknipt op het scherm van de grote telefoon, groeit, breekt door het
   glas (de knip groeit mee) en zweeft even voor de telefoon voordat hij terugduikt. */
/* Ronde 3 (Kerim, punt 1): geen overflow-knip meer op de scene of het toneel. Alles staat binnen de band,
   ook de koning op zijn verste punt; alleen de koning achter het glas is geknipt (op het scherm). */
.scene { background: var(--lucht); padding-top: 80px; scroll-margin-top: 72px; }
.scene-kopblok { display: grid; justify-items: center; gap: 32px; width: min(100% - 2 * var(--goot), 920px); margin-inline: auto; text-align: center; }
.scene-kop { font-family: var(--font-display); font-weight: var(--font-display-gewicht); font-size: clamp(36px, 5vw, 64px); line-height: 1.08; letter-spacing: -0.015em; color: var(--kop-tekst); text-wrap: balance; }
/* Ronde 4 (craft C): het toneel is zo breed als de band. De voorwerpen staan in twee lagen die alleen
   horizontaal knippen (overflow-x: clip), op de rand van de band, zodat ze er bewust half overheen lopen
   zonder dat de pagina breder wordt. De duik zit in geen van die lagen: de koning ervoor heeft geen enkele
   knippende ouder (Kerim, ronde 3). Compacter na ronde 4 (Kerim 05-10): 640 px hoog op 1280 in plaats van
   922 (band 902 in plaats van 1271), voorwerpen even groot maar dichter op elkaar en onder de knop; smal
   440 px. De koning vliegt daarom minder hoog (--duik-ver-y) en blijft op zijn verste punt onder de knop. */
.scene-toneel { position: relative; width: 100%; height: clamp(420px, 50vw, 660px); margin: 0; }
.toneel-laag { position: absolute; inset: 0; overflow-x: clip; pointer-events: none; }
.toneel-laag-achter { z-index: 1; }
.toneel-laag-voor { z-index: 3; }

/* Lagen: schaal, dekking en vaagte staan vast; de zweefloop en de parallax komen erbovenop. */
.scene-toneel .zweef { transform-origin: 50% 50%; }
.laag-achter { z-index: 0; scale: var(--laag-achter-schaal); opacity: var(--laag-achter-dekking); filter: blur(var(--laag-achter-vaag)); }
.laag-midden { z-index: 1; scale: var(--laag-midden-schaal); opacity: var(--laag-midden-dekking); }
.laag-voor { z-index: 3; scale: var(--laag-voor-schaal); opacity: var(--laag-voor-dekking); }
/* Zweven (ronde 3, punt 8): op en neer en een kanteling, met een eigen tempo per voorwerp (achter 9 tot 11 s,
   midden 6 tot 8 s, voor 4 tot 6 s) en een eigen fase. De kanteling loopt 1,3 keer zo traag, zodat de baan
   nooit precies herhaalt. Zichtbaar: 10 tot 16 px op en neer (de laag-schaal zit er al in) en 3 tot 5 graden. */
.scene-toneel .zweef-beeld {
  animation: drijf var(--duur, 6s) ease-in-out var(--fase, 0s) infinite,
             kantel calc(var(--duur, 6s) * 1.3) ease-in-out var(--fase, 0s) infinite;
}
@keyframes drijf { 0%, 100% { translate: 0 0; } 50% { translate: var(--zweef-x, 0px) calc(-1 * var(--amp, 14px)); } }
@keyframes kantel { 0%, 100% { rotate: var(--draai-a, -2deg); } 50% { rotate: var(--draai-b, 2deg); } }
.laag-achter .zweef-beeld { --amp: var(--amp-achter); }
.laag-midden .zweef-beeld { --amp: var(--amp-midden); }
.laag-voor .zweef-beeld { --amp: var(--amp-voor); }
/* Maten (ronde 4) op 1280 na de laagschaal: achter 80 tot 120 px, midden 130 tot 190 px, voor 100 tot 270 px
   (de twee voortelefoons 230 en 269 px). De breedte hieronder is vóór de schaal (achter x 0,6, midden x 0,8). */
/* Achter (9 tot 11 s) */
.zw-s1 { width: clamp(150px, 15.6vw, 200px); top: 9%; --duur: 10.4s; --fase: -2.1s; --zweef-x: 8px; --draai-a: -3deg; --draai-b: 1deg; }
.zw-s2 { left: 20%; top: 3%; width: clamp(110px, 11vw, 140px); --duur: 9.2s; --fase: -5.3s; --zweef-x: -6px; --draai-a: -2deg; --draai-b: 2.5deg; }
.zw-s3 { left: 47%; top: 6%; width: clamp(104px, 10.4vw, 133px); --duur: 10.9s; --fase: -7.8s; --zweef-x: 5px; --draai-a: -4deg; --draai-b: 0deg; }
.zw-s4 { right: 25%; top: 2%; width: clamp(118px, 11.7vw, 150px); --duur: 9.7s; --fase: -1.2s; --zweef-x: -5px; --draai-a: 2deg; --draai-b: -2deg; }
.zw-s5 { left: 5%; top: 24%; width: clamp(126px, 12.5vw, 160px); --duur: 10.1s; --fase: -4.4s; --zweef-x: -8px; --draai-a: 2deg; --draai-b: -2.5deg; }
/* Midden (6 tot 8 s) */
.zw-s6 { top: 44%; width: clamp(176px, 17.5vw, 225px); --duur: 7.3s; --fase: -3.4s; --zweef-x: 10px; --draai-a: -3deg; --draai-b: 2deg; }
.zw-s7 { left: 20%; bottom: 17%; width: clamp(156px, 15.6vw, 200px); --duur: 6.4s; --fase: -1.9s; --zweef-x: -6px; --draai-a: -2deg; --draai-b: 2.5deg; }
.zw-s8 { right: 8%; top: 4%; width: clamp(136px, 13.7vw, 175px); --duur: 7.8s; --fase: -5.1s; --zweef-x: 6px; --draai-a: 3deg; --draai-b: -1.5deg; }
.zw-s9 { right: 5%; bottom: 25%; width: clamp(166px, 16.6vw, 212px); --duur: 6.9s; --fase: -2.7s; --zweef-x: -8px; --draai-a: -2.5deg; --draai-b: 2deg; }
.zw-s14 { left: 14%; top: 33%; width: clamp(166px, 16.6vw, 212px); --duur: 7.6s; --fase: -0.8s; --zweef-x: 7px; --draai-a: 2deg; --draai-b: -2.5deg; }
/* Voor (4 tot 6 s) */
.zw-s10 { bottom: 5%; width: clamp(214px, 21vw, 270px); --duur: 5.3s; --fase: -2.8s; --zweef-x: 8px; --draai-a: -2deg; --draai-b: 2.5deg; }
.zw-s11 { left: 28%; top: 20%; width: clamp(78px, 7.8vw, 100px); --duur: 4.4s; --fase: -0.7s; --zweef-x: -6px; --draai-a: 3deg; --draai-b: -2deg; }
.zw-s12 { left: 22.5%; bottom: 3%; width: clamp(118px, 11.7vw, 150px); --duur: 5.8s; --fase: -3.9s; --zweef-x: 6px; --draai-a: -3deg; --draai-b: 1.5deg; }
.zw-s13 { top: 47%; width: clamp(86px, 8.6vw, 110px); --duur: 4.9s; --fase: -1.6s; --zweef-x: -7px; --draai-a: 2.5deg; --draai-b: -2deg; }
.zw-s15 { right: 11%; bottom: 2%; width: clamp(184px, 18vw, 230px); --duur: 5.6s; --fase: -4.2s; --zweef-x: -6px; --draai-a: 2deg; --draai-b: -2.5deg; }
/* Vier voorwerpen lopen half over de rand: achter telefoon-c (rechts), midden het vliegtuig (links), voor
   telefoon-a (links) en het muntje (rechts). */
.zw-s1 { right: 0; translate: 50% 0; }
.zw-s6, .zw-s10 { left: 0; translate: -50% 0; }
.zw-s13 { right: 0; translate: 50% 0; }

/* De duik (ronde 3, punt 1, 2 en 11). De grote telefoon staat horizontaal in het midden van de band. Twee
   kopieën van de koning volgen dezelfde baan (zelfde keyframes en duur, dezelfde start): de kopie achter het
   glas is geknipt op het scherm (de polygon uit telefoon-groot.json, bouw_v2.py controleert hem) en ligt onder
   de glans; de kopie ervoor wordt nooit geknipt en geen enkele ouder knipt (geen overflow, geen clip-path).
   Ze wisselen in één stap (step-end) op 30% en 80%: dan past de koning (schaal 0,34) helemaal binnen het
   scherm, dus de geknipte en de ongeknipte kopie zijn daar pixel voor pixel gelijk. Eind = begin, zonder fade.
   Rust en minder beweging: de kopie ervoor op het verste punt. */
.duik { position: absolute; left: 50%; bottom: 2%; z-index: 2; width: clamp(240px, 31.25vw, 400px); aspect-ratio: 197 / 298; translate: -50% 0; }
.duik-telefoon, .duik-glas { position: absolute; inset: 0; width: 100%; height: 100%; }
.duik-laag { position: absolute; inset: 0; pointer-events: none; }
.duik-voor { z-index: 2; }  /* boven de glasscherven (z-index 1): de koning ervoor ligt altijd vooraan */
.duik-achter { clip-path: polygon(13.89% 16%, 63.25% 14.62%, 69.21% 17.99%, 85.14% 84.61%, 80.86% 88.27%, 31.51% 89.66%, 25.54% 86.28%, 9.62% 19.67%); }
.duik-koning {
  position: absolute; left: 47.4%; top: 52.1%; width: var(--duik-koning-breed); height: auto; max-width: none;
  translate: -50% -50%; transform-origin: 50% 50%;
  transform: translate(var(--duik-ver-x), var(--duik-ver-y)) scale(1) rotate(-4deg);
}
.duik-achter .duik-koning { opacity: 0; animation: duik-vlucht var(--duik-duur) ease-in-out infinite, duik-zicht-achter var(--duik-duur) step-end infinite; }
.duik-voor .duik-koning { opacity: 1; animation: duik-vlucht var(--duik-duur) ease-in-out infinite, duik-zicht-voor var(--duik-duur) step-end infinite; }
@keyframes duik-vlucht {
  0%, 100% { transform: translate(-3%, 3%) scale(0.24) rotate(-6deg); }
  15% { transform: translate(-1.5%, 1.5%) scale(0.28) rotate(-2deg); }
  30% { transform: translate(0%, 0%) scale(0.34) rotate(0deg); animation-timing-function: cubic-bezier(0.25, 0.7, 0.35, 1); }
  46% { transform: translate(var(--duik-ver-x), var(--duik-ver-y)) scale(1) rotate(-4deg); }
  56% { transform: translate(calc(var(--duik-ver-x) + 1.5%), calc(var(--duik-ver-y) - 3%)) scale(1.03) rotate(-2.5deg); }
  66% { transform: translate(var(--duik-ver-x), var(--duik-ver-y)) scale(1) rotate(-4deg); }
  80% { transform: translate(0%, 0%) scale(0.34) rotate(0deg); }
  90% { transform: translate(-2%, 2%) scale(0.27) rotate(-4deg); }
}
@keyframes duik-zicht-achter { 0% { opacity: 1; } 30% { opacity: 0; } 80% { opacity: 1; } 100% { opacity: 1; } }
@keyframes duik-zicht-voor { 0% { opacity: 0; } 30% { opacity: 1; } 80% { opacity: 0; } 100% { opacity: 0; } }
/* Glasscherven (ronde 4): onzichtbaar (schaal 0) tot het moment van doorbreken, dan springen ze uit de rand
   van het scherm, drijven af en krimpen weer tot niets terwijl de koning terugduikt (80%). Geen fade: alleen
   schaal en plek. Maat en sprong in procenten, zodat ze meeschalen met de telefoon. Minder beweging: de
   scherven staan stil op hun sprongplek, net als de koning buiten. */
.scherf { position: absolute; z-index: 1; width: var(--b, 10%); pointer-events: none; }
.scherf img {
  width: 100%; height: auto;
  transform: translate(var(--sx, 100%), var(--sy, -100%)) rotate(calc(var(--sd, 0deg) + 40deg)) scale(1);
  animation: scherf var(--duik-duur) linear infinite;
}
@keyframes scherf {
  0%, 31% { transform: translate(0, 0) rotate(var(--sd, 0deg)) scale(0); animation-timing-function: cubic-bezier(0.2, 0.8, 0.3, 1); }
  38% { transform: translate(var(--sx, 100%), var(--sy, -100%)) rotate(calc(var(--sd, 0deg) + 40deg)) scale(1); animation-timing-function: ease-in-out; }
  68% { transform: translate(calc(var(--sx, 100%) * 1.2), calc(var(--sy, -100%) * 1.2)) rotate(calc(var(--sd, 0deg) + 60deg)) scale(1); animation-timing-function: ease-in; }
  80%, 100% { transform: translate(0, 0) rotate(var(--sd, 0deg)) scale(0); }
}
/* Compacte scene (05-10): de twee scherven die omhoog springen gaan minder hoog, zodat ze onder de knop blijven. */
.scherf-1 { left: 64%; top: 6%; --b: 14%; --sx: 130%; --sy: -55%; --sd: -10deg; }
.scherf-2 { left: 84%; top: 20%; --b: 11%; --sx: 200%; --sy: -70%; --sd: 20deg; }
.scherf-3 { left: 88%; top: 42%; --b: 13.5%; --sx: 150%; --sy: 30%; --sd: 50deg; }
.scherf-4 { left: 46%; top: 1%; --b: 10.5%; --sx: 150%; --sy: -12%; --sd: -30deg; }
.scherf-5 { left: 80%; top: 64%; --b: 9%; --sx: 180%; --sy: 140%; --sd: 15deg; }

/* ---------------------------------------------------------------- fotoband: vier echte foto's als stickers */
.fotoband-promo { padding-block: 72px 64px; overflow: clip; scroll-margin-top: 72px; }
.fotostrook { position: relative; display: flex; justify-content: center; align-items: flex-start; width: min(100% - 2 * var(--goot), 1080px); margin: 40px auto 0; }
.foto4 {
  position: relative; width: 25%; max-width: 260px; padding: 8px 8px 0; background: var(--papier);
  border: 2px solid var(--rand-neutraal); border-bottom-width: 4px; border-radius: var(--radius);
  transform: rotate(var(--draai, 0deg)); transition: background-color var(--zweef-duur) ease, border-color var(--zweef-duur) ease;
}
.foto4 + .foto4 { margin-left: -1.2%; }
.foto4:nth-child(1) { --draai: -5deg; margin-top: 14px; }
.foto4:nth-child(2) { --draai: 3deg; margin-top: 40px; z-index: 1; }
.foto4:nth-child(3) { --draai: -2deg; }
.foto4:nth-child(4) { --draai: 4deg; margin-top: 28px; }
.foto4 img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 10px; }
.foto4 figcaption { padding: 10px 4px 12px; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: var(--spatie-label); text-transform: uppercase; color: var(--tekst); }
@media (hover: hover) { .foto4:hover { background: var(--vlak-zweef); border-color: var(--rand-diep); } }
.foto-gevel-dag { object-position: 50% 30%; }
.foto-gevel-avond { object-position: 50% 30%; }
.foto-binnen { object-position: 40% 40%; }
.foto-straat { object-position: 50% 40%; }
.sticker-foto { position: absolute; left: 1%; top: -10px; z-index: 3; rotate: -8deg; }

/* ---------------------------------------------------------------- Google-reviews (gouden standaard) in promo */
.reviews-promo { padding-block: 64px 72px; scroll-margin-top: 72px; }
.reviews-promo .gr-raster { gap: 20px; margin-top: 40px; }
[data-stemming="promo"] .gr { gap: 12px; color: var(--tekst); border-bottom-width: 4px; }
[data-stemming="promo"] .gr-sterren { font-size: 17px; letter-spacing: 2px; color: var(--kroon); -webkit-text-stroke: 1px var(--hoofd-donker); }
[data-stemming="promo"] .gr-tekst { font-size: 17px; line-height: 24px; }
[data-stemming="promo"] .gr-naam { font-size: 17px; }
[data-stemming="promo"] .gr-bron { font-size: 15px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--tekst-zacht); }
.knoprij-midden { justify-content: center; margin-top: 32px; }
.bronregel-promo { margin-top: 16px; font-size: 15px; text-align: center; color: var(--tekst-zacht); }

/* ---------------------------------------------------------------- bezoek: route en openingstijden */
.bezoek .rij-tekst { justify-self: start; }
.tijden-blok { display: grid; gap: 16px; }
.tijden-promo { width: 100%; font-size: 17px; line-height: 24px; color: var(--tekst); }
.tijden-promo th, .tijden-promo td { padding: 12px 0; border-bottom: 2px solid var(--rand-neutraal); text-align: left; vertical-align: middle; }
.tijden-promo th { font-weight: 500; }
.tijden-promo td { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tijden-promo tr.is-vandaag th, .tijden-promo tr.is-vandaag td { color: var(--kop-tekst); font-weight: 700; }
.tijden-promo .vandaag-tag { margin-left: 10px; padding: 4px 10px; border: 0; background: var(--hoofd-zacht); color: var(--kop-tekst); border-radius: 999px; font-size: 15px; letter-spacing: 0; text-transform: none; }
.tijden-noot-promo { font-size: 17px; line-height: 24px; font-weight: 700; color: var(--tekst); }

/* ---------------------------------------------------------------- voet: donker, met een kleine lopende band */
.voet-promo { background: var(--middernacht); color: var(--papier); }
.voet-promo .marquee { background: transparent; border-bottom: 2px solid var(--voet-lijn); }
.voet-promo .marquee-groep { padding-block: 12px; font-size: 15px; gap: 24px; }
.voet-promo .marquee-groep .icoon { --icoon-maat: 18px; }
.voet-promo .marquee-knop { background: var(--middernacht); border-color: var(--voet-lijn); }
.voet-promo-raster { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 28px; padding-block: 48px 32px; }
.voet-promo p { font-size: 15px; line-height: 22px; color: var(--voet-zacht); }
.voet-promo p + p { margin-top: 6px; }
.voet-promo a { color: var(--papier); text-decoration: underline; text-underline-offset: 3px; }
.voet-promo .voet-promo-merk { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-family: var(--font-archivo-black); font-size: 26px; line-height: 1; letter-spacing: 0.02em; text-transform: uppercase; color: var(--papier); }
.voet-promo-merk .icoon { --icoon-maat: 28px; color: var(--kroon); }
.voet-promo .voet-promo-kop { margin-bottom: 8px; font-weight: 700; letter-spacing: var(--spatie-label); text-transform: uppercase; color: var(--kroon); }
.voet-promo-onder { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; padding-block: 18px 28px; border-top: 2px solid var(--voet-lijn); }
.voet-promo-onder p + p { margin-top: 0; }

/* ---------------------------------------------------------------- 18+-poort: zachte schaal-in */
.poort { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; overflow-y: auto; background: var(--band-1); }
html.poort-ok .poort { display: none; }
html:not(.poort-ok) body.met-poort { overflow: hidden; }
.poort-kaart {
  display: grid; justify-items: center; gap: 16px; width: min(100%, 440px); padding: 28px 28px 30px;
  background: var(--papier); border: 2px solid var(--rand-neutraal); border-bottom-width: 4px; border-radius: var(--radius);
  text-align: center; animation: poort-in 480ms var(--veer) both;
}
.poort-kaart .koning { position: relative; inset: auto; display: block; height: 132px; }
.poort-kaart .koning-beeld { height: 132px; margin-inline: auto; }
.poort-kop { font-family: var(--font-display); font-weight: var(--font-display-gewicht); font-size: 32px; line-height: 1.2; letter-spacing: -0.01em; color: var(--tekst); text-wrap: balance; }
.poort-tekst { font-size: 17px; line-height: 24px; color: var(--tekst-zacht); }
.poort .knop-stapel { width: 100%; margin-top: 8px; }
@keyframes poort-in { from { opacity: 0; transform: scale(0.94); } }

/* ---------------------------------------------------------------- scroll-onthulling (lat 4, Kerims punt 1)
   Alleen als scripts draaien en beweging mag; beweging.js zet .in op de sectie zodra die in beeld
   komt. Zonder script of bij minder beweging staat alles meteen zichtbaar. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  [data-onthul] .onthul { opacity: 0; transform: translateY(var(--onthul-afstand)); }
  [data-onthul].in .onthul {
    opacity: 1; transform: none;
    transition: opacity var(--onthul-duur) ease-out, transform var(--onthul-duur) ease-out;
    transition-delay: var(--stap, 0ms);
  }
}
.onthul-2 { --stap: var(--onthul-stap); }
.onthul-3 { --stap: calc(2 * var(--onthul-stap)); }

/* ---------------------------------------------------------------- homepage: smaller */
@media (max-width: 1023px) {
  .kaarten4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .voet-promo-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  .kopbalk-promo-rij { min-height: 62px; }
  .kopbalk-promo .tabs { position: absolute; left: 0; right: 0; top: 100%; display: none; padding: 8px var(--goot) 16px; background: var(--papier); border-bottom: 2px solid var(--rand-neutraal); }
  .kopbalk-promo.is-open .tabs { display: block; }
  .kopbalk-promo .tabs-lijst { flex-direction: column; align-items: stretch; gap: 4px; overflow: visible; }
  .kopbalk-promo .tab { width: 100%; }
  .kopbalk-promo .tab[aria-current="page"]::after { left: 12px; right: auto; width: 32px; }
  .pil-18 { margin-left: auto; }
  .menuknop { display: grid; }
  .held-promo-raster { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-block: 16px 48px; gap: 8px; }
  .held-beeld { width: min(100%, 360px); }
  .held-tekst { justify-items: center; text-align: center; }
  .held-alinea { margin-inline: auto; }
  .rij-binnen { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 16px; padding-block: 40px; }
  .rij-omgekeerd .rij-beeld { order: 0; }
  .rij-beeld { width: min(100%, 420px); height: clamp(280px, 78vw, 400px); justify-self: center; }
  .rij-tekst, .rij-omgekeerd .rij-tekst { justify-self: center; justify-items: center; text-align: center; }
  .bezoek .rij-tekst { justify-items: start; text-align: left; justify-self: stretch; }
  .fotostrook { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; }
  .foto4, .foto4 + .foto4 { width: auto; max-width: none; margin: 0; }
  .foto4:nth-child(2), .foto4:nth-child(4) { margin-top: 18px; }
}
@media (max-width: 639px) {
  .kaarten4 { gap: 12px; }
  .kaart4 { padding: 18px 14px 20px; }
  .kaart4-icoon { height: 60px; }
  .kaart4-titel { font-size: 19px; }
  .kaart4-tekst { font-size: 15px; line-height: 22px; }
  .scene { padding-top: 56px; }
  .scene-kopblok { gap: 24px; }
  .voet-promo-raster { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-block: 36px 24px; }
  .sticker-held { right: 0; bottom: 4%; }
  .sticker-foto { top: -14px; }
}

/* =====================================================================================
   HOMEPAGE IN SLUSH-STIJL: stemming poster plus beweging (besluit Kerim 05-10, avond).
   De componenten van de kleurproef (pilbalk, reuzenwoord met lint, stickers, pilknoppen,
   fotostickers, witte reviewkaarten, openingstijdenkaart) plus de beweging uit de Design Loop:
   idle-loops, scroll-onthulling, hover (300 ms, alleen lichter), parallax en de telefoonscene.
   ===================================================================================== */
[data-stemming="poster"] .knop { transition: background-color var(--zweef-duur) ease, transform var(--snel) ease; }

/* Kopbalk: de witte pil zweeft boven de hero (breed); smal staat hij op de crème band. */
.kopbalk-home { background: var(--band-1); }
@media (min-width: 900px) {
  .kopbalk-home { background: transparent; margin-bottom: -76px; }
  .held-home { padding-top: 84px; }
}
/* Ronde 4 (craft B): de hero compacter, zodat beide heroknoppen op 1280 x 800 en 1366 x 768 ruim boven de
   vouw eindigen: minder lucht rond het reuzenwoord, het woord iets kleiner, de tag en de bovenste stickers
   op één hoogte (de stickers staan naast de tag, nooit over de letters). */
.held-home .held-binnen { gap: 10px; }
@media (min-width: 640px) {
  .held-home .held-woord { padding-block: clamp(40px, 4.4vw, 60px) clamp(48px, 4.6vw, 62px); }
  .held-home .reuzenwoord { font-size: clamp(56px, 18.5vw, 250px); }
  .held-home .held-woord .sticker-kroon { top: -36px; }
  .held-home .held-woord .sticker-krocht { top: -30px; }
  .held-home .held-woord .sticker-haarlem { bottom: 2px; }
  .held-home .held-woord .sticker-welkom { bottom: 0; }
}

/* De stickers blijven van de letters af (0 px overlap, gemeten met dezelfde methode als in ronde 4): de lucht
   boven en onder het woord blijft ruim, de winst zit in een iets lager woord (hooguit 29vh). */
@media (min-width: 640px) and (max-height: 820px) {
  .held-home .held-woord { padding-block: 46px 62px; }
  .held-home .reuzenwoord { font-size: clamp(56px, min(18.5vw, 29vh), 250px); }
  .held-home .held-woord .sticker-haarlem { bottom: -6px; }
  .held-home .held-woord .sticker-welkom { bottom: -6px; }
}

/* Hero: reuzenwoord met lint, daaronder tekst en de koning met idle-loop; stickers zweven licht. */
.held-home .held-onder { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.held-koning { position: relative; display: grid; place-items: end center; }
.held-koning .accent-koning { --accent-hoogte: clamp(190px, 21vw, 260px); }
.held-koning .zweef { right: -14px; top: 6px; width: 54px; }
.held-woord .sticker { animation: zweef 6.4s ease-in-out infinite; --draai-a: 0deg; --draai-b: 0deg; --zweef-y: -5px; }
.held-woord .sticker-krocht { animation-delay: -1.6s; }
.held-woord .sticker-haarlem { animation-delay: -3.2s; animation-duration: 7.2s; }
.held-woord .sticker-welkom { animation-delay: -4.8s; animation-duration: 5.8s; }

/* De koning als accent: één pose per sectie. Ronde 3 (craft, punt 9): elke koning een eigen beweging, tempo
   en fase (los translate, rotate en scale), nooit knipperbeelden. Hero: zweven plus een lichte kanteling
   (5,8 s, op de omhulling, zodat de render en het video-canvas samen bewegen). Wijst: ademen (schaal 1 naar
   1,03 vanaf de voeten, 4,5 s) plus een trage draai van 2 graden (9 s). Juicht: elke 4 s een korte hup met
   veer. Denkt: een trage wieg opzij (7 s). */
.accent-koning { display: block; width: auto; height: var(--accent-hoogte, 170px); max-width: none; transform-origin: 50% 100%; }
.held-koning-beeld { position: relative; transform-origin: 50% 100%; animation: koning-zweef 5.8s ease-in-out -1.2s infinite; }
@keyframes koning-zweef { 0%, 100% { translate: 0 0; rotate: -1.5deg; } 50% { translate: 0 -12px; rotate: 1.5deg; } }
.koning-beweeg-adem { animation: koning-adem 4.5s ease-in-out -0.9s infinite, koning-draai 9s ease-in-out -3.1s infinite; }
@keyframes koning-adem { 0%, 100% { scale: 1; } 50% { scale: 1.03; } }
@keyframes koning-draai { 0%, 100% { rotate: -1deg; } 50% { rotate: 1deg; } }
.koning-beweeg-hup { animation: koning-hup 4s linear -2.2s infinite; }
@keyframes koning-hup {
  0%, 68%, 100% { translate: 0 0; scale: 1; }
  74% { translate: 0 0; scale: 1.04 0.95; animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1); }
  84% { translate: 0 -20px; scale: 0.97 1.04; animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); }
  93% { translate: 0 0; scale: 1.03 0.97; animation-timing-function: ease-out; }
}
.koning-beweeg-wieg { animation: koning-wieg-zij 7s ease-in-out -4.6s infinite; }
@keyframes koning-wieg-zij { 0%, 100% { translate: -3px 0; rotate: -2.5deg; } 50% { translate: 3px 0; rotate: 2.5deg; } }
/* De hero-koning als video (punt 9): canvas over de render; pas na het eerste frame zacht gewisseld. */
.koning-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; transition: opacity var(--zweef-duur) ease; }
.koning-bron { position: absolute; left: 0; top: 0; width: 2px; height: 2px; opacity: 0; pointer-events: none; }
.koning-held-beeld { transition: opacity var(--zweef-duur) ease; }
.held-koning-beeld.is-video .koning-canvas { opacity: 1; }
.held-koning-beeld.is-video .koning-held-beeld { opacity: 0; }
.koning-gespiegeld { scale: -1 1; }  /* wijst dan naar de tekst; scale botst niet met de wiegloop op transform */
.bandkop-rij { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px 32px; margin-bottom: 28px; }
.bandkop-rij .bandkop { margin-bottom: 0; }

/* Waarom Empire: vier stickers met een gefacetteerd icoon (geen drietal). */
.waarom-stickers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; padding-top: 8px; }
.waarom-sticker {
  display: grid; align-content: start; gap: 10px; height: 100%; padding: 22px 20px 24px;
  border: var(--omlijning); border-radius: var(--radius); text-decoration: none;
  rotate: var(--draai, 0deg); transition: background-color var(--zweef-duur) ease;
}
/* Ronde 4 (lat 3): zweven verandert alleen de tint (8% donkerder), nooit de stand of de plek. */
.waarom-sticker.sticker-wit { --sticker-vlak: var(--papier); }
.waarom-sticker.sticker-4 { --sticker-vlak: var(--sticker-4); }
.waarom-sticker.sticker-5 { --sticker-vlak: var(--sticker-5); }
.waarom-sticker.kaart-band-1 { --sticker-vlak: var(--band-1); }
.waarom-stickers li:nth-child(1) .waarom-sticker { --draai: -2deg; }
.waarom-stickers li:nth-child(2) .waarom-sticker { --draai: 1.5deg; --duur: 6.8s; --fase: -1.4s; }
.waarom-stickers li:nth-child(3) .waarom-sticker { --draai: -1deg; --duur: 5.6s; --fase: -2.8s; }
.waarom-stickers li:nth-child(4) .waarom-sticker { --draai: 2deg; --duur: 7.4s; --fase: -4.2s; }
.waarom-sticker { --draai-a: -4deg; --draai-b: 5deg; --zweef-y: -7px; }
.waarom-sticker .zweef-beeld { width: auto; height: 64px; }
.waarom-sticker-icoon { display: flex; align-items: flex-end; height: 70px; }
.waarom-sticker-titel { font-family: var(--font-display); font-weight: var(--font-display-gewicht); font-size: 24px; line-height: 1; }
.waarom-sticker-tekst { font-size: 16px; line-height: 1.5; }
@media (hover: hover) { .waarom-sticker:hover { background-color: color-mix(in srgb, var(--sticker-vlak) 92%, var(--inkt)); } }
.waarom-sticker.is-zweef { background-color: color-mix(in srgb, var(--sticker-vlak) 92%, var(--inkt)); }
.waarom-sticker:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.kaart-band-1 { background: var(--band-1); color: var(--inkt); }

/* Telefoonscene als lichtblauwe band, met de kop en één knop erboven. */
.scene-band { padding-top: var(--sectie-ruimte); padding-bottom: 8px; }
.scene-band .scene-kopblok { gap: 16px; }

/* Fotocollage (naar Hunters): vierkante foto's in een strook, pijlknoppen, scroll-snap. */
.collage-raam { position: relative; }
.collage-strook {
  display: flex; gap: 16px; padding: 4px 2px 10px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none;
}
.collage-strook::-webkit-scrollbar { display: none; }
.collage-strook:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: var(--radius); }
.collage-item { flex: 0 0 clamp(220px, 31%, 372px); scroll-snap-align: start; }
.collage-foto { position: relative; }
.collage-foto img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border: var(--omlijning); border-radius: var(--radius); }
.collage-foto figcaption {
  position: absolute; left: 12px; bottom: 12px; padding: 7px 12px; background: var(--papier); color: var(--inkt);
  border: var(--omlijning); border-radius: 999px; font-size: 13px; font-weight: 700; line-height: 1;
  letter-spacing: var(--spatie-label); text-transform: uppercase; rotate: -3deg;
}
.collage-pijl {
  position: absolute; top: calc(50% - 4px); z-index: 2; display: grid; place-items: center; width: 48px; height: 48px;
  translate: 0 -50%; background: var(--papier); color: var(--inkt); border: var(--omlijning); border-radius: 50%;
  transition: background-color var(--zweef-duur) ease;
}
.collage-pijl .icoon { --icoon-maat: 20px; }
.collage-vorige { left: -12px; }
.collage-vorige .icoon { transform: scaleX(-1); }
.collage-volgende { right: -12px; }
@media (hover: hover) { .collage-pijl:hover { background: var(--band-1); } }
.collage-pijl:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

/* Openingstijden en route: de koning denkt mee in de routekaart. */
.route-onder { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; width: 100%; }
.route-onder .accent-koning { --accent-hoogte: 130px; }

/* Volledige voet: adres, tijden, 18+, pagina's, reviewlink en de werkversieregel. */
.voet-volledig .voet-raster { grid-template-columns: minmax(0, 1.3fr) repeat(4, minmax(0, 1fr)); }
.voet-volledig .voet-lijst { display: grid; gap: 4px; }
.voet-volledig .voet-lijst a, .voet-volledig .voet-lijst span { font-size: 15px; }
.voet-volledig .voet-merk { display: flex; align-items: center; gap: 10px; }
.voet-volledig .voet-merk .icoon { --icoon-maat: 34px; }
/* Ronde 3 (punt 3): kroon, EMPIRE en de leus staan gecentreerd onder elkaar, op één as in hun kolom. */
.voet-merkblok { display: grid; justify-items: center; align-content: start; gap: 12px; text-align: center; }
.voet-volledig .voet-merkblok .voet-merk { flex-direction: column; gap: 8px; }
.voet-merkblok .voet-leus { margin-top: 0; max-width: 30ch; text-wrap: balance; }
/* Ruimte onder de laatste regel, zodat de themaknop linksonder nooit tekst of een link bedekt. */
.voet-volledig { padding-bottom: 88px; }

/* 18+-poort in de Slush-stijl: witte kaart, 1px zwart, pilknoppen. */
[data-stemming="poster"] .poort-kaart { border: var(--omlijning); border-radius: var(--radius-groot); }
[data-stemming="poster"] .poort-kop { font-size: 30px; line-height: 1; color: var(--inkt); }
[data-stemming="poster"] .poort-tekst { color: var(--inkt); }

/* ---------------------------------------------------------------- Slush-homepage: smaller (na de basisregels, anders winnen die) */
@media (max-width: 1023px) {
  .waarom-stickers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .voet-volledig .voet-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
  .held-home .held-onder { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .held-home .held-tekst { justify-items: center; }
  .held-home .knoprij { justify-content: center; }
  .held-koning .accent-koning { --accent-hoogte: 170px; }
  .bandkop-rij { grid-template-columns: minmax(0, 1fr) auto; }
  .bandkop-rij .accent-koning { --accent-hoogte: 110px; }
  .waarom-stickers { gap: 14px; }
  .waarom-sticker { padding: 18px 14px 20px; }
  .waarom-sticker-titel { font-size: 16px; }
  .waarom-sticker-tekst { font-size: 14px; }
  .waarom-sticker .zweef-beeld { height: 48px; }
  .waarom-sticker-icoon { height: 52px; }
  .collage-item { flex-basis: 78%; }
  .collage-vorige { left: 4px; }
  .collage-volgende { right: 4px; }
  .voet-volledig .voet-raster { grid-template-columns: minmax(0, 1fr); }
}

/* =====================================================================================
   RONDE 3 VAN DE DESIGN LOOP (05-10-2026): Al jaren een begrip, de themakiezer, privacy en de
   mobiele plek van de voorwerpen in de scene. Alles in stemming poster (Slush): 1px zwart, pilvorm,
   pastel, geen verlopen en geen schaduw.
   ===================================================================================== */

/* ---------------------------------------------------------------- Al jaren een begrip (punt 4)
   De hero-koning staat rechts; hier staat de wijzende koning links en wijst hij naar de tekst rechts. */
.begrip-raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: 24px 48px; }
.begrip-beeld { position: relative; display: grid; place-items: end center; min-height: clamp(260px, 30vw, 360px); }
.begrip-beeld .accent-koning { --accent-hoogte: clamp(230px, 26vw, 330px); }
.begrip-tekst { display: grid; gap: 14px; justify-items: start; }
.begrip-stickers { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 6px; }
.begrip-stickers .sticker { font-size: 13px; }
.begrip-stickers .sticker:nth-child(1) { --draai: -4deg; }
.begrip-stickers .sticker:nth-child(2) { --draai: 3deg; }
.zw-begrip-pin { left: 4%; top: 10%; width: clamp(44px, 5vw, 64px); --duur: 6.6s; --fase: -2s; --draai-a: -10deg; --draai-b: -4deg; --zweef-y: -12px; }
.zw-begrip-ster { right: 6%; top: 4%; width: clamp(40px, 4.4vw, 56px); --duur: 5.2s; --fase: -3.4s; --draai-a: 6deg; --draai-b: 14deg; --zweef-y: -10px; }

/* ---------------------------------------------------------------- themakiezer (punt 5)
   Een ronde knop linksonder (kroontje plus Thema) opent een klein paneel: palet met kleurstipjes,
   letter van de Kennisbank, levens. Dialoog (niet modaal), Escape sluit, de focus gaat terug naar de knop.
   Smal verdwijnt de knop bij naar beneden scrollen en komt hij terug bij omhoog scrollen. */
.thema {
  position: fixed; left: 16px; bottom: 16px; z-index: 60;
  /* Overal dezelfde knop, ook op de Kennisbank (stemming licht): de Slush-maten staan hier lokaal. */
  --omlijning: 1px solid var(--inkt); --radius: 20px; --radius-knop: 1600px; --focus: var(--inkt);
  --font-ui: var(--font-archivo); --font-display: var(--font-archivo-black); --font-display-gewicht: 400;
  --spatie-ui: 0.03em; --spatie-label: 0.032em; --vlak-zweef: var(--band-1);
  font-family: var(--font-ui); letter-spacing: var(--spatie-ui);
}
/* Sinds 05-10 (Kerim, na ronde 4): altijd zichtbaar, ook bovenaan; 44 px hoog, zodat hij op 1280 x 800 en
   1366 x 768 niets van de hero raakt. */
.thema-knop {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 3px 16px 3px 3px;
  background: var(--papier); color: var(--inkt); border: var(--omlijning); border-radius: var(--radius-knop);
  font-family: var(--font-ui); font-size: 14px; font-weight: 700; line-height: 1; letter-spacing: var(--spatie-ui);
  transition: background-color var(--zweef-duur) ease;
}
.thema-knop-kroon { display: grid; place-items: center; width: 36px; height: 36px; background: var(--sticker-1); color: var(--sticker-1-tekst); border: var(--omlijning); border-radius: 50%; }
.thema-knop-kroon .icoon { --icoon-maat: 22px; }
@media (hover: hover) { .thema-knop:hover { background: var(--band-1); } }
.thema-knop[aria-expanded="true"] { background: var(--band-1); }
.thema-knop:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.thema-paneel {
  position: absolute; left: 0; bottom: calc(100% + 12px); display: grid; gap: 14px;
  width: min(352px, calc(100vw - 32px)); max-height: calc(100vh - 120px); overflow-y: auto; padding: 18px;
  background: var(--papier); color: var(--inkt); border: var(--omlijning); border-radius: var(--radius);
  font-family: var(--font-ui);
}
.thema-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.thema-titel { font-family: var(--font-display); font-weight: var(--font-display-gewicht); font-size: 24px; line-height: 1; }
.thema-uitleg { margin-top: 6px; font-size: 13px; line-height: 1.35; }
.thema-sluit { display: grid; place-items: center; width: 44px; height: 44px; flex: none; margin: -8px -8px 0 0; color: var(--inkt); border: var(--omlijning); border-radius: 50%; transition: background-color var(--zweef-duur) ease; }
@media (hover: hover) { .thema-sluit:hover { background: var(--band-1); } }
.thema-sluit .icoon { --icoon-maat: 18px; }
.thema-groep { display: grid; gap: 8px; min-width: 0; border: 0; }
.thema-legend { float: left; width: 100%; margin-bottom: 8px; font-size: 12px; font-weight: 700; line-height: 1.2; letter-spacing: var(--spatie-label); text-transform: uppercase; }
.thema-opties { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; clear: both; }
/* Paletten onder elkaar: de naam past altijd, de drie kleurstipjes staan rechts. */
.thema-opties-palet { grid-template-columns: minmax(0, 1fr); gap: 6px; }
.thema-opties-palet .thema-stippen { order: 2; margin-left: auto; }
.thema-optie {
  position: relative; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 12px 6px 10px;
  background: var(--papier); color: var(--inkt); border: var(--omlijning); border-radius: var(--radius-knop);
  font-size: 14px; font-weight: 700; line-height: 1.1; transition: background-color var(--zweef-duur) ease;
}
.thema-optie input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
@media (hover: hover) { .thema-optie:hover { background: var(--vlak-zweef); } }
.thema-optie:has(input:checked) { background: var(--band-1); }
.thema-optie:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
/* Gekozen = een gevuld rondje, dus kleur is nooit het enige signaal. */
.thema-rondje { position: relative; flex: none; width: 16px; height: 16px; background: var(--papier); border: var(--omlijning); border-radius: 50%; }
.thema-optie:has(input:checked) .thema-rondje::after { content: ""; position: absolute; inset: 3px; background: var(--inkt); border-radius: 50%; }
.thema-stippen { display: inline-flex; flex: none; }
.thema-stippen span { width: 12px; height: 12px; border: var(--omlijning); border-radius: 50%; }
.thema-stippen span + span { margin-left: -3px; }
.thema-stippen span:nth-child(1) { background: var(--hoofd); }
.thema-stippen span:nth-child(2) { background: var(--band-1); }
.thema-stippen span:nth-child(3) { background: var(--sticker-3); }
.thema-naam { min-width: 0; }
.thema-letter-lilita { font-family: 'Lilita One', var(--font-ui); font-weight: 400; font-size: 17px; letter-spacing: 0; }
.thema-letter-fredoka { font-family: 'Fredoka', var(--font-ui); font-weight: 600; font-size: 17px; letter-spacing: 0; }
.thema-leven { display: inline-grid; place-items: center; }
.thema-leven .vol-icoon { --icoon-maat: 20px; }
.thema-leven .vol { stroke: var(--inkt); stroke-width: 1.6; stroke-linejoin: round; }
.thema-leven-kroon .vol { fill: var(--kroon); }
.thema-leven-hart .vol { fill: var(--fout); }
.thema-noot { font-size: 13px; line-height: 1.4; }
.thema-noot a { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.thema-standaard { justify-self: start; min-height: 44px; padding: 0 2px; font-size: 13px; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.thema-standaard:focus-visible, .thema-noot a:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }

/* ---------------------------------------------------------------- ankers (ronde 4)
   Elk anker op een poster-pagina komt onder de plakkende kopbalk uit (breed ongeveer 82 px hoog), nooit
   eronder: "Zo is het bij Empire" en "Kijk even rond" blijven leesbaar na een sprong. */
[data-stemming="poster"] [id] { scroll-margin-top: 16px; }
@media (min-width: 900px) {
  [data-stemming="poster"] [id] { scroll-margin-top: calc(var(--paneel-hoogte, 0px) + 100px); }
}

/* ---------------------------------------------------------------- privacy (punt 13) */
.privacy-held { padding-block: 40px 52px; }
.privacy-held-binnen { display: grid; gap: 14px; justify-items: start; }
.privacy-blokken { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.privacy-blok { display: grid; align-content: start; gap: 10px; }
.privacy-blok-kop { font-family: var(--font-display); font-weight: var(--font-display-gewicht); font-size: 24px; line-height: 1; }
.privacy-blok p { font-size: 16px; line-height: 1.5; }
.privacy-datum { margin-top: 22px; }
@media (min-width: 900px) {
  .privacy-held { padding-top: 116px; }
}

/* ---------------------------------------------------------------- ronde 3: smaller (na de regels hierboven) */
@media (max-width: 899px) {
  .begrip-raster { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 20px 28px; }
  .thema-knop { min-height: 44px; padding: 3px 14px 3px 3px; }
  .thema-knop-kroon { width: 36px; height: 36px; }
}
@media (max-width: 639px) {
  .begrip-raster { grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start; }
  .begrip-beeld { min-height: 0; padding-top: 18px; }
  .begrip-beeld .accent-koning { --accent-hoogte: 160px; }
  .zw-begrip-pin { width: 34px; left: -6%; top: 0; }
  .zw-begrip-ster { width: 30px; right: -8%; top: 4%; }
  .privacy-blokken { grid-template-columns: minmax(0, 1fr); }
  /* Smal is de themaknop een echte ronde knop: het kroontje met het label eronder, zodat hij weinig bedekt. */
  /* 06-10-2026 (Kerim): het woord raakte bijna de rand van het rondje. Nu 9 px met iets strakkere spatiëring, een
     kleiner kroontje en alles 3 px omhoog (padding onder), zodat het woord dichter bij het midden staat waar het
     rondje breder is: gemeten minstens 4 px speling links en rechts op de hoogte van de tekst (Thema en Theme). */
  .thema-knop { flex-direction: column; justify-content: center; gap: 1px; width: 54px; height: 54px; min-height: 0; padding: 0 0 6px; border-radius: 50%; font-size: 9px; letter-spacing: 0.02em; text-transform: uppercase; }
  .thema-knop-kroon { width: 24px; height: 24px; }
  .thema-knop-kroon .icoon { --icoon-maat: 15px; }
  /* De scene op 375 px (ronde 4): toneel 540 px hoog, de grote telefoon 240 px breed, de koning 115% van
     de telefoon en op zijn verste punt minder ver opzij (tokens.css), zodat hij binnen de band blijft. Elk
     voorwerp een eigen plek; vier lopen half over de rand. */
  .scene-toneel { height: 440px; margin-top: 12px; }
  .zw-s1 { width: 120px; top: 2%; }
  .zw-s2 { left: 22%; top: 0; width: 74px; }
  .zw-s3 { left: 46%; top: 4%; width: 66px; }
  .zw-s4 { right: 22%; top: 0; width: 70px; }
  .zw-s5 { left: 3%; top: 11%; width: 84px; }
  .zw-s6 { top: 36%; width: 130px; }
  .zw-s7 { left: 2%; bottom: 21%; width: 110px; }
  .zw-s8 { right: 2%; top: 13%; width: 80px; }
  .zw-s9 { right: 1%; bottom: 17%; width: 110px; }
  .zw-s14 { left: 3%; top: 52%; width: 110px; }
  .zw-s10 { bottom: 2%; width: 150px; }
  .zw-s11 { left: 4%; top: 25%; width: 48px; }
  .zw-s12 { left: 30%; bottom: 0; width: 70px; }
  .zw-s13 { top: 74%; width: 60px; }
  .zw-s15 { right: 3%; bottom: 0; width: 130px; }
}

/* ---------------------------------------------------------------- homepage: minder beweging = stil */
@media (prefers-reduced-motion: reduce) {
  [data-stemming="promo"] *, [data-stemming="promo"] *::before, [data-stemming="promo"] *::after,
  body[data-stemming="poster"] *, body[data-stemming="poster"] *::before, body[data-stemming="poster"] *::after { animation: none !important; transition: none !important; }
  [data-stemming="promo"] .zweef, body[data-stemming="poster"] .zweef { transform: none !important; }
  .collage-strook { scroll-behavior: auto; }
  [data-stemming="promo"] .marquee-knop { display: none; }
}

/* =====================================================================================
   STAP 3 EN 4 (05-10-2026): de Kennisbank-pagina's (stemming licht: leerpad, speler, bronnen)
   en de overige promo-pagina's (stemming poster: Over Empire, Route, Huisregels), plus de
   Google-kaart in de bezoektegel van de homepage. Alles uit tokens.css; geen verlopen, geen
   schaduw, beweging alleen via transform en opacity (en stil bij minder beweging).
   ===================================================================================== */

/* ---------------------------------------------------------------- kopbalk licht: menu smal */
.kopbalk-licht .kopbalk-rij { position: relative; }
.kopbalk-licht .menuknop {
  width: 44px; height: 44px; background: var(--papier); color: var(--kop-tekst);
  border: 2px solid var(--rand-neutraal); border-bottom-width: 4px; border-radius: 12px;
}
@media (hover: hover) { .kopbalk-licht .menuknop:hover, .kopbalk-promo .menuknop:hover { background: var(--vlak-zweef); } }
[data-stemming="licht"] [id] { scroll-margin-top: 16px; }
@media (min-width: 900px) {
  [data-stemming="licht"] [id] { scroll-margin-top: 96px; }
}

/* ---------------------------------------------------------------- Kennisbank: pagina met leerpad en zijkolom */
.kennis-pagina { display: grid; grid-template-columns: minmax(0, 1fr) 340px; align-items: start; gap: 56px; padding-block: 40px 72px; }
.kennis-hoofd { min-width: 0; }
.kennis-kop { display: grid; gap: 12px; justify-items: start; margin-bottom: 36px; }
.kennis-kop .intro { max-width: 58ch; }
.leerpad-eenheden { display: grid; gap: 56px; }
.eenheid-blok { display: grid; gap: 24px; }
.eenheid { align-items: center; }
.eenheid-tekst { display: grid; gap: 4px; min-width: 0; }
.eenheid-omschrijving { font-size: 15px; font-weight: 700; line-height: 1.4; }
.eenheid-bronnen { flex: none; }
.eenheid-bronnen .icoon { --icoon-maat: 18px; }
.eenheid-binnenkort { background: var(--hoofd-zacht); color: var(--kop-tekst); border-bottom-color: var(--hoofd); }

/* Het leerpad: per les een ronde knoop in een slinger (zigzag) met titel, leerdoel en status ernaast. De
   toestand staat op de li (data-toestand: klaar, open, slot, binnenkort); stijl.css toont het passende icoon
   en de passende statusregel. Een les op slot is een a zonder href: geen link, geen zweven. */
.lespad { display: grid; gap: 14px; }
@media (min-width: 900px) { .lespad { padding-left: 96px; } }
.lespad-stap { --rail: 176px; }
.lespad-link {
  display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); align-items: center; gap: 8px 20px;
  padding-block: 6px; color: inherit; text-decoration: none; border-radius: 16px;
}
.lespad-stap.is-start .lespad-link { padding-top: 54px; }
a.lespad-link[href]:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.knoop-vak { position: relative; display: block; width: max-content; }
.zig-a { translate: 0 0; }
.zig-b { translate: 44px 0; }
.zig-c { translate: 76px 0; }
.lespad-stap .knoop-start { display: none; }
.lespad-stap.is-start .knoop-start { display: block; }
.lespad-stap .knoop-ring { border-color: transparent; }
.lespad-stap[data-toestand="open"] .knoop-ring { border-color: var(--hoofd-zacht); }
.knoop .ico-open, .knoop .ico-klaar, .knoop .ico-slot { display: none; }
[data-toestand="open"] .knoop .ico-open, [data-toestand="klaar"] .knoop .ico-klaar,
[data-toestand="slot"] .knoop .ico-slot, [data-toestand="binnenkort"] .knoop .ico-slot { display: block; }
[data-toestand="slot"] .knoop, [data-toestand="binnenkort"] .knoop { background: var(--rand-neutraal); color: var(--rand-uit); border-bottom-color: var(--rand-diep); }
@media (hover: hover) {
  a.lespad-link[href]:hover .knoop { background: color-mix(in srgb, var(--hoofd) 82%, var(--hoofd-donker)); }
  a.lespad-link[href]:hover .les-titel { text-decoration: underline; text-underline-offset: 3px; }
}
a.lespad-link[href]:active .knoop { transform: translateY(4px); border-bottom-width: 3px; margin-bottom: 4px; }
.les-label { display: grid; justify-items: start; gap: 4px; min-width: 0; }
.les-nummer { font-size: 13px; font-weight: 800; line-height: 1.23; letter-spacing: var(--spatie-ui); text-transform: uppercase; color: var(--tekst-zacht); }
.les-titel { font-size: 19px; font-weight: 800; line-height: 1.3; color: var(--kop-tekst); }
.les-doel { font-size: 15px; line-height: 1.45; color: var(--tekst); }
.les-status > span { display: none; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; line-height: 1.23; letter-spacing: var(--spatie-ui); text-transform: uppercase; }
.les-status .icoon { --icoon-maat: 16px; }
[data-toestand="klaar"] .st-klaar, [data-toestand="open"] .st-open,
[data-toestand="slot"] .st-slot, [data-toestand="binnenkort"] .st-binnenkort { display: inline-flex; }
.st-klaar { color: var(--goed-tekst); }
.st-open { color: var(--kop-tekst); }
.st-slot, .st-binnenkort { color: var(--tekst-zacht); }

/* Zijkolom: voortgang (met de koning), uitleg en hulp. Kaders zonder vulling, zoals de rechterkolom van
   Duolingo; breed plakt hij onder de kopbalk. */
.kennis-zij { position: sticky; top: 96px; display: grid; gap: 20px; }
.zijkaart { display: grid; gap: 12px; padding: 20px; background: var(--papier); border: 2px solid var(--rand-neutraal); border-radius: var(--radius); }
.zijkaart-kop { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.zijkaart-titel { font-size: 19px; font-weight: 800; line-height: 1.33; color: var(--kop-tekst); }
.zijstats { display: grid; gap: 10px; }
.zijstats li { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; color: var(--tekst); }
.zijstats strong { font-size: 19px; font-weight: 800; color: var(--kop-tekst); }
.zijstats .icoon:not(.vol-icoon) { color: var(--hoofd-donker); }
.zijstats .vol { fill: var(--kroon); }
.zijnoot { font-size: 13px; line-height: 1.4; color: var(--tekst-zacht); }
.zijkaart .knop .icoon { --icoon-maat: 18px; }

/* ---------------------------------------------------------------- les.html: de speler als eigen pagina */
/* Minstens een scherm hoog: de voet valt onder de vouw, zodat de themaknop linksonder bij het begin van de les
   alleen lege ruimte raakt. */
.les-pagina { max-width: 760px; min-height: calc(100vh - 73px); min-height: calc(100svh - 73px); padding-block: 28px 96px; }
.speler .knoprij-midden { justify-content: center; margin-top: 4px; }
.les-hervat { margin-top: 14px; padding: 8px 12px; background: var(--kies-zacht); color: var(--kop-tekst); border-radius: var(--radius); font-size: 13px; font-weight: 800; line-height: 1.3; }
.feedback-bron { margin-top: 6px; font-size: 13px; font-weight: 700; line-height: 1.4; color: var(--tekst); }
.feedback-bron a { color: var(--kop-tekst); text-decoration: underline; text-underline-offset: 3px; }
.feedback-bron a:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.uitslag-noot { max-width: 46ch; font-weight: 700; color: var(--tekst); }
.uitslag .icoon:not(.vol-icoon) { --icoon-maat: 24px; }
/* Volgorde: genummerde plekken met een gestippelde rand; de woordchip vult de plek. */
.volgorde-lijst { display: grid; gap: 10px; margin-top: 2px; }
.volgorde-plek { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; gap: 12px; }
.volgorde-nr { display: grid; place-items: center; width: 32px; height: 32px; border: 2px solid var(--rand-neutraal); border-radius: 8px; font-size: 15px; font-weight: 800; line-height: 1; color: var(--tekst-zacht); }
.gat.gat-volgorde { display: flex; align-items: stretch; width: 100%; min-width: 0; min-height: 56px; padding: 0; border: 2px dashed var(--rand-diep); border-radius: var(--radius); line-height: 1.3; }
.gat.gat-volgorde.is-gevuld { border-color: transparent; }
.gat-volgorde .woordchip { flex: 1; justify-content: flex-start; min-height: 52px; text-align: left; }
.woordbank .woordchip { text-align: left; }

/* ---------------------------------------------------------------- bronnen.html */
.bronnen-eenheid { display: grid; gap: 8px; margin-bottom: 40px; }
.eenheid-label-licht { font-size: 13px; font-weight: 800; line-height: 1.23; letter-spacing: var(--spatie-ui); text-transform: uppercase; color: var(--tekst-zacht); }
.bronnen-titel { margin-bottom: 8px; }
.bronnenlijst { display: grid; gap: 12px; }
@media (min-width: 900px) { .bronnenlijst, .werkwijze { padding-left: 96px; } }
.bron { display: grid; gap: 4px; padding: 16px 18px; border: 2px solid var(--rand-neutraal); border-bottom-width: 4px; border-radius: var(--radius); }
.bron-link { display: inline-flex; align-items: flex-start; gap: 8px; color: var(--kop-tekst); font-size: 17px; font-weight: 800; line-height: 1.35; text-decoration: underline; text-underline-offset: 3px; }
.bron-link .icoon { --icoon-maat: 18px; margin-top: 3px; }
.bron-link:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.bron-omschrijving { font-size: 15px; color: var(--tekst); }
.bron-domein { font-size: 13px; font-weight: 700; color: var(--tekst-zacht); }
.bronnen-werkwijze { display: grid; gap: 12px; margin-top: 8px; }
.werkwijze { display: grid; gap: 10px; }
.werkwijze li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; }
.werkwijze .icoon { --icoon-maat: 18px; margin-top: 3px; color: var(--goed-tekst); }
.bronnen-datum { margin-top: 20px; color: var(--tekst-zacht); }
.zijkaart-let-op p { font-size: 15px; }
.hulp { display: grid; gap: 16px; }
.hulp-item { display: grid; gap: 4px; justify-items: start; }
.hulp-naam { font-size: 15px; font-weight: 800; color: var(--kop-tekst); }
.hulp-item .knop { margin-top: 6px; }
.hulp-item .icoon { --icoon-maat: 18px; }

/* ---------------------------------------------------------------- promo-subpagina's: de hero */
.subheld { position: relative; overflow: clip; padding-block: 36px 48px; }
@media (min-width: 900px) { .subheld { padding-top: 116px; } }
.subheld-raster { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: 24px 48px; }
.subheld-links .subheld-raster { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.subheld-links .subheld-beeld { order: -1; }
.subheld-tekst { display: grid; gap: 14px; justify-items: start; }
.subheld-tekst .intro { max-width: 46ch; font-size: 17px; }
.subheld-stickers { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 4px; }
.subheld-stickers .sticker { font-size: 13px; }
.subheld-stickers .sticker:nth-child(1) { --draai: -4deg; }
.subheld-stickers .sticker:nth-child(2) { --draai: 3deg; }
.subheld-beeld { position: relative; display: grid; place-items: end center; min-height: clamp(240px, 26vw, 330px); }
.subheld-koning { --accent-hoogte: clamp(200px, 21vw, 290px); }
.zw-sub-a { left: 8%; top: 6%; width: clamp(44px, 5vw, 64px); --duur: 6.6s; --fase: -2s; --draai-a: -10deg; --draai-b: -4deg; --zweef-y: -12px; }
.zw-sub-b { right: 8%; top: 2%; width: clamp(40px, 4.4vw, 56px); --duur: 5.2s; --fase: -3.4s; --draai-a: 6deg; --draai-b: 14deg; --zweef-y: -10px; }
.zw-sub-c { right: 4%; bottom: 16%; width: clamp(64px, 7vw, 92px); --duur: 7.4s; --fase: -1.1s; --draai-a: -8deg; --draai-b: -2deg; --zweef-y: -10px; }
/* Huisregels: de koning wijst naar de samenvatting ernaast. */
.subheld-regels .subheld-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.subheld-regels .subheld-beeld { display: flex; align-items: flex-end; justify-content: center; gap: 8px; }
.subheld-regels .subheld-koning { --accent-hoogte: clamp(180px, 18vw, 240px); flex: none; }
.kortkaart { flex: 0 1 330px; min-width: 0; display: grid; gap: 14px; margin-bottom: 8px; rotate: 2deg; }
.kortlijst { display: grid; gap: 10px; }
.kortlijst li { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; line-height: 1.3; }
.kort-nr { display: grid; place-items: center; width: 28px; height: 28px; flex: none; background: var(--papier); color: var(--inkt); border: var(--omlijning); border-radius: 50%; font-size: 13px; font-weight: 700; line-height: 1; }

/* ---------------------------------------------------------------- Over Empire */
.fotosticker.fotosticker-los { width: 100%; max-width: 400px; margin: 0; justify-self: center; z-index: auto; }
.fotosticker-los img { aspect-ratio: 4 / 5; }
.verhaal-foto { --draai: -4deg; }
.karakter-foto { --draai: 3deg; }
.verhaal-raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: 32px 56px; }
.verhaal-tekst { display: grid; gap: 14px; justify-items: start; }
.verhaal-blokken { display: grid; gap: 18px; margin-top: 8px; }
.verhaal-blok { display: grid; gap: 4px; }
.verhaal-blok-kop { font-family: var(--font-display); font-weight: var(--font-display-gewicht); font-size: 22px; line-height: 1.05; }
.verhaal-blok p { font-size: 16px; line-height: 1.5; max-width: 54ch; }
/* Tijdlijn: drie kaarten op een zwarte lijn, elk met een rond nummer dat over de lijn valt. */
.tijdlijn { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding-top: 28px; }
.tijdlijn::before { content: ""; position: absolute; left: 0; right: 0; top: 28px; height: 1px; background: var(--inkt); }
.tijdlijn-stap {
  position: relative; display: grid; justify-items: start; align-content: start; gap: 10px; padding: 0 24px 26px;
  background: var(--papier); color: var(--inkt); border: var(--omlijning); border-radius: var(--radius); rotate: var(--draai, 0deg);
}
.tijdlijn-stap:nth-child(1) { --draai: -1.5deg; }
.tijdlijn-stap:nth-child(2) { --draai: 1deg; background: var(--sticker-5); color: var(--sticker-5-tekst); }
.tijdlijn-stap:nth-child(3) { --draai: -1deg; background: var(--sticker-4); color: var(--sticker-4-tekst); }
.tijdlijn-nr {
  display: grid; place-items: center; width: 52px; height: 52px; margin-top: -27px; background: var(--papier); color: var(--inkt);
  border: var(--omlijning); border-radius: 50%; font-family: var(--font-display); font-weight: var(--font-display-gewicht); font-size: 24px; line-height: 1;
}
.tijdlijn-kop { font-family: var(--font-display); font-weight: var(--font-display-gewicht); font-size: 24px; line-height: 1; }
.tijdlijn-stap p { font-size: 16px; line-height: 1.5; }
/* Een plek met karakter: het citaat, Kom langs als witte kaart, en de tweede fotosticker. */
.karakter-raster { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: 32px 56px; }
.karakter-tekst { display: grid; gap: 14px; justify-items: start; }
/* De witte kaart vult altijd de tekstkolom (06-10-2026): met justify-items start van de ouder kromp hij in het Engels naar
   de breedste regel (531 tegen 667 px op 1280), in het Nederlands vulde de langere tekst hem toevallig. */
.karakter-langs { display: grid; gap: 10px; justify-items: start; justify-self: stretch; margin-top: 10px; padding: 24px; background: var(--papier); border: var(--omlijning); border-radius: var(--radius-groot); }
.karakter-langs-kop { font-family: var(--font-display); font-weight: var(--font-display-gewicht); font-size: 24px; line-height: 1; }

/* ---------------------------------------------------------------- Route: kaart naast de informatiekaart */
.route-raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: stretch; gap: 20px; }
.infokaart { display: grid; align-content: start; justify-items: start; gap: 12px; }
.infokaart .adres { margin-bottom: 4px; }
.infokaart-kop { margin-top: 10px; font-family: var(--font-display); font-weight: var(--font-display-gewicht); font-size: 24px; line-height: 1; }
.infokaart .tijden { margin-top: 0; }
.infokaart .tijden-noot { margin-top: 2px; }
.komen { display: grid; gap: 12px; width: 100%; }
.komen-item { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 15px; line-height: 1.45; }
.komen-item .icoon { --icoon-maat: 22px; }
.komen-item strong { display: block; font-weight: 700; }
.infokaart-knoppen { margin-top: 10px; }
/* De Google-kaart (gouden standaard): afgeronde kaart met 1px zwarte rand, het iframe vult het vak. */
.kaartvak { position: relative; overflow: hidden; background: var(--band-1); border: var(--omlijning); border-radius: var(--radius); }
.kaart-iframe { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; }
.kaartvak-groot { min-height: 420px; }
/* Nu open of gesloten: een witte pil met een stip (groen open, grijs dicht) en de tekst. */
.tijden-status {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; background: var(--papier); color: var(--inkt);
  border: var(--omlijning); border-radius: var(--radius-knop); font-size: 14px; font-weight: 700; line-height: 1.2;
}
.tijden-stip { width: 10px; height: 10px; flex: none; background: var(--rand-diep); border: var(--omlijning); border-radius: 50%; }
.tijden-status.is-open .tijden-stip { background: var(--goed); }
.tijdenkaart .tijden-status { margin-top: 14px; }
/* Contactformulier: velden met 1px zwart, pilknop; de bevestiging vervangt het formulier. */
.contact-raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; gap: 24px 48px; }
.contact-kop { margin-bottom: 0; }
.contact-werkversie { white-space: normal; text-align: left; }
.formulier { display: grid; gap: 16px; }
.veldrij { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.veld { display: grid; gap: 6px; }
.veld label { font-size: 12px; font-weight: 700; line-height: 1.2; letter-spacing: var(--spatie-label); text-transform: uppercase; }
.veld input, .veld select, .veld textarea {
  width: 100%; min-height: 48px; padding: 12px 16px; background: var(--papier); color: var(--inkt);
  border: var(--omlijning); border-radius: var(--radius-sticker); font-size: 16px; line-height: 1.4;
}
.veld textarea { min-height: 140px; resize: vertical; }
.veld input:focus-visible, .veld select:focus-visible, .veld textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.veldweg { display: none; }
.formulier-onder { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.formulier-noot { font-size: 13px; }
.formulier-dank { display: grid; gap: 8px; }
.formulier-dank:focus { outline: none; }
.formulier-dank-kop { font-family: var(--font-display); font-weight: var(--font-display-gewicht); font-size: 30px; line-height: 1; }

/* ---------------------------------------------------------------- Huisregels */
.regelkaarten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.regelkaart {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: start; align-items: center; gap: 12px;
  padding: 22px 22px 24px; background: var(--papier); color: var(--inkt); border: var(--omlijning); border-radius: var(--radius); rotate: var(--draai, 0deg);
}
.regelkaart .regel-kop, .regelkaart p { grid-column: 1 / -1; }
.regelkaart:nth-child(1) { --draai: -1.5deg; }
.regelkaart:nth-child(2) { --draai: 1deg; background: var(--sticker-5); color: var(--sticker-5-tekst); }
.regelkaart:nth-child(3) { --draai: -0.5deg; background: var(--sticker-4); color: var(--sticker-4-tekst); }
.regelkaart:nth-child(4) { --draai: 1.5deg; background: var(--band-1); color: var(--inkt); }
.regelkaart:nth-child(5) { --draai: -1deg; }
.regelkaart:nth-child(6) { --draai: 0.5deg; background: var(--sticker-5); color: var(--sticker-5-tekst); }
.regel-nr { display: grid; place-items: center; width: 44px; height: 44px; background: var(--papier); color: var(--inkt); border: var(--omlijning); border-radius: 50%; font-family: var(--font-display); font-weight: var(--font-display-gewicht); font-size: 20px; line-height: 1; }
.regel-icoon { display: flex; align-items: center; justify-content: flex-end; height: 56px; }
.regel-beeld { width: auto; height: 52px; }
.regel-18 { display: grid; place-items: center; width: 54px; height: 54px; background: var(--sticker-2); color: var(--sticker-2-tekst); border: var(--omlijning); border-radius: 50%; font-family: var(--font-display); font-weight: var(--font-display-gewicht); font-size: 18px; line-height: 1; rotate: 8deg; }
.regel-kop { margin-top: 4px; font-family: var(--font-display); font-weight: var(--font-display-gewicht); font-size: 22px; line-height: 1.05; }
.regelkaart p { font-size: 15px; line-height: 1.5; }
.vraagband { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 20px 40px; }
.vraagband-tekst { display: grid; gap: 12px; }

/* ---------------------------------------------------------------- homepage: kaart in de bezoektegel (extra punt Kerim)
   De twee tegels zijn exact even hoog: de openingstijdentegel bepaalt de hoogte (rij met stretch), de
   bezoektegel is een flexkolom waarin de kaart de resterende ruimte vult (basis 0, minstens 160 px) en de
   knoppen onderaan blijven. Zo telt de kaart niet mee voor de hoogte van de rij. De koning (denkt) staat
   rechts naast adres en tekst, boven de kaart, en overlapt hem nooit. Smal: onder elkaar, kaart 220 px. */
.tijden-raster-kaart { align-items: stretch; }
.routekaart.routekaart-kaart { display: flex; flex-direction: column; align-items: stretch; gap: 16px; }
.routekaart-kop { position: relative; display: grid; align-content: start; gap: 12px; min-height: 96px; padding-right: 64px; }
.routekaart-kop .routekaart-koning { position: absolute; right: 0; top: 0; --accent-hoogte: 96px; }
.kaartvak-tegel { flex: 1 1 0; min-height: 160px; }
.routekaart-knoppen { flex: none; }

/* ---------------------------------------------------------------- stap 3 en 4: smaller (na de regels hierboven) */
@media (max-width: 1023px) {
  .regelkaarten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  .kopbalk-licht .kopbalk-rij { flex-wrap: nowrap; min-height: 64px; padding-block: 10px; }
  .kennis-pagina { grid-template-columns: minmax(0, 1fr); gap: 40px; padding-block: 24px 48px; }
  .kennis-zij { position: static; }
  .eenheid { flex-wrap: wrap; }
  .subheld-raster, .subheld-links .subheld-raster, .subheld-regels .subheld-raster { grid-template-columns: minmax(0, 1fr); }
  .subheld-links .subheld-beeld { order: 0; }
  .verhaal-raster, .karakter-raster, .route-raster, .contact-raster { grid-template-columns: minmax(0, 1fr); }
  .kaartvak-groot { min-height: 0; height: 380px; }
  .kaartvak-tegel { flex: none; height: 220px; min-height: 0; }
  .vraagband { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 639px) {
  .kopbalk-licht .kopbalk-rij { gap: 10px; }
  .kopbalk-licht .woordmerk-licht { font-size: 28px; }
  .kopbalk-licht .stats { gap: 10px; }
  .kopbalk-licht .stat { gap: 4px; font-size: 14px; }
  .kopbalk-licht .stat .icoon, .kopbalk-licht .leven .vol-icoon { --icoon-maat: 20px; }
  .kennis-kop { margin-bottom: 28px; }
  .leerpad-eenheden { gap: 44px; }
  .lespad-stap { --rail: 128px; }
  .lespad-link { gap: 6px 14px; }
  .zig-b { translate: 18px 0; }
  .zig-c { translate: 32px 0; }
  .les-titel { font-size: 17px; }
  .les-doel { font-size: 14px; }
  .les-pagina { padding-block: 16px 96px; }
  .speler .vraag { margin-block: 18px 16px; gap: 12px; }
  .speler .vraag-met-mascotte .mascotte { height: 64px; }
  .speler .ballon { padding: 12px 14px; font-size: 17px; }
  .speler .antwoord { min-height: 52px; padding: 10px 14px; font-size: 16px; }
  .speler .lesvoet { margin-top: 16px; padding-top: 16px; }
  .subheld { padding-block: 28px 40px; }
  .subheld-beeld { min-height: 0; }
  .subheld-koning { --accent-hoogte: 160px; }
  .subheld-regels .subheld-beeld { justify-content: flex-start; }
  .subheld-regels .subheld-koning { --accent-hoogte: 112px; }
  .kortkaart { flex: 1 1 auto; padding: 20px 18px; rotate: 1.5deg; }
  .tijdlijn { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .tijdlijn::before { display: none; }
  .veldrij { grid-template-columns: minmax(0, 1fr); }
  .regelkaarten { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .fotosticker.fotosticker-los { max-width: 300px; }
}

/* =====================================================================================
   NA DE LOOP (05-10-2026, Kerim): de omlijning van het reuzenwoord, de Kennisbank in de
   poster-stemming (lesmodule) en het Leerboek. Alles uit tokens.css; geen verlopen en geen
   box-shadow; beweging alleen via transform en opacity, stil bij minder beweging.
   ===================================================================================== */

/* ---------------------------------------------------------------- het reuzenwoord: geen omlijning meer
   Tot 06-10-2026 had EMPIRE (en COFFEESHOP eronder) een witte omlijning via -webkit-text-stroke. Op Android in de
   geforceerde donkere modus werden letter en omlijning allebei wit, waardoor de C van COFFEESHOP dichtliep tot een O.
   Besluit Kerim 06-10: de omlijning gaat in alle gevallen weg. De letters zijn nu effen inkt zonder streek of
   schaduw, in licht en donker. (--rw-rand in tokens.css blijft staan maar wordt niet meer gebruikt.) */
.held-woord .reuzenwoord { -webkit-text-stroke: 0; text-shadow: none; }

/* ---------------------------------------------------------------- de Kennisbank-letter
   De keuze letter van de Kennisbank in de themakiezer (Lilita One of Fredoka) geldt voor de koppen van de
   Kennisbank en het Leerboek; de kopbalk, de voet en de lopende tekst blijven Archivo zoals overal. */
.kennis-letter,
.lesmodule .licht-kop, .lesmodule .licht-kop-klein, .lesmodule .eenheid-titel, .lesmodule .les-titel,
.lesmodule .zijkaart-titel, .lesmodule .feedback-kop, .lb-kop, .lb-weten-kop, .lb-oefen-kop, .lb-kaart-titel,
.lb-bronnen-kop {
  font-family: var(--font-licht-display); font-weight: var(--display-gewicht); letter-spacing: 0; color: var(--inkt);
}
.poster-kop.kennis-letter { line-height: 0.95; }

/* ---------------------------------------------------------------- de hero van de Kennisbank-pagina's */
.subheld-knoppen { margin-top: 6px; }
.subheld-noot { max-width: 46ch; font-size: 14px; line-height: 1.45; }
.subheld-hoofdstuk .intro { max-width: 52ch; font-size: 18px; line-height: 1.55; }

/* ---------------------------------------------------------------- lesmodule: banden en raster */
.kennis-band { padding-block: 48px 72px; }
.kennis-band .kennis-pagina { padding-block: 0; }
.lesmodule .leerpad-eenheden { gap: 48px; }

/* Eenheidskoppen als pastel kaarten (Slush): 1px zwart, 20px hoeken, de kleuren wisselen per eenheid. Geen
   hoofdkleur (Duolingo-groen of fel oranje) meer als vlak, in geen enkel palet. */
.lesmodule .eenheid {
  padding: 20px 24px; background: var(--sticker-5); color: var(--sticker-5-tekst);
  border: var(--omlijning); border-radius: var(--radius);
}
.lesmodule .eenheid-blok:nth-child(3n+2) .eenheid { background: var(--band-1); color: var(--inkt); }
.lesmodule .eenheid-blok:nth-child(3n+3) .eenheid { background: var(--band-3); color: var(--inkt); }
.lesmodule .eenheid-label { font-family: var(--font-ui); font-size: 12px; font-weight: 700; letter-spacing: var(--spatie-label); }
.lesmodule .eenheid-titel { margin-top: 2px; font-size: clamp(26px, 2.6vw, 32px); line-height: 1.05; color: inherit; }
.lesmodule .eenheid-omschrijving { font-size: 15px; font-weight: 500; line-height: 1.45; }

/* ---------------------------------------------------------------- lesmodule: het leerpad
   Knopen als witte cirkels met 1px zwart; open = het palet-accent gevuld (met een zwarte ring eromheen), klaar =
   mintgroen met een vinkje, op slot of binnenkort = wit met een grijs slot. Hover alleen een andere tint. */
.lesmodule .lespad { gap: 18px; }
.lesmodule .knoop {
  width: 64px; height: 64px; background: var(--papier); color: var(--inkt);
  border: var(--omlijning); border-radius: 50%;
}
.lesmodule .knoop .icoon { --icoon-maat: 28px; }
.lesmodule .lespad-stap .knoop-ring { padding: 5px; border: 1px solid transparent; }
.lesmodule .lespad-stap[data-toestand="open"] .knoop-ring { border-color: var(--inkt); }
.lesmodule [data-toestand="open"] .knoop { background: var(--accent); color: var(--accent-tekst); }
.lesmodule [data-toestand="klaar"] .knoop { background: var(--goed-vlak); color: var(--inkt); }
.lesmodule [data-toestand="slot"] .knoop, .lesmodule [data-toestand="binnenkort"] .knoop {
  background: var(--papier); color: var(--nevel-tekst); border-color: var(--inkt);
}
@media (hover: hover) {
  .lesmodule [data-toestand="open"] a.lespad-link[href]:hover .knoop { background: color-mix(in srgb, var(--accent) 82%, var(--papier)); }
  .lesmodule [data-toestand="klaar"] a.lespad-link[href]:hover .knoop { background: color-mix(in srgb, var(--goed-vlak) 70%, var(--papier)); }
}
.lesmodule a.lespad-link[href]:active .knoop { transform: translateY(1px); border-bottom-width: 1px; margin-bottom: 0; }
.lesmodule .knoop-start {
  padding: 7px 14px; background: var(--papier); color: var(--inkt); border: var(--omlijning);
  border-radius: var(--radius-knop); font-family: var(--font-ui); font-size: 12px; font-weight: 700;
  letter-spacing: var(--spatie-label);
}
.lesmodule .knoop-start::after {
  width: 10px; height: 10px; background: var(--papier);
  border-right: var(--omlijning); border-bottom: var(--omlijning); transform: translate(-50%, -5px) rotate(45deg);
}
.lesmodule .les-nummer { font-family: var(--font-ui); font-size: 12px; font-weight: 700; letter-spacing: var(--spatie-label); color: var(--inkt); }
.lesmodule .les-titel { font-size: 22px; line-height: 1.1; }
.lesmodule .les-doel { font-size: 15px; color: var(--inkt); }
.lesmodule .les-status > span { font-family: var(--font-ui); font-size: 12px; font-weight: 700; letter-spacing: var(--spatie-label); }
.lesmodule .st-klaar, .lesmodule .st-open { color: var(--inkt); }
.lesmodule .st-slot, .lesmodule .st-binnenkort { color: var(--tekst-zacht); }
.lesmodule .lespad-link { border-radius: var(--radius); }
/* Start en Lees eerst het hoofdstuk onder het leerdoel, in de tekstkolom (05-10, Kerim). */
.lespad-acties { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin: 2px 0 6px calc(var(--rail) + 20px); }
.lespad-start .icoon { --icoon-maat: 16px; }
.lespad-start:not([href]), .lespad-start:not([href]):hover {
  background: var(--knop-uit-vlak); color: var(--knop-uit-tekst); border-color: var(--knop-uit-rand); cursor: not-allowed;
}
.lespad-hoofdstuk { font-size: 14px; }
.gelezen-tag {
  display: inline-flex; align-items: center; gap: 4px; margin-left: 2px; padding: 3px 8px; background: var(--goed-vlak);
  color: var(--inkt); border: var(--omlijning); border-radius: var(--radius-knop); font-size: 11px; font-weight: 700;
  line-height: 1; letter-spacing: var(--spatie-label); text-transform: uppercase; text-decoration: none;
}
.gelezen-tag .icoon { --icoon-maat: 12px; }

/* ---------------------------------------------------------------- lesmodule: zijkolom en tellers */
.lesmodule .zijkaart { gap: 12px; padding: 22px; background: var(--papier); color: var(--inkt); border: var(--omlijning); border-radius: var(--radius); }
.lesmodule .zijkaart-titel { font-size: 24px; line-height: 1.1; }
.lesmodule .zijstats li, .lesmodule .zijstats strong { color: var(--inkt); }
.lesmodule .zijstats strong { font-weight: 700; }
.lesmodule .zijstats .icoon:not(.vol-icoon) { color: var(--inkt); }
.lesmodule .zijnoot { color: var(--inkt); }
.lesmodule .vol-icoon .vol { stroke: var(--inkt); }
.lesmodule .leven.is-leeg .vol { fill: var(--nevel); stroke: var(--nevel-tekst); }

/* ---------------------------------------------------------------- lesmodule: de speler (les.html) */
.les-band { padding-block: 16px 64px; }
@media (min-width: 900px) { .les-band { padding-top: 112px; } }
.lesmodule .les-pagina { min-height: calc(100vh - 160px); min-height: calc(100svh - 160px); padding-block: 8px 32px; }
.lesmodule .licht-kop { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.05; }
.lesmodule .speler-label, .lesmodule .speler-meta, .lesmodule .speler-melding {
  font-family: var(--font-ui); font-size: 12px; font-weight: 700; letter-spacing: var(--spatie-label); color: var(--inkt);
}
.lesmodule .speler-doel { font-size: 17px; line-height: 1.55; }
.speler-hoofdstuk { font-size: 15px; }
.lesmodule .sluitknop { background: var(--papier); color: var(--inkt); border: var(--omlijning); border-radius: 50%; transition: background-color var(--zweef-duur) ease; }
@media (hover: hover) { .lesmodule .sluitknop:hover { background: var(--band-3); } }
/* Voortgangsbalk: zwart op een lichte baan (witte baan met 1px zwart). */
.lesmodule .voortgang { background: var(--papier); border: var(--omlijning); }
.lesmodule .voortgang-vul { background: var(--inkt); }
.lesmodule .voortgang-vul::after { display: none; }
.lesmodule .ballon {
  background: var(--papier); color: var(--inkt); border: var(--omlijning); border-radius: var(--radius);
  font-family: var(--font-ui); font-weight: 700;
}
.lesmodule .ballon::before { border-left: var(--omlijning); border-bottom: var(--omlijning); left: -8px; }
/* Antwoordkaarten: wit met 1px zwart; gekozen = 4px onderrand in het palet-accent en een zwart nummer (kleur is
   nooit het enige signaal); goed = mintgroen vlak, fout = zacht rood vlak, beide met zwarte tekst. De hoogte
   blijft gelijk: de 3px extra onderrand gaat van de padding af. */
.lesmodule .antwoord {
  padding-bottom: 15px; background: var(--papier); color: var(--inkt);
  border: var(--omlijning); border-bottom-width: 1px; border-radius: var(--radius); font-family: var(--font-ui);
}
.lesmodule .antwoord-nr { background: var(--papier); color: var(--inkt); border: var(--omlijning); border-radius: 50%; font-family: var(--font-ui); font-weight: 700; }
.lesmodule .antwoord.is-zweef { background: var(--band-1); }
@media (hover: hover) { .lesmodule .antwoord:not(:disabled):hover { background: var(--band-1); } }
.lesmodule .antwoord:not(:disabled):active, .lesmodule .antwoord.is-actief { transform: translateY(1px); border-bottom-width: 1px; margin-bottom: 0; }
.lesmodule .antwoord.is-geselecteerd, .lesmodule .antwoord.is-geselecteerd:hover, .lesmodule .antwoord.is-geselecteerd:not(:disabled):hover {
  padding-bottom: 12px; background: var(--papier); border-color: var(--inkt); border-bottom: 4px solid var(--accent);
}
.lesmodule .antwoord.is-geselecteerd .antwoord-nr { background: var(--inkt); color: var(--papier); border-color: var(--inkt); }
.lesmodule .antwoord.is-goed, .lesmodule .antwoord.is-goed:hover, .lesmodule .antwoord.is-goed:not(:disabled):hover {
  background: var(--goed-vlak); color: var(--inkt); border-color: var(--inkt);
}
.lesmodule .antwoord.is-fout, .lesmodule .antwoord.is-fout:hover, .lesmodule .antwoord.is-fout:not(:disabled):hover {
  background: var(--fout-zacht); color: var(--inkt); border-color: var(--inkt);
}
.lesmodule .antwoord.is-goed .antwoord-nr, .lesmodule .antwoord.is-fout .antwoord-nr { background: var(--papier); color: var(--inkt); border-color: var(--inkt); }
.lesmodule .antwoord:disabled:not(.is-goed):not(.is-fout), .lesmodule .antwoord:disabled:not(.is-goed):not(.is-fout) .antwoord-nr { color: var(--tekst-zacht); }
/* Woordchips en gaten */
.lesmodule .woordchip {
  background: var(--papier); color: var(--inkt); border: var(--omlijning); border-radius: var(--radius-knop);
  font-family: var(--font-ui); font-weight: 700;
}
@media (hover: hover) { .lesmodule button.woordchip:hover { background: var(--band-1); } }
.lesmodule button.woordchip:active { transform: translateY(1px); border-bottom-width: 1px; margin-bottom: 0; }
.lesmodule .woordchip.is-gebruikt { background: var(--nevel); color: transparent; border-color: var(--beton); }
.lesmodule .gat { border-bottom: 1px solid var(--inkt); }
.lesmodule .gat.is-goed .woordchip { background: var(--goed-vlak); color: var(--inkt); border-color: var(--inkt); }
.lesmodule .gat.is-fout .woordchip { background: var(--fout-zacht); color: var(--inkt); border-color: var(--inkt); }
.lesmodule .gat.gat-volgorde { border: 1px dashed var(--inkt); border-radius: var(--radius); }
.lesmodule .gat.gat-volgorde.is-gevuld { border-color: transparent; }
.lesmodule .gat-volgorde .woordchip, .lesmodule .woordbank .woordchip { border-radius: var(--radius); }
.lesmodule .volgorde-nr { color: var(--inkt); border: var(--omlijning); border-radius: 50%; font-family: var(--font-ui); font-weight: 700; }
.lesmodule .lesvoet { border-top: var(--omlijning); }
/* Feedbackpanelen: goed mintgroen, fout zacht rood, overgeslagen wit; 1px zwart; Doorgaan is de zwarte pil. */
.lesmodule .feedback {
  color: var(--inkt); border: var(--omlijning); border-radius: var(--radius);
  --knop-vlak: var(--inkt); --knop-tekst: var(--papier); --knop-onder: var(--inkt); --knop-omlijning: var(--inkt);
}
.lesmodule .feedback-goed { background: var(--goed-vlak); }
.lesmodule .feedback-fout { background: var(--fout-zacht); }
.lesmodule .feedback-over { background: var(--papier); }
.lesmodule .feedback .feedback-kop { font-size: 26px; line-height: 1.05; color: var(--inkt); }
.lesmodule .feedback-teken { border: var(--omlijning); }
.lesmodule .feedback-antwoord, .lesmodule .feedback .feedback-antwoord, .lesmodule .feedback-uitleg, .lesmodule .feedback-bron { color: var(--inkt); }
.lesmodule .feedback-antwoord { font-weight: 700; }
.lesmodule .feedback-bron a { color: var(--inkt); }
.feedback-hoofdstuk { margin-top: 6px; }
.feedback-hoofdstuk a {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; color: var(--inkt); font-size: 15px; font-weight: 700;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.feedback-hoofdstuk .icoon { --icoon-maat: 16px; }
@media (hover: hover) { .feedback-hoofdstuk a:hover { text-decoration-thickness: 3px; } }
.feedback-hoofdstuk a:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
/* Klaar-scherm */
.lesmodule .uitslag li { background: var(--papier); color: var(--inkt); border: var(--omlijning); border-radius: var(--radius); }
.lesmodule .uitslag strong { color: var(--inkt); font-weight: 700; }
.lesmodule .uitslag .icoon:not(.vol-icoon) { color: var(--inkt); }
.lesmodule .uitslag-bonus {
  padding: 8px 14px; background: var(--goed-vlak); color: var(--inkt); border: var(--omlijning);
  border-radius: var(--radius-knop); font-weight: 700;
}
.lesmodule .uitslag-noot { color: var(--inkt); }
.uitslag-hoofdstuk .tekstlink { font-size: 15px; }
.lesmodule .les-hervat { display: inline-block; background: var(--papier); color: var(--inkt); border: var(--omlijning); border-radius: var(--radius-knop); font-weight: 700; }

/* ---------------------------------------------------------------- lesmodule: bronnen.html */
.lesmodule .bron { background: var(--papier); border: var(--omlijning); border-radius: var(--radius); }
.lesmodule .bron-link, .lesmodule .bron-omschrijving, .lesmodule .hulp-naam { color: var(--inkt); }
.lesmodule .bron-link { font-weight: 700; }
.lesmodule .bron-domein, .lesmodule .bronnen-datum { color: var(--tekst-zacht); }
.lesmodule .eenheid-label-licht { font-family: var(--font-ui); font-size: 12px; font-weight: 700; letter-spacing: var(--spatie-label); color: var(--inkt); }
.lesmodule .licht-kop-klein { font-size: clamp(26px, 2.6vw, 30px); line-height: 1.1; }
.lesmodule .werkwijze .icoon { color: var(--inkt); }
.lesmodule .hulp-naam { font-weight: 700; }

/* ---------------------------------------------------------------- het Leerboek: overzicht (leerboek.html) */
.lb-lijst { display: grid; gap: 16px; }
@media (min-width: 900px) { .lb-lijst, .lb-gepland-vak { margin-left: 96px; } }
.lb-kaart {
  display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: start; gap: 16px; padding: 20px 22px;
  background: var(--papier); color: var(--inkt); border: var(--omlijning); border-radius: var(--radius);
}
.lb-nr {
  display: grid; place-items: center; width: 52px; height: 52px; background: var(--papier); color: var(--inkt);
  border: var(--omlijning); border-radius: 50%; font-family: var(--font-licht-display); font-weight: var(--display-gewicht);
  font-size: 24px; line-height: 1;
}
.lb-kaart.is-gelezen .lb-nr { background: var(--goed-vlak); }
.lb-kaart-tekst { display: grid; justify-items: start; gap: 6px; min-width: 0; }
.lb-kaart-meta, .lb-gepland-kop { font-size: 12px; font-weight: 700; line-height: 1.2; letter-spacing: var(--spatie-label); text-transform: uppercase; }
.lb-kaart-titel { font-size: clamp(22px, 2.2vw, 26px); line-height: 1.05; }
.lb-kaart-titel a { color: inherit; text-decoration: none; }
@media (hover: hover) { .lb-kaart-titel a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; } }
.lb-kaart-titel a:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.lb-kaart-intro { max-width: 60ch; font-size: 16px; line-height: 1.5; }
.lb-status > span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; line-height: 1; letter-spacing: var(--spatie-label); text-transform: uppercase; }
.lb-status-nee { color: var(--tekst-zacht); }
.lb-status-ja { padding: 5px 10px; background: var(--goed-vlak); border: var(--omlijning); border-radius: var(--radius-knop); }
.lb-status .icoon { --icoon-maat: 14px; }
.lb-kaart-knoppen { align-items: center; gap: 4px 16px; margin-top: 4px; }
.lb-gepland-vak { display: grid; gap: 10px; }
.lb-gepland { display: grid; gap: 8px; }
.lb-gepland li { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--tekst-zacht); }
.lb-gepland .icoon { --icoon-maat: 16px; }
.lb-teller { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; }
.lb-teller strong { font-size: 22px; }
.lb-werkwijze { display: grid; gap: 10px; }
.lb-werkwijze li { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: start; gap: 10px; font-size: 15px; line-height: 1.45; }
.lb-stap-nr { display: grid; place-items: center; width: 28px; height: 28px; background: var(--papier); border: var(--omlijning); border-radius: 50%; font-size: 13px; font-weight: 700; line-height: 1; }

/* ---------------------------------------------------------------- het Leerboek: een hoofdstuk (tijdschrift)
   Leesbaar: 17 px op 1,6 en regels van hooguit 70 tekens (max-width in ch, gemeten in qa_v2_paginas.mjs). */
.lb-band { padding-block: 56px 72px; }
.lb-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
@media (min-width: 900px) { .lb-raster { padding-left: 96px; } }
@media (min-width: 1100px) { .lb-raster { grid-template-columns: minmax(0, 660px) 280px; justify-content: space-between; align-items: start; } }
.lb-artikel { display: grid; gap: 40px; min-width: 0; }
.lb-blok { display: grid; gap: 12px; }
.lb-blok > p, .lb-weten p, .lb-oefen p { max-width: 50ch; font-size: 17px; line-height: 1.6; }
.lb-kop { font-size: clamp(26px, 2.6vw, 32px); line-height: 1.05; }
.lb-onthoud {
  position: relative; display: grid; gap: 10px; max-width: 600px; margin-top: 16px; padding: 28px 22px 20px;
  background: var(--band-1); color: var(--inkt); border: var(--omlijning); border-radius: var(--radius);
}
.lb-onthoud-label {
  position: absolute; top: -17px; left: 18px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 14px 4px 4px;
  background: var(--papier); color: var(--inkt); border: var(--omlijning); border-radius: var(--radius-knop);
  font-size: 12px; font-weight: 700; line-height: 1; letter-spacing: var(--spatie-label); text-transform: uppercase; rotate: -3deg;
}
.lb-onthoud-icoon { display: grid; place-items: center; width: 26px; height: 26px; background: var(--sticker-1); color: var(--sticker-1-tekst); border: var(--omlijning); border-radius: 50%; }
.lb-onthoud-icoon .icoon { --icoon-maat: 16px; }
.lb-feiten { display: grid; gap: 8px; }
.lb-feiten li { position: relative; max-width: 50ch; padding-left: 22px; font-size: 17px; font-weight: 700; line-height: 1.5; }
.lb-feiten li::before { content: ""; position: absolute; left: 3px; top: 0.6em; width: 8px; height: 8px; background: var(--inkt); border-radius: 50%; }
.lb-weten {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: 8px 20px; padding: 22px 26px 22px 18px;
  background: var(--sticker-5); color: var(--sticker-5-tekst); border: var(--omlijning); border-radius: var(--radius-groot);
}
.lb-weten-tekst { display: grid; gap: 8px; padding-bottom: 4px; }
.lb-weten-kop { font-size: clamp(24px, 2.4vw, 28px); line-height: 1.05; color: inherit; }
.lb-weten-koning { --accent-hoogte: 128px; }
.lb-bronnen { display: grid; gap: 10px; padding-top: 22px; border-top: var(--omlijning); }
.lb-bronnen-kop { font-size: 24px; line-height: 1.1; }
.lb-bronlijst { display: grid; gap: 6px; }
.lb-bron {
  display: inline-flex; align-items: flex-start; gap: 6px; color: var(--inkt); font-size: 15px; font-weight: 700; line-height: 1.4;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
@media (hover: hover) { .lb-bron:hover { text-decoration-thickness: 2px; } }
.lb-bron .icoon { --icoon-maat: 16px; margin-top: 2px; }
.lb-bron:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.lb-einde { display: grid; gap: 20px; justify-items: start; }
.lb-gelezen {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; background: var(--goed-vlak); color: var(--inkt);
  border: var(--omlijning); border-radius: var(--radius-knop); font-size: 14px; font-weight: 700;
}
.lb-gelezen .icoon { --icoon-maat: 16px; }
.lb-oefen { display: grid; justify-items: start; gap: 12px; width: 100%; background: var(--band-3); color: var(--inkt); }
.lb-oefen-kop { font-size: clamp(28px, 3vw, 36px); line-height: 1; }
.lb-buren { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 24px; width: 100%; }
.lb-vorige .icoon { transform: scaleX(-1); }
.lb-volgende { margin-left: auto; }
.lb-zij { display: none; }
@media (min-width: 1100px) { .lb-zij { display: block; position: sticky; top: 104px; } }
.lb-inhoudlijst { display: grid; gap: 2px; }
.lb-inhoudlijst a { display: block; padding: 7px 0; color: var(--inkt); font-size: 15px; font-weight: 700; line-height: 1.3; text-decoration: none; }
@media (hover: hover) { .lb-inhoudlijst a:hover { text-decoration: underline; text-underline-offset: 3px; } }
.lb-inhoudlijst a:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }

/* ---------------------------------------------------------------- lesmodule en leerboek: smaller */
@media (max-width: 639px) {
  .kennis-band, .lb-band { padding-block: 36px 56px; }
  .lesmodule .eenheid { padding: 18px; }
  .lespad-acties { margin-left: calc(var(--rail) + 14px); }
  .lesmodule .knoop { width: 56px; height: 56px; }
  .lesmodule .knoop .icoon { --icoon-maat: 24px; }
  .lesmodule .les-titel { font-size: 20px; }
  .lb-kaart { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 16px; }
  .lb-nr { width: 40px; height: 40px; font-size: 20px; }
  .lb-weten { grid-template-columns: minmax(0, 1fr); justify-items: start; padding: 20px; }
  .lb-weten-koning { --accent-hoogte: 96px; }
  .lb-onthoud { padding: 26px 16px 18px; }
}

/* ---------------------------------------------------------------- voet: Pagina's in twee kolommen (Kerim 05-10)
   Acht links onder elkaar maakten de voet te hoog (de paginakolom eindigde 175 px lager dan de rest). Nu twee
   kolommen van vier onder één kop: links Home t/m Leerboek, rechts Route t/m Bronnen en uitleg. Zonder ruimte
   tussen de regels eindigt de paginakolom op dezelfde hoogte als Bezoek (vier regels) en het merkblok. De
   verticale marges iets kleiner; onderin blijft genoeg lucht voor de themaknop (44 px hoog, 16 px van de rand). */
.voet-volledig { padding-top: 40px; }
.voet-volledig .voet-raster { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.5fr); }
.voet-volledig .voet-lijst-twee { grid-template-rows: repeat(4, auto); grid-auto-flow: column; gap: 0 20px; }
.voet-volledig .voet-lijst li { font-size: 15px; line-height: 1.5; }
.voet-volledig .voet-onder { margin-top: 24px; }
@media (min-width: 640px) { .voet-volledig { padding-bottom: 76px; } }
@media (max-width: 1023px) { .voet-volledig .voet-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .voet-volledig .voet-raster { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------- lesmodule in beweging (Kerim 05-10, na het spelen van les 1)
   Vloeiend en kleurrijk, binnen de poster-stijl: alleen transform (los scale, translate, rotate), opacity en
   kleurovergangen; geen layout-animaties. Bij prefers-reduced-motion staat alles stil en meteen in de eindtoestand
   (het blok "homepage: minder beweging = stil" zet in poster alle animaties en overgangen uit; quiz.js maakt dan
   geen confetti en telt de XP niet op). */

/* Antwoordkaarten: hover met een zachte overgang en lichte schaal; kiezen = een korte indruk; goed = groen met een
   pulse en een vinkje dat inpopt; fout = drie keer schudden en zacht rood. */
.lesmodule .antwoord { transition: background-color 200ms ease, border-color 200ms ease, scale 200ms ease; }
@media (hover: hover) { .lesmodule .antwoord:not(:disabled):hover { scale: 1.02; } }
.lesmodule .antwoord.is-geselecteerd { animation: indruk 180ms var(--veer); }
.lesmodule .antwoord.is-goed { animation: puls 320ms ease-out; }
.lesmodule .antwoord.is-fout { animation: schud 360ms ease-in-out; }
.lesmodule .antwoord.is-goed .antwoord-nr .icoon, .lesmodule .antwoord.is-fout .antwoord-nr .icoon { animation: pop-in 320ms var(--veer) 80ms both; }
.lesmodule .gat.is-goed .woordchip { animation: puls 320ms ease-out; }
.lesmodule .gat.is-fout .woordchip { animation: schud 360ms ease-in-out; }
.lesmodule .woordchip { transition: background-color 200ms ease, border-color 200ms ease, scale 200ms ease; }
@media (hover: hover) { .lesmodule button.woordchip:not(:disabled):hover { scale: 1.02; } }
@keyframes indruk { from { scale: 0.98; } to { scale: 1; } }
@keyframes puls { 0%, 100% { scale: 1; } 50% { scale: 1.04; } }
@keyframes schud {
  0%, 100% { translate: 0 0; } 16.6% { translate: -4px 0; } 33.3% { translate: 4px 0; }
  50% { translate: -4px 0; } 66.6% { translate: 4px 0; } 83.3% { translate: -4px 0; }
}
@keyframes pop-in { from { scale: 0; } to { scale: 1; } }

/* De vraag: de nieuwe schuift in van rechts, de oude (een stille kopie, aria-hidden) vervaagt naar links. */
.lesmodule .speler-vraag { position: relative; }
.lesmodule .vraag-inhoud.is-in { animation: vraag-in 260ms ease-out both; }
.vraag-spook { position: absolute; left: 0; right: 0; z-index: 2; pointer-events: none; animation: vraag-uit 180ms ease-in forwards; }
@keyframes vraag-in { from { opacity: 0; translate: 24px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes vraag-uit { to { opacity: 0; translate: -16px 0; } }

/* Het feedbackpaneel schuift in van onderen; de koning popt in (120 ms later) en maakt bij goed een hup; Doorgaan
   verschijnt net na het paneel, zodat de volgorde leesbaar blijft. */
.lesmodule .feedback { position: relative; animation: paneel-in 320ms ease-out both; }
.lesmodule .feedback .mascotte { animation: koning-pop 300ms var(--veer) 120ms both; }
.lesmodule .feedback-goed .mascotte { animation: koning-pop 300ms var(--veer) 120ms both, hup-klein 560ms var(--veer) 440ms 1; }
.lesmodule .feedback > .knop { animation: knop-in 200ms ease-out 260ms both; }
@keyframes paneel-in { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }
@keyframes koning-pop { from { opacity: 0; scale: 0.4; } to { opacity: 1; scale: 1; } }
@keyframes hup-klein { 0%, 100% { translate: 0 0; } 40% { translate: 0 -12px; } }
@keyframes knop-in { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }

/* Confetti: losse vierkantjes in de stickerkleuren met een zwart randje (quiz.js maakt ze en ruimt ze op). */
.confetti { position: absolute; left: 50%; top: 30%; z-index: 5; width: 0; height: 0; pointer-events: none; --duur: 700ms; }
.confetti-rustig { top: 18%; --duur: 1500ms; }
.snipper {
  position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; background: var(--sticker-1);
  border: var(--omlijning); border-radius: 2px; opacity: 0;
  animation: snipper var(--duur) cubic-bezier(0.2, 0.75, 0.35, 1) forwards;
}
.snipper:nth-child(6n+2) { background: var(--sticker-2); }
.snipper:nth-child(6n+3) { background: var(--sticker-3); }
.snipper:nth-child(6n+4) { background: var(--sticker-4); }
.snipper:nth-child(6n+5) { background: var(--sticker-5); }
.snipper:nth-child(6n) { background: var(--accent); width: 8px; height: 12px; }
@keyframes snipper {
  0% { opacity: 1; translate: 0 0; rotate: 0deg; scale: 1; }
  70% { opacity: 1; }
  100% { opacity: 0; translate: var(--dx, 0) var(--dy, 0); rotate: var(--draai, 0deg); scale: 0.7; }
}

/* Voortgangsbalk: de vulling groeit vloeiend (scaleX op een binnenlaag) en bij elke stap loopt er een kort
   lichtstreepje overheen (een element zo breed als de baan, met het streepje aan de rechterkant). */
.lesmodule .voortgang-vul {
  width: 100%; border-radius: 0; transform: scaleX(var(--vul, 0)); transform-origin: 0 50%;
  transition: transform 400ms cubic-bezier(0.3, 0.7, 0.3, 1);
}
.voortgang-streep { position: absolute; inset: 0; pointer-events: none; translate: -100% 0; }
.voortgang-streep::after { content: ""; position: absolute; right: 0; top: 3px; bottom: 3px; width: 22px; background: var(--glans-sterk); border-radius: 999px; }
.voortgang.is-stap .voortgang-streep { animation: streep 650ms ease-out 120ms both; }
@keyframes streep {
  from { translate: -100% 0; opacity: 1; }
  80% { opacity: 1; }
  to { translate: calc((var(--vul, 0) - 1) * 100%) 0; opacity: 0; }
}

/* Kroontjes: bij verlies kantelt en vervaagt het kroontje, bij herstel popt het terug. */
.lesmodule .leven .vol-icoon { transition: rotate 400ms var(--veer), scale 400ms var(--veer), opacity 400ms ease; }
.lesmodule .leven .vol { transition: fill 400ms ease, stroke 400ms ease; }
.lesmodule .leven.is-leeg .vol-icoon { rotate: -20deg; scale: 0.6; opacity: 0.35; transition-timing-function: ease-out; }

/* Afronden: de koning juicht met een hup-lus; quiz.js telt de XP op en laat rustige confetti vallen. */
.lesmodule [data-scherm="klaar"] { position: relative; }
.lesmodule [data-scherm="klaar"] > .mascotte { animation: koning-hup 2.2s linear -0.6s infinite; }

/* ---------------------------------------------------------------- tellers in kleur (kopbalk en voortgangskaart) */
.t-kal {
  position: relative; display: inline-grid; place-items: center; flex: none; width: 26px; height: 26px; padding-top: 5px;
  background: var(--teller-streak); border: var(--omlijning); border-radius: 7px;
}
.t-kal::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--inkt); border-radius: 5px 5px 0 0; }
.t-kal-dag { position: relative; color: var(--papier); font-size: 12px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.t-xp { display: inline-grid; place-items: center; flex: none; width: 26px; height: 26px; background: var(--inkt); border-radius: 50%; animation: flits 6s ease-in-out infinite; }
.t-xp .icoon { --icoon-maat: 16px; }
.t-xp-vlak { fill: var(--teller-xp); stroke: var(--teller-xp); stroke-width: 1; stroke-linejoin: round; }
.t-klaar { display: inline-grid; place-items: center; flex: none; width: 26px; height: 26px; background: var(--teller-klaar); color: var(--inkt); border: var(--omlijning); border-radius: 50%; }
.t-klaar .icoon { --icoon-maat: 14px; }
@keyframes flits { 0%, 88%, 100% { scale: 1; } 92% { scale: 1.28; } 96% { scale: 0.94; } }

/* In de kopbalk van de Kennisbank en het Leerboek: dezelfde pil, met rechts de drie tellers (vanaf 1200 px, daar
   passen ze naast de zes tabs). */
.kopbalk-tellers { display: none; align-items: center; gap: 14px; flex: none; }
@media (min-width: 1200px) { .kopbalk-tellers { display: flex; } }
.kt { display: inline-flex; align-items: center; gap: 6px; color: var(--inkt); font-size: 12px; font-weight: 700; line-height: 1; letter-spacing: var(--spatie-label); }
.kt strong { font-family: var(--font-licht-display); font-weight: var(--display-gewicht); font-size: 20px; letter-spacing: 0; }
.kt .leven .vol-icoon { --icoon-maat: 24px; }
.kt .vol-icoon .vol { stroke: var(--inkt); }

/* De voortgangskaart: een pastelband als kop met de koning (juicht zodra er een les klaar is, anders zwaait hij) en
   drie tegels met een kleurvlak, het getal groot in de Kennisbank-letter en het label klein. */
.lesmodule .zijkaart-voortgang { overflow: clip; }
/* De koning staat verticaal gecentreerd in de kopband, met de hup meegerekend (Kerim 05-10): de band is 96 px hoog, de
   koning 64 px; in rust 20 px lucht boven en 12 px onder, op het hoogste punt van de hup (8 px) 12 px boven. Zo
   raakt de laagste stand de lijn nooit en is de ruimte boven en onder de hele beweging gelijk. De zwaaiende koning
   (nog geen les klaar) beweegt niet en staat precies in het midden (16 en 16 px). */
.voortgang-band {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 96px; margin: -22px -22px 4px;
  padding: 0 18px 0 22px; background: var(--band-1); border-bottom: var(--omlijning);
}
.voortgang-koning { height: 64px; transform-origin: 50% 100%; }
.voortgang-koning[data-koning-klaar] { margin-top: 8px; animation: koning-hup-klein 3.2s linear -1s infinite; }
@keyframes koning-hup-klein {
  0%, 70%, 100% { translate: 0 0; scale: 1; }
  76% { translate: 0 0; scale: 1.03 0.96; animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1); }
  85% { translate: 0 -8px; scale: 0.98 1.03; animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); }
  93% { translate: 0 0; scale: 1.02 0.98; animation-timing-function: ease-out; }
}
.teltegels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.teltegel { display: grid; grid-template-rows: auto 36px auto; justify-items: start; align-content: start; gap: 6px; min-width: 0; padding: 12px 8px 12px 10px; color: var(--inkt); border: var(--omlijning); border-radius: 16px; container-type: inline-size; }
.teltegel-streak { background: var(--teller-streak-vlak); }
.teltegel-xp { background: var(--teller-xp-vlak); }
.teltegel-klaar { background: var(--teller-klaar-vlak); }
/* Getal en label op dezelfde basislijn in alle drie de tegels: de regel van het getal heeft overal dezelfde hoogte en
   dezelfde steunletter (32 px Kennisbank-letter), het getal zelf staat op die basislijn en krimpt met het aantal
   tekens (--tekens, gezet door quiz.js) mee met de breedte van de tegel: 100cqi gedeeld door de tekens maal 0,58
   (de breedte van een cijfer in Lilita One en Fredoka, met marge), hooguit 32 px. Labels kort en op één regel. */
.teltegel-getal { display: block; width: 100%; height: 36px; overflow: hidden; font-family: var(--font-licht-display); font-weight: var(--display-gewicht); font-size: 32px; line-height: 36px; white-space: nowrap; }
.teltegel strong { font-family: inherit; font-weight: inherit; font-size: min(32px, calc(100cqi / (var(--tekens, 3) * 0.58))); line-height: 1; }
.teltegel-label { font-size: clamp(10px, 15cqi, 12px); font-weight: 700; line-height: 1.25; letter-spacing: 0; white-space: nowrap; }
.teltegel .t-kal, .teltegel .t-xp, .teltegel .t-klaar { width: 32px; height: 32px; }
.teltegel .t-kal { padding-top: 7px; }
.teltegel .t-kal::before { height: 8px; }
.teltegel .t-kal-dag { font-size: 13px; }
.teltegel .t-xp .icoon { --icoon-maat: 20px; }
.teltegel .t-klaar .icoon { --icoon-maat: 17px; }
.teltegel-klaar.is-nieuw .t-klaar { animation: pop-groot 520ms var(--veer) 300ms both; }
@keyframes pop-groot { 0% { scale: 0.4; } 60% { scale: 1.25; } 100% { scale: 1; } }

/* Het leerpad: knopen verbonden door een stippellijn (quiz.js tekent hem), groen tot de laatst afgeronde les; een
   afgeronde les popt gestaffeld in bij het laden; de actieve les heeft een zacht pulserende ring in het accent. */
.lesmodule .eenheid-blok { position: relative; }
.lesmodule .lespad { position: relative; z-index: 1; }
.lespad-lijn { position: absolute; left: 0; top: 0; z-index: 0; overflow: visible; pointer-events: none; }
.lespad-lijn path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.lespad-lijn .lijn-klaar { stroke: var(--teller-klaar); stroke-width: 8; stroke-dasharray: 0 14; }
.lespad-lijn .lijn-rest { stroke: var(--beton); stroke-width: 5; stroke-dasharray: 0 12; }
.lesmodule [data-toestand="klaar"] .knoop { animation: knoop-pop 460ms var(--veer) both; animation-delay: calc(var(--i, 0) * 110ms + 150ms); }
.lesmodule .lespad-stap.is-start .knoop-ring { position: relative; }
.lesmodule .lespad-stap.is-start .knoop-ring::after {
  content: ""; position: absolute; inset: -3px; border: 3px solid var(--accent); border-radius: 50%; pointer-events: none;
  animation: ring-puls 2.2s ease-out infinite;
}
@keyframes knoop-pop { from { opacity: 0; scale: 0.3; } to { opacity: 1; scale: 1; } }
@keyframes ring-puls { 0% { opacity: 0.9; scale: 1; } 100% { opacity: 0; scale: 1.45; } }
@media (max-width: 639px) {
  .teltegels { gap: 6px; }
  .teltegel { padding: 10px 6px 10px 8px; }
}

/* Afrondscherm: dezelfde gekleurde tellers als de voortgangskaart; de drie tegels komen gestaffeld binnen. */
.lesmodule .uitslag .uitslag-xp { background: var(--teller-xp-vlak); }
.lesmodule .uitslag .uitslag-goed { background: var(--teller-klaar-vlak); }
.lesmodule .uitslag .uitslag-streak { background: var(--teller-streak-vlak); }
.lesmodule .uitslag strong { font-family: var(--font-licht-display); font-weight: var(--display-gewicht); font-size: 24px; }
.lesmodule [data-scherm="klaar"] .uitslag li { animation: tegel-in 380ms var(--veer) both; }
.lesmodule [data-scherm="klaar"] .uitslag li:nth-child(2) { animation-delay: 120ms; }
.lesmodule [data-scherm="klaar"] .uitslag li:nth-child(3) { animation-delay: 240ms; }
@keyframes tegel-in { from { opacity: 0; translate: 0 12px; scale: 0.9; } to { opacity: 1; translate: 0 0; scale: 1; } }

/* ---------------------------------------------------------------- homepage: de koning minder vaak (Kerim 05-10)
   Al jaren een begrip: links een fotosticker van de gevel (licht gedraaid, 1px zwart, geen schaduw) met de zwevende
   pin en ster eromheen; de reviews: rechts van de kop alleen een kleine sticker met het cijfer. */
.begrip-beeld .begrip-foto { --draai: -3deg; width: min(100%, 300px); }
/* Vierkant, zodat de band even hoog blijft als met de koning (456 px op 1280, 548 px op 375). */
.begrip-foto img { aspect-ratio: 1 / 1; }
.begrip-beeld .zweef { z-index: 2; }
.sticker-cijfer { align-self: center; font-size: 15px; --draai: 5deg; }
@media (max-width: 639px) {
  .begrip-beeld .begrip-foto { width: 124px; }
  .begrip-beeld .begrip-foto figcaption { font-size: 10px; padding: 6px 2px 8px; }
  .sticker-cijfer { font-size: 12px; }
}

/* =====================================================================================
   05-10-2026 (NACHT, Kerim): kleur in de zijkolommen van Kennisbank en Leerboek, de
   hoofdstukkaarten in de kleur van hun eenheid, en de beloningen van Dreambro's (band
   Leren loont, de kaart Jouw korting, de regel op het klaar-scherm). Alles uit tokens.css;
   geen verlopen, geen box-shadow; beweging alleen via transform, scale en opacity.
   ===================================================================================== */

/* ---------------------------------------------------------------- zijkaarten in kleur (Kennisbank en Leerboek)
   Voorlichting lila (sticker-5) met de wijzende koning, Vragen of zorgen lichtblauw met een telefoonrondje, Zo werkt
   het leerboek op band-1 met genummerde rondjes in geel, blauw en mint. De voortgangskaart was al in kleur. */
.lesmodule .zijkaart-kop-rij { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.lesmodule .zijkaart-koning { --accent-hoogte: 76px; flex: none; margin: -8px -6px -4px 0; }
.lesmodule .zijkaart-uitleg { background: var(--sticker-5); color: var(--sticker-5-tekst); }
.lesmodule .zijkaart-uitleg .zijkaart-titel, .lesmodule .zijkaart-uitleg p { color: inherit; }
.lesmodule .zijkaart-hulp { background: var(--teller-streak-vlak); }
.t-tel { display: inline-grid; place-items: center; flex: none; width: 38px; height: 38px; background: var(--teller-streak); color: var(--inkt); border: var(--omlijning); border-radius: 50%; }
.t-tel .icoon { --icoon-maat: 18px; }
.lesmodule .zijkaart-werkwijze { background: var(--band-1); }
.lb-werkwijze-kleur li:nth-child(1) .lb-stap-nr, .beloning-hoe li:nth-child(1) .lb-stap-nr { background: var(--sticker-1); color: var(--sticker-1-tekst); }
.lb-werkwijze-kleur li:nth-child(2) .lb-stap-nr, .beloning-hoe li:nth-child(2) .lb-stap-nr { background: var(--sticker-3); color: var(--sticker-3-tekst); }
.lb-werkwijze-kleur li:nth-child(3) .lb-stap-nr, .beloning-hoe li:nth-child(3) .lb-stap-nr { background: var(--sticker-4); color: var(--sticker-4-tekst); }

/* ---------------------------------------------------------------- leerboek: leesvoortgang met koning, tegel en balk */
.voortgang-band-lezen { background: var(--teller-klaar-vlak); }
.leestegel {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; column-gap: 12px; row-gap: 2px;
  padding: 12px 14px; background: var(--teller-xp-vlak); color: var(--inkt); border: var(--omlijning); border-radius: 16px;
}
.t-boek { grid-row: 1 / span 2; display: inline-grid; place-items: center; width: 42px; height: 42px; background: var(--sticker-3); color: var(--inkt); border: var(--omlijning); border-radius: 50%; }
.t-boek .icoon { --icoon-maat: 20px; }
.leestegel-getal { font-family: var(--font-licht-display); font-weight: var(--display-gewicht); font-size: 30px; line-height: 1; }
.leestegel-label { font-size: 12px; font-weight: 700; line-height: 1.2; letter-spacing: var(--spatie-label); text-transform: uppercase; }
.leesbalk { position: relative; height: 14px; background: var(--papier); border: var(--omlijning); border-radius: 999px; overflow: hidden; }
.leesbalk-vul { position: absolute; inset: 0; transform-origin: left center; background: var(--teller-klaar); scale: var(--vul, 0) 1; transition: scale 400ms ease; }

/* ---------------------------------------------------------------- leerboek: de hoofdstukkaarten in de kleur van hun eenheid
   Eenheid 1 lila, 2 blauw, 3 geel, 4 oranje (allemaal zwarte tekst); een gelezen hoofdstuk wordt mintgroen. */
.lb-eenheid:nth-child(1) .lb-nr { background: var(--sticker-5); color: var(--sticker-5-tekst); }
.lb-eenheid:nth-child(2) .lb-nr { background: var(--sticker-3); color: var(--sticker-3-tekst); }
.lb-eenheid:nth-child(3) .lb-nr { background: var(--sticker-1); color: var(--sticker-1-tekst); }
.lb-eenheid:nth-child(4) .lb-nr { background: var(--sticker-2); color: var(--sticker-2-tekst); }
.lb-kaart.is-gelezen .lb-nr { background: var(--goed-vlak); color: var(--inkt); }
.lb-kaart-meta { display: inline-flex; align-items: center; gap: 8px; }
.lb-kaart-meta::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sticker-3); border: 1px solid var(--inkt); }
.lb-eenheid:nth-child(1) .lb-kaart-meta::before { background: var(--sticker-5); }
.lb-eenheid:nth-child(3) .lb-kaart-meta::before { background: var(--sticker-1); }
.lb-eenheid:nth-child(4) .lb-kaart-meta::before { background: var(--sticker-2); }

/* ---------------------------------------------------------------- beloningen: de band Leren loont (kennisbank.html)
   Op band-1 onder het leerpad. Links de uitleg, rechts het zegel van Dreambro's: hun witte logo op een donkerblauw
   rond vlak (het logo is gemaakt voor een donkere achtergrond), 1px zwart, een witte stippelring en een lichte draai,
   zodat het als een sticker van deze site oogt. Drie niveaukaarten in geel, blauw en lila. */
.beloning-band { padding-block: 56px 72px; background: var(--band-1); border-top: var(--omlijning); }
.beloning-kop-rij { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px 56px; }
.beloning-tekst { display: grid; gap: 12px; justify-items: start; }
.beloning-tekst .intro { max-width: 52ch; font-size: 17px; }
.beloning-kop { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.02; }
.zegel-link { display: grid; justify-items: center; gap: 16px; color: inherit; text-decoration: none; }
.zegel-link:focus-visible { outline: 3px solid var(--focus); outline-offset: 8px; border-radius: 24px; }
.zegel-dreambros { display: inline-grid; }
.zegel-rand {
  position: relative; display: grid; place-items: center; width: 170px; height: 170px; padding: 22px;
  background: var(--middernacht); border: var(--omlijning); border-radius: 50%; rotate: -5deg; transition: translate 300ms ease;
}
.zegel-rand::after { content: ""; position: absolute; inset: 7px; border: 2px dashed rgb(255 255 255 / 0.55); border-radius: 50%; pointer-events: none; }
.zegel-rand img { width: 100%; height: auto; }
.zegel-klein .zegel-rand { width: 76px; height: 76px; padding: 9px; rotate: 6deg; }
.zegel-klein .zegel-rand::after { inset: 4px; border-width: 1.5px; }
.zegel-label { font-size: 13px; --draai: -2deg; }
@media (hover: hover) { .zegel-link:hover .zegel-rand { translate: 0 -4px; } }
.beloning-niveaus { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 40px; }
.beloning-kaart {
  position: relative; display: grid; align-content: start; gap: 10px; padding: 22px 22px 20px; color: var(--inkt);
  border: var(--omlijning); border-radius: var(--radius); rotate: var(--draai, 0deg);
}
.beloning-1 { background: var(--sticker-1); color: var(--sticker-1-tekst); --draai: -1deg; }
.beloning-2 { background: var(--sticker-3); color: var(--sticker-3-tekst); --draai: 1deg; }
.beloning-3 { background: var(--sticker-5); color: var(--sticker-5-tekst); --draai: -0.6deg; }
.beloning-niveau { font-size: 12px; font-weight: 700; line-height: 1.2; letter-spacing: var(--spatie-label); text-transform: uppercase; }
.beloning-procent { display: flex; align-items: baseline; gap: 6px; font-family: var(--font-licht-display); font-weight: var(--display-gewicht); line-height: 1; }
.beloning-procent strong { font-family: inherit; font-weight: inherit; font-size: clamp(56px, 6vw, 76px); }
.beloning-procent span { font-size: 28px; }
.beloning-procent .beloning-woord { font-size: 22px; }
.beloning-naam { font-size: 17px; font-weight: 700; line-height: 1.3; }
/* Waarop de korting geldt (06-10-2026, Kerim): subtiel onder het percentage, zodat duidelijk is dat het om merchandise
   en accessoires gaat en nooit om wat in de zaak zelf wordt verkocht. Kleur van de kaart, iets gedempt. */
.beloning-waarop { margin-top: -6px; font-size: 13px; font-weight: 700; line-height: 1.3; letter-spacing: 0.02em; opacity: 0.78; }
.beloning-balk { position: relative; height: 12px; margin-top: 4px; background: var(--papier); border: var(--omlijning); border-radius: 999px; overflow: hidden; }
.beloning-balk-vul { position: absolute; inset: 0; transform-origin: left center; background: var(--inkt); scale: var(--vul, 0) 1; transition: scale 400ms ease; }
.beloning-kaart[data-toestand="behaald"] .beloning-balk-vul { background: var(--goed-vlak); }
.beloning-status > span { display: none; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; line-height: 1; letter-spacing: var(--spatie-label); text-transform: uppercase; }
.beloning-kaart[data-toestand="slot"] .bs-slot { display: inline-flex; }
.beloning-kaart[data-toestand="behaald"] .bs-behaald { display: inline-flex; padding: 6px 10px; background: var(--goed-vlak); border: var(--omlijning); border-radius: var(--radius-knop); }
.bs-behaald .icoon { --icoon-maat: 14px; }
.beloning-code { display: grid; gap: 6px; margin-top: 6px; padding: 12px 14px; background: var(--papier); color: var(--inkt); border: var(--omlijning); border-radius: 14px; }
.beloning-code-label { font-size: 12px; font-weight: 700; line-height: 1.2; letter-spacing: var(--spatie-label); text-transform: uppercase; }
.beloning-code-tekst { font-family: var(--font-licht-display); font-weight: var(--display-gewicht); font-size: 24px; line-height: 1.1; letter-spacing: 0.02em; user-select: all; }
.beloning-code-slot { font-size: 14px; line-height: 1.4; }
.beloning-onder { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 24px 48px; margin-top: 40px; }
.beloning-hoe { display: grid; gap: 12px; padding: 22px; background: var(--papier); color: var(--inkt); border: var(--omlijning); border-radius: var(--radius); }
.beloning-hoe .zijkaart-titel { font-size: 24px; line-height: 1.1; }
.beloning-noot { max-width: 56ch; font-size: 14px; line-height: 1.5; }
.beloning-noot .tekstlink .icoon { --icoon-maat: 14px; }

/* ---------------------------------------------------------------- beloningen: de kaart Jouw korting (zijkolom) */
.lesmodule .zijkaart-korting { background: var(--teller-xp-vlak); }
.korting-kop-rij { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.korting-nu { font-family: var(--font-licht-display); font-weight: var(--display-gewicht); font-size: 22px; line-height: 1.1; }
.korting-code { padding: 8px 12px; background: var(--papier); color: var(--inkt); border: var(--omlijning); border-radius: 12px; font-size: 14px; font-weight: 700; }
.korting-code strong { font-family: var(--font-licht-display); font-weight: var(--display-gewicht); font-size: 18px; letter-spacing: 0.02em; user-select: all; }

/* ---------------------------------------------------------------- beloningen: de regel op het klaar-scherm (les.html) */
.uitslag-beloning {
  display: inline-flex; align-items: center; gap: 8px; max-width: 46ch; padding: 10px 14px; background: var(--teller-xp-vlak); color: var(--inkt);
  border: var(--omlijning); border-radius: var(--radius-knop); font-size: 15px; font-weight: 700; line-height: 1.3; text-align: left;
}
.uitslag-beloning .icoon { --icoon-maat: 18px; flex: none; }
.lesmodule [data-scherm="klaar"] .uitslag-beloning { animation: tegel-in 380ms var(--veer) 360ms both; }

/* ---------------------------------------------------------------- smaller */
@media (max-width: 1099px) { .beloning-niveaus { gap: 14px; } .beloning-kaart { padding: 18px 16px 16px; } }
@media (max-width: 899px) {
  .beloning-kop-rij { grid-template-columns: minmax(0, 1fr); }
  .zegel-link { justify-self: start; grid-auto-flow: column; align-items: center; }
  .beloning-niveaus { grid-template-columns: minmax(0, 1fr); }
  .beloning-onder { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 639px) {
  .beloning-band { padding-block: 40px 56px; }
  /* Zegel en label onder elkaar: naast elkaar liepen ze op 375 px 84 px buiten beeld (QA 05-10, nacht). */
  .zegel-link { grid-auto-flow: row; justify-items: start; gap: 12px; }
  .zegel-label { white-space: normal; }
  .zegel-rand { width: 132px; height: 132px; padding: 16px; }
  .beloning-procent strong { font-size: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .leesbalk-vul, .beloning-balk-vul, .zegel-rand { transition: none; }
  .lesmodule [data-scherm="klaar"] .uitslag-beloning { animation: none; }
}

/* ---------------------------------------------------------------- 06-10-2026 (Kerim): COFFEESHOP klein onder EMPIRE in de hero
   Beide woorden in één blok (.held-woorden) boven het lint; het onderwoord in dezelfde letter en met dezelfde witte
   omlijning (die regel staat op .held-woord .reuzenwoord en geldt dus voor allebei), ongeveer een derde zo groot, iets
   gespatieerd, strak onder de grote letters. De stickers onder het woord staan in de onderste padding en raken het niet. */
.held-woorden { position: relative; z-index: 1; display: grid; justify-items: center; }
.held-woord .reuzenwoord-onder {
  margin-top: clamp(-6px, -0.6vw, -2px); font-size: clamp(20px, 6.2vw, 84px); line-height: 1; letter-spacing: 0.14em;
  padding-left: 0.14em; /* de spatiëring na de laatste letter compenseren, zodat het woord optisch gecentreerd staat */
}
@media (min-width: 640px) { .held-home .reuzenwoord-onder { font-size: clamp(20px, 6.2vw, 84px); } }
@media (min-width: 640px) and (max-height: 820px) { .held-home .reuzenwoord-onder { font-size: clamp(20px, min(6.2vw, 9.5vh), 84px); } }

/* ---------------------------------------------------------------- 06-10-2026 (Kerim): het lint een heel stuk omlaag
   Het blauw-paarse lint liep achter EMPIRE en COFFEESHOP en maakte de letters onrustig. Op de homepage hangt het nu aan
   de hero zelf (niet meer aan het woordvak) en ligt het onderin de band: achter de knoppen en onder de voeten van de
   koning, als een weg. De woorden en de kop staan op de effen gele band. Smal hetzelfde, iets verder naar beneden. */
/* Het lint is 125vw breed en dus 0,2292 x de schermbreedte hoog; de hoogste bult ligt op 15% van die hoogte. Met
   bottom: calc(120px - 19.4vw) begint het zichtbare lint op elke breedte 120 px boven de onderkant van de hero: onder
   de intro, achter de knoppen en de voeten van de koning. */
.held-home .held-lint-onder { top: auto; bottom: calc(120px - 19.4vw); translate: -50% 0; }
@media (max-width: 639px) { .held-home .held-lint-onder { bottom: -40px; width: 180vw; } }

/* ---------------------------------------------------------------- 06-10-2026 (Kerim): de kaart Jouw account (inloggen met Google)
   Witte kaart met 1px zwart; de knop Inloggen met Google is een witte pil met de G in vier kleuren (de huisstijl van
   Google) en zwarte tekst; ingelogd een letterrondje in blauw met naam en e-mail, de status, Uitloggen en de tekstlink
   Verwijder mijn account met een bevestiging in de kaart zelf (geen browserdialoog). */
.lesmodule .zijkaart-account { background: var(--papier); }
.knop-google { background: var(--papier); color: var(--inkt); border-color: var(--inkt); gap: 10px; }
@media (hover: hover) { .knop-google:hover { background: var(--band-1); } }
.knop-google .icoon-google { --icoon-maat: 18px; flex: none; }
.account-rij { display: flex; align-items: center; gap: 12px; }
.account-letter { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; background: var(--sticker-3); color: var(--inkt); border: var(--omlijning); border-radius: 50%; font-family: var(--font-licht-display); font-weight: var(--display-gewicht); font-size: 22px; line-height: 1; }
.account-tekst { display: grid; gap: 2px; min-width: 0; }
.account-naam { font-size: 16px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.account-mail { overflow-wrap: anywhere; }
.account-status { min-height: 1.4em; font-size: 13px; font-weight: 700; line-height: 1.4; color: var(--tekst-zacht); }
.account-knoppen { align-items: center; gap: 8px 16px; }
.account-verwijder { font-size: 13px; }
.account-bevestig { padding: 12px 14px; background: var(--fout-zacht); color: var(--inkt); border: var(--omlijning); border-radius: 14px; font-size: 14px; line-height: 1.5; }
.account-bevestig .knop { margin-top: 8px; }
.knop-gevaar { background: var(--fout); color: var(--papier); border-color: var(--inkt); }
.account-fout { padding: 10px 12px; background: var(--fout-zacht); color: var(--inkt); border: var(--omlijning); border-radius: 12px; font-size: 14px; line-height: 1.45; }