:root{--paars:#462772;--paars-diep:#2E1A4D;--magenta:#E61672;--magenta-tekst:#A00F4D;--geel:#F2B318;--ink:#1C1626;--grijs:#615C6E;--grijs-licht:#F6F4FA;--lijn:#E7E1F0;--paars-zacht:#F3EFFA;--roze-zacht:#FCE9F1;--radius:20px;--radius-s:14px;--schaduw-s:0 6px 22px -10px rgba(46,26,77,.22);--schaduw:0 26px 60px -30px rgba(46,26,77,.5);}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Montserrat',system-ui,sans-serif;color:var(--ink);background:#fff;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{font-weight:800;line-height:1.1;letter-spacing:-.02em}
p{color:var(--grijs)}
a{color:inherit;text-decoration:none}
.wrap{max-width:1120px;margin:0 auto;padding:0 28px}
svg{display:block;max-width:100%}
:focus-visible{outline:3px solid var(--magenta-tekst);outline-offset:3px;border-radius:6px}
.hero :focus-visible,footer :focus-visible,.dash :focus-visible,.eu :focus-visible,.hart :focus-visible{outline-color:var(--geel)}
.skiplink{position:absolute;left:12px;top:-60px;z-index:99;background:var(--geel);color:var(--ink);font-weight:700;font-size:.9rem;padding:11px 18px;border-radius:0 0 12px 12px;transition:top .2s}
.skiplink:focus{top:0}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.fld{display:block;margin-bottom:12px}
.fld>span{display:block;font-size:.82rem;font-weight:700;margin-bottom:5px}
.fld .err{display:block;font-size:.8rem;font-weight:700;margin-top:5px;color:#ffb0c6}
.fld input[aria-invalid=true],.fld textarea[aria-invalid=true]{outline:2px solid #ff6a8a;outline-offset:1px}
.flabel{display:block;font-size:.82rem;font-weight:700;color:#E4D9F3;margin-bottom:7px}
.emailrow .err{display:block;font-size:.8rem;font-weight:700;color:#ffb0c6;margin-top:6px}
.smile{color:var(--magenta)}
.logo{display:inline-flex;align-items:center;gap:11px;font-weight:800;font-size:1.5rem;letter-spacing:-.03em}
.logo .wp{color:var(--magenta)}.logo .sh{color:var(--paars)}.logo .smile{width:26px;transition:transform .3s}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:inherit;font-weight:700;font-size:.95rem;padding:14px 26px;border-radius:100px;border:1.5px solid transparent;cursor:pointer;transition:background .2s,box-shadow .2s,transform .12s}
.btn.primary{background:var(--geel);color:var(--ink)}.btn.primary:hover{background:#ffc63d}
.btn.dark{background:var(--paars);color:#fff}.btn.dark:hover{background:var(--paars-diep)}
.btn.ghost{background:#fff;color:var(--ink);border-color:var(--lijn)}.btn.ghost:hover{border-color:var(--paars);color:var(--paars)}
.btn.light{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.32)}.btn.light:hover{background:rgba(255,255,255,.22)}

/* experience chrome */
.prog{position:fixed;top:0;left:0;right:0;height:5px;z-index:70}
.prog .fill{height:100%;width:0;background:linear-gradient(90deg,var(--magenta),#ff8fc4)}
.altbadge{position:fixed;bottom:16px;right:16px;z-index:70;background:rgba(28,20,38,.9);color:#fff;font-weight:700;font-size:.8rem;padding:7px 13px;border-radius:100px;display:flex;gap:6px;align-items:center;backdrop-filter:blur(6px);max-width:min(72vw,320px);white-space:nowrap;overflow:hidden}
.altbadge{transition:opacity .25s,transform .25s}
.altbadge.weg{opacity:0;transform:translateY(12px);pointer-events:none}
.altbadge b{color:var(--geel)}
.altbadge #cpName{color:#cbbfe0;font-weight:600}
.rail{position:fixed;left:18px;top:0;bottom:0;width:60px;z-index:60;display:flex;align-items:center;justify-content:center;pointer-events:none}
.rail .track{position:relative;width:4px;height:76vh;background:var(--lijn);border-radius:4px}
.rail .done{position:absolute;left:0;right:0;bottom:0;height:0;background:linear-gradient(180deg,#ff8fc4,var(--magenta));border-radius:4px}
.rail .mile{position:absolute;left:50%;transform:translateX(-50%);width:11px;height:11px;border-radius:50%;background:#fff;border:2px solid var(--lijn)}
.rail .mile.hit{border-color:var(--magenta);background:var(--magenta)}
.rail .mile .lbl{display:none}
.rail .mile.hit .lbl{opacity:1;color:var(--paars)}
.rail .marker{position:absolute;left:50%;bottom:0;transform:translate(-50%,50%);width:38px;z-index:3;filter:drop-shadow(0 6px 8px rgba(46,26,77,.35));transition:bottom .12s linear}
@media(max-width:1180px){
  .rail{left:2px;width:22px}
  .rail .track{width:3px;height:84vh}
  .rail .mile{width:7px;height:7px}
  .rail .mile .lbl{display:none}
  .rail .marker{width:20px}
  .altbadge{top:auto;bottom:12px;right:12px}
}

/* header */
html.dark header .navlinks {
    background: none;
}
header{position:fixed;top:0;left:0;right:0;z-index:55;background:none;border:none;padding:12px 0;transition:padding .25s ease}
body{padding-top:100px}
body:has(main>section.hero),body:has(main>section.pagehero){padding-top:0}
main>section.hero{padding-top:calc(96px + 100px)}
@media(max-width:1000px){main>section.hero{padding-top:calc(20px + 88px)}main>section.pagehero{padding-top:calc(20px + 88px)}}
main>section.pagehero{padding-top:calc(34px + 100px)}
header:not(.opdonker) nav{background:rgba(255,255,255,.92);backdrop-filter:blur(14px);box-shadow:0 16px 40px -22px rgba(46,26,77,.3)}
header nav{border-radius:100px;padding:0 22px;margin:0 -22px;transition:background .25s ease,box-shadow .25s ease,height .25s ease,backdrop-filter .25s}
/* op een donkere hero zweeft de balk doorzichtig mee */
header.opdonker nav{background:none;box-shadow:none}
header.opdonker .logo .sh,header.opdonker .navlinks a,header.opdonker .navlinks .diensten{color:#fff}
header.opdonker .logo .wp{color:var(--magenta)}
header.opdonker .navlinks a:hover,header.opdonker .navlinks .diensten:hover{color:#f1b318;opacity:1}
header.opdonker .btn.ghost{border-color:rgba(255,255,255,.5);color:#fff;background:rgba(255,255,255,.08)}
header.opdonker .btn.ghost:hover{background:rgba(255,255,255,.2);border-color:#fff}
header.opdonker .navtoggle{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.42)}
header.opdonker .navtoggle span,header.opdonker .navtoggle span::before,header.opdonker .navtoggle span::after{background:#fff}
/* zodra je scrolt: witte pil met schaduw */
header.vast{padding:8px 0}
header.vast nav{background:rgba(255,255,255,.92);backdrop-filter:blur(14px);box-shadow:0 16px 40px -22px rgba(46,26,77,.45);height:66px}
@media(max-width:1000px){
  header nav{padding:0 16px;margin:0 -16px}
  header.vast nav,header:not(.opdonker) nav{border-radius:22px}
  /* het uitklappaneel is wit, dus daar hoort donkere tekst, ook op een donkere hero */
  header.opdonker .navlinks a,header.opdonker .navlinks .diensten{color:var(--ink)}
  header.opdonker .navlinks a:hover,header.opdonker .navlinks .diensten:hover{color:var(--paars)}
}
nav{display:flex;align-items:center;justify-content:space-between;height:76px}
.navlinks{display:flex;align-items:center;gap:30px}
.navlinks a{display:inline-flex;align-items:center;line-height:1;font-weight:600;font-size:.9rem;color:var(--ink);opacity:.8;white-space:nowrap}.navlinks a:hover{opacity:1;color:var(--paars)}
.nav-cta{display:flex;gap:14px;align-items:center;margin-left:14px}
.hasmenu{position:relative;display:inline-flex;align-items:center}
.navlinks .diensten{display:inline-flex;align-items:center;line-height:1;gap:7px;font-weight:600;font-size:.9rem;color:var(--ink);opacity:.8;background:none;border:none;font-family:inherit;cursor:pointer;padding:0}
.navlinks .diensten:hover{opacity:1;color:var(--paars)}
.navlinks .diensten::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .2s}
.navlinks .diensten[aria-expanded=true]::after{transform:rotate(225deg) translateY(-2px)}
.megamenu{display:none;position:absolute;top:100%;left:-18px;width:552px;background:#fff;border:1px solid var(--lijn);border-radius:22px;box-shadow:0 28px 60px -28px rgba(46,26,77,.45);padding:14px;z-index:70}
.megamenu.open{display:block}
.megamenu>*:first-child{margin-top:0}
.hasmenu::after{content:"";position:absolute;left:-18px;right:0;top:100%;height:16px}
.megamenu a{display:block;padding:9px 13px;border-radius:10px;transition:background .15s}
.megamenu a:hover{background:var(--grijs-licht)}
.megamenu b{display:block;font-size:.93rem;color:var(--ink);font-weight:700}
.megamenu small{display:block;font-size:.72rem;line-height:1.3;color:var(--grijs);margin-top:2px;overflow-wrap:break-word}
.megamenu .alle{border-top:1px solid var(--lijn);margin-top:6px;padding-top:6px}
.megamenu .alle a{font-weight:700;color:var(--magenta-tekst);font-size:.8rem;padding:8px 13px}
.floatscan{display:none;align-items:center;gap:9px;position:fixed;left:34px;bottom:16px;z-index:80;background:var(--geel);color:var(--ink);font-weight:700;font-size:.95rem;padding:14px 22px;border-radius:100px;box-shadow:0 18px 34px -14px rgba(242,179,24,.85)}
.floatscan:hover{background:#dba014}
.floatscan.weg{opacity:0;transform:translateY(14px);pointer-events:none;transition:opacity .2s,transform .2s}
.floatscan{transition:opacity .2s,transform .2s,background .2s}
.navtoggle{display:none;align-items:center;justify-content:center;width:46px;height:46px;border-radius:14px;border:1.5px solid var(--lijn);background:#fff;cursor:pointer;flex:0 0 auto}
.navtoggle span{display:block;width:20px;height:2px;background:var(--ink);border-radius:2px;position:relative;transition:.2s}
.navtoggle span::before,.navtoggle span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--ink);border-radius:2px;transition:.2s}
.navtoggle span::before{top:-6px}.navtoggle span::after{top:6px}
.navtoggle[aria-expanded=true] span{background:transparent}
.navtoggle[aria-expanded=true] span::before{top:0;transform:rotate(45deg)}
.navtoggle[aria-expanded=true] span::after{top:0;transform:rotate(-45deg)}
@media(max-width:1000px){
  .navtoggle{display:flex}
  .hasmenu{position:static;display:block;border-bottom:1px solid var(--lijn)}
  .navlinks .diensten{display:flex;width:100%;justify-content:space-between;padding:13px 0;font-size:1rem}
  .megamenu{position:static;width:auto;border:none;box-shadow:none;border-radius:0;padding:0 0 8px 14px;background:none}
  .megamenu a{padding:11px 0;border-radius:0;border-bottom:1px solid var(--lijn)}
  .megamenu small{white-space:normal}
  .megamenu a:last-child{border-bottom:none}
  .megamenu .alle{border-top:none;margin:0;padding:0}
  .nav-cta .btn.primary{display:none}
  .floatscan{display:inline-flex}
  /* compacte knop rechtsonder, zodat linksonder vrij blijft */
  .floatscan{left:auto;right:16px;bottom:16px;border-radius:100px;justify-content:center;padding:14px 20px;box-shadow:0 16px 34px -16px rgba(46,26,77,.6)}
  .altbadge{display:none}
  body{padding-bottom:0}
  .nav-cta .btn.ghost{display:none}
  .navlinks{display:none;position:absolute;top:calc(100% + 10px);left:0;right:0;flex-direction:column;gap:0;background:#fff;border:1px solid var(--lijn);border-radius:20px;box-shadow:0 22px 40px -24px rgba(46,26,77,.4);padding:8px 20px 14px;z-index:60}
  .navlinks.open{display:flex}
  .navlinks a{padding:13px 0;font-size:1rem;border-bottom:1px solid var(--lijn)}
  .navlinks a:last-child{border-bottom:none}
  nav{position:relative}
}

/* sections */
.sec{padding:100px 0}
.kicker{display:inline-flex;align-items:center;gap:8px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:.75rem;color:var(--magenta-tekst);margin-bottom:15px}
.kicker .smile{width:16px}
.sec h2{font-size:clamp(1.9rem,3.6vw,2.75rem);margin-bottom:16px;max-width:20ch}
.sec .intro{font-size:1.1rem;color:var(--grijs);max-width:56ch}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s,transform .6s}
.reveal.in{opacity:1;transform:none}

/* HERO score-game */
.hero{background:var(--paars-diep);color:#fff;padding:96px 0 120px;overflow:hidden;position:relative}
.hero-grid{display:grid;grid-template-columns:1fr 1.02fr;gap:48px;align-items:center}
.hero .eyebrow{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:.8rem;color:#ff8fc4;background:rgba(255,255,255,.08);padding:8px 15px;border-radius:100px}
.hero .eyebrow .smile{color:#ff8fc4}.hero .eyebrow .smile{width:18px}
.hero h1{font-size:clamp(2rem,4vw,2.9rem);margin:20px 0 14px;max-width:15ch}
.hero .promise{color:#E4D9F3;font-size:1.1rem;max-width:44ch;margin-bottom:26px}
.game{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:20px;padding:24px}
.scanrow>.btn{flex:0 0 auto;white-space:nowrap}
.scanrow{display:flex;gap:10px;background:#fff;border-radius:14px;padding:8px;margin-bottom:10px}
.scanrow input{flex:1 1 0;min-width:0;border:none;padding:12px 14px;font-family:inherit;font-size:1rem;color:var(--ink);border-radius:8px}.scanrow input:focus{outline:none}
.game .hint{color:#cabfe0;font-size:.8rem}
.scanhint{display:none;align-items:center;gap:10px;background:rgba(255,143,196,.12);border:1.5px dashed rgba(255,143,196,.55);border-radius:12px;padding:10px 13px;color:#fff;font-weight:700;font-size:.85rem;margin-bottom:10px}
.scanhint svg{width:18px;height:26px;flex:0 0 auto}
.scanhint b{color:#ff8fc4}
.scanhint.gone{display:none!important}
.result{margin-top:20px;opacity:0;max-height:0;overflow:hidden;transition:opacity .5s,max-height .6s}
.result.show{opacity:1;max-height:560px}
.result .gaugewrap{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.gauge{position:relative;width:112px;height:112px;flex:0 0 auto}.gauge .v{position:absolute;inset:0;display:grid;place-items:center;font-weight:800;font-size:1.7rem;color:#fff}
.findings{list-style:none;display:flex;flex-direction:column;gap:8px;flex:1;min-width:210px}
.findings li{display:flex;gap:10px;align-items:center;font-size:.88rem;color:#E4D9F3;opacity:0;transform:translateX(-8px);transition:.4s}.findings li.on{opacity:1;transform:none}
.findings .dot{width:15px;height:15px;border-radius:50%;flex:0 0 auto}.findings .warn{background:#febc2e}.findings .bad{background:#ff6a8a}.findings .ok{background:#28c840}
.result .msg{margin-top:14px;font-weight:600;color:#fff;font-size:.95rem}.result .msg b{color:#ff8fc4}
.hero-visual{position:relative;display:flex;align-items:center;justify-content:center}
.hero-visual .expedition{width:100%;max-width:470px}
.route{stroke:#ff8fc4;stroke-width:3;fill:none;stroke-linecap:round;stroke-dasharray:2 11}
.flagbob{transform-box:fill-box;transform-origin:50% 100%}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:22px}.hero-visual .expedition{max-width:300px;margin:4px auto 0}}
/* mountain/smile visuals in overige secties */
.hart .art{position:relative}
.hart .art .artvisual{width:100%;max-width:300px}
.guide{cursor:ew-resize;touch-action:pan-y}
.guide #guideMarker{transition:transform .12s ease-out}
.guide #guideSmile,.guide #guideFlag{transition:opacity .2s}
.guidehint{position:absolute;left:50%;bottom:2px;transform:translateX(-50%);background:rgba(230,22,114,.92);color:#fff;font-size:.72rem;font-weight:700;padding:6px 14px;border-radius:100px;pointer-events:none;transition:opacity .35s;white-space:nowrap;box-shadow:0 8px 20px -8px rgba(230,22,114,.6)}
.guidehint .ghgrab{display:inline-block}
@media (prefers-reduced-motion: no-preference){.guidehint{animation:ghpulse 1.8s ease-in-out infinite}.guidehint .ghgrab{animation:ghwave 1.8s ease-in-out infinite}@keyframes ghpulse{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-3px)}}@keyframes ghwave{0%,100%{transform:rotate(0)}50%{transform:rotate(-18deg)}}}
.summit .summitviz{width:100%;max-width:230px}

/* twee sporen */
.sporen{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;position:relative;margin-top:52px}
.sporen .or{display:none}
/* Route-kaarten: licht in rust, kleuren op wanneer je een keuze maakt */
.spoor{--c:var(--paars);--c2:var(--paars-diep);position:relative;border-radius:24px;padding:40px 34px;display:flex;flex-direction:column;align-items:flex-start;min-height:270px;background:#fff;color:var(--ink);border:1px solid var(--lijn);box-shadow:var(--schaduw-s);transition:transform .25s,box-shadow .25s,opacity .25s,background .3s,color .3s,border-color .3s}
.spoor.build{--c:var(--paars);--c2:var(--paars-diep)}
.spoor.care{--c:var(--magenta);--c2:#b30e59}
.spoor.switch{--c:var(--geel);--c2:#d99a0d}
.spoor::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;border-radius:24px 24px 0 0;background:var(--c);opacity:.9;transition:opacity .3s}
.spoor .smile{width:38px;margin-bottom:12px;color:var(--c)}
.spoor .k{font-weight:700;text-transform:uppercase;letter-spacing:.09em;font-size:.72rem;color:var(--c)}
.spoor h3{font-size:1.55rem;margin:8px 0 10px}
.spoor p{font-size:1rem;margin-bottom:auto;color:var(--grijs)}
.spoor .btn{margin-top:20px}
.spoor .btn.ghost{border-color:var(--c);color:var(--c);background:#fff}
.spoor .btn{width:100%;justify-content:space-between;gap:10px;text-align:left;padding:13px 16px;font-size:.9rem}
.spoor .btn>span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spoor .btn .arw,.btn.wide .arw{flex:0 0 auto}
.btn.wide{width:100%;justify-content:space-between;gap:10px;text-align:left}
.spoor:hover{transform:translateY(-5px);box-shadow:var(--schaduw)}
/* geactiveerd: de gekozen route kleurt vol op */
.spoor.hl{background:linear-gradient(160deg,var(--c),var(--c2));border-color:transparent;color:#fff;transform:translateY(-6px);box-shadow:0 0 0 3px var(--c),0 30px 60px -24px rgba(46,26,77,.45)}
.spoor.hl::before{opacity:0}
.spoor.hl h3{color:#fff}.spoor.hl p{color:rgba(255,255,255,.9)}.spoor.hl .k{color:rgba(255,255,255,.85)}.spoor.hl .smile{color:#fff}
.spoor.hl .btn{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.42)}
.spoor.hl .btn:hover{background:rgba(255,255,255,.26)}
/* gele route krijgt donkere tekst voor leesbaarheid */
.spoor.switch.hl,.spoor.switch.hl h3,.spoor.switch.hl .k,.spoor.switch.hl .smile{color:var(--ink)}
.spoor.switch.hl p{color:rgba(28,22,38,.82)}
.spoor.switch.hl .btn{background:rgba(28,22,38,.12);color:var(--ink);border-color:rgba(28,22,38,.3)}
.spoor.dim{opacity:.55}
.sporen .or{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:3;width:54px;height:54px;border-radius:50%;background:#fff;border:2px solid var(--ink);display:grid;place-items:center;font-weight:800;box-shadow:0 10px 24px -8px rgba(0,0,0,.3)}
@media(max-width:820px){.sporen{grid-template-columns:1fr}.sporen .or{display:none}}

/* portfolio */
.folio{display:grid;grid-template-columns:2fr 1fr 1fr;grid-auto-rows:184px;gap:16px;margin-top:52px}
.cell{border-radius:var(--radius);padding:26px;color:#fff;display:flex;flex-direction:column;justify-content:space-between;font-weight:700;transition:box-shadow .2s;transform-style:preserve-3d;will-change:transform;overflow:hidden}
.cell:hover{box-shadow:var(--schaduw)}.cell small{font-weight:600;font-size:.82rem;opacity:.92}.cell .m{font-size:2rem;letter-spacing:-.03em}.cell .arrow{align-self:flex-end;font-size:1.3rem}
.cell.big{grid-row:span 2;background:linear-gradient(155deg,var(--paars),var(--paars-diep))}
.cell.c2{background:linear-gradient(155deg,var(--magenta),#ff6aa9)}.cell.c3{background:var(--paars-zacht);color:var(--paars)}.cell.c4{background:var(--roze-zacht);color:var(--magenta)}.cell.c5{background:linear-gradient(155deg,#7b52b8,var(--magenta))}
.cell.shot{padding:0;position:relative;justify-content:flex-end;background:#2E1A4D}
.cell.shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top left}
.cell.shot svg.preview{position:absolute;inset:0;width:100%;height:100%;display:block}
.cell.shot .cap{position:relative;z-index:2;width:100%;padding:16px 18px;background:linear-gradient(transparent,rgba(28,20,38,.55) 40%,rgba(28,20,38,.92));color:#fff;display:flex;flex-direction:column;gap:2px}
.cell.shot .cap .m{font-size:1.3rem;letter-spacing:-.02em}
.cell.shot .arrow{position:absolute;top:16px;right:18px;z-index:2}
.cell.shot .tag{position:absolute;top:14px;left:16px;z-index:2;background:rgba(255,255,255,.16);backdrop-filter:blur(4px);color:#fff;font-size:.72rem;font-weight:700;padding:4px 10px;border-radius:100px}
@media(max-width:820px){.folio{grid-template-columns:1fr 1fr;grid-auto-rows:150px}}
@media(max-width:520px){.folio{grid-template-columns:1fr}.cell.big{grid-row:auto}}
/* cases: expeditiedossiers (sleepbare kaartenstapel) */
.caselayout{display:grid;grid-template-columns:1.24fr .76fr;gap:46px;margin-top:52px;align-items:start}
.deck{display:grid;align-items:stretch;touch-action:pan-y}
.dcard{grid-area:1/1;height:100%;position:relative;background:#fff;border:1px solid var(--lijn);border-radius:24px;box-shadow:0 34px 70px -34px rgba(46,26,77,.5);overflow:hidden;transform-origin:50% 100%;transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .4s;display:flex;flex-direction:column;will-change:transform}
.dcard.front{cursor:grab;touch-action:pan-y;user-select:none}.dcard.front.grabbing{cursor:grabbing;transition:none}
.dcard .shot{position:relative;background:var(--paars-zacht);padding:14px 14px 16px}
.dcard .bbar{display:flex;align-items:center;gap:6px;padding:9px 13px;background:#f1edf7;border:1px solid var(--lijn);border-bottom:none;border-radius:12px 12px 0 0}
.dcard .bbar i{width:9px;height:9px;border-radius:50%;background:#cdbfe3}
.dcard .bbar span{margin-left:8px;font-family:'JetBrains Mono',monospace;font-size:.7rem;color:#5B5470;background:#fff;padding:3px 11px;border-radius:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60%}
.dcard .viewport{position:relative;border:1px solid var(--lijn);border-top:none;border-radius:0 0 12px 12px;overflow:hidden;background:#fff;height:250px}
.dcard .viewport img{display:block;width:100%;height:auto;transition:transform 6s linear}
.dcard .viewport:hover img{transform:translateY(calc(250px - 100%))}
.dcard .scrollhint{position:absolute;right:10px;bottom:10px;z-index:2;background:rgba(28,20,38,.78);color:#fff;font-size:.68rem;font-weight:700;padding:5px 11px;border-radius:20px;pointer-events:none;transition:opacity .3s}
.dcard .viewport:hover .scrollhint{opacity:0}
.dcard .concept{display:grid;place-items:center;height:250px;background:linear-gradient(150deg,var(--paars),var(--paars-diep));color:#fff}
.dcard .concept b{font-size:2.6rem;letter-spacing:-.03em}
.dcard .phone{position:absolute;right:42px;bottom:-18px;width:128px;border-radius:16px;background:#f1edf7;border:1px solid var(--lijn);padding:16px 6px 7px;box-shadow:0 22px 40px -18px rgba(46,26,77,.45);z-index:3}
.dcard .phone::before{content:"";position:absolute;top:7px;left:50%;transform:translateX(-50%);width:26px;height:4px;border-radius:4px;background:#cdbfe3}
/* alleen de bovenkant van de mobiele schermafbeelding, in telefoonverhouding */
.dcard .phone img{display:block;width:100%;height:auto;aspect-ratio:9/17;object-fit:cover;object-position:top center;border-radius:10px;border:1px solid var(--lijn);background:#fff}
.stampnr{position:absolute;top:20px;right:22px;z-index:4;width:56px;height:56px;border-radius:50%;border:2px dashed rgba(255,255,255,.75);color:#fff;display:grid;place-items:center;font-family:'JetBrains Mono',monospace;font-weight:600;font-size:.88rem;background:rgba(70,39,114,.62);transform:rotate(-9deg)}
.dcard .body{padding:24px 26px 22px;display:flex;flex-direction:column;flex:1}
.dcard h3{font-size:1.45rem;margin:0 0 5px}
.dcard .cwhat{font-size:.93rem;line-height:1.5;margin-bottom:13px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:18px}
.stats div{background:var(--grijs-licht);border:1px solid var(--lijn);border-radius:12px;padding:12px 13px}
.stats b{display:block;font-size:1.25rem;letter-spacing:-.02em;color:var(--paars)}
.stats small{font-size:.74rem;font-weight:600;color:var(--grijs);line-height:1.35;display:block}
.cquote{border-left:3px solid var(--magenta);padding:4px 0 4px 15px;margin-bottom:18px}
.cquote p{font-size:.96rem;color:var(--ink);font-style:italic}
.cquote cite{display:block;margin-top:6px;font-size:.78rem;font-style:normal;font-weight:700;color:var(--grijs)}
.todo{border-style:dashed!important;border-color:#c9bfe0!important;background:#fff!important}
.todo b,.todo p,.todo cite{color:#a094bd!important}
.dcard .case-link{margin-top:auto}
.case-link,.clink{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--magenta-tekst);transition:gap .2s}
.case-link:hover{gap:13px}
.deckbar{display:flex;align-items:center;gap:13px;margin-top:24px}
.rnd{width:46px;height:46px;border-radius:50%;border:1.5px solid var(--lijn);background:#fff;cursor:pointer;font-size:1.1rem;color:var(--paars);display:grid;place-items:center;transition:border-color .2s,transform .12s}
.rnd:hover{border-color:var(--paars);transform:translateY(-2px)}
.counter{font-family:'JetBrains Mono',monospace;font-weight:600;color:var(--grijs);font-size:.85rem}
.dragcue{display:inline-flex;align-items:center;gap:8px;background:none;border:none;padding:0;margin-bottom:18px;color:var(--grijs);opacity:.66;transition:opacity .2s}
.dragcue:hover{opacity:1}
.dragcue .cuehand{flex:0 0 auto;width:22px;height:16px;background:currentColor no-repeat center/22px 16px;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 16'%3E%3Cpath d='M6 4L2.5 8 6 12M16 4l3.5 4-3.5 4M4 8h14' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/22px 16px;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 16'%3E%3Cpath d='M6 4L2.5 8 6 12M16 4l3.5 4-3.5 4M4 8h14' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/22px 16px}
.dragcue b{font-size:.76rem;font-weight:600;letter-spacing:.01em;line-height:1.4;color:inherit}
.dragcue small{font-size:.76rem;font-weight:400;color:inherit}
.dragcue small::before{content:" · "}
.dragcue .cue-mob{display:none}
@media (prefers-reduced-motion:no-preference){
  .dragcue .cuehand{animation:cuenudge 2.2s ease-in-out infinite}
  @keyframes cuenudge{0%,100%{transform:translateX(-2px)}50%{transform:translateX(2px)}}
}
.log{position:relative}
.loghead{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:14px}
.loghead h3.h4{margin:0;font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--magenta-tekst);font-weight:800}
.logmeta{font-size:.78rem;color:var(--grijs)}
.logtrack{display:flex;flex-direction:column;gap:6px}
.logitem{display:grid;grid-template-columns:auto 164px 1fr;gap:14px;align-items:center;width:100%;text-align:left;font-family:inherit;position:relative;padding:12px 15px;border:1px solid var(--lijn);background:#fff;border-radius:14px;cursor:pointer;transition:border-color .2s,background .2s,transform .18s,box-shadow .2s}
.logitem::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--lijn);transition:.22s}
.logitem:hover{border-color:var(--paars);transform:translateX(3px)}
.logitem:hover::before{background:var(--paars)}
.logitem.on{border-color:var(--magenta);box-shadow:0 14px 30px -22px rgba(46,26,77,.5)}
.logitem.on::before{background:var(--magenta);box-shadow:0 0 0 3px rgba(230,22,114,.16)}
.logitem .ltxt{min-width:0}
.logitem .nm{display:block;font-weight:700;font-size:.93rem;line-height:1.25;color:var(--ink)}
.logitem .mt{display:block;font-size:.76rem;color:var(--grijs);margin-top:1px}
.logcta{display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:center;margin-top:8px;padding:13px 15px;border-radius:14px;background:var(--paars);color:#fff;text-decoration:none;transition:background .2s,transform .18s}
.logcta:hover{background:var(--paars-diep);transform:translateX(3px)}
.logcta .lnr{font-family:'JetBrains Mono',monospace;font-size:.95rem;color:var(--geel)}
.logcta .nm{display:block;font-weight:700;font-size:.9rem;color:#fff;line-height:1.25}
.logcta .mt{display:block;font-size:.78rem;color:#e5d9f5;margin-top:2px}
@media(max-width:900px){.caselayout{grid-template-columns:1fr;gap:30px}}
@media(max-width:560px){.stats{grid-template-columns:1fr 1fr}.dcard .body{padding:26px 20px 22px}}

/* wie we zijn / sherpa */
.hart{background:var(--paars);color:#fff;border-radius:32px;overflow:hidden}
.hart-grid{display:grid;grid-template-columns:1.1fr .9fr;align-items:center}
.hart .txt{padding:70px 56px}
.hart .kicker{color:#fff;opacity:.9}.hart .kicker .smile{color:#fff}
.hart h2{color:#fff;font-size:clamp(1.8rem,3.3vw,2.5rem);margin-bottom:18px}
.hart p{color:#E4D9F3;font-size:1.06rem;margin-bottom:16px}
.hart .art{background:linear-gradient(160deg,#5a3690,#3a1d5e);padding:40px;display:flex;align-items:center;justify-content:center}
.hart .art .sherpa{width:230px;filter:drop-shadow(0 20px 26px rgba(0,0,0,.3))}
@media(max-width:880px){.hart-grid{grid-template-columns:1fr}.hart .txt{padding:50px 32px}}

/* diensten */
.gezond{background:var(--grijs-licht)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:52px}
.svc{background:#fff;border:1px solid var(--lijn);border-radius:var(--radius);padding:34px 30px;transition:box-shadow .2s;transform-style:preserve-3d;will-change:transform}
.svc:hover{box-shadow:var(--schaduw)}
.svc .ic{width:52px;height:52px;border-radius:13px;background:var(--paars-zacht);display:grid;place-items:center;margin-bottom:20px}
.svc .ic svg{width:26px;height:26px;stroke:var(--paars);fill:none;stroke-width:1.8}
.svc h3{font-size:1.28rem;margin-bottom:10px}.svc p{font-size:.97rem;margin-bottom:16px}
.svc .lnk{font-weight:700;font-size:.92rem;color:var(--magenta);display:inline-flex;gap:6px}.svc:hover .lnk{gap:10px}
@media(max-width:880px){.grid3{grid-template-columns:1fr}}

/* kerngezond */
.gezond-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:26px;margin-top:52px;align-items:stretch}
.panel{background:#fff;border:1px solid var(--lijn);border-radius:var(--radius);padding:34px;box-shadow:var(--schaduw-s)}
.gauge-card{display:flex;gap:26px;align-items:center;flex-wrap:wrap}
.kg{position:relative;width:130px;height:130px;flex:0 0 auto}.kg .val{position:absolute;inset:0;display:grid;place-items:center;font-weight:800;font-size:1.9rem;color:var(--paars)}
.checks{list-style:none;display:flex;flex-direction:column;gap:11px}
.checks li{display:flex;gap:10px;align-items:center;font-size:.93rem;font-weight:500;color:#3f3a4d}
.checks li .ck{width:22px;height:22px;border-radius:50%;background:#e7f8ee;display:grid;place-items:center;flex:0 0 auto}.checks li .ck svg{width:12px;height:12px;stroke:#16a34a;stroke-width:3;fill:none}
.checks li.pending{opacity:.28;transform:translateX(-6px);transition:.4s}.checks li.pending .ck{background:var(--roze-zacht)}.checks li.on{opacity:1;transform:none}
.stats{display:flex;gap:14px;flex-wrap:wrap;margin-top:24px}
.stat{flex:1;min-width:110px;background:var(--grijs-licht);border-radius:14px;padding:18px}.stat .num{font-weight:800;font-size:1.7rem;color:var(--paars);letter-spacing:-.03em}.stat small{color:var(--grijs);font-weight:600;font-size:.8rem}
.term{background:#1b1230;border-radius:16px;overflow:hidden;border:1px solid #2e1f4a;box-shadow:var(--schaduw-s);height:100%;display:flex;flex-direction:column}
.term .bar{background:#241738;padding:12px 16px;display:flex;gap:7px;align-items:center}.term .bar i{width:11px;height:11px;border-radius:50%}.term .bar i:nth-child(1){background:#ff5f57}.term .bar i:nth-child(2){background:#febc2e}.term .bar i:nth-child(3){background:#28c840}.term .bar span{margin-left:10px;color:#8a7db3;font-family:'JetBrains Mono',monospace;font-size:.78rem}
.term pre{margin:0;padding:24px 22px;font-family:'JetBrains Mono',monospace;font-size:.88rem;line-height:1.9;color:#d7c9f2;white-space:pre-wrap;flex:1}
.term .cmt{color:#6ee7a8}.term .kw{color:#ff7ac0}.term .fn{color:#f9d976}.term .str{color:#9ad8ff}
.term .cap{padding:16px 22px;border-top:1px solid #2e1f4a;color:#b7a7db;font-size:.85rem;font-weight:600}
@media(max-width:880px){.gezond-grid{grid-template-columns:1fr}}

/* configurator = pakketten */
.config{background:linear-gradient(165deg,var(--paars) 8%,var(--paars-diep));color:#fff}
.config .grid{display:grid;grid-template-columns:1.3fr .7fr;gap:30px;align-items:start;margin-top:44px}
.opts{display:flex;flex-direction:column;gap:12px}
.opt{display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:16px 18px;cursor:pointer;transition:.2s}
.opt:hover{border-color:rgba(255,255,255,.35)}.opt.on{border-color:#ff8fc4;background:rgba(255,143,196,.18);box-shadow:0 0 0 1px rgba(255,143,196,.5) inset}
.opt .box{width:26px;height:26px;border-radius:8px;border:2px solid rgba(255,255,255,.4);flex:0 0 auto;display:grid;place-items:center;transition:.2s}.opt.on .box{background:var(--magenta);border-color:var(--magenta)}
.opt .box svg{width:14px;height:14px;stroke:#fff;stroke-width:3;fill:none;opacity:0;transition:.2s}.opt.on .box svg{opacity:1}
.opt .t{flex:1}.opt .t b{font-size:1rem}.opt .t small{display:block;color:#e3d9f2;font-size:.82rem}.opt .p{font-weight:700;color:var(--geel)}
.summary{background:linear-gradient(160deg,var(--paars),var(--paars-diep));border-radius:20px;padding:28px;position:sticky;top:96px}
.summary .lvl{font-size:.76rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#ff8fc4}
.summary .total{font-size:2.5rem;font-weight:800;letter-spacing:-.03em;margin:6px 0}.summary .total small{font-size:1rem;color:#cabfe0;font-weight:600}
.summary .bar{height:8px;background:rgba(255,255,255,.15);border-radius:8px;overflow:hidden;margin:14px 0 6px}.summary .bar i{display:block;height:100%;width:20%;background:linear-gradient(90deg,var(--magenta),#ff8fc4);transition:width .3s}
.summary p{color:#e3d9f2;font-size:.85rem}
.config .kicker,.config .kicker .smile{color:#ff8fc4}
.config .compare{margin-top:18px;color:#e3d9f2;font-size:.88rem}.config .compare a{color:var(--geel);font-weight:700;text-decoration:underline}
@media(max-width:820px){.config .grid{grid-template-columns:1fr}.summary{position:static}}

/* werkwijze */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:52px}
.step{padding:0 22px;position:relative}
.step:not(:last-child)::after{content:"";position:absolute;top:9px;left:76px;width:calc(100% - 62px);height:28px;background:no-repeat center/100% 28px url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 28'><path d='M0 18 C16 4 32 24 50 14 S84 4 100 9' fill='none' stroke='%23E61672' stroke-width='4' stroke-dasharray='5 7' stroke-linecap='round'/></svg>")}
.step .dot{width:46px;height:46px;border-radius:50%;background:#fff;border:2px solid var(--paars);color:var(--paars);display:grid;place-items:center;font-weight:800;position:relative;z-index:1;margin-bottom:18px}
.step h3{font-size:1.08rem;margin-bottom:8px}.step p{font-size:.91rem}
@media(max-width:880px){.steps{grid-template-columns:1fr 1fr;gap:34px 22px}.step::after{display:none}}
@media(max-width:520px){.steps{grid-template-columns:1fr}}

/* reviews slider */
.rev-slider{position:relative;margin-top:52px}
.rev-track{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:6px 2px 16px;scrollbar-width:none}
.rev-track::-webkit-scrollbar{display:none}
.review{flex:0 0 calc((100% - 48px)/3);scroll-snap-align:start;background:#fff;border:1px solid var(--lijn);border-radius:var(--radius);padding:30px 28px;box-shadow:var(--schaduw-s);display:flex;flex-direction:column}
.review .stars{color:var(--magenta);font-weight:700;letter-spacing:1px;margin-bottom:12px}.review p{color:#3f3a4d;font-size:.98rem;font-weight:500;margin-bottom:18px;flex:1}
.review .who{display:flex;align-items:center;gap:12px}.review .av{width:44px;height:44px;border-radius:50%;background:var(--paars-zacht);color:var(--paars);display:grid;place-items:center;font-weight:800;font-size:.9rem;flex:0 0 auto}.review .who b{display:block;font-size:.94rem}.review .who small{color:var(--grijs);font-size:.84rem}
.rev-ctrls{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:22px}
.rev-btn{width:46px;height:46px;border-radius:50%;border:1.5px solid var(--lijn);background:#fff;color:var(--paars);font-size:1.4rem;line-height:1;cursor:pointer;display:grid;place-items:center;transition:border-color .2s,color .2s,transform .12s,box-shadow .2s}
.rev-btn:hover{border-color:var(--magenta);color:var(--magenta);transform:translateY(-2px);box-shadow:var(--schaduw-s)}
.rev-dots{display:flex;gap:8px}
.rev-dots i{width:8px;height:8px;border-radius:50%;background:var(--lijn);transition:all .25s;cursor:pointer}
.rev-dots i.on{background:var(--magenta);width:22px;border-radius:4px}
@media(max-width:880px){.review{flex-basis:86%}}

/* faq */
.faqwrap{max-width:820px;margin:52px auto 0}
.q{border:1px solid var(--lijn);border-radius:var(--radius-s);margin-bottom:14px;background:#fff;overflow:hidden}
.q summary{list-style:none;cursor:pointer;padding:22px 26px;font-weight:700;font-size:1.03rem;display:flex;justify-content:space-between;align-items:center;gap:18px}.q summary::-webkit-details-marker{display:none}
.q .plus{flex:0 0 auto;width:26px;height:26px;position:relative;transition:transform .25s}.q .plus::before,.q .plus::after{content:"";position:absolute;background:var(--paars);border-radius:2px}.q .plus::before{top:12px;left:4px;right:4px;height:2px}.q .plus::after{left:12px;top:4px;bottom:4px;width:2px}.q[open] .plus{transform:rotate(135deg)}
.q .a{padding:0 26px 24px;color:var(--grijs);font-size:.97rem}

/* summit / contact */
.summit{background:linear-gradient(180deg,#3a1d5e,var(--paars-diep));color:#fff;overflow:hidden;padding:72px 0}
.summit form{grid-template-columns:1fr 1fr;gap:11px}
.summit form input:nth-of-type(3),.summit form textarea,.summit form button,.summit form .reassure{grid-column:1/-1}
.summit form textarea{min-height:96px}
.summit .info{margin-bottom:14px;font-size:.94rem}
@media(max-width:820px){.summit{padding:52px 0}.summit form{grid-template-columns:1fr}}
.summit-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center}
.summit .peak-wrap{text-align:center}
.summit .sherpa{width:170px;margin:0 auto;filter:drop-shadow(0 20px 26px rgba(0,0,0,.35))}
.summit .kicker{color:#ff8fc4}.summit .kicker .smile{color:#ff8fc4}
.summit h2{color:#fff;font-size:clamp(1.7rem,3vw,2.2rem);margin-bottom:12px}
.summit p{color:#D6CCE6;margin-bottom:18px;font-size:1rem;max-width:48ch}
.summit .info b{color:#fff}
form{display:grid;gap:13px;margin-top:8px}
form input,form textarea{border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.08);border-radius:12px;padding:14px 16px;font-family:inherit;font-size:.96rem;color:#fff}
form input::placeholder,form textarea::placeholder{color:#cbbfe0}form input:focus,form textarea:focus{outline:none;border-color:#fff;background:rgba(255,255,255,.14)}form textarea{min-height:100px;resize:vertical}
.burst{position:fixed;pointer-events:none;z-index:80}
@media(max-width:880px){.summit-grid{grid-template-columns:1fr}.summit .peak-wrap{order:-1}}

/* footer */
footer{background:var(--paars-diep);color:#C6B7DE;padding:44px 0 24px}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:26px}
.foot-grid h3{color:#fff;font-weight:700;font-size:.92rem;margin-bottom:10px}.foot-grid a{display:block;padding:3px 0;font-size:.88rem;opacity:.82}.foot-grid a:hover{opacity:1;color:#fff}
.foot-logo{margin-bottom:15px}.foot-logo .sh{color:#fff}.foot-logo .wp{color:var(--magenta)}
.foot-bottom{border-top:1px solid rgba(255,255,255,.14);margin-top:26px;padding-top:16px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:.87rem;opacity:.75}
@media(max-width:880px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:760px){
  footer{padding:26px 0 18px}
  .foot-grid{grid-template-columns:1fr;gap:0}
  .foot-logo{margin-bottom:6px}
  .foot-grid>div:first-child p{font-size:.86rem;margin-bottom:14px}
  .foot-grid>div:not(:first-child){border-top:1px solid rgba(255,255,255,.12)}
  .foot-grid h3{margin:0;padding:13px 0;font-size:.9rem;position:relative;cursor:pointer}
  .foot-grid h3::after{content:"+";position:absolute;right:2px;top:11px;font-size:1.1rem;font-weight:700;color:#ff8fc4}
  .foot-grid div.open h3::after{content:"–"}
  .foot-grid>div:not(:first-child) a{display:none}
  .foot-grid div.open a{display:block}
  .foot-grid div.open{padding-bottom:12px}
  .foot-bottom{margin-top:14px;padding-top:12px;font-size:.78rem;flex-direction:column;gap:4px}
}

/* EU-servers USP */
.eu{background:#fff;color:var(--ink);border:1px solid var(--lijn);border-radius:32px;padding:60px 7%;position:relative;overflow:hidden;box-shadow:var(--schaduw-s)}
.eu .globe{position:absolute;top:-40px;right:-30px;width:220px;height:220px;opacity:.05}
.eu .globe path,.eu .globe circle{stroke:var(--paars);fill:none;stroke-width:3}
.eu .kicker{color:var(--magenta)}.eu .kicker .smile{color:var(--magenta)}
.eu h2{color:var(--ink);font-size:clamp(1.8rem,3.3vw,2.5rem);margin-bottom:14px;max-width:22ch}
.eu .lead{color:var(--grijs);max-width:58ch;font-size:1.06rem}
.usprow{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px;position:relative;z-index:2}
.uspcard{background:var(--paars-zacht);border:1px solid var(--lijn);border-radius:16px;padding:26px}
.uspcard .ic{width:46px;height:46px;border-radius:12px;background:#fff;display:grid;place-items:center;margin-bottom:14px;box-shadow:var(--schaduw-s)}
.uspcard .ic svg{width:24px;height:24px;stroke:var(--magenta);fill:none;stroke-width:1.8}
.uspcard h3{color:var(--ink);font-size:1.08rem;margin-bottom:8px}
.uspcard p{color:var(--grijs);font-size:.91rem}
@media(max-width:820px){.usprow{grid-template-columns:1fr}}

/* gratis-migratie band */
.ctaband{background:linear-gradient(160deg,var(--paars),var(--paars-diep));color:#fff;border-radius:32px;padding:60px 8%;text-align:center;position:relative;overflow:hidden}
.ctaband .inner{position:relative;z-index:2}
.ctaband .kicker{color:#ff8fc4}.ctaband .kicker .smile{color:#ff8fc4}
.ctaband h2{color:#fff;font-size:clamp(1.8rem,3.3vw,2.5rem);margin:0 auto 14px;max-width:24ch}
.ctaband h2 .hl{color:#ff8fc4}
.ctaband p{color:#E4D9F3;max-width:58ch;margin:0 auto 26px;font-size:1.05rem}
.ctaband .cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.blob{position:absolute;filter:blur(10px);opacity:.35;mix-blend-mode:screen;border-radius:50%}
.blob.b1{width:260px;height:260px;background:radial-gradient(circle,#E61672,transparent 66%);top:-90px;left:-40px}
.blob.b2{width:230px;height:230px;background:radial-gradient(circle,#8a5fd0,transparent 66%);bottom:-80px;right:6%}

@media (prefers-reduced-motion: no-preference){
  .blob{animation:morph 11s ease-in-out infinite}
  .blob.b2{animation-duration:14s;animation-direction:reverse}
  @keyframes morph{0%,100%{border-radius:44% 56% 62% 38% / 42% 46% 54% 58%}33%{border-radius:68% 32% 46% 54% / 32% 60% 40% 68%}66%{border-radius:36% 64% 36% 64% / 62% 36% 64% 38%}}
  .route.marching{animation:march 3.6s linear infinite}
  @keyframes march{to{stroke-dashoffset:-52}}
  .flagbob{animation:flagbob 3s ease-in-out infinite}
  @keyframes flagbob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-4px) rotate(-2deg)}}
  .rays{transform-box:view-box;transform-origin:150px 150px;animation:raypulse 3.4s ease-in-out infinite}
  @keyframes raypulse{0%,100%{opacity:.35;transform:scale(.97)}50%{opacity:.7;transform:scale(1.03)}}
}
.hero{overflow:hidden}
.hero-ridge{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:58px;display:block;z-index:1}
.hero .wrap{position:relative;z-index:2}
/* zachter, minder blokkerig: schaduw i.p.v. harde randen */
.svc,.plan,.review,.post,.panel,.case{border:none;box-shadow:0 22px 48px -30px rgba(46,26,77,.5);border-radius:26px}
.plan.pop{border:1.5px solid var(--paars)}
.folio .cell{border-radius:26px}
.q{border:1px solid var(--lijn);box-shadow:0 12px 30px -24px rgba(46,26,77,.4)}
/* overflow-veilig */
.hero-grid>div{min-width:0}
.eyebrow{max-width:100%}
/* golvende bergkam-overgangen op lichte tussensecties */
.gezond{position:relative}
.gezond>.wrap{position:relative;z-index:2}
.gezond::before,.gezond::after{content:"";position:absolute;left:-1px;right:-1px;height:46px;background-repeat:no-repeat;background-size:100% 101%;pointer-events:none;z-index:1}
.gezond::before{top:-1px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 46' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L0 30 Q360 2 720 20 T1440 18 L1440 0 Z' fill='%23ffffff'/%3E%3C/svg%3E")}
.gezond::after{bottom:-1px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 46' preserveAspectRatio='none'%3E%3Cpath d='M0 46 L0 16 Q360 44 720 26 T1440 28 L1440 46 Z' fill='%23ffffff'/%3E%3C/svg%3E")}
/* micro-interacties */
.uspcard{transition:transform .2s,border-color .2s}.uspcard:hover{transform:translateY(-4px)}
.svc .ic{transition:transform .25s}.svc:hover .ic{transform:rotate(-7deg) scale(1.07)}
.cell .arrow{transition:transform .2s}.cell:hover .arrow{transform:translate(3px,-3px)}
/* mini-quiz */
.quiz{background:#fff;border-radius:26px;box-shadow:0 26px 54px -28px rgba(46,26,77,.55);padding:32px 30px;margin-top:26px;position:relative;z-index:6}
.quiz .qlabel{font-weight:800;font-size:1.15rem;margin-bottom:16px;display:flex;gap:9px;align-items:center}
.quiz .qlabel .smile{width:18px}
.quizopts{display:flex;flex-wrap:wrap;gap:9px}
.quizopts .chip{flex:0 0 auto;white-space:nowrap;padding:12px 15px;font-size:.86rem}

.chip{border:1.5px solid var(--lijn);background:#fff;border-radius:100px;padding:12px 20px;font-family:inherit;font-weight:700;font-size:.94rem;color:var(--ink);cursor:pointer;transition:.15s}
.chip:hover{border-color:var(--paars);color:var(--paars);transform:translateY(-1px)}
.chip.sel{background:var(--paars);color:#fff;border-color:var(--paars)}
.quizresult{margin-top:18px;opacity:0;max-height:0;overflow:hidden;transition:opacity .4s,max-height .5s}
.quizresult.show{opacity:1;max-height:260px}
.quizresult .card{background:var(--paars-zacht);border-radius:16px;padding:22px 24px;display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.quizresult .card .txt{flex:1;min-width:220px}.quizresult .card p{color:#3f3a4d;margin-top:4px}.quizresult .card b{color:var(--paars)}
/* lead-magnet band */
.leadband{background:linear-gradient(160deg,var(--paars),var(--paars-diep));color:#fff;border-radius:32px;padding:54px 8%;position:relative;overflow:hidden}
.leadband .kicker{color:#ff8fc4}.leadband .kicker .smile{color:#ff8fc4}
.leadband h2{color:#fff;font-size:clamp(1.6rem,3vw,2.2rem);margin-bottom:10px;max-width:22ch}
.leadband p{color:#E4D9F3;max-width:52ch;margin-bottom:22px}
.leadform{display:flex;gap:10px;flex-wrap:wrap;max-width:540px;position:relative;z-index:2}
.leadform input{flex:1;min-width:220px;border:none;border-radius:12px;padding:15px 18px;font-family:inherit;font-size:1rem;color:var(--ink)}
.leadform input:focus{outline:none}
/* risico-omkering microcopy */
.reassure{font-size:.82rem;color:var(--grijs);margin-top:12px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.reassure.light{color:#cbbfe0}.reassure span{display:inline-flex;gap:5px;align-items:center}.reassure b{color:inherit;font-weight:700}
.reassure .ok{color:#2fbf6b;font-weight:800}
/* scan e-mail reveal */
.emailrow{display:flex;gap:10px;margin-top:12px;opacity:0;max-height:0;overflow:hidden;transition:opacity .4s,max-height .5s}
.emailrow.show{opacity:1;max-height:120px}
.emailrow input{flex:1;min-width:0;border:none;border-radius:10px;padding:12px 14px;font-family:inherit;font-size:.95rem;color:var(--ink)}
.emailrow input:focus{outline:none}
/* hero sitecheck-dashboard (optie A) */
.hero-visual .dash{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:20px;padding:26px;width:100%;max-width:460px;margin:0 auto;backdrop-filter:blur(4px);box-shadow:var(--schaduw)}
.dbar{display:flex;gap:6px;align-items:center;margin-bottom:18px}.dbar i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.4)}.dbar span{margin-left:6px;color:#cbbfe0;font-family:'JetBrains Mono',monospace;font-size:.74rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drow{display:flex;gap:18px;align-items:center;margin-bottom:18px}
.dgauge{width:118px;height:118px;position:relative;flex:0 0 auto}.dgauge .dval{position:absolute;inset:0;display:grid;place-items:center;font-weight:800;font-size:1.9rem;color:#fff}
.drow b{color:#fff;font-size:1.04rem}.drow small{display:block;color:#cbbfe0;font-size:.83rem;margin-top:2px}
.dfind{list-style:none;display:flex;flex-direction:column;gap:11px}
.dfind li{display:flex;gap:10px;align-items:center;font-size:.9rem;color:#E4D9F3}
.dfind .dd{width:14px;height:14px;border-radius:50%;flex:0 0 auto}.dfind .g{background:#28c840}.dfind .a{background:#febc2e}
/* wachtstand (leeg) */
.dwait{display:flex;align-items:center;gap:12px;background:rgba(255,143,196,.1);border:1.5px dashed rgba(255,143,196,.55);border-radius:14px;padding:14px 16px;color:#fff;font-weight:700;font-size:.92rem}
.dwait b{color:#ff8fc4}
.dwait.gone{display:none}
.darrow{width:36px;height:22px;flex:0 0 auto}.arrow-up{display:none;width:22px;height:34px}
.dash.done .dwait,.dash.done .dspin{display:none}
.dash.waiting .dfind{display:none}
.dash.waiting .dval{color:#cbbfe0}
@media(max-width:900px){.arrow-left{display:none}.arrow-up{display:inline-block}}
@media(max-width:900px){.hero-visual .dash{max-width:100%}}
@media (prefers-reduced-motion: no-preference){
  .dash.waiting .dspin{animation:dspin 1.5s linear infinite;transform-origin:60px 60px}
  @keyframes dspin{to{transform:rotate(360deg)}}
  .dash.waiting .arrow-left{animation:arrL 1.1s ease-in-out infinite}@keyframes arrL{0%,100%{transform:translateX(0)}50%{transform:translateX(-6px)}}
  .dash.waiting .arrow-up{animation:arrU 1.1s ease-in-out infinite}@keyframes arrU{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
}
/* bewijs-band met route-sfeer (optie C) */
.proofband{background:linear-gradient(160deg,var(--paars),var(--paars-diep));color:#fff;border-radius:32px;padding:48px 6%;position:relative;overflow:hidden}
.proofbg{position:absolute;inset:0;width:100%;height:100%}
.proofgrid{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
.proofgrid .stat{background:transparent;padding:0;border-radius:0;min-width:0}
.proofgrid .stat .n{font-weight:800;font-size:clamp(2rem,4vw,3rem);letter-spacing:-.03em;color:#fff;line-height:1}
.proofgrid .stat .n span{color:var(--geel);font-size:.7em}
.proofgrid .stat .l{color:#D6CCE6;font-size:.9rem;margin-top:6px}
@media(max-width:700px){.proofgrid{grid-template-columns:1fr 1fr;gap:30px 16px}}
.dtabs{display:flex;gap:6px;background:rgba(255,255,255,.08);border-radius:100px;padding:4px;margin-bottom:16px;width:fit-content}
.dtab{font-family:inherit;font-weight:700;font-size:.8rem;color:#cbbfe0;background:none;border:none;padding:7px 17px;border-radius:100px;cursor:pointer;transition:.2s}
.dtab:hover{color:#fff}
.dtab.on{background:#fff;color:var(--paars)}
.submeters{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0 4px}
.sm{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);border-radius:12px;padding:10px 12px}
.sm .smtop{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.sm .sml{font-size:.76rem;font-weight:600;color:#cbbfe0}
.sm .smv{font-weight:800;font-size:1.15rem;color:#fff;font-variant-numeric:tabular-nums}
.sm .smbar{display:block;height:5px;border-radius:4px;background:rgba(255,255,255,.14);margin-top:8px;overflow:hidden}
.sm .smbar i{display:block;height:100%;width:0;border-radius:4px;background:#ff8fc4;transition:width .9s cubic-bezier(.2,.7,.3,1)}
.sm[data-band=good] .smbar i{background:#28c840}.sm[data-band=mid] .smbar i{background:#febc2e}.sm[data-band=bad] .smbar i{background:#ff6a8a}
.sm.pending .smv{color:#8f83ad}
.dash.busy .sm.pending .smbar i{width:34%;background:rgba(255,255,255,.28);animation:smsweep 1.3s ease-in-out infinite}
@keyframes smsweep{0%,100%{transform:translateX(-100%)}50%{transform:translateX(190%)}}
.dfind li{animation:fadeup .45s both}
.dfind .dd.b{background:#ff6a8a}.dfind .dd.s{background:rgba(255,255,255,.4)}
.dfind li.pending{color:#a99cc4}
@keyframes fadeup{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
.dlock[hidden]{display:none}
.dlock{display:flex;gap:12px;align-items:flex-start;margin-top:16px;padding:14px 15px;border-radius:14px;background:rgba(255,255,255,.07);border:1px dashed rgba(255,255,255,.28);color:#fff}
.dlock svg{width:22px;flex:0 0 auto;color:var(--geel);margin-top:1px}
.dlock b{display:block;font-size:.92rem}
.dlock small{display:block;color:#cbbfe0;font-size:.8rem;margin-top:2px}
@media(max-width:600px){.submeters{grid-template-columns:1fr}}
@media(max-width:600px){.scanrow,.emailrow,.leadform{flex-direction:column}.scanrow>.btn,.emailrow>.btn,.leadform>.btn{width:100%}}
.sldots{display:none}
@media(max-width:760px){
  .sldots{display:flex!important;align-items:center;gap:12px;margin:-4px 0 0;padding:0 2px}
  .sldots[hidden]{display:none!important}
  .slcue{display:inline-flex;align-items:center;gap:6px;font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--magenta-tekst);transition:opacity .3s}
  .slcue svg{width:26px;color:var(--magenta)}
  .sldots.moved .slcue{opacity:0}
  .sldotrow{display:flex;gap:7px;align-items:center}
  .sldotrow{gap:0}
  .sldot{width:24px;height:24px;padding:0;border:none;background:none;cursor:pointer;display:grid;place-items:center}
  .sldot::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--lijn);transition:.25s}
  .sldot.on::before{background:var(--magenta);width:20px;border-radius:5px}
  .hero .sldot::before{background:rgba(255,255,255,.28)}.hero .sldot.on::before{background:#ff8fc4}
}
@media (prefers-reduced-motion:no-preference){.slcue svg{animation:slnudge 1.8s ease-in-out infinite}@keyframes slnudge{0%,100%{transform:translateX(-3px)}50%{transform:translateX(3px)}}}
/* ===== mobiel: compacter + horizontale sliders ===== */
@media(max-width:760px){
  .sec{padding:58px 0}
  .hero{padding:calc(20px + 88px) 0 62px}
  .submeters{grid-template-columns:1fr 1fr!important}
  /* sliders: kaartrijen naast elkaar i.p.v. onder elkaar */
  .step:not(:last-child)::after{width:calc(100% - 48px)}
  .sporen,.grid3,.steps,.tgrid,.usprow{display:grid!important;grid-auto-flow:column!important;grid-auto-columns:84%!important;grid-template-columns:none!important;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;gap:14px!important;margin:26px -28px 0!important;padding:4px 28px 14px!important;scrollbar-width:none}
  .sporen::-webkit-scrollbar,.grid3::-webkit-scrollbar,.steps::-webkit-scrollbar,.tgrid::-webkit-scrollbar,.usprow::-webkit-scrollbar{display:none}
  .sporen>*,.grid3>*,.steps>*,.tgrid>*,.usprow>*{scroll-snap-align:center;min-height:0}
  .hart .artvisual,.hart .art svg{max-width:180px!important;margin:0 auto}
  .dcard .viewport{height:230px}
  .dcard .viewport:hover img{transform:translateY(calc(230px - 100%))}
  .stats{grid-template-columns:repeat(3,1fr)!important;gap:8px}
  .stats div{padding:10px}
  .stats b{font-size:1.05rem}
  .stats small{font-size:.76rem}
  .dcard .phone{width:96px;right:14px;bottom:-14px}
  .spoor{min-height:0;padding:28px 24px}
  /* cases: logboek weg, stapel blijft */
  .caselayout{display:flex!important;flex-direction:column;gap:18px!important}
  .caselayout>div:last-child{order:-1}
  .log{display:none}
  .dragcue .cue-desk{display:none}
  .dragcue .cue-mob{display:block}
  .dragcue{margin-bottom:0;padding:13px 15px}
  .dcard .body{padding:24px 20px 20px}
  .stats{gap:8px}
  .stats b{font-size:1.1rem}
  .btn{padding:12px 19px;font-size:.88rem;white-space:nowrap}
  .btn.primary{padding:13px 20px}

  .dash .dwait{display:none}
  .scanhint{display:flex!important}
  h1{font-size:clamp(1.9rem,8vw,2.4rem)!important}
  .sec h2{font-size:clamp(1.6rem,6.5vw,2rem)}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .rail .marker{transition:none}
  .reveal{opacity:1;transform:none;transition:none}
  .slcue svg,.dragcue .cuehand,.guidehint,.guidehint .ghgrab{animation:none!important}
  .dfind li{animation:none!important}
  .dash.busy .sm.pending .smbar i{animation:none!important;width:34%}
  .sm .smbar i,.dcard,#scoreArc,.dcard .viewport img{transition:none!important}
}

/* scanpaneel: donkere kaart, zodat de licht-op-donker stijlen kloppen */
.dash.dashcard{background:linear-gradient(160deg,#3b1f6b,#2b1550);border:1px solid rgba(255,255,255,.14);border-radius:22px;padding:26px;box-shadow:0 18px 50px rgba(43,21,80,.28)}
.dash.dashcard .dbar{border-bottom:1px solid rgba(255,255,255,.12);padding-bottom:14px}
.dash.dashcard .drow b{font-size:1.12rem}
.dash.dashcard .dval{font-size:2.1rem}
.dlegend{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.12)}
.dlegend span{display:flex;align-items:center;gap:7px;font-size:.78rem;color:#e0d6f2}
.dlegend i{width:10px;height:10px;border-radius:50%;flex:0 0 auto}
.dlegend .g{background:#28c840}.dlegend .a{background:#febc2e}.dlegend .b{background:#ff6a8a}
.demotag{display:inline-block;margin-top:12px;font-size:.74rem;font-weight:700;letter-spacing:.02em;color:#2b1550;background:var(--geel);border-radius:100px;padding:4px 11px}
.dhow{margin-top:14px;font-size:.82rem;color:#e0d6f2;line-height:1.55}

.scangrid{display:grid;grid-template-columns:1fr;gap:40px;align-items:start}
@media(min-width:1040px){.scangrid{grid-template-columns:1fr 1fr}}
@media(max-width:900px){.scanrow,.emailrow{flex-direction:column}.scanrow>.btn,.emailrow>.btn{width:100%}}
.scanrow input,.emailrow input{min-width:0}
/* smalle kaart: knop onder het veld i.p.v. eruit lopen */
.dtop .scanrow,.dash .emailrow{flex-wrap:wrap}
.dtop .scanrow input,.dash .emailrow input{flex:1 1 12ch}
.dtop .scanrow>.btn,.dash .emailrow>.btn{flex:1 1 auto}

/* CTA na de scan */
.fixband{background:linear-gradient(180deg,#fff 0%,#faf7fd 100%);padding:0 0 8px;opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.fixband.in{opacity:1;transform:none}
.fixcard{display:grid;grid-template-columns:1fr 300px;gap:34px;align-items:center;margin:-34px 0 34px;background:#fff;border:1px solid var(--lijn);border-radius:26px;padding:32px 34px;box-shadow:0 22px 50px rgba(58,26,92,.13)}
.fixcard h2{margin:8px 0 10px;font-size:clamp(1.7rem,3.2vw,2.5rem);line-height:1.1}
.fixcard .hl{color:var(--paars);word-break:break-word}
.fixcard>.fixtxt>p{margin:0;color:var(--grijs);max-width:52ch}
.fixlist{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.fixlist li{display:flex;align-items:flex-start;gap:10px;font-size:.95rem;color:var(--ink)}
.fixlist li.more{color:var(--grijs);font-size:.88rem;padding-left:24px}
.fixlist .fx{flex:0 0 auto;width:14px;height:14px;margin-top:4px;border-radius:50%;background:#fdeaf3;border:2px solid #ff8fc4;position:relative}
.fixlist .fx::after{content:"";position:absolute;inset:3px;border-radius:50%;background:#ff8fc4}
.fixact{display:flex;flex-direction:column;gap:10px;align-items:stretch;padding-left:28px;border-left:1px solid var(--lijn)}
.fixscore{display:flex;align-items:baseline;gap:8px;margin-bottom:4px}
.fixscore b{font-size:2.8rem;line-height:1;font-weight:800;letter-spacing:-.02em}
.fixscore b.goed{color:#1f8a5c}.fixscore b.matig{color:#b26a00}.fixscore b.slecht{color:#b3253c}
.fixscore small{color:var(--grijs)}
.fixact .btn.wide{width:100%;justify-content:center;text-align:center}
.fixact .reassure{margin-top:4px;font-size:.82rem;flex-wrap:wrap;gap:6px 14px}
@media (max-width:900px){
  .fixcard{grid-template-columns:1fr;gap:22px;padding:24px 20px;margin:-20px 0 26px;border-radius:20px}
  .fixact{padding-left:0;border-left:0;border-top:1px solid var(--lijn);padding-top:18px}
  .fixscore{margin-bottom:8px}
}
@media (prefers-reduced-motion:reduce){.fixband{transition:none}}

/* samengevoegde onderhoudsectie: tabs */
.mtabs{display:flex;gap:8px;margin:0 0 22px;flex-wrap:wrap}
.mtab{font:inherit;font-weight:700;font-size:.94rem;color:var(--grijs);background:#fff;border:1px solid var(--lijn);border-radius:100px;padding:11px 20px;cursor:pointer;transition:background .18s,color .18s,border-color .18s}
.mtab:hover{color:var(--paars);border-color:#d9cfe8}
.mtab.on{background:var(--paars);border-color:var(--paars);color:#fff}
.mtab:focus-visible{outline:3px solid #ff8fc4;outline-offset:2px}

/* pakket-teaser */
.pkgteaser{display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center;background:#faf7fd;border:1px solid var(--lijn);border-radius:24px;padding:30px 32px}
.pkgteaser h2{margin:8px 0 8px;font-size:clamp(1.5rem,2.8vw,2.1rem)}
.pkgteaser p{margin:0;color:var(--grijs);max-width:56ch}
.pkgact{display:flex;flex-direction:column;gap:10px;min-width:220px}
.pkgact .btn{justify-content:center;text-align:center}

/* eu-blok compact */
.usprow.slim{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:6px 0 22px}
.uspchip{display:inline-flex;align-items:center;gap:8px;background:var(--grijs-licht);border:1px solid var(--lijn);color:var(--paars);font-weight:700;font-size:.9rem;padding:9px 16px;border-radius:100px}

@media (max-width:900px){
  .pkgteaser,.bcband{grid-template-columns:1fr;padding:24px 20px;border-radius:20px}
  .pkgact,.bcact{min-width:0}
  .bcalt{padding-right:0;border-right:0;border-bottom:1px solid rgba(255,255,255,.18);padding-bottom:14px}
}

/* mozaïek: wie wij zijn */
.mozaiek{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:minmax(190px,auto) minmax(152px,auto);gap:12px;margin-top:30px}
.mz{border-radius:20px;padding:20px 22px;border:1px solid var(--lijn);background:#fff;position:relative;overflow:hidden}
.mz-gids{grid-column:1/3;grid-row:1;display:flex;flex-direction:column;justify-content:center;gap:6px;background:linear-gradient(150deg,#2c1b48 0%,#46265f 100%);border-color:transparent;color:#fff}
.mz-gids h3{margin:8px 0 6px;color:#fff;font-size:clamp(1.15rem,1.9vw,1.5rem);line-height:1.18}
.mz-gids p{margin:0 0 10px;color:#d6cce6;max-width:44ch;font-size:.92rem;line-height:1.45}
.mzk{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:.76rem;letter-spacing:.09em;text-transform:uppercase;color:#f1b318}
.mzk.light{color:var(--paars)}
.mz-eu{grid-column:3/5;grid-row:1;background:var(--grijs-licht)}
.mz-eu h3{margin:8px 0 6px;font-size:clamp(1.1rem,1.7vw,1.35rem);line-height:1.2}
.mz-eu p{margin:0 0 10px;color:var(--grijs);max-width:52ch;font-size:.92rem;line-height:1.45}
.mzglobe{position:absolute;right:-26px;top:-26px;width:120px;height:120px;fill:none;stroke:var(--paars);stroke-width:1.2;opacity:.13}
.mz .lnk{font-weight:800;color:var(--magenta)}
.mz-gids .lnk{color:#ff8fc4}
.mz-gids .lnk:hover{color:#fff}
.mz .lnk.light{color:var(--paars)}
.mzrow{display:contents}
.mozaiek .mz-cijfer{grid-row:2;grid-column:span 2}
.mz-cijfer{display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;gap:4px;min-height:130px;font:inherit;text-align:left;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.mz-cijfer:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(58,26,92,.13);border-color:#d9cfe8}
.mz-cijfer:focus-visible{outline:3px solid #ff8fc4;outline-offset:2px}
.mz-cijfer .mzmeer{display:block;margin-top:8px;color:var(--paars);font-size:.94rem;line-height:1.42;font-weight:600;text-wrap:pretty}
.mz-cijfer{position:relative}
@media (hover:hover){
  .mz-cijfer .mzmeer{position:absolute;left:20px;right:20px;bottom:18px;top:18px;margin:0;display:flex;align-items:center;font-size:.9rem;line-height:1.38;opacity:0;transform:translateY(8px);transition:opacity .2s ease,transform .2s ease;pointer-events:none}
  .mz-cijfer::after{content:"";position:absolute;inset:0;background:#fff;opacity:0;transition:opacity .2s ease;pointer-events:none}
  .mz-cijfer.accent::after{background:#fdf4e2}
  .mz-cijfer:hover::after,.mz-cijfer:focus-visible::after{opacity:.97}
  .mz-cijfer:hover .mzmeer,.mz-cijfer:focus-visible .mzmeer{opacity:1;transform:none}
  .mz-cijfer:hover .mzplus,.mz-cijfer:focus-visible .mzplus{opacity:0}
  .mzplus{transition:opacity .18s ease}
  .mz-cijfer .mzplus{z-index:3}
  .mz-cijfer .mzmeer{z-index:2}
}
@media (hover:none){.mzplus{display:none}.mz-cijfer{cursor:default}}
.mz-cijfer:hover,.mz-cijfer:focus-visible{z-index:2}
.mzplus{position:absolute;top:16px;right:18px;width:22px;height:22px;border-radius:50%;background:var(--grijs-licht);border:1px solid var(--lijn)}
.mzplus::before,.mzplus::after{content:"";position:absolute;background:var(--paars);border-radius:2px}
.mzplus::before{left:5px;right:5px;top:calc(50% - 1px);height:2px}
.mzplus::after{top:5px;bottom:5px;left:calc(50% - 1px);width:2px;transition:transform .25s ease}
.mz-cijfer.accent .mzplus{background:#fbecd0;border-color:#f0dcb0}
.mz-cijfer.accent .mzplus::before,.mz-cijfer.accent .mzplus::after{background:#8a5d00}
.mz-cijfer b{font-size:clamp(1.7rem,2.9vw,2.3rem);line-height:1;font-weight:800;letter-spacing:-.03em;color:var(--paars)}
.mz-cijfer b span{color:var(--magenta);font-size:.6em;vertical-align:super}
.mz-cijfer small{color:var(--ink);font-size:.86rem;line-height:1.3;font-weight:700}
.mz-cijfer.accent{background:#fdf4e2;border-color:#f4e3bd}
.mz-cijfer.accent b{color:#8a5d00}
.mz-cijfer.accent b span{color:#f1b318}

/* basiskamp als pop-up rechtsonder */
.bcpop{position:fixed;right:18px;bottom:88px;z-index:60;width:min(320px,calc(100vw - 36px));background:linear-gradient(150deg,#2c1b48 0%,#46265f 100%);color:#fff;border-radius:20px;padding:20px 22px 22px;box-shadow:0 22px 50px rgba(20,8,40,.42);opacity:0;transform:translateY(14px) scale(.97);transition:opacity .3s ease,transform .3s ease}
.bcpop.in{opacity:1;transform:none}
.bcpop p{margin:8px 0 14px;font-size:.94rem;color:#e2d9ee;line-height:1.45}
.bck{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:.74rem;letter-spacing:.09em;text-transform:uppercase;color:#f1b318}
.bck .smile{width:20px;height:11px;color:#f1b318}
.bcpopact{display:flex;flex-direction:column;gap:9px}
.bcpopact .btn{justify-content:center;width:100%}
.bcmail{font-size:.85rem;color:#d6cce6;text-align:center;font-weight:700}
.bcmail:hover{color:#fff}
.bcclose{position:absolute;top:8px;right:10px;width:30px;height:30px;border:0;background:transparent;color:#c4b6d8;font-size:1.35rem;line-height:1;cursor:pointer;border-radius:50%}
.bcclose:hover{background:rgba(255,255,255,.12);color:#fff}
.bcclose:focus-visible{outline:2px solid #ff8fc4;outline-offset:2px}

@media (max-width:1000px){
  .mozaiek{grid-template-columns:repeat(2,1fr);grid-template-rows:none;grid-auto-rows:minmax(112px,auto)}
  .mz-gids,.mz-eu,.mozaiek .mz-cijfer:nth-of-type(n){grid-column:auto;grid-row:auto}
  .mz-gids,.mz-eu{grid-column:span 2}
}
@media (max-width:620px){
  .mozaiek{grid-template-columns:1fr}
  .mz-gids,.mz-eu{grid-column:span 1}
  .bcpop{right:12px;left:12px;bottom:78px;width:auto}
}
@media (prefers-reduced-motion:reduce){.bcpop{transition:none}}

.intro.one{max-width:none}

/* onderhoud: rapport naast werkwijze */
.ondgrid{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:stretch}
.werkcol{background:#faf7fd;border:1px solid var(--lijn);border-radius:22px;padding:26px 28px}
.werkcol h3{margin:0 0 6px}
.werkcol>p{margin:0 0 18px;color:var(--grijs);font-size:.93rem}
.werklijst{list-style:none;margin:0;padding:0;counter-reset:w;display:flex;flex-direction:column;gap:0}
.werklijst li{counter-increment:w;position:relative;padding:0 0 18px 44px;display:flex;flex-direction:column;gap:3px}
.werklijst li::before{content:counter(w,decimal-leading-zero);position:absolute;left:0;top:0;width:30px;height:30px;border-radius:50%;background:var(--paars);color:#fff;font-weight:800;font-size:.78rem;display:flex;align-items:center;justify-content:center}
.werklijst li::after{content:"";position:absolute;left:15px;top:32px;bottom:2px;width:2px;background:repeating-linear-gradient(180deg,#d9cfe8 0 4px,transparent 4px 9px)}
.werklijst li:last-child{padding-bottom:0}
.werklijst li:last-child::after{display:none}
.werklijst b{font-size:1rem}
.werklijst span{color:var(--grijs);font-size:.9rem;line-height:1.45}
@media (max-width:900px){.ondgrid{grid-template-columns:1fr}.werkcol{padding:22px 20px}}

/* onderhoud: kaarten gelijk */
.ondgrid>.panel,.ondgrid .werkcol{height:100%}
.ondgrid>.panel{background:#fff;border:1px solid var(--lijn);border-radius:22px;padding:26px 28px;display:flex;flex-direction:column;justify-content:center}
.ondgrid .gauge-card{box-shadow:none;border:0;padding:0;background:transparent}

/* maandrapport */
.pantop{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:18px}
.pantop h3{margin:0}
.panmaand{font-size:.78rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--magenta-tekst)}
.panvoet{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--lijn);color:var(--grijs);font-size:.88rem;line-height:1.45}
.ondgrid .checks{gap:9px}
.ondgrid .checks li{font-size:.9rem}
.ondgrid .pkgteaser,.pkgteaser{margin-top:20px}

/* mobiel: cijfertegels als slider */
@media(max-width:760px){
  .mzrow{display:grid!important;grid-auto-flow:column!important;grid-auto-columns:74%!important;grid-template-columns:none!important;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;padding:2px}
  .mzrow::-webkit-scrollbar{display:none}
  .mzrow>*{scroll-snap-align:center;grid-row:auto!important;grid-column:auto!important}
  .mozaiek{grid-template-columns:1fr;grid-template-rows:none;grid-auto-rows:minmax(0,auto)}
  .mz-gids,.mz-eu{grid-column:1/-1}
}

/* reviews als prikbordkaarten */
.rev-btn:disabled{opacity:.35;cursor:default}
.rev-btn:disabled:hover{transform:none;border-color:var(--lijn);color:var(--paars)}
@media(max-width:900px){.revcards>.revcard{flex-basis:calc((100% - 18px)/2)}}
@media(max-width:620px){.revcards>.revcard{flex-basis:86%}}
.revstars{color:#8a5d00;letter-spacing:3px;font-size:.82rem;margin-bottom:14px}

/* meter-uitleg in het maandrapport */
.kgcap{font-size:.78rem;color:var(--grijs);line-height:1.35;max-width:18ch;margin-top:8px}

/* contactformulier als klim */
.klimbar{grid-column:1/-1;position:relative;height:8px;border-radius:100px;background:rgba(255,255,255,.16);margin:14px 0 8px}
.klimfill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:100px;background:linear-gradient(90deg,#ff8fc4,#f1b318);transition:width .35s ease}
.klimalt{position:absolute;right:0;top:12px;font-size:.74rem;font-weight:800;letter-spacing:.08em;color:#f1b318}
.klimalt.top::after{content:" · de top"}
.klimform .fld span{display:flex;align-items:center;gap:9px}
.klimform .fld span i{flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.12);color:#ff8fc4;font-style:normal;font-size:.7rem;font-weight:800;display:grid;place-items:center}
.klimform .fld:focus-within span i{background:#ff8fc4;color:#2c1b48}

}

/* contactblok: één open kolom */
.summit-open{max-width:640px;margin:0 auto;text-align:left}
.summit-open .kicker{justify-content:flex-start}
.summit-open h2{font-size:clamp(2rem,4.4vw,3.1rem)}
.summit-open>div>p{max-width:60ch}

/* klimbalk met meeklimmende gids */
.klimpin{position:absolute;top:-24px;left:0;width:19px;height:24px;transform:translateX(-50%);transition:left .35s cubic-bezier(.3,.8,.3,1);filter:drop-shadow(0 4px 8px rgba(20,8,40,.5))}
.klimpin svg{width:100%;height:100%;display:block}
.klimzeg{grid-column:1/-1;margin:0 0 22px;font-size:.84rem;font-weight:700;color:#f1b318;letter-spacing:.01em}
.revmeer{margin:26px 0 0;text-align:center}
.revmeer a{font-weight:800;color:var(--magenta)}
@media (prefers-reduced-motion:reduce){.klimpin{transition:none}}

/* tweede uitgang: stille regel, geen kaart */
.geensite{margin:0;font-size:.92rem;color:#c9bcdd}
.geensite a{color:#f1b318;font-weight:700;text-decoration:none;border-bottom:1px solid rgba(241,179,24,.45)}
.geensite a:hover{color:#fff;border-bottom-color:#fff}

/* scanveld en meters in één kaart */
.dtop{padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid rgba(255,255,255,.14)}
.dtop .flabel{display:block;margin-bottom:8px}
.dtop .scanrow{margin-bottom:9px}
.dtop .hint{display:block;color:#cabfe0;font-size:.76rem;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dash .emailrow{margin-top:18px}
.dash .reassure{margin-top:12px;flex-wrap:nowrap;gap:10px;font-size:.76rem}
.dash .reassure span{white-space:nowrap}
.dash .reassure .ok{font-size:.82rem}
@media(max-width:900px){.hero-visual .dash{max-width:100%}}

/* route: vraag en kaarten in één blok */
.routebox{background:#fff;border:1px solid var(--lijn);border-radius:26px;box-shadow:0 18px 44px -26px rgba(46,26,77,.4);padding:26px 28px 28px;margin-top:26px;position:relative;z-index:6}
.routebox .qlabel{background:var(--grijs-licht);border-radius:14px;padding:12px 16px;font-weight:800;font-size:1.05rem;margin-bottom:14px;display:flex;gap:9px;align-items:center}
.routebox .qlabel .smile{width:18px}
.routebox .sporen{margin-top:22px;padding-top:22px;border-top:1px solid var(--lijn);gap:14px;grid-template-columns:repeat(3,1fr)}
.routebox .spoor{background:var(--grijs-licht);box-shadow:none;border-radius:18px;padding:20px 22px;min-height:0}

.routebox .spoor::before{display:none}
.routebox .spoor .smile{width:26px;margin-bottom:9px}
.routebox .spoor h3{font-size:1.14rem;margin:5px 0 7px}
.routebox .spoor p{font-size:.9rem;line-height:1.45}
.routebox .spoor .btn{margin-top:16px;padding:10px 14px;font-size:.85rem}
.routebox .spoor:hover{transform:none;box-shadow:none}
.routebox .spoor:hover h3{color:var(--c)}
.routebox .spoor.hl{border-radius:16px;transform:none;box-shadow:0 0 0 2px var(--c) inset}
.routebox .spoor.hl{background:#fff}
.routebox .spoor.hl h3{color:var(--ink)}
.routebox .spoor.hl p{color:var(--grijs)}
.routebox .spoor.hl .k{color:var(--c)}
.routebox .spoor.hl .smile{color:var(--c)}
.routebox .spoor.hl .btn{background:var(--c);color:#fff;border-color:var(--c)}
.routebox .spoor.switch .k{color:#8a5d00}
.routebox .spoor.switch .smile,.routebox .spoor.switch.hl .smile{color:var(--geel)}
.routebox .spoor.switch:hover h3{color:#8a5d00}
.routebox .spoor.switch.hl .btn{color:var(--ink)}
.routebox .spoor.hl .btn:hover{filter:brightness(1.08)}
@media(max-width:820px){.routebox .sporen{grid-template-columns:1fr;gap:12px}}
.dhost{font-family:'JetBrains Mono',monospace;font-size:.74rem!important;color:#ff8fc4!important;margin-bottom:1px}
.herobelofte{margin:0 0 18px;font-size:.86rem}

/* hero: vlakke kleur met hoogtelijnen als handtekening */
.hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='760' viewBox='0 0 1200 760'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.6' opacity='0.07'%3E%3Cpath d='M-40 700 C 200 640 340 660 520 590 C 700 520 860 540 1240 450'/%3E%3Cpath d='M-40 640 C 200 580 350 600 530 528 C 710 456 870 476 1240 386'/%3E%3Cpath d='M-40 580 C 210 518 360 538 540 466 C 720 394 880 414 1240 322'/%3E%3Cpath d='M-40 520 C 220 456 372 476 552 404 C 732 332 892 352 1240 258'/%3E%3Cpath d='M-40 460 C 230 394 384 414 564 342 C 744 270 904 290 1240 194'/%3E%3Cpath d='M-40 400 C 240 332 396 352 576 280 C 756 208 916 228 1240 130'/%3E%3Cpath d='M-40 340 C 250 270 408 290 588 218 C 768 146 928 166 1240 66'/%3E%3Cpath d='M-40 280 C 260 208 420 228 600 156 C 780 84 940 104 1240 2'/%3E%3C/g%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right -60px top -40px;background-size:1200px 760px}
.hero::after{content:"";position:absolute;left:-14%;top:-24%;width:56%;height:78%;z-index:0;pointer-events:none;background:radial-gradient(closest-side,rgba(255,143,196,.13),transparent 72%)}
.secroute{padding-top:62px}
@media(max-width:760px){.secroute{padding-top:40px}}
/* navknoppen compacter dan de knoppen in de pagina */
.nav-cta .btn{padding:10px 18px;font-size:.86rem}

/* dienstenmenu: rustige lijst */
.megamenu{width:326px;left:-14px;padding:10px}
.mmgrid{display:flex;flex-direction:column;gap:2px}
.mmcard{--c:var(--paars);display:grid!important;grid-template-columns:auto 1fr auto;align-items:center;column-gap:12px;background:none;border:none;border-radius:12px;padding:10px 12px!important}
.mmcard.build{--c:var(--paars)}.mmcard.care{--c:var(--magenta)}.mmcard.host{--c:var(--paars-diep)}
.mmcard:hover{background:var(--grijs-licht)}
.mmcard .smile{display:none}
.megamenu .mmcard b{grid-column:2;grid-row:1;font-size:.94rem;color:var(--ink)}
.megamenu .mmcard small{grid-column:2;grid-row:2;margin-top:1px;font-size:.76rem;color:var(--grijs)}
.mmcard:hover b{color:var(--c)}
.mmp{grid-column:3;grid-row:1/3;align-self:center;margin:0;font-size:.74rem;font-weight:700;color:var(--grijs);white-space:nowrap}
.megamenu .alle{margin-top:8px;padding-top:8px;text-align:left;border-top:1px solid var(--lijn)}
.megamenu .alle a{display:block;font-weight:700;color:var(--magenta-tekst);font-size:.82rem;padding:9px 12px;border-radius:10px;white-space:nowrap;overflow:visible}
.megamenu .alle a:hover{background:var(--grijs-licht);color:var(--paars)}
html.dark .mmcard:hover{background:#2A2140}
html.dark .megamenu .mmcard b{color:var(--ink)}
@media(max-width:1000px){
  .megamenu{width:auto;padding:6px 0}
  .mmcard{padding:11px 2px!important}
  .mmcard small{display:none}
  .megamenu .alle{text-align:left}
}


/* case: klanttype, vertrekpunt, onze rol */
.cmeta{margin:0 0 9px;font-size:.76rem;font-weight:700;letter-spacing:.02em;color:var(--grijs)}
.cfeiten{display:grid;grid-template-columns:1fr 1px 1fr;gap:0;margin:0 0 16px;padding:0;background:var(--grijs-licht);border-radius:16px;overflow:hidden}
.cfeiten::before{content:"";grid-column:2;grid-row:1/3;background:linear-gradient(180deg,transparent,var(--lijn) 18%,var(--lijn) 82%,transparent)}
.cfeiten dt{display:flex;align-items:center;gap:7px;font-size:.67rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--grijs);padding:14px 16px 0}
.cfeiten dt::before{content:"";width:16px;height:16px;border-radius:5px;flex:0 0 auto;background:var(--roze-zacht) no-repeat center/9px 9px}
.cfeiten dt:nth-of-type(1){grid-column:1;grid-row:1}
.cfeiten dt:nth-of-type(1)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 11V1l7 2-7 2' fill='none' stroke='%23E61672' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.cfeiten dt:nth-of-type(2){grid-column:3;grid-row:1}
.cfeiten dt:nth-of-type(2)::before{background-color:var(--paars-zacht);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1 10l4.5-8L8 6.5 9.4 4 11 10z' fill='none' stroke='%234A2A80' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E")}
.cfeiten dd{margin:0;padding:6px 16px 14px;font-size:.85rem;line-height:1.45;color:#3f3a4d;text-wrap:pretty}
.cfeiten dd:nth-of-type(1){grid-column:1;grid-row:2}
.cfeiten dd:nth-of-type(2){grid-column:3;grid-row:2}
@media(max-width:600px){
  .cfeiten{grid-template-columns:1fr}
  .cfeiten::before{display:none}
  .cfeiten dt,.cfeiten dd{grid-column:1!important;grid-row:auto!important}
  .cfeiten dd:nth-of-type(1){padding-bottom:12px;border-bottom:1px solid var(--lijn);margin-bottom:2px}
}

.stats .voorna b{font-size:1.05rem;white-space:nowrap}
.stats .voorna b span{color:var(--magenta-tekst);margin:0 2px}

@media(max-width:760px){.stats{grid-template-columns:1fr 1fr}.stats .voorna{grid-column:1/-1}.cfeiten{grid-template-columns:1fr;row-gap:3px}.cfeiten dt{margin-top:8px}}
.viewport.noshot{display:grid;place-items:center;background:var(--grijs-licht);text-align:center;padding:26px}
.viewport.noshot b{display:block;font-size:.95rem;color:var(--paars)}
.viewport.noshot small{font-size:.78rem;color:var(--grijs)}


/* live-knop op de casekaart */
.livebtn{display:inline-flex;align-items:center;gap:9px;margin-top:auto;align-self:flex-start;background:none;border:1px solid var(--lijn);color:var(--ink);border-radius:100px;padding:8px 15px 8px 13px;text-decoration:none;transition:border-color .2s,background .2s}
.livebtn:hover{border-color:var(--paars);background:var(--grijs-licht)}
.lvdot{width:7px;height:7px;border-radius:50%;background:#16a34a;flex:0 0 auto}
.lvtxt{display:flex;align-items:baseline;gap:7px;font-weight:700;font-size:.85rem;line-height:1.15;color:var(--ink)}
.lvtxt small{font-family:'JetBrains Mono',monospace;font-weight:400;font-size:.74rem;color:var(--grijs)}
.lvarr{font-size:.9rem;color:var(--grijs);transition:transform .18s}
.livebtn:hover .lvarr{transform:translateX(4px)}

.stats{margin-top:0;gap:10px}
.stats>div{padding:12px 13px}
.stats b{font-size:1.3rem}
.stats small{font-size:.76rem}
.dcard .phone{width:112px}
.deckbar+.dragcue{margin:14px 0 0}

/* pijlen alleen op mobiel: op desktop kiest men uit het logboek */
.deckbar{display:none}
@media(max-width:900px){.deckbar{display:flex;margin-top:20px}}
.deckbar+.dragcue{display:flex;width:100%;margin:62px 0 0;justify-content:center;opacity:.85}
.deckbar+.dragcue b,.deckbar+.dragcue small{font-size:.8rem}
.logmeer{margin:14px 0 0;padding-top:14px;border-top:1px solid var(--lijn);font-size:.84rem;line-height:1.5;color:var(--grijs);text-wrap:pretty}

/* casecijfers: gelijke kolommen, rustige uitlijning */
.dcard .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 16px;align-items:stretch}
.dcard .stats>div{display:flex;flex-direction:column;justify-content:flex-end;gap:3px;min-width:0;padding:13px 14px;background:var(--grijs-licht);border-radius:16px;text-align:left}
.dcard .stats b{display:block;font-size:1.22rem;line-height:1.1;letter-spacing:-.02em;color:var(--paars);font-variant-numeric:tabular-nums}
.dcard .stats .voorna b{font-size:1.02rem;white-space:nowrap}
.dcard .stats small{display:block;font-size:.74rem;line-height:1.3;color:var(--grijs);text-wrap:balance}
#werk>.wrap>.reveal h2{white-space:nowrap}
@media(max-width:560px){#werk>.wrap>.reveal h2{white-space:normal}}
#werk>.wrap>.reveal .intro{margin-bottom:0}
#werk .caselayout{margin-top:22px}

/* klantlogo in de dossierlijst; valt terug op de naam als er geen bestand is */
.llogo{width:164px;height:44px;justify-content:flex-start;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.llogo:empty{display:none}
.llogo img{max-width:100%;max-height:100%;object-fit:contain;filter:grayscale(1);opacity:.72;transition:filter .2s,opacity .2s}
.logitem:hover .llogo img,.logitem.on .llogo img{filter:none;opacity:1}
.llogo:not(:empty)+.ltxt .nm{position:absolute;left:-9999px}
.llogo:not(:empty)+.ltxt{padding-left:2px}
/* Contact staat op desktop al als knop rechts; de paneelkopie alleen op smalle schermen */
.navlinks [data-uit-cta]{display:none}
@media(max-width:1000px){.navlinks [data-uit-cta]{display:block}}

/* toegankelijkheid: zichtbare focus die overal werkt, ook op donker */
:focus-visible{outline:3px solid var(--magenta-tekst);outline-offset:3px;border-radius:6px}
.hero :focus-visible,footer :focus-visible,.summit :focus-visible,.config :focus-visible,.ctaband :focus-visible,.hart :focus-visible,.proofband :focus-visible,header.opdonker :focus-visible{outline-color:#ffd873}
.btn.primary:focus-visible{outline-color:var(--paars);outline-offset:3px}
.deck:focus-visible,.dcard .viewport:focus-visible{outline:3px solid var(--magenta-tekst);outline-offset:4px}
.sporen:focus-visible,.grid3:focus-visible,.steps:focus-visible,.usprow:focus-visible,.tgrid:focus-visible,.mzrow:focus-visible{outline:2px dashed var(--paars);outline-offset:6px}
/* de screenshot rolt ook bij focus, niet alleen bij hover */
.dcard .viewport:focus-visible img{transform:translateY(calc(250px - 100%))}
.dcard .viewport:focus-visible .scrollhint{opacity:0}
@media (prefers-reduced-motion:reduce){
  .dragcue .cuehand,.slcue svg,.blob,.route.marching,.flagbob,.rays{animation:none!important}
  .dcard .viewport img,.dcard .viewport:hover img,.dcard .viewport:focus-visible img{transition:none!important;transform:none!important}
}

/* contrast bijgesteld na doormeting (WCAG AA) */
.sm.pending .smv{color:#c3b8dd}
.routebox .spoor .k{color:#3a1f5e}
.routebox .spoor .btn{color:var(--magenta-tekst)}
.routebox .spoor.switch .btn{color:#8a5d00}
.lvtxt small,.lvarr{color:#4a4657}

/* ===== toegankelijkheidsknop ===== */
.a11ywidget{position:fixed;left:18px;bottom:18px;z-index:70;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.a11ybtn{display:grid;place-items:center;width:46px;height:46px;background:var(--paars);color:#fff;border:none;border-radius:50%;padding:0;font-family:inherit;cursor:pointer;box-shadow:0 16px 34px -18px rgba(46,26,77,.7);transition:background .2s,transform .18s}
.a11ybtn span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.a11ybtn:hover{background:var(--paars-diep);transform:translateY(-2px)}
.a11ybtn svg{width:19px;height:19px;flex:0 0 auto;fill:currentColor;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;fill:none}
.a11ybtn svg circle{fill:currentColor;stroke:none}
.a11ypaneel{width:288px;background:#fff;border:1px solid var(--lijn);border-radius:18px;padding:16px;box-shadow:0 30px 60px -26px rgba(46,26,77,.55)}
.a11ykop{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.a11ykop b{font-size:.95rem;color:var(--ink)}
.a11ysluit{background:none;border:none;font-size:1.35rem;line-height:1;color:var(--grijs);cursor:pointer;padding:0 2px}
.a11ysluit:hover{color:var(--ink)}
.a11yopt{display:flex;gap:11px;align-items:flex-start;padding:9px 10px;border-radius:12px;cursor:pointer;transition:background .15s}
.a11yopt:hover{background:var(--grijs-licht)}
.a11yopt input{width:18px;height:18px;margin-top:2px;accent-color:var(--magenta);flex:0 0 auto}
.a11yopt b{display:block;font-size:.88rem;color:var(--ink)}
.a11yopt small{display:block;font-size:.78rem;line-height:1.4;color:var(--grijs);margin-top:1px}
.a11yvoet{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;padding-top:12px;border-top:1px solid var(--lijn);font-size:.8rem}
.a11yreset{background:none;border:none;font-family:inherit;font-size:.8rem;font-weight:700;color:var(--grijs);cursor:pointer;padding:0;text-decoration:underline}
.a11yreset:hover{color:var(--ink)}
.a11yvoet a{font-weight:700;color:var(--magenta-tekst)}
@media(max-width:760px){.a11ywidget{left:14px}.a11ypaneel{width:min(288px,calc(100vw - 32px))}}

/* keuzes van de bezoeker */
html.a11y-groot{font-size:118%}
html.a11y-groot .btn{padding:14px 22px}
html.a11y-contrast:not(.dark){--grijs:#241f30;--lijn:#4a4458;--grijs-licht:#fff;--paars-zacht:#efe9fa;--roze-zacht:#ffeaf3}
html.a11y-contrast:not(.dark) body{color:#000;background:#fff}
html.a11y-contrast:not(.dark) p,html.a11y-contrast:not(.dark) li,html.a11y-contrast:not(.dark) dd,html.a11y-contrast:not(.dark) small,html.a11y-contrast:not(.dark) .intro,html.a11y-contrast:not(.dark) .cmeta,html.a11y-contrast:not(.dark) .mt,html.a11y-contrast:not(.dark) cite{color:#151122}
html.a11y-contrast:not(.dark) h1,html.a11y-contrast:not(.dark) h2,html.a11y-contrast:not(.dark) h3,html.a11y-contrast:not(.dark) h4,html.a11y-contrast:not(.dark) b,html.a11y-contrast:not(.dark) strong{color:#000}
html.a11y-contrast:not(.dark) .kicker,html.a11y-contrast:not(.dark) .eyebrow,html.a11y-contrast:not(.dark) dt{color:#8a0043}
/* donkere vlakken: volledig wit in plaats van gedempt */
html.a11y-contrast:not(.dark) .hero,html.a11y-contrast:not(.dark) .pagehero,html.a11y-contrast:not(.dark) .summit,html.a11y-contrast:not(.dark) .config,html.a11y-contrast:not(.dark) .ctaband,html.a11y-contrast:not(.dark) .hart,html.a11y-contrast:not(.dark) .proofband,html.a11y-contrast:not(.dark) footer{background:#1a0f2e}
html.a11y-contrast:not(.dark) .hero *,html.a11y-contrast:not(.dark) .pagehero *,html.a11y-contrast:not(.dark) .summit *,html.a11y-contrast:not(.dark) .config *,html.a11y-contrast:not(.dark) .ctaband *,html.a11y-contrast:not(.dark) .hart *,html.a11y-contrast:not(.dark) .proofband *,html.a11y-contrast:not(.dark) footer *{color:#fff}
html.a11y-contrast:not(.dark) .hero::before,html.a11y-contrast:not(.dark) .hero::after,html.a11y-contrast:not(.dark) .blob{display:none}
html.a11y-contrast:not(.dark) .hero .btn.primary,html.a11y-contrast:not(.dark) .summit .btn.primary,html.a11y-contrast:not(.dark) .ctaband .btn.primary{background:#ffd873;color:#000!important;border-color:#ffd873}
html.a11y-contrast:not(.dark) .btn.ghost{border-width:2px;border-color:currentColor}
/* randen om alles wat een vlak is, ook zonder achtergrondkleur */
html.a11y-contrast:not(.dark) .svc,html.a11y-contrast:not(.dark) .panel,html.a11y-contrast:not(.dark) .review,html.a11y-contrast:not(.dark) .revcard,html.a11y-contrast:not(.dark) .logitem,html.a11y-contrast:not(.dark) .q,html.a11y-contrast:not(.dark) .dcard,html.a11y-contrast:not(.dark) .routebox,html.a11y-contrast:not(.dark) .spoor,html.a11y-contrast:not(.dark) .cfeiten,html.a11y-contrast:not(.dark) .stats>div,html.a11y-contrast:not(.dark) .uspcard,html.a11y-contrast:not(.dark) .mz,html.a11y-contrast:not(.dark) .chip,html.a11y-contrast:not(.dark) .a11ypaneel{border:2px solid #1a0f2e!important;box-shadow:none!important;background:#fff!important}
html.a11y-contrast:not(.dark) .mz *,html.a11y-contrast:not(.dark) .spoor *{color:#151122!important}
html.a11y-contrast:not(.dark) input,html.a11y-contrast:not(.dark) textarea,html.a11y-contrast:not(.dark) select{border:2px solid #1a0f2e!important;background:#fff!important;color:#000!important}
html.a11y-contrast:not(.dark) .hero input,html.a11y-contrast:not(.dark) .summit input,html.a11y-contrast:not(.dark) .summit textarea{background:#fff!important;color:#000!important}
html.a11y-contrast:not(.dark) .hero input::placeholder,html.a11y-contrast:not(.dark) .summit input::placeholder,html.a11y-contrast:not(.dark) .summit textarea::placeholder{color:#3a3646!important}
/* links altijd te onderscheiden */
html.a11y-contrast:not(.dark) main a:not(.btn){color:#8a0043;text-decoration:underline;text-underline-offset:3px}
html.a11y-contrast:not(.dark) .hero a:not(.btn),html.a11y-contrast:not(.dark) .summit a:not(.btn),html.a11y-contrast:not(.dark) .ctaband a:not(.btn),html.a11y-contrast:not(.dark) footer a{color:#ffd873!important;text-decoration:underline}
html.a11y-contrast:not(.dark) :focus-visible{outline:4px solid #8a0043;outline-offset:3px}
html.a11y-contrast:not(.dark) .hero :focus-visible,html.a11y-contrast:not(.dark) footer :focus-visible,html.a11y-contrast:not(.dark) .summit :focus-visible{outline-color:#ffd873}
/* links onderstrepen: alle links, ook in de balk, kaarten en knoppen met tekstlink-karakter */
html.a11y-links a{text-decoration:underline!important;text-underline-offset:3px;text-decoration-thickness:1.5px}
html.a11y-links a.mmcard,html.a11y-links a.logitem,html.a11y-links a.dcard,html.a11y-links a.faqkaart,html.a11y-links a.logo{text-decoration:none!important}
html.a11y-links a.btn>span:first-child,html.a11y-links a.mmcard b,html.a11y-links a.logitem .nm,html.a11y-links a.faqkaart h3,html.a11y-links a.faqkaart .faqlnk{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
html.a11y-stil *,html.a11y-stil *::before,html.a11y-stil *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}

/* de zwevende toegankelijkheidsknop staat boven de scanbalk, nooit eronder */
.a11ywidget{z-index:90}

.floatscan{opacity:0;transform:translateY(14px);pointer-events:none}
.floatscan.aan{opacity:1;transform:none;pointer-events:auto}





/* onderhoud: één kaart, geen meter en geen tweede kop */
.ondkaart{margin:34px 0 0;background:#fff;border:1px solid var(--lijn);border-radius:24px;padding:30px 34px 26px;box-shadow:0 24px 52px -32px rgba(46,26,77,.45)}
.okkop{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:20px}
.okkop h3{margin:0;font-size:1.15rem}
.okmaand{font-size:.74rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--magenta-tekst)}
.oklijst{display:grid;grid-template-columns:1fr 1fr;gap:12px 26px}
.oklijst li{font-size:.94rem}
.okvoet{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:24px;padding-top:20px;border-top:1px solid var(--lijn)}
.okvoet p{margin:0;font-size:.94rem;color:var(--grijs);max-width:36ch}
.okvoet p b{color:var(--ink)}
.okact{display:flex;gap:10px;flex-wrap:wrap}
@media(max-width:700px){.ondkaart{padding:24px 22px}.oklijst{grid-template-columns:1fr}.okvoet .btn{flex:1 1 auto;justify-content:center}}

/* wie er met je meeklimt: paarse helft met de boodschap, witte helft met de feiten */
.teamband{display:grid;grid-template-columns:1fr 1.05fr;gap:0;margin-top:34px;background:var(--paars);border-radius:28px;overflow:hidden;color:#fff}
.tbtxt{padding:44px 42px;display:flex;flex-direction:column;align-items:flex-start;gap:16px;background:linear-gradient(160deg,var(--paars),var(--paars-diep))}
.tbtxt h3{color:#fff;font-size:clamp(1.3rem,2.2vw,1.7rem);line-height:1.22;margin:0}
.tbtxt p{color:#E4D9F3;font-size:1rem;line-height:1.55;margin:0;max-width:38ch}
.tbtxt .btn{margin-top:6px}
.tbfeiten{display:flex;flex-direction:column;margin:0;background:#fff}
.tbfeiten>div{display:grid;grid-template-columns:104px 1fr;gap:20px;align-items:center;padding:26px 34px}
.tbfeiten>div+div{border-top:1px solid var(--lijn)}
.tbfeiten dt{margin:0;font-size:2.2rem;font-weight:800;letter-spacing:-.03em;color:var(--paars);line-height:1;font-variant-numeric:tabular-nums}
.tbfeiten dd{margin:0;font-size:.95rem;line-height:1.5;color:#3f3a4d;text-wrap:pretty}
.tbfeiten dd a{display:inline-block;margin-top:4px;font-weight:700;color:var(--magenta-tekst)}
@media(max-width:880px){.teamband{grid-template-columns:1fr}.tbtxt{padding:32px 26px}.tbfeiten>div{grid-template-columns:88px 1fr;gap:16px;padding:20px 26px}.tbfeiten dt{font-size:1.8rem}}
#onderhoud>.wrap>.reveal h2{white-space:nowrap}
@media(max-width:620px){#onderhoud>.wrap>.reveal h2{white-space:normal}}
.secteam{padding-top:56px}
@media(max-width:760px){.secteam{padding-top:36px}}

/* feitenrijen: cijfer rechts uitgelijnd, fijn scheidingsstreepje, rustige hover */
.tbfeiten>div{grid-template-columns:96px 1px 1fr;gap:0;padding:24px 32px;transition:background .18s}
.tbfeiten>div:hover{background:var(--grijs-licht)}
.tbfeiten dt{text-align:right;padding-right:20px;font-size:2rem}
.tbfeiten>div::before{content:"";width:2px;align-self:stretch;border-radius:2px;background:linear-gradient(180deg,transparent,var(--magenta) 22%,var(--magenta) 78%,transparent);opacity:.5}
.tbfeiten dd{padding-left:20px;font-size:.94rem}
.tbfeiten dd a{display:inline;margin:0;white-space:nowrap}
@media(max-width:880px){.tbfeiten>div{grid-template-columns:74px 1px 1fr;padding:18px 24px}.tbfeiten dt{font-size:1.7rem;padding-right:14px}.tbfeiten dd{padding-left:14px}}

/* feitenrij: expliciete kolommen, want het streepje is zelf een griditem */
.tbfeiten>div{grid-template-columns:96px 2px 1fr}
.tbfeiten dt{grid-column:1}
.tbfeiten>div::before{grid-column:2}
.tbfeiten dd{grid-column:3}
@media(max-width:880px){.tbfeiten>div{grid-template-columns:74px 2px 1fr}}
/* op lage vensters zweeft de knop niet over de hero-tekst */
.a11ywidget{transition:opacity .2s,transform .2s,visibility .2s}
@media(max-height:700px){.a11ywidget.onhero{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(10px)}}

/* onderhoud en overstap naast elkaar */
.duo{display:grid;grid-template-columns:1.15fr .85fr;gap:26px;align-items:stretch}
.duokol{display:flex;flex-direction:column;min-width:0}
.duo .ondkaart{margin:22px 0 0;flex:1}
.duo .ctaband{padding:38px 34px;height:100%;display:flex;align-items:center;text-align:left}
.duo .ctaband h2{margin:0 0 12px;max-width:100%;font-size:clamp(1.5rem,2.4vw,2rem);white-space:normal}
.duo .ctaband p{margin:0 0 20px;max-width:100%;font-size:.98rem}
.duo .ctaband .cta{justify-content:flex-start}
.duo .ctaband .reassure{justify-content:flex-start!important;margin-top:14px!important}
.duo #onderhoud h2,.duo .reveal h2{white-space:normal}
.duo .oklijst{grid-template-columns:1fr}
@media(max-width:1040px){.duo{grid-template-columns:1fr}.duo .ctaband{text-align:center}.duo .ctaband .cta,.duo .ctaband .reassure{justify-content:center!important}.duo .oklijst{grid-template-columns:1fr 1fr}}
[data-label="Klanten aan het woord"]>.wrap>.reveal h2{white-space:nowrap}
@media(max-width:560px){[data-label="Klanten aan het woord"]>.wrap>.reveal h2{white-space:normal}}
.duo .ctaband .reassure{flex-direction:column;align-items:flex-start;gap:8px}
@media(max-width:1040px){.duo .ctaband .reassure{align-items:center}}
.revstars{color:var(--geel)!important}
.okvoet p{max-width:none}

/* reviews: één grote quote met klantkiezer */
.quotepod{display:grid;grid-template-columns:250px 1fr;gap:0;margin-top:32px;background:#fff;border:1px solid var(--lijn);border-radius:26px;overflow:hidden;box-shadow:0 26px 56px -34px rgba(46,26,77,.45)}
.qpscore{display:flex;flex-direction:column;justify-content:center;gap:6px;padding:34px 30px;background:linear-gradient(160deg,var(--paars),var(--paars-diep));color:#fff}
.qpscore b{font-size:3.4rem;font-weight:800;letter-spacing:-.04em;line-height:1}
.qpstars{color:var(--geel);letter-spacing:3px;font-size:1rem}
.qpscore small{font-size:.86rem;line-height:1.45;color:#E4D9F3;margin-top:4px;max-width:24ch}
.qpscore a{margin-top:12px;font-weight:700;font-size:.86rem;color:var(--geel)}
.qpscore a:hover{color:#fff}
.qpquote{margin:0;padding:38px 40px 30px;display:flex;flex-direction:column;gap:0}
.qpquote blockquote{margin:0;font-size:clamp(1.15rem,2.1vw,1.5rem);line-height:1.45;font-weight:500;color:var(--ink);text-wrap:pretty;transition:opacity .16s;min-height:4.4em}
.qpquote blockquote::before{content:"\201C";display:block;font-size:2.6rem;line-height:.6;color:var(--magenta);margin-bottom:10px}
.qpquote figcaption{margin-top:14px}
.qpquote figcaption b{display:block;font-size:.95rem;color:var(--ink);transition:opacity .16s}
.qpquote figcaption small{display:block;font-size:.85rem;color:var(--grijs);transition:opacity .16s}
.qpav{display:flex;gap:8px;flex-wrap:wrap;margin-top:26px;padding-top:22px;border-top:1px solid var(--lijn)}
.qav{padding:8px 15px;border-radius:100px;border:1.5px solid var(--lijn);background:#fff;font-family:inherit;font-weight:700;font-size:.84rem;color:var(--grijs);cursor:pointer;transition:.18s;white-space:nowrap}
.qav:hover{border-color:var(--paars);color:var(--paars);transform:translateY(-2px)}
.qav.on{background:var(--paars);border-color:var(--paars);color:#fff}
@media(max-width:820px){
  .quotepod{grid-template-columns:1fr}
  .qpscore{flex-direction:row;align-items:center;gap:14px;padding:22px 24px;flex-wrap:wrap}
  .qpscore b{font-size:2.4rem}
  .qpscore small{flex:1 1 180px;margin:0}
  .qpquote{padding:26px 24px 22px}
  .qpquote blockquote{min-height:6em}
}
.qpbody{display:block}

/* FAQ: vier tegels, antwoorden meteen leesbaar */
.faqgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:34px}
.faqkaart{background:#fff;border:1px solid var(--lijn);border-radius:20px;padding:26px 28px;box-shadow:0 18px 44px -32px rgba(46,26,77,.4)}
.faqkaart h3{margin:0 0 9px;font-size:1.08rem;line-height:1.3;color:var(--ink)}
.faqkaart p{margin:0;font-size:.93rem;line-height:1.55;color:var(--grijs);text-wrap:pretty}
.faqvraag{display:flex;flex-direction:column;background:linear-gradient(160deg,var(--paars),var(--paars-diep));border:none;text-decoration:none;transition:transform .18s,box-shadow .2s}
.faqvraag h3{color:#fff}
.faqvraag p{color:#E4D9F3}
.faqlnk{margin-top:14px;font-weight:700;font-size:.9rem;color:var(--geel)}
.faqvraag:hover{transform:translateY(-3px);box-shadow:0 24px 48px -26px rgba(46,26,77,.6)}
.faqvraag:hover .faqlnk{color:#fff}
@media(max-width:820px){.faqgrid{grid-template-columns:1fr}}

.faqic{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--paars-zacht);margin-bottom:14px}
.faqic svg{width:22px;height:22px;fill:none;stroke:var(--paars);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.faqic.light{background:rgba(255,255,255,.14)}
.faqic.light svg{stroke:var(--geel)}

/* contacttegel met foto */
.faqvraag{display:grid;grid-template-columns:140px 1fr;align-items:end;gap:0;padding:0;overflow:hidden;position:relative}
.faqvraag::before{content:"";position:absolute;left:0;bottom:0;width:140px;height:132px;background:var(--geel);border-radius:50% 50% 0 0 / 62% 62% 0 0}
.faqfoto{position:relative;z-index:2;width:140px;height:auto;align-self:end;display:block;margin-bottom:-2px}
.faqvtxt{padding:24px 24px 24px 18px;position:relative;z-index:2}
.faqvk{display:block;font-size:.74rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--geel);margin-bottom:7px}
.faqvraag h3{margin:0 0 7px;font-size:1.12rem}
.faqvraag p{max-width:none;font-size:.9rem}
@media(max-width:820px){
  .faqvraag{grid-template-columns:1fr;align-items:start}
  /* het gele vlak hoort achter de foto, niet als band onder de tekst */
  .faqvraag::before{left:50%;top:22px;bottom:auto;width:180px;height:180px;transform:translateX(-50%);border-radius:50%}
  .faqfoto{width:170px;margin:0 auto -2px}
  .faqvtxt{padding:22px 24px 26px;text-align:center}
  .faqvraag p{margin:0 auto}
}

/* contact: pitch met foto naast een wit formulier */
.summitduo{display:grid;grid-template-columns:1fr 1.02fr;gap:44px;align-items:center}
.sdpitch h2{margin:10px 0 12px}
.sdpitch>p{max-width:44ch;margin-bottom:24px}
.sdmens{display:flex;align-items:center;gap:18px;padding:18px 20px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:20px}
.sdfoto{flex:0 0 auto;width:92px;height:92px;border-radius:50%;background:var(--geel);display:grid;place-items:end center;overflow:hidden}
.sdfoto img{width:104%;height:auto;display:block;margin-bottom:-2px}
.sdmens b{display:block;color:#fff;font-size:1rem;margin-bottom:4px}
.sdmens span{display:block;color:#D6CCE6;font-size:.9rem;line-height:1.5}
.sdlijst{list-style:none;display:flex;flex-direction:column;gap:9px;margin:22px 0 0;padding:0}
.sdlijst li{display:flex;gap:9px;align-items:center;color:#fff;font-size:.94rem}
.sdlijst .ok{color:#3ddc84;font-weight:800}
.sdform{background:#fff;border-radius:26px;padding:30px 30px 26px;box-shadow:0 34px 70px -34px rgba(0,0,0,.6)}
.sdform .klimbar{background:var(--grijs-licht);margin:6px 0 26px}
.sdform .klimalt{color:var(--paars)}
.sdform .klimzeg{color:var(--grijs)}
.sdform .fld span{color:var(--ink)}
.sdform .fld i{color:var(--magenta-tekst)}
.sdform input,.sdform textarea{background:#fff;border:1.5px solid var(--lijn);color:var(--ink)}
.sdform input::placeholder,.sdform textarea::placeholder{color:#7d7690}
.sdform input:focus,.sdform textarea:focus{border-color:var(--paars);background:#fff}
.sdform .err{color:#b00046}
@media(max-width:940px){.summitduo{grid-template-columns:1fr;gap:30px}.sdform{padding:24px 22px}}
@media(max-width:560px){.sdmens{flex-direction:column;text-align:center}.sdlijst{align-items:flex-start}}

/* formulier rustiger: twee kolommen, geen nummers */
.sdform .klimform{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.sdform .klimbar{grid-column:1/-1;margin:4px 0 18px}
.sdform .fld:nth-of-type(3),.sdform .fld:nth-of-type(4),.sdform .btn,.sdform .formerr{grid-column:1/-1}
.sdform .fld span{display:flex;align-items:baseline;gap:7px;font-size:.86rem;font-weight:700;margin-bottom:6px}
.sdform .fld .veldopt{display:inline;font-style:normal;font-weight:500;font-size:.76rem;color:var(--grijs);background:none;border:none;padding:0}
.sdform input,.sdform textarea{width:100%;border-radius:12px;padding:12px 14px;font-size:.95rem}
.sdform textarea{min-height:84px}
@media(max-width:560px){.sdform .klimform{grid-template-columns:1fr}}
.sdform .klimform{gap:10px 14px}
.sdform .fld span{margin-bottom:4px}
.sdform input,.sdform textarea{padding:10px 13px}
.sdform textarea{min-height:72px}
.sdform .klimbar{margin:4px 0 14px}

/* ===== donkere modus ===== */
html.dark{--ink:#F3EFFA;--grijs:#B6AECB;--lijn:#39304C;--grijs-licht:#221A33;--paars-zacht:#2A2140;--roze-zacht:#33203A;--magenta-tekst:#FF7FB5;--schaduw-s:0 6px 22px -10px rgba(0,0,0,.6);--schaduw:0 26px 60px -30px rgba(0,0,0,.75)}
html.dark body{background:#171122;color:var(--ink)}
/* alles wat wit was, wordt een donker vlak */
html.dark .svc,html.dark .panel,html.dark .review,html.dark .revcard,html.dark .q,html.dark .dcard,html.dark .routebox,html.dark .ondkaart,html.dark .faqkaart,html.dark .quotepod,html.dark .sdform,html.dark .a11ypaneel,html.dark .megamenu,html.dark .navlinks,html.dark .chip,html.dark .rnd,html.dark .rev-btn,html.dark .qav,html.dark .logitem,html.dark .eu,html.dark .tbfeiten,html.dark .viewport,html.dark .dcard .phone{background:#1F1830;color:var(--ink);border-color:var(--lijn)}
html.dark .spoor,html.dark .stats>div,html.dark .cfeiten,html.dark .uspcard,html.dark .faqic{background:#241C36}
html.dark .dcard .shot{background:#1A1428}
html.dark .dcard .bbar{background:#241C36;border-color:var(--lijn)}
html.dark .gezond{background:#1C1529}
html.dark header:not(.opdonker) nav{background:rgba(31,24,48,.92)}
html.dark header:not(.opdonker) .logo .sh,html.dark header:not(.opdonker) .navlinks a,html.dark header:not(.opdonker) .navlinks .diensten{color:var(--ink)}
html.dark .btn.ghost{background:transparent;color:var(--ink);border-color:var(--lijn)}
html.dark .btn.ghost:hover{background:#2A2140;border-color:var(--paars)}
html.dark .summit .btn.light,html.dark .ctaband .btn.light,html.dark .hart .btn.light{background:rgba(255,255,255,.16);color:#fff}
html.dark .btn.light{background:#2A2140;color:var(--ink)}
html.dark input,html.dark textarea,html.dark select{background:#241C36!important;border-color:var(--lijn)!important;color:var(--ink)!important}
html.dark input::placeholder,html.dark textarea::placeholder{color:#8E86A6!important}
html.dark .hero-ridge path,html.dark .gezond::before,html.dark .gezond::after{fill:#171122}
html.dark .gezond::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 46' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L0 30 Q360 2 720 20 T1440 18 L1440 0 Z' fill='%23171122'/%3E%3C/svg%3E")}
html.dark .gezond::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 46' preserveAspectRatio='none'%3E%3Cpath d='M0 46 L0 16 Q360 44 720 26 T1440 28 L1440 46 Z' fill='%23171122'/%3E%3C/svg%3E")}
html.dark .kg svg circle:first-child{stroke:#2E2442}
html.dark .lvtxt small,html.dark .lvarr{color:var(--grijs)}
html.dark .logitem .nm,html.dark .faqkaart h3,html.dark .qpquote blockquote{color:var(--ink)}
html.dark .llogo img{filter:grayscale(1) invert(1) brightness(1.6);opacity:.85}
html.dark .logitem:hover .llogo img,html.dark .logitem.on .llogo img{filter:none;opacity:1}
/* schakelaar in de balk */
.modebtn{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1.5px solid var(--lijn);background:#fff;color:var(--paars);cursor:pointer;flex:0 0 auto;transition:.18s}
.modebtn:hover{border-color:var(--paars);transform:translateY(-1px)}
.modebtn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
header.opdonker .modebtn{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.42);color:#fff}
header.opdonker .modebtn:hover{background:rgba(255,255,255,.2);border-color:#fff}
html.dark .modebtn{background:#241C36;border-color:var(--lijn);color:var(--geel)}
.modebtn .zon{display:none}
html.dark .modebtn .zon{display:block}
html.dark .modebtn .maan{display:none}

/* donkere modus: tekstkleuren die vast op licht waren ingesteld */
html.dark .routebox .spoor .k{color:#C9B6EC}
html.dark .routebox .spoor.switch .k{color:#F2C55A}
html.dark .routebox .spoor h3{color:var(--ink)}
html.dark .routebox .spoor p,html.dark .cfeiten dd,html.dark .checks li,html.dark .okvoet p,html.dark .qpquote figcaption small,html.dark .tbfeiten dd{color:var(--grijs)}
html.dark .okvoet p b,html.dark .cfeiten dt{color:var(--ink)}
html.dark .cfeiten dt{color:#C9B6EC}
html.dark .stats b,html.dark .tbfeiten dt,html.dark .kg .val,html.dark .twcijfers b{color:#C9B6EC}
html.dark .stats small{color:var(--grijs)}
html.dark .routebox .spoor .btn{background:#2E2442;color:var(--ink);border-color:var(--lijn)}
html.dark .routebox .spoor.hl{background:#2A2140}
html.dark .routebox .spoor.hl .btn{background:var(--paars);color:#fff;border-color:var(--paars)}
html.dark .lvtxt small,html.dark .lvarr,html.dark .cmeta,html.dark .logitem .mt,html.dark .logitem .lalt,html.dark .logmeer,html.dark .logmeta{color:var(--grijs)}
html.dark .lvtxt{color:var(--ink)}
html.dark .chip{color:var(--ink);border-color:var(--lijn)}
html.dark .chip.sel{background:var(--paars);color:#fff;border-color:var(--paars)}
html.dark .dtab.on{background:#3A2D56;color:var(--ink)}
html.dark .checks li .ck{background:#1E3A2A}
html.dark .checks li .ck svg{stroke:#4ade80}
html.dark .faqic{background:#2E2442}
html.dark .faqic svg{stroke:#C9B6EC}
html.dark .qav{color:var(--grijs)}
html.dark .qav.on{background:var(--paars);color:#fff;border-color:var(--paars)}
html.dark .mile{background:#241C36;color:var(--ink);border-color:var(--lijn)}
html.dark .scanrow{background:transparent}
html.dark .modebtn{color:var(--geel)}
html.dark .a11yopt b{color:var(--ink)}
html.dark .a11yopt:hover{background:#2A2140}
html.dark .a11ysluit,html.dark .a11yreset{color:var(--grijs)}
html.dark .viewport.noshot{background:#241C36}
html.dark .viewport.noshot b{color:#C9B6EC}

/* donkere modus: tekst op vaste lichte vullingen blijft donker */
html.dark .btn.primary,html.dark .btn.primary span,html.dark .floatscan{color:#1C1626}
html.dark .dtab.on{color:#1C1626;background:#fff}
html.dark .hero .btn.primary:hover,html.dark .btn.primary:hover{color:#1C1626}

/* modusknop: subtiel, rechts van de knoppen */
.modebtn{width:34px;height:34px;border:none;background:none;color:var(--grijs);opacity:.7}
.modebtn:hover{background:none;color:var(--paars);opacity:1;transform:none}
.modebtn svg{width:17px;height:17px;stroke-width:1.6}
header.opdonker .modebtn{background:none;border:none;color:rgba(255,255,255,.75)}
header.opdonker .modebtn:hover{background:none;color:#fff}
html.dark .modebtn{background:none;border:none;color:#B6AECB}
html.dark .modebtn:hover{color:var(--geel)}
.sec:not(.gezond) .q{background:var(--grijs-licht);border-color:var(--lijn)}
.sec:not(.gezond) .q[open]{background:#fff;border-color:var(--paars)}
html.dark .sec:not(.gezond) .q{background:#241C36}
html.dark .sec:not(.gezond) .q[open]{background:#1F1830;border-color:var(--paars)}

/* iconen in het dienstenmenu */
.mmic{grid-column:1;grid-row:1/3;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:color-mix(in oklch,var(--c) 14%,#fff);color:var(--c)}
.mmic svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.mmcard:hover .mmic{background:var(--c);color:#fff}
html.dark .mmic{background:color-mix(in oklch,var(--c) 30%,#1F1830)}
html.dark .megamenu .alle a:hover{background:#2A2140;color:#C9B6EC}
@media(max-width:1000px){.mmic{width:30px;height:30px}}

/* het dienstenpaneel is wit: daar hoort donkere tekst, ook boven een donkere hero */
header.opdonker .megamenu a,header.opdonker .megamenu .mmcard b{color:var(--ink)}
header.opdonker .megamenu .mmcard small,header.opdonker .megamenu .mmp{color:var(--grijs)}
header.opdonker .megamenu .alle a{color:var(--magenta-tekst)}
header.opdonker .megamenu .mmcard:hover b{color:var(--c)}
header.opdonker .megamenu .alle a:hover{color:var(--paars)}
html.dark header.opdonker .megamenu a,html.dark header.opdonker .megamenu .mmcard b{color:var(--ink)}
html.dark header.opdonker .megamenu .alle a{color:#FF8FC4}

/* feitentegels naast de teamband */
.tbfeiten .tbf{position:relative;background:#fff;border:1px solid var(--lijn);border-radius:18px;padding:18px 20px 16px;transition:transform .2s ease,box-shadow .2s ease,border-color .2s}
.tbfeiten .tbf::before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:3px;border-radius:0 3px 3px 0;background:var(--tbc,var(--paars))}
.tbfeiten .tbf1{--tbc:var(--paars)}.tbfeiten .tbf2{--tbc:var(--geel)}.tbfeiten .tbf3{--tbc:var(--magenta)}
.tbfeiten .tbf:hover{transform:translateY(-3px);box-shadow:0 20px 40px -24px rgba(46,26,77,.4);border-color:var(--tbc)}
.tbic{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;margin-bottom:9px;background:color-mix(in oklch,var(--tbc) 15%,#fff);color:color-mix(in oklch,var(--tbc) 82%,#1C1626)}
.tbic svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tbfeiten .tbf:hover .tbic{background:var(--tbc);color:#fff}
.tbfeiten .tbf dt{color:var(--tbc)}
html.dark .tbfeiten .tbf{background:#241C36;border-color:var(--lijn)}
html.dark .tbic{background:color-mix(in oklch,var(--tbc) 30%,#241C36);color:#fff}
html.dark .tbfeiten .tbf dt{color:#C9B6EC}
html.dark .tbfeiten .tbf2 dt{color:#F2C55A}
html.dark .tbfeiten .tbf3 dt{color:#FF8FC4}
.tbfeiten{gap:13px}
.tbfeiten .tbf2 dt{color:#8A5D00}

/* feitentegels: geen kaart, alleen een gekleurde streep */
.tbfeiten .tbf{background:none;border:none;border-radius:0;padding:2px 0 2px 18px}
.tbfeiten .tbf::before{top:4px;bottom:4px;width:2px;border-radius:2px}
.tbfeiten .tbf:hover{transform:none;box-shadow:none;border-color:transparent}
.tbfeiten .tbf:hover .tbic{background:color-mix(in oklch,var(--tbc) 15%,#fff);color:color-mix(in oklch,var(--tbc) 82%,#1C1626)}
.tbic{width:30px;height:30px;border-radius:9px;margin-bottom:7px}
.tbic svg{width:17px;height:17px}
.tbfeiten{gap:20px}
html.dark .tbfeiten .tbf{background:none}
html.dark .tbfeiten .tbf:hover .tbic{background:color-mix(in oklch,var(--tbc) 30%,#241C36);color:#fff}

/* feitentegels: zacht getint vlak, geen harde rand */
.tbfeiten .tbf{background:var(--grijs-licht);border:none;border-radius:16px;padding:16px 18px 15px 20px;box-shadow:none}
.tbfeiten .tbf::before{left:0;top:16px;bottom:16px;width:3px;border-radius:0 3px 3px 0}
.tbfeiten .tbf:hover{transform:translateY(-2px);box-shadow:0 16px 34px -22px rgba(46,26,77,.35)}
.tbfeiten .tbf:hover .tbic{background:var(--tbc);color:#fff}
.tbic{background:#fff;box-shadow:inset 0 0 0 1px color-mix(in oklch,var(--tbc) 22%,#fff)}
html.dark .tbfeiten .tbf{background:#241C36}
html.dark .tbic{background:#1F1830;box-shadow:inset 0 0 0 1px color-mix(in oklch,var(--tbc) 40%,#1F1830)}
html.dark .tbfeiten .tbf:hover .tbic{background:var(--tbc);color:#fff}
.tbfeiten .tbf{border-radius:0 16px 16px 0}
.tbfeiten .tbf::before{top:0;bottom:0;border-radius:0}

/* cijfer en tekst op één lijn, cijfers in een eigen kolom */
.tbfeiten .tbf{display:grid;grid-template-columns:76px 1fr;align-items:baseline;column-gap:16px;row-gap:0}
.tbfeiten .tbf .tbic{grid-column:1;grid-row:1;margin-bottom:0;align-self:center}
.tbfeiten .tbf dt{grid-column:1;grid-row:2;margin:0;text-align:right;font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1.05}
.tbfeiten .tbf dd{grid-column:2;grid-row:2;margin:0;align-self:baseline}
@media(max-width:520px){.tbfeiten .tbf{grid-template-columns:64px 1fr;column-gap:12px}}

/* cijferkolom voegt zich naar de langste waarde; icoon en cijfer op één as */
.tbfeiten .tbf{grid-template-columns:minmax(max-content,auto) 1fr}
.tbfeiten .tbf dt{text-align:left;white-space:nowrap}
.tbfeiten .tbf .tbic{justify-self:start}

/* alle drie de teksten beginnen op dezelfde x */
.tbfeiten{--tbkol:113px}
.tbfeiten .tbf{grid-template-columns:var(--tbkol) 1fr}
@media(max-width:520px){.tbfeiten{--tbkol:96px}}
.tbfeiten .tbf{align-items:center}
.tbfeiten .tbf dd{align-self:center}
.tbfeiten .tbf dt{align-self:center}
.teamband{align-items:center}
.teamband .tbfeiten{align-self:center;justify-content:center}

/* laatste lichte sectie grenst aan de footer: onderste golf weg */
main>section.sec.gezond:last-of-type::after{display:none}
.faqfoto,.sdfoto img{aspect-ratio:1106/1252;height:auto}
.faqfoto,.sdfoto img{aspect-ratio:700/801}

/* echte klantlogo's: nooit omkeren, in donkere modus op een lichte plaat */
.llogo img.echt{filter:none!important;opacity:1!important}
html.dark .logitem .llogo:has(img.echt){background:#fff;border-radius:8px;padding:5px 7px}

/* dossier met één cijfer: niet uitrekken over de volle breedte */
.dcard .stats:has(> :only-child){display:inline-flex!important;width:auto}
.dcard .stats:has(> :only-child) > div{min-width:0}

.dcard .body .stats:has(> :only-child){display:inline-flex!important;width:auto!important}
.dcard .stats.een{display:inline-flex;width:auto}

/* e-mailrij: breed veld, compacte knop */
.emailrow input{flex:1 1 auto;min-width:0}
.emailrow .btn{flex:0 0 auto;padding:12px 18px;font-size:.9rem;white-space:nowrap}
.dlock b{color:#fff}
.nualvast{margin:14px 0 0;font-size:.92rem}
.nualvast a{color:var(--geel);font-weight:700;text-decoration:none;border-bottom:1px solid rgba(242,179,24,.45)}
.nualvast a:hover{color:#fff;border-bottom-color:#fff}

/* e-mailrij: veld altijd het breedst */
.emailrow{flex-wrap:wrap}
.emailrow input{flex:1 1 62%;min-width:190px}
.emailrow .btn{flex:0 1 auto;padding:12px 15px;font-size:.86rem}
@media(max-width:420px){.emailrow input{flex:1 1 100%}.emailrow .btn{flex:1 1 100%;justify-content:center}}
.nietlive{margin:14px 0 0;font-size:.86rem;line-height:1.45;color:var(--grijs);font-style:normal}
.faqwie{margin:8px 0 0!important;font-size:.82rem;font-weight:700;color:var(--magenta-tekst)}
html.dark .faqwie{color:#FF8FC4}

/* 'stel je vraag' als knop die over de rand valt */
.faqvraag{overflow:visible;position:relative}
.faqvraag .faqlnk{position:absolute;right:-10px;bottom:-16px;display:inline-flex;align-items:center;gap:8px;background:var(--geel);color:#1C1626;font-weight:800;font-size:.9rem;padding:12px 20px;border-radius:100px;box-shadow:0 16px 34px -16px rgba(0,0,0,.55);transition:transform .18s ease,background .18s}
.faqvraag:hover .faqlnk{transform:translateY(-2px);background:#ffc63f}
.faqvtxt{padding-bottom:34px}
@media(max-width:820px){.faqvraag .faqlnk{position:static;right:auto;bottom:auto;margin-top:14px}.faqvtxt{padding-bottom:24px}}

/* linkeronderhoek weer rond nu de kaart niet clipt */
@media(min-width:821px){.faqvraag::before{border-bottom-left-radius:20px}}
.faqfoto{margin-bottom:0}

/* wat de handmatige controle inhoudt */
.sdwat{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:8px}
.sdwat li{position:relative;padding-left:22px;color:#D6CCE6;font-size:.92rem;line-height:1.5}
.sdwat li::before{content:"";position:absolute;left:2px;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--geel)}

/* handmatige controle: meer lucht rond het blok met Walter */
.sdwat{margin-bottom:0}
.sdmens{margin-top:28px;padding:22px 24px;gap:20px}
.sdmens b{margin-bottom:6px}
.sdlijst.onderform{margin-top:20px;padding-top:18px;border-top:1px solid rgba(255,255,255,.15);gap:10px}
@media(max-width:940px){.sdmens{margin-top:22px}}

/* usp-lijst staat op de witte formulierkaart, niet op het paarse vlak */
.sdlijst.onderform{border-top-color:var(--lijn)}
.sdlijst.onderform li{color:var(--ink)}
.sdlijst.onderform .ok{color:#0F6B3C}
html.dark .sdlijst.onderform{border-top-color:var(--lijn)}
html.dark .sdlijst.onderform li{color:var(--ink)}
html.dark .sdlijst.onderform .ok{color:#4ADE80}

/* dossierlogo's: links uitgelijnd, gelijke visuele hoogte */
.llogo{width:150px;height:40px;display:flex;align-items:center;justify-content:flex-start!important}
.llogo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;object-position:left center}
html.dark .logitem .llogo:has(img.echt){padding:4px 6px;align-self:center}

/* logo: smile op de tekstbasislijn in plaats van op het midden */
.logo{align-items:flex-end;gap:9px}
.logo .smile{margin-bottom:.4em}
.foot-logo .smile{margin-bottom:.34em}

/* spamcheck in formulieren */
.capcheck{margin:14px 0 0}
.capvraag{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:.86rem;line-height:1.4}
.capvraag b{font-family:'JetBrains Mono',monospace;font-weight:800}
.capvraag input{width:74px;flex:0 0 auto;font-family:inherit;font-size:.94rem;padding:9px 11px;border:1.5px solid var(--lijn);border-radius:10px;background:#fff;color:var(--ink)}
.capvraag input:focus{outline:none;border-color:var(--paars)}
.capvraag input[aria-invalid="true"]{border-color:#C42B2B;background:#FFF7F7}
.caphoney{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.capfout{margin:6px 0 0}
/* op de donkere formulieren */
.sdform .capvraag,.aanvraagform .capvraag{color:var(--ink)}
.summit .capvraag,.hart .capvraag{color:#D6CCE6}
.summit .capvraag input,.hart .capvraag input{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.28);color:#fff}
.summit .capfout,.hart .capfout{color:#ffb0c6}
html.dark .capvraag input{background:#241C36;border-color:var(--lijn);color:var(--ink)}
.velderr[hidden],.formerr[hidden],.capfout[hidden]{display:none!important}

/* spamcheck: eigen paneel, altijd leesbaar in elke formulierstijl */
.capcheck{margin:16px 0 0;padding:14px 16px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.2);border-radius:14px}
.capcheck .capvraag{color:#fff!important;font-size:.9rem;font-weight:600;gap:12px}
.capcheck .capvraag b{color:var(--geel)}
.capcheck .capvraag input{width:82px!important;flex:0 0 auto!important;min-width:0;background:#fff!important;border:1.5px solid rgba(255,255,255,.4)!important;color:var(--ink)!important;font-weight:700;text-align:center}
.capcheck .capvraag input:focus{border-color:var(--geel)!important}
.capcheck .capfout{color:#ffb0c6}
/* lichte formulieren op een witte kaart */
.sdform .capcheck,.aanvraagform:not([class*="paars"]) .capcheck{}
.capcheck.licht{background:var(--grijs-licht);border-color:var(--lijn)}
.capcheck.licht .capvraag{color:var(--ink)!important}
.capcheck.licht .capvraag b{color:var(--magenta-tekst)}
.capcheck.licht .capvraag input{border-color:var(--lijn)!important}
.capcheck.licht .capfout{color:#B00046}
html.dark .capcheck.licht{background:#241C36;border-color:var(--lijn)}
html.dark .capcheck.licht .capvraag input{background:#1F1830!important;color:var(--ink)!important}

/* spamcheck: sommetje als eigen kaartje */
.capcheck{display:flex;align-items:flex-start;gap:14px;transition:border-color .2s,background .2s}
.capic{flex:0 0 auto;display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:rgba(255,255,255,.14);color:#fff}
.capic svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.capbody{flex:1 1 auto;min-width:0}
.caplabel{display:block;font-size:.84rem;font-weight:700;color:#fff;margin-bottom:9px;cursor:pointer}
.capsom{display:flex;align-items:center;gap:9px}
.capgetal{display:grid;place-items:center;min-width:34px;height:38px;padding:0 9px;border-radius:10px;background:rgba(255,255,255,.12);font-family:'JetBrains Mono',monospace;font-size:1.06rem;font-weight:700;color:#fff}
.capop{font-family:'JetBrains Mono',monospace;font-size:1rem;font-weight:700;color:var(--geel)}
.capveld{position:relative;display:inline-flex}
.capveld input{width:64px!important;flex:0 0 auto!important;height:38px;padding:0 9px!important;text-align:center;font-family:'JetBrains Mono',monospace;font-size:1.06rem;font-weight:700;background:#fff!important;border:1.5px solid rgba(255,255,255,.45)!important;border-radius:10px!important;color:var(--ink)!important}
.capveld input::placeholder{color:#a49bb8;font-weight:600}
.capveld input:focus{border-color:var(--geel)!important;outline:none}
.capvink{position:absolute;right:-7px;top:-7px;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#1E8E5A;color:#fff;opacity:0;transform:scale(.6);transition:opacity .18s,transform .18s}
.capvink svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.capcheck.goed .capvink{opacity:1;transform:none}
.capcheck.goed{border-color:rgba(30,142,90,.6)}
.capcheck.goed .capveld input{border-color:#1E8E5A!important}
.capcheck.licht .capic{background:var(--paars-zacht);color:var(--paars)}
.capcheck.licht .caplabel{color:var(--ink)}
.capcheck.licht .capgetal{background:#fff;border:1px solid var(--lijn);color:var(--ink)}
.capcheck.licht .capop{color:var(--magenta-tekst)}
.capcheck.licht .capveld input{border-color:var(--lijn)!important}
html.dark .capcheck.licht .capgetal{background:#1F1830;border-color:var(--lijn);color:var(--ink)}
html.dark .capcheck.licht .capic{background:rgba(201,182,236,.16);color:#C9B6EC}
@media(max-width:420px){.capcheck{gap:11px}.capic{width:30px;height:30px}}

/* label en sommetje op één regel */
.capbody{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.caplabel{margin:0;flex:1 1 auto;min-width:0}
.capsom{flex:0 0 auto}
.capbody .capfout{flex:1 0 100%;margin:0}
@media(max-width:560px){.caplabel{flex:1 0 100%}}
.caplabel{flex:1 1 140px;font-size:.82rem}
.capsom{gap:7px}
.capgetal{min-width:30px;height:34px;padding:0 7px;font-size:.96rem}
.capveld input{width:56px!important;height:34px}
.caplabel{flex:1 1 90px}
.capsom{gap:6px}
.capgetal{min-width:26px;padding:0 6px}
.capveld input{width:50px!important}
.capbody{gap:8px 10px}
@media(max-width:380px){.caplabel{flex:1 0 100%}}

/* spamcheck over de volle formulierbreedte, alles op één regel */
.capcheck{grid-column:1/-1;width:auto;align-items:center;flex-wrap:nowrap}
.capbody{flex-wrap:nowrap;justify-content:space-between;gap:14px}
.caplabel{flex:0 1 auto;white-space:nowrap}
.capsom{flex:0 0 auto;flex-wrap:nowrap}
.capbody .capfout{position:absolute;left:0;right:0;bottom:-22px;flex:none;font-size:.76rem}
.capcheck{position:relative}
.capcheck{min-width:0}
.capbody{min-width:0}
.caplabel{min-width:0;overflow:hidden;text-overflow:ellipsis}
.capcheck{padding:12px 14px;gap:12px}
.capbody{gap:12px}

/* smalle schermen: label boven de som in plaats van krimpen (staat achteraan, dus na de nowrap-regels) */
@media(max-width:560px){
  .capcheck,.capbody{flex-wrap:wrap}
  .caplabel{flex:1 0 100%;overflow:visible;text-overflow:clip;white-space:normal}
  .capbody{justify-content:flex-start}
}

/* label houdt zijn tekst; past de som niet, dan zakt die naar de volgende regel */
.capcheck{flex-wrap:wrap}
.capbody{flex-wrap:wrap;row-gap:10px}
.caplabel{flex:0 1 auto;min-width:0;white-space:nowrap;overflow:visible;text-overflow:clip}
.capsom{flex:0 0 auto}

/* toegankelijkheidsknop rechtsonder, hoogtemeter linksonder */
.a11ywidget{left:auto;right:18px;align-items:flex-end}
.altbadge{right:auto;left:16px}
@media(max-width:760px){.a11ywidget{left:auto;right:14px}.altbadge{right:auto;left:12px}}

/* op smalle schermen staat de scanknop linksonder, de a11y-knop rechtsonder */
@media(max-width:1000px){.floatscan{left:16px;right:auto}}

/* meer contrast: knoppen op de donkere banden mogen niet wit-op-wit worden */
html.a11y-contrast:not(.dark) .hero .btn.ghost,html.a11y-contrast:not(.dark) .pagehero .btn.ghost,html.a11y-contrast:not(.dark) .summit .btn.ghost,html.a11y-contrast:not(.dark) .config .btn.ghost,html.a11y-contrast:not(.dark) .ctaband .btn.ghost,html.a11y-contrast:not(.dark) .hart .btn.ghost,html.a11y-contrast:not(.dark) .proofband .btn.ghost,html.a11y-contrast:not(.dark) footer .btn.ghost{background:transparent!important;color:#fff!important;border-color:#fff!important}
html.a11y-contrast:not(.dark) .hero .btn.light,html.a11y-contrast:not(.dark) .pagehero .btn.light,html.a11y-contrast:not(.dark) .summit .btn.light,html.a11y-contrast:not(.dark) .ctaband .btn.light,html.a11y-contrast:not(.dark) .hart .btn.light,html.a11y-contrast:not(.dark) .proofband .btn.light{background:#fff!important;color:#000!important;border-color:#fff!important}
html.a11y-contrast:not(.dark) .hero .btn.light *,html.a11y-contrast:not(.dark) .pagehero .btn.light *,html.a11y-contrast:not(.dark) .summit .btn.light *,html.a11y-contrast:not(.dark) .ctaband .btn.light *,html.a11y-contrast:not(.dark) .hart .btn.light *,html.a11y-contrast:not(.dark) .proofband .btn.light *{color:#000!important}
html.a11y-contrast:not(.dark) .pagehero .btn.primary,html.a11y-contrast:not(.dark) .hart .btn.primary,html.a11y-contrast:not(.dark) .proofband .btn.primary,html.a11y-contrast:not(.dark) .config .btn.primary{background:#ffd873!important;border-color:#ffd873!important}
html.a11y-contrast:not(.dark) .hero .btn.primary *,html.a11y-contrast:not(.dark) .pagehero .btn.primary *,html.a11y-contrast:not(.dark) .summit .btn.primary *,html.a11y-contrast:not(.dark) .ctaband .btn.primary *,html.a11y-contrast:not(.dark) .hart .btn.primary *,html.a11y-contrast:not(.dark) .proofband .btn.primary *,html.a11y-contrast:not(.dark) .config .btn.primary *{color:#000!important}
html.a11y-contrast:not(.dark) .btn.ghost{background:#fff;color:#151122}
html.a11y-contrast:not(.dark) .btn.primary{background:#ffd873;color:#000}
html.a11y-contrast:not(.dark) .btn.primary span,html.a11y-contrast:not(.dark) .btn.primary .arw{color:#000}

/* ===== meer contrast: vlakken met een verloop krijgen een effen kleur ===== */
html.a11y-contrast:not(.dark) .kostenpaneel,html.a11y-contrast:not(.dark) .aanvraagform,html.a11y-contrast:not(.dark) .spelband,html.a11y-contrast:not(.dark) .lachband,html.a11y-contrast:not(.dark) .pluitkomst,html.a11y-contrast:not(.dark) .sdform,html.a11y-contrast:not(.dark) .vglkaart.wij,html.a11y-contrast:not(.dark) .tbband,html.a11y-contrast:not(.dark) .teamband{background:#1a0f2e!important;border-color:#fff!important}
html.a11y-contrast:not(.dark) .kostenpaneel *,html.a11y-contrast:not(.dark) .spelband *,html.a11y-contrast:not(.dark) .lachband *,html.a11y-contrast:not(.dark) .pluitkomst *,html.a11y-contrast:not(.dark) .vglkaart.wij *,html.a11y-contrast:not(.dark) .tbband *,html.a11y-contrast:not(.dark) .teamband *{color:#fff!important}
html.a11y-contrast:not(.dark) .kpgraf,html.a11y-contrast:not(.dark) .sdform{background:#fff!important}
html.a11y-contrast:not(.dark) .kpgraf *,html.a11y-contrast:not(.dark) .sdform *{color:#151122!important}
html.a11y-contrast:not(.dark) .kpbig,html.a11y-contrast:not(.dark) .rkhint,html.a11y-contrast:not(.dark) .kicker.licht,html.a11y-contrast:not(.dark) .vglkick,html.a11y-contrast:not(.dark) .plantag,html.a11y-contrast:not(.dark) .tarrow{color:#ffd873!important}
html.a11y-contrast:not(.dark) .kpgraf .rkhint{color:#151122!important}
/* formulieren op donkere vlakken: velden en labels leesbaar */
html.a11y-contrast:not(.dark) .aanvraagform *,html.a11y-contrast:not(.dark) .planpick *{color:#fff!important}
html.a11y-contrast:not(.dark) .aanvraagform input,html.a11y-contrast:not(.dark) .aanvraagform select,html.a11y-contrast:not(.dark) .aanvraagform textarea{color:#000!important}
html.a11y-contrast:not(.dark) .planpick label{border-color:#fff!important}
/* lichte knop is altijd wit met zwarte tekst */
html.a11y-contrast:not(.dark) .btn.light,html.a11y-contrast:not(.dark) .btn.light *{background:#fff!important;color:#000!important;border-color:#fff!important}
html.a11y-contrast:not(.dark) .btn.light *{background:none!important}
/* groene vinkjes en statuslabels */
html.a11y-contrast:not(.dark) .ok{color:#0a6b34!important}
html.a11y-contrast:not(.dark) .summit .ok,html.a11y-contrast:not(.dark) .ctaband .ok,html.a11y-contrast:not(.dark) .kostenpaneel .ok,html.a11y-contrast:not(.dark) .aanvraagform .ok,html.a11y-contrast:not(.dark) footer .ok{color:#6ff0a8!important}
html.a11y-contrast:not(.dark) .dtab,html.a11y-contrast:not(.dark) .legenda span{color:#151122!important}
html.a11y-contrast:not(.dark) .dtab.on{background:#1a0f2e!important;color:#fff!important}
/* schermnamen onder de browserbalk */
html.a11y-contrast:not(.dark) .bbar span,html.a11y-contrast:not(.dark) .cmeta{color:#151122!important}

/* laatste details in de contrastmodus */
html.a11y-contrast:not(.dark) .tarrow{color:#8a0043!important}
html.a11y-contrast:not(.dark) .legenda span,html.a11y-contrast:not(.dark) .legenda{color:#151122!important}
html.a11y-contrast:not(.dark) .plantag{background:#8a0043!important;color:#fff!important}
html.a11y-contrast:not(.dark) .vglkaart .vglkick{color:#8a0043!important}
html.a11y-contrast:not(.dark) .vglkaart.wij .vglkick{color:#ffd873!important}
html.a11y-contrast:not(.dark) .logcta .mt,html.a11y-contrast:not(.dark) .logcta b,html.a11y-contrast:not(.dark) .logcta span{color:#fff!important}
html.a11y-contrast:not(.dark) .wqmark{color:#8a0043!important}

/* ===== meer contrast in donkere modus ===== */
html.dark.a11y-contrast{--ink:#FFFFFF;--grijs:#E4DFF0;--lijn:#9C93B4;--grijs-licht:#000000;--paars-zacht:#2b2140;--roze-zacht:#3a1030;--magenta-tekst:#FF9CC6}
html.dark.a11y-contrast body{background:#000;color:#fff}
html.dark.a11y-contrast p,html.dark.a11y-contrast li,html.dark.a11y-contrast dd,html.dark.a11y-contrast small,html.dark.a11y-contrast .intro,html.dark.a11y-contrast .cmeta,html.dark.a11y-contrast .mt,html.dark.a11y-contrast cite,html.dark.a11y-contrast label,html.dark.a11y-contrast legend,html.dark.a11y-contrast summary{color:#F2EEFB!important}
html.dark.a11y-contrast h1,html.dark.a11y-contrast h2,html.dark.a11y-contrast h3,html.dark.a11y-contrast h4,html.dark.a11y-contrast b,html.dark.a11y-contrast strong{color:#fff!important}
html.dark.a11y-contrast .kicker,html.dark.a11y-contrast .eyebrow,html.dark.a11y-contrast dt{color:#FFB3D4!important}
/* alle vlakken effen zwart met een zichtbare rand */
html.dark.a11y-contrast .hero,html.dark.a11y-contrast .pagehero,html.dark.a11y-contrast .summit,html.dark.a11y-contrast .config,html.dark.a11y-contrast .ctaband,html.dark.a11y-contrast .hart,html.dark.a11y-contrast .proofband,html.dark.a11y-contrast .tbband,html.dark.a11y-contrast .lachband,html.dark.a11y-contrast .scanhero-band,html.dark.a11y-contrast footer,html.dark.a11y-contrast .sec.gezond,html.dark.a11y-contrast .sec.grijstot,html.dark.a11y-contrast .werkwijze,html.dark.a11y-contrast .pakkettensec{background:#000!important;background-image:none!important;color:#fff}
html.dark.a11y-contrast .svc,html.dark.a11y-contrast .panel,html.dark.a11y-contrast .review,html.dark.a11y-contrast .logitem,html.dark.a11y-contrast .q,html.dark.a11y-contrast .dcard,html.dark.a11y-contrast .routebox,html.dark.a11y-contrast .ondkaart,html.dark.a11y-contrast .faqkaart,html.dark.a11y-contrast .plan,html.dark.a11y-contrast .aanvraagform,html.dark.a11y-contrast .sdform,html.dark.a11y-contrast .kostenpaneel,html.dark.a11y-contrast .kpgraf,html.dark.a11y-contrast .pluitkomst,html.dark.a11y-contrast .normkaart,html.dark.a11y-contrast .antw,html.dark.a11y-contrast .wwkaart,html.dark.a11y-contrast .spelband,html.dark.a11y-contrast .mz,html.dark.a11y-contrast .spoor,html.dark.a11y-contrast .vglkaart,html.dark.a11y-contrast .tbfeiten .tbf,html.dark.a11y-contrast .factcard,html.dark.a11y-contrast .megamenu,html.dark.a11y-contrast .navlinks,html.dark.a11y-contrast .a11ypaneel,html.dark.a11y-contrast .capcheck{background:#0b0812!important;background-image:none!important;border:2px solid #9C93B4!important;color:#fff}
html.dark.a11y-contrast .mz *,html.dark.a11y-contrast .spoor *,html.dark.a11y-contrast .kostenpaneel *,html.dark.a11y-contrast .spelband *,html.dark.a11y-contrast .lachband *,html.dark.a11y-contrast .pluitkomst *,html.dark.a11y-contrast .vglkaart *,html.dark.a11y-contrast .tbband *{color:#F2EEFB!important}
html.dark.a11y-contrast .hero::before,html.dark.a11y-contrast .hero::after,html.dark.a11y-contrast .blob{display:none}
html.dark.a11y-contrast .hero-ridge path{fill:#000!important}
/* knoppen */
html.dark.a11y-contrast .btn.primary,html.dark.a11y-contrast .btn.primary *{background:#FFD873!important;border-color:#FFD873!important;color:#000!important}
html.dark.a11y-contrast .btn.primary *{background:none!important}
html.dark.a11y-contrast .btn.ghost{background:transparent!important;border:2px solid #fff!important;color:#fff!important}
html.dark.a11y-contrast .btn.ghost *{color:#fff!important}
html.dark.a11y-contrast .btn.light,html.dark.a11y-contrast .btn.light *{background:#fff!important;color:#000!important;border-color:#fff!important}
html.dark.a11y-contrast .btn.light *{background:none!important}
html.dark.a11y-contrast .floatscan{background:#FFD873!important;color:#000!important}
/* formuliervelden */
html.dark.a11y-contrast input,html.dark.a11y-contrast textarea,html.dark.a11y-contrast select{background:#000!important;color:#fff!important;border:2px solid #fff!important}
html.dark.a11y-contrast input::placeholder,html.dark.a11y-contrast textarea::placeholder{color:#C9C2DA!important}
/* links */
html.dark.a11y-contrast main a:not(.btn),html.dark.a11y-contrast footer a{color:#FFD873!important;text-decoration:underline;text-underline-offset:3px}
html.dark.a11y-contrast :focus-visible{outline:4px solid #FFD873!important;outline-offset:3px}
/* details die een eigen kleur hadden */
html.dark.a11y-contrast .ok,html.dark.a11y-contrast .checks .ck svg{color:#7BE8A8!important;stroke:#7BE8A8!important}
html.dark.a11y-contrast .velderr,html.dark.a11y-contrast .formerr{color:#FFB3D4!important;background:#000!important;border-color:#FFB3D4!important}
html.dark.a11y-contrast .plantag,html.dark.a11y-contrast .tag{background:#FFD873!important;color:#000!important}
html.dark.a11y-contrast .a11ybtn{background:#FFD873!important;color:#000!important}
html.dark.a11y-contrast .altbadge{background:#000!important;border:2px solid #fff}
html.dark.a11y-contrast .altbadge b{color:#FFD873!important}

/* ===== vangnet: in de contrastmodus krijgt alle tekst de kleur van zijn modus ===== */
html.dark.a11y-contrast main :is(h1,h2,h3,h4,h5,p,li,dd,dt,span,b,strong,small,em,i,cite,label,legend,summary,figcaption,blockquote,output,td,th),
html.dark.a11y-contrast footer :is(h3,p,li,span,small,a){color:#F2EEFB!important}
html.dark.a11y-contrast main :is(h1,h2,h3,h4),html.dark.a11y-contrast main b,html.dark.a11y-contrast main strong{color:#fff!important}
html.dark.a11y-contrast main :is(.kicker,.eyebrow,.k,.mt,.vglkick,.caplabel,dt,.plnr,.wwkick):not(.btn){color:#FFB3D4!important}
html.dark.a11y-contrast main a:not(.btn),html.dark.a11y-contrast main a:not(.btn) *,html.dark.a11y-contrast footer a{color:#FFD873!important}
html.dark.a11y-contrast .btn.primary,html.dark.a11y-contrast .btn.primary *,html.dark.a11y-contrast .btn.light,html.dark.a11y-contrast .btn.light *{color:#000!important}
html.dark.a11y-contrast .btn.ghost,html.dark.a11y-contrast .btn.ghost *{color:#fff!important}
html.dark.a11y-contrast main .ok,html.dark.a11y-contrast main .ck svg{color:#7BE8A8!important;stroke:#7BE8A8!important}
html.dark.a11y-contrast .wwnr,html.dark.a11y-contrast .logcta .mt{color:#6B6482!important}
html.dark.a11y-contrast .nav-cta .btn.ghost{border-color:#fff!important}

/* lichte contrastmodus: tekst op de donker gemaakte panelen blijft wit */
html.a11y-contrast:not(.dark) .capcheck,html.a11y-contrast:not(.dark) .capcheck *{color:#fff!important}
html.a11y-contrast:not(.dark) .capcheck .caplabel{color:#FFD873!important}
html.a11y-contrast:not(.dark) .aanvraagform :is(label,legend,span,small,p,b){color:#fff!important}
html.a11y-contrast:not(.dark) .aanvraagform :is(input,textarea,select){color:#000!important}
html.a11y-contrast:not(.dark) .vglkaart.wij .vglkick{color:#FFD873!important}
html.a11y-contrast:not(.dark) .lachband .kicker,html.a11y-contrast:not(.dark) .tbband .kicker,html.a11y-contrast:not(.dark) .summit .kicker,html.a11y-contrast:not(.dark) .hero .kicker,html.a11y-contrast:not(.dark) .pagehero .kicker,html.a11y-contrast:not(.dark) .scanhero-band .kicker{color:#FFD873!important}
html.a11y-contrast:not(.dark) .tarrow{color:#fff!important}

/* ===== contrastmodus: laatste correcties, beide modi ===== */
html.a11y-contrast .btn.light,html.dark.a11y-contrast .btn.light{background:#fff!important;border-color:#fff!important}
html.a11y-contrast .btn.light,html.a11y-contrast .btn.light *,html.dark.a11y-contrast .btn.light,html.dark.a11y-contrast .btn.light *{color:#000!important;background-color:transparent}
html.a11y-contrast .btn.light{background-color:#fff!important}
html.a11y-contrast .btn.primary,html.dark.a11y-contrast .btn.primary{background:#FFD873!important;border-color:#FFD873!important}
html.a11y-contrast .btn.primary,html.a11y-contrast .btn.primary *,html.a11y-contrast .btn.primary .arw,html.dark.a11y-contrast .btn.primary,html.dark.a11y-contrast .btn.primary *{color:#000!important}
html.a11y-contrast:not(.dark) .btn.ghost{background:#fff!important;border-color:#151122!important}
html.a11y-contrast:not(.dark) .btn.ghost,html.a11y-contrast:not(.dark) .btn.ghost *{color:#151122!important}
html.dark.a11y-contrast .btn.ghost{background:#000!important;border-color:#fff!important}
html.dark.a11y-contrast .btn.ghost,html.dark.a11y-contrast .btn.ghost *{color:#fff!important}
/* kruimelpad op de donkere hero */
html.a11y-contrast .crumbs,html.a11y-contrast .crumbs *,html.a11y-contrast .crumbs a{color:#FFD873!important}
/* spamcheck: cijfervakjes */
html.a11y-contrast:not(.dark) .capgetal{background:#fff!important;color:#000!important;border:2px solid #151122!important}
html.dark.a11y-contrast .capgetal{background:#000!important;color:#fff!important;border:2px solid #fff!important}
html.a11y-contrast .capsom,html.a11y-contrast .capsom *{color:inherit}
/* browserbalk boven de screenshots */
html.dark.a11y-contrast .bbar{background:#000!important;border-color:#9C93B4!important}
html.dark.a11y-contrast .bbar span{color:#F2EEFB!important}
html.a11y-contrast:not(.dark) .bbar{background:#fff!important;border-color:#151122!important}
html.a11y-contrast:not(.dark) .bbar span{color:#151122!important}

/* groene vinkjes in de donkere modus */
html.dark .ok,html.dark .sdlijst.donker .ok{color:#4ADE80}

/* groene vinkjes: lichte modus donkerder, donkere modus lichter */
.ok,.sdlijst.donker .ok{color:#0F6B3C}
html.dark .ok,html.dark .sdlijst.donker .ok{color:#4ADE80}
.summit .ok,.hart .ok,.ctaband .ok,.config .ok,.hero .ok,.pagehero .ok,.kostenpaneel .ok,.aanvraagform .ok{color:#4ADE80}

/* browserbalk kleurt mee met de donkere modus */
html.dark .dcard .bbar{background:#2A2140;border-color:var(--lijn)}
html.dark .dcard .bbar i{background:#4a4458}
html.dark .dcard .bbar span{background:#1F1830;color:#D8D2E6}

/* labels in de dossierlijst breken af in plaats van over de kolom te lopen */
.logitem .mt{overflow-wrap:anywhere}

/* de licht/donker-regel hoort alleen in het mobiele uitklapmenu */
.navlinks .modeitem{display:none}