/* 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:1440px; --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"-links als knop met rand (Lars, 23-09-2026: klikbaar is altijd een knop, geen tekstlink) */
.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);padding:12px 18px;border:var(--lijndikte) solid var(--lijn-2);border-radius:var(--straal-knop);line-height:1.2}
.meer::after{content:" \203A";font-size:1.25em;line-height:0}
.meer:hover{background:var(--paneel);border-color:var(--primair);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}}
/* lichte header (test): wit vlak, zwart woordmerk, donkere navigatie */
.kop--licht{background:var(--paneel);color:var(--kop);border-bottom:var(--lijndikte) solid var(--lijn)}
.kop--licht .nav a{color:var(--kop)}
.kop--licht .nav a:hover,.kop--licht .nav a[aria-current="page"]{color:var(--primair);border-bottom-color:var(--primair)}
.kop--licht .bel,.kop--licht .menu-knop{color:var(--kop);border-color:var(--lijn-2)}
.kop--licht .bel:hover,.kop--licht .menu-knop:hover{border-color:var(--kop)}
.kop--licht a:focus-visible,.kop--licht button:focus-visible{outline-color:var(--primair)}
@media (max-width:1199px){.kop--licht .nav.open{background:var(--paneel);border-bottom-color:var(--lijn)}.kop--licht .nav.open a{border-bottom-color:var(--lijn)}}

/* ---------- 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}
/* knoppen in de sectorkaarten: rustig (Lars, 23-09-2026): twee compacte omrande knoppen naast elkaar, geen gevulde knop per kaart */
.acties--kaart{gap:8px 10px;margin:20px 0 0}
.acties--kaart .knop{padding:9px 12px;font-size:11px;background:transparent;color:var(--kop);border:var(--lijndikte) solid var(--lijn-2)}
.acties--kaart .knop:hover{background:var(--paneel);border-color:var(--primair);color:var(--primair)}
.acties .tel{font-weight:500}
.knop--bel{display:inline-flex;align-items:center;gap:8px}.knop--bel svg{width:16px;height:16px;flex:none}

/* ---------- 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}
/* hero met foto (Lars, 23-09-2026): schuine snede, lichtblauw vlak erachter dat iets gekanteld is, bijschrift als zwevend kaartje met groene led */
.hero--foto{overflow:hidden}
.hero__foto{position:relative}
.hero__foto::before{content:"";position:absolute;left:-14px;right:-14px;top:12%;bottom:34px;background:var(--accent);opacity:.28;border-radius:var(--straal);transform:rotate(-2.5deg)}
.hero__foto figure{position:relative;z-index:1;margin:0 0 52px}
.hero__foto figure img{aspect-ratio:4/3;object-fit:cover;width:100%;display:block;border-radius:var(--straal)}
.hero__foto figcaption{position:absolute;left:20px;bottom:-28px;max-width:calc(100% - 40px);background:var(--paneel);border:var(--lijndikte) solid var(--lijn);border-radius:var(--straal);padding:12px 16px 12px 40px;font-family:var(--font-kop);font-weight:600;font-size:.88em;line-height:1.35;color:var(--kop);box-shadow:0 10px 28px rgba(20,35,46,.12)}
.hero__foto figcaption::before{content:"";position:absolute;left:16px;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:var(--signaal-licht);box-shadow:0 0 0 4px rgba(61,190,122,.22)}
@media (min-width:900px){
  .hero__foto{margin-right:min(0px,calc((var(--max) - 100vw) / 2))}
  .hero__foto::before{left:5%;right:-48px;top:9%;bottom:18px}
  .hero__foto figure{margin:0}
  .hero__foto figure img{clip-path:polygon(8% 0,100% 0,100% 100%,0 100%);border-radius:0}
  .hero__foto figcaption{left:13%;bottom:26px}
}

/* ---------- 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:scaleX(1)}to{transform:scaleX(.78)}}
.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-auto-y{animation:rijden-y 9s linear infinite 2s}
@keyframes rijden-y{0%{transform:translate(58px,-34px);opacity:0}8%{opacity:1}92%{opacity:1}100%{transform:translate(-58px,34px);opacity:0}}
.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:flex;gap:12px;margin-top:20px}
.rij-knoppen button{width:48px;height:48px;border-radius:50%;border:0;background:#E6E6E9;cursor:pointer;color:var(--kop);display:inline-flex;align-items:center;justify-content:center;transition:background .2s}
.rij-knoppen button:hover{background:#D9D9DD}
.rij-knoppen button[disabled]{background:#EFEFF1;color:#B8B8BD;cursor:default}
.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;display:flex;flex-direction:column}
@media (min-width:700px){.kaart{flex-basis:44%}}
@media (min-width:1100px){.kaart{flex-basis:33.333%}}
.kaart__tekst{border-right:var(--lijndikte) solid var(--lijn)}
.kaart:last-child .kaart__tekst{border-right:0}
/* de wegen in de scènes lopen door van kaart naar kaart (Lars, 23-09-2026): beeldvakken raken elkaar, scheidingslijn alleen bij de tekst */
.kaart__beeld{border-bottom:var(--lijndikte) solid var(--lijn);background:var(--paneel);padding:12px 0 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:4/5}   /* portretten v2 zijn staand (Lars, 23-09-2026) */

/* ---------- 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}