/*
 * De voorpagina (/), ronde 4 van het ontwerp — vastgesteld door de eigenaar.
 *
 * WAAROM DIT EEN EIGEN STIJLBLAD IS EN NIET BOVENOP site.css.
 * De schets draagt een eigen huisstijl (donkerblauw/groen) die niet op de
 * amberkleurige merktaal van app/tokens.css leunt en een heel andere opbouw
 * heeft dan de andere sitepagina's (waaier, diavoorstelling, proefkaart). Twee
 * stijlsystemen door elkaar op één pagina is moeilijker te onderhouden dan één
 * zelfstandig blad. Dit bestand is daarom VOLLEDIG ZELFSTANDIG: de voorpagina
 * laadt fonts.css en tokens.css (voor de gedeelde reset, de focusring en de
 * generieke balk/menu-mechaniek van .tf-topbar/.tf-nav — die werken hier
 * gewoon mee), maar NIET app/site/maten.css of app/site/site.css. De andere
 * pagina's blijven die twee gebruiken en veranderen hier niets aan.
 *
 * WAT WEL VAN TOKENS.CSS KOMT (en dus hier NIET opnieuw gedefinieerd wordt):
 * de mobiele menu-inklap (.tf-topbar[data-collapsible], .tf-menu-toggle), de
 * knopvorm van .tf-button, en de focusring op :focus-visible. Kleuren van die
 * onderdelen worden hieronder overschreven voor déze pagina; dat werkt omdat
 * dit bestand ná tokens.css laadt en alleen op déze pagina staat.
 *
 * DONKERE STAND. app/site/site.js zet `data-theme="dark"` op <html> zodra de
 * telefoon van de bezoeker op donker staat (geen aparte knop op de website).
 * Elke kleur hieronder staat daarom twee keer: als lichte waarde in :root en
 * als donkere variant onder [data-theme="dark"] — dezelfde opzet als
 * app/tokens.css.
 *
 * DE UITZONDERING, EN WAAROM DIE ER MAG ZIJN. De proefvraagkaart en de
 * getekende "ms"-schermpjes (het blok "Zo gaat oefenen eruitzien") zijn
 * GETEKENDE MOCKUPS van het echte oefenscherm — geen merktekst maar een
 * afbeelding-in-woorden. Precies zoals een echte schermafdruk elders op de
 * site niet omklapt naar donker (zie de screenshots in .site-toestel) en
 * precies zoals de tekst op het openingsbeeld dat niet doet (zie
 * app/site/maten.css, "TEKST OP EEN BEELD"), blijven deze twee altijd hun
 * eigen papierkleur houden. Hun kleuren staan daarom EENMALIG in :root, met
 * opzet niet onder [data-theme="dark"] — net als --tf-donker-vlak in
 * app/tokens.css. Alle overige kleuren op deze pagina wisselen wél mee.
 */

/* ── de huisstijl van de voorpagina ─────────────────────────────────────── */

:root {
  --vp-groen: #00b45c;
  /*
   * HET GROEN WAAR WITTE LETTERS OP STAAN. Wit op #00b45c meet 2,73 en de
   * ondergrens voor tekst is 4,5; op #00803f is het 5,0. De merkkleur zelf
   * verandert niet - alleen het VLAK onder witte letters. Dezelfde scheiding
   * als --tf-accent-vlak in app/site/huisstijl.css, 30-08-2026.
   */
  --vp-groen-vlak: #00803f;
  /*
   * DE LETTERVARIANT, en die is donkerder dan je zou tekenen. Op 30-08-2026
   * gemeten: #008a46 haalt 4,45 op wit en 4,00 op de groene tint, waar 4,5
   * de ondergrens is voor tekst. #00753a haalt 5,82 en 5,20.
   *
   * Gebruik hem alleen als KLEUR van letters. Voor een vlak waar witte
   * letters op staan is er --vp-groen-vlak, en voor alles wat gevuld of
   * omrand wordt is er --vp-groen.
   */
  --vp-groen-donker: #00753a;
  --vp-groen-tint: #e6f7ee;

  --vp-bg: #ffffff;
  --vp-surface: #fbfcfe;
  --vp-navy-tint: #eef2f8;
  --vp-ink: #0b2349;
  --vp-ink-zacht: #44557a;
  --vp-lijn: #e4eaf3;
  --vp-schaduw: rgba(11, 35, 73, 0.1);

  --vp-fout: #e04f4f;
  --vp-fout-tint: #fdf0f0;
  --vp-fout-donker: #b23737;

  /*
   * ALTIJD DONKER, IN BEIDE STANDEN — vergelijkbaar met --tf-donker-vlak in
   * app/tokens.css. De grote kaart "Snappen, niet stampen" en de slotband
   * onderaan dragen de huisstijlkleur zelf als vlak, niet als tekst op een
   * achtergrond die met de stand meeschuift. Zet je de telefoon op donker,
   * dan verandert de pagina eromheen; deze twee vlakken blijven wat ze zijn.
   */
  --vp-vlak-donker: #0b2349;
  --vp-vlak-donker-zacht: #b7c4dc;
  --vp-vlak-donker-rand: rgba(255, 255, 255, 0.12);

  /*
   * DE GETEKENDE MOCKUPS — met opzet maar EENMAAL gedefinieerd (zie uitleg
   * bovenaan dit bestand). Ze zijn de papieren tekening van het oefenscherm,
   * geen merkoppervlak van de website zelf.
   */
  --vp-mock-bg: #f7f9fc;
  --vp-mock-vlak: #ffffff;
  --vp-mock-ink: #0b2349;
  --vp-mock-ink-zacht: #44557a;
  --vp-mock-lijn: #e4eaf3;
  --vp-mock-groen: #00b45c;
  /* Het vlak waar witte letters op staan; zie --vp-groen-vlak hierboven. */
  --vp-mock-groen-vlak: #00803f;
  /* De lettervariant in het nagebouwde telefoonscherm. Zelfde meting en
     zelfde waarde als --vp-groen-donker hierboven: #008a46 haalde 4,00 op de
     groene tint en 4,45 op wit, #00753a haalt 5,20 en 5,82. */
  --vp-mock-groen-donker: #00753a;
  --vp-mock-groen-tint: #e6f7ee;
  --vp-mock-fout: #e04f4f;
  /* De lettervariant van hetzelfde rood: #e04f4f haalt 3,50 op zijn eigen
     tint. Gelijk aan --tf-bad-ink in de app, zodat de site en het scherm
     dezelfde twee roden hebben en niet elk hun eigen. */
  --vp-mock-fout-ink: #c03a3a;
  --vp-mock-fout-tint: #fdf0f0;
  --vp-mock-schaduw: rgba(11, 35, 73, 0.18);
}

[data-theme="dark"] {
  --vp-groen: #22c775;
  --vp-groen-donker: #7fe3ad;
  --vp-groen-tint: #123a28;

  --vp-bg: #0c1526;
  --vp-surface: #101b30;
  --vp-navy-tint: #16223f;
  --vp-ink: #e9edf8;
  --vp-ink-zacht: #a9b6d4;
  --vp-lijn: #26335a;
  --vp-schaduw: rgba(0, 0, 0, 0.5);

  --vp-fout: #e2827f;
  --vp-fout-tint: #2a1a1a;
  --vp-fout-donker: #f3b3b1;
}

/* ── basis van het blad ──────────────────────────────────────────────────
 * tokens.css zet body.background op --tf-canvas (het amber merk). Deze
 * pagina heeft zijn eigen achtergrond en tekstkleur nodig.
 */

body {
  background: var(--vp-bg);
  color: var(--vp-ink);
  font-family: "Spline Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

a {
  color: inherit;
}

.vp-koppen {
  font-family: "Poppins", "Bricolage Grotesque", "Segoe UI Semibold", ui-sans-serif, system-ui, sans-serif;
}

.vp-groentekst { color: var(--vp-groen-donker); }

.vp-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── het blad: één breedte voor alle secties van deze pagina ────────────── */

.vp-blad {
  /* 1100 -> 1240 op 31-08-2026, gelijk aan --site-max in maten.css: op een
     breed scherm bleef er zoveel wit staan dat het blad niet als gecentreerd
     las. Opmaak, huisstijl, geen besluit. */
  width: min(100% - 32px, 1240px);
  margin: 0 auto;
}

.vp-sectie {
  padding: 44px 0;
}

.vp-sectie + .vp-sectie {
  border-top: 1px solid var(--vp-lijn);
}

.vp-kop-rij {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 18px;
}

.vp-kop-rij h2 {
  margin: 0;
}

.vp-noot {
  margin: 0;
  font-size: 13px;
  color: var(--vp-ink-zacht);
}

.vp-marge-onder { margin-bottom: 16px; }

/* Het dagpas-regeltje onder de drie pakketten (ownerbesluit 28-08-2026): klein
   en stil, zodat de Examenmaand de keuze blijft waar mensen op uitkomen. */
.vp-dagpas {
  margin-top: 14px;
  font-size: 12.5px;
}
.vp-geen-marge-onder { margin-bottom: 0; }

/* ── de kopbalk ───────────────────────────────────────────────────────────
 * .tf-topbar / .tf-nav / .tf-menu-toggle / .tf-menu-bars komen uit
 * tokens.css: die regelen de inklap onder 760px en de focusring. Hier
 * overschrijven we alleen kleur en typografie.
 */

.vp-balk {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--vp-bg);
  border-bottom: 1px solid var(--vp-lijn);
}

.vp-balk .tf-topbar {
  /* 1100 -> 1240 op 31-08-2026, gelijk aan --site-max in maten.css: op een
     breed scherm bleef er zoveel wit staan dat het blad niet als gecentreerd
     las. Opmaak, huisstijl, geen besluit. */
  width: min(100% - 32px, 1240px);
  margin: 0 auto;
  padding: 10px 0;
  border-bottom: none;
}

.vp-merk {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: var(--vp-ink);
}

.vp-logo {
  display: block;
  width: 32px;
  height: 32px;
  flex: none;
}

.vp-woordmerk {
  font-family: "Poppins", "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--vp-ink);
}

.vp-woordmerk .vp-groentekst { color: var(--vp-groen-donker); }

.vp-balk .tf-nav a {
  color: var(--vp-ink);
}

.vp-balk .tf-nav a[aria-current="page"] {
  background: var(--vp-navy-tint);
}

.vp-balk .tf-nav .tf-nav-cta,
.vp-balk .tf-nav .tf-nav-cta[aria-current="page"] {
  background: var(--vp-groen-vlak, var(--vp-groen));
  color: #fff;
}

.vp-balk .tf-menu-toggle {
  border-color: var(--vp-lijn);
  background: var(--vp-surface);
  color: var(--vp-ink);
}

.vp-balk .tf-menu-bars,
.vp-balk .tf-menu-bars::before,
.vp-balk .tf-menu-bars::after {
  background: var(--vp-ink);
}

.vp-balk .tf-topbar[data-collapsible="true"] .tf-nav {
  border-top-color: var(--vp-lijn);
}

.vp-balk .tf-taalwisselaar {
  border-color: var(--vp-lijn);
  color: var(--vp-ink);
}

/* ── de held ──────────────────────────────────────────────────────────── */

.vp-hero {
  padding: 40px 0 8px;
}

.vp-hero-binnen {
  display: grid;
  gap: 32px;
}

.vp-hero h1 {
  margin: 0 0 14px;
  font-weight: 700;
  font-size: clamp(28px, 6vw, 40px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.vp-hero > .vp-hero-binnen > p,
.vp-hero-lede {
  margin: 0 0 18px;
  max-width: 46ch;
  color: var(--vp-ink-zacht);
  font-size: 16px;
  line-height: 1.55;
}

.vp-checks {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: grid;
  gap: 10px;
  max-width: 42ch;
}

.vp-checks li {
  position: relative;
  padding-left: 32px;
  font-size: 15px;
  font-weight: 500;
}

.vp-checks li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: -1px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--vp-groen-tint);
  color: var(--vp-groen-donker);
  font-weight: 700;
  font-size: 13px;
  display: grid;
  place-items: center;
}

.vp-cta-rij {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
}

.vp-knop-groot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 14px 26px;
  border-radius: 999px;
  border: none;
  background: var(--vp-groen-vlak, var(--vp-groen));
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  box-shadow: 0 5px 0 var(--vp-groen-donker);
}

.vp-knop-groot:hover { filter: brightness(1.04); }

.vp-knop-stil {
  font-weight: 600;
  font-size: 14.5px;
  color: var(--vp-ink);
  text-decoration: none;
  padding: 10px 4px;
}

.vp-knop-stil:hover { text-decoration: underline; }

/* ── de proefvraagkaart ───────────────────────────────────────────────────
 * Getekende mockup: altijd de --vp-mock-* kleuren, zie de uitleg bovenaan.
 */

.vp-proef {
  margin-top: 28px;
  background: var(--vp-mock-vlak);
  border: 2px solid var(--vp-mock-lijn);
  border-radius: 20px;
  padding: 18px;
  box-shadow: 0 14px 30px var(--vp-mock-schaduw);
  color: var(--vp-mock-ink);
  max-width: 480px;
}

.vp-proef-kop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.vp-proef-kop h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  font-family: inherit;
}

.vp-chip {
  flex: none;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vp-mock-groen-donker);
  background: var(--vp-mock-groen-tint);
  border-radius: 999px;
  padding: 4px 10px;
}

.vp-opties {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.vp-optie {
  border: 2px solid var(--vp-mock-lijn);
  border-radius: 14px;
  padding: 14px 8px 10px;
  display: grid;
  justify-items: center;
  gap: 8px;
  background: var(--vp-mock-bg);
}

.vp-optie-goed { border-color: var(--vp-mock-groen); background: var(--vp-mock-groen-tint); }
.vp-optie-fout { border-color: var(--vp-mock-fout); background: var(--vp-mock-fout-tint); }

.vp-optie small {
  font-size: 12.5px;
  color: var(--vp-mock-ink-zacht);
  font-weight: 600;
  text-align: center;
}

.vp-optie-goed small { color: var(--vp-mock-groen-donker); }
.vp-optie-fout small { color: var(--vp-mock-fout-ink, #c03a3a); }

.vp-proef-uitleg {
  margin: 12px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  background: var(--vp-mock-bg);
  border-radius: 10px;
  padding: 11px 13px;
  color: var(--vp-mock-ink-zacht);
}

.vp-proef-uitleg b { color: var(--vp-mock-groen-donker); }

.vp-proef-noot {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--vp-mock-ink-zacht);
}

/* ── de diavoorstelling ───────────────────────────────────────────────────
 * De bronnen zijn staand (1000×1167); het beeldvlak is liggend, dus wordt er
 * met object-position/cover uitgesneden. CSS-only kruisvervaging: vier lagen
 * op elkaar, elk zijn eigen animation-delay in dezelfde 16s-cyclus.
 */

.vp-scene {
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 18px 40px var(--vp-schaduw);
}

.vp-dias {
  position: relative;
  aspect-ratio: 5 / 4;
  background: var(--vp-navy-tint);
}

.vp-dia {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  animation: vp-diadraai 16s infinite;
}

/*
 * De vier situaties. De schets vroeg om woonwijkkruispunt, rotonde,
 * verkeerslichten en onverharde weg; van die vier bundelt gereedschap/
 * bundel.mjs geen rotondebeeld mee (die vragen staan op 'superseded'), dus
 * T3 (een T-splitsing zonder voorrangsregels) vervangt de rotonde. De andere
 * drie komen letterlijk overeen met wat er in app/dist/beelden staat.
 */
.vp-dia-1 { background-image: url("/dist/beelden/W2.jpg"); animation-delay: 0s; }
.vp-dia-2 { background-image: url("/dist/beelden/LICHT3.jpg"); animation-delay: 4s; }
.vp-dia-3 { background-image: url("/dist/beelden/T3.jpg"); animation-delay: 8s; }
.vp-dia-4 { background-image: url("/dist/beelden/W3.jpg"); animation-delay: 12s; }

@keyframes vp-diadraai {
  0% { opacity: 0; }
  5% { opacity: 1; }
  25% { opacity: 1; }
  31% { opacity: 0; }
  100% { opacity: 0; }
}

/*
 * De stippen zijn sinds punt 105 knoppen (gedrag in site.js). De zichtbare
 * stip is 8 beeldpunten, maar de knop eromheen 44 bij 44 — het knopbesluit
 * van 19-08-2026 in app/SCHERM.md: klein blijven ogen, groot raakvlak. Vier
 * knoppen van 44 zijn samen 176 breed en passen ruim op het beeldvlak. Ze
 * hangen aan .vp-scene (niet meer aan .vp-dias), zodat de vastgezette stand
 * hieronder met één data-kenmerk op de figuur zowel de dia's als de stippen
 * kan sturen.
 */
.vp-dia-stippen {
  position: absolute;
  right: 0;
  top: 0;
  display: flex;
  z-index: 2;
}

.vp-dia-stippen button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

/* Het donkere randje onder de stip is er omdat twee van de vier dia's licht
   zijn: op een witte gevel is 45%-wit anders onzichtbaar. */
.vp-dia-stippen button::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  box-shadow: 0 0 0 1px rgba(11, 35, 73, 0.4);
  animation: vp-stipdraai 16s infinite;
}

.vp-dia-stippen button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -3px;
  border-radius: 50%;
}

.vp-dia-stippen button:nth-child(1)::after { animation-delay: 0s; }
.vp-dia-stippen button:nth-child(2)::after { animation-delay: 4s; }
.vp-dia-stippen button:nth-child(3)::after { animation-delay: 8s; }
.vp-dia-stippen button:nth-child(4)::after { animation-delay: 12s; }

@keyframes vp-stipdraai {
  0% { background: rgba(255, 255, 255, 0.45); }
  5% { background: #fff; }
  25% { background: #fff; }
  31% { background: rgba(255, 255, 255, 0.45); }
  100% { background: rgba(255, 255, 255, 0.45); }
}

/* De vastgezette stand: één dia in beeld, de voorstelling en de stippenloop
   staan stil, en alleen de gekozen stip licht op. */
.vp-scene[data-dia] .vp-dia,
.vp-scene[data-dia] .vp-dia-stippen button::after {
  animation: none;
}

.vp-scene[data-dia="1"] .vp-dia-1,
.vp-scene[data-dia="2"] .vp-dia-2,
.vp-scene[data-dia="3"] .vp-dia-3,
.vp-scene[data-dia="4"] .vp-dia-4 { opacity: 1; }

.vp-scene[data-dia="1"] .vp-dia-stippen button:nth-child(1)::after,
.vp-scene[data-dia="2"] .vp-dia-stippen button:nth-child(2)::after,
.vp-scene[data-dia="3"] .vp-dia-stippen button:nth-child(3)::after,
.vp-scene[data-dia="4"] .vp-dia-stippen button:nth-child(4)::after { background: #fff; }

@media (prefers-reduced-motion: reduce) {
  .vp-dia, .vp-dia-stippen button::after { animation: none; }
  .vp-scene:not([data-dia]) .vp-dia-1 { opacity: 1; }
  .vp-scene:not([data-dia]) .vp-dia-stippen button:first-child::after { background: #fff; }
}

.vp-scene figcaption {
  position: relative;
  background: var(--vp-vlak-donker);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 12px 16px;
}

/* ── waarom TheorieFocus ──────────────────────────────────────────────── */

.vp-rooster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.vp-troef {
  background: var(--vp-navy-tint);
  border-radius: 16px;
  padding: 18px 18px 16px;
}

.vp-troef h3 {
  margin: 0 0 4px;
  font-family: "Poppins", sans-serif;
  font-size: 15px;
  font-weight: 600;
}

.vp-troef p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--vp-ink-zacht);
}

.vp-troef-icoon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  /* Wisselt mee met de stand: de lijnen van de iconen zijn --vp-ink, en die
   * wordt in donker bijna wit. Op een vaste witte tegel verdwenen ze. */
  background: var(--vp-bg);
  display: grid;
  place-items: center;
  margin-bottom: 10px;
  flex: none;
}

.vp-troef-groot {
  grid-column: 1 / -1;
  background: var(--vp-vlak-donker);
  color: #fff;
  display: flex;
  gap: 16px;
  align-items: center;
}

.vp-troef-groot h3 { color: #fff; font-size: 17px; }
.vp-troef-groot p { color: var(--vp-vlak-donker-zacht); }
.vp-troef-groot .vp-troef-icoon { background: rgba(255, 255, 255, 0.12); margin-bottom: 0; }

.vp-troef-breed {
  grid-column: 1 / -1;
  display: flex;
  gap: 16px;
  align-items: center;
}

.vp-troef-breed .vp-troef-icoon { margin-bottom: 0; }

@media (max-width: 620px) {
  .vp-rooster { grid-template-columns: 1fr; }
  .vp-troef-groot, .vp-troef-breed { grid-column: auto; }
}

/* ── zo gaat oefenen eruitzien: de waaier ────────────────────────────────
 * Getekende mockups: --vp-mock-* kleuren, altijd hetzelfde in beide standen.
 */

.ms {
  background: var(--vp-mock-bg);
  border: 3px solid var(--vp-mock-ink);
  border-radius: 16px;
  padding: 9px 8px 10px;
  font-size: 10px;
  line-height: 1.4;
  color: var(--vp-mock-ink);
}

.ms-kop { display: flex; align-items: center; gap: 6px; margin-bottom: 7px; }
.ms-teller { font-size: 8.5px; font-weight: 700; color: var(--vp-mock-ink-zacht); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ms-balk { flex: 1; height: 5px; border-radius: 999px; background: var(--vp-mock-lijn); overflow: hidden; display: block; }
.ms-balk i { display: block; height: 100%; background: var(--vp-mock-groen); border-radius: 999px; }
.ms-vraag { font-size: 10px; font-weight: 700; margin: 0 0 6px; }
.ms-borden { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.ms-bord { background: var(--vp-mock-vlak); border: 1.5px solid var(--vp-mock-lijn); border-radius: 8px; display: grid; place-items: center; padding: 6px 3px; }
.ms-bord.goed { border-color: var(--vp-mock-groen); background: var(--vp-mock-groen-tint); }
.ms-bord.fout { border-color: var(--vp-mock-fout); background: var(--vp-mock-fout-tint); }
.ms-uitleg { margin: 6px 0 0; font-size: 8.5px; line-height: 1.4; background: var(--vp-mock-vlak); border: 1.5px solid var(--vp-mock-groen); border-radius: 7px; padding: 5px 7px; color: var(--vp-mock-ink-zacht); }
.ms-uitleg b { color: var(--vp-mock-groen-donker); }
.ms-knop { margin: 6px 0 0; background: var(--vp-mock-groen-vlak, var(--vp-mock-groen)); color: #fff; text-align: center; font-family: "Poppins", sans-serif; font-weight: 600; font-size: 8.5px; border-radius: 999px; padding: 6px; }
.ms-titel { font-family: "Poppins", sans-serif; font-weight: 600; font-size: 11px; margin: 0 0 7px; }
.ms-rij { margin-bottom: 6px; }
.ms-rij-kop { display: flex; justify-content: space-between; gap: 4px; font-size: 8px; font-weight: 600; margin-bottom: 3px; white-space: nowrap; }
.ms-rij-kop em { font-style: normal; color: var(--vp-mock-ink-zacht); font-variant-numeric: tabular-nums; }
.ms-blokje { background: var(--vp-mock-vlak); border: 1.5px solid var(--vp-mock-lijn); border-radius: 7px; padding: 5px 7px; margin-bottom: 5px; font-size: 8.5px; }
.ms-blokje b { display: block; font-size: 8.5px; color: var(--vp-mock-groen-donker); margin-bottom: 1px; }
.ms-etiket { display: inline-block; font-size: 7.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--vp-mock-fout-ink, var(--vp-mock-fout)); margin-bottom: 3px; }

/* De vijf breedtes die de getekende voortgangsbalkjes gebruiken. Geen
   style-attribuut: de server weigert dat stil (zie de uitleg bovenaan). */
.vp-progres-62 { width: 62%; }
.vp-progres-46 { width: 46%; }
.vp-progres-38 { width: 38%; }

/* Het voortgangsscherm toont aantallen gedane vragen ("14/31"), met opzet
 * geen beheersingspercentage: app/SCHERM.md ("Per onderwerp") verbiedt een
 * cijfer over vragen die iemand nooit zag, en de voorpagina mag niets
 * beloven wat de app bewust niet doet. */
.ms-sub {
  margin: -5px 0 6px;
  font-size: 8px;
  color: var(--vp-mock-ink-zacht);
}

.vp-waaier {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 18px 0 10px;
  max-width: 520px;
  margin: 0 auto;
}

.vp-waaier .ms { width: 32%; box-shadow: 0 10px 24px var(--vp-mock-schaduw); }
.vp-waaier .w-links { transform: rotate(-8deg) translate(10px, 26px); z-index: 1; padding-right: 12px; }
.vp-waaier .w-midden { z-index: 2; width: 56%; }
.vp-waaier .w-midden .ms-vraag { font-size: 11.5px; }
.vp-waaier .w-midden .ms-borden { gap: 7px; }
.vp-waaier .w-midden .ms-bord { padding: 10px 4px; }
.vp-waaier .w-rechts { transform: rotate(8deg) translate(-10px, 26px); z-index: 1; padding-left: 13px; }

@media (max-width: 480px) {
  .vp-waaier .w-links { transform: rotate(-8deg) translate(6px, 22px); }
  .vp-waaier .w-rechts { transform: rotate(8deg) translate(-6px, 22px); }
}

.vp-app-noot {
  text-align: center;
  font-size: 12px;
  color: var(--vp-ink-zacht);
  margin: 6px 0 0;
}

/* ── nu al helemaal te lezen ──────────────────────────────────────────── */

.vp-lees-rooster {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.vp-lees-kaart {
  display: block;
  padding: 18px;
  border-radius: 16px;
  border: 1px solid var(--vp-lijn);
  background: var(--vp-surface);
  text-decoration: none;
  color: inherit;
}

.vp-lees-kaart h3 {
  margin: 0 0 6px;
  font-family: "Poppins", sans-serif;
  font-size: 15.5px;
}

.vp-lees-kaart p {
  margin: 0 0 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--vp-ink-zacht);
}

.vp-lees-verder {
  font-size: 13px;
  font-weight: 700;
  color: var(--vp-groen-donker);
}

/* ── de ervaringen ────────────────────────────────────────────────────────
 * De attributen data-ervaringen / data-voorbeeldmelding / data-ervaringen-
 * lijst en de klassen tf-quote(-avatar) zijn vast: app/site/site.js maakt de
 * kaarten aan met precies deze namen. Ze staan hier zodat de kaarten er op
 * déze pagina ook echt uitzien. Het letterband bovenaan de kaart
 * (site-quote-beeld) is bij punt 105 vervallen: het las als een afbeelding
 * die niet geladen was.
 *
 * De melding zelf wordt bewust NIET gestyled via de klasse of het attribuut
 * die de andere sitepagina's daarvoor gebruiken: gereedschap/controle-site.mjs
 * staat dat alleen aan app/site/site.css toe (zie dat bestand voor het
 * waarom). Deze pagina gebruikt daarom een eigen klasse, `vp-melding`, op
 * hetzelfde element.
 */

.vp-melding {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0 0 16px;
  padding: 13px 16px;
  border: 1px solid var(--vp-lijn);
  border-radius: 12px;
  background: var(--vp-navy-tint);
  color: var(--vp-ink-zacht);
  font-size: 12.5px;
  line-height: 1.55;
  max-width: 68ch;
}

.vp-melding::before {
  flex: none;
  font-weight: 700;
  content: "\2691";
  color: var(--vp-ink);
}

.tf-quotes {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.tf-quote {
  display: flex;
  flex-direction: column;
  margin: 0;
  overflow: hidden;
  border: 1px dashed var(--vp-lijn);
  border-radius: 14px;
  background: var(--vp-surface);
}

.tf-quote blockquote {
  margin: 0;
  padding: 15px 16px 10px;
  color: var(--vp-ink-zacht);
  font-size: 13.5px;
  line-height: 1.6;
}

.tf-quote figcaption {
  display: flex;
  gap: 9px;
  align-items: center;
  margin-top: auto;
  padding: 0 16px 15px;
}

.tf-quote-avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--vp-navy-tint);
  color: var(--vp-ink-zacht);
  font: 700 11px "Poppins", sans-serif;
}

.tf-quote figcaption span:last-child {
  color: var(--vp-ink-zacht);
  font-size: 11.5px;
}

/* ── prijzen ──────────────────────────────────────────────────────────── */

.vp-plannen {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.tf-plan {
  background: var(--vp-surface);
  border: 1px solid var(--vp-lijn);
  border-radius: 16px;
  padding: 16px 18px;
  position: relative;
}

.tf-plan h3 {
  margin: 0;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
}

.tf-plan-price {
  margin: 6px 0 0;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}

.tf-plan-price small {
  font-family: "Spline Sans", sans-serif;
  font-weight: 500;
  font-size: 11.5px;
  color: var(--vp-ink-zacht);
}

.tf-plan-duur {
  margin: 2px 0 10px;
  font-size: 12.5px;
  color: var(--vp-ink-zacht);
}

.tf-plan ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 4px;
}

.tf-plan li {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--vp-ink-zacht);
}

.tf-plan-featured {
  border: 2px solid var(--vp-groen);
  box-shadow: 0 10px 26px rgba(0, 180, 92, 0.16);
}

.tf-plan-flag {
  display: inline-block;
  background: var(--vp-groen-vlak, var(--vp-groen));
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 4px;
  padding: 3px 8px;
  margin-bottom: 8px;
}

.site-status {
  display: inline-block;
  margin-left: 4px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--vp-ink-zacht);
  background: var(--vp-navy-tint);
  border-radius: 999px;
  padding: 1px 8px;
}

.tf-referral {
  margin: 16px 0 0;
  max-width: 68ch;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--vp-ink-zacht);
}

/* ── veelgestelde vragen ──────────────────────────────────────────────── */

.tf-faq {
  display: grid;
  gap: 10px;
  max-width: 68ch;
}

.tf-faq details {
  border: 1px solid var(--vp-lijn);
  border-radius: 14px;
  padding: 4px 18px;
  background: var(--vp-surface);
}

.tf-faq summary {
  padding: 14px 0;
  font-weight: 600;
  font-size: 14.5px;
  cursor: pointer;
  list-style: none;
}

.tf-faq summary::-webkit-details-marker { display: none; }

.tf-faq summary::after {
  float: right;
  content: "+";
  font-weight: 700;
  color: var(--vp-groen-donker);
}

.tf-faq details[open] summary::after { content: "\2212"; }

.tf-faq p {
  margin: 0 0 16px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--vp-ink-zacht);
}

/* ── slotband ─────────────────────────────────────────────────────────── */

.tf-cta-band {
  border-radius: 20px;
  padding: 34px 26px;
  text-align: center;
  background: var(--vp-vlak-donker);
  color: #fff;
}

.tf-cta-band h2 {
  margin: 0 0 8px;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 24px;
}

.tf-cta-band p {
  margin: 0 0 18px;
  color: var(--vp-vlak-donker-zacht);
  font-size: 14.5px;
}

.tf-cta-band .vp-knop-groot {
  display: inline-flex;
  max-width: 320px;
}

/* ── voettekst ────────────────────────────────────────────────────────── */

.vp-voettekst {
  padding: 12px 0 46px;
}

.tf-footer-nav {
  display: grid;
  gap: 20px 26px;
  padding-bottom: 18px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.tf-footer-nav h2 {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--vp-ink-zacht);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tf-footer-nav ul {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tf-footer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  color: var(--vp-ink);
  font-size: 12.5px;
  text-decoration: none;
}

.tf-footer-nav a:hover { text-decoration: underline; }

.tf-footer {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--vp-lijn);
  color: var(--vp-ink-zacht);
  font-size: 11.5px;
  line-height: 1.6;
}

/* ── breed vanaf een computer ─────────────────────────────────────────── */

@media (min-width: 900px) {
  .vp-hero-binnen {
    grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
    align-items: start;
    gap: 40px;
  }

  .vp-proef { margin-top: 0; }

  .vp-rooster { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .vp-rooster > .vp-troef:not(.vp-troef-groot):not(.vp-troef-breed) { grid-column: span 2; }

  .vp-lees-rooster { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .vp-plannen { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}