/* =========================================================
   HOOR erbij: designsysteem
   Mobile-first, WCAG 2.1 AA / EN 301 549
   ========================================================= */

:root {
  /* Kleur: warm, toegankelijk, eigen identiteit */
  --c-ink:        #1f2d3d;
  --c-ink-soft:   #4a5a6e;
  /* #6b7a8c haalde 4,21:1 op crème en 3,77:1 op zand: onder de AA-grens van 4,5.
     #5c6b7d haalt 5,23 / 5,45 / 4,68 op crème, wit en zand. */
  --c-muted:      #5c6b7d;
  --c-line:       #e3e9f1;
  /* Aparte, donkerdere rand voor invoervelden. WCAG 1.4.11 vraagt 3:1 voor de
     omtrek van een bedieningselement; --c-line haalde maar 1,2:1 en was dus
     nauwelijks te zien. #7b8897 haalt 3,61 op wit, 3,47 op crème, 3,11 op zand. */
  --c-border-input: #7b8897;

  --c-bg:         #fdfaf4;     /* cream */
  --c-surface:    #ffffff;
  --c-surface-2:  #f4ede1;     /* zacht zand */

  --c-primary:        #1f6e7a; /* warm teal */
  --c-primary-dark:   #134953;
  --c-primary-soft:   #d9ecef;

  --c-accent:         #e87a3e; /* warm oranje */
  --c-accent-dark:    #b8551e;

  --c-tile-1: #d9ecef;
  --c-tile-2: #fde4d3;
  --c-tile-3: #e8e0f3;
  --c-tile-4: #d8e9d4;
  --c-tile-5: #fbe7b4;
  --c-tile-6: #f6d6d2;

  /* Focusring in twee kleuren. Amber alleen haalde 1,75:1 op wit: onzichtbaar
     voor toetsenbordgebruikers. De donkere buitenring haalt 11,7:1 op crème,
     de amber binnenring 8,6:1 op de donkere footer. Zo is er altijd één ring
     met voldoende contrast, welke achtergrond er ook onder zit. */
  --c-focus:      #ffb703;
  --c-focus-dark: #0b3b45;

  /* Formulierstatus. Doorgerekend op crème, wit en zand: 6,27 / 6,54 / 5,62. */
  --c-error:   #b3261e;
  --c-success: #256b29;

  /* Eén systeemletter, nul KB download. --font-display bestond als apart token
     maar verschilde alleen in een fallback die in de praktijk nooit aan bod komt:
     op Windows en macOS was het dezelfde letter. Het onderscheid tussen kop en
     tekst komt dus van gewicht en letterafstand, niet van een ander lettertype.
     Het token blijft bestaan zodat een echte displayletter later één regel werk is. */
  --font-sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-sans);
  --fs-base: 1.0625rem;
  --lh-body: 1.65;
  --measure: 68ch;   /* leesbare regellengte, zie CLAUDE.md §8 */

  --r-sm:  8px;
  --r-md:  14px;
  --r-lg:  22px;
  --r-xl:  32px;
  --shadow-sm: 0 1px 2px rgba(20,40,60,.06), 0 2px 6px rgba(20,40,60,.06);
  --shadow-md: 0 4px 10px rgba(20,40,60,.08), 0 12px 28px rgba(20,40,60,.08);
  --max-w: 1200px;
  /* Startwaarden tot main.js de echte hoogtes meet (zie daar voor de uitleg).
     --header-expanded-h reserveert de ruimte onder de vaste header,
     --header-h is de gekrompen hoogte (sticky subnav, scroll-margin, paneel).
     Hoogte = hoogste element op de rij + padding-block (2 x .5rem, gekrompen
     2 x .35rem) + 1px rand. Ze moeten kloppen per breedte (zie de media queries
     bij de header): een afwijking deed de pagina verspringen zodra main.js mat
     (CLS 0,09 op de startpagina). main.js corrigeert daarna enkel nog bij een
     grotere tekst via de toegankelijkheidsknop. */
  --header-expanded-h: calc(54px + 1rem + 1px);
  --header-h: calc(44px + .7rem + 1px);

  /* Pijltje voor links naar een externe site (Lucide external-link). */
  --ext-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M10 14 21 3'/%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3C/svg%3E");

  --t-fast: 150ms ease;
  --t-med: 280ms cubic-bezier(.2,.7,.2,1);
}

/* ===== Accessibility modes ===== */
html[data-fontsize="lg"] { font-size: 112.5%; }
html[data-fontsize="xl"] { font-size: 125%; }

html[data-contrast="high"] {
  --c-bg: #ffffff;
  --c-surface: #ffffff;
  --c-surface-2: #ffffff;
  --c-ink: #000000;
  --c-ink-soft: #000000;
  --c-muted: #1a1a1a;
  --c-line: #000000;
  --c-primary: #000a96;
  --c-primary-dark: #000060;
  --c-primary-soft: #ffffff;
  --c-accent: #b8551e;
  --c-tile-1: #ffffff; --c-tile-2: #ffffff; --c-tile-3: #ffffff;
  --c-tile-4: #ffffff; --c-tile-5: #ffffff; --c-tile-6: #ffffff;
}
html[data-contrast="high"] *,
html[data-contrast="high"] *::before,
html[data-contrast="high"] *::after { box-shadow: none !important; text-shadow: none !important; }
/* Die regel zou ook de focusring wegvegen, want die is een box-shadow.
   In hoog contrast tekenen we hem daarom als outline. */
html[data-contrast="high"] :focus-visible {
  outline: 3px solid #000;
  outline-offset: 2px;
}
html[data-contrast="high"] a { text-decoration: underline; }
html[data-contrast="high"] .tile,
html[data-contrast="high"] .doc-list a,
html[data-contrast="high"] .site-header,
html[data-contrast="high"] .page-header,
html[data-contrast="high"] input,
html[data-contrast="high"] .icon-btn {
  border: 2px solid #000 !important;
  background: #fff !important;
  color: #000 !important;
}
html[data-contrast="high"] .site-footer { background: #000 !important; color: #fff !important; }
html[data-contrast="high"] .site-footer * { color: #fff !important; }
/* De logo's zijn transparant gemaakt zodat ze op elke lichte ondergrond passen.
   In hoog contrast wordt de footer zwart en verdwijnen de donkere delen dan.
   Daar zetten we er dus juist wél een wit vlak achter: leesbaarheid gaat voor. */
html[data-contrast="high"] .site-footer img {
  background: #fff; padding: 6px; border-radius: 4px;
}
/* Knoppen die als link tonen krijgen dezelfde onderlijning als echte links. */
html[data-contrast="high"] .linklike { text-decoration: underline; }

html[data-font="readable"],
html[data-font="readable"] * {
  font-family: Verdana, Geneva, Tahoma, sans-serif !important;
  letter-spacing: .02em;
  word-spacing: .08em;
  line-height: 1.8 !important;
}

/* Meer tekstafstand (WCAG 1.4.12) : enkel inhoud, niet de chrome */
html[data-spacing="wide"] #main {
  letter-spacing: .12em;
  word-spacing: .16em;
  line-height: 1.9;
}
html[data-spacing="wide"] #main p { margin-bottom: 2em; }

/* Zichtbare links : extra opvallende markering */
html[data-links="highlight"] a:not(.btn):not(.brand):not(.icon-btn) {
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 2px !important;
  background: #fff3bf;
  color: #00407a !important;
  box-shadow: 0 0 0 2px #ffd43b;
  border-radius: 3px;
}

/* Grijswaarden : enkel inhoud + footer, zodat de vaste toolbar correct blijft */
html[data-saturation="grayscale"] #main,
html[data-saturation="grayscale"] .site-footer { filter: grayscale(1); }

/* Stop animaties (handmatige tegenhanger van prefers-reduced-motion) */
html[data-motion="off"] *,
html[data-motion="off"] *::before,
html[data-motion="off"] *::after {
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
  scroll-behavior: auto !important;
}

/* Grote cursor */
html[data-cursor="big"],
html[data-cursor="big"] * {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24"><path d="m4 4 7.07 17 2.51-7.39L21 11.07z" fill="white" stroke="black" stroke-width="1.5" stroke-linejoin="round"/></svg>') 4 4, auto;
}

/* ===== Reset & basis ===== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--c-ink);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--c-primary-dark); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--c-accent-dark); }
:focus { outline: none; }
:focus-visible {
  /* Transparante outline zodat Windows' forced-colors-modus er zelf een tekent;
     box-shadow wordt daar namelijk niet gerenderd. */
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 3px var(--c-focus), 0 0 0 6px var(--c-focus-dark);
  border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===== Utilities ===== */
.container { width: 100%; max-width: var(--max-w); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2.5rem); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
/* Knop die eruitziet als een link. Voor acties die enkel JavaScript uitvoeren:
   die horen semantisch een <button> te zijn, geen <a href="#">. */
.linklike {
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
  text-align: left;
}
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--c-ink); color: #fff; padding: .75rem 1.25rem;
  border-radius: 0 0 var(--r-md) 0; z-index: 1000; font-weight: 600;
}
.skip-link:focus { left: 0; color: #fff; }

/* ===== Header =====
   Eén balk met logo, navigatie, zoeken en toegankelijkheid. Bij het scrollen
   krimpt hij: main.js zet .is-compact zodra je voorbij de drempel bent.

   Waarom fixed en niet sticky? Een sticky header blijft in de flow. Wordt die
   tijdens het scrollen kleiner, dan krimpt het document mee en schuift alle
   inhoud eronder omhoog: de pagina verspringt onder je vingers. Daarom staat de
   header buiten de flow en reserveert body { padding-top } de ruimte op de
   UITGEKLAPTE hoogte. Die waarde verandert nooit, dus verspringt er niets. */
body { padding-top: var(--header-expanded-h); }

.site-header {
  position: fixed; top: 0; left: 0; right: 0;
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-line);
  z-index: 50;
}
.site-header.is-compact { box-shadow: var(--shadow-sm); }

.header-inner {
  display: flex; align-items: center; gap: .45rem;
  position: relative;
  transition: padding-block var(--t-med);
  padding-block: .5rem;
}
.site-header.is-compact .header-inner { padding-block: .35rem; }

/* Het logo bevat zelf al het woordmerk "HOOR erbij", dus geen extra tekst ernaast. */
.brand { display: inline-flex; align-items: center; text-decoration: none; min-width: 0; flex: none; }
/* Mobiel deelt het logo de rij met het zoekveld en drie knoppen, dus blijft het
   compact. Vanaf 560px is er ruimte om het groter te zetten. */
.brand img {
  height: 54px; width: auto; flex-shrink: 0;
  transition: height var(--t-med);
}
.site-header.is-compact .brand img { height: 40px; }
@media (min-width: 560px) {
  :root { --header-expanded-h: calc(66px + 1rem + 1px); }
  .brand img { height: 66px; }
  .site-header.is-compact .brand img { height: 44px; }
}

.header-actions { display: flex; gap: .5rem; position: relative; flex: none; }
.search { flex: 1; min-width: 0; display: flex; gap: .35rem; }

/* Bij het meten van de twee hoogtes mag er niets animeren. */
.site-header.no-transition,
.site-header.no-transition * { transition: none !important; }

/* Mobiel: het menu klapt onder de balk uit in plaats van de inhoud weg te duwen. */
.primary-nav {
  display: none;
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-line);
  box-shadow: var(--shadow-md);
  padding: .5rem 0 .75rem;
  z-index: 40;
}
.primary-nav.is-open { display: block; }

/* Terugvalnavigatie zonder JavaScript. Op desktop werkt de gewone navigatie
   ook zonder JS, dus daar blijft deze verborgen. */
.nav-noscript { border-top: 1px solid var(--c-line); padding: .35rem clamp(1rem, 4vw, 2.5rem) .6rem; }
.nav-noscript ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem 1rem; }
.nav-noscript a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--c-ink); text-decoration: none; font-weight: 500;
}
.nav-noscript a:hover { text-decoration: underline; }
@media (min-width: 860px) { .nav-noscript { display: none; } }

.icon-btn {
  --size: 44px; width: var(--size); height: var(--size);
  display: inline-grid; place-items: center;
  background: var(--c-primary-soft); color: var(--c-primary-dark);
  border: 1px solid transparent; border-radius: 999px; cursor: pointer;
  transition: background var(--t-fast), transform var(--t-fast);
}
.icon-btn:hover { background: #c7e0e4; }
.icon-btn:active { transform: scale(.96); }
.icon-btn svg { width: 22px; height: 22px; }

.nav-toggle { display: inline-grid; flex: none; }
.primary-nav ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: .15rem;
}
.primary-nav a {
  display: block; padding: .75rem 1rem;
  text-decoration: none; color: var(--c-ink);
  border-radius: var(--r-md); font-weight: 500;
}
.primary-nav a:hover, .primary-nav a:focus-visible { background: var(--c-surface-2); }
.primary-nav a[aria-current="page"] { background: var(--c-primary); color: #fff; }

.search input {
  flex: 1; min-width: 0; padding: .65rem 1rem;
  border: 1px solid var(--c-border-input); border-radius: 999px;
  font: inherit; background: var(--c-surface);
}
/* Zelfde dubbele ring als overal: amber alleen haalt 1,75:1 op wit (WCAG 1.4.11). */
.search input:focus-visible { border-color: var(--c-primary); }
.search button {
  width: 44px; height: 44px; border: 0; border-radius: 999px;
  background: var(--c-primary); color: #fff; cursor: pointer;
  display: grid; place-items: center; flex-shrink: 0;
}
.search button svg { width: 20px; height: 20px; }

/* ===== Desktop: alles op één rij ===== */
@media (min-width: 860px) {
  :root { --header-expanded-h: calc(88px + 1rem + 1px); --header-h: calc(48px + .7rem + 1px); }
  .header-inner { gap: 1.75rem; }
  .brand img { height: 88px; }
  .site-header.is-compact .brand img { height: 48px; }
  .nav-toggle { display: none; }
  .search { flex: 0 1 300px; }

  .primary-nav {
    display: block; flex: 1; min-width: 0;
    position: static; padding: 0;
    border: 0; box-shadow: none; background: none;
  }
  .primary-nav ul {
    flex-direction: row; align-items: stretch; flex-wrap: nowrap;
    gap: 0; justify-content: flex-start;
  }
  .primary-nav a {
    display: flex; align-items: center;
    padding: .6rem .9rem; border-radius: 0;
    border-bottom: 3px solid transparent;
    font-size: .98rem; white-space: nowrap;
  }
  .primary-nav a:hover,
  .primary-nav a:focus-visible {
    background: transparent; border-bottom-color: var(--c-primary-soft);
  }
  .primary-nav a[aria-current="page"] {
    background: transparent; color: var(--c-primary-dark);
    border-bottom-color: var(--c-primary); font-weight: 600;
  }
}
@media (min-width: 1100px) {
  .primary-nav a { padding: .6rem 1.1rem; font-size: 1rem; }
}

/* ===== Accessibility panel =====
   Absoluut gepositioneerd onder de knop zelf (niet fixed t.o.v. de viewport):
   zo blijft de rechterrand netjes uitgelijnd met de knop, ongeacht de
   schermbreedte of de gecentreerde contentkolom. */
.a11y-panel {
  position: absolute; top: calc(100% + .7rem); right: 0;
  width: min(370px, calc(100vw - 2rem));
  max-height: calc(100vh - var(--header-h) - 1.5rem);
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-md);
  padding: 1.1rem 1.25rem 1.25rem; z-index: 100; display: none;
}
.a11y-panel.is-open { display: block; }

/* Pijltje dat het paneel aan zijn knop verankert. Staat op de wrapper, want het
   paneel zelf scrollt en zou het afknippen. */
.header-actions::after {
  content: ""; position: absolute;
  top: calc(100% + .7rem - 6px); right: 15px;
  width: 12px; height: 12px;
  background: var(--c-surface);
  border-left: 1px solid var(--c-line); border-top: 1px solid var(--c-line);
  transform: rotate(45deg);
  z-index: 101; display: none;
}
.header-actions:has(.a11y-panel.is-open)::after { display: block; }

.a11y-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .5rem; }
.a11y-panel h2 { margin: 0; font-size: 1.05rem; color: var(--c-primary-dark); }
.a11y-close { --size: 34px; background: var(--c-surface-2); flex: none; }
.a11y-close svg { width: 18px; height: 18px; }
.a11y-group { display: flex; flex-direction: column; gap: .5rem; padding-block: .75rem; border-top: 1px solid var(--c-line); }
.a11y-group:first-of-type { border-top: 0; padding-top: 0; }
.a11y-group .label { font-weight: 600; font-size: .9rem; color: var(--c-ink-soft); }
.a11y-row { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; }
.a11y-btn {
  min-width: 0;
  padding: .6rem .7rem;
  border: 1px solid var(--c-line); background: var(--c-surface);
  border-radius: var(--r-md); cursor: pointer; font: inherit; font-size: .88rem;
  color: var(--c-ink);
  display: inline-flex; align-items: center; justify-content: flex-start; gap: .5rem;
  text-align: left; line-height: 1.25;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.a11y-btn svg { width: 1.15em; height: 1.15em; flex: none; }
/* min-width i.p.v. width: "A++" is breder dan 1,6em en liep anders tegen het
   label aan ("A++Extra groot"). */
.a11y-btn .a11y-ic { font-weight: 700; min-width: 1.6em; flex: none; text-align: center; }
.a11y-btn-wide { grid-column: 1 / -1; }
.a11y-btn[aria-pressed="true"] { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.a11y-btn:hover { border-color: var(--c-primary); }
.a11y-hint { font-size: .8rem; color: var(--c-muted); margin: .25rem 0 0; }
.a11y-reset {
  margin-top: .75rem; width: 100%;
  padding: .55rem; border: 0; border-radius: var(--r-md);
  background: var(--c-surface-2); cursor: pointer; font: inherit; font-weight: 500;
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
}
.a11y-reset svg { width: 1.15em; height: 1.15em; }

/* ===== Hero ===== */
.hero {
  position: relative;
  background:
    radial-gradient(1200px 400px at 80% -10%, var(--c-primary-soft), transparent 60%),
    radial-gradient(900px 360px at 10% 110%, var(--c-tile-2), transparent 60%),
    var(--c-bg);
  padding-block: 3rem 0;
}
.hero-grid { display: grid; gap: 2.5rem; align-items: center; grid-template-columns: 1fr; }
@media (min-width: 880px) { .hero-grid { grid-template-columns: 1.15fr 1fr; gap: 4rem; padding-block: 1rem 2rem; } }
.slogan h1 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2rem, 5vw, 3.25rem); line-height: 1.1;
  letter-spacing: -.02em; margin: 0 0 1rem;
  color: var(--c-primary-dark);
}
.slogan h1 .accent { color: var(--c-accent-dark); }
/* p.eyebrow: `.slogan p` hieronder zou anders grootte en kleur overschrijven. */
.slogan p.eyebrow { margin: 0 0 .75rem; font-size: .85rem; color: var(--c-accent-dark); max-width: none; }
/* Oude naam: klein en rustig, maar wel zichtbaar voor wie via een oude link komt. */
.slogan .former-name-hero { margin: 1.25rem 0 0; font-size: .95rem; color: var(--c-muted); max-width: none; text-wrap: pretty; }
.slogan p {
  margin: 0 0 1.5rem;
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  color: var(--c-ink-soft); max-width: 46ch; text-wrap: balance;
}
.slogan .cta-row { display: flex; flex-wrap: wrap; gap: .75rem; }

.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .75rem 1.35rem; font: inherit; font-weight: 600;
  font-size: 1rem; line-height: 1.2;
  border-radius: 999px; text-decoration: none;
  border: 2px solid transparent; cursor: pointer;
  white-space: nowrap;
  transition: transform var(--t-fast), background var(--t-fast);
}
.btn svg { width: 1.15em; height: 1.15em; flex-shrink: 0; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--c-primary); color: #fff; }
.btn-primary:hover { background: var(--c-primary-dark); color: #fff; }
.btn-ghost { background: transparent; color: var(--c-primary-dark); border-color: var(--c-primary); }
.btn-ghost:hover { background: var(--c-primary-soft); color: var(--c-primary-dark); }

/* Slideshow */
.slideshow {
  position: relative; border-radius: var(--r-xl);
  overflow: hidden; background: #0c2630;
  aspect-ratio: 4 / 3; box-shadow: var(--shadow-md);
}
.slides { height: 100%; position: relative; }
.slide { position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease; }
.slide.is-active { opacity: 1; }
.slide img { width: 100%; height: 100%; object-fit: cover; }
.slide-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 999px; border: 0;
  background: rgba(255,255,255,.92); color: var(--c-primary-dark);
  display: grid; place-items: center; cursor: pointer;
  box-shadow: var(--shadow-sm);
}
.slide-btn:hover { background: #fff; }
.slide-btn.prev { left: .75rem; }
.slide-btn.next { right: .75rem; }
.slide-btn svg { width: 22px; height: 22px; }
/* Bedieningselementen van de slideshow.
   Het zichtbare bolletje blijft klein, maar het aanraakgebied is 44 x 44:
   de knop zelf is doorzichtig en het bolletje zit erin als ::before. Zo blijft
   het ontwerp rustig én is het bedienbaar met een vinger (WCAG 2.5.8). */
.slide-controls {
  position: absolute; bottom: .35rem; left: 0; right: 0;
  display: flex; align-items: center; justify-content: center; gap: 0;
}
.slide-dots { display: flex; gap: 0; }
.slide-dots button {
  width: 34px; height: 44px; padding: 0; border: 0;
  background: none; cursor: pointer;
  display: grid; place-items: center;
}
.slide-dots button::before {
  content: ""; display: block;
  width: 10px; height: 10px; border-radius: 999px;
  background: rgba(255,255,255,.55);
  transition: width var(--t-fast), background var(--t-fast);
}
.slide-dots button[aria-current="true"]::before { background: #fff; width: 24px; }

/* Pauzeknop: WCAG 2.2.2 vereist dat automatisch wisselende inhoud te stoppen is. */
.slide-play {
  width: 44px; height: 44px; border: 0; padding: 0;
  background: none; cursor: pointer; color: var(--c-primary-dark);
  display: grid; place-items: center;
}
.slide-play span {
  width: 30px; height: 30px; border-radius: 999px;
  background: rgba(255,255,255,.92);
  display: grid; place-items: center;
  box-shadow: var(--shadow-sm);
  transition: background var(--t-fast);
}
.slide-play:hover span { background: #fff; }
.slide-play svg { width: 15px; height: 15px; }
.slide-play .ic-play { display: none; }
.slide-play[aria-pressed="true"] .ic-pause { display: none; }
.slide-play[aria-pressed="true"] .ic-play { display: grid; }
/* Wave divider */
.wave { display: block; width: 100%; height: clamp(40px, 7vw, 90px); margin-top: 1rem; }
.wave path { fill: var(--c-surface); }

/* ===== Tegels ===== */
.tiles-section { background: var(--c-surface); padding-block: 4rem 5rem; }
.section-heading { text-align: center; max-width: 72ch; margin: 0 auto 3rem; }
.eyebrow {
  display: inline-block;
  font-size: .85rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--c-accent-dark); font-weight: 700; margin-bottom: .5rem;
}
.section-heading h2 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.25rem); margin: 0 0 .75rem;
  color: var(--c-primary-dark); letter-spacing: -.01em;
}
.section-heading p { margin: 0; color: var(--c-ink-soft); text-wrap: balance; }

/* Bredere tegels (3 kolommen i.p.v. 4): de omschrijvingen lopen dan over
   twee regels in plaats van drie en sluiten beter aan. */
.tiles { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.tile {
  position: relative; display: flex; flex-direction: column; gap: .85rem;
  padding: 1.75rem; text-decoration: none; color: var(--c-ink);
  background: var(--c-tile-bg, var(--c-primary-soft));
  border-radius: var(--r-lg);
  transition: transform var(--t-med), box-shadow var(--t-med);
  overflow: hidden; isolation: isolate;
}
.tile::after {
  content: ""; position: absolute; right: -40px; bottom: -40px;
  width: 140px; height: 140px;
  background: radial-gradient(circle, rgba(255,255,255,.55), transparent 70%);
  border-radius: 50%; z-index: -1;
}
.tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.tile-icon {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.78);
  border-radius: 16px;
  color: var(--c-primary-dark);
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
}
.tile-icon svg { width: 30px; height: 30px; }
.tile-title { margin: 0; font-family: var(--font-display); font-size: 1.25rem; color: var(--c-primary-dark); text-wrap: balance; }
/* Thema zonder inhoud: eerlijk aankondigen in plaats van laten doorklikken naar leegte. */
.tile-badge {
  display: inline-block; vertical-align: middle;
  margin-left: .4rem; padding: .1rem .5rem;
  font-family: var(--font-sans); font-size: .68rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--c-primary-dark); background: rgba(255,255,255,.85);
  border-radius: 999px;
}
.tile.is-soon { opacity: .82; }
.tile.is-soon:hover { opacity: 1; }
.tile p { margin: 0; color: var(--c-ink-soft); font-size: .98rem; text-wrap: balance; }
.tile-cta { margin-top: auto; display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; color: var(--c-primary-dark); }
.tile-cta svg { width: 18px; height: 18px; transition: transform var(--t-fast); }
.tile:hover .tile-cta svg { transform: translateX(4px); }

.tile.t1 { --c-tile-bg: var(--c-tile-1); }
.tile.t2 { --c-tile-bg: var(--c-tile-2); }
.tile.t3 { --c-tile-bg: var(--c-tile-3); }
.tile.t4 { --c-tile-bg: var(--c-tile-4); }
.tile.t5 { --c-tile-bg: var(--c-tile-5); }
.tile.t6 { --c-tile-bg: var(--c-tile-6); }

/* ===== Page header (subpages) ===== */
.page-header {
  background:
    radial-gradient(800px 260px at 90% 0%, var(--c-primary-soft), transparent 60%),
    var(--c-surface-2);
  padding-block: 3rem 3.5rem;
}
/* Kruimelpad als <nav> met een geordende lijst. Het scheidingsteken staat in een
   aria-hidden span, zodat een schermlezer het niet als "enkel aanhalingsteken" voorleest. */
.page-header .breadcrumb { font-size: .9rem; color: var(--c-muted); margin-bottom: 1rem; }
.breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; }
.breadcrumb li { display: inline-flex; align-items: center; }
.breadcrumb .sep { margin-inline: .45rem; }
.page-header .breadcrumb a { color: var(--c-primary-dark); }
.page-header h1 {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4vw, 2.75rem); margin: 0 0 .5rem;
  color: var(--c-primary-dark); letter-spacing: -.01em;
}
/* De inleidende zin loopt door over de volle kolombreedte en wordt door
   text-wrap: balance gelijkmatig verdeeld, zodat er geen losse restregel ontstaat. */
.page-header p.lead {
  margin: 0; color: var(--c-ink-soft); font-size: 1.1rem;
  max-width: 85ch; text-wrap: balance;
}

/* ===== Content layout met sidebar ===== */
.content-wrap { display: grid; gap: 2rem; padding-block: 3rem 5rem; grid-template-columns: 1fr; }
@media (min-width: 920px) {
  .content-wrap { grid-template-columns: 270px 1fr; gap: 4rem; }
  .subnav { position: sticky; top: calc(var(--header-h) + 1rem); }
}

/* Enkel naast de tekst (vanaf 920px) blijft de inhoudsopgave staan. In de enkele
   kolom op mobiel zou ze anders over de tekst schuiven tijdens het lezen. */
.subnav {
  align-self: start;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: 1rem;
  font-size: .95rem;
}
.subnav .label {
  font-size: .8rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--c-muted); font-weight: 700; margin-bottom: .5rem;
}
.subnav ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .15rem; }
.subnav a {
  display: flex; align-items: center; min-height: 44px;
  padding: .5rem .7rem;
  text-decoration: none; color: var(--c-ink);
  border-radius: var(--r-sm);
  border-left: 3px solid transparent;
  overflow-wrap: anywhere; hyphens: auto;
  line-height: 1.35;
}
.subnav a:hover { background: var(--c-surface-2); }
.subnav a.is-active {
  background: var(--c-primary-soft); color: var(--c-primary-dark);
  font-weight: 600; border-left-color: var(--c-primary);
}

.article { max-width: var(--measure); }
/* Ritme tussen secties. Elke h2 is het eerste kind van zijn <section>, dus een
   margin-top op de h2 zelf werd nooit toegepast (h2:first-child zette hem op 0).
   Gevolg: een kop stond even dicht bij de tekst erboven als bij zijn eigen tekst.
   De ruimte hoort daarom op de sectie: ruim boven de kop, krap eronder, zodat de
   kop bij zijn eigen inhoud hoort (wet van nabijheid). */
.article > section + section { margin-top: clamp(2.25rem, 4vw, 3rem); }
.article h2 {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.2vw, 1.7rem);
  margin: 0 0 1rem;
  color: var(--c-primary-dark); letter-spacing: -.01em;
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
  text-wrap: balance;
}
/* Laatste element van een sectie: geen extra marge bovenop de sectieafstand. */
.article > section > :last-child { margin-bottom: 0; }

/* Terug-link bovenaan een volledig hoofdstuk. */
.back-link { margin: 0 0 2rem; font-size: .95rem; }
.back-link a {
  display: inline-flex; align-items: center; gap: .4rem;
  color: var(--c-primary-dark); text-decoration: none; font-weight: 500;
}
.back-link a:hover { text-decoration: underline; }
.back-link svg { width: 1.05em; height: 1.05em; }
.article h3 { margin: 2.25rem 0 .85rem; color: var(--c-primary-dark); text-wrap: balance; }
/* Een subkop die meteen onder de sectiekop staat, hoort daar ook bij. */
.article h2 + h3 { margin-top: 1.25rem; }
.article h4 { margin: 1.75rem 0 .6rem; color: var(--c-primary-dark); font-size: 1.02rem; }
.article p, .article li { font-size: 1.05rem; }
.article p { margin: 0 0 1.15rem; }
.article ul, .article ol { margin: 0 0 1.35rem; padding-left: 1.4rem; }
.article li { margin-bottom: .45rem; }
.article li:last-child { margin-bottom: 0; }
.article a:not(.btn) { color: var(--c-primary-dark); }
/* Zichtbaar teken dat een link naar buiten gaat. Schermlezers krijgen daarnaast
   de sr-only tekst die de generator toevoegt. */
.article a.ext-link::after {
  content: ""; display: inline-block;
  width: .72em; height: .72em; margin-left: .28em;
  vertical-align: -.02em;
  background: currentColor;
  -webkit-mask: var(--ext-icon) center / contain no-repeat;
  mask: var(--ext-icon) center / contain no-repeat;
}
.doc-list a.ext-link::after { content: none; }
.article .btn-primary { color: #fff; }

/* Tabellen in artikels. De wrapper scrollt horizontaal op smalle schermen,
   zodat de pagina zelf nooit horizontaal moet scrollen. */
.table-wrap { overflow-x: auto; margin: 1.5rem 0; -webkit-overflow-scrolling: touch; }
.article table {
  border-collapse: collapse; width: 100%;
  min-width: 30rem; font-size: .98rem;
  background: var(--c-surface);
  border-radius: var(--r-md); overflow: hidden;
}
.article table caption {
  caption-side: bottom; text-align: left;
  font-size: .88rem; color: var(--c-muted); padding-top: .6rem;
}
.article table th, .article table td {
  border: 1px solid var(--c-line);
  padding: .6rem .8rem; text-align: left; vertical-align: top;
}
.article table thead th { background: var(--c-primary-soft); color: var(--c-primary-dark); }
.article table tbody th { background: var(--c-surface-2); font-weight: 600; white-space: nowrap; }
/* Tabel met vier kolommen in de artikelkolom: rijkoppen mogen afbreken, anders
   past ze op desktop niet en scrolt de laatste kolom weg. */
.article table.table-compact { font-size: .92rem; }
.article table.table-compact th, .article table.table-compact td { padding: .55rem .6rem; }
.article table.table-compact tbody th { white-space: normal; }
/* Lijstjes in een tabelcel: compacter dan in de lopende tekst. */
.article td ul { margin: 0; padding-left: 1.1rem; }
.article td li { font-size: inherit; margin-bottom: .3rem; }

/* Foto in een artikel. width/height staan op de <img> zelf, dus geen layout shift. */
.article figure.photo { margin: 1.75rem 0; }
.article figure.photo img {
  display: block; width: 100%; height: auto;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  background: var(--c-surface-2);
}
/* Kleine bron: op ware grootte, niet uitgerekt tot de kolombreedte. */
.article figure.photo.is-small img { width: auto; max-width: 100%; }
.article figure.photo figcaption {
  margin-top: .6rem;
  font-size: .92rem; color: var(--c-muted);
  text-wrap: balance;
}

/* Ook hier telt de specificiteit: een callout is meestal een <p> binnen .article,
   en `.article p` zou de marge overschrijven. */
.callout,
.article .callout {
  background: var(--c-tile-2);
  border-left: 4px solid var(--c-accent);
  padding: 1.1rem 1.35rem;
  border-radius: var(--r-md);
  margin: 1.75rem 0;
}
.callout p:last-child { margin-bottom: 0; }

/* PDF-lijst */
/* .article .doc-list: anders wint `.article ul` en springt de lijst in t.o.v. de tekst. */
.doc-list,
.article .doc-list { list-style: none; padding: 0; margin: 1.25rem 0 0; display: grid; gap: .75rem; }
.article .doc-list li { margin: 0; }
.doc-list a {
  display: flex; align-items: center; gap: .9rem;
  padding: .9rem 1.1rem;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  text-decoration: none; color: var(--c-ink);
  transition: border-color var(--t-fast), background var(--t-fast);
}
.doc-list a:hover { border-color: var(--c-primary); background: var(--c-primary-soft); }
.doc-list .doc-icon {
  flex: 0 0 40px; height: 40px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--c-tile-2); color: var(--c-accent-dark);
}
.doc-list .doc-icon svg { width: 22px; height: 22px; }
.doc-list .doc-label { flex: 1; font-weight: 500; }
.doc-list .doc-size { font-size: .85rem; color: var(--c-muted); white-space: nowrap; }

/* ===== Label op de voorbeeldsite (CMS) =====
   Komt enkel in de HTML van het voorbeeldkanaal, nooit op de echte site.
   Vast linksonder, zodat het op elke pagina en bij het scrollen zichtbaar blijft. */
.preview-banner {
  position: fixed; left: 1rem; bottom: 1rem; z-index: 300; margin: 0;
  padding: .5rem 1rem; border-radius: 999px;
  background: var(--c-accent-dark); color: #fff;
  font-size: .9rem; box-shadow: var(--shadow-md);
}
@media print { .preview-banner { display: none; } }

/* ===== Nieuws =====
   Overzicht als kaarten in een raster, bericht in één kolom zonder inhoudsopgave. */
.news-wrap { padding-block: 3rem 5rem; }
.news-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.news-card {
  position: relative; height: 100%;
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform var(--t-med), box-shadow var(--t-med);
}
.news-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.news-card-img img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.news-card-body { padding: 1.25rem 1.4rem 1.5rem; }
.news-card time { font-size: .88rem; color: var(--c-muted); }
.news-card h2 { margin: .3rem 0 .5rem; font-size: 1.2rem; color: var(--c-primary-dark); text-wrap: balance; }
/* De hele kaart is klikbaar via de link in de titel; zo is er één link per kaart
   voor schermlezers en toetsenbord, in plaats van een link rond alles. */
.news-card h2 a { color: inherit; text-decoration: none; }
.news-card h2 a::after { content: ""; position: absolute; inset: 0; }
.news-card h2 a:focus-visible { box-shadow: none; }
.news-card:focus-within { box-shadow: 0 0 0 3px var(--c-focus), 0 0 0 6px var(--c-focus-dark); }
.news-card p { margin: 0; color: var(--c-ink-soft); }
/* Staat later in het bestand dan de tweekolommenregel van .content-wrap, en wint
   daardoor ook op brede schermen (zelfde specificiteit). */
.content-wrap-single { grid-template-columns: 1fr; }

/* ===== Footer =====
   Licht, op de zandtoon. De donkere variant is verlaten omdat beide logo's een
   witte achtergrond ingebakken hebben en daar in een wit kader kwamen te staan.
   Drie banden: navigeren, partners, en een smalle donkere
   afsluiter die de pagina alsnog visueel dichtzet. */
.site-footer {
  background: var(--c-surface-2);
  border-top: 1px solid #e2d7c4;
  color: var(--c-ink-soft);
  /* Geen margin-top: na een witte sectie (home, thema's, 404) gaf die een losse
     crème strook. Inhoudspagina's hebben al genoeg ruimte onderaan .content-wrap. */
}

.footer-main {
  display: grid; gap: 2.5rem;
  grid-template-columns: 1fr;
  padding-block: 3.5rem 2.5rem;
}
/* Op een telefoon staan de linklijsten twee naast elkaar. Met 44 px per link
   werd één kolom anders een erg lange sliert om doorheen te scrollen. */
@media (max-width: 759px) {
  .footer-main { grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; }
  .footer-brand-block { grid-column: 1 / -1; }
}
@media (min-width: 760px) { .footer-main { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .footer-main { grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 3rem; } }

/* Merkblok */
.footer-brand-block img { height: 92px; width: auto; }
.footer-tagline { margin: 1.1rem 0 1.25rem; max-width: 34ch; font-size: .95rem; line-height: 1.6; }
.footer-mail-link {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 44px;
  color: var(--c-primary-dark); font-weight: 600; text-decoration: none;
}
.footer-mail-link:hover { text-decoration: underline; }
.footer-mail-link svg { width: 1.1em; height: 1.1em; }
.former-name { margin: .5rem 0 0; font-size: .85rem; color: var(--c-muted); }

/* Linkkolommen */
.footer-col h2 {
  margin: 0 0 .35rem;
  font-size: .8rem; text-transform: uppercase; letter-spacing: .09em;
  color: var(--c-muted); font-weight: 700;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col a,
.footer-col .linklike {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--c-ink); text-decoration: none;
  font-size: .95rem;
}
.footer-col a:hover,
.footer-col .linklike:hover { color: var(--c-primary-dark); text-decoration: underline; }
.footer-col .linklike { font-size: .95rem; }

/* Partners. Op brede schermen staan label en logo's naast elkaar: met alleen
   deze band (er is geen nieuwsbrief) zou er anders een lege rechterhelft zijn. */
/* De lijn staat op het blok zelf, niet op .container: zo begint en eindigt ze
   op dezelfde rand als de inhoud erboven. De logo's staan vlak na "in
   samenwerking met", want daar verwijst die zin naar. */
.footer-meta { padding-bottom: 2.25rem; }
.footer-partners { border-top: 1px solid #e2d7c4; padding-top: 2.25rem; }
@media (min-width: 860px) {
  .footer-partners { display: flex; align-items: center; gap: 2.5rem; }
  .footer-partners .partner-logos { margin-top: 0; }
}

.partner-label {
  display: block; max-width: 48ch;
  font-size: .85rem; color: var(--c-muted); line-height: 1.5;
}
.partner-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2.5rem; margin-top: 1.1rem; }
/* Twee partnerlogo's met een heel andere verhouding. Gelijke hoogte zou het
   brede Special Olympics-logo optisch laten domineren, dus dat staat iets lager. */
/* Hoogte moet expliciet in CSS staan: de globale reset zet `height: auto` op
   img, waardoor de hoogte uit het HTML-attribuut genegeerd wordt. Zonder deze
   regels renderen de logo's op hun volledige bronformaat. */
.partner-link { display: inline-flex; align-items: center; min-height: 44px; }
.partner-link img { display: block; width: auto; }
.partner-sig img { height: 54px; }
.partner-sob img { height: 46px; }
.partner-link:hover img { opacity: .8; }

/* Smalle donkere afsluiter: zet de pagina visueel dicht zonder een zware balk. */
.footer-legal {
  background: #0e2a33; color: #b8c8cc;
  font-size: .85rem;
}
.footer-legal .container { padding-block: 1rem; }

/* ===== Zoek-dropdown ===== */
.search { position: relative; }
.search-results {
  position: absolute; top: calc(100% + .5rem); left: 0; right: 0;
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--r-md); box-shadow: var(--shadow-md);
  max-height: 60vh; overflow-y: auto; z-index: 60;
  padding: .35rem; display: none;
}
.search-results.is-open { display: block; }
.search-results ul { list-style: none; margin: 0; padding: 0; }
.search-results a {
  display: block; padding: .65rem .85rem; border-radius: var(--r-md);
  text-decoration: none; color: var(--c-ink);
}
.search-results a:hover, .search-results a:focus-visible {
  background: var(--c-primary-soft);
}
.search-results strong { display: block; color: var(--c-primary-dark); font-size: .98rem; }
.search-results .sec { display: block; font-size: .78rem; color: var(--c-muted); margin-top: .05rem; }
.search-results small { color: var(--c-muted); font-size: .8rem; }
.search-results .empty { margin: 0; padding: .85rem; color: var(--c-muted); font-size: .9rem; }
.search-results mark { background: #fff3a8; color: inherit; padding: 0 2px; border-radius: 3px; }

/* ===== Cookie banner ===== */
.cookie-banner {
  position: fixed; left: 1rem; right: 1rem; bottom: 1rem;
  max-width: 560px; margin-inline: auto;
  background: var(--c-surface); color: var(--c-ink);
  border: 1px solid var(--c-line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  padding: 1.25rem; z-index: 200;
  display: none;
}
.cookie-banner.is-open { display: block; }
.cookie-banner h2 { margin: 0 0 .5rem; font-size: 1.05rem; color: var(--c-primary-dark); }
.cookie-banner p { margin: 0 0 1rem; font-size: .92rem; color: var(--c-ink-soft); }
.cookie-banner p a { color: var(--c-primary-dark); }
.cookie-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.cookie-actions button {
  flex: 1 1 0; min-width: 130px;
  padding: .65rem 1rem; border-radius: 999px; border: 2px solid var(--c-primary);
  font: inherit; font-weight: 600; cursor: pointer;
}
/* Weigeren en aanvaarden zien er bewust identiek uit. De Gegevensbeschermings-
   autoriteit vraagt dat weigeren even makkelijk is als aanvaarden; een gevulde
   "ja"-knop naast een lege "nee"-knop stuurt de bezoeker naar ja. */
.cookie-actions button { background: var(--c-primary); color: #fff; }
.cookie-actions button:hover { background: var(--c-primary-dark); border-color: var(--c-primary-dark); }

/* ===== Contactformulier ===== */
.form-preview { border-left-color: var(--c-primary); background: var(--c-primary-soft); }

/* Als kaart, niet los op de achtergrond: het formulier is een afgebakende taak
   binnen de pagina. Zelfde taal als de tegels en de documentlijst. */
.contact-form {
  margin-top: 1.5rem;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: clamp(1.25rem, 3vw, 2rem);
}
/* Let op de specificiteit: deze alinea's staan binnen .article, en `.article p`
   (0,1,1) wint van een enkele klasse (0,1,0). Daarom overal .contact-form ervoor,
   anders vallen de marges terug op het artikelritme. Dat ging eerder mis: de
   scheidingslijn van .form-note kwam daardoor tegen de verzendknop te plakken. */
.contact-form .form-intro { margin: 0 0 1.5rem; font-size: .92rem; color: var(--c-muted); }

.contact-form .field { margin-bottom: 1.5rem; }
.contact-form label {
  display: block; font-weight: 600; margin-bottom: .35rem;
  color: var(--c-ink); line-height: 1.35;
}
.contact-form .req { font-weight: 400; color: var(--c-muted); font-size: .88em; }
.contact-form .hint { margin: -.1rem 0 .5rem; font-size: .875rem; color: var(--c-muted); line-height: 1.4; }
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form select,
.contact-form textarea {
  width: 100%; padding: .7rem .9rem;
  border: 1px solid var(--c-border-input); border-radius: var(--r-md);
  font: inherit; color: var(--c-ink); background: var(--c-bg);
}
.contact-form textarea { resize: vertical; min-height: 7rem; }
.contact-form input:hover, .contact-form select:hover, .contact-form textarea:hover { border-color: var(--c-primary); }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { background: var(--c-surface); }

/* De native select ziet er anders uit dan de rest. Eigen chevron zodat alle
   velden dezelfde vorm hebben. */
.contact-form select {
  appearance: none; -webkit-appearance: none;
  padding-right: 2.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23134953' 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 .85rem center;
  background-size: 1.15rem;
}

/* Twee kolommen zodra er plaats is; daaronder gewoon onder elkaar.
   Let op bij het toevoegen van velden: geef beide velden in een rij dezelfde
   opbouw (allebei wel of allebei geen hint), anders staan de invulvakken niet
   op gelijke hoogte. */
.field-row { display: grid; gap: 0 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .field-row { grid-template-columns: 1fr 1fr; }
  .field-row .field { display: flex; flex-direction: column; }
  .field-row .field > :is(input, select, textarea) { margin-top: auto; }
}

/* Fout: nooit enkel met kleur aanduiden. Er staat ook tekst bij het veld
   én in de samenvatting bovenaan (WCAG 1.4.1, kleur is geen enige drager). */
.contact-form .field.has-error input,
.contact-form .field.has-error select,
.contact-form .field.has-error textarea { border-color: var(--c-error); border-width: 2px; }
.contact-form .error {
  margin: .35rem 0 0; font-size: .9rem; font-weight: 500; color: var(--c-error);
}
.contact-form .error::before { content: "! "; font-weight: 700; }

.form-errors {
  border: 2px solid var(--c-error); border-radius: var(--r-md);
  padding: 1rem 1.25rem; margin-bottom: 1.5rem;
  background: var(--c-surface);
}
.form-errors:focus-visible { box-shadow: 0 0 0 3px var(--c-focus), 0 0 0 6px var(--c-focus-dark); }
.form-errors strong { display: block; color: var(--c-error); margin-bottom: .4rem; }
.form-errors ul { margin: 0; padding-left: 1.2rem; }
.form-errors a { color: var(--c-error); }

/* Het akkoord is een ander soort invoer dan de rest: apart zetten met een
   scheidingslijn, zodat het niet als "zomaar nog een veld" wegleest. */
.field-check {
  display: grid; grid-template-columns: auto 1fr; gap: .3rem .7rem; align-items: start;
  border-top: 1px solid var(--c-line);
  padding-top: 1.35rem; margin-bottom: 1.5rem;
}
/* 1,2rem was 19 px: onder de 24 px die WCAG 2.5.8 vraagt. Het bijhorende label
   is aanklikbaar, wat het effectieve doel nog groter maakt. */
.field-check input { width: 1.5rem; height: 1.5rem; margin-top: 0; accent-color: var(--c-primary); }
.field-check label { font-weight: 400; margin: 0; }
.field-check .error { grid-column: 2; }

.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }
/* Geen scheidingslijn: er staat er al één boven het akkoordvinkje, en een tweede
   vlak onder de knop leest als een streep die aan die knop hangt. Deze notitie is
   een voetnoot; rustige tekst met ruimte eromheen volstaat. */
.contact-form .form-note {
  margin: 1.5rem 0 0;
  font-size: .875rem; color: var(--c-muted); line-height: 1.5;
}
.contact-form button[disabled] { opacity: .6; cursor: progress; }

.contact-form .form-status { margin: 0; font-weight: 600; }
.form-status.is-ok { color: var(--c-success); }
.form-status.is-fout { color: var(--c-error); }
.form-status.is-busy { color: var(--c-ink-soft); font-weight: 500; }

/* ===== Afdrukken =====
   Begeleiders printen deze hoofdstukken uit. Zonder printregels komt de
   navigatie, het zoekveld, de cookiebanner en de footer mee op papier, en laat
   de gereserveerde ruimte van de vaste header een lege strook bovenaan. */
@media print {
  :root { --header-expanded-h: 0px; --header-h: 0px; }

  body {
    padding-top: 0;
    background: #fff; color: #000;
    font-size: 11pt; line-height: 1.45;
  }

  /* Alles wat enkel op het scherm nut heeft, blijft van het papier. */
  .primary-nav, .search, .header-actions, .nav-toggle,
  .subnav, .cookie-banner, .skip-link,
  .slide-btn, .slide-controls, .site-footer, .wave,
  .back-link, .tile-cta, .contact-form { display: none !important; }

  /* Enkel het logo blijft, zodat een uitdraai herkenbaar blijft. */
  .site-header {
    position: static; border-bottom: 1px solid #999;
    margin-bottom: 1.5rem;
  }
  .header-inner { padding-block: 0 .5rem; }
  .brand img { height: 52px; }

  .page-header { background: none; padding: 0 0 1rem; border-bottom: 1px solid #ccc; }
  .container { max-width: none; padding-inline: 0; }
  .content-wrap { display: block; padding: 1rem 0 0; }
  .article { max-width: none; }

  h1, h2, h3, h4 { color: #000; break-after: avoid; page-break-after: avoid; }
  h1 { font-size: 20pt; }
  h2 { font-size: 15pt; margin-top: 1.4em; }
  h3 { font-size: 12.5pt; }
  p, li { orphans: 3; widows: 3; }

  figure.photo, .table-wrap, .doc-list li { break-inside: avoid; page-break-inside: avoid; }
  figure.photo img { max-height: 8cm; width: auto; box-shadow: none; border: 1px solid #ccc; }
  .table-wrap { overflow: visible; }
  .article table { min-width: 0; font-size: 9.5pt; }

  .callout { border: 1px solid #999; background: none; }
  .doc-list a { border: 1px solid #ccc; background: none; }
  .tile { border: 1px solid #ccc; background: none; break-inside: avoid; }

  /* Een link op papier is waardeloos zonder het adres erbij. */
  .article a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #444; word-break: break-all; }
  a { color: #000; text-decoration: underline; }
}