/* ==========================================================================
   vp/contact.css, alleen voor contact/index.html.

   De template levert de vlakken, de radii, de gloed en de typografie. Dit
   bestand doet wat de template niet heeft, en dat is precies één ding: een
   formulier. In de hele Webflow-export staat geen enkel invoerveld, dus de
   basisregels uit css/webflow.css zijn nog de kale fabrieksinstelling
   (wit vlak, rand #ccc, tekst #333). Die kleuren horen niet bij deze site en
   halen op papier het contrast niet, dus alles wat een veld draagt staat
   hieronder opnieuw.

   GEEN backdrop-filter. De opdrachtgever kijkt in Safari, en dat patroon is
   in dit project op 23 augustus 2026 al een keer in WebKit stukgelopen.
   Er wordt alleen transform, opacity, filter en kleur geanimeerd.

   Over de huisregel "een label is tekst, geen capsule": de omkaderde
   antwoordopties hieronder zijn geen labels maar klikvlakken om een radio
   heen. Vorm mag daar, en de radius is 12px en dus geen pil. De enige
   100px-radius in dit bestand staat op de verstuurknop, die de vorm van
   .app-button en .button uit de template aanhoudt.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Ankers en secties. Gedeelde ankerafstand, zodat een bezoeker die op
   #aanvraag binnenkomt de kop ziet en niet de onderrand ervan.
   -------------------------------------------------------------------------- */
#aanvraag,
#formulier,
#kennismaken {
  scroll-margin-top: clamp(88px, 6vw + 40px, 132px);
}

/* --------------------------------------------------------------------------
   DE VRAGEN HOGER OP DE PAGINA, 30 augustus 2026.

   De opdrachtgever wilde het formulier meer naar boven. Gemeten liep er
   tussen de onderkant van de H1 en de bovenkant van de eerste vraag 239px
   (375) tot 355px (1920), en die stapel bestond uit vier delen: de
   onderruimte van de hero, de bovenruimte van #aanvraag, de padding van het
   paneel, en de voortgangsbalk plus teller die vp/contact-stappen.js erin
   zet. Die laatste twee blijven zoals ze zijn: het paneel heeft zijn 32px
   nodig om als paneel te lezen, en de balk hoort bij een bestand dat ik niet
   aanraak.

   De eerste twee zijn hier wel kleiner gezet, en alleen op deze pagina. De
   hero draagt op contact alleen nog een H1 van één regel; 120px lucht
   eronder is de maat voor een hero met een alinea, twee knoppen en een
   illustratie, en die staan hier niet meer. De bovenruimte van #aanvraag
   deed daar nog eens 62px bovenop.

   overflow: hidden op .hero-section blijft staan, dus de gloed wordt
   onderaan iets hoger afgeknipt dan eerst. Dat is gecontroleerd op de
   schermafdrukken: de gloed piekt op 60 procent van zijn straal en die piek
   staat nog steeds binnen de hero.
   -------------------------------------------------------------------------- */

#home.hero-section {
  padding-top: 130px;
  padding-bottom: 56px;
}

#aanvraag {
  padding-top: clamp(16px, 1.6vw, 28px);
}

@media (max-width: 991px) {
  #home.hero-section {
    padding-top: 130px;
    padding-bottom: 48px;
  }
}

@media (max-width: 767px) {
  #home.hero-section {
    padding-top: 110px;
    padding-bottom: 40px;
  }
}

@media (max-width: 479px) {
  #home.hero-section {
    padding-top: 90px;
    padding-bottom: 32px;
  }
}

/* Een sectie met overflow: hidden knipt de focusring van een veld af zodra
   die tot de rand komt. Alleen horizontaal dichtzetten houdt de gloedvlakken
   binnen en laat de ring staan. */
.vp-contact-sectie {
  overflow: visible;
  overflow-x: clip;
}

.vp-contact-inleiding {
  max-width: 640px;
}

.vp-slot-tekst {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

/* --------------------------------------------------------------------------
   De twee kolommen: het formulier links, de bewijsregels en de gegevens
   rechts. Onder 992px staat de kolom ernaast onder het formulier.
   -------------------------------------------------------------------------- */

.vp-contact-grid {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  grid-template-columns: minmax(0, 1fr) 280px;
  align-items: start;
  display: grid;
}

.vp-contact-naast {
  grid-row-gap: 28px;
  flex-flow: column;
  display: flex;
  position: sticky;
  top: clamp(96px, 6vw + 48px, 140px);
}

/* De drie bewijsregels staan hier onder elkaar in plaats van naast elkaar.
   .feature-count-wrapper is van zichzelf een gecentreerde rij. */
.vp-pluspunten {
  grid-column-gap: 18px;
  grid-row-gap: 18px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.vp-contact-gegevens {
  border-top: 1px solid var(--color--black-100);
  grid-row-gap: 14px;
  flex-flow: column;
  padding-top: 22px;
  display: flex;
}

.vp-adres {
  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--semi-bold);
  font-style: normal;
}

.vp-link {
  color: var(--vp-accent-hover);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.vp-link:hover {
  color: var(--vp-accent-op-licht);
}

/* Zonder deze regel krijgt de link de fabrieksring van de browser, en die is
   blauw en dus niet van deze site. */
.vp-link:focus-visible {
  outline: 3px solid var(--vp-accent-op-licht);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Het formulier zelf. Papier onder de kaarten, precies zoals .feature-card
   het gebruikt, met de invoervelden een tint lichter erin.
   -------------------------------------------------------------------------- */

.vp-form {
  border-radius: var(--_spacing---radius--24px);
  background-color: var(--color--gray-50);
  grid-row-gap: 28px;
  flex-flow: column;
  padding: 32px;
  display: flex;
  margin: 0;
}

/* De regel boven de vier vragen. Hij gaat over de hele set, dus hij hangt aan
   geen enkele vraaggroep en staat een tint donkerder dan .vp-groep-hulp, zodat
   hij als inleiding leest en niet als toelichting bij de eerste vraag. De
   negatieve marge haalt hem terug in de 28px flex-gap van .vp-form.

   In de stroom klopt die negatieve marge niet meer, want daar staat de
   rij-afstand op 0. vp/contact-stappen.css zet hem daar op 16px. */
.vp-form-hulp {
  color: var(--color--gray-900);
  font-size: var(--_typography---paragraph-font-size--small-paragraph);
  line-height: var(--_typography---font-line-height--large);
  margin: 0 0 -8px;
}

/* --------------------------------------------------------------------------
   De vier vragen. Elke vraag is een div met role="radiogroup" en een h3 als
   kop; de toelichting eronder hangt met aria-describedby aan diezelfde div.
   Geen fieldset met een legend: de stroom-css zet de stap op display:flex, en
   een legend telt daar niet mee als flex-item. De uitleg staat in de head van
   contact/index.html.
   -------------------------------------------------------------------------- */

.vp-groep {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

/* De vraagkoppen zijn sinds 30 augustus 2026 h2 en geen h3 meer. Reden: de
   zichtbare sectiekop boven de stroom is er niet, dus liep de pagina van h1
   rechtstreeks naar h3 en zat er een gat in de niveaus. Alles wat de tag
   meebrengt staat hieronder overschreven; letter-spacing staat er alleen
   voor h2, want de template zet die op -1px en dat hoort bij een sectiekop
   van 44px, niet bij een vraag van 20px. */
.vp-groep-kop {
  color: var(--color--blue-950);
  letter-spacing: normal;
  font-size: var(--_typography---paragraph-font-size--large-paragraph);
  line-height: var(--_typography---font-line-height--medium);
  font-weight: var(--_typography---font-weight--bold);
  padding: 0;
  margin: 0;
}

.vp-groep-hulp {
  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: 6px 0 0;
}

.vp-keuzes {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  grid-template-columns: 1fr;
  margin-top: 16px;
  display: grid;
}

@media (min-width: 768px) {
  .vp-keuzes-kort {
    grid-template-columns: 1fr 1fr;
  }
}

/* Een klikvlak om een radio heen, geen label-capsule. Radius 12, geen pil.
   De rand haalt op .55 gemeten 3,24 op het papieren vlak. Het bolletje is het
   eigenlijke bedieningselement, maar een omtrek die je niet ziet maakt van
   zestien opties één grijze lap. */
.vp-keuze {
  grid-column-gap: 12px;
  align-items: flex-start;
  border: 1px solid rgba(34, 48, 59, .55);
  border-radius: 12px;
  background-color: var(--vp-kaart);
  cursor: pointer;
  padding: 12px 14px;
  margin: 0;
  font-weight: var(--_typography---font-weight--semi-bold);
  display: flex;
  transition: border-color .2s ease, background-color .2s ease;
}

.vp-keuze:hover {
  border-color: var(--vp-accent-op-licht);
  background-color: var(--vp-accent-tint);
}

.vp-keuze input[type="radio"] {
  accent-color: var(--vp-accent-op-licht);
  flex: none;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
}

.vp-keuze:has(input:checked) {
  border-color: var(--vp-accent-op-licht);
  background-color: var(--vp-accent-tint);
}

/* De ring staat op het hele klikvlak en niet op het bolletje, want dan zie je
   welke optie de focus heeft. :has(:focus-visible) en niet :focus-within, want
   anders springt de ring ook aan na een muisklik. Het bolletje houdt daarnaast
   zijn eigen ring: valt :has() ergens weg, dan is de focus nog steeds te zien. */
.vp-keuze:has(input:focus-visible) {
  outline: 3px solid var(--vp-accent-op-licht);
  outline-offset: 2px;
}

.vp-keuze-tekst {
  grid-row-gap: 2px;
  flex-flow: column;
  display: flex;
}

.vp-keuze-naam {
  color: var(--vp-ink);
  font-size: var(--_typography---paragraph-font-size--small-paragraph);
  line-height: var(--_typography---font-line-height--medium);
}

.vp-keuze-uitleg {
  color: var(--color--gray-900);
  font-size: var(--_typography---paragraph-font-size--extra-small-paragraph);
  line-height: var(--_typography---font-line-height--large);
}

/* --------------------------------------------------------------------------
   De invoervelden
   -------------------------------------------------------------------------- */

.vp-velden {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-columns: 1fr 1fr;
  display: grid;
}

@media (max-width: 767px) {
  .vp-velden {
    grid-template-columns: 1fr;
  }
}

.vp-veld {
  min-width: 0;
}

.vp-veld-breed {
  grid-column: 1 / -1;
}

/* css/webflow.css zet label op display:block met font-weight:bold. Dat blijft
   staan, alleen de kleur en de maat komen uit de designtaal. */
.vp-veld label {
  color: var(--color--blue-950);
  font-size: var(--_typography---paragraph-font-size--small-paragraph);
  line-height: var(--_typography---font-line-height--medium);
  font-weight: var(--_typography---font-weight--bold);
  margin-bottom: 6px;
}

/* De rand is de enige omtrek van het veld, dus die moet de 3:1 halen die een
   bedieningselement nodig heeft. Op .45 was hij gemeten 2,50 en dus te licht;
   op .60 wordt hij rgb(118,125,129) op het papieren vlak en haalt hij 3,68.
   Geen placeholder: die verdwijnt bij het typen en is dus geen label. */
.vp-invoer {
  color: var(--vp-ink);
  background-color: var(--vp-kaart);
  border: 1px solid rgba(34, 48, 59, .60);
  border-radius: 10px;
  width: 100%;
  padding: 11px 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);
  transition: border-color .2s ease;
}

.vp-invoer-groot {
  line-height: var(--_typography---font-line-height--large);
  resize: vertical;
  min-height: 128px;
}

.vp-invoer:hover {
  border-color: var(--vp-navy);
}

.vp-invoer:focus-visible {
  border-color: var(--vp-accent-op-licht);
  outline: 3px solid var(--vp-accent-op-licht);
  outline-offset: 2px;
}

.vp-hulp {
  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: 6px 0 0;
}

/* --------------------------------------------------------------------------
   De foutmeldingen.

   :user-invalid vuurt pas nadat de bezoeker het veld heeft aangeraakt of het
   formulier heeft verstuurd, dus niemand krijgt een rode regel te zien voor
   hij één toets heeft ingedrukt. Er is geen JavaScript voor nodig.

   De melding hangt met aria-describedby aan zijn veld. Zolang hij op
   display:none staat is er geen beschrijving; zodra hij zichtbaar wordt,
   leest een schermlezer hem bij het veld voor.

   De kleur is het accent bij hover, #883815: 7,61 op het veldvlak. De tekst
   zegt zelf wat er mis is, dus de betekenis hangt nergens alleen aan kleur.
   -------------------------------------------------------------------------- */

.vp-fout {
  color: var(--vp-accent-hover);
  font-size: var(--_typography---paragraph-font-size--extra-small-paragraph);
  line-height: var(--_typography---font-line-height--large);
  font-weight: var(--_typography---font-weight--bold);
  margin: 6px 0 0;
  display: none;
}

.vp-veld :is(input, textarea):user-invalid ~ .vp-fout {
  display: block;
}

.vp-veld :is(input, textarea):user-invalid {
  border-color: var(--vp-accent-hover);
}

/* --------------------------------------------------------------------------
   Versturen en de privacyregel
   -------------------------------------------------------------------------- */

.vp-form-slot {
  grid-column-gap: 20px;
  grid-row-gap: 16px;
  flex-flow: wrap;
  align-items: center;
  display: flex;
}

/* De enige 100px-radius in dit bestand. Dit is een knop, dus de vorm is het
   klikvlak, en hij houdt de vorm van .app-button en .button uit de template
   aan. Krijt op accent haalt 5,80. */
.vp-verstuur {
  min-height: 56px;
  background-color: transparent;
  color: var(--vp-accent-hover, #883815);
  border: 2px solid var(--vp-accent-hover, #883815);
  border-radius: var(--_spacing---radius--100px);
  cursor: pointer;
  padding: 10px 24px;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 600;
  transition: color .175s ease, border-color .175s ease,
    background-color .175s ease;
}

.vp-verstuur:hover {
  background-color: var(--vp-accent-hover, #883815);
  border-color: var(--vp-accent-hover, #883815);
  color: #fff;
}

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

.vp-privacy {
  flex: 1 1 260px;
  min-width: 0;
}

/* --------------------------------------------------------------------------
   De honingpot. Buiten beeld, buiten de tabvolgorde en met aria-hidden dus
   ook buiten de toegankelijkheidsboom. Geen negatieve offset van duizenden
   pixels, want dat verbreedt het document.
   -------------------------------------------------------------------------- */

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

/* --------------------------------------------------------------------------
   Smaller dan 992px
   -------------------------------------------------------------------------- */

@media (max-width: 991px) {
  .vp-contact-grid {
    grid-template-columns: 1fr;
  }

  .vp-contact-naast {
    position: static;
  }

  /* Onder elkaar heeft de kolom ernaast de ruimte om de drie bewijsregels
     weer naast elkaar te zetten. */
  .vp-pluspunten {
    grid-column-gap: 32px;
    flex-flow: row wrap;
  }
}

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

@media (max-width: 479px) {
  .vp-form {
    padding: 20px 16px;
  }

  .vp-keuze {
    padding: 11px 12px;
  }

  .vp-verstuur {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   Bewegingsvoorkeur
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .vp-keuze,
  .vp-invoer,
  .vp-verstuur {
    transition: none;
  }
}