/* Demo NL v2, gedeelde vormgeving voor de dertien Nederlandse pagina's.
   Tokens, kop, knoppen en voet komen uit homepage v15, zodat alles een geheel vormt.
   Lopende tekst op ongeveer 740 px, tabellen en blokken mogen breder. */
:root{
  --vv-diep:#0B2A5B; --vv-inkt:#1F2A44; --vv-teal:#1FBFAE; --vv-teal-d:#0F7C70; --vv-teal-t:#0B5F55;
  --vv-papier:#FAF6EE; --vv-zand:#F5F2E9; --vv-rand:#E3DED2; --vv-grijs:#5C6670; --vv-lichtblauw:#EAF1FA;
  --vv-oranje:#E07A2F;
  --kop:Literata,Georgia,serif; --tekst:Jost,"Segoe UI",Arial,sans-serif;
  --m:clamp(16px,4vw,64px); --breed:1240px; --lees:740px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html,body{overflow-x:clip}
body{margin:0;background:var(--vv-papier);color:var(--vv-inkt);font:400 17px/1.6 var(--tekst)}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--kop);font-weight:600;color:var(--vv-diep);letter-spacing:-.015em;margin:0}
p{margin:0}
ul,ol{margin:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.naar-inhoud{position:absolute;left:12px;top:-60px;background:var(--vv-diep);color:#fff;padding:10px 14px;border-radius:6px;z-index:50}
.naar-inhoud:focus{top:10px}
.wrap{width:min(100% - 2*var(--m),var(--breed));margin-inline:auto}
.lees{max-width:var(--lees)}
.kicker{display:block;font:600 12px/1.4 var(--tekst);letter-spacing:.16em;text-transform:uppercase;color:var(--vv-teal-d);margin-bottom:14px}
.donker{background:var(--vv-diep);color:var(--vv-papier)}
.donker h1,.donker h2,.donker h3{color:var(--vv-papier)}
.donker .kicker{color:var(--vv-teal)}
.zand{background:var(--vv-zand)}
.wit{background:#fff}
.lichtblauw{background:var(--vv-lichtblauw)}
h1{font-size:clamp(36px,4.6vw,62px);line-height:1.04;letter-spacing:-.022em}
h2{font-size:clamp(28px,3.2vw,44px);line-height:1.08}
h3{font-size:clamp(19px,1.6vw,23px);line-height:1.2}
.lead{font-size:clamp(18px,1.5vw,21px);line-height:1.5;max-width:44ch}
.donker .lead{color:rgba(250,246,238,.88)}
.klein{font-size:14.5px;color:var(--vv-grijs);line-height:1.5}
.donker .klein{color:rgba(250,246,238,.74)}
.tekst p+p,.tekst p+ul,.tekst ul+p{margin-top:.8em}
.tekst ul{padding-left:1.2em}
.tekst li+li{margin-top:.35em}

/* knoppen en links */
.knop{display:inline-flex;align-items:center;justify-content:center;gap:.5em;background:var(--vv-teal);color:var(--vv-diep);font:600 17px/1.15 var(--tekst);padding:16px 24px;border-radius:8px;text-decoration:none;border:0;cursor:pointer;text-align:center;transition:background .18s}
.knop.klein{font-size:15px;padding:12px 18px}
.knop.lijn{background:transparent;color:inherit;box-shadow:inset 0 0 0 1.5px currentColor}
.tekstlink{font-weight:500;text-decoration:underline;text-underline-offset:.22em;text-decoration-thickness:1.5px;text-decoration-color:var(--vv-teal)}
.donker .tekstlink{color:var(--vv-papier)}
.acties{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:28px}
:focus-visible{outline:3px solid var(--vv-teal);outline-offset:3px}
@media (hover:hover){
  .knop:hover{background:#19AD9E}
  .knop.lijn:hover{background:rgba(31,191,174,.1)}
  .tekstlink:hover{text-decoration-color:currentColor}
  .menu a:not(.knop):hover{color:var(--vv-teal-d)}
  .voet a:hover{color:#fff}
}

/* conceptbalk en kop */
.conceptbalk{background:var(--vv-inkt);color:var(--vv-papier);font-size:12.5px;letter-spacing:.03em;text-align:center;padding:6px var(--m)}
.conceptbalk a{color:var(--vv-teal)}
.kop{border-bottom:1px solid var(--vv-rand);background:var(--vv-papier);position:relative;z-index:10}
.koprij{display:flex;align-items:center;gap:28px;min-height:76px;padding:10px 0}
.merk{display:flex;align-items:center;gap:12px;text-decoration:none;font:600 22px/1 var(--kop);color:var(--vv-diep);letter-spacing:-.01em}
.merk img{width:44px;height:44px}
.menu{display:flex;align-items:center;gap:26px;margin-left:auto;font-weight:500;font-size:16px}
.menu a{text-decoration:none;color:var(--vv-inkt);white-space:nowrap}
.menu a[aria-current="page"]{color:var(--vv-teal-t);text-decoration:underline;text-decoration-color:var(--vv-teal);text-underline-offset:.4em;text-decoration-thickness:2px}
.menu a.knop{color:var(--vv-diep)}
.menuknop{display:none;margin-left:auto;align-items:center;gap:10px;background:none;border:1.5px solid var(--vv-diep);border-radius:8px;color:var(--vv-diep);font:600 15px/1 var(--tekst);padding:10px 14px;cursor:pointer}
.menuknop .streep{position:relative;width:16px;height:2px;background:currentColor}
.menuknop .streep::before,.menuknop .streep::after{content:"";position:absolute;left:0;width:16px;height:2px;background:currentColor}
.menuknop .streep::before{top:-5px}.menuknop .streep::after{top:5px}
.menuknop[aria-expanded="true"] .streep{background:transparent}
.menuknop[aria-expanded="true"] .streep::before{top:0;transform:rotate(45deg)}
.menuknop[aria-expanded="true"] .streep::after{top:0;transform:rotate(-45deg)}
@media (max-width:1060px) and (min-width:901px){.menu{gap:18px;font-size:15px}.koprij{gap:20px}}
@media (max-width:900px){
  .koprij{min-height:60px;gap:12px;padding:8px 0}
  .merk{font-size:19px}.merk img{width:36px;height:36px}
  .js .menuknop{display:inline-flex}
  .menu{flex-wrap:wrap;gap:10px 18px;font-size:15px;width:100%}
  html:not(.js) .koprij{flex-wrap:wrap}
  .js .menu{display:none;position:absolute;left:0;right:0;top:100%;background:var(--vv-papier);border-bottom:1px solid var(--vv-rand);box-shadow:0 18px 30px -18px rgba(31,42,68,.35);flex-direction:column;align-items:stretch;gap:0;padding:6px var(--m) 20px;margin:0}
  .js .menu.open{display:flex}
  .js .menu a{padding:14px 0;border-bottom:1px solid var(--vv-rand);font-size:18px}
  .js .menu a.knop{margin-top:16px;border:0;padding:16px 20px}
}

/* paginakop: tekst links, vogel rechts. Op een telefoon komt de vogel klein boven de kop. */
.paginakop{padding:clamp(40px,7vh,88px) 0 clamp(36px,6vh,72px)}
.paginakop .wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:24px clamp(32px,5vw,72px);align-items:center}
.paginakop .lead{margin-top:18px}
.paginakop .onderregel{margin-top:14px;font-size:15px;color:var(--vv-grijs)}
.paginakop .vogel{justify-self:center;width:min(100%,300px)}
.paginakop.zonder-beeld .wrap{grid-template-columns:minmax(0,1fr)}
@media (max-width:900px){
  .paginakop{padding:24px 0 36px}
  .paginakop .wrap{grid-template-columns:1fr}
  .paginakop .vogel{order:-1;justify-self:start;width:120px}
}

/* blokken */
.blok{padding:clamp(48px,8vh,96px) 0}
.blok.krap{padding:clamp(32px,5vh,56px) 0}
.blok h2{margin-bottom:.45em}
.blok .intro{max-width:var(--lees);margin-bottom:clamp(22px,3vh,34px)}
.blok .intro p{font-size:18px}
.kolommen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px clamp(24px,3.4vw,48px)}
.kolommen.twee{grid-template-columns:repeat(2,minmax(0,1fr))}
.kolom{border-top:2px solid var(--vv-diep);padding-top:14px}
.kolom h3{margin-bottom:6px}
.kolom p{font-size:16.5px;line-height:1.55}
.kolom .nr{display:block;font:600 13px/1 var(--tekst);letter-spacing:.14em;color:var(--vv-teal-t);margin-bottom:10px}
.donker .kolom{border-top-color:var(--vv-teal)}
@media (max-width:900px){.kolommen,.kolommen.twee{grid-template-columns:1fr;gap:20px}}

/* vinklijst */
.vinken{list-style:none;padding:0;display:grid}
.vinken li{position:relative;padding:11px 0 11px 28px;border-top:1px solid var(--vv-rand);line-height:1.45}
.vinken li:last-child{border-bottom:1px solid var(--vv-rand)}
.vinken li::before{content:"";position:absolute;left:2px;top:18px;width:12px;height:7px;border-left:2.5px solid var(--vv-teal-d);border-bottom:2.5px solid var(--vv-teal-d);transform:rotate(-45deg)}
.vinken b{color:var(--vv-diep);font-weight:600}
.vinken.twee{grid-template-columns:1fr 1fr;column-gap:40px}
.vinken.twee li:nth-last-child(2){border-bottom:1px solid var(--vv-rand)}
@media (max-width:760px){.vinken.twee{grid-template-columns:1fr}.vinken.twee li:nth-last-child(2){border-bottom:0}}

/* voorbeeldkader: altijd zichtbaar gelabeld */
.voorbeeld{border:1.5px dashed #C9C2B3;border-radius:8px;background:#fff;padding:clamp(18px,2.4vw,28px);position:relative}
.voorbeeld .label{display:inline-block;font:600 12.5px/1 var(--tekst);letter-spacing:.14em;text-transform:uppercase;background:var(--vv-zand);border:1px solid var(--vv-rand);color:var(--vv-grijs);padding:6px 9px;border-radius:4px;margin-bottom:14px}
.voorbeeld h3{margin-bottom:6px}

/* goed, kans, aandacht */
.gka{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.gka div{border-radius:6px;padding:16px 18px;background:var(--vv-papier);border-top:4px solid var(--vv-teal-d)}
.gka div:nth-child(2){border-top-color:var(--vv-diep)}
.gka div:nth-child(3){border-top-color:var(--vv-oranje)}
.gka b{display:block;font:600 18px/1.2 var(--kop);color:var(--vv-diep);margin-bottom:6px}
.gka p{font-size:15.5px;line-height:1.5}
.gka .bron{display:block;margin-top:8px;font-size:13px;color:var(--vv-grijs)}
@media (max-width:760px){.gka{grid-template-columns:1fr}}

/* stappenrij (kort, geen tien stappen) */
.stappen{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px clamp(20px,3vw,40px);counter-reset:s}
.stappen li{counter-increment:s;position:relative;padding-top:52px}
.stappen li::before{content:counter(s);position:absolute;top:0;left:0;font:600 38px/1 var(--kop);color:var(--vv-teal-d)}
.stappen b{display:block;font:600 19px/1.25 var(--kop);color:var(--vv-diep);margin-bottom:4px}
.stappen p{font-size:16px;line-height:1.5}
@media (max-width:760px){.stappen{grid-template-columns:1fr}.stappen li{padding:0 0 0 46px}.stappen li::before{font-size:30px}}

/* vragen */
.vragen{max-width:var(--lees);border-top:1px solid var(--vv-rand)}
.vragen details{border-bottom:1px solid var(--vv-rand)}
.vragen summary{cursor:pointer;list-style:none;padding:18px 40px 18px 0;position:relative;font:600 clamp(17px,1.4vw,19px)/1.35 var(--kop);color:var(--vv-diep)}
.vragen summary::-webkit-details-marker{display:none}
.vragen summary::after{content:"";position:absolute;right:8px;top:24px;width:10px;height:10px;border-right:2px solid var(--vv-teal-d);border-bottom:2px solid var(--vv-teal-d);transform:rotate(45deg);transition:transform .2s}
.vragen details[open] summary::after{transform:rotate(-135deg);top:28px}
.vragen .antwoord{padding:0 0 20px;font-size:16.5px;line-height:1.6}
.vragen .antwoord p+p{margin-top:.7em}
.vragen.open-antwoorden div.vraag{border-bottom:1px solid var(--vv-rand);padding:18px 0}
.vragen.open-antwoorden h3{font-size:clamp(17px,1.4vw,19px);margin-bottom:6px}

/* bronregel */
.bronnen{margin-top:18px;font-size:14px;color:var(--vv-grijs);line-height:1.5}
.bronnen a{color:inherit}

/* slotactie */
.slotactie{padding:clamp(48px,8vh,88px) 0}
.slotactie .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px}
.slotactie h2{max-width:22ch}
.slotactie p{margin-top:8px;max-width:48ch}

/* demomelding bij knoppen die in het echt zouden bellen of mailen */
.demotoast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:60;background:var(--vv-inkt);color:var(--vv-papier);padding:14px 18px;border-radius:8px;box-shadow:0 12px 30px rgba(0,0,0,.25);font-size:15.5px;max-width:min(92vw,520px)}
.demotoast[hidden]{display:none}

/* formulieren (demo) */
.formulier{display:grid;gap:16px;background:#fff;border:1px solid var(--vv-rand);border-radius:8px;padding:clamp(20px,3vw,32px)}
.formulier .demo-uitleg{font-size:14.5px;line-height:1.45;padding:10px 14px;border-radius:6px;background:var(--vv-zand);border-left:3px solid var(--vv-teal-d)}
.formulier label{font-size:14.5px;font-weight:500;display:grid;gap:6px;color:var(--vv-diep)}
.formulier .optie{font-weight:400;color:var(--vv-grijs)}
.formulier input{font:400 17px/1.3 var(--tekst);color:var(--vv-inkt);background:#fff;border:1px solid #CFC8BA;border-radius:6px;padding:13px 14px;width:100%}
.formulier input:focus{outline:3px solid var(--vv-teal);outline-offset:1px}
.formulier input[aria-invalid="true"]{border-color:#B3261E;box-shadow:0 0 0 1px #B3261E}
.formulier .fout{font-size:14px;color:#8C1D18;font-weight:500}
.formulier .fout[hidden]{display:none}
.formulier .knop{margin-top:4px;width:100%}
.melding{padding:16px 18px;border-radius:6px;background:var(--vv-zand);border-left:4px solid var(--vv-teal-d);font-size:16px;line-height:1.5}
.melding b{display:block;font:600 18px/1.3 var(--kop);color:var(--vv-diep);margin-bottom:4px}
.melding[hidden]{display:none}
.melding:focus{outline:3px solid var(--vv-teal);outline-offset:2px}

/* juridische documenten */
.doc{padding:clamp(36px,6vh,72px) 0 clamp(56px,9vh,110px)}
.doc .wrap{display:grid;grid-template-columns:minmax(0,260px) minmax(0,var(--lees));gap:clamp(28px,5vw,72px);align-items:start}
.doc .inhoudsopgave{position:sticky;top:20px;font-size:15px;line-height:1.45;border-left:2px solid var(--vv-rand);padding-left:16px}
.doc .inhoudsopgave b{display:block;font:600 13px/1.4 var(--tekst);letter-spacing:.12em;text-transform:uppercase;color:var(--vv-grijs);margin-bottom:10px}
.doc .inhoudsopgave ol{list-style:none;padding:0;display:grid;gap:7px}
.doc .inhoudsopgave a{text-decoration:none;color:var(--vv-inkt)}
.doc .inhoudsopgave a:hover{color:var(--vv-teal-t)}
.doc article h2{font-size:clamp(21px,1.8vw,25px);margin:2em 0 .5em;scroll-margin-top:20px}
.doc article h2:first-of-type{margin-top:0}
.doc article p,.doc article li{font-size:16.5px;line-height:1.65}
.doc article p+p{margin-top:.7em}
.doc article ul,.doc article ol.lid{padding-left:1.2em;margin:.6em 0}
.doc .lid{display:grid;grid-template-columns:3.2em 1fr;gap:0 4px;margin-top:.55em}
.doc .lid > span{font-weight:600;color:var(--vv-diep)}
.doc .versie{font-size:14.5px;color:var(--vv-grijs);margin-top:10px}
.doc .voorstelstatus,.voorstelstatus{margin-top:16px;padding:12px 16px;border-radius:6px;background:#FFF4E5;border-left:4px solid var(--vv-oranje);font-size:15.5px;line-height:1.5;max-width:var(--lees)}
.doc mark,.gewijzigd{background:#FDF1C7;padding:0 .15em;border-radius:2px}
.doc .open{display:block;margin:.8em 0;padding:10px 14px;border:1.5px dashed var(--vv-oranje);border-radius:6px;background:#FFFBF4;font-size:15.5px}
.doc .open b{color:#8A4A12}
.doc table{width:100%;border-collapse:collapse;font-size:15px;margin:1em 0}
.doc th,.doc td{text-align:left;vertical-align:top;padding:9px 10px;border-bottom:1px solid var(--vv-rand)}
.doc th{font-weight:600;color:var(--vv-diep);background:var(--vv-zand)}
@media (max-width:900px){
  .doc .wrap{grid-template-columns:1fr}
  .doc .inhoudsopgave{position:static}
  .doc .tabelschuif{overflow-x:auto}
}
@media print{
  .conceptbalk,.kop,.voet,.inhoudsopgave,.printknop{display:none!important}
  .doc .wrap{display:block}
  body{background:#fff}
}

/* voet */
.voet{background:var(--vv-inkt);color:rgba(250,246,238,.8);font-size:15px;padding:44px 0 28px}
.voet a{color:inherit;text-decoration:none}
.voet a:focus-visible{outline-color:var(--vv-teal)}
.voet .groepen{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));gap:28px clamp(24px,4vw,56px)}
.voet .groep b{display:block;font:600 12px/1.4 var(--tekst);letter-spacing:.14em;text-transform:uppercase;color:var(--vv-teal);margin-bottom:12px}
.voet ul{list-style:none;padding:0;display:grid;gap:4px}
.voet ul a{display:inline-block;padding:5px 0}
.voet .merkregel{font:600 19px/1.2 var(--kop);color:var(--vv-papier);margin-bottom:8px}
.voet .onderregel{margin-top:32px;padding-top:18px;border-top:1px solid rgba(250,246,238,.16);font-size:13.5px;color:rgba(250,246,238,.66)}
@media (max-width:900px){.voet .groepen{grid-template-columns:1fr 1fr}.voet .groep.eerste{grid-column:1/-1}}
@media (max-width:480px){.voet .groepen{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}

/* PRIJZEN */
.prijskop .prijsnoot{display:inline-block;margin-top:14px;font:600 15px/1.2 var(--tekst);letter-spacing:.02em;background:#fff;border:1px solid var(--vv-rand);border-radius:999px;padding:7px 14px;color:var(--vv-diep)}
.prijsduo{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(20px,3vw,40px);align-items:start}
.basis{background:#fff;border:1px solid var(--vv-rand);border-radius:8px;padding:clamp(22px,3.2vw,44px)}
.basis .prijs{font:600 clamp(52px,6vw,88px)/.92 var(--kop);color:var(--vv-diep);letter-spacing:-.03em}
.basis .voorwaarden{font-size:16px;color:var(--vv-grijs);margin:8px 0 18px}
.basis .zelfde{font-size:15.5px;margin-top:16px}
.uitbreiding{border:1px solid var(--vv-rand);border-radius:8px;padding:clamp(20px,2.4vw,30px);display:grid;gap:10px;background:var(--vv-papier)}
.uitbreiding .bedrag{font:600 clamp(24px,2.2vw,30px)/1.1 var(--kop);color:var(--vv-diep)}
.som{width:100%;border-collapse:collapse;font-size:15.5px;margin-top:6px}
.som td{padding:7px 0;border-bottom:1px solid var(--vv-rand)}
.som td:last-child{text-align:right;white-space:nowrap}
.som tr.totaal td{font-weight:600;color:var(--vv-diep);border-bottom:2px solid var(--vv-diep)}
.apart{list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(24px,4vw,56px);max-width:980px}
.apart li{padding:14px 0;border-top:1px solid var(--vv-rand);font-size:16.5px;line-height:1.5}
.apart b{display:block;font:600 18px/1.3 var(--kop);color:var(--vv-diep);margin-bottom:2px}
.inhoudgroepen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px clamp(24px,3.4vw,48px)}
.inhoudgroepen h3{font-size:18px;margin-bottom:8px}
.inhoudgroepen ul{padding-left:1.1em;font-size:15.5px;line-height:1.5}
.inhoudgroepen li+li{margin-top:.3em}
@media (max-width:900px){.prijsduo,.apart,.inhoudgroepen{grid-template-columns:1fr}}
.h3{font-size:clamp(19px,1.6vw,23px);line-height:1.2}

/* SCAN */
.scankop{padding:clamp(36px,6vh,80px) 0 clamp(40px,7vh,80px)}
.scankop .wrap{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:28px clamp(32px,5vw,80px);align-items:start}
.scankop .lead{margin-top:18px}
.scankop .kortom{margin-top:16px;font-weight:500;color:var(--vv-diep)}
.scankop .uil{width:110px;margin-top:28px}
.formulier .mailalternatief{font-size:14.5px;color:var(--vv-grijs)}
@media (max-width:900px){.scankop .wrap{grid-template-columns:1fr}.scankop .uil{display:none}}

/* ONTWERPVOORBEELDEN */
.galerij{padding:0 0 clamp(48px,8vh,96px)}
.stijlkeuze{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px;padding:0;list-style:none}
.stijlkeuze button{font:600 16px/1 var(--tekst);min-width:48px;height:48px;padding:0 16px;border-radius:8px;border:1.5px solid var(--vv-rand);background:#fff;color:var(--vv-diep);cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.stijlkeuze button span{font-weight:400;font-size:14.5px;color:var(--vv-grijs)}
.stijlkeuze button[aria-selected="true"]{background:var(--vv-diep);border-color:var(--vv-diep);color:#fff}
.stijlkeuze button[aria-selected="true"] span{color:rgba(255,255,255,.8)}
.stijlpaneel{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,3fr);gap:20px clamp(24px,3vw,40px);align-items:start}
.stijlpaneel[hidden]{display:none}
.stijlpaneel figure{margin:0;border-radius:8px;overflow:hidden;border:1px solid var(--vv-rand);box-shadow:0 20px 44px -26px rgba(31,42,68,.45);background:#fff}
.stijlpaneel h2{font-size:clamp(24px,2.4vw,32px);margin-bottom:8px}
.stijlpaneel .huidig{display:inline-block;font:600 12px/1 var(--tekst);letter-spacing:.12em;text-transform:uppercase;background:var(--vv-teal);color:var(--vv-diep);padding:6px 9px;border-radius:4px;margin-bottom:12px}
.stijlpaneel p{font-size:16.5px}
.stijlpaneel .knop{margin-top:18px}
@media (hover:hover){.stijlkeuze button:hover{border-color:var(--vv-diep)}}
@media (max-width:900px){.stijlpaneel{grid-template-columns:1fr}.stijlkeuze button span{display:none}}

/* VOORBEELDPORTAAL */
.portaalbalk{background:var(--vv-lichtblauw);border-bottom:1px solid #D5E2F2;font-size:14.5px;padding:10px 0;color:var(--vv-diep)}
.portaalbalk b{font-weight:600}
.portaalkop{padding:clamp(32px,5vh,64px) 0 24px}
.portaalkop .klant{display:flex;align-items:center;gap:12px;margin-bottom:14px;font-size:15px;color:var(--vv-grijs)}
.portaalkop .klant .ini{width:38px;height:38px;border-radius:50%;background:var(--vv-diep);color:#fff;display:grid;place-items:center;font:600 14px/1 var(--tekst)}
.nu{background:#fff;border:1px solid var(--vv-rand);border-left:5px solid var(--vv-teal);border-radius:8px;padding:clamp(18px,2.6vw,30px);display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px 24px;align-items:center;margin-top:22px}
.nu img{width:72px;height:72px}
.nu .fase{font:600 12px/1.4 var(--tekst);letter-spacing:.14em;text-transform:uppercase;color:var(--vv-teal-t)}
.nu h2{font-size:clamp(22px,2.2vw,30px);margin:4px 0 6px}
.nu p{font-size:16px}
.voortgangrij{list-style:none;padding:0;margin:18px 0 0;display:flex;flex-wrap:wrap;gap:8px 18px;font-size:14.5px}
.voortgangrij li{display:flex;align-items:center;gap:7px}
.voortgangrij i{width:12px;height:12px;border-radius:50%;display:inline-block;background:var(--vv-teal-d)}
.voortgangrij .bezig i{background:#fff;box-shadow:inset 0 0 0 3px var(--vv-teal-d)}
.voortgangrij .hierna i{background:var(--vv-rand)}
.scenario{margin-top:12px;font-size:14px;color:var(--vv-grijs)}
.docs{width:100%;border-collapse:collapse;font-size:16px}
.docs th,.docs td{text-align:left;padding:14px 12px 14px 0;border-bottom:1px solid var(--vv-rand);vertical-align:top}
.docs th{font:600 13px/1.3 var(--tekst);letter-spacing:.08em;text-transform:uppercase;color:var(--vv-grijs)}
.docs td b{display:block;font:600 17px/1.3 var(--kop);color:var(--vv-diep)}
.docs .klein{display:block}
.status{display:inline-block;font:600 12.5px/1 var(--tekst);padding:6px 9px;border-radius:999px;white-space:nowrap}
.status.af{background:#DDF3EF;color:var(--vv-teal-t)}
.status.bezig{background:#E6EEFA;color:var(--vv-diep)}
.status.later{background:var(--vv-zand);color:var(--vv-grijs);border:1px solid var(--vv-rand)}
.zostraks{display:inline-block;font:600 12.5px/1 var(--tekst);letter-spacing:.12em;text-transform:uppercase;color:#8A4A12;background:#FFF4E5;border:1px solid #F3D2B0;border-radius:4px;padding:6px 8px;margin-bottom:12px}
.ontwerpkeus{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-top:14px}
.ontwerpkeus a{display:block;text-decoration:none;font-size:14px;color:var(--vv-diep)}
.ontwerpkeus img{border-radius:4px;border:1px solid var(--vv-rand);margin-bottom:6px}
.reactie{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;margin-top:10px}
.reactie > div{background:#fff;border:1px solid var(--vv-rand);border-radius:6px;padding:14px 16px;font-size:15.5px;line-height:1.5}
.reactie .wie{display:block;font:600 12.5px/1.3 var(--tekst);letter-spacing:.06em;text-transform:uppercase;color:var(--vv-grijs);margin-bottom:6px}
.alle-stappen{border-top:1px solid var(--vv-rand)}
.alle-stappen details{border-bottom:1px solid var(--vv-rand)}
.alle-stappen summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:48px 3.2em minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 0}
.alle-stappen summary::-webkit-details-marker{display:none}
.alle-stappen summary img{width:48px;height:48px}
.alle-stappen .nr{font:600 20px/1 var(--kop);color:var(--vv-teal-d)}
.alle-stappen .titel{font:600 17px/1.3 var(--kop);color:var(--vv-diep)}
.alle-stappen .fasekop{font:600 12px/1.4 var(--tekst);letter-spacing:.14em;text-transform:uppercase;color:var(--vv-grijs);padding:18px 0 6px}
.alle-stappen .antwoord{padding:0 0 16px calc(48px + 3.2em + 24px);font-size:15.5px;line-height:1.55;max-width:calc(var(--lees) + 140px)}
.alle-stappen details[open]{background:linear-gradient(90deg,rgba(31,191,174,.07),transparent 70%)}
.voorstel-concept{background:#fff;border:1px solid var(--vv-rand);border-radius:8px;padding:clamp(18px,2.6vw,30px)}
.voorstel-concept table{width:100%;border-collapse:collapse;font-size:15.5px;margin-top:10px}
.voorstel-concept td,.voorstel-concept th{text-align:left;padding:8px 10px 8px 0;border-bottom:1px solid var(--vv-rand);vertical-align:top}
.voorstel-concept th{font-weight:600;color:var(--vv-diep)}
.voorstel-concept tr.totaal td{font-weight:600;color:var(--vv-diep);border-bottom:2px solid var(--vv-diep)}
.gegevens{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px clamp(24px,4vw,56px)}
.gegevens dl{display:grid;grid-template-columns:9em minmax(0,1fr);gap:6px 12px;font-size:15.5px;margin:0}
.gegevens dt{color:var(--vv-grijs)}
.gegevens dd{margin:0}
@media (max-width:900px){
  .nu{grid-template-columns:1fr}.nu img{width:56px;height:56px}
  .ontwerpkeus{grid-template-columns:repeat(3,minmax(0,1fr))}
  .reactie,.gegevens{grid-template-columns:1fr}
  .alle-stappen summary{grid-template-columns:40px 2.6em minmax(0,1fr);}
  .alle-stappen summary .status{grid-column:3}
  .alle-stappen summary img{width:40px;height:40px}
  .alle-stappen .antwoord{padding-left:0}
  .docs thead{display:none}.docs tr{display:grid;gap:4px;padding:12px 0;border-bottom:1px solid var(--vv-rand)}.docs td{border:0;padding:0}
}
.som.smal{max-width:460px;margin-top:18px}
.ruimte{margin-top:16px}
.reactie .status{display:table;margin-top:10px}

/* OVER ONS */
.duo2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,40px);align-items:stretch}
.persoon{background:#fff;border:1px solid var(--vv-rand);border-radius:8px;overflow:hidden;display:grid;grid-template-rows:auto 1fr}
.persoon .foto{aspect-ratio:4/3;overflow:hidden;background:var(--vv-zand)}
.persoon .foto img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.persoon .typo{aspect-ratio:4/3;background:var(--vv-diep);color:var(--vv-papier);display:grid;align-content:end;padding:clamp(20px,3vw,36px);position:relative}
.persoon .typo .mono{position:absolute;top:clamp(16px,2.4vw,28px);right:clamp(16px,2.4vw,28px);font:600 clamp(64px,8vw,120px)/.8 var(--kop);color:rgba(31,191,174,.35);letter-spacing:-.04em}
.persoon .typo b{font:600 clamp(28px,3vw,40px)/1.05 var(--kop);color:var(--vv-papier)}
.persoon .typo span{margin-top:8px;font-size:15px;color:rgba(250,246,238,.8)}
.persoon .tekst{padding:clamp(18px,2.4vw,28px)}
.persoon h2{font-size:clamp(22px,2vw,28px);margin-bottom:4px}
.persoon .rol{display:block;font:600 12px/1.4 var(--tekst);letter-spacing:.14em;text-transform:uppercase;color:var(--vv-teal-t);margin-bottom:10px}
.persoon p{font-size:16.5px}
.persoon p+p{margin-top:.6em}
@media (max-width:900px){.duo2{grid-template-columns:1fr}}

/* CONTACT */
.contactacties{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:26px}
.contactacties a{display:grid;gap:4px;text-decoration:none;background:#fff;border:1.5px solid var(--vv-rand);border-radius:8px;padding:18px 20px;color:var(--vv-inkt)}
.contactacties a b{font:600 19px/1.2 var(--kop);color:var(--vv-diep)}
.contactacties a span{font-size:16px;overflow-wrap:anywhere}
@media (hover:hover){.contactacties a:hover{border-color:var(--vv-teal-d)}}
.contactkop .wrap{align-items:start}
.contactkop .stefanfoto{width:min(100%,260px);border-radius:8px;justify-self:center}
@media (max-width:900px){.contactacties{grid-template-columns:1fr}.contactkop .stefanfoto{width:96px;height:96px;border-radius:50%;object-fit:cover;object-position:50% 20%}}

/* AI-VOORBEELD */
.chat{display:grid;gap:12px;max-width:720px}
.chat .vraag,.chat .antw{border-radius:10px;padding:14px 18px;font-size:16px;line-height:1.55}
.chat .vraag{justify-self:end;background:var(--vv-diep);color:var(--vv-papier);max-width:85%}
.chat .antw{background:#fff;border:1px solid var(--vv-rand);max-width:92%}
.chat .antw sup{font-size:11px;color:var(--vv-teal-t);font-weight:600}
.uitkomsten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.uitkomsten div{border-top:3px solid var(--vv-teal-d);background:#fff;border-radius:0 0 6px 6px;padding:14px 16px}
.uitkomsten b{display:block;font:600 18px/1.25 var(--kop);color:var(--vv-diep);margin-bottom:4px}
.uitkomsten p{font-size:15.5px;line-height:1.5}
@media (max-width:760px){.uitkomsten{grid-template-columns:1fr}.chat .vraag,.chat .antw{max-width:100%}}

/* SEO EN GEO */
.kijkers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px clamp(24px,3.4vw,48px)}
.kijkers img{width:120px;height:120px;margin-bottom:10px}
.kijkers h3{margin-bottom:6px}
.kijkers p{font-size:16.5px}
.vraagduo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:14px 0}
.vraagduo p{background:#fff;border:1px solid var(--vv-rand);border-radius:8px;padding:14px 16px;font:500 italic 18px/1.4 var(--kop);color:var(--vv-diep)}
.vraagduo span{display:block;font:600 12px/1.4 var(--tekst);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:var(--vv-grijs);margin-bottom:6px}
@media (max-width:900px){.kijkers,.vraagduo{grid-template-columns:1fr}.kijkers img{width:96px;height:96px}}
.doc article,.doc nav{min-width:0}
.doc article{overflow-wrap:break-word}
.voorstelstatus{max-width:var(--lees)}

/* leesbaarheidsronde 28 sep 2026 */
.werkzaamheden{margin-top:18px;border-top:1px solid var(--vv-rand);border-bottom:1px solid var(--vv-rand)}
.werkzaamheden summary{cursor:pointer;list-style:none;padding:16px 40px 16px 0;position:relative;font:600 clamp(17px,1.4vw,19px)/1.35 var(--kop);color:var(--vv-diep)}
.werkzaamheden summary::-webkit-details-marker{display:none}
.werkzaamheden summary::after{content:"";position:absolute;right:8px;top:22px;width:10px;height:10px;border-right:2px solid var(--vv-teal-d);border-bottom:2px solid var(--vv-teal-d);transform:rotate(45deg)}
.werkzaamheden[open] summary::after{transform:rotate(-135deg);top:26px}
.werkzaamheden .inhoudgroepen{padding-bottom:22px}
.portaalkop{padding:clamp(18px,3vh,32px) 0 12px}
.portaalkop .klant b{color:var(--vv-diep);font-weight:600}
.nu h1{font-size:clamp(22px,2.2vw,30px);margin:0 0 6px}
.nu .voorbereiding{margin-top:8px}
.nu .voorbereiding b{display:block;font:600 12px/1.4 var(--tekst);letter-spacing:.14em;text-transform:uppercase;color:var(--vv-teal-t)}

/* ---- livegang 28 sep 2026: taalkeuze in het menu, echt scanformulier ---- */
.taalkeuze{display:inline-flex;gap:2px;align-items:center;margin-left:4px}
.taalkeuze a{font-size:13px !important;font-weight:600;letter-spacing:.06em;padding:6px 7px !important;color:var(--vv-grijs) !important;text-decoration:none}
@media (hover:hover){.taalkeuze a:hover{color:var(--vv-diep) !important;text-decoration:underline}}
.vv-hp{position:absolute !important;left:-9999px;width:1px;height:1px;overflow:hidden}
.formulier .fout{font-size:14px;color:#8C1D18;font-weight:500}
.formulier .fout[hidden],.formulier .melding[hidden]{display:none}
.formulier input[aria-invalid="true"]{border-color:#B3261E;box-shadow:0 0 0 1px #B3261E}
.formulier .melding{padding:14px 16px;border-radius:6px;background:#FBEAEA;border-left:4px solid #B3261E;font-size:15.5px;line-height:1.5}
.formulier .melding b{display:block;margin-bottom:2px}
.naar-inhoud{position:absolute;left:12px;top:-60px;background:var(--vv-diep);color:#fff;padding:10px 14px;border-radius:6px;z-index:50}
.naar-inhoud:focus{top:10px}
.admin-bar .kop{top:32px}
@media (max-width:782px){.admin-bar .kop{top:46px}}
@font-face{font-family:Jost;font-style:normal;font-weight:300 700;font-display:swap;src:url(/assets/fonts/jost-latin.woff2) format("woff2")}
@font-face{font-family:Literata;font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/literata-latin.woff2) format("woff2")}