/* tokens.css — westendorptoegang.nl
   Richting "Salto" (Lars, 22-09-2026): warm gebroken wit, witte panelen met dunne lijnen, labels in kapitalen,
   Archivo (uit het logo) voor koppen, isometrische illustraties, kleine animaties. Wijkt bewust af van BRIEF §6.
   Kleuren uit het logopakket (LEESMIJ 20-09-2026). */
:root{
  /* kleur */
  --papier:#FAF7F2;         /* pagina-achtergrond, warm gebroken wit */
  --paneel:#FFFFFF;         /* panelen, kaarten, tabellen, formulier */
  --lijn:#E4DFD7;           /* dunne warme lijnen rond panelen */
  --lijn-2:#CFC8BD;         /* iets zwaardere lijn */
  --inkt:#14232E;           /* lopende tekst en koppen */
  --kop:#0F1C27;
  --inkt-zacht:#5A6570;     /* labels, bijschriften */
  --primair:#1B68C0;        /* middenblauw uit het logo: links, accenten */
  --primair-donker:#02295B; /* donkerblauw: hover, lijn onder de header */
  --accent:#49BFFE;         /* lichtblauw uit het logo: primaire knop (donkere tekst erop) */
  --accent-hover:#2FAFF7;
  --signaal:#177A42;        /* groen: led op de lezer, formuliersucces, bedankt */
  --signaal-licht:#3DBE7A;
  --donker:#222427;         /* header: antraciet */
  --donker-lijn:#2A2A2A;
  --op-donker:#FFFFFF;
  --op-donker-zacht:#AEB9C4;
  --link-donker:#49BFFE;
  --fout:#B3261E;
  --wit:#FFFFFF;
  /* aliassen voor bestaande regels */
  --vlak:var(--papier); --vlak-2:var(--paneel); --primair-2:var(--primair); --signaal-donker:#125E33;

  /* typografie */
  --font:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-kop:"Archivo","IBM Plex Sans",system-ui,sans-serif;
  --tekst:17px; --regel:1.6; --meet:68ch;
  --h1:38px; --h2:30px; --h3:20px; --intro:19px;
  --h1-d:60px; --h2-d:42px; --h3-d:22px; --intro-d:21px;
  --label:12px;

  /* layout */
  --max:1240px; --goot:16px; --sectie:72px; --straal:6px; --straal-knop:4px; --lijndikte:1px;
  --focus:2px solid var(--primair);
}

/* styles.css — westendorptoegang.nl, richting "Salto". Tokens in tokens.css (wordt ervoor geplakt).
   Warm gebroken wit, witte panelen met dunne lijnen, labels in kapitalen, Archivo-koppen, illustraties, kleine animaties. */

@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:100 700;font-display:swap;src:url("/static/font/ibm-plex-sans-latin-wght.woff2") format("woff2")}
@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-display:swap;src:url("/static/font/archivo-latin-wght-normal.woff2") format("woff2")}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);font-size:var(--tekst);line-height:var(--regel);color:var(--inkt);background:var(--papier);-webkit-font-smoothing:antialiased}
@media (min-width:900px){body{font-size:18px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

h1,h2,h3{font-family:var(--font-kop);color:var(--kop);font-weight:600;line-height:1.12;letter-spacing:-.01em;margin:0 0 .5em;text-wrap:balance}
h1{font-size:var(--h1);line-height:1.05;letter-spacing:-.02em}
h2{font-size:var(--h2)}
h3{font-size:var(--h3);line-height:1.3}
@media (min-width:900px){h1{font-size:var(--h1-d)}h2{font-size:var(--h2-d)}h3{font-size:var(--h3-d)}}
.label{display:block;font-family:var(--font-kop);font-size:var(--label);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--inkt-zacht);margin:0 0 16px}
.intro,p.groot{font-size:var(--intro);line-height:1.55;max-width:58ch}
@media (min-width:900px){.intro,p.groot{font-size:var(--intro-d)}}
p,ul,ol,table,figure{margin:0 0 1.1em}
p,li,dd,dt,figcaption{max-width:var(--meet)}
ul,ol{padding-left:1.25em}
li{margin-bottom:.35em}
a{color:var(--primair);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--primair-donker)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:var(--focus);outline-offset:2px}
img,svg{max-width:100%;height:auto;display:block}
strong,b{font-weight:600}
small,.zacht{color:var(--inkt-zacht)}
hr{border:0;border-top:var(--lijndikte) solid var(--lijn);margin:0}
.visueel-verborgen{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(--paneel);color:var(--kop);padding:8px 12px;z-index:100}
.skip:focus{left:8px}
/* tekstlink in Salto-stijl: kapitalen, chevron */
.meer{display:inline-block;font-family:var(--font-kop);font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:var(--kop)}
.meer::after{content:" \203A";font-size:1.25em;line-height:0}
.meer:hover{color:var(--primair)}

/* ---------- raster ---------- */
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--goot)}
@media (min-width:900px){.wrap{padding:0 32px}}
.rooster{display:grid;grid-template-columns:1fr;gap:24px}
@media (min-width:900px){
  .rooster{grid-template-columns:repeat(12,1fr);gap:32px}
  .k8{grid-column:span 8}.k7{grid-column:span 7}.k6{grid-column:span 6}.k5{grid-column:span 5}.k4{grid-column:span 4}.k3{grid-column:span 3}.k12{grid-column:span 12}
}
.tekst{max-width:var(--meet)}
section,.sectie{padding:var(--sectie) 0}
@media (min-width:900px){section,.sectie{padding:104px 0}}
.sectie--wit{background:var(--paneel);border-top:var(--lijndikte) solid var(--lijn);border-bottom:var(--lijndikte) solid var(--lijn)}
.sectie--lijn{border-top:var(--lijndikte) solid var(--lijn)}
/* groene accenten: alleen het duurzaamheidsblok en de Magtec-pagina */
.sectie--groen{background:#F1F8F3;border-top:var(--lijndikte) solid #D6E9DC;border-bottom:var(--lijndikte) solid #D6E9DC}
.sectie--groen .label{color:var(--signaal)}
.kolommen--groen>div{border-top:3px solid var(--signaal-licht)}
.feitenpaneel--groen dt{color:var(--signaal)}
.feitenpaneel--groen div{border-top:3px solid var(--signaal-licht)}
.galerij>div{padding:12px}
.galerij figure img{aspect-ratio:3/2}

/* ---------- paneel (kaart) ---------- */
.paneel{background:var(--paneel);border:var(--lijndikte) solid var(--lijn);border-radius:var(--straal);padding:28px}
@media (min-width:900px){.paneel{padding:36px}}
.paneel h3{margin-top:0}
.paneel p:last-child{margin-bottom:0}

/* ---------- header ---------- */
.kop{background:var(--donker);color:var(--op-donker);position:relative;border-bottom:2px solid var(--primair)}
.kop .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px}
.logo{display:inline-flex;align-items:center;flex-shrink:0}
.logo svg,.logo img{height:48px;width:auto}
@media (min-width:900px){.logo svg,.logo img{height:60px}.kop .wrap{min-height:96px}}
.kop__acties{display:flex;align-items:center;gap:8px}
.bel{display:inline-flex;align-items:center;gap:8px;color:var(--op-donker);text-decoration:none;font-weight:500;padding:8px 12px;border:var(--lijndikte) solid var(--op-donker-zacht);border-radius:var(--straal-knop);white-space:nowrap}
.bel svg{width:18px;height:18px;flex-shrink:0}
.bel span{display:none}
@media (min-width:600px){.bel span{display:inline}}
.menu-knop{display:inline-flex;align-items:center;gap:8px;background:none;border:var(--lijndikte) solid var(--op-donker-zacht);color:var(--op-donker);border-radius:var(--straal-knop);padding:8px 12px;font:inherit;font-weight:500;cursor:pointer}
.menu-knop svg{width:18px;height:18px}
.nav{display:none}
.nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:nowrap;gap:0 20px;font-size:15px}
.nav li{margin:0}
.nav a{color:var(--op-donker);text-decoration:none;font-weight:500;padding:6px 0;display:inline-block;border-bottom:2px solid transparent;white-space:nowrap}
.nav a:hover,.nav a[aria-current="page"]{color:var(--link-donker);border-bottom-color:var(--link-donker)}
.bel:hover,.menu-knop:hover{border-color:var(--op-donker)}
.kop a:focus-visible,.kop button:focus-visible{outline-color:var(--link-donker)}
@media (max-width:1199px){
  .nav.open{display:block;position:absolute;left:0;right:0;top:100%;background:var(--donker);border-bottom:var(--lijndikte) solid var(--donker-lijn);padding:12px var(--goot) 20px;z-index:50}
  .nav.open ul{flex-direction:column;flex-wrap:wrap;gap:0;font-size:inherit}
  .nav.open a{display:block;padding:10px 0;border-bottom:var(--lijndikte) solid var(--donker-lijn)}
}
@media (min-width:1200px){.nav{display:block}.menu-knop{display:none}}

/* ---------- knoppen ---------- */
.knop{display:inline-block;background:var(--accent);color:var(--kop);text-decoration:none;padding:14px 22px;border-radius:var(--straal-knop);border:0;font-family:var(--font-kop);font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;line-height:1.2}
.knop:hover{background:var(--accent-hover);color:var(--kop)}
.knop--tweede{background:transparent;color:var(--kop);border:var(--lijndikte) solid var(--lijn-2)}
.knop--tweede:hover{background:var(--paneel);color:var(--kop)}
.acties{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin:28px 0 0}
.acties .tel{font-weight:500}

/* ---------- hero ---------- */
.hero{padding:56px 0 var(--sectie)}
@media (min-width:900px){.hero{padding:88px 0 104px}.hero .rooster{align-items:center}}
.hero .intro{margin-top:20px}
.hero__rechts .iso{width:100%;height:auto}
.hero__rechts figure img{aspect-ratio:3/2;border-radius:var(--straal)}
.hero__illustratie{background:var(--paneel);border:var(--lijndikte) solid var(--lijn);border-radius:var(--straal);padding:16px}

/* ---------- illustraties en animatie ---------- */
.iso{width:100%;height:auto}
.led{animation:led 1.8s ease-in-out infinite}
@keyframes led{0%,100%{opacity:1}50%{opacity:.15}}
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.js .reveal.in{opacity:1;transform:none}
.hero .led{animation:none}   /* hero krijgt een echte foto; geen animatie daar (Lars, 22-09-2026) */
/* sectorscènes: één bewegend element per scène; pauze zolang de sectie niet in beeld is */
.anim-auto{animation:rijden 7s linear infinite}
@keyframes rijden{0%{transform:translate(-62px,-36px);opacity:0}8%{opacity:1}92%{opacity:1}100%{transform:translate(62px,36px);opacity:0}}
.anim-vlag{animation:wapperen 1.4s ease-in-out infinite alternate}
@keyframes wapperen{from{transform:skewY(-5deg)}to{transform:skewY(5deg)}}
.anim-gloed{animation:gloed 2.4s ease-in-out infinite}
@keyframes gloed{0%,100%{opacity:1}50%{opacity:.45}}
.anim-water{animation:water 3s ease-in-out infinite}
@keyframes water{0%,100%{opacity:1;transform:translate(0,0)}50%{opacity:.55;transform:translate(2px,1px)}}
.anim-rook{animation:rook 3s ease-out infinite}
@keyframes rook{0%{opacity:.8;transform:translate(0,0)}100%{opacity:0;transform:translate(6px,-18px)}}
.anim-bal{animation:bal 2.2s ease-in-out infinite alternate}
@keyframes bal{from{transform:translate(0,0)}to{transform:translate(18px,10px)}}
.anim-auto-2{animation:rijden 11s linear infinite 4s}
.anim-heftruck{animation:heftruck 5s ease-in-out infinite alternate}
@keyframes heftruck{from{transform:translate(0,0)}to{transform:translate(-26px,15px)}}
.anim-licht{animation:licht 9s ease-in-out infinite}
.anim-licht-1{animation-delay:2s}.anim-licht-2{animation-delay:4.5s}.anim-licht-3{animation-delay:6.5s}
@keyframes licht{0%,35%{fill:#BFE6FF}45%,85%{fill:#FFE49A}95%,100%{fill:#BFE6FF}}
.anim-kraan{animation:kraan 14s ease-in-out infinite alternate}
@keyframes kraan{from{transform:rotate(-25deg)}to{transform:rotate(30deg)}}
.anim-loper{animation:loper 9s linear infinite}
@keyframes loper{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.reveal:not(.in) [class^="anim-"],.reveal:not(.in) [class*=" anim-"]{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none}.led{animation:none}}

/* ---------- sectorrij (horizontaal scrollend, zoals Salto) ---------- */
.rij-kop{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:28px}
.rij-knoppen{display:none;gap:8px}
@media (min-width:900px){.rij-knoppen{display:flex}}
.rij-knoppen button{width:44px;height:44px;border-radius:50%;border:var(--lijndikte) solid var(--lijn-2);background:var(--paneel);cursor:pointer;font-size:20px;line-height:1;color:var(--kop)}
.rij-knoppen button:hover{border-color:var(--kop)}
.rij{display:flex;gap:0;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;border:var(--lijndikte) solid var(--lijn);border-radius:var(--straal);background:var(--paneel)}
.rij::-webkit-scrollbar{height:8px}
.rij::-webkit-scrollbar-thumb{background:var(--lijn-2);border-radius:4px}
.kaart{flex:0 0 86%;scroll-snap-align:start;border-right:var(--lijndikte) solid var(--lijn);display:flex;flex-direction:column}
@media (min-width:700px){.kaart{flex-basis:44%}}
@media (min-width:1100px){.kaart{flex-basis:33.333%}}
.kaart:last-child{border-right:0}
.kaart__beeld{border-bottom:var(--lijndikte) solid var(--lijn);background:var(--paneel);padding:12px 12px 0}
.kaart__beeld .iso{width:100%;height:auto}
.kaart__tekst{padding:28px 28px 32px;display:flex;flex-direction:column;gap:12px;flex:1}
.kaart__tekst h3{margin:0}
.kaart__tekst p{margin:0;flex:1}

/* ---------- kruimelpad ---------- */
.kruimels{font-size:.9em;padding:16px 0 0;color:var(--inkt-zacht)}
.kruimels ol{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:4px 8px}
.kruimels li{margin:0;max-width:none}
.kruimels li+li::before{content:"/";margin-right:8px;color:var(--lijn-2)}
.kruimels a{color:var(--inkt-zacht)}

/* ---------- beeld ---------- */
figure{margin:0}
figure img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--straal)}
figcaption{font-size:.9em;color:var(--inkt-zacht);padding-top:8px}
.foto-vlak{aspect-ratio:3/2;border:var(--lijndikte) solid var(--lijn);background:var(--paneel);display:flex;align-items:center;justify-content:center;color:var(--inkt-zacht);font-size:.9em;text-align:center;padding:16px}
.portret img{aspect-ratio:1}

/* ---------- kolommen, stappen, tabellen, lijsten ---------- */
.kolommen{display:grid;gap:24px}
@media (min-width:700px){.kolommen--2{grid-template-columns:1fr 1fr}.kolommen--3{grid-template-columns:repeat(3,1fr)}.kolommen--4{grid-template-columns:repeat(4,1fr)}}
.kolommen>div{background:var(--paneel);border:var(--lijndikte) solid var(--lijn);border-radius:var(--straal);padding:28px}
.kolommen h3{margin-top:0}
.kolommen p:last-child{margin-bottom:0}
.kolommen+p{margin-top:32px}
.stappen{list-style:none;padding:0;margin:0;counter-reset:stap;display:grid;gap:24px}
@media (min-width:700px){.stappen{grid-template-columns:repeat(4,1fr)}}
.stappen li{counter-increment:stap;margin:0;background:var(--paneel);border:var(--lijndikte) solid var(--lijn);border-radius:var(--straal);padding:28px}
.stappen li::before{content:counter(stap,decimal-leading-zero);display:block;font-family:var(--font-kop);font-weight:700;font-size:40px;color:var(--primair);line-height:1;margin-bottom:16px;letter-spacing:-.02em}
.stappen h3{font-size:var(--h3);margin-bottom:.4em}
.stappen p{margin:0}
table{border-collapse:collapse;width:100%;background:var(--paneel);border:var(--lijndikte) solid var(--lijn);font-size:.95em}
th,td{text-align:left;vertical-align:top;padding:14px 16px;border-bottom:var(--lijndikte) solid var(--lijn)}
thead th{font-family:var(--font-kop);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--inkt-zacht);font-weight:700;background:var(--papier)}
tbody th{width:32%;font-weight:600;color:var(--kop)}
tr:last-child td,tr:last-child th{border-bottom:0}
.tabel-scroll{overflow-x:auto;margin:0 0 1.1em;border-radius:var(--straal)}
.tabel-scroll table{margin:0;min-width:520px}
.feiten{list-style:none;padding:0;margin:0}
.feiten li{padding:16px 0;border-top:var(--lijndikte) solid var(--lijn);margin:0}
.feiten li:last-child{border-bottom:var(--lijndikte) solid var(--lijn)}
.plaatsen{list-style:none;padding:0;margin:0;display:grid;gap:16px 32px}
@media (min-width:700px){.plaatsen{grid-template-columns:repeat(3,1fr)}}
.plaatsen li{margin:0}
.plaatsen .regio{font-family:var(--font-kop);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--inkt-zacht);display:block;margin-bottom:8px;font-weight:700}
.plaatsen ul{list-style:none;padding:0;margin:0}
.plaatsen ul li{margin:0 0 4px}
.feitenpaneel{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.feitenpaneel div{background:var(--paneel);border:var(--lijndikte) solid var(--lijn);border-radius:var(--straal);padding:20px}
.feitenpaneel dt{font-family:var(--font-kop);font-size:30px;font-weight:700;letter-spacing:-.02em;line-height:1.05;color:var(--primair);max-width:none}
.feitenpaneel dd{margin:6px 0 0;color:var(--inkt-zacht);font-size:.92em;max-width:none}

/* ---------- FAQ ---------- */
.faq{background:var(--paneel);border:var(--lijndikte) solid var(--lijn);border-radius:var(--straal);padding:0 28px}
.faq details{border-bottom:var(--lijndikte) solid var(--lijn)}
.faq details:last-child{border-bottom:0}
.faq summary{cursor:pointer;padding:20px 40px 20px 0;font-weight:600;color:var(--kop);list-style:none;position:relative;font-size:1.04em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:10px;height:10px;border-right:2px solid var(--kop);border-bottom:2px solid var(--kop);transform:translateY(-70%) rotate(45deg)}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq .antwoord{padding:0 0 20px}
.faq .antwoord p:last-child{margin-bottom:0}

/* ---------- formulier en adviseur ---------- */
.formulier{display:grid;gap:18px;background:var(--paneel);border:var(--lijndikte) solid var(--lijn);border-radius:var(--straal);padding:28px}
@media (min-width:700px){.formulier{grid-template-columns:1fr 1fr}.formulier .breed{grid-column:1/-1}}
@media (min-width:900px){.formulier{padding:40px}}
.veld{display:flex;flex-direction:column;gap:6px;margin:0}
.veld label{font-weight:600;color:var(--kop);font-size:.95em}
.veld .hint{font-size:.88em;color:var(--inkt-zacht)}
input,select,textarea{font:inherit;color:var(--inkt);background:var(--papier);border:var(--lijndikte) solid var(--lijn-2);border-radius:var(--straal-knop);padding:12px 14px;width:100%}
input:hover,select:hover,textarea:hover{border-color:var(--inkt-zacht)}
textarea{min-height:120px;resize:vertical}
.veld.fout input,.veld.fout select,.veld.fout textarea{border-color:var(--fout)}
.veld .melding{color:var(--fout);font-size:.9em;display:none}
.veld.fout .melding{display:block}
.form-status{margin:8px 0 0;font-weight:500}
.form-status.ok{color:var(--signaal)}
.form-status.mis{color:var(--fout)}
.honing{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
.adviseur{background:var(--paneel);border:var(--lijndikte) solid var(--lijn);border-radius:var(--straal);padding:28px}
.adviseur__personen{display:flex;gap:20px;flex-wrap:wrap;margin-bottom:16px}
.adviseur__persoon figure{margin:0 0 8px}
.adviseur img{width:120px;aspect-ratio:1;object-fit:cover;border-radius:var(--straal)}
.adviseur .naam{font-weight:600;color:var(--kop);margin:0}
.adviseur .functie{margin:0 0 8px;color:var(--inkt-zacht);font-size:.92em}
.adviseur .feiten{margin-top:16px;font-size:.95em}

/* ---------- video ---------- */
.video{margin:0}
.video__start{display:block;position:relative;width:100%;padding:0;border:0;background:none;cursor:pointer;text-align:left}
.video__start figure{margin:0}
.video__knop{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--accent);color:var(--kop);font-family:var(--font-kop);font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:14px 22px;border-radius:var(--straal-knop);white-space:nowrap}
.video__start:hover .video__knop{background:var(--accent-hover)}
.video video{width:100%;height:auto;aspect-ratio:3/2;background:#000;display:block;border-radius:var(--straal)}

/* ---------- footer ---------- */
.voet{background:var(--paneel);border-top:var(--lijndikte) solid var(--lijn);padding:64px 0 32px;font-size:.95em}
.voet__naam{font-family:var(--font-kop);font-weight:700;color:var(--kop);font-size:1.15em;margin-bottom:.4em}
.voet h2{font-family:var(--font-kop);font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:1em;color:var(--inkt-zacht)}
.voet ul{list-style:none;padding:0;margin:0}
.voet li{margin:0 0 8px}
.voet a{color:var(--inkt);text-decoration:none}
.voet a:hover{color:var(--primair);text-decoration:underline}
.voet address{font-style:normal}
.voet__logos{list-style:none;padding:0;margin:40px 0 0;display:flex;flex-wrap:wrap;gap:16px 32px;align-items:center}
.voet__logos li{margin:0}
.voet__logos img{height:44px;width:auto}
.voet .onderdeel{margin-top:40px;padding-top:20px;border-top:var(--lijndikte) solid var(--lijn);color:var(--inkt-zacht);font-size:.9em}
.voet .onderdeel p{margin:0 0 6px}
.voet button{background:none;border:0;padding:0;font:inherit;color:var(--inkt);text-decoration:underline;cursor:pointer}

/* ---------- consent ---------- */
.consent{position:fixed;left:0;right:0;bottom:0;background:var(--paneel);border-top:var(--lijndikte) solid var(--lijn-2);padding:16px 0;z-index:60}
.consent .wrap{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between}
.consent p{margin:0;max-width:60ch;font-size:.95em}
.consent .knoppen{display:flex;gap:8px;flex-wrap:wrap}
.consent .knop{padding:10px 16px}

/* ---------- bedankt, meta ---------- */
.bevestigd{border-left:4px solid var(--signaal);padding:8px 0 8px 20px}
.laatst{color:var(--inkt-zacht);font-size:.92em}
.lijst-links{list-style:none;padding:0}