/* slimmedeuroplossing.nl — Deurmeesters, een merk van GBI VARPO
   Ontwerp (sep 2026) naar Franks referentie (deurmeesters_redesign.html), in de echte merkkleuren:
   - Primair: Deurmeesters-blauw #2D71B7 (knoppen, links, actief). Wit op #2D71B7 = 5,05:1 (AA).
   - Donkere vlakken: diepe navy afgeleid van het officiële DM-navy #104C77 (zelfde tint 205°, alleen donkerder).
   - Accent: GBI-rood #DD042B (gemeten uit het GBI VARPO-logo), spaarzaam: kleine labels, sleuteliconen,
     het ene "Meest gekozen"-label. Alleen via var(--accent) (test/ontwerp.test.js bewaakt dat).
   - Grijzen uit het DM-palet (#6A6E70 / #4A4C4C), licht naar navy getint.
   - Koppen Plus Jakarta Sans 700/800 (strak), tekst Inter. Beide zelf gehost (geen externe verzoeken).
   - Pagina gebroken wit, witte kaarten met heel zachte schaduw; lichte en diepe donkere secties wisselen elkaar af.
   - Hoeken: knoppen/velden 8px, kaarten 12px, grote panelen 16px. Geen pillen. Kop massief wit (geen blur).
   - Verlopen alleen als fotolaag voor leesbare tekst (.bento-kaart::after, .hero-foto-wrap::after).
   - Foto's: kaarten/inhoud 4:3, paginakoppen en hero 16:9, altijd object-fit: cover.
   Breekpunten: 640 (tablet) · 1000 (desktop-indeling) · 1180 (menu in de balk) · 1280 · 1440. */

@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/plus-jakarta-sans-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 800; font-display: swap; src: url(../fonts/plus-jakarta-sans-latin-800-normal.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/inter-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 400; font-display: swap; src: url(../fonts/inter-latin-400-italic.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/inter-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/inter-latin-600-normal.woff2) format('woff2'); }

/* ── Tokens ──────────────────────────────────────────────── */
:root {
  /* merk */
  --blauw: #2D71B7;          /* DM primair (officieel palet) */
  --blauw-d: #2865A4;        /* hover: zelfde tint, donkerder */
  --blauw-l: #EAF1F8;        /* 10% blauw op wit: chips, actieve vlakken */
  --blauw-op-donker: #8DB8E6;/* iconen/links op navy (7:1) */
  --navy: #104C77;           /* DM navy (officieel palet) */
  --nacht: #092B43;          /* donkere secties: #104C77 met L 15% */
  --nacht-2: #0C395A;        /* verhoogd op donker: L 20% */
  --nacht-3: #072031;        /* utility-balk en voet: L 11% */
  --accent: #DD042B;         /* GBI-rood, gemeten uit het GBI VARPO-logo */
  --wa: #25D366;             /* WhatsApp-groen: alleen het WhatsApp-icoon */
  /* neutraal (DM-grijzen, licht naar navy getint) */
  --inkt: #0A2A40; --tekst: #26323D; --donker: #4A5157; --grijs: #62686E;
  --grond: #F8F9FA; --grond-2: #F1F3F6; --wit: #fff;
  --lijn: #E3E7EC; --lijn-2: #CBD3DC;
  --op-donker: #C3D2E0; --lijn-donker: rgba(255,255,255,.12);
  /* typografie */
  --f-kop: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
  --f-tekst: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* vorm */
  --r-chip: 6px; --r-knop: 8px; --r-kaart: 12px; --r-paneel: 16px;
  --schaduw: 0 4px 20px rgba(9,43,67,.05);
  --schaduw-hover: 0 10px 28px rgba(9,43,67,.10);
  --schaduw-knop: 0 6px 16px rgba(45,113,183,.25);
  /* ritme */
  --s-5: 96px; --s-4: 64px; --s-3: 32px; --s-2: 16px; --s-1: 8px;
  --sectie: var(--s-4);
  --gutter: 16px; --max: 1312px; --kop-h: 64px; --util-h: 0px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--kop-h) + 16px); }
body { margin: 0; font-family: var(--f-tekst); font-size: 16.5px; line-height: 1.6; color: var(--tekst); background: var(--grond); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
img, picture, iframe, svg { max-width: 100%; display: block; }
img { height: auto; }
picture img { background-color: var(--grond-2); }
.ico { flex-shrink: 0; display: inline-block; vertical-align: middle; }
.ico-accent { color: var(--accent); }
.ico-wa { color: var(--wa); }
a { color: var(--blauw); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--blauw-d); }
:focus-visible { outline: 2px solid var(--blauw); outline-offset: 2px; }
.util :focus-visible, .contact-sectie :focus-visible, .voet :focus-visible, .kiezer-resultaat :focus-visible, .bento :focus-visible, .hero-paneel :focus-visible { outline-color: #fff; }
.contact-sectie .aanvraag-kaart :focus-visible { outline-color: var(--blauw); }
h1, h2, h3, h4 { font-family: var(--f-kop); font-weight: 800; line-height: 1.12; margin: 0 0 .5em; color: var(--inkt); letter-spacing: -0.01em; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; text-wrap: balance; }
h1 { letter-spacing: -0.02em; }
/* Plus Jakarta Sans heeft krappe woordspaties: iets ruimer voor alle koppen */
h1, h2, h3, h4, .kaart-titel, .kennis-titel, .segment-titel, .bento-naam, .zij-cta-titel, .zoek-titel, .contact-rijen, .pijlers strong, .hero-badge { word-spacing: .06em; }
h3, h4 { font-weight: 700; letter-spacing: -0.01em; }
h1 { font-size: clamp(30px, 7vw, 52px); line-height: 1.1; }
p { margin: 0 0 1em; text-wrap: pretty; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--blauw); color: #fff; padding: 10px 14px; z-index: 100; border-radius: var(--r-knop); }
.skip:focus { left: 8px; color: #fff; }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
mark.invullen { background: #fff3c4; color: #6b4b00; border: 1px dashed #d4a800; padding: 0 3px; font-size: .92em; }

/* ── Knoppen: één stijl. Primair massief blauw, secundair ghost. Hover: 2px omhoog + zachte schaduw ── */
.knop { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 22px; border-radius: var(--r-knop); font: 600 15.5px/1.2 var(--f-tekst); text-decoration: none; border: 1px solid transparent; cursor: pointer; text-align: center; white-space: nowrap; max-width: 100%; transition: background-color .15s, border-color .15s, color .15s, transform .15s, box-shadow .15s; }
.knop:hover { transform: translateY(-2px); }
.knop:active { transform: none; }
.knop-primair { background: var(--blauw); border-color: var(--blauw); color: #fff; }
.knop-primair:hover { background: var(--blauw-d); border-color: var(--blauw-d); color: #fff; box-shadow: var(--schaduw-knop); }
.knop-ghost { background: #fff; border-color: var(--lijn-2); color: var(--inkt); }
.knop-ghost:hover { border-color: var(--blauw); color: var(--blauw); box-shadow: var(--schaduw-hover); }
.knop-ghost-donker { background: transparent; border-color: rgba(255,255,255,.3); color: #fff; }
.knop-ghost-donker:hover { background: rgba(255,255,255,.08); border-color: #fff; color: #fff; }
.alleen-breed { display: none; }
.knop-groot { min-height: 54px; font-size: 16px; padding: 14px 26px; }
.linkknop { background: none; border: 0; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; padding: 0; }

/* Kleine labels */
.bovenregel { display: inline-flex; align-items: center; gap: 8px; font: 700 13px/1.3 var(--f-tekst); letter-spacing: .08em; text-transform: uppercase; color: var(--blauw); margin: 0 0 12px; }
.stip { flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--accent); }
.chip-label { align-self: flex-start; display: inline-block; padding: 4px 9px; border-radius: var(--r-chip); background: var(--blauw-l); color: var(--navy); font: 600 12px/1.3 var(--f-tekst); letter-spacing: .04em; text-transform: uppercase; }
.badge-accent { align-self: flex-start; display: inline-block; padding: 5px 10px; border-radius: var(--r-chip); background: var(--accent); color: #fff; font: 700 11.5px/1.2 var(--f-tekst); letter-spacing: .08em; text-transform: uppercase; }
.label-donker { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 6px 12px; border-radius: var(--r-knop); background: var(--nacht-2); color: #fff; font: 600 13px/1.3 var(--f-tekst); }
.ico-vak { flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-knop); background: var(--blauw-l); color: var(--blauw); }
.chips { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 12px; border-radius: var(--r-knop); border: 1px solid var(--lijn); background: #fff; color: var(--navy); font-weight: 600; font-size: 14.5px; text-decoration: none; transition: border-color .15s, color .15s; }
.chip:hover { border-color: var(--blauw); color: var(--blauw); }

/* ── Utility-balk (donker, alleen tekst) ─────────────────── */
.util { display: none; background: var(--nacht-3); color: var(--op-donker); font-size: 13.5px; }
.util-in { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); height: 36px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.util-links, .util-contact { display: inline-flex; align-items: center; gap: 22px; white-space: nowrap; min-width: 0; }
.util-links > span, .util-contact a { display: inline-flex; align-items: center; gap: 7px; }
.util strong { color: #fff; font-weight: 600; }
.util a { color: #fff; text-decoration: none; }
.util a:hover { color: #fff; text-decoration: underline; }
.util .ico { color: var(--blauw-op-donker); }
.util .ico-accent { color: var(--accent); }
.util .ico-wa { color: var(--wa); }
.util-adres, .util-tijden { display: none !important; }

/* ── Kop: massief wit, sticky, 1px lijn onder. Geen transparantie, geen blur. ── */
.kop { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid var(--lijn); }
.kop-in { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); height: var(--kop-h); display: flex; align-items: center; gap: 10px; }
.merk { display: flex; align-items: center; text-decoration: none; margin-right: auto; flex: 0 0 auto; }
.logo-dm { height: 24px; width: auto; max-width: none; }
.menu-knop { flex-shrink: 0; height: 44px; min-width: 44px; padding: 0 14px 0 12px; border: 1px solid var(--lijn-2); border-radius: var(--r-knop); background: #fff; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; color: var(--inkt); font: 700 15px/1 var(--f-kop); transition: background-color .15s, color .15s, border-color .15s; }
.menu-knop:hover { border-color: var(--blauw); color: var(--blauw); }
.menu-knop[aria-expanded="true"] { background: var(--nacht); border-color: var(--nacht); color: #fff; }
.menu-streep, .menu-streep::before, .menu-streep::after { display: block; width: 18px; height: 2px; border-radius: 1px; background: currentColor; position: relative; transition: transform .2s, background-color .2s; }
.menu-streep::before, .menu-streep::after { content: ''; position: absolute; left: 0; }
.menu-streep::before { top: -6px; } .menu-streep::after { top: 6px; }
.menu-knop[aria-expanded="true"] .menu-streep { background: transparent; }
.menu-knop[aria-expanded="true"] .menu-streep::before { transform: translateY(6px) rotate(45deg); }
.menu-knop[aria-expanded="true"] .menu-streep::after { transform: translateY(-6px) rotate(-45deg); }
.kop-cta { display: none; flex-shrink: 0; min-height: 44px; padding: 10px 18px; font-size: 15px; }

/* Menu als sheet (mobiel/tablet) */
.hoofdmenu { position: fixed; left: 0; right: 0; top: var(--kop-top, var(--kop-h)); bottom: 0; z-index: 49; background: #fff; overflow-y: auto; overscroll-behavior: contain; padding: 8px var(--gutter) calc(28px + env(safe-area-inset-bottom)); visibility: hidden; opacity: 0; transition: opacity .15s, visibility 0s .15s; }
.hoofdmenu.open { visibility: visible; opacity: 1; transition: opacity .15s, visibility 0s; }
.menu-lijst { list-style: none; margin: 0 auto; padding: 0; max-width: 640px; }
.menu-lijst a { display: flex; align-items: center; justify-content: space-between; padding: 15px 4px; font: 700 19px/1.2 var(--f-kop); letter-spacing: 0; color: var(--inkt); text-decoration: none; border-bottom: 1px solid var(--lijn); }
.menu-lijst a::after { content: '›'; color: var(--lijn-2); font-size: 26px; line-height: 1; }
.menu-lijst a[aria-current], .menu-lijst a.actief { color: var(--blauw); box-shadow: inset 3px 0 0 var(--blauw); padding-left: 14px; }
.menu-contact { display: grid; gap: 8px; padding-top: 24px; max-width: 640px; margin: 0 auto; }
.menu-contact .knop { width: 100%; }
.menu-tijden { text-align: center; color: var(--grijs); font-size: 14px; margin: 4px 0 0; }
body.menu-open { overflow: hidden; }
/* Zonder JavaScript: menu als rij onder de kop */
.no-js .kop-in { flex-wrap: wrap; height: auto; min-height: var(--kop-h); padding-top: 8px; padding-bottom: 8px; }
.no-js .menu-knop { display: none; }
.no-js .hoofdmenu { position: static; visibility: visible; opacity: 1; padding: 0; width: 100%; overflow-x: auto; background: none; }
.no-js .menu-lijst { display: flex; gap: 18px; max-width: none; }
.no-js .menu-lijst a { border: 0; font-size: 15px; padding: 6px 0; white-space: nowrap; }
.no-js .menu-lijst a::after, .no-js .menu-contact { display: none; }

/* ── Plakkende mobiele CTA ───────────────────────────────── */
.plak-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; gap: 8px; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--lijn); box-shadow: 0 -4px 20px rgba(9,43,67,.06); }
.plak-cta .knop { min-height: 48px; padding: 10px 14px; }
.plak-cta .knop:hover { transform: none; }
.plak-cta .knop-primair { flex: 1; }
.plak-cta .knop-ghost { flex: 0 0 auto; }
.plak-cta .plak-wa .plak-label { display: none; }
body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
.menu-open .plak-cta { display: none; }

/* ── Secties ─────────────────────────────────────────────── */
.sectie { padding-top: var(--sectie); padding-bottom: var(--sectie); }
.sectie-grond { background: var(--grond-2); }
.sectie-compact { padding-top: var(--s-3); padding-bottom: var(--s-3); }
.sectie-laatste { padding-bottom: var(--sectie); }
.h-sectie { font-size: clamp(26px, 5.4vw, 40px); line-height: 1.1; margin-bottom: .5em; }
.h-klein { font-weight: 700; font-size: 18px; letter-spacing: 0; }
.sectie-kop { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px 32px; margin-bottom: 32px; }
.sectie-kop .h-sectie { margin: 0; }
.sectie-kop .bovenregel { margin-bottom: 8px; }
.sectie-kop-midden { flex-direction: column; align-items: center; text-align: center; gap: 0; max-width: 44em; margin-left: auto; margin-right: auto; }
.sectie-kop-midden .sectie-intro { margin: 14px 0 0; }
.meer-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: none; color: var(--blauw); }
.meer-link:hover { text-decoration: underline; }
.sectie-intro { color: var(--donker); max-width: 46em; font-size: 17.5px; }
.lead { font-size: 18px; line-height: 1.55; color: var(--donker); max-width: 38em; }

/* ── Kaarten (één stijl: wit, 12px, 1px lijn, zachte schaduw; hover 2px omhoog) ── */
.kaart, .kennis-item, .zoek-treffer, .contact-kaart, .contact-lijst a, .review, .form-kaart, .zij-kaart, .toc, .herkent-kaart, .segment, .proces li, .leeg-blok, .zoek-leeg, .zoek-hulp, .faq details, .kiezer-tegel {
  background: #fff; border: 1px solid var(--lijn); border-radius: var(--r-kaart); box-shadow: var(--schaduw); color: var(--tekst); text-decoration: none;
}
a.kaart, a.kennis-item, a.zoek-treffer, a.contact-kaart, .contact-lijst a { transition: transform .2s, box-shadow .2s, border-color .2s; }
a.kaart:hover, a.kennis-item:hover, a.zoek-treffer:hover, a.contact-kaart:hover, .contact-lijst a:hover { transform: translateY(-2px); box-shadow: var(--schaduw-hover); border-color: var(--lijn-2); color: var(--tekst); }
.kaarten { display: grid; grid-template-columns: 1fr; gap: 16px; }
.kaart { display: flex; flex-direction: column; overflow: hidden; }
.kaart-beeld { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--grond-2); }
.kaart-beeld img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .4s; }
a.kaart:hover .kaart-beeld img { transform: scale(1.03); }
.kaart-tekst { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px 22px; flex: 1; }
.kaart-titel { font: 700 19px/1.25 var(--f-kop); letter-spacing: 0; color: var(--inkt); }
.kaart-sub { color: var(--donker); line-height: 1.55; font-size: 15.5px; }
.kaart-meer, .kennis-meer { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 15px; color: var(--blauw); }
.kaart-meer { margin-top: auto; padding-top: 6px; }
a.kaart:hover .kaart-meer .ico, a.kennis-item:hover .kennis-meer .ico { transform: translateX(3px); }
.kaart-meer .ico, .kennis-meer .ico, .bento-meer .ico { transition: transform .2s; }

/* ── Home: hero (asymmetrisch) ───────────────────────────── */
.hero { background: var(--grond); padding: 20px 0 32px; }
.hero-in { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "tekst" "segment" "paneel" "pijlers"; gap: 24px; }
.hero-tekst { grid-area: tekst; min-width: 0; }
.hero .bovenregel { text-transform: none; letter-spacing: 0; font: 600 14px/1.35 var(--f-tekst); color: var(--donker); margin-bottom: 12px; }
.hero h1 { margin: 0 0 14px; font-size: clamp(31px, 8.4vw, 64px); line-height: 1.08; letter-spacing: -.02em; }
.hero-lead { margin: 0 0 20px; font-size: 16.5px; line-height: 1.55; color: var(--donker); max-width: 34em; }
.hero-acties { display: flex; flex-direction: column; gap: 8px; }
.hero-acties .knop { width: 100%; }

/* Donker paneel met echte foto + keuzehulp */
.hero-paneel { grid-area: paneel; min-width: 0; background: var(--nacht); border-radius: var(--r-paneel); padding: 12px; box-shadow: 0 24px 48px -24px rgba(9,43,67,.45); color: #fff; }
.hero-foto-wrap { position: relative; border-radius: var(--r-kaart); overflow: hidden; }
.hero-foto img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.hero-foto-wrap::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(7,32,49,.72) 0%, rgba(7,32,49,0) 45%); pointer-events: none; }
.hero-badge { position: absolute; z-index: 1; left: 14px; bottom: 12px; margin: 0; display: inline-flex; align-items: center; gap: 8px; color: #fff; font: 700 14.5px/1.3 var(--f-kop); }
.hero-badge::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--accent); }
.snelkeuze { padding: 14px 4px 2px; }
.snelkeuze-titel { margin: 0 0 10px; padding-left: 4px; font: 600 12.5px/1.3 var(--f-tekst); letter-spacing: .08em; text-transform: uppercase; color: var(--op-donker); }
.snelkeuze ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.snelkeuze a { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 12px; border-radius: var(--r-knop); background: var(--nacht-2); border: 1px solid var(--lijn-donker); color: #fff; text-decoration: none; font-weight: 600; font-size: 14.5px; line-height: 1.25; transition: border-color .15s, background-color .15s; }
.snelkeuze a .ico { color: var(--blauw-op-donker); }
.snelkeuze a:hover { border-color: var(--blauw-op-donker); background: #0f4268; color: #fff; }

/* Pijlers */
.pijlers { grid-area: pijlers; list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pijlers li { display: flex; align-items: center; gap: 12px; }
.pijlers .ico-vak { width: 40px; height: 40px; background: #fff; border: 1px solid var(--lijn); }
.pijlers strong { display: block; font: 700 15px/1.25 var(--f-kop); color: var(--inkt); }
.pijlers small { display: block; font-size: 13.5px; color: var(--grijs); line-height: 1.35; }

/* ── "Ik ben …": gesegmenteerde tabs + infokaart ─────────── */
.segment { grid-area: segment; min-width: 0; border-radius: var(--r-paneel); padding: 16px; }
.segment-kop { display: flex; flex-direction: column; gap: 10px; }
.segment-titel { margin: 0; font: 800 17px/1.2 var(--f-kop); letter-spacing: 0; color: var(--inkt); }
.segment-tabs { list-style: none; margin: 0; padding: 4px; display: flex; flex-wrap: wrap; gap: 4px; background: var(--grond-2); border-radius: var(--r-kaart); }
.segment-tabs li { display: flex; flex: 0 0 auto; }
@media (max-width: 639px) {
  /* mobiel: één rij die horizontaal schuift, zodat de tabs altijd één regel blijven */
  .segment-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .segment-tabs::-webkit-scrollbar { display: none; }
}
.segment-tab { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; padding: 8px 12px; border-radius: var(--r-knop); color: var(--donker); font-weight: 600; font-size: 14.5px; line-height: 1.2; white-space: nowrap; text-decoration: none; transition: background-color .15s, color .15s, box-shadow .15s; }
.segment-tab .ico { color: var(--grijs); }
.segment-tab:hover { background: #fff; color: var(--inkt); }
.segment-tab.is-actief, .segment-tab[aria-current] { background: var(--nacht); color: #fff; box-shadow: 0 2px 8px rgba(9,43,67,.18); }
.segment-tab.is-actief .ico, .segment-tab[aria-current] .ico { color: var(--blauw-op-donker); }
.segment-info { margin-top: 14px; padding: 16px 18px; border-radius: var(--r-kaart); background: var(--grond); border: 1px solid var(--lijn); display: flex; flex-direction: column; gap: 14px; }
.segment-info[hidden] { display: none; }
.segment-info-titel { letter-spacing: 0; font-size: 18px; margin: 0 0 6px; }
.segment-info p { margin: 0; color: var(--donker); font-size: 15.5px; }
.segment-info strong { color: var(--inkt); }
.segment-meer { align-self: flex-start; }
.segment-nav { padding: 14px; grid-area: auto; }

/* ── Bento doelgroepen ───────────────────────────────────── */
.bento { display: grid; grid-template-columns: 1fr; gap: 16px; }
.bento-kaart { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 300px; border-radius: var(--r-paneel); overflow: hidden; background: var(--nacht); color: #fff; text-decoration: none; box-shadow: var(--schaduw); isolation: isolate; transition: transform .3s, box-shadow .3s; }
.bento-foto { position: absolute; inset: 0; z-index: -2; }
.bento-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.bento-kaart::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(7,32,49,.94) 0%, rgba(9,43,67,.72) 42%, rgba(9,43,67,.08) 100%); }
.bento-kaart:hover { transform: translateY(-4px); box-shadow: var(--schaduw-hover); color: #fff; }
.bento-kaart:hover .bento-foto img { transform: scale(1.04); }
.bento-inhoud { display: flex; flex-direction: column; gap: 8px; padding: 22px; }
.bento-naam { font: 800 24px/1.15 var(--f-kop); letter-spacing: -.01em; }
.bento-tekst { color: var(--op-donker); font-size: 15px; line-height: 1.5; max-width: 34em; }
.bento-meer { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-weight: 700; font-size: 15px; }
.bento-kaart:hover .bento-meer .ico { transform: translateX(3px); }
.dg-extra { margin: 24px 0 0; color: var(--donker); font-size: 16px; text-align: center; }

/* ── Kiezer "Hoe wilt u de deur openen?" ─────────────────── */
.kiezer-tegels { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.kiezer-tegels li { display: flex; }
.kiezer-tegel { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 104px; padding: 16px 10px; text-align: center; color: var(--inkt); font-weight: 600; font-size: 14.5px; line-height: 1.25; transition: transform .15s, box-shadow .15s, border-color .15s, background-color .15s, color .15s; }
.kiezer-tegel .ico { color: var(--blauw); }
.kiezer-tegel span { min-width: 0; overflow-wrap: break-word; }
.kiezer-tegel:hover { transform: translateY(-2px); box-shadow: var(--schaduw-hover); border-color: var(--lijn-2); color: var(--inkt); }
.kiezer-tegel.is-actief { background: var(--blauw); border-color: var(--blauw); color: #fff; box-shadow: var(--schaduw-knop); }
.kiezer-tegel.is-actief .ico { color: #fff; }
.kiezer-resultaat { margin-top: 20px; display: grid; gap: 20px; padding: 22px; border-radius: var(--r-paneel); background: var(--nacht); color: var(--op-donker); box-shadow: 0 24px 48px -24px rgba(9,43,67,.45); }
.kiezer-resultaat[hidden] { display: none; }
.kiezer-kop { color: #fff; font-size: clamp(24px, 5vw, 34px); font-weight: 800; margin-bottom: 12px; }
.kiezer-tekst p { font-size: 16.5px; line-height: 1.6; }
.kiezer-tekst .label-donker { color: #fff; }
.kiezer-tekst .acties { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.kiezer-foto { border-radius: var(--r-kaart); overflow: hidden; }
.kiezer-foto img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }

/* ── Werkwijze: tijdlijn met verbindingslijn ─────────────── */
.proces { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; position: relative; }
.proces::before { content: ''; position: absolute; left: 32px; top: 24px; bottom: 24px; width: 2px; background: var(--lijn-2); }
.proces li { position: relative; padding: 22px 22px 22px 84px; }
.proces .ico-vak { position: absolute; left: 10px; top: 20px; width: 44px; height: 44px; background: var(--blauw); color: #fff; box-shadow: 0 0 0 6px var(--grond-2); }
.proces-nr { display: block; font: 800 40px/1 var(--f-kop); letter-spacing: -.01em; color: #C5D8EE; margin-bottom: 10px; }
.proces h3 { font-size: 20px; margin: 0 0 6px; }
.proces p { margin: 0; color: var(--donker); font-size: 15.5px; }
.proces-actie { margin-top: 32px; text-align: center; }

/* ── Kennis ──────────────────────────────────────────────── */
.kennis-rij { display: grid; gap: 16px; }
.kennis-item { display: flex; flex-direction: column; gap: 10px; padding: 22px; }
.kennis-titel { font: 700 18.5px/1.3 var(--f-kop); letter-spacing: 0; color: var(--inkt); }
.kennis-sub { color: var(--donker); line-height: 1.55; font-size: 15.5px; }
.kennis-voet { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--lijn); display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 13.5px; color: var(--grijs); }

/* ── Reviews ─────────────────────────────────────────────── */
.review-rij { display: grid; gap: 16px; }
.review { margin: 0; padding: 24px; position: relative; }
.review::before { content: '“'; display: block; font: 800 44px/0.8 var(--f-kop); color: var(--accent); margin-bottom: 8px; }
.review blockquote { margin: 0; font-size: 16.5px; color: var(--tekst); }
.review blockquote p { margin: 0; }
.review-rij-onder { margin-top: 24px; }
.review figcaption { margin-top: 14px; font-weight: 600; color: var(--grijs); font-size: 14.5px; }

/* ── Donkere contactsectie ───────────────────────────────── */
.contact-sectie { background: var(--nacht); color: var(--op-donker); padding: var(--s-4) 0; }
.contact-in { display: grid; gap: var(--s-3); }
.contact-sectie h2 { color: #fff; font-size: clamp(28px, 6vw, 48px); line-height: 1.06; margin-bottom: 16px; }
.contact-lead { color: var(--op-donker); max-width: 34em; font-size: 17px; }
.contact-rijen { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 14px; }
.contact-rijen a { display: flex; align-items: center; gap: 16px; color: #fff; text-decoration: none; }
.contact-rijen .ico-vak { width: 48px; height: 48px; background: var(--nacht-2); color: var(--blauw-op-donker); border: 1px solid var(--lijn-donker); }
.contact-rijen .ico-wa { color: var(--wa); }
.contact-rijen span:last-child { display: flex; flex-direction: column; font: 700 18px/1.25 var(--f-kop); overflow-wrap: anywhere; }
.contact-rijen small { font: 600 12.5px/1.3 var(--f-tekst); letter-spacing: .06em; text-transform: uppercase; color: var(--op-donker); }
.contact-rijen a:hover span:last-child { text-decoration: underline; text-underline-offset: 4px; }
.aanvraag-kaart { background: #fff; color: var(--tekst); border-radius: var(--r-paneel); padding: 24px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 24px 48px -24px rgba(0,0,0,.5); align-self: start; }
.aanvraag-kaart-titel { font-size: 22px; margin: 0; }
.aanvraag-kaart label { font-weight: 600; font-size: 14.5px; color: var(--inkt); margin-top: 4px; }
.aanvraag-kaart select { font: inherit; font-size: 16px; padding: 12px 14px; min-height: 50px; border: 1px solid var(--lijn-2); border-radius: var(--r-knop); background: var(--grond); color: var(--inkt); width: 100%; }
.aanvraag-kaart select:focus-visible { border-color: var(--blauw); }
.ac-uitleg { font-size: 14.5px; color: var(--grijs); margin: 0; }
.aanvraag-kaart .knop { width: 100%; margin-top: 8px; }

/* ── Paginakop (subpagina's) ────────────────────────────── */
.pkop { background: var(--grond); padding: 0 0 var(--s-3); }
.pkop-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.pkop-tekst { min-width: 0; }
.pkop h1 { font-size: clamp(30px, 7vw, 52px); margin-bottom: 16px; }
.pkop .lead { margin-bottom: 22px; }
.pkop-beeld .pkop-foto { order: -1; margin: 16px 0 0; border-radius: var(--r-paneel); overflow: hidden; box-shadow: var(--schaduw); }
.pkop-foto img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.pkop-beeld .kruimel { display: none; }
.pkop-klein { padding-bottom: 24px; }
.pkop-klein h1 { font-size: clamp(28px, 6.4vw, 44px); }
.kop-acties { display: flex; flex-wrap: wrap; gap: 8px; }
.kop-acties .knop { flex: 1 1 auto; }
.kop-noot { margin: 14px 0 0; font-size: 14.5px; color: var(--grijs); }
.kop-noot .ico { display: inline-block; vertical-align: -3px; margin-right: 4px; }
.kop-noot a { white-space: nowrap; }
.meta-regel { font-size: 14px; color: var(--grijs); }
.herkent { display: grid; gap: 16px; padding-top: var(--s-3); }
.herkent-kaart { margin: 0; display: flex; align-items: center; gap: 14px; padding: 16px 18px; font-size: 17px; color: var(--donker); }
.herkent-kaart .ico-vak { background: #fff; border: 1px solid var(--lijn); }
.herkent strong { color: var(--inkt); }

/* Kruimelpad */
.kruimel ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 18px 0 14px; font-size: 14px; color: var(--grijs); }
.kruimel li + li::before { content: '/'; margin-right: 4px; color: var(--lijn-2); }
.kruimel a { color: var(--grijs); }

/* ── Artikel ─────────────────────────────────────────────── */
.artikel-body { display: grid; gap: var(--s-3); padding-top: 40px; padding-bottom: var(--s-4); }
.prose { min-width: 0; max-width: 70ch; font-size: 17px; line-height: 1.72; background: #fff; border: 1px solid var(--lijn); border-radius: var(--r-kaart); box-shadow: var(--schaduw); padding: 22px 20px; }
.prose h2 { font-size: clamp(22px, 4.6vw, 28px); margin-top: 1.8em; margin-bottom: .6em; }
.prose h3 { font-size: 19px; margin-top: 1.6em; }
.prose > :first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 1.1em; }
.prose li { margin-bottom: .4em; }
.prose li::marker { color: var(--blauw); }
.prose blockquote { margin: 1.2em 0; padding: 14px 20px; background: var(--grond); border-left: 3px solid var(--blauw); border-radius: 0 var(--r-knop) var(--r-knop) 0; color: var(--donker); }
.prose blockquote p:last-child { margin: 0; }
.prose img { margin: 1em 0; border-radius: var(--r-kaart); }
.prose .knop { text-decoration: none; margin: .2em 0 1.1em; }
/* Tijdlijn (over ons) */
.prose ol.tijdlijn { list-style: none; padding: 0; margin: 1.2em 0 1.4em; position: relative; }
.prose ol.tijdlijn::before { content: ""; position: absolute; left: 30px; top: 8px; bottom: 8px; width: 2px; background: var(--lijn-2); }
.prose ol.tijdlijn li { display: grid; grid-template-columns: 62px 1fr; gap: 14px; margin: 0 0 16px; position: relative; }
.tijdlijn-jaar { position: relative; z-index: 1; align-self: start; justify-self: center; font: 800 14px/1 var(--f-kop); color: #fff; background: var(--blauw); padding: 7px 8px; border-radius: var(--r-chip); }
.prose ol.tijdlijn li:last-child .tijdlijn-jaar { background: var(--nacht); }
.tijdlijn strong { font-family: var(--f-kop); font-size: 17px; color: var(--inkt); }
.tijdlijn p { margin: 2px 0 0; font-size: 16px; line-height: 1.55; color: var(--donker); }
/* Team (over ons): initialen tot er foto's zijn */
.prose ul.team { list-style: none; padding: 0; margin: 1.2em 0 1.4em; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 10px; }
.prose ul.team li { margin: 0; display: grid; grid-template-columns: 48px 1fr; column-gap: 12px; align-items: center; padding: 12px; background: var(--grond); border: 1px solid var(--lijn); border-radius: var(--r-kaart); }
.team-avatar { grid-row: span 2; width: 48px; height: 48px; display: grid; place-items: center; background: var(--nacht); color: #fff; border-radius: var(--r-kaart); font: 800 15px/1 var(--f-kop); letter-spacing: .02em; }
.team-naam { font-weight: 600; line-height: 1.3; color: var(--inkt); }
.team-rol { font-size: 14.5px; line-height: 1.35; color: var(--donker); }
.tabel-wrap { overflow-x: auto; margin: 0 0 1.2em; border: 1px solid var(--lijn); border-radius: var(--r-kaart); }
.prose table { border-collapse: collapse; width: 100%; font-size: 15px; min-width: 480px; }
.prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--lijn); vertical-align: top; }
.prose th { background: var(--grond); font-weight: 600; }
/* Veelgestelde vragen: losse kaarten */
.faq { margin-top: 2em; display: grid; gap: 8px; }
.faq h2 { margin-bottom: .3em; }
.faq details { box-shadow: none; background: var(--grond); }
.faq summary { cursor: pointer; padding: 16px 48px 16px 18px; font-weight: 600; position: relative; list-style: none; color: var(--inkt); border-radius: var(--r-kaart); }
.faq summary:hover { color: var(--blauw); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font: 400 26px/1 var(--f-tekst); color: var(--blauw); }
.faq details[open] summary::after { content: '–'; }
.faq details p { padding: 0 18px 18px; margin: 0; color: var(--donker); }
.zijbalk { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.toc { padding: 20px 22px; }
.toc-titel { font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--grijs); margin: 0 0 10px; }
.toc ol { margin: 0; padding-left: 1.2em; font-size: 15px; }
.toc li { margin-bottom: 6px; }
.zij-cta { background: var(--nacht); color: var(--op-donker); border-radius: var(--r-paneel); padding: 24px; box-shadow: 0 24px 48px -24px rgba(9,43,67,.45); }
.zij-cta-titel { font: 800 20px/1.2 var(--f-kop); letter-spacing: 0; color: #fff; margin-bottom: 8px; }
.zij-cta-titel::before { content: ''; display: block; width: 24px; height: 3px; border-radius: 2px; background: var(--accent); margin-bottom: 14px; }
.zij-cta p { color: var(--op-donker); font-size: 15px; }
.zij-cta .knop { width: 100%; }
.zij-klein { font-size: 14px; color: var(--grijs); margin: 12px 0 0; }
.zij-cta .zij-klein, .zij-cta a { color: var(--op-donker); }
.zij-cta a.knop { color: #fff; }

/* ── Aanvraag ────────────────────────────────────────────── */
.aanvraag { display: grid; gap: var(--s-3); padding-top: var(--s-3); padding-bottom: var(--s-4); }
.aanvraag-form { order: -1; min-width: 0; }
.form-frame { width: 100%; min-height: 1100px; border: 1px solid var(--lijn); border-radius: var(--r-kaart); background: #fff; box-shadow: var(--schaduw); }
.form-noot { font-size: 14px; color: var(--grijs); margin-top: 8px; }
.form-kaart { padding: 24px; }
.form-kaart .knop { width: 100%; }
.form-storing { border-left: 3px solid var(--accent); }
.vinklijst { list-style: none; padding: 0; margin: 0 0 20px; }
.vinklijst li { padding-left: 22px; position: relative; margin-bottom: 6px; }
.vinklijst li::before { content: ''; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border-radius: 2px; background: var(--blauw); }
.terugval { margin-top: 24px; }
.contact-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.contact-lijst a { display: flex; flex-direction: column; padding: 14px 18px; }
.contact-lijst span { font-size: 14px; color: var(--grijs); }
.contact-lijst strong { font-size: 18px; color: var(--inkt); overflow-wrap: anywhere; }
.stappen { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; position: relative; }
.stappen li { position: relative; padding: 0 0 0 56px; }
.stappen::before { content: ''; position: absolute; left: 19px; top: 12px; bottom: 12px; width: 2px; background: var(--lijn-2); }
.stap-nr { position: absolute; left: 0; top: 0; width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--r-knop); background: var(--blauw); color: #fff; font: 800 14px/1 var(--f-kop); box-shadow: 0 0 0 5px var(--grond); }
.stappen h2 { font-size: 18px; margin: 8px 0 4px; }
.stappen p { margin: 0 0 8px; color: var(--donker); font-size: 15.5px; }

/* ── Contact ─────────────────────────────────────────────── */
.contact-raster { display: grid; gap: 16px; padding-top: var(--s-3); padding-bottom: var(--s-3); }
.contact-kaart { display: flex; flex-direction: column; gap: 2px; padding: 20px 22px; }
.contact-kaart .ico-vak { margin-bottom: 12px; }
.contact-kaart span:not(.ico-vak) { font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--grijs); }
.contact-kaart strong { font: 700 19px/1.3 var(--f-kop); color: var(--inkt); overflow-wrap: anywhere; margin-top: 4px; }
.contact-kaart em { font-style: normal; font-size: 15px; color: var(--donker); }

.leeg-blok { padding: 24px; }
.galerij { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 1em 0; }
.galerij a { border-radius: var(--r-knop); overflow: hidden; }
.galerij img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; margin: 0; border-radius: 0; }

/* ── Voet: diep navy, sluit aan op de contactsectie ──────── */
.voet { background: var(--nacht-3); color: var(--op-donker); font-size: 15px; }
.voet a { color: #fff; }
.voet-in { max-width: var(--max); margin: 0 auto; padding: var(--s-4) var(--gutter) 40px; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
.voet-merk img { height: 30px; width: auto; margin-bottom: 18px; }
.voet-contact { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.voet-contact li { line-height: 1.45; }
.voet-contact a { text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.voet-contact a:hover { text-decoration: underline; }
.voet-kol { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.voet-kol h2 { color: #fff; font: 700 13px/1.3 var(--f-tekst); letter-spacing: .1em; text-transform: uppercase; margin: 0 0 6px; }
.voet-kol a { text-decoration: none; color: var(--op-donker); }
.voet-kol a:hover { color: #fff; text-decoration: underline; }
.voet-gbi { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter) var(--s-3); }
.gbi-paneel { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; background: #fff; border-radius: var(--r-kaart); padding: 18px 24px; color: var(--donker); }
.gbi-paneel-label { font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--grijs); white-space: nowrap; }
.gbi-paneel img { height: 40px; width: auto; flex: none; }
.gbi-paneel p { margin: 0; font-size: 15px; line-height: 1.5; flex: 1 1 280px; }
.voet-onder { width: calc(100% - 2 * var(--gutter)); max-width: calc(var(--max) - 2 * var(--gutter)); margin: 0 auto; }
.voet-onder { display: flex; flex-direction: column; gap: 10px; padding-top: 20px; padding-bottom: 24px; border-top: 1px solid var(--lijn-donker); font-size: 13.5px; color: var(--op-donker); }
.voet-links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.voet-onder a { color: var(--op-donker); }
.voet-onder a:hover { color: #fff; }

/* ── Zoeken ──────────────────────────────────────────────── */
.zoek-knop { flex-shrink: 0; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-knop); border: 1px solid var(--lijn-2); background: #fff; color: var(--inkt); text-decoration: none; transition: border-color .15s, color .15s; }
.zoek-knop:hover { border-color: var(--blauw); color: var(--blauw); }
.zoekveld { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--lijn-2); border-radius: var(--r-knop); padding: 3px 3px 3px 14px; color: var(--grijs); transition: border-color .15s; }
.zoekveld:focus-within { border-color: var(--blauw); outline: 2px solid var(--blauw); outline-offset: 0; }
.zoekveld input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: 400 16px/1.3 var(--f-tekst); color: var(--inkt); padding: 10px 0; }
.zoekveld input::-webkit-search-cancel-button { cursor: pointer; }
.zoekveld .knop { min-height: 42px; padding: 8px 18px; }
.zoekveld .knop:hover { transform: none; }
.zoekveld-groot { padding: 4px 4px 4px 18px; box-shadow: var(--schaduw); }
.zoekveld-groot input { font-size: 18px; padding: 12px 0; }
.menu-zoek { max-width: 640px; margin: 8px auto 6px; }
.zoekpaneel { position: fixed; inset: 0; z-index: 70; background: rgba(7,32,49,.6); padding: 12px var(--gutter); overflow-y: auto; }
.zoekpaneel[hidden] { display: none; }
.zoekpaneel-in { max-width: 760px; margin: 0 auto; background: #fff; border-radius: var(--r-paneel); padding: 16px; box-shadow: 0 24px 48px -12px rgba(0,0,0,.35); }
.zoek-sluit { flex-shrink: 0; border: 1px solid var(--lijn); background: var(--grond); border-radius: var(--r-knop); padding: 8px 12px; cursor: pointer; color: var(--grijs); font: 600 13px/1 var(--f-tekst); }
.zoek-sluit kbd { font: inherit; }
.zoek-live:empty { display: none; }
.zoek-live { margin-top: 10px; }
.zoek-live-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.zoek-live-item { display: grid; gap: 2px; padding: 12px 14px; border-radius: var(--r-knop); text-decoration: none; color: var(--inkt); }
.zoek-live-item:hover, .zoek-live-item:focus-visible { background: var(--grond-2); color: var(--inkt); outline-offset: -2px; }
.zoek-live-type { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--grijs); }
.zoek-live-titel { font: 700 16px/1.3 var(--f-kop); color: var(--inkt); }
.zoek-live-sub { font-size: 14.5px; line-height: 1.45; color: var(--donker); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.zoek-live-alle { display: block; margin-top: 6px; padding: 12px 14px; border-top: 1px solid var(--lijn); font-weight: 600; text-decoration: none; color: var(--blauw); }
.zoek-live-leeg { padding: 8px 6px 4px; }
.zoek-live-leeg p { color: var(--donker); }
body.zoek-open { overflow: hidden; }
.zoek-open .plak-cta { display: none; }
/* Zoekpagina */
.zoek-uitkomst { padding-top: var(--s-3); padding-bottom: var(--s-4); }
.zoek-uitkomst > *, .pkop .zoekveld-groot { max-width: 880px; }
.zoek-uitkomst > .kiezer { max-width: none; }
.zoek-merk { display: flex; gap: 10px; align-items: flex-start; background: var(--blauw-l); border-radius: var(--r-kaart); padding: 14px 18px; color: var(--navy); }
.zoek-merk .ico { margin-top: 3px; }
.zoek-groep { margin-bottom: var(--s-3); }
.zoek-groep-titel { font: 700 13px/1.2 var(--f-tekst); letter-spacing: .1em; text-transform: uppercase; color: var(--grijs); margin: 0 0 12px; }
.zoek-groep-titel span { display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: var(--r-chip); background: var(--blauw-l); color: var(--navy); letter-spacing: 0; }
.zoek-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.zoek-treffer { display: grid; gap: 4px; padding: 18px 20px; }
.zoek-titel { font: 700 19px/1.3 var(--f-kop); color: var(--inkt); overflow-wrap: break-word; hyphens: auto; }
.zoek-lijst li, .zoek-treffer { min-width: 0; }
.zoek-sub { color: var(--donker); font-size: 15.5px; line-height: 1.5; }
.zoek-url { font-size: 13px; color: var(--grijs); overflow-wrap: anywhere; }
.zoek-uitkomst mark, .zoek-treffer mark { background: #fff1b8; color: inherit; padding: 0 2px; border-radius: 2px; }
.zoek-leeg { padding: 24px; margin-bottom: var(--s-3); }
.zoek-hulp { display: grid; gap: 12px; justify-items: start; padding: 22px 24px; }
.zoek-hulp p { margin: 0; color: var(--donker); }
.zoek-pop-titel { margin-top: 8px; }
.zoek-pop { margin-top: 24px; }

/* Toestemming (alleen als GA4 is ingesteld) */
.toestemming { position: fixed; left: 12px; right: 12px; bottom: 84px; z-index: 60; background: #fff; border: 1px solid var(--lijn); border-radius: var(--r-kaart); box-shadow: var(--schaduw-hover); padding: 16px 18px; font-size: 15px; max-width: 560px; }
.toestemming[hidden] { display: none; }
.toestemming div { display: flex; gap: 8px; flex-wrap: wrap; }

@media (max-width: 999px) { .zijbalk .toc { display: none; } }
@media (max-width: 479px) {
  .zoek-uitkomst .knop, .zoek-leeg .knop { white-space: normal; }
}
@media (max-width: 399px) {
  .kop-in { gap: 8px; }
  .zoek-knop { width: 40px; height: 40px; }
  .menu-knop { padding: 0 11px 0 10px; gap: 7px; }
  .segment-tab { padding: 8px 10px; font-size: 14px; }
}
@media (max-width: 359px) {
  .logo-dm { height: 21px; }
  .segment-tab .ico { display: none; }
}
/* Lage mobiele schermen: compacter, zodat H1, knop en de eerste tabrij boven de vouw blijven */
@media (max-width: 639px) and (max-height: 760px) {
  .hero { padding-top: 12px; }
  .hero h1 { font-size: 28px; }
  .hero-lead { font-size: 15.5px; margin-bottom: 14px; }
  .hero .bovenregel { display: none; }
  .hero-acties .knop-ghost { display: none; }
}

/* ── ≥ 480 ─────────────────────────────────────────────────── */
@media (min-width: 480px) {
  .plak-cta .plak-wa .plak-label { display: inline; }
}
/* ── Tablet ≥ 640px ─────────────────────────────────────────── */
@media (min-width: 640px) {
  :root { --gutter: 28px; --kop-h: 72px; }
  .logo-dm { height: 28px; }
  .kop-cta { display: inline-flex; }
  .util { display: block; }
  .hero { padding-top: 32px; }
  .hero-acties { flex-direction: row; flex-wrap: wrap; }
  .hero-acties .knop { width: auto; }
  .alleen-breed { display: inline; }
  .pijlers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .segment { padding: 18px 20px; }
  .segment-titel { font-size: 18px; }
  .segment-tabs li { flex: 0 0 auto; }
  .segment-info { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; }
  .segment-meer { align-self: center; flex: none; }
  .kiezer-tegels { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .bento-kaart { min-height: 340px; }
  .kaarten, .kennis-rij, .review-rij, .contact-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .kop-acties .knop { flex: 0 0 auto; }
  .galerij { grid-template-columns: repeat(3, 1fr); }
  .aanvraag-kaart { padding: 32px; }
  .prose { padding: 32px 36px; }
  .voet-in { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-3); row-gap: 40px; }
  .voet-in > * { grid-column: span 6; }
  .voet-kol a { white-space: nowrap; }
  .voet-onder { flex-direction: row; justify-content: space-between; align-items: flex-start; gap: 24px; }
  .voet-links { justify-content: flex-end; }
  .kiezer-resultaat { padding: 28px; }
}
@media (min-width: 1180px) {
  .util-adres { display: inline-flex !important; }
}

/* ── Desktop ≥ 1000px ───────────────────────────────────────── */
@media (min-width: 1000px) {
  :root { --gutter: 48px; --util-h: 36px; --sectie: var(--s-5); }
  body { padding-bottom: 0; }
  .plak-cta { display: none; }
  .toestemming { bottom: 20px; left: 20px; }
  .util-tijden { display: inline-flex !important; }
  .segment-kop { gap: 24px; }

  /* Hero: sterke typografie links, groot donker beeldpaneel rechts, tabs eronder */
  .hero { padding: clamp(24px, 4vh, 48px) 0 clamp(24px, 3.4vh, 40px); }
  .hero-in { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "tekst paneel" "pijlers paneel" "segment segment"; column-gap: 56px; row-gap: 28px; align-items: start; }
  .hero-tekst { align-self: end; }
  .hero h1 { font-size: clamp(44px, 4.3vw, 66px); margin-bottom: 18px; }
  .hero-lead { font-size: 19px; margin-bottom: 26px; }
  .pijlers { align-self: start; padding-top: 22px; border-top: 1px solid var(--lijn); }
  .hero-paneel { padding: 14px; }
  .segment { padding: 20px 24px; }
  .segment-kop { flex-direction: row; align-items: center; justify-content: space-between; }
  .segment-nav .segment-kop { gap: 18px; }
  .segment-info { padding: 18px 22px; }

  .bento { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
  .bento-1 { grid-column: span 7; min-height: 400px; }
  .bento-2 { grid-column: span 5; min-height: 400px; }
  .bento-3, .bento-4 { grid-column: span 6; min-height: 320px; }
  .bento-inhoud { padding: 32px; }
  .bento-1 .bento-naam { font-size: 32px; }
  .bento-naam { font-size: 26px; }

  .kiezer-tegels { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
  .kiezer-resultaat { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: center; padding: 40px; }

  .proces { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding-top: 24px; }
  .proces::before { left: 16.66%; right: 16.66%; top: 46px; bottom: auto; width: auto; height: 2px; }
  .proces li { padding: 64px 28px 30px; text-align: center; }
  .proces .ico-vak { left: 50%; top: -24px; transform: translateX(-50%); width: 48px; height: 48px; box-shadow: 0 0 0 8px var(--grond-2); }
  .proces-nr { font-size: 56px; }

  .kaarten, .kennis-rij, .review-rij { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }

  .contact-sectie { padding: var(--s-5) 0; }
  .contact-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 64px; }
  .contact-rijen { gap: 18px; }

  .pkop { padding: 0 0 var(--s-4); }
  .pkop-beeld .pkop-in { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 56px; align-items: center; }
  .pkop-beeld .pkop-foto { order: 0; margin: 40px 0 0; }
  .pkop-beeld .kruimel { display: block; }
  .pkop .lead { font-size: 19px; }
  .artikel-body { grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; padding-top: var(--s-4); padding-bottom: var(--s-5); }
  .prose { padding: 44px 52px; }
  .zijbalk { position: sticky; top: calc(var(--kop-h) + 24px); align-self: start; }
  .herkent { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; padding-top: 40px; }

  .aanvraag { grid-template-columns: 380px minmax(0, 1fr); gap: 64px; padding-top: 40px; }
  .aanvraag-form { order: 0; }
  .contact-raster { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-top: 40px; }
  .voet-in { padding-top: 72px; }
  .voet-in > * { grid-column: span 3; }
  .zoekpaneel { padding-top: calc(var(--util-h) + 12px); }
}
@media (min-width: 1000px) and (max-width: 1279px) {
  .hero-in { column-gap: 40px; row-gap: 22px; }
  .hero h1 { font-size: clamp(40px, 4.2vw, 52px); }
  .hero-lead { font-size: 17.5px; margin-bottom: 20px; }
  .pijlers { padding-top: 16px; }
  .snelkeuze a { min-height: 46px; padding: 8px 10px; font-size: 14px; }
}

/* ── Menu in de balk ≥ 1180px ──────────────────────────────── */
@media (min-width: 1180px) {
  :root { --kop-h: 76px; }
  .logo-dm { height: 30px; }
  .menu-knop { display: none; }
  .hoofdmenu { position: static; visibility: visible; opacity: 1; padding: 0; background: none; overflow: visible; margin-left: auto; align-self: stretch; }
  .menu-lijst { display: flex; gap: 0; max-width: none; height: 100%; }
  .menu-lijst .alleen-sheet { display: none; }
  .menu-lijst a { position: relative; height: 100%; border: 0; padding: 0 13px; font: 600 15px/1.2 var(--f-tekst); color: var(--tekst); box-shadow: none; transition: color .15s; }
  .menu-lijst a::after { content: ''; position: absolute; left: 13px; right: 13px; bottom: -1px; height: 3px; border-radius: 2px 2px 0 0; background: transparent; transition: background-color .15s; font-size: 0; }
  .menu-lijst a.zacht { color: var(--donker); }
  .menu-lijst a:hover, .menu-lijst a:focus-visible { color: var(--blauw); }
  .menu-lijst a:focus-visible { outline-offset: -4px; }
  .menu-lijst a:hover::after, .menu-lijst a:focus-visible::after, .menu-lijst a[aria-current]::after, .menu-lijst a.actief::after { background: var(--blauw); }
  .menu-lijst a[aria-current], .menu-lijst a.actief { color: var(--blauw); padding-left: 13px; box-shadow: none; }
  .menu-contact, .menu-zoek { display: none; }
  .merk { margin-right: 0; }
  .kop-in { gap: 14px; }
}
@media (min-width: 1440px) {
  :root { --gutter: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .knop:hover, a.kaart:hover, .bento-kaart:hover, .kiezer-tegel:hover { transform: none; }
}
@media print { .kop, .util, .plak-cta, .voet, .contact-sectie, .zijbalk, .kiezer, .segment { display: none; } body { padding: 0; background: #fff; } .prose { border: 0; box-shadow: none; padding: 0; } }