/* VVSW huisstijl, zie Eigen/VVSW/huisstijl.md in de vault */
@font-face{font-family:'Jost';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/jost-latin-400.woff2') format('woff2')}
@font-face{font-family:'Jost';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/jost-latin-500.woff2') format('woff2')}
@font-face{font-family:'Jost';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/jost-latin-600.woff2') format('woff2')}
@font-face{font-family:'Jost';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/jost-latin-700.woff2') format('woff2')}
:root{
  --petrol:#1B5C8A;--petrol-diep:#0E2F4F;--petrol-nacht:#0A2440;--petrol-tint:#DCE9F3;
  --koraal:#3BB39A;--koraal-donker:#17735F;--koraal-zacht:#DDF1EB;
  --salie:#8FC1E3;--salie-zacht:#E3EEF7;
  --zand:#F3F8F7;--zand-donker:#DCE8E6;--papier:#FFFFFF;
  --tekst:#16283A;--tekst-zacht:#465B6B;--op-donker:#F3F8F7;--op-donker-zacht:#B3C7D6;--lijn:#D9E4E6;
  --r-s:14px;--r-l:26px;
  --schaduw:0 1px 2px rgba(14,47,79,.06),0 14px 34px -14px rgba(14,47,79,.22);
  --font:'Jost','Avenir Next','Century Gothic','Futura',system-ui,sans-serif;
  --gutter:clamp(16px,4vw,40px);
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html{overflow-x:clip}
body{margin:0;background:var(--zand);color:var(--tekst);font-family:var(--font);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit}
img,svg{max-width:100%}
img{display:block}
h1,h2,h3{font-family:var(--font);line-height:1.1;margin:0;text-wrap:balance;letter-spacing:-.01em}
h1{font-size:clamp(2.35rem,5.4vw,4.3rem);font-weight:600}
h2{font-size:clamp(1.9rem,3.6vw,2.9rem);font-weight:600}
h3{font-size:1.2rem;font-weight:600;line-height:1.3}
p{margin:0}
.wrap{max-width:1200px;margin:0 auto;padding-inline:var(--gutter)}
section{padding-block:clamp(72px,10vw,128px)}
.oog{font-size:.8rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--koraal-donker);margin-bottom:14px}
.donker .oog{color:var(--koraal-zacht)}
.lead{font-size:1.15rem;color:var(--tekst-zacht);max-width:58ch;margin-top:18px}
.donker .lead{color:var(--op-donker-zacht)}
.donker{background:var(--petrol-diep);color:var(--op-donker)}
:focus-visible{outline:3px solid var(--koraal);outline-offset:3px;border-radius:6px}
.sr-alleen{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:16px;top:-60px;z-index:200;background:var(--koraal);color:var(--petrol-diep);font-weight:600;padding:.7em 1.1em;border-radius:999px;text-decoration:none;transition:top .2s}
.skip:focus{top:12px}
.foto{position:relative;overflow:hidden;border-radius:var(--r-l);background:var(--zand-donker)}
.foto img{width:100%;height:100%;object-fit:cover}

/* knoppen */
.knop{display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:52px;padding:.8em 1.45em;border-radius:999px;font-weight:600;font-size:1rem;text-decoration:none;border:2px solid transparent;transition:transform .25s cubic-bezier(.2,.7,.2,1),background-color .25s,color .25s,border-color .25s;cursor:pointer;font-family:inherit}
.knop svg{width:18px;height:18px;flex:none;transition:transform .25s}
.knop:hover svg{transform:translateX(3px)}
.knop-hoofd{background:var(--koraal);color:var(--petrol-diep);box-shadow:0 10px 26px -12px rgba(59,179,154,.9)}
.knop-hoofd:hover{transform:translateY(-2px);background:#4CC2A9}
.knop-rand{border-color:currentColor;color:var(--petrol)}
.knop-rand:hover{background:var(--petrol);color:var(--zand);border-color:var(--petrol)}
.donker .knop-rand{color:var(--op-donker)}
.donker .knop-rand:hover{background:var(--op-donker);color:var(--petrol-diep);border-color:var(--op-donker)}
.knop-donker{background:var(--petrol-diep);color:var(--zand)}
.knop-donker:hover{transform:translateY(-2px);background:var(--petrol)}
.tekstlink{color:var(--koraal-donker);font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:.4em;border-bottom:2px solid transparent;transition:border-color .2s}
.tekstlink:hover{border-color:currentColor}
.tekstlink svg{width:16px;height:16px}
.donker .tekstlink{color:var(--koraal-zacht)}
.acties{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:30px}

/* voortgang en kop */
.voortgang{position:fixed;left:0;right:0;top:0;height:3px;background:var(--koraal);transform-origin:left;transform:scaleX(0);z-index:120;pointer-events:none}
.kop{position:sticky;top:env(safe-area-inset-top,0px);z-index:100;background:rgba(10,36,64,.9);backdrop-filter:saturate(140%) blur(12px);-webkit-backdrop-filter:saturate(140%) blur(12px);color:var(--op-donker);border-bottom:1px solid rgba(243,248,247,.08);transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.kop.weg{transform:translateY(-110%)}
.kop .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:72px}
.merk{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--op-donker)}
.merk svg{width:42px;height:42px;flex:none;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.merk:hover svg{transform:rotate(-8deg) scale(1.06)}
.merk b{display:block;font-size:1.35rem;letter-spacing:.06em;font-weight:700;line-height:1}
.merk small{display:block;font-size:.72rem;color:var(--op-donker-zacht);letter-spacing:.02em;margin-top:3px;white-space:nowrap}
.menu{display:flex;align-items:center;gap:clamp(12px,1.8vw,26px)}
.menu a{text-decoration:none;font-weight:500;font-size:.98rem;color:var(--op-donker-zacht);transition:color .2s}
.menu a:hover{color:var(--op-donker)}
.menu .knop{min-height:44px;padding:.55em 1.1em;font-size:.95rem;color:var(--petrol-diep)}
.menuknop{display:none;background:none;border:0;color:var(--op-donker);width:48px;height:48px;border-radius:12px;cursor:pointer}
.menuknop svg{width:26px;height:26px}
@media (max-width:1020px){
  .menuknop{display:grid;place-items:center}
  .menu{position:absolute;left:0;right:0;top:100%;background:var(--petrol-nacht);flex-direction:column;align-items:stretch;gap:0;padding:8px var(--gutter) 20px;border-bottom:1px solid rgba(243,248,247,.1)}
  .menu:not(.open){display:none}
  .menu a{padding:14px 0;border-bottom:1px solid rgba(243,248,247,.08);font-size:1.05rem}
  .menu .knop{margin-top:14px;border-bottom:0}
}

/* 1. held */
.held{position:relative;overflow:hidden;padding-block:clamp(48px,7vw,96px) clamp(64px,8vw,104px);background:linear-gradient(165deg,#F3F8F7 0%,#EAF3F8 55%,#E3EEF7 100%);color:var(--tekst)}
.held h1{color:var(--petrol-diep)}
.held .lead{color:var(--tekst-zacht)}
.vlek{position:absolute;border-radius:50%;filter:blur(10px);pointer-events:none;animation:drijf 18s ease-in-out infinite alternate}
.vlek.v1{width:62vw;height:62vw;max-width:820px;max-height:820px;right:-14%;top:-30%;background:radial-gradient(circle,rgba(59,179,154,.28),rgba(59,179,154,0) 62%)}
.vlek.v2{width:54vw;height:54vw;max-width:700px;max-height:700px;left:-16%;bottom:-44%;background:radial-gradient(circle,rgba(143,193,227,.45),rgba(143,193,227,0) 60%);animation-duration:23s;animation-delay:-6s}
@keyframes drijf{from{transform:translate(0,0) scale(1)}to{transform:translate(-5%,6%) scale(1.12)}}
.held .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,5vw,72px);align-items:center}
.held h1 .regel{display:block}
.wissel{display:block;position:relative;height:1.14em;overflow:hidden;color:var(--koraal-donker);padding-bottom:.08em}
.wissel span{position:absolute;left:0;top:0;white-space:nowrap;transform:translateY(112%);transition:transform .9s cubic-bezier(.7,0,.2,1)}
.wissel span.aan{transform:translateY(0)}
.wissel span.weg{transform:translateY(-112%)}
.streep{display:block;width:min(260px,60%);height:14px;margin-top:2px;overflow:visible}
.streep path{fill:none;stroke:var(--koraal);stroke-width:5;stroke-linecap:round}
.held .lead{font-size:1.2rem}
.beloftes{display:flex;flex-wrap:wrap;gap:10px 22px;margin:30px 0 0;padding:0;list-style:none;color:var(--tekst-zacht);font-size:.95rem}
.beloftes li{display:flex;align-items:center;gap:8px}
.beloftes svg{width:18px;height:18px;color:var(--koraal-donker);flex:none}
.held-beeld{position:relative;width:100%;max-width:480px;justify-self:center;padding:6% 8% 4%}
.boog{position:relative;z-index:1;aspect-ratio:4/5;border-radius:30px;overflow:hidden;box-shadow:0 40px 80px -34px rgba(14,47,79,.55);background:var(--zand-donker);border:8px solid #fff}
.boog img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.4s ease}
.boog img.aan{opacity:1;animation:kenburns 8s ease-out both}
@keyframes kenburns{from{transform:scale(1.16)}to{transform:scale(1.02)}}
@keyframes draai{to{transform:rotate(360deg)}}
.label{position:absolute;z-index:3;display:flex;align-items:center;gap:8px;background:var(--papier);color:var(--petrol-diep);font-weight:600;font-size:.9rem;padding:.55em 1em .55em .7em;border-radius:999px;box-shadow:0 14px 30px -12px rgba(14,47,79,.4);white-space:nowrap;transition:box-shadow .6s,transform .6s}
.label i{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--koraal-zacht);color:var(--koraal-donker)}
.label i svg{width:15px;height:15px}
.label.aan{box-shadow:0 0 0 3px var(--koraal),0 14px 30px -12px rgba(14,47,79,.4)}
.label.l1{left:-2%;top:18%;animation:zweef 7s ease-in-out infinite}
.label.l2{right:-4%;top:46%;animation:zweef 8s ease-in-out -3s infinite}
.label.l3{right:8%;bottom:4%;animation:zweef 9s ease-in-out -5s infinite;background:var(--salie-zacht)}
.label.l3 i{background:var(--salie);color:var(--petrol-diep)}
@keyframes zweef{0%,100%{translate:0 0}50%{translate:0 -12px}}
.schild{position:absolute;left:0;bottom:14%;z-index:3;width:21%;aspect-ratio:1;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 18px 34px -12px rgba(14,47,79,.45);animation:zweef 10s ease-in-out -2s infinite}
.schild svg{width:64%;height:64%}
.scrolltip{position:absolute;left:50%;bottom:18px;z-index:2;translate:-50% 0;display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--tekst-zacht);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase}
.scrolltip i{width:22px;height:34px;border:2px solid rgba(14,47,79,.3);border-radius:12px;position:relative}
.scrolltip i::after{content:"";position:absolute;left:50%;top:6px;width:4px;height:7px;margin-left:-2px;border-radius:2px;background:var(--koraal);animation:wiel 1.8s ease-in-out infinite}
@keyframes wiel{0%{transform:translateY(0);opacity:1}70%{transform:translateY(10px);opacity:0}100%{opacity:0}}
@media (max-width:900px){
  .held .wrap{grid-template-columns:1fr}
  .held-beeld{max-width:400px}
  .scrolltip{display:none}
}
@media (max-width:480px){
  .label{font-size:.8rem}
  .label.l1{left:0}.label.l2{right:0}
}

.deel{position:absolute;pointer-events:none;z-index:0}
.deel-a{width:46%;aspect-ratio:1;border-radius:50%;background:var(--koraal);right:-2%;top:2%;opacity:.9;animation:drijf 14s ease-in-out infinite alternate}
.deel-b{width:34%;aspect-ratio:1;border-radius:26px;background:var(--salie);left:0;bottom:4%;rotate:12deg;animation:drijf 17s ease-in-out -4s infinite alternate}
.deel-c{width:14%;aspect-ratio:1;border-radius:50%;border:5px solid var(--petrol);left:8%;top:6%;animation:zweef 9s ease-in-out -1s infinite}

/* 2. cijfers */
.cijfers{background:linear-gradient(170deg,var(--petrol-diep) 0%,#123E66 100%);position:relative;overflow:hidden}
.cijfers::before{content:"";position:absolute;right:-12%;top:-20%;width:50vw;height:50vw;max-width:680px;max-height:680px;border-radius:50%;background:radial-gradient(circle,rgba(59,179,154,.22),rgba(59,179,154,0) 62%);pointer-events:none}
.cijfers .wrap{position:relative}
.cijfers-kop{max-width:720px}
.panelen{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:clamp(36px,5vw,56px)}
.paneel{--kl:var(--koraal);background:rgba(243,248,247,.05);border:1px solid rgba(243,248,247,.12);border-radius:var(--r-l);padding:clamp(22px,3vw,34px);display:flex;flex-direction:column}
.p-werk{--kl:var(--salie)}
.paneel .tag{align-self:flex-start;background:var(--kl);color:var(--petrol-diep)}
.groot-getal{margin-top:18px;line-height:1}
.groot-getal b{font-size:clamp(2.8rem,6vw,4.4rem);font-weight:600;color:var(--kl);letter-spacing:-.02em;display:inline-block}
.uitleg{margin-top:10px;color:var(--op-donker);font-size:1.08rem;max-width:40ch}
.poppen{display:grid;grid-template-columns:repeat(20,1fr);gap:6px 5px;margin-top:24px}
.pop svg{display:block;width:100%;height:auto;fill:rgba(243,248,247,.16);transition:fill .5s}
.pop.aan svg{fill:var(--kl)}
.pop.aan{animation:adem 3.2s ease-in-out infinite}
.pop.aan:nth-child(3n){animation-delay:-1s}.pop.aan:nth-child(4n){animation-delay:-2s}.pop.aan:nth-child(5n){animation-delay:-.5s}
@keyframes adem{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.balken{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:12px}
.balken li{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center}
.bl{font-size:.93rem;color:var(--op-donker-zacht)}
.balken b{font-weight:600;font-variant-numeric:tabular-nums;color:var(--op-donker)}
.bs{grid-column:1 / -1;height:10px;border-radius:6px;background:rgba(243,248,247,.1);overflow:hidden}
.bs i{display:block;height:100%;border-radius:6px;background:var(--kl)}
.paneel .bron{margin-top:auto;padding-top:20px}
.tegelcijfers{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:22px}
.tc{border-radius:var(--r-l);padding:24px 26px;background:rgba(243,248,247,.05);border:1px solid rgba(243,248,247,.12);display:flex;flex-direction:column;gap:6px;text-decoration:none}
.tc b{font-size:clamp(2.2rem,4vw,3rem);font-weight:600;line-height:1;color:var(--op-donker);font-variant-numeric:tabular-nums}
.tc span{color:var(--op-donker-zacht)}
.tc small{margin-top:auto;padding-top:8px;font-size:.8rem;color:var(--op-donker-zacht)}
.tc small a{color:inherit}
.tc-knop{background:var(--koraal);border-color:transparent;color:var(--petrol-diep);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.tc-knop:hover{transform:translateY(-6px)}
.tc-knop span{color:var(--petrol-diep);font-weight:500;font-size:1.05rem}
.tc-knop em{margin-top:auto;font-style:normal;font-weight:600;display:inline-flex;align-items:center;gap:8px}
.tc-knop em svg{width:18px;height:18px}
@media (max-width:900px){.panelen,.tegelcijfers{grid-template-columns:1fr}}
@media (max-width:520px){.poppen{grid-template-columns:repeat(10,1fr);gap:4px 7px;max-width:230px}}

/* brede foto bij waarom */
.foto.breed{aspect-ratio:21/9;margin-top:36px}
.foto.breed img{height:120%;margin-top:-10%;will-change:transform}
@media (max-width:620px){.foto.breed{aspect-ratio:4/3}}

/* 3. routes */
.routes-kop{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:40px}
.routes-kop .lead{max-width:44ch}
.routegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.route{display:flex;flex-direction:column;gap:14px;background:var(--papier);border-radius:var(--r-l);padding:0 26px 26px;text-decoration:none;border:1px solid var(--lijn);transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s,border-color .4s;overflow:hidden}
.route:hover{transform:translateY(-8px);box-shadow:var(--schaduw);border-color:transparent}
.route .foto{margin:0 -26px;border-radius:0;aspect-ratio:16/10}
.route .foto img{transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.route:hover .foto img{transform:scale(1.07)}
.route .ico{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;background:var(--salie-zacht);color:var(--petrol);margin-top:-43px;position:relative;z-index:2;box-shadow:0 0 0 6px var(--papier);transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.route:hover .ico{transform:rotate(-8deg) scale(1.06)}
.route .ico svg{width:30px;height:30px}
.route.zakelijk .ico{background:var(--koraal-zacht);color:var(--koraal-donker)}
.route p{color:var(--tekst-zacht)}
.route .tekstlink{margin-top:auto}
.stippen{display:none;justify-content:center;gap:8px;margin-top:16px}
.stippen i{width:8px;height:8px;border-radius:50%;background:var(--zand-donker);transition:width .3s,background-color .3s}
.stippen i.aan{width:22px;border-radius:5px;background:var(--koraal)}
.hulpbalk{margin-top:26px;display:flex;gap:18px;align-items:center;flex-wrap:wrap;background:var(--salie-zacht);border-radius:var(--r-s);padding:18px 22px;color:var(--petrol-diep)}
.hulpbalk svg{width:24px;height:24px;flex:none;color:var(--petrol)}
.hulpbalk p{flex:1;min-width:230px}
.hulpbalk a{color:var(--petrol);font-weight:600}
@media (max-width:900px){
  .routegrid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin-inline:calc(var(--gutter) * -1);padding:4px var(--gutter) 10px;scrollbar-width:none}
  .routegrid::-webkit-scrollbar{display:none}
  .route{flex:0 0 84%;scroll-snap-align:center}
  .stippen{display:flex}
}

/* 4. herkennen */
.herkennen{background:var(--papier)}
.herkennen .wrap{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(32px,6vw,84px);align-items:start}
.herkennen-links{position:sticky;top:100px}
.herkennen-links .foto{margin-top:30px;aspect-ratio:4/3}
.herkennen-links .tekstlink{margin-top:22px}
.vormen{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.vorm{display:flex;gap:18px;align-items:flex-start;padding:22px 22px 22px 20px;border-radius:var(--r-l);background:var(--zand);border:1px solid transparent;transition:background-color .5s,border-color .5s,transform .5s cubic-bezier(.2,.7,.2,1)}
.vorm.aan{background:var(--papier);border-color:var(--koraal);transform:translateX(-8px);box-shadow:var(--schaduw)}
.vorm .i{flex:none;width:48px;height:48px;border-radius:50%;background:var(--papier);display:grid;place-items:center;color:var(--koraal-donker);transition:background-color .5s,color .5s}
.vorm.aan .i{background:var(--koraal);color:var(--petrol-diep)}
.vorm .i svg{width:24px;height:24px}
.vorm b{display:block;font-weight:600;font-size:1.1rem}
.vorm small{display:block;color:var(--tekst-zacht);font-size:.97rem;line-height:1.5;margin-top:4px}
@media (max-width:900px){
  .herkennen .wrap{grid-template-columns:1fr}
  .herkennen-links{position:static}
  .vorm.aan{transform:none}
}

/* 5. sportclubs */
.sport .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,84px);align-items:center}
.sport-beeld{position:relative;width:100%;max-width:540px;justify-self:center;padding:8% 0 12% 8%}
.sport-beeld .hoofd{aspect-ratio:4/5;width:88%}
.sport-beeld .klein{position:absolute;left:0;top:0;width:44%;aspect-ratio:3/2;border-radius:var(--r-s);border:6px solid var(--zand);rotate:-5deg;z-index:2;box-shadow:var(--schaduw)}
.ring{position:absolute;right:0;bottom:0;width:48%;aspect-ratio:1;border-radius:50%;background:var(--papier);padding:4%;box-shadow:var(--schaduw);z-index:3}
.ring svg{width:100%;height:100%;display:block}
.ring .seg{transition:none}
.ring-midden{position:absolute;inset:0;display:grid;place-items:center;text-align:center;pointer-events:none}
.ring-midden b{display:block;font-size:clamp(2.3rem,4.8vw,3.4rem);font-weight:600;color:var(--petrol);line-height:1;font-variant-numeric:tabular-nums}
.ring-midden span{display:block;color:var(--tekst-zacht);font-weight:500;font-size:.88rem}
.eisenlijst{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:12px}
.eis{display:flex;gap:14px;align-items:flex-start;background:var(--papier);border-radius:var(--r-s);padding:16px 18px;border:1px solid var(--lijn);transition:border-color .5s,box-shadow .5s}
.eis .vink{flex:none;width:32px;height:32px;border-radius:50%;background:var(--zand-donker);color:var(--zand);display:grid;place-items:center;transition:background-color .5s,transform .5s cubic-bezier(.3,1.6,.5,1)}
.eis .vink svg{width:16px;height:16px;opacity:0;transition:opacity .4s}
.eis.aan .vink{transform:scale(1.08)}
.eis.aan .vink svg{opacity:1}
.eis.aan{box-shadow:var(--schaduw);border-color:transparent}
.eis:nth-child(1).aan .vink{background:var(--petrol)}
.eis:nth-child(2).aan .vink{background:var(--salie);color:var(--petrol-diep)}
.eis:nth-child(3).aan .vink{background:var(--koraal);color:var(--petrol-diep)}
.eis:nth-child(4).aan .vink{background:var(--petrol-diep)}
.eis b{display:block;font-weight:600}
.eis small{display:block;color:var(--tekst-zacht);font-size:.95rem;line-height:1.45}
.bron{margin-top:14px;font-size:.85rem;color:var(--tekst-zacht)}
.bron a{color:inherit}
.donker .bron{color:var(--op-donker-zacht)}
.prijsje{font-size:.92rem;color:var(--tekst-zacht)}
.prijsje b{color:var(--tekst);font-weight:600}
@media (max-width:900px){.sport .wrap{grid-template-columns:1fr}.sport-beeld{max-width:460px}}

/* 6. werkgevers */
.werk{background:var(--petrol);position:relative;overflow:hidden}
.werk-top{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center}
.collage{position:relative;aspect-ratio:1/.92;width:100%}
.collage .foto{position:absolute;box-shadow:0 30px 60px -28px rgba(0,0,0,.6)}
.collage .c1{left:0;top:10%;width:70%;aspect-ratio:4/3.4}
.collage .c2{right:0;top:0;width:44%;aspect-ratio:4/5;border-radius:var(--r-s)}
.collage .c3{right:4%;bottom:0;width:50%;aspect-ratio:3/2;border-radius:var(--r-s);border:6px solid var(--petrol)}
.werkgrid{display:grid;grid-template-columns:.85fr 1.15fr;gap:24px;margin-top:clamp(40px,6vw,64px)}
.nuverplicht{background:rgba(243,248,247,.06);border:1px solid rgba(243,248,247,.12);border-radius:var(--r-l);padding:30px}
.tag{display:inline-block;font-weight:600;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;padding:.35em .8em;border-radius:999px;background:var(--salie);color:var(--petrol-diep)}
.tag.k{background:var(--koraal)}
.nuverplicht h3,.tijdlijn h3{margin-top:16px;font-size:1.35rem}
.nuverplicht p{margin-top:10px;color:var(--op-donker-zacht)}
.chips{margin:16px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.chips li{font-size:.88rem;border:1px solid rgba(243,248,247,.22);border-radius:999px;padding:.3em .85em}
.tijdlijn{background:var(--petrol-diep);border-radius:var(--r-l);padding:30px 30px 32px;border:1px solid rgba(243,248,247,.08)}
.lijn{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px;padding-top:34px}
.spoor{position:absolute;left:12px;right:12px;top:10px;height:3px;background:rgba(243,248,247,.14);border-radius:3px;overflow:hidden}
.spoor i{position:absolute;inset:0;background:linear-gradient(90deg,var(--salie),var(--koraal));transform-origin:left}
.stap{position:relative}
.stap::before{content:"";position:absolute;top:-31px;left:4px;width:17px;height:17px;border-radius:50%;background:var(--salie);box-shadow:0 0 0 5px var(--petrol-diep)}
.stap.nu::before{background:var(--koraal);animation:puls 2.4s ease-out infinite}
@keyframes puls{0%{box-shadow:0 0 0 5px var(--petrol-diep),0 0 0 5px rgba(59,179,154,.55)}100%{box-shadow:0 0 0 5px var(--petrol-diep),0 0 0 24px rgba(59,179,154,0)}}
.stap b{display:block;font-weight:600;font-size:.95rem;color:var(--koraal-zacht)}
.stap p{margin-top:4px;color:var(--op-donker-zacht);font-size:.95rem;line-height:1.45}
.stap.nu p{color:var(--op-donker)}
@media (max-width:900px){.werk-top,.werkgrid{grid-template-columns:1fr}}
@media (max-width:560px){
  .lijn{grid-template-columns:1fr;padding-top:0;padding-left:34px;gap:22px}
  .spoor{left:10px;right:auto;top:6px;bottom:6px;width:3px;height:auto}
  .spoor i{transform-origin:top}
  .stap::before{top:4px;left:-32px}
}

/* 7. vertrouwenspersoon */
.vp-kop{display:grid;grid-template-columns:1fr .95fr;gap:clamp(32px,5vw,72px);align-items:center}
.vp-beeld{position:relative;padding:0 0 10% 10%}
.vp-beeld .hoofd{aspect-ratio:3/2}
.vp-beeld .rond{position:absolute;left:0;bottom:0;width:38%;aspect-ratio:1;border-radius:50%;border:7px solid var(--zand);box-shadow:var(--schaduw)}
.stroom{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:clamp(44px,6vw,64px)}
.stroom svg.pad{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:1}
.stroom svg.pad path{fill:none;stroke:var(--koraal);stroke-width:3;stroke-linecap:round}
.fase{position:relative;background:var(--papier);border-radius:var(--r-l);padding:26px 24px;border:1px solid var(--lijn)}
.fase .nr{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:var(--petrol);color:var(--zand);font-weight:600;font-size:1.3rem;position:relative;z-index:2;box-shadow:0 0 0 8px var(--papier)}
.fase h3{margin-top:18px}
.fase p{margin-top:8px;color:var(--tekst-zacht)}
@media (max-width:900px){.vp-kop,.stroom{grid-template-columns:1fr}.stroom svg.pad{display:none}}

/* 8. trainingen */
.trainingen{padding-top:0}
.trainingen .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,5vw,72px);align-items:start}
.t-links{position:sticky;top:100px}
.t-venster{margin-top:28px;aspect-ratio:4/3;position:relative}
.t-venster img{position:absolute;inset:0;opacity:0;transform:scale(1.08);transition:opacity .7s ease,transform 1.2s cubic-bezier(.2,.7,.2,1)}
.t-venster img.aan{opacity:1;transform:scale(1)}
.t-venster figcaption{position:absolute;left:14px;bottom:14px;z-index:2;background:var(--papier);border-radius:999px;padding:.4em .95em;font-weight:600;font-size:.88rem;color:var(--petrol-diep);box-shadow:var(--schaduw)}
.tlijst{list-style:none;margin:0;padding:0;border-top:1px solid var(--lijn)}
.tlijst li{border-bottom:1px solid var(--lijn)}
.tlijst a{display:flex;align-items:center;gap:18px;padding:22px 6px;text-decoration:none;transition:padding .35s cubic-bezier(.2,.7,.2,1),background-color .35s}
.tlijst li.aan a,.tlijst a:hover{padding-left:18px;background:var(--papier)}
.tlijst .duim{display:none;flex:none;width:72px;height:54px;border-radius:12px;overflow:hidden}
.tlijst .duim img{width:100%;height:100%;object-fit:cover}
.tlijst b{flex:1;font-weight:500;font-size:1.08rem}
.tlijst .pijl{width:20px;height:20px;color:var(--koraal-donker);opacity:0;transform:translateX(-8px);transition:opacity .3s,transform .3s}
.tlijst li.aan .pijl,.tlijst a:hover .pijl{opacity:1;transform:none}
.chip{flex:none;font-size:.78rem;font-weight:600;letter-spacing:.04em;padding:.3em .8em;border-radius:999px;background:var(--petrol-tint);color:var(--petrol)}
.chip.s{background:var(--salie-zacht);color:var(--petrol-diep)}
.chip.k{background:var(--koraal-zacht);color:var(--koraal-donker)}
@media (max-width:900px){
  .trainingen .wrap{grid-template-columns:1fr}
  .t-links{position:static}
  .t-venster{display:none}
  .tlijst .duim{display:block}
  .tlijst a{gap:14px;padding:16px 4px}
  .tlijst .pijl{display:none}
}

/* 9. winkel */
.winkel{background:var(--papier);padding-bottom:0}
.winkel-kop{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:end}
.teller-blok{display:flex;align-items:center;gap:22px}
.teller{display:flex;align-items:baseline;gap:12px;color:var(--petrol)}
.teller b{font-size:clamp(4rem,9vw,6.4rem);font-weight:600;line-height:.9;font-variant-numeric:tabular-nums}
.teller span{font-weight:500;color:var(--tekst-zacht);max-width:9ch;line-height:1.25}
.winkel-kop .foto{width:170px;aspect-ratio:4/5;rotate:4deg;border:6px solid var(--zand);box-shadow:var(--schaduw);border-radius:var(--r-s)}
.cat-veld{overflow:hidden;padding-block:40px 64px}
.cat-baan{display:flex;gap:20px;padding-inline:max(var(--gutter),calc((100vw - 1200px) / 2 + var(--gutter)));width:max-content}
.cat{position:relative;flex:none;width:clamp(260px,26vw,340px);aspect-ratio:3/4;border-radius:var(--r-l);overflow:hidden;text-decoration:none;color:var(--op-donker);isolation:isolate}
.cat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.cat::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,36,64,0) 30%,rgba(10,36,64,.9) 88%)}
.cat:hover img{transform:scale(1.07)}
.cat .aantal{position:absolute;top:18px;left:18px;width:54px;height:54px;border-radius:16px;background:var(--papier);color:var(--petrol);display:grid;place-items:center;font-weight:600;font-size:1.4rem}
.cat.gratis .aantal{background:var(--koraal);color:var(--petrol-diep)}
.cat.gratis .gratis-tag{position:absolute;top:28px;right:18px;background:var(--koraal);color:var(--petrol-diep);font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:.3em .7em;border-radius:999px}
.cat .onder{position:absolute;left:22px;right:22px;bottom:22px}
.cat b{display:block;font-size:1.3rem;font-weight:600;line-height:1.2}
.cat small{display:block;color:var(--op-donker-zacht);font-size:.94rem;margin-top:4px}
.cat .pijl{position:absolute;right:22px;bottom:24px;width:40px;height:40px;border-radius:50%;background:rgba(243,248,247,.16);display:grid;place-items:center;transition:background-color .3s,transform .3s}
.cat:hover .pijl{background:var(--koraal);transform:rotate(-45deg)}
.cat .pijl svg{width:18px;height:18px}
.bundels-blok{padding-bottom:clamp(72px,10vw,128px)}
.bundels{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.bundel{display:flex;flex-direction:column;border-radius:var(--r-l);padding:26px 24px 24px;background:var(--petrol-diep);color:var(--op-donker);position:relative;overflow:hidden;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.bundel:hover{transform:translateY(-8px)}
.bundel.licht{background:var(--zand);color:var(--tekst);border:1px solid var(--lijn)}
.bundel .voor{font-size:.8rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--koraal-zacht)}
.bundel.licht .voor{color:var(--koraal-donker)}
.bundel h3{margin-top:8px;font-size:1.3rem}
.bundel p{margin-top:8px;font-size:.95rem;color:var(--op-donker-zacht);line-height:1.45}
.bundel.licht p{color:var(--tekst-zacht)}
.bundel .prijs{margin-top:auto;padding-top:22px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.bundel .prijs b{font-size:2.2rem;font-weight:600;font-variant-numeric:tabular-nums}
.bundel .prijs s{color:var(--op-donker-zacht);font-size:.95rem}
.bundel.licht .prijs s{color:var(--tekst-zacht)}
.bundel .prijs small{flex-basis:100%;font-size:.82rem;color:var(--op-donker-zacht)}
.bundel.licht .prijs small{color:var(--tekst-zacht)}
.bundel .knop{margin-top:16px;min-height:46px}
.bundel .deco{position:absolute;right:-30px;top:-30px;width:120px;height:120px;border-radius:50%;border:18px solid rgba(59,179,154,.14);animation:draai 30s linear infinite}
.bundel.licht .deco{border-color:rgba(27,92,138,.07)}
.bundels-kop{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;margin-bottom:24px}
.bundels-kop h3{font-size:1.5rem}
@media (max-width:1020px){.bundels{grid-template-columns:repeat(2,1fr)}}
@media (max-width:900px){
  .cat-veld{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-block:32px 48px}
  .cat-veld::-webkit-scrollbar{display:none}
  .cat{scroll-snap-align:center;width:74vw;max-width:320px}
  .winkel-kop{grid-template-columns:1fr}
  .winkel-kop .foto{width:120px}
}
@media (max-width:620px){.bundels{grid-template-columns:1fr}}

/* 10. fotowand */
.wand{background:var(--petrol-diep);color:var(--op-donker);overflow:hidden}
.wand-kop{text-align:center;max-width:720px;margin:0 auto 44px}
.wand-kop .lead{margin-inline:auto}
.tegels{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(150px,17vw,230px);gap:14px;grid-template-areas:"a b c f" "a d e f"}
.tegel{position:relative;border-radius:var(--r-l);overflow:hidden;background:var(--petrol)}
.tegel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity 1.2s ease,transform 6s ease-out}
.tegel img.nieuw{opacity:0;transform:scale(1.1)}
.tegel.t1{grid-area:a}.tegel.t2{grid-area:b}.tegel.t3{grid-area:c}.tegel.t4{grid-area:d}.tegel.t5{grid-area:e}.tegel.t6{grid-area:f}
@media (max-width:760px){
  .tegels{grid-template-columns:repeat(2,1fr);grid-auto-rows:36vw;gap:10px;grid-template-areas:"a b" "a c" "d e" "f f"}
}

/* 11. quickscan */
.scan{background:var(--koraal-zacht);overflow:hidden}
.scan .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,64px);align-items:center}
.scan .lead{color:var(--petrol-diep)}
.scan .klein{font-size:.9rem;color:var(--petrol-diep)}
.meter{position:relative;max-width:440px;width:100%;justify-self:center;padding-top:70px}
.meter svg{width:100%;height:auto;display:block}
.meter .rond{position:absolute;left:50%;top:0;translate:-50% 0;width:120px;aspect-ratio:1;border-radius:50%;border:6px solid var(--koraal-zacht);box-shadow:var(--schaduw);z-index:2}
.naald{transform-origin:200px 200px;transform-box:view-box;transform:rotate(38deg)}
@media (max-width:900px){.scan .wrap{grid-template-columns:1fr}.meter{max-width:340px}}

/* 12. waarom */
.waarom h2{max-width:20ch}
.principes{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:44px;list-style:none;padding:0}
.principe .icoon{width:64px;height:64px;border-radius:20px;background:var(--papier);display:grid;place-items:center;color:var(--koraal-donker);box-shadow:var(--schaduw)}
.principe svg{width:34px;height:34px}
.principe h3{margin-top:18px}
.principe p{margin-top:8px;color:var(--tekst-zacht);font-size:.98rem}
.plek{background:var(--koraal-zacht);color:var(--koraal-donker);font-weight:600;padding:0 .3em;border-radius:4px;white-space:nowrap}
@media (max-width:960px){.principes{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.principes{grid-template-columns:1fr}}

/* 13. vragen */
.vragen{background:var(--papier)}
.vragen .wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,5vw,72px);align-items:start}
.faq{border-top:1px solid var(--lijn)}
.faq details{border-bottom:1px solid var(--lijn)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 2px;font-weight:600;font-size:1.08rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary .plus{flex:none;width:34px;height:34px;border-radius:50%;background:var(--zand);display:grid;place-items:center;transition:transform .35s cubic-bezier(.2,.7,.2,1),background-color .3s}
.faq summary .plus svg{width:16px;height:16px;color:var(--petrol)}
.faq details[open] summary .plus{transform:rotate(45deg);background:var(--koraal-zacht)}
.faq .antwoord{padding:0 2px 24px;color:var(--tekst-zacht);max-width:64ch}
.faq .antwoord p+p{margin-top:10px}
@media (max-width:900px){.vragen .wrap{grid-template-columns:1fr}}

/* voet */
.voet{background:var(--petrol-nacht);color:var(--op-donker-zacht);padding-block:64px 36px;font-size:.95rem}
.voet-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:36px}
.voet p.over{margin-top:16px;max-width:36ch}
.voet h3{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--op-donker);font-weight:600}
.voet ul{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px}
.voet a{text-decoration:none;color:var(--op-donker-zacht);transition:color .2s}
.voet a:hover{color:var(--op-donker)}
.voet-onder{margin-top:48px;padding-top:24px;border-top:1px solid rgba(243,248,247,.1);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.86rem}
.voet-onder p{max-width:70ch}
.voet-onder nav{display:flex;gap:18px;flex-wrap:wrap}
@media (max-width:860px){.voet-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.voet-grid{grid-template-columns:1fr}}

/* 404 */
.niet-gevonden .wrap{grid-template-columns:1.3fr .7fr}
.nf-schild{width:min(260px,60%);justify-self:center;animation:zweef 8s ease-in-out infinite}
@media (max-width:860px){.niet-gevonden .wrap{grid-template-columns:1fr}.nf-schild{display:none}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ===== Subpagina's (cursus, winkel, kennisbank) ===== */
.kruimel{font-size:.9rem;color:var(--tekst-zacht);padding-top:26px}
.kruimel ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.kruimel li+li::before{content:"/";margin-right:6px;color:var(--lijn)}
.kruimel a{text-decoration:none}.kruimel a:hover{text-decoration:underline}
.kruimel [aria-current]{color:var(--petrol-diep);font-weight:500}

.ph{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--zand) 0%,var(--salie-zacht) 100%);padding-block:0 clamp(64px,8vw,104px)}
.ph .vlek.v1{opacity:.8}
.ph-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px);align-items:center;padding-top:clamp(28px,4vw,48px)}
.ph h1{color:var(--petrol-diep);font-size:clamp(2.2rem,4.6vw,3.7rem)}
.ph h1 em{font-style:normal;color:var(--koraal-donker)}
.feiten{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;padding:0;list-style:none}
.feiten li{display:flex;align-items:center;gap:7px;background:var(--papier);border:1px solid var(--lijn);border-radius:999px;padding:.4em .9em .4em .6em;font-size:.93rem;color:var(--petrol-diep);font-weight:500}
.feiten svg{width:16px;height:16px;color:var(--koraal-donker)}
.prijsblok{margin-top:28px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}
.prijs{display:flex;align-items:baseline;gap:8px;color:var(--petrol-diep)}
.prijs b{font-size:2.3rem;font-weight:600;line-height:1}
.prijs span{color:var(--tekst-zacht);font-size:.95rem}
.knop[aria-disabled="true"]{background:var(--zand-donker);color:var(--tekst-zacht);box-shadow:none;cursor:default}
.knop[aria-disabled="true"]:hover{transform:none;background:var(--zand-donker)}
.tekstlink{font-weight:600;color:var(--petrol);text-underline-offset:3px}
.klein{font-size:.9rem;color:var(--tekst-zacht);margin-top:12px}

/* cursusspeler (voorbeeld in de kop) */
.speler{position:relative;background:var(--papier);border-radius:var(--r-l);box-shadow:0 30px 60px -28px rgba(14,47,79,.45),0 2px 6px rgba(14,47,79,.06);border:8px solid var(--papier);outline:1px solid var(--lijn);overflow:hidden}
.sp-balk{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px 10px;font-size:.82rem;color:var(--tekst-zacht)}
.sp-balk b{color:var(--petrol-diep);font-weight:600}
.sp-voortgang{height:6px;background:var(--salie-zacht);margin:0 18px;border-radius:9px;overflow:hidden}
.sp-voortgang i{display:block;height:100%;width:60%;background:linear-gradient(90deg,var(--koraal),var(--salie));border-radius:9px;transition:width 1.2s cubic-bezier(.2,.7,.2,1)}
.sp-inhoud{padding:20px 18px 20px}
.sp-scene{display:flex;gap:12px;align-items:flex-start;background:var(--zand);border-radius:var(--r-s);padding:14px}
.sp-scene .avatar{flex:none;width:38px;height:38px;border-radius:50%;background:var(--salie);display:grid;place-items:center;color:var(--petrol-diep);font-weight:700}
.sp-scene p{font-size:.98rem;color:var(--tekst)}
.sp-vraag{font-weight:600;color:var(--petrol-diep);margin:16px 0 10px}
.sp-opties{display:grid;gap:8px;list-style:none;margin:0;padding:0}
.sp-opties li{display:flex;gap:10px;align-items:center;border:2px solid var(--lijn);border-radius:12px;padding:10px 12px;font-size:.95rem;transition:border-color .35s,background-color .35s,transform .35s}
.sp-opties li b{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--zand);font-size:.85rem;color:var(--petrol)}
.sp-opties li.kies{border-color:var(--koraal);background:var(--koraal-zacht);transform:translateX(4px)}
.sp-opties li.kies b{background:var(--koraal);color:var(--papier)}
.sp-uitleg{margin-top:12px;display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:12px;background:var(--petrol-diep);color:var(--op-donker);font-size:.92rem;opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s}
.sp-uitleg.aan{opacity:1;transform:none}
.sp-uitleg svg{flex:none;width:20px;height:20px;color:var(--koraal)}
.ph-beeld{position:relative}
.ph-beeld .deel-a{position:absolute;width:62%;aspect-ratio:1;right:-12%;top:-10%;border-radius:50%;background:var(--koraal);opacity:.18;z-index:-1}
.ph-beeld .bewijs{position:absolute;left:-6%;bottom:-8%;display:flex;align-items:center;gap:10px;background:var(--papier);border-radius:16px;padding:10px 14px 10px 10px;box-shadow:0 18px 34px -16px rgba(14,47,79,.45);font-size:.88rem;color:var(--petrol-diep);font-weight:600;animation:zweef 8s ease-in-out infinite}
.bewijs i{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--koraal-zacht);color:var(--koraal-donker)}
.bewijs i svg{width:18px;height:18px}
.bewijs small{display:block;font-weight:400;color:var(--tekst-zacht)}

/* algemene secties */
.sectie{padding-block:clamp(64px,9vw,112px)}
.vragen .wrap+.wrap{display:block}
.sectie.wit{background:var(--papier)}
.sectie-kop{max-width:720px;margin-bottom:clamp(32px,4vw,52px)}
.twee{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,84px);align-items:center}
.tekst p+p{margin-top:14px}
.tekst p{color:var(--tekst-zacht);max-width:62ch}
.tekst strong{color:var(--tekst)}
.plicht{background:var(--papier);border-radius:var(--r-l);padding:clamp(24px,3vw,36px);box-shadow:var(--schaduw);border-left:6px solid var(--koraal)}
.plicht .oog{margin-bottom:10px}
.plicht blockquote{margin:0;font-size:1.15rem;color:var(--petrol-diep);font-weight:500;line-height:1.45}
.plicht .bron{margin-top:14px;font-size:.85rem;color:var(--tekst-zacht)}
.plicht .bron a{color:inherit}
.getal-rij{display:flex;gap:18px;margin-top:22px;flex-wrap:wrap}
.getal-rij div{flex:1;min-width:140px;background:var(--zand);border-radius:var(--r-s);padding:16px}
.getal-rij b{display:block;font-size:2rem;color:var(--petrol-diep);font-weight:600;line-height:1}
.getal-rij span{display:block;margin-top:6px;font-size:.9rem;line-height:1.4;color:var(--tekst-zacht)}

/* hoofdstukken */
.hoofdstukken{list-style:none;margin:0;padding:0;display:grid;gap:14px;counter-reset:h}
.hs{position:relative;display:grid;grid-template-columns:64px 1fr auto;gap:18px;align-items:start;background:var(--papier);border:1px solid var(--lijn);border-radius:var(--r-s);padding:20px 22px;transition:border-color .3s,box-shadow .3s,transform .3s}
.hs:hover{border-color:var(--koraal);box-shadow:var(--schaduw);transform:translateY(-2px)}
.hs-nr{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:var(--koraal-zacht);color:var(--koraal-donker);font-weight:700;font-size:1.25rem}
.hs.toets .hs-nr{background:var(--petrol-diep);color:var(--papier)}
.hs.toets .hs-nr svg{width:24px;height:24px}
.hs h3{margin-bottom:4px}
.hs p{color:var(--tekst-zacht);font-size:.98rem}
.hs .duur{white-space:nowrap;font-size:.88rem;color:var(--petrol);background:var(--salie-zacht);border-radius:999px;padding:.25em .8em;font-weight:500}
.hs-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.hs-tags span{font-size:.8rem;border:1px solid var(--lijn);border-radius:999px;padding:.15em .7em;color:var(--tekst-zacht)}

/* probeer zelf */
.probeer{background:linear-gradient(160deg,var(--petrol-diep),var(--petrol-nacht));color:var(--op-donker);position:relative;overflow:hidden}
.probeer h2{color:var(--op-donker)}
.demo{background:var(--papier);color:var(--tekst);border-radius:var(--r-l);padding:clamp(22px,3vw,34px);box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.demo .sp-scene{margin-bottom:6px}
.demo-opties{display:grid;gap:10px;margin-top:14px}
.demo-opties button{all:unset;box-sizing:border-box;display:flex;gap:12px;align-items:center;border:2px solid var(--lijn);border-radius:14px;padding:13px 15px;cursor:pointer;font-size:1rem;line-height:1.4;transition:border-color .25s,background-color .25s}
.demo-opties button:hover{border-color:var(--salie)}
.demo-opties button:focus-visible{outline:3px solid var(--koraal);outline-offset:2px}
.demo-opties button b{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--zand);font-size:.9rem;color:var(--petrol)}
.demo-opties button[aria-pressed="true"].goed{border-color:var(--koraal);background:var(--koraal-zacht)}
.demo-opties button[aria-pressed="true"].goed b{background:var(--koraal);color:var(--papier)}
.demo-opties button[aria-pressed="true"].mis{border-color:#E0A458;background:#FBF1E4}
.demo-opties button[aria-pressed="true"].mis b{background:#E0A458;color:var(--papier)}
.demo-uitleg{margin-top:14px;min-height:3.2em;padding:14px 16px;border-radius:14px;background:var(--zand);color:var(--tekst-zacht);font-size:.97rem}
.demo-uitleg strong{color:var(--petrol-diep)}
.probeer-tekst p{color:var(--op-donker-zacht);max-width:48ch}
.probeer-tekst ul{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:12px}
.probeer-tekst li{display:flex;gap:10px;align-items:flex-start;color:var(--op-donker)}
.probeer-tekst li svg{flex:none;width:20px;height:20px;color:var(--koraal);margin-top:3px}

/* werkgevers + staffel */
.voordelen{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:14px}
.voordelen li{display:flex;gap:12px;align-items:flex-start}
.voordelen li i{flex:none;width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:var(--salie-zacht);color:var(--petrol)}
.voordelen li i svg{width:18px;height:18px}
.voordelen b{display:block;color:var(--petrol-diep)}
.voordelen span{color:var(--tekst-zacht);font-size:.97rem}
.staffel{margin-top:clamp(40px,5vw,64px);display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.trede{background:var(--papier);border:1px solid var(--lijn);border-radius:var(--r-s);padding:22px 20px;position:relative;transition:transform .3s,box-shadow .3s}
.trede:hover{transform:translateY(-3px);box-shadow:var(--schaduw)}
.trede.uitgelicht{border:2px solid var(--koraal)}
.trede .lint{position:absolute;top:-12px;left:20px;background:var(--koraal);color:var(--petrol-diep);font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:.25em .8em;border-radius:999px}
.trede h3{font-size:1rem;color:var(--tekst-zacht);font-weight:500}
.trede b{display:block;font-size:2rem;color:var(--petrol-diep);font-weight:600;margin-top:6px;line-height:1.1}
.trede small{color:var(--tekst-zacht)}
.staffel-noot{margin-top:14px;font-size:.9rem;color:var(--tekst-zacht)}
.foto-rond{border-radius:var(--r-l);overflow:hidden;box-shadow:var(--schaduw);aspect-ratio:4/3}
.foto-rond img{width:100%;height:100%;object-fit:cover}

/* verwant */
.verwant{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.vw{display:flex;flex-direction:column;gap:8px;background:var(--papier);border:1px solid var(--lijn);border-radius:var(--r-s);padding:22px;text-decoration:none;transition:border-color .3s,transform .3s,box-shadow .3s}
.vw:hover{border-color:var(--koraal);transform:translateY(-3px);box-shadow:var(--schaduw)}
.vw .soort{font-size:.78rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--koraal-donker)}
.vw h3{color:var(--petrol-diep)}
.vw p{color:var(--tekst-zacht);font-size:.95rem;flex:1}
.vw .tekstlink{margin-top:6px}

.zien{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.zien.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.zien{opacity:1;transform:none;transition:none}.ph-beeld .bewijs{animation:none}}

@media (max-width:900px){
  .ph-grid,.twee{grid-template-columns:1fr}
  .ph-beeld{max-width:520px}
  .staffel{grid-template-columns:1fr 1fr}
  .verwant{grid-template-columns:1fr}
  .hs{grid-template-columns:52px 1fr;padding:18px}
  .hs .duur{grid-column:2;justify-self:start}
  .hs-nr{width:44px;height:44px;font-size:1.1rem}
  .ph-beeld .bewijs{left:auto;right:4%;bottom:-14%}
}
@media (max-width:520px){.staffel{grid-template-columns:1fr}.prijs b{font-size:2rem}}

/* ===== ronde 2: infographics en foto's ===== */
.cijferblok{background:linear-gradient(180deg,var(--salie-zacht),var(--zand))}
.twee.boven{align-items:center}
.info-kaart{margin:0;background:var(--papier);border-radius:var(--r-l);padding:clamp(22px,3vw,32px);box-shadow:var(--schaduw)}
.info-groot{display:flex;align-items:baseline;gap:10px;color:var(--petrol-diep)}
.info-groot b{font-size:clamp(3.2rem,6vw,4.4rem);font-weight:700;line-height:.9;color:var(--koraal-donker)}
.info-groot span{font-size:1.15rem;font-weight:600}
.info-uitleg{color:var(--tekst-zacht);margin-top:6px}
.poppen.licht{grid-template-columns:repeat(20,1fr);margin-top:20px}
.poppen.licht .pop svg{fill:var(--zand-donker)}
.poppen.licht .pop.aan svg{transition:fill .4s calc(var(--i) * 45ms)}
.in .poppen.licht .pop.aan svg,.poppen.licht.nu .pop.aan svg{fill:var(--koraal)}
.poppen.licht .pop.aan{animation:none}
.balken.licht .bl{color:var(--tekst-zacht)}
.balken.licht b{color:var(--petrol-diep)}
.balken.licht .bs{background:var(--zand)}
.balken.licht .bs i{width:0;background:linear-gradient(90deg,var(--koraal),var(--salie));transition:width 1.2s cubic-bezier(.2,.7,.2,1) .9s}
.in .balken.licht .bs i{width:var(--w)}
.info-kaart figcaption{margin-top:16px;font-size:.82rem;color:var(--tekst-zacht)}
.info-kaart figcaption a{color:inherit}
.plicht-strook{margin-top:clamp(36px,5vw,56px);display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:center;background:var(--petrol-diep);color:var(--op-donker);border-radius:var(--r-l);padding:clamp(20px,3vw,30px) clamp(22px,3vw,36px)}
.plicht-ico{width:60px;height:60px;border-radius:18px;background:rgba(59,179,154,.18);display:grid;place-items:center;color:var(--koraal)}
.plicht-ico svg{width:30px;height:30px}
.plicht-strook .oog{color:var(--koraal-zacht);margin-bottom:6px}
.plicht-tekst{font-size:1.12rem;line-height:1.5}
.plicht-tekst strong{color:var(--koraal)}
.plicht-bron{font-size:.85rem;color:var(--op-donker-zacht);text-align:right;line-height:1.5}
.plicht-bron a{color:var(--op-donker)}

.mozaiek{display:grid;grid-template-columns:1.4fr 1fr;grid-template-rows:1fr 1fr;gap:16px;height:clamp(420px,46vw,560px)}
.mozaiek figure{margin:0;position:relative;border-radius:var(--r-l);overflow:hidden;box-shadow:var(--schaduw)}
.m-groot{grid-row:1 / 3}
.mozaiek img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.mozaiek figure:hover img{transform:scale(1.04)}
.mozaiek figcaption{position:absolute;left:14px;right:14px;bottom:14px;background:rgba(255,255,255,.94);backdrop-filter:blur(6px);border-radius:14px;padding:10px 14px;font-size:.92rem;color:var(--tekst);line-height:1.35}
.mozaiek figcaption span{display:block;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--koraal-donker);margin-bottom:2px}

.tijdbalk{display:flex;gap:4px;margin-bottom:26px}
.tb{flex:var(--m) 1 0;min-width:0;position:relative;padding-top:18px}
.tb::before{content:"";position:absolute;top:0;left:0;height:10px;border-radius:6px;width:0;transition:width .9s cubic-bezier(.2,.7,.2,1)}
.tijdbalk.in .tb::before{width:100%}
.tb.t0::before{background:var(--koraal)}.tb.t1::before{background:#5FC2AC;transition-delay:.12s}.tb.t2::before{background:#8FCFC0;transition-delay:.24s}
.tb.t3::before{background:var(--salie);transition-delay:.36s}.tb.t4::before{background:var(--petrol);transition-delay:.48s}.tb.t5::before{background:var(--petrol-diep);transition-delay:.6s}
.tb b{display:block;font-size:.95rem;color:var(--petrol-diep)}
.tb small{display:block;font-size:.78rem;color:var(--tekst-zacht);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.foto-dash{position:relative;padding-bottom:40px}
.dash{position:absolute;left:-8%;bottom:0;width:min(270px,70%);background:var(--papier);border-radius:18px;padding:16px;box-shadow:0 24px 44px -18px rgba(14,47,79,.5)}
.dash-kop{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--tekst-zacht);margin-bottom:10px}
.dash-rij{display:flex;align-items:center;gap:12px}
.vring{width:52px;height:52px;transform:rotate(-90deg)}
.vring circle{fill:none;stroke:var(--zand-donker);stroke-width:6}
.vring .ring-v{stroke:var(--koraal);stroke-linecap:round;stroke-dasharray:113.1;stroke-dashoffset:113.1;transition:stroke-dashoffset 1.6s cubic-bezier(.2,.7,.2,1) .3s}
.in .vring .ring-v{stroke-dashoffset:28.3}
.dash-rij b{display:block;color:var(--petrol-diep);font-size:1.1rem}
.dash-rij small{color:var(--tekst-zacht);font-size:.82rem}
.dash ul{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:6px;font-size:.86rem}
.dash li{display:flex;align-items:center;gap:8px;color:var(--tekst)}
.dash li i{width:20px;height:20px;border-radius:50%;background:var(--koraal-zacht);color:var(--koraal-donker);display:grid;place-items:center}
.dash li i svg{width:12px;height:12px}
.dash li.open i{background:var(--zand-donker)}
.dash li em{margin-left:auto;font-style:normal;color:var(--tekst-zacht)}

.reken{margin-top:clamp(44px,6vw,72px);background:linear-gradient(135deg,var(--koraal-zacht),var(--salie-zacht));border-radius:var(--r-l);padding:clamp(24px,3.5vw,40px)}
.reken-kop h3{font-size:1.5rem;color:var(--petrol-diep)}
.reken-kop p{color:var(--tekst-zacht);margin-top:4px}
.reken-label{display:block;margin-top:22px;font-weight:600;color:var(--petrol-diep);font-size:1.1rem}
.reken-label output{font-size:1.6rem;color:var(--koraal-donker)}
.reken input[type=range]{width:100%;margin:12px 0 4px;accent-color:var(--koraal);height:28px;cursor:pointer}
.treden{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:8px}
.trede{background:rgba(255,255,255,.6);border:2px solid transparent;border-radius:14px;padding:10px 12px;transition:background-color .3s,border-color .3s,transform .3s}
.trede small{display:block;font-size:.8rem;color:var(--tekst-zacht)}
.trede b{display:block;font-size:1.25rem;color:var(--petrol-diep);font-weight:600}
.trede.aan{background:var(--papier);border-color:var(--koraal);transform:translateY(-3px);box-shadow:0 12px 24px -14px rgba(14,47,79,.4)}
.reken-uit{display:flex;flex-wrap:wrap;align-items:center;gap:18px 34px;margin-top:22px}
.reken-uit small{display:block;color:var(--tekst-zacht);font-size:.85rem}
.reken-uit b{font-size:2rem;color:var(--petrol-diep);font-weight:600;line-height:1.1}
.reken-uit .knop{margin-left:auto}

.vw{padding:0;overflow:hidden}
.vw>*:not(.vw-foto){margin-inline:22px}
.vw .tekstlink{margin-bottom:22px}
.vw-foto{display:block;aspect-ratio:16/9;overflow:hidden;margin-bottom:10px}
.vw-foto img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.vw:hover .vw-foto img{transform:scale(1.05)}

.vragen-kleur{background:linear-gradient(180deg,var(--salie-zacht),var(--zand))}
.vragen-kleur .faq{background:var(--papier);border-radius:var(--r-l);padding:6px clamp(18px,2.5vw,30px);box-shadow:var(--schaduw);border-top:0}
.vragen-kleur .faq details:last-child{border-bottom:0}
.vraag-kaart{display:flex;gap:16px;align-items:center;margin-top:28px;background:var(--papier);border-radius:var(--r-l);padding:14px;box-shadow:var(--schaduw);max-width:420px}
.vk-foto{flex:none;width:96px;height:96px;border-radius:18px;overflow:hidden}
.vk-foto img{width:100%;height:100%;object-fit:cover}
.vraag-kaart b{color:var(--petrol-diep)}
.vraag-kaart p{font-size:.93rem;color:var(--tekst-zacht);margin:2px 0 6px}
.vraag-kaart .tekstlink{display:inline-flex;align-items:center;gap:6px}
.vraag-kaart .tekstlink svg{width:16px;height:16px}

@media (max-width:900px){
  .plicht-strook{grid-template-columns:auto 1fr}
  .plicht-bron{grid-column:1 / -1;text-align:left}
  .mozaiek{grid-template-columns:1fr 1fr;grid-template-rows:auto auto;height:auto}
  .m-groot{grid-column:1 / -1;grid-row:auto;aspect-ratio:4/3}
  .m-klein{aspect-ratio:3/4}
  .tb small{display:none}
  .dash{left:auto;right:-2%}
  .treden{grid-template-columns:1fr 1fr}
  .reken-uit .knop{margin-left:0}
}
@media (max-width:520px){
  .poppen.licht{grid-template-columns:repeat(10,1fr);max-width:240px}
  .mozaiek figcaption{font-size:.82rem;padding:8px 10px}
  .m-klein{aspect-ratio:1/1.1}
  .tb b{font-size:.78rem}
}

/* ronde 3: overzicht cursussen */
.ph-foto{padding-bottom:40px}
.ph-foto .deel-a{position:absolute;width:55%;aspect-ratio:1;right:-10%;top:-12%;border-radius:50%;background:var(--salie);opacity:.2;z-index:-1}
.dash-getal{width:44px;height:44px;border-radius:50%;background:var(--koraal-zacht);color:var(--koraal-donker);display:grid;place-items:center;font-weight:700;font-size:1.3rem;flex:none}
.keuze{background:var(--papier);border:1px solid var(--lijn);border-radius:var(--r-l);padding:clamp(18px,3vw,28px);margin-bottom:28px;box-shadow:var(--schaduw)}
.keuze-knoppen{display:flex;flex-wrap:wrap;gap:10px}
.keuze-knoppen button{font:inherit;font-weight:600;color:var(--petrol-diep);background:var(--zand);border:2px solid transparent;border-radius:999px;padding:.7em 1.2em;cursor:pointer;transition:background .25s,border-color .25s,transform .2s}
.keuze-knoppen button:hover{border-color:var(--koraal)}
.keuze-knoppen button:active{transform:scale(.97)}
.keuze-knoppen button[aria-pressed="true"]{background:var(--petrol-diep);color:#fff}
.keuze-uit{margin:16px 0 0;color:var(--tekst-zacht);min-height:1.6em}
.keuze-uit strong{color:var(--petrol-diep)}
.cursusgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.ck{display:flex;flex-direction:column;background:var(--papier);border:2px solid var(--lijn);border-radius:var(--r-l);overflow:hidden;text-decoration:none;transition:border-color .3s,transform .3s,box-shadow .3s,opacity .3s}
.ck:hover{border-color:var(--koraal);transform:translateY(-3px);box-shadow:var(--schaduw)}
.ck .vw-foto{margin:0;aspect-ratio:16/8}
.ck:hover .vw-foto img{transform:scale(1.05)}
.ck-in{display:flex;flex-direction:column;gap:8px;padding:22px 24px 24px;flex:1}
.ck .soort{font-size:.78rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--koraal-donker)}
.ck h3{color:var(--petrol-diep)}
.ck p{color:var(--tekst-zacht);flex:1;margin:0}
.ck-meta{list-style:none;padding:0;margin:6px 0 4px;display:flex;flex-wrap:wrap;gap:6px}
.ck-meta li{display:flex;align-items:center;gap:6px;font-size:.84rem;color:var(--petrol-diep);background:var(--zand);border-radius:999px;padding:.3em .8em .3em .55em}
.ck-meta svg{width:15px;height:15px;color:var(--koraal-donker)}
.ck .tekstlink{display:inline-flex;align-items:center;gap:6px}
.ck .tekstlink svg{width:16px;height:16px}
.cursusgrid.kies .ck{opacity:.45}
.cursusgrid.kies .ck.gekozen{opacity:1;border-color:var(--koraal);box-shadow:var(--schaduw)}
.keten{list-style:none;padding:0;margin:clamp(36px,5vw,56px) 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;position:relative}
.keten::before{content:"";position:absolute;top:24px;left:6%;right:6%;height:4px;border-radius:4px;background:linear-gradient(90deg,var(--koraal),#5FC2AC,var(--salie),var(--petrol))}
.kt{position:relative;display:flex;flex-direction:column;gap:6px}
.kt-nr{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:1.2rem;color:#fff;border:5px solid var(--papier);margin-bottom:8px}
.k1 .kt-nr{background:var(--koraal)}.k2 .kt-nr{background:#3FAF96}.k3 .kt-nr{background:var(--salie)}.k4 .kt-nr{background:var(--petrol)}
.kt b{font-size:1.15rem;color:var(--petrol-diep)}
.kt p{margin:0;color:var(--tekst-zacht);font-size:.95rem;flex:1}
.kt .tekstlink{font-size:.92rem}
.vergelijk{overflow-x:auto;border-radius:var(--r-l);background:var(--papier);border:1px solid var(--lijn);box-shadow:var(--schaduw)}
.vergelijk table{width:100%;border-collapse:collapse;min-width:720px}
.vergelijk th,.vergelijk td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--lijn);font-size:.95rem;vertical-align:top}
.vergelijk thead th{background:var(--petrol-diep);color:#fff;font-weight:600}
.vergelijk thead a{color:#fff;text-decoration-color:rgba(255,255,255,.4);text-underline-offset:3px}
.vergelijk tbody th{color:var(--petrol-diep);font-weight:600;background:var(--zand)}
.vergelijk tbody tr:last-child>*{border-bottom:0}
.vergelijk td{color:var(--tekst)}
#vergelijk .staffel-noot{margin:14px 0 36px}
@media (max-width:900px){
 .cursusgrid{grid-template-columns:1fr}
 .keten{grid-template-columns:1fr 1fr;row-gap:28px}
 .keten::before{display:none}
}
@media (max-width:520px){
 .keten{grid-template-columns:1fr}
 .keuze-knoppen button{flex:1 1 100%;text-align:left}
}
.vergelijk-twee{margin-top:clamp(32px,4vw,52px);align-items:stretch}
.vergelijk-twee .keuze{margin:0}
.vergelijk-twee h3{color:var(--petrol-diep);font-size:1.3rem}
.vergelijk-twee .voordelen{margin-top:16px}
.voordelen.twee-kolom{grid-template-columns:1fr 1fr;gap:22px 40px}
@media (max-width:760px){.voordelen.twee-kolom{grid-template-columns:1fr}}
.cta-strook{margin-top:clamp(32px,4vw,48px);display:flex;align-items:center;justify-content:space-between;gap:18px 28px;flex-wrap:wrap;background:var(--koraal-zacht);border-radius:var(--r-l);padding:clamp(20px,3vw,30px)}
.cta-strook b{display:block;font-size:1.2rem;color:var(--petrol-diep)}
.cta-strook span{color:var(--tekst-zacht)}
.cta-strook .knop{margin-left:0}

/* contact */
.contact-grid{position:relative;z-index:1;display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(32px,5vw,64px);align-items:start;padding:clamp(28px,4vw,48px) 0 clamp(48px,7vw,88px)}
.hulp-kaart{margin-top:28px;background:var(--papier);border:1px solid var(--lijn);border-left:5px solid var(--koraal);border-radius:var(--r-s);padding:20px 22px}
.hulp-kaart>p:not(.oog){color:var(--tekst-zacht);margin:6px 0 0}
.hulp-kaart ul{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:12px}
.hulp-kaart li{display:flex;gap:12px;align-items:flex-start}
.hulp-kaart li i{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--koraal-zacht);color:var(--koraal-donker)}
.hulp-kaart li i svg{width:17px;height:17px}
.hulp-kaart b{display:block;color:var(--petrol-diep)}
.hulp-kaart span{color:var(--tekst-zacht);font-size:.95rem}
.contact-foto{margin:28px 0 0;aspect-ratio:16/9}
.formkaart{background:var(--papier);border-radius:var(--r-l);box-shadow:var(--schaduw);padding:clamp(22px,3vw,36px);position:sticky;top:96px}
.aanvraag{display:grid;gap:18px}
.aanvraag fieldset{border:0;margin:0;padding:0;min-width:0}
.aanvraag legend,.aanvraag label:not(.keus):not(.vinkje){display:block;font-weight:600;color:var(--petrol-diep);margin-bottom:7px;font-size:.97rem}
.aanvraag small{font-weight:400;color:var(--tekst-zacht)}
.veld-rij{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.aanvraag input:not([type=radio]):not([type=checkbox]),.aanvraag select,.aanvraag textarea{width:100%;font:inherit;font-size:16px;color:var(--tekst);background:var(--zand);border:2px solid transparent;border-radius:12px;padding:.75em .9em;transition:border-color .2s,background .2s}
.aanvraag textarea{resize:vertical;min-height:110px}
.aanvraag input:focus-visible,.aanvraag select:focus-visible,.aanvraag textarea:focus-visible{outline:none;border-color:var(--petrol);background:var(--papier)}
.aanvraag [aria-invalid="true"]{border-color:#B3261E!important;background:#FDF3F2!important}
.veld-fout{margin:6px 0 0;color:#B3261E;font-size:.88rem;font-weight:500}
.hint{margin:6px 0 0;font-size:.86rem;color:var(--tekst-zacht)}
.keuzes{display:flex;flex-wrap:wrap;gap:8px}
.keus{position:relative;cursor:pointer}
.keus input{position:absolute;opacity:0;inset:0;cursor:pointer}
.keus span{display:block;padding:.6em 1.05em;border-radius:999px;background:var(--zand);border:2px solid transparent;font-weight:600;font-size:.93rem;color:var(--petrol-diep);transition:background .2s,border-color .2s,color .2s}
.keus:hover span{border-color:var(--koraal)}
.keus input:checked+span{background:var(--petrol-diep);color:#fff}
.keus input:focus-visible+span{outline:3px solid var(--koraal);outline-offset:2px}
.vinkje{display:flex;gap:10px;align-items:flex-start;font-size:.93rem;color:var(--tekst-zacht);cursor:pointer}
.vinkje input{width:20px;height:20px;margin-top:2px;accent-color:var(--petrol);flex:none}
.aanvraag .knop{justify-self:start;margin-left:0}
.form-status{margin:0;font-weight:500;color:var(--petrol-diep);min-height:1.4em}
.form-status.ok{background:var(--salie-zacht);border-radius:12px;padding:12px 14px}
.keten.drie{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}.formkaart{position:static}.keten.drie{grid-template-columns:1fr}}
@media (max-width:560px){.veld-rij{grid-template-columns:1fr}}

/* sportclubs: checklist */
.checkblok{display:grid;grid-template-columns:1fr 300px;gap:clamp(20px,3vw,36px);align-items:start}
.checklijst{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.ck-eis{background:var(--zand);border:2px solid transparent;border-radius:var(--r-s);padding:16px 18px;transition:background .3s,border-color .3s}
.ck-eis:has(input:checked){background:var(--salie-zacht);border-color:var(--koraal)}
.ck-eis label{display:flex;gap:14px;align-items:flex-start;cursor:pointer}
.ck-eis input{position:absolute;opacity:0;width:1px;height:1px}
.ck-box{flex:none;width:28px;height:28px;border-radius:9px;border:2px solid var(--petrol);background:var(--papier);display:grid;place-items:center;color:transparent;transition:background .2s,color .2s,transform .2s}
.ck-box svg{width:18px;height:18px}
.ck-eis input:checked+.ck-box{background:var(--koraal);border-color:var(--koraal);color:#fff;transform:scale(1.06)}
.ck-eis input:focus-visible+.ck-box{outline:3px solid var(--koraal);outline-offset:3px}
.ck-tekst b{display:block;color:var(--petrol-diep);font-size:1.05rem}
.ck-tekst span{display:block;color:var(--tekst-zacht);font-size:.95rem;margin-top:3px}
.ck-hulp{display:inline-flex;align-items:center;gap:6px;margin:10px 0 0 42px;font-size:.92rem}
.ck-hulp svg{width:15px;height:15px}
.ck-eis:has(input:checked) .ck-hulp{display:none}
.score{position:sticky;top:96px;background:var(--petrol-diep);color:#fff;border-radius:var(--r-l);padding:26px;text-align:center;box-shadow:var(--schaduw)}
.score-ring{width:130px;height:130px;transform:rotate(-90deg)}
.score-ring circle{fill:none;stroke-width:10}
.score-ring circle:first-child{stroke:rgba(255,255,255,.14)}
.score-v{stroke:var(--koraal);stroke-linecap:round;stroke-dasharray:326.7;stroke-dashoffset:326.7;transition:stroke-dashoffset .7s cubic-bezier(.2,.7,.2,1)}
.score-getal{margin:10px 0 4px;font-size:1.1rem;color:var(--op-donker-zacht)}
.score-getal b{font-size:2.2rem;color:#fff}
.score-tekst{margin:0 0 18px;color:var(--op-donker-zacht);font-size:.95rem;min-height:3em}
.score .knop{margin:0 auto}
@media (max-width:900px){.checkblok{grid-template-columns:1fr}.score{position:static}}
@media (prefers-reduced-motion:reduce){.score-v,.ck-box{transition:none}}
.ck-label{display:inline-block;font-style:normal;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:.2em .7em;margin-bottom:6px}
.ck-label.moet{background:var(--petrol-diep);color:#fff}
.ck-label.mag{background:var(--papier);color:var(--petrol);border:1px solid var(--lijn)}

/* quickscan */
.scan-ph{padding-bottom:clamp(56px,8vw,96px)}
.scan-kop{max-width:760px;padding-top:clamp(24px,4vw,44px)}
.scan{position:relative;z-index:1;margin-top:clamp(28px,4vw,44px);background:var(--papier);border-radius:var(--r-l);box-shadow:var(--schaduw);padding:clamp(22px,4vw,44px);min-height:360px}
.scan-stap h2:focus{outline:none}
.scan-vraag{font-size:clamp(1.4rem,2.6vw,1.9rem);color:var(--petrol-diep);max-width:760px}
.scan-kies{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:22px}
.scan-type{font:inherit;text-align:left;cursor:pointer;background:var(--zand);border:2px solid transparent;border-radius:var(--r-l);padding:0 0 20px;overflow:hidden;display:flex;flex-direction:column;gap:4px;transition:border-color .25s,transform .25s,box-shadow .25s}
.scan-type:hover{border-color:var(--koraal);transform:translateY(-3px);box-shadow:var(--schaduw)}
.scan-type:focus-visible{outline:3px solid var(--koraal);outline-offset:3px}
.scan-type-foto{display:block;aspect-ratio:16/8;overflow:hidden;margin-bottom:12px}
.scan-type-foto img{width:100%;height:100%;object-fit:cover}
.scan-type b{font-size:1.3rem;color:var(--petrol-diep);padding-inline:20px}
.scan-type>span:last-child{color:var(--tekst-zacht);padding-inline:20px}
.scan-voortgang{height:8px;border-radius:8px;background:var(--zand);overflow:hidden}
.scan-voortgang i{display:block;height:100%;border-radius:8px;background:linear-gradient(90deg,var(--koraal),var(--salie));transition:width .4s cubic-bezier(.2,.7,.2,1)}
.scan-teller{margin:18px 0 8px;font-size:.9rem;font-weight:600;color:var(--koraal-donker);letter-spacing:.04em}
.scan-opties{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:26px}
.scan-optie{font:inherit;font-weight:600;font-size:1.05rem;color:var(--petrol-diep);background:var(--zand);border:2px solid transparent;border-radius:14px;padding:1em .8em;cursor:pointer;transition:background .2s,border-color .2s,color .2s,transform .15s}
.scan-optie:hover{border-color:var(--koraal)}
.scan-optie:active{transform:scale(.97)}
.scan-optie:focus-visible{outline:3px solid var(--koraal);outline-offset:2px}
.scan-optie.gekozen{background:var(--petrol-diep);color:#fff}
.scan-nav{margin-top:24px}
.scan-nav .tekstlink,.scan-acties .tekstlink{background:none;border:0;font:inherit;cursor:pointer;padding:0}
.scan-uit{display:grid;grid-template-columns:220px 1fr;gap:clamp(24px,4vw,48px);align-items:start}
.scan-score{position:relative;display:grid;place-items:center}
.scan-score .score-ring{width:200px;height:200px}
.scan-score .score-ring circle:first-child{stroke:var(--zand)}
.scan-score .score-v{transition:stroke-dashoffset 1.1s cubic-bezier(.2,.7,.2,1)}
.scan-score p{position:absolute;margin:0;text-align:center}
.scan-score b{display:block;font-size:2.6rem;color:var(--petrol-diep);line-height:1}
.scan-score span{font-size:.9rem;color:var(--tekst-zacht)}
.scan-uit-tekst>p:not(.oog){color:var(--tekst-zacht);margin-top:8px}
.scan-sub{margin-top:26px;color:var(--petrol-diep);font-size:1.1rem}
.scan-advies{list-style:none;counter-reset:a;padding:0;margin:14px 0 0;display:grid;gap:12px}
.scan-advies li{counter-increment:a;position:relative;background:var(--zand);border-radius:var(--r-s);padding:16px 18px 16px 58px;display:grid;gap:4px}
.scan-advies li::before{content:counter(a);position:absolute;left:16px;top:16px;width:28px;height:28px;border-radius:50%;background:var(--koraal);color:#fff;font-weight:700;display:grid;place-items:center;font-size:.9rem}
.scan-advies b{color:var(--petrol-diep)}
.scan-advies span{color:var(--tekst-zacht);font-size:.95rem}
.scan-advies .tekstlink{font-size:.93rem;margin-top:4px}
.scan-alles{margin-top:20px;font-weight:600;color:var(--petrol-diep)}
.scan-acties{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:26px}
.scan-acties .knop{margin-left:0}
.scan-noscript{margin-top:16px;color:var(--tekst-zacht)}
@media (max-width:760px){.scan-kies{grid-template-columns:1fr}.scan-opties{grid-template-columns:1fr 1fr}.scan-uit{grid-template-columns:1fr;justify-items:center}.scan-uit-tekst{justify-self:stretch}}
@media (prefers-reduced-motion:reduce){.scan-voortgang i,.scan-score .score-v{transition:none}}
.scan{scroll-margin-top:92px}

/* hulp */
.gevaar-strook{margin-top:22px;display:inline-flex;gap:8px;align-items:center;background:#FDF3F2;border:1px solid #F1C9C5;color:#7A1F17;border-radius:12px;padding:10px 16px;font-size:1rem}
.gevaar-strook a{color:#B3261E;font-weight:700}
.hulpkaarten{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.hk{display:flex;gap:16px;align-items:flex-start;background:var(--papier);border:1px solid var(--lijn);border-radius:var(--r-l);padding:22px;box-shadow:0 10px 30px -22px rgba(14,47,79,.5)}
.hk>i{flex:none;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--salie-zacht);color:var(--petrol)}
.hk>i svg{width:22px;height:22px}
.hk b{display:block;font-size:1.15rem;color:var(--petrol-diep)}
.hk p{margin:6px 0 10px;color:var(--tekst-zacht)}
.hk-nr{display:inline-block;font-size:1.5rem;font-weight:700;color:var(--petrol-diep);text-decoration:none;letter-spacing:.01em}
.hk-nr:hover{color:var(--koraal-donker)}
.hk small{display:block;margin-top:4px;color:var(--tekst-zacht);font-size:.88rem}
.hk.rood{border-color:#F1C9C5;background:#FFF8F7}
.hk.rood>i{background:#FBE3E0;color:#B3261E}
.hk.rood .hk-nr{color:#B3261E}
@media (max-width:760px){.hulpkaarten{grid-template-columns:1fr}}

/* hulp-routes */
.gevoelens{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.gevoelens li{background:var(--papier);border:1px solid var(--lijn);border-radius:var(--r-s);padding:18px 20px;border-left:5px solid var(--salie)}
.gevoelens li:nth-child(3n+2){border-left-color:var(--koraal)}
.gevoelens li:nth-child(3n){border-left-color:var(--petrol)}
.gevoelens b{display:block;color:var(--petrol-diep);font-size:1.05rem}
.gevoelens span{display:block;margin-top:4px;color:var(--tekst-zacht);font-size:.95rem}
.keten.vijf{grid-template-columns:repeat(5,1fr)}
.kolom-hulp{align-items:start}
.kolom-kop{display:flex;align-items:center;gap:10px;color:var(--petrol-diep);font-size:1.2rem;margin-bottom:14px}
.kolom-kop svg{width:22px;height:22px;color:var(--koraal-donker)}
.hulpkaarten.een{grid-template-columns:1fr}
.hulpkaarten.drie{grid-template-columns:repeat(3,1fr)}
.hk small a{color:inherit}
.wel-niet{align-items:stretch}
.wel-niet .keuze{margin:0}
.wel-niet h3{color:var(--petrol-diep);font-size:1.25rem}
.wn{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:12px}
.wn li{display:flex;gap:10px;align-items:flex-start;color:var(--tekst)}
.wn.wel svg{flex:none;width:22px;height:22px;padding:3px;border-radius:50%;background:var(--koraal-zacht);color:var(--koraal-donker);margin-top:1px}
.wn.niet i{flex:none;width:22px;height:22px;border-radius:50%;background:#FBE3E0;color:#B3261E;display:grid;place-items:center;font-style:normal;font-weight:700;line-height:1;margin-top:1px}
.breed-foto{margin:clamp(28px,4vw,44px) 0 0;aspect-ratio:21/8}
@media (max-width:1000px){.keten.vijf{grid-template-columns:repeat(3,1fr);row-gap:28px}.keten.vijf::before{display:none}.hulpkaarten.drie{grid-template-columns:1fr 1fr}}
@media (max-width:760px){.gevoelens{grid-template-columns:1fr 1fr}.keten.vijf{grid-template-columns:1fr}.hulpkaarten.drie{grid-template-columns:1fr}.breed-foto{aspect-ratio:4/3}}
@media (max-width:480px){.gevoelens{grid-template-columns:1fr}}

/* herkennen */
.duo-cijfer{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.duo-cijfer>div{background:var(--papier);border-radius:var(--r-l);padding:24px;box-shadow:var(--schaduw)}
.duo-cijfer>div:first-child{border-top:5px solid var(--koraal)}
.duo-cijfer>div:nth-child(2){border-top:5px solid var(--petrol)}
.duo-cijfer b{display:block;font-size:clamp(2.6rem,5vw,3.4rem);line-height:1;color:var(--petrol-diep)}
.duo-cijfer b small{font-size:.5em}
.duo-cijfer span{display:block;margin-top:10px;color:var(--tekst-zacht);font-size:.95rem}
.duo-bron{grid-column:1/-1;margin:0;font-size:.82rem;color:var(--tekst-zacht)}
.vorm-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.vorm-tabs button{font:inherit;font-weight:600;color:var(--petrol-diep);background:var(--zand);border:2px solid transparent;border-radius:999px;padding:.65em 1.15em;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.vorm-tabs button:hover{border-color:var(--koraal)}
.vorm-tabs button:focus-visible{outline:3px solid var(--koraal);outline-offset:2px}
.vorm-tabs button[aria-selected="true"]{background:var(--petrol-diep);color:#fff}
.vorm-paneel{background:var(--zand);border-radius:var(--r-l);padding:clamp(20px,3vw,32px)}
.vorm-uitleg{font-size:1.15rem;color:var(--petrol-diep);font-weight:500;margin:0 0 18px}
.vorm-vb{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.vorm-vb>div{background:var(--papier);border-radius:var(--r-s);padding:18px 20px}
.vorm-plek{display:inline-flex;align-items:center;gap:7px;font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--koraal-donker)}
.vorm-plek svg{width:16px;height:16px}
.vorm-vb p{margin:8px 0 0;color:var(--tekst)}
.situaties{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.sit{background:var(--papier);border:1px solid var(--lijn);border-radius:var(--r-l);overflow:hidden;box-shadow:0 10px 30px -24px rgba(14,47,79,.5)}
.sit summary{list-style:none;cursor:pointer;padding:22px 22px 18px;display:grid;grid-template-columns:auto 1fr;gap:6px 14px}
.sit summary::-webkit-details-marker{display:none}
.sit summary:focus-visible{outline:3px solid var(--koraal);outline-offset:-3px}
.sit-nr{grid-row:span 2;width:34px;height:34px;border-radius:50%;background:var(--salie-zacht);color:var(--petrol);display:grid;place-items:center;font-weight:700}
.sit-tekst{color:var(--tekst);font-size:1.02rem}
.sit-vraag{color:var(--tekst-zacht);font-size:.9rem}
.sit-vraag b{color:var(--koraal-donker);margin-left:4px}
.sit[open] .sit-vraag{display:none}
.sit-antwoord{margin:0 22px 22px 70px;border-radius:var(--r-s);padding:14px 16px}
.sit-antwoord.rood{background:#FDF3F2;border-left:4px solid #B3261E}
.sit-antwoord.rood b{color:#9A1F18}
.sit-antwoord.groen{background:var(--salie-zacht);border-left:4px solid var(--koraal)}
.sit-antwoord.groen b{color:var(--koraal-donker)}
.sit-antwoord p{margin:6px 0 0;color:var(--tekst);font-size:.95rem}
.verwant.twee-kaart{grid-template-columns:1fr 1fr}
@media (max-width:760px){.duo-cijfer,.vorm-vb,.situaties,.verwant.twee-kaart{grid-template-columns:1fr}.sit-antwoord{margin-left:22px}}

/* winkel */
.docs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.doc{display:flex;gap:14px;align-items:flex-start;background:var(--papier);border:1px solid var(--lijn);border-radius:var(--r-s);padding:18px}
.doc>i{flex:none;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--salie-zacht);color:var(--petrol)}
.doc>i svg{width:20px;height:20px}
.doc b{display:block;color:var(--petrol-diep)}
.doc span{display:block;margin-top:4px;color:var(--tekst-zacht);font-size:.93rem}
.stappen-lijst{list-style:none;counter-reset:s;margin:22px 0 0;padding:0;display:grid;gap:16px}
.stappen-lijst li{counter-increment:s;position:relative;padding-left:52px}
.stappen-lijst li::before{content:counter(s);position:absolute;left:0;top:0;width:36px;height:36px;border-radius:50%;background:var(--koraal);color:#fff;font-weight:700;display:grid;place-items:center}
.stappen-lijst b{display:block;color:var(--petrol-diep)}
.stappen-lijst span{color:var(--tekst-zacht)}
.vgl-pakket{min-width:520px}
.vgl-pakket td,.vgl-pakket thead th:not(:first-child){text-align:center}
.vgl-pakket .ja{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--koraal-zacht);color:var(--koraal-donker)}
.vgl-pakket .ja svg{width:16px;height:16px}
.vgl-pakket .nee{color:var(--tekst-zacht);font-size:.9rem}
.vgl-pakket .prijsrij>*{font-weight:700;font-size:1.15rem;color:var(--petrol-diep);background:var(--salie-zacht)}
.winkel-lijst{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.winkel-lijst a{display:flex;align-items:center;gap:14px;background:var(--papier);border:1px solid var(--lijn);border-radius:var(--r-s);padding:16px 18px;text-decoration:none;transition:border-color .25s,transform .25s}
.winkel-lijst a:hover{border-color:var(--koraal);transform:translateX(4px)}
.winkel-lijst b{color:var(--petrol-diep);flex:1}
.winkel-lijst span{color:var(--tekst-zacht);font-size:.92rem}
.winkel-lijst svg{width:18px;height:18px;color:var(--koraal-donker)}
@media (max-width:900px){.docs{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.docs{grid-template-columns:1fr}.winkel-lijst a{flex-wrap:wrap}}
.vergelijk{position:relative}

/* tekstpagina's */
.ph-klein{padding-bottom:clamp(36px,5vw,56px)}
.tp-kop{max-width:760px;padding-top:clamp(24px,4vw,44px)}
.tp-datum{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-size:.9rem;color:var(--tekst-zacht)}
.tp-datum svg{width:16px;height:16px}
.tp-grid{display:grid;grid-template-columns:260px 1fr;gap:clamp(32px,5vw,72px);align-items:start}
.tp-inhoud{position:sticky;top:96px;background:var(--zand);border-radius:var(--r-l);padding:22px}
.tp-inhoud ol{margin:10px 0 0;padding-left:1.2em;display:grid;gap:8px;font-size:.95rem}
.tp-inhoud a{color:var(--petrol-diep);text-decoration:none}
.tp-inhoud a:hover{text-decoration:underline;color:var(--koraal-donker)}
.tp-tekst{max-width:720px}
.tp-deel{scroll-margin-top:96px;padding-bottom:28px;margin-bottom:28px;border-bottom:1px solid var(--lijn)}
.tp-deel:last-child{border-bottom:0;margin-bottom:0}
.tp-deel h2{font-size:clamp(1.3rem,2.2vw,1.6rem);color:var(--petrol-diep)}
.tp-deel p{margin:12px 0 0;color:var(--tekst);line-height:1.7}
@media (max-width:900px){.tp-grid{grid-template-columns:1fr}.tp-inhoud{position:static}}

/* kennisbank */
.kb-zoek{display:flex;align-items:center;gap:10px;margin-top:26px;max-width:520px;background:var(--papier);border:1.5px solid var(--lijn);border-radius:999px;padding:6px 8px 6px 18px;transition:border-color .2s,box-shadow .2s}
.kb-zoek:focus-within{border-color:var(--koraal);box-shadow:0 0 0 4px rgba(59,179,154,.18)}
.kb-zoek svg{width:20px;height:20px;color:var(--tekst-zacht);flex:none}
.kb-zoek input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:1rem;color:var(--tekst);padding:10px 4px;outline:none}
.kb-teller{margin-top:12px;font-size:.92rem;color:var(--tekst-zacht)}
.kb-nav{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:clamp(28px,4vw,44px)}
.kb-nav a{text-decoration:none;font-weight:600;font-size:.95rem;color:var(--petrol-diep);background:var(--papier);border:1px solid var(--lijn);border-radius:999px;padding:.55em 1.1em;transition:border-color .2s,background .2s}
.kb-nav a:hover{border-color:var(--koraal);background:var(--koraal-zacht)}
.kb-cat{scroll-margin-top:96px;padding-top:0;padding-bottom:clamp(28px,4vw,40px);margin-bottom:clamp(28px,4vw,40px);border-bottom:1px solid var(--lijn)}
.kb-cat:last-of-type{border-bottom:0}
.kb-cat-kop{display:flex;align-items:center;gap:20px;margin-bottom:22px}
.kb-cat-foto{flex:none;width:88px;height:88px;border-radius:50%;overflow:hidden;background:var(--zand-donker)}
.kb-cat-foto img{width:100%;height:100%;object-fit:cover}
.kb-cat-kop h2{font-size:clamp(1.35rem,2.4vw,1.75rem);color:var(--petrol-diep)}
.kb-cat-kop p{margin:6px 0 0;color:var(--tekst-zacht)}
.kb-lijst{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.kb-item>a,.kb-item>div{display:flex;flex-direction:column;gap:6px;height:100%;background:var(--papier);border:1px solid var(--lijn);border-radius:var(--r-s);padding:20px 22px;text-decoration:none;transition:border-color .25s,transform .25s,box-shadow .25s}
.kb-item>a:hover{border-color:var(--koraal);transform:translateY(-3px);box-shadow:0 14px 30px -18px rgba(10,36,64,.35)}
.kb-item b{color:var(--petrol-diep);font-size:1.05rem;line-height:1.3}
.kb-item span{color:var(--tekst-zacht);font-size:.94rem;line-height:1.5}
.kb-item em{margin-top:auto;padding-top:8px;font-style:normal;font-weight:600;font-size:.92rem;color:var(--koraal-donker);display:inline-flex;align-items:center;gap:6px}
.kb-item em svg{width:16px;height:16px}
.kb-later>div{background:transparent;border-style:dashed}
.kb-later b{color:var(--tekst)}
.kb-later em{color:var(--tekst-zacht);font-weight:500}
.kb-leeg{padding:24px;background:var(--papier);border-radius:var(--r-l);color:var(--tekst)}
.kb-leeg a{color:var(--koraal-donker);font-weight:600}
@media (max-width:600px){.kb-cat-kop{gap:14px}.kb-cat-foto{width:64px;height:64px}}

/* kennisbank artikel */
.ka-kop{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(28px,5vw,64px);align-items:center;padding-top:clamp(16px,3vw,32px)}
.ka-kop h1{font-size:clamp(2rem,4.4vw,3.2rem);color:var(--petrol-diep)}
.ka-foto{margin:0;aspect-ratio:1;max-width:380px;justify-self:end;width:100%}
.ka-foto img{width:100%;height:100%;object-fit:cover}
.ka-kort{background:var(--salie-zacht);border-radius:var(--r-l);padding:24px 26px;margin-bottom:36px}
.ka-kort ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ka-kort li{display:flex;gap:12px;align-items:flex-start;line-height:1.55}
.ka-kort svg{flex:none;width:20px;height:20px;margin-top:3px;color:var(--koraal-donker)}
.ka-deel{scroll-margin-top:96px;padding-bottom:30px;margin-bottom:30px;border-bottom:1px solid var(--lijn)}
.ka-deel:last-of-type{border-bottom:0}
.ka-deel h2{font-size:clamp(1.35rem,2.3vw,1.7rem);color:var(--petrol-diep)}
.ka-deel p{margin:14px 0 0;line-height:1.75}
.ka-deel a{color:var(--koraal-donker);font-weight:600}
.ka-deel .vergelijk{margin-top:18px}
.ka-lijst{margin:14px 0 0;padding-left:1.2em;display:grid;gap:8px;line-height:1.6}
.ka-lijst li::marker{color:var(--koraal-donker)}
.ka-taken{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ka-taken li{background:var(--zand);border-radius:var(--r-s);padding:16px 18px;display:flex;flex-direction:column;gap:4px}
.ka-taken b{color:var(--petrol-diep)}
.ka-taken span{color:var(--tekst-zacht);font-size:.95rem;line-height:1.55}
.ka-tijdlijn{list-style:none;margin:20px 0 0;padding:0 0 0 26px;position:relative;display:grid;gap:18px}
.ka-tijdlijn::before{content:"";position:absolute;left:7px;top:8px;bottom:8px;width:2px;background:var(--lijn)}
.ka-tijdlijn li{position:relative;display:flex;flex-direction:column;gap:2px}
.ka-tijdlijn li::before{content:"";position:absolute;left:-26px;top:5px;width:16px;height:16px;border-radius:50%;background:var(--papier);border:3px solid var(--salie,#9BBFB1)}
.ka-tijdlijn li.nu::before{background:var(--koraal);border-color:var(--koraal-donker)}
.ka-t-datum{font-size:.8rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--koraal-donker)}
.ka-tijdlijn b{color:var(--petrol-diep)}
.ka-tijdlijn li>span:last-child{color:var(--tekst-zacht);font-size:.95rem}
.ka-bronnen{margin-top:36px;padding-top:22px;border-top:1px solid var(--lijn);font-size:.92rem}
.ka-bronnen ul{margin:0;padding-left:1.2em;display:grid;gap:6px}
.ka-bronnen a{color:var(--tekst-zacht)}
.ka-bronnen a:hover{color:var(--koraal-donker)}
.ka-verder{max-width:760px}
@media (max-width:900px){.ka-kop{grid-template-columns:1fr}.ka-foto{justify-self:start;max-width:240px}}
@media (max-width:600px){.ka-taken{grid-template-columns:1fr}}
.kb-nav[hidden],.kb-cat[hidden],.kb-item[hidden],.kb-leeg[hidden]{display:none}

/* zelftest werkgever */
.zt-start{display:grid;grid-template-columns:220px 1fr;gap:clamp(20px,4vw,40px);align-items:center}
.zt-foto{aspect-ratio:1;margin:0}
.zt-foto img{width:100%;height:100%;object-fit:cover}
.zt-start p{margin:12px 0 0;color:var(--tekst-zacht);max-width:52ch}
.knop.zt-knop{margin-top:22px;display:inline-flex;flex-direction:row;align-items:center;gap:10px;padding:.9em 1.5em;border:0;border-radius:999px;background:var(--koraal);color:var(--petrol-diep);overflow:visible;font-weight:600;font-size:1rem}
.knop.zt-knop svg{width:18px;height:18px}
.knop.zt-knop:hover{transform:translateY(-2px);border:0}
.zt-tabel td a{color:var(--koraal-donker);font-weight:600}
.zt-tabel .ck-label{white-space:nowrap}
@media (max-width:640px){.zt-start{grid-template-columns:1fr}.zt-foto{max-width:160px}}

/* advies */
.adv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.adv-kaart{background:var(--zand);border-radius:var(--r-l);padding:clamp(22px,3vw,30px);display:flex;flex-direction:column}
.adv-kaart h3{font-size:1.4rem;color:var(--petrol-diep)}
.adv-kaart>p:not(.oog):not(.adv-prijs){margin:12px 0 0;color:var(--tekst-zacht);line-height:1.65}
.adv-krijg{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:8px}
.adv-krijg li{display:flex;gap:10px;align-items:flex-start;font-size:.95rem}
.adv-krijg svg{flex:none;width:18px;height:18px;margin-top:3px;color:var(--koraal-donker)}
.adv-prijs{margin:auto 0 0;padding-top:22px;display:flex;flex-direction:column;gap:2px;border-top:1px solid var(--lijn);margin-top:22px}
.adv-prijs b{color:var(--petrol-diep);font-size:1.1rem}
.adv-prijs span{font-size:.9rem;color:var(--tekst-zacht)}
.adv-kaart .knop{margin-top:18px;align-self:flex-start}
.adv-noot{margin-top:28px;color:var(--tekst-zacht)}
.adv-noot a{color:var(--koraal-donker);font-weight:600}
@media (max-width:900px){.adv-grid{grid-template-columns:1fr}}
@media (max-width:640px){
.zt-tabel table,.zt-tabel tbody,.zt-tabel tr,.zt-tabel th,.zt-tabel td{display:block;width:auto;min-width:0}
.zt-tabel table{min-width:0}
.zt-tabel thead{display:none}
.zt-tabel tr{padding:16px 18px;border-bottom:1px solid var(--lijn)}
.zt-tabel tbody th,.zt-tabel td{padding:0;border:0;background:none}
.zt-tabel tbody th{font-size:1.05rem;display:flex;justify-content:space-between;gap:10px}
.zt-tabel td:nth-child(2){margin-top:6px}
.zt-tabel td:nth-child(3){margin-top:8px}
.zt-tabel td:nth-child(4){margin-top:6px;font-size:.92rem}
}

/* kennisbank cijfers */
.ka-cijfers{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.ka-cijfers li{background:var(--zand);border-radius:var(--r-s);padding:16px 18px;display:flex;flex-direction:column;gap:6px}
.ka-cijfers b{font-size:clamp(1.8rem,3vw,2.2rem);line-height:1;color:var(--petrol-diep)}
.ka-cijfers li:first-child{background:var(--koraal-zacht)}
.ka-cijfers span{font-size:.92rem;color:var(--tekst-zacht);line-height:1.45}
@media (max-width:640px){.ka-cijfers{grid-template-columns:1fr 1fr}}
@media (max-width:640px){
.ka .vergelijk{overflow:visible}
.ka .vergelijk table,.ka .vergelijk tbody,.ka .vergelijk tr,.ka .vergelijk th,.ka .vergelijk td{display:block;width:auto;min-width:0}
.ka .vergelijk table{min-width:0}
.ka .vergelijk thead{display:none}
.ka .vergelijk tr{padding:16px 18px;border-bottom:1px solid var(--lijn)}
.ka .vergelijk tr:last-child{border-bottom:0}
.ka .vergelijk tbody th,.ka .vergelijk td{padding:0;border:0;background:none}
.ka .vergelijk tbody th{font-size:1.05rem}
.ka .vergelijk td{margin-top:8px}
.ka .vergelijk td[data-label]::before{content:attr(data-label);display:block;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--koraal-donker);margin-bottom:2px}
}
.bundel:not(.licht) .prijs b{color:var(--op-donker)}

/* bedrijfsgegevens contact */
.bedrijf{margin-top:clamp(40px,6vw,64px);padding-top:28px;border-top:1px solid var(--lijn)}
.bedrijf h2.oog{font-size:.8rem}
.bedrijf dl{margin:0;display:grid;grid-template-columns:repeat(5,auto);gap:16px 40px;justify-content:start}
.bedrijf dt{font-size:.8rem;font-weight:600;color:var(--tekst-zacht);text-transform:uppercase;letter-spacing:.08em}
.bedrijf dd{margin:4px 0 0;color:var(--petrol-diep);line-height:1.5}
.bedrijf a{color:var(--koraal-donker);font-weight:600}
@media (max-width:900px){.bedrijf dl{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.bedrijf dl{grid-template-columns:1fr}}

/* veelgestelde vragen */
.vv-lijst{display:grid;gap:clamp(32px,5vw,48px);max-width:880px}
.vv-groep{scroll-margin-top:96px}
.vv-groep h2{font-size:clamp(1.35rem,2.4vw,1.75rem);color:var(--petrol-diep);margin-bottom:14px}
.vv-groep .faq{margin:0}
.voet .voet-over{margin-top:18px;display:flex;flex-wrap:wrap;gap:8px 20px}

/* ============ Over VVSW, nieuwe vormgeving ============ */
.ov-held{position:relative;overflow:hidden;background:radial-gradient(120% 90% at 85% 10%,#1B5C8A 0%,#0E2F4F 45%,#0A2440 100%);color:var(--op-donker);padding:clamp(28px,4vw,48px) 0 clamp(90px,11vw,150px)}
.ov-held .kruimel a,.ov-held .kruimel span{color:var(--op-donker-zacht)}
.ov-held .kruimel [aria-current]{color:#fff}
.ov-raster{position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.09) 1.2px,transparent 1.2px);background-size:26px 26px;mask-image:linear-gradient(180deg,#000 0%,transparent 85%);-webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 85%);pointer-events:none}
.ov-blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;pointer-events:none;animation:ovZweef 18s ease-in-out infinite}
.ov-blob.b1{width:420px;height:420px;background:#3BB39A;left:-120px;top:40%;animation-duration:22s}
.ov-blob.b2{width:360px;height:360px;background:#8FC1E3;right:10%;top:-120px;opacity:.35}
.ov-blob.b3{width:260px;height:260px;background:#17735F;right:-60px;bottom:-60px;animation-duration:15s;animation-delay:-6s}
@keyframes ovZweef{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(40px,-30px) scale(1.08)}66%{transform:translate(-30px,25px) scale(.95)}}
.ov-held-grid{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,5vw,72px);align-items:center;margin-top:clamp(20px,3vw,36px)}
.ov-held .oog{color:#7DD8C3}
.ov-held h1{font-size:clamp(2.4rem,5.6vw,4.4rem);line-height:1.02;letter-spacing:-.02em;color:#fff}
.ov-held h1 .regel{display:block;overflow:hidden;padding-bottom:.06em}
.ov-held h1 .regel>span{display:inline-block;transform:translateY(105%);animation:ovOmhoog .9s cubic-bezier(.2,.8,.2,1) forwards}
.ov-held h1 .regel:nth-child(2)>span{animation-delay:.12s}
.ov-held h1 .regel:nth-child(3)>span{animation-delay:.24s}
.ov-held h1 em{font-style:normal;background:linear-gradient(90deg,#3BB39A,#8FC1E3,#3BB39A);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:ovOmhoog .9s cubic-bezier(.2,.8,.2,1) .24s forwards,ovGlans 6s linear 1.2s infinite}
@keyframes ovOmhoog{to{transform:none}}
@keyframes ovGlans{to{background-position:-200% 0}}
.ov-held .lead{color:var(--op-donker-zacht);max-width:54ch;opacity:0;animation:ovIn .8s ease .5s forwards}
@keyframes ovIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.ov-chips{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 0;padding:0;list-style:none}
.ov-chips li{display:inline-flex;align-items:center;gap:8px;padding:.5em 1em;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(6px);font-weight:500;font-size:.95rem;opacity:0;animation:ovIn .6s ease forwards}
.ov-chips li:nth-child(1){animation-delay:.7s}.ov-chips li:nth-child(2){animation-delay:.82s}.ov-chips li:nth-child(3){animation-delay:.94s}
.ov-chips svg{width:17px;height:17px;color:#7DD8C3}
/* schild met ronddraaiende foto's */
.ov-embleem{position:relative;width:min(100%,420px);aspect-ratio:1;justify-self:center}
.ov-baan{position:absolute;inset:6%;border-radius:50%;border:1.5px dashed rgba(143,193,227,.35);animation:ovDraai 40s linear infinite}
.ov-baan.twee{inset:20%;border-color:rgba(59,179,154,.35);animation-duration:28s;animation-direction:reverse}
@keyframes ovDraai{to{transform:rotate(360deg)}}
.ov-planeet{position:absolute;width:24%;aspect-ratio:1;border-radius:50%;overflow:hidden;border:4px solid #0E2F4F;box-shadow:0 12px 30px -8px rgba(0,0,0,.5);animation:ovTegen 40s linear infinite}
.ov-planeet img{width:100%;height:100%;object-fit:cover}
.ov-planeet.p1{top:-6%;left:38%}
.ov-planeet.p2{bottom:4%;left:-2%}
.ov-planeet.p3{bottom:10%;right:-4%}
@keyframes ovTegen{to{transform:rotate(-360deg)}}
.ov-schild{position:absolute;inset:27%;display:grid;place-items:center;filter:drop-shadow(0 20px 40px rgba(0,0,0,.35))}
.ov-schild svg{width:100%;height:100%;overflow:visible}
.ov-schild .rand{fill:rgba(27,92,138,.55);stroke:#8FC1E3;stroke-width:2.5;stroke-dasharray:260;stroke-dashoffset:260;animation:ovTeken 1.6s ease .3s forwards}
.ov-schild .arm{fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:80;animation:ovTeken 1s ease 1.3s forwards}
.ov-schild .hart{fill:#3BB39A;transform-box:fill-box;transform-origin:center;transform:scale(0);animation:ovPlop .6s cubic-bezier(.3,1.6,.5,1) 2s forwards,ovKlop 2.4s ease-in-out 2.8s infinite}
@keyframes ovTeken{to{stroke-dashoffset:0}}
@keyframes ovPlop{to{transform:scale(1)}}
@keyframes ovKlop{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}
.ov-golf{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:clamp(50px,7vw,110px);display:block}
/* kleurvlakken */
.ov-tint{background:linear-gradient(180deg,#E3EEF7 0%,#F3F8F7 100%)}
.ov-groen{background:#DDF1EB}
.ov-nacht{background:#0E2F4F;color:var(--op-donker)}
.ov-nacht h2{color:#fff}.ov-nacht .oog{color:#7DD8C3}.ov-nacht .lead{color:var(--op-donker-zacht)}
/* 100 poppetjes */
.ov-waarom-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(28px,5vw,64px);align-items:center}
.ov-wissel{display:inline-flex;padding:5px;background:#fff;border-radius:999px;box-shadow:var(--schaduw);gap:4px;margin-top:24px}
.ov-wissel button{font:inherit;font-weight:600;border:0;background:none;padding:.6em 1.2em;border-radius:999px;cursor:pointer;color:var(--tekst-zacht);transition:background .3s,color .3s}
.ov-wissel button[aria-pressed=true]{background:var(--petrol-diep);color:#fff}
.ov-groot{display:flex;align-items:baseline;gap:6px;margin-top:26px}
.ov-groot b{font-size:clamp(4rem,9vw,6.5rem);line-height:.9;color:var(--petrol-diep);font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.ov-groot span{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:600;color:#17735F}
.ov-uitleg{margin-top:10px;font-size:1.08rem;max-width:40ch;min-height:3.2em}
.ov-bron{margin-top:14px;font-size:.85rem;color:var(--tekst-zacht)}
.ov-bron a{color:inherit}
.ov-mensen{display:grid;grid-template-columns:repeat(10,1fr);gap:clamp(4px,1vw,10px);background:#fff;border-radius:var(--r-l);padding:clamp(18px,3vw,30px);box-shadow:var(--schaduw)}
.ov-mensen svg{width:100%;height:auto;color:#D9E4E6;transition:color .45s ease,transform .45s cubic-bezier(.3,1.6,.5,1)}
.ov-mensen svg.aan{color:#3BB39A;transform:translateY(-3px)}
.ov-mensen.werk svg.aan{color:#1B5C8A}
/* bento */
.ov-bento{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:minmax(170px,auto);gap:18px}
.ov-tegel{position:relative;overflow:hidden;border-radius:var(--r-l);padding:clamp(22px,3vw,32px);display:flex;flex-direction:column;justify-content:flex-end;text-decoration:none;color:inherit;transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s}
.ov-tegel:hover{transform:translateY(-6px);box-shadow:0 26px 50px -24px rgba(14,47,79,.45)}
.ov-tegel h3{font-size:clamp(1.25rem,2vw,1.55rem);line-height:1.15}
.ov-tegel p{margin:8px 0 0;line-height:1.55}
.ov-tegel .pijl{position:absolute;top:22px;right:22px;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.14);transition:transform .35s}
.ov-tegel:hover .pijl{transform:rotate(-45deg)}
.ov-tegel .pijl svg{width:18px;height:18px}
.ov-t1{grid-column:span 3;grid-row:span 2;background:linear-gradient(160deg,#1B5C8A,#0E2F4F);color:#fff}
.ov-t1 p{color:var(--op-donker-zacht)}
.ov-t2{grid-column:span 3;background:#3BB39A;color:#0E2F4F}
.ov-t2 .pijl{background:rgba(14,47,79,.12)}
.ov-t3{grid-column:span 2;background:#fff}
.ov-t3 .pijl,.ov-t4 .pijl{background:#E3EEF7;color:#1B5C8A}
.ov-t4{grid-column:span 1;background:#8FC1E3;color:#0E2F4F}
.ov-t3.ov-t5{grid-column:span 3}
.ov-t4 .pijl{display:none}
.ov-t4{justify-content:center;align-items:center;text-align:center}
.ov-t4 b{font-size:clamp(2.6rem,4vw,3.4rem);line-height:1}
.ov-t4 span{font-weight:600;font-size:.9rem}
.ov-t1 .ov-hulpcirkel{position:absolute;right:-60px;top:-60px;width:260px;height:260px;border-radius:50%;border:2px solid rgba(143,193,227,.25)}
.ov-t1 .ov-hulpcirkel::after{content:"";position:absolute;inset:40px;border-radius:50%;border:2px solid rgba(59,179,154,.35);animation:ovPuls 3.2s ease-out infinite}
@keyframes ovPuls{0%{transform:scale(.7);opacity:1}100%{transform:scale(1.35);opacity:0}}
.ov-t1 .ov-t-foto{width:110px;height:110px;border-radius:50%;overflow:hidden;border:4px solid rgba(255,255,255,.2);margin-bottom:auto}
.ov-t1 .ov-t-foto img{width:100%;height:100%;object-fit:cover}
.ov-meter{width:120px;margin-bottom:auto}
.ov-meter .boog{fill:none;stroke:#E3EEF7;stroke-width:12;stroke-linecap:round}
.ov-meter .vul{fill:none;stroke:url(#ovVerloop);stroke-width:12;stroke-linecap:round;stroke-dasharray:157;stroke-dashoffset:157;transition:stroke-dashoffset 1.8s cubic-bezier(.2,.7,.2,1)}
.ov-meter .naald{transform-origin:60px 60px;transform:rotate(-90deg);transition:transform 1.8s cubic-bezier(.2,.7,.2,1)}
.in .ov-meter .vul{stroke-dashoffset:40}
.in .ov-meter .naald{transform:rotate(38deg)}
/* geldstroom */
.ov-stroom{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(18px,3vw,40px);align-items:center;margin-top:clamp(28px,4vw,44px)}
.ov-bronnen,.ov-doelen{display:grid;gap:14px}
.ov-blok{position:relative;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-s);padding:16px 18px;display:flex;gap:14px;align-items:center}
.ov-blok i{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:rgba(59,179,154,.18);color:#7DD8C3}
.ov-blok i svg{width:22px;height:22px}
.ov-blok b{display:block;color:#fff}
.ov-blok small{color:var(--op-donker-zacht);font-size:.9rem;line-height:1.4;display:block;margin-top:2px}
.ov-blok .bedrag{margin-left:auto;font-weight:700;color:#7DD8C3;white-space:nowrap}
.ov-bronnen .ov-blok::after,.ov-doelen .ov-blok::before{content:"";position:absolute;top:50%;width:clamp(18px,3vw,40px);height:2px;background:repeating-linear-gradient(90deg,#3BB39A 0 8px,transparent 8px 14px);background-size:28px 2px;animation:ovStroom 1s linear infinite}
.ov-bronnen .ov-blok::after{left:100%}
.ov-doelen .ov-blok::before{right:100%}
@keyframes ovStroom{to{background-position:28px 0}}
.ov-kern{width:clamp(120px,14vw,170px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;text-align:center;background:radial-gradient(circle at 30% 30%,#3BB39A,#17735F);color:#fff;font-weight:700;font-size:1.3rem;letter-spacing:.06em;box-shadow:0 0 0 12px rgba(59,179,154,.14),0 0 0 26px rgba(59,179,154,.07);animation:ovKlop 3s ease-in-out infinite}
.ov-kern small{display:block;font-weight:500;font-size:.8rem;letter-spacing:0;opacity:.85}
.ov-nul{display:flex;align-items:center;gap:18px;margin-top:clamp(28px,4vw,44px);padding:20px 24px;border-radius:var(--r-l);background:linear-gradient(90deg,rgba(59,179,154,.22),rgba(143,193,227,.12))}
.ov-nul b{font-size:clamp(2.4rem,5vw,3.4rem);line-height:1;color:#fff;white-space:nowrap}
.ov-nul span{color:var(--op-donker)}
/* tijdlijn */
.ov-lijn{position:relative;max-width:760px;margin:clamp(24px,4vw,40px) auto 0;padding-left:70px;--p:0}
.ov-lijn::before,.ov-lijn::after{content:"";position:absolute;left:26px;top:10px;bottom:10px;width:4px;border-radius:4px;background:#D9E4E6}
.ov-lijn::after{background:linear-gradient(180deg,#3BB39A,#1B5C8A);transform-origin:top;transform:scaleY(var(--p))}
.ov-stap{position:relative;padding:4px 0 38px}
.ov-stap:last-child{padding-bottom:0}
.ov-stap .bol{position:absolute;left:-70px;top:0;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:#fff;border:3px solid #D9E4E6;color:#1B5C8A;z-index:1;transition:background .4s,border-color .4s,color .4s,transform .5s cubic-bezier(.3,1.6,.5,1)}
.ov-stap .bol svg{width:24px;height:24px}
.ov-stap.aan .bol{background:#3BB39A;border-color:#3BB39A;color:#0E2F4F;transform:scale(1.08)}
.ov-stap h3{font-size:1.3rem;color:var(--petrol-diep)}
.ov-stap p{margin:6px 0 0;color:var(--tekst-zacht);line-height:1.6}
/* visitekaartje */
.ov-kaartje-wrap{perspective:1200px;display:grid;place-items:center;margin-top:clamp(24px,4vw,40px)}
.ov-kaartje{position:relative;width:min(100%,640px);border-radius:24px;padding:clamp(26px,4vw,40px);color:#fff;background:linear-gradient(135deg,#1B5C8A 0%,#0E2F4F 60%,#17735F 130%);box-shadow:0 40px 80px -30px rgba(14,47,79,.6);transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .2s ease-out;overflow:hidden}
.ov-kaartje::before{content:"";position:absolute;inset:-40%;background:radial-gradient(circle at var(--mx,30%) var(--my,20%),rgba(255,255,255,.18),transparent 40%);pointer-events:none}
.ov-kaartje .merk-k{display:flex;align-items:center;gap:12px;font-weight:700;font-size:1.5rem;letter-spacing:.04em}
.ov-kaartje .merk-k svg{width:42px;height:42px}
.ov-kaartje dl{display:grid;grid-template-columns:1fr 1fr;gap:18px 30px;margin:28px 0 0}
.ov-kaartje dt{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:#7DD8C3;font-weight:600}
.ov-kaartje dd{margin:4px 0 0;line-height:1.5}
.ov-kaartje a{color:#fff;font-weight:600}
@media (max-width:900px){
 .ov-held-grid,.ov-waarom-grid{grid-template-columns:1fr}
 .ov-embleem{width:min(78%,340px)}
 .ov-bento{grid-template-columns:1fr 1fr}
 .ov-t1,.ov-t2,.ov-t3.ov-t5{grid-column:span 2}.ov-t3{grid-column:span 1}.ov-t4{grid-column:span 1}
 .ov-stroom{grid-template-columns:1fr}
 .ov-kern{justify-self:center}
 .ov-bronnen .ov-blok::after,.ov-doelen .ov-blok::before{display:none}
}
@media (max-width:560px){.ov-bento{grid-template-columns:1fr}.ov-t1,.ov-t2,.ov-t3,.ov-t4,.ov-t3.ov-t5{grid-column:auto}.ov-t1{grid-row:auto;min-height:320px}.ov-kaartje dl{grid-template-columns:1fr}.ov-lijn{padding-left:60px}.ov-stap .bol{left:-60px;width:46px;height:46px}.ov-lijn::before,.ov-lijn::after{left:21px}}
@media (prefers-reduced-motion:reduce){
 .ov-blob,.ov-baan,.ov-planeet,.ov-kern,.ov-t1 .ov-hulpcirkel::after,.ov-bronnen .ov-blok::after,.ov-doelen .ov-blok::before{animation:none}
 .ov-held h1 .regel>span,.ov-held h1 em,.ov-held .lead,.ov-chips li{animation:none;transform:none;opacity:1}
 .ov-schild .rand,.ov-schild .arm{animation:none;stroke-dashoffset:0}.ov-schild .hart{animation:none;transform:none}
 .ov-kaartje{transform:none}
}
.ov-tegel h3{padding-right:48px}
/* ============ nieuwe vormgeving: gedeelde bouwstenen ============ */
.nw-tegels{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.nw-tegel{position:relative;overflow:hidden;border-radius:var(--r-l);padding:clamp(24px,3vw,34px);display:flex;flex-direction:column;text-decoration:none;color:inherit;background:#fff;box-shadow:var(--schaduw);transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s}
.nw-tegel:hover{transform:translateY(-6px);box-shadow:0 26px 50px -24px rgba(14,47,79,.45)}
.nw-tegel h3{font-size:clamp(1.25rem,2vw,1.5rem);line-height:1.2;margin-top:18px}
.nw-tegel p{margin:10px 0 0;line-height:1.6}
.nw-ico{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:#E3EEF7;color:#1B5C8A;flex:none;transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.nw-ico svg{width:24px;height:24px}
.nw-tegel:hover .nw-ico{transform:rotate(-8deg) scale(1.08)}
.nw-tegel .pijl{position:absolute;top:24px;right:24px;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#E3EEF7;color:#1B5C8A;transition:transform .35s}
.nw-tegel:hover .pijl{transform:rotate(-45deg)}
.nw-tegel .pijl svg{width:18px;height:18px}
.nw-tegel::after{content:"";position:absolute;right:-50px;bottom:-50px;width:160px;height:160px;border-radius:50%;background:currentColor;opacity:.05;transition:transform .6s}
.nw-tegel:hover::after{transform:scale(1.4)}
.nw-donker{background:linear-gradient(160deg,#1B5C8A,#0E2F4F);color:#fff}
.nw-donker p{color:var(--op-donker-zacht)}
.nw-donker .nw-ico{background:rgba(59,179,154,.2);color:#7DD8C3}
.nw-groen{background:#3BB39A;color:#0E2F4F}
.nw-groen .nw-ico{background:rgba(14,47,79,.12);color:#0E2F4F}
.nw-licht{background:#8FC1E3;color:#0E2F4F}
.nw-licht .nw-ico{background:rgba(255,255,255,.5);color:#0E2F4F}
/* cta onderaan */
.nw-cta{position:relative;overflow:hidden}
.nw-cta .ov-blob.b1{left:auto;right:-100px;top:-120px}
.nw-cta-in{position:relative;display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.nw-cta-knop{display:inline-flex;align-items:center;gap:10px}
.nw-cta-knop svg{width:18px;height:18px}
/* zoeken in de kop */
.nw-zoek{display:flex;align-items:center;gap:12px;margin-top:28px;max-width:560px;background:#fff;border-radius:999px;padding:8px 10px 8px 22px;box-shadow:0 18px 40px -18px rgba(0,0,0,.5);opacity:0;animation:ovIn .7s ease .7s forwards}
.nw-zoek svg{width:22px;height:22px;color:#1B5C8A;flex:none}
.nw-zoek input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:1.05rem;color:var(--tekst);padding:12px 4px;outline:none}
.nw-zoek:focus-within{box-shadow:0 0 0 4px rgba(59,179,154,.5),0 18px 40px -18px rgba(0,0,0,.5)}
.nw-zoek-uit{margin-top:10px;color:#7DD8C3;min-height:1.4em;font-weight:500}
/* zwevende vraagbellen */
.nw-bellen{position:relative;width:min(100%,420px);aspect-ratio:1;justify-self:center}
.nw-vraagteken{position:absolute;inset:28%;border-radius:50%;display:grid;place-items:center;font-size:clamp(5rem,10vw,8rem);font-weight:700;color:#0E2F4F;background:radial-gradient(circle at 30% 30%,#7DD8C3,#3BB39A);box-shadow:0 0 0 14px rgba(59,179,154,.15),0 0 0 30px rgba(59,179,154,.07);animation:ovKlop 3s ease-in-out infinite}
.nw-bel{position:absolute;padding:.55em 1em;border-radius:18px 18px 18px 4px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(6px);color:#fff;font-weight:500;font-size:.92rem;white-space:nowrap;z-index:2;opacity:0;animation:ovIn .6s ease forwards,nwDobber 6s ease-in-out infinite}
.nw-bel.b1{top:4%;left:4%;animation-delay:.6s,1.2s}
.nw-bel.b2{top:12%;right:0;animation-delay:.8s,1.6s;border-radius:18px 18px 4px 18px}
.nw-bel.b3{top:22%;left:-8%;animation-delay:1s,2s}
.nw-bel.b4{top:72%;right:-6%;animation-delay:1.2s,2.4s;border-radius:18px 18px 4px 18px}
.nw-bel.b5{bottom:10%;left:6%;animation-delay:1.4s,2.8s}
.nw-bel.b6{bottom:2%;right:10%;animation-delay:1.6s,3.2s;border-radius:18px 18px 4px 18px}
@keyframes nwDobber{0%,100%{translate:0 0}50%{translate:0 -10px}}
/* onderwerpkaarten */
.nw-onderwerpen{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.nw-onderwerp{display:flex;align-items:center;gap:16px;padding:20px 22px;border-radius:var(--r-l);background:#fff;text-decoration:none;color:var(--petrol-diep);box-shadow:var(--schaduw);border-left:6px solid var(--k,#3BB39A);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.nw-onderwerp:hover{transform:translateY(-4px) rotate(-.5deg)}
.nw-onderwerp b{display:block;font-size:1.1rem}
.nw-onderwerp small{display:block;color:var(--tekst-zacht);margin-left:auto;white-space:nowrap}
.nw-onderwerp .nw-ico{background:color-mix(in srgb,var(--k) 18%,#fff);color:var(--k)}
.nw-k1{--k:#3BB39A}.nw-k2{--k:#1B5C8A}.nw-k3{--k:#17735F}.nw-k4{--k:#5B8FB9}.nw-k5{--k:#0E2F4F}.nw-k6{--k:#2E9C84}
/* vraaggroepen */
.nw-vv{display:grid;gap:26px;max-width:900px}
.nw-groep{scroll-margin-top:96px;background:#F3F8F7;border-radius:var(--r-l);padding:clamp(20px,3vw,32px);border-top:6px solid var(--k)}
.nw-groep-kop{display:flex;align-items:center;gap:14px;margin-bottom:6px}
.nw-groep-kop h2{font-size:clamp(1.3rem,2.4vw,1.7rem);color:var(--petrol-diep)}
.nw-groep .nw-ico{background:var(--k);color:#fff}
.nw-groep .faq{border-top:0}
.nw-groep .faq details{border-bottom:1px solid var(--lijn)}
.nw-groep .faq details:last-child{border-bottom:0}
.nw-leeg{padding:24px;border-radius:var(--r-l);background:#DDF1EB}
/* document dat bijgewerkt wordt */
.nw-doc-wrap{position:relative;width:min(100%,400px);aspect-ratio:1;justify-self:center;display:grid;place-items:center}
.nw-doc{position:relative;width:68%;aspect-ratio:.78;background:#fff;border-radius:18px;padding:22px;box-shadow:0 30px 60px -20px rgba(0,0,0,.5);display:flex;flex-direction:column;gap:12px;animation:nwKantel 8s ease-in-out infinite}
.nw-doc.achter{position:absolute;background:rgba(255,255,255,.18);box-shadow:none;transform:rotate(-8deg) translate(-18px,10px);animation:none}
@keyframes nwKantel{0%,100%{transform:rotate(2deg)}50%{transform:rotate(-2deg) translateY(-8px)}}
.nw-doc-kop{display:flex;gap:10px;align-items:center;color:var(--petrol-diep);margin-bottom:6px}
.nw-doc-kop b{display:block}
.nw-doc-ico{width:38px;height:38px;border-radius:10px;background:#E3EEF7;color:#1B5C8A;display:grid;place-items:center}
.nw-doc-ico svg{width:20px;height:20px}
.nw-versie{position:relative;display:block;height:1.2em;overflow:hidden;color:var(--tekst-zacht)}
.nw-versie span{display:block;animation:nwVersie 9s steps(1) infinite}
@keyframes nwVersie{0%{transform:translateY(0)}33%{transform:translateY(-100%)}66%{transform:translateY(-200%)}100%{transform:translateY(0)}}
.nw-regel{height:9px;border-radius:9px;background:#E3EEF7}
.nw-regel.r2{width:85%}.nw-regel.r4{width:70%}.nw-regel.r6{width:55%}
.nw-regel.nieuw{background:linear-gradient(90deg,#3BB39A 0%,#3BB39A 50%,#E3EEF7 50%);background-size:200% 100%;background-position:100% 0;animation:nwVul 3s ease-in-out infinite}
.nw-regel.r5{animation-delay:.6s}
@keyframes nwVul{0%,15%{background-position:100% 0}45%,80%{background-position:0 0}100%{background-position:100% 0}}
.nw-badge{position:absolute;right:-18px;bottom:22%;display:inline-flex;align-items:center;gap:6px;padding:.5em .9em;border-radius:999px;background:#3BB39A;color:#0E2F4F;font-weight:700;font-size:.9rem;box-shadow:0 12px 24px -10px rgba(0,0,0,.4);animation:nwPlop 3s ease-in-out infinite}
.nw-badge svg{width:16px;height:16px}
@keyframes nwPlop{0%,20%{transform:scale(0)}30%,85%{transform:scale(1)}100%{transform:scale(0)}}
.nw-ververs{position:absolute;top:6%;right:8%;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#7DD8C3;animation:ovDraai 4s linear infinite}
.nw-ververs svg{width:30px;height:30px}
.nw-prijs-bol{position:absolute;left:0;bottom:6%;width:104px;height:104px;border-radius:50%;display:grid;place-content:center;text-align:center;background:#8FC1E3;color:#0E2F4F;box-shadow:0 0 0 10px rgba(143,193,227,.15);animation:nwDobber 5s ease-in-out infinite}
.nw-prijs-bol b{font-size:1.5rem;line-height:1}
.nw-prijs-bol small{font-size:.8rem;font-weight:600}
/* update-aanleidingen */
.nw-triggers{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.nw-trigger{background:#fff;border-radius:var(--r-l);padding:24px;box-shadow:var(--schaduw);display:flex;flex-direction:column;gap:10px}
.nw-trigger h3{font-size:1.15rem;color:var(--petrol-diep);line-height:1.25}
.nw-trigger p{margin:0;color:var(--tekst-zacht);line-height:1.55;font-size:.95rem}
.nw-status{align-self:flex-start;font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.35em .8em;border-radius:999px;background:#E3EEF7;color:#1B5C8A}
.nw-status.live{background:#0E2F4F;color:#7DD8C3;position:relative;padding-left:1.8em}
.nw-status.live::before{content:"";position:absolute;left:.75em;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:#3BB39A;box-shadow:0 0 0 0 rgba(59,179,154,.7);animation:nwLive 1.6s ease-out infinite}
@keyframes nwLive{to{box-shadow:0 0 0 10px rgba(59,179,154,0)}}
/* pakketkaarten */
.nw-pakketten{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:10px}
.nw-pakket{position:relative;display:flex;flex-direction:column;gap:8px;padding:24px;border-radius:var(--r-l);text-decoration:none;color:var(--petrol-diep);background:#F3F8F7;border:2px dashed #C8D8DB;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.nw-pakket:hover{transform:translateY(-5px)}
.nw-pakket.in{background:linear-gradient(160deg,#1B5C8A,#0E2F4F);color:#fff;border:0}
.nw-pk-label{align-self:flex-start;font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.35em .8em;border-radius:999px;background:#fff;color:#1B5C8A}
.nw-pakket.in .nw-pk-label{background:#3BB39A;color:#0E2F4F}
.nw-pakket b{font-size:1.15rem;line-height:1.25}
.nw-pk-prijs{color:var(--tekst-zacht)}
.nw-pakket.in .nw-pk-prijs{color:var(--op-donker-zacht)}
.nw-pk-pijl{margin-top:auto;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:rgba(27,92,138,.1)}
.nw-pakket.in .nw-pk-pijl{background:rgba(255,255,255,.14)}
.nw-pk-pijl svg{width:16px;height:16px}
/* netwerk partners */
.nw-net{position:relative;width:min(100%,420px);aspect-ratio:1;justify-self:center}
.nw-net svg{width:100%;height:100%;overflow:visible}
.nw-lijnen path{fill:none;stroke:#3BB39A;stroke-width:2.5;stroke-dasharray:6 8;animation:nwLoop 1.2s linear infinite;opacity:.8}
.nw-lijnen path.uit{stroke:#8FC1E3;animation-duration:1.8s}
@keyframes nwLoop{to{stroke-dashoffset:-28}}
.nw-knoop.partner circle{fill:#1B5C8A;stroke:#7DD8C3;stroke-width:3;animation:nwBol 3s ease-in-out infinite}
.nw-knoop.partner circle:nth-child(2){animation-delay:.5s}.nw-knoop.partner circle:nth-child(3){animation-delay:1s}.nw-knoop.partner circle:nth-child(4){animation-delay:1.5s}.nw-knoop.partner circle:nth-child(5){animation-delay:2s}
.nw-knoop.klant circle{fill:#8FC1E3;opacity:.9}
@keyframes nwBol{0%,100%{fill:#1B5C8A}50%{fill:#17735F}}
.nw-kern{fill:#3BB39A;filter:drop-shadow(0 0 18px rgba(59,179,154,.6));transform-box:fill-box;transform-origin:center;animation:ovKlop 3s ease-in-out infinite}
.nw-net text{fill:#0E2F4F;font-weight:700;font-size:20px;letter-spacing:.06em;font-family:var(--font)}
.nw-net-label{position:absolute;padding:.35em .8em;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);font-size:.82rem;font-weight:600;color:#fff;backdrop-filter:blur(4px)}
.nw-net-label.l1{top:18%;left:-4%}.nw-net-label.l2{top:14%;right:-2%}.nw-net-label.l3{bottom:0;left:0}.nw-net-label.l4{bottom:2%;right:0}
/* duo nul + vinklijst */
.nw-duo{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(20px,4vw,48px);align-items:center}
.nw-nul{padding:clamp(24px,4vw,40px);border-radius:var(--r-l);background:linear-gradient(135deg,rgba(59,179,154,.3),rgba(143,193,227,.12));border:1px solid rgba(255,255,255,.14)}
.nw-nul b{display:block;font-size:clamp(4rem,9vw,6rem);line-height:1;color:#fff}
.nw-nul>span{display:block;margin-top:10px;color:var(--op-donker-zacht);font-size:1.1rem}
.nw-vinklijst{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.nw-vinklijst li{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border-radius:var(--r-s);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}
.nw-vinklijst svg{flex:none;width:26px;height:26px;padding:4px;border-radius:50%;background:#3BB39A;color:#0E2F4F}
.nw-vinklijst b{display:block;color:#fff}
.nw-vinklijst span{color:var(--op-donker-zacht)}
/* eisen */
.nw-eisen{list-style:none;margin:0 auto clamp(32px,5vw,56px);padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:12px;max-width:900px}
.nw-eisen li{display:inline-flex;align-items:center;gap:10px;padding:.8em 1.2em;border-radius:999px;background:#DDF1EB;color:#0E2F4F;font-weight:500}
.nw-eisen svg{width:20px;height:20px;color:#17735F}
/* chat */
.nw-chat{display:flex;flex-direction:column;gap:12px;width:min(100%,420px);justify-self:center;padding:22px;border-radius:28px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(8px)}
.nw-msg{max-width:85%;padding:.8em 1.1em;border-radius:20px;line-height:1.45;opacity:0;transform:translateY(12px) scale(.96);animation:nwBericht 16s ease infinite}
.nw-msg.klant{align-self:flex-start;background:#fff;color:var(--tekst);border-bottom-left-radius:6px}
.nw-msg.adv{align-self:flex-end;background:#3BB39A;color:#0E2F4F;border-bottom-right-radius:6px}
.nw-msg.m2{animation-delay:.1s}
.nw-chat .m1{animation-name:nwB1}.nw-chat .m2{animation-name:nwB2}.nw-chat .m3{animation-name:nwB3}.nw-chat .m4{animation-name:nwB4}
@keyframes nwB1{0%,2%{opacity:0;transform:translateY(12px) scale(.96)}6%,92%{opacity:1;transform:none}100%{opacity:0}}
@keyframes nwB2{0%,18%{opacity:0;transform:translateY(12px) scale(.96)}22%,92%{opacity:1;transform:none}100%{opacity:0}}
@keyframes nwB3{0%,36%{opacity:0;transform:translateY(12px) scale(.96)}40%,92%{opacity:1;transform:none}100%{opacity:0}}
@keyframes nwB4{0%,54%{opacity:0;transform:translateY(12px) scale(.96)}58%,92%{opacity:1;transform:none}100%{opacity:0}}
.nw-typen{align-self:flex-end;display:flex;gap:5px;padding:.8em 1em;border-radius:20px;background:rgba(59,179,154,.25)}
.nw-typen i{width:8px;height:8px;border-radius:50%;background:#7DD8C3;animation:nwTik 1.2s ease-in-out infinite}
.nw-typen i:nth-child(2){animation-delay:.15s}.nw-typen i:nth-child(3){animation-delay:.3s}
@keyframes nwTik{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(-5px);opacity:1}}
/* adviestegels */
.nw-adv .nw-sub{font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-top:18px;opacity:.8}
.nw-adv h3{margin-top:4px}
.nw-mini{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px}
.nw-mini li{display:flex;gap:8px;align-items:flex-start;font-size:.95rem}
.nw-mini svg{flex:none;width:18px;height:18px;margin-top:2px}
.nw-vast{margin-top:auto!important;padding-top:18px;font-size:.9rem}
.nw-adv .knop{margin-top:16px;align-self:flex-start}
.nw-form .formkaart{box-shadow:0 30px 60px -30px rgba(14,47,79,.45)}
@media (max-width:1000px){.nw-triggers,.nw-pakketten{grid-template-columns:1fr 1fr}}
@media (max-width:900px){.nw-tegels,.nw-onderwerpen{grid-template-columns:1fr 1fr}.nw-duo{grid-template-columns:1fr}.nw-bellen,.nw-doc-wrap,.nw-net{width:min(88%,340px)}}
@media (max-width:600px){.nw-tegels,.nw-onderwerpen,.nw-triggers,.nw-pakketten{grid-template-columns:1fr}.nw-bel{font-size:.8rem}.nw-bel.b3{left:0}.nw-bel.b4{right:0}}
@media (prefers-reduced-motion:reduce){
 .nw-zoek,.nw-bel{animation:none;opacity:1}.nw-vraagteken,.nw-doc,.nw-regel.nieuw,.nw-ververs,.nw-prijs-bol,.nw-lijnen path,.nw-knoop circle,.nw-kern,.nw-typen i,.nw-status.live::before,.nw-versie span{animation:none}
 .nw-badge{animation:none;transform:none}.nw-msg{animation:none;opacity:1;transform:none}
}
.nw-groep[hidden],.nw-groep details[hidden]{display:none}
/* ===== Kennisbank nieuwe stijl ===== */
.kc-vp{--kc:#1B5C8A;--kl:#8FC1E3;--kz:#E3EEF7}
.kc-werk{--kc:#17735F;--kl:#3BB39A;--kz:#DDF1EB}
.kc-vormen{--kc:#3F6F99;--kl:#A9CBE6;--kz:#E8F1F9}
.kc-sport{--kc:#2E9C84;--kl:#7DD8C3;--kz:#E2F5EF}
/* stapel kaarten in de kop */
.kb-stapel{position:relative;width:min(100%,460px);justify-self:center;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;padding:10px}
.kb-kaart{position:relative;min-height:150px;padding:18px 20px;border-radius:22px;background:linear-gradient(145deg,var(--kc),color-mix(in srgb,var(--kc) 70%,#0A2440));color:#fff;box-shadow:0 24px 50px -24px rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.14);display:flex;flex-direction:column;gap:4px;opacity:0;animation:ovIn .7s ease forwards,nwDobber 7s ease-in-out infinite}
.kb-kaart b{font-size:1.05rem;line-height:1.25;hyphens:auto}
.kb-kaart>span:last-child{color:rgba(255,255,255,.75);font-size:.9rem}
.kb-kaart-ico{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.16);margin-bottom:6px}
.kb-kaart-ico svg{width:20px;height:20px;color:var(--kl)}
.kb-kaart.kk1{animation-delay:.5s,0s;rotate:-4deg}
.kb-kaart.kk2{animation-delay:.7s,1.4s;rotate:3deg;align-items:flex-end;text-align:right}
.kb-kaart.kk3{animation-delay:.9s,2.8s;rotate:3deg;justify-content:flex-end}
.kb-kaart.kk4{animation-delay:1.1s,4.2s;rotate:-4deg;align-items:flex-end;text-align:right;justify-content:flex-end}
.kb-kern{position:absolute;left:50%;top:50%;translate:-50% -50%;width:26%;aspect-ratio:1;border-radius:50%;display:grid;place-content:center;text-align:center;background:radial-gradient(circle at 30% 30%,#7DD8C3,#3BB39A);color:#0E2F4F;box-shadow:0 0 0 10px rgba(59,179,154,.2),0 0 0 22px rgba(59,179,154,.08);z-index:2;animation:ovKlop 3.2s ease-in-out infinite}
.kb-kern b{font-size:clamp(2rem,4vw,2.8rem);line-height:1;font-weight:700}
.kb-kern span{font-weight:600;font-size:.8rem}
.ov-held .kb-teller{color:var(--op-donker-zacht);margin-top:12px;font-size:.95rem}
/* navigatiebalk */
.kb-navbalk{position:sticky;top:64px;z-index:20;background:rgba(255,255,255,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--lijn)}
.kb-nav{display:flex;flex-wrap:nowrap;gap:10px;overflow-x:auto;margin:0;padding:12px 0;scrollbar-width:none}
.kb-nav::-webkit-scrollbar{display:none}
.kb-nav a{flex:none;display:inline-flex;align-items:center;gap:8px;padding:.5em .6em .5em 1em;border-radius:999px;background:var(--kz);color:var(--kc);font-weight:600;text-decoration:none;transition:background .2s,color .2s,transform .2s}
.kb-nav a svg{width:17px;height:17px}
.kb-nav a i{font-style:normal;min-width:26px;height:26px;border-radius:999px;display:grid;place-items:center;background:var(--kc);color:#fff;font-size:.8rem}
.kb-nav a:hover,.kb-nav a.aan{background:var(--kc);color:#fff;transform:translateY(-1px)}
.kb-nav a:hover i,.kb-nav a.aan i{background:#fff;color:var(--kc)}
.kb-nav[hidden]{display:none}
/* categorieen */
.kb-cat{scroll-margin-top:130px}
.kb-cat[hidden]{display:none}
.kb-cat-kop{display:flex;gap:20px;align-items:center;margin-bottom:28px}
.kb-cat-kop h2{margin:2px 0 4px}
.kb-cat-kop p{margin:0;color:var(--tekst-zacht)}
.kb-cat-kop .oog{color:var(--kc)}
.kb-cat-ico{flex:none;width:72px;height:72px;border-radius:24px;display:grid;place-items:center;background:linear-gradient(145deg,var(--kl),var(--kc));box-shadow:0 18px 30px -16px var(--kc);rotate:-6deg}
.kb-cat-ico svg{width:34px;height:34px;color:#fff}
.kb-lijst{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}
.kb-item[hidden]{display:none}
.kb-item a{position:relative;overflow:hidden;height:100%;display:flex;flex-direction:column;gap:8px;padding:24px 24px 20px;border-radius:var(--r-l);background:#fff;text-decoration:none;color:var(--tekst);box-shadow:var(--schaduw);border-top:5px solid var(--kl);transition:transform .25s ease,box-shadow .25s ease}
.kb-item a::after{content:"";position:absolute;right:-50px;bottom:-50px;width:130px;height:130px;border-radius:50%;background:var(--kz);transition:transform .4s ease;z-index:0}
.kb-item a>*{position:relative;z-index:1}
.kb-item a:hover{transform:translateY(-5px);box-shadow:0 26px 46px -22px rgba(14,47,79,.4)}
.kb-item a:hover::after{transform:scale(2.4)}
.kb-nr{font-size:2rem;font-weight:700;line-height:1;color:var(--kl)}
.kb-item b{font-size:1.15rem;line-height:1.3;color:var(--petrol-diep)}
.kb-item a>span:not(.kb-nr){color:var(--tekst-zacht);line-height:1.55}
.kb-item em{margin-top:auto;padding-top:10px;display:flex;align-items:center;gap:6px;font-style:normal;font-size:.9rem;font-weight:600;color:var(--kc)}
.kb-item em>svg{width:16px;height:16px}
.kb-pijl{margin-left:auto;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--kc);color:#fff;transition:transform .25s}
.kb-pijl svg{width:16px;height:16px}
.kb-item a:hover .kb-pijl{transform:translateX(4px)}
.kb-leeg{text-align:center;padding:40px 0;font-size:1.1rem}
/* artikelkop */
.ka-held .ov-blob.b1{background:var(--kl)}
.ka-held .ov-blob.b3{background:var(--kc)}
.ka-held .oog{color:var(--kl)}
.ka-catlink{color:inherit;text-decoration:none;border-bottom:1px dashed currentColor}
.ka-held h1{font-size:clamp(2.1rem,4.4vw,3.4rem)}
.ka-bol{position:relative;width:min(80%,320px);aspect-ratio:1;justify-self:center}
.ka-ring{position:absolute;inset:-8%;border-radius:50%;border:2px dashed rgba(255,255,255,.28);animation:kaDraai 40s linear infinite}
.ka-ring::before{content:"";position:absolute;top:8%;left:12%;width:14px;height:14px;border-radius:50%;background:var(--kl);box-shadow:0 0 16px var(--kl)}
.ka-bol-foto{position:absolute;inset:0;border-radius:50%;overflow:hidden;border:6px solid rgba(255,255,255,.14);box-shadow:0 30px 60px -30px rgba(0,0,0,.7)}
.ka-bol-foto img{width:100%;height:100%;object-fit:cover;display:block}
.ka-zweef{position:absolute;display:inline-flex;align-items:center;gap:8px;padding:.55em 1em;border-radius:999px;background:#fff;color:var(--petrol-diep);font-weight:600;font-size:.92rem;box-shadow:0 18px 30px -16px rgba(0,0,0,.55);opacity:0;animation:ovIn .6s ease forwards,nwDobber 6s ease-in-out infinite}
.ka-zweef svg{width:18px;height:18px;color:var(--kc)}
.ka-zweef.z1{left:-14%;top:12%;animation-delay:.8s,0s}
.ka-zweef.z2{right:-12%;bottom:16%;animation-delay:1s,1.6s}
.ka-zweef.z3{right:2%;top:0;width:56px;height:56px;padding:0;justify-content:center;background:linear-gradient(145deg,var(--kl),var(--kc));animation-delay:1.2s,3s}
.ka-zweef.z3 svg{color:#fff;width:26px;height:26px}
@keyframes kaDraai{to{rotate:360deg}}
/* leesbalk */
.ka-voortgang{position:fixed;left:0;right:0;top:0;height:4px;z-index:100;pointer-events:none}
.ka-voortgang span{display:block;height:100%;width:100%;transform-origin:0 50%;transform:scaleX(var(--p,0));background:linear-gradient(90deg,#8FC1E3,#3BB39A)}
/* inhoud en tekst */
.ka-inhoud{background:var(--kz);border:1px solid color-mix(in srgb,var(--kc) 14%,transparent)}
.ka-inhoud ol{list-style:none;padding:0;gap:4px}
.ka-inhoud li a{display:flex;gap:10px;align-items:baseline;padding:7px 10px;border-radius:12px;transition:background .2s,color .2s}
.ka-inhoud li a span{font-weight:700;font-size:.8rem;color:var(--kc);opacity:.7}
.ka-inhoud li a.aan{background:var(--kc);color:#fff;text-decoration:none}
.ka-inhoud li a.aan span{color:#fff;opacity:1}
.ka-terug{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-weight:600;color:var(--kc);text-decoration:none;font-size:.95rem}
.ka-terug svg{width:17px;height:17px}
.ka .ka-kort{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--kc),color-mix(in srgb,var(--kc) 60%,#0A2440));color:#fff;box-shadow:0 24px 40px -26px var(--kc)}
.ka .ka-kort::after{content:"";position:absolute;right:-60px;top:-60px;width:180px;height:180px;border-radius:50%;background:rgba(255,255,255,.08)}
.ka .ka-kort .oog{color:var(--kl)}
.ka .ka-kort svg{color:var(--kl)}
.ka-deel{scroll-margin-top:90px}
.ka-deel h2{display:flex;gap:14px;align-items:center}
.ka-nr{flex:none;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;font-size:1rem;font-weight:700;background:var(--kz);color:var(--kc);rotate:-4deg}
.ka .ka-taken li{background:var(--kz);border-left:4px solid var(--kl);transition:transform .2s}
.ka .ka-taken li:hover{transform:translateY(-3px)}
.ka .ka-tijdlijn::before{background:linear-gradient(var(--kl),var(--kc));transform-origin:top;transform:scaleY(var(--tl,1));transition:transform .2s linear}
.ka .ka-tijdlijn li::before{border-color:var(--kl)}
.ka .ka-tijdlijn li.nu::before{background:var(--kl);border-color:var(--kc);box-shadow:0 0 0 6px color-mix(in srgb,var(--kl) 30%,transparent)}
/* cijfers met balken */
.ka .ka-cijfers li{position:relative;overflow:hidden;background:#fff;border:1px solid var(--lijn);box-shadow:var(--schaduw)}
.ka .ka-cijfers b{color:var(--kc)}
.ka-balk{display:block;height:8px;border-radius:99px;background:var(--kz);margin-top:12px;overflow:hidden}
.ka-balk i{display:block;height:100%;width:var(--w);border-radius:inherit;background:linear-gradient(90deg,var(--kl),var(--kc));transform:scaleX(0);transform-origin:0 50%;transition:transform 1.4s cubic-bezier(.2,.8,.2,1)}
.ka-cijfers.in .ka-balk i{transform:scaleX(1)}
/* tabel */
.ka .vergelijk th{background:var(--kc);color:#fff}
/* cta */
.ka-cta{position:relative;overflow:hidden;margin-top:40px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:28px 30px;border-radius:var(--r-l);background:radial-gradient(120% 140% at 90% 0%,var(--kc),#0E2F4F 70%);color:#fff}
.ka-cta .ov-blob.b1{width:220px;height:220px;left:auto;right:-60px;top:-80px;background:var(--kl);opacity:.35}
.ka-cta>div{position:relative;display:flex;flex-direction:column;gap:4px;max-width:46ch}
.ka-cta b{font-size:1.25rem}
.ka-cta span{color:var(--op-donker-zacht)}
.ka-cta .knop{position:relative}
/* verder lezen */
.ka-verder2{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;position:relative}
.ka-verder2 a{height:100%;display:flex;flex-direction:column;gap:8px;padding:22px;border-radius:var(--r-l);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:#fff;text-decoration:none;transition:transform .25s,background .25s}
.ka-verder2 a:hover{transform:translateY(-5px);background:rgba(255,255,255,.12)}
.ka-verder2 b{font-size:1.1rem;line-height:1.3}
.ka-verder2 a>span:not(.kb-cat-mini){color:var(--op-donker-zacht);font-size:.95rem;line-height:1.5}
.kb-cat-mini{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--kl)}
.kb-cat-mini svg{width:15px;height:15px}
.ka-verder2 .kb-pijl{margin-top:auto;margin-left:0;background:var(--kl);color:#0E2F4F}
.ka-alle{position:relative;margin:32px 0 0;text-align:center}
@media (max-width:1000px){.ka-verder2{grid-template-columns:1fr 1fr}}
@media (max-width:900px){.kb-stapel{width:min(92%,360px)}.ka-bol{width:min(62%,260px);margin-top:10px}.kb-navbalk{top:56px}}
@media (max-width:600px){.ka-verder2{grid-template-columns:1fr}.kb-kaart{min-height:120px;padding:14px 14px}.kb-kaart b{font-size:.86rem;overflow-wrap:anywhere}.ka-zweef{font-size:.8rem}.ka-zweef.z1{left:-8%}.ka-zweef.z2{right:-6%}.kb-cat-ico{width:58px;height:58px}.ka-deel h2{align-items:flex-start}.ka-nr{width:38px;height:38px}}
@media (prefers-reduced-motion:reduce){.kb-kaart,.ka-zweef{animation:none;opacity:1}.kb-kern,.ka-ring{animation:none}.ka-balk i{transition:none;transform:none}.kb-item a,.kb-item a::after{transition:none}}
/* ===== Nieuwe stijl voor bestaande pagina's (main.ns) ===== */
.ns .ph{background:radial-gradient(120% 90% at 85% 10%,#1B5C8A 0%,#0E2F4F 45%,#0A2440 100%);color:var(--op-donker);padding-bottom:clamp(110px,12vw,160px)}
.ns .ph .vlek{display:none}
.ns .ph .kruimel a,.ns .ph .kruimel span{color:var(--op-donker-zacht)}
.ns .ph .kruimel [aria-current]{color:#fff}
.ns .ph .oog{color:#7DD8C3}
.ns .ph h1{color:#fff}
.ns .ph h1 .regel{display:block;overflow:hidden;padding-bottom:.06em}
.ns .ph h1 .regel>span{display:inline-block;transform:translateY(105%);animation:ovOmhoog .9s cubic-bezier(.2,.8,.2,1) forwards}
.ns .ph h1 em{font-style:normal;background:linear-gradient(90deg,#3BB39A,#8FC1E3,#3BB39A);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:ovGlans 6s linear 1.2s infinite}
.ns .ph .lead{color:var(--op-donker-zacht);opacity:0;animation:ovIn .8s ease .45s forwards}
.ns .ph .feiten li{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);color:#fff;backdrop-filter:blur(6px);opacity:0;animation:ovIn .6s ease forwards}
.ns .ph .feiten li:nth-child(1){animation-delay:.65s}.ns .ph .feiten li:nth-child(2){animation-delay:.77s}.ns .ph .feiten li:nth-child(3){animation-delay:.89s}.ns .ph .feiten li:nth-child(4){animation-delay:1s}
.ns .ph .feiten svg{color:#7DD8C3}
.ns .ph .tekstlink{color:#fff}
.ns .ph .prijsblok{opacity:0;animation:ovIn .7s ease 1s forwards}
.ns .ph .prijsblok,.ns .ph .prijsblok *:not(.knop){color:var(--op-donker)}
.ns .ph-grid{z-index:2}
.ns .ph .deel-a{background:#3BB39A!important;opacity:.35!important;filter:blur(2px);animation:ovZweef 14s ease-in-out infinite}
.ns .ph .foto-rond{box-shadow:0 30px 60px -28px rgba(0,0,0,.7);border:6px solid rgba(255,255,255,.12)}
.ns .ph .foto-dash,.ns .ph .ph-foto,.ns .ph .ph-beeld{opacity:0;animation:ovIn .9s ease .4s forwards}
.ns .ph .dash,.ns .ph .bewijs{box-shadow:0 24px 44px -20px rgba(0,0,0,.6)}
.ns .ph .ov-golf{z-index:1}
/* secties: afwisselend kleur */
.ns .sectie{position:relative;overflow:hidden}
.ns .sectie:not(.wit):not(.vragen):not(.ov-nacht):not(.probeer){background:linear-gradient(180deg,#E3EEF7 0%,#F3F8F7 100%)}
.ns .sectie.cijferblok{background:#DDF1EB!important}
.ns .sectie:not(.wit):not(.vragen):not(.ov-nacht):not(.probeer)::before{content:"";position:absolute;width:420px;height:420px;border-radius:50%;right:-160px;top:-160px;background:radial-gradient(circle,rgba(59,179,154,.22),transparent 70%);pointer-events:none}
.ns .sectie.wit::before{content:"";position:absolute;width:360px;height:360px;border-radius:50%;left:-180px;bottom:-160px;background:radial-gradient(circle,rgba(143,193,227,.25),transparent 70%);pointer-events:none}
.ns .sectie>.wrap{position:relative}
.ns .sectie-kop .oog,.ns .sectie .oog{letter-spacing:.14em}
/* kaarten */
.ns .vw,.ns .ck{border-top:5px solid #8FC1E3;transition:transform .25s ease,box-shadow .25s ease,border-color .25s}
.ns .vw:nth-child(3n+2),.ns .ck:nth-child(3n+2){border-top-color:#3BB39A}
.ns .vw:nth-child(3n),.ns .ck:nth-child(3n){border-top-color:#1B5C8A}
.ns .vw:hover,.ns .ck:hover{transform:translateY(-6px);box-shadow:0 26px 46px -22px rgba(14,47,79,.4)}
/* donkere afsluiter */
.ns-cta{position:relative;overflow:hidden}
@media (max-width:900px){.ns .ph{padding-bottom:110px}}
@media (prefers-reduced-motion:reduce){.ns .ph h1 .regel>span,.ns .ph .lead,.ns .ph .feiten li,.ns .ph .prijsblok,.ns .ph .foto-dash,.ns .ph .ph-foto,.ns .ph .ph-beeld{animation:none;transform:none;opacity:1}.ns .ph h1 em,.ns .ph .deel-a{animation:none}.ns .vw,.ns .ck{transition:none}}
.ns .ns-nacht{background:radial-gradient(120% 120% at 90% 0%,#1B5C8A 0%,#0E2F4F 55%,#0A2440 100%)}
.ns .ns-nacht .ov-blob.b2{right:-120px;top:-140px;left:auto}
.ns .ns-nacht .sectie-kop h2,.ns .ns-nacht h2{color:#fff}
.ns .ns-nacht .sectie-kop p,.ns .ns-nacht>.wrap>p{color:var(--op-donker-zacht)}
.ns .ns-nacht .oog{color:#7DD8C3}
.ns .ns-nacht .tekstlink:not(.vw .tekstlink):not(.ck .tekstlink){color:#fff}
/* blok 4: speler, prijs en donkere secties */
.ns .ph .speler,.ns .ph .dash,.ns .ph .bewijs{color:var(--tekst)}
.ns .ph .klein,.ns .ph .prijs span{color:var(--op-donker-zacht)}
.ns .ph .prijs b{color:#fff}
.ns .ph .klein{opacity:0;animation:ovIn .7s ease 1.1s forwards}
.ns .ph .knop[aria-disabled="true"]{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.28);box-shadow:none}
.ns .sectie.probeer{background:radial-gradient(120% 120% at 10% 0%,#1B5C8A 0%,#0E2F4F 55%,#0A2440 100%)!important}
.ns .sectie.probeer::before{background:radial-gradient(circle,rgba(59,179,154,.3),transparent 70%)!important}
@media (prefers-reduced-motion:reduce){.ns .ph .klein{animation:none;opacity:1}}
/* 404 */
.nf-held{padding-bottom:clamp(60px,8vw,100px);min-height:70vh}
.nf-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding-top:clamp(40px,6vw,80px)}
.nf-held .held-knoppen{margin-top:26px;opacity:0;animation:ovIn .7s ease .8s forwards}
.nf-112{margin-top:18px;color:var(--op-donker-zacht)}.nf-112 b{color:#fff}
.nf-cijfer{display:flex;align-items:center;justify-content:center;gap:.05em;font-size:clamp(7rem,16vw,13rem);font-weight:700;line-height:1;color:#fff}
.nf-cijfer>span:not(.nf-nul){background:linear-gradient(180deg,#fff,#8FC1E3);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:0;animation:ovIn .8s ease .3s forwards}
.nf-cijfer>span:last-child{animation-delay:.55s}
.nf-nul{width:.78em;height:.78em;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle at 30% 30%,#7DD8C3,#3BB39A);box-shadow:0 0 0 14px rgba(59,179,154,.16),0 0 0 30px rgba(59,179,154,.07);animation:ovKlop 3s ease-in-out infinite}
.nf-nul svg{width:58%;height:58%}
.nf-tegels{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:clamp(40px,6vw,64px)}
.nf-tegel{position:relative;display:flex;flex-direction:column;gap:6px;padding:20px 22px 56px;border-radius:var(--r-l);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(6px);color:#fff;text-decoration:none;transition:transform .25s,background .25s;opacity:0;animation:ovIn .6s ease forwards}
.nf-tegel.k1{animation-delay:.9s}.nf-tegel.k2{animation-delay:1s}.nf-tegel.k3{animation-delay:1.1s}.nf-tegel.k4{animation-delay:1.2s}
.nf-tegel:hover{transform:translateY(-5px);background:rgba(255,255,255,.13)}
.nf-tegel b{font-size:1.1rem}.nf-tegel span{color:var(--op-donker-zacht);font-size:.93rem;line-height:1.5}
.nf-tegel i{position:absolute;left:22px;bottom:18px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#3BB39A;color:#0E2F4F}
.nf-tegel i svg{width:16px;height:16px}
@media (max-width:900px){.nf-grid{grid-template-columns:1fr}.nf-cijfer{order:-1;font-size:6rem;justify-content:flex-start}.nf-tegels{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.nf-tegels{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.nf-cijfer>span,.nf-tegel,.nf-held .held-knoppen{animation:none;opacity:1}.nf-nul{animation:none}}
/* rustige variant voor de hulppagina's: kleur, maar weinig beweging */
.ns.rustig .ph{background:linear-gradient(160deg,#1B5C8A 0%,#17735F 100%)}
.ns.rustig .ph .ov-blob{animation:none;opacity:.25}
.ns.rustig .ph .ov-raster{display:none}
.ns.rustig .ph h1 em{animation:none;background:none;-webkit-background-clip:border-box;background-clip:border-box;color:#BFF0E2}
.ns.rustig .ph h1 .regel>span{animation-duration:.6s}
.ns.rustig .ph .deel-a{animation:none}
.ns.rustig .sectie:not(.wit):not(.vragen)::before,.ns.rustig .sectie.wit::before{display:none}
.ns.rustig .vw:hover,.ns.rustig .ck:hover{transform:none}
/* juridische pagina's: kleine kop */
.ns .ph.ph-klein{padding-bottom:clamp(90px,10vw,130px)}
/* veelgestelde vragen in kennisbankartikelen */
.ka .ka-faq{border:1px solid var(--lijn);background:#fff;border-radius:var(--r-l);padding:4px clamp(16px,2.5vw,26px);box-shadow:var(--schaduw)}
.ka .ka-faq .plus{background:var(--kz);color:var(--kc)}
/* zoekfragment in de kennisbank */
.kb-fragment{display:block;font-size:.88rem;line-height:1.5;color:var(--tekst-zacht);background:var(--kz,#E3EEF7);border-radius:12px;padding:8px 10px;margin-top:4px}
.kb-fragment mark{background:#3BB39A;color:#0E2F4F;border-radius:4px;padding:0 3px;font-weight:600}
/* kennisbank: waar begin ik en over deze kennisbank */
.kb-routes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.kb-route{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:10px;padding:26px 24px 22px;border-radius:var(--r-l);background:#fff;border:1px solid var(--lijn);box-shadow:var(--schaduw);border-top:6px solid var(--kl)}
.kb-route.kr-rustig{--kc:#17735F;--kl:#7DD8C3;--kz:#E2F5EF}
.kb-route.kr-werk{--kc:#1B5C8A;--kl:#8FC1E3;--kz:#E3EEF7}
.kb-route.kr-sport{--kc:#2E9C84;--kl:#3BB39A;--kz:#DDF1EB}
.kb-route::after{content:"";position:absolute;right:-70px;top:-70px;width:180px;height:180px;border-radius:50%;background:var(--kz);z-index:0}
.kb-route>*{position:relative;z-index:1}
.kb-route-ico{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(145deg,var(--kl),var(--kc));color:#fff;rotate:-5deg;box-shadow:0 14px 24px -14px var(--kc)}
.kb-route-ico svg{width:26px;height:26px}
.kb-route h3{margin:6px 0 0;color:var(--petrol-diep);font-size:1.2rem}
.kb-route>p{margin:0;color:var(--tekst-zacht);line-height:1.55}
.kb-leesrij{list-style:none;margin:8px 0 4px;padding:0;display:grid;gap:8px;position:relative}
.kb-leesrij::before{content:"";position:absolute;left:17px;top:18px;bottom:18px;width:2px;background:linear-gradient(var(--kl),var(--kc));opacity:.5}
.kb-leesrij a{position:relative;display:flex;align-items:center;gap:12px;padding:8px 10px 8px 0;border-radius:14px;text-decoration:none;color:var(--tekst);transition:background .2s,transform .2s}
.kb-leesrij a:hover{background:var(--kz);transform:translateX(4px)}
.kb-stap{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#fff;border:2px solid var(--kl);color:var(--kc);font-weight:700}
.kb-leesrij b{display:block;font-size:.98rem;line-height:1.3;color:var(--petrol-diep)}
.kb-leesrij em{font-style:normal;font-size:.82rem;color:var(--tekst-zacht)}
.kb-route-link{margin-top:auto;padding-top:8px;display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--kc);text-decoration:none}
.kb-route-link svg{width:16px;height:16px;transition:transform .2s}
.kb-route-link:hover svg{transform:translateX(4px)}
.kb-over-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,64px);align-items:center}
.kb-over-grid p{color:var(--tekst-zacht);line-height:1.7;max-width:60ch}
.kb-telwerk{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.kb-telwerk li{padding:22px;border-radius:var(--r-l);background:#fff;box-shadow:var(--schaduw);display:flex;flex-direction:column;gap:4px;border-left:5px solid #3BB39A}
.kb-telwerk li:nth-child(2){border-left-color:#8FC1E3}.kb-telwerk li:nth-child(3){border-left-color:#1B5C8A}.kb-telwerk li:nth-child(4){border-left-color:#17735F}
.kb-telwerk b{font-size:clamp(2rem,4vw,2.8rem);line-height:1;color:var(--petrol-diep)}
.kb-telwerk span:not(.ov-tel){color:var(--tekst-zacht);font-weight:500}
@media (max-width:1000px){.kb-routes{grid-template-columns:1fr}.kb-over-grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.kb-leesrij a,.kb-route-link svg{transition:none}}
.kb-fragment[hidden]{display:none}
.kb-over-grid h2{margin-bottom:18px}
.kb-over-grid p+p{margin-top:14px}
/* ===== Symmetrie: vultegel voor een onvolledige laatste rij ===== */
.vul{display:flex;flex-direction:column;justify-content:center;gap:6px;position:relative;overflow:hidden;padding:22px 24px;border-radius:var(--r-l);background:linear-gradient(135deg,#0E2F4F 0%,#1B5C8A 100%);color:#fff;text-decoration:none;min-height:100%;box-shadow:0 20px 40px -24px rgba(14,47,79,.6);transition:transform .25s ease,box-shadow .25s ease;list-style:none}
.vul::before{content:"";position:absolute;right:-50px;top:-60px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(59,179,154,.45),transparent 70%);pointer-events:none}
.vul>*{position:relative}
.vul .vul-oog{font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#7DD8C3}
.vul b{font-size:1.12rem;line-height:1.3;color:#fff}
.vul span.vul-tekst{color:var(--op-donker-zacht);font-size:.95rem;line-height:1.5}
.vul .vul-knop{align-self:flex-start;margin-top:8px;display:inline-flex;align-items:center;gap:8px;padding:.55em 1.1em;border-radius:999px;background:#3BB39A;color:#0E2F4F;font-weight:600;font-size:.92rem}
.vul .vul-knop svg{width:16px;height:16px}
a.vul:hover{transform:translateY(-4px);box-shadow:0 28px 50px -24px rgba(14,47,79,.7)}
.vul.breed{flex-direction:row;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.vul.breed .vul-in{display:flex;flex-direction:column;gap:6px;max-width:52ch}
.vul.breed .vul-knop{margin-top:0;align-self:center}
.vul.zacht{background:linear-gradient(135deg,#DDF1EB,#E3EEF7);color:var(--tekst);box-shadow:none;border:1px dashed rgba(23,115,95,.35)}
.vul.zacht b{color:var(--petrol-diep)}.vul.zacht span.vul-tekst{color:var(--tekst-zacht)}.vul.zacht .vul-oog{color:var(--koraal-donker)}
.ka .ka-taken .vul{border-left:0}
@media (max-width:1000px){.keten.vijf{grid-template-columns:1fr}}
@media (max-width:900px) and (min-width:641px){.bedrijf dl>div:last-child:nth-child(odd){grid-column:1/-1}}
@media (prefers-reduced-motion:reduce){.vul{transition:none}}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.form-status.fout{background:#FDF3F2;color:#8C1D18;border-radius:12px;padding:12px 14px}
.form-status.fout a{color:inherit;font-weight:600}
.aanvraag .knop.bezig{opacity:.85;cursor:progress;display:inline-flex;align-items:center;gap:10px}
.aanvraag .knop.bezig::after{content:"";width:16px;height:16px;border-radius:50%;border:2.5px solid currentColor;border-right-color:transparent;animation:formdraai .8s linear infinite}
@keyframes formdraai{to{transform:rotate(360deg)}}
.bedankt{text-align:center;padding:clamp(20px,4vw,40px) 8px;outline:none;animation:bedanktIn .5s cubic-bezier(.2,.8,.2,1) both}
.bedankt-vink{display:inline-grid;place-items:center;width:84px;height:84px;border-radius:50%;background:var(--koraal-zacht);margin-bottom:18px}
.bedankt-vink svg{width:56px;height:56px;fill:none;stroke:var(--koraal-donker);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.bedankt-vink circle{stroke-dasharray:145;stroke-dashoffset:145;animation:vinkTeken .7s .1s ease-out forwards}
.bedankt-vink path{stroke-dasharray:40;stroke-dashoffset:40;animation:vinkTeken .45s .65s ease-out forwards}
.bedankt h3{font-size:clamp(1.3rem,2.4vw,1.6rem);color:var(--petrol-diep);margin:0 0 10px}
.bedankt p{margin:0 auto 10px;max-width:34em;color:var(--tekst)}
.bedankt p b{color:var(--petrol-diep);overflow-wrap:anywhere}
.bedankt .bedankt-klein{font-size:.93rem;color:var(--tekst-zacht)}
@keyframes vinkTeken{to{stroke-dashoffset:0}}
@keyframes bedanktIn{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.bedankt,.bedankt-vink circle,.bedankt-vink path{animation:none;stroke-dashoffset:0}.aanvraag .knop.bezig::after{animation:none}}