/* ==========================================================================
   AbyCo Solutions – website V2 (stijl "Aurora") – gedeelde stylesheet
   Vervangt style.css op de publieke pagina's. Beheer/portaal blijven style.css gebruiken.
   Puur CSS; animaties worden aangestuurd met klassen uit v2.js. Past binnen de CSP
   (geen externe scripts; lettertypen zelf gehost via assets/fonts.css). Sinds 16-10-2026 altijd met beweging (keuze opdrachtgever).
   Variabelen zijn gelijk aan style.css zodat academy.css / afspraak.css blijven werken.
   ========================================================================== */

:root{
  --navy:#0B2545; --navy-2:#13315C; --navy-deep:#061530; --teal:#0E9F9A; --teal-d:#0A7F7B; --teal-t:#08736F; --teal-l:#5FD3C9;
  --merk-a:#0B2545; --merk-s:#0E9F9A; --merk-l:inline; --merk-d:none;
  --mint:#E3F4F1; --amber:#F2A541; --ink:#16243A; --grey:#5B6B7B; --paper:#F6FAF9; --line:#D9E6E3;
  --bg:#FFFFFF; --surface:#FFFFFF; --heading:#0B2545; --link:#08736F; --band:#0B2545; --band-ink:#CFE3EA;
  --good:#1F9D62; --warn:#C27A12; --warn-t:#8A5300; --bad:#D2493C; --focus:#F2A541;
  --display:"Plus Jakarta Sans","Segoe UI",system-ui,sans-serif;
  --text:Inter,"Segoe UI",system-ui,-apple-system,sans-serif;
  --radius:20px; --radius-s:12px;
  --shadow:0 20px 60px -20px rgba(11,37,69,.25);
  --shadow-s:0 6px 20px -8px rgba(11,37,69,.18);
  --wrap:1200px; --hh:68px;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  color-scheme:light;
}
/* Versie CA: licht is de standaard; donker alleen via de themaknop (:root[data-theme="dark"] hieronder). */
:root[data-theme="dark"]{
  color-scheme:dark;
  --merk-a:#FFFFFF; --merk-s:#5FD3C9; --merk-l:none; --merk-d:inline;
  --bg:#071A33; --surface:#0E2544; --paper:#0A1F3C; --mint:#0F3A47; --line:#1E3A5C;
  --ink:#E6EEF3; --grey:#A7B8C7; --heading:#F2F6F9; --link:#5FD3C9; --teal-t:#5FD3C9;
  --band:#0B2545; --shadow:0 20px 60px -20px rgba(0,0,0,.6); --shadow-s:0 6px 20px -8px rgba(0,0,0,.5);
  --good:#3DC486; --warn:#F0A93F; --warn-t:#F0A93F; --bad:#F06A5C;
}

/* ---------- basis ---------- */
*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
body{ margin:0; font:400 1.02rem/1.6 var(--text); color:var(--ink); background:var(--bg); overflow-x:clip }
h1,h2,h3,h4{ font-family:var(--display); color:var(--heading); line-height:1.1; letter-spacing:-.02em; margin:0 0 .5em; font-weight:800 }
h1{ font-size:clamp(2.3rem,4.6vw,3.9rem) }
h2{ font-size:clamp(1.8rem,3.4vw,2.7rem) }
h3{ font-size:1.22rem; letter-spacing:-.01em }
h4{ font-size:1.05rem }
p{ margin:0 0 1em }
a{ color:var(--link) }
img,svg{ max-width:100% }
:focus-visible{ outline:3px solid var(--focus); outline-offset:3px; border-radius:6px }
.wrap{ max-width:var(--wrap); margin:0 auto; padding-inline:24px }
.narrow{ max-width:800px }
.visually-hidden{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
.skip{ position:absolute; left:12px; top:-60px; z-index:100; background:var(--navy); color:#fff; padding:10px 16px; border-radius:10px; font-weight:600 }
.skip:focus{ top:12px }
::selection{ background:var(--teal-l); color:var(--navy) }

/* ---------- scroll-voortgang & cursor-aura ---------- */
.progress{ position:fixed; inset:0 auto auto 0; height:3px; width:100%; z-index:70; pointer-events:none; transform-origin:0 50%; transform:scaleX(var(--scroll,0)); background:linear-gradient(90deg,var(--teal),var(--teal-l),var(--amber)) }
.aura{ position:fixed; z-index:0; width:520px; height:520px; border-radius:50%; pointer-events:none; left:0; top:0; transform:translate(calc(var(--x,-1000px) - 50%),calc(var(--y,-1000px) - 50%)); background:radial-gradient(circle,rgba(95,211,201,.16),transparent 60%); transition:transform .18s var(--ease-out); mix-blend-mode:screen; opacity:0 }
html.js .aura{ opacity:1 }
@media (hover:none){ .aura{ display:none } }

/* ---------- logo ---------- */
/* AbyCo-logo (merk BO/BP): inline SVG uit _bron/merk/bouw_merk.py. De A met diepte staat er licht (.merk-l) en donker (.merk-d) in;
   --merk-l/--merk-d kiezen per thema. Het woordmerk volgt het thema via --merk-a (navy/wit) en --merk-s (teal). */
.logo{ display:inline-flex; align-items:center; text-decoration:none; line-height:1 }
.logo .merk{ display:block; height:42px; width:auto; flex:none }
.merk .m-a{ fill:var(--merk-a) } .merk .m-s{ fill:var(--merk-s) }
.merk .merk-l{ display:var(--merk-l) } .merk .merk-d{ display:var(--merk-d) }
.site-footer, .on-dark .site-header:not(.is-scrolled){ --merk-a:#FFFFFF; --merk-s:var(--teal-l); --merk-l:none; --merk-d:inline }
@media (max-width:380px){ .logo .merk{ height:36px } }

/* ---------- header ---------- */
.site-header{ position:sticky; top:0; z-index:60; padding:14px 0; transition:padding .35s var(--ease-out) }
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:40px }
.site-header::before{ content:""; position:absolute; inset:0; background:color-mix(in srgb,var(--bg) 78%,transparent); backdrop-filter:saturate(1.6) blur(14px); -webkit-backdrop-filter:saturate(1.6) blur(14px); border-bottom:1px solid transparent; transition:border-color .35s, background .35s; z-index:-1 }
.site-header.is-scrolled{ padding:8px 0 }
.site-header.is-scrolled::before{ border-bottom-color:var(--line); box-shadow:0 10px 30px -20px rgba(11,37,69,.35) }
.on-dark .site-header:not(.is-scrolled)::before{ background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none }
.on-dark .site-header:not(.is-scrolled) .main-nav > ul > li > a, .on-dark .site-header:not(.is-scrolled) .main-nav > ul > li > .sub-btn{ color:#DCE9EF }
.on-dark .site-header:not(.is-scrolled) .theme-btn{ color:#fff; border-color:rgba(255,255,255,.25) }
.on-dark .site-header:not(.is-scrolled) .nav-portal a{ border-color:rgba(255,255,255,.3) }
.on-dark .site-header:not(.is-scrolled) .nav-toggle{ background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.25) }
.main-nav > ul{ list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:0 }
.main-nav a, .main-nav .sub-btn{ color:var(--ink); text-decoration:none; font:500 .95rem var(--text); padding:10px 12px; border-radius:10px; display:inline-flex; align-items:center; gap:6px; position:relative; white-space:nowrap; background:none; border:0; cursor:pointer }
.main-nav > ul > li > a::after{ content:""; position:absolute; left:12px; right:12px; bottom:6px; height:2px; border-radius:2px; background:var(--teal); transform:scaleX(0); transform-origin:0 50%; transition:transform .3s var(--ease-out) }
.main-nav > ul > li > a:hover::after, .main-nav > ul > li > a[aria-current="page"]::after{ transform:scaleX(1) }
.main-nav .has-mega{ display:flex; align-items:center }
.main-nav .has-mega > a{ padding-right:2px } .main-nav .has-mega > a::after{ right:2px }
.main-nav .sub-btn{ padding:10px 8px 10px 2px }
.main-nav .sub-btn svg{ width:13px; height:13px; flex:none; transition:transform .3s var(--ease-out) }
.main-nav .has-mega.open .sub-btn svg, .main-nav .has-mega.hold .sub-btn svg, .main-nav .has-mega:hover .sub-btn svg{ transform:rotate(180deg) }
.main-nav .mega{ position:absolute; top:calc(100% + 8px); left:50%; transform:translate(-50%,10px) scale(.98); width:min(92vw,900px); background:var(--surface); border:1px solid var(--line); border-radius:22px; box-shadow:0 40px 90px -30px rgba(11,37,69,.45); padding:22px; display:grid; grid-template-columns:1.3fr 1fr; gap:22px; opacity:0; pointer-events:none; transition:opacity .25s var(--ease-out), transform .35s var(--ease-out); z-index:30; transform-origin:top center; color:var(--ink) }
.main-nav .has-mega.open > .mega, .main-nav .has-mega.hold > .mega, .main-nav .has-mega:hover > .mega, .main-nav .has-mega:focus-within > .mega{ opacity:1; pointer-events:auto; transform:translate(-50%,0) }
.mega h3{ font:700 .72rem var(--display); letter-spacing:.14em; text-transform:uppercase; color:var(--grey); margin:0 0 10px }
.mega .items{ display:grid; grid-template-columns:1fr 1fr; gap:6px }
.mega .items a{ display:grid; grid-template-columns:40px 1fr; gap:12px; align-items:start; padding:10px; border-radius:14px; color:var(--ink); white-space:normal; font:500 .9rem/1.35 var(--text); transition:background .2s, transform .3s var(--ease-out) }
.mega .items a:hover{ background:var(--paper); transform:translateX(4px) }
.mega .items a .ico{ width:40px; height:40px; margin:0; border-radius:11px } .mega .items a .ico svg{ width:20px; height:20px }
.mega .items a b{ display:block; font-family:var(--display); color:var(--heading); font-weight:700 } .mega .items a small{ color:var(--grey); font-size:.8rem }
.mega .feat{ background:linear-gradient(160deg,var(--navy-2),var(--navy-deep)); border-radius:16px; padding:20px; color:#D7E6EC; display:grid; align-content:space-between; gap:14px; position:relative; overflow:hidden }
.mega .feat::after{ content:""; position:absolute; right:-40px; top:-40px; width:160px; height:160px; border-radius:50%; background:radial-gradient(circle,rgba(95,211,201,.45),transparent 65%); filter:blur(10px) }
.mega .feat > *{ position:relative; z-index:1 }
.mega .feat .kicker{ color:var(--teal-l); margin-bottom:8px } .mega .feat .kicker::before{ display:none }
.mega .feat h4{ color:#fff; margin:0 0 .3em; font-size:1.05rem } .mega .feat p{ margin:0; font-size:.86rem }
.mega .feat a{ color:var(--teal-l); padding:0; font-weight:700; display:inline-flex }
.mega .feat .links{ display:grid; gap:6px }
.mega .list{ display:grid; gap:2px } .mega .list a{ padding:8px 10px; border-radius:10px; color:var(--ink); white-space:normal; font:500 .9rem/1.35 var(--text) }
.mega .list a:hover{ background:var(--paper) }
.nav-portal a{ border:1px solid color-mix(in srgb,var(--ink) 20%,transparent); border-radius:999px; padding:8px 14px; gap:6px; font-size:.9rem; margin-left:6px }
.nav-portal a::after{ display:none !important }
.nav-portal svg{ width:15px; height:15px; flex:none }
.nav-portal a:hover{ border-color:var(--teal); color:var(--teal-t) }
.nav-cta a{ background:var(--teal-d); color:#fff !important; font-weight:700; font-family:var(--display); padding:10px 18px; border-radius:999px; margin-left:8px; overflow:hidden }
.nav-cta a::after{ display:none !important }
.nav-cta a::before{ content:""; position:absolute; inset:0; background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%); transform:translateX(-120%); transition:transform .6s var(--ease-io) }
.nav-cta a:hover::before{ transform:translateX(120%) }
.theme-btn{ width:40px; height:40px; border-radius:50%; border:1px solid color-mix(in srgb,var(--ink) 18%,transparent); background:transparent; color:var(--ink); cursor:pointer; display:grid; place-items:center; margin-left:8px; transition:transform .4s var(--ease-out), background .3s }
.theme-btn:hover{ transform:rotate(30deg); background:var(--paper) }
.theme-btn svg{ width:18px; height:18px }
.theme-btn .moon{ display:none }
:root[data-theme="dark"] .theme-btn .sun{ display:none } :root[data-theme="dark"] .theme-btn .moon{ display:block }
.nav-toggle{ display:none }
@media (min-width:1101px) and (max-width:1300px){
  .main-nav a, .main-nav .sub-btn{ font-size:.9rem; padding-left:8px; padding-right:8px }
  .nav-portal span{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0) }
  .nav-portal a{ padding:8px 11px }
}
@media (max-width:1100px){
  .nav-toggle{ display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line); background:var(--surface); color:var(--ink); border-radius:999px; padding:9px 14px; font:600 .92rem var(--text); cursor:pointer; position:relative; z-index:2 }
  .nav-toggle svg{ width:20px; height:20px }
  .main-nav{ position:fixed; inset:0; background:var(--navy-deep); z-index:1; overflow:auto; padding:90px 24px 40px; opacity:0; pointer-events:none; clip-path:circle(0 at calc(100% - 60px) 40px); transition:clip-path .6s var(--ease-io), opacity .3s }
  .main-nav.open{ opacity:1; pointer-events:auto; clip-path:circle(160% at calc(100% - 60px) 40px) }
  .main-nav > ul{ flex-direction:column; align-items:stretch; gap:4px; max-width:560px; margin:0 auto }
  .main-nav > ul > li{ transform:translateY(16px); opacity:0; transition:transform .5s var(--ease-out), opacity .5s; transition-delay:calc(var(--i,0)*50ms + .2s) }
  .main-nav.open > ul > li{ transform:none; opacity:1 }
  .main-nav > ul > li > a, .main-nav > ul > li > .sub-btn{ color:#fff !important; font:700 1.35rem var(--display); letter-spacing:-.02em; padding:12px 8px }
  .main-nav > ul > li > a::after{ display:none }
  .main-nav .has-mega{ flex-wrap:wrap; justify-content:space-between }
  .main-nav .has-mega > a{ flex:1 }
  .main-nav .sub-btn{ width:48px; height:48px; justify-content:center; border:1px solid rgba(255,255,255,.2); border-radius:12px; padding:0 }
  .main-nav .sub-btn svg{ width:18px; height:18px }
  .main-nav .mega{ position:static; transform:none; width:100%; display:none; grid-template-columns:1fr; gap:14px; padding:6px 0 14px; background:transparent; border:0; box-shadow:none; opacity:1; pointer-events:auto; color:#DCE9EF }
  .main-nav .has-mega.open > .mega{ display:grid; transform:none }
  .mega h3{ color:var(--teal-l) }
  .mega .items{ grid-template-columns:1fr; gap:2px }
  .mega .items a, .mega .list a{ color:#fff; padding:8px 10px; grid-template-columns:1fr; gap:2px }
  .mega .items a .ico{ display:none } .mega .items a b{ color:#fff } .mega .items a small{ color:#9DB6C4 }
  .mega .items a:hover, .mega .list a:hover{ background:rgba(255,255,255,.08); transform:none }
  .mega .feat{ display:none }
  .nav-portal a{ border-color:rgba(255,255,255,.3) !important; justify-content:center; margin:10px 0 0; font-size:1rem !important; padding:14px !important }
  .nav-cta a{ background:var(--teal-l); color:var(--navy) !important; justify-content:center; padding:16px !important; margin:6px 0 0 }
  .theme-btn{ margin:14px auto 0; color:#fff !important; border-color:rgba(255,255,255,.3) !important }
}

/* ---------- knoppen ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; font:700 1rem var(--display); text-decoration:none; border-radius:999px; padding:15px 26px; border:2px solid transparent; cursor:pointer; line-height:1.2; position:relative; overflow:hidden; isolation:isolate; transition:transform .4s var(--ease-out), background .25s, color .25s, border-color .25s, box-shadow .4s }
.btn svg{ width:18px; height:18px; transition:transform .3s var(--ease-out) }
.btn:hover svg{ transform:translateX(4px) }
.btn::before{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.35) 50%,transparent 65%); transform:translateX(-130%); transition:transform .7s var(--ease-io) }
.btn:hover::before{ transform:translateX(130%) }
.btn--primary{ background:var(--teal-d); color:#fff; box-shadow:0 10px 30px -10px rgba(14,159,154,.6) }
.btn--primary:hover{ background:var(--teal); color:#fff; box-shadow:0 18px 40px -12px rgba(14,159,154,.7); transform:translateY(-2px) }
.btn--ghost{ background:transparent; color:var(--heading); border-color:var(--line) }
.btn--ghost:hover{ border-color:var(--teal); color:var(--teal-t); transform:translateY(-2px) }
.on-navy .btn--primary{ background:var(--teal-l); color:var(--navy) }
.on-navy .btn--primary:hover{ background:#fff; color:var(--navy) }
.on-navy .btn--ghost{ color:#fff; border-color:rgba(255,255,255,.35); background:rgba(255,255,255,.04); backdrop-filter:blur(6px) }
.on-navy .btn--ghost:hover{ border-color:#fff; color:#fff }
.btn:disabled{ opacity:.6; cursor:wait; transform:none }
.btn-row{ display:flex; flex-wrap:wrap; gap:14px; margin-top:1.8rem }
.link-arrow{ font-weight:700; text-decoration:none; font-family:var(--display); display:inline-flex; align-items:center; gap:6px }
.link-arrow::after{ content:"→"; transition:transform .3s var(--ease-out) }
.link-arrow:hover::after{ transform:translateX(5px) }
.link-arrow:hover{ text-decoration:underline }

/* ---------- secties ---------- */
.section{ padding:96px 0; position:relative }
.section--tight{ padding:56px 0 }
.section--paper{ background:var(--paper) }
.section--mint{ background:linear-gradient(180deg,var(--mint),color-mix(in srgb,var(--mint) 60%,var(--bg))) }
.section--navy, .on-navy{ background:var(--band); color:var(--band-ink) }
.on-navy h1,.on-navy h2,.on-navy h3,.on-navy h4{ color:#fff }
.on-navy a{ color:var(--teal-l) }
.kicker{ font:700 .78rem/1.2 var(--display); letter-spacing:.16em; text-transform:uppercase; color:var(--teal-t); margin:0 0 14px; display:inline-flex; align-items:center; gap:10px }
.kicker::before{ content:""; width:22px; height:2px; background:currentColor; border-radius:2px; transform:scaleX(0); transform-origin:0 50%; transition:transform .8s var(--ease-out) .1s }
html.no-js .kicker::before, .is-in .kicker::before, .kicker.is-in::before{ transform:scaleX(1) }
.on-navy .kicker{ color:var(--teal-l) }
.lead{ font-size:1.18rem; color:var(--grey); max-width:66ch }
.on-navy .lead{ color:var(--band-ink) }
.section-head{ max-width:800px; margin-bottom:48px }
.section-head.center{ margin-inline:auto; text-align:center }
.section-head.center .lead{ margin-inline:auto }
.section-head.center .kicker::before{ display:none }
.note{ font-size:.86rem; color:var(--grey) }
.on-navy .note{ color:#A9C3D0 }

/* ---------- reveal (scroll-animaties) ---------- */
html.js [data-reveal]{ opacity:0; transform:translateY(28px); filter:blur(6px); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out), filter .9s var(--ease-out); transition-delay:calc(var(--i,0)*80ms) }
html.js [data-reveal="left"]{ transform:translateX(-40px) }
html.js [data-reveal="right"]{ transform:translateX(40px) }
html.js [data-reveal="scale"]{ transform:scale(.92) }
html.js [data-reveal].is-in{ opacity:1; transform:none; filter:none }
html.js .split .w{ display:inline-block; overflow:hidden; vertical-align:bottom; padding-bottom:.08em; margin-bottom:-.08em }
html.js .split .w > span{ display:inline-block; transform:translateY(125%); transition:transform 1s var(--ease-out); transition-delay:calc(var(--i)*55ms + var(--d,0ms)) }
html.js .split.is-in .w > span{ transform:none }

/* ---------- hero ---------- */
.hero{ position:relative; overflow:hidden; padding:96px 0 110px; background:radial-gradient(120% 90% at 80% 0%,#12386A 0%,var(--navy) 45%,var(--navy-deep) 100%); color:var(--band-ink); isolation:isolate }
.on-dark .hero{ margin-top:calc(-1 * var(--hh)); padding-top:calc(96px + var(--hh)) }
.hero canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:0; opacity:.9 }
.aurora{ position:absolute; inset:-20%; z-index:0; pointer-events:none; filter:blur(70px); opacity:.75 }
.aurora i{ position:absolute; border-radius:50%; mix-blend-mode:screen }
.aurora i:nth-child(1){ width:55vw; height:55vw; left:-10%; top:-10%; background:radial-gradient(circle,rgba(14,159,154,.55),transparent 65%); animation:drift1 22s ease-in-out infinite alternate }
.aurora i:nth-child(2){ width:45vw; height:45vw; right:-5%; top:10%; background:radial-gradient(circle,rgba(95,211,201,.4),transparent 65%); animation:drift2 26s ease-in-out infinite alternate }
.aurora i:nth-child(3){ width:35vw; height:35vw; left:40%; bottom:-20%; background:radial-gradient(circle,rgba(242,165,65,.22),transparent 65%); animation:drift3 30s ease-in-out infinite alternate }
@keyframes drift1{ to{ transform:translate(12%,18%) scale(1.15) } }
@keyframes drift2{ to{ transform:translate(-15%,12%) scale(.9) } }
@keyframes drift3{ to{ transform:translate(-20%,-25%) scale(1.2) } }
.grain{ position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.07; mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") }
.gridlines{ position:absolute; inset:0; z-index:0; pointer-events:none; background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px); background-size:56px 56px; mask-image:radial-gradient(70% 60% at 50% 40%,#000 30%,transparent 100%); -webkit-mask-image:radial-gradient(70% 60% at 50% 40%,#000 30%,transparent 100%) }
.hero .wrap{ position:relative; z-index:2 }
.hero-grid{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:56px; align-items:center }
.hero h1{ color:#fff; margin-bottom:.4em; max-width:16ch }
.hero h1 em{ font-style:normal; background:linear-gradient(90deg,var(--teal-l),#9AF0E7 50%,var(--teal-l)); -webkit-background-clip:text; background-clip:text; color:transparent; background-size:200% 100%; animation:shine 6s linear infinite }
@keyframes shine{ to{ background-position:200% 0 } }
.hero .lead{ font-size:1.22rem; max-width:56ch }
.hero--page{ padding:56px 0 72px }
.on-dark .hero--page{ padding-top:calc(56px + var(--hh)) }
.hero--page h1{ font-size:clamp(2rem,4vw,3.1rem); max-width:22ch }
.hero--page .lead{ max-width:62ch; font-size:1.18rem }
.live{ display:inline-flex; align-items:center; gap:10px; padding:6px 14px 6px 8px; border-radius:999px; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06); font:600 .8rem var(--text); color:#DCE9EF; margin-bottom:22px; backdrop-filter:blur(8px) }
.live i{ width:9px; height:9px; border-radius:50%; background:var(--teal-l); box-shadow:0 0 0 0 rgba(95,211,201,.7); animation:pulse 1.8s ease-out infinite }
@keyframes pulse{ to{ box-shadow:0 0 0 12px rgba(95,211,201,0) } }
.rotator{ display:inline-grid; vertical-align:bottom; text-align:left; overflow:hidden; height:1.12em; line-height:1.12 }
.rotator span{ grid-area:1/1; white-space:nowrap; transform:translateY(110%); opacity:0; transition:transform .7s var(--ease-out), opacity .5s }
.rotator span.is-on{ transform:none; opacity:1 }
.rotator span.is-off{ transform:translateY(-110%); opacity:0 }
.pills{ display:flex; flex-wrap:wrap; gap:10px; margin-top:34px; padding:0; list-style:none }
.pills li{ display:inline-flex; align-items:center; gap:8px; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.05); border-radius:999px; padding:7px 14px; font-size:.86rem; color:#E3F4F1; backdrop-filter:blur(8px) }
.pills li::before{ content:""; width:16px; height:16px; border-radius:50%; flex:none; background:var(--teal-l) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='m5 9.2 2.6 2.5L13 6.3' stroke='%230B2545' stroke-width='2.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat }
.crumbs{ margin:0 0 26px; font-size:.88rem }
.crumbs ol{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:4px }
.crumbs li{ color:#A9C3D0 }
.crumbs li + li::before{ content:"/"; margin:0 6px 0 2px; opacity:.6 }
.crumbs a{ color:#E3F4F1; text-decoration:none } .crumbs a:hover{ text-decoration:underline }
.crumbs [aria-current]{ color:#fff }
.meta-line{ display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:18px; font-size:.9rem; color:#A9C3D0 }

/* Hero-visual (V3): bewijsrapport als document */
.hero-art{ position:relative; min-height:520px; perspective:1200px }
.orbit{ position:absolute; inset:0; display:grid; place-items:center; pointer-events:none }
.orbit-ring{ width:min(78%,440px); aspect-ratio:1; border-radius:50%; border:1px dashed rgba(255,255,255,.15); animation:spin 60s linear infinite }
.orbit-ring.r2{ position:absolute; width:min(56%,320px); border-color:rgba(95,211,201,.25); animation-duration:40s; animation-direction:reverse }
@keyframes spin{ to{ transform:rotate(360deg) } }
.chip{ position:absolute; display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border-radius:14px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(12px); color:#fff; font:600 .82rem var(--text); box-shadow:0 20px 40px -20px rgba(0,0,0,.6); z-index:2 }
html.js .chip{ opacity:0; animation:chipin .9s var(--ease-out) forwards, floaty var(--t,7s) ease-in-out infinite; animation-delay:var(--d,0s), calc(var(--d,0s) + .9s) }
@keyframes chipin{ from{ opacity:0; transform:translateY(20px) scale(.9) } to{ opacity:1; transform:none } }
@keyframes floaty{ 50%{ transform:translateY(-10px) } }
.chip b{ width:22px; height:22px; border-radius:7px; display:grid; place-items:center; background:var(--teal-l); color:var(--navy); font-size:.75rem; flex:none }
.chip.amber b{ background:var(--amber) }
.docrep{ position:absolute; inset:auto 0 0 auto; width:min(100%,470px); background:#fff; color:#16243A; border-radius:14px; box-shadow:0 50px 100px -30px rgba(0,0,0,.8); overflow:hidden; transform:translateZ(40px) rotateY(-8deg) rotateX(4deg); font-size:.74rem }
html.js .docrep{ opacity:0; animation:docin 1.2s var(--ease-out) .5s forwards }
@keyframes docin{ from{ opacity:0; transform:translateY(40px) translateZ(40px) rotateY(-16deg) } to{ opacity:1; transform:translateZ(40px) rotateY(-8deg) rotateX(4deg) } }
.docrep .dh{ background:#0B2545; color:#D7E6EC; padding:12px 16px; display:flex; justify-content:space-between; align-items:center; gap:10px }
.docrep .dh b{ color:#fff; font-family:var(--display); font-size:.86rem; display:block } .docrep .dh small{ font-size:.66rem }
.docrep .score{ display:flex; gap:5px; flex:none }
.docrep .score span{ background:rgba(255,255,255,.12); border-radius:999px; padding:2px 8px; font-size:.64rem; color:#fff; font-weight:600; white-space:nowrap }
.docrep table{ width:100%; border-collapse:collapse }
.docrep th{ text-align:left; font:700 .62rem var(--display); color:#5B6B7B; text-transform:uppercase; letter-spacing:.06em; padding:8px 14px; background:#F6FAF9; border-bottom:1px solid #D9E6E3 }
.docrep td{ padding:8px 14px; border-bottom:1px solid #D9E6E3; vertical-align:middle }
html.js .docrep td{ opacity:0; transform:translateX(-8px); animation:rowin .6s var(--ease-out) forwards; animation-delay:calc(1.1s + var(--i)*110ms) }
@keyframes rowin{ to{ opacity:1; transform:none } }
.docrep td .src{ display:block; color:#5B6B7B; font-size:.62rem }
.docrep .dot{ font-size:.68rem }
.docrep .dot::before{ box-shadow:0 0 0 0 rgba(31,157,98,.5); animation:pulse 2s ease-out infinite }
.docrep .ref{ color:#08736F; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; background:none; border:0; padding:8px 14px; margin:0; font-size:.74rem }
.docrep .df{ padding:8px 14px; font-size:.62rem; color:#5B6B7B; background:#F6FAF9 }
.stamp{ position:absolute; right:-10px; bottom:-26px; z-index:3; width:96px; height:96px; border-radius:50%; background:var(--teal-l); color:var(--navy); display:grid; place-items:center; text-align:center; font:800 .62rem/1.15 var(--display); letter-spacing:.06em; text-transform:uppercase; box-shadow:0 20px 40px -14px rgba(95,211,201,.8); transform:rotate(-12deg) }
html.js .stamp{ transform:rotate(-12deg) scale(0); animation:stampin .6s cubic-bezier(.34,1.56,.64,1) 2.2s forwards }
@keyframes stampin{ to{ transform:rotate(-12deg) scale(1) } }
.stamp b{ display:block; font-size:1.5rem; letter-spacing:0 }

/* ---------- statistieken ---------- */
.stats{ margin-top:-50px; position:relative; z-index:3 }
.stats .wrap > div{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden }
.stat{ padding:28px 26px; border-left:1px solid var(--line); position:relative }
.stat:first-child{ border-left:0 }
.stat b{ display:block; font:800 clamp(2rem,3.4vw,2.8rem)/1 var(--display); color:var(--heading); letter-spacing:-.03em; font-variant-numeric:tabular-nums }
.stat b small{ font-size:.5em; color:var(--teal-t); font-weight:700; margin-left:2px }
.stat > span{ font-size:.9rem; color:var(--grey) }

/* ---------- marquee ---------- */
.marquee{ overflow:hidden; padding:26px 0; border-block:1px solid var(--line); mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent) }
.marquee ul{ display:flex; gap:56px; list-style:none; margin:0; padding:0; width:max-content; animation:marquee 40s linear infinite }
.marquee:hover ul{ animation-play-state:paused }
.marquee li{ font:700 .95rem var(--display); letter-spacing:.08em; text-transform:uppercase; color:var(--grey); display:flex; align-items:center; gap:56px; white-space:nowrap }
.marquee li::after{ content:""; width:6px; height:6px; border-radius:50%; background:var(--teal) }
@keyframes marquee{ to{ transform:translateX(-50%) } }

/* ---------- urgentie ---------- */
.urgency{ padding:96px 0; background:var(--paper); position:relative; overflow:hidden }
.urgency .grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px }
.urg{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:28px; position:relative; overflow:hidden; transition:transform .5s var(--ease-out), box-shadow .5s }
.urg:hover{ transform:translateY(-6px); box-shadow:var(--shadow) }
.urg::before{ content:""; position:absolute; inset:0 auto auto 0; height:4px; width:100%; background:linear-gradient(90deg,var(--amber),var(--teal)) }
.urg .date{ display:inline-block; background:var(--amber); color:var(--navy); font:800 .78rem var(--display); border-radius:999px; padding:4px 12px; margin-bottom:14px }
.urg h3{ margin-bottom:.35em }
.urg p{ font-size:.95rem; color:var(--grey) }
.count{ display:flex; align-items:baseline; gap:8px; margin:12px 0 6px; font:800 2.6rem/1 var(--display); color:var(--heading); letter-spacing:-.03em; font-variant-numeric:tabular-nums }
.count small{ font:600 .85rem var(--text); color:var(--grey); letter-spacing:0 }
.urgency-foot{ background:var(--paper); color:var(--grey); font-size:.8rem; padding:0 0 18px }

/* ---------- vergelijking ---------- */
.table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow-s) }
table.cmp{ width:100%; border-collapse:collapse; font-size:.95rem; min-width:720px }
table.cmp caption{ text-align:left; padding:14px 18px; color:var(--grey); font-size:.86rem; caption-side:bottom; border-top:1px solid var(--line) }
table.cmp th, table.cmp td{ padding:16px; border-bottom:1px solid var(--line); text-align:center; vertical-align:middle }
table.cmp thead th{ font-family:var(--display); font-size:.9rem; color:var(--heading); background:var(--paper) }
table.cmp tbody th{ text-align:left; font-weight:500; color:var(--ink) }
table.cmp tr:last-child th, table.cmp tr:last-child td{ border-bottom:0 }
table.cmp thead th:first-child{ text-align:left }
table.cmp tbody th, table.cmp thead th:first-child{ position:sticky; left:0; z-index:1; background:var(--surface) }
table.cmp thead th:first-child{ background:var(--paper) }
@media (max-width: 680px){
  table.cmp{ min-width:640px; font-size:.88rem }
  table.cmp tbody th, table.cmp thead th:first-child{ min-width:150px; max-width:170px; box-shadow:1px 0 0 var(--line) }
  table.cmp th, table.cmp td{ padding:12px 10px }
}
table.cmp .us{ background:var(--mint); position:relative }
table.cmp thead .us{ background:var(--navy); color:#fff }
table.cmp thead .us::after{ content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 2px var(--teal-l); border-radius:12px 12px 0 0; animation:glow 2.4s ease-in-out infinite; pointer-events:none }
@keyframes glow{ 50%{ box-shadow:inset 0 0 0 2px var(--teal-l), 0 0 30px rgba(95,211,201,.5) } }
html.js table.cmp tbody tr{ opacity:0; transform:translateX(-14px); transition:opacity .6s var(--ease-out), transform .6s var(--ease-out); transition-delay:calc(var(--i)*90ms) }
html.js table.cmp.is-in tbody tr{ opacity:1; transform:none }
.yes,.no,.part{ display:inline-flex; align-items:center; gap:7px; font-weight:600; font-size:.9rem }
.yes::before,.no::before,.part::before{ content:""; width:20px; height:20px; border-radius:50%; flex:none; background-position:center; background-repeat:no-repeat }
.yes{ color:var(--teal-t) } .yes::before{ background-color:var(--teal-d); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='m5 9.2 2.6 2.5L13 6.3' stroke='%23fff' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") }
.no{ color:var(--grey) } .no::before{ background-color:var(--line); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M6 9h6' stroke='%235B6B7B' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") }
.part{ color:var(--warn-t) } .part::before{ background-color:var(--amber); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='2.6' fill='%230B2545'/%3E%3C/svg%3E") }
.legend{ display:flex; flex-wrap:wrap; gap:18px; margin-top:14px; font-size:.86rem; color:var(--grey) }

/* ---------- grids & kaarten ---------- */
.grid{ display:grid; gap:24px }
.g2{ grid-template-columns:repeat(2,minmax(0,1fr)) }
.g3{ grid-template-columns:repeat(3,minmax(0,1fr)) }
.g4{ grid-template-columns:repeat(4,minmax(0,1fr)) }
.card{ --mx:50%; --my:50%; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:28px; position:relative; transform-style:preserve-3d; transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .3s }
.card--paper{ background:var(--paper) }
.card--mint{ background:var(--mint); border-color:transparent }
.card--navy{ background:linear-gradient(160deg,var(--navy-2),var(--navy-deep)); border-color:transparent; color:var(--band-ink) }
.card--navy h3, .card--navy h2{ color:#fff }
.card h3{ margin-bottom:.4em }
.card p:last-child{ margin-bottom:0 }
.card p{ overflow-wrap:break-word } /* één heel lang woord (bijv. gegevensbeschermingseffectbeoordeling) breekt af i.p.v. buiten de kaart */
.card .link-arrow{ display:inline-flex; margin-top:6px }
a.card{ text-decoration:none; color:inherit; display:block; overflow:hidden }
a.card::before{ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(360px circle at var(--mx) var(--my),rgba(14,159,154,.14),transparent 45%); opacity:0; transition:opacity .4s }
a.card::after{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none; background:radial-gradient(300px circle at var(--mx) var(--my),var(--teal-l),transparent 50%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:opacity .4s }
a.card:hover{ box-shadow:var(--shadow); transform:translateY(-6px) rotateX(var(--rx,0)) rotateY(var(--ry,0)) }
a.card:hover::before, a.card:hover::after{ opacity:1 }
a.card p{ color:var(--grey) }
.ico{ width:52px; height:52px; border-radius:14px; background:var(--mint); display:grid; place-items:center; margin-bottom:18px; flex:none; transition:transform .5s var(--ease-out), background .3s }
a.card:hover .ico{ transform:translateY(-4px) rotate(-6deg) scale(1.08); background:var(--teal-l) }
.ico svg{ width:26px; height:26px; stroke:var(--teal-t); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round }
a.card:hover .ico svg{ stroke:var(--navy) }
.card--mint .ico{ background:var(--surface) }
.ref{ display:inline-block; font-size:.76rem; font-weight:600; color:var(--teal-t); background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:2px 10px; margin-top:10px }
.tag{ display:inline-block; background:var(--amber); color:var(--navy); font:700 .76rem var(--display); border-radius:999px; padding:3px 11px; margin-bottom:12px; letter-spacing:.02em }
.tag--mint{ background:var(--mint); color:var(--teal-t) }
ul.check{ list-style:none; margin:0; padding:0; display:grid; gap:9px }
ul.check li{ position:relative; padding-left:30px; font-size:.96rem }
ul.check li::before{ content:""; position:absolute; left:0; top:.2em; width:20px; height:20px; border-radius:50%; background:var(--teal-d) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='m5 9.2 2.6 2.5L13 6.3' stroke='%23fff' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat; transition:transform .5s var(--ease-out); transition-delay:calc(var(--i,0)*70ms + .2s) }
html.js ul.check li::before{ transform:scale(0) }
html.js .is-in ul.check li::before, html.js ul.check.is-in li::before{ transform:scale(1) }
.on-navy ul.check li::before, .card--navy ul.check li::before, .p1 ul.check li::before, .pkg--hl ul.check li::before{ background-color:var(--teal-l); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='m5 9.2 2.6 2.5L13 6.3' stroke='%230B2545' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") }

/* ---------- stappen (tijdlijn) ---------- */
.steps{ --prog:0; list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:18px; position:relative; counter-reset:step }
.steps::before{ content:""; position:absolute; left:0; right:0; top:26px; height:3px; background:var(--line); border-radius:3px }
.steps::after{ content:""; position:absolute; left:0; top:26px; height:3px; width:100%; border-radius:3px; background:linear-gradient(90deg,var(--teal),var(--teal-l)); transform:scaleX(var(--prog)); transform-origin:0 50%; transition:transform .2s linear }
.steps li{ position:relative; padding-top:70px }
.steps .num{ position:absolute; top:0; left:0; width:54px; height:54px; border-radius:50%; background:var(--surface); border:3px solid var(--line); color:var(--grey); font:800 1.05rem var(--display); display:grid; place-items:center; transition:background .4s, border-color .4s, color .4s, transform .5s var(--ease-out), box-shadow .5s }
html.no-js .steps .num, .steps li.is-active .num{ background:var(--teal-d); border-color:var(--teal-l); color:#fff }
.steps li.is-active .num{ transform:scale(1.1); box-shadow:0 0 0 8px rgba(14,159,154,.15) }
.steps .when{ display:inline-block; font-size:.76rem; font-weight:700; color:var(--teal-t); background:var(--mint); border-radius:999px; padding:3px 10px; margin-bottom:10px }
.steps h3{ font-size:1.02rem } .steps p{ margin:0; font-size:.92rem; color:var(--grey) }
.callout{ border-left:4px solid var(--teal); background:var(--mint); border-radius:0 16px 16px 0; padding:20px 24px; margin:1.6em 0 }
.callout p:last-child, .callout ul:last-child{ margin-bottom:0 }
.callout--amber{ border-left-color:var(--amber); background:var(--paper) }
.callout h3, .callout h4{ margin-top:0 }

/* ---------- partners ---------- */
.tri{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px }
.party{ border-radius:var(--radius); padding:32px 28px; position:relative; overflow:hidden; transition:transform .5s var(--ease-out), box-shadow .5s }
.party:hover{ transform:translateY(-6px); box-shadow:var(--shadow) }
.party .role{ font:700 .76rem var(--display); letter-spacing:.14em; text-transform:uppercase; margin-bottom:10px }
.party h3{ font-size:1.35rem }
.p1{ background:linear-gradient(160deg,var(--navy-2),var(--navy-deep)); color:#D7E6EC } .p1 h3{ color:#fff } .p1 .role, .p1 a{ color:var(--teal-l) }
.p2{ background:var(--surface); border:1px solid var(--line) } .p2 .role{ color:var(--teal-t) }
.p3{ background:var(--surface); border:2px dashed var(--teal) } .p3 .role{ color:var(--teal-t) }

/* ---------- pakketten ---------- */
.pkgs{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; align-items:stretch }
.pkg{ border:1px solid var(--line); border-radius:var(--radius); padding:32px 28px; background:var(--surface); display:flex; flex-direction:column; position:relative; transition:transform .5s var(--ease-out), box-shadow .5s }
.pkg:hover{ transform:translateY(-6px); box-shadow:var(--shadow) }
.pkg h3{ font-size:1.5rem; margin-bottom:.2em }
.pkg .for{ color:var(--grey); min-height:3.2em }
.pkg ul.check{ margin-top:10px; font-size:.96rem }
.pkg .result{ margin-top:auto; padding-top:16px; border-top:1px solid var(--line); font-size:.92rem }
.pkg--hl{ background:linear-gradient(160deg,var(--navy-2),var(--navy-deep)); color:var(--band-ink); border-color:transparent; box-shadow:0 30px 60px -30px rgba(11,37,69,.6); transform:translateY(-10px) }
.pkg--hl:hover{ transform:translateY(-16px) }
.pkg--hl::before{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; background:linear-gradient(160deg,var(--teal-l),transparent 60%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none }
.pkg--hl h3{ color:#fff } .pkg--hl .for{ color:var(--band-ink) } .pkg--hl .result{ border-color:rgba(255,255,255,.18) }
.pkg .tag{ align-self:flex-start }
.guarantee{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:20px; align-items:start; background:var(--mint); border-radius:var(--radius); padding:28px }
.guarantee svg{ width:52px; height:52px }
.guarantee h2, .guarantee h3{ margin-bottom:.3em }
.levels{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--surface) }
.level{ padding:26px; border-left:1px solid var(--line); transition:background .3s }
.level:hover{ background:var(--paper) }
.level:first-child{ border-left:0 }
.level .lvl{ font:800 .8rem var(--display); letter-spacing:.12em; text-transform:uppercase; color:var(--teal-t) }
.level h3{ margin:.3em 0 .4em }

/* ---------- FAQ ---------- */
.faq{ display:grid; gap:12px }
.faq details{ background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:0 22px; transition:border-color .3s, box-shadow .3s }
.faq details[open]{ border-color:var(--teal); box-shadow:var(--shadow-s) }
.faq summary{ cursor:pointer; list-style:none; padding:18px 40px 18px 0; font:700 1.04rem/1.35 var(--display); color:var(--heading); position:relative }
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{ content:""; position:absolute; right:2px; top:50%; width:28px; height:28px; border-radius:50%; background:var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6v12M6 12h12' stroke='%2308736F' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/14px no-repeat; transform:translateY(-50%); transition:transform .4s var(--ease-out), background-color .3s }
.faq details[open] summary::after{ transform:translateY(-50%) rotate(135deg); background-color:var(--teal-l) }
.faq .a{ padding:0 0 18px; color:var(--ink) }
html.js .faq .a{ animation:faqin .5s var(--ease-out) }
@keyframes faqin{ from{ opacity:0; transform:translateY(-6px) } }
.faq .a p:last-child{ margin-bottom:0 }
.faq-cat{ margin-top:36px } .faq-cat:first-child{ margin-top:0 }
.faq-nav{ display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0; margin:0 0 28px }
.faq-nav a{ display:inline-block; padding:7px 14px; border-radius:999px; background:var(--mint); text-decoration:none; font-weight:600; font-size:.9rem; color:var(--heading); transition:background .2s, color .2s, transform .3s var(--ease-out) }
.faq-nav a:hover{ background:var(--teal-d); color:#fff; transform:translateY(-2px) }

/* ---------- CTA-band ---------- */
.cta-band{ position:relative; overflow:hidden; background:var(--navy-deep); color:var(--band-ink); border-radius:28px; padding:64px 56px; display:grid; grid-template-columns:minmax(0,1.3fr) auto; gap:32px; align-items:center; isolation:isolate }
.cta-band .aurora{ opacity:.9 }
.cta-band > *{ position:relative; z-index:2 }
.cta-band > .aurora, .cta-band > .grain{ z-index:0 }
.cta-band h2{ color:#fff; font-size:clamp(1.9rem,3.6vw,3rem); margin-bottom:.35em }
.cta-band p{ margin:0; max-width:52ch; color:var(--band-ink) }
.cta-band .btn-row{ margin-top:0 }

/* ---------- artikel ---------- */
.article-layout{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:56px; align-items:start }
.prose{ max-width:72ch; font-size:1.06rem }
.prose h2{ font-size:1.6rem; margin-top:2em }
.prose h3{ font-size:1.2rem; margin-top:1.6em }
.prose ul, .prose ol{ padding-left:1.3em; margin:0 0 1.1em }
.prose li{ margin-bottom:.45em }
.prose table{ width:100%; border-collapse:collapse; font-size:.95rem; margin:0 0 1.4em }
.prose th, .prose td{ text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top }
.prose thead th{ background:var(--paper); font-family:var(--display); color:var(--heading) }
.prose blockquote{ margin:0 0 1.2em; padding:12px 18px; border-left:4px solid var(--teal-d); background:var(--mint); border-radius:0 var(--radius-s) var(--radius-s) 0; color:var(--ink) }
.prose blockquote p:last-child{ margin-bottom:0 }
.prose code{ font-family:ui-monospace,"Cascadia Mono",Consolas,monospace; font-size:.92em; background:var(--paper); border:1px solid var(--line); border-radius:6px; padding:1px 5px }
.prose pre{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-s); padding:14px 16px; overflow-x:auto; margin:0 0 1.2em }
.prose pre code{ border:0; padding:0; background:none }
.side{ position:sticky; top:96px; display:grid; gap:20px }
.side .card{ padding:22px }
.side h2{ font-size:1rem; margin-bottom:.6em }
.toc ol{ margin:0; padding-left:1.1em; font-size:.93rem }
.toc li{ margin-bottom:.4em }
.toc a{ text-decoration:none } .toc a:hover{ text-decoration:underline }
.stand{ display:inline-block; font-size:.8rem; color:var(--grey); border:1px solid var(--line); border-radius:999px; padding:3px 12px; background:var(--surface) }
.related{ display:grid; gap:10px; list-style:none; padding:0; margin:0 }
.related a{ font-weight:600; text-decoration:none } .related a:hover{ text-decoration:underline }
.post-card .meta{ font-size:.82rem; color:var(--grey); margin-bottom:.6em }

/* ---------- Bewijsautomaat voorbeeldrapport ---------- */
.report{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow) }
.report-head{ background:var(--navy); color:#D7E6EC; padding:20px 24px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; align-items:center }
.report-head b{ color:#fff; font-family:var(--display); font-size:1.05rem }
.report-score{ display:flex; gap:10px; flex-wrap:wrap }
.report-score span{ background:rgba(255,255,255,.1); border-radius:999px; padding:4px 12px; font-size:.85rem; color:#fff }
.report table{ width:100%; border-collapse:collapse; font-size:.92rem }
.report th, .report td{ text-align:left; padding:12px 16px; border-bottom:1px solid var(--line); vertical-align:top }
.report thead th{ white-space:nowrap; background:var(--paper); font-family:var(--display); color:var(--heading); font-size:.85rem }
html.js .report tbody tr{ opacity:0; transform:translateX(-10px); transition:opacity .6s var(--ease-out), transform .6s var(--ease-out); transition-delay:calc(var(--i,0)*70ms) }
html.js .report.is-in tbody tr{ opacity:1; transform:none }
.dot{ display:inline-flex; align-items:center; gap:7px; font-weight:600; white-space:nowrap }
.dot::before{ content:""; width:11px; height:11px; border-radius:50%; background:var(--grey) }
.dot--pass::before{ background:var(--good) } .dot--warn::before{ background:var(--amber) } .dot--fail::before{ background:var(--bad) }
.report .src{ display:block; color:var(--grey); font-size:.8rem; margin-top:3px }
.report-foot{ padding:14px 20px; font-size:.82rem; color:var(--grey) }

/* ---------- formulier ---------- */
.form{ display:grid; gap:18px }
.field{ display:grid; gap:6px }
.field label, .field legend{ font-weight:600; font-size:.95rem }
.field .hint{ font-size:.84rem; color:var(--grey); font-weight:400 }
.field input, .field select, .field textarea{ font:inherit; color:var(--ink); background:var(--surface); border:1px solid var(--veldrand-site,#768795); border-radius:12px; padding:13px 15px; width:100%; transition:border-color .2s, box-shadow .3s }
.field input:hover, .field select:hover, .field textarea:hover{ border-color:var(--teal) }
.field textarea{ min-height:140px; resize:vertical }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible{ outline:3px solid var(--focus); outline-offset:1px; border-color:var(--teal-d); box-shadow:0 0 0 4px rgba(14,159,154,.12) }
.field input[aria-invalid="true"], .field select[aria-invalid="true"], .field textarea[aria-invalid="true"]{ border-color:#B83232 }
.check-field{ display:flex; gap:10px; align-items:flex-start; font-size:.93rem }
.check-field input{ width:20px; height:20px; margin-top:2px; accent-color:var(--teal-d); flex:none }
.form-status{ border-radius:12px; padding:16px 18px; background:var(--mint); border-left:4px solid var(--amber) }
.form-status[hidden]{ display:none }
.form-status.is-ok{ border-left-color:var(--teal-d) }
.form-status.is-error{ background:#FBE7E7; border-left-color:#B83232; color:#5E1515 }
.form-status p{ margin:0 } .form-status ul{ margin:8px 0 0; padding-left:20px }
.two{ display:grid; grid-template-columns:1fr 1fr; gap:18px }
.contact-grid{ grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); align-items:start }
.contact-list{ list-style:none; margin:0; padding:0; display:grid; gap:14px }
.contact-list li{ display:grid; gap:2px }
.contact-list .l{ font-size:.78rem; text-transform:uppercase; letter-spacing:.12em; color:var(--grey); font-weight:600 }
.contact-list .v{ font:700 1.1rem var(--display); color:var(--heading) }

/* ---------- quickscan (qs-) ---------- */
.qs-layout{ display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:28px; align-items:start }
.qs-panel{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius) }
.qs-intro{ padding:18px 22px; display:flex; flex-wrap:wrap; gap:14px 24px; align-items:center }
.qs-intro .lbl{ font-weight:600 }
.seg{ display:inline-flex; background:var(--mint); border-radius:999px; padding:4px; gap:4px; flex-wrap:wrap }
.seg button{ border:0; background:transparent; color:var(--ink); font:600 .85rem var(--text); padding:8px 15px; border-radius:999px; cursor:pointer; transition:background .25s, color .25s }
.seg button[aria-pressed="true"]{ background:var(--teal-d); color:#fff }
.qs-theme{ padding:6px 22px 10px }
.qs-theme + .qs-theme{ border-top:1px solid var(--line) }
.qs-theme-head{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:12px; padding:18px 0 8px; border-bottom:1px solid var(--line) }
.qs-theme-head h2{ font-size:1.15rem; margin:0 }
.qs-theme-head .r{ font-size:.78rem; color:var(--grey) }
.q{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px 20px; align-items:center; padding:14px 0; border-bottom:1px dashed var(--line) }
.q:last-child{ border-bottom:0 }
.q p{ margin:0; overflow-wrap:anywhere; font-size:.97rem }
.q small{ display:block; color:var(--grey); font-size:.82rem; margin-top:3px }
.opts{ display:flex; gap:6px; flex-wrap:wrap }
.opts input{ position:absolute; opacity:0; pointer-events:none }
.opts label{ border:1px solid var(--line); border-radius:9px; padding:7px 11px; font-size:.84rem; font-weight:600; cursor:pointer; color:var(--grey); background:var(--surface); user-select:none; min-width:54px; text-align:center; transition:background .2s, color .2s, border-color .2s, transform .3s var(--ease-out) }
.opts label:hover{ border-color:var(--teal); transform:translateY(-2px) }
.opts input:focus-visible + label{ outline:3px solid var(--focus); outline-offset:2px }
.opts input:checked + label.o2{ background:var(--good); border-color:var(--good); color:#fff }
.opts input:checked + label.o1{ background:var(--warn); border-color:var(--warn); color:#fff }
.opts input:checked + label.o0{ background:var(--bad); border-color:var(--bad); color:#fff }
.opts input:checked + label.ox{ background:var(--grey); border-color:var(--grey); color:var(--surface) }
.qs-aside{ position:sticky; top:96px; display:grid; gap:16px }
.qs-result, .qs-actions{ padding:22px }
.qs-result h2{ font-size:1rem; color:var(--grey); margin:0 }
.qs-score{ display:flex; align-items:center; gap:16px; margin:14px 0 6px }
@property --p{ syntax:'<number>'; inherits:false; initial-value:0 }
.ring{ --p:0; --c:var(--line); width:86px; height:86px; border-radius:50%; background:conic-gradient(var(--c) calc(var(--p)*1%), var(--mint) 0); display:grid; place-items:center; flex:none; transition:--p .8s var(--ease-out), background-color .3s }
.ring span{ width:66px; height:66px; border-radius:50%; background:var(--surface); display:grid; place-items:center; font:800 1.25rem var(--display); font-variant-numeric:tabular-nums; color:var(--heading) }
.verdict b{ display:block; font:800 1.18rem/1.2 var(--display); color:var(--heading) }
.verdict small{ color:var(--grey) }
.qs-progress{ font-size:.8rem; color:var(--grey); margin:6px 0 14px }
.bars{ display:grid; gap:9px; margin:0; padding:0; list-style:none }
.bars li{ display:grid; grid-template-columns:1fr 44px; gap:4px 10px; font-size:.83rem; align-items:center }
.bar{ grid-column:1 / -1; height:7px; background:var(--mint); border-radius:9px; overflow:hidden }
.bar i{ display:block; height:100%; width:0; border-radius:9px; background:var(--line); transition:width .5s var(--ease-out), background-color .3s }
.bars .pct{ text-align:right; font-variant-numeric:tabular-nums; color:var(--grey); font-weight:600 }
.qs-actions h2{ font-size:1rem; margin-bottom:10px }
.qs-actions ol{ margin:0; padding-left:20px; display:grid; gap:8px; font-size:.9rem }
.qs-actions .empty{ color:var(--grey); font-size:.9rem; margin:0 }
.qs-cta{ background:linear-gradient(160deg,var(--navy-2),var(--navy-deep)); color:var(--band-ink); border-radius:var(--radius); padding:22px }
.qs-cta h2{ color:#fff; font-size:1.12rem; margin:0 0 .4em }
.qs-cta p{ font-size:.9rem; margin:0 0 14px }
.qs-cta .btn{ font-size:.9rem; padding:10px 16px }
.qs-status{ font-size:.84rem; color:var(--teal-l); min-height:1.2em; margin-top:8px }
textarea.fallback{ width:100%; min-height:120px; margin-top:10px; font:12px/1.4 ui-monospace,Consolas,monospace; border-radius:10px; border:1px solid var(--line); background:var(--surface); color:var(--ink); padding:10px }
.qs-send{ padding:28px }
.qs-send h2{ font-size:1.25rem; margin:0 0 .4em }
.qs-send .intro{ color:var(--grey); margin:0 0 18px }
.cbw-scope{ border-radius:var(--radius); padding:16px 18px; margin:14px 0 0; background:var(--mint); font-size:.92rem }
.cbw-scope strong{ display:block; font-family:var(--display); color:var(--heading) }

/* ---------- footer ---------- */
.site-footer{ background:var(--navy-deep); color:#B9CFDB; padding:80px 0 28px; font-size:.93rem; position:relative; overflow:hidden }
.site-footer::before{ content:""; position:absolute; inset:0 0 auto 0; height:1px; background:linear-gradient(90deg,transparent,var(--teal-l),transparent) }
.site-footer a{ color:#E3F4F1; text-decoration:none; transition:color .2s, padding-left .3s var(--ease-out) }
.site-footer a:hover{ color:var(--teal-l); padding-left:4px }
.foot-grid{ display:grid; grid-template-columns:1.5fr repeat(4,minmax(0,1fr)); gap:36px }
.foot-grid h2{ color:#fff; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; margin-bottom:16px }
.foot-grid ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px }
.foot-brand p{ margin:16px 0 18px; max-width:34ch }
.foot-brand .logo:hover{ padding-left:0 }
.foot-contact{ display:grid; gap:4px; font-style:normal }
.foot-bottom{ border-top:1px solid rgba(255,255,255,.12); margin-top:48px; padding-top:22px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px 24px; font-size:.82rem; color:#94AEBE }
.foot-bottom ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:16px }
.big-mark{ font:800 clamp(4rem,18vw,15rem)/0.8 var(--display); letter-spacing:-.05em; color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.08); user-select:none; pointer-events:none; text-align:center; margin:56px 0 -40px; white-space:nowrap }

/* ---------- terug naar boven ---------- */
.totop{ position:fixed; right:22px; bottom:22px; z-index:65; width:50px; height:50px; border-radius:50%; border:0; background:var(--navy); color:#fff; display:grid; place-items:center; cursor:pointer; opacity:0; transform:translateY(20px); transition:opacity .4s, transform .4s var(--ease-out); box-shadow:var(--shadow); pointer-events:none }
.totop.is-on{ opacity:1; transform:none; pointer-events:auto }
.totop .arrow{ width:20px; height:20px }
.totop .ringsvg{ position:absolute; inset:0; width:100%; height:100% }
.totop circle{ fill:none; stroke:var(--teal-l); stroke-width:2; stroke-dasharray:150; stroke-dashoffset:calc(150 - 150*var(--scroll,0)); transform:rotate(-90deg); transform-origin:center }

/* ---------- 404 ---------- */
.error-code{ font:800 clamp(4rem,14vw,8rem)/1 var(--display); color:var(--teal-l); margin:0 0 10px; letter-spacing:-.05em }

/* ---------- responsief ---------- */
@media (max-width: 1100px){
  .foot-grid{ grid-template-columns:1fr 1fr 1fr } .foot-brand{ grid-column:1 / -1 }
  .steps{ grid-template-columns:repeat(3,minmax(0,1fr)); row-gap:36px }
  .steps::before, .steps::after{ display:none }
  html.js .steps .num{ background:var(--teal-d); border-color:var(--teal-l); color:#fff }
}
@media (max-width: 980px){
  .hero-grid, .article-layout, .qs-layout{ grid-template-columns:minmax(0,1fr) }
  .hero-art{ min-height:0; padding-top:64px }
  .orbit{ display:none }
  .docrep{ position:relative; inset:auto; margin:0 0 0 auto; transform:none }
  html.js .docrep{ animation-name:docin-flat }
  @keyframes docin-flat{ from{ opacity:0; transform:translateY(30px) } to{ opacity:1; transform:none } }
  .stats .wrap > div{ grid-template-columns:1fr 1fr } .stat:nth-child(3){ border-left:0 } .stat:nth-child(n+3){ border-top:1px solid var(--line) }
  .g3, .g4, .tri, .pkgs, .levels, .urgency .grid{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .level{ border-left:0; border-top:1px solid var(--line) } .level:first-child{ border-top:0 }
  .side, .qs-aside{ position:static }
  .cta-band{ grid-template-columns:minmax(0,1fr); padding:44px 32px }
  .contact-grid{ grid-template-columns:minmax(0,1fr) }
  .pkg--hl{ transform:none } .pkg--hl:hover{ transform:translateY(-6px) }
}
@media (max-width: 680px){
  body{ font-size:15.5px } .wrap{ padding-inline:16px }
  .section{ padding:64px 0 } .urgency{ padding:64px 0 }
  .hero{ padding:56px 0 80px } .on-dark .hero{ padding-top:calc(56px + var(--hh)) }
  .hero--page{ padding:36px 0 48px } .on-dark .hero--page{ padding-top:calc(36px + var(--hh)) }
  .g2, .g3, .g4, .steps, .tri, .pkgs, .levels, .two, .urgency .grid{ grid-template-columns:minmax(0,1fr) }
  .stats .wrap > div{ grid-template-columns:1fr 1fr }
  .foot-grid{ grid-template-columns:1fr 1fr }
  .card{ padding:22px }
  .guarantee{ grid-template-columns:minmax(0,1fr) }
  .q{ grid-template-columns:minmax(0,1fr) }
  .qs-theme, .qs-intro{ padding-inline:16px }
  .report th:nth-child(3), .report td:nth-child(3){ display:none }
  .prose table{ display:block; overflow-x:auto; font-size:.88rem }
  .prose th, .prose td{ padding:8px; hyphens:auto; overflow-wrap:anywhere }
  .btn-row .btn{ width:100% }
  .docrep{ width:100%; font-size:.68rem } .stamp{ width:80px; height:80px; right:-4px }
  .aura{ display:none }
}

/* ---------- print ---------- */
@media print{
  .site-header, .site-footer, .skip, .btn-row, .nav-toggle, .progress, .aura, .totop, .marquee, canvas, .aurora, .grain, .gridlines{ display:none !important }
  body{ font-size:11pt; color:#000; background:#fff }
  .section, .hero{ padding:16px 0; margin:0 }
  .on-navy, .section--navy, .hero{ background:#fff !important; color:#000 }
  .on-navy h1, .on-navy h2, .on-navy h3, .hero h1{ color:#0B2545 }
  html.js [data-reveal], html.js .split .w > span, html.js table.cmp tbody tr, html.js .report tbody tr{ opacity:1 !important; transform:none !important; filter:none !important }
}

/* ---------- minder beweging: uitgeschakeld op 16-10-2026 ----------
   Keuze opdrachtgever: de website toont altijd de volledige animaties, ook als het systeem om minder beweging vraagt.
   Bewegende onderdelen die langer dan 5 seconden lopen, zijn te pauzeren (WCAG 2.2.2): de hero met de pauzeknop, de normenband
   met de muis erop. Terugzetten: haal de commentaartekens rond dit blok weg en zet in v2.js "reduce" weer op de matchMedia-test.
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{ animation-duration:.001s !important; animation-iteration-count:1 !important; transition-duration:.001s !important }
  html.js [data-reveal], html.js .split .w > span, html.js table.cmp tbody tr, html.js .report tbody tr, html.js .chip, html.js .docrep, html.js .docrep td, html.js .stamp{ opacity:1; transform:none; filter:none }
  html.js ul.check li::before{ transform:scale(1) }
  .rotator span{ opacity:1; transform:none } .rotator span:not(.is-on){ display:none }
  .aurora, .aura, .marquee ul{ animation:none }
  .kicker::before{ transform:scaleX(1) }
}
   einde uitgeschakeld blok */

/* Toegankelijkheid (WCAG 2.5.8): klikdoelen minstens 24 px */
.main-nav .sub-btn{ min-width:24px }
.mega .feat .links a{ min-height:24px }

/* Toegankelijkheid (WCAG 1.4.12): bij extra tekstafstand mogen de links in het blok "Liever compleet?" afbreken
   (anders duwt de nowrap-link de tekst buiten het blok, dat overflow:hidden heeft voor de gloed) */
.mega .feat .links a{ white-space:normal }
.mega .feat > *{ min-width:0 }
/* WCAG 1.4.12: het wisselende woord op de homepage groeit mee met een grotere regelhoogte (1lh = de eigen regelhoogte) */
.rotator{ height:1lh }
/* WCAG 2.5.8: links in het kruimelpad minstens 24 px hoog */
.crumbs a{ display:inline-flex; align-items:center; min-height:24px }

/* WCAG 1.4.11: rand van invoervelden op de websiteformulieren minstens 3:1 (licht #768795 = 3,7:1 op wit; donker #9FB3B0 = 7:1) */
:root{ --veldrand-site:#768795 }
:root[data-theme="dark"]{ --veldrand-site:#9FB3B0 }
/* Footer: het grote woord "abyco" duidelijker (was een bijna onzichtbare omlijning); blijft decoratief (aria-hidden) */
.big-mark{ color:transparent; background:linear-gradient(180deg,rgba(95,211,201,.55) 0%,rgba(95,211,201,.16) 100%); -webkit-background-clip:text; background-clip:text;
  -webkit-text-stroke:1.5px rgba(154,240,231,.35); margin:56px 0 0; line-height:.95; padding-bottom:.06em }
/* ---------- Onze aanpak: twee delen van drie stappen. Breed scherm: stappen links, rechts een meeschuivend scherm dat per stap
   wisselt (v2.js vult .scrolly-media). Smal scherm of zonder JavaScript: de schermafbeelding staat bij de stap zelf. ---------- */
.aanpak-deel + .aanpak-deel{ margin-top:72px }
.deel-kop{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin:0 0 30px }
.deel-kop h3{ margin:0; font-size:1.3rem }
.deel-nr{ font:700 .74rem var(--display); letter-spacing:.14em; text-transform:uppercase; color:var(--teal-t); background:var(--mint); border-radius:999px; padding:5px 12px }
.deel-sub{ color:var(--grey); font-size:.92rem }
.scrolly-steps{ list-style:none; margin:0; padding:0; position:relative }
.scrolly-steps::before, .scrolly-steps::after{ content:""; position:absolute; left:25px; top:28px; bottom:var(--eind,28px); width:3px; border-radius:3px; background:var(--line) }
.scrolly-steps::after{ background:linear-gradient(180deg,var(--teal),var(--teal-l)); transform:scaleY(var(--sprog,1)); transform-origin:50% 0; transition:transform .2s linear }
.scrolly-step{ position:relative; display:grid; grid-template-columns:54px minmax(0,1fr); gap:22px; padding-bottom:40px }
.scrolly-step:last-child{ padding-bottom:0 }
.scrolly-step .num{ position:relative; z-index:1; width:54px; height:54px; border-radius:50%; background:var(--teal-d); border:3px solid var(--teal-l); color:#fff; font:800 1.05rem var(--display); display:grid; place-items:center; transition:background .3s, border-color .3s, color .3s, transform .3s var(--ease-out), box-shadow .3s }
.scrolly .when{ display:inline-block; font-size:.76rem; font-weight:700; color:var(--teal-t); background:var(--mint); border-radius:999px; padding:3px 10px; margin:12px 0 10px }
.scrolly h4{ font-size:1.12rem; margin:0 0 .4em } .scrolly-body > p{ margin:0; color:var(--grey) }
.step-shot{ margin:18px 0 0; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--surface); box-shadow:var(--shadow-s); max-width:640px }
.step-shot img{ display:block; width:100%; height:auto; aspect-ratio:32 / 25; object-fit:cover; object-position:top left }
.step-shot figcaption{ font-size:.8rem; color:var(--grey); padding:9px 12px; border-top:1px solid var(--line) }
.step-shot figcaption span{ white-space:nowrap }
.scrolly-media{ display:none }
@media (min-width: 981px){
  /* het blok blijft staan terwijl de pagina door de extra ruimte (padding-bottom) scrollt; per stuk scrollen de volgende stap */
  .scrolly.is-scrolly{ --sprog:0 }
  .scrolly.is-scrolly::after{ content:""; display:block; height:110vh } /* scrollruimte als inhoud: sticky werkt niet in padding */
  .scrolly-inner{ position:sticky; top:calc(var(--hh) + 32px); display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:48px; align-items:stretch }
  .is-scrolly .scrolly-step{ padding-bottom:14px }
  .is-scrolly .scrolly-step:last-child{ padding-bottom:0 }
  .is-scrolly .scrolly-body{ align-self:start; margin-top:-6px; padding:10px 16px 14px; border:1px solid transparent; border-radius:16px; transition:background .35s, border-color .35s, box-shadow .35s }
  .is-scrolly .when{ margin:0 0 6px }
  .is-scrolly .scrolly-step.is-active .scrolly-body{ background:var(--paper); border-color:rgba(14,159,154,.35); box-shadow:var(--shadow-s) }
  .is-scrolly .scrolly-step:not(.is-active):not(.is-done) .num{ background:var(--surface); border-color:var(--line); color:var(--grey) }
  .is-scrolly .scrolly-step.is-active .num{ transform:scale(1.1); box-shadow:0 0 0 8px rgba(14,159,154,.15) }
  .is-scrolly .step-shot{ display:none }
  .is-scrolly .scrolly-media{ display:flex; flex-direction:column; min-height:0 }
  .scrolly-frame{ position:relative; flex:1 1 auto; min-height:300px; border:1px solid var(--line); border-radius:18px; overflow:hidden; background:var(--surface); box-shadow:var(--shadow) }
  .scrolly-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top left; opacity:0; transform:scale(1.03); transition:opacity .5s, transform .7s var(--ease-out) }
  .scrolly-img.is-on{ opacity:1; transform:none }
  .scrolly-cap{ margin:10px 4px 0; font-size:.85rem; color:var(--grey) }
  .scrolly-dots{ display:flex; gap:8px; margin:10px 4px 0 } .scrolly-dots i{ width:28px; height:4px; border-radius:4px; background:var(--line); transition:background .3s }
  .scrolly-dots i.is-on{ background:var(--teal) }
}
/* Ankerlinks in lange teksten (o.a. algemene voorwaarden): kop niet achter de vaste menubalk (WCAG 2.4.11) */
.prose [id]{ scroll-margin-top:88px }
/* ===== Multinorm (website BL) ===== */
.main-nav .mega--3{ grid-template-columns:1fr 1fr .95fr; width:min(94vw,980px) }
.nm-app{ position:relative; background:#fff; color:#16243A; border-radius:18px; box-shadow:0 30px 80px -20px rgba(0,0,0,.55); overflow:hidden; border:1px solid rgba(255,255,255,.25); font-size:.86rem }
.nm-app-bar{ display:flex; align-items:center; gap:6px; padding:10px 14px; background:#F1F6F5; border-bottom:1px solid #DCE5E3 }
.nm-app-bar i{ width:9px; height:9px; border-radius:50%; background:#C9D6D3 }
.nm-app-bar span{ margin-left:8px; font-size:.75rem; color:#4E5E6E }
.nm-app-body{ padding:16px 18px 18px }
.nm-tabs{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px }
.nm-tabs b{ font-weight:600; font-size:.74rem; padding:5px 10px; border-radius:999px; background:#EEF4F3; color:#13315C; border:1px solid #DCE5E3 }
.nm-tabs b.on{ background:#0B2545; color:#fff; border-color:#0B2545 }
.nm-score{ background:linear-gradient(135deg,#2E1F66,#4B2E9E); color:#fff; border-radius:14px; padding:14px 16px; margin-bottom:10px }
.nm-score small{ display:block; letter-spacing:.08em; text-transform:uppercase; font-size:.66rem; opacity:.85 }
.nm-score strong{ font:800 2rem/1.1 var(--display) }
.nm-score .bar{ height:8px; background:rgba(255,255,255,.2); border-radius:6px; margin-top:8px; overflow:hidden }
.nm-score .bar i{ display:block; height:100%; width:72%; background:linear-gradient(90deg,#5FD3C9,#F2A541) }
.nm-row{ display:grid; grid-template-columns:1fr 1fr; gap:10px }
.nm-mini{ border:1px solid #DCE5E3; border-radius:12px; padding:10px 12px; background:#FBFDFC }
.nm-mini h5{ margin:0 0 4px; font:700 .8rem/1.2 var(--display); color:#0B2545 }
.nm-mini p{ margin:0; font-size:.74rem; color:#4E5E6E }
.nm-ok, .nm-warn{ display:inline-block; font-size:.68rem; font-weight:700; border-radius:999px; padding:2px 8px; margin-top:4px }
.nm-ok{ color:#08706C; background:#E3F4F1 } .nm-warn{ color:#7A4800; background:#FDF0DC }
.nm-via{ font-size:.72rem; color:#08706C; margin:8px 0 0 }
.nm-ingangen{ display:grid; grid-template-columns:1fr 1fr; gap:22px }
.nm-ingang{ background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:28px; box-shadow:0 20px 50px -25px rgba(11,37,69,.35); text-decoration:none; color:inherit; display:flex; flex-direction:column; gap:10px; transition:transform .3s var(--ease-out) }
.nm-ingang:hover{ transform:translateY(-4px) }
.nm-ingang .kicker, .nm-ingang p{ margin:0 }
.nm-ingang h3{ margin:0; font-size:1.45rem }
.nm-ingang ul{ margin:4px 0 0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:6px }
.nm-ingang li{ font-size:.78rem; font-weight:600; padding:4px 10px; border-radius:999px; background:var(--mint); color:var(--teal-t) }
.nm-ingang .link-arrow{ margin-top:auto }
.nm-normen{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px }
.nm-norm{ background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:20px; text-decoration:none; color:inherit; display:flex; flex-direction:column; gap:6px; position:relative; transition:transform .3s var(--ease-out), border-color .2s }
.nm-norm:hover{ transform:translateY(-3px); border-color:var(--teal) }
.nm-norm b.code{ font:800 1.15rem/1.15 var(--display); color:var(--heading); padding-right:56px }
.nm-norm small{ color:var(--grey); font-size:.8rem }
.nm-norm p{ margin:4px 0 0; font-size:.88rem }
.nm-norm .sec{ margin-top:auto; padding-top:8px; font-size:.72rem; font-weight:600; color:var(--teal-t) }
.nm-norm .nieuw{ position:absolute; top:14px; right:14px; font-size:.66rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; background:var(--amber); color:#1b1300; border-radius:999px; padding:2px 8px }
.nm-bewijs{ display:grid; grid-template-columns:1.1fr 1fr; gap:40px; align-items:center }
.nm-flow{ display:grid; grid-template-columns:auto 1fr; gap:14px 18px; align-items:center }
.nm-bron{ grid-row:span 4; background:var(--navy); color:#fff; border-radius:18px; padding:20px; max-width:220px }
.nm-bron small{ display:block; opacity:.85; font-size:.72rem; text-transform:uppercase; letter-spacing:.08em }
.nm-bron b{ display:block; font:700 1.05rem/1.25 var(--display); margin:6px 0 }
.nm-doel{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:10px 14px; font-size:.9rem }
.nm-doel i{ font-style:normal; font-weight:700; color:var(--teal-t); white-space:nowrap }
.nm-func{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px }
.nm-func > div{ background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:22px }
.nm-func h3{ margin:0 0 6px; font-size:1.05rem }
.nm-func p{ margin:0; font-size:.9rem; color:var(--grey) }
.nm-sporen{ display:grid; grid-template-columns:1fr 1fr; gap:22px }
.nm-spoor h3{ margin:0 0 12px; font-size:1.1rem }
.nm-dl{ display:flex; gap:14px; align-items:flex-start; padding:14px 0; border-top:1px solid var(--line) }
.nm-dl .d{ min-width:124px; flex:0 0 124px; font:700 .82rem/1.3 var(--display); color:var(--teal-t) }
.nm-dl p{ margin:0; font-size:.92rem }
.nm-chips{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px }
.nm-chips li{ font-weight:600; font-size:.88rem; padding:6px 14px; border-radius:999px; background:var(--mint); color:var(--teal-t) }
.nm-shots{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px }
.nm-shot{ margin:0; background:var(--surface); border:1px solid var(--line); border-radius:18px; overflow:hidden }
.nm-shot img{ display:block; width:100%; height:auto }
.nm-shot figcaption{ padding:10px 14px; font-size:.86rem; font-weight:600 } .nm-shot figcaption span{ font-weight:400; color:var(--grey) }
.faq summary, .faq .a, .section-head h2, .nm-func h3{ overflow-wrap:anywhere; hyphens:auto }
/* Normencheck */
.nc-form{ padding:6px 22px 18px }
.nc-q{ border:0; margin:0; padding:16px 0; border-bottom:1px dashed var(--line); min-width:0 }
.nc-q legend{ float:left; width:100%; padding:0; margin:0 0 10px; font-weight:600; font-size:1rem }
.nc-q legend small{ display:block; font-weight:400; color:var(--grey); font-size:.84rem; margin-top:2px }
.nc-q .opts{ clear:both }
.nc-nr{ display:inline-grid; place-items:center; width:24px; height:24px; border-radius:50%; background:var(--mint); color:var(--teal-t); font:800 .78rem var(--display); margin-right:4px }
.nc-opts label{ min-width:0; text-align:left }
.nc-opts input:checked + label{ background:var(--teal-d); border-color:var(--teal-d); color:#fff }
.nc-reset{ padding-top:16px }
.nc-result{ padding:22px }
.nc-result h2{ font-size:1rem; color:var(--grey); margin:0 0 6px }
.nc-status{ font-weight:600; margin:0 0 12px }
.nc-lijst{ list-style:none; margin:0; padding:0; display:grid; gap:10px }
.nc-lijst li{ border:1px solid var(--line); border-radius:12px; padding:10px 12px }
.nc-kop{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px 10px }
.nc-kop a{ font:700 .98rem var(--display) }
.nc-lijst p{ margin:4px 0 0; font-size:.86rem; color:var(--grey) }
.nc-tag{ font-size:.7rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; border-radius:999px; padding:2px 9px; background:var(--mint); color:var(--teal-t) }
.nc-tag--3{ background:var(--navy); color:#fff } .nc-tag--2{ background:var(--amber); color:#1b1300 }
.nc-tip{ margin:14px 0 0; font-size:.88rem; border-left:3px solid var(--teal); padding-left:10px }
@media (max-width:1100px){ .main-nav .mega--3{ width:100%; grid-template-columns:1fr } }
@media (max-width:980px){ .nm-normen{ grid-template-columns:repeat(2,minmax(0,1fr)) } .nm-func{ grid-template-columns:repeat(2,minmax(0,1fr)) } .nm-bewijs{ grid-template-columns:1fr } }
@media (max-width:720px){ .nm-ingangen, .nm-sporen, .nm-shots{ grid-template-columns:1fr } .nm-normen, .nm-func{ grid-template-columns:1fr } .nm-flow{ grid-template-columns:1fr } .nm-bron{ grid-row:auto; max-width:none } .nm-row{ grid-template-columns:1fr } .nm-dl{ flex-direction:column; gap:4px } }
/* ===== einde Multinorm ===== */
/* ===== WOW (website CA) ===== */
/* Bron: _bron/website/wow.css, door bouw_wow.py achter v2.css gezet. Opzet goedgekeurd? Zie MOCKUPS/solutions-opzet.
   Onderdelen: hero met beeld (subpagina's), klantenstrook, bewijsketen (A), overlapkaart (B), live meting (C), deadlineklok (D),
   Ritzky-citaat, team, Start hier, vanafprijzen en mobiele verbeteringen. WOW-blokken zijn altijd donker (.wow = on-navy). */
.wow{ position:relative; overflow:hidden; background:radial-gradient(120% 90% at 85% 0%,#13315C 0%,#0B2545 45%,#061530 100%); color:var(--band-ink) }
.wow::before{ content:""; position:absolute; inset:-30% 40% auto -20%; height:90%; background:radial-gradient(closest-side,rgba(95,211,201,.16),transparent 70%); pointer-events:none }
.wow > .wrap{ position:relative }
.wow .lead{ color:#B9CCD8 }
.wow-kop{ display:grid; gap:10px; margin-bottom:34px; max-width:760px }
.wow-kop h2 em{ font-style:normal; color:var(--teal-l) }
.wow-noot{ font-size:.8rem; color:#9DB2C2; margin-top:18px }
.wow-knop{ appearance:none; border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.05); color:#fff; border-radius:999px; padding:9px 16px; font:600 .875rem var(--text); cursor:pointer; display:inline-flex; align-items:center; gap:8px; transition:border-color .2s, background .2s }
.wow-knop:hover{ border-color:var(--teal-l) }
.wow-knop:focus-visible{ outline:3px solid var(--focus); outline-offset:2px }
.wow-knop.vol{ background:var(--teal-l); border-color:var(--teal-l); color:var(--navy) }
.wow-rij{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:20px }

/* ---------- hero met beeld (subpagina's) ---------- */
.hero--beeld .hb{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:48px; align-items:center }
.hero--beeld .hb-tekst{ min-width:0 }
.hb-shot{ position:relative; margin:0 }
.hb-shot img{ display:block; width:100%; height:auto; border-radius:14px; box-shadow:0 40px 80px -30px rgba(0,0,0,.7); border:1px solid rgba(255,255,255,.18) }
.hb-badge{ position:absolute; display:flex; align-items:center; gap:8px; background:#0E2544; color:#fff; border:1px solid var(--teal-l); border-radius:999px; padding:7px 12px; font:600 .8rem var(--text); white-space:nowrap; box-shadow:0 12px 30px -12px rgba(0,0,0,.6) }
.hb-badge b{ font:800 1rem var(--display); color:var(--teal-l) }
.hb-badge.b1{ left:-18px; top:14% } .hb-badge.b2{ right:-14px; bottom:14% }
.js .hb-shot{ animation:hbIn 1s var(--ease-out) both .2s }
@keyframes hbIn{ from{ opacity:0; transform:translateY(24px) scale(.98) } to{ opacity:1; transform:none } }
@media (max-width:980px){ .hero--beeld .hb{ grid-template-columns:1fr; gap:28px } .hb-badge.b1{ left:8px } .hb-badge.b2{ right:8px } }

/* ---------- klantenstrook ---------- */
.klanten{ padding:34px 0 10px }
.klanten-in{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:28px; align-items:center }
.klanten-titel{ font:700 .8rem var(--display); letter-spacing:.12em; text-transform:uppercase; color:var(--grey); max-width:15ch; margin:0 }
.klanten ul{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px }
.klanten li{ border:1px solid var(--line); border-radius:14px; padding:14px 16px; background:var(--surface); display:grid; gap:8px; align-content:start }
.klanten .naam{ font:800 1.15rem/1.1 var(--display); color:var(--heading); letter-spacing:-.01em }
.klanten .certs{ display:flex; flex-wrap:wrap; gap:6px }
.klanten .cert{ display:inline-flex; align-items:center; gap:5px; font:700 .72rem var(--text); color:var(--teal-t); background:var(--mint); border-radius:999px; padding:4px 9px }
.klanten .cert svg{ width:12px; height:12px }
.klanten-noot{ font-size:.78rem; color:var(--grey); margin:12px 0 0 }
@media (max-width:980px){ .klanten-in{ grid-template-columns:1fr; gap:14px } .klanten-titel{ max-width:none } }
@media (max-width:720px){ .klanten ul{ grid-template-columns:repeat(2,minmax(0,1fr)) } }

/* ---------- A: bewijsketen ---------- */
.bk{ display:grid; grid-template-columns:minmax(0,270px) minmax(0,1fr); gap:36px; align-items:start }
.bk-rail{ list-style:none; margin:0; padding:0 0 0 32px; position:relative; display:grid; gap:4px }
.bk-rail::before{ content:""; position:absolute; left:12px; top:16px; bottom:16px; width:2px; background:rgba(255,255,255,.14); border-radius:2px }
.bk-vul{ position:absolute; left:12px; top:16px; width:2px; height:0; border-radius:2px; background:linear-gradient(var(--teal-l),var(--amber)); transition:height .8s var(--ease-out) }
.bk-rail button{ all:unset; box-sizing:border-box; width:100%; cursor:pointer; display:grid; gap:1px; padding:9px 12px; border-radius:12px; position:relative; transition:background .3s }
.bk-rail button::before{ content:""; position:absolute; left:-26px; top:15px; width:12px; height:12px; border-radius:50%; background:#0B2545; border:2px solid rgba(255,255,255,.3); transition:.35s }
.bk-rail button:hover{ background:rgba(255,255,255,.05) }
.bk-rail button:focus-visible{ outline:3px solid var(--focus) }
.bk-rail button.klaar::before{ border-color:var(--teal-l); background:var(--teal-l) }
.bk-rail button.nu{ background:rgba(255,255,255,.07) }
.bk-rail button.nu::before{ border-color:var(--amber); background:var(--amber); box-shadow:0 0 0 6px rgba(242,165,65,.2) }
.bk-rail b{ font:700 1rem var(--display); color:#fff }
.bk-rail span{ font-size:.82rem; color:#9DB2C2 }
.bk-stap{ display:none; margin:0; font:700 1rem var(--display); color:#fff }
.bk-stap small{ font:500 .8rem var(--text); color:#9DB2C2; margin-right:8px }
.bk-scherm{ background:#fff; color:#16243A; border-radius:18px; min-height:330px; overflow:hidden; box-shadow:0 40px 80px -36px rgba(0,0,0,.75); display:grid; grid-template-rows:auto 1fr }
.bk-balk{ display:flex; align-items:center; gap:7px; padding:11px 16px; border-bottom:1px solid #E1EAE8; background:#F4F8F7; font-size:.78rem; color:#4E5E6E }
.bk-balk i{ width:9px; height:9px; border-radius:50%; background:#CBD8D5 }
.bk-balk span{ margin-left:6px }
.bk-paneel{ display:none; padding:22px 24px; gap:12px; align-content:start }
.bk-paneel.nu{ display:grid; animation:bkIn .55s var(--ease-out) }
@keyframes bkIn{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }
.bk-paneel h3{ margin:0; font:700 1.1rem var(--display); color:#0B2545 }
.bk-meta{ font-size:.8rem; color:#5B6B7B }
.bk-paneel p{ margin:0; font-size:.95rem; color:#16243A }
.bk-regel{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:12px; align-items:center; border:1px solid #E1EAE8; border-radius:12px; padding:11px 14px; font-size:.92rem }
.bk-id{ font:700 .76rem ui-monospace,"Cascadia Mono",Consolas,monospace; background:#EEF4F3; color:#08736F; padding:4px 7px; border-radius:6px }
.bk-pil{ font:700 .74rem var(--text); padding:5px 10px; border-radius:999px; white-space:nowrap }
.bk-pil.rood{ background:#FBE7E3; color:#A33A2A } .bk-pil.groen{ background:#E1F5EA; color:#17784A } .bk-pil.oranje{ background:#FDF0DC; color:#7A4800 } .bk-pil.grijs{ background:#EEF2F4; color:#4E5E6E }
.bk-akk{ display:flex; flex-wrap:wrap; gap:12px; align-items:center }
.bk-akk-knop{ border-radius:10px; background:#0E9F9A; color:#fff; font:700 .95rem var(--text); padding:12px 18px; transition:transform .2s, background .3s }
.bk-akk-knop.gedrukt{ background:#17784A; transform:scale(.97) }
.bk-vink{ list-style:none; margin:0; padding:0; display:grid; gap:7px; font-size:.93rem }
.bk-vink li{ display:flex; gap:10px; align-items:center }
.bk-vink li::before{ content:""; flex:none; width:18px; height:18px; border-radius:50%; background:#E1F5EA url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12 4 4 8-8' fill='none' stroke='%2317784A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat; border:1.5px solid #1F9D62 }
.bk-hash{ font:500 .8rem ui-monospace,Consolas,monospace; color:#5B6B7B; word-break:break-all }
.bk-normen{ display:grid; gap:8px }
.bk-normen div{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:center; border:1px solid #E1EAE8; border-radius:10px; padding:10px 12px; font-size:.9rem }
.bk-normen b{ font-family:var(--display); color:#0B2545 }
.bk-map{ display:grid; gap:4px; font:500 .84rem ui-monospace,Consolas,monospace; color:#5B6B7B }
.bk-map .hl{ color:#08736F; background:#E2F3F0; border-radius:6px; padding:5px 8px; font-weight:700 }
.bk-tellers{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:24px }
.bk-teller{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:14px; padding:14px 16px; display:grid; gap:2px }
.bk-teller b{ font:800 1.8rem/1.1 var(--display); color:#fff; font-variant-numeric:tabular-nums }
.bk-teller span{ font-size:.82rem; color:#9DB2C2 }
@media (max-width:860px){
  .bk{ grid-template-columns:1fr; gap:16px }
  .bk-rail{ grid-template-columns:repeat(7,minmax(0,1fr)); padding:0; gap:4px }
  .bk-rail::before, .bk-vul{ display:none }
  .bk-rail button{ padding:6px 0; justify-items:center; min-height:28px }
  .bk-rail button::before{ position:static }
  .bk-rail b, .bk-rail span{ display:none }
  .bk-stap{ display:block }
  .bk-tellers{ grid-template-columns:1fr }
  .bk-paneel{ padding:18px }
}

/* ---------- B: overlapkaart ---------- */
.ov-keuze{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:22px }
.ov-chip{ appearance:none; cursor:pointer; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.04); color:#E6EEF3; border-radius:999px; padding:10px 16px 10px 12px; font:600 .9rem var(--text); display:inline-flex; align-items:center; gap:9px; transition:.2s }
.ov-chip i{ width:14px; height:14px; border-radius:4px; background:var(--c); opacity:.3; transition:.2s }
.ov-chip small{ color:#9DB2C2; font-weight:500 }
.ov-chip[aria-pressed="true"]{ border-color:var(--c); background:rgba(255,255,255,.09) }
.ov-chip[aria-pressed="true"] i{ opacity:1 }
.ov-chip:focus-visible{ outline:3px solid var(--focus); outline-offset:2px }
.ov-kaart{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:8px }
.ov-kol{ display:grid; gap:5px; align-content:start }
.ov-kol h3{ margin:0 0 6px; font:600 .74rem var(--text); color:#9DB2C2; min-height:2.6em }
.ov-kol h3 b{ display:block; font:800 1rem var(--display); color:#fff }
.ov-t{ border-radius:8px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12); padding:6px 8px; font:700 .74rem ui-monospace,Consolas,monospace; color:#E6EEF3; display:flex; justify-content:space-between; align-items:center; gap:4px; animation:ovIn .45s var(--ease-out) both }
.ov-t .str{ display:flex; gap:2px }
.ov-t .str i{ width:5px; height:14px; border-radius:2px }
.ov-t.gedeeld{ border-color:rgba(95,211,201,.55); background:linear-gradient(90deg,rgba(95,211,201,.18),rgba(95,211,201,.04)) }
@keyframes ovIn{ from{ opacity:0; transform:scale(.85) } to{ opacity:1; transform:none } }
.ov-som{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:22px }
.ov-som div{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:14px; padding:14px 16px; display:grid; gap:2px }
.ov-som div.uit{ border-color:var(--teal-l); background:linear-gradient(135deg,rgba(95,211,201,.2),rgba(95,211,201,.04)) }
.ov-som b{ font:800 2rem/1.1 var(--display); color:#fff; font-variant-numeric:tabular-nums }
.ov-som span{ font-size:.82rem; color:#9DB2C2 }
.ov-som div.uit span{ color:#D5E6EC }
@media (max-width:860px){ .ov-kaart{ grid-template-columns:repeat(4,minmax(0,1fr)) } .ov-som{ grid-template-columns:1fr } }
@media (max-width:480px){ .ov-kaart{ grid-template-columns:repeat(3,minmax(0,1fr)) } }

/* ---------- C: live meting ---------- */
.mt{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,320px); gap:28px; align-items:start }
.mt-kaart{ background:#fff; color:#16243A; border-radius:18px; overflow:hidden; box-shadow:0 40px 80px -36px rgba(0,0,0,.75) }
.mt-kaart header{ padding:16px 20px; border-bottom:1px solid #E1EAE8; display:grid; gap:8px }
.mt-kaart header b{ font:700 1rem var(--display); color:#0B2545 }
.mt-voortgang{ height:6px; border-radius:6px; background:#E8EFEE; overflow:hidden }
.mt-voortgang i{ display:block; height:100%; width:0; background:linear-gradient(90deg,#0E9F9A,#5FD3C9); transition:width .5s }
.mt-status{ font-size:.8rem; color:#5B6B7B }
.mt-lijst{ list-style:none; margin:0; padding:6px 12px 12px }
.mt-lijst li{ display:grid; grid-template-columns:66px minmax(0,1fr) auto; gap:10px; align-items:center; padding:10px 8px; border-bottom:1px solid #E1EAE8; font-size:.9rem }
.mt-lijst li:last-child{ border-bottom:0 }
.mt-lijst .id{ font:700 .74rem ui-monospace,Consolas,monospace; color:#08736F }
.mt-lijst .uitleg{ display:block; font-size:.78rem; color:#5B6B7B }
.mt-draai{ display:inline-block; width:14px; height:14px; border-radius:50%; border:2px solid #CFE0DD; border-top-color:#0E9F9A; animation:mtDraai .8s linear infinite }
@keyframes mtDraai{ to{ transform:rotate(360deg) } }
.mt-zij{ display:grid; gap:14px }
.mt-score{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:16px; padding:18px; display:grid; gap:10px }
.mt-score small{ color:#9DB2C2; font-size:.8rem }
.mt-score b{ font:800 2.6rem/1 var(--display); color:#fff; font-variant-numeric:tabular-nums }
.mt-score p{ margin:0; font-size:.88rem; color:#B9CCD8 }
.mt-verdeling{ display:flex; gap:4px; height:8px; border-radius:8px; overflow:hidden; background:rgba(255,255,255,.1) }
.mt-verdeling i{ display:block; transition:flex-grow .5s }
@media (max-width:860px){ .mt{ grid-template-columns:1fr } .mt-lijst li{ grid-template-columns:58px minmax(0,1fr) auto } }

/* ---------- D: deadlineklok ---------- */
.dk-top{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:24px; align-items:end; margin-top:8px }
.dk-groot{ display:grid; gap:4px }
.dk-groot small{ color:#9DB2C2; font-size:.82rem }
.dk-dagen{ font:800 clamp(3.4rem,9vw,6.4rem)/.9 var(--display); color:#fff; letter-spacing:-.04em; font-variant-numeric:tabular-nums }
.dk-dagen small{ font-size:.3em; color:var(--teal-l); letter-spacing:0; margin-left:10px }
.dk-wat{ font:700 1.2rem var(--display); color:#fff }
.dk-wanneer{ color:#B9CCD8; font-size:.92rem; max-width:62ch }
.dk-lijn{ position:relative; height:96px; margin:18px 8px 6px }
.dk-as{ position:absolute; left:0; right:0; top:56px; height:2px; background:rgba(255,255,255,.16) }
.dk-tik{ position:absolute; top:52px; width:1px; height:10px; background:rgba(255,255,255,.25) }
.dk-jaar{ position:absolute; top:68px; transform:translateX(-50%); font:600 .74rem ui-monospace,Consolas,monospace; color:#9DB2C2; white-space:nowrap }
.dk-mk{ position:absolute; top:0; width:0 }
.dk-pin{ position:absolute; top:46px; left:-11px; width:22px; height:22px; border-radius:50%; background:#0B2545; border:2px solid var(--amber); color:var(--amber); display:grid; place-items:center; font:800 .72rem var(--text) }
.dk-mk.sinds .dk-pin{ border-color:#9DB2C2; color:#9DB2C2 }
.dk-mk.nu .dk-pin{ top:50px; left:-7px; width:14px; height:14px; border:0; background:var(--teal-l); box-shadow:0 0 0 6px rgba(95,211,201,.22) }
.dk-tag{ position:absolute; top:14px; left:0; transform:translateX(-50%); white-space:nowrap; font:700 .74rem var(--text); color:var(--navy); background:var(--teal-l); border-radius:6px; padding:3px 8px }
.dk-tag::after{ content:""; position:absolute; left:50%; bottom:-4px; margin-left:-4px; border:4px solid transparent; border-bottom:0; border-top-color:var(--teal-l) }
.dk-lijst{ display:grid; gap:8px }
.dk-item{ display:grid; grid-template-columns:24px 120px minmax(0,1fr) auto; gap:14px; align-items:center; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:12px 16px }
.dk-nr{ width:22px; height:22px; border-radius:50%; border:2px solid var(--amber); color:var(--amber); display:grid; place-items:center; font:800 .72rem var(--text) }
.dk-item.sinds .dk-nr{ border-color:#9DB2C2; color:#9DB2C2 }
.dk-dt{ font:700 .8rem ui-monospace,Consolas,monospace; color:var(--teal-l) }
.dk-tt b{ color:#fff; font-weight:700 }
.dk-tt span{ display:block; font-size:.85rem; color:#B9CCD8 }
.dk-tt a{ font-size:.85rem }
.dk-af{ font:800 .95rem var(--display); color:var(--amber); white-space:nowrap; font-variant-numeric:tabular-nums }
.dk-item.sinds .dk-af{ color:#9DB2C2; font-weight:600 }
@media (max-width:720px){ .dk-top{ grid-template-columns:1fr } .dk-item{ grid-template-columns:24px minmax(0,1fr) } .dk-item .dk-tt, .dk-item .dk-af{ grid-column:2 } }

/* ---------- Ritzky-citaat en team ---------- */
.citaat{ display:grid; grid-template-columns:96px minmax(0,1fr); gap:22px; align-items:center; margin:28px 0 0; padding:24px 26px; border-radius:var(--radius); background:var(--surface); border:1px solid var(--line) }
.citaat blockquote{ margin:0; font:600 1.15rem/1.5 var(--display); color:var(--heading) }
.citaat figcaption{ margin-top:8px; font-size:.88rem; color:var(--grey) }
.foto-plek{ width:96px; height:96px; border-radius:50%; background:var(--paper); border:2px dashed color-mix(in srgb,var(--grey) 50%,transparent); display:grid; place-items:center; color:var(--grey); font:600 .7rem var(--text); text-align:center; line-height:1.2 }
.plek{ color:var(--grey); font-style:italic }
.team{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px }
.team figure{ margin:0; display:grid; gap:10px; justify-items:start; padding:20px; border-radius:var(--radius); background:var(--surface); border:1px solid var(--line) }
.team .foto-plek{ width:100%; height:auto; aspect-ratio:1; border-radius:14px; max-width:100% }
.team b{ font:700 1.05rem var(--display); color:var(--heading) }
.team span{ font-size:.88rem; color:var(--grey) }
@media (max-width:860px){ .team{ grid-template-columns:repeat(2,minmax(0,1fr)) } .citaat{ grid-template-columns:64px minmax(0,1fr) } .citaat .foto-plek{ width:64px; height:64px } }

/* ---------- Start hier ---------- */
.start-keuzes{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px }
.start-keuze{ display:grid; gap:12px; align-content:start; padding:28px 26px; border-radius:var(--radius); background:var(--surface); border:1px solid var(--line); text-decoration:none; color:inherit; transition:transform .4s var(--ease-out), box-shadow .4s, border-color .3s }
.start-keuze:hover{ transform:translateY(-6px); box-shadow:var(--shadow); border-color:var(--teal) }
.start-keuze .ico{ width:48px; height:48px; border-radius:14px; display:grid; place-items:center; background:var(--mint); color:var(--teal-t) }
.start-keuze .ico svg{ width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round }
.start-keuze h2{ font-size:1.35rem; margin:0 }
.start-keuze p{ margin:0; color:var(--grey) }
.start-keuze .duur{ font:700 .76rem var(--text); color:var(--teal-t); text-transform:uppercase; letter-spacing:.08em }
.start-keuze ul{ margin:0; padding:0; list-style:none; display:grid; gap:6px }
.start-keuze ul a{ font-weight:600 }
@media (max-width:860px){ .start-keuzes{ grid-template-columns:1fr } }

/* ---------- vanafprijzen ---------- */
.pkg-prijs{ margin:6px 0 2px; display:flex; flex-wrap:wrap; align-items:baseline; gap:6px }
.pkg-prijs span{ font-size:.85rem; color:var(--grey) }
.pkg-prijs b{ font:800 1.9rem/1 var(--display); color:var(--heading); letter-spacing:-.02em }
.pkg-prijs small{ font-size:.8rem; color:var(--grey) }
.pkg-maand{ margin:0 0 8px; font-size:.85rem; color:var(--grey) }
.pkg--hl .pkg-prijs b{ color:#fff } .pkg--hl .pkg-prijs span, .pkg--hl .pkg-prijs small, .pkg--hl .pkg-maand{ color:#B9CCD8 }
.prijs-noot{ max-width:860px; margin:26px auto 0; font-size:.88rem; color:var(--grey); text-align:center }

/* ---------- mobiel ---------- */
@media (max-width:720px){
  .nm-dl .d{ flex-basis:auto; min-width:0 }
  /* rijen kaarten worden een veegstrook: de pagina wordt korter en de volgende kaart piept in beeld */
  .nm-normen, .nm-func, .tri{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:12px; padding-bottom:10px; margin-inline:-16px; padding-inline:16px; scrollbar-width:thin }
  .nm-normen > *, .nm-func > *, .tri > *{ flex:0 0 80%; scroll-snap-align:start }
  .tri .party:hover{ transform:none }
  /* vergelijkingstabel als compacte kaarten: per rij de vier aanbieders in een raster van twee */
  table.cmp.cmp-kaarten{ min-width:0; font-size:.86rem }
  .cmp-kaarten caption{ display:block; text-align:left; padding:0 0 10px }
  .cmp-kaarten thead{ display:none }
  .cmp-kaarten, .cmp-kaarten tbody{ display:block; width:100% }
  table.cmp.cmp-kaarten tr{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; border:1px solid var(--line); border-radius:14px; padding:12px 14px; margin-bottom:10px; background:var(--surface) }
  table.cmp.cmp-kaarten tbody th{ flex:0 0 100%; width:100%; max-width:none; min-width:0; position:static; box-shadow:none; font:700 .95rem var(--display); padding:0; border:0; text-align:left; background:transparent }
  table.cmp.cmp-kaarten td{ order:2; display:inline-flex; align-items:center; gap:4px; padding:0; border:0; text-align:left; background:transparent; font-size:.76rem; color:var(--grey) }
  table.cmp.cmp-kaarten td::before{ content:attr(data-label) ":"; font-weight:600 }
  table.cmp.cmp-kaarten td.us{ order:1; flex:0 0 100%; justify-content:space-between; background:var(--mint); border-radius:8px; padding:6px 10px; margin:4px 0 2px; font-size:.88rem; font-weight:700; color:var(--ink) }
  table.cmp.cmp-kaarten td.us::before{ content:attr(data-label); color:var(--teal-t) }
  #modules .grid{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:12px; padding-bottom:10px; margin-inline:-16px; padding-inline:16px }
  #modules .grid > *{ flex:0 0 82%; scroll-snap-align:start }
  .table-wrap:has(.cmp-kaarten){ overflow:visible; border:0; box-shadow:none; background:transparent }
  .bk-tellers{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px }
  .bk-teller{ padding:10px }
  .bk-teller b{ font-size:1.4rem }
  .bk-teller span{ font-size:.72rem }
}
/* ===== einde WOW ===== */