/* ==========================================================================
   vp/contact-stappen.css  —  de stapsgewijze vragenstroom op contact/index.html

   Dit bestand stijlt ALLEEN de klassen uit het stroomcontract. Het raakt
   vp/contact.css niet aan; dat bestand houdt het klassieke formulier.

   VORMWAARDEN, OVERGENOMEN UIT DE TEMPLATE
   Alles hieronder komt uit css/vastpilot-v6.webflow.css of uit vp/contact.css,
   zodat de stroom niet als een vreemd blok in de compositie staat:

     paneelradius   var(--_spacing---radius--24px)   .resources-image-wrapper, .vp-form
     knopradius     var(--_spacing---radius--100px)  .button, .app-button, .vp-verstuur
     klikvlakradius 12px                             .vp-keuze
     veldradius     10px                             .vp-invoer
     paneelvlak     var(--color--gray-50)            .vp-form
     klikvlak       var(--vp-kaart)                  .vp-keuze
     randtoon       rgba(34,48,59,.55)               .vp-keuze, gemeten 3,24 op papier
     veldrand       rgba(34,48,59,.60)               .vp-invoer, gemeten 3,68 op papier
     focusring      3px var(--vp-accent-op-licht)    de blokregel onderaan de webflow-css
     ringafstand    2px op vlakken, 3px op knoppen   idem
     overgang       .2s ease  /  .25s ease           .vp-keuze, .hero-module-link
     lange overgang .4s                              .experience-slider
     versnelling    cubic-bezier(.16,1,.3,1)         de ease-out-expo uit de huisregels
     gloed          filter: blur(40px)               .hero-image-shadow-01 en -02

   KLEUR
   Geen enkele kleurwaarde staat hier met de hand. Alles loopt via de --vp-*
   en --color--* tokens uit :root. Het accent is contextafhankelijk: op deze
   pagina staat alles op een LICHT vlak, dus overal --vp-accent-op-licht
   (#a5441a). --vp-accent-op-donker (#FF6B35) komt hier niet voor als tekst,
   rand of ring; alleen --vp-gloed draagt die warme toon, en een gloed draagt
   geen betekenis.

   BEWEGING
   Er wordt uitsluitend transform en opacity geanimeerd. Geen breedte, geen
   hoogte, geen marge, en ook geen kleur: elke kleurwissel staat hier bewust
   op 0ms. Wat wel van toon verandert (rand, vlak) doet dat via een
   pseudo-element dat alleen zijn opacity laat lopen. Dat houdt de teller van
   niet-compositor-vriendelijke eigenschappen op nul.

   CAPSULES
   De pilvorm op .vp-stap-verder en .vp-stap-terug is de knopvorm van de
   template en dus een klikvlak. De uitzondering van 29 augustus 2026 op de
   huisregel geldt alleen op deze site.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. HET PANEEL

   .vp-stroom heeft zelf geen achtergrond. Het paneelvlak zit op ::after en de
   warme gloed op ::before, allebei op z-index -1. Beide pseudo's staan in de
   negatieve laag en worden daar op DOM-volgorde gestapeld, dus ::after (het
   vlak) dekt ::before (de gloed) af. Wat van de gloed overblijft is de rand
   die buiten het paneel valt, precies zoals .hero-image-shadow-01 dat op de
   homepage doet. Zo krijgt de stroom dezelfde diepte zonder dat er een warme
   waas over de tekst komt te liggen, en blijft het contrast meetbaar.

   isolation: isolate sluit die negatieve laag op in dit paneel, zodat de
   gloed niet achter een sectie van Webflow verdwijnt.
   -------------------------------------------------------------------------- */

.vp-stroom {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-flow: column;
  /* Het script zet .vp-stroom OP het bestaande .vp-form. Dat formulier heeft
     in vp/contact.css al een eigen vlak, een eigen radius en een rij-afstand
     van 28px. Alle drie gaan hier uit: het vlak wordt door ::after getekend,
     want anders schildert de gloed van ::before zich over het paneel in
     plaats van erachter, en de rij-afstand hoort bij een formulier met vier
     zichtbare vragen, niet bij een stroom waarin er één tegelijk staat. */
  background-color: #0000;
  grid-row-gap: 0;
  /* Een vloer, geen plafond. Zonder deze regel klapt het paneel bij een korte
     stap in en springt de pagina onder de stroom omhoog. Hoogte animeert
     nergens; dit zet alleen de ondergrens vast. */
  min-height: clamp(340px, 34vw + 180px, 460px);
  padding: 32px;
  margin: 0;
}

.vp-stroom::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: var(--_spacing---radius--24px);
  background-color: var(--color--gray-50);
  /* Dezelfde ondiepe, kleurloze schaduwfamilie als de template: daar staat
     0 0 4px #00000040 en 0 0 5px #00000040 op losse elementen. Twee lagen,
     want één laag op deze maat leest als een rand in plaats van als diepte. */
  box-shadow:
    0 0 2px rgba(34, 48, 59, .10),
    0 10px 30px rgba(34, 48, 59, .07);
}

/* De gloed. Rechtsonder, grotendeels buiten het paneel, zodat alleen de
   uitloop zichtbaar is. blur(40px) en de warme toon komen uit de template. */
.vp-stroom::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: auto -46px -46px auto;
  width: 240px;
  height: 240px;
  border-radius: 100%;
  background-color: var(--vp-gloed);
  opacity: .22;
  filter: blur(40px);
  pointer-events: none;
}

/* Alles in dit bestand krijgt een display, en een display verslaat het
   hidden-kenmerk van de browser. Het script zet stap.hidden en
   verstuurKnop.hidden, dus die regel moet hier terug worden gewonnen.
   Specificiteit 0,2,0 zodat hij boven de klasseregels hieronder uitkomt. */
.vp-stroom [hidden] {
  display: none;
}

/* --------------------------------------------------------------------------
   1b. DE DRIE MATEN DIE .vp-form KWIJTRAAKT ZODRA DE STROOM ERBIJ KOMT

   vp/contact.css geeft .vp-form een rij-afstand van 28px. .vp-stroom hierboven
   zet die op 0, want binnen de stroom draagt elk blok zijn eigen marge. Twee
   blokken uit dat bestand rekenden nog wel op die 28px, en die maat staat
   hieronder terug.

   Ze stonden tot 29 augustus 2026 als inline stijl in vp/contact-stappen.js.
   Opmaak hoort in de stylesheet, dus ze staan nu hier. De selectors beginnen
   met .vp-stroom, want zonder JavaScript staat die klasse er niet en houdt het
   gewone formulier zijn oude maatvoering.

   Gemeten voor en na de verhuizing, op 375, 768 en 1440: gelijk.
   -------------------------------------------------------------------------- */

/* .vp-form-hulp trekt zichzelf in vp/contact.css met -8px omhoog, tegen de
   flex-gap van .vp-form in. Zonder gat valt hij over de teller heen. */
.vp-stroom > .vp-form-hulp {
  margin-bottom: 16px;
}

/* De verstuurrij staat buiten de stappen en zou zonder deze regel strak tegen
   de onderkant van het overzicht plakken. */
.vp-stroom > .vp-form-slot {
  margin-top: 20px;
}

/* De teller boven de balk. De balk draagt zijn eigen ondermarge al, dus deze
   regel houdt alleen de twee uit elkaar. Het script bouwt de <p> en hangt er
   naast small-paragraph uit de template deze klasse aan. */
.vp-voortgang-teller {
  margin: 0 0 10px;
}

/* --------------------------------------------------------------------------
   2. DE VOORTGANGSBALK

   Kleur is hier nooit het enige signaal. Elke stap draagt drie dingen:

     vulling  de balk staat op 0, op de helft of vol
     vorm     de stap waar je nu staat is 8px hoog, de rest 6px
     tekst    het nummer of het onderwerp van de stap staat er gewoon bij

   De vulling loopt met transform: scaleX, dus de balk groeit zonder dat er
   een breedte wordt geanimeerd.

   Contrast: de tekst van een nog te gane stap staat op --vp-gedempt, gemeten
   4,86 op het papieren paneel. De stap waar je nu staat gebruikt het accent op
   licht (5,36 op papier), een afgeronde stap het accent bij hover (7,03).
   -------------------------------------------------------------------------- */

.vp-voortgang {
  grid-column-gap: 8px;
  display: flex;
  align-items: flex-start;
  list-style: none;
  margin: 0 0 30px;
  padding: 0;
}

.vp-voortgang-stap {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  padding-top: 16px;
  color: var(--vp-gedempt);
  font-size: var(--_typography---paragraph-font-size--small-text);
  line-height: var(--_typography---font-line-height--medium);
  font-weight: var(--_typography---font-weight--semi-bold);
}

/* De goot. */
.vp-voortgang-stap::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 6px;
  border-radius: var(--_spacing---radius--100px);
  background-color: var(--vp-lijn);
}

/* De vulling. scaleX vanaf links, want een balk vult van links naar rechts. */
.vp-voortgang-stap::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 6px;
  border-radius: var(--_spacing---radius--100px);
  background-color: var(--vp-accent-op-licht);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .4s cubic-bezier(.16, 1, .3, 1);
}

/* Waar je nu staat: halfvol, en 2px dikker dan de rest. De dikte zit op een
   absoluut geplaatst pseudo-element, dus de tekst eronder verschuift niet. */
.vp-voortgang-stap.is-nu {
  color: var(--vp-accent-op-licht);
  font-weight: var(--_typography---font-weight--bold);
}

.vp-voortgang-stap.is-nu::before,
.vp-voortgang-stap.is-nu::after {
  top: -1px;
  height: 8px;
}

.vp-voortgang-stap.is-nu::after {
  transform: scaleX(.5);
}

/* Afgerond: vol. */
.vp-voortgang-stap.is-gedaan {
  color: var(--vp-accent-hover);
}

.vp-voortgang-stap.is-gedaan::after {
  transform: scaleX(1);
}

/* --------------------------------------------------------------------------
   3. DE STAPPEN

   Verbergen gebeurt met display: none en niets anders. Een verborgen stap is
   daarmee uit de tabvolgorde en uit de toegankelijkheidsboom; er blijft geen
   knop achter die je met Tab kunt raken maar niet kunt zien.

   Dat betekent ook dat de vertrekkende stap niet mee kan animeren: display
   valt op hetzelfde moment weg. De keuze is bewust. Een uitloop met
   transition-behavior: allow-discrete houdt het element nog een kwart seconde
   focusbaar, en dat weegt niet op tegen de animatie.

   De binnenkomst draagt de vooruitgang daarom alleen: de nieuwe stap schuift
   van rechts binnen, en de drie onderdelen erin volgen elkaar met 45ms
   verschil op. Samen met de voortgangsbalk die in 400ms verder vult, leest de
   wissel als een stap vooruit.
   -------------------------------------------------------------------------- */

.vp-stap {
  display: none;
}

.vp-stap.is-actief {
  /* Geen rij-afstand: elk onderdeel van een stap draagt zijn eigen marge. Zo
     staat de tekst in de stroomstand en in de stand zonder JavaScript even
     ver uit elkaar, en hoeft geen enkele marge tegen een gap in te werken. */
  grid-row-gap: 0;
  flex-flow: column;
  display: flex;
  animation: vp-stap-binnen .34s cubic-bezier(.16, 1, .3, 1) both;
}

/* Een afgeronde stap blijft verborgen. De klasse zegt alleen dat het antwoord
   binnen is; de voortgangsbalk laat dat zien. Staat is-gedaan toch samen met
   is-actief op hetzelfde element, dan wint is-actief hierboven op volgorde. */
.vp-stap.is-gedaan:not(.is-actief) {
  display: none;
}

/* Elk blok in een stap houdt dezelfde afstand tot het vorige, ook een blok
   waar dit bestand geen klasse voor heeft. De veldenstap heeft bijvoorbeeld
   geen .vp-stap-hulp; zonder deze regel plakt daar het eerste label tegen de
   vraag aan. De regel staat binnen .vp-stap, dus zonder JavaScript verandert
   er niets aan het gewone formulier. */
.vp-stap.is-actief > * {
  margin-top: 18px;
}

.vp-stap.is-actief > .vp-stap-vraag {
  margin-top: 0;
}

.vp-stap.is-actief > .vp-stap-hulp {
  margin-top: 8px;
}

@keyframes vp-stap-binnen {
  from {
    opacity: 0;
    transform: translate3d(22px, 0, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes vp-stap-deel {
  from {
    opacity: 0;
    transform: translate3d(0, 10px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.vp-stap.is-actief > .vp-stap-vraag,
.vp-stap.is-actief > .vp-stap-hulp,
.vp-stap.is-actief > .vp-stap-opties {
  animation: vp-stap-deel .38s cubic-bezier(.16, 1, .3, 1) both;
}

.vp-stap.is-actief > .vp-stap-hulp {
  animation-delay: 45ms;
}

.vp-stap.is-actief > .vp-stap-opties {
  animation-delay: 90ms;
}

/* De knoppenrij zakt naar de onderrand van het paneel, zodat Verder op elke
   stap op dezelfde plek staat. Werkt of de knoppen nu los in de stap staan of
   in een omhulsel; is er geen omhulsel, dan gebeurt er niets en valt de rij
   gewoon achter de inhoud. */
.vp-stap.is-actief > *:has(> .vp-stap-verder),
.vp-stap.is-actief > *:has(> .vp-stap-terug) {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  flex-flow: wrap;
  align-items: center;
  margin-top: auto;
  padding-top: 10px;
  display: flex;
}

/* --------------------------------------------------------------------------
   4. VRAAG EN HULPREGEL

   De vraag staat op navy: 10,11 op het papieren paneel. De hulpregel op de
   lopende tekstkleur: 5,02 op datzelfde vlak. Beide ruim boven de 4,5 die
   kleine tekst nodig heeft.
   -------------------------------------------------------------------------- */

/* De maat staat met opzet BINNEN .vp-stap. Zonder JavaScript draagt dezelfde
   h3 ook .vp-groep-kop en staat het formulier met vier vragen onder elkaar;
   vier koppen van 28px maken daar een lijst van schermkoppen van. Zodra het
   script er een stap van maakt staat er nog maar één vraag in beeld, en dan
   mag hij groot. Kleur en gewicht gelden in beide standen. */
.vp-stap-vraag {
  color: var(--color--blue-950);
  line-height: var(--_typography---font-line-height--medium);
  font-weight: var(--_typography---font-weight--bold);
  text-wrap: balance;
}

.vp-stap .vp-stap-vraag {
  font-size: clamp(21px, 1.1vw + 17px, var(--_typography---typography--h3));
  margin: 0;
}

/* Het script zet tabindex="-1" op de vraag en verplaatst de focus ernaartoe
   na een wissel. Dat is een programmatische focus, geen toetsaanslag, dus er
   hoort geen ring omheen; komt iemand er met het toetsenbord toch op, dan
   staat hij er wel. */
.vp-stap-vraag:focus {
  outline: none;
}

.vp-stap-vraag:focus-visible {
  outline: 3px solid var(--vp-accent-op-licht);
  outline-offset: 3px;
}

/* De hulpregel houdt een gewone bovenmarge in plaats van een negatieve, want
   in de zonder-JavaScript-stand staat er geen flex-gap boven waar hij tegenin
   moet werken. .vp-stap zet zijn rij-afstand daarom op 0 en laat de marges
   het werk doen; zo staat de tekst in beide standen even ver uit elkaar. */
.vp-stap-hulp {
  color: var(--color--gray-900);
  font-size: var(--_typography---paragraph-font-size--small-paragraph);
  line-height: var(--_typography---font-line-height--large);
  font-weight: var(--_typography---font-weight--medium);
  max-width: 52ch;
  margin: 8px 0 0;
}

/* --------------------------------------------------------------------------
   5. DE ANTWOORDKNOPPEN

   Vorm: hetzelfde klikvlak als .vp-keuze in vp/contact.css. Radius 12, dus
   geen pil, want dit is geen label maar een knop.

   Aanwijzen, focus en keuze zijn drie verschillende dingen en ze zijn alle
   drie apart te zien:

     aanwijzen   het vlak kleurt naar de accenttint en de knop komt 1px omhoog
     focus       een ring van 3px accent op licht, met 2px lucht
     gekozen     de accenttint blijft staan en er komt een tweede randlijn bij

   De keuze hangt hier niet aan kleur, en het is het BOLLETJE dat dat draagt:
   elke optie op contact/index.html is een <label> om een echte radio heen, en
   een gevulde radio is een vorm die er bij een niet-gekozen knop niet is.

   HET VINKJE HIERONDER STAAT OP DEZE PAGINA DUS NOOIT IN BEELD. De regel
   .vp-optie:has(input[type="radio"])::after zet het op content:none, en alle
   zestien opties hebben een radio. Gemeten op 29 augustus 2026: zestien van
   zestien. Het blijft om twee redenen staan. Het is de enige vormdrager voor
   een .vp-optie ZONDER eigen bedieningselement, bijvoorbeeld een knop. En het
   is het vangnet in een browser die :has() niet kent: daar vervalt de
   content:none-regel en tekent het script de gekozen stand nog steeds met de
   klasse is-gekozen, die hier los van :has() staat.

   De kleurwissel loopt via ::before. Dat pseudo-element draagt de accentrand
   en het accentvlak en laat alleen zijn opacity lopen, dus er wordt geen
   background-color of border-color geanimeerd. z-index -1 in een geïsoleerde
   knop zet het boven het eigen vlak en onder de tekst.

   Contrast: de tekst staat op --vp-ink, 12,84 op het krijtvlak en 12,19 op de
   accenttint. De rust-rand haalt 3,32 op het krijtvlak dat hij omsluit, de accentrand 5,50
   op de tint. Het raakvlak is gemeten 48px hoog bij een optie van een regel en
   groeit mee bij twee regels, dus ruim boven de 44.
   -------------------------------------------------------------------------- */

.vp-stap-opties {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  grid-template-columns: 1fr;
  list-style: none;
  /* Ook zonder JavaScript staat deze marge er; vp/contact.css zet op
     .vp-keuzes 16px en die wordt hier overschreven, dus hij moet terug. */
  margin: 18px 0 0;
  padding: 0;
  display: grid;
}

@media (min-width: 768px) {
  .vp-stap-opties {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }
}

.vp-optie {
  position: relative;
  isolation: isolate;
  grid-row-gap: 2px;
  flex-flow: column;
  /* flex-start en niet center: zodra de knop in de rijstand staat, omdat er
     een bolletje in zit, zou center de tekst horizontaal in het midden van de
     knop zetten. Een optie van één regel kwam dan gecentreerd te staan en een
     optie van twee regels links, in dezelfde lijst. */
  justify-content: flex-start;
  align-items: flex-start;
  /* 15 + 15 padding om een regel van 19,2px heen is 49,2px, dus het raakvlak
     haalt de 44 zonder min-height. Dat is met opzet: met een vaste minimum-
     hoogte zou een optie van één regel zijn bolletje in het midden van een
     lege doos hangen en een optie van twee regels niet. Nu staat het bolletje
     altijd op de eerste regel. De 48px hieronder is alleen een vangnet voor
     een optie zonder tekst. */
  min-height: 48px;
  width: 100%;
  border: 1px solid rgba(34, 48, 59, .55);
  border-radius: 12px;
  background-color: var(--vp-kaart);
  color: var(--vp-ink);
  cursor: pointer;
  /* Rechts blijft 42px vrij voor het vinkje, altijd, ook als er nog geen
     vinkje staat. Anders verspringt de tekst op het moment van kiezen. */
  padding: 15px 42px 15px 15px;
  margin: 0;
  font-family: inherit;
  font-size: var(--_typography---paragraph-font-size--small-paragraph);
  line-height: var(--_typography---font-line-height--medium);
  font-weight: var(--_typography---font-weight--semi-bold);
  text-align: left;
  -webkit-appearance: none;
  appearance: none;
  transition: transform .2s ease;
  display: flex;
}

/* De accentstand. Ligt er altijd overheen, maar op opacity 0. */
.vp-optie::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -1px;
  border: 1px solid var(--vp-accent-op-licht);
  border-radius: inherit;
  background-color: var(--vp-accent-tint);
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
}

/* Het vinkje. Twee randen van een leeg blokje, 45 graden gedraaid. Groeit van
   55 naar 100 procent, dus de vorm komt er zichtbaar bij. */
.vp-optie::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 18px;
  width: 7px;
  height: 13px;
  border: solid var(--vp-accent-op-licht);
  border-width: 0 2.5px 2.5px 0;
  opacity: 0;
  transform: translate3d(0, -62%, 0) rotate(45deg) scale(.55);
  transition: opacity .22s ease, transform .28s cubic-bezier(.16, 1, .3, 1);
  pointer-events: none;
}

.vp-optie:hover {
  transform: translate3d(0, -1px, 0);
}

/* Aanwijzen is zwakker dan kiezen. Op .6 is de tint duidelijk te zien maar
   blijft hij lichter dan de gekozen stand hieronder, die op 1 staat en er een
   tweede randlijn bij krijgt. Zonder dat verschil leest een aangewezen optie
   als een gekozen optie. */
.vp-optie:hover::before {
  opacity: .6;
}

/* De ring staat op het hele klikvlak. 3px accent op licht met 2px lucht: op
   het papieren paneel haalt die 5,36 en op het krijtvlak van de knop 5,80,
   allebei boven de 3:1 die een focusring nodig heeft. */
.vp-optie:focus-visible {
  outline: 3px solid var(--vp-accent-op-licht);
  outline-offset: 2px;
}

.vp-optie.is-gekozen::before,
.vp-optie:has(input:checked)::before {
  opacity: 1;
  /* Een tweede lijn binnen de rand in plaats van een dikkere rand: de doos
     blijft even groot, dus er schuift niets. */
  box-shadow: inset 0 0 0 1px var(--vp-accent-op-licht);
}

.vp-optie.is-gekozen::after,
.vp-optie:has(input:checked)::after {
  opacity: 1;
  transform: translate3d(0, -62%, 0) rotate(45deg) scale(1);
}

/* Zit er een echte radio of checkbox in de knop, dan hoort de ring om het
   hele vlak en niet om het bolletje. */
.vp-optie:has(input:focus-visible) {
  outline: 3px solid var(--vp-accent-op-licht);
  outline-offset: 2px;
}

/* vp/contact.css laat .vp-keuze bij aanwijzen en bij een aangevinkte radio
   zelf van rand en vlak wisselen, met een overgang op border-color en
   background-color. Diezelfde elementen dragen hier .vp-optie, en die stand
   komt van het pseudo-element hierboven. De rusttoon wordt daarom vastgezet,
   anders staan er twee stelsels op één knop en loopt er alsnog een
   kleurovergang mee. */
.vp-optie:hover,
.vp-optie.is-gekozen,
.vp-optie:has(input:checked) {
  border-color: rgba(34, 48, 59, .55);
  background-color: var(--vp-kaart);
}

/* Chromium tekent op een radio met focus zijn eigen ring, en die is blauw.
   Blauw zit niet in dit palet, en er staat al een accentring om het hele
   klikvlak. Die binnenring gaat daarom weg, maar ALLEEN in de regel die zelf
   met :has() begint: kent een browser :has() niet, dan valt deze hele regel
   weg en houdt het bolletje zijn eigen ring, zodat de focus nooit onzichtbaar
   wordt. */
.vp-optie:has(input:focus-visible) input:focus-visible {
  outline: none;
}

/* Zit er een echt bolletje in, dan staat dat links van de tekst en niet erboven,
   op de eerste regel. Zelfde stand als .vp-keuze in vp/contact.css.

   Het vinkje rechts vervalt dan. Het bolletje draagt de gekozen stand al in
   vorm, en twee vormen voor hetzelfde antwoord is er een te veel. Bij een
   .vp-optie zonder bolletje, bijvoorbeeld een knop, blijft het vinkje staan;
   dan is het de enige vorm die de keuze draagt. */
.vp-optie:has(input[type="radio"]),
.vp-optie:has(input[type="checkbox"]) {
  grid-column-gap: 12px;
  flex-flow: row;
  align-items: flex-start;
  padding-right: 15px;
}

.vp-optie:has(input[type="radio"])::after,
.vp-optie:has(input[type="checkbox"])::after {
  content: none;
}

.vp-optie:has(input) > :is(span, div) {
  grid-row-gap: 2px;
  flex-flow: column;
  display: flex;
}

.vp-optie input[type="radio"],
.vp-optie input[type="checkbox"] {
  accent-color: var(--vp-accent-op-licht);
  flex: none;
  width: 18px;
  height: 18px;
  /* 1px zakken laat het bolletje van 18px optisch samenvallen met een regel
     van 19,2px. */
  margin: 1px 0 0;
}

/* Een optie mag een naam en een toelichting dragen. Dan is de naam de regel
   waar de blik op valt en staat de uitleg er een maat kleiner onder. */
.vp-optie > small,
.vp-optie .vp-optie-uitleg {
  color: var(--color--gray-900);
  font-size: var(--_typography---paragraph-font-size--extra-small-paragraph);
  line-height: var(--_typography---font-line-height--large);
  font-weight: var(--_typography---font-weight--semi-bold);
  margin-top: 3px;
}

/* --------------------------------------------------------------------------
   6. HET INVOERVELD

   Overgenomen van .vp-invoer in vp/contact.css: radius 10, rand op .60 (3,81 tegen
   het krijtvlak in het veld, 3,68 tegen het papieren paneel eromheen), krijtvlak, tekst op ink. De randkleur wisselt hier zonder
   overgang, want een randkleur is geen compositor-eigenschap en de wissel
   hoort bij focus, waar uitstel juist hindert.
   -------------------------------------------------------------------------- */

.vp-stap-veld,
.vp-stap-veld input,
.vp-stap-veld textarea {
  width: 100%;
  min-height: 48px;
  border: 1px solid rgba(34, 48, 59, .60);
  border-radius: 10px;
  background-color: var(--vp-kaart);
  color: var(--vp-ink);
  padding: 12px 14px;
  font-family: inherit;
  font-size: var(--_typography---paragraph-font-size--small-paragraph);
  line-height: var(--_typography---font-line-height--medium);
  font-weight: var(--_typography---font-weight--semi-bold);
  /* vp/contact.css laat .vp-invoer zijn border-color in 200ms lopen. Deze
     velden dragen beide klassen, en een randkleur is geen compositor-
     eigenschap. Bij focus is uitstel bovendien hinderlijk. */
  transition: none;
}

/* Is .vp-stap-veld een omhulsel in plaats van het veld zelf, dan mag het
   omhulsel geen tweede doos tekenen. */
.vp-stap-veld:has(input),
.vp-stap-veld:has(textarea) {
  border: 0;
  background-color: #0000;
  padding: 0;
  min-height: 0;
}

textarea.vp-stap-veld,
.vp-stap-veld textarea {
  line-height: var(--_typography---font-line-height--large);
  resize: vertical;
  min-height: 132px;
}

.vp-stap-veld:hover,
.vp-stap-veld input:hover,
.vp-stap-veld textarea:hover {
  border-color: var(--vp-navy);
}

.vp-stap-veld:focus-visible,
.vp-stap-veld input:focus-visible,
.vp-stap-veld textarea:focus-visible {
  border-color: var(--vp-accent-op-licht);
  outline: 3px solid var(--vp-accent-op-licht);
  outline-offset: 2px;
}

/* De foutmelding, tweede haak.

   vp/contact.css toont .vp-fout bij :user-invalid. Dat vuurt pas nadat de
   bezoeker het veld heeft aangeraakt, en in de stroom kun je op Volgende
   drukken zonder één veld te hebben aangeklikt. Het script zet daarom
   aria-invalid, en deze regel maakt de melding zichtbaar.

   Het script deed dat tot 29 augustus 2026 met style.display uit JavaScript.
   Dat is opmaak uit een script, en die hoort hier. */
.vp-stroom .vp-veld :is(input, textarea)[aria-invalid="true"] ~ .vp-fout {
  display: block;
}

/* --------------------------------------------------------------------------
   7. VERDER EN TERUG

   Verder is de hoofdknop en houdt de vorm van .vp-verstuur aan: pilvorm,
   outline in rust, vult bij aanwijzen. Zelfde canon als elke andere knop op
   de site (vp/site-canon.css), zodat de wizard en de eindknop gelijk ogen.

   Terug is stil: geen vlak, navy tekst, dezelfde pilvorm. Bij aanwijzen komt
   het bandvlak eronder tevoorschijn.

   Beide zijn minstens 48px hoog en 44px breed.
   -------------------------------------------------------------------------- */

.vp-stap-verder,
.vp-stap-terug {
  position: relative;
  isolation: isolate;
  grid-column-gap: 8px;
  justify-content: center;
  align-items: center;
  min-height: 48px;
  min-width: 44px;
  border-radius: var(--_spacing---radius--100px);
  cursor: pointer;
  padding: 11px 26px;
  font-family: inherit;
  font-size: var(--_typography---paragraph-font-size--small-paragraph);
  line-height: var(--_typography---font-line-height--medium);
  font-weight: var(--_typography---font-weight--bold);
  text-decoration: none;
  -webkit-appearance: none;
  appearance: none;
  transition: transform .2s ease;
  display: inline-flex;
}

.vp-stap-verder::before,
.vp-stap-terug::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
}

.vp-stap-verder {
  border: 2px solid var(--vp-accent-hover, #883815);
  background-color: transparent;
  color: var(--vp-accent-hover, #883815);
}

.vp-stap-verder:hover {
  color: #fff;
}

.vp-stap-verder::before {
  border-radius: var(--_spacing---radius--100px);
  background-color: var(--vp-accent-hover);
  /* Het vlak loopt tot onder de 2px rand door, anders blijft er bij het
     aanwijzen een lichte ring van de oude toon staan. */
  inset: -2px;
}

.vp-stap-verder:hover::before {
  opacity: 1;
}

.vp-stap-verder:hover {
  transform: translate3d(0, -1px, 0);
}

.vp-stap-verder:focus-visible {
  outline: 3px solid var(--vp-accent-op-licht, #a5441a);
  outline-offset: 3px;
}

.vp-stap-verder[disabled],
.vp-stap-verder[aria-disabled="true"] {
  /* Geen half doorzichtige knop: die zakt door het contrast heen. De uitstand
     is het bandvlak met gedempte tekst, gemeten 4,68. */
  border-color: var(--vp-lijn);
  background-color: var(--vp-band);
  color: var(--vp-gedempt);
  cursor: not-allowed;
}

.vp-stap-verder[disabled]:hover,
.vp-stap-verder[aria-disabled="true"]:hover {
  transform: none;
}

.vp-stap-verder[disabled]:hover::before,
.vp-stap-verder[aria-disabled="true"]:hover::before {
  opacity: 0;
}

.vp-stap-terug {
  border: 2px solid #0000;
  background-color: #0000;
  color: var(--color--blue-950);
  padding-left: 18px;
  padding-right: 18px;
}

.vp-stap-terug::before {
  background-color: var(--vp-band);
}

.vp-stap-terug:hover::before {
  opacity: 1;
}

.vp-stap-terug:focus-visible {
  outline: 3px solid var(--vp-accent-op-licht);
  outline-offset: 3px;
}

/* Terug heeft geen eigen vlak, dus zijn linkerpadding leest als een inspringing
   ten opzichte van de tekst erboven. De doos blijft even groot, hij schuift
   alleen terug tot het label op de tekstrand staat. */
.vp-stap-terug:first-child {
  margin-left: -18px;
}

/* --------------------------------------------------------------------------
   8. DE SAMENVATTING

   Dit is een overzicht en geen formulier, dus er staat geen enkele doos om
   een antwoord heen. Alleen een krijtvlak met haarlijnen ertussen. De vraag
   staat klein en gedempt boven het antwoord, het antwoord staat op ink.

   Contrast: label --vp-gedempt op krijt is 5,09, antwoord --vp-ink op krijt
   is 12,84.
   -------------------------------------------------------------------------- */

/* Zolang er niets beantwoord is bouwt het script een lege <dl>. Een lege doos
   met een rand leest als een invoerveld dat het niet doet. */
.vp-samenvatting:empty {
  display: none;
}

.vp-samenvatting {
  border-radius: var(--_spacing---radius--24px);
  background-color: var(--vp-kaart);
  border: 1px solid var(--color--black-100);
  padding: 22px 24px;
  margin: 0;
  list-style: none;
}

/* Werkt met een dl, met een ul en met losse blokken. */
.vp-samenvatting > :is(div, li, p, dt) + :is(div, li, p, dt) {
  border-top: 1px solid var(--color--black-100);
  margin-top: 14px;
  padding-top: 14px;
}

.vp-samenvatting dt,
.vp-samenvatting .vp-samenvatting-vraag {
  color: var(--vp-gedempt);
  font-size: var(--_typography---paragraph-font-size--extra-small-paragraph);
  line-height: var(--_typography---font-line-height--large);
  font-weight: var(--_typography---font-weight--semi-bold);
  margin: 0;
}

.vp-samenvatting dd,
.vp-samenvatting .vp-samenvatting-antwoord {
  color: var(--vp-ink);
  font-size: var(--_typography---paragraph-font-size--small-paragraph);
  line-height: var(--_typography---font-line-height--large);
  font-weight: var(--_typography---font-weight--semi-bold);
  margin: 3px 0 0;
}

/* Een wijzigknop bij een regel blijft tekst met een streep eronder, want een
   tweede pilvorm naast Verder zou als tweede hoofdknop lezen. */
.vp-samenvatting a,
.vp-samenvatting button {
  color: var(--vp-accent-hover);
  background: none;
  border: 0;
  padding: 0;
  font-family: inherit;
  font-size: var(--_typography---paragraph-font-size--extra-small-paragraph);
  font-weight: var(--_typography---font-weight--bold);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.vp-samenvatting a:focus-visible,
.vp-samenvatting button:focus-visible {
  outline: 3px solid var(--vp-accent-op-licht);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   9. GEEN BEDANKSTAND

   Hier stond .vp-stroom-klaar: een teal blok met een vinkje voor de stand na
   het versturen. Weggehaald op 29 augustus 2026, want die stand kan op deze
   pagina niet bestaan. content/contact.md zet hem onder "niet gebouwd": het
   formulier verstuurt naar niets, dus er valt na het versturen niets te
   tonen, en er staat in dat bestand ook geen tekst voor. Opmaak voor een
   stand die de contentbron verbiedt zet de volgende sessie op het verkeerde
   been, dus die is nu weg in plaats van uitgeschakeld.

   Komt de bedankstand er ooit toch, dan begint dat bij een tekst in
   content/contact.md en niet bij een regel hier.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   10. SMALLERE SCHERMEN

   Onder 480px staat het paneel minder ver van de rand, staan de knoppen over
   de volle breedte en verdwijnt de vloer onder de paneelhoogte: op een
   telefoon is een leeg onderstuk hinderlijker dan een springende pagina.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .vp-stroom {
    padding: 24px 20px;
  }

  .vp-voortgang {
    margin-bottom: 24px;
  }
}

@media (max-width: 479px) {
  .vp-stroom {
    min-height: 0;
    padding: 20px 16px;
  }

  .vp-stroom::before {
    inset: auto -30px -30px auto;
    width: 170px;
    height: 170px;
  }

  /* Zes stappen naast elkaar op 375px laat 48px per stap over. Het nummer
     past, de rest niet, dus de tekst verdwijnt onder de balk vandaan en de
     vulling draagt het verhaal alleen. Er staat dan nog altijd geen kleur
     zonder vorm: leeg, half en vol blijven te onderscheiden. */
  .vp-voortgang-stap {
    font-size: 11px;
    padding-top: 14px;
    text-align: center;
  }

  .vp-stap.is-actief > * > .vp-stap-verder,
  .vp-stap.is-actief > * > .vp-stap-terug {
    flex: 1 1 100%;
  }

  /* Over de volle breedte staat het label van Terug al in het midden. De
     optische verschuiving hierboven zou de doos dan buiten het paneel duwen. */
  .vp-stap-terug:first-child {
    margin-left: 0;
  }
}

/* --------------------------------------------------------------------------
   11. BEWEGINGSVOORKEUR

   Onder reduce blijft elke wissel staan, maar er schuift en schaalt niets
   meer. De voortgangsbalk springt naar zijn nieuwe vulling in plaats van
   ernaartoe te groeien, de nieuwe stap staat er meteen, en de knoppen komen
   niet meer omhoog. Kleur en vlak wisselen wel gewoon door, want dat is geen
   beweging.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .vp-stap.is-actief,
  .vp-stap.is-actief > .vp-stap-vraag,
  .vp-stap.is-actief > .vp-stap-hulp,
  .vp-stap.is-actief > .vp-stap-opties {
    animation: none;
  }

  .vp-voortgang-stap::after,
  .vp-optie,
  .vp-optie::after,
  .vp-stap-verder,
  .vp-stap-terug {
    transition: none;
  }

  .vp-optie:hover,
  .vp-stap-verder:hover {
    transform: none;
  }

  .vp-optie::after {
    transform: translate3d(0, -62%, 0) rotate(45deg) scale(1);
  }
}