/* ==========================================================================
   Autive - Gravity Forms
   --------------------------------------------------------------------------
   Laadt alleen wanneer Gravity Forms actief is. Alle waarden komen uit de
   tokens in theme.json, en elk veldtype en elke toestand staat erin, zodat
   een formulier dat later gebouwd wordt vanzelf klopt.

   Dit bestand is overgenomen uit snippets/theme-scaffold en daarna op vier
   punten rechtgezet, omdat de scaffoldversie beloftes brak die deze site op
   de bewijspagina zwart op wit doet:

     1. outline: none op :focus van elk invoerveld. Dat is precies de regel
        die de focusring weghaalt, en de structuurzeef meldt hem terecht. De
        dubbele ring staat in core.css en geldt voor de hele site; hier staat
        alleen nog een extra randkleur als tweede signaal.
     2. Labels op 0,72rem (11,5 px) en hulptekst op 0,8rem (12,8 px). De eigen
        ondergrens is 14 px op een telefoon, en een label dat je niet kunt
        lezen is geen label.
     3. Vinkjes en radioknoppen van 18 px. 2.5.8 vraagt 24 px, en de
        bewijspagina zegt letterlijk dat elk doel op deze site minstens
        44 px is.
     4. Invoervelden zonder minimumhoogte.

   Wat hier niet in staat en niet in CSS kan: het woord "verplicht" voluit in
   plaats van een sterretje, en autocomplete per veld. Dat zijn instellingen
   in Gravity Forms zelf. De veldspecificatie staat in CLAUDE.md, en zolang
   het formulier niet is ingericht is deze opmaak niet gemeten.
   ========================================================================== */

/* 1. Form container ----------------------------------------------------- */
.gform_wrapper {
  font-family: var(--sans);
  font-size: var(--wp--preset--font-size--medium);
  color: var(--ink);
}
.gform_wrapper .gform_heading { margin-bottom: var(--wp--preset--spacing--40, 1.5rem); }
.gform_wrapper .gform_title {
  font-family: var(--sans);
  font-size: var(--wp--preset--font-size--x-large);
  color: var(--ink);
  margin-bottom: 0.5rem;
  font-weight: 500;
}
.gform_wrapper .gform_description {
  color: var(--zacht);
  font-size: 0.95rem;
}

/* 2. Field list + rows -------------------------------------------------- */
.gform_wrapper .gform_fields {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(12, 1fr);
}
.gform_wrapper .gfield { grid-column: 1 / -1; }
.gform_wrapper .gfield.gfield--width-half    { grid-column: span 6; }
.gform_wrapper .gfield.gfield--width-third   { grid-column: span 4; }
.gform_wrapper .gfield.gfield--width-quarter { grid-column: span 3; }
.gform_wrapper .gfield.gfield--width-two-thirds { grid-column: span 8; }
.gform_wrapper .gfield.gfield--width-three-quarters { grid-column: span 9; }
@media (max-width: 560px) {
  /* Eén kolom, en dan ook echt één kolom. Alleen elk veld op `1 / -1` zetten
     laat het raster zelf op twaalf sporen staan, en de mobiele meting meldt
     dat terecht als "smalle kolommen" - een raster dat op 390 px nog in
     kolommen staat is precies wat die meting zoekt. Visueel maakte het niets
     uit; de melding wel, want een meting die iets meldt dat geen fout is leer
     je overslaan. */
  .gform_wrapper .gform_fields { grid-template-columns: 1fr; }
  .gform_wrapper .gfield.gfield--width-half,
  .gform_wrapper .gfield.gfield--width-third,
  .gform_wrapper .gfield.gfield--width-quarter,
  .gform_wrapper .gfield.gfield--width-two-thirds,
  .gform_wrapper .gfield.gfield--width-three-quarters { grid-column: 1 / -1; }
}

/* 2b. Samengestelde velden: de rasterrij --------------------------------
   Een veld met meer dan één invoer - tijd (uren, minuten, AM/PM), naam in vier
   delen, adres - zet Gravity Forms neer als `.gform-grid-row` met een
   `.gform-grid-col` per deel. De opmaak daarvan zat in de stylesheet van de
   plugin, en die staat hier uit. Zonder deze regels stapelden uren, minuten en
   AM/PM als drie velden van volle breedte onder elkaar - gemeten op het
   proefformulier, niet bedacht.

   Ze staan hier, ook al gebruikt geen enkel formulier op deze site vandaag
   zo'n veldtype. Dit bestand zegt over zichzelf dat het élk veldtype dekt, en dat
   is precies het soort bewering dat op deze site met een meting eronder hoort
   te staan. */
.gform_wrapper .gform-grid-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-start;
}
.gform_wrapper .gform-grid-col {
  flex: 1 1 0;
  /* Zonder dit kan een kolom niet kleiner worden dan zijn inhoud, en dan loopt
     de rij op 320 px buiten de pagina. Dezelfde valkuil als bij de rasters in
     core.css. */
  min-width: 0;
}
/* De dubbele punt tussen uren en minuten is geen kolom die mag groeien. */
.gform_wrapper .hour_minute_colon {
  flex: 0 0 auto;
  align-self: center;
  color: var(--zacht);
}

/* De fieldset om zo'n veld. Een browser tekent daar zelf een ingekeepte rand
   omheen, en die hoort niet in dit ontwerp - de groepsnaam staat al als legend
   in de vorm van een gewoon label. `min-inline-size: 0` is geen opsmuk: een
   fieldset heeft een eigen minimale breedte die niet meekrimpt, en dat is de
   klassieke reden dat een formulier op 320 px uitloopt. */
.gform_wrapper fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-inline-size: 0;
}
.gform_wrapper legend {
  padding: 0;
}

/* 3. Labels ------------------------------------------------------------- */
.gform_wrapper .gfield_label {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.35rem;
}
/* "verplicht" staat als woord naast het label, niet als sterretje en niet
   alleen in kleur. In Gravity Forms staat de indicator op "custom" met het
   woord erin; "text" geeft de vertaling van (Required), en die is in het
   Nederlands "(Vereist)" - een ander woord dan de bewijspagina belooft. Zie
   seed/formulier.php. */
.gform_wrapper .gfield_required {
  color: var(--zacht);
  font-weight: 400;
  /* Even groot als het label ernaast. Het stond op 0,875 rem en was daarmee het
     kleinste en het lichtste woord in de regel, terwijl het het ene woord is dat
     de betekenis van het veld verandert. Het haalde AA ruim (7,55 : 1), maar het
     publiek van deze site is ouder dan gemiddeld en gelijktrekken kost niets.
     De zachtere kleur blijft: dat houdt het ondergeschikt aan het label zonder
     het klein te maken. */
  font-size: 1rem;
  margin-inline-start: 0.35rem;
}
/* Gravity Forms zet de indicator in een span met déze klasse, en die span
   staat zelf al in een span met dezelfde klasse. Zonder deze regel telt de
   marge twee keer en staat "verplicht" 0,7 rem van zijn label af in plaats
   van 0,35. */
.gform_wrapper .gfield_required .gfield_required {
  margin-inline-start: 0;
}

/* De regel bovenaan die uitlegt wat "verplicht" betekent. Gravity Forms zet
   hem er zelf neer zodra één veld verplicht is, en dat is precies goed: de
   uitleg staat vóór het eerste veld en niet erachter. */
.gform_wrapper .gform_required_legend {
  margin: 0;
  font-size: 0.875rem;
  color: var(--zacht);
}
/* In die regel staat het woord tussen aanhalingstekens, en dan hoort er geen
   marge voor: er stond een spatie tussen het openingsteken en het woord. */
.gform_wrapper .gform_required_legend .gfield_required {
  margin-inline-start: 0;
}
.gform_wrapper .gfield_description {
  margin-top: 0.4rem;
  font-size: 0.9rem;
  color: var(--zacht);
  line-height: 1.5;
}
.gform_wrapper .ginput_container_sub_label label,
.gform_wrapper .gform-field-label--type-sub {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);
  margin-top: 0.35rem;
}

/* 4. Text / email / tel / url / password / number / textarea / select --- */

/* Deze regel is de belangrijkste van het hele bestand, en hij stond er niet.
   Elk veld hieronder heeft `width: 100%` én padding, en zonder border-box
   telt die padding erbij op: gemeten op de contactpagina was het naamveld
   543 px breed in een kolom van 513, dus dertig pixels buiten het vel. Het
   thema zet nergens een globale `* { box-sizing: border-box }` - dat is een
   bewuste keuze, core doet het per blok - dus dit bestand moet het zelf doen
   voor wat het zelf opmaakt. Ook de knop, want die heeft dezelfde padding. */
.gform_wrapper :where(input, textarea, select, button) {
  box-sizing: border-box;
}

.gform_wrapper :where(
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  input[type="month"],
  input[type="week"],
  input[type="file"],
  textarea,
  select
) {
  background: var(--vel);
  border: var(--lijn-hair) solid var(--rand);
  padding: 0.7rem 0.9rem;
  border-radius: var(--radius-sm);
  font: inherit;
  /* `font: inherit` neemt ook de regelafstand van de lopende tekst mee, en die
     is 1,7 - bedoeld voor een alinea van vier regels, niet voor één regel in
     een vakje. Daarmee werd elk veld 61 px hoog. Nu 50, precies de hoogte van
     de knop ernaast, en nog steeds ruim boven de 44 van 2.5.8. */
  line-height: 1.4;
  color: var(--ink);
  width: 100%;
  min-height: 44px;
  transition: border-color var(--snel), box-shadow var(--snel);
}
.gform_wrapper textarea { min-height: 140px; resize: vertical; line-height: 1.5; }

/* Geen outline: none. De zichtbare focusring komt uit core.css en geldt op
   de hele site; wat hier staat is een tweede signaal in de randkleur, voor
   wie de muis gebruikt en het veld aanklikt. */
.gform_wrapper :where(input, textarea, select):focus {
  border-color: var(--petrol);
}

.gform_wrapper :where(input, textarea, select)[disabled],
.gform_wrapper :where(input, textarea, select)[readonly] {
  opacity: 0.6;
  cursor: not-allowed;
  background: var(--bord);
}

/* Geen extra dekking. --zacht haalt op het vel 7,55 : 1, maar met 0,7
   dekking wordt de werkelijke kleur ongeveer #8B857D en zakt dat naar
   3,58 : 1 - onder de eis van 4,5 : 1. Een placeholder is hier nooit een
   label, maar hij draagt wel de vorm van wat er in het veld hoort, en dat is
   tekst die telt. */
.gform_wrapper ::placeholder { color: var(--zacht); opacity: 1; }

/* Select dropdown arrow */
.gform_wrapper select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23000' stroke-width='1.6'><path d='M1 1.5 6 6.5 11 1.5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}

/* 4b. Datumveld ---------------------------------------------------------
   Het knopje dat de kalender opent is een <button type="button">, dus de
   knopregels verderop (die op .gform_button en button[type=submit] staan)
   raken het niet en het stond er als kale browserknop van 26 x 36 px onder
   het veld. Nu een bedienelement van 44 px naast het veld, met dezelfde rand
   als het veld zelf.

   Wat hier NIET staat is de kalender die erachter opengaat. Die komt van
   jQuery UI en werd opgemaakt door de stylesheet van Gravity Forms, en die
   staat uit. Zolang geen enkel formulier op deze site een datumveld heeft is
   dat geen gebrek maar een openstaande keuze; zie CLAUDE.md. */
.gform_wrapper .ginput_container_date {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.gform_wrapper .gform-datepicker-toggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 44px;
  block-size: 44px;
  padding: 0;
  background: var(--vel);
  border: var(--lijn-hair) solid var(--rand);
  border-radius: var(--radius-sm);
  color: var(--ink);
  cursor: pointer;
}
.gform_wrapper .gform-datepicker-toggle:hover {
  border-color: var(--ink);
}

/* 5. File upload -------------------------------------------------------- */
.gform_wrapper input[type="file"] {
  padding: 0.5rem 0.75rem;
  font-size: 0.9rem;
  cursor: pointer;
}
.gform_wrapper input[type="file"]::file-selector-button {
  margin-inline-end: 0.75rem;
  padding: 0.45rem 0.9rem;
  background: var(--petrol);
  color: var(--vel);
  border: 0;
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  min-height: 36px;
  cursor: pointer;
}

/* 6. Checkboxes + radios ------------------------------------------------ */
.gform_wrapper .gchoice {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding-block: 0.35rem;
  min-height: 44px;
}
.gform_wrapper .gchoice label {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: 1rem;
  color: var(--ink);
  line-height: 1.45;
  cursor: pointer;
}
.gform_wrapper input[type="checkbox"],
.gform_wrapper input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  margin-top: 0.2rem;
  /* 2.5.8: 24 px is de ondergrens van een doel, en de bewijspagina belooft
     44 px. Het vakje zelf is 24 px; het label ernaast is klikbaar en maakt
     het doel in de praktijk de hele regel. */
  inline-size: 24px;
  block-size: 24px;
  border: var(--lijn-firm) solid var(--ink);
  background: var(--vel);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--snel), border-color var(--snel);
  position: relative;
}
.gform_wrapper input[type="radio"] { border-radius: 50%; }
.gform_wrapper input[type="checkbox"] { border-radius: var(--radius-sm); }
.gform_wrapper input[type="checkbox"]:checked,
.gform_wrapper input[type="radio"]:checked {
  background: var(--magenta);
  border-color: var(--magenta);
}
.gform_wrapper input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  inset: 2px;
  background: var(--vel);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6L9 17l-5-5'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6L9 17l-5-5'/></svg>") no-repeat center / contain;
}
.gform_wrapper input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  inset: 4px;
  background: var(--vel);
  border-radius: 50%;
}
/* Geen eigen focusstijl hier. De dubbele ring staat in core.css en geldt voor
   elk bedienelement op de site, ook voor de velden van een formulier: een
   donkere binnenring met een lichte buitenring, zodat er altijd een helft
   contrast houdt tegen welke ondergrond dan ook. Een tweede focusregel op
   deze plek is precies hoe je die weer stuk maakt. */

/* Consent checkbox is usually wider body copy; respect that */
.gform_wrapper .gfield--type-consent .gchoice label { font-size: 0.95rem; color: var(--ink); }

/* 7. List / multi-value fields ----------------------------------------- */
.gform_wrapper .gfield_list {
  border-collapse: collapse;
  width: 100%;
}
.gform_wrapper .gfield_list td {
  padding: 0.35rem;
  border-bottom: var(--lijn-hair) solid var(--rand);
}
.gform_wrapper .gfield_list_icons button {
  background: var(--petrol);
  color: var(--vel);
  border: 0;
  padding: 0.3rem 0.55rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.9rem;
  min-height: 28px;
  line-height: 1;
}

/* 8. Section breaks + HTML blocks -------------------------------------- */
.gform_wrapper .gsection {
  border-top: var(--lijn-hair) solid var(--rand);
  margin-block: 1.5rem;
  padding-top: 1.5rem;
  grid-column: 1 / -1;
}
.gform_wrapper .gsection_title {
  font-family: var(--sans);
  font-size: var(--wp--preset--font-size--large);
  color: var(--ink);
  font-weight: 500;
  margin-bottom: 0.25rem;
}
.gform_wrapper .gsection_description {
  font-size: 0.9rem;
  color: var(--zacht);
}
.gform_wrapper .gfield_html { color: var(--zacht); }

/* 9. Page breaks + multi-page progress bar ----------------------------- */
.gform_wrapper .gf_progressbar_wrapper { margin-bottom: 2rem; }
.gform_wrapper .gf_progressbar {
  background: var(--bord);
  border-radius: var(--radius-sm);
  overflow: hidden;
  block-size: 10px;
}
.gform_wrapper .gf_progressbar_percentage {
  background: var(--magenta);
  block-size: 100%;
  transition: width var(--soepel);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-inline-end: 0.5rem;
  color: var(--vel);
  font-size: 0.875rem;
  font-weight: 600;
}
.gform_wrapper .gf_progressbar_title {
  font-size: 0.875rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--zacht);
  margin-bottom: 0.4rem;
}
.gform_wrapper .gform_page_footer {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}

/* 10. Submit button + button styling ----------------------------------- */
/* Geen streep boven de knop. Die stond er, en hij is weg omdat er nergens
   anders op deze site een lijn tussen een blok en zijn actieknop staat - het
   belblok ernaast niet, de knoppen onder een vel niet. Eén losse haarlijn
   leest dan als een sectiegrens die er niet is. De witruimte doet het werk. */
.gform_wrapper .gform_footer,
.gform_wrapper .gform_page_footer {
  margin-top: 1.5rem;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
}
.gform_wrapper :where(.gform_button, .gform_next_button, .gform_previous_button, button[type="submit"]) {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.4rem;
  background: var(--magenta);
  color: var(--vel);
  border: var(--lijn-hair) solid var(--magenta);
  border-radius: var(--radius-sm);
  /* Dezelfde knop als overal op de site: zinsopmaak, geen kapitalen, en
     minstens 44 px hoog. `font-family` staat er apart bij omdat een <button>
     het lettertype van de pagina niet erft - hier stond Arial naast een site
     in Work Sans, op de enige knop die iets verstuurt. En het gewicht stond
     er twee keer, 600 en daarna 500; de tweede won, dus de knop was lichter
     dan elke andere knop op de site. */
  font-family: inherit;
  font-size: 1.0625rem;
  font-weight: 600;
  min-height: 44px;
  cursor: pointer;
  box-shadow: var(--schaduw-knop);
  transition: background var(--snel), border-color var(--snel), color var(--snel);
}
/* Geen translateY bij hover. Geen enkele andere knop op deze site beweegt,
   en een knop die onder de muis vandaan schuift is voor wie fijne motoriek
   mist een doel dat wegloopt. */
.gform_wrapper :where(.gform_button, .gform_next_button, button[type="submit"]):hover {
  background: var(--magenta-op);
  border-color: var(--magenta-op);
}
.gform_wrapper :where(.gform_previous_button) {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.gform_wrapper :where(.gform_previous_button):hover {
  background: var(--ink);
  color: var(--vel);
}
/* Ook hier geen outline: none. Dat was de regel die op de vorige set de
   focusring liet verdwijnen, en de structuurzeef meldt hem terecht. */

/* 11. Validation / error states ---------------------------------------- */
.gform_wrapper .gfield_error :where(input, textarea, select) {
  border-color: var(--fout);
  background: color-mix(in srgb, var(--fout) 6%, var(--vel));
}
/* Hier stond een eigen box-shadow op :focus voor een veld met een fout, en die
   is weg. Reden: de focusring van deze site is een dubbele ring, donker met een
   lichte rand eromheen, zodat er altijd één helft contrast houdt welke kleur er
   ook onder ligt. Die lichte helft is een box-shadow in core.css, op
   `:focus-visible` met specificiteit (0,1,1). De regel hier was (0,3,0) en won
   dus, waardoor een veld met een fout als enige op de site die lichte helft
   kwijtraakte. Gemeten: `0 0 0 3px rgba(176,32,43,.2)` in plaats van
   `0 0 0 6px #FFFFFF`. Bovendien stond hij op `:focus` en niet op
   `:focus-visible`, dus hij vuurde ook bij een muisklik.
   De rode rand van het veld zelf is het foutsignaal; de ring is van de site. */
.gform_wrapper .gfield_error .gfield_label { color: var(--fout); }

.gform_wrapper .validation_message,
.gform_wrapper .gfield_validation_message {
  color: var(--fout);
  /* Een foutmelding is het laatste wat je klein mag zetten. */
  font-size: 0.95rem;
  margin-top: 0.4rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.gform_wrapper .validation_message::before,
.gform_wrapper .gfield_validation_message::before {
  /* De schuine streep met de lege string erachter is de alternatieve tekst van
     gegenereerde inhoud. Chrome neemt `content` op in de toegankelijkheidsboom,
     dus zonder dit leest een schermlezer hier "uitroepteken, Dit veld is
     vereist". Het uitroepteken is een tweede signaal voor wie kijkt; de
     boodschap staat er al voluit in tekst naast. */
  content: "!" / "";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 20px;
  block-size: 20px;
  background: var(--fout);
  color: var(--vel);
  border-radius: 50%;
  font-size: 0.85rem;
  font-weight: 700;
  flex-shrink: 0;
}

/* De foutsamenvatting bovenaan het formulier.
   Het kader hoort om de hele samenvatting heen en niet alleen om de kop: de
   opsomming met een link per fout staat als <ol> náást de <h2> in dezelfde
   div, dus met het kader op de h2 hing die lijst er onopgemaakt onder. Dat is
   precies het onderdeel dat het meeste doet - het is de kortste weg van "er
   ging iets mis" naar "dit veld". */
.gform_wrapper .validation_error,
.gform_wrapper .gform_validation_errors {
  background: color-mix(in srgb, var(--fout) 8%, var(--vel));
  border: var(--lijn-hair) solid var(--fout);
  border-left-width: 4px;
  border-radius: var(--radius-sm);
  color: var(--fout);
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
}
.gform_wrapper .gform_submission_error {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--fout);
  line-height: 1.4;
}
.gform_wrapper .gform_validation_errors > ol {
  margin: 0.6rem 0 0;
  padding-inline-start: 1.4rem;
  font-size: 0.92rem;
}
.gform_wrapper .gform_validation_errors > ol > li + li {
  margin-top: 0.25rem;
}
.gform_wrapper .gform_validation_error_link {
  color: var(--fout);
  /* Niet alleen kleur: de link staat in een rode lijst op een rode ondergrond,
     en dan is de onderstreping het enige verschil met de tekst eromheen. */
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
/* De iconenletter van Gravity Forms laadt niet - zijn stylesheet staat uit -
   dus deze span is een lege inline-doos die alleen een spatie maakt voor de
   kop. Alleen híér weg: elders staan gform-icon-spans ín een knop (de plus en
   de min van een lijstveld), en die knop zou dan leeg zijn. */
.gform_wrapper .gform_submission_error > .gform-icon {
  display: none;
}

/* 12. Confirmation messages -------------------------------------------- */
/* De bevestiging die géén goed nieuws is. Gravity Forms geeft elke bevestiging
   dezelfde klasse - ook die welke zegt dat het bericht niet is aangekomen - en
   die zou dan in hetzelfde groene kader staan. autive_bevestiging_markeren()
   in inc/formulier.php zet er een klasse bij; hier staat wat die klasse doet.
   Deze regel staat vóór de groene, en wint er dus niet op volgorde van: de
   selector is één klasse specifieker. */
.autive-bevestiging-mislukt .gform_confirmation_message {
  background: color-mix(in srgb, var(--fout) 8%, var(--vel));
  border-color: var(--fout);
  color: var(--fout);
}

/* Alleen het binnenste element. Gravity Forms zet twee doosjes om deze tekst -
   een wrapper en de melding zelf - en met het kader op allebei stond er een
   kader in een kader, twee randen en twee vlakken over elkaar. Zichtbaar op de
   contactpagina. */
.gform_confirmation_message {
  background: color-mix(in srgb, var(--goed) 8%, var(--vel));
  border: var(--lijn-hair) solid var(--goed);
  border-left-width: 4px;
  border-radius: var(--radius-sm);
  color: color-mix(in srgb, var(--goed) 70%, var(--ink));
  padding: 1.25rem 1.5rem;
  font-size: 1rem;
  line-height: 1.5;
}

/* 13. CAPTCHA / Turnstile wrapper -------------------------------------- */
.gform_wrapper .gfield--type-captcha,
.gform_wrapper .gfield-captcha {
  padding-block: 0.25rem;
}

/* 14. Spinner (AJAX submit) -------------------------------------------- */
.gform_wrapper .gform_ajax_spinner {
  margin-inline-start: 0.75rem;
  /* 2.5.8: 24 px is de ondergrens van een doel, en de bewijspagina belooft
     44 px. Het vakje zelf is 24 px; het label ernaast is klikbaar en maakt
     het doel in de praktijk de hele regel. */
  inline-size: 24px;
  block-size: 24px;
}

/* 15. Honeypot: weg voor iedereen -------------------------------------- */
/* Hier stond "verborgen maar bereikbaar voor een schermlezer", en dat was de
   verkeerde redenering op het verkeerde veld. Een honeypot is een veld dat een
   bot invult en een mens niet; hij heet "Comments" en zegt "dit veld is
   bedoeld voor validatiedoeleinden". Buiten beeld zetten met `left: -10000px`
   haalt hem weg bij wie kijkt en laat hem staan in de tabvolgorde en in de
   toegankelijkheidsboom - en Gravity Forms zet hem als éérste veld neer. Wie
   met een toetsenbord of een schermlezer werkt begint dit formulier dus in een
   veld dat niet voor hem bedoeld is, en dat is precies de groep die deze site
   verkoopt. Gravity Forms doet het in zijn eigen stylesheet met
   `display: none !important`; die stylesheet staat hier uit, dus deze regel
   neemt hem over. Een bot die CSS leest slaat hem daarmee over, en dat is de
   prijs van de honeypot - daarom staat Turnstile ernaast en niet erachter. */
.gform_wrapper .gform_validation_container {
  display: none !important;
}