/* Ellectium: gedeelde stijl voor alle pagina's (tokens, basis, componenten).
   Paginaspecifieke stijl staat in pages/<pagina>.css. Huisstijl: zie CLAUDE.md. */
/* fonts: zelf gehost (Google Fonts, SIL Open Font License), latin-subset, variabele fonts.
   Zelfde gewichten als vroeger bij Google, zodat de weergave identiek blijft. Wijzigt een fontbestand: geef het een nieuwe naam (cache is een jaar). */
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/inter-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/inter-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Jost";font-style:normal;font-weight:200;font-display:swap;src:url(/assets/fonts/jost-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Jost";font-style:normal;font-weight:300;font-display:swap;src:url(/assets/fonts/jost-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Jost";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/jost-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Jost";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/jost-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* fallback met aangepaste maten, zodat er bijna geen verschuiving is als het echte font binnenkomt */
@font-face{font-family:"Jost Fallback";src:local("Arial");size-adjust:95.36%;ascent-override:112.21%;descent-override:39.32%;line-gap-override:0%}
@font-face{font-family:"Inter Fallback";src:local("Arial");size-adjust:105.92%;ascent-override:91.46%;descent-override:22.77%;line-gap-override:0%}
/* tokens (huisstijl, zie CLAUDE.md) */
:root{--night:#000000;
  --carbon:#0E0F11;--line-dark:rgba(255,255,255,.14);--white:#FFFFFF;--muted:#A1A8B0;--light:#F4D9A8;
  --paper:#F2F1EE;--ink:#0B0D10;--stone:#5E6670;--line-light:rgba(11,13,16,.14);
  --font-head:"Jost","Jost Fallback",system-ui,sans-serif;--font-body:"Inter","Inter Fallback",system-ui,sans-serif;
  --display:clamp(44px,7vw,104px);--h2:clamp(32px,4.4vw,64px);--h3:clamp(20px,1.8vw,26px);
  --label:12px;--btn:14px;
  --radius:2px;--stroke:1.5px;--hair:1px;
  --container:1280px;
  --gutter:clamp(20px,4vw,40px);--section:clamp(96px,12vw,160px);
  --hh:64px;--body:16px;--small:14px;
  --fast:200ms;--base:300ms;--slow:700ms;--draw:900ms;
  --ease:cubic-bezier(.2,.7,.2,1);
  --rise:8px;--stagger:60ms;
  --gold-ink:#7A5C24}
@media (min-width:1024px){:root{--hh:80px;--body:17px;--small:13px;--rise:12px;--stagger:90ms}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--hh) + 16px)}
html.lock{overflow:hidden}
body{margin:0;background:var(--night);color:var(--white);font:400 var(--body)/1.6 var(--font-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
@media (max-width:1023.98px){
body{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
}
img,svg{display:block;max-width:100%}
picture{display:contents}
ul,ol{list-style:none}
a{color:inherit}
.dark{background:var(--night);color:var(--white)}
.light{background:var(--paper);color:var(--ink)}
.dark a{color:var(--white)}
.light a{color:var(--ink)}
@media (hover:hover){
.dark a:hover{color:var(--white)}
.light a:hover{color:var(--ink)}
}
.dark .mute{color:var(--muted)}
.light .mute{color:var(--stone)}
.wrap{max-width:calc(var(--container) + 2*var(--gutter));margin:0 auto;padding:0 var(--gutter)}
.sec{padding:var(--section) 0}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip:focus{transform:none}
.label{display:block;font:400 var(--label)/1.5 var(--font-head);letter-spacing:.32em;text-transform:uppercase;margin-bottom:28px}
.dark .label{color:var(--muted)}
.light .label{color:var(--stone)}
.h2{font:300 var(--h2)/1.08 var(--font-head);letter-spacing:0;text-wrap:balance}
.intro{max-width:60ch;margin-top:28px;font-size:calc(var(--body) + 1px);text-wrap:pretty}
.dark .intro{color:var(--muted)}
.light .intro{color:var(--stone)}
p{text-wrap:pretty}
.ph{border-bottom:1px dashed currentColor;padding:0 3px}
.dark .ph{background:rgba(244,217,168,.11)}
.light .ph{background:rgba(11,13,16,.05)}
.ph-block{border:1px dashed currentColor;border-radius:var(--radius);padding:16px 18px;font-size:var(--small);line-height:1.5}
.dark .ph-block{color:var(--muted);background:rgba(244,217,168,.07)}
.light .ph-block{color:var(--stone);background:rgba(11,13,16,.03)}
.ph-img{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;border:1px dashed currentColor;border-radius:var(--radius);padding:20px;font-size:var(--small);line-height:1.5;overflow:hidden}
.dark .ph-img{color:var(--muted);background:var(--carbon)}
.light .ph-img{color:var(--stone);background:#E9E7E2}
.ph-logo{display:flex;align-items:center;justify-content:center;width:140px;height:30px;border:1px dashed rgba(255,255,255,.45);border-radius:var(--radius);background:rgba(244,217,168,.08);color:var(--muted);font:400 11px/1 var(--font-head);letter-spacing:.32em;text-decoration:none}
@media (min-width:1024px){
.ph-logo{width:170px;height:34px}
}
.logo img{width:140px;height:auto;mix-blend-mode:screen}
.hd .logo{transition:opacity var(--fast) var(--ease)}
html.lock .hd .logo{opacity:1!important}
@media (min-width:1024px){
.logo img{width:170px}
}
.btn{display:inline-flex;align-items:center;gap:12px;min-height:52px;padding:0 26px;font:500 var(--btn)/1 var(--font-body);letter-spacing:.02em;text-decoration:none;border:var(--hair) solid transparent;border-radius:var(--radius);cursor:pointer;-webkit-tap-highlight-color:transparent}
.dark .btn--primary{background:var(--white);color:var(--night);--bar:var(--night)}
.dark .btn--secondary{background:transparent;color:var(--white);border-color:rgba(255,255,255,.5);--bar:var(--light)}
.light .btn--primary{background:var(--ink);color:var(--paper);--bar:var(--light)}
.light .btn--secondary{background:transparent;color:var(--ink);border-color:var(--ink);--bar:var(--ink)}
.dark a.btn--primary{color:var(--night)}
.light a.btn--primary{color:var(--paper)}
@media (hover:hover){
.dark a.btn--primary:hover{color:var(--night)}
.light a.btn--primary:hover{color:var(--paper)}
}
.bars{display:inline-grid;gap:3px;width:14px;flex:none}
.link .bars{width:10px}
.bars i{display:block;height:1.5px;background:var(--bar,currentColor);transform:scaleX(.4);transform-origin:left center;opacity:.45;transition:transform var(--fast) var(--ease),opacity var(--fast) var(--ease)}
.bars i:nth-child(2){transition-delay:60ms}
.bars i:nth-child(3){transition-delay:120ms}
@media (hover:hover){
.btn:hover .bars i,.link:hover .bars i{transform:scaleX(1);opacity:1}
}
.btn:focus-visible .bars i,.link:focus-visible .bars i,.btn.is-lit .bars i,.link.is-lit .bars i{transform:scaleX(1);opacity:1}
.link{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:500;color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.dark .link{--bar:var(--light)}
.light .link{--bar:var(--ink)}
.dark :focus-visible{outline:2px solid var(--light);outline-offset:3px}
.light :focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.actions{display:flex;flex-direction:column;gap:12px}
.actions .btn{justify-content:center}
@media (min-width:600px){
.actions{flex-direction:row;flex-wrap:wrap}
}
.hd{position:fixed;top:0;left:0;right:0;z-index:50;background:transparent;border-bottom:1px solid transparent;}
.hd.is-solid,html.lock .hd{background:var(--night);border-bottom-color:var(--line-dark)}
.hd-prog{position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none;transform-origin:0 50%;transform:scaleX(var(--p,0));background:linear-gradient(90deg,rgba(244,217,168,0) 0%,rgba(244,217,168,.55) 35%,var(--light) 100%);box-shadow:0 0 10px rgba(244,217,168,.35)}
.hd-in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:var(--hh)}
.nav{display:none}
.nav ul{display:flex;gap:20px}
.nav a{display:inline-flex;align-items:center;min-height:44px;font:400 16px/1 var(--font-body);text-decoration:none;color:var(--white);background:linear-gradient(var(--light),var(--light)) 0 calc(50% + 14px)/0 1px no-repeat}
.nav a[aria-current="page"]{background-size:100% 1px}
/* submenu (pages.php: groep). Zonder JS opent het bij hover en focus, met JS ook met een klik op de knop. */
.nav-dd{position:relative}
.nav-dt{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0;border:0;color:var(--white);font:400 14px/1 var(--font-body);cursor:pointer;background:linear-gradient(var(--light),var(--light)) 0 calc(50% + 14px)/0 1px no-repeat}
.nav-dt{font-size:16px}
.nav-dt.is-cur{background-size:calc(100% - 14px) 1px}
.nav-ch{width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform var(--fast) var(--ease)}
.nav-dt[aria-expanded="true"] .nav-ch{transform:translateY(1px) rotate(-135deg)}
.nav .nav-sub{position:absolute;top:calc(100% + 10px);left:-24px;display:flex;flex-direction:column;gap:0;min-width:280px;padding:10px;background:var(--carbon);border:1px solid var(--line-dark);border-radius:var(--radius);box-shadow:0 30px 60px -24px rgba(0,0,0,.85);visibility:hidden;opacity:0;transform:translateY(-6px);transition:opacity var(--fast) var(--ease),transform var(--fast) var(--ease),visibility 0s var(--fast)}
.nav .nav-sub::before{content:"";position:absolute;left:0;right:0;top:-11px;height:11px}
.nav .nav-sub::after{content:"";position:absolute;left:24px;right:24px;top:-1px;height:1px;background:linear-gradient(90deg,rgba(244,217,168,0),var(--light) 50%,rgba(244,217,168,0));box-shadow:0 0 12px rgba(244,217,168,.5);opacity:.8}
.nav .nav-sub li{opacity:0;transform:translateY(-4px);transition:opacity var(--fast) var(--ease),transform var(--fast) var(--ease)}
.nav .nav-sub li + li{border-top:1px solid rgba(255,255,255,.07)}
.nav .nav-sub a{position:relative;display:flex;align-items:center;gap:14px;width:100%;min-height:52px;padding:0 14px;white-space:nowrap;font-size:15px;color:var(--muted);background:none;border-radius:var(--radius);transition:color var(--fast) var(--ease),background-color var(--fast) var(--ease)}
.nav .nav-sub a::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;border:1px solid rgba(255,255,255,.35);transition:background-color var(--fast) var(--ease),border-color var(--fast) var(--ease),box-shadow var(--fast) var(--ease)}
.nav .nav-sub a::after{content:"";margin-left:auto;width:6px;height:6px;border-right:1.5px solid var(--light);border-top:1.5px solid var(--light);transform:translateX(-6px) rotate(45deg);opacity:0;transition:opacity var(--fast) var(--ease),transform var(--fast) var(--ease)}
.nav .nav-sub a:hover,.nav .nav-sub a:focus-visible,.nav .nav-sub a[aria-current="page"]{color:var(--white)}
.nav .nav-sub a:hover,.nav .nav-sub a:focus-visible{background-color:rgba(244,217,168,.06)}
.nav .nav-sub a:hover::before,.nav .nav-sub a:focus-visible::before,.nav .nav-sub a[aria-current="page"]::before{background:var(--light);border-color:var(--light);box-shadow:0 0 10px 2px rgba(244,217,168,.55)}
.nav .nav-sub a:hover::after,.nav .nav-sub a:focus-visible::after{opacity:1;transform:translateX(0) rotate(45deg)}
.nav .nav-sub a:focus-visible{outline-offset:-2px}
@media (hover:hover){.nav-dd:hover .nav-sub{visibility:visible;opacity:1;transform:none;transition:opacity var(--fast) var(--ease),transform var(--fast) var(--ease)}}
html:not(.js) .nav-dd:focus-within .nav-sub,.nav-dt[aria-expanded="true"] + .nav-sub{visibility:visible;opacity:1;transform:none;transition:opacity var(--fast) var(--ease),transform var(--fast) var(--ease)}
.nav-dd.is-closed .nav-sub{visibility:hidden;opacity:0}
@media (hover:hover){.nav-dd:hover .nav-sub li{opacity:1;transform:none}}
html:not(.js) .nav-dd:focus-within .nav-sub li,.nav-dt[aria-expanded="true"] + .nav-sub li{opacity:1;transform:none}
.nav .nav-sub li:nth-child(2){transition-delay:40ms}.nav .nav-sub li:nth-child(3){transition-delay:80ms}.nav .nav-sub li:nth-child(4){transition-delay:120ms}
/* hangend lampje boven een menu-item bij hover: zakt uit de bovenrand, schommelt even uit en verlicht het woord */
.nav > ul > li > a,.nav-dt{position:relative;transition:color var(--fast) var(--ease),text-shadow var(--base) var(--ease)}
.nav > ul > li > a::before,.nav-dt::before{content:"";position:absolute;left:50%;top:calc((44px - var(--hh))/2);width:18px;height:calc((var(--hh) - 44px)/2 + 3px);margin-left:-9px;pointer-events:none;background:linear-gradient(rgba(161,168,176,.55),rgba(161,168,176,.55)) 50% 0/1px calc(100% - 9px) no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'%3E%3Cpath d='M2 8.5C2 3.5 5 1 9 1s7 2.5 7 7.5z' fill='%230E0F11' stroke='%23F4D9A8' stroke-width='1'/%3E%3Cellipse cx='9' cy='8.6' rx='3.2' ry='1.4' fill='%23FFF6E2'/%3E%3C/svg%3E") 50% 100%/18px 10px no-repeat;filter:drop-shadow(0 3px 5px rgba(244,217,168,.55));transform-origin:50% 0;opacity:0;transform:translateY(-12px);transition:opacity var(--fast) var(--ease),transform var(--base) var(--ease)}
.nav-dt::before{left:calc(50% - 7px)}
.nav > ul > li > a::after,.nav-dt::after{content:"";position:absolute;z-index:-1;left:50%;top:1px;width:96px;height:53px;margin-left:-48px;pointer-events:none;clip-path:polygon(43% 0,57% 0,100% 100%,0 100%);background:linear-gradient(rgba(244,217,168,.34),rgba(244,217,168,.1) 55%,rgba(244,217,168,0));opacity:0;transition:opacity var(--base) var(--ease)}
.nav-dt::after{left:calc(50% - 7px)}
@media (hover:hover){
.nav > ul > li > a:hover,.nav-dt:hover{color:#FFF6E2;text-shadow:0 0 14px rgba(244,217,168,.55)}
.nav > ul > li > a:hover::before,.nav-dt:hover::before{opacity:1;transform:none;animation:nav-lamp 900ms var(--ease)}
.nav > ul > li > a:hover::after,.nav-dt:hover::after{opacity:1;transition-delay:120ms}
}
.nav > ul > li > a:focus-visible::before,.nav-dt:focus-visible::before{opacity:1;transform:none}
.nav > ul > li > a:focus-visible::after,.nav-dt:focus-visible::after{opacity:1}
@keyframes nav-lamp{0%{transform:translateY(-12px) rotate(9deg)}35%{transform:translateY(0) rotate(-6deg)}60%{transform:rotate(3deg)}80%{transform:rotate(-1.5deg)}100%{transform:none}}
@media (prefers-reduced-motion:reduce){.nav > ul > li > a::before,.nav-dt::before{animation:none!important;transform:none;transition:opacity var(--fast) linear}}
@media (prefers-reduced-motion:reduce){.nav-ch,.nav .nav-sub,.nav .nav-sub li,.nav .nav-sub a,.nav .nav-sub a::before,.nav .nav-sub a::after{transition:none!important}}
.hd-act{display:none;align-items:center;gap:12px}
.hd-act .link{font-size:14px;text-decoration:none}
.hd-act .btn{min-height:44px;padding:0 20px}
.menu-btn{display:inline-flex;align-items:center;gap:12px;min-height:44px;min-width:44px;padding:0 4px;background:none;border:0;color:var(--white);font:500 14px/1 var(--font-body);letter-spacing:.02em;cursor:pointer}
.mi{display:grid;gap:5px;width:20px}
.mi i{display:block;height:1.5px;background:currentColor;transition:transform var(--fast) var(--ease)}
.menu-btn[aria-expanded="true"] .mi i:nth-child(2){transform:scaleX(.5);transform-origin:left}
@media (min-width:1024px){
.hd-act{display:flex;margin-left:auto}
.hd-act .btn--secondary{display:none}
}
@media (min-width:1280px){
.nav{display:block}
.hd-act{display:flex;margin-left:0}
.hd-act .btn--secondary{display:inline-flex}
.menu-btn{display:none}
}
.mnav{position:fixed;inset:0;z-index:40;background:var(--night);padding:calc(var(--hh) + 40px) var(--gutter) 40px;overflow-y:auto;visibility:hidden;opacity:0;transition:opacity 300ms var(--ease),visibility 0s 300ms}
.mnav.is-open{visibility:visible;opacity:1;transition:opacity 300ms var(--ease)}
.mnav ul{display:flex;flex-direction:column;gap:6px}
.mnav a{display:flex;align-items:center;min-height:56px;font:300 32px/1.15 var(--font-head);text-decoration:none;opacity:0;transform:translateY(var(--rise));transition:opacity 400ms var(--ease),transform 400ms var(--ease)}
.mnav.is-open a{opacity:1;transform:none;transition-delay:calc(var(--i)*40ms + 80ms)}
.mnav a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--light);text-decoration-thickness:1px;text-underline-offset:8px}
.mnav-l{display:block;margin:14px 0 4px;font:400 var(--label)/1 var(--font-head);letter-spacing:.2em;text-transform:uppercase;color:var(--light);opacity:0;transition:opacity 400ms var(--ease)}
.mnav.is-open .mnav-l{opacity:1;transition-delay:calc(var(--i)*40ms + 80ms)}
.mnav-g ul{padding-bottom:14px;border-bottom:1px solid var(--line-dark)}
@media (max-width:1023.98px){
.mnav{padding-bottom:calc(64px + 40px + env(safe-area-inset-bottom))}
}
@media (min-width:1280px){
.mnav{display:none}
}
.hl{position:relative;pointer-events:none}
.hl .ln{position:absolute;left:0;right:0;height:1.5px;background:var(--light)}
.hl .gl{position:absolute;left:0;right:0;height:130px;background:radial-gradient(ellipse 62% 100% at 58% 0%,rgba(244,217,168,.23),rgba(244,217,168,.09) 45%,rgba(244,217,168,0) 75%)}
.js .hl .ln{opacity:0}
.js .hl .gl{opacity:0;transition:opacity var(--slow) var(--ease)}
@keyframes tl{0%{opacity:0}30%{opacity:.6}55%{opacity:.3}100%{opacity:1}}
.hero-bg{position:absolute;inset:0;overflow:hidden}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:60% 40%;max-width:none}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.58) 35%,rgba(0,0,0,.62) 65%,#000 100%)}
.hero-main{position:relative;display:flex;flex-direction:column;align-items:center}
.hero-text{width:100%}
.h1-label{display:block;font:400 var(--label)/1.5 var(--font-head);letter-spacing:.32em;text-transform:uppercase;color:var(--muted);margin-bottom:28px}
.hero-sub{margin:28px auto 0;max-width:46ch;font-size:18px;line-height:1.55;color:var(--muted)}
.facts{margin:clamp(56px,8vw,96px) auto 0;display:grid;grid-template-columns:1fr 1fr;max-width:420px;font-size:var(--small);line-height:1.4;color:var(--muted)}
.facts li{padding:12px 14px}
.facts li:nth-child(even){border-left:1px solid var(--line-dark)}
.facts li:nth-child(n+3){border-top:1px solid var(--line-dark)}
@media (min-width:1024px){
.facts{display:flex;justify-content:center;max-width:none}
.facts li,.facts li:nth-child(n){padding:4px 28px;border-top:0;border-left:1px solid var(--line-dark)}
.facts li:first-child{border-left:0}
}
.band{aspect-ratio:4/3;border-left:0;border-right:0;border-radius:0;justify-content:center;align-items:center;text-align:center;padding:40px var(--gutter)}
.band svg{top:auto;bottom:24%;max-width:none}
@media (min-width:1024px){
.band{aspect-ratio:21/9;max-height:86svh}
}
.sw-row{display:none}
.js .sw-row{display:grid}
.funcs{margin-top:56px;border-top:1px solid var(--line-dark)}
.funcs li{padding:24px 0;border-bottom:1px solid var(--line-dark)}
.funcs h3{font:400 18px/1.3 var(--font-head);margin-bottom:8px}
.funcs p{font-size:15px;line-height:1.55;color:var(--muted)}
@media (min-width:1024px){
.funcs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-bottom:1px solid var(--line-dark);margin-top:72px}
.funcs li{border-bottom:0;padding:32px 24px;border-left:1px solid var(--line-dark)}
.funcs li:first-child{border-left:0;padding-left:0}
}
.sys .h2s{font:300 clamp(28px,3vw,44px)/1.12 var(--font-head);text-wrap:balance;max-width:20ch}
.panels{display:grid;gap:56px;margin-top:64px}
.panel{position:relative;padding-top:40px}
.panel .pl-line{position:absolute;top:0;left:0;width:100%;height:2px;overflow:visible}
.sys .link{margin-top:48px}
@media (min-width:768px){
.panels{grid-template-columns:1fr 1fr;gap:0}
.panel:first-child{padding-right:48px}
.panel:nth-child(2){padding-left:48px;border-left:1px solid var(--line-light)}
}
.zb-grid{display:grid;gap:56px}
.sw-l:first-child{text-align:right}
.sw-l:first-child::after{transform-origin:right}
.sw-l:last-child::after{transform-origin:left}
.sw-l.on::after{transform:scaleX(1)}
.sw.zap::before{animation:sw-glow 900ms var(--ease)}
.sw svg{position:relative;width:132px;height:auto;overflow:visible}
.sw .pl,.sw .fr,.sw .dv,.sw .rk rect{fill:none;stroke:var(--ink);stroke-width:1.5;vector-effect:non-scaling-stroke;transition:stroke 400ms var(--ease)}
.sw .rk path{fill:none;stroke:var(--light);stroke-width:1.5;vector-effect:non-scaling-stroke}
.sw .rk rect{fill:rgba(244,217,168,0);transition:fill 500ms var(--ease)}
.sw .rk{transition:transform 620ms cubic-bezier(.34,1.56,.5,1)}
.sw .rk-in{transform-box:fill-box;transform-origin:center}
.sw.zap .rk-in{animation:sw-press 620ms var(--ease)}
.sw[aria-checked="true"] .rk{transform:translateX(40px)}
.sw .zp{fill:none;stroke:var(--light);stroke-width:2;vector-effect:non-scaling-stroke;stroke-dasharray:.22 .78;stroke-dashoffset:0;opacity:0}
.sw.zap .zp{animation:sw-run 900ms cubic-bezier(.45,0,.2,1)}
.sw .led{fill:transparent;stroke:var(--stone);stroke-width:1;vector-effect:non-scaling-stroke;transition:fill 300ms var(--ease) 350ms,stroke 300ms var(--ease) 350ms}
.sw[aria-checked="false"] .l1,.sw[aria-checked="true"] .l2{fill:var(--light);stroke:var(--light)}
.sw .halo{fill:var(--light);opacity:0;transition:opacity 300ms var(--ease) 350ms}
.sw[aria-checked="false"] .h1,.sw[aria-checked="true"] .h2{opacity:.35}
@media (hover:hover){
.sw:hover .rk-in rect{fill:rgba(244,217,168,.06)}
}
@keyframes sw-run{0%{opacity:0;stroke-dashoffset:0}12%{opacity:1}85%{opacity:1}100%{opacity:0;stroke-dashoffset:-1}}
@keyframes sw-glow{0%{opacity:0;transform:scale(.6)}30%{opacity:1}100%{opacity:0;transform:scale(1.15)}}
@keyframes sw-press{0%{transform:scale(1)}20%{transform:scale(.9)}60%{transform:scale(1.03)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){
.sw .rk{transition:none}
.sw.zap::before,.sw.zap .zp,.sw.zap .rk-in{animation:none}
}
@media (min-width:1024px){
.sw svg{width:156px}
}
.tasks{width:100%;border-collapse:collapse;border-top:1px solid var(--line-light)}
.tasks th{text-align:left;font:400 var(--label)/1.4 var(--font-head);letter-spacing:.32em;text-transform:uppercase;color:var(--stone);padding:14px 12px 14px 0;border-bottom:1px solid var(--line-light)}
.tasks td{padding:16px 12px 16px 0;border-bottom:1px solid var(--line-light);vertical-align:middle}
.tasks .task{font-size:var(--body);line-height:1.4}
.tag .sl{display:block;width:1px;height:13px;background:currentColor;transform:rotate(20deg)}
.js .tasks thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.js .tasks tr{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:16px;border-bottom:1px solid var(--line-light)}
.js .tasks td{border:0;padding:0}
.js .tasks .task{padding:16px 0}
.js .tasks .own{grid-area:1/2;overflow:hidden;height:32px;display:flex;align-items:center}
.js .tasks .tag{transition:transform 320ms var(--ease),opacity 320ms var(--ease);transition-delay:calc(var(--r)*60ms)}
.js .tasks[data-mode="zelf"] .c2 .tag{transform:translateY(110%);opacity:0}
.js .tasks[data-mode="alles"] .c1 .tag{transform:translateY(-110%);opacity:0}
.js .tasks .same .tag{transition:none}
.note{margin-top:28px;font-size:calc(var(--body) + 1px);min-height:3.2em}
.nojs-only{display:block}
.js .nojs-only{display:none}
.zb-small{margin-top:20px;font-size:var(--small);color:var(--stone);max-width:60ch}
.zb.dark .sw .pl,.zb.dark .sw .fr,.zb.dark .sw .dv,.zb.dark .sw .rk rect{stroke:var(--white)}
.zb.dark .sw .led{stroke:rgba(255,255,255,.4)}
.zb.dark .sw[aria-checked="false"] .l1,.zb.dark .sw[aria-checked="true"] .l2{stroke:var(--light)}
.dark + .light{border-top:var(--hair) solid var(--light)}
.zb.dark .tasks,.zb.dark .tasks th,.zb.dark .tasks td,.zb.dark .tasks tr{border-color:var(--line-dark)}
.zb.dark .tasks th{color:var(--muted)}
.zb.dark .zb-small{color:var(--muted)}
@media (min-width:1024px){
.zb-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:96px;align-items:start}
}
.ww-grid{display:grid;gap:56px}
.steps{position:relative;padding-left:48px}
.rail{position:absolute;left:4px;top:0;width:2px;height:100%;overflow:visible}
.rail line{stroke-width:1.5}
.rail-t{stroke:var(--line-dark)}
.rail-p{stroke:var(--light)}
.js .rail-p{stroke-dasharray:1;stroke-dashoffset:1}
.steps > li{position:relative;padding-bottom:64px}
.steps > li:last-child{padding-bottom:0}
.dot{position:absolute;left:-47.5px;top:16px;width:9px;height:9px;border-radius:50%;border:1.5px solid var(--muted);background:var(--night)}
.dot::after{content:"";position:absolute;inset:-1.5px;border-radius:50%;background:var(--light);opacity:0;transition:opacity 300ms var(--ease)}
.no-js .dot::after,.steps li.is-on .dot::after{opacity:1}
.steps h3{font:400 var(--h3)/1.25 var(--font-head);margin-bottom:10px}
.steps p{color:var(--muted);max-width:52ch}
.steps .ph-img{margin-top:28px;aspect-ratio:3/2;max-width:560px}
.ww-photo{margin:28px 0 0;max-width:400px;border-radius:var(--radius);overflow:hidden}
.ww-photo img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
@media (min-width:1024px){
.ww-grid{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:64px;align-items:start}
.steps{padding-left:64px}
.dot{left:-63.5px}
}
.about-photo{aspect-ratio:4/5;width:100%;max-width:260px}
.about-text{max-width:620px}
.about-text .h2{font-size:clamp(26px,2.6vw,38px)}
.about-text p{margin-top:20px;max-width:60ch}
.about .ph-block{margin-top:28px}
.ww.light .rail-t{stroke:var(--line-light)}
.ww.light .rail-p{stroke:var(--ink)}
.ww.light .dot{border-color:var(--stone);background:var(--paper)}
.ww.light .dot::after{background:var(--ink)}
.ww.light .num,.ww.light .steps p{color:var(--stone)}
.faq-grid{display:grid;gap:40px}
.qa{border-top:1px solid var(--line-light)}
.qa details{border-bottom:1px solid var(--line-light)}
.qa summary{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:44px;padding:26px 0;cursor:pointer;list-style:none}
.qa summary::-webkit-details-marker{display:none}
.qa h3{font:400 22px/1.3 var(--font-head)}
.pm{position:relative;flex:none;width:16px;height:16px}
.pm::before,.pm::after{content:"";position:absolute;left:0;top:7.25px;width:16px;height:1.5px;background:var(--ink);transition:transform var(--fast) var(--ease)}
.pm::after{transform:rotate(90deg)}
.sw-l::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:1px;background:var(--light);transform:scaleX(0);transition:transform 500ms var(--ease) 120ms}
details[open] .pm::after{transform:rotate(0)}
.ans{padding:0 40px 28px 0;color:var(--stone);max-width:62ch}
details[open] .ans{animation:ans 320ms var(--ease)}
@keyframes ans{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.faq .link{margin-top:28px}
@media (min-width:1024px){
.faq-grid{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:64px}
}
.closer .wrap{position:relative;z-index:1}
.closer h2{font:200 var(--display)/1.02 var(--font-head);text-wrap:balance;max-width:14ch;margin:0 auto}
.closer .actions{margin-top:44px;justify-content:center;align-items:stretch}
@media (min-width:600px){
.closer .actions{align-items:center}
}
.ft-grid{display:grid;gap:48px}
.ft h2{font:400 var(--label)/1.5 var(--font-head);letter-spacing:.32em;text-transform:uppercase;color:var(--muted);margin-bottom:16px}
.ft .about-short{margin-top:28px}
.ft .about-short p{color:var(--muted);font-size:14px;max-width:46ch}
.ft address{font-style:normal;color:var(--muted);line-height:1.7}
.ft address a{display:inline-flex;align-items:center;min-height:44px}
.ft nav a{display:flex;align-items:center;min-height:44px;text-decoration:none}
.ft-bar{margin-top:56px;padding-top:12px;border-top:1px solid var(--line-dark);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 32px;color:var(--muted);font-size:var(--small)}
.ft-bar ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center}
.ft-legal{gap:0 16px}
@media (min-width:600px){
.ft-legal{gap:0 24px}
}
.ft-legal a{display:inline-flex;align-items:center;min-height:44px;color:inherit;text-decoration:none;transition:color 200ms var(--ease)}
.ft-legal a:hover,.ft-legal a:focus-visible{color:var(--white)}
.ft-maker{display:flex;align-items:center;gap:4px;margin:0}
.ft .tj{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;color:#9A0002;transition:color 300ms var(--ease),filter 300ms var(--ease)}
.ft .tj:hover,.ft .tj:focus-visible,.ft .tj.is-lit{color:#C4161C;filter:drop-shadow(0 0 6px rgba(220,30,30,.65))}
.ft .tj-logo{width:auto;height:28px}
@keyframes tl-aan{0%{opacity:.35}8%{opacity:1}16%{opacity:.3}28%{opacity:1}36%{opacity:.55}48%,100%{opacity:1}}
@media (prefers-reduced-motion:no-preference){
.ft .tj:hover .tj-logo,.ft .tj.is-lit .tj-logo{animation:tl-aan 700ms linear both}
}
.ft-icons{gap:8px}
.ft-icons a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--line-dark);border-radius:var(--radius);color:var(--muted);transition:color 200ms var(--ease),border-color 200ms var(--ease)}
.ft-icons a:hover,.ft-icons a:focus-visible{color:var(--light);border-color:rgba(244,217,168,.5)}
.ft-icons svg{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.sw-l.on{color:var(--ink)}
@media (min-width:1024px){
.ft-grid{grid-template-columns:minmax(0,2fr) 1fr 1fr;gap:40px}
}
.mbar .btn{min-height:48px;padding:0 12px;justify-content:center}
.mbar.is-hidden{transform:translateY(100%);visibility:hidden;transition:transform 300ms var(--ease),visibility 0s 300ms}
.rich .ink::after{content:"";position:absolute;left:0;right:0;top:0;height:150px;background:radial-gradient(ellipse 70% 100% at 30% 0%,rgba(244,217,168,.16),rgba(244,217,168,0) 75%);pointer-events:none}
.rich .ink > *{position:relative;z-index:1}
.rich .ink > .pl-line{display:none}
@media (min-width:1024px){
.rich .ink{padding:52px 44px 48px}
}
.rich .ink *{border-color:var(--line-dark)}
.rich .ink h2,.rich .ink h3,.rich .ink .h2,.rich .ink dd,.rich .ink .sp-note{color:var(--white)}
.rich .ink p,.rich .ink dt,.rich .ink .sp-ht{color:var(--muted)}
.rich .ink .num{color:var(--light)}
.rich .ink .tag{border-color:var(--white);color:var(--white);background:transparent}
.rich .ink .tag.jens{background:var(--white);border-color:var(--white);color:var(--ink)}
.rich .ink .tag.nn{border-color:var(--muted);color:var(--muted)}
.rich .ink .ph{background:rgba(244,217,168,.11)}
.rich .ink .fl-pts{color:var(--white)}
.rich .ink .fl-pts li::before{background:var(--light)}
.rich .ink a{color:var(--white)}
.rich .ink .link{--bar:var(--light)}
@media (prefers-reduced-motion:reduce){
.bars i{transition:none}
*,*::before,*::after{transition-duration:0s!important;transition-delay:0s!important;animation:none!important}
.hl .ln,.hl .gl{opacity:1!important}
}
.ws-b::after{content:"";position:absolute;left:0;right:0;top:0;height:150px;background:radial-gradient(ellipse 65% 100% at 50% 0%,rgba(244,217,168,.2),rgba(244,217,168,0) 75%);pointer-events:none}
@media (hover:hover){
.ws-x:hover{border-color:#fff}
}
.ws-x:focus-visible{outline:2px solid #F4D9A8;outline-offset:3px;border-color:#fff}
.ws-x i{display:block;width:14px;height:1.5px;background:#F4D9A8}
.has-hl > .hl{position:absolute;left:0;right:0;top:0;height:0}
.has-hl > .hl .ln{height:1px}
.has-hl > .hl .gl{height:110px;background:radial-gradient(ellipse 55% 100% at 50% 0%,rgba(244,217,168,.19),rgba(244,217,168,.08) 45%,rgba(244,217,168,0) 75%)}
.fl-pts{display:grid;gap:8px;font-size:15px;line-height:1.45;color:var(--muted)}
.fl-pts li{position:relative;padding-left:20px}
.fl-pts li::before{content:"";position:absolute;left:0;top:.7em;width:10px;height:1px;background:var(--light)}
.panel--list h3{font:300 clamp(26px,2.6vw,38px)/1.15 var(--font-head);margin-bottom:24px}
.closer p.cl-small{margin-top:28px;font-size:var(--small)}
.tag.keur{background:transparent;border-style:dashed;border-color:currentColor}
.kr-panel{position:relative;margin-top:56px;padding:44px 24px 36px;border-radius:var(--radius);overflow:hidden}
.kr-panel>.hl{position:absolute;left:0;right:0;top:0;height:0}
.kr-panel>.hl .ln{height:1px}
.kr-panel>.hl .gl{height:140px;background:radial-gradient(ellipse 60% 100% at 30% 0%,rgba(244,217,168,.2),rgba(244,217,168,.07) 45%,rgba(244,217,168,0) 75%)}
.kr-panel .ph{background:rgba(244,217,168,.11)}
.kr{position:relative;display:grid;gap:40px}
.kr>li{position:relative;padding-left:36px}
.kr-dot{position:absolute;left:0;top:4px;z-index:1;width:11px;height:11px;border-radius:50%;border:1.5px solid var(--light);background:var(--light)}
.kr-dot::before{content:"";position:absolute;inset:-16px;border-radius:50%;background:radial-gradient(closest-side,rgba(244,217,168,.34),rgba(244,217,168,.08) 55%,rgba(244,217,168,0))}
.sw::before{content:"";position:absolute;inset:-40%;border-radius:50%;background:radial-gradient(closest-side,rgba(244,217,168,.28),rgba(244,217,168,.08) 55%,rgba(244,217,168,0));opacity:0;pointer-events:none}
.ws-b::before{content:"";position:absolute;left:0;right:0;top:0;height:1.5px;background:#F4D9A8;box-shadow:0 0 12px rgba(244,217,168,.5)}
.js .kr-dot{background:var(--night);border-color:var(--muted);transition:background-color 300ms var(--ease),border-color 300ms var(--ease)}
.js .kr-dot::before{opacity:0;transition:opacity 300ms var(--ease)}
.js .kr-dot.on{background:var(--light);border-color:var(--light)}
.js .kr-dot.on::before{opacity:1}
.kr-seg{position:absolute;left:5px;top:15px;width:1px;height:calc(100% + 29px);overflow:visible}
.closer{position:relative;overflow:hidden;text-align:center;padding:calc(var(--section) + 40px) 0}
.ft{border-top:1px solid var(--line-dark);padding:72px 0 40px;font-size:14px}
.sw-l{font:500 14px/1.35 var(--font-body);color:var(--stone);cursor:pointer;-webkit-user-select:none;user-select:none}
@media (min-width:1024px){
.sw-l{font-size:15px}
.ft{padding-top:96px}
}
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:45;height:calc(64px + env(safe-area-inset-bottom));padding:8px var(--gutter) calc(8px + env(safe-area-inset-bottom));display:grid;grid-template-columns:1fr 1fr;gap:8px;background:var(--night);border-top:1px solid var(--line-dark);transition:transform 300ms var(--ease),visibility 0s}
.sw-l{position:relative;transition:color 400ms var(--ease)}
.sw{position:relative;background:none;border:0;padding:0;cursor:pointer;color:var(--ink);border-radius:var(--radius);-webkit-tap-highlight-color:transparent}
@media (min-width:1024px){
.mbar{display:none}
}
.rich{background-color:var(--paper);background-image:linear-gradient(rgba(11,13,16,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(11,13,16,.035) 1px,transparent 1px);background-size:64px 64px;background-position:-1px -1px}
.ws-b>*{position:relative;z-index:1}
.has-hl{position:relative}
.kr-seg line{stroke:var(--light);stroke-width:1.5;vector-effect:non-scaling-stroke}
.kr-seg .hz{display:none}
.js .kr-seg line{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 450ms linear}
.js .kr-seg.on line{stroke-dashoffset:0}
.kr .tag{margin-bottom:18px}
.kr h3{font:400 var(--h3)/1.25 var(--font-head);margin-bottom:10px}
.kr p{color:var(--muted);max-width:38ch;font-size:15px;line-height:1.55}
.closer p{margin:32px auto 0;max-width:46ch;color:var(--muted);font-size:18px}
@media (min-width:1024px){
.kr-panel{padding:64px 48px 52px}
.kr>li{padding-left:0;padding-top:44px}
.kr-dot{top:0}
.kr-seg{left:11px;top:5px;width:calc(100% + 48px - 11px);height:1px}
.kr-seg .vt{display:none}
.kr-seg .hz{display:inline}
}
.panel--list h3.tg{display:flex;align-items:center;flex-wrap:wrap;gap:12px 16px}
.bs-grid{display:grid;gap:12px}
.bs-row{display:flex;flex-direction:column;gap:12px;padding:24px;border:1px solid var(--line-dark);border-radius:var(--radius)}
.bs-row h3{font:400 20px/1.3 var(--font-head)}
.bs-row p{color:var(--muted)}
.bs-small{margin-top:24px;font-size:var(--small);color:var(--muted);max-width:66ch}
@media (min-width:1024px){
.bs-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.bs-row{padding:28px}
}
.compact{padding:calc(var(--section)*.75) 0}
.kl-note{margin-top:48px}
@media (min-width:1024px){
.rich .sp-jens.ink{padding:48px 44px;border-left:0}
.rich .sp-jij{padding-right:48px}
}
#voor-wie.rich .panels{gap:16px}
#voor-wie.rich .panel,#voor-wie.rich .panel:first-child,#voor-wie.rich .panel:nth-child(2){padding:44px 32px 40px;border:1px solid rgba(11,13,16,.2);border-radius:var(--radius);background:var(--white)}
#voor-wie.rich .panel.ink{background:var(--ink);border-color:var(--ink)}
#voor-wie.rich .bs.ink{border-top:0;margin-top:16px}
#voor-wie.rich .bs.ink .bs-row{border-color:var(--line-dark)}
#voor-wie.rich .bs.ink .bs-row p{color:var(--muted)}
.tag.nn{border-style:dashed;border-color:var(--stone);color:var(--stone);background:transparent}
.after{margin-top:40px;display:flex;flex-direction:column;gap:24px;align-items:flex-start}
.light .after p{color:var(--stone)}
.bord-foto{margin:20px 0 0;max-width:220px;border-radius:var(--radius);overflow:hidden}
.bord-foto img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.js .rv{opacity:0;transform:translateY(var(--rise));transition:opacity 500ms var(--ease),transform 500ms var(--ease);transition-delay:calc(var(--i,0)*var(--stagger))}
.ws.on{opacity:1;visibility:visible;transition:opacity 300ms cubic-bezier(.2,.7,.2,1)}
.js .rv.in{opacity:1;transform:none}
.vd-sum{display:none;margin-top:20px;color:var(--ink);min-height:1.6em}
.ws-b{position:relative;overflow:hidden;width:min(100%,480px);background:#0E0F11;color:#fff;border:1px solid rgba(255,255,255,.14);border-radius:2px;padding:52px 32px 36px;transform:translateY(14px);transition:transform 450ms cubic-bezier(.2,.7,.2,1);box-shadow:0 40px 80px -40px rgba(0,0,0,.9)}
.js .vd-sum{display:block}
.vd-top{display:grid;gap:40px}
@media (min-width:1024px){
.vd-top{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px;align-items:end}
}
@media (max-width:1023.98px){
.vd-top{display:contents}
.sw-bar{display:block;margin-top:32px}
.js .sw-bar{position:sticky;top:var(--hh);z-index:5;margin:0 calc(-1*var(--gutter));padding:14px var(--gutter) 12px;background:var(--paper);border-bottom:1px solid var(--line-light)}
.js .sw-bar .sw svg{width:96px}
.js .vd-sum{margin-top:10px;font-size:14px;text-align:center}
}
.sp-h{display:flex;align-items:center;gap:14px;padding-bottom:20px;border-bottom:1px solid var(--ink)}
.sp-ht{display:grid;font:400 var(--label)/1.5 var(--font-head);letter-spacing:.32em;text-transform:uppercase;color:var(--stone)}
.sp-ht>span{grid-area:1/1}
.sp-note{margin-top:16px;font-size:15px;line-height:1.55;color:var(--ink);max-width:46ch}
.sp-l li{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:16px;padding:24px 0;border-bottom:1px solid var(--line-light)}
.sp-l li:last-child{border-bottom:0}
.sp-l h3{font:400 var(--h3)/1.25 var(--font-head);margin:0 0 8px}
.sp-l p{color:var(--stone);font-size:15px;line-height:1.55;max-width:46ch}
.sp-keur{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:40px;padding:20px 24px;border:1px dashed var(--stone);border-radius:var(--radius);font-size:15px;color:var(--stone)}
.sp-keur .num{font-size:26px}
.sp-keur a{color:var(--ink);text-underline-offset:4px}
@media (min-width:1024px){
.sp-jij{padding-right:56px;align-self:start;position:static;top:calc(var(--hh) + 120px)}
.sp-jens{padding-left:56px;border-left:1px solid var(--line-light)}
}
.sp-h .own>span{justify-content:flex-start}
.js [data-mode="z"] .ot{transform:translateY(110%);opacity:0}
.js [data-mode="t"] .oz{transform:translateY(-110%);opacity:0}
.ws.on .ws-b{transform:none}
.js .sp-l li{transition:opacity 320ms var(--ease)}
.js [data-mode="t"] .sp-note{opacity:.4}
.kr-wrap{margin-top:64px}
.kq{display:grid;margin-top:72px;border-top:1px solid var(--line-dark)}
.kq>div{padding:28px 0;border-bottom:1px solid var(--line-dark)}
.kq h3{font:400 20px/1.3 var(--font-head);margin-bottom:10px}
.kq p{color:var(--muted);font-size:15px;line-height:1.55;max-width:46ch}
.kd li{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:10px 0;border-top:1px solid var(--line-dark);font-size:15px}
.kd li:first-child{border-top:0;padding-top:0}
.kq-open{margin-top:24px;font-size:var(--small);color:var(--muted);max-width:80ch}
@media (min-width:1024px){
.kq{grid-template-columns:1fr 1fr;column-gap:64px;border-top:0}
.kq>div{border-top:1px solid var(--line-dark);border-bottom:0}
}
#voor-wie .panels{margin-top:56px}
#voor-wie .bs{border-top-color:var(--line-light)}
#voor-wie .bs-row{border-color:var(--line-light)}
#voor-wie .bs-row p,#voor-wie .bs-small{color:var(--stone)}
.cmp{margin-top:56px;border-top:1px solid var(--line-dark)}
.cmp-r{display:grid;gap:8px;padding:20px 0;border-bottom:1px solid var(--line-dark)}
.cmp-r>*{font-size:15px;line-height:1.5}
.cmp-k{font:400 var(--label)/1.5 var(--font-head);letter-spacing:.32em;text-transform:uppercase;color:var(--muted)}
.cmp-c::before{content:attr(data-c);display:block;font-size:var(--small);color:var(--muted);margin-bottom:2px}
.cmp-hd{display:none}
.cmp .tag{margin-right:8px}
.tip{position:relative;margin-top:40px;padding:4px 0 4px 24px;max-width:62ch}
.tip::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1.5px;background:var(--light);box-shadow:0 0 10px rgba(244,217,168,.35)}
.tip .link{margin-top:8px}
@media (min-width:768px){
.cmp-r{grid-template-columns:minmax(0,3fr) minmax(0,4.5fr) minmax(0,4.5fr);gap:32px;align-items:baseline}
.cmp-c::before{display:none}
.cmp-hd{display:grid;border-bottom:0;padding:0 0 16px}
.cmp-hd span{font:400 20px/1.3 var(--font-head);color:var(--white);padding-top:16px;position:relative}
.cmp-hd span::before{content:"";position:absolute;left:0;top:0;width:48px;height:1.5px;background:var(--light);box-shadow:0 0 10px rgba(244,217,168,.35)}
.cmp-hd span:first-child::before{display:none}
}
.wy{display:grid;gap:40px;margin-top:56px}
.wy li{position:relative;padding-top:28px}
.wy .pl-line{position:absolute;top:0;left:0;width:100%;height:2px;overflow:visible}
.wy h3{font:400 var(--h3)/1.25 var(--font-head);margin-bottom:10px}
.wy p{color:var(--muted);font-size:15px;line-height:1.55;max-width:40ch}
@media (min-width:768px){
.wy{grid-template-columns:1fr 1fr;gap:48px 40px}
}
@media (min-width:1024px){
.wy{grid-template-columns:repeat(4,minmax(0,1fr))}
}
.oj-hero{display:grid;gap:36px}
.oj-hero .ph-img{aspect-ratio:4/5;width:100%;max-width:320px}
.oj-hero .btn{flex:none;white-space:nowrap}
.oj-hero .oj-photo{aspect-ratio:4/5;width:100%;max-width:320px;margin:0;border-radius:var(--radius);overflow:hidden;background:var(--carbon)}
.oj-photo img{width:100%;height:100%;object-fit:cover}
@media (min-width:1024px){
.oj-hero .oj-photo{grid-column:2;grid-row:1;max-width:440px;justify-self:end}
.oj-hero{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px;align-items:center}
.oj-hero > div{grid-column:1;grid-row:1}
.oj-hero .ph-img{grid-column:2;grid-row:1;max-width:none}
.page-hero.oj{padding-bottom:72px}
}
.vh-grid{display:grid;gap:56px;margin-top:56px}
.vq{border-bottom:1px solid var(--line-light)}
.vq li{border-top:1px solid var(--line-light);padding:32px 0}
.vq h3{font:400 var(--h3)/1.25 var(--font-head);margin-bottom:12px}
.vq p{color:var(--stone);max-width:60ch;overflow-wrap:break-word}
.kort-col{position:static}
@media (min-width:1024px){
.vh-grid{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:64px;align-items:start}
}
@media (min-width:1024px) and (min-height:880px){
.kort-col{position:sticky;top:calc(var(--hh) + 48px)}
}
.afs{display:grid;gap:56px;margin-top:64px;max-width:900px;--afs-st:90ms}
.ws{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px;background:rgba(0,0,0,.62);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;visibility:hidden;transition:opacity 300ms cubic-bezier(.2,.7,.2,1),visibility 0s 300ms}
.ws-l{display:block;font:400 12px/1.5 "Jost","Jost Fallback",system-ui,sans-serif;letter-spacing:.32em;text-transform:uppercase;color:#A1A8B0;margin:0 0 20px}
.ws-h{margin:0;font:200 clamp(30px,5vw,40px)/1.12 "Jost","Jost Fallback",system-ui,sans-serif;color:#fff;text-wrap:balance}
.ws-x{display:inline-flex;align-items:center;gap:12px;min-height:52px;margin-top:36px;padding:0 26px;background:transparent;color:#fff;border:1px solid rgba(255,255,255,.5);border-radius:2px;font:500 14px/1 "Inter","Inter Fallback",system-ui,sans-serif;letter-spacing:.02em;cursor:pointer}
@media (min-width:600px){
.afs{--afs-st:150ms}
}
.afs .tl{display:block;width:56px;height:1.5px;background:var(--light);margin-bottom:28px}
.afs h3{font:300 clamp(26px,3vw,44px)/1.15 var(--font-head);text-wrap:balance}
.afs p{margin-top:14px;color:var(--muted);max-width:52ch}
.js .afs .tl{opacity:0}
.js .afs .afs-t{opacity:0;transition:opacity 500ms var(--ease)}
.afs.is-on .tl{opacity:1;animation:tl 350ms linear calc(var(--i)*var(--afs-st)) both}
.afs.is-on .afs-t{opacity:1;transition-delay:calc(var(--i)*var(--afs-st) + 300ms)}
.oj-rl{padding:72px 0}
.oj-rl .label{margin-bottom:16px}
.oj-rl-t{font:300 clamp(26px,2.6vw,38px)/1.15 var(--font-head);text-wrap:balance}
.oj-rl .link{margin-top:16px}
.ft address a.fb{display:inline-flex}
@media (min-width:1024px) and (min-height:880px){
.rich .kort-col.ink{position:sticky}
}
@media (max-height:500px) and (orientation:landscape){
.kort-col,.rich .kort-col.ink{position:static}
}
.rich .kort-col.ink .kort{border-top-color:var(--line-dark)}
@media (prefers-reduced-motion:reduce){
.afs .tl,.afs .afs-t{opacity:1!important}
}
.ft .ft-partner{margin-top:28px}
.ft .ft-partner p{color:var(--muted);font-size:14px;margin-bottom:12px}
.ft .ft-partner a{display:inline-block}
.ft .ft-partner img{width:192px;height:auto}
/* footer: verwijzing voor professionals (feedback Jens 7/11/2026) */
.ft .ft-pro{margin-top:20px;color:var(--muted);font-size:14px;max-width:32ch}
.ft .ft-pro a{display:inline-flex;align-items:center;min-height:44px;color:var(--white)}
/* cookiemelding Google Analytics (app/layout/toestemming.php, js/toestemming.js) */
.cm{position:fixed;z-index:60;left:var(--gutter);right:var(--gutter);bottom:calc(16px + env(safe-area-inset-bottom));max-width:520px;margin-left:auto;background:var(--carbon);color:var(--white);border:1px solid var(--line-dark);border-radius:var(--radius);box-shadow:0 30px 60px -24px rgba(0,0,0,.85)}
.cm[hidden]{display:none}
.cm-b{padding:24px}
.cm-t{font:300 22px/1.2 var(--font-head)}
.cm-p{margin-top:10px;color:var(--muted);font-size:15px;line-height:1.55}
.cm-p a{color:var(--white)}
.cm-act{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:18px}
.cm-act .btn{justify-content:center;min-height:48px;padding:0 16px}
@media (max-width:1023px){
.cm{bottom:calc(76px + env(safe-area-inset-bottom))}
}
.ft-legal .cm-open{display:inline-flex;align-items:center;min-height:44px;padding:0;background:none;border:0;font:inherit;color:inherit;cursor:pointer;transition:color 200ms var(--ease)}
.ft-legal .cm-open:hover,.ft-legal .cm-open:focus-visible{color:var(--white)}
.cm-in{padding:0;background:none;border:0;font:inherit;color:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}