/*
 * css/site.css — de stylesheet van de site, in de huisstijl van de
 * ddop-huisstijl-plugin (DEV-4375; milestone "Implement brand style", DEV-4374).
 *
 * Elke pagina laadt eerst /huisstijl/reference/ddop.css (een ongewijzigde
 * kopie uit de ddop-huisstijl-plugin, zie huisstijl/VERSION) en daarna dit
 * bestand. In de eigen <style> van een pagina staat alleen nog wat alleen bij
 * die pagina hoort. Het script van nav-collapse v1 staat per pagina; de CSS
 * ervan staat hier (DEV-5045).
 *
 * Volgorde telt: de <style> van een pagina komt ná dit bestand en wint dus
 * bij gelijke specificiteit. Pagina's die van een regel hieronder afwijken,
 * houden alleen dat verschil in hun eigen <style>.
 *
 * Tijdens de uitrol stond de huisstijl in een apart, tijdelijk bestand dat
 * per pagina werd aangezet. Aan het eind van de milestone is dat bestand
 * hierin opgegaan (DEV-4848, besluit 20): per selector staat hier één regel.
 *
 * De waarden komen uit /huisstijl/reference/ddop.css (de ongewijzigde kopie
 * van de plugin). Geen hexwaarden, geen eigen maten. Waar de plugin geen
 * waarde heeft, staat een tussenoplossing uit bestaande tokens, gemarkeerd
 * met "ontwerpverzoek:".
 *
 * Besluitnummers verwijzen naar docs/Brand style implementation/
 * questions-archive.md.
 */

/* Lettertype — tussenoplossing. ontwerpverzoek: HUI-15.
   De plugin levert DM Sans als vier vaste bestanden, gesneden voor tekstmaten.
   Op koppen van 56px lopen die zo breed uit dat de kop op home na "De"
   afbreekt. Tot de plugin de variabele DM Sans meelevert (met optische maat,
   die letters op grote maten strakker maakt), gebruikt de site die variabele
   versie zelf, onder een eigen naam, zodat de vaste bestanden niet geladen
   worden. Zelf gehost (SIL Open Font License, css/fonts/OFL.txt), niet van
   Google: dat stuurt het IP-adres van elke bezoeker naar een derde partij.
   Besluit Anne 2026-10-05 (vraag 21l). Terug naar de plugin = deze twee
   blokken weg en "DM Sans Variable" uit de font-family hieronder. */
@font-face {
  font-family: "DM Sans Variable";
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url("fonts/DMSans-Variable-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "DM Sans Variable";
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url("fonts/DMSans-Variable-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Tussenmaten (ontwerpverzoek: HUI-16) ────────────────────────────────── */

/* Het label boven een kop in twee maten, naar de maatlogica van de plugin
   (zoals de knoppen lg / md / sm hebben). De plugin heeft alleen de grote:
   --ui-caps-size (16px) is de lg. De site gebruikt de md: 12px, de caption-
   maat van de plugin, met verder alles van het plugin-label (besluit 21b).
   TUSSENOPLOSSING, ontwerpverzoek: HUI-16 — lg- en md-label in de plugin.
   Zodra de plugin ze heeft, vervallen deze regels en wijzen de selectors
   hieronder naar de plugin-tokens. Elke waarde verwijst naar een bestaand
   token; er is geen eigen maat bijgekomen. */
:root {
  --ui-caps-md-size: var(--body-caption-size);              /* 12px */
  --ui-caps-md-line-height: var(--ui-caps-line-height);
  --ui-caps-md-letter-spacing: var(--ui-caps-letter-spacing);
}

/* ── Breekpunten ─────────────────────────────────────────────────────────────
   Zes standaardmaten, mobile-first (min-width). De waarden volgen de gangbare
   schaal (Tailwind: 640 / 768 / 1024 / 1280 / 1536); 640, 768 en 1024 stonden
   al op de site. Mobiel klein is de basis en heeft geen media query.
   LET OP: een CSS-variabele kan niet in `@media (...)`. In een media query
   schrijf je dus de px-waarde zelf, met de naam van de maat in commentaar:
     @media (min-width: 768px) { … }   /* tablet */
   De variabelen zijn voor script (getComputedStyle) en voor het overzicht
   hier. Zie .claude/VISUAL-STYLE-GUIDE.md §17. */
:root {
  --bp-mobile-small: 0px;       /* basis, geen query */
  --bp-mobile-wide: 640px;
  --bp-tablet: 768px;
  --bp-desktop: 1024px;
  --bp-large-desktop: 1280px;
  --bp-extra-large: 1536px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/* ── Typografie (besluit 4, BRAND.md §4) ─────────────────────────────────── */

body {
  /* "DM Sans Variable" vooraan: tijdelijk, ontwerpverzoek HUI-15 (zie boven). */
  font-family: "DM Sans Variable", var(--font-family);
  font-size: 1rem;                          /* = --body-base-size (16px) */
  line-height: var(--body-base-line-height);
  color: var(--text-primary);
  background: var(--surface-default);
  -webkit-font-smoothing: antialiased;
}

/* Koppen: de plugin-maten in rem (1rem = 16px, besluit 4), 700 en
   regelhoogte 1.2. De letterafstand van -0.01em op h1 t/m h4 komt uit
   ddop.css zelf. */
h1, h2, h3, h4, h5 {
  margin: 0 0 var(--space-16);
  color: var(--text-primary);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  text-wrap: balance;
}

/* De paginatitel is op deze site altijd de enige h1, in de hero of page-hero:
   de "hero"-trede van de plugin (56px = 3.5rem, regelhoogte 1.1).
   ontwerpverzoek: HUI-11 — de plugin heeft geen telefoonmaten. Tot het
   antwoord er is, zakt alleen de paginatitel op smal scherm naar 2rem, zoals
   de site al deed (besluit 4B). */
h1 {
  font-size: clamp(2rem, 6vw, 3.5rem);      /* tot --heading-hero-size */
  line-height: var(--heading-hero-line-height);
  margin-bottom: var(--space-24);
}
h2 { font-size: 1.5rem; }                   /* = --heading-h2-size (24px) */
h3 { font-size: 1.25rem; }                  /* = --heading-h3-size (20px) */
h4, h5 { font-size: 1.125rem; }             /* = --heading-h4-size (18px) */

/* Sectiekop groter dan de plugin. BEWUSTE AFWIJKING van de huisstijl: de
   plugin-h2 is 1.5rem (--heading-h2-size), maar dan verschillen h2 en h3 te
   weinig. Op besluit van Anne (ledger 28, 28a B, 28b B) krijgt elke
   sectiekop deze klasse: 2rem op desktop, op een telefoon kleiner, tot
   1.5rem. Alleen sectiekoppen; kaarttitels, de titels in de vacaturelijst
   en de zoekresultaten houden de h2 van hierboven. Een klasse wint van de
   kale h2-regels hierboven, ook op plekken als .vacancy-content h2 die geen
   maat zetten. */
.heading-h2-size-lg { font-size: clamp(1.5rem, 4vw, 2rem); }

p { margin: 0 0 var(--space-16); max-width: 65ch; }
p:last-child { margin-bottom: 0; }

/* ── Links ───────────────────────────────────────────────────────────────── */

a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; }

/* --text-link haalt op --surface-accent maar 4,26:1: alleen grote tekst
   (BRAND.md §3). Een link in lopende tekst op een lichtblauw vlak krijgt
   daarom de tekstkleur en een onderstreping, zodat hij een link blijft.
   ontwerpverzoek: HUI-13 — linkkleur op --surface-accent. */
.page-intro p a,
.section-blue-bg .section-intro a,
.cta-content p a {
  color: var(--text-primary);
  text-decoration: underline;
}

/* 700 is alleen voor koppen en het eyebrow-label; nadruk is 600. */
strong, b { font-weight: var(--font-weight-semibold); }
.text-accent { color: var(--text-link); }

/* Eyebrow-label (besluit 5, 21b): het label van de plugin (.eyebrow: 700,
   kapitalen, --text-secondary) in de md-maat van hierboven, 12px. Nooit
   groen: --accent is geen tekstkleur (BRAND.md §2).
   ontwerpverzoek: HUI-16 — de md-maat van het label. */
.eyebrow {
  display: inline-block;
  font-size: var(--ui-caps-md-size);
  font-weight: var(--font-weight-bold);
  line-height: var(--ui-caps-md-line-height);
  letter-spacing: var(--ui-caps-md-letter-spacing);
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* ── Focusring (BRAND.md §3) ─────────────────────────────────────────────── */

:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}
/* Op het donkere vlak van de footer is de ring wit. */
footer :focus-visible { outline-color: var(--border-focus-on-inverse); }

.container {
  width: 100%;
  max-width: var(--width-default);
  margin-inline: auto;
  padding-inline: var(--space-responsive);
}

/* ── Header en navigatie (B7, SH2) ───────────────────────────────────────── */

.site-header {
  background: var(--surface-default);
  border-bottom: 1px solid var(--border-subtle);
  position: sticky;
  top: 0;
  z-index: 50;
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  padding-block: var(--space-16);
  flex-wrap: wrap;
}
/* Ingeklapte header op de telefoon (nav-collapse v1): het menu en de taalkeuze
   krimpen naar hoogte 0 maar houden elk een eigen rij, en de rij-afstand van
   de header-container bleef dan twee keer staan. Zonder rij-afstand sluit de
   balk strak om logo en Menu-knop (vraag 42). Alleen tot 640px, waar de
   header echt inklapt: daarboven kromp de header anders 1rem bij omlaag
   scrollen, omdat het script de klasse ook op bredere schermen zet
   (vraag 60d). */
@media (max-width: 640px) {
  .site-header.collapsed > .container { row-gap: 0; }
}
.nav-brand {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font-weight: 700;
  color: var(--text-primary);
  text-decoration: none;
}
.nav-brand:hover { text-decoration: none; }
/* Het kleurenlogo van de plugin in de header. SITE-UITZONDERING op de maten
   van de topbalk van de plugin (3.5rem / 2.5rem, components.md, Horizontale
   navigatie): op besluit van Anne (2026-10-05, vraag 40) één hoogte van
   2.1rem op elke schermbreedte, met 1rem ruimte rechts. Vervangt besluit 21g.
   Proportioneel (viewBox 200 × 57). Logomaten zijn geen tokens. De vrije ruimte
   eromheen (minstens 1/8 van de hoogte, BRAND.md §12) zit ruim in de padding
   van de header en deze marge. */
.nav-brand img { height: 2.1rem; width: auto; margin-right: 1rem; }
.nav { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center; }
/* Alle menulinks staan op 600, zoals in de brede balk van de plugin; het
   actieve item verschilt alleen in kleur (besluit 21f). De blauwe
   onderstreping vervalt (BRAND.md §9). De rand zelf blijft transparant staan,
   zodat de hoogte van de balk niet verandert. */
.nav-item {
  color: var(--nav-item-text);
  font-weight: var(--font-weight-semibold);
  padding: var(--space-4) 0;
  border-bottom: 2px solid transparent;
  transition: color var(--transition-fast);
}
.nav-item:hover, .nav-item.active { text-decoration: none; }
.nav-item:hover { color: var(--nav-item-text-hover); }
.nav-item.active { color: var(--nav-item-text-active); }

/* De taalkeuze heeft geen component in de plugin.
   ontwerpverzoek: HUI-14 — taalkeuze in de header. Tussenoplossing:
   de gekozen taal in de vlak- en tekstkleur van de primaire knop, de andere
   in --text-secondary. Padding naar de schaal (4 / 12). */
.lang-switch { display: flex; gap: var(--space-4); align-items: center; font-size: 0.875rem; margin-left: auto; }
.lang-switch a { padding: var(--space-4) var(--space-12); border-radius: var(--radius-full); color: var(--text-secondary); }
.lang-switch a.current { background: var(--action-primary-surface); color: var(--action-primary-text); }
.lang-switch a:hover { text-decoration: none; color: var(--text-primary); }
.lang-switch a.current:hover { background: var(--action-primary-surface-hover); color: var(--action-primary-text); }
/* Mobile wide (641-767px): alles past niet op één regel. De taalkeuze
   staat dan rechtsboven naast het logo en het menu krijgt een eigen, volle
   regel eronder: twee regels in plaats van drie (Anne, ledger 61). Onder
   tablet (768px) wat minder ruimte tussen de menu-items, zodat ze op één regel passen. */
@media (min-width: 641px) and (max-width: 767px) { /* mobile wide, onder tablet; vanaf 768px staat de header op één regel */
  .site-header .container > .lang-switch { order: 1; }
  .site-header .container > .nav { order: 2; flex-basis: 100%; }
}
@media (min-width: 641px) and (max-width: 767px) { /* mobile wide, onder tablet */
  .nav { gap: var(--space-16); }
}
/* Tablet (768-1023px): de header op één regel (Anne, 2026-10-12, ledger Sophia-ronde 8b):
   kleiner logo, minder ruimte tussen de menu-items, geen ruimte tussen de taalknoppen
   en geen gap in de header-container. */
@media (min-width: 768px) and (max-width: 1023px) {
  .site-header .container { gap: 0; }
  .lang-switch { gap: 0; }
  .nav { gap: 0.6rem; }
  .nav-brand img { height: 1.5rem; }
}

/* ── Inklappende header op de telefoon: nav-collapse v1 — see .claude/VISUAL-STYLE-GUIDE.md §5a ──
   De CSS van het patroon staat hier één keer (DEV-5045, Anne ledger 60 b); het
   script staat per pagina, byte-gelijk op elke pagina. Het gedrag (§5a) is
   ongewijzigd: tot 640px klapt de header bij omlaag scrollen in tot logo en
   Menu-knop, en klapt weer uit bij omhoog scrollen of een klik op Menu. */

/* De Menu-knop (die maakt het script aan) is de secundaire knop van de plugin
   in maat md (BRAND.md §8, components.md "Knoppen"): doorzichtig, rand en
   tekst in de actiekleur; aanwijzen en indrukken maken hem donkerder. De
   focusring komt van :focus-visible hierboven. */
.nav-menu-btn {
  display: none;
  position: relative;
  box-sizing: border-box;
  height: var(--button-height-md);
  padding: var(--button-padding-block-md) var(--button-padding-inline-md);
  background: transparent;
  color: var(--action-secondary-text);
  font-family: inherit;
  font-size: var(--button-font-size);
  font-weight: var(--font-weight-semibold);
  line-height: var(--button-line-height);
  border: 1px solid var(--action-secondary-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  align-items: center;
  gap: var(--space-8);
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.nav-menu-btn:hover { background: var(--action-secondary-surface-hover); border-color: var(--action-secondary-border-hover); color: var(--action-secondary-text-hover); }
.nav-menu-btn:active { background: var(--action-secondary-surface-active); border-color: var(--action-secondary-border-active); color: var(--action-secondary-text-active); }
/* Raakvlak van 44px om de knop van 40px, onzichtbaar (BRAND.md §8). */
.nav-menu-btn::after { content: ""; position: absolute; inset-block-start: 50%; inset-inline: 0; block-size: 2.75rem; translate: 0 -50%; }
/* Het Lucide-icoon "menu" naast het label: icon-md (BRAND.md §13). */
.nav-menu-btn svg { width: var(--icon-md); height: var(--icon-md); }
.site-header { transition: padding 0.25s ease; }
@media (max-width: 640px) {
  /* Expliciete max-height in de uitgeklapte stand, zodat de overgang een echt
     doel heeft: CSS kan niet animeren van een vaste waarde naar none/auto,
     anders bleef het menu op 0 staan nadat .collapsed weg is. */
  .nav,
  .lang-switch {
    max-height: 31.25rem;
    opacity: 1;
    overflow: hidden;
    visibility: visible;
    transition:
      max-height 0.35s ease,
      opacity 0.25s ease 0.05s,
      margin 0.35s ease,
      padding 0.25s ease,
      visibility 0s;
  }
  /* Ruimte voor de focusring (2px + 2px offset), die overflow: hidden anders
     afknipt: padding, opgeheven door een even grote negatieve marge, zodat er
     niets verschuift. Ingeklapt gaan beide naar 0 (hieronder). */
  .nav { padding: var(--space-4); margin: calc(-1 * var(--space-4)); }
  .lang-switch { padding: var(--space-4); margin-block: calc(-1 * var(--space-4)); margin-right: calc(-1 * var(--space-4)); }
  /* Ingeklapt zijn de links ook voor het toetsenbord en de schermlezer weg:
     visibility: hidden, pas na de inklap-animatie (0.3s vertraging). Bij
     uitklappen zijn ze meteen terug (visibility 0s hierboven). */
  .site-header.collapsed .nav,
  .site-header.collapsed .lang-switch {
    max-height: 0;
    opacity: 0;
    margin: 0;
    padding: 0;
    border: 0;
    pointer-events: none;
    visibility: hidden;
    transition:
      max-height 0.3s ease,
      opacity 0.2s ease,
      margin 0.3s ease,
      padding 0.2s ease,
      visibility 0s linear 0.3s;
  }
  .site-header.collapsed .nav-menu-btn { display: inline-flex; margin-left: auto; }
  .site-header.collapsed > .container { padding-block: var(--space-8); }
}

/* ── Knoppen (BRAND.md §8) ───────────────────────────────────────────────── */

/* Hoogte is leidend: height met box-sizing, de padding is de controle.
   Geen lift meer bij aanwijzen. */
.btn-lg, .btn-md, .btn-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  white-space: nowrap;
  font-family: inherit;
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  /* inline-flex laat de spatie tussen label en pijl (<span>→</span>) vallen;
     de gap zet ze 8px uit elkaar (DEV-4860). */
  gap: var(--space-8);
}
.btn-lg {
  height: var(--button-height-lg);
  padding: var(--button-padding-block-lg) var(--button-padding-inline-lg);
  font-size: var(--button-font-size);
  line-height: var(--button-line-height);
}
.btn-md {
  height: var(--button-height-md);
  padding: var(--button-padding-block-md) var(--button-padding-inline-md);
  font-size: var(--button-font-size);
  line-height: var(--button-line-height);
}
.btn-sm {
  height: var(--button-height-sm);
  padding: var(--button-padding-block-sm) var(--button-padding-inline-sm);
  font-size: var(--button-font-size-sm);
  line-height: var(--button-line-height-sm);
}
/* Op een telefoon mag het label van een knop over meer regels lopen, zodat
   een lang label ("Bekijk hoe samenwerken eruitziet") niet breder wordt dan
   het scherm (Anne, ledger 48c A; tussenoplossing, ontwerpverzoek HUI-6). De vaste hoogte wordt een minimumhoogte
   en de ruimte boven en onder het label wordt kleiner: een knop van één
   regel blijft daardoor precies even hoog, met het label op dezelfde plek.
   Een label over twee regels staat gecentreerd. */
@media (max-width: 639px) {
  .btn-lg, .btn-md, .btn-sm { height: auto; white-space: normal; text-align: center; }
  .btn-lg { min-height: var(--button-height-lg); padding-block: var(--space-8); }
  .btn-md { min-height: var(--button-height-md); padding-block: var(--space-4); }
  .btn-sm { min-height: var(--button-height-sm); padding-block: var(--space-4); }
}

/* Geen onderstreping op een knop, ook niet bij aanwijzen of focus. De kale
   a:hover-regel (0,1,1) won van .btn-lg (0,1,0); een knop zonder eigen
   variant (de CTA-band) kreeg daardoor een onderstreept label (DEV-5055). */
.btn-lg:hover, .btn-md:hover, .btn-sm:hover,
.btn-lg:focus-visible, .btn-md:focus-visible, .btn-sm:focus-visible { text-decoration: none; }

/* Pijl na een label: schuift een stukje naar rechts bij aanwijzen of focus
   (DEV-5055). De pijl is een eigen element, dus de gap van 8px blijft de
   rust-afstand; alleen de pijl beweegt, het label blijft staan. Bij
   prefers-reduced-motion beweegt er niets. */
:is(.btn-lg, .btn-md, .btn-sm) > span[aria-hidden="true"],
.icon-chevron::after {
  transition: transform var(--transition-fast);
}
:is(.btn-lg, .btn-md, .btn-sm):is(:hover, :focus-visible) > span[aria-hidden="true"],
:is(a, .card-clickable):is(:hover, :focus-visible) .icon-chevron::after {
  transform: translateX(0.125rem);
}
/* Tekstlink met de pijlklasse op de <a> zelf (a.channel-cta, a.prose-cta;
   DEV-5253): de regel hierboven is een afstammelingen-selector en raakt die
   niet. Zelfde schuifje (0.125rem, --transition-fast), plus 1px omlaag zodat
   de pijl optisch op het midden van de kleine letters staat (gemeten: 0.7px
   te hoog; het midden van de regelhoogte ligt 0.3px van het midden van de
   lettertypebox). Alleen op a.icon-chevron: knoppen (span-pijl) en de pijl in
   een kaart (span.icon-chevron) houden hun eigen regel en bewegen dus niet
   dubbel. */
a.icon-chevron::after { transform: translateY(1px); }
a.icon-chevron:is(:hover, :focus-visible)::after { transform: translate(0.125rem, 1px); }
@media (prefers-reduced-motion: reduce) {
  :is(.btn-lg, .btn-md, .btn-sm) > span[aria-hidden="true"],
  .icon-chevron::after { transition: none; }
  :is(.btn-lg, .btn-md, .btn-sm):is(:hover, :focus-visible) > span[aria-hidden="true"],
  :is(a, .card-clickable):is(:hover, :focus-visible) .icon-chevron::after { transform: none; }
  a.icon-chevron:is(:hover, :focus-visible)::after { transform: translateY(1px); }
}

/* Nadruk zonder link: tekst op een kaart die zelf geen link is (home, de kaart
   "Mensen versterken"). Halfvet (600, zoals de kaarten ernaast) en --text-primary, geen linkkleur, geen pijl,
   geen onderstreping: het label moet niet als link lezen (DEV-5055). */
.card-emphasis {
  margin-top: auto;
  padding-top: var(--space-16);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  font-size: var(--body-base-size);
}

/* Primair: aanwijzen maakt donkerder, indrukken nog donkerder. Nooit lichter. */
.btn-darkblue { background: var(--action-primary-surface); color: var(--action-primary-text); }
.btn-darkblue:hover {
  background: var(--action-primary-surface-hover);
  color: var(--action-primary-text);
  text-decoration: none;
}
.btn-darkblue:active { background: var(--action-primary-surface-active); }
/* Uitgeschakeld (bv. het contactformulier terwijl het bericht onderweg is,
   DEV-5056): grijs vlak, geen aanwijs- of indrukeffect, geen pijlbeweging. */
.btn-darkblue:disabled,
.btn-darkblue:disabled:hover,
.btn-darkblue:disabled:active {
  background: var(--disabled-surface);
  color: var(--disabled-text);
  cursor: not-allowed;
}
.btn-darkblue:disabled > span[aria-hidden="true"] { transform: none; }

/* Secundair: 1px rand in de actiekleur, doorzichtig in rust. */
.btn-outline {
  background: transparent;
  border-color: var(--action-secondary-border);
  color: var(--action-secondary-text);
}
.btn-outline:hover {
  background: var(--action-secondary-surface-hover);
  border-color: var(--action-secondary-border-hover);
  color: var(--action-secondary-text-hover);
  text-decoration: none;
}
.btn-outline:active {
  background: var(--action-secondary-surface-active);
  border-color: var(--action-secondary-border-active);
  color: var(--action-secondary-text-active);
}

/* ── Aanklikbare kaart (patroon regel 7; Anne, 34 en 34a A) ───────────────── */

/* Een kaart die naar een andere pagina leidt, is in zijn geheel klikbaar:
   de kaart is zelf de <a>, of de titellink (.card-clickable__link) strekt
   zich over de hele kaart uit. Bij aanwijzen krijgt de kaart --surface-hover,
   --border-strong en een lift van 0.125rem, zonder schaduw. De lift is een
   bewuste afwijking van de plugin, die geen lift kent (Anne, 33 en 34a A).
   Vlak, rand, hoek en binnenruimte van de kaart in rust staan bij de pagina.
   Een kaart die nergens heen leidt, krijgt deze klasse niet. */
.card-clickable {
  position: relative;
  color: inherit;
  text-decoration: none;
  transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}
.card-clickable:hover {
  background: var(--surface-hover);
  border-color: var(--border-strong);
  transform: translateY(-0.125rem);
  text-decoration: none;
}
.card-clickable__link::after { content: ""; position: absolute; inset: 0; }
.card-clickable__link:hover { text-decoration: none; }
@media (prefers-reduced-motion: reduce) { .card-clickable { transition: none; } }

/* ── Vlakken: geen gradiënten (besluit 2) ────────────────────────────────── */

.page-hero {
  padding: 3rem 0 2rem;
  background: var(--surface-accent);
}
.page-intro { max-width: 51.25rem; text-align: center; margin: 0 auto; }
.page-intro h1 { margin-bottom: var(--space-16); }
/* Lopende tekst buiten de koppen staat op de drie tekstmaten van de plugin,
   gekozen naar wat de tekst doet (besluit 21d): body 16px voor lopende tekst
   en intro's, small 14px voor bijzaak, caption 12px voor hints en de kleine
   regel onderaan. */
.page-intro p { font-size: var(--body-base-size); color: var(--text-secondary); margin: 0 auto; max-width: 65ch; }
@media (min-width: 640px) {
  .page-hero { padding: 4rem 0 3rem; }
}

/* ── Vacaturepagina's (vacatures/*.html, DEV-4861) ───────────────────────── */

/* Koppen en namen zijn donker, alleen links zijn blauw (vraag 39 B). */

/* Kruimelpad op het lichtblauwe vlak van de page-hero. --text-link haalt daar
   maar 4,26:1, te weinig voor 14px: de links krijgen de tekstkleur en een
   onderstreping, zoals .page-intro p a hierboven. Het scheidingsteken in
   --text-secondary, nooit --text-muted op een getint vlak.
   ontwerpverzoek: HUI-13 — linkkleur op --surface-accent. */
.breadcrumb { font-size: var(--body-small-size); color: var(--text-secondary); margin-bottom: var(--space-16); }
.breadcrumb-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-8); }
.breadcrumb-list li { display: inline-flex; align-items: center; gap: var(--space-8); }
.breadcrumb-list li:not(:last-child)::after { content: "/"; color: var(--text-secondary); }
.breadcrumb-list a { color: var(--text-primary); text-decoration: underline; }
.vacancy-hero-intro { max-width: 47.5rem; }
.vacancy-hero-intro h1 { color: var(--text-primary); margin-bottom: var(--space-16); }
.vacancy-hero-intro .subtitle { font-size: var(--body-base-size); color: var(--text-secondary); margin: 0; }

/* ── Taalnotitie (EN-pagina's) ───────────────────────────────────────────── */

/* Op wit, met een dunne rand en de blauwe balk links (Anne, vraag 33a B).
   Op wit haalt --text-link 5,98:1, dus de links zijn gewone links: blauw,
   normaal gewicht, onderstreept bij aanwijzen. De marge eromheen hoort bij
   de pagina. */
.language-note {
  max-width: 47.5rem;
  padding: var(--space-16) var(--space-24);
  background: var(--surface-default);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--action-primary-surface);
  border-radius: var(--radius-sm);
  font-size: var(--body-base-size);
  color: var(--text-primary);
}
.language-note p { margin: 0; max-width: none; }
.language-note a { color: var(--text-link); font-weight: var(--font-weight-regular); text-decoration: none; }
.language-note a:hover { text-decoration: underline; }

.section { padding: 3rem 0; }
.section-alt { padding: 3rem 0; background: var(--surface-muted); }
.section-blue-bg {
  background: var(--surface-accent);
  padding: 3rem 0;
}
@media (min-width: 768px) {
  .section { padding: 4rem 0; }
}

/* Vacaturetekst. Op smal scherm is de ene kolom minmax(0, 1fr), zodat niets
   erin (ook de zijbalk niet) de pagina breder maakt dan het scherm. */
.vacancy-detail-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-32); }
@media (min-width: 768px) { /* tablet */
  .vacancy-detail-layout { grid-template-columns: minmax(0, 1fr) 18.75rem; gap: var(--space-48); }
}
.vacancy-content .vacancy-section { margin-bottom: var(--space-32); }
.vacancy-content .vacancy-section:last-child { margin-bottom: 0; }
.vacancy-content h2 { color: var(--text-primary); margin-bottom: var(--space-16); }
.vacancy-content .vacancy-intro p { font-size: var(--body-base-size); color: var(--text-secondary); }
.vacancy-content ul { padding-left: var(--space-20); margin: 0 0 var(--space-16); }
.vacancy-content ul li { margin-bottom: var(--space-4); }

/* Zijbalk: een kaart (besluit 8, vraag 37a A): wit, 1px --border-subtle,
   --radius-md, geen schaduw. Op een telefoon heeft hij geen eigen marge en
   staat hij in de ene kolom hierboven, die nooit breder wordt dan het scherm
   (vraag 37a). De kop krijgt de h3-trede. */
.vacancy-sidebar {
  background: var(--surface-default);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-24);
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  align-self: start;
  position: sticky;
  top: 5.625rem;
}
/* Op een telefoon 16px binnenruimte, zodat de details-lijst ook op 320px
   binnen de kaart past (vraag 46a B). */
@media (max-width: 639px) { .vacancy-sidebar { padding: var(--space-16); } }
.vacancy-sidebar h3 { font-size: 1.25rem; margin: 0 0 var(--space-8); color: var(--text-primary); } /* = --heading-h3-size */
.vacancy-sidebar dl {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-8) var(--space-16);
  font-size: var(--body-small-size);
}
.vacancy-sidebar dt { color: var(--text-secondary); font-weight: var(--font-weight-semibold); }
.vacancy-sidebar dd { margin: 0; color: var(--text-primary); }
.vacancy-sidebar .vacancy-apply {
  padding-top: var(--space-16);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.vacancy-sidebar .vacancy-apply a:not(.btn-sm) { color: var(--text-link); font-weight: var(--font-weight-semibold); }
.vacancy-sidebar .vacancy-apply .btn-sm { width: 100%; margin-top: var(--space-4); }
/* De knoptekst blijft leesbaar: deze regel wint van de linkkleur hierboven
   (VSG §23). */
.vacancy-sidebar .vacancy-apply .btn-sm.btn-darkblue,
.vacancy-sidebar .vacancy-apply .btn-sm.btn-darkblue:hover {
  color: var(--action-primary-text);
}
/* Aanraakscherm: de primaire acties op de vacaturepagina's (kaartknop op de
   lijst, "Stuur sollicitatie" in de zijbalk) staan op lg-maat (BRAND.md §8:
   sm en md dragen geen primaire actie op een aanraakscherm; DEV-5043). Alleen
   waar de hoofdpointer grof is; muis en trackpad houden sm. Dezelfde maten
   als .btn-lg, label op 16px. Op een telefoon (<640px) blijft de hoogte een
   minimumhoogte, zodat een label over twee regels kan lopen. */
@media (pointer: coarse) {
  .vacancy-item__action .btn-sm.btn-darkblue,
  .vacancy-sidebar .vacancy-apply .btn-sm.btn-darkblue {
    height: var(--button-height-lg);
    padding: var(--button-padding-block-lg) var(--button-padding-inline-lg);
    font-size: var(--button-font-size);
    line-height: var(--button-line-height);
  }
}
@media (pointer: coarse) and (max-width: 639px) {
  .vacancy-item__action .btn-sm.btn-darkblue,
  .vacancy-sidebar .vacancy-apply .btn-sm.btn-darkblue {
    height: auto;
    min-height: var(--button-height-lg);
    padding-block: var(--space-8);
  }
}
/* Een hint is caption (12px), besluit 21d. */
.vacancy-apply__hint { font-size: var(--body-caption-size); color: var(--text-secondary); margin: var(--space-4) 0 0; }
.vacancy-apply__hint a { color: var(--text-link); font-weight: var(--font-weight-semibold); }

/* Solliciteren. DEV-4521: de kolom was 1fr (minimaal "auto"), zodat de eigen
   breedte van het bestandsveld het raster breder maakte dan een telefoon.
   minmax(0, …) houdt alles binnen het scherm. */
.solliciteren-anchor { display: block; height: 0; visibility: hidden; scroll-margin-top: 5.625rem; }
.solliciteren-section { padding: var(--space-48) 0; background: var(--surface-muted); }
@media (min-width: 768px) {
  .solliciteren-section { padding: var(--space-64) 0; }
}
.solliciteren-intro { max-width: 47.5rem; margin: 0 auto var(--space-32); }
.solliciteren-intro h2 { color: var(--text-primary); margin-bottom: var(--space-8); }
.solliciteren-intro p { color: var(--text-secondary); margin: 0; max-width: none; }
.solliciteren-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-32);
  max-width: 62.5rem;
  margin: 0 auto;
}
@media (min-width: 768px) { /* tablet */
  .solliciteren-grid {
    grid-template-columns: minmax(0, 16.25rem) minmax(0, 1fr);
    gap: var(--space-48);
    align-items: start;
  }
}
/* "Vragen"-kaart en formulier zijn kaarten (besluit 8): wit, 1px
   --border-subtle, --radius-md, geen schaduw. */
.vragen-card {
  background: var(--surface-default);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-24);
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  align-self: start;
}
/* "Vragen over deze vacature?" is een label boven een blok: het label van
   .eyebrow hierboven (besluit 21b), md-maat, nooit groen.
   ontwerpverzoek: HUI-16 — de md-maat van het label. */
.vragen-card .vragen-eyebrow {
  font-size: var(--ui-caps-md-size);
  font-weight: var(--font-weight-bold);
  line-height: var(--ui-caps-md-line-height);
  letter-spacing: var(--ui-caps-md-letter-spacing);
  text-transform: uppercase;
  color: var(--text-secondary);
}
.vragen-person { display: flex; align-items: center; gap: var(--space-16); }
/* De initiaal: --surface-accent met --text-primary (patroon). */
.vragen-avatar {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--surface-accent);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-weight-semibold);
  font-size: var(--body-base-size);
  flex-shrink: 0;
}
.vragen-person strong { color: var(--text-primary); font-size: var(--body-base-size); font-weight: var(--font-weight-semibold); }
.vragen-contacts { display: flex; flex-direction: column; gap: var(--space-4); font-size: var(--body-base-size); }
.vragen-contacts a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  color: var(--text-link);
  font-weight: var(--font-weight-semibold);
}
/* Lucide-iconen bij een link: --icon-sm in --icon-link, geen opacity
   (BRAND.md §13). */
.vragen-contacts svg { flex: none; width: var(--icon-sm); height: var(--icon-sm); color: var(--icon-link); }
.apply-form-wrapper {
  background: var(--surface-default);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-24);
}
@media (min-width: 640px) { .apply-form-wrapper { padding: var(--space-32); } }
.apply-form { display: flex; flex-direction: column; gap: var(--space-16); }
@media (min-width: 768px) {
  .section-alt, .section-blue-bg { padding: 4rem 0; }
}
.section-title { text-align: center; margin-bottom: var(--space-16); }
.section-intro {
  text-align: center;
  max-width: 40rem;
  margin: 0 auto var(--space-48);
  color: var(--text-secondary);
  font-size: var(--body-base-size);
}
.prose-wrap { max-width: 47.5rem; margin: 0 auto; }
.prose-wrap h2 { margin-bottom: var(--space-24); }
.prose-wrap p { color: var(--text-primary); max-width: none; margin-bottom: var(--space-16); }

/* Illustratie in de tekstkolom: een <figure class="illustratie"> binnen .prose-wrap is 75% van de kolom,
   gecentreerd; op mobiel (tot 640px) vol breed. Dit is de algemene regel (Anne, 2026-10-12).
   Buiten .prose-wrap geeft de optie `illustratie--smal` op de <figure> hetzelfde.
   Twee klassen in de selector, zodat de regel wint van een paginalokale `.illustratie img`. */
.prose-wrap .illustratie img,
.illustratie.illustratie--smal img { width: 75%; margin-inline: auto; }
@media (max-width: 640px) { /* mobile wide en kleiner */
  .prose-wrap .illustratie img,
  .illustratie.illustratie--smal img { width: 100%; }
}

/* Tekst naast beeld: een rij met tekst en een <figure class="illustratie">. Zet `tekst-beeld--beeld-links`
   op de rij voor het beeld links; wissel af per blok. Onder tablet (767px) onder elkaar, tekst eerst. */
.tekst-beeld { display: flex; flex-direction: row; gap: 2.5rem; align-items: center; margin: 2rem 0; }
.tekst-beeld > .tekst { flex: 1 1 0; min-width: 0; }
.tekst-beeld > .illustratie { flex: 1 1 0; min-width: 0; margin: 0; }
.tekst-beeld--beeld-links { flex-direction: row-reverse; }
@media (max-width: 767px) /* onder tablet */ { .tekst-beeld, .tekst-beeld--beeld-links { flex-direction: column; align-items: stretch; gap: 1.5rem; } }
@media (min-width: 641px) and (max-width: 767px) { .tekst-beeld > .illustratie img { width: 75%; margin-inline: auto; } } /* mobile wide: gestapeld, beeld 75% */
.bulletpoints-list {
  list-style: none;
  padding: 0;
  margin: var(--space-24) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}
.icon-chevron::after {
  content: "";
  display: inline-block;
  width: 1rem;
  height: 1rem;
  margin-left: 0.5rem;
  background-color: currentColor;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}
.step-list {
  counter-reset: step;
  list-style: none;
  padding: 0;
  margin: var(--space-32) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}
.step-list li {
  counter-increment: step;
  background: var(--surface-default);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-24);
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  gap: var(--space-16);
  align-items: start;
}
.step-list li::before {
  content: counter(step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  background: var(--action-primary-surface);
  color: var(--action-primary-text);
  border-radius: 50%;
  font-weight: var(--font-weight-semibold);
  font-size: var(--body-base-size);
}
.step-list strong {
  display: block;
  color: var(--text-primary);
  margin-bottom: var(--space-4);
  font-size: var(--body-base-size);
}

/* ── Vinkjeslijst (DEV-4927 C1, Anne 33f; ook de nieuwsbrief, Anne 47) ────
   Het Lucide-icoon "check" in --accent (DDOP-groen), als masker zoals de pijl
   van .icon-chevron hierboven. Maat --icon-sm (1rem), zoals iconen in een lijst (stijlgids
   §13), gecentreerd op de eerste regel (regelhoogte 1.6 = 1.6rem, dus
   0.3rem van boven). Groen als icoonkleur is een tussenoplossing
   (stijlgids §0b, Anne 33f); decoratief, de tekst draagt de inhoud.
   ontwerpverzoek: HUI-18 — vinkjeslijst en groene iconen in de plugin. */
.check-item { position: relative; padding-left: 1.75rem; }
.check-item::before {
  content: ""; position: absolute; left: 0; top: 0.3rem;
  width: var(--icon-sm); height: var(--icon-sm);
  background-color: var(--accent);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  mask-size: contain; mask-repeat: no-repeat; mask-position: center;
}

/* ── Formulier (BRAND.md §9, components.md Formulier) ────────────────────── */

.form-row { display: flex; flex-direction: column; gap: var(--space-4); }
.form-row label { font-size: var(--ui-label-size); font-weight: var(--font-weight-semibold); color: var(--text-primary); }
/* Het sterretje is geen link, dus niet blauw (Anne, vraag 39 B). */
.form-row label .required { color: var(--text-primary); }
/* Het veld staat op wit, 40px hoog, rand --input-border (= --border-strong). */
.form-row input[type="text"],
.form-row input[type="email"],
.form-row input[type="tel"],
.form-row input[type="url"],
.form-row select,
.form-row textarea {
  box-sizing: border-box;
  height: var(--input-height);
  padding: 0 var(--space-8);
  font-family: inherit;
  font-size: 1rem;                          /* = --body-base-size */
  color: var(--input-text);
  background: var(--input-surface);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast);
  width: 100%;
}
/* Keuzelijst: een eigen pijltje in plaats van het pijltje van de browser, zodat
   het 12px van de rechterrand staat (DEV-5056). Het pijltje is een Lucide
   chevron-down in --text-primary (#1d2849 = --palette-blue-700; een
   data-URI kent geen var()). Rechts is ruimte vrijgehouden voor het pijltje. */
.form-row select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: var(--space-32);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d2849' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-12) center;
  background-size: var(--icon-sm) var(--icon-sm);
}
/* Focus: de rand wordt blauw EN de ring komt erbovenop (BRAND.md §3). */
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  border-color: var(--input-border-focus);
}
.form-row input:focus-visible,
.form-row select:focus-visible,
.form-row textarea:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}
.form-row textarea {
  resize: vertical;
  min-height: 7rem;
  line-height: 1.5;
  height: auto;
  padding: var(--space-8);
}
.form-row-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-16); }
@media (min-width: 640px) { /* mobile wide */
  .form-row-grid { grid-template-columns: 1fr 1fr; }
}
/* Bestandsveld (cv bij een sollicitatie). min-width: 0 en max-width: 100%
   houden het veld binnen zijn kolom op een telefoon (DEV-4521). */
.form-row input[type="file"] {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  font-family: inherit;
  font-size: var(--body-small-size);
  color: var(--text-secondary);
  padding: var(--space-4) 0;
}
/* De kiesknop is een kleine secundaire knop (btn-outline, sm; BRAND.md §8). */
.form-row input[type="file"]::file-selector-button {
  box-sizing: border-box;
  height: var(--button-height-sm);
  padding: var(--button-padding-block-sm) var(--button-padding-inline-sm);
  margin-right: var(--space-16);
  font-family: inherit;
  font-size: var(--button-font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--button-line-height-sm);
  border: 1px solid var(--action-secondary-border);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--action-secondary-text);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.form-row input[type="file"]::file-selector-button:hover {
  background: var(--action-secondary-surface-hover);
  border-color: var(--action-secondary-border-hover);
  color: var(--action-secondary-text-hover);
}
.form-row input[type="file"]::file-selector-button:active {
  background: var(--action-secondary-surface-active);
  border-color: var(--action-secondary-border-active);
  color: var(--action-secondary-text-active);
}
/* Toestemmingsvakje naast de tekst (Anne, vraag 35a A). .form-row zet de
   richting op kolom, waardoor het vakje los boven de tekst stond. De 4px
   bovenmarge zet het vakje (1rem) op de eerste tekstregel (22,4px hoog). */
.form-row-checkbox { display: flex; flex-direction: row; align-items: flex-start; gap: var(--space-8); }
.form-row-checkbox input[type="checkbox"] {
  margin-top: var(--space-4);
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  accent-color: var(--action-primary-surface);
}
/* De toestemmingstekst is lopende tekst, geen veldlabel: small, regular,
   niet de 600 van .form-row label hierboven (besluit 21d). */
.form-row-checkbox label {
  font-size: var(--body-small-size);
  font-weight: var(--font-weight-regular);
  line-height: var(--body-small-line-height);
  color: var(--text-secondary);
}
.form-row-checkbox label a { color: var(--text-link); font-weight: var(--font-weight-semibold); }
.hp-field { position: absolute; left: -624.9375rem; width: 0.0625rem; height: 0.0625rem; overflow: hidden; }

/* ── Meldingen (besluit 1, BRAND.md §10, components.md Meldingen) ────────── */

/* Tekst in -text, icoon en rand in -accent, vlak in -surface. Elk soort
   melding heeft een eigen icoonvorm (Lucide, inline in de pagina). */
.form-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
  padding: var(--space-12);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-24);
  font-size: 1rem;                          /* = --body-base-size */
}
.form-notice__icon {
  flex-shrink: 0;
  width: var(--icon-md);
  height: var(--icon-md);
  margin-top: var(--space-4);               /* centreert het icoon op de eerste regel */
}
.form-notice p { margin: 0; max-width: none; }
.form-notice--success {
  background: var(--status-success-surface);
  border: 1px solid var(--status-success-accent);
  color: var(--status-success-text);
}
.form-notice--success .form-notice__icon { color: var(--status-success-accent); }
.form-notice--error {
  background: var(--status-error-surface);
  border: 1px solid var(--status-error-accent);
  color: var(--status-error-text);
}
.form-notice--error .form-notice__icon { color: var(--status-error-accent); }
/* Bezig met verzenden (DEV-5056): zelfde melding, in de info-kleuren, met een
   draaiende ring als icoon. De ring is puur CSS. Bij prefers-reduced-motion
   draait hij niet: dan staat de ring stil, de tekst draagt de boodschap. */
.form-notice--info {
  background: var(--status-info-surface);
  border: 1px solid var(--status-info-accent);
  color: var(--status-info-text);
}
.form-notice__spinner {
  flex-shrink: 0;
  box-sizing: border-box;
  width: var(--icon-md);
  height: var(--icon-md);
  margin-top: var(--space-4);
  border: 2px solid var(--status-info-surface);
  border-top-color: var(--status-info-accent);
  border-right-color: var(--status-info-accent);
  border-radius: 50%;
  animation: form-spin 0.8s linear infinite;
}
@keyframes form-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .form-notice__spinner { animation: none; }
}
/* Een link in een melding: onderstreept, in de kleur van de meldingstekst. */
.form-notice a { color: inherit; text-decoration: underline; font-weight: 600; }
.form-notice[hidden] { display: none; }
/* Een hint onder een veld is caption (12px), besluit 21d. */
.form-help { font-size: var(--body-caption-size); color: var(--input-text-hint); margin: 0; }
.form-actions { margin-top: var(--space-8); }

/* ── CTA-band: licht (besluit 3) ─────────────────────────────────────────── */

.page-cta {
  padding: 4rem 0;
  background: var(--surface-accent);
  color: var(--text-primary);
}
.cta-content { text-align: center; max-width: 50rem; margin: 0 auto; }
.cta-content h2 { color: var(--text-primary); margin-bottom: var(--space-16); }
.cta-content p {
  color: var(--text-secondary);
  margin-bottom: var(--space-32);
  max-width: none;
  font-size: var(--body-base-size);
}
/* De gewone primaire knop, geen variant. */
.cta-content .btn-lg { background: var(--action-primary-surface); color: var(--action-primary-text); }
.cta-content .btn-lg:hover { background: var(--action-primary-surface-hover); color: var(--action-primary-text); }
.cta-content .btn-lg:active { background: var(--action-primary-surface-active); }
@media (min-width: 640px) {
  .page-cta { padding: 5rem 0; }
}

/* ── Footer (C15, components.md Footer) ──────────────────────────────────── */

/* Eén tekstkleur op donker: --text-on-inverse. Hiërarchie komt van grootte en
   gewicht, niet van een lichtere tint wit. De groene bovenrand is een
   decoratieve rand in --accent, wat de plugin toestaat (BRAND.md §2).
   Tekstmaten (besluit 21d, keuze 24a B): de kolomkoppen blijven de h4-trede
   (18px), de tekst en links in de kolommen zijn body (16px), de regel onderaan
   is small (14px). Zo komt het verschil van grootte, niet van kleur. */
footer {
  background: var(--surface-inverse);
  color: var(--text-on-inverse);
  border-top: 3px solid var(--accent);
  padding: 3rem 0 1.5rem;
  font-size: var(--body-base-size);
}
footer a { color: var(--text-on-inverse); text-decoration: none; }
footer a:hover { color: var(--text-on-inverse); text-decoration: underline; }
/* Het witte logo van de plugin. Proportioneel geschaald (viewBox 200 × 57),
   met minstens een achtste van de logohoogte vrij eromheen (BRAND.md §12).
   Logomaten zijn geen tokens. In de footer blijft het 2rem hoog, de maat van
   vóór besluit 21g; dat besluit gaat over de header. */
.footer-brand {
  display: block;
  height: 2rem;
  width: auto;
  margin-bottom: var(--space-16);
}
.footer-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-48); margin-bottom: var(--space-32); }
@media (min-width: 640px) {
  .footer-grid { grid-template-columns: 2fr 1fr 1fr; }
}
.footer-column h4 { color: var(--text-on-inverse); font-size: 1.125rem; font-weight: var(--font-weight-bold); margin: 0 0 var(--space-16); }
.footer-column ul { list-style: none; padding: 0; margin: 0; }
.footer-column li { margin-bottom: var(--space-8); }
/* Navigatiekolom (DEV-5063): de lijst in twee kolommen binnen de ene footerkolom, om de footer korter te houden.
   Ook op telefoon naast elkaar: de labels passen. De kolomkop Contact is een link met de koplook. */
.footer-nav-lists { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--space-16); }
.footer-column h4 a { color: inherit; font: inherit; }
.footer-about p {
  color: var(--text-on-inverse);
  font-size: var(--body-base-size);
  line-height: 1.6;
  margin: 0 0 var(--space-16);
  max-width: 38ch;
}
.footer-bottom {
  border-top: 1px solid var(--border-on-inverse);
  padding-top: var(--space-16);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-16);
  font-size: var(--body-small-size);
  color: var(--text-on-inverse);
}