/* ==========================================================================
   novocoatings.com · huisstijl
   Zakelijk en industrieel: donkere header en paginakoppen, productfoto's,
   rustige maatvoering, duidelijke knoppen. Zie STYLEGUIDE.md.
   ========================================================================== */

/* ---------- Fonts (self-hosted, latin) ---------- */
@font-face { font-family: 'Barlow'; font-weight: 500; font-display: swap; src: url('/assets/fonts/Barlow-500.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 600; font-display: swap; src: url('/assets/fonts/Barlow-600.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 700; font-display: swap; src: url('/assets/fonts/Barlow-700.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 400; font-display: swap; src: url('/assets/fonts/IBMPlexSans-400.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 500; font-display: swap; src: url('/assets/fonts/IBMPlexSans-500.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 600; font-display: swap; src: url('/assets/fonts/IBMPlexSans-600.woff2') format('woff2'); }

/* ---------- Tokens ---------- */
:root {
  --ink: #0E1720;
  --staal-900: #16222D;
  --staal-800: #1F2E3B;
  --staal-700: #2E3E4C;
  --staal-500: #5A6B78;
  --staal-400: #7D8C98;
  --staal-300: #B3B8BE;
  --staal-200: #D7DCE1;
  --staal-100: #EEF1F4;
  --staal-50: #F6F8FA;
  --wit: #FFFFFF;
  --blauw-300: #5CC3EE;
  --blauw-500: #009FE3;
  --blauw-700: #0077B3;
  --blauw-800: #005F8F;

  --font-kop: 'Barlow', 'Helvetica Neue', Arial, sans-serif;
  --font-tekst: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;

  --maat-h1: clamp(2.3rem, 1.4rem + 2.4vw, 3.5rem);
  --maat-h1-pagina: clamp(2rem, 1.3rem + 1.9vw, 2.9rem);
  --maat-h2: clamp(1.65rem, 1.3rem + 1.1vw, 2.3rem);
  --maat-h3: 1.25rem;
  --maat-tekst: 1.0625rem;
  --maat-klein: 0.9375rem;

  --container: 1240px;
  --goot: clamp(16px, 4vw, 40px);
  --sectie: clamp(3.5rem, 2.5rem + 4vw, 6rem);
  --lijn: 1px solid var(--staal-200);
  --lijn-donker: 1px solid rgba(255, 255, 255, 0.1);
  --overgang: 180ms ease;
  --schaduw: 0 24px 48px -28px rgba(14, 23, 32, 0.4), 0 6px 18px -10px rgba(14, 23, 32, 0.2);
  --schaduw-zacht: 0 18px 40px -28px rgba(14, 23, 32, 0.35);
  --header-hoogte: 76px;
  --topbalk-hoogte: 34px;
  /* Volledige hoogte van de sticky header: topbalk + hoofdbalk + twee randen van 1 px */
  --header-totaal: calc(var(--topbalk-hoogte) + var(--header-hoogte) + 2px);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-totaal) + 1rem); }
body { margin: 0; font-family: var(--font-tekst); font-size: var(--maat-tekst); line-height: 1.6; color: var(--staal-700); background: var(--wit); -webkit-font-smoothing: antialiased; overflow-wrap: break-word; }
img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 { font-family: var(--font-kop); color: var(--ink); line-height: 1.1; margin: 0 0 0.5em; letter-spacing: -0.015em; }
h1 { font-size: var(--maat-h1-pagina); font-weight: 700; }
h2 { font-size: var(--maat-h2); font-weight: 700; }
h3 { font-size: var(--maat-h3); font-weight: 600; line-height: 1.25; letter-spacing: -0.005em; }
@media (max-width: 400px) { h1, h2, h3 { hyphens: auto; hyphenate-limit-chars: 10 4 4; } }
p { margin: 0 0 1em; }
a { color: var(--blauw-700); text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; transition: color var(--overgang); }
a:hover { color: var(--blauw-800); }
ul, ol { margin: 0; padding: 0; }
dl, dd, dt, address, figure { margin: 0; }
address { font-style: normal; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--blauw-700); outline-offset: 3px; }
.site-header :focus-visible, .kruimelpad :focus-visible, .sectie--donker :focus-visible, .hero :focus-visible, .paginakop :focus-visible, .cta :focus-visible, .specblok :focus-visible, .contact__info :focus-visible, .site-footer :focus-visible { outline-color: var(--blauw-300); }
em { font-style: normal; color: var(--blauw-500); }
strong { font-weight: 600; color: var(--ink); }
hr { border: 0; border-top: var(--lijn); margin: 2rem 0; }
::selection { background: var(--blauw-500); color: var(--wit); }
.icoon { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Beweging ---------- */
@keyframes kenburns { from { transform: scale(1.06); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--goot); }
.sectie { position: relative; padding-block: var(--sectie); }
.sectie--licht { background: var(--staal-50); }
.sectie--donker { background: var(--ink); color: var(--staal-200); }
.sectie--donker h2, .sectie--donker h3 { color: var(--wit); }
.sectie--donker a { color: var(--blauw-300); }
.sectie--donker strong { color: var(--wit); }
.sectie--donker .label { color: var(--blauw-300); }
.sectie__kop { max-width: 46rem; margin-bottom: clamp(2rem, 3vw, 3rem); }
.sectie__kop h2 { margin-bottom: 0.4em; }
.sectie__intro { font-size: 1.125rem; line-height: 1.55; color: var(--staal-500); margin: 0; }
.sectie--donker .sectie__intro { color: var(--staal-300); }
.sectie__knop { margin: 2.25rem 0 0; }
.tekst__smal { max-width: 52rem; }
.lead { font-size: clamp(1.1rem, 1rem + 0.3vw, 1.2rem); line-height: 1.55; color: var(--staal-500); max-width: 36em; }

/* Bovenregel (eyebrow): klein, kapitaal, blauw */
.label { display: block; margin: 0 0 0.9rem; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blauw-700); }

/* ---------- Knoppen ---------- */
.knop { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 0.6em; padding: 0.85em 1.35em; background: var(--blauw-700); color: var(--wit); font-weight: 600; font-size: 0.95rem; line-height: 1.2; text-decoration: none; border: 1px solid var(--blauw-700); overflow: hidden; transition: color var(--overgang), border-color var(--overgang), box-shadow var(--overgang); white-space: nowrap; }
.knop::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--ink); transform: translateX(-101%); transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1); }
.knop:hover { color: var(--wit); border-color: var(--ink); box-shadow: 0 10px 20px -12px rgba(14,23,32,0.5); }
.knop:hover::before { transform: translateX(0); }
.knop__pijl { transition: transform var(--overgang); }
.knop:hover .knop__pijl { transform: translateX(3px); }
.knop--secundair { background: transparent; color: var(--ink); border-color: var(--staal-300); }
.knop--secundair:hover { color: var(--wit); border-color: var(--ink); }
.sectie--donker .knop--secundair, .hero .knop--secundair, .cta .knop--secundair, .paginakop .knop--secundair { color: var(--wit); border-color: rgba(255,255,255,0.45); }
.sectie--donker .knop--secundair::before, .hero .knop--secundair::before, .cta .knop--secundair::before, .paginakop .knop--secundair::before { background: var(--wit); }
.sectie--donker .knop--secundair:hover, .hero .knop--secundair:hover, .cta .knop--secundair:hover, .paginakop .knop--secundair:hover { color: var(--ink); border-color: var(--wit); }
.sectie--donker .knop:not(.knop--secundair)::before, .hero .knop:not(.knop--secundair)::before, .cta .knop:not(.knop--secundair)::before, .paginakop .knop:not(.knop--secundair)::before, .specblok .knop::before, .contact__info .knop:not(.knop--secundair)::before { background: var(--blauw-500); }
.sectie--donker .knop:not(.knop--secundair):hover, .hero .knop:not(.knop--secundair):hover, .cta .knop:not(.knop--secundair):hover, .paginakop .knop:not(.knop--secundair):hover, .specblok .knop:hover, .contact__info .knop:not(.knop--secundair):hover { border-color: var(--blauw-500); }
/* Op donker schuift merkblauw onder de knop; wit op blauw-500 haalt 4,5:1 niet, ink wel (6,08:1). */
.sectie--donker .knop:not(.knop--secundair):hover, .hero .knop:not(.knop--secundair):hover, .cta .knop:not(.knop--secundair):hover, .paginakop .knop:not(.knop--secundair):hover, .specblok .knop:hover, .contact__info .knop:not(.knop--secundair):hover { color: var(--ink); }

/* ---------- Skip-link ---------- */
.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 100; padding: 0.75rem 1rem; background: var(--blauw-700); color: var(--wit); font-size: 0.9rem; }
.skip-link:focus { top: 1rem; }

/* ---------- Header (donker) ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--ink); color: var(--wit); border-bottom: var(--lijn-donker); transition: box-shadow var(--overgang); }
.site-header--gescrold { box-shadow: 0 10px 28px -16px rgba(0,0,0,0.6); }
.topbalk { background: var(--staal-900); color: var(--staal-300); font-size: 0.82rem; border-bottom: var(--lijn-donker); }
.topbalk__grid { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: var(--topbalk-hoogte); }
.topbalk__slogan { margin: 0; min-width: 0; color: var(--staal-300); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbalk__scheiding { color: var(--staal-500); margin-inline: 0.35em; }
.topbalk__rechts { display: flex; flex: none; align-items: center; gap: 1.5rem; }
.topbalk__link { color: var(--staal-200); text-decoration: none; display: inline-flex; align-items: center; gap: 0.45rem; white-space: nowrap; }
.topbalk__link .icoon { color: var(--blauw-300); font-size: 0.95rem; }
.topbalk__link:hover { color: var(--wit); }
.talen ul { list-style: none; display: flex; gap: 0.15rem; }
.talen li { display: flex; }
.taal { display: inline-flex; align-items: center; height: 1.6rem; padding-inline: 0.5rem; text-decoration: none; color: var(--staal-300); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; }
.taal--actief { color: var(--wit); background: var(--blauw-700); }
.taal--uit { color: var(--staal-500); cursor: default; }
a.taal:hover { color: var(--wit); }
.hoofdbalk { display: flex; align-items: center; gap: 1.5rem; min-height: var(--header-hoogte); }
.logo { flex: none; margin-right: auto; }
.logo img { width: 136px; height: 60px; }
.nav { display: flex; align-items: center; }
.nav__lijst { list-style: none; display: flex; gap: 0.1rem; }
.nav__item { position: relative; display: flex; align-items: center; }
.nav__item > a { display: inline-flex; align-items: center; height: var(--header-hoogte); padding: 0 0.9rem; font-family: var(--font-kop); font-weight: 600; font-size: 1rem; letter-spacing: 0.01em; color: var(--staal-200); text-decoration: none; border-bottom: 3px solid transparent; border-top: 3px solid transparent; transition: border-color var(--overgang), color var(--overgang); }
.nav__item > a:hover, .nav__item--actief > a { border-bottom-color: var(--blauw-500); color: var(--wit); }
.nav__toggle { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; margin-left: -0.7rem; padding: 0; background: none; border: 0; color: var(--staal-400); }
.nav__toggle svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform var(--overgang); }
.nav__item--open .nav__toggle svg { transform: rotate(180deg); }
.nav__sub { list-style: none; position: absolute; top: 100%; left: 0; min-width: 19rem; background: var(--staal-900); border: var(--lijn-donker); border-top: 3px solid var(--blauw-500); box-shadow: 0 20px 40px -20px rgba(0,0,0,0.6); padding: 0.4rem 0; display: none; z-index: 60; }
.nav__item--sub:hover .nav__sub, .nav__item--sub:focus-within .nav__sub, .nav__item--open .nav__sub { display: block; }
.nav__sub a { display: block; padding: 0.6rem 1.1rem; color: var(--staal-200); text-decoration: none; font-size: 0.95rem; transition: background var(--overgang), color var(--overgang); }
.nav__sub a:hover, .nav__sub a[aria-current] { background: var(--staal-800); color: var(--wit); }
.nav__sub-overzicht a { font-weight: 600; color: var(--blauw-300); border-bottom: var(--lijn-donker); margin-bottom: 0.3rem; }
.nav__mobiel-extra { display: none; }
.hoofdbalk__cta { flex: none; }
.menuknop { display: none; align-items: center; gap: 0.6rem; background: none; border: 1px solid rgba(255,255,255,0.3); padding: 0.55rem 0.8rem; font-size: 0.85rem; font-weight: 600; color: var(--wit); }
.menuknop__lijnen { position: relative; width: 18px; height: 12px; }
.menuknop__lijnen::before, .menuknop__lijnen::after { content: ''; position: absolute; left: 0; width: 18px; height: 2px; background: var(--wit); transition: transform var(--overgang), top var(--overgang); }
.menuknop__lijnen::before { top: 0; box-shadow: 0 5px 0 var(--wit); }
.menuknop__lijnen::after { top: 10px; }
.menu-open .menuknop__lijnen::before { top: 5px; transform: rotate(45deg); box-shadow: none; }
.menu-open .menuknop__lijnen::after { top: 5px; transform: rotate(-45deg); }

@media (max-width: 1180px) {
  .nav__item > a { padding: 0 0.6rem; font-size: 0.95rem; }
  .topbalk__slogan { display: none; }
  .topbalk__grid { justify-content: flex-end; }
}
@media (max-width: 1239px) {
  /* Topbalk verborgen: de taalschakelaar staat ook in het menupaneel. Header is dan alleen de hoofdbalk plus 1 px rand. */
  :root { --header-hoogte: 68px; --header-totaal: calc(var(--header-hoogte) + 1px); }
  .topbalk { display: none; }
  .hoofdbalk__cta { display: none; }
  .menuknop { display: inline-flex; }
  .nav { display: none; position: fixed; inset: var(--header-totaal) 0 0; background: var(--ink); overflow-y: auto; padding: 0.5rem var(--goot) 2rem; align-items: stretch; flex-direction: column; }
  .menu-open .nav { display: flex; }
  .menu-open { overflow: hidden; }
  .nav__lijst { flex-direction: column; gap: 0; }
  .nav__item { flex-direction: column; align-items: stretch; border-bottom: var(--lijn-donker); }
  .nav__item > a { height: auto; padding: 1rem 0; font-size: 1.25rem; border: 0; color: var(--wit); }
  .nav__item--actief > a { color: var(--blauw-300); }
  .nav__toggle { display: none; }
  .nav__sub { display: block; position: static; min-width: 0; border: 0; box-shadow: none; padding: 0 0 0.8rem 0; background: transparent; }
  .nav__sub a { padding: 0.45rem 0 0.45rem 1.1rem; border-left: 2px solid var(--staal-700); color: var(--staal-300); }
  .nav__sub a:hover { background: transparent; }
  .nav__sub-overzicht { display: none; }
  .nav__mobiel-extra { display: flex; flex-direction: column; gap: 0.9rem; align-items: flex-start; padding-top: 1.5rem; }
  .nav__mobiel-extra a:not(.knop) { color: var(--staal-200); text-decoration: none; font-size: 0.95rem; display: inline-flex; align-items: center; gap: 0.5rem; }
  .nav__mobiel-extra .talen ul { border: var(--lijn-donker); }
  .nav__mobiel-extra .taal { height: 2.2rem; padding-inline: 0.9rem; }
}

/* ---------- Kruimelpad ---------- */
.kruimelpad { background: var(--ink); border-bottom: var(--lijn-donker); }
.kruimelpad ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.3rem 0; min-height: 42px; align-items: center; font-size: 0.85rem; color: var(--staal-400); }
.kruimelpad li + li::before { content: '/'; content: '/' / ''; margin: 0 0.55rem; color: var(--staal-500); }
.kruimelpad a { color: var(--staal-400); text-decoration: none; }
.kruimelpad a:hover { color: var(--blauw-300); }
.kruimelpad [aria-current] { color: var(--staal-200); }

/* ---------- Hero (home) ---------- */
.hero { position: relative; display: flex; align-items: center; min-height: calc(90vh - var(--header-hoogte) - 34px); background: var(--ink); color: var(--staal-200); overflow: hidden; isolation: isolate; }
.hero__beeld { position: absolute; inset: 0; z-index: 0; }
.hero__beeld picture, .hero__beeld img { width: 100%; height: 100%; object-fit: cover; object-position: 72% 28%; }
.hero__beeld img { animation: kenburns 20s ease-out both; transform-origin: 72% 28%; }
.hero__beeld::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14,23,32,0.96) 0%, rgba(14,23,32,0.88) 36%, rgba(14,23,32,0.4) 64%, rgba(14,23,32,0.45) 100%), linear-gradient(180deg, rgba(14,23,32,0.3) 0%, transparent 25%, transparent 65%, var(--ink) 100%); }
.hero__inhoud { position: relative; z-index: 2; padding-top: clamp(2rem, 4vw, 4rem); padding-bottom: clamp(7rem, 10vw, 9.5rem); }
.hero .label { color: var(--blauw-300); }
.hero h1 { font-size: var(--maat-h1); color: var(--wit); max-width: 15em; margin-bottom: 0.5em; line-height: 1.06; letter-spacing: -0.02em; }
.hero__lead { font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem); line-height: 1.55; max-width: 34em; color: var(--staal-200); margin-bottom: 1.9rem; }
.hero__knoppen { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.hero__sectoren { margin: 2rem 0 0; font-size: 0.9rem; color: var(--staal-300); }
.hero__sectoren { display: flex; flex-wrap: wrap; gap: 0.2em 0.35em; }
.hero__sectoren span { color: var(--staal-400); }
.hero__sectoren ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.2em 0; }
.hero__sectoren li + li::before { content: '·'; margin: 0 0.45em; color: var(--staal-500); }
.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; }
.formulier__uitleg { font-size: 0.875rem; color: var(--staal-500); margin: 0 0 1.25rem; }

/* Kengetallenkaart die over de onderrand van de hero valt */
.hero__kaart { position: relative; z-index: 3; margin-top: calc(-1 * clamp(4.5rem, 6vw, 5.5rem)); margin-bottom: clamp(0.5rem, 1.5vw, 1.5rem); }
.kengetallen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--wit); border-top: 3px solid var(--blauw-500); box-shadow: var(--schaduw); }
.kengetal { padding: 1.4rem 1.5rem 1.5rem; }
.kengetal + .kengetal { border-left: var(--lijn); }
.kengetal dt { font-size: 0.85rem; color: var(--staal-500); margin-bottom: 0.35rem; hyphens: auto; }
.kengetal dd { font-family: var(--font-kop); font-weight: 700; font-size: clamp(1.6rem, 1.3rem + 0.9vw, 2.25rem); color: var(--ink); line-height: 1; letter-spacing: -0.02em; }
/* inline-block geeft een afbreekpunt vóór de eenheid, zodat '100%REACH' op 320 px niet uit de cel loopt */
.kengetal dd small { display: inline-block; font-size: 0.55em; font-weight: 500; color: var(--staal-500); margin-left: 0.2em; letter-spacing: 0; }
.kengetallen--los { box-shadow: none; border: var(--lijn); border-top: 3px solid var(--blauw-500); }
@media (max-width: 1100px) {
  .hero__beeld { position: relative; inset: auto; aspect-ratio: 16 / 9; }
  .hero__beeld::after { background: linear-gradient(180deg, rgba(14,23,32,0.15) 40%, var(--ink) 100%); }
  .hero__beeld img { animation: none; }
  .hero { min-height: 0; display: block; }
  .hero__inhoud { padding-top: 1rem; padding-bottom: clamp(5rem, 8vw, 6.5rem); }
  .hero__kaart { margin-top: -3.75rem; }
  .kengetallen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kengetal:nth-child(odd) { border-left: 0; }
  .kengetal:nth-child(n + 3) { border-top: var(--lijn); }
}

/* ---------- Paginakop (subpagina's) ---------- */
.paginakop { position: relative; background: var(--ink); color: var(--staal-200); overflow: hidden; isolation: isolate; padding-block: clamp(3rem, 2rem + 3.5vw, 5.5rem); }
.paginakop__grid { position: relative; z-index: 2; display: grid; gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.paginakop--met-beeld .paginakop__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.paginakop .label { color: var(--blauw-300); }
.paginakop h1 { color: var(--wit); max-width: 15em; }
.paginakop .lead { color: var(--staal-200); }
.paginakop__knoppen { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.6rem; }
.paginakop__beeld { position: absolute; inset: 0 0 0 54%; z-index: 1; }
.paginakop__beeld picture, .paginakop__beeld img { width: 100%; height: 100%; object-fit: cover; }
.paginakop__beeld::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--ink) 0%, rgba(14,23,32,0.6) 25%, rgba(14,23,32,0.12) 70%, rgba(14,23,32,0.3) 100%), linear-gradient(180deg, rgba(14,23,32,0.15), transparent 30%, transparent 70%, rgba(14,23,32,0.55)); }
@media (max-width: 860px) {
  .paginakop--met-beeld .paginakop__grid { grid-template-columns: minmax(0, 1fr); }
  .paginakop__beeld { position: relative; inset: auto; aspect-ratio: 16 / 9; margin-top: 0.5rem; }
  .paginakop__beeld::after { background: linear-gradient(180deg, transparent 55%, rgba(14,23,32,0.6)); }
}

/* ---------- Tekst / prose ---------- */
.tekst__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(2rem, 4vw, 4.5rem); align-items: start; }
.prose { max-width: 42em; }
.prose--breed { max-width: none; }
.prose > :first-child { margin-top: 0; }
.prose h3 { margin-top: 1.8em; }
.prose h2 { margin-top: 1.5em; }
.prose ul, .prose ol { padding-left: 1.25em; margin: 0 0 1.25em; }
.prose li { margin-bottom: 0.4em; }
.prose li::marker { color: var(--blauw-700); font-weight: 600; }
.prose ul.vink { list-style: none; padding-left: 0; }
.prose ul.vink li { position: relative; padding-left: 1.75rem; }
.prose ul.vink li::before { content: ''; position: absolute; left: 0.1rem; top: 0.55em; width: 0.85rem; height: 0.42rem; border-left: 2px solid var(--blauw-500); border-bottom: 2px solid var(--blauw-500); transform: rotate(-45deg); }
.prose table { width: 100%; border-collapse: collapse; margin: 0 0 1.5em; font-size: var(--maat-klein); display: block; overflow-x: auto; }
@media (min-width: 861px) { .prose table { display: table; } }
.prose th, .prose td { text-align: left; padding: 0.75em 0.9em; border-bottom: var(--lijn); vertical-align: top; }
.prose thead th { font-size: 0.85rem; font-weight: 600; color: var(--wit); background: var(--ink); }
.prose th[scope="row"] { color: var(--ink); font-weight: 600; background: var(--staal-50); }
.prose--breed table td, .prose--breed table th { padding: 0.9em 1em; }
.prose blockquote { margin: 1.5em 0; padding: 0 0 0 1.25em; border-left: 3px solid var(--blauw-500); color: var(--ink); font-size: 1.1em; }
.prose .placeholder { background: #FFF6D6; border: 1px dashed #D9A400; padding: 0.75em 1em; font-size: var(--maat-klein); }
.tekst__knop { margin-top: 2rem; }
.tekst__beeld { position: sticky; top: calc(var(--header-totaal) + 1.5rem); }

/* Kerngegevens (aside) */
.specblok { position: sticky; top: calc(var(--header-totaal) + 1.5rem); background: var(--ink); color: var(--staal-200); border-top: 3px solid var(--blauw-500); padding: 1.6rem; box-shadow: var(--schaduw-zacht); }
.specblok h3 { font-family: var(--font-kop); font-size: 1.1rem; font-weight: 600; color: var(--wit); margin-bottom: 0.75rem; }
.specblok dl > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 1rem; padding: 0.65rem 0; border-top: var(--lijn-donker); font-size: var(--maat-klein); }
.specblok dt { color: var(--staal-400); }
.specblok dd { color: var(--wit); font-weight: 500; }
.specblok__knop { margin-top: 1.25rem; width: 100%; justify-content: center; }
@media (max-width: 860px) { .tekst__grid { grid-template-columns: minmax(0, 1fr); } .specblok, .tekst__beeld { position: static; } }
/* Smalle schermen: label boven waarde, zodat lange labels en e-mailadressen niet hoeven af te breken */
@media (max-width: 400px) { .specblok dl > div { grid-template-columns: minmax(0, 1fr); gap: 0.1rem 0; } }

/* ---------- Kaarten ---------- */
.kaarten__grid { display: grid; gap: 1.5rem; }
.kaarten__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kaarten__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kaarten__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kaart { position: relative; display: flex; flex-direction: column; background: var(--wit); border: var(--lijn); text-decoration: none; color: inherit; overflow: hidden; transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.25s, border-color 0.25s; }
.kaart::after { content: ''; position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--blauw-500); transition: width 0.3s cubic-bezier(0.2, 0.7, 0.2, 1); }
.kaart--link:hover { transform: translateY(-4px); box-shadow: var(--schaduw); border-color: transparent; }
.kaart--link:hover::after { width: 100%; }
.kaart__beeld { overflow: hidden; }
.kaart__beeld img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.kaart--link:hover .kaart__beeld img { transform: scale(1.04); }
.kaart__inhoud { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; }
.kaart h3 { margin-bottom: 0.45em; }
.kaart p { color: var(--staal-500); font-size: var(--maat-klein); margin-bottom: 1.25rem; }
.kaart__link { margin-top: auto; display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 600; font-size: 0.95rem; color: var(--blauw-700); }
.kaart--link:hover .kaart__link { color: var(--ink); }
.sectie--donker .kaart { background: var(--staal-900); border-color: var(--staal-700); }
.sectie--donker .kaart p { color: var(--staal-300); }
.sectie--donker .kaart h3 { color: var(--wit); }
/* Foto-kaarten: beeldvullend met tekst over een donker verloop */
.kaarten__grid--beeld { gap: 1.25rem; }
.kaart--beeld { aspect-ratio: 4 / 5; background: var(--ink); border: 0; color: var(--wit); }
.kaart--beeld .kaart__beeld { position: absolute; inset: 0; }
.kaart--beeld .kaart__beeld img { height: 100%; aspect-ratio: auto; }
.kaart--beeld .kaart__beeld::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,23,32,0.05) 30%, rgba(14,23,32,0.55) 60%, rgba(14,23,32,0.95) 100%); }
.kaart--beeld .kaart__inhoud { position: absolute; inset: auto 0 0 0; padding: 1.5rem 1.4rem; z-index: 1; }
.kaart--beeld h3 { color: var(--wit); font-size: 1.3rem; margin-bottom: 0.35em; }
.kaart--beeld p { color: var(--staal-200); margin-bottom: 0.9rem; max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.3s; }
.kaart--beeld:hover p, .kaart--beeld:focus-visible p { max-height: 8rem; opacity: 1; }
.kaart--beeld .kaart__link { color: var(--blauw-300); }
.kaart--beeld:hover .kaart__link { color: var(--wit); }
.kaart--beeld:hover { transform: translateY(-4px); box-shadow: var(--schaduw); }
@media (max-width: 1000px) { .kaarten__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .kaarten__grid--3 { grid-template-columns: 1fr; } .kaart--beeld p { max-height: 8rem; opacity: 1; } }
@media (max-width: 560px) { .kaarten__grid--2, .kaarten__grid--4 { grid-template-columns: 1fr; } .kaart--beeld { aspect-ratio: 4 / 3; } }
@media (hover: none) { .kaart--beeld p { max-height: 8rem; opacity: 1; } }

/* ---------- Proces (genummerde stappen) ---------- */
.proces__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 4vw, 4.5rem); align-items: start; }
.stappen { list-style: none; max-width: 44rem; }
.stap { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 1.25rem; padding: 1.5rem 0; border-top: var(--lijn); }
.stap:last-child { border-bottom: var(--lijn); }
.stap__nr { display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border: 2px solid var(--blauw-500); color: var(--blauw-700); font-family: var(--font-kop); font-size: 1.1rem; font-weight: 700; }
.stap h3 { margin-bottom: 0.3em; }
.stap p { margin: 0; color: var(--staal-500); }
.sectie--donker .stap { border-color: var(--staal-700); }
.sectie--donker .stap p { color: var(--staal-300); }
.sectie--donker .stap__nr { color: var(--blauw-300); }
@media (max-width: 860px) { .proces__grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Kennisbankartikel ---------- */
.artikel__grid { display: grid; grid-template-columns: minmax(0, 3.5fr) minmax(0, 8fr); gap: clamp(2rem, 4vw, 4.5rem); align-items: start; }
.artikel__zij { position: sticky; top: calc(var(--header-hoogte) + 1.5rem); }
.toc { border-top: 2px solid var(--ink); padding-top: 1rem; margin-bottom: 1.5rem; }
.toc__kop { font-family: var(--font-kop); font-size: 1.05rem; font-weight: 600; margin-bottom: 0.6rem; }
.toc ol { list-style: none; counter-reset: toc; }
.toc li { counter-increment: toc; padding: 0.35rem 0; border-top: var(--lijn); font-size: var(--maat-klein); display: flex; gap: 0.6rem; }
.toc li::before { content: counter(toc, decimal-leading-zero); color: var(--blauw-700); font-weight: 600; flex: none; }
.toc a { color: var(--staal-700); text-decoration: none; }
.toc a:hover { color: var(--blauw-700); }
.artikel__meta > div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.4rem 0; border-top: var(--lijn); font-size: var(--maat-klein); }
.artikel__meta dt { color: var(--staal-500); }
.artikel__meta dd { color: var(--ink); font-weight: 500; }
.artikel__tekst { max-width: 44em; }
.artikel__tekst > h2:first-child { margin-top: 0; }
.artikel__tekst h2 { scroll-margin-top: calc(var(--header-hoogte) + 1rem); }
.artikel__bron { font-size: 0.85rem; color: var(--staal-500); border-top: var(--lijn); padding-top: 1rem; margin-top: 2rem; }
.kaart__meta { font-size: 0.8rem; color: var(--blauw-700); font-weight: 500; margin-bottom: 0.5rem; }
@media (max-width: 860px) { .artikel__grid { grid-template-columns: 1fr; } .artikel__zij { position: static; } }

/* ---------- Specs ---------- */
.specs__lijst { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 0 2.5rem; border-top: 2px solid var(--ink); }
.spec { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 1rem; padding: 0.9rem 0; border-bottom: var(--lijn); }
.spec dt { font-size: 0.9rem; color: var(--staal-500); padding-top: 0.1rem; }
.spec dd { color: var(--ink); font-weight: 500; hyphens: auto; }
.specs__voetnoot { margin-top: 1.25rem; font-size: 0.875rem; color: var(--staal-500); }

/* ---------- Split ---------- */
.split__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2.5rem, 5vw, 5rem); align-items: center; }
.split--beeld-links .split__beeld { order: -1; }
.split__beeld img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (max-width: 860px) { .split__grid { grid-template-columns: minmax(0, 1fr); } .split--beeld-links .split__beeld { order: 0; } }

/* ---------- Figuren en galerij ---------- */
.figuur__kader picture { overflow: hidden; display: block; }
.figuur__kader img { transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.figuur:hover .figuur__kader img { transform: scale(1.03); }
.figuur figcaption { padding: 0.75rem 0 0; font-size: 0.85rem; line-height: 1.45; color: var(--staal-500); }
.figuur figcaption strong { display: block; font-size: 0.875rem; font-weight: 600; color: var(--ink); margin-bottom: 0.1rem; }
.sectie--donker .figuur figcaption { color: var(--staal-300); }
.sectie--donker .figuur figcaption strong { color: var(--wit); }
.galerij__grid { display: grid; gap: 1.5rem; }
.galerij__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.galerij__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.galerij__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.galerij .figuur img { aspect-ratio: 4 / 3; object-fit: cover; }
@media (max-width: 900px) { .galerij__grid--3, .galerij__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .galerij__grid--2, .galerij__grid--3, .galerij__grid--4 { grid-template-columns: 1fr; } }

/* ---------- Voor/na-schuifbalk ---------- */
.vergelijk__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 4vw, 4.5rem); align-items: center; }
.vergelijk__grid--alleen { grid-template-columns: 1fr; }
.schuif { position: relative; aspect-ratio: 2 / 1; overflow: hidden; background: var(--staal-100); user-select: none; -webkit-user-select: none; --pos: 50%; box-shadow: var(--schaduw-zacht); touch-action: pan-y; }
.schuif picture, .schuif img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.schuif__na { clip-path: inset(0 0 0 var(--pos)); }
.schuif__lijn { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; background: var(--wit); transform: translateX(-1px); box-shadow: 0 0 0 1px rgba(14,23,32,0.25); pointer-events: none; z-index: 1; }
.schuif__greep { position: absolute; top: 50%; left: var(--pos); transform: translate(-50%, -50%); width: 44px; height: 44px; border-radius: 50%; background: var(--wit); color: var(--ink); display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px -4px rgba(14,23,32,0.5); pointer-events: none; z-index: 2; }
.schuif__greep svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.schuif__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; z-index: 3; -webkit-appearance: none; appearance: none; }
/* Focusring op de foto: ink tegen de witte greep (18:1) met witte buitenring, zichtbaar op elke foto */
.schuif__range:focus-visible ~ .schuif__greep { outline: 3px solid var(--ink); outline-offset: 0; box-shadow: 0 0 0 6px var(--wit), 0 6px 16px -4px rgba(14,23,32,0.5); }
.schuif__tag { position: absolute; top: 0.75rem; z-index: 1; padding: 0.3rem 0.65rem; background: rgba(14,23,32,0.85); color: var(--wit); font-size: 0.8rem; font-weight: 600; pointer-events: none; }
.schuif__tag--voor { left: 0.75rem; }
.schuif__tag--na { right: 0.75rem; background: var(--blauw-700); }
.schuif__hint { font-size: 0.85rem; color: var(--staal-500); margin: 0.8rem 0 0; }
.schuif__bijschrift { font-size: 0.85rem; color: var(--staal-500); margin: 0.3rem 0 0; }
.vergelijk__tekst .prose { max-width: none; }
.vergelijk__tekst .tekst__knop { margin-top: 1.5rem; }
@media (max-width: 860px) { .vergelijk__grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- USP's ---------- */
.usps.sectie--donker { overflow: hidden; }
/* Tussenstap: kleinste bestaande variant (158 KB i.p.v. 1013 KB). Definitief: aparte lichte textuur uit scripts/images.py. */
.usps.sectie--donker::after { content: ''; position: absolute; inset: 0; z-index: 0; background: url('/assets/images/lamellen-3-480.webp') center / cover no-repeat; opacity: 0.12; filter: grayscale(1); pointer-events: none; }
.usps.sectie--donker .container { position: relative; z-index: 1; }
.usps__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.usp { padding: 1.75rem 1.5rem 1.9rem; background: var(--wit); border: var(--lijn); }
.usp__icoon { display: block; width: 2.1rem; height: 2.1rem; margin-bottom: 1.1rem; color: var(--blauw-500); }
.usp__icoon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.usp h3 { font-size: 1.15rem; margin-bottom: 0.4em; }
.usp p { margin: 0; font-size: var(--maat-klein); color: var(--staal-500); }
.sectie--donker .usp { background: var(--staal-900); border-color: var(--staal-700); }
.sectie--donker .usp__icoon { color: var(--blauw-300); }
.sectie--donker .usp p { color: var(--staal-300); }
@media (max-width: 1000px) { .usps__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .usps__grid { grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */
.faq__lijst { border-top: 2px solid var(--ink); }
.faq__item { border-bottom: var(--lijn); }
.faq__item summary { list-style: none; cursor: pointer; padding: 1.1rem 3rem 1.1rem 0; font-family: var(--font-kop); font-weight: 600; font-size: 1.15rem; color: var(--ink); position: relative; transition: color var(--overgang); }
.faq__item summary:hover { color: var(--blauw-700); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: '+'; content: '+' / ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1.9rem; height: 1.9rem; display: flex; align-items: center; justify-content: center; border: 1px solid var(--staal-300); font-weight: 400; color: var(--blauw-700); font-size: 1.2rem; transition: background var(--overgang), color var(--overgang), border-color var(--overgang); }
.faq__item[open] summary::after { content: '−'; content: '−' / ''; background: var(--ink); color: var(--wit); border-color: var(--ink); }
.faq__item .prose { padding: 0 0 1.25rem; }
.sectie--donker .faq__lijst { border-top-color: var(--wit); }
.sectie--donker .faq__item { border-color: var(--staal-700); }
.sectie--donker .faq__item summary { color: var(--wit); }

/* ---------- CTA ---------- */
.cta { position: relative; background: var(--ink); color: var(--staal-200); overflow: hidden; isolation: isolate; padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem); }
.cta__beeld { position: absolute; inset: 0 0 0 55%; z-index: 0; }
.cta__beeld picture, .cta__beeld img { width: 100%; height: 100%; object-fit: cover; }
.cta__beeld::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--ink) 0%, rgba(14,23,32,0.7) 30%, rgba(14,23,32,0.3) 100%); }
.cta__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2rem 4rem; align-items: center; }
.cta h2 { color: var(--wit); margin-bottom: 0.4em; }
.cta p { max-width: 34em; font-size: 1.05rem; }
.cta .label { color: var(--blauw-300); }
.cta__knoppen { display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; }
.cta__contact { font-size: 0.95rem; margin: 0.5rem 0 0; }
.cta__contact a { color: var(--wit); text-decoration: none; }
.cta__contact a:hover { color: var(--blauw-300); }
@media (max-width: 860px) { .cta__grid { grid-template-columns: minmax(0, 1fr); } .cta__beeld { inset: 0; opacity: 0.3; } }

/* ---------- Partners ---------- */
.partners__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.partner { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 1.5rem; align-items: center; padding: 1.5rem; border: var(--lijn); background: var(--wit); }
.partner--zonder-beeld { grid-template-columns: minmax(0, 1fr); border-left: 3px solid var(--blauw-500); }
.partner picture img { width: 100%; }
.partner h3 { margin-bottom: 0.3em; }
.partner p { font-size: var(--maat-klein); color: var(--staal-500); margin-bottom: 0.4em; }
.partner a { font-size: 0.9rem; }
@media (max-width: 760px) { .partners__grid { grid-template-columns: 1fr; } }
@media (max-width: 460px) { .partner { grid-template-columns: 1fr; } .partner picture { max-width: 6.5rem; } }

/* ---------- Lijst (vacatures e.d.) ---------- */
.lijst__items { list-style: none; border-top: 2px solid var(--ink); }
.lijstitem { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 1.5rem 0; border-bottom: var(--lijn); }
.lijstitem h3 { margin-bottom: 0.25em; font-size: 1.35rem; }
.lijstitem h3 a { color: var(--ink); text-decoration: none; }
.lijstitem h3 a:hover { color: var(--blauw-700); }
.lijstitem__meta { font-size: 0.875rem; color: var(--blauw-700); font-weight: 500; margin-bottom: 0.5em; }
.lijstitem p:last-child { margin: 0; }
.lijstitem__pijl { color: var(--blauw-700); font-size: 1.5rem; flex: none; width: 2.75rem; height: 2.75rem; display: flex; align-items: center; justify-content: center; border: 1px solid var(--staal-200); transition: background var(--overgang), color var(--overgang); }
.lijstitem:hover .lijstitem__pijl { background: var(--ink); color: var(--wit); border-color: var(--ink); }

/* ---------- Contact ---------- */
.contact__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(2rem, 4vw, 4.5rem); align-items: start; }
.formulier__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.veld { display: flex; flex-direction: column; gap: 0.4rem; }
.veld--breed { grid-column: 1 / -1; }
.veld label { font-size: 0.9rem; font-weight: 500; color: var(--staal-700); }
.verplicht { color: var(--blauw-700); }
.veld input, .veld textarea, .veld select { font: inherit; padding: 0.8rem 0.9rem; border: 1px solid var(--staal-300); background: var(--wit); color: var(--ink); border-radius: 0; width: 100%; transition: border-color var(--overgang), box-shadow var(--overgang); }
.veld input:hover, .veld textarea:hover, .veld select:hover { border-color: var(--staal-500); }
/* Effectieve ring van 2 px blauw-700 (4,9:1 op wit) plus de blauwe focusgloed uit de styleguide */
.veld input:focus-visible, .veld textarea:focus-visible, .veld select:focus-visible { outline: none; border-color: var(--blauw-700); box-shadow: 0 0 0 1px var(--blauw-700), 0 0 0 4px rgba(0,119,179,0.2); }
.veld--honing { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formulier__privacy { font-size: 0.875rem; color: var(--staal-500); margin: 1.25rem 0; }
.formulier__status { font-size: 0.9rem; margin: 1rem 0 0; min-height: 1.4em; color: var(--ink); }
.contact__info { background: var(--ink); color: var(--staal-200); border-top: 3px solid var(--blauw-500); padding: 1.75rem; box-shadow: var(--schaduw-zacht); }
.contact__info h2 { font-size: 1.4rem; color: var(--wit); }
.contact__info h3 { font-family: var(--font-kop); font-size: 1.05rem; font-weight: 600; color: var(--wit); margin: 1.5rem 0 0.6rem; }
.contact__info .adres strong { color: var(--wit); }
.contact__regel { display: flex; align-items: center; gap: 0.6rem; margin: 0.4rem 0; }
.contact__regel .icoon { color: var(--blauw-500); font-size: 1.05rem; }
.contact__regel a { color: var(--ink); text-decoration: none; }
.contact__regel a:hover { color: var(--blauw-700); }
.contact__info .contact__regel a { color: var(--wit); }
.contact__info .contact__regel a:hover { color: var(--blauw-300); }
.contact__info .contact__regel .icoon { color: var(--blauw-300); }
.contact__route { margin-top: 1rem; font-size: var(--maat-klein); color: var(--staal-300); }
.contact__info .knop { margin-top: 1.1rem; }
.contact__info .knop--secundair { color: var(--wit); border-color: rgba(255,255,255,0.45); }
.contact__info .knop--secundair::before { background: var(--wit); }
.contact__info .knop--secundair:hover { color: var(--ink); border-color: var(--wit); }
.adres { line-height: 1.5; margin-bottom: 0.9rem; }
.tijden > div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.4rem 0; border-top: var(--lijn); font-size: var(--maat-klein); }
.contact__info .tijden > div { border-color: var(--staal-700); }
.tijden dd { font-weight: 500; color: var(--ink); }
.contact__info .tijden dd { color: var(--wit); }
@media (max-width: 860px) { .contact__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .formulier__grid { grid-template-columns: 1fr; } .knop { white-space: normal; text-align: left; } }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: var(--staal-300); border-top: 3px solid var(--blauw-500); }
.footer__grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 2.5rem 2rem; padding-block: clamp(3rem, 4vw, 4.5rem); }
.footer__bedrijf img { width: 136px; height: 60px; margin-bottom: 0.9rem; }
.footer__slogan { font-size: 0.9rem; color: var(--blauw-300); margin-bottom: 1.1rem; }
.site-footer .adres strong { color: var(--wit); }
.site-footer .contact__regel a { color: var(--staal-200); }
.site-footer .contact__regel a:hover { color: var(--blauw-300); }
.site-footer .contact__regel .icoon { color: var(--blauw-300); }
.footer__kolom h2 { font-family: var(--font-kop); font-size: 1.05rem; font-weight: 600; color: var(--wit); margin-bottom: 0.9rem; }
.footer__kolom ul { list-style: none; }
.footer__kolom li { margin-bottom: 0.5rem; }
.footer__kolom a { color: var(--staal-300); text-decoration: none; font-size: var(--maat-klein); transition: color var(--overgang); }
.footer__kolom a:hover { color: var(--wit); }
.site-footer .tijden > div { border-color: var(--staal-700); }
.site-footer .tijden dd { color: var(--wit); }
.footer__cert { font-size: 0.85rem; margin-top: 1.1rem; color: var(--staal-400); }
.footer__onder { border-top: 1px solid var(--staal-700); font-size: 0.82rem; }
.footer__onder-grid { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem 2rem; padding-block: 1.1rem; }
.footer__onder p { margin: 0; }
.footer__onder a { color: var(--staal-300); }
.footer__onder a:hover { color: var(--wit); }
@media (max-width: 1000px) { .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer__bedrijf { grid-column: 1 / -1; } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 404 ---------- */
.fout .paginakop { min-height: 50vh; display: flex; align-items: center; }

/* ---------- Print ---------- */
@media print {
  .site-header, .cta, .menuknop, .skip-link, .schuif__range, .schuif__hint,
  .footer__bedrijf img, .footer__slogan, .footer__kolom, .footer__onder { display: none !important; }
  .sectie { padding-block: 1.5rem; }
  /* Donkere vlakken worden niet afgedrukt: tekst daarom op ink/staal-700. De footer blijft staan voor adres en telefoon. */
  .kruimelpad, .paginakop, .hero, .sectie--donker, .specblok, .contact__info, .kaart--beeld, .site-footer { background: none; color: var(--staal-700); box-shadow: none; }
  .paginakop h1, .hero h1, .sectie--donker h2, .sectie--donker h3, .sectie--donker strong, .specblok h3, .specblok dd, .contact__info h2, .contact__info h3, .contact__info .adres strong, .contact__info .tijden dd, .kaart--beeld h3, .site-footer .adres strong { color: var(--ink); }
  .hero__lead, .paginakop .lead, .hero__sectoren, .sectie--donker .sectie__intro, .sectie--donker .usp p, .specblok dt, .kaart--beeld p, .contact__route, .kruimelpad a, .kruimelpad [aria-current] { color: var(--staal-700); }
  .label, .hero .label, .paginakop .label, .sectie--donker .label { color: var(--blauw-700); }
  .sectie--donker .usp { background: none; border-color: var(--staal-300); }
  .specblok, .tekst__beeld { position: static; }
  .kaart--beeld { aspect-ratio: auto; }
  .kaart--beeld .kaart__beeld, .kaart--beeld .kaart__inhoud { position: static; }
  .kaart--beeld .kaart__beeld::after { display: none; }
  .kaart--beeld p { max-height: none; opacity: 1; }
  .knop { background: none; color: var(--ink); border-color: var(--staal-300); }
  .knop::before { display: none; }
  .site-footer { border-top: 1px solid var(--staal-300); }
  .site-footer .contact__regel a, .contact__info .contact__regel a { color: var(--ink); }
  .faq__item[open] summary::after { background: none; color: var(--ink); }
  a { color: inherit; text-decoration: none; }
  .prose a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
}

/* ==========================================================================
   Ontwerp v3 (12-10-2026): licht en rustig.
   Basis wit en lichtgrijs, logo in eigen kleuren, merkblauw als accent.
   Geen donkere vlakken, geen bovenregels, geen zoom- of schuifanimaties.
   Terug naar de donkere opzet: git checkout ontwerp-v2-donker.
   ========================================================================== */
:root { --vlak: #F4F6F8; --rand: #E2E6EA; }

/* Knoppen: effen, zonder schuivende vulling */
.knop::before { display: none; }
.knop { border-radius: 3px; transition: background var(--overgang), border-color var(--overgang), color var(--overgang); }
.knop:hover { background: var(--blauw-800); border-color: var(--blauw-800); color: var(--wit); box-shadow: none; }
.knop--secundair, .sectie--donker .knop--secundair, .hero .knop--secundair, .paginakop .knop--secundair, .contact__info .knop--secundair { background: var(--wit); color: var(--ink); border-color: var(--staal-300); }
.knop--secundair:hover, .sectie--donker .knop--secundair:hover, .hero .knop--secundair:hover, .paginakop .knop--secundair:hover, .contact__info .knop--secundair:hover { background: var(--vlak); color: var(--ink); border-color: var(--staal-500); }
.knop:hover .knop__pijl { transform: translateX(2px); }

/* Header: wit, logo in kleur, telefoonnummer zichtbaar */
.site-header { background: var(--wit); color: var(--ink); border-bottom: 1px solid var(--rand); }
.site-header--gescrold { box-shadow: 0 6px 20px -14px rgba(14,23,32,0.35); }
.topbalk { background: var(--vlak); color: var(--staal-700); border-bottom: 1px solid var(--rand); }
.topbalk__slogan { color: var(--staal-500); }
.topbalk__link { color: var(--ink); }
.topbalk__link:hover { color: var(--blauw-700); }
.topbalk__link .icoon { color: var(--blauw-700); }
.talen ul { border-left-color: var(--rand); }
.taal { color: var(--staal-500); }
a.taal:hover { color: var(--ink); }
.taal--uit { color: var(--staal-300); }
.nav__item > a { color: var(--ink); }
.nav__item > a:hover, .nav__item--actief > a { color: var(--ink); border-bottom-color: var(--blauw-500); }
.nav__toggle { color: var(--staal-500); }
.nav__sub { background: var(--wit); border: 1px solid var(--rand); border-top: 3px solid var(--blauw-500); box-shadow: 0 18px 36px -22px rgba(14,23,32,0.4); }
.nav__sub a { color: var(--staal-700); }
.nav__sub a:hover, .nav__sub a[aria-current] { background: var(--vlak); color: var(--ink); }
.nav__sub-overzicht a { color: var(--blauw-700); border-bottom-color: var(--rand); }
.menuknop { color: var(--ink); border-color: var(--staal-300); }
.menuknop__lijnen::before, .menuknop__lijnen::after { background: var(--ink); }
.menuknop__lijnen::before { box-shadow: 0 5px 0 var(--ink); }
.menu-open .menuknop__lijnen::before { box-shadow: none; }
@media (max-width: 1239px) {
  .nav { background: var(--wit); }
  .nav__item { border-bottom-color: var(--rand); }
  .nav__item > a { color: var(--ink); }
  .nav__item--actief > a { color: var(--blauw-700); }
  .nav__sub a { color: var(--staal-700); border-left-color: var(--rand); }
  .nav__mobiel-extra a:not(.knop) { color: var(--ink); }
  .nav__mobiel-extra .talen ul { border-color: var(--rand); }
}

/* Kruimelpad */
.kruimelpad { background: var(--wit); border-bottom: 1px solid var(--rand); }
.kruimelpad ol, .kruimelpad a { color: var(--staal-500); }
.kruimelpad a:hover { color: var(--blauw-700); }
.kruimelpad li + li::before { color: var(--staal-300); }
.kruimelpad [aria-current] { color: var(--ink); }

/* Paginakop subpagina's: lichtgrijs, foto als gewoon beeld rechts */
.paginakop { background: var(--vlak); color: var(--staal-700); border-bottom: 1px solid var(--rand); padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem); }
.paginakop h1 { color: var(--ink); }
.paginakop .lead { color: var(--staal-500); }
.paginakop__beeld { position: relative; inset: auto; z-index: 1; }
.paginakop__beeld::after, .paginakop__beeld::before { display: none; }
.paginakop__beeld img { aspect-ratio: 4 / 3; border-radius: 3px; }
@media (max-width: 860px) { .paginakop__beeld { margin-top: 0; } }

/* Geen donkere secties meer */
.sectie--donker { background: var(--vlak); color: var(--staal-700); }
.sectie--donker h2, .sectie--donker h3, .sectie--donker strong { color: var(--ink); }
.sectie--donker a { color: var(--blauw-700); }
.sectie--donker .sectie__intro { color: var(--staal-500); }
.usps.sectie--donker::after { display: none; }
.sectie--donker .usp { background: var(--wit); border-color: var(--rand); backdrop-filter: none; -webkit-backdrop-filter: none; }
.sectie--donker .usp p { color: var(--staal-500); }
.sectie--donker .usp__icoon { color: var(--blauw-700); }
.sectie--donker .kaart { background: var(--wit); border-color: var(--rand); }
.sectie--donker .kaart p { color: var(--staal-500); }
.sectie--donker .kaart h3 { color: var(--ink); }
.sectie--donker .stap { border-color: var(--rand); }
.sectie--donker .stap p { color: var(--staal-500); }

/* Kaarten en foto's: rustig, geen zoom */
.kaart { border-color: var(--rand); border-radius: 3px; }
.kaart--link:hover { transform: none; box-shadow: 0 14px 30px -22px rgba(14,23,32,0.45); border-color: var(--staal-300); }
.kaart--link:hover .kaart__beeld img, .figuur:hover .figuur__kader img { transform: none; }
.kaart--link:hover h3 { color: var(--blauw-700); }
.kaart__beeld img { aspect-ratio: 4 / 3; }

/* Tabellen: lichte kop */
.prose thead th { background: var(--vlak); color: var(--ink); border-bottom: 2px solid var(--ink); }
.prose thead th a { color: var(--blauw-700); }

/* Kerngegevens en contactblok: licht */
.specblok, .contact__info { background: var(--wit); color: var(--staal-700); border: 1px solid var(--rand); border-top: 3px solid var(--blauw-500); box-shadow: none; }
.specblok h3, .contact__info h2, .contact__info h3, .contact__info .adres strong { color: var(--ink); }
.specblok dl > div, .contact__info .tijden > div { border-color: var(--rand); }
.specblok dt { color: var(--staal-500); }
.specblok dd, .contact__info .tijden dd, .contact__info .contact__regel a { color: var(--ink); }
.contact__info .contact__regel .icoon { color: var(--blauw-700); }
.contact__route { color: var(--staal-500); }

/* CTA: één merkblauw vlak */
.cta { background: var(--blauw-700); color: #E8F4FB; }
.cta__beeld { display: none; }
.cta h2 { color: var(--wit); }
.cta .knop:not(.knop--secundair) { background: var(--wit); color: var(--blauw-800); border-color: var(--wit); }
.cta .knop:not(.knop--secundair):hover { background: var(--vlak); color: var(--ink); border-color: var(--vlak); }
.cta .knop--secundair { background: transparent; color: var(--wit); border-color: rgba(255,255,255,0.6); }
.cta .knop--secundair:hover { background: rgba(255,255,255,0.12); color: var(--wit); border-color: var(--wit); }
.cta__contact a { color: var(--wit); }

/* Footer: licht */
.site-footer { background: var(--vlak); color: var(--staal-700); border-top: 1px solid var(--rand); }
.footer__slogan { color: var(--blauw-700); }
.site-footer .adres strong, .footer__kolom h2 { color: var(--ink); }
.footer__kolom a, .site-footer .contact__regel a { color: var(--staal-700); }
.footer__kolom a:hover, .site-footer .contact__regel a:hover { color: var(--blauw-700); }
.site-footer .contact__regel .icoon { color: var(--blauw-700); }
.site-footer .tijden > div { border-color: var(--rand); }
.site-footer .tijden dd { color: var(--ink); }
.footer__cert { color: var(--staal-500); }
.footer__onder { border-top-color: var(--rand); }
.footer__onder a { color: var(--staal-700); }
.footer__onder a:hover { color: var(--blauw-700); }

/* ---------- Homepage v3 ---------- */
.hl { background: var(--wit); padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) clamp(3rem, 2rem + 4vw, 5.5rem); border-bottom: 1px solid var(--rand); }
.hl__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.hl h1 { font-size: clamp(2.3rem, 1.5rem + 2.4vw, 3.5rem); line-height: 1.06; letter-spacing: -0.02em; max-width: 14em; margin-bottom: 0.45em; }
.hl__lead { font-size: clamp(1.08rem, 1rem + 0.3vw, 1.2rem); line-height: 1.6; color: var(--staal-500); max-width: 33em; margin-bottom: 1.9rem; }
.hl__knoppen { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.hl__bewijs { list-style: none; margin-top: 2.25rem; padding-top: 1.5rem; border-top: 1px solid var(--rand); display: grid; gap: 0.6rem; }
.hl__bewijs li { display: flex; align-items: flex-start; gap: 0.6rem; font-size: var(--maat-klein); color: var(--staal-700); }
.hl__bewijs .icoon { color: var(--blauw-700); font-size: 1.15rem; margin-top: 0.15rem; stroke-width: 2.2; }
.hl__beeld { position: relative; margin: 0; }
.hl__beeld img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 35%; border-radius: 3px; }
.hl__bijschrift { position: absolute; left: -1.5rem; bottom: 1.5rem; max-width: 19rem; padding: 0.9rem 1.1rem; background: var(--blauw-700); color: var(--wit); font-size: 0.9rem; line-height: 1.45; border-radius: 2px; }
@media (max-width: 1100px) { .hl__bijschrift { left: 1rem; } }
@media (max-width: 860px) {
  .hl__grid { grid-template-columns: 1fr; }
  .hl__beeld img { aspect-ratio: 4 / 3; }
  .hl__bijschrift { position: static; max-width: none; border-radius: 0 0 3px 3px; }
  .hl__beeld img { border-radius: 3px 3px 0 0; }
}

.ww__lijst { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
.ww__beeld img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 3px; }
.ww__nr { margin: 1rem 0 0.3rem; font-size: 0.85rem; font-weight: 600; color: var(--blauw-700); }
.ww__stap h3 { font-size: 1.15rem; margin-bottom: 0.35em; }
.ww__stap p:not(.ww__nr) { font-size: var(--maat-klein); color: var(--staal-500); margin-bottom: 0.6rem; }
.ww__link { font-size: 0.92rem; font-weight: 600; text-decoration: none; }
@media (max-width: 1000px) { .ww__lijst { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ww__lijst { grid-template-columns: 1fr; } }

.ck__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.ck__intro { font-size: 1.1rem; color: var(--staal-500); max-width: 32em; margin-bottom: 1.5rem; }
.ck__regel { display: flex; align-items: flex-start; gap: 0.7rem; margin: 0 0 0.6rem; font-family: var(--font-kop); font-size: 1.4rem; font-weight: 600; }
.ck__regel .icoon { color: var(--blauw-700); margin-top: 0.3rem; font-size: 1.1rem; }
.ck__regel a { color: var(--ink); text-decoration: none; }
.ck__regel a:hover { color: var(--blauw-700); }
.ck__regel--klein { font-family: var(--font-tekst); font-size: var(--maat-klein); font-weight: 400; color: var(--staal-700); }
.ck__regel--klein .icoon { margin-top: 0.2rem; font-size: 1rem; }
.ck__knoppen { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
.ck__beeld img { aspect-ratio: 4 / 3; object-fit: cover; border-radius: 3px; }
@media (max-width: 860px) { .ck__grid { grid-template-columns: 1fr; } }
.taal.taal--actief { color: var(--wit); background: var(--blauw-700); }
/* Koppen niet automatisch afbreken ("warm-tewisselaars"); lange woorden mogen wel doorlopen. */
h1, h2, h3 { hyphens: manual; -webkit-hyphens: manual; overflow-wrap: break-word; }
@media (max-width: 420px) { .hl h1 { font-size: 2.05rem; } }

/* ==========================================================================
   Ontwerp v4 (12-10-2026): in de geest van Stripe.
   Koppen in twee tinten, Hanken Grotesk, dunne hulplijnen langs het raster,
   rijke beeldkaarten (bento), een pijpenbundel als signatuurbeeld en een
   interactieve doorsnede. Terug: git checkout ontwerp-v3-licht.
   ========================================================================== */
@font-face { font-family: 'Hanken Grotesk'; font-weight: 300 800; font-display: swap; src: url('/assets/fonts/HankenGrotesk.woff2') format('woff2'); }
:root {
  --font-kop: 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-tekst: 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --navy: #0A2540;
  --slate: #425466;
  --zacht: #6B7C93;
  --lijnkleur: #E6EBF1;
  --wash: #F6F9FC;
  --koper: #B4532E;
  --radius: 10px;
  --container: 1180px;
  --ink: #0A2540;
}
body { color: var(--slate); font-size: 1.0625rem; }
h1, h2, h3, h4 { color: var(--navy); font-weight: 600; letter-spacing: -0.022em; }
.knop { border-radius: 6px; font-family: var(--font-tekst); font-weight: 600; font-size: 0.95rem; padding: 0.72em 1.15em; letter-spacing: 0; }
.knop--secundair, .paginakop .knop--secundair { background: var(--wit); color: var(--navy); border-color: var(--lijnkleur); box-shadow: 0 1px 2px rgba(10,37,64,0.06); }
.knop--secundair:hover, .paginakop .knop--secundair:hover { background: var(--wash); color: var(--navy); border-color: #CFD7DF; }
.nav__item > a { font-family: var(--font-tekst); font-weight: 500; font-size: 0.97rem; }
.topbalk { font-size: 0.84rem; }

/* Hulplijnen langs de rand van het raster */
@media (min-width: 1240px) {
  .v4 main { background-image: linear-gradient(90deg, transparent calc(50% - 590px), var(--lijnkleur) calc(50% - 590px), var(--lijnkleur) calc(50% - 589px), transparent calc(50% - 589px), transparent calc(50% + 589px), var(--lijnkleur) calc(50% + 589px), var(--lijnkleur) calc(50% + 590px), transparent calc(50% + 590px)); }
}
.v4 .sectie { border-top: 1px solid var(--lijnkleur); }
.v4 .sectie--licht { background-color: var(--wash); }
.v4 .sectie__kop { max-width: 780px; margin-bottom: clamp(2rem, 3vw, 3rem); }
.v4 .sectie__kop--midden { margin-inline: auto; text-align: center; }

/* Koppen in twee tinten */
.kop2 { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); line-height: 1.16; font-weight: 600; letter-spacing: -0.024em; margin: 0; }
.kop2__sterk { color: var(--navy); }
.kop2__zacht { color: var(--zacht); }
.kop2--hero { font-size: clamp(2.1rem, 1.3rem + 2.6vw, 3.55rem); line-height: 1.1; letter-spacing: -0.03em; font-weight: 600; max-width: 15em; }
.kop2--hero h1, .kop2--hero p { display: inline; font: inherit; letter-spacing: inherit; margin: 0; }

/* Hero */
.h4 { position: relative; overflow: hidden; background: var(--wit); isolation: isolate; }
.h4__kunst { position: absolute; z-index: -1; top: -14%; right: -9%; width: 62%; height: 135%; transform: rotate(-11deg); transform-origin: 60% 40%; }
.h4__kunst .bundel { width: 100%; height: 100%; }
.h4__gloed { position: absolute; inset: 15% 0 0 10%; background: radial-gradient(closest-side, rgba(0,159,227,0.22), transparent 70%), radial-gradient(closest-side at 70% 70%, rgba(224,135,79,0.20), transparent 70%); filter: blur(30px); z-index: -1; }
.bundel__grens { animation: coaten 9s ease-in-out infinite alternate; }
@keyframes coaten { from { offset: 0.30; } to { offset: 0.58; } }
.h4__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; padding-block: clamp(3.5rem, 2rem + 6vw, 7rem) clamp(3rem, 2rem + 4vw, 5.5rem); }
.h4__knoppen { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 2.25rem; }
.h4__kaart { margin: 0; background: var(--wit); border-radius: 12px; overflow: hidden; box-shadow: 0 50px 100px -20px rgba(50,50,93,0.25), 0 30px 60px -30px rgba(0,0,0,0.3); transform: translateY(1.5rem); }
.h4__kaart img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.h4__kaart figcaption { padding: 1.1rem 1.25rem 1.25rem; }
.h4__kaart-label { display: inline-block; font-size: 0.75rem; font-weight: 600; color: var(--koper); background: #FBEFE9; padding: 0.15rem 0.5rem; border-radius: 4px; margin-bottom: 0.45rem; }
.h4__kaart strong { display: block; color: var(--navy); font-size: 1.05rem; margin-bottom: 0.6rem; }
.h4__kaart dl > div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.45rem 0; border-top: 1px solid var(--lijnkleur); font-size: 0.88rem; }
.h4__kaart dt { color: var(--zacht); }
.h4__kaart dd { color: var(--navy); font-weight: 600; text-align: right; }
.h4__strook { border-top: 1px solid var(--lijnkleur); background: rgba(255,255,255,0.85); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.h4__strook ul { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.h4__strook li { padding: 1.15rem 1rem; font-size: 0.9rem; font-weight: 600; color: var(--navy); text-align: center; border-left: 1px solid var(--lijnkleur); }
.h4__strook li:first-child { border-left: 0; }
@media (max-width: 1100px) { .h4__strook ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } .h4__strook li:nth-child(n+4) { border-top: 1px solid var(--lijnkleur); } .h4__strook li:nth-child(4) { border-left: 0; } }
@media (max-width: 860px) {
  .h4__grid { grid-template-columns: 1fr; }
  .h4__kunst { width: 120%; right: -45%; top: -6%; height: 70%; opacity: 0.45; }
  .h4__kaart { transform: none; max-width: 420px; }
  .h4__strook ul { grid-template-columns: 1fr 1fr; }
  .h4__strook li { border-left: 0; border-top: 1px solid var(--lijnkleur); text-align: left; padding-inline: 0; }
}

/* Bento */
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1rem; }
.bento__kaart { display: flex; flex-direction: column; background: var(--wit); border: 1px solid var(--lijnkleur); border-radius: var(--radius); overflow: hidden; transition: box-shadow 0.2s, border-color 0.2s; }
.bento__kaart:hover { border-color: #D5DDE5; box-shadow: 0 18px 40px -24px rgba(50,50,93,0.35); }
.bento__kaart--breed { grid-column: span 4; }
.bento__kaart--klein { grid-column: span 2; }
.bento__tekst { padding: 1.4rem 1.5rem 1.25rem; }
.bento__tekst h3 { font-size: 1.2rem; line-height: 1.32; letter-spacing: -0.012em; margin-bottom: 0.7rem; }
.bento__link { font-size: 0.9rem; font-weight: 600; text-decoration: none; color: var(--blauw-700); }
.bento__link:hover { color: var(--navy); }
.bento__beeld { position: relative; margin-top: auto; background: var(--wash); }
.bento__beeld img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.bento__kaart--breed .bento__beeld img, .bento__kaart--breed .schuif { aspect-ratio: 16 / 8.2; }
.bento__beeld--schuif .schuif { box-shadow: none; border-radius: 0; }
.chip { position: absolute; left: 0.9rem; bottom: 0.9rem; min-width: 11.5rem; background: rgba(255,255,255,0.96); border-radius: 8px; padding: 0.7rem 0.85rem; box-shadow: 0 12px 30px -12px rgba(10,37,64,0.35); font-size: 0.8rem; }
.chip__titel { display: block; font-weight: 700; color: var(--navy); margin-bottom: 0.35rem; }
.chip__regel { display: flex; justify-content: space-between; gap: 1rem; padding: 0.22rem 0; border-top: 1px solid var(--lijnkleur); color: var(--zacht); }
.chip__regel strong { color: var(--navy); font-weight: 600; }
@media (max-width: 1000px) { .bento__kaart--breed { grid-column: span 6; } .bento__kaart--klein { grid-column: span 3; } }
@media (max-width: 600px) { .bento__kaart--klein { grid-column: span 6; } .bento__kaart--breed .bento__beeld img, .bento__kaart--breed .schuif { aspect-ratio: 4 / 3; } }

/* Doorsnede */
.ds { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 4vw, 4rem); align-items: start; }
.ds__venster { background: var(--wit); border: 1px solid var(--lijnkleur); border-radius: 12px; padding: clamp(1rem, 2.5vw, 2rem); box-shadow: 0 30px 60px -40px rgba(50,50,93,0.35); }
.ds__venster svg { width: 100%; height: auto; border-radius: 6px; display: block; }
.ds__laag { transition: opacity 0.25s; }
.ds--actief .ds__laag { opacity: 0.22; }
.ds--actief .ds__laag.is-actief { opacity: 1; }
.ds__schalen { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem; }
.schaal { background: var(--wit); border: 1px solid var(--lijnkleur); border-radius: var(--radius); padding: 1rem 1.1rem; }
.schaal__kop { display: flex; justify-content: space-between; gap: 0.5rem; align-items: baseline; margin-bottom: 0.8rem; font-size: 0.85rem; color: var(--zacht); }
.schaal__kop strong { color: var(--navy); font-size: 0.95rem; }
.schaal__balk { position: relative; height: 10px; border-radius: 6px; }
.schaal__balk--ph { background: linear-gradient(90deg, #E5484D, #F2A33A 20%, #E7D23E 38%, #5BB55E 52%, #2BA9E6 72%, #5B5BD6); }
.schaal__balk--temp { background: linear-gradient(90deg, #2BA9E6, #C9E9F6 40%, #F6E2D6 62%, #E0874F 85%, #B4532E); }
.schaal__bereik { position: absolute; top: -5px; bottom: -5px; border: 2px solid var(--navy); border-radius: 8px; }
.schaal__as { display: flex; justify-content: space-between; margin-top: 0.45rem; font-size: 0.75rem; color: var(--zacht); }
.schaal__bron { margin: 0.5rem 0 0; font-size: 0.75rem; color: var(--zacht); }
.ds__lijst { list-style: none; border-top: 1px solid var(--lijnkleur); }
.ds__item { border-bottom: 1px solid var(--lijnkleur); padding: 0.85rem 0.75rem; border-radius: 8px; transition: background 0.2s; }
.ds__item.is-actief { background: var(--wit); box-shadow: 0 10px 24px -18px rgba(10,37,64,0.4); }
.ds__knop { display: flex; align-items: center; gap: 0.6rem; background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--navy); cursor: pointer; text-align: left; }
.ds__stip { width: 14px; height: 14px; border-radius: 4px; flex: none; box-shadow: inset 0 0 0 1px rgba(10,37,64,0.12); }
.ds__item p { margin: 0.3rem 0 0 1.55rem; font-size: 0.93rem; color: var(--slate); }
@media (max-width: 960px) { .ds { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .ds__schalen { grid-template-columns: 1fr; } }

/* Cijfers */
.cijfers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--lijnkleur); border-bottom: 1px solid var(--lijnkleur); }
.cijfer { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 0.4rem; padding: 2rem 1.5rem; border-left: 1px solid var(--lijnkleur); text-align: center; }
.cijfer:first-child { border-left: 0; }
.cijfer dd { font-size: clamp(1.9rem, 1.3rem + 1.6vw, 2.75rem); font-weight: 500; letter-spacing: -0.03em; color: var(--zacht); line-height: 1.05; }
.cijfer:first-child dd { color: var(--navy); }
.cijfer dt { font-size: 0.85rem; color: var(--slate); }
@media (max-width: 860px) { .cijfers { grid-template-columns: 1fr 1fr; } .cijfer:nth-child(3) { border-left: 0; } .cijfer:nth-child(n+3) { border-top: 1px solid var(--lijnkleur); } }

/* Werkwijze, kaarten en FAQ in de v4-stijl */
.v4 .ww__beeld img, .v4 .kaart__beeld img { border-radius: 8px; }
.v4 .ww__nr { color: var(--koper); }
.v4 .kaart { border-radius: var(--radius); border-color: var(--lijnkleur); }
.v4 .kaart__beeld img { border-radius: 0; }
.v4 .faq__lijst { border-top-color: var(--lijnkleur); }
.v4 .faq__item { border-color: var(--lijnkleur); }
.v4 .faq__item summary { font-family: var(--font-tekst); font-size: 1.08rem; color: var(--navy); }
.v4 .faq__item summary::after { border-radius: 6px; border-color: var(--lijnkleur); }

/* Afsluiter */
.slot4 { position: relative; overflow: hidden; isolation: isolate; background: var(--wash); border-top: 1px solid var(--lijnkleur); padding-block: clamp(4rem, 3rem + 5vw, 7rem); }
.slot4__kunst { position: absolute; z-index: -1; right: -10%; top: -30%; width: 46%; height: 170%; transform: rotate(14deg); opacity: 0.55; }
.slot4__kunst .bundel { width: 100%; height: 100%; }
.slot4__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 3rem; align-items: end; }
.slot4__kolommen { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; background: rgba(255,255,255,0.9); border: 1px solid var(--lijnkleur); border-radius: 12px; padding: 1.5rem; }
.slot4__kolommen h3 { font-size: 0.95rem; margin-bottom: 0.4rem; }
.slot4__kolommen p { font-size: 0.93rem; margin: 0; line-height: 1.7; }
.slot4__kolommen a { color: var(--navy); font-weight: 600; text-decoration: none; }
.slot4__kolommen a:hover { color: var(--blauw-700); }
@media (max-width: 860px) { .slot4__grid { grid-template-columns: 1fr; } .slot4__kolommen { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) { .bundel__grens { animation: none; } }
/* v4 bijstellingen */
.kop2 { font-size: clamp(1.6rem, 1.15rem + 1.3vw, 2.2rem); }
.kop2--hero { font-size: clamp(2.1rem, 1.3rem + 2.3vw, 3.2rem); max-width: 16em; }
.nav__item > a { padding: 0 0.7rem; white-space: nowrap; }
.h4__kunst { top: 4%; right: -6%; width: 54%; height: 118%; transform: rotate(-9deg); }
.bento__kaart--klein .bento__beeld, .bento__kaart--breed .bento__beeld { flex: 1 1 auto; display: flex; }
.bento__beeld > picture { flex: 1 1 auto; display: block; }
.bento__beeld > picture img { height: 100%; min-height: 220px; }
.bento__kaart--breed .bento__beeld > picture img { aspect-ratio: auto; }
.ds__bijschrift { margin: 0.8rem 0 0; font-size: 0.8rem; color: var(--zacht); }
.bento__beeld--schuif .schuif { width: 100%; flex: 1 1 auto; min-height: 260px; }
.bento__beeld--schuif .schuif img { object-fit: contain; background: var(--wash); padding: 0.75rem 1.5rem 0; }
.cijfer dd { font-size: clamp(1.6rem, 1.1rem + 1.3vw, 2.35rem); white-space: nowrap; }
@media (max-width: 860px) {
  .h4__strook ul { column-gap: 1.25rem; }
  .h4__kunst { opacity: 0.28; right: -60%; }
}

/* ---------- v4: huisstijlkleuren en rustiger bento (12-10-2026) ---------- */
:root {
  --merk: #009FE3;        /* logoblauw: vlakken, lijnen, accenten */
  --merk-donker: #0079B5; /* logoblauw donker: knoppen en links (AA op wit) */
  --merk-diep: #005A88;
  --merk-licht: #E8F6FD;  /* lichte tint voor vlakken */
  --merk-grijs: #B3B3B3;  /* grijs uit het logo */
  --blauw-700: #0079B5;
  --blauw-800: #005A88;
  --wash: #F3F9FD;
}
.knop { background: var(--merk-donker); border-color: var(--merk-donker); }
.knop:hover { background: var(--merk-diep); border-color: var(--merk-diep); }
a { color: var(--merk-donker); }
.v4 .kop2__sterk { color: var(--navy); }
.v4 .kop2__sterk em, .v4 .kop2 em { color: var(--merk); font-style: normal; }
.topbalk { background: var(--merk-licht); border-bottom-color: #D6EEF9; }
.taal.taal--actief { background: var(--merk-donker); }
.nav__item > a:hover, .nav__item--actief > a { border-bottom-color: var(--merk); }

/* Hero: merkblauw in de gloed en het label */
.h4__gloed { background: radial-gradient(closest-side, rgba(0,159,227,0.30), transparent 72%), radial-gradient(closest-side at 72% 72%, rgba(0,159,227,0.12), transparent 70%); }
.h4__kaart { border-top: 4px solid var(--merk); }
.h4__kaart-label { color: var(--merk-diep); background: var(--merk-licht); }
.h4__strook li { color: var(--navy); }
.h4__strook li::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--merk); margin-right: 0.55rem; vertical-align: 0.12em; }

/* Bento: vaste tekstblokken en beeldhoogtes, geen chips, merkblauwe accentlijn */
.bento { gap: 1.25rem; }
.bento__kaart { position: relative; }
.bento__kaart::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--merk); transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease; z-index: 2; }
.bento__kaart:hover::before { transform: scaleX(1); }
.bento__tekst { display: flex; flex-direction: column; justify-content: space-between; gap: 0.9rem; min-height: 8.25rem; padding: 1.5rem 1.6rem 1.35rem; }
.bento__tekst h3 { margin: 0; font-size: 1.15rem; }
.bento__link { color: var(--merk-donker); }
.bento__beeld { flex: none; display: block; height: 340px; }
.bento__kaart--klein .bento__beeld { height: 340px; }
.bento > .bento__kaart:nth-child(n+3) .bento__beeld { height: 260px; }
.bento__beeld > picture, .bento__beeld > picture img, .bento__beeld--schuif .schuif { height: 100%; min-height: 0; width: 100%; aspect-ratio: auto; }
.bento__beeld > picture img { object-fit: cover; }
.bento__beeld--schuif .schuif img { object-fit: contain; padding: 1rem 2rem 0; background: linear-gradient(180deg, var(--wit), var(--merk-licht)); }
.schuif__tag { border-radius: 4px; font-size: 0.78rem; }
.schuif__tag--voor { background: #6B7680; }
.schuif__tag--na { background: var(--merk-donker); }
.schuif__greep { background: var(--wit); color: var(--merk-donker); box-shadow: 0 0 0 4px rgba(0,159,227,0.18), 0 6px 16px -4px rgba(10,37,64,0.4); }
@media (max-width: 1000px) { .bento__beeld, .bento__kaart--klein .bento__beeld, .bento > .bento__kaart:nth-child(n+3) .bento__beeld { height: 280px; } }
@media (max-width: 600px) { .bento__tekst { min-height: 0; } .bento__beeld, .bento__kaart--klein .bento__beeld, .bento > .bento__kaart:nth-child(n+3) .bento__beeld { height: 240px; } }

/* Lichte vlakken in merktint, doorsnede en cijfers met merkblauw */
.v4 .sectie--licht { background-color: var(--wash); }
.ds__venster { border-top: 4px solid var(--merk); }
.ds__item.is-actief { box-shadow: inset 3px 0 0 var(--merk), 0 10px 24px -18px rgba(10,37,64,0.4); }
.schaal__bereik { border-color: var(--merk-donker); }
.cijfer:first-child dd { color: var(--merk-donker); }
.cijfers { border-top: 2px solid var(--merk); }
.v4 .ww__nr { color: var(--merk-donker); }
.v4 .kaart:hover { border-color: var(--merk); }
.v4 .faq__item summary::after { color: var(--merk-donker); }
.slot4 { background: linear-gradient(180deg, var(--merk-licht), var(--wit)); }
.slot4__kolommen { border-top: 4px solid var(--merk); }
.site-footer { background: var(--merk-licht); border-top-color: #D6EEF9; }
.footer__slogan { color: var(--merk-donker); }
.kop2--hero em { color: var(--merk); font-style: normal; }
.h4__kunst { opacity: 0.9; }
.knop.knop--secundair { background: var(--wit); color: var(--navy); border-color: #CFE3EF; }
.knop.knop--secundair:hover { background: var(--merk-licht); color: var(--navy); border-color: var(--merk); }

/* ---------- v4: meer kleur en ritme (12-10-2026) ---------- */
:root { --tint: #EAF5FC; --tint-2: #F4FAFE; }
/* Hero op een lichtblauwe ondergrond */
.h4 { background: linear-gradient(180deg, #DDF0FB 0%, #EAF6FD 55%, var(--tint-2) 100%); }
.h4__strook { background: rgba(255,255,255,0.7); border-top-color: #CFE7F5; }
.h4__strook li { border-left-color: #CFE7F5; }
/* Ritme: blauw getint, wit, getint ... */
.v4 .bento-sectie { background: var(--tint); }
.v4 .ds-sectie { background: var(--wit); }
.v4 .ww { background: var(--tint); }
.v4 .kaarten.sectie--licht { background: var(--wit); }
.v4 .faq { background: var(--tint); }
.v4 .bento-sectie .bento__kaart, .v4 .ww .ww__stap { border-color: #D5E9F5; }
.v4 .sectie { border-top-color: #D5E9F5; }

/* Cijferrij: vol logoblauw */
.v4 .cijfers-sectie { background: linear-gradient(115deg, #0079B5 0%, #009FE3 100%); border-top: 0; color: var(--wit); }
.cijfers-sectie .kop2__sterk { color: var(--wit); }
.cijfers-sectie .kop2__zacht { color: #CDEBFA; }
.cijfers-sectie .cijfers { border-top: 1px solid rgba(255,255,255,0.35); border-bottom: 1px solid rgba(255,255,255,0.35); }
.cijfers-sectie .cijfer { border-left-color: rgba(255,255,255,0.25); }
.cijfers-sectie .cijfer:nth-child(n+3) { border-top-color: rgba(255,255,255,0.25); }
.cijfers-sectie .cijfer dd, .cijfers-sectie .cijfer:first-child dd { color: var(--wit); }
.cijfers-sectie .cijfer dt { color: #DDF1FB; }

/* Afsluiter: logoblauw vlak met witte tekst */
.slot4 { background: linear-gradient(115deg, #005A88 0%, #0079B5 50%, #009FE3 100%); border-top: 0; color: var(--wit); }
.slot4 .kop2__sterk { color: var(--wit); }
.slot4 .kop2__zacht { color: #CDEBFA; }
.slot4__kunst { opacity: 0.35; filter: brightness(1.6) saturate(0.6); }
.slot4 .knop:not(.knop--secundair) { background: var(--wit); color: var(--merk-diep); border-color: var(--wit); }
.slot4 .knop:not(.knop--secundair):hover { background: var(--tint); color: var(--merk-diep); border-color: var(--tint); }
.slot4 .knop.knop--secundair { background: transparent; color: var(--wit); border-color: rgba(255,255,255,0.6); box-shadow: none; }
.slot4 .knop.knop--secundair:hover { background: rgba(255,255,255,0.14); color: var(--wit); border-color: var(--wit); }
.slot4__kolommen { border-top-color: var(--wit); box-shadow: 0 30px 60px -30px rgba(0,40,70,0.5); }

/* Footer iets voller getint, zodat de blauwe afsluiter er goed op aansluit */
.site-footer { background: var(--tint); }
.slot4__kolommen { background: var(--wit); color: var(--navy); }
.slot4__kolommen h3, .slot4__kolommen p, .slot4__kolommen dd, .slot4__kolommen dt, .slot4__kolommen li { color: var(--navy); }

/* =====================================================================
   Ontwerp v5 (12-10-2026): afgeronde panelen tot bijna aan de schermrand,
   fotohero, pastelvlakken met concentrische bogen, één donker vlak.
   Kleuren uit het logo: blauw #009FE3 en grijs #B3B3B3, donker marine.
   Header, knoppen en footer gelden sitebreed; de rest hangt aan .v5.
   ===================================================================== */
:root {
  --v5-inkt: #10212E;
  --v5-tekst: #2D3D49;
  --v5-donker: #0C1D2A;
  --v5-pastel: #C9E9FA;
  --v5-licht: #E5F4FC;
  --v5-grijs: #E8ECEF;
  --v5-accent: #7FD0F5;
  --v5-rand: #D3E1EA;
  --v5-r: 20px;
  --v5-p: max(clamp(20px, 2.4vw, 40px), calc((100vw - 20px - 1640px) / 2));
  --header-hoogte: 60px;
  --header-totaal: 70px;
}
html { scroll-padding-top: 90px; }

/* ---------- Header: zwevende balk ---------- */
.site-header { position: sticky; top: 0; z-index: 50; padding: 10px 10px 0; background: transparent; border: 0; box-shadow: none; color: var(--v5-inkt); }
.site-header--gescrold { box-shadow: none; }
.hoofdbalk { min-height: var(--header-hoogte); gap: 1.25rem; padding: 0 10px 0 22px; background: var(--v5-pastel); border: 1px solid transparent; border-radius: 18px; transition: background-color 250ms ease, border-color 250ms ease, box-shadow 250ms ease; }
.site-header--gescrold .hoofdbalk { box-shadow: 0 14px 30px -22px rgba(12,29,42,0.55); }
.logo img { width: auto; height: 42px; }
.logo .logo__wit { display: none; }
.nav__item > a { height: var(--header-hoogte); padding: 0 0.7rem; border: 0; font-family: var(--font-tekst); font-weight: 700; font-size: 0.95rem; color: var(--v5-inkt); }
.nav__item > a:hover, .nav__item--actief > a { color: var(--merk-donker); border: 0; }
.nav__toggle { color: var(--v5-inkt); margin-left: -0.55rem; }
.nav__sub { top: calc(100% - 8px); background: #fff; border: 0; border-radius: 14px; box-shadow: 0 26px 50px -22px rgba(12,29,42,0.4); padding: 0.45rem; }
.nav__sub a { border-radius: 9px; color: var(--v5-inkt); font-size: 0.93rem; }
.nav__sub a:hover, .nav__sub a[aria-current] { background: var(--v5-licht); color: var(--v5-inkt); }
.nav__sub-overzicht a { color: var(--merk-donker); border-bottom: 1px solid var(--v5-rand); border-radius: 9px 9px 0 0; }
.hoofdbalk__rechts { display: flex; align-items: center; gap: 0.9rem; flex: none; }
.hoofdbalk__tel { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.88rem; font-weight: 600; color: var(--v5-inkt); text-decoration: none; white-space: nowrap; }
.hoofdbalk__tel:hover { color: var(--merk-donker); }
.hoofdbalk .taal { color: var(--v5-inkt); opacity: 0.55; border-radius: 6px; height: 1.7rem; }
.hoofdbalk .taal.taal--actief { opacity: 1; color: var(--v5-pastel); background: var(--v5-inkt); }
.menuknop { border-radius: 999px; border-color: rgba(16,33,46,0.35); color: var(--v5-inkt); }

/* Home: balk transparant over de fotohero, gekleurd zodra je voorbij de foto scrolt. */
.v5 .site-header { position: fixed; left: 0; right: 0; padding: 20px 20px 0; }
body:not(.menu-open) .site-header--over-foto .hoofdbalk { background: transparent; border-color: rgba(255,255,255,0.28); box-shadow: none; }
body:not(.menu-open) .site-header--over-foto .logo__kleur { display: none; }
body:not(.menu-open) .site-header--over-foto .logo__wit { display: block; }
body:not(.menu-open) .site-header--over-foto .nav__item > a,
body:not(.menu-open) .site-header--over-foto .nav__toggle,
body:not(.menu-open) .site-header--over-foto .hoofdbalk__tel,
body:not(.menu-open) .site-header--over-foto .hoofdbalk .taal { color: #fff; }
body:not(.menu-open) .site-header--over-foto .hoofdbalk .taal.taal--actief { background: #fff; color: var(--v5-inkt); }
body:not(.menu-open) .site-header--over-foto .menuknop { color: #fff; border-color: rgba(255,255,255,0.5); }
body:not(.menu-open) .site-header--over-foto .menuknop__lijnen::before, body:not(.menu-open) .site-header--over-foto .menuknop__lijnen::after { background: #fff; }
body:not(.menu-open) .site-header--over-foto .menuknop__lijnen::before { box-shadow: 0 5px 0 #fff; }

@media (max-width: 1240px) { .hoofdbalk__tel { display: none; } }
@media (max-width: 1239px) {
  :root { --header-hoogte: 58px; --header-totaal: 68px; }
  .hoofdbalk { padding-left: 16px; }
  .hoofdbalk__rechts { display: none; }
  .v5 .site-header { padding: 16px 16px 0; }
  .nav { inset: calc(var(--header-totaal) + 8px) 10px 10px; border-radius: var(--v5-r); background: #fff; box-shadow: 0 30px 60px -30px rgba(12,29,42,0.5); padding: 0.75rem 1.25rem 1.5rem; }
  .v5 .nav { inset: calc(var(--header-totaal) + 14px) 16px 16px; }
  .nav__item { border-bottom: 1px solid var(--v5-rand); }
  .nav__item > a { height: auto; color: var(--v5-inkt); font-size: 1.2rem; }
  .nav__item--actief > a { color: var(--merk-donker); }
  .nav__sub { background: transparent; box-shadow: none; padding: 0 0 0.8rem; }
  .nav__sub a { border-left-color: var(--v5-rand); border-radius: 0; color: var(--v5-tekst); }
  .nav__mobiel-extra a:not(.knop) { color: var(--v5-inkt); }
  .nav__mobiel-extra .talen ul { border: 0; gap: 0.3rem; }
  .nav__mobiel-extra .taal { border: 1px solid var(--v5-rand); border-radius: 8px; color: var(--v5-inkt); }
  .nav__mobiel-extra .taal--actief { background: var(--v5-inkt); color: var(--v5-pastel); border-color: var(--v5-inkt); }
}

/* ---------- Knoppen: pilvorm ---------- */
.knop { border-radius: 999px; background: var(--v5-inkt); color: var(--v5-pastel); border: 1px solid var(--v5-inkt); font-family: var(--font-tekst); font-weight: 700; font-size: 0.92rem; padding: 0.72em 1.45em; box-shadow: none; }
.knop:hover { background: var(--merk-donker); border-color: var(--merk-donker); color: #fff; }
.knop.knop--secundair { background: transparent; color: var(--v5-inkt); border-color: rgba(16,33,46,0.3); box-shadow: none; }
.knop.knop--secundair:hover { background: var(--v5-inkt); color: #fff; border-color: var(--v5-inkt); }
.knop.knop--licht { background: #fff; color: var(--v5-inkt); border-color: #fff; display: inline-flex; align-items: center; gap: 0.45rem; }
.knop.knop--licht:hover { background: var(--v5-licht); border-color: var(--v5-licht); color: var(--v5-inkt); }
.v5-knoppen { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.75rem; }

/* ---------- Bouwstenen ---------- */
.v5 { background: #fff; }
.v5 main { background: none; }
.v5 main p { color: var(--v5-tekst); }
.v5 h2, .v5 h3 { color: var(--v5-inkt); letter-spacing: -0.02em; }
.v5-kicker { font-size: 0.98rem; font-weight: 700; color: var(--v5-inkt) !important; margin: 0 0 1.4rem; letter-spacing: -0.005em; }
.v5-kop { font-size: clamp(2rem, 1.35rem + 1.9vw, 2.75rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.025em; margin: 0 0 1.25rem; max-width: 20ch; }
.v5-kop--groot { font-size: clamp(2.35rem, 1.3rem + 3.1vw, 4rem); line-height: 1.03; max-width: 16ch; }
.v5 .kop2 .kop2__sterk, .v5 .kop2 .kop2__zacht { color: var(--v5-inkt); }
.v5 .kop2 { font-size: clamp(2rem, 1.35rem + 1.9vw, 2.75rem); letter-spacing: -0.025em; line-height: 1.1; }

.v5-paneel { margin: 10px; border-radius: var(--v5-r); padding: clamp(3.5rem, 2rem + 5vw, 7.5rem) var(--v5-p); }
.v5-paneel--bogen { background-color: var(--v5-pastel); background-image: repeating-radial-gradient(circle at -12% 50%, rgba(255,255,255,0) 0, rgba(255,255,255,0.6) 230px); }
.v5-paneel--licht { background: var(--v5-licht); }
.v5-paneel--grijs { background: var(--v5-grijs); }
.v5-paneel--donker { background: var(--v5-donker); color: #CFE2EE; }
.v5-blok { margin: 0 10px; padding: clamp(4rem, 2.5rem + 5vw, 8rem) var(--v5-p); }

/* Hero */
.v5-hero { position: relative; isolation: isolate; overflow: hidden; margin: 10px; border-radius: var(--v5-r); min-height: clamp(580px, 90svh, 980px); display: flex; align-items: center; padding: 140px var(--v5-p) 120px; color: #fff; background: var(--v5-donker); }
.v5-hero__beeld, .v5-hero__beeld picture, .v5-hero__beeld img { position: absolute; inset: 0; width: 100%; height: 100%; }
.v5-hero__beeld { z-index: -2; }
.v5-hero__beeld img { object-fit: cover; object-position: 60% 50%; }
.v5-hero__beeld::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,22,33,0.82) 0%, rgba(8,22,33,0.6) 38%, rgba(8,22,33,0.12) 72%, rgba(8,22,33,0) 100%), linear-gradient(0deg, rgba(8,22,33,0.45) 0%, rgba(8,22,33,0) 30%); }
.v5-hero__ringen { position: absolute; inset: 0; z-index: -1; pointer-events: none; background:
  radial-gradient(circle at 76% 58%, rgba(0,159,227,0.20) 0 15vw, rgba(0,159,227,0) 15vw),
  radial-gradient(circle at 76% 58%, rgba(92,195,238,0.13) 0 24vw, rgba(92,195,238,0) 24vw),
  radial-gradient(circle at 76% 58%, rgba(92,195,238,0.08) 0 33vw, rgba(92,195,238,0) 33vw); }
.v5-hero__inhoud { max-width: min(880px, 100%); }
.v5-hero h1 { color: #fff; font-size: clamp(2rem, 0.9rem + 4.6vw, 6rem); line-height: 0.98; letter-spacing: -0.035em; font-weight: 700; margin: 0 0 1.75rem; hyphens: manual; overflow-wrap: normal; }
.v5-hero__intro { color: rgba(255,255,255,0.9) !important; font-size: clamp(1rem, 0.95rem + 0.25vw, 1.15rem); line-height: 1.6; max-width: 34rem; margin: 0; }
.v5-hero .knop { background: #fff; color: var(--v5-inkt); border-color: #fff; }
.v5-hero .knop:hover { background: var(--v5-pastel); border-color: var(--v5-pastel); }
.v5-hero .knop.knop--secundair { background: transparent; color: #fff; border-color: rgba(255,255,255,0.6); }
.v5-hero .knop.knop--secundair:hover { background: rgba(255,255,255,0.14); border-color: #fff; color: #fff; }
.v5-hero__feiten { position: absolute; right: var(--v5-p); bottom: 32px; display: flex; gap: 0.5rem; list-style: none; margin: 0; }
.v5-hero__feiten li { padding: 0.5rem 1rem; border: 1px solid rgba(255,255,255,0.45); border-radius: 999px; color: #fff; font-size: 0.85rem; font-weight: 600; background: rgba(8,22,33,0.25); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

/* Intro */
.v5-intro__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 3rem clamp(3rem, 8vw, 10rem); align-items: start; }
.v5-intro__tekst { padding-top: 2.6rem; }
.v5-intro__tekst p { font-size: 1.02rem; line-height: 1.7; }

/* Toepassingen */
.v5-toep { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.8fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 5rem); align-items: start; }
.v5-toep__tekst p { max-width: 30rem; }
.v5-toep__beeld img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 16px; }
.v5-lijst__kop { font-weight: 700; color: var(--v5-inkt) !important; margin: 0 0 1.2rem; }
.v5-lijst { list-style: none; border-top: 1px solid var(--v5-rand); }
.v5-lijst li { border-bottom: 1px solid var(--v5-rand); }
.v5-lijst a { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.95rem 0; color: var(--v5-inkt); text-decoration: none; font-size: 1rem; }
.v5-lijst__pijl { color: var(--merk); transition: transform 180ms ease; }
.v5-lijst a:hover { color: var(--merk-donker); }
.v5-lijst a:hover .v5-lijst__pijl { transform: translateX(4px); }

/* Paneel met beeld rechts */
.v5-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2rem, 4vw, 5rem); align-items: center; padding: 20px 20px 20px var(--v5-p); }
.v5-split__tekst { padding-block: clamp(2rem, 4vw, 4rem); max-width: 34rem; }
.v5-split__beeld .schuif, .v5-split__beeld > picture img { width: 100%; aspect-ratio: 16 / 11; border-radius: 16px; box-shadow: none; object-fit: cover; }
.v5-split__beeld .schuif__tag { border-radius: 999px; padding: 0.35rem 0.8rem; }
.v5-split__beeld .schuif__tag--na { background: var(--merk-donker); }

/* Doorsnede binnen v5 */
.v5 .ds-sectie { margin: 0 10px; padding-block: clamp(4rem, 2.5rem + 5vw, 8rem); background: #fff; border: 0; }
.v5 .ds-sectie .container { max-width: none; padding-inline: var(--v5-p); }
.v5 .ds-sectie .sectie__kop { max-width: none; margin-bottom: clamp(2rem, 3vw, 3rem); }
.v5 .ds__venster, .v5 .schaal { border-radius: 16px; }

/* Donker vlak */
.v5-donker { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 6rem); align-items: center; overflow: hidden; position: relative; }
.v5-donker__kunst { align-self: stretch; position: relative; min-height: 420px; margin: calc(-1 * clamp(3.5rem, 2rem + 5vw, 7.5rem)) 0; }
.v5-donker__kunst .bundel { position: absolute; left: 50%; bottom: -8%; width: min(115%, 760px); height: auto; transform: translateX(-50%); opacity: 0.85; }
.v5-donker .v5-kicker { color: var(--v5-accent) !important; }
.v5-kop--accent { color: var(--v5-accent) !important; font-size: clamp(2.5rem, 1.3rem + 3.6vw, 4.6rem); line-height: 1.02; max-width: 12ch; }
.v5 .v5-donker p { color: #CFE2EE; max-width: 32rem; }
.v5-donker__cijfers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2rem; margin-top: 2rem; max-width: 34rem; }
.v5-donker__cijfers > div { padding: 1.1rem 0; border-top: 1px solid rgba(255,255,255,0.15); display: flex; flex-direction: column; justify-content: flex-start; gap: 0.3rem; }
.v5-donker__cijfers dd { order: -1; }
.v5-donker__cijfers dd { color: #fff; font-size: clamp(1.5rem, 1.2rem + 0.9vw, 2.1rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.v5-donker__cijfers dt { color: #9DBFD3; font-size: 0.85rem; line-height: 1.4; }
.v5-donker .knop { background: var(--v5-accent); border-color: var(--v5-accent); color: var(--v5-inkt); }
.v5-donker .knop:hover { background: #fff; border-color: #fff; }

/* Kopregel: kop links, tekst en knop rechts */
.v5-kopregel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 1.5rem clamp(2rem, 6vw, 8rem); align-items: end; margin-bottom: clamp(2.5rem, 4vw, 3.5rem); }
.v5-kopregel .v5-kop { margin: 0; }
.v5-kopregel__rechts p { margin: 0; }
.v5-kopregel__rechts .v5-knoppen { margin-top: 1.2rem; }

/* Stappen */
.v5-stappen__lijst { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 1.6vw, 1.75rem); }
.v5-stap__beeld img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; }
.v5-stap__nr { margin: 1.1rem 0 0.3rem; font-size: 0.85rem; font-weight: 700; color: var(--merk-donker) !important; }
.v5-stap h3 { font-size: 1.2rem; font-weight: 700; margin: 0 0 0.45rem; }
.v5-stap p:last-child { font-size: 0.95rem; margin: 0; }

/* Kennisbank */
.v5-kennis { padding-top: 0; }
.v5-kennis__lijst { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 1.6vw, 1.75rem); }
.v5-artikel { display: block; text-decoration: none; color: inherit; }
.v5-artikel__beeld { overflow: hidden; border-radius: 16px; }
.v5-artikel__beeld img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 400ms ease; }
.v5-artikel:hover .v5-artikel__beeld img { transform: scale(1.035); }
.v5-artikel h3 { font-size: 1.3rem; font-weight: 700; margin: 1.3rem 0 0.5rem; transition: color 180ms ease; }
.v5-artikel:hover h3 { color: var(--merk-donker); }
.v5-artikel p { margin: 0; font-size: 0.97rem; }

/* Vragen */
.v5-vragen { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 2rem clamp(2rem, 6vw, 8rem); align-items: start; }
.v5-vragen .faq__lijst { border-top: 1px solid #BFD9E8; }
.v5-vragen .faq__item { border-bottom: 1px solid #BFD9E8; }
.v5-vragen .faq__item summary { font-family: var(--font-tekst); font-weight: 700; font-size: 1.08rem; color: var(--v5-inkt); }
.v5-vragen .faq__item summary::after { border-radius: 999px; border-color: #A9CDE1; color: var(--v5-inkt); background: #fff; }

/* Afsluiter */
.v5-slot { display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr); gap: 10px; margin: 10px; }
.v5-slot > .v5-paneel { margin: 0; }
.v5-slot__hoofd { display: flex; flex-direction: column; justify-content: center; }
.v5-slot__lead { font-weight: 600; color: var(--v5-inkt) !important; font-size: 1.05rem; max-width: 30rem; margin: 0; }
.v5-slot__kaart { padding: 10px 10px 18px; display: flex; flex-direction: column; }
.v5-slot__beeld img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; }
.v5-slot__kaart h3 { font-size: 1.45rem; font-weight: 700; margin: 1.2rem 8px 0.4rem; }
.v5-slot__kaart p { margin: 0 8px 1.2rem; font-size: 0.92rem; }
.v5-slot__knop { margin: auto 8px 0; justify-content: center; }

/* ---------- Footer: donker paneel ---------- */
.site-footer { margin: 10px; border-radius: var(--v5-r); background: var(--v5-donker); color: #A9C2D2; border: 0; }
.site-footer .container { max-width: none; padding-inline: var(--v5-p); }
.footer__bedrijf img { width: auto; height: 50px; }
.footer__slogan { color: var(--v5-accent); }
.footer__kolom h2 { color: var(--v5-accent); font-family: var(--font-tekst); font-weight: 700; font-size: 0.95rem; }
.footer__kolom a, .site-footer .contact__regel a { color: #E4EFF6; font-weight: 600; }
.footer__kolom a:hover, .site-footer .contact__regel a:hover { color: var(--v5-accent); }
.site-footer .adres, .site-footer .adres strong { color: #E4EFF6; }
.site-footer .contact__regel .icoon { color: var(--v5-accent); }
.site-footer .tijden > div { border-color: rgba(255,255,255,0.12); }
.site-footer .tijden dt { color: #A9C2D2; }
.site-footer .tijden dd { color: #fff; }
.footer__cert { color: #8FAEC2; }
.footer__onder { border-top: 1px solid rgba(255,255,255,0.12); }
.footer__onder p, .footer__onder a { color: #8FAEC2; }
.footer__onder a:hover { color: var(--v5-accent); }

/* ---------- Responsief ---------- */
@media (max-width: 1100px) {
  .v5-toep { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .v5-toep__tekst { grid-column: 1 / -1; }
  .v5-stappen__lijst { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.5rem; }
  .v5-slot { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); }
}
@media (max-width: 860px) {
  .v5-intro__grid, .v5-split, .v5-donker, .v5-kopregel, .v5-vragen, .v5-slot { grid-template-columns: minmax(0, 1fr); }
  .v5-intro__tekst { padding-top: 0; }
  .v5-split { padding: 20px; }
  .v5-split__tekst { padding: 1.5rem 0.5rem 0; }
  .v5-donker__kunst { order: 2; min-height: 260px; margin: 0 calc(-1 * var(--v5-p)) calc(-1 * clamp(3.5rem, 2rem + 5vw, 7.5rem)); }
  .v5-hero { padding-top: 120px; padding-bottom: 2.5rem; align-items: flex-end; flex-direction: column; justify-content: flex-end; }
  .v5-hero__beeld::after { background: linear-gradient(0deg, rgba(8,22,33,0.88) 0%, rgba(8,22,33,0.55) 55%, rgba(8,22,33,0.2) 100%); }
  .v5-hero__inhoud { width: 100%; }
  .v5-hero__feiten { position: static; flex-wrap: wrap; width: 100%; margin-top: 1.75rem; }
  .v5-hero__feiten li { font-size: 0.78rem; padding: 0.4rem 0.8rem; }
}
@media (max-width: 600px) {
  .v5-toep, .v5-stappen__lijst, .v5-kennis__lijst { grid-template-columns: minmax(0, 1fr); }
  .v5-toep__beeld img { aspect-ratio: 4 / 3; }
  .v5-donker__cijfers { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 1rem; }
  .v5-paneel, .v5-hero, .site-footer { margin: 8px; border-radius: 16px; }
  .v5-slot { margin: 8px; gap: 8px; }
  .v5-blok { margin: 0 8px; }
}

/* ---------- v5 bijstellingen (12-10-2026): leesbare header, vlaggen, rustiger formaten ---------- */
:root { --v5-p: max(clamp(20px, 2.4vw, 40px), calc((100vw - 20px - 1320px) / 2)); }

/* Header over de foto: donker glas, zodat de witte tekst altijd leesbaar is. */
body:not(.menu-open) .site-header--over-foto .hoofdbalk { background: rgba(8,22,33,0.5); border-color: rgba(255,255,255,0.16); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); }

/* Taalkeuze met landvlaggen */
.talen ul { gap: 0.2rem; }
.taal, .hoofdbalk .taal { width: 32px; height: 32px; padding: 0; justify-content: center; border-radius: 999px; opacity: 1; background: transparent; }
.vlag { width: 21px; height: 14px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0,0,0,0.12); }
.taal.taal--actief, .hoofdbalk .taal.taal--actief { background: transparent; box-shadow: inset 0 0 0 2px var(--v5-inkt); }
body:not(.menu-open) .site-header--over-foto .hoofdbalk .taal.taal--actief { background: transparent; box-shadow: inset 0 0 0 2px #fff; }
.taal--uit .vlag { opacity: 0.4; filter: grayscale(0.4); }
a.taal:hover { background: rgba(16,33,46,0.08); }
.nav__mobiel-extra .taal { width: 40px; height: 40px; border: 0; }
.nav__mobiel-extra .taal--actief { background: transparent; box-shadow: inset 0 0 0 2px var(--v5-inkt); }

/* Rustiger koppen */
.v5-kop { font-size: clamp(1.75rem, 1.3rem + 1.3vw, 2.35rem); }
.v5-kop--groot { font-size: clamp(2.1rem, 1.3rem + 2.4vw, 3.4rem); }
.v5 .kop2 { font-size: clamp(1.75rem, 1.3rem + 1.3vw, 2.35rem); }
.v5-kop--accent { font-size: clamp(2.1rem, 1.3rem + 2.4vw, 3.4rem); }

/* Donker vlak met foto van het pand */
.v5-donker__beeld img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; object-position: 60% 50%; border-radius: 16px; }

/* Werkwijze en kennisbank kleiner en rustiger */
.v5-blok { padding-block: clamp(3.5rem, 2.5rem + 3.5vw, 6rem); }
.v5-stap__beeld img { aspect-ratio: 3 / 2; border-radius: 12px; }
.v5-stap h3 { font-size: 1.05rem; }
.v5-stap p:last-child { font-size: 0.92rem; }
.v5-artikel__beeld { border-radius: 12px; }
.v5-artikel__beeld img { aspect-ratio: 16 / 10; }
.v5-artikel h3 { font-size: 1.1rem; margin-top: 1rem; }
.v5-artikel p { font-size: 0.92rem; }
.v5-toep__beeld img { aspect-ratio: 4 / 5; max-height: 460px; }
@media (max-width: 860px) { .v5-donker__beeld { order: -1; } }

/* Achtergrondvideo in de hero: foto eronder als poster, video fadet in zodra hij speelt. */
.v5-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 800ms ease; }
.v5-hero__video.is-zichtbaar { opacity: 1; }
.v5-hero__beeld::after { z-index: 1; }
.v5-hero__pauze { position: absolute; left: var(--v5-p); bottom: 32px; z-index: 2; width: 40px; height: 40px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.45); background: rgba(8,22,33,0.3); color: #fff; display: inline-flex; align-items: center; justify-content: center; padding: 0; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.v5-hero__pauze:hover { background: rgba(8,22,33,0.55); }
.v5-hero__pauze svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.v5-hero__pauze .ico-speel { display: none; fill: currentColor; stroke-width: 1.5; }
.v5-hero__pauze.is-gepauzeerd .ico-pauze { display: none; }
.v5-hero__pauze.is-gepauzeerd .ico-speel { display: inline; }
@media (max-width: 860px) { .v5-hero__pauze { position: absolute; top: 96px; bottom: auto; left: auto; right: 24px; } }
@media (prefers-reduced-motion: reduce) { .v5-hero__video { display: none; } }

/* ---------- Glasheader overal (12-10-2026): donker glas met witte tekst, op elke pagina en scrollpositie.
   Boven de fotohero blijft hij zoals hij was (50 %); boven lichte inhoud iets voller voor contrast. ---------- */
body:not(.menu-open) .site-header .hoofdbalk { background: rgba(12,29,42,0.84); border-color: rgba(255,255,255,0.14); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); box-shadow: 0 14px 30px -22px rgba(12,29,42,0.55); }
body:not(.menu-open) .site-header--over-foto .hoofdbalk { background: rgba(8,22,33,0.5); border-color: rgba(255,255,255,0.16); box-shadow: none; }
body:not(.menu-open) .site-header .logo__kleur { display: none; }
body:not(.menu-open) .site-header .logo__wit { display: block; }
body:not(.menu-open) .site-header .nav__item > a,
body:not(.menu-open) .site-header .nav__toggle,
body:not(.menu-open) .site-header .hoofdbalk__tel { color: #fff; }
body:not(.menu-open) .site-header .nav__item > a:hover,
body:not(.menu-open) .site-header .nav__item--actief > a,
body:not(.menu-open) .site-header .hoofdbalk__tel:hover { color: var(--v5-accent); }
body:not(.menu-open) .site-header .hoofdbalk .taal.taal--actief { box-shadow: inset 0 0 0 2px #fff; }
body:not(.menu-open) .site-header a.taal:hover { background: rgba(255,255,255,0.12); }
body:not(.menu-open) .site-header .menuknop { color: #fff; border-color: rgba(255,255,255,0.5); }
body:not(.menu-open) .site-header .menuknop__lijnen::before, body:not(.menu-open) .site-header .menuknop__lijnen::after { background: #fff; }
body:not(.menu-open) .site-header .menuknop__lijnen::before { box-shadow: 0 5px 0 #fff; }
.hoofdbalk__cta { border-color: rgba(255,255,255,0.22); }
@media (min-width: 1240px) { .nav__sub { top: calc(100% - 4px); } }

/* =====================================================================
   v5 op de subpagina's (12-10-2026): dezelfde taal als de homepage.
   Afgeronde panelen met 10 px marge, pastel paginakop met bogen, donker
   marine afsluitvlak, kaarten zonder kader, pilknoppen die overal leesbaar
   zijn, en een nette tijdentabel in footer en contactblok.
   ===================================================================== */

/* Knoppen: secundair op donker of gekleurd vlak altijd wit */
.cta .knop.knop--secundair, .sectie--donker .knop.knop--secundair, .contact__info .knop.knop--secundair, .v5-paneel--donker .knop.knop--secundair { background: transparent; color: #fff; border-color: rgba(255,255,255,0.55); }
.cta .knop.knop--secundair:hover, .sectie--donker .knop.knop--secundair:hover, .contact__info .knop.knop--secundair:hover, .v5-paneel--donker .knop.knop--secundair:hover { background: rgba(255,255,255,0.14); color: #fff; border-color: #fff; }
.cta .knop:not(.knop--secundair) { background: var(--v5-accent); color: var(--v5-inkt); border-color: var(--v5-accent); }
.cta .knop:not(.knop--secundair):hover { background: #fff; border-color: #fff; color: var(--v5-inkt); }
.paginakop .knop.knop--secundair { background: rgba(255,255,255,0.6); color: var(--v5-inkt); border-color: rgba(16,33,46,0.2); }
.paginakop .knop.knop--secundair:hover { background: var(--v5-inkt); color: #fff; border-color: var(--v5-inkt); }

/* Paginakop: pastel paneel met bogen, foto met ronde hoeken */
.paginakop { margin: 10px; border-radius: var(--v5-r); border: 0; color: var(--v5-tekst); padding: calc(var(--header-totaal) + 56px) var(--v5-p) clamp(3rem, 2rem + 3vw, 4.5rem); background-color: var(--v5-pastel); background-image: repeating-radial-gradient(circle at -12% 50%, rgba(255,255,255,0) 0, rgba(255,255,255,0.6) 230px); }
.site-header:not(.v5 .site-header) { position: fixed; left: 0; right: 0; }
.paginakop .container { max-width: none; padding-inline: 0; }
.paginakop .label { color: var(--v5-inkt); text-transform: none; letter-spacing: -0.005em; font-size: 0.98rem; font-weight: 700; }
.paginakop h1 { color: var(--v5-inkt); font-size: clamp(2.1rem, 1.3rem + 2.4vw, 3.4rem); line-height: 1.05; letter-spacing: -0.025em; }
.paginakop .lead { color: var(--v5-tekst); }
.paginakop__beeld img { border-radius: 16px; aspect-ratio: 4 / 3; }

/* Kruimelpad boven de pastel paginakop */
.kruimelpad { position: absolute; left: 0; right: 0; z-index: 3; padding: 0; margin-top: calc(var(--header-totaal) + 14px); background: transparent; border: 0; }
.kruimelpad .container { max-width: none; padding-inline: calc(var(--v5-p) + 10px); }
.kruimelpad a, .kruimelpad span, .kruimelpad li { color: rgba(16,33,46,0.7); }
.kruimelpad a:hover { color: var(--v5-inkt); }

/* Secties en labels */
.sectie { padding-block: clamp(3.5rem, 2.5rem + 3.5vw, 6rem); }
.sectie--licht, .sectie--donker { margin: 10px; border-radius: var(--v5-r); background: var(--v5-licht); color: var(--v5-tekst); }
.sectie--licht .container, .sectie--donker .container { max-width: none; padding-inline: var(--v5-p); }
.sectie .label { color: var(--v5-inkt); text-transform: none; letter-spacing: -0.005em; font-size: 0.98rem; font-weight: 700; }
.sectie h2, .sectie h3 { color: var(--v5-inkt); letter-spacing: -0.02em; }
.sectie__intro, .lead { color: var(--v5-tekst); }
main p { color: var(--v5-tekst); }

/* Kaarten: zonder kader, ronde foto, pijl in merkkleur (zoals de kennisbank op de homepage) */
.kaart { background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.kaart::after { display: none; }
.kaart--link:hover { transform: none; box-shadow: none; border-color: transparent; }
.kaart__beeld { border-radius: 14px; overflow: hidden; }
.kaart__beeld img, .v4 .kaart__beeld img { border-radius: 0; aspect-ratio: 16 / 11; transition: transform 400ms ease; }
.kaart--link:hover .kaart__beeld img { transform: scale(1.035); }
.kaart__inhoud { padding: 1.1rem 0.25rem 0; }
.kaart h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 0.4em; transition: color 180ms ease; }
.kaart--link:hover h3 { color: var(--merk-donker); }
.kaart p { color: var(--v5-tekst); font-size: 0.93rem; margin-bottom: 0.9rem; }
.kaart__link { color: var(--v5-inkt); font-size: 0.9rem; gap: 0.3rem; }
.kaart__link span { color: var(--merk); transition: transform 180ms ease; display: inline-block; }
.kaart--link:hover .kaart__link { color: var(--merk-donker); }
.kaart--link:hover .kaart__link span { transform: translateX(4px); }
.kaart__meta { color: var(--merk-donker); }
.kaarten__grid { gap: clamp(1.25rem, 2vw, 2rem) clamp(1rem, 1.6vw, 1.75rem); }
.kaart--beeld { border-radius: 16px; overflow: hidden; background: var(--v5-donker); }
.kaart--beeld .kaart__inhoud { padding: 1.5rem 1.4rem; }
.kaart--beeld:hover { transform: none; box-shadow: none; }

/* Specblok (kerngegevens) en contactblok: licht paneel met ronde hoeken */
.specblok, .contact__info { background: var(--v5-licht); border: 0; border-radius: 16px; padding: 1.75rem; box-shadow: none; }
.specblok h3, .contact__info h2, .contact__info h3 { color: var(--v5-inkt); }
.specblok dl > div, .contact__info .tijden > div { border-color: #BFD9E8; }
.specblok dt, .contact__route { color: var(--v5-tekst); }
.specblok dd, .contact__info .tijden dd, .contact__info .contact__regel a, .contact__info .adres strong { color: var(--v5-inkt); }
.specblok .knop, .contact__info .knop:not(.knop--secundair) { background: var(--v5-inkt); color: var(--v5-pastel); border-color: var(--v5-inkt); }
.specblok .knop:hover, .contact__info .knop:not(.knop--secundair):hover { background: var(--merk-donker); border-color: var(--merk-donker); color: #fff; }
.contact__info .knop.knop--secundair { color: var(--v5-inkt); border-color: rgba(16,33,46,0.3); }
.contact__info .knop.knop--secundair:hover { background: var(--v5-inkt); color: #fff; border-color: var(--v5-inkt); }
.contact__info .contact__regel .icoon { color: var(--merk-donker); }

/* Openingstijden: dagen links (mogen afbreken), tijden rechts op één regel */
.tijden > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 0.75rem; }
.tijden dd { white-space: nowrap; text-align: right; }

/* USP's, stappen, FAQ, specs en formulier in dezelfde ronde taal */
.usp { background: #fff; border: 0; border-radius: 16px; }
.sectie--donker .usp, .sectie--licht .usp { background: #fff; }
.usp__icoon, .sectie--donker .usp__icoon { color: var(--merk-donker); }
.usp p { color: var(--v5-tekst); }
.stap { border-color: var(--v5-rand); }
.stap:last-child { border-color: var(--v5-rand); }
.stap__nr { border-radius: 999px; border-color: var(--v5-pastel); background: var(--v5-pastel); color: var(--v5-inkt); font-family: var(--font-tekst); }
.stap p { color: var(--v5-tekst); }
.faq__lijst { border-top: 1px solid #BFD9E8; }
.faq__item { border-color: #BFD9E8; }
.faq__item summary { font-family: var(--font-tekst); font-weight: 700; font-size: 1.08rem; color: var(--v5-inkt); }
.faq__item summary::after { border-radius: 999px; border-color: #A9CDE1; color: var(--v5-inkt); background: #fff; }
.faq__item[open] summary::after { background: var(--v5-inkt); color: #fff; border-color: var(--v5-inkt); }
.specs__lijst { border-top-color: var(--v5-inkt); }
.spec { border-color: var(--v5-rand); }
.spec dt { color: var(--v5-tekst); }
.spec dd { color: var(--v5-inkt); }
.veld input, .veld textarea, .veld select { border-radius: 10px; border-color: var(--v5-rand); }
.veld input:focus-visible, .veld textarea:focus-visible, .veld select:focus-visible { border-color: var(--merk-donker); box-shadow: 0 0 0 3px rgba(0,159,227,0.2); }
.split__beeld img, .figuur__kader img, .galerij .figuur img, .schuif { border-radius: 16px; }
.figuur__kader picture { border-radius: 16px; }
.schuif__tag { border-radius: 999px; padding: 0.35rem 0.8rem; }
.schuif__tag--na { background: var(--merk-donker); }
.partner, .lijst__item { border-radius: 16px; }

/* Afsluiter: donker marine paneel zoals het cijfervlak op de homepage */
.cta { margin: 10px; border-radius: var(--v5-r); background: var(--v5-donker); color: #CFE2EE; padding: clamp(3.5rem, 2.5rem + 4vw, 6rem) var(--v5-p); }
.cta .container { max-width: none; padding-inline: 0; }
.cta .label { color: var(--v5-accent); }
.cta h2 { color: #fff; letter-spacing: -0.025em; }
.cta p { color: #CFE2EE; }
.cta__contact a { color: #fff; }
.cta__contact a:hover { color: var(--v5-accent); }
.cta__beeld { border-radius: 0 var(--v5-r) var(--v5-r) 0; overflow: hidden; }
.cta__beeld::after { background: linear-gradient(90deg, var(--v5-donker) 0%, rgba(12,29,42,0.7) 30%, rgba(12,29,42,0.25) 100%); }
.cta + .site-footer { margin-top: 10px; }

/* 404 en kleine schermen */
@media (max-width: 600px) {
  .paginakop, .sectie--licht, .sectie--donker, .cta { margin: 8px; border-radius: 16px; }
}

/* ---------- Stappen in twee kolommen en nette tabellen (12-10-2026) ---------- */
.proces__kop { margin-bottom: clamp(2rem, 3vw, 2.75rem); }
.proces__kop .sectie__kop { margin-bottom: 0; }
.proces__kop--beeld { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 1.5rem clamp(2rem, 5vw, 5rem); align-items: center; }
.proces__beeld .figuur { margin: 0; }
.proces__beeld img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.stappen--raster { list-style: none; max-width: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; counter-reset: none; }
.stappen--raster .stap { display: block; padding: 1.6rem 1.6rem 1.5rem; border: 0; border-radius: 16px; background: var(--v5-licht); }
.stappen--raster .stap:last-child { border: 0; }
.sectie--licht .stappen--raster .stap, .v5-paneel--licht .stappen--raster .stap { background: #fff; }
.stappen--raster .stap:last-child:nth-child(odd) { grid-column: 1 / -1; }
.stappen--raster .stap__nr { width: 2.4rem; height: 2.4rem; font-size: 0.9rem; margin-bottom: 1rem; }
.sectie--licht .stappen--raster .stap__nr { background: var(--v5-pastel); }
.stappen--raster .stap h3 { font-size: 1.12rem; font-weight: 700; margin: 0 0 0.4rem; }
.stappen--raster .stap p { font-size: 0.95rem; line-height: 1.65; margin: 0; }
@media (max-width: 860px) {
  .proces__kop--beeld { grid-template-columns: minmax(0, 1fr); }
  .stappen--raster { grid-template-columns: minmax(0, 1fr); }
}

.tabel { margin: 0 0 1.5em; background: #fff; border: 1px solid var(--v5-rand); border-radius: 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.prose .tabel table, .tabel table { display: table; width: 100%; min-width: 560px; margin: 0; border-collapse: separate; border-spacing: 0; font-size: 0.93rem; }
.tabel th, .tabel td { padding: 0.95rem 1.15rem; text-align: left; vertical-align: top; border: 0; border-bottom: 1px solid var(--v5-rand); line-height: 1.55; }
.tabel thead th { background: var(--v5-licht); color: var(--v5-inkt); font-size: 0.84rem; font-weight: 700; letter-spacing: 0; border-bottom: 1px solid #BFD9E8; white-space: nowrap; }
.sectie--licht .tabel thead th { background: var(--v5-pastel); }
.tabel tbody tr:last-child > * { border-bottom: 0; }
.tabel tbody tr:nth-child(even) > * { background: #F7FBFE; }
.tabel th[scope="row"], .tabel tbody th, .tabel tbody td:first-child { color: var(--v5-inkt); font-weight: 700; background: transparent; }
.tabel tbody tr:nth-child(even) th[scope="row"] { background: #F7FBFE; }
.tabel td { color: var(--v5-tekst); }

/* ---------- Eén linkerlijn op alle pagina's (12-10-2026) ----------
   Witte secties gebruiken dezelfde maat als panelen en paginakop: 10 px marge plus --v5-p,
   maximaal 1320 px inhoud. Leesbreedte wordt binnen de sectie begrensd, niet via de container. */
main > .sectie:not(.sectie--licht):not(.sectie--donker):not(.cta) > .container,
.kruimelpad .container { max-width: none; padding-inline: calc(var(--v5-p) + 10px); }
.faq .tekst__smal { max-width: none; }
.faq .faq__lijst { max-width: 56rem; }
.tekst__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: clamp(2rem, 5vw, 6rem); }
.tekst__grid .prose { max-width: 46rem; }
@media (max-width: 600px) {
  main > .sectie:not(.sectie--licht):not(.sectie--donker):not(.cta) > .container, .kruimelpad .container { padding-inline: calc(var(--v5-p) + 8px); }
}

/* ---------- Kennisbank: E-E-A-T en AI (12-10-2026) ---------- */
.artikel__grid { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5.5rem); }
.artikel__zij { top: 100px; display: grid; gap: 1.25rem; }
.artikel__tekst { max-width: 46rem; }
.toc { border: 0; padding: 1.25rem 1.25rem 1rem; margin: 0; background: var(--v5-licht); border-radius: 16px; }
.toc__kop { font-family: var(--font-tekst); font-size: 0.9rem; font-weight: 700; color: var(--v5-inkt); margin-bottom: 0.6rem; }
.toc li { border-top: 1px solid #CFE3EF; font-size: 0.88rem; }
.toc li::before { color: var(--merk-donker); }
.toc a { color: var(--v5-tekst); }
.toc a:hover { color: var(--merk-donker); }

/* Byline */
.byline { display: flex; align-items: center; gap: 0.85rem; padding-bottom: 1.25rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--v5-rand); }
.byline__beeld { flex: none; width: 44px; height: 44px; border-radius: 999px; background: var(--v5-licht); display: flex; align-items: center; justify-content: center; }
.byline__tekst p { margin: 0; line-height: 1.45; }
.byline__wie { font-weight: 700; color: var(--v5-inkt) !important; font-size: 0.95rem; }
.byline__wie a, .byline__wanneer a { color: inherit; text-decoration-color: rgba(16,33,46,0.3); }
.byline__wanneer { font-size: 0.85rem; color: var(--v5-tekst) !important; }

/* In het kort */
.kort { background: var(--v5-licht); border-left: 4px solid var(--merk); border-radius: 0 14px 14px 0; padding: 1.1rem 1.35rem; margin: 0 0 2rem; }
.kort__titel { font-size: 0.8rem; font-weight: 700; color: var(--merk-donker) !important; margin: 0 0 0.3rem; text-transform: uppercase; letter-spacing: 0.06em; }
.kort p:last-child { margin: 0; color: var(--v5-inkt); font-size: 1.02rem; line-height: 1.6; }

/* AI-blok */
.ai { background: #fff; border: 1px solid var(--v5-rand); border-radius: 16px; padding: 1.15rem 1.2rem 1.2rem; }
.ai__kop { display: flex; align-items: center; gap: 0.55rem; margin-bottom: 0.7rem; }
.ai__kop .icoon { width: 26px; height: 26px; padding: 5px; border-radius: 999px; background: var(--v5-licht); color: var(--merk); fill: currentColor; stroke: none; flex: none; }
.ai__titel { margin: 0; font-weight: 700; font-size: 0.95rem; color: var(--v5-inkt) !important; }
.ai__keuze { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--v5-licht); margin-bottom: 0.7rem; }
.ai__optie { border: 0; background: transparent; border-radius: 999px; padding: 0.38rem 0.9rem; font-size: 0.82rem; font-weight: 700; color: var(--v5-tekst); }
.ai__optie[aria-pressed="true"] { background: #fff; color: var(--v5-inkt); box-shadow: 0 1px 3px rgba(12,29,42,0.15); }
.ai__uitleg { font-size: 0.82rem; line-height: 1.5; color: var(--v5-tekst) !important; margin: 0 0 0.85rem; }
.ai__knoppen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem; }
.ai__knop { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; padding: 0.55rem 0.6rem; border: 1px solid var(--v5-rand); border-radius: 10px; background: #fff; color: var(--v5-inkt); font-size: 0.82rem; font-weight: 700; text-decoration: none; transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease; }
.ai__knop img { width: 16px; height: 16px; }
.ai__knop:hover { border-color: #A9CDE1; transform: translateY(-1px); box-shadow: 0 6px 14px -10px rgba(12,29,42,0.4); color: var(--v5-inkt); }
.ai-sectie { padding-block: 0 clamp(2.5rem, 4vw, 4rem); }
.ai-sectie .ai { max-width: 46rem; padding: 1.5rem 1.6rem; }
.ai-sectie .ai__knoppen { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Bronnen, redactieblok, delen */
.bronnen { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--v5-rand); }
.bronnen h2 { font-size: 1.15rem; margin-bottom: 0.75rem; }
.bronnen ol { padding-left: 1.2rem; display: grid; gap: 0.5rem; }
.bronnen li { font-size: 0.9rem; color: var(--v5-tekst); padding-left: 0.2rem; }
.bronnen li::marker { color: var(--merk-donker); font-weight: 700; }
.bronnen a { color: var(--v5-inkt); }
.bronnen__uitgever { display: inline-block; margin-left: 0.35rem; padding: 0.05rem 0.5rem; border-radius: 999px; background: var(--v5-licht); color: var(--v5-tekst); font-size: 0.75rem; font-weight: 600; }
.redactieblok { margin-top: 2rem; padding: 1.3rem 1.4rem; border-radius: 16px; background: var(--v5-licht); }
.redactieblok p { font-size: 0.9rem; margin: 0 0 0.6rem; }
.redactieblok p:last-child { margin: 0; }
.redactieblok__titel { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; color: var(--v5-inkt) !important; font-size: 0.95rem !important; }
.redactieblok__titel .icoon { color: var(--merk-donker); }
.redactieblok a { color: var(--v5-inkt); font-weight: 600; }
.deel { margin-top: 1.75rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; }
.deel__titel { margin: 0; font-weight: 700; font-size: 0.9rem; color: var(--v5-inkt) !important; }
.deel__knoppen { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.deel__knop { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.85rem; border: 1px solid var(--v5-rand); border-radius: 999px; background: #fff; color: var(--v5-inkt); font: inherit; font-size: 0.82rem; font-weight: 600; text-decoration: none; cursor: pointer; }
.deel__knop:hover { border-color: var(--v5-inkt); color: var(--v5-inkt); }
.deel__knop .icoon { width: 15px; height: 15px; }
.deel__knop.is-gekopieerd { background: var(--v5-inkt); border-color: var(--v5-inkt); color: #fff; }
@media (max-width: 860px) {
  .artikel__zij { order: 2; }
  .ai-sectie .ai__knoppen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Auteurs (12-10-2026) ---------- */
.byline__beeld--initialen { background: var(--v5-inkt); color: var(--v5-pastel); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.02em; }
.byline__functie { font-weight: 500; color: var(--v5-tekst); }
.auteurkaart { display: flex; gap: 1.1rem; align-items: flex-start; margin-top: 2.5rem; padding: 1.4rem; border: 1px solid var(--v5-rand); border-radius: 16px; background: #fff; }
.auteurkaart__beeld, .auteurkop__beeld { flex: none; display: flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--v5-inkt); color: var(--v5-pastel); font-weight: 700; }
.auteurkaart__beeld { width: 56px; height: 56px; font-size: 1.05rem; }
.auteurkaart p { margin: 0; }
.auteurkaart__label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--merk-donker) !important; margin-bottom: 0.15rem !important; }
.auteurkaart__naam { font-size: 1.1rem; font-weight: 700; color: var(--v5-inkt) !important; }
.auteurkaart__naam a { color: inherit; text-decoration: none; }
.auteurkaart__naam a:hover { color: var(--merk-donker); }
.auteurkaart__functie { font-size: 0.88rem; color: var(--v5-tekst) !important; margin-bottom: 0.5rem !important; }
.auteurkaart__kort { font-size: 0.92rem; }
.auteurkaart__links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin-top: 0.75rem !important; font-size: 0.88rem; font-weight: 700; }
.auteurkaart__links a { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--v5-inkt); text-decoration: none; }
.auteurkaart__links a:hover { color: var(--merk-donker); }
.auteurkaart__links .icoon { width: 15px; height: 15px; color: var(--merk-donker); }
.auteurkaart + .redactieblok { margin-top: 1rem; }
.auteurkop__grid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(1.25rem, 3vw, 2.5rem); align-items: center; }
.auteurkop__beeld { width: clamp(96px, 12vw, 148px); height: clamp(96px, 12vw, 148px); font-size: clamp(1.8rem, 3vw, 2.8rem); box-shadow: 0 0 0 8px rgba(255,255,255,0.55); }
.auteurkop__label { font-size: 0.95rem; font-weight: 700; color: var(--v5-inkt) !important; margin: 0 0 0.6rem; }
.auteurkop .lead { max-width: 40rem; }
@media (max-width: 600px) { .auteurkop__grid { grid-template-columns: minmax(0, 1fr); } .auteurkaart { flex-direction: column; } }

/* ---------- Afsluiter licht, footer met gloed (12-10-2026) ----------
   Twee donkere vlakken op elkaar werden te zwaar. De afsluiter wordt pastelblauw met bogen
   (zoals op de homepage), de footer blijft donker maar krijgt licht en lijnwerk in de huisstijl. */
.cta { background-color: var(--v5-pastel); background-image: repeating-radial-gradient(circle at -12% 50%, rgba(255,255,255,0) 0, rgba(255,255,255,0.6) 230px); color: var(--v5-tekst); }
.cta .label { color: var(--v5-inkt); }
.cta h2 { color: var(--v5-inkt); }
.cta p { color: var(--v5-tekst); }
.cta .knop:not(.knop--secundair) { background: var(--v5-inkt); color: var(--v5-pastel); border-color: var(--v5-inkt); }
.cta .knop:not(.knop--secundair):hover { background: var(--merk-donker); border-color: var(--merk-donker); color: #fff; }
.cta .knop.knop--secundair { background: #fff; color: var(--v5-inkt); border-color: #fff; }
.cta .knop.knop--secundair:hover { background: var(--v5-inkt); color: #fff; border-color: var(--v5-inkt); }
.cta__contact a { color: var(--v5-inkt); font-weight: 600; }
.cta__contact a:hover { color: var(--merk-donker); }
.cta__beeld::after { background: linear-gradient(90deg, var(--v5-pastel) 0%, rgba(201,233,250,0.55) 35%, rgba(201,233,250,0) 100%); }

.site-footer { position: relative; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(ellipse 60% 70% at 92% 0%, rgba(0,159,227,0.30), rgba(0,159,227,0) 70%),
    radial-gradient(ellipse 45% 60% at 0% 100%, rgba(0,121,181,0.22), rgba(0,121,181,0) 70%),
    var(--v5-donker); }
.site-footer::before { content: ''; position: absolute; z-index: -1; right: -14%; bottom: -68%; width: min(720px, 64vw); aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: repeating-radial-gradient(circle, rgba(127,208,245,0) 0 30px, rgba(127,208,245,0.10) 30px 32px);
  -webkit-mask-image: radial-gradient(circle, #000 0 45%, transparent 70%); mask-image: radial-gradient(circle, #000 0 45%, transparent 70%); }
.site-footer::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--merk-diep), var(--merk), var(--v5-accent)); }
.footer__onder { background: rgba(0,0,0,0.12); }

/* Kennisbank op de homepage in hetzelfde raster als de werkwijze: vier kolommen, zelfde fotoverhouding. */
.v5-kennis__lijst { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.v5-artikel__beeld img { aspect-ratio: 3 / 2; }
.v5-artikel h3 { font-size: 1.05rem; }
@media (max-width: 1100px) { .v5-kennis__lijst { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.5rem; } }
@media (max-width: 600px) { .v5-kennis__lijst { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Contactformulier: duidelijke fouten (12-10-2026) ---------- */
.veld--fout label { color: #B42318; }
.veld--fout input, .veld--fout textarea, .veld--fout select { border-color: #D92D20; border-width: 2px; background: #FFFBFA; box-shadow: 0 0 0 3px rgba(217,45,32,0.12); }
.veld--fout input:focus-visible, .veld--fout textarea:focus-visible { border-color: #B42318; box-shadow: 0 0 0 4px rgba(217,45,32,0.2); }
.veld--goed input, .veld--goed textarea { border-color: #12B76A; }
.veld__fout { display: flex; gap: 0.4rem; align-items: flex-start; margin: 0.1rem 0 0; font-size: 0.85rem; line-height: 1.45; color: #B42318; font-weight: 500; }
.veld__fout::before { content: '!'; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.1rem; height: 1.1rem; margin-top: 0.08rem; border-radius: 999px; background: #D92D20; color: #fff; font-size: 0.72rem; font-weight: 700; }
.veld__fout[hidden] { display: none; }
.formulier__fouten { margin: 0 0 1.5rem; padding: 1rem 1.2rem; border: 1px solid #FDA29B; border-left: 4px solid #D92D20; border-radius: 12px; background: #FEF3F2; color: #7A271A; }
.formulier__fouten:focus { outline: none; box-shadow: 0 0 0 3px rgba(217,45,32,0.2); }
.formulier__fouten-titel { margin: 0 0 0.4rem; font-weight: 700; color: #7A271A !important; }
.formulier__fouten ul { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.25rem; font-size: 0.9rem; }
.formulier__fouten a { color: #B42318; font-weight: 700; }
.formulier__melding { margin-top: 1.5rem; padding: 1.25rem 1.35rem; border: 1px solid #FEC84B; border-left: 4px solid #F79009; border-radius: 12px; background: #FFFAEB; color: #7A2E0E; }
.formulier__melding:focus { outline: none; box-shadow: 0 0 0 3px rgba(247,144,9,0.25); }
.formulier__melding p { margin: 0 0 0.9rem; color: #7A2E0E !important; font-size: 0.95rem; }
.formulier__melding-titel { font-weight: 700; font-size: 1.05rem !important; margin-bottom: 0.3rem !important; }
.formulier__melding-acties { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.formulier__melding .knop.knop--secundair { background: #fff; color: var(--v5-inkt); border-color: rgba(16,33,46,0.25); }
.formulier__knop.is-bezig { opacity: 0.75; cursor: progress; }
.formulier__knop.is-bezig .knop__pijl { display: inline-block; animation: formulier-bezig 0.9s linear infinite; }
@keyframes formulier-bezig { 0% { transform: translateX(0); } 50% { transform: translateX(4px); } 100% { transform: translateX(0); } }
.formulier__status { display: none; }
.veld__hint { margin: 0.1rem 0 0; font-size: 0.85rem; line-height: 1.45; color: var(--v5-tekst); }
.veld__hint a { color: var(--v5-inkt); font-weight: 600; }

/* ---------- Mobiel (12-10-2026): artikelen in één kolom, ruime tikdoelen ---------- */
.toc > summary { list-style: none; cursor: default; }
.toc > summary::-webkit-details-marker { display: none; }
@media (min-width: 861px) { .toc > summary { pointer-events: none; } }
@media (max-width: 860px) {
  .artikel__grid { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .artikel__zij { display: contents; }
  .artikel__zij .toc { order: 0; }
  .artikel__tekst { order: 1; }
  .artikel__zij .ai { order: 2; }
  .toc { padding: 0; }
  .toc > summary { cursor: pointer; display: flex; justify-content: space-between; align-items: center; min-height: 52px; padding: 0 1.1rem; margin: 0; }
  .toc > summary::after { content: ''; width: 9px; height: 9px; border-right: 2px solid var(--v5-inkt); border-bottom: 2px solid var(--v5-inkt); transform: rotate(45deg) translateY(-3px); transition: transform 180ms ease; }
  .toc[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
  .toc nav { padding: 0 1.1rem 0.6rem; }
  .toc a { display: block; padding: 0.55rem 0; }

  .kruimelpad ol { row-gap: 0; }
  .kruimelpad a { display: inline-block; padding: 12px 0; }
  .footer__kolom li { margin: 0; }
  .footer__kolom a { display: inline-block; padding: 11px 0; }
  .footer__onder a { display: inline-block; padding: 10px 0; }
  .site-footer .contact__regel a, .contact__info .contact__regel a { display: inline-block; padding: 10px 0; }
  .site-footer .contact__regel, .contact__info .contact__regel { margin: 0; }
  .cta__contact a { display: inline-block; padding: 10px 0; }
  .ds__knop { min-height: 44px; }
  .deel__knop { min-height: 44px; }
  .auteurkaart__links a { padding: 10px 0; }
  .byline a, .redactieblok a, .specblok a { display: inline-block; padding: 8px 0; }
}
@media (max-width: 860px) {
  .ai__optie { min-height: 40px; padding-inline: 1rem; }
  .auteurkaart__naam a { display: inline-block; padding: 8px 0; }
  .redactieblok a { padding: 10px 0; }
  .specblok .knop, .knop { min-height: 44px; }
}
@media (max-width: 860px) {
  /* Broodkruimel ligt over de paginakop: op mobiel één regel, zonder het laatste item (= de H1). */
  .kruimelpad ol { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
  .kruimelpad ol::-webkit-scrollbar { display: none; }
  .kruimelpad li:last-child { display: none; }
  .kruimelpad a { padding: 10px 0; }
}
@media (max-width: 860px) {
  .tekst__grid, .proces__kop--beeld, .v5-kopregel { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Ronde mobiel 2 (12-10-2026) ---------- */

/* 1. Mobiel menu: ruimer en duidelijk gegroepeerd */
@media (max-width: 1239px) {
  .nav { padding: 0.5rem 1.4rem 1.75rem; }
  .nav__item { border-bottom: 1px solid var(--v5-rand); }
  .nav__item > a { display: flex; align-items: center; min-height: 56px; padding: 0.4rem 0.1rem; font-size: 1.15rem; font-weight: 700; }
  .nav__item--sub > a { min-height: 56px; }
  .nav__sub { padding: 0 0 0.9rem 0; margin-top: -0.2rem; }
  .nav__sub li { display: block; }
  .nav__sub a { display: flex; align-items: center; min-height: 46px; padding: 0.35rem 0 0.35rem 1rem; border-left: 2px solid var(--v5-rand); font-size: 1rem; }
  .nav__sub a[aria-current] { border-left-color: var(--merk); color: var(--merk-donker); font-weight: 600; }
  .nav__mobiel-extra { gap: 0.4rem; padding-top: 1.6rem; }
  .nav__mobiel-extra .knop { margin-bottom: 0.6rem; }
  .nav__mobiel-extra a:not(.knop) { min-height: 44px; }
  .nav__mobiel-extra .talen { margin-top: 0.6rem; }
}

/* 2. Kaarten op mobiel: horizontale swipe-rij met stippen en teller */
.swipe-nav { display: none; }
@media (max-width: 760px) {
  .kaarten__grid[data-swipe], .v5-kennis__lijst[data-swipe] {
    display: flex; gap: 0.9rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: calc(var(--v5-p) + 8px);
    margin-inline: calc(-1 * (var(--v5-p) + 8px)); padding: 0.25rem calc(var(--v5-p) + 8px) 0.5rem;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .kaarten__grid[data-swipe]::-webkit-scrollbar, .v5-kennis__lijst[data-swipe]::-webkit-scrollbar { display: none; }
  .kaarten__grid[data-swipe] > *, .v5-kennis__lijst[data-swipe] > * { flex: 0 0 82%; scroll-snap-align: start; }
  .kaarten__grid[data-swipe] .kaart { background: #fff; border-radius: 16px; box-shadow: 0 10px 30px -18px rgba(12,29,42,0.35); }
  .sectie--licht .kaarten__grid[data-swipe] .kaart { box-shadow: 0 10px 30px -18px rgba(12,29,42,0.3); }
  .kaarten__grid[data-swipe] .kaart__inhoud { padding: 1rem 1.1rem 1.2rem; }
  .swipe-nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 0.9rem; }
  .swipe-nav__hint { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; font-weight: 600; color: var(--v5-tekst); }
  .swipe-nav__hint svg { width: 18px; height: 18px; color: var(--merk-donker); animation: swipe-hint 1.6s ease-in-out infinite; }
  .swipe-nav.is-gebruikt .swipe-nav__hint svg { animation: none; }
  @keyframes swipe-hint { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }
  .swipe-nav__dots { display: flex; gap: 0.35rem; }
  .swipe-nav__dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: #BFD9E8; transition: width 200ms ease, background 200ms ease; }
  .swipe-nav__dot[aria-current="true"] { width: 22px; background: var(--v5-inkt); }
  .swipe-nav__dot::before { content: ''; display: block; width: 44px; height: 44px; margin: -18px 0 0 -18px; }
  .swipe-nav__teller { font-size: 0.82rem; font-weight: 700; color: var(--v5-inkt); font-variant-numeric: tabular-nums; }
}
@media (prefers-reduced-motion: reduce) { .swipe-nav__hint svg { animation: none; } }

/* 3. Inhoudsopgave: nummer en titel op één basislijn */
.toc li { align-items: baseline; }
.toc li::before { line-height: inherit; }
@media (max-width: 860px) {
  .toc li { padding: 0; }
  .toc li::before { padding-top: 0; }
  .toc a { padding: 0.6rem 0; line-height: 1.4; }
}

/* 4. Tabellen: volledig wit, scheiding met lijnen */
.tabel thead th, .sectie--licht .tabel thead th { background: #fff; color: var(--v5-inkt); border-bottom: 2px solid var(--v5-inkt); }
.tabel tbody tr:nth-child(even) > *, .tabel tbody tr:nth-child(even) th[scope="row"] { background: #fff; }

/* 5. Kenmerken in de hero: lijst met vinkjes, geen knopvorm */
.v5-hero__feiten { gap: 0.4rem 1.6rem; flex-wrap: wrap; justify-content: flex-end; }
.v5-hero__feiten li { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0; border: 0; border-radius: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; font-size: 0.88rem; font-weight: 600; color: rgba(255,255,255,0.92); }
.v5-hero__feiten li::before { content: ''; flex: none; width: 18px; height: 18px; border-radius: 999px; background: var(--v5-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310212E' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 12px no-repeat; }
@media (max-width: 860px) {
  .v5-hero__feiten { flex-direction: column; align-items: flex-start; gap: 0.45rem; margin-top: 1.6rem; padding-top: 1.1rem; border-top: 1px solid rgba(255,255,255,0.22); }
  .v5-hero__feiten li { font-size: 0.85rem; padding: 0; }
}

/* Offerteknop in de header: primair, valt op tegen het donkere glas (accentblauw met donkere tekst, contrast ruim AA). */
.site-header .hoofdbalk__cta { background: var(--v5-accent); color: var(--v5-inkt); border-color: var(--v5-accent); box-shadow: 0 6px 18px -8px rgba(127,208,245,0.65); }
.site-header .hoofdbalk__cta:hover, .site-header .hoofdbalk__cta:focus-visible { background: #fff; color: var(--v5-inkt); border-color: #fff; }

/* Header op tussenbreedtes: telefoon als icoon onder 1440 px, compacter menu onder 1320 px, hamburger onder 1200 px. */
@media (max-width: 1240px) { .hoofdbalk__tel { display: inline-flex; } }
@media (max-width: 1439px) {
  .hoofdbalk__tel { width: 40px; height: 40px; justify-content: center; border-radius: 999px; border: 1px solid rgba(255,255,255,0.22); font-size: 0; gap: 0; }
  .hoofdbalk__tel .icoon { width: 17px; height: 17px; font-size: 1rem; }
  .hoofdbalk__tel:hover { border-color: var(--v5-accent); }
}
@media (max-width: 1319px) {
  .hoofdbalk { gap: 0.8rem; }
  .nav__item > a { padding: 0 0.5rem; font-size: 0.92rem; }
  .hoofdbalk__rechts { gap: 0.6rem; }
  .talen ul { gap: 0; }
}
@media (max-width: 1239px) { .hoofdbalk__tel { display: none; } }
@media (max-width: 1180px) { .usps__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .usps__grid { grid-template-columns: minmax(0, 1fr); } }

/* Swipe-rij met veel kaarten: voortgangsbalk in plaats van stippen */
.swipe-nav__balk { display: none; }
@media (max-width: 760px) {
  .swipe-nav--veel .swipe-nav__dots { display: none; }
  .swipe-nav--veel .swipe-nav__balk { display: block; flex: 1; height: 4px; border-radius: 999px; background: #D5E9F5; overflow: hidden; }
  .swipe-nav__balk span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--v5-inkt); transition: width 200ms ease; }
}