@font-face{
  font-family:'Archivo';font-style:normal;font-weight:400 800;font-stretch:100%;font-display:swap;
  src:url('/font/archivo-latin-var.woff2') format('woff2');
}

/* AI voor Food, scansite. Palet Fresh Forest Zen (18 september 2026), rood alleen voor knelpunten (19 september 2026). */
:root{
  --donker:#343E3D; --midden:#607466; --mint:#AEDCC0; --blad:#6FB894;
  --papier:#F5F9F6; --wit:#FFFFFF; --lijn:#D9DFDB; --haar:#EEF2EF; --grijs:#7C8A84;
  --rood:#B5483A; --neutraal:#B5B5B5; --opsight:#0791FF;
  --r-kaart:12px; --r-knop:9px; --r-vlak:14px;
  --maat:560px; --breed:1120px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{overflow-x:clip;max-width:100%}
body{margin:0;background:var(--papier);color:var(--donker);
  font-family:'Archivo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;min-height:100dvh}
h1,h2,h3{margin:0;line-height:1.12;font-weight:700;letter-spacing:-.02em;text-wrap:balance}
h1{font-size:clamp(28px,5.5vw,44px)}
h2{font-size:clamp(22px,5vw,30px)}
h3{font-size:18px}
p{margin:0;text-wrap:pretty}
a{color:inherit}
button{font:inherit;color:inherit}
img{display:block;max-width:100%}
:focus-visible{outline:3px solid var(--blad);outline-offset:3px;border-radius:6px}
.klein{font-size:14px;color:var(--grijs)}
.gedempt{color:var(--midden)}
.verborgen{display:none!important}
.label{font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:var(--grijs);font-weight:600}

/* ── kop en voortgang ────────────────────────── */
.kop{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--papier) 92%,transparent);backdrop-filter:blur(10px);
  display:flex;align-items:center;gap:12px;padding:14px 16px;min-height:56px}
.kop .merk{font-weight:700;font-size:16px;text-decoration:none;letter-spacing:-.01em}
.kop .merk span{color:var(--blad)}
.kop .terug{margin-left:auto;background:var(--wit);border:1.5px solid var(--lijn);padding:0 14px 0 8px;height:38px;cursor:pointer;display:inline-flex;align-items:center;gap:4px;font:inherit;font-size:15px;font-weight:600;color:var(--donker);border-radius:999px;transition:border-color .15s,background .15s,transform .15s}
.kop .terug svg{width:18px;height:18px;flex:none}
.kop .terug:hover{border-color:var(--midden);background:var(--haar)}
.kop .terug:active{transform:scale(.97)}
.kop .navlinks{margin-left:auto;display:flex;gap:22px;align-items:center;font-size:15px;color:var(--midden)}
.kop .navlinks a{text-decoration:none}
.balk{height:4px;background:var(--lijn);border-radius:999px;overflow:hidden;margin:0 16px}
.balk i{display:block;height:100%;background:var(--donker);border-radius:999px;transition:width .4s cubic-bezier(.2,.7,.3,1)}

main{max-width:var(--maat);margin:0 auto;padding:12px 16px 40px}
main.breed{max-width:var(--breed)}
main.vol{max-width:none;padding:0}
.scherm{animation:in .32s cubic-bezier(.2,.7,.3,1) both}
.scherm.van-rechts{animation-name:inRechts}
@keyframes in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes inRechts{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}

/* rustig binnenkomen bij scrollen */
.op{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.op.aan{opacity:1;transform:none}
.op.v2{transition-delay:.1s}.op.v3{transition-delay:.2s}.op.v4{transition-delay:.3s}
@media (prefers-reduced-motion:reduce){
  .scherm,.op{animation:none;opacity:1;transform:none;transition:none}
  *:not(.rg):not(.rg *):not(.pk-film):not(.pk-hfilm):not(.pk-volfilm){transition:none!important;animation:none!important}
}

.stapel{display:flex;flex-direction:column;gap:18px}
.rij{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* ── beeld ──────────────────────────────────── */
.beeld{border-radius:var(--r-vlak);overflow:hidden;background:var(--lijn);aspect-ratio:16/10}
.beeld img{width:100%;height:100%;object-fit:cover;object-position:var(--stand,center 30%)}
.beeld.laag{aspect-ratio:16/9}

/* ── knoppen ────────────────────────────────── */
.knop{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:12px 22px;border-radius:var(--r-knop);
  border:1px solid transparent;font-weight:600;font-size:17px;text-decoration:none;cursor:pointer;transition:background .15s,transform .06s}
.knop:active{transform:translateY(1px)}
.knop.hoofd{background:var(--donker);color:var(--wit)}
.knop.hoofd:hover{background:#2A3332}
.knop.tweede{background:var(--wit);color:var(--donker);border-color:var(--midden)}
.knop.tweede:hover{background:#F0F4F1}
.knop.groen{background:var(--blad);color:var(--wit)}
.knop.opsight{background:var(--wit);color:var(--donker);border:1px solid var(--donker)}
.knop.klein{min-height:40px;padding:8px 14px;font-size:15px}
.knop.breed{width:100%}
.knop[disabled]{opacity:.5;cursor:not-allowed}
.tekstknop{background:none;border:0;padding:0;color:var(--midden);font-weight:600;cursor:pointer;font-size:inherit}

/* ── vragen ─────────────────────────────────── */
.vraag{margin:8px 0 20px}
.vraag .teller{font-size:14px;color:var(--midden);margin:2px 0 10px;font-weight:600}
.antwoorden{display:flex;flex-direction:column;gap:10px}
.antwoord{display:flex;align-items:center;gap:12px;width:100%;text-align:left;min-height:56px;padding:14px 16px;background:var(--wit);
  border:1px solid var(--midden);border-radius:var(--r-knop);cursor:pointer;font-size:17px;line-height:1.35;transition:background .15s,border-color .15s,transform .12s}
.antwoord:hover{background:#F0F4F1}
.antwoord.aan{background:var(--mint);border-color:var(--donker);font-weight:600}
.antwoord .bol{flex:none;width:18px;height:18px;border-radius:50%;border:2px solid var(--midden);background:var(--wit);transition:background .15s,border-color .15s}
.antwoord.aan .bol{border-color:var(--donker);background:var(--donker);box-shadow:inset 0 0 0 3px var(--mint)}
.antwoord .hok{flex:none;width:22px;height:22px;border-radius:6px;border:2px solid var(--midden);background:var(--wit);display:grid;place-items:center;transition:background .15s,border-color .15s}
.antwoord.aan .hok{background:var(--donker);border-color:var(--donker);animation:pop .22s cubic-bezier(.3,1.6,.5,1)}
.antwoord.aan .hok::after{content:"";width:6px;height:11px;border:solid var(--wit);border-width:0 2.5px 2.5px 0;transform:translateY(-1px) rotate(45deg)}
.antwoord.vink2{min-height:50px;padding:11px 14px;font-size:16px}
@keyframes pop{0%{transform:scale(.8)}60%{transform:scale(1.12)}100%{transform:scale(1)}}

/* ── formulier ──────────────────────────────── */
label.veld{display:block}
label.veld>span{display:block;font-weight:600;font-size:14px;margin-bottom:6px}
select.sector{width:100%;min-height:52px;padding:12px 40px 12px 14px;font:inherit;font-size:17px;border:1px solid var(--midden);border-radius:var(--r-knop);background:var(--wit) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%23343E3D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center/16px;color:var(--donker);appearance:none;-webkit-appearance:none}
input[type=text],input[type=email]{width:100%;min-height:52px;padding:12px 14px;font:inherit;font-size:17px;border:1px solid var(--midden);border-radius:var(--r-knop);background:var(--wit);color:var(--donker)}
input.klein{min-height:42px;font-size:15px;padding:8px 12px;border-radius:8px}
input:focus{outline:3px solid var(--mint);outline-offset:0;border-color:var(--donker)}
.keuzes{display:flex;flex-wrap:wrap;gap:8px}
.keuze{min-height:44px;padding:9px 14px;border-radius:999px;border:1px solid var(--midden);background:var(--wit);cursor:pointer;font-size:15px}
.keuze.aan{background:var(--mint);border-color:var(--donker);font-weight:600}
.keuze.plus{min-height:38px;padding:7px 12px;font-size:13px}
.fout{color:var(--rood);font-size:15px;margin-top:6px}

/* uitnodigen: gekozen afdelingen */
.afdrij{display:flex;flex-direction:column;gap:8px;padding:12px 14px;border-radius:10px;background:var(--mint);border:1px solid var(--donker)}
.afdrij .top{display:flex;align-items:center;gap:10px}
.afdrij .top b{flex:1;font-size:15px}
.afdrij .top button{background:none;border:0;color:var(--midden);cursor:pointer;font-size:13px;padding:4px}
.afdrij .ico{width:26px;height:26px;flex:none}
.afdrij input{background:var(--wit)}

/* ── kaarten ────────────────────────────────── */
.kaart{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r-kaart);padding:20px}
.kaart.mint{background:var(--mint);border-color:var(--mint)}
.plek{border-color:var(--pk,var(--midden));display:flex;flex-direction:column;gap:6px}
.plek .kopje{display:flex;align-items:center;gap:8px}
.plek .kopje i{width:12px;height:12px;border-radius:50%;background:var(--pk,var(--midden))}
.plek h3{font-size:19px}
.plek p{font-size:15px;color:var(--midden)}
.plek .stap{color:var(--donker);border-top:1px solid var(--haar);padding-top:8px;margin-top:4px}
.waarschuwing{background:var(--wit);border-left:4px solid var(--blad);border-radius:var(--r-kaart);padding:14px 16px;font-size:15.5px}
.vinkcirkel{width:56px;height:56px;border-radius:50%;background:var(--blad);color:var(--wit);display:grid;place-items:center;font-size:26px;font-weight:700}
.vinkcirkel svg{width:26px;height:26px;stroke:var(--wit);stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40;animation:teken .5s .15s ease forwards}
@keyframes teken{to{stroke-dashoffset:0}}

/* ── status en lampjes ──────────────────────── */
.status{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;font-size:14px;color:var(--midden)}
.status i{width:10px;height:10px;border-radius:50%;background:var(--blad);display:inline-block}
.lampjes{display:grid;gap:8px}
@media (min-width:600px){.lampjes{grid-template-columns:1fr 1fr}}
@media (min-width:900px){.lampjes{grid-template-columns:1fr 1fr 1fr}}
.lamp{display:flex;align-items:center;gap:10px;background:var(--wit);border:1px solid var(--lijn);border-radius:10px;padding:10px 12px;font-size:15px}
.lamp i{flex:none;width:12px;height:12px;border-radius:50%;background:var(--lijn);transition:background .3s}
.lamp.aan i{background:var(--blad)}
.lamp.aan.nieuw i{animation:puls .9s ease 1}
@keyframes puls{0%{box-shadow:0 0 0 0 rgba(111,184,148,.6)}100%{box-shadow:0 0 0 12px rgba(111,184,148,0)}}
.lamp .ico{width:24px;height:24px;flex:none}
.lamp{min-width:0}
.lamp .t{flex:1;min-width:0}
.lampjes{grid-template-columns:minmax(0,1fr)}
/* knoppen in kaarten op de telefoon: over de volle breedte, net als in het rapport */
@media (max-width:600px){.kaart>.rij{width:100%}.kaart>.rij>.knop{flex:1 1 100%;text-align:center;justify-content:center}}
.wanneer{font-size:15px;color:var(--midden);margin:0}
.wanneer b{color:var(--donker)}
.lamp .t small{display:block;color:var(--grijs);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lamp button{background:none;border:1px solid var(--lijn);border-radius:6px;padding:5px 9px;font-size:13px;cursor:pointer;color:var(--midden)}
.lamp button:hover{border-color:var(--midden)}

/* ── themakaart ─────────────────────────────── */
.themakaart{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r-kaart);padding:14px 18px}
.raster-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.raster{border-collapse:collapse;width:100%;min-width:520px}
.raster th{font-weight:500;color:var(--grijs);font-size:13px;text-align:center;padding:4px 4px 10px;white-space:nowrap}
.raster th[scope=row]{text-align:left;font-weight:400;color:var(--donker);font-size:15px;white-space:normal;padding:0 8px 0 0;position:sticky;left:0;background:var(--wit)}
.raster td{text-align:center;height:44px;border-bottom:1px solid var(--haar)}
.raster tr:last-child td,.raster tr:last-child th[scope=row]{border-bottom:0}
.raster th[scope=row]{border-bottom:1px solid var(--haar)}
.stip{display:inline-block;border-radius:50%;vertical-align:middle;transform:scale(0);animation:stip .35s cubic-bezier(.3,1.4,.5,1) forwards;animation-delay:var(--wacht,0s)}
.stip.knelpunt{width:16px;height:16px;background:var(--rood)}
.stip.op_orde{width:12px;height:12px;background:var(--blad)}
.stip.aandacht{width:11px;height:11px;background:var(--wit);border:1.5px solid var(--neutraal)}
.stip.leeg{width:5px;height:5px;background:var(--lijn)}
@keyframes stip{to{transform:scale(1)}}
.legenda{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:13px;color:var(--midden);align-items:center;margin-top:12px}
.legenda span{display:inline-flex;align-items:center;gap:7px}
.legenda .stip{animation:none;transform:none}
.themalijst{list-style:none;margin:0;padding:0}
.themalijst li{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--haar);font-size:15px}
.themalijst li:last-child{border-bottom:0}
.themalijst li b{margin-left:auto;font-weight:600;font-size:13px;color:var(--midden)}

/* ── verder kijken ──────────────────────────── */
details.paneel{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r-kaart)}
details.paneel summary{cursor:pointer;padding:14px 16px;font-weight:600;list-style:none;display:flex;align-items:center;font-size:16px}
details.paneel summary::-webkit-details-marker{display:none}
details.paneel summary::after{content:"+";margin-left:auto;font-size:22px;color:var(--midden);font-weight:400}
details.paneel[open] summary::after{content:"\2212"}
details.paneel .binnen{padding:0 16px 16px;display:grid;gap:12px}
.verschil{border-top:1px solid var(--haar);padding-top:12px}
.verschil h4{margin:0 0 6px;font-size:15px;font-weight:600}
.verschil ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.verschil li{display:grid;grid-template-columns:minmax(110px,36%) 1fr;gap:10px;font-size:14.5px}
.verschil li b{font-weight:600;color:var(--midden);font-size:13.5px}
.verschil li.hoog span{color:var(--rood);font-weight:600}
.kwijt{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px}
.kwijt li{display:flex;gap:12px;align-items:baseline;font-size:15px}
.kwijt li b{min-width:26px;text-align:right;color:var(--blad)}
.kwijt li small{color:var(--grijs);font-size:12.5px}
.perafd{display:grid;gap:4px;padding-top:12px;border-top:1px solid var(--haar)}
.perafd b{font-size:15px}
.perafd ol{margin:0;padding-left:20px;font-size:15px;color:var(--midden)}

.melding{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--donker);color:var(--wit);padding:10px 18px;border-radius:999px;font-size:15px;opacity:0;transition:opacity .2s;pointer-events:none;z-index:9}
.melding.aan{opacity:1}
.voet{margin-top:34px;padding-top:18px;border-top:1px solid var(--lijn);display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;font-size:14px;color:var(--grijs)}
.voet a.opsight{color:var(--opsight);font-weight:600;text-decoration:none}
.laden{padding:40px 0;text-align:center;color:var(--grijs)}
.ico{width:28px;height:28px;flex:none}

/* ── voorkant ───────────────────────────────── */
.vk{--pad:clamp(16px,6vw,120px)}
.vk section{padding:clamp(32px,6vw,72px) var(--pad)}
.vk .binnen{max-width:1120px;margin:0 auto}
.vk .hero{display:grid;gap:28px;align-items:center}
.vk .hero .tekst{max-width:720px}
.vk .hero .tekst{display:flex;flex-direction:column;gap:22px}
.vk .hero p.lead{font-size:clamp(16px,2vw,19px);color:var(--midden)}
.vk .wit{background:var(--wit)}
.vk .cijfers{display:grid;gap:20px;margin-top:28px}
@media (min-width:700px){.vk .cijfers{grid-template-columns:repeat(4,1fr);gap:24px}}
.vk .cijfer b{display:block;font-size:clamp(30px,3.4vw,38px);font-weight:700;color:var(--blad);letter-spacing:-.02em;line-height:1}
.vk .cijfer p{font-size:15px;color:var(--midden);margin-top:8px}
.vk .bron{font-size:13px;color:var(--grijs);margin-top:22px}
.vk .stappen{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:12px}
@media (min-width:700px){.vk .stappen{grid-template-columns:repeat(4,1fr);gap:16px}}
.vk .stap{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r-kaart);padding:18px 18px 20px;display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:center}
.vk .stap .nr{grid-row:1/3;width:30px;height:30px;border-radius:50%;background:var(--mint);color:var(--donker);font-weight:700;font-size:14px;display:grid;place-items:center;align-self:start}
.vk .stap .ico{width:34px;height:34px;grid-column:2}
.vk .stap h3{grid-column:2;font-size:16px;margin-top:6px}
.vk .stap p{grid-column:2;font-size:14px;color:var(--midden)}
.vk .twee{display:grid;gap:36px;align-items:center}
@media (min-width:860px){.vk .twee{grid-template-columns:1fr 1fr;gap:64px}}
.vk .twee .tekst{display:flex;flex-direction:column;gap:16px}
.vk .twee .tekst p{font-size:17px;color:var(--midden)}
.vk .eerlijk{background:var(--mint);border-radius:var(--r-vlak);padding:clamp(24px,4vw,40px);display:flex;flex-direction:column;gap:12px}
.vk .eerlijk h2{font-size:clamp(22px,3vw,28px)}
.vk .eerlijk p{font-size:17px}
.vk .slot{background:var(--donker);color:var(--wit);text-align:center}
.vk .slot h2{font-size:clamp(28px,4vw,40px);color:var(--wit)}
.vk .slot p{color:var(--mint);font-size:18px;margin:12px 0 24px}
.vk footer{padding:26px var(--pad);font-size:14px;color:var(--grijs)}
.vk footer .binnen{display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between}
.vk footer a{text-decoration:none}
.vk footer a.opsight{color:var(--opsight);font-weight:600}

@media (max-width:600px){.kop .navlinks a:not(.knop){display:none}}

.indicatie{display:grid;gap:10px;margin-top:8px;padding-top:12px;border-top:1px solid var(--haar)}
@media (min-width:560px){.indicatie{grid-template-columns:1fr 1fr 1fr}}
.indicatie div{display:flex;flex-direction:column;gap:2px}
.indicatie b{font-size:16px;color:var(--donker)}
.indicatie small{font-size:12.5px;color:var(--grijs)}

/* ── tegels per thema ───────────────────────── */
.tegels{display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:700px){.tegels{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}}
@media (min-width:1000px){.tegels{grid-template-columns:repeat(5,minmax(0,1fr))}}
.tegels.klein{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:700px){.tegels.klein{grid-template-columns:repeat(3,minmax(0,1fr))}}
.tegel{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r-kaart);padding:14px;display:flex;flex-direction:column;gap:4px;min-width:0}
.tegel.knelpunt{border-color:var(--rood)}
.tegel.op_orde{border-color:var(--blad)}
.tegel .tk{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.tegel .tk .ico{width:30px;height:30px}
.tegel .tk .stip{animation:none;transform:none}
.tegel b{font-size:14.5px;line-height:1.25}
.tegel .score{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--midden)}
.tegel.knelpunt .score{color:var(--rood)}
.tegel.op_orde .score{color:var(--blad)}
.tegel small{font-size:12px;color:var(--grijs)}
.tegel p{font-size:13px;color:var(--midden);margin-top:6px;padding-top:8px;border-top:1px solid var(--haar);margin-bottom:10px}
/* ── rapport ────────────────────────────────── */
.rapport .rkop{margin-top:26px;padding-top:18px;border-top:1px solid var(--lijn)}
.rapport .rkop h2{font-size:22px}
.rapport .rkop .klein{margin-top:4px}
.rapportkop{padding-bottom:6px}
.tweekolom{display:grid;gap:12px}
@media (min-width:800px){.tweekolom{grid-template-columns:1fr 1fr}}
.tweekolom .kaart .kwijt{margin-top:6px}
/* ── rapport (21 september 2026): band, wie, conclusie, plekken, afdelingen, inventaris, slot ── */
.rapport{gap:0}
.rapport .band{position:relative;border-radius:var(--r-vlak);overflow:hidden;height:300px;background:var(--donker)}
.rapport .band img{width:100%;height:100%;object-fit:cover;display:block}
.rapport .band .tekst{position:absolute;left:0;right:0;bottom:0;padding:26px 30px;background:linear-gradient(transparent,rgba(52,62,61,.88));color:var(--wit)}
.rapport .band .label{color:var(--wit);text-shadow:0 1px 3px rgba(0,0,0,.45)}
.rapport .band h1{font-size:clamp(26px,3.6vw,38px);margin:4px 0 6px;color:var(--wit);letter-spacing:-.02em;line-height:1.1}
.rapport .band p{color:#E6EFE9;margin:0;font-size:16px}
.rapport .bandknoppen{margin-top:12px}
.rapport .wiekaart{margin-top:16px;background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r-kaart);padding:16px 18px}
.rapport .wiekop{display:flex;gap:6px 14px;align-items:baseline;flex-wrap:wrap;margin-bottom:10px}
.rapport .wiekop b{font-size:18px}
.rapport .wie{display:flex;gap:8px;flex-wrap:wrap}
.rapport .wie span{display:inline-flex;align-items:center;gap:6px;background:var(--papier);border:1px solid var(--lijn);border-radius:999px;padding:5px 12px 5px 6px;font-size:14px}
.rapport .wie span .ico{width:22px;height:22px}
.rapport .wie i.ok{width:9px;height:9px;border-radius:50%;background:var(--blad);display:inline-block;margin-left:2px}
.rapport .wie span.open{color:var(--grijs);border-style:dashed;background:transparent}
.rapport .wie span.open .ico{opacity:.45}
.rapport .wie small{color:var(--grijs);font-size:12px;margin-left:2px}
.rapport .conclusie{margin:34px 0 4px;max-width:900px}
.rapport .conclusie h2{font-size:clamp(24px,3vw,30px);letter-spacing:-.02em;line-height:1.2;margin-top:4px}
.rapport .conclusie p{font-size:18px;color:var(--midden);margin-top:8px}
.rapport .rkop{margin-top:38px}
.rapport .rkop+*{margin-top:16px}
.plek3{display:grid;gap:14px}
@media (min-width:700px){.plek3.n2{grid-template-columns:1fr 1fr}.plek3.n3{grid-template-columns:repeat(3,1fr)}}
.pk{background:var(--wit);border:1px solid var(--lijn);border-top:4px solid var(--pk,var(--donker));border-radius:var(--r-kaart);padding:18px;display:flex;flex-direction:column;gap:8px;break-inside:avoid}
.pk .n{font-size:34px;font-weight:700;letter-spacing:-.03em;color:var(--blad);line-height:1}
.pk h3{font-size:18px;line-height:1.25}
.pk p{font-size:14.5px;color:var(--midden);margin:0}
.pk p.opl{color:var(--donker)}
.pk p.stap{margin-top:4px}
.pk p.stap b{color:var(--donker)}
.pk .cijfers{display:grid;grid-template-columns:1fr 1fr;gap:8px 10px;margin-top:auto;padding-top:12px;border-top:1px solid var(--haar);font-size:13px;color:var(--grijs)}
.pk .cijfers b{display:block;font-size:15px;color:var(--donker)}
.pk .cijfers small{display:block;font-size:12px}
.afd{display:grid;gap:16px}
@media (min-width:700px){.afd{grid-template-columns:1fr 1fr}}
.ak{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r-kaart);overflow:hidden;display:flex;flex-direction:column;break-inside:avoid}
.ak .foto{height:210px;position:relative;background:var(--mint)}
.ak .foto img{width:100%;height:100%;object-fit:cover;display:block}
.ak .foto .naam{position:absolute;left:16px;bottom:12px;color:var(--wit);font-weight:700;font-size:20px;text-shadow:0 1px 8px rgba(0,0,0,.55);display:flex;align-items:center;gap:8px}
.ak .foto .naam .ico{width:26px;height:26px;filter:invert(1) brightness(2)}
.ak .body{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1}
.ak .stand{display:grid;grid-template-columns:auto 1fr;gap:8px 10px;margin-bottom:14px;align-items:center}
.ak .stand .rij2{display:flex;gap:6px;flex-wrap:wrap}
.ak .stand em{font-style:normal;font-size:12.5px;border-radius:999px;padding:3px 10px;border:1px solid var(--rood);color:var(--rood);background:var(--wit)}
.ak .stand em.a{border-color:var(--neutraal);color:var(--grijs)}
.ak .stand small{color:var(--grijs);font-size:12.5px}
.ak .aanhef{font-size:13.5px;color:var(--grijs);margin:0 0 6px}
.ak ol{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.ak ol li{display:grid;grid-template-columns:22px 1fr;gap:8px;font-size:15px;line-height:1.4}
.ak ol li b{color:var(--rood);font-size:13px;padding-top:2px}
.ak .eerste{margin-top:auto;padding-top:10px;border-top:1px solid var(--haar);font-size:13.5px;color:var(--midden)}
.ak .body>.eerste{margin-top:12px}
.rapport .themakaart .verschillen{margin-top:18px;padding-top:14px;border-top:1px solid var(--lijn);display:grid;gap:14px}
.rapport .themakaart .verschil{border-top:0;padding-top:0}
.rasterlijst{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.rasterlijst li{display:grid;gap:2px;font-size:14.5px;padding-bottom:10px;border-bottom:1px solid var(--haar)}
.rasterlijst li:last-child{border-bottom:0}
.rasterlijst li b{font-weight:600}
.rasterlijst li span{color:var(--midden)}
.rasterlijst li .k{color:var(--rood);font-weight:600}
.rasterlijst li.oporde span{color:var(--midden)}
.rapport .raster .stip{animation:none;transform:none}
.alleen-smal{display:none}
@media (max-width:699px){.alleen-breed{display:none}.alleen-smal{display:block}}
.inv{display:grid;gap:14px}
@media (min-width:700px){.inv{grid-template-columns:1fr 1fr 1fr}}
.inv .kaart h3{font-size:16px;margin-bottom:8px}
.inv .kaart .kwijt{margin-top:0}
.inv .kaart .kwijt li{font-size:14.5px}
.inv .kaart .tekstknop{margin-top:10px;font-size:14px;color:var(--midden)}
.inv .uren{background:var(--mint);border-color:var(--mint)}
.inv .uren .label{color:var(--midden)}
.inv .uren big{font-size:40px;font-weight:700;letter-spacing:-.03em;display:block;line-height:1.1;margin:6px 0}
.slot{margin-top:38px;background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r-vlak);padding:26px 28px;display:grid;grid-template-columns:120px 1fr auto;gap:24px;align-items:center;break-inside:avoid}
.slot img{width:120px;height:120px;border-radius:50%;object-fit:cover;object-position:top}
.slot h3{font-size:22px}
.slot p{color:var(--midden);margin-top:6px;max-width:560px}
.slot .knoppen{display:flex;gap:8px;flex-wrap:wrap}
.rapport .voet{margin-top:26px}
@media (max-width:699px){
  .rapport .band{height:240px}.rapport .band .tekst{padding:16px 18px}.rapport .band p{font-size:14px}
  .rapport .wiekop b{font-size:16px}.rapport .wiekop .klein{width:100%}
  .rapport .conclusie p{font-size:16px}
  .ak .foto{height:150px}
  .ak .stand{grid-template-columns:1fr;gap:6px}
  .slot{grid-template-columns:1fr;gap:14px;padding:22px 20px}.slot img{width:80px;height:80px}
  .slot .knoppen{flex-direction:column}.slot .knoppen .knop{width:100%;justify-content:center;margin:0}
}
@media print{
  .kop,.melding,.voet .opsight,.knop,.bandknoppen,.tekstknop{display:none!important}
  body{background:#fff}main.breed{max-width:none;padding:0}
  .kaart,.tegel,.pk,.ak,.slot,.wiekaart{break-inside:avoid}.rapport .themakaart{break-inside:auto}.rapport .verschil{break-inside:avoid}
  .rapport .band{height:200px;break-inside:avoid}.ak .foto{height:120px}
  .rapport .nieuwe-pagina{break-before:page;border-top:0;padding-top:0}
  .rapport .rkop{margin-top:22px;break-after:avoid}
  .alleen-breed{display:block!important}.alleen-smal{display:none!important}
  .stip{animation:none!important;transform:none!important}
  .rapport a{text-decoration:none;color:inherit}
  .plek3.n3{grid-template-columns:repeat(3,1fr)}.afd{grid-template-columns:1fr 1fr}.inv{grid-template-columns:1fr 1fr 1fr}
  /* pdf: de drie plekken en de toelichting samen op een pagina, geen losse voet achteraan */
  .rapport .pk p{font-size:12.5px;line-height:1.45}.rapport .pk h3{font-size:16px}.rapport .wanneer{break-after:avoid}
  .rapport .voet{display:none!important}
  .rapport .conclusie+.rkop{break-before:page;border-top:0;padding-top:0}
}

/* voorkant: hero met één foto over de volle breedte en een proefje (19 september 2026) */
.vk .herosec{position:relative;overflow:hidden;background:var(--donker);display:flex;align-items:center;min-height:100svh;min-height:100vh;padding-top:72px;padding-bottom:40px}
.vk .herofoto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;z-index:0;animation:herozoom 14s ease-out both}
@keyframes herozoom{from{transform:scale(1.08)}to{transform:scale(1)}}
.vk .herosec::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(38,46,45,.95) 0,rgba(38,46,45,.8) 50%,rgba(38,46,45,.35) 100%)}
@media (min-width:860px){.vk .herosec::before{background:linear-gradient(90deg,rgba(38,46,45,.9) 0,rgba(38,46,45,.78) 45%,rgba(38,46,45,.45) 70%,rgba(38,46,45,.3) 100%)}}
.vk .herosec .binnen{position:relative;z-index:2;width:100%;display:grid;gap:34px;align-items:center}

.vk .herosec .tekst{gap:18px;max-width:600px}
.vk .herosec h1{color:var(--wit);font-size:clamp(36px,6.4vw,64px);line-height:1.04;max-width:13ch;text-shadow:0 2px 24px rgba(0,0,0,.25)}
.vk .herosec h1 .w{display:inline-block;margin-right:.26em;opacity:0;transform:translateY(.45em);animation:woord .55s cubic-bezier(.2,.7,.3,1) forwards;animation-delay:calc(.15s + var(--i)*.08s)}
@keyframes woord{to{opacity:1;transform:none}}
.vk .herosec p.lead{color:#DCE5DF;font-size:clamp(16px,1.9vw,19px);max-width:44ch}
.vk .herosec .knopnoot{font-size:14px;color:var(--mint);font-weight:600}
@media (max-width:859px){.vk .herosec{min-height:0;padding-top:88px}.vk .herosec .tekst{gap:14px}.vk .herosec p.lead{font-size:16px}}
@media (prefers-reduced-motion:reduce){.vk .herofoto{animation:none}.vk .herosec h1 .w{animation:none;opacity:1;transform:none}}

/* proefje: één vraag in de hero */
.proefje{background:var(--wit);border-radius:var(--r-vlak);padding:22px 20px 20px;display:flex;flex-direction:column;gap:12px;box-shadow:0 24px 60px rgba(0,0,0,.28);max-width:460px;width:100%;justify-self:end;min-height:300px}
@media (min-width:860px){.proefje{padding:28px 26px 24px}}
.proefje .label{color:var(--blad)}
.proefje h3{font-size:clamp(18px,1.6vw,21px);line-height:1.25}
.proefje .antwoorden{gap:8px;margin-top:4px}
.proefje .antwoord{min-height:48px;padding:11px 14px;font-size:15.5px}
.proefje .tegel{padding:14px 16px;animation:in .35s both}
.proefje .tegel b{font-size:16px}
.proefje .tegel p{margin-bottom:0}
.proefje.uitkomst .rij{margin-top:auto;align-items:center;gap:16px}
.proefje .tekstknop.licht{color:var(--midden);font-weight:500;font-size:14.5px}
.proefje.uitkomst .klein{font-size:14px;line-height:1.45}

/* zo werkt het: telefoon */
.vk .tel-wrap{display:grid;gap:28px;align-items:center;justify-items:center;margin-top:28px}
@media (min-width:860px){.vk .tel-wrap{grid-template-columns:1fr auto;gap:72px;justify-items:stretch}}
.vk .verhaal{display:flex;flex-direction:column;gap:12px;max-width:460px;min-height:170px;width:100%}
.vk .verhaal h3{font-size:clamp(22px,2.6vw,30px);line-height:1.15;transition:opacity .25s}
.vk .verhaal p{color:var(--midden);font-size:17px;transition:opacity .25s}
.vk .verhaal.wissel h3,.vk .verhaal.wissel p{opacity:0}
.vk .verhaal .label{color:var(--blad)}
@media (max-width:859px){.vk .tel-wrap{gap:20px}.vk .verhaal{min-height:150px}}

/* wat u krijgt: drie regels, geen kaarten */
.vk .krijgt .drie{display:grid;gap:22px;margin-top:26px}
@media (min-width:760px){.vk .krijgt .drie{grid-template-columns:repeat(3,1fr);gap:40px}}
.vk .krijgt .drie div{padding-top:16px;border-top:2px solid var(--blad)}
.vk .krijgt .drie b{display:block;font-size:19px;line-height:1.25;margin-bottom:8px}
.vk .krijgt .drie p{font-size:15.5px;color:var(--midden)}
.vk .eerlijk .wie{font-size:15px;color:var(--midden);padding-top:14px;border-top:1px solid rgba(52,62,61,.15);margin-top:6px}
.vk .eerlijk .wie a{color:var(--donker);font-weight:600}
.vk .krijgt{background:var(--papier)}
.vk .eerlijksec{background:var(--wit)}

/* stappen die na elkaar aangaan */
.stappenveld{position:relative}
.stappenveld .spoor{position:relative;height:4px;border-radius:999px;background:var(--lijn);margin:28px 0 22px;display:none}
@media (min-width:700px){.stappenveld .spoor{display:block}.stappenveld .stappen{margin-top:0}}
.stappenveld .spoor i{position:absolute;inset:0;border-radius:999px;background:var(--blad);transform:scaleX(0);transform-origin:left}
.stappenveld.aan .spoor i{animation:spoor .8s cubic-bezier(.4,0,.2,1) forwards}
@keyframes spoor{to{transform:scaleX(1)}}
.stappenveld .stap{opacity:.55;transform:translateY(6px);transition:opacity .35s ease,transform .35s cubic-bezier(.2,.7,.3,1),border-color .35s}
.stappenveld .stap .nr{transition:background .25s,color .25s}
.stappenveld.aan .stap{opacity:1;transform:none;border-color:var(--blad);transition-delay:var(--wacht)}
.stappenveld.aan .stap .nr{background:var(--blad);color:var(--wit);transition-delay:var(--wacht);animation:pop .3s var(--wacht) cubic-bezier(.3,1.6,.5,1) both}
@media (prefers-reduced-motion:reduce){.stappenveld .stap{opacity:1;transform:none}.stappenveld .spoor i{transform:none}}
.vk .band{display:grid;grid-template-columns:repeat(4,1fr);background:var(--donker)}
.vk .band img{width:100%;height:clamp(120px,13vw,200px);object-fit:cover;display:block;filter:saturate(.7);opacity:.55;transition:opacity .5s ease,transform .8s cubic-bezier(.2,.7,.3,1)}
.vk .band img:hover{opacity:.78;transform:scale(1.04)}
@media (max-width:700px){.vk .band{grid-template-columns:repeat(2,1fr)}.vk .band img{height:110px}}
/* oplossing achter een knop op de tegel, venster */
.tegel .oplknop{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:6px;background:none;border:1px solid var(--lijn);border-radius:var(--r-knop);padding:7px 11px;font:inherit;font-size:13px;font-weight:600;color:var(--donker);cursor:pointer;transition:border-color .2s,background .2s}
.tegel .oplknop:hover{border-color:var(--blad);background:var(--papier)}
.tegel .oplknop svg{width:12px;height:12px;stroke:var(--blad);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.lag{position:fixed;inset:0;z-index:50;background:rgba(52,62,61,0);display:flex;align-items:flex-end;justify-content:center;transition:background .25s}
.lag.aan{background:rgba(52,62,61,.42)}
.venster{position:relative;background:var(--wit);width:100%;max-width:560px;max-height:88vh;overflow:auto;border-radius:var(--r-vlak) var(--r-vlak) 0 0;padding:24px 20px 28px;transform:translateY(24px);opacity:0;transition:transform .3s cubic-bezier(.2,.7,.3,1),opacity .25s}
.lag.aan .venster{transform:none;opacity:1}
@media (min-width:700px){.lag{align-items:center;padding:24px}.venster{border-radius:var(--r-vlak);padding:32px 32px 34px}}
.venster .dicht{position:absolute;top:14px;right:14px;width:34px;height:34px;border:0;border-radius:50%;background:var(--haar);cursor:pointer;display:grid;place-items:center}
.venster .dicht svg{width:14px;height:14px;stroke:var(--donker);stroke-width:2;stroke-linecap:round;fill:none}
.voorstel .vkop{display:flex;align-items:center;gap:12px;margin-bottom:14px;padding-right:40px}
.voorstel .vkop .ico{width:40px;height:40px}
.voorstel .vkop h3{font-size:19px;margin:0}
.voorstel .vkop .stip{margin-left:auto;animation:none;transform:none}
.voorstel .intro{font-size:15.5px;color:var(--donker);margin-bottom:16px}
.voorstel ul{list-style:none;margin:8px 0 16px;padding:0;display:grid;gap:8px}
.voorstel li{position:relative;padding:10px 12px 10px 34px;background:var(--papier);border-radius:var(--r-knop);font-size:14.5px;line-height:1.45;color:var(--donker)}
.voorstel li::before{content:"";position:absolute;left:14px;top:17px;width:8px;height:8px;border-radius:50%;background:var(--blad)}
.voorstel .klein{font-size:12.5px;color:var(--grijs)}
@media (prefers-reduced-motion:reduce){.lag,.venster,.vk .band img{transition:none}}

/* telefoon-verhaal, overgenomen van de proefpagina (19 september 2026) */
.tel-wrap{display:grid;gap:28px;align-items:center;justify-items:center}
.tel-wrap .tekst{display:flex;flex-direction:column;gap:14px;max-width:460px}
.tel-wrap .tekst p{color:var(--midden);font-size:17px}
.telefoon{width:min(290px,82vw);aspect-ratio:9/16.2;background:var(--papier);border:6px solid var(--donker);border-radius:34px;position:relative;overflow:hidden;box-shadow:0 14px 40px rgba(52,62,61,.14);justify-self:center}
.telefoon .inh{position:absolute;inset:0;padding:18px 14px 16px;display:flex;flex-direction:column;gap:10px;animation:in .32s cubic-bezier(.2,.7,.3,1) both}
.telefoon .inh.weg{animation:uitLinks .28s cubic-bezier(.4,0,.6,1) forwards}
@keyframes uitLinks{to{opacity:0;transform:translateX(-24px)}}
.telefoon .balk{margin:0}
.telefoon .teller{font-size:12.5px;color:var(--midden);font-weight:600}
.telefoon h3{font-size:17px;line-height:1.25}
.telefoon .antwoorden{gap:8px}
.telefoon .antwoord{min-height:44px;padding:10px 12px;font-size:14px;gap:10px}
.telefoon .antwoord .bol{width:15px;height:15px}
.telefoon .klaar{align-items:center;justify-content:center;text-align:center;gap:14px}
.telefoon .klaar p{font-size:15px;color:var(--midden)}
.vinger{position:absolute;width:30px;height:30px;border-radius:50%;background:rgba(52,62,61,.28);border:2px solid rgba(255,255,255,.9);box-shadow:0 2px 8px rgba(0,0,0,.18);pointer-events:none;z-index:3;left:60%;top:62%;transform:translate(-50%,-50%);transition:left .35s cubic-bezier(.4,0,.2,1),top .35s cubic-bezier(.4,0,.2,1),opacity .25s}
.vinger.tik{animation:tik .22s ease}
@keyframes tik{50%{transform:translate(-50%,-50%) scale(.72)}}
.vinger.weg{opacity:0}
.verhaal{min-height:170px}
.verhaal h2{font-size:clamp(22px,2.6vw,28px);transition:opacity .25s}
.verhaal p{transition:opacity .25s}
.verhaal.wissel h2,.verhaal.wissel p{opacity:0}
.scenes{display:flex;gap:8px;margin-top:6px}
.scenes button{width:12px;height:12px;border-radius:50%;border:0;padding:0;background:var(--lijn);cursor:pointer;transition:background .25s,transform .25s}
.scenes button.aan{background:var(--blad);transform:scale(1.25)}
.scenes button.geweest{background:var(--mint)}
.telefoon .inh .kopje{font-size:12.5px;color:var(--midden);font-weight:600;display:flex;align-items:center;gap:8px}
.telefoon .inh .kopje .ico{width:20px;height:20px}
.telefoon .keuzes{gap:6px}
.telefoon .keuze{min-height:36px;padding:6px 11px;font-size:13px}
.telefoon .veldje{display:grid;gap:4px;font-size:12.5px;font-weight:600}
.telefoon .veldje .in{min-height:36px;padding:7px 10px;font-size:13px;font-weight:400;border:1px solid var(--midden);border-radius:8px;background:var(--wit);color:var(--donker);white-space:nowrap;overflow:hidden}
.telefoon .veldje .in:empty::after{content:"e-mailadres";color:var(--grijs)}
.telefoon .veldje .in.cursor::after{content:"";display:inline-block;width:1px;height:14px;background:var(--donker);vertical-align:-2px;margin-left:1px;animation:knip .8s steps(1) infinite}
@keyframes knip{50%{opacity:0}}
.telefoon .knop{min-height:42px;font-size:14px;padding:8px 14px;margin-top:auto}
.telefoon .lamp{padding:8px 10px;font-size:13.5px;gap:8px}
.telefoon .lamp .ico{width:20px;height:20px}
.telefoon .lampjes{grid-template-columns:1fr;gap:6px}
.telefoon .concl{font-size:14.5px;font-weight:700;line-height:1.3}
.telefoon .concl+small{font-size:12px;color:var(--midden)}
.telefoon .tegels.klein{grid-template-columns:1fr 1fr;gap:6px}
.telefoon .tegel{padding:9px;gap:2px}
.telefoon .tegel .tk{margin-bottom:2px}.telefoon .tegel .tk .ico{width:20px;height:20px}
.telefoon .tegel b{font-size:12px}.telefoon .tegel .score{font-size:10px}
.telefoon .kaart{padding:14px;display:grid;gap:8px}
.telefoon .kaart h3{font-size:15px}.telefoon .kaart p{font-size:13px;color:var(--midden)}
.telefoon .kaart .knop{margin-top:4px}
.telefoon .kom{transition-duration:.3s}
.telefoon .mail{background:var(--wit);border:1px solid var(--lijn);border-radius:12px;padding:14px;display:grid;gap:8px;margin-top:6px}
.telefoon .mail .van{font-size:12px;color:var(--midden);display:flex;align-items:center;gap:6px}
.telefoon .mail b{font-size:14.5px;line-height:1.3}
.telefoon .mail p{font-size:13px;color:var(--midden)}
.telefoon .mail .knop{margin-top:4px}
.telefoon .samen{position:relative;flex:1;min-height:0}
.telefoon .samen .bron{position:absolute;top:0;left:var(--x);transform:translateX(-50%);display:grid;justify-items:center;gap:2px;font-size:10.5px;color:var(--midden);width:70px;text-align:center}
.telefoon .samen .bron .ico{width:26px;height:26px}
.telefoon .samen .pak{position:absolute;width:10px;height:10px;border-radius:50%;background:var(--blad);left:var(--x);top:16%;transform:translate(-50%,-50%);opacity:0}
.telefoon .aan .samen .pak,.telefoon .inh.aan .samen .pak{animation:pak 1s cubic-bezier(.4,0,.2,1) forwards;animation-delay:var(--wacht)}
@keyframes pak{0%{opacity:0;left:var(--x);top:16%}15%{opacity:1}85%{opacity:1}100%{opacity:0;left:50%;top:58%}}
.telefoon .samen .doel{position:absolute;left:0;right:0;top:56%}
.telefoon .rap{background:var(--wit);border:1px solid var(--lijn);border-radius:12px;padding:12px 14px;display:grid;gap:2px;justify-items:center;text-align:center;transition:border-color .3s,transform .25s}
.telefoon .rap.tel{transform:scale(1.04)}
.telefoon .rap.klaar{border-color:var(--blad)}
.telefoon .rap b{font-size:14px}.telefoon .rap small{font-size:12px;color:var(--midden)}
.telefoon .advies{background:var(--mint);border-radius:10px;padding:9px 11px;font-size:13px;line-height:1.35;display:grid;gap:2px}
.telefoon .advies .label{font-size:10.5px}

/* klein vinkje, niet benaderd worden */
.vinkje{display:flex;align-items:flex-start;gap:8px;font-size:13px;color:var(--grijs);cursor:pointer;margin-top:-6px}
.vinkje input{margin:3px 0 0;width:14px;height:14px;accent-color:var(--midden);flex:none}

/* zo werkt het: grote stappen (19 september 2026) */
.vk #zowerkthet .sub{color:var(--midden);font-size:17px;margin-top:10px;max-width:56ch}
.vk .stappen.groot{margin-top:0;gap:14px}
@media (min-width:700px){.vk .stappen.groot{grid-template-columns:repeat(4,1fr);gap:18px}}
.vk .stappen.groot .stap{position:relative;display:flex;flex-direction:column;gap:10px;padding:26px 22px 22px;overflow:hidden;background:var(--papier);border:1px solid var(--lijn);transition:opacity .4s ease,transform .45s cubic-bezier(.2,.7,.3,1),border-color .4s,box-shadow .3s}
.vk .stappen.groot .stap:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(52,62,61,.12)}
.vk .stappen.groot .ghost{position:absolute;right:14px;top:2px;font-size:96px;font-weight:800;line-height:1;color:var(--mint);opacity:.55;letter-spacing:-.05em;pointer-events:none}
.vk .stappen.groot .disc{width:64px;height:64px;border-radius:50%;background:var(--wit);border:1px solid var(--lijn);display:grid;place-items:center;transition:background .3s,border-color .3s,transform .3s}
.vk .stappen.groot .disc .ico{width:36px;height:36px}
.vk .stappen.groot h3{font-size:18px;line-height:1.2;margin-top:6px;position:relative}
.vk .stappen.groot p{font-size:15px;color:var(--midden);position:relative}
.vk .stappen.groot small{margin-top:auto;padding-top:10px;font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--blad)}
.stappenveld.aan .stappen.groot .stap{border-color:var(--lijn)}
.stappenveld.aan .stappen.groot .disc{background:var(--mint);border-color:var(--mint);transition-delay:var(--wacht);animation:pop .35s var(--wacht) cubic-bezier(.3,1.6,.5,1) both}
.stappenveld .spoor{margin:34px 0 26px}
@media (max-width:699px){.vk .stappen.groot .stap{flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px 16px;padding:18px}.vk .stappen.groot .disc{width:52px;height:52px}.vk .stappen.groot .disc .ico{width:30px;height:30px}.vk .stappen.groot h3{flex:1;margin:0}.vk .stappen.groot p{width:100%}.vk .stappen.groot small{margin:0}.vk .stappen.groot .ghost{font-size:72px;top:-4px;right:10px}}
.proefje .tegels.twee{grid-template-columns:1fr;gap:8px}
@media (min-width:420px){.proefje .tegels.twee{grid-template-columns:1fr 1fr}}
.proefje .tegels.twee .tegel{padding:12px 13px}
.proefje .tegels.twee .tegel b{font-size:14px}
.proefje .tegels.twee .tegel p{font-size:12.5px;margin-top:4px;padding-top:6px}

/* hero = de scan zelf (19 september 2026) */
.vk .herosec .heroscan{max-width:760px;gap:22px}
.vk .herosec .heroscan .label{color:var(--mint);letter-spacing:.09em}
.vk .herosec .heroscan h1{font-size:clamp(32px,5.4vw,60px);max-width:18ch;line-height:1.06}
.vk .herosec .heroscan .antwoorden{gap:10px;max-width:620px}
.vk .herosec .heroscan .antwoord{background:rgba(255,255,255,.94);border-color:rgba(255,255,255,.94);color:var(--donker);min-height:54px;font-size:17px;box-shadow:0 8px 24px rgba(0,0,0,.18)}
.vk .herosec .heroscan .antwoord:hover{background:var(--wit);border-color:var(--blad)}
.vk .herosec .heroscan .antwoord .bol{border-color:var(--midden);background:var(--wit)}
.vk .herosec .heroscan .antwoord.aan{background:var(--mint);border-color:var(--mint);color:var(--donker)}
.vk .herosec .heroscan .antwoord.aan .bol{border-color:var(--donker);background:var(--donker);box-shadow:inset 0 0 0 3px var(--mint)}
.vk .herosec .heroscan p.klein{color:#C9D3CD;max-width:52ch;font-size:14.5px}
.vk .herosec .heroscan .tegels.twee{grid-template-columns:1fr;gap:10px;max-width:620px}
@media (min-width:520px){.vk .herosec .heroscan .tegels.twee{grid-template-columns:1fr 1fr}}
.vk .herosec .heroscan .tegel{animation:in .35s both}
.vk .herosec .heroscan .tegel p{margin-bottom:0}
.vk .herosec .heroscan .rij{gap:18px}
.vk .herosec .heroscan .tekstknop.licht{color:#C9D3CD;font-weight:500;font-size:14.5px}
@media (max-width:859px){.vk .herosec .heroscan h1{font-size:clamp(30px,8vw,38px)}.vk .herosec .heroscan .antwoord{min-height:50px;font-size:16px;padding:12px 14px}.vk .herosec .heroscan p.klein{font-size:13.5px}}

/* ── voorkant (20 september 2026): welkom, feiten, oplossingen, rekenhulp ── */
.kop .merk img{height:38px;width:auto;display:block}
.vk .hero1{background:var(--papier);padding-top:clamp(56px,9vw,110px);padding-bottom:clamp(40px,7vw,80px);text-align:center}
.vk .hero1 .binnen{max-width:1000px;display:flex;flex-direction:column;align-items:center}
.vk .hero1 .label{color:var(--blad);margin-bottom:18px;display:block}
.vk .hero1 h1{font-size:clamp(36px,6vw,62px);line-height:1.04}
.vk .hero1 p.lead{font-size:clamp(17px,2vw,20px);color:var(--midden);max-width:640px;margin-top:22px}
.vk .hero1 .rij{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:30px}
.vk .knopnoot{font-size:14px;color:var(--grijs)}
.vk .band{padding:0;height:clamp(150px,20vw,280px);position:relative;background-color:var(--donker);background-size:cover;background-position:center;filter:saturate(.7)}
.vk .band::after{content:"";position:absolute;inset:0;background:rgba(52,62,61,.45)}
.vk .kopblok{text-align:center;max-width:720px;margin:0 auto}
.vk .kopblok .sub{color:var(--midden);font-size:clamp(16px,1.9vw,18px);margin-top:12px}
.vk .initiatief{background:var(--wit)}
.vk .feiten{background:var(--papier)}
.vk .feiten .drie{display:grid;gap:22px;margin-top:40px}
@media (min-width:760px){.vk .feiten .drie{grid-template-columns:repeat(3,1fr);gap:32px}}
.vk .feiten .drie div{padding-top:16px;border-top:2px solid var(--blad)}
.vk .feiten .drie b{display:block;font-size:19px;line-height:1.25;margin-bottom:8px}
.vk .feiten .drie p{font-size:15.5px;color:var(--midden)}
.vk .feiten .slotzin{text-align:center;margin-top:36px;font-size:clamp(18px,2.2vw,22px);color:var(--midden)}
.vk .feiten .slotzin b{color:var(--donker)}
.vk .feiten .bronregel{font-size:13px;color:var(--grijs);margin-top:14px;text-align:center}
.vk .meters{display:grid;gap:12px;margin-top:32px}
@media (min-width:640px){.vk .meters{grid-template-columns:repeat(4,1fr);gap:16px}}
.vk .meter{display:flex;align-items:center;gap:14px;background:var(--wit);border:1px solid var(--lijn);border-radius:14px;padding:12px 16px}
.vk .meter svg{width:60px;height:60px;flex:none}
.vk .meter .spoor{fill:none;stroke:var(--haar);stroke-width:11}
.vk .meter .vul{fill:none;stroke:var(--blad);stroke-width:11;stroke-linecap:round;stroke-dasharray:276.5;stroke-dashoffset:276.5;transform:rotate(-90deg);transform-origin:50% 50%;transition:stroke-dashoffset 1.2s cubic-bezier(.2,.7,.2,1) .4s}
.vk .meters.aan .vul{stroke-dashoffset:var(--rest)}
.vk .meter .getal{font-size:24px;font-weight:800;letter-spacing:-.04em;fill:var(--donker)}
.vk .meter span{font-size:14px;font-weight:600;line-height:1.3;color:var(--donker)}
.vk .voorbeelden{background:var(--wit)}
.vk .voorbeelden ul{list-style:none;margin:36px 0 0;padding:0;display:grid;gap:10px}
@media (min-width:380px){.vk .voorbeelden ul{grid-template-columns:1fr 1fr}}
@media (min-width:860px){.vk .voorbeelden ul{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1080px){.vk .voorbeelden ul{grid-template-columns:repeat(5,1fr)}}
.vk .voorbeelden li{background:var(--papier);border:1px solid var(--lijn);border-radius:var(--r-kaart);padding:14px 14px 12px;display:flex;flex-direction:column;gap:3px;transition:opacity .4s ease,transform .45s cubic-bezier(.2,.7,.3,1);transition-delay:calc(var(--i) * .04s)}
.vk .voorbeelden li .ico{width:28px;height:28px;margin-bottom:4px}
.vk .voorbeelden li b{font-size:14.5px;line-height:1.25}
.vk .voorbeelden li p{font-size:13px;color:var(--midden);flex:1;line-height:1.4}
.vk .meer{align-self:flex-start;margin-top:6px;background:none;border:0;padding:0;font-size:12.5px;font-weight:600;color:var(--blad);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.vk .meer:hover{color:var(--donker)}
.vk .voorbeelden .na{margin:30px auto 0;font-size:16px;color:var(--midden);max-width:640px;text-align:center}
.vk .rekensec{background:var(--papier)}
.vk .reken2{display:grid;gap:28px;align-items:center}
@media (min-width:860px){.vk .reken2{grid-template-columns:1fr 1fr;gap:56px}}
.vk .reken2 h2{max-width:18ch}
.vk .reken2 p.t{font-size:17px;color:var(--midden);margin-top:14px;max-width:520px}
.vk .rekenkaart{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r-vlak);padding:26px 28px;display:flex;flex-direction:column;gap:10px}
.vk .rekenkaart .som{font-size:16px;color:var(--midden)}
.vk .rekenkaart .uit{font-size:clamp(32px,4vw,44px);font-weight:800;letter-spacing:-.03em;color:var(--donker);line-height:1}
.vk .rekenkaart .uit small{font-size:15px;font-weight:600;color:var(--grijs);letter-spacing:0;margin-left:6px}
.vk .rekenkaart .uren{font-size:14px;color:var(--grijs)}
.vk .rekenkaart .knop{align-self:flex-start;margin-top:8px}
.vk .scansec{background:var(--wit)}
.vk .scansec .stappenveld{margin-top:36px}
.vk .eerlijksec{background:var(--papier)}
.vk .wiesec{background:var(--wit)}
.vk .wie2{display:grid;gap:28px;align-items:center}
@media (min-width:860px){.vk .wie2{grid-template-columns:220px 1fr;gap:48px}}
.vk .wie2 .foto{max-width:220px;margin:0 auto}
.vk .wie2 .foto img{width:100%;height:auto}
.vk .wie2 blockquote{margin:18px 0 0;padding:0 0 0 18px;border-left:3px solid var(--blad);font-size:clamp(18px,2.2vw,22px);line-height:1.35;color:var(--donker)}
.vk .wie2 .naam{margin-top:12px;font-size:14px;color:var(--grijs)}
.vk .wie2 p.t{font-size:17px;color:var(--midden);margin-top:14px}
.vk .slot .slotlogo{height:60px;width:auto;margin:0 auto 24px;border-radius:0;object-fit:contain;object-position:center}
/* vensters bij oplossingen en rekenhulp */
.venster .oplossing h3,.venster .reken h3{font-size:22px;margin:6px 0 14px;padding-right:40px}
.venster .oplossing p{font-size:16px;color:var(--midden);margin-bottom:12px}
.venster .oplossing p:last-child{margin-bottom:0}
.schuif{display:flex;flex-direction:column;gap:6px;margin-top:14px;font-size:15px}
.schuif span{display:flex;justify-content:space-between;color:var(--midden)}
.schuif b{color:var(--donker)}
.schuif input{width:100%;accent-color:var(--blad)}
.reken-uit{margin-top:22px;padding:18px 20px;background:var(--papier);border-radius:12px}
.reken-uit span{font-size:14px;color:var(--grijs)}
.reken-uit>b{display:block;font-size:34px;font-weight:800;letter-spacing:-.03em;color:var(--donker);line-height:1.1}
.reken-uit small{font-size:14px;color:var(--midden)}
.reken-uit .vijf{margin-top:10px;font-size:15px;color:var(--midden)}

/* mini-stappen in de hero (20 september 2026): vier stapjes naast elkaar, icoontje en lijntje, met een rustig loopje */
.ministappen{list-style:none;margin:24px auto 0;padding:0;display:flex;align-items:center;justify-content:center;flex-wrap:nowrap;gap:0;max-width:100%}
.ministappen li{display:flex;align-items:flex-start;gap:9px;font-size:14px;font-weight:600;color:var(--midden);white-space:nowrap}
.ministappen li+li::before{content:"";display:block;width:26px;height:2px;margin:17px 10px 0;align-self:flex-start;background:var(--lijn);transform-origin:left;animation:msLijn 6s ease-in-out infinite;animation-delay:calc(var(--i) * 1.1s - .5s)}
.ministappen .ms-ico{width:36px;height:36px;border-radius:50%;background:var(--wit);border:1.5px solid var(--lijn);display:grid;place-items:center;color:var(--donker);flex:none;animation:msIco 6s ease-in-out infinite;animation-delay:calc(var(--i) * 1.1s)}
.ministappen .ms-ico svg{width:19px;height:19px}
@keyframes msIco{0%,24%,100%{background:var(--wit);border-color:var(--lijn);transform:none}6%,14%{background:var(--blad);border-color:var(--blad);color:var(--wit);transform:scale(1.08)}}
@keyframes msLijn{0%{transform:scaleX(0)}8%,100%{transform:scaleX(1)}}
.ministappen.vert{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:0;width:max-content;max-width:100%}
.ministappen.vert li{position:relative;padding:6px 0;white-space:normal}
.ministappen.vert li+li::before{position:absolute;left:17px;top:-10px;height:16px;width:2px;margin:0;display:block;transform-origin:top;animation-name:msLijnV}
.ministappen.vert .ms-t{align-items:flex-start;text-align:left}
.ministappen.vert .ms-t small{max-width:260px}
@keyframes msLijnV{0%{transform:scaleY(0)}8%,100%{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){.ministappen .ms-ico,.ministappen li+li::before{animation:none}}
/* op de telefoon alles links uitgelijnd (20 september 2026) */
@media (max-width:700px){
  .vk .hero1,.vk .kopblok,.vk .feiten .bronregel,.vk .feiten .slotzin,.vk .voorbeelden .na,.vk .slot{text-align:left}
  .vk .hero1 .binnen,.vk .hero1 .rij{align-items:flex-start}
  .vk .kopblok,.vk .voorbeelden .na{margin-left:0;margin-right:0}
  .vk .ministappen{margin-left:0}
  .vk .slot .slotlogo{margin-left:0}
}

.ministappen .ms-t{display:flex;flex-direction:column;gap:2px;white-space:normal}
.ministappen .ms-t small{font-size:12px;font-weight:500;line-height:1.3;opacity:.85;max-width:170px}

@media (max-width:640px){
  .vk .ministappen{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:0;width:max-content;max-width:100%;margin-left:0}
  .vk .ministappen li{position:relative;padding:6px 0;white-space:normal;flex-direction:row;align-items:flex-start;text-align:left;font-size:14px}
  .vk .ministappen li+li::before{position:absolute;left:17px;top:-10px;height:16px;width:2px;margin:0;display:block;transform-origin:top;animation-name:msLijnV}
  .vk .ministappen .ms-t{align-items:flex-start;text-align:left}
  .vk .ministappen .ms-t small{font-size:12px;max-width:260px}
}

.vk .hero1 .knoppen2{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.vk .hero1 .binnen{max-width:1120px}
@media (max-width:640px){.vk .hero1 .knoppen2{justify-content:flex-start}}

/* de merknaam in de kop, in de kleuren van het logo (20 september 2026) */
.merknaam{white-space:nowrap}
.merknaam b{color:#607466;font-weight:inherit}
.merknaam i{color:#6FB894;font-style:normal}
.merknaam u{color:var(--donker);text-decoration:none}

/* knop in het logogroen, laatste stapje vast ingekleurd (20 september 2026) */
.knop.groen{background:#607466}
.knop.groen:hover{background:#546759}
.ministappen li:last-child .ms-ico{animation-name:msIcoLaatst}
@keyframes msIcoLaatst{0%,100%{background:var(--wit);border-color:var(--lijn);transform:none;box-shadow:0 0 0 0 rgba(111,184,148,0)}5%{background:var(--blad);border-color:var(--blad);color:var(--wit);transform:scale(1.08);box-shadow:0 0 0 0 rgba(111,184,148,.55)}12%{box-shadow:0 0 0 12px rgba(111,184,148,0)}14%,24%{background:var(--blad);border-color:var(--blad);color:var(--wit);transform:scale(1.02);box-shadow:0 0 0 0 rgba(111,184,148,0)}30%{background:var(--wit);border-color:var(--lijn);color:var(--donker);transform:none}}
/* nummer voor de titel, rij smaller op desktop (20 september 2026) */
.ministappen .ms-n{font-style:normal;color:var(--blad);font-weight:700;margin-right:6px}
.ministappen .ms-t>span{white-space:nowrap}
/* desktop: icoontje boven de tekst, vijf smalle kolommen van 168px, lijntje tussen de icoontjes */
@media (min-width:641px){
  .vk .ministappen{max-width:900px;gap:0;align-items:flex-start}
  .vk .ministappen li{position:relative;flex:none;width:168px;flex-direction:column;align-items:center;text-align:center;white-space:normal;gap:8px}
  .vk .ministappen .ms-t{align-items:center}
  .vk .ministappen .ms-t small{max-width:150px}
  .vk .ministappen li+li::before{position:absolute;top:17px;left:calc(-50% + 24px);width:calc(100% - 48px);margin:0;height:2px}
}

/* vijf grote stappen (20 september 2026) */
@media (min-width:700px){.vk .stappen.groot{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.vk .stappen.groot{grid-template-columns:repeat(5,1fr);gap:14px}.vk .stappen.groot .stap{padding:22px 16px 18px}.vk .stappen.groot .ghost{font-size:80px}}

/* vraagscherm (20 september 2026): Vorige en Volgende, pakketten, uren-schuif, toelichting */
.knoppenrij{display:flex;gap:10px;margin-top:22px}
.knoppenrij .knop.tweede{flex:0 0 auto;min-width:110px}
.knoppenrij .knop.hoofd{flex:1}
.antwoorden.meer .optie{display:flex;flex-direction:column;gap:0}
.antwoorden.meer.vol .optie:not(.aan) .antwoord{opacity:.55}
.pakketten{display:flex;flex-wrap:wrap;gap:8px;padding:8px 0 4px 36px;animation:in .25s both}
.pakketten input{flex:1 1 100%;margin-top:2px}
.chip{border:1.5px solid var(--lijn);background:var(--wit);border-radius:999px;padding:6px 12px;font-size:14px;line-height:1.3;cursor:pointer;color:var(--donker);min-height:34px}
.chip:hover{border-color:var(--midden)}
.chip.aan{background:var(--donker);border-color:var(--donker);color:var(--wit);font-weight:600}
.uren{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r-kaart);padding:20px 18px 16px}
.uren-waarde{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.uren-waarde b{font-size:38px;font-weight:700;letter-spacing:-.02em;line-height:1;min-width:60px}
.uren-waarde span{font-size:15px;color:var(--midden)}
.schuif{-webkit-appearance:none;appearance:none;width:100%;height:36px;margin:4px 0 0;cursor:pointer;display:block;
  background:linear-gradient(90deg,var(--blad) 0,var(--blad) var(--p,0%),var(--lijn) var(--p,0%),var(--lijn) 100%) no-repeat center/100% 10px;border-radius:999px}
.schuif::-webkit-slider-thumb{-webkit-appearance:none;width:34px;height:34px;border-radius:50%;background:var(--donker);border:3px solid var(--wit);box-shadow:0 2px 8px rgba(0,0,0,.25)}
.schuif::-moz-range-thumb{width:28px;height:28px;border-radius:50%;background:var(--donker);border:3px solid var(--wit);box-shadow:0 2px 8px rgba(0,0,0,.25)}
.schuif:focus-visible{outline-offset:6px}
.uren-schaal{display:flex;justify-content:space-between;font-size:13px;color:var(--grijs)}
.uren-geen{display:inline-block;margin-top:14px;color:var(--midden);font-weight:600;font-size:15px;border:1.5px solid var(--lijn);border-radius:999px;padding:7px 14px;background:var(--wit)}
.uren-geen.aan{background:var(--mint);border-color:var(--donker);color:var(--donker)}
.toelichting{margin-top:14px}
.toelichting-knop{color:var(--midden);font-size:15px}
.toelichting-veld{width:100%;padding:10px 14px;font:inherit;font-size:16px;line-height:1.45;border:1px solid var(--midden);border-radius:var(--r-knop);background:var(--wit);color:var(--donker);resize:vertical;min-height:64px}
.toelichting-veld:focus{outline:3px solid var(--mint);outline-offset:0;border-color:var(--donker)}
@media (max-width:480px){.knoppenrij .knop.tweede{min-width:96px;padding:12px 16px}.uren-waarde b{font-size:32px}.pakketten{padding-left:0}}

/* ── privacy (20 september 2026) ─────────────── */
.privacy{gap:10px;max-width:640px}
.privacy h2{font-size:18px;margin-top:14px}
.privacy p{line-height:1.55}
.voet a{color:inherit}

/* ── voorkant: hero met donkere foto, compacter (21 september 2026) ── */
.vk .hero1.metfoto{position:relative;overflow:hidden;background:var(--donker);padding-top:clamp(44px,6vw,64px);padding-bottom:clamp(36px,5vw,56px)}
.vk .hero1.metfoto .herofoto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;z-index:0;filter:saturate(.75)}
.vk .hero1.metfoto::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(38,46,45,.66) 0,rgba(38,46,45,.6) 55%,rgba(38,46,45,.78) 100%)}
.vk .hero1.metfoto .binnen{position:relative;z-index:2}
.vk .hero1.metfoto h1{color:var(--wit);font-size:clamp(32px,5vw,54px);text-shadow:0 2px 28px rgba(0,0,0,.45)}
.vk .hero1.metfoto h1 .merknaam b,.vk .hero1.metfoto h1 .merknaam u{color:var(--wit)}
.vk .hero1.metfoto h1 .merknaam i{color:var(--mint)}
.vk .hero1.metfoto p.lead{color:#EEF3F0;margin-top:16px;font-size:clamp(16px,1.8vw,18px);text-shadow:0 1px 12px rgba(0,0,0,.4)}
.vk .hero1.metfoto p.lead b{color:var(--wit)}
.vk .hero1.metfoto .ministappen{margin-top:18px}
.vk .hero1.metfoto .ministappen li{color:#E6EFE9}
.vk .hero1.metfoto .ministappen .ms-t small{color:#C9D6CE}
.vk .hero1.metfoto .ministappen .ms-n{color:var(--mint)}
.vk .hero1.metfoto .ministappen li+li::before{background:rgba(255,255,255,.28)}
.vk .hero1.metfoto .rij{margin-top:22px}
.vk .hero1.metfoto .knop{min-height:46px;padding:10px 20px;font-size:15.5px}
.vk .hero1.metfoto .knop.tweede{background:transparent;color:var(--wit);border-color:rgba(255,255,255,.55)}
.vk .hero1.metfoto .knop.tweede:hover{background:rgba(255,255,255,.1)}
.vk .hero1.metfoto .knopnoot{color:var(--mint)}
.vk .initiatief{background:#E9F1EC}
.vk .initiatief .kopblok .sub{font-size:16px}
@media (prefers-reduced-motion:reduce){.vk .hero1.metfoto .herofoto{animation:none}}

/* ── rust in de invulschermen (21 september 2026) ────────────────
   Geen schuif- of verschijnanimatie, een vaste plek voor de knoppen en
   een vaste minimumhoogte, zodat het scherm niet danst bij het doorklikken. */
/* 28 september 2026: de knop plakt niet meer, hij staat onderaan de inhoud; de vraag schuift wel binnen */
.vraag{display:flex;flex-direction:column;min-height:calc(100dvh - 170px)}
.vraag .antwoorden{min-height:0}
.vraag .knoppenrij{margin-top:auto;padding:18px 0 calc(8px + env(safe-area-inset-bottom));margin-bottom:0}
.nvt{display:inline-block;align-self:flex-start;margin-top:14px;color:var(--midden);font-weight:600;font-size:15px}
.nvt.aan{color:var(--donker);text-decoration:underline}
.open-veld{min-height:120px;margin-top:4px}
.uren + .uren{margin-top:14px}
.uren > .label{display:block;margin-bottom:10px}
.beeld:empty, .ak .foto:has(> .naam:only-child){background:var(--mint)}
.ak .wens{font-size:14px;color:var(--midden);margin-top:8px;font-style:italic}

/* introductiefilm bij Zo werkt het: rechtopstaand, naast de stappen */
.filmveld{margin:20px auto 0;max-width:330px;position:relative}
/* de film speelt gedempt; met deze knop zet de bezoeker het geluid aan */
.geluidknop{position:absolute;right:12px;bottom:12px;width:42px;height:42px;border-radius:50%;
  background:rgba(20,28,26,.55);color:#fff;border:1px solid rgba(255,255,255,.28);
  display:grid;place-items:center;cursor:pointer;transition:background .2s}
.geluidknop:hover{background:rgba(20,28,26,.75)}
.geluidknop svg{width:20px;height:20px;display:block}
.geluidknop .luid{display:none}
.geluidknop.aan .luid{display:block}
.geluidknop.aan .stil{display:none}
.film{display:block;width:100%;aspect-ratio:9/16;border-radius:22px;background:#343E3D;
      box-shadow:0 14px 32px rgba(52,62,61,.14)}
/* links de stappen, rechts de film; op een smal scherm onder elkaar */
.scanduo{display:grid;gap:22px;align-items:start}
@media (min-width:900px){
  /* het blok als geheel smal houden, anders rekt de stappenkolom op een breed
     scherm mee en blijft de film klein */
  /* kop, uitleg en stappen links, de film rechts over de volle hoogte, zodat
     het samen een blok vormt dat op een laptop in beeld past */
  .scanduo{--filmh:min(52vh,480px);
    grid-template-columns:minmax(0,600px) auto;gap:48px;margin:0;
    max-width:1060px;align-items:end;justify-content:start}
  .scanduo .scanlinks{display:block}
  .scanduo .scanlinks .stappenveld{margin-top:16px}
  .scanduo .kopblok{text-align:left;margin:0 0 18px;max-width:none}
  .scanduo .kopblok h2{font-size:clamp(24px,2.4vw,32px)}
  .scanduo .kopblok .sub{font-size:15.5px;margin-top:10px}
  .scanduo .stappenveld{margin-top:0}
  .scanduo .spoor{display:none}
  .scanduo .filmveld{margin:0;max-width:none;width:-moz-fit-content;width:fit-content;
    height:var(--filmh)}
  .scanduo .film{height:100%;width:auto}
  .vk .scanduo .stappen.groot{grid-template-columns:1fr;gap:7px}
  .vk .scanduo .stappen.groot .stap{flex-direction:row;flex-wrap:wrap;align-items:center;
    gap:1px 10px;padding:8px 12px}
  /* zelfde opzet als op opsight.nl: een genummerd bolletje in plaats van een
     icoon met een groot cijfer op de achtergrond */
  .vk .scanduo .stappen.groot .disc{display:none}
  .vk .scanduo .stappen.groot h3{flex:1 1 auto;min-width:0;margin:0;font-size:14px;font-weight:800;
    line-height:1.2}
  .vk .scanduo .stappen.groot p{width:100%;font-size:12.2px;line-height:1.35;margin:0;
    padding-left:33px}
  .vk .scanduo .stappen.groot small{display:none}
  .vk .scanduo .stappen.groot .ghost{position:static;width:23px;height:23px;border-radius:50%;
    background:#607466;color:#fff;font-size:12px;font-weight:800;line-height:1;
    letter-spacing:0;opacity:1;display:grid;place-items:center;flex:0 0 auto}
  /* exact dezelfde kaart als op opsight.nl */
  .vk .scanduo .stappen.groot .stap{border-radius:22px}
  .vk #zowerkthet .scanduo .kopblok .sub{font-size:15.5px;line-height:1.6}
  .vk .scansec{background:#EEF2EF}
}
/* film en stappen passen samen op een scherm */
.vk #zowerkthet .sub{font-size:16px;margin-top:8px}
@media (min-width:900px){.vk #zowerkthet .sub{max-width:92ch}}
@media (min-width:700px){
  .vk #zowerkthet{padding-top:32px;padding-bottom:32px}
  .vk .stappen.groot{gap:11px}
  .vk .stappen.groot .stap{padding:14px 12px 12px;gap:5px}
  .vk .stappen.groot .disc{width:40px;height:40px}
  .vk .stappen.groot .disc .ico{width:22px;height:22px}
  .vk .stappen.groot .ghost{font-size:52px;right:9px;top:3px}
  .vk .stappen.groot h3{font-size:15px;margin-top:2px}
  .vk .stappen.groot p{font-size:12.8px;line-height:1.38}
  .vk .stappen.groot small{font-size:10.5px;padding-top:5px}
  .stappenveld .spoor{height:3px;margin:15px 0 12px}
}
@media (max-width:699px){
  .filmveld{margin:16px auto 0}
  .vk .stappen.groot{gap:9px}
  .vk .stappen.groot .stap{padding:12px 14px;gap:2px 12px}
  .vk .stappen.groot .disc{width:40px;height:40px}
  .vk .stappen.groot .disc .ico{width:23px;height:23px}
  .vk .stappen.groot .ghost{font-size:48px;top:0;right:8px}
  .vk .stappen.groot h3{font-size:15.5px;flex:1 1 auto;min-width:0}
  .vk .stappen.groot small{order:2;flex:none;margin-left:auto;margin-right:30px;padding-top:0;
                            font-size:9.5px;letter-spacing:.03em;white-space:nowrap}
  .vk .stappen.groot .stap{gap:2px 10px}
  .vk .stappen.groot p{order:3;width:100%;font-size:13.5px;line-height:1.35;margin-top:2px}
  .stappenveld .spoor{margin:14px 0 12px}
}

/* Op een telefoon dezelfde sectie als op opsight.nl: een genummerd bolletje in
   plaats van een icoon met een groot cijfer erachter, geen tijdregel, kop links
   en dezelfde achtergrond (22 september 2026) */
@media (max-width:899px){
  .vk .scansec{background:#EEF2EF}
  .vk .scanduo{gap:0}
  .vk #zowerkthet .kopblok{text-align:left;margin:0;max-width:none}
  .vk #zowerkthet .kopblok h2{font-size:clamp(25px,6.4vw,32px)}
  .vk #zowerkthet .kopblok .sub{font-size:16px;line-height:1.6;margin-top:11px;max-width:none}
  .vk .scanduo .stappenveld{margin-top:22px}
  .vk .scanduo .stappen.groot{gap:14px;margin-top:0}
  .vk .scanduo .stappen.groot .stap{flex-direction:column;flex-wrap:nowrap;
    align-items:flex-start;gap:0;padding:20px;border-radius:22px}
  .vk .scanduo .stappen.groot .stap:hover{transform:none;box-shadow:none}
  .vk .scanduo .stappen.groot .disc{display:none}
  .vk .scanduo .stappen.groot small{display:none}
  .vk .scanduo .stappen.groot .ghost{position:static;width:34px;height:34px;flex:none;
    border-radius:50%;background:#607466;color:#fff;font-size:16px;font-weight:800;
    line-height:1;letter-spacing:0;opacity:1;display:grid;place-items:center;
    margin:0 0 14px}
  .vk .scanduo .stappen.groot h3{flex:none;width:100%;margin:0;font-size:19px;font-weight:800;
    line-height:1.2}
  .vk .scanduo .stappen.groot p{width:100%;margin-top:11px;font-size:16px;line-height:1.6;
    padding-left:0}
  .vk .scanduo .filmveld{margin:22px auto 0}
}
/* ── rapport, derde opzet (24 september 2026): antwoord eerst, vijf hoofdstukken, cijfers rechts op een vaste plek ── */
.r3 .band .tekst p{font-size:15px}
.r3-kort{margin-top:22px;background:var(--wit);border:1px solid var(--lijn);border-top:5px solid var(--blad);border-radius:var(--r-kaart);padding:24px 28px;display:flex;flex-direction:column;gap:14px;break-inside:avoid}
.r3-kort .naam{font-size:14px;font-weight:600;color:var(--midden)}
.r3-kort h2{font-size:clamp(24px,3.2vw,34px);line-height:1.15;letter-spacing:-.02em;max-width:900px;text-wrap:balance}
.r3-kort dl{margin:6px 0 0;display:grid;gap:0}
.r3-kort dl div{display:grid;grid-template-columns:1fr;gap:2px;padding:12px 0;border-top:1px solid var(--haar)}
@media (min-width:700px){.r3-kort dl div{grid-template-columns:220px minmax(0,1fr);gap:20px}}
.r3-kort dt{font-weight:600;font-size:15px}
.r3-kort dd{margin:0;font-size:15.5px;line-height:1.55;color:var(--midden);max-width:760px}
.r3-kort dd ol{margin:0;padding-left:20px;display:grid;gap:3px}
.r3-kort dd ol b{color:var(--donker);font-weight:600}
.r3-hfd{margin-top:56px;padding-top:26px;border-top:2px solid var(--donker);display:grid;grid-template-columns:1fr;gap:6px}
@media (min-width:800px){.r3-hfd{grid-template-columns:150px minmax(0,1fr);gap:24px}}
.r3-hfd .nr{font-size:52px;font-weight:700;line-height:.9;color:var(--blad);letter-spacing:-.04em}
.r3-hfd>div{display:flex;flex-direction:column;gap:6px}
.r3-hfd .naam{font-size:14px;font-weight:600;color:var(--midden)}
.r3-hfd h2{font-size:clamp(24px,3vw,32px);line-height:1.18;letter-spacing:-.02em;max-width:860px;text-wrap:balance}
.r3-hfd p{font-size:16px;color:var(--midden);margin:2px 0 0;max-width:820px;line-height:1.55}
@media (min-width:800px){.r3-hfd .nr{grid-row:1/3}.r3>.r3-tekst,.r3>.r3-tegels,.r3>.r3-sub,.r3>.r3-subtekst,.r3>.themakaart,.r3>.r3-afdelingen,.r3>.r3-kaart,.r3>.r3-kansen,.r3>.r3-plekken,.r3>.r3-samen,.r3>.r3-verder,.r3>.r3-weetje,.r3>.wanneer,.r3>.waarschuwing,.r3>.inv,.r3>.r3-verantwoording{margin-left:174px}}
.r3-hfd+*{margin-top:22px}
.r3-tekst{display:flex;flex-direction:column;gap:10px;max-width:760px}
.r3-tekst p{font-size:17px;line-height:1.6;color:var(--midden);margin:0}
.r3-tekst p:first-child{color:var(--donker)}
.r3-sub{font-size:19px;margin-top:34px;letter-spacing:-.01em}
.r3-subtekst{font-size:15px;color:var(--grijs);margin:6px 0 0;max-width:820px;line-height:1.55}
.r3-sub+.r3-subtekst{margin-top:4px}
.r3-sub+*,.r3-subtekst+*{margin-top:14px}
.r3-tegels{display:grid;gap:12px;grid-template-columns:1fr}
@media (min-width:700px){.r3-tegels.n2{grid-template-columns:repeat(2,1fr)}.r3-tegels.n3{grid-template-columns:repeat(3,1fr)}.r3-tegels.n4{grid-template-columns:repeat(4,1fr)}}
.r3-tegel{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r-kaart);padding:18px;display:flex;flex-direction:column;gap:4px;break-inside:avoid}
.r3-tegel b{font-size:clamp(26px,3vw,34px);letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums;white-space:nowrap}
.r3-tegel span{font-size:15px}
.r3-tegel small{font-size:13px;color:var(--grijs);line-height:1.45;margin-top:4px}
.r3-tegel:first-child{background:var(--mint);border-color:var(--mint)}
.r3 .themakaart .verschillen h3{font-size:16px}
.r3 .verschil li{grid-template-columns:200px 1fr}
.r3-afdelingen{display:flex;flex-direction:column;gap:12px}
.r3-afd{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r-kaart);overflow:hidden;display:grid;grid-template-columns:1fr;break-inside:avoid}
@media (min-width:800px){.r3-afd{grid-template-columns:170px minmax(0,1fr) 260px}}
.r3-afd .foto{background:var(--mint);min-height:130px;position:relative}
.r3-afd .foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.r3-afd .midden{padding:16px 18px;display:flex;flex-direction:column;gap:10px;min-width:0}
.r3-afd h3{font-size:18px;display:flex;align-items:center;gap:8px}
.r3-afd h3 .ico{width:22px;height:22px}
.r3-afd .stand{display:grid;grid-template-columns:auto 1fr;gap:6px 10px;align-items:center;margin:0}
.r3-afd .stand .rij2{display:flex;gap:6px;flex-wrap:wrap}
.r3-afd .stand em{font-style:normal;font-size:12.5px;border-radius:999px;padding:3px 10px;border:1px solid var(--rood);color:var(--rood)}
.r3-afd .stand em.a{border-color:var(--neutraal);color:var(--grijs)}
.r3-afd .stand small{color:var(--grijs);font-size:12.5px}
.r3-afd ol{margin:0;padding:0;list-style:none;display:grid;gap:5px}
.r3-afd ol li{display:grid;grid-template-columns:18px 1fr;gap:6px;font-size:14.5px;line-height:1.45}
.r3-afd ol li b{color:var(--rood);font-size:13px;padding-top:2px}
.r3-afd .rechts{padding:16px 18px;display:flex;flex-direction:column;gap:10px;background:var(--papier)}
.r3-afd blockquote{margin:0;font-style:italic;font-size:14px;line-height:1.5}
.r3-afd blockquote span{display:block;font-style:normal;font-size:12.5px;color:var(--grijs);margin-bottom:4px}
.r3-afd .eerste{margin:auto 0 0;font-size:13.5px;color:var(--midden)}
.r3-afd .eerste b{color:var(--donker)}
.r3-kaart{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r-kaart);padding:16px 18px 6px;break-inside:avoid}
.r3-kaart-svg{overflow-x:auto}
.r3-kaart svg{display:block;width:100%;min-width:640px;height:auto}
.r3-kaart .zone{fill:var(--mint);opacity:.4}
.r3-kaart .zonelabel{fill:var(--midden);font-size:13px;font-weight:600}
.r3-kaart .grid{stroke:var(--haar);stroke-width:1}
.r3-kaart .as{fill:var(--grijs);font-size:12px}
.r3-kaart .kol{fill:var(--donker);font-size:13.5px;font-weight:600}
.r3-kaart .stip-ja{fill:var(--donker);stroke:var(--wit);stroke-width:2}
.r3-kaart .stipnr{fill:var(--wit);font-size:13px;font-weight:700}
.r3-kaart .stip-nee{fill:var(--wit);stroke:var(--midden);stroke-width:2}
.r3-kaart .lab{fill:var(--donker);font-size:13px}
.r3-kaart .lab.ja{font-weight:600}
.r3-kaart .lab.sub{fill:var(--grijs);font-size:12px;font-weight:400}
.r3 .wanneer{margin-top:0;margin-bottom:0}
.r3-kansen{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r-kaart);padding:6px 18px;break-inside:avoid;overflow-x:auto}
.r3-kans{display:grid;grid-template-columns:34px minmax(220px,1fr) minmax(200px,1.1fr) 170px 130px;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--haar);min-width:760px;font-variant-numeric:tabular-nums}
.r3-kans:last-child{border-bottom:0}
.r3-kans.r3-kanskop{font-size:12.5px;color:var(--grijs);padding:8px 0}
.r3-kans .nr{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:13px}
.r3-kans.ja .nr{background:var(--donker);color:var(--wit)}
.r3-kans .titel{font-size:15px;line-height:1.3}
.r3-kans.ja .titel{font-weight:600}
.r3-kans .titel small{display:block;font-weight:400;font-size:12.5px;color:var(--grijs);margin-top:2px}
.r3-kans .staaf{display:flex;align-items:center;gap:10px}
.r3-kans .staaf i{display:block;height:10px;border-radius:0 5px 5px 0;background:var(--blad);flex:none;max-width:60%}
.r3-kans.ja .staaf i{background:var(--donker)}
.r3-kans .staaf b{font-size:14.5px;white-space:nowrap}
.r3-kans .getal{font-size:14px;white-space:nowrap;text-align:right}
.r3-plekken{display:flex;flex-direction:column;gap:14px}
.r3-plek{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r-kaart);padding:20px 22px;display:grid;gap:18px;grid-template-columns:1fr;break-inside:avoid}
@media (min-width:800px){.r3-plek{grid-template-columns:minmax(0,1fr) 300px;gap:28px}}
.r3-plek-kop{display:flex;align-items:center;gap:14px}
.r3-plek-kop .n{flex:none;width:40px;height:40px;border-radius:50%;background:var(--donker);color:var(--wit);display:grid;place-items:center;font-weight:700;font-size:18px}
.r3-plek-kop small{display:block;font-size:13px;color:var(--midden);font-weight:600}
.r3-plek-kop h3{font-size:20px;line-height:1.25}
.r3-plek-tekst{display:flex;flex-direction:column;gap:8px;min-width:0}
.r3-plek-tekst p{margin:0;font-size:15px;line-height:1.55;color:var(--midden);max-width:720px}
.r3-plek-tekst p b{color:var(--donker)}
.r3-plek-tekst p.opl{color:var(--donker);font-size:16px}
.r3-plek-tekst p.reken{font-size:13.5px;color:var(--grijs);background:var(--papier);border-radius:8px;padding:10px 12px;font-variant-numeric:tabular-nums}
.r3-cijfers{margin:0;display:grid;gap:10px;align-content:start}
@media (min-width:800px){.r3-cijfers{border-left:1px solid var(--haar);padding-left:22px}}
.r3-cijfers div{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--haar);padding-bottom:8px}
.r3-cijfers div:last-child{border-bottom:0}
.r3-cijfers dt{font-size:13.5px;color:var(--grijs)}
.r3-cijfers dd{margin:0;font-size:15px;font-weight:600;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.r3-samen{margin-top:14px;display:grid;gap:12px;grid-template-columns:1fr;background:var(--donker);color:var(--wit);border-radius:var(--r-kaart);padding:18px 22px;break-inside:avoid}
@media (min-width:700px){.r3-samen{grid-template-columns:repeat(3,1fr)}}
.r3-samen span{display:block;font-size:13px;color:var(--mint)}
.r3-samen b{font-size:22px;font-variant-numeric:tabular-nums;white-space:nowrap}
.r3-weetje{margin-top:26px;background:var(--papier);border:1px solid var(--lijn);border-left:4px solid var(--blad);border-radius:var(--r-kaart);padding:14px 18px;display:grid;gap:4px;break-inside:avoid}
.r3-weetje b{font-size:14px;color:var(--midden)}
.r3-weetje p{margin:0;font-size:15px;line-height:1.55;max-width:860px}
.r3-weetje p.bron{font-size:12.5px;color:var(--grijs)}
.r3-weetje a{color:var(--grijs)}
.r3-verder{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r-kaart);padding:22px 24px;display:grid;gap:22px;grid-template-columns:1fr;break-inside:avoid}
@media (min-width:800px){.r3-verder{grid-template-columns:minmax(0,1fr) 250px}}
.r3-verder .tekst{display:flex;flex-direction:column;gap:10px}
.r3-verder .tekst p{margin:0;font-size:16px;line-height:1.6;color:var(--midden);max-width:680px}
.r3-verder .tekst p:first-child{color:var(--donker)}
.r3-verder .wie{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.r3-verder .wie img{width:96px;height:96px;border-radius:50%;object-fit:cover}
.r3-verder .wie p{margin:0;font-size:14px;color:var(--grijs)}
.r3-verder .wie p b{color:var(--donker);font-size:15px}
.r3-verder .knoppen{display:flex;flex-direction:column;gap:8px;width:100%}
.r3-verder .knoppen .knop{width:100%;text-align:center;justify-content:center}
.r3-bijlage{margin-top:56px;padding-top:22px;border-top:2px solid var(--donker)}
.r3-bijlage h2{font-size:24px}
.r3 .inv{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.r3-verantwoording ul{margin:0;padding-left:18px;display:grid;gap:6px;max-width:900px}
.r3-verantwoording li{font-size:13.5px;line-height:1.55;color:var(--grijs)}
@media print{
  .r3-hfd{grid-template-columns:90px minmax(0,1fr);gap:16px;margin-top:0}
  .r3-hfd .nr{grid-row:1/3;font-size:40px}.r3-hfd h2{font-size:22px}.r3-hfd p{font-size:13px}
  .r3>.r3-tekst,.r3>.r3-tegels,.r3>.r3-sub,.r3>.r3-subtekst,.r3>.themakaart,.r3>.r3-afdelingen,.r3>.r3-kaart,.r3>.r3-kansen,.r3>.r3-plekken,.r3>.r3-samen,.r3>.r3-verder,.r3>.r3-weetje,.r3>.wanneer,.r3>.waarschuwing,.r3>.inv,.r3>.r3-verantwoording{margin-left:0}
  .r3-kort dl div{grid-template-columns:170px minmax(0,1fr);gap:14px}.r3-kort dd{font-size:13px}.r3-kort h2{font-size:24px}
  .r3-tekst p{font-size:14px}
  .r3-tegels.n4{grid-template-columns:repeat(4,1fr)}.r3-tegels.n3{grid-template-columns:repeat(3,1fr)}.r3-tegel b{font-size:22px}.r3-tegel span{font-size:12.5px}.r3-tegel small{font-size:11px}
  .r3-plek{grid-template-columns:minmax(0,1fr) 210px;gap:18px;padding:14px 16px}.r3-plek-tekst p{font-size:12.5px;line-height:1.45}.r3-plek-kop h3{font-size:16px}.r3-plek-tekst p.reken{font-size:11.5px;padding:7px 10px}
  .r3-cijfers{border-left:1px solid var(--haar);padding-left:14px}.r3-cijfers dd{font-size:12.5px}.r3-cijfers dt{font-size:11.5px}
  .r3-samen{grid-template-columns:repeat(3,1fr)}.r3-samen b{font-size:18px}
  .r3-afd{grid-template-columns:120px minmax(0,1fr) 200px}.r3-afd .midden,.r3-afd .rechts{padding:10px 12px}.r3-afd ol li{font-size:12px}.r3-afd blockquote{font-size:11.5px}.r3-afd h3{font-size:15px}
  .r3-verder{grid-template-columns:minmax(0,1fr) 200px}.r3-verder .tekst p{font-size:13px}
  .r3 .nieuwe-pagina{break-before:page;border-top:0;padding-top:0}
  .r3-kaart svg{min-width:0}
  .r3-kans{min-width:0;grid-template-columns:26px minmax(0,1.3fr) minmax(0,1fr) 130px 105px;gap:10px;padding:8px 0}.r3-kans .titel{font-size:12.5px}.r3-kans .getal,.r3-kans .staaf b{font-size:12px}
  .r3-plek{grid-template-columns:minmax(0,1fr) 230px}
}

/* ── rapport, rustiger (24 september 2026): geen kaders om alles, donkere leestekst, groen alleen als accent,
   fotoband bij elk hoofdstuk, één leeskolom ── */
.r4{--tekst:#2B3432;--zacht:#6B7571;color:var(--tekst)}
.r4>*{margin-left:0!important}
.r4 p,.r4 li,.r4 dd{color:var(--tekst)}
.r4 .r3-kort{border:0;border-radius:0;border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn);background:none;padding:28px 0;margin-top:30px}
.r4 .r3-kort .naam{color:var(--zacht);font-weight:500}
.r4 .r3-kort h2{font-size:clamp(26px,3.4vw,36px);line-height:1.15;max-width:820px}
.r4 .r3-kort dd{color:var(--tekst);font-size:16px}
.r4 .r3-kort dd ol b{font-weight:600}
.r4 .r3-hfd{display:block;margin-top:72px;padding-top:0;border-top:0}
.r4-foto{height:210px;border-radius:14px;overflow:hidden;background:var(--mint);margin-bottom:26px}
.r4-foto img{width:100%;height:100%;object-fit:cover;display:block}
.r4-kop{display:flex;flex-direction:column;gap:8px;max-width:820px}
.r4-kop .naam{font-size:15px;font-weight:500;color:var(--zacht);display:flex;align-items:center;gap:10px}
.r4-kop .naam b{width:28px;height:28px;border-radius:50%;background:var(--donker);color:var(--wit);display:grid;place-items:center;font-size:14px}
.r4-kop h2{font-size:clamp(26px,3.2vw,34px);line-height:1.15;letter-spacing:-.02em;text-wrap:balance}
.r4-kop p{font-size:16.5px;line-height:1.6;color:var(--zacht);margin:0}
.r4 .r3-hfd+*{margin-top:26px}
.r4 .r3-tekst{max-width:760px}
.r4 .r3-tekst p{font-size:17px;line-height:1.7;color:var(--tekst)}
.r4 .r3-sub{font-size:20px;margin-top:44px}
.r4 .r3-subtekst{color:var(--zacht);font-size:15.5px}
.r4 .r3-tegels{gap:0;border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn)}
.r4 .r3-tegel,.r4 .r3-tegel:first-child{background:none;border:0;border-radius:0;padding:18px 20px 18px 0}
@media (min-width:700px){.r4 .r3-tegel+.r3-tegel{border-left:1px solid var(--lijn);padding-left:20px}}
.r4 .r3-tegel b{font-size:clamp(28px,3.2vw,38px);color:var(--donker)}
.r4 .r3-tegel span{color:var(--tekst)}
.r4 .r3-tegel small{color:var(--zacht)}
.r4 .themakaart{background:none;border:0;padding:0;border-radius:0}
.r4 .raster th[scope=row]{background:var(--papier)}
.r4-afdelingen{border-top:1px solid var(--lijn)}
.r4-afd{display:grid;grid-template-columns:1fr;gap:10px 28px;padding:20px 0;border-bottom:1px solid var(--lijn);break-inside:avoid}
@media (min-width:800px){.r4-afd{grid-template-columns:200px minmax(0,1fr) 260px}}
.r4-afd h3{font-size:18px;margin-bottom:6px}
.r4-afd .links p{margin:0;font-size:13.5px;line-height:1.5}
.r4-afd .links .knel{color:var(--rood)}
.r4-afd .links .aand{color:var(--zacht)}
.r4-afd ul{margin:0;padding-left:18px;display:grid;gap:4px}
.r4-afd li{font-size:15.5px;line-height:1.5}
.r4-afd .eerste{margin:10px 0 0;font-size:14px;color:var(--zacht)}
.r4-afd blockquote{margin:0;font-size:15px;line-height:1.55;font-style:italic;color:var(--tekst);border-left:3px solid var(--blad);padding-left:14px}
.r4 .r3-kansen{background:none;border:0;border-radius:0;padding:0;border-top:1px solid var(--lijn)}
.r4 .r3-kans{border-bottom:1px solid var(--lijn)}
.r4 .r3-kans .titel small{color:var(--zacht)}
.r4 .r3-kans .staaf i{background:var(--mint)}
.r4 .r3-kans.ja .staaf i{background:var(--donker)}
.r4 .r3-plekken{gap:0;border-top:1px solid var(--lijn)}
.r4 .r3-plek{background:none;border:0;border-bottom:1px solid var(--lijn);border-radius:0;padding:28px 0}
.r4 .r3-plek-tekst p{color:var(--tekst);font-size:15.5px}
.r4 .r3-plek-tekst p b{font-weight:600}
.r4 .r3-plek-tekst p.opl{font-size:17px}
.r4 .r3-plek-tekst p.reken{background:none;padding:0;color:var(--zacht);font-size:14px}
.r4 .r3-cijfers dt{color:var(--zacht)}
.r4 .r3-cijfers dd{color:var(--donker)}
.r4 .r3-weetje{background:none;border:0;border-left:3px solid var(--blad);border-radius:0;padding:4px 0 4px 18px;margin-top:36px;max-width:760px}
.r4 .r3-weetje b{color:var(--zacht);font-weight:500}
.r4 .r3-weetje p{color:var(--tekst)}
.r4 .r3-verder{background:none;border:0;border-radius:0;padding:0}
.r4 .r3-verder .tekst p{color:var(--tekst)}
.r4 .wanneer{color:var(--tekst)}
.r4 .r3-bijlage{border-top:1px solid var(--lijn);margin-top:72px}
.r4 .r3-verantwoording li{color:var(--zacht)}
@media print{
  .r4-foto{height:44mm;margin-bottom:14px}
  .r4 .r3-hfd{margin-top:0}
  .r4-kop h2{font-size:22px}.r4-kop p{font-size:13px}
  .r4 .verschillen{break-inside:avoid}
  .r4-afd{grid-template-columns:130px minmax(0,1fr) 190px;gap:8px 16px;padding:12px 0}
  .r4-afd h3{font-size:14.5px}.r4-afd li{font-size:12px}.r4-afd .links p,.r4-afd .eerste{font-size:11.5px}.r4-afd blockquote{font-size:12px}
  .r4 .r3-tekst p{font-size:14px}
  .r4 .r3-plek{padding:14px 0}.r4 .r3-plek-tekst p{font-size:12.5px}.r4 .r3-plek-tekst p.opl{font-size:13.5px}.r4 .r3-plek-tekst p.reken{font-size:11.5px}
  .r4 .r3-kort{padding:16px 0}.r4 .r3-kort h2{font-size:24px}.r4 .r3-kort dd{font-size:13px}
  .r4 .r3-weetje{margin-top:18px}.r4 .r3-weetje p{font-size:12.5px}
  .r4 .r3-sub{margin-top:22px;font-size:16px}
  .r4 .raster td{height:24px}.r4 .raster th{font-size:11px;padding-bottom:4px}.r4 .raster th[scope=row]{font-size:12px}
  .r4 .verschillen{margin-top:10px;padding-top:8px;gap:8px}.r4 .verschil h4{font-size:12.5px}.r4 .verschil li{font-size:11.5px}
  .r4 .r3-tegel{padding:10px 12px 10px 0}.r4 .r3-tegel+.r3-tegel{border-left:1px solid var(--lijn);padding-left:12px}.r4 .r3-tegel b{font-size:22px}
}

/* samenvatting strak (24 september 2026): drie getallen, knelpunten op één regel, stappen als rijtjes */
.r5-kort{gap:22px}
.r5-pops{display:grid;grid-template-columns:1fr;border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn)}
@media (min-width:700px){.r5-pops.n2{grid-template-columns:repeat(2,1fr)}.r5-pops.n3{grid-template-columns:repeat(3,1fr)}}
.r5-pops div{display:flex;flex-direction:column;gap:2px;padding:18px 20px 18px 0}
@media (min-width:700px){.r5-pops div+div{border-left:1px solid var(--lijn);padding-left:22px}}
.r5-pops b{font-size:clamp(34px,4vw,46px);letter-spacing:-.03em;line-height:1.05;color:var(--donker);font-variant-numeric:tabular-nums;white-space:nowrap}
.r5-pops span{font-size:16px;font-weight:600}
.r5-pops small{font-size:13.5px;color:var(--zacht)}
.r5-knel{margin:0;font-size:16px;display:flex;gap:14px;align-items:baseline;flex-wrap:wrap}
.r5-knel span{font-size:13.5px;color:var(--rood);font-weight:600;min-width:110px}
.r5-stappen{display:grid;font-variant-numeric:tabular-nums}
.r5-stappen .r5-kop,.r5-stappen .rij{display:grid;grid-template-columns:36px minmax(0,1fr) 150px 150px;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--lijn)}
.r5-stappen .r5-kop{font-size:13px;color:var(--zacht);padding-top:0}
.r5-stappen .n{width:28px;height:28px;border-radius:50%;background:var(--donker);color:var(--wit);display:grid;place-items:center;font-weight:700;font-size:13px}
.r5-stappen b{font-size:16px;font-weight:600}
.r5-stappen .rij span:not(.n){font-size:15px}
.r5-inv{margin:0;font-size:14px;color:var(--zacht)}
@media (max-width:600px){.r5-stappen .r5-kop{display:none}.r5-stappen .rij{grid-template-columns:36px 1fr;row-gap:2px}.r5-stappen .rij span:not(.n){grid-column:2;font-size:13.5px;color:var(--zacht)}}
@media print{.r5-pops b{font-size:30px}.r5-pops span{font-size:13px}.r5-pops small{font-size:11px}.r5-stappen b{font-size:13px}.r5-stappen .rij span:not(.n){font-size:12.5px}.r5-stappen .r5-kop,.r5-stappen .rij{grid-template-columns:30px minmax(0,1fr) 120px 120px;padding:7px 0}.r5-knel{font-size:13px}.r5-inv{font-size:12px}}

/* onderbouwing per stap (24 september 2026) */
.r6-onder{margin:6px 0 0;display:grid;gap:0;border-top:1px solid var(--lijn)}
.r6-onder div{display:grid;grid-template-columns:1fr;gap:2px;padding:9px 0;border-bottom:1px solid var(--haar)}
@media (min-width:700px){.r6-onder div{grid-template-columns:190px minmax(0,1fr);gap:16px}}
.r6-onder dt{font-size:13.5px;font-weight:600;color:var(--donker)}
.r6-onder dd{margin:0;font-size:14.5px;line-height:1.55;color:var(--tekst,#2B3432);font-variant-numeric:tabular-nums}
@media print{.r6-onder div{grid-template-columns:130px minmax(0,1fr);gap:10px;padding:5px 0}.r6-onder dt{font-size:11px}.r6-onder dd{font-size:11.5px;line-height:1.45}}

/* hoofdstukopening (24 september 2026): foto in eigen verhouding naast de kop, niets bijgesneden */
.r7-open{display:grid;grid-template-columns:1fr;gap:22px;align-items:center}
@media (min-width:800px){.r7-open{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:36px}}
.r7-open.zonder{grid-template-columns:1fr}
.r7-foto{width:100%;height:auto;aspect-ratio:auto;border-radius:14px;display:block}
@media print{.r7-open{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:20px}.r7-foto{max-height:62mm;width:100%;object-fit:contain;object-position:left center}}
@media print{
  .r4 .r3-hfd{display:block!important}
  .r4 .r7-open{display:grid!important;grid-template-columns:62mm minmax(0,1fr)!important;gap:8mm!important;align-items:center}
  .r4 .r7-foto{max-height:none;width:62mm;height:auto;object-fit:initial}
}

/* pagina-opbouw (24 september 2026): nooit een onderwerp half afbreken, geen halflege pagina's */
.r3-samen-noot{grid-column:1/-1;margin:4px 0 0;font-size:13px;color:rgba(255,255,255,.75)}
@media print{
  .r3-hfd,.r3-sub,.r3-subtekst,.r3-bijlage,.r4-kop,.wanneer{break-after:avoid}
  .r3-verder,.r3-samen,.r3-plek,.r4-afd,.r3-weetje,.r3-kansen,.r3-verantwoording,.inv,.r5-kort,.r3-tekst,.r3-tegels,.raster-wrap,.verschillen{break-inside:avoid}
  .r3-samen-noot{font-size:11px}
  .r4 .r3-bijlage{margin-top:26px}
}
@media print{.r4 .r7-open.zonder{grid-template-columns:1fr!important}.r3-samen{margin:10px 0 14px}}

/* laatste ronde (24 september 2026): vaste letter in pdf, stapkaart over de volle breedte, hoofdstuklabel */
@font-face{font-family:'ArchivoVast';font-weight:400;src:url('/font/archivo-400.woff2') format('woff2')}
@font-face{font-family:'ArchivoVast';font-weight:500;src:url('/font/archivo-500.woff2') format('woff2')}
@font-face{font-family:'ArchivoVast';font-weight:600;src:url('/font/archivo-600.woff2') format('woff2')}
@font-face{font-family:'ArchivoVast';font-weight:700 800;src:url('/font/archivo-700.woff2') format('woff2')}
.r8-feiten{margin:2px 0 0;display:flex;flex-wrap:wrap;gap:4px 22px;font-size:14px;color:var(--zacht)}
.r8-feiten b{color:var(--donker);font-weight:600;font-variant-numeric:tabular-nums}
.r8-contact{margin-top:6px;font-size:14px}
.r4 .r3-plek{grid-template-columns:1fr!important}
.r4-kop .naam b{width:auto;height:auto;border-radius:0;background:none;color:var(--blad);display:inline;font-size:inherit;font-weight:700}
.r4-kop .naam b::before{content:'Hoofdstuk '}
.r4 .r3-samen .r3-samen-noot{color:rgba(255,255,255,.78)!important}
@media print{
  html,body,body *{font-family:'ArchivoVast',Arial,sans-serif!important}
  .r8-feiten{font-size:12px}
  .r8-contact{font-size:12.5px}
  .r6-onder dd{font-size:12px}.r6-onder dt{font-size:11.5px}
  .r3-kans{grid-template-columns:26px minmax(0,1.6fr) minmax(0,1fr) 128px 62px!important;gap:14px!important}
}
@media print{html,body,body *{text-rendering:geometricPrecision!important}}
/* kansentabel op de telefoon: onder elkaar in plaats van opzij vegen (24 september 2026) */
@media (max-width:700px){
  .r3-kansen{overflow-x:visible}
  .r3-kans{min-width:0;grid-template-columns:34px minmax(0,1fr);gap:4px 12px;align-items:start}
  .r3-kans.r3-kanskop{display:none}
  .r3-kans>span:nth-child(n+3){grid-column:2;font-size:13.5px;color:var(--zacht)}
  .r3-kans .staaf i{display:none}
  .r3-kans .staaf b{font-weight:600;color:var(--donker)}
  .r3-kans .staaf::before{content:'Besparing per jaar'}
  .r3-kans>span:nth-child(4)::before{content:'Investering '}
  .r3-kans>span:nth-child(5)::before{content:'Omvang '}
  .r3-kans>span:nth-child(3){gap:6px}
}
@media (max-width:700px){.r3-kans>span:nth-child(n+3){text-align:left!important;justify-self:start}.r3-kans .staaf{gap:6px}}

/* stapkaarten: tekst onder de kop inspringen, niet tegen de rand (24 september 2026) */
@media (min-width:600px){.r4 .r3-plek-tekst>:not(.r3-plek-kop){margin-left:54px}}
@media print{.r4 .r3-plek-tekst>:not(.r3-plek-kop){margin-left:54px}}
@media screen{main.breed{padding-left:clamp(16px,4vw,40px);padding-right:clamp(16px,4vw,40px)}}
/* rechterkant van tekst en tabel gelijk, regels niet te lang */
.r4 .r3-plek-tekst p{max-width:none}
@media screen{.r4 .r3-plek-tekst p,.r4 .r6-onder{max-width:760px}}

/* ── rapport in magazinestijl, richting C (25 september 2026) ──
   Eigen blok onder .mag; de oudere .r3/.r4-regels doen hier niet mee. Rond en zacht, veel wit,
   groen als accent, rood alleen voor knelpunten. */
.mag{--vlak:#FFFFFF;--mintzacht:#E6F4EC;--roodzacht:#F3DEDA;--zacht:#607466;gap:0;max-width:1040px;margin:0 auto;color:var(--donker)}
.mag .m-pag{padding:56px 0 8px}
.mag .m-pag.p1{padding-top:18px}
.mag .m-lab{display:block;font-size:13px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--midden)}
.mag p{color:var(--donker)}
.mag .m-knoppen{justify-content:flex-end;margin-bottom:14px}
/* pagina 1 */
.mag .m-blok{position:relative;overflow:hidden;background:var(--donker);color:#fff;border-radius:22px;padding:56px 60px 48px}
.mag .m-blok .m-lab{color:var(--mint);position:relative}
.mag .m-blok .bol{position:absolute;right:-70px;top:-80px;width:380px;height:380px;border-radius:50%;background:var(--blad);opacity:.25}
.mag .m-blok .bol2{position:absolute;right:110px;top:170px;width:110px;height:110px;border-radius:50%;background:var(--mint);opacity:.35}
.mag .m-groot{position:relative;display:flex;align-items:baseline;flex-wrap:wrap;gap:0 12px;margin-top:22px}
.mag .m-groot b{font-size:clamp(88px,13vw,150px);font-weight:800;letter-spacing:-.05em;line-height:.9;font-variant-numeric:tabular-nums}
.mag .m-groot span{font-size:clamp(24px,3.2vw,36px);font-weight:600;letter-spacing:-.01em}
.mag .m-blok p{position:relative;color:#DDE8E1;font-size:20px;line-height:1.45;max-width:620px;margin-top:18px}
.mag .m-in{padding:40px 0 0}
.mag .m-in>h2{font-size:28px;letter-spacing:-.02em;margin-bottom:18px}
.mag .m-drie{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.mag .m-drie.n2{grid-template-columns:repeat(2,minmax(0,1fr))}.mag .m-drie.n1{grid-template-columns:minmax(0,1fr)}
.mag .m-drie .k{background:var(--vlak);border-radius:18px;padding:20px 22px;display:flex;flex-direction:column;gap:6px}
.mag .m-drie .n{font-size:52px;font-weight:800;color:var(--mint);line-height:1}
.mag .m-drie h3{font-size:18px;line-height:1.3;margin-top:4px}
.mag .m-drie b{font-size:24px;font-weight:700;margin-top:auto;padding-top:6px;font-variant-numeric:tabular-nums}
.mag .m-drie small{font-size:14px;color:var(--midden)}
.mag .m-bubbel{position:relative;border-radius:22px;padding:26px 32px;margin:30px 0 22px}
.mag .m-bubbel::after{content:'';position:absolute;left:60px;bottom:-18px;border:18px solid transparent;border-bottom:0;border-top-color:inherit}
.mag .m-bubbel.mint{background:var(--mint);border-top-color:var(--mint)}
.mag .m-bubbel.zacht{background:var(--mintzacht);border-top-color:var(--mintzacht)}
.mag .m-bubbel.donker{background:var(--donker);border-top-color:var(--donker);color:#fff}
.mag .m-bubbel>b{display:block;font-size:22px;line-height:1.3;letter-spacing:-.01em;margin-bottom:6px}
.mag .m-bubbel.zacht>b{font-size:18px}
.mag .m-bubbel p{font-size:17px;line-height:1.5}
.mag .m-bubbel .m-lab{margin-bottom:10px}
/* bewerken door Opsight (28 september 2026) */
.mag .bw-balk{position:sticky;top:64px;z-index:4;margin:-8px 0 14px;padding:10px 0;background:var(--papier);border-bottom:1px solid var(--haar)}
.mag .bw-in{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.mag .bw-stand{font-size:14px;color:var(--midden);line-height:1.4;flex:1 1 260px}.mag .bw-stand b{color:var(--donker);font-weight:600}
.mag .bw-knoppen{display:flex;gap:8px;flex-wrap:wrap}.mag .bw-knoppen .knop{min-height:38px;padding:6px 14px;font-size:14px}
.mag .bw-std,.mag .bw-stapknoppen,.mag .bw-verborgen{display:none}
.mag.bw-aan .bw-veld{outline:1.5px dashed #9BB8A8;outline-offset:3px;border-radius:6px;cursor:text;min-width:2em}
.mag.bw-aan .bw-veld:focus{outline-color:var(--blad);outline-style:solid;background:#fff}
.mag .bw-anders{box-shadow:inset 3px 0 0 var(--blad);padding-left:8px}
.mag.bw-aan .bw-anders+.bw-std{display:inline-block;margin-left:8px;border:0;background:var(--mintzacht);color:var(--midden);font:600 12px/1 inherit;font-family:inherit;padding:5px 9px;border-radius:999px;cursor:pointer;vertical-align:middle}
.mag.bw-aan .bw-stapknoppen{display:inline-flex;gap:6px;margin-left:auto;align-self:flex-start}
.mag .bw-k{white-space:nowrap;border:1px solid var(--midden);background:#fff;color:var(--donker);font:600 13px/1 inherit;font-family:inherit;padding:7px 10px;border-radius:999px;cursor:pointer}
.mag.bw-aan .bw-verborgen{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin-top:18px;padding:14px 18px;border-radius:14px;background:var(--mintzacht);font-size:15px}
.mag .bw-verborgen span{display:inline-flex;align-items:center;gap:8px}
.mag .bw-notitie .bw-alinea{white-space:pre-wrap;font-size:17px;line-height:1.5;min-height:1.5em}
.mag.bw-aan .bw-notitie .bw-alinea:empty::before{content:'Typ hier een notitie voor de aanvrager. Een lege regel begint een nieuwe alinea.';color:var(--midden);opacity:.7}
.mag:not(.bw-aan) .bw-notitie .bw-alinea:empty{display:none}
.mag:not(.bw-aan) .bw-notitie:has(.bw-alinea:empty){display:none}
.bw-vraag h3{font-size:22px;margin:6px 0 12px;padding-right:40px}.bw-vraag p{font-size:16px;color:var(--midden);margin-bottom:18px}.bw-vraag .knoppen{display:flex;gap:10px;flex-wrap:wrap}
@media (max-width:700px){.mag .bw-balk{margin:0 0 12px;padding:8px 0}.mag .bw-stand{font-size:13px;flex-basis:100%}.mag .bw-knoppen .knop{padding:6px 10px;font-size:13px}.mag .r3-plek-kop{flex-wrap:wrap}.mag.bw-aan .bw-stapknoppen{margin-left:0;flex-basis:100%}}
@media print{.mag .bw-balk,.mag .bw-std,.mag .bw-stapknoppen,.mag .bw-verborgen{display:none!important}.mag .bw-veld{outline:none!important;box-shadow:none!important;padding-left:0!important}}.mag .m-bubbel p+p{margin-top:10px}.mag .m-bubbel .m-onder{font-weight:600;margin-top:12px}
.mag .m-bubbel.zacht p{color:var(--midden)}
.mag .m-bubbel a:not(.knop){color:inherit}
.mag .m-inhoud{margin-top:30px}
.mag .m-inhoud ol{list-style:none;padding:0;margin:12px 0 0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.mag .m-inhoud li{border-top:4px solid var(--lijn);border-radius:2px;padding-top:10px;display:flex;flex-direction:column}
.mag .m-inhoud li b{font-size:26px;color:var(--blad);line-height:1.1}
.mag .m-inhoud li span{font-size:16px;font-weight:600}
.mag .m-noot{font-size:14px;color:var(--grijs)!important;margin-top:22px;line-height:1.5}
/* pagina 2 */
.mag .m-deed{background:var(--vlak);border-radius:18px;padding:22px 26px;display:flex;flex-direction:column;gap:10px}
.mag .m-deed h3{font-size:22px}
.mag .m-deed p{font-size:15px;color:var(--midden)}
.mag .m-wie{display:flex;flex-wrap:wrap;gap:8px}
.mag .m-wie span{display:inline-flex;align-items:center;gap:7px;background:#fff;border-radius:999px;padding:5px 13px 5px 6px;font-size:14.5px;font-weight:500}
.mag .m-wie .ico{width:24px;height:24px}
.mag .m-wie span.open{background:transparent;border:1px dashed var(--lijn);color:var(--grijs)}.mag .m-wie span.open .ico{opacity:.45}
.mag .m-wie small{font-size:12px;color:var(--grijs)}
.mag .m-kop{margin:36px 0 22px}
.mag .m-pag>.m-kop:first-child{margin-top:0}
.mag .m-kop h2{font-size:clamp(28px,3.8vw,40px);line-height:1.12;letter-spacing:-.025em;margin-top:8px;max-width:900px}
.mag .m-kop p{font-size:17px;color:var(--midden);margin-top:10px;max-width:780px}
.mag .m-meters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.mag .m-meters .k{background:#fff;border:1px solid var(--lijn);border-radius:18px;padding:18px 14px 16px;text-align:center}
.mag .m-meters svg{width:150px;height:85px;display:block;margin:0 auto}
.mag .m-meters path{fill:none;stroke-width:12;stroke-linecap:round}
.mag .m-meters path.v{stroke-dasharray:0 100;transition:stroke-dasharray 1.3s cubic-bezier(.2,.7,.3,1)}
.mag .m-meters .aan path.v{stroke-dasharray:var(--p) 100}
.mag .m-meters b{display:block;font-size:24px;font-weight:700;margin-top:-26px;font-variant-numeric:tabular-nums}
.mag .m-meters h3{font-size:16px;margin-top:6px}
.mag .m-meters small{display:block;font-size:13px;color:var(--midden);margin-top:2px;line-height:1.35}
.mag .m-schaal{font-size:13px;color:var(--grijs)!important;margin-top:10px}
.mag .m-citaat{position:relative;margin:34px 0 8px;padding:0 0 0 64px;font-size:24px;line-height:1.4;font-weight:500;letter-spacing:-.01em;max-width:900px}
.mag .m-citaat::before{content:'“';position:absolute;left:0;top:-18px;font-size:92px;font-weight:800;color:var(--blad);line-height:1}
.mag .m-citaat small{display:block;font-size:14px;font-weight:400;color:var(--grijs);margin-top:10px;letter-spacing:0}
/* pagina 3 */
.mag .m-raster table{width:100%;border-collapse:separate;border-spacing:6px 5px;table-layout:fixed}
.mag .m-raster th{font-size:13px;font-weight:600;text-align:center;vertical-align:bottom;line-height:1.25;padding:0 2px 4px;color:var(--midden)}
.mag .m-raster tbody th{text-align:left;font-size:14.5px;color:var(--donker);font-weight:500;width:28%;vertical-align:middle}
.mag .m-raster td{padding:0}
.mag .m-raster td i,.mag .m-legenda i{display:block;height:26px;border-radius:8px;background:var(--haar)}
.mag .m-raster i.k,.mag .m-legenda i.k{background:var(--rood)}
.mag .m-raster i.a,.mag .m-legenda i.a{background:#E9C6BF}
.mag .m-raster i.o,.mag .m-legenda i.o{background:var(--mint)}
.mag .m-legenda{display:flex;flex-wrap:wrap;gap:6px 20px;font-size:13px;color:var(--midden)!important;margin-top:10px}
.mag .m-legenda span{display:inline-flex;align-items:center;gap:7px}
.mag .m-legenda i{width:16px;height:16px!important;border-radius:5px!important}
.mag .m-enige{display:grid;grid-template-columns:auto minmax(0,1fr);gap:28px;align-items:center;background:var(--vlak);border-radius:22px;padding:26px 30px;margin-top:30px}
.mag .m-enige>b{font-size:clamp(56px,8vw,84px);font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--blad)}
.mag .m-enige h3{font-size:19px;margin-bottom:4px}
.mag .m-enige p{font-size:16px;color:var(--midden)}
/* pagina 4 */
.mag .m-afds{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.mag .m-afds>.k{background:#fff;border:1px solid var(--lijn);border-radius:18px;padding:18px 20px;display:flex;flex-direction:column;gap:9px}
.mag .m-afds h3{display:flex;align-items:center;gap:9px;font-size:18px}
.mag .m-afds h3 .ico{width:28px;height:28px}
.mag .m-afds .chips{display:flex;flex-wrap:wrap;gap:5px}
.mag .m-afds em{font-style:normal;font-size:12.5px;font-weight:600;border-radius:999px;padding:3px 10px;background:var(--haar);color:var(--midden)}
.mag .m-afds em.k{background:var(--roodzacht);color:var(--rood)}
.mag .m-afds em.o{background:var(--mintzacht);color:var(--midden)}
.mag .m-afds ul{margin:0;padding:0 0 0 18px;display:flex;flex-direction:column;gap:3px}
.mag .m-afds li,.mag .m-afds p{font-size:14.5px;line-height:1.45}
.mag .m-afds li::marker{color:var(--blad)}
.mag .m-afds .wens{font-style:italic;color:var(--midden);border-left:3px solid var(--blad);padding-left:10px}
.mag .m-afds .eerste{margin-top:auto;padding-top:8px;border-top:1px solid var(--haar)}
.mag .m-afds .eerste b{color:var(--blad)}
/* pagina 5 */
.mag .m-kansen{display:flex;flex-direction:column;gap:8px}
.mag .m-kansen .rij{display:grid;grid-template-columns:44px minmax(0,1.1fr) minmax(0,1fr);gap:16px;align-items:center;padding:14px 18px;border-radius:16px}
.mag .m-kansen .rij.ja{background:var(--vlak)}
.mag .m-kansen .nr{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--donker);color:#fff;font-weight:800;font-size:17px}
.mag .m-kansen .rij:not(.ja) .nr{background:none;border:2px dashed var(--lijn)}
.mag .m-kansen h3{font-size:16.5px;line-height:1.3}
.mag .m-kansen .rij:not(.ja) h3{color:var(--midden)}
.mag .m-kansen small{display:block;font-size:13px;color:var(--grijs);margin-top:3px}
.mag .m-kansen .staaf{display:flex;align-items:center;gap:12px}
.mag .m-kansen .staaf i{display:block;height:22px;border-radius:8px;background:var(--blad);width:0;flex:none;transition:width 1.2s cubic-bezier(.2,.7,.3,1)}
.mag .m-kansen .aan .staaf i{width:calc((100% - 130px) * var(--w) / 100)}
.mag .m-kansen .rij:not(.ja) .staaf i{background:var(--mint)}
.mag .m-kansen .staaf b{font-size:16px;white-space:nowrap;font-variant-numeric:tabular-nums}
.mag .m-kansen .rij:not(.ja) .staaf b{color:var(--midden);font-weight:600}
/* pagina 6 */
.mag .m-wanneer{font-size:16px;color:var(--midden);margin:-6px 0 8px}.mag .m-wanneer b{color:var(--donker)}
.mag .m-route{position:relative;height:440px;margin:10px 0 6px}
.mag .m-route.n2{height:300px}.mag .m-route.n1{height:auto}
.mag .m-route svg.lijn{position:absolute;inset:0;width:100%;height:100%}
.mag .m-route .pin{position:absolute;display:flex;gap:16px;align-items:flex-start;width:min(390px,44%)}
.mag .m-route .p1{left:0;top:6px}.mag .m-route .p2{left:55%;top:152px}.mag .m-route .p3{left:6%;top:306px}
.mag .m-route.n1 .pin{position:static;width:auto}
.mag .m-route .pin>i{flex:none;display:grid;place-items:center;width:60px;height:60px;border-radius:50%;background:var(--donker);color:#fff;font-style:normal;font-size:24px;font-weight:800;box-shadow:0 0 0 7px #fff}
.mag .m-route .pin>div{background:#fff;border-radius:12px;padding:2px 8px 6px}
.mag .m-route small{display:block;font-size:12.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--blad);margin-top:6px}
.mag .m-route h3{font-size:19px;line-height:1.25;margin:3px 0 5px}
.mag .m-route p{font-size:14.5px;color:var(--midden)}.mag .m-route p b{color:var(--donker)}
.mag .m-samen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 20px;background:var(--donker);color:#fff;border-radius:18px;padding:20px 26px;margin-top:10px}
.mag .m-samen span{display:block;font-size:13px;color:var(--mint)}
.mag .m-samen b{font-size:22px;font-variant-numeric:tabular-nums}
.mag .m-samen p{grid-column:1/-1;font-size:13.5px;color:#DDE8E1;margin-top:8px}
.mag .m-tips{background:var(--vlak);border-radius:22px;padding:24px 28px;margin-top:22px}
.mag .m-tips>h3{font-size:20px;margin-bottom:12px}
.mag .m-tips>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.mag .m-tips .e{display:block;font-size:28px;font-weight:800;color:var(--blad);line-height:1.1}
.mag .m-tips b{display:block;font-size:16px;margin:6px 0 4px}
.mag .m-tips p{font-size:14.5px;color:var(--midden);line-height:1.5}
/* pagina 7: de stappen uitgewerkt (opmaak van plekRij3) */
.mag .m-stappen{display:flex;flex-direction:column;gap:14px}
.mag .m-stappen .r3-plek{display:block;border:1px solid var(--lijn);border-radius:18px;padding:20px 22px;margin:0;background:#fff}
.mag .m-stappen .r3-plek-kop{display:flex;gap:14px;align-items:center}
.mag .m-stappen .r3-plek-kop .n{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--donker);color:#fff;font-weight:800;font-size:18px}
.mag .m-stappen .r3-plek-kop small{display:block;font-size:12.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--blad)}
.mag .m-stappen .r3-plek-kop h3{font-size:18px;margin:0}
.mag .m-stappen .r3-plek-tekst>:not(.r3-plek-kop){margin-left:56px;max-width:none}
.mag .m-stappen .r3-plek-tekst p{font-size:15px;line-height:1.5;margin-top:8px}
.mag .m-stappen .r8-feiten{display:flex;flex-wrap:wrap;gap:4px 18px;font-size:14px!important;color:var(--midden)}
.mag .m-stappen .r8-feiten b{color:var(--donker)}
.mag .m-stappen .opl{color:var(--midden)!important}
.mag .m-stappen .r6-onder{margin:10px 0 0 56px;padding:0}
.mag .m-stappen .r6-onder div{display:grid;grid-template-columns:170px minmax(0,1fr);gap:14px;padding:7px 0;border-top:1px solid var(--haar)}
.mag .m-stappen .r6-onder dt{font-size:13.5px;font-weight:600}
.mag .m-stappen .r6-onder dd{margin:0;font-size:14px;line-height:1.5;color:var(--donker)}
/* pagina 8 en bijlage */
.mag .m-verder{display:grid;grid-template-columns:minmax(0,1fr) 170px;gap:28px;align-items:start;padding:30px 34px}
.mag .m-verder h3{font-size:24px;color:#fff;margin-bottom:10px}
.mag .m-verder p{color:#DDE8E1;font-size:16.5px;line-height:1.55;margin-top:8px}
.mag .m-verder .contact{display:none}
.mag .m-verder .knoppen{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.mag .m-verder .wie{text-align:center}
.mag .m-verder .wie img{width:140px;height:140px;border-radius:50%;object-fit:cover;margin:0 auto;background:#fff}
.mag .m-verder .wie p{color:#fff;font-size:15px}
.mag .m-bijlage{column-count:2;column-gap:14px}
.mag .m-bijlage>.kaart{break-inside:avoid;margin:0 0 14px;display:block}
.mag .m-bijlage .kaart{border-radius:16px;padding:18px 20px}
.mag .m-bijlage h3{font-size:16px;margin-bottom:8px}
.mag .m-bijlage h4{font-size:14px;margin:10px 0 4px}
.mag .m-bijlage li,.mag .m-bijlage p{font-size:14px;line-height:1.45}
.mag .m-bijlage .verschil ul{list-style:none;padding:0;margin:0}
.mag .m-bijlage .verschil li{color:var(--midden)}.mag .m-bijlage .verschil li.hoog{color:var(--rood)}
.mag .m-bijlage .verschil li b{color:var(--donker);font-weight:600}
.mag .m-bijlage ul.uitleg{padding-left:18px;margin:0;display:flex;flex-direction:column;gap:5px}
.mag .m-bijlage ul.uitleg li{color:var(--midden)}
.mag>.voet{margin-top:30px}
.mag .alleen-smal{display:none}
@media (prefers-reduced-motion:reduce){.mag .m-meters path.v{stroke-dasharray:var(--p) 100;transition:none}.mag .m-kansen .staaf i{width:calc((100% - 130px) * var(--w) / 100);transition:none}}

/* telefoon */
@media (max-width:700px){
  .mag .alleen-breed{display:none}.mag .alleen-smal{display:block}
  .mag .m-pag{padding-top:40px}
  .mag .m-knoppen{flex-direction:column;align-items:stretch}
  .mag .m-blok{padding:30px 22px 30px;border-radius:18px}
  .mag .m-blok .bol{width:220px;height:220px;right:-80px;top:-70px}.mag .m-blok .bol2{width:64px;height:64px;right:30px;top:110px}
  .mag .m-blok p{font-size:17px}
  .mag .m-in>h2{font-size:24px}
  .mag .m-drie,.mag .m-drie.n2{grid-template-columns:minmax(0,1fr);gap:10px}
  .mag .m-drie .k{display:grid;grid-template-columns:44px minmax(0,1fr);gap:2px 12px;padding:16px}
  .mag .m-drie .n{grid-row:1/4;font-size:40px}.mag .m-drie h3{margin:0;font-size:16.5px}.mag .m-drie b{font-size:20px;padding:0}
  .mag .m-bubbel{padding:20px 20px;border-radius:18px}.mag .m-bubbel>b{font-size:18px}.mag .m-bubbel p{font-size:15.5px}.mag .m-bubbel::after{left:34px}
  .mag .m-inhoud ol{grid-template-columns:minmax(0,1fr);gap:0}
  .mag .m-inhoud li{flex-direction:row;align-items:baseline;gap:12px;border-top-width:1px;padding:8px 0}
  .mag .m-inhoud li b{font-size:20px;width:18px}
  .mag .m-kop h2{font-size:26px}.mag .m-kop p{font-size:15.5px}
  .mag .m-meters{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .mag .m-meters .k{padding:14px 8px 12px}.mag .m-meters svg{width:120px;height:68px}.mag .m-meters b{font-size:20px;margin-top:-20px}
  .mag .m-meters h3{font-size:14.5px}.mag .m-meters small{font-size:12px}
  .mag .m-citaat{font-size:19px;padding-left:44px}.mag .m-citaat::before{font-size:66px;top:-12px}
  .mag .m-enige{grid-template-columns:minmax(0,1fr);gap:8px;padding:22px}
  .mag .m-afds{grid-template-columns:minmax(0,1fr)}
  .mag .m-kansen .rij{grid-template-columns:36px minmax(0,1fr);gap:6px 12px;padding:12px}
  .mag .m-kansen .nr{width:34px;height:34px;font-size:15px}
  .mag .m-kansen .staaf{grid-column:2}
  .mag .m-route,.mag .m-route.n2{height:auto;display:flex;flex-direction:column;gap:22px;padding-left:0}
  .mag .m-route svg.lijn{display:none}
  .mag .m-route::before{content:'';position:absolute;left:24px;top:30px;bottom:30px;border-left:4px dotted var(--mint)}
  .mag .m-route .pin{position:relative;left:auto!important;top:auto!important;width:auto}
  .mag .m-route .pin>i{width:50px;height:50px;font-size:20px}
  .mag .m-route h3{font-size:17px}
  .mag .m-samen{grid-template-columns:minmax(0,1fr);gap:10px;padding:20px}
  .mag .m-tips{padding:20px}.mag .m-tips>div{grid-template-columns:minmax(0,1fr);gap:16px}
  .mag .m-stappen .r3-plek{padding:16px}
  .mag .m-stappen .r3-plek-tekst>:not(.r3-plek-kop),.mag .m-stappen .r6-onder{margin-left:0}
  .mag .m-stappen .r6-onder div{grid-template-columns:minmax(0,1fr);gap:2px}
  .mag .m-verder{grid-template-columns:minmax(0,1fr);padding:24px 20px}
  .mag .m-verder .wie{order:-1;display:flex;align-items:center;gap:14px;text-align:left}.mag .m-verder .wie img{width:72px;height:72px;margin:0}
  .mag .m-verder .knoppen{flex-direction:column}.mag .m-verder .knoppen .knop{text-align:center}
  .mag .m-bijlage{column-count:1}
}

/* afdrukken: A4, elke pagina één blok, ruime kantlijn, het donkere vlak tot de rand */
@media print{
  main.breed{padding:0!important}
  .mag{max-width:none;padding:0 16mm}
  .mag .m-knoppen{display:none!important}
  .mag .m-pag{padding:0;break-before:page}
  .mag .m-pag.p1{break-before:auto;padding-top:0}
  .mag .m-blok{margin:0 -16mm;border-radius:0;padding:16mm 16mm 12mm}
  .mag .m-blok .bol{width:300px;height:300px;right:-60px;top:-60px}.mag .m-blok .bol2{width:90px;height:90px;right:90px;top:150px}
  .mag .m-groot b{font-size:120px}.mag .m-groot span{font-size:28px}
  .mag .m-blok p{font-size:16px;max-width:520px}
  .mag .m-in{padding-top:28px}.mag .m-in>h2{font-size:22px;margin-bottom:12px}
  .mag .m-drie{gap:12px}.mag .m-drie .k{padding:14px 16px;border-radius:14px}.mag .m-drie .n{font-size:38px}.mag .m-drie h3{font-size:13.5px}.mag .m-drie b{font-size:18px}.mag .m-drie small{font-size:11px}
  .mag .m-bubbel{padding:18px 22px;margin:22px 0 16px;border-radius:18px;break-inside:avoid}.mag .m-bubbel::after{left:44px;bottom:-14px;border-width:14px}
  .mag .m-bubbel>b{font-size:16px}.mag .m-bubbel.zacht>b{font-size:14px}.mag .m-bubbel p{font-size:12.5px}
  .mag .m-inhoud{margin-top:22px}.mag .m-inhoud li b{font-size:19px}.mag .m-inhoud li span{font-size:11.5px}
  .mag .m-noot{font-size:10.5px;margin-top:16px}
  .mag .m-deed{padding:14px 18px;gap:7px;border-radius:14px}.mag .m-deed h3{font-size:15px}.mag .m-deed p{font-size:11.5px}
  .mag .m-wie span{font-size:11px;padding:3px 10px 3px 4px}.mag .m-wie .ico{width:18px;height:18px}
  .mag .m-kop{margin:22px 0 14px}.mag .m-kop h2{font-size:26px}.mag .m-kop p{font-size:12.5px;margin-top:6px}
  .mag .m-lab{font-size:10.5px}
  .mag .m-meters{gap:10px}.mag .m-meters .k{padding:12px 8px 10px;border-radius:14px;break-inside:avoid}.mag .m-meters svg{width:110px;height:62px}
  .mag .m-meters path.v{stroke-dasharray:var(--p) 100!important;transition:none}
  .mag .m-meters b{font-size:17px;margin-top:-20px}.mag .m-meters h3{font-size:12px}.mag .m-meters small{font-size:10px}
  .mag .m-schaal{font-size:9.5px}
  .mag .m-citaat{font-size:17px;padding-left:44px;margin-top:22px;break-inside:avoid}.mag .m-citaat::before{font-size:64px;top:-12px}.mag .m-citaat small{font-size:10.5px}
  .mag .m-raster th{font-size:10px}.mag .m-raster tbody th{font-size:11px}.mag .m-raster td i{height:20px;border-radius:6px}.mag .m-legenda{font-size:10px}
  .mag .m-raster table{border-spacing:5px 4px}
  .mag .m-enige{padding:18px 22px;margin-top:22px;gap:22px;border-radius:18px;break-inside:avoid}.mag .m-enige>b{font-size:60px}.mag .m-enige h3{font-size:14px}.mag .m-enige p{font-size:12.5px}
  .mag .m-afds{gap:10px}.mag .m-afds>.k{padding:12px 14px;gap:6px;border-radius:14px;break-inside:avoid}.mag .m-afds h3{font-size:13.5px}.mag .m-afds h3 .ico{width:20px;height:20px}
  .mag .m-afds em{font-size:9.5px;padding:2px 8px}.mag .m-afds li,.mag .m-afds p{font-size:10.5px;line-height:1.4}
  .mag .m-kansen{gap:5px}.mag .m-kansen .rij{padding:9px 12px;gap:12px;grid-template-columns:32px minmax(0,1.15fr) minmax(0,1fr);border-radius:12px;break-inside:avoid}
  .mag .m-kansen .nr{width:30px;height:30px;font-size:13px}.mag .m-kansen h3{font-size:12.5px}.mag .m-kansen small{font-size:10px}
  .mag .m-kansen .staaf i{width:calc((100% - 110px) * var(--w) / 100)!important;transition:none;height:16px;border-radius:6px}.mag .m-kansen .staaf b{font-size:12px}
  .mag .m-wanneer{font-size:12.5px}
  .mag .m-route{height:400px}.mag .m-route.n2{height:280px}
  .mag .m-route .p2{top:140px}.mag .m-route .p3{top:282px}
  .mag .m-route .pin>i{width:48px;height:48px;font-size:20px}.mag .m-route small{font-size:10px}.mag .m-route h3{font-size:14.5px}.mag .m-route p{font-size:11.5px}
  .mag .m-samen{padding:14px 20px;border-radius:14px;break-inside:avoid}.mag .m-samen span{font-size:10.5px}.mag .m-samen b{font-size:16px}.mag .m-samen p{font-size:10.5px}
  .mag .m-tips{padding:16px 20px;border-radius:18px;margin-top:16px;break-inside:avoid}.mag .m-tips>h3{font-size:15px}.mag .m-tips>div{gap:18px}.mag .m-tips .e{font-size:20px}.mag .m-tips b{font-size:12.5px}.mag .m-tips p{font-size:11px}
  .mag .m-stappen{gap:10px}.mag .m-stappen .r3-plek{padding:12px 16px;border-radius:14px;break-inside:avoid}
  .mag .m-stappen .r3-plek-kop .n{width:32px;height:32px;font-size:14px}.mag .m-stappen .r3-plek-kop h3{font-size:14px}.mag .m-stappen .r3-plek-kop small{font-size:9.5px}
  .mag .m-stappen .r3-plek-tekst>:not(.r3-plek-kop),.mag .m-stappen .r6-onder{margin-left:46px}
  .mag .m-stappen .r3-plek-tekst p{font-size:11px;margin-top:5px}.mag .m-stappen .r8-feiten{font-size:10.5px!important}
  .mag .m-stappen .r6-onder div{grid-template-columns:120px minmax(0,1fr);gap:10px;padding:4px 0}.mag .m-stappen .r6-onder dt{font-size:10px}.mag .m-stappen .r6-onder dd{font-size:10.5px}
  .mag .m-verder{grid-template-columns:minmax(0,1fr) 120px;padding:22px 26px;gap:20px}.mag .m-verder h3{font-size:18px}.mag .m-verder p{font-size:12.5px}
  .mag .m-verder .contact{display:block}.mag .m-verder .wie img{width:100px;height:100px}.mag .m-verder .wie p{font-size:11.5px}
  .mag .p9{break-before:auto}.mag .p9 .m-kop{margin-top:30px}
  .mag .m-bijlage>.kaart{margin-bottom:10px}.mag .m-bijlage .kaart{padding:12px 14px;border-radius:12px;break-inside:avoid}.mag .m-bijlage h3{font-size:12.5px}.mag .m-bijlage h4{font-size:10.5px}
  .mag .m-bijlage li,.mag .m-bijlage p{font-size:10px}
  .mag>.voet{display:none!important}
  .mag a{text-decoration:none;color:inherit}
}

/* verschillen onder het raster */
.mag .m-verschil{margin-top:26px}
.mag .m-verschil>h3{font-size:19px;margin-bottom:10px}
.mag .m-verschil>div{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.mag .m-verschil>div>div{background:var(--vlak);border-radius:16px;padding:16px 18px}
.mag .m-verschil h4{font-size:15px;margin:0 0 8px}
.mag .m-verschil ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:3px}
.mag .m-verschil li{display:grid;grid-template-columns:130px minmax(0,1fr);gap:10px;font-size:14px;line-height:1.35;color:var(--midden)}
.mag .m-verschil li b{color:var(--donker);font-weight:600}
.mag .m-verschil li.hoog span{color:var(--rood)}
@media (max-width:700px){.mag .m-verschil li{grid-template-columns:minmax(0,1fr);gap:0;margin-bottom:4px}}
@media print{
  .mag .m-verschil{margin-top:20px;break-inside:avoid}.mag .m-verschil>h3{font-size:14px}
  .mag .m-verschil>div{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.mag .m-verschil>div>div{padding:12px 14px;border-radius:12px}
  .mag .m-verschil h4{font-size:11.5px}.mag .m-verschil li{font-size:10.5px;grid-template-columns:100px minmax(0,1fr)}
  /* pagina 1 en 2 voller, pagina 7 compacter */
  .mag .m-blok{padding:22mm 16mm 16mm}.mag .m-groot b{font-size:150px}.mag .m-groot span{font-size:32px}.mag .m-blok p{font-size:18px;max-width:560px}
  .mag .m-blok .bol{width:360px;height:360px}.mag .m-blok .bol2{width:110px;height:110px;top:190px;right:100px}
  .mag .m-in{padding-top:36px}.mag .m-in>h2{font-size:26px;margin-bottom:16px}
  .mag .m-drie .k{padding:18px 18px}.mag .m-drie .n{font-size:46px}.mag .m-drie h3{font-size:15px}.mag .m-drie b{font-size:21px}.mag .m-drie small{font-size:11.5px}
  .mag .p1 .m-bubbel{padding:22px 26px;margin:28px 0 22px}.mag .p1 .m-bubbel>b{font-size:19px}.mag .p1 .m-bubbel p{font-size:14px}
  .mag .m-inhoud{margin-top:30px}.mag .m-inhoud li b{font-size:22px}.mag .m-inhoud li span{font-size:12.5px}.mag .m-noot{font-size:11px;margin-top:22px}
  .mag .m-meters .k{padding:16px 8px 14px}.mag .m-meters svg{width:140px;height:79px}.mag .m-meters b{font-size:21px;margin-top:-24px}.mag .m-meters h3{font-size:13px}.mag .m-meters small{font-size:10.5px}
  .mag .m-citaat{font-size:19px;margin-top:26px}
  .mag .p7 .m-kop p{display:none}.mag .m-stappen{gap:8px}.mag .m-stappen .r3-plek{padding:10px 14px}
  .mag .m-stappen .r3-plek-tekst p{font-size:10.5px;margin-top:4px;line-height:1.4}.mag .m-stappen .r6-onder{margin-top:6px}
  .mag .m-stappen .r6-onder div{padding:3px 0}.mag .m-stappen .r6-onder dd{font-size:10px;line-height:1.4}
}
@media print{.mag .m-blok .bol2{top:120px;right:70px}}
.mag .m-blok .bol2{top:130px;right:70px}
.mag .m-bubbel+.p9,.mag .p8 .m-bubbel:last-child{margin-bottom:34px}
.mag .m-bijlage small,.mag .m-bijlage small.afds{font-size:inherit;color:var(--grijs)}
@media print{.mag{--vlak:var(--papier)}}
.mag .m-wie span{background:var(--papier)}@media print{.mag .m-wie span{background:#fff}}
.mag .m-route .pin>div{background:var(--papier)}.mag .m-route .pin>i{box-shadow:0 0 0 7px var(--papier)}
@media print{.mag .m-route .pin>div{background:#fff}.mag .m-route .pin>i{box-shadow:0 0 0 6px #fff}}
@media print{.mag .m-pag.vloei{break-before:auto;padding-top:34px}}
@media print{.mag .m-pag.vloei{break-inside:avoid}.mag .m-kop{break-after:avoid}}

/* proef initiatief */
.vk .vn .vn-duo{display:grid;gap:18px;margin:40px auto 0;max-width:980px}
@media (min-width:760px){.vk .vn .vn-duo{grid-template-columns:1fr 1fr;gap:24px}}
.vk .vn-kaart{border-radius:18px;padding:28px 28px 26px;text-align:left}
.vk .vn-oud{background:var(--wit);border:1.5px solid var(--lijn);color:var(--grijs)}
.vk .vn-nu{background:var(--donker);color:#E6EEE9;box-shadow:0 18px 40px rgba(52,62,61,.18)}
.vk .vn-label{display:inline-block;font-size:12.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:5px 11px;border-radius:999px;background:var(--haar);color:var(--midden)}
.vk .vn-nu .vn-label{background:rgba(174,220,192,.16);color:var(--mint)}
.vk .vn-kaart h3{font-size:clamp(19px,2vw,22px);line-height:1.25;margin:14px 0 16px;color:var(--donker)}
.vk .vn-nu h3{color:var(--wit)}
.vk .vn-kaart ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.vk .vn-kaart li{display:flex;gap:11px;align-items:flex-start;font-size:15.5px;line-height:1.45}
.vk .vn-i{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--haar);color:var(--grijs);margin-top:-1px}
.vk .vn-nu .vn-i{background:var(--blad);color:var(--wit)}
.vk .vn-i svg{width:14px;height:14px}
.vk .vn-slot{text-align:center;max-width:680px;margin:34px auto 0;color:var(--midden);font-size:16px}
.vk .vn-slot b{color:var(--donker)}
@media (max-width:759px){.vk .vn-slot{text-align:left}}
.vk .vp .vp-duo{display:grid;gap:34px;max-width:1080px;margin:0 auto;align-items:center}
@media (min-width:860px){.vk .vp .vp-duo{grid-template-columns:1.05fr 1fr;gap:64px}}
.vk .vp-tekst h2{font-size:clamp(28px,3.4vw,40px);line-height:1.1}
.vk .vp-tekst p{color:var(--midden);font-size:16.5px;margin-top:16px}
.vk .vp-tekst p b{color:var(--donker)}
.vk .vp-punten{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.vk .vp-punten li{display:flex;gap:16px;align-items:flex-start;background:var(--wit);border-radius:16px;padding:20px 22px;box-shadow:0 8px 26px rgba(52,62,61,.07)}
.vk .vp-n{flex:none;width:36px;height:36px;border-radius:50%;background:var(--donker);color:var(--mint);display:grid;place-items:center;font-weight:700}
.vk .vp-punten b{display:block;font-size:18px;line-height:1.25;color:var(--donker)}
.vk .vp-punten p{margin-top:5px;font-size:15px;color:var(--midden);line-height:1.5}

/* hero-slider (25-09-2026) */
.vk .hs{width:100%;max-width:880px;margin:0 auto}
.vk .hs-baan{display:grid}
.vk .hs-dia{grid-area:1/1;display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;visibility:hidden;transform:translateX(18px);transition:opacity .5s ease,transform .5s ease,visibility 0s linear .5s}
.vk .hs-dia.aan{opacity:1;visibility:visible;transform:none;transition:opacity .5s ease,transform .5s ease,visibility 0s}
.vk .hero1.metfoto .hs-kop{color:var(--wit);font-size:clamp(32px,5vw,54px);line-height:1.06;text-shadow:0 2px 28px rgba(0,0,0,.45);max-width:820px}
.vk .hero1.metfoto .hs p.lead{max-width:640px}
.vk .hs-stappen .ministappen{margin-top:20px}
.vk .hs-nav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:26px}
.vk .hs-bollen{display:flex;gap:14px}
.vk .hs-bol{width:13px;height:13px;border-radius:50%;border:1.5px solid rgba(255,255,255,.75);background:transparent;padding:0;cursor:pointer;transition:background .25s,border-color .25s}
.vk .hs-bol.aan{background:var(--mint);border-color:var(--mint)}
.vk .hs-pijl{width:42px;height:42px;border-radius:50%;border:1.5px solid rgba(255,255,255,.5);background:rgba(255,255,255,.08);color:var(--wit);display:grid;place-items:center;cursor:pointer;padding:0;transition:background .2s,border-color .2s}
.vk .hs-pijl:hover{background:rgba(255,255,255,.18);border-color:var(--wit)}
.vk .hs-pijl svg{width:20px;height:20px}
.vk .hs-bol:focus-visible,.vk .hs-pijl:focus-visible{outline:2px solid var(--mint);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.vk .hs-dia,.vk .hs-dia.aan{transition:none;transform:none}}
@media (max-width:640px){
  .vk .hs-dia{align-items:flex-start;justify-content:flex-start}
  .vk .hs-nav{justify-content:flex-start;margin-top:22px}
  .vk .hs-stappen .ministappen .ms-t small{display:none}
  .vk .hs-stappen .ministappen li{padding:4px 0;align-items:center}
  .vk .hs-stappen .ministappen li+li::before{top:-8px;height:12px}
  .vk .hero1.metfoto::before{background:linear-gradient(180deg,rgba(38,46,45,.74) 0,rgba(38,46,45,.7) 55%,rgba(38,46,45,.84) 100%)}
}

/* animatie uit het filmpje, klein, alleen op de telefoon (25-09-2026) */
.vk .hub-anim{display:none}
@media (max-width:640px){
  .vk .hub-anim{display:block;position:relative;width:100%;max-width:358px;height:164px;margin:22px 0 0}
  .vk .hub-anim svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
  .vk .hub-anim .hl line{stroke:rgba(255,255,255,.3);stroke-width:1.2;stroke-dasharray:1;stroke-dashoffset:0}
  .vk .hub-anim .hr{fill:rgba(174,220,192,.1);stroke:rgba(174,220,192,.7);stroke-width:1.4}
  .vk .hub-anim .hk{fill:var(--mint)}
  .vk .hub-anim .hd{fill:var(--blad);opacity:0}
  .vk .hub-anim .ha{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) translate(var(--x),var(--y));font-size:11.5px;font-weight:600;color:#E6EFE9;padding:4px 9px;border-radius:8px;background:rgba(52,62,61,.88);border:1px solid rgba(255,255,255,.28);white-space:nowrap;z-index:2}
  .vk .hub-anim .licht{position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:var(--mint);box-shadow:0 0 10px 3px rgba(174,220,192,.6);opacity:0;z-index:1}
  .vk .hub-anim .golf{position:absolute;left:50%;top:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;border:1.5px solid rgba(174,220,192,.6);opacity:0}

  /* dia 1: lijnen groeien, afdelingen komen uit het midden, daarna lopen er
     steeds lichtstippen van het midden naar de afdelingen (de uitnodigingen) */
  .vk .hs-dia.aan .hub-uit .hl line{animation:haLijn .8s ease-out both;animation-delay:.2s}
  .vk .hs-dia.aan .hub-uit .ha{animation:haUit .8s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(.4s + var(--i) * .14s)}
  .vk .hs-dia.aan .hub-uit .licht{animation:haNaarBuiten 1.8s ease-in-out infinite;animation-delay:calc(1.4s + var(--i) * .3s)}
  .vk .hs-dia.aan .hub-uit .golf{animation:haGolf 2.6s ease-out infinite;animation-delay:.3s}
  .vk .hs-dia.aan .hub-uit .golf.g2{animation-delay:1.6s}

  /* dia 2: lichtstippen lopen van de afdelingen naar het midden, daarna
     schuiven de afdelingen in, de stippen verschijnen in de ring en het
     midden blijft rustig kloppen */
  .vk .hs-dia.aan .hub-samen .licht{animation:haNaarBinnen 1.5s ease-in-out 2 both;animation-delay:calc(.3s + var(--i) * .18s)}
  .vk .hs-dia.aan .hub-samen .ha{animation:haSamen .9s cubic-bezier(.5,0,.6,1) both;animation-delay:calc(3.1s + var(--i) * .12s)}
  .vk .hs-dia.aan .hub-samen .hl{animation:haWeg .8s ease both;animation-delay:3.8s}
  .vk .hs-dia.aan .hub-samen .hd{animation:haStip .45s ease-out both;animation-delay:calc(3.6s + var(--i) * .12s)}
  .vk .hs-dia.aan .hub-samen .golf{animation:haGolf 2.6s ease-out infinite;animation-delay:4.4s}
  .vk .hs-dia.aan .hub-samen .golf.g2{animation-delay:5.7s}
}
@keyframes haLijn{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes haUit{from{opacity:0;transform:translate(-50%,-50%) scale(.5)}to{opacity:1;transform:translate(-50%,-50%) translate(var(--x),var(--y))}}
@keyframes haSamen{from{opacity:1;transform:translate(-50%,-50%) translate(var(--x),var(--y))}to{opacity:0;transform:translate(-50%,-50%) scale(.4)}}
@keyframes haNaarBuiten{0%{opacity:0;transform:translate(0,0)}15%{opacity:1}80%{opacity:1}100%{opacity:0;transform:translate(calc(var(--x) * .8),calc(var(--y) * .8))}}
@keyframes haNaarBinnen{0%{opacity:0;transform:translate(calc(var(--x) * .8),calc(var(--y) * .8))}15%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translate(0,0)}}
@keyframes haGolf{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(2.6)}}
@keyframes haWeg{to{opacity:.15}}
@keyframes haStip{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .vk .hs-dia.aan .hub-anim *{animation:none!important}
  .vk .hub-samen .ha{opacity:0}.vk .hub-samen .hd{opacity:1}.vk .hub-samen .hl{opacity:.15}
}
.vk .vp-knop{margin-top:24px}

/* ── overzicht in magazinestijl (25 september 2026) ── */
.mag.ovz{padding-top:26px}
.mag .m-ovz{padding-top:52px}
.mag .m-ovz>h2{font-size:clamp(26px,3.4vw,36px);line-height:1.15;letter-spacing:-.025em;margin:8px 0 18px;max-width:900px}
.mag .m-ovz>.m-sub{font-size:16px;color:var(--midden);margin:-8px 0 16px;max-width:780px}
.mag .m-okop{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:40px;align-items:center;padding:46px 54px}
.mag .m-okop .links{position:relative;min-width:0}
.mag .m-okop h1{color:#fff;font-size:clamp(30px,4vw,46px);line-height:1.1;letter-spacing:-.025em;margin-top:14px;max-width:640px}
.mag .m-okop .links>p{font-size:18px;margin-top:14px}
.mag .m-okop .knoppen{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.mag .knop.licht{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.45)}
.mag .knop.licht:hover{background:rgba(255,255,255,.08)}
.mag .m-okop .mail{display:block;color:#B9CCC1;font-size:13.5px;margin-top:10px}
.mag .m-stand{position:relative;text-align:center;background:rgba(255,255,255,.07);border-radius:18px;padding:24px 14px 20px}
.mag .m-stand svg{width:190px;height:108px;display:block;margin:0 auto}
.mag .m-stand path{fill:none;stroke-width:12;stroke-linecap:round}
.mag .m-stand path.a{stroke:rgba(255,255,255,.14)}
.mag .m-stand path.v{stroke-dasharray:0 100;transition:stroke-dasharray 1.3s cubic-bezier(.2,.7,.3,1)}
.mag .m-stand.aan path.v{stroke-dasharray:var(--p) 100}
.mag .m-stand b{display:block;font-size:30px;font-weight:800;margin-top:-36px;color:#fff;font-variant-numeric:tabular-nums}
.mag .m-stand span{display:block;font-size:15px;color:#DDE8E1;margin-top:6px}
.mag .m-stand small{display:block;font-size:13px;color:#9FB5A8;margin-top:2px}
.mag .m-deeln{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px}
.mag .m-deeln .k{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--lijn);border-radius:14px;padding:12px 14px;min-width:0}
.mag .m-deeln .k:not(.aan){border-style:dashed;background:transparent}
.mag .m-deeln .ico{width:28px;height:28px;flex:none}
.mag .m-deeln .k:not(.aan) .ico{opacity:.5}
.mag .m-deeln .t{flex:1;min-width:0}
.mag .m-deeln .t b{display:block;font-size:15.5px;font-weight:600}
.mag .m-deeln .t small{display:block;font-size:13px;color:var(--grijs);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mag .m-deeln .vink{flex:none;position:relative;width:26px;height:26px;border-radius:50%;background:var(--mint)}
.mag .m-deeln .vink::after{content:'';position:absolute;left:9px;top:5px;width:6px;height:12px;border:solid var(--donker);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.mag .m-deeln .nieuw .vink{animation:puls .9s ease 2}
.mag .m-deeln .knop{flex:none;min-height:36px;padding:6px 12px;font-size:14px}
.mag .m-deeln .k:not(.aan){flex-wrap:wrap;align-items:flex-start}
.mag .m-deeln .k:not(.aan) .t small{white-space:normal;overflow-wrap:anywhere}
.mag .m-deeln .k:not(.aan) .t{flex:1 1 calc(100% - 40px)}
.mag .m-deeln .k:not(.aan) .knop{margin-left:40px}
.mag .m-deeln .t small.adres{color:var(--donker)}
.mag .m-themas{background:#fff;border:1px solid var(--lijn);border-radius:18px;padding:4px 22px}
.mag .m-themas .r{display:grid;grid-template-columns:12px 26px minmax(0,1fr) minmax(0,1.2fr) 118px;gap:14px;align-items:center;padding:14px 0;border-top:1px solid var(--haar)}
.mag .m-themas .r:first-child{border-top:0}
.mag .m-themas .stip{width:12px;height:12px;border-radius:50%;background:var(--mint)}
.mag .m-themas .r.k .stip{background:var(--rood)}.mag .m-themas .r.a .stip{background:#E9C6BF}
.mag .m-themas .ico{width:26px;height:26px}
.mag .m-themas .naam b{display:block;font-size:16px;line-height:1.3}
.mag .m-themas .naam small{display:block;font-size:13px;color:var(--grijs);margin-top:2px}
.mag .m-themas .r.k .naam small{color:var(--rood)}
.mag .m-themas .opl{font-size:14.5px;color:var(--midden);line-height:1.45}
.mag .m-themas .oplknop{justify-self:end;display:inline-flex;align-items:center;gap:6px;background:none;border:1px solid var(--lijn);border-radius:var(--r-knop);padding:7px 11px;font:inherit;font-size:13px;font-weight:600;color:var(--donker);cursor:pointer;transition:border-color .2s,background .2s}
.mag .m-themas .oplknop:hover{border-color:var(--blad);background:var(--papier)}
.mag .m-themas .oplknop svg{width:12px;height:12px;stroke:var(--blad);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.mag.ovz .m-bubbel{margin-top:0}
.mag.ovz .m-bubbel::after{display:none}
@media (prefers-reduced-motion:reduce){.mag .m-stand path.v{stroke-dasharray:var(--p) 100;transition:none}}
@media (max-width:900px){.mag .m-deeln{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){
  .mag.ovz{padding-top:10px}
  .mag .m-ovz{padding-top:40px}
  .mag .m-ovz>h2{font-size:24px}
  .mag .m-okop{grid-template-columns:minmax(0,1fr);gap:24px;padding:28px 22px 24px}
  .mag .m-okop h1{font-size:28px}
  .mag .m-okop .links>p{font-size:16px}
  .mag .m-okop .knoppen{flex-direction:column}.mag .m-okop .knoppen .knop{text-align:center}
  .mag .m-stand{display:grid;grid-template-columns:120px minmax(0,1fr);grid-template-rows:auto auto auto;column-gap:14px;text-align:left;align-items:center;padding:14px 16px}
  .mag .m-stand svg{grid-row:1/4;width:120px;height:68px}
  .mag .m-stand b{margin-top:0;font-size:24px}.mag .m-stand span{margin-top:0}
  .mag .m-deeln{grid-template-columns:minmax(0,1fr);gap:8px}
  .mag .m-themas{padding:2px 16px}
  .mag .m-themas .r{grid-template-columns:12px minmax(0,1fr) auto;gap:6px 12px;padding:14px 0}
  .mag .m-themas .ico{display:none}
  .mag .m-themas .stip{grid-column:1;grid-row:1}.mag .m-themas .naam{grid-column:2;grid-row:1}.mag .m-themas .oplknop{grid-column:3;grid-row:1}
  .mag .m-themas .opl{grid-column:2/-1;grid-row:2;font-size:14px}
}

/* ── aankondiging tot de lancering (25 september 2026) ── */
.aank{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:64px;align-items:center;max-width:1040px;margin:0 auto;padding:40px 0 60px}
.ak-lab{display:block;font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--blad);margin-bottom:14px}
.aank h1{font-size:clamp(34px,4.6vw,56px);line-height:1.08;letter-spacing:-.03em;max-width:620px}
.aank .lead{font-size:19px;line-height:1.55;color:var(--midden);margin-top:20px;max-width:560px}
.ak-tijd{display:inline-block;margin-top:22px;background:var(--mint);color:var(--donker);font-weight:600;font-size:15.5px;padding:10px 16px;border-radius:12px}
.ak-kop2{font-size:18px;margin-top:30px;letter-spacing:-.01em}
.ak-stappen{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:8px;max-width:560px}
.ak-stappen li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:12px;align-items:center;background:#fff;border:1px solid var(--lijn);border-radius:12px;padding:9px 14px}
.ak-stappen b{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--mint);color:var(--donker);font-size:14px}
.ak-stappen span{font-size:15.5px;font-weight:600}
.ak-stappen small{display:block;font-size:13.5px;font-weight:400;color:var(--grijs)}
.ak-beeld{position:relative}
.ak-film{display:block;width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:22px;background:#343E3D;box-shadow:0 18px 40px rgba(52,62,61,.18)}
.ak-geluid{position:absolute;right:14px;bottom:14px;background:rgba(52,62,61,.78);color:#fff;border:0;border-radius:999px;padding:8px 14px;font:inherit;font-size:13.5px;font-weight:600;cursor:pointer}
.ak-geluid:hover{background:#343E3D}
@media (max-width:760px){
  .aank{grid-template-columns:minmax(0,1fr);gap:28px;padding:18px 0 40px}
  .aank h1{font-size:32px}
  .aank .lead{font-size:17px}
  .ak-tekst{display:contents}
  .aank{gap:0}
  .aank>*,.ak-tekst>*{order:5}
  .ak-lab{order:1}.aank h1{order:2}
  .ak-beeld{order:3;width:min(100%,300px);margin:22px auto 4px}
  .aank .lead{order:4}
}

/* ── landingspagina: het filmpje schermvullend, tot de lancering (25 september 2026) ── */
body.film-vol{background:#343E3D}
body.film-vol>header.kop{display:none}
.fl{position:fixed;inset:0;background:#343E3D}
.fl-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#343E3D}
.fl-tekst{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.fl-geluid{position:absolute;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));background:rgba(52,62,61,.72);color:#fff;border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:9px 16px;font:inherit;font-size:14px;font-weight:600;cursor:pointer;z-index:2}
.fl-geluid:hover{background:#343E3D}

/* het filmpje volledig en gecentreerd, niets valt weg (25 september 2026) */
.fl{transition:background-color .45s ease}
.fl.licht{background:#F5F9F6}
.fl-film{object-fit:contain;background:transparent}
body.film-vol{transition:background-color .45s ease}
@media (min-width:761px){.fl-film{left:4vw;top:5vh;width:92vw;height:90vh}}

/* geen groot afspeelknopje van de telefoon over het filmpje (25 september 2026) */
.fl-film::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none}
.fl-film::-webkit-media-controls{display:none!important}
.fl-speel.verborgen{display:none}

/* de teaser als animatie in een kader over het hele scherm (25 september 2026) */
.fl-anim{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#343E3D}

/* ── hero op de telefoon en teller tot de lancering (25 september 2026) ── */
.ah{max-width:520px;margin:0 auto;padding:14px 0 36px;display:flex;flex-direction:column;align-items:center;text-align:center}
.ah-lab{font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--blad);margin-top:6px}
.ah h1{font-size:30px;line-height:1.1;letter-spacing:-.025em;margin-top:10px;max-width:420px}
.ah-teller{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;width:100%;max-width:360px;margin-top:20px}
.ah-teller .v{background:#343E3D;color:#fff;border-radius:14px;padding:10px 4px 8px;display:flex;flex-direction:column;align-items:center}
.ah-teller b{font-size:28px;font-weight:800;line-height:1.05;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.ah-teller small{font-size:12px;color:#AEDCC0;margin-top:2px}
.ah-film{width:min(100%,300px);aspect-ratio:9/16;border-radius:22px;overflow:hidden;margin-top:22px;background:#343E3D;box-shadow:0 14px 34px rgba(52,62,61,.18)}
.ah-film iframe{width:100%;height:100%;border:0;display:block}
.ah-lead{font-size:16px;line-height:1.5;color:var(--midden);margin-top:20px;max-width:380px;text-align:center}
.fl-teller{position:absolute;left:50%;transform:translateX(-50%);bottom:max(6px,calc((5vh - 36px) / 2));z-index:3;display:flex;align-items:center;gap:10px;background:rgba(52,62,61,.82);color:#fff;border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:6px 16px;font-size:14px;white-space:nowrap}
.fl-teller .lab{color:#AEDCC0;font-weight:600;font-size:13px}
.fl-teller .v{display:inline-flex;align-items:baseline;gap:3px}
.fl-teller b{font-size:16px;font-weight:800;font-variant-numeric:tabular-nums}
.fl-teller small{font-size:12px;color:#DDE8E1}

/* voorkant 27-09-2026: slotblok breed, meer AI, logo's initiatief */
.vk .slot{display:block;margin:0;border:0;border-radius:0;padding:clamp(48px,7vw,88px) var(--pad)}
.vk .slot .binnen{max-width:720px;margin:0 auto}
.vk .slot p{max-width:none;margin:12px auto 24px}
.vk .meerai{margin:34px 0 0;background:var(--papier);border:1px solid var(--lijn);border-radius:var(--r-vlak);padding:clamp(20px,3vw,32px)}
.vk .meerai h3{font-size:clamp(20px,2.4vw,24px)}
.vk .meerai p{color:var(--midden);font-size:16px;margin-top:8px;max-width:720px}
.vk .voorbeelden ul.meerai-chips{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px;grid-template-columns:none}
.vk .voorbeelden .meerai-chips li{display:block;background:var(--wit);border:1px solid var(--lijn);border-radius:999px;padding:7px 14px;font-size:14px;line-height:1.3;color:var(--donker);transition:none}
.vk .initlogo{margin-top:26px;padding-top:20px;border-top:1px solid var(--lijn)}
.vk .initlogo>span{display:block;font-size:13px;color:var(--grijs);margin-bottom:12px}
.vk .initlogo-rij{display:flex;flex-wrap:wrap;align-items:center;gap:18px 36px}
.vk .initlogo-rij img{height:40px;width:auto;display:block;border-radius:0}
.vk .initlogo-rij img.fpp{height:44px}
.vk .initlogo-rij img.atbs{height:48px}
.vk .initlogo-rij a.dw{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:17px;white-space:nowrap;color:#0E1737;text-decoration:none;letter-spacing:-.01em}
.vk .initlogo-rij a.dw svg{width:30px;height:30px;display:block;flex:none}
.vk .vp-knop{display:flex;flex-wrap:wrap;gap:10px}
@media (max-width:480px){.vk .vp-knop .knop,.vk .wie2 .knop.tweede{width:100%;justify-content:center}.vk .wie-logo .initlogo-rij{display:grid;grid-template-columns:1fr 1fr;align-items:center;justify-items:start;gap:20px 20px}.vk .initlogo-rij img{height:34px}.vk .initlogo-rij img.fpp{height:38px}.vk .initlogo-rij img.atbs{height:44px}}

/* plattegrond "Waar AI in uw bedrijf helpt" (27-09-2026) */
.vk .pl{display:grid;gap:24px;margin-top:36px}
@media (min-width:960px){.vk .pl{grid-template-columns:1.2fr 1fr;align-items:start}}
.vk .pl-kaart{background:none}
.vk .pl-svg{width:100%;height:auto;display:block;font-family:Archivo,system-ui,sans-serif}
.vk .pl-svg .gebouw{fill:#F5F9F6;stroke:#D9DFDB;stroke-width:2}
.vk .pl-svg .pl-vak{cursor:pointer;outline:none}
.vk .pl-svg .vl{fill:#fff;stroke:#D9DFDB;stroke-width:2;transition:fill .25s,stroke .25s}
.vk .pl-svg .pl-vak:hover .vl{stroke:#6FB894}
.vk .pl-svg .pl-vak:focus-visible .vl{stroke:#343E3D;stroke-width:3}
.vk .pl-svg .pl-vak.aan .vl{fill:#E6F3EB;stroke:#6FB894;stroke-width:3}
.vk .pl-svg .tk{fill:none;stroke:#343E3D;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.8}
.vk .pl-svg .tk .w{fill:#fff}.vk .pl-svg .tk .m{fill:#AEDCC0}.vk .pl-svg .tk .b{fill:#6FB894}.vk .pl-svg .tk .g{fill:#EEF2EF}.vk .pl-svg .tk .h{fill:#AEDCC0}
.vk .pl-svg .tk .dun{stroke-width:1.2;opacity:.5}.vk .pl-svg .tk .lijn{stroke:#6FB894;stroke-width:3}
.vk .pl-svg .pl-vak:not(.aan) .tk{opacity:.55}
.vk .pl-svg .nr{fill:#343E3D}.vk .pl-svg .pl-vak.aan .nr{fill:#6FB894}
.vk .pl-svg .nrt{fill:#fff;font-size:19px;font-weight:700;text-anchor:middle}
.vk .pl-svg .nm{fill:#343E3D;font-size:26px;font-weight:700}
.vk .pl-svg .ct{fill:#7C8A84;font-size:17px}
.vk .pl-svg .pijl circle{fill:#fff;stroke:#6FB894;stroke-width:2}
.vk .pl-svg .pijl path{fill:none;stroke:#6FB894;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.vk .pl-svg .truck{fill:#fff;stroke:#343E3D;stroke-width:2;stroke-linejoin:round;opacity:.8}
.vk .pl-legenda{display:none;flex-wrap:wrap;gap:8px;margin-top:12px}
.vk .pl-legenda button{display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:14px;border:1px solid var(--lijn);background:var(--wit);color:var(--donker);border-radius:999px;padding:6px 12px 6px 6px;cursor:pointer}
.vk .pl-legenda i{font-style:normal;width:24px;height:24px;border-radius:50%;background:var(--donker);color:var(--wit);display:grid;place-items:center;font-size:12.5px;font-weight:700}
.vk .pl-legenda button.aan{border-color:var(--blad);background:#E6F3EB}.vk .pl-legenda button.aan i{background:var(--blad)}
@media (max-width:640px){.vk .pl-legenda{display:flex}.vk .pl-svg .nm,.vk .pl-svg .ct{display:none}.vk .pl-svg .nr{r:24px}.vk .pl-svg .nrt{font-size:26px;transform:translateY(2px)}}
.vk .pl-hint{font-size:14px;color:var(--grijs);margin:10px 0 0}
.vk .pl-foto{display:block;width:100%;height:160px;object-fit:cover;border-radius:12px;margin-bottom:16px}
.vk .pl-paneel{background:var(--papier);border:1px solid var(--lijn);border-radius:18px;padding:26px;scroll-margin-top:90px}
.vk .pl-lab{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--blad);font-weight:600}
.vk .pl-paneel h3{font-size:clamp(22px,2.4vw,26px);margin:4px 0 18px;color:var(--donker)}
.vk .pl-lijst{display:grid;gap:12px}
.vk .pl-it{background:var(--wit);border:1px solid var(--lijn);border-radius:12px;padding:14px 16px}
.vk .pl-it>b{display:flex;gap:10px;align-items:center;font-size:16px;color:var(--donker);line-height:1.25}
.vk .pl-it>b .ico{width:26px;height:26px;flex:0 0 26px}
.vk .pl-rw{display:grid;grid-template-columns:60px 1fr;gap:6px 10px;margin-top:10px;font-size:14.5px;line-height:1.4}
.vk .pl-rw span{font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding-top:3px;font-weight:600}
.vk .pl-rw .nu{color:var(--grijs)}
.vk .pl-rw .st{color:var(--blad)}
.vk .pl-rw p{margin:0;color:var(--donker)}
.vk .pl-rw p.nu{color:var(--grijs)}
.vk .pl-it .meer{margin:10px 0 0 70px;background:none;border:0;padding:0;font:inherit;font-size:13.5px;font-weight:600;color:var(--midden);text-decoration:underline;cursor:pointer}
@media (max-width:480px){.vk .pl-foto{height:130px}}
@media (max-width:480px){.vk .pl-paneel{padding:20px}.vk .pl-rw{grid-template-columns:54px 1fr}.vk .pl-it .meer{margin-left:64px}}

/* plattegrond met 12 afdelingen, volle breedte (27-09-2026) */
.vk #watdoet .binnen{max-width:1240px}
.vk .pk-wrap{margin-top:32px}
.vk .pk-beeld{position:relative;width:100%;aspect-ratio:16/9;border-radius:16px;background:#fff}
.vk .pk-beeld>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;border-radius:16px}
.vk .pk-pin{position:absolute;transform:translate(-50%,-50%);width:40px;height:40px;border:0;padding:0;background:none;display:grid;place-items:center;cursor:pointer;z-index:2}
.vk .pk-pin i{font-style:normal;width:30px;height:30px;border-radius:50%;background:var(--donker);color:var(--wit);display:grid;place-items:center;font-size:14px;font-weight:700;border:2px solid #fff;box-shadow:0 3px 10px rgba(52,62,61,.3);transition:transform .2s,background .2s}
.vk .pk-pin:hover i,.vk .pk-pin:focus-visible i{background:var(--blad);transform:scale(1.15)}
.vk .pk-pin:focus-visible{outline:none}
.vk .pk-kaartje{position:absolute;z-index:3;pointer-events:none;width:250px;background:var(--wit);border:1px solid var(--lijn);border-radius:12px;box-shadow:0 12px 30px rgba(52,62,61,.18);padding:12px 14px;transform:translate(24px,-50%);opacity:0;transition:opacity .15s}
.vk .pk-kaartje.aan{opacity:1}
.vk .pk-kaartje.links{transform:translate(calc(-100% - 24px),-50%)}
.vk .pk-kaartje.boven{transform:translate(24px,calc(-100% + 10px))}
.vk .pk-kaartje.links.boven{transform:translate(calc(-100% - 24px),calc(-100% + 10px))}
.vk .pk-kaartje b{display:block;font-size:15px;color:var(--donker)}
.vk .pk-kl{margin-top:6px;display:grid;gap:3px}.vk .pk-kl span{position:relative;padding-left:14px;font-size:13.5px;color:var(--midden);line-height:1.4}.vk .pk-kl span:before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;background:var(--blad)}
.vk .pk-kaartje small{display:block;margin-top:6px;font-size:12px;color:var(--blad);font-weight:600}
.vk .pk-legenda{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.vk .pk-legenda button{display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:14px;border:1px solid var(--lijn);background:var(--wit);color:var(--donker);border-radius:999px;padding:5px 12px 5px 5px;cursor:pointer}
.vk .pk-legenda button:hover{border-color:var(--blad)}
.vk .pk-legenda i{font-style:normal;width:24px;height:24px;border-radius:50%;background:var(--donker);color:var(--wit);display:grid;place-items:center;font-size:12px;font-weight:700}
.vk .pk-hint{font-size:14px;color:var(--grijs);margin:10px 0 0}
.pk-venster{max-width:560px}
.pk-venster .pk-foto{display:block;width:100%;height:170px;object-fit:cover;border-radius:12px;margin-bottom:14px}
.pk-venster h3{font-size:22px;margin:4px 0 14px;color:var(--donker)}
.pk-lijst{display:grid;gap:10px}
.pk-it{background:var(--papier);border:1px solid var(--lijn);border-radius:12px;padding:13px 15px}
.pk-it>b{display:flex;gap:10px;align-items:center;font-size:15.5px;color:var(--donker);line-height:1.25}
.pk-it>b .ico{width:24px;height:24px;flex:0 0 24px}
.pk-rw{display:grid;grid-template-columns:56px 1fr;gap:5px 10px;margin-top:9px;font-size:14px;line-height:1.4}
.pk-rw span{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;padding-top:3px;font-weight:600}
.pk-rw .nu{color:var(--grijs)}.pk-rw .st{color:var(--blad)}
.pk-rw p{margin:0;color:var(--donker)}.pk-rw p.nu{color:var(--grijs)}
.pk-vb{margin:8px 0 0 66px;font-size:13px;color:var(--midden);line-height:1.45}
@media (max-width:700px){.vk .pk-pin{width:30px;height:30px}.vk .pk-pin i{width:20px;height:20px;font-size:10.5px;border-width:1.5px}.vk .pk-kaartje{display:none}.vk .pk-legenda button{font-size:13px}.pk-vb{margin-left:0}.pk-venster .pk-foto{height:140px}}

/* kaartjes bij de illustratie, zakelijker (27-09-2026) */
.vk .pk-pin{width:34px;height:34px}
.vk .pk-pin i{width:24px;height:24px;font-size:11.5px;letter-spacing:-.02em;border:1.5px solid rgba(255,255,255,.95);box-shadow:0 2px 8px rgba(52,62,61,.35)}
.vk .pk-kaartje{width:270px;background:var(--donker);border:0;border-radius:12px;box-shadow:0 16px 40px rgba(20,28,27,.28);padding:14px 16px 13px}
.vk .pk-knr{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mint);font-weight:600}
.vk .pk-kaartje b{color:var(--wit);font-size:16px;margin-top:2px}
.vk .pk-kl{margin-top:9px;gap:0;border-top:1px solid rgba(255,255,255,.14)}
.vk .pk-kl span{padding:6px 0 6px 0;font-size:13px;color:rgba(255,255,255,.85);border-bottom:1px solid rgba(255,255,255,.1)}
.vk .pk-kl span:before{display:none}
.vk .pk-kaartje small{margin-top:9px;color:var(--mint);font-size:12px;letter-spacing:.02em}
.vk .pk-lijstje{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);column-gap:28px;border-top:1px solid var(--lijn)}
.vk .voorbeelden .pk-lijstje li{display:block;background:none;border:0;border-bottom:1px solid var(--lijn);border-radius:0;padding:0;gap:0}
.vk .pk-lijstje button{display:grid;grid-template-columns:30px 1fr;align-items:baseline;width:100%;text-align:left;background:none;border:0;padding:11px 0;font:inherit;color:var(--donker);cursor:pointer}
.vk .pk-lijstje .n{font-size:12.5px;color:var(--grijs);font-variant-numeric:tabular-nums;font-weight:600}
.vk .pk-lijstje .t{font-size:15px;font-weight:600;line-height:1.3}
.vk .pk-lijstje .a{grid-column:2;font-size:12.5px;color:var(--grijs);margin-top:1px}
.vk .pk-lijstje button:hover .t{color:var(--blad)}
.vk .pk-lijstje button:hover .n{color:var(--blad)}
.pk-venster .label{letter-spacing:.1em}
.pk-venster .pk-naam{font-size:26px;line-height:1.15;margin:2px 0 14px;color:var(--donker)}
.pk-venster h3{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--grijs);margin:0 0 10px;font-weight:600}
.pk-lijst{gap:0;border-top:1px solid var(--lijn)}
.pk-it{background:none;border:0;border-bottom:1px solid var(--lijn);border-radius:0;padding:14px 0}
@media (max-width:1000px){.vk .pk-lijstje{grid-template-columns:repeat(3,1fr)}}
@media (max-width:700px){.vk .pk-lijstje{grid-template-columns:1fr 1fr;column-gap:18px}.vk .pk-lijstje .t{font-size:14px}.vk .pk-lijstje button{grid-template-columns:26px 1fr;padding:10px 0}.vk .pk-pin i{width:20px;height:20px;font-size:10px}}

/* kaartje bij aanwijzen licht (27-09-2026) */
.vk .pk-kaartje{background:var(--wit);border:1px solid var(--lijn);box-shadow:0 14px 34px rgba(52,62,61,.16)}
.vk .pk-knr{color:var(--blad)}
.vk .pk-kaartje b{color:var(--donker)}
.vk .pk-kl{border-top-color:var(--lijn)}
.vk .pk-kl span{color:var(--midden);border-bottom-color:var(--haar)}
.vk .pk-kaartje small{color:var(--blad)}


/* telefoon: beeld in twee helften onder elkaar (27-09-2026) */
.vk .pk-helften{display:none}
.vk .pk-volknop{display:none}
.pk-vol{position:fixed;inset:0;z-index:1000;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px}
.pk-vol-beeld{position:relative;width:100%;max-width:calc((100vh - 24px) * 16 / 9);aspect-ratio:16/9}
.pk-vol-beeld img{position:absolute;inset:0;width:100%;height:100%;border-radius:0}
.pk-vol .pk-pin{position:absolute;transform:translate(-50%,-50%);width:34px;height:34px;border:0;padding:0;background:none;display:grid;place-items:center}
.pk-vol .pk-pin i{font-style:normal;width:24px;height:24px;border-radius:50%;background:#343E3D;color:#fff;display:grid;place-items:center;font-size:11.5px;font-weight:700;border:1.5px solid #fff;box-shadow:0 2px 8px rgba(52,62,61,.35)}
.pk-vol-dicht{position:absolute;top:12px;right:12px;z-index:2;width:40px;height:40px;border-radius:50%;border:1px solid #D9DFDB;background:#fff;font-size:22px;line-height:1;color:#343E3D;cursor:pointer}
.pk-vol-draai{display:none;margin:0 0 14px;font-size:14px;color:#607466;text-align:center}
@media (orientation:portrait){.pk-vol-draai{display:block}}
@media (max-width:700px){
  .vk .pk-beeld{display:none}
  .vk .pk-helften{display:grid;gap:18px}
  .vk .pk-volknop{display:flex;width:100%;margin-top:16px}
  .vk .pk-hkop{margin:0 0 2px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--blad);font-weight:600}
  .vk .pk-hbeeld{position:relative;width:100%;overflow:hidden;border-radius:14px;background:#fff}
  .vk .pk-hbeeld img{position:absolute;max-width:none;border-radius:0}
  .vk .pk-hbeeld .pk-pin i{width:20px;height:20px;font-size:10px;border-width:1.5px}
}

.vk .pk-hsub{margin:0 0 8px;font-size:12.5px;color:var(--grijs);line-height:1.4}

/* wie erachter zit: logo's en knop onder de foto (27-09-2026) */
.vk .wie-logo .initlogo{margin-top:0}
.vk .wie-logo .knop{margin-top:18px}
@media (min-width:860px){
  .vk .wie2{grid-template-columns:240px 1fr;grid-template-areas:"foto tekst" "logo tekst";align-items:start;row-gap:28px}
  .vk .wie2>.foto{grid-area:foto;max-width:240px;margin:0}
  .vk .wie2>div:nth-child(2){grid-area:tekst}
  .vk .wie2>.wie-logo{grid-area:logo}
  .vk .wie-logo .initlogo{border-top:1px solid var(--lijn);padding-top:18px}
  .vk .wie-logo .initlogo-rij{display:grid;grid-template-columns:1fr 1fr;align-items:center;justify-items:start;gap:18px 20px}
  .vk .wie-logo .knop{width:100%}
}

/* wie erachter zit: foto en logo's even hoog als de tekst, knop in het midden (27-09-2026) */
.vk .wie-knop{text-align:center;margin-top:8px}
.vk .wie-knop .knop{min-width:300px;border-bottom:3px solid var(--blad)}
.vk .wie-logo .knop{display:none}
@media (min-width:860px){
  .vk .wie2{grid-template-columns:340px 1fr;grid-template-rows:1fr auto auto;grid-template-areas:"foto tekst" "logo tekst" "knop knop";align-items:stretch;row-gap:24px;column-gap:56px}
  .vk .wie2>.foto{position:relative;max-width:none;min-height:220px;border-radius:14px;overflow:hidden;background:#fff}
  .vk .wie2>.foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 12%}
  .vk .wie2>.wie-logo{align-self:end}
  .vk .wie-logo .initlogo{border-top:1px solid var(--lijn);padding-top:16px}
  .vk .wie-logo .initlogo-rij{display:grid;grid-template-columns:1fr 1fr;align-items:center;justify-items:start;gap:22px 24px}
  .vk .wie-logo .initlogo-rij img{height:34px}.vk .wie-logo .initlogo-rij img.fpp{height:38px}.vk .wie-logo .initlogo-rij img.atbs{height:46px}
  .vk .wie2>.wie-knop{grid-area:knop;margin-top:12px}
}
@media (max-width:859px){.vk .wie-knop .knop{width:100%;min-width:0}}

/* vlakken per ruimte: kaartje bij binnenkomen van de ruimte (27-09-2026) */
.vk .pk-beeld>svg{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.vk .pk-beeld>svg polygon{fill:transparent;stroke:transparent;stroke-width:.25;cursor:pointer;transition:fill .15s}
.vk .pk-beeld>svg polygon.aan{fill:rgba(111,184,148,.14);stroke:rgba(111,184,148,.7);vector-effect:non-scaling-stroke;stroke-width:2}
.vk .pk-pin.aan i{background:var(--blad);transform:scale(1.15)}
@media (hover:none){.vk .pk-beeld>svg polygon.aan{fill:transparent;stroke:transparent}}

/* telefoon: tik in een ruimte (27-09-2026) */
.pk-tik{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.pk-tik polygon{fill:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}
.pk-tik polygon:active{fill:rgba(111,184,148,.18)}
.vk .pk-hbeeld .pk-pin,.pk-vol .pk-pin{z-index:2}

/* ── hero als camerarondgang (27 september 2026) ── */
.vk .hero2{background:var(--papier);padding-top:clamp(28px,5vw,64px);padding-bottom:clamp(36px,5vw,64px)}
.vk .hero2 .binnen{max-width:1240px;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,56px);align-items:center}
.vk .hero2 .label{color:#3F8A64;display:block;margin-bottom:16px}
.vk .hero2 h1{font-size:clamp(32px,3.3vw,46px);line-height:1.05;letter-spacing:-.025em}
.vk .hero2 h1 em{font-style:normal;color:#3F8A64}
.vk .hero2 .lead{font-size:clamp(16.5px,1.5vw,18.5px);color:var(--midden);margin-top:20px;max-width:470px}
.vk .hero2 .lead b{color:var(--donker);font-weight:600}
.vk .hero2 .knoppen2{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.vk .hero2 .knop{min-height:48px;padding:10px 20px;font-size:15.5px}
.vk .hero2 .h2-punten{list-style:none;margin:26px 0 0;padding:18px 0 0;border-top:1px solid var(--lijn);display:flex;flex-wrap:wrap;gap:8px 22px;font-size:14px;color:var(--midden)}
.vk .hero2 .h2-punten li{position:relative;padding-left:18px}
.vk .hero2 .h2-punten li::before{content:"";position:absolute;left:0;top:.5em;width:8px;height:8px;border-radius:50%;background:var(--blad)}

.rg{width:100%}
.rg-veld{position:relative}
.rg-veld .rg-kaart{z-index:4}
.rg-toneel{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 1px 2px rgba(52,62,61,.06),0 18px 50px -18px rgba(52,62,61,.28);isolation:isolate}
.rg-cam{position:absolute;inset:0;transform-origin:0 0;transition:transform 1.1s cubic-bezier(.65,0,.3,1)}
.rg-cam img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none}
.rg-basis{transition:filter .9s ease,opacity .9s ease}
.rg-toneel.zoom .rg-basis{filter:blur(1.4px) saturate(.55) brightness(1.04);opacity:.62}
.rg-scherp{opacity:0;transition:opacity .6s ease}
.rg-scherp.aan{opacity:1}
.rg-klip{position:absolute;object-fit:cover;opacity:0;transition:opacity .5s ease;pointer-events:none}
.rg-klip.aan{opacity:1}
.rg-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.rg-vlak{fill:rgba(111,184,148,0);stroke:rgba(63,138,100,0);stroke-width:2;vector-effect:non-scaling-stroke;stroke-linejoin:round;transition:fill .6s ease,stroke .6s ease}
.rg-toneel.zoom .rg-vlak.aan{stroke:rgba(63,138,100,.9);fill:rgba(111,184,148,.08);transition-delay:.6s}
.rg.eind .rg-vlak.aan{fill:rgba(111,184,148,.2);stroke:rgba(63,138,100,.55);stroke-width:1.5;transition-delay:calc(var(--i) * 110ms + .4s)}
/* de veeg: een zachte lichtband die bij de start over het hele bedrijf gaat */
.rg-veeg{position:absolute;top:0;bottom:0;left:-30%;width:26%;background:linear-gradient(90deg,rgba(174,220,192,0),rgba(174,220,192,.55) 60%,rgba(111,184,148,.9) 62%,rgba(174,220,192,0) 64%);opacity:0;pointer-events:none;mix-blend-mode:multiply}
.rg.begin:not(.gepauzeerd) .rg-veeg{animation:rgveeg 1.7s .2s cubic-bezier(.45,0,.25,1) both}
@keyframes rgveeg{0%{left:-30%;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:104%;opacity:0}}

.rg-kaart{position:absolute;left:14px;bottom:14px;width:min(330px,calc(100% - 28px));background:rgba(255,255,255,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:12px;padding:14px 16px 15px;box-shadow:0 10px 30px -10px rgba(52,62,61,.35);border:1px solid rgba(217,223,219,.8);opacity:0;transform:translateY(8px)}
.rg-kaart.rechts{left:auto;right:14px}
.rg-kaart.aan{opacity:1;transform:none;transition:opacity .4s ease .55s,transform .4s ease .55s}
.rg-afd{display:flex;align-items:baseline;gap:8px;font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:var(--grijs);font-weight:600}
.rg-afd b{color:#3F8A64;font-variant-numeric:tabular-nums}
.rg-nu,.rg-ai{display:grid;grid-template-columns:54px 1fr;gap:10px;margin-top:9px;font-size:14.5px;line-height:1.4}
.rg-lbl{font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--grijs);padding-top:2px}
.rg-ai .rg-lbl{color:#3F8A64}
.rg-nu s{text-decoration:none;color:#56615E;background:none}
.rg-kaart.aan .rg-nu s{animation:none}
@keyframes rgstreep{to{background-size:100% 1.5px;color:#A3AEA9}}
.rg-ai b{font-weight:600;color:var(--donker)}
.rg-ai .w{opacity:0}
.rg-kaart.aan .rg-ai .w{animation:rgwoord .3s calc(1.35s + var(--w) * 55ms) ease forwards}
.rg-inhoud>.rg-ai:first-of-type:nth-child(2){grid-template-columns:1fr}
.rg-inhoud>.rg-ai:nth-child(2) .w{animation-delay:calc(.9s + var(--w) * 60ms)!important}
@keyframes rgwoord{from{opacity:0;filter:blur(3px)}to{opacity:1;filter:none}}
.rg-slot{font-size:clamp(20px,2vw,24px);font-weight:700;letter-spacing:-.02em;line-height:1.15;margin-top:6px}
.rg-slot em{font-style:normal;color:#3F8A64}
.rg-link{display:inline-block;margin-top:10px;font-size:14px;font-weight:600;color:var(--donker);text-underline-offset:3px}

.rg-seinen{position:absolute;display:flex;flex-direction:column;align-items:flex-start;gap:6px;pointer-events:none;z-index:2}
.rg-sein{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--lijn);border-radius:8px;padding:5px 10px 5px 7px;font-size:12.5px;font-weight:500;color:var(--donker);box-shadow:0 6px 16px -8px rgba(52,62,61,.4);white-space:nowrap;animation:rgsein .4s cubic-bezier(.3,1.3,.5,1) both}
.rg-sein svg{width:16px;height:16px;flex:none;color:#fff;background:var(--blad);border-radius:5px;padding:2px}
.rg-sein em{font-style:normal}
.rg-sein.uren{background:#EAF5EF;border-color:#AEDCC0;font-weight:600;color:#2F6E4F}
@keyframes rgsein{from{opacity:0;transform:translateY(6px) scale(.96)}to{opacity:1;transform:none}}

.rg-pauze{position:absolute;right:12px;top:12px;width:34px;height:34px;border-radius:9px;border:1px solid var(--lijn);background:rgba(255,255,255,.9);cursor:pointer;z-index:3;display:grid;place-items:center;padding:0}
.rg-pauze::before,.rg-pauze::after{content:"";width:3px;height:12px;background:var(--donker);border-radius:2px;grid-area:1/1}
.rg-pauze::before{transform:translateX(-3px)}.rg-pauze::after{transform:translateX(3px)}
.rg.gepauzeerd .rg-pauze::after{display:none}
.rg.gepauzeerd .rg-pauze::before{width:0;height:0;background:none;border-radius:0;border-left:11px solid var(--donker);border-top:7px solid transparent;border-bottom:7px solid transparent;transform:translateX(1px)}

.rg-balk{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:14px}
.rg-deel{all:unset;cursor:pointer;display:flex;flex-direction:column;gap:7px;font-size:12.5px;color:var(--grijs);font-weight:500;min-width:0}
.rg-deel span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rg-deel i{display:block;height:3px;border-radius:3px;background:var(--lijn);position:relative;overflow:hidden}
.rg-deel i::after{content:"";position:absolute;inset:0;background:var(--blad);transform:scaleX(0);transform-origin:0 50%}
.rg-deel.klaar i::after{transform:none}
.rg-deel.aan{color:var(--donker)}
.rg:not(.gepauzeerd) .rg-deel.aan i::after{animation:rgvul var(--duur,4700ms) linear forwards}
.rg.gepauzeerd .rg-deel.aan i::after{transform:none}
.rg-deel:focus-visible{outline:3px solid var(--blad);outline-offset:3px;border-radius:4px}
@keyframes rgvul{to{transform:none}}

@media (max-width:900px){
  .vk .hero2 .binnen{grid-template-columns:1fr;gap:0}
  .vk .hero2 .h2-tekst{display:contents}
  .vk .hero2 .label{order:1}.vk .hero2 h1{order:2}.vk .hero2 .h2-beeld{order:3;margin-top:22px}
  .vk .hero2 .lead{order:4}.vk .hero2 .knoppen2{order:5}.vk .hero2 .h2-punten{order:6}
}
@media (max-width:699px){
  .vk .hero2 h1{font-size:clamp(30px,8.4vw,40px)}
  .rg-toneel{border-radius:12px}
  .rg-kaart{position:relative;left:auto;bottom:auto;width:auto;margin:0;box-shadow:none;border:0;border-radius:0;background:none;backdrop-filter:none;padding:14px 2px 0;min-height:142px}
  .rg{display:flex;flex-direction:column}
  .rg-veld{display:contents}
  .rg-toneel{order:1}.rg-balk{order:2}
  .rg-kaart{order:3}
  .rg-seinen{position:static;order:3;flex-direction:row;flex-wrap:wrap;gap:6px;margin-top:12px;min-height:27px}
  .rg-sein{font-size:12px;padding:3px 8px 3px 5px}
  .rg-sein svg{width:14px;height:14px}
  .rg-kaart{order:4;padding-top:10px}
  .rg-balk{gap:5px;margin-top:10px}
  .rg-deel{font-size:0}
  .rg-deel span{display:none}
  .vk .hero2 .knoppen2 .knop{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){
  .rg-cam,.rg-basis,.rg-scherp,.rg-vlak,.rg-kaart.aan{transition:none!important}
  .rg-kaart.aan .rg-nu s,.rg-kaart.aan .rg-ai .w,.rg-sein{animation:none!important;opacity:1}
  .rg-kaart.aan .rg-nu s{background-size:100% 1.5px}
}

/* het hele bedrijf in beweging (27 september 2026) */
.rg-geheel,.pk-film,.pk-volfilm{position:absolute;left:0;width:100%;top:0;height:100%;object-fit:fill;opacity:0;transition:opacity .6s ease;pointer-events:none}
.rg-geheel.loopt{opacity:1}
.rg-toneel.zoom .rg-geheel{opacity:0}
.vk .pk-beeld>.pk-film{border-radius:16px;z-index:0}
.vk .pk-beeld>.pk-film.loopt,.pk-volfilm.loopt{opacity:1}
.vk .pk-hbeeld .pk-hfilm{position:absolute;max-width:none;object-fit:fill;opacity:0;transition:opacity .6s ease;pointer-events:none}
.vk .pk-hbeeld .pk-hfilm.loopt{opacity:1}
.pk-vol-beeld{position:relative}
/* telefoon: ruimtefilm vult het kader (27 september 2026) */
.rg-mob{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s ease;z-index:2;pointer-events:none;background:#fff}
.rg-mob.aan{opacity:1}
.rg-mobtekst .rg-kort{margin:6px 0 0;font-size:17px;line-height:1.4;font-weight:600;color:var(--donker)}
@media (max-width:700px){.rg-kaart{min-height:40px!important}}
@media (max-width:700px){.rg-seinen{min-height:74px;align-content:flex-start}}

/* verhaal E (28 september 2026): per afdeling een kopregel met vinkje, geen kaartje */
.rg.vink .rg-kaart{display:none}
.rg.vink .rg-seinen{left:16px!important;top:auto!important;bottom:16px;right:auto}
.rg.vink .rg-seinen.rechts{left:auto!important;right:16px}
.rg-sein.rg-kop{gap:11px;padding:10px 16px 10px 11px;border-radius:12px;font-size:17px;font-weight:600;box-shadow:0 12px 30px -12px rgba(14,23,55,.45);white-space:normal;max-width:420px}
.rg-sein.rg-kop svg{width:24px;height:24px;border-radius:7px;padding:3px}
.rg-sein.rg-kop>span{display:flex;flex-direction:column;gap:1px;line-height:1.3}
.rg-sein.rg-kop small{font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--grijs)}
.rg-sein.rg-slotkop{padding:12px 18px}
@media (max-width:699px){
  .rg.vink .rg-seinen{min-height:62px;margin-top:12px}
  .rg-sein.rg-kop{font-size:16px;padding:9px 13px 9px 10px;box-shadow:none;max-width:none;width:100%;box-sizing:border-box}
  .rg-sein.rg-kop svg{width:22px;height:22px}
  .rg-sein.rg-kop small{font-size:11px}
}

/* plattegrond (28 september 2026): klein kaartje met foto en drie vinkjes, lijst in drie groepen */
.vk .pk-kaartje{width:264px;padding:0;overflow:hidden}
.vk .pk-kfoto{display:block;width:100%;height:88px;object-fit:cover}
.vk .pk-kin{padding:10px 14px 13px}
.pk-vinken{list-style:none;margin:9px 0 0;padding:0;display:grid;gap:7px}
.pk-vinken li{display:flex;gap:8px;align-items:flex-start;font-size:13.5px;line-height:1.35;color:var(--donker);font-weight:500}
.pk-vinken svg{width:18px;height:18px;flex:none;color:#fff;background:var(--blad);border-radius:5px;padding:2px;margin-top:0}
.pk-venster.klein .pk-foto{height:140px}
.pk-venster.klein .pk-naam{font-size:22px;margin-bottom:6px}
.pk-venster.klein .pk-vinken{gap:10px;margin-top:12px}
.pk-venster.klein .pk-vinken li{font-size:16px}
.pk-venster.klein .pk-vinken svg{width:22px;height:22px;border-radius:6px}
.vk .pk-groepen{display:grid;grid-template-columns:repeat(3,1fr);column-gap:32px;margin-top:22px}
.vk .pk-gkop{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--blad);font-weight:600;margin:0 0 4px}
.vk .pk-groep ol{list-style:none;margin:0;padding:0;border-top:1px solid var(--lijn)}
.vk .voorbeelden .pk-groep li{display:block;background:none;border:0;border-bottom:1px solid var(--lijn);border-radius:0;padding:0;gap:0}
.vk .pk-groep button{display:grid;grid-template-columns:30px 1fr;align-items:baseline;width:100%;text-align:left;background:none;border:0;padding:10px 0;font:inherit;color:var(--donker);cursor:pointer}
.vk .pk-groep .n{font-size:12.5px;color:var(--grijs);font-variant-numeric:tabular-nums;font-weight:600}
.vk .pk-groep .t{font-size:15px;font-weight:600;line-height:1.3}
.vk .pk-groep button:hover .t,.vk .pk-groep button:hover .n,.vk .pk-groep button:focus-visible .t{color:var(--blad)}
@media (max-width:700px){.vk .pk-groepen{grid-template-columns:1fr;row-gap:18px}.vk .pk-groep ol{display:grid;grid-template-columns:1fr 1fr;column-gap:16px}.vk .pk-groep .t{font-size:14px}.vk .pk-groep button{grid-template-columns:26px 1fr}}
.vk .voorbeelden .pk-vinken{display:grid;grid-template-columns:none}
.vk .voorbeelden .pk-vinken li{display:flex;background:none;border:0;border-radius:0;padding:0;box-shadow:none;min-height:0}
.vk .pk-kaartje.onder{transform:translate(24px,-28px)}
.vk .pk-kaartje.links.onder{transform:translate(calc(-100% - 24px),-28px)}
.vk .voorbeelden .pk-vinken{margin:9px 0 0;gap:7px}
.vk .voorbeelden .pk-vinken li{flex-direction:row;gap:8px;transition:none}
/* hero: naam van de afdeling linksboven (28 september 2026) */
.rg-afdlabel{position:absolute;left:14px;top:14px;z-index:5;display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.95);border:1px solid var(--lijn);border-radius:10px;padding:7px 12px 7px 8px;font-size:14px;font-weight:600;color:var(--donker);box-shadow:0 6px 18px -8px rgba(52,62,61,.4);opacity:0;transform:translateY(-4px);transition:opacity .3s ease,transform .3s ease;pointer-events:none}
.rg-afdlabel.aan{opacity:1;transform:none;transition-delay:.35s}
.rg-afdlabel b{font-size:12px;background:var(--donker);color:#fff;border-radius:6px;padding:2px 6px;font-variant-numeric:tabular-nums}
@media (max-width:699px){.rg-afdlabel{left:10px;top:10px;font-size:13px;padding:5px 10px 5px 6px}}

/* 28 september 2026: regels op een regel op de computer */
@media (min-width:700px){
  .rg-sein.rg-kop{white-space:nowrap;max-width:none}
  .vk .pk-kaartje{width:auto;min-width:264px;max-width:400px}
  .vk .pk-kaartje .pk-vinken li{white-space:nowrap}
}
/* hero: afdeling en kopregel in een blok linksonder (28 september 2026) */
.rg-afdlabel{display:none}
.rg-sein.rg-kop{align-items:center}
.rg-sein.rg-kop small{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--blad);font-weight:700}

/* foto in het afdelingsvenster zacht laten verschijnen als hij nog laadt */
.pk-venster .pk-foto{background:var(--haar);transition:opacity .25s ease}
.pk-venster .pk-foto.laadt{opacity:0}

/* ── rapport v2 (28 september 2026): uren van de mensen zelf, vinkjes per stap, meer mogelijk ── */
.mag .m-afds .gaven{margin:0 0 -4px;font-size:13px;font-weight:600;color:var(--midden)}
.mag .m-mail{margin:14px 0 0;padding:14px 18px;border-radius:14px;background:var(--mintzacht);font-size:14.5px;line-height:1.55;color:var(--donker)}
.mag .m-mail b{font-weight:700}
.mag .m-zo{margin:4px 0 2px;padding:14px 18px;border-radius:14px;background:var(--mintzacht)}
.mag .m-zo>b{display:block;font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--midden);margin-bottom:8px}
.mag .m-zo>small{display:block;margin-top:8px;font-size:12.5px;color:var(--midden)}
.mag .m-vinken{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:6px 18px}
@media (min-width:700px){.mag .m-vinken{grid-template-columns:repeat(2,minmax(0,1fr))}}
.mag .m-vinken li{display:flex;align-items:flex-start;gap:9px;font-size:14.5px;line-height:1.4;color:var(--donker)}
.mag .m-vinken li svg{flex:none;width:18px;height:18px;margin-top:2px;color:var(--blad)}
.mag .m-vinken li small{display:block;font-size:12px;color:var(--midden)}
.mag .m-meer{margin-top:18px;padding:22px 24px;border-radius:18px;background:var(--vlak);border:1px solid var(--lijn)}
.mag .m-meer h3{font-size:19px;margin:0 0 6px}
.mag .m-meer>p{margin:0 0 14px;font-size:14.5px;line-height:1.55;color:var(--midden);max-width:720px}
.mag .m-meer-afd{display:grid;grid-template-columns:1fr;gap:12px 20px}
@media (min-width:700px){.mag .m-meer-afd{grid-template-columns:repeat(3,minmax(0,1fr))}}
.mag .m-meer-afd b{display:block;font-size:13.5px;margin-bottom:5px}
.mag .m-meer-afd ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.mag .m-meer-afd li{display:flex;align-items:flex-start;gap:7px;font-size:13.5px;line-height:1.4;color:var(--donker)}
.mag .m-meer-afd li svg{flex:none;width:15px;height:15px;margin-top:2px;color:var(--blad)}
.mag .m-samen>p{grid-column:1/-1}
@media print{.mag .m-zo,.mag .m-mail{background:var(--mintzacht)!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}.mag .m-meer{break-inside:avoid}.mag .m-vinken li{font-size:12px}.mag .m-meer-afd li{font-size:11.5px}}

.m-kaart{position:relative;margin:14px 0 4px;border-radius:16px;overflow:hidden;background:var(--haar)}
.m-kaart img{display:block;width:100%;height:auto}
.m-kaart .pin{position:absolute;transform:translate(-50%,-50%);width:26px;height:26px}
.m-kaart .pin i{font-style:normal;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#fff;color:var(--grijs);border:2px solid #fff;font-size:12px;font-weight:700;box-shadow:0 2px 8px rgba(52,62,61,.25);opacity:.85}
.m-kaart .pin.mee i{background:var(--blad);color:#fff;opacity:1}
@media (max-width:700px){.m-kaart .pin,.m-kaart .pin i{width:20px;height:20px;font-size:10px}}
.mag .m-zo-in{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:700px){.mag .m-zo-in{grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:start}}
.mag .m-ruimtes{display:flex;gap:10px}
.mag .m-ruimtes figure{margin:0;width:104px}
.mag .m-ruimtes img{display:block;width:104px;height:78px;object-fit:cover;border-radius:12px}
.mag .m-ruimtes figcaption{font-size:11.5px;line-height:1.3;color:var(--midden);margin-top:4px}
@media print{.mag .m-kaart{break-inside:avoid}.mag .m-ruimtes img{width:80px;height:60px}.mag .m-ruimtes figure{width:80px}}

/* ── invullen sneller (28 september 2026): knoppen in beeld, even breed, beweging ── */
.antwoorden .antwoord{animation:in .3s cubic-bezier(.2,.7,.3,1) both;animation-delay:calc(var(--i,0)*40ms)}
.antwoord.aan .bol{animation:pop .22s cubic-bezier(.3,1.6,.5,1)}
.antwoord{transition:background .15s,border-color .15s,transform .12s}
.antwoord:active{transform:scale(.985)}
@keyframes pulsje{0%{box-shadow:0 0 0 0 rgba(52,62,61,.45)}100%{box-shadow:0 0 0 14px rgba(52,62,61,0)}}
.knop.hoofd.pulsje{animation:pulsje .6s ease-out 1}
.keuzes{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}
.keuze{text-align:center;border-radius:12px;padding:10px 12px}
.keuzes.verborgen{display:none}
.antwoorden.meer.tegels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.antwoorden.meer.tegels .optie{min-width:0}
.antwoorden.meer.tegels .antwoord{align-items:flex-start;height:100%;font-size:14.5px;padding:10px 10px;line-height:1.3;gap:9px;overflow-wrap:anywhere}
.antwoorden.meer.tegels .antwoord .hok{width:20px;height:20px}
.antwoorden.meer.tegels .antwoord .hok{margin-top:1px}
@media (prefers-reduced-motion:reduce){.antwoorden .antwoord,.knop.hoofd.pulsje,.antwoord.aan .bol{animation:none}}

/* ── vraagschermen fris en strak (28 september 2026) ── */
:root{--hair:#E1E7E3;--mintzacht2:#E6F4EC}
.balk i{background:var(--blad)}
.scherm.vraag{padding-top:6px}
.scherm.vraag .vraagkop{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 10px}
.scherm.vraag .vraagkop .label{margin:0;font-size:12px;letter-spacing:.06em;color:var(--midden)}
.scherm.vraag .vraagkop .teller{margin:0;font-size:13px;font-weight:600;color:var(--midden);font-variant-numeric:tabular-nums}
.scherm.vraag h2{font-size:26px;line-height:1.18;letter-spacing:-.01em;margin-top:0}
.scherm.vraag .gedempt,.scherm.vraag .klein{color:var(--midden)}
.scherm.vraag .antwoorden{gap:10px}
.scherm.vraag .antwoord{border:1px solid var(--hair);border-radius:14px;padding:15px 16px;box-shadow:0 1px 2px rgba(52,62,61,.05);font-size:17px;line-height:1.35;color:var(--donker)}
.scherm.vraag .antwoord:hover{background:#FBFDFC;border-color:#C9D6CF}
.scherm.vraag .antwoord.aan{background:var(--mintzacht2);border-color:var(--blad);box-shadow:0 0 0 1px var(--blad) inset;font-weight:600}
.scherm.vraag .antwoord .bol{width:22px;height:22px;border:1.5px solid #B9C6BF;background:var(--wit);box-shadow:none;display:grid;place-items:center}
.scherm.vraag .antwoord.aan .bol{background:var(--blad);border-color:var(--blad);box-shadow:none}
.scherm.vraag .antwoord.aan .bol::after{content:"";width:6px;height:10px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:translateY(-1px) rotate(45deg)}
.scherm.vraag .antwoord .hok{width:22px;height:22px;border:1.5px solid #B9C6BF;border-radius:7px}
.scherm.vraag .antwoord.aan .hok{background:var(--blad);border-color:var(--blad)}
.scherm.vraag .antwoorden.meer.tegels .antwoord{border-radius:12px;padding:12px 12px;box-shadow:0 1px 2px rgba(52,62,61,.05)}
.scherm.vraag .tekstknop{display:block;margin-top:14px;font-size:14.5px;font-weight:500;color:var(--midden)}
.scherm.vraag .tekstknop.nvt{margin-top:10px}
.scherm.vraag .tekstknop.nvt.aan{color:var(--donker);font-weight:600}
.scherm.vraag .knoppenrij{margin-top:26px}
.scherm.vraag .knoppenrij .knop.hoofd{width:100%;min-height:56px;border-radius:14px;font-size:17px;font-weight:600;transition:background .2s,transform .12s,box-shadow .2s}
.scherm.vraag .knoppenrij .knop.hoofd:not(:disabled){box-shadow:0 6px 18px rgba(52,62,61,.18)}
.scherm.vraag .knoppenrij .knop.hoofd:disabled{background:#D5DDD8;color:#fff;box-shadow:none;cursor:default}
.scherm.vraag .knoppenrij .knop.hoofd:active:not(:disabled){transform:scale(.99)}
.scherm.vraag .antwoorden .antwoord{animation-delay:calc(var(--i,0)*45ms)}
/* startscherm in dezelfde taal */
.stapel input[type=text],.stapel input[type=email],.stapel select.sector{border:1px solid var(--hair);border-radius:12px;box-shadow:0 1px 2px rgba(52,62,61,.05)}
.stapel input[type=text]:focus,.stapel input[type=email]:focus,.stapel select.sector:focus{outline:none;border-color:var(--blad);box-shadow:0 0 0 3px rgba(111,184,148,.25)}
.stapel .keuze{border:1px solid var(--hair);border-radius:12px;box-shadow:0 1px 2px rgba(52,62,61,.05);min-height:48px}
.stapel .keuze.aan{background:var(--mintzacht2);border-color:var(--blad);box-shadow:0 0 0 1px var(--blad) inset}
.stapel label.veld>span,.stapel div>span{color:var(--midden)!important;font-size:13px!important;letter-spacing:.02em}
.stapel .knop.hoofd{min-height:56px;border-radius:14px;font-size:17px;font-weight:600;box-shadow:0 6px 18px rgba(52,62,61,.18)}

/* ── invulschermen in richting 1, Licht (28 september 2026): papier, witte kaarten met haarlijn, één accent, maatvoering van richting 3 ── */
:root{--hair:#D9DFDB;--mintzacht2:#EAF6EE;--accent:#3E8F63}
body.invul{background:var(--papier);color:var(--donker)}
body.invul .vraagkop .afdfoto{width:36px;height:36px;border-radius:50%;object-fit:cover;border:1.5px solid var(--hair);flex:none;align-self:center;margin-right:2px;background:var(--wit)}
body.invul .scherm.vraag .vraagkop{align-items:center}
body.invul .scherm.vraag .vraagkop .label{flex:1;color:var(--midden)}
body.invul .scherm.vraag .vraagkop .teller{color:var(--midden)}
body.invul .scherm.vraag .antwoord{background:var(--wit);border:1.5px solid var(--hair);border-radius:14px;box-shadow:none;padding:17px 18px;min-height:60px;font-size:17px;color:var(--donker)}
body.invul .scherm.vraag .antwoord:hover{background:var(--wit);border-color:#B9C6BF}
body.invul .scherm.vraag .antwoord.aan{background:var(--mintzacht2);border-color:var(--accent);box-shadow:none;font-weight:600}
body.invul .scherm.vraag .antwoord .bol,body.invul .scherm.vraag .antwoord .hok{width:22px;height:22px;border:1.5px solid #B9C6BF;background:var(--wit)}
body.invul .scherm.vraag .antwoord.aan .bol,body.invul .scherm.vraag .antwoord.aan .hok{background:var(--accent);border-color:var(--accent)}
body.invul .scherm.vraag .antwoord .hok{border-radius:7px}
body.invul .scherm.vraag .antwoorden.meer.tegels .antwoord{border-radius:14px;padding:14px 14px;min-height:60px;box-shadow:none;font-size:16px}
body.invul .scherm.vraag .knoppenrij .knop.hoofd,body.invul .stapel .knop.hoofd,body.invul .knop.hoofd{background:var(--donker);color:var(--wit);border-radius:14px;min-height:58px;box-shadow:none}
body.invul .knop.hoofd:hover{background:#2A3332}
body.invul .scherm.vraag .knoppenrij .knop.hoofd:not(:disabled){box-shadow:none}
body.invul .scherm.vraag .knoppenrij .knop.hoofd:disabled{background:#D5DDD8;color:#fff}
body.invul .knop.tweede{background:var(--wit);border:1.5px solid var(--hair);color:var(--donker);border-radius:14px;min-height:56px}
body.invul .stapel input[type=text],body.invul .stapel input[type=email],body.invul .stapel select.sector,body.invul textarea,body.invul input.klein{background:var(--wit);border:1.5px solid var(--hair);border-radius:14px;box-shadow:none;color:var(--donker)}
body.invul .stapel input:focus,body.invul .stapel select.sector:focus,body.invul textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(62,143,99,.18)}
body.invul .stapel .keuze{background:var(--wit);border:1.5px solid var(--hair);border-radius:14px;box-shadow:none;min-height:52px;color:var(--donker)}
body.invul .stapel .keuze.aan{background:var(--mintzacht2);border-color:var(--accent);box-shadow:none;font-weight:600}
body.invul .kaart{background:var(--wit);border:1.5px solid var(--hair);border-radius:14px;box-shadow:none}
body.invul .kaart.mint{background:var(--mintzacht2);border-color:#CDE7D7}
body.invul .lamp{border:1.5px solid var(--hair);border-radius:12px;box-shadow:none}
body.invul .waarschuwing{border-radius:14px}
body.invul .beeld{border-radius:14px;box-shadow:none;border:1.5px solid var(--hair)}
body.invul .vinkcirkel{background:var(--accent)}body.invul .vinkcirkel svg{stroke:#fff}
body.invul .stapel .knop.hoofd{box-shadow:none}
.antwoord .at{display:block;min-width:0}
.antwoord .detail{display:block;font-size:13.5px;line-height:1.35;color:#607466;font-weight:400;margin-top:2px}
.antwoord.aan .detail{color:#4A5D53}

/* ── stap 1 en 2 (28 september 2026): pilknoppen, korte klaartekst, uren als knoppen, vinkje zonder beweging ── */
@media (prefers-reduced-motion:reduce){.vinkcirkel svg{stroke-dashoffset:0}}
.pillen{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px}
.pillen .toelichting{display:contents}
.pillen .toelichting-veld{flex:1 1 100%;margin-top:4px}
.scherm.vraag .pillen .tekstknop.nvt,.scherm.vraag .pillen .toelichting-knop{margin:0;display:inline-block;min-height:44px;border:1.5px solid var(--hair);background:var(--wit);border-radius:999px;padding:9px 14px;font-size:14.5px;font-weight:600;line-height:1.2;color:var(--midden);background:transparent;text-decoration:none}
.scherm.vraag .pillen .tekstknop.nvt.aan{background:var(--mintzacht2);border-color:var(--accent);color:var(--donker)}
.klaar-afd{font-weight:600;font-size:17px;margin:-6px 0 0}
.treden-blok>.label{display:block;margin:0 0 8px}
.treden-blok+.treden-blok{margin-top:18px}
.antwoorden.treden .antwoord{min-height:60px;align-items:center}
.antwoorden.treden .antwoord .bol{flex:none}
.antwoorden.treden .antwoord:last-child:nth-child(odd){grid-column:1/-1}

/* ── stap 4 (28 september 2026): Uw eigen deel, doorsturen als optie, systemenvraag in groepen ── */
.scherm.vraag .antwoord.door{margin-top:14px;border-style:dashed}
body.invul .scherm.vraag .antwoord.door{border:1.5px dashed #B9C6BF;background:transparent}
body.invul .scherm.vraag .antwoord.door.aan{border-style:solid;border-color:var(--accent);background:var(--mintzacht2)}
.scherm.vraag .antwoord.door .bol{border-style:dashed}
.scherm.vraag .antwoord.door.aan .bol{border-style:solid}
.scherm.vraag.doorgestuurd .antwoorden:not(.door-keuze) .antwoord:not(.door){opacity:.45}
.door-keuze{margin-top:10px}
.antwoorden.meer.groepen{display:flex;flex-direction:column;gap:10px}
.groep{background:var(--wit);border:1.5px solid var(--hair,#D9DFDB);border-radius:14px;overflow:hidden}
.groep.heeft{border-color:var(--accent,#3E8F63)}
.groep-kop{display:flex;align-items:center;gap:10px;width:100%;min-height:60px;padding:14px 16px;background:none;border:0;font:inherit;font-size:17px;font-weight:600;color:var(--donker);text-align:left;cursor:pointer}
.groep-naam{flex:1}
.groep-n{min-width:24px;height:24px;padding:0 7px;border-radius:12px;background:var(--accent,#3E8F63);color:#fff;font-size:13px;font-weight:600;display:none;align-items:center;justify-content:center}
.groep.heeft .groep-n{display:inline-flex}
.groep-pijl{display:inline-flex;color:#607466;transition:transform .2s}
.groep.open .groep-pijl{transform:rotate(180deg)}
.groep-leden{display:none;flex-direction:column;gap:8px;padding:0 12px 12px}
.groep.open .groep-leden{display:flex}
body.invul .scherm.vraag .groep-leden .antwoord{min-height:52px;padding:13px 14px;font-size:16px;border-radius:12px;background:var(--papier,#F5F9F6)}
body.invul .scherm.vraag .groep-leden .antwoord.aan{background:var(--mintzacht2)}
.groep-leden .optie{margin:0}
.eigen-rij{margin-bottom:8px}
.eigen-open{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.eigen-open span{flex:1 1 220px}
body.invul .afdrij{background:var(--wit);border:1.5px solid var(--hair);border-radius:14px}
body.invul .afdrij input{border-radius:10px}

/* ── Algemeen als gesprek (29 september 2026): zin onder een opvolgvraag, ronde doorgeven ── */
.scherm.vraag .nazin{margin:14px 2px 0;font-size:14px;line-height:1.45;color:#607466}
.scherm.vraag .tekstknop.liever{display:block;margin:14px auto 0;font-size:14px;font-weight:500;color:#607466;text-decoration:underline;text-underline-offset:3px}
.liever-venster h2{font-size:22px;margin:0 0 6px}
.liever-venster .veld input{width:100%}

/* ruggengraat (29 september 2026): regel onder de laatste vraag */
.scherm.vraag .laatste{text-align:center;margin:10px 0 0}

/* "Nog toevoegen": alle vakjes even hoog binnen een rij, tekst gecentreerd (29 september 2026) */
.keuzes{align-items:stretch}
.keuzes .keuze{display:flex;align-items:center;justify-content:center;line-height:1.25}
/* per afdeling: Doe ik zelf of Een collega (29 september 2026) */
.afdrij .keuzes.wie{grid-template-columns:1fr 1fr 1fr;gap:6px}
.afdrij.uit{background:var(--wit);border-color:var(--hair)}
.afdrij.uit .top b{color:var(--grijs)}
.afdrij .keuzes.wie .keuze{min-height:38px;padding:6px 10px;font-size:14px}
/* korte of uitgebreide scan (29 september 2026) */
.stapel .soort{display:flex;flex-direction:column;gap:6px;text-align:left;padding:18px 18px;border-radius:16px;border:1.5px solid var(--hair);background:var(--wit);cursor:pointer;font:inherit;color:var(--donker)}
.stapel .soort b{font-size:18px}
.stapel .soort span{font-size:15px;line-height:1.45;color:var(--grijs)}
.stapel .soort small{font-size:13px;color:#607466;font-weight:600}
.stapel .soort:hover,.stapel .soort.aan{border-color:var(--blad);background:var(--mintzacht2)}
/* statuspagina (29 september 2026) */
.mag .beheerbalk{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 14px;border-radius:12px;background:var(--mintzacht2);font-size:14px;margin-bottom:14px}
.mag .beheerbalk small{color:var(--grijs);margin-left:auto}
.mag .m-deeln .k .twee{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.mag .m-deeln .k .twee .tekstknop{font-size:13px}
.mag .stappen-kort{margin:12px 0 0;padding-left:22px;display:flex;flex-direction:column;gap:8px;font-size:16px;line-height:1.5;color:var(--donker)}
.mag .m-ovz.onder{border-top:1px solid var(--lijn);padding-top:18px}
.mag .m-ovz.onder a{color:var(--donker);text-decoration:underline;text-underline-offset:3px}
/* vanzelf doorgaan: de volgende vraag komt vlot (29 september 2026) */
.scherm.snel{animation-duration:.16s}
.scherm.snel .antwoorden .antwoord,.scherm.vraag.snel .antwoorden .antwoord{animation-duration:.16s;animation-delay:0s}

/* kale rondgang voor inbedding op opsight.nl (29 september 2026) */
body.ingebed{background:transparent}
body.ingebed .kop,body.ingebed #balk,body.ingebed #melding{display:none}
body.ingebed main{padding:0}
.ingebed-rg{padding:0}
.ingebed-rg .h2-beeld{margin:0}

/* keuze korte of uitgebreide scan, links en rechts met beeld (30 september 2026) */
.soortkeuze{gap:26px}
.soortkop{text-align:center;max-width:640px;margin:8px auto 0}
.soortkop h1{font-size:clamp(28px,4vw,38px)}
.soortkop p{font-size:17px;margin-top:10px}
.soorten{display:grid;grid-template-columns:1fr;gap:18px}
@media (min-width:760px){.soorten{grid-template-columns:1fr 1fr;gap:24px}}
.soort2{display:flex;flex-direction:column;text-align:left;padding:0;border-radius:22px;border:1.5px solid var(--hair);background:var(--wit);cursor:pointer;font:inherit;color:var(--donker);overflow:hidden;transition:border-color .2s,box-shadow .2s,transform .2s}
.soort2:hover,.soort2.aan{border-color:var(--blad);box-shadow:0 18px 40px -22px rgba(52,62,61,.45);transform:translateY(-2px)}
.soort2-beeld{position:relative;display:block;aspect-ratio:16/9;background:var(--mintzacht2);overflow:hidden}
.soort2-beeld img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.soort2:hover .soort2-beeld img{transform:scale(1.03)}
.soort2-beeld em{position:absolute;left:14px;bottom:14px;font-style:normal;font-size:13px;font-weight:600;background:var(--wit);color:var(--donker);border-radius:999px;padding:6px 12px;box-shadow:0 6px 16px -8px rgba(52,62,61,.5)}
.soort2-tekst{display:flex;flex-direction:column;gap:12px;padding:22px 22px 24px;flex:1}
.soort2-tekst b{font-size:24px;letter-spacing:-.02em}
.soort2-tekst .uitleg{font-size:16px;line-height:1.5;color:var(--midden)}
.soort2-tekst .punten{display:flex;flex-direction:column;gap:8px;margin:2px 0 6px}
.soort2-tekst .punten>span{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:500}
.soort2-tekst .punten svg{width:20px;height:20px;flex:none;color:#fff;background:var(--blad);border-radius:6px;padding:3px;box-sizing:border-box}
.soort2-knop{margin-top:auto;display:block;text-align:center;background:var(--donker);color:#fff;border-radius:14px;padding:14px 16px;font-size:16px;font-weight:600}
.soort2:hover .soort2-knop{background:#2a3331}

.soortkop .soortwie{font-size:17px;font-weight:600;color:var(--donker);background:var(--mintzacht2);border-radius:14px;padding:14px 18px;margin-top:16px;line-height:1.45}

/* wie vult welke afdeling in: kaarten met beeld (30 september 2026) */
.wie-kiest{gap:22px}
.wk-stand{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 22px;background:var(--wit);border:1.5px solid var(--hair);border-radius:16px;padding:14px 20px;font-size:15px;color:var(--midden)}
.wk-stand strong{font-size:17px;color:var(--donker)}
.wk-stand b{color:var(--donker)}
.wk-stand.leeg strong{color:var(--grijs)}
.wk-raster{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:700px){.wk-raster{grid-template-columns:1fr 1fr;gap:16px}}
@media (min-width:1040px){.wk-raster{grid-template-columns:1fr 1fr 1fr;gap:18px}}
.wk{display:flex;gap:12px;background:var(--wit);border:1.5px solid var(--hair);border-radius:18px;overflow:hidden;padding:10px;transition:border-color .2s,box-shadow .2s}
.wk.zelf,.wk.collega{border-color:var(--blad);box-shadow:0 14px 30px -22px rgba(52,62,61,.5)}
.wk-beeld{flex:none;width:72px;height:72px;border-radius:12px;overflow:hidden;background:var(--mintzacht2)}
.wk-beeld img{width:100%;height:100%;object-fit:cover;display:block;transition:filter .25s,opacity .25s}
.wk.niet .wk-beeld img{filter:grayscale(1);opacity:.45}
.wk-in{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.wk-in>b{font-size:17px;letter-spacing:-.01em}
.wk.niet .wk-in>b{color:var(--grijs)}
.wk-in small{font-size:13px;color:var(--grijs);line-height:1.35}
.wk-in input{background:var(--wit);border-radius:10px}
.wk-seg{display:grid;grid-template-columns:1fr 1fr 1fr;background:var(--papier,#F5F9F6);border:1px solid var(--hair);border-radius:12px;padding:3px;gap:3px}
.wk-seg button{font:inherit;font-size:13.5px;font-weight:600;color:var(--midden);background:none;border:0;border-radius:9px;padding:8px 4px;cursor:pointer;line-height:1.2;min-height:36px}
.wk-seg button.aan{background:var(--donker);color:#fff}
.wk.niet .wk-seg button.aan{background:var(--wit);color:var(--donker);box-shadow:0 1px 3px rgba(52,62,61,.25)}
.wk-voet{display:flex;justify-content:center}
.wk-voet .knop{max-width:420px}
@media (min-width:700px){
  .wk{flex-direction:column;gap:0;padding:0}
  .wk-beeld{width:100%;height:auto;aspect-ratio:16/8;border-radius:0}
  .wk-in{padding:16px 16px 18px;gap:10px}
}
.wk-beeld img.ver{transform:scale(1.9);transform-origin:88% 48%}
@media (max-width:699px){.wk.niet .wk-in small{display:none}.wk-seg button{font-size:13px;padding:6px 2px}}