/* ==========================================================================
   Verkoopsite — stijl "Aurora" (dezelfde richting als de site van Abyco
   Solutions, V2): diep navy met een teal gloed, korrel en raster, glazen
   productkaarten, tellers, een tijdlijn die zich vult bij het scrollen.

   Binnen de CSP: geen externe lettertypen (Inter en Plus Jakarta Sans staan
   in /assets/fonts), geen inline stijl. Wat per element verschilt (de
   vertraging van een animatie, de plek van de lichtvlek) zet site.js via de
   CSSOM; dat staat de CSP wel toe. Zonder JavaScript is alles zichtbaar.
   prefers-reduced-motion zet de beweging uit.
   ========================================================================== */

@font-face{ font-family:"Inter"; src:url("/assets/fonts/inter.woff2") format("woff2"); font-weight:400 700; font-style:normal; font-display:swap }
@font-face{ font-family:"Plus Jakarta Sans"; src:url("/assets/fonts/plus-jakarta-sans.woff2") format("woff2"); font-weight:600 800; font-style:normal; font-display:swap }

:root{
  --navy:#0B2545; --navy-2:#13315C; --navy-deep:#061530; --teal:#0E9F9A; --teal-d:#0A7F7B; --teal-t:#08736F; --teal-l:#5FD3C9;
  --mint:#E3F4F1; --amber:#F2A541; --pruim:#7A5BA6; --pruim-t:#61468C; --on-pruim:#FFFFFF; --pruim-l:#B9A2E6; --pruim-gloed:rgba(122,91,166,.5); --ink:#16243A; --grey:#5B6B7B; --paper:#F6FAF9; --line:#D9E6E3;
  --bg:#FFFFFF; --surface:#FFFFFF; --heading:#0B2545; --link:#08736F; --band:#0B2545; --band-ink:#CFE3EA;
  --good:#1F9D62; --warn-t:#8A5300; --bad:#D2493C; --bad-zacht:#FBE7E7; --bad-t:#7A1F1F; --bad-tekst:#B3382C; --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;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#071A33; --surface:#0E2544; --paper:#0A1F3C; --mint:#0F3A47; --line:#1E3A5C;
    --ink:#E6EEF3; --grey:#A7B8C7; --heading:#F2F6F9; --link:#5FD3C9; --teal-t:#5FD3C9; --warn-t:#F0A93F; --pruim:#B9A2E6; --pruim-t:#CDBBF3; --on-pruim:#0B2545;
    --shadow:0 20px 60px -20px rgba(0,0,0,.6); --shadow-s:0 6px 20px -8px rgba(0,0,0,.5);
    --good:#3DC486; --bad:#F06A5C; --bad-zacht:#3A1A22; --bad-t:#FFD5D0; --bad-tekst:#F06A5C;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#071A33; --surface:#0E2544; --paper:#0A1F3C; --mint:#0F3A47; --line:#1E3A5C;
  --ink:#E6EEF3; --grey:#A7B8C7; --heading:#F2F6F9; --link:#5FD3C9; --teal-t:#5FD3C9; --warn-t:#F0A93F; --pruim:#B9A2E6; --pruim-t:#CDBBF3; --on-pruim:#0B2545;
  --shadow:0 20px 60px -20px rgba(0,0,0,.6); --shadow-s:0 6px 20px -8px rgba(0,0,0,.5);
  --good:#3DC486; --bad:#F06A5C; --bad-zacht:#3A1A22; --bad-t:#FFD5D0; --bad-tekst:#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; text-wrap:balance }
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% }
[id]{ scroll-margin-top:96px }
: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:820px }
.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) }
.icoon{ width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none }

/* ---------- scroll-voortgang en lichtvlek bij de muis ---------- */
.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(--pruim)) }
.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 ---------- */
/* Het logo is een bestand in twee versies; de donkere staat op navy (held,
   voet, uitgeklapt menu) en in het donkere thema. */
.logo{ display:inline-flex; align-items:center; text-decoration:none }
.logo-img{ display:block; height:40px; width:auto }
.logo-img--donker{ display:none }
:root[data-theme="dark"] .logo-img--licht, .site-footer .logo-img--licht, .on-dark .site-header:not(.is-scrolled) .logo-img--licht{ display:none }
:root[data-theme="dark"] .logo-img--donker, .site-footer .logo-img--donker, .on-dark .site-header:not(.is-scrolled) .logo-img--donker{ display:block }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .logo-img--licht{ display:none }
  :root:not([data-theme="light"]) .logo-img--donker{ display:block }
}
.foot-afzender{ font-size:.85rem; color:#94AEBE }

/* ---------- kop ---------- */
.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-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; position:relative }
.main-nav .has-mega > a{ padding-right:2px } .main-nav .has-mega > a::after{ right:2px }
.main-nav .sub-btn{ padding:10px 6px 10px 4px; min-width:26px; justify-content:center } /* WCAG 2.5.8: minstens 24 px breed */
.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,860px); 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.35fr 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 .icoon{ 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 }
.nav-cta a{ background:var(--pruim); color:var(--on-pruim) !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 }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .theme-btn .sun{ display:none } :root:not([data-theme="light"]) .theme-btn .moon{ display:block } }
/* Zonder JavaScript doet de knop niets; dan hoort hij er ook niet te staan. */
html.no-js .theme-btn{ display:none }
.nav-toggle{ display:none }
@media (max-width:980px){
  .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) }
  /* Zonder JavaScript gaat het menu niet open; dan staat het gewoon onder de kop. */
  html.no-js .nav-toggle{ display:none }
  html.no-js .main-nav{ position:static; opacity:1; pointer-events:auto; clip-path:none; background:none; padding:0; overflow:visible }
  html.no-js .main-nav > ul{ flex-wrap:wrap }
  html.no-js .site-header .wrap{ flex-wrap:wrap }
  html.js .main-nav > ul{ flex-direction:column; align-items:stretch; gap:4px; max-width:560px; margin:0 auto }
  html.js .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) }
  html.js .main-nav.open > ul > li{ transform:none; opacity:1 }
  html.js .main-nav > ul > li > a, html.js .main-nav > ul > li > .sub-btn{ color:#fff !important; font:700 1.35rem var(--display); letter-spacing:-.02em; padding:12px 8px }
  html.js .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 }
  html.js .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 }
  .main-nav .has-mega:hover > .mega, .main-nav .has-mega:focus-within > .mega{ transform:none }
  .mega h3{ color:var(--teal-l) }
  .mega .items{ grid-template-columns:1fr; gap:2px }
  .mega .items 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{ background:rgba(255,255,255,.08); transform:none }
  .mega .feat{ display:none }
  html.js .nav-cta a{ display:flex; background:var(--pruim-l); color:var(--navy) !important; justify-content:center; padding:16px !important; margin:10px 0 0 }
  html.js .site-header .logo{ position:relative; z-index:2 }
  html.js .site-header:has(.main-nav.open) .logo-img--licht{ display:none }
  html.js .site-header:has(.main-nav.open) .logo-img--donker{ display:block }
  html.js .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 .icoon{ width:18px; height:18px; stroke-width:2.2; transition:transform .3s var(--ease-out) }
.btn:hover .icoon{ 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(--pruim); color:var(--on-pruim); box-shadow:0 10px 30px -10px var(--pruim-gloed) }
.btn--primary:hover{ background:var(--pruim-t); color:var(--on-pruim); box-shadow:0 18px 40px -12px var(--pruim-gloed); transform:translateY(-2px) }
.btn:active{ transform:translateY(0) scale(.98) }
.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(--pruim-l); color:var(--navy) }
.on-navy .btn--primary:hover{ background:#CDBBF3; 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-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--paper{ background:var(--paper) }
.section--mint{ background:linear-gradient(180deg,var(--mint),color-mix(in srgb,var(--mint) 60%,var(--bg))) }
.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); margin-top:16px }
.on-navy .note{ color:#A9C3D0 }

/* ---------- verschijnen bij scrollen ---------- */
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].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) }
html.js .split.is-in .w > span{ transform:none }

/* ---------- held ---------- */
.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(185,162,230,.3),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.1fr) minmax(0,1fr); gap:56px; align-items:center }
.hero h1{ color:#fff; margin-bottom:.4em; max-width:17ch }
.hero h1 em{ font-style:normal; background:linear-gradient(90deg,#B9A2E6,#E6DCFA 50%,#B9A2E6); -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.2rem; 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.16rem }
.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.3em; line-height:1.3; color:#fff; font-weight:600 }
.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 }
html.no-js .rotator span:first-child{ transform:none; opacity:1 }
.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 }

/* Het product in de held: Mijn dag als glazen kaart, met chips eromheen. */
.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(80%,450px); 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(58%,330px); 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:4; max-width:250px }
.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) }
/* De chips zweven naast de kaart, niet erop: ze mogen geen regel van Mijn dag afdekken. */
.chip--a{ left:0; top:10px; --d:1.4s; --t:7s }
.chip--b{ right:0; top:40px; --d:1.9s; --t:8s }
.chip--c{ left:0; bottom:-34px; --d:2.4s; --t:6.5s }
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) } }
.mock{ position:absolute; inset:auto 0 30px auto; width:min(100%,440px); background:#fff; color:#16243A; border-radius:16px; box-shadow:0 50px 100px -30px rgba(0,0,0,.8); overflow:hidden; transform:translateZ(40px) rotateY(-8deg) rotateX(4deg); font-size:.8rem; z-index:3 }
html.js .mock{ opacity:0; animation:mockin 1.2s var(--ease-out) .5s forwards }
@keyframes mockin{ from{ opacity:0; transform:translateY(40px) translateZ(40px) rotateY(-16deg) } to{ opacity:1; transform:translateZ(40px) rotateY(-8deg) rotateX(4deg) } }
.mock-head{ background:#0B2545; color:#D7E6EC; padding:14px 16px; display:flex; justify-content:space-between; align-items:center; gap:10px }
.mock-head b{ color:#fff; font-family:var(--display); font-size:.98rem; display:block } .mock-head small{ font-size:.7rem }
.mock-score{ display:flex; gap:5px; flex:none }
.mock-score span{ background:rgba(255,255,255,.12); border-radius:999px; padding:2px 8px; font-size:.66rem; color:#fff; font-weight:600; white-space:nowrap }
.mock-list{ list-style:none; margin:0; padding:0 }
.mock-list li{ display:grid; grid-template-columns:46px minmax(0,1fr) auto; gap:10px; align-items:center; padding:11px 16px; border-bottom:1px solid #D9E6E3 }
html.js .mock-list li{ opacity:0; transform:translateX(-8px); animation:rowin .6s var(--ease-out) forwards; animation-delay:calc(1.1s + var(--i,0)*120ms) }
@keyframes rowin{ to{ opacity:1; transform:none } }
.mock-tijd{ font:700 .8rem var(--display); color:#0B2545; font-variant-numeric:tabular-nums }
.mock-wat b{ font-family:var(--display) }
.mock-wat small{ display:block; color:#5B6B7B; font-size:.7rem; margin-top:1px }
.mock-foot{ padding:9px 16px; font-size:.68rem; color:#5B6B7B; background:#F6FAF9 }
.mock .dot{ font-size:.72rem; color:#16243A }
.stamp{ position:absolute; right:-6px; bottom:-6px; z-index:5; width:100px; height:100px; border-radius:50%; background:var(--teal-l); color:var(--navy); display:grid; place-items:center; align-content: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.6rem; letter-spacing:0 }

/* ---------- kerncijfers ---------- */
.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; margin-bottom:8px }
.stat b small{ font-size:.5em; color:var(--teal-t); font-weight:700; margin-left:4px; letter-spacing:0 }
.stat > span{ font-size:.9rem; color:var(--grey) }

/* ---------- rasters en 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)) }
.split-2{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:56px; align-items:center }
.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; overflow:hidden }
.card--paper{ background:var(--paper) }
.card--navy{ background:linear-gradient(160deg,var(--navy-2),var(--navy-deep)); border-color:transparent; color:var(--band-ink) }
.card--navy h3{ color:#fff }
.card h3{ margin-bottom:.4em }
.card p{ color:var(--grey) }
.card--navy p{ color:var(--band-ink) }
.card p:last-child{ margin-bottom:0 }
.card .link-arrow{ display:inline-flex; margin-top:6px }
a.card{ text-decoration:none; color:inherit; display:block }
.card[data-tilt]::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 }
.card[data-tilt]::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 }
.card[data-tilt]:hover{ box-shadow:var(--shadow); transform:translateY(-6px) rotateX(var(--rx,0)) rotateY(var(--ry,0)) }
.card[data-tilt]:hover::before, .card[data-tilt]:hover::after{ opacity:1 }
.ico{ width:52px; height:52px; border-radius:14px; background:var(--mint); color:var(--teal-t); display:grid; place-items:center; margin-bottom:18px; flex:none; transition:transform .5s var(--ease-out), background .3s, color .3s }
.card[data-tilt]:hover .ico{ transform:translateY(-4px) rotate(-6deg) scale(1.08); background:var(--teal-l); color:var(--navy) }
.ico .icoon{ width:26px; height:26px }
.card--navy .ico{ background:rgba(95,211,201,.14); color:var(--teal-l) }
.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:10px }
ul.check li{ position:relative; padding-left:30px; font-size:.97rem }
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, .pkg--hl ul.check li::before, .p1 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") }
ul.check.cols{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 28px }

/* ---------- tijdlijn ---------- */
.steps{ --prog:0; list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:18px; position:relative }
.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) 60%,var(--pruim)); 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); display:grid; place-items:center; transition:background .4s, border-color .4s, color .4s, transform .5s var(--ease-out), box-shadow .5s; z-index:1 }
.steps .num .icoon{ width:24px; height:24px }
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.04rem } .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:2em 0 0 }
.callout p:last-child{ margin-bottom:0 }

/* ---------- drie vlakken ---------- */
.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 }
.party p{ font-size:.96rem }
.p1{ background:linear-gradient(160deg,var(--navy-2),var(--navy-deep)); color:#D7E6EC } .p1 h3{ color:#fff } .p1 .role{ 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) }

/* ---------- productfragment: rapport/logboek ---------- */
.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:18px 22px; 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.02rem; display:block }
.report-head small{ font-size:.8rem }
.report-score{ display:flex; gap:8px; flex-wrap:wrap }
.report-score span{ background:rgba(255,255,255,.1); border-radius:999px; padding:4px 12px; font-size:.8rem; color:#fff }
.report table{ width:100%; border-collapse:collapse; font-size:.9rem }
.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:.82rem }
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)*90ms) }
html.js .report.is-in tbody tr{ opacity:1; transform:none }
.report .src{ display:block; color:var(--grey); font-size:.78rem; margin-top:3px }
.report-foot{ padding:12px 18px; font-size:.8rem; color:var(--grey); background:var(--paper) }
.dot{ display:inline-flex; align-items:center; gap:7px; font-weight:600; white-space:nowrap }
.dot::before{ content:""; width:10px; height:10px; border-radius:50%; background:var(--grey) }
.dot--pass::before{ background:var(--good) } .dot--warn::before{ background:var(--amber) } .dot--fail::before{ background:var(--bad) }
.dot--nu::before{ background:var(--teal); box-shadow:0 0 0 0 rgba(14,159,154,.6); animation:pulse 1.8s ease-out infinite }

/* ---------- kioskbord ---------- */
.kiosk-mock{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow) }
.kiosk-head{ background:var(--navy); color:#D7E6EC; padding:16px 20px; display:flex; justify-content:space-between; align-items:center; gap:12px }
.kiosk-head b{ color:#fff; font-family:var(--display); font-size:1.02rem }
.kiosk-head span{ font:700 1.3rem var(--display); color:#fff; font-variant-numeric:tabular-nums }
.kiosk-body{ padding:18px 20px 20px; display:grid; gap:14px }
.kiosk-group p{ font:700 .72rem var(--display); letter-spacing:.14em; text-transform:uppercase; color:var(--grey); margin:0 0 8px }
.kiosk-tiles{ display:flex; flex-wrap:wrap; gap:8px }
.kiosk-tile{ display:inline-flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--grey); border-radius:10px; padding:9px 14px; font:700 .95rem var(--display); color:var(--heading) }
.kiosk-tile small{ font:500 .76rem var(--text); color:var(--grey) }
.kiosk-tile--in{ border-left-color:var(--good) }
.kiosk-tile--weg{ border-left-color:var(--teal) }
.kiosk-tile--gast{ border-left-color:var(--amber) }
.kiosk-foot{ padding:12px 20px; font-size:.8rem; color:var(--grey); border-top:1px solid var(--line) }

/* ---------- 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:10px 0 18px; font-size:.96rem }
.pkg .result{ margin-top:auto; padding-top:16px; border-top:1px solid var(--line); font-size:.92rem; color:var(--grey) }
.pkg .btn{ margin-top:18px; align-self:flex-start }
.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, .pkg--hl .result{ color:var(--band-ink) } .pkg--hl .result{ border-color:rgba(255,255,255,.18) }
.pkg .tag{ align-self:flex-start }
.levels{ display:grid; grid-template-columns:repeat(4,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; font-size:1.12rem }
.level p{ color:var(--grey); font-size:.95rem; margin:0 }

/* ---------- vragen ---------- */
.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 .antwoord{ padding:0 0 18px; color:var(--ink) }
html.js .faq .antwoord{ animation:faqin .5s var(--ease-out) }
@keyframes faqin{ from{ opacity:0; transform:translateY(-6px) } }
.faq .antwoord p:last-child{ margin-bottom:0 }

/* ---------- slotband ---------- */
.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{ position:absolute; 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 }

/* ---------- formulier ---------- */
.contact-grid{ display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); gap:40px; align-items:start }
.form-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:34px; box-shadow:var(--shadow) }
.form{ display:grid; gap:20px }
.two{ display:grid; grid-template-columns:1fr 1fr; gap:18px }
.field{ display:grid; gap:6px; align-content:start; min-width:0 }
.field > label, .field-legend{ font-weight:600; font-size:.95rem; color:var(--heading) }
.optional{ font-weight:400; color:var(--grey); font-size:.85rem }
.hint{ font-size:.84rem; color:var(--grey); margin:0 }
.field input, .field select, .field textarea{ font:inherit; color:var(--ink); background:var(--surface); border:1px solid #9FB3B0; 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 [aria-invalid="true"]{ border-color:var(--bad) }
.field-error{ color:var(--bad); font-size:.86rem; font-weight:600; margin:0 }
fieldset.field{ border:0; padding:0; margin:0 }
fieldset.field > legend{ padding:0; margin-bottom:8px }
.seg{ display:inline-flex; flex-wrap:wrap; gap:4px; background:var(--mint); border-radius:999px; padding:4px; justify-self:start }
.seg label{ position:relative; cursor:pointer }
.seg input, .chips input{ position:absolute; opacity:0; width:1px; height:1px; pointer-events:none }
.seg span{ display:inline-block; padding:9px 18px; border-radius:999px; font:600 .9rem var(--text); color:var(--ink); transition:background .25s, color .25s }
.seg input:checked + span{ background:var(--teal-d); color:#fff }
.seg input:focus-visible + span, .chips input:focus-visible + span{ outline:3px solid var(--focus); outline-offset:2px }
.chips-kop{ font:700 .72rem var(--display); letter-spacing:.14em; text-transform:uppercase; color:var(--grey); margin:10px 0 8px }
.chips{ display:flex; flex-wrap:wrap; gap:8px }
.chips label{ position:relative; cursor:pointer }
.chips span{ display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line); border-radius:999px; padding:8px 14px; font-size:.88rem; font-weight:600; color:var(--ink); background:var(--surface); transition:background .2s, color .2s, border-color .2s, transform .3s var(--ease-out) }
.chips span::before{ content:""; width:14px; height:14px; border-radius:50%; border:2px solid #9FB3B0; flex:none; transition:background .2s, border-color .2s }
.chips label:hover span{ border-color:var(--teal); transform:translateY(-2px) }
.chips input:checked + span{ background:var(--mint); border-color:var(--teal); color:var(--teal-t) }
.chips input:checked + span::before{ 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.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/10px no-repeat; border-color:var(--teal-d) }
.check-field{ display:flex; gap:10px; align-items:flex-start; font-size:.93rem; font-weight:400 }
.check-field input{ width:20px; height:20px; margin-top:2px; accent-color:var(--teal-d); flex:none }
.honing{ position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden }
.alert{ border-radius:12px; padding:16px 18px; margin:0 0 22px; border-left:4px solid var(--amber); background:var(--mint) }
.alert--error{ background:var(--bad-zacht); border-left-color:var(--bad); color:var(--bad-t) }
.alert--error a{ color:inherit }
.form .btn{ justify-self:start }
.aside-card{ position:sticky; top:96px; display:grid; gap:18px }
.aside-card .card{ padding:26px }
.aside-steps{ list-style:none; margin:0; padding:0; display:grid; gap:16px; counter-reset:stap }
.aside-steps li{ display:grid; grid-template-columns:34px 1fr; gap:12px; align-items:start; counter-increment:stap; font-size:.95rem }
.aside-steps li::before{ content:counter(stap); width:34px; height:34px; border-radius:50%; background:var(--teal-l); color:var(--navy); display:grid; place-items:center; font:800 .9rem var(--display) }
.aside-steps b{ display:block; font-family:var(--display); color:#fff }

/* ---------- lopende tekst ---------- */
.prose{ max-width:72ch; font-size:1.05rem }
.prose h2{ font-size:1.5rem; margin-top:1.8em }
.prose h2:first-child{ margin-top:0 }
.prose a{ font-weight:600 }

/* ---------- voet ---------- */
.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.6fr repeat(3,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:36ch }
.site-footer .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 p{ margin:0 }
.big-mark{ font:800 clamp(4rem,17vw,14rem)/0.8 var(--display); letter-spacing:-.05em; color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.09); user-select:none; pointer-events:none; text-align:center; margin:56px 0 -36px; 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 }
html.no-js .totop{ display:none }
.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 }

/* ---------- held: vloeiend licht (WebGL) ---------- */
.hero canvas.vloei{ position:absolute; inset:0; width:100%; height:100%; z-index:0; opacity:1 }
.hero.heeft-vloei .aurora{ opacity:.2 }

/* ---------- echte schermen in een kader ---------- */
.browser{ position:relative; border-radius:14px; background:#0E2544; padding-top:28px; overflow:hidden; box-shadow:0 50px 100px -30px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.08) }
.browser::before{ content:""; position:absolute; left:14px; top:10px; width:8px; height:8px; border-radius:50%; background:#B9A2E6; box-shadow:14px 0 0 #F2A541, 28px 0 0 #5FD3C9 }
.browser img{ display:block; width:100%; height:auto }
.phone{ position:relative; border-radius:34px; padding:7px; background:#061530; box-shadow:0 40px 80px -24px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.12) }
.phone img{ display:block; width:100%; height:auto; border-radius:27px }
.beeld-noot{ font-size:.8rem; color:#A9C3D0; margin:14px 0 0 }

/* ---------- held: podium met dashboard en telefoon ---------- */
.hero-stage{ position:relative; min-height:540px; perspective:1400px }
.hero-stage .browser{ position:absolute; top:24px; left:70px; width:min(740px,122%); transform:rotateY(-14deg) rotateX(6deg) rotateZ(1deg); transform-origin:left center }
.hero-stage .phone{ position:absolute; left:-56px; bottom:-8px; width:188px; transform:rotateY(-8deg) rotateX(4deg) translateZ(90px) }
.hero-stage .chip--a{ left:auto; right:-4px; top:-6px }
.hero-stage .chip--c{ left:150px; bottom:20px }
html.js .hero-stage .browser{ opacity:0; animation:podium-in 1.3s var(--ease-out) .35s forwards }
html.js .hero-stage .phone{ opacity:0; animation:telefoon-in 1.2s var(--ease-out) .8s forwards }
@keyframes podium-in{ from{ opacity:0; transform:translateY(60px) rotateY(-24deg) rotateX(10deg) } to{ opacity:1; transform:rotateY(-14deg) rotateX(6deg) rotateZ(1deg) } }
@keyframes telefoon-in{ from{ opacity:0; transform:translateY(80px) rotateY(-8deg) translateZ(90px) } to{ opacity:1; transform:rotateY(-8deg) rotateX(4deg) translateZ(90px) } }

/* ---------- rondleiding: de keten, scherm voor scherm ---------- */
.tour{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.35fr); gap:64px; align-items:start }
.tour-stappen{ list-style:none; margin:0; padding:0 }
.tour-stap{ min-height:64vh; display:grid; align-content:center; gap:10px; padding:24px 0; opacity:.28; transition:opacity .5s var(--ease-out) }
.tour-stap.is-actief{ opacity:1 }
html.no-js .tour-stap{ opacity:1 }
.tour-stap h3{ font-size:clamp(1.4rem,2.2vw,1.9rem); margin:0 }
.tour-stap p{ color:var(--grey); font-size:1.06rem; margin:0; max-width:44ch }
.tour-stap .when{ justify-self:start }
.tour-beeld{ position:sticky; top:calc(var(--hh) + 8vh); aspect-ratio:1440/930 }
.tour-dia{ position:absolute; inset:0; opacity:0; transform:translateY(16px) scale(.985); transition:opacity .6s var(--ease-out), transform .8s var(--ease-out) }
.tour-dia.is-aan{ opacity:1; transform:none }
html.no-js .tour-dia:first-child{ opacity:1; transform:none }
.tour-dia--telefoon{ display:grid; place-items:center; background:radial-gradient(60% 70% at 50% 50%,rgba(95,211,201,.18),transparent 70%); border-radius:20px }
.tour-dia--telefoon .phone{ width:34% }
.tour-mobiel{ display:none }
.tour-balk{ position:absolute; left:0; right:0; bottom:-28px; height:3px; border-radius:3px; background:var(--line); overflow:hidden }
.tour-balk i{ display:block; height:100%; width:calc(var(--stap,1) / 6 * 100%); background:linear-gradient(90deg,var(--teal),var(--pruim)); transition:width .5s var(--ease-out) }

/* Stappen als knoppen: de stap die bij het scrollen het laatst oplicht (of waarop is geklikt) toont zijn scherm. */
.stap-knop{ display:block; width:100%; margin:0; padding:0; border:0; background:none; font:inherit; color:inherit; text-align:left; cursor:pointer }
.stap-knop:focus-visible{ outline:3px solid var(--focus); outline-offset:6px; border-radius:12px }
.stap-knop:focus-visible .num{ outline:3px solid var(--focus); outline-offset:3px }
.stap-knop:hover .num{ border-color:var(--teal) }
.stap-titel{ display:block; font:800 1.04rem/1.25 var(--display); color:var(--heading); letter-spacing:-.01em; margin:0 0 .4em }
.steps li.is-huidig .num, html.js .steps li.is-huidig .num{ background:var(--pruim); border-color:#E6DCFA; color:var(--on-pruim); transform:scale(1.15); box-shadow:0 0 0 8px rgba(122,91,166,.18) }
.steps li.is-huidig .stap-titel{ color:var(--pruim-t) }
.steps[data-stappen]::after{ transition:transform .7s var(--ease-out) }
.stap-scherm{ position:relative; max-width:1000px; margin:64px auto 0; aspect-ratio:1440/930 }
html.no-js .stap-scherm .tour-dia:first-child{ opacity:1; transform:none }

/* ---------- uitspraak die oplicht bij het lezen ---------- */
.statement{ padding:120px 0 }
.statement p{ font:800 clamp(2rem,5vw,4rem)/1.08 var(--display); letter-spacing:-.03em; color:var(--heading); max-width:21ch; margin:0; text-wrap:balance }
.statement em{ font-style:normal; color:var(--pruim-t) }
@supports (animation-timeline: view()){
  html.js .statement .wl{ animation:oplichten linear both; animation-timeline:view(); animation-range:entry 0% cover 42% }
}
@keyframes oplichten{ from{ opacity:.13 } to{ opacity:1 } }

@media (max-width: 980px){
  .hero-stage{ min-height:0; padding:56px 0 40px }
  .hero-stage .browser{ position:relative; inset:auto; width:100%; transform:none }
  html.js .hero-stage .browser{ animation-name:plat-in }
  .hero-stage .phone{ position:absolute; left:auto; right:-6px; bottom:0; width:120px; transform:none }
  html.js .hero-stage .phone{ animation-name:plat-in }
  @keyframes plat-in{ from{ opacity:0; transform:translateY(30px) } to{ opacity:1; transform:none } }
  .hero-stage .chip--a{ right:0; top:0 } .hero-stage .chip--c{ display:none }
  .tour{ grid-template-columns:minmax(0,1fr); gap:0 }
  .tour-beeld{ display:none }
  .tour-stap{ min-height:0; opacity:1; padding:28px 0; border-top:1px solid var(--line) }
  .tour-mobiel{ display:block; margin-top:14px }
}
@media (max-width: 680px){
  .statement{ padding:72px 0 }
}

/* ---------- responsief ---------- */
@media (max-width: 1100px){
  .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 }
  .foot-grid{ grid-template-columns:1fr 1fr 1fr } .foot-brand{ grid-column:1 / -1 }
}
@media (max-width: 980px){
  .hero-grid, .split-2, .contact-grid{ grid-template-columns:minmax(0,1fr) }
  .hero-art{ min-height:0; padding-top:64px }
  .orbit{ display:none }
  .mock{ position:relative; inset:auto; margin:0 0 0 auto; transform:none }
  html.js .mock{ animation-name:mockin-plat }
  @keyframes mockin-plat{ from{ opacity:0; transform:translateY(30px) } to{ opacity:1; transform:none } }
  .chip--a{ top:0 } .chip--b{ display:none } .chip--c{ left:0; bottom:-30px }
  .hero-art{ padding-bottom:28px }
  .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{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .levels{ grid-template-columns:1fr 1fr } .level:nth-child(3){ border-left:0 } .level:nth-child(n+3){ border-top:1px solid var(--line) }
  .cta-band{ grid-template-columns:minmax(0,1fr); padding:44px 32px }
  .pkg--hl{ transform:none } .pkg--hl:hover{ transform:translateY(-6px) }
  .aside-card{ position:static }
}
@media (max-width: 680px){
  body{ font-size:15.5px } .wrap{ padding-inline:16px }
  .section{ 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, ul.check.cols{ grid-template-columns:minmax(0,1fr) }
  .level{ border-left:0 !important; border-top:1px solid var(--line) } .level:first-child{ border-top:0 }
  .stats .wrap > div{ grid-template-columns:1fr 1fr }
  .stat{ padding:22px 18px }
  .foot-grid{ grid-template-columns:1fr 1fr }
  .card, .form-card{ padding:22px }
  .btn-row .btn{ width:100% }
  .mock{ width:100%; font-size:.74rem } .mock-list li{ grid-template-columns:40px minmax(0,1fr) auto; padding:10px 12px }
  .stamp{ width:84px; height:84px; right:-4px } .stamp b{ font-size:1.3rem }
  .chip{ font-size:.76rem; max-width:220px }
  .report th:nth-child(3), .report td:nth-child(3){ display:none }
  .cta-band{ padding:36px 22px; border-radius:22px }
  .seg{ border-radius:16px }
  .aura{ display:none }
}

/* ---------- afdrukken ---------- */
@media print{
  .site-header, .site-footer, .skip, .btn-row, .nav-toggle, .progress, .aura, .totop, .band, canvas, .aurora, .grain, .gridlines, .hero-art{ display:none !important }
  body{ font-size:11pt; color:#000; background:#fff }
  .section, .hero{ padding:16px 0; margin:0 }
  .on-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 .report tbody tr, html.js .log-regel{ opacity:1 !important; transform:none !important; filter:none !important }
}

/* ---------- minder beweging ---------- */
@media (prefers-reduced-motion: reduce) and (min-width: 100000px){ /* uitgeschakeld 16-10-2026: altijd volledige animaties (keuze opdrachtgever) */
  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 .report tbody tr, html.js .chip, html.js .mock, html.js .mock-list li, html.js .stamp{ opacity:1; transform:none; filter:none }
  html.js .stamp{ transform:rotate(-12deg) }
  html.js ul.check li::before{ transform:scale(1) }
  .rotator span{ opacity:1; transform:none } .rotator span:not(.is-on){ display:none }
  .aurora i, .aura, .band-loop ul, .orbit-ring{ animation:none }
  .kicker::before{ transform:scaleX(1) }
  html.js .statement .wl{ animation:none; opacity:1 }
  html.js .hero-stage .browser, html.js .hero-stage .phone{ opacity:1 }
  .tour-dia{ transition:none }
}
/* ===== Loep (16-10-2026) ===== */
/* Een groot productscherm in het donker; een glazen loep (WebGL in site.js) maakt helder en groot wat eronder ligt en volgt Henk.
   Overgang = portaal: de loep zet uit tot de hele hero en knijpt weer samen op Henk in het volgende scherm. Zonder JavaScript of WebGL:
   het eerste scherm als gewone afbeelding. Ook bij 'minder beweging' de volledige beleving (keuze opdrachtgever); de algemene regel
   van de site die alle overgangen dan uitzet, geldt hier dus niet. Stilzetten kan met de pauzeknop. */
@property --lp-tint{ syntax:"<color>"; inherits:true; initial-value:#7A5BA6 }
.lp{ --lp-tint:#7A5BA6; min-height:max(100svh, 820px); display:flex; flex-direction:column; justify-content:center; padding:56px 0 72px; transition:--lp-tint 1.6s var(--ease-out) }
.on-dark .lp{ padding-top:calc(48px + var(--hh)) }
.lp{ background:#061530 }
.hero canvas.lp-licht{ z-index:0; opacity:1; pointer-events:none; display:block }
.hero canvas.lp-canvas{ z-index:2; opacity:1; pointer-events:none; display:block }
.lp .wrap{ position:relative; z-index:3; width:100% }
.lp-vh{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
.lp-tekst{ width:min(100%, calc((min(100vw, var(--wrap)) - 48px) * .4)) }
/* 'vastleggen.' is ~6,05em breed: met deze grootte past het altijd in de tekstkolom (max. 460 px) */
.lp-titel{ margin:0 !important; font-size:inherit !important; line-height:.94 !important; letter-spacing:-.05em; max-width:none !important; color:#fff }
.lp-woord{ display:inline-block; white-space:nowrap; padding-bottom:.24em; margin-bottom:-.24em; font-size:clamp(2.6rem, 5vw, 4.6rem);
  background:linear-gradient(100deg, #fff 0%, #B9A2E6 35%, #F1EAFF 50%, #5FD3C9 75%, #fff 100%); background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent; animation:lpGlans 9s linear infinite }
.lp-woord .lp-ruis{ opacity:.45 }
.lp-vast{ display:block; white-space:nowrap; margin-top:.14em; font-size:clamp(1.5rem, 2.6vw, 2.7rem); letter-spacing:-.04em; color:#fff }
.lp-glans{ display:inline-block; padding-bottom:.24em; margin-bottom:-.24em; background:linear-gradient(100deg, #fff 0%, #B9A2E6 35%, #F1EAFF 50%, #5FD3C9 75%, #fff 100%);
  background-size:220% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:lpGlans 9s linear infinite }
@keyframes lpGlans{ to{ background-position:-220% 0 } }
.lp .lp-lead{ margin:18px 0 0; font-size:1.04rem; max-width:42ch }

.lp-hoofdstukken{ list-style:none; margin:24px 0 0; padding:0; border-top:1px solid rgba(255,255,255,.14) }
.lp-hoofdstukken li{ border-bottom:1px solid rgba(255,255,255,.14) }
@media (min-width:1000px){
  .lp-hoofdstukken{ --b:0px; --o:0px; position:relative; max-height:17.6rem; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:none;
    -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 var(--b), #000 calc(100% - var(--o)), transparent 100%);
    mask-image:linear-gradient(to bottom, transparent 0, #000 var(--b), #000 calc(100% - var(--o)), transparent 100%) }
  .lp-hoofdstukken::-webkit-scrollbar{ display:none }
  .lp-hoofdstukken.lp-boven{ --b:30px } .lp-hoofdstukken.lp-onder{ --o:42px }
}
.lp-hoofdstukken button{ position:relative; width:100%; display:grid; grid-template-columns:34px 1fr; align-items:baseline; column-gap:8px; padding:10px 0 11px; border:0; background:none;
  color:#A9BCCA; font:inherit; text-align:left; cursor:pointer; transition:color .4s }
.lp-nr{ font:700 .76rem var(--display); letter-spacing:.08em }
.lp-naam{ font:700 1rem var(--display); letter-spacing:-.01em; transition:font-size .4s var(--ease-out) }
.lp-zin{ grid-column:2; max-height:0; overflow:hidden; opacity:0; font-size:.9rem; line-height:1.4; color:#CFE3EA; transition:max-height .6s var(--ease-out), opacity .5s, margin .6s var(--ease-out) }
.lp-balk{ position:absolute; left:0; right:0; bottom:-1px; height:2px; overflow:hidden }
.lp-balk b{ display:block; height:100%; width:calc(var(--p, 0) * 100%); background:linear-gradient(90deg, #B9A2E6, #5FD3C9); box-shadow:0 0 12px rgba(185,162,230,.8) }
.lp-hoofdstukken button:hover, .lp-hoofdstukken button[aria-pressed="true"]{ color:#fff }
.lp-hoofdstukken button[aria-pressed="true"] .lp-nr{ color:#CDBBF3 }
.lp-hoofdstukken button[aria-pressed="true"] .lp-naam{ font-size:1.18rem }
.lp-hoofdstukken button[aria-pressed="true"] .lp-zin{ max-height:3em; opacity:1; margin-top:4px }
.lp .lp-knoppen{ align-items:center; margin-top:24px }
.lp-pauze{ flex:none; width:46px; height:46px; border-radius:50%; border:1px solid rgba(255,255,255,.26); background:rgba(255,255,255,.05); color:#fff; display:grid; place-items:center; cursor:pointer }
.lp-pauze svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round }
.lp-pauze .i-speel{ display:none; fill:currentColor; stroke:none }
.lp-pauze[aria-pressed="true"] .i-pauze{ display:none } .lp-pauze[aria-pressed="true"] .i-speel{ display:block }
.lp-hoofdstukken button:focus-visible, .lp-pauze:focus-visible{ outline:3px solid var(--focus); outline-offset:3px }

/* plek voor het scherm: op een smal scherm tussen de tekst; zonder WebGL staat hier de gewone afbeelding */
.lp-podium{ display:none }
.lp-reserve{ display:none; width:100%; height:auto; border-radius:14px; box-shadow:0 50px 100px -40px rgba(0,0,0,.8) }
html.no-js .lp-podium, html.lp-geen-gl .lp-podium{ display:block; position:absolute; left:44%; right:0; top:50%; transform:translateY(-50%) }
html.no-js .lp-reserve, html.lp-geen-gl .lp-reserve{ display:block }

.lp-label{ position:absolute; left:0; top:0; z-index:4; display:flex; align-items:center; gap:10px; padding:8px 16px 8px 8px; border-radius:999px; white-space:nowrap; pointer-events:none;
  background:rgba(8,26,52,.86); border:1px solid color-mix(in srgb, var(--lp-tint) 60%, #fff 20%); color:#fff; backdrop-filter:blur(14px) saturate(1.3); -webkit-backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:0 20px 50px -18px rgba(0,0,0,.8), 0 0 30px color-mix(in srgb, var(--lp-tint) 40%, transparent); opacity:0; scale:.9; transition:opacity .45s var(--ease-out), scale .6s var(--ease-out) }
.lp-label.lp-aan{ opacity:1; scale:1 }
html.lp-geen-gl .lp-label, html.no-js .lp-label{ display:none }
.lp-av{ flex:none; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:linear-gradient(135deg, #B9A2E6, #5FD3C9); color:var(--navy); font:800 13px var(--display) }
.lp-label b{ display:block; font:800 15px/1.15 var(--display); color:#fff }
.lp-label small{ display:block; font-size:12.5px; color:#D5E3EC; margin-top:1px }
.lp-noot{ margin-top:14px; text-align:right }
.lp-tip{ color:#B9C9D4 }
@media (hover:none){ .lp-tip{ display:none } }
html.lp-geen-gl .lp-tip, html.no-js .lp-tip{ display:none }
/* lage schermen (laptop 1280 × 720): alles boven de vouw, ook de knop */
@media (min-width:1000px) and (max-height:860px){
  .lp{ min-height:max(100svh, 640px); padding-bottom:58px }
  .on-dark .lp{ padding-top:calc(20px + var(--hh)) }
  .lp .live{ margin-bottom:12px }
  .lp-woord{ font-size:clamp(2.4rem, min(4.4vw, 8.4vh), 4.2rem) }
  .lp-vast{ font-size:clamp(1.4rem, min(2.4vw, 4.6vh), 2.4rem) }
  .lp .lp-lead{ margin-top:12px; font-size:.95rem; line-height:1.5 }
  .lp-hoofdstukken{ margin-top:16px }
  .lp-hoofdstukken button{ padding:6px 0 7px }
  .lp-hoofdstukken{ max-height:13.4rem }
  .lp .lp-knoppen{ margin-top:16px }
  .lp-noot{ margin-top:8px }
}
@media (max-width:999px){
  .lp{ min-height:0; justify-content:flex-start }
  .lp-tekst{ width:100% }
  .lp-podium, html.no-js .lp-podium, html.lp-geen-gl .lp-podium{ display:block; position:relative; left:auto; right:auto; top:auto; transform:none; height:calc((100vw - 48px) / 1.6 + 30px); margin-top:22px }
  html.no-js .lp-podium, html.lp-geen-gl .lp-podium{ height:auto }
}
@media (max-width:640px){
  .lp-label{ white-space:normal; max-width:calc(100% - 32px) }
}
@media (prefers-reduced-motion: reduce) and (min-width: 100000px){ /* uitgeschakeld 16-10-2026: altijd volledige animaties (keuze opdrachtgever) */
  /* de algemene regel van de site zet alle overgangen op 0,001 s; voor deze hero de echte duur terug */
  .lp .lp-glans{ animation-duration:9s !important; animation-iteration-count:infinite !important }
  .lp.lp, .lp .lp-label, .lp .lp-label-in, .lp .lp-naam, .lp .lp-zin, .lp .lp-hoofdstukken button{ transition-duration:.6s !important }
}
/* ===== einde Loep ===== */

/* ===== Keten (16-10-2026) ===== */
/* De keten: scrollen stuurt een lichtende draad langs zes echte schermen (vooruit en terug). Op een breed scherm staat de sectie vast
   tijdens het scrollen; op een smal scherm staan de stations onder elkaar. Zonder JavaScript: alles staat er, ingevuld. */
@property --kt-tint{ syntax:"<color>"; inherits:true; initial-value:#7A5BA6 }
.kt{ --kt-tint:#7A5BA6; position:relative; height:470vh; background:#061530; color:#fff; transition:--kt-tint 1s var(--ease-out) }
.kt::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(60% 40% at 75% 30%, color-mix(in srgb, var(--kt-tint) 28%, transparent), transparent 70%), radial-gradient(40% 30% at 10% 90%, rgba(14,159,154,.18), transparent 70%) }
.kt-plak{ position:sticky; top:0; height:100vh; display:flex; align-items:center; overflow:hidden }
.kt-wrap{ position:relative; width:100%; max-width:calc(var(--wrap) + 40px); margin:0 auto; padding:calc(var(--hh) + 16px) 24px 24px;
  display:grid; grid-template-columns:minmax(0,.3fr) minmax(0,.7fr); gap:clamp(28px,3.5vw,56px); align-items:center }
.kt-tekst{ position:relative; z-index:3 }
.kt-kicker{ display:flex; align-items:center; gap:10px; margin:0 0 14px; font:700 .78rem var(--display); letter-spacing:.14em; text-transform:uppercase; color:#5FD3C9 }
.kt-kicker::before{ content:""; width:28px; height:2px; background:currentColor }
.kt .kt-titel{ margin:0; font:800 clamp(1.6rem,2.5vw,2.4rem)/1.06 var(--display); letter-spacing:-.035em; color:#fff; max-width:none }
.kt-glans, .kies-glans{ display:inline-block; padding-bottom:.2em; margin-bottom:-.2em; background:linear-gradient(100deg, #fff 0%, #B9A2E6 40%, #5FD3C9 100%); -webkit-background-clip:text; background-clip:text; color:transparent }
.kt-lead{ margin:16px 0 0; font-size:1rem; line-height:1.6; color:#C9DCE6 }
.kt-tellers{ display:flex; gap:12px; margin-top:24px }
.kt-teller{ flex:1; padding:13px 15px 12px; border-radius:16px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.04) }
.kt-teller b{ display:block; font:800 2.6rem/1 var(--display); letter-spacing:-.04em; font-variant-numeric:tabular-nums; color:#fff }
.kt-teller span{ display:block; margin-top:6px; font-size:.82rem; color:#C9DCE6 }
.kt-teller--door b{ color:#fff }
.kt-teller--nul b{ color:#5FD3C9 }
.kt-teller--nul.kt-tik{ animation:ktTik .7s var(--ease-out) }
@keyframes ktTik{ 0%{ box-shadow:0 0 0 0 rgba(95,211,201,.55); border-color:rgba(95,211,201,.8) } 100%{ box-shadow:0 0 0 18px rgba(95,211,201,0); border-color:rgba(255,255,255,.14) } }
.kt-melding{ margin-top:16px; padding:12px 15px; border-radius:14px; border:1px solid rgba(242,165,65,.45); background:rgba(242,165,65,.08);
  opacity:0; transform:translateY(10px); transition:opacity .6s var(--ease-out), transform .6s var(--ease-out) }
.kt-melding p{ margin:0; font-size:.85rem; line-height:1.5; color:#F3E3CC }
.kt-melding strong{ color:#FFD08A }
.kt-melding.kt-aan{ opacity:1; transform:none }

.kt-podium{ position:relative }
.kt-stations{ position:relative; z-index:2; list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); grid-template-areas:"s1 s2 s3" "s6 s5 s4"; gap:56px 34px }
.kt-s1{ grid-area:s1 } .kt-s2{ grid-area:s2 } .kt-s3{ grid-area:s3 } .kt-s4{ grid-area:s4 } .kt-s5{ grid-area:s5 } .kt-s6{ grid-area:s6 }
.kt-station{ position:relative; padding:12px 12px 13px; border-radius:18px; background:rgba(14,37,68,.62); border:1px solid rgba(255,255,255,.1);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.8); transform:translateY(8px) scale(.97);
  transition:transform .7s var(--ease-out), border-color .6s, box-shadow .6s, background .6s }
.kt-station h3{ margin:0 0 9px 34px; font:700 .95rem/26px var(--display); color:#A9BCCA; transition:color .5s }
.kt-nr{ position:absolute; left:12px; top:12px; width:26px; height:26px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.1); font:800 .75rem var(--display); color:#C9DCE6; transition:background .5s, color .5s }
.kt-station.kt-klaar, .kt-station.kt-actief{ transform:none; background:rgba(14,37,68,.78); border-color:rgba(255,255,255,.14) }
.kt-station.kt-klaar h3, .kt-station.kt-actief h3{ color:#fff }
.kt-station.kt-actief{ z-index:4; transform:scale(1.12); border-color:color-mix(in srgb, var(--kt-tint) 75%, #fff 15%);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.8), 0 0 0 4px color-mix(in srgb, var(--kt-tint) 22%, transparent), 0 0 60px -10px var(--kt-tint) }
.kt-station.kt-klaar .kt-nr, .kt-station.kt-actief .kt-nr{ background:linear-gradient(135deg, #B9A2E6, #5FD3C9); color:var(--navy) }
.kt-station.kt-klaar .kt-nr{ font-size:0 } .kt-station.kt-klaar .kt-nr::after{ content:"✓"; font-size:.8rem }
.kt-station::after{ content:""; position:absolute; inset:-2px; border-radius:20px; pointer-events:none; opacity:0 }
.kt-station.kt-dok::after{ animation:ktDok .9s var(--ease-out) }
@keyframes ktDok{ 0%{ opacity:1; box-shadow:0 0 0 0 rgba(185,162,230,.85), inset 0 0 50px rgba(255,255,255,.55) } 100%{ opacity:0; box-shadow:0 0 0 34px rgba(185,162,230,0), inset 0 0 0 rgba(255,255,255,0) } }

/* uitsnede van het echte scherm (per station een eigen plek, in pixels van het origineel 1440 x 900; de telefoon 780 x 1688) */
.kt-uitsnede{ --bw:1440; --bh:900; position:relative; aspect-ratio:16 / 9; overflow:hidden; border-radius:10px; background:#0E2544; transition:background .6s }
.kt-klaar .kt-uitsnede, .kt-actief .kt-uitsnede{ background:#F4F7FA }
.kt-uitsnede--tel{ --bw:780; --bh:1688 }
.kt-uitsnede img{ position:absolute; left:0; top:0; width:calc(var(--bw) / var(--w) * 100%); height:auto; max-width:none; opacity:.4; filter:grayscale(.8);
  transform:translate(calc(var(--x) / var(--bw) * -100%), calc(var(--y) / var(--bh) * -100%)); transform-origin:calc(var(--fx) / var(--bw) * 100%) calc(var(--fy) / var(--bh) * 100%);
  transition:transform 2.4s var(--ease-out), opacity .6s, filter .6s }
.kt-klaar .kt-uitsnede img, .kt-actief .kt-uitsnede img{ opacity:1; filter:none }
.kt-actief .kt-uitsnede img{ transform:translate(calc(var(--x) / var(--bw) * -100%), calc(var(--y) / var(--bh) * -100%)) scale(1.55) }
.kt-s1 .kt-uitsnede{ --x:290; --y:120; --w:760; --fx:420; --fy:177 }
.kt-s2 .kt-uitsnede{ --x:440; --y:380; --w:700; --fx:700; --fy:562 }
.kt-s3 .kt-uitsnede{ --x:290; --y:360; --w:880; --fx:560; --fy:566 }
.kt-s4 .kt-uitsnede{ --x:420; --y:270; --w:720; --fx:560; --fy:411 }
.kt-s5 .kt-uitsnede{ --x:0; --y:1120; --w:780; --fx:330; --fy:1260 }
.kt-s6 .kt-uitsnede{ --x:280; --y:200; --w:980; --fx:560; --fy:363 }
.kt-veld{ margin:10px 2px 0; min-height:42px }
.kt-label{ display:block; font:700 .68rem var(--display); letter-spacing:.08em; text-transform:uppercase; color:#A9BCCA }
.kt-waarde{ display:block; margin-top:3px; font:700 .88rem/1.3 var(--display); color:#fff; min-height:1.3em }
.kt-s6 .kt-waarde{ font-size:1.5rem; letter-spacing:-.02em }
.kt-cursor{ display:inline-block; width:2px; height:1em; margin-left:2px; vertical-align:-2px; background:#5FD3C9; animation:ktKnip .8s steps(1) infinite }
@keyframes ktKnip{ 50%{ opacity:0 } }

.kt-draad{ position:absolute; inset:0; width:100%; height:100%; z-index:1; overflow:visible; pointer-events:none }
.kt-draad-spoor{ fill:none; stroke:rgba(255,255,255,.12); stroke-width:2; stroke-dasharray:4 8 }
.kt-draad-licht{ fill:none; stroke:url(#kt-verloop); stroke-width:3.5; stroke-linecap:round; filter:drop-shadow(0 0 8px rgba(185,162,230,.85)) }
.kt-draad-kop{ fill:#fff; filter:drop-shadow(0 0 10px #B9A2E6) drop-shadow(0 0 4px #fff) }
.kt-tokens{ position:absolute; inset:0; z-index:5; pointer-events:none }
.kt-token{ position:absolute; left:0; top:0; display:flex; align-items:center; gap:8px; padding:7px 13px 7px 7px; border-radius:999px; white-space:nowrap;
  background:linear-gradient(135deg, #6B4E96, #0A7F7B); border:1px solid rgba(255,255,255,.4); color:#fff; font:700 .8rem var(--display);
  box-shadow:0 0 0 5px rgba(185,162,230,.14), 0 14px 40px -10px rgba(122,91,166,.9), 0 0 36px rgba(185,162,230,.55); opacity:0 }
.kt-token i{ width:24px; height:24px; border-radius:50%; display:grid; place-items:center; background:#fff; color:var(--navy); font:800 .62rem var(--display); font-style:normal }
.kt-spoorpunt{ position:absolute; left:0; top:0; width:10px; height:10px; margin:-5px 0 0 -5px; border-radius:50%; background:#fff; box-shadow:0 0 12px 4px rgba(185,162,230,.9); opacity:0 }

html.no-js .kt{ height:auto } html.no-js .kt-plak{ position:static; height:auto; padding:40px 0 }
html.no-js .kt-station{ transform:none } html.no-js .kt-station h3{ color:#fff } html.no-js .kt-uitsnede img{ opacity:1; filter:none } html.no-js .kt-uitsnede{ background:#F4F7FA } html.no-js .kt-melding{ opacity:1; transform:none }
@media (max-width:999px){
  .kt{ height:auto } .kt-plak{ position:static; height:auto; display:block; padding:24px 0 48px }
  .kt-wrap{ grid-template-columns:minmax(0,1fr); padding-top:48px }
  .kt-stations{ grid-template-columns:minmax(0,1fr); grid-template-areas:"s1" "s2" "s3" "s4" "s5" "s6"; gap:22px; padding-left:34px }
  .kt-station.kt-actief{ transform:scale(1.03) }
  .kt-tokens{ display:none }
  .kt-melding{ opacity:1; transform:none }
}
@media print{ .kt{ height:auto } .kt-plak{ position:static; height:auto } .kt-draad, .kt-tokens{ display:none } }
/* ===== einde Keten ===== */

/* ===== Onderste helft (16-10-2026) ===== */
/* De loopband in twee rijen (voor welke financiers, volgens welke wetten), "Kies uw onderdelen" met de echte afhankelijkheden uit het
   portaal, "De naad" (losse systemen tegenover één systeem), "Het logboek dat niet liegt" en het slotblok met stappen. Gekozen door de
   opdrachtgever; opzet en video: ABYCO PROJECTEN/NEN 7510/07 … MOCKUPS/care-onderpagina-opzet. Zonder JavaScript staat alles er, ingevuld. */

/* loopband */
.band{ display:grid; gap:10px; margin-top:64px; padding-block:20px; border-block:1px solid var(--line) }
.band-rij{ display:grid; grid-template-columns:110px minmax(0,1fr); align-items:center; gap:16px; width:100%; max-width:var(--wrap); margin:0 auto; padding-inline:24px }
.band-label{ padding:7px 12px; border-radius:999px; background:var(--mint); color:var(--heading); font:800 .75rem var(--display); letter-spacing:.16em; text-transform:uppercase; text-align:center }
.band-rij--terug .band-label{ background:color-mix(in srgb, var(--pruim) 14%, var(--bg)); color:var(--pruim-t) }
.band-loop{ display:flex; overflow:hidden; mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent) }
.band-loop ul{ flex:none; display:flex; gap:44px; list-style:none; margin:0; padding:6px 44px 6px 0; animation:bandLoop 38s linear infinite }
.band-rij--terug .band-loop ul{ animation-direction:reverse; animation-duration:46s }
.band-loop:hover ul{ animation-play-state:paused }
.band-loop li{ display:flex; align-items:center; gap:44px; font:700 .95rem var(--display); letter-spacing:.06em; text-transform:uppercase; color:var(--grey); white-space:nowrap }
.band-loop li::after{ content:""; width:6px; height:6px; border-radius:50%; background:var(--teal) }
.band-rij--terug .band-loop li::after{ background:var(--pruim) }
@keyframes bandLoop{ to{ transform:translateX(-100%) } }

/* kies uw onderdelen: altijd donker, ook in het lichte thema */
.kies{ padding-block:110px 120px; background:radial-gradient(70% 60% at 85% 10%, rgba(122,91,166,.35), transparent 70%), radial-gradient(50% 50% at 0% 100%, rgba(14,159,154,.22), transparent 70%), var(--navy-deep) }
.kies h2{ max-width:22ch }
.kies-voorbeelden{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px }
.kies-voorbeelden button{ padding:10px 18px; border-radius:999px; border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.05); color:#DCE9EF; font:700 .88rem var(--display); cursor:pointer; transition:background .3s, border-color .3s, color .3s }
.kies-voorbeelden button:hover{ color:#fff; border-color:rgba(255,255,255,.5) }
.kies-voorbeelden button[aria-pressed="true"]{ background:linear-gradient(135deg, rgba(122,91,166,.5), rgba(14,159,154,.3)); border-color:var(--pruim-l); color:#fff }
.kies-voorbeelden .kies-wis{ background:none; border-style:dashed; color:#A9BCCA }
.kies-grid{ display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:34px; align-items:start }
.kies-veld{ position:relative }
.kies-lijnen{ position:absolute; inset:0; z-index:2; width:100%; height:100%; overflow:visible; pointer-events:none; transition:opacity .8s }
.kies-lijnen.weg{ opacity:0 }
.kies-lijnen path{ fill:none; stroke:url(#kies-verloop); stroke-width:2.2; stroke-linecap:round; filter:drop-shadow(0 0 6px rgba(185,162,230,.8)); stroke-dasharray:var(--l); stroke-dashoffset:var(--l); animation:kiesLijn .7s var(--ease-out) forwards }
@keyframes kiesLijn{ to{ stroke-dashoffset:0 } }
.kies .kies-groep{ position:relative; z-index:1; margin:0 0 12px; font:700 .75rem var(--display); letter-spacing:.14em; text-transform:uppercase; color:#8FA6B6 }
.kies .kies-groep ~ .kies-groep{ margin-top:26px }
.kies-tegels{ position:relative; z-index:1; list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px }
.kies-tegels li{ display:flex }
.tegel{ position:relative; flex:1; width:100%; min-height:92px; padding:13px 14px 12px; border-radius:14px; border:1px solid rgba(255,255,255,.12); background:rgba(14,37,68,.7); color:#A9BCCA; text-align:left; font:inherit; cursor:pointer;
  transition:background .4s, border-color .4s, color .4s, transform .5s cubic-bezier(.34,1.56,.64,1), box-shadow .4s }
.tegel b{ display:block; padding-right:22px; font:700 .9rem/1.25 var(--display); color:#DCE9EF; transition:color .4s }
.tegel small{ display:block; margin-top:5px; font-size:.75rem; line-height:1.4 }
.tegel::after{ content:""; position:absolute; right:10px; top:10px; width:18px; height:18px; border-radius:50%; border:1.5px solid rgba(255,255,255,.25); transition:background .3s, border-color .3s }
.tegel:hover{ border-color:rgba(255,255,255,.35); transform:translateY(-2px) }
.tegel[aria-pressed="true"]{ background:linear-gradient(140deg, rgba(122,91,166,.55), rgba(14,159,154,.35)); border-color:rgba(185,162,230,.8); color:#E6EEF3; box-shadow:0 0 0 1px rgba(185,162,230,.3), 0 18px 40px -18px rgba(122,91,166,.9) }
.tegel[aria-pressed="true"] b{ color:#fff }
.tegel[aria-pressed="true"]::after{ border-color:var(--teal-l); background:var(--teal-l) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12l5 5 9-10' fill='none' stroke='%230B2545' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat }
.tegel.meegenomen{ border-style:dashed }
.tegel.plof{ animation:kiesPlof .6s cubic-bezier(.34,1.56,.64,1) }
@keyframes kiesPlof{ 0%{ transform:scale(.94) } 60%{ transform:scale(1.04) } 100%{ transform:none } }
.kies-noot{ margin-top:20px }
.kies-app{ position:sticky; top:calc(var(--hh) + 16px); padding:18px; border-radius:var(--radius); background:#0E2544; border:1px solid rgba(255,255,255,.12); box-shadow:0 40px 80px -30px rgba(0,0,0,.8) }
.kies-app-kop{ display:flex; align-items:center; gap:10px; padding-bottom:12px; border-bottom:1px solid rgba(255,255,255,.1) }
.kies-app-kop img{ width:36px; height:30px }
.kies-app-kop b{ font:700 .95rem var(--display); color:#fff }
.kies-teller{ margin:12px 0 8px; font-size:.82rem; color:#A9BCCA }
.kies-teller b{ margin-right:4px; font:800 1.5rem var(--display); color:#fff; font-variant-numeric:tabular-nums }
.kies-menu{ list-style:none; margin:0; padding:0; display:grid; gap:4px; max-height:420px; overflow:auto; scrollbar-width:thin }
.kies-menu li{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:10px; background:rgba(255,255,255,.04); font:600 .84rem var(--display); color:#DCE9EF; animation:kiesMenu .5s var(--ease-out) both }
.kies-menu li::before{ content:""; flex:none; width:8px; height:8px; border-radius:50%; background:var(--teal-l); box-shadow:0 0 8px var(--teal-l) }
.kies-menu li.meegenomen::before{ background:var(--pruim-l); box-shadow:0 0 8px var(--pruim-l) }
.kies-menu li small{ margin-left:auto; font:600 .7rem var(--text); color:#C3B5E3; white-space:nowrap }
@keyframes kiesMenu{ from{ opacity:0; transform:translateX(16px) } to{ opacity:1; transform:none } }
.kies-leeg{ margin:6px 0 0; font-size:.84rem; color:#A9BCCA }
.kies-melding{ min-height:40px; margin:12px 0; font-size:.8rem; line-height:1.45; color:#CDBBF3 }
.kies-app .btn{ width:100%; gap:8px; padding:14px 16px; font-size:.9rem; text-align:center }

/* de naad */
.naad .section-head{ margin-bottom:28px }
.naad-schakel{ position:relative; display:inline-grid; grid-template-columns:1fr 1fr; padding:5px; border-radius:999px; background:var(--paper); border:1px solid var(--line) }
.naad-schakel button{ position:relative; z-index:1; padding:11px 22px; border:0; border-radius:999px; background:none; font:700 .95rem var(--display); color:var(--grey); cursor:pointer; transition:color .4s }
.naad-schakel button[aria-pressed="true"]{ color:#fff }
.naad-pil{ position:absolute; z-index:0; top:5px; bottom:5px; left:5px; width:calc(50% - 5px); border-radius:999px; background:#B3382C; transition:transform .6s var(--ease-out), background .6s }
.naad[data-modus="een"] .naad-pil{ transform:translateX(100%); background:var(--teal-d) }
.naad-podium{ position:relative; margin-top:34px; padding:34px 30px 28px; border-radius:24px; background:var(--paper); border:1px solid var(--line); overflow:hidden }
.naad-kop{ display:flex; justify-content:space-between; align-items:flex-end; gap:20px }
.naad-kop p{ margin:0 }
.naad-wie b{ display:block; font:800 1.12rem var(--display); color:var(--heading) }
.naad-wie small{ display:block; font-size:.82rem; color:var(--grey) }
.naad-teller{ text-align:right }
.naad-teller b{ display:block; font:800 2.9rem/1 var(--display); color:var(--bad-tekst); font-variant-numeric:tabular-nums; transition:color .5s }
.naad-teller span{ font-size:.82rem; color:var(--grey) }
.naad[data-modus="een"] .naad-teller b, html.no-js .naad-teller b{ color:var(--teal-t) }
.naad-stations{ position:relative; z-index:2; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:70px; margin-top:26px }
.naad-st{ padding:16px 18px 18px; border-radius:18px; background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-s) }
.naad-st h3{ margin:0; font-size:1.06rem }
.naad-sys{ margin:2px 0 12px; font:600 .75rem var(--display); color:var(--grey); transition:opacity .4s }
.naad[data-modus="een"] .naad-sys{ opacity:0 }
.naad-veld{ margin-top:8px; padding:9px 11px; border-radius:10px; background:var(--paper) }
.naad-veld small{ display:block; font:700 .66rem var(--display); letter-spacing:.08em; text-transform:uppercase; color:var(--grey) }
.naad-veld span{ display:block; min-height:1.5em; font:700 1rem var(--display); color:var(--heading) }
.naad-veld span.fout{ color:var(--bad-tekst); text-decoration:underline wavy color-mix(in srgb, var(--bad) 60%, transparent) }
.naad-veld span.goed{ color:var(--teal-t) }
.naad-cursor{ display:inline-block; width:2px; height:1em; margin-left:1px; vertical-align:-2px; background:currentColor; animation:ktKnip .7s steps(1) infinite }
.naad-naden{ position:absolute; z-index:3; inset:0; pointer-events:none }
.naad-n{ position:absolute; left:var(--x,-999px); top:var(--y,0); width:0; height:0 }
.naad-n i{ position:absolute; left:-24px; top:-24px; width:48px; height:48px; border-radius:50%; background:var(--surface); border:2px dashed var(--bad-tekst); opacity:0; transform:scale(.6); transition:opacity .4s, transform .5s cubic-bezier(.34,1.56,.64,1) }
.naad-n em{ position:absolute; left:-60px; top:30px; width:120px; font:700 .72rem var(--display); font-style:normal; color:var(--bad-tekst); text-align:center; opacity:0; transition:opacity .4s }
.naad-n.aan i, .naad-n.aan em{ opacity:1; transform:none }
.naad-n.aan i{ animation:naadPuls 1s ease-in-out infinite }
@keyframes naadPuls{ 50%{ box-shadow:0 0 0 10px color-mix(in srgb, var(--bad) 14%, transparent) } }
.naad[data-modus="een"] .naad-n{ display:none }
.naad-lijn{ position:absolute; z-index:1; left:var(--l,60px); top:var(--y,50%); width:var(--w,80%); height:4px; border-radius:4px; background:linear-gradient(90deg, var(--pruim-l), var(--teal-l)); box-shadow:0 0 16px rgba(95,211,201,.7); transform:scaleX(0); transform-origin:0 50%; transition:transform 1.4s var(--ease-out) }
.naad[data-modus="een"] .naad-lijn.aan{ transform:scaleX(1) }
.naad-uitkomst{ position:relative; z-index:2; margin:22px 0 0; min-height:28px; font:700 .95rem var(--display); text-align:center }
html.js .naad-uitkomst{ opacity:0; transform:translateY(8px); transition:opacity .5s, transform .5s var(--ease-out) }
html.js .naad-uitkomst.aan{ opacity:1; transform:none }
.naad-uitkomst.fout{ color:var(--bad-tekst) } .naad-uitkomst.goed{ color:var(--teal-t) }
.naad-noot{ margin:12px 0 0; font-size:.82rem; color:var(--grey) }
.naad-lijst{ list-style:none; margin:34px 0 0; padding:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px }
.naad-lijst li{ padding:16px; border-radius:16px; border:1px solid var(--line); background:var(--surface) }
.naad-lijst b{ display:block; min-height:3.8em; font:700 .88rem/1.35 var(--display); color:var(--heading) }
.naad-lijst li > span{ display:block; margin-top:8px; font:700 .82rem var(--display); transition:opacity .4s }
.naad-los{ color:var(--warn-t) } .naad-een{ color:var(--teal-t) }
.naad[data-modus="los"] .naad-een, .naad[data-modus="een"] .naad-los{ opacity:.35; text-decoration:line-through }

/* het logboek dat niet liegt */
.logboek{ padding-block:110px }
.log-knoppen{ margin-top:26px }
.log-kaart{ position:relative; overflow:hidden; border-radius:var(--radius); background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow) }
.log-kop{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px; padding:16px 20px; background:var(--navy); color:#fff }
.log-kop b{ display:block; font:700 1rem var(--display) }
.log-kop small{ font-size:.8rem; color:#A9BCCA }
.log-badges{ display:flex; gap:8px }
.log-badges span{ padding:4px 10px; border-radius:999px; background:rgba(255,255,255,.1); font:700 .72rem var(--display) }
.log-badges .log-status{ background:rgba(95,211,201,.18); color:var(--teal-l); transition:background .4s, color .4s }
.log-kaart.breuk .log-status{ background:rgba(210,73,60,.3); color:#FFC2BA }
.log-regels{ position:relative; min-height:330px; margin:0; padding:8px 20px 8px 64px; list-style:none }
.log-regel{ position:relative; display:grid; grid-template-columns:110px minmax(0,1fr) 100px; gap:10px; align-items:center; padding:12px 0; border-bottom:1px solid var(--line); font-size:.88rem; transition:opacity .5s var(--ease-out), transform .6s var(--ease-out), background .4s }
html.js .log-regel{ opacity:0; transform:translateY(-12px) }
html.js .log-regel.aan{ opacity:1; transform:none }
.log-regel:last-child{ border-bottom:0 }
.log-moment{ color:var(--grey) }
.log-wie b{ display:block; font-weight:600; color:var(--ink) }
.log-wie small{ color:var(--grey) }
.log-deel{ font-weight:600; color:var(--heading) }
.log-code{ position:absolute; left:-58px; top:50%; width:38px; height:38px; margin-top:-19px; border-radius:12px; display:grid; place-items:center; background:var(--mint); border:1.5px solid var(--teal); font:800 .64rem/1 ui-monospace,Consolas,monospace; color:var(--teal-t); transition:background .4s, border-color .4s, color .4s }
.log-schakel{ position:absolute; left:-40px; top:calc(50% + 19px); width:2px; height:calc(100% - 37px); background:var(--teal); box-shadow:0 0 8px rgba(14,159,154,.6); transform-origin:top; transition:transform .5s var(--ease-out), background .4s }
html.js .log-regel .log-schakel{ transform:scaleY(0) }
html.js .log-regel.aan .log-schakel{ transform:none }
.log-regel:last-child .log-schakel{ display:none }
.log-regel.nieuw{ background:linear-gradient(90deg, rgba(95,211,201,.18), transparent) }
.log-regel.gewijzigd{ background:linear-gradient(90deg, color-mix(in srgb, var(--bad) 14%, transparent), transparent) }
.log-regel.gewijzigd .log-code{ background:var(--bad-zacht); border-color:var(--bad); color:var(--bad-tekst); animation:logSchud .5s }
.log-regel.gewijzigd .log-deel{ color:var(--bad-tekst) }
.log-regel.gebroken .log-schakel{ background:repeating-linear-gradient(to bottom, var(--bad) 0 5px, transparent 5px 9px); box-shadow:none; animation:logBreek .6s var(--ease-out) }
@keyframes logSchud{ 20%,60%{ transform:translateX(-3px) } 40%,80%{ transform:translateX(3px) } }
@keyframes logBreek{ 0%{ transform:scaleY(1) } 30%{ transform:scaleY(.4) } 100%{ transform:scaleY(1) } }
.log-alarm{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; max-height:0; margin:0 20px; padding:0 14px; overflow:hidden; visibility:hidden; border-radius:12px; background:var(--bad-zacht); color:var(--bad-t); font-size:.84rem;
  transition:max-height .5s var(--ease-out), padding .5s, margin .5s, visibility 0s .5s }
.log-alarm p{ flex:1 1 260px; margin:0 }
.log-kaart.breuk .log-alarm{ max-height:160px; margin:4px 20px 8px; padding:12px 14px; visibility:visible; transition-delay:0s }
.log-alarm button{ padding:6px 12px; border-radius:999px; border:1px solid currentColor; background:none; color:inherit; font:700 .78rem var(--display); cursor:pointer }
.log-voet{ margin:0; padding:10px 20px 14px; font-size:.75rem; color:var(--grey) }

/* slotblok met stappen */
.cta-band--stappen{ align-items:end }
.cta-band--stappen .btn-row{ flex-direction:column; align-items:stretch }
.cta-stappen{ list-style:none; margin:24px 0 0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px }
.cta-stappen li{ display:flex; align-items:flex-start; gap:12px; padding:14px; border-radius:16px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); font-size:.9rem; color:#DCE9EF }
.cta-stappen b{ flex:none; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:linear-gradient(135deg, var(--pruim-l), var(--teal-l)); color:var(--navy); font:800 .8rem var(--display) }
.cta-stappen .gekozen{ color:#fff; font-weight:700 }

/* zonder JavaScript: geen knoppen die niets doen, wel alles ingevuld */
html.no-js .kies-voorbeelden, html.no-js .kies-app, html.no-js .naad-schakel, html.no-js .naad-lijn, html.no-js .naad-sys, html.no-js .log-knoppen{ display:none }
html.no-js .kies-grid{ grid-template-columns:minmax(0,1fr) }

@media (max-width:999px){
  .kies-grid{ grid-template-columns:minmax(0,1fr) }
  .kies-app{ position:static }
  .kies-tegels{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .kies-lijnen, .naad-naden, .naad-lijn{ display:none }
  .naad-stations{ grid-template-columns:minmax(0,1fr); gap:16px }
  .naad-lijst{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .cta-stappen{ grid-template-columns:minmax(0,1fr) }
}
@media (max-width:680px){
  .band-rij{ grid-template-columns:minmax(0,1fr); gap:6px; padding-inline:16px }
  .band-label{ justify-self:start }
  .kies, .logboek{ padding-block:72px }
  .naad-podium{ padding:22px 16px 20px }
  .naad-kop{ flex-direction:column; align-items:flex-start }
  .naad-teller{ text-align:left }
  .naad-lijst{ grid-template-columns:minmax(0,1fr) }
  .naad-lijst b{ min-height:0 }
  .log-regels{ padding-left:58px }
  .log-regel{ grid-template-columns:minmax(0,1fr); gap:2px }
  .tegel{ min-height:0; padding:11px 12px 10px }
  .tegel b{ font-size:.84rem }
}
@media (max-width:359px){
  .kies-tegels{ grid-template-columns:minmax(0,1fr) }
}
@media print{
  .kies-voorbeelden, .kies-lijnen, .kies-app, .naad-schakel, .naad-naden, .naad-lijn, .log-knoppen{ display:none !important }
  .kies{ background:#fff !important }
}
/* ===== einde Onderste helft ===== */

/* ============================================================================
   Fase 1-pagina's (16-10-2026): Voor wie-menu, thuiszorg, dagbesteding,
   personeel, kwaliteit, contact, vragen, toegankelijkheid.
   ========================================================================= */

/* Voor wie: een uitklapknop met tekst, zonder eigen overzichtspagina */
.main-nav .sub-btn--tekst{ padding:10px 8px 10px 12px; gap:6px; min-width:0 }
.main-nav .mega--klein{ width:min(92vw,640px); grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) }
.mega--klein .items{ grid-template-columns:1fr }
.main-nav .mega--klein a[aria-current="page"]{ background:var(--paper) }
@media (max-width:980px){
  html.js .main-nav .sub-btn--tekst{ width:auto; height:auto; flex:1; border:0; justify-content:space-between; padding:12px 8px }
  .main-nav .mega--klein{ width:100% }
}

/* Kaart als link */
a.card--link{ display:block; color:inherit; text-decoration:none }
a.card--link h3{ color:var(--heading) }
a.card--link:hover h3, a.card--link:focus-visible h3{ color:var(--teal-t) }
.btn-row--midden{ justify-content:center; margin-top:2.2rem }

/* Thuiszorg: één dag van twee kanten */
.dag{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:32px; align-items:start }
.dag-kant{ display:grid; gap:22px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:28px; box-shadow:var(--shadow-s) }
.dag-kant--onderweg{ background:linear-gradient(180deg,color-mix(in srgb,var(--pruim) 7%,var(--surface)),var(--surface) 45%) }
.dag-kop{ display:flex; gap:14px; align-items:center }
.dag-kop .ico{ margin:0 }
.dag-kant--onderweg .dag-kop .ico{ background:color-mix(in srgb,var(--pruim) 16%,var(--surface)); color:var(--pruim-t) }
.dag-kop h3{ margin:0 } .dag-kop p{ margin:0; color:var(--grey); font-size:.9rem }
.dag-lijn{ list-style:none; margin:0; padding:0 0 0 22px; display:grid; gap:18px; position:relative }
.dag-lijn::before{ content:""; position:absolute; left:5px; top:6px; bottom:6px; width:2px; border-radius:2px; background:linear-gradient(180deg,var(--teal),var(--teal-l) 70%,transparent) }
.dag-kant--onderweg .dag-lijn::before{ background:linear-gradient(180deg,var(--pruim),var(--pruim-l) 70%,transparent) }
.dag-lijn li{ position:relative; display:grid; gap:2px }
.dag-lijn li::before{ content:""; position:absolute; left:-22px; top:5px; width:12px; height:12px; border-radius:50%; background:var(--surface); border:3px solid var(--teal); box-sizing:border-box }
.dag-kant--onderweg .dag-lijn li::before{ border-color:var(--pruim) }
.dag-tijd{ font:700 .76rem/1 var(--display); letter-spacing:.04em; color:var(--teal-t) }
.dag-kant--onderweg .dag-tijd{ color:var(--pruim-t) }
.dag-lijn b{ font-family:var(--display); color:var(--heading) }
.dag-lijn p{ margin:0; color:var(--grey); font-size:.94rem }
.dag-telefoon{ max-width:300px; justify-self:center; width:100% }
.dag-bereik{ margin:0 }

/* Thuiszorg: financiers */
.financiers{ display:grid; gap:20px }
.financier-rij{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px }
.financier-rij li{ display:grid; gap:2px; text-align:center; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-s); padding:18px 8px }
.financier-rij b{ font:800 1.2rem/1.1 var(--display); color:var(--heading) }
.financier-rij span{ font-size:.8rem; color:var(--grey) }
.financiers .callout{ margin:0 }
.split-2--telefoon > div:last-child{ max-width:320px; justify-self:center; width:100% }

/* Dagbesteding: één afmelding, vier lijsten */
.afmelding{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,2fr); gap:28px; align-items:center; position:relative }
.afm-bron{ background:linear-gradient(160deg,var(--navy-2),var(--navy-deep)); color:#D7E6EC; border-radius:var(--radius); padding:26px; display:grid; gap:4px; box-shadow:var(--shadow); position:relative }
.afm-bron::after{ content:""; position:absolute; right:-28px; top:50%; width:28px; height:2px; background:var(--pruim-l) }
.afm-tijd{ font:700 .76rem var(--display); letter-spacing:.06em; color:var(--teal-l) }
.afm-bron b{ font:800 1.6rem/1.1 var(--display); color:#fff }
.afm-bron p{ margin:0 }
.afm-lijsten{ list-style:none; margin:0; padding:0 0 0 18px; display:grid; gap:12px; border-left:2px solid var(--pruim-l) }
.afm-lijsten li{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:16px; align-items:center; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-s); padding:14px 18px; position:relative }
.afm-lijsten li::before{ content:""; position:absolute; left:-20px; top:50%; width:18px; height:2px; background:var(--pruim-l) }
.afm-lijsten .ico{ margin:0; width:42px; height:42px; border-radius:12px } .afm-lijsten .ico .icoon{ width:21px; height:21px }
.afm-lijsten b{ font-family:var(--display); color:var(--heading) }
.afm-lijsten p{ margin:0; color:var(--grey); font-size:.92rem }
.afm-status{ font:700 .76rem var(--display); white-space:nowrap; color:var(--pruim-t); background:color-mix(in srgb,var(--pruim) 14%,var(--surface)); border-radius:999px; padding:5px 11px }

/* Personeel: Wet poortwachter */
.poort{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:14px; position:relative }
.poort::before{ content:""; position:absolute; left:0; right:0; top:15px; height:3px; border-radius:3px; background:linear-gradient(90deg,var(--teal),var(--teal-l) 55%,var(--pruim)) }
.poort li{ position:relative; padding-top:44px; display:grid; gap:4px; align-content:start }
.poort li::before{ content:""; position:absolute; left:0; top:6px; width:21px; height:21px; border-radius:50%; background:var(--surface); border:4px solid var(--teal); box-sizing:border-box }
.poort li:last-child::before{ border-color:var(--pruim) }
.poort-wanneer{ font:800 1.15rem/1 var(--display); color:var(--heading) }
.poort b{ font-weight:500; color:var(--grey); font-size:.94rem; line-height:1.4 }

/* Personeel: meldingen */
.signalen{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:22px; display:grid; gap:10px; box-shadow:var(--shadow) }
.signalen-kop{ margin:0 0 4px; font:700 .78rem var(--display); letter-spacing:.12em; text-transform:uppercase; color:var(--grey); display:flex; justify-content:space-between }
.signalen-kop span{ text-transform:none; letter-spacing:0; font-weight:600 }
.signaal{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:12px; align-items:center; border:1px solid var(--line); border-radius:var(--radius-s); padding:12px 14px; background:var(--paper) }
.signaal .ico{ margin:0; width:38px; height:38px; border-radius:11px } .signaal .ico .icoon{ width:19px; height:19px }
.signaal p{ margin:0; font-size:.92rem; color:var(--ink) }
.signaal-wanneer{ font:700 .74rem var(--display); color:var(--warn-t); white-space:nowrap }

/* Kwaliteit: termijnen en kaders */
.termijnen{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px }
.termijn{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:26px; display:grid; gap:8px; align-content:start; position:relative; overflow:hidden }
.termijn::after{ content:""; position:absolute; right:-50px; top:-50px; width:150px; height:150px; border-radius:50%; background:radial-gradient(circle,color-mix(in srgb,var(--pruim) 22%,transparent),transparent 70%) }
.termijn-getal{ margin:0; font:600 1rem var(--display); color:var(--grey) }
.termijn-getal b{ font:800 clamp(2.6rem,5vw,3.4rem)/1 var(--display); color:var(--heading); letter-spacing:-.03em }
.termijn p{ margin:0; color:var(--ink) }
.termijn-kader{ justify-self:start; font:700 .74rem var(--display); color:var(--teal-t); background:var(--mint); border-radius:999px; padding:4px 11px }
.kaders{ list-style:none; margin:10px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px }
.kaders li{ font:700 .86rem var(--display); color:var(--heading); border:1px solid var(--line); border-radius:999px; padding:6px 14px; background:var(--paper) }

/* Contact */
a.contact-keuze{ display:grid; align-content:start; color:inherit; text-decoration:none }
a.contact-keuze h3{ color:var(--heading) }
a.contact-keuze .link-arrow{ color:var(--link); margin-top:8px }
.contact-kaart{ display:grid; gap:16px }
.contact-kaart .alert{ margin:0 }
.contact-gegevens{ margin:0; display:grid; gap:12px }
.contact-gegevens div{ display:grid; grid-template-columns:96px minmax(0,1fr); gap:12px; padding-bottom:12px; border-bottom:1px solid var(--line) }
.contact-gegevens div:last-child{ border-bottom:0; padding-bottom:0 }
.contact-gegevens dt{ color:var(--grey); font-weight:600; font-size:.9rem }
.contact-gegevens dd{ margin:0; color:var(--heading); font-weight:600; overflow-wrap:anywhere }
.contact-kaart .note{ margin:0 }

/* Vragen: onderwerpen links, vragen rechts */
.vragen-grid{ display:grid; grid-template-columns:260px minmax(0,1fr); gap:56px; align-items:start }
.vragen-index{ position:sticky; top:calc(var(--hh) + 24px); display:grid; gap:14px }
.vragen-index ul{ list-style:none; margin:0; padding:0; display:grid; gap:2px }
.vragen-index a:not(.btn){ display:flex; justify-content:space-between; gap:10px; padding:9px 12px; border-radius:10px; color:var(--ink); text-decoration:none; font-weight:600; font-size:.95rem }
.vragen-index a:not(.btn):hover{ background:var(--paper); color:var(--teal-t) }
.vragen-index a span{ color:var(--grey); font-weight:500; font-variant-numeric:tabular-nums }
.vragen-index .btn{ justify-self:start }
.vragen-groepen{ display:grid; gap:44px }
.vragen-groep{ scroll-margin-top:calc(var(--hh) + 24px) }
.vragen-groep h2{ font-size:1.4rem; margin-bottom:16px }

@media (max-width:999px){
  .dag{ grid-template-columns:1fr }
  .afmelding{ grid-template-columns:1fr }
  .afm-bron::after{ right:auto; left:28px; top:auto; bottom:-28px; width:2px; height:28px }
  .poort{ grid-template-columns:repeat(3,minmax(0,1fr)); row-gap:28px }
  .poort::before{ display:none }
  .termijnen{ grid-template-columns:1fr }
  .vragen-grid{ grid-template-columns:1fr; gap:28px }
  .vragen-index{ position:static }
  .vragen-index ul{ grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media (max-width:680px){
  .dag-kant{ padding:20px }
  .financier-rij{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .afm-lijsten li{ grid-template-columns:auto minmax(0,1fr) }
  .afm-status{ grid-column:2; justify-self:start }
  .poort{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .signaal{ grid-template-columns:auto minmax(0,1fr) }
  .signaal-wanneer{ grid-column:2 }
  .vragen-index ul{ grid-template-columns:1fr }
  .contact-gegevens div{ grid-template-columns:1fr; gap:2px }
}

/* Fase 1: kleine bewegingen als een regel in beeld komt (zonder JS staat alles er al) */
html.js .dag-lijn li::before, html.js .poort li::before{ transition:background .5s var(--ease-out), box-shadow .5s var(--ease-out); transition-delay:calc(var(--i,0)*80ms + .45s) }
html.js .dag-lijn li.is-in::before{ background:var(--teal); box-shadow:0 0 0 5px color-mix(in srgb,var(--teal) 18%,transparent) }
html.js .dag-kant--onderweg .dag-lijn li.is-in::before{ background:var(--pruim); box-shadow:0 0 0 5px color-mix(in srgb,var(--pruim) 20%,transparent) }
html.js .poort li.is-in::before{ background:var(--teal); box-shadow:0 0 0 6px color-mix(in srgb,var(--teal) 18%,transparent) }
html.js .poort li.is-in:last-child::before{ background:var(--pruim) }
html.js .afm-status{ opacity:0; transform:scale(.6); transition:opacity .4s var(--ease-out), transform .6s cubic-bezier(.34,1.56,.64,1); transition-delay:calc(var(--i,0)*80ms + .7s) }
html.js .afm-lijsten li.is-in .afm-status{ opacity:1; transform:none }
html.js .signaal-wanneer{ opacity:0; transition:opacity .5s var(--ease-out); transition-delay:calc(var(--i,0)*80ms + .6s) }
html.js .signaal.is-in .signaal-wanneer{ opacity:1 }

/* ============================================================================
   Zelf proberen (19-10-2026): /probeer, met een voorbeeld dat meekleurt.
   site.js zet --proef-kleur en --proef-op (wit of navy, wat leesbaar is).
   ========================================================================= */
.proef-kleur{ display:flex; align-items:center; gap:12px }
.proef-kleur input[type="color"]{ width:56px; height:44px; padding:3px; border:1px solid var(--line); border-radius:12px; background:var(--surface); cursor:pointer }
.proef-kleur-code{ font:700 .95rem var(--display); color:var(--heading); font-variant-numeric:tabular-nums; letter-spacing:.02em }
.form input[type="file"]{ padding:10px; border:1px dashed var(--line); border-radius:12px; background:var(--paper); width:100%; color:var(--ink) }

.proef-voorbeeld{ --proef-kleur:#7A5BA6; --proef-op:#FFFFFF; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow-s); display:grid; gap:12px }
.proef-voorbeeld-label{ margin:0; font:700 .72rem var(--display); letter-spacing:.12em; text-transform:uppercase; color:var(--grey) }
.proef-app{ display:grid; grid-template-columns:76px 1fr; height:180px; border-radius:14px; overflow:hidden; border:1px solid var(--line); background:var(--paper) }
.proef-zijbalk{ background:var(--proef-kleur); display:grid; align-content:start; gap:9px; padding:10px 9px; transition:background .5s var(--ease-out) }
.proef-zijbalk i{ display:block; height:8px; border-radius:4px; background:var(--proef-op); opacity:.35 }
.proef-zijbalk i:first-of-type{ opacity:.8 }
.proef-logo{ display:grid; place-items:center; height:34px; border-radius:9px; background:#FFFFFF; overflow:hidden; margin-bottom:4px }
.proef-logo img{ max-width:100%; max-height:30px; object-fit:contain }
.proef-logo b{ font:800 .9rem var(--display); color:#0B2545 }
.proef-scherm{ padding:14px 16px; display:grid; align-content:start; gap:6px; min-width:0 }
.proef-org{ font:700 .68rem var(--display); letter-spacing:.1em; text-transform:uppercase; color:var(--proef-kleur); filter:brightness(.8); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.proef-groet{ font:800 1.15rem var(--display); color:var(--heading) }
.proef-tegels{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:8px }
.proef-tegels i{ display:block; height:56px; border-radius:10px; background:var(--surface); border:1px solid var(--line); border-top:3px solid var(--proef-kleur); transition:border-color .5s var(--ease-out) }
html.no-js .proef-voorbeeld{ display:none }

.btn.is-bezig{ opacity:.8; cursor:progress }
.btn.is-bezig::after{ content:""; width:14px; height:14px; border-radius:50%; border:2px solid currentColor; border-right-color:transparent; animation:proef-draai .8s linear infinite }
@keyframes proef-draai{ to{ transform:rotate(360deg) } }