/* huis.css: het lichte herontwerp van home, aanbod, Op Eigen Koers, over en
   contact (oktober 2026). Werkt met de bestaande site.js. werkwijze.html en de
   andere pagina's houden site.css. Films blijven donker, ook op deze lichte
   pagina's: dat is beeld, geen vlak. */
/* Navy-vlakken zijn al donker: die houden in beide thema's de lichte tokens. */
:root,.nv,footer,.herovid,.hapauze,.cvlak,.cmerk,.cmerkop.donker,.tegenover,.cur{
  --bk:#000;--wh:#fff;--navy:#1e1d3e;
  --p100:oklch(96% 0.02 328);--p200:oklch(90% 0.045 328);--p600:oklch(58% 0.11 328);--p700:oklch(46% 0.1 328);
  --n100:oklch(94% 0.015 280);--n200:oklch(85% 0.025 280);--n300:oklch(70% 0.035 280);
  --g100:oklch(95% 0.004 280);--g200:oklch(90% 0.006 280);--g500:oklch(50% 0.01 280);
  --g600:oklch(38% 0.012 280);--g700:oklch(26% 0.014 280);
  color-scheme:light;
}
/* Maat en beweging alleen op :root, anders zet elk eiland hierboven de mobiele --gut terug op 96px. */
:root{--gut:96px;--ease:cubic-bezier(.23,1,.32,1)}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--wh);color:var(--bk);font-family:var(--font-body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:clip}
img,video{max-width:100%}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--font-display);margin:0;font-weight:600}
p{margin:0}
::selection{background:var(--p200)}
:focus-visible{outline:2px solid var(--p600);outline-offset:3px;border-radius:4px}

/* ============ typografie ============ */
.d{font-family:var(--font-display);font-weight:600;letter-spacing:-.02em;line-height:1.06;text-wrap:balance}
.h1{font-size:clamp(54px,7.6vw,104px);letter-spacing:-.03em;line-height:1}
.h2{font-size:clamp(34px,4.2vw,56px)}
.h2s{font-size:clamp(30px,3.4vw,48px)}
.h2xs{font-size:clamp(28px,3vw,44px)}
.h3{font-size:24px;letter-spacing:-.01em;line-height:1.2}
.k{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--g500);margin:0}
.p{font-size:18px;line-height:1.6;max-width:62ch;color:var(--g700)}
.s{font-size:15px;line-height:1.55;color:var(--g600)}
.a{color:var(--p700);font-weight:600;text-decoration:none}
.a:hover{text-decoration:underline;text-underline-offset:3px}
.tab{font-variant-numeric:tabular-nums}
.tag{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:8px;background:var(--p200);color:var(--p700);font-size:12px;font-weight:600;align-self:flex-start}

/* ============ knoppen ============ */
.btn{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 26px;border-radius:999px;font-family:var(--font-body);font-size:16px;font-weight:600;white-space:nowrap;text-decoration:none;cursor:pointer;border:0;transition:transform .16s var(--ease),background-color .2s,color .2s,border-color .2s}
.btn:active{transform:scale(.98)}
.b-white{background:var(--bk);color:var(--wh)}
.b-white:hover{background:var(--g700)}
.b-ghost{background:transparent;color:var(--bk);box-shadow:inset 0 0 0 1.5px var(--bk)}
.b-ghost:hover{background:var(--g100)}
.nv .b-white{background:var(--wh);color:var(--navy)}
.nv .b-white:hover{background:var(--n100)}
.nv .b-ghost{color:var(--wh);box-shadow:inset 0 0 0 1px var(--n200);background:transparent}
.nv .b-ghost:hover{background:rgba(255,255,255,.08)}
.acts{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.belr{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:15px;font-weight:600;text-decoration:none;color:var(--g700)}
.belr svg{width:18px;height:18px}

/* ============ vlakken en secties ============ */
.sec{padding:96px var(--gut)}
.big{padding:112px var(--gut)}
.pt0{padding-top:0}
.col{display:flex;flex-direction:column}
.g24{gap:24px}.g40{gap:40px}.g56{gap:56px}.g72{gap:72px}
.hl{border-top:1px solid var(--g200)}
.nv{background:var(--navy);color:var(--wh)}
.nv .k{color:var(--n300)}
.nv .p,.nv .s{color:var(--n200)}
.nv .hl{border-color:rgba(255,255,255,.16)}
.nv .a{color:var(--p200)}
.pu{background:var(--p100)}
.pu .k{color:var(--p700)}
.r22{border-radius:22px}
.split{display:grid;grid-template-columns:7fr 5fr;gap:64px;align-items:end}
.s57{display:grid;grid-template-columns:5fr 7fr;gap:96px}
.s48{display:grid;grid-template-columns:4fr 8fr;gap:96px}
.kop{display:flex;flex-direction:column;gap:20px}
.mw{max-width:1000px}

/* ============ reveal (site.js zet .on) ============ */
.rv{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.on{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}
/* beweging.js: alleen onder html.bw, die de head niet zet bij reduced motion.
   Elke soort komt anders binnen: de hero als reeks met blur, koppen woord voor woord,
   rasters omhoog met een lichte schaal, rijen schuiven van links in. */
.lw{display:inline-block}
.bw{--bw-blur:10px}
.bw:not(.bw-js) main>section:first-of-type>*{opacity:0;animation:bw-vang .5s 2.5s forwards} /* vangnet als het script niet laadt */
@keyframes bw-vang{to{opacity:1}}
.bw-hero:not(.bw-in) .lw,.bw-hero:not(.bw-in) .bw-seq,.bw-hero:not(.bw-in) .bw-stuk{opacity:0}
.bw-hero.bw-in .lw{animation:bw-woord .9s var(--ease) var(--wd) backwards}
.bw-hero.bw-in .bw-seq{animation:bw-blok .9s var(--ease) var(--ld) backwards}
.bw-hero.bw-in .bw-stuk{animation:bw-stuk .6s var(--ease) var(--ld) backwards}
@keyframes bw-woord{from{opacity:0;transform:translateY(.55em);filter:blur(var(--bw-blur))}}
@keyframes bw-blok{from{opacity:0;transform:translateY(22px);filter:blur(calc(var(--bw-blur) * .8))}}
@keyframes bw-stuk{from{opacity:0;transform:translateY(10px) scale(.92)}}
.bw .bw-kop .lw{opacity:0;transform:translateY(.45em);filter:blur(calc(var(--bw-blur) * .8));transition:opacity .75s var(--ease),transform .75s var(--ease),filter .75s var(--ease);transition-delay:calc(var(--bw-start,0s) + var(--wd))}
.bw .rv.on .bw-kop .lw,.bw .bw-kop.on .lw{opacity:1;transform:none;filter:none}
.bw .rv.bw-g{opacity:1;transform:none}
.bw .rv.bw-g:not(.on)>*{opacity:0}
.bw .rv.bw-raster.on>*{animation:bw-raster .8s var(--ease) calc(var(--bw-start,0s) + var(--i) * 80ms) backwards}
.bw .rv.bw-rijen.on>*{animation:bw-rij .7s var(--ease) calc(var(--bw-start,0s) + var(--i) * 60ms) backwards}
@keyframes bw-raster{from{opacity:0;transform:translateY(28px) scale(.97)}}
@keyframes bw-rij{from{opacity:0;transform:translateX(-20px)}}
@media(max-width:767px){.bw{--bw-blur:0px}}

/* ============ voortgang ============ */
.voortgang{position:fixed;top:0;left:0;right:0;height:2px;z-index:80;pointer-events:none}
.voortgang i{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:0 50%;background:var(--p600)}

/* ============ navigatie: een witte pil ============ */
header{position:fixed;top:20px;left:0;right:0;z-index:60;display:flex;justify-content:center;padding:0 16px;pointer-events:none}
header nav{pointer-events:auto;display:flex;align-items:center;gap:22px;height:60px;padding:0 8px 0 22px;background:var(--wh);border:1px solid var(--g200);border-radius:999px;box-shadow:0 10px 30px rgba(0,0,0,.08);transition:box-shadow .3s}
header.klein nav{box-shadow:0 12px 34px rgba(0,0,0,.12)}
header nav .mark{display:flex;align-items:center;min-height:44px}
header nav .mark img{height:34px;width:auto;display:block}
header nav ul{display:flex;gap:22px;list-style:none;margin:0;padding:0}
header nav ul a{font-size:14px;font-weight:500;color:var(--g700);text-decoration:none;padding-block:12px}
header nav ul a:hover{color:var(--bk)}
header nav ul a.here{color:var(--bk);font-weight:700}
header nav ul a.portaal{padding-left:22px;position:relative;color:var(--g600)}
header nav ul a.portaal::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:1px;height:14px;background:var(--g200)}
header nav .btn{height:44px;padding:0 20px;font-size:14px}

/* mobiel menu (site.js bouwt .mnu-knop en .mnu) */
.mnu-knop{display:none;background:transparent;border:1px solid var(--g200);border-radius:999px;padding:0;cursor:pointer;width:44px;height:44px;position:relative;flex:none;margin-left:auto}
.mnu-knop i{position:absolute;left:12px;width:18px;height:1.5px;background:var(--bk);border-radius:2px;transition:transform .28s var(--ease)}
.mnu-knop i:nth-child(1){top:18px}
.mnu-knop i:nth-child(2){top:24px}
html.mnu-open .mnu-knop i:nth-child(1){transform:translateY(3px) rotate(45deg)}
html.mnu-open .mnu-knop i:nth-child(2){transform:translateY(-3px) rotate(-45deg)}
.mnu[hidden]{display:none}
html:not(.mnu-open) .mnu{pointer-events:none}
.mnu{position:fixed;inset:0;z-index:55;background:var(--wh);display:flex;flex-direction:column;justify-content:center;gap:8px;padding:104px 24px 40px;opacity:0;transform:translateY(-8px);transition:opacity .26s var(--ease),transform .26s var(--ease);overflow-y:auto;overscroll-behavior:contain}
html.mnu-open .mnu{opacity:1;transform:none}
html.mnu-open,html.mnu-open body{overflow:hidden}
.mnu-links{display:flex;flex-direction:column}
.mnu-links a{font-family:var(--font-display);font-size:26px;font-weight:500;letter-spacing:-.02em;color:var(--g600);text-decoration:none;padding:12px 0;border-bottom:1px solid var(--g200)}
.mnu-links a:last-child{border-bottom:0}
.mnu-links a.here{color:var(--bk)}
.mnu-links a.portaal{font-size:18px;color:var(--g500)}
.mnu-onder{margin-top:28px;display:flex;flex-direction:column;align-items:stretch;gap:12px}
.mnu-bel{display:flex;align-items:center;justify-content:center;min-height:44px;font-size:15px;color:var(--g700);text-decoration:none}
@media(min-width:1200px){.mnu{display:none}}
@media(max-width:1199px){.mnu-knop{display:block}header nav ul{display:none}header nav{gap:10px}}
@media(prefers-reduced-motion:reduce){.mnu,.mnu-knop i{transition:none}}

/* WhatsApp */
/* Eigen cursor, zelfde vorm als op de oude site: een ring met een gat (het beeldmerk).
   Wit met difference-menging, zodat hij zwart is op wit en wit op navy. */
.cur{display:none}
@media(pointer:fine){
  .cur{display:block;position:fixed;top:0;left:0;z-index:9999;pointer-events:none;mix-blend-mode:difference;opacity:0;transition:opacity .25s}
  .cur.ready{opacity:1}
  html.cur-on,html.cur-on *{cursor:none}
  html.cur-on input,html.cur-on textarea,html.cur-on select{cursor:auto}
  /* Dichte ring van 16px; boven iets klikbaars een dunne ring van 34px, bij klikken 24px dik.
     Twee lagen die alleen schalen en vervagen, zodat er niets anders animeert. */
  .cur .dot{position:absolute}
  .cur .dot::before,.cur .dot::after{content:'';position:absolute;box-sizing:border-box;border-radius:999px;border:solid var(--wh);transition:transform .2s var(--ease),opacity .2s var(--ease)}
  .cur .dot::before{width:16px;height:16px;margin:-8px 0 0 -8px;border-width:4px}
  .cur .dot::after{width:34px;height:34px;margin:-17px 0 0 -17px;border-width:1.5px;opacity:0;transform:scale(.47)}
  .cur.hot .dot::before{opacity:0;transform:scale(2.125)}
  .cur.hot .dot::after{opacity:1;transform:none}
  .cur.press .dot::before{opacity:1;transform:scale(1.5)}
  .cur.press .dot::after{opacity:0}
  .cur .ring{display:none}
}
@media(prefers-reduced-motion:reduce){html.cur-on,html.cur-on *{cursor:auto}.cur{display:none}}
.wa{position:fixed;right:32px;bottom:32px;z-index:70;display:inline-flex;align-items:center;gap:10px;height:60px;padding:0 22px;background:var(--wh);border:1px solid var(--g200);border-radius:999px;box-shadow:0 10px 30px rgba(0,0,0,.08);color:var(--bk);text-decoration:none;font-size:14px;font-weight:600;transition:transform .2s var(--ease)}
.wa svg{width:20px;height:20px;color:#1f9e4f;fill:currentColor}
@media(hover:hover) and (pointer:fine){.wa:hover{transform:translateY(-2px)}}

/* ============ hero home ============ */
.hero{padding:180px var(--gut) 104px;display:grid;grid-template-columns:minmax(0,820px) minmax(280px,1fr);gap:64px;align-items:center}
.kick{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.kick i{width:3px;height:3px;border-radius:50%;background:var(--g500)}
.kick .k:last-child{color:var(--g600)}
.hero h1{margin:28px 0 0;font-family:var(--font-display)}
.hero h1 .lijn{display:block;font-size:28px;font-weight:500;line-height:1.25;letter-spacing:-.01em;color:var(--g500)}
.hero h1 .slag{display:block;margin-top:16px;font-size:clamp(54px,7.4vw,96px);line-height:.98;letter-spacing:-.035em;font-weight:600;color:var(--bk);text-wrap:balance}
.hero .p{margin-top:28px;font-size:20px}
.hero .acts{margin-top:36px}
.hero .rvw-slot,.ohero .rvw-slot,.ahero .rvw-slot{margin-top:4px}
.wie{display:flex;align-items:center;gap:14px;margin-top:40px}
.wie img{width:48px;height:48px;border-radius:50%;object-fit:cover}
.wie b{display:block;font-size:15px}
.wie span{font-size:14px;color:var(--g600)}
.herovid{position:relative;border-radius:22px;overflow:hidden;background:var(--navy);aspect-ratio:4/5;max-height:640px}
.herovid video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.herovid img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;display:block}
/* hero-animatie (6 okt): de SVG vult het vlak, één knop voor pauze, verder en opnieuw */
.herovid svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.hapauze{position:absolute;right:12px;bottom:12px;width:44px;height:44px;border-radius:50%;border:1.5px solid rgb(255 255 255 / .35);background:var(--navy);color:var(--wh);display:grid;place-items:center;padding:0;cursor:pointer;transition:transform .15s var(--ease),border-color .15s var(--ease)}
.hapauze svg{position:static;width:18px;height:18px}
.hapauze path{display:none}
.hapauze[data-s=pauze] .i-pauze,.hapauze[data-s=speel] .i-speel,.hapauze[data-s=opnieuw] .i-opnieuw{display:inline}
.hapauze:active{transform:scale(.98)}
.hapauze:focus-visible{outline:2px solid var(--wh);outline-offset:3px;border-radius:50%}
@media(hover:hover) and (pointer:fine){.hapauze:hover{border-color:var(--wh)}}

/* ============ logo's ============ */
.logos{position:relative;display:grid;grid-template-columns:206px 1fr;align-items:center;border-top:1px solid var(--g200);border-bottom:1px solid var(--g200)}
.logos>.k{display:flex;align-items:center;height:112px;padding:0 24px 0 56px;line-height:1.4;border-right:1px solid var(--g200)}
.lvenster{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 64px,#000 calc(100% - 96px),transparent);mask-image:linear-gradient(90deg,transparent,#000 64px,#000 calc(100% - 96px),transparent)}
.lband{display:flex;flex:none;width:max-content;animation:lband 88s linear infinite}
.lrij{display:flex;align-items:center;gap:64px;margin:0;padding:0 64px 0 0;list-style:none}
/* hoogte per logo staat in --h: zelfde oppervlak, zodat vierkante logo's niet wegvallen naast brede */
.lrij img{display:block;height:var(--h);width:auto;filter:brightness(0);opacity:.6}
/* Fitters is een gevuld schild: met brightness(0) valt de tekst erin weg */
.lrij img.vol{filter:grayscale(1);opacity:.75}
@keyframes lband{to{transform:translateX(-50%)}}
.logos.stil .lband{animation-play-state:paused}
.lstop{position:absolute;right:16px;top:50%;margin-top:-22px;box-sizing:border-box;width:44px;height:44px;padding:0;border-radius:50%;border:1px solid var(--g200);background:var(--wh);display:grid;place-items:center;cursor:pointer}
.lstop i{width:4px;height:12px;border:solid var(--g600);border-width:0 3px}
.lstop[aria-pressed=true] i{width:0;height:0;border-width:6px 0 6px 10px;border-color:transparent transparent transparent var(--g600)}
@media(hover:hover) and (pointer:fine){.logos:hover .lband{animation-play-state:paused}.lstop:hover{border-color:var(--g500)}}
@media(prefers-reduced-motion:reduce){.lband{animation:none;width:auto;flex:auto}.lvenster{-webkit-mask-image:none;mask-image:none}.lrij{flex-wrap:wrap;justify-content:center;gap:24px 48px;padding:24px}.lrij[aria-hidden]{display:none}.lstop{display:none}}

/* ============ films (blijven donker) ============ */
.scene{position:relative}
.scene.film{min-height:260vh;display:block;padding-block:0;background:#08080b}
/* Homepage: drie films met elk één zin, korter zodat de pagina doorloopt. */
#b2.film,#b3.film{min-height:160vh}
.scene.film .plak{position:sticky;top:0;width:100%;height:100svh;overflow:hidden;display:flex;align-items:flex-end;justify-content:center}
.doek{position:absolute;inset:0;width:100%;height:100%;display:block;background:#08080b}
.sluier{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom, rgba(8,8,11,.55) 0%, rgba(8,8,11,.08) 24%, rgba(8,8,11,.28) 50%, rgba(8,8,11,.90) 82%, #08080b 100%)}
.filmtekst{position:relative;z-index:2;width:100%;max-width:1120px;padding:0 40px 11vh}
.filmtekst::before{content:'';position:absolute;z-index:-1;left:0;right:0;bottom:0;top:-64px;background:linear-gradient(to bottom, rgba(8,8,11,0) 0%, rgba(8,8,11,.50) 15%, rgba(8,8,11,.80) 34%, rgba(8,8,11,.88) 60%, rgba(8,8,11,.90) 100%)}
.scene.film .kicker{color:#a3a3b0;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.12em;margin:0 0 14px}
.filmkop{font-size:clamp(1.8rem,4.2vw,3.2rem);line-height:1.12;max-width:16em;margin:0;text-align:left;letter-spacing:-.02em;color:#f4f4f6}
.filmsub{margin:16px 0 0;max-width:34em;font-size:1.0625rem;color:#c9c9d2}

/* ============ lijsten ============ */
.li{display:grid;grid-template-columns:64px 1fr;padding:28px 0;border-top:1px solid var(--g200)}
.li:last-child{border-bottom:1px solid var(--g200)}
.n{font-family:var(--font-display);font-size:20px;font-weight:500;color:var(--g500);font-variant-numeric:tabular-nums}
.li .s{margin-top:8px;font-size:16px}
.tr{display:grid;grid-template-columns:200px 1fr 48px 1fr;gap:24px;padding:26px 0;border-top:1px solid var(--g200);align-items:baseline}
.tr:last-child{border-bottom:1px solid var(--g200)}
.tr b{font-family:var(--font-display);font-size:20px;font-weight:600}
.tr .pijl{color:var(--g500);font-size:20px}
.tr .uit{color:var(--bk);font-weight:500}
/* Klantnaam onder de branche, link naar de case; padding houdt het tikvlak op 44px. */
.trc{display:block;width:max-content;padding:12px 0;margin-bottom:-12px;font-size:14px;font-weight:500;color:var(--g700);text-decoration:underline;text-underline-offset:3px}
@media (hover:hover) and (pointer:fine){.trc:hover{color:var(--bk)}}
.or{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:baseline;padding:24px 0;border-top:1px solid var(--g200)}
.ors .or:last-child{border-bottom:1px solid var(--g200)}
.or .pr{font-weight:600;color:var(--g600);white-space:nowrap}
.or h3{font-size:22px;letter-spacing:-.01em}
.or .s{margin-top:6px}
.or .lt{font-family:var(--font-display);color:var(--p700);margin-right:14px}

/* ============ rol (navy) ============ */
.rolkop{display:grid;grid-template-columns:7fr 5fr;gap:64px;align-items:end}
.rolkop .p b{color:var(--wh)}
.fasen{display:grid;grid-template-columns:repeat(5,1fr);column-gap:24px;row-gap:0}
.phs{display:flex;flex-direction:column;gap:10px;padding:24px 0 32px;border-top:2px solid var(--wh)}
.phs.s3{grid-column:span 3}
.phs .d{font-size:32px}
.st{display:flex;flex-direction:column;gap:10px;padding-top:24px;border-top:1px solid rgba(255,255,255,.16)}
.nv .st .n{color:var(--n300)}
.st .d{font-size:22px;letter-spacing:-.01em;line-height:1.15}
.st .pr{margin-top:auto;padding-top:16px;font-weight:600}

/* tegenover: twee kolommen op navy */
.tegenover{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(255,255,255,.16);border-radius:22px;overflow:hidden}
.tegenover>div{display:flex;flex-direction:column;gap:14px;padding:36px 40px;background:var(--navy)}
.tegenover .tg-b{background:#272650}
.tegenover .mt{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.12em}
.tegenover .tg-a .mt{color:var(--n300)}
.tegenover .tg-b .mt{color:var(--p200)}
.tegenover p:not(.mt){font-size:17px;line-height:1.6;color:var(--n200)}
.tegenover .tg-b p:not(.mt){color:var(--wh)}

/* stekkerdoos: de bron-SVG, stekkers zakken op hun plek als .on komt */
.strip{margin:0;--tek-sterk:rgba(255,255,255,.5);--tek:rgba(255,255,255,.32);--tek-zacht:rgba(255,255,255,.16);--tek-label:#e6d5e7;--tek-tekst:rgba(255,255,255,.62);--acc:#b079b2}
.strip svg{width:100%;height:auto;display:block}
.strip .lbl{font-family:var(--font-body);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.strip figcaption{margin-top:24px;max-width:56ch;font-size:15px;line-height:1.55;color:var(--n300);opacity:0;transition:opacity .24s var(--ease) .6s}
.strip svg>path:first-of-type,.strip svg>rect,.strip svg>text{opacity:0;transition:opacity .24s var(--ease)}
.strip .socket{opacity:0;transform:translateY(-26px);transition:opacity .24s var(--ease),transform .24s var(--ease)}
.strip .socket:nth-of-type(1){transition-delay:.3s}
.strip .socket:nth-of-type(2){transition-delay:.42s}
.strip .socket:nth-of-type(3){transition-delay:.54s}
.strip .socket:nth-of-type(4){transition-delay:.66s}
.strip.on svg>path:first-of-type,.strip.on svg>rect,.strip.on svg>text{opacity:1}
.strip.on .socket{opacity:1;transform:none}
.strip.on figcaption{opacity:1}
@media(prefers-reduced-motion:reduce){.strip .socket,.strip figcaption,.strip svg>path:first-of-type,.strip svg>rect,.strip svg>text{opacity:1;transform:none;transition:none}}

/* ============ bewijs ============ */
.bewijs{font-family:var(--font-display);font-size:clamp(24px,2.6vw,34px);font-weight:500;line-height:1.32;color:var(--g500);letter-spacing:-.015em;max-width:1100px}
.bewijs b{color:var(--bk);font-weight:600}
.bewijs sup{font-size:.45em;vertical-align:super;margin-left:2px;color:var(--g500)}
.case{display:grid;grid-template-columns:7fr 5fr;gap:64px;align-items:center;padding-top:40px}
.case .p{font-size:20px}
.case .btn{justify-self:start}

/* ============ eerlijk advies (paars paneel) ============ */
.paneel{display:grid;grid-template-columns:5fr 6fr;gap:80px;padding:72px 80px;align-items:start}
.paneel .d{font-size:clamp(32px,3.6vw,52px)}
.paneel .p{font-size:19px}

/* ============ reviews ============ */
.rks{display:grid;grid-template-columns:repeat(3,1fr)}
.rk{display:flex;flex-direction:column;gap:14px;padding:32px 0;text-decoration:none;color:inherit}
.rks .rk:nth-child(1){padding-right:40px}
.rks .rk:nth-child(2){padding:32px 40px;border-left:1px solid var(--g200)}
.rks .rk:nth-child(3){padding-left:40px;border-left:1px solid var(--g200)}
.stars{color:var(--bk);letter-spacing:3px;font-size:15px}
.rk p{font-size:17px;line-height:1.6;color:var(--g700)}
.who{font-size:14px;color:var(--g600)}
.who b{color:var(--bk);font-weight:600}
@media(hover:hover) and (pointer:fine){.rk:hover p{color:var(--bk)}}
/* reviewkaarten uit de bron (letterlijk overgenomen) in de kolomstijl van .rk */
.rks .rvw{display:flex;flex-direction:column;padding:32px 0;text-decoration:none;color:inherit}
.rks .rvw:nth-child(1){padding-right:40px}
.rks .rvw:nth-child(2){padding:32px 40px;border-left:1px solid var(--g200)}
.rks .rvw:nth-child(3){padding-left:40px;border-left:1px solid var(--g200)}
.rvw-kop{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.rvw-st{color:#f0b429;letter-spacing:.14em;font-size:13px}
.rvw-g{display:inline-flex;width:17px;height:17px}
.rvw-g svg{width:100%;height:100%}
.rvw-t{font-size:17px;line-height:1.6;color:var(--g700);margin-bottom:22px}
.rvw-p{display:flex;align-items:center;gap:13px;margin-top:auto;padding-top:20px;border-top:1px solid var(--g200)}
.rvw-p img{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none}
.rvw-p b{display:block;font-size:15px;font-weight:600}
.rvw-p span span{font-size:13px;color:var(--g600)}
.rvw-slot{margin-top:40px;font-size:15px}
.rvw-slot a{display:inline-flex;align-items:center;gap:8px;min-height:44px;text-decoration:none;color:var(--g700)}
.rvw-slot b{color:var(--bk)}
/* In de reviewsectie geeft de kolom al 56px gap; de score hoort bij de reviews, niet bij de knop. */
#reviews .rvw-slot{margin-top:-32px}
@media(hover:hover) and (pointer:fine){.rks .rvw:hover .rvw-t,.revgrid .rvw:hover .rvw-t{color:var(--bk)}.rvw-slot a:hover{color:var(--bk)}}

/* ============ manifest en badges (navy) ============ */
.mani{display:grid;grid-template-columns:1fr 200px;gap:64px;align-items:end}
.mani .d{font-size:clamp(30px,3.4vw,44px);font-weight:500;line-height:1.18}
.mani .acc{color:var(--p200)}
.mani img{width:200px;height:200px;display:block}
.badges4{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.badges4 .st h3{font-size:22px;letter-spacing:-.01em}
.badges4 .st a{text-decoration-color:var(--n300);text-underline-offset:4px}

/* ============ Tim ============ */
/* Foto groeit mee met de tekstkolom, zodat beide één blok vormen. Kolom max 720px, ook op brede schermen. */
.timblok{display:grid;grid-template-columns:440px minmax(0,720px);gap:80px;justify-content:center}
.timblok>img{width:440px;height:auto;aspect-ratio:6/7;max-width:100%;object-fit:cover;object-position:50% 30%;border-radius:22px;display:block;position:sticky;top:112px}
.timblok.zf{grid-template-columns:minmax(0,720px);justify-content:start}
.timblok .pas{width:48px;height:48px;border-radius:50%;object-fit:cover}
.timblok .tel{font-family:var(--font-display);font-size:20px;font-weight:600;letter-spacing:-.01em;text-decoration:none;font-variant-numeric:tabular-nums;padding-block:12px}
.timblok .acts{column-gap:24px}
.timblok .s.kl{margin-top:-8px;text-wrap:pretty}
.tbw{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding-top:24px;border-top:1px solid var(--g200)}
.tbw>div{display:flex;gap:14px;align-items:flex-start;position:relative}
.tbw img{width:56px;height:56px;flex:none;display:block}
.tbw h3{font-size:17px;letter-spacing:-.01em;line-height:1.25;margin:0 0 4px}
.tbw a{text-decoration-color:var(--n300);text-underline-offset:4px}
.tbw a::after{content:"";position:absolute;inset:0}

/* ============ FAQ ============ */
.faq details{border-top:1px solid var(--g200)}
.faq details:last-child{border-bottom:1px solid var(--g200)}
.faq summary{cursor:pointer;list-style:none;padding:26px 0;display:flex;justify-content:space-between;gap:24px;align-items:center;font-family:var(--font-display);font-size:22px;font-weight:600;letter-spacing:-.01em;min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'';width:10px;height:10px;flex:none;border-right:1.5px solid var(--bk);border-bottom:1.5px solid var(--bk);transform:rotate(45deg) translateY(-3px);transition:transform .25s var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg) translateY(-3px)}
.faq p{margin:0 0 26px;font-size:17px;line-height:1.65;color:var(--g600);max-width:64ch}
.faq p a{color:var(--p700);font-weight:600}
.faq p .w{display:inline-block;opacity:0;filter:blur(8px);transition:opacity .34s var(--ease),filter .34s var(--ease)}
.faq details[open] p .w{opacity:1;filter:blur(0)}
@media(prefers-reduced-motion:reduce){.faq p .w{opacity:1!important;filter:none!important;transition:none}}
.hulp a{color:var(--p700);font-weight:600;text-decoration:none}

/* ============ slot ============ */
.slot{display:grid;grid-template-columns:7fr 5fr;gap:64px;align-items:end;padding-top:64px}

/* ============ footer (navy) ============ */
footer{background:var(--navy);color:var(--wh);padding:96px var(--gut) 40px}
footer .wrap{display:flex;flex-direction:column;gap:72px}
.fkolommen{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:48px}
.fmerk{display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.fmerk>a img{height:28px;width:auto;display:block}
.fmerk>p{margin:0;font-family:var(--font-display);font-size:24px;font-weight:500;line-height:1.3;max-width:360px;letter-spacing:-.01em;white-space:pre-line}
.fdirect{display:flex;flex-direction:column;gap:6px;font-size:15px}
.fdirect a{color:var(--n200);text-decoration:none}
.fsoc{display:flex;gap:10px}
.fsoc a{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.16);display:inline-flex;align-items:center;justify-content:center;color:var(--n200)}
.fsoc svg{width:18px;height:18px;fill:currentColor}
.fkolom{display:flex;flex-direction:column;gap:14px}
.fkolom b{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--n300)}
.fkolom a,.fkolom span{font-size:15px;color:var(--n200);text-decoration:none}
@media(hover:hover) and (pointer:fine){.fkolom a:hover,.fdirect a:hover,.fsoc a:hover{color:var(--wh)}}
.fbot{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-top:28px;border-top:1px solid rgba(255,255,255,.16);font-size:13px;color:var(--n300)}

/* ============ aanbod ============ */
.ahero{padding:180px var(--gut) 112px;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.ahero .h1{font-size:clamp(50px,6vw,80px)}
.trap{display:flex;flex-direction:column;gap:10px;--sw:min(330px,62%)}
.stp{display:grid;grid-template-columns:48px 1fr;align-items:center;height:64px;padding:0 20px;border:1px solid var(--g200);border-radius:14px;background:var(--wh);width:var(--sw);max-width:100%;box-sizing:border-box}
.stp .d{font-size:18px;letter-spacing:-.01em}
.stp .n{font-size:16px}
.stp.nul{background:var(--g100);border-color:var(--g100)}
.trap .stp:nth-child(1){margin-left:min(260px,100% - var(--sw))}.trap .stp:nth-child(2){margin-left:min(208px,(100% - var(--sw))*.8)}.trap .stp:nth-child(3){margin-left:min(156px,(100% - var(--sw))*.6)}.trap .stp:nth-child(4){margin-left:min(104px,(100% - var(--sw))*.4)}.trap .stp:nth-child(5){margin-left:min(52px,(100% - var(--sw))*.2)}
.grp{display:grid;grid-template-columns:3fr 9fr;gap:48px;border-top:2px solid var(--bk);padding-top:24px}
.grp .h3{font-size:28px}
.rw{display:grid;grid-template-columns:64px 1fr 220px;gap:24px;align-items:baseline;padding:30px 0;border-top:1px solid var(--g200)}
.rws .rw:first-child{border-top:0;padding-top:4px}
.rw .pr{font-family:var(--font-display);font-size:24px;font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.rw .s{margin-top:8px;font-size:16px;max-width:60ch}
.nv .or,.nv .ors .or:last-child{border-color:rgba(255,255,255,.16)}
.nv .or .lt{color:var(--n300)}
.oekp{display:grid;grid-template-columns:5fr 7fr;gap:80px;padding:72px;border-radius:22px}
.pu .or{border-top-color:var(--p200)}
.pu .ors .or:last-child{border-bottom-color:var(--p200)}
.eerlijk{font-size:18px;line-height:1.6;color:var(--g700);max-width:70ch}
.eerlijk b{color:var(--bk)}
/* ringen naast de fasekaarten: de kaart in beeld staat aan, de ringen tot en met zijn fase lichten op */
.rng{display:grid;grid-template-columns:5fr 7fr;gap:80px;align-items:start}
.rng-vis{position:sticky;top:calc(50svh - 200px);width:100%;max-width:400px}
.rng-vis svg{display:block;width:100%;height:auto;overflow:visible}
.rng-vis circle{fill:var(--p100);fill-opacity:0;stroke:var(--g200);stroke-width:1.5;transition:fill-opacity 400ms var(--ease)}
.rng-vis circle.boog{fill:none;stroke:var(--p700);stroke-width:3;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;stroke-opacity:0;transform:rotate(-90deg);transform-box:fill-box;transform-origin:center;transition:stroke-dashoffset 700ms var(--ease),stroke-opacity 0s 700ms}
.rng-vis text{font-family:var(--font-display);font-size:15px;font-weight:600;text-anchor:middle;fill:var(--g500);transition:fill 200ms var(--ease)}
.rng-vis .is-lit circle{fill-opacity:.55}
.rng-vis .is-lit circle.boog{stroke-dashoffset:0;stroke-opacity:1;transition:stroke-dashoffset 700ms var(--ease),stroke-opacity 0s}
.rng-vis .is-lit text{fill:var(--bk)}
.rng-vis [data-ring="0"] circle{fill:var(--p700);fill-opacity:.2;stroke:none}
.rng-vis .is-lit[data-ring="0"] circle{fill-opacity:1}
.rng-vis [data-ring="0"] .boog{display:none}
.fks{display:flex;flex-direction:column;gap:16px}
.fk{display:grid;grid-template-columns:56px 1fr auto;gap:24px;align-items:baseline;padding:28px 32px;border:1px solid var(--g200);border-radius:14px;background:var(--wh);transition:opacity 200ms var(--ease),border-color 200ms var(--ease)}
.fk .s{margin-top:8px;font-size:16px;max-width:56ch}
.fk h3 a{color:var(--p700)}
.fk .pr{font-family:var(--font-display);font-size:20px;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.fk.is-dim{opacity:.4}
.fk.is-active{border-color:var(--bk)}
.fks-na{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;padding-top:16px}
@media(max-width:959px){.rng{grid-template-columns:1fr}.rng-vis{display:none}}
@media(prefers-reduced-motion:reduce){.fk,.rng-vis circle,.rng-vis circle.boog,.rng-vis text{transition:none}}

/* ============ Op Eigen Koers ============ */
.ahero.oek{grid-template-columns:7fr 5fr}
.ahero.oek .h1{font-size:clamp(44px,5vw,72px)}
.ahero.oek .kaart{gap:0}
.ahero.oek .or{padding:20px 0}
.ahero.oek .or:first-child{border-top:0;padding-top:0}
.ahero.oek .ors .or:last-child{border-bottom:0}
.ahero.oek .or h2{font-size:22px;letter-spacing:-.01em}
.ahero.oek .badgekaart{position:static;border:0;border-top:1px solid var(--g200);border-radius:0;padding:24px 0 0;grid-template-columns:64px 1fr;gap:16px}
.ahero.oek .badgekaart img{width:64px;height:64px}
.wks .wk:last-child{border-bottom:1px solid rgba(255,255,255,.16)}
/* uitlegvideo naast de sessies, blijft staan tijdens scrollen (op-eigen-koers) */
.oekprog{display:flex;flex-direction:column;gap:40px}
.oekvid{display:flex;flex-direction:column;gap:12px;margin:0;max-width:640px}
.oekvid video{display:block;width:100%;height:auto;background:var(--bk)}
.oekvid figcaption{max-width:62ch}
@media(min-width:1200px){
 .oekprog{display:grid;grid-template-columns:minmax(0,1fr) 480px;gap:56px;align-items:start}
 .oekprog .wks{grid-area:1/1}
 .oekprog .wk{grid-template-columns:48px 1fr 1fr}
 .oekprog .wk .x{grid-column:2/-1}
 .oekprog .wk .u{grid-row:1;grid-column:3}
 .oekvid{grid-area:1/2;position:sticky;top:calc(50svh - 170px)}
}
.oekreis{height:340vh}
.oekreis .bord-fasen li{grid-template-columns:48px 1fr;padding:14px 0}
.oekreis .bord-fasen .n{font-size:15px;white-space:nowrap}
.oekreis .bord-fasen h3{font-size:20px}
.oekreis .bord-fasen p{font-size:15px}
@media(min-width:821px) and (max-height:820px){.oekreis .bord-fasen li{padding:8px 0}.oekreis .bord-kop{gap:16px}}
#doos text{font:600 18px var(--font-body);fill:var(--navy);text-anchor:middle}
#doos .dz-g text{fill:var(--wh)}
.dz-r{fill:none;stroke:var(--navy);stroke-width:2.5}
.dz-l rect{fill:var(--n100)}
.dz-g rect{fill:var(--navy)}
.dz-c rect{fill:var(--wh);stroke:var(--navy);stroke-width:1.5}
.dz-d{fill:none;stroke:var(--p600);stroke-width:3;stroke-linecap:round;stroke-dasharray:1 1}
.dz-m{fill:none;stroke:var(--navy);stroke-width:2;stroke-dasharray:1 1}
.dz-e path{stroke:var(--navy);stroke-width:2}
.dz-s{fill:var(--navy)}
.dz-p{fill:none;stroke:var(--p600);stroke-width:2;transform-box:fill-box;transform-origin:center;animation:dzpuls 2.4s var(--ease) infinite}
@keyframes dzpuls{from{transform:scale(1);opacity:.9}to{transform:scale(3.2);opacity:0}}
@media(prefers-reduced-motion:reduce){.dz-p{animation:none;opacity:0}}
#doos .dz-r{stroke-dasharray:1 1}
#doos .dz-v{fill:var(--navy);opacity:0}
.kaart{background:var(--g100);border-radius:22px;padding:40px;display:flex;flex-direction:column;gap:22px}
.seats{display:grid;grid-template-columns:repeat(8,1fr);gap:10px;max-width:400px}
.seat{aspect-ratio:1;border-radius:8px;border:1.5px solid var(--bk)}
.seat.o{border-style:dashed;border-color:var(--g500)}
.seatlbl{display:flex;justify-content:space-between;font-size:13px;color:var(--g600);max-width:400px}
.twee{display:grid;grid-template-columns:1fr 1fr;gap:24px}
/* Drie kaarten naast elkaar pas vanaf 1280px, smaller wordt de tekstkolom te krap. Daaronder een kolom: twee plus een wees oogt half af, en .p houdt de regels op 62ch. */
.drie{grid-template-columns:1fr}
@media(min-width:1280px){.drie{grid-template-columns:repeat(3,1fr)}.drie>.vak{padding:32px}}
.vak{border:1px solid transparent;border-radius:22px;padding:48px;display:flex;flex-direction:column;gap:16px}
.vak.lijn{border:1px solid var(--g200)}
.vak .vlogo{display:block;align-self:flex-start;height:var(--h);width:auto;margin-block:calc((46px - var(--h)) / 2);filter:brightness(0);opacity:.7}
.wk{display:grid;grid-template-columns:64px 300px 1fr 300px;gap:24px;padding:20px 0;border-top:1px solid rgba(255,255,255,.16);align-items:baseline}
.wk .u{font-size:15px;font-weight:600;color:var(--wh)}
.wk .d{font-size:20px;letter-spacing:-.01em}
.cks{display:grid;grid-template-columns:1fr 1fr;column-gap:40px}
.ck{display:grid;grid-template-columns:28px 1fr;gap:14px;padding:26px 0;border-top:1px solid var(--g200)}
.ck svg{width:22px;height:22px;color:var(--p700);margin-top:2px}
.ck h3{font-size:19px;letter-spacing:-.01em;line-height:1.3}
.ck .s{margin-top:6px}
.badgekaart{align-self:start;position:sticky;top:120px;display:grid;grid-template-columns:96px 1fr;gap:24px;align-items:center;border:1px solid var(--g200);border-radius:14px;padding:24px}
.badgekaart img{width:96px;height:96px;display:block}
.badgekaart a{font-weight:600;display:inline-block;padding-block:10px;margin-block:-10px}

/* ============ over ============ */
.ohero{padding:180px var(--gut) 112px;display:grid;grid-template-columns:7fr 5fr;gap:64px;align-items:center}
.ohero .h1{font-size:clamp(60px,9vw,128px);letter-spacing:-.035em}
.ohero.zk .h1{font-size:clamp(48px,5.6vw,80px)}
/* Laag laptopscherm: kop en knop moeten samen in het eerste beeld passen. */
@media(min-width:821px) and (max-height:860px){.ohero,.ahero{padding-top:140px}.ohero.zk .h1{font-size:clamp(44px,min(5.6vw,8.6vh),80px)}}
.ohero .zin{font-family:var(--font-display);font-size:clamp(24px,2.6vw,36px);font-weight:500;line-height:1.25;letter-spacing:-.015em;color:var(--g700);max-width:22em}
.ohero>img{width:100%;max-width:480px;height:auto;aspect-ratio:480/560;object-fit:cover;border-radius:22px;display:block;justify-self:end}
.brug{display:grid;grid-template-columns:7fr 5fr;gap:80px;align-items:center}
.zijden{display:grid;grid-template-columns:1fr 40px 1fr;gap:16px;align-items:center}
.side{display:flex;flex-direction:column;gap:14px;padding:40px;border:1px solid var(--g200);border-radius:22px;height:100%;box-sizing:border-box}
.side .d{font-size:28px}
.zijden svg{width:40px;height:24px;color:var(--g500)}
.brugbalk{grid-column:1/-1;margin-top:16px;padding:28px 40px;border-radius:22px;font-family:var(--font-display);font-size:clamp(22px,2.2vw,30px);font-weight:500;letter-spacing:-.015em;line-height:1.3}
.gantt{display:flex;flex-direction:column;border-bottom:1px solid rgba(255,255,255,.16)}
.gt.gtk{border-top:0;padding-top:0}
.gt .s a{display:inline-block;padding-block:12px;margin-block:-12px}
.yr,.trk{display:grid;grid-template-columns:repeat(8,1fr)}
.gt{display:grid;grid-template-columns:360px 1fr;gap:48px;padding:22px 0;border-top:1px solid rgba(255,255,255,.16);align-items:center}
.gt .d{font-size:20px;letter-spacing:-.01em}
.gt .s{margin-top:4px}
.yr{font-size:13px;color:var(--n300)}
.yr span{border-left:1px solid rgba(255,255,255,.16);padding-left:8px}
.trk{height:28px}
.bar{height:28px;border-radius:8px;background:var(--n300);transform-origin:left center}
.bar.nu{background:var(--wh);border-radius:8px 0 0 8px}
.stip{width:14px;height:14px;border-radius:50%;background:var(--p200);align-self:center;margin-left:8px}
.gtyr{display:none}
.pcs{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--g200)}
.pc{display:flex;flex-direction:column;gap:14px;padding:40px 48px 40px 0;border-top:1px solid var(--g200)}
.pcs .pc:nth-child(even){padding-left:48px;padding-right:0;border-left:1px solid var(--g200)}
.pc .d{font-size:26px}
.ofoto{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:22px;display:block}
.brug .ofoto{max-width:560px}
.obel{display:grid;grid-template-columns:128px auto;gap:28px;align-items:center;justify-content:start}
.obel>img{width:128px;height:160px;object-fit:cover;border-radius:14px;display:block}

/* ============ contact ============ */
.chero{padding:180px var(--gut) 112px;display:grid;grid-template-columns:7fr 5fr;gap:64px;align-items:start}
.belkaart{border:1.5px solid var(--bk);border-radius:22px;padding:40px;display:flex;flex-direction:column;gap:20px;margin-top:64px}
.belkaart svg{width:32px;height:32px}
.belkaart .num{font-family:var(--font-display);font-size:clamp(40px,4.4vw,60px);font-weight:600;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap;text-decoration:none;padding-block:2px}
body:has(#agenda) :is(.ckb,.wa){display:none}
.app{border:1px solid var(--g200);border-radius:22px;padding:40px;display:flex;flex-direction:column;gap:16px}
.app>svg{width:28px;height:28px;color:#1f9e4f}
.app .btn{margin-top:auto;align-self:flex-start}
.agenda{display:flex;flex-direction:column;gap:16px}
.ag-k{display:flex;flex-wrap:wrap;gap:12px}
.agenda[data-stand=aan] .ag-uit,.agenda:not([data-stand=aan]) .ag-vlak,.agenda:not([data-stand=aan]) .ag-weg{display:none}
.ag-uit{display:flex;flex-direction:column;gap:16px}
.ag-vlak iframe{display:block;width:100%;height:640px;border:0;border-radius:14px;background:var(--wh)}
.ag-weg{align-self:flex-start;min-height:44px;padding:0;background:none;border:0;font:inherit;font-size:14px;color:var(--g600);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.ckb{box-sizing:border-box;position:fixed;left:32px;bottom:32px;z-index:50;width:min(440px,calc(100vw - 64px));display:flex;flex-direction:column;gap:12px;padding:24px;background:var(--wh);border:1px solid var(--g200);border-radius:22px;box-shadow:0 10px 30px rgba(0,0,0,.08);transition:opacity .22s var(--ease),transform .22s var(--ease)}
@starting-style{.ckb{opacity:0;transform:translateY(8px)}}
.ckb[hidden]{display:none}
.ckb-k{display:flex;gap:12px}
.ckb-k .btn{flex:1;height:44px}
.ckb-p{align-self:flex-start;display:inline-flex;align-items:center;min-height:44px;font-size:14px;color:var(--g600)}
@media(prefers-reduced-motion:reduce){.ckb{transition:opacity .22s}@starting-style{.ckb{transform:none}}}
.formblok{display:grid;grid-template-columns:5fr 7fr;gap:96px;padding-top:96px}
form{display:flex;flex-direction:column;gap:24px}
form .twee{gap:24px}
.veld{display:flex;flex-direction:column;gap:8px}
.veld label{font-size:14px;font-weight:600;color:var(--g700)}
.veld label span{font-weight:400!important;color:var(--g500)!important;opacity:1!important}
.veld input,.veld textarea{font:inherit;font-size:16px;height:52px;padding:0 16px;border:1px solid var(--g200);border-radius:14px;background:var(--wh);color:var(--bk);box-sizing:border-box;width:100%}
.veld textarea{height:160px;padding:14px 16px;resize:vertical}
.veld input:focus,.veld textarea:focus{outline:2px solid var(--p600);outline-offset:1px;border-color:transparent}
.hint{font-size:13px;color:var(--g500)}
.pot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.verstuur{display:flex;align-items:center;gap:32px;flex-wrap:wrap}
form .klein{font-size:13px;color:var(--g500);max-width:46ch}
form .klein a{color:var(--p700)}
.melding{font-size:15px;color:var(--g700);min-height:1.2em}
.melding.mis{color:oklch(50% 0.17 25)}
.melding:empty{min-height:0}
.revkop{display:grid;grid-template-columns:7fr 5fr;gap:64px;align-items:end}
.revgrid{display:grid;grid-template-columns:7fr 5fr;gap:64px}
.revgrid .rvw{display:flex;flex-direction:column;text-decoration:none;color:inherit}
.revgrid .groot .rvw-t{font-family:var(--font-display);font-size:clamp(24px,2.6vw,36px);font-weight:500;line-height:1.25;letter-spacing:-.015em;color:var(--bk)}
.revgrid .rest .rvw{padding:32px 0;border-bottom:1px solid var(--g200)}
.revgrid .rest .rvw:first-child{padding-top:0}

/* ============ herontwerp: labels, hoofdstuklijn, ringen, bord ============ */
.hero .belr{display:none}
.k.lbl{display:flex;align-items:center;gap:12px}
.lbl .nr{color:var(--bk);font-variant-numeric:tabular-nums}
.nv .lbl .nr{color:var(--wh)}
h2 .a:hover{text-decoration:none}

.vgang{position:fixed;left:16px;top:50%;transform:translateY(-50%);z-index:50;display:flex;flex-direction:column;transition:opacity .24s var(--ease)}
/* pas zichtbaar als het eerste hoofdstuk begint */
.vgang:not(:has(.hier)){opacity:0;pointer-events:none}
.vgang::before{content:"";position:absolute;left:15.5px;top:16px;bottom:16px;width:1px;background:var(--g200)}
.vgang a{position:relative;width:32px;height:32px;display:flex;align-items:center;justify-content:center;text-decoration:none}
.vgang a::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--g200);transition:background-color .2s var(--ease),transform .2s var(--ease)}
.vgang a.hier::before{background:var(--p600);transform:scale(1.5)}
.vgang span{position:absolute;left:36px;top:50%;transform:translateY(-50%);white-space:nowrap;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--g600);background:var(--wh);border:1px solid var(--g200);border-radius:999px;padding:4px 10px;opacity:0;pointer-events:none;transition:opacity .2s var(--ease)}
.vgang a:hover span,.vgang a:focus-visible span{opacity:1}
@media(prefers-reduced-motion:reduce){.vgang a::before,.vgang span{transition:none}}

.cijfers{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.cf{display:flex;flex-direction:column;gap:12px;padding-top:24px;border-top:1px solid var(--g200)}
.cf .top{display:flex;align-items:center;gap:16px;min-height:80px}
.cf .n{font-size:clamp(44px,5vw,64px);color:var(--bk)}
.cf p{font-size:16px;color:var(--g700);max-width:32ch}
.cf cite{font-size:13px;font-style:normal;color:var(--g500)}
.ring{width:56px;height:56px;flex:none;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:5}
.ring .spoor{stroke:var(--g200)}
.ring .boog{stroke:var(--p600);stroke-linecap:round;stroke-dasharray:100 100;stroke-dashoffset:100;transition:stroke-dashoffset 1.1s cubic-bezier(.33,1,.68,1)}
.rv.on .ring .boog{stroke-dashoffset:calc(100 - var(--pct))}
@media(prefers-reduced-motion:reduce){.ring .boog{stroke-dashoffset:calc(100 - var(--pct));transition:none}}

.bordbron{position:absolute;width:0;height:0;overflow:hidden}
.bd-v{fill:var(--n100)}
.bd-l{fill:none;stroke:var(--navy);stroke-opacity:.22}
.bd-r{fill:none;stroke:var(--navy);stroke-width:2}
#bord text{font:600 20px var(--font-body);fill:var(--g500);text-anchor:middle}
.bd-d{fill:none;stroke:var(--p600);stroke-width:3;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:calc(1 - var(--draad,0))}
.bd-s{fill:var(--navy);opacity:var(--draad,0)}
.bd-veld{fill:var(--navy);opacity:var(--licht,0)}
.bd-kader{fill:none;stroke:var(--navy);stroke-width:4}
.bd-kn{fill:var(--navy);opacity:calc(1 - var(--licht,0))}
.bd-kl{fill:var(--wh);opacity:var(--licht,0)}
.bordsc{height:240vh;padding:0}
.bord-plak{position:sticky;top:0;height:100svh;box-sizing:border-box;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:56px;align-items:center;padding:96px var(--gut) 48px}
.bord-kop{display:flex;flex-direction:column;gap:24px}
.bord-fasen{list-style:none;margin:16px 0 0;padding:0}
.bord-fasen li{display:grid;grid-template-columns:48px 1fr;gap:16px;padding:20px 0;border-top:1px solid rgba(255,255,255,.16);opacity:.45;transition:opacity .24s var(--ease)}
.bord-fasen li.is-active{opacity:1}
.bord-fasen h3{font-size:24px;color:var(--wh);margin:0 0 4px}
.bord-fasen p{font-size:16px;color:var(--n200);margin:0}
.bord-fasen .n{color:var(--n300);font-variant-numeric:tabular-nums}
.bord-fasen .mini{display:none}
.bord-doek{background:var(--wh);height:min(100svh - 144px,54vw);aspect-ratio:1;max-width:100%;justify-self:end;padding:24px;box-sizing:border-box;overflow:hidden}
.bord-doek svg{width:100%;height:100%;display:block}
@media(prefers-reduced-motion:reduce){.bordsc{height:auto}.bord-plak{position:static;height:auto}.bord-fasen li{opacity:1;transition:none}}

/* tikvlak 44px zonder dat de opmaak verschuift */
#manifest h3 a,.fmerk>a{display:inline-block;padding-block:12px;margin-block:-12px}

/* ============ tablet ============ */
@media(max-width:1199px){
  :root{--gut:48px}
  .hero{grid-template-columns:1fr 340px;gap:48px}
  .fasen{grid-template-columns:1fr 1fr}
  .phs.s3{grid-column:auto}
  .fasen .phs{display:none}
  .st{padding-bottom:28px}
  .tr{grid-template-columns:160px 1fr;row-gap:6px}
  .tr .pijl{display:none}
  .tr .uit{grid-column:2}
  .tr>div{grid-row:span 2}
  .s57,.s48{gap:56px}
  .badges4{grid-template-columns:1fr 1fr}
  .timblok{grid-template-columns:320px minmax(0,720px);gap:48px}
  .timblok>img{width:320px}
  .fkolommen{grid-template-columns:1fr 1fr}
  .fmerk{grid-column:1/-1}
  .wk{grid-template-columns:48px 1fr 1fr}
  .wk .x{grid-column:2/-1}
  .wk .u{grid-row:1;grid-column:3}
  .gt{grid-template-columns:240px 1fr;gap:24px}
  .brug{grid-template-columns:1fr;gap:48px}
  .oekp,.paneel{padding:56px;gap:48px}
  .ohero .kick{flex-direction:column;align-items:flex-start;row-gap:6px}.ohero .kick i{display:none}
}

/* ============ telefoon ============ */
@media(max-width:820px){
  :root{--gut:20px}
  body{font-size:16px}
  header{top:0;padding:0}
  header nav{width:100%;height:68px;border-radius:0;border-width:0 0 1px;box-shadow:none;padding:0 12px 0 20px}
  header.klein nav{box-shadow:0 6px 20px rgba(0,0,0,.06)}
  header nav .mark img{height:28px}
  header nav>.btn{display:none}
  .wa{right:16px;bottom:16px;height:56px;padding:0 18px}
  .wa span{display:none}
  .h2,.h2s,.h2xs{font-size:34px}
  .p{font-size:17px}
  .sec,.big{padding:64px var(--gut)}
  .pt0{padding-top:0}
  .split,.s57,.s48,.rolkop,.case,.paneel,.mani,.timblok,.slot,.ahero,.ahero.oek,.ohero,.chero,.brug,.formblok,.revkop,.revgrid,.oekp,.grp,.twee,.cks,.pcs{grid-template-columns:1fr;gap:32px}
  .revgrid{gap:0}.revgrid .groot{padding-bottom:32px;border-bottom:1px solid var(--g200)}.revgrid .rest .rvw:first-child{padding-top:32px}
  .hero{grid-template-columns:1fr;padding:108px var(--gut) 56px;gap:40px}
  .hero h1 .lijn{font-size:21px;color:var(--g600)}
  .hero h1 .slag{font-size:54px}
  .hero .kick{row-gap:6px}.hero .kick i{display:none}
  .kop .bronlijst li:last-child{border-bottom:0}
  .hero .rvw-slot,.ohero .rvw-slot,.ahero .rvw-slot,#reviews .rvw-slot{font-size:13px}.hero .rvw-slot a,.ohero .rvw-slot a,.ahero .rvw-slot a,#reviews .rvw-slot a{gap:6px}
  .hero .p{font-size:17px}
  .hero .acts .b-white{width:100%}
  .hero .acts .b-ghost{display:none}
  .hero .belr{display:inline-flex}
  .herovid{aspect-ratio:4/5;max-height:none}
  .logos{grid-template-columns:1fr;border:0;background:var(--g100);border-radius:14px;padding-top:20px}
  .logos>.k{height:auto;justify-content:center;padding:0 16px;border:0;text-align:center}
  .lvenster{height:80px;display:flex;align-items:center}
  .lrij{gap:40px;padding-right:40px}
  .lrij img{height:calc(var(--h) * .75)}
  .lstop{top:auto;bottom:18px;margin-top:0;right:8px}
  @media(prefers-reduced-motion:reduce){.lvenster{height:auto}.lrij{gap:20px 32px;padding:16px}}
  .scene.film{min-height:220vh}
  .filmtekst{padding:0 24px 13vh}
  .filmkop{font-size:clamp(1.4rem,6.4vw,2rem);max-width:none}
  .filmsub{font-size:.9375rem}
  .li{grid-template-columns:44px 1fr}
  .tr{display:flex;flex-direction:column;gap:6px;padding:20px 0}
  .tr b{font-size:17px;line-height:1.45}
  .fasen{grid-template-columns:1fr}
  .st{flex-direction:row;flex-wrap:wrap;gap:4px 12px;padding:20px 0}
  .st .n{width:28px}
  .st .d{flex:1;font-size:20px}
  .st .s{flex-basis:100%;padding-left:40px}
  .st .pr{margin:0;padding:0 0 0 40px}
  .rks{grid-template-columns:1fr}
  .rks .rk:nth-child(n){padding:24px 0;border-left:0;border-top:1px solid var(--g200)}
  .rks .rvw:nth-child(n){padding:24px 0;border-left:0;border-top:1px solid var(--g200)}
  .tegenover{grid-template-columns:1fr}
  .tegenover>div{padding:28px 24px}
  .paneel,.oekp{padding:32px 24px}
  .mani img{width:140px;height:140px}
  .badges4{grid-template-columns:1fr;gap:0}
  .badges4 .st{padding:20px 0}
  .badges4 .st .s{padding-left:0} /* geen nummer ervoor, dus niet inspringen */
  .timblok>img{width:100%;aspect-ratio:1;position:static}
  .tbw{grid-template-columns:1fr;gap:20px}
  .or{grid-template-columns:1fr;gap:6px}
  .or .lt{display:block;margin:0 0 6px}
  .ahero.oek .kaart{padding:28px 24px}
  .ahero.oek .or .lt{display:inline;margin:0 12px 0 0}
  .faq summary{font-size:18px;padding:20px 0}
  .faq p{font-size:16px}
  footer{padding:64px var(--gut) 32px}
  footer .wrap{gap:48px}
  .fkolommen{grid-template-columns:1fr;gap:36px}
  .fmerk>a img{height:20px}
  .fmerk>p{font-size:22px}
  .fdirect a{display:flex;align-items:center;min-height:44px}
  .fkolom{gap:0}
  .fkolom b{margin-bottom:8px}
  .fkolom a{display:flex;align-items:center;min-height:44px}
  .fkolom span{display:flex;align-items:center;min-height:32px}
  .fbot{flex-direction:column;font-size:12px}
  .ahero,.ohero,.chero{padding:108px var(--gut) 56px}
  .trap{display:none}
  .rw{grid-template-columns:44px 1fr;row-gap:8px}
  .rw .pr{grid-column:2;text-align:left;font-size:20px}
  .fk{grid-template-columns:40px 1fr;gap:4px 12px;padding:22px 20px}
  .fk .pr{grid-column:2;font-size:18px}
  .seats{gap:6px}
  .vak{padding:28px 24px}
  .wk{grid-template-columns:40px 1fr;row-gap:6px}
  .wk .x,.wk .u{grid-column:2;grid-row:auto}
  .badgekaart{grid-template-columns:72px 1fr;gap:16px;position:static}
  .badgekaart img{width:72px;height:72px}
  .ohero>img{justify-self:stretch;max-width:none}
  .obel{grid-template-columns:72px 1fr;gap:16px}
  .obel>img{width:72px;height:90px}
  .zijden{grid-template-columns:1fr}
  .zijden svg{transform:rotate(90deg);justify-self:center}
  .side{padding:28px}
  .brugbalk{padding:24px}
  .gt{grid-template-columns:1fr;gap:6px}
  .yr,.trk,.gtk{display:none}
  .gtyr{display:block;font-size:13px;color:var(--n300);font-variant-numeric:tabular-nums}
  .pcs .pc:nth-child(n){padding:28px 0;border-left:0}
  .pcs{gap:0}
  .belkaart{margin-top:0;padding:28px}
  .app{padding:28px 24px}
  .ag-k .btn{width:100%}
  .ag-vlak iframe{height:720px}
  .ckb{left:16px;bottom:16px;width:calc(100vw - 32px);padding:20px}
  body:has(.ckb:not([hidden])) .wa{display:none}
  .formblok{padding-top:56px}
  .veld input,.veld textarea{font-size:16px}
  .verstuur .btn{width:100%}
  .btn{max-width:100%;white-space:normal;text-align:center;min-height:52px;height:auto;padding-block:12px}
  .cijfers{grid-template-columns:1fr;gap:32px}
  .vgang{display:none} /* bovenin loopt de voortgangsbalk al; hier zouden de punten als opsomming tegen de tekst staan */
  .bordsc{height:auto}
  .bord-plak{position:static;height:auto;display:block;padding:64px var(--gut)}
  .bord-doek{display:none}
  .bord-fasen li{opacity:1;grid-template-columns:40px 1fr}
  .bord-fasen .mini{display:block;grid-column:2;width:100%;max-width:220px;aspect-ratio:1;background:var(--wh);border-radius:14px;margin-top:12px}
  .oekreis .bord-doek,#rol .bord-doek{display:block;height:auto;width:100%;margin-top:32px;padding:16px}
}

/* ============ cases (overzicht en detail), markup van tools/bouw-cases.py ============ */
:is(.chero,.cdrie,.scv,.cnav,.cslot,.liblok)>.wrap{max-width:1248px;margin-inline:auto}
.chero:has(>.wrap){display:block;padding:168px var(--gut) 72px}
.cdrie,.cnav{padding:0 var(--gut)}
.scv{padding:72px var(--gut)}
.cslot,.liblok{padding:112px var(--gut)}
.liblok{padding-bottom:0}
.liblok>.wrap{border-top:1px solid var(--g200);padding-top:96px}
:is(.cwerk,.chero,.scv,.liblok) .kicker{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--g500);margin:0 0 20px}
:is(.cwerk,.liblok) .kicker b{font-weight:600;color:var(--p700)}
:is(.cdrie,.scv,.cnav) .mt{display:block;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--g500);margin:0 0 12px}
.terug{display:inline-flex;align-items:center;min-height:44px;margin-bottom:32px;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--g500);text-decoration:none;transition:color .2s var(--ease)}

/* detail: hero */
.cheroin{display:grid;grid-template-columns:1fr 46%;gap:56px;align-items:center}
.chero h1{font-size:clamp(min(44px,11.4vw),5.6vw,80px);letter-spacing:-.03em;line-height:1.02;max-width:17ch;text-wrap:balance;margin:0 0 28px}
.cbeeld{display:block;overflow:hidden}
.cbeeld img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 58%}
.cbeeld.naast{aspect-ratio:16/10;max-width:100%;border-radius:22px;background:var(--g100)}
.cmerk{box-sizing:border-box;display:inline-flex;align-items:center;width:fit-content;padding:14px 20px;border-radius:14px;background:var(--navy)}
.cmerk.opplaat{background:var(--wh);box-shadow:inset 0 0 0 1px var(--g200)}
.cmerk img{display:block;height:34px;max-width:150px;object-fit:contain}
.cmerk.groot img{height:44px;max-width:200px}
.loopt,.looptje{display:inline-flex;align-items:center;gap:8px;border-radius:999px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--p700)}
.loopt{margin:0 0 20px;padding:6px 14px;box-shadow:inset 0 0 0 1px var(--p200)}
.loopt::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--p600)}
.looptje{margin-left:10px;padding:3px 9px;background:var(--p100);letter-spacing:.08em}
@media(prefers-reduced-motion:no-preference){.loopt::before{animation:looptpuls 2.4s ease-in-out infinite}}
@keyframes looptpuls{50%{opacity:.35}}

/* detail: uitdaging, gebouwd, uitkomst */
.drieblok{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.drieblok article{padding:28px;border-radius:14px;box-shadow:inset 0 0 0 1px var(--g200)}
.drieblok article p:not(.mt){font-size:16px;line-height:1.62;color:var(--g700)}
.drieblok .uitkomst{background:var(--p100);box-shadow:none}
.drieblok .uitkomst .mt{color:var(--p700)}
.cvv{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cvv>div{padding:28px 30px;border-radius:14px;box-shadow:inset 0 0 0 1px var(--g200)}
.cvv .kna{box-shadow:inset 0 0 0 1.5px var(--bk)}
.cvv .kna .mt{color:var(--bk)}
.cvv ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.cvv li{position:relative;padding-left:26px;font-size:16px;line-height:1.55}
.cvv li::before{content:"";position:absolute}
.kvoor li{color:var(--g500)}
.kvoor li::before{left:0;top:.72em;width:13px;height:1.5px;background:var(--g200)}
.kna li{color:var(--bk)}
.kna li::before{left:3px;top:.28em;width:6px;height:10px;border:solid var(--p700);border-width:0 1.6px 1.6px 0;transform:rotate(45deg)}
.cnav .wrap{display:flex;justify-content:space-between;gap:20px;padding-block:28px;border-block:1px solid var(--g200)}
.cnav a{font-family:var(--font-display);font-size:22px;font-weight:600;letter-spacing:-.01em;color:var(--g600);text-decoration:none;transition:color .2s var(--ease)}
.cnav .rechts{text-align:right}
.cslot h2{font-size:clamp(34px,4.2vw,56px);letter-spacing:-.02em;line-height:1.06;max-width:20ch;text-wrap:balance;margin:0 0 16px}
.cslot p:not(.knoppen){font-size:18px;line-height:1.6;color:var(--g700);max-width:52ch;margin:0 0 28px}
:is(.cslot,.cwerk) .knoppen{display:flex;flex-wrap:wrap;gap:12px;margin:0}

/* overzicht: plakkende kop links, stroom kaarten rechts */
.cwerk{padding:0 var(--gut)}
.cwerk-in{max-width:1248px;margin-inline:auto;display:grid;grid-template-columns:minmax(300px,38%) 1fr;gap:64px}
.cwerk-kol{height:100%}
.cwerk-kop{position:sticky;top:120px;padding-top:22vh}
.cwerk h1{font-size:clamp(44px,5vw,72px);letter-spacing:-.03em;line-height:1.02;margin:0 0 24px}
.cwerk .lead{font-size:18px;line-height:1.6;color:var(--g700);max-width:34ch}
.cwerk .leadbij{font-size:15px;color:var(--g600);margin-top:10px}
.cwerk .knoppen{margin-top:30px}
/* wissel tussen werkwijze en Op Eigen Koers: radioknoppen plus :has, geen script. Zonder :has staan beide lijsten er. */
.cswitch{display:inline-flex;gap:4px;padding:4px;margin:0 0 24px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--g200)}
.cswitch label{position:relative}
.cswitch input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.cswitch span{display:flex;align-items:center;min-height:44px;padding:0 20px;border-radius:999px;font-size:15px;font-weight:600;color:var(--g600);transition:background-color .2s var(--ease),color .2s var(--ease)}
.cswitch input:checked+span{background:var(--bk);color:var(--wh)}
.cswitch input:focus-visible+span{outline:2px solid var(--p700);outline-offset:2px}
.cwerk:has(#r-eigen:checked) .cv-werk,.cwerk:not(:has(#r-eigen:checked)) .cv-eigen{display:none}
@media(hover:hover) and (pointer:fine){.cswitch input:not(:checked):hover+span{color:var(--bk)}}
.cstroom{list-style:none;margin:0;padding:18vh 0 16vh;display:flex;flex-direction:column;gap:40px}
.ckaart a{display:block;text-decoration:none}
.cvlak{position:relative;display:block;aspect-ratio:16/10;max-width:100%;border-radius:22px;overflow:hidden;background:var(--navy);transition:transform .4s var(--ease)}
.cvlak .cbeeld{position:absolute;inset:0}
/* zonder foto (Op Eigen Koers) geen leeg navy vlak: alleen zo hoog als logo en titel vragen */
.cvlak.geenfoto{aspect-ratio:auto;min-height:300px}
.cvlak .cbeeld img{transition:transform .6s var(--ease)}
/* Leesbaarheid van de witte titel op de foto: een navy sluier, geen decoratie. */
.cvlak::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgb(30 29 62/.92) 0%,rgb(30 29 62/.66) 32%,rgb(30 29 62/.12) 62%,rgb(30 29 62/.22) 100%)}
.cmerkop{position:absolute;top:22px;left:24px;z-index:3;display:grid;place-items:center;height:54px;padding:0 18px;border-radius:14px;background:var(--wh)}
.cmerkop.donker{background:var(--navy)}
.cmerkop img{display:block;height:32px;max-width:158px;object-fit:contain}
.cmerkop b{font-family:var(--font-display);font-size:15px;font-weight:600;color:var(--bk)}
.cmerkop.donker b{color:var(--wh)}
.covertekst{position:absolute;inset:auto 0 0;z-index:2;display:flex;flex-direction:column;gap:12px;padding:36px 38px 32px}
.cmerknaam{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--p200)}
.ctitel{font-family:var(--font-display);font-size:clamp(24px,2.6vw,36px);font-weight:600;letter-spacing:-.02em;line-height:1.1;color:var(--wh);max-width:17ch;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.conder{display:grid;grid-template-columns:1fr auto;gap:10px 30px;align-items:end;padding:20px 4px 0}
.cmeta{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;min-height:23px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--g500)}
.cmeta .looptje{margin-left:0}
.cgebouwd{font-size:15px;line-height:1.6;color:var(--g600);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:4.8em}
.cgebouwd b{font-weight:600;color:var(--bk)}
.clees{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:15px;font-weight:600;color:var(--p700);white-space:nowrap}
.clees i{font-style:normal;transition:transform .25s var(--ease)}
/* voor en na op de kaart: dezelfde tekens als op de casepagina, verbonden door een lijntje */
.cvn{display:grid;gap:8px;padding-left:26px;view-timeline:--vn}
.cvn-voor,.cvn-na{position:relative;display:block}
.cvn-voor{font-size:15px;line-height:1.45;color:var(--g500)}
.cvn-na{font-family:var(--font-display);font-size:19px;font-weight:600;letter-spacing:-.01em;line-height:1.3;color:var(--bk);text-wrap:balance}
.cvn-voor::before,.cvn-voor::after,.cvn-na::before{content:"";position:absolute}
.cvn .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.cvn-voor::before{left:-26px;top:calc(.725em - .75px);width:12px;height:1.5px;background:var(--g200)}
.cvn-voor::after{left:-20.75px;top:calc(.725em + 6px);bottom:-10px;width:1.5px;background:var(--g200);transform-origin:top}
.cvn-na::before{left:-23px;top:calc(.65em - 6px);width:6px;height:10px;border:solid var(--p700);border-width:0 1.6px 1.6px 0;transform:rotate(45deg)}
.cvn.straks .cvn-na::before{left:-25px;top:calc(.65em - 5px);width:10px;height:10px;border-width:1.5px;border-radius:50%;transform:none}
@supports(animation-timeline:view()){@media(prefers-reduced-motion:no-preference){
  .cstroom .ckaart{animation:kaartop linear both;animation-timeline:view();animation-range:entry 4% cover 26%}
  .cvn-voor::after{animation:vnlijn linear both;animation-timeline:--vn;animation-range:entry 100% cover 22%}
  .cvn-na{animation:vnna linear both;animation-timeline:--vn;animation-range:cover 14% cover 36%}
}}
@supports(animation-timeline:view()){@media(prefers-reduced-motion:reduce){
  .cvn-na{animation:vnzacht linear both;animation-timeline:--vn;animation-range:entry 100% cover 30%}
}}
@keyframes kaartop{from{opacity:0;transform:translateY(38px) scale(.985)}}
@keyframes vnlijn{from{transform:scaleY(0)}}
@keyframes vnna{from{opacity:0;transform:translateY(8px)}}
@keyframes vnzacht{from{opacity:.2}}

/* overzicht: LinkedIn, postkaarten zoals in de feed, opzij door te bladeren.
   De rij loopt door tot de schermrand; de eerste kaart lijnt uit met de wrap.
   Het blauw is het logo van LinkedIn zelf, geen merkkleur van ons. */
.liblok{overflow-x:clip}
.lisym{position:absolute}
.lilogo{flex:none;width:20px;height:20px;fill:#0A66C2}
.liblok .kicker{display:flex;align-items:center;gap:10px}
.likopblok{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:32px 48px}
.liblok h2{font-size:clamp(30px,3.4vw,48px);letter-spacing:-.02em;line-height:1.06;max-width:28ch;text-wrap:balance}
.lisub{font-size:18px;line-height:1.6;color:var(--g700);max-width:56ch;margin-top:14px}
.liprof{display:flex;align-items:center;gap:14px;padding:14px 20px 14px 14px;border:1px solid var(--g200);border-radius:14px;color:var(--bk);text-decoration:none;transition:border-color .2s var(--ease)}
.liprof img{width:56px;height:56px;border-radius:50%}
.liprof b{display:block;font-family:var(--font-display);font-size:17px;font-weight:600}
.liprof span span{display:block;margin-top:2px;font-size:14px;color:var(--g600)}
.liprof .lilogo{width:24px;height:24px;margin-left:10px}
.lilijst{--lirand:max(var(--gut),calc(50vw - 624px));list-style:none;display:flex;gap:20px;margin:48px calc(50% - 50vw) 0;padding:4px var(--lirand) 8px;scroll-padding-inline:var(--lirand);overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none}
.lilijst::-webkit-scrollbar{display:none}
.lilijst:focus-visible{outline-offset:-2px}
.lipost{flex:0 0 min(340px,82vw);scroll-snap-align:start}
.lipost a{box-sizing:border-box;height:100%;display:flex;flex-direction:column;gap:14px;padding:20px;border:1px solid var(--g200);border-radius:14px;color:var(--bk);text-decoration:none;transition:border-color .2s var(--ease)}
.lihoofd{display:flex;align-items:center;gap:12px}
.liava{flex:none;width:44px;height:44px;border-radius:50%}
.linaam{flex:1;min-width:0;line-height:1.3}
.linaam b{display:block;font-size:15px;font-weight:600}
.linaam span{display:block;font-size:13px;color:var(--g500)}
/* Kop en fragment houden drie regels ruimte, zodat de beelden in de rij op één lijn staan. */
.likop,.lifrag{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.likop{min-height:4.05em;font-family:var(--font-display);font-size:18px;font-weight:600;line-height:1.35}
.lifrag{min-height:4.8em;font-size:15px;line-height:1.6;color:var(--g600)}
.libeeld{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:10px;outline:1px solid var(--g200);outline-offset:-1px}
.livoet{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:14px;border-top:1px solid var(--g200);font-size:14px}
.lireac{display:inline-flex;align-items:center;gap:7px;color:var(--g600)}
.lireac svg{width:16px;height:16px}
.lilees{font-weight:600;color:var(--p700)}
.lilees i{display:inline-block;font-style:normal;transition:transform .2s var(--ease)}
.lislot{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:28px}
.lislot a{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--g200);font-size:15px;font-weight:600;text-decoration:none}
/* De pijlen alleen met een muis; op een telefoon veeg je. site.js zet ze uit aan het eind. */
.liknop{display:none;gap:8px}
.liknop button{box-sizing:border-box;display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--g200);border-radius:50%;background:none;color:var(--bk);cursor:pointer;transition:border-color .2s var(--ease),opacity .2s var(--ease)}
.liknop button:disabled{opacity:.35;cursor:default}
.liknop svg,.lireac svg{fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.liknop svg{width:20px;height:20px}

@media(hover:hover) and (pointer:fine){
  .terug:hover,.cnav a:hover{color:var(--bk)}
  .ckaart a:hover .cvlak{transform:scale(1.012)}
  .ckaart a:hover .cvlak .cbeeld img{transform:scale(1.05)}
  .ckaart a:hover .clees i{transform:translateX(5px)}
  .lipost a:hover,.liprof:hover{border-color:var(--g500)}
  .lipost a:hover .lilees i{transform:translate(2px,-2px)}
  .lislot a:hover{box-shadow:inset 0 0 0 1.5px var(--bk)}
  .liknop{display:flex}
  .liknop button:not(:disabled):hover{border-color:var(--bk)}
}
@media(prefers-reduced-motion:reduce){.cvlak,.cvlak .cbeeld img,.clees i,.cswitch span{transition:none}}
@media(max-width:1000px){
  .cwerk-in{grid-template-columns:1fr;gap:0}
  .cwerk-kol{height:auto}
  .cwerk-kop{position:static;padding-top:132px}
  .cwerk h1 br{display:none}
  .cstroom{padding:48px 0 72px;gap:28px}
  .cvlak{aspect-ratio:4/3;border-radius:14px}
  .covertekst{padding:24px 22px 20px;gap:9px}
  .conder{grid-template-columns:1fr;gap:12px;padding:16px 2px 0}
  .clees{justify-self:start}
}
@media(max-width:900px){
  .cheroin,.drieblok,.cvv{grid-template-columns:1fr}
  .cheroin{gap:32px}
  .cbeeld.naast{aspect-ratio:16/9}
}
@media(max-width:820px){
  .chero:has(>.wrap){padding:116px var(--gut) 48px}
  .scv{padding-block:56px}
  .cslot,.liblok{padding-block:88px}
  .liblok{padding-bottom:0}
  .liblok>.wrap{padding-top:72px}
  .terug{margin-bottom:24px}
  .cmerkop{top:16px;left:16px;height:46px;padding:0 14px}
  .cmerkop img{height:27px;max-width:132px}
  .cnav a{font-size:18px}
  .drieblok article,.cvv>div{padding:24px}
}
@media(max-width:640px){
  .lilijst{gap:14px;margin-top:36px}
  .lipost a{padding:18px}
  .likop{font-size:17px}
  .liprof{flex:1 1 100%}
  .liprof .lilogo{margin-left:auto}
}

/* ============ eu-ai-act: zelftest, risicoladder, bronnen ============ */
.ohero.een{grid-template-columns:1fr}
.ohero.een .h1{font-size:clamp(40px,4.8vw,68px);max-width:15em}
.datum{font-size:13px;color:var(--g500)}
.test{border:1px solid var(--g200);border-radius:22px;padding:8px 40px 40px}
.vraag{padding:28px 0;display:flex;flex-direction:column;gap:16px}
.vraag+.vraag{border-top:1px solid var(--g200)}
.vraag p{font-size:17px;font-weight:600;line-height:1.45;color:var(--bk)}
.keuze{display:flex;flex-wrap:wrap;gap:8px}
.keuze button{min-height:44px;padding:0 20px;border-radius:999px;border:1px solid var(--g200);background:var(--wh);font:inherit;font-size:15px;font-weight:600;color:var(--g700);cursor:pointer;transition:transform .16s var(--ease),background-color .2s,color .2s,border-color .2s}
.keuze button:active{transform:scale(.98)}
.keuze button[aria-pressed="true"]{background:var(--bk);border-color:var(--bk);color:var(--wh)}
@media(hover:hover) and (pointer:fine){.keuze button:not([aria-pressed="true"]):hover{border-color:var(--bk);color:var(--bk)}}
.uitslag{display:none;padding-top:32px;border-top:1px solid var(--g200);flex-direction:column;gap:24px}
.uitslag.aan{display:flex}
.uitslag h3{font-size:24px;letter-spacing:-.01em;line-height:1.2}
.uitslag ul{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.uitslag li{position:relative;padding-left:24px;font-size:16px;line-height:1.6;color:var(--g600)}
.uitslag li::before{content:'';position:absolute;left:0;top:.75em;width:12px;height:1.5px;background:var(--g500)}
.uitslag li.nu::before{background:oklch(50% 0.17 25);height:2px}
.uitslag li b{color:var(--bk)}
.uitslag>.btn{align-self:flex-start;text-wrap:balance}
.radar{background:var(--p100);border-radius:22px;padding:32px;display:flex;flex-direction:column;gap:16px}
.radar h4{font-size:22px;letter-spacing:-.01em;line-height:1.2}
.radar p{font-size:16px;line-height:1.6;color:var(--g700)}
.radar form{flex-direction:row;flex-wrap:wrap;gap:12px;align-items:center}
.radar input[type=email]{flex:1 1 240px;min-width:0;height:52px;padding:0 20px;border:1px solid var(--p200);border-radius:999px;background:var(--wh);font:inherit;font-size:16px;color:var(--bk);box-sizing:border-box}
.radar input[type=email]:focus{outline:2px solid var(--p600);outline-offset:1px}
.radar .melding{flex-basis:100%}
.radar .mini{font-size:13px;color:var(--g600)}
.radar .mini a{color:var(--p700)}
.bedankt{display:none}
.radar.klaar form,.radar.klaar>p:not(.bedankt){display:none}
.radar.klaar .bedankt{display:block;font-weight:600;color:var(--bk)}
.uitslag .vw{font-size:13px;line-height:1.55;color:var(--g500);border-top:1px solid var(--g200);padding-top:20px}
.privacy{padding-top:24px;font-size:13px;color:var(--g500)}
.risk .r{display:grid;grid-template-columns:220px 1fr;gap:32px;padding:28px 0;border-top:1px solid var(--g200)}
.risk .r:last-child{border-bottom:1px solid var(--g200)}
.risk .n{font-family:var(--font-display);font-size:22px;font-weight:600;letter-spacing:-.01em;color:var(--bk);display:flex;flex-direction:column;gap:6px}
.risk .n small{font-family:var(--font-body);font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--g500)}
.risk p{font-size:16px;line-height:1.6;color:var(--g600)}
.risk p b{color:var(--bk)}
.tegenover ul{margin:0;padding-left:20px;display:grid;gap:10px;font-size:17px;line-height:1.55;color:var(--n200)}
.tegenover .tg-b ul{color:var(--wh)}
.bronlijst{list-style:none;margin:0;padding:0}
.bronlijst li{padding:24px 0;border-top:1px solid var(--g200);font-size:16px;line-height:1.6;color:var(--g600)}
.bronlijst li:last-child{border-bottom:1px solid var(--g200)}
.bronlijst b{color:var(--bk)}
/* een rij met alleen een link: de hele rij is het tikvlak */
.bronlijst li.hulp{padding:0}.bronlijst li.hulp>a{display:block;padding:24px 0}
@media(max-width:820px){.risk .r{grid-template-columns:1fr;gap:10px}.test{padding:0 20px 24px}.radar{padding:24px}.radar .btn{width:100%}}
/* koppen die naar een zoekpagina linken: paars zoals .fk h3 a, en een tikvlak van minstens 44px */
.or h3 a,.tr b a{color:var(--p700)}
.or h3 a,.st h3 a,.fk h3 a{display:inline-block;padding-block:12px;margin-block:-12px}
/* in .tr staat de caselink direct eronder: alleen naar boven uitbreiden, dan overlappen de tikvlakken niet */
.tr b a{display:inline-block;padding-top:14px;margin-top:-14px}
@media(max-width:820px){.tr b a{padding-top:20px;margin-top:-20px}}
/* op mobiel valt de alinea eronder over de onderste padding van de caselink; positioned legt de link erboven */
.trc{position:relative}

/* sectorlink in de case-kicker: 13px tekst, dus ruimer tikvlak. Alleen naar boven: breekt de kicker af, dan dekt regel twee de onderkant af */
.chero .kicker a{color:var(--p700);display:inline-block;padding-top:24px;margin-top:-24px}

/* ============ herkenbaar: was en nu aan weerszijden van de klant ============ */
/* het logo staat op de as, de lijn trekt zich per rij door; links stippel (handwerk), rechts doorgetrokken (vanzelf) */
.tg{position:relative;--tgm:184px;--tgg:40px}
.tg::before{content:"";position:absolute;top:0;bottom:0;left:calc(50% + var(--tgm) / 2 + var(--tgg) / 2);right:0;background:var(--n100);border-radius:22px}
.tg-kop,.tgr{position:relative;display:grid;grid-template-columns:minmax(0,1fr) var(--tgm) minmax(0,1fr);column-gap:var(--tgg);padding-inline:28px}
.tg-kop{padding-block:28px 4px;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.tg-kop span:first-child{text-align:right;color:var(--g500)}
.tg-kop span:last-child{grid-column:3;color:var(--navy)}
.tgr{align-items:center;padding-block:22px}
.tgr:last-child{padding-bottom:32px}
.tgr::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;margin-left:-.5px;background:var(--g200);transform:scaleY(0);transform-origin:top;transition:transform .6s var(--ease)}
.tgr.on::before{transform:none}
.tg-was{display:flex;flex-direction:column;align-items:flex-end;gap:6px;text-align:right}
.tg-was b{font-size:20px;font-weight:600;line-height:1.25}
.tg-was b a{display:inline-block;padding-block:12px;margin-block:-12px;color:inherit;text-decoration:underline 1.5px var(--g200);text-underline-offset:5px}
.tg-was p{font-size:16px;line-height:1.55;color:var(--g600);max-width:40ch}
.tg-merk{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;height:104px;border-radius:14px;background:var(--wh);box-shadow:inset 0 0 0 1px var(--g200);text-decoration:none;transition:transform .2s var(--ease)}
.tg-merk img{display:block;height:var(--h);width:auto;max-width:136px;object-fit:contain;filter:brightness(0);opacity:.75;transition:opacity .2s var(--ease)}
.tg-merk span{font-size:12px;font-weight:600;color:var(--g600)}
.tg-merk::before,.tg-merk::after{content:"";position:absolute;top:50%;width:calc(var(--tgg) - 12px);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.tg-merk::before{right:100%;border-top:1.5px dashed var(--g500)}
.tg-merk::after{left:100%;border-top:2px solid var(--navy)}
.tgr.on .tg-merk::before{transform:none;transition-delay:.25s}
.tgr.on .tg-merk::after{transform:none;transition-delay:.55s}
.tg-nu{font-size:18px;line-height:1.5;font-weight:500;color:var(--bk);max-width:40ch;opacity:0;transform:translateX(-12px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.tgr.on .tg-nu{opacity:1;transform:none;transition-delay:.7s}
@media(hover:hover) and (pointer:fine){.tg-merk:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1.5px var(--bk)}.tg-merk:hover img{opacity:1}.tg-was b a:hover{text-decoration-color:var(--bk)}}
@media(max-width:1199px){.tg{--tgm:150px;--tgg:28px}.tg-kop,.tgr{padding-inline:20px}}
@media(max-width:820px){
  .tg::before,.tg-kop,.tgr::before,.tg-merk::before,.tg-merk::after{display:none}
  .tgr{grid-template-columns:minmax(0,1fr);row-gap:14px;padding:28px 0;border-top:1px solid var(--g200)}
  .tgr:last-child{padding-bottom:28px;border-bottom:1px solid var(--g200)}
  .tg-merk{order:1;flex-direction:row;justify-self:start;gap:16px;height:60px;padding:0 18px}
  .tg-merk img{height:calc(var(--h) * .8);max-width:112px}
  .tg-was{order:2;align-items:flex-start;text-align:left}
  .tg-was b{font-size:18px}
  .tg-nu{order:3;font-size:16px;padding:16px 18px;border-radius:14px;background:var(--n100)}
  .tg-nu::before{content:"Nu";display:block;margin-bottom:4px;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--navy)}
  html[lang="en"] .tg-nu::before{content:"Now"}
}
@media(prefers-reduced-motion:reduce){.tgr::before,.tg-merk::before,.tg-merk::after,.tg-nu{transform:none;opacity:1;transition:none}}
/* De lijn loopt mee: hij groeit met het scrollen, en waar hij een kaart raakt kantelt die rij naar nu (keuze Tim 7 okt). Beweging.js zet --tg0, --tgh, --tgp en .aan. */
@media(min-width:821px){
  .bw-js .tgr.rv,.bw-js .tgr::before,.bw-js .tg-merk::before{opacity:1;transform:none;transition:none}
  .bw-js .tg::after{content:"";position:absolute;left:50%;top:var(--tg0,0);width:2px;margin-left:-1px;height:var(--tgh,0);background:var(--navy);transform:scaleY(var(--tgp,0));transform-origin:top}
  .bw-js .tgr .tg-merk::after,.bw-js .tgr .tg-nu{transition-duration:.24s;transition-delay:0s}
  .bw-js .tgr.aan .tg-merk::after{transition-delay:.08s}
  .bw-js .tgr.aan .tg-nu{transition-delay:.2s}
  .bw-js .tgr:not(.aan) .tg-merk::after{transform:scaleX(0)}
  .bw-js .tgr:not(.aan) .tg-nu{opacity:0;transform:translateX(-12px)}
  .bw-js .tgr:not(.aan) .tg-merk:not(:hover) img{opacity:.3}
}

/* ============ bewijs: per case een korte film van handwerk naar vanzelf ============ */
/* De ruststand is het eindbeeld: zonder .bw (reduced motion, geen JS) staat dat er stil. Met .bw speelt de film
   bij .cijfers.on, en daarna blijft er een kleine lus lopen (stip, puls, equalizer). Alleen transform en opacity. */
.cf-logo{display:block;align-self:flex-start;height:var(--h);width:auto;max-width:150px;margin-block:calc((34px - var(--h)) / 2);filter:brightness(0);opacity:.75}
.cf-beeld{padding:16px;border-radius:14px;background:var(--n100)}
.cf{--t0:calc(var(--bw-start,0s) + var(--i,0) * 80ms + .4s)}
.cb{display:block;width:100%;height:auto;overflow:visible}
.cb text{font:600 13px var(--font-body);fill:var(--navy);text-anchor:middle}
.cb .cb-k{font-weight:500;font-size:12px;fill:var(--g500)}
.cb .cb-wit{fill:var(--wh)}
.cb-lijn{fill:none;stroke:var(--p600);stroke-width:2;stroke-linecap:round}
.cb-vast,.cb-papier,.cb-vak,.cb-c rect{fill:var(--wh);stroke:var(--navy);stroke-width:1.5}
.cb-los{fill:none;stroke:var(--n300);stroke-width:1.5;stroke-dasharray:4 4;opacity:0}
.cb-knoop,.cb-stip,.cb-ok circle{fill:var(--p600)}
.cb-stip{opacity:0}
.cb-t,.cb-knoop,.cb-ok,.cb-ring,.cb-c,.cb-map,.cb-rail{transform-box:fill-box;transform-origin:center}
.cb-rail{transform-origin:50% 0}
.cb-regel{fill:var(--n300)}
.cb-sig{fill:none;stroke:var(--navy);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cb-ondr{fill:none;stroke:var(--n300);stroke-width:1.5}
.cb-dek{fill:var(--wh);transform-box:fill-box;transform-origin:100% 50%;transform:scaleX(0)}
.cb-doc,.cb-arch{transform-origin:74px 75px}
.cb-arch{transform:translate(137px,12px) scale(.55)}
.cb-map-a{fill:var(--n300)}
.cb-map-v{fill:var(--navy)}
.cb-ok path{fill:none;stroke:var(--wh);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.cb-ring{fill:none;stroke:var(--p600);stroke-width:2;opacity:0}
.cb-eq rect{fill:var(--navy);transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(var(--s))}
.bw .cb-eq rect{animation:cb-eq var(--u) cubic-bezier(.45,0,.55,1) var(--d) infinite alternate}
/* ShapeBoost: losse tools klikken in een rij, de lijn verbindt ze, een lead stroomt door */
.bw .cijfers.on .cb-t{animation:cb-samen .9s var(--ease) calc(var(--t0) + var(--n) * 90ms) backwards}
.bw .cijfers.on .cb-los{animation:cb-weg .5s var(--ease) calc(var(--t0) + .45s + var(--n) * 90ms) backwards}
.bw .cijfers.on .cb-vast{animation:cb-er .5s var(--ease) calc(var(--t0) + .45s + var(--n) * 90ms) backwards}
.bw .cijfers.on .cb-rail{animation:cb-groei .6s var(--ease) calc(var(--t0) + 1s) backwards}
.bw .cijfers.on .cb-arm{animation:cb-er .4s var(--ease) calc(var(--t0) + 1.3s) backwards}
.bw .cijfers.on .cb-knoop{animation:cb-pop .45s var(--ease) calc(var(--t0) + 1.05s + var(--n) * 120ms) backwards}
.bw .cijfers.on .cb-sb .cb-stip{animation:cb-val 2.8s cubic-bezier(.45,0,.55,1) calc(var(--t0) + 1.8s) infinite}
/* Young Finance: steeds een nieuw stuk, de handtekening komt erop en het schuift zelf het dossier in */
.bw .cijfers.on .cb-doc{animation:cb-yf-doc 4.2s var(--ease) var(--t0) infinite backwards}
.bw .cijfers.on .cb-dek{animation:cb-yf-teken 4.2s linear var(--t0) infinite backwards}
.bw .cijfers.on .cb-map{animation:cb-yf-tik 4.2s var(--ease) var(--t0) infinite}
.bw .cijfers.on .cb-ok{animation:cb-pop .45s var(--ease) calc(var(--t0) + 3s) backwards}
.bw .cijfers.on .cb-ring{animation:cb-yf-puls 4.2s var(--ease) var(--t0) infinite}
/* Let Me: Spotify speelt, de data loopt naar het CRM en vandaar naar contract en welkomstmail, elke week opnieuw */
.bw .cijfers.on .cb-pad{animation:cb-er .4s var(--ease) calc(var(--t0) + .3s + var(--n) * 400ms) backwards}
.bw .cijfers.on .cb-crm{animation:cb-pop .5s var(--ease) calc(var(--t0) + .45s) backwards,cb-hup1 3.2s var(--ease) calc(var(--t0) + 1.3s) infinite}
.bw .cijfers.on .cb-uit{animation:cb-pop .5s var(--ease) calc(var(--t0) + .45s + var(--n) * 200ms) backwards,cb-hup2 3.2s var(--ease) calc(var(--t0) + 1.3s) infinite}
.bw .cijfers.on .cb-s1{animation:cb-s1 3.2s linear calc(var(--t0) + 1.3s) infinite}
.bw .cijfers.on .cb-s2{animation:cb-s2 3.2s linear calc(var(--t0) + 1.3s) infinite}
.bw .cijfers.on .cb-s3{animation:cb-s3 3.2s linear calc(var(--t0) + 1.3s) infinite}
@keyframes cb-samen{from{transform:translate(var(--x),var(--y)) rotate(var(--r)) scale(.92)}}
@keyframes cb-weg{from{opacity:1}}
@keyframes cb-er{from{opacity:0}}
@keyframes cb-groei{from{transform:scaleY(0)}}
@keyframes cb-pop{from{transform:scale(0);opacity:0}}
@keyframes cb-val{0%{transform:none;opacity:0}10%{opacity:1}75%{transform:translateY(104px);opacity:1}88%,100%{transform:translateY(104px);opacity:0}}
@keyframes cb-yf-doc{0%{transform:translateX(-14px);opacity:0}8%{transform:none;opacity:1}48%{transform:none;animation-timing-function:cubic-bezier(.65,0,.35,1)}70%{transform:translate(137px,12px) scale(.55);opacity:1}76%,100%{transform:translate(137px,12px) scale(.55);opacity:0}}
@keyframes cb-yf-teken{0%,14%{transform:scaleX(1)}40%,100%{transform:scaleX(0)}}
@keyframes cb-yf-tik{0%,69%,82%,100%{transform:none}74%{transform:translateY(3px)}}
@keyframes cb-yf-puls{0%,71%{transform:scale(1);opacity:0}72%{opacity:.8}96%,100%{transform:scale(2);opacity:0}}
@keyframes cb-eq{from{transform:scaleY(.25)}to{transform:scaleY(1)}}
@keyframes cb-hup1{0%,16%,30%,100%{transform:none}22%{transform:scale(1.06)}}
@keyframes cb-hup2{0%,48%,62%,100%{transform:none}54%{transform:scale(1.06)}}
@keyframes cb-s1{0%{transform:none;opacity:0}4%{opacity:1}18%{transform:translateX(24px);opacity:1}22%,100%{transform:translateX(24px);opacity:0}}
@keyframes cb-s2{0%,26%{transform:none;opacity:0}29%{opacity:1}31%{transform:translateX(12px)}45%{transform:translate(12px,-35px)}50%{transform:translate(20px,-35px);opacity:1}53%,100%{transform:translate(20px,-35px);opacity:0}}
@keyframes cb-s3{0%,26%{transform:none;opacity:0}29%{opacity:1}31%{transform:translateX(12px)}45%{transform:translate(12px,35px)}50%{transform:translate(20px,35px);opacity:1}53%,100%{transform:translate(20px,35px);opacity:0}}

/* ============ rol: het beeld bij kiezen, bouwen, bijsturen ============ */
/* navy is handwerk, zoals in het bewijs; de gekozen balk krimpt tot er alleen een stippelomtrek van het oude werk over is */
#rolbeeld text{font:600 17px var(--font-body);fill:var(--navy)}
#rolbeeld .rb-k{font-size:15px;font-weight:500;fill:var(--g500)}
#rolbeeld .dz-c text{font-size:16px;text-anchor:middle}
.rb-b{fill:var(--navy)}
.rb-g{transform-box:fill-box;transform-origin:0 50%}
.rb-o{fill:none;stroke:var(--n300);stroke-width:1.5;stroke-dasharray:4 4}
.rb-p{fill:none;stroke:var(--n300);stroke-width:1.5}
.tbw>.tbw-breed{grid-column:1/-1}
.tbw img.tbw-pn{width:auto;height:64px;margin-top:14px}
.tbw-iso{display:flex;gap:10px;margin-top:14px}
.tbw-iso span{display:grid;place-content:center;width:64px;height:64px;border-radius:50%;border:1.5px solid var(--navy);background:var(--wh);box-shadow:inset 0 0 0 3px var(--wh),inset 0 0 0 4px var(--n300);text-align:center;font:700 15px/1.1 var(--font-body);letter-spacing:-.01em;color:var(--navy)}
.tbw-iso small{display:block;font-size:10px;font-weight:600;letter-spacing:.12em;color:var(--g500)}
.kors{display:grid;grid-template-columns:5fr 7fr;gap:64px;align-items:center}
@media (max-width:1199px){.kors{grid-template-columns:1fr;gap:32px}.kors .ofoto{max-width:560px}}

/* ============ donker thema ============ */
/* Licht is de standaard. Het headscript zet .wissel op html; zonder JavaScript
   blijft de pagina dus licht. Kiest de bezoeker donker, dan haalt site.js
   data-thema weg. Het palet komt van de oude site (tokens/corrections.css). */
:root.wissel:not([data-thema="licht"]){
  color-scheme:dark;
  --bk:var(--dark-tx);--wh:var(--dark-bg);
  --p100:oklch(25% 0.04 328);--p200:oklch(34% 0.06 328);--p600:oklch(70% 0.11 328);--p700:oklch(80% 0.08 328);
  --n100:oklch(22% 0.03 280);--n200:oklch(38% 0.035 280);--n300:oklch(52% 0.04 280);
  --g100:var(--dark-surface-2);--g200:oklch(30% 0.01 280);--g500:var(--dark-tx-3);
  --g600:#a3a3b0;--g700:#c9c9d2;
}
header nav .mark .wit{display:none}
:root.wissel:not([data-thema="licht"]) header nav .mark .zwart{display:none}
:root.wissel:not([data-thema="licht"]) header nav .mark .wit{display:block}
/* Logo's zijn zwart gemaakt met brightness(0); in het donker wit. */
:root.wissel:not([data-thema="licht"]) :is(.lrij img:not(.vol),.vak .vlogo,.tg-merk img,.cf-logo){filter:brightness(0) invert(1)}
:root.wissel:not([data-thema="licht"]) .melding.mis{color:oklch(72% 0.15 25)}
/* Navy als inkt (lijnen, labels, tekeningen) buiten de navy-vlakken: in het donker licht. */
:root.wissel:not([data-thema="licht"]) :is(.tg,.cb,.tbw-iso){--navy:var(--dark-tx)}

/* De schakelaar: het knopje staat op de stand waar je nu in zit. */
.thema{flex:none;padding:0;border:0;background:none;cursor:pointer;display:inline-flex;align-items:center;min-height:44px;line-height:0}
.thema-baan{position:relative;display:inline-flex;align-items:center;justify-content:space-between;width:56px;height:30px;border-radius:999px;padding:0 7px;box-sizing:border-box;background:var(--g100);border:1px solid var(--g200);transition:border-color .2s var(--ease)}
.thema-baan svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;position:relative;z-index:2;transition:color .2s var(--ease)}
.thema-knop{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:var(--bk);transition:transform .26s var(--ease)}
.thema-baan .zon{color:var(--wh)}
.thema-baan .maan{color:var(--g500)}
:root.wissel:not([data-thema="licht"]) .thema-knop{transform:translateX(26px)}
:root.wissel:not([data-thema="licht"]) .thema-baan .zon{color:var(--g500)}
:root.wissel:not([data-thema="licht"]) .thema-baan .maan{color:var(--wh)}
.thema:focus-visible{outline:0}
.thema:focus-visible .thema-baan{outline:2px solid var(--p600);outline-offset:3px}
@media(hover:hover) and (pointer:fine){.thema:hover .thema-baan{border-color:var(--g500)}}
@media(prefers-reduced-motion:reduce){.thema-knop{transition:none}}
/* site.js zet een kopie in het menu; hier blijft hij in de balk staan. */
.mnu-thema{display:none}
@media(max-width:1199px){header nav>.thema{margin-left:auto}header nav>.thema+.mnu-knop{margin-left:0}}
/* taalwissel als split-flap, zoals een vertrekbord: de huidige taal staat aan, bij hover klapt het bord om naar de andere */
.taal{flex:none;display:inline-flex;align-items:center;gap:3px;min-height:44px;min-width:44px;text-decoration:none;border-radius:8px}
.flap{position:relative;display:grid;place-items:center;width:26px;height:30px;box-sizing:border-box;border-radius:6px;background:var(--g100);border:1px solid var(--g200);color:var(--g500);perspective:90px;transition:background-color 0s .2s,border-color 0s .2s,color 0s .2s}
.flap b{position:relative;font:600 11px/1 var(--font-display);letter-spacing:.04em}
.flap::before{content:"";position:absolute;left:0;right:0;top:0;height:50%;background:var(--wh);opacity:.07}
.flap.aan{background:var(--bk);border-color:var(--bk);color:var(--wh)}
@keyframes flap{0%{transform:none;animation-timing-function:ease-in}50%{transform:rotateX(-90deg)}50.1%{transform:rotateX(90deg);animation-timing-function:ease-out}100%{transform:none}}
@media(hover:hover) and (pointer:fine){
  .taal:hover .flap b{animation:flap .4s both}
  .taal:hover .flap+.flap b{animation-delay:.06s}
  .taal:hover .flap.aan{background:var(--g100);border-color:var(--g200);color:var(--g500)}
  .taal:hover .flap:not(.aan){background:var(--bk);border-color:var(--bk);color:var(--wh)}
}
.taal:focus-visible{outline:2px solid var(--p600);outline-offset:3px}
@media(prefers-reduced-motion:reduce){.taal .flap b{animation:none!important}.flap{transition:none}}
@media(max-width:1199px){header nav>.taal{margin-left:auto}header nav>.taal+.thema{margin-left:0}}
/* partners: Trainin en het eigen logo naast elkaar, zoals de partnerbadge op de oude Trainin-pagina */
.duo{display:flex;align-items:center;justify-content:center;gap:40px;padding:72px 40px;border:1px solid rgba(255,255,255,.16);border-radius:22px;align-self:center}
.duo img{height:44px;width:auto;min-width:0}
.duo i{flex:none;width:1px;height:44px;background:rgba(255,255,255,.16)}
.openkaart{padding:32px;border-radius:22px;background:var(--p100)}
.openkaart strong{color:var(--bk)}
@media(max-width:820px){.duo{gap:24px;padding:48px 24px}.duo img,.duo i{height:28px}.openkaart{padding:24px}}
.openkaart .p+.p{margin-top:12px}