/* ==========================================================================
   beWonder — moderne herbouw
   Tokens uit vpbewonder-design/tokens/*.json (gecorrigeerd 2026-08-10).
   Afwijkingen t.o.v. het origineel staan in README.md onder "Modernisering".
   ========================================================================== */

/* ---------- Fonts (lokaal, uit het skill-pakket) ---------- */
@font-face { font-family: "Open Sans"; src: url("../fonts/OpenSans-Regular.woff2") format("woff2"),
       url("../fonts/OpenSans-Regular.ttf") format("truetype");  font-weight: 400; font-display: swap; }
@font-face { font-family: "Open Sans"; src: url("../fonts/OpenSans-SemiBold.woff2") format("woff2"),
       url("../fonts/OpenSans-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Open Sans"; src: url("../fonts/OpenSans-Bold.woff2") format("woff2"),
       url("../fonts/OpenSans-Bold.ttf") format("truetype");     font-weight: 700; font-display: swap; }
@font-face { font-family: "Rosario";   src: url("../fonts/Rosario-Light.woff2") format("woff2"),
       url("../fonts/Rosario-Light.ttf") format("truetype");     font-weight: 300; font-display: swap; }
@font-face { font-family: "Rosario";   src: url("../fonts/Rosario-Regular.woff2") format("woff2"),
       url("../fonts/Rosario-Regular.ttf") format("truetype");   font-weight: 400; font-display: swap; }
@font-face { font-family: "Rosario";   src: url("../fonts/Rosario-SemiBold.woff2") format("woff2"),
       url("../fonts/Rosario-SemiBold.ttf") format("truetype");  font-weight: 600; font-display: swap; }

/* ---------- Tokens ----------
   Elke kleur die in het donkere thema anders moet zijn, staat hier. Vaste
   kleurwaarden verderop in dit bestand zijn er alleen nog waar ze in beide
   thema's kloppen: wit op een merkblauw vlak blijft wit. */
:root {
  color-scheme: light;

  --background:   #ffffff;
  --surface:      #efefef;
  --surface-soft: #f6f9fb;
  --card:         #ffffff;   /* opstaande panelen: kaarten, velden, menu's */
  --text-primary: #1f2442;
  --text-muted:   #666666;
  --border:       #e1e1e1;
  /* Iets dieper dan het bronblauw #0693e3: die haalde op wit maar 3,34:1 en
     dat is te weinig voor tekst (norm 4,5:1). Deze haalt 5,15:1, ook voor witte
     tekst op een blauwe knop, en blijft herkenbaar dezelfde merkkleur. */
  --primary:      #0a72b4;
  --brand-deep:   #004488;   /* achtergrond van blauwe panelen, blijft donker */
  --deep-2:       #003a75;   /* donkerste stop in de verlopen */
  /* #ee1289 uit de bron haalt op wit 4,13:1 — net te weinig voor de kleine
     bovenkopjes. Deze haalt 5,06:1 en blijft hetzelfde roze. */
  --accent:       #d40f7b;
  --danger:       #c90100;
  --groen:        #4a9c22;

  --on-primary:   #ffffff;   /* tekst op --primary */
  --link-hover:   var(--brand-deep);
  --panel-end:    var(--primary); /* lichte stop in de blauwe verlopen */
  --ink:          #1f2442;   /* footer en skiplink: donker vlak in beide thema's */
  --tint:         #e8f4fd;   /* lichtblauwe vulling bij hover/aangevinkt */
  --mark:         #fff2b8;   /* markering in zoekresultaten */
  --input-hover:  #c9d3dc;
  --header-vlak:  rgba(255,255,255,.88);
  /* Kleur van de hoofdmenu-items: lichter dan --primary, maar nog net binnen de
     norm. Haalt op wit 4,65:1 (voor tekst geldt 4,5:1). */
  --nav-link:     rgb(43, 118, 190);

  --font-body: "Open Sans", system-ui, -apple-system, Segoe UI, sans-serif;
  --font-ui:   "Rosario", "Open Sans", system-ui, sans-serif;

  --maxw: 1140px;
  /* Leesbreedte. Op 68ch bleef naast de tekstkolom zo'n 150px onbenut voordat de
     zijbalk begon. Op 80ch is de kolom vrijwel gevuld en blijft de regellengte
     nog binnen de gangbare bovengrens van ongeveer 85 tekens. */
  --measure: 80ch;

  --s1: 5px;  --s2: 10px; --s3: 15px; --s4: 20px; --s5: 30px;
  --s6: 40px; --s7: 60px; --s8: 80px;

  --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(31,36,66,.06), 0 2px 8px rgba(31,36,66,.05);
  --shadow-md: 0 2px 6px rgba(31,36,66,.07), 0 12px 28px rgba(31,36,66,.08);
  --shadow-lg: 0 8px 20px rgba(31,36,66,.10), 0 24px 60px rgba(31,36,66,.12);

  --ease: cubic-bezier(.22,.61,.36,1);
  --dur: 260ms;

  --header-h: 76px;
}


/* ---------- Thema ----------
   Het donkere thema hangt alleen aan [data-theme="dark"], dus aan de knop.
   Bewust géén @media (prefers-color-scheme: dark): een bezoeker met een donker
   ingesteld toestel krijgt de site eerst zoals hij bedoeld is, en kan daarna
   zelf omschakelen. */
/* ---------- Donker thema ----------
   Twee ingangen: [data-theme] wint altijd (dat zet de knop), en zonder
   uitgesproken keuze volgt de site de systeeminstelling. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --background:   #0f1526;
  --surface:      #1b2440;
  --surface-soft: #172038;
  --card:         #1a2239;
  --text-primary: #e9edf6;
  --text-muted:   #a6b0c7;
  --border:       #2c3654;
  --primary:      #52b8f2;
  --brand-deep:   #0e355c;
  --deep-2:       #082741;
  --accent:       #ff5fae;
  --danger:       #ff7b7a;
  --groen:        #4fae26;

  /* #52b8f2 is te licht voor witte tekst erop; donkere tekst haalt 9:1. */
  --on-primary:   #08121f;
  --link-hover:   #9ad4f8;
  --panel-end:    #1a6ea6;
  --ink:          #0a0f1c;
  --tint:         #16304a;
  --mark:         #5a4a10;
  --input-hover:  #3d4a6b;
  --header-vlak:  rgba(15,21,38,.9);

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.3);
  --shadow-md: 0 2px 6px rgba(0,0,0,.45), 0 12px 28px rgba(0,0,0,.4);
  --shadow-lg: 0 8px 20px rgba(0,0,0,.5), 0 24px 60px rgba(0,0,0,.45);
}


/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* De browser verbergt [hidden] met display:none, maar elke eigen display-regel
   wint daarvan op specificiteit — dan staat een leeg uitvoervak alsnog in beeld.
   Deze regel houdt hidden ook echt verborgen. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 20px); }
body {
  margin: 0;
  /* clip i.p.v. hidden: houdt de off-canvas drawer buiten scrollWidth zonder
     position:sticky van de header te breken. */
  overflow-x: clip;
  background: var(--background);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--primary); text-decoration: none; }
@media (hover: hover) {
  a:hover { color: var(--link-hover); }
}
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
button { font: inherit; color: inherit; }

/* ---------- Typografie ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-ui);
  font-weight: 300;
  color: var(--text-primary);
  letter-spacing: -.015em;
  line-height: 1.15;
  margin: 0 0 var(--s4);
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.1rem); }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.1rem); margin-top: var(--s7); }
h3 { font-size: clamp(1.15rem, 1.05rem + .5vw, 1.4rem); font-weight: 400; margin-top: var(--s6); }
h4 { font-size: 1.05rem; font-weight: 600; margin-top: var(--s5); }
h2:first-child, h3:first-child, h4:first-child { margin-top: 0; }

/* Kopjes binnen de inhoud in het merkblauw, zoals op de bronsite. */
.prose h2, .prose h3, .prose h4,
.section-head h2, .calc-card h2, .form-group legend { color: var(--primary); }
p { margin: 0 0 var(--s4); }
strong { font-weight: 600; }

.eyebrow {
  font-family: var(--font-ui);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 var(--s3);
}

/* ---------- Layout ---------- */
.wrap { width: min(100% - 2 * var(--s4), var(--maxw)); margin-inline: auto; }
/* Kale URL's uit de tekst kunnen breder zijn dan een smal scherm; laat ze afbreken
   in plaats van de pagina op te rekken. */
.prose { max-width: var(--measure); overflow-wrap: break-word; }
.skip {
  position: absolute; left: var(--s4); top: -100px; z-index: 100;
  background: var(--ink); color: #fff; padding: var(--s2) var(--s4);
  border-radius: var(--r-sm); transition: top var(--dur) var(--ease);
}
.skip:focus { top: var(--s2); color: #fff; }

/* ---------- Header ---------- */
.topbar {
  background: var(--brand-deep);
  color: #fff;
  font-family: var(--font-ui);
  font-size: .85rem;
}
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); min-height: 38px; }
/* padding-block houdt het tikdoel op minimaal 24px (was 23px) */
.topbar a { color: #fff; display: inline-flex; align-items: center; gap: 7px; padding-block: 3px; }
@media (hover: hover) {
  .topbar a:hover { color: #fff; text-decoration: underline; }
}
.topbar-links { display: flex; align-items: center; gap: var(--s4); }
.social { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; }
.social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: var(--r-sm);
  background: rgba(255,255,255,.14); color: #fff;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
@media (hover: hover) {
  .social a:hover { background: #fff; color: var(--brand-deep); transform: translateY(-1px); }
}
.social svg { width: 15px; height: 15px; display: block; }
@media (max-width: 640px) {
  /* Alles behalve de sociale iconen en het e-mailadres; dat laatste hoort juist
     wel op de telefoon te staan, tussen het nummer en de iconen. */
  .topbar-links a:not(.social a):not(.topbar-mail) { display: none; }
  .topbar-links { gap: var(--s2); }
}

.site-header {
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid transparent;
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
/* De blur zit op een pseudo-element, niet op .site-header zelf: backdrop-filter maakt
   een element containing block voor position:fixed-kinderen, en dat sluit de mobiele
   drawer op in de header. */
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--header-vlak);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
}
.site-header.is-stuck { box-shadow: var(--shadow-sm); border-bottom-color: var(--border); }
.site-header .wrap { display: flex; align-items: center; gap: var(--s4); min-height: var(--header-h); }
.logo { flex: 0 0 auto; }
.logo img { width: 210px; }

/* ---------- Navigatie ---------- */
.nav { margin-left: auto; }
.nav > ul { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav > ul > li { position: relative; }
.nav-top {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-ui); font-size: .92rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--nav-link);
  padding: 10px 13px; border-radius: var(--r-pill);
  background: none; border: 0; cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav-top[aria-expanded="true"] { background: var(--surface-soft); color: var(--primary); }
@media (hover: hover) {
  .nav-top:hover,
  .nav li:hover > .nav-top { background: var(--surface-soft); color: var(--primary); }
}
.nav-top.is-active { color: var(--primary); }
.nav-top.is-active::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 2px;
  height: 2px; background: var(--accent); border-radius: 2px;
}
.nav-caret { width: 9px; height: 9px; transition: transform var(--dur) var(--ease); }
.nav-top[aria-expanded="true"] .nav-caret { transform: rotate(180deg); }
@media (hover: hover) {
  .nav li:hover .nav-caret { transform: rotate(180deg); }
}

.submenu {
  position: absolute; top: calc(100% + 10px); left: 50%;
  transform: translate(-50%, 8px);
  min-width: 290px; max-width: 460px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  padding: var(--s2); margin: 0; list-style: none;
  opacity: 0; visibility: hidden; pointer-events: none;
  /* Sluitvertraging: even respijt om diagonaal naar het paneel te bewegen. */
  transition: opacity var(--dur) var(--ease) 200ms,
              transform var(--dur) var(--ease) 200ms,
              visibility 0s linear calc(var(--dur) + 200ms);
}
/* Onzichtbare brug over de tussenruimte, zodat de muis het paneel kan bereiken
   zonder dat de hover verbroken wordt. Het paneel is een DOM-kind van de <li>,
   dus hoveren hierop houdt `li:hover` waar. */
.submenu::before {
  content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px;
}
.submenu.cols-2 { min-width: 520px; column-count: 2; column-gap: var(--s2); }
.submenu:focus-within, .nav-top[aria-expanded="true"] + .submenu {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0);
  transition-delay: 0s;
}
@media (hover: hover) {
  .nav li:hover > .submenu {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0);
  transition-delay: 0s;
}
}
.submenu a {
  display: block; padding: 9px 13px; border-radius: var(--r-sm);
  font-size: .93rem; line-height: 1.35; color: var(--text-primary);
  break-inside: avoid;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.submenu a:focus-visible { background: var(--surface-soft); color: var(--primary); }
@media (hover: hover) {
  .submenu a:hover { background: var(--surface-soft); color: var(--primary); }
}
.submenu a.is-current { background: var(--surface-soft); color: var(--primary); font-weight: 600; }

.nav-toggle { display: none; }

/* Het volledige menu (7 items) past pas vanaf ~1150px; daaronder de drawer. */
@media (max-width: 1150px) {
  .logo img { width: 172px; }
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    margin-left: auto; width: 46px; height: 46px;
    background: var(--surface-soft); border: 1px solid var(--border);
    border-radius: var(--r-sm); cursor: pointer;
  }
  /* Reveal via clip-path i.p.v. translateX: het paneel blijft binnen het viewport,
     dus het veroorzaakt geen horizontale overflow als het dicht is. */
  .nav {
    position: fixed; inset: var(--header-h) 0 0 0; margin: 0;
    background: var(--card); overflow-y: auto; padding: var(--s4) var(--s4) var(--s8);
    clip-path: inset(0 0 0 100%); visibility: hidden;
    /* visibility mag niet mee-transitionen (blijft dan op hidden hangen); bij sluiten
       schakelt hij pas ná de clip-animatie om. */
    transition: clip-path var(--dur) var(--ease), visibility 0s linear var(--dur);
    border-top: 1px solid var(--border);
  }
  .nav.is-open {
    clip-path: inset(0 0 0 0); visibility: visible;
    transition: clip-path var(--dur) var(--ease), visibility 0s;
  }
  .nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .nav > ul > li { border-bottom: 1px solid var(--border); }
  .nav-top { width: 100%; justify-content: space-between; border-radius: 0; padding: var(--s3) var(--s1); }
  .nav-top.is-active::after { display: none; }
  .submenu {
    position: static; transform: none; opacity: 1; visibility: visible; pointer-events: auto;
    box-shadow: none; border: 0; min-width: 0; max-width: none; column-count: 1;
    padding: 0 0 var(--s3) var(--s3); display: none;
  }
  .submenu.cols-2 { min-width: 0; column-count: 1; }
  .nav-top[aria-expanded="true"] + .submenu { display: block; }
  /* De desktopregels hierboven zijn specifieker (0,3,0) dan `.submenu` (0,1,0) en
     zouden het paneel anders met translate(-50%) uit beeld schuiven. */
  .nav-top[aria-expanded="true"] + .submenu,
  .nav li:hover > .submenu,
  .submenu:focus-within {
    transform: none; opacity: 1; visibility: visible; pointer-events: auto;
  }
}

/* ---------- Snelacties (zwevende balk rechts) ----------
   Zelfde vier functies als de bronsite, maar als één afgeronde kolom met een
   label dat pas uitschuift bij hover/focus in plaats van vier losse blokjes. */
/* Verankerd onder het kopblok (dat eindigt tussen 351 en 408px) in plaats van
   verticaal gecentreerd. De min() houdt de balk heel op lage vensters: past hij
   op 430px niet meer volledig in beeld, dan schuift hij naar boven. */
.snelacties {
  position: fixed; right: var(--s3); top: min(430px, calc(100vh - 355px));
  z-index: 40;
}
.snelacties ul {
  list-style: none; margin: 0; padding: 6px;
  display: flex; flex-direction: column; gap: 6px;
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}
.snel {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: var(--r-md);
  color: #fff;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.snel svg { width: 22px; height: 22px; }
.snel:focus-visible { color: #fff; transform: translateX(-2px); box-shadow: var(--shadow-md); }
@media (hover: hover) {
  .snel:hover { color: #fff; transform: translateX(-2px); box-shadow: var(--shadow-md); }
}
/* Label als tooltip náást de balk, zodat het paneel zelf niet meegroeit. */
.snel-label {
  position: absolute; right: calc(100% + 10px); top: 50%;
  transform: translate(6px, -50%);
  padding: 8px 14px; border-radius: var(--r-sm);
  background: inherit; color: #fff;
  font-family: var(--font-ui); font-size: .88rem; font-weight: 600; white-space: nowrap;
  box-shadow: var(--shadow-md);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.snel:focus-visible .snel-label { opacity: 1; transform: translate(0, -50%); }
@media (hover: hover) {
  .snel:hover .snel-label { opacity: 1; transform: translate(0, -50%); }
}

.snel-aanmelden   { background: var(--brand-deep); }
.snel-bellen      { background: var(--danger); }
.snel-kalender    { background: var(--primary); }
.snel-beoordeling { background: var(--groen); }

@media (max-width: 1150px) {
  .snelacties { right: var(--s2); }
  .snel { width: 40px; height: 40px; }
  .snel svg { width: 19px; height: 19px; }
}
/* Op smalle schermen zou de balk over de tekst vallen: dan onderaan als rij. */
@media (max-width: 620px) {
  .snelacties {
    top: auto; bottom: 0; right: 0; left: 0; transform: none;
  }
  .snelacties ul {
    flex-direction: row; justify-content: center; gap: var(--s2);
    border-radius: var(--r-lg) var(--r-lg) 0 0; border-bottom: 0;
    padding: var(--s2) var(--s3) calc(var(--s2) + env(safe-area-inset-bottom, 0px));
  }
  .snelacties li { justify-content: center; }
  .snel-label { display: none; }
  /* ruimte onder de pagina zodat de balk niets afdekt */
  body { padding-bottom: 72px; }
}
@media print { .snelacties { display: none; } }

/* ---------- Hero ----------
   De bannerfoto heeft het woordmerk al ingebakken (start op 12% van de breedte), dus
   tekst eroverheen of wegcroppen kan niet. Daarom: banner op volle breedte intact laten
   en de kopij in een kaart die er overheen schuift. */
.hero { padding-top: var(--s5); }
.hero-media { position: relative; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.hero-media img { width: 100%; aspect-ratio: 4 / 1; object-fit: cover; object-position: center; }
.hero-card {
  position: relative; z-index: 2;
  margin: -70px 0 0; padding: var(--s6);
  display: grid; grid-template-columns: 1.55fr 1fr; gap: var(--s6);
  background: linear-gradient(140deg, var(--deep-2) 0%, var(--brand-deep) 46%, var(--panel-end) 100%);
  color: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
}
.hero-card .eyebrow { color: rgba(255,255,255,.72); }
.hero-card h1 { color: #fff; margin-bottom: var(--s3); font-size: clamp(1.9rem, 1.3rem + 1.9vw, 2.7rem); }
.hero-card p { color: rgba(255,255,255,.9); max-width: 44ch; font-size: 1.04rem; margin-bottom: var(--s5); }
.hero-card .btn-row { display: flex; flex-wrap: wrap; gap: var(--s3); }
/* Beide heroknoppen even breed, ongeacht de lengte van het label. */
.hero-card .btn-row .btn { min-width: 190px; justify-content: center; }
.hero-card-main > :last-child { margin-bottom: 0; }

.hero-facts { border-left: 1px solid rgba(255,255,255,.22); padding-left: var(--s5); align-self: center; }
.hero-facts dt {
  font-family: var(--font-ui); font-size: .74rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.6);
  margin-bottom: 3px;
}
.hero-facts dd { margin: 0 0 var(--s4); font-size: .97rem; line-height: 1.55; color: rgba(255,255,255,.95); }
.hero-facts dd:last-child { margin-bottom: 0; }
/* Werkgebied: twee groepen plaatsen, elk op een eigen regel met wat lucht ertussen. */
.hero-facts .werkgebied span { display: block; }
.hero-facts .werkgebied span + span { margin-top: 7px; }
.hero-facts a { color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.45); }
@media (hover: hover) {
  .hero-facts a:hover { color: #fff; text-decoration-color: #fff; }
}
.hero-facts .big { font-family: var(--font-ui); font-size: 1.22rem; font-weight: 600; }

@media (max-width: 900px) {
  .hero-card { grid-template-columns: 1fr; gap: var(--s5); }
  .hero-facts { border-left: 0; border-top: 1px solid rgba(255,255,255,.22); padding-left: 0; padding-top: var(--s5); }
}
@media (max-width: 760px) {
  .hero { padding-top: 0; }
  .hero-media { border-radius: 0; margin-inline: calc(-1 * var(--s4)); }
  .hero-media img { aspect-ratio: 2 / 1; }
  .hero-card { margin-top: -40px; padding: var(--s5) var(--s4); }
}

/* Egale tint i.p.v. een verloop naar wit: het verloop was onderin niet meer van
   de pagina te onderscheiden. Nu dezelfde vulling als .section-tint. */
.page-head { padding: var(--s7) 0 var(--s5); border-bottom: 1px solid var(--border); background: var(--surface-soft); }
/* De H1 in het merkblauw, net als de h2/h3/h4 in de inhoud eronder. Zonder dit
   was de grootste kop de enige donkere. */
.page-head h1 { margin-bottom: 0; color: var(--primary); }
/* Geen leesbreedte-limiet op de samenvatting: hij is kort en mag de volle kolom
   gebruiken in plaats van na 68 tekens af te breken. */
.page-head .lead { margin: var(--s4) 0 0; max-width: none; font-size: 1.08rem; color: var(--text-muted); }

/* ---------- Breadcrumb ---------- */
.crumbs { font-family: var(--font-ui); font-size: .85rem; color: var(--text-muted); margin-bottom: var(--s3); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; }
.crumbs li + li::before { content: "›"; margin-right: 8px; color: var(--border); }
/* Op aanraakschermen de kruimels een groter tikdoel geven (was 16px hoog). */
@media (max-width: 767px) {
  .crumbs a, .crumbs [aria-current] { display: inline-block; padding-block: 5px; }
}
.crumbs a { color: var(--text-muted); }
@media (hover: hover) {
  .crumbs a:hover { color: var(--primary); }
}
.crumbs [aria-current] { color: var(--accent); font-weight: 600; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-ui); font-weight: 600; font-size: .95rem; letter-spacing: .02em;
  padding: 13px 26px; border-radius: var(--r-pill); border: 1.5px solid transparent;
  cursor: pointer; text-align: center;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn-primary { background: var(--primary); color: var(--on-primary); box-shadow: 0 6px 18px rgba(6,147,227,.32); }
@media (hover: hover) {
  .btn-primary:hover { background: var(--brand-deep); color: #fff; transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,68,136,.34); }
}
.btn-ghost { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.7); color: #fff; }
@media (hover: hover) {
  .btn-ghost:hover { background: #fff; color: var(--brand-deep); transform: translateY(-2px); }
}
.btn-outline { background: transparent; border-color: var(--primary); color: var(--primary); }
@media (hover: hover) {
  .btn-outline:hover { background: var(--primary); color: var(--on-primary); transform: translateY(-2px); }
}

/* ---------- Cards ---------- */
.card-grid { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); }
.card-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .card-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .card-grid-3 { grid-template-columns: minmax(0, 1fr); } }
.card {
  display: flex; flex-direction: column; gap: var(--s2);
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--s5) var(--s4) var(--s4);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
a.card { color: inherit; }
@media (hover: hover) {
  a.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: rgba(6,147,227,.4); }
}
/* Geen padding: de lucht rond de tekening zit in het bestand zelf. Zet je hem
   hier, dan krimpt het rondje waarop de browser afknipt evenveel mee en gaan de
   hoeken er alsnog af. */
.card-icon {
  width: 96px; height: 96px; margin-bottom: var(--s3);
  border-radius: var(--r-pill); background: var(--surface-soft);
  object-fit: contain;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
@media (hover: hover) {
  a.card:hover .card-icon { transform: scale(1.06); background: var(--tint); }
}
.card h3 { font-family: var(--font-ui); font-size: 1.24rem; font-weight: 600; margin: 0; color: var(--text-primary); }
.card p { color: var(--text-muted); font-size: .95rem; margin: 0; }
.card .more { margin-top: auto; padding-top: var(--s3); font-family: var(--font-ui); font-weight: 600; font-size: .9rem; color: var(--primary); }
@media (hover: hover) {
  a.card:hover .more { color: var(--link-hover); }
}

/* ---------- Claim-banner ---------- */
.banner-claim { margin: var(--s7) 0 0; text-align: center; }
/* 720px i.p.v. 520: ruim groter, maar nog onder de 1024px van het bronbestand,
   dus de claim blijft scherp. */
.banner-claim img { display: inline-block; max-width: min(100%, 720px); height: auto; }

/* ---------- Tegelraster (folders, weekkalender) ---------- */
.tile-grid {
  list-style: none; margin: var(--s5) 0; padding: 0;
  display: grid; gap: var(--s3);
  grid-template-columns: repeat(auto-fill, minmax(146px, 1fr));
}
/* De folders: drie op een rij. Groter dan de vier van eerst, en een omslag van
   een folder is nu eenmaal iets om te kunnen zien. Het vierkante raster van de
   weekkalender houdt zijn eigen indeling (verderop). */
.tile-grid:not(.square) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
/* Een tegelraster is beeld, geen leestekst, en hoeft dus niet binnen de 68-tekens
   leesbreedte te blijven. De begrenzing verhuist van het tekstblok naar de losse
   tekstelementen erin, zodat het raster de volle kolom kan gebruiken en de tegels
   breder worden. Alleen op pagina's waar zo'n raster staat. */
.prose:has(.tile-grid:not(.square)) { max-width: none; }
.prose:has(.tile-grid:not(.square)) > :not(.tile-grid) { max-width: var(--measure); }
@media (max-width: 620px) { .tile-grid:not(.square) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tile-grid:not(.square) .tile-title { padding: 13px 14px 15px; font-size: .95rem; }
.tile > a, .tile > div {
  display: flex; flex-direction: column; height: 100%;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md);
  overflow: hidden; color: var(--text-primary);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
/* Tegels zijn kaarten, geen lopende tekst — de prose-onderstreping hoort hier niet. */
.prose .tile > a { text-decoration: none; }
@media (hover: hover) {
  .prose .tile > a:hover { text-decoration: none; }
}
/* `.prose img` staat verderop in dit bestand en wint anders op bronvolgorde:
   die zet marge en schaduw terug op tegelbeelden. */
.prose .tile img { margin: 0; box-shadow: none; }
@media (hover: hover) {
  .tile > a:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(6,147,227,.45); }
}
.tile img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: top center;
  background: var(--surface-soft); margin: 0; border-radius: 0; box-shadow: none;
}
.tile-title {
  display: block; padding: 11px 12px 12px;
  font-family: var(--font-ui); font-size: .9rem; font-weight: 600; line-height: 1.3;
  text-wrap: balance;
}
/* ---------- Weekkalender: 4 per rij, kaartje met beeld + pill-label ---------- */
.tile-grid.square { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); }
@media (max-width: 900px) { .tile-grid.square { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px) { .tile-grid.square { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.tile-grid.square .tile > a,
.tile-grid.square .tile > div {
  align-items: center; justify-content: flex-start; gap: var(--s2);
  padding: var(--s2); border-radius: var(--r-lg);
}
/* Alleen klikbare tegels krijgen diepte; een tegel zonder doelpagina blijft plat. */
.tile-grid.square .tile > a { box-shadow: var(--shadow-sm); }
.tile-grid.square img {
  align-self: stretch; width: 100%; height: auto;
  aspect-ratio: 1 / 1; border-radius: var(--r-md);
  object-position: center;
  transition: transform var(--dur) var(--ease);
}
/* Label als pill — duidelijk een knop, niet zomaar tekst */
.tile-grid.square .tile-title {
  margin-top: auto;
  padding: 8px 18px; border-radius: var(--r-pill);
  background: var(--surface); color: var(--text-primary);
  font-size: .92rem; text-align: center; white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.tile-grid.square .tile > a:focus-visible {
  border-color: var(--primary); box-shadow: var(--shadow-md); transform: translateY(-4px);
}
@media (hover: hover) {
  .tile-grid.square .tile > a:hover {
  border-color: var(--primary); box-shadow: var(--shadow-md); transform: translateY(-4px);
}
}
@media (hover: hover) {
  .tile-grid.square .tile > a:hover img { transform: scale(1.04); }
}
.tile-grid.square .tile > a:focus-visible .tile-title { background: var(--primary); color: var(--on-primary); }
@media (hover: hover) {
  .tile-grid.square .tile > a:hover .tile-title { background: var(--primary); color: var(--on-primary); }
}

/* ---------- Secties ---------- */
.section { padding: var(--s8) 0; }
/* Het laatste blok voor de footer hoeft niet de volle sectiepadding. */
main > .section:last-child { padding-bottom: var(--s6); }
.usp-layout { display: grid; gap: var(--s7); grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: stretch; }
@media (max-width: 900px) { .usp-layout { grid-template-columns: minmax(0, 1fr); } }
.section-tint { background: var(--surface-soft); }
.section-head { max-width: var(--measure); margin-bottom: var(--s6); }
.section-head:last-child { margin-bottom: 0; }
.section-head h2 { margin-top: 0; }

/* De rechterkolom van het blok onderaan de homepage: een kop op dezelfde hoogte
   en in dezelfde maat als die links, met de rekenkaart eronder. */
.usp-reken { display: flex; flex-direction: column; min-width: 0; }
.usp-reken > h2 { margin: 0 0 var(--s4); color: var(--primary); }
.usp-reken .calc-card { flex: 1; }

/* De uitnodiging sluit het blok af: links uitgelijnd op dezelfde marge als de
   opsomming erboven en doorlopend tot de rechterkolom. */
.usp-slot {
  max-width: none; margin: var(--s7) 0 0; text-align: left;
}
.usp-slot .prose { margin-inline: 0; max-width: none; }
.usp-slot .prose p:last-child { margin-bottom: 0; }

/* ---------- Content ---------- */
.content { padding: var(--s7) 0 var(--s6); }
.content-layout { display: grid; gap: var(--s7); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .content-layout { grid-template-columns: minmax(0, 1fr) 268px; } }

.prose ul, .prose ol { margin: 0 0 var(--s4); padding-left: 1.35em; }
.prose li { margin-bottom: 9px; }
.prose li::marker { color: var(--primary); }
.prose img { border-radius: var(--r-md); box-shadow: var(--shadow-sm); margin: var(--s5) 0; }
/* Foto naast de tekst in plaats van als losse band ertussen, zoals op de bronsite.
   De alinea's lopen er links langs tot de foto op is. */
.prose img.foto-rechts {
  float: right;
  width: 260px; max-width: 40%;
  margin: 4px 0 var(--s4) var(--s5);
}
/* Onder de 620px is er geen ruimte meer om naast te lopen: dan gewoon boven de
   tekst, gecentreerd. */
@media (max-width: 620px) {
  .prose img.foto-rechts {
    float: none; display: block;
    width: 100%; max-width: 300px;
    margin: 0 auto var(--s4);
  }
}
.prose a {
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 1.5px; text-decoration-color: rgba(6,147,227,.4);
  overflow-wrap: anywhere;   /* kale URL's mogen afbreken op smalle schermen */
}
@media (hover: hover) {
  .prose a:hover { text-decoration-color: currentColor; }
}
.prose blockquote {
  margin: var(--s5) 0; padding: var(--s4) var(--s5);
  border-left: 4px solid var(--accent); background: var(--surface-soft);
  border-radius: 0 var(--r-md) var(--r-md) 0; color: var(--text-primary);
}
.prose blockquote p:last-child { margin-bottom: 0; }
.prose .btn { text-decoration: none; margin: var(--s2) var(--s2) var(--s2) 0; }

.table-scroll { overflow-x: auto; margin: var(--s5) 0; border: 1px solid var(--border); border-radius: var(--r-md); }
table { width: 100%; border-collapse: collapse; font-size: .95rem; }
th, td { text-align: left; padding: 12px var(--s3); border-bottom: 1px solid var(--border); }
th { font-family: var(--font-ui); font-weight: 600; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); background: var(--surface-soft); }
tbody tr:last-child td { border-bottom: 0; }

/* ---------- Sidebar ---------- */
.sidebar { position: sticky; top: calc(var(--header-h) + var(--s4)); align-self: start; }
.sidebar h2 {
  font-family: var(--font-ui); font-size: .78rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted);
  margin: 0 0 var(--s3);
}
.sidebar ul { list-style: none; margin: 0 0 var(--s5); padding: 0; }
/* De sectienavigatie als kaartje, zodat het als één blok leest en niet als losse
   regels tussen de inhoud. Alleen de directe lijst: de knop in .side-cta niet. */
.sidebar > ul {
  padding: var(--s2);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}
/* :not(.btn) is nodig: de aanmeldknop staat óók in de zijbalk en zou anders de
   opmaak van een navigatielink krijgen — lager, hoekiger en met andere
   binnenruimte dan elke andere knop op de site. */
.sidebar a:not(.btn) {
  display: block; padding: 9px var(--s3); border-radius: var(--r-sm);
  font-size: .93rem; line-height: 1.35; color: var(--text-primary);
  border-left: 2px solid transparent;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
@media (hover: hover) {
  .sidebar a:not(.btn):hover { background: var(--surface-soft); color: var(--primary); }
}
.sidebar a.is-current { background: var(--surface-soft); border-left-color: var(--accent); color: var(--primary); font-weight: 600; }
@media (max-width: 999px) { .sidebar { position: static; border-top: 1px solid var(--border); padding-top: var(--s5); } }

.side-cta {
  background: linear-gradient(150deg, var(--brand-deep), var(--panel-end));
  color: #fff; border-radius: var(--r-lg); padding: var(--s5) var(--s4);
}
.side-cta h2 { color: rgba(255,255,255,.8); }
.side-cta p { font-size: .93rem; color: rgba(255,255,255,.92); margin-bottom: var(--s4); }
/* Het telefoonnummer in de lopende zin: vol wit tegen de 92% van de tekst
   eromheen, zodat de cijfers eruit springen, en als geheel meelopend zodat het
   nooit halverwege afbreekt.
   De zijbalk zet met `.sidebar a:not(.btn)` alle links op de donkere tekstkleur;
   die selector weegt zwaarder dan `.side-cta .cta-tel`, waardoor de cijfers
   donkerblauw op blauw uitkwamen. Vandaar .sidebar ervoor. */
.sidebar .side-cta .cta-tel {
  /* Diezelfde selector maakt zijbalklinks ook blokniveau, met binnenruimte en
     een linkerrand: als navigatie-item klopt dat, maar midden in een zin duwt
     het de cijfers op een eigen regel met een gat ervoor en erna. */
  display: inline; line-height: inherit;
  color: #fff; font-weight: 600; white-space: nowrap;
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: rgba(255,255,255,.5);
  background: none; padding: 0; border: 0; border-radius: 0;
}
.sidebar .side-cta .cta-tel:focus-visible { color: #fff; text-decoration-color: #fff; background: none; }
@media (hover: hover) {
  .sidebar .side-cta .cta-tel:hover { color: #fff; text-decoration-color: #fff; background: none; }
}
.side-cta .btn { background: #fff; color: var(--brand-deep); width: 100%; justify-content: center; }
/* Bij hover een lichtblauwe tint in plaats van het felle accentroze: dat botste
   met het blauwe paneel en de witte letters vielen erin weg. Vaste waarden, want
   de rustkleur van deze knop is ook vast wit — in beide thema's. Zelfde lichte
   verplaatsing als de andere knoppen, zodat hover duidelijk voelbaar blijft. */
@media (hover: hover) {
  .side-cta .btn:hover { background: #e8f4fd; color: var(--brand-deep); transform: translateY(-2px); }
}

/* ---------- Formulieren ---------- */
.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;
}
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
/* Veldnamen in het bodyfont, net als de lopende tekst. Ze stonden in --font-ui
   (Rosario), waardoor ze afweken van al het andere op de pagina. */
.field label, .field-label {
  font-family: var(--font-body); font-size: .87rem; font-weight: 600; color: var(--text-primary);
  line-height: 1.35;
}
.field abbr { color: var(--accent); text-decoration: none; border: 0; }
.field input, .field select, .field textarea {
  font: inherit; font-size: 1rem; color: var(--text-primary);
  background: var(--card); border: 1.5px solid var(--border); border-radius: var(--r-sm);
  padding: 11px 13px; width: 100%; min-width: 0;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field textarea { resize: vertical; }
@media (hover: hover) {
  .field input:hover,
  .field select:hover,
  .field textarea:hover { border-color: var(--input-hover); }
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(6,147,227,.35);
}
/* Toetsenbordfocus krijgt de gewone, contrastrijke ring terug: de zachte schaduw
   hierboven haalt de 3:1 van WCAG 1.4.11/2.4.11 niet. */
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 2px;
}
.field input:user-invalid, .field select:user-invalid, .field textarea:user-invalid { border-color: var(--danger); }
.field-note { margin: 0; font-size: .87rem; color: var(--text-muted); }

.field-grid { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(216px, 1fr)); }
.field-wide, .field-checks, .field-date { grid-column: 1 / -1; }
/* Forceert een nieuwe rasterrij: het veld begint altijd in de eerste kolom, ook
   als er naast het vorige veld nog plek was. */
.field-nieuwe-rij { grid-column-start: 1; }
.date-parts { display: grid; grid-template-columns: 90px 110px 1fr; gap: var(--s2); max-width: 380px; }
/* Een datumveld hoeft niet over de volle breedte: een datum is kort en oogt zo
   net als de rekenmodule op de homepage. */
.aanmeld-form .field input[type="date"] { max-width: 280px; }

.form-group { border: 0; padding: 0; margin: 0 0 var(--s7); }
.form-group legend {
  font-family: var(--font-ui); font-size: 1.3rem; font-weight: 400; padding: 0;
  margin-bottom: var(--s4); width: 100%;
  border-bottom: 1px solid var(--border); padding-bottom: var(--s2);
}
.aanmeld-form { margin: var(--s6) 0 0; }
.form-slot, .form-note {
  font-size: .9rem; color: var(--text-muted); margin: 0 0 var(--s4);
}
.form-slot { margin-top: var(--s5); }
/* De opmerking staat boven de verzendknop, dus hij heeft onderruimte nodig.
   Stond hij hiervoor onderaan, dan was een ondermarge van 0 juist goed. */
.aanmeld-form .form-note { margin: var(--s4) 0 var(--s3); }
.aanmeld-form button[disabled] { opacity: .6; cursor: progress; }

/* Lokaas voor spambots: onzichtbaar voor bezoekers, wél in te vullen door een
   script dat blind alle velden langsgaat. Niet display:none — een deel van de
   bots slaat verborgen velden juist over. */
.honingpot {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

/* Rekenmodule bevallingsdatum */
.calc-card {
  display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--s5); box-shadow: var(--shadow-sm);
}
.calc-card .calc-form { display: flex; flex-direction: column; flex: 1; }
/* De aanmeldregel zakt naar onderen, zodat de kaart even hoog eindigt als de lijst ernaast. */
.calc-cta {
  margin: var(--s4) 0 0; padding-top: var(--s4); margin-top: auto;
  border-top: 1px solid var(--border);
  font-size: .95rem; color: var(--text-muted);
}
.calc-cta a { font-family: var(--font-ui); font-weight: 600; color: var(--primary); }
@media (hover: hover) {
  .calc-cta a:hover { color: var(--link-hover); }
}
.calc-card h2 { margin-top: 0; font-size: 1.35rem; }
.calc-card > p { font-size: .95rem; color: var(--text-muted); }
.calc-row { display: flex; gap: var(--s3); align-items: flex-end; flex-wrap: wrap; }
.calc-row .field { flex: 1 1 190px; }
/* De rekenknop hoeft niet even hoog te zijn als het invoerveld ernaast; slanker
   oogt rustiger. Blijft op 46px en daarmee boven de 44px voor aanraakbediening. */
.calc-row .btn { flex: 0 0 auto; padding: 9px 22px; }
.calc-out {
  display: block; margin-top: var(--s4); padding: var(--s4);
  background: linear-gradient(140deg, var(--brand-deep), var(--panel-end));
  color: #fff; border-radius: var(--r-md);
}
.calc-out-label { display: block; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.72); }
.calc-out-date { display: block; font-family: var(--font-ui); font-size: 1.55rem; font-weight: 600; margin-top: 4px; }
.calc-out-note { display: block; font-size: .88rem; color: rgba(255,255,255,.85); margin-top: 4px; }
.calc-form .form-note { margin: var(--s3) 0 0; font-size: .82rem; }

/* ---------- Zoeken ---------- */
.zoekform { display: flex; gap: 8px; }
.zoekform input {
  flex: 1 1 auto; min-width: 0; font: inherit; font-size: .95rem;
  padding: 10px 14px; border-radius: var(--r-pill);
  border: 1.5px solid rgba(255,255,255,.28); background: rgba(255,255,255,.1); color: #fff;
}
.zoekform input::placeholder { color: rgba(255,255,255,.6); }
.zoekform input:focus { outline: none; border-color: #fff; background: rgba(255,255,255,.18); }
.zoekform button {
  flex: 0 0 auto; width: 42px; border: 0; border-radius: var(--r-pill);
  background: var(--primary); color: var(--on-primary); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--dur) var(--ease);
}
@media (hover: hover) {
  .zoekform button:hover { background: #fff; color: var(--brand-deep); }
}
.zoek-hint { color: rgba(255,255,255,.55); margin-top: var(--s3); }

.zoekform-groot { max-width: 560px; margin-top: var(--s4); }
.zoekform-groot input {
  border-color: var(--border); background: var(--card); color: var(--text-primary);
  padding: 13px 18px; font-size: 1rem;
}
.zoekform-groot input::placeholder { color: var(--text-muted); }
.zoekform-groot input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(6,147,227,.18); }
.zoekform-groot button { width: auto; }
.zoek-status { color: var(--text-muted); font-size: .95rem; }
.zoek-results { list-style: none; margin: var(--s5) 0 0; padding: 0; }
.zoek-results li { margin-bottom: var(--s4); padding-bottom: var(--s4); border-bottom: 1px solid var(--border); }
.zoek-results li:last-child { border-bottom: 0; }
.zoek-results a { font-family: var(--font-ui); font-size: 1.15rem; font-weight: 600; text-decoration: none; }
.zoek-results .zoek-sectie { display: block; font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 3px; }
.zoek-results p { margin: 6px 0 0; font-size: .95rem; color: var(--text-muted); }
.zoek-results mark { background: var(--mark); color: inherit; padding: 0 2px; border-radius: 2px; }

/* ---------- Prev / next ---------- */
.pager { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: var(--s8); }
.pager a {
  display: flex; flex-direction: column; gap: 4px;
  padding: var(--s4); border: 1px solid var(--border); border-radius: var(--r-md);
  color: var(--text-primary);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
@media (hover: hover) {
  .pager a:hover { border-color: var(--primary); background: var(--surface-soft); }
}
.pager .dir { font-family: var(--font-ui); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); }
.pager .ttl { font-family: var(--font-ui); font-weight: 600; }
.pager .next { text-align: right; }

/* ---------- Footer ---------- */
/* Geen extra margin: secties en .content hebben onderaan al ruime padding. */
/* Merkblauw i.p.v. het bijna-zwarte --ink: minder zwaar en het rijmt op de hero,
   die hetzelfde blauw gebruikt. Wit haalt hierop 9,6:1. --ink blijft in gebruik
   voor de skiplink en de labels van de snelknoppen. */
.site-footer { background: var(--brand-deep); color: rgba(255,255,255,.8); padding: var(--s6) 0 var(--s4); margin-top: 0; }

/* Belstrip: compacte waarschuwing met rode accentrand i.p.v. een vol rood vlak.
   Geen negatieve marge: de ruimte erboven is nu gelijk aan die eronder. */
.bel-strip {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(201,1,0,.5); border-left: 4px solid var(--danger);
  border-radius: var(--r-md);
  padding: var(--s4) var(--s5);
}
.bel-kop {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: var(--s2) var(--s4); margin-bottom: var(--s3);
}
.bel-strip h2 { color: #fff; font-size: .84rem; letter-spacing: .14em; margin: 0; }
/* .site-footer a zet alle footerlinks op 80% wit en won hier op specificiteit,
   waardoor de cijfers fletser werden dan bedoeld. Vandaar de footer ervoor. */
.site-footer .bel-nummer {
  font-family: var(--font-ui); font-weight: 600; font-size: 1rem; color: #fff;
  text-decoration: underline; text-underline-offset: 3px;
  /* Een telefoonnummer mag nooit halverwege afbreken. */
  white-space: nowrap;
}
.bel-nummer::before { content: "Bel "; font-weight: 400; color: rgba(255,255,255,.6); }
.bel-lijst {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1px var(--s5); align-items: start;
  /* min() erbij: zonder dat blijft een kolom 250px breed eisen, ook als er maar
     235px is — op een smal toestel liep de lijst dan de rand uit. */
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
}
.bel-lijst li { position: relative; padding-left: 16px; font-size: .86rem; line-height: 1.5; color: rgba(255,255,255,.82); }
.bel-lijst li::before { content: "·"; position: absolute; left: 5px; color: var(--danger); font-weight: 700; }

/* Eén scheidingslijn onderin (op .footer-bottom); hier geen tweede rand,
   anders staan er twee lijnen met niets ertussen. */
/* Spreekuurlocaties is de maatstaf: die kolom houdt zijn breedte, zoeken wordt
   smaller en de praktijktekst krijgt de ruimte die vrijkomt. */
.footer-top {
  display: grid; gap: var(--s5) var(--s6); align-items: stretch;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.9fr) minmax(0, 1fr);
  padding: var(--s6) 0 var(--s5);
}
/* Eén regelritme voor alle drie de kolommen. */
.footer-top p, .footer-top address { font-size: .9rem; line-height: 1.65; margin: 0 0 var(--s3); }
.footer-top p:last-child, .footer-top address:last-child { margin-bottom: 0; }
/* Kolommen even hoog laten eindigen: het laatste element zakt naar de onderkant. */
.footer-kolom { display: flex; flex-direction: column; height: 100%; }
.footer-kolom > .kolom-slot { margin-top: auto; margin-bottom: 0; }
.footer-praktijk a { text-decoration: underline; text-underline-offset: 3px; }
.praktijk-slot {
  display: flex; align-items: flex-end; gap: var(--s4); flex-wrap: wrap;
  padding-top: var(--s3);
  /* De losse <a> zit niet in een <p>, dus die erfde de body-grootte (17px). */
  font-size: .9rem; line-height: 1.65;
}
.zoek-snel { color: rgba(255,255,255,.6); padding-top: var(--s3); }
.zoek-snel a { text-decoration: underline; text-underline-offset: 3px; }
.footer-locaties address { font-style: normal; }
.footer-locaties address strong { color: #fff; }
@media (max-width: 900px) { .footer-top { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Video-embeds ---------- */
.embed {
  position: relative; width: 100%; margin: var(--s5) 0;
  border-radius: var(--r-md); overflow: hidden;
  background: #000; box-shadow: var(--shadow-sm);
}
.embed iframe, .embed video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

/* Klikbare afbeelding in de tekst */
.prose a.beeldlink { display: inline-block; text-decoration: none; border-radius: var(--r-md); }
.prose a.beeldlink img { transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
@media (hover: hover) {
  .prose a.beeldlink:hover img { transform: translateY(-3px); box-shadow: var(--shadow-md); }
}
.prose a.beeldlink:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }

/* ---------- Contact: locaties naast elkaar, kaart groot eronder ---------- */
.locatie-grid {
  display: grid; gap: var(--s4); margin: var(--s5) 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 700px) { .locatie-grid { grid-template-columns: minmax(0, 1fr); } }
.locatie-kaart {
  display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg);
  overflow: hidden; box-shadow: var(--shadow-sm);
}
.prose .locatie-kaart img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  margin: 0; border-radius: 0; box-shadow: none;
}
.locatie-body { display: flex; flex-direction: column; flex: 1; padding: var(--s4); }
.prose .locatie-route { margin: auto 0 0; padding-top: var(--s3); }
.prose .locatie-route .btn { margin: 0; font-size: .9rem; padding: 10px 20px; }
.prose .locatie-body h3 { margin: 0 0 8px; font-size: 1.15rem; }
.locatie-body p { margin: 0; font-size: .95rem; line-height: 1.65; }

.kaart-blok { margin: var(--s7) 0 var(--s5); }
.prose .kaart-blok h2 { margin-top: 0; }
.embed-kaart { aspect-ratio: 16 / 9; margin: 0; }
@media (max-width: 700px) { .embed-kaart { aspect-ratio: 4 / 3; } }

/* Contact heeft geen sidebar; alles mag daar de volle containerbreedte gebruiken.
   Ook de alinea's: koppen, lijsten en kaarten lopen hier over de volle 1140px, en
   een alinea die op de leesbreedte afbreekt oogt daartussen als een fout. */
.prose-breed, .prose-breed > * { max-width: none; }

/* ---------- Checkboxen (geboorteplan) ---------- */
.field-checks { border: 0; padding: 0; margin: 0; }
/* Zelfde bodyfont als de gewone veldnamen. In --font-ui (Rosario) oogde deze
   vraag kleiner dan de rest, terwijl de ingestelde grootte gelijk was: Rosario
   heeft een lagere x-hoogte. */
.field-checks legend {
  font-family: var(--font-body); font-size: .87rem; font-weight: 600; color: var(--text-primary);
  padding: 0; margin-bottom: 10px; border: 0; line-height: 1.4;
}
.check-row { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); }
.check {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 14px; border: 1.5px solid var(--border); border-radius: var(--r-pill);
  font-size: .95rem; cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
@media (hover: hover) {
  .check:hover { border-color: var(--primary); background: var(--surface-soft); }
}
.check input { width: auto; accent-color: var(--primary); margin: 0; }
.check:has(input:checked) { border-color: var(--primary); background: var(--tint); }
.field-checks .anders { margin-top: var(--s3); max-width: 420px; }
.field-checks .anders label { font-weight: 400; color: var(--text-muted); }
.footer-grid { display: grid; gap: var(--s6); grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); }
.site-footer h2 {
  font-family: var(--font-ui); font-size: .8rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: #fff; margin: 0 0 var(--s3);
}
.site-footer a { color: rgba(255,255,255,.8); }
@media (hover: hover) {
  .site-footer a:hover { color: #fff; }
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 7px; font-size: .9rem; }
/* Typografie van de kolommen staat bij .footer-top; hier alleen de reset. */
.site-footer address { font-style: normal; }
.footer-bottom {
  padding-top: var(--s4); border-top: 1px solid rgba(255,255,255,.14);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4);
  justify-content: space-between;
  font-size: .85rem; color: rgba(255,255,255,.6);
}
/* De linkjes rechts erven anders .site-footer li (0.9rem + 7px marge) en komen
   dan groter en hoger uit dan de copyrightregel links. */
.footer-bottom li { margin: 0; font-size: inherit; line-height: inherit; }
.footer-bottom ul { display: flex; flex-wrap: wrap; gap: var(--s4); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ==========================================================================
   Schakelaars in de actiebalk: thema en taal
   ========================================================================== */
.snelacties { display: flex; flex-direction: column; gap: var(--s2); }
/* Zelfde paneelvorm als de vier snelacties, maar visueel losgekoppeld:
   dit zijn instellingen, geen acties. */

.snel-thema, .snel-taal {
  background: var(--card); color: var(--text-primary);
  border: 1px solid var(--border);
}
.snel-thema { cursor: pointer; }
.snel-thema:focus-visible, .snel-taal:focus-visible { color: var(--primary); border-color: var(--primary); }
@media (hover: hover) {
  .snel-thema:hover,
  .snel-taal:hover { color: var(--primary); border-color: var(--primary); }
}
.snel-thema .snel-label, .snel-taal .snel-label { background: var(--ink); color: #fff; }

/* Zon bij donker thema (je kunt naar licht toe), maan bij licht thema. */
.snel-thema .ic-zon { display: none; }
.snel-thema[aria-pressed="true"] .ic-zon { display: block; }
.snel-thema[aria-pressed="true"] .ic-maan { display: none; }

.taal-code {
  font-family: var(--font-ui); font-weight: 600; font-size: .82rem;
  letter-spacing: .06em;
}

/* Melding boven een pagina die nog niet vertaald is. */
.taal-melding {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); align-items: baseline;
  margin: 0 0 var(--s5); padding: var(--s3) var(--s4);
  background: var(--surface-soft); border-left: 4px solid var(--primary);
  border-radius: var(--r-sm);
  font-size: .92rem; color: var(--text-muted);
}
.taal-melding a { font-weight: 600; }

/* Hamburger die in een kruis kantelt. */
.nav-toggle-icoon { display: block; position: relative; width: 22px; height: 16px; }
.nav-toggle-icoon span {
  position: absolute; left: 0; right: 0; height: 2px;
  background: currentColor; border-radius: 2px;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.nav-toggle-icoon span:nth-child(1) { top: 0; }
.nav-toggle-icoon span:nth-child(2) { top: 7px; }
.nav-toggle-icoon span:nth-child(3) { top: 14px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-icoon span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-icoon span:nth-child(2) { opacity: 0; transform: scaleX(.4); }
.nav-toggle[aria-expanded="true"] .nav-toggle-icoon span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-kop { display: none; }

/* De zwevende balk rechts heeft naast de inhoud (max 1140px) zo'n 140px nodig.
   Daaronder valt hij over de tekst, dus daar wordt het een onderbalk. Dat gebeurde
   eerder pas bij 620px, waardoor hij tussen 620 en 1150px over de inhoud lag. */
@media (max-width: 1339px) {
  .snelacties {
    position: fixed; top: auto; bottom: 0; right: 0; left: 0; transform: none;
    flex-direction: row; justify-content: center; align-items: stretch; gap: 0;
    background: rgba(255,255,255,.94);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-top: 1px solid var(--border);
    box-shadow: 0 -2px 14px rgba(31,36,66,.10);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  :root[data-theme="dark"] .snelacties { background: rgba(15,21,38,.94); }
  .snelacties ul {
    flex-direction: row; align-items: center; gap: var(--s2);
    background: none; border: 0; box-shadow: none;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    border-radius: 0; padding: 8px var(--s2);
  }
  /* Dunne scheiding tussen de vier acties en de twee schakelaars. */

  .snel { width: 44px; height: 44px; }
  .snel svg { width: 21px; height: 21px; }
  .snel:hover, .snel:focus-visible { transform: none; }
  .snel-label { display: none; }
  .snel-thema, .snel-taal { background: transparent; border-color: transparent; }
  body { padding-bottom: 68px; }
}


/* ==========================================================================
   Mobiele layout — een eigen indeling, geen uitgeknepen desktop
   ========================================================================== */
@media (max-width: 767px) {
  :root {
    --header-h: 58px;
    --s5: 24px; --s6: 30px; --s7: 40px; --s8: 52px;
    --measure: 100%;
  }
  body { font-size: 16px; line-height: 1.65; }

  /* -- kop --
     De topbalk herhaalt wat de onderbalk al biedt (bellen, aanmelden) en kost
     bovenaan het scherm de meeste ruimte; alleen het nummer blijft staan. */
  .topbar { padding: 5px 0; font-size: .8rem; }
  .topbar .wrap { justify-content: center; }
  .topbar-links, .topbar .social { display: none; }
  .topbar-tel { font-weight: 600; }

  .site-header .wrap { min-height: var(--header-h); gap: var(--s3); }
  .logo img { width: 148px; }
  .nav-toggle { width: 44px; height: 44px; }

  /* -- lade -- */
  /* De lade begint onder de header, zodat het logo en de sluitknop zichtbaar
     blijven. JS zet de bovenkant precies op de onderrand van de header, want
     die verschuift als de topbalk wegscrollt. */
  .nav { padding: var(--s2) 0 calc(68px + var(--s6)); }
  .nav > ul { padding: 0 var(--s4); }
  .nav-top { min-height: 52px; padding: var(--s2) 0; font-size: 1.02rem; }
  .nav-caret { transition: transform var(--dur) var(--ease); }
  .nav-top[aria-expanded="true"] .nav-caret { transform: rotate(180deg); }
  .submenu { padding: 0 0 var(--s3); }
  .submenu a { display: flex; align-items: center; min-height: 44px; padding: var(--s1) var(--s3); }

  /* -- koppen en tekst -- */
  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.35rem; margin-top: var(--s6); }
  h3 { font-size: 1.12rem; margin-top: var(--s5); }
  .page-head { padding: var(--s5) 0 var(--s4); }
  .lead { font-size: 1.02rem; }
  .content { padding: var(--s5) 0 var(--s6); }

  /* Kruimelpad op één scrollbare regel in plaats van over drie regels. */
  .crumbs ol {
    display: flex; flex-wrap: nowrap; overflow-x: auto; gap: var(--s2);
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .crumbs ol::-webkit-scrollbar { display: none; }
  .crumbs li { white-space: nowrap; }

  /* -- inhoud -- */
  .card-grid-3, .card-grid, .tile-grid, .usp-layout, .locatie-grid { grid-template-columns: minmax(0, 1fr); }
  .tile-grid.square { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .content-layout { gap: var(--s6); }

  /* Brede tabellen mogen zelf schuiven; de pagina niet. */
  .prose table { display: block; overflow-x: auto; white-space: nowrap; }

  /* -- formulieren --
     16px op de velden voorkomt dat iOS bij het focussen inzoomt. */
  .field-grid { grid-template-columns: minmax(0, 1fr); }
  .field input, .field select, .field textarea { font-size: 16px; padding: 13px 14px; }
  .check { min-height: 44px; }
  .aanmeld-form .btn { width: 100%; justify-content: center; }
  .date-parts { gap: var(--s2); }

  /* -- knoppen -- */
  .btn { min-height: 46px; }
  .hero-acties .btn, .calc-row .btn { width: 100%; justify-content: center; }
  /* De rij kantelt naar onder elkaar. De 190px uit .calc-row .field is bedoeld
     als minimumbreedte; in een kolom slaat dat op de hoogte en zou het veld een
     leeg gat van 190px hoog worden. Vandaar hier terug naar zijn eigen maat. */
  .calc-row { flex-direction: column; align-items: stretch; }
  .calc-row .field { flex: 0 0 auto; }

  /* -- pager -- */
  .pager { grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
  .pager a { min-height: 56px; }

  /* -- footer -- */
  .footer-top { gap: var(--s5); padding: var(--s5) 0 var(--s4); }
  .bel-strip { padding: var(--s3) var(--s4); }
  .bel-kop { gap: var(--s1) var(--s3); }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: var(--s2); }
  .praktijk-slot { align-items: flex-start; }
}

/* Heel smalle toestellen (iPhone SE en vergelijkbaar, 320-400px).
   Zes knoppen van 44px passen ook op 320px zolang de tussenruimte krimpt —
   de knop zelf kleiner maken zou onder de 44px-richtlijn voor raakvlakken komen. */
@media (max-width: 400px) {
  .snelacties ul { gap: 4px; padding: 7px 5px; }

  .snel svg { width: 20px; height: 20px; }
  .logo img { width: 132px; }
  h1 { font-size: 1.55rem; }
}

/* ---------- Raakvlakken die net te klein uitvielen ---------- */
/* WCAG 2.5.8 vraagt minimaal 24x24px. Deze drie links stonden op 23,6px omdat
   ze hun hoogte alleen uit de regelhoogte haalden. */
/* .bel-nummer staat er bewust niet bij: die heeft een ::before met "Bel " erin,
   en als flexregel valt die spatie weg ("Bel06 39..."). Padding doet daar hetzelfde
   werk zonder de tekst aan te tasten. */
.praktijk-slot > a, .topbar-tel, .footer-bottom a {
  display: inline-flex; align-items: center; min-height: 26px;
}
.bel-nummer { display: inline-block; padding-block: 3px; }

/* Onder de 620px passen de kop en het nummer niet meer naast elkaar, dus valt
   het nummer op een eigen regel. Als losse onderstreepte regel oogde dat als een
   ongelukje; als knop is meteen duidelijk dat je erop kunt tikken. Bewust
   inline-block en geen flex: het ::before zet "Bel " ervoor, en als flexregel
   valt die spatie weg ("Bel06 39..."). */
@media (max-width: 620px) {
  .bel-kop { gap: var(--s2); }
  .site-footer .bel-nummer {
    padding: 9px 16px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.45);
    border-radius: var(--r-pill);
    text-decoration: none;
    font-size: 1.05rem;
  }
  .site-footer .bel-nummer::before { color: rgba(255,255,255,.85); }
}

/* ==========================================================================
   Mobiel: correcties na het bekijken van echte schermafdrukken
   ========================================================================== */
@media (max-width: 767px) {

  /* De hero-afbeelding is een banner van 2000x500. Op 4:1 uitsnijden bij een
     schermbreedte van 390px laat alleen een enorm uitvergroot fragment zien.
     Op de telefoon dus op ware verhouding tonen. */
  .hero-media img { aspect-ratio: auto; height: auto; }
  .hero-card { margin-top: calc(var(--s5) * -1); padding: var(--s5) var(--s4); }
  .hero-card h1 { font-size: 1.6rem; }

  /* De knoppen in de hero zitten in .btn-row, niet in .hero-acties — daardoor
     bleven ze op verschillende breedtes staan. */
  .hero-card .btn-row { flex-direction: column; }
  .hero-card .btn-row .btn { width: 100%; justify-content: center; }

  /* Zes kaarten van 330px hoog onder elkaar is twee meter scrollen. Op de
     telefoon liggende rijen: pictogram links, tekst rechts. */
  .card {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    grid-template-areas: "icoon titel" "icoon tekst" "meer meer";
    align-items: center;
    column-gap: var(--s3); row-gap: 2px;
    padding: var(--s3) var(--s4);
  }
  .card-icon { grid-area: icoon; width: 56px; height: 56px; margin: 0; }
  .card h3 { grid-area: titel; font-size: 1.08rem; align-self: end; }
  .card p { grid-area: tekst; align-self: start; font-size: .9rem; line-height: 1.45; }
  .card .more { grid-area: meer; padding-top: var(--s2); font-size: .85rem; }
  .card-grid { gap: var(--s3); }

  /* Tegels blijven twee naast elkaar; het bijschrift eronder mag kleiner. */
  .tile-grid.square { gap: var(--s3); }
  .tile-title { font-size: .82rem; padding: 6px 10px; }
  .tile-grid .tile h3 { font-size: 1rem; }

  /* De onderbalk liet de tekst er te duidelijk doorheen schemeren, en de twee
     schakelaars zagen er onaf uit naast vier gekleurde knoppen. */
  .snelacties { background: rgba(255,255,255,.985); }
  :root[data-theme="dark"] .snelacties { background: rgba(15,21,38,.985); }
  .snel-thema, .snel-taal {
    background: var(--surface-soft);
    border: 1px solid var(--border);
    color: var(--text-primary);
  }

}


/* Op heel smalle schermen past het pictogram van 56px net niet meer naast de
   tekst zonder dat de titel gaat afbreken. */
@media (max-width: 360px) {
  .card { grid-template-columns: 48px minmax(0, 1fr); }
  .card-icon { width: 48px; height: 48px; }
}

/* ---------- Donker thema: kop en logo ---------- */
/* Het logo is donkerblauwe lijnkunst op transparant en valt weg op een donkere
   balk. In plaats van er een wit vlak onder te plakken staat er een lichte
   versie klaar: woordmerk in wit, ondertitel in het lichte merkblauw. Het pad
   is relatief aan dit css-bestand, dus het klopt op elke paginadiepte. */
:root[data-theme="dark"] .logo img {
  content: url("../img/logo-licht.png");
}

/* ---------- Folderpagina op de telefoon ---------- */
/* De omslagen zijn herkenningsplaatjes met een titel eronder; twee naast elkaar
   scheelt de helft van de paginalengte en blijft goed te herkennen. */
@media (max-width: 767px) {
  .tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
  .tile-grid .tile h3, .tile-grid .tile p { font-size: .92rem; }
}
@media (max-width: 380px) {
  .tile-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Hero op de telefoon ---------- */
/* De banner is nu maar ~98px hoog; met de kaart eroverheen viel het woordmerk
   half weg. Geen overlap dus op smalle schermen. */
@media (max-width: 767px) {
  .hero-card { margin-top: var(--s3); }
}

/* ==========================================================================
   Actiebalk: alles in één paneel
   ========================================================================== */
/* De twee schakelaars staan in dezelfde lijst als de vier acties, gescheiden
   door een streepje. Ze hebben een eigen kleur: met de achtergrondkleur van het
   paneel vielen ze weg tussen de gekleurde knoppen. */
.snel-thema  { background: #3c4257; color: #fff; border: 0; cursor: pointer; }
/* Vaste roze tint in plaats van var(--accent): in het donkere thema is dat
   #ff5fae en dan haalt witte tekst er maar 2,8:1 op. Deze haalt 5,1:1. */
.snel-taal   { background: #d40f7b; color: #fff; border: 0; }
.snel-thema:focus-visible { background: #2b3145; color: #fff; }
@media (hover: hover) {
  .snel-thema:hover { background: #2b3145; color: #fff; }
}
.snel-taal:focus-visible { background: #b00c66; color: #fff; }
@media (hover: hover) {
  .snel-taal:hover { background: #b00c66; color: #fff; }
}
.snel-thema .snel-label { background: #3c4257; }
.snel-taal  .snel-label { background: #d40f7b; }

.snel-scheiding { list-style: none; }
/* Rechtop aan de zijkant, liggend in de onderbalk. */
.snel-scheiding::before {
  content: ""; display: block;
  height: 1px; width: 100%; margin: 3px 0;
  background: var(--border);
}

/* ==========================================================================
   Menuknop duidelijk zichtbaar
   ========================================================================== */
/* Stond eerder als donkere streepjes op een lichtgrijs vlak; dat viel in de
   witte header nauwelijks op. Nu een gevulde knop in het merkblauw. */
.nav-toggle {
  background: var(--brand-deep); border-color: var(--brand-deep); color: #fff;
}
@media (hover: hover) {
  .nav-toggle:hover { background: var(--deep-2); border-color: var(--deep-2); }
}

/* ==========================================================================
   Footer: onderste regels van de kolommen op één lijn
   ========================================================================== */
/* KNOV-logo links, telefoon en e-mail in het midden; beide zitten met
   margin-top:auto onderaan hun kolom, dus ze eindigen op dezelfde hoogte. */
.footer-zoek .zoek-snel { margin-bottom: var(--s4); }
.footer-zoek .locatie-contact { margin-bottom: 0; }
.praktijk-slot { padding-top: var(--s4); }

@media (max-width: 1279px) {
  /* In de onderbalk staat het streepje rechtop tussen de knoppen. */
  .snel-scheiding::before {
    width: 1px; height: 26px; margin: 0 4px;
  }
  .snel-scheiding { display: flex; align-items: center; }
}

@media (max-width: 767px) {
  /* -- topbalk: nummer, e-mail en de sociale iconen naast elkaar -- */
  .topbar { padding: 6px 0; font-size: .78rem; }
  .topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
  .topbar-links { display: flex; align-items: center; gap: var(--s3); }
  .topbar .social { display: flex; }
  .topbar .social a { width: 26px; height: 26px; }
  .topbar .social svg { width: 13px; height: 13px; }
  /* "Aanmelden" staat al als eerste knop in de onderbalk. */
  .topbar-links > a:not(.topbar-mail) { display: none; }
  .topbar-mail { max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* -- hero: eigen afbeelding met de naam en ondertitel onder elkaar -- */
  .hero-media { border-radius: var(--r-md); box-shadow: var(--shadow-sm); }
  .hero-media img { aspect-ratio: 43 / 22; object-fit: cover; }
  .hero-card { margin-top: var(--s4); }
}

/* Heel smal: het adres past niet meer heel naast de rest. */
@media (max-width: 400px) {
  .topbar { font-size: .74rem; }
  .topbar-mail { max-width: 42vw; }
  .topbar .social a { width: 24px; height: 24px; }
}

/* ---------- Footer: praktijktekst met het KNOV-logo ernaast ----------
   Het logo staat rechts naast de tekst en verticaal in het midden. Er is een
   lichte versie van gemaakt (wit met een licht kroontje), zodat het zonder wit
   vlak op de donkere voettekst kan staan. */
@media (max-width: 767px) {
  /* Op de telefoon staat de kolom toch al onder elkaar; het logo eronder leest
     rustiger dan een smalle tekstkolom naast een plaatje. */
}

/* ---------- Footer: tekst om het KNOV-logo heen ----------
   Het logo zweeft rechts in de alinea, dus de regels lopen er links langs en
   onder door. De bovenmarge duwt hem een paar regels omlaag, zodat hij midden
   in de tekst staat in plaats van tegen de kop aan. */
.praktijk-tekst { overflow: hidden; }
.praktijk-tekst .knov {
  float: right; width: 116px; height: auto;
  margin: 1.7em 0 .6em 1.4em;
  opacity: .92;
  shape-outside: margin-box;
}

/* Telefoon en e-mail staan in de onderste balk, tussen de copyrightregel en de
   links. Daardoor eindigen de drie kolommen erboven allemaal op dezelfde hoogte. */
.footer-contact { display: flex; gap: var(--s4); margin: 0; }
.footer-contact a { white-space: nowrap; }
.footer-bottom { gap: var(--s4) var(--s5); }

@media (max-width: 900px) {
  .praktijk-tekst .knov { width: 96px; margin: 1.4em 0 .5em 1.1em; }
}
@media (max-width: 767px) {
  .praktijk-tekst .knov { float: none; display: block; margin: var(--s4) 0 0; width: 110px; }
  .footer-contact { flex-direction: column; gap: 2px; }
}

/* ---------- Beeld naast de paginatitel ----------
   De kop was op brede schermen half leeg terwijl de inhoud eronder wél twee
   kolommen heeft. Rechts staat nu het beeld van de pagina zelf, of anders het
   pictogram van de menusectie. */
.page-head .wrap {
  display: grid; align-items: center; gap: var(--s6);
  grid-template-columns: minmax(0, 1fr);
}
.page-head .wrap.met-beeld { grid-template-columns: minmax(0, 1fr) 240px; }
.kop-tekst { min-width: 0; }
.kop-beeld { margin: 0; }
.kop-beeld img { width: 100%; height: auto; display: block; }

/* Een foto vult het vlak; een pictogram staat in een zachte cirkel zodat het
   niet als een losse sticker in de ruimte hangt. */
.kop-icoon {
  display: grid; place-items: center;
  width: 190px; height: 190px; margin-inline: auto;
  border-radius: 50%; background: var(--tint);
}
/* Het beeld is groter dan het pictogram lijkt: de rand van het bestand is
   doorzichtige lucht. Vandaar 140 waar de tekening zelf zo'n 100 breed is. */
.kop-icoon img { width: 140px; height: 140px; object-fit: contain; }

@media (max-width: 999px) {
  .page-head .wrap.met-beeld { grid-template-columns: minmax(0, 1fr) 220px; }
  .kop-icoon { width: 150px; height: 150px; }
  .kop-icoon img { width: 110px; height: 110px; }
}
@media (max-width: 767px) {
  /* Op de telefoon staat de kop toch al onder elkaar; een beeld erbij duwt de
     tekst alleen maar naar beneden. */
  .page-head .wrap.met-beeld { grid-template-columns: minmax(0, 1fr); }
  .kop-beeld { display: none; }
}

/* ---------- Ruimte boven een formulier ----------
   Tussen de scheidingslijn onder de titel en het eerste kopje van het formulier
   stond de padding van .content plus de bovenmarge van het formulier. Samen was
   dat een gat van bijna honderd pixels. */
.aanmeld-form { margin-top: 0; }
.content:has(.aanmeld-form:first-child) { padding-top: var(--s5); }
.prose > .aanmeld-form:first-child { margin-top: calc(var(--s2) * -1); }

/* ---------- Footer: onderste regels op één lijn ----------
   De kolommen zijn even hoog (grid), maar hun inhoud verschilt in lengte. Het
   laatste blok van elke kolom zakt naar de onderkant, zodat de laatste regels
   met elkaar uitlijnen in plaats van op drie verschillende hoogtes te eindigen. */
.footer-kolom > *:last-child { margin-top: auto; }
/* De twee adressen horen bij elkaar; die zakken als paar omlaag. */
.footer-locaties address + address { margin-top: var(--s3); }

/* ---------- Contact: een kaart per spreekuurlocatie ----------
   Eén ingesloten kaart kan maar één speld tonen, dus krijgt elke locatie er een.
   Onder elke kaart staat het adres en de knop die de route in Maps opent. */
.kaart-grid {
  display: grid; gap: var(--s5);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.kaart-kaartje { margin: 0; }
.kaart-kaartje .embed-kaart { aspect-ratio: 4 / 3; border-radius: var(--r-md); }
.kaart-kaartje figcaption {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--s2);
  padding-top: var(--s3);
}
.kaart-kaartje figcaption strong { font-family: var(--font-ui); font-size: 1.05rem; }
.kaart-kaartje figcaption span { color: var(--text-muted); font-size: .95rem; }
.kaart-kaartje .btn { margin-top: var(--s1); }

@media (max-width: 767px) {
  .kaart-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
  .kaart-kaartje .embed-kaart { aspect-ratio: 3 / 2; }
}

/* ---------- Cookiemelding en uitgestelde insluitingen ---------- */
/* De melding staat onderin en over de volle breedte: hij hoort op te vallen,
   maar niet de halve pagina af te dekken zoals de gemiddelde cookiewall. */
.cookiemelding {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--card); border-top: 3px solid var(--primary);
  box-shadow: 0 -6px 28px rgba(0, 40, 80, .18);
}
.cookiemelding[hidden] { display: none; }
.cookie-binnen {
  max-width: var(--wrap); margin: 0 auto;
  padding: var(--s4) var(--s5);
  display: grid; gap: var(--s2) var(--s5);
  grid-template-columns: minmax(0, 1fr) auto; align-items: center;
}
.cookie-kop {
  grid-column: 1; margin: 0;
  font-family: var(--font-ui); font-size: 1.02rem; font-weight: 600; color: var(--primary);
}
.cookie-tekst {
  grid-column: 1; margin: 0;
  font-size: .92rem; line-height: 1.55; color: var(--text-muted); max-width: 68ch;
}
.cookie-knoppen {
  grid-column: 2; grid-row: 1 / span 2;
  display: flex; flex-direction: column; gap: var(--s2);
}
.cookie-knoppen .btn { justify-content: center; white-space: nowrap; }

@media (max-width: 760px) {
  .cookie-binnen { grid-template-columns: minmax(0, 1fr); padding: var(--s4); }
  .cookie-kop, .cookie-tekst, .cookie-knoppen { grid-column: 1; }
  .cookie-knoppen { grid-row: auto; margin-top: var(--s2); }
  .cookie-knoppen .btn { width: 100%; }
}

/* De knop in de voettekst ziet eruit als de links ernaast. De links zijn als
   lopende tekst vrijgesteld van de minimummaat voor een raakvlak, een knop niet:
   vandaar de padding, met een even grote negatieve marge zodat er visueel niets
   verschuift maar het aanraakvlak wél groot genoeg is. */
.cookie-opnieuw {
  border: 0; background: none; cursor: pointer;
  padding: 5px 4px; margin: -5px -4px;
  font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 3px;
}
@media (hover: hover) {
  .cookie-opnieuw:hover { color: #fff; }
}

/* Plaatshouder zolang er geen toestemming is. Zelfde vorm en maat als het frame
   dat er straks komt, zodat de pagina niet verspringt. */
.embed-wacht { display: grid; place-items: center; background: var(--surface-soft); }
.embed-slot { padding: var(--s5) var(--s4); text-align: center; max-width: 42ch; }
.embed-dienst {
  margin: 0 0 4px; font-family: var(--font-ui); font-weight: 600; color: var(--text-primary);
}
.embed-uitleg { margin: 0 0 var(--s3); font-size: .88rem; line-height: 1.5; color: var(--text-muted); }
.prose .embed-slot p { margin-bottom: 0; }
.prose .embed-uitleg { margin-bottom: var(--s3); }