/* ──────────────────────────────────────────────────────────────────
   Stijl van wcagpro.nl, de publieke dienstpagina.

   Opgezet in de vormtaal van PRO2 zelf. De tokens hieronder zijn niet
   op het oog nagemaakt maar overgenomen uit de stylesheet van een
   draaiende PRO2-site: dezelfde kleuren, dezelfde typografische trap,
   dezelfde kolombreedtes, dezelfde lettertypestapel.

   Ook de opbouw van de pagina komt daarvandaan: een gekleurde band
   waarin de h1 staat, daaronder een donkerblauw tegelblok met de
   verwijzingen, en dan de inhoud op wit in een smalle kolom. Dat is de
   vorm die een ambtenaar herkent, en die vorm doet hier het werk — niet
   een eigen huisstijl die er toevallig ook blauw uitziet.

   Eén grens bewust niet overgestoken: hier staat geen Rijkslogo, geen
   lint en nergens "Ministerie van". Dit is een dienst van WCAG.nl, geen
   uiting van de Rijksoverheid, en het mag daar ook niet voor doorgaan.
   De vormtaal lenen mag; de afzender spelen niet.

   Deze site is zelf toegankelijk gebouwd — het zou raar zijn als wie
   toegankelijkheid verkoopt dat zelf niet is.
   ────────────────────────────────────────────────────────────────── */

:root {
  /* ── Rijkshuisstijl-palet, zoals PRO2 het uitlevert ───────────── */
  --pro-logoblauw: #154273;      /* koppen */
  --pro-donkerblauw: #01689b;    /* de gekleurde band, voettekst, knoppen */
  --pro-hemelblauw: #007bc7;     /* links */
  --pro-lichtblauw: #8fcae7;
  --pro-groen: #39870c;          /* bevestiging, call to action */
  --pro-geel: #ffb612;
  --pro-oranje: #e17000;
  --pro-rood: #d52b1e;
  --pro-violet: #848;            /* bezochte links */

  /* Het grijs van PRO2 is slate, niet neutraal grijs: het trekt licht
     naar blauw en past daardoor bij het palet. */
  --pro-grijs-50: #f8fafc;
  --pro-grijs-100: #f1f5f9;
  --pro-grijs-200: #e2e8f0;
  --pro-grijs-500: #64748b;
  --pro-grijs-600: #475569;
  --pro-grijs-700: #334155;
  --pro-grijs-900: #0f172a;
  --pro-hover: 70%;

  /* RijksSans is een licentielettertype en staat niet op elke computer.
     Dit is letterlijk de stapel van PRO2, dus deze pagina valt precies
     zo terug als de echte site bij een bezoeker zonder dat lettertype. */
  --pro-font: RijksSans, 'RO Sans', Calibri, Verdana, Arial, sans-serif;

  /* De typografische presets van PRO2, als clamp tussen hun min en max.
     Broodtekst begint bij 18px, niet bij 16px. Dat is een kenmerk van
     de huisstijl, geen slordigheid. */
  /* 18px vast, niet oplopend naar 20px. PRO2 zet zijn broodtekst op
     18px (--typography-preset-body-min) en gebruikt 24px alleen in de
     inleiding van een contentpagina. Met een kolom van 768px leest 18px
     hier rustiger dan 20px. */
  --pro-tekst: 1.125rem;
  --pro-titel: clamp(2rem, 1.6rem + 1.6vw, 2.5rem);
  --pro-kop: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  --pro-subkop: clamp(1.375rem, 1.3rem + 0.3vw, 1.5rem);
  --pro-intro: clamp(1.375rem, 1.25rem + 0.5vw, 1.5rem);
  --pro-klein: clamp(0.875rem, 0.83rem + 0.2vw, 1rem);
  --pro-gewicht-kop: 600;        /* PRO2 zet koppen op semibold */

  --pro-kolom-smal: 768px;
  --pro-kolom-breed: 1168px;
  --pro-rand: 16px;

  /* ── Doorvertaling naar de namen die de rest gebruikt ─────────── */
  --nl-color-primary: var(--pro-donkerblauw);
  --nl-color-primary-hover: color-mix(in lch, var(--pro-donkerblauw) var(--pro-hover), black);
  --nl-color-on-primary: #ffffff;
  --nl-color-text: var(--pro-grijs-900);
  --nl-color-background: #ffffff;
  --nl-color-surface: var(--pro-grijs-100);
  --nl-color-kop: var(--pro-logoblauw);
  --nl-color-link: var(--pro-hemelblauw);
  /**
   * PRO2 kent twee linkkleuren, en niet voor de sier. Het hemelblauw
   * haalt op wit precies 4,51:1 — het haalt AA, maar met niets over. Op
   * het lichtgrijze vlak van een band zakt diezelfde kleur naar 3,95:1
   * en valt hij door de ondergrens.
   *
   * Daarvoor bestaat `--alt-link-color` (#01689b): donkerder, 5,3:1 op
   * grijs. Hieronder wordt die overal gezet waar de achtergrond niet
   * wit is. Onze eigen toegankelijkheidstoets ving dit; op het oog is
   * het verschil nauwelijks te zien.
   */
  --nl-color-link-alt: var(--pro-donkerblauw);
  --nl-color-link-hover: color-mix(in lch, var(--pro-hemelblauw) var(--pro-hover), black);
  --nl-color-link-visited: var(--pro-violet);
  --nl-color-border: var(--pro-grijs-200);
  --nl-color-border-sterk: var(--pro-grijs-500);
  --nl-color-text-muted: var(--pro-grijs-700);

  --nl-color-error: var(--pro-rood);
  --nl-color-success: var(--pro-groen);
  --nl-color-warning: var(--pro-oranje);

  /* Het tegelblok krijgt een eigen paar in plaats van mee te liften op
     --nl-color-primary. Dat bleek nodig: in donkere modus mét hoog
     contrast wordt primary juist líchter, en dan stond er wit op
     lichtblauw. Een eigen paar is in elke stand expliciet. */
  --pro-tegel-vlak: var(--pro-logoblauw);
  --pro-tegel-tekst: #ffffff;

  --nl-space-xs: 0.25rem;
  --nl-space-sm: 0.5rem;
  --nl-space-md: 1rem;
  --nl-space-lg: 1.5rem;
  --nl-space-xl: 2rem;

  /* PRO2 zet knoppen en invoervelden vierkant. */
  --nl-border-radius: 0;
  --nl-focus-outline: 3px dashed #000;
  --nl-focus-outline-offset: 2px;
}

/* Donkere modus. PRO2 kent die niet, maar deze pagina wel: wie zijn
   systeem donker heeft gezet, hoort geen wit scherm in zijn gezicht te
   krijgen. De verhoudingen blijven dezelfde; alleen de rollen van tekst
   en achtergrond wisselen en het blauw wordt opgelicht. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --nl-color-text: #f1f5f9;
    --nl-color-background: var(--pro-grijs-900);
    --nl-color-surface: #1e293b;
    --nl-color-primary: color-mix(in srgb, var(--pro-donkerblauw) 35%, #ffffff);
    --nl-color-primary-hover: color-mix(in srgb, var(--pro-donkerblauw) 20%, #ffffff);
    --nl-color-on-primary: #0b1020;
    --nl-color-kop: var(--pro-lichtblauw);
    --nl-color-link: var(--pro-lichtblauw);
    --nl-color-link-alt: var(--pro-lichtblauw);
    --nl-color-link-hover: #ffffff;
    --nl-color-link-visited: #d8b4e8;
    --nl-color-border: #334155;
    --nl-color-border-sterk: #64748b;
    --nl-color-text-muted: #cbd5e1;
    --nl-color-error: #ff6b6b;
    --nl-color-success: #6abf40;
    --nl-color-warning: #ffb347;
    --pro-tegel-vlak: #1e293b;
    --pro-tegel-tekst: #f1f5f9;
    color-scheme: dark;
  }
}

/* Hoog contrast: uitersten, en geen gedempte tekst meer. Deze pagina
   kent geen schakelaar — de instelling komt van het besturingssysteem
   of wordt door onze eigen toegankelijkheidstoets gezet. */
:root[data-contrast="high"] {
  --nl-color-text: #000000;
  --nl-color-background: #ffffff;
  --nl-color-surface: #e8e8e8;
  --nl-color-text-muted: #000000;
  --nl-color-border: #000000;
  --nl-color-border-sterk: #000000;
  --nl-color-kop: #000000;
  --nl-color-link: #00437a;
  --nl-color-link-alt: #00437a;
  --nl-color-link-hover: #000000;
  --nl-color-link-visited: #5b0f5b;
  --nl-color-primary: #00437a;
  --nl-color-primary-hover: #002b4f;
  --pro-tegel-vlak: #000000;
  --pro-tegel-tekst: #ffffff;
}
:root[data-theme="dark"][data-contrast="high"] {
  --nl-color-text: #ffffff;
  --nl-color-background: #000000;
  --nl-color-surface: #1a1a1a;
  --nl-color-text-muted: #ffffff;
  --nl-color-border: #ffffff;
  --nl-color-border-sterk: #ffffff;
  --nl-color-kop: #ffffff;
  --nl-color-link: #8fcae7;
  --nl-color-link-alt: #8fcae7;
  --nl-color-link-hover: #ffffff;
  --nl-color-link-visited: #e5b8ff;
  --nl-color-primary: #8fcae7;
  --nl-color-primary-hover: #ffffff;
  --nl-color-on-primary: #000000;
  --pro-tegel-vlak: #000000;
  --pro-tegel-tekst: #ffffff;
}
[data-contrast="high"] .klein,
[data-contrast="high"] .verplicht,
[data-contrast="high"] .veld .hulp { color: inherit; }

*, *::before, *::after { box-sizing: border-box; }

/* Kolom over de volle hoogte, zodat de voettekst onderaan blijft. */
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--pro-font);
  font-size: var(--pro-tekst);
  line-height: 1.55;
  color: var(--nl-color-text);
  background: var(--nl-color-background);
}

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

/* Zebra-focusring: gestippeld zwart met een witte halo erachter. De halo
   vult de gaten tussen de streepjes, waardoor de ring op elke
   achtergrondkleur een zwart-wit patroon vormt en dus altijd contrast
   houdt — ook op de gekleurde band. */
:focus-visible {
  outline: var(--nl-focus-outline);
  outline-offset: var(--nl-focus-outline-offset);
  box-shadow: 0 0 0 5px #ffffff;
}

.skiplink {
  position: absolute; left: var(--pro-rand); top: -4rem; z-index: 100;
  background: var(--nl-color-background); color: var(--nl-color-text);
  border: 2px solid var(--nl-color-text);
  padding: var(--nl-space-sm) var(--nl-space-md);
}
.skiplink:focus { top: var(--nl-space-md); }

/* padding-inline, niet de padding-afkorting: `.wrap` is specifieker dan
   een elementselector, dus een afkorting zou de verticale ruimte van elk
   element dat ook `.wrap` draagt op nul zetten. Dat ging hier eerder mis. */
.wrap { max-width: var(--pro-kolom-breed); margin: 0 auto; padding-inline: var(--pro-rand); }
.wrap.smal { max-width: var(--pro-kolom-smal); }

/* ── De gekleurde band ──────────────────────────────────────────────
   Navigatie én de h1, precies zoals een PRO2-contentpagina. Dit is het
   herkenningspunt van de hele opmaak.
   ────────────────────────────────────────────────────────────────── */
/* De naamband en de titelband eronder vormen samen één gekleurd vlak;
   daarom hier geen ruimte onderaan. De naam staat op de plek waar PRO de
   kruimel zet. */
.site-header {
  background: var(--nl-color-primary);
  color: var(--nl-color-on-primary);
  padding: var(--nl-space-md) 0 0;
}
.site-header .merk { margin: 0; font-size: var(--pro-klein); font-weight: 700; }
.site-header a, .site-header a:visited { color: var(--nl-color-on-primary); }

/* De titelband sluit naadloos aan op de navigatieband erboven: samen
   vormen ze het gekleurde vlak dat een PRO2-pagina opent. Verder staat
   er niets in — geen intro, geen knoppen. */
.hero { background: var(--nl-color-primary); color: var(--nl-color-on-primary); padding: var(--nl-space-md) 0 var(--nl-space-lg); }
.hero h1 {
  color: var(--nl-color-on-primary);
  font-size: var(--pro-titel);
  font-weight: var(--pro-gewicht-kop);
  line-height: 1.12;
  margin: 0;
  /* Geen max-width hier. De kolom is al 768px breed en dat is de
     leesbreedte; een tweede grens erbovenop brak de titel op een
     plek waar ruimte genoeg was. */
}

/* ── Tegelblok ──────────────────────────────────────────────────────
   Het `editorial-nav`-blok van PRO, nagemeten op de echte site: vlak in
   logoblauw (#154273, donkerder dan de band erboven), 64px lucht boven
   en onder, drie kolommen met 32px ertussen, en per tegel een icoon van
   30px naast de tekst.

   De hele tegel is aanklikbaar, niet alleen de tekst. Dat is geen
   opsmuk: met een aanwijsgebied van ruim 44px is 2.5.8 hier met
   afstand gehaald, terwijl drie losse tekstlinkjes dat net niet zouden
   halen.
   ────────────────────────────────────────────────────────────────── */
.tegels { background: var(--pro-tegel-vlak); padding-block: 3rem; }

.tegels ul {
  list-style: none; margin: 0 auto; padding-inline: var(--pro-rand);
  display: grid; gap: var(--nl-space-xl); grid-template-columns: 1fr;
}
@media (min-width: 48rem) { .tegels ul { grid-template-columns: repeat(3, 1fr); } }

.tegels a {
  display: flex; align-items: center; gap: var(--nl-space-md);
  /* Tekstkleur hard gezet, ook voor :visited — zie de toelichting bij
     de knoppen verderop. */
  color: var(--pro-tegel-tekst);
  text-decoration: none;
  font-size: var(--pro-tekst);
  font-weight: 600;
  padding: var(--nl-space-sm);
  min-height: 48px;
}
.tegels a:visited { color: var(--pro-tegel-tekst); }
.tegels a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.15em; }

.tegels svg {
  flex: none; width: 30px; height: 30px;
  fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round;
}

/* De opening staat op wit, zoals de inleiding van een PRO2-pagina. */
.opening .intro { font-size: var(--pro-intro); line-height: 1.45; max-width: 55ch; margin-bottom: var(--nl-space-lg); }

/* Het prijszinnetje als "Let op"-blok: lichte menging met een gekleurde
   rand links — dezelfde vorm die een redacteur uit het CMS kent. */
.opening .kernpunt {
  background: color-mix(in lch, var(--pro-groen) 12%, var(--nl-color-background));
  border-left: 5px solid var(--pro-groen);
  padding: var(--nl-space-md);
  margin: 0 0 var(--nl-space-lg);
  font-weight: 600;
  max-width: 55ch;
}

.opening .knoppen { display: flex; gap: var(--nl-space-md); flex-wrap: wrap; align-items: center; margin: 0; }

/* ── Inhoud ─────────────────────────────────────────────────────────
   Op wit, in een smalle kolom. PRO2 houdt de leesregel kort; lange
   regels lezen slecht, ook als er ruimte voor is.
   ────────────────────────────────────────────────────────────────── */
main { flex: 1; }
main > section { padding-block: 3rem; }
/* De opening sluit aan op de titelband en hoeft er niet nog eens van
   weg te staan. */
.opening { padding-block: var(--nl-space-xl) 3rem; }
/* Twee vormen, want sommige secties dragen `.wrap` zelf en andere
   hebben hem als kind. Alleen de tweede vorm stond hier, waardoor
   #wat en #levering op de volle 1168px uitkwamen in plaats van op de
   leeskolom van 768px. Dat is wat de tekst groot deed ogen — niet de
   lettergrootte. */
main > section.wrap,
main > section > .wrap { max-width: var(--pro-kolom-smal); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--pro-font);
  font-weight: var(--pro-gewicht-kop);
  color: var(--nl-color-kop);
  line-height: 1.2;
}
h2 { font-size: var(--pro-kop); margin: 0 0 var(--nl-space-lg); }
h3 { font-size: var(--pro-subkop); margin: var(--nl-space-xl) 0 var(--nl-space-sm); }
p { margin: 0 0 var(--nl-space-md); max-width: 70ch; }
.intro { font-size: var(--pro-intro); line-height: 1.45; }

a {
  color: var(--nl-color-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}
a:hover { color: var(--nl-color-link-hover); text-decoration-thickness: 2px; }
a:visited { color: var(--nl-color-link-visited); }

/* Een band in het lichte grijs van PRO, om afwisseling in de pagina te
   brengen zonder een tweede kleur te introduceren. Alles binnen een
   getint vlak schakelt over op de donkere linkkleur — zie hierboven. */
.band, .uitgelicht, .kernpunt, .melding { --nl-color-link: var(--nl-color-link-alt); }
.band { background: var(--nl-color-surface); }

/* ── Uitgelicht ─────────────────────────────────────────────────────
   Het "Let op"-blok van PRO: een lichte menging met een gekleurde rand
   links. Precies de vorm die een redacteur uit het CMS kent.
   ────────────────────────────────────────────────────────────────── */
.uitgelicht {
  background: color-mix(in lch, var(--pro-hemelblauw) 15%, var(--nl-color-background));
  border-left: 5px solid var(--pro-hemelblauw);
  padding: var(--nl-space-lg);
  margin: var(--nl-space-xl) 0;
}
.uitgelicht.let-op {
  background: color-mix(in lch, var(--pro-geel) 25%, var(--nl-color-background));
  border-left-color: var(--nl-color-warning);
}
.uitgelicht.prijs {
  background: color-mix(in lch, var(--pro-groen) 12%, var(--nl-color-background));
  border-left-color: var(--pro-groen);
}
.uitgelicht h3 { margin-top: 0; }
.uitgelicht p:last-child { margin-bottom: 0; }

.bedrag { font-size: var(--pro-kop); font-weight: var(--pro-gewicht-kop); color: var(--nl-color-kop); margin-bottom: var(--nl-space-sm); }
.bedrag .klein { font-size: var(--pro-klein); font-weight: 400; color: var(--nl-color-text-muted); }
.klein-bedrag { margin-top: var(--nl-space-md); }
.klein { font-size: var(--pro-klein); color: var(--nl-color-text-muted); }

/* ── Genummerde stappen ─────────────────────────────────────────── */
.stappen { counter-reset: stap; list-style: none; padding: 0; margin: 0; }
.stappen > li {
  counter-increment: stap; position: relative;
  padding-left: 3.5rem; margin-bottom: var(--nl-space-xl);
}
.stappen > li::before {
  content: counter(stap);
  position: absolute; left: 0; top: 0;
  width: 2.5rem; height: 2.5rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--nl-color-primary); color: var(--nl-color-on-primary);
  font-weight: 700; font-size: var(--pro-klein);
}
.stappen h3 { margin: 0 0 var(--nl-space-xs); }

/* Lijst met een chevron, zoals de linklijsten in de rijkshuisstijl. */
.lijst { list-style: none; padding-left: 0; margin: 0 0 var(--nl-space-md); }
.lijst li { position: relative; padding-left: 1.5em; margin-bottom: var(--nl-space-sm); max-width: 70ch; }
.lijst li::before {
  content: '›';
  position: absolute; left: 0.25em; top: -0.05em;
  color: var(--nl-color-primary); font-weight: 700;
}

/* ── Knoppen ────────────────────────────────────────────────────────
   PRO2: vierkant, 48px hoog, 16px binnenruimte opzij.
   ────────────────────────────────────────────────────────────────── */
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--nl-space-sm);
  min-height: 48px; padding: 0 var(--nl-space-md);
  border: 2px solid transparent;
  font: inherit; font-size: var(--pro-klein); font-weight: 600;
  cursor: pointer; text-decoration: none; line-height: 1.4;
}
/**
 * `:visited` staat er expliciet bij, en dat is geen overbodigheid.
 *
 * Hier stond `.knop:visited { color: inherit }`, bedoeld om de paarse
 * bezochte-linkkleur weg te halen. Maar `inherit` neemt de kleur van de
 * ouder over — de gewone tekstkleur van de pagina — en dus kreeg een
 * knop die je eerder had aangeklikt donkere tekst op een blauw vlak:
 * 2,8:1, ruim onder de ondergrens.
 *
 * Geen enkele geautomatiseerde toets vangt dit. Browsers geven de
 * werkelijke `:visited`-kleur niet terug aan JavaScript — ook niet aan
 * axe — omdat je daarmee iemands geschiedenis zou kunnen uitlezen. Het
 * is alleen te zien door ernaar te kijken. Daarom staat de kleur hier
 * per variant hard genoemd, en waakt er een test over dat niemand er
 * weer `inherit` van maakt.
 */
.knop-primair, .knop-primair:visited { background: var(--nl-color-primary); color: var(--nl-color-on-primary); }
.knop-primair:hover { background: var(--nl-color-primary-hover); color: var(--nl-color-on-primary); }
.knop-secundair, .knop-secundair:visited { background: transparent; color: var(--nl-color-primary); border-color: var(--nl-color-primary); }
.knop-secundair:hover { background: var(--nl-color-primary); color: var(--nl-color-on-primary); }
.knop[disabled] { opacity: 0.55; cursor: not-allowed; }
.knoppen { display: flex; gap: var(--nl-space-sm); flex-wrap: wrap; }

/* ── Formulier ──────────────────────────────────────────────────── */
.veld { margin-bottom: var(--nl-space-lg); }
.veld label { display: block; font-weight: 600; margin-bottom: var(--nl-space-xs); }
.veld .hulp { display: block; font-weight: 400; font-size: var(--pro-klein); color: var(--nl-color-text-muted); margin-bottom: var(--nl-space-xs); max-width: 70ch; }
.veld input:not([type="radio"]):not([type="checkbox"]), .veld select, .veld textarea {
  width: 100%; font: inherit;
  min-height: 48px; padding: var(--nl-space-sm) 0.75rem;
  border: 1px solid var(--nl-color-border-sterk);
  background: var(--nl-color-background); color: var(--nl-color-text);
}
.veld input:focus, .veld select:focus, .veld textarea:focus { border-color: var(--nl-color-primary); }
/* Velden naast elkaar lijnen op hun invoervak uit, niet op hun label: een
   label dat over twee regels loopt zou anders zijn eigen invoervak omlaag
   duwen terwijl het buurvak blijft staan. */
/* De rij draagt de ruimte, niet de velden erin. `.veldrij > .veld` zet
   de eigen marge van een veld op nul zodat de invoervakken netjes
   uitlijnen — zonder deze marge op de rij zelf plakken opeenvolgende
   rijen daardoor tegen elkaar aan. */
.veldrij {
  display: grid;
  gap: var(--nl-space-md) var(--nl-space-lg);
  grid-template-columns: 1fr;
  align-items: end;
  margin-bottom: var(--nl-space-lg);
}
/* Een rij ín een rij (huisnummer en toevoeging) hoort geen tweede keer
   ruimte onder zich te krijgen. */
.veldrij > .veldrij { margin-bottom: 0; }
.veldrij > .veld { display: flex; flex-direction: column; margin-bottom: 0; }
.veldrij > .veld > :is(input, select, textarea) { margin-top: auto; }
@media (min-width: 40rem) { .veldrij { grid-template-columns: 1fr 1fr; } }

fieldset { border: 0; border-top: 1px solid var(--nl-color-border); padding: var(--nl-space-lg) 0 0; margin: 0 0 var(--nl-space-xl); }
legend { font-size: var(--pro-subkop); font-weight: var(--pro-gewicht-kop); color: var(--nl-color-kop); padding: 0; }
.verplicht { font-weight: 400; color: var(--nl-color-text-muted); font-size: var(--pro-klein); }

/* Het vinkje en zijn label op één regel; de hulptekst eronder springt in
   tot onder de tekst, niet onder het vakje. */
.onthoud label { display: flex; align-items: center; gap: var(--nl-space-sm); font-weight: 600; width: fit-content; }
.onthoud input[type="checkbox"] { width: 1.25rem; height: 1.25rem; flex: none; }
.onthoud .hulp { margin-top: var(--nl-space-xs); padding-left: calc(1.25rem + var(--nl-space-sm)); }

/* Een genest fieldset zou met dezelfde rand een doos in een doos worden.
   Hier alleen een lijn links, zodat te zien is dat de keuzes bij elkaar
   horen zonder dat het zwaar wordt. */
.keuze {
  border: 0; border-left: 3px solid var(--nl-color-primary);
  padding: 0 0 0 var(--nl-space-md); margin: 0 0 var(--nl-space-lg);
}
.keuze > legend { font-size: var(--pro-tekst); padding: 0; margin-bottom: var(--nl-space-sm); }
.keuze-optie { display: flex; align-items: flex-start; gap: var(--nl-space-sm); margin-bottom: var(--nl-space-sm); }
.keuze-optie input[type="radio"] { width: 1.25rem; height: 1.25rem; flex: none; margin-top: 0.2rem; }
.keuze-optie label { font-weight: 400; margin: 0; }

/* Eenvoudige valstrik tegen robots; voor mensen en hulpsoftware weg. */
.valstrik { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── Meldingen ──────────────────────────────────────────────────── */
.melding { padding: var(--nl-space-md); border-left: 5px solid; margin-bottom: var(--nl-space-lg); }
.melding-fout { background: color-mix(in lch, var(--nl-color-error) 15%, var(--nl-color-background)); border-color: var(--nl-color-error); }
.melding-goed { background: color-mix(in lch, var(--nl-color-success) 15%, var(--nl-color-background)); border-color: var(--nl-color-success); }
.melding p:last-child { margin-bottom: 0; }
.melding ul { margin: var(--nl-space-sm) 0 0; padding-left: var(--nl-space-lg); }

.veldfout { color: var(--nl-color-error); font-weight: 600; margin: var(--nl-space-xs) 0 0; }
.veldfout::before { content: '✗ '; }

/* ── Voettekst ──────────────────────────────────────────────────────
   Blauw, zoals PRO2 hem uitlevert (--footer-color: #01689b) — niet het
   bijna-zwart dat hier eerder stond.
   ────────────────────────────────────────────────────────────────── */
.site-footer {
  background: var(--nl-color-primary);
  color: var(--nl-color-on-primary);
  padding-block: var(--nl-space-xl);
  font-size: var(--pro-klein);
  margin-top: var(--nl-space-xl);
}
.site-footer a, .site-footer a:visited { color: var(--nl-color-on-primary); }
.site-footer p { margin: 0 0 var(--nl-space-xs); }
.site-footer h2 { color: inherit; font-size: 1rem; font-weight: 700; margin: 0 0 var(--nl-space-sm); }

/**
 * Gedempte tekst in de voettekst.
 *
 * `.klein` gebruikt --nl-color-text-muted, en die is uitgerekend tegen de
 * gewone achtergrond. De voettekst draait die om — gekleurd vlak, lichte
 * tekst — waardoor diezelfde kleur er te donker op staat. Hier dus mengen
 * met de voetkleur zelf in plaats van met de paginakleur.
 */
.site-footer .klein { color: color-mix(in srgb, var(--nl-color-on-primary) 85%, var(--nl-color-primary)); }

/* ── Colofon ────────────────────────────────────────────────────────
   Wie er achter deze site zit, met adres, KvK en btw-nummer. Dat is
   geen versiering: wie online een dienst aanbiedt, moet die gegevens
   vermelden (artikel 3:15d BW).

   Het IBAN dat op wcag.nl staat is hier weggelaten. Dat hoort op een
   factuur, niet op een verkooppagina.
   ────────────────────────────────────────────────────────────────── */
.colofon { display: grid; gap: var(--nl-space-lg); grid-template-columns: 1fr; margin-bottom: var(--nl-space-lg); }
@media (min-width: 45rem) { .colofon { grid-template-columns: repeat(3, 1fr); gap: var(--nl-space-xl); } }
.colofon p { margin: 0 0 var(--nl-space-xs); }
.colofon-slot {
  border-top: 1px solid color-mix(in srgb, var(--nl-color-on-primary) 35%, transparent);
  padding-top: var(--nl-space-md);
  margin: 0;
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ── Zelftest ───────────────────────────────────────────────────────
   Staat tussen de voorwaarden en het formulier in: eerst lezen waaraan
   je site moet voldoen, dan kunnen nakijken of dat zo is, dan pas
   invullen.
   ────────────────────────────────────────────────────────────────── */
.zelftest {
  border: 1px solid var(--nl-color-border-sterk);
  border-top: 3px solid var(--nl-color-primary);
  padding: var(--nl-space-lg);
  margin: var(--nl-space-xl) 0;
  background: var(--nl-color-background);
  /* Binnen dit vlak geldt de donkere linkkleur niet: de achtergrond is
     wit, dus het gewone hemelblauw haalt hier zijn 4,5:1. */
}
.zelftest h3 { margin-top: 0; }

/* Het veld en de knop naast elkaar als er ruimte is, en de knop lijnt
   uit op het invoervak en niet op het label erboven. */
.zelftest-rij { display: grid; gap: var(--nl-space-md); grid-template-columns: 1fr; align-items: end; }
@media (min-width: 34rem) { .zelftest-rij { grid-template-columns: 1fr auto; } }
.zelftest-rij .veld { margin-bottom: 0; }
.zelftest-rij p { margin: 0; }

.zelftest .melding { margin-top: var(--nl-space-lg); margin-bottom: 0; }
.zelftest .melding .lijst { margin-bottom: var(--nl-space-md); }