/* =========================================================================
   OZK FORMULIEREN — omkaderde veldgroep (.ozk-formkader)
   =========================================================================
   LAADT ALS LAATSTE VAN DE THEME-GROEP (weight 105 in bario_sub.libraries.yml),
   omdat de Bootswatch-yeti-CDN ná de thema-aggregatie laadt en zelf
   `legend { float: left; width: 100% }` zet.

   Wanneer gebruik je deze klasse: een fieldset waarvan de inhoud één
   samenhangende keuze is die visueel los moet staan van de rest van het
   formulier (bv. 'Kamp en functie', 'Kerk en hoe je ons kent' en het
   akkoordblok op /form/leid/aanmelden, webform_1529). De randkleur en -dikte
   zijn dezelfde als die van `.ozk-omrand` (ozk-blokken.css sectie 2.0).

   Sinds 27-09-2026 is elke sectietitel in een webform een grijze balk over
   de volle breedte (regel verderop in dit bestand). Tot 01-10-2026 stond hier
   nog de oudere opzet "titel ín de bovenrand" (float none, width auto, 1.15rem);
   die regel verloor op specificiteit van de balkregel, maar `float: none`
   bleef staan, en een niet-zwevende <legend> hangt per definitie half in de
   bovenrand. Gevolg: de balk stak boven het kader uit en onderbrak de rand
   (Richard 01-10-2026: "rommelig"). Nu zweeft de legend als gewoon blok en
   ligt de balk strak tegen de binnenkant van het kader, aan drie zijden. */

.ozk-formkader {
    border                  : 2px solid #006E83;
    border-radius           : 0;
    padding                 : 0 1rem 1rem;
    margin                  : 0 0 1.5rem;
}

/* De negatieve zijmarge en de bredere breedte trekken de balk over de
   binnenpadding van het kader heen, tegen de rand; de bovenmarge van de
   balkregel (5px) gaat eruit, zodat hij tegen de bovenrand ligt. */
/* Eén klasse specifieker dan de balkregel (die staat later in dit bestand en
   zou anders winnen op volgorde). */
form.webform-submission-form fieldset.webform-type-fieldset.ozk-formkader > legend,
form.webform-submission-form fieldset.webform-type-fieldset.ozk-formkader > .fieldset-legend {
    float                   : left;
    width                   : calc(100% + 2rem);
    margin                  : 0 -1rem 15px;
}
.ozk-formkader > legend + * {
    clear                   : left;
}

/* =========================================================================
   AKKOORDBLOK (.ozk-akkoordblok) — de reeks toestemmingsvragen
   =========================================================================
   Elke akkoordvraag is een eigen checkboxes-element met één optie en een
   verborgen legend. Gemeten vóór deze regels: 48px hoogte + 16px marge per
   vraag, voor 24px tekst — vier vragen onder elkaar lazen daardoor als losse
   blokken in plaats van één lijstje. De legend is visually-hidden (0px hoog)
   maar houdt wel zijn 8px ondermarge; die en de fieldset-padding gaan eruit.
   ========================================================================= */

/* !important is hier nodig, niet decoratief: de wrapper draagt de Bootstrap-
   utility `mb-3` en die zet zijn margin-bottom zelf met !important (BS5 geeft
   alle utilities die vlag). Zonder !important wint mb-3 en blijft het gat
   16px, ongeacht de specificiteit hier. */
.ozk-akkoordblok .checkboxes--wrapper {
    margin-top              : 0    !important;
    margin-bottom           : .5rem !important;
    padding                 : 0;
}
.ozk-akkoordblok .checkboxes--wrapper .form-check,
.ozk-akkoordblok .checkboxes--wrapper .js-form-type-checkbox {
    margin-bottom           : 0 !important;
}
/* Gemeten 29-09-2026 op webform_1640: de regel hierboven greep alleen .form-check, maar de
   wrapper van het vinkje is .js-form-type-checkbox met .mb-3 (16px), en de verborgen legend
   hield 5.6px marge. Vier vinkjes stonden daardoor 53px uit elkaar voor 24px tekst; nu 32px. */
.ozk-akkoordblok .checkboxes--wrapper > legend {
    margin                  : 0;
}
/* Keuzeteksten en vakjes op 16px: sinds 01-10-2026 sitebreed voor alle webforms (blok
   KEUZEOPTIES verderop), hier dus geen eigen regel meer. */
/* De vraag na de vinkjes (kampfoto's) is een nieuwe vraag: wat lucht erboven. De legendtekst
   zit in een inline span met 9px padding links; loopt de vraag op mobiel over twee regels, dan
   springt alleen de eerste regel in en leek hij gecentreerd. Als blok springen beide regels in. */
.ozk-akkoordblok .radios--wrapper {
    margin-top              : 1rem;
}
.ozk-akkoordblok .radios--wrapper > legend > span {
    display                 : block;
}

/* De geneste vraagkoppen (legend van een checkboxes-/radiogroep) staan op
   h2-formaat en concurreren zo met de titel van de box zelf. Selector met drie
   klassen, zodat de legend van de box (.ozk-formkader > legend) zijn eigen,
   grotere maat houdt. */
.ozk-akkoordblok .fieldset-wrapper legend,
.ozk-akkoordblok .fieldset-wrapper .fieldset-legend {
    font-size               : 1rem;
    /* Vet zoals elk ander veldlabel (webformlabels sitebreed 16px vet, 28-09-2026); 400 stond hier
       nog uit de tijd dat deze koppen op h2-formaat stonden. */
    font-weight             : 700;
    margin-bottom           : .25rem;
}

/* De introalinea hoort bij de vragen eronder, niet als losse tekstblok. */
.ozk-akkoordblok .ozk-akkoordintro {
    margin-bottom           : 1rem;
    max-width               : 46em;
}

/* =========================================================================
   VERGRENDELDE VELDEN (webform-states 'readonly')
   =========================================================================
   Naam en geboortedatum staan op slot zodra het formulier via een
   persoonlijke link met een contact-id geopend wordt. De states-JS zet het
   readonly-attribuut op het veld en de klasse .webform-readonly op de wrapper
   (webform/js/webform.states.js:208). Zonder eigen stijl blijft zo'n veld er
   wit en bewerkbaar uitzien; de bezoeker klikt erin, er gebeurt niets en dat
   leest als een kapot formulier. Vandaar de grijze vulling.
   ========================================================================= */

.webform-submission-form input[readonly],
.webform-submission-form .webform-readonly input {
    background-color        : #F2F2F2;
    cursor                  : not-allowed;
}

/* Een readonly <input type="date"> weert alleen getypte invoer; het
   kalender-icoon van Chrome/Edge blijft klikbaar en zou de datum alsnog laten
   wijzigen. Het icoon hoort hier dus weg. */
.webform-submission-form input[type="date"][readonly]::-webkit-calendar-picker-indicator {
    display                 : none;
}

/* Een geboortedatum is sinds 19-09-2026 een datelist (dag/maand/jaar). Een
   <select> kent geen readonly-attribuut, dus de states-JS kan hem niet op
   slot zetten; alleen de klasse .webform-readonly op de wrapper komt door.
   Muisklikken weren en grijs maken doet hier hetzelfde als bij een input. */
.webform-submission-form .webform-readonly select {
    background-color        : #F2F2F2;
    cursor                  : not-allowed;
    pointer-events          : none;
}

/* Het eerste veld in de box kreeg via de webform-basisstijl nog een marge
   bovenop de padding van de box; dat leest als een scheve bovenmarge naast de
   legend. */
.ozk-formkader > .fieldset-wrapper > .form-item:first-child,
.ozk-formkader > .fieldset-wrapper > .js-form-item:first-child {
    margin-top              : 0;
}

/* =========================================================================
   BEOORDELINGSSCHAAL 1-10 (.radios10) — kolomindeling per schermbreedte
   =========================================================================
   De evaluatieformulieren stellen hun beoordelingsvragen met een 1-10 schaal.
   Op D7 was dat een CSS-grid (Porto_sub/custom_sub.css, `.radios10`) met
   10 kolommen op desktop, 5 op tablet en 2 op mobiel. Op D11 gebruiken die
   vragen `#options_display: buttons`; de klasse `radios10` is meeverhuisd en
   dient hier alleen nog als HAAK — de knopopmaak zelf komt van webform
   (webform.element.options.css).

   Waarom deze regels nodig zijn: webform kent maar twee standen. Boven 600px
   krijgt elke knop `flex: 1`, dus staan alle tien altijd op één rij — op een
   smalle tablet worden dat tien kolommen van ~60px. En ONDER 600px zet webform
   de container op `display: block`, waardoor elke knop volle breedte krijgt en
   één vraag ruim 700px hoog wordt. Met dertien van die vragen op een formulier
   is dat op mobiel een flinke achteruitgang ten opzichte van D7.

   Hieronder daarom de D7-indeling terug, met dezelfde breekpunten:
   ≤600px → 2 kolommen, 601-1199px → 5 kolommen, ≥1200px → 10 op één rij
   (dat laatste doet webform's eigen `flex: 1` al, dus daar staat niets).
   Alles is afgebakend op `.radios10`, zodat andere keuzevragen — de 3-, 6- en
   7-keuzevragen draaien op `three_columns` — ongemoeid blijven.
   ========================================================================= */

/* Tablet en smalle desktop: 5 per rij, net als op D7 tussen 640 en 1200px.
   `flex-basis` met een vaste breuk in plaats van `flex: 1`, anders verdeelt
   flexbox de tien knoppen alsnog over één rij. De 10px aftrek is de horizontale
   marge (2 x 5px) die webform zelf op de wrapper zet. */
@media (min-width: 601px) and (max-width: 1199.98px) {
    .radios10 .webform-options-display-buttons .webform-options-display-buttons-wrapper {
        flex                : 0 0 calc(20% - 10px);
        max-width           : calc(20% - 10px);
    }
}

/* Mobiel: 2 per rij in plaats van webform's volle breedte. Sinds 29-09-2026 voor
   elke knopweergave, niet alleen .radios10 en .ozk-keuzeknoppen (Richard: op
   mobiel stonden gewone ja/nee-knoppen onder elkaar en keuzeknoppen naast elkaar). De container moet
   hier terug naar flex, want webform zet hem onder 600px expliciet op
   `display: block` — zonder die terugzet doet de flex-basis hieronder niets. */
@media (max-width: 600px) {
    .radios10 .webform-options-display-buttons,
    .ozk-keuzeknoppen .webform-options-display-buttons,
    .webform-submission-form .webform-options-display-buttons {
        display             : flex;
        flex-wrap           : wrap;
        margin              : 0 -3px;
    }

    .radios10 .webform-options-display-buttons .webform-options-display-buttons-wrapper,
    .ozk-keuzeknoppen .webform-options-display-buttons .webform-options-display-buttons-wrapper,
    .webform-submission-form .webform-options-display-buttons .webform-options-display-buttons-wrapper {
        display             : block;
        flex                : 0 0 calc(50% - 6px);
        max-width           : calc(50% - 6px);
        margin              : 0 3px 6px;
    }
}

/* =========================================================================
   ZES- EN DRIEKEUZESCHALEN (.radios6, .radios3)
   =========================================================================
   Deze vragen stonden op `three_columns`: twee rijen platte radio's naast de
   knoppenbalk van de 1-10 schaal ernaast. Sinds 16-08-2026 draaien ze ook op
   `#options_display: buttons`, zodat een beoordelingsvraag er overal hetzelfde
   uitziet -- de knopopmaak zelf komt uit de KEUZEKNOPPEN-sectie hieronder,
   waar `.radios6` en `.radios3` naast `.radios10` in de selectors staan.

   Alleen de kolomindeling verschilt, want zes knoppen verdelen anders dan tien:
   ≥1200px → alle zes op één rij (webform's eigen `flex: 1` doet dat al),
   601-1199px → 3 per rij, ≤600px → 2 per rij.
   ========================================================================= */

@media (min-width: 601px) and (max-width: 1199.98px) {
    .radios6 .webform-options-display-buttons .webform-options-display-buttons-wrapper {
        flex                : 0 0 calc(33.333% - 10px);
        max-width           : calc(33.333% - 10px);
    }
}

@media (max-width: 600px) {
    .radios6 .webform-options-display-buttons,
    .radios3 .webform-options-display-buttons {
        display             : flex;
        flex-wrap           : wrap;
        margin              : 0 -3px;
    }

    .radios6 .webform-options-display-buttons .webform-options-display-buttons-wrapper,
    .radios3 .webform-options-display-buttons .webform-options-display-buttons-wrapper {
        display             : block;
        flex                : 0 0 calc(50% - 6px);
        max-width           : calc(50% - 6px);
        margin              : 0 3px 6px;
    }
}

/* =========================================================================
   ACHTKEUZEKNOPPEN (.radios8) - sinds 30-09-2026
   =========================================================================
   Voor acht gelijkwaardige knoppen, zoals de kampkeuze KK1 t/m JK2 in
   incident_melding. Zelfde patroon als .radios10 en .radios6: ≤600px 2 per rij
   (dat doet de algemene mobiele regel hierboven al), 601-1199px 4 per rij,
   ≥1200px alle acht op één rij (webform's eigen `flex: 1`). Zet de klasse in
   `#attributes` van het element, net als radios10.
   ========================================================================= */

@media (min-width: 601px) and (max-width: 1199.98px) {
    .radios8 .webform-options-display-buttons .webform-options-display-buttons-wrapper {
        flex                : 0 0 calc(25% - 10px);
        max-width           : calc(25% - 10px);
    }
}

/* =========================================================================
   BEDRAGKNOPPEN MET "ANDER" EN "GEEN" ERONDER (.ozk-geen-los) - sinds 03-10-2026
   =========================================================================
   Voor een bedragvraag met vaste bedragen, "Ander bedrag" en een nul-optie, zoals
   de solidariteitsbijdrage in webform_1525. Indeling (Richard 03-10-2026): vier
   bedragknoppen (10 / 25 / 50 / 100; op mobiel 2x2), daaronder op een eigen rij
   "Ander bedrag" en "Geen extra bijdrage" naast elkaar, lichter van opmaak
   (stippelrand), en pas daaronder het invulveld van "Ander bedrag". Op de computer
   is elke knop een kwart breed; op mobiel de helft. Zet de klasse in `#attributes`
   van het element, net als radios10. Werkt voor precies vier vaste bedragen.

   Het invulveld van "Ander bedrag" hangt in de HTML buiten de knoppenrij. Daarom
   wordt de knoppenrij hier `display: contents`: knoppen, invulveld en hulptekst
   worden één flexstroom in .fieldset-wrapper, en `order` zet ze op hun plek. De
   rij is een kale div zonder rol; de groep-semantiek zit op de <fieldset>.

   Zet de nul-optie in `#options` als laatste vaste optie (direct vóór "Ander
   bedrag", dat webform altijd achteraan zet): dan staat de tabvolgorde op één
   verwisseling na gelijk met het beeld.
   De CSS herkent de nul-optie aan die plek (de knop vlak vóór `_other_`), niet
   aan zijn waarde: met ozk_kampgeld zijn de waarden price_field_value-id's (op
   1525: 68 = Geen bijdrage), zonder die module is het 0.
   ========================================================================= */
.webform-submission-form .ozk-geen-los > .fieldset-wrapper {
    display                 : flex;
    flex-wrap               : wrap;
    margin                  : 0 -3px;
}

.webform-submission-form .ozk-geen-los .webform-options-display-buttons {
    display                 : contents !important;   /* wint van de mobiele regel hierboven (display: flex) */
}

/* Elke knop een kwart: vier bedragen vullen de eerste rij, Ander en Geen
   schuiven vanzelf door naar de volgende. */
.webform-submission-form .ozk-geen-los .webform-options-display-buttons .webform-options-display-buttons-wrapper {
    flex                    : 0 0 calc(25% - 6px);
    max-width               : calc(25% - 6px);
    margin                  : 0 3px 6px;
}

/* Tweede rij: eerst "Ander bedrag", dan "Geen extra bijdrage". */
.webform-submission-form .ozk-geen-los .webform-options-display-buttons .webform-options-display-buttons-wrapper:has(input[value="_other_"]) {
    order                   : 3;
}
.webform-submission-form .ozk-geen-los .webform-options-display-buttons .webform-options-display-buttons-wrapper:has(+ .webform-options-display-buttons-wrapper input[value="_other_"]) {
    order                   : 4;
}
.webform-submission-form .ozk-geen-los .webform-options-display-buttons .webform-options-display-buttons-wrapper:has(input[value="_other_"]) .form-check,
.webform-submission-form .ozk-geen-los .webform-options-display-buttons .webform-options-display-buttons-wrapper:has(+ .webform-options-display-buttons-wrapper input[value="_other_"]) .form-check {
    border-width            : 1px;
    border-style            : dashed;
    background-color        : transparent;
}
.webform-submission-form .ozk-geen-los .webform-options-display-buttons .webform-options-display-buttons-wrapper:has(input[value="_other_"]) .form-check:has(input:checked),
.webform-submission-form .ozk-geen-los .webform-options-display-buttons .webform-options-display-buttons-wrapper:has(+ .webform-options-display-buttons-wrapper input[value="_other_"]) .form-check:has(input:checked) {
    border-style            : solid;
    border-color            : var(--ozk-paars, #663399);
    background-color        : #F3EEF8;
}

/* Invulveld, hulptekst en foutmelding elk op een eigen regel onder de knoppen. */
.webform-submission-form .ozk-geen-los > .fieldset-wrapper > :not(.webform-options-display-buttons) {
    flex                    : 0 0 calc(100% - 6px);
    margin-left             : 3px;
    margin-right            : 3px;
    order                   : 5;
}
.webform-submission-form .ozk-geen-los > .fieldset-wrapper > .description {
    order                   : 6;
}

/* Mobiel: twee knoppen per rij, dus bedragen 2x2 en Ander | Geen eronder. */
@media (max-width: 600px) {
    .webform-submission-form .ozk-geen-los .webform-options-display-buttons .webform-options-display-buttons-wrapper {
        flex                : 0 0 calc(50% - 6px);
        max-width           : calc(50% - 6px);
    }
    /* "Geen extra bijdrage" past vanaf ~380px zo op één regel in een halve breedte. */
    .webform-submission-form .ozk-geen-los .webform-options-display-buttons .webform-options-display-buttons-wrapper:has(input[value="_other_"]) .form-check,
    .webform-submission-form .ozk-geen-los .webform-options-display-buttons .webform-options-display-buttons-wrapper:has(+ .webform-options-display-buttons-wrapper input[value="_other_"]) .form-check {
        gap                 : .35em;
        padding-left        : 4px;
        padding-right       : 4px;
        font-size           : .9em;
        text-align          : center;           /* op heel smalle schermen (< ~380px) breekt hij netjes af */
    }
}

/* Let op waarom .ozk-keuzeknoppen alleen in de mobiele media query hierboven
   meelift en NIET in die van 601-1199px: daar staan de knoppen op 20% breedte
   voor de tien schaalknoppen, en een tweekeuzevraag zou dan twee smalle blokjes
   links in beeld worden. Boven 600px doet webform's eigen `flex: 1` precies wat
   hier nodig is: twee knoppen die samen de volle breedte vullen. */

/* =========================================================================
   KEUZEKNOPPEN — radio zichtbaar houden en in de huisstijlkleur
   =========================================================================
   Twee dingen die webform's `buttons`-weergave hier oplevert en die op D7
   beter waren:

   1. De radio zelf is weg. Webform verbergt de input (`visually-hidden`) en
      maakt van het label de knop. Daardoor is aan niets meer te zien dát het
      een keuzevraag is met precies één antwoord — op D7 stond er een echte
      radio-cirkel voor elk label.
   2. De gekozen knop kleurt webform-blauw (#0074bd). Dat is geen OZK-kleur;
      D7 vulde de radio met het huisstijlroze.

   De aanpak hieronder verhuist het knop-omhulsel (rand, vulling, padding) van
   het label naar de optie-wrapper `.form-check`. Alleen zo staan de radio en de
   tekst samen BINNEN één rand — de input is namelijk een broer van het label,
   niet een kind ervan, dus met de rand op het label zou de cirkel er altijd
   buiten vallen.

   Let op waar de knop vandaan komt: NIET van webform zelf. Webform's eigen
   regels mikken op `label.webform-options-display-buttons-label`, en die klasse
   zet dit thema nooit — evenmin bestaat de `.form-item` waar webform's CSS van
   uitgaat. De zichtbare knop komt van
   `bootstrap_barrio/css/components/webform.css`, dat de Bootstrap-variant
   `.webform-options-display-buttons .form-check-label` gebruikt. Daar moeten de
   regels hieronder dus overheen, vandaar de wrapper-klasse `.form-check`.

   Kleuren volgen de huisstijlbron (ontwerpersmail 2015): roze var(--ozk-paars, #663399),
   grijs #3c3c3b. Zie de kleurmemory; dit bestand gebruikt dezelfde losse
   hexwaarden als de rest van het thema (er is geen --ozk-variabele).

   Afgebakend op twee haken binnen een webform, zodat andere keuzevragen en de
   rest van de site niets merken:
   - `.radios10`        de beoordelingsschalen (zie de sectie hierboven);
   - `.ozk-keuzeknoppen` losse keuzevragen die op D7 al brede knoppen waren,
                        nu 'Geslacht' op /form/leiding/interesse (webform_1513).
                        Zet die klasse via `#wrapper_attributes` op het element,
                        samen met `#options_display: buttons`.
   ========================================================================= */

/* De vraagkop van zo'n keuzeveld is een <legend> en die staat op 24px, terwijl
   de labels van de tekstvelden eromheen 14px zijn. Op een formulier met één
   keuzevraag tussen tekstvelden ('Geslacht' op webform_1513) leest die legend
   daardoor als een sectiekop in plaats van als een veldlabel.

   Exact de maten van een `<label>` in dit thema dus: 14px, gewicht 400 en een
   marge van 2px, want zo veel ruimte zit er bij een tekstveld tussen het label
   en het invoervak. Niet halfvet: 'Geslacht' is geen belangrijkere vraag dan
   'Achternaam', en met 600 sprong hij eruit. */
.webform-submission-form .ozk-keuzeveld > legend,
.webform-submission-form .ozk-keuzeveld > .fieldset-legend {
    font-size               : .875rem;
    font-weight             : 400;
    line-height             : 1.5;
    margin-bottom           : .5rem;
    float                   : none;
    display                 : block;
    width                   : 100%;
    padding                 : 0;
}

.webform-submission-form .ozk-keuzeknoppen > legend,
.webform-submission-form .ozk-keuzeknoppen > .fieldset-legend {
    font-size               : .875rem;
    font-weight             : 400;
    margin-bottom           : 2px;
}

/* Het knop-omhulsel: rand, vulling en uitlijning van radio + tekst. */
.webform-submission-form .radios10 .webform-options-display-buttons .form-check,
.webform-submission-form .radios6 .webform-options-display-buttons .form-check,
.webform-submission-form .radios3 .webform-options-display-buttons .form-check,
.webform-submission-form .ozk-keuzeknoppen .webform-options-display-buttons .form-check,
.webform-submission-form .webform-options-display-buttons .form-check {
    display                 : flex;
    align-items             : center;
    justify-content         : center;
    gap                     : .45em;
    height                  : 100%;
    padding                 : 9px 8px;
    border                  : 3px solid #ccc;
    border-radius           : 3px;
    background-color        : #fff;
    cursor                  : pointer;
}

/* Het label is niet langer zelf de knop: rand en vulling eraf, anders krijg je
   een kader in een kader. De laatste selector wint van barrio's
   `.webform-options-display-buttons .webform-options-display-buttons-wrapper
   .form-check-label` (margin 0 5px 10px 0): die ondermarge zette de tekst 5px
   boven het midden van de radio (gemeten 30-09-2026). */
.webform-submission-form .radios10 .webform-options-display-buttons label,
.webform-submission-form .radios6 .webform-options-display-buttons label,
.webform-submission-form .radios3 .webform-options-display-buttons label,
.webform-submission-form .ozk-keuzeknoppen .webform-options-display-buttons label,
.webform-submission-form .webform-options-display-buttons label,
.webform-submission-form .webform-options-display-buttons .webform-options-display-buttons-wrapper .form-check-label {
    display                 : inline;
    width                   : auto;      /* barrio zet hier 100%; dan blijft de tekst links plakken
                                            in plaats van met de radio mee gecentreerd te worden */
    height                  : auto;
    margin                  : 0;
    padding                 : 0;
    border                  : 0;
    background              : none;
    text-align              : left;
    color                   : #3c3c3b;
    cursor                  : pointer;
}

/* De radio terug in beeld. Alles wat de cirkel verbergt moet met !important
   worden teruggedraaid: core's `.visually-hidden` zet `position: absolute
   !important` (system/css/components/hidden.module.css), en de maten en `clip`
   die hem tot 1x1px knijpen komen uit dezelfde hoek. Zonder die vlaggen blijft
   de input meetbaar 1x1px en zie je niets.

   `appearance: auto` zet de NATIVE radio terug: Bootstrap zet `appearance: none`
   en tekent de cirkel zelf met een achtergrondafbeelding in zijn eigen blauw.
   Met de native variant kleurt `accent-color` de gevulde stip, en dat is precies
   het huisstijlroze dat D7 ook gebruikte. */
.webform-submission-form .radios10 .webform-options-display-buttons input[type="radio"],
.webform-submission-form .radios6 .webform-options-display-buttons input[type="radio"],
.webform-submission-form .radios3 .webform-options-display-buttons input[type="radio"],
.webform-submission-form .ozk-keuzeknoppen .webform-options-display-buttons input[type="radio"],
.webform-submission-form .webform-options-display-buttons input[type="radio"] {
    position                : static !important;
    overflow                : visible !important;
    clip                    : auto !important;
    clip-path               : none !important;
    appearance              : auto !important;
    -webkit-appearance      : radio !important;
    flex                    : none;
    width                   : 1.05em !important;
    height                  : 1.05em !important;
    margin                  : 0 !important;
    accent-color            : var(--ozk-paars, #663399);
    cursor                  : pointer;
}

/* Geen eigen focusring op het rondje (Richard 27-09-2026: "die vierkantjes om de rondjes"): Bootstrap
   tekent er bij focus een blauwe box-shadow van 4px omheen, en omdat de radio border-radius 0 heeft,
   wordt dat een vierkant. Het thema zet er ook nog een paarse outline op. De focus blijft zichtbaar
   via de ring om de hele knop (.form-check:has(input:focus-visible), verderop). */
.webform-submission-form .radios10 .webform-options-display-buttons input[type="radio"]:focus,
.webform-submission-form .radios6 .webform-options-display-buttons input[type="radio"]:focus,
.webform-submission-form .radios3 .webform-options-display-buttons input[type="radio"]:focus,
.webform-submission-form .ozk-keuzeknoppen .webform-options-display-buttons input[type="radio"]:focus,
.webform-submission-form .webform-options-display-buttons input[type="radio"]:focus {
    outline                 : none !important;
    box-shadow              : none !important;
}

/* De gekozen optie: roze rand met een zachte roze vulling erachter. */
.webform-submission-form .radios10 .webform-options-display-buttons .form-check:has(input:checked),
.webform-submission-form .radios6 .webform-options-display-buttons .form-check:has(input:checked),
.webform-submission-form .radios3 .webform-options-display-buttons .form-check:has(input:checked),
.webform-submission-form .ozk-keuzeknoppen .webform-options-display-buttons .form-check:has(input:checked),
.webform-submission-form .webform-options-display-buttons .form-check:has(input:checked) {
    border-color            : var(--ozk-paars, #663399);
    background-color        : #F3EEF8;
}

/* Losse tekstmarkering voor de gekozen optie. Staat bewust NAAST de :has()-regel
   hierboven: deze werkt met een gewone broer-selector en houdt de keuze dus ook
   zichtbaar in een browser die :has() niet kent. */
.webform-submission-form .radios10 .webform-options-display-buttons input:checked + label,
.webform-submission-form .radios6 .webform-options-display-buttons input:checked + label,
.webform-submission-form .radios3 .webform-options-display-buttons input:checked + label,
.webform-submission-form .ozk-keuzeknoppen .webform-options-display-buttons input:checked + label,
.webform-submission-form .webform-options-display-buttons input:checked + label {
    color                   : var(--ozk-paars, #663399);
    font-weight             : 600;
}

/* Hover: de rand kleurt naar de hovertint van het huisstijlroze in plaats van
   naar grijs. #C84E71 is de op www.onvergetelijk.nl gemeten hoverkleur van
   #c13c61 -- een iets LICHTERE tint, geen donkerdere; zie de kop van
   custom.css. Zo voelt een knop al voor het klikken als een keuze en niet als
   een uitgegrijsd vlak. */
.webform-submission-form .radios10 .webform-options-display-buttons .form-check:hover,
.webform-submission-form .radios6 .webform-options-display-buttons .form-check:hover,
.webform-submission-form .radios3 .webform-options-display-buttons .form-check:hover,
.webform-submission-form .ozk-keuzeknoppen .webform-options-display-buttons .form-check:hover,
.webform-submission-form .webform-options-display-buttons .form-check:hover {
    border-color            : #8559B3;
}

/* Toetsenbordbediening zichtbaar houden: de focusring stond op de input, en die
   was verborgen. Nu de radio weer zichtbaar is tekenen we hem om de hele knop. */
.webform-submission-form .radios10 .webform-options-display-buttons .form-check:has(input:focus-visible),
.webform-submission-form .radios6 .webform-options-display-buttons .form-check:has(input:focus-visible),
.webform-submission-form .radios3 .webform-options-display-buttons .form-check:has(input:focus-visible),
.webform-submission-form .ozk-keuzeknoppen .webform-options-display-buttons .form-check:has(input:focus-visible),
.webform-submission-form .webform-options-display-buttons .form-check:has(input:focus-visible) {
    box-shadow              : 0 0 0 3px rgba(102, 51, 153, .3);
}

/* De hele knop klikbaar (Richard 27-09-2026: alleen een klik precies op het rondje of de korte
   tekst selecteerde). De rand zit op het omhulsel .form-check, maar klikbaar is alleen het label,
   en dat is maar zo breed als "ja". Een onzichtbaar vlak van het label over de hele knop maakt
   elke klik in de knop een klik op het label, en die selecteert de radio. */
.webform-submission-form .radios10 .webform-options-display-buttons .form-check,
.webform-submission-form .radios6 .webform-options-display-buttons .form-check,
.webform-submission-form .radios3 .webform-options-display-buttons .form-check,
.webform-submission-form .ozk-keuzeknoppen .webform-options-display-buttons .form-check,
.webform-submission-form .webform-options-display-buttons .form-check {
    position                : relative;
}
.webform-submission-form .radios10 .webform-options-display-buttons label::after,
.webform-submission-form .radios6 .webform-options-display-buttons label::after,
.webform-submission-form .radios3 .webform-options-display-buttons label::after,
.webform-submission-form .ozk-keuzeknoppen .webform-options-display-buttons label::after,
.webform-submission-form .webform-options-display-buttons label::after {
    content                 : "";
    position                : absolute;
    inset                   : 0;
    cursor                  : pointer;
}

/* PAARS SINDS 29-09-2026 (besluit Richard): de gekozen optie is in elke keuzevraag
   paars (OZK-paars, rand en rondje) met een lichtpaarse achtergrond, ook in de
   beoordelingsschalen en ozk-keuzeveld; eerder roze (schalen) en groen (keuzeknoppen).
   SINDS 29-09-2026 (besluit Richard): elke keuzevraag met `#options_display: buttons`
   krijgt deze opmaak, ook zonder de klasse ozk-keuzeknoppen. Er waren vier stijlen voor
   keuzeknoppen; nu is er één. De beoordelingsschalen (.radios10/6/3) blijven roze, want hun
   selectors zijn specifieker dan de algemene variant. */
/* Losse keuzeknoppen (ja/nee, bv. de toestemmingsvragen op webform_993) kiezen in groen in plaats
   van roze (Richard 27-09-2026): een keuze, geen foutmelding. Huisstijlgroen var(--ozk-paars, #663399) (.ozkgroen in
   custom.css). De beoordelingsschalen (.radios10/6/3) blijven roze. */
.webform-submission-form .ozk-keuzeknoppen .webform-options-display-buttons input[type="radio"],
.webform-submission-form .webform-options-display-buttons input[type="radio"] {
    accent-color            : var(--ozk-paars, #663399);
}
.webform-submission-form .ozk-keuzeknoppen .webform-options-display-buttons .form-check:has(input:checked),
.webform-submission-form .webform-options-display-buttons .form-check:has(input:checked) {
    border-color            : var(--ozk-paars, #663399);
    background-color        : #F3EEF8;
}
.webform-submission-form .ozk-keuzeknoppen .webform-options-display-buttons input:checked + label,
.webform-submission-form .webform-options-display-buttons input:checked + label {
    color                   : var(--ozk-paars, #663399);
}
.webform-submission-form .ozk-keuzeknoppen .webform-options-display-buttons .form-check:hover,
.webform-submission-form .webform-options-display-buttons .form-check:hover {
    border-color            : #8559B3;
}
.webform-submission-form .ozk-keuzeknoppen .webform-options-display-buttons .form-check:has(input:focus-visible),
.webform-submission-form .webform-options-display-buttons .form-check:has(input:focus-visible) {
    box-shadow              : 0 0 0 3px rgba(102, 51, 153, .3);
}

/* =========================================================================
   STAPPENLIJST (.ozk-stappen) — 'zo werkt het'-lijstje boven een formulier
   =========================================================================
   Op D7 stond dit als tabel in de introtekst van webform_1513, met per rij een
   lege 512x512-PNG (ozkimages/empty.png) die met een inline `style` tot een
   24px vierkantje met zwarte rand werd geknepen. Op D11 stript de opmaakfilter
   van webform_markup het style-attribuut (Xss laat `class` staan, `style`
   niet), waardoor die PNG's op volle 512px verschenen: drie lege grijze vlakken
   van een halve schermhoogte elk. Vandaar dat het vierkantje nu uit CSS komt en
   de markup een lijst is; het formulier hangt zo ook niet meer aan een
   afbeelding op het D7-domein, wat na de cutover zou breken.

   Drie kolommen, net als de D7-tabel: stapnummer — vinkvakje — wat er gebeurt.
   ========================================================================= */

.ozk-stappen {
    list-style              : none;
    max-width               : 46em;
    margin                  : 0 0 1.75rem;
    padding                 : 0;
}

.ozk-stappen li {
    display                 : grid;
    grid-template-columns    : 4.5em 1.15rem 1fr;
    align-items             : center;
    gap                     : .75rem;
    padding                 : .55rem .25rem;
    border-bottom           : 1px solid #E5E5E5;
}

.ozk-stappen li:last-child {
    border-bottom           : 0;
}

/* Klein en halfvet, volgens de typografieregel van het thema (grote tekst licht,
   kleine tekst halfvet). */
.ozk-stappen .ozk-stap-nr {
    font-weight             : 600;
    white-space             : nowrap;
}

/* Het vinkvakje uit de D7-tabel. Puur decoratief — het wordt nooit aangevinkt,
   het laat zien dat er nog iets te doen valt — dus `aria-hidden` is niet nodig:
   een leeg span heeft geen toegankelijke naam en wordt niet voorgelezen. */
.ozk-stappen .ozk-stap-vink {
    width                   : 1.15rem;
    height                  : 1.15rem;
    border                  : 2px solid #3c3c3b;
    background-color        : #fff;
}

/* Mobiel: het vinkvakje is de eerste die ruimte moet inleveren, want de tekst
   ('Je ontvangt een e-mail met een inloglink') is wat de bezoeker moet lezen. */
@media (max-width: 575.98px) {
    .ozk-stappen li {
        grid-template-columns: 4.25em 1fr;
        gap                 : .5rem;
    }

    .ozk-stappen .ozk-stap-vink {
        display             : none;
    }
}

/* =========================================================================
   VELDREGEL (.ozk-veldregel) — twee velden op één regel
   =========================================================================
   Een paar velden waarvan het tweede maar een paar tekens hoeft te bevatten,
   hoort niet als twee volle-breedte regels onder elkaar. Deze klasse zet zo'n
   paar naast elkaar: kolom 1 groeit, kolom 2 is smal en vast, en alles vanaf het
   derde veld valt terug op een eigen volle regel.

   Zet de klasse op een container-element met de velden in die volgorde. De
   plaatsing gaat op positie (`:nth-child`) en niet op veldnaam, zodat dezelfde
   regels werken voor het CiviCRM-formulier (webform_1513) én voor een gewoon
   webform (epaper_kampleiding). In gebruik voor:
   - voornaam (breed) + tussenvoegsel (smal), daarna achternaam;
   - geboortedatum (breed) + geslacht (smal), daarna e-mail en telefoon.

   WAAROM de geboortedatum in de brede kolom staat en niet het keuzeveld: het
   native datumveld van Chrome heeft 'dd-mm-jjjj' plus het kalender-icoon te
   tonen en is onder ~159px onleesbaar. De smalle kolom is op een telefoon 33%
   van de regel — op 390px is dat 121px, dus daar past hij niet. Twee kale
   radio's passen er wel in. Zo vallen de kolomranden van beide veldregels samen.

   Alleen de breedte van kolom 2 verschilt per schermbreedte: op mobiel 40% van
   de regel (het eerste veld heeft de ruimte daar harder nodig), vanaf 576px twee
   gelijke helften.
   ========================================================================= */

/* De container draagt zelf de Bootstrap-utility `mb-3`, bovenop de 16px die het
   laatste veld erin al heeft. Het gat eronder werd zo 32px, twee keer zo groot
   als tussen de andere velden, en dat las als een sectiegrens. !important omdat
   mb-3 die vlag zelf ook heeft. */
.ozk-veldregel {
    display                 : flex;
    flex-wrap               : wrap;
    column-gap              : 1rem;
    margin-bottom           : 0 !important;
}

/* Kolom 1 vult de rest van de regel. `flex-basis: 0` en niet `auto`: met auto
   rekent flexbox met de intrinsieke breedte van het veld, en die is er alleen
   als de input een `size`-attribuut heeft. De CiviCRM-velden hebben dat
   (`#size: 20`), een gewoon webform-textfield niet — daar werd het eerste veld
   dan zo breed als de container en wrapte het tweede naar de regel eronder.
   `min-width: 0` hoort erbij: zonder die reset weigert een flex-item krimpen
   onder de min-content breedte van de input en loopt de rij over. */
.ozk-veldregel > *:first-child {
    flex                    : 1 1 0;
    min-width               : 0;
}

/* 45% en niet 33 of 40: de twee kale radio's hebben samen 132px nodig (radio +
   label + de gap ertussen), en het vak eromheen kost daar 18px binnenruimte af
   (2x8px padding + 2x1px rand). Op 360px — de smalste breedte die nog serieus
   voorkomt — geeft 45% dus 151px met 133px binnenruimte, en past het net. Met
   40% wrapten vrouw en man daar onder elkaar en werd het vak 62px hoog naast een
   datumveld van 38px. */
.ozk-veldregel > *:nth-child(2) {
    flex                    : 0 0 45%;
}

.ozk-veldregel > *:nth-child(n+3) {
    flex                    : 1 1 100%;
}

/* Vanaf 576px twee gelijke helften. Op mobiel blijft het 60/40, want daar heeft
   het eerste veld (voornaam, geboortedatum) de ruimte harder nodig dan het
   tweede. De aftrek van een halve gap houdt de twee kolommen exact gelijk. */
@media (min-width: 576px) {
    .ozk-veldregel > *:nth-child(2) {
        flex                : 0 0 calc(50% - .5rem);
    }
}

/* Sinds 19-09-2026 is een geboortedatum een datelist: drie keuzelijsten (dag,
   maand, jaar) van samen ~230px. In de brede kolom van een veldregel is op een
   telefoon maar ~185px, dus viel het jaar onder de andere twee. Staat er een
   datelist in kolom 1, dan krijgen kolom 1 en 2 op mobiel elk een eigen regel;
   vanaf 576px (twee gelijke helften van ~250px) past het wel naast elkaar. */
@media (max-width: 575.98px) {
    .ozk-veldregel > *:first-child:has(.form-type-datelist),
    .ozk-veldregel > *:first-child:has(.form-type-datelist) + *,
    /* ... of de datelist ís zelf het eerste kind (webform_1640, 29-09-2026: jaartal afgekapt). */
    .ozk-veldregel > .form-type-datelist:first-child,
    .ozk-veldregel > .form-type-datelist:first-child + * {
        flex                : 1 1 100%;
    }
}

/* De drie lijsten van een datelist erven elk `mb-3` van de webform-basisstijl,
   bovenop de marge van het veld zelf: 32px onder de geboortedatum tegen 16px
   onder elk ander veld. Alleen de buitenste marge blijft. !important omdat
   Bootstrap's mb-3 die vlag zelf ook draagt. */
.webform-submission-form .form-type-datelist .container-inline {
    display                 : flex;
    gap                     : .5rem;
    /* Zonder bovengrens rekken de drie lijsten mee met de kolom: 550px voor
       een datum in /form/leid/aanpassen op een laptop (29-09-2026). 22rem
       past dag, maand en jaartal met ruimte voor de pijltjes. */
    max-width               : 22rem;
}

.webform-submission-form .form-type-datelist .container-inline > .js-form-item {
    flex                    : 1 1 0;
    min-width               : 0;
    margin-bottom           : 0 !important;
}

.webform-submission-form .form-type-datelist .container-inline > .js-form-item > select {
    width                   : 100%;
    height                  : 38px;
    font-size               : 1rem;
    padding                 : 6px 20px 6px 8px;
}

/* =========================================================================
   KEUZEVELD ALS KALE RADIO'S (.ozk-keuzeveld met #options_display side_by_side)
   =========================================================================
   Een keuzeveld dat naast een ander veld in een .ozk-veldregel staat, kan de
   brede knoppen van .ozk-keuzeknoppen niet gebruiken: in de smalle kolom worden
   dat pillen van ~100px. Vandaar de kale variant — radio met label, twee opties
   naast elkaar.

   Wat hier geregeld moet worden, is de kleur van de gekozen radio. Bootstrap zet
   `appearance: none` en tekent de cirkel zelf, met zijn eigen accentkleur (bij
   yeti #008cba). Dat is geen OZK-kleur, dus vullen we hem hier met het
   huisstijlroze; de witte stip in het midden komt uit Bootstrap's eigen
   background-image en blijft staan.
   ========================================================================= */

.webform-submission-form .ozk-keuzeveld .form-check-input:checked {
    background-color        : var(--ozk-paars, #663399);
    border-color            : var(--ozk-paars, #663399);
}

.webform-submission-form .ozk-keuzeveld .form-check-input:focus {
    border-color            : var(--ozk-paars, #663399);
    box-shadow              : none;
}

/* De twee opties staan samen in één vak met de rand van een invoerveld, zodat
   het keuzeveld naast de geboortedatum leest als een veld en niet als losse
   radio's die in de marge zweven. De maten zijn overgenomen van `.form-control`
   in dit thema (gemeten: 1px #ccc, radius 0, padding 6px 8px, hoogte 38px), dus
   het vak lijnt precies uit met het invoervak in de kolom ernaast.

   `min-height` en niet `height`: op een heel smal scherm (320px) wrappen vrouw
   en man onder elkaar en mag het vak meegroeien. */
.webform-submission-form .ozk-keuzeveld .webform-options-display-side-by-side {
    display                 : flex;
    flex-wrap               : wrap;
    align-items             : center;
    column-gap              : 1rem;
    height                  : 38px;
    min-height              : 38px;
    box-sizing              : border-box;
    margin                  : 0;
    padding                 : 6px 8px;
    border                  : 1px solid #ccc;
    border-radius           : 0;
    background-color        : #fff;
}

/* De focusring hoort om het hele vak, niet om één radio: die zit binnen de rand
   en zonder deze regel is met het toetsenbord niet te zien waar je bent. */
.webform-submission-form .ozk-keuzeveld .webform-options-display-side-by-side:has(input:focus-visible) {
    border-color            : var(--ozk-paars, #663399);
    box-shadow              : 0 0 0 .2rem rgba(102, 51, 153, .25);
}

/* Alleen de marges resetten, NIET de padding: Bootstrap hangt de radio met een
   negatieve linkermarge in de padding-left van `.form-check`. Met `padding: 0`
   schuift de cirkel dus links buiten zijn wrapper — hier over het datumveld in
   de kolom ernaast heen. */
.webform-submission-form .ozk-keuzeveld .webform-options-display-side-by-side > * {
    margin                  : 0;
    white-space             : nowrap;
}

/* =========================================================================
   VERZENDKNOP OP MOBIEL (.ozk-knop-vol)
   =========================================================================
   Een knop met een korte tekst ('E-paper ontvangen') is op een telefoon een
   klein doel links onderin, terwijl de velden erboven de volle breedte hebben.
   Onder 576px daarom volle breedte, zodat de knop het eindpunt van het
   formulier is en niet iets wat je nog moet zoeken.

   Boven 576px houdt de knop zijn eigen breedte: een knop van 1100px leest niet
   meer als knop.

   Zet de klasse via `#attributes` op het webform_actions-element. Afgebakend en
   niet site-breed, omdat een wizard meerdere knoppen naast elkaar heeft
   (vorige/volgende) en die met 100% onder elkaar zouden schieten.
   ========================================================================= */

/* De selector is opgebouwd om één concrete concurrent te verslaan: het
   donatieformulier (webform_295) heeft formulier-eigen CSS met
   `.webform-submission-form .form-actions input[type="submit"] { width: auto }`
   om zijn knoppenrij horizontaal te houden. Dat is (0,3,1) — precies even
   specifiek als `.webform-submission-form .ozk-knop-vol input[type="submit"]` —
   en omdat webform de formulier-eigen CSS ná de thema-aggregatie inlaadt, won die
   bij gelijkspel. Door `.form-actions` en de haak op hetzelfde element te
   combineren wordt het (0,4,1) en wint deze regel, zonder !important.

   De knop klokte zonder deze regel op 256px: dat is de `min-width: 16rem` die het
   thema op formulierknoppen zet, niet de natuurlijke tekstbreedte. */
/* Sinds 29-09-2026 (besluit Richard): op mobiel loopt de VERZENDKNOP van elk
   webform over de volle breedte, niet alleen met .ozk-knop-vol. Alleen de
   verzendknop (.webform-button--submit): de wizardknoppen vorige/volgende houden
   hun eigen breedte. Selector met .form-actions.webform-actions (0,4,x), zodat
   formulier-eigen CSS zoals die van het donatieformulier (0,3,1) niet wint. */
@media (max-width: 575.98px) {
    .webform-submission-form .form-actions.webform-actions .webform-button--submit {
        display             : block;
        width               : 100%;
    }
}
@media (max-width: 575.98px) {
    .webform-submission-form .ozk-knop-vol.form-actions .webform-button--submit,
    .webform-submission-form .ozk-knop-vol.form-actions input[type="submit"],
    .webform-submission-form .ozk-knop-vol.form-actions button[type="submit"],
    .webform-submission-form .ozk-knop-vol .webform-button--submit,
    .webform-submission-form .ozk-knop-vol input[type="submit"],
    .webform-submission-form .ozk-knop-vol button[type="submit"] {
        display             : block;
        width               : 100%;
    }
}

/* =========================================================================
   ZOEKVELD VOOR CONTACTEN (tokeninput van webform_civicrm)
   =========================================================================
   Het autocompleteveld "bestaand contact" van webform_civicrm is standaard
   400px breed in 12px Verdana: op een telefoon een priegelig vakje. Hier
   krijgt het dezelfde maat als het zoekveld op /form/tekenbeet: volle breedte
   tot 480px, 48px hoog, letters van het formulier. Geldt voor elk formulier
   met zo'n veld (24-09-2026: incident_melding, webform_914, 1118, 1119, 1227).
   De keuzelijst hangt JS aan <body>, dus die selector staat niet onder form.
   Besluit Richard 24-09-2026.
   ========================================================================= */
form ul.token-input-list {
    max-width               : 480px;
    min-height              : 48px;
    display                 : flex;
    flex-wrap               : wrap;
    align-items             : center;
    top                     : 0;
    border                  : 1px solid #e2dfe8;
    border-radius           : 10px;
    background              : #f6f5f8;
    font                    : inherit;
    font-size               : 1.05rem;
}
form ul.token-input-list li.token-input-input-token { flex: 1; }
form ul.token-input-list li input {
    width                   : 100% !important;
    min-width               : 12rem;
    min-height              : 46px;
    padding                 : 10px 14px;
    font                    : inherit;
    background              : transparent;
}
form li.token-input-token {
    margin                  : 6px;
    padding                 : 6px 10px;
    border-radius           : 8px;
    background              : #efe8f6;
    color                   : #663399;
    font-weight             : 600;
}
/* Alleen-lezen naam (webform_civicrm "bestaand contact" met #widget hidden en
   #show_hidden_contact): webform_civicrm hangt daar dezelfde tokenInput aan, dus zonder dit
   werd de naam een paarse pil in een grijze of donkere box (webform_993, Richard 27-09-2026).
   Het verborgen veld staat direct ná de lijst die tokenInput invoegt. De naam ziet eruit als
   een alleen-lezen tekstveld, met dezelfde maten als bv. "Keren deelnemer" (uitgeschakelde
   form-control: #eee, rand 1px #ccc, 44px hoog, 16px). */
form ul.token-input-list:has(+ input[show-hidden-contact]) {
    max-width               : none !important;
    width                   : 100% !important;
    min-height              : 44px !important;
    display                 : flex !important;
    align-items             : center;
    /* De naam hoort bij de rij velden eronder: 16px tot het volgende label, net als tussen twee
       velden. Erboven 2rem, zodat de afstand tot de introtekst groter is dan die tot het eerste
       veld (Richard 27-09-2026). Tot 29-09-2026 stond hier een negatieve ondermarge (-1rem, vanaf
       768px -2rem) die de bovenmarge van de geneste flexboxen eronder moest opvangen; dat klopte
       alleen bij de nesting van webform_993 en schoof op webform_1641 en 1628 de eerste rij
       velden 16px onder de balk. Nu zijn die bovenmarges weg (regel hieronder) en is 1rem genoeg. */
    margin                  : 2rem 0 1rem !important;
    padding                 : 6px 8px !important;
    border                  : 1px solid #cccccc !important;
    border-radius           : 0 !important;
    background              : #eeeeee !important;
    color                   : #222222 !important;
    font-size               : 16px !important;
}
/* Heeft de fieldset een ZICHTBARE kop, dan vervalt de bovenmarge van 2rem hierboven. Die 2rem is
   bedoeld om afstand te houden tot een introtekst; bij webform_993 en de meeste andere staat de
   legend op 'invisible' (span.visually-hidden, 0px hoog), dus daar is zij de enige afstand en moet
   zij blijven. Staat er wél een kop (webform_dieet "Om wie gaat het?", webform_917 "Jouw
   gegevens"), dan telt de afstand dubbel en zweeft de naam los onder die kop (Richard 13-10-2026).
   Gemeten: legend 0px + .visually-hidden bij 993, 48px zonder bij webform_dieet. */
fieldset:has(> legend > span.fieldset-legend:not(.visually-hidden))
  > .fieldset-wrapper > div:first-child > ul.token-input-list:has(+ input[show-hidden-contact]) {
    margin-top              : 0 !important;
}
/* Een geneste webform-flexbox (kolom in een kolom, bv. de naamrij ozk_naamrij_N >
   ozk_flex_naam_N) krijgt van webform `margin: 1em 0`. Elk veld in een flex-kolom heeft 0.5em
   zijmarge, dus zonder negatieve zijmarge springt elke geneste laag 8px in, en de bovenmarge
   laat de kolom 16px lager beginnen dan de kolom ernaast (Voornaam onder Geslacht, webform_1641,
   29-09-2026). Zelfde zijmarge als de buitenste flexbox, geen marge boven of onder. */
@media (min-width: 768px) {
    /* Geen ondermarge: elk veld in de kolom draagt zelf al 16px (.mb-3), en met de 1em van
       webform plus de .mb-3 die webform op de wrapper zet, kwam er 48px onder de naamrij tegen
       16px tussen de velden in de kolom ernaast. !important tegen .mb-3. */
    .webform-flexbox .webform-flexbox { margin: 0 -0.5em !important; }
}
/* Een flexbox met alleen verborgen velden (de naamrij op webform_993 e.a., waar voornaam,
   tussenvoegsel en achternaam hidden zijn en de naam in de balk erboven staat) is 0px hoog maar
   hield zijn marge: 16px extra onder de naambalk. !important tegen Bootstrap's .mb-3, die
   webform op de wrapper zet. */
.webform-flexbox:not(:has(input:not([type="hidden"]), select, textarea)) {
    margin: 0 !important;
}
form ul.token-input-list:has(+ input[show-hidden-contact]) li.token-input-token {
    margin                  : 0 !important;
    padding                 : 0 !important;
    border                  : 0 !important;
    border-radius           : 0 !important;
    background              : transparent !important;
    color                   : inherit !important;
    font                    : inherit !important;
    font-weight             : 400 !important;
}
form ul.token-input-list:has(+ input[show-hidden-contact]) li.token-input-token p { margin: 0; float: none; }
form ul.token-input-list:has(+ input[show-hidden-contact]) li.token-input-token span { display: none; }
form ul.token-input-list:has(+ input[show-hidden-contact]) li.token-input-input-token { display: none; }
div.token-input-dropdown {
    max-width               : calc(100vw - 32px);
    border-radius           : 0 0 10px 10px;
    font                    : inherit;
    font-size               : 1rem;
}
div.token-input-dropdown ul li { padding: 12px 14px; }
div.token-input-dropdown ul li.token-input-selected-dropdown-item { background: #663399; color: #fff; }

/* Geen eigen dark-mode-regel: de formulieren zelf blijven licht, dus een
   donker zoekveld in een licht formulier (OS op donker) viel zwart uit de
   toon (Richard 29-09-2026). */

/* =========================================================================
   ACCENTKLEUR PAARS — nergens meer de standaardkleur van de browser
   =========================================================================
   Besluit Richard 29-09-2026: "ik wil nergens meer default accentkleur, maak
   dat paars". OZK-paars #663399 is in palet C de navigatie- en linkkleur.
   1. accent-color op :root: vinkjes, rondjes, schuifjes en voortgangsbalken
      die geen eigen huisstijlkleur hebben. Waar al bewust een kleur staat
      (groen voor een gekozen keuzeknop, roze voor de beoordelingsschalen),
      wint die: die regels zijn specifieker.
   2. De geopende keuzelijst. Die tekent de browser zelf, met de systeemkleur
      voor de gemarkeerde optie. Chrome en Edge (135+) kennen de stijlbare
      keuzelijst `appearance: base-select`; daar is de markering paars en de
      gekozen optie lichtpaars. Firefox, Safari en de keuzeschermen op
      telefoons tekenen hun eigen lijst en blijven de systeemkleur tonen.
      Het pijltje van de lijst blijft dat van het thema (Bootstrap), daarom
      staat het eigen ::picker-icon van base-select uit. */
:root {
    accent-color            : var(--ozk-paars, #663399);
}
@supports (appearance: base-select) {
    form select:not([multiple]),
    form select:not([multiple])::picker(select) {
        appearance          : base-select;
    }
    /* base-select zet de tekst in een eigen knop; zonder dit staat hij hoog. */
    form select:not([multiple]) {
        align-items         : center;
    }
    form select:not([multiple])::picker-icon {
        display             : none;
    }
    form select:not([multiple])::picker(select) {
        border              : 1px solid #ccc;
        border-radius       : 0;
        padding             : 0;
        box-shadow          : 0 6px 16px rgba(0, 0, 0, .15);
    }
    form select:not([multiple]) option {
        padding             : .35rem .75rem;
    }
    form select:not([multiple]) option::checkmark {
        display             : none;
    }
    form select:not([multiple]) option:checked {
        background-color    : #EFE8F6;
        color               : #222;
    }
    form select:not([multiple]) option:hover,
    form select:not([multiple]) option:focus-visible {
        background-color    : var(--ozk-paars, #663399);
        color               : #fff;
        outline             : none;
    }
}

/* =========================================================================
   KEUZERONDJES, VERPLICHT-STERRETJE EN HULPTEKST — voor elk formulier
   =========================================================================
   Besluit Richard 29-09-2026.
   1. Elk keuzerondje krijgt het rondje van de evaluatieformulieren: het echte
      rondje van de browser (appearance: auto) met de accentkleur paars, in
      plaats van het blauwe rondje dat Bootstrap zelf tekent. Het omlijnde vak
      eromheen blijft voorbehouden aan de knopweergaven en ozk-keuzeveld.
   2. Eén verplicht-sterretje, in paars. De regel dat er één sterretje staat
      (en de afbeelding van bootstrap_barrio uit is) staat in custom.css; dit
      bestand laadt later en zet alleen de kleur. Geldt voor elk formulier,
      ook toekomstige, want het hangt aan .form-required van Drupal zelf.
   3. De hulptekst onder een veld springt 9px in, gelijk met het label erboven
      en de tekst in het veld. display: block, want webform zet de tekst in een
      div binnen een inline <small>, en daar werkt de inspringing anders niet. */
form input[type="radio"].form-check-input,
form input[type="radio"].form-radio {
    appearance              : auto;
    -webkit-appearance      : radio;
    width                   : 1.05em;
    height                  : 1.05em;
    background-image        : none;
    accent-color            : var(--ozk-paars, #663399);
}
.form-required::after,
.js-form-required::after {
    color                   : var(--ozk-paars, #663399) !important;
}
form.webform-submission-form .description,
form.webform-submission-form .form-text,
form.ozk-formulier .description,
form.ozk-formulier .form-text {
    display                 : block;
    padding-left            : 9px;
}

/* =========================================================================
   DATUMKIEZER (jQuery UI via webform_jqueryui_datepicker) — in de huisstijl
   =========================================================================
   Besluit Richard 29-09-2026: de eigen kalender van de browser was blauw en
   Engels en is met CSS niet te stylen. Datumvelden krijgen daarom de
   datumkiezer van Webform (#datepicker), die hier de huisstijl krijgt: paars
   bij hover en voor de gekozen dag, vandaag met een paarse rand. Taal (zo ma
   di…, Vorige/Volgende) en de eerste dag van de week (maandag, system.date
   first_day) komen uit Drupal. */
#ui-datepicker-div.ui-datepicker {
    background              : #fff;
    border                  : 1px solid #ccc;
    border-radius           : 0;
    box-shadow              : 0 6px 16px rgba(0, 0, 0, .15);
    padding                 : .5rem;
    font-family             : inherit;
    font-size               : 1rem;
    z-index                 : 1000 !important;
}
#ui-datepicker-div .ui-datepicker-header {
    background              : #F3EEF8;
    border                  : 0;
    border-radius           : 0;
    color                   : #222;
    padding                 : .35rem 0;
}
#ui-datepicker-div .ui-datepicker-title select {
    font-size               : .95rem;
    min-height              : 0;
    padding                 : .15rem .3rem;
    border                  : 1px solid #ccc;
}
#ui-datepicker-div .ui-datepicker-prev,
#ui-datepicker-div .ui-datepicker-next {
    border                  : 0;
    background              : transparent;
    cursor                  : pointer;
}
#ui-datepicker-div .ui-datepicker-prev-hover,
#ui-datepicker-div .ui-datepicker-next-hover {
    background              : #e3d8f0;
}
#ui-datepicker-div th {
    color                   : #5a5a59;
    font-weight             : 600;
}
#ui-datepicker-div td a.ui-state-default,
#ui-datepicker-div td span.ui-state-default {
    background              : #fff;
    border                  : 1px solid transparent;
    color                   : #222;
    text-align              : center;
    padding                 : .3rem;
}
#ui-datepicker-div td a.ui-state-default:hover,
#ui-datepicker-div td a.ui-state-hover {
    background              : var(--ozk-paars, #663399);
    border-color            : var(--ozk-paars, #663399);
    color                   : #fff;
}
#ui-datepicker-div td a.ui-state-highlight {
    background              : #fff;
    border                  : 2px solid var(--ozk-paars, #663399);
    color                   : var(--ozk-paars, #663399);
    font-weight             : 700;
}
/* Vierkant, met dezelfde afronding als een invoerveld (0), ook als een ander
   thema of de jQuery UI-stijl de vakjes rond maakt (Richard 29-09-2026: "geen
   ronde blob maar vierkant"). */
#ui-datepicker-div td a,
#ui-datepicker-div td span,
#ui-datepicker-div .ui-datepicker-header,
#ui-datepicker-div .ui-datepicker-prev,
#ui-datepicker-div .ui-datepicker-next {
    border-radius           : 0 !important;
}
#ui-datepicker-div td a.ui-state-active {
    background              : var(--ozk-paars, #663399);
    border-color            : var(--ozk-paars, #663399);
    color                   : #fff;
    font-weight             : 700;
}

/* Het tijd- en datumveld van de browser markeert het actieve deel (uren,
   minuten, dag) in de systeemkleur blauw. In Chrome en Edge is dat deel te
   stylen: paars, zoals de rest van de accenten (Richard 29-09-2026). */
input[type="time"]::-webkit-datetime-edit-hour-field:focus,
input[type="time"]::-webkit-datetime-edit-minute-field:focus,
input[type="time"]::-webkit-datetime-edit-second-field:focus,
input[type="time"]::-webkit-datetime-edit-ampm-field:focus,
input[type="date"]::-webkit-datetime-edit-day-field:focus,
input[type="date"]::-webkit-datetime-edit-month-field:focus,
input[type="date"]::-webkit-datetime-edit-year-field:focus {
    background-color        : var(--ozk-paars, #663399);
    color                   : #fff;
    border-radius           : 0;
}

/* =========================================================================
   TIJDKIEZER (jquery.timepicker via #timepicker) — in de huisstijl
   =========================================================================
   Besluit Richard 29-09-2026: het tijdveld van de browser markeert het actieve
   deel (uren of minuten) in het systeemblauw, en Chrome laat niet toe dat alleen
   dat deel via CSS te kleuren is. Tijdvelden gebruiken daarom de tijdkiezer van
   Webform: het veld blijft een tijdelement (webform_civicrm krijgt dezelfde
   waarde), met een lijst in kwartieren die hier de huisstijl krijgt. */
.ui-timepicker-wrapper {
    background              : #fff;
    border                  : 1px solid #ccc;
    border-radius           : 0;
    box-shadow              : 0 6px 16px rgba(0, 0, 0, .15);
    max-height              : 13em;
    font-family             : inherit;
    font-size               : 1rem;
    z-index                 : 1000;
}
.ui-timepicker-wrapper .ui-timepicker-list li {
    padding                 : .35rem .75rem;
    color                   : #222;
    cursor                  : pointer;
}
.ui-timepicker-wrapper .ui-timepicker-list li:hover,
.ui-timepicker-wrapper .ui-timepicker-list li.ui-timepicker-selected,
.ui-timepicker-wrapper .ui-timepicker-list:hover li.ui-timepicker-selected:hover {
    background              : var(--ozk-paars, #663399);
    color                   : #fff;
}
.ui-timepicker-wrapper .ui-timepicker-list:hover li.ui-timepicker-selected {
    background              : #F3EEF8;
    color                   : #222;
}

/* =========================================================================
   .ozk-formulier — DEZELFDE FORMULIERSTIJL OP FORMULIEREN DIE GEEN WEBFORM ZIJN
   =========================================================================
   De regels in dit bestand hangen aan form.webform-submission-form. Formulieren
   van core (inloggen, account bewerken, wachtwoord instellen) vallen daarbuiten;
   ozk_otl hangt er de klasse ozk-formulier aan, en die staat bij de algemene
   regels hieronder (veldhoogte, focus, labels) en in ozk-knoppen.css (knop)
   naast de webformselector. Keuzeknoppen, datumvelden en andere webform-eigen
   onderdelen blijven alleen voor webforms. Besluit Richard 29-09-2026: "alle
   forms mogen zelfde huisstijl". Op mobiel loopt de verzendknop over de volle
   breedte, zoals .ozk-knop-vol bij webforms; een formulier van core heeft één
   verzendknop, dus dat kan altijd. */
@media (max-width: 575.98px) {
    form.ozk-formulier .form-actions input[type="submit"],
    form.ozk-formulier .form-actions button[type="submit"] {
        display             : block;
        width               : 100%;
    }
}

/* =========================================================================
   WCAG 2.5.8 TARGET SIZE & TOEGANKELIJKE FORMULIER-FOCUS
   ========================================================================= */
.webform-submission-form input[type="text"],
.webform-submission-form input[type="email"],
.webform-submission-form input[type="tel"],
.webform-submission-form input[type="number"],
.webform-submission-form select,
.webform-submission-form textarea,
form.ozk-formulier input[type="text"],
form.ozk-formulier input[type="email"],
form.ozk-formulier input[type="password"],
form.ozk-formulier select,
/* Datum, tijd en bestand stonden op 38px, de rest op 44px (gemeten op de
   formulierdemo /stijlgids/formulieren, 29-09-2026). Eén hoogte voor elk veld. */
.webform-submission-form input[type="date"],
.webform-submission-form input[type="time"],
.webform-submission-form input[type="file"],
form.ozk-formulier input[type="date"],
form.ozk-formulier input[type="time"] {
    min-height: 44px;
    font-size: 1rem;
}

.webform-submission-form input:focus-visible,
.webform-submission-form select:focus-visible,
.webform-submission-form textarea:focus-visible,
form.ozk-formulier input:focus-visible,
form.ozk-formulier select:focus-visible {
    outline: 3px solid var(--ozk-paars, #663399) !important;
    outline-offset: 2px !important;
}


/* Vraagtitels van radio- en vinkjesvragen in webforms zien eruit als een gewoon veldlabel (met
   het verplicht-sterretje), niet als een 24px-legend (Richard 27-09-2026). Sectietitels (een
   webform-fieldset als "Toestemming") houden hun kop. Bij titelweergave "inline" liet webform de
   legend zweven terwijl Bootstrap hem de volle breedte geeft; het eerste rondje schoof daardoor
   rechts buiten beeld (webform_993, "ja" op x=1154). Daarom: niet zweven, opties eronder. */
form.webform-submission-form fieldset.radios--wrapper > legend,
form.webform-submission-form fieldset.checkboxes--wrapper > legend,
form.webform-submission-form fieldset.webform-radios-other--wrapper > legend,
form.webform-submission-form fieldset.webform-checkboxes-other--wrapper > legend {
    float                   : none !important;
    width                   : auto !important;
    font-size               : inherit !important;
    font-weight             : inherit;
    line-height             : inherit;
    margin-bottom           : .35rem;
}
form.webform-submission-form fieldset.radios--wrapper > legend > span,
form.webform-submission-form fieldset.checkboxes--wrapper > legend > span,
form.webform-submission-form fieldset.webform-radios-other--wrapper > legend > span,
form.webform-submission-form fieldset.webform-checkboxes-other--wrapper > legend > span {
    font-size               : 16px;
}
form.webform-submission-form fieldset.webform-element--title-inline > .fieldset-wrapper {
    display                 : block !important;
}

/* Sectietitels in webforms (een webform-fieldset, bv. "Toestemming") als brede grijze balk in de
   D7-boxheader-look die de site al gebruikt (ozk-intranet.css: #f5f5f5, 21px Rambla, #232323),
   en alle vragen daaronder één maat: 16px, net iets groter dan de 14px van gewone labels
   (Richard 27-09-2026, webform_993). Antwoordopties (ja/nee) houden hun eigen maat. */
form.webform-submission-form fieldset.webform-type-fieldset > legend {
    display                 : block;
    float                   : none;
    width                   : 100%;
    background-color        : #f5f5f5;
    color                   : #232323;
    font-family             : Rambla, Arial, Helvetica, sans-serif;
    font-size               : 21px;
    font-weight             : 400;
    line-height             : 1.8;
    padding                 : 5px 10px;
    margin                  : 5px 0 15px;
}
form.webform-submission-form .js-form-item > label:not(.form-check-label),
form.ozk-formulier .js-form-item > label:not(.form-check-label),
form.webform-submission-form fieldset.radios--wrapper > legend > span,
form.webform-submission-form fieldset.checkboxes--wrapper > legend > span,
form.webform-submission-form fieldset.webform-radios-other--wrapper > legend > span,
form.webform-submission-form fieldset.webform-checkboxes-other--wrapper > legend > span,
form.webform-submission-form fieldset.form-composite > legend > span {
    font-size               : 16px !important;
}
/* Vragen vet en 9px ingesprongen, zodat ze gelijk staan met de tekst in het invulveld eronder
   (1px rand + 8px binnenruimte) en met de titel in de grijze balk; 6px lucht tot het veld in plaats
   van 2px (Richard 28-09-2026, alle webforms). display: block zorgt dat bij afbreken over meerdere
   regels de hele alinea/vraag 9px inspringt en niet alleen de eerste regel (Richard 04-10-2026). */
form.webform-submission-form .js-form-item > label:not(.form-check-label),
form.ozk-formulier .js-form-item > label:not(.form-check-label),
form.webform-submission-form fieldset.radios--wrapper > legend > span,
form.webform-submission-form fieldset.checkboxes--wrapper > legend > span,
form.webform-submission-form fieldset.webform-radios-other--wrapper > legend > span,
form.webform-submission-form fieldset.webform-checkboxes-other--wrapper > legend > span,
form.webform-submission-form fieldset.form-composite > legend > span {
    display                 : block;
    font-weight             : 700;
    padding-left            : 9px;
}
form.webform-submission-form .js-form-item > label:not(.form-check-label),
form.ozk-formulier .js-form-item > label:not(.form-check-label) {
    margin-bottom           : 6px;
}

/* =========================================================================
   KEUZEOPTIES (radio's en vinkjes in lijstweergave)
   =========================================================================
   De tekst van een keuzeoptie erfde de basismaat van de site (14px), terwijl
   de vraag erboven (16px vet), de ingetypte tekst in een invulveld (16px) en
   de akkoordvinkjes (16px, akkoordblok 29-09) al op 16px stonden. Twee maten
   in één formulier leest als rommel (Richard 01-10-2026, /form/leid/aanmelden:
   "nee/ja" 14px naast "Ik ga akkoord" 16px). Nu één maat: elke antwoordtekst
   16px, het rondje of vakje schaalt mee (Bootstrap maakt het 1em).
   De gewone label-regel hierboven sluit .form-check-label uit, dus dit is de
   plek voor de optietekst. Knopweergave (#options_display: buttons) krijgt
   dezelfde maat; de knop is 48px hoog, daar past 16px ruim in. */
form.webform-submission-form .form-check-label,
form.webform-submission-form .form-check-input {
    font-size               : 16px;
}
/* Rondje en vakje op dezelfde 9px-inspringing als de labeltekst en de tekst
   in een invulveld (28-09-2026). Gemeten vóór deze regel: label op x=91,
   rondje op x=82, hulptekst op x=91. Alleen de lijstweergave; de knopweergave
   (.webform-options-display-buttons) en de beoordelingsschalen staan al in
   een eigen raster en schuiven niet. */
form.webform-submission-form .form-check {
    margin-left             : 9px;
}
form.webform-submission-form .webform-options-display-buttons .form-check,
form.webform-submission-form .radios10 .form-check,
form.webform-submission-form .radios8 .form-check,
form.webform-submission-form .radios6 .form-check,
form.webform-submission-form .radios3 .form-check {
    margin-left             : 0;
}
/* Een sectie met een verborgen titel (webform "title_display: invisible", bv. "Dank") krijgt geen
   lege grijze streep. */
form.webform-submission-form fieldset.webform-type-fieldset > legend:has(> span.visually-hidden) {
    background-color        : transparent;
    padding                 : 0;
    margin                  : 0;
    line-height             : 0;
}

/* Aangevinkte vakjes in webforms in huisstijlgroen, net als de gekozen ja/nee-knoppen
   (.ozk-keuzeknoppen): een keuze, geen foutmelding. Bootstrap (yeti) vult een aangevinkt vakje met
   zijn eigen accentblauw #008cba, dat nergens anders op de formulieren voorkomt (Richard
   28-09-2026, Studieachtergrond op webform_995). Het witte vinkje komt uit Bootstrap's eigen
   achtergrondafbeelding en blijft staan; de focusring blijft de sitebrede paarse ring. */
.webform-submission-form .form-check-input[type="checkbox"]:checked {
    background-color        : #28881e;
    border-color            : #28881e;
}
.webform-submission-form .form-check-input[type="checkbox"]:focus {
    border-color            : #28881e;
    box-shadow              : none;
}

/* Chosen (keuzelijsten vanaf 20 opties, bv. Land) kopieert de classes van de select naar zijn
   container, dus die krijgt ook Bootstrap's .form-select: rand, padding en de chevron als
   achtergrond, met daarbinnen Chosen's eigen vakje en pijl. Dat gaf een kader in een kader met
   twee pijlen (29-09-2026, Land op webform_1641). De container wordt weer een kale wrapper en
   .chosen-single krijgt de maat, rand en chevron van een gewone select (waarden overgenomen
   van de computed style op webform_1641: 44px, 6px 24px 6px 8px, rand #ccc); Chosen's
   sprite-pijl gaat weg. Zelfde idee als de regel voor de kaartfilters in ozk-intranet.css. */
.chosen-container.form-select {
    background-image        : none;
    padding                 : 0;
    border                  : 0;
    height                  : auto;
    min-height              : 0;
    line-height             : inherit;
    box-shadow              : none;
}
.chosen-container.form-select .chosen-single {
    display                 : flex;
    align-items             : center;
    height                  : 44px;
    padding                 : 6px 24px 6px 8px;
    line-height             : 24px;
    border                  : 1px solid #cccccc;
    border-radius           : 0;
    background              : #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23333' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") no-repeat calc(100% - 8px) 50% / 16px 12px;
    box-shadow              : none;
    color                   : inherit;
}
.chosen-container.form-select .chosen-single div b {
    display                 : none;
}

/* Keuzes in twee of drie kolommen (webform options_display two_columns/three_columns). Webform
   zet de marges alleen op nul voor div.form-item, maar Bootstrap rendert de keuzes als
   .form-check; hun marge breekt dan over de kolomgrens en de middelste kolom begon 18px lager
   (Kennisgebieden op webform_1640, 29-09-2026). Een keuze nooit over twee kolommen verdelen. */
.webform-options-display-two-columns > .form-check,
.webform-options-display-three-columns > .form-check {
    break-inside            : avoid;
}
/* Op een telefoon twee kolommen (Richard 29-09-2026). Webform geeft onder 400px één kolom (bij
   Kennisgebieden en Taken, 22 en 23 keuzes, bijna twee telefoonschermen) en tussen 400 en 768px
   drie, wat op een telefoon van 412-430px te krap is. */
@media (max-width: 767.98px) {
    .webform-options-display-two-columns,
    .webform-options-display-three-columns {
        display             : block;
        column-count        : 2;
        column-gap          : 1rem;
        margin-top          : 0.4em;
    }
}