/* ============================================================
   Cox Verwijspraktijk — designsysteem
   Basis: Huisstijlhandboek v2.0, hoofdstuk 08 (design tokens)
   Aanvullend: Programma van Eisen responsive website v1.0
   Mobile-first. Verwijs in componenten uitsluitend naar de
   semantische tokens, nooit naar de kleurwaarden zelf.
   ============================================================ */

:root {
  /* MERKKLEUREN — uit de logobestanden, niet wijzigen */
  --cox-oranje-600:#F07E18; --cox-turquoise-500:#63B6A9;
  --cox-antraciet-700:#4D4D4C; --cox-warmgrijs-500:#878C8C;

  /* AFGELEIDE TINTEN — voor tekst en interactie */
  --cox-oranje-800:#7E3D06; --cox-oranje-700:#A9520A;
  --cox-oranje-200:#FBDCBE; --cox-oranje-100:#FDF0E4;
  --cox-turquoise-800:#2A5A52; --cox-turquoise-700:#376F65;
  --cox-turquoise-200:#C3E2DC; --cox-turquoise-100:#EBF5F3;
  --cox-antraciet-900:#333332; --cox-grijs-600:#6C7171;
  --cox-grijs-300:#D2D5D5; --cox-grijs-100:#F4F5F5; --cox-wit:#FFFFFF;

  /* SIGNAAL */
  --cox-succes:#2F7A5B; --cox-attentie:#8A5A00; --cox-fout:#A32723;

  /* SEMANTISCH */
  --kleur-tekst:var(--cox-antraciet-900); --kleur-tekst-zacht:var(--cox-grijs-600);
  --kleur-achtergrond:var(--cox-wit); --kleur-vlak:var(--cox-grijs-100);
  --kleur-vlak-rustig:var(--cox-turquoise-100); --kleur-vlak-warm:var(--cox-oranje-100);
  --kleur-rand:var(--cox-grijs-300); --kleur-actie:var(--cox-oranje-700);
  --kleur-actie-hover:var(--cox-oranje-800); --kleur-accent:var(--cox-oranje-600);
  --kleur-secundair:var(--cox-turquoise-700); --kleur-focus:var(--cox-turquoise-500);
  --kleur-donker:var(--cox-antraciet-900);

  /* TYPOGRAFIE */
  --font-kop:"Poppins","Segoe UI",Arial,sans-serif;
  --font-tekst:"Lato","Segoe UI",Calibri,sans-serif;
  --tekst-xs:0.875rem; --tekst-s:1rem; --tekst-m:1.0625rem;
  --tekst-l:1.1875rem; --tekst-xl:1.3125rem;
  --tekst-2xl:2.0625rem; --tekst-3xl:3.125rem;
  --regel-strak:1.2; --regel-ruim:1.7;

  /* RUIMTE — 8 px grid, responsief geschaald */
  --sp-1:8px; --sp-2:16px; --sp-3:24px; --sp-4:32px;
  --sp-6:48px; --sp-8:64px; --sp-10:72px; --sp-12:88px;

  /* VORM */
  --radius-s:4px; --radius-m:8px; --radius-l:16px;
  --schaduw-s:0 1px 2px rgba(51,51,50,.08);
  --schaduw-m:0 4px 16px rgba(51,51,50,.10);
  --schaduw-l:0 12px 40px rgba(51,51,50,.14);

  /* LAYOUT — breekpunten conform PvE hoofdstuk 3 */
  --breedte-max:1180px; --breedte-tekst:70ch;
  --header-h:72px;

  /* BEWEGING — PvE hoofdstuk 4: 250–500 ms, natuurlijke easing */
  --duur-kort:180ms; --duur-mid:320ms; --duur-lang:460ms;
  --easing:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--kleur-achtergrond);color:var(--kleur-tekst);
  font-family:var(--font-tekst);font-size:var(--tekst-s);line-height:var(--regel-ruim);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}
.container{width:100%;max-width:var(--breedte-max);margin:0 auto;padding:0 var(--sp-3)}
.smal{max-width:820px}

/* ---------- typografie ---------- */
h1,h2,h3,h4{font-family:var(--font-kop);color:var(--kleur-tekst);margin:0 0 var(--sp-2);text-wrap:balance}
h1{font-size:clamp(1.85rem,6vw,var(--tekst-3xl));font-weight:600;line-height:1.14}
h2{font-size:clamp(1.45rem,4.4vw,var(--tekst-2xl));font-weight:600;line-height:1.24;margin-top:0}
h3{font-size:clamp(1.12rem,3.2vw,var(--tekst-xl));font-weight:500;line-height:1.38}
h4{font-size:var(--tekst-l);font-weight:500;line-height:1.4}
p{margin:0 0 var(--sp-2);max-width:var(--breedte-tekst)}
.lead{font-size:var(--tekst-l);line-height:1.66;color:var(--kleur-tekst-zacht)}
.klein{font-size:var(--tekst-xs);color:var(--kleur-tekst-zacht)}
.eyebrow{font-family:var(--font-tekst);font-weight:700;font-size:.75rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--kleur-secundair);margin:0 0 var(--sp-1)}
a{color:var(--kleur-actie)}
a:hover{color:var(--kleur-actie-hover)}
strong,b{font-weight:700}
ul.lijst{padding-left:0;list-style:none;margin:0 0 var(--sp-2);max-width:var(--breedte-tekst)}
ul.lijst li{position:relative;padding-left:28px;margin-bottom:var(--sp-1)}
ul.lijst li::before{content:"";position:absolute;left:6px;top:12px;width:7px;height:7px;
  border-radius:50%;background:var(--kleur-accent)}
ol.stappenlijst{counter-reset:s;list-style:none;padding:0;margin:0 0 var(--sp-2);max-width:var(--breedte-tekst)}
ol.stappenlijst li{counter-increment:s;position:relative;padding-left:44px;margin-bottom:var(--sp-2)}
ol.stappenlijst li::before{content:counter(s);position:absolute;left:0;top:2px;width:28px;height:28px;
  border-radius:50%;background:var(--kleur-secundair);color:#fff;display:grid;place-items:center;
  font-weight:700;font-size:.85rem}

/* ---------- toegankelijkheid (PvE hoofdstuk 9) ---------- */
:focus-visible{outline:3px solid var(--kleur-focus);outline-offset:2px;border-radius:var(--radius-s)}
.skip{position:absolute;left:-9999px;top:0;background:var(--kleur-donker);color:#fff;
  padding:14px 22px;z-index:400;border-radius:0 0 var(--radius-m) 0;font-weight:700;text-decoration:none}
.skip:focus{left:0}
.alleen-schermlezer{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- paginaovergang (PvE hoofdstuk 4) ---------- */
main{animation:binnenkomst var(--duur-mid) var(--easing) both}
@keyframes binnenkomst{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
body.verlaat main{opacity:0;transform:translateY(-8px);
  transition:opacity var(--duur-kort) var(--easing),transform var(--duur-kort) var(--easing)}
.onthul{opacity:0;transform:translateY(18px)}
.onthul.zichtbaar{opacity:1;transform:none;
  transition:opacity var(--duur-lang) var(--easing),transform var(--duur-lang) var(--easing)}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  main,.onthul,.onthul.zichtbaar,body.verlaat main{animation:none!important;transition:none!important;
    opacity:1!important;transform:none!important}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
}

/* ---------- logo ---------- */
.logo{display:inline-flex;flex-direction:column;text-decoration:none;line-height:1;flex:none}
.logo .woord{font-family:var(--font-kop);font-weight:700;font-size:32px;letter-spacing:.02em;
  color:var(--cox-warmgrijs-500);transition:font-size var(--duur-kort) var(--easing)}
.logo .woord .x{color:var(--cox-oranje-600)}
.logo .sub{font-family:var(--font-tekst);font-weight:700;font-size:8px;letter-spacing:.32em;
  color:var(--cox-turquoise-500);margin-top:3px}
.logo--dia .woord{color:#fff}
.logo--groot .woord{font-size:48px}.logo--groot .sub{font-size:12px;letter-spacing:.36em}

/* ---------- topbalk ---------- */
.topbalk{background:var(--cox-antraciet-900);color:#C9CDCD;font-size:var(--tekst-xs);display:none}
.topbalk .container{display:flex;gap:var(--sp-3);align-items:center;justify-content:space-between;
  min-height:40px;flex-wrap:wrap}
.topbalk a{color:#fff}
.topbalk .spoed{color:var(--cox-oranje-600);font-weight:700;white-space:nowrap}

/* ---------- header, sticky en compact bij scrollen ---------- */
header.site{position:sticky;top:0;z-index:200;background:#fff;border-bottom:1px solid var(--kleur-rand);
  transition:box-shadow var(--duur-kort) var(--easing)}
header.site .container{display:flex;align-items:center;gap:var(--sp-2);min-height:var(--header-h);
  transition:min-height var(--duur-kort) var(--easing)}
header.site.compact{box-shadow:var(--schaduw-m)}
header.site.compact .container{min-height:60px}
header.site.compact .logo .woord{font-size:27px}
nav.hoofd{display:none}
nav.hoofd a{font-family:var(--font-tekst);font-size:.97rem;color:var(--kleur-tekst);text-decoration:none;
  padding:12px;border-radius:var(--radius-m);min-height:48px;display:inline-flex;align-items:center;
  position:relative}
nav.hoofd a:hover{background:var(--kleur-vlak);color:var(--kleur-tekst)}
/* De knop in de balk houdt zijn eigen kleuren; de navigatieregel hierboven
   is specifieker en zou anders donkere tekst op oranje geven. */
nav.hoofd a.knop--primair{color:#fff}
nav.hoofd a.knop--primair:hover{background:var(--kleur-actie-hover);color:#fff}
nav.hoofd a.knop--secundair{color:var(--kleur-secundair)}
nav.hoofd a[aria-current="page"]{color:var(--kleur-secundair);font-weight:700}
nav.hoofd a[aria-current="page"]::after{content:"";position:absolute;left:12px;right:12px;bottom:6px;
  height:2px;background:var(--kleur-accent);border-radius:2px}
.nav-tel{display:none;font-family:var(--font-kop);font-weight:600;font-size:1.02rem;
  color:var(--cox-turquoise-800);text-decoration:none;white-space:nowrap}
.menuknop{margin-left:auto;display:inline-flex;align-items:center;gap:9px;background:none;
  border:1.5px solid var(--kleur-rand);border-radius:var(--radius-m);padding:11px 15px;
  font-family:var(--font-tekst);font-size:.95rem;font-weight:700;cursor:pointer;min-height:48px;
  color:var(--kleur-tekst)}
.menuknop .balken{display:inline-block;width:18px;height:12px;position:relative}
.menuknop .balken::before,.menuknop .balken::after,.menuknop .balken span{
  content:"";position:absolute;left:0;width:100%;height:2px;background:currentColor;border-radius:2px;
  transition:transform var(--duur-kort) var(--easing),opacity var(--duur-kort) var(--easing)}
.menuknop .balken::before{top:0}.menuknop .balken span{top:5px}.menuknop .balken::after{top:10px}
.menuknop[aria-expanded="true"] .balken::before{transform:translateY(5px) rotate(45deg)}
.menuknop[aria-expanded="true"] .balken span{opacity:0}
.menuknop[aria-expanded="true"] .balken::after{transform:translateY(-5px) rotate(-45deg)}

/* mobiel uitschuifmenu */
.menupaneel{position:fixed;inset:0 0 0 auto;width:min(92vw,380px);background:#fff;z-index:300;
  transform:translateX(100%);transition:transform var(--duur-mid) var(--easing);
  overflow-y:auto;padding:var(--sp-3) var(--sp-3) var(--sp-8);box-shadow:var(--schaduw-l);
  display:flex;flex-direction:column;gap:4px}
.menupaneel.open{transform:none}
.menupaneel a{font-size:1.05rem;color:var(--kleur-tekst);text-decoration:none;padding:14px 12px;
  border-radius:var(--radius-m);min-height:48px;display:flex;align-items:center}
.menupaneel a:hover{background:var(--kleur-vlak)}
.menupaneel a[aria-current="page"]{color:var(--kleur-secundair);font-weight:700;background:var(--cox-turquoise-100)}
.menupaneel .groep{font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cox-oranje-700);padding:18px 12px 6px}
.menupaneel .sluit{align-self:flex-end;background:none;border:1.5px solid var(--kleur-rand);
  border-radius:var(--radius-m);padding:11px 15px;font-family:var(--font-tekst);font-weight:700;
  cursor:pointer;min-height:48px;margin-bottom:var(--sp-2)}
.overlay{position:fixed;inset:0;background:rgba(51,51,50,.5);z-index:250;opacity:0;visibility:hidden;
  transition:opacity var(--duur-mid) var(--easing),visibility var(--duur-mid)}
.overlay.zichtbaar{opacity:1;visibility:visible}
body.menu-open{overflow:hidden}

/* ---------- knoppen ---------- */
.knop{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;
  padding:13px 24px;border-radius:var(--radius-m);font-family:var(--font-tekst);font-weight:700;
  font-size:1rem;text-decoration:none;cursor:pointer;border:2px solid transparent;
  transition:background var(--duur-kort) var(--easing),color var(--duur-kort) var(--easing),
             transform var(--duur-kort) var(--easing)}
.knop:active{transform:translateY(1px)}
.knop--primair{background:var(--kleur-actie);color:#fff}
.knop--primair:hover{background:var(--kleur-actie-hover);color:#fff}
.knop--secundair{background:transparent;color:var(--cox-turquoise-800);border-color:var(--kleur-secundair)}
.knop--secundair:hover{background:var(--cox-turquoise-100);color:var(--cox-turquoise-800)}
.knop--wit{background:#fff;color:var(--cox-antraciet-900)}
.knop--wit:hover{background:var(--cox-grijs-100);color:var(--cox-antraciet-900)}
.link-tertiair{color:var(--kleur-actie);text-decoration:underline;font-weight:700;
  display:inline-flex;align-items:center;gap:6px;min-height:44px}
.link-tertiair::after{content:"\2192";text-decoration:none}
.knoprij{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-top:var(--sp-3)}

/* ---------- secties ---------- */
section{padding:var(--sp-8) 0}
section.compact{padding:var(--sp-6) 0}
.vlak{background:var(--kleur-vlak)}
.vlak-rustig{background:var(--kleur-vlak-rustig)}
.vlak-warm{background:var(--kleur-vlak-warm)}
.vlak-donker{background:var(--cox-turquoise-800);color:#fff}
.vlak-donker h2,.vlak-donker h3{color:#fff}
.vlak-donker .lead{color:var(--cox-turquoise-200)}
.sectiekop{max-width:760px;margin-bottom:var(--sp-4)}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--cox-antraciet-900);color:#fff;overflow:hidden;isolation:isolate}
.hero .achtergrond{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5;z-index:-2}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(51,51,50,.95) 14%,rgba(51,51,50,.74) 54%,rgba(51,51,50,.38) 100%)}
.hero .container{position:relative;z-index:1;padding-top:var(--sp-8);padding-bottom:var(--sp-8)}
.hero h1{color:#fff;max-width:18ch}
.hero .lead{color:#E4E7E7;max-width:54ch}
.hero--klein .container{padding-top:var(--sp-6);padding-bottom:var(--sp-6)}
.hero--klein h1{max-width:24ch}
.hero--effen{background:var(--cox-turquoise-800)}
.hero--effen::after{display:none}

/* ---------- kruimelpad ---------- */
.kruimels{background:var(--kleur-vlak);font-size:var(--tekst-xs);border-bottom:1px solid var(--kleur-rand)}
.kruimels ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:12px 0}
.kruimels li:not(:last-child)::after{content:"\203A";margin-left:6px;color:var(--kleur-tekst-zacht)}
.kruimels a{color:var(--kleur-tekst-zacht)}
.kruimels [aria-current]{color:var(--kleur-tekst);font-weight:700}

/* ---------- rasters ---------- */
.raster{display:grid;gap:var(--sp-3);grid-template-columns:1fr}
.split{display:grid;gap:var(--sp-4);align-items:center;grid-template-columns:1fr}

/* ---------- kaarten ---------- */
.kaart{background:#fff;border:1px solid var(--kleur-rand);border-radius:var(--radius-l);
  border-top:4px solid var(--cox-turquoise-500);padding:var(--sp-3);display:flex;flex-direction:column}
.kaart h3{margin-bottom:6px}
.kaart p{color:var(--kleur-tekst-zacht);font-size:var(--tekst-s);flex:1}
.kaart .icoon{color:var(--kleur-secundair);margin-bottom:var(--sp-2)}
.kaart--vlak{border:none;border-top:none}
.kaart--warm{background:var(--kleur-vlak-warm)}
.kaart--rustig{background:var(--kleur-vlak-rustig)}
.routekaart{border-radius:var(--radius-l);padding:var(--sp-3)}
.routekaart ul.lijst li::before{background:var(--cox-turquoise-700)}
.routekaart.kaart--warm ul.lijst li::before{background:var(--cox-oranje-600)}

/* ---------- tijdlijn ---------- */
.tijdlijn{display:grid;gap:var(--sp-3);grid-template-columns:1fr}
.stap{position:relative;padding-left:34px}
.stap .bol{position:absolute;top:7px;left:0;width:16px;height:16px;border-radius:50%;
  background:var(--cox-turquoise-200)}
.stap.actief .bol{background:var(--cox-oranje-600)}
.stap h3{color:#fff;font-size:var(--tekst-l);margin-bottom:4px}
.stap p{color:var(--cox-turquoise-200);font-size:var(--tekst-s);margin:0}

/* ---------- kerncijfers ---------- */
.cijfers{display:grid;gap:var(--sp-3);grid-template-columns:1fr}
.cijfer{background:var(--kleur-vlak-rustig);border-radius:var(--radius-l);padding:var(--sp-3)}
.cijfer .waarde{font-family:var(--font-kop);font-weight:600;font-size:2rem;
  color:var(--cox-turquoise-800);line-height:1.1}
.cijfer .label{color:var(--kleur-tekst-zacht);font-size:var(--tekst-s);margin-top:6px}

/* ---------- team ---------- */
.teamkaart img{border-radius:var(--radius-l);aspect-ratio:1/1;object-fit:cover;width:100%;
  background:var(--kleur-vlak)}
.teamkaart .naam{font-family:var(--font-kop);font-weight:600;font-size:var(--tekst-l);margin-top:var(--sp-2)}
.teamkaart .rol{color:var(--kleur-secundair);font-weight:700;font-size:var(--tekst-xs);letter-spacing:.04em}
.teamkaart p{font-size:var(--tekst-s);color:var(--kleur-tekst-zacht);margin-top:6px}

/* ---------- citaat ---------- */
.citaat{font-family:var(--font-kop);font-weight:500;font-size:clamp(1.28rem,4vw,var(--tekst-2xl));
  line-height:1.4;color:var(--cox-turquoise-800);max-width:24ch;margin:0 0 var(--sp-2)}

/* ---------- meldingen ---------- */
.melding{border-radius:var(--radius-m);padding:14px 18px;margin:var(--sp-2) 0;font-size:var(--tekst-s)}
.melding--info{background:var(--cox-turquoise-100);color:var(--cox-turquoise-800)}
.melding--attentie{background:var(--cox-oranje-100);color:var(--cox-attentie)}
.melding--succes{background:#E8F3ED;color:var(--cox-succes)}
.melding--fout{background:#FBEFEE;color:var(--cox-fout)}

/* ---------- downloadblok ---------- */
.download{display:flex;gap:var(--sp-3);align-items:flex-start;background:var(--kleur-vlak-rustig);
  border-radius:var(--radius-l);padding:var(--sp-3);flex-wrap:wrap}
.download .doc{width:52px;height:64px;border-radius:var(--radius-s);background:#fff;
  border:1.5px solid var(--kleur-rand);display:grid;place-items:center;font-family:var(--font-tekst);
  font-weight:700;font-size:.7rem;color:var(--cox-oranje-700);flex:none}
.download .tekst{flex:1;min-width:220px}
.download .tekst strong{display:block;font-family:var(--font-kop);font-size:var(--tekst-l);font-weight:600}
.download .tekst span{color:var(--kleur-tekst-zacht);font-size:var(--tekst-s)}

/* ---------- formulier ---------- */
.formulier{max-width:860px}
fieldset{border:none;padding:0;margin:0 0 var(--sp-6);min-width:0}
legend{font-family:var(--font-kop);font-weight:600;font-size:var(--tekst-xl);
  color:var(--cox-turquoise-800);padding:0;margin-bottom:4px}
.veldhulp{color:var(--kleur-tekst-zacht);font-size:var(--tekst-s);margin-bottom:var(--sp-3)}
.veldrij{display:grid;grid-template-columns:1fr;gap:var(--sp-2);margin-bottom:var(--sp-2)}
.veld{display:flex;flex-direction:column}
.veld label{font-weight:700;font-size:var(--tekst-s);margin-bottom:6px}
.veld .hint{font-weight:400;color:var(--kleur-tekst-zacht);font-size:var(--tekst-xs)}
.veld input[type=text],.veld input[type=email],.veld input[type=tel],.veld input[type=date],
.veld select,.veld textarea{
  font-family:var(--font-tekst);font-size:var(--tekst-s);color:var(--kleur-tekst);
  border:1.5px solid var(--kleur-rand);border-radius:var(--radius-m);padding:12px 14px;
  min-height:48px;background:#fff;width:100%}
.veld textarea{min-height:108px;resize:vertical;line-height:1.55}
.veld input:focus,.veld select:focus,.veld textarea:focus{
  border-color:var(--kleur-secundair);outline:3px solid var(--kleur-focus);outline-offset:0}
.verplicht{color:var(--cox-oranje-700)}
.optioneel{font-weight:400;color:var(--kleur-tekst-zacht);font-size:var(--tekst-xs)}
.keuzes{display:flex;flex-wrap:wrap;gap:4px 20px}
.keuze{display:inline-flex;align-items:center;gap:10px;font-size:var(--tekst-s);min-height:48px}
.keuze input{width:22px;height:22px;accent-color:var(--cox-turquoise-700);flex:none}
.blokvraag{background:var(--kleur-vlak);border-radius:var(--radius-l);padding:var(--sp-3);
  margin-bottom:var(--sp-3)}
.blokvraag h3{font-family:var(--font-kop);font-size:var(--tekst-l);color:var(--cox-turquoise-800);
  margin-bottom:var(--sp-2)}
.foutmelding{color:var(--cox-fout);font-size:var(--tekst-xs);margin-top:6px;display:none;font-weight:700}
.veld.fout input,.veld.fout textarea,.veld.fout select{border-color:var(--cox-fout);border-width:2px}
.veld.fout .foutmelding{display:block}
.foutsamenvatting{border:2px solid var(--cox-fout);background:#FBEFEE;border-radius:var(--radius-m);
  padding:18px 20px;margin-bottom:var(--sp-3)}
.foutsamenvatting h2{font-size:var(--tekst-l);color:var(--cox-fout);margin-bottom:8px}
.foutsamenvatting ul{margin:0;padding-left:20px}
.foutsamenvatting a{color:var(--cox-fout)}

/* ---------- contactbalk ---------- */
.contactbalk{background:var(--kleur-actie);color:#fff}
.contactbalk .container{display:flex;align-items:flex-start;justify-content:space-between;
  gap:var(--sp-3);padding-top:var(--sp-4);padding-bottom:var(--sp-4);flex-wrap:wrap}
.contactbalk .tel{font-family:var(--font-kop);font-weight:600;font-size:clamp(1.4rem,5vw,2rem);
  color:#fff;text-decoration:none}
.contactbalk .mail{color:#FDF0E4}

/* ---------- footer ---------- */
footer.site{background:var(--cox-antraciet-900);color:#C9CDCD;padding:var(--sp-8) 0 var(--sp-4);
  font-size:var(--tekst-s)}
footer.site .kolommen{display:grid;gap:var(--sp-4);grid-template-columns:1fr}
footer.site h2{color:#fff;font-size:var(--tekst-s);font-family:var(--font-tekst);font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;margin-bottom:var(--sp-2)}
footer.site a{color:#C9CDCD;text-decoration:none;display:block;padding:7px 0;min-height:44px;
  display:flex;align-items:center}
footer.site a:hover{color:#fff;text-decoration:underline}
footer.site .gegevens{color:#C9CDCD;line-height:1.75}
footer.site .gegevens a{display:inline;min-height:0;text-decoration:underline}
footer.site .onderrand{border-top:1px solid #4D4D4C;margin-top:var(--sp-6);padding-top:var(--sp-3);
  display:flex;justify-content:space-between;gap:var(--sp-2);flex-wrap:wrap;color:#8A8F8F;
  font-size:var(--tekst-xs)}
footer.site .onderrand a{display:inline;padding:0;min-height:0;color:#8A8F8F;text-decoration:underline}

/* ---------- beeld, met vaste verhouding tegen layout shift ---------- */
.beeld{border-radius:var(--radius-l);overflow:hidden;background:var(--kleur-vlak)}
.beeld img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.beeld--breed img{aspect-ratio:16/9}

/* ---------- terugval wanneer een beeld ontbreekt ---------- */
/* Beter een rustig vlak in de huisstijl dan een gebroken-afbeeldingpictogram.
   De layout verspringt niet, omdat width en height al in de HTML staan. */
img.beeld-ontbreekt{background:var(--kleur-vlak-rustig)!important;object-fit:contain!important}
.hero img.achtergrond.beeld-ontbreekt{opacity:.35;background:var(--cox-turquoise-800)!important}

/* ---------- markering voor nog aan te leveren gegevens ---------- */
.invulveld{background:#FFF6CC;border-bottom:2px solid var(--cox-attentie);padding:1px 6px;
  font-weight:700;color:var(--cox-attentie);border-radius:2px}

/* ---------- cookiebanner (PvE hoofdstuk 8) ---------- */
.cookiebanner{position:fixed;inset:auto 0 0 0;z-index:350;background:#fff;
  border-top:3px solid var(--cox-turquoise-700);box-shadow:0 -8px 32px rgba(51,51,50,.18);
  padding:var(--sp-3) 0 calc(var(--sp-3) + env(safe-area-inset-bottom));
  transform:translateY(100%);
  transition:transform var(--duur-mid) var(--easing);
  max-height:88vh;max-height:88svh;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch}
.cookiebanner.zichtbaar{transform:none}
.cookiebanner h2{font-size:var(--tekst-l);margin-bottom:6px}
.cookiebanner p{font-size:var(--tekst-s);margin-bottom:var(--sp-2);max-width:76ch}
.cookiebanner .keuzeknoppen{display:flex;gap:var(--sp-2);flex-wrap:wrap}
/* Accepteren en weigeren zijn visueel gelijkwaardig — geen dark pattern */
.cookiebanner .keuzeknoppen .knop--primair,
.cookiebanner .keuzeknoppen .knop--gelijk{background:var(--kleur-actie);color:#fff;
  border-color:var(--kleur-actie);flex:1 1 200px}
.cookiebanner .keuzeknoppen .knop--tekst{background:transparent;color:var(--cox-turquoise-800);
  border-color:var(--kleur-secundair);flex:1 1 200px}
.cookie-instellingen{background:var(--kleur-vlak);border-radius:var(--radius-l);padding:var(--sp-3);
  margin-top:var(--sp-3)}
.cookie-instellingen .categorie{border-bottom:1px solid var(--kleur-rand);padding:var(--sp-2) 0}
.cookie-instellingen .categorie:last-of-type{border-bottom:none}
.cookie-instellingen .categorie label{display:flex;gap:14px;align-items:flex-start;cursor:pointer;
  font-weight:700;min-height:48px}
.cookie-instellingen .categorie input{width:22px;height:22px;margin-top:3px;flex:none;
  accent-color:var(--cox-turquoise-700)}
.cookie-instellingen .categorie .uitleg{font-weight:400;color:var(--kleur-tekst-zacht);
  font-size:var(--tekst-xs);display:block;margin-top:4px}
.cookie-instellingen .categorie input:disabled{opacity:.55}
.consent-status{font-size:var(--tekst-xs);color:var(--kleur-tekst-zacht);margin-top:var(--sp-2)}

/* plaatshouder voor geblokkeerde externe content */
.geblokkeerd{background:var(--kleur-vlak);border:1.5px dashed var(--kleur-rand);
  border-radius:var(--radius-l);padding:var(--sp-4);text-align:left;display:grid;gap:12px;
  place-items:start;min-height:220px;align-content:center}
.geblokkeerd h3{font-size:var(--tekst-l);margin:0}
.geblokkeerd p{font-size:var(--tekst-s);color:var(--kleur-tekst-zacht);margin:0}

/* ---------- vaste actieknop op mobiel ---------- */
.mobielbalk{position:fixed;inset:auto 0 0 0;z-index:180;background:#fff;
  border-top:1px solid var(--kleur-rand);box-shadow:0 -4px 18px rgba(51,51,50,.10);
  display:flex;gap:10px;padding:10px 14px calc(10px + env(safe-area-inset-bottom))}
.mobielbalk .knop{flex:1;padding:12px 10px;font-size:.94rem;min-height:52px}
/* De balk schuift weg zodra dezelfde acties al op het scherm staan, zodat hij
   niet permanent een strook van het scherm bezet houdt. */
.mobielbalk{transform:translateY(0);transition:transform var(--duur-mid) var(--easing)}
.mobielbalk[data-weg="1"]{transform:translateY(calc(100% + 12px));pointer-events:none}
body.heeft-mobielbalk{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
body.cookie-open .mobielbalk{display:none}

/* ============================================================
   BREEKPUNTEN — PvE hoofdstuk 3
   Mobiel tot 767 · tablet 768–1023 · desktop vanaf 1024 · breedbeeld vanaf 1440
   ============================================================ */

/* --- tablet: 768 px en hoger --- */
@media (min-width:768px){
  :root{--sp-10:80px;--sp-12:96px;--header-h:80px}
  body{font-size:var(--tekst-m)}
  .container{padding:0 var(--sp-4)}
  .topbalk{display:block}
  section{padding:var(--sp-10) 0}
  .raster-2,.raster-3{grid-template-columns:repeat(2,1fr)}
  .raster-4{grid-template-columns:repeat(2,1fr)}
  .cijfers{grid-template-columns:repeat(3,1fr)}
  .tijdlijn{grid-template-columns:repeat(2,1fr)}
  .veldrij{grid-template-columns:repeat(2,1fr);gap:var(--sp-2) var(--sp-3)}
  .veldrij.een{grid-template-columns:1fr}
  .split{grid-template-columns:1fr 1fr;gap:var(--sp-4)}
  footer.site .kolommen{grid-template-columns:repeat(2,1fr)}
  .nav-tel{display:inline-flex;margin-left:auto}
  .menuknop{margin-left:var(--sp-2)}
  .logo .woord{font-size:37px}.logo .sub{font-size:9.2px}
  .hero .container{padding-top:var(--sp-10);padding-bottom:var(--sp-10)}
  .mobielbalk{display:none}
  body.heeft-mobielbalk{padding-bottom:0}
  .cookiebanner .keuzeknoppen .knop{flex:0 1 auto;min-width:190px}
}

/* --- desktop: 1024 px en hoger --- */
@media (min-width:1024px){
  nav.hoofd{display:flex;align-items:center;gap:0;margin-left:auto;flex-wrap:nowrap}
  nav.hoofd a{padding:12px 8px;font-size:.90rem;white-space:nowrap}
  nav.hoofd a[aria-current="page"]::after{left:8px;right:8px}
  nav.hoofd .knop{padding-left:16px;padding-right:16px}
  .menuknop{display:none}
  .nav-tel{display:none}
  .logo{margin-right:var(--sp-2)}
  .raster-3{grid-template-columns:repeat(3,1fr)}
  .raster-4{grid-template-columns:repeat(4,1fr)}
  .tijdlijn{grid-template-columns:repeat(4,1fr);position:relative}
  .tijdlijn .stap{padding-left:0;padding-top:var(--sp-4)}
  .tijdlijn .stap .bol{top:8px;left:0}
  .tijdlijn .stap::before{content:"";position:absolute;top:15px;left:8px;
    right:calc(-1 * var(--sp-3));height:2px;background:var(--cox-turquoise-200)}
  /* De laatste stap houdt zijn lijn, maar tot de rand van de eigen kolom:
     zo loopt de tijdlijn door tot het einde in plaats van bij bol 4 te stoppen. */
  .tijdlijn .stap:last-child::before{right:0}
  .split{grid-template-columns:1.05fr .95fr;gap:var(--sp-6)}
  footer.site .kolommen{grid-template-columns:1.5fr 1fr 1fr 1fr}
  .menupaneel,.overlay{display:none}
}

/* --- ruimer bureaublad: 1200 px en hoger --- */
@media (min-width:1200px){
  nav.hoofd{gap:1px}
  nav.hoofd a{padding:12px 10px;font-size:.94rem}
  nav.hoofd a[aria-current="page"]::after{left:10px;right:10px}
}

/* --- breedbeeld: 1440 px en hoger --- */
@media (min-width:1440px){
  :root{--breedte-max:1240px;--sp-10:88px;--sp-12:112px}
  nav.hoofd{gap:2px}
  nav.hoofd a{padding:12px;font-size:.97rem}
  nav.hoofd a[aria-current="page"]::after{left:12px;right:12px}
  nav.hoofd .knop{padding-left:22px;padding-right:22px}
  .container{padding:0 var(--sp-6)}
  p,.lead{max-width:68ch}
  section{padding:var(--sp-12) 0}
}

/* --- print --- */
@media print{
  header.site,footer.site,.topbalk,.contactbalk,.menuknop,.menupaneel,.overlay,
  .cookiebanner,.mobielbalk,.knoprij,.kruimels{display:none!important}
  body{font-size:11pt;color:#000;padding:0}
  main{animation:none}
  .hero{background:#fff;color:#000}
  .hero h1,.hero .lead{color:#000}
  .hero .achtergrond,.hero::after{display:none}
  section{padding:12pt 0;break-inside:avoid}
  .kaart,.melding,.download{break-inside:avoid;border:1px solid #999}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
}

/* --- hoog contrast en donkere systeemvoorkeur: leesbaarheid borgen --- */
@media (prefers-contrast:more){
  :root{--kleur-tekst-zacht:#4A4E4E;--kleur-rand:#8A8F8F}
  .knop--secundair{border-width:3px}
}