:root{
  
  --papier:#FAF7F2;         
  --paneel:#FFFFFF;         
  --lijn:#E4DFD7;           
  --lijn-2:#CFC8BD;         
  --inkt:#14232E;           
  --kop:#0F1C27;
  --inkt-zacht:#5A6570;     
  --primair:#1B68C0;        
  --primair-donker:#02295B; 
  --accent:#49BFFE;         
  --accent-hover:#2FAFF7;
  --signaal:#177A42;        
  --signaal-licht:#3DBE7A;
  --donker:#222427;         
  --donker-lijn:#2A2A2A;
  --op-donker:#FFFFFF;
  --op-donker-zacht:#AEB9C4;
  --link-donker:#49BFFE;
  --fout:#B3261E;
  --wit:#FFFFFF;
  
  --vlak:var(--papier); --vlak-2:var(--paneel); --primair-2:var(--primair); --signaal-donker:#125E33;

  
  --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;

  
  --max:1440px; --goot:16px; --sectie:72px; --straal:6px; --straal-knop:4px; --lijndikte:1px;
  --focus:2px solid var(--primair);
  --schaduw:0 12px 28px rgba(2,41,91,.14);   
}



@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}


.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)}


.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}
}
.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--wit .kolommen>div,.sectie--wit .stappen li,.sectie--wit .paneel,.sectie--wit .faq,.sectie--wit table{background:#F6F8FA}   


.herkenpaneel{position:relative;overflow:hidden;background:var(--primair-donker);border-radius:12px;padding:32px 24px 28px;color:#fff;margin-top:16px}
@media (min-width:900px){.herkenpaneel{padding:48px 56px 40px}}
.herkenpaneel__patroon{position:absolute;right:-16px;top:-12px;width:44%;max-width:420px;height:auto;opacity:.34;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,#000 22%,transparent 70%),linear-gradient(270deg,#000 40%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(180deg,#000 22%,transparent 70%),linear-gradient(270deg,#000 40%,transparent 100%);mask-composite:intersect}
.herkenpaneel__status{position:relative;display:inline-flex;align-items:center;gap:10px;margin:0 0 8px;font-family:var(--font-kop);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#8AD6FF;border:1px solid rgba(73,191,254,.35);border-radius:999px;padding:7px 14px}
.herkenpaneel__status i{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px 2px rgba(73,191,254,.55)}
.herken{position:relative;max-width:none;list-style:none;margin:14px 0 0;padding:0;display:grid;column-gap:56px}
@media (min-width:900px){.herken{grid-template-columns:1fr 1fr}}
.herken li{display:flex;gap:16px;align-items:flex-start;padding:19px 0;border-top:1px solid rgba(255,255,255,.14);margin:0}
.herken li:first-child{border-top:0}
@media (min-width:900px){.herken li:nth-child(2){border-top:0}}
.herken__vink{flex:none;margin-top:2px;width:42px;height:42px;border-radius:12px;border:1px solid rgba(73,191,254,.4);background:rgba(73,191,254,.12);color:#8AD6FF;display:inline-flex;align-items:center;justify-content:center;transition:box-shadow .25s,background .25s}
.herken li:hover .herken__vink{background:rgba(73,191,254,.22);box-shadow:0 0 14px rgba(73,191,254,.45)}
.herken h3{margin:0 0 5px;font-size:16.5px;line-height:1.3;color:#fff}
.herken p{margin:0;font-size:15.5px;line-height:1.5;color:rgba(255,255,255,.82)}
.herkenpaneel .acties--kaart{position:relative;max-width:none;margin-top:28px;padding-top:26px;border-top:1px solid rgba(255,255,255,.14)}
.herkenpaneel .meer{border-color:rgba(255,255,255,.3);color:#fff}
.herkenpaneel .meer:hover{background:rgba(255,255,255,.08);border-color:var(--accent);color:#8AD6FF}
.herkenpaneel .meer:first-child{background:var(--accent);border-color:var(--accent);color:var(--kop)}
.herkenpaneel .meer:first-child:hover{background:var(--accent-hover);color:var(--kop)}
.kennislinks{list-style:none;margin:6px 0 18px;padding:0;display:grid;gap:10px}
@media (min-width:800px){.kennislinks{grid-template-columns:repeat(3,1fr)}}
.kennislinks a{display:block;height:100%;padding:16px 18px;background:var(--paneel);border:var(--lijndikte) solid var(--lijn);border-left:3px solid var(--primair);border-radius:var(--straal);color:var(--kop);font-weight:600;text-decoration:none}
.kennislinks a:hover{border-color:var(--primair);color:var(--primair)}
.sectie--zacht{background:#EEF3F8;border-top:var(--lijndikte) solid #DCE5EE;border-bottom:var(--lijndikte) solid #DCE5EE}   

.sectie--groen{background:#F1F8F3;border-top:var(--lijndikte) solid #D6E9DC;border-bottom:var(--lijndikte) solid #D6E9DC}
.sectie--groen .label{color:var(--signaal)}
.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{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}


.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)}

.nav .heeft-sub{position:relative}
.nav .heeft-sub>a{display:inline-flex;align-items:center;gap:5px}   
.nav .heeft-sub>a svg{flex:none}
.nav .sub{display:none;position:absolute;top:100%;left:-16px;min-width:230px;flex-direction:column;gap:0;background:var(--paneel);border:var(--lijndikte) solid var(--lijn);border-radius:var(--straal);padding:8px 0;box-shadow:var(--schaduw);z-index:60}
.nav .sub a{display:block;padding:9px 16px;border:0;color:var(--kop)}
.nav .sub a:hover{background:var(--papier);color:var(--primair)}
.nav .heeft-sub:hover>.sub,.nav .heeft-sub:focus-within>.sub{display:flex}
.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)}
  .nav.open .sub{display:flex;position:static;border:0;box-shadow:none;padding:0 0 0 16px;background:transparent;min-width:0}
  .nav.open .heeft-sub>a svg{display:none}
}
@media (min-width:1200px){.nav{display:block}.menu-knop{display:none}}

.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)}}


.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--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{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--foto{overflow:hidden}
.hero__foto{position:relative}
.hero__foto figure{overflow:hidden}
.hero__foto figure img{animation:kenburns 24s ease-in-out infinite alternate;transform-origin:60% 50%}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.04)}}

.keurmerk{position:absolute;z-index:4;right:calc(18px + max(0px, (var(--max) - 100vw) / 2));top:16px;display:flex}
.hero__foto figure .keurmerk img{width:96px;height:auto;aspect-ratio:auto;object-fit:contain;border-radius:0;display:block;filter:drop-shadow(0 2px 10px rgba(2,24,48,.5));clip-path:none!important;animation:none!important}

@media (max-width:899px){.keurmerk{right:12px;top:12px}.hero__foto figure .keurmerk img{width:60px}}
@media (prefers-reduced-motion:reduce){.hero__foto figure img,.hero__foto::before{animation:none}}
.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)}
@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}
}


.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}   
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none}.led{animation:none}}

.pauze *,.pauze ::before,.pauze ::after{animation-play-state:paused!important}


.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:var(--lijndikte) solid var(--lijn-2);background:var(--paneel);cursor:pointer;color:var(--kop);display:inline-flex;align-items:center;justify-content:center;transition:background .2s,border-color .2s,color .2s,transform .15s}
.rij-knoppen button:hover{border-color:var(--primair);color:var(--primair)}
.rij-knoppen button:active{transform:scale(.94)}
.rij-knoppen button[disabled]{background:var(--papier);color:var(--lijn-2);border-color:var(--lijn);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}
@media (hover:hover) and (pointer:fine){.rij{cursor:grab}.rij a,.rij button{cursor:pointer}}
.rij.sleept{cursor:grabbing;scroll-snap-type:none;user-select:none}
.rij img{-webkit-user-drag:none;user-select:none}
.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;content-visibility:auto;contain-intrinsic-size:420px 560px}
@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}

.kaart__beeld{border-bottom:var(--lijndikte) solid var(--lijn);background:var(--paneel)}
.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}


.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)}


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}
.portret img{aspect-ratio:1}


.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>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{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{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}



.producten{display:grid;gap:18px;grid-template-columns:minmax(0,1fr)}
@media (min-width:1000px){.producten{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:stretch}}
.product{background:var(--paneel);border:var(--lijndikte) solid var(--lijn);border-radius:var(--straal);padding:24px 26px;border-top:3px solid var(--kl,var(--primair))}
.product h3{margin:4px 0 8px}
.product p{margin:0 0 12px}
.product .product__knop{margin:14px 0 0}
.product__label{display:inline-block;font-family:var(--font-kop);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--kl,var(--primair));background:var(--bg,#E4F1FC);padding:4px 8px;border-radius:4px}
.product--uitgelicht{--kl:var(--primair);--bg:#E4F1FC;padding:28px 30px}
.product--uitgelicht h3{font-size:var(--h2)}
@media (min-width:900px){.product--uitgelicht h3{font-size:34px}}
.product--uitgelicht .yt{margin-top:18px}
.producten__rest{display:grid;gap:18px;grid-template-columns:minmax(0,1fr)}

.xlijn{margin-top:26px;padding-top:22px;border-top:var(--lijndikte) solid var(--lijn)}
.xlijn__kop{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.xlijn__kop h4{margin:0;font-family:var(--font-kop);font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--inkt-zacht)}
.xlijn__knoppen{margin:0;gap:8px}
.xlijn__knoppen button{width:36px;height:36px;font-size:22px;line-height:1}
.xlijn__rij{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px}
.xlijn__rij::-webkit-scrollbar{display:none}
@media (hover:hover) and (pointer:fine){.xlijn__rij{cursor:grab}}
.xlijn__rij.sleept{cursor:grabbing;scroll-snap-type:none;user-select:none}
.producten__rest .product{display:flex;gap:16px;align-items:flex-start}
.producten__rest .product>div{min-width:0}
.product--tedee{--kl:#6C4FD1;--bg:#ECE7FB}
.product--magtec{--kl:var(--signaal);--bg:#E1F4E8}
.product--gu{--kl:#D9822B;--bg:#FCEEDD}
.product figure.product__beeld{flex:0 0 96px;margin:0}
.product figure.product__beeld img{aspect-ratio:1;object-fit:cover;border-radius:6px;width:96px}
.sectie--wit .product{background:#F6F8FA}
@media (max-width:599px){.producten__rest .product{flex-direction:column}.product,.product--uitgelicht{padding:20px}}

.xesar-video{margin-top:48px;align-items:center}
.xesar-video h3{font-size:var(--h3-d);margin:0 0 12px}
.yt{margin:0}
.yt__start,.yt__speler{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:var(--straal)}
.yt__start{position:relative;overflow:hidden;cursor:pointer;text-align:left;padding:28px 30px;color:#fff;
  background:radial-gradient(120% 90% at 85% 20%,rgba(73,191,254,.35),transparent 55%),linear-gradient(135deg,#02295B 0%,#0B3A78 55%,#1B68C0 100%);
  box-shadow:var(--schaduw)}
.yt__start::after{content:none}
.yt__watermerk{position:absolute;right:-6%;top:50%;height:130%;width:auto;max-width:none;transform:translateY(-50%);filter:brightness(0) invert(1);opacity:.07;pointer-events:none;aspect-ratio:auto!important;border-radius:0!important}
.yt__logo,.yt__merk,.yt__titel,.yt__sub,.yt__eind>p{position:relative}
.yt__eind{overflow:hidden}
.yt__merk{display:inline-block;font-family:var(--font-kop);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.yt__titel{display:block;font-family:var(--font-kop);font-size:clamp(22px,3vw,34px);font-weight:700;line-height:1.15;max-width:14ch}
.yt__sub{display:block;margin-top:8px;font-size:15px;color:rgba(255,255,255,.78);max-width:30ch}

.yt__knop{position:absolute;right:13%;top:50%;margin-top:-52px;width:104px;height:104px;border-radius:50%;background:#fff;color:#02295B;
  display:flex;align-items:center;justify-content:center;padding-left:6px;box-shadow:0 12px 30px rgba(0,0,0,.35);transition:transform .2s}
.yt__knop::before,.yt__knop::after{content:"";position:absolute;inset:-14px;border-radius:50%;border:2px solid rgba(255,255,255,.55);animation:ytpuls 2.4s ease-out infinite}
.yt__knop::after{animation-delay:1.2s}
@keyframes ytpuls{from{transform:scale(.8);opacity:1}to{transform:scale(1.45);opacity:0}}
.yt__start:hover .yt__knop,.yt__start:focus-visible .yt__knop{transform:scale(1.08)}
.yt__knoptekst{position:absolute;right:13%;top:50%;margin-top:66px;transform:translateX(calc(50% - 52px));font-family:var(--font-kop);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#fff;white-space:nowrap}
.yt__logo{display:flex;width:max-content;margin-bottom:22px}
.yt__logo img{height:40px;filter:brightness(0) invert(1);width:auto;max-width:none;aspect-ratio:auto;object-fit:contain;border-radius:0;display:block}
.yt__merk{display:block}
@media (max-width:699px){.yt__logo img{height:28px}}
.yt{position:relative}
.yt__eind{position:relative;aspect-ratio:16/9;border-radius:var(--straal);padding:28px 30px;color:#fff;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  background:radial-gradient(120% 90% at 85% 20%,rgba(73,191,254,.35),transparent 55%),linear-gradient(135deg,#02295B 0%,#0B3A78 55%,#1B68C0 100%)}
.yt [hidden],.video [hidden]{display:none!important}
.yt__eindtitel{font-family:var(--font-kop);font-size:clamp(22px,3vw,32px);font-weight:700;margin:0 0 6px}
.yt__eindtekst{margin:0 0 18px;color:rgba(255,255,255,.8);max-width:40ch}
.yt__eindknoppen{display:flex;flex-wrap:wrap;gap:10px;margin:0}
.yt__eind .knop--tweede{color:#fff;border-color:rgba(255,255,255,.6);background:transparent}
@media (prefers-reduced-motion:reduce){.yt__knop::before,.yt__knop::after{animation:none;opacity:.5}}
.yt figcaption{margin-top:8px}
@media (max-width:699px){.yt__start,.yt__eind{padding:18px}.yt__titel{max-width:11ch}.yt__sub{display:none}.yt__logo img{height:20px}.yt__logo{margin-bottom:10px}
  .yt__knop{width:68px;height:68px;right:9%;margin-top:-34px}.yt__knoptekst{display:none}.yt__eindtekst{display:none}}
.xesar-video>div{min-width:0}
.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)}


.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}


.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}


.klanten{padding:34px 0 38px;border-bottom:var(--lijndikte) solid var(--lijn);background:var(--paneel);overflow:hidden}
.klanten__kop{margin:0 auto 18px;max-width:none;text-align:center;font-family:var(--font-kop);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--inkt-zacht)}
.klanten__band{display:flex;width:max-content;animation:klanten 40s linear infinite;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.klanten:hover .klanten__band{animation-play-state:paused}
.klanten__rij{display:flex;align-items:center;gap:64px;margin:0;padding:0 32px;list-style:none}
.klanten__rij li{margin:0}
.klanten__rij img{height:58px;width:auto;max-width:240px;object-fit:contain;aspect-ratio:auto;border-radius:0;filter:grayscale(1);opacity:.7}
@media (hover:hover){.klanten__rij img{transition:filter .3s,opacity .3s}.klanten__rij img:hover{filter:none;opacity:1}}
@keyframes klanten{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.klanten__band{animation:none;flex-wrap:wrap}}


.tweeluik{display:grid;gap:22px}
@media (min-width:900px){.tweeluik{grid-template-columns:1fr 1fr}}
.tweeluik__kaart{position:relative;overflow:hidden;min-height:540px;border-radius:12px;background:#02295B;color:#fff;display:flex;align-items:flex-end}
.tweeluik__kaart--duurzaam{background:#0D3526}
.tweeluik__patroon{position:absolute;pointer-events:none;opacity:.32}
.tweeluik__patroon--links{-webkit-mask-image:linear-gradient(180deg,#000 20%,transparent 64%),linear-gradient(90deg,#000 42%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(180deg,#000 20%,transparent 64%),linear-gradient(90deg,#000 42%,transparent 100%);mask-composite:intersect}
.tweeluik__patroon--rechts{-webkit-mask-image:linear-gradient(180deg,#000 22%,transparent 68%),linear-gradient(270deg,#000 42%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(180deg,#000 22%,transparent 68%),linear-gradient(270deg,#000 42%,transparent 100%);mask-composite:intersect}
@media (max-width:899px){.tweeluik__patroon{opacity:.2}}
.tweeluik__patroon--links{left:0;top:0;width:62%;height:auto}
.tweeluik__patroon--rechts{right:0;top:0;width:62%;height:auto}
.tweeluik__tekst{position:relative;padding:0 44px 44px;max-width:34em}

.tweeluik__tekst h2{color:#fff;margin:0 0 14px;font-size:clamp(30px,3.4vw,44px)}
.tweeluik__tekst p{color:rgba(255,255,255,.86);margin:0 0 22px;line-height:1.55}
.tweeluik__knop{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:var(--kop);text-decoration:none;font-family:var(--font-kop);font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:9px 14px;border-radius:var(--straal-knop)}
.tweeluik__kaart--duurzaam .tweeluik__knop{background:#7ADCA5;color:#0D3526}
.tweeluik__knop:hover{filter:brightness(1.08)}
@media (max-width:899px){.tweeluik__kaart{min-height:500px}.tweeluik__patroon--links{width:70%}.tweeluik__tekst{padding:0 24px 28px}.tweeluik__patroon--rechts{width:58%;top:0;opacity:.4}}

video.yt__speler{background:#000;object-fit:cover}


.video{max-width:620px}


@media (max-width:999px){
.producten__rest{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;padding-bottom:6px;scrollbar-width:none}
.producten__rest::-webkit-scrollbar{display:none}
.producten__rest .product{flex:0 0 82%;scroll-snap-align:start}
}


.hero__foto figure.schema img{animation:none;aspect-ratio:auto;object-fit:contain;background:#fff}
@media (min-width:900px){.hero__foto figure.schema{margin-left:6%;margin-right:-6%}}
@media (min-width:900px){.hero__foto:has(figure.schema){margin-right:0}}


html{scroll-behavior:smooth;scroll-padding-top:16px}
::selection{background:#CBE6FB}
.knop,.meer,.tweeluik__knop,.bel,.menu-knop,.nav a,.voet a,.kennislinks a,input,select,textarea,.faq summary,a{transition:background-color .2s,border-color .2s,color .2s,box-shadow .2s}
.knop:hover{box-shadow:0 6px 16px rgba(2,41,91,.18)}
.knop:active,.meer:active,.tweeluik__knop:active{transform:translateY(1px)}
.knop--tweede:hover{border-color:var(--primair);color:var(--primair)}
.meer::after{display:inline-block;transition:transform .2s}
.meer:hover::after{transform:translateX(3px)}
input:focus,select:focus,textarea:focus{border-color:var(--primair)}
tbody tr:hover>td,tbody tr:hover>th{background:rgba(27,104,192,.04)}
.faq summary:hover{color:var(--primair)}
.faq summary::after{transition:transform .2s}
.faq details[open] .antwoord{animation:ain .3s ease}
@keyframes ain{from{opacity:0;transform:translateY(-4px)}}

.js .reveal:not(.in) :is(.stappen li,.kolommen>div){opacity:0;transform:translateY(14px)}
.js .reveal.in :is(.stappen li,.kolommen>div){transition:opacity .6s ease,transform .6s ease}
.js .reveal.in :is(.stappen li,.kolommen>div):nth-child(2){transition-delay:.08s}
.js .reveal.in :is(.stappen li,.kolommen>div):nth-child(3){transition-delay:.16s}
.js .reveal.in :is(.stappen li,.kolommen>div):nth-child(4){transition-delay:.24s}
@media (prefers-reduced-motion:reduce){.js .reveal:not(.in) :is(.stappen li,.kolommen>div){opacity:1;transform:none}}

.galerij figure{overflow:hidden;border-radius:var(--straal)}
.galerij figure img{transition:transform .5s ease}
.galerij>div:hover img{transform:scale(1.03)}

.sectie--wit+.sectie--zacht,.sectie--zacht+.sectie--wit{border-top:0}

.herkenpaneel :focus-visible,.tweeluik__kaart :focus-visible,.yt :focus-visible{outline-color:var(--accent)}


.projectkaart figure{margin:-28px -28px 18px}
.projectkaart figure img{border-radius:var(--straal) var(--straal) 0 0}
.projectkaart__meer{margin:16px 0 0}


.xsys .xdia{flex:0 0 100%;scroll-snap-align:start;display:grid;gap:16px;align-items:center}
@media (min-width:700px){.xsys .xdia{grid-template-columns:4fr 3fr;gap:26px}}
.xdia__beeld{width:100%;height:auto;border:var(--lijndikte) solid var(--lijn);border-radius:10px;background:#fff}
.xdia__tekst h5{margin:0 0 8px;font-family:var(--font-kop);font-size:19px;color:var(--kop)}
.xdia__tekst p{margin:0;font-size:15px;line-height:1.55;color:var(--inkt-zacht)}