/* Lettertype op eigen server (geen Google Fonts, geen IP-adres naar Google). Licentie: assets/fonts/OFL.txt */
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/plus-jakarta-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/plus-jakarta-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/plus-jakarta-sans-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 800; font-display: swap; src: url("/assets/fonts/plus-jakarta-sans-latin-800-normal.woff2") format("woff2"); }
/*
 * Motor-stijl voor de oefensites van SLASH Marketing. Mobiel eerst, basis 18px, hoog contrast.
 * Kleuren als variabelen; een site zet zijn eigen kleuren in site/public/assets/css/site.css.
 * Standaard: "wit en munt" (Sociale Hygiëne).
 */

:root {
  --zee: #0f3b3f;
  --zee-diep: #0a2d30;
  --zee-licht: #0b7a71;
  --blauw: #14a89c;
  --blauw-licht: #e6f7f3;
  --wit: #ffffff;
  --signaal: #ff8a3d;
  --signaal-hover: #f27a2a;
  --signaal-schaduw: #e06a1f;
  --signaal-tekst: #0f3b3f;
  --inkt: #0f3b3f;
  --grijs: #3d5659;
  --vlak: #f4fbf9;
  --lijn: #cfe9e3;
  --goed: #1d7a46;
  --goed-vlak: #e6f4ec;
  --fout: #b42318;
  --fout-vlak: #fbeceb;
  --focus: #0b7a71;

  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --maat: 1.125rem;
  --tekstbreedte: 40rem;
  --paginabreedte: 77.5rem;
  --rand: 1rem;
  --radius: 6px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 5rem;
}

body {
  margin: 0;
  background: var(--wit);
  color: var(--inkt);
  font-family: var(--font);
  font-size: var(--maat);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main { flex: 1 0 auto; }

h1, h2, h3, h4 {
  line-height: 1.2;
  margin: 0 0 .6em;
  color: var(--zee);
  font-weight: 800;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 1.4rem + 3.4vw, 3.4rem); letter-spacing: -0.02em; }
/* Lange woorden ("Pensioenverzekeringen") breken af in plaats van de pagina op een telefoon breder te maken. */
h1, h2 { overflow-wrap: break-word; hyphens: auto; hyphenate-limit-chars: 12 5 5; }
h2 { font-size: clamp(1.55rem, 1.2rem + 1.4vw, 2.1rem); margin-top: 0; }
h3 { font-size: 1.3rem; }
p, ul, ol, dl { margin: 0 0 1.1em; }
ul, ol { padding-left: 1.3em; }
li + li { margin-top: .35em; }

a { color: var(--zee-licht); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--zee); text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 3px;
}

strong { font-weight: 800; }
code, .code { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; }

.skiplink {
  position: absolute; left: -999px; top: 0;
  background: var(--signaal); color: var(--zee); padding: .7rem 1rem; font-weight: 800; z-index: 100;
}
.skiplink:focus { left: 1rem; top: 1rem; }

.lead { font-size: 1.25rem; line-height: 1.55; color: var(--grijs); max-width: 36rem; }
.klein { font-size: 1rem; color: var(--grijs); }
.lijst-ruim li + li { margin-top: .6em; }

/* Containers */

.smal, .breed {
  width: 100%;
  margin: 0 auto;
  padding: 3rem var(--rand) 4rem;
}
.smal { max-width: calc(var(--tekstbreedte) + 2 * var(--rand)); }
.breed { max-width: calc(var(--paginabreedte) + 2 * var(--rand)); }
.binnen { max-width: var(--paginabreedte); margin: 0 auto; padding: 0 var(--rand); }

/* Header */

.kop { background: var(--zee); color: var(--wit); position: relative; z-index: 10; }
.kop-binnen {
  max-width: var(--paginabreedte); margin: 0 auto; padding: .8rem var(--rand);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1.5rem;
}
.merk {
  display: inline-flex; align-items: center; gap: .55rem;
  color: var(--wit); text-decoration: none; font-weight: 800; font-size: 1.2rem;
}
.merk:hover { color: var(--wit); }
.merk-icoon { width: 2rem; height: 2rem; flex: none; }

.nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.1rem; }
.nav li + li { margin-top: 0; }
.nav a, .nav-knop {
  color: var(--wit); text-decoration: none; font-size: 1rem; font-weight: 600;
  padding: .45rem 0; display: inline-block; background: none; border: 0; font-family: inherit; cursor: pointer;
}
.nav a:hover, .nav-knop:hover { text-decoration: underline; text-underline-offset: .25em; color: var(--wit); }
.nav a.nav-cta {
  background: var(--signaal); color: var(--zee); padding: .45rem .9rem; border-radius: 6px;
}
.nav a.nav-cta:hover { background: var(--signaal-hover); text-decoration: none; color: var(--zee); }
.nav-form { margin: 0; }

/* Knoppen */

.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 3.25rem; padding: .75rem 1.4rem;
  font: inherit; font-weight: 800; font-size: 1.1rem; line-height: 1.2;
  border-radius: 6px; border: 2px solid transparent; cursor: pointer; text-decoration: none;
  text-align: center;
}
.knop-signaal { background: var(--signaal); color: #fff; }
.knop-signaal:hover { background: var(--signaal-hover); color: #fff; }
.knop-zee { background: var(--zee); color: var(--wit); }
.knop-zee:hover { background: var(--zee-licht); color: var(--wit); }
.knop-licht { background: transparent; color: var(--zee); border-color: var(--zee); }
.knop-licht:hover { background: var(--vlak); color: var(--zee); }
.op-donker .knop-licht { color: var(--wit); border-color: rgba(255,255,255,.75); }
.op-donker .knop-licht:hover { background: rgba(255,255,255,.1); color: var(--wit); }
.knop[disabled], .knop[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.knop-klein { min-height: 2.75rem; padding: .45rem 1rem; font-size: 1rem; }
.knoppen { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.5rem 0 0; }
.link-knop { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }

/* Hero (homepage) */

.hero { background: var(--zee); color: var(--wit); position: relative; }
.hero-binnen {
  max-width: var(--paginabreedte); margin: 0 auto; padding: 2.5rem var(--rand) 4.5rem;
  display: grid; gap: 2.5rem;
}
.hero h1 { color: var(--wit); margin-bottom: .45em; }
.hero .lead { color: #d5e1ec; }
.hero-feiten { color: #d5e1ec; font-size: 1.05rem; margin-top: 1.25rem; }
.hero-golf { display: block; width: 100%; height: 36px; position: absolute; left: 0; bottom: -1px; }

@media (min-width: 60rem) {
  .hero-binnen { grid-template-columns: 1.05fr .95fr; align-items: center; padding-top: 4rem; padding-bottom: 6rem; gap: 4rem; }
}

/* Demo-vraag in de hero: het ene opvallende element */

.demo {
  background: var(--wit); color: var(--inkt); border-radius: 6px;
  padding: 1.5rem 1.25rem 1.25rem; box-shadow: 0 18px 40px rgba(3, 14, 28, .35);
  position: relative;
}
.demo-kop { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .75rem; }
.demo-kop h2 { font-size: 1.1rem; margin: 0; color: var(--grijs); font-weight: 600; letter-spacing: 0; }
.demo-kanaal {
  font-weight: 800; color: var(--zee); background: var(--vlak); border-radius: 4px; padding: .1rem .5rem; font-size: .95rem; white-space: nowrap;
}
.demo-vraag { font-size: 1.2rem; font-weight: 600; line-height: 1.45; margin-bottom: 1rem; color: var(--zee); }
.demo .opties { margin-bottom: 0; }
.demo-noscript { margin: 1rem 0 0; }

/* Secties homepage */

.sectie { padding: 4rem 0; }
.sectie-vlak { background: var(--vlak); }
.sectie h2 { max-width: 36rem; }
.sectie-intro { max-width: var(--tekstbreedte); }

.examenregel {
  display: flex; flex-wrap: wrap; gap: .25rem 2.5rem; margin: 2rem 0 1.5rem; padding: 0; list-style: none;
  font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.4rem); font-weight: 800; color: var(--zee); line-height: 1.25;
}
.examenregel li + li { margin-top: 0; }
.examenregel span { display: block; font-size: 1rem; font-weight: 600; color: var(--grijs); letter-spacing: 0; }

.voordelen { display: grid; gap: 2rem 3rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.voordelen li { margin: 0; }
.voordelen h3 { margin-bottom: .3em; }
.voordelen p { margin: 0; color: var(--grijs); }
@media (min-width: 48rem) { .voordelen { grid-template-columns: 1fr 1fr; } }

.stappen { counter-reset: stap; list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 1.5rem; }
.stappen li { counter-increment: stap; position: relative; padding-left: 3.4rem; margin: 0; min-height: 2.5rem; }
.stappen li::before {
  content: counter(stap); position: absolute; left: 0; top: -.1rem;
  width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--zee); color: var(--wit);
  display: grid; place-items: center; font-weight: 800;
}
.stappen strong { display: block; color: var(--zee); }
@media (min-width: 60rem) { .stappen { grid-template-columns: repeat(4, 1fr); } }

.prijs {
  background: var(--zee); color: var(--wit); border-radius: 6px; padding: 2rem 1.5rem;
  display: grid; gap: 1.5rem; max-width: 52rem;
}
.prijs h2 { color: var(--wit); }
.prijs-bedrag { font-size: clamp(2.6rem, 2rem + 3vw, 3.6rem); font-weight: 800; line-height: 1; margin: 0 0 .4rem; color: var(--wit); }
.prijs-sub { color: #d5e1ec; margin: 0; }
.prijs ul { list-style: none; padding: 0; margin: 0; }
.prijs li { padding-left: 1.8rem; position: relative; }
.prijs li::before {
  content: ""; position: absolute; left: 0; top: .45em; width: 1rem; height: .55rem;
  border-left: 3px solid var(--signaal); border-bottom: 3px solid var(--signaal); transform: rotate(-45deg);
}
@media (min-width: 48rem) { .prijs { grid-template-columns: 1fr 1fr; padding: 2.5rem; align-items: center; } }

.onderwerpen-raster { display: grid; gap: 2rem 3rem; margin-top: 2rem; }
.onderwerpen-raster h3 { font-size: 1.15rem; margin-bottom: .5rem; }
.onderwerpen-raster ul { list-style: none; padding: 0; margin: 0; }
.onderwerpen-raster li { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; border-bottom: 1px solid var(--lijn); margin: 0; }
.onderwerpen-raster li span:last-child { color: var(--grijs); white-space: nowrap; }
@media (min-width: 48rem) { .onderwerpen-raster { grid-template-columns: 1fr 1fr; } }

/* FAQ */

.faq { max-width: var(--tekstbreedte); margin-top: 1.5rem; }
.faq details { border-bottom: 1px solid var(--lijn); }
.faq details:first-child { border-top: 1px solid var(--lijn); }
.faq summary {
  cursor: pointer; padding: 1.1rem 2.5rem 1.1rem 0; font-weight: 800; color: var(--zee); position: relative; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: .4rem; top: 1.45rem; width: .65rem; height: .65rem;
  border-right: 3px solid var(--zee); border-bottom: 3px solid var(--zee); transform: rotate(45deg); transition: transform .15s;
}
.faq details[open] summary::after { transform: rotate(-135deg); top: 1.7rem; }
.faq details > div { padding: 0 0 1.1rem; }
.faq details > div p:last-child { margin-bottom: 0; }

/* CTA-blok */

.cta-blok {
  background: var(--vlak); border-radius: var(--radius);
  padding: 1.75rem 1.5rem; margin: 3rem 0 0;
}
.cta-blok h2 { font-size: 1.5rem; }
.cta-blok p { margin-bottom: 0; max-width: 36rem; }

/* Formulieren */

.formulier { max-width: 32rem; }
.veld { margin-bottom: 1.4rem; }
.veld label, .veld .label { display: block; font-weight: 800; margin-bottom: .35rem; color: var(--zee); }
.veld .hulp { display: block; font-size: 1rem; color: var(--grijs); margin-top: .3rem; }
input[type="email"], input[type="text"], input[type="password"] {
  width: 100%; font: inherit; font-size: 1.15rem; padding: .75rem .9rem; min-height: 3.25rem;
  border: 2px solid #7d8fa1; border-radius: 6px; background: var(--wit); color: var(--inkt);
}
input[type="email"]:focus, input[type="text"]:focus, input[type="password"]:focus { border-color: var(--zee); outline: 3px solid var(--focus); outline-offset: 1px; }
input.code-invoer { text-transform: uppercase; letter-spacing: .12em; font-family: ui-monospace, Menlo, Consolas, monospace; }
/* Wachtwoordveld met knop Toon (inloggen, wachtwoord kiezen). */
.ww-veld { position: relative; }
.ww-veld input { width: 100%; padding-right: 5.5rem; }
.ww-toon { position: absolute; right: .35rem; top: 50%; transform: translateY(-50%); min-height: 36px; padding: .3rem .7rem; border: 0; border-radius: 6px; background: var(--vlak); color: var(--inkt); font: inherit; font-size: .9rem; font-weight: 700; cursor: pointer; }
.ww-toon:focus-visible { outline: 3px solid var(--blauw); outline-offset: 1px; }
.ww-uitnodiging { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.25rem; background: var(--vlak); border-radius: 6px; padding: 1rem 1.2rem; }
.ww-uitnodiging p { margin: 0; flex: 1 1 20rem; }
.vinkje { display: flex; gap: .8rem; align-items: flex-start; margin-bottom: 1rem; }
.vinkje input { width: 1.5rem; height: 1.5rem; margin: .15rem 0 0; flex: none; accent-color: var(--zee); }
.vinkje label { font-weight: 400; color: var(--inkt); margin: 0; }

/* Meldingen in de huisstijl (wens Gijs 31 okt 2026: niet AI-achtig): geen gekleurd vlak in een afgeronde kaart en geen
   zijstreep, maar een open regel tussen twee lijnen. Bovenlijn en icoon in de statuskleur (fout, goed, of de merkkleur
   bij info), de tekst gewoon in de tekstkleur. */
.melding { position: relative; margin: 0 0 1.5rem; padding: .85rem 0 .9rem; border-top: 2px solid var(--melding-kleur, var(--zee)); border-bottom: 1px solid var(--lijn); color: var(--inkt); line-height: 1.5; }
.melding-goed, .melding-fout, .melding-info { padding-left: 2rem; }
.melding-goed::before, .melding-fout::before, .melding-info::before {
  content: ""; position: absolute; left: 0; top: 1.05rem; width: 1.2rem; height: 1.2rem; background: var(--melding-kleur, var(--zee));
  -webkit-mask: var(--melding-icoon) center / contain no-repeat; mask: var(--melding-icoon) center / contain no-repeat;
}
.melding-goed { --melding-kleur: var(--goed); --melding-icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5L19.5 7'/%3E%3C/svg%3E"); }
.melding-fout { --melding-kleur: var(--fout); --melding-icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.5v.2'/%3E%3C/svg%3E"); }
.melding-info { --melding-kleur: var(--zee-licht, var(--zee)); --melding-icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5.5M12 7.5v.2'/%3E%3C/svg%3E"); }
.melding p:last-child { margin-bottom: 0; }
.melding strong { color: var(--zee); }
.melding-fout strong { color: var(--fout-tekst, var(--fout)); }

/* Koopblok */

.koop-raster { display: grid; gap: 2.5rem; }
@media (min-width: 56rem) { .koop-raster { grid-template-columns: 1.2fr .8fr; align-items: start; } }
.koop-samenvatting { background: var(--vlak); border-radius: var(--radius); padding: 1.5rem; }
.koop-samenvatting .prijs-bedrag { color: var(--zee); font-size: 2.6rem; }
.koop-samenvatting ul { padding-left: 1.2rem; margin: 1rem 0 0; }

/* Pakketkaarten (/kopen en homepage) */

.pakket-keuze { border: 0; margin: 0 0 2.5rem; padding: 0; min-width: 0; }
.pakketten { display: grid; gap: 1rem; align-items: stretch; margin: 1.5rem 0 0; }
@media (min-width: 52rem) { .pakketten { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }

.pakket-kaart { position: relative; display: flex; }
.pakket-binnen {
  flex: 1; display: flex; flex-direction: column; position: relative;
  background: var(--wit); border: 2px solid var(--lijn); border-radius: 6px;
  padding: 1.5rem 1.25rem 1.4rem;
}
.pakket-kaart.is-aanbevolen .pakket-binnen { border-color: var(--zee); }
.pakket-badge {
  position: absolute; top: -.85rem; left: 1.1rem;
  background: var(--blauw); color: #fff; font-weight: 800; font-size: .95rem; line-height: 1.2;
  padding: .3rem .7rem; border-radius: 999px;
}
.pakket-kop { display: block; margin: 0 0 1rem; font-weight: 400; color: var(--inkt); font-size: 1rem; letter-spacing: 0; }
.pakket-naam { display: block; font-size: 1.35rem; font-weight: 800; color: var(--zee); line-height: 1.2; }
.pakket-prijs { display: block; font-size: 2.3rem; font-weight: 800; color: var(--zee); line-height: 1.1; margin: .35rem 0 .2rem; }
.pakket-looptijd { display: block; color: var(--grijs); font-size: 1rem; }
.pakket-onderdelen { list-style: none; padding: 0; margin: 0 0 1.25rem; font-size: 1rem; line-height: 1.45; }
.pakket-onderdelen li { position: relative; padding-left: 1.75rem; margin: 0; }
.pakket-onderdelen li + li { margin-top: .55rem; }
.pakket-onderdelen li::before { content: ""; position: absolute; left: .1rem; }
.pakket-onderdelen .is-in::before {
  top: .3em; width: .95rem; height: .5rem;
  border-left: 3px solid var(--goed); border-bottom: 3px solid var(--goed); transform: rotate(-45deg);
}
.pakket-onderdelen .is-niet { color: #6b7c8d; }
.pakket-onderdelen .is-niet::before { top: .7em; width: .85rem; height: 2px; background: #9aa9b8; border-radius: 1px; }
.pakket-knop { margin-top: auto; width: 100%; }

/* Keuzekaart op /kopen: de hele kaart is klikbaar via het label, de radio blijft zichtbaar en bedienbaar. */
.pakket-kaart.is-kiesbaar .pakket-binnen { padding-right: 3.5rem; transition: border-color .15s, box-shadow .15s, background-color .15s; }
.pakket-kaart.is-kiesbaar .pakket-kop { cursor: pointer; }
.pakket-kaart.is-kiesbaar .pakket-kop::after { content: ""; position: absolute; inset: 0; border-radius: 6px; z-index: 1; }
.pakket-radio {
  position: absolute; top: 1.4rem; right: 1.25rem; z-index: 2;
  width: 1.6rem; height: 1.6rem; margin: 0; accent-color: var(--zee); cursor: pointer;
}
.pakket-kaart.is-kiesbaar:hover .pakket-binnen { border-color: var(--zee); }
.pakket-radio:checked + .pakket-binnen {
  border-color: var(--zee); background: #f4f8fb; box-shadow: inset 0 0 0 2px var(--zee);
}
.pakket-radio:focus-visible + .pakket-binnen { outline: 3px solid var(--focus); outline-offset: 3px; }
.pakket-radio:focus-visible { outline: none; }

.koop-stap { font-size: 1.3rem; }
.koop-pakket { font-weight: 800; color: var(--zee); margin: 0 0 .25rem; font-size: 1.15rem; }

/* Pakket en upgrade op het dashboard */

.pakket-info { display: grid; gap: 1rem; margin: 0 0 3rem; }
@media (min-width: 48rem) { .pakket-info { grid-template-columns: 1.3fr 1fr; } }
.pakket-info .pakket-onderdelen { margin-bottom: 0; }
.upgrade-blok {
  background: var(--vlak); border-radius: var(--radius);
  padding: 1.5rem; margin: 0 0 1.5rem;
}
.upgrade-blok h2 { font-size: 1.35rem; }
.upgrade-blok p { max-width: 36rem; }
.upgrade-blok p:last-child { margin-bottom: 0; }

/* Toegangscode tonen */

.code-groot {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: clamp(2rem, 1.4rem + 4vw, 3rem); font-weight: 800; letter-spacing: .12em;
  color: var(--zee); background: var(--vlak); border: 2px dashed var(--zee); border-radius: var(--radius);
  padding: 1rem 1.25rem; display: inline-block; margin: .25rem 0 1rem; user-select: all;
}

/* Quiz */

.quiz { max-width: 44rem; }
.quiz-balk { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; color: var(--grijs); font-size: 1rem; }
.voortgangsbalk { height: 8px; background: var(--vlak); border-radius: 4px; overflow: hidden; margin-bottom: 1.75rem; }
.voortgangsbalk span { display: block; height: 100%; background: var(--zee); width: 0; transition: width .25s ease; }
.quiz-onderwerp { font-size: 1rem; color: var(--grijs); margin-bottom: .4rem; }
.quiz-vraag { font-size: 1.35rem; line-height: 1.45; font-weight: 600; color: var(--zee); margin-bottom: 1.25rem; }
.quiz-vraag:focus { outline: none; }
.quiz-vraag:focus-visible { outline: 3px solid var(--focus); outline-offset: 6px; }

.opties { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: .7rem; }
.opties li { margin: 0; }
/* Antwoordblokken: groot en aantikbaar, gelijk in demo, oefentest, oefenen en proefexamen. */
.optie {
  width: 100%; display: flex; gap: 1rem; align-items: center; text-align: left;
  font: inherit; font-size: 1.1rem; line-height: 1.45; color: var(--inkt);
  background: var(--wit); border: 2px solid var(--lijn); border-radius: 6px;
  padding: .9rem 1.1rem .9rem .9rem; min-height: 4.25rem; cursor: pointer;
  box-shadow: 0 1px 2px rgba(11, 42, 74, .06);
  -webkit-tap-highlight-color: transparent;
}
.optie-tekst { flex: 1; min-width: 0; overflow-wrap: anywhere; hyphens: auto; }
.quiz-vraag, .terugkijk-vraag, .casus-tekst, .feedback p { overflow-wrap: anywhere; hyphens: auto; }
@media (hover: hover) {
  .optie:hover:not([disabled]) { border-color: var(--zee); background: #f7fafc; }
  .optie:hover:not([disabled]) .optie-letter { border-color: var(--zee); }
}
.optie:active:not([disabled]) { background: #edf3f8; }
.optie:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.optie-letter {
  flex: none; width: 2.6rem; height: 2.6rem; border-radius: 6px; display: grid; place-items: center;
  background: var(--vlak); color: var(--zee); font-weight: 800; font-size: 1.15rem;
  border: 2px solid var(--lijn);
}
.optie[disabled] { cursor: default; }
/* Casus boven een vraag en vragen met meerdere goede antwoorden */
.casus { background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--radius); padding: 0.9rem 1rem; margin-bottom: 1rem; }
.casus-label { margin: 0 0 0.25rem; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--zee-licht); }
.casus-tekst { margin: 0; font-size: 1rem; line-height: 1.6; white-space: pre-line; }

/* Casus uit de casusbank. In het proefexamen en de uitslag: een blok boven de vraag ("Casus 1 van 2"), op een smal
   scherm klapbaar. In de casustrainer: een vast paneel naast de vragen (vanaf 900 px), boven de vragen op een telefoon. */
.casus-kop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem .75rem; margin-bottom: .6rem; }
.casus-kop-tekst { flex: 1 1 12rem; min-width: 0; }
.casus-examen .casus-label { margin-bottom: .1rem; }
.casus-titel { margin: 0; font-weight: 800; font-size: 1.05rem; line-height: 1.3; color: var(--zee); overflow-wrap: anywhere; }
.casus-inhoud { margin: 0; }
.casus-inhoud.is-dicht, .casus-paneel-tekst.is-dicht { display: none; }
.casus-wissel {
  flex: none; display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: .4rem .95rem; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: .95rem; font-weight: 800; color: var(--zee); background: var(--wit); border: 2px solid var(--lijn);
}
.casus-wissel::after {
  content: ""; width: .5rem; height: .5rem; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
}
.casus-wissel[aria-expanded="true"]::after { transform: rotate(-135deg) translate(-2px, -2px); }
@media (hover: hover) { .casus-wissel:hover { border-color: var(--zee); } }
.casus-wissel:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (min-width: 48rem) {
  .casus-examen .casus-wissel { display: none; }
  .casus-examen .casus-inhoud.is-dicht { display: block; }
}
.vraagrooster .rooster-groep { grid-column: 1 / -1; margin: .5rem 0 0; font-size: .9rem; font-weight: 800; line-height: 1.3; color: var(--grijs); overflow-wrap: anywhere; }
.vraagrooster .rooster-groep:first-child { margin-top: 0; }

/* Casustrainer: overzicht */
.ct-uitleg { display: grid; gap: 1.25rem; margin: 1.5rem 0; }
.ct-uitleg h2 { font-size: 1.3rem; margin-bottom: .35rem; }
.ct-uitleg p { max-width: var(--tekstbreedte); }
.ct-uitleg p:last-child { margin-bottom: 0; }
@media (min-width: 48rem) { .ct-uitleg { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; } }
.ct-noot { max-width: var(--tekstbreedte); }
.ct-samenvatting { font-weight: 700; color: var(--zee); }
.ct-lijst { list-style: none; padding: 0; margin: 1.25rem 0 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); align-items: start; }
.ct-lijst-gratis { grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr)); }
.ct-groep { margin: 1.75rem 0 0; font-size: 1.15rem; }
.ct-groep + .ct-lijst { margin-top: .75rem; }
.ct-kaart { margin: 0; display: flex; flex-direction: column; gap: .6rem; padding: 1.1rem 1.15rem 1.15rem; border: 2px solid var(--lijn); border-radius: 6px; background: var(--wit); }
.ct-kaart.is-slot { background: var(--vlak); }
.ct-kaart-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.ct-titel { margin: 0; font-size: 1.15rem; line-height: 1.3; }
.ct-titel a { display: block; padding: .6rem 0; margin: -.6rem 0; color: inherit; text-decoration: none; }
.ct-titel a:hover { text-decoration: underline; }
.ct-titel a:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.ct-label { flex: none; display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; font-weight: 800; line-height: 1.2; letter-spacing: .05em; text-transform: uppercase; padding: .25rem .65rem; border-radius: 999px; }
.ct-label.is-gratis { background: var(--signaal); color: var(--signaal-tekst); }
.ct-label.is-slot { border: 2px solid var(--lijn); color: var(--grijs); background: var(--wit); }
.ct-label .icoon { width: .95rem; height: .95rem; }
.ct-onderwerpen { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.ct-onderwerpen li { margin: 0; font-size: .9rem; line-height: 1.3; padding: .2rem .65rem; border-radius: 999px; background: var(--blauw-licht); color: var(--grijs); }
.ct-kaart .casus-tekst { font-size: 1rem; }
.ct-meta { margin: 0; display: flex; flex-wrap: wrap; gap: .15rem .9rem; font-size: 1rem; color: var(--grijs); }
.ct-stand.is-af { color: var(--goed); font-weight: 700; }
.ct-kaart .knoppen { margin-top: auto; padding-top: .4rem; }
.ct-meer { margin-top: 2rem; }

/* Casustrainer: een casus oefenen */
.ct-kop h1 { margin-bottom: .6rem; }
.ct-trainer { display: grid; gap: 1rem; margin-top: 1.25rem; }
.casus-paneel { background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--radius); padding: .85rem 1rem 1rem; }
.casus-paneel-kop { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .4rem; }
.casus-paneel-titel { margin: 0; font-size: .85rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--zee-licht); }
.casus-paneel .casus-tekst { font-size: 1.05rem; }
.casus-paneel-tekst { margin: 0; }
@media (min-width: 56.25rem) {
  .ct-trainer { grid-template-columns: minmax(17rem, 25rem) minmax(0, 1fr); gap: 2rem; align-items: start; }
  .casus-paneel { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; padding: 1.1rem 1.25rem 1.25rem; }
  .casus-paneel .casus-wissel { display: none; }
  .casus-paneel .casus-paneel-tekst.is-dicht { display: block; }
  .ct-trainer .quiz { max-width: none; }
}
.casus-eind-kop:focus { outline: none; }
.casus-eind-knoppen { align-items: stretch; }
@media (max-width: 30rem) { .casus-eind-knoppen .knop { width: 100%; } }

/* Casustrainer: betaalde casus zonder toegang */
.ct-slotkaart { border: 2px solid var(--lijn); border-radius: 6px; background: var(--wit); padding: 1.75rem 1.4rem 1.5rem; margin-top: 1rem; }
.ct-slot-icoon { width: 3.25rem; height: 3.25rem; border-radius: 50%; display: grid; place-items: center; background: var(--vlak); color: var(--zee); margin-bottom: 1rem; }
.ct-slot-icoon .icoon { width: 1.6rem; height: 1.6rem; }
.ct-slotkaart h1 { font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.1rem); margin-bottom: .6rem; }
.ct-slotkaart p { max-width: var(--tekstbreedte); }
.ct-slotkaart .ct-meta { margin: .9rem 0 .6rem; }
.casustrainer .kruimel a { display: inline-block; padding: .7rem 0; }
.ct-slotkaart .knoppen { margin-top: 1.25rem; }
@media (max-width: 30rem) { .ct-slotkaart .knoppen .knop { width: 100%; } }

/* Nepdeur (lib/nepdeur.php): het paneel na "Koop training" en het e-mailformulier. Alleen zichtbaar als de nepdeur aan staat. */
.nepdeur-paneel { margin-top: 1rem; padding: 1.1rem 1.2rem 1.2rem; background: var(--vlak); border: 1px solid var(--lijn); border-radius: 6px; }
.nepdeur-paneel:focus { outline: none; }
.nepdeur-kop { margin: 0 0 .5rem; font-size: 1.25rem; line-height: 1.3; }
.nepdeur-paneel > p { margin: 0 0 1rem; max-width: var(--tekstbreedte); }
.nepdeur-velden > * + * { margin-top: .9rem; }
.nepdeur-veld { max-width: 28rem; }
.nepdeur-fout { margin-bottom: 0; }
.nepdeur-privacy { margin-bottom: 0; }
.nepdeur-dank { margin: .25rem 0 0; font-weight: 800; color: var(--goed); }
.nepdeur-dank:focus { outline: none; }
.meer-hint { margin: -0.5rem 0 0.75rem; font-size: 0.95rem; font-weight: 700; color: var(--grijs); }
.opties-meer .optie-letter { border-radius: 6px; }
.opties-meer .optie-letter { position: relative; }
.opties-meer .optie.is-gekozen .optie-letter::after {
  content: "\2713"; position: absolute; top: -7px; right: -7px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--signaal); color: var(--signaal-tekst); font-size: 11px; line-height: 18px; text-align: center; font-weight: 800;
}
.meer-controleer { margin: 0.75rem 0 1rem; }
.optie.is-gekozen { border-color: var(--zee); background: #eef4fa; box-shadow: inset 0 0 0 2px var(--zee); }
.optie.is-gekozen .optie-letter { background: var(--zee); border-color: var(--zee); color: var(--wit); }
.optie.is-goed { border-color: var(--goed); background: var(--goed-vlak); box-shadow: inset 0 0 0 1px var(--goed); }
.optie.is-goed .optie-letter { background: var(--goed); border-color: var(--goed); color: var(--wit); }
.optie.is-fout { border-color: var(--fout); background: var(--fout-vlak); box-shadow: inset 0 0 0 1px var(--fout); }
.optie.is-fout .optie-letter { background: var(--fout); border-color: var(--fout); color: var(--wit); }
.optie-status { font-weight: 800; margin-left: auto; padding-left: .5rem; white-space: nowrap; font-size: 1rem; }
.optie.is-goed .optie-status { color: var(--goed); }
.optie.is-fout .optie-status { color: var(--fout); }
@media (max-width: 30rem) {
  .optie { font-size: 1.05rem; gap: .8rem; padding-left: .75rem; }
  .optie-status { white-space: normal; text-align: right; max-width: 6.5rem; }
}

.feedback { border-radius: var(--radius); padding: 1rem 1.2rem; margin-bottom: 1.5rem; }
.feedback-goed { background: var(--goed-vlak); border-color: var(--goed); }
.feedback-fout { background: var(--fout-vlak); border-color: var(--fout); }
.feedback-titel { font-weight: 800; margin: 0 0 .3rem; }
.feedback-goed .feedback-titel { color: var(--goed); }
.feedback-fout .feedback-titel { color: var(--fout); }
.feedback p:last-child { margin-bottom: 0; }

.quiz-acties { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: space-between; align-items: center; }
.quiz-laden { color: var(--grijs); }

.uitslag-score { font-size: clamp(2.2rem, 1.6rem + 3vw, 3.2rem); font-weight: 800; color: var(--zee); margin: 0 0 .3rem; line-height: 1.1; }

/* Proefexamen: rustige examenweergave zoals het digitale CBR-examen */

body.is-examen-bezig .kop, body.is-examen-bezig .voet { display: none; }
body.is-examen-bezig { background: #f3f6f9; }

.icoon { width: 1.25rem; height: 1.25rem; flex: none; fill: none; stroke: currentColor; stroke-width: 2; }
.icoon rect { stroke-width: 2; }
.icoon-vlag-doek { stroke-linejoin: round; }

/* Bovenbalk: vraagnummer, tijd, Markeren en Overzicht */
.examen-kop {
  position: sticky; top: 0; z-index: 20; background: var(--zee); color: var(--wit);
  box-shadow: 0 2px 12px rgba(3, 14, 28, .25);
}
.examen-kop-binnen {
  max-width: 60rem; margin: 0 auto; padding: .55rem var(--rand) .6rem;
  display: grid; grid-template-columns: 1fr auto;
  grid-template-areas: "teller tijd" "stop iconen";
  align-items: center; gap: .45rem .75rem;
}
.examen-teller { grid-area: teller; margin: 0; font-weight: 800; font-size: 1.1rem; line-height: 1.2; font-variant-numeric: tabular-nums; }
.examen-tijd { grid-area: tijd; justify-self: end; margin: 0; display: flex; align-items: center; gap: .55rem; }
.examen-tijd-label { font-size: .9rem; color: #c9d8e6; font-weight: 600; }
.timer {
  font-weight: 800; font-size: 1.4rem; line-height: 1.2; color: var(--zee); background: var(--wit);
  border-radius: 6px; padding: .2rem .65rem; font-variant-numeric: tabular-nums; min-width: 4.9ch; text-align: center;
}
.timer.is-krap { background: #ffe3df; color: var(--fout); }
.timer.is-zeer-krap { background: var(--fout); color: var(--wit); }
.examen-stop {
  grid-area: stop; justify-self: start; display: inline-flex; align-items: center; gap: .35rem;
  min-height: 2.75rem; padding: .3rem .75rem .3rem .55rem; border-radius: 6px; cursor: pointer;
  background: transparent; border: 2px solid rgba(255, 255, 255, .3); color: #dbe6f0;
  font: inherit; font-size: .95rem; font-weight: 600;
}
.examen-stop:hover { border-color: rgba(255, 255, 255, .7); color: var(--wit); }
.examen-stop .icoon { width: 1.05rem; height: 1.05rem; }
.examen-iconen { grid-area: iconen; justify-self: end; display: flex; gap: .5rem; }
.icoonknop {
  display: inline-flex; align-items: center; gap: .45rem; min-height: 2.75rem; padding: .3rem .8rem .3rem .65rem;
  border-radius: 6px; border: 2px solid rgba(255, 255, 255, .6); background: transparent; color: var(--wit);
  font: inherit; font-weight: 800; font-size: 1rem; cursor: pointer;
}
.icoonknop, .examen-stop, .vraagrooster button, .knop { -webkit-tap-highlight-color: transparent; }
.icoonknop:hover:not([disabled]):not([aria-pressed="true"]):not([aria-current]) { background: rgba(255, 255, 255, .12); }
.icoonknop[aria-pressed="true"] { background: var(--signaal); border-color: var(--signaal); color: var(--zee); }
.icoonknop[aria-pressed="true"] .icoon-vlag-doek { fill: currentColor; }
.icoonknop[aria-current="page"] { background: var(--wit); border-color: var(--wit); color: var(--zee); }
.icoonknop[disabled] { opacity: .4; cursor: not-allowed; }

@media (min-width: 48rem) {
  .examen-kop-binnen { grid-template-columns: auto 1fr auto auto; grid-template-areas: "stop teller tijd iconen"; gap: .75rem 1.25rem; padding-top: .65rem; padding-bottom: .65rem; }
  .examen-teller { font-size: 1.15rem; }
  .timer { font-size: 1.5rem; }
}
/* Op smalle schermen: knoppen als werkbalk, icoon boven het woord. */
@media (max-width: 47.99rem) {
  .icoonknop, .examen-stop {
    flex-direction: column; justify-content: center; gap: .15rem; min-width: 4.6rem; min-height: 3.2rem;
    padding: .3rem .45rem; font-size: .8rem; line-height: 1.1;
  }
  .examen-tijd-label { font-size: .85rem; }
}
@media (max-width: 23rem) { .examen-tijd-label { display: none; } }

/* Tijdwaarschuwing (aria-live), zichtbaar als korte melding onder de balk */
.examen-melding {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0;
}
.examen-melding.is-zichtbaar {
  position: fixed !important; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal;
  top: 7.25rem; left: 50%; transform: translateX(-50%); z-index: 30; width: max-content; max-width: calc(100vw - 2rem);
  background: var(--fout); color: var(--wit); font-weight: 800; padding: .7rem 1.1rem; border-radius: 6px;
  box-shadow: 0 10px 30px rgba(3, 14, 28, .3); text-align: center;
}
@media (min-width: 48rem) { .examen-melding.is-zichtbaar { top: 5.25rem; } }

.examen-raster { max-width: 60rem; margin: 0 auto; padding: 2rem var(--rand) 4rem; }
body.is-examen-bezig .examen-raster { max-width: 48rem; padding-top: 1.5rem; }

/* Startscherm */
.examenregel-klein { font-size: clamp(1.35rem, 1.1rem + 1.2vw, 1.9rem); margin: 1.5rem 0 2.25rem; }
.examen-intro-raster { display: grid; gap: 2rem; margin-bottom: 2rem; }
@media (min-width: 56rem) { .examen-intro-raster { grid-template-columns: 1.3fr 1fr; gap: 3rem; align-items: start; } }
.intro-kop { font-size: 1.35rem; }
.bediening { list-style: none; padding: 0; margin: 0 0 1rem; counter-reset: bediening; }
.bediening li { counter-increment: bediening; position: relative; margin: 0; padding: .8rem 0 .8rem 3rem; border-bottom: 1px solid var(--lijn); }
.bediening li:first-child { border-top: 1px solid var(--lijn); }
.bediening li::before {
  content: counter(bediening); position: absolute; left: 0; top: .85rem; width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--vlak); color: var(--zee); font-weight: 800; font-size: .95rem; display: grid; place-items: center;
}
.bediening strong { color: var(--zee); }
.bediening-icoon {
  display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.75rem; margin-right: .45rem;
  border-radius: 5px; background: var(--zee); color: var(--wit); vertical-align: -.4rem;
}
.bediening-icoon .icoon { width: 1.05rem; height: 1.05rem; }
@media (hover: none), (max-width: 47.99rem) { .toetsen-tip, .examen-toetsen { display: none; } }

.voorbeeld { background: var(--vlak); border-radius: 6px; padding: 1.25rem; }
.voorbeeld p:last-child { margin-bottom: 0; }
.voorbeeld-scherm {
  background: #f3f6f9; border: 1px solid var(--lijn); border-radius: 6px; overflow: hidden; margin-bottom: 1rem;
  box-shadow: 0 8px 22px rgba(11, 42, 74, .12);
}
.voorbeeld-balk {
  background: var(--zee); color: var(--wit); display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .5rem .7rem; font-size: .85rem; font-weight: 800;
}
.voorbeeld-timer { background: var(--wit); color: var(--zee); border-radius: 4px; padding: .05rem .45rem; font-variant-numeric: tabular-nums; }
.voorbeeld-iconen { display: flex; gap: .35rem; }
.voorbeeld-icoon { display: inline-grid; place-items: center; width: 1.9rem; height: 1.6rem; border: 2px solid rgba(255, 255, 255, .6); border-radius: 4px; }
.voorbeeld-icoon .icoon { width: .95rem; height: .95rem; }
.voorbeeld-icoon.is-aan { background: var(--signaal); border-color: var(--signaal); color: var(--zee); }
.voorbeeld-icoon.is-aan .icoon-vlag-doek { fill: currentColor; }
.voorbeeld-vraag { height: .6rem; width: 78%; background: #b9c9d8; border-radius: 3px; margin: 1rem .9rem 1.2rem; box-shadow: 0 1rem 0 #b9c9d8; }
.voorbeeld-vraag::after { content: none; }
.voorbeeld-optie {
  display: flex; align-items: center; gap: .55rem; margin: 0 .9rem .45rem; background: var(--wit);
  border: 2px solid var(--lijn); border-radius: 6px; padding: .35rem .45rem;
}
.voorbeeld-optie b { width: 1.45rem; height: 1.45rem; border-radius: 4px; background: var(--vlak); color: var(--zee); display: grid; place-items: center; font-size: .8rem; }
.voorbeeld-optie i { height: .45rem; flex: 1; max-width: 62%; background: #d4dee8; border-radius: 3px; }
.voorbeeld-optie.is-gekozen { border-color: var(--zee); box-shadow: inset 0 0 0 1px var(--zee); }
.voorbeeld-optie.is-gekozen b { background: var(--zee); color: var(--wit); }
.voorbeeld-nav { display: flex; justify-content: space-between; padding: .45rem .9rem .9rem; font-size: .8rem; font-weight: 800; }
.voorbeeld-nav span { border: 2px solid var(--zee); color: var(--zee); border-radius: 4px; padding: .15rem .6rem; }
.voorbeeld-nav .is-zee { background: var(--zee); color: var(--wit); }

/* Vraagscherm */
.examen-vraagkaart {
  background: var(--wit); border: 2px solid #dbe4ec; border-radius: 6px; padding: 1.25rem 1.1rem .1rem;
  box-shadow: 0 1px 3px rgba(11, 42, 74, .06), 0 10px 28px rgba(11, 42, 74, .06);
}
.examen-vraagkaart.is-gemarkeerd { border-color: var(--signaal); }
.examen-vraagkop { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 2rem; margin-bottom: .5rem; }
.examen-vraagnr { font-size: .9rem; font-weight: 800; color: var(--grijs); text-transform: uppercase; letter-spacing: .07em; }
.examen-vlag-label {
  display: none; align-items: center; gap: .3rem; background: #fff1d6; color: #6b4600; font-weight: 800; font-size: .9rem;
  padding: .2rem .65rem .2rem .5rem; border-radius: 999px;
}
.examen-vlag-label .icoon { width: 1rem; height: 1rem; }
.examen-vlag-label .icoon-vlag-doek { fill: currentColor; }
.examen-vraagkaart.is-gemarkeerd .examen-vlag-label { display: inline-flex; }
.examen-vraagkaart .quiz-vraag:focus-visible { outline: none; }
.examen-vraagkaart .quiz-vraag { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.45rem); }
@media (min-width: 48rem) { .examen-vraagkaart { padding: 1.75rem 1.75rem .35rem; } }

.examen-navigatie { display: flex; justify-content: space-between; gap: .75rem; margin-top: 1.25rem; }
.examen-navigatie .knop { min-width: 9.5rem; }
.examen-navigatie .icoon { width: 1.2rem; height: 1.2rem; }
@media (max-width: 30rem) { .examen-navigatie .knop { flex: 1; min-width: 0; padding-left: .75rem; padding-right: .75rem; } }
.examen-toetsen { margin: 1.1rem 0 0; text-align: center; }

/* Overzicht */
.overzicht-kop { margin-bottom: .5rem; }
.overzicht-kop:focus { outline: none; }
.overzicht-tellers { list-style: none; padding: 0; margin: 0 0 .75rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.overzicht-tellers li { margin: 0; background: var(--wit); border: 2px solid var(--lijn); border-radius: 999px; padding: .25rem .9rem; font-size: 1rem; }
.overzicht-tellers li.is-open { border-color: #7d8fa1; border-style: dashed; }
.overzicht-tellers li.is-gemarkeerd { background: #fff1d6; border-color: var(--signaal); }

.vraagrooster {
  list-style: none; padding: 0; margin: 1rem 0 1rem;
  display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: .4rem;
}
@media (min-width: 40rem) { .vraagrooster { grid-template-columns: repeat(10, minmax(0, 1fr)); gap: .55rem; } }
.vraagrooster li { margin: 0; }
.vraagrooster button {
  width: 100%; min-height: 3rem; padding: 0; font: inherit; font-weight: 800; font-size: 1.05rem; font-variant-numeric: tabular-nums;
  border-radius: 6px; cursor: pointer; border: 2px solid var(--lijn); background: var(--wit); color: var(--grijs); position: relative;
}
.vraagrooster button:hover { border-color: var(--zee); }
.vraagrooster button.is-open { border-style: dashed; border-color: #7d8fa1; color: var(--inkt); }
.vraagrooster button.is-beantwoord { background: var(--zee); border-color: var(--zee); color: var(--wit); }
.vraagrooster button.is-gemarkeerd { border: 2px solid var(--signaal); box-shadow: inset 0 0 0 1px var(--signaal); }
.vraagrooster button .icoon { position: absolute; top: 2px; right: 2px; width: .85rem; height: .85rem; color: var(--signaal); stroke-width: 2.4; }
.vraagrooster button .icoon-vlag-doek { fill: currentColor; }
.vraagrooster button.is-huidig { outline: 2px solid var(--inkt); outline-offset: 2px; }
.vraagrooster button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.vraagrooster button.is-goed { background: var(--goed-vlak); border-color: var(--goed); color: var(--goed); }
.vraagrooster button.is-fout { background: var(--fout-vlak); border-color: var(--fout); color: var(--fout); }

.legenda { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; font-size: 1rem; color: var(--grijs); padding: 0; margin: 0 0 1.5rem; list-style: none; }
.legenda li { margin: 0; display: flex; align-items: center; gap: .45rem; }
.legenda i { display: inline-block; position: relative; width: 1.15rem; height: 1.15rem; border-radius: 3px; border: 2px solid var(--lijn); background: var(--wit); }
.legenda .l-beantwoord { background: var(--zee); border-color: var(--zee); }
.legenda .l-open { border-style: dashed; border-color: #7d8fa1; }
.legenda .l-gemarkeerd { border-color: var(--signaal); }
.legenda .l-gemarkeerd .icoon { position: absolute; inset: 0; margin: auto; width: .8rem; height: .8rem; color: var(--signaal); stroke-width: 2.4; }
.legenda .l-gemarkeerd .icoon-vlag-doek { fill: currentColor; }
.legenda .l-goed { background: var(--goed-vlak); border-color: var(--goed); }
.legenda .l-fout { background: var(--fout-vlak); border-color: var(--fout); }

.overzicht-snel { margin-top: 0; }
.overzicht-acties { justify-content: space-between; border-top: 1px solid var(--lijn); padding-top: 1.5rem; margin-top: 1.75rem; }
@media (max-width: 30rem) { .overzicht-acties .knop { width: 100%; } .overzicht-acties { flex-direction: column-reverse; } }

/* Dialoog in de pagina (geen confirm) */
.dialoog {
  border: 0; border-radius: 6px; padding: 1.6rem 1.5rem 1.5rem; width: min(32rem, calc(100vw - 2rem)); max-width: none;
  color: var(--inkt); background: var(--wit); box-shadow: 0 24px 60px rgba(3, 14, 28, .45);
}
.dialoog::backdrop { background: rgba(7, 29, 53, .62); }
.dialoog h2 { font-size: 1.5rem; margin-bottom: .6rem; }
.dialoog p { margin-bottom: .8rem; }
.dialoog .knoppen { margin-top: 1.25rem; }
.dialoog-waarschuwing { margin-bottom: 1rem; }
@media (max-width: 30rem) { .dialoog .knoppen .knop { width: 100%; } }

/* Uitslag en terugkijken */
.uitslag-kaart { border-radius: 6px; padding: 1.5rem 1.4rem; margin: 0 0 2.25rem; }
.uitslag-kaart.is-geslaagd { background: var(--goed-vlak); border-color: var(--goed); }
.uitslag-kaart.is-gezakt { background: var(--fout-vlak); border-color: var(--fout); }
.uitslag-label { font-size: .9rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--grijs); margin: 0 0 .2rem; }
.uitslag-kop { font-size: clamp(2rem, 1.5rem + 2vw, 2.7rem); margin-bottom: .1em; }
.uitslag-kop:focus { outline: none; }
.is-geslaagd .uitslag-kop { color: var(--goed); }
.is-gezakt .uitslag-kop { color: var(--fout); }
.uitslag-kaart .uitslag-score { font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.1rem); }
.uitslag-uitleg { margin: .6rem 0 0; max-width: 38rem; }

.eindterm-scores { list-style: none; padding: 0; margin: 1rem 0 2rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: .9rem; max-width: 36rem; }
.eindterm-scores li { margin: 0; min-width: 0; }
.eindterm-scores .rij span:first-child { min-width: 0; overflow-wrap: break-word; hyphens: auto; }
.eindterm-scores .rij { display: flex; justify-content: space-between; gap: 1rem; font-weight: 600; margin-bottom: .25rem; }
.eindterm-scores .rij span:last-child { white-space: nowrap; }
.meter.meter-laag span { background: var(--fout); }

.terugkijk-kop { margin-top: 3rem; }
.terugkijk-cbr { max-width: 40rem; }
.terugkijk { border-top: 1px solid var(--lijn); padding-top: 1.5rem; margin-top: 1.5rem; scroll-margin-top: 1rem; }
.terugkijk:focus { outline: none; }
.terugkijk-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; font-size: 1rem; color: var(--grijs); margin-bottom: .4rem; }
.terugkijk-label { font-weight: 800; font-size: .85rem; padding: .1rem .6rem; border-radius: 999px; text-transform: uppercase; letter-spacing: .05em; }
.terugkijk.is-goed .terugkijk-label { background: var(--goed-vlak); color: var(--goed); }
.terugkijk.is-fout .terugkijk-label { background: var(--fout-vlak); color: var(--fout); }
.terugkijk.is-open .terugkijk-label { background: var(--vlak); color: var(--grijs); }
.terugkijk-vraag { font-weight: 600; color: var(--zee); font-size: 1.15rem; }
.terugkijk .optie { cursor: default; min-height: 3.6rem; }

/* Actualiteitsbadge */
.actueel {
  display: flex; gap: .6rem; align-items: flex-start; max-width: 40rem; margin: 1.5rem 0 0;
  font-size: 1rem; line-height: 1.45; color: #1f4d33; background: #f0f8f3; border: 1px solid #b8dcc6; border-radius: 6px;
  padding: .65rem .9rem;
}
.actueel-icoon { width: 1.3rem; height: 1.3rem; flex: none; color: var(--goed); margin-top: .05rem; }
.actueel-artikel { margin-top: 2.25rem; }
.lead + .actueel { margin: -.25rem 0 2rem; }

/* "Marifoon uitgelegd" alleen in de hoofdnavigatie als er ruimte is; altijd in de footer. */
.nav .nav-breed { display: none; }
@media (min-width: 62rem) { .nav .nav-breed { display: block; } }

/* Dashboard */

.dash-kop { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1rem 2rem; margin-bottom: 2rem; }
.dash-kop p { margin: 0; }
.dash-acties { display: grid; gap: 1rem; margin: 0 0 3rem; }
@media (min-width: 48rem) { .dash-acties { grid-template-columns: 1.3fr 1fr; } }
.dash-blok { border: 2px solid var(--lijn); border-radius: var(--radius); padding: 1.5rem; }
.dash-blok h2 { font-size: 1.35rem; }
.dash-blok-zee { background: var(--zee); color: var(--wit); border-color: var(--zee); }
.dash-blok-zee h2 { color: var(--wit); }
.dash-blok-zee p { color: #d5e1ec; }

.voortgang-groep { margin-bottom: 2.5rem; }
.voortgang-groep h3 { font-size: 1.2rem; border-bottom: 2px solid var(--zee); padding-bottom: .4rem; margin-bottom: 0; }
.voortgang-lijst { list-style: none; margin: 0; padding: 0; }
.voortgang-lijst li {
  display: grid; grid-template-columns: 1fr auto; gap: .4rem 1rem; align-items: center;
  padding: 1rem 0; border-bottom: 1px solid var(--lijn); margin: 0;
}
.voortgang-naam { font-weight: 800; color: var(--zee); }
.voortgang-cijfers { font-size: 1rem; color: var(--grijs); grid-column: 1; }
.voortgang-lijst .knop { grid-column: 2; grid-row: 1 / span 3; }
.meter { grid-column: 1; height: 8px; background: var(--vlak); border-radius: 4px; overflow: hidden; }
.meter span { display: block; height: 100%; background: var(--goed); }
.meter-zee span { background: var(--zee); }

.tabel { width: 100%; border-collapse: collapse; font-size: 1rem; }
.tabel th, .tabel td { text-align: left; padding: .6rem .5rem; border-bottom: 1px solid var(--lijn); }
.tabel th { color: var(--grijs); font-weight: 600; }
.label-geslaagd { color: var(--goed); font-weight: 800; }
.label-gezakt { color: var(--fout); font-weight: 800; }

/* Lopende tekst (juridisch, kennisbank) */

/* Lange samenstellingen (depositogarantiestelsel) breken af op smalle schermen. */
.tekst h1 { overflow-wrap: break-word; hyphens: auto; }
/* Lange woorden zonder spatie (e-mailadressen, URL's, ECLI's) breken af in plaats van de pagina breder te maken. */
.tekst p, .tekst li, .tekst figcaption, .tekst td, .tekst dd { overflow-wrap: break-word; }
.tekst h2 { font-size: 1.5rem; margin-top: 2.2rem; }
.tekst h3 { margin-top: 1.6rem; }
.tekst table { width: 100%; border-collapse: collapse; margin: 0 0 1.2em; font-size: 1rem; display: block; overflow-x: auto; }
.tekst th, .tekst td { border-bottom: 1px solid var(--lijn); padding: .5rem; text-align: left; vertical-align: top; }
/* Vergelijktabel (class tabel-stapel, cellen met data-label): op een smal scherm per rij een blok, de kolomnaam boven elke cel. */
@media (max-width: 600px) {
  .tekst table.tabel-stapel, .tekst table.tabel-stapel tbody, .tekst table.tabel-stapel tr, .tekst table.tabel-stapel th, .tekst table.tabel-stapel td { display: block; width: 100%; }
  .tekst table.tabel-stapel thead { display: none; }
  .tekst table.tabel-stapel tr { border-bottom: 2px solid var(--lijn); padding: .4rem 0 .6rem; }
  .tekst table.tabel-stapel th { border: 0; padding: .4rem 0 .1rem; font-size: 1.05rem; }
  .tekst table.tabel-stapel td { border: 0; padding: .25rem 0; }
  .tekst table.tabel-stapel td::before { content: attr(data-label); display: block; font-size: .85rem; font-weight: 700; color: var(--grijs, #5b6b7b); }
}
.tekst blockquote { margin: 0 0 1.2em; padding: .75rem 1rem; background: var(--vlak); border-radius: 6px; color: var(--grijs); }
.tekst img { max-width: 100%; height: auto; }
.bijgewerkt { color: var(--grijs); font-size: 1rem; }
.kruimel { font-size: 1rem; margin-bottom: 1rem; color: var(--grijs); }
.kruimel a { color: var(--grijs); }

.kennis-lijst { list-style: none; padding: 0; margin: 2rem 0 0; }
.kennis-lijst li { border-top: 1px solid var(--lijn); padding: 1.25rem 0; margin: 0; }
.kennis-lijst li:last-child { border-bottom: 1px solid var(--lijn); }
.kennis-lijst a { font-weight: 800; font-size: 1.2rem; }
.kennis-lijst p { margin: .3rem 0 0; color: var(--grijs); }

.gegevens { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1.5rem; }
.gegevens dt { font-weight: 800; color: var(--zee); }
.gegevens dd { margin: 0; }
@media (max-width: 30rem) { .gegevens { grid-template-columns: 1fr; } .gegevens dd { margin-bottom: .6rem; } }

/* Footer */

.voet { background: var(--zee-diep); color: #d5e1ec; margin-top: auto; font-size: 1rem; }
.voet-binnen {
  max-width: var(--paginabreedte); margin: 0 auto; padding: 3rem var(--rand) 2rem;
  display: grid; gap: 2rem;
}
@media (min-width: 48rem) { .voet-binnen { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.voet a, .voet .link-knop { color: #ffffff; }
.voet ul { list-style: none; padding: 0; margin: 0; }
.voet li + li { margin-top: .45rem; }
.voet-merk { color: var(--wit); font-weight: 800; font-size: 1.15rem; margin-bottom: .5rem; }
.voet-kop { color: var(--wit); font-weight: 800; margin-bottom: .6rem; }
.disclaimer { color: #ffffff; }
.voet-onder { border-top: 1px solid rgba(255,255,255,.15); }
.voet-onder p { max-width: var(--paginabreedte); margin: 0 auto; padding: 1.1rem var(--rand) 1.5rem; font-size: .95rem; color: #b6c6d6; }

/* Cookiebanner */

.cookiebanner {
  position: fixed; left: var(--rand); right: var(--rand); bottom: var(--rand); z-index: 50;
  max-width: 40rem; margin: 0 auto; background: var(--wit); color: var(--inkt);
  border: 2px solid var(--zee); border-radius: 6px; padding: 1.1rem 1.25rem; box-shadow: 0 10px 30px rgba(3, 14, 28, .3);
}
.cookiebanner p { margin: 0 0 .9rem; font-size: 1rem; }
.cookiebanner-knoppen { display: flex; gap: .6rem; flex-wrap: wrap; }
.cookiebanner .knop { min-height: 2.8rem; font-size: 1rem; }
/* Smal scherm: compacte balk tegen de onderrand, knoppen naast elkaar en even groot. */
@media (max-width: 600px) {
  .cookiebanner { left: 0; right: 0; bottom: 0; border-radius: 0; border-width: 2px 0 0; padding: .7rem var(--rand) .8rem; box-shadow: 0 -6px 20px rgba(3, 14, 28, .18); }
  .cookiebanner p { font-size: .9rem; line-height: 1.4; margin-bottom: .6rem; }
  .cookiebanner-knoppen { flex-wrap: nowrap; }
  .cookiebanner .knop { flex: 1 1 0; min-height: 2.75rem; padding-left: .5rem; padding-right: .5rem; }
}

.verborgen { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

/* ===== Conversie: balk, hero met foto, vertrouwen, demo, foto's, pop-up, plakkende knop ===== */

/* Aankondigingsbalk bovenaan */
.balk { background: var(--signaal); color: var(--zee); }
.balk-binnen {
  max-width: var(--paginabreedte); margin: 0 auto; padding: .5rem var(--rand);
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .15rem .75rem;
  font-size: 1rem; line-height: 1.35; text-align: center;
}
.balk a {
  color: var(--zee); font-weight: 800; white-space: nowrap;
  display: inline-flex; align-items: center; gap: .3rem; text-underline-offset: .2em;
}
.balk a svg { width: 1rem; height: 1rem; transition: transform .15s; }
.balk a:hover svg { transform: translateX(3px); }
.balk-kort { display: none; }
@media (max-width: 40rem) {
  .balk-lang { display: none; }
  .balk-kort { display: inline; font-weight: 600; }
}

/* Header op kleine schermen compacter */
@media (max-width: 40rem) {
  .nav .nav-klein-weg { display: none; }
  .kop .nav li.nav-extra { display: none; }
  .kop-binnen { flex-wrap: nowrap; padding-top: .6rem; padding-bottom: .6rem; }
  .merk { font-size: 1.05rem; white-space: nowrap; }
  .merk-icoon { width: 1.75rem; height: 1.75rem; }
  .nav ul { flex-wrap: nowrap; gap: .9rem; }
  .nav a.nav-cta { padding: .4rem .7rem; white-space: nowrap; }
}
.nav-kort { display: none; }
@media (max-width: 40rem) { .nav-lang { display: none; } .nav-kort { display: inline; } }
@media (max-width: 18rem) { .merk span { display: none; } }
.mf-podium { overflow-x: clip; }

/* Grote knop met subregel */
.knop-groot { min-height: 3.6rem; padding: .8rem 1.6rem; font-size: 1.15rem; box-shadow: 0 6px 18px rgba(245, 160, 15, .35); }
.knop-sub { display: block; font-size: .85rem; font-weight: 600; opacity: .85; }
.knop:has(.knop-sub) { flex-direction: column; gap: .1rem; }
.knop-signaal { transition: background-color .15s, transform .15s; }
.knop-signaal:active { transform: translateY(1px); }

/* Hero met foto */
.hero-foto { overflow: hidden; isolation: isolate; }
.hero-achter, .hero-achter img {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
}
.hero-achter { z-index: -2; }
.hero-achter img { object-fit: cover; object-position: 70% 30%; }
.hero-foto::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(7, 29, 53, .55) 0%, rgba(7, 29, 53, .82) 45%, rgba(7, 29, 53, .95) 100%);
}
.hero-foto .hero-binnen { display: block; position: relative; padding-top: 3rem; padding-bottom: 4.5rem; }
.hero-tekst { max-width: 38rem; }
.hero-bovenkop {
  display: inline-block; font-size: .95rem; font-weight: 800; letter-spacing: .02em;
  color: var(--zee); background: var(--signaal); border-radius: 999px; padding: .2rem .8rem; margin-bottom: 1rem;
}
.hero-foto h1 { text-shadow: 0 2px 18px rgba(0, 0, 0, .35); }
.hero-foto .lead { color: #e6eef5; }
.usp-lijst { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: .6rem; }
.usp-lijst li { margin: 0; position: relative; padding-left: 2rem; color: #e6eef5; line-height: 1.45; }
.usp-lijst li::before {
  content: ""; position: absolute; left: 0; top: .12em; width: 1.35rem; height: 1.35rem; border-radius: 50%;
  background: var(--signaal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-6.5' fill='none' stroke='%230b2a4a' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat;
}
.usp-lijst strong { color: var(--wit); }
.hero-chip { display: none; }
@media (min-width: 60rem) {
  .hero-foto::before { background: linear-gradient(90deg, rgba(7, 29, 53, .97) 0%, rgba(7, 29, 53, .9) 38%, rgba(7, 29, 53, .45) 62%, rgba(7, 29, 53, .1) 100%); }
  .hero-achter img { object-position: center 35%; }
  .hero-foto .hero-binnen { padding-top: 4.5rem; padding-bottom: 6.5rem; min-height: 36rem; }
  .hero-chip {
    display: block; position: absolute; right: var(--rand); bottom: 5.5rem;
    background: var(--wit); color: var(--grijs); border-radius: 6px; padding: .8rem 1.1rem; font-size: .95rem; line-height: 1.35;
    box-shadow: 0 14px 34px rgba(3, 14, 28, .35);
  }
  .hero-chip strong { display: block; color: var(--zee); font-size: 1.15rem; }
}
@media (max-width: 40rem) {
  .hero-foto .hero-binnen { padding-top: 1.5rem; }
  .hero-foto .lead { display: none; }
  .hero-bovenkop { font-size: .85rem; }
  .hero-foto h1 { margin-bottom: .2em; }
  .hero-foto .knoppen { flex-direction: column; align-items: stretch; }
  .hero-foto .knoppen .knop { width: 100%; }
  .usp-lijst { font-size: 1.02rem; }
}

/* Vertrouwensstrip onder de hero */
.vertrouwen { border-bottom: 1px solid var(--lijn); }
.vertrouwen ul {
  list-style: none; margin: 0 auto; padding-top: 1.25rem; padding-bottom: 1.25rem;
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.5rem;
}
.vertrouwen li { margin: 0; display: flex; gap: .7rem; align-items: flex-start; font-size: .95rem; line-height: 1.35; color: var(--grijs); }
.vertrouwen svg { width: 1.6rem; height: 1.6rem; flex: none; color: var(--zee-licht); margin-top: .1rem; }
.vertrouwen strong { display: block; color: var(--zee); font-size: 1rem; }
@media (min-width: 60rem) { .vertrouwen ul { grid-template-columns: repeat(4, 1fr); } }

/* Demo-vraag als eigen sectie */
.sectie-demo { padding-top: 3.5rem; }
.demo-raster { display: grid; gap: 2rem; }
.demo-raster .demo { box-shadow: 0 16px 40px rgba(11, 42, 74, .16); border: 1px solid var(--lijn); }
.demo-kop h3 { font-size: 1.05rem; margin: 0; color: var(--grijs); font-weight: 600; letter-spacing: 0; }
@media (min-width: 60rem) { .demo-raster { grid-template-columns: .9fr 1.1fr; gap: 4rem; align-items: center; } }

.vinklijst { list-style: none; padding: 0; margin: 1.25rem 0 0; }
.vinklijst li { position: relative; padding-left: 1.9rem; }
.vinklijst li::before {
  content: "\2713"; position: absolute; left: 0; top: .2em; width: 1.1rem; height: 1.1rem; border-radius: 50%;
  background: var(--blauw-licht); color: var(--zee-licht); font-size: .75rem; font-weight: 800; line-height: 1.1rem; text-align: center;
}

/* Foto's van mensen op het water */
.foto-raster { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 1rem; }
.foto-raster li { margin: 0; position: relative; border-radius: 6px; overflow: hidden; background: var(--lijn); aspect-ratio: 4 / 3; }
.foto-raster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto-raster span {
  position: absolute; left: .75rem; bottom: .75rem; background: rgba(7, 29, 53, .82); color: var(--wit);
  font-weight: 800; font-size: .95rem; padding: .3rem .7rem; border-radius: 6px;
}
@media (min-width: 40rem) { .foto-raster { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 39.99rem) {
  .foto-raster { grid-auto-flow: column; grid-auto-columns: 82%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .5rem; }
  .foto-raster li { scroll-snap-align: start; }
}

/* Zekerheden onder de pakketten */
.zekerheden { list-style: none; padding: 0; margin: 1.5rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; font-size: 1rem; color: var(--grijs); }
.zekerheden li { margin: 0; position: relative; padding-left: 1.5rem; }
.zekerheden li::before {
  content: ""; position: absolute; left: .2rem; top: .3em; width: .5rem; height: .9rem;
  border: solid var(--goed); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}

/* Aanbevolen pakket bovenaan op mobiel */
@media (max-width: 51.99rem) {
  .pakketten .pakket-kaart.is-aanbevolen { order: -1; }
  .pakketten .pakket-kaart.is-aanbevolen .pakket-binnen { box-shadow: 0 10px 28px rgba(11, 42, 74, .14); }
}

/* Plakkende knoppen onderin (mobiel, homepage) */
.plak-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; gap: .6rem; padding: .65rem var(--rand) calc(.65rem + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .97); border-top: 1px solid var(--lijn); box-shadow: 0 -8px 24px rgba(11, 42, 74, .12);
  transform: translateY(110%); transition: transform .25s ease; visibility: hidden;
}
.plak-cta.is-zichtbaar { transform: none; visibility: visible; }
.plak-cta .knop { min-height: 3rem; padding: .55rem .9rem; font-size: 1.02rem; }
.plak-cta .knop-signaal { flex: 1.6; }
.plak-cta .knop-licht { flex: 1; }
@media (min-width: 48rem) { .plak-cta { display: none; } }

/* Pop-up met de gratis test */
.popup {
  border: 0; padding: 0; border-radius: 6px; width: min(34rem, calc(100% - 2rem)); max-height: calc(100dvh - 2rem);
  overflow: auto; background: var(--wit); color: var(--inkt); box-shadow: 0 30px 80px rgba(3, 14, 28, .5);
}
.popup::backdrop { background: color-mix(in srgb, var(--zee-diep, #071d35) 78%, transparent); backdrop-filter: blur(3px); }
.popup[open] { animation: popup-in .28s ease-out; }
@keyframes popup-in { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
.popup-kop {
  position: relative; color: var(--wit); padding: 1.75rem 1.75rem 1.5rem;
  background: radial-gradient(120% 140% at 100% 0%, var(--zee-licht) 0%, var(--zee) 45%, var(--zee-diep, var(--zee)) 100%);
}
.popup-sluit {
  position: absolute; top: .9rem; right: .9rem; width: 2.75rem; height: 2.75rem; border-radius: 50%;
  border: 0; background: rgba(255, 255, 255, .12); color: var(--wit); cursor: pointer; display: grid; place-items: center;
}
.popup-sluit:hover { background: rgba(255, 255, 255, .22); }
.popup-sluit svg { width: 1.3rem; height: 1.3rem; }
.popup-merk { display: flex; align-items: center; gap: .7rem; font-size: .95rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .82); margin: 0 0 1.1rem; overflow-wrap: anywhere; }
.popup-icoon { width: 2.6rem; height: 2.6rem; flex: none; border-radius: 6px; background: rgba(255, 255, 255, .92); display: grid; place-items: center; }
.popup-icoon svg, .popup-logo { width: 1.7rem; height: 1.7rem; display: block; }
/* Lange domeinnaam: niet onder de sluitknop, kleiner en afbreekbaar. */
.popup-merk { padding-right: 3rem; overflow-wrap: anywhere; letter-spacing: .04em; font-size: .85rem; line-height: 1.25; }
.popup-kop h2 { color: var(--wit); font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2rem); margin: 0 0 .5rem; padding-right: 2.5rem; }
.popup-kop p:last-child { color: rgba(255, 255, 255, .88); margin: 0; }
.popup-inhoud { padding: 1.5rem 1.75rem 1.4rem; }
.popup-kaart { border: 1px solid color-mix(in srgb, var(--zee-licht) 22%, #fff); background: color-mix(in srgb, var(--zee-licht) 6%, #fff); border-radius: 6px; padding: 1.1rem; }
.popup-kaart-kop { display: flex; gap: .9rem; align-items: center; margin-bottom: 1rem; }
.popup-kaart-icoon { width: 3rem; height: 3rem; border-radius: 6px; background: color-mix(in srgb, var(--zee-licht) 14%, #fff); color: var(--zee-licht); display: grid; place-items: center; flex: none; }
.popup-kaart-icoon svg { width: 1.6rem; height: 1.6rem; }
.popup-kaart-titel { font-weight: 800; color: var(--zee); margin: 0; font-size: 1.15rem; line-height: 1.25; }
.popup-kaart-sub { margin: 0; color: var(--grijs); font-size: .95rem; }
.popup-feiten { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.popup-feiten li { margin: 0; background: var(--wit); border: 1px solid color-mix(in srgb, var(--zee-licht) 16%, #fff); border-radius: 6px; padding: .6rem .3rem; text-align: center; font-size: .9rem; color: var(--grijs); line-height: 1.3; }
.popup-feiten strong { display: block; color: var(--zee-licht); font-size: 1.25rem; }
.popup-knop { width: 100%; margin-top: 1.25rem; border-radius: 6px; }
.popup-knop svg { width: 1.2rem; height: 1.2rem; }
.popup-voet { text-align: center; color: var(--grijs); font-size: .9rem; margin: .9rem 0 0; }
@media (max-width: 30rem) {
  .popup { width: calc(100% - 1.25rem); border-radius: 6px; }
  .popup-kop { padding: 1.4rem 1.25rem 1.25rem; }
  .popup-merk { text-transform: none; letter-spacing: 0; gap: .55rem; }
  .popup-inhoud { padding: 1.25rem; }
}

/* Gratis test: intro */
.bovenkop { font-size: .95rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--goed); margin: 0 0 .4rem; }
.feitjes { list-style: none; padding: 0; margin: 0 0 2rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.feitjes li { margin: 0; background: var(--vlak); border-radius: 999px; padding: .3rem .9rem; font-size: 1rem; color: var(--grijs); }
.feitjes strong { color: var(--zee); }

/* Gratis test: uitslag */
.uitslag-kaart.is-gratis { background: var(--zee); color: #e6eef5; border: 0; padding: 1.6rem 1.5rem 1.4rem; }
.uitslag-kaart.is-gratis .uitslag-label { color: #b9cbdc; }
.uitslag-kaart.is-gratis .uitslag-score { color: var(--wit); font-size: clamp(1.8rem, 1.4rem + 2vw, 2.4rem); margin-bottom: 1rem; }
.uitslag-kaart.is-gratis .uitslag-score strong { font-size: 1.6em; color: var(--signaal); }
.uitslag-oordeel { color: var(--wit); font-size: 1.45rem; margin: 1.25rem 0 .4rem; }
.uitslag-oordeel:focus { outline: none; }
.uitslag-kaart.is-gratis p:last-child { margin-bottom: 0; }
.uitslag-vergelijk { font-size: 1rem; color: #b9cbdc; }
/* Norm: label boven de balk (nooit door de streep), de streep loopt alleen door de balk. */
.norm { position: relative; }
.norm-label { display: block; box-sizing: border-box; margin-bottom: .55rem; font-size: .85rem; font-weight: 800; line-height: 1.3; color: var(--wit); }
.norm-label.is-rechts { min-width: max-content; text-align: right; }
.norm-baan { display: block; position: relative; }
.norm-balk { display: block; height: 14px; border-radius: 6px; background: rgba(255, 255, 255, .16); overflow: hidden; }
.norm-vulling { display: block; height: 100%; border-radius: 6px; background: #e8a33d; transition: width .6s ease; }
.norm-vulling.is-goed { background: #43c07a; }
.norm-streep { position: absolute; top: -6px; bottom: -6px; width: 2px; margin-left: -1px; background: var(--wit); }

.uitslag-lijst { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .4rem; }
.uitslag-lijst li { margin: 0; display: flex; align-items: center; gap: .6rem; padding: .55rem .8rem; border-radius: 6px; font-size: 1rem; }
.uitslag-lijst li::before {
  content: ""; flex: none; width: 1.4rem; height: 1.4rem; border-radius: 50%; background-position: center; background-repeat: no-repeat; background-size: 75%;
}
.uitslag-lijst .is-goed { background: var(--goed-vlak); }
.uitslag-lijst .is-goed::before { background-color: var(--goed); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-6.5' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.uitslag-lijst .is-fout { background: var(--fout-vlak); }
.uitslag-lijst .is-fout::before { background-color: var(--fout); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6.5 6.5l7 7M13.5 6.5l-7 7' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E"); }
.uitslag-onderwerp { font-weight: 800; color: var(--zee); }
.uitslag-zwak { margin-bottom: 2rem; }

.advies-vraag { margin: 2rem 0 1rem; }
.advies-vraag h2 { font-size: 1.35rem; margin-bottom: .2rem; }
.keuze-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.chip {
  font: inherit; font-size: 1rem; font-weight: 600; min-height: 2.9rem; padding: .5rem 1rem; border-radius: 999px; cursor: pointer;
  border: 2px solid var(--lijn); background: var(--wit); color: var(--zee);
}
.chip:hover { border-color: var(--zee); }
.chip[aria-pressed="true"] { background: var(--zee); border-color: var(--zee); color: var(--wit); }
@media (max-width: 30rem) { .keuze-chips { flex-direction: column; } .chip { width: 100%; text-align: left; } }

.advies-kaart { border: 3px solid var(--signaal); border-radius: 6px; padding: 1.5rem 1.4rem 1.25rem; margin: 1rem 0 2.5rem; background: #fffaf0; position: relative; }
.advies-label { display: inline-block; background: var(--signaal); color: var(--zee); font-weight: 800; font-size: .9rem; border-radius: 999px; padding: .15rem .75rem; margin: 0 0 .7rem; }
.advies-kaart h2 { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .25rem 1rem; font-size: 1.6rem; margin-bottom: .15rem; }
.advies-prijs { font-size: 1.9rem; }
.advies-looptijd { color: var(--grijs); font-size: 1rem; }
.advies-lijst { list-style: none; padding: 0; margin: 0 0 1.25rem; font-size: 1rem; }
.advies-lijst li { position: relative; padding-left: 1.75rem; }
.advies-lijst li::before {
  content: ""; position: absolute; left: .25rem; top: .25em; width: .5rem; height: .95rem;
  border: solid var(--goed); border-width: 0 3px 3px 0; transform: rotate(45deg);
}
.advies-kaart .knop { width: 100%; }
.advies-zekerheid { text-align: center; font-size: .9rem; color: var(--grijs); margin: .8rem 0 .3rem; }
.advies-alle { text-align: center; margin: 0; font-size: 1rem; }

/* Mail na de gratis test (lib/mailcode.php) als kortingsbon (wens Gijs 5 en 6 nov 2026, blauwdruk vaarbewijs): een kaartje
   met links de strook met groot het bedrag in de koopkleur van de site (--signaal met --signaal-tekst, dus altijd leesbaar),
   een geperforeerde lijn, en rechts de kop, het codevak dat zich na de aanvraag vult en alleen een e-mailveld.
   Een gestippelde knipbonrand, hoeken 6px, geen zijstreep. Het watermerk van het logo (als de site het heeft) staat licht
   in de strook. */
.mailcode { margin: 2rem 0 2.5rem; }
.mailcode-bon {
  display: grid; grid-template-columns: minmax(10rem, 13rem) minmax(0, 1fr);
  border: 2px dashed var(--signaal); border-radius: 6px; background: var(--wit); overflow: hidden;
}
.mailcode-groot {
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: .15rem; padding: 1.5rem 1.25rem;
  background-color: var(--signaal); color: var(--signaal-tekst);
  border-right: 2px dashed color-mix(in srgb, var(--signaal-tekst) 40%, transparent);
  background-image: var(--merk-watermerk, none); background-repeat: no-repeat; background-position: right -1.5rem bottom -.75rem; background-size: 8.5rem auto;
}
.mailcode-getal { font-size: clamp(3.4rem, 8vw, 4.75rem); font-weight: 800; line-height: .9; letter-spacing: -.04em; }
.mailcode-wat { font-size: 1.35rem; font-weight: 800; line-height: 1.1; }
.mailcode-op { font-size: .95rem; font-weight: 600; line-height: 1.35; margin-top: .35rem; }
.mailcode-geldig {
  margin-top: .7rem; padding: .25rem .65rem; border-radius: 999px; font-size: .8rem; font-weight: 700;
  background: var(--wit); color: var(--inkt); border: 1px solid color-mix(in srgb, var(--signaal-tekst) 25%, transparent);
}
.mailcode-inhoud { padding: 1.35rem 1.4rem 1.2rem; }
.mailcode h2 { font-size: 1.45rem; margin: 0 0 .35rem; }
.mailcode-intro { max-width: 36rem; margin: 0; }
/* Het codevak: leeg met stippen en een hint, na de aanvraag de code met een kopieerknop */
.mailcode-slot {
  display: grid; gap: .3rem; margin: 1rem 0 .2rem; padding: .8rem 1rem; border-radius: 6px;
  border: 1px dashed color-mix(in srgb, var(--signaal) 70%, var(--inkt)); background: color-mix(in srgb, var(--signaal) 9%, var(--wit));
}
.mailcode-slot[hidden] { display: none; }
.mailcode-slot p { margin: 0; }
.mailcode-slot.is-open { gap: .55rem; }
.mailcode-label { font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--inkt); }
.mailcode-masker { font: 700 1.6rem/1 "Courier New", Courier, monospace; letter-spacing: .25em; color: color-mix(in srgb, var(--inkt) 30%, transparent); }
.mailcode-slot-hint { font-size: .85rem; color: var(--grijs); }
.mailcode-coderij { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.mailcode-code {
  font: 700 1.6rem/1 "Courier New", Courier, monospace; letter-spacing: .2em; color: var(--inkt); background: var(--wit);
  border: 2px dashed var(--zee); border-radius: 6px; padding: .6rem 1rem; cursor: copy; min-height: 44px;
}
.mailcode-code:focus-visible { outline: 3px solid var(--zee); outline-offset: 2px; }
.mailcode-kopieer { margin: 0; min-height: 44px; }
.mailcode-gekopieerd { font-weight: 700; color: var(--goed); }
/* Lang drukken selecteert de hele code in een keer (iPhone en Android) */
.mailcode-code, .kp-kopieer-code { -webkit-user-select: all; user-select: all; -webkit-touch-callout: default; }
.mailcode-form { margin-top: 1rem; }
.mailcode-rij { display: flex; flex-wrap: wrap; gap: .6rem; }
.mailcode-rij input[type="email"] { flex: 1 1 15rem; min-width: 0; margin: 0; }
.mailcode-rij .knop { flex: 0 0 auto; margin: 0; }
.mailcode .veld-fout { margin: .5rem 0 0; }
.mailcode-tips { margin: .9rem 0 0; }
.mailcode-tips input { width: 1.15rem; height: 1.15rem; margin-top: .1rem; }
.mailcode-tips label { font-size: .95rem; color: var(--grijs); }
.mailcode-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.mailcode-uitleg { margin: .6rem 0 0; font-size: .85rem; }
.mailcode-dank { font-weight: 700; color: var(--zee); margin: .75rem 0 0; }
.mailcode-slot.is-open ~ .mailcode-dank { font-weight: 400; font-size: .95rem; color: var(--grijs); }
.mailcode-dank:focus { outline: none; }
@media (max-width: 40rem) {
  .mailcode-bon { grid-template-columns: 1fr; }
  .mailcode-groot {
    flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: baseline; column-gap: .6rem; padding: 1rem 1.1rem; background-size: 6rem auto;
    border-right: 0; border-bottom: 2px dashed color-mix(in srgb, var(--signaal-tekst) 40%, transparent);
  }
  .mailcode-getal { font-size: 3rem; }
  .mailcode-op { flex-basis: 100%; margin-top: 0; }
  .mailcode-geldig { margin-top: .4rem; }
  .mailcode-inhoud { padding: 1.1rem 1.1rem 1rem; }
  .mailcode-rij .knop { flex: 1 1 100%; }
}

.cadeau { background: var(--vlak); border-radius: 6px; padding: 1.4rem 1.4rem .4rem; margin-bottom: 1rem; }
.cadeau h2 { font-size: 1.25rem; }
.cadeau ul { padding-left: 1.2rem; }

/* Toestelvraag in de gratis test: de marifoon als examenafbeelding met een nummer bij het onderdeel. */
.quiz-toestel { border-radius: 6px; overflow: hidden; margin: 0 0 1.25rem; padding: .5rem 0 .75rem; }
.quiz-toestel .mf-nr.is-gevraagd {
  width: 2.3em; height: 2.3em; font-size: 1.05em;
  box-shadow: 0 0 0 .2em var(--zee-diep), 0 0 0 .45em rgba(245, 160, 15, .45);
  animation: mf-nr-puls 1.8s ease-in-out infinite;
}
@keyframes mf-nr-puls {
  0%, 100% { box-shadow: 0 0 0 .2em var(--zee-diep), 0 0 0 .45em rgba(245, 160, 15, .45); }
  50% { box-shadow: 0 0 0 .2em var(--zee-diep), 0 0 0 .8em rgba(245, 160, 15, .12); }
}
/* Het nummer staat naast het onderdeel, zodat de knop zelf zichtbaar blijft. */
.quiz-toestel .mf-nr.is-gevraagd[data-nr-voor="kanaal16"] { top: auto; bottom: calc(100% + .3em); right: auto; left: 50%; margin-left: -1.15em; }
.quiz-toestel .mf-nr.is-gevraagd[data-nr-voor="distress"],
.quiz-toestel .mf-nr.is-gevraagd[data-nr-voor="vermogen"],
.quiz-toestel .mf-nr.is-gevraagd[data-nr-voor="stand"] { top: calc(100% + .3em); right: auto; left: 50%; margin-left: -1.15em; }
.quiz-toestel .mf-nr.is-gevraagd[data-nr-voor="volume"],
.quiz-toestel .mf-nr.is-gevraagd[data-nr-voor="squelch"] { top: .2em; right: auto; left: auto; right: calc(100% + .25em); }
.quiz-toestel .mf-nr.is-gevraagd[data-nr-voor="ptt"] { left: -4.6em; }
@media (max-width: 47.99rem) {
  .quiz-toestel .mf-toestel { max-width: 17rem; margin: 0 auto; }
  /* Op mobiel staat het toestel rechtop: andere vrije plekken naast de onderdelen. */
  .quiz-toestel .mf-nr.is-gevraagd[data-nr-voor="squelch"] { top: -2.7em; right: auto; left: 50%; margin-left: -1.15em; }
  .quiz-toestel .mf-nr.is-gevraagd[data-nr-voor="distress"],
  .quiz-toestel .mf-nr.is-gevraagd[data-nr-voor="stand"] { top: 50%; margin-top: -1.15em; left: calc(100% + .3em); margin-left: 0; }
  .quiz-toestel .mf-nr.is-gevraagd[data-nr-voor="vermogen"] { top: 50%; margin-top: -1.15em; left: auto; right: calc(100% + .3em); margin-left: 0; }
  .quiz-toestel .mf-nr.is-gevraagd[data-nr-voor="ptt"] { top: 1.4em; left: -3.9em; transform: translateZ(.5em) rotateZ(-90deg); }
}
@media (prefers-reduced-motion: reduce) { .quiz-toestel .mf-nr.is-gevraagd { animation: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* Dashboard: certificaat en opfriscursus */

.dash-extra { margin-top: -2rem; }
.dash-extra .meter { margin-top: .25rem; }
.badge-nieuw {
  display: inline-block; vertical-align: middle; margin-left: .4rem; padding: .15rem .6rem; border-radius: 999px;
  background: var(--signaal); color: var(--zee); font-size: .85rem; font-weight: 800; letter-spacing: .02em;
}

/* Opfriscursus */

.opfris-lijst { list-style: none; padding: 0; margin: 2rem 0 0; }
.opfris-lijst li { border-top: 1px solid var(--lijn); padding: 1.25rem 0; margin: 0; }
.opfris-lijst li:last-child { border-bottom: 1px solid var(--lijn); }
.opfris-lijst a { font-weight: 800; font-size: 1.25rem; }
.opfris-lijst p { margin: .3rem 0 0; color: var(--grijs); }
.opfris-lijst .opfris-meta { font-size: 1rem; }
.opfris-lijst.is-teaser li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem; padding: .9rem 0; }
.opfris-lijst.is-teaser strong { color: var(--zee); }
.opfris-teaser-kop { font-size: 1.3rem; margin-top: 2.5rem; }
.opfris-datum {
  display: inline-block; font-size: .9rem; font-weight: 800; color: var(--zee-licht); text-transform: uppercase;
  letter-spacing: .06em; margin: 0 0 .35rem;
}
.opfris-lijst li > .opfris-datum { display: block; }
.opfris-artikel h1 { margin-top: .2rem; }
.opfris-artikel .lead { margin-bottom: 1.5rem; }
.opfris-oefen { margin-top: 2.5rem; border-color: var(--signaal); background: #fffaf0; }
.kennis-opfris { margin-top: 2rem; color: var(--grijs); background: var(--vlak); border-radius: var(--radius); padding: .8rem 1rem; }

/* Certificaat */

.smal-blok { max-width: var(--tekstbreedte); }
.cert-voortgang { background: var(--vlak); border-radius: var(--radius); padding: 1rem 1.2rem; margin: 0 0 .5rem; }
.cert-voortgang p { margin-bottom: .6rem; }
.cert-voortgang .meter { display: block; }
.certificaat-melding { margin-top: -1rem; }
.certificaat-melding .knop { margin-top: .25rem; }
.cert-scherm { max-width: var(--tekstbreedte); }
.cert-acties { margin-top: 1.75rem; padding-bottom: 3rem; }
.cert-acties .knoppen { margin-top: 0; margin-bottom: 1rem; }
.cert-gegevens-scherm { margin: 1.5rem 0; }
.cert-gegevens-scherm dd { overflow-wrap: anywhere; }

/* Het certificaat zelf: A4 liggend (297 x 210). Alle maten in cqw, zodat het op elk scherm en op papier gelijk schaalt. */
.cert-houder { container-type: inline-size; max-width: 66rem; margin: 1rem 0 0; }
.certificaat {
  --c-zee: #0f3b3f; --c-goud: #14a89c; --c-oranje: #ff8a3d; --c-papier: #ffffff; --c-inkt: #0f3b3f;
  position: relative; width: 100%; aspect-ratio: 297 / 210; background: var(--c-zee); padding: 1.6cqw;
  border-radius: .6cqw; box-shadow: 0 1.2cqw 3cqw rgba(7, 29, 53, .22);
  font-family: var(--font); color: var(--c-inkt); overflow: hidden;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.cert-rand {
  position: relative; height: 100%; background: var(--c-papier); border-radius: .25cqw; overflow: hidden;
  display: flex; flex-direction: column; padding: 3.2cqw 5cqw 2.4cqw;
  box-shadow: inset 0 0 0 .55cqw var(--c-papier), inset 0 0 0 .7cqw var(--c-goud);
}
.cert-rand::before, .cert-rand::after {
  content: ""; position: absolute; width: 7cqw; height: 7cqw; border: .35cqw solid var(--c-oranje); z-index: 1;
}
.cert-rand::before { top: 1.6cqw; left: 1.6cqw; border-right: 0; border-bottom: 0; }
.cert-rand::after { bottom: 1.6cqw; right: 1.6cqw; border-left: 0; border-top: 0; }
.cert-rand > * { position: relative; z-index: 2; }
.cert-rand > .cert-golven { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 13cqw; z-index: 0; }
.cert-kop { display: flex; justify-content: space-between; align-items: center; }
.cert-merk { display: inline-flex; align-items: center; gap: .9cqw; font-weight: 800; font-size: 1.9cqw; color: var(--c-zee); letter-spacing: -.01em; }
.cert-merk svg { width: 3.6cqw; height: 3.6cqw; }
.cert-site { font-size: 1.35cqw; color: #4a5d70; font-weight: 600; letter-spacing: .04em; }
.cert-midden { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 3cqw; }
.cert-boven { margin: 0 0 .6cqw; font-size: 1.3cqw; font-weight: 800; letter-spacing: .32em; text-transform: uppercase; color: var(--c-goud); }
.cert-titel {
  margin: 0 0 2.2cqw; font-family: "Fraunces", Georgia, "Times New Roman", serif; font-weight: 600;
  font-size: 3.7cqw; line-height: 1.1; color: var(--c-zee); letter-spacing: -.005em; max-width: none;
}
.cert-intro { margin: 0 0 .8cqw; font-size: 1.6cqw; color: #4a5d70; }
.cert-naam {
  margin: 0; font-family: "Fraunces", Georgia, "Times New Roman", serif; font-weight: 600; font-size: 5cqw; line-height: 1.12;
  color: var(--c-zee); overflow-wrap: anywhere; max-width: 100%;
}
.cert-streep { display: block; width: 26cqw; height: .3cqw; margin: 1.5cqw auto 1.6cqw; background: linear-gradient(90deg, transparent, var(--c-goud) 18%, var(--c-oranje) 50%, var(--c-goud) 82%, transparent); }
.cert-tekst { margin: 0; font-size: 1.75cqw; line-height: 1.45; max-width: 64cqw; }
.cert-tekst strong { color: var(--c-zee); white-space: nowrap; }
.cert-voet { display: flex; justify-content: space-between; align-items: flex-end; gap: 3cqw; margin-top: 1.4cqw; }
.cert-gegevens { display: flex; gap: 3.2cqw; margin: 0; }
.cert-gegevens div { min-width: 0; }
.cert-gegevens dt { font-size: 1cqw; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--c-goud); margin: 0 0 .35cqw; }
.cert-gegevens dd { margin: 0; font-size: 1.35cqw; font-weight: 600; color: var(--c-zee); }
.cert-nummer { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; letter-spacing: .06em; }
.cert-gegevens-url dd { font-size: 1.1cqw; font-weight: 400; color: var(--c-inkt); }
.cert-uitgever { display: flex; flex-direction: column; align-items: center; min-width: 20cqw; }
.cert-lijn { display: block; width: 100%; height: .15cqw; background: var(--c-zee); margin-bottom: .6cqw; }
.cert-uitgever-naam { font-size: 1.5cqw; font-weight: 800; color: var(--c-zee); }
.cert-uitgever-label { font-size: 1cqw; letter-spacing: .14em; text-transform: uppercase; color: #4a5d70; }
.cert-disclaimer { margin: 1.6cqw 0 0; padding-top: 1.1cqw; border-top: .1cqw solid #d9cfb8; font-size: 1.02cqw; line-height: 1.45; color: #3b4f63; text-align: center; }

/* Controlepagina */

.controle-kaart { border-radius: 6px; padding: 1.5rem 1.4rem; margin: 0 0 1.5rem; }
.controle-kaart.is-geldig { background: var(--goed-vlak); border-color: var(--goed); }
.controle-kaart.is-ongeldig { background: var(--fout-vlak); border-color: var(--fout); }
.controle-kaart p:last-child, .controle-kaart dl:last-child { margin-bottom: 0; }
.controle-status { display: flex; align-items: center; gap: .7rem; font-size: clamp(1.4rem, 1.2rem + 1vw, 1.8rem); font-weight: 800; margin: 0 0 1rem; line-height: 1.2; }
.controle-status svg { width: 2rem; height: 2rem; flex: none; }
.is-geldig .controle-status { color: var(--goed); }
.is-ongeldig .controle-status { color: var(--fout); }
.controle-form { margin-top: 1.5rem; }

@media print {
  .kop, .voet, .cookiebanner, .knoppen, .examen-kop { display: none !important; }
  body { font-size: 12pt; }

  /* Certificaat: alleen het certificaat, precies een A4 liggend (de @page-regel staat op de pagina zelf). */
  body.certificaat-pagina { background: #fff; min-height: 0; display: block; }
  body.certificaat-pagina .skiplink, body.certificaat-pagina main > :not(.cert-houder) { display: none !important; }
  body.certificaat-pagina main { padding: 0 !important; margin: 0 !important; max-width: none !important; }
  body.certificaat-pagina .cert-houder { width: 297mm; height: 210mm; max-width: none; margin: 0; overflow: hidden; break-inside: avoid; }
  body.certificaat-pagina .certificaat { width: 297mm; height: 210mm; border-radius: 0; box-shadow: none; }
}

/* Koopflow: stappen, keuze, knop en vaste balk */
.koop-stap { display: flex; align-items: center; gap: .6rem; font-size: 1.3rem; font-weight: 800; color: var(--zee); padding: 0; margin: 0 0 .25rem; }
.koop-stap-nr {
  display: inline-grid; place-items: center; flex: none; width: 1.9rem; height: 1.9rem; border-radius: 50%;
  background: var(--zee); color: var(--wit); font-size: 1rem; font-weight: 800;
}
.pakket-keuze { margin-bottom: 2rem; }
.koop-ingelogd p { margin: 0; }
.koop-keuze { background: var(--vlak); border-radius: 6px; padding: .8rem 1rem; margin: .75rem 0 1.25rem; line-height: 1.5; }
.koop-keuze-looptijd { color: var(--grijs); }
.koop-wijzig { white-space: nowrap; margin-left: .25rem; }
.veld-fout { display: block; color: #b42318; font-weight: 600; margin-top: .4rem; }
.veld-fout[hidden] { display: none; }
#herroeping-fout { margin: -.25rem 0 .75rem 2.6rem; }
.koop-knoppen { margin-top: 1.25rem; }
.koop-knop { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 3.4rem; font-size: 1.15rem; }
.koop-knop.is-bezig { opacity: .75; pointer-events: none; }
.koop-slot { width: 1.15rem; height: 1.15rem; flex: none; }
.koop-zekerheden { margin-top: 1rem; font-size: .98rem; }
.koop-akkoord { margin-top: 1rem; }
.koop-pagina .melding-fout { margin: 1rem 0 0; }
@media (max-width: 55.99rem) {
  .koop-knop { width: 100%; }
  .koop-samenvatting { display: none; }
  .koop-pagina .pakket-onderdelen .is-niet { display: none; }
  .koop-pagina .pakket-binnen { padding-top: 1.25rem; padding-bottom: 1rem; }
  .koop-pagina .pakket-onderdelen { margin-bottom: 0; }
  .koop-pagina { padding-bottom: 5.5rem; }
}
#afrekenen { scroll-margin-top: 1rem; }
.koop-plak { align-items: center; }
.koop-plak .koop-plak-tekst { flex: 1; margin: 0; display: flex; flex-direction: column; line-height: 1.2; color: var(--zee); font-weight: 600; }
.koop-plak .koop-plak-tekst strong { font-size: 1.25rem; font-weight: 800; }
.koop-plak .knop-signaal, .koop-plak .knop-groen { flex: none; }
.koop-plak.is-gekozen .knop-signaal, .koop-plak.is-gekozen .knop-groen { animation: koop-tik .5s ease-out; }
@keyframes koop-tik { 0% { transform: scale(1); } 40% { transform: scale(1.06); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .koop-plak.is-gekozen .knop-signaal { animation: none; } }

/* Groene knop voor "Bekijk de trainingen" */
.knop-groen { background: #1d7a46; color: #ffffff; border-color: #1d7a46; }
.knop-groen:hover { background: #16653a; border-color: #16653a; color: #ffffff; }
.op-donker .knop-groen { border-color: #1d7a46; color: #ffffff; }
.plak-cta .knop-groen { flex: 1; }

/* Training al gekozen: alleen die kaart, andere trainingen via een link */
.pakket-kaart.is-weg { display: none; }
@media (min-width: 52rem) { .koop-gekozen .pakketten { grid-template-columns: minmax(0, 24rem); } }
.koop-andere { margin: .9rem 0 0; }

/* Kooppagina: samenvatting in het afrekenblok */
.koop-keuze { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .75rem; }
.koop-keuze-naam { flex: 1 1 auto; color: var(--zee); }
.koop-keuze-prijs { font-size: 1.5rem; font-weight: 800; color: var(--zee); }
.koop-keuze-looptijd { flex-basis: 100%; font-size: .95rem; }
.koop-keuze .koop-wijzig { margin-left: 0; font-size: .95rem; }
.koop-ingelogd { background: var(--vlak); border-radius: 6px; padding: .6rem .8rem; margin: 0 0 1rem; }
.koop-twijfel { margin-top: .75rem; }

/* Kooppagina op een groot scherm: trainingen links, afrekenen rechts, alles boven de vouw */
@media (min-width: 56rem) {
  .koop-pagina h1 { font-size: 2.4rem; margin-bottom: .35rem; }
  .koop-pagina .lead { font-size: 1.1rem; margin-bottom: .75rem; }
  .koop-pagina .actueel { margin: 0 0 1.5rem; font-size: .95rem; }
  .koop-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); gap: 2rem; align-items: start; }
  .koop-layout .pakket-keuze { margin: 0; }
  .koop-layout .pakketten { grid-template-columns: 1fr; gap: .9rem; margin-top: .9rem; }
  .koop-gekozen .pakketten { grid-template-columns: 1fr; }
  .koop-pagina .pakket-binnen { padding: 1rem 3.5rem 1rem 1.25rem; }
  .koop-pagina .pakket-badge { top: -.7rem; font-size: .85rem; }
  .koop-pagina .pakket-kop { display: grid; grid-template-columns: 1fr auto; column-gap: 1rem; align-items: center; margin: 0 0 .55rem; }
  .koop-pagina .pakket-naam { font-size: 1.2rem; }
  .koop-pagina .pakket-prijs { grid-column: 2; grid-row: 1 / span 2; font-size: 1.75rem; margin: 0; }
  .koop-pagina .pakket-looptijd { font-size: .95rem; }
  .koop-pagina .pakket-radio { top: 1.15rem; }
  .koop-pagina .pakket-onderdelen { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem 1.25rem; margin: 0; font-size: .92rem; line-height: 1.35; }
  .koop-pagina .pakket-onderdelen li + li { margin-top: 0; }
  .koop-pagina .pakket-onderdelen .is-niet { display: none; }
  #afrekenen.koop-raster { display: block; position: sticky; top: 1rem; background: var(--wit); border: 2px solid var(--zee); border-radius: 6px; padding: 1.25rem 1.4rem 1.1rem; box-shadow: 0 10px 28px rgba(11, 42, 74, .1); }
  #afrekenen .koop-stap { font-size: 1.15rem; }
  #afrekenen .koop-keuze { margin: .6rem 0 1rem; }
  #afrekenen .koop-knop { width: 100%; }
  #afrekenen .koop-zekerheden { gap: .3rem 1rem; font-size: .9rem; }
  #afrekenen .koop-akkoord, #afrekenen .koop-twijfel { font-size: .88rem; }
  #afrekenen .veld .hulp { font-size: .9rem; }
}
@media (min-width: 56rem) {
  .koop-pagina .koop-links h1 { margin-top: 0; }
  .koop-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 25rem); }
  #afrekenen .vinkje label { font-size: .95rem; line-height: 1.45; }
  #afrekenen .koop-keuze-looptijd { flex-basis: auto; flex: 1 1 auto; }
}

/* Header op smalle telefoons: logo, Inloggen en Trainingen passen naast elkaar */
@media (max-width: 26rem) {
  .merk { font-size: .95rem; gap: .4rem; }
  .nav ul { gap: .6rem; }
  .nav a, .nav-knop { font-size: .95rem; }
  .nav a.nav-cta { padding: .35rem .55rem; }
}
@media (max-width: 23.5rem) { .merk span { display: none; } }
/* Sites met een casustrainer hebben een extra menulink (Casussen): de woordnaam gaat op telefoons weg zodat Inloggen er nog bij past */
@media (max-width: 26rem) { .kop-veel .merk span { display: none; } }
/* Ingelogd op een telefoon: Flashcards uit het menu (staan in Mijn oefenomgeving), zodat Oefenen, Casussen en Uitloggen passen */
@media (max-width: 30rem) { .kop-veel .nav .nav-smal-weg { display: none; } }
/* Anoniem op een telefoon: Trainingen blijft in de kop staan, Flashcards staat dan in de voet en op de homepage. */
@media (max-width: 30rem) { .nav .nav-mobiel-weg { display: none; } }
/* Met taalkeuze in de kop: het woordmerk eerder weg, anders loopt de kop over (bijvoorbeeld op 414 px). */
@media (max-width: 27rem) { .kop-binnen:has(.taalkeuze) .merk span { display: none; } }
/* Ingelogd met taalkeuze (Oefenen, Flashcards, Uitloggen en vlag) liep de kop op 375 px 3 px over. */
@media (max-width: 24.5rem) { .kop .kop-binnen:has(.taalkeuze) .nav ul { gap: .25rem .4rem; } }
@media (max-width: 21rem) { .kop .kop-binnen .nav ul { gap: .25rem .4rem; } .kop .nav a.nav-rand { padding-left: .6rem; padding-right: .6rem; } }

/* Kennisbank: pijlers, Lees ook, FAQ en concept */
.kennis-pijlers { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.25rem 0 .5rem; }
.kennis-pijlers a { background: var(--vlak); color: var(--zee); border-radius: 999px; padding: .35rem .9rem; font-weight: 600; text-decoration: none; font-size: .95rem; }
.kennis-pijlers a:hover { background: var(--zee); color: var(--wit); }
.kennis-pijler { margin-top: 2.25rem; scroll-margin-top: 1rem; }
.kennis-pijler h2 { margin-bottom: .25rem; }
.kennis-pijler-intro { color: var(--grijs); margin: 0 0 .75rem; }
.lees-ook { margin: 2.5rem 0 0; border-top: 2px solid var(--lijn); padding-top: 1.5rem; }
.lees-ook h2 { font-size: 1.3rem; margin: 0 0 .75rem; }
.lees-ook ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
@media (min-width: 40rem) { .lees-ook ul { grid-template-columns: 1fr 1fr; } }
.lees-ook li { margin: 0; background: var(--vlak); border-radius: 6px; padding: .8rem 1rem; display: flex; flex-direction: column; gap: .2rem; }
.lees-ook li a { font-weight: 700; color: var(--zee); }
.lees-ook li span { font-size: .88rem; color: var(--grijs); }
.kennis-faq { margin-top: 2rem; }
.kennis-faq details { border: 1px solid var(--lijn); border-radius: 6px; padding: .25rem 1rem; margin: 0 0 .6rem; background: var(--wit); }
.kennis-faq summary { font-weight: 700; color: var(--zee); cursor: pointer; padding: .5rem 0; }
.kennis-faq details p { margin: .1rem 0 0; }
.kennis-faq details p:last-child { margin-bottom: .5rem; }
.concept-melding { background: #fff3dc; border: 1px solid #f5a00f; border-radius: 6px; padding: .75rem 1rem; margin: 1rem 0; }
.oefenvraag-blok { border: 2px solid var(--zee); border-radius: 6px; padding: 1rem 1.25rem; margin: 1rem 0 1.25rem; background: var(--wit); }
.oefenvraag-blok ol { margin: .5rem 0 .75rem; }
.oefenvraag-blok summary { font-weight: 700; color: var(--zee); cursor: pointer; }
.oefenvraag-blok details p { margin: .6rem 0 0; }
.bronnen { font-size: .9rem; color: var(--grijs); margin-top: 2rem; }
.cijfers-tabel { width: 100%; border-collapse: collapse; margin: 1rem 0 1.5rem; }
.cijfers-tabel th, .cijfers-tabel td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--lijn); }
.cijfers-tabel td:nth-child(n+2) { font-variant-numeric: tabular-nums; }
.cijfers-scroll { overflow-x: auto; margin: 1rem 0 1.5rem; }
.cijfers-scroll:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.cijfers-scroll .cijfers-tabel { margin: 0; }
.cijfers-nepdeur .cijfers-tabel { font-size: .95rem; }
.cijfers-nepdeur .cijfers-tabel th small { display: block; margin-top: .15rem; font-weight: 400; font-size: .85rem; color: var(--grijs); }
.cijfers-nepdeur h3 { margin: 1.5rem 0 0; font-size: 1.15rem; }

/* NATO-alfabet tool */
/* NATO-alfabet tool (/nato-alfabet) */

.nato-tool, .nato-oefen {
  background: var(--vlak); border: 1px solid var(--lijn); border-radius: 6px;
  padding: 1.25rem 1rem; margin: 1.5rem 0 2rem;
}
@media (min-width: 40rem) { .nato-tool, .nato-oefen { padding: 1.5rem 1.5rem; } }
.nato-tool[hidden], .nato-oefen[hidden] { display: none; }
.nato-veld { margin-bottom: 1rem; }
.nato-veld input { text-transform: uppercase; letter-spacing: .04em; }
.nato-veld input::placeholder { text-transform: none; letter-spacing: 0; }

.nato-uitvoer {
  list-style: none; margin: 0 0 1rem; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: .5rem;
}
.nato-uitvoer[hidden] { display: none; }
.nato-uitvoer li + li { margin-top: 0; }
.nato-item {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: .55rem; align-items: center;
  background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--radius);
  padding: .45rem .6rem; min-width: 0;
}
.nato-letter {
  grid-row: 1 / 3; display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: 6px; background: var(--zee); color: var(--wit);
  font-weight: 800; font-size: 1.05rem; line-height: 1;
}
.nato-woord { font-weight: 800; color: var(--zee); line-height: 1.2; overflow-wrap: break-word; min-width: 0; }
.nato-uitspraak { font-size: .85rem; color: var(--grijs); line-height: 1.25; overflow-wrap: break-word; min-width: 0; }
.nato-item.is-teken .nato-letter { background: var(--grijs); }
.nato-scheiding {
  display: flex; align-items: center; justify-content: center; min-height: 3.1rem;
  border: 2px dashed var(--lijn); border-radius: var(--radius);
  color: var(--grijs); font-size: .9rem; font-style: italic;
}
.nato-leeg { color: var(--grijs); font-size: 1rem; margin: 0 0 1rem; }
.nato-leeg[hidden] { display: none; }
.nato-acties { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.nato-status { font-size: .95rem; color: var(--goed); font-weight: 600; overflow-wrap: anywhere; }

.nato-oefen h2 { font-size: 1.35rem; margin: 0 0 .75rem; }
.nato-modi { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; }
.nato-modus {
  font: inherit; font-size: 1rem; font-weight: 700; min-height: 2.75rem; padding: .45rem 1rem;
  border: 2px solid var(--zee); border-radius: 999px; background: var(--wit); color: var(--zee); cursor: pointer;
}
.nato-modus:hover { background: var(--wit); text-decoration: underline; text-underline-offset: .2em; }
.nato-modus[aria-pressed="true"] { background: var(--zee); color: var(--wit); }
.nato-opdracht { margin: 0 0 .5rem; font-size: 1rem; color: var(--grijs); }
.nato-vraag {
  background: var(--wit); border: 2px solid var(--zee); border-radius: var(--radius);
  padding: .75rem 1rem; margin: 0 0 1rem; color: var(--zee); font-weight: 800; overflow-wrap: anywhere;
}
.nato-vraag.is-woord { font-size: 1.6rem; letter-spacing: .08em; }
.nato-vraag.is-spelling { font-size: 1.15rem; line-height: 1.45; }
.nato-antwoord .veld { margin-bottom: .5rem; }
.nato-knoppen { margin: 0 0 .75rem; }
.nato-feedback { margin: 0 0 .5rem; font-size: 1rem; }
.nato-feedback:empty { display: none; }
.nato-feedback.is-goed, .nato-feedback.is-fout { border-radius: 6px; padding: .55rem .8rem; }
.nato-feedback.is-goed { background: var(--goed-vlak); border-color: var(--goed); }
.nato-feedback.is-fout { background: var(--fout-vlak); border-color: var(--fout); }
.nato-antwoord input[aria-invalid="true"] { border-color: var(--fout); }
.nato-score { margin: 0; font-weight: 800; color: var(--zee); }

.tekst table.nato-tabel { display: table; overflow-x: visible; }
.nato-tabel td:first-child, .nato-tabel th:first-child { width: 4.5rem; }
.nato-tabel td:nth-child(2) { font-weight: 700; color: var(--zee); }
.nato-knoppen .knop[hidden] { display: none; }

/* Kassakoopje Marifoonkaart */
.koop-extra { border: 2px dashed var(--signaal); background: #fffaf0; border-radius: 6px; padding: .75rem .9rem; margin: 0 0 1rem; }
.koop-extra .vinkje { margin: 0; }
.koop-extra-uitleg { display: block; font-size: .92rem; color: var(--grijs); margin-top: .2rem; }
.koop-extra-plus { margin: 0; font-weight: 600; color: var(--zee); }
.koop-extra-vink[hidden] { display: none; }

/* Kooppagina, rustige opzet (oktober 2026) */
.kp { --kp-lijn: #dfe6ee; --kp-zacht: #5d6f82; --kp-vlak: #f6f9fc; padding-top: 2rem; padding-bottom: 3rem; }
.kp-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
.kp-titel { font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.4rem); line-height: 1.12; letter-spacing: -.015em; margin: 0 0 .4rem; color: var(--zee); }
.kp-sub { color: var(--kp-zacht); margin: 0 0 1.5rem; font-size: 1.02rem; }
.kp-keuze { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: .75rem; }
.kp-kaart { position: relative; display: grid; grid-template-columns: auto 1fr auto; column-gap: .9rem; align-items: center; padding: 1rem 1.15rem; border: 1.5px solid var(--kp-lijn); border-radius: 6px; background: var(--wit); cursor: pointer; transition: border-color .2s, background-color .2s, box-shadow .2s; }
.kp-kaart:hover { border-color: #b8c6d4; }
.kp-kaart.is-actief { border-color: var(--zee); background: var(--kp-vlak); box-shadow: 0 1px 2px rgba(11,42,74,.05), 0 6px 20px rgba(11,42,74,.07); }
.kp-kaart.is-weg { display: none; }
/* Middelste optie (twee examens): de keuze van het tweede examen hangt onder de kaart, alleen als die gekozen is. */
.kp-twee-keuze { margin: calc(-.75rem - 1.5px) 0 0; padding: .2rem 1.15rem 1rem; border: 1.5px solid var(--zee); border-top: 0; border-radius: 0 0 6px 6px; background: var(--kp-vlak); }
.kp-twee-keuze label { display: block; font-weight: 600; font-size: .95rem; margin-bottom: .3rem; }
.kp-twee-keuze select { width: 100%; min-height: 3rem; border-radius: 6px; border: 1.5px solid var(--kp-lijn); padding: 0 .8rem; font: inherit; background: var(--wit); }
.kp-kaart:not(.is-actief) + .kp-twee-keuze, .kp-twee-keuze.is-weg { display: none; }
.kp-kaart.is-actief:has(+ .kp-twee-keuze) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.kp-radio { appearance: none; -webkit-appearance: none; width: 1.3rem; height: 1.3rem; margin: 0; border: 2px solid #9fb0c1; border-radius: 50%; background: var(--wit); display: grid; place-content: center; transition: border-color .2s; cursor: pointer; }
.kp-radio::after { content: ""; width: .62rem; height: .62rem; border-radius: 50%; background: var(--zee); transform: scale(0); transition: transform .18s ease-out; }
.kp-radio:checked { border-color: var(--zee); }
.kp-radio:checked::after { transform: scale(1); }
.kp-radio:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.kp-kop { display: flex; flex-direction: column; min-width: 0; }
.kp-naam { font-weight: 800; font-size: 1.12rem; color: var(--zee); line-height: 1.25; display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; }
.kp-tag { font-size: .72rem; font-weight: 700; letter-spacing: .02em; color: #7a4f00; background: #fdefd2; padding: .12rem .5rem; border-radius: 99px; }
.kp-duur { color: var(--kp-zacht); font-size: .93rem; }
.kp-prijs { font-weight: 800; font-size: 1.3rem; color: var(--zee); white-space: nowrap; font-variant-numeric: tabular-nums; }
.kp-meer { grid-column: 2 / -1; display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s ease; }
.kp-kaart.is-actief .kp-meer { grid-template-rows: 1fr; }
.kp-lijst { overflow: hidden; display: grid; gap: .3rem 1.25rem; font-size: .93rem; color: var(--inkt); }
.kp-kaart.is-actief .kp-lijst { padding-top: .75rem; }
.kp-punt { position: relative; padding-left: 1.4rem; line-height: 1.4; }
.kp-punt::before { content: ""; position: absolute; left: .15rem; top: .32em; width: .7rem; height: .38rem; border-left: 2px solid var(--goed); border-bottom: 2px solid var(--goed); transform: rotate(-45deg); }
@media (min-width: 36rem) { .kp-lijst { grid-template-columns: 1fr 1fr; } }
.kp-andere { margin: .25rem 0 0; font-size: .95rem; }
.kp-twijfel { margin: 1.25rem 0 0; color: var(--kp-zacht); font-size: .95rem; }

.kp-kassa { background: var(--wit); border: 1px solid var(--kp-lijn); border-radius: 6px; padding: 1.4rem 1.4rem 1.2rem; box-shadow: 0 1px 2px rgba(11,42,74,.04), 0 12px 32px rgba(11,42,74,.08); }
.kp-kassa-kop { font-size: 1.15rem; margin: 0 0 .9rem; color: var(--zee); }
.kp-regels { margin: 0 0 1.1rem; }
.kp-regel { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .3rem 0; }
.kp-regel[hidden] { display: none; }
.kp-regel dt { color: var(--inkt); font-weight: 600; }
.kp-regel dd { margin: 0; font-variant-numeric: tabular-nums; color: var(--inkt); font-weight: 600; white-space: nowrap; }
.kp-regel-sub { color: var(--kp-zacht); font-weight: 400; font-size: .9rem; margin-left: .2rem; }
.kp-totaal { border-top: 1px solid var(--kp-lijn); margin-top: .35rem; padding-top: .65rem; }
.kp-totaal dt, .kp-totaal dd { font-weight: 800; color: var(--zee); }
.kp-totaal dd { font-size: 1.35rem; }
.kp-ingelogd { font-size: .88rem; color: var(--kp-zacht); margin: -.4rem 0 1rem; }
.kp-veld { margin-bottom: 1rem; }
.kp-veld label { font-size: .95rem; margin-bottom: .3rem; }
.kp-veld input { border-radius: 6px; border-width: 1.5px; min-height: 3rem; }
.kp-veld .hulp { font-size: .86rem; }

.kp-extra { margin: 0 0 1rem; }
.kp-extra-vak { display: grid; grid-template-columns: auto 1fr auto; gap: .75rem; align-items: center; padding: .75rem .85rem; border: 1.5px solid var(--kp-lijn); border-radius: 6px; cursor: pointer; transition: border-color .2s, background-color .2s; font-weight: 400; margin: 0; }
.kp-extra-vak:hover { border-color: #b8c6d4; }
.kp-extra.is-aan .kp-extra-vak { border-color: var(--signaal); background: #fffaf0; }
.kp-extra-vak[hidden] { display: none; }
.kp-extra-tekst { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.kp-extra-kop { display: flex; align-items: center; gap: .5rem; font-weight: 700; color: var(--zee); font-size: .98rem; }
.kp-extra-vak > input { width: 1.2rem; height: 1.2rem; margin: 0; align-self: start; margin-top: .15rem; accent-color: var(--zee); }
.kp-extra-prijs { font-weight: 600; white-space: nowrap; color: var(--kp-zacht); }
.kp-extra-uitleg { font-size: .84rem; color: var(--kp-zacht); line-height: 1.4; }
.kp-extra-plus { display: flex; align-items: center; gap: .9rem; margin: 0; font-size: .92rem; font-weight: 600; color: var(--zee); padding: .6rem .85rem; background: var(--kp-vlak); border-radius: 6px; }
.kp-extra-plus[hidden] { display: none; }

/* Twee A4'tjes schuin op elkaar, met diepte */
.kp-stapel { position: relative; flex: none; width: 3.6rem; height: 5.1rem; perspective: 420px; margin: .2rem .9rem .2rem .2rem; }
.kp-stapel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 2px; background: #fff; box-shadow: 0 1px 1px rgba(11,42,74,.12), 0 6px 14px rgba(11,42,74,.18); transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.kp-stapel img:first-child { transform: rotateY(-18deg) rotateZ(7deg) translate(.55rem, -.15rem); filter: brightness(.96); }
.kp-stapel img:last-child { transform: rotateY(-18deg) rotateX(4deg) rotateZ(-3deg); }
.kp-extra-vak:hover .kp-stapel img:first-child, .kp-extra.is-aan .kp-stapel img:first-child { transform: rotateY(-12deg) rotateZ(11deg) translate(.8rem, -.25rem); }
.kp-extra-vak:hover .kp-stapel img:last-child, .kp-extra.is-aan .kp-stapel img:last-child { transform: rotateY(-10deg) rotateX(2deg) rotateZ(-5deg) translateY(-.1rem); }
.kp-stapel-klein { width: 2.4rem; height: 3.3rem; margin: 0; }

.kp-akkoord-vak { display: flex; gap: .6rem; align-items: flex-start; margin: 0 0 1rem; }
.kp-akkoord-vak input { width: 1.15rem; height: 1.15rem; margin: .18rem 0 0; flex: none; accent-color: var(--zee); }
.kp-akkoord-vak label { font-weight: 400; font-size: .86rem; line-height: 1.45; color: var(--kp-zacht); margin: 0; }
.kp .veld-fout { font-size: .86rem; }
#herroeping-fout { display: block; margin: -.6rem 0 .8rem; }
#herroeping-fout[hidden] { display: none; }
.kp-knop { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 3.4rem; font-size: 1.12rem; border-radius: 6px; transition: background-color .15s, transform .1s; }
.kp-knop:active { transform: translateY(1px); }
.kp-knop.is-bezig { opacity: .75; pointer-events: none; }
.kp-betaal { margin: .8rem 0 .2rem; text-align: center; font-size: .86rem; color: var(--kp-zacht); }
.kp-factuur { margin: .35rem 0 .2rem; text-align: center; font-size: .9rem; font-weight: 700; color: var(--inkt); }
/* Kortingscode zelf invullen bij Afrekenen, direct onder het totaal (besluit Gijs 6 nov 2026: nooit vanzelf toepassen) */
.kp-codeveld { margin: -.4rem 0 1.1rem; }
.kp-codeveld label { display: block; font-size: .95rem; font-weight: 700; margin: 0 0 .35rem; }
.kp-codeveld-rij { display: flex; gap: .5rem; }
.kp-codeveld-rij input { flex: 1 1 auto; min-width: 0; min-height: 2.75rem; border-radius: 6px; text-transform: uppercase; letter-spacing: .06em; }
.kp-codeveld-rij input::placeholder { text-transform: none; letter-spacing: 0; }
.kp-codeveld-rij .knop { flex: none; margin: 0; min-height: 2.75rem; }
.kp-codeveld .veld-fout { display: block; margin: .4rem 0 0; }
.kp-codeveld .veld-fout[hidden] { display: none; }
.kp-regel.kp-korting dt, .kp-regel.kp-korting dd { color: var(--goed); font-weight: 700; }
.kp-korting .kp-regel-sub { color: var(--kp-zacht); }
.kp-korting a { color: var(--kp-zacht); }
.kp-code-ok { margin: -.4rem 0 1rem; font-size: .92rem; font-weight: 700; color: var(--goed); }
/* ?kopieer=CODE (tik op de code in de mail): alleen een kopieerbalk bovenaan, de code is niet toegepast */
.kp-kopieer { display: grid; gap: .5rem; margin: 0 0 1.25rem; padding: .9rem 1rem; border: 1px dashed var(--kp-lijn); border-radius: 6px; background: var(--kp-vlak, var(--vlak)); }
.kp-kopieer p { margin: 0; }
.kp-kopieer-label { font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--inkt); }
.kp-kopieer-rij { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.kp-kopieer-code { font: 700 1.5rem/1 "Courier New", Courier, monospace; letter-spacing: .2em; color: var(--inkt); background: var(--wit); border: 2px dashed var(--zee); border-radius: 6px; padding: .55rem .9rem; cursor: copy; min-height: 44px; }
.kp-kopieer-rij .knop { margin: 0; min-height: 44px; }
.kp-kopieer-hint { font-size: .9rem; color: var(--kp-zacht); }
.kp-kopieer-ok { font-weight: 700; color: var(--goed); }
.kp-voorwaarden { margin: 0; text-align: center; font-size: .8rem; color: var(--kp-zacht); }
.kp-voorwaarden a { color: inherit; }
.kp .melding-fout { margin: 0 0 1rem; }
@media (prefers-reduced-motion: reduce) { .kp-meer, .kp-stapel img, .kp-radio::after { transition: none; } }

@media (min-width: 60rem) {
  .kp { padding-top: 2.75rem; }
  .kp-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); gap: 3rem; align-items: start; }
  .kp-kassa { position: sticky; top: 1.25rem; }
}
@media (max-width: 47.99rem) { .kp { padding-bottom: 6rem; } .kp-kaart { padding: .9rem 1rem; } .kp-kassa { padding: 1.2rem 1.1rem 1rem; } }
.kp-regel-onder { display: block; margin: 0; }
.kp-extra-kop { justify-content: space-between; }

/* Logo */
.merk-icoon { border-radius: 26%; box-shadow: 0 1px 2px rgba(0,0,0,.18), 0 3px 10px rgba(0,0,0,.18); }
.merk-woord { letter-spacing: -.015em; font-weight: 500; }
.merk-woord b { font-weight: 800; color: var(--zee); }

.kp-prijs-oud { font-weight: 500; font-size: .85em; color: #7b8a99; text-decoration: line-through; margin-right: .15rem; }
.kp-mb-noot { margin: .9rem 0 0; color: #5d6f82; font-size: .9rem; }
.home-marcomb { margin: 1.25rem 0 0; text-align: center; color: var(--grijs); }
.mb-koop { display: flex; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; flex-wrap: wrap; padding: 1.1rem 1.25rem; margin: 1.5rem 0 2rem; border: 1.5px solid #dfe6ee; border-radius: 6px; background: #f6f9fc; }
.mb-koop p { margin: 0; }
.mb-koop-naam { font-weight: 800; color: var(--zee); }
.mb-koop-prijs { font-size: 1.6rem; font-weight: 800; color: var(--zee); line-height: 1.2; }
.mb-koop-sub { font-size: .9rem; color: #5d6f82; }

/* ===================================================================
 * Vaarbewijs: huisstijl (hoed met anker, Coolblue-blauw en oranje)
 * =================================================================== */

h1, h2, h3, h4 { letter-spacing: -0.02em; }
.knop { border-radius: 999px; font-weight: 800; }
.knop-klein { border-radius: 999px; }
.knop-blauw { background: var(--blauw); color: #fff; }
.knop-blauw:hover { background: var(--zee-licht); color: #fff; }
.knop-wit { background: #fff; color: var(--zee); border-color: var(--lijn); }
.knop-wit:hover { border-color: var(--blauw); color: var(--zee); }
a { color: var(--zee-licht); }

/* Header: wit, op de homepage over de heroscène */
.kop { background: #fff; color: var(--zee); border-bottom: 1px solid var(--lijn); }
.kop .merk, .kop .merk:hover { color: var(--zee); }
.merk { gap: .65rem; font-size: 1.3rem; letter-spacing: -.02em; }
.merk-tegel { display: inline-flex; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--blauw); align-items: center; justify-content: center; flex: none; }
.merk-tegel svg { width: 2rem; height: 2rem; }
.merk-woord b { font-weight: 800; color: var(--zee); }
.merk-woord span { color: var(--blauw); font-weight: 800; }
.kop .nav a, .kop .nav-knop { color: var(--zee); font-weight: 700; }
.kop .nav a:hover, .kop .nav-knop:hover { color: var(--blauw); }
.kop .nav a.nav-cta { background: var(--signaal); color: var(--signaal-tekst, #fff); border-radius: 999px; padding: .55rem 1.1rem; }
.kop .nav a.nav-cta:hover { background: var(--signaal-hover); color: var(--signaal-tekst, #fff); text-decoration: none; }
.kop.kop-over { position: absolute; left: 0; right: 0; top: 0; background: transparent; border: 0; }
.kop.kop-over .merk { background: #fff; padding: .3rem 1rem .3rem .3rem; border-radius: 999px; box-shadow: 0 6px 20px rgba(11,31,58,.12); }
.kop.kop-over .nav a:not(.nav-cta), .kop.kop-over .nav-knop { background: rgba(255,255,255,.85); padding: .45rem .9rem; border-radius: 999px; }
@media (max-width: 40rem) {
  .merk-woord { font-size: 1.05rem; }
  .kop.kop-over .nav .nav-klein-weg { display: none; }
}

/* Aankondigingsbalk */
.balk { background: var(--zee); }

/* Hero met Hollandse rivierscène */
.vb-hero { position: relative; overflow: hidden; background: #9fdcfb; }
.vb-hero-scene { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.vb-hero-binnen { position: relative; max-width: var(--paginabreedte); margin: 0 auto; padding: 7.5rem var(--rand) 11rem; }
.vb-hero-kaart { max-width: 36rem; background: #fff; border-radius: 6px; padding: 2.25rem; box-shadow: 0 24px 60px rgba(11,31,58,.25); }
.vb-hero-kaart .label { font-size: .95rem; font-weight: 800; color: var(--zee-licht); letter-spacing: .04em; text-transform: uppercase; margin: 0 0 .8rem; }
.vb-hero-kaart h1 { font-size: clamp(2.2rem, 1.4rem + 3vw, 3.3rem); line-height: 1.05; margin: 0 0 1rem; }
.vb-hero-kaart p { color: var(--grijs); font-size: 1.15rem; }
.vb-hero-kaart .knoppen { margin-top: 1.25rem; align-items: center; }
@media (max-width: 40rem) {
  .vb-hero-binnen { padding: 6rem 1rem 9rem; }
  .vb-hero-kaart { padding: 1.5rem; border-radius: 6px; }
}

/* Cijferbalk over de rand van de hero */
.vb-feiten { max-width: var(--paginabreedte); margin: -6.5rem auto 0; padding: 0 var(--rand); position: relative; }
.vb-feiten ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); background: #fff; border-radius: 6px; box-shadow: 0 18px 50px rgba(11,31,58,.14); overflow: hidden; }
.vb-feiten li { padding: 1.5rem; border-right: 1px solid #e3edf5; margin: 0; }
.vb-feiten li:last-child { border-right: 0; }
.vb-feiten b { display: block; font-size: 1.75rem; color: var(--blauw); line-height: 1.1; }
.vb-feiten span { color: var(--grijs); font-size: 1rem; }

/* Secties */
.vb-sectie { max-width: var(--paginabreedte); margin: 0 auto; padding: 4.5rem var(--rand); }
.vb-sectie > h2, .vb-band h2 { font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.5rem); }
.vb-intro { color: var(--grijs); max-width: 42rem; font-size: 1.15rem; }
.vb-band { background: var(--zee); color: #fff; position: relative; overflow: hidden; }
.vb-band h2, .vb-band h3 { color: #fff; }
.vb-band .vb-intro { color: #c9d8e6; }
.vb-band-motief { position: absolute; right: -4rem; top: -3rem; width: 32rem; opacity: .08; pointer-events: none; }
.vb-band-binnen { position: relative; max-width: var(--paginabreedte); margin: 0 auto; padding: 4.5rem var(--rand); }
.vb-licht { background: var(--vlak); }

/* Trainingskaarten (stijl sloep met slagingshoed) */
.vb-trainingen { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); margin-top: 2rem; align-items: stretch; }
.vb-training { position: relative; display: flex; flex-direction: column; gap: .75rem; padding: 1.6rem; border-radius: 6px; background: #fff; color: var(--zee); border: 2px solid var(--lijn); }
.vb-training.is-aanbevolen { border: 3px solid var(--blauw); background: #f3faff; }
.vb-training .badge { position: absolute; top: -.95rem; left: 1.3rem; background: var(--blauw); color: #fff; font-weight: 800; font-size: .9rem; padding: .3rem .8rem; border-radius: 999px; }
.vb-training h3 { color: var(--zee); font-size: 1.4rem; margin: 0; }
.vb-training p { color: var(--grijs); margin: 0; font-size: 1rem; }
.vb-training .vb-prijs { font-size: 2.3rem; font-weight: 800; color: var(--zee); margin-top: auto; line-height: 1; }
.vb-training .vb-prijs small { display: block; font-size: .95rem; font-weight: 600; color: var(--grijs); margin-top: .35rem; }
.vb-training ul { list-style: none; padding: 0; margin: .25rem 0; font-size: .98rem; }
.vb-training li { position: relative; padding-left: 1.6rem; margin: .35rem 0; }
.vb-training li::before { content: ""; position: absolute; left: .15rem; top: .45em; width: .85rem; height: .45rem; border-left: 3px solid var(--goed); border-bottom: 3px solid var(--goed); transform: rotate(-45deg); }
.vb-training .knop { border-radius: 6px; width: 100%; }
.vb-marifoon { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; margin-top: 1.5rem; padding: 1.1rem 1.4rem; border-radius: 6px; background: rgba(255,255,255,.08); color: #fff; text-decoration: none; }
.vb-marifoon:hover { background: rgba(255,255,255,.14); color: #fff; }
.vb-marifoon span { color: #c9d8e6; flex: 1 1 18rem; }
.vb-marifoon strong:last-child { color: #7fd0ff; }
.vb-licht .vb-marifoon, .vb-sectie .vb-marifoon { background: var(--blauw-licht); color: var(--zee); }
.vb-licht .vb-marifoon span, .vb-sectie .vb-marifoon span { color: var(--grijs); }
.vb-licht .vb-marifoon strong:last-child, .vb-sectie .vb-marifoon strong:last-child { color: var(--zee-licht); }

/* Stappen en kaarten */
.vb-kaarten { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); margin-top: 2rem; }
.vb-kaart { background: #fff; border-radius: 6px; padding: 1.6rem; border: 1px solid #e3edf5; }
.vb-kaart h3 { font-size: 1.25rem; margin: .5rem 0 .4rem; }
.vb-kaart p { color: var(--grijs); margin: 0; font-size: 1rem; }
.vb-kaart .nr { font-size: 2.6rem; font-weight: 800; color: var(--signaal); line-height: 1; }
.vb-kaart .icoon-rond { width: 3rem; height: 3rem; border-radius: 50%; background: var(--blauw-licht); display: flex; align-items: center; justify-content: center; }
.vb-kaart .icoon-rond svg { width: 1.6rem; height: 1.6rem; }

/* Foto-vlakken (rechtenvrije stockfoto's; tot ze er zijn een nette illustratie) */
.vb-foto { border-radius: 6px; overflow: hidden; background: var(--blauw-licht); aspect-ratio: 4 / 3; }
.vb-foto img, .vb-foto svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.vb-split { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 56rem) { .vb-split { grid-template-columns: 1fr 1fr; gap: 4rem; } }

/* Vragen: afbeeldingen en open rekenvragen */
.vraag-figuur { margin: 0 0 1.25rem; }
.vraag-figuur img { display: block; width: 100%; max-width: 30rem; height: auto; border-radius: 6px; border: 1px solid var(--lijn); background: #fff; }
.vraag-figuur.is-kaart img { max-width: 56rem; }
.vraag-figuur.is-teken img { max-width: 9rem; }
.vraag-figuur > button { all: unset; cursor: zoom-in; display: block; }
/* 3D-model bij een vraag (quiz.js figuur3d, modelbestand per site met 'vraag3d'). Het beeld blijft eronder liggen tot het model staat. */
.vraag-figuur.heeft-3d { position: relative; max-width: 30rem; }
.vraag-figuur.is-3d > button { visibility: hidden; }
.vraag-figuur.heeft-3d > .vraag-3d { position: absolute; inset: 0; border-radius: 6px; overflow: hidden; border: 1px solid var(--lijn); }
.vraag-figuur.heeft-3d:not(.is-3d) > .vraag-3d { visibility: hidden; }
.v3d-doek { position: relative; width: 100%; height: 100%; }
.v3d-doek canvas { display: block; width: 100%; height: 100%; cursor: grab; }
.v3d-labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.v3d-labels.is-verborgen .v3d-label:not(.is-vast) { display: none; }
.v3d-label { position: absolute; left: 0; top: 0; font-size: .75rem; font-weight: 700; line-height: 1.2; background: rgba(255, 255, 255, .94); color: var(--inkt, #0b2233); padding: 3px 7px; border-radius: 4px; white-space: nowrap; box-shadow: 0 1px 4px rgba(0, 0, 0, .18); }
.v3d-label.is-focus { background: var(--signaal, #c9362a); color: #fff; }
.is-onthuld .v3d-label:not(.is-focus):not(.is-vast) { opacity: .55; }
.vraag-3d-tip { position: absolute; left: 8px; bottom: 6px; margin: 0; font-size: .75rem; color: var(--grijs, #4d6178); background: rgba(255, 255, 255, .88); padding: 2px 6px; border-radius: 4px; pointer-events: none; }
.vraag-punten { display: inline-block; font-size: .9rem; font-weight: 800; color: var(--zee); background: var(--blauw-licht); padding: .15rem .6rem; border-radius: 999px; margin-left: .5rem; }
.getal-velden { display: grid; gap: 1rem; margin: 0 0 1.25rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); max-width: 40rem; }
.getal-veld label { display: block; font-weight: 700; margin-bottom: .35rem; }
.getal-veld .invoer { display: flex; align-items: center; gap: .4rem; }
.getal-veld input { width: 100%; min-height: 3.25rem; padding: .6rem .8rem; font: inherit; font-size: 1.25rem; font-weight: 700; border: 2px solid var(--lijn); border-radius: 6px; font-variant-numeric: tabular-nums; }
.getal-veld input:focus { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--zee); }
.getal-veld .eenheid { font-weight: 700; color: var(--grijs); min-width: 1.5rem; }
.getal-veld.is-goed input { border-color: var(--goed); background: var(--goed-vlak); }
.getal-veld.is-fout input { border-color: var(--fout); background: var(--fout-vlak); }
.getal-veld .juist-antwoord { display: block; margin-top: .35rem; font-size: .95rem; color: var(--goed); font-weight: 700; }
.feedback .bron { font-size: .9rem; color: var(--grijs); margin-top: .5rem; }
.zoom-dialoog { border: 0; padding: 0; background: transparent; max-width: 96vw; }
.zoom-dialoog::backdrop { background: rgba(7,21,40,.85); }
.zoom-dialoog img { max-width: 96vw; max-height: 88vh; border-radius: 6px; background: #fff; }
.zoom-dialoog form { text-align: right; }

/* Examenklaar-meter */
.klaar-meter { display: flex; align-items: center; gap: 1rem; }
.meter-cirkel { width: 5rem; height: 5rem; flex: none; }
.klaar-meter b { font-size: 2rem; line-height: 1; }
.klaar-meter.is-groen .meter-boog { stroke: var(--goed); }
.klaar-meter.is-oranje .meter-boog { stroke: var(--signaal); }
.klaar-meter.is-rood .meter-boog { stroke: var(--fout); }

/* Examenkeuze op het dashboard */
.examen-tabs { display: flex; gap: .5rem; flex-wrap: wrap; margin: 0 0 1.5rem; }
.examen-tabs a { padding: .55rem 1.1rem; border-radius: 999px; border: 2px solid var(--lijn); text-decoration: none; font-weight: 700; color: var(--zee); }
.examen-tabs a[aria-current="page"] { background: var(--zee); border-color: var(--zee); color: #fff; }

/* Footer */
.voet { background: var(--zee-diep); }
.voet-merk { display: flex; align-items: center; gap: .6rem; }

/* Onderwerpen op het dashboard */
.onderwerp-lijst { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.onderwerp-lijst li { margin: 0; }
.onderwerp-lijst a { display: flex; flex-direction: column; gap: .35rem; padding: 1.1rem 1.2rem; border: 2px solid var(--lijn); border-radius: 6px; text-decoration: none; color: var(--zee); background: #fff; height: 100%; }
.onderwerp-lijst a:hover { border-color: var(--blauw); }
.ow-titel { font-weight: 800; font-size: 1.1rem; }
.ow-meta { color: var(--grijs); font-size: .95rem; }
.ow-balk { display: block; height: 8px; border-radius: 4px; background: var(--blauw-licht); margin-top: .3rem; overflow: hidden; }
.ow-balk span { display: block; height: 100%; background: var(--blauw); border-radius: 4px; }
.tabel { width: 100%; border-collapse: collapse; font-size: 1rem; }
.tabel th, .tabel td { text-align: left; padding: .6rem .5rem; border-bottom: 1px solid var(--lijn); }

/* Tekenoverzicht */
.tekens-raster { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
.tekens-raster li { margin: 0; display: flex; gap: .9rem; align-items: center; background: #fff; border: 1px solid var(--lijn); border-radius: 6px; padding: .8rem; }
.tekens-raster img { width: 4.5rem; height: 4.5rem; flex: none; }
.tekens-raster span { font-size: 1rem; line-height: 1.35; }
@media (max-width: 48rem) {
  .kop .nav .nav-klein-weg, .kop .nav .nav-breed { display: none; }
  .kop .nav ul { gap: .25rem .6rem; }
  .kop-binnen { flex-wrap: nowrap; }
  .merk-tegel { width: 2.3rem; height: 2.3rem; }
  .merk-tegel svg { width: 1.6rem; height: 1.6rem; }
  .merk-woord { font-size: 1rem; }
}
@media (max-width: 18rem) {
  .merk-woord span { display: none; }
}
@media (max-width: 48rem) {
  .kop.kop-over .merk { padding: .2rem .7rem .2rem .2rem; }
  .kop.kop-over .nav a:not(.nav-cta) { padding: .4rem .7rem; }
  .kop .nav a.nav-cta { padding: .45rem .8rem; }
  .kop .nav a, .kop .nav-knop { font-size: .95rem; }
  .kop-binnen { padding-left: .75rem; padding-right: .75rem; gap: .5rem; }
}
@media (max-width: 30rem) {
  .merk-woord { display: inline-flex; flex-direction: column; line-height: 1.02; font-size: .95rem; }
  .kop-binnen { flex-wrap: nowrap; }
  .kop .nav ul { flex-wrap: nowrap; }
}

/* Kennisbank: oefenvraag, let op, bronnen */
.oefenvraag { background: var(--vlak); border: 1px solid var(--lijn); border-radius: 6px; padding: 1.25rem 1.4rem; margin: 1.5rem 0; }
.oefenvraag-vraag { font-weight: 700; color: var(--zee); }
.oefenvraag-opties { margin: .5rem 0 1rem; }
.oefenvraag details summary { cursor: pointer; font-weight: 700; color: var(--zee-licht); }
.oefenvraag details p { margin-top: .75rem; }
.letop { background: #fff4ec; border-radius: 6px; padding: 1rem 1.25rem; margin: 1.5rem 0; }
.letop p:last-child { margin-bottom: 0; }
.bronnen { font-size: .95rem; color: var(--grijs); border-top: 1px solid var(--lijn); padding-top: 1rem; margin-top: 2rem; }

/* Foto's */
.vb-foto img { background: var(--blauw-licht); }
.vb-foto-staand { aspect-ratio: 4 / 5; max-height: 40rem; }
.vb-foto-staand img { object-position: 50% 35%; }
.vb-mozaiek-raster { display: grid; gap: .75rem; margin-top: 2rem; grid-template-columns: 1fr 1fr; }
.vb-mozaiek-raster .vb-foto { aspect-ratio: 4 / 3; border-radius: 6px; }
.vb-mozaiek-raster .vb-foto:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
@media (min-width: 56rem) {
  .vb-mozaiek-raster { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 1rem; }
  .vb-mozaiek-raster .vb-foto:first-child { grid-column: 1; grid-row: 1 / 3; aspect-ratio: auto; }
  .vb-mozaiek-raster .vb-foto { aspect-ratio: 4 / 3; }
}
.vb-fotobron { margin-top: .75rem; color: var(--grijs, #5b6b7d); }

/* Geluidsseinen: kaarten, patroonbalken en oefenmodus */
.sein-uitleg { background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--radius); padding: 1.1rem 1.4rem; margin-top: 1.5rem; max-width: var(--tekstbreedte); }
.sein-uitleg h2 { font-size: 1.15rem; margin: 0 0 .6rem; }
.sein-uitleg ul { list-style: none; padding: 0; margin: 0 0 .8rem; display: grid; gap: .5rem; }
.sein-uitleg li { display: flex; gap: .7rem; align-items: center; }
.sein-bal { display: inline-block; height: .9rem; border-radius: 999px; background: var(--blauw); flex: none; }
.sein-bal-k { width: 1.2rem; }
.sein-bal-l { width: 4.8rem; }
.sein-bal-z { width: .3rem; }
.sein-groepkop { margin-top: 2.5rem; }
.sein-raster { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.sein-kaart { margin: 0; display: flex; flex-direction: column; gap: .5rem; background: #fff; border: 1px solid var(--lijn); border-radius: 6px; padding: 1rem; min-width: 0; }
.sein-kaart h3 { font-size: 1.05rem; line-height: 1.3; margin: 0; }
.sein-meta { margin: 0; font-size: .9rem; color: var(--grijs); line-height: 1.35; }
.sein-patroon { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin: .4rem 0; min-height: 1.4rem; }
.sein-patroon[hidden] { display: none; }
.sein-balk { display: inline-block; height: 1.1rem; border-radius: 999px; background: var(--lijn); border: 2px solid var(--blauw); box-sizing: border-box; transition: background .08s, box-shadow .08s; }
.sein-balk-k { width: 1.4rem; }
.sein-balk-l { width: 5.6rem; }
.sein-balk-z { width: .4rem; }
.sein-balk.is-aan { background: var(--signaal); border-color: var(--signaal); box-shadow: 0 0 0 3px rgba(255, 102, 0, .25); }
.sein-herhaald { font-size: .85rem; color: var(--grijs); margin-left: .3rem; }
.sein-onder { margin-top: auto; padding-top: .4rem; display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.sein-art { font-size: .85rem; color: var(--grijs); }
.knop.is-spelend { background: var(--signaal); color: #fff; }
.sein-oefen { background: var(--vlak); border-radius: 6px; }
.sein-quiz { max-width: var(--tekstbreedte); background: #fff; border: 1px solid var(--lijn); border-radius: var(--radius); padding: 1.25rem; }
.sein-quiz[hidden], .sein-quiz [hidden] { display: none; }
.sein-score { margin: 0 0 .5rem; font-weight: 700; color: var(--grijs); }
.sein-vraag { font-size: 1.15rem; font-weight: 800; color: var(--zee); margin: 0 0 .9rem; }
.sein-patroon-quiz { margin-top: .9rem; }
.sein-opties { display: grid; gap: .6rem; margin-top: 1rem; }
.sein-optie { text-align: left; font: inherit; font-size: 1rem; line-height: 1.35; padding: .8rem 1rem; min-height: 3rem; border: 2px solid var(--lijn); border-radius: 6px; background: #fff; color: var(--inkt); cursor: pointer; }
.sein-optie:hover:not([disabled]) { border-color: var(--blauw); background: var(--blauw-licht); }
.sein-optie:focus-visible, .sein-kaart .knop:focus-visible, .sein-quiz .knop:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.sein-optie.is-goed { border-color: var(--goed); background: var(--goed-vlak); }
.sein-optie.is-fout { border-color: var(--fout); background: var(--fout-vlak); }
.sein-optie[disabled] { cursor: default; color: var(--inkt); }
.sein-feedback { margin: 1rem 0 0; font-weight: 600; line-height: 1.4; }
.sein-feedback:empty { display: none; }
.sein-feedback.is-goed { color: var(--goed); }
.sein-feedback.is-fout { color: var(--fout); }
.sein-quiz > .knop-licht { margin-top: 1rem; }

/* ===================================================================== */
/* Motor: wit en munt. Overschrijft de basis hierboven en voegt de nieuwe onderdelen toe. */
/* ===================================================================== */

@media (min-width: 48rem) { :root { --rand: 1.5rem; } }
@media (min-width: 60rem) { :root { --rand: 2.5rem; } }

/* Knoppen: oranje met donkere tekst (contrast), donker, of omlijnd */
.knop { border-radius: 6px; }
.knop-signaal, .knop-signaal:hover { color: var(--signaal-tekst); }
.knop-signaal { box-shadow: 0 5px 0 var(--signaal-schaduw); }
.knop-signaal:active { box-shadow: 0 2px 0 var(--signaal-schaduw); transform: translateY(3px); }
.knop-zee, .knop-donker { background: var(--zee); color: var(--wit); border-color: var(--zee); }
.knop-zee:hover, .knop-donker:hover { background: var(--zee-licht); border-color: var(--zee-licht); color: var(--wit); }
.knop-licht { background: var(--wit); border-width: 2px; }
.knop-wit { background: var(--wit); color: var(--zee); border-color: var(--wit); }
.knop-groen { background: var(--signaal); color: var(--signaal-tekst); border-color: var(--signaal); }
.knop-groen:hover { background: var(--signaal-hover); color: var(--signaal-tekst); border-color: var(--signaal-hover); }

/* Kop: wit met donkere tekst */
.kop { background: var(--wit); color: var(--inkt); border-bottom: 1px solid #e3f1ee; }
.kop-binnen { flex-wrap: nowrap; padding-top: .7rem; padding-bottom: .7rem; }
.merk, .merk:hover { color: var(--inkt); font-size: 1.1rem; line-height: 1.1; }
.merk-tegel { width: 40px; height: 40px; flex: none; border-radius: 23%; display: block; }
.merk-woord b { font-weight: 800; }
.merk-woord span { font-weight: 400; color: var(--zee-licht); }
@media (max-width: 26rem) { .merk-woord { font-size: 1rem; } .merk-woord span { display: block; } }
.nav a, .nav-knop { color: var(--inkt); }
.nav a:hover, .nav-knop:hover { color: var(--zee-licht); }
.nav a.nav-rand {
  border: 2px solid var(--lijn); border-radius: 6px; padding: .4rem .85rem; min-height: 44px;
  display: inline-flex; align-items: center; font-weight: 700;
}
.nav a.nav-rand:hover { border-color: var(--zee); text-decoration: none; color: var(--inkt); }
.skiplink { background: var(--zee); color: var(--wit); }

/* Voet: licht, met donkere tekst */
.voet { background: var(--vlak); color: var(--grijs); border-top: 1px solid #e3f1ee; }
.voet a, .voet .link-knop { color: var(--zee-licht); }
.voet a:hover { color: var(--inkt); }
/* Tikdoelen in de voet minstens 24 px hoog (WCAG 2.2, 2.5.8). Motor 2 nov 2026, eerst bij VCA. */
.voet a { display: inline-block; padding-block: .15rem; }
.voet p a { display: inline; padding-block: .3rem; }
.voet-merk, .voet-kop { color: var(--inkt); }
.voet-merk { display: flex; align-items: center; gap: .6rem; }
.voet-tegel { width: 32px; height: 32px; border-radius: 23%; }
.disclaimer { color: var(--grijs); font-size: .95rem; }
.voet-onder { border-top: 1px solid var(--lijn); }
.voet-onder p { color: var(--grijs); padding-top: .8rem; padding-bottom: .8rem; }
.voet-onder p + p { padding-top: 0; font-size: .85rem; }

/* Disclaimerstrook */
.strook { background: var(--wit); border-bottom: 1px solid #e3f1ee; }
.strook-binnen { max-width: var(--paginabreedte); margin: 0 auto; padding: .85rem var(--rand); display: flex; gap: .6rem; align-items: flex-start; }
.strook-binnen p { margin: 0; font-size: .95rem; line-height: 1.5; color: var(--grijs); }
.strook-schild { flex: none; width: 18px; height: 23px; fill: var(--blauw); margin-top: 1px; }

.bovenkop { font-size: .85rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--zee-licht); margin-bottom: .5rem; }
.ruim-boven { margin-top: 2rem; }
.mail-groot { font-size: 1.35rem; font-weight: 800; overflow-wrap: anywhere; }
.badge { background: var(--zee); color: var(--wit); }
.vinklijst { list-style: none; padding: 0; margin: .5rem 0 1.25rem; font-size: 1rem; }
.vinklijst li { padding-left: 1.6rem; position: relative; }
.vinklijst li::before {
  content: ""; position: absolute; left: 0; top: .3em; width: 1.05rem; height: 1.05rem; border-radius: 50%;
  background: var(--blauw-licht) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.4l2.8 2.8 6-6.4' fill='none' stroke='%230b7a71' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat;
}

/* Trainingskaarten (homepage) */
.trainingen { display: grid; gap: 14px; margin: 1.25rem 0 1rem; }
@media (min-width: 60rem) { .trainingen { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; } }
.training { position: relative; overflow: hidden; background: var(--wit); border: 2px solid var(--lijn); border-radius: 6px; padding: 1.25rem 1.1rem; display: flex; flex-direction: column; }
.training.is-aanbevolen { background: var(--blauw-licht); border-color: var(--zee); box-shadow: 0 18px 40px rgba(15, 59, 63, .12); }
.training .badge { align-self: flex-start; font-size: .8rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; border-radius: 999px; padding: .2rem .75rem; margin-bottom: .6rem; }
.training-kop { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.training-kop h3 { margin: 0; font-size: 1.25rem; }
.training-prijs { margin: 0; font-size: 1.65rem; font-weight: 800; color: var(--inkt); white-space: nowrap; }
.training-looptijd { margin: .2rem 0 0; color: var(--grijs); font-size: 1rem; }
.training .knop { margin-top: auto; width: 100%; }

/* Dashboard */
.dash-kaarten { display: grid; gap: 14px; margin: 1.5rem 0 1rem; }
@media (min-width: 60rem) { .dash-kaarten { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.dash-kaart { border: 2px solid var(--lijn); border-radius: 6px; padding: 1.25rem; background: var(--wit); }
.dash-kaart-uit { background: var(--blauw-licht); border-color: var(--blauw-licht); }
.dash-kaart p { font-size: 1rem; }
.dash-kaart .knoppen { margin-top: .75rem; }
.klaar-meter { position: relative; width: 120px; height: 120px; margin: .5rem 0 .75rem; }
.klaar-meter b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.6rem; color: var(--inkt); }
.meter-cirkel { width: 100%; height: 100%; }
.meter-rail { stroke: var(--blauw-licht); }
.meter-boog { stroke: var(--blauw); }
.klaar-meter.is-groen .meter-boog { stroke: var(--goed); }
.klaar-meter.is-oranje .meter-boog { stroke: var(--signaal); }
.klaar-meter.is-rood .meter-boog { stroke: #d1d9db; }
.onderwerp-lijst { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 10px; }
@media (min-width: 48rem) { .onderwerp-lijst { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.onderwerp-lijst li { margin: 0; }
.onderwerp-lijst a {
  display: grid; grid-template-columns: auto 1fr; gap: .15rem .8rem; align-items: center;
  border: 2px solid var(--lijn); border-radius: 6px; padding: .8rem 1rem; text-decoration: none; color: var(--inkt); background: var(--wit); min-height: 52px;
}
.onderwerp-lijst a:hover { border-color: var(--blauw); }
.ow-nr {
  grid-row: 1 / span 3; width: 30px; height: 38px; display: grid; place-items: center; font-weight: 800; font-size: .9rem; color: var(--zee-licht);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='10 6 28 36'%3E%3Cpath d='M24 6.5 L37.5 11.5 V22.5 C37.5 31.8 31.6 38 24 41.5 C16.4 38 10.5 31.8 10.5 22.5 V11.5 Z' fill='%23e6f7f3'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ow-titel { font-weight: 800; overflow-wrap: break-word; hyphens: auto; }
/* Onderwerp met icoon in het schild (optie A, keuze Gijs 16 okt 2026): nummer voor de titel. */
.ow-nr.ow-nr-icoon { width: 44px; height: 54px; color: var(--zee-licht); }
.ow-icoon { width: 24px; height: 24px; margin-top: -3px; }
.ow-titel-nr { color: var(--zee-licht); margin-right: .15rem; }
.ow-meta { font-size: .95rem; color: var(--grijs); }
.ow-balk { height: 6px; background: var(--blauw-licht); border-radius: 3px; overflow: hidden; }
.ow-balk span { display: block; height: 100%; background: var(--blauw); }
/* Voortgangsbalk per onderwerp in de kleur van het label: oranje bij bezig, groen bij beheerst. */
.ow-balk.is-bezig { background: #fff1e4; }
.ow-balk.is-bezig span { background: #f08a3c; }
.ow-balk.is-beheerst { background: var(--goed-vlak); }
.ow-balk.is-beheerst span { background: var(--goed); }
.downloads { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 12px; }
.downloads li { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1rem; align-items: center; border: 2px solid var(--lijn); border-radius: 6px; padding: .8rem; margin: 0; }
.downloads img { grid-row: 1 / span 2; width: 64px; height: auto; border-radius: 4px; border: 1px solid var(--lijn); }
.downloads span { font-size: 1rem; }
.downloads .knop { justify-self: start; }
.upgrade-blok { background: var(--blauw-licht); border-radius: 6px; padding: 1.25rem; margin: 2rem 0; }

/* Kooppagina */
/* PDF's bij een training als een stapel papier: licht gedraaid, over elkaar, waaiert uit bij hover. */
.kp-pdfs { grid-column: 1 / -1; display: flex; align-items: center; gap: 1rem 1.25rem; flex-wrap: wrap; margin-top: 1rem; }
.kp-pdf-stapel { display: flex; align-items: flex-end; padding: .5rem .75rem .25rem .25rem; }
.kp-pdf-stapel img {
  width: 76px; height: auto; margin-left: -30px; border-radius: 3px; border: 1px solid var(--lijn); background: var(--wit);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 6px 14px rgba(0, 0, 0, .12); transform-origin: 50% 100%;
  transition: transform .2s ease, margin .2s ease;
}
.kp-pdf-stapel img:first-child { margin-left: 0; transform: rotate(-7deg); }
.kp-pdf-stapel img:nth-child(2) { transform: rotate(-1deg) translateY(-3px); }
.kp-pdf-stapel img:nth-child(3) { transform: rotate(5deg); }
.kp-pdf-stapel img:nth-child(n+4) { transform: rotate(9deg) translateY(2px); }
.kp-kaart:hover .kp-pdf-stapel img:not(:first-child), .kp-kaart.is-actief .kp-pdf-stapel img:not(:first-child) { margin-left: -18px; }
.kp-pdf-stapel-tekst { display: flex; flex-direction: column; font-size: .9rem; color: var(--grijs); line-height: 1.35; min-width: 0; }
.kp-pdf-stapel-tekst strong { color: var(--inkt); font-size: 1rem; }
@media (prefers-reduced-motion: reduce) { .kp-pdf-stapel img { transition: none; } }
.kp-disclaimer { font-size: .95rem; color: var(--grijs); }
.kp-kaart.is-uit { opacity: .55; }

/* Proefexamen-intro */
.examenregel { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 1.5rem 0; }
.examenregel li { margin: 0; background: var(--blauw-licht); border-radius: 6px; padding: .8rem; display: flex; flex-direction: column; }
.examenregel b { font-size: 1.9rem; line-height: 1; color: var(--inkt); }
.examenregel span { font-size: .9rem; color: var(--grijs); margin-top: .3rem; }
.voorbeeld-nav .is-actief { background: var(--zee); color: var(--wit); }

/* Certificaat */
.cert-tegel { width: 2.2em; height: 2.2em; border-radius: 23%; }

/* Juridische tekst */
.juridisch h2 { font-size: 1.25rem; }
.kp-tag { background: var(--blauw-licht); color: var(--zee-licht); }
.kp-disclaimer { margin-top: 1rem; }

/* Taalkeuze met vlaggetjes in de kop */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.taalkeuze { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid #d5e8e3; border-radius: 999px; background: #fff; }
.nav .taalkeuze-optie, .taalkeuze-optie { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .55rem; border-radius: 999px; font-size: .85rem; font-weight: 800; letter-spacing: .03em; line-height: 1; text-decoration: none; color: inherit; }
.nav .taalkeuze a.taalkeuze-optie { opacity: .7; }
.nav .taalkeuze a.taalkeuze-optie:hover, .nav .taalkeuze a.taalkeuze-optie:focus-visible { text-decoration: none; color: inherit; opacity: 1; background: var(--munt-licht, #e6f7f3); }
.taalkeuze-optie.is-actief { background: var(--munt-licht, #e6f7f3); }
.vlag { display: inline-block; width: 20px; height: 14px; border-radius: 3px; overflow: hidden; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); flex: none; }
.vlag svg { display: block; width: 100%; height: 100%; }
@media (max-width: 30rem) { .taalkeuze-code { display: none; } .taalkeuze-optie { padding: .35rem .45rem; } }

/* Bedankpagina na de betaling */
.pagina-bedankt main { padding-top: 1.5rem; }
.bedankt { position: relative; }
.confetti { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 50; }
/* Bedankpagina, stijl C "Merkband" (keuze Gijs 31 okt 2026, voor alle sites): bovenaan een band in de donkerste
   merkkleur met het merkmotief (--merk-watermerk, licht gemaakt), het logo met een vinkje, en de codekaart die half
   over de band valt. Daaronder het overzicht met haarlijnen en de stappen met lijniconen in plaats van nummers. */
.bedankt-band {
  position: relative; color: #fff; background: var(--zee-diep);
  margin-top: -1.5rem; padding: 2.5rem 0 5.5rem;
  box-shadow: 0 0 0 100vmax var(--zee-diep); clip-path: inset(0 -100vmax);
}
.bedankt-band::after {
  content: ""; position: absolute; pointer-events: none; right: max(-4rem, calc(50% - 50vw)); top: -2rem;
  width: min(60vw, 340px); aspect-ratio: 1; background: var(--merk-watermerk, none) no-repeat center / contain;
  filter: invert(1); opacity: .9;
}
.bedankt-band .bedankt-kop { position: relative; z-index: 1; }
.bedankt-band h1 { color: #fff; }
.bedankt-band .lead { color: rgba(255, 255, 255, .78); }
.bedankt-band .bedankt-logo { background: #fff; border-radius: 6px; padding: 4px; }
.bedankt-onder { position: relative; z-index: 1; margin-top: -4rem; }
.bedankt-onder .codekaart { box-shadow: 0 12px 30px rgba(6, 21, 33, .18); }
.bedankt-onder .codekaart:active { box-shadow: 0 6px 18px rgba(6, 21, 33, .18); }
.bedankt-kop { display: grid; gap: .25rem; }
.bedankt-merk { position: relative; display: inline-block; width: 64px; height: 64px; margin-bottom: .75rem; animation: vink-pop .5s cubic-bezier(.2, 1.4, .4, 1) both; }
.bedankt-logo { width: 64px; height: 64px; display: block; }
.bedankt-vink { position: absolute; right: -9px; bottom: -7px; width: 30px; height: 30px; display: block; background: #fff; border-radius: 50%; }
.bedankt-vink svg { width: 100%; height: 100%; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.vink-cirkel { stroke: var(--goed); stroke-width: 4; fill: var(--goed-vlak); stroke-dasharray: 152; stroke-dashoffset: 152; animation: vink-teken .45s .2s ease-out forwards; }
.vink-haak { stroke: var(--goed); stroke-width: 6; stroke-dasharray: 36; stroke-dashoffset: 36; animation: vink-teken .3s .55s ease-out forwards; }
@keyframes vink-teken { to { stroke-dashoffset: 0; } }
@keyframes vink-pop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.bedankt h1 { font-size: clamp(1.9rem, 1.4rem + 2.6vw, 2.8rem); margin-bottom: .35em; max-width: 22ch; }
.bedankt .lead { margin-bottom: 1.5rem; max-width: 38rem; }

.codekaart {
  display: grid; gap: .3rem; justify-items: start; width: 100%; max-width: 26rem; margin: 0 0 1.25rem; padding: 1rem 1.25rem 1.1rem;
  font: inherit; color: var(--zee); text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
  background: #fff; border: 2px solid var(--zee); border-radius: 6px;
  transition: border-color .15s ease, background-color .15s ease, transform .1s ease, box-shadow .1s ease;
}
.codekaart:hover { background: var(--vlak); }
.codekaart:active { transform: translateY(1px); }
.codekaart:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.codekaart-label { font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--grijs); }
.codekaart-code { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: clamp(2rem, 1.5rem + 3vw, 2.6rem); font-weight: 800; letter-spacing: .12em; line-height: 1.15; user-select: all; -webkit-user-select: all; }
.codekaart-hint { display: inline-flex; align-items: center; gap: .4rem; font-size: .95rem; font-weight: 700; color: var(--zee-licht); }
.codekaart-hint svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.hint-klik { display: none; }
@media (hover: hover) and (pointer: fine) { .hint-tik { display: none; } .hint-klik { display: inline; } }
@media (any-pointer: coarse) { .hint-tik { display: inline; } .hint-klik { display: none; } }
.codekaart.is-gekopieerd { border-color: var(--goed); background: var(--goed-vlak); }
.codekaart.is-gekopieerd .codekaart-hint { color: var(--goed); }

.bedankt-knoppen { margin: 0 0 2.25rem; }
.bedankt-knoppen .knop { width: 100%; max-width: 26rem; justify-content: center; }

.bedankt-overzicht { display: grid; grid-template-columns: 1fr; margin: 0 0 .9rem; padding: 0; border-top: 2px solid var(--zee); border-bottom: 1px solid var(--lijn); font-size: 1rem; max-width: 40rem; }
.bedankt-overzicht > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: .1rem; padding: .65rem 0; align-items: baseline; }
.bedankt-overzicht > div + div { border-top: 1px solid var(--lijn); }
.bedankt-overzicht dt { font-weight: 800; color: var(--grijs); font-size: .85rem; }
.bedankt-overzicht dd { margin: 0; overflow-wrap: anywhere; color: var(--inkt); }
/* Ook op breed scherm rijen (label links, waarde rechts): als drie kolommen naast elkaar drukte een lange
   trainingsnaam de e-mailkolom samen tot één letter breed (gezien 31 okt 2026 op F-gassen). */
@media (min-width: 36rem) {
  .bedankt-overzicht > div { grid-template-columns: 8rem minmax(0, 1fr); gap: .6rem; }
}
.bedankt-mail { font-size: .95rem; color: var(--grijs); margin-bottom: 2.5rem; max-width: 40rem; }

.bedankt-stappen-kop { font-size: 1.25rem; margin-bottom: .5rem; }
.bedankt-stappen { list-style: none; margin: 0; padding: 0; max-width: 40rem; border-top: 1px solid var(--lijn); }
.bedankt-stappen li { margin: 0; border-bottom: 1px solid var(--lijn); }
.bedankt-stappen li > a, .bedankt-stappen li > div {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: .9rem; align-items: start; padding: .9rem .25rem;
  color: var(--inkt); text-decoration: none; font-size: 1rem; line-height: 1.45;
}
.bedankt-stappen li > div { grid-template-columns: 28px minmax(0, 1fr); }
.bedankt-stappen .ow-icoon { width: 28px; height: 28px; color: var(--zee-licht); margin-top: -.1rem; }
.bedankt-stappen li > a::after { content: "→"; align-self: center; color: var(--zee-licht); font-weight: 800; transition: transform .15s ease; }
.bedankt-stappen li > a:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.bedankt-stappen li > a:hover::after { transform: translateX(3px); }
.bedankt-stappen li > a:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.bedankt-stappen strong { color: var(--zee); }

.bedankt-wachten { text-align: left; }
.laadrondje { display: block; width: 44px; height: 44px; border-radius: 50%; border: 4px solid var(--lijn); border-top-color: var(--blauw); animation: draai .9s linear infinite; margin-bottom: 1rem; }
@keyframes draai { to { transform: rotate(360deg); } }
.bedankt-traag { margin-top: 1rem; padding: 1rem 1.2rem; border-radius: var(--radius); background: var(--vlak); }

@media (prefers-reduced-motion: reduce) {
  .bedankt-merk, .vink-cirkel, .vink-haak { animation: none; stroke-dashoffset: 0; }
  .laadrondje { animation-duration: 2.4s; }
  .codekaart { transition: none; }
}

/* Flashcards (paginas/flashcards.php, assets/js/flashcards.js) */
.fc-app { margin: 1.5rem 0 1rem; }
.fc-keuze { margin-top: 0; }
.fc-keuze .knop[disabled] { opacity: .55; cursor: default; }
.fc-uitleg-modus { max-width: var(--tekstbreedte); margin-top: .75rem; color: var(--grijs); }
.fc-melding { background: #fff6ec; padding: .6rem .9rem; border-radius: 6px; font-size: 1rem; }
.fc-speler { max-width: 40rem; margin: 1.25rem 0 0; scroll-margin-top: 1rem; }
.fc-speler-kop { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.fc-speler-titel { font-weight: 800; margin: 0; font-size: 1.05rem; }
.fc-teller { margin: .6rem 0 .3rem; color: var(--grijs); }
.fc-voortgang { height: 6px; border-radius: 3px; background: var(--blauw-licht); overflow: hidden; margin-bottom: .9rem; }
.fc-voortgang span { display: block; height: 100%; background: var(--blauw); transition: width .3s ease; }
.fc-kaart { background: var(--wit); border: 2px solid var(--lijn); border-radius: 6px; box-shadow: 0 10px 28px rgba(15, 59, 63, .08); min-height: 15rem; display: flex; flex-direction: column; touch-action: pan-y; }
.fc-voor { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8rem; width: 100%; min-height: 15rem; padding: 1.5rem 1.25rem; background: none; border: 0; border-radius: 6px; font: inherit; color: var(--zee); cursor: pointer; text-align: center; }
.fc-voor:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.fc-soort { font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--zee-licht); }
.fc-vraag { font-size: 1.35rem; font-weight: 800; line-height: 1.3; max-width: 30rem; }
.fc-beeld { max-width: 10rem; height: auto; }
.fc-draai-label { margin-top: .4rem; font-size: .95rem; font-weight: 700; color: var(--zee-licht); text-decoration: underline; text-underline-offset: .25em; }
.fc-achter { padding: 1.25rem 1.25rem 1rem; }
.fc-achter p { font-size: 1rem; margin: 0 0 .7rem; }
.fc-achter .fc-soort { text-transform: none; letter-spacing: 0; font-size: .9rem; color: var(--grijs); }
.fc-kern { font-weight: 700; font-size: 1.1rem !important; color: var(--zee); }
.fc-meer { margin: 0 0 .7rem; }
.fc-meer summary { cursor: pointer; font-weight: 700; color: var(--zee-licht); margin-bottom: .5rem; }
.fc-valkuil { background: #fff6ec; padding: .55rem .8rem; border-radius: 6px; }
.fc-ezel { background: var(--blauw-licht); padding: .55rem .8rem; border-radius: 6px; }
.fc-bron, .fc-verder { color: var(--grijs); }
.fc-oordelen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin: .9rem 0 .4rem; }
.fc-oordelen .knop { padding: .75rem .4rem; font-size: 1rem; justify-content: center; gap: .35rem; border: 2px solid transparent; }
.fc-oordelen kbd { display: none; font: inherit; font-size: .75rem; font-weight: 800; border: 1px solid currentColor; border-radius: 4px; padding: 0 .3rem; opacity: .7; }
@media (hover: hover) and (pointer: fine) { .fc-oordelen kbd { display: inline-block; } }
.fc-o-leren { background: var(--fout-vlak); color: var(--fout); border-color: var(--fout) !important; }
.fc-o-twijfel { background: #fff6ec; color: #8a4510; border-color: var(--signaal) !important; }
.fc-o-ken { background: var(--goed-vlak); color: var(--goed); border-color: var(--goed) !important; }
.fc-hint { color: var(--grijs); margin-top: .6rem; }
.fc-einde { background: var(--blauw-licht); border-radius: 6px; padding: 1.25rem; margin-top: .9rem; }
.fc-einde h3 { margin-top: 0; }
.fc-draai-uit { animation: fc-uit .16s ease-in forwards; }
.fc-draai-in { animation: fc-in .25s ease-out; }
@keyframes fc-uit { to { transform: perspective(900px) rotateY(90deg); opacity: .6; } }
@keyframes fc-in { from { transform: perspective(900px) rotateY(-90deg); opacity: .6; } to { transform: none; opacity: 1; } }
.fc-stapels { list-style: none; padding: 0; margin: 1.25rem 0 0; display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); }
.fc-stapel { margin: 0; display: flex; align-items: center; gap: .8rem; padding: .9rem 1rem; border: 2px solid var(--lijn); border-radius: 6px; background: var(--wit); }
.fc-stapel .ow-nr { flex: none; }
.fc-stapel-tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.fc-stapel .ow-titel { font-size: 1rem; overflow-wrap: break-word; hyphens: auto; }
.fc-stapel .knop { flex: none; }
.fc-stapel.is-op-slot { background: var(--vlak); }
.fc-slot { display: inline-flex; align-items: center; gap: .3rem; }
.fc-slot .icoon { width: 1rem; height: 1rem; }
.fc-gratis { max-width: calc(var(--tekstbreedte) + 4rem); }
.fc-lijstkaart { border: 2px solid var(--lijn); border-radius: 6px; background: var(--wit); margin: 0 0 .6rem; }
.fc-lijstkaart summary { cursor: pointer; padding: .85rem 1rem; font-weight: 800; color: var(--zee); }
.fc-lijstkaart .fc-achter { padding-top: 0; }
.fc-artikel-link { margin-top: 1.5rem; padding: 1rem 1.2rem; border-radius: 6px; background: var(--blauw-licht); }
.fc-artikel-link p { margin: 0; }
@media (prefers-reduced-motion: reduce) {
  .fc-draai-uit, .fc-draai-in { animation: none; }
  .fc-kaart { transition: none; }
  .fc-voortgang span { transition: none; }
  .fc-kaart.is-om { animation: fc-rustig .2s ease-out; }
}
@keyframes fc-rustig { from { opacity: .35; } to { opacity: 1; } }
@media (max-width: 30rem) {
  .fc-vraag { font-size: 1.2rem; }
  .fc-oordelen .knop { font-size: .92rem; }
  .fc-stapel { flex-wrap: wrap; }
}
.dash-fc { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.25rem; margin: 0 0 1rem; }
.dash-fc p { margin: .25rem 0 0; }
.fc-app.is-bezig .fc-keuze, .fc-app.is-bezig .fc-uitleg-modus, .fc-app.is-bezig > .klein { display: none; }
.fc-app.is-bezig .fc-speler { margin-top: 0; }

/* Gratis oefentest: compacte kop, test meteen in beeld en opvallend (14 okt 2026) */
.gratis-test { padding-top: 1.25rem; }
.gratis-test .bovenkop { margin-bottom: .3rem; }
.gratis-test h1 { font-size: clamp(1.7rem, 1.3rem + 2vw, 2.6rem); margin-bottom: .35em; }
.gratis-intro { font-size: 1.05rem; line-height: 1.5; color: var(--grijs); margin: 0 0 1rem; max-width: 36rem; }
.quiz-kader { background: var(--wit); border: 2px solid var(--lijn); border-top: 6px solid var(--signaal); border-radius: 6px; padding: 1.1rem 1rem 1.25rem; box-shadow: 0 14px 34px rgba(255, 138, 61, .14), 0 2px 6px rgba(15, 59, 63, .06); }
@media (min-width: 40rem) { .quiz-kader { padding: 1.5rem 1.6rem 1.6rem; } }
.quiz-kader .uitslag-kaart.is-gratis { margin-left: -.25rem; margin-right: -.25rem; }

/* Kleur in de vragen: oranje accent voor voortgang, punten en antwoordletters */
.voortgangsbalk span { background: linear-gradient(90deg, var(--signaal), var(--signaal-hover)); }
.vraag-punten { background: #fff1e6; color: #9a4a10; }
.optie-letter { background: #fff6ee; border-color: #ffd9bd; color: #a14c0f; }
@media (hover: hover) {
  .optie:hover:not([disabled]) { border-color: var(--signaal); background: #fffaf5; }
  .optie:hover:not([disabled]) .optie-letter { border-color: var(--signaal); background: var(--signaal); color: #fff; }
}

/* Uitslag gratis test: knop direct onder het oordeel */
.uitslag-cta { margin: 1.1rem 0 .4rem; }
.uitslag-cta .knop { width: 100%; justify-content: center; }
@media (min-width: 30rem) { .uitslag-cta .knop { width: auto; } }
.uitslag-cta-noot { font-size: .95rem; margin: .55rem 0 0; color: #cfe0de; }

/* Artikel: "Test jezelf" met een echte gratis vraag (haakje naar de gratis test) */
.test-haakje { margin: 2rem 0; padding: 1.2rem 1.1rem 1.1rem; background: #fffaf5; border: 2px solid #ffd9bd; border-radius: 6px; }
.test-haakje-label { margin: 0 0 .35rem; font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #a14c0f; }
.test-haakje-vraag { font-size: 1.15rem; font-weight: 700; color: var(--zee); line-height: 1.4; margin: 0 0 .9rem; }
.test-haakje .opties { margin-bottom: .8rem; }
.test-haakje .optie { min-height: 3.6rem; font-size: 1rem; }
.test-haakje-noot { font-size: .92rem; color: var(--grijs); margin: 0; }
.test-haakje [data-demo-uitkomst]:not(:empty) + .test-haakje-noot { display: none; }

/* Artikelen: uitlegbeeld en haakjes in de tekst (afspraak 9, 14 okt 2026) */
.tekst figure { margin: 1.75rem 0; }
/* Kopfoto boven een artikel (afspraak 7) */
.tekst .kennis-foto { margin: 1rem 0 1.75rem; }
.tekst .kennis-foto img { aspect-ratio: 16 / 9; object-fit: cover; }
.tekst figure img, .tekst figure svg { display: block; width: 100%; height: auto; border-radius: var(--radius, 6px); background: var(--vlak, #f6f8f7); }
.tekst figcaption { margin-top: .5rem; font-size: .9rem; color: var(--grijs, #4b5b55); }
.haakje { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin: 1.5rem 0; padding: 1rem 1.25rem; border-radius: var(--radius, 6px); border: 1px solid var(--lijn, #d9e3df); background: var(--vlak, #f6f8f7); }
.haakje p { flex: 1 1 16rem; margin: 0; font-size: 1rem; line-height: 1.5; }
.haakje-hard { border-color: var(--signaal); background: color-mix(in srgb, var(--signaal) 9%, #fff); }
.haakje .knop { flex: 0 0 auto; }

/* Update-balk met schild en vinkje (afspraak 10): smalle balk bovenaan, klik gaat naar /actueel. */
.usb-icoon { width: 1.15rem; height: 1.15rem; flex: none; }
.usb-icoon { color: var(--blauw); }
.usb-icoon .usb-vink { stroke: #fff; }
.usb-balk, .usb-balk:hover { display: block; background: var(--zee); color: var(--wit); font-size: .88rem; line-height: 1.35; text-decoration: none; }
.usb-balk:hover .usb-meer { text-decoration-thickness: 2px; }
.usb-balk-binnen { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .3rem .6rem; padding: .45rem var(--rand); text-align: center; }
.usb-balk .usb-icoon { color: var(--blauw); }
.usb-balk .usb-meer { color: var(--signaal); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.usb-balk:focus-visible, .usb-blok:focus-visible { outline: 3px solid var(--signaal); outline-offset: -3px; }
.usb-paneel { max-width: var(--tekstbreedte); margin: 0 auto; padding: .25rem var(--rand) 1rem; font-size: .92rem; }
.usb-balk .usb-paneel { color: var(--wit); }
.usb-balk .usb-paneel a { color: var(--wit); }
.usb-paneel p { margin: .5rem 0; }
.usb-bronnen { list-style: none; margin: .5rem 0; padding: 0; display: grid; gap: .45rem; }
.usb-bronnen li { display: grid; gap: .1rem; }
.usb-geldend { font-size: .85em; opacity: .85; }
.usb-opm { font-size: .88em; opacity: .9; }
.usb-blok { display: flex; gap: .85rem; align-items: center; padding: .85rem 1rem; text-decoration: none; color: inherit; margin: 1.25rem 0 0; background: var(--wit); border: 2px solid var(--lijn); border-radius: var(--radius); box-shadow: 0 6px 18px rgb(15 59 63 / .08); }
.usb-blok:hover { border-color: var(--blauw); }
.usb-blok-pijl { margin-left: auto; flex: none; font-size: 1.3rem; font-weight: 800; color: var(--zee-licht); }
.usb-blok-icoon { flex: none; display: grid; place-items: center; width: 3.4rem; height: 3.4rem; border-radius: 6px; background: var(--blauw-licht); }
.usb-blok-icoon .usb-icoon { width: 2rem; height: 2rem; }
.usb-blok-tekst { display: grid; gap: .2rem; min-width: 0; }
.usb-blok-tekst strong { font-size: 1.02rem; line-height: 1.3; color: var(--inkt); }
.usb-blok-bronnen { font-size: .85rem; color: var(--grijs); }
.usb-blok .usb-paneel { padding: 0 1rem 1rem; border-top: 1px solid var(--lijn); }
.usb-koop { margin: .75rem 0 1.25rem; box-shadow: none; }
.usb-regel { margin: .6rem 0 1rem; font-size: .92rem; }
.usb-regel a { display: inline-flex; align-items: center; gap: .55rem; color: var(--zee); text-decoration: none; font-weight: 600; }
.usb-regel a:hover span { text-decoration: underline; }
.kp-usb { margin: .5rem 0 0; font-size: .85rem; }
.actueel-maand h2 { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.usb-groot { width: 1.8rem; height: 1.8rem; }
.label-nieuw { font-size: .75rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; background: var(--signaal); color: var(--signaal-tekst); padding: .15rem .55rem; border-radius: 999px; }
@media (max-width: 30rem) {
  .usb-balk { font-size: .8rem; }
  .usb-balk-binnen { padding-block: .35rem; }
  .usb-balk .usb-meer { display: none; }
}

/* Artikel: tussen-CTA, mini-oefentest en controleregel (afspraken 11 en 16) */
.cta-tussen { margin: 2rem 0; padding: 1.1rem 1.2rem; border-radius: 6px; background: var(--zee); color: var(--wit); display: flex; flex-wrap: wrap; gap: .8rem 1.2rem; align-items: center; }
.cta-tussen p { margin: 0; flex: 1 1 18rem; color: var(--wit); }
.cta-tussen strong { color: var(--wit); }
/* Mini-oefentest in artikelen: zelfde vorm als de gratis oefentest (stijl D, besluit Gijs 28 okt 2026). Kop en intro op de pagina,
   daaronder het donkere vlak met streepjes, een vraag tegelijk op een witte kaart en de grote knop Volgende vraag. */
.blogtoets { margin: 2.5rem 0; }
.blogtoets > h2 { margin: 0 0 .35rem; }
.blogtoets-intro { margin: 0 0 1rem; color: var(--grijs); }
.blogtoets-qd .quiz-vraag { font-size: clamp(1.1rem, 1rem + .6vw, 1.3rem); }
.blogtoets-taal { color: rgba(255, 255, 255, .85); font-size: .9rem; }
/* Beeld bij een vraag in de mini-oefentest (artikel_toets_beeld), kleiner dan in de quiz. */
.blogtoets-figuur { margin: 0 0 .9rem; }
.blogtoets-figuur img { max-width: 24rem; }
.blogtoets-figuur.is-teken img { max-width: 7rem; }
.blogtoets-eind p { margin: .4rem 0; }
.blogtoets-score { font-weight: 800; font-size: 1.15rem; color: var(--inkt); }
.blogtoets .knoppen { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .9rem; }
.artikel-gecontroleerd { display: flex; gap: .55rem; align-items: flex-start; margin: 1.8rem 0 0; padding: .8rem 1rem; border-radius: 6px; background: var(--blauw-licht); font-size: .92rem; color: var(--inkt); }
.artikel-gecontroleerd .usb-icoon { width: 1.2rem; height: 1.2rem; flex: none; margin-top: .15rem; color: var(--zee); }

/* Flashcards naar de toets (afspraak 15) */
.fc-naar-toets { margin: 1rem 0; padding: 1rem 1.1rem; border-radius: 6px; background: var(--blauw-licht); border: 1px solid var(--lijn); }
.fc-naar-toets p { margin: 0 0 .7rem; font-weight: 700; color: var(--inkt); }
.fc-naar-toets .knoppen { display: flex; flex-wrap: wrap; gap: .6rem; }
.fc-fout-toets { margin: .9rem 0 0; }
.fc-fout-toets .blogtoets-opties { margin: .5rem 0; }
.fc-fout-kop { margin: 0; font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--zee-licht); }
.fc-fout-vraag { font-weight: 700; margin: .3rem 0 .5rem; color: var(--inkt); }
.fc-fout-toets .knoppen { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }

/* Aktetas na aankoop (afspraak 12; klassen heten nog koffer) */
.koffer { position: relative; z-index: 2; max-width: 30rem; margin: 0 auto; padding: 1.5rem 0 1rem; text-align: center; cursor: pointer; }
.koffer-beeld svg { width: 11rem; height: auto; display: block; margin: 0 auto; overflow: visible; }
.tas-hengsel { fill: none; stroke: #5b3618; stroke-width: 7; stroke-linecap: round; }
.tas-romp { fill: #8a5428; }
.tas-opening { fill: #4a2b12; }
.tas-naad { fill: none; stroke: #d9b48a; stroke-width: 1.5; stroke-dasharray: 4 4; opacity: .7; }
.tas-klep { fill: #a8692f; }
.tas-klep-naad { fill: none; stroke: #e7c79f; stroke-width: 1.5; stroke-dasharray: 4 4; opacity: .8; }
.tas-riem { fill: #5b3618; }
.tas-gesp { fill: none; stroke: #e0b04a; stroke-width: 3; }
.koffer-deksel { transform-origin: 100px 44px; transform-box: view-box; }
.koffer.is-open .koffer-deksel { animation: koffer-open .5s .15s cubic-bezier(.3, 1.3, .5, 1) both; }
.koffer.is-rustig .koffer-deksel { transform: scaleY(-.42); }
.koffer-kop { font-weight: 800; font-size: 1.2rem; color: var(--zee); margin: .75rem 0 .6rem; }
.koffer-naam { display: block; font-weight: 600; font-size: .95rem; color: var(--grijs); margin-top: .15rem; }
.koffer-inhoud { list-style: none; margin: 0 auto 1rem; padding: 0; display: grid; gap: .4rem; text-align: left; max-width: 24rem; }
.koffer-inhoud li { display: flex; gap: .55rem; align-items: flex-start; font-size: .98rem; line-height: 1.35; background: var(--vlak); border: 1px solid var(--lijn); border-radius: 6px; padding: .45rem .7rem; }
.koffer-inhoud svg { width: 1.15rem; height: 1.15rem; flex: none; margin-top: .1rem; }
.koffer-inhoud svg circle { fill: var(--goed); }
.koffer-inhoud svg path { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.koffer.is-open .koffer-inhoud li { opacity: 0; animation: koffer-item .3s ease-out forwards; animation-delay: calc(.55s + var(--i) * .17s); }
.koffer.is-weg { opacity: 0; transition: opacity .25s; }
.bedankt.is-achter { display: none; }
@keyframes koffer-open { from { transform: scaleY(1); } to { transform: scaleY(-.42); } }
@keyframes koffer-item { from { opacity: 0; transform: translateY(-10px) scale(.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .koffer, .koffer * { animation: none !important; transition: none !important; } .koffer-inhoud li { opacity: 1 !important; } }

/* Kopbalk op smalle telefoons: menu iets compacter, zodat ingelogd (Oefenen, Flashcards, Uitloggen, taal) past. */
@media (max-width: 26rem) {
  .nav ul { gap: .25rem .75rem; }
  .nav a, .nav-knop { font-size: .92rem; }
  .taalkeuze .taalkeuze-optie.is-actief { display: none; }
  /* Ingelogd staan er drie menu-items: dan alleen het beeldmerk, zodat Uitloggen niet van het scherm valt (Wft, 390 px). */
  .kop-binnen:has(.nav-form) .merk span { display: none; }
}

/* Leeromgeving: route naar het examen in 5 stappen met mijlpalen (afspraak 13) */
.route { margin: 1rem 0 1.5rem; background: var(--wit); border: 1px solid var(--lijn); border-radius: 6px; padding: 1.1rem 1.2rem; }
.route-kop { font-size: 1.05rem; margin: 0 0 .9rem; }
.route-stappen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .9rem; }
.route-stappen li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .6rem; row-gap: .15rem; align-items: center; color: var(--grijs); margin: 0; }
.route-nr { grid-row: span 2; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; font-size: .82rem; font-weight: 800; background: var(--vlak); border: 1.5px solid var(--lijn); color: var(--grijs); }
.route-stap-kop { font-size: .88rem; font-weight: 700; color: var(--inkt); line-height: 1.2; }
.route-stap-kop a { color: var(--zee); }
.route-stand { font-size: .8rem; font-variant-numeric: tabular-nums; }
.route-balk { grid-column: 1 / -1; display: block; height: 5px; margin-top: .45rem; border-radius: 99px; background: var(--blauw-licht); overflow: hidden; }
.route-balk span { display: block; height: 100%; background: var(--blauw); border-radius: 99px; }
.route-stappen li.is-nu .route-nr { background: var(--zee); border-color: var(--zee); color: var(--wit); }
.route-stappen li.is-nu .route-stand { color: var(--inkt); font-weight: 600; }
.route-stappen li.is-af .route-nr { background: var(--goed); border-color: var(--goed); position: relative; }
.route-stappen li.is-af .route-nr::after { content: ""; width: .6rem; height: .32rem; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) translate(1px, -1px); }
.route-stappen li.is-af .route-stand { color: var(--goed); font-weight: 700; }
.route-stappen li.is-af .route-balk span { background: var(--goed); }
.route-noot { margin: .9rem 0 0; padding-top: .8rem; border-top: 1px solid var(--lijn); font-size: .92rem; color: var(--inkt); }
.ow-status { display: inline-block; margin-left: .25rem; font-size: .72rem; font-weight: 800; letter-spacing: .03em; padding: .08rem .45rem; border-radius: 99px; background: var(--vlak); color: var(--grijs); border: 1px solid var(--lijn); }
.ow-status.is-bezig { background: #fff4ea; color: #a14c0f; border-color: #ffd9bd; }
.ow-status.is-beheerst { background: var(--goed-vlak); color: var(--goed); border-color: #bfe3cd; }
.route-trend { display: block; width: 100%; max-width: 22rem; height: auto; margin: 0 0 .8rem; }
.route-trend-cesuur { stroke: var(--signaal); stroke-width: 1.5; stroke-dasharray: 4 4; }
.route-trend-lijn { fill: none; stroke: var(--zee); stroke-width: 2.2; stroke-linejoin: round; }
.route-trend .is-ok { fill: var(--goed); }
.route-trend .is-nok { fill: var(--fout); }
@media (max-width: 48rem) {
  .route-stappen { grid-template-columns: 1fr; gap: .7rem; }
  .route-stappen li { grid-template-columns: auto minmax(0, 1fr) auto; }
  .route-nr { grid-row: span 1; width: 1.7rem; height: 1.7rem; font-size: .75rem; }
  .route-stand { text-align: right; }
  .route-balk { display: none; }
}

/* Upgrade naar de PDF's (oefenomgeving): tekst links, papieren stapel rechts, zonder gekleurde zijstreep (wens Gijs 16 okt 2026) */
.upgrade-pdf { display: grid; gap: 1.5rem; align-items: center; padding: 1.5rem; border-left: 0; overflow: hidden; position: relative; isolation: isolate;
  background:
    radial-gradient(circle at 78% 50%, var(--wit) 0, rgb(255 255 255 / 0) 42%),
    radial-gradient(120% 140% at 100% 0%, var(--blauw-licht) 0, rgb(255 255 255 / 0) 60%),
    var(--vlak);
  border: 1px solid var(--lijn); box-shadow: 0 1px 0 rgb(255 255 255 / .8) inset, 0 10px 30px -18px rgb(12 42 32 / .25); }
/* Fijn stippenraster rechts, vervaagt naar links: geeft de stapel een ondergrond zonder druk te worden. */
.upgrade-pdf::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(circle, rgb(12 42 32 / .09) 1px, transparent 1.4px); background-size: 16px 16px;
  -webkit-mask-image: linear-gradient(to left, #000 0%, transparent 60%); mask-image: linear-gradient(to left, #000 0%, transparent 60%); }
.pdf-stapel::before { content: ""; position: absolute; left: 12%; right: 12%; bottom: 6%; height: 18%; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(12 42 32 / .22), transparent); filter: blur(6px); }
@media (min-width: 44rem) { .upgrade-pdf { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); padding: 2rem; } }
.upgrade-label { display: inline-block; margin: 0 0 .5rem; padding: .2rem .65rem; border-radius: 999px; background: var(--signaal); color: var(--signaal-tekst, var(--zee)); font-weight: 800; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; }
.upgrade-pdf h2 { font-size: 1.4rem; margin: 0 0 .75rem; }
.upgrade-pdfs { list-style: none; margin: 0 0 1.1rem; padding: 0; display: grid; gap: .55rem; max-width: 34rem; }
.upgrade-pdfs li { position: relative; padding-left: 1.6rem; line-height: 1.4; color: var(--grijs); }
.upgrade-pdfs li::before { content: ""; position: absolute; left: 0; top: .2rem; width: 1.05rem; height: 1.05rem; border-radius: 50%;
  background: var(--blauw) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.3l3 3 6-6.3' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; }
.upgrade-pdfs strong { color: var(--zee); display: block; }
.upgrade-pdf .knoppen { margin: 0; }
.upgrade-noot { font-size: .9rem; color: var(--grijs); margin: .6rem 0 0; }

.pdf-stapel { position: relative; height: 15rem; perspective: 1100px; margin: 0 auto; width: 100%; max-width: 20rem; }
@media (min-width: 44rem) { .pdf-stapel { height: 19rem; max-width: 24rem; } }
.pdf-blad { position: absolute; top: 50%; left: 50%; width: 9.5rem; aspect-ratio: 600 / 850; border-radius: 4px; background: var(--wit);
  transform-style: preserve-3d; transition: transform .45s cubic-bezier(.2, .8, .2, 1);
  box-shadow: 0 1px 0 rgb(0 0 0 / .05), 2px 2px 0 #f1f1ee, 3px 3px 0 rgb(0 0 0 / .06), 0 18px 30px -10px rgb(12 42 32 / .35), 0 4px 10px rgb(12 42 32 / .12); }
@media (min-width: 44rem) { .pdf-blad { width: 11.75rem; } }
.pdf-blad img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 4px; }
.pdf-blad::after { content: ""; position: absolute; inset: 0; border-radius: 4px; background: linear-gradient(115deg, rgb(255 255 255 / .35) 0%, rgb(255 255 255 / 0) 35%, rgb(0 0 0 / 0) 70%, rgb(0 0 0 / .08) 100%); pointer-events: none; }
.pdf-label { position: absolute; top: .45rem; right: -.35rem; z-index: 1; padding: .1rem .4rem; border-radius: 3px; background: #c8372d; color: #fff; font-size: .62rem; font-weight: 800; letter-spacing: .05em; box-shadow: 0 2px 4px rgb(0 0 0 / .2); }
.pdf-stapel-3 .pdf-blad:nth-child(1) { transform: translate(-108%, -52%) rotateY(24deg) rotateZ(-9deg); z-index: 1; }
.pdf-stapel-3 .pdf-blad:nth-child(2) { transform: translate(-50%, -54%) rotateX(6deg) translateZ(30px); z-index: 3; }
.pdf-stapel-3 .pdf-blad:nth-child(3) { transform: translate(8%, -48%) rotateY(-24deg) rotateZ(8deg); z-index: 2; }
.pdf-stapel-2 .pdf-blad:nth-child(1) { transform: translate(-85%, -50%) rotateY(20deg) rotateZ(-7deg); z-index: 1; }
.pdf-stapel-2 .pdf-blad:nth-child(2) { transform: translate(-15%, -52%) rotateY(-14deg) rotateZ(5deg); z-index: 2; }
.pdf-stapel-1 .pdf-blad { transform: translate(-50%, -50%) rotateY(-14deg) rotateZ(3deg); }
.upgrade-pdf:hover .pdf-stapel-3 .pdf-blad:nth-child(1) { transform: translate(-122%, -54%) rotateY(26deg) rotateZ(-12deg); }
.upgrade-pdf:hover .pdf-stapel-3 .pdf-blad:nth-child(2) { transform: translate(-50%, -60%) rotateX(4deg) translateZ(50px); }
.upgrade-pdf:hover .pdf-stapel-3 .pdf-blad:nth-child(3) { transform: translate(22%, -50%) rotateY(-26deg) rotateZ(11deg); }
@media (prefers-reduced-motion: reduce) { .pdf-blad { transition: none; } }
@media (max-width: 43.99rem) { .upgrade-pdf .pdf-stapel { order: -1; height: 15rem; margin-top: .25rem; } .upgrade-pdf .pdf-blad { width: 8rem; }
  .upgrade-pdf::after { -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 45%); mask-image: linear-gradient(to bottom, #000 0%, transparent 45%); }
  .upgrade-pdf { background: radial-gradient(circle at 50% 18%, var(--wit) 0, rgb(255 255 255 / 0) 45%), var(--vlak); } }

/* ===== Dashboardtest in de oefenomgeving (lib/dashboard.php): vormen a, b en c ===== */
.dash { margin: 1.5rem 0 2rem; }
.dash h2, .dash h3 { margin: 0; }
.da-label { font-size: .82rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--blauw); margin: 0; }
.da-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.da-chips li { margin: 0; background: var(--vlak); border-radius: 999px; padding: .3rem .7rem; font-size: .82rem; font-weight: 600; color: var(--inkt); }
.da-chips li.is-groen { background: var(--blauw-licht); }
.da-link { font-weight: 700; color: var(--zee); }
.da-stil { font-weight: 600; color: var(--grijs); opacity: .8; }
.da-tekst { color: var(--grijs); margin: 0; font-size: 1rem; }

/* Ring */
.dring-vak { position: relative; flex: none; line-height: 0; }
.dring-vak b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.6rem; font-weight: 800; line-height: 1; }
.dring-klein b { font-size: 1.05rem; }
.dring-rail { stroke: var(--blauw-licht); }
.dring-rail.is-donker { stroke: rgba(255, 255, 255, .14); }
.dring-boog { stroke: var(--signaal); }
.dring-vak.is-groen .dring-boog { stroke: var(--goed); }
.dash-b .dring-boog { stroke: var(--blauw); }

/* Tekeningen (decoratief) */
.dteken { width: 8.25rem; padding: .6rem .75rem; border-radius: 6px; background: var(--wit); border: 1px solid var(--lijn); box-shadow: 0 6px 14px rgba(19, 59, 46, .08); display: flex; flex-direction: column; gap: .38rem; transform: rotate(-3deg); margin-bottom: .4rem; }
.dteken-fout { transform: rotate(2deg); }
.dteken-kop { display: flex; justify-content: space-between; gap: .4rem; font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--inkt); }
.dteken-tijd { color: #a86a00; }
.dteken-rij { display: flex; gap: .3rem; align-items: center; }
.dteken-nr { font-size: .56rem; font-weight: 700; width: .75rem; color: var(--inkt); }
.dteken-bol { width: .62rem; height: .62rem; border-radius: 50%; border: 1.5px solid #9fbcae; }
.dteken-bol.is-vol { background: var(--zee); border-color: var(--zee); }
.dteken-bol.is-goud { background: var(--signaal); border-color: var(--signaal); }
.dteken-optie { display: flex; align-items: center; gap: .4rem; padding: .2rem .4rem; border-radius: 6px; font-size: .62rem; }
.dteken-optie span { height: 4px; flex: 1; border-radius: 99px; }
.dteken-optie.is-fout { background: #fbe4e1; color: #b3261e; }
.dteken-optie.is-fout span { background: #e9a9a3; }
.dteken-optie.is-goed { background: #e3f3ea; color: #1f7a52; }
.dteken-optie.is-goed span { background: #9fd2b8; }
.dteken-noot { font-size: .56rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #a86a00; }

/* Vorm a: rustig overzicht */
.da-raster { display: grid; gap: 1rem; }
@media (min-width: 60rem) { .da-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } }
.da-klaar { background: var(--zee); color: var(--wit); border-radius: 6px; padding: 1.5rem; display: flex; flex-direction: column; gap: 1.1rem; }
.da-klaar .da-label { color: #bfe3cf; }
.da-klaar-rij { display: flex; align-items: center; gap: 1.2rem; }
.da-klaar-rij p { margin: 0; color: #e4f1ea; font-size: 1rem; }
.da-klaar .dring-vak b { color: var(--wit); }
.da-klaar .knop { align-self: flex-start; }
.da-kaart { background: var(--wit); border: 1px solid var(--lijn); border-radius: 6px; padding: 1.5rem; display: flex; flex-direction: column; gap: .85rem; }
.da-kaart h2 { font-size: 1.3rem; }
.da-kaart .da-tekst { flex: 1; }
.da-getal { font-size: 2.4rem; font-weight: 800; line-height: 1; margin: 0; }
.da-fc { margin-top: 1.25rem; background: var(--wit); border: 1px solid var(--lijn); border-radius: 6px; padding: 1.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 2.5rem; }
.da-fc-tekst { flex: 1 1 16rem; display: flex; flex-direction: column; gap: .6rem; }
.da-fc-tekst h2 { font-size: 1.45rem; }
.da-fc-tekst p { margin: 0; color: var(--grijs); }
.dwaaier { position: relative; display: block; width: 18rem; max-width: 100%; height: 11rem; flex: none; text-decoration: none; color: var(--inkt); }
.dwaaier-blad, .dwaaier-kaart { position: absolute; top: .6rem; left: 1.5rem; width: calc(100% - 2.5rem); height: 9.5rem; border-radius: 6px; }
.dwaaier-blad:nth-child(1) { background: #d5ebdf; transform: rotate(-7deg) translate(-.6rem, .6rem); }
.dwaaier-blad:nth-child(2) { background: #9fd2b8; transform: rotate(-2deg) translate(-.2rem, .2rem); }
.dwaaier-kaart { background: var(--wit); border: 1px solid #cfe2d8; box-shadow: 0 14px 30px rgba(19, 59, 46, .14); transform: rotate(3deg); padding: 1rem 1.1rem; display: flex; flex-direction: column; justify-content: space-between; transition: transform .2s; }
.dwaaier:hover .dwaaier-kaart { transform: rotate(1deg) translateY(-3px); }
.dwaaier-label { font-size: .7rem; font-weight: 700; color: var(--blauw); text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dwaaier-voor { font-size: 1.02rem; font-weight: 800; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.dwaaier-hint { font-size: .78rem; color: var(--grijs); }
@media (max-width: 40rem) {
  .da-fc { flex-direction: column; align-items: stretch; }
  .dwaaier { margin: 0 auto; }
  .da-fc .knop, .da-klaar .knop { align-self: stretch; text-align: center; }
  .da-kaart { display: block; }
  .da-kaart > * + * { margin-top: .75rem; }
  .da-kaart .dteken { float: right; width: 6.75rem; margin: 0 0 .5rem .9rem; }
  .da-kaart .da-chips { clear: right; }
  .da-kaart .da-link, .da-kaart .da-stil { display: inline-block; }
}

/* Vorm b: kaartstapel centraal */
.db-raster { display: grid; gap: 1rem; }
@media (min-width: 60rem) { .db-raster { grid-template-columns: minmax(0, 1fr) 21rem; gap: 1.75rem; } }
.db-stapel { background: var(--blauw-licht); border-radius: 6px; padding: 1.5rem 1.1rem; display: flex; flex-direction: column; gap: 1.4rem; }
@media (min-width: 60rem) { .db-stapel { padding: 2.25rem; } }
.db-kop { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: .5rem 1rem; }
.db-kop h2 { font-size: 1.6rem; letter-spacing: -.01em; }
.db-teller { font-size: .9rem; font-weight: 600; color: var(--grijs); flex: none; }
.db-kaart-vak { position: relative; display: grid; place-items: center; padding: 1.25rem 0; text-decoration: none; color: var(--inkt); }
.db-blad { position: absolute; width: min(32rem, 92%); height: calc(100% - 2.5rem); border-radius: 6px; }
.db-blad:nth-child(1) { background: #c7e4d4; transform: translate(-1.2rem, .9rem) rotate(-5deg); }
.db-blad:nth-child(2) { background: #a3d4ba; transform: translate(-.5rem, .45rem) rotate(-2deg); }
.db-kaart { position: relative; width: min(32rem, 92%); min-height: 17rem; border-radius: 6px; background: var(--wit); box-shadow: 0 22px 44px rgba(19, 59, 46, .16); padding: 1.6rem; display: flex; flex-direction: column; gap: .9rem; transition: transform .2s; }
.db-kaart-vak:hover .db-kaart { transform: translateY(-4px); }
.db-kaart-kop { display: flex; align-items: center; gap: .6rem; font-size: .82rem; font-weight: 600; color: var(--grijs); }
.db-stapel-label { background: var(--zee); color: var(--wit); font-size: .72rem; font-weight: 700; padding: .25rem .55rem; border-radius: 6px; }
.db-voor { flex: 1; font-size: 1.45rem; font-weight: 800; line-height: 1.3; letter-spacing: -.01em; margin-top: .75rem; }
.db-hint { font-size: .85rem; font-weight: 700; color: var(--blauw); }
.db-start { align-self: center; }
.db-zij { display: flex; flex-direction: column; gap: .9rem; }
.db-blok { border: 1px solid var(--lijn); border-radius: 6px; padding: 1.15rem; background: var(--wit); color: var(--inkt); text-decoration: none; }
.db-blok h2 { font-size: 1.05rem; }
.db-klaar { display: flex; align-items: center; gap: 1rem; }
.db-klaar p { margin: .2rem 0 0; font-size: .88rem; color: var(--grijs); }
.db-balk { display: flex; height: 10px; border-radius: 99px; overflow: hidden; background: var(--vlak); margin: .6rem 0; }
.db-balk .is-ken { background: var(--blauw); }
.db-balk .is-bezig { background: #9fd2b8; }
.db-balk .is-nieuw { background: #d5ebdf; }
.db-legenda { display: flex; justify-content: space-between; gap: .5rem; margin: 0; font-size: .78rem; font-weight: 600; color: var(--grijs); }
a.db-blok:hover { border-color: var(--blauw); color: var(--inkt); }
.db-proef { background: var(--zee); border-color: var(--zee); color: var(--wit); display: grid; grid-template-columns: 1fr auto; gap: .2rem 1rem; align-items: center; }
a.db-proef:hover { background: var(--zee-licht); color: var(--wit); }
.db-proef-kop { font-weight: 700; font-size: 1.05rem; }
.db-proef-meta { grid-row: 2; font-size: .85rem; color: #bfe3cf; }
.db-proef-knop { grid-row: 1 / span 2; grid-column: 2; background: var(--signaal); color: var(--signaal-tekst); font-weight: 700; font-size: .9rem; padding: .6rem .95rem; border-radius: 6px; }
.db-fouten { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.db-fouten > span:first-child { display: flex; flex-direction: column; gap: .15rem; }
.db-fouten-kop { font-weight: 700; }
.db-fouten-sub { font-size: .85rem; color: var(--grijs); }
.db-fouten-getal { font-size: 1.8rem; font-weight: 800; }
.db-zij .knop { text-align: center; }
@media (max-width: 59.99rem) { .db-zij { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .db-zij > :nth-child(n+2) { grid-column: 1 / -1; } .db-klaar { grid-column: 1 / -1; } .db-kop h2 { font-size: 1.35rem; } .db-voor { font-size: 1.3rem; } }

/* Dashboard (één vorm op alle sites, besluit Gijs 27 okt 2026): waar je staat, de route en tabbladen. */
.dc-band { background: var(--zee); color: var(--wit); border-radius: 6px; padding: 1.5rem 1.4rem 4.5rem; display: grid; gap: .55rem; }
.dc-label { margin: 0; font-size: .85rem; font-weight: 600; color: #bfe3cf; }
.dc-band h2 { color: var(--wit); font-size: 1.6rem; letter-spacing: -.01em; margin: 0; }
.dc-trap { list-style: none; margin: .35rem 0 0; padding: 0; display: flex; gap: .35rem; max-width: 32rem; }
.dc-trap li { flex: 1; margin: 0; text-align: center; font-size: .82rem; font-weight: 600; line-height: 1.25; padding: .5rem .35rem; border-radius: 6px; background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .72); }
.dc-trap li.is-gehaald { background: rgba(255, 255, 255, .22); color: var(--wit); }
.dc-trap li.is-aan { background: var(--signaal); color: var(--signaal-tekst); font-weight: 800; }
.dc-band.is-stap-3 .dc-trap li.is-aan { background: #3fbf7f; color: #06301b; }
.dc-advies { margin: .35rem 0 0; color: #e4f1ea; font-size: 1rem; max-width: 46rem; }
.dc-stappen { list-style: none; margin: -3.25rem .75rem 0; padding: 0; display: grid; gap: .9rem; position: relative; }
@media (min-width: 60rem) { .dc-stappen { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); margin: -3.25rem 1.5rem 0; } }
.dc-stappen li { margin: 0; background: var(--wit); border: 1px solid var(--lijn); border-radius: 6px; padding: 1.2rem; display: flex; flex-direction: column; gap: .6rem; }
.dc-stappen li.is-nu { border: 2px solid var(--signaal); box-shadow: 0 16px 36px rgba(19, 59, 46, .14); }
.dc-stappen h3 { font-size: 1.1rem; }
.dc-stappen p { margin: 0; font-size: .92rem; color: var(--grijs); flex: 1; }
.dc-stappen .knop, .dc-stappen .da-link { align-self: flex-start; }
.dc-stap-kop { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.dc-nr { width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: var(--blauw-licht); color: var(--blauw); }
li.is-nu .dc-nr { background: var(--signaal); color: var(--signaal-tekst); }
li.is-af .dc-nr { background: var(--goed); position: relative; }
li.is-af .dc-nr::after { content: ""; width: .6rem; height: .32rem; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) translate(1px, -1px); }
.dc-nu { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8a5600; }
/* Telefoon en tablet: de route als korte lijst, alleen de volgende stap open. */
@media (max-width: 59.99rem) {
  .dc-band { padding: 1.3rem 1.1rem 4rem; }
  .dc-band h2 { font-size: 1.35rem; }
  .dc-advies { font-size: .95rem; }
  .dc-stappen { margin: -3rem 0 0; gap: 0; background: var(--wit); border: 1px solid var(--lijn); border-radius: 6px; padding: .35rem; box-shadow: 0 12px 30px rgba(19, 59, 46, .1); }
  .dc-stappen li { border: 0; border-radius: 6px; padding: .6rem .7rem; display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; align-items: center; gap: .15rem .75rem; }
  .dc-stappen li + li { border-top: 1px solid var(--lijn); border-top-left-radius: 0; border-top-right-radius: 0; }
  .dc-stap-kop { display: contents; }
  .dc-stappen h3 { font-size: 1rem; grid-column: 2; }
  .dc-stappen li:not(.is-nu) p { display: none; }
  .dc-stappen li:not(.is-nu) .da-link { grid-column: 3; font-size: .9rem; white-space: nowrap; }
  .dc-stappen li.is-nu { grid-template-columns: 2rem minmax(0, 1fr); border: 2px solid var(--signaal); box-shadow: none; padding: .8rem .8rem .9rem; margin: .2rem 0; }
  .dc-stappen li.is-nu + li { border-top: 0; }
  .dc-stappen li.is-nu .dc-nr { grid-row: 1 / 3; align-self: start; }
  .dc-stappen li.is-nu .dc-nu, .dc-stappen li.is-nu h3, .dc-stappen li.is-nu p { grid-column: 2; }
  .dc-stappen li.is-nu .knop { grid-column: 1 / -1; align-self: stretch; text-align: center; margin-top: .45rem; }
}

/* Tabbladen onder de route. Zonder JavaScript staan de panelen onder elkaar. */
.dtabs { margin: 2.25rem 0 0; }
.dtabs-lijst { display: flex; gap: .15rem; border-bottom: 2px solid var(--lijn); margin: 0 0 1.4rem; overflow-x: auto; scrollbar-width: none; }
.dtabs-lijst::-webkit-scrollbar { display: none; }
.dtabs-lijst button { flex: none; background: none; border: 0; border-bottom: 3px solid transparent; margin: 0 0 -2px; padding: .75rem .9rem; min-height: 44px; font: inherit; font-weight: 700; color: var(--grijs); cursor: pointer; white-space: nowrap; }
.dtabs-lijst button:hover { color: var(--inkt); }
.dtabs-lijst button[aria-selected="true"] { color: var(--inkt); border-bottom-color: var(--signaal); }
.dtabs-lijst button:focus-visible { outline: 3px solid var(--blauw); outline-offset: -3px; border-radius: 6px 6px 0 0; }
@media (max-width: 30rem) { .dtabs-lijst button { font-size: .92rem; padding: .7rem .55rem; } }
.dtabs-lijst.is-schuif { -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); }
.dtabs-lijst.is-schuif.is-eind { -webkit-mask-image: none; mask-image: none; }
.dtab-paneel + .dtab-paneel { margin-top: 2.75rem; }
.tabs-aan .dtab-paneel + .dtab-paneel { margin-top: 0; }
.tabs-aan .dtab-kop { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tabs-aan .dc-fc-kop { justify-content: flex-end; }
.dtab-paneel:focus-visible { outline: 3px solid var(--blauw); outline-offset: 4px; }
.dash-casus { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.25rem; background: var(--vlak); border-radius: 6px; padding: 1rem 1.2rem; margin: 0 0 1.25rem; }
.dash-casus h3 { margin: 0; font-size: 1.1rem; }
.dash-casus p { margin: .25rem 0 0; }
.proef-start { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.25rem; background: var(--vlak); border-radius: 6px; padding: 1rem 1.2rem; margin: 0 0 1.5rem; }
.proef-start p { margin: 0; flex: 1 1 18rem; }
.cert-blok { margin-top: 2rem; }
.cert-blok h3 { font-size: 1.2rem; }
.ow-code { display: inline-block; margin-left: .35rem; font-size: .72rem; font-weight: 700; color: var(--grijs); background: var(--vlak); border: 1px solid var(--lijn); border-radius: 4px; padding: 0 .35rem; vertical-align: 2px; letter-spacing: .02em; }

.dc-fc-kop { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 1rem; }
.dc-fc-kop h2 { margin: 0; }
.dc-fc-kop a { font-weight: 600; }
.dc-stapels { list-style: none; margin: 0; padding: 0 0 .5rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem .9rem; }
@media (min-width: 48rem) { .dc-stapels { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.dc-stapels li { margin: 0; }
.dc-stapels a { position: relative; display: flex; flex-direction: column; gap: .25rem; min-height: 6.5rem; padding: .9rem 1rem; border-radius: 6px; background: var(--wit); border: 1px solid #cfe2d8; color: var(--inkt); text-decoration: none; box-shadow: 0 6px 0 -1px #c7e4d4, 0 6px 0 0 #cfe2d8; transition: transform .15s; }
.dc-stapels a:hover { transform: translateY(-2px); }
.dc-stapels .ow-nr { width: 34px; height: 42px; margin: -.2rem 0 .1rem -.15rem; }
.dc-stapels .ow-icoon { width: 20px; height: 20px; }
.dc-stapel-titel { font-weight: 700; line-height: 1.25; flex: 1; overflow-wrap: break-word; hyphens: auto; }
.dc-stapel-aantal { font-size: .78rem; color: var(--grijs); }
/* Smalle telefoon: iets kleiner, zodat lange onderwerpnamen (Veiligheidsvoorzieningen) minder vaak afbreken. */
@media (max-width: 26rem) { .dc-stapels { gap: 1rem .7rem; } .dc-stapels a { padding: .8rem .75rem; } .dc-stapel-titel { font-size: .94rem; } }

@media (prefers-reduced-motion: reduce) { .dwaaier-kaart, .db-kaart, .dc-stapels a { transition: none; } }

/* Meer examens op een site: examenwissel (oefenomgeving en kooppagina), examenoverzicht en examenpagina. */
.examen-wissel { margin: 0 0 1.5rem; min-width: 0; max-width: 100%; }
.examen-wissel ul { list-style: none; margin: 0; padding: 0 0 .25rem; display: flex; gap: .5rem; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.examen-wissel li { margin: 0; flex: 0 0 auto; }
.examen-wissel a { display: inline-flex; align-items: center; gap: .35rem; min-height: 2.75rem; padding: .45rem 1rem; border: 2px solid var(--lijn); border-radius: 999px; font-weight: 700; color: var(--inkt); text-decoration: none; background: var(--wit); white-space: nowrap; }
.examen-wissel a:hover { border-color: var(--zee-licht); }
.examen-wissel a.is-actief, .examen-wissel a[aria-current] { background: var(--zee); border-color: var(--zee); color: var(--wit); }
.examen-wissel-erbij a { border-style: dashed; color: var(--zee-licht); }
/* Zachte vervaging aan de rand waar nog tabs staan (conversie.js zet de klassen; zonder JavaScript gewoon scrollbaar). */
.examen-wissel.is-meer-rechts ul { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent); }
.examen-wissel.is-meer-links ul { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 3rem), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 3rem), transparent); }
.examen-wissel.is-meer-links.is-meer-rechts ul { -webkit-mask-image: linear-gradient(to right, transparent, #000 3rem, #000 calc(100% - 3rem), transparent); mask-image: linear-gradient(to right, transparent, #000 3rem, #000 calc(100% - 3rem), transparent); }
.examen-wissel-bundel a { border-color: var(--signaal); }
.examen-wissel-noot { font-weight: 600; font-size: .85rem; opacity: .8; }
.examens-overzicht { list-style: none; margin: 1.5rem 0; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 48rem) { .examens-overzicht { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 70rem) { .examens-overzicht { grid-template-columns: repeat(3, 1fr); } }
.examens-overzicht-kaart { margin: 0; padding: 1.25rem; border: 1px solid var(--lijn); border-radius: var(--radius); background: var(--wit); }
.examens-overzicht-kaart h3 { margin: 0 0 .35rem; font-size: 1.15rem; }
.examens-overzicht-kaart h3 a { display: inline-flex; align-items: center; min-height: 2.75rem; margin: -.6rem 0; }
.examens-erbij-bundel { margin: 0 0 1rem; }
.examens-overzicht-meta { color: var(--grijs); margin: 0 0 .5rem; }
.examens-overzicht-links { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: .75rem 0 0; }
.examen-kenmerken { list-style: none; margin: 1.5rem 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
@media (min-width: 48rem) { .examen-kenmerken { grid-template-columns: repeat(4, 1fr); } }
.examen-kenmerken li { margin: 0; padding: 1rem; border-radius: var(--radius); background: var(--vlak); display: flex; flex-direction: column; }
.examen-kenmerken b { font-size: 1.6rem; line-height: 1.1; }
.examen-kenmerken span { color: var(--grijs); }
.account-trainingen { margin: 0 0 1rem; padding-left: 1.2rem; }
.examen-onderwerpen { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: .6rem; }
@media (min-width: 48rem) { .examen-onderwerpen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.examen-onderwerpen li { margin: 0; display: flex; align-items: center; gap: .75rem; padding: .8rem 1rem; border: 1px solid var(--lijn); border-radius: 6px; background: var(--wit); }
.examen-onderwerpen .ow-titel { flex: 1 1 auto; min-width: 0; font-size: 1rem; overflow-wrap: anywhere; }
.examen-pagina h1, .training-kop h3 { overflow-wrap: break-word; hyphens: auto; min-width: 0; }
.examen-onderwerpen .ow-meta { white-space: nowrap; }
.kp-examens { margin-top: .75rem; }

/* ===================================================================
   Quiz stijl D (keuze Gijs, okt 2026)
   Vraagscherm op een donker vlak in de huisstijlkleur, vraag en antwoorden op een witte kaart, bovenaan een
   streepje per vraag. Antwoordrijen zonder letterblokjes; na antwoorden staat "Waarom dit antwoord" direct
   onder het goede antwoord. Lichte variant (zonder donker vlak): mini-oefentest in artikelen, toetsvraag na
   flashcards, de demo op de homepage en het terugkijken na een proefexamen.
   Kleuren per site via de variabelen hieronder; standaard uit de huisstijl (--zee, --blauw, --zee-licht).
   ========================================================================== */
:root {
  --quiz-donker: var(--zee);          /* achtergrond vraagscherm */
  --quiz-accent: var(--blauw);        /* streepje goed beantwoord (op donker, minstens 3:1) */
  --quiz-accent-vol: var(--zee-licht); /* rand en kop van het goede antwoord, wit erop minstens 4,5:1 */
  --quiz-goed: #3fbf7a;               /* streepje goed beantwoord: groen (wens Gijs 27 okt 2026: groen goed, rood fout, overal) */
  --quiz-goed-vol: var(--goed);       /* rand en kop van het goede antwoord, wit erop minstens 4,5:1 */
  --quiz-rood: #e05a4f;               /* streepje fout beantwoord */
  --quiz-rij: #f2f5f4;                /* overige antwoorden na nakijken */
  --quiz-rij-tekst: #4b6366;
  --quiz-fout-tekst: #6b2a25;
  --quiz-fout-label: #b4312a;
}

/* Donker vlak */
.qd {
  background: var(--quiz-donker); color: var(--wit); border-radius: 6px;
  padding: 1.15rem .85rem 1.25rem; display: flex; flex-direction: column; gap: 1.1rem;
}
@media (min-width: 40rem) { .qd { padding: 2rem 1.9rem 2rem; gap: 1.35rem; } }
.quiz-kader.is-qd { background: none; border: 0; box-shadow: none; padding: 0; }
/* Ruimte vasthouden terwijl de vragen laden, zodat de pagina niet verspringt als de eerste vraag (vaak met beeld) binnenkomt
   (CLS 0,29 tot 0,37 op de gratis test van scooter en motor, 2 nov 2026; VCA had dit al in site.css met 36rem). */
[data-quiz-inhoud]:has(> .quiz-laden) { min-height: 30rem; }
.qd > * { margin: 0; }

/* Voortgang: een streepje per vraag */
.qd-kop { display: flex; flex-direction: column; gap: .6rem; }
/* Reisbaan boven de streepjes: taxi, schip of logo reist mee naar de laatste vraag (--quiz-reis in site.css). */
.qd-reis { position: relative; height: 38px; margin: 0 30px; }
.qd-reis-grond { position: absolute; left: -30px; right: -30px; bottom: 3px; height: 2px; border-radius: 2px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .35) 0 6px, transparent 6px 12px); }
.qd-reis-spoor { position: absolute; left: -30px; bottom: 3px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .85); transition: width 1.1s ease-in-out; }
.qd-reis-ding { position: absolute; bottom: 6px; transform: translateX(-50%); transition: left 1.1s ease-in-out; line-height: 0; }
.qd-reis-dobber { display: block; }
.qd-reis-dobber svg, .qd-reis-dobber img { display: block; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .25)); }
.qd-reis-logo .qd-reis-dobber img { border-radius: 6px; box-shadow: 0 0 0 2px rgba(255, 255, 255, .85); }
.qd-reis-logo .is-onderweg .qd-reis-dobber { animation: qd-hop .55s ease-in-out 2; }
/* Taxi: asfalt met een witte middenstreep die meeloopt. */
.qd-reis-taxi .qd-reis-grond { bottom: 0; height: 10px; border-radius: 3px; background: #2a3342; }
.qd-reis-taxi .qd-reis-grond::after { content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 2px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .7) 0 10px, transparent 10px 20px); }
.qd-reis-taxi .qd-reis-spoor { display: none; }
.qd-reis-taxi .qd-reis-ding { bottom: 4px; }
.qd-reis-taxi .is-onderweg .qd-reis-dobber { animation: qd-rij .25s ease-in-out 4; }
/* Schip: golven die zacht bewegen en een kielzog achter het schip. */
.qd-reis-schip .qd-reis-grond { height: 8px; bottom: 2px; opacity: .55;
  background: radial-gradient(circle at 6px -2px, transparent 5px, rgba(120, 200, 255, .9) 5.5px, rgba(120, 200, 255, .9) 7px, transparent 7.5px) 0 0 / 12px 8px repeat-x;
  animation: qd-golf 2.4s linear infinite; }
.qd-reis-schip .qd-reis-spoor { bottom: 5px; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .7)); }
.qd-reis-schip .qd-reis-dobber { animation: qd-dobber 2.2s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes qd-golf { to { background-position: -12px 0; } }
@keyframes qd-dobber { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-2px) rotate(1.5deg); } }
@keyframes qd-hop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes qd-rij { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1px); } }
@media (prefers-reduced-motion: reduce) {
  .qd-reis-grond, .qd-reis-dobber, .qd-reis-ding .qd-reis-dobber { animation: none !important; }
  .qd-reis-ding, .qd-reis-spoor { transition: none; }
}
.qd-voortgang { display: grid; gap: 4px; }
.qd-voortgang.is-smal { gap: 2px; }
.qd-voortgang span { display: block; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .2); transition: background-color .2s ease; }
.qd-voortgang .is-goed { background: var(--quiz-goed); }
.qd-voortgang .is-fout { background: var(--quiz-rood); }
.qd-voortgang .is-nu { background: var(--wit); }
.qd-voortgang.is-doorlopend { display: flex; height: 5px; border-radius: 3px; overflow: hidden; background: rgba(255, 255, 255, .2); }
.qd-voortgang.is-doorlopend span { border-radius: 0; flex: none; }
.qd-stand { display: flex; justify-content: space-between; gap: 1rem; font-size: .85rem; line-height: 1.4; }
.qd-stand-nr { font-weight: 700; color: var(--wit); }
.qd-stand-goed { color: rgba(255, 255, 255, .8); text-align: right; }

/* Witte kaart */
.qd-kaart, .qd-examen .examen-vraagkaart {
  background: var(--wit); color: var(--inkt); border-radius: 6px; border: 0; box-shadow: none;
  padding: 1.25rem 1rem 1.1rem; min-width: 0;
}
@media (min-width: 40rem) { .qd-kaart, .qd-examen .examen-vraagkaart { padding: 1.6rem 1.5rem 1.4rem; } }
.qd-kaart .quiz-onderwerp { margin: 0 0 .35rem; font-size: .9rem; }
.qd .quiz-vraag { font-size: clamp(1.2rem, 1.05rem + .8vw, 1.45rem); line-height: 1.35; font-weight: 800; color: var(--inkt); margin: 0 0 1.1rem; }
.qd .quiz-vraag:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: 4px; }
.qd .opties { margin: 0; }
.qd .meer-controleer { margin: 1rem 0 0; }
.qd .getal-form { margin: 0; }
.qd .casus { margin-bottom: 1rem; }
.qd .melding { margin-top: 1rem; }

/* Antwoordrijen (overal: quiz, proefexamen, terugkijken, mini-oefentest, toetsvraag) */
.opties { gap: .5rem; }
.optie {
  border-radius: 6px; border: 2px solid var(--lijn); box-shadow: none;
  gap: .75rem; padding: .8rem .9rem; min-height: 3.5rem; font-size: 1.05rem; line-height: 1.4; align-items: center;
}
.optie-teken { flex: none; width: 22px; height: 22px; display: grid; place-items: center; border: 2px solid var(--lijn); border-radius: 50%; }
.opties-meer .optie-teken { border-radius: 5px; }
.optie.is-gekozen { border-color: var(--quiz-accent-vol); background: var(--wit); box-shadow: inset 0 0 0 1px var(--quiz-accent-vol); }
.optie.is-gekozen .optie-teken { border-color: var(--quiz-accent-vol); background: var(--quiz-accent-vol); box-shadow: inset 0 0 0 3px var(--wit); }
.opties-meer .optie.is-gekozen .optie-teken { box-shadow: none; position: relative; }
.opties-meer .optie.is-gekozen .optie-teken::after {
  content: ""; width: 5px; height: 10px; border: solid var(--wit); border-width: 0 2.5px 2.5px 0; transform: translate(0, -1px) rotate(45deg);
}
@media (hover: hover) {
  .optie:hover:not([disabled]) { border-color: var(--quiz-accent-vol); background: var(--wit); }
  .optie:hover:not([disabled]) .optie-teken { border-color: var(--quiz-accent-vol); }
}
.optie:active:not([disabled]) { background: var(--vlak); }
.optie:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.qd-icoon { width: 22px; height: 22px; display: block; }

/* Na nakijken */
.is-nagekeken .optie-teken { border: 0; border-radius: 0; background: none; box-shadow: none; }
.is-nagekeken .optie-teken::after { display: none; }
.optie.is-rest { background: var(--quiz-rij); border-color: var(--quiz-rij); color: var(--quiz-rij-tekst); box-shadow: none; }
.optie.is-fout { background: var(--fout-vlak); border-color: var(--fout-vlak); color: var(--quiz-fout-tekst); box-shadow: none; }
.optie.is-fout .optie-teken { color: var(--quiz-fout-label); }
.optie-tekst .optie-status { display: block; margin: .2rem 0 0; padding: 0; font-size: .8rem; font-weight: 700; color: var(--quiz-fout-label); white-space: normal; text-align: left; max-width: none; }
.opties li.is-goed { border: 2px solid var(--quiz-goed-vol); border-radius: 6px; overflow: hidden; background: var(--wit); }
.optie.is-goed { background: var(--quiz-goed-vol); border: 0; border-radius: 0; color: var(--wit); font-weight: 700; box-shadow: none; min-height: 0; }
.optie.is-goed .optie-teken { color: var(--wit); }
.optie.is-goed .optie-status { color: var(--wit); font-weight: 700; opacity: .9; }
.optie[disabled] { opacity: 1; cursor: default; }
.terugkijk .optie, .opties-terug .optie { cursor: default; min-height: 3.25rem; }

/* Waarom dit antwoord: direct onder het goede antwoord, in hetzelfde blok */
.optie-waarom { padding: .85rem 1rem 1rem; background: var(--wit); color: var(--inkt); }
@media (min-width: 30rem) { .opties li .optie-waarom { padding-left: 3rem; } }
.optie-waarom-los { border: 2px solid var(--quiz-goed-vol); border-radius: 6px; margin: .75rem 0 0; }
/* Oefenen op een laptop (64rem en breder): breder blok, uitleg rechts naast de vraag (besluit Gijs 27 okt 2026).
   quiz.js zet .met-zij op de kaart en zet de uitleg na het antwoord in de rechterkolom. */
@media (min-width: 64rem) {
  main.oefen-breed { max-width: calc(70rem + 2 * var(--rand)); }
  main.oefen-breed > :not(.quiz) { max-width: var(--tekstbreedte); }
  main.oefen-breed .quiz { max-width: none; }
  .qd-kaart.met-zij { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: 2rem; align-items: start; }
  .qd-kaart.met-zij > * { grid-column: 1; }
  .qd-kaart.met-zij > .optie-waarom-zij, .qd-kaart.met-zij > .qd-zij-leeg { grid-column: 2; grid-row: 1 / span 12; margin: 0; }
  .optie-waarom-zij { border: 2px solid var(--quiz-goed-vol); border-radius: 6px; padding: 1.1rem 1.25rem 1.2rem; }
  .qd-zij-leeg { border: 2px dashed var(--lijn); border-radius: 6px; padding: 1.1rem 1.25rem; color: var(--grijs); min-height: 8rem; display: grid; place-items: center; text-align: center; }
  .qd-zij-leeg p { margin: 0; font-size: .95rem; }
}
.optie-waarom > p { margin: 0; overflow-wrap: anywhere; hyphens: auto; }
.optie-waarom > p + p { margin-top: .5rem; }
.optie-waarom-kop { font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--quiz-goed-vol); }
.optie-waarom-oordeel { font-weight: 800; font-size: 1rem; }
.optie-waarom-uitleg { font-size: 1rem; line-height: 1.6; }
.optie-waarom-bron { font-size: .8rem; line-height: 1.5; color: var(--quiz-rij-tekst); }

/* Knoppen onder de kaart */
.qd-acties { display: flex; flex-direction: column; gap: .35rem; align-items: stretch; }
.qd-acties:empty { display: none; }
.qd .qd-volgende {
  width: 100%; min-height: 64px; font-size: 1.25rem; font-weight: 800; border-radius: 6px; padding: .9rem 1.25rem;
  justify-content: center; gap: .6rem; background: var(--signaal); color: var(--signaal-tekst); border-color: var(--signaal);
}
.qd .qd-volgende:hover { background: var(--signaal-hover); color: var(--signaal-tekst); }
.qd-volgende .qd-icoon { width: 24px; height: 24px; }
.qd-tweede {
  display: flex; align-items: center; justify-content: center; min-height: 44px; padding: .5rem 1rem;
  color: var(--wit); font-weight: 700; font-size: 1rem; text-decoration: underline; text-underline-offset: 3px;
}
.qd-tweede:hover { color: var(--wit); text-decoration-thickness: 2px; }
.qd .qd-volgende:focus-visible, .qd-tweede:focus-visible, .qd-examen .examen-navigatie .knop:focus-visible { outline: 3px solid var(--wit); outline-offset: 3px; }

/* Proefexamen: alleen de stijl; antwoorden ziet de kandidaat pas na het beëindigen */
.qd-examen .examen-vraagkaart.is-gemarkeerd { box-shadow: 0 0 0 3px var(--signaal); }
.qd-examen .examen-navigatie { margin-top: 0; }
.qd-examen .examen-volgende { background: var(--signaal); color: var(--signaal-tekst); border-color: var(--signaal); border-radius: 6px; }
.qd-examen .examen-volgende:hover { background: var(--signaal-hover); color: var(--signaal-tekst); }
.qd-examen .examen-vorige { border-radius: 6px; background: transparent; color: var(--wit); border-color: rgba(255, 255, 255, .6); }
.qd-examen .examen-vorige:hover { background: rgba(255, 255, 255, .1); color: var(--wit); }
.qd-examen .examen-vorige[disabled] { opacity: .45; }
.qd-examen .examen-toetsen { color: rgba(255, 255, 255, .8); margin: 0; }
.qd-examen .meer-hint { margin-top: 0; }

/* Lichte variant: mini-oefentest in artikelen en toetsvraag na flashcards */
.opties-licht { margin: 0 0 .25rem; }
.opties-licht .optie { font-size: .97rem; min-height: 44px; padding: .65rem .8rem; }
.opties-licht .optie-waarom-uitleg { font-size: .95rem; }

@media (prefers-reduced-motion: reduce) {
  .qd-voortgang span { transition: none; }
}
/* Gratis oefentest: uitleg onder de test (examenvorm, onderwerpen, vervolg, vragen) */
.gratis-uitleg { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--lijn); }
.gratis-uitleg h2 { margin-top: 1.75rem; }
.gratis-uitleg h2:first-child { margin-top: 0; }
.gratis-uitleg h3 { font-size: 1.05rem; margin: 1.25rem 0 .3rem; }
.gratis-onderwerpen { padding-left: 0; list-style-position: inside; }
.gratis-uitleg .knoppen { margin-bottom: .5rem; }

/* Staffel op de kooppagina bij meer examens: elke training erbij voor de vervolgprijs. */
.kp-staffel { margin: 1rem 0 0; font-weight: 700; }
.kp-erbij { border: 0; margin: 1.25rem 0 0; padding: 0; min-width: 0; }
.kp-erbij legend.kp-staffel { margin: 0 0 .5rem; padding: 0; }
.kp-erbij-lijst { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); column-gap: 1.5rem; border-top: 1px solid var(--lijn); }
.kp-erbij-optie { display: flex; align-items: center; gap: .65rem; min-height: 2.9rem; padding: .35rem 0; border-bottom: 1px solid var(--lijn); cursor: pointer; }
.kp-erbij-optie input { width: 1.2rem; height: 1.2rem; flex: none; accent-color: var(--zee); }
.kp-erbij-naam { flex: 1; min-width: 0; }
.kp-erbij-prijs { font-weight: 700; white-space: nowrap; }
.kp-erbij-optie.is-uit { cursor: default; color: var(--kp-zacht, #5b6b7b); }
.kp-erbij-optie.is-uit .kp-erbij-prijs { font-weight: 400; }
.kp-erbij-tip { margin: .75rem 0 0; font-weight: 700; color: var(--zee); }

/* ==========================================================================
   Het merk als watermerk (wens Gijs 24 okt 2026: het logo komt terug in de achtergrond, zoals bij Sociale Hygiëne).
   Per site in site.css: --merk-watermerk, een lijntekening van het logo voor de lichte voet onderaan elke pagina.
   Zonder dat token verandert er niets. Motieven op de homepage (patroon, foto in de vorm van het logo) staan per site.
   ========================================================================== */
.voet { background-image: var(--merk-watermerk, none); background-repeat: no-repeat; background-position: right -50px bottom -40px; background-size: 340px auto; }
@media (max-width: 39.99rem) { .voet { background-size: 240px auto; } }

/* Examentaal ('examentaal' in site.php): de vraag staat in de taal van het examen, de vertaling eronder op verzoek.
   De knop zet de klasse toon-vertaling op html (quiz.js); zonder die klasse blijven de vertalingen verborgen. */
.vertaling { display: none; }
.toon-vertaling .vertaling { display: block; }
.vertaling { margin-top: .3rem; color: var(--grijs, #4b5b55); font-size: .92em; font-weight: 400; line-height: 1.45; }
.optie-tekst .vertaling-optie { font-size: .9em; color: inherit; opacity: .85; }
.casus .vertaling-casus, .casus-paneel .vertaling-casus { margin-top: .5rem; white-space: pre-line; }
.vraag-vertaling { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; margin: .4rem 0 1rem; }
.vraag-vertaling .vertaling-vraag { margin: 0; font-size: 1rem; }
.vertaal-knop { display: inline-flex; align-items: center; min-height: 44px; padding: .35rem 1rem; border: 2px solid currentColor;
  border-radius: 999px; background: transparent; color: var(--zee, #0f1a2e); font: inherit; font-size: .92rem; font-weight: 700; cursor: pointer; }
.vertaal-knop[aria-pressed="true"] { background: var(--zee, #0f1a2e); color: #fff; border-color: var(--zee, #0f1a2e); }
.vertaal-knop:focus-visible { outline: 3px solid var(--focus, #1f5f86); outline-offset: 2px; }
.vertaal-knop[hidden] { display: none; }
.quiz-vraag:has(+ .vraag-vertaling) { margin-bottom: .25rem; }
.examentaal-noot { margin: .25rem 0 1rem; padding: .6rem .9rem; border-radius: 6px; background: var(--zon-wit, #fffbeb); font-size: 1rem; }
.toon-vertaling .vertaling-casus { padding-top: .5rem; border-top: 1px dashed var(--lijn, #ecdcaa); }

/* Officieel examen: voor welk examen je hier oefent en wie het afneemt (officieel_examen_html in layout.php). */
.officieel-examen { display: flex; gap: .7rem; align-items: flex-start; margin: 1rem 0; padding: .8rem 1rem; border: 1px solid var(--lijn); border-radius: 6px; background: var(--wit); color: var(--inkt); font-size: .95rem; line-height: 1.5; max-width: 42rem; }
.officieel-examen p { margin: 0; }
.officieel-icoon { flex: none; width: 1.4rem; height: 1.4rem; margin-top: .05rem; color: var(--zee); }
.officieel-examen a { font-weight: 700; white-space: nowrap; }
/* Smal scherm: een lange linktekst ("Official exam requirements from the CBR (in Dutch)") mag afbreken, anders schuift de pagina opzij (taxi EN, 31 okt 2026). */
@media (max-width: 600px) { .officieel-examen a { white-space: normal; } }
.officieel-examen a::after { content: " \2197"; }
.officieel-los { display: block; margin-top: .25rem; color: var(--grijs); font-size: .88rem; }
.officieel-hero { background: rgba(255, 255, 255, .92); }
.voet-officieel { font-size: .9rem; }
.voet-officieel a::after { content: " \2197"; }
.officieel-kort { margin: 1.25rem 0 0; font-size: .92rem; color: var(--grijs); }
.officieel-kort a { font-weight: 700; }
.officieel-kort a::after { content: " \2197"; }
.kp-usb-top { margin: .75rem 0 1rem; }

/* PDF-voorbeeld (27 okt 2026, wens Gijs): mini-mockup als icoon bij elke PDF en een kijker met de eerste bladzijden. */
.heeft-pdf { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .15rem .7rem; }
.vinklijst li.heeft-pdf, .kp-punt.heeft-pdf { padding-left: 0; }
.vinklijst li.heeft-pdf::before, .kp-punt.heeft-pdf::before { content: none; }
.pdf-icoon { position: relative; display: inline-block; width: 30px; height: 42px; flex: none; transform: rotate(-4deg); }
.pdf-icoon::before { content: ""; position: absolute; inset: 3px -3px -3px 3px; background: var(--wit); border: 1px solid var(--lijn); border-radius: 2px; }
.pdf-icoon img { position: relative; display: block; width: 30px; height: 42px; object-fit: cover; object-position: top; background: var(--wit); border: 1px solid var(--lijn); border-radius: 2px; box-shadow: 0 2px 6px rgba(0, 0, 0, .14); }
.pdf-icoon-tag { position: absolute; right: -7px; bottom: 4px; font-size: .5rem; font-weight: 800; line-height: 1; letter-spacing: .04em; color: #fff; background: #c8352e; padding: 2px 3px; border-radius: 2px; }
.pdf-regel-tekst { min-width: 0; }
.pdf-bekijk {
  font: inherit; font-size: .85rem; font-weight: 700; color: var(--inkt); background: transparent; cursor: pointer;
  border: 0; padding: .35rem .1rem; text-decoration: underline; text-underline-offset: .2em; white-space: nowrap; position: relative; z-index: 1;
}
.pdf-bekijk:hover { color: var(--zee); }
.pdf-bekijk:focus-visible, .pdf-stapel-knop:focus-visible { outline: 3px solid var(--signaal); outline-offset: 2px; border-radius: 4px; }
.pdf-bekijk-groot { display: inline-block; margin-top: .3rem; padding-left: 0; font-size: .95rem; }
.pdf-stapel-knop { display: block; width: 100%; background: none; border: 0; padding: 0; cursor: zoom-in; font: inherit; color: inherit; }
.pdf-stapel-knop .pdf-stapel { display: block; }
.pdf-stapel-hint { display: block; text-align: center; font-weight: 700; font-size: .95rem; text-decoration: underline; text-underline-offset: .2em; margin-top: .25rem; }
.upgrade-pdfs .pdf-bekijk { padding: 0 .1rem; }
@media (max-width: 30rem) { .heeft-pdf { grid-template-columns: auto 1fr; } .heeft-pdf .pdf-bekijk { grid-column: 2; justify-self: start; padding-top: 0; } }

.pdf-kijker-open { overflow: hidden; }
.pdf-kijker {
  width: min(44rem, 100vw - 1.5rem); max-height: calc(100dvh - 1.5rem); padding: 0; border: 0; border-radius: 6px;
  background: var(--wit); color: var(--inkt); box-shadow: 0 20px 60px rgba(0, 0, 0, .35); overflow: hidden;
  display: none; flex-direction: column;
}
.pdf-kijker[open] { display: flex; }
.pdf-kijker::backdrop { background: rgba(10, 25, 28, .72); }
.pdf-kijker-kop { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 1rem .4rem; }
.pdf-kijker-titel { margin: 0; font-weight: 800; font-size: 1.05rem; }
.pdf-kijker-sluit { font-size: 1.8rem; line-height: 1; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--blauw-licht); color: var(--inkt); cursor: pointer; flex: none; }
.pdf-kijker-tabs { display: flex; gap: .4rem; overflow-x: auto; padding: 0 1rem .6rem; scrollbar-width: none; }
.pdf-kijker-tabs[hidden] { display: none; }
.pdf-kijker-tab { flex: none; font: inherit; font-size: .85rem; font-weight: 600; padding: .35rem .75rem; border-radius: 999px; border: 1px solid var(--lijn); background: var(--wit); color: var(--inkt); cursor: pointer; }
.pdf-kijker-tab[aria-selected="true"] { background: var(--inkt); border-color: var(--inkt); color: var(--wit); }
.pdf-kijker-baan {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; background: #e9eeee; flex: 1 1 auto; min-height: 0;
  scrollbar-width: none; overscroll-behavior-x: contain;
}
.pdf-kijker-baan::-webkit-scrollbar, .pdf-kijker-tabs::-webkit-scrollbar { display: none; }
.pdf-kijker-baan:focus-visible { outline: 3px solid var(--signaal); outline-offset: -3px; }
.pdf-kijker-blad { flex: 0 0 100%; scroll-snap-align: center; margin: 0; padding: .9rem; display: flex; justify-content: center; align-items: flex-start; overflow-y: auto; max-height: calc(100dvh - 12.5rem); }
.pdf-kijker-blad img { width: 100%; max-width: 38rem; height: auto; cursor: zoom-in; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .1), 0 10px 26px rgba(0, 0, 0, .16); border-radius: 2px; }
.pdf-kijker-voet { display: flex; align-items: center; justify-content: center; gap: 1rem; padding: .6rem 1rem 0; }
.pdf-kijker-pijl { width: 48px; height: 44px; border-radius: 6px; border: 1px solid var(--lijn); background: var(--wit); color: var(--inkt); font-size: 1.8rem; line-height: 1; cursor: pointer; }
.pdf-kijker-pijl:disabled { opacity: .35; cursor: default; }
.pdf-kijker-teller { margin: 0; min-width: 9rem; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.pdf-kijker-noot { margin: 0; padding: .4rem 1rem .9rem; text-align: center; font-size: .85rem; color: var(--grijs); }
/* Computer: de hele bladzijde in beeld; klik op de bladzijde om in te zoomen op de tekst. */
@media (min-width: 30.01rem) {
  .pdf-kijker-blad img { width: auto; max-height: calc(100dvh - 16rem); }
  .pdf-kijker-blad.is-zoom img { width: 100%; max-height: none; cursor: zoom-out; }
}
@media (max-width: 30rem) {
  .pdf-kijker-blad img { cursor: default; }
  .pdf-kijker { width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; }
  .pdf-kijker-blad { padding: .5rem; max-height: none; }
}

/* ---------- Leermodules (motor/paginas/les.php, lib/lessen.php) ---------- */
.les-voortgang { position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 60; pointer-events: none; }
.les-voortgang span { display: block; height: 100%; background: var(--blauw); transform: scaleX(0); transform-origin: 0 50%; }
.les-main { padding-top: 1.5rem; padding-bottom: 3rem; }
.les-kop { max-width: 48rem; margin: 0 0 1.5rem; }
.les-kop h1 { margin-bottom: .4rem; }
.les-meta { color: var(--grijs); font-size: .98rem; margin: 0; display: flex; flex-wrap: wrap; gap: .3rem .7rem; align-items: center; }
.les-label { display: inline-flex; align-items: center; gap: .3rem; font-size: .85rem; font-weight: 700; padding: .1rem .6rem; border-radius: 999px; background: var(--vlak); color: var(--zee); }
.les-label svg { width: 15px; height: 15px; flex: none; }
.les-label.is-gelezen { background: var(--goed-vlak); color: var(--goed); }
.les-label.is-gratis { background: var(--blauw-licht); color: var(--zee); }
.les-label.is-dicht { background: var(--vlak); color: var(--grijs); }
.les-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
@media (min-width: 62rem) {
  .les-raster { grid-template-columns: 15.5rem minmax(0, 46rem); gap: 3rem; align-items: start; }
  .les-inhoud { position: sticky; top: 1.25rem; max-height: calc(100vh - 2.5rem); overflow-y: auto; }
}
.les-inhoud { border: 1px solid var(--lijn); border-radius: var(--radius); padding: 1rem 1.1rem; background: var(--wit); }
.les-inhoud h2 { font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; color: var(--grijs); margin: 0 0 .6rem; }
.les-inhoud ul { list-style: none; padding: 0; margin: 0; }
.les-inhoud li { margin: 0; }
.les-inhoud li + li { margin-top: .15rem; }
.les-inhoud a, .les-inhoud span { display: flex; gap: .45rem; align-items: flex-start; padding: .3rem .5rem; border-radius: 6px; font-size: .95rem; line-height: 1.35; color: var(--inkt); text-decoration: none; }
.les-inhoud a:hover { background: var(--vlak); }
.les-inhoud a[aria-current] { background: var(--blauw-licht); color: var(--zee); font-weight: 700; }
.les-inhoud span { color: var(--grijs); }
.les-inhoud .les-slot { flex: none; margin-top: .1rem; }
.les-inhoud a.les-inhoud-oefen { display: block; margin-top: .8rem; padding: .8rem .5rem .1rem; border-top: 1px solid var(--lijn); border-radius: 0; font-weight: 700; font-size: .95rem; color: var(--zee-licht); text-decoration: underline; }
.les-inhoud a.les-inhoud-oefen:hover { background: none; }
.les-tekst { max-width: 46rem; min-width: 0; }
.les-tekst > h2:first-child { margin-top: 0; }
.les-tekst h2 { scroll-margin-top: 1.5rem; }
.les-tekst figure img { background: var(--wit); border: 1px solid var(--lijn); }
.les-tekst table { font-size: .97rem; }
.les-tekst th { background: var(--vlak); }
.les-tekst .les-reken { background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--radius); padding: 1rem 1.2rem; margin: 0 0 1.4em; }
.les-tekst .les-reken p:last-child, .les-tekst .les-reken ol:last-child, .les-tekst .les-reken ul:last-child { margin-bottom: 0; }
.les-tekst .les-reken-kop { font-weight: 800; margin-bottom: .4em; }
.les-tekst .les-onthoud { background: var(--blauw-licht); border-radius: var(--radius); padding: 1.1rem 1.3rem; margin: 2rem 0 1.5rem; }
.les-tekst .les-onthoud h2 { margin-top: 0; font-size: 1.3rem; }
.les-tekst .les-onthoud ul { margin-bottom: 0; }
.les-tekst .les-bronnen { font-size: .92rem; color: var(--grijs); }
.les-tekst .les-bronnen h2 { font-size: 1.15rem; }
.les-tekst .les-bronnen li { overflow-wrap: anywhere; }
.les-klaar { max-width: 46rem; margin: 2.5rem 0 0; padding: 1.5rem; border-radius: 6px; background: var(--vlak); border: 1px solid var(--lijn); }
@media (min-width: 62rem) { .les-klaar, .les-buren { margin-left: calc(15.5rem + 3rem); } }
.les-klaar h2 { font-size: 1.45rem; margin: 0 0 .4rem; }
.les-klaar-knoppen { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-top: 1rem; }
.les-klaar-knoppen form { margin: 0; }
.les-klaar-knoppen .knop svg { width: 18px; height: 18px; margin-right: .3rem; vertical-align: -3px; }
.les-buren { max-width: 46rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: .6rem; margin-top: 1.5rem; }
@media (min-width: 40rem) { .les-buren { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.les-buur { display: block; padding: .75rem 1rem; border: 1px solid var(--lijn); border-radius: 6px; text-decoration: none; color: var(--inkt); font-weight: 700; font-size: .95rem; line-height: 1.35; }
.les-buur span { display: block; font-size: .8rem; font-weight: 600; color: var(--grijs); margin-bottom: .15rem; }
.les-buur:hover { border-color: var(--blauw); }
.les-buur.is-volgende { text-align: right; }
.les-dicht, .les-upsell { border: 1px solid var(--lijn); border-radius: 6px; padding: 1.4rem; background: var(--vlak); max-width: 46rem; }
.les-upsell { margin-top: 2rem; }
.les-dicht h2, .les-upsell h2 { font-size: 1.4rem; }
.les-raster.is-dicht .les-inhoud { position: static; max-height: none; }
/* Overzicht */
.les-overzicht .lead { margin-bottom: 1.5rem; }
.les-stand { border: 1px solid var(--lijn); border-radius: var(--radius); padding: 1rem 1.2rem; margin: 0 0 1.5rem; display: grid; gap: .7rem; justify-items: start; }
.les-stand p { margin: 0; font-weight: 700; }
.les-stand-balk { display: block; width: 100%; height: 8px; border-radius: 4px; background: var(--blauw-licht); overflow: hidden; }
.les-stand-balk span { display: block; height: 100%; background: var(--blauw); }
.les-lijst { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.les-lijst li { margin: 0; }
.les-lijst a { display: grid; grid-template-columns: auto 1fr; gap: .1rem .8rem; align-items: center; padding: .75rem 1rem; border: 1px solid var(--lijn); border-radius: var(--radius); text-decoration: none; color: var(--inkt); background: var(--wit); }
.les-lijst a:hover { border-color: var(--blauw); }
.les-lijst .ow-nr { grid-row: 1 / span 2; }
.les-lijst .les-meta { font-size: .9rem; }
.les-lijst li.is-dicht .ow-titel { color: var(--grijs); }
/* Leeroverzicht /oefenen: "Les lezen" als voet onder de onderwerpkaart */
.onderwerp-lijst li.heeft-les { display: flex; flex-direction: column; }
.onderwerp-lijst li.heeft-les > a:first-child { border-bottom-left-radius: 0; border-bottom-right-radius: 0; flex: 1 1 auto; height: auto; }
.onderwerp-lijst li.heeft-les > a.ow-les { display: flex; flex-direction: row; height: auto; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: .5rem; min-height: 44px; padding: .45rem 1rem; margin-top: -2px; border: 2px solid var(--lijn); border-top-width: 1px; border-radius: 0 0 6px 6px; font-size: .95rem; font-weight: 700; color: var(--zee); background: var(--vlak); grid-template-columns: none; }
.onderwerp-lijst li.heeft-les > a.ow-les:hover { border-color: var(--blauw); }
.ow-les-stand { font-weight: 600; font-size: .85rem; color: var(--grijs); display: inline-flex; align-items: center; gap: .25rem; }
.ow-les-stand.is-gelezen { color: var(--goed); }
.ow-les-stand svg { width: 15px; height: 15px; }
.les-proef-link { display: inline-block; margin-left: .35rem; font-size: .9rem; font-weight: 700; }
.oefen-les-link { font-size: 1rem; }

/* Waar doe je het examen? Rustig blok onderaan examenpagina en kooppagina (motor/lib/examenafname.php). */
.examenafname { margin: 2.5rem auto 0; max-width: 46rem; padding-top: 1.25rem; border-top: 1px solid var(--lijn); color: var(--grijs); font-size: .95rem; }
#examenafname-kop { font-size: 1.05rem; line-height: 1.3; margin: 0 0 .35rem; letter-spacing: 0; }
.examenafname.examenafname p { margin: 0 0 .6rem; font-size: .95rem; max-width: none; }
.examenafname ul { list-style: none; margin: 0 0 .6rem; padding: 0; display: grid; gap: .35rem; }
.examenafname li { display: flex; flex-wrap: wrap; gap: .1rem .5rem; align-items: baseline; }
.examenafname li a { font-weight: 600; }
.examenafname li span { color: var(--grijs); }
.examenafname .examenafname-bron { font-size: .85rem; }

/* Terugkijken na de gratis test (cockpit 27 okt 2026): elke vraag uitklapbaar met je antwoord en de uitleg. */
.uitslag-terugkijken li { display: block; padding: 0; }
.uitslag-terugkijken li::before { display: none; }
.uitslag-terugkijken summary { display: flex; align-items: center; gap: .6rem; padding: .55rem .8rem; cursor: pointer; min-height: 44px; list-style: none; }
.uitslag-terugkijken summary::-webkit-details-marker { display: none; }
.uitslag-terugkijken summary::before { content: ""; flex: 0 0 1.25rem; height: 1.25rem; border-radius: 50%; background-size: 100%; }
.uitslag-terugkijken .is-goed summary::before { background-color: var(--goed); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-6.5' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.uitslag-terugkijken .is-fout summary::before { background-color: var(--fout); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6.5 6.5l7 7M13.5 6.5l-7 7' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E"); }
.uitslag-terugkijken summary::after { content: "+"; margin-left: auto; font-weight: 700; }
.uitslag-terugkijken details[open] summary::after { content: "\2212"; }
.terug-inhoud { padding: 0 .8rem .8rem 2.65rem; }
.terug-inhoud p { margin: .35rem 0; }
.terug-vraag { font-weight: 600; }
.terug-juist { font-weight: 600; color: var(--goed); }
.uitslag-naar-lijst { margin-top: .5rem; }

/* ==========================================================================
   Vraagsoort open (toets Ethiek): eigen antwoord typen, daarna het antwoordmodel als vinklijst.
   Staat op de witte kaart van stijl D, in het proefexamen en bij het terugkijken.
   ========================================================================== */
.open-form { display: flex; flex-direction: column; gap: .75rem; margin: 0; }
.open-veld { display: flex; flex-direction: column; gap: .35rem; }
.open-label { font-weight: 800; font-size: 1rem; color: var(--inkt); margin: 0; }
.open-hulp { font-size: .9rem; color: var(--grijs); margin: 0; }
.open-tekst {
  width: 100%; min-height: 9.5rem; resize: vertical; font: inherit; font-size: 1rem; line-height: 1.55;
  color: var(--inkt); background: var(--wit); border: 2px solid var(--lijn); border-radius: 6px; padding: .75rem .85rem;
}
.open-tekst:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-color: var(--quiz-accent-vol); }
.open-tekst[readonly] { background: var(--quiz-rij); color: var(--quiz-rij-tekst); }
.open-melding { margin: 0; font-size: .95rem; font-weight: 700; color: var(--quiz-fout-label); }
.open-vergelijk, .open-bevestig { align-self: flex-start; }
.open-overslaan { align-self: flex-start; min-height: 44px; padding: .5rem 0; background: none; border: 0; font: inherit; font-size: .95rem; color: var(--grijs); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.open-overslaan:hover { color: var(--inkt); }
.open-overslaan:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.open-overgeslagen { margin: .75rem 0 0; font-size: .95rem; color: var(--grijs); }
.open-bevestig-rij { margin: .9rem 0 0; }
.model { border: 2px solid var(--quiz-accent-vol); border-radius: 6px; padding: 0 0 .9rem; margin: 1rem 0 0; min-width: 0; }
.model-kop {
  float: left; width: 100%; margin: 0 0 .75rem; padding: .55rem 1rem; background: var(--quiz-accent-vol); color: var(--wit);
  font-size: .8rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}
.model-kop + * { clear: left; }
.model-hulp { margin: 0 1rem .6rem; font-size: .92rem; color: var(--grijs); }
.model-lijst { list-style: none; margin: 0; padding: 0 .6rem; display: flex; flex-direction: column; gap: .2rem; }
.model-lijst li + li { margin-top: 0; }
.model-punt { display: flex; align-items: flex-start; gap: .65rem; padding: .55rem .5rem; border-radius: 6px; }
.model-punt input { flex: none; width: 1.3rem; height: 1.3rem; margin: .15rem 0 0; accent-color: var(--quiz-accent-vol); cursor: pointer; }
.model-punt label { flex: 1; display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; cursor: pointer; font-size: 1rem; line-height: 1.45; }
.model-punt.is-aan { background: var(--quiz-rij); }
.model-punten { flex: none; font-size: .85rem; font-weight: 800; color: var(--quiz-accent-vol); white-space: nowrap; }
.model.is-alleen-lezen .model-punt input, .model.is-alleen-lezen .model-punt label { cursor: default; }
.model-score { margin: .7rem 1rem 0; font-weight: 800; font-size: 1.05rem; color: var(--inkt); }
.open-eigen { margin: 0 0 .5rem; }
.open-eigen-tekst { margin: .3rem 0 0; padding: .7rem .85rem; background: var(--quiz-rij); border-radius: 6px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 1rem; }
.open-eigen-tekst.is-leeg { color: var(--quiz-rij-tekst); font-style: italic; }
.open-nakijk { margin-bottom: 2rem; }
.qd-examen .open-veld .open-label, .qd-kaart .open-label { color: var(--inkt); }
@media (max-width: 30rem) { .model-punt label { flex-direction: column; gap: .15rem; } }

/* Toetsdatum met oefenplan (motor/lib/toetsdatum.php, vlag 'toetsdatum', standaard uit). Dunne lijnen, geen kaartje. */
.toetsdatum { margin: 1.25rem 0 0; padding: .9rem 0 .2rem; border-top: 1px solid var(--lijn); }
.toetsdatum-kop { margin: 0; font-weight: 700; color: var(--inkt); display: flex; flex-wrap: wrap; gap: .25rem .75rem; align-items: baseline; }
.toetsdatum-dagen { font-weight: 600; color: var(--blauw); }
.toetsdatum-tekst, .toetsdatum-bron { margin: .35rem 0 0; color: var(--grijs); font-size: .95rem; }
.toetsdatum-plan { margin-top: .5rem; }
.toetsdatum-plan summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--inkt); text-decoration: underline; text-underline-offset: 3px; }
.toetsdatum-plan summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.toetsdatum-plan ul { margin: .25rem 0 0; padding: 0; list-style: none; }
.toetsdatum-plan li { margin: .3rem 0; }
/* Route tot de toets (toetsdatum route): genummerde stappen, gewone cijfers, geen rondjes. */
.toetsdatum-route { margin: .4rem 0 0; padding-left: 1.4rem; }
.toetsdatum-route li { margin: .35rem 0; line-height: 1.5; }
.toetsdatum-route a { font-weight: 600; color: var(--inkt); text-underline-offset: 3px; }

/* Open oefenvraag in een artikel (oefenopen.js). Zonder script staat het model eronder als gewone lijst. */
.oefen-open { margin: 2rem 0; padding: 1.25rem; border: 1px solid var(--lijn); border-radius: 6px; background: var(--wit); }
.oefen-open-label { margin: 0 0 .5rem; font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--zee-licht); }
.oefen-open-casus { margin: 0 0 1rem; padding: .9rem 1rem; background: var(--vlak); border-radius: 6px; }
.oefen-open-casus p { margin: 0; }
.oefen-open-casus p + p { margin-top: .6rem; }
.oefen-open-vraag { font-weight: 700; margin: 0 0 1rem; }
.oefen-open-model-kop { font-weight: 800; margin: 1rem 0 .35rem; }
.oefen-open-model li { margin-bottom: .35rem; }
.oefen-open-model li[data-punten]::after { content: " (" attr(data-punten) ")"; color: var(--grijs); font-size: .9em; }
.oefen-open-bron { margin: 1rem 0 0; font-size: .88rem; color: var(--grijs); }
.oefen-open .model-score { margin: .8rem 1rem 0; font-weight: 700; }
.oefen-open-toch { min-height: 44px; align-self: flex-start; }

/* Casusschema bij een open vraag: ingeklapt hulpmiddel (quiz.js figuur). */
.vraag-figuur.is-casusschema { margin: 0 0 1.25rem; border: 1px solid var(--lijn); border-radius: 6px; background: var(--wit); }
.vraag-figuur.is-casusschema summary { min-height: 44px; display: flex; align-items: center; gap: .5rem; padding: .5rem .9rem; cursor: pointer; font-weight: 700; font-size: .95rem; list-style: none; }
.vraag-figuur.is-casusschema summary::-webkit-details-marker { display: none; }
.vraag-figuur.is-casusschema summary::after { content: "+"; margin-left: auto; font-size: 1.2rem; line-height: 1; }
.vraag-figuur.is-casusschema[open] summary::after { content: "\2212"; }
.vraag-figuur.is-casusschema img { display: block; width: 100%; max-width: 22rem; height: auto; margin: 0 auto .75rem; border: 0; border-radius: 6px; }

/*
 * Versie 3: gratis test en flashcards (blauwdruk marifoonoefenen.nl en vaarbewijsexamentest.nl, 6 nov 2026).
 * Geen intro boven de test: een compacte titel en direct de test, de uitleg eronder. Titel en uitleg verdwijnen na de
 * test (body.quiz-klaar, quiz.js). Hoeken maximaal 6px, geen gekleurde zijstrepen of bovenstrepen, groen goed en rood fout.
 */
.gratis-test { padding-top: 1.5rem; }
.gratis-test h1.gratis-titel { font-size: clamp(1.5rem, 1.25rem + 1.2vw, 2.1rem); margin-top: 0; margin-bottom: .75rem; }
.gratis-test .examen-wissel { margin-bottom: 1rem; }
.quiz-kader { border: 2px solid var(--lijn); border-radius: 6px; box-shadow: 0 10px 28px rgba(15, 59, 63, .08); }
.qd-kaart { border-radius: 6px; }
.optie, .opties li.is-goed, .optie-waarom-los { border-radius: 6px; }
.vraag-figuur img { border-radius: 6px; }
.gratis-over { margin-top: 2rem; margin-bottom: 0; color: var(--grijs); }
.gratis-over h2 { font-size: 1.15rem; margin: 0 0 .4rem; }
.gratis-over p { margin: 0; }
body.quiz-klaar .gratis-test h1.gratis-titel,
body.quiz-klaar .gratis-test .examen-wissel,
body.quiz-klaar .gratis-test .examentaal-noot,
body.quiz-klaar .gratis-over,
body.quiz-klaar .gratis-uitleg { display: none; }

/* Vraag met beeld: beeld, vraag en antwoorden samen in beeld. Telefoon: kleiner beeld; vanaf 56rem naast elkaar. */
.qd-kaart.heeft-beeld > .vraag-figuur { margin: 0 0 1rem; }
.qd-kaart.heeft-beeld > .vraag-figuur > button { width: 100%; box-sizing: border-box; }
@media (max-width: 55.99rem) {
  .qd-kaart.heeft-beeld > .vraag-figuur img { width: 100%; height: auto; max-height: 30vh; object-fit: contain; }
}
@media (min-width: 56rem) {
  main.gratis-test { max-width: calc(64rem + 2 * var(--rand)); }
  main.gratis-test > * { max-width: var(--tekstbreedte); margin-left: auto; margin-right: auto; }
  main.gratis-test > .quiz:has(.qd-kaart.heeft-beeld) { max-width: none; }
  /* Themaquiz (lib/themaquiz.php): zelfde brede quiz als de gratis test, de tekst eromheen blijft smal. */
  main.themaquiz > .smal:has(.qd-kaart.heeft-beeld) { max-width: calc(64rem + 2 * var(--rand)); }
  main.themaquiz > .smal:has(.qd-kaart.heeft-beeld) > :not(.quiz) { max-width: var(--tekstbreedte); margin-left: auto; margin-right: auto; }
  main.themaquiz > .smal > .quiz:has(.qd-kaart.heeft-beeld) { max-width: none; }
  .qd-kaart.heeft-beeld { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: 2rem; align-items: start; }
  .qd-kaart.heeft-beeld > .vraag-figuur { grid-column: 1; grid-row: 1 / span 20; margin: 0; }
  .qd-kaart.heeft-beeld > .vraag-figuur img { width: 100%; max-width: 100%; height: auto; max-height: 70vh; object-fit: contain; }
  .qd-kaart.heeft-beeld > :not(.vraag-figuur) { grid-column: 2; }
}

/* Eindscherm: uitslag en knop naar de trainingen, zwakke onderwerpen, kortingsbon, adviesvraag en advies,
   dan het overzicht per vraag dicht in een uitklapblok. */
.uitslag-kaart, .uitslag-kaart.is-gratis { border-radius: 6px; }
.uitslag-cta { margin: 1.1rem 0 .4rem; }
.uitslag-zwak { margin: 0 0 1.75rem; }
.advies-kaart { border-radius: 6px; }
.advies-label { border-radius: 999px; }
.advies-vraag { margin: 2rem 0 .75rem; }
.mailcode-bon { border-radius: 6px; }
.cadeau { border-radius: 6px; }
.uitslag-details { margin: 1.5rem 0 1.25rem; border-top: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn); }
.uitslag-details > summary { cursor: pointer; padding: .9rem 0; font-weight: 700; color: var(--inkt); min-height: 44px; display: flex; align-items: center; gap: .5rem; list-style: none; }
.uitslag-details > summary::-webkit-details-marker { display: none; }
.uitslag-details > summary::after { content: "+"; margin-left: auto; font-weight: 800; font-size: 1.2rem; }
.uitslag-details[open] > summary::after { content: "\2212"; }
.uitslag-details .uitslag-lijst { margin: 0 0 1rem; }
.uitslag-lijst li { border-radius: 6px; }
.uitslag-opnieuw { margin: 1rem 0 0; }

/* Flashcards versie 3: bezoekers beginnen direct met de gratis ronde; daaronder alle stapels als rustig raster met slot. */
.fc-main .fc-titel { font-size: clamp(1.5rem, 1.25rem + 1.2vw, 2.1rem); margin: 0 0 .75rem; }
.fc-main.is-bezoeker { padding-top: 1.5rem; }
.fc-main.is-bezoeker .fc-app { margin-top: .5rem; }
.fc-main.is-bezoeker .fc-speler { margin-top: 0; }
.fc-bewaar { margin: .75rem 0 0; max-width: 40rem; }
.fc-kaart, .fc-voor, .fc-einde, .fc-stapel, .fc-lijstkaart, .fc-artikel-link, .fc-valkuil, .fc-ezel, .fc-melding { border-radius: 6px; }
.fc-ronde-eind p { margin: 0 0 .75rem; }
.fc-ronde-eind .knoppen { margin: 0 0 .5rem; }
.fc-ronde-test { font-size: 1rem; }
.fc-raster-sectie { margin-top: 2.5rem; }
.fc-raster-kop { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem 1.5rem; margin: 0 0 1.25rem; }
.fc-raster-kop h2 { margin: 0 0 .35rem; font-size: 1.35rem; }
.fc-raster-kop p { margin: 0; color: var(--grijs); max-width: 36rem; font-size: 1rem; }
.fc-raster { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; }
@media (min-width: 40rem) { .fc-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .fc-raster { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fc-raster-stapel { position: relative; margin: 0; display: flex; flex-direction: column; gap: .1rem; padding: .6rem .75rem; border: 1px solid var(--lijn); border-radius: 6px; background: var(--vlak); min-width: 0; }
.fc-raster-stapel:hover { border-color: var(--zee-licht); }
.fc-raster-naam { display: flex; align-items: flex-start; gap: .4rem; font-size: .92rem; line-height: 1.3; font-weight: 700; color: var(--inkt); overflow-wrap: anywhere; hyphens: auto; }
.fc-raster-slot { flex: none; width: 1rem; height: 1rem; margin-top: .1rem; color: var(--grijs); }
.fc-raster-meta { font-size: .85rem; color: var(--grijs); padding-left: 1.4rem; }
.fc-raster-link { position: absolute; inset: 0; border-radius: 6px; }
.fc-raster-link:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.fc-zo { max-width: var(--tekstbreedte); }
.fc-zo h2 { font-size: 1.15rem; }

/* Wissel tussen oefenomgeving en bedrijfsportaal, en de keuze van het bedrijf */
.zk-wissel { display: inline-flex; flex-wrap: wrap; gap: 0; margin: 0 0 1.25rem; border: 1px solid var(--lijn, #d8e2e8); border-radius: 999px; padding: 3px; background: #fff; }
.zk-wissel-item { padding: .45rem 1rem; border-radius: 999px; font-size: .9375rem; font-weight: 700; text-decoration: none; color: var(--zee); }
.zk-wissel-item.is-actief { background: var(--zee); color: #fff; }
.om-zakelijk { margin: .75rem 0 0; font-size: .9375rem; color: var(--grijs); }
.om-zakelijk a { color: var(--zee); font-weight: 700; }

/* Uitslag van de gratis test als onderwerpprofiel (keuze Gijs 10 nov 2026, canvas "Uitslag gratis test", richting D).
   Eén kaart: links het donkere vlak met de score, de balk met de slaaggrens en hoeveel je nodig hebt, met het logo licht
   als vorm in de achtergrond (--merk-watermerk als masker, zonder token niets); rechts per onderwerp waar je punten laat
   liggen en wat al goed gaat; onderin het haakje naar de aanbevolen training. Hoeken 6px, geen zijstrepen. */
.up { border: 1px solid var(--lijn); border-radius: 6px; background: var(--wit); overflow: hidden; margin: 0 0 1.5rem; }
.quiz-kader .up { margin-left: -.25rem; margin-right: -.25rem; }
.up p { margin: 0; }
.up-boven { display: grid; }
.up-vlak {
  position: relative; isolation: isolate; overflow: hidden; background: var(--zee); color: var(--wit);
  padding: 1.1rem 1.25rem 1.25rem; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1rem;
}
.up-vlak::after {
  content: ""; position: absolute; z-index: -1; right: -1.5rem; bottom: -1rem; width: 11rem; height: 11rem; background: var(--wit); pointer-events: none;
  -webkit-mask: var(--merk-watermerk, linear-gradient(transparent, transparent)) no-repeat right bottom / contain;
  mask: var(--merk-watermerk, linear-gradient(transparent, transparent)) no-repeat right bottom / contain;
}
.up-label { flex-basis: 100%; font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: #b9cbdc; }
.up-score { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; flex-basis: 100%; }
.up-getal { font-size: clamp(4rem, 3rem + 5vw, 6.5rem); font-weight: 800; line-height: .95; color: #e8a33d; }
.up.is-geslaagd .up-getal { color: #43c07a; }
.up-van { font-size: 1.25rem; font-weight: 800; }
.up-vlak .norm { flex-basis: 100%; margin-top: .6rem; }
.up-vlak .norm-label { font-size: .78rem; }
.up-vlak .norm-balk { height: 10px; }
.up-nodig { flex-basis: 100%; margin-top: .75rem !important; font-size: 1.05rem; font-weight: 600; line-height: 1.35; }
.up-nodig strong { color: #e8a33d; }
.up.is-geslaagd .up-nodig strong { color: #43c07a; }

.up-profiel { padding: 1.1rem 1.25rem 1rem; min-width: 0; }
.up-kopregel { display: flex; flex-wrap: wrap-reverse; justify-content: space-between; align-items: center; gap: .5rem 1rem; margin-bottom: .35rem; }
.up-kop { font-size: 1.45rem; margin: 0; }
.up-kop:focus { outline: none; }
.up-stempel {
  display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .65rem; border: 3px solid var(--fout); color: var(--fout); background: var(--wit);
  border-radius: 6px; font-weight: 800; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; line-height: 1.2; transform: rotate(-5deg);
}
.up-stempel.is-geslaagd { border-color: var(--goed); color: var(--goed); }
.up-stempel.is-geslaagd::before { content: ""; width: .55rem; height: .95rem; margin: -.25rem .1rem 0 .15rem; border: solid currentColor; border-width: 0 3px 3px 0; transform: rotate(45deg); }
.up-tussenkop { font-size: 1.1rem; color: var(--goed); margin: 1rem 0 .1rem; }
.up-lijst { list-style: none; margin: 0; padding: 0; }
.up-rij {
  display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto; grid-template-areas: "icoon naam pips" "icoon tel pips";
  column-gap: .75rem; align-items: center; margin: 0; padding: .55rem 0; border-bottom: 1px solid var(--lijn);
}
.up-rij:last-child { border-bottom: 0; }
.up-icoon { grid-area: icoon; width: 2.5rem; height: 2.5rem; border-radius: 6px; background: var(--vlak); color: var(--inkt); display: flex; align-items: center; justify-content: center; }
.up-naam { grid-area: naam; font-weight: 700; line-height: 1.25; }
.up-tel { grid-area: tel; font-size: .9rem; font-weight: 700; }
.up-rij.is-fout .up-tel { color: var(--fout); }
.up-rij.is-deels .up-tel { color: #6b4a0f; }
.up-rij.is-goed .up-tel { color: var(--goed); }
.up-pips { grid-area: pips; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .25rem; max-width: 8rem; }
.up-pip { width: 1.4rem; height: 1.4rem; box-sizing: border-box; border-radius: 4px; background-size: 100%; }
.up-pip.is-goed { background-color: var(--goed); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-6.5' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.up-pip.is-fout { background-color: var(--fout-vlak); border: 2px solid var(--fout); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 6l8 8M14 6l-8 8' fill='none' stroke='%23b42318' stroke-width='2.8' stroke-linecap='round'/%3E%3C/svg%3E"); background-position: center; }
.up-status { display: none; grid-area: status; justify-self: start; font-size: .8rem; font-weight: 700; padding: .25rem .65rem; border-radius: 999px; white-space: nowrap; }
.up-rij.is-fout .up-status { background: var(--fout-vlak); color: var(--fout); }
.up-rij.is-deels .up-status { background: #fcefd9; color: #6b4a0f; }
.up-rij.is-goed .up-status { background: var(--goed-vlak); color: var(--goed); }

.up-haak { border-top: 1px solid var(--lijn); background: var(--vlak); padding: 1.1rem 1.25rem; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }
.up-haak-tekst { flex: 1 1 16rem; min-width: 0; }
.up-haak-kop { font-size: 1.2rem; font-weight: 800; line-height: 1.25; color: var(--inkt); }
.up-haak-sub { font-size: .95rem; color: var(--grijs); margin-top: .15rem !important; }
.up-haak-prijs { font-size: 1.9rem; font-weight: 800; line-height: 1; white-space: nowrap; }
.up-haak-knop { display: flex; flex-direction: column; align-items: center; gap: .4rem; flex: 1 1 100%; }
.up-haak-knop .knop { width: 100%; justify-content: center; margin: 0; }
.up-haak-alle { font-size: .9rem; }
@media (min-width: 34rem) { .up-haak-knop { flex: 0 0 auto; } .up-haak-knop .knop { width: auto; } }
@media (min-width: 46rem) {
  .up-boven { grid-template-columns: minmax(15rem, 17rem) minmax(0, 1fr); }
  .up-vlak { flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; padding: 1.5rem 1.4rem; }
  .up-vlak::after { width: 14rem; height: 14rem; right: -2.5rem; bottom: .5rem; }
  .up-score { flex-direction: column; align-items: flex-start; gap: .1rem; flex-basis: auto; }
  .up-label, .up-vlak .norm, .up-nodig { flex-basis: auto; }
  .up-profiel { padding: 1.4rem 1.5rem 1.1rem; }
  .up-rij { grid-template-columns: 2.5rem minmax(0, 1fr) auto 6.5rem 5.75rem; grid-template-areas: "icoon naam pips tel status"; column-gap: .85rem; }
  .up-rij .up-tel { color: var(--inkt); font-size: .95rem; }
  .up-status { display: inline-block; }
  .up-haak { padding: 1.2rem 1.5rem; }
}
/* Na de test mag het eindscherm breder dan de leeskolom, zodat het profiel naast de score past. */
@media (min-width: 56rem) {
  body.quiz-klaar main.gratis-test > .quiz { max-width: 54rem; }
}

/* Kortingsbon als smalle strook (keuze Gijs 10 nov 2026): geen grote strook met het percentage, geen inleiding en geen
   leeg codevak. Kop met waarvoor en hoe lang, e-mailveld en knop op een rij, het vakje voor tips en klein de privacyregel.
   Na de aanvraag komt het codevak met de code om te kopieren. */
/* Kleuren in de uitslag (wens Gijs 10 nov 2026, eerst fgassen): er staat al veel rood in de quiz, dus de knop naar de
   training is groen (go) en de kortingsbon heeft de rustige accentkleur van de site (--bon-kleur, anders --blauw). */
.up-haak-knop .knop-signaal { background: var(--koop-groen, #187a42); box-shadow: 0 4px 0 var(--koop-groen-donker, #145a32); color: #fff; }
.up-haak-knop .knop-signaal:hover { background: #146a39; color: #fff; }
.up-haak-knop .knop-signaal:active { box-shadow: 0 2px 0 var(--koop-groen-donker, #145a32); }
.mailcode {
  --signaal: var(--bon-kleur, var(--blauw));
  --signaal-hover: color-mix(in srgb, var(--bon-kleur, var(--blauw)) 82%, #000);
  --signaal-schaduw: color-mix(in srgb, var(--bon-kleur, var(--blauw)) 55%, #000);
  --signaal-tekst: #ffffff;
}
.mailcode.is-compact { margin: 0 0 1.5rem; }
.mailcode.is-compact .mailcode-bon { display: block; }
.mailcode.is-compact .mailcode-groot, .mailcode.is-compact .mailcode-intro, .mailcode.is-compact .mailcode-slot:not(.is-open) { display: none; }
.mailcode.is-compact .mailcode-inhoud { padding: .9rem 1.1rem; display: grid; gap: .6rem 1.5rem; align-items: start; }
.mailcode.is-compact h2 { font-size: 1.15rem; margin: 0; }
.mailcode-geldig-klein { margin: .1rem 0 0; font-size: .9rem; color: var(--grijs); }
.mailcode.is-compact .mailcode-form { margin: 0; }
.mailcode.is-compact .mailcode-tips { margin: .55rem 0 0; }
.mailcode.is-compact .mailcode-tips label { font-size: .9rem; }
.mailcode.is-compact .mailcode-uitleg { font-size: .78rem; line-height: 1.4; margin: .3rem 0 0; }
.mailcode.is-compact .mailcode-slot { margin: 0; }
.mailcode.is-compact .mailcode-dank { margin: 0; }
@media (min-width: 46rem) {
  .mailcode.is-compact .mailcode-inhoud { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); padding: 1rem 1.5rem; }
  .mailcode.is-compact .mailcode-slot, .mailcode.is-compact .mailcode-dank { grid-column: 1 / -1; }
  .mailcode.is-compact .mailcode-rij input[type="email"] { flex-basis: 11rem; }
}
/* 3D-scene bij een vraag (veld scene3d, quiz.js figuurScene3d): knoppen om na een fout antwoord jouw keuze en het goede antwoord te bekijken.
   De opmaak van de scene zelf staat bij de site (bijvoorbeeld .vraag-3d in vaarbewijs/site.css). */
.vraag-3d-keuze { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.vraag-3d-keuze .knop[aria-pressed="true"] { border-color: var(--zee); color: var(--zee); box-shadow: inset 0 0 0 1px var(--zee); }

/* Vergelijking van de trainingen (keuze Gijs 10 nov 2026, motor/lib/vergelijking.php).
   Mobiel: schakelbalk, "In elk pakket" en de verschillen in kolommen. Breed (container vanaf 40rem): tabel met iconen. */
.vg { container-type: inline-size; margin: 1.5rem 0 0; --vg-n: 3; }
.vg.vg-2 { --vg-n: 2; }
.vg-tabs { display: flex; gap: 4px; padding: 4px; background: color-mix(in srgb, var(--lijn) 55%, #fff); border-radius: var(--radius); margin-bottom: 1rem; }
.vg-tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: .6rem .3rem; min-height: 44px; border-radius: var(--radius); color: var(--grijs); text-decoration: none; text-align: center; }
.vg-tab:hover { color: var(--inkt); }
.vg-tab-naam { font-size: .875rem; font-weight: 600; }
.vg-tab-prijs { font-size: 1rem; font-weight: 800; color: var(--inkt); }
.vg-tab.is-gekozen { background: #fff; color: var(--inkt); box-shadow: 0 1px 3px rgba(0,0,0,.14); }
.vg-tab.is-gekozen .vg-tab-naam { font-weight: 700; }
.vg-tabel { display: flex; flex-direction: column; gap: 1rem; }
.vg-kop { display: none; }
.vg-sectie { background: #fff; border: 1px solid var(--lijn); border-radius: var(--radius); padding: 1rem 1.1rem; }
.vg-sectie-kop { margin: 0 0 .35rem; font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--grijs); }
.vg-label { display: flex; align-items: flex-start; gap: .7rem; font-size: .95rem; line-height: 1.4; color: var(--inkt); }
.vg-label .vg-icoon { display: none; flex: none; width: 18px; height: 18px; margin-top: .15rem; color: var(--grijs); }
.vg-ja, .vg-nee { fill: none; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.vg-ja { stroke: var(--goed); stroke-width: 2.6; }
.vg-nee { stroke: var(--fout); stroke-width: 2.6; }
.vg-ja-mobiel { margin-top: .05rem; }
.vg-gemeen .vg-rij { padding: .55rem 0; }
.vg-gemeen .vg-rij > [data-kol] { display: none; }
.vg-namen { display: grid; grid-template-columns: repeat(var(--vg-n), 1fr); gap: 4px; margin: .4rem 0 .1rem; }
.vg-namen span { text-align: center; font-size: .75rem; font-weight: 700; color: var(--grijs); }
.vg-namen span.is-gekozen { color: var(--goed); }
.vg-verschil .vg-rij { display: grid; grid-template-columns: repeat(var(--vg-n), 1fr); gap: 4px; padding: .8rem 0; border-bottom: 1px solid var(--lijn); }
.vg-verschil .vg-rij:last-child { border-bottom: 0; padding-bottom: .2rem; }
.vg-verschil .vg-label { grid-column: 1 / -1; color: var(--grijs); font-size: .875rem; margin-bottom: .2rem; }
.vg-rij > [data-kol] { display: flex; align-items: center; justify-content: center; min-height: 2rem; border-radius: var(--radius); font-size: .875rem; font-weight: 700; color: var(--inkt); text-align: center; padding: 0 .2rem; }
.vg-rij > [data-kol].is-gekozen { background: var(--goed-vlak); }
.vg-voet { position: sticky; bottom: 0; z-index: 5; margin-top: 1rem; padding: .7rem 0 calc(.7rem + env(safe-area-inset-bottom, 0px)); background: var(--wit, #fff); box-shadow: 0 -10px 14px -12px rgba(0,0,0,.35); }
/* Koopknop blijft in beeld zolang de vergelijking in beeld is (wens Gijs 10 nov 2026). Op /kopen doen de vaste
   balk (mobiel) en het meeschuivende afrekenblok (breed) dat al, dus daar geen tweede knop. */
.vg[data-modus="kopen"] .vg-voet { display: none; }
.vg-cta { display: flex; justify-content: center; width: 100%; min-height: 52px; }
.vg-noot { margin-top: .75rem; }
.vg-garantie { display: flex; gap: .7rem; align-items: flex-start; margin: 1rem 0 0; padding: .8rem 1rem; background: var(--goed-vlak); border: 1px solid color-mix(in srgb, var(--goed) 35%, #fff); border-radius: var(--radius); font-size: .95rem; line-height: 1.45; color: var(--inkt); }
.vg-garantie-icoon { flex: none; width: 22px; height: 22px; margin-top: .1rem; color: var(--goed); }
.kp-vg-kop { margin: 2rem 0 0; font-size: 1.25rem; }
.kp-keuze.met-vergelijking .kp-meer { display: none; }

@container (min-width: 40rem) {
  .vg-tabs { display: none; }
  .vg-tabel { gap: 0; background: #fff; border: 1px solid var(--lijn); border-radius: var(--radius); padding: .5rem 1.5rem 1.25rem; }
  .vg-kop, .vg-gemeen .vg-rij, .vg-verschil .vg-rij { display: grid; grid-template-columns: 1.7fr repeat(var(--vg-n), 1fr); }
  .vg-hoek { display: flex; flex-direction: column; justify-content: center; gap: .2rem; padding: 1.1rem 1rem 1.1rem 0; }
  .vg-hoek-logo { width: 56px; height: 56px; border-radius: 23%; display: block; margin-bottom: .5rem; }
  .vg-hoek-kop { font-weight: 700; color: var(--inkt); }
  .vg-hoek-tekst { font-size: .8rem; color: var(--grijs); max-width: 16rem; }
  .vg-kop > a { display: flex; flex-direction: column; gap: .2rem; padding: 1.1rem 1rem; color: var(--inkt); text-decoration: none; border-radius: var(--radius) var(--radius) 0 0; }
  .vg-kop > a.is-gekozen { background: var(--goed-vlak); box-shadow: inset 0 0 0 2px var(--goed); }
  .vg-kop-naam { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; font-weight: 700; }
  .vg-bol { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--lijn); box-sizing: border-box; flex: none; }
  .vg-kop > a.is-gekozen .vg-bol { border: 5px solid var(--goed); }
  .vg-tag { font-size: .7rem; font-weight: 700; color: #fff; background: var(--goed); padding: .15rem .5rem; border-radius: 999px; }
  .vg-kop-prijs { font-size: 1.6rem; font-weight: 800; line-height: 1.1; }
  .vg-kop-toegang { font-size: .8rem; color: var(--grijs); }
  .vg-sectie { background: none; border: 0; border-radius: 0; padding: 0; }
  .vg-sectie-kop { padding: 1.4rem 0 .5rem; margin: 0; border-bottom: 1px solid var(--lijn); }
  .vg-gemeen .vg-rij, .vg-verschil .vg-rij { gap: 0; padding: 0; border-bottom: 1px solid var(--lijn); }
  .vg-verschil .vg-rij:last-child { border-bottom: 0; padding-bottom: 0; }
  .vg-label, .vg-verschil .vg-label { grid-column: auto; align-items: center; padding: .8rem 1rem .8rem 0; margin: 0; font-size: .95rem; color: var(--inkt); }
  .vg-label .vg-icoon { display: block; margin-top: 0; }
  .vg-ja-mobiel { display: none; }
  .vg-gemeen .vg-rij > [data-kol] { display: flex; }
  .vg-rij > [data-kol] { border-radius: 0; min-height: 0; font-weight: 600; }
  .vg-verschil .vg-rij:last-child > [data-kol].is-gekozen { border-radius: 0 0 var(--radius) var(--radius); }
  .vg-namen { display: none; }
  .vg-voet { display: flex; justify-content: flex-end; padding-left: 1rem; padding-right: 1rem; }
  .vg-cta { width: auto; padding-left: 2rem; padding-right: 2rem; }
}

/* Kassakoopje in het afrekenblok (lib/kassakoopje.php, 10 nov 2026): een vakje dat nooit vooraf aan staat, met de
   naam van de PDF, één regel uitleg, de prijs en Inkijken. Vlak met een volle rand van 1px, geen zijstreep. */
.kp-kk { margin: .9rem 0 1rem; padding: .75rem .85rem; border: 1px solid var(--lijn); border-radius: var(--radius, 6px); background: var(--vlak); }
.kp-kk[hidden], .kp-kk-in[hidden] { display: none; }
.kp-kk-keuze { display: grid; grid-template-columns: auto auto 1fr; gap: .2rem .7rem; align-items: start; cursor: pointer; font-size: .95rem; line-height: 1.4; }
.kp-kk-keuze input { width: 1.15rem; height: 1.15rem; margin-top: .15rem; accent-color: var(--koop-groen, #187a42); }
.kp-kk-tekst { display: grid; gap: .15rem; min-width: 0; }
.kp-kk-kop { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; }
.kp-kk-tekst strong { display: block; color: var(--inkt); }
/* De voorkant van de PDF als klein beeld en het label "PDF om te printen" (wens Gijs 10 nov 2026) */
.kp-kk-beeld { position: relative; display: block; width: 64px; height: 90px; margin: .1rem .25rem .2rem 0; transform: rotate(-3deg); }
.kp-kk-beeld img { display: block; width: 64px; height: 90px; object-fit: cover; object-position: top; background: var(--wit); border-radius: 2px; box-shadow: 0 1px 2px rgba(0, 0, 0, .18), 0 6px 14px rgba(0, 0, 0, .18); }
.kp-kk-beeld .pdf-icoon-tag { right: -6px; bottom: 7px; font-size: .56rem; }
.kp-kk-label { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--goed, #1d7a46); }
.kp-kk-tip { margin: .4rem 0 0 1.75rem; font-size: .86rem; line-height: 1.4; color: var(--grijs); }
.kp-kk-tip[hidden] { display: none; }
.kp-kk-regel { display: block; color: var(--grijs); font-size: .9rem; }
.kp-kk-prijs { font-weight: 800; color: var(--inkt); white-space: nowrap; }
.kp-kk-inkijk { margin: .45rem 0 0 1.75rem; font-size: .9rem; }
.kp-kk-in { margin: .9rem 0 0; font-size: .9rem; color: var(--grijs); }