/* =============================================================================
   Doe Eens Alsof · gedeelde stijl (dea.css)
   Stoepkrijt & Stopwatch: een strak 72px-tegelgrid met witte interface-schermen;
   krijt annoteert er bovenop. Alles hier is gedeeld door alle views.
   Views schrijven hun eigen stijl in hun style-blok (data-view-style), met elke selector
   voorafgegaan door [data-view="naam"]. Pas dit bestand alleen aan via de
   foundation (wensen in je rapport). Zie DESIGN-SYSTEM.md.
   ============================================================================= */

/* ---------- tokens ---------- */
:root{
  color-scheme: light;
  --krijtwit:#FAF7F0; --zand:#F1EADB; --kalk:#E3DCCD; --papier:#FFFFFF;
  --houtskool:#22211F; --grafiet:#5F5B55; --asfalt:#2B2C2A; --asfalt-diep:#1F201E;
  --geel:#F6D35B; --oranje:#F29A4A; --groen:#A8D98A; --poeder:#B9D6E8; --munt:#CBEBD9; --perzik:#F5D3BC;
  --geel-diep:#8A6A00; --oranje-diep:#B3541E; --groen-diep:#3F7A33;
  --wit-06:rgba(250,247,240,.06); --wit-10:rgba(250,247,240,.10); --wit-16:rgba(250,247,240,.16); --wit-40:rgba(250,247,240,.42); --wit-74:rgba(250,247,240,.76);
  --zwart-06:rgba(34,33,31,.06); --zwart-12:rgba(34,33,31,.12); --zwart-28:rgba(34,33,31,.28); --zwart-38:rgba(34,33,31,.38); --zwart-50:rgba(34,33,31,.5);
  --dim:rgba(31,32,30,.44); --scrim:rgba(31,32,30,.5);
  --grid-licht:rgba(34,33,31,.055); --grid-donker:rgba(250,247,240,.065);
  /* scoretinten: vlakken voor groen (loopt lekker), geel (kan soepeler), oranje (hier haken ze af) */
  --tint-groen:color-mix(in srgb,var(--groen) 52%,var(--papier));
  --tint-geel:color-mix(in srgb,var(--geel) 50%,var(--papier));
  --tint-oranje:color-mix(in srgb,var(--oranje) 46%,var(--papier));
  --asfalt-kaart:color-mix(in srgb,var(--krijtwit) 5%,var(--asfalt));
  --f-display:"Bricolage Grotesque","Avenir Next","Segoe UI",system-ui,sans-serif;
  --f-body:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --f-mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --f-hand:"Caveat","Segoe Print","Bradley Hand","Chalkboard SE",cursive;
  --ease-out:cubic-bezier(.22,1,.36,1); --ease-chalk:cubic-bezier(.6,.05,.3,1);
  --r-card:22px; --r-ui:14px; --r-pill:999px;
  --sh-soft:0 1px 0 var(--zwart-06),0 14px 30px -18px var(--zwart-28);
  --sh-lift:0 1px 0 var(--zwart-06),0 28px 54px -24px var(--zwart-38);
  --sh-screen:0 2px 0 var(--zwart-06),0 38px 70px -30px var(--zwart-50),0 14px 28px -16px var(--zwart-28);
  /* ruimte: 4-8-12-16-24-32-48-64-96, plus de sectiemaat */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px;
  --section-y:clamp(76px,9vw,128px);
  --w-page:1200px; --w-narrow:936px; --w-text:776px;
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .13 0 0 0 0 .12 0 0 0 0 .1 0 0 0 1.9 -.62'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  --noise-light:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .98 0 0 0 0 .97 0 0 0 0 .94 0 0 0 .55 -.17'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  --noise-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='m' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 2.6 -.62'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23m)'/%3E%3C/svg%3E");
  --wobble:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'%3E%3Cpath d='M2 6.6C30 4.1 62 7.6 98 5.3S168 3.7 198 5.9' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ---------- basis ---------- */
[hidden]{display:none!important}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html.no-scroll{overflow:hidden}
body{margin:0;background:var(--krijtwit);color:var(--houtskool);font:400 17px/1.55 var(--f-body);overflow-x:clip;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-feature-settings:"ss01" 0}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--krijtwit)}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:95;background-image:var(--noise);opacity:.045}
img{max-width:100%}
a{color:inherit}
p{margin:0}
h1,h2,h3,h4{margin:0;font-family:var(--f-display);font-weight:800;letter-spacing:-.03em;line-height:1;text-wrap:balance;font-optical-sizing:auto}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit}
fieldset{border:0;margin:0;padding:0;min-width:0}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:focus-visible{outline:3px solid var(--houtskool);outline-offset:3px}
.on-dark :focus-visible{outline-color:var(--krijtwit)}
[data-quiet]:focus,[data-quiet]:focus-visible{outline:none}
.view h1[tabindex="-1"]:focus:not(:focus-visible){outline:none}
.skip{position:fixed;left:max(16px,env(safe-area-inset-left,0px));top:-80px;z-index:200;background:var(--houtskool);color:var(--krijtwit);padding:12px 16px;border-radius:10px;text-decoration:none;font-weight:600}
.skip:focus{top:calc(12px + env(safe-area-inset-top,0px))}
/* scrollen naar een sectie of een gefocust element houdt rekening met de sticky header; de onderkant volgt de mobiele bestelbalk (dea.js) */
html{scroll-padding-top:84px}
.mono{font-family:var(--f-mono)}
.hand{font-family:var(--f-hand);font-weight:700}
.view{display:block}
/* tot de router de juiste view kiest (DEA.start zet html[data-route]) blijft main even onzichtbaar,
   zodat een deep link niet eerst de homepage laat zien; zonder script verschijnt main na 1,5 s alsnog */
html:not([data-route]) main{animation:dea-reveal 0s 1.5s both}
@keyframes dea-reveal{from{visibility:hidden}to{visibility:visible}}

/* ---------- banden, wrappers, grid ---------- */
.band{position:relative;isolation:isolate}
.wrap{position:relative;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.inner{max-width:var(--w-page);margin-inline:auto;padding-inline:clamp(0px,2.4vw,28px)}
.inner.inner-narrow{max-width:var(--w-narrow)}
.inner.inner-text{max-width:var(--w-text)}
.section{padding-block:var(--section-y)}
.section-s{padding-block:clamp(48px,6vw,80px)}
.zand{background:var(--zand)}
.slab{border-radius:40px 40px 0 0;margin-top:-40px;z-index:3;background:var(--krijtwit)}
.dark{background:var(--asfalt);color:var(--krijtwit)}
.dark.slab{background:var(--asfalt)}
.zand.slab{background:var(--zand)}
.dark-bg,.grid-bg{position:absolute;inset:0;pointer-events:none;border-radius:inherit;z-index:-1}
.dark-bg{background-image:var(--noise-light),linear-gradient(to right,var(--grid-donker) 1px,transparent 1px),linear-gradient(to bottom,var(--grid-donker) 1px,transparent 1px);background-size:180px 180px,72px 72px,72px 72px}
.grid-bg{background-image:linear-gradient(to right,var(--grid-licht) 1px,transparent 1px),linear-gradient(to bottom,var(--grid-licht) 1px,transparent 1px);background-size:72px 72px;-webkit-mask-image:linear-gradient(to bottom,transparent,var(--houtskool) 14%,var(--houtskool) 86%,transparent);mask-image:linear-gradient(to bottom,transparent,var(--houtskool) 14%,var(--houtskool) 86%,transparent)}
.grid{display:grid;gap:var(--grid-gap,18px)}
.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center}
.split-wide{grid-template-columns:minmax(0,1.32fr) minmax(0,1fr)}
.stack{display:grid;gap:var(--stack-gap,16px);align-content:start}

/* ---------- typografie ---------- */
.h1{font-size:clamp(2.35rem,4.5vw,4.15rem);letter-spacing:-.036em;line-height:.98}
.h2{font-size:clamp(2rem,3.9vw,3.45rem);letter-spacing:-.033em;line-height:1}
.h3{font-size:clamp(1.16rem,1.5vw,1.34rem);letter-spacing:-.018em;line-height:1.15;font-weight:700}
.lead{font-size:clamp(1.05rem,1.3vw,1.19rem);line-height:1.55;color:var(--grafiet);max-width:37em}
.on-dark .lead{color:var(--wit-74)}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font:500 12.5px/1.25 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--grafiet)}
.eyebrow .dot{width:9px;height:9px;flex:none;border-radius:50%;background:var(--geel);box-shadow:0 0 0 3px color-mix(in srgb,var(--geel) 35%,transparent)}
.on-dark .eyebrow{color:var(--wit-74)}
.section-head{display:grid;gap:18px;max-width:800px;margin-bottom:clamp(36px,5vw,60px)}
.kicker{font:700 clamp(1.45rem,2.2vw,1.8rem)/1.08 var(--f-hand);color:var(--geel-diep);transform:rotate(-1.4deg);transform-origin:left center;max-width:30em}
.on-dark .kicker{color:var(--geel)}
.kicker-oranje{color:var(--oranje-diep)}
.body-l{font-size:1.08rem;line-height:1.6;max-width:36em}
.punch{margin-top:18px;font:700 1.12rem/1.4 var(--f-display);letter-spacing:-.01em}
.small{font-size:.875rem;line-height:1.5}
.label{font:600 11px/1.2 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--grafiet)}
.on-dark .label{color:var(--wit-74)}
.prose{max-width:65ch}
.prose > * + *{margin-top:1em}
.prose h2{font-size:clamp(1.5rem,2.4vw,2rem);letter-spacing:-.025em;line-height:1.1;margin-top:1.6em}
.prose h3{font-size:1.2rem;font-weight:700;letter-spacing:-.015em;line-height:1.2;margin-top:1.4em}
.prose ul{display:grid;gap:6px;padding-left:1.1em;list-style:disc}
.prose a{text-underline-offset:3px}
.muted{color:var(--grafiet)}
.on-dark .muted{color:var(--wit-74)}

/* ---------- krijt ---------- */
.ck-host{position:relative;display:inline-block;white-space:nowrap}
.ck-svg,.btn-ring{position:absolute;overflow:visible;pointer-events:none}
svg .ck{fill:none;stroke-linecap:round;stroke-linejoin:round}
.btn-ring{transition:opacity .25s}
.ck-make{display:block;overflow:visible;pointer-events:none}

/* ---------- knoppen en links ---------- */
.btn{--h:48px;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--h);padding:0 22px;border-radius:var(--r-pill);font:600 16px/1.1 var(--f-body);letter-spacing:-.005em;cursor:pointer;text-decoration:none;border:1.5px solid var(--houtskool);background:transparent;color:var(--houtskool);transition:transform .18s var(--ease-out),box-shadow .18s var(--ease-out),background-color .2s,color .2s;-webkit-tap-highlight-color:transparent;white-space:nowrap}
.btn-primary{background:var(--geel);box-shadow:0 3px 0 var(--houtskool)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 5px 0 var(--houtskool)}
.btn-primary:active{transform:translateY(2px);box-shadow:0 1px 0 var(--houtskool)}
.btn-ghost:hover{background:var(--zand)}
.on-dark .btn-ghost{border-color:var(--wit-40);color:var(--krijtwit)}
.on-dark .btn-ghost:hover{background:var(--wit-10)}
.btn-l{--h:56px;padding:0 26px;font-size:17px}
.btn-s{--h:44px;padding:0 17px;font-size:15px}
.btn .arr{width:18px;height:18px;flex:none;transition:transform .22s var(--ease-out)}
.btn .arr path{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn:hover .arr{transform:translateX(4px)}
.btn:focus-visible{outline-offset:4px}
/* de vaste lijn is een gewone onderstreping, zodat hij bij een link over twee regels onder elke regel staat
   (nooit door de tweede regel heen); de krijtveeg bij hover/focus ligt onder de laatste regel */
.link-chalk{position:relative;display:inline-flex;align-items:center;min-height:44px;font-weight:600;color:var(--houtskool);text-decoration:underline;text-decoration-thickness:1.5px;text-decoration-color:var(--kalk);text-underline-offset:7px;text-decoration-skip-ink:none}
.link-chalk::after{content:"";position:absolute;left:-3px;right:-3px;bottom:5px;height:9px;background:currentColor;-webkit-mask:var(--wobble) no-repeat center/100% 100%;mask:var(--wobble) no-repeat center/100% 100%;clip-path:inset(0 100% 0 0);transition:clip-path .4s var(--ease-chalk)}
.link-chalk:hover::after,.link-chalk:focus-visible::after{clip-path:inset(0 0 0 0)}
.on-dark .link-chalk{color:var(--krijtwit)}
.on-dark .link-chalk{text-decoration-color:var(--wit-40)}
button.link-chalk{background:none;border:0;padding:0;cursor:pointer;font:inherit;font-weight:600}
/* tekstlink midden in een zin (lead, alinea): houtskool, halfvet, onderstreept; een zin-link telt niet als los tikdoel */
.tlink{color:var(--houtskool);font-weight:600;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;text-decoration-color:var(--geel-diep);transition:text-decoration-color .2s}
.tlink:hover{text-decoration-color:currentColor}
.on-dark .tlink{color:var(--krijtwit);text-decoration-color:var(--geel)}

/* ---------- header ---------- */
.site-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;transition:transform .38s var(--ease-out),background-color .25s,box-shadow .25s}
.site-header.is-scrolled{background:color-mix(in srgb,var(--krijtwit) 93%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--kalk)}
.site-header.is-hidden{transform:translateY(calc(-100% - env(safe-area-inset-top,0px) - 4px))}
.kop-row{display:flex;align-items:center;gap:20px;min-height:72px}
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--houtskool);flex:none;border-radius:10px}
.logo-mark{position:relative;width:36px;height:36px;flex:none}
.logo-mark svg{position:absolute;inset:0;overflow:visible}
.logo-word{font:800 21px/1 var(--f-display);letter-spacing:-.035em;white-space:nowrap}
.logo-alsof{position:relative;display:inline-block}
.nav{display:flex;gap:2px;margin-left:auto}
.nav a{padding:9px 12px;border-radius:var(--r-pill);font-weight:500;font-size:15px;text-decoration:none;color:var(--houtskool);transition:background-color .2s,box-shadow .2s}
.nav a:hover{background:var(--zand)}
.nav a[aria-current]{background:var(--zand);box-shadow:inset 0 0 0 1px var(--kalk)}
.kop-acties{display:flex;align-items:center;gap:10px}
.menu-btn{display:none;width:46px;height:46px;border-radius:50%;border:1.5px solid var(--houtskool);background:var(--papier);align-items:center;justify-content:center;cursor:pointer}
.menu-ico{display:grid;gap:5px;width:18px}
.menu-ico i{display:block;height:2px;border-radius:2px;background:var(--houtskool)}
.menu-ico i:last-child{width:70%}
.kop-progress{position:absolute;left:0;right:0;bottom:-2px;height:3px;pointer-events:none}
.kop-progress i{display:block;height:100%;background:var(--geel);transform-origin:0 50%;transform:scaleX(0);-webkit-mask-image:var(--noise-mask);mask-image:var(--noise-mask);-webkit-mask-size:140px 140px;mask-size:140px 140px}
/* rustige header (DEA.config.calmHeader, standaard op #bestellen): alleen het logo */
html[data-calm] .nav,html[data-calm] .kop-acties{display:none}

/* ---------- paginakop van een view ---------- */
.page-intro{padding-block:clamp(28px,5vw,72px) clamp(64px,8vw,112px)}
.page-intro .eyebrow{margin-bottom:22px}
.page-intro .lead{margin-top:24px}
.page-intro .page-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 26px;margin-top:32px}

/* ---------- kaarten: tegel, scherm, asfaltkaart ---------- */
.tegel{position:relative;display:block;background:var(--krijtwit);border:1px solid var(--kalk);border-radius:var(--r-card);padding:clamp(18px,2.2vw,24px);box-shadow:var(--sh-soft);min-width:0;color:inherit;text-decoration:none;transition:transform .35s var(--ease-out),box-shadow .35s}
.tegel-zand{background:var(--zand)}
.tegel-papier{background:var(--papier)}
a.tegel:hover,.tegel.is-lift:hover{transform:translateY(-4px);box-shadow:var(--sh-lift)}
.scherm{position:relative;background:var(--papier);border:1px solid var(--kalk);border-radius:var(--r-ui);box-shadow:var(--sh-screen);overflow:hidden;min-width:0}
.scherm-scheef{transform:rotate(-1.2deg)}
.scherm-bar{display:flex;align-items:center;gap:10px;height:30px;padding:0 10px;background:var(--krijtwit);border-bottom:1px solid var(--kalk)}
.scherm-bar .dots{display:flex;gap:5px;flex:none}
.scherm-bar .dots i{width:8px;height:8px;border-radius:50%;background:var(--kalk)}
.scherm-bar .url{margin-inline:auto;height:18px;padding:0 14px;border-radius:var(--r-pill);background:var(--papier);border:1px solid var(--kalk);font:500 10px/16px var(--f-mono);color:var(--grafiet)}
.asfalt-kaart{position:relative;padding:18px 18px 20px;border-radius:var(--r-card);background:var(--asfalt-kaart);border:1px solid var(--wit-16);color:var(--krijtwit);min-width:0}
.asfalt-kaart p{color:var(--wit-74)}

/* ---------- chips, scorechips ---------- */
.chip{display:inline-flex;align-items:center;gap:7px;font:600 11.5px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;padding:7px 10px;border-radius:var(--r-pill);background:var(--zand);color:var(--houtskool);white-space:nowrap}
.chip .dot{width:8px;height:8px;flex:none;border-radius:50%;background:var(--geel)}
.chip-groen .dot{background:var(--groen-diep)}
.chip-oranje .dot{background:var(--oranje)}
.chip-munt{background:var(--munt)}
.zand .chip,.tegel-zand .chip{background:var(--krijtwit)}
.zand :is(.scherm,.tegel-papier) .chip{background:var(--zand)}
.chip.chip-munt{background:var(--munt)}
/* VOORBEELD-label: overal hetzelfde mono etiket bij verzonnen voorbeelden (namen, citaten, cijfers) */
.tag-vb{display:inline-flex;align-items:center;gap:6px;vertical-align:middle;font:600 11px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;padding:5px 8px;border-radius:6px;background:var(--zand);color:var(--grafiet);box-shadow:inset 0 0 0 1px var(--kalk);white-space:nowrap}
.zand .tag-vb,.tegel-zand .tag-vb{background:var(--krijtwit)}
.on-dark .tag-vb{background:var(--wit-10);color:var(--wit-74);box-shadow:inset 0 0 0 1px var(--wit-16)}
.on-dark .chip{background:var(--wit-10);color:var(--krijtwit)}
.score-chip{display:inline-flex;align-items:center;gap:6px;font:600 11px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;padding:6px 9px 6px 6px;border-radius:var(--r-pill);color:var(--houtskool);white-space:nowrap}
.score-chip b{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--papier);font:700 11px/1 var(--f-mono)}
.score-groen{background:var(--tint-groen)}
.score-geel{background:var(--tint-geel)}
.score-oranje{background:var(--tint-oranje)}

/* ---------- checklist en krijticonen ---------- */
.ci{position:relative;width:20px;height:18px;margin-top:3px}
.ci svg{position:absolute;inset:0;overflow:visible}
.checklist{display:grid}
.checklist li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;padding-block:8px;border-bottom:1px dashed var(--kalk);font-size:15.5px}
.checklist li:last-child{border-bottom:0}
.on-dark .checklist li{border-color:var(--wit-16)}
.ico{position:relative;display:inline-block;width:46px;height:46px;flex:none}
.ico svg{position:absolute;inset:0;overflow:visible}
.ico-tegel{border-radius:14px;background:var(--zand)}
.ico-tegel svg{inset:3px;width:40px;height:40px}

/* ---------- geduldmeter ---------- */
.g-bar{display:block;height:8px;border-radius:99px;background:var(--zand);margin-top:8px;overflow:hidden}
.g-fill{display:block;height:100%;width:100%;border-radius:inherit;background:var(--groen);transform-origin:0 50%;transition:transform .8s var(--ease-out),background-color .4s}

/* ---------- tijdlijn ---------- */
.tl{margin:26px 0 20px;display:grid;gap:0}
.tl li{position:relative;display:grid;grid-template-columns:26px minmax(0,1fr);gap:12px;padding-bottom:18px}
.tl li::before{content:"";position:absolute;left:12px;top:22px;bottom:0;width:1.5px;background:var(--kalk)}
.tl li:last-child::before{display:none}
.tl .tl-dot{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:var(--papier);box-shadow:inset 0 0 0 1.5px var(--houtskool);font:700 1.05rem/1 var(--f-hand)}
.tl li:first-child .tl-dot{background:var(--geel)}
.tl b{display:block;font-weight:700;color:var(--houtskool)}
.on-dark .tl b{color:var(--krijtwit)}
.tl span{color:var(--grafiet);font-size:15px}

/* ---------- accordeon (vragen) ---------- */
.faq-item{border-bottom:1px solid var(--kalk)}
.faq-item:first-child{border-top:1px solid var(--kalk)}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:18px;padding:20px 4px;background:none;border:0;cursor:pointer;text-align:left;font:700 clamp(1.07rem,1.5vw,1.24rem)/1.3 var(--f-display);letter-spacing:-.012em;color:var(--houtskool);border-radius:8px}
.faq-ico{position:relative;width:30px;height:30px;flex:none;border-radius:50%;background:var(--zand);transition:background-color .25s}
.faq-ico i{position:absolute;left:8px;right:8px;top:14px;height:2.4px;border-radius:2px;background:var(--houtskool);transition:transform .35s var(--ease-out);transform:rotate(-2deg)}
.faq-ico i:nth-child(2){transform:rotate(88deg)}
.faq-item.is-open .faq-ico{background:var(--geel)}
.faq-item.is-open .faq-ico i:nth-child(2){transform:rotate(0deg) scaleX(0)}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .42s var(--ease-out)}
.faq-item.is-open .faq-a{grid-template-rows:1fr}
.faq-a > div{overflow:hidden;visibility:hidden;transition:visibility 0s .42s}
.faq-item.is-open .faq-a > div{visibility:visible;transition:visibility 0s 0s}
.faq-a p{padding:0 50px 22px 4px;color:var(--grafiet);max-width:62ch}

/* ---------- tabs en schakelaars ---------- */
.tabs{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;border-radius:24px;background:var(--zand);border:1px solid var(--kalk);max-width:100%}
.tab{min-height:40px;padding:0 18px;border-radius:var(--r-pill);border:0;background:transparent;font:600 14.5px/1.2 var(--f-body);color:var(--grafiet);cursor:pointer;transition:background-color .2s,color .2s}
.tab:hover{color:var(--houtskool)}
.tab[aria-selected="true"]{background:var(--papier);color:var(--houtskool);box-shadow:0 1px 0 var(--zwart-12),0 0 0 1px var(--kalk)}
.toggle{display:inline-flex;padding:4px;border-radius:var(--r-pill);background:var(--zand);border:1px solid var(--kalk)}
.toggle button{min-height:40px;padding:0 16px;border-radius:var(--r-pill);border:0;background:transparent;font:600 12px/1 var(--f-mono);letter-spacing:.06em;cursor:pointer;color:var(--grafiet)}
.toggle button[aria-pressed="true"]{background:var(--papier);color:var(--houtskool);box-shadow:0 1px 0 var(--zwart-12),0 0 0 1px var(--kalk)}

/* ---------- prijzen: rollende cijfers (odometer) ---------- */
.odo{display:inline-flex;line-height:1}
.odo-d{display:inline-block;height:1em;overflow:hidden;line-height:1}
.odo-col{display:block;transition:transform .7s var(--ease-out)}
.odo-col span{display:block;height:1em}

/* ---------- formulieren ---------- */
.field{display:grid;gap:7px;margin-bottom:18px}
.field > label,.field > .lab{font-weight:600;font-size:14.5px}
.field .opt-label{font-weight:400;color:var(--grafiet)}
.field .hint{font-size:13px;color:var(--grafiet);line-height:1.4}
.input{width:100%;min-height:50px;padding:12px 14px;border-radius:12px;border:1.5px solid color-mix(in srgb,var(--houtskool) 45%,var(--kalk));background:var(--papier);font:400 16px/1.35 var(--f-body);color:var(--houtskool);transition:border-color .2s,box-shadow .2s}
textarea.input{min-height:92px;resize:vertical}
select.input{appearance:none;-webkit-appearance:none;padding-right:40px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2322211F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;background-size:12px 8px}
.input:focus{outline:none;border-color:var(--houtskool);box-shadow:0 0 0 3px color-mix(in srgb,var(--geel) 65%,transparent)}
.input[aria-invalid="true"]{border-color:var(--oranje-diep)}
.err{font-size:13.5px;line-height:1.35;color:var(--oranje-diep);font-weight:500}
.err:empty{display:none}
.opt{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px 12px;align-items:center;padding:15px 16px;margin-bottom:10px;border-radius:14px;border:1.5px solid var(--kalk);background:var(--papier);cursor:pointer;transition:border-color .2s,box-shadow .2s}
.opt input{position:absolute;opacity:0;pointer-events:none}
.opt:has(input:checked){border-color:var(--houtskool);box-shadow:0 3px 0 var(--houtskool)}
.opt:has(input:focus-visible){outline:3px solid var(--houtskool);outline-offset:3px}
.opt-plain{grid-template-columns:auto minmax(0,1fr)}
.radio-dot{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--houtskool);display:grid;place-items:center}
.opt input:checked + .radio-dot::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--houtskool)}
.check-box{width:20px;height:20px;border-radius:6px;border:1.5px solid var(--houtskool);display:grid;place-items:center;background:var(--papier)}
.opt input:checked + .check-box{background:var(--geel)}
.opt input:checked + .check-box::after{content:"";width:9px;height:5px;border-left:2px solid var(--houtskool);border-bottom:2px solid var(--houtskool);transform:rotate(-45deg) translate(1px,-1px)}
.opt b{font-weight:700}
.opt small{grid-column:2/3;color:var(--grafiet);font-size:13.5px;line-height:1.35}
.opt .opt-price{font:700 1rem/1 var(--f-body);font-variant-numeric:tabular-nums;white-space:nowrap}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip-opt{position:relative}
.chip-opt input{position:absolute;opacity:0;pointer-events:none}
.chip-opt > span{display:inline-flex;align-items:center;min-height:42px;padding:0 15px;border-radius:var(--r-pill);border:1.5px solid var(--kalk);background:var(--papier);font-weight:500;font-size:15px;cursor:pointer;transition:background-color .2s,border-color .2s}
.chip-opt input:checked + span{background:var(--geel);border-color:var(--houtskool)}
.chip-opt input:focus-visible + span{outline:3px solid var(--houtskool);outline-offset:2px}
.url-status{display:flex;align-items:center;gap:8px;font:500 12.5px/1.3 var(--f-mono);color:var(--grafiet);min-height:18px}
.url-status.ok{color:var(--groen-diep)}
.btw-status{font:500 12.5px/1.3 var(--f-mono);color:var(--groen-diep)}
.btw-status:empty{display:none}
.scan{width:60px;height:4px;border-radius:2px;background:var(--zand);overflow:hidden}
.scan i{display:block;width:40%;height:100%;background:var(--houtskool);animation:dea-scan .8s ease-in-out infinite alternate}
@keyframes dea-scan{to{transform:translateX(150%)}}

/* ---------- CTA-band (slot van elke pagina) ---------- */
.cta-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.8fr);gap:clamp(24px,4vw,60px);align-items:center}
.cta-band .h2{font-size:clamp(2.3rem,4.8vw,4.2rem);margin:16px 0 22px}
.cta-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:32px}
.cta-micro{margin-top:22px;font:500 12px/1.5 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--wit-74)}
.hop{position:relative;width:100%;max-width:340px;margin-inline:auto;aspect-ratio:300/420}
.hop svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.cta-ring-host{position:relative;display:inline-block}
.dust{position:fixed;border-radius:50%;pointer-events:none;z-index:180}

/* ---------- footer ---------- */
.footer{background:var(--asfalt-diep);color:var(--krijtwit);padding-block:clamp(56px,7vw,88px) calc(28px + env(safe-area-inset-bottom,0px));margin-bottom:calc(-1 * env(safe-area-inset-bottom,0px))}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:32px}
.foot-brand .logo{color:var(--krijtwit)}
.foot-tag{margin-top:16px;font:700 1.5rem/1.1 var(--f-hand);color:var(--geel)}
.foot-mail{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:22px}
.foot-mail code{font:500 15px/1 var(--f-mono);user-select:all;padding:10px 12px;border-radius:10px;background:var(--wit-06);border:1px solid var(--wit-16)}
.copy-btn{min-height:40px;padding:0 14px;border-radius:var(--r-pill);border:1px solid var(--wit-40);background:transparent;color:var(--krijtwit);font:600 12px/1 var(--f-mono);letter-spacing:.06em;cursor:pointer}
.copy-btn:hover{background:var(--wit-10)}
.foot-reply{margin-top:12px;color:var(--wit-74);font-size:14.5px}
.foot-col h4{font:600 11px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--wit-74);margin-bottom:14px}
.foot-col a{display:block;padding-block:6px;text-decoration:none;color:var(--krijtwit);font-size:15.5px}
.foot-col a:hover,.foot-col a[aria-current]{text-decoration:underline;text-underline-offset:4px}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px;margin-top:48px;padding-top:22px;border-top:1px solid var(--wit-16)}
.foot-meta{display:grid;gap:12px;min-width:0}
.foot-endorse{display:grid;gap:0}
.foot-endorse-label{font:500 11px/1.4 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--wit-74)}
.foot-endorse-line{font-size:14.5px;line-height:1.3;color:var(--krijtwit)}
.foot-endorse-line .link-chalk{min-height:34px;text-underline-offset:5px}
.foot-endorse-line .link-chalk::after{bottom:2px}
.foot-legal{font:500 11.5px/1.4 var(--f-mono);letter-spacing:.06em;color:var(--wit-74)}
.foot-legal > span:not(.foot-sep){white-space:nowrap}   /* naam, adres en KvK + btw breken alleen tussen de delen */
.foot-end{display:flex;align-items:center;gap:8px;font:700 1.35rem/1 var(--f-hand);color:var(--krijtwit)}
.foot-end span{position:relative;width:46px;height:26px}
.foot-end svg{position:absolute;inset:0;overflow:visible}

/* ---------- mobiele bestelbalk ---------- */
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;align-items:center;justify-content:space-between;gap:12px;padding:10px max(16px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));background:color-mix(in srgb,var(--krijtwit) 95%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid var(--kalk);transform:translateY(110%);transition:transform .4s var(--ease-out)}
.mbar.is-on{transform:none}
.mbar p{min-width:0;font:600 15px/1.2 var(--f-body)}
.mbar p small{display:block;font:500 11px/1.2 var(--f-mono);letter-spacing:.06em;color:var(--grafiet);text-transform:uppercase}

/* ---------- menu, panelen, modals, toast ---------- */
.sheet{position:fixed;inset:0;z-index:130;background:var(--krijtwit);display:flex;flex-direction:column;gap:18px;padding:env(safe-area-inset-top,0px) max(16px,env(safe-area-inset-right,0px)) calc(24px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));overflow:auto;opacity:0;transform:translateY(-12px);transition:opacity .3s,transform .4s var(--ease-out)}
.sheet.is-open{opacity:1;transform:none}
.sheet-top{display:flex;justify-content:space-between;align-items:center;min-height:72px}
.sheet > *{margin-inline:clamp(0px,2.4vw,28px)}
.sheet-logo{text-decoration:none;color:var(--houtskool);border-radius:8px}
.sheet nav{display:grid}
.sheet nav a{display:flex;align-items:center;gap:14px;font:800 2rem/1.1 var(--f-display);letter-spacing:-.03em;padding:14px 0;text-decoration:none;border-bottom:1px solid var(--kalk)}
.sheet nav a[aria-current]::after{content:"";width:11px;height:11px;flex:none;border-radius:50%;background:var(--geel);box-shadow:0 0 0 3px color-mix(in srgb,var(--geel) 35%,transparent)}
.sheet .btn{margin-top:auto}
.x-btn{width:46px;height:46px;flex:none;display:grid;place-items:center;border-radius:50%;border:1.5px solid var(--houtskool);background:var(--papier);cursor:pointer;font:400 26px/1 var(--f-body)}
.x-btn svg{width:16px;height:16px}
.x-btn path{stroke:var(--houtskool);stroke-width:2.2;stroke-linecap:round}
.scrim{position:fixed;inset:0;z-index:140;background:var(--scrim);opacity:0;transition:opacity .35s}
.scrim.is-open{opacity:1}
.panel{position:fixed;top:0;right:0;bottom:0;z-index:150;width:min(500px,100%);background:var(--krijtwit);box-shadow:-30px 0 70px -30px var(--zwart-50);display:flex;flex-direction:column;transform:translateX(104%);transition:transform .48s var(--ease-out);padding-top:env(safe-area-inset-top,0px);padding-right:env(safe-area-inset-right,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.panel.is-open{transform:none}
.modal{position:fixed;inset:0;z-index:150;display:grid;place-items:center;padding:calc(16px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) calc(16px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));opacity:0;transition:opacity .3s}
.modal.is-open{opacity:1}
.modal > .scrim{position:absolute;z-index:0}
.modal-card{position:relative;z-index:1;width:min(1080px,100%);max-height:100%;overflow:auto;background:var(--krijtwit);border-radius:var(--r-card);box-shadow:var(--sh-screen);padding:clamp(18px,3vw,32px);transform:translateY(14px);transition:transform .45s var(--ease-out)}
.modal.is-open .modal-card{transform:none}
.modal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.modal-head .h3{font-size:clamp(1.4rem,2.4vw,2rem);font-weight:800;margin-top:10px}
.modal-intro{margin-top:10px;color:var(--grafiet);max-width:60ch}
.toast-g{position:fixed;left:max(16px,env(safe-area-inset-left,0px));right:max(16px,env(safe-area-inset-right,0px));margin-inline:auto;width:fit-content;bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:190;max-width:560px;transform:translateY(24px);opacity:0;pointer-events:none;background:var(--houtskool);color:var(--krijtwit);padding:13px 18px;border-radius:16px;font:500 14.5px/1.35 var(--f-body);box-shadow:var(--sh-lift);transition:opacity .3s,transform .4s var(--ease-out)}
.toast-g.is-on{opacity:1;transform:none}

/* ---------- bestelflow: paneel (.panel) en pagina (.of-page) ---------- */
.p-head{padding:18px 22px 14px;border-bottom:1px solid var(--kalk);background:var(--krijtwit)}
.p-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.p-title{font:800 1.6rem/1.05 var(--f-display);letter-spacing:-.03em}
.p-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 18px;margin-top:14px}
.p-steps{display:flex;gap:8px}
.p-steps li{position:relative;width:34px;height:34px;display:grid;place-items:center;font:700 1.25rem/1 var(--f-hand);border-radius:8px;box-shadow:inset 0 0 0 1.5px var(--kalk);color:var(--grafiet);transition:background-color .3s,color .3s,box-shadow .3s}
.p-steps li.is-cur{background:var(--geel);color:var(--houtskool);box-shadow:inset 0 0 0 1.5px var(--houtskool)}
.p-steps li.is-done{background:color-mix(in srgb,var(--groen) 60%,var(--papier));color:var(--houtskool)}
.p-geduld{display:grid;grid-template-columns:auto 84px;align-items:center;gap:4px 10px}
.p-geduld .mono{font-size:11px;letter-spacing:.08em;color:var(--grafiet)}
.p-geduld .g-bar{margin:0}
.p-geduld .g-fill{background:var(--groen)}
.p-geduld .hand{grid-column:1/-1;justify-self:end;font-size:1.1rem;line-height:1;color:var(--groen-diep);transform:rotate(-2deg)}
.p-body{flex:1;overflow:auto;padding:22px 22px 28px;overscroll-behavior:contain}
.p-step legend{font:800 1.3rem/1.1 var(--f-display);letter-spacing:-.02em;margin-bottom:16px;padding:0}
.p-step .label{margin:22px 0 12px;line-height:1}
.sum{border-radius:14px;background:var(--papier);border:1px solid var(--kalk);padding:14px 16px;margin:6px 0 18px}
.sum-row{display:flex;justify-content:space-between;gap:12px;font-size:15px;padding-block:4px;font-variant-numeric:tabular-nums}
.sum-row span:last-child{font-weight:600}
.sum-total{font-weight:700;border-top:1px dashed var(--kalk);margin-top:6px;padding-top:10px}
.pay-note{font-size:13px;color:var(--grafiet);margin-top:10px;line-height:1.45}
/* extra concurrenten (alleen bij Klantproef + Concurrent): een teller onder die optie */
.of-extra{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin:-2px 0 12px;padding:12px 14px 12px 16px;border-radius:14px;border:1.5px dashed color-mix(in srgb,var(--houtskool) 30%,var(--kalk));background:var(--papier)}
.of-extra-txt{display:grid;gap:3px;min-width:0}
.of-extra-txt b{font-weight:700;font-size:15px}
.of-extra-txt small{color:var(--grafiet);font-size:13px;line-height:1.35}
.of-stepper{display:inline-flex;align-items:center;gap:4px;flex:none}
.of-sbtn{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--houtskool);background:var(--papier);cursor:pointer;color:var(--houtskool);transition:background-color .2s}
.of-sbtn svg{width:16px;height:16px}
.of-sbtn path{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.of-sbtn:hover{background:var(--zand)}
.of-sbtn[aria-disabled="true"]{border-color:var(--kalk);color:color-mix(in srgb,var(--grafiet) 70%,var(--kalk));cursor:default;background:var(--papier)}
.of-extra-n{min-width:34px;text-align:center;font:700 1.35rem/1 var(--f-display);font-variant-numeric:tabular-nums}
.of-terms{margin:6px 0 4px;font-size:14.5px;line-height:1.45;color:var(--grafiet)}
.of-terms a,.opt-akkoord a{color:var(--houtskool);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
.opt-akkoord{align-items:start;font-size:14.5px;line-height:1.5}
.opt-akkoord .check-box{margin-top:1px}
.of-msg{margin:4px 0 14px;padding:12px 14px;border-radius:12px;background:var(--tint-oranje);color:var(--houtskool);font-size:14.5px;line-height:1.45}
.of-msg:focus{outline:none}
.of-msg:focus-visible{outline:3px solid var(--houtskool);outline-offset:3px}
.p-redirect{padding:18px 0 8px}
.p-redirect-h{font:800 1.6rem/1.1 var(--f-display);letter-spacing:-.03em}
.p-redirect .sub{margin-top:12px;color:var(--grafiet)}
.p-redirect:focus{outline:none}
.is-paying [data-of-next],.is-away [data-of-next]{cursor:progress;opacity:.85}
.p-foot{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;padding:14px 22px;border-top:1px solid var(--kalk);background:var(--krijtwit)}
.p-foot .btn-primary{margin-left:auto}
.p-timer{width:100%;font:500 11.5px/1 var(--f-mono);letter-spacing:.06em;color:var(--grafiet);text-transform:uppercase}
.p-endorse{width:100%;margin-top:-4px;font:500 11px/1.35 var(--f-mono);letter-spacing:.03em;color:var(--grafiet)}
.p-done h3{font:800 2.1rem/1 var(--f-display);letter-spacing:-.035em}
.p-done .sub{margin-top:12px;font-size:1.06rem;color:var(--grafiet)}
.proto-note{font:500 11.5px/1.4 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--grafiet);padding:10px 12px;border-radius:10px;background:var(--zand)}
.of-page{display:flex;flex-direction:column;background:var(--krijtwit);border:1px solid var(--kalk);border-radius:var(--r-card);box-shadow:var(--sh-lift);overflow:hidden;max-width:620px}
.of-page .p-body{flex:none;overflow:visible}
.of-page .p-head,.of-page .p-foot{background:var(--papier)}

/* ---------- hulpklassen ---------- */
.center{text-align:center}
.nowrap{white-space:nowrap}
.mt-0{margin-top:0}.mt-s{margin-top:var(--s-3)}.mt-m{margin-top:var(--s-5)}.mt-l{margin-top:var(--s-6)}.mt-xl{margin-top:var(--s-7)}
.mb-0{margin-bottom:0}.mb-s{margin-bottom:var(--s-3)}.mb-m{margin-bottom:var(--s-5)}.mb-l{margin-bottom:var(--s-6)}.mb-xl{margin-bottom:var(--s-7)}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .nav{display:none}
  .menu-btn{display:inline-flex}
  .kop-acties{margin-left:auto}
  .cta-grid,.split{grid-template-columns:minmax(0,1fr)}
  .cols-3,.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .foot-brand{grid-column:1/-1}
  .hop{max-width:260px}
}
@media (max-width:820px){
  .mbar{display:flex}
  .kop-acties .btn{display:none}
  .mbar.is-on ~ .toast-g{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
}
@media (max-width:700px){
  .cols-2,.cols-3,.cols-4{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .btn{white-space:normal;text-align:center;line-height:1.2}
  .btn-l{padding:10px 22px}
  .logo-word{font-size:19px}
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-legal > span{display:block}   /* telefoon: naam, adres, KvK en btw onder elkaar */
  .foot-legal .foot-sep{display:none}
  .faq-a p{padding-right:4px}
  .panel{width:100%}
  .p-head{padding:14px 16px 12px}
  .p-body{padding-inline:16px}
  .p-foot{padding-inline:16px}
  .p-foot .btn{padding-inline:16px}
}
@media (max-height:500px){
  .p-geduld .hand{display:none}
  .p-meta{margin-top:8px}
}
/* aanraakschermen: tikdoelen minimaal 44px */
@media (pointer:coarse){
  .logo{min-height:44px}
  .nav a{padding-block:10.5px}
  .toggle button,.tab{min-height:44px}
  .copy-btn{min-height:44px}
  .chip-opt > span{min-height:44px}
  .foot-col a{padding-block:10px}
  .foot-endorse-line .link-chalk{min-height:44px;text-underline-offset:7px}
  .foot-endorse-line .link-chalk::after{bottom:5px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important}
}

/* ===== view: home ===== */
/* home: alle selectors beginnen met [data-view="home"] */
[data-view="home"] .magnet{display:inline-block;padding:10px;margin:-10px;transition:transform .3s var(--ease-out)}
[data-view="home"] .hero{padding-block:clamp(18px,3.6vw,52px) clamp(60px,7vw,104px);overflow:clip}
[data-view="home"] .hero-bg{position:absolute;inset:0;pointer-events:none;z-index:-1;background-image:linear-gradient(to right,var(--grid-licht) 1px,transparent 1px),linear-gradient(to bottom,var(--grid-licht) 1px,transparent 1px);background-size:72px 72px;-webkit-mask-image:radial-gradient(ellipse 72% 82% at 74% 46%,var(--houtskool) 18%,transparent 78%);mask-image:radial-gradient(ellipse 72% 82% at 74% 46%,var(--houtskool) 18%,transparent 78%)}
[data-view="home"] .smudge{position:absolute;border-radius:50%;pointer-events:none;z-index:-1;-webkit-mask-image:var(--noise-mask);mask-image:var(--noise-mask);-webkit-mask-size:140px 140px;mask-size:140px 140px}
[data-view="home"] .smudge-geel{background:radial-gradient(closest-side,var(--geel) 0%,var(--geel) 38%,transparent 100%);opacity:.85}
[data-view="home"] .smudge-groen{background:radial-gradient(closest-side,var(--groen) 0%,var(--groen) 34%,transparent 100%);opacity:.7}
[data-view="home"] .hero-grid{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,1fr);gap:clamp(28px,4.4vw,64px);align-items:center}
[data-view="home"] .hero-copy{position:relative;min-width:0}
[data-view="home"] .hero-copy .eyebrow{margin-bottom:22px}
[data-view="home"] .hero-lead{margin-top:24px}
[data-view="home"] .hero-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:12px 26px;margin-top:32px}
[data-view="home"] .hero-note{flex-basis:100%;display:flex;align-items:flex-start;gap:6px;margin:-2px 0 0 30px;transform:rotate(-3deg);transform-origin:left top;font:700 1.42rem/1.05 var(--f-hand);color:var(--grafiet);max-width:22em}
[data-view="home"] .hero-note-arrow{position:relative;width:44px;height:38px;flex:none;margin-top:-20px}
[data-view="home"] .hero-note-arrow svg{position:absolute;inset:0}
[data-view="home"] .trust{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:30px}
[data-view="home"] .trust li{display:flex;align-items:center;gap:8px;font:500 12.5px/1.3 var(--f-mono);letter-spacing:.06em;text-transform:uppercase}
[data-view="home"] .tick{position:relative;width:18px;height:16px;flex:none}
[data-view="home"] .tick svg{position:absolute;inset:0;overflow:visible}
[data-view="home"] .hero-smudge-groen{left:-120px;bottom:-140px;width:420px;height:320px}

/* ---------- hero-demo: de proefrit ---------- */
[data-view="home"] .demo{position:relative;width:100%;max-width:600px;margin-inline:auto}
[data-view="home"] .demo-smudge{left:12%;top:4%;width:86%;height:92%}
[data-view="home"] .demo-viewport{position:relative;width:100%;aspect-ratio:480/460}
[data-view="home"] .demo-stage{position:absolute;left:0;top:0;width:480px;height:460px;transform-origin:0 0}
[data-view="home"] .demo-tilt{position:absolute;inset:0}
@media (min-width:981px){[data-view="home"] .demo-tilt{transform:rotate(-1.2deg)}}
[data-view="home"] .browser{position:absolute;left:16px;top:58px;width:448px;height:352px;background:var(--papier);border:1px solid var(--kalk);border-radius:14px;box-shadow:var(--sh-screen);overflow:hidden}
[data-view="home"] .b-bar{position:absolute;inset:0 0 auto;height:30px;display:flex;align-items:center;gap:10px;padding:0 10px;background:var(--krijtwit);border-bottom:1px solid var(--kalk)}
[data-view="home"] .b-dots{display:flex;gap:5px;flex:none}
[data-view="home"] .b-dots i{width:8px;height:8px;border-radius:50%;background:var(--kalk)}
[data-view="home"] .b-url{margin-inline:auto;height:18px;padding:0 14px;border-radius:var(--r-pill);background:var(--papier);border:1px solid var(--kalk);font:500 10px/16px var(--f-mono);color:var(--grafiet)}
[data-view="home"] .b-badge{display:flex;align-items:center;gap:6px;font:600 9px/1 var(--f-mono);letter-spacing:.08em;color:var(--houtskool);white-space:nowrap;flex:none;min-width:118px;justify-content:flex-end}
[data-view="home"] .b-badge .pulse{width:7px;height:7px;border-radius:50%;background:var(--oranje)}
[data-view="home"] .b-badge[data-state="loopt"] .pulse{animation:home-pulse 1.1s ease-in-out infinite}
[data-view="home"] .b-badge[data-state="wacht"] .pulse{background:var(--geel)}
[data-view="home"] .b-badge[data-state="klaar"] .pulse{background:var(--groen)}
[data-view="home"] .b-time{color:var(--grafiet);font-weight:500;font-variant-numeric:tabular-nums}
@keyframes home-pulse{50%{transform:scale(.55);opacity:.5}}
[data-view="home"] .b-body{position:absolute;left:0;top:30px;width:448px;height:322px;overflow:hidden}
[data-view="home"] .dv{position:absolute;inset:0;transition:transform .5s var(--ease-out),opacity .35s,visibility 0s}
[data-view="home"] .dv-form{transform:translateX(26px);opacity:0;visibility:hidden}
[data-view="home"] .show-form .dv-home{transform:translateX(-26px);opacity:0;visibility:hidden}
[data-view="home"] .show-form .dv-form{transform:none;opacity:1;visibility:visible}
[data-view="home"] .ms-nav{position:absolute;left:0;top:0;width:448px;height:40px;border-bottom:1px solid var(--kalk)}
[data-view="home"] .ms-logo{position:absolute;left:16px;top:12px;font:800 15px/1 var(--f-display);letter-spacing:-.03em}
[data-view="home"] .ms-link{position:absolute;top:14px;font:500 11px/1 var(--f-body);color:var(--grafiet);transition:color .2s}
[data-view="home"] .ms-link.is-hover{color:var(--houtskool);text-decoration:underline}
[data-view="home"] .ms-l1{left:150px}[data-view="home"] .ms-l2{left:242px}[data-view="home"] .ms-l3{left:294px}
[data-view="home"] .ms-btn{position:absolute;left:350px;top:9px;height:22px;padding:0 10px;border-radius:var(--r-pill);background:var(--houtskool);color:var(--krijtwit);font:600 10px/22px var(--f-body);white-space:nowrap;transition:transform .15s}
[data-view="home"] .ms-btn.is-pressed,[data-view="home"] .mf-send.is-pressed{transform:scale(.94)}
[data-view="home"] .ms-h{position:absolute;left:16px;top:58px;width:200px;font:800 25px/1 var(--f-display);letter-spacing:-.035em}
[data-view="home"] .ms-sub{position:absolute;left:16px;top:114px;width:196px;font:400 10.5px/1.4 var(--f-body);color:var(--grafiet)}
[data-view="home"] .ms-cta{position:absolute;left:16px;top:146px;height:24px;padding:0 12px;border-radius:var(--r-pill);border:1px solid var(--houtskool);font:600 10px/22px var(--f-body)}
[data-view="home"] .ms-photo{position:absolute;left:230px;top:54px;width:202px;height:112px;border-radius:10px;overflow:hidden}
[data-view="home"] .ms-photo svg{display:block;width:100%;height:100%}
[data-view="home"] .ms-cards{position:absolute;left:16px;top:186px;width:416px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
[data-view="home"] .ms-card{height:72px;border:1px solid var(--kalk);border-radius:10px;padding:9px 10px;background:var(--papier)}
[data-view="home"] .ms-card i{display:block;width:18px;height:18px;border-radius:50%;margin-bottom:7px}
[data-view="home"] .ms-card i.c1{background:var(--munt)}[data-view="home"] .ms-card i.c2{background:var(--perzik)}[data-view="home"] .ms-card i.c3{background:var(--poeder)}
[data-view="home"] .ms-card b{display:block;font:700 11.5px/1.1 var(--f-body)}
[data-view="home"] .ms-card span{font:400 9.5px/1.3 var(--f-body);color:var(--grafiet)}
[data-view="home"] .ms-foot{position:absolute;left:16px;top:280px;width:416px;display:flex;justify-content:space-between;font:400 9px/1.4 var(--f-body);color:var(--grafiet);border-top:1px solid var(--kalk);padding-top:10px}
[data-view="home"] .mf-title{position:absolute;left:16px;top:14px;font:800 16px/1 var(--f-display);letter-spacing:-.02em}
[data-view="home"] .mf-grid{position:absolute;left:16px;top:42px;width:416px;display:grid;grid-template-columns:1fr 1fr;gap:9px 16px}
[data-view="home"] .mf-field{display:grid;gap:3px}
[data-view="home"] .mf-field.full{grid-column:1/-1}
[data-view="home"] .mf-field .lbl{font:500 9.5px/1 var(--f-body);color:var(--grafiet)}
[data-view="home"] .mf-field .inp{display:block;height:22px;border:1px solid var(--kalk);border-radius:6px;background:var(--krijtwit);transition:border-color .2s,box-shadow .2s}
[data-view="home"] .mf-field.is-counted .inp{border-color:var(--oranje);box-shadow:0 0 0 2px color-mix(in srgb,var(--oranje) 28%,transparent)}
[data-view="home"] .mf-send{position:absolute;left:16px;top:284px;height:26px;padding:0 16px;border-radius:var(--r-pill);background:var(--houtskool);color:var(--krijtwit);font:600 11px/26px var(--f-body);transition:transform .15s}
[data-view="home"] .b-toast{position:absolute;left:138px;top:284px;transform:translateY(8px);opacity:0;padding:6px 12px;border-radius:var(--r-pill);background:var(--houtskool);color:var(--krijtwit);font:600 10.5px/1 var(--f-mono);letter-spacing:.04em;white-space:nowrap;transition:opacity .3s,transform .4s var(--ease-out)}
[data-view="home"] .b-toast.is-on{opacity:1;transform:none}
[data-view="home"] .d-ink{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
[data-view="home"] .d-anns{position:absolute;inset:0;pointer-events:none}
[data-view="home"] .ann{position:absolute;left:0;top:0;font:700 22px/1 var(--f-hand);padding:3px 9px 4px;border-radius:8px;background:color-mix(in srgb,var(--krijtwit) 90%,transparent);white-space:nowrap;transform:rotate(-2.5deg);clip-path:inset(-6px 100% -6px -6px);transition:clip-path .28s var(--ease-chalk)}
[data-view="home"] .ann.is-on{clip-path:inset(-6px -6px -6px -6px);transition-duration:.6s}
[data-view="home"] .ann-groen{color:var(--groen-diep)}[data-view="home"] .ann-oranje{color:var(--oranje-diep)}[data-view="home"] .ann-geel{color:var(--geel-diep)}
[data-view="home"] .rol{position:absolute;left:0;top:0;display:flex;gap:9px;align-items:flex-start;white-space:nowrap;padding:9px 12px 10px;border-radius:12px;background:var(--papier);border:1px solid var(--kalk);box-shadow:var(--sh-soft);font:400 12.5px/1.3 var(--f-body);transform:rotate(-2deg) translateY(-6px);opacity:0;transition:opacity .35s,transform .5s var(--ease-out);z-index:6}
[data-view="home"] .rol.is-on{opacity:1;transform:rotate(-2deg)}
[data-view="home"] .rol strong{font-weight:700}
[data-view="home"] .rol-tag{flex:none;font:600 9.5px/1 var(--f-mono);letter-spacing:.1em;background:var(--houtskool);color:var(--krijtwit);border-radius:5px;padding:4px 5px;margin-top:1px}
[data-view="home"] .geduld{position:absolute;right:0;top:2px;width:206px;padding:9px 12px 10px;border-radius:12px;background:var(--papier);border:1px solid var(--kalk);box-shadow:var(--sh-soft);transform:rotate(1.5deg);z-index:6}
[data-view="home"] .g-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font:600 9.5px/1 var(--f-mono);letter-spacing:.08em;color:var(--grafiet)}
[data-view="home"] .g-pct{font:600 15px/1 var(--f-mono);color:var(--houtskool);letter-spacing:0;font-variant-numeric:tabular-nums}
[data-view="home"] .geduld[data-level="mid"] .g-fill{background:var(--geel)}
[data-view="home"] .geduld[data-level="laag"] .g-fill{background:var(--oranje)}
[data-view="home"] .geduld.is-low .g-fill{animation:home-blink .8s ease-in-out infinite}
@keyframes home-blink{50%{opacity:.3}}
[data-view="home"] .wcard{position:absolute;left:236px;top:238px;width:226px;padding:12px 14px 12px;border-radius:14px;background:var(--papier);border:1px solid var(--kalk);box-shadow:var(--sh-lift);transform:rotate(2deg) translateY(12px);opacity:0;transition:opacity .35s,transform .5s var(--ease-out);z-index:4}
[data-view="home"] .wcard.is-on{opacity:1;transform:rotate(2deg)}
[data-view="home"] .wc-top{display:flex;align-items:center;gap:8px;font:700 13px/1.1 var(--f-body)}
[data-view="home"] .wc-top svg{width:18px;height:18px;flex:none}
[data-view="home"] .wc-top svg *{fill:none;stroke:var(--houtskool);stroke-width:2;stroke-linecap:round}
[data-view="home"] .wc-days{position:relative;display:flex;gap:16px;margin:10px 0 6px;height:44px}
[data-view="home"] .wc-day{font:600 10px/1 var(--f-mono);color:var(--grafiet);width:44px}
[data-view="home"] .wc-days svg{position:absolute;left:0;top:14px;overflow:visible}
[data-view="home"] .wc-foot{font:600 10.5px/1.2 var(--f-mono);color:var(--grafiet);transition:color .3s}
[data-view="home"] .wcard.is-done .wc-foot{color:var(--oranje-diep)}
[data-view="home"] .rcard{position:absolute;left:48px;top:122px;width:384px;padding:15px 18px 17px;border-radius:16px;background:var(--papier);border:1px solid var(--kalk);box-shadow:var(--sh-screen);opacity:0;transform:translateY(28px) rotate(.8deg);transition:opacity .35s var(--ease-out),transform .6s var(--ease-out);z-index:5}
[data-view="home"] .rcard.is-on{opacity:1;transform:rotate(.8deg)}
[data-view="home"] .rc-head{display:flex;justify-content:space-between;font:600 9.5px/1 var(--f-mono);letter-spacing:.1em;color:var(--grafiet);padding-bottom:10px;border-bottom:1px dashed var(--kalk)}
[data-view="home"] .rc-main{display:flex;align-items:center;gap:26px;padding:16px 6px 14px 10px}
[data-view="home"] .rc-score{position:relative;font:800 76px/.9 var(--f-display);letter-spacing:-.05em;padding:4px 6px}
[data-view="home"] .rc-score svg{position:absolute;left:0;top:0;overflow:visible}
[data-view="home"] .rc-lbl{display:block;font:600 10px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--grafiet)}
[data-view="home"] .rc-drop{margin-top:8px;font:400 13px/1.35 var(--f-body)}
[data-view="home"] .rc-drop strong{display:block;font-weight:700;color:var(--oranje-diep)}
[data-view="home"] .rc-tiles{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
[data-view="home"] .rt{border-radius:9px;padding:7px 1px 7px;text-align:center;font:600 8.8px/1.1 var(--f-body);letter-spacing:-.01em}
[data-view="home"] .rt b{display:grid;place-items:center;width:20px;height:20px;margin:0 auto 5px;border-radius:50%;background:var(--papier);font:700 11.5px/1 var(--f-mono)}
[data-view="home"] .rt-groen,[data-view="home"] .tile-groen{background:var(--tint-groen)}
[data-view="home"] .rt-geel,[data-view="home"] .tile-geel{background:var(--tint-geel)}
[data-view="home"] .rt-oranje,[data-view="home"] .tile-oranje{background:var(--tint-oranje)}
[data-view="home"] .cursor{position:absolute;left:0;top:0;width:24px;height:30px;overflow:visible;transform:translate(440px,436px);transition:transform var(--d,600ms) cubic-bezier(.45,.05,.2,1),opacity .3s;opacity:0;z-index:9}
[data-view="home"] .cursor.is-on{opacity:1}
[data-view="home"] .cursor path{fill:var(--houtskool);stroke:var(--papier);stroke-width:1.6px;stroke-linejoin:round;transform-origin:2px 2px;transition:transform .12s}
[data-view="home"] .cursor.is-down path{transform:scale(.84)}
[data-view="home"] .is-fading .rcard,[data-view="home"] .is-fading .wcard,[data-view="home"] .is-fading .d-ink,[data-view="home"] .is-fading .d-anns,[data-view="home"] .is-fading .b-toast{opacity:0;transition:opacity .45s}
[data-view="home"] .demo-pause{position:absolute;left:50%;top:-2px;transform:translate(-50%,0);font:600 10.5px/1 var(--f-mono);letter-spacing:.1em;background:var(--houtskool);color:var(--krijtwit);border-radius:var(--r-pill);padding:6px 10px;opacity:0;transition:opacity .2s;pointer-events:none;z-index:4}
[data-view="home"] .demo.is-paused.is-hoverpause .demo-pause{opacity:1}
[data-view="home"] .demo-controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 10px;margin-top:20px}
[data-view="home"] .ctrl{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 15px;border-radius:var(--r-pill);border:1px solid var(--kalk);background:var(--papier);font:600 11.5px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--houtskool);cursor:pointer;transition:border-color .2s}
[data-view="home"] .ctrl:hover{border-color:var(--houtskool)}
[data-view="home"] .ctrl svg{width:12px;height:12px}
[data-view="home"] .ctrl svg *{fill:currentColor}
[data-view="home"] .demo-cap{width:100%;text-align:center;font-size:11px;letter-spacing:.06em;color:var(--grafiet);text-transform:uppercase;margin-top:2px}
[data-view="home"] .ticker{background:var(--asfalt);color:var(--krijtwit);overflow:hidden;padding-block:20px 22px}
[data-view="home"] .ticker-label{font:600 11.5px/1 var(--f-mono);letter-spacing:.12em;color:var(--geel);margin-bottom:12px}
[data-view="home"] .ticker-viewport{overflow:hidden}
[data-view="home"] .ticker-track{display:flex;width:max-content;animation:home-marquee 64s linear infinite}
[data-view="home"] .ticker:hover .ticker-track,[data-view="home"] .ticker.is-off .ticker-track,[data-view="home"] .ticker.is-paused .ticker-track{animation-play-state:paused}
[data-view="home"] .ticker-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
[data-view="home"] .ticker-head .ticker-label{margin-bottom:0}
[data-view="home"] .ticker-ctrl{flex:none;width:44px;padding:0;justify-content:center;background:transparent;border-color:var(--wit-40);color:var(--krijtwit)}
[data-view="home"] .ticker-ctrl:hover{border-color:var(--krijtwit)}
[data-view="home"] .ticker-list{display:flex;align-items:center;flex:none}
[data-view="home"] .ticker-list li{display:flex;align-items:center;gap:26px;padding-right:26px;font:700 clamp(1.35rem,2vw,1.7rem)/1.2 var(--f-hand);white-space:nowrap}
[data-view="home"] .ticker-list li::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--oranje);-webkit-mask-image:var(--noise-mask);mask-image:var(--noise-mask);-webkit-mask-size:40px 40px;mask-size:40px 40px}
@keyframes home-marquee{to{transform:translateX(-50%)}}
[data-view="home"] .wat-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(32px,5vw,76px);align-items:center}
[data-view="home"] .wat-copy .h2{margin:18px 0 22px}
[data-view="home"] .points{display:grid;gap:18px;margin-top:30px}
[data-view="home"] .point{display:grid;grid-template-columns:46px minmax(0,1fr);gap:14px;align-items:start}
[data-view="home"] .pico{position:relative;width:46px;height:46px;border-radius:14px;background:var(--zand)}
[data-view="home"] .pico svg{position:absolute;inset:3px;width:40px;height:40px;overflow:visible}
[data-view="home"] .point h3{font:700 1.14rem/1.2 var(--f-display);letter-spacing:-.015em;margin:2px 0 3px}
[data-view="home"] .point p{color:var(--grafiet);font-size:15.5px;line-height:1.5}
[data-view="home"] .video{position:relative;display:block;width:100%;aspect-ratio:16/9;border-radius:var(--r-card);overflow:hidden;background:var(--zand);border:1px solid var(--kalk);box-shadow:var(--sh-lift);cursor:pointer;padding:0;text-align:left;transition:transform .35s var(--ease-out),box-shadow .35s}
[data-view="home"] .video:hover{transform:translateY(-4px);box-shadow:0 1px 0 var(--zwart-06),0 36px 60px -26px var(--zwart-50)}
[data-view="home"] .video:focus-visible{outline-offset:5px}
[data-view="home"] .video-art{position:absolute;inset:0;width:100%;height:100%}
[data-view="home"] .video-tag{position:absolute;left:4.2%;top:6.5%;font:600 11px/1 var(--f-mono);letter-spacing:.1em;background:var(--houtskool);color:var(--krijtwit);padding:7px 9px;border-radius:7px}
[data-view="home"] .play{position:absolute;left:46.9%;top:47%;width:clamp(64px,8.5vw,88px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:var(--geel);border:1.5px solid var(--houtskool);box-shadow:0 4px 0 var(--houtskool);display:grid;place-items:center;transition:transform .25s var(--ease-out)}
[data-view="home"] .video:hover .play{transform:translate(-50%,-52%) scale(1.04)}
[data-view="home"] .play > svg{width:38%;height:38%;margin-left:8%}
[data-view="home"] .play > svg path{fill:var(--houtskool)}
[data-view="home"] .play .ck-svg{left:-16px;top:-16px}
[data-view="home"] .video-hand{position:absolute;right:4%;bottom:7%;font:700 clamp(1.15rem,1.8vw,1.5rem)/1 var(--f-hand);color:var(--houtskool);transform:rotate(-4deg)}
[data-view="home"] .video-cap{margin-top:14px;font-size:11.5px;letter-spacing:.06em;color:var(--grafiet);text-transform:uppercase;text-align:center}
[data-view="home"] .blind-grid{display:grid;grid-template-columns:minmax(0,1.32fr) minmax(0,1fr);gap:clamp(24px,3.6vw,44px);align-items:start}
[data-view="home"] .lamp{position:relative;min-width:0}
[data-view="home"] .lamp-viewport{position:relative;width:100%;aspect-ratio:600/440}
[data-view="home"] .lamp-stage{position:absolute;left:0;top:0;width:600px;height:440px;transform-origin:0 0;--lx:300px;--ly:215px;touch-action:pan-y}
[data-view="home"] .zb{position:absolute;inset:0;background:var(--papier);border-radius:14px;overflow:hidden;color:var(--houtskool);box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
[data-view="home"] .zb-bar{position:absolute;inset:0 0 auto;height:28px;display:flex;align-items:center;gap:10px;padding:0 10px;background:var(--krijtwit);border-bottom:1px solid var(--kalk)}
[data-view="home"] .zb-nav{position:absolute;left:0;top:28px;width:600px;height:50px;border-bottom:1px solid var(--kalk)}
[data-view="home"] .zb-logo{position:absolute;left:20px;top:15px;font:800 18px/1 var(--f-display);letter-spacing:-.03em}
[data-view="home"] .zb-link{position:absolute;top:18px;font:500 13px/1 var(--f-body);color:var(--grafiet)}
[data-view="home"] .zb-l1{left:228px}[data-view="home"] .zb-l2{left:312px}[data-view="home"] .zb-l3{left:384px}
[data-view="home"] .zb-btn{position:absolute;left:462px;top:39px;height:26px;padding:0 12px;border-radius:var(--r-pill);background:var(--houtskool);color:var(--krijtwit);font:600 11.5px/26px var(--f-body);white-space:nowrap}
[data-view="home"] .zb-h{position:absolute;left:20px;top:98px;width:300px;font:800 30px/1.02 var(--f-display);letter-spacing:-.035em}
[data-view="home"] .zb-sub{position:absolute;left:20px;top:168px;width:286px;font:400 13px/1.45 var(--f-body);color:var(--grafiet)}
[data-view="home"] .zb-cta{position:absolute;left:20px;top:216px;height:30px;padding:0 16px;border-radius:var(--r-pill);border:1.5px solid var(--houtskool);font:600 12px/27px var(--f-body)}
[data-view="home"] .zb-photo{position:absolute;left:332px;top:92px;width:250px;height:158px;border-radius:12px;overflow:hidden}
[data-view="home"] .zb-photo svg{display:block;width:100%;height:100%}
[data-view="home"] .zb-rev{position:absolute;left:20px;top:268px;width:560px;height:44px;display:flex;align-items:center;gap:10px;padding:0 14px;border-radius:10px;background:var(--krijtwit);border:1px solid var(--kalk);font:400 12.5px/1 var(--f-body)}
[data-view="home"] .zb-stars{color:var(--geel-diep);letter-spacing:.06em}
[data-view="home"] .zb-more{margin-left:auto;font-weight:600;font-size:11.5px}
[data-view="home"] .zb-foot{position:absolute;left:0;bottom:0;width:600px;height:110px;background:var(--krijtwit);border-top:1px solid var(--kalk);padding:18px 20px}
[data-view="home"] .zb-bars{display:flex;gap:28px}
[data-view="home"] .zb-bars i{display:block;width:90px;height:8px;border-radius:4px;background:var(--kalk)}
[data-view="home"] .zb-bars i:nth-child(2){width:70px}[data-view="home"] .zb-bars i:nth-child(3){width:110px}
[data-view="home"] .zb-tiny{position:absolute;left:20px;bottom:18px;font:400 11px/1 var(--f-body);color:var(--grafiet)}
[data-view="home"] .lamp-dim{position:absolute;inset:0;border-radius:14px;pointer-events:none;background:radial-gradient(circle 165px at var(--lx) var(--ly),transparent 0 56%,var(--dim) 100%);transition:opacity .35s}
[data-view="home"] .lamp-ink{position:absolute;inset:0;pointer-events:none;-webkit-mask-image:radial-gradient(circle 138px at var(--lx) var(--ly),var(--houtskool) 0 58%,transparent 100%);mask-image:radial-gradient(circle 138px at var(--lx) var(--ly),var(--houtskool) 0 58%,transparent 100%)}
[data-view="home"] .lamp-ink svg{position:absolute;left:0;top:0;overflow:visible}
[data-view="home"] .lann{position:absolute;left:0;top:0;font:700 22px/1 var(--f-hand);padding:3px 9px 4px;border-radius:8px;background:color-mix(in srgb,var(--krijtwit) 93%,transparent);transform:rotate(-2.5deg);white-space:nowrap;box-shadow:0 1px 0 var(--zwart-06)}
[data-view="home"] .lann-oranje{color:var(--oranje-diep)}[data-view="home"] .lann-geel{color:var(--geel-diep)}[data-view="home"] .lann-groen{color:var(--groen-diep)}
[data-view="home"] .lamp-clip{position:absolute;inset:0;overflow:hidden;border-radius:14px;pointer-events:none}
[data-view="home"] .lamp-ring{position:absolute;left:0;top:0;width:276px;height:276px;margin:-138px 0 0 -138px;transform:translate(var(--lx),var(--ly));pointer-events:none;transition:opacity .35s}
[data-view="home"] .lamp-ring svg{position:absolute;inset:0;overflow:visible}
[data-view="home"] .lamp.show-all .lamp-ink{-webkit-mask-image:none;mask-image:none}
[data-view="home"] .lamp.show-all .lamp-dim,[data-view="home"] .lamp.show-all .lamp-ring{opacity:0}
[data-view="home"] .lamp-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px;margin-top:16px}
[data-view="home"] .lamp-cap{font:700 1.4rem/1.1 var(--f-hand);color:var(--geel)}
[data-view="home"] .lamp-vb{flex:1 0 100%;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--wit-74)}
[data-view="home"] .blind-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
[data-view="home"] .bcard{position:relative;padding:18px 18px 20px;border-radius:var(--r-card);background:color-mix(in srgb,var(--krijtwit) 5%,var(--asfalt));border:1px solid var(--wit-16);min-width:0}
[data-view="home"] .bnum{display:block;font:700 2.5rem/.9 var(--f-hand);color:var(--geel);margin-bottom:10px}
[data-view="home"] .bcard h3{color:var(--krijtwit);margin-bottom:8px}
[data-view="home"] .bcard p{color:var(--wit-74);font-size:15.5px;line-height:1.5}
[data-view="home"] .closer{margin-top:clamp(40px,5vw,60px);text-align:center;font:700 clamp(1.6rem,3vw,2.35rem)/1.12 var(--f-hand);color:var(--groen);text-wrap:balance}
[data-view="home"] .num-sq{position:absolute;overflow:visible;pointer-events:none}
[data-view="home"] .hinkel{position:relative;padding-top:92px}
[data-view="home"] .hinkel-svg{position:absolute;left:0;top:0;overflow:visible;pointer-events:none;z-index:2}
[data-view="home"] .stone{position:absolute;left:0;top:0;width:17px;height:17px;transition:opacity .3s;margin:-15px 0 0 -8.5px;border-radius:50% 46% 52% 48%;background:var(--houtskool);z-index:4;pointer-events:none;box-shadow:inset -3px -3px 0 var(--zwart-28)}
[data-view="home"] .steps{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;z-index:1;counter-reset:none}
[data-view="home"] .step{position:relative;background:var(--papier);border:1px solid var(--kalk);border-radius:var(--r-card);padding:48px 20px 22px;box-shadow:var(--sh-soft);transition:transform .5s var(--ease-out),box-shadow .5s;min-width:0}
[data-view="home"] .step:nth-child(even){margin-top:46px}
[data-view="home"] .step.is-active{transform:translateY(-4px);box-shadow:var(--sh-lift)}
[data-view="home"] .step-num{position:absolute;left:18px;top:-31px;width:62px;height:62px;display:grid;place-items:center;font:700 2.5rem/1 var(--f-hand);border-radius:12px;background:var(--krijtwit);box-shadow:inset 0 0 0 1.5px var(--kalk);z-index:3}
[data-view="home"] .step-num::before{content:"";position:absolute;inset:5px;border-radius:10px;background:var(--geel);opacity:0;transform:scale(.6) rotate(-8deg);transition:opacity .4s,transform .5s var(--ease-out);-webkit-mask-image:var(--noise-mask);mask-image:var(--noise-mask);-webkit-mask-size:60px 60px;mask-size:60px 60px}
[data-view="home"] .step.is-active .step-num::before{opacity:1;transform:scale(1) rotate(-3deg)}
[data-view="home"] .step-num span{position:relative}
[data-view="home"] .num-sq{left:-1px;top:-1px}
[data-view="home"] .step h3{margin-bottom:10px}
[data-view="home"] .step p{color:var(--grafiet);font-size:15.5px;line-height:1.5}
[data-view="home"] .meta{display:inline-block;margin-top:16px;font:600 11.5px/1.3 var(--f-mono);letter-spacing:.08em;padding:5px 10px;border-radius:var(--r-pill);background:var(--zand)}
[data-view="home"] .hoe-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 28px;margin-top:clamp(36px,5vw,56px)}
[data-view="home"] .hoe-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 26px}
[data-view="home"] .note-card{display:flex;gap:12px;align-items:flex-start;max-width:560px;padding:16px 18px;border-radius:16px;background:var(--papier);border:1px dashed var(--grafiet);font-size:15.5px;line-height:1.5}
[data-view="home"] .note-card .hand{flex:none;font-size:1.6rem;line-height:.9;color:var(--oranje-diep)}
[data-view="home"] .rapport-grid{display:grid;grid-template-columns:minmax(0,2.15fr) minmax(0,1fr);gap:clamp(20px,3vw,36px);align-items:start}
[data-view="home"] .doc{position:relative;background:var(--papier);border:1px solid var(--kalk);border-radius:var(--r-card);box-shadow:var(--sh-lift);padding:clamp(18px,2.6vw,32px);min-width:0}
[data-view="home"] .doc-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 16px;font:600 11.5px/1.35 var(--f-mono);letter-spacing:.1em;color:var(--grafiet);padding-bottom:14px;border-bottom:1px dashed var(--kalk)}
[data-view="home"] .doc-tag{background:var(--zand);color:var(--houtskool);padding:3px 7px;border-radius:5px}
[data-view="home"] .doc-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center;padding-block:22px}
[data-view="home"] .rolbox{background:var(--zand);border-radius:14px;padding:14px 16px;font-size:15.5px;line-height:1.5}
[data-view="home"] .tag-mono{display:inline-block;font:600 11px/1 var(--f-mono);letter-spacing:.1em;background:var(--houtskool);color:var(--krijtwit);border-radius:5px;padding:4px 6px;margin-bottom:8px}
[data-view="home"] .score{position:relative;display:grid;justify-items:center;text-align:center;padding:6px 22px 0}
[data-view="home"] .score-wrap{position:relative;display:inline-block}
[data-view="home"] .score-num{display:block;font:800 clamp(4.4rem,8vw,6.4rem)/.88 var(--f-display);letter-spacing:-.05em;font-variant-numeric:tabular-nums;padding:6px 8px}
[data-view="home"] .score-lbl{font:600 11px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;margin-top:14px}
[data-view="home"] .score-sub{font-size:12.5px;color:var(--grafiet);margin-top:5px}
[data-view="home"] .doc-label{font:600 11px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--grafiet);margin-bottom:12px}
[data-view="home"] .tiles{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
[data-view="home"] .tile{display:grid;gap:7px;justify-items:start;align-content:start;padding:12px 10px 11px;border-radius:14px;border:1.5px solid transparent;cursor:pointer;text-align:left;transition:transform .2s var(--ease-out),box-shadow .2s,border-color .2s;min-height:104px}
[data-view="home"] .tile:hover{transform:translateY(-2px)}
[data-view="home"] .tile[aria-selected="true"]{border-color:var(--houtskool);box-shadow:0 3px 0 var(--houtskool);transform:translateY(-2px)}
[data-view="home"] .t-ico{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--papier);font:700 14px/1 var(--f-mono)}
[data-view="home"] .t-name{font:600 13.5px/1.15 var(--f-body)}
[data-view="home"] .t-score{font:600 12px/1 var(--f-mono);margin-top:auto}
[data-view="home"] .detail{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:14px;padding:20px;border-radius:16px;background:var(--krijtwit);border:1px solid var(--kalk)}
[data-view="home"] .detail h3{font:600 11px/1.2 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--grafiet);margin-bottom:8px}
[data-view="home"] .detail p{font-size:15.5px;line-height:1.5}
[data-view="home"] .detail .quote{font:700 1.42rem/1.12 var(--f-hand);letter-spacing:0}
[data-view="home"] .verdict{display:inline-flex;align-items:center;gap:6px;font:600 11px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;padding:6px 8px;border-radius:var(--r-pill);margin-bottom:10px}
[data-view="home"] .effort{display:inline-block;margin-top:10px;font:600 11px/1 var(--f-mono);letter-spacing:.06em;padding:6px 9px;border-radius:var(--r-pill);background:var(--munt)}
[data-view="home"] .detail.is-swap > div{animation:home-swap .35s var(--ease-out)}
@keyframes home-swap{from{transform:translateY(6px)}}
[data-view="home"] .doc-bottom{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:26px;margin-top:26px}
[data-view="home"] .log li{display:grid;grid-template-columns:80px 10px minmax(0,1fr);gap:10px;align-items:baseline;font:500 12.5px/1.45 var(--f-mono);padding-block:6px;border-bottom:1px dashed var(--kalk)}
[data-view="home"] .log time{color:var(--grafiet);font-variant-numeric:tabular-nums}
[data-view="home"] .log .ld{width:9px;height:9px;border-radius:50%;background:var(--kalk);align-self:center}
[data-view="home"] .log .ld-groen{background:var(--groen)}[data-view="home"] .log .ld-geel{background:var(--geel)}[data-view="home"] .log .ld-oranje{background:var(--oranje)}
[data-view="home"] .top3 ol{display:grid;gap:10px}
[data-view="home"] .top3 li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:10px;align-items:start;padding:12px;border-radius:14px;background:var(--krijtwit);border:1px solid var(--kalk)}
[data-view="home"] .top3 .tk{position:relative;width:26px;height:26px;border-radius:8px;background:var(--papier);box-shadow:inset 0 0 0 1.5px var(--kalk)}
[data-view="home"] .top3 .tk svg{position:absolute;inset:0;overflow:visible}
[data-view="home"] .top3 b{display:block;font-weight:600;font-size:15px;line-height:1.35}
[data-view="home"] .top3 small{font:600 11px/1 var(--f-mono);letter-spacing:.06em;color:var(--grafiet)}
[data-view="home"] .rapport-aside{display:grid;gap:18px;position:sticky;top:96px}
[data-view="home"] .inhoud{background:var(--krijtwit);border:1px solid var(--kalk);border-radius:var(--r-card);padding:22px}
[data-view="home"] .inhoud h3{margin-bottom:14px}
[data-view="home"] .checks li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;padding-block:7px;border-bottom:1px dashed var(--kalk);font-size:15.5px}
[data-view="home"] .checks li:last-child{border-bottom:0}
[data-view="home"] .aside-ctas{display:grid;gap:10px}
[data-view="home"] .aside-ctas .btn{width:100%}
[data-view="home"] .aside-ctas .link-chalk{justify-self:center}
[data-view="home"] .vs-card{background:var(--papier);border:1px solid var(--kalk);border-radius:var(--r-card);box-shadow:var(--sh-lift);overflow:hidden}
[data-view="home"] .vs-row{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr) minmax(0,1fr);gap:0 76px;align-items:center;padding:16px clamp(16px,2.6vw,32px);border-bottom:1px dashed var(--kalk)}
[data-view="home"] .vs-cols{position:relative;background:var(--krijtwit);border-bottom:1px solid var(--kalk);padding-block:18px;align-items:end}
[data-view="home"] .vs-cols span{display:grid;gap:4px}
[data-view="home"] .vs-cols small{font:600 11px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--grafiet)}
[data-view="home"] .vs-cols strong{font:800 1.22rem/1.1 var(--f-display);letter-spacing:-.02em}
[data-view="home"] .vs-badge{position:absolute;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;display:grid;place-items:center;font:700 1.7rem/1 var(--f-hand);color:var(--oranje-diep)}
[data-view="home"] .vs-badge svg{position:absolute;inset:0;overflow:visible}
[data-view="home"] .vs-metric{font-weight:600;font-size:15.5px}
[data-view="home"] .vs-cell{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:4px 10px;min-width:0}
[data-view="home"] .vs-val{font:800 1.35rem/1 var(--f-display);letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
[data-view="home"] .vs-val.muted{font:500 13px/1.2 var(--f-mono);color:var(--grafiet);white-space:normal}
[data-view="home"] .vs-win{position:relative;width:22px;height:20px}
[data-view="home"] .vs-win svg{position:absolute;inset:0;overflow:visible}
[data-view="home"] .vs-eq{font:600 11px/1 var(--f-mono);letter-spacing:.08em;color:var(--grafiet);text-transform:uppercase}
[data-view="home"] .bar{grid-column:1/-1;display:block;height:7px;border-radius:99px;background:var(--zand);overflow:hidden}
[data-view="home"] .bar i{display:block;height:100%;border-radius:inherit;background:var(--oranje);transform-origin:0 50%}
[data-view="home"] .vs-cell.win .bar i{background:var(--groen)}
[data-view="home"] .vs-foot{padding:14px clamp(16px,2.6vw,32px) 18px;font-size:12px;line-height:1.5;color:var(--grafiet);background:var(--krijtwit)}
[data-view="home"] .lessons{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin-top:22px}
[data-view="home"] .lessons p{font:600 11.5px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--grafiet);margin-right:4px}
[data-view="home"] .lesson{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:var(--r-pill);background:color-mix(in srgb,var(--groen) 40%,var(--papier));font-weight:500;font-size:15px}
[data-view="home"] .lesson::before{content:"✓";font:700 13px/1 var(--f-mono);color:var(--groen-diep)}
[data-view="home"] .buren-cta{margin-top:30px}
[data-view="home"] .prijs-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:20px 32px;margin-bottom:clamp(30px,4vw,48px)}
[data-view="home"] .prijs-head .section-head{margin-bottom:0}
[data-view="home"] .price-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;align-items:stretch}
[data-view="home"] .pc-wrap{position:relative;display:flex}
[data-view="home"] .pc-wrap .smudge{left:-6%;top:-8%;width:112%;height:116%}
[data-view="home"] .pcard{position:relative;display:flex;flex-direction:column;width:100%;background:var(--papier);border:1px solid var(--kalk);border-radius:var(--r-card);padding:clamp(22px,3vw,34px);box-shadow:var(--sh-soft);transition:transform .4s var(--ease-out),box-shadow .4s;transform-style:preserve-3d}
[data-view="home"] .pcard:hover{box-shadow:var(--sh-lift)}
[data-view="home"] .pcard:not(.is-tilting):hover{transform:translateY(-4px)}
[data-view="home"] .pcard.featured{border:1.5px solid var(--houtskool)}
[data-view="home"] .pc-name{font:800 1.6rem/1.05 var(--f-display);letter-spacing:-.025em}
[data-view="home"] .pc-tag{margin-top:6px;color:var(--grafiet)}
[data-view="home"] .price-row{display:flex;align-items:flex-end;gap:14px;margin:22px 0 12px}
[data-view="home"] .price{position:relative;display:inline-flex;align-items:flex-start;font:800 clamp(3rem,5vw,4rem)/1 var(--f-display);letter-spacing:-.04em;padding:4px 10px 4px 6px;font-variant-numeric:tabular-nums}
[data-view="home"] .price .cur{font-size:.48em;margin:.16em .08em 0 0}
[data-view="home"] .price-note{font:500 12px/1.3 var(--f-mono);letter-spacing:.06em;color:var(--grafiet);text-transform:uppercase;margin-bottom:12px}
[data-view="home"] .pfeat{display:grid;margin:14px 0 26px}
[data-view="home"] .pfeat li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;padding-block:8px;border-bottom:1px dashed var(--kalk);font-size:15.5px}
[data-view="home"] .pcard .btn{margin-top:auto}
[data-view="home"] .aanrader{position:absolute;right:22px;top:-20px;font:700 1.7rem/1 var(--f-hand);color:var(--houtskool);background:var(--geel);padding:4px 14px 6px;border-radius:12px;transform:rotate(4deg);border:1.5px solid var(--houtskool)}
[data-view="home"] .extras{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:26px}
[data-view="home"] .extra{padding:14px 16px;border-radius:16px;border:1px dashed var(--grafiet);background:var(--krijtwit)}
[data-view="home"] .extra b{display:block;font-weight:600;font-size:15px}
[data-view="home"] .extra > span{display:block;font-size:13.5px;color:var(--grafiet);margin-top:2px}
[data-view="home"] .extra em{display:inline-block;margin-top:8px;font:600 11.5px/1 var(--f-mono);font-style:normal;letter-spacing:.04em}
[data-view="home"] .extra.muted{border-color:var(--kalk);color:var(--grafiet)}
[data-view="home"] .extra.muted em{background:var(--zand);padding:4px 6px;border-radius:5px;letter-spacing:.1em}
[data-view="home"] .pay-trust{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:24px;font:500 12px/1.4 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--grafiet)}
[data-view="home"] .pay-trust li{display:flex;align-items:center;gap:8px}
[data-view="home"] .pay-trust li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--groen-diep)}
[data-view="home"] .wervora-line{margin-top:14px;color:var(--grafiet);font-size:15px}
[data-view="home"] .more-link{margin-top:10px}
[data-view="home"] .sectors{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
[data-view="home"] .sector{position:relative;display:flex;flex-direction:column;background:var(--krijtwit);border:1px solid var(--kalk);border-radius:18px;padding:20px 18px 22px;transition:transform .35s var(--ease-out),box-shadow .35s;min-width:0}
[data-view="home"] .sector:hover{transform:translateY(-4px);box-shadow:var(--sh-lift)}
[data-view="home"] .s-ico{position:relative;width:46px;height:46px}
[data-view="home"] .s-ico svg{position:absolute;inset:0;overflow:visible}
[data-view="home"] .sector h3{font:700 1.1rem/1.2 var(--f-display);letter-spacing:-.015em;margin:14px 0 12px}
[data-view="home"] .seen{font:600 11px/1 var(--f-mono);letter-spacing:.1em;color:var(--grafiet)}
[data-view="home"] .sector .q{font:700 1.32rem/1.1 var(--f-hand);margin-top:7px}
[data-view="home"] .sector-link{color:inherit;text-decoration:none;border-radius:4px}
[data-view="home"] .sector-link::after{content:"";position:absolute;inset:0;border-radius:18px;z-index:1}
[data-view="home"] .sector-link:focus-visible{outline:none}
[data-view="home"] .sector-link:focus-visible::after{outline:3px solid var(--houtskool);outline-offset:3px}
[data-view="home"] .sector.jij{background:var(--houtskool);color:var(--krijtwit);border-color:var(--houtskool)}
[data-view="home"] .sector.jij p{color:var(--wit-74);font-size:15px;line-height:1.5}
[data-view="home"] .sector.jij .link-chalk{margin-top:auto;color:var(--geel);text-align:left}
[data-view="home"] .reviews{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
[data-view="home"] .rev{position:relative;display:flex;flex-direction:column;gap:14px;background:var(--papier);border:1px solid var(--kalk);border-radius:var(--r-card);padding:24px;box-shadow:var(--sh-soft)}
[data-view="home"] .rev .rev-chip{align-self:flex-start;font:600 11px/1 var(--f-mono);letter-spacing:.12em;padding:5px 7px;border-radius:5px;background:var(--zand);color:var(--grafiet)}
[data-view="home"] .rev .qm{font:700 4.2rem/.5 var(--f-hand);color:var(--geel);margin-top:14px;height:22px;-webkit-text-stroke:1px var(--houtskool)}
[data-view="home"] .rev blockquote{margin:0;font-size:1.06rem;line-height:1.5}
[data-view="home"] .rev .who{font:500 12px/1.3 var(--f-mono);color:var(--grafiet);margin-top:auto}
[data-view="home"] .jump{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;padding:8px 14px;border-radius:var(--r-pill);background:var(--krijtwit);border:1px solid var(--kalk)}
[data-view="home"] .jump b{font:800 1.25rem/1 var(--f-display);letter-spacing:-.02em}
[data-view="home"] .jump b:last-child{color:var(--groen-diep)}
[data-view="home"] .jump span{position:relative;width:38px;height:18px}
[data-view="home"] .jump svg{position:absolute;inset:0;overflow:visible}
[data-view="home"] .faq-grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.4fr);gap:clamp(24px,5vw,72px);align-items:start}
[data-view="home"] .faq-side p{margin-top:16px;color:var(--grafiet)}
[data-view="home"] .sb{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(232px,280px);gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:20px 2px 14px;margin-top:6px}
[data-view="home"] .sb li{scroll-snap-align:start;background:var(--papier);border:1px solid var(--kalk);border-radius:18px;overflow:hidden;display:flex;flex-direction:column}
[data-view="home"] .sb-frame{position:relative;aspect-ratio:16/9;background:var(--asfalt);color:var(--krijtwit);display:grid;place-items:center;padding:12px;text-align:center;font:700 1.35rem/1.05 var(--f-hand)}
[data-view="home"] .sb-frame.licht{background:var(--zand);color:var(--houtskool)}
[data-view="home"] .sb-frame .big{font:800 2.6rem/1 var(--f-display);letter-spacing:-.04em}
[data-view="home"] .sb-frame .tc{position:absolute;left:10px;top:10px;font:600 11px/1 var(--f-mono);letter-spacing:.08em;padding:4px 6px;border-radius:4px;background:var(--geel);color:var(--houtskool)}
[data-view="home"] .sb-body{padding:14px 16px 16px}
[data-view="home"] .sb-body b{display:block;font:700 1.05rem/1.2 var(--f-display);letter-spacing:-.01em}
[data-view="home"] .sb-body p{margin-top:6px;font-size:14.5px;color:var(--grafiet);line-height:1.45}
[data-view="home"] .faq .more-link{margin-top:18px}
@media (max-width:1100px){
  [data-view="home"] .rapport-grid{grid-template-columns:minmax(0,1fr)}
  [data-view="home"] .rapport-aside{position:static;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:start}
  [data-view="home"] .extras{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:980px){
  [data-view="home"] .hero-grid,[data-view="home"] .wat-grid,[data-view="home"] .blind-grid,[data-view="home"] .faq-grid{grid-template-columns:minmax(0,1fr)}
  [data-view="home"] .hero-copy{max-width:680px}
  [data-view="home"] .demo{margin-top:8px}
  [data-view="home"] .sectors{grid-template-columns:repeat(2,minmax(0,1fr))}
  [data-view="home"] .reviews{grid-template-columns:minmax(0,1fr);max-width:640px}
}
@media (min-width:981px){[data-view="home"] .demo-tilt{transform:rotate(-1.2deg)}}
@media (max-width:820px){
  [data-view="home"] .hinkel{padding-top:8px}
  [data-view="home"] .steps{grid-template-columns:minmax(0,1fr);gap:20px;padding-left:66px}
  [data-view="home"] .step:nth-child(even){margin-top:0}
  [data-view="home"] .step{padding:20px 18px 20px}
  [data-view="home"] .step-num{left:-66px;top:12px;width:52px;height:52px;font-size:2.1rem}
  [data-view="home"] .vs-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px 18px}
  [data-view="home"] .vs-metric{grid-column:1/-1}
  [data-view="home"] .vs-cols > span:first-child{display:none}
  [data-view="home"] .vs-cols .vs-badge{display:none}
  [data-view="home"] .vs-card{overflow:clip}
  [data-view="home"] .vs-cols{position:sticky;top:0;z-index:2}
  [data-view="home"] .detail{grid-template-columns:minmax(0,1fr);gap:14px}
  [data-view="home"] .doc-bottom{grid-template-columns:minmax(0,1fr)}
  [data-view="home"] .rapport-aside{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:700px){
  [data-view="home"] .price-grid{grid-template-columns:minmax(0,1fr)}
  [data-view="home"] .tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
  [data-view="home"] .doc-top{grid-template-columns:minmax(0,1fr)}
  [data-view="home"] .score{padding-top:0}
  [data-view="home"] .blind-cards{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  [data-view="home"] .hero-ctas .magnet{order:1}
  [data-view="home"] .hero-note{order:2;margin:-4px 0 4px 14px}
  [data-view="home"] .hero-ctas .link-chalk{order:3}
  [data-view="home"] .extras{grid-template-columns:minmax(0,1fr)}
  [data-view="home"] .hero-note{margin-left:14px}
}
@media (max-width:420px){
  [data-view="home"] .sector{padding-inline:14px}
  [data-view="home"] .sector h3{font-size:clamp(1rem,4.4vw,1.1rem)}
}
@media (prefers-reduced-motion:reduce){
  [data-view="home"] .ticker-track{width:auto;animation:none!important}
  [data-view="home"] .ticker-viewport{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
  [data-view="home"] .ticker-list{flex:1 1 auto;min-width:0;flex-wrap:wrap;row-gap:4px;max-width:1200px;margin-inline:auto}
  [data-view="home"] .ticker-list li{white-space:normal}
  [data-view="home"] .ticker-list[aria-hidden="true"]{display:none}
  [data-view="home"] .demo-controls .ctrl{display:none}
  [data-view="home"] .ticker-ctrl{display:none}
}

/* ===== view: bedankt ===== */
/* bedankt: elke selector begint met [data-view="bedankt"]; keyframes beginnen met bedankt- */
[data-view="bedankt"] .bd-intro{padding-bottom:clamp(56px,7vw,96px)}
[data-view="bedankt"] .bd-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,clamp(340px,36vw,460px));gap:clamp(28px,4.5vw,64px);align-items:start}
[data-view="bedankt"] .bd-kop{min-width:0;padding-top:clamp(0px,1.4vw,18px)}
[data-view="bedankt"] .bd-kop .h1{font-size:clamp(2.2rem,4.1vw,3.7rem);max-width:13em}
[data-view="bedankt"][data-staat="mislukt"] .bd-kop .h1{font-size:clamp(2rem,3.5vw,3.2rem)}
[data-view="bedankt"] .bd-kop .lead{max-width:30em}

/* de kaart */
[data-view="bedankt"] .bd-kaart{min-width:0;background:var(--papier);border:1px solid var(--kalk);border-radius:var(--r-card);box-shadow:var(--sh-screen);overflow:hidden}
[data-view="bedankt"] .bd-bar{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 clamp(18px,2.4vw,26px);background:var(--krijtwit);border-bottom:1px solid var(--kalk);font:600 10.5px/1.2 var(--f-mono);letter-spacing:.1em;text-transform:uppercase}
[data-view="bedankt"] .bd-teken{display:grid;place-items:center;flex:none;width:20px;height:20px;border-radius:50%;background:var(--zand);font:700 11px/1 var(--f-mono)}
[data-view="bedankt"] .bd-teken:empty{background:var(--geel);box-shadow:0 0 0 3px color-mix(in srgb,var(--geel) 35%,transparent);width:9px;height:9px;margin-inline:5px 6px}
[data-view="bedankt"][data-staat="betaald"] .bd-teken{background:var(--groen)}
[data-view="bedankt"][data-staat="mislukt"] .bd-teken{background:var(--tint-oranje)}
[data-view="bedankt"] .bd-nr{margin-left:auto;color:var(--grafiet);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
[data-view="bedankt"] .bd-wat{margin-top:8px;font-size:15px;line-height:1.45;color:var(--grafiet)}
[data-view="bedankt"] .bd-in{padding:clamp(20px,2.6vw,30px) clamp(18px,2.6vw,30px) clamp(20px,2.4vw,28px)}
[data-view="bedankt"] .bd-h{font:800 clamp(1.3rem,1.8vw,1.55rem)/1.1 var(--f-display);letter-spacing:-.025em}
[data-view="bedankt"] .bd-tekst{font-size:16px;line-height:1.5}
[data-view="bedankt"] .bd-h + .bd-tekst{margin-top:12px}
[data-view="bedankt"] .bd-tekst + .bd-tekst,[data-view="bedankt"] .bd-tekst + .bd-klein{margin-top:10px}
[data-view="bedankt"] .bd-klein{font-size:14px;line-height:1.45;color:var(--grafiet)}

/* laden: drie rustige stippen (bij minder beweging stil) */
[data-view="bedankt"] .bd-check{display:flex;align-items:center;gap:14px;font:700 1.12rem/1.3 var(--f-display);letter-spacing:-.01em}
[data-view="bedankt"] .bd-laden .bd-klein{margin-top:12px}
[data-view="bedankt"] .bd-puls{display:inline-flex;gap:6px;flex:none;padding:10px 12px;border-radius:var(--r-pill);background:var(--zand)}
[data-view="bedankt"] .bd-puls i{width:8px;height:8px;border-radius:50%;background:var(--houtskool);opacity:.25;animation:bedankt-puls 1.4s var(--ease-out) infinite}
[data-view="bedankt"] .bd-puls i:nth-child(2){animation-delay:.2s}
[data-view="bedankt"] .bd-puls i:nth-child(3){animation-delay:.4s}
@keyframes bedankt-puls{0%,70%,100%{opacity:.25;transform:none}35%{opacity:1;transform:translateY(-2px)}}

/* betaald */
[data-view="bedankt"] .tl{margin:22px 0 6px}
[data-view="bedankt"] .tl b,[data-view="bedankt"] .tl b .ck-host{color:var(--houtskool)}
[data-view="bedankt"] .tl b .ck-host{margin-left:8px;padding-inline:3px;font-size:inherit}
[data-view="bedankt"] .bd-watnu{margin-top:8px;padding:16px 18px;border-radius:var(--r-ui);background:var(--krijtwit);border:1px dashed var(--grafiet)}
[data-view="bedankt"] .bd-watnu-h{font:700 1.08rem/1.2 var(--f-display);letter-spacing:-.01em;margin-bottom:6px}
[data-view="bedankt"] .bd-watnu p{font-size:15.5px;line-height:1.5}
[data-view="bedankt"] .bd-factuur{margin-top:6px}
[data-view="bedankt"] .bd-watnu .bd-verlegd{margin-top:8px}

/* mislukt */
[data-view="bedankt"] .bd-keuze{display:grid;gap:0;margin:16px 0 0}
[data-view="bedankt"] .bd-keuze > div{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px dashed var(--kalk)}
[data-view="bedankt"] .bd-keuze dt{color:var(--grafiet);font-size:15px}
[data-view="bedankt"] .bd-keuze dd{margin:0;font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
[data-view="bedankt"] .bd-keuze small{font-weight:400;color:var(--grafiet);font-size:13px}
[data-view="bedankt"] .bd-niks{display:grid;grid-template-columns:26px minmax(0,1fr);gap:12px;margin-top:18px;font-size:15.5px;line-height:1.5}
[data-view="bedankt"] .bd-niks-teken{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--tint-groen);color:var(--groen-diep);font:700 13px/1 var(--f-mono)}

/* onbekend */
[data-view="bedankt"] .bd-stappen{display:grid;gap:12px;margin:14px 0 18px;counter-reset:bedankt-stap}
[data-view="bedankt"] .bd-stappen li{position:relative;padding-left:38px;font-size:15.5px;line-height:1.5;counter-increment:bedankt-stap}
[data-view="bedankt"] .bd-stappen li::before{content:counter(bedankt-stap);position:absolute;left:0;top:0;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;box-shadow:inset 0 0 0 1.5px var(--houtskool);font:700 1.05rem/1 var(--f-hand)}
[data-view="bedankt"] .bd-stappen code{font:500 14.5px/1.2 var(--f-mono);overflow-wrap:anywhere}

/* hulpband */
[data-view="bedankt"] .bd-hulp-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px 48px;align-items:end}
[data-view="bedankt"] .bd-hulp .h2{margin:14px 0 12px;font-size:clamp(1.9rem,3.2vw,2.7rem)}
[data-view="bedankt"] .bd-hulp-links{display:flex;flex-wrap:wrap;gap:4px 28px}

@media (max-width:980px){
  [data-view="bedankt"] .bd-grid{grid-template-columns:minmax(0,1fr);max-width:640px}
  [data-view="bedankt"] .bd-hulp-grid{grid-template-columns:minmax(0,1fr);align-items:start}
}
@media (max-width:560px){
  [data-view="bedankt"] .bd-nr{display:none}
  [data-view="bedankt"] .page-actions .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  [data-view="bedankt"] .bd-puls i{animation:none;opacity:.6}
}

/* ===== view: bestellen ===== */
/* bestellen: elke selector begint met [data-view="bestellen"]; keyframes beginnen met bestellen- */

/* ---------- band, terugrij, grid ---------- */
[data-view="bestellen"] .bestel{padding-block:clamp(4px,.8vw,12px) clamp(84px,9vw,120px)}
[data-view="bestellen"] .util{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 20px;margin-bottom:clamp(10px,1.8vw,24px)}
[data-view="bestellen"] .terug{gap:9px;font-size:15px}
[data-view="bestellen"] .terug svg{width:16px;height:16px;flex:none;transition:transform .22s var(--ease-out)}
[data-view="bestellen"] .terug svg path{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
[data-view="bestellen"] .terug:hover svg{transform:translateX(-3px)}
[data-view="bestellen"] .util-rust{display:flex;flex-wrap:wrap;gap:4px 10px;font:500 11.5px/1.3 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--grafiet)}
[data-view="bestellen"] .bestel-grid{display:grid;grid-template-columns:minmax(0,1fr) clamp(300px,30vw,384px);grid-template-areas:"intro meet" "flow sum";gap:clamp(26px,2.4vw,34px) clamp(28px,4vw,60px);align-items:start}
[data-view="bestellen"] .intro{grid-area:intro;align-self:center;min-width:0}
[data-view="bestellen"] .intro .eyebrow{margin-bottom:18px}
[data-view="bestellen"] .intro .h1{font-size:clamp(2.35rem,4.1vw,3.75rem)}
[data-view="bestellen"] .intro .lead{margin-top:18px;max-width:36em}
[data-view="bestellen"] .meet{grid-area:meet}
[data-view="bestellen"] .sum-kaart{grid-area:sum}
[data-view="bestellen"] .flow-kol{grid-area:flow;min-width:0}

/* ---------- meetkaart: geduldmeter die vol blijft, stopwatch ---------- */
[data-view="bestellen"] .meet{position:relative;min-width:0;background:var(--papier);border:1px solid var(--kalk);border-radius:var(--r-ui);box-shadow:var(--sh-lift)}
[data-view="bestellen"] .meet-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:38px;padding:0 14px;background:var(--krijtwit);border-bottom:1px solid var(--kalk);border-radius:var(--r-ui) var(--r-ui) 0 0;font:600 10.5px/1.2 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--houtskool)}
[data-view="bestellen"] .meet-live{display:flex;align-items:center;gap:8px;min-width:0}
[data-view="bestellen"] .meet-live i{width:8px;height:8px;flex:none;border-radius:50%;background:var(--groen-diep);box-shadow:0 0 0 3px color-mix(in srgb,var(--groen) 45%,transparent)}
[data-view="bestellen"] .meet[data-klok="loopt"] .meet-live i{animation:bestellen-puls 1.6s ease-in-out infinite}
[data-view="bestellen"] .meet-klok{display:flex;align-items:center;gap:7px;font:600 14px/1 var(--f-mono);letter-spacing:.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
[data-view="bestellen"] .sw{width:18px;height:18px;flex:none;overflow:visible}
[data-view="bestellen"] .sw circle,[data-view="bestellen"] .sw path{fill:none;stroke:var(--houtskool);stroke-width:1.7;stroke-linecap:round}
[data-view="bestellen"] .sw .sw-hand{stroke:var(--oranje-diep);stroke-width:1.9;transform-box:view-box;transform-origin:10px 11.4px;transition:transform .3s var(--ease-out)}
[data-view="bestellen"] .meet-pauze{display:grid;place-items:center;width:30px;height:30px;margin:-4px -6px -4px 2px;padding:0;border-radius:50%;border:1px solid var(--kalk);background:var(--papier);color:var(--houtskool);cursor:pointer;transition:border-color .2s,background-color .2s}
[data-view="bestellen"] .meet-pauze:hover{border-color:var(--houtskool)}
[data-view="bestellen"] .meet-pauze svg{width:11px;height:11px;fill:currentColor}
[data-view="bestellen"] .meet-pauze .ico-speel,[data-view="bestellen"] .meet-pauze[aria-pressed="true"] .ico-pauze{display:none}
[data-view="bestellen"] .meet-pauze[aria-pressed="true"] .ico-speel{display:block}
[data-view="bestellen"] .meet[data-klok="klaar"] .meet-pauze{display:none}
[data-view="bestellen"] .meet-body{padding:16px 18px 16px}
[data-view="bestellen"] .meet-line{font:700 clamp(1.1rem,1.35vw,1.25rem)/1.27 var(--f-display);letter-spacing:-.015em;text-wrap:pretty}
[data-view="bestellen"] .meet-geduld{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px 14px;margin-top:14px;padding-top:14px;border-top:1px dashed var(--kalk)}
[data-view="bestellen"] .meet-lab{grid-row:1;font:600 10.5px/1.2 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--grafiet)}
[data-view="bestellen"] .meet-pct{grid-row:1;font:600 1.25rem/1 var(--f-mono);font-variant-numeric:tabular-nums;margin:0 6px 0 4px}
[data-view="bestellen"] .meet-pct .ck-host{padding:2px 1px}
[data-view="bestellen"] .meet .g-bar{position:relative;grid-row:1;height:10px;margin:0}
[data-view="bestellen"] .meet .g-bar::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 25%,color-mix(in srgb,var(--papier) 80%,transparent) 50%,transparent 75%);transform:translateX(-110%)}
[data-view="bestellen"] .meet.is-vol .g-bar::after{animation:bestellen-glans .95s var(--ease-out)}
[data-view="bestellen"] .meet.is-vol .meet-pct .ck-host{animation:bestellen-tik .5s var(--ease-out)}
[data-view="bestellen"] .meet-note{grid-row:2;grid-column:1/-1;justify-self:end;margin-top:-1px;font:700 1.3rem/1.05 var(--f-hand);color:var(--groen-diep);transform:rotate(-2deg);transform-origin:right center;text-align:right}
[data-view="bestellen"] .meet-note.is-nieuw{animation:bestellen-wiebel .6s var(--ease-out)}
[data-view="bestellen"] .meet[data-klok="klaar"] .meet-live i{background:var(--groen-diep)}
@keyframes bestellen-puls{50%{transform:scale(.6);opacity:.55}}
@keyframes bestellen-glans{from{transform:translateX(-110%)}to{transform:translateX(110%)}}
@keyframes bestellen-tik{40%{transform:scale(1.12)}}
@keyframes bestellen-wiebel{30%{transform:rotate(-5deg)}65%{transform:rotate(.5deg)}}

/* ---------- overzicht (rechts op desktop, balk op mobiel) ---------- */
[data-view="bestellen"] .sum-kaart{position:relative;min-width:0;background:var(--krijtwit);border:1px solid var(--kalk);border-radius:var(--r-card);box-shadow:var(--sh-soft)}
[data-view="bestellen"] .sum-bar{display:none}
[data-view="bestellen"] .sum-pad{padding:22px 22px 20px}
[data-view="bestellen"] .sum-titel{font:600 11px/1.2 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--grafiet);margin-bottom:12px}
[data-view="bestellen"] .sl{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:5px 6px;margin-inline:-6px;font-size:15px;line-height:1.35;font-variant-numeric:tabular-nums;border-radius:6px;transition:background-color .6s}
[data-view="bestellen"] .sl > span:last-child{font-weight:600;white-space:nowrap}
[data-view="bestellen"] .sl b{display:block;font:700 1.1rem/1.2 var(--f-display);letter-spacing:-.015em}
[data-view="bestellen"] .sl small{display:block;margin-top:3px;font-size:13.5px;line-height:1.4;color:var(--grafiet)}
[data-view="bestellen"] .sl-extra b{font:600 15px/1.3 var(--f-body);letter-spacing:0}
[data-view="bestellen"] .sl-sub{margin-top:8px;padding-top:12px;border-top:1px dashed var(--kalk);border-radius:0}
[data-view="bestellen"] .sl-tot{margin-top:6px;padding-top:12px;border-top:1.5px solid var(--houtskool);border-radius:0;align-items:center}
[data-view="bestellen"] .sl-tot > span:first-child{font-weight:700}
[data-view="bestellen"] .sl-tot > span:last-child{font:800 1.7rem/1 var(--f-display);letter-spacing:-.03em}
[data-view="bestellen"] .sl.is-nieuw{background-color:var(--tint-geel);transition:none}
[data-view="bestellen"] .lever{margin-top:18px;padding:13px 15px 14px;border-radius:var(--r-ui);background:var(--papier);border:1px solid var(--kalk)}
[data-view="bestellen"] .lever .label{margin-bottom:8px}
[data-view="bestellen"] .lever-datum{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;font:700 1.1rem/1.2 var(--f-display);letter-spacing:-.01em}
[data-view="bestellen"] .lever-datum .chip{font-size:10.5px}
[data-view="bestellen"] .sum-h3{margin-top:20px;font:700 1.02rem/1.2 var(--f-display);letter-spacing:-.01em}
[data-view="bestellen"] .sum-kaart .checklist{margin-top:6px}
[data-view="bestellen"] .sum-kaart .checklist li{font-size:14.5px;line-height:1.45;padding-block:7px}
[data-view="bestellen"] .sum-vb{margin-top:6px;font-size:14px;line-height:1.5;color:var(--grafiet)}
[data-view="bestellen"] .vertrouwen{display:grid;gap:7px;margin-top:16px;padding-top:14px;border-top:1px dashed var(--kalk);font:500 11.5px/1.35 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--grafiet)}
[data-view="bestellen"] .vertrouwen li{display:flex;align-items:center;gap:9px}
[data-view="bestellen"] .vertrouwen li::before{content:"";width:7px;height:7px;flex:none;border-radius:50%;background:var(--groen-diep)}
[data-view="bestellen"] .sum-voet{margin-top:10px;font-size:13px;line-height:1.45;color:var(--grafiet)}
@media (min-width:981px) and (min-height:780px){
  [data-view="bestellen"] .sum-kaart{position:sticky;top:96px}
}

/* ---------- de gedeelde bestelflow in deze pagina ---------- */
[data-view="bestellen"] .flow-laad{padding:28px;border-radius:var(--r-card);border:1px dashed var(--kalk);font:500 12px/1.4 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--grafiet)}
[data-view="bestellen"] .flow-fout{padding:24px;border-radius:var(--r-card);background:var(--papier);border:1px solid var(--kalk)}
[data-view="bestellen"] .of-page{max-width:none;background:var(--papier);box-shadow:var(--sh-screen);border-radius:var(--r-card)}
[data-view="bestellen"] .of-page .p-top,[data-view="bestellen"] .of-page .p-geduld,[data-view="bestellen"] .of-page .p-timer{display:none}
[data-view="bestellen"] .of-page .p-head{padding:14px clamp(18px,2.4vw,28px);background:var(--krijtwit)}
[data-view="bestellen"] .of-page .p-meta{margin-top:0}
[data-view="bestellen"] .of-page .p-meta::after{content:"Stap 1 van 3" / "";font:600 10.5px/1.2 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--grafiet)}
[data-view="bestellen"] .of-page .p-meta:has(li:nth-child(2).is-cur)::after{content:"Stap 2 van 3" / ""}
[data-view="bestellen"] .of-page .p-meta:has(li:nth-child(3).is-cur)::after{content:"Stap 3 van 3 · betalen" / ""}
[data-view="bestellen"] .of-page .p-body{padding:clamp(18px,2.2vw,26px) clamp(18px,2.6vw,30px) clamp(14px,1.8vw,20px)}
[data-view="bestellen"] .of-page .p-step legend{font-size:clamp(1.3rem,1.8vw,1.55rem);margin-bottom:16px}
[data-view="bestellen"] .of-page .p-step .label{margin:18px 0 10px}
[data-view="bestellen"] .of-page .p-foot{padding:14px clamp(18px,2.6vw,30px) 16px;background:var(--krijtwit)}
/* geruststelling in de voet zolang je nog niet bij betalen bent (alleen css, de flow zelf blijft gedeeld) */
[data-view="bestellen"] .of-page .p-foot > [data-of-back]{order:0}
[data-view="bestellen"] .of-page .p-foot::before{order:1;flex:1 1 130px;min-width:0;content:"Je betaalt pas in stap 3.";font:500 11.5px/1.35 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--grafiet)}
[data-view="bestellen"] .of-page .p-foot > [data-of-next]{order:2}
[data-view="bestellen"] .of-page .p-foot > p{order:3}
[data-view="bestellen"] .of-page:has(.p-steps li:nth-child(3).is-cur) .p-foot::before,[data-view="bestellen"] .of-page:has(.p-steps li:nth-child(3).is-done) .p-foot::before{content:none}
[data-view="bestellen"] .of-page .pay-note,[data-view="bestellen"] .of-page .p-endorse{text-wrap:pretty}
/* keuzekaarten: rondje, vinkje en prijs op de eerste regel, ook als de naam over twee regels loopt */
[data-view="bestellen"] .of-page .p-step[data-step="1"] > .opt{align-items:start}
[data-view="bestellen"] .of-page .p-step[data-step="1"] > .opt .radio-dot,[data-view="bestellen"] .of-page .p-step[data-step="1"] > .opt .check-box{margin-top:3px}
[data-view="bestellen"] .of-page .p-step[data-step="1"] > .opt .opt-price{margin-top:5px}
@media (min-width:981px){
  [data-view="bestellen"] .of-page .p-endorse{display:none}
  /* het overzicht staat er al naast: geen tweede prijsblok in stap 3 */
  [data-view="bestellen"] .of-page [data-of-sum]{display:none}
}
/* brede schermen: de twee pakketten naast elkaar, zodat stap 1 met knop in één scherm past */
@media (min-width:1100px){
  [data-view="bestellen"] .of-page .p-step[data-step="1"]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:12px}
  [data-view="bestellen"] .of-page .p-step[data-step="1"] > *{grid-column:1/-1}
  [data-view="bestellen"] .of-page .p-step[data-step="1"] > .opt:has(input[type="radio"]){grid-column:auto;align-content:start}
}

/* ---------- bedankstaat ---------- */
[data-view="bestellen"] .klaar{background:var(--papier);border:1px solid var(--kalk);border-radius:var(--r-card);box-shadow:var(--sh-screen);overflow:hidden}
[data-view="bestellen"] .klaar-bar{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 clamp(18px,2.6vw,30px);background:var(--krijtwit);border-bottom:1px solid var(--kalk);font:600 10.5px/1.2 var(--f-mono);letter-spacing:.1em;text-transform:uppercase}
[data-view="bestellen"] .klaar-check{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--groen);font:700 11px/1 var(--f-mono)}
[data-view="bestellen"] .klaar-pkg{margin-left:auto;color:var(--grafiet);text-align:right}
[data-view="bestellen"] .klaar-in{padding:clamp(22px,3vw,34px) clamp(18px,2.8vw,34px) clamp(20px,2.6vw,30px)}
[data-view="bestellen"] .klaar-h{font:800 clamp(1.4rem,2vw,1.7rem)/1.1 var(--f-display);letter-spacing:-.025em}
[data-view="bestellen"] .klaar .tl{margin:22px 0 8px}
[data-view="bestellen"] .klaar .tl b .ck-host{margin-left:10px;padding-inline:3px}
[data-view="bestellen"] .klaar .tl b,[data-view="bestellen"] .klaar .tl b .ck-host{color:var(--houtskool)}
[data-view="bestellen"] .watnu{margin-top:10px;padding:16px 18px;border-radius:var(--r-ui);background:var(--krijtwit);border:1px dashed var(--grafiet)}
[data-view="bestellen"] .watnu-h{font:700 1.08rem/1.2 var(--f-display);letter-spacing:-.01em;margin-bottom:6px}
[data-view="bestellen"] .watnu p{font-size:15.5px;line-height:1.5}
[data-view="bestellen"] .klaar .proto-note{margin-top:18px}

/* ---------- vragen ---------- */
[data-view="bestellen"] .vragen-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.35fr);gap:clamp(28px,5vw,72px);align-items:start}
[data-view="bestellen"] .vragen-kop .h2{margin:18px 0 18px}
[data-view="bestellen"] .mail-rij{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:18px}
[data-view="bestellen"] .mail-rij code{font:500 15px/1 var(--f-mono);padding:13px 14px;border-radius:12px;background:var(--krijtwit);border:1px solid var(--kalk);user-select:all}
[data-view="bestellen"] .faq .meer{margin-top:16px}

/* ---------- slot: terug naar de bestelling, en delen na het bestellen ---------- */
[data-view="bestellen"] .cta-band{overflow-x:clip}   /* de krijtring om de knop mag op 390px niet 1px buiten beeld steken */
[data-view="bestellen"] .btn .arr-op{transition:transform .22s var(--ease-out)}
[data-view="bestellen"] .btn:hover .arr-op{transform:translateY(-3px)}
[data-view="bestellen"] .deel-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.8fr);gap:clamp(32px,5vw,72px);align-items:center}
[data-view="bestellen"] .deel-tekst{min-width:0}
[data-view="bestellen"] .deel .h2{margin:16px 0 22px;font-size:clamp(2.2rem,4.4vw,3.8rem)}
[data-view="bestellen"] .deel-vb{margin:0;min-width:0;justify-self:center;width:100%;max-width:380px}
[data-view="bestellen"] .vb-scherm{position:relative;padding:18px 16px 16px;border-radius:var(--r-card);background:var(--papier);color:var(--houtskool);box-shadow:var(--sh-screen);transform:rotate(-1.6deg)}
[data-view="bestellen"] .vb-tag{display:inline-block;margin-bottom:14px;padding:4px 7px;border-radius:5px;background:var(--zand);font:600 10.5px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--grafiet)}
[data-view="bestellen"] .vb-bel{position:relative;margin-left:12%;padding:12px 12px 26px;border-radius:16px 16px 4px 16px;background:var(--munt)}
[data-view="bestellen"] .vb-tekst{font-size:15px;line-height:1.45}
[data-view="bestellen"] .vb-link{display:grid;grid-template-columns:36px minmax(0,1fr);gap:10px;align-items:center;margin-top:10px;padding:10px;border-radius:10px;background:var(--papier);border-left:3px solid var(--geel-diep)}
[data-view="bestellen"] .vb-mark{width:36px;height:36px}
[data-view="bestellen"] .vb-mark circle{fill:none;stroke:var(--geel);stroke-width:3.4}
[data-view="bestellen"] .vb-mark path{fill:var(--houtskool)}
[data-view="bestellen"] .vb-link b{display:block;font:700 13.5px/1.3 var(--f-body)}
[data-view="bestellen"] .vb-link small{display:block;margin-top:3px;font:500 11.5px/1.2 var(--f-mono);color:var(--grafiet)}
[data-view="bestellen"] .vb-tijd{position:absolute;right:12px;bottom:7px;font:500 11px/1 var(--f-mono);color:var(--grafiet)}
[data-view="bestellen"] .vb-noot{display:flex;align-items:flex-end;justify-content:flex-end;gap:6px;margin-top:14px;font:700 1.45rem/1 var(--f-hand);color:var(--geel)}
[data-view="bestellen"] .vb-pijl{position:relative;width:54px;height:40px;flex:none}
[data-view="bestellen"] .vb-pijl svg{position:absolute;inset:0;overflow:visible}
[data-view="bestellen"] .deel-rij{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px;margin-top:30px}
[data-view="bestellen"] .deel-rij code{max-width:100%;overflow-wrap:anywhere;font:500 16px/1.2 var(--f-mono);padding:14px 16px;border-radius:12px;background:var(--wit-06);border:1px solid var(--wit-16);color:var(--krijtwit);user-select:all}
[data-view="bestellen"] .deel-links{display:flex;flex-wrap:wrap;gap:4px 26px;margin-top:22px}

/* ---------- smal: één kolom, overzicht als balk die openklapt ---------- */
@media (max-width:980px){
  [data-view="bestellen"] .bestel-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"intro" "meet" "sum" "flow";gap:20px;max-width:700px}
  /* na het bestellen eerst de bevestiging met de datum, daarna pas het overzicht */
  [data-view="bestellen"][data-staat="klaar"] .bestel-grid{grid-template-areas:"intro" "meet" "flow" "sum"}
  [data-view="bestellen"] .intro{margin-bottom:6px}
  [data-view="bestellen"] .intro .ck-svg{display:none}
  [data-view="bestellen"] .sum-bar{display:grid;grid-template-columns:minmax(0,1fr) auto 20px;align-items:center;gap:4px 14px;width:100%;min-height:64px;padding:12px 16px;border:0;background:none;border-radius:var(--r-card);cursor:pointer;text-align:left;color:var(--houtskool);font:inherit}
  [data-view="bestellen"] .sb-tekst{display:grid;gap:3px;min-width:0}
  [data-view="bestellen"] .sb-lab{font:600 10.5px/1.2 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--grafiet)}
  [data-view="bestellen"] .sb-pkg{font:700 1rem/1.25 var(--f-display);letter-spacing:-.01em}
  [data-view="bestellen"] .sb-tot{display:grid;justify-items:end;gap:3px;font:800 1.2rem/1 var(--f-display);letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
  [data-view="bestellen"] .sb-tot small{font:500 10.5px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--grafiet)}
  [data-view="bestellen"] .sb-chev{width:20px;height:20px;transition:transform .35s var(--ease-out)}
  [data-view="bestellen"] .sb-chev path{fill:none;stroke:var(--houtskool);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  [data-view="bestellen"] .sum-kaart.is-open .sb-chev{transform:rotate(180deg)}
  [data-view="bestellen"] .sum-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .42s var(--ease-out)}
  [data-view="bestellen"] .sum-kaart.is-open .sum-body{grid-template-rows:1fr}
  [data-view="bestellen"] .sum-in{min-height:0;overflow:hidden;visibility:hidden;transition:visibility 0s .42s}
  [data-view="bestellen"] .sum-kaart.is-open .sum-in{visibility:visible;transition:visibility 0s 0s}
  [data-view="bestellen"] .sum-pad{padding:4px 16px 18px;border-top:1px dashed var(--kalk);margin-inline:0}
  [data-view="bestellen"] .sum-titel{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  [data-view="bestellen"] .sum-regels{padding-top:12px}
  [data-view="bestellen"] .vragen-grid,[data-view="bestellen"] .deel-grid{grid-template-columns:minmax(0,1fr)}
  [data-view="bestellen"] .deel-vb{justify-self:start;max-width:360px}
}
@media (max-width:560px){
  /* telefoon: minder lucht boven het formulier, zodat stap 1 eerder in beeld komt */
  [data-view="bestellen"] .util{margin-bottom:4px}
  [data-view="bestellen"] .util-rust{font-size:10.5px}
  [data-view="bestellen"] .bestel-grid{gap:14px}
  [data-view="bestellen"] .intro{margin-bottom:2px}
  [data-view="bestellen"] .intro .eyebrow{margin-bottom:14px}
  [data-view="bestellen"] .intro .lead{margin-top:12px}
  [data-view="bestellen"] .meet-body{padding:12px 16px 12px}
  [data-view="bestellen"] .meet-line{font-size:1.06rem}
  [data-view="bestellen"] .meet-geduld{margin-top:11px;padding-top:11px}
  [data-view="bestellen"] .klaar-pkg{display:none}
  [data-view="bestellen"] .of-page:has(.p-steps li:nth-child(2).is-cur) .p-foot::before{content:none}
  /* stap 3: de betaalknop past niet naast Terug; dan krijgt hij de hele regel, in de duimzone */
  [data-view="bestellen"] .of-page:has(.p-steps li:nth-child(3).is-cur) .p-foot > [data-of-next]{flex:1 1 auto}
  [data-view="bestellen"] .deel-rij .btn{width:100%}
  [data-view="bestellen"] .deel-rij code{width:100%;text-align:center}
}
@media (pointer:coarse){
  [data-view="bestellen"] .meet-bar{min-height:52px}
  [data-view="bestellen"] .meet-pauze{width:44px;height:44px;margin:0 -8px 0 0}
}
@media (prefers-reduced-motion:reduce){
  [data-view="bestellen"] .meet .g-bar::after{display:none}
  [data-view="bestellen"] .meet-pauze{display:none}   /* bij minder beweging loopt de klok niet vanzelf: niks te pauzeren */
}

/* ===== view: branche ===== */
/* branche: elke selector begint met [data-view="branche"]; keyframes met branche- */

/* ---------- hero ---------- */
[data-view="branche"] .br-hero{overflow:clip}
[data-view="branche"] .br-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);gap:clamp(28px,4.4vw,64px);align-items:center}
[data-view="branche"] .br-hero-copy{min-width:0}
[data-view="branche"] .br-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:0 10px;margin:-10px 0 8px;font:500 12.5px/1.25 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--grafiet)}
[data-view="branche"] .br-crumb a{display:inline-flex;align-items:center;min-height:44px;color:var(--houtskool);text-decoration:underline;text-decoration-color:var(--kalk);text-decoration-thickness:1.5px;text-underline-offset:5px;border-radius:4px}
[data-view="branche"] .br-crumb a:hover{text-decoration-color:currentColor}
[data-view="branche"] .br-crumb-cur{display:inline-flex;align-items:center;gap:10px}
[data-view="branche"] .br-crumb-sep{color:var(--grafiet);font-weight:600}
[data-view="branche"] .br-h1{max-width:11.5em}
[data-view="branche"] .br-trust{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:28px;font:500 12px/1.4 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--grafiet)}
[data-view="branche"] .br-trust li{display:flex;align-items:center;gap:8px}
[data-view="branche"] .br-trust li::before{content:"";width:7px;height:7px;flex:none;border-radius:50%;background:var(--groen-diep)}

/* ---------- de mini-site (vaste bühne van 480 x 380, geschaald naar de breedte) ---------- */
[data-view="branche"] .br-mock{position:relative;margin:0;width:100%;max-width:580px;justify-self:center;min-width:0}
[data-view="branche"] .mk-vp{position:relative;width:100%;aspect-ratio:480/380}
[data-view="branche"] .mk-stage{position:absolute;left:0;top:0;width:480px;height:380px;transform-origin:0 0}
[data-view="branche"] .mk-tilt{position:absolute;inset:0}
@media (min-width:981px){[data-view="branche"] .mk-tilt{transform:rotate(-1deg)}}
[data-view="branche"] .mk-browser{position:absolute;left:10px;top:12px;width:460px;height:318px;background:var(--papier);border:1px solid var(--kalk);border-radius:14px;box-shadow:var(--sh-screen);overflow:hidden;color:var(--houtskool)}
[data-view="branche"] .mk-bar{position:absolute;inset:0 0 auto;height:30px;display:flex;align-items:center;gap:10px;padding:0 10px;background:var(--krijtwit);border-bottom:1px solid var(--kalk)}
[data-view="branche"] .mk-dots{display:flex;gap:5px;flex:none}
[data-view="branche"] .mk-dots i{width:8px;height:8px;border-radius:50%;background:var(--kalk)}
[data-view="branche"] .mk-url{margin-inline:auto;height:18px;padding:0 14px;border-radius:var(--r-pill);background:var(--papier);border:1px solid var(--kalk);font:500 10px/16px var(--f-mono);color:var(--grafiet)}
[data-view="branche"] .mk-tag{flex:none;font:600 8.5px/1 var(--f-mono);letter-spacing:.1em;padding:4px 6px;border-radius:5px;background:var(--zand);color:var(--houtskool)}
[data-view="branche"] .mk-body{position:absolute;left:0;top:30px;width:458px;height:286px;overflow:hidden}
/* site */
[data-view="branche"] .mk-nav{position:absolute;left:0;top:0;width:458px;height:40px;border-bottom:1px solid var(--kalk)}
[data-view="branche"] .mk-logo{position:absolute;left:16px;top:13px;font:800 14.5px/1 var(--f-display);letter-spacing:-.03em;white-space:nowrap}
[data-view="branche"] .mk-links{position:absolute;left:146px;top:15px;display:flex;gap:15px;font:500 10.5px/1 var(--f-body);color:var(--grafiet);white-space:nowrap}
[data-view="branche"] .mk-navbtn{position:absolute;right:14px;top:9px;height:22px;padding:0 11px;border-radius:var(--r-pill);background:var(--houtskool);color:var(--krijtwit);font:600 10px/22px var(--f-body);white-space:nowrap}
[data-view="branche"] .mk-h{position:absolute;left:16px;top:58px;width:210px;font:800 23px/1.02 var(--f-display);letter-spacing:-.035em}
[data-view="branche"] .mk-sub{position:absolute;left:16px;top:116px;width:200px;font:400 10.5px/1.42 var(--f-body);color:var(--grafiet)}
[data-view="branche"] .mk-cta{position:absolute;left:16px;top:160px;height:24px;padding:0 12px;border-radius:var(--r-pill);border:1px solid var(--houtskool);font:600 10px/22px var(--f-body);white-space:nowrap}
[data-view="branche"] .mk-photo{position:absolute;left:238px;top:54px;width:206px;height:118px;border-radius:10px;overflow:hidden}
[data-view="branche"] .mk-photo svg{display:block;width:100%;height:100%}
[data-view="branche"] .mk-cards{position:absolute;left:16px;top:192px;width:428px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
[data-view="branche"] .mk-card{height:70px;border:1px solid var(--kalk);border-radius:10px;padding:9px 10px;background:var(--papier)}
[data-view="branche"] .mk-card i{display:block;width:14px;height:14px;border-radius:50%;margin-bottom:6px;background:var(--munt)}
[data-view="branche"] .mk-card:nth-child(2) i{background:var(--perzik)}
[data-view="branche"] .mk-card:nth-child(3) i{background:var(--poeder)}
[data-view="branche"] .mk-card b{display:block;font:700 11.5px/1.1 var(--f-body);margin-bottom:2px}
[data-view="branche"] .mk-card span{display:inline-block;font:400 9.5px/1.3 var(--f-body);color:var(--grafiet)}
[data-view="branche"] .mk-foot{position:absolute;left:16px;top:268px;width:428px;display:flex;justify-content:space-between;gap:12px;padding-top:6px;border-top:1px solid var(--kalk);font:400 9px/1.3 var(--f-body);color:var(--grafiet);white-space:nowrap}
/* formulier */
[data-view="branche"] .mk-form{padding:14px 16px}
[data-view="branche"] .mk-ftitle{font:800 16px/1 var(--f-display);letter-spacing:-.02em;margin-bottom:12px}
[data-view="branche"] .mk-fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px}
[data-view="branche"] .mk-field{display:grid;gap:3px;align-content:start}
[data-view="branche"] .mk-field.full{grid-column:1 / -1}
[data-view="branche"] .mk-field .lbl{justify-self:start;font:500 9.5px/1.1 var(--f-body);color:var(--grafiet)}
[data-view="branche"] .mk-field .inp{display:block;height:20px;border:1px solid var(--kalk);border-radius:6px;background:var(--krijtwit)}
[data-view="branche"] .mk-field.area .inp{height:46px}
[data-view="branche"] .mk-send-row{display:flex;align-items:center;gap:10px;margin-top:12px}
[data-view="branche"] .mk-send{display:inline-block;height:24px;padding:0 16px;border-radius:var(--r-pill);background:var(--houtskool);color:var(--krijtwit);font:600 10.5px/24px var(--f-body);white-space:nowrap}
[data-view="branche"] .mk-sent{display:inline-block;padding:6px 10px;border-radius:var(--r-pill);background:var(--tint-groen);font:600 9.5px/1 var(--f-mono);letter-spacing:.04em;white-space:nowrap}
/* kassa */
[data-view="branche"] .mk-steps{display:flex;gap:6px;margin-bottom:14px}
[data-view="branche"] .mk-steps li{font:600 8.5px/1 var(--f-mono);letter-spacing:.06em;padding:5px 8px;border-radius:var(--r-pill);background:var(--zand);color:var(--grafiet);text-transform:uppercase;white-space:nowrap}
[data-view="branche"] .mk-steps li.cur{background:var(--houtskool);color:var(--krijtwit)}
[data-view="branche"] .mk-co{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:14px;align-items:start}
[data-view="branche"] .mk-sum{border:1px solid var(--kalk);border-radius:10px;padding:10px 12px 8px}
[data-view="branche"] .mk-item{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:8px;align-items:center;padding-bottom:9px;margin-bottom:5px;border-bottom:1px solid var(--kalk);font:600 10.5px/1.3 var(--f-body)}
[data-view="branche"] .mk-item svg{width:28px;height:34px}
[data-view="branche"] .mk-item b{display:block;font-weight:700}
[data-view="branche"] .mk-item small{font-weight:400;font-size:9.5px;color:var(--grafiet)}
[data-view="branche"] .mk-row{display:flex;justify-content:space-between;gap:10px;padding:7px 2px;font:400 10.5px/1.2 var(--f-body)}
[data-view="branche"] .mk-row.tot{font-weight:700;border-top:1px dashed var(--kalk);margin-top:3px;padding-top:7px}
[data-view="branche"] .mk-pay{display:grid;gap:6px;align-content:start}
[data-view="branche"] .mk-pay .lbl{font:500 9.5px/1.1 var(--f-body);color:var(--grafiet)}
[data-view="branche"] .mk-opt{display:flex;align-items:center;gap:7px;height:26px;padding:0 9px;border:1px solid var(--kalk);border-radius:8px;font:500 10px/1 var(--f-body);white-space:nowrap}
[data-view="branche"] .mk-opt i{width:10px;height:10px;flex:none;border-radius:50%;border:1.5px solid var(--houtskool)}
[data-view="branche"] .mk-opt.on{border-color:var(--houtskool)}
[data-view="branche"] .mk-opt.on i{background:radial-gradient(circle,var(--houtskool) 0 2.4px,transparent 3px)}
[data-view="branche"] .mk-pay .mk-send{justify-self:start;margin-top:6px}
/* kaartje van de proefklant naast de site */
[data-view="branche"] .mk-over{position:absolute;right:6px;top:270px;width:224px;padding:12px 14px 11px;border-radius:14px;background:var(--papier);border:1px solid var(--kalk);box-shadow:var(--sh-lift);color:var(--houtskool);z-index:2}
[data-view="branche"] .mk-over-top{display:flex;align-items:center;gap:8px;font:700 12.5px/1.1 var(--f-body)}
[data-view="branche"] .mk-over-top svg{width:17px;height:17px;flex:none}
[data-view="branche"] .mk-over-top svg *{fill:none;stroke:var(--houtskool);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
[data-view="branche"] .mk-zero-row{display:flex;align-items:baseline;gap:26px;margin-top:8px}
[data-view="branche"] .mk-zero{display:inline-block;font:800 34px/1 var(--f-display);letter-spacing:-.04em;padding:0 3px}
[data-view="branche"] .mk-zero-row span:last-child{font:500 11px/1.3 var(--f-body);color:var(--grafiet)}
[data-view="branche"] .mk-turf{height:36px;margin:8px 0 2px;border-bottom:1.5px dashed var(--kalk)}
[data-view="branche"] .mk-over-foot{margin-top:12px;font:600 9.5px/1.2 var(--f-mono);letter-spacing:.04em;color:var(--grafiet)}
/* krijt, notitie en cursor */
[data-view="branche"] .mk-ink{position:absolute;left:0;top:0;overflow:visible;pointer-events:none;z-index:4}
[data-view="branche"] .mk-note{position:absolute;left:0;top:0;z-index:5;padding:3px 9px 5px;border-radius:8px;background:color-mix(in srgb,var(--krijtwit) 93%,transparent);box-shadow:0 1px 0 var(--zwart-06);font:700 22px/1.02 var(--f-hand);color:var(--oranje-diep);white-space:nowrap;transform:rotate(-2.5deg)}
[data-view="branche"] .mk-cursor{position:absolute;left:0;top:0;width:24px;height:30px;overflow:visible;z-index:6;opacity:0;transition:transform .9s cubic-bezier(.45,.05,.2,1),opacity .3s}
[data-view="branche"] .mk-cursor.is-on{opacity:1}
[data-view="branche"] .mk-cursor path{fill:var(--houtskool);stroke:var(--papier);stroke-width:1.6px;stroke-linejoin:round;transform-origin:2px 2px;transition:transform .12s}
[data-view="branche"] .mk-cursor.is-down path{transform:scale(.84)}
[data-view="branche"] .mk-cap{margin-top:12px;text-align:center;font:500 11px/1.4 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--grafiet)}

/* ---------- de proefklant ---------- */
[data-view="branche"] .br-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center}
[data-view="branche"] .br-rol-copy .h2,[data-view="branche"] .br-weten-copy .h2{margin:18px 0 20px}
[data-view="branche"] .br-note{display:flex;gap:12px;align-items:flex-start;max-width:520px;margin-top:26px;padding:15px 18px;border-radius:16px;background:var(--papier);border:1px dashed var(--grafiet);font-size:15.5px;line-height:1.5}
[data-view="branche"] .br-note .hand{flex:none;font-size:1.6rem;line-height:.9;color:var(--oranje-diep)}
[data-view="branche"] .br-rolkaart{width:100%;max-width:500px;justify-self:center}
[data-view="branche"] .rk-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 20px;border-bottom:1px dashed var(--kalk);background:var(--krijtwit)}
[data-view="branche"] .rk-tag{font:600 10.5px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;background:var(--houtskool);color:var(--krijtwit);border-radius:5px;padding:5px 7px}
[data-view="branche"] .rk-vb{font:600 10.5px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--grafiet)}
[data-view="branche"] .rk-body{padding:22px 22px 20px}
[data-view="branche"] .rk-naam{font:800 clamp(1.8rem,2.6vw,2.3rem)/1 var(--f-display);letter-spacing:-.035em}
[data-view="branche"] .rk-dl{display:grid;margin:18px 0 0}
[data-view="branche"] .rk-dl > div{display:grid;grid-template-columns:92px minmax(0,1fr);gap:12px;align-items:baseline;padding:11px 0;border-top:1px solid var(--kalk)}
[data-view="branche"] .rk-dl dt{font:600 11px/1.4 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--grafiet)}
[data-view="branche"] .rk-dl dd{margin:0;font-size:16px;line-height:1.45;min-width:0}
[data-view="branche"] .rk-app{display:flex;align-items:center;gap:8px}
[data-view="branche"] .rk-dev{width:20px;height:20px;flex:none}
[data-view="branche"] .rk-dev *{fill:none;stroke:var(--houtskool);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
[data-view="branche"] .rk-geduld{display:grid;gap:7px}
[data-view="branche"] .rk-min{font-weight:600;font-variant-numeric:tabular-nums}
[data-view="branche"] .rk-min small{display:block;font-weight:400;font-size:14.5px;color:var(--grafiet)}
[data-view="branche"] .rk-meter{position:relative;display:block;height:10px;border-radius:99px;background:var(--zand);overflow:hidden}
[data-view="branche"] .rk-meter i{position:absolute;left:0;top:0;bottom:0;width:calc(var(--g) * 100%);border-radius:inherit;background:var(--geel);transform-origin:0 50%}
[data-view="branche"] .rk-meter::after{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(to right,transparent 0 calc(10% - 1.5px),var(--papier) calc(10% - 1.5px) 10%)}
[data-view="branche"] .rk-schaal{display:flex;justify-content:space-between;font:500 10px/1 var(--f-mono);letter-spacing:.06em;color:var(--grafiet);text-transform:uppercase}

/* ---------- wat we vaak zien ---------- */
[data-view="branche"] .br-zien{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
[data-view="branche"] .br-zien-kaart{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:22px 22px 24px}
[data-view="branche"] .br-zien-kaart .h3{color:var(--krijtwit)}
[data-view="branche"] .br-zien-kaart p{font-size:16px;line-height:1.5}
[data-view="branche"] .br-zien-voet{margin-top:22px;font:500 11.5px/1.4 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--wit-74)}

/* ---------- wat jouw klant wil weten ---------- */
[data-view="branche"] .br-lijst{width:100%;max-width:560px;justify-self:end}
[data-view="branche"] .br-lijst-kop{display:flex;justify-content:space-between;gap:12px;padding:13px 20px;border-bottom:1px dashed var(--kalk);background:var(--krijtwit);font:600 10.5px/1.2 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--grafiet)}
[data-view="branche"] .br-checks{padding:6px 20px 10px}
[data-view="branche"] .br-checks li{grid-template-columns:22px minmax(0,1fr) auto;align-items:start;padding-block:13px;font-size:16px;line-height:1.4}
[data-view="branche"] .br-ck-t{font:600 10.5px/1.9 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--grafiet);white-space:nowrap}

/* ---------- de zes tegels ---------- */
[data-view="branche"] .br-tegels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
[data-view="branche"] .br-tegel{position:relative;display:flex;flex-direction:column;gap:12px;min-width:0;padding:20px 20px 22px;border-radius:var(--r-card);background:var(--papier);border:1px solid var(--kalk);box-shadow:var(--sh-soft)}
[data-view="branche"] .br-tegel.is-afhaak{background:color-mix(in srgb,var(--tint-oranje) 42%,var(--papier))}
[data-view="branche"] .br-tegel-top{display:flex;align-items:center;gap:12px}
[data-view="branche"] .br-num{display:grid;place-items:center;width:36px;height:36px;flex:none;border-radius:9px;background:var(--krijtwit);box-shadow:inset 0 0 0 1.5px var(--kalk);font:700 1.45rem/1 var(--f-hand)}
[data-view="branche"] .br-tegel h3{font:700 1.14rem/1.15 var(--f-display);letter-spacing:-.015em}
[data-view="branche"] .br-tegel p{color:var(--grafiet);font-size:15.5px;line-height:1.5}
[data-view="branche"] .br-flag{position:absolute;right:14px;top:-13px;box-shadow:0 0 0 1.5px var(--houtskool)}
[data-view="branche"] .br-buren{display:flex;flex-wrap:wrap;align-items:center;gap:6px 24px;margin-top:30px;padding:16px 20px;border-radius:16px;border:1px dashed var(--grafiet);background:var(--krijtwit)}
[data-view="branche"] .br-buren p{flex:1 1 380px;font-size:15.5px;line-height:1.5}
[data-view="branche"] .br-buren .link-chalk{flex:none}

/* ---------- twee vragen en de andere branches ---------- */
[data-view="branche"] .br-faq-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,.9fr);gap:clamp(32px,6vw,96px);align-items:start}
[data-view="branche"] .br-faq-col .h2{margin:18px 0 26px}
[data-view="branche"] .br-more{margin-top:14px}
[data-view="branche"] .br-andere{padding:22px 22px 12px;border-radius:var(--r-card);background:var(--zand);border:1px solid var(--kalk)}
[data-view="branche"] .br-andere-title{font:600 11.5px/1.2 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--grafiet);margin-bottom:6px}
[data-view="branche"] .br-andere li a{display:flex;align-items:center;gap:12px;min-height:56px;padding:6px 2px;border-bottom:1px dashed var(--kalk);text-decoration:none;color:var(--houtskool);font-weight:600;border-radius:6px}
[data-view="branche"] .br-andere li:last-child a{border-bottom:0}
[data-view="branche"] .br-andere .ico{width:34px;height:34px}
[data-view="branche"] .br-andere .ico svg{width:100%;height:100%}
[data-view="branche"] .br-andere .br-pijl{width:16px;height:16px;flex:none;margin-left:auto;transition:transform .22s var(--ease-out)}
[data-view="branche"] .br-andere .br-pijl path{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover) and (pointer:fine){
  [data-view="branche"] .br-andere li a:hover .br-pijl{transform:translateX(4px)}
}

@media (max-width:980px){
  [data-view="branche"] .br-hero-grid,[data-view="branche"] .br-split,[data-view="branche"] .br-faq-grid{grid-template-columns:minmax(0,1fr)}
  [data-view="branche"] .br-mock{margin-top:10px}
  [data-view="branche"] .br-lijst{justify-self:start}
  [data-view="branche"] .br-rolkaart{justify-self:start}
  [data-view="branche"] .br-zien{grid-template-columns:minmax(0,1fr);max-width:640px}
  [data-view="branche"] .br-tegels{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:620px){
  [data-view="branche"] .br-tegels{grid-template-columns:minmax(0,1fr);gap:20px}
  [data-view="branche"] .rk-dl > div{grid-template-columns:minmax(0,1fr);gap:4px}
  [data-view="branche"] .br-checks li{grid-template-columns:22px minmax(0,1fr)}
  [data-view="branche"] .br-ck-t{grid-column:2;line-height:1.2}
  [data-view="branche"] .br-buren{padding:14px 16px}
}

/* ===== view: contact ===== */
/* contact: alle selectors beginnen met [data-view="contact"]; keyframes met contact- */

/* ---------- 1 · intro ---------- */
[data-view="contact"] .intro-grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(28px,4.8vw,76px);align-items:center}
[data-view="contact"] .intro-copy{min-width:0}
[data-view="contact"] .intro .punch{max-width:21em;margin-top:14px;font-size:clamp(1.12rem,1.5vw,1.3rem);line-height:1.35}
[data-view="contact"] .klok-wrap{position:relative;min-width:0;width:100%;max-width:640px;justify-self:end}

/* de reactieklok: een strak scherm met krijt erop */
[data-view="contact"] .klok{position:relative;background:var(--papier);border:1px solid var(--kalk);border-radius:var(--r-card);box-shadow:var(--sh-screen)}
[data-view="contact"] .klok-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 14px;padding:12px clamp(16px,2.4vw,22px);background:var(--krijtwit);border-bottom:1px solid var(--kalk);border-radius:var(--r-card) var(--r-card) 0 0}
[data-view="contact"] .klok-tag{display:inline-flex;align-items:center;gap:10px;font:600 11px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--grafiet)}
[data-view="contact"] .klok-mode{display:inline-flex;align-items:center;gap:6px;padding:5px 7px;border-radius:5px;background:var(--houtskool);color:var(--krijtwit);letter-spacing:.1em}
/* de live-stip knippert niet eindeloos (rustig, en WCAG 2.2.2): drie tikken bij het laden en twee na elke minuutupdate */
[data-view="contact"] .klok-mode::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--oranje);animation:contact-puls 1.4s ease-in-out 3}
[data-view="contact"] .klok.is-tik .klok-mode::before{animation:contact-puls-b 1.4s ease-in-out 2}
[data-view="contact"] .klok.is-vb .klok-mode{background:var(--zand);color:var(--houtskool)}
[data-view="contact"] .klok.is-vb .klok-mode::before{display:none}
[data-view="contact"] .klok-status{font-size:11px}
@keyframes contact-puls{50%{transform:scale(.55);opacity:.45}}
@keyframes contact-puls-b{50%{transform:scale(.55);opacity:.45}}
[data-view="contact"] .klok-body{padding:clamp(18px,2.6vw,30px) clamp(18px,2.6vw,30px) clamp(18px,2.4vw,26px)}
[data-view="contact"] .klok-zin{font:700 clamp(1.42rem,2.25vw,1.95rem)/1.24 var(--f-display);letter-spacing:-.022em;text-wrap:pretty}
[data-view="contact"] .klok-dl{font-variant-numeric:tabular-nums;z-index:0;margin-inline:0 .26em}
[data-view="contact"] .klok-pre{margin-right:.42em}
[data-view="contact"] .klok-dl > span{position:relative;z-index:1}
[data-view="contact"] .klok-uitleg{margin-top:14px;font-size:14.5px;line-height:1.5;color:var(--grafiet)}

/* de tijdbalk: twee werkdagen, nacht of weekend ertussen, het gele stuk = 4 werkuren */
[data-view="contact"] .rk{position:relative;height:108px;margin-top:26px}
[data-view="contact"] .rk-dag{position:absolute;top:36px;height:26px;border-radius:7px;background:var(--krijtwit);box-shadow:inset 0 0 0 1.5px var(--houtskool);overflow:hidden}
[data-view="contact"] .rk-verleden{position:absolute;left:0;top:0;bottom:0;background:repeating-linear-gradient(-45deg,var(--kalk) 0 2px,transparent 2px 6px)}
[data-view="contact"] .rk-raam{position:absolute;top:0;bottom:0;background:var(--geel);box-shadow:inset 0 0 0 1.5px var(--houtskool);transform-origin:0 50%}
[data-view="contact"] .rk-gat{position:absolute;top:48px;height:0;border-top:2px dashed var(--kalk)}
[data-view="contact"] .rk-lijn{position:absolute;top:30px;width:2px;height:38px;margin-left:-1px;border-radius:2px;background:var(--houtskool)}
[data-view="contact"] .rk-chip{position:absolute;top:2px;left:0;white-space:nowrap;padding:5px 7px;border-radius:6px;font:600 10.5px/1 var(--f-mono);letter-spacing:.06em;font-variant-numeric:tabular-nums}
[data-view="contact"] .rk-chip-nu{background:var(--houtskool);color:var(--krijtwit)}
[data-view="contact"] .rk-chip-eind{background:var(--geel);color:var(--houtskool);box-shadow:inset 0 0 0 1.5px var(--houtskool)}
[data-view="contact"] .rk-tick{position:absolute;top:68px;font:500 10px/1 var(--f-mono);color:var(--grafiet);transform:translateX(-50%);font-variant-numeric:tabular-nums}
[data-view="contact"] .rk-tick-0{transform:none}
[data-view="contact"] .rk-tick-2{transform:translateX(-100%)}
[data-view="contact"] .rk-naam{position:absolute;top:88px;text-align:center;white-space:nowrap;font:600 10px/1.2 var(--f-mono);letter-spacing:.08em;color:var(--houtskool)}
[data-view="contact"] .rk-naam-gat{color:var(--grafiet);font-weight:500;letter-spacing:.02em}
[data-view="contact"] .rk-pijl{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}

/* andere momenten proberen */
[data-view="contact"] .klok-probeer{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin-top:20px}
[data-view="contact"] .klok-probeer-lab{width:100%;text-align:center;font:600 11px/1.3 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--grafiet);margin-bottom:2px}
[data-view="contact"] .moment{min-height:44px;padding:0 15px;border-radius:var(--r-pill);border:1px solid var(--kalk);background:var(--papier);font:600 11.5px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--houtskool);cursor:pointer;transition:border-color .2s,background-color .2s,color .2s}
[data-view="contact"] .moment:hover{border-color:var(--houtskool)}
[data-view="contact"] .moment[aria-pressed="true"]{background:var(--houtskool);border-color:var(--houtskool);color:var(--krijtwit)}

/* ---------- 2 · kanalen: mail en WhatsApp naast elkaar ---------- */
[data-view="contact"] .kanalen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
[data-view="contact"] .kanaal{position:relative;min-width:0;background:var(--papier);border:1px solid var(--kalk);border-radius:var(--r-card);padding:clamp(20px,2.4vw,28px);box-shadow:var(--sh-soft)}
[data-view="contact"] .k-top{display:flex;align-items:center;gap:12px;margin-bottom:14px}
[data-view="contact"] .k-ico{position:relative;width:46px;height:46px;flex:none;border-radius:14px;background:var(--zand)}
[data-view="contact"] .k-ico svg{position:absolute;left:1px;top:1px;width:44px;height:44px;overflow:visible}
[data-view="contact"] .k-txt{margin-top:8px;color:var(--grafiet);font-size:15.5px;line-height:1.5;max-width:34em}
[data-view="contact"] .k-adres{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:18px}
[data-view="contact"] .k-code{min-width:0;padding:12px 14px;border-radius:12px;background:var(--krijtwit);border:1px solid var(--kalk);font:500 15px/1.2 var(--f-mono);color:var(--houtskool);overflow-wrap:anywhere;-webkit-user-select:all;user-select:all}
[data-view="contact"] .k-tick{position:relative;width:24px;height:22px;flex:none;opacity:0;transition:opacity .25s}
[data-view="contact"] .k-tick.is-on{opacity:1}
[data-view="contact"] .k-tick svg{position:absolute;inset:0;overflow:visible}
[data-view="contact"] .k-open{margin-top:12px}
[data-view="contact"] .k-vragen{margin-top:clamp(26px,3.4vw,40px);display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;color:var(--grafiet)}

/* ---------- 3 · bedrijfsgegevens ---------- */
[data-view="contact"] .bedrijf-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:center}
[data-view="contact"] .bedrijf-copy{min-width:0}
[data-view="contact"] .bedrijf-copy .h2{margin:18px 0 20px}
[data-view="contact"] .bedrijf-link{margin-top:14px}
[data-view="contact"] .vk{position:relative;min-width:0;max-width:520px;width:100%;justify-self:end;background:var(--papier);border:1px solid var(--kalk);border-radius:18px;box-shadow:var(--sh-lift);padding:clamp(20px,2.8vw,32px);transform:rotate(-1deg)}
[data-view="contact"] .vk-kop{padding-bottom:16px;border-bottom:1px dashed var(--kalk)}
[data-view="contact"] .vk-naam{font:800 1.6rem/1 var(--f-display);letter-spacing:-.03em}
[data-view="contact"] .vk-sub{margin-top:8px;font:500 11.5px/1.45 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--grafiet)}
[data-view="contact"] .vk-rijen{margin:0}
[data-view="contact"] .vk-rijen > div{display:grid;grid-template-columns:84px minmax(0,1fr);gap:12px;align-items:baseline;padding-block:11px;border-bottom:1px dashed var(--kalk)}
[data-view="contact"] .vk-rijen > div:last-child{border-bottom:0;padding-bottom:0}
[data-view="contact"] .vk-rijen dt{font:600 11px/1.4 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--grafiet)}
[data-view="contact"] .vk-rijen dd{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 12px;font-size:15.5px;line-height:1.45;min-width:0;overflow-wrap:anywhere}

/* ---------- responsief ---------- */
@media (max-width:980px){
  [data-view="contact"] .intro-grid{grid-template-columns:minmax(0,1fr)}
  [data-view="contact"] .klok-wrap{justify-self:start}
  [data-view="contact"] .bedrijf-grid{grid-template-columns:minmax(0,1fr)}
  [data-view="contact"] .vk{justify-self:start}
}
@media (max-width:860px){
  [data-view="contact"] .kanalen{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  [data-view="contact"] .klok-probeer{justify-content:flex-start}
  [data-view="contact"] .klok-probeer-lab{text-align:left}
  [data-view="contact"] .vk{transform:none}
  [data-view="contact"] .vk-rijen > div{grid-template-columns:minmax(0,1fr);gap:2px}
  [data-view="contact"] .k-adres .k-code{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){
  [data-view="contact"] .klok-mode::before,[data-view="contact"] .klok.is-tik .klok-mode::before{animation:none}
}

/* ===== view: hoe-het-werkt ===== */
/* hoe-het-werkt: elke selector begint met [data-view="hoe-het-werkt"]; keyframes met hoe-het-werkt- */

/* ---------- paginakop + inhoudsopgave ---------- */
[data-view="hoe-het-werkt"] .intro-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.86fr);gap:clamp(28px,5vw,80px);align-items:end}
[data-view="hoe-het-werkt"] .intro-copy{min-width:0}
[data-view="hoe-het-werkt"] .index{background:var(--papier);border:1px solid var(--kalk);border-radius:var(--r-card);box-shadow:var(--sh-soft);padding:6px 8px 8px;min-width:0}
[data-view="hoe-het-werkt"] .index-head{padding:12px 12px 12px;font:600 11px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--grafiet);border-bottom:1px dashed var(--kalk)}
[data-view="hoe-het-werkt"] .index ol{display:grid}
[data-view="hoe-het-werkt"] .index li + li{border-top:1px dashed var(--kalk)}
[data-view="hoe-het-werkt"] .index a{display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:10px;min-height:46px;padding:6px 12px;border-radius:12px;text-decoration:none;color:var(--houtskool);transition:background-color .18s}
[data-view="hoe-het-werkt"] .index a:hover{background:var(--krijtwit)}
[data-view="hoe-het-werkt"] .index a:hover .ix-t{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px}
[data-view="hoe-het-werkt"] .ix-n{font:600 11.5px/1 var(--f-mono);color:var(--grafiet);letter-spacing:.04em}
[data-view="hoe-het-werkt"] .ix-t{font-weight:600;font-size:15.5px;line-height:1.25}
[data-view="hoe-het-werkt"] .intro-note{flex-basis:100%;display:flex;align-items:flex-start;gap:6px;margin:-6px 0 0 30px;transform:rotate(-2.5deg);transform-origin:left top;font:700 1.38rem/1.1 var(--f-hand);color:var(--grafiet);max-width:24em}
[data-view="hoe-het-werkt"] .intro-note-arrow{position:relative;width:44px;height:38px;flex:none;margin-top:-18px}
[data-view="hoe-het-werkt"] .intro-note-arrow svg{position:absolute;inset:0;overflow:visible}
[data-view="hoe-het-werkt"] .ix-v{font:500 11px/1 var(--f-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--grafiet);white-space:nowrap;font-variant-numeric:tabular-nums}

/* ---------- 1 tijdlijn: het stopwatchscherm ---------- */
[data-view="hoe-het-werkt"] .when-spoed{display:none}
[data-view="hoe-het-werkt"] .is-spoed .when-spoed{display:inline}
[data-view="hoe-het-werkt"] .is-spoed .when-normal{display:none}
[data-view="hoe-het-werkt"] .sw{--sw-pad:clamp(18px,2.6vw,32px);--sw-c1:minmax(0,.62fr);position:relative;background:var(--papier);border:1px solid var(--kalk);border-radius:var(--r-card);box-shadow:var(--sh-lift);overflow:hidden}
[data-view="hoe-het-werkt"] .sw-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px 28px;padding:var(--sw-pad) var(--sw-pad) 6px}
[data-view="hoe-het-werkt"] .sw-label{font:600 11px/1.3 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--grafiet)}
[data-view="hoe-het-werkt"] .sw-big{display:flex;align-items:baseline;gap:12px;margin-top:10px}
[data-view="hoe-het-werkt"] .sw-roll{display:inline-block;height:1em;overflow:hidden;font:800 clamp(4rem,7.4vw,5.6rem)/1 var(--f-display);letter-spacing:-.05em;font-variant-numeric:tabular-nums}
[data-view="hoe-het-werkt"] .sw-col{display:block;transform:translateY(-3em);transition:transform .8s var(--ease-out)}
[data-view="hoe-het-werkt"] .sw-col > span{display:block;height:1em;line-height:1}
[data-view="hoe-het-werkt"] .sw.is-spoed .sw-col{transform:translateY(0)}
[data-view="hoe-het-werkt"] .sw-unit{font:700 clamp(1.25rem,1.8vw,1.6rem)/1 var(--f-display);letter-spacing:-.02em}
[data-view="hoe-het-werkt"] .sw-switch{display:grid;gap:8px;justify-items:start}
[data-view="hoe-het-werkt"] .sw-toggle button{font-size:12.5px}
/* liniaal: vandaag t/m werkdag 5; met Spoed schuift alles in tot werkdag 2 */
[data-view="hoe-het-werkt"] .sw-ruler{padding:34px var(--sw-pad) 26px}
[data-view="hoe-het-werkt"] .sw-track{position:relative;height:12px;border-radius:3px;background:var(--krijtwit);box-shadow:inset 0 0 0 1px var(--kalk)}
[data-view="hoe-het-werkt"] .sw-track::after{content:"";position:absolute;inset:0;border-radius:inherit;background:repeating-linear-gradient(to right,var(--kalk) 0 1px,transparent 1px 20%);pointer-events:none}
[data-view="hoe-het-werkt"] .sw-bar{position:absolute;left:0;top:0;bottom:0;width:100%;border-radius:3px;background:repeating-linear-gradient(to right,var(--houtskool) 0 calc(20% - 3px),transparent calc(20% - 3px) 20%);clip-path:inset(0 0 0 0);transition:clip-path .8s var(--ease-out);z-index:1}
[data-view="hoe-het-werkt"] .sw.is-spoed .sw-bar{clip-path:inset(0 60% 0 0)}
[data-view="hoe-het-werkt"] .sw-flagwrap{position:absolute;inset:0;pointer-events:none;transition:transform .8s var(--ease-out);z-index:2}
[data-view="hoe-het-werkt"] .sw.is-spoed .sw-flagwrap{transform:translateX(-60%)}
[data-view="hoe-het-werkt"] .sw-flag{position:absolute;right:0;bottom:calc(100% + 9px);font:600 10.5px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;padding:5px 7px;border-radius:5px 5px 0 5px;background:var(--groen);color:var(--houtskool);white-space:nowrap}
[data-view="hoe-het-werkt"] .sw-flag::after{content:"";position:absolute;right:0;top:100%;width:1.5px;height:12px;background:var(--houtskool)}
[data-view="hoe-het-werkt"] .sw-saved{position:absolute;left:40%;right:0;top:0;bottom:0;border-radius:0 3px 3px 0;background:repeating-linear-gradient(-45deg,var(--geel) 0 3px,transparent 3px 7px);opacity:0;transition:opacity .3s}
[data-view="hoe-het-werkt"] .sw.is-spoed .sw-saved{opacity:1;transition:opacity .4s .45s}
[data-view="hoe-het-werkt"] .sw-saved span{position:absolute;left:50%;bottom:calc(100% + 9px);transform:translateX(-50%);font:600 10.5px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--houtskool);white-space:nowrap}
[data-view="hoe-het-werkt"] .sw-ticks{position:relative;height:14px;margin-top:9px;font:500 10.5px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--grafiet);font-variant-numeric:tabular-nums}
[data-view="hoe-het-werkt"] .sw-ticks li{position:absolute;top:0;transform:translateX(-50%)}
[data-view="hoe-het-werkt"] .sw-ticks li:nth-child(1){left:0;transform:none}
[data-view="hoe-het-werkt"] .sw-ticks li:nth-child(2){left:20%}
[data-view="hoe-het-werkt"] .sw-ticks li:nth-child(3){left:40%}
[data-view="hoe-het-werkt"] .sw-ticks li:nth-child(4){left:60%}
[data-view="hoe-het-werkt"] .sw-ticks li:nth-child(5){left:80%}
[data-view="hoe-het-werkt"] .sw-ticks li:nth-child(6){left:100%;transform:translateX(-100%)}
[data-view="hoe-het-werkt"] .tk-s{display:none}
/* kolommen en rijen */
[data-view="hoe-het-werkt"] .sw-cols{display:grid;grid-template-columns:var(--sw-c1) minmax(0,1fr) minmax(0,.86fr);gap:0 clamp(18px,2.6vw,36px);padding:12px var(--sw-pad);background:var(--krijtwit);border-block:1px solid var(--kalk);font:600 10.5px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--grafiet)}
[data-view="hoe-het-werkt"] .sw-row{position:relative;display:grid;grid-template-columns:var(--sw-c1) minmax(0,1fr) minmax(0,.86fr);gap:12px clamp(18px,2.6vw,36px);padding:24px var(--sw-pad);border-bottom:1px dashed var(--kalk)}
[data-view="hoe-het-werkt"] .sw-row:last-child{border-bottom:0}
/* de rail: een stopwatchlint met maatstreepjes tussen de knopen */
[data-view="hoe-het-werkt"] .sw-row:not(:last-child)::before{content:"";position:absolute;left:calc(var(--sw-pad) + 3px);top:50px;bottom:-24px;width:10px;background:repeating-linear-gradient(to bottom,var(--kalk) 0 1.5px,transparent 1.5px 9px)}
[data-view="hoe-het-werkt"] .sw-row:not(:last-child)::after{content:"";position:absolute;left:calc(var(--sw-pad) + 7.25px);top:50px;bottom:-24px;width:1.5px;background:var(--houtskool)}
[data-view="hoe-het-werkt"] .sw-when{position:relative;padding-left:32px;min-width:0}
[data-view="hoe-het-werkt"] .sw-node{position:absolute;left:0;top:4px;width:16px;height:16px;border-radius:5px;background:var(--papier);box-shadow:inset 0 0 0 1.5px var(--houtskool)}
[data-view="hoe-het-werkt"] .sw-row:first-child .sw-node{background:var(--geel)}
[data-view="hoe-het-werkt"] .sw-row:last-child .sw-node{background:var(--groen)}
[data-view="hoe-het-werkt"] .sw-mark{font:700 12.5px/1.35 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;padding-top:2px}
[data-view="hoe-het-werkt"] .sw-date{margin-top:6px;font:500 11.5px/1.3 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--grafiet);font-variant-numeric:tabular-nums}
[data-view="hoe-het-werkt"] .sw-date:empty{display:none}
[data-view="hoe-het-werkt"] .sw-lab{font:600 10.5px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--grafiet);margin-bottom:8px}
[data-view="hoe-het-werkt"] .sw-wij,[data-view="hoe-het-werkt"] .sw-jij{min-width:0}
[data-view="hoe-het-werkt"] .sw-do{font:700 1.12rem/1.25 var(--f-display);letter-spacing:-.012em}
[data-view="hoe-het-werkt"] .sw-sub{margin-top:5px;font-size:15.5px;line-height:1.5;color:var(--grafiet);max-width:34em}
[data-view="hoe-het-werkt"] .sw-jij .chip{margin-top:12px}
[data-view="hoe-het-werkt"] .sw-niks{font-size:1.45rem;line-height:1;padding:6px 0 2px 4px}
[data-view="hoe-het-werkt"] .sw-note{margin-top:10px;font:700 1.36rem/1.05 var(--f-hand);color:var(--geel-diep);transform:rotate(-2deg);transform-origin:left center;max-width:16em}
[data-view="hoe-het-werkt"] .sw-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 28px;padding:20px var(--sw-pad) 22px;background:var(--krijtwit);border-top:1px solid var(--kalk)}
[data-view="hoe-het-werkt"] .sw-end{min-width:0}
[data-view="hoe-het-werkt"] .sw-when-txt{font-size:1.02rem;line-height:1.45}
[data-view="hoe-het-werkt"] .sw-sum{margin-top:6px;font:500 11.5px/1.45 var(--f-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--grafiet)}

/* ---------- 2 de hinkelbaan (signature) ---------- */
[data-view="hoe-het-werkt"] .hk{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:clamp(28px,4.6vw,72px);align-items:start}
[data-view="hoe-het-werkt"] .hk-court{position:relative;display:flex;flex-direction:column;align-items:center;min-width:0}
[data-view="hoe-het-werkt"] .hk-hint{font:600 11px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--wit-74);margin:4px 0 22px}
[data-view="hoe-het-werkt"] .hk-field{--tw:150px;--th:108px;position:relative}
[data-view="hoe-het-werkt"] .hk-tiles{position:relative;display:grid;grid-template-columns:repeat(4,calc(var(--tw) / 2));grid-template-rows:repeat(5,var(--th));grid-template-areas:". t6 t6 ." ". t5 t5 ." "t3 t3 t4 t4" ". t2 t2 ." ". t1 t1 ."}
[data-view="hoe-het-werkt"] .hk-tile{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;gap:6px;margin:0;padding:14px 16px 15px;border:0;border-radius:0;background:var(--wit-06);color:var(--krijtwit);text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:color .25s,background-color .2s}
[data-view="hoe-het-werkt"] .hk-tile[data-n="1"]{grid-area:t1}
[data-view="hoe-het-werkt"] .hk-tile[data-n="2"]{grid-area:t2}
[data-view="hoe-het-werkt"] .hk-tile[data-n="3"]{grid-area:t3}
[data-view="hoe-het-werkt"] .hk-tile[data-n="4"]{grid-area:t4}
[data-view="hoe-het-werkt"] .hk-tile[data-n="5"]{grid-area:t5}
[data-view="hoe-het-werkt"] .hk-tile[data-n="6"]{grid-area:t6;align-items:center;justify-content:flex-end;text-align:center;padding-bottom:14px;background:radial-gradient(ellipse 50% 100% at 50% 100%,var(--wit-06) 99%,transparent 100%) top/100% 44% no-repeat,linear-gradient(var(--wit-06),var(--wit-06)) bottom/100% 56% no-repeat}
[data-view="hoe-het-werkt"] .hk-tile::before{content:"";position:absolute;inset:6px;z-index:-1;border-radius:16px 12px 18px 11px / 12px 17px 11px 16px;background:var(--geel);box-shadow:0 0 0 4px color-mix(in srgb,var(--geel) 28%,transparent);opacity:0;transform:scale(.55) rotate(-8deg);transition:opacity .25s,transform .45s var(--ease-out)}
[data-view="hoe-het-werkt"] .hk-tile[data-n="6"]::before{inset:9px 8px 6px;border-radius:50% 50% 12px 14px / 62% 62% 10px 12px}
[data-view="hoe-het-werkt"] .hk-tile.is-on{color:var(--houtskool)}
[data-view="hoe-het-werkt"] .hk-tile.is-on::before{opacity:1;transform:scale(1) rotate(-2.2deg)}
[data-view="hoe-het-werkt"] .hk-tile:not(.is-on):hover{background-color:var(--wit-10)}
[data-view="hoe-het-werkt"] .hk-tile[data-n="6"]:not(.is-on):hover{background:radial-gradient(ellipse 50% 100% at 50% 100%,var(--wit-10) 99%,transparent 100%) top/100% 44% no-repeat,linear-gradient(var(--wit-10),var(--wit-10)) bottom/100% 56% no-repeat}
[data-view="hoe-het-werkt"] .hk-tile:focus-visible{outline:3px solid var(--krijtwit);outline-offset:3px;z-index:3}
[data-view="hoe-het-werkt"] .hk-n{font:700 2.5rem/.78 var(--f-hand)}
[data-view="hoe-het-werkt"] .hk-name{font:700 1.02rem/1.12 var(--f-display);letter-spacing:-.012em}
[data-view="hoe-het-werkt"] .hk-ink{position:absolute;left:0;top:0;overflow:visible;pointer-events:none;z-index:2}
[data-view="hoe-het-werkt"] .hk-stone,[data-view="hoe-het-werkt"] .hk-shadow{position:absolute;left:0;top:0;pointer-events:none;opacity:0;transition:opacity .25s}
[data-view="hoe-het-werkt"] .hk-stone{z-index:5;width:22px;height:18px;margin:-9px 0 0 -11px;border-radius:52% 48% 46% 54% / 58% 52% 48% 42%;background:var(--zand);box-shadow:inset -3px -3px 0 var(--zwart-28),0 0 0 1.5px var(--houtskool)}
[data-view="hoe-het-werkt"] .hk-shadow{z-index:4;width:20px;height:7px;margin:-3px 0 0 -10px;border-radius:50%;background:var(--zwart-50)}
[data-view="hoe-het-werkt"] .hk.is-ready .hk-stone{opacity:1}
[data-view="hoe-het-werkt"] .hk.is-ready .hk-shadow{opacity:.55}
[data-view="hoe-het-werkt"] .hk-dust{position:absolute;left:0;top:0;width:4px;height:4px;margin:-2px 0 0 -2px;border-radius:50%;background:var(--krijtwit);pointer-events:none;z-index:6}
[data-view="hoe-het-werkt"] .hk-start{display:flex;align-items:flex-end;gap:6px;margin-top:14px;font:700 1.42rem/1 var(--f-hand);color:var(--geel);transform:rotate(-2deg)}
[data-view="hoe-het-werkt"] .hk-start-arrow{position:relative;width:44px;height:40px;flex:none;margin-bottom:6px}
[data-view="hoe-het-werkt"] .hk-start-arrow svg{position:absolute;inset:0;overflow:visible}
/* het paneel: een wit scherm op de stoep */
[data-view="hoe-het-werkt"] .hk-panels{min-width:0}
[data-view="hoe-het-werkt"] .hk-panel{position:relative;background:var(--papier);color:var(--houtskool);border-radius:var(--r-card);box-shadow:0 2px 0 rgba(0,0,0,.18),0 44px 80px -40px rgba(0,0,0,.7);padding:clamp(20px,2.8vw,34px)}
[data-view="hoe-het-werkt"] .hk-panel:focus-visible{outline-color:var(--krijtwit);outline-offset:5px}
[data-view="hoe-het-werkt"] .hk-panel :focus-visible{outline-color:var(--houtskool)}
[data-view="hoe-het-werkt"] .hk-panel .link-chalk{color:var(--houtskool);text-decoration-color:var(--kalk)}
[data-view="hoe-het-werkt"] .hk-panel.is-swap > *{animation:hoe-het-werkt-swap .34s var(--ease-out) both}
[data-view="hoe-het-werkt"] .hk-panel.is-swap > :nth-child(2){animation-delay:.03s}
[data-view="hoe-het-werkt"] .hk-panel.is-swap > :nth-child(3){animation-delay:.06s}
[data-view="hoe-het-werkt"] .hk-panel.is-swap > :nth-child(n+4){animation-delay:.09s}
@keyframes hoe-het-werkt-swap{from{transform:translateY(8px)}}
[data-view="hoe-het-werkt"] .hp-top{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 16px;padding-bottom:14px;border-bottom:1px dashed var(--kalk)}
[data-view="hoe-het-werkt"] .hp-step{font:600 11px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--grafiet)}
[data-view="hoe-het-werkt"] .hp-name{font-size:1.06rem;font-weight:700;letter-spacing:-.01em;line-height:1.2}
[data-view="hoe-het-werkt"] .hp-q{margin:20px 0 24px;font:800 clamp(1.75rem,3.1vw,2.6rem)/1.02 var(--f-display);letter-spacing:-.035em;text-wrap:balance}
[data-view="hoe-het-werkt"] .hp-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,3vw,34px)}
[data-view="hoe-het-werkt"] .hp-lab{font:600 11px/1.2 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--grafiet);margin-bottom:6px}
[data-view="hoe-het-werkt"] .hp-checks li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;padding-block:8px;border-bottom:1px dashed var(--kalk);font-size:15.5px;line-height:1.45}
[data-view="hoe-het-werkt"] .hp-checks li:last-child{border-bottom:0}
[data-view="hoe-het-werkt"] .hp-tk{position:relative;width:20px;height:18px;margin-top:2px}
[data-view="hoe-het-werkt"] .hp-tk svg{position:absolute;inset:0;overflow:visible}
[data-view="hoe-het-werkt"] .hp-score li{display:grid;justify-items:start;gap:7px;padding-block:10px;border-bottom:1px dashed var(--kalk);font-size:15px;line-height:1.45}
[data-view="hoe-het-werkt"] .hp-score li:first-child{padding-top:8px}
[data-view="hoe-het-werkt"] .hp-score li:last-child{border-bottom:0}
[data-view="hoe-het-werkt"] .hp-find{margin-top:22px;padding:16px 18px 18px;border-radius:16px;background:var(--krijtwit);border:1px solid var(--kalk)}
[data-view="hoe-het-werkt"] .hp-find .hp-lab{margin-bottom:8px}
[data-view="hoe-het-werkt"] .hp-quote{font:700 1.5rem/1.1 var(--f-hand)}
[data-view="hoe-het-werkt"] .hp-tag{display:inline-block;font:600 10.5px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;padding:4px 6px;border-radius:5px;background:var(--zand);color:var(--houtskool);vertical-align:1px}
[data-view="hoe-het-werkt"] .hp-find .hp-tag{margin-left:6px}
[data-view="hoe-het-werkt"] .hp-foot{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:16px;font-size:14.5px;color:var(--grafiet)}
[data-view="hoe-het-werkt"] .hp-foot b{color:var(--houtskool);font:800 1.05rem/1 var(--f-display);letter-spacing:-.02em}
[data-view="hoe-het-werkt"] .hp-foot .link-chalk{font-size:15px}
[data-view="hoe-het-werkt"] .hk-sum{margin-top:clamp(28px,4vw,44px);font:600 11.5px/1.5 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--wit-74);text-align:center}

/* ---------- 3 rolkaarten ---------- */
[data-view="hoe-het-werkt"] .pk-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);gap:clamp(32px,5.5vw,84px);align-items:center}
[data-view="hoe-het-werkt"] .pk-copy{min-width:0}
[data-view="hoe-het-werkt"] .pk-copy .lead{margin-top:22px}
[data-view="hoe-het-werkt"] .pk-copy .h2{margin-top:18px}
[data-view="hoe-het-werkt"] .pk-body{margin-top:16px;color:var(--grafiet);max-width:36em}
[data-view="hoe-het-werkt"] .pk-side{min-width:0}
[data-view="hoe-het-werkt"] .deck{--o1:14px;--o2:26px;--o3:37px;display:grid;padding:0 calc(var(--o3) + 4px) calc(var(--o3) + 2px) 0}
[data-view="hoe-het-werkt"] .rk{grid-area:1/1;min-width:0;background:var(--papier);border:1px solid var(--kalk);border-radius:var(--r-card);box-shadow:var(--sh-soft);padding:clamp(18px,2.4vw,28px);transform-origin:50% 70%;transition:transform .55s var(--ease-out),box-shadow .4s}
[data-view="hoe-het-werkt"] .rk[data-pos="0"]{z-index:4;transform:rotate(-1.2deg);box-shadow:var(--sh-lift)}
[data-view="hoe-het-werkt"] .rk[data-pos="1"]{z-index:3;transform:translate(var(--o1),calc(var(--o1) * .85)) rotate(1.5deg)}
[data-view="hoe-het-werkt"] .rk[data-pos="2"]{z-index:2;transform:translate(var(--o2),calc(var(--o2) * .85)) rotate(3deg)}
[data-view="hoe-het-werkt"] .rk[data-pos="3"]{z-index:1;transform:translate(var(--o3),calc(var(--o3) * .85)) rotate(4.4deg)}
[data-view="hoe-het-werkt"] .rk:not([data-pos="0"]) .g-fill{transform:scaleX(0)!important}
[data-view="hoe-het-werkt"] .rk-top{display:flex;align-items:center;gap:6px 10px;padding-bottom:14px;border-bottom:1px dashed var(--kalk);font:600 10.5px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--grafiet)}
[data-view="hoe-het-werkt"] .rk-tag{background:var(--houtskool);color:var(--krijtwit);border-radius:5px;padding:4px 6px}
[data-view="hoe-het-werkt"] .rk-vb{margin-left:auto;background:var(--zand);color:var(--houtskool);border-radius:5px;padding:4px 6px}
[data-view="hoe-het-werkt"] .rk-who{display:grid;grid-template-columns:46px minmax(0,1fr);gap:14px;align-items:center;margin:20px 0 16px}
[data-view="hoe-het-werkt"] .rk-name{font-size:clamp(1.9rem,3vw,2.45rem);letter-spacing:-.035em}
[data-view="hoe-het-werkt"] .rk-wat{margin-top:6px;color:var(--grafiet);font-size:1.02rem;line-height:1.35}
[data-view="hoe-het-werkt"] .rk-dl{display:grid;margin:0}
[data-view="hoe-het-werkt"] .rk-dl > div{display:grid;grid-template-columns:88px minmax(0,1fr);gap:12px;padding-block:10px;border-top:1px dashed var(--kalk)}
[data-view="hoe-het-werkt"] .rk-dl dt{font:600 10.5px/1.9 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--grafiet)}
[data-view="hoe-het-werkt"] .rk-dl dd{margin:0;font-size:15.5px;line-height:1.45}
[data-view="hoe-het-werkt"] .rk-g dd{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px}
[data-view="hoe-het-werkt"] .rk-g .g-bar{margin:0;height:9px}
[data-view="hoe-het-werkt"] .rk[data-level="mid"] .g-fill{background:var(--geel)}
[data-view="hoe-het-werkt"] .rk[data-level="laag"] .g-fill{background:var(--oranje)}
[data-view="hoe-het-werkt"] .rk-min{font:600 12.5px/1 var(--f-mono);letter-spacing:.04em;white-space:nowrap}
[data-view="hoe-het-werkt"] .deck-bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:6px}
[data-view="hoe-het-werkt"] .deck-count{font:600 11.5px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--grafiet)}
[data-view="hoe-het-werkt"] .deck-count b{color:var(--houtskool)}
[data-view="hoe-het-werkt"] .rk-weg{grid-column:1/-1;margin-top:1px;font:700 1.18rem/1 var(--f-hand);color:var(--grafiet);transform:rotate(-1.5deg);transform-origin:left center}

/* ---------- 4 wat we nodig hebben: de boodschappenlijst ---------- */
[data-view="hoe-het-werkt"] .nd-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(32px,5.5vw,84px);align-items:center}
[data-view="hoe-het-werkt"] .nd-copy{min-width:0}
[data-view="hoe-het-werkt"] .nd-copy .h2{margin-top:18px}
[data-view="hoe-het-werkt"] .nd-copy .lead{margin-top:22px}
[data-view="hoe-het-werkt"] .nd-body{margin-top:14px;color:var(--grafiet);max-width:34em}
[data-view="hoe-het-werkt"] .nd-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:30px}
[data-view="hoe-het-werkt"] .nd-micro{font:500 11.5px/1.5 var(--f-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--grafiet)}
[data-view="hoe-het-werkt"] .bon{position:relative;min-width:0;background:var(--papier);border:1px solid var(--kalk);border-radius:var(--r-card);box-shadow:var(--sh-lift);padding:clamp(20px,2.8vw,32px);transform:rotate(.9deg)}
[data-view="hoe-het-werkt"] .bon-head{display:flex;justify-content:space-between;gap:12px;padding-bottom:14px;margin-bottom:18px;border-bottom:1px dashed var(--kalk);font:600 10.5px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--grafiet)}
[data-view="hoe-het-werkt"] .bon-lab{font:600 11px/1.2 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--grafiet)}
[data-view="hoe-het-werkt"] .bon-lab-niet{margin-top:22px}
[data-view="hoe-het-werkt"] .bon-wel li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:14px;padding-block:14px;border-bottom:1px dashed var(--kalk)}
[data-view="hoe-het-werkt"] .bon-n{width:30px;height:30px;display:grid;place-items:center;border-radius:8px;background:var(--geel);box-shadow:inset 0 0 0 1.5px var(--houtskool);font:700 1.3rem/1 var(--f-hand)}
[data-view="hoe-het-werkt"] .bon-what{font:700 1.18rem/1.2 var(--f-display);letter-spacing:-.015em;padding-top:3px}
[data-view="hoe-het-werkt"] .bon-opt{font:400 .9rem/1 var(--f-body);letter-spacing:0;color:var(--grafiet)}
[data-view="hoe-het-werkt"] .bon-url{display:inline-flex;margin-top:10px;max-width:100%;font:500 14px/1 var(--f-mono);padding:11px 14px;border-radius:12px;border:1.5px solid var(--kalk);background:var(--krijtwit);overflow:hidden;white-space:nowrap}
[data-view="hoe-het-werkt"] .bon-proto{color:var(--grafiet)}
[data-view="hoe-het-werkt"] .bon-q{margin-top:6px;color:var(--grafiet);font-size:15px;line-height:1.45}
[data-view="hoe-het-werkt"] .bon-niet{display:grid;gap:2px;margin-top:6px}
[data-view="hoe-het-werkt"] .bon-niet li{padding-block:6px;font:700 1.3rem/1.2 var(--f-display);letter-spacing:-.015em;color:var(--grafiet)}

/* ---------- 5 de proefcode ---------- */
[data-view="hoe-het-werkt"] .pc-grid{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.3fr);gap:clamp(28px,5.5vw,84px);align-items:start}
[data-view="hoe-het-werkt"] .pc-copy{min-width:0;position:sticky;top:110px}
[data-view="hoe-het-werkt"] .pc-copy .h2{margin-top:18px}
[data-view="hoe-het-werkt"] .pc-copy .lead{margin-top:22px}
[data-view="hoe-het-werkt"] .pc-more{margin-top:14px}
[data-view="hoe-het-werkt"] .regels{display:grid;border-top:1px solid var(--kalk);counter-reset:none}
[data-view="hoe-het-werkt"] .regels li{display:grid;grid-template-columns:48px minmax(0,1fr);gap:14px;padding:20px 4px;border-bottom:1px solid var(--kalk)}
[data-view="hoe-het-werkt"] .rg-n{font:600 12.5px/1.9 var(--f-mono);letter-spacing:.06em;color:var(--grafiet)}
[data-view="hoe-het-werkt"] .regels p{font-size:1.02rem;line-height:1.55;color:var(--grafiet);max-width:40em}
[data-view="hoe-het-werkt"] .regels b{display:block;margin-bottom:5px;color:var(--houtskool);font:700 clamp(1.14rem,1.6vw,1.34rem)/1.22 var(--f-display);letter-spacing:-.016em}

/* ---------- 6 vragen ---------- */
[data-view="hoe-het-werkt"] .vr-grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.4fr);gap:clamp(24px,5vw,72px);align-items:start}
[data-view="hoe-het-werkt"] .vr-side{min-width:0}
[data-view="hoe-het-werkt"] .vr-side .h2{margin-top:18px}
[data-view="hoe-het-werkt"] .vr-txt{margin-top:18px;color:var(--grafiet)}
[data-view="hoe-het-werkt"] .vr-mail{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:16px}
[data-view="hoe-het-werkt"] .vr-mail code{font:500 15px/1 var(--f-mono);user-select:all;padding:13px 14px;border-radius:12px;background:var(--papier);border:1px solid var(--kalk);overflow-wrap:anywhere}
[data-view="hoe-het-werkt"] .vr-more{margin-top:10px}
[data-view="hoe-het-werkt"] .faq{min-width:0}
[data-view="hoe-het-werkt"] .faq-item:not(.is-open) .faq-ico{background:var(--papier);box-shadow:inset 0 0 0 1px var(--kalk)}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  [data-view="hoe-het-werkt"] .hp-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:980px){
  [data-view="hoe-het-werkt"] .intro-grid,[data-view="hoe-het-werkt"] .pk-grid,[data-view="hoe-het-werkt"] .nd-grid,[data-view="hoe-het-werkt"] .pc-grid,[data-view="hoe-het-werkt"] .vr-grid{grid-template-columns:minmax(0,1fr)}
  [data-view="hoe-het-werkt"] .intro-copy{max-width:680px}
  [data-view="hoe-het-werkt"] .index{max-width:560px}
  [data-view="hoe-het-werkt"] .pc-copy{position:static}
  [data-view="hoe-het-werkt"] .pk-side,[data-view="hoe-het-werkt"] .bon{max-width:560px}
}
@media (max-width:860px){
  [data-view="hoe-het-werkt"] .hk{grid-template-columns:minmax(0,1fr)}
  [data-view="hoe-het-werkt"] .hk-field{--tw:140px;--th:98px}
  /* het paneel staat nu onder de baan en is weer breed genoeg voor twee kolommen */
  [data-view="hoe-het-werkt"] .hp-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media (max-width:820px){
  [data-view="hoe-het-werkt"] .sw-cols{display:none}
  [data-view="hoe-het-werkt"] .sw-row{grid-template-columns:minmax(0,1fr);gap:16px;padding-block:22px}
  [data-view="hoe-het-werkt"] .sw-wij,[data-view="hoe-het-werkt"] .sw-jij{padding-left:32px}
  [data-view="hoe-het-werkt"] .sw-row:not(:last-child)::before,[data-view="hoe-het-werkt"] .sw-row:not(:last-child)::after{top:48px;bottom:-26px}
}
@media (min-width:821px){
  [data-view="hoe-het-werkt"] .sw-lab{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
}
@media (max-width:700px){
  [data-view="hoe-het-werkt"] .hp-grid{grid-template-columns:minmax(0,1fr)}
  [data-view="hoe-het-werkt"] .sw-head{flex-direction:column;align-items:flex-start}
}
@media (max-width:560px){
  [data-view="hoe-het-werkt"] .hk-field{--tw:120px;--th:88px}
  [data-view="hoe-het-werkt"] .hk-tile{padding:11px 12px 12px}
  [data-view="hoe-het-werkt"] .hk-n{font-size:2.05rem}
  [data-view="hoe-het-werkt"] .hk-name{font-size:.9rem}
  [data-view="hoe-het-werkt"] .hk-tile[data-n="6"]{padding-bottom:10px}
  [data-view="hoe-het-werkt"] .deck{--o1:8px;--o2:15px;--o3:21px}
  [data-view="hoe-het-werkt"] .rk[data-pos="0"]{transform:rotate(-.8deg)}
  [data-view="hoe-het-werkt"] .rk[data-pos="1"]{transform:translate(var(--o1),calc(var(--o1) * .85)) rotate(1deg)}
  [data-view="hoe-het-werkt"] .rk[data-pos="2"]{transform:translate(var(--o2),calc(var(--o2) * .85)) rotate(1.8deg)}
  [data-view="hoe-het-werkt"] .rk[data-pos="3"]{transform:translate(var(--o3),calc(var(--o3) * .85)) rotate(2.6deg)}
  [data-view="hoe-het-werkt"] .rk-dl > div{grid-template-columns:minmax(0,1fr);gap:2px}
  [data-view="hoe-het-werkt"] .index a{grid-template-columns:26px minmax(0,1fr) auto;padding-inline:8px}
  [data-view="hoe-het-werkt"] .ix-t{font-size:15px}
  [data-view="hoe-het-werkt"] .bon{transform:none}
  [data-view="hoe-het-werkt"] .regels li{grid-template-columns:36px minmax(0,1fr);gap:10px}
  [data-view="hoe-het-werkt"] .sw-foot .btn{width:100%}
  [data-view="hoe-het-werkt"] .page-actions .btn{order:1}
  [data-view="hoe-het-werkt"] .intro-note{order:2;margin:-2px 0 4px 18px}
  [data-view="hoe-het-werkt"] .page-actions .link-chalk{order:3}
  [data-view="hoe-het-werkt"] .tk-l{display:none}
  [data-view="hoe-het-werkt"] .tk-s{display:inline}
}
@media (max-width:359px){
  /* heel smalle telefoons: het VOORBEELD-label mag naar een eigen regel */
  [data-view="hoe-het-werkt"] .rk-top{flex-wrap:wrap}
}
@media (pointer:coarse){
  [data-view="hoe-het-werkt"] .index a{min-height:48px}
}
@media (prefers-reduced-motion:reduce){
  [data-view="hoe-het-werkt"] .hk-panel.is-swap > *{animation:none}
}

/* ===== view: juridisch ===== */
/* juridisch: elke selector begint met [data-view="juridisch"]; eigen klassen met jr- */

/* ---------- paginakop ---------- */
[data-view="juridisch"] .jr-intro{padding-bottom:clamp(48px,6vw,80px)}
[data-view="juridisch"] .jr-intro .lead{margin-top:22px}
[data-view="juridisch"] .jr-stand{margin-top:14px;font:500 11.5px/1.4 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--grafiet)}

/* ---------- tekst met inhoudsopgave ---------- */
[data-view="juridisch"] .jr-body{padding-block:clamp(8px,2vw,24px) var(--section-y)}
[data-view="juridisch"] .jr-grid{display:grid;grid-template-columns:268px minmax(0,1fr);gap:clamp(32px,6vw,88px);align-items:start}
[data-view="juridisch"] .jr-index{position:sticky;top:96px;max-height:calc(100vh - 120px);overflow:auto;padding:4px 4px 8px 0;overscroll-behavior:contain}
[data-view="juridisch"] .jr-index-kop{margin:0 0 10px 30px;font:600 11px/1.2 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--grafiet)}
[data-view="juridisch"] .jr-index a{position:relative;display:flex;align-items:baseline;gap:8px;padding:5px 6px 5px 30px;border-radius:8px;text-decoration:none;color:var(--grafiet);font-size:14.5px;line-height:1.3;transition:color .2s,background-color .2s}
[data-view="juridisch"] .jr-index a:hover{color:var(--houtskool);background:var(--zand)}
[data-view="juridisch"] .jr-index-lijst > li{padding-block:2px}
[data-view="juridisch"] .jr-index-lijst > li + li{margin-top:4px}
[data-view="juridisch"] .jr-index-lijst > li > a{font-weight:600;color:var(--houtskool);font-size:15px}
[data-view="juridisch"] .jr-i-num{font:600 11px/1 var(--f-mono);letter-spacing:.06em;color:var(--grafiet)}
[data-view="juridisch"] .jr-sub{margin:2px 0 6px}
[data-view="juridisch"] .jr-sub a{gap:4px;font-size:14px;padding-block:3px}
[data-view="juridisch"] .jr-index a[aria-current]{color:var(--houtskool);background:var(--papier);box-shadow:inset 0 0 0 1px var(--kalk)}
[data-view="juridisch"] .jr-i-pijl{position:absolute;left:3px;top:50%;width:24px;height:16px;margin-top:-8px;pointer-events:none}
[data-view="juridisch"] .jr-i-pijl svg{position:absolute;left:0;top:0}
[data-view="juridisch"] .jr-tekst{min-width:0;max-width:700px}
[data-view="juridisch"] .jr-deel + .jr-deel{margin-top:clamp(56px,7vw,88px);padding-top:clamp(40px,5vw,56px);border-top:1px solid var(--kalk)}
[data-view="juridisch"] .jr-h2{display:flex;align-items:baseline;gap:14px;font-size:clamp(1.9rem,3.2vw,2.7rem);letter-spacing:-.03em;line-height:1.02}
[data-view="juridisch"] .jr-h2-num{flex:none;font:600 13px/1 var(--f-mono);letter-spacing:.08em;color:var(--grafiet);transform:translateY(-4px)}
[data-view="juridisch"] .jr-kort{margin-top:22px;padding:16px 18px 17px;border-radius:14px;background:var(--zand);border:1px solid var(--kalk)}
[data-view="juridisch"] .jr-kort-lbl{margin-bottom:6px;font:600 11px/1.2 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--grafiet)}
[data-view="juridisch"] .jr-kort p:last-child{font-weight:600;font-size:16.5px;line-height:1.5}
[data-view="juridisch"] .jr-art{margin-top:30px}
[data-view="juridisch"] .jr-art > * + *{margin-top:12px}
[data-view="juridisch"] .jr-art p,[data-view="juridisch"] .jr-lijst li{font-size:16.5px;line-height:1.65;max-width:65ch}
[data-view="juridisch"] .jr-art a:not(.btn),[data-view="juridisch"] .jr-gegevens dd a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px;font-weight:600}
[data-view="juridisch"] .jr-h3{display:flex;align-items:baseline;gap:10px;font-size:1.22rem;font-weight:700;letter-spacing:-.015em;line-height:1.25}
[data-view="juridisch"] .jr-h3-num{flex:none;min-width:2.2em;font:600 12px/1 var(--f-mono);letter-spacing:.04em;color:var(--grafiet);font-variant-numeric:tabular-nums}
[data-view="juridisch"] .jr-h3[tabindex="-1"]:focus:not(:focus-visible){outline:none}
[data-view="juridisch"] .jr-h3:focus-visible{outline-offset:6px;border-radius:6px}
[data-view="juridisch"] .jr-art[tabindex="-1"]:focus{outline:none}
[data-view="juridisch"] .jr-art[tabindex="-1"]:focus-visible{outline:3px solid var(--houtskool);outline-offset:10px;border-radius:6px}
[data-view="juridisch"] .jr-tabel-wrap{margin-top:16px;border-radius:16px;border:1px solid var(--kalk);background:var(--papier);box-shadow:var(--sh-soft);overflow:hidden}
[data-view="juridisch"] .jr-tabel{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
[data-view="juridisch"] .jr-tabel th,[data-view="juridisch"] .jr-tabel td{padding:12px 16px;text-align:left;font-size:15.5px;line-height:1.35;border-bottom:1px dashed var(--kalk)}
[data-view="juridisch"] .jr-tabel tbody tr:last-child th,[data-view="juridisch"] .jr-tabel tbody tr:last-child td{border-bottom:0}
[data-view="juridisch"] .jr-tabel thead th{background:var(--krijtwit);border-bottom:1px solid var(--kalk);font:600 11px/1.2 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--grafiet)}
[data-view="juridisch"] .jr-tabel tbody th{font-weight:600}
[data-view="juridisch"] .jr-tabel td{font-family:var(--f-mono);font-size:14.5px;white-space:nowrap;text-align:right}
[data-view="juridisch"] .jr-tabel thead th:not(:first-child){text-align:right}
[data-view="juridisch"] .jr-klein{font-size:14.5px!important;color:var(--grafiet)}
[data-view="juridisch"] .jr-lijst{display:grid;gap:4px}
[data-view="juridisch"] .jr-lijst li{position:relative;padding-left:20px}
[data-view="juridisch"] .jr-lijst li::before{content:"";position:absolute;left:2px;top:.72em;width:7px;height:7px;border-radius:50%;background:var(--groen-diep)}
[data-view="juridisch"] .jr-mailrij{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
[data-view="juridisch"] .jr-mailrij code{font:500 14.5px/1 var(--f-mono);padding:12px;border-radius:10px;background:var(--papier);border:1px solid var(--kalk);user-select:all;overflow-wrap:anywhere}
[data-view="juridisch"] .jr-kaart{margin-top:22px;border-radius:var(--r-card);background:var(--papier);border:1px solid var(--kalk);box-shadow:var(--sh-lift);overflow:hidden}
[data-view="juridisch"] .jr-i-sub{flex:none;min-width:3.2em;font:600 10.5px/1 var(--f-mono);letter-spacing:.02em;color:var(--grafiet);font-variant-numeric:tabular-nums}
[data-view="juridisch"] .jr-mail{font-weight:600;white-space:nowrap;user-select:all}
[data-view="juridisch"] .jr-kaart-kop{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;padding:14px 20px;background:var(--krijtwit);border-bottom:1px dashed var(--kalk);font:600 11.5px/1.2 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--grafiet)}
[data-view="juridisch"] .jr-gegevens > div{display:grid;grid-template-columns:200px minmax(0,1fr);gap:4px 18px;padding:12px 20px;align-items:baseline}
[data-view="juridisch"] .jr-gegevens > div + div{border-top:1px dashed var(--kalk)}
[data-view="juridisch"] .jr-gegevens dt{font:600 11px/1.5 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--grafiet)}
[data-view="juridisch"] .jr-gegevens dd{margin:0;font-size:15.5px;line-height:1.5;min-width:0}
[data-view="juridisch"] .jr-gegevens dd a{font-weight:600;text-underline-offset:3px;text-decoration-thickness:1.5px}
[data-view="juridisch"] .jr-gegevens dd small{display:block;margin-top:2px;font-size:14px;color:var(--grafiet)}
[data-view="juridisch"] .jr-num{font-family:var(--f-mono);font-size:15px;letter-spacing:.04em;font-variant-numeric:tabular-nums}
[data-view="juridisch"] .jr-kaart-voet{padding:12px 20px 14px;border-top:1px solid var(--kalk);background:var(--krijtwit);font-size:13.5px;line-height:1.45;color:var(--grafiet)}

/* ---------- breedtes ---------- */
@media (max-width:980px){
  [data-view="juridisch"] .jr-grid{grid-template-columns:minmax(0,1fr);gap:28px}
  [data-view="juridisch"] .jr-index{position:static;max-height:none;overflow:visible;padding:16px;border-radius:var(--r-card);background:var(--papier);border:1px solid var(--kalk)}
  [data-view="juridisch"] .jr-index-kop{margin-left:4px}
  [data-view="juridisch"] .jr-index-lijst{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  [data-view="juridisch"] .jr-index-lijst > li + li{margin-top:0}
  [data-view="juridisch"] .jr-index-lijst > li > a{min-height:44px;align-items:center;padding:8px 10px;background:var(--krijtwit);box-shadow:inset 0 0 0 1px var(--kalk)}
  [data-view="juridisch"] .jr-sub,[data-view="juridisch"] .jr-i-pijl{display:none}
  [data-view="juridisch"] .jr-index a[aria-current]{background:var(--krijtwit)}
  [data-view="juridisch"] .jr-tekst{max-width:none}
}
@media (max-width:560px){
  [data-view="juridisch"] .jr-index-lijst{grid-template-columns:minmax(0,1fr)}
  [data-view="juridisch"] .jr-tabel th,[data-view="juridisch"] .jr-tabel td{padding:11px 12px}
  [data-view="juridisch"] .jr-tabel thead th{white-space:nowrap;letter-spacing:.08em}
  [data-view="juridisch"] .jr-gegevens > div{grid-template-columns:minmax(0,1fr);padding:12px 16px}
  [data-view="juridisch"] .jr-kaart-kop,[data-view="juridisch"] .jr-kaart-voet{padding-inline:16px}
  [data-view="juridisch"] .jr-art p,[data-view="juridisch"] .jr-lijst li{font-size:16px}
}
@media (pointer:coarse){
  [data-view="juridisch"] .jr-sub a,[data-view="juridisch"] .jr-index a{min-height:44px;align-items:center}
}

/* ===== view: niet-gevonden ===== */
/* niet-gevonden: alle selectors beginnen met [data-view="niet-gevonden"]; keyframes met niet-gevonden- */
[data-view="niet-gevonden"] .nf-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:center}
[data-view="niet-gevonden"] .nf-copy{min-width:0}
[data-view="niet-gevonden"] .nf-copy .h1{max-width:9.5em}

/* proeflogboek: dezelfde regels als in het rapport op home */
[data-view="niet-gevonden"] .nf-log{margin-top:34px;max-width:470px;padding:16px 18px 10px;border-radius:16px;background:var(--papier);border:1px solid var(--kalk);box-shadow:var(--sh-soft)}
[data-view="niet-gevonden"] .nf-log-kop{display:flex;justify-content:space-between;gap:12px;padding-bottom:10px;border-bottom:1px dashed var(--kalk);font:600 11px/1.2 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--grafiet)}
[data-view="niet-gevonden"] .nf-log li{display:grid;grid-template-columns:48px 10px minmax(0,1fr);gap:10px;align-items:baseline;padding-block:8px;border-bottom:1px dashed var(--kalk);font:500 13px/1.45 var(--f-mono)}
[data-view="niet-gevonden"] .nf-log li:last-child{border-bottom:0}
[data-view="niet-gevonden"] .nf-log li[hidden]{display:none}
/* "Bedoelde je …?": een gewone tekstlink in de logregel, met een ruimer tikvlak dan de regel zelf */
[data-view="niet-gevonden"] .nf-tip{padding-block:14px;margin-block:-14px;font-weight:600;color:var(--houtskool);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
[data-view="niet-gevonden"] .nf-tip:hover{text-decoration-color:var(--oranje-diep)}
[data-view="niet-gevonden"] .nf-log time{color:var(--grafiet);font-variant-numeric:tabular-nums}
[data-view="niet-gevonden"] .nf-log .ld{width:9px;height:9px;border-radius:50%;background:var(--kalk);align-self:center}
[data-view="niet-gevonden"] .nf-log .ld-oranje{background:var(--oranje)}
[data-view="niet-gevonden"] .nf-log .ld-groen{background:var(--groen)}
[data-view="niet-gevonden"] .nf-log .ld-geel{background:var(--geel)}
[data-view="niet-gevonden"] .nf-log b{font-weight:600}
[data-view="niet-gevonden"] .nf-hash{display:inline-block;max-width:100%;font:inherit;padding:1px 6px;border-radius:5px;background:var(--zand);overflow-wrap:anywhere;vertical-align:baseline}

/* de plaat: een stuk stoep met de hinkelbaan */
[data-view="niet-gevonden"] .nf-plaat{position:relative;isolation:isolate;min-width:0;width:100%;max-width:500px;justify-self:end;padding:clamp(16px,2.4vw,26px) clamp(14px,2.4vw,28px) clamp(10px,1.6vw,18px);border-radius:28px;background:var(--asfalt);color:var(--krijtwit);box-shadow:var(--sh-screen)}
[data-view="niet-gevonden"] .nf-plaat-kop{display:flex;align-items:center;gap:10px;font:500 12px/1.3 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--wit-74)}
[data-view="niet-gevonden"] .nf-plaat-kop .dot{width:9px;height:9px;flex:none;border-radius:50%;background:var(--geel);box-shadow:0 0 0 3px color-mix(in srgb,var(--geel) 30%,transparent)}
[data-view="niet-gevonden"] .hk{position:relative;width:100%;max-width:420px;margin:8px auto 0;aspect-ratio:340/420;container-type:inline-size}
[data-view="niet-gevonden"] .hk-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:2}
[data-view="niet-gevonden"] .hk-tegels{position:absolute;inset:0;margin:0;padding:0}
[data-view="niet-gevonden"] .hk-tegel,[data-view="niet-gevonden"] .hk-gat{position:absolute;left:calc(var(--x) / 340 * 100%);top:calc(var(--y) / 420 * 100%);width:calc(92 / 340 * 100%);height:calc(80 / 420 * 100%)}
[data-view="niet-gevonden"] .hk-tegel{display:grid;place-items:center;border-radius:5px;color:var(--krijtwit);text-decoration:none;-webkit-tap-highlight-color:transparent;transition:background-color .2s}
[data-view="niet-gevonden"] .hk-tegel:hover,[data-view="niet-gevonden"] .hk-tegel:focus-visible{background:var(--wit-10)}
[data-view="niet-gevonden"] .hk-tegel:active{background:var(--wit-16)}
[data-view="niet-gevonden"] .hk-tegel:focus-visible{outline-offset:2px}
[data-view="niet-gevonden"] .hk-num{position:absolute;left:9%;top:5%;font:700 clamp(17px,6.4cqw,30px)/1 var(--f-hand);color:var(--wit-74)}
[data-view="niet-gevonden"] .hk-lab{font:600 clamp(14px,4.6cqw,19px)/1.1 var(--f-body);letter-spacing:-.01em;text-underline-offset:4px;text-decoration-thickness:1.5px}
[data-view="niet-gevonden"] .hk-tegel:hover .hk-lab{text-decoration-line:underline}
[data-view="niet-gevonden"] .hk-gat{display:block;border-radius:3px;background:color-mix(in srgb,var(--asfalt-diep) 64%,transparent);outline:1.5px dashed var(--wit-40);outline-offset:-2px}
[data-view="niet-gevonden"] .hk-gat span{position:absolute;left:9%;top:5%;font:700 clamp(17px,6.4cqw,30px)/1 var(--f-hand);color:var(--wit-40)}
[data-view="niet-gevonden"] .hk-noot{position:absolute;left:2%;top:25%;font:700 clamp(16px,6.2cqw,26px)/1 var(--f-hand);color:var(--geel);transform:rotate(-6deg);transform-origin:left center;white-space:nowrap;pointer-events:none}
[data-view="niet-gevonden"] .hk-steen{position:absolute;left:65%;top:19%;width:calc(30 / 340 * 100%);aspect-ratio:30/26;transform:translate(-50%,-50%);pointer-events:none;z-index:3}
[data-view="niet-gevonden"] .hk-steen.is-gevallen{transform:translate(-50%,-50%) scale(.7)}
[data-view="niet-gevonden"] .hk-steen svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}

/* slot: zand, met de bestelknop */
[data-view="niet-gevonden"] .nf-slot-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(24px,4vw,64px);align-items:center}
[data-view="niet-gevonden"] .nf-slot-copy{min-width:0}
[data-view="niet-gevonden"] .nf-slot-copy .h2{margin:14px 0 20px;max-width:15em}
[data-view="niet-gevonden"] .nf-slot-acties{display:grid;justify-items:start;gap:12px;min-width:0}
[data-view="niet-gevonden"] .nf-slot-micro{font:500 12px/1.5 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--grafiet)}

@media (max-width:980px){
  [data-view="niet-gevonden"] .nf-grid,[data-view="niet-gevonden"] .nf-slot-grid{grid-template-columns:minmax(0,1fr)}
  [data-view="niet-gevonden"] .nf-plaat{justify-self:start}
}

/* ===== view: prijzen ===== */
/* prijzen: elke selector begint met [data-view="prijzen"]; keyframes met prijzen- */

/* ---------- 1 paginakop ---------- */
[data-view="prijzen"] .pz-intro{padding-bottom:clamp(84px,9.4vw,136px)}
[data-view="prijzen"] .pz-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:28px 56px;margin-bottom:clamp(44px,5.4vw,72px)}
[data-view="prijzen"] .pz-head-copy{min-width:0}
[data-view="prijzen"] .pz-h1{font-size:clamp(3rem,6.6vw,5.6rem);letter-spacing:-.045em;line-height:.92}
[data-view="prijzen"] .pz-claim{margin-top:20px;font:800 clamp(1.42rem,2.55vw,2.25rem)/1.12 var(--f-display);letter-spacing:-.028em}
[data-view="prijzen"] .pz-claim-l{display:block;text-wrap:balance}
[data-view="prijzen"] .pz-fine{position:relative;display:inline-block;white-space:nowrap;font:600 max(.46em,14px)/1.25 var(--f-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--grafiet);padding-inline:.15em}
[data-view="prijzen"] .pz-head .lead{margin-top:18px}
[data-view="prijzen"] .lead{text-wrap:pretty}
[data-view="prijzen"] .pz-btw{display:grid;justify-items:start;gap:10px;padding-bottom:4px}
[data-view="prijzen"] .pz-btw-note{font:500 12px/1.4 var(--f-mono);letter-spacing:.04em;color:var(--grafiet)}

/* ---------- pakketkaarten (taal van home, eigen klassen) ---------- */
[data-view="prijzen"] .pz-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:stretch}
[data-view="prijzen"] .pz-pc-wrap{position:relative;display:flex;min-width:0}
[data-view="prijzen"] .pz-pc-wrap.is-featured{margin:-16px 0 16px}
[data-view="prijzen"] .pz-smudge{position:absolute;left:-6%;top:-8%;width:112%;height:116%;border-radius:50%;pointer-events:none;z-index:-1;background:radial-gradient(closest-side,var(--geel) 0%,var(--geel) 38%,transparent 100%);opacity:.8;-webkit-mask-image:var(--noise-mask);mask-image:var(--noise-mask);-webkit-mask-size:140px 140px;mask-size:140px 140px}
[data-view="prijzen"] .pz-pcard{position:relative;display:flex;flex-direction:column;width:100%;background:var(--papier);border:1px solid var(--kalk);border-radius:var(--r-card);padding:clamp(22px,3vw,34px);box-shadow:var(--sh-soft);transition:transform .4s var(--ease-out),box-shadow .4s;transform-style:preserve-3d}
[data-view="prijzen"] .pz-pcard:hover{box-shadow:var(--sh-lift)}
[data-view="prijzen"] .pz-pcard:not(.is-tilting):hover{transform:translateY(-4px)}
[data-view="prijzen"] .pz-pcard.is-featured{border:1.5px solid var(--houtskool)}
[data-view="prijzen"] .pz-pc-name{font:800 1.6rem/1.05 var(--f-display);letter-spacing:-.025em}
[data-view="prijzen"] .pz-pc-tag{margin-top:6px;color:var(--grafiet)}
[data-view="prijzen"] .pz-price-row{display:flex;align-items:flex-end;gap:14px;margin:22px 0 6px}
[data-view="prijzen"] .pz-price{position:relative;display:inline-flex;align-items:flex-start;font:800 clamp(3rem,5vw,4rem)/1 var(--f-display);letter-spacing:-.04em;padding:4px 10px 4px 6px;font-variant-numeric:tabular-nums}
[data-view="prijzen"] .pz-price .pz-cur{font-size:.48em;margin:.16em .08em 0 0}
[data-view="prijzen"] .pz-price-note{font:500 12px/1.3 var(--f-mono);letter-spacing:.06em;color:var(--grafiet);text-transform:uppercase;margin-bottom:12px}
[data-view="prijzen"] .pz-feat{display:grid;margin:14px 0 26px}
[data-view="prijzen"] .pz-feat li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;padding-block:8px;border-bottom:1px dashed var(--kalk);font-size:15.5px}
[data-view="prijzen"] .pz-pcard .btn{margin-top:auto}
/* "Aanrader" in krijt: handschrift op een gele krijtveeg */
[data-view="prijzen"] .pz-aanrader{position:absolute;right:22px;top:-24px;z-index:2;isolation:isolate;padding:4px 16px 8px;font:700 1.8rem/1 var(--f-hand);color:var(--houtskool);transform:rotate(4deg)}
[data-view="prijzen"] .pz-aanrader::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:16px 11px 15px 9px;background:var(--geel);box-shadow:0 0 0 1.5px var(--houtskool);-webkit-mask-image:var(--noise-mask),linear-gradient(var(--houtskool),var(--houtskool));mask-image:var(--noise-mask),linear-gradient(var(--houtskool),var(--houtskool));-webkit-mask-size:110px 110px,100% 100%;mask-size:110px 110px,100% 100%}
[data-view="prijzen"] .pz-aanrader::after{content:"";position:absolute;inset:-3px -4px -2px -3px;z-index:-2;border-radius:18px 12px 17px 10px;background:var(--geel);opacity:.55;-webkit-mask-image:var(--noise-mask);mask-image:var(--noise-mask);-webkit-mask-size:70px 70px;mask-size:70px 70px}
[data-view="prijzen"] .pz-under{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 28px;margin-top:30px}
[data-view="prijzen"] .pz-trust{display:flex;flex-wrap:wrap;gap:8px 22px;font:500 12px/1.4 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--grafiet)}
[data-view="prijzen"] .pz-trust li{display:flex;align-items:center;gap:8px}
[data-view="prijzen"] .pz-trust li::before{content:"";width:7px;height:7px;flex:none;border-radius:50%;background:var(--groen-diep)}
[data-view="prijzen"] .pz-jumps{display:flex;flex-wrap:wrap;gap:4px 24px}
[data-view="prijzen"] .pz-be{flex:0 0 100%;font-size:14.5px;line-height:1.5;color:var(--grafiet)}

/* ---------- 2 rekenhulp ---------- */
/* invoer links (papier), uitvoer rechts en onderin (krijtwit): bon, bestelknop, planning */
[data-view="prijzen"] .pz-calc{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);grid-template-rows:auto 1fr auto;grid-template-areas:"in bon" "in order" "plan plan";background:var(--papier);color:var(--houtskool);border-radius:var(--r-card);box-shadow:0 2px 0 rgba(0,0,0,.22),0 50px 90px -40px rgba(0,0,0,.75)}
[data-view="prijzen"] .pz-calc-in{grid-area:in;display:flex;flex-direction:column;min-width:0;padding:clamp(20px,3.2vw,40px)}
[data-view="prijzen"] .pz-calc-in > .pz-fs{margin-top:26px}
[data-view="prijzen"] .pz-calc-bon{grid-area:bon;display:grid;gap:18px;align-content:start;min-width:0;padding:clamp(20px,3.2vw,40px) clamp(20px,3.2vw,40px) 22px;background:var(--krijtwit);border-left:1px dashed var(--kalk);border-top-right-radius:var(--r-card)}
[data-view="prijzen"] .pz-calc-order{grid-area:order;display:grid;gap:12px;align-content:start;min-width:0;padding:4px clamp(20px,3.2vw,40px) clamp(24px,3.2vw,40px);background:var(--krijtwit);border-left:1px dashed var(--kalk)}
[data-view="prijzen"] .pz-calc-plan{grid-area:plan;display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.5fr);align-items:center;gap:24px clamp(28px,4vw,56px);min-width:0;padding:clamp(24px,3.2vw,40px);background:var(--krijtwit);border-top:1px dashed var(--kalk);border-radius:0 0 var(--r-card) var(--r-card)}
[data-view="prijzen"] .pz-col-label{margin-bottom:-8px}
[data-view="prijzen"] .pz-fs{display:grid;min-width:0}
[data-view="prijzen"] .pz-legend{display:flex;align-items:center;gap:10px;padding:0;margin-bottom:12px;font:700 1.12rem/1.2 var(--f-display);letter-spacing:-.012em}
[data-view="prijzen"] .pz-num{display:grid;place-items:center;width:30px;height:30px;flex:none;border-radius:9px;background:var(--zand);font:700 1.3rem/1 var(--f-hand)}
[data-view="prijzen"] .pz-fs .opt:last-of-type{margin-bottom:0}
[data-view="prijzen"] .pz-opt small{text-wrap:pretty}
[data-view="prijzen"] .pz-stepper{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px 14px;padding:12px 12px 12px 16px;border-radius:14px;border:1.5px solid var(--kalk);background:var(--papier);transition:border-color .2s,box-shadow .2s,background-color .2s}
[data-view="prijzen"] .pz-stepper.is-on{border-color:var(--houtskool);box-shadow:0 3px 0 var(--houtskool)}
[data-view="prijzen"] .pz-stepper.is-locked{background:var(--krijtwit);border-style:dashed}
[data-view="prijzen"] .pz-step-txt{min-width:0}
[data-view="prijzen"] .pz-step-txt b{display:block;font-weight:700}
[data-view="prijzen"] .pz-step-txt small{display:block;margin-top:2px;color:var(--grafiet);font-size:13.5px;line-height:1.35}
[data-view="prijzen"] .pz-step-ctl{display:flex;align-items:center;gap:6px}
[data-view="prijzen"] .pz-sbtn{display:grid;place-items:center;width:44px;height:44px;padding:0;border-radius:50%;border:1.5px solid var(--houtskool);background:var(--papier);color:var(--houtskool);cursor:pointer;transition:background-color .15s,transform .15s,border-color .2s,color .2s}
[data-view="prijzen"] .pz-sbtn:hover{background:var(--zand)}
[data-view="prijzen"] .pz-sbtn:active{transform:scale(.93)}
[data-view="prijzen"] .pz-sbtn svg{width:16px;height:16px}
[data-view="prijzen"] .pz-sbtn path{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
[data-view="prijzen"] .pz-sbtn[aria-disabled="true"]{border-color:var(--kalk);color:var(--grafiet);background:var(--krijtwit);cursor:not-allowed}
[data-view="prijzen"] .pz-sbtn[aria-disabled="true"]:active{transform:none}
[data-view="prijzen"] .pz-step-val{min-width:1.4ch;text-align:center;font:800 1.75rem/1 var(--f-display);font-variant-numeric:tabular-nums}
[data-view="prijzen"] .pz-stepper.is-locked .pz-step-val{color:var(--grafiet)}
[data-view="prijzen"] .pz-hint{margin-top:8px;font-size:13.5px;line-height:1.4;color:var(--grafiet);text-wrap:pretty}
[data-view="prijzen"] .pz-hint.is-nudge{color:var(--oranje-diep);animation:prijzen-nudge .42s var(--ease-out)}
@keyframes prijzen-nudge{20%{transform:translateX(-4px)}45%{transform:translateX(4px)}70%{transform:translateX(-2px)}}

/* de bon: een kassabon met een gekartelde onderrand */
[data-view="prijzen"] .pz-bon-wrap{filter:drop-shadow(0 1px 0 var(--zwart-06)) drop-shadow(0 18px 22px rgba(34,33,31,.13))}
[data-view="prijzen"] .pz-bon{--zz:8px;position:relative;padding:20px clamp(16px,2.2vw,24px) calc(22px + var(--zz));background:var(--papier);border-radius:8px 8px 0 0;-webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - var(--zz)) no-repeat,conic-gradient(from -45deg at 50% 100%,#000 90deg,#0000 0) bottom/calc(var(--zz) * 2) var(--zz) repeat-x;mask:linear-gradient(#000 0 0) top/100% calc(100% - var(--zz)) no-repeat,conic-gradient(from -45deg at 50% 100%,#000 90deg,#0000 0) bottom/calc(var(--zz) * 2) var(--zz) repeat-x}
[data-view="prijzen"] .pz-bon-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 12px;padding-bottom:12px;border-bottom:1.5px dashed var(--kalk)}
[data-view="prijzen"] .pz-bon-title{font:800 1.3rem/1.1 var(--f-display);letter-spacing:-.02em}
[data-view="prijzen"] .pz-bon-today{font:600 11px/1.2 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--grafiet)}
[data-view="prijzen"] .pz-lines{margin:8px 0 0}
[data-view="prijzen"] .pz-line{display:flex;align-items:last baseline;gap:10px;margin-inline:-6px;padding:6px;border-radius:6px;font:500 14px/1.35 var(--f-mono);transition:color .25s}
[data-view="prijzen"] .pz-line dt{flex:1;display:flex;align-items:last baseline;gap:10px;min-width:0}
[data-view="prijzen"] .pz-line dt::after{content:"";flex:1;min-width:14px;border-bottom:1.5px dotted var(--kalk);transform:translateY(-4px)}
[data-view="prijzen"] .pz-line dd{margin:0;font-variant-numeric:tabular-nums;white-space:nowrap}
[data-view="prijzen"] .pz-line.is-off{color:var(--grafiet)}
[data-view="prijzen"] .pz-line.is-flash{animation:prijzen-flash .9s var(--ease-out)}
@keyframes prijzen-flash{from{background-color:color-mix(in srgb,var(--geel) 55%,transparent)}}
[data-view="prijzen"] .pz-sums{display:grid;gap:8px;margin:10px 0 0;padding-top:12px;border-top:1.5px dashed var(--kalk)}
[data-view="prijzen"] .pz-sum{display:flex;justify-content:space-between;align-items:center;gap:12px}
[data-view="prijzen"] .pz-sum dt{font:600 12px/1.2 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--grafiet)}
[data-view="prijzen"] .pz-sum dd{margin:0;font:700 1.2rem/1 var(--f-display);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
[data-view="prijzen"] .pz-total{margin-top:6px;padding-top:12px;border-top:1.5px solid var(--houtskool)}
[data-view="prijzen"] .pz-total dt{color:var(--houtskool)}
[data-view="prijzen"] .pz-total dd{font:800 clamp(2.4rem,4vw,3.3rem)/1 var(--f-display);letter-spacing:-.04em}
[data-view="prijzen"] .pz-odo{align-items:flex-start;font-variant-numeric:proportional-nums}
[data-view="prijzen"] .pz-odo .pz-slot{transition:width .45s var(--ease-out),opacity .3s}
[data-view="prijzen"] .pz-odo .pz-slot .odo-col span{text-align:center}
[data-view="prijzen"] .pz-odo .pz-slot.is-off{opacity:0}
[data-view="prijzen"] .pz-odo .pz-probe{position:absolute;visibility:hidden;white-space:nowrap}
[data-view="prijzen"] .pz-total .pz-cur{font-size:.5em;margin:.14em .06em 0 0}
[data-view="prijzen"] .pz-plan-txt{min-width:0}
[data-view="prijzen"] .pz-when-lab{font:600 12px/1.2 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--grafiet)}
[data-view="prijzen"] .pz-date{margin-top:8px;font:800 clamp(1.45rem,2.15vw,1.85rem)/1.08 var(--f-display);letter-spacing:-.025em;text-wrap:balance}
[data-view="prijzen"] .pz-when-sub{margin-top:12px;max-width:34em;font-size:14px;line-height:1.5;color:var(--grafiet)}
/* werkdagenstrook: vandaag + 7 dagen; krijtturfjes tellen de werkdagen, een cirkel om de leverdag */
[data-view="prijzen"] .pz-days{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:clamp(4px,.7vw,8px);margin-top:18px;min-width:0}
[data-view="prijzen"] .pz-day{position:relative;display:grid;justify-items:center;align-content:start;gap:5px;padding:10px 0 6px;border-radius:10px;border:1px solid var(--kalk);background:var(--papier);min-width:0;transition:background-color .3s,border-color .3s}
[data-view="prijzen"] .pz-day-tag{position:absolute;left:50%;bottom:calc(100% + 6px);transform:translateX(-50%);font:600 10px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;color:var(--grafiet)}
[data-view="prijzen"] .pz-day:first-child .pz-day-tag{left:0;transform:none}
[data-view="prijzen"] .pz-day:last-child .pz-day-tag{left:auto;right:0;transform:none}
[data-view="prijzen"] .pz-day-wk{font:600 10.5px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--grafiet)}
[data-view="prijzen"] .pz-day-n{font:800 clamp(1.05rem,1.8vw,1.45rem)/1 var(--f-display);font-variant-numeric:tabular-nums}
[data-view="prijzen"] .pz-day-mark{position:relative;width:26px;height:24px}
[data-view="prijzen"] .pz-day-mark svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
[data-view="prijzen"] .pz-day.is-weekend{background:repeating-linear-gradient(-45deg,var(--zand) 0 3px,var(--papier) 3px 7px);border-style:dashed}
[data-view="prijzen"] .pz-day.is-today{background:var(--houtskool);border-color:var(--houtskool);color:var(--krijtwit)}
[data-view="prijzen"] .pz-day.is-today .pz-day-wk{color:var(--wit-74)}
[data-view="prijzen"] .pz-day.is-due{border:1.5px solid var(--houtskool)}
[data-view="prijzen"] .pz-day.is-due .pz-day-tag{color:var(--houtskool)}
[data-view="prijzen"] .pz-day.is-after{border-style:dashed;background-color:transparent}
[data-view="prijzen"] .pz-day.is-after .pz-day-n{color:var(--grafiet);font-weight:600}
[data-view="prijzen"] .pz-due-ring{position:absolute;z-index:1;overflow:visible;pointer-events:none}
[data-view="prijzen"] .pz-tally.is-wipe,[data-view="prijzen"] .pz-due-ring.is-wipe{opacity:0;transition:opacity .18s}
[data-view="prijzen"] .pz-calc-order .btn{width:100%}
[data-view="prijzen"] .pz-order-micro{font:500 12px/1.45 var(--f-mono);letter-spacing:.03em;color:var(--grafiet)}
/* mobiel: het totaal rolt mee onderin beeld zolang je bon nog onder de vouw zit */
[data-view="prijzen"] .pz-mini-dock,[data-view="prijzen"] .pz-mini-end{display:none}
[data-view="prijzen"] .pz-mini{position:absolute;left:0;right:0;bottom:0;display:grid;grid-template-columns:auto auto;justify-content:space-between;align-items:baseline;gap:5px 12px;padding:10px 16px 12px;border-radius:14px;background:var(--houtskool);color:var(--krijtwit);box-shadow:0 16px 32px -14px rgba(0,0,0,.6);opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .22s,transform .35s var(--ease-out),visibility 0s .35s}
[data-view="prijzen"] .pz-mini.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .22s,transform .35s var(--ease-out),visibility 0s}
/* twee kolommen, labels op één lijn en bedragen op één lijn */
[data-view="prijzen"] .pz-mini-col{display:contents}
[data-view="prijzen"] .pz-mini-col > *{grid-column:1}
[data-view="prijzen"] .pz-mini-r > *{grid-column:2;text-align:right}
[data-view="prijzen"] .pz-mini-lab{grid-row:1}
[data-view="prijzen"] .pz-mini-col > b{grid-row:2}
[data-view="prijzen"] .pz-mini-lab{font:600 10.5px/1.2 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--wit-74);white-space:nowrap}
[data-view="prijzen"] .pz-mini-tot{font:800 1.3rem/1 var(--f-display);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
[data-view="prijzen"] .pz-mini-tot.is-flash{animation:prijzen-tik .6s var(--ease-out)}
@keyframes prijzen-tik{from{color:var(--geel)}}
[data-view="prijzen"] .pz-mini-date{font:700 1.02rem/1 var(--f-display);letter-spacing:-.01em;white-space:nowrap}

/* ---------- 3 vergelijkingstabel (rollen table/row/cell, kop blijft staan bij scrollen) ---------- */
[data-view="prijzen"] .pz-tablecard{position:relative;background:var(--papier);border:1px solid var(--kalk);border-radius:var(--r-card);box-shadow:var(--sh-lift);overflow:clip}
[data-view="prijzen"] .pz-tablecard::before{content:"";position:absolute;top:0;bottom:0;right:0;width:calc(100% / 3.7);border-radius:0 var(--r-card) var(--r-card) 0;background:color-mix(in srgb,var(--geel) 11%,var(--papier));pointer-events:none}
[data-view="prijzen"] .pz-tr{position:relative;display:grid;grid-template-columns:minmax(0,1.7fr) repeat(2,minmax(0,1fr));align-items:center;border-bottom:1px dashed var(--kalk)}
[data-view="prijzen"] .pz-tr > *{min-width:0;padding:12px clamp(14px,2.2vw,28px)}
/* de kop plakt net onder de siteheader (die bij omhoog scrollen terugkomt); --pz-stick zet het script */
[data-view="prijzen"] .pz-thead{position:sticky;top:var(--pz-stick,0px);z-index:2;align-items:end;border-bottom:1.5px solid var(--houtskool);background:var(--papier)}
[data-view="prijzen"] .pz-th{padding-block:20px 16px;font:800 clamp(1.02rem,1.5vw,1.22rem)/1.15 var(--f-display);letter-spacing:-.015em}
[data-view="prijzen"] .pz-th-f{font:600 11px/1.2 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--grafiet)}
[data-view="prijzen"] .pz-th-p,[data-view="prijzen"] .pz-td{text-align:center}
[data-view="prijzen"] .pz-th.is-featured{background:color-mix(in srgb,var(--geel) 11%,var(--papier))}
[data-view="prijzen"] .pz-th-tag{display:block;width:max-content;margin:0 auto 6px;padding:3px 8px 4px;border-radius:7px;background:var(--geel);font:700 1.05rem/1 var(--f-hand);letter-spacing:0;transform:rotate(-3deg)}
[data-view="prijzen"] .pz-rh{font-size:15.5px;line-height:1.4}
[data-view="prijzen"] .pz-grp{border-bottom:0}
[data-view="prijzen"] .pz-grp .pz-grp-l{grid-column:1/-1;padding-top:24px;padding-bottom:4px;font:600 11px/1.2 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--grafiet)}
[data-view="prijzen"] .pz-tgroup .pz-tr:last-child{border-bottom-style:solid}
[data-view="prijzen"] .pz-tk{position:relative;display:inline-block;width:28px;height:28px;border-radius:50%;background:var(--tint-groen);vertical-align:middle}
[data-view="prijzen"] .pz-tk svg{position:absolute;left:3px;top:2px;overflow:visible}
[data-view="prijzen"] .pz-no{display:inline-grid;place-items:center;width:28px;height:28px;font:600 17px/1 var(--f-mono);color:var(--grafiet)}
[data-view="prijzen"] .pz-val{display:inline-block;font:600 13px/1.35 var(--f-mono);letter-spacing:.02em}
[data-view="prijzen"] .pz-val small{font:500 12px/1.35 var(--f-mono);color:var(--grafiet)}
[data-view="prijzen"] .pz-tfoot{border-bottom:0}
[data-view="prijzen"] .pz-tfoot > *{padding-block:20px 22px}
[data-view="prijzen"] .pz-tfoot .pz-rh{font:600 11px/1.2 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--grafiet)}
[data-view="prijzen"] .pz-tf-price{display:block;font:800 clamp(1.5rem,2.2vw,1.85rem)/1 var(--f-display);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
[data-view="prijzen"] .pz-tf-btw{display:block;margin:5px 0 12px;font:500 11px/1.2 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--grafiet)}
[data-view="prijzen"] .pz-tnote{margin-top:16px;max-width:62em;font-size:12.5px;line-height:1.5;color:var(--grafiet)}

/* ---------- 4 extra's ---------- */
[data-view="prijzen"] .pz-extras{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
[data-view="prijzen"] .pz-extra{position:relative;display:flex;flex-direction:column;gap:10px;grid-column:span 2;min-width:0;padding:22px 22px 24px;border-radius:var(--r-card);background:var(--krijtwit);border:1px dashed color-mix(in srgb,var(--grafiet) 55%,var(--zand))}
[data-view="prijzen"] .pz-extra.is-nu{grid-column:span 3;background:var(--papier);border:1px solid var(--kalk);box-shadow:var(--sh-soft)}
[data-view="prijzen"] .pz-x-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;margin-bottom:4px}
[data-view="prijzen"] .pz-x-price{font:800 1.4rem/1 var(--f-display);letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
[data-view="prijzen"] .pz-x-price small{font:500 12px/1 var(--f-mono);letter-spacing:.04em;color:var(--grafiet)}
[data-view="prijzen"] .pz-extra p{color:var(--grafiet);font-size:15.5px;line-height:1.5}
[data-view="prijzen"] .pz-extra .link-chalk{margin-top:auto;align-self:flex-start}
[data-view="prijzen"] .pz-extra.is-later .chip{background:var(--zand)}
[data-view="prijzen"] .pz-x-vb{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:auto;padding-top:6px}
[data-view="prijzen"] .pz-vb{font:600 10.5px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;padding:5px 7px;border-radius:5px;background:var(--zand);color:var(--grafiet)}
[data-view="prijzen"] .pz-jump{display:inline-flex;align-items:center;gap:10px;padding:7px 13px;border-radius:var(--r-pill);background:var(--papier);border:1px solid var(--kalk)}
[data-view="prijzen"] .pz-jump b{font:800 1.2rem/1 var(--f-display);letter-spacing:-.02em;color:var(--houtskool)}
[data-view="prijzen"] .pz-jump b:last-child{color:var(--groen-diep)}
[data-view="prijzen"] .pz-jump-arrow{position:relative;width:38px;height:18px}
[data-view="prijzen"] .pz-jump-arrow svg{position:absolute;inset:0;overflow:visible}

/* ---------- 5 vaste prijs: de krijtstempel ---------- */
[data-view="prijzen"] .pz-vast{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(36px,6vw,96px);align-items:center}
[data-view="prijzen"] .pz-stamp{position:relative;display:grid;place-items:center;width:min(100%,400px);aspect-ratio:1;margin-inline:auto;text-align:center;transform:rotate(-7deg)}
[data-view="prijzen"] .pz-stamp-ink,[data-view="prijzen"] .pz-stamp-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
[data-view="prijzen"] .pz-stamp-ink svg{display:block;width:100%;height:100%;overflow:visible}
[data-view="prijzen"] .pz-stamp-ring text{font:600 15.5px var(--f-mono);fill:var(--groen-diep)}
[data-view="prijzen"] .pz-stamp-h{position:relative;display:grid;gap:6px;max-width:68%;font:800 clamp(1.8rem,3.3vw,2.75rem)/.95 var(--f-display);letter-spacing:-.04em;color:var(--groen-diep)}
[data-view="prijzen"] .pz-vast-copy{min-width:0}
[data-view="prijzen"] .pz-vast-lead{margin-top:18px;max-width:24em;font:700 clamp(1.25rem,2vw,1.6rem)/1.25 var(--f-display);letter-spacing:-.02em}
[data-view="prijzen"] .pz-vast-list{display:grid;gap:12px;margin-top:26px}
[data-view="prijzen"] .pz-vast-list li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:center;padding:14px 18px 14px 14px;border-radius:16px;background:var(--papier);border:1px solid var(--kalk)}
[data-view="prijzen"] .pz-vast-list p{font-size:16px;font-weight:600;line-height:1.45;color:var(--houtskool)}
[data-view="prijzen"] .pz-vast-n{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--tint-groen)}
[data-view="prijzen"] .pz-vast-n .ci{margin-top:0}

/* ---------- 6 laat het fixen ---------- */
[data-view="prijzen"] .pz-fix{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(32px,6vw,88px);align-items:center}
[data-view="prijzen"] .pz-fix-copy{min-width:0}
[data-view="prijzen"] .pz-fix-copy .h2{margin:18px 0 22px}
[data-view="prijzen"] .pz-fix-copy .body-l + .body-l{margin-top:12px}
[data-view="prijzen"] .pz-fix-copy .punch{margin-top:22px;font-size:1.2rem}
[data-view="prijzen"] .pz-routes{display:grid;gap:12px;min-width:0}
[data-view="prijzen"] .pz-route{display:grid;grid-template-columns:48px minmax(0,1fr);gap:16px;align-items:start;padding:18px 20px;border-radius:18px;background:var(--krijtwit);border:1px solid var(--kalk)}
[data-view="prijzen"] .pz-route h3{margin:3px 0 6px}
[data-view="prijzen"] .pz-route p{color:var(--grafiet);font-size:15.5px;line-height:1.5}
[data-view="prijzen"] .pz-route-n{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:var(--zand);font:700 2rem/1 var(--f-hand)}
[data-view="prijzen"] .pz-route.is-wervora{border:1.5px solid var(--houtskool);box-shadow:var(--sh-soft)}
[data-view="prijzen"] .pz-route.is-wervora .pz-route-n{background:var(--geel)}
[data-view="prijzen"] .pz-ext{gap:8px;margin-top:4px}
[data-view="prijzen"] .pz-ext svg{width:14px;height:14px;flex:none}
[data-view="prijzen"] .pz-ext path{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------- 7 ankerzin ---------- */
[data-view="prijzen"] .pz-anker{padding-bottom:calc(clamp(48px,6vw,80px) + 40px)}
[data-view="prijzen"] .pz-anker-line{max-width:17em;margin-inline:auto;text-align:center;font:800 clamp(1.9rem,4.4vw,3.7rem)/1.06 var(--f-display);letter-spacing:-.035em;text-wrap:balance}
[data-view="prijzen"] .pz-anker-mark{margin-inline:.16em}
[data-view="prijzen"] .pz-anker-sub{max-width:52em;margin:22px auto 0;text-align:center;font:500 12.5px/1.6 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--wit-74)}

/* ---------- 8 betaalvragen ---------- */
[data-view="prijzen"] .pz-faq-grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.4fr);gap:clamp(24px,5vw,72px);align-items:start}
[data-view="prijzen"] .pz-faq-side .h2{margin-top:18px}
[data-view="prijzen"] .pz-faq-side p{margin-top:16px;color:var(--grafiet)}
[data-view="prijzen"] .pz-faq-side .pz-more{margin-top:10px}
[data-view="prijzen"] .pz-faq-toggle{margin:0 6px 24px}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  [data-view="prijzen"] .pz-extras{grid-template-columns:repeat(2,minmax(0,1fr))}
  [data-view="prijzen"] .pz-extra,[data-view="prijzen"] .pz-extra.is-nu{grid-column:auto}
  [data-view="prijzen"] .pz-extra:last-child{grid-column:1/-1}
}
@media (max-width:980px){
  [data-view="prijzen"] .pz-head{grid-template-columns:minmax(0,1fr);align-items:start}
  [data-view="prijzen"] .pz-vast,[data-view="prijzen"] .pz-fix,[data-view="prijzen"] .pz-faq-grid{grid-template-columns:minmax(0,1fr)}
  [data-view="prijzen"] .pz-stamp{width:min(100%,360px)}
}
@media (max-width:860px){
  /* één kolom: kiezen, bon, planning, dan pas de knop */
  [data-view="prijzen"] .pz-calc{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-template-areas:"in" "bon" "plan" "order"}
  [data-view="prijzen"] .pz-calc-bon{border-left:0;border-top:1px dashed var(--kalk);border-top-right-radius:0}
  [data-view="prijzen"] .pz-calc-plan{grid-template-columns:minmax(0,1fr);gap:4px;padding-top:18px;padding-bottom:26px;border-top:0;border-radius:0}
  [data-view="prijzen"] .pz-calc-order{border-left:0;border-radius:0 0 var(--r-card) var(--r-card)}
  [data-view="prijzen"] .pz-days{margin-top:30px}
  /* het dok landt 56px onder de laatste keuze: zo is er een stand waarin de stepper vrij staat én het totaal nog meeloopt */
  [data-view="prijzen"] .pz-calc-in{padding-bottom:8px}
  [data-view="prijzen"] .pz-mini-dock{display:block;position:sticky;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:3;height:0;margin-top:56px;pointer-events:none}
  [data-view="prijzen"] .pz-mini-end{display:block;height:0}
}
@media (max-width:700px){
  [data-view="prijzen"] .pz-cards{grid-template-columns:minmax(0,1fr);gap:40px}
  [data-view="prijzen"] .pz-pc-wrap.is-featured{margin:0}
  [data-view="prijzen"] .pz-aanrader{right:16px;top:-22px;font-size:1.65rem}
  [data-view="prijzen"] .pz-under{display:grid;justify-content:start}
  [data-view="prijzen"] .pz-extras{grid-template-columns:minmax(0,1fr)}
  [data-view="prijzen"] .pz-extra:last-child{grid-column:auto}
  /* tabel: kenmerk over de hele breedte, de twee proeven eronder; de kop blijft staan */
  [data-view="prijzen"] .pz-tablecard::before{display:none}
  [data-view="prijzen"] .pz-tr{grid-template-columns:repeat(2,minmax(0,1fr))}
  [data-view="prijzen"] .pz-tr > *{padding:10px 14px}
  [data-view="prijzen"] .pz-th-f{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0!important;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  [data-view="prijzen"] .pz-th{padding-block:14px 12px}
  [data-view="prijzen"] .pz-th-pre{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  [data-view="prijzen"] .pz-rh{grid-column:1/-1;padding-bottom:0!important;font-size:15px}
  [data-view="prijzen"] .pz-td{padding-block:6px 12px!important}
  [data-view="prijzen"] .pz-val small{display:block}
  [data-view="prijzen"] .pz-td.is-featured{background:color-mix(in srgb,var(--geel) 11%,var(--papier));border-radius:10px}
  [data-view="prijzen"] .pz-tr:not(.pz-thead):not(.pz-grp) .pz-td{margin-bottom:10px}
  [data-view="prijzen"] .pz-tr:not(.pz-thead):not(.pz-grp) .pz-td:not(.is-featured){margin-right:5px}
  [data-view="prijzen"] .pz-tr:not(.pz-thead):not(.pz-grp) .pz-td.is-featured{margin-left:5px;margin-right:10px}
  [data-view="prijzen"] .pz-grp .pz-grp-l{padding-top:20px}
  [data-view="prijzen"] .pz-vast-list li{padding:12px 14px 12px 12px}
  /* kleinere stempel: hij vulde een heel scherm, en schuin gezet raakte de ring de schermrand */
  [data-view="prijzen"] .pz-stamp{width:min(84%,320px)}
}
@media (max-width:560px){
  [data-view="prijzen"] .pz-jumps{display:grid;gap:0}
  [data-view="prijzen"] .pz-sum dt{letter-spacing:.05em}
  /* totaal: label boven, bedrag eronder; zo springt de regel niet als er een cijfer bij komt */
  [data-view="prijzen"] .pz-total{display:grid;grid-template-columns:minmax(0,1fr);justify-content:normal;gap:8px}
  [data-view="prijzen"] .pz-total dd{justify-self:end}
  [data-view="prijzen"] .pz-line{font-size:13px;gap:8px}
  [data-view="prijzen"] .pz-line dt{gap:8px}
  [data-view="prijzen"] .pz-days{gap:3px}
  [data-view="prijzen"] .pz-day-n{font-size:.98rem}
  [data-view="prijzen"] .pz-day-tag{font-size:9.5px;letter-spacing:.04em}
  [data-view="prijzen"] .pz-stepper{grid-template-columns:minmax(0,1fr)}
  [data-view="prijzen"] .pz-step-ctl{justify-self:start}
}
@media (prefers-reduced-motion:reduce){
  [data-view="prijzen"] .pz-hint.is-nudge,[data-view="prijzen"] .pz-mini-tot.is-flash{animation:none}
}

/* ===== view: voor-wie ===== */
/* voor-wie: elke selector begint met [data-view="voor-wie"]; keyframes met voor-wie- */
[data-view="voor-wie"] .vw-kop{display:grid;grid-template-columns:auto minmax(0,1fr);gap:24px clamp(40px,7vw,120px);align-items:end}
[data-view="voor-wie"] .vw-kicker{margin-bottom:12px}
[data-view="voor-wie"] .vw-kop .h1 .ck-host{margin-left:.26em}
[data-view="voor-wie"] .vw-kop-tekst{max-width:34em;padding-bottom:6px}
[data-view="voor-wie"] .vw-kop-tekst .lead{margin-top:0;text-wrap:balance}
[data-view="voor-wie"] .vw-trust{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:20px}
[data-view="voor-wie"] .vw-trust li{display:flex;align-items:center;gap:8px;font:500 12.5px/1.3 var(--f-mono);letter-spacing:.06em;text-transform:uppercase}
[data-view="voor-wie"] .vw-trust .ci{margin-top:0}
[data-view="voor-wie"] .vw-stoep-sec{margin-top:clamp(40px,5vw,60px)}
[data-view="voor-wie"] .vw-stoep-title{margin-bottom:18px}

/* ---------- de stoep: acht tegels ---------- */
[data-view="voor-wie"] .vw-stoep{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
[data-view="voor-wie"] .vw-tegel{position:relative;display:flex;flex-direction:column;min-width:0;min-height:248px;padding:22px 20px 18px;border-radius:var(--r-card);background:var(--krijtwit);border:1px solid var(--kalk);box-shadow:var(--sh-soft);transition:transform .35s var(--ease-out),box-shadow .35s}
[data-view="voor-wie"] .vw-naam{font:700 1.2rem/1.15 var(--f-display);letter-spacing:-.015em;margin:16px 0 12px}
[data-view="voor-wie"] .vw-link{color:inherit;text-decoration:none;border-radius:4px}
[data-view="voor-wie"] .vw-link::after{content:"";position:absolute;inset:0;border-radius:var(--r-card);z-index:1}
[data-view="voor-wie"] .vw-link:focus-visible{outline:none}
[data-view="voor-wie"] .vw-link:focus-visible::after{outline:3px solid var(--houtskool);outline-offset:3px}
[data-view="voor-wie"] .vw-seen{font:600 10.5px/1.2 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--grafiet)}
[data-view="voor-wie"] .vw-q{font:700 1.42rem/1.1 var(--f-hand);margin-top:8px;color:var(--houtskool)}
[data-view="voor-wie"] .vw-go{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:18px;font:600 11.5px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--houtskool)}
[data-view="voor-wie"] .vw-go svg{width:16px;height:16px;flex:none;transition:transform .22s var(--ease-out)}
[data-view="voor-wie"] .vw-go path{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
[data-view="voor-wie"] .vw-jij{background:var(--houtskool);border-color:var(--houtskool);color:var(--krijtwit)}
[data-view="voor-wie"] .vw-jij-txt{color:var(--wit-74);font-size:15.5px;line-height:1.5}
[data-view="voor-wie"] .vw-jij .vw-jij-btn{align-self:flex-start;justify-self:start;margin-top:auto;color:var(--geel);text-align:left}
[data-view="voor-wie"] .vw-jij-btn span{margin-left:.32em}
@media (hover:hover) and (pointer:fine){
  [data-view="voor-wie"] .vw-tegel:hover{transform:translateY(-4px);box-shadow:var(--sh-lift)}
  [data-view="voor-wie"] .vw-tegel:hover .vw-go svg{transform:translateX(4px)}
}

/* ---------- de zes vragen (signatuur) ---------- */
[data-view="voor-wie"] .vw-kies{margin-bottom:26px}
[data-view="voor-wie"] .vw-kies-label{margin-bottom:12px;font:600 11.5px/1.2 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--grafiet)}
[data-view="voor-wie"] .vw-kies-rij{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
[data-view="voor-wie"] .vw-hint{display:flex;align-items:flex-start;gap:4px;font:700 1.45rem/1 var(--f-hand);color:var(--geel-diep);transform:rotate(-3deg);transform-origin:left center;padding-top:14px}
[data-view="voor-wie"] .vw-hint-pijl{position:relative;width:44px;height:30px;flex:none;margin-top:-14px}
[data-view="voor-wie"] .vw-hint-pijl svg{position:absolute;inset:0;overflow:visible}
[data-view="voor-wie"] .vw-tabs{display:flex;flex-wrap:wrap;gap:8px}
[data-view="voor-wie"] .vw-tab{min-height:44px;padding:0 18px;border-radius:var(--r-pill);border:1.5px solid var(--kalk);background:var(--papier);font:600 15px/1.2 var(--f-body);color:var(--houtskool);cursor:pointer;transition:background-color .2s,border-color .2s,box-shadow .2s,transform .15s var(--ease-out);-webkit-tap-highlight-color:transparent}
[data-view="voor-wie"] .vw-tab:hover{border-color:var(--houtskool)}
[data-view="voor-wie"] .vw-tab:active{transform:translateY(1px)}
[data-view="voor-wie"] .vw-tab[aria-selected="true"]{background:var(--geel);border-color:var(--houtskool);box-shadow:0 2px 0 var(--houtskool)}
[data-view="voor-wie"] .vw-strip{position:relative;border-radius:var(--r-card)}
[data-view="voor-wie"] .vw-strip:focus-visible{outline-offset:10px}
[data-view="voor-wie"] .vw-vragen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
[data-view="voor-wie"] .vw-vraag{position:relative;display:flex;flex-direction:column;gap:12px;min-width:0;padding:20px 20px 18px;border-radius:var(--r-card);background:var(--papier);border:1px solid var(--kalk);box-shadow:var(--sh-soft);transition:background-color .35s}
[data-view="voor-wie"] .vw-vraag.is-afhaak{background:color-mix(in srgb,var(--tint-oranje) 42%,var(--papier))}
[data-view="voor-wie"] .vw-top{display:flex;align-items:center;gap:12px}
[data-view="voor-wie"] .vw-num{display:grid;place-items:center;width:36px;height:36px;flex:none;border-radius:9px;background:var(--krijtwit);box-shadow:inset 0 0 0 1.5px var(--kalk);font:700 1.45rem/1 var(--f-hand)}
[data-view="voor-wie"] .vw-tnaam{font:600 11.5px/1.25 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--grafiet)}
[data-view="voor-wie"] .vw-vq{font:800 clamp(1.2rem,1.6vw,1.38rem)/1.12 var(--f-display);letter-spacing:-.02em}
[data-view="voor-wie"] .vw-stem{font:700 1.55rem/1.06 var(--f-hand);color:var(--houtskool);min-height:2.12em}
[data-view="voor-wie"] .vw-test{margin-top:auto;padding-top:12px;border-top:1px dashed var(--kalk);font-size:14.5px;line-height:1.45;color:var(--grafiet)}
[data-view="voor-wie"] .vw-test-lab{display:block;margin-bottom:5px;font:600 10.5px/1.2 var(--f-mono);letter-spacing:.1em;text-transform:uppercase}
[data-view="voor-wie"] .vw-flag{position:absolute;right:14px;top:-13px;z-index:3;box-shadow:0 0 0 1.5px var(--houtskool)}
[data-view="voor-wie"] .vw-ink{position:absolute;left:0;top:0;overflow:visible;pointer-events:none;z-index:2}
[data-view="voor-wie"] .vw-uitkomst{display:flex;flex-wrap:wrap;align-items:center;gap:0 18px;margin:0 0 24px;font-size:16.5px;line-height:1.5}
[data-view="voor-wie"] .vw-uitkomst-txt{min-width:0}
[data-view="voor-wie"] .vw-uitkomst b{font-weight:600}
[data-view="voor-wie"] .vw-voet{margin-top:24px;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--grafiet)}

@media (max-width:980px){
  [data-view="voor-wie"] .vw-kop{grid-template-columns:minmax(0,1fr);align-items:start}
  [data-view="voor-wie"] .vw-stoep{grid-template-columns:repeat(2,minmax(0,1fr))}
  [data-view="voor-wie"] .vw-tegel{min-height:0}
  [data-view="voor-wie"] .vw-vragen{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:620px){
  [data-view="voor-wie"] .vw-stoep{grid-template-columns:minmax(0,1fr);gap:10px}
  [data-view="voor-wie"] .vw-tegel{display:grid;grid-template-columns:46px minmax(0,1fr);column-gap:14px;align-items:start;padding:16px 16px 14px}
  [data-view="voor-wie"] .vw-tegel > *{grid-column:2}
  [data-view="voor-wie"] .vw-tegel > .ico{grid-column:1;grid-row:1 / span 4}
  [data-view="voor-wie"] .vw-naam{margin:3px 0 8px}
  [data-view="voor-wie"] .vw-q{font-size:1.38rem}
  [data-view="voor-wie"] .vw-go{padding-top:10px}
  [data-view="voor-wie"] .vw-vragen{grid-template-columns:minmax(0,1fr);gap:20px}
  [data-view="voor-wie"] .vw-stem{min-height:0}
  [data-view="voor-wie"] .vw-tab{padding:0 15px;font-size:14.5px}
}

/* ===== view: voorbeeldrapport ===== */
/* voorbeeldrapport: elke selector begint met [data-view="voorbeeldrapport"]; keyframes met voorbeeldrapport- */

/* ---------- paginakop + leeswijzer ---------- */
[data-view="voorbeeldrapport"] .rp-intro{padding-bottom:clamp(56px,7vw,96px)}
[data-view="voorbeeldrapport"] .rp-intro-grid{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);gap:clamp(28px,5vw,72px);align-items:end}
[data-view="voorbeeldrapport"] .rp-intro-copy{min-width:0}
[data-view="voorbeeldrapport"] .rp-pdf-ico{width:18px;height:18px;flex:none}
[data-view="voorbeeldrapport"] .rp-pdf-ico path{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
[data-view="voorbeeldrapport"] .rp-intro-note{margin-top:24px;font:500 12px/1.9 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--grafiet)}
[data-view="voorbeeldrapport"] .rp-stamp-mini{display:inline-block;margin-right:4px;padding:2px 7px;border-radius:5px;background:var(--zand);color:var(--houtskool);font-weight:600;letter-spacing:.12em;line-height:1.5}
[data-view="voorbeeldrapport"] .rp-wijzer{padding:clamp(18px,2.2vw,26px);min-width:0}
[data-view="voorbeeldrapport"] .rp-wijzer-h{font:800 clamp(1.3rem,1.9vw,1.6rem)/1.1 var(--f-display);letter-spacing:-.025em;margin:8px 0 12px}
[data-view="voorbeeldrapport"] .rp-wijzer-list{display:grid;margin:0}
[data-view="voorbeeldrapport"] .rp-wijzer-row{display:grid;grid-template-columns:92px minmax(0,1fr);gap:14px;align-items:center;padding-block:11px;border-top:1px dashed var(--kalk)}
[data-view="voorbeeldrapport"] .rp-wijzer-list dd{margin:0;font-size:14.5px;line-height:1.45;color:var(--grafiet)}
[data-view="voorbeeldrapport"] .rp-wijzer-list dd b{color:var(--houtskool);font-weight:600}
[data-view="voorbeeldrapport"] .rp-wijzer-key{display:flex;align-items:center;gap:4px;min-width:0}
[data-view="voorbeeldrapport"] .rp-wijzer-score{font:800 2.1rem/1 var(--f-display);letter-spacing:-.045em}
[data-view="voorbeeldrapport"] .rp-wijzer .chip-munt{background:var(--munt)}
[data-view="voorbeeldrapport"] .rp-sign{display:grid;place-items:center;width:25px;height:25px;flex:none;border-radius:50%;font:700 12.5px/1 var(--f-mono);color:var(--houtskool)}
[data-view="voorbeeldrapport"] .rp-sign-groen{background:var(--tint-groen)}
[data-view="voorbeeldrapport"] .rp-sign-geel{background:var(--tint-geel)}
[data-view="voorbeeldrapport"] .rp-sign-oranje{background:var(--tint-oranje)}

/* impactlabel: drie balkjes + woord (kleur draagt nooit alleen de betekenis) */
[data-view="voorbeeldrapport"] .rp-imp{display:inline-flex;align-items:center;gap:7px;font:600 11.5px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--houtskool);white-space:nowrap}
[data-view="voorbeeldrapport"] .rp-imp-bars{display:inline-flex;align-items:flex-end;gap:2px;height:13px}
[data-view="voorbeeldrapport"] .rp-imp-bars i{display:block;width:4px;border-radius:1px;background:var(--kalk)}
[data-view="voorbeeldrapport"] .rp-imp-bars i:nth-child(1){height:5px}
[data-view="voorbeeldrapport"] .rp-imp-bars i:nth-child(2){height:9px}
[data-view="voorbeeldrapport"] .rp-imp-bars i:nth-child(3){height:13px}
[data-view="voorbeeldrapport"] .rp-imp[data-imp="1"] .rp-imp-bars i:nth-child(1),
[data-view="voorbeeldrapport"] .rp-imp[data-imp="2"] .rp-imp-bars i:nth-child(-n+2),
[data-view="voorbeeldrapport"] .rp-imp[data-imp="3"] .rp-imp-bars i{background:var(--houtskool)}

/* ---------- de band: inhoudsopgave + document ---------- */
[data-view="voorbeeldrapport"] .rp-band{padding-block:clamp(36px,5vw,72px) clamp(100px,11vw,150px)}
[data-view="voorbeeldrapport"] .rp-layout{display:grid;grid-template-columns:244px minmax(0,1fr);gap:clamp(28px,3.4vw,52px);align-items:start}

/* inhoudsopgave, desktop: sticky lijst met een schuivende duim langs de lijn */
[data-view="voorbeeldrapport"] .rp-toc{position:sticky;top:96px;display:grid;gap:14px;align-self:start;z-index:4}
[data-view="voorbeeldrapport"] .rp-toc-label{padding-left:2px}
[data-view="voorbeeldrapport"] .rp-toc-list{display:grid;gap:2px;padding-left:14px;border-left:1.5px solid var(--kalk)}
[data-view="voorbeeldrapport"] .rp-toc-link{display:flex;align-items:center;gap:12px;min-height:44px;padding:5px 8px 5px 0;border-radius:12px;text-decoration:none;color:var(--grafiet);font-weight:500;font-size:15px;line-height:1.25;transition:color .2s}
[data-view="voorbeeldrapport"] .rp-toc-link:hover{color:var(--houtskool)}
[data-view="voorbeeldrapport"] .rp-toc-link[aria-current]{color:var(--houtskool);font-weight:600}
[data-view="voorbeeldrapport"] .rp-toc-num{display:grid;place-items:center;width:30px;height:30px;flex:none;border-radius:8px;background:var(--krijtwit);box-shadow:inset 0 0 0 1.5px var(--kalk);font:700 1.15rem/1 var(--f-hand);color:var(--houtskool);transition:background-color .25s,box-shadow .25s,transform .3s var(--ease-out)}
[data-view="voorbeeldrapport"] .rp-toc-link:hover .rp-toc-num{box-shadow:inset 0 0 0 1.5px var(--houtskool)}
[data-view="voorbeeldrapport"] .rp-toc-link[aria-current] .rp-toc-num{background:var(--geel);box-shadow:inset 0 0 0 1.5px var(--houtskool);transform:rotate(-3deg)}
[data-view="voorbeeldrapport"] .rp-toc-thumb{position:absolute;left:-.75px;top:0;width:3px;height:44px;border-radius:2px;background:var(--houtskool);transform:translateY(-200px);opacity:0;transition:transform .4s var(--ease-out),height .4s var(--ease-out),opacity .3s;pointer-events:none}
[data-view="voorbeeldrapport"] .rp-toc.has-cur .rp-toc-thumb{opacity:1}
[data-view="voorbeeldrapport"] .rp-short{display:none}
[data-view="voorbeeldrapport"] .rp-toc-acts{display:grid;justify-items:start;gap:6px;margin-top:4px;padding-top:16px;border-top:1px dashed var(--kalk)}
[data-view="voorbeeldrapport"] .rp-toc-acts .link-chalk{font-size:15px}

/* ---------- het papier ---------- */
[data-view="voorbeeldrapport"] .rp-doc{position:relative;min-width:0;background:var(--papier);border:1px solid var(--kalk);border-radius:var(--r-card);box-shadow:var(--sh-lift);padding:clamp(18px,4.2vw,56px) clamp(16px,4.2vw,56px) clamp(26px,4.2vw,56px)}
[data-view="voorbeeldrapport"] .rp-doc::before{content:"";position:absolute;inset:14px -10px -12px 10px;z-index:-1;border-radius:inherit;background:var(--krijtwit);border:1px solid var(--kalk);box-shadow:var(--sh-soft)}
[data-view="voorbeeldrapport"] .rp-dochead{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding-bottom:16px;border-bottom:1px dashed var(--kalk)}
[data-view="voorbeeldrapport"] .rp-stempel{position:relative;width:38px;height:38px;flex:none}
[data-view="voorbeeldrapport"] .rp-stempel svg{position:absolute;inset:0;overflow:visible}
[data-view="voorbeeldrapport"] .rp-docid{flex:1 1 260px;min-width:0;font:600 11.5px/1.45 var(--f-mono);letter-spacing:.1em;color:var(--grafiet)}
[data-view="voorbeeldrapport"] .rp-docmeta{display:flex;align-items:center;gap:10px;font:500 12px/1 var(--f-mono);letter-spacing:.06em;color:var(--grafiet)}
[data-view="voorbeeldrapport"] .rp-doctag{padding:5px 7px;border-radius:5px;background:var(--zand);color:var(--houtskool);font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase}

/* onderdelen in het document */
[data-view="voorbeeldrapport"] .rp-sec{padding-top:clamp(40px,5vw,64px)}
[data-view="voorbeeldrapport"] .rp-sec + .rp-sec{margin-top:clamp(40px,5vw,64px);border-top:1.5px solid var(--houtskool)}
[data-view="voorbeeldrapport"] .rp-cover{padding-top:clamp(24px,3vw,36px)}
[data-view="voorbeeldrapport"] .rp-sec-head{margin-bottom:clamp(22px,3vw,34px)}
[data-view="voorbeeldrapport"] .rp-kop{display:flex;align-items:center;gap:10px;font:600 11.5px/1.2 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--grafiet)}
[data-view="voorbeeldrapport"] .rp-num{display:grid;place-items:center;width:30px;height:30px;flex:none;border-radius:8px;background:var(--krijtwit);box-shadow:inset 0 0 0 1.5px var(--houtskool);font:700 1.2rem/1 var(--f-hand);letter-spacing:0;color:var(--houtskool)}
[data-view="voorbeeldrapport"] .rp-h2{margin-top:14px;font:800 clamp(1.75rem,3vw,2.5rem)/1.04 var(--f-display);letter-spacing:-.032em}
[data-view="voorbeeldrapport"] .rp-lead{margin-top:12px;max-width:36em;color:var(--grafiet);font-size:1.03rem;line-height:1.55}
[data-view="voorbeeldrapport"] .rp-mini-lbl{font:600 11px/1.3 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--grafiet)}

/* ---------- 1 samenvatting ---------- */
[data-view="voorbeeldrapport"] .rp-cover-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(20px,4vw,52px);align-items:center}
[data-view="voorbeeldrapport"] .rp-cover-copy{min-width:0}
[data-view="voorbeeldrapport"] .rp-cover .rp-h2{margin-top:0;font-size:clamp(1.9rem,3.4vw,2.85rem)}
[data-view="voorbeeldrapport"] .rp-cover-grid{margin-top:14px}
[data-view="voorbeeldrapport"] .rp-rol{display:grid;gap:6px;justify-items:start;margin-top:22px;padding:14px 16px 15px;border-radius:14px;background:var(--zand);font-size:15.5px;line-height:1.5}
[data-view="voorbeeldrapport"] .rp-rol-tag{font:600 10.5px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;background:var(--houtskool);color:var(--krijtwit);border-radius:5px;padding:4px 6px}
[data-view="voorbeeldrapport"] .rp-rol-geduld{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font-size:14.5px}
[data-view="voorbeeldrapport"] .rp-rol-bar{display:block;width:118px;height:8px;border-radius:99px;background:var(--papier);overflow:hidden}
[data-view="voorbeeldrapport"] .rp-rol-bar i{display:block;width:100%;height:100%;border-radius:inherit;background:var(--groen)}
[data-view="voorbeeldrapport"] .rp-score{display:grid;justify-items:center;text-align:center;padding:12px 30px 0}
[data-view="voorbeeldrapport"] .rp-score-wrap{position:relative;display:inline-block}
[data-view="voorbeeldrapport"] .rp-score-num{display:block;font:800 clamp(5.4rem,10.5vw,8.6rem)/.86 var(--f-display);letter-spacing:-.055em;font-variant-numeric:tabular-nums;padding:8px 10px}
[data-view="voorbeeldrapport"] .rp-score-lbl{margin-top:18px;font:600 11.5px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase}
[data-view="voorbeeldrapport"] .rp-score-sub{margin-top:6px;font-size:13px;color:var(--grafiet)}
[data-view="voorbeeldrapport"] .rp-summary{display:grid;margin-top:clamp(24px,3vw,32px)}
[data-view="voorbeeldrapport"] .rp-summary li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;align-items:start;padding-block:11px;border-top:1px dashed var(--kalk);font-size:1.04rem;line-height:1.5}
[data-view="voorbeeldrapport"] .rp-summary li::before{display:grid;place-items:center;width:26px;height:26px;margin-top:-1px;border-radius:50%;font:700 12.5px/1 var(--f-mono)}
[data-view="voorbeeldrapport"] .rp-summary li.is-groen::before{content:"✓";background:var(--tint-groen)}
[data-view="voorbeeldrapport"] .rp-summary li.is-oranje::before{content:"!";background:var(--tint-oranje)}
[data-view="voorbeeldrapport"] .rp-summary li.is-geel::before{content:"~";background:var(--tint-geel)}
[data-view="voorbeeldrapport"] .rp-cover .rp-mini-lbl{margin-top:26px}
[data-view="voorbeeldrapport"] .rp-chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px}
[data-view="voorbeeldrapport"] .rp-chips li{display:flex;min-width:0}
[data-view="voorbeeldrapport"] .rp-chip{display:flex;align-items:center;gap:9px;width:100%;min-height:50px;padding:6px 14px 6px 8px;border-radius:14px;text-decoration:none;color:var(--houtskool);border:1.5px solid transparent;transition:transform .2s var(--ease-out),border-color .2s,box-shadow .2s}
[data-view="voorbeeldrapport"] .rp-chip b{display:grid;place-items:center;width:26px;height:26px;flex:none;border-radius:50%;background:var(--papier);font:700 13px/1 var(--f-mono)}
[data-view="voorbeeldrapport"] .rp-chip-name{flex:1;min-width:0;font-weight:600;font-size:14.5px;line-height:1.2}
[data-view="voorbeeldrapport"] .rp-chip-score{font:600 13px/1 var(--f-mono);font-variant-numeric:tabular-nums}
[data-view="voorbeeldrapport"] .rp-chip:hover{transform:translateY(-2px);border-color:var(--houtskool);box-shadow:0 3px 0 var(--houtskool)}

/* ---------- 2 tegels: blok per tegel ---------- */
[data-view="voorbeeldrapport"] .rp-tegel{padding-block:clamp(26px,3.4vw,42px);border-top:1px dashed var(--kalk)}
[data-view="voorbeeldrapport"] .rp-sec-head + .rp-tegel{border-top:0;padding-top:4px}
[data-view="voorbeeldrapport"] .rp-tegel:focus-visible{outline:none}
[data-view="voorbeeldrapport"] .rp-tegel:focus-visible:not([data-quiet]) .rp-tegel-head{outline:3px solid var(--houtskool);outline-offset:8px;border-radius:12px}
[data-view="voorbeeldrapport"] .rp-tegel:last-child{padding-bottom:0}
[data-view="voorbeeldrapport"] .rp-tegel-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;margin-bottom:20px}
[data-view="voorbeeldrapport"] .rp-tnum{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;font:700 1.75rem/1 var(--f-hand);box-shadow:inset 0 0 0 1.5px var(--houtskool);transform:rotate(-2deg)}
[data-view="voorbeeldrapport"] .rp-h3{font:700 clamp(1.22rem,1.7vw,1.45rem)/1.15 var(--f-display);letter-spacing:-.02em}
[data-view="voorbeeldrapport"] .rp-vraag{margin-top:3px;font-size:14.5px;color:var(--grafiet)}
[data-view="voorbeeldrapport"] .rp-verdict{justify-self:end}
[data-view="voorbeeldrapport"] .rp-tegel-body{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(20px,3vw,36px);align-items:start}
[data-view="voorbeeldrapport"] .rp-find{display:grid;gap:16px;min-width:0}
[data-view="voorbeeldrapport"] .rp-find-blk{display:grid;gap:6px;justify-items:start}
[data-view="voorbeeldrapport"] .rp-h4{font:600 11px/1.2 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--grafiet)}
[data-view="voorbeeldrapport"] .rp-find p{font-size:15.5px;line-height:1.5}
[data-view="voorbeeldrapport"] .rp-find .rp-quote{font:700 1.45rem/1.12 var(--f-hand)}
[data-view="voorbeeldrapport"] .rp-fix{padding:14px 16px;border-radius:14px;background:var(--krijtwit);border:1px solid var(--kalk)}
[data-view="voorbeeldrapport"] .rp-doc .chip{background:var(--zand)}
[data-view="voorbeeldrapport"] .rp-doc .chip-munt{background:var(--munt)}
[data-view="voorbeeldrapport"] .rp-doc .on-dark .chip{background:var(--wit-10);color:var(--krijtwit)}
[data-view="voorbeeldrapport"] .rp-find .rp-fix-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:4px}

/* schermuitsnede: een minisite in em, zodat alles met de breedte meeschaalt (1em = 1/44 van de breedte) */
[data-view="voorbeeldrapport"] .rp-shot{margin:0;min-width:0}
[data-view="voorbeeldrapport"] .rp-shot-frame{position:relative;container-type:inline-size;transform:rotate(-.8deg)}
[data-view="voorbeeldrapport"] .rp-tegel:nth-of-type(even) .rp-shot-frame{transform:rotate(.7deg)}
[data-view="voorbeeldrapport"] .rp-mock{position:relative;width:100%;height:auto;aspect-ratio:44/25;--u:calc(100cqw / 44);font-size:var(--u);background:var(--papier);border:1px solid var(--kalk);border-radius:1.2em;box-shadow:var(--sh-screen);overflow:hidden;color:var(--houtskool);font-family:var(--f-body);line-height:1.25}
[data-view="voorbeeldrapport"] .rp-mock :where(p){margin:0}
[data-view="voorbeeldrapport"] .rp-ink{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}
[data-view="voorbeeldrapport"] .rp-shot-cap{margin-top:16px;font:500 11px/1.45 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--grafiet)}
[data-view="voorbeeldrapport"] .ms-bar{position:absolute;left:0;top:0;width:100%;height:2.8em;display:flex;align-items:center;gap:1em;padding:0 1em;background:var(--krijtwit);border-bottom:1px solid var(--kalk)}
[data-view="voorbeeldrapport"] .ms-dots{display:flex;gap:.5em;flex:none}
[data-view="voorbeeldrapport"] .ms-dots i{width:.8em;height:.8em;border-radius:50%;background:var(--kalk)}
[data-view="voorbeeldrapport"] .ms-url{margin-inline:auto;transform:translateX(-1.5em);padding:.3em 1.4em;border-radius:999px;background:var(--papier);border:1px solid var(--kalk);font:500 1em/1.2 var(--f-mono);color:var(--grafiet);white-space:nowrap}
[data-view="voorbeeldrapport"] .ms-nav{position:absolute;left:0;top:2.8em;width:100%;height:3.8em;display:flex;align-items:center;gap:1.6em;padding:0 1.6em 0 1.8em;border-bottom:1px solid var(--kalk)}
[data-view="voorbeeldrapport"] .ms-logo{font:800 1.5em/1 var(--f-display);letter-spacing:-.03em;white-space:nowrap}
[data-view="voorbeeldrapport"] .ms-links{display:flex;gap:1.5em;margin-left:auto;font-size:1.05em;color:var(--grafiet);white-space:nowrap}
[data-view="voorbeeldrapport"] .ms-links .is-cur{color:var(--houtskool);text-decoration:underline;text-underline-offset:.3em}
[data-view="voorbeeldrapport"] .ms-btn{padding:.55em 1em;border-radius:999px;background:var(--houtskool);color:var(--krijtwit);font:600 1em/1 var(--f-body);white-space:nowrap}
[data-view="voorbeeldrapport"] .ms-abs{position:absolute}
[data-view="voorbeeldrapport"] .ms-h{font:800 2.45em/1.02 var(--f-display);letter-spacing:-.035em}
[data-view="voorbeeldrapport"] .ms-h2{font:800 1.9em/1.05 var(--f-display);letter-spacing:-.03em;white-space:nowrap}
[data-view="voorbeeldrapport"] .ms-sub{margin-top:.6em;font-size:1.15em;line-height:1.4;color:var(--grafiet)}
[data-view="voorbeeldrapport"] .ms-cta{display:inline-block;margin-top:1.1em;padding:.5em 1.1em;border-radius:999px;border:1px solid var(--houtskool);font:600 1.05em/1 var(--f-body)}
[data-view="voorbeeldrapport"] .ms-photo{border-radius:1em;overflow:hidden}
[data-view="voorbeeldrapport"] .ms-photo svg{display:block;width:100%;height:100%}
[data-view="voorbeeldrapport"] .ms-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2em}
[data-view="voorbeeldrapport"] .ms-card{display:grid;gap:.3em;justify-items:start;padding:.75em .9em .8em;border:1px solid var(--kalk);border-radius:1em;background:var(--papier)}
[data-view="voorbeeldrapport"] .ms-card i{display:block;width:1.2em;height:1.2em;border-radius:50%}
[data-view="voorbeeldrapport"] .ms-card i.c1{background:var(--munt)}
[data-view="voorbeeldrapport"] .ms-card i.c2{background:var(--perzik)}
[data-view="voorbeeldrapport"] .ms-card i.c3{background:var(--poeder)}
[data-view="voorbeeldrapport"] .ms-card b{font:700 1.2em/1.1 var(--f-body)}
[data-view="voorbeeldrapport"] .ms-card span{font-size:.98em;line-height:1.2;color:var(--grafiet)}
[data-view="voorbeeldrapport"] .ms-card em{margin-top:.2em;font:600 .95em/1 var(--f-body);font-style:normal}
[data-view="voorbeeldrapport"] .ms-pdf{display:flex;align-items:center;gap:.5em;font:600 1.05em/1 var(--f-body);text-decoration:underline;text-underline-offset:.2em;white-space:nowrap}
[data-view="voorbeeldrapport"] .ms-pdf svg{width:1.1em;height:1.3em;flex:none}
[data-view="voorbeeldrapport"] .ms-pdf svg path{fill:none;stroke:var(--houtskool);stroke-width:1.2;stroke-linejoin:round}
[data-view="voorbeeldrapport"] .ms-pdf span{margin-left:.3em;font:500 .9em/1 var(--f-mono);color:var(--grafiet);text-decoration:none}
[data-view="voorbeeldrapport"] .ms-tiny{font-size:.95em;color:var(--grafiet);white-space:nowrap}
[data-view="voorbeeldrapport"] .ms-rev{display:grid;justify-items:center;align-content:center;gap:.35em;border:1px solid var(--kalk);border-radius:1em;background:var(--krijtwit);text-align:center}
[data-view="voorbeeldrapport"] .ms-rev-lbl{font:600 .85em/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--grafiet)}
[data-view="voorbeeldrapport"] .ms-rev b{font:800 2.8em/1 var(--f-display);letter-spacing:-.04em}
[data-view="voorbeeldrapport"] .ms-stars{font-size:1.3em;letter-spacing:.08em;color:var(--geel-diep)}
[data-view="voorbeeldrapport"] .ms-rev-n{font-size:.95em;color:var(--grafiet)}
[data-view="voorbeeldrapport"] .ms-skel{display:grid;gap:.7em}
[data-view="voorbeeldrapport"] .ms-skel i{display:block;height:.8em;border-radius:.4em;background:var(--zand)}
[data-view="voorbeeldrapport"] .ms-skel i:nth-child(2){width:86%}
[data-view="voorbeeldrapport"] .ms-skel i:nth-child(3){width:62%}
[data-view="voorbeeldrapport"] .ms-foot{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4em;padding:1.4em 1.8em;background:var(--krijtwit);border-top:1px solid var(--kalk)}
[data-view="voorbeeldrapport"] .ms-foot div{display:grid;gap:.4em;align-content:start;justify-items:start}
[data-view="voorbeeldrapport"] .ms-foot b{font:700 .95em/1.2 var(--f-body)}
[data-view="voorbeeldrapport"] .ms-foot span{font-size:.9em;color:var(--grafiet);white-space:nowrap}
[data-view="voorbeeldrapport"] .ms-foot .ms-tel{font-size:.74em}
[data-view="voorbeeldrapport"] .ms-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7em 1.4em}
[data-view="voorbeeldrapport"] .ms-field{display:grid;gap:.35em;min-width:0}
[data-view="voorbeeldrapport"] .ms-lbl{font-size:.92em;line-height:1.1;color:var(--grafiet);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
[data-view="voorbeeldrapport"] .ms-inp{display:block;height:2em;border:1px solid var(--kalk);border-radius:.5em;background:var(--krijtwit);transition:border-color .25s,box-shadow .25s}
[data-view="voorbeeldrapport"] .ms-field.is-counted .ms-inp{border-color:var(--oranje);box-shadow:0 0 0 .2em color-mix(in srgb,var(--oranje) 26%,transparent)}
[data-view="voorbeeldrapport"] .ms-send{padding:.65em 1.6em;border-radius:999px;background:var(--houtskool);color:var(--krijtwit);font:600 1.05em/1 var(--f-body)}
[data-view="voorbeeldrapport"] .ms-inbox{padding-top:1.1em;background:var(--krijtwit);border-right:1px solid var(--kalk)}
[data-view="voorbeeldrapport"] .ms-ib-h{padding:0 1.2em .7em;font:800 1.3em/1 var(--f-display);letter-spacing:-.02em}
[data-view="voorbeeldrapport"] .ms-ib-row{display:grid;gap:.25em;padding:.8em 1.2em;border-top:1px solid var(--kalk);font-size:.95em;line-height:1.2}
[data-view="voorbeeldrapport"] .ms-ib-row.is-sel{background:var(--papier);box-shadow:inset .25em 0 0 var(--houtskool)}
[data-view="voorbeeldrapport"] .ms-ib-t{font:500 .85em/1 var(--f-mono);color:var(--grafiet)}
[data-view="voorbeeldrapport"] .ms-ib-skel i{display:block;height:.7em;border-radius:.35em;background:var(--zand)}
[data-view="voorbeeldrapport"] .ms-ib-skel i:last-child{width:64%}
[data-view="voorbeeldrapport"] .ms-mail{display:grid;gap:.5em;justify-items:start}
[data-view="voorbeeldrapport"] .ms-subj{font:800 1.55em/1.1 var(--f-display);letter-spacing:-.02em}
[data-view="voorbeeldrapport"] .ms-from{font-size:.95em;color:var(--grafiet)}
[data-view="voorbeeldrapport"] .ms-body{margin-top:.5em;font-size:1.12em;line-height:1.6}
[data-view="voorbeeldrapport"] .ms-vraag{display:inline-block;margin:.95em 0 .85em;font-weight:600}
[data-view="voorbeeldrapport"] .ms-quote{margin-top:.5em;padding-left:.8em;border-left:2px solid var(--kalk);font-size:.9em;color:var(--grafiet)}
[data-view="voorbeeldrapport"] .ms-note{position:absolute;padding:.12em .35em;border-radius:.3em;background:color-mix(in srgb,var(--papier) 86%,transparent);font:700 1.95em/1 var(--f-hand);white-space:nowrap;transform:rotate(-2deg)}
[data-view="voorbeeldrapport"] .ms-note-groen{color:var(--groen-diep)}
[data-view="voorbeeldrapport"] .ms-note-oranje{color:var(--oranje-diep)}

/* ---------- 3 proeflogboek ---------- */
[data-view="voorbeeldrapport"] .rp-legend{display:flex;flex-wrap:wrap;gap:8px 18px;margin:-10px 0 14px;font:500 12px/1.3 var(--f-mono);color:var(--grafiet)}
[data-view="voorbeeldrapport"] .rp-legend span{display:inline-flex;align-items:center;gap:7px}
[data-view="voorbeeldrapport"] .rp-logbox{padding:clamp(14px,2.4vw,24px);border:1px solid var(--kalk);border-radius:16px;background:var(--krijtwit)}
[data-view="voorbeeldrapport"] .rp-logday{display:flex;flex-wrap:wrap;gap:4px 8px;padding-bottom:10px;font:600 11.5px/1.3 var(--f-mono);letter-spacing:.1em;text-transform:uppercase}
[data-view="voorbeeldrapport"] .rp-logday span{color:var(--grafiet)}
[data-view="voorbeeldrapport"] .rp-logday-x i{font-style:normal}
[data-view="voorbeeldrapport"] .rp-log li{display:grid;grid-template-columns:50px 10px minmax(0,1fr);gap:12px;align-items:baseline;padding-block:8px;border-top:1px dashed var(--kalk);font:500 13px/1.5 var(--f-mono)}
[data-view="voorbeeldrapport"] .rp-log time{color:var(--grafiet);font-variant-numeric:tabular-nums}
[data-view="voorbeeldrapport"] .rp-ld{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--papier);box-shadow:inset 0 0 0 1.5px var(--grafiet)}
[data-view="voorbeeldrapport"] .rp-log li .rp-ld{transform:translateY(1px)}
[data-view="voorbeeldrapport"] .rp-log li.is-groen .rp-ld,[data-view="voorbeeldrapport"] .rp-ld.is-groen{background:var(--groen);box-shadow:none}
[data-view="voorbeeldrapport"] .rp-log li.is-geel .rp-ld,[data-view="voorbeeldrapport"] .rp-ld.is-geel{background:var(--geel);box-shadow:none}
[data-view="voorbeeldrapport"] .rp-log li.is-oranje .rp-ld,[data-view="voorbeeldrapport"] .rp-ld.is-oranje{background:var(--oranje);box-shadow:none}
[data-view="voorbeeldrapport"] .rp-s{font-weight:700}
[data-view="voorbeeldrapport"] .rp-log li.is-groen .rp-s{color:var(--groen-diep)}
[data-view="voorbeeldrapport"] .rp-log li.is-geel .rp-s{color:var(--geel-diep)}
[data-view="voorbeeldrapport"] .rp-log li.is-oranje .rp-s{color:var(--oranje-diep)}
[data-view="voorbeeldrapport"] .rp-log li.is-key{margin-inline:-10px;padding-inline:10px;border-radius:8px;background:var(--tint-geel);border-top-color:transparent}
[data-view="voorbeeldrapport"] .rp-log li.is-key + li{border-top-color:transparent}
[data-view="voorbeeldrapport"] .rp-dev{display:inline-block;margin-right:8px;padding:1px 6px;border-radius:4px;background:var(--houtskool);color:var(--krijtwit);font:600 10.5px/1.5 var(--f-mono);letter-spacing:.08em;text-transform:uppercase}
[data-view="voorbeeldrapport"] .rp-gap{display:flex;align-items:center;gap:10px;margin:14px 0 18px}
[data-view="voorbeeldrapport"] .rp-gap-line{flex:1;min-width:12px;border-top:1.5px dashed var(--grafiet)}
[data-view="voorbeeldrapport"] .rp-gap-pill{flex:none;padding:8px 12px;border-radius:999px;background:var(--houtskool);color:var(--krijtwit);font:600 12px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase}
[data-view="voorbeeldrapport"] .rp-gap-tally{position:relative;width:34px;height:24px;flex:none}
[data-view="voorbeeldrapport"] .rp-gap-tally svg{position:absolute;inset:0;overflow:visible}
[data-view="voorbeeldrapport"] .rp-logsum{display:grid;grid-template-columns:auto auto auto auto;justify-content:start;align-items:baseline;gap:6px 14px;margin-top:16px;padding-top:14px;border-top:1.5px solid var(--houtskool)}
[data-view="voorbeeldrapport"] .rp-logsum-k{font:600 11px/1.2 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--grafiet)}
[data-view="voorbeeldrapport"] .rp-logsum b{font:800 1.6rem/1 var(--f-display);letter-spacing:-.03em;margin-right:18px}
[data-view="voorbeeldrapport"] .rp-logsum b:last-child{color:var(--oranje-diep)}

/* ---------- 4 morgen al te doen: een asfaltkaart op het papier ---------- */
[data-view="voorbeeldrapport"] .rp-top3{position:relative;padding:clamp(16px,3vw,30px);border-radius:var(--r-card);background:var(--asfalt) var(--noise-light);background-size:180px 180px;color:var(--krijtwit)}
[data-view="voorbeeldrapport"] .rp-top3-list{display:grid;gap:10px}
[data-view="voorbeeldrapport"] .rp-top3-list li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:14px;align-items:start;padding:15px 16px;border-radius:16px;background:var(--asfalt-kaart);border:1px solid var(--wit-16)}
[data-view="voorbeeldrapport"] .rp-tk{position:relative;width:32px;height:32px;border-radius:9px;box-shadow:inset 0 0 0 1.5px var(--wit-40)}
[data-view="voorbeeldrapport"] .rp-tk svg{position:absolute;inset:0;overflow:visible}
[data-view="voorbeeldrapport"] .rp-top3-body{display:grid;gap:6px;min-width:0}
[data-view="voorbeeldrapport"] .rp-top3-body b{font:700 1.1rem/1.3 var(--f-display);letter-spacing:-.01em;text-wrap:balance}
[data-view="voorbeeldrapport"] .rp-top3-why{font-size:15px;line-height:1.5;color:var(--wit-74)}
[data-view="voorbeeldrapport"] .rp-top3-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:2px;font:500 11.5px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--wit-74)}
[data-view="voorbeeldrapport"] .rp-top3-sum{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 20px;margin-top:18px;padding-top:16px;border-top:1px dashed var(--wit-16)}
[data-view="voorbeeldrapport"] .rp-top3-tot{font:700 1.55rem/1 var(--f-hand);color:var(--geel)}
[data-view="voorbeeldrapport"] .rp-jump{display:inline-flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:9px 14px;border-radius:999px;background:var(--wit-06);border:1px solid var(--wit-16)}
[data-view="voorbeeldrapport"] .rp-jump-lbl{font:600 10.5px/1.3 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--wit-74)}
[data-view="voorbeeldrapport"] .rp-jump b{font:800 1.3rem/1 var(--f-display);letter-spacing:-.02em}
[data-view="voorbeeldrapport"] .rp-jump .rp-jump-to{color:var(--groen)}
[data-view="voorbeeldrapport"] .rp-jump-arrow{position:relative;width:38px;height:18px}
[data-view="voorbeeldrapport"] .rp-jump-arrow svg{position:absolute;inset:0;overflow:visible}

/* ---------- 5 alle verbeterpunten: grafiet op schaal + lijst die elkaar aanwijzen ---------- */
[data-view="voorbeeldrapport"] .vp{display:grid;gap:clamp(20px,3vw,30px)}
[data-view="voorbeeldrapport"] .vp-chart{margin:0;padding:clamp(14px,2.4vw,24px);border-radius:18px;border:1px solid var(--kalk);background:var(--krijtwit)}
[data-view="voorbeeldrapport"] .vp-cap{margin-bottom:14px;font:600 11px/1.2 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--grafiet)}
[data-view="voorbeeldrapport"] .vp-frame{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px}
[data-view="voorbeeldrapport"] .vp-axis-y{grid-area:1/1;align-self:start;font:600 10.5px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--grafiet)}
[data-view="voorbeeldrapport"] .vp-ylabels{grid-area:1/1;position:relative;width:58px}
[data-view="voorbeeldrapport"] .vp-ylabels span{position:absolute;right:0;top:calc(var(--y) * 1%);transform:translateY(-50%);padding:4px 6px;border-radius:5px;font:600 11px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--houtskool);transition:background-color .2s,color .2s}
[data-view="voorbeeldrapport"] .vp-ylabels span.is-on{background:var(--houtskool);color:var(--krijtwit)}
[data-view="voorbeeldrapport"] .vp-plot{grid-area:1/2;position:relative;height:clamp(360px,30vw,390px);background:var(--papier)}
[data-view="voorbeeldrapport"] .vp-svg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}
[data-view="voorbeeldrapport"] .vp-s-tl{fill:color-mix(in srgb,var(--geel) 16%,var(--papier))}
[data-view="voorbeeldrapport"] .vp-s-band{stroke:var(--kalk);stroke-width:1;stroke-dasharray:1 3}
[data-view="voorbeeldrapport"] .vp-s-div{stroke:var(--grafiet);stroke-width:1;stroke-dasharray:4 4}
[data-view="voorbeeldrapport"] .vp-s-tick,[data-view="voorbeeldrapport"] .vp-s-axis{stroke:var(--houtskool);stroke-width:1.5}
[data-view="voorbeeldrapport"] .vp-q{position:absolute;width:50%;height:50%;display:flex;flex-direction:column;gap:4px;padding:9px 10px}
[data-view="voorbeeldrapport"] .vp-q-tl{left:0;top:0}
[data-view="voorbeeldrapport"] .vp-q-tr{left:50%;top:0;align-items:flex-end;text-align:right}
[data-view="voorbeeldrapport"] .vp-q-bl{left:0;top:50%;align-items:flex-end;text-align:right}
[data-view="voorbeeldrapport"] .vp-q-br{left:50%;top:50%;align-items:flex-end;justify-content:space-between;text-align:right}
[data-view="voorbeeldrapport"] .vp-qn{font:600 10.5px/1.2 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--grafiet);white-space:nowrap}
[data-view="voorbeeldrapport"] .vp-q-tl .vp-qn{color:var(--houtskool)}
[data-view="voorbeeldrapport"] .vp-leeg{font:700 1.3rem/1 var(--f-hand);color:var(--grafiet);white-space:nowrap;transform:rotate(-3deg)}
[data-view="voorbeeldrapport"] .vp-guide{position:absolute;pointer-events:none;opacity:0;transition:opacity .2s;z-index:1}
[data-view="voorbeeldrapport"] .vp-guide-x{left:0;top:0;width:0;border-left:1.5px dashed var(--houtskool)}
[data-view="voorbeeldrapport"] .vp-guide-y{left:0;top:0;height:0;border-top:1.5px dashed var(--houtskool)}
[data-view="voorbeeldrapport"] .vp.has-on .vp-guide{opacity:1}
[data-view="voorbeeldrapport"] .vp-guide-lbl{position:absolute;left:0;bottom:0;transform:translate(-50%,calc(100% + 6px));padding:5px 7px;border-radius:5px;background:var(--houtskool);color:var(--krijtwit);font:600 11px/1 var(--f-mono);letter-spacing:.04em;white-space:nowrap}
[data-view="voorbeeldrapport"] .vp-begin{position:absolute;left:33%;top:calc(25% - 13px);font:700 1.45rem/1 var(--f-hand);color:var(--geel-diep);white-space:nowrap;transform:rotate(-4deg);pointer-events:none}
[data-view="voorbeeldrapport"] .vp-ink{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:3}
[data-view="voorbeeldrapport"] .vp-dot{position:absolute;left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);z-index:2;display:grid;place-items:center;width:44px;height:44px;margin:-22px 0 0 -22px;padding:0;border:0;border-radius:50%;background:none;cursor:pointer;transform:translateY(calc(var(--dy) * 1px));transition:transform .35s var(--ease-out);-webkit-tap-highlight-color:transparent}
[data-view="voorbeeldrapport"] .vp-dot span{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--papier);box-shadow:inset 0 0 0 1.5px var(--houtskool);font:700 11.5px/1 var(--f-mono);color:var(--houtskool);transition:background-color .2s,color .2s,transform .25s var(--ease-out),box-shadow .2s}
[data-view="voorbeeldrapport"] .vp-dot.is-top span{background:var(--geel)}
[data-view="voorbeeldrapport"] .vp-dot:hover span{transform:scale(1.12)}
[data-view="voorbeeldrapport"] .vp-dot.is-on{z-index:4}
[data-view="voorbeeldrapport"] .vp-dot.is-on span{background:var(--houtskool);color:var(--krijtwit);transform:scale(1.18);box-shadow:0 0 0 3px var(--papier)}
[data-view="voorbeeldrapport"] .vp-dot:focus-visible{outline:none}
[data-view="voorbeeldrapport"] .vp-dot:focus-visible span{outline:3px solid var(--houtskool);outline-offset:3px}
[data-view="voorbeeldrapport"] .vp-xlabels{grid-area:2/2;position:relative;height:30px}
[data-view="voorbeeldrapport"] .vp-xlabels > span{position:absolute;top:9px;left:calc(var(--x) * 1%);transform:translateX(-50%);font:500 11px/1 var(--f-mono);color:var(--grafiet);white-space:nowrap;transition:opacity .15s}
[data-view="voorbeeldrapport"] .vp-xlabels > span.is-under{opacity:0}
[data-view="voorbeeldrapport"] .vp-xl-s{display:none}
[data-view="voorbeeldrapport"] .vp-axis-x{grid-area:3/2;justify-self:end;margin-top:2px;font:600 10.5px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--grafiet)}
[data-view="voorbeeldrapport"] .vp-axis-x::after{content:" →"}
[data-view="voorbeeldrapport"] .vp-readout{display:flex;align-items:center;gap:10px;min-height:58px;margin-top:14px;padding:8px 12px;border-radius:12px;background:var(--papier);border:1px solid var(--kalk);font-size:14.5px;line-height:1.35}
[data-view="voorbeeldrapport"] .vp-readout-n{display:grid;place-items:center;width:28px;height:28px;flex:none;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--houtskool);font:700 12px/1 var(--f-mono)}
[data-view="voorbeeldrapport"] .vp.has-on .vp-readout-n{background:var(--houtskool);color:var(--krijtwit)}
[data-view="voorbeeldrapport"] .vp-readout-t b{font-weight:600}
[data-view="voorbeeldrapport"] .vp-list{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
[data-view="voorbeeldrapport"] .vp-list li{display:flex;min-width:0}
[data-view="voorbeeldrapport"] .vp-item{position:relative;display:grid;grid-template-columns:28px minmax(0,1fr) 34px;gap:12px;align-items:start;width:100%;padding:13px 14px;border-radius:14px;border:1.5px solid var(--kalk);background:var(--papier);color:var(--houtskool);font:inherit;text-align:left;cursor:pointer;transition:border-color .2s,box-shadow .2s,transform .2s var(--ease-out),background-color .2s}
[data-view="voorbeeldrapport"] .vp-item:hover,[data-view="voorbeeldrapport"] .vp-item.is-on{border-color:var(--houtskool);box-shadow:0 3px 0 var(--houtskool);transform:translateY(-2px)}
[data-view="voorbeeldrapport"] .vp-item[aria-pressed="true"]{background:color-mix(in srgb,var(--geel) 16%,var(--papier))}
[data-view="voorbeeldrapport"] .vp-n{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--houtskool);font:700 11.5px/1 var(--f-mono);transition:background-color .2s,color .2s}
[data-view="voorbeeldrapport"] .vp-item.is-on .vp-n{background:var(--houtskool);color:var(--krijtwit)}
[data-view="voorbeeldrapport"] .vp-main{display:grid;gap:5px;min-width:0}
[data-view="voorbeeldrapport"] .vp-t{font:700 1.02rem/1.25 var(--f-display);letter-spacing:-.01em;text-wrap:balance}
[data-view="voorbeeldrapport"] .vp-d{font-size:14px;line-height:1.45;color:var(--grafiet)}
[data-view="voorbeeldrapport"] .vp-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:3px}
[data-view="voorbeeldrapport"] .vp-top{padding:5px 7px;border-radius:5px;background:var(--geel);font:600 10.5px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase}
[data-view="voorbeeldrapport"] .vp-mini{position:relative;width:34px;height:34px;border-radius:6px;border:1px solid var(--kalk);background:linear-gradient(var(--kalk),var(--kalk)) 50% 0/1px 100% no-repeat,linear-gradient(var(--kalk),var(--kalk)) 0 50%/100% 1px no-repeat,var(--krijtwit)}
[data-view="voorbeeldrapport"] .vp-item.is-on .vp-mini i{background:var(--geel);box-shadow:0 0 0 1.5px var(--houtskool)}
[data-view="voorbeeldrapport"] .vp-mini i{position:absolute;left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:var(--houtskool)}

/* grafiek naast de lijst: de grafiek blijft staan terwijl je langs de punten loopt */
@media (min-width:821px){
  [data-view="voorbeeldrapport"] .vp{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:start;gap:20px}
  [data-view="voorbeeldrapport"] .vp-chart{padding:16px 16px 14px}
  [data-view="voorbeeldrapport"] .vp-frame{column-gap:8px}
  [data-view="voorbeeldrapport"] .vp-ylabels{width:48px}
  [data-view="voorbeeldrapport"] .vp-ylabels span{padding:3px 5px;font-size:10px;letter-spacing:.04em}
  [data-view="voorbeeldrapport"] .vp-qn{font-size:9.5px;letter-spacing:.06em}
  [data-view="voorbeeldrapport"] .vp-xlabels > span:nth-child(4){display:none}
  [data-view="voorbeeldrapport"] .vp-chart{position:sticky;top:92px}
  /* de plakkende grafiek past ook op lage schermen helemaal in beeld, uitlezing incluis */
  [data-view="voorbeeldrapport"] .vp-plot{height:clamp(300px,min(max(360px,30vw),calc(100vh - 280px)),390px)}
  [data-view="voorbeeldrapport"] .vp-mini{display:none}
  [data-view="voorbeeldrapport"] .vp-item{grid-template-columns:28px minmax(0,1fr)}
}
@media (min-width:821px) and (max-width:1100px){
  [data-view="voorbeeldrapport"] .vp-chart{top:150px}
  [data-view="voorbeeldrapport"] .vp-plot{height:clamp(280px,calc(100vh - 340px),360px)}
  /* schuift de header weg, dan schuift de grafiek mee omhoog, net als de chipbalk */
  [data-view="voorbeeldrapport"] .vp-chart{transition:top .38s var(--ease-out)}
  [data-view="voorbeeldrapport"].rp-kop-weg .vp-chart{top:78px}
}

/* ---------- 6 bij de buren (vergelijkingskaart, overgenomen van home en versmald) ---------- */
[data-view="voorbeeldrapport"] .vs-card{background:var(--papier);border:1px solid var(--kalk);border-radius:18px;overflow:hidden;box-shadow:var(--sh-soft)}
[data-view="voorbeeldrapport"] .vs-row{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1fr);gap:0 58px;align-items:center;padding:14px clamp(14px,2.2vw,22px);border-bottom:1px dashed var(--kalk)}
[data-view="voorbeeldrapport"] .vs-cols{position:relative;align-items:end;padding-block:16px;background:var(--krijtwit);border-bottom:1px solid var(--kalk)}
[data-view="voorbeeldrapport"] .vs-cols span{display:grid;gap:4px}
[data-view="voorbeeldrapport"] .vs-cols small{font:600 11px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--grafiet)}
[data-view="voorbeeldrapport"] .vs-cols strong{font:800 1.08rem/1.15 var(--f-display);letter-spacing:-.02em}
[data-view="voorbeeldrapport"] .vs-badge{position:absolute;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;display:grid;place-items:center;font:700 1.5rem/1 var(--f-hand);color:var(--oranje-diep)}
[data-view="voorbeeldrapport"] .vs-badge svg{position:absolute;inset:0;overflow:visible}
[data-view="voorbeeldrapport"] .vs-metric{font-weight:600;font-size:15px;line-height:1.3}
[data-view="voorbeeldrapport"] .vs-cell{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:6px 10px;min-width:0}
[data-view="voorbeeldrapport"] .vs-val{font:800 1.25rem/1 var(--f-display);letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
[data-view="voorbeeldrapport"] .vs-val.muted{font:500 13px/1.2 var(--f-mono);letter-spacing:0;color:var(--grafiet);white-space:normal}
[data-view="voorbeeldrapport"] .vs-win{position:relative;width:22px;height:20px}
[data-view="voorbeeldrapport"] .vs-win svg{position:absolute;inset:0;overflow:visible}
[data-view="voorbeeldrapport"] .vs-eq{font:600 11px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--grafiet)}
[data-view="voorbeeldrapport"] .vs-card .bar{grid-column:1/-1;display:block;height:7px;border-radius:99px;background:var(--zand);overflow:hidden}
[data-view="voorbeeldrapport"] .vs-card .bar i{display:block;height:100%;border-radius:inherit;background:var(--oranje);transform-origin:0 50%}
[data-view="voorbeeldrapport"] .vs-cell.win .bar i{background:var(--groen)}
[data-view="voorbeeldrapport"] .vs-foot{padding:12px clamp(14px,2.2vw,22px) 16px;background:var(--krijtwit);font:500 12px/1.5 var(--f-mono);color:var(--grafiet)}
[data-view="voorbeeldrapport"] .rp-lessons{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:20px}
[data-view="voorbeeldrapport"] .rp-lessons ul{display:flex;flex-wrap:wrap;gap:8px 10px}
[data-view="voorbeeldrapport"] .rp-lesson{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;background:color-mix(in srgb,var(--groen) 40%,var(--papier));font-weight:500;font-size:15px;line-height:1.25}
[data-view="voorbeeldrapport"] .rp-lesson::before{content:"✓";font:700 13px/1 var(--f-mono);color:var(--groen-diep)}
[data-view="voorbeeldrapport"] .rp-buren-cta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:22px}
[data-view="voorbeeldrapport"] .rp-buren-cta p{font-weight:600}

/* ---------- 7 over deze proef ---------- */
[data-view="voorbeeldrapport"] .rp-method{display:grid;margin:0}
[data-view="voorbeeldrapport"] .rp-method > div{display:grid;grid-template-columns:132px minmax(0,1fr);gap:16px;padding-block:13px;border-top:1px dashed var(--kalk)}
[data-view="voorbeeldrapport"] .rp-method dt{font:600 11.5px/1.7 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--grafiet)}
[data-view="voorbeeldrapport"] .rp-method dd{margin:0;font-size:15.5px;line-height:1.5}
[data-view="voorbeeldrapport"] .rp-psst{display:flex;gap:12px;align-items:flex-start;margin-top:20px;padding:16px 18px;border-radius:16px;background:var(--krijtwit);border:1px dashed var(--grafiet);font-size:15.5px;line-height:1.5}
[data-view="voorbeeldrapport"] .rp-psst-hand{flex:none;font:700 1.6rem/.95 var(--f-hand);color:var(--oranje-diep)}
[data-view="voorbeeldrapport"] .rp-over-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;margin-top:22px}
[data-view="voorbeeldrapport"] .rp-stamp{display:inline-block;padding:9px 14px;border:2px solid var(--oranje-diep);border-radius:8px;color:var(--oranje-diep);font:600 12px/1.25 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;transform:rotate(-3deg)}
[data-view="voorbeeldrapport"] .rp-vragen{margin-top:24px;padding-top:16px;border-top:1px dashed var(--kalk);font-size:14.5px;color:var(--grafiet)}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  [data-view="voorbeeldrapport"] .rp-layout{grid-template-columns:minmax(0,1fr);gap:18px}
  /* de inhoudsopgave wordt een chipbalk die onder de header blijft hangen */
  [data-view="voorbeeldrapport"] .rp-toc{top:calc(72px + env(safe-area-inset-top,0px));display:block;z-index:30;margin-inline:calc(-16px - clamp(0px,2.4vw,28px));padding:9px 0;background:color-mix(in srgb,var(--zand) 93%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--kalk);transition:transform .38s var(--ease-out)}
  [data-view="voorbeeldrapport"] .rp-toc.is-kop-weg{transform:translateY(calc(-72px - env(safe-area-inset-top,0px)))}
  [data-view="voorbeeldrapport"] .rp-toc-label,[data-view="voorbeeldrapport"] .rp-toc-acts,[data-view="voorbeeldrapport"] .rp-toc-thumb{display:none}
  [data-view="voorbeeldrapport"] .rp-toc-list{display:flex;gap:8px;overflow-x:auto;padding:0 calc(16px + clamp(0px,2.4vw,28px));border:0;scrollbar-width:none;overscroll-behavior-x:contain;scroll-padding-inline:calc(16px + clamp(0px,2.4vw,28px))}
  [data-view="voorbeeldrapport"] .rp-toc-list::-webkit-scrollbar{display:none}
  [data-view="voorbeeldrapport"] .rp-toc-list li{flex:none}
  [data-view="voorbeeldrapport"] .rp-toc-link{gap:8px;min-height:44px;padding:0 15px 0 6px;border-radius:999px;background:var(--krijtwit);border:1px solid var(--kalk);font-size:14.5px;white-space:nowrap}
  [data-view="voorbeeldrapport"] .rp-toc-link[aria-current]{background:var(--houtskool);border-color:var(--houtskool);color:var(--krijtwit)}
  [data-view="voorbeeldrapport"] .rp-toc-num{width:30px;height:30px;border-radius:50%}
  [data-view="voorbeeldrapport"] .rp-toc-link[aria-current] .rp-toc-num{box-shadow:none}
  [data-view="voorbeeldrapport"] .rp-long{display:none}
  [data-view="voorbeeldrapport"] .rp-short{display:inline}
  /* de chipbalk is ongeveer 64px hoog: koppen en gefocuste elementen schuiven niet onder de balk */
  [data-view="voorbeeldrapport"] .rp-sec,[data-view="voorbeeldrapport"] .rp-tegel,[data-view="voorbeeldrapport"] .rp-doc a,[data-view="voorbeeldrapport"] .rp-doc button{scroll-margin-top:64px}
}
@media (max-width:980px){
  [data-view="voorbeeldrapport"] .rp-intro-grid{grid-template-columns:minmax(0,1fr);align-items:start}
  [data-view="voorbeeldrapport"] .rp-wijzer{max-width:600px}
}
@media (max-width:820px){
  [data-view="voorbeeldrapport"] .rp-tegel-body{grid-template-columns:minmax(0,1fr)}
  [data-view="voorbeeldrapport"] .rp-shot-frame,[data-view="voorbeeldrapport"] .rp-tegel:nth-of-type(even) .rp-shot-frame{transform:none}
  [data-view="voorbeeldrapport"] .rp-cover-grid{grid-template-columns:minmax(0,1fr)}
  [data-view="voorbeeldrapport"] .rp-score{grid-row:1;justify-items:start;text-align:left;padding:4px 0 0 14px}
  [data-view="voorbeeldrapport"] .rp-chips{grid-template-columns:repeat(2,minmax(0,1fr))}
  [data-view="voorbeeldrapport"] .vs-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px 18px}
  [data-view="voorbeeldrapport"] .vs-metric{grid-column:1/-1}
  [data-view="voorbeeldrapport"] .vs-cols > span:first-child{display:none}
  [data-view="voorbeeldrapport"] .vs-cols .vs-badge{display:none}
}
@media (max-width:560px){
  [data-view="voorbeeldrapport"] .rp-tegel-head{grid-template-columns:auto minmax(0,1fr);row-gap:12px}
  [data-view="voorbeeldrapport"] .rp-verdict{grid-column:1/-1;justify-self:start}
  [data-view="voorbeeldrapport"] .rp-method > div{grid-template-columns:minmax(0,1fr);gap:2px}
  [data-view="voorbeeldrapport"] .rp-log li{grid-template-columns:42px 10px minmax(0,1fr);gap:9px;font-size:12.5px}
  [data-view="voorbeeldrapport"] .rp-logsum{grid-template-columns:auto auto}
  [data-view="voorbeeldrapport"] .rp-wijzer-row{grid-template-columns:78px minmax(0,1fr);gap:12px}
  [data-view="voorbeeldrapport"] .vp-frame{column-gap:6px}
  [data-view="voorbeeldrapport"] .vp-ylabels{width:44px}
  [data-view="voorbeeldrapport"] .vp-ylabels span{padding:3px 4px;font-size:9.5px;letter-spacing:.02em}
  [data-view="voorbeeldrapport"] .vp-axis-y{font-size:9.5px;letter-spacing:.06em}
  [data-view="voorbeeldrapport"] .vp-plot{height:360px}
  [data-view="voorbeeldrapport"] .vp-xl-l{display:none}
  [data-view="voorbeeldrapport"] .vp-xl-s{display:inline}
  [data-view="voorbeeldrapport"] .vp-readout{min-height:78px}
  [data-view="voorbeeldrapport"] .rp-logday-x{flex-basis:100%}
  [data-view="voorbeeldrapport"] .rp-logday-x i{display:none}
  [data-view="voorbeeldrapport"] .vp-xlabels > span:nth-child(4){display:none}
  [data-view="voorbeeldrapport"] .vp-leeg{font-size:1.1rem}
  [data-view="voorbeeldrapport"] .vp-dot span{width:24px;height:24px;font-size:11px}
  [data-view="voorbeeldrapport"] .vp-item{grid-template-columns:28px minmax(0,1fr) 30px;gap:10px;padding:12px}
  [data-view="voorbeeldrapport"] .vp-mini{width:30px;height:30px}
  [data-view="voorbeeldrapport"] .vp-q{padding:7px 6px}
  [data-view="voorbeeldrapport"] .vp-qn{font-size:9px;letter-spacing:.03em}
  [data-view="voorbeeldrapport"] .rp-top3-list li{grid-template-columns:30px minmax(0,1fr);gap:12px;padding:13px 12px}
  [data-view="voorbeeldrapport"] .rp-tk{width:28px;height:28px}
}
@media (max-width:420px){
  /* smalle grafiek: 'Tussendoor' schuift naar het lege midden van zijn kwadrant, 'Morgen al te doen' mag over twee regels */
  [data-view="voorbeeldrapport"] .vp-q-bl{justify-content:center}
  [data-view="voorbeeldrapport"] .vp-q-bl .vp-qn{margin-top:14px}
  [data-view="voorbeeldrapport"] .vp-begin{font-size:1.25rem}
  [data-view="voorbeeldrapport"] .vp-q-tl .vp-qn{white-space:normal;max-width:8.5em}
}
@media (prefers-reduced-motion:reduce){
  [data-view="voorbeeldrapport"] .rp-toc,[data-view="voorbeeldrapport"] .rp-toc-thumb,[data-view="voorbeeldrapport"] .vp-dot,[data-view="voorbeeldrapport"] .vp-chart{transition:none}
}

/* ===== view: vragen ===== */
/* vragen: elke selector begint met [data-view="vragen"] */

/* ---------- intro ---------- */
[data-view="vragen"] .vr-intro{padding-bottom:clamp(14px,2vw,26px)}
[data-view="vragen"] .intro-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:clamp(28px,5vw,80px);align-items:end}
[data-view="vragen"] .intro-copy{min-width:0}
[data-view="vragen"] .vr-intro .h1{font-size:clamp(3.1rem,6.6vw,5.9rem);letter-spacing:-.045em}
[data-view="vragen"] .kort{margin-bottom:6px;padding:15px 18px 4px;background:var(--krijtwit);border:1px solid var(--kalk);border-radius:var(--r-card);box-shadow:var(--sh-soft)}
[data-view="vragen"] .kort-kop{font:600 11px/1.2 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--grafiet)}
[data-view="vragen"] .kort dl{margin:10px 0 0}
[data-view="vragen"] .kort dl > div{display:grid;grid-template-columns:7.4em minmax(0,1fr);align-items:baseline;gap:12px;padding-block:8px;border-top:1px dashed var(--kalk)}
[data-view="vragen"] .kort dt{font:500 11px/1.3 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--grafiet)}
[data-view="vragen"] .kort dd{margin:0;font-size:15.5px;font-weight:600;line-height:1.35}
[data-view="vragen"] .kort dd span{display:block;margin-top:2px;font-size:13.5px;font-weight:400;color:var(--grafiet)}
[data-view="vragen"] .hl{position:relative;z-index:0}
[data-view="vragen"] .hl > svg{position:absolute;z-index:-1;overflow:visible;pointer-events:none}
[data-view="vragen"] .zoek-noot{display:flex;align-items:flex-start;gap:2px;margin-top:22px;font:700 1.5rem/1.05 var(--f-hand);color:var(--grafiet)}
[data-view="vragen"] .noot-t{display:inline-block;margin-top:4px;transform:rotate(-2.5deg);transform-origin:left center}
[data-view="vragen"] .noot-pijl{position:relative;flex:none;width:52px;height:62px;margin:8px 0 -30px 6px}
[data-view="vragen"] .noot-pijl svg{position:absolute;inset:0;overflow:visible}

/* ---------- zoekscherm + vragen: twee kolommen op desktop ---------- */
[data-view="vragen"] .vr-lijst{padding-block:clamp(16px,2vw,24px) clamp(72px,9vw,120px)}
[data-view="vragen"] .lijst-grid{display:grid;grid-template-columns:minmax(272px,340px) minmax(0,1fr);gap:clamp(28px,4.4vw,64px)}
[data-view="vragen"] .zoek-kolom{min-width:0}
[data-view="vragen"] .resultaten{display:flex;flex-direction:column;gap:clamp(52px,6vw,80px);min-width:0}
[data-view="vragen"] .zoek{position:sticky;top:96px;background:var(--papier);border:1px solid var(--kalk);border-radius:var(--r-card);box-shadow:var(--sh-screen);padding:22px 20px 18px}
[data-view="vragen"] .zoek-label,[data-view="vragen"] .cats-label{display:block;font:600 11px/1.2 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--grafiet)}
[data-view="vragen"] .zoek-veld{position:relative;margin-top:12px}
[data-view="vragen"] .zoek-veld .input{-webkit-appearance:none;appearance:none;min-height:58px;padding:13px 54px 13px 48px;border-radius:var(--r-ui);font-size:18px}
[data-view="vragen"] .zoek-veld .input::placeholder{color:var(--grafiet);opacity:1}
[data-view="vragen"] .zoek-veld .input::-webkit-search-cancel-button,[data-view="vragen"] .zoek-veld .input::-webkit-search-decoration{-webkit-appearance:none;appearance:none;display:none}
[data-view="vragen"] .loep{position:absolute;left:16px;top:50%;width:21px;height:21px;transform:translateY(-50%);fill:none;stroke:var(--houtskool);stroke-width:2.1;stroke-linecap:round;pointer-events:none}
[data-view="vragen"] .zoek-wis{position:absolute;right:7px;top:50%;width:44px;height:44px;transform:translateY(-50%);display:grid;place-items:center;border:0;border-radius:50%;background:var(--zand);cursor:pointer;transition:background-color .2s}
[data-view="vragen"] .zoek-wis:hover{background:var(--kalk)}
[data-view="vragen"] .zoek-wis svg{width:14px;height:14px;fill:none;stroke:var(--houtskool);stroke-width:2.2;stroke-linecap:round}
[data-view="vragen"] .cats{margin-top:22px}
[data-view="vragen"] .cats-label{float:none;padding:0;margin-bottom:8px}
/* desktop: een rustige lijst met tellers; mobiel: één rij chips (zie onder) */
[data-view="vragen"] .cats .chips{flex-direction:column;flex-wrap:nowrap;gap:3px}
[data-view="vragen"] .cat{display:block}
[data-view="vragen"] .cat > span{display:flex;justify-content:space-between;gap:10px;width:100%;min-height:44px;padding:0 8px 0 14px;border-color:transparent;background:transparent;transition:background-color .2s,border-color .2s}
[data-view="vragen"] .cat:hover input:not(:checked) + span{background:var(--zand)}
[data-view="vragen"] .cat .n{display:inline-grid;place-items:center;min-width:26px;height:24px;padding:0 7px;border-radius:var(--r-pill);background:var(--zand);font:600 12px/1 var(--f-mono);font-variant-numeric:tabular-nums;color:var(--houtskool)}
[data-view="vragen"] .cat input:checked + span .n{background:var(--papier)}
[data-view="vragen"] .cat.is-leeg input:not(:checked) + span{color:var(--grafiet)}
[data-view="vragen"] .cat.is-leeg .n{background:transparent;box-shadow:inset 0 0 0 1px var(--kalk);color:var(--grafiet)}
[data-view="vragen"] .telling{margin-top:16px;padding-top:14px;border-top:1px dashed var(--kalk);font:500 11.5px/1.4 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--grafiet);font-variant-numeric:tabular-nums}
[data-view="vragen"] .telling b{font-weight:600;color:var(--houtskool)}

/* ---------- groepen en vragen ---------- */
[data-view="vragen"] .groep-kop{padding-bottom:20px;border-bottom:1px solid var(--kalk)}
[data-view="vragen"] .groep-meta{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font:500 11.5px/1.2 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--grafiet);font-variant-numeric:tabular-nums}
[data-view="vragen"] .groep-h{font-size:clamp(1.85rem,2.7vw,2.45rem);margin-top:12px}
[data-view="vragen"] .groep-intro{margin-top:10px;color:var(--grafiet);font-size:15.5px;line-height:1.5;max-width:34em}
[data-view="vragen"] .vr-lijst.is-zoeken .groep-intro{display:none}
[data-view="vragen"] .faq{min-width:0}
[data-view="vragen"] .faq .faq-item:first-child{border-top:0}
[data-view="vragen"] .faq-q .q-t{min-width:0}
[data-view="vragen"] .faq-a p + p{margin-top:-8px}
[data-view="vragen"] .faq-a a{color:var(--houtskool);font-weight:600;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;text-decoration-color:var(--geel-diep)}
[data-view="vragen"] .faq-a a:hover{text-decoration-color:var(--houtskool)}

/* zoekfragment: waarom een vraag past als het woord alleen in het antwoord staat */
[data-view="vragen"] .snip{margin:-10px 50px 18px 4px;font-size:15px;line-height:1.55;color:var(--grafiet);cursor:pointer}
[data-view="vragen"] .snip-l{display:inline-block;margin-right:8px;padding:4px 6px;border-radius:5px;background:var(--zand);font:600 10.5px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;vertical-align:2px}
[data-view="vragen"] .faq-item.is-open .snip{display:none}

/* gevonden woorden: een krijtstreep achter het woord */
[data-view="vragen"] mark.hit{position:relative;z-index:0;background:none;color:inherit;white-space:nowrap}
[data-view="vragen"] mark.hit > svg{position:absolute;z-index:-1;overflow:visible;pointer-events:none}

/* extra's in antwoorden: tijdlijn, prijstabel, vergelijking */
[data-view="vragen"] .faq-a .tl{margin:0 50px 22px 4px}
[data-view="vragen"] .prijs-tabel{width:calc(100% - 54px);margin:0 50px 22px 4px;border-collapse:collapse;font-size:15px;font-variant-numeric:tabular-nums}
[data-view="vragen"] .prijs-tabel th,[data-view="vragen"] .prijs-tabel td{padding:9px 0 9px 12px;border-bottom:1px dashed var(--kalk);text-align:right;vertical-align:baseline}
[data-view="vragen"] .prijs-tabel thead th{padding-top:0;font:600 10.5px/1.2 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--grafiet);border-bottom:1px solid var(--kalk)}
[data-view="vragen"] .prijs-tabel th:first-child{padding-left:0;text-align:left}
[data-view="vragen"] .prijs-tabel tbody th{font-weight:600;color:var(--houtskool)}
[data-view="vragen"] .prijs-tabel td{white-space:nowrap;color:var(--grafiet)}
[data-view="vragen"] .prijs-tabel td:nth-child(2){font-weight:600;color:var(--houtskool)}
[data-view="vragen"] .tag{flex:none;padding:4px 6px;border-radius:5px;background:var(--zand);font:600 10.5px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--grafiet)}
[data-view="vragen"] .vs-mini{margin:0 50px 22px 4px;padding:14px 16px 16px;border:1px solid var(--kalk);border-radius:var(--r-ui);background:var(--papier)}
[data-view="vragen"] .vs-kop{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;font:600 10.5px/1.4 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--grafiet)}
[data-view="vragen"] .faq-a .vs-kop{padding:0}
[data-view="vragen"] .vs-mini dl{display:grid;gap:10px;margin:12px 0 0}
[data-view="vragen"] .vs-mini dl > div{display:grid;grid-template-columns:minmax(0,11.5em) minmax(0,1fr);align-items:center;gap:6px 14px}
[data-view="vragen"] .vs-mini dt{font-size:14.5px;font-weight:600;color:var(--houtskool)}
[data-view="vragen"] .vs-mini dd{display:flex;align-items:center;gap:12px;margin:0}
[data-view="vragen"] .vs-bar{flex:1;height:8px;border-radius:99px;background:var(--zand);overflow:hidden}
[data-view="vragen"] .vs-bar i{display:block;height:100%;border-radius:inherit;background:var(--houtskool)}
[data-view="vragen"] .vs-mini dd b{min-width:2.2em;font:800 1.15rem/1 var(--f-display);letter-spacing:-.02em;color:var(--houtskool);text-align:right}

/* ---------- lege staat ---------- */
[data-view="vragen"] .leeg{padding:clamp(22px,3vw,34px);background:var(--papier);border:1px solid var(--kalk);border-radius:var(--r-card);box-shadow:var(--sh-soft)}
[data-view="vragen"] .leeg-label{font:500 11.5px/1.4 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--grafiet);overflow-wrap:anywhere}
[data-view="vragen"] .leeg-h{margin-top:12px;font:800 clamp(1.6rem,2.6vw,2.2rem)/1.08 var(--f-display);letter-spacing:-.03em;text-wrap:balance;max-width:16em}
[data-view="vragen"] .leeg-sub{margin-top:10px;color:var(--grafiet)}
[data-view="vragen"] .leeg-acties{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:24px}
[data-view="vragen"] .leeg-noot{order:3;flex-basis:100%;display:flex;align-items:flex-start;gap:2px;margin:-10px 0 0 26px;font:700 1.35rem/1.05 var(--f-hand);color:var(--grafiet)}
[data-view="vragen"] .leeg-noot > span:last-child{display:inline-block;margin-top:18px;transform:rotate(-3deg);transform-origin:left top}
[data-view="vragen"] .leeg-pijl{position:relative;flex:none;width:46px;height:40px}
[data-view="vragen"] .leeg-pijl svg{position:absolute;inset:0;overflow:visible}
[data-view="vragen"] .leeg-mail{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:22px;padding-top:16px;border-top:1px dashed var(--kalk);color:var(--grafiet)}
[data-view="vragen"] .leeg-mailrij{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-width:0}
[data-view="vragen"] .leeg-mailrij code{padding:12px 13px;border-radius:12px;background:var(--krijtwit);border:1px solid var(--kalk);font:500 14.5px/1 var(--f-mono);color:var(--houtskool);user-select:all;overflow-wrap:anywhere}

/* ---------- staat je vraag er niet bij? ---------- */
[data-view="vragen"] .vr-nog{padding-bottom:calc(var(--section-y) + 40px)}
[data-view="vragen"] .nog-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(28px,5vw,80px);align-items:center}
[data-view="vragen"] .nog-copy .h2{margin-top:14px}
[data-view="vragen"] .nog-copy .lead{margin-top:20px}
[data-view="vragen"] .nog-acties{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:30px}
[data-view="vragen"] .nog-mail{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-width:0}
[data-view="vragen"] .nog-mail code{padding:13px 14px;border-radius:12px;background:var(--krijtwit);border:1px solid var(--kalk);font:500 15px/1 var(--f-mono);user-select:all;overflow-wrap:anywhere}
[data-view="vragen"] .reactie{background:var(--papier);border:1px solid var(--kalk);border-radius:var(--r-ui);box-shadow:var(--sh-screen);padding:18px 20px 20px;min-width:0}
[data-view="vragen"] .reactie-kop{display:flex;align-items:center;justify-content:space-between;gap:12px}
[data-view="vragen"] .reactie-kop p{display:flex;align-items:center;gap:8px;font:600 11px/1.2 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--houtskool)}
[data-view="vragen"] .sw{width:18px;height:18px;flex:none;fill:none;stroke:var(--houtskool);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
[data-view="vragen"] .reactie-log{display:grid;margin-top:16px;border-top:1px solid var(--kalk)}
[data-view="vragen"] .reactie-log li{display:grid;grid-template-columns:3.4em 10px minmax(0,1fr);align-items:center;gap:12px;padding-block:12px;border-bottom:1px dashed var(--kalk);font-size:15px}
[data-view="vragen"] .reactie-log time{font:500 13px/1 var(--f-mono);font-variant-numeric:tabular-nums;color:var(--grafiet)}
[data-view="vragen"] .ld{width:9px;height:9px;border-radius:50%;background:var(--kalk);box-shadow:inset 0 0 0 1.5px var(--grafiet)}
[data-view="vragen"] .ld-groen{background:var(--groen);box-shadow:inset 0 0 0 1.5px var(--groen-diep)}
[data-view="vragen"] .reactie-voet{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px;margin-top:16px}
[data-view="vragen"] .reactie-voet b{font:800 1.45rem/1.1 var(--f-display);letter-spacing:-.025em}
[data-view="vragen"] .reactie-voet span{font:500 11px/1.2 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--grafiet)}

/* ---------- responsive ---------- */
@media (max-width:980px){
  [data-view="vragen"] .intro-grid{grid-template-columns:minmax(0,1fr)}
  [data-view="vragen"] .kort{display:none}
  [data-view="vragen"] .lijst-grid{grid-template-columns:minmax(0,1fr);gap:clamp(30px,6vw,44px)}
  [data-view="vragen"] .zoek{position:static;max-width:640px;padding:18px 16px 14px}
  /* één rij chips die horizontaal schuift, zodat de vragen dicht onder het zoekveld staan */
  [data-view="vragen"] .cats{margin-top:18px}
  [data-view="vragen"] .cats .chips{flex-direction:row;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;margin:0 -16px;padding:5px 16px 7px;scroll-padding-inline:16px;-webkit-mask-image:linear-gradient(to right,transparent,var(--houtskool) 14px,var(--houtskool) calc(100% - 28px),transparent);mask-image:linear-gradient(to right,transparent,var(--houtskool) 14px,var(--houtskool) calc(100% - 28px),transparent)}
  [data-view="vragen"] .cats .chips::-webkit-scrollbar{display:none}
  [data-view="vragen"] .cat{flex:none}
  [data-view="vragen"] .cat > span{width:auto;border-color:var(--kalk);background:var(--papier);padding:0 7px 0 15px}
  [data-view="vragen"] .cat.is-leeg input:not(:checked) + span{border-style:dashed}
  [data-view="vragen"] .telling{margin-top:8px;padding-top:12px}
  [data-view="vragen"] .nog-grid{grid-template-columns:minmax(0,1fr)}
  [data-view="vragen"] .reactie{max-width:460px}
}
@media (max-width:700px){
  [data-view="vragen"] .vs-mini dl > div{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  [data-view="vragen"] .zoek{padding:16px 14px 12px;border-radius:18px}
  [data-view="vragen"] .cats .chips{margin:0 -14px;padding-inline:14px;scroll-padding-inline:14px}
  [data-view="vragen"] .zoek-veld .input{min-height:56px;padding-left:44px;font-size:17px}
  [data-view="vragen"] .loep{left:14px;width:20px;height:20px}
  [data-view="vragen"] .cat > span{font-size:14.5px;padding-left:13px}
  [data-view="vragen"] .snip{margin-right:4px}
  [data-view="vragen"] .faq-a .tl,[data-view="vragen"] .vs-mini{margin-right:4px}
  [data-view="vragen"] .prijs-tabel{width:calc(100% - 8px);margin-right:4px;font-size:14px}
  [data-view="vragen"] .prijs-tabel th,[data-view="vragen"] .prijs-tabel td{padding-left:8px}
  /* knop, notitie die ernaar wijst, en dan pas 'Wis je zoekopdracht' */
  [data-view="vragen"] .leeg-noot{order:1;margin:-8px 0 2px 10px}
  [data-view="vragen"] #vragen-leeg-wis{order:2}
  [data-view="vragen"] .zoek-noot{font-size:clamp(1.25rem,5.6vw,1.5rem)}
}
@media (max-width:400px){
  /* adres en Kopieer-knop blijven samen op één regel */
  [data-view="vragen"] .nog-mail code{padding:13px 11px;font-size:13.5px}
}

/* ===== view: waarom ===== */
/* waarom: elke selector begint met [data-view="waarom"]; keyframes met waarom- */

/* ---------- paginakop ---------- */
[data-view="waarom"] .intro-grid{display:grid;grid-template-columns:minmax(0,1.32fr) minmax(0,.8fr);gap:clamp(28px,5vw,84px);align-items:end}
[data-view="waarom"] .intro-copy{min-width:0}
/* de merknaam verhuist als geheel naar de volgende regel ("Waarom / Doe Eens Alsof"), nooit "Doe / Eens Alsof";
   inline-block in plaats van nowrap, zodat hij bij extra letterafstand (WCAG 1.4.12) binnen het scherm blijft */
[data-view="waarom"] .merk{display:inline-block}
[data-view="waarom"] .intro .lead{text-wrap:balance}
[data-view="waarom"] .intro-body{margin-top:14px;max-width:33em;font-size:1.02rem;line-height:1.6}
[data-view="waarom"] .idx{min-width:0;background:var(--papier);border:1px solid var(--kalk);border-radius:var(--r-card);box-shadow:var(--sh-soft);padding:6px 8px 8px}
[data-view="waarom"] .idx-head{font:600 11px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--grafiet);padding:16px 14px 14px;border-bottom:1px dashed var(--kalk);margin-bottom:4px}
[data-view="waarom"] .idx li + li{border-top:1px dashed var(--kalk)}
[data-view="waarom"] .idx a{display:grid;grid-template-columns:30px minmax(0,1fr) 16px;align-items:center;gap:10px;min-height:50px;padding:6px 12px;border-radius:12px;color:var(--houtskool);text-decoration:none;font-weight:600;font-size:15.5px;line-height:1.25;transition:background-color .2s}
[data-view="waarom"] .idx a:hover{background:var(--krijtwit)}
[data-view="waarom"] .idx a:focus-visible{outline-offset:-3px}
[data-view="waarom"] .idx-n{font:500 12px/1 var(--f-mono);letter-spacing:.08em;color:var(--grafiet);font-variant-numeric:tabular-nums}
[data-view="waarom"] .idx svg{width:16px;height:16px;color:var(--grafiet);transition:transform .22s var(--ease-out),color .2s}
[data-view="waarom"] .idx svg path,[data-view="waarom"] .ext path,[data-view="waarom"] .nooit-tag path{fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
[data-view="waarom"] .idx a:hover svg{transform:translateY(2px);color:var(--houtskool)}

/* ---------- manifest ---------- */
[data-view="waarom"] .mf-band .section-head{margin-bottom:clamp(28px,4vw,48px)}
[data-view="waarom"] .mf{display:grid;max-width:1040px}
[data-view="waarom"] .mf-line{display:grid;grid-template-columns:clamp(30px,4vw,58px) minmax(0,1fr);align-items:baseline;gap:0 clamp(10px,1.6vw,22px);padding-block:clamp(14px,1.6vw,20px);border-top:1px dashed var(--wit-16)}
[data-view="waarom"] .mf-line:last-child{border-bottom:1px dashed var(--wit-16)}
[data-view="waarom"] .mf-n{font:500 12.5px/1 var(--f-mono);letter-spacing:.1em;color:var(--wit-74);font-variant-numeric:tabular-nums}
[data-view="waarom"] .mf-line p{position:relative;font:700 clamp(1.32rem,2.45vw,2.1rem)/1.16 var(--f-display);letter-spacing:-.022em;color:var(--krijtwit);text-wrap:balance}
[data-view="waarom"] .mf-claim{padding-block:clamp(22px,3vw,38px) clamp(10px,1.4vw,18px)}
[data-view="waarom"] .mf-answer{border-top-color:transparent;padding-block:clamp(4px,.8vw,10px) clamp(22px,3vw,38px)}
[data-view="waarom"] .mf-claim p,[data-view="waarom"] .mf-answer p{font-size:clamp(1.75rem,4.2vw,3.35rem);font-weight:800;line-height:1.06;letter-spacing:-.034em}
[data-view="waarom"] .mf-claim s{text-decoration:none;transition:color .7s var(--ease-out)}
[data-view="waarom"] .mf-claim.is-struck s{color:color-mix(in srgb,var(--krijtwit) 56%,var(--asfalt))}
[data-view="waarom"] .mf-claim .mf-n{transition:color .7s var(--ease-out)}
[data-view="waarom"] .mf-claim.is-struck .mf-n{color:var(--oranje)}
[data-view="waarom"] .mf-a{display:block;text-wrap:wrap}
/* het onderstreepte stuk breekt nooit: één streep onder "je klant ervaart" */
[data-view="waarom"] .mf-u{white-space:nowrap}

/* ---------- wervora ---------- */
[data-view="waarom"] .wv-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5.4vw,84px);align-items:center}
[data-view="waarom"] .wv-copy{min-width:0}
[data-view="waarom"] .wv-copy .h2{margin:18px 0 22px}
[data-view="waarom"] .wv-copy .body-l{margin-top:16px}
[data-view="waarom"] .wv-link{margin-top:20px}
[data-view="waarom"] .ext{width:16px;height:16px;margin-left:6px;flex:none;transition:transform .22s var(--ease-out)}
[data-view="waarom"] .link-chalk:hover .ext{transform:translate(2px,-2px)}
[data-view="waarom"] .routes{position:relative;min-width:0;background:var(--papier);border:1px solid var(--kalk);border-radius:var(--r-card);box-shadow:var(--sh-lift);padding:clamp(20px,2.6vw,30px)}
[data-view="waarom"] .routes-head{display:grid;grid-template-columns:46px minmax(0,1fr);gap:14px;align-items:start;padding-bottom:20px;margin-bottom:6px;border-bottom:1px dashed var(--kalk)}
[data-view="waarom"] .routes-head .h3{font-size:clamp(1.25rem,1.8vw,1.5rem);font-weight:800;line-height:1.15;margin-top:2px}
[data-view="waarom"] .routes-sub{margin-top:6px;color:var(--grafiet);font-size:15.5px}
[data-view="waarom"] .route-list{display:grid}
[data-view="waarom"] .route{position:relative;display:grid;gap:3px;padding:14px 16px;border-radius:14px;background:var(--krijtwit);border:1px solid var(--kalk);margin-top:14px}
[data-view="waarom"] .route + .route{margin-top:30px}
[data-view="waarom"] .route + .route::before{content:"of";content:"of" / "";position:absolute;left:50%;top:-24px;transform:translateX(-50%);font:600 10.5px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--grafiet);background:var(--papier);padding:4px 8px;border-radius:var(--r-pill);border:1px solid var(--kalk)}
[data-view="waarom"] .route b{font:700 1.08rem/1.2 var(--f-display);letter-spacing:-.012em}
[data-view="waarom"] .route span{color:var(--grafiet);font-size:15px;line-height:1.45}
[data-view="waarom"] .routes-foot{margin-top:18px;padding-top:14px;border-top:1px dashed var(--kalk);font:600 11.5px/1.4 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--grafiet)}

/* ---------- waarden ---------- */
[data-view="waarom"] .waarde{display:flex;flex-direction:column;gap:10px;min-height:0;padding:clamp(20px,2.3vw,26px)}
[data-view="waarom"] .w-n{font:500 12px/1 var(--f-mono);letter-spacing:.1em;color:var(--grafiet)}
[data-view="waarom"] .w-naam{margin-top:0;font:800 clamp(1.7rem,2.4vw,2.15rem)/1 var(--f-display);letter-spacing:-.034em}
[data-view="waarom"] .waarde p{color:var(--grafiet);font-size:15.5px;line-height:1.5}
[data-view="waarom"] .waarde a{color:var(--houtskool);font-weight:600;text-decoration-thickness:1.5px;text-underline-offset:3px}

/* ---------- wie doet de proef ---------- */
[data-view="waarom"] .proef-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5.4vw,84px);align-items:start}
[data-view="waarom"] .proef-wat,[data-view="waarom"] .proef-team{min-width:0}
[data-view="waarom"] .proef-wat .h3{margin-bottom:10px}
[data-view="waarom"] .kenmerken li{padding-block:13px;font-size:16.5px;line-height:1.5}
[data-view="waarom"] .kenmerken b{font-weight:700}
[data-view="waarom"] .team-note{margin-top:8px;color:var(--grafiet);font-size:15.5px;max-width:34em}
[data-view="waarom"] .team{display:grid;gap:12px;margin-top:18px}
[data-view="waarom"] .lid{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:4px 14px;align-items:center;padding:14px 16px 14px 14px;border-radius:18px;background:var(--papier);border:1px solid var(--kalk);box-shadow:var(--sh-soft)}
[data-view="waarom"] .lid-av{grid-column:1;grid-row:1 / 3;align-self:start;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font:800 1.12rem/1 var(--f-display);letter-spacing:-.02em;color:var(--houtskool);box-shadow:inset 0 0 0 1.5px var(--houtskool)}
[data-view="waarom"] .av-munt{background:var(--munt)}
[data-view="waarom"] .av-perzik{background:var(--perzik)}
[data-view="waarom"] .av-poeder{background:var(--poeder)}
[data-view="waarom"] .lid-id{grid-column:2;grid-row:1;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;min-width:0}
[data-view="waarom"] .lid-id b{font-weight:700}
[data-view="waarom"] .lid-id span{font:500 11.5px/1.2 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--grafiet)}
[data-view="waarom"] .lid .tag{grid-column:3;grid-row:1}
[data-view="waarom"] .lid-noot{grid-column:2 / 4;grid-row:2;font:700 1.32rem/1.1 var(--f-hand);color:var(--houtskool)}
[data-view="waarom"] .tag{justify-self:end;font:600 10.5px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;padding:5px 7px;border-radius:5px;background:var(--zand);color:var(--grafiet);white-space:nowrap}

/* ---------- wat we nooit doen ---------- */
[data-view="waarom"] .nooit-kaart{display:flex;flex-direction:column;gap:12px}
[data-view="waarom"] .nooit-tag{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;font:600 11px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--houtskool);padding:6px 10px 6px 7px;border-radius:var(--r-pill);background:var(--krijtwit);border:1px solid var(--kalk)}
[data-view="waarom"] .nooit-tag svg{width:14px;height:14px;color:var(--oranje-diep)}
[data-view="waarom"] .nooit-tag path{stroke-width:2.2}
[data-view="waarom"] .nooit-kaart p{color:var(--grafiet);font-size:15.5px;line-height:1.5}
[data-view="waarom"] .nooit-more{margin-top:26px}

/* ---------- tekst: geen weesjes ---------- */
[data-view="waarom"] .intro-body,[data-view="waarom"] .wv-copy .body-l,[data-view="waarom"] .routes-sub,[data-view="waarom"] .route span,[data-view="waarom"] .waarde p,[data-view="waarom"] .kenmerken li,[data-view="waarom"] .team-note,[data-view="waarom"] .nooit-kaart p,[data-view="waarom"] .section-head .lead{text-wrap:pretty}
[data-view="waarom"] .routes-foot,[data-view="waarom"] .lid-noot{text-wrap:balance}

/* ---------- breedtes ---------- */
@media (max-width:980px){
  [data-view="waarom"] .intro-grid,[data-view="waarom"] .wv-grid,[data-view="waarom"] .proef-grid{grid-template-columns:minmax(0,1fr)}
  [data-view="waarom"] .idx{max-width:560px}
  [data-view="waarom"] .routes{max-width:620px}
}
/* drie nooit-kaarten in twee kolommen: de derde over de hele breedte, geen wees */
@media (min-width:701px) and (max-width:980px){
  [data-view="waarom"] .nooit-kaart:last-child{grid-column:1 / -1}
}
@media (max-width:700px){
  [data-view="waarom"] .mf-s{display:block}
}
/* telefoon: "Wel wat je klant ervaart." past precies op één regel, ook op 320px */
@media (max-width:480px){
  [data-view="waarom"] .mf-claim p,[data-view="waarom"] .mf-answer p{font-size:min(1.75rem,calc(8.5vw - 7px))}
}
@media (max-width:560px){
  [data-view="waarom"] .waarde{min-height:0}
  [data-view="waarom"] .w-naam{margin-top:6px}
  [data-view="waarom"] .lid{grid-template-columns:48px minmax(0,1fr) auto;gap:4px 12px;padding:12px}
  [data-view="waarom"] .lid-av{width:48px;height:48px;font-size:1rem}
}

/* ===== view: zo-testen-wij ===== */
/* zo-testen-wij: elke selector begint met [data-view="zo-testen-wij"]; eigen klassen met zt- */

/* ---------- paginakop ---------- */
[data-view="zo-testen-wij"] .zt-intro-grid{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:clamp(32px,5vw,80px);align-items:center}
[data-view="zo-testen-wij"] .zt-intro-copy{min-width:0}
[data-view="zo-testen-wij"] .zt-intro-tekst{margin-top:14px;max-width:34em;font-size:1.04rem;line-height:1.6}
[data-view="zo-testen-wij"] .zt-mail{position:relative;margin:0 auto;width:100%;max-width:468px;min-width:0}
[data-view="zo-testen-wij"] .zt-mail-scherm{transform:rotate(1.1deg)}
[data-view="zo-testen-wij"] .zt-mail-head{display:flex;align-items:center;gap:12px;padding:16px 20px 0}
[data-view="zo-testen-wij"] .zt-mail-av{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--geel);box-shadow:inset 0 0 0 1.5px var(--houtskool);font:800 12.5px/1 var(--f-display);letter-spacing:-.02em}
[data-view="zo-testen-wij"] .zt-mail-meta{min-width:0;flex:1}
[data-view="zo-testen-wij"] .zt-mail-from{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:14.5px}
[data-view="zo-testen-wij"] .zt-mail-from time{font:500 12px/1 var(--f-mono);color:var(--grafiet);font-variant-numeric:tabular-nums}
[data-view="zo-testen-wij"] .zt-mail-to{font:500 12px/1.4 var(--f-mono);color:var(--grafiet)}
[data-view="zo-testen-wij"] .zt-mail-subj{margin:14px 20px 0;padding-bottom:14px;border-bottom:1px dashed var(--kalk);font:800 1.14rem/1.2 var(--f-display);letter-spacing:-.018em;text-wrap:balance}
[data-view="zo-testen-wij"] .zt-mail-body{display:grid;gap:10px;padding:14px 20px 20px;font-size:15px;line-height:1.5}
[data-view="zo-testen-wij"] .zt-mail-ps{padding:10px 12px;margin-inline:-12px;border-radius:10px;background:color-mix(in srgb,var(--groen) 16%,var(--papier))}
[data-view="zo-testen-wij"] .zt-mail-ps .ck-host{white-space:nowrap}
[data-view="zo-testen-wij"] .zt-mail-att{justify-self:start;display:inline-flex;align-items:center;gap:9px;margin-top:4px;padding:8px 12px 8px 10px;border-radius:10px;border:1px solid var(--kalk);background:var(--krijtwit);font:600 11px/1.2 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--grafiet)}
[data-view="zo-testen-wij"] .zt-att-ico{position:relative;width:14px;height:18px;flex:none;border-radius:2px 5px 2px 2px;box-shadow:inset 0 0 0 1.5px var(--grafiet)}
[data-view="zo-testen-wij"] .zt-att-ico::after{content:"";position:absolute;left:3.5px;right:3.5px;top:7px;height:1.5px;background:var(--grafiet);box-shadow:0 3.5px 0 var(--grafiet)}
[data-view="zo-testen-wij"] .zt-note{display:flex;align-items:flex-end;gap:4px;margin:16px 0 0 18px;transform:rotate(-2.2deg);transform-origin:left top;font:700 1.42rem/1.05 var(--f-hand);color:var(--grafiet);max-width:22em}
[data-view="zo-testen-wij"] .zt-note-pijl{position:relative;flex:none;width:56px;height:42px;margin-bottom:6px}
[data-view="zo-testen-wij"] .zt-note-pijl svg{position:absolute;left:0;top:0}
[data-view="zo-testen-wij"] .zt-mail-cap{margin-top:14px;text-align:center;font:500 11px/1.4 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--grafiet)}

/* ---------- vijf regels: krijttegels ---------- */
[data-view="zo-testen-wij"] .zt-regels{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px}
[data-view="zo-testen-wij"] .zt-regel{grid-column:span 2;position:relative;display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding:26px 24px 22px;border-radius:var(--r-card);background:var(--papier);border:1px solid var(--kalk);box-shadow:var(--sh-soft)}
[data-view="zo-testen-wij"] .zt-regel:nth-child(n+4){grid-column:span 3;display:grid;grid-template-columns:72px minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:24px;align-items:start}
[data-view="zo-testen-wij"] .zt-regel:nth-child(n+4) .zt-num{grid-row:1 / span 3;margin-bottom:0}
[data-view="zo-testen-wij"] .zt-num{position:relative;width:72px;height:72px;flex:none;display:grid;place-items:center;margin-bottom:22px;border-radius:9px;background:var(--krijtwit);font:700 3rem/1 var(--f-hand);color:var(--houtskool)}
[data-view="zo-testen-wij"] .zt-num svg{position:absolute;overflow:visible;pointer-events:none}
[data-view="zo-testen-wij"] .zt-regel .h3{margin-bottom:10px}
[data-view="zo-testen-wij"] .zt-regel p{color:var(--grafiet);font-size:15.5px;line-height:1.55}
[data-view="zo-testen-wij"] .zt-regel .zt-meta{margin-top:auto;padding-top:18px}
[data-view="zo-testen-wij"] .zt-meta span{display:inline-block;padding:7px 10px;border-radius:8px;background:var(--zand);font:600 11px/1.25 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--houtskool)}

/* ---------- bij jou en bij de buren ---------- */
[data-view="zo-testen-wij"] .zt-kanten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;align-items:stretch}
[data-view="zo-testen-wij"] .zt-kant{display:flex;flex-direction:column;gap:16px;padding:clamp(20px,2.6vw,30px)}
[data-view="zo-testen-wij"] .zt-kant-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
[data-view="zo-testen-wij"] .zt-kant-label{font:600 12.5px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--geel)}
[data-view="zo-testen-wij"] .zt-kant .h3{color:var(--krijtwit);font-size:clamp(1.24rem,1.7vw,1.5rem);font-weight:800;letter-spacing:-.022em;max-width:22em}
@media (min-width:981px){[data-view="zo-testen-wij"] .zt-kant .h3{min-height:2.3em}}   /* beide strips op dezelfde hoogte */
[data-view="zo-testen-wij"] .zt-route{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:4px}
[data-view="zo-testen-wij"] .zt-route li{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-width:0;min-height:84px;padding:9px 10px 10px;border-radius:12px;background:var(--wit-06);border:1px solid var(--wit-16)}
[data-view="zo-testen-wij"] .zt-r-top{display:flex;width:100%;align-items:center;justify-content:space-between;gap:4px}
[data-view="zo-testen-wij"] .zt-r-top b{font:700 1.5rem/.9 var(--f-hand);color:var(--krijtwit)}
[data-view="zo-testen-wij"] .zt-r-top i{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;font:700 11.5px/1 var(--f-mono);font-style:normal;background:var(--groen);color:var(--houtskool)}
[data-view="zo-testen-wij"] .zt-r-naam{font-size:13.5px;line-height:1.25;color:var(--krijtwit)}
[data-view="zo-testen-wij"] .zt-r-pil{margin-top:auto;display:inline-block;padding:4px 9px 5px;border-radius:var(--r-pill);background:var(--krijtwit);color:var(--houtskool);font:600 11.5px/1.1 var(--f-body);white-space:nowrap}
[data-view="zo-testen-wij"] .zt-r-pil.is-stop{background:transparent;color:var(--wit-74);box-shadow:inset 0 0 0 1px var(--wit-40)}
[data-view="zo-testen-wij"] .zt-r-stat{margin-top:auto;font:600 10.5px/1.2 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--wit-74)}
[data-view="zo-testen-wij"] .zt-route li.is-half{border-style:dashed;border-color:var(--wit-40)}
[data-view="zo-testen-wij"] .zt-route li.is-half i{background:var(--geel)}
[data-view="zo-testen-wij"] .zt-route li.is-niet{background:transparent;border-style:dashed;border-color:var(--wit-40)}
[data-view="zo-testen-wij"] .zt-route li.is-niet i{background:transparent;color:var(--wit-74);box-shadow:inset 0 0 0 1px var(--wit-40)}
[data-view="zo-testen-wij"] .zt-route-cap{font:500 11px/1.4 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--wit-74)}
[data-view="zo-testen-wij"] .zt-lijsten{display:grid;gap:18px;margin-top:4px}
[data-view="zo-testen-wij"] .zt-lijst-kop{font:600 11.5px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--wit-74);margin-bottom:6px}
[data-view="zo-testen-wij"] .zt-lijst li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:8px;padding-block:9px;border-bottom:1px dashed var(--wit-16);font-size:15.5px;line-height:1.45;color:var(--krijtwit)}
[data-view="zo-testen-wij"] .zt-lijst li:last-child{border-bottom:0}
[data-view="zo-testen-wij"] .zt-sign{display:grid;place-items:center;width:20px;height:20px;margin-top:1px;border-radius:50%;font:700 11.5px/1 var(--f-mono)}
[data-view="zo-testen-wij"] .zt-wel{background:var(--groen);color:var(--houtskool)}
[data-view="zo-testen-wij"] .zt-niet{background:transparent;color:var(--oranje);box-shadow:inset 0 0 0 1.5px var(--oranje)}
[data-view="zo-testen-wij"] .zt-buren-voet{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 28px;margin-top:26px}
[data-view="zo-testen-wij"] .zt-buren-voet p{max-width:44em;color:var(--wit-74);font-size:15px}

/* ---------- hoe we scoren: de meetlat ---------- */
[data-view="zo-testen-wij"] .zt-meetlat{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);gap:clamp(20px,2.6vw,32px);align-items:start}
[data-view="zo-testen-wij"] .zt-ml{position:relative;min-width:0;background:var(--papier);border:1px solid var(--kalk);border-radius:var(--r-card);box-shadow:var(--sh-lift)}
[data-view="zo-testen-wij"] .zt-ml-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 18px;padding:14px clamp(14px,2vw,22px) 13px;border-bottom:1px dashed var(--kalk);font:600 11px/1.3 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--grafiet)}
[data-view="zo-testen-wij"] .zt-ml-legend{display:inline-flex;align-items:center;gap:8px}
[data-view="zo-testen-wij"] .zt-ml-legend i{font-style:normal;padding:3px 7px;border-radius:var(--r-pill);background:var(--houtskool);color:var(--krijtwit);letter-spacing:0}
[data-view="zo-testen-wij"] .zt-ml-key{display:none;width:100%;letter-spacing:.04em;text-transform:none;font-weight:500}
[data-view="zo-testen-wij"] .zt-ml-body{padding:6px clamp(4px,1vw,12px) 10px}
[data-view="zo-testen-wij"] .zt-matrix{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:8px}
[data-view="zo-testen-wij"] .zt-col-tegel{width:25%}
[data-view="zo-testen-wij"] .zt-matrix thead th{padding:4px 0 0;text-align:left;font-weight:400;vertical-align:bottom}
[data-view="zo-testen-wij"] .zt-matrix thead .score-chip{white-space:normal;line-height:1.2;letter-spacing:.05em;text-wrap:balance;transition:box-shadow .2s}
[data-view="zo-testen-wij"] .zt-matrix thead th.is-kol .score-chip{box-shadow:0 0 0 1.5px var(--houtskool)}
[data-view="zo-testen-wij"] .zt-th-lbl{display:block;padding:0 0 6px 2px;font:600 11px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--grafiet)}
[data-view="zo-testen-wij"] .zt-matrix tbody th{padding:6px 4px 6px 2px;text-align:left;vertical-align:middle;font-weight:400}
[data-view="zo-testen-wij"] .zt-t{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:8px;align-items:start}   /* een naam die afbreekt, blijft naast het nummer */
[data-view="zo-testen-wij"] .zt-t-num{display:grid;place-items:center;width:24px;height:24px;border-radius:7px;box-shadow:inset 0 0 0 1.5px var(--kalk);font:600 12px/1 var(--f-mono);transition:background-color .2s,box-shadow .2s}
[data-view="zo-testen-wij"] tr.is-rij .zt-t-num{background:var(--geel);box-shadow:inset 0 0 0 1.5px var(--houtskool)}
[data-view="zo-testen-wij"] .zt-t-naam{grid-column:2;padding-top:2px;font:700 1.02rem/1.2 var(--f-display);letter-spacing:-.012em}
[data-view="zo-testen-wij"] .zt-t-vraag{grid-column:2;display:block;margin-top:5px;font-size:13.5px;line-height:1.35;color:var(--grafiet)}
[data-view="zo-testen-wij"] .zt-matrix td{position:relative;height:1px;padding:0;vertical-align:top}
[data-view="zo-testen-wij"] .zt-cel{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:8px;width:100%;height:100%;min-height:82px;padding:11px 12px 10px;border:0;border-radius:12px;font:500 14.5px/1.32 var(--f-body);color:var(--houtskool);text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .18s var(--ease-out),box-shadow .2s}
[data-view="zo-testen-wij"] .k-groen{background:var(--tint-groen)}
[data-view="zo-testen-wij"] .k-geel{background:var(--tint-geel)}
[data-view="zo-testen-wij"] .k-oranje{background:var(--tint-oranje)}
[data-view="zo-testen-wij"] .zt-cel:hover{transform:translateY(-2px);box-shadow:0 2px 0 var(--zwart-28)}
[data-view="zo-testen-wij"] .zt-cel[aria-pressed="true"]{transform:translateY(-2px);box-shadow:0 3px 0 var(--houtskool)}
[data-view="zo-testen-wij"] .zt-cel:focus-visible{outline:3px solid var(--houtskool);outline-offset:-7px}   /* binnen het vakje: de krijttegel eromheen blijft de selectie */
[data-view="zo-testen-wij"] .zt-cel-sign{display:none}
[data-view="zo-testen-wij"] .zt-pin{display:inline-flex;align-items:center;padding:4px 8px;border-radius:var(--r-pill);background:var(--houtskool);color:var(--krijtwit);font:600 11.5px/1 var(--f-mono);font-variant-numeric:tabular-nums}
[data-view="zo-testen-wij"] .zt-ring{z-index:2}
[data-view="zo-testen-wij"] .zt-detail{position:sticky;top:96px;display:grid;gap:14px;min-width:0;padding:clamp(18px,2.2vw,26px);border-radius:var(--r-card);background:var(--krijtwit);border:1px solid var(--kalk);box-shadow:var(--sh-soft)}
[data-view="zo-testen-wij"] .zt-d-head{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
[data-view="zo-testen-wij"] .zt-d-tegel{font:600 11.5px/1.3 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--grafiet)}
[data-view="zo-testen-wij"] .zt-d-vraag{font-size:14.5px;color:var(--grafiet)}
[data-view="zo-testen-wij"] .zt-d-kort{margin-top:-8px;font:700 clamp(1.65rem,2.3vw,2rem)/1.05 var(--f-hand)}
[data-view="zo-testen-wij"] .zt-d-blok{display:grid;gap:6px;align-content:start}   /* niet uitrekken naast het voorbeeld (tablet) */
[data-view="zo-testen-wij"] .zt-d-lbl{font:600 11px/1.2 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--grafiet)}
[data-view="zo-testen-wij"] .zt-d-let{font-size:15.5px;line-height:1.55}
[data-view="zo-testen-wij"] .zt-d-vb{display:grid;gap:8px;padding:14px 16px 16px;border-radius:14px;background:var(--papier);border:1px solid var(--kalk)}
[data-view="zo-testen-wij"] .zt-d-vb-kop{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:14.5px}
[data-view="zo-testen-wij"] .zt-d-score{margin-left:auto;padding:4px 8px;border-radius:var(--r-pill);background:var(--houtskool);color:var(--krijtwit);font:600 11.5px/1 var(--f-mono);font-variant-numeric:tabular-nums}
[data-view="zo-testen-wij"] .zt-d-zag{font-size:15px;line-height:1.5}
[data-view="zo-testen-wij"] .zt-d-quote{font:700 1.3rem/1.12 var(--f-hand);color:var(--houtskool)}
[data-view="zo-testen-wij"] .zt-vb-tag{display:inline-block;padding:4px 7px;border-radius:5px;background:var(--zand);font:600 10.5px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--grafiet)}
[data-view="zo-testen-wij"] .zt-detail.is-swap > *{animation:zo-testen-wij-swap .36s var(--ease-out)}
@keyframes zo-testen-wij-swap{from{transform:translateY(6px)}}

/* van zes tegels naar één cijfer */
[data-view="zo-testen-wij"] .zt-cijfer{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.3fr);gap:clamp(22px,4vw,56px);align-items:center;margin-top:clamp(36px,5vw,56px)}
[data-view="zo-testen-wij"] .zt-cijfer-kaart{display:grid;justify-items:center;gap:6px;padding:22px clamp(18px,2.4vw,28px) 24px;border-radius:var(--r-card);background:var(--papier);border:1px solid var(--kalk);box-shadow:var(--sh-soft);min-width:0}
[data-view="zo-testen-wij"] .zt-cijfer-kop{display:flex;width:100%;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding-bottom:12px;border-bottom:1px dashed var(--kalk);font:600 11px/1.3 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--grafiet)}
[data-view="zo-testen-wij"] .zt-cijfer-num{margin-top:14px;font:800 clamp(4.2rem,7vw,5.6rem)/.9 var(--f-display);letter-spacing:-.05em;font-variant-numeric:tabular-nums}
[data-view="zo-testen-wij"] .zt-cijfer-num > .ck-host{padding:4px 8px}
[data-view="zo-testen-wij"] .zt-cijfer-sub{margin-top:10px;font:600 11px/1.2 var(--f-mono);letter-spacing:.12em;text-transform:uppercase}
[data-view="zo-testen-wij"] .zt-cijfer-tegels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;width:100%;margin-top:16px}
[data-view="zo-testen-wij"] .zt-cijfer-tegels li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:6px;padding:7px 8px;border-radius:10px;font-size:12.5px;line-height:1.2}
[data-view="zo-testen-wij"] .zt-cijfer-tegels b{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--papier);font:700 10.5px/1 var(--f-mono)}
[data-view="zo-testen-wij"] .zt-cijfer-tegels span{min-width:0}
[data-view="zo-testen-wij"] .zt-cijfer-tegels em{font:600 11.5px/1 var(--f-mono);font-style:normal;font-variant-numeric:tabular-nums}
[data-view="zo-testen-wij"] .zt-cijfer-uitleg .h3{font-size:clamp(1.4rem,2.2vw,1.85rem);font-weight:800;letter-spacing:-.025em}
[data-view="zo-testen-wij"] .zt-uitleg{display:grid;gap:14px;margin-top:20px}
[data-view="zo-testen-wij"] .zt-uitleg li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:14px;align-items:start}
[data-view="zo-testen-wij"] .zt-u-num{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:var(--papier);box-shadow:inset 0 0 0 1.5px var(--houtskool);font:700 1.3rem/1 var(--f-hand)}
[data-view="zo-testen-wij"] .zt-uitleg li:first-child .zt-u-num{background:var(--geel)}
[data-view="zo-testen-wij"] .zt-uitleg p{font-size:15.5px;line-height:1.55;color:var(--grafiet);max-width:38em}
[data-view="zo-testen-wij"] .zt-uitleg b{color:var(--houtskool);font-weight:600}
[data-view="zo-testen-wij"] .zt-cijfer-voet{margin-top:14px}

/* ---------- je gegevens ---------- */
[data-view="zo-testen-wij"] .zt-gegevens{display:grid;grid-template-columns:minmax(0,1.42fr) minmax(0,1fr);grid-template-rows:auto 1fr;grid-template-areas:"links rechts" "meer rechts";gap:18px clamp(20px,2.6vw,32px);align-items:start}
[data-view="zo-testen-wij"] .zt-g-links{grid-area:links;min-width:0}
[data-view="zo-testen-wij"] .zt-data{background:var(--papier);border:1px solid var(--kalk);border-radius:var(--r-card);box-shadow:var(--sh-soft);overflow:hidden}
[data-view="zo-testen-wij"] .zt-data-kop,[data-view="zo-testen-wij"] .zt-data-rij{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1.15fr) minmax(0,.8fr);gap:10px 22px;padding:16px clamp(16px,2.2vw,24px)}
[data-view="zo-testen-wij"] .zt-data-kop{background:var(--krijtwit);border-bottom:1px solid var(--kalk);font:600 11px/1.2 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--grafiet)}
[data-view="zo-testen-wij"] .zt-data-rij{font-size:15px;line-height:1.5}
[data-view="zo-testen-wij"] .zt-data-rij + .zt-data-rij{border-top:1px dashed var(--kalk)}
[data-view="zo-testen-wij"] .zt-data-wat{font-weight:600}
[data-view="zo-testen-wij"] .zt-data-wat small{display:block;margin-top:3px;font-weight:400;font-size:13.5px;line-height:1.4;color:var(--grafiet)}
[data-view="zo-testen-wij"] .zt-data-lbl{display:none}
[data-view="zo-testen-wij"] .zt-termijn{display:flex;flex-wrap:wrap;align-items:center;align-content:flex-start;gap:6px 8px}
[data-view="zo-testen-wij"] .zt-termijn b{font:800 1.12rem/1.2 var(--f-display);letter-spacing:-.015em;white-space:nowrap}
[data-view="zo-testen-wij"] .zt-termijn small{flex-basis:100%;font-size:13.5px;color:var(--grafiet)}
[data-view="zo-testen-wij"] .zt-tag{padding:4px 7px;border-radius:5px;background:var(--tint-geel);font:600 10.5px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase}
[data-view="zo-testen-wij"] .zt-tag-wet{background:var(--zand)}
[data-view="zo-testen-wij"] .zt-nooit{margin-top:16px;font-size:15px;line-height:1.55;color:var(--grafiet)}
[data-view="zo-testen-wij"] .zt-nooit b{color:var(--houtskool)}
[data-view="zo-testen-wij"] .zt-g-rechts{grid-area:rechts;display:grid;gap:16px;min-width:0}
[data-view="zo-testen-wij"] .zt-g-kaart .h3{margin-bottom:12px}
[data-view="zo-testen-wij"] .zt-verwerkers li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding-block:9px;border-bottom:1px dashed var(--kalk)}
[data-view="zo-testen-wij"] .zt-verwerkers b{font-weight:700}
[data-view="zo-testen-wij"] .zt-verwerkers span{grid-column:1;font-size:14px;color:var(--grafiet)}
[data-view="zo-testen-wij"] .zt-verwerkers em{grid-column:2;grid-row:1 / span 2;align-self:center;font:600 10.5px/1 var(--f-mono);font-style:normal;letter-spacing:.1em;text-transform:uppercase;padding:5px 7px;border-radius:5px;background:var(--zand)}
[data-view="zo-testen-wij"] .zt-g-klein{margin-top:12px;font-size:14px;line-height:1.5;color:var(--grafiet)}
[data-view="zo-testen-wij"] .zt-rechten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 16px}
[data-view="zo-testen-wij"] .zt-rechten li{position:relative;padding:6px 0 6px 16px;font-size:14.5px;line-height:1.35}
[data-view="zo-testen-wij"] .zt-rechten li::before{content:"";position:absolute;left:0;top:13px;width:7px;height:7px;border-radius:50%;background:var(--groen-diep)}
[data-view="zo-testen-wij"] .zt-mailrij{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:14px}
[data-view="zo-testen-wij"] .zt-mailrij code{font:500 14.5px/1 var(--f-mono);padding:12px 12px;border-radius:10px;background:var(--krijtwit);border:1px solid var(--kalk);user-select:all;overflow-wrap:anywhere}
[data-view="zo-testen-wij"] .zt-g-meer{grid-area:meer;min-width:0}

/* ---------- breedtes ---------- */
@media (max-width:1099px){
  [data-view="zo-testen-wij"] .zt-meetlat{grid-template-columns:minmax(0,1fr)}
  [data-view="zo-testen-wij"] .zt-detail{position:relative;top:auto;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:22px}
  [data-view="zo-testen-wij"] .zt-detail > .zt-d-head,[data-view="zo-testen-wij"] .zt-detail > .zt-d-vraag,[data-view="zo-testen-wij"] .zt-detail > .zt-d-kort{grid-column:1 / -1}
  [data-view="zo-testen-wij"] .zt-cijfer{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}
  [data-view="zo-testen-wij"] .zt-gegevens{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-template-areas:"links" "rechts" "meer";row-gap:clamp(20px,2.6vw,32px)}
  [data-view="zo-testen-wij"] .zt-g-rechts{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
}
@media (max-width:980px){
  [data-view="zo-testen-wij"] .zt-intro-grid{grid-template-columns:minmax(0,1fr)}
  [data-view="zo-testen-wij"] .zt-mail{margin:8px 0 0;max-width:500px}
  [data-view="zo-testen-wij"] .zt-regel,[data-view="zo-testen-wij"] .zt-regel:nth-child(n+4){grid-column:span 3}
  [data-view="zo-testen-wij"] .zt-regel:nth-child(n+4){display:flex}
  [data-view="zo-testen-wij"] .zt-regel:nth-child(n+4) .zt-num{margin-bottom:22px}
  [data-view="zo-testen-wij"] .zt-regel:last-child{grid-column:1 / -1}
  [data-view="zo-testen-wij"] .zt-kanten{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:820px){
  [data-view="zo-testen-wij"] .zt-cijfer{grid-template-columns:minmax(0,1fr)}
  [data-view="zo-testen-wij"] .zt-cijfer-kaart{max-width:460px;width:100%;justify-self:start}
  [data-view="zo-testen-wij"] .zt-g-rechts{grid-template-columns:minmax(0,1fr)}
  [data-view="zo-testen-wij"] .zt-detail{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:700px){
  [data-view="zo-testen-wij"] .zt-regels{grid-template-columns:minmax(0,1fr);gap:12px}
  [data-view="zo-testen-wij"] .zt-regel,[data-view="zo-testen-wij"] .zt-regel:nth-child(n+4),[data-view="zo-testen-wij"] .zt-regel:last-child{grid-column:auto;display:grid;grid-template-columns:56px minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:16px;padding:18px 16px 18px}
  [data-view="zo-testen-wij"] .zt-regel .zt-num,[data-view="zo-testen-wij"] .zt-regel:nth-child(n+4) .zt-num{grid-row:1 / span 3;width:56px;height:56px;margin-bottom:0;font-size:2.4rem}
  [data-view="zo-testen-wij"] .zt-regel .zt-meta{padding-top:12px}
  [data-view="zo-testen-wij"] .zt-route li{min-height:80px;padding:8px 8px 9px}
  [data-view="zo-testen-wij"] .zt-r-naam{font-size:12.5px}
  [data-view="zo-testen-wij"] .zt-ml-key{display:block}
  [data-view="zo-testen-wij"] .zt-ml-body{padding:4px 2px 8px}
  [data-view="zo-testen-wij"] .zt-matrix{border-spacing:5px}
  [data-view="zo-testen-wij"] .zt-col-tegel{width:40%}
  [data-view="zo-testen-wij"] .zt-t-vraag{display:none}
  [data-view="zo-testen-wij"] .zt-t{column-gap:6px}
  [data-view="zo-testen-wij"] .zt-t-num{width:22px;height:22px}
  [data-view="zo-testen-wij"] .zt-t-naam{font-size:.9rem}
  [data-view="zo-testen-wij"] .zt-matrix thead .score-chip{justify-content:center;width:100%;padding:6px 4px}
  [data-view="zo-testen-wij"] .zt-cel{min-height:56px;align-items:center;justify-content:center;gap:5px;padding:7px 4px}
  [data-view="zo-testen-wij"] .zt-cel-t,[data-view="zo-testen-wij"] .zt-woord{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  [data-view="zo-testen-wij"] .zt-cel-sign{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--papier);font:700 13px/1 var(--f-mono)}
  [data-view="zo-testen-wij"] .zt-pin{padding:3px 6px;font-size:10.5px}
  [data-view="zo-testen-wij"] .zt-data-kop{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  [data-view="zo-testen-wij"] .zt-data-rij{grid-template-columns:minmax(0,1fr);gap:10px}
  [data-view="zo-testen-wij"] .zt-data-rij + .zt-data-rij{border-top:1px solid var(--kalk)}
  [data-view="zo-testen-wij"] .zt-data-lbl{display:block;flex-basis:100%;margin-bottom:2px;font:600 10.5px/1.2 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--grafiet)}
  [data-view="zo-testen-wij"] .zt-rechten{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:420px){
  [data-view="zo-testen-wij"] .zt-col-tegel{width:43%}
  [data-view="zo-testen-wij"] .zt-t-naam{font-size:.86rem}
  [data-view="zo-testen-wij"] .zt-t{column-gap:5px}
  [data-view="zo-testen-wij"] .zt-t-num{width:20px;height:20px;font-size:11px}
}
@media (max-width:560px){
  [data-view="zo-testen-wij"] .zt-mail-head{padding:14px 16px 0}
  [data-view="zo-testen-wij"] .zt-mail-subj{margin:12px 16px 0}
  [data-view="zo-testen-wij"] .zt-mail-body{padding:12px 16px 18px}
  [data-view="zo-testen-wij"] .zt-mail-ps{margin-inline:-8px;padding:10px 8px}
  [data-view="zo-testen-wij"] .zt-note{margin-left:6px;font-size:1.3rem}
  [data-view="zo-testen-wij"] .zt-kant{padding:18px 14px 20px}
  [data-view="zo-testen-wij"] .zt-buren-voet .link-chalk{text-align:left}
}
@media (prefers-reduced-motion:reduce){
  [data-view="zo-testen-wij"] .zt-cel:hover{transform:none}
}

/* ===== style-attributen uit de markup (CSP: geen inline stijl) ===== */
[data-sx="s1"]:not(#sx-a):not(#sx-b):not(#sx-c){position:absolute}
[data-sx="s2"]:not(#sx-a):not(#sx-b):not(#sx-c){fill:var(--perzik)}
[data-sx="s3"]:not(#sx-a):not(#sx-b):not(#sx-c){fill:var(--zand)}
[data-sx="s4"]:not(#sx-a):not(#sx-b):not(#sx-c){fill:var(--munt);stroke:var(--papier);stroke-width:5}
[data-sx="s5"]:not(#sx-a):not(#sx-b):not(#sx-c){stroke:var(--grafiet);stroke-width:1.5}
[data-sx="s6"]:not(#sx-a):not(#sx-b):not(#sx-c){fill:var(--geel)}
[data-sx="s7"]:not(#sx-a):not(#sx-b):not(#sx-c){fill:var(--houtskool)}
[data-sx="s8"]:not(#sx-a):not(#sx-b):not(#sx-c){fill:var(--groen)}
[data-sx="s9"]:not(#sx-a):not(#sx-b):not(#sx-c){fill:var(--papier)}
[data-sx="sa"]:not(#sx-a):not(#sx-b):not(#sx-c){fill:none;stroke:var(--grid-licht);stroke-width:1}
[data-sx="sb"]:not(#sx-a):not(#sx-b):not(#sx-c){fill:var(--krijtwit)}
[data-sx="sc"]:not(#sx-a):not(#sx-b):not(#sx-c){fill:var(--kalk)}
[data-sx="sd"]:not(#sx-a):not(#sx-b):not(#sx-c){fill:var(--papier);stroke:var(--kalk);stroke-width:1.5}
[data-sx="se"]:not(#sx-a):not(#sx-b):not(#sx-c){fill:none;stroke:var(--houtskool);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
[data-sx="sf"]:not(#sx-a):not(#sx-b):not(#sx-c){font:700 26px var(--f-hand);fill:var(--houtskool)}
[data-sx="sg"]:not(#sx-a):not(#sx-b):not(#sx-c){fill:var(--poeder)}
[data-sx="sh"]:not(#sx-a):not(#sx-b):not(#sx-c){fill:none;stroke:var(--perzik);stroke-width:9;stroke-linecap:round}
[data-sx="si"]:not(#sx-a):not(#sx-b):not(#sx-c){fill:var(--oranje-diep)}
[data-sx="sj"]:not(#sx-a):not(#sx-b):not(#sx-c){fill:var(--oranje)}
[data-sx="sk"]:not(#sx-a):not(#sx-b):not(#sx-c){margin-top:18px}
[data-sx="sl"]:not(#sx-a):not(#sx-b):not(#sx-c){transform:scaleX(.3)}
[data-sx="sm"]:not(#sx-a):not(#sx-b):not(#sx-c){transform:scaleX(.5)}
[data-sx="sn"]:not(#sx-a):not(#sx-b):not(#sx-c){transform:scaleX(.2)}
[data-sx="so"]:not(#sx-a):not(#sx-b):not(#sx-c){transform:scaleX(.8)}
[data-sx="sp"]:not(#sx-a):not(#sx-b):not(#sx-c){--x:104;--y:176}
[data-sx="sq"]:not(#sx-a):not(#sx-b):not(#sx-c){--x:150;--y:16}
[data-sx="sr"]:not(#sx-a):not(#sx-b):not(#sx-c){--x:150;--y:96}
[data-sx="ss"]:not(#sx-a):not(#sx-b):not(#sx-c){--x:196;--y:176}
[data-sx="st"]:not(#sx-a):not(#sx-b):not(#sx-c){--x:150;--y:256}
[data-sx="su"]:not(#sx-a):not(#sx-b):not(#sx-c){left:calc(1.8*var(--u));top:calc(8*var(--u));width:calc(19.4*var(--u))}
[data-sx="sv"]:not(#sx-a):not(#sx-b):not(#sx-c){left:calc(22.6*var(--u));top:calc(7.6*var(--u));width:calc(19.6*var(--u));height:calc(11.6*var(--u))}
[data-sx="sw"]:not(#sx-a):not(#sx-b):not(#sx-c){left:calc(22.4*var(--u));top:calc(20.4*var(--u))}
[data-sx="sx"]:not(#sx-a):not(#sx-b):not(#sx-c){left:calc(1.8*var(--u));top:calc(7.4*var(--u));width:calc(30*var(--u))}
[data-sx="sy"]:not(#sx-a):not(#sx-b):not(#sx-c){left:calc(1.8*var(--u));top:calc(13.5*var(--u));width:calc(40.4*var(--u))}
[data-sx="sz"]:not(#sx-a):not(#sx-b):not(#sx-c){left:calc(1.8*var(--u));top:calc(22.9*var(--u))}
[data-sx="s10"]:not(#sx-a):not(#sx-b):not(#sx-c){left:calc(21.6*var(--u));top:calc(22.3*var(--u))}
[data-sx="s11"]:not(#sx-a):not(#sx-b):not(#sx-c){left:calc(1.8*var(--u));top:calc(7.8*var(--u));width:calc(24*var(--u))}
[data-sx="s12"]:not(#sx-a):not(#sx-b):not(#sx-c){left:calc(1.8*var(--u));top:calc(12.8*var(--u));width:calc(23.4*var(--u));height:calc(9.2*var(--u))}
[data-sx="s13"]:not(#sx-a):not(#sx-b):not(#sx-c){left:calc(1.8*var(--u));top:calc(22.6*var(--u))}
[data-sx="s14"]:not(#sx-a):not(#sx-b):not(#sx-c){left:calc(27.4*var(--u));top:calc(12.8*var(--u));width:calc(14.8*var(--u));height:calc(9.2*var(--u))}
[data-sx="s15"]:not(#sx-a):not(#sx-b):not(#sx-c){left:calc(27.6*var(--u));top:calc(8.6*var(--u))}
[data-sx="s16"]:not(#sx-a):not(#sx-b):not(#sx-c){left:calc(1.8*var(--u));top:calc(7.8*var(--u));width:calc(18*var(--u))}
[data-sx="s17"]:not(#sx-a):not(#sx-b):not(#sx-c){left:calc(1.8*var(--u));top:calc(14.2*var(--u));width:calc(16*var(--u))}
[data-sx="s18"]:not(#sx-a):not(#sx-b):not(#sx-c){left:0;top:calc(18.4*var(--u));width:calc(44*var(--u));height:calc(6.6*var(--u))}
[data-sx="s19"]:not(#sx-a):not(#sx-b):not(#sx-c){left:calc(21.6*var(--u));top:calc(10.4*var(--u))}
[data-sx="s1a"]:not(#sx-a):not(#sx-b):not(#sx-c){left:calc(1.8*var(--u));top:calc(4.2*var(--u))}
[data-sx="s1b"]:not(#sx-a):not(#sx-b):not(#sx-c){left:calc(1.8*var(--u));top:calc(7.3*var(--u));width:calc(40.4*var(--u))}
[data-sx="s1c"]:not(#sx-a):not(#sx-b):not(#sx-c){left:calc(1.8*var(--u));top:calc(19.9*var(--u))}
[data-sx="s1d"]:not(#sx-a):not(#sx-b):not(#sx-c){left:calc(1.8*var(--u));top:calc(23*var(--u))}
[data-sx="s1e"]:not(#sx-a):not(#sx-b):not(#sx-c){left:calc(12*var(--u));top:calc(19.7*var(--u))}
[data-sx="s1f"]:not(#sx-a):not(#sx-b):not(#sx-c){left:0;top:calc(2.8*var(--u));width:calc(13.4*var(--u));height:calc(22.2*var(--u))}
[data-sx="s1g"]:not(#sx-a):not(#sx-b):not(#sx-c){left:calc(15.2*var(--u));top:calc(4.2*var(--u));width:calc(27.2*var(--u))}
[data-sx="s1h"]:not(#sx-a):not(#sx-b):not(#sx-c){left:calc(24.4*var(--u));top:calc(20.6*var(--u))}
[data-sx="s1i"]:not(#sx-a):not(#sx-b):not(#sx-c){--y:25}
[data-sx="s1j"]:not(#sx-a):not(#sx-b):not(#sx-c){--y:62.5}
[data-sx="s1k"]:not(#sx-a):not(#sx-b):not(#sx-c){--y:87.5}
[data-sx="s1l"]:not(#sx-a):not(#sx-b):not(#sx-c){--x:29.167;--y:25;--dy:0}
[data-sx="s1m"]:not(#sx-a):not(#sx-b):not(#sx-c){--x:18.75;--y:25;--dy:23}
[data-sx="s1n"]:not(#sx-a):not(#sx-b):not(#sx-c){--x:15.278;--y:25;--dy:0}
[data-sx="s1o"]:not(#sx-a):not(#sx-b):not(#sx-c){--x:15.278;--y:25;--dy:-24}
[data-sx="s1p"]:not(#sx-a):not(#sx-b):not(#sx-c){--x:91.667;--y:25;--dy:0}
[data-sx="s1q"]:not(#sx-a):not(#sx-b):not(#sx-c){--x:11.806;--y:62.5;--dy:0}
[data-sx="s1r"]:not(#sx-a):not(#sx-b):not(#sx-c){--x:15.278;--y:62.5;--dy:-23}
[data-sx="s1s"]:not(#sx-a):not(#sx-b):not(#sx-c){--x:15.278;--y:62.5;--dy:23}
[data-sx="s1t"]:not(#sx-a):not(#sx-b):not(#sx-c){--x:11.806;--y:87.5;--dy:0}
[data-sx="s1u"]:not(#sx-a):not(#sx-b):not(#sx-c){--x:22.222;--y:87.5;--dy:0}
[data-sx="s1v"]:not(#sx-a):not(#sx-b):not(#sx-c){--x:8.333}
[data-sx="s1w"]:not(#sx-a):not(#sx-b):not(#sx-c){--x:29.167}
[data-sx="s1x"]:not(#sx-a):not(#sx-b):not(#sx-c){--x:50}
[data-sx="s1y"]:not(#sx-a):not(#sx-b):not(#sx-c){--x:70.833}
[data-sx="s1z"]:not(#sx-a):not(#sx-b):not(#sx-c){--x:91.667}
[data-sx="s20"]:not(#sx-a):not(#sx-b):not(#sx-c){--x:29.167;--y:25}
[data-sx="s21"]:not(#sx-a):not(#sx-b):not(#sx-c){--x:18.75;--y:25}
[data-sx="s22"]:not(#sx-a):not(#sx-b):not(#sx-c){--x:15.278;--y:25}
[data-sx="s23"]:not(#sx-a):not(#sx-b):not(#sx-c){--x:91.667;--y:25}
[data-sx="s24"]:not(#sx-a):not(#sx-b):not(#sx-c){--x:11.806;--y:62.5}
[data-sx="s25"]:not(#sx-a):not(#sx-b):not(#sx-c){--x:15.278;--y:62.5}
[data-sx="s26"]:not(#sx-a):not(#sx-b):not(#sx-c){--x:11.806;--y:87.5}
[data-sx="s27"]:not(#sx-a):not(#sx-b):not(#sx-c){--x:22.222;--y:87.5}
[data-sx="s28"]:not(#sx-a):not(#sx-b):not(#sx-c){width:61%}
[data-sx="s29"]:not(#sx-a):not(#sx-b):not(#sx-c){width:76%}
[data-sx="s2a"]:not(#sx-a):not(#sx-b):not(#sx-c){width:100%}
[data-sx="s2b"]:not(#sx-a):not(#sx-b):not(#sx-c){width:7.5%}
[data-sx="s2c"]:not(#sx-a):not(#sx-b):not(#sx-c){width:40%}
[data-sx="s2d"]:not(#sx-a):not(#sx-b):not(#sx-c){width:44.4%}