@font-face{font-family:'Figtree';font-style:normal;font-weight:500 900;font-display:swap;src:url(/asset-font/figtree-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Figtree';font-style:normal;font-weight:500 900;font-display:swap;src:url(/asset-font/figtree-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
 /* afwerk: één tokenset. kleur */
 --navy:#14318A;--band:#1B3482;--blauw:#2F66E3;--blauw-m:#5B7BD0;--lb:#D5E3FA;--lb2:#EAF1FC;--koel:#F1F6FB;--wit:#fff;
 --or:#FA953A;--or-d:#F2862A;--or-t:#B45309;--fout:#C2410C;--zacht:#3C4F88;--grijs:#55638E;--op-navy:#C9D7F5;--lijn:#D4DEEE;--lijn-d:#C5D3EA;
 /* type-schaal */
 --fs-1:14px;--fs-2:16px;--fs-3:17px;--fs-4:18px;--fs-5:21px;--fs-6:24px;--fs-7:28px;--fs-8:34px;
 --fs-h1:clamp(44px,5vw,72px);--fs-h2:clamp(30px,3.5vw,52px);
 /* radius */
 --r-s:8px;--r-m:12px;--r-l:16px;--r-pil:999px;
 /* sectieritme */
 --sec-t:64px;--sec-b:72px;--scheur-h:30px;
 --f:"Figtree",system-ui,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--wit);color:var(--navy);font:500 var(--fs-3)/1.5 var(--f);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:1440px;margin:0 auto;padding:0 60px}
h1,h2,h3{margin:0;color:var(--navy)}
h1{font-weight:900;font-size:var(--fs-h1);line-height:.98;letter-spacing:-.045em}
h2{font-weight:900;font-size:var(--fs-h2);line-height:1;letter-spacing:-.04em}
p{margin:0}
.intro{font-size:var(--fs-5);line-height:1.45;color:var(--zacht)}
a{color:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip{position:absolute;left:-999px}
.skip:focus{left:16px;top:16px;z-index:99;background:var(--wit);padding:10px 14px}
:focus-visible{outline:3px solid var(--focus,#E06A12);outline-offset:2px}
.band-k{background:var(--koel)}
.band-n{background:var(--band);color:var(--wit)}
.band-n h2,.band-n h3{color:var(--wit)}
/* statusblad en glyphs */
.bl{width:22px;height:16px;flex:none;overflow:visible}
.bl path{stroke:var(--navy);stroke-width:2.4;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.bl .nerf{fill:none;stroke:var(--wit);stroke-width:1.6;stroke-linecap:round}
.bl-live path:first-child{fill:var(--or);stroke:var(--or)}
.bl-wacht path:first-child{fill:var(--blauw);stroke:var(--blauw)}
.bl-gep path:first-child{fill:none;stroke-width:1.7;stroke-dasharray:5 3.5}
.bl-gep .nerf{display:none}
.bl-wit path:first-child{fill:var(--wit);stroke:var(--wit)}
.bl-wit .nerf{stroke:var(--or)}
.lp{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round}
/* knoppen */
.knop{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:14px 30px;border-radius:var(--r-pil);border:2px solid transparent;font:800 var(--fs-4)/1 var(--f);text-decoration:none;cursor:pointer;white-space:nowrap;transition:transform .15s;color:var(--navy)}
.knop:hover{transform:translateY(-2px)}
.knop.or{background:var(--or);color:var(--wit);letter-spacing:-.005em}
.knop.or:hover{background:var(--or-d)}
.knop.groot{min-height:60px;padding:18px 34px;font-size:var(--fs-5)}
.knop.rand{border-color:var(--navy);background:transparent}
.knop.rand.wit{border-color:var(--wit);color:var(--wit)}

.knop.vol{width:100%}

.lnk{font-weight:800;font-size:var(--fs-4);text-decoration:none;border-bottom:2px solid currentColor;padding:6px 0 3px}
.lnk:hover{color:var(--blauw)}
/* venster */
.raam{background:var(--wit);border:2px solid var(--navy);border-radius:var(--r-l)}
/* kop */
.kop{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom:1.5px solid var(--lijn)}
.kop-in{display:flex;align-items:center;height:72px}
.merk{font-weight:900;font-size:var(--fs-8);letter-spacing:-.045em;text-decoration:none;color:var(--navy);display:inline-flex;align-items:center;gap:8px}
.kop nav{flex:1;display:flex;align-items:center;gap:42px;margin-left:72px;font-weight:700;font-size:var(--fs-3)}
.kop nav a{text-decoration:none}
.kop nav .knop{margin-left:auto;min-height:46px;padding:10px 22px;font-size:var(--fs-3);font-weight:700}
.menu-k{display:none}

/* voorbeeld */
.zv{padding:var(--sec-t) 0 var(--sec-b)}

.zp-kop{display:flex;align-items:center;gap:30px;margin-bottom:22px}
.zp-kop b{font-weight:900;font-size:var(--fs-4);letter-spacing:-.03em}
.zp-kop nav{display:flex;gap:14px;font-size:var(--fs-1);font-weight:600}
/* aanbod */
.ab{padding:var(--sec-t) 0 var(--sec-b);position:relative}

/* formulier */
.ct{padding:var(--sec-t) 0 var(--sec-b)}
.ct-in{display:grid;grid-template-columns:400px 1fr;gap:64px;align-items:start}
.ct-t .intro{margin:18px 0 0}
.cf{padding:28px 26px 22px}
.cf-g{display:grid;grid-template-columns:1fr 1fr;gap:20px 24px}
.cf-v span,.cf-r legend{display:block;font-weight:800;font-size:var(--fs-4);margin-bottom:8px;color:var(--navy)}
.cf-v input,.cf-v select{width:100%;height:50px;border:1.5px solid var(--lijn-d);border-radius:var(--r-s);padding:0 16px;font:500 var(--fs-3) var(--f);color:var(--navy);background:var(--wit)}
.cf-v input::placeholder{color:var(--grijs)}
.cf-v input:focus,.cf-v select:focus{border-color:var(--navy)}
.cf-v select{appearance:none;background:var(--wit) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2314318A' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 18px center/13px}
.cf-r{border:0;margin:22px 0 0;padding:0;min-width:0}

[aria-invalid=true]{border-color:var(--fout)}
.cf .knop{margin-top:24px;min-height:48px;font-size:var(--fs-4)}
.cf-n{font-size:var(--fs-2);color:var(--zacht);margin-top:14px;text-align:center}
.cf-ok{margin-top:10px;font-weight:700;font-size:var(--fs-2);text-align:center}
/* voet */
.vt{background:var(--band);color:var(--wit);padding:40px 0 34px}
.vt-in{display:grid;grid-template-columns:400px 1fr auto;gap:64px;align-items:start}
.merk.wit{color:var(--wit);font-size:var(--fs-8);margin-top:6px}
.vt nav{display:flex;flex-wrap:wrap;gap:0 56px;font-weight:700;font-size:var(--fs-3)}
.vt nav a{text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.vt nav a:hover{color:var(--lb)}

/* product (uit mg-3) */

#product .logo{width:26px;height:29px;flex:0 0 auto;color:var(--navy)}

#product .wb{position:relative;z-index:1;overflow:hidden;box-shadow:16px 16px 0 var(--lb)}
#product .wb-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
#product .wb-acts i{font-style:normal;font-weight:800;font-size:var(--fs-1);border-radius:var(--r-pil);padding:6px 13px;border:2px solid var(--navy)}
#product .wb-ok{background:var(--or);color:var(--navy);border-color:var(--or) !important}
@media (max-width:640px){
 #product .wb{box-shadow:8px 8px 0 var(--lb);margin-right:8px}
}
#product .lp{width:18px;height:18px;flex:0 0 auto;fill:none;stroke:currentcolor;stroke-width:2.4;stroke-linecap:round}

#product .app{display:flex;padding:0}
#product .zb{width:158px;flex:0 0 auto;background:var(--navy);color:var(--wit);padding:18px 10px;display:flex;flex-direction:column}
#product .zb-logo{display:flex;align-items:center;gap:8px;font-weight:900;font-size:var(--fs-3);letter-spacing:-0.03em;margin:0 6px 18px}
#product .zb-logo .logo{color:var(--wit);width:20px;height:23px}
#product .zb ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
#product .zb li{display:flex;align-items:center;gap:9px;padding:8px 9px;border-radius:var(--r-s);font-weight:700;font-size:var(--fs-1);color:var(--op-navy)}
#product .zb li svg{width:17px;height:17px;fill:none;stroke:currentcolor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#product .zb li.aan{background:var(--blauw);color:var(--wit)}
#product .zb-wie{margin-top:auto;display:flex;align-items:center;gap:8px;padding:28px 4px 0;font-size:var(--fs-1);line-height:1.2}
#product .zb-wie i{font-style:normal;font-weight:800;background:var(--or);color:var(--navy);border-radius:var(--r-s);width:30px;height:30px;display:grid;place-items:center;flex:0 0 auto}
#product .zb-wie b{display:block;font-weight:800}
#product .zb-wie span{color:var(--op-navy)}
#product .app-main{flex:1 1 0%;min-width:0;padding:16px 16px 18px;background:var(--koel)}
#product .app-top{display:flex;align-items:center;gap:10px;margin-bottom:14px}
#product .app-t{flex:1 1 0%;font-weight:900;font-size:var(--fs-5);letter-spacing:-0.03em;color:var(--navy)}
#product .app-zoek{display:flex;align-items:center;gap:7px;font-size:var(--fs-1);color:var(--zacht);background:var(--wit);border:1.5px solid var(--lijn);border-radius:var(--r-pil);padding:6px 14px}
#product .app-zoek .lp{width:15px;height:15px}
#product .app-nw{font-size:var(--fs-1);font-weight:800;color:var(--wit);background:var(--blauw);border-radius:var(--r-pil);padding:7px 14px;white-space:nowrap}
#product .bord{display:grid;grid-template-columns:repeat(4, 1fr);gap:10px;align-items:start}
#product .k{background:var(--lb2);border-radius:var(--r-m);padding:7px}
#product .k-kop{display:flex;justify-content:space-between;align-items:center;border-radius:var(--r-s);padding:7px 10px;font-size:var(--fs-1);color:var(--wit);background:var(--blauw)}
#product .k-kop b{font-weight:800}
#product .k-kop span{background:var(--wit);color:var(--navy);border-radius:var(--r-pil);padding:0 8px;font-weight:800}
#product .k-keur .k-kop{background:var(--navy)}
#product .k-gepland .k-kop{background:#4565BF}
#product .k-live .k-kop{background:var(--or);color:var(--navy)}
#product .k ul{list-style:none;margin:0;padding:0}
#product .kt{background:var(--wit);border-radius:var(--r-s);padding:10px 10px 9px;margin-top:7px;border:1px solid var(--lijn)}
#product .kt > b{display:block;font-size:var(--fs-1);line-height:1.3;font-weight:700;color:var(--navy)}
#product .kt-o{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;margin-top:8px}
#product .kt-o em{font-style:normal;font-size:var(--fs-1);font-weight:700;background:var(--lb);color:var(--navy);border-radius:var(--r-pil);padding:0 9px}
#product .kt-o small{font-size:var(--fs-1);color:var(--grijs)}
#product .kt-o .bl{margin-left:auto;width:20px;height:14px}
#product .kt-nu{background:var(--lb2);border-color:var(--blauw)}
#product .kt .wb-acts{margin-top:10px;gap:6px}
#product .kt .wb-acts i{padding:4px 10px}
@media (max-width:1240px){
 #product .zb{display:none}
}

@media (max-width:640px){
 
 #product .app-zoek{display:none}
 #product .bord{grid-template-columns:1fr}
 #product .k-onderwerp li:nth-child(n+2),#product .k-gepland li:nth-child(n+2),#product .k-live li:nth-child(n+2),#product .k-keur li:nth-child(n+2){display:none}
}
/* tablet */
@media (max-width:1240px){
 .wrap{padding:0 40px}
 
 
 
 .kop nav{gap:28px;margin-left:44px}
}
@media (max-width:1100px){
 
 
 
 .ct-in{grid-template-columns:320px 1fr;gap:40px}
 .vt-in{grid-template-columns:1fr auto;gap:24px}
 
 
}
@media (max-width:900px){
 .wrap{padding:0 20px}
 .kop-in{height:66px}
 .merk{font-size:var(--fs-7)}
 .menu-k{display:grid;place-items:center;gap:6px;margin-left:auto;width:48px;height:48px;border:2px solid var(--navy);border-radius:var(--r-pil);background:transparent;cursor:pointer;padding:0;align-content:center}
 .menu-k i{display:block;width:20px;height:2px;background:var(--navy);transition:transform .2s}
 .kop.open .menu-k i:first-of-type{transform:translateY(4px) rotate(45deg)}
 .kop.open .menu-k i:last-of-type{transform:translateY(-4px) rotate(-45deg)}
 .kop nav{display:none;position:absolute;left:0;right:0;top:66px;background:var(--wit);flex-direction:column;align-items:stretch;gap:0;margin:0;padding:8px 20px 24px;border-bottom:2px solid var(--navy)}
 .kop.open nav{display:flex}
 .kop nav .knop{margin:18px 0 0}
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 .ct-in{grid-template-columns:1fr;gap:24px}
 .cf{padding:20px 16px}
 .cf-g{grid-template-columns:1fr}
 .vt-in{grid-template-columns:1fr auto}
 .merk.wit{font-size:var(--fs-7)}
 .vt nav{gap:0 28px}
 
}

@media (prefers-reduced-motion:reduce){
 *{transition:none!important;scroll-behavior:auto!important}
}
/* ===== ronde 1 ===== */
h3{font-weight:800;letter-spacing:-.02em;line-height:1.15}
.mk{height:46px;width:auto;margin:-8px 0 -6px}
.merk.wit .mk{height:46px}

/* afwerk punt 6: de scheur uit mg-2 is de rand van elk navy vlak (aanbod boven en onder, voet boven), geen losse strook */
.navy-rand{position:relative}
.navy-rand:before,.ab:after{content:"";position:absolute;left:0;right:0;height:var(--scheur-h);z-index:2;pointer-events:none;background-repeat:no-repeat;background-size:100% 100%}
.navy-rand:before{top:calc(1px - var(--scheur-h));background-image:url(/asset-schoon/scheur-boven-a.webp);background-position:center top}
.ab:after{bottom:calc(1px - var(--scheur-h));background-image:url(/asset-schoon/scheur-onder-a.webp);background-position:center bottom}

@media (max-width:900px){
 .mk{height:36px}
 .merk.wit .mk{height:40px}
 
 
 
 
 
 
 :root{--scheur-h:20px;--sec-t:56px;--sec-b:64px}
 .navy-rand:before,.ab:after{background-size:1100px 100%}
 
 
}

/* ===== polishronde 1 (16-10-2026) ===== */
h2,h3{text-wrap:balance}
.knop.rand:hover{background:var(--lb2)}
.knop.rand.wit:hover{background:rgba(255,255,255,.1)}

/* p1-2 vragen: bakje met tabbladen (flare-concept faq-b). Vraag = tab, antwoord = het vel; open tab is navy en loopt over in de rand van het vel */
#vragen.faq{padding:var(--sec-t) 0 var(--sec-b)}

/* p1-3 contact: vel met gescheurde bovenrand, onderstreepte velden, plankeuze als kweekbak (flare-concept form-a) */
.ct-in{grid-template-columns:380px 1fr}
.cf.raam{position:relative;border:1px solid var(--lijn);border-radius:var(--r-l);padding:28px 32px 28px}
.cf-v span,.cf-r legend{font-size:var(--fs-2);margin-bottom:4px}
.cf-v input,.cf-v select{height:46px;border:0;border-bottom:2px solid var(--lijn-d);border-radius:0;padding:0 2px;background-color:transparent;transition:border-color .15s}
.cf-v select{background-position:right 4px center}
.cf-v input:hover,.cf-v select:hover{border-bottom-color:var(--blauw-m)}
.cf-v input:focus,.cf-v select:focus{border-bottom-color:var(--blauw)}
.cf-r{margin-top:28px}
.cf-r legend{margin-bottom:12px}

@media (max-width:1100px){
 .ct-in{grid-template-columns:300px 1fr}
 
}
@media (max-width:900px){
 .ct-in{grid-template-columns:1fr}
 .cf.raam{padding:22px 18px 22px}
 
 
 
}
/* p1-E afwerking: één ritme kop -> intro (14px), één bladmaat buiten de tool (24x17), geen losse woorden op een regel */

.zv-kop .intro,.ct-t .intro{margin-top:14px}
.zb-bar em .bl{width:24px;height:17px}
.zp-hero h3{text-wrap:pretty}
.menu-k{font-size:var(--fs-1)}
/* p2-2 voorbeeld: geen zoekkaart meer (staat in de hero); de pagina zelf in een browservenster, geknipte iconen wijzen met een stippellijn naar hun blok, een tak groeit achter het venster vandaan */
.zv{padding:var(--sec-t) 0 var(--sec-b)}

.zv-kop{grid-column:1;grid-row:1}
.zv-b{grid-column:2;grid-row:1;position:relative;margin-top:64px}

.zv-br{position:relative;z-index:1}
.zb-bar{display:flex;align-items:center;gap:14px;padding:12px 16px;background:var(--koel);border-bottom:2px solid var(--navy);border-radius:calc(var(--r-l) - 2px) calc(var(--r-l) - 2px) 0 0}
.zb-dots{display:flex;gap:6px}.zb-dots i{width:10px;height:10px;border-radius:50%;background:var(--lijn-d)}.zb-dots i:first-child{background:var(--navy)}
.zb-url{flex:1;min-width:0;background:var(--wit);border:1.5px solid var(--lijn-d);border-radius:var(--r-pil);padding:6px 14px;font-weight:700;font-size:var(--fs-2);color:var(--zacht);white-space:nowrap}
.zb-bar em{font-style:normal;display:inline-flex;align-items:center;gap:8px;background:var(--or);color:var(--navy);font-weight:800;font-size:var(--fs-2);border-radius:var(--r-pil);padding:6px 14px}
.zp{padding:20px 28px 28px}
.zp-hero{display:grid;grid-template-columns:minmax(0,1fr) 200px;gap:24px;align-items:center;background:var(--lb2);border-radius:var(--r-m);padding:24px}
.zp-hero h3{font-size:var(--fs-8);line-height:1.02;letter-spacing:-.035em}
.zp-beeld{display:grid;place-items:center}.zp-pomp{width:190px}
.zp-r{display:block;height:8px;border-radius:var(--r-s);background:var(--lijn-d);width:80%;margin-top:16px}.zp-r.k{width:55%;margin-top:10px}
.zp-blk{position:relative;border:1.5px solid var(--lijn-d);border-radius:var(--r-m);padding:16px 20px 18px;margin-top:12px}
.zp-blk b{display:block;font-weight:800;font-size:var(--fs-4);line-height:1.25}
.zp-blk .zp-r{width:64%;margin-top:10px}.zp-blk .zp-r.k{width:40%;margin-top:8px}
.zp-blk:before{content:"";position:absolute;left:-6px;top:calc(50% - 5px);width:10px;height:10px;border-radius:50%;background:var(--navy)}

@media (max-width:1100px){
 
 .zv-b{grid-column:1;grid-row:auto;margin-top:96px;margin-right:24px}
 .zp-blk{display:grid;grid-template-columns:64px minmax(0,1fr);gap:16px;align-items:center}
 .zp-blk:before{display:none}
 
 
}
@media (max-width:640px){
 .zv-b{margin-top:80px;margin-right:12px}
 
 .zb-bar{padding:10px 12px;gap:10px}
 .zb-dots{display:none}
 .zb-url{font-size:var(--fs-1);padding:5px 12px}
 .zb-bar em{font-size:var(--fs-1);padding:5px 12px;gap:6px}
 .zp{padding:14px 14px 16px}
 .zp-kop nav{display:none}
 .zp-hero{grid-template-columns:minmax(0,1fr);gap:12px;padding:16px}
 .zp-hero h3{font-size:var(--fs-6)}
 .zp-beeld{order:-1;justify-self:start}
 .zp-pomp{width:104px}
 .zp-blk{grid-template-columns:52px minmax(0,1fr);gap:12px;padding:12px 14px}
 
 .zp-blk b{font-size:var(--fs-2)}
}

/* p3-1 voorbeeld (desktop): de linkerkolom is de legenda (flare-concept zv-legenda). Venster begint gelijk met de kop; de drie geknipte iconen staan groot op de kolomrand (x = wrap) en hun stippellijn loopt over de goot naar hun blok */
@media (min-width:1101px){
 
 .zv-b{margin-top:0}
 
 
 
 
 
}

/* p3-3 bladen buiten de tool: 'gepland/onderwerp' is een effen lichtblauw silhouet, geen stippelcontour (las op klein formaat als krabbel) */
.bl-gep path:first-child{fill:var(--lb);stroke:var(--lb);stroke-width:2.4;stroke-dasharray:none}

/* p4-1 voorbeeld (flare-concept zv-a): geen legenda en stippellijnen meer. Elk blok draagt zijn eigen geknipte icoon als papieren sticker
   die net over de linkerrand van het blok steekt (alle breedtes dezelfde vorm). Kop en intro staan verticaal gecentreerd naast het venster.
   De tak groeit uit de oranje live-pil omhoog, binnen het raster (niet meer tegen de schermrand). */
.zv-b{--sw:84px;--so:14px}
.zp-blk{padding-left:calc(var(--sw) - var(--so) + 20px);min-height:calc(var(--sw) + 16px);display:block}
.zp-blk:before{display:none !important}

.zp-blk>div{padding-top:2px}

@media (min-width:1101px){
 
 .zv-b{margin-top:96px}
 .zv-kop{margin-top:96px;align-self:center}
}
@media (max-width:1100px){
 .zv-b{margin-top:104px;margin-right:0}
}
@media (max-width:640px){
 .zv-b{--sw:60px;--so:8px;margin-top:104px;margin-right:0}
 .zp-blk{padding-left:calc(var(--sw) - var(--so) + 12px);min-height:calc(var(--sw) + 12px);grid-template-columns:none}
 
}
/* p4-2 aanbod (flare-concept ab-a, zonder label): het middelste plan staat op een lichter vel met gescheurde randen, zodat de oranje knop een anker heeft.
   'op aanvraag' is kleiner en secundair; de prijsregel houdt overal dezelfde hoogte. Mobiel: plant boven op zijn grond, tekst over de volle breedte. */
:root{--band-l:#2443A3}

/* p6-3 knoppen: navy tekst op oranje (wit op #FA953A was 2,23:1; navy 5,2:1), zelfde combinatie als de Goedkeuren-knop in de tool */
.knop.or{color:var(--navy)}

/* p6-1 contact: wat er hierna gebeurt (flare-concept ct-a), drie iconen aan één stengel; de vakken onderbreken de stengel zoals bij Zo werkt het mobiel */
/* p6-E tijdlijnstrook: papierschaduw zodat het vel loskomt van de koele achtergrond; status onder 'Jouw akkoord' */

@media (max-width:900px){
 
 
 
 
 
 
 
 
}

/* ==== mg-5: hero h4 gepolijst (navy poster tot bovenaan, kop op navy, bloem groeit door de scheur heen) ==== */
/* kop: doorzichtig met witte tekst zolang hij op het navy vlak staat; na scrollen wit met navy tekst */
.kop{transition:background-color .25s,border-color .25s,color .25s}
.kop:not(.vast):not(.open){background:transparent;border-bottom-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;color:var(--wit)}
.kop:not(.vast):not(.open) .merk{color:var(--wit)}
.kop:not(.vast):not(.open) nav .knop.rand{background:var(--wit);border-color:var(--wit);color:var(--navy)}
.kop:not(.vast):not(.open) .menu-k{border-color:var(--wit)}
.kop:not(.vast):not(.open) .menu-k i{background:var(--wit)}
.kop .merk{transition:color .25s,background-color .25s,border-color .25s,transform .15s}

/* hero: navy loopt tot de bovenrand (onder de kop door), scheur alleen onder, daaronder koel = begin van 'Zo werkt het' */
.h4{--creme:#FFF5E6;--h4-sub:#9DC2FA;--kh:72px;--bw:clamp(400px,calc(100vw - 880px),590px);--bt:96px;
 position:relative;margin-top:calc(-1 * var(--kh));padding:0 0 64px;background:var(--koel);overflow-x:clip}
.h4-vlak{position:relative;background:var(--band)}
.h4-vlak:after{content:"";position:absolute;left:0;right:0;height:var(--scheur-h);bottom:calc(1px - var(--scheur-h));pointer-events:none;background:var(--band);
 -webkit-mask:url(/asset-schoon/scheur-onder-a.webp) center bottom/100% 100% no-repeat;mask:url(/asset-schoon/scheur-onder-a.webp) center bottom/100% 100% no-repeat;transform-origin:50% 0}
/* vlakhoogte = bloemtop + 80% van de bloemhoogte: de grond (wortelaanzet) valt precies op de scheur */
.h4-in{position:relative;display:flex;flex-direction:column;justify-content:center;box-sizing:border-box;
 min-height:calc(var(--bt) + var(--bw) * 1.4906 * .8);padding-top:calc(var(--kh) + 40px);padding-bottom:64px}
.h4-t{position:relative;z-index:2;max-width:720px}
.h4 h1{color:var(--creme);font-size:var(--fs-h1);line-height:1.04;letter-spacing:-.045em}
.h4 h1 span{display:block}
@media (min-width:901px){.h4 h1 span{white-space:nowrap}.h4-intro span{display:block}}
.h4 h1 .h4-or{color:var(--or)}
.h4-intro{margin:30px 0 40px;max-width:600px;color:var(--h4-sub);font-size:var(--fs-5);line-height:1.55;font-weight:600}
.h4-k{display:flex;align-items:center;gap:36px;flex-wrap:wrap}
.h4 .knop.or{min-width:0}
.h4-lnk{display:inline-flex;align-items:center;gap:12px;color:var(--wit);font-weight:800;font-size:var(--fs-4);text-decoration:none;padding:8px 0}
.h4-lnk .pijl{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}
.h4-lnk:hover .pijl{transform:translateX(3px)}
.h4-lnk:hover{color:var(--h4-sub)}
.h4-b{position:absolute;z-index:1;top:var(--bt);right:24px;width:var(--bw)}
.h4-bloem{width:100%;height:auto}
/* pitch-1: drie paginakaarten hangen aan de rechterbladeren. Breedte = inhoud (max-content), dus de binnenruimte links en rechts is
   precies de padding; 'voorbeeld' is een tab op de bovenrand, rechts gelijk met de inhoud. Draaien om het midden, zodat de kaart op zijn plek blijft.
   Bovenste kaart = grootst en nieuwst; de lagere zijn iets kleiner. Het oude losse blad (h4-blad) vervalt. */
.h4-serp{--p:16px;position:absolute;z-index:1;width:max-content;box-sizing:border-box;background:var(--wit);border-radius:8px;padding:16px var(--p) 14px;
 transform:rotate(var(--rot));transform-origin:50% 50%;box-shadow:0 10px 24px rgba(6,14,60,.28);color:var(--navy)}
.h4-serp1{--rot:-6deg;left:50%;top:23%;z-index:3}
.h4-serp2{--rot:-3deg;left:56%;top:43.5%;z-index:2}
.h4-serp3{--rot:-7deg;left:49%;top:60%}
.h4-serp em{position:absolute;top:0;right:var(--p);transform:translateY(-50%);font-style:normal;font-weight:700;font-size:var(--fs-1);line-height:1.2;color:var(--blauw);background:var(--lb);border-radius:var(--r-pil);padding:2px 9px;white-space:nowrap}
.h4-s1{display:flex;align-items:center;gap:6px;font-size:var(--fs-1);line-height:1.2;color:var(--grijs);font-weight:600;white-space:nowrap}
.h4-s1 .lp{flex:none;width:16px;height:16px;color:var(--navy)}
.h4-serp b{display:block;margin-top:8px;font-size:var(--fs-5);line-height:1.15;font-weight:800;letter-spacing:-.015em;color:var(--blauw)}
.h4-serp b span{display:block;white-space:nowrap}
.h4-serp2 b,.h4-serp3 b{font-size:var(--fs-4)}
@media (max-width:1100px){
 .h4-serp{--p:14px;padding:14px var(--p) 12px}
 .h4-serp b{font-size:var(--fs-4)}
 .h4-serp2 b,.h4-serp3 b{font-size:var(--fs-3)}
 .h4-serp1{left:44%}.h4-serp2{left:50%}.h4-serp3{left:43%}
}
@media (max-width:900px){
 .h4-serp1{left:36%;top:19%}
 .h4-serp2{left:43%;top:46%}
 .h4-serp3{display:none}
 .h4-s1 .lp{width:14px;height:14px}
}
/* overgang: 'Zo werkt het' loopt koel door uit de hero, de wortels hangen erin */

@media (max-width:1240px){
 .h4{padding-bottom:56px}
 .h4-t{max-width:600px}
}
@media (max-width:1100px){
 .h4{--bw:clamp(280px,calc(100vw - 640px),430px);--bt:104px;padding-bottom:48px}
 .h4-t{max-width:540px}
 .h4-intro{font-size:var(--fs-4)}
 .h4-k{gap:24px}
}
@media (max-width:900px){
 .h4{--kh:66px;--bw:min(340px,86vw);padding:0 0 calc(var(--bw) * .3 + 28px)}
 .h4-in{display:flow-root;min-height:0;padding-top:calc(var(--kh) + 40px);padding-bottom:0}
 .h4-t{max-width:none}
 .h4 h1{font-size:clamp(33px,9.3vw,58px)}
 .h4-intro{margin:20px 0 28px;font-size:var(--fs-4);line-height:1.55}
 .h4-k{gap:14px 28px}
 .h4-b{position:relative;top:auto;right:auto;width:var(--bw);margin:36px auto calc(var(--bw) * -.3)}
 
}
@media (max-width:640px){
 .h4 .knop.or{width:100%}
}

/* ==== intro-animatie (eerste bezoek per sessie; html.intro wordt in de head gezet, zonder JS staat alles direct goed) ==== */
@media (prefers-reduced-motion:no-preference){
 html.intro .h4-vlak:after{animation:h4-scheur .55s cubic-bezier(.3,.8,.3,1) .05s backwards}
 html.intro .h4 h1 span{animation:h4-op .6s cubic-bezier(.2,.7,.2,1) backwards}
 html.intro .h4 h1 span:nth-child(1){animation-delay:0s}
 html.intro .h4 h1 span:nth-child(2){animation-delay:.07s}
 html.intro .h4 h1 span:nth-child(3){animation-delay:.14s}
 html.intro .h4-intro{animation:h4-op .6s cubic-bezier(.2,.7,.2,1) .22s backwards}
 html.intro .h4-k{animation:h4-op .6s cubic-bezier(.2,.7,.2,1) .3s backwards}
 /* de bloem groeit van de wortel omhoog: onthulling van onder naar boven, licht omhoog schuivend */
 html.intro .h4-bloem{animation:h4-groei .9s cubic-bezier(.25,.7,.25,1) 0s backwards}
 html.intro .h4-serp{animation:h4-kaart .45s cubic-bezier(.2,.7,.2,1) backwards}
 html.intro .h4-serp1{animation-delay:.85s}
 html.intro .h4-serp2{animation-delay:1s}
 html.intro .h4-serp3{animation-delay:1.15s}
}
@keyframes h4-in{from{opacity:0}to{opacity:1}}
@keyframes h4-op{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes h4-scheur{from{transform:scaleY(0)}to{transform:none}}
@keyframes h4-groei{from{clip-path:inset(78% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes h4-kaart{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
/* ===== m3 (19-10-2026, feedback na vergelijking met mg-4-s1) ===== */
.pijl{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}

/* desktop: 'Zo werkt het' begint 44px onder de vlakrand (was 72); de stapiconen blijven >= 20px onder de wortels (gemeten) */
.h4{padding-bottom:36px}
@media (min-width:1500px){.h4{padding-bottom:44px}}
@media (max-width:1240px){.h4{padding-bottom:36px}}
@media (max-width:1100px){.h4{padding-bottom:28px}}
@media (max-width:900px){.h4{padding-bottom:calc(var(--bw) * .3 + 20px)} }

/* m3-5 voorbeeld: kop staat bovenaan, gelijk met de bovenrand van het venster; de url-regel wijst naar het venster */
@media (min-width:1101px){
 
 .zv-kop{align-self:start;margin-top:96px;padding-top:18px}
}

/* m3-2 voor wie: branchekaarten uit mg-4-s1, recht, geen kartelrand, één randtaal (.raam) */
.vw{padding:var(--sec-t) 0 calc(var(--sec-b) + 8px)}
.vw-kop .intro{margin-top:14px;max-width:34em}
.vw-l{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.vw-k{display:flex;flex-direction:column;background:var(--wit);border:2px solid var(--navy);border-radius:var(--r-l);overflow:hidden}
.vw-k h3{padding:16px 20px 14px;font-size:var(--fs-5);line-height:1.2;border-bottom:2px solid var(--navy)}

.vw-q{display:flex;align-items:flex-start;gap:8px;margin-top:6px;background:var(--lb2);border-radius:var(--r-s);padding:10px 12px;font-weight:800;font-size:var(--fs-2);line-height:1.3;color:var(--navy)}
.vw-q .lp{width:17px;height:17px;margin-top:1px}
.vw-q span{flex:1;min-width:0}
.vw-pl{flex:1;display:flex;align-items:flex-end;justify-content:center;min-height:156px;padding:16px 0 12px}
.vw-i{height:136px;width:auto}
.vw-u{border-top:1.5px dashed var(--lijn-d);padding-top:10px;font-size:var(--fs-1);font-weight:600;color:var(--zacht);overflow-wrap:anywhere}
@media (max-width:1100px){.vw-l{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
 .vw-l{grid-template-columns:minmax(0,1fr);gap:16px;margin-top:28px}
 .vw-k h3{font-size:var(--fs-4);padding:12px 16px 10px}
 
 .vw-q,.vw-u{grid-column:1}
 .vw-pl{grid-column:2;grid-row:1 / span 3;min-height:0;padding:0;align-items:center}
 .vw-i{height:auto;width:76px}
 .vw-u{margin-top:12px}
}

/* m3-1 prijzen: plantjes blijven; eronder per plan een stevig vel (recht, geen scheur) met wie-doet-wat */
.ab-kop{position:relative;z-index:3;max-width:560px}

/* m3-3 voet: kolommen + een tweede uitnodiging (outline, de enige volle oranje knop blijft in hero/formulier), navy met scheurrand */
.vt{padding:56px 0 28px}
.vt-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr) auto;gap:32px 48px;align-items:start}
.vt-m>p{margin-top:12px;font-size:var(--fs-2);color:var(--op-navy);max-width:34ch}

.vt nav.vt-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding-top:6px}
.vt-nav p{font-weight:900;font-size:var(--fs-2);color:var(--wit);margin-bottom:8px}
.vt nav.vt-nav a{display:flex;align-items:center;min-height:36px;font-weight:600;font-size:var(--fs-2);color:#DCE6FA;text-decoration:none}
.vt nav.vt-nav a:hover{color:var(--wit);text-decoration:underline}

.vt-c{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:6px 28px;border-top:1.5px solid rgba(255,255,255,.18);padding-top:18px;font-size:var(--fs-1);color:var(--op-navy)}
.vt-c a{color:var(--wit)}
.vt-c .vt-vb{margin-left:auto;color:var(--lb)}
@media (max-width:1100px){
 .vt-in{grid-template-columns:minmax(0,1fr) auto}
 .vt-m{grid-column:1;grid-row:1}
 
 .vt nav.vt-nav{grid-column:1 / -1;grid-row:2}
}
@media (max-width:900px){
 .vt{padding:44px 0 24px}
 .vt-in{position:relative}
 .vt-m{grid-column:1 / -1}
 
 
}
@media (max-width:520px){
 .vt nav.vt-nav{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px}
 .vt-c{flex-direction:column}
 .vt-c .vt-vb{margin-left:0}
 
}
/* ===== m4 (19-10-2026): nieuw prijsmodel (prijs-ontwerp variant a), Directus, zeven zwakke plekken. Zie ledger.md, ronde m4 ===== */

/* m4-1 prijzen: Managed = hoofdblok (eerst, grootst, licht vel, grootste plant, enige volle oranje knop); zelf doen = twee rustige navy vellen rechts */
#prijzen .ab-kop{max-width:720px}
.pz{display:grid;grid-template-columns:minmax(0,7.4fr) minmax(0,4.6fr);gap:32px;margin-top:44px;align-items:stretch}
.pz-m{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.62fr);gap:24px;background:var(--koel);color:var(--navy);border-top:8px solid var(--or);border-radius:var(--r-s) var(--r-s) var(--r-l) var(--r-l);padding:36px 32px 36px 40px;box-shadow:0 18px 40px rgba(6,14,60,.32)}
.pz-pil{display:inline-block;background:var(--or);color:var(--navy);font-weight:800;font-size:var(--fs-2);line-height:1;padding:8px 14px;border-radius:var(--r-pil)}
.pz-pr{margin-top:22px;font-size:var(--fs-4);font-weight:600}
.pz-pr{white-space:nowrap}
.pz-pr b{font-weight:900;font-size:clamp(34px,3vw,44px);letter-spacing:-.03em;margin-right:4px}
.pz-v{list-style:none;margin:22px 0 32px;padding:0;display:grid;gap:12px}
.pz-v li{display:flex;align-items:flex-start;gap:12px;font-size:var(--fs-3);font-weight:600;line-height:1.4}
.pz-v .bl{width:24px;height:17px;margin-top:3px}
.pz-mt{display:flex;flex-direction:column;align-items:flex-start}
.pz-mt .knop{margin-top:auto}
.pz-mi{display:flex;align-items:flex-end;justify-content:center;min-width:0}
.pz-mim{width:100%;max-width:300px;height:auto;max-height:560px;object-fit:contain}
.pz-z{display:flex;flex-direction:column}
.pz-zk{list-style:none;margin:0;padding:0;flex:1;display:grid;grid-auto-rows:1fr;gap:20px}
.pz-k{display:grid;grid-template-columns:minmax(0,1fr) 92px;gap:12px;background:var(--band-l);border-top:6px solid var(--blauw-m);border-radius:var(--r-s) var(--r-s) var(--r-m) var(--r-m);padding:24px 22px 24px 26px}
.pz-kt{display:flex;flex-direction:column;align-items:flex-start}
.pz-kt .knop{margin-top:auto;min-height:48px;padding:12px 24px;font-size:var(--fs-3)}
.pz-kp{display:flex;align-items:flex-end;justify-content:center}
.pz-ki{width:auto;max-width:92px}
.pz-start .pz-ki{height:72px}
.pz-groei .pz-ki{height:150px}
@media (max-width:1240px){
 .pz{grid-template-columns:minmax(0,1fr) minmax(0,.62fr);gap:24px}
 .pz-m{padding:32px 24px 32px 30px;grid-template-columns:minmax(0,1fr) minmax(0,.5fr)}
}
@media (max-width:1100px){
 .pz{grid-template-columns:minmax(0,1fr)}
 .pz-zk{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto}
 .pz-mim{max-height:480px}
}
@media (max-width:640px){
 .pz{margin-top:28px}
 .pz-m{grid-template-columns:minmax(0,1fr) 34%;gap:8px 12px;padding:24px 18px 26px 20px}
 .pz-mt{display:contents}
 .pz-pil{grid-column:1;grid-row:1;justify-self:start;align-self:start}
 .pz-m h3{grid-column:1;grid-row:2;margin-top:6px}
 .pz-pr{grid-column:1 / -1;grid-row:4;margin-top:12px}
 .pz-mi{grid-column:2;grid-row:1 / span 3;align-items:flex-end}
 .pz-v{grid-column:1 / -1;grid-row:5;margin:18px 0 22px}
 .pz-mt .knop{grid-column:1 / -1;grid-row:6;width:100%}
 .pz-mim{max-height:240px}
 .pz-zk{grid-template-columns:minmax(0,1fr);gap:16px}
 .pz-k{grid-template-columns:minmax(0,1fr) 64px;padding:20px 16px 20px 20px}
 .pz-start .pz-ki{height:56px}.pz-groei .pz-ki{height:112px}
 .pz-kt .knop{width:100%}
}

/* m4-3a voorbeeld: kop + legenda links vormen één kolom naast het venster; legenda en venster delen de nummers 1-4 */

.zp-hero{position:relative}

.zp-hero>div{padding-left:28px}
.zp-blk{display:flex !important;align-items:flex-start;gap:16px;padding:16px 20px 18px !important;min-height:0 !important}
.zp-blk>div{flex:1;min-width:0}
.zp-blk:before{content:none}

@media (min-width:1101px){
 
 .zv-kop{grid-column:1;grid-row:1;margin-top:0;padding-top:0}
 
 
 .zv-b{grid-column:2;grid-row:1 / span 2;margin-top:0}
 
 
}
@media (max-width:1100px){
 .zv-kop{grid-row:1}
 .zv-b{grid-row:2}
 
 
}
@media (max-width:640px){
 
 
 
 
 
 .zp-blk{gap:12px;padding:12px 14px !important}
 
 .zp-hero>div{padding-left:0}
 
 .zp-hero{grid-template-columns:minmax(0,1fr)}
}

/* m4-3c voor wie: zoekvragen aan stengels uit één doorlopende grondlijn; branche en url onder de grond. Geen kaarten */
.vw-l{gap:0 !important;margin-top:48px;align-items:stretch}
.vw-k{display:flex;flex-direction:column;align-items:center;background:none;border:0;border-radius:0;overflow:visible;padding:0}
.vw-q{display:flex;align-items:flex-start;gap:8px;margin:0 14px;padding:12px 16px;background:var(--wit);border:2px solid var(--navy);border-radius:var(--r-m);font-weight:800;font-size:var(--fs-3);line-height:1.3;color:var(--navy);max-width:280px}
.vw-q .lp{width:18px;height:18px;margin-top:1px}
.vw-st{flex:1;min-height:28px;width:0;border-left:2px dashed var(--navy)}
.vw-pl{flex:none;display:flex;align-items:flex-end;justify-content:center;min-height:0;height:124px;padding:0}
.vw-i{height:124px;width:auto}
.vw-g{align-self:stretch;border-top:4px solid var(--navy);margin-top:-2px;padding:16px 14px 0;text-align:center}
.vw-g h3{padding:0;border:0;background:none;font-size:var(--fs-5);line-height:1.2;color:var(--navy)}
.vw-u{border:0;padding:0;margin-top:4px;font-size:var(--fs-2);font-weight:600;color:var(--zacht);overflow-wrap:anywhere}
@media (max-width:1100px){
 .vw-l{row-gap:40px !important}
}
@media (max-width:640px){
 .vw-l{row-gap:0 !important;margin-top:24px;border-top:1.5px solid var(--lijn)}
 .vw-k{display:grid;grid-template-columns:64px minmax(0,1fr);grid-template-areas:"pl g" "pl q";column-gap:16px;row-gap:8px;align-items:start;padding:18px 0;border-bottom:1.5px solid var(--lijn)}
 .vw-st{display:none}
 .vw-pl{grid-area:pl;height:auto;align-self:center}
 .vw-i{height:auto;width:64px}
 .vw-g{grid-area:g;border:0;margin:0;padding:0;text-align:left}
 .vw-g h3{font-size:var(--fs-4)}
 .vw-q{grid-area:q;margin:0;max-width:none;font-size:var(--fs-2);padding:10px 12px;border-width:1.5px}
 .vw-k .vw-i{display:block}
}

/* m4-3d klikdoelen >= 44px */
.skip{min-height:44px;display:inline-flex;align-items:center}
.merk{min-height:44px}
.h4-lnk,.lnk{min-height:44px;display:inline-flex;align-items:center}
.vt nav.vt-nav a{min-height:44px}
.vt-c a{display:inline-flex;align-items:center;min-height:44px}
.vt-c{align-items:center}

/* m4-3g hero: de wortels blijven binnen de herosectie (niet meer over de grens van 'Zo werkt het') */
@media (min-width:901px){
 .h4{padding-bottom:calc(var(--bw) * 1.4906 * .2 + 16px)}
 
}
@media (max-width:900px){.h4{padding-bottom:calc(var(--bw) * .3 + 20px)}}

/* ==== m6 (19-10): kleine pitch-toevoegingen; rustig, binnen de bestaande huisstijl ==== */
.m6-v{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

/* m6-1 hero: drie geruststellingen onder de knoppen */
.h4-z{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 26px;color:var(--h4-sub);font-size:var(--fs-2);font-weight:600;line-height:1.4}
.h4-z li{display:flex;align-items:center;gap:8px}
.h4-z .m6-v{color:var(--or)}
@media (prefers-reduced-motion:no-preference){html.intro .h4-z{animation:h4-op .6s cubic-bezier(.2,.7,.2,1) .38s backwards}}

/* m6-2 werkt met: rustige woordmerken in de koele strook links van de wortels */
.h4{position:relative}
.m6-wm-w{position:absolute;left:0;right:0;bottom:calc(var(--bw) * 1.4906 * .2 * .42);pointer-events:none}
@media (max-width:900px){
 .h4{padding-bottom:28px}
 .m6-wm-w{position:static;padding-top:calc(var(--bw) * .3 + 20px)}
}

/* m6-3 contact: persoonlijke booking-CTA (plek voor een echte persoon later) + kop boven de stappen */
.m6-bk{margin-top:24px;display:grid;grid-template-columns:76px minmax(0,1fr);gap:18px;align-items:start;background:var(--wit);border-top:6px solid var(--or);padding:20px 20px 22px;box-shadow:0 2px 10px rgba(20,49,138,.08)}
.m6-bk-f{width:76px;height:76px;border-radius:50%;background:var(--koel);display:grid;place-items:center;overflow:hidden}
.m6-bk-i{width:50px;height:auto}
.m6-bk-k{margin:0;font-weight:800;font-size:var(--fs-4);line-height:1.35;color:var(--navy);text-wrap:pretty}
.m6-bk-l{margin:12px 0 6px;font-size:var(--fs-2);font-weight:600;color:var(--grijs)}
.m6-bk-v{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.m6-bk-v li{display:flex;gap:8px;align-items:flex-start;font-size:var(--fs-2);line-height:1.45;color:var(--navy)}
.m6-bk-v .m6-v{color:var(--or);margin-top:2px}
.m6-sk{margin:32px 0 0;font-size:var(--fs-4);font-weight:800;color:var(--navy);letter-spacing:-.01em}
@media (max-width:900px){
 .m6-bk{grid-template-columns:64px minmax(0,1fr);gap:14px;padding:18px 16px 20px}
 .m6-bk-f{width:64px;height:64px}
 .m6-bk-i{width:42px}
}
.cf-n{text-wrap:pretty}

/* m6-4 prijzen: geruststelling onder 'Kies Managed' */
.m6-nb{margin:10px 0 0;font-size:var(--fs-1);font-weight:600;color:var(--grijs)}
@media (max-width:900px){.pz-mt .m6-nb{grid-column:1 / -1;grid-row:7;text-align:center}}

/* m6-6 footer: geen tweede contactblok, maar twee rustige vervolglinks */
.vt-m>.m6-vb{max-width:none;margin:16px 0 0;display:flex;flex-wrap:wrap;gap:4px 28px}
.m6-vb a{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-weight:800;font-size:var(--fs-2);color:var(--wit);text-decoration:none}
.m6-vb a:hover{color:var(--op-navy)}
.m6-vb .pijl{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* m6-7 vragen: geen balans-regelbreuk ('Moet ik / zelf teksten schrijven?') */

/* ==== m7a (19-10): één geknipte iconenset (asset-set/, twee flare-bladen in dezelfde stijl) ====
   Elke <img class="ik"> draagt --iw (breedte in eenheden) en --pb (transparante marge onder het zichtbare deel).
   Per groep zet de CSS de eenheid --u: gelijke optische maat (stappen, FAQ, contact) of gelijke schaal (planten). */
.ik{display:block;flex:none;height:auto;max-width:none;max-height:none;width:calc(var(--iw) * var(--u));margin-bottom:calc(var(--pb) * var(--u) * -1)}

/* Prijzen: Start en Groei op dezelfde schaal (gelijke grondhoop), Managed groter */
.pz-kp{--u:170px}
.pz-mi{--u:430px}
.pz-mi .pz-mim{width:calc(var(--iw) * var(--u));max-width:none;max-height:none}
@media (max-width:1240px){.pz-kp{--u:150px}.pz-mi{--u:380px}}
@media (max-width:1100px){.pz-mi{--u:360px}}
@media (max-width:640px){.pz-kp{--u:120px}.pz-mi{--u:204px}}
@media (max-width:380px){.pz-mi{--u:180px}}

.m6-bk-f{--u:46px}
.m6-bk-f .m6-bk-i{margin-bottom:0}
@media (max-width:900px){.m6-bk-f{--u:38px}}


/* ==== m7b (19-10): navigatie, één knoppenfamilie, hovers en micro-interacties ====
   Alle beweging: transform/opacity (en individuele translate/rotate), hoogstens 250 ms, alleen bij prefers-reduced-motion: no-preference.
   Kleur- en vormwissels (hover, focus, actief) gelden ook zonder beweging. */
:root{--or-rand:#C9671B;--kh:72px;--m7b-e:cubic-bezier(.2,.7,.2,1)}

/* ---------- 1. kop ---------- */
.kop{background:rgba(255,255,255,.94);border-bottom:0;box-shadow:0 1px 0 rgba(20,49,138,.07),0 10px 28px -16px rgba(20,49,138,.35);
 transition:background-color .25s,box-shadow .25s,color .25s,translate .25s var(--m7b-e)}
.kop:not(.vast):not(.open){box-shadow:0 1px 0 rgba(255,255,255,0),0 10px 28px -16px rgba(20,49,138,0)}
.kop.weg{translate:0 -100%}
.kop-in{display:flex;align-items:center;gap:24px;height:72px}
.kop .merk{flex:none}
.kop nav{flex:1;display:flex;align-items:center;gap:0;margin:0}
.kop-l{list-style:none;margin:0 auto;padding:0;display:flex;align-items:center;gap:6px}
.kop-a{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 14px;text-decoration:none;font-weight:700;font-size:var(--fs-3);color:var(--navy);border-radius:var(--r-pil);transition:color .2s,background-color .2s}
/* stengel met blaadje: groeit van links bij hover/focus, staat vol bij de actieve sectie */
.kop-a:after{content:"";position:absolute;left:14px;right:14px;bottom:6px;height:2px;border-radius:2px;background:var(--or);transform:scaleX(0);transform-origin:0 50%;transition:transform .22s var(--m7b-e)}
.kop-a:before{content:"";position:absolute;right:7px;bottom:6px;width:9px;height:9px;background:var(--or);border-radius:0 80% 0 80%;transform:scale(0) rotate(-25deg);transform-origin:0 100%;transition:transform .2s var(--m7b-e) .06s}
.kop-a:is(:hover,.aan):after{transform:scaleX(1)}
.kop-a.aan:before{transform:scale(1) rotate(0)}
.kop-a:hover{color:var(--blauw)}
.kop-a.aan{color:var(--navy)}
.kop:not(.vast):not(.open) .kop-a{color:var(--wit)}
.kop:not(.vast):not(.open) .kop-a:hover{color:#C9DCFC}
.kop:not(.vast):not(.open) .kop-a.aan{color:var(--wit)}
.kop nav .kop-kn{flex:none;margin-left:auto}
@media (min-width:1101px){.kop-in{position:relative}.kop-l{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}}
/* logo-blad leesbaar op navy: lichte papieren ondergrond achter het geknipte blaadje (Openstaand m1) */
.kop-dek{display:none}
@media (max-width:1240px){.kop-l{gap:0}}
@media (max-width:1100px){.kop nav .kop-kn{margin-left:0}}

@media (max-width:1100px){.kop-a{padding:0 11px}.kop-a:after{left:11px;right:11px}.kop-a:before{right:4px}}

/* ---------- 2. knoppenfamilie: pil van papier (harde onderrand), pijl in een geknipt blaadje dat bij hover doorschuift ---------- */
.knop{position:relative;gap:14px;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s,translate .2s var(--m7b-e)}
.knop:hover{transform:none}
.knop:has(.kn-p){padding-right:10px}
.knop.groot:has(.kn-p){padding:12px 12px 12px 30px}
.kn-p{position:relative;flex:none;display:inline-grid;place-items:center;width:34px;height:34px;overflow:hidden;border-radius:50% 50% 50% 6px;background:var(--navy);color:var(--wit);
 transition:background-color .2s,color .2s,border-radius .22s var(--m7b-e),scale .22s var(--m7b-e)}
.knop.groot .kn-p{width:40px;height:40px}
.kn-a{grid-area:1/1;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;transition:translate .22s var(--m7b-e)}
.knop.groot .kn-a{width:20px;height:20px}
.kn-b{translate:-170% 0}
/* primair: vol oranje, navy tekst, papieren onderrand */
.knop.or{background:var(--or);color:var(--navy);box-shadow:0 3px 0 var(--or-rand),0 10px 22px -10px rgba(6,14,60,.45)}
.knop.or:hover{background:#FFA24C;box-shadow:0 5px 0 var(--or-rand),0 14px 26px -10px rgba(6,14,60,.5)}
.knop.or:active{background:var(--or-d);box-shadow:0 1px 0 var(--or-rand),0 4px 10px -6px rgba(6,14,60,.4)}
/* outline: navy rand op licht, wit op navy; blaadje oranje met navy pijl */
.knop.rand{background:var(--wit);border-color:var(--navy);color:var(--navy);box-shadow:0 3px 0 var(--lb)}
.knop.rand .kn-p{background:var(--or);color:var(--navy)}
.knop.rand:hover{background:var(--lb2);box-shadow:0 5px 0 var(--lb)}
.knop.rand:active{box-shadow:0 1px 0 var(--lb)}
.knop.rand.wit,.kop:not(.vast):not(.open) nav .knop.rand{background:transparent;border-color:var(--wit);color:var(--wit);box-shadow:0 3px 0 rgba(4,12,52,.45)}
.knop.rand.wit:hover,.kop:not(.vast):not(.open) nav .knop.rand:hover{background:var(--wit);color:var(--navy);box-shadow:0 5px 0 rgba(4,12,52,.45)}
.knop.rand.wit:active,.kop:not(.vast):not(.open) nav .knop.rand:active{box-shadow:0 1px 0 rgba(4,12,52,.45)}
.kop nav .knop{min-height:48px;padding:6px 7px 6px 20px;font-size:var(--fs-3);font-weight:800;gap:12px}
.kop nav .kn-p{width:32px;height:32px}
.kop nav .kn-a{width:17px;height:17px}
/* m8: focus = de ene oranje ring (m8.css); geen eigen knopring meer */
.knop:hover .kn-p{border-radius:50% 50% 50% 14px}
@media (prefers-reduced-motion:no-preference){
 .knop:hover{translate:0 -2px}
 .knop:active{translate:0 2px;transition-duration:.06s}
 .knop:hover .kn-p{scale:1.08}
 .knop:hover .kn-a{translate:170% 0}
 .knop:hover .kn-b{translate:0 0}
}

/* ---------- 3. links: onderstreep die als een stengel uitgroeit ---------- */
.lnk,.h4-lnk,.m6-vb a,.vt nav.vt-nav a,.vt-c a{text-decoration:none;background:linear-gradient(var(--or),var(--or)) 0 100%/0 2px no-repeat;transition:background-size .25s var(--m7b-e),color .2s}
.lnk{border-bottom:0;background:linear-gradient(var(--or),var(--or)) 0 100%/0 2px no-repeat,linear-gradient(currentColor,currentColor) 0 100%/100% 2px no-repeat}
.lnk:hover{background-size:100% 2px,100% 2px;color:var(--navy)}
.h4-lnk:hover,.m6-vb a:hover,.vt nav.vt-nav a:hover,.vt-c a:hover{background-size:100% 2px;text-decoration:none}
.h4-lnk:hover{color:var(--wit)}
.vt nav.vt-nav a:hover,.m6-vb a:hover{color:var(--wit)}
.lnk .pijl,.h4-lnk .pijl,.m6-vb .pijl{transition:translate .2s var(--m7b-e)}
@media (prefers-reduced-motion:no-preference){
 .lnk:hover .pijl,.h4-lnk:hover .pijl,.m6-vb a:hover .pijl{translate:4px 0}
 .m6-vb a:hover .pijl.op{translate:0 -4px}
 .lnk:hover .pijl,.h4-lnk:hover .pijl{transform:none}
}

/* ---------- 4. micro-interacties per sectie (alleen beweging, dus alleen zonder reduced motion) ---------- */
@keyframes m7b-wiebel{0%{rotate:0deg}35%{rotate:-6deg}70%{rotate:3deg}100%{rotate:0deg}}
@keyframes m7b-klap{from{opacity:0;transform:translateY(-6px) scaleY(.92)}to{opacity:1;transform:none}}

/* formulier: rustige focusrand groeit vanuit het midden onder het veld */
.cf-v{position:relative}
.cf-v:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--blauw);transform:scaleX(0);transition:transform .22s var(--m7b-e)}
.cf-v input,.cf-v select{transition:border-color .2s,background-color .2s}
.cf-v input:focus,.cf-v select:focus{box-shadow:none}
.cf-v > span{transition:color .2s}
#product .kt{transition:translate .2s var(--m7b-e),box-shadow .2s,border-color .2s}
.pz-m,.pz-k{transition:translate .22s var(--m7b-e),box-shadow .22s}
.h4-serp{transition:translate .22s var(--m7b-e),rotate .22s var(--m7b-e),box-shadow .22s}
.vw-q{transition:translate .2s var(--m7b-e),box-shadow .2s}
.vw-k:hover .vw-q{box-shadow:0 6px 0 var(--lb)}

@media (prefers-reduced-motion:no-preference){
 .vw-i{transform-origin:50% 100%}
 .vw-k:hover .vw-q{translate:0 -4px}
 .pz-m:hover{translate:0 -6px}
 .pz-k:hover{translate:0 -4px}
 .pz-mim,.pz-ki{transform-origin:50% 100%}
 
 
 
 
}

/* ---------- mobiel menu ---------- */
@media (max-width:900px){
 .kop-in{height:66px;gap:12px}
 .menu-k{order:3;transition:background-color .2s,border-color .2s}
 .menu-k i{transition:transform .22s var(--m7b-e),background-color .2s}
 .kop.open .menu-k{background:var(--navy);border-color:var(--navy)}
 .kop.open .menu-k i{background:var(--wit)}
 .kop nav,.kop.open nav{display:flex;position:absolute;left:0;right:0;top:66px;z-index:2;flex-direction:column;align-items:stretch;margin:0;
  padding:8px 20px 28px;background:var(--wit);border-bottom:0;border-radius:0 0 24px 24px;box-shadow:0 24px 40px -18px rgba(6,14,60,.5);
  visibility:hidden;opacity:0;transform:translateY(-10px);transition:opacity .22s var(--m7b-e),transform .22s var(--m7b-e),visibility 0s .22s}
 .kop.open nav{visibility:visible;opacity:1;transform:none;transition:opacity .22s var(--m7b-e),transform .22s var(--m7b-e),visibility 0s}
 .kop-l{flex-direction:column;align-items:stretch;gap:0;margin:0}
 .kop-l li{border-bottom:1.5px solid var(--lijn)}
 .kop .kop-a,.kop:not(.vast):not(.open) .kop-a{display:flex;min-height:60px;padding:0 4px;font-size:var(--fs-6);font-weight:800;letter-spacing:-.02em;color:var(--navy);border-radius:0}
 .kop-a:after{left:4px;right:auto;width:44px;bottom:12px}
 .kop-a:before{right:auto;left:46px;bottom:12px}
 .kop nav .knop{margin:22px 0 0;min-height:56px;padding:8px 10px 8px 24px;font-size:var(--fs-4);justify-content:space-between}
 .kop.open nav .knop.rand{background:var(--wit);border-color:var(--navy);color:var(--navy)}
 .kop.open{background:var(--wit);backdrop-filter:none;-webkit-backdrop-filter:none}
 .kop-dek{display:block;position:fixed;left:0;right:0;top:66px;bottom:0;z-index:1;background:rgba(6,14,60,.42);opacity:0;visibility:hidden;transition:opacity .22s,visibility 0s .22s}
 .kop.open .kop-dek{opacity:1;visibility:visible;transition:opacity .22s,visibility 0s}
 html.menu-open body{overflow:hidden}
}
@media (max-width:900px) and (prefers-reduced-motion:no-preference){
 .kop-l li,.kop nav .knop{opacity:0;translate:0 -6px;transition:opacity .2s,translate .2s var(--m7b-e)}
 .kop.open .kop-l li,.kop.open nav .knop{opacity:1;translate:0 0;transition-delay:calc(var(--i, 0) * 35ms + 40ms)}
}
@media (max-width:640px){.h4 .knop.or{justify-content:space-between}}
@media (prefers-reduced-motion:reduce){.kop.weg{translate:none}}
@media (min-width:901px) and (max-width:1040px){
 .kop-in.wrap{padding:0 28px;gap:16px}
 .kop .merk{font-size:var(--fs-7)}.kop .merk .mk{height:40px}
 .kop nav .kop-a{padding:0 9px;font-size:var(--fs-2)}.kop-a:after{left:9px;right:9px}.kop-a:before{right:2px}
 .kop nav .knop{padding-left:16px;font-size:var(--fs-2);gap:10px}
}/* ==== m7c (19-10): indeling + restpunten pitchversie ==== */

/* legenda koppelt de tekstkolom aan de kolommen van het bord (zelfde kleuren) */

#product .k-kop{gap:6px}
#product .k-kop b{white-space:nowrap}
@media (min-width:1241px){
 #product .zb{width:140px}
 #product .k-kop{padding:7px 8px}
 #product .k-kop span{padding:0 7px}
}

#product .wb{box-shadow:10px 10px 0 var(--lb2)}
#product .wb.raam{border-color:rgba(27,52,130,.55)}
@media (max-width:640px){#product .wb{box-shadow:6px 6px 0 var(--lb2)}}

/* m7c-2 prijzen: Start en Groei lichter vel met dunne lichte rand; Managed blijft het witte hoofdvel */
.pz-k{background:#3051B6;box-shadow:inset 0 0 0 1.5px rgba(213,227,250,.30);border-top-color:var(--lb)}

/* m7c-4 mobiele hero: bloem in het eerste scherm; geruststellingen verhuizen naar onder de wortels */
.h4-z2{display:none}
@media (max-width:900px){
 .h4-t .h4-z{display:none}
 .h4-in{padding-top:calc(var(--kh) + 28px)}
 .h4-b{margin-top:24px}
 .h4-z2{display:flex;justify-content:center;color:var(--navy);margin:0 0 28px;gap:8px 20px}
 .h4-z2 li{font-size:var(--fs-2)}
}
@media (max-width:640px){
 .h4-intro{margin:16px 0 24px}
 .h4-k{gap:6px 28px}
 .h4-z2{flex-direction:column;align-items:center}
}

/* m7c-5 intro: subkop en knoppen sneller, bloem staat er meteen (onthulling start al halverwege), kaartjes rustiger */
@media (prefers-reduced-motion:no-preference){
 html.intro .h4 h1 span{animation-duration:.5s}
 html.intro .h4 h1 span:nth-child(2){animation-delay:.05s}
 html.intro .h4 h1 span:nth-child(3){animation-delay:.1s}
 html.intro .h4-intro{animation:h4-op .45s cubic-bezier(.2,.7,.2,1) .08s backwards}
 html.intro .h4-k{animation:h4-op .45s cubic-bezier(.2,.7,.2,1) .16s backwards}
 html.intro .h4-z{animation:h4-op .45s cubic-bezier(.2,.7,.2,1) .22s backwards}
 html.intro .h4-bloem{animation:m7c-groei .75s cubic-bezier(.25,.7,.25,1) 0s backwards}
 html.intro .h4-serp1{animation-delay:.6s}
 html.intro .h4-serp2{animation-delay:.72s}
 html.intro .h4-serp3{animation-delay:.84s}
}
@keyframes m7c-groei{from{clip-path:inset(45% 0 0 0);opacity:.4}to{clip-path:inset(0 0 0 0);opacity:1}}
/* kaartjes: één kolom rechts van de stengel, in de open plekken tussen de rechterbladeren, gelijke kleine draaiing */
.h4-serp1{--rot:-3deg;left:58%;top:27%}
.h4-serp2{--rot:-2deg;left:63%;top:50%}
.h4-serp3{--rot:-3deg;left:60%;top:69%}
@media (max-width:1100px){.h4-serp1{left:52%}.h4-serp2{left:57%}.h4-serp3{left:54%}}
@media (max-width:900px){.h4-serp1{left:42%;top:27%}.h4-serp2{left:47%;top:54%}}
/* ==== m8 (19-10): één illustratietaal, één focusstijl, gelijke hovers, betrouwbare nav, papierdetails, levend werkbord ====
   Zie ledger.md, ronde m8. Beweging alleen transform/opacity en alleen bij prefers-reduced-motion: no-preference. */
:root{--focus:#E06A12}   /* donkerder merkoranje: >= 3:1 op wit (3,4) en op navy (3,4) */
html{scroll-padding-top:96px}

/* ---------- m8-2 één focusstijl: 3 px oranje ring, 2 px los, volgt de radius van het element ---------- */
:focus-visible,.kop-a:focus-visible,.knop:focus-visible,.menu-k:focus-visible,.merk:focus-visible,.cf-v input:focus-visible,.cf-v select:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.cf-v input,.cf-v select{border-radius:6px 6px 0 0}
.lnk,.h4-lnk,.m6-vb a,.vt nav.vt-nav a,.vt-c a,.merk{border-radius:4px}
/* voor wie: de link is de kop, de ring om de hele kaart */
.vw-a:focus-visible{outline:0}
.vw-k:has(.vw-a:focus-visible){outline:3px solid var(--focus);outline-offset:2px;border-radius:var(--r-m)}

/* ---------- m8-4 nav: geknipte onderstreep (gerafelde bovenkant) met een echt geknipt blaadje aan het eind ---------- */
.kop-a:after{height:4px;bottom:6px;border-radius:0;
 clip-path:polygon(0 35%,6% 0,14% 30%,23% 8%,33% 38%,44% 4%,55% 32%,66% 6%,77% 36%,88% 2%,100% 28%,100% 100%,0 100%)}
.kop-a:before{width:15px;height:15px;right:4px;bottom:7px;background:url(/asset-zaai/bl-or.webp) center/contain no-repeat;border-radius:0;
 transform:scale(0) rotate(-20deg);transform-origin:0 100%}
.kop-a.aan:before{transform:scale(1) rotate(-8deg)}
.kop-kn.aan .kn-p{border-radius:50% 50% 50% 14px}
.kop.vast .kop-kn.aan,.kop.open .kop-kn.aan{background:var(--lb2)}
@media (max-width:1100px){.kop-a:before{right:1px}}
@media (max-width:900px){.kop-a:before{right:auto;left:44px;bottom:13px}}

/* kaarten die optillen zijn klikbaar: één link per kaart */
.m8-kaart{cursor:pointer}
.vw-k{position:relative;cursor:pointer}
.vw-a{display:inline-flex;align-items:center;min-height:44px;margin:-10px 0;color:inherit;text-decoration:none;background:linear-gradient(var(--or),var(--or)) 0 calc(100% - 9px)/0 2px no-repeat;transition:background-size .25s var(--m7b-e,ease),color .2s}
.vw-a:after{content:"";position:absolute;inset:0;z-index:2}
.vw-k:hover .vw-a{background-size:100% 2px;color:var(--blauw)}

/* ---------- m8-1 voor wie: geknipte zaailingen (asset-zaai), één schaal, grond op de lijn ---------- */
.vw-pl{--zu:128px;height:auto;min-height:calc(1.04 * var(--zu))}
.vw-i{height:calc(var(--zh) * var(--zu));width:auto;max-width:none;margin-bottom:calc(-1 * var(--zb) * var(--zu))}
@media (max-width:640px){
 .vw-pl{--zu:74px;min-height:0}
 .vw-i,.vw-k .vw-i{height:calc(var(--zh) * var(--zu));width:auto;margin-bottom:0}
}

/* ---------- m8-5 papierknipdetails, ingetogen: tape op werkbord en Managed, geknipt blaadje op Start/Groei ---------- */

.pz-k{position:relative}

/* ---------- m8-6 levend werkbord ---------- */
@media (min-width:901px){#product .bord{align-items:stretch}}
#product .kt-doel{visibility:hidden}
#product .bord.m8-klaar .kt-doel{visibility:visible;animation:m8-in .3s ease-out}
#product .bord.m8-klaar .kt-vlieg{visibility:hidden}
#product .kt-vlieg{position:relative;z-index:5;box-shadow:0 14px 28px -10px rgba(20,49,138,.45);transition:transform .74s cubic-bezier(.3,.7,.2,1)}
#product .kt-vlieg .wb-acts{opacity:0;transition:opacity .2s}
#product .kt-schuif{transition:transform .32s cubic-bezier(.2,.7,.2,1)}
#product .wb-acts i{transition:background-color .15s}
#product .wb-ok.m8-druk{animation:m8-druk .34s ease-in-out}
@keyframes m8-druk{0%{scale:1}40%{scale:.86;background-color:var(--or-d)}100%{scale:1}}
@keyframes m8-in{from{opacity:.4}to{opacity:1}}
@media (prefers-reduced-motion:reduce){#product .kt-vlieg,#product .kt-schuif{transition:none}#product .wb-ok.m8-druk,#product .bord.m8-klaar .kt-doel{animation:none}}
@media (max-width:900px){#product .bord.m8-klaar .k-keur li.kt-schuif{display:block;transform:none !important}}
/* m9b (19-10): plankeuze in het formulier, naar plan-ontwerp/plan-b (flare). Rustig en zakelijk: Managed breed en standaard gekozen,
   Start/Groei kleiner eronder, 'Weet ik nog niet' als regel. Echte radio's in één groep; gekozen = rand + stip in donker merkoranje (3,4:1) + lichte tint */
.cf-r.pk{margin-top:30px}
.pk legend{margin-bottom:2px}
.pk-g{display:grid;gap:12px}
.pk-o{position:relative;display:block}
.pk-o input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.pk-b{display:grid;grid-template-columns:24px minmax(0,1fr) auto;column-gap:16px;align-items:center;min-height:64px;padding:14px 20px;border:1.5px solid var(--lijn-d);border-radius:var(--r-m);background:var(--wit);cursor:pointer;transition:border-color .15s,background-color .15s,box-shadow .15s}
.pk-r{width:22px;height:22px;border-radius:50%;border:2px solid var(--grijs);background:var(--wit);display:grid;place-items:center;transition:border-color .15s}
.pk-r:after{content:"";width:10px;height:10px;border-radius:50%;background:#E06A12;transform:scale(0);transition:transform .15s}
.pk-t{display:block;min-width:0}
.pk-n{display:block;font-weight:800;font-size:var(--fs-4);line-height:1.25;color:var(--navy)}
.pk-s{display:block;margin-top:2px;font-size:var(--fs-2);line-height:1.4;color:var(--zacht)}
.pk-lab{display:inline-block;margin-bottom:6px;background:var(--or);color:var(--navy);font-weight:800;font-size:var(--fs-1);line-height:1;padding:6px 11px;border-radius:var(--r-pil)}
.pk-p{display:flex;flex-direction:column;align-items:flex-end;text-align:right;white-space:nowrap}
.pk-p b{font-weight:800;font-size:var(--fs-5);line-height:1.15;color:var(--navy)}
.pk-m .pk-b{min-height:96px;padding:18px 22px}
.pk-m .pk-n{font-size:var(--fs-5)}
.pk-m .pk-p b{font-size:var(--fs-6)}
.pk-of{display:flex;align-items:center;gap:14px;margin:6px 0 0;font-size:var(--fs-2);font-weight:700;color:var(--zacht)}
.pk-of:before,.pk-of:after{content:"";flex:1;border-top:1.5px solid var(--lijn)}
.pk-zd{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pk-k .pk-b{align-items:start}
.pk-k .pk-r{margin-top:1px}
.pk-w .pk-b{border-color:transparent;background:transparent;min-height:48px;padding:10px 20px}
.pk-w .pk-t{display:flex;flex-wrap:wrap;column-gap:6px;align-items:baseline}
.pk-w .pk-n{font-size:var(--fs-3);font-weight:700}
.pk-w .pk-n:after{content:","}
.pk-w .pk-s{margin:0}
/* staten */
.pk-o:hover .pk-b{border-color:var(--navy)}
.pk-o:hover .pk-r{border-color:var(--navy)}
.pk-w:hover .pk-b{border-color:var(--lijn-d);background:var(--lb2)}
.pk-o input:checked+.pk-b{border-color:#E06A12;background:#FFF5EC;box-shadow:inset 0 0 0 1px #E06A12}
.pk-o input:checked+.pk-b .pk-r{border-color:#E06A12}
.pk-o input:checked+.pk-b .pk-r:after{transform:scale(1)}
.pk-o input:focus-visible+.pk-b{outline:3px solid var(--focus,#E06A12);outline-offset:3px}
.cf-r.pk.fout .pk-b{border-color:var(--fout)}
@media (prefers-reduced-motion:reduce){.pk-b,.pk-r,.pk-r:after{transition:none}}
@media (max-width:640px){
 .pk-zd{grid-template-columns:1fr}
 .pk-b{grid-template-columns:22px minmax(0,1fr);column-gap:14px;padding:14px 16px;align-items:start}
 .pk-r{margin-top:1px}
 .pk-m .pk-p{grid-column:2;flex-direction:row;align-items:baseline;gap:6px;margin-top:6px}
 .pk-k .pk-b{grid-template-columns:22px minmax(0,1fr) auto}
 .pk-k .pk-p b{font-size:var(--fs-4)}
 .pk-w .pk-t{display:block}
 .pk-w .pk-n:after{content:none}
 .pk-m .pk-b{padding:16px}
 .pk-m .pk-r{margin-top:30px}
 .pk-w .pk-b{padding:10px 16px}
}
@media (max-width:400px){
 .pk-k .pk-b{grid-template-columns:22px minmax(0,1fr)}
 .pk-k .pk-p{grid-column:2;flex-direction:row;align-items:baseline;gap:6px;margin-top:4px}
}
/* ==== m9c (19-10): panelpunten na m9b. Zie ledger.md, ronde m9c.
   Beweging alleen transform/opacity/scale/rotate en alleen via JS bij prefers-reduced-motion: no-preference. */

/* m9c-1 verborgen kop: geen schaduw of rand die onder de bovenrand uitlekt */
.kop.weg,.kop.vast.weg{box-shadow:none;border-bottom:0}

/* m9c-2 formulierfouten: rand, labelkleur en een korte foutregel per veld */
.cf-v .cf-f{display:flex;align-items:flex-start;gap:6px;margin:7px 0 0;font-weight:600;font-size:var(--fs-1);line-height:1.35;color:var(--fout)}
.cf-v .cf-f[hidden]{display:none}
.cf-fi{width:16px;height:16px;flex:none;margin-top:1px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.cf-v.fout > span:first-child{color:var(--fout)}
.cf-v.fout input,.cf-v.fout select,.cf-v.fout input:is(:hover,:focus),.cf-v.fout select:is(:hover,:focus){border-bottom-color:var(--fout);border-bottom-width:2px;background-color:#FFF6F1}
.cf-ok.cf-ok-fout{color:var(--fout)}

/* m9c-3 werkbord: de vliegende kaart is een kopie zonder knoppen (maat van de doelplek) en blijft binnen het bord */
#product .bord{position:relative}
@media (min-width:901px){#product .bord{overflow:clip;overflow-clip-margin:6px}}
#product .kt-los .wb-acts{opacity:0;transition:opacity .2s}
#product .kt-vlieg{position:absolute;margin:0;z-index:5;background:var(--wit);border-color:var(--blauw);box-shadow:0 14px 28px -10px rgba(20,49,138,.45);
 transition:transform .74s cubic-bezier(.3,.7,.2,1);animation:m9c-kantel .74s ease-in-out}
@keyframes m9c-kantel{0%{rotate:0deg}45%{rotate:-2.5deg}100%{rotate:0deg}}
#product .k-n.m9c-tel{animation:m9c-tel .36s ease-out}
@keyframes m9c-tel{0%{scale:1}35%{scale:1.4}100%{scale:1}}
@media (prefers-reduced-motion:reduce){#product .kt-vlieg,#product .k-n.m9c-tel{animation:none;transition:none}}

/* m9c-5 voetlinks: dezelfde hover als de navlinks (kleur + geknipte oranje onderstreep onder de tekst) */
.vt nav.vt-nav a,.vt-c a,.m6-vb a{position:relative;background:none}
.vt nav.vt-nav a{width:fit-content}
.vt nav.vt-nav a:after,.vt-c a:after,.m6-vb a:after{content:"";position:absolute;left:0;right:0;bottom:6px;height:4px;background:var(--or);
 clip-path:polygon(0 35%,6% 0,14% 30%,23% 8%,33% 38%,44% 4%,55% 32%,66% 6%,77% 36%,88% 2%,100% 28%,100% 100%,0 100%);
 transform:scaleX(0);transform-origin:0 50%;transition:transform .22s var(--m7b-e)}
.vt nav.vt-nav a:hover:after,.vt-c a:hover:after,.m6-vb a:hover:after{transform:scaleX(1)}
.vt nav.vt-nav a:hover,.vt-c a:hover,.m6-vb a:hover{color:#C9DCFC;background:none}

/* ==== m10 (19-10, vaste regels Fabian A/B + panelpunten 1-5; zie ledger ronde m10) ==== */

/* m10-B geen schaduw onder iconen, logo of illustraties (ook niet onder de hero-kaartjes, de planningstrook, tape en etiket).
   Schaduw blijft alleen op het werkbord en de knoppen.
   Verwijderd bij de bron: .ik (m7), .m8-tape (m8), .etk-i en #planning .tl (bouw.py, m4), logo-gloed .mk (m7b), .h4-serp (m7c), hoverschaduw prijskaarten (m7b). */
.pz-m,.m6-bk{box-shadow:none}

/* m10-1 mobiele hero: vinkjes direct onder de knoppen (in het navy vlak), bloem kleiner zodat hij minder diep in de lichte band hangt */
@media (max-width:900px){
 .h4-t .h4-z{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin:20px 0 0;color:var(--h4-sub)}
 .h4-z2{display:none}
 .h4{--bw:min(272px,70vw)}
 .h4-b{margin-top:20px}
 .m6-wm-w{padding-top:calc(var(--bw) * .3 + 16px)}
}

/* m10-2 werkbord-zijbalk: 'Jouw bedrijf / Werkruimte' op twee regels */
#product .zb-wie b{white-space:nowrap}

/* m10-3 gekozen plan licht kort op na 'Kies …' */
.pk-o .pk-b.m10-licht{animation:m10-licht 1.1s ease-out}
@keyframes m10-licht{0%{box-shadow:0 0 0 0 rgba(250,149,58,0),inset 0 0 0 1px #E06A12}20%{box-shadow:0 0 0 8px rgba(250,149,58,.45),inset 0 0 0 1px #E06A12;background-color:#FFE6CF}100%{box-shadow:0 0 0 0 rgba(250,149,58,0),inset 0 0 0 1px #E06A12}}
.pk-o input:focus+.pk-b.m10-licht{outline:3px solid var(--focus,#E06A12);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.pk-o .pk-b.m10-licht{animation:none;outline:3px solid #E06A12;outline-offset:3px}}

/* m10-4 werkbord mobiel: de kaart gaat ook hier van 'Wacht op jou' naar Live; Goedkeuren/Aanpassen zijn voorbeeld, geen cursor */
#product .wb-acts i{cursor:default}
#product .bord.m10-mob.m8-klaar .k-live li:first-child{display:none}
#product .bord.m10-mob.m8-klaar .k-live li.kt-doel{display:block;margin-top:7px}
#product .k ul.m10-krimp{overflow:hidden;transition:height .32s cubic-bezier(.2,.7,.2,1)}

/* ===== m11 (19-10-2026): mobiele tijdlijn, één schaduwtaal, geen half blad, zijbalk-binnenruimte ===== */

/* m11-2 één schaduwtaal: alleen harde papieren randen (geen blur). Uitzondering: de vliegende werkbordkaart (subtiel, alleen tijdens het verhuizen). */
.knop.or{box-shadow:0 3px 0 var(--or-rand)}
.knop.or:hover{box-shadow:0 5px 0 var(--or-rand)}
.knop.or:active{box-shadow:0 1px 0 var(--or-rand)}
.h4-serp{box-shadow:none;border:1px solid var(--lb)}
.kop{box-shadow:0 1px 0 rgba(20,49,138,.12)}
.kop:not(.vast):not(.open){box-shadow:0 1px 0 rgba(20,49,138,0)}
.kop.weg,.kop.vast.weg{box-shadow:none}
@media (max-width:900px){
 .kop nav,.kop.open nav{box-shadow:0 1px 0 var(--lijn),0 6px 0 var(--lb)}
}
#product .kt-vlieg{box-shadow:0 10px 18px -12px rgba(20,49,138,.35)}
/* m11-4 werkbord-zijbalk: 'Jouw bedrijf' kreeg 5 px tot de rand; avatar 28 px en geen extra zijpadding, nu 10/11 px zoals de menu-items */
#product .zb-wie{padding:28px 0 0}
#product .zb-wie i{width:28px;height:28px}
/* ===== m12 (20-10): keuze Fabian uit eigen-vorm/ — faq-a, voorbeeld-a, planning-b. Geen schaduwen, hover alleen op klikbare elementen ===== */

/* ---------- Voorbeeld (voorbeeld-a): papieren labels in de marges, lijn met stip naar het blok ---------- */
#voorbeeld .zv12{display:block}
#voorbeeld .zv-kop{margin:0 auto;padding:0;text-align:center;max-width:760px;align-self:auto}
#voorbeeld .zv12-st{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,640px) minmax(0,1fr);grid-template-rows:repeat(4,minmax(0,1fr));column-gap:64px;margin-top:88px}
#voorbeeld .zv12-l{display:contents;list-style:none}
#voorbeeld .zv-b{grid-column:2;grid-row:1 / span 4;margin:0;position:relative}
#voorbeeld .zv12-lab{align-self:center;max-width:300px;padding:20px 26px 22px;background:var(--lb);color:var(--navy);
 clip-path:polygon(0 7%,3% 0,58% 3%,97% 0,100% 12%,98% 55%,100% 92%,95% 100%,40% 97%,4% 100%,0 88%,2% 45%)}
#voorbeeld .zv12-lab b{display:block;font-weight:800;font-size:var(--fs-4);line-height:1.25}
#voorbeeld .zv12-lab span{display:block;margin-top:6px;font-size:var(--fs-2);line-height:1.45;color:var(--zacht)}
#voorbeeld .zl0{grid-column:1;grid-row:1;justify-self:end}
#voorbeeld .zl1{grid-column:3;grid-row:2;justify-self:start;background:var(--lb2)}
#voorbeeld .zl2{grid-column:1;grid-row:3;justify-self:end;background:var(--lb2)}
#voorbeeld .zl3{grid-column:3;grid-row:4;justify-self:start}
#voorbeeld .zv12-lijn{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:2}
#voorbeeld .zv12-lijn path{fill:none;stroke:var(--navy);stroke-width:1.6}
#voorbeeld .zv12-lijn circle{fill:var(--navy)}
#voorbeeld .zp-hero>div,#voorbeeld .zp-hero>div{padding-left:0}
@media (max-width:1300px){#voorbeeld .zv12-st{grid-template-columns:minmax(0,1fr) minmax(0,560px) minmax(0,1fr);column-gap:44px}
 #voorbeeld .zv12-lab{padding:18px 20px 20px}}
@media (max-width:1100px){
 #voorbeeld .zv-kop{text-align:left;margin:0;max-width:none}
 #voorbeeld .zv12-st{display:flex;flex-direction:column;margin-top:0}
 #voorbeeld .zv-b{order:1;margin-top:96px !important}
 #voorbeeld .zv12-l{order:2}
 #voorbeeld .zv12-lijn{display:none}
 #voorbeeld .zv-b{max-width:720px}
 #voorbeeld .zv12-l{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:36px 0 0;padding:0;max-width:720px}
 #voorbeeld .zv12-lab{max-width:none;justify-self:stretch;align-self:stretch}
 #voorbeeld .zl0,#voorbeeld .zl1,#voorbeeld .zl2,#voorbeeld .zl3{grid-column:auto;grid-row:auto}
}
@media (max-width:640px){#voorbeeld .zv12-l{grid-template-columns:minmax(0,1fr);gap:12px;margin-top:28px}}


/* ===== m13 (20-10-2026): FAQ-compositie, duidelijke hovers op wat klikbaar is, mobiel menu volledig dekkend ===== */

/* tekstlinks op donker: wit → licht oranje, oranje onderstreep, pijl 4 px */
.h4-lnk:hover,.vt nav.vt-nav a:hover,.vt-c a:hover,.m6-vb a:hover{color:#FFC48F}
/* tekstlinks op licht: navy → blauw, oranje onderstreep over de navy lijn */
.lnk:hover{color:var(--blauw)}
/* logo's zijn links naar boven: kleur */
.merk:hover{color:var(--blauw)}
.kop:not(.vast):not(.open) .merk:hover,.merk.wit:hover{color:#C9DCFC}
.skip{text-decoration:none}.skip:hover,.skip:focus:hover{text-decoration:underline}
/* mobiele menuknop */
@media (max-width:900px){
 .menu-k:hover{background:var(--lb2)}
 .kop.open .menu-k:hover{background:#0E2468}
}
/* Voor wie: tegel tilt mee, zoekvak krijgt een blauwe rand, titel blauw met onderstreep */
.vw-k .vw-q{transition:border-color .2s,box-shadow .2s,translate .2s var(--m7b-e)}
.vw-k:hover .vw-q{border-color:var(--blauw)}

/* Plankeuze in het formulier: ook het gekozen vak reageert */
.pk-o:hover .pk-n{color:var(--blauw)}

/* Prijskaarten: duidelijke ruststand (plat) en hoverstand (licht omhoog, harde rand eronder, vulling verandert) */
.pz .knop,.pz .knop:hover,.pz .knop:active{transform:none}
.pz .knop.or{background:var(--or);box-shadow:none;translate:0 0}
.pz .knop.or:hover{background:#FFAC5E;box-shadow:0 3px 0 var(--or-rand)}
.pz .knop.rand.wit{background:transparent;border-color:var(--wit);color:var(--wit);box-shadow:none;translate:0 0}
.pz .knop.rand.wit:hover{background:var(--wit);color:var(--navy);box-shadow:0 3px 0 rgba(4,12,52,.45)}
.pz .knop:active{box-shadow:none}
@media (prefers-reduced-motion:no-preference){
 .pz .knop:hover{translate:0 -2px}
 .pz .knop:active{translate:0 0}
}

/* ---------- m13-3 mobiel menu: paneel loopt door tot de onderrand van het scherm, volledig wit, geen half afgesneden inhoud ---------- */
@media (max-width:900px){
 .kop nav,.kop.open nav{height:calc(100vh - 66px);height:calc(100dvh - 66px);overflow-y:auto;overscroll-behavior:contain;
  border-radius:0;box-shadow:0 1px 0 var(--lijn) inset;justify-content:flex-start}
 .kop-dek{background:var(--wit)}
}
/* ==== m14a (20-10): structuur en ritme. Zo werkt het + Jij keurt = één sectie met het werkbord als bewijs; voorbeeld navy in het midden;
   rustpunt zonder beeld; FAQ als gewone accordion; minder franje. Zie ledger 'Ronde m14a'. ==== */

/* -- 1. Zo werkt het: kop + vier compacte stappen + het werkbord over de volle breedte -- */
#hoe.hw{padding:48px 0 var(--sec-b)}
.hw-kop{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:40px;align-items:end}
.hw-kop .intro{margin:14px 0 0}
.hw-kop .lnk{grid-column:2;grid-row:1 / span 2;justify-self:end;display:inline-flex;align-items:center;gap:10px;min-height:44px;white-space:nowrap}
.hw-kop .lnk .pijl{width:22px;height:22px;flex:none;stroke-width:2.4}
.hw-l{list-style:none;margin:44px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:2px solid var(--navy)}
.hw-s{padding:0 32px 0 0}
.hw-n{display:grid;place-items:center;width:34px;height:34px;margin-top:-18px;border-radius:50%;background:var(--navy);color:var(--wit);font:800 var(--fs-2)/1 var(--f)}
.hw-s b{display:block;margin-top:14px;font-size:var(--fs-5);font-weight:800;line-height:1.25;color:var(--navy)}
.hw-s span{display:block;margin-top:6px;max-width:28ch;font-size:var(--fs-2);line-height:1.45;color:var(--zacht)}
.hw-keur .hw-n{background:var(--or);color:var(--navy)}
#hoe .wb-b{position:relative;margin-top:48px}
/* keur-moment: notitie onder de kaarten in 'Wacht op jou' */
#product .hw-noot{display:flex;gap:10px;align-items:flex-start;margin:14px 0 0;padding:12px 14px;border:2px solid var(--or);border-radius:10px;background:#FFF5EC;color:var(--navy);font-size:var(--fs-2);line-height:1.4}
#product .hw-noot i{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--or);color:var(--navy);font:800 var(--fs-1)/1 var(--f)}
#product .hw-noot b{font-weight:800}
@media (min-width:901px){#product .k-keur{display:flex;flex-direction:column}#product .k-keur .hw-noot{margin-top:auto}}   /* notitie altijd onderaan de kolom, ook als de kaart weg is */
@media (max-width:1100px){
 .hw-l{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px;row-gap:40px;border-top:0}
 .hw-s{border-top:2px solid var(--navy);padding:0}
}
@media (max-width:900px){
 #hoe.hw{padding:40px 0 var(--sec-b)}
 .hw-kop{display:block}
 .hw-kop .lnk{margin-top:16px}
 .hw-l{grid-template-columns:minmax(0,1fr);row-gap:22px;border-top:0;margin-top:32px}
 .hw-s{display:grid;grid-template-columns:34px minmax(0,1fr);column-gap:16px;padding:0;border-top:0}
 .hw-n{margin:0;grid-row:1 / span 2}
 .hw-s b{margin-top:4px;font-size:var(--fs-4)}
 .hw-s span{grid-column:2;max-width:none}
 #hoe .wb-b{margin-top:36px}
}

/* -- 2. Voorbeeld: navy vlak in het midden, mockup groot, geen tak. Scheurrand boven (navy-rand) en onder -- */
#voorbeeld.zv{position:relative;padding:calc(var(--sec-t) + 24px) 0 calc(var(--sec-b) + 24px)}
#voorbeeld:after{content:"";position:absolute;left:0;right:0;height:var(--scheur-h);bottom:calc(1px - var(--scheur-h));z-index:2;pointer-events:none;background:var(--band);
 -webkit-mask:url(/asset-schoon/scheur-onder-a.webp) center bottom/100% 100% no-repeat;mask:url(/asset-schoon/scheur-onder-a.webp) center bottom/100% 100% no-repeat}
#voorbeeld .zv-kop .intro{color:var(--op-navy)}
#voorbeeld .raam,#voorbeeld .raam h3{color:var(--navy)}
#voorbeeld .zv12-lab,#voorbeeld .zl1,#voorbeeld .zl2{clip-path:none;border-radius:var(--r-m);background:var(--lb2)}
#voorbeeld .zv12-lijn path{stroke:var(--or);stroke-width:2}
#voorbeeld .zv12-lijn circle{fill:var(--or)}
@media (max-width:900px){#voorbeeld:after{-webkit-mask-size:1100px 100%;mask-size:1100px 100%}}

/* -- 3. Rustpunt: alleen een sterke kop en een korte tekst, veel lucht -- */
.rp{padding:calc(var(--sec-t) + 64px) 0 calc(var(--sec-b) + 64px);background:var(--wit)}
.rp-in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:64px;align-items:end}
.rp h2{font-size:var(--fs-h1);line-height:1.04;font-weight:900}
.rp h2 span{display:block}
.rp h2 span+span{color:var(--blauw)}
.rp p{margin:0;max-width:30em;font-size:var(--fs-5);line-height:1.5;color:var(--zacht)}
@media (max-width:900px){
 .rp{padding:calc(var(--sec-t) + 32px) 0 calc(var(--sec-b) + 32px)}
 .rp-in{display:block}
 .rp p{margin-top:20px;font-size:var(--fs-4)}
}

/* -- 4. FAQ: gewone accordion (details/summary), eerste open, antwoord direct onder de vraag -- */
#vragen.faq{padding:calc(var(--sec-t) + 24px) 0 var(--sec-b)}
.fq14{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:64px;align-items:start}
.fq14-lnk{margin:20px 0 0;font-size:var(--fs-3);color:var(--zacht)}
.fq14-lnk a{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:800;color:var(--navy);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:5px;transition:color .15s}
.fq14-lnk .pijl{width:20px;height:20px;flex:none;stroke:var(--or);stroke-width:2.4;transition:transform .15s}
.fq14-lnk a:hover{color:var(--blauw);text-decoration-color:var(--or)}
.fq14-lnk a:hover .pijl{transform:translateX(4px)}
.fq14-l{border-top:1px solid var(--lijn-d)}
.fq14-i{border-bottom:1px solid var(--lijn-d)}
.fq14-i summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:44px;padding:22px 4px;cursor:pointer;
 font-size:var(--fs-5);font-weight:800;line-height:1.3;color:var(--navy);border-radius:6px;transition:color .15s}
.fq14-i summary::-webkit-details-marker{display:none}
.fq14-i summary:hover{color:var(--blauw)}
.fq14-i summary:focus-visible{outline:3px solid #E06A12;outline-offset:2px}
.fq14-c{flex:none;width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.fq14-i[open] .fq14-c{transform:rotate(180deg)}
.fq14-a p{margin:0;max-width:40em;padding:0 56px 26px 4px;font-size:var(--fs-4);line-height:1.55;color:var(--zacht)}
@media (max-width:900px){
 .fq14{display:block}
 .fq14-l{margin-top:28px}
 .fq14-i summary{padding:18px 2px;font-size:var(--fs-4)}
 .fq14-a p{padding:0 2px 22px;font-size:var(--fs-3)}
}
@media (prefers-reduced-motion:reduce){.fq14-i summary,.fq14-c,.fq14-lnk a,.fq14-lnk .pijl{transition:none}}

/* -- 5. Contrast en maat (gemeten in m14a): tab 'voorbeeld' navy op lichtblauw; ondersteunende tekst minstens 16 px -- */
.h4-serp em{color:var(--navy)}
.m6-nb{font-size:var(--fs-2);color:var(--zacht)}
.vt-c{font-size:var(--fs-2)}
/* ==== m14b (20-10): leesbaarheid en kleine punten. Prijzen in één oogopslag, hero-kaartjes binnen de inhoudsbreedte,
   rustige 'Werkt met'-regel, contactstappen genummerd zoals 'Zo werkt het'. Zie ledger 'Ronde m14b'. ==== */

/* -- 1. Prijzen: één grote regel per blok; bij Start/Groei is het pagina-aantal het grote getal -- */
.pz-m h3{margin-top:16px;font-size:var(--fs-6);font-weight:800;line-height:1.1;color:var(--blauw)}
.pz-w{margin-top:6px;max-width:13em;font-size:clamp(32px,2.9vw,42px);font-weight:900;line-height:1.05;letter-spacing:-.03em;color:var(--navy);text-wrap:balance}
.pz-m .pz-pr b{font-size:clamp(28px,2.4vw,34px)}
.pz-zl{margin:0 0 18px;font-size:clamp(24px,2.1vw,30px);font-weight:900;line-height:1.12;letter-spacing:-.02em;color:var(--wit);text-wrap:balance}
.pz-k,.pz-k h3,.pz-k p{color:var(--wit)}
.pz-k h3{font-size:var(--fs-5);font-weight:800;line-height:1.1}
.pz-pg{margin:6px 0 0;font-size:var(--fs-4);font-weight:600;line-height:1.05}
.pz-pg b{margin-right:6px;font-size:clamp(34px,3vw,44px);font-weight:900;letter-spacing:-.03em;white-space:nowrap}
.pz-k .pz-pr{margin:10px 0 20px;font-size:var(--fs-3);font-weight:600}
.pz-k .pz-pr b{font-size:var(--fs-5);font-weight:800}
@media (max-width:900px){
 .pz-w{grid-column:1;grid-row:3;font-size:clamp(26px,7vw,32px)}
 .pz-zl{margin-top:8px}
}
@media (max-width:640px){.pz-pg b{display:block;margin:0 0 2px}}

/* -- 2. Ondersteunende tekst: hero-geruststellingen en intro lichter (8,6:1), plankeuze-hulptekst 16 px -- */
.h4{--h4-sub:#C9DCFC}
.pk-h{margin:0 0 14px;font-size:var(--fs-2);color:var(--zacht)}
.pk-p small{font-size:var(--fs-2);color:var(--zacht)}

/* -- 3. Hero-kaartjes: rechts verankerd, zodat ze binnen de inhoudsbreedte blijven (de bloem zelf mag tot 36 px voorbij de rand) -- */
@media (min-width:901px){
 .h4-serp1{left:auto;right:60px}
 .h4-serp2{left:auto;right:48px}
 .h4-serp3{left:auto;right:56px}
}
@media (max-width:900px){
 .h4-serp1{left:auto;right:5%}
 .h4-serp2{left:auto;right:0}
}

/* -- 4. Werkt met: kleine woordmerken in één grijstint met een dunne scheiding -- */
.m6-wm{margin:0;max-width:calc(100% - var(--bw) - 24px);display:flex;flex-wrap:wrap;align-items:center;row-gap:8px;color:var(--grijs)}
.m6-wl{margin-right:20px;font-size:var(--fs-2);font-weight:500;color:var(--grijs)}
.m6-cms{padding:0 16px;font-size:var(--fs-3);font-weight:700;line-height:1.2;color:var(--grijs)}
.m6-cms+.m6-cms{border-left:1px solid var(--lijn-d)}
.m6-wl+.m6-cms{padding-left:0}
@media (max-width:900px){
 .m6-wm{max-width:none;justify-content:center;column-gap:22px}
 .m6-wl{flex-basis:100%;margin:0 0 2px;text-align:center}
 .m6-cms,.m6-cms+.m6-cms{padding:0;border-left:0}   /* smal: geen scheidingslijn, want die kan aan het begin van een regel belanden */
}

/* -- 5. Contact: drie genummerde stappen aan een dunne lijn, zelfde stip als 'Zo werkt het' -- */
#contact .ct-s{list-style:none;margin:18px 0 0;padding:0;position:relative;display:grid;gap:20px}
#contact .ct-s:before{content:"";position:absolute;left:16px;top:17px;bottom:17px;border-left:2px solid var(--navy)}
#contact .ct-s li{position:relative;display:grid;grid-template-columns:34px minmax(0,1fr);gap:16px;align-items:center}
#contact .ct-si{position:relative;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--navy);color:var(--wit);font:800 var(--fs-2)/1 var(--f)}
#contact .ct-s b{font-size:var(--fs-4);font-weight:800;line-height:1.3;color:var(--navy);text-wrap:pretty}

/* m14c (20-10, Fabian: eigen cookiebanner + CTA-pop-up). Eén laag voor beide. Harde papierrand (offset zonder blur), geen schaduw-blur. */
:root{--m14c-e:cubic-bezier(.2,.8,.2,1)}

/* ---- cookiebanner: niet-modale kaart linksonder; ≤640 over de volle breedte onderaan ---- */
.ck{position:fixed;left:24px;bottom:24px;z-index:70;width:min(440px,calc(100vw - 48px));max-height:calc(100dvh - 48px);overflow:auto;
 background:var(--wit);color:var(--navy);border:2px solid var(--navy);border-radius:var(--r-l);box-shadow:0 6px 0 var(--navy);padding:22px 24px 20px}
.ck[hidden]{display:none}
.ck-kop{font-size:var(--fs-5);font-weight:900;line-height:1.15;letter-spacing:-.02em}
.ck-t{margin-top:8px;font-size:var(--fs-2);line-height:1.5;color:var(--zacht)}
.ck-kn{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.ck .ck-b{display:flex;align-items:center;justify-content:center;min-height:48px;padding:10px 16px;border:2px solid var(--navy);border-radius:var(--r-pil);
 background:var(--wit);color:var(--navy);font:800 var(--fs-2)/1 var(--f);cursor:pointer;transition:background-color .2s,box-shadow .2s,translate .2s var(--m14c-e)}
.ck .ck-b:hover{background:var(--lb2);box-shadow:0 3px 0 var(--navy);translate:0 -2px}
.ck-in{display:flex;align-items:center;gap:8px;min-height:44px;margin-top:6px;padding:0 2px;border:0;background:none;color:var(--navy);
 font:700 var(--fs-2)/1 var(--f);cursor:pointer;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
.ck-in svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:rotate .2s}
.ck-in[aria-expanded="true"] svg{rotate:180deg}
.ck-in:hover{color:var(--blauw);text-decoration-color:var(--or)}
.ck-set{margin:12px 0 0;padding:0;border:0;min-width:0}
.ck-set[hidden]{display:none}
.ck-set legend{padding:0;font-size:var(--fs-2);font-weight:800}
.ck-c{display:grid;grid-template-columns:1fr auto;gap:2px 16px;align-items:center;padding:12px 0;border-bottom:1px solid var(--lijn)}
.ck-c:first-of-type{border-top:1px solid var(--lijn);margin-top:8px}
.ck-c b{font-size:var(--fs-2);font-weight:800}
.ck-c small{grid-column:1;font-size:var(--fs-2);line-height:1.4;color:var(--grijs)}
/* schakelaar: echte checkbox (role=switch), 52 × 30, het hele label is klikbaar */
.ck-c label{grid-column:2;grid-row:1 / span 2;display:flex;align-items:center;justify-content:flex-end;min-width:56px;min-height:44px;cursor:pointer}
.ck-c input{appearance:none;-webkit-appearance:none;margin:0;width:52px;height:30px;border-radius:var(--r-pil);border:2px solid var(--navy);background:var(--wit);
 position:relative;cursor:pointer;transition:background-color .2s}
.ck-c input:before{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--navy);transition:translate .2s var(--m14c-e)}
.ck-c input:checked{background:var(--or)}
.ck-c input:checked:before{translate:22px 0}
.ck-c input:disabled{cursor:default;background:var(--lb)}
.ck-c input:disabled:before{translate:22px 0;background:var(--grijs)}
.ck-c label:hover input:not(:disabled){background:var(--lb2)}
.ck-c label:hover input:checked:not(:disabled){background:#FFAC5E}
.ck-c input:focus-visible{outline:3px solid var(--focus,#E06A12);outline-offset:2px}
.ck .ck-op{width:100%;margin-top:14px;background:var(--navy);color:var(--wit)}
.ck .ck-op:hover{background:var(--blauw);border-color:var(--blauw);box-shadow:0 3px 0 var(--navy)}
html.ck-open{scroll-padding-bottom:calc(var(--ck-h,0px) + 32px)}
html.ck-open footer.vt{padding-bottom:calc(var(--ck-h,0px) + 40px)}   /* onderaan de pagina valt niets weg onder de banner */
@media (prefers-reduced-motion:no-preference){.ck.ck-kom{animation:m14c-op .32s var(--m14c-e) both}}
@media (max-width:640px){
 .ck{left:12px;right:12px;bottom:12px;width:auto;max-height:calc(100dvh - 24px);padding:18px 18px 16px}
}

/* ---- voet: 'Cookie-instellingen' (knop in de stijl van de voetlinks) ---- */
.vt-c .vt-ck{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0;border:0;border-radius:4px;background:none;color:var(--wit);font:inherit;cursor:pointer}
.vt-c .vt-ck:after{content:"";position:absolute;left:0;right:0;bottom:6px;height:4px;background:var(--or);
 clip-path:polygon(0 35%,6% 0,14% 30%,23% 8%,33% 38%,44% 4%,55% 32%,66% 6%,77% 36%,88% 2%,100% 28%,100% 100%,0 100%);transform:scaleX(0);transform-origin:0 50%;transition:transform .22s var(--m14c-e)}
.vt-c .vt-ck:hover{color:#FFC48F}
.vt-c .vt-ck:hover:after{transform:scaleX(1)}

/* ---- CTA-pop-up: modaal, kaart in het midden; ≤640 bottom sheet ---- */
html.pu-open{overflow:hidden}
.pu{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:24px}
.pu[hidden]{display:none}
.pu-dek{position:absolute;inset:0;background:rgba(14,30,84,.55)}
.pu-k{position:relative;display:grid;grid-template-columns:150px minmax(0,1fr);width:min(620px,100%);max-height:calc(100dvh - 48px);overflow:auto;
 background:var(--wit);color:var(--navy);border:2px solid var(--navy);border-top:8px solid var(--or);border-radius:var(--r-s) var(--r-s) var(--r-l) var(--r-l);box-shadow:0 8px 0 var(--navy)}
.pu-k:focus,.pu-k:focus-visible{outline:0}   /* de kaart zelf krijgt alleen programmatisch focus (zodat de kop wordt voorgelezen); Tab gaat naar de knoppen */
.pu-b{display:flex;align-items:flex-end;justify-content:center;background:var(--koel);border-right:1px solid var(--lijn);padding:28px 14px 0;border-radius:0 0 0 var(--r-l)}
.pu-b img{width:104px;height:auto}
.pu-i{padding:34px 34px 30px 32px}
.pu-i h2{font-size:clamp(26px,2.6vw,32px);line-height:1.08;letter-spacing:-.03em;padding-right:36px}
.pu-i p{margin-top:12px;font-size:var(--fs-4);line-height:1.5;color:var(--zacht)}
.pu-kn{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;margin-top:24px}
.pu-kn .knop{margin:0}
.pu-nee{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;border:0;background:none;color:var(--navy);font:700 var(--fs-2)/1 var(--f);cursor:pointer;
 text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
.pu-nee:hover{color:var(--blauw);text-decoration-color:var(--or)}
.pu-x{position:absolute;top:10px;right:10px;z-index:1;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:none;color:var(--navy);cursor:pointer;transition:background-color .2s}
.pu-x svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round}
.pu-x:hover{background:var(--lb2)}
@media (prefers-reduced-motion:no-preference){
 .pu.pu-kom .pu-dek{animation:m14c-in .24s ease-out both}
 .pu.pu-kom .pu-k{animation:m14c-op .34s var(--m14c-e) both}
}
@media (max-width:640px){
 /* bottom sheet; het plantje groeit uit de bovenrand van het vel (zoals de bloem uit het hero-vlak) */
 .pu{place-items:end stretch;padding:0}
 .pu-k{display:block;width:100%;overflow:visible;border-width:0;border-top:8px solid var(--or);border-radius:var(--r-l) var(--r-l) 0 0;box-shadow:none}
 .pu-b{position:absolute;right:72px;bottom:calc(100% + 8px);padding:0;background:none;border:0;border-radius:0}
 .pu-b img{width:46px;margin-bottom:-6px}
 .pu-i{max-height:calc(88dvh - 8px);overflow:auto;padding:30px 20px calc(22px + env(safe-area-inset-bottom))}
 .pu-i h2{padding-right:44px;font-size:26px}
 .pu-kn{flex-direction:column;align-items:stretch;gap:4px;margin-top:20px}
 .pu-kn .knop{justify-content:space-between}
 .pu-nee{justify-content:center}
 .pu-x{top:6px;right:6px}
}
@media (max-width:640px) and (prefers-reduced-motion:no-preference){.pu.pu-kom .pu-k{animation-name:m14c-vel}}
@keyframes m14c-op{from{opacity:0;translate:0 14px}}
@keyframes m14c-in{from{opacity:0}}
@keyframes m14c-vel{from{translate:0 100%}}
/* m16: echte logo uit Figma (oranje tegel met wit teken), vervangt het geknipte blaadje; geen schaduw */
.merk{display:inline-flex;align-items:center;gap:10px}
.merk .mk{width:34px;height:34px;margin:0;flex:none;border-radius:0;filter:none;box-shadow:none}
.merk.wit .mk{width:38px;height:38px}
@media (max-width:640px){.kop .merk .mk{width:30px;height:30px}.merk.wit .mk{width:34px;height:34px}}
/* ==== m20 (22-10, Martijn): het werkbord is een schermafbeelding in een appvenster, geen HTML meer.
   "Omdat dit selecteerbaar is, lijkt het alsof je er mee kan interacteren." Zelfde venster als de voorbeeldpagina (zb-bar). ==== */
#product .wb-shot{margin:0}
#product .wb-raam{overflow:hidden;background:var(--koel)}
#product .wb-raam picture,#product .wb-raam img{display:block;width:100%;height:auto}
#product .wb-shot,#voorbeeld .zv-br,.h4-serp{-webkit-user-select:none;user-select:none;cursor:default}
#product .wb-shot img{-webkit-user-drag:none}
#product .wb-shot figcaption{margin-top:14px;font-size:var(--fs-2);line-height:1.4;color:var(--zacht)}
@media (max-width:760px){
 #product .wb-shot{max-width:440px;margin:0 auto}
}
/* ==== m22 (22-10, Mies): 'Waarom we weten dat het werkt'. Nabouw van bewijs-ontwerp/bewijs-c (flare) op een lichte band;
   per resultaat één eigen databeeld (balk 95 %, eerst/nu 1:3, volle week). Geen hovers: niets hier is klikbaar. ==== */
.bw{padding:var(--sec-t) 0 var(--sec-b)}
.bw-kop .intro{margin:14px 0 0;max-width:34em}
.bw-l{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.bw-k{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r-l);padding:28px 28px 30px;display:flex;flex-direction:column}
.bw-b{height:118px;display:flex;align-items:flex-end}
.bw-balk{display:block;width:100%;height:22px;border-radius:var(--r-pil);background:var(--lb);overflow:hidden;align-self:center}
.bw-balk i{display:block;height:100%;border-radius:var(--r-pil);background:var(--or)}
.bw-groei{display:flex;align-items:flex-end;gap:14px}
.bw-groei>span{display:flex;flex-direction:column;align-items:center;gap:6px}
.bw-groei i{display:block;width:56px;border-radius:8px 8px 0 0;background:var(--lb)}
.bw-groei i.o{background:var(--or)}
.bw-groei small{font-size:var(--fs-2);line-height:1;color:var(--zacht)}
.bw-ag{display:block;width:100%}
.bw-ag-d,.bw-ag-v{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.bw-ag-d b{font-size:var(--fs-2);font-weight:700;color:var(--zacht);text-align:center;line-height:1;margin-bottom:8px}
.bw-ag-v i{display:block;height:15px;border-radius:4px;background:var(--lb)}
.bw-ag-v i.b{background:var(--blauw-m)}
.bw-ag-v i.o{background:var(--or)}
.bw-g{margin:26px 0 0;font-size:clamp(44px,4.4vw,64px);line-height:1;font-weight:900;letter-spacing:-.03em;color:var(--navy)}
.bw-w{margin:auto 0 0;padding-top:18px;font-size:var(--fs-4);line-height:1.25;font-weight:800;color:var(--navy)}
.bw-w:before{content:"";display:block;height:1px;background:var(--lijn);margin-bottom:14px}
.bw-t{margin:10px 0 0;font-size:var(--fs-4);line-height:1.45;color:var(--zacht)}
@media (max-width:900px){
 .bw-l{grid-template-columns:minmax(0,1fr);gap:16px;margin-top:32px}
 .bw-k{padding:22px 22px 24px}
 .bw-b{height:auto;min-height:60px}
 .bw-groei i{width:48px}
 .bw-g{margin-top:20px}
}
/* m22e (23-10): schakelaar jaarlijks/maandelijks boven de prijzen, in de taal van .knop.rand.wit (witte rand, pil, schaduwrand) */
.pz-per{display:inline-flex;gap:4px;margin-top:22px;padding:4px;border:2px solid var(--wit);border-radius:var(--r-pil);box-shadow:0 3px 0 rgba(4,12,52,.45)}
.pz-pk{min-height:44px;padding:10px 22px;border:0;border-radius:var(--r-pil);background:transparent;color:var(--wit);font:700 var(--fs-3)/1 var(--f);cursor:pointer}
.pz-pk:hover{background:rgba(255,255,255,.1)}
.pz-pk[aria-pressed=true]{background:var(--wit);color:var(--navy)}
.pz-pk:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.pk-per{display:block}   /* periode op een eigen regel, anders duwt hij de plantekst van Start/Groei naar twee regels */

/* m22j (26-10): voettekst met vier kolommen (Product, Vergelijken, SEO-bureau per stad, Contact) */
@media (min-width:1101px){.vt-in{grid-template-columns:minmax(0,4fr) minmax(0,8fr) auto} .vt nav.vt-nav{grid-template-columns:repeat(4,minmax(0,1fr))}}


/* ===== m22h subpagina's (sub.py) ===== */
.sp-held{--kh:72px;position:relative;margin-top:calc(-1 * var(--kh));padding:calc(var(--kh) + 48px) 0 72px;background:var(--band);color:var(--wit)}
.sp-held h1{color:var(--wit);font-size:clamp(40px,5.4vw,76px);max-width:15ch}
.sp-kruim{display:flex;flex-wrap:wrap;gap:4px 8px;margin:0 0 22px;padding:0;list-style:none;font-size:var(--fs-2);font-weight:600;color:#B9CDF5}
.sp-kruim li+li:before{content:"/";margin-right:8px;opacity:.6}
.sp-kruim a{color:inherit;text-underline-offset:3px}
.sp-intro{max-width:62ch;margin-top:22px;font-size:var(--fs-5);line-height:1.5;color:#DCE6FA}
.sp-kn{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:34px}
.sp-kn .lnk{color:var(--wit)}
.sp-body{padding:64px 0 32px}
.sp-kol{max-width:800px}
.sp-kort{padding:24px 28px;border-radius:0 14px 14px 0;border-left:5px solid var(--or);background:var(--lb2);font-size:var(--fs-4);line-height:1.55;color:var(--navy)}
.sp-kort b{display:block;margin-bottom:6px;font-size:var(--fs-2);font-weight:800;color:var(--navy)}
.sp-sec{margin-top:60px}
.sp-sec h2{font-size:clamp(28px,3.2vw,42px);line-height:1.05;margin-bottom:20px}
.sp-sec h3{font-size:var(--fs-5);line-height:1.2;margin-bottom:8px}
.sp-sec p{max-width:68ch;color:var(--navy)}
.sp-sec > p + p,.sp-sec > p + div,.sp-sec > div + p,.sp-sec > ol + p,.sp-sec > ul + p{margin-top:16px}
.sp-sec a:not(.knop):not(.card-link),.sp-kort a,.sp-faq a{color:var(--blauw);text-decoration:underline;text-underline-offset:3px;font-weight:700}
.sp-lijst{display:grid;gap:12px;margin:0;padding-left:1.25em;max-width:68ch}
.sp-lijst li::marker{color:var(--or)}
.sp-stappen{list-style:none;counter-reset:st;display:grid;gap:12px;margin:0;padding:0;max-width:68ch}
.sp-stappen li{counter-increment:st;display:grid;grid-template-columns:44px 1fr;gap:4px 16px;align-items:start;padding:18px 20px;border-radius:14px;background:var(--koel)}
.sp-stappen li:before{content:counter(st);grid-row:span 2;display:grid;place-items:center;width:44px;height:44px;border-radius:50% 50% 50% 8px;background:var(--navy);color:var(--wit);font-weight:900;font-size:var(--fs-4)}
.sp-stappen b{font-size:var(--fs-4);line-height:1.3}
.sp-stappen span{color:var(--zacht)}
.sp-kaarten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;max-width:1040px;width:calc(100vw - 120px)}
.sp-kaarten.twee{grid-template-columns:repeat(2,minmax(0,1fr));max-width:800px}
.sp-kaart{min-width:0;padding:24px;border-radius:16px;background:var(--koel);border:1.5px solid var(--lijn)}
.sp-kaart p{color:var(--zacht)}
.sp-tabel{max-width:100%;overflow-x:auto;margin:6px 0 0}
.sp-tabel table{width:100%;min-width:520px;border-collapse:collapse;font-size:var(--fs-3)}
.sp-tabel th,.sp-tabel td{padding:13px 14px;border-bottom:1.5px solid var(--lijn);text-align:left;vertical-align:top}
.sp-tabel thead th{font-size:var(--fs-2);font-weight:800;color:var(--grijs);border-bottom-color:var(--navy)}
.sp-tabel .n{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.sp-onder{margin-top:10px;font-size:var(--fs-2);color:var(--grijs)}
.sp-faq{margin-top:64px}
.sp-faq h2{font-size:clamp(28px,3.2vw,42px);margin-bottom:8px}
.sp-bron{margin-top:40px;padding-top:18px;border-top:1.5px solid var(--lijn);font-size:var(--fs-2);color:var(--grijs)}
.sp-bron ul{margin:8px 0 0;padding-left:1.2em;display:grid;gap:4px}
.sp-bron a{color:var(--grijs)}
.sp-verder{padding:56px 0 72px;background:var(--koel)}
.sp-verder h2{font-size:clamp(26px,2.6vw,34px);margin-bottom:22px}
.sp-verder ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;max-width:1040px}
.sp-verder a{display:grid;gap:6px;height:100%;padding:22px 24px;border-radius:16px;background:var(--wit);border:1.5px solid var(--lijn);text-decoration:none;color:var(--navy);transition:border-color .2s,translate .2s}
.sp-verder a:hover{border-color:var(--navy);translate:0 -2px}
.sp-verder a b{font-size:var(--fs-4);line-height:1.25}
.sp-verder a span{font-size:var(--fs-2);color:var(--zacht)}
.sp-cta{padding:72px 0 88px;background:var(--wit)}
.sp-cta-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px}
.sp-cta h2{font-size:clamp(30px,3.4vw,48px);max-width:20ch}
.sp-cta p{margin-top:12px;max-width:52ch;color:var(--zacht)}
@media (max-width:1100px){.sp-kaarten{width:auto}}
@media (max-width:900px){
 .sp-held{padding:calc(var(--kh) + 32px) 0 56px}
 .sp-kaarten,.sp-kaarten.twee{grid-template-columns:minmax(0,1fr)}
 .sp-body{padding-top:44px}
 .sp-sec{margin-top:48px}
}
@media (prefers-reduced-motion:reduce){.sp-verder a{transition:none}}

/* ===== m22j stadspagina's (stad.py) ===== */
.sl-een{margin-top:40px;padding:28px;border-radius:18px;background:var(--band);color:var(--wit);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px 32px;align-items:start}
.sl-een h2,.sl-een h3{color:var(--wit)}
.sl-een .sl-nr{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50% 50% 50% 8px;background:var(--or);color:var(--navy);font-weight:900;font-size:var(--fs-4);margin-bottom:12px}
.sl-een p{color:#DCE6FA;max-width:62ch}
.sl-een ul{margin:14px 0 0;padding-left:1.2em;display:grid;gap:6px;color:#DCE6FA}
.sl-een .sl-prijs{font-weight:800;color:var(--wit)}
.sl-een .knop{align-self:end}
.sl-lijst{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:16px;counter-reset:sl 1}
.sl-b{counter-increment:sl;position:relative;display:grid;gap:6px;padding:24px 24px 24px 90px;border-radius:16px;border:1.5px solid var(--lijn);background:var(--wit)}
.sl-b:before{content:counter(sl);position:absolute;left:24px;top:22px;display:grid;place-items:center;width:44px;height:44px;border-radius:50% 50% 50% 8px;background:var(--lb2);color:var(--navy);font-weight:900;font-size:var(--fs-4)}
.sl-b h3{font-size:var(--fs-6);line-height:1.15}
.sl-b .sl-adres{font-size:var(--fs-2);color:var(--grijs);font-weight:600}
.sl-b p{color:var(--zacht);max-width:66ch}
.sl-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.sl-tags span{font-size:var(--fs-1);font-weight:700;padding:4px 10px;border-radius:999px;background:var(--koel);color:var(--navy)}
.sl-feit{font-size:var(--fs-2);color:var(--zacht)}
.sl-feit a{color:var(--grijs);font-weight:600}
.sl-b .card-link{justify-self:start;margin-top:6px;font-weight:800;color:var(--blauw);text-decoration:none;border-bottom:2px solid currentColor;padding-bottom:2px}
.sl-data td:first-child{text-transform:capitalize}
@media (max-width:700px){.sl-een{grid-template-columns:minmax(0,1fr)} .sl-b{padding:20px} .sl-b:before{position:static;margin-bottom:4px}}