/* Werkwijze v2. Zelfde familie als homepage v15: tokens, letters, kop, knoppen, kickers, pillen, voet en het Hartveld-paginaschema.
   JavaScript alleen voor het menu op een smal scherm. Uitklappers zijn details/summary. */
: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-oranje:#E07A2F;
  --kop:Literata,Georgia,serif; --tekst:Jost,"Segoe UI",Arial,sans-serif;
  --m:clamp(16px,4vw,64px); --breed:1360px;
  --f1:#FAF6EE; --f2:#EEF4FB; --f3:#DCE9F7; --f4:#0B2A5B;
  --cirkel:104px; --kolgap:44px; --vogelkol:240px;
}
*{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{font-family:var(--kop);font-weight:600;color:var(--vv-diep);letter-spacing:-.015em;margin:0;text-wrap:balance}
p{margin:0}
ul,ol,dl,dd{margin:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:min(100% - 2*var(--m),var(--breed));margin-inline:auto}
.kicker{display:block;font:600 12px/1.4 var(--tekst);letter-spacing:.16em;text-transform:uppercase;color:var(--vv-teal-d);margin-bottom:18px}
.kicker i{font-style:normal;padding:0 .3em}
.donker{background:var(--vv-diep);color:var(--vv-papier)}
.donker .kicker{color:var(--vv-teal)}
.donker h1,.donker h2,.donker h3{color:var(--vv-papier)}
.zand{background:var(--vv-zand)}
.wit{background:#fff}
h2{font-size:clamp(34px,4.6vw,64px);line-height:1.02}
.lead{font-size:clamp(18px,1.5vw,22px);line-height:1.45;max-width:38ch}
.donker .lead{color:rgba(250,246,238,.86)}

/* knoppen en links, uit v15 */
.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:17px 26px;border-radius:8px;text-decoration:none;border:0;cursor:pointer;text-align:center;transition:background .18s}
.knop.klein{font-size:15px;padding:12px 18px}
.tekstlink{font-weight:500;text-decoration:underline;text-underline-offset:.22em;text-decoration-thickness:1.5px;text-decoration-color:var(--vv-teal)}
.tekstlink .pdf{font-size:.78em;font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin-left:.35em;display:inline-block;opacity:.75}
.donker .tekstlink{color:var(--vv-papier)}
.acties{display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px;margin-top:34px}
:focus-visible{outline:3px solid var(--vv-teal);outline-offset:3px}
@media (hover:hover){
  .knop:hover{background:#19AD9E}
  .tekstlink:hover{text-decoration-color:currentColor}
  .menu a:not(.knop):hover{color:var(--vv-teal-d)}
}

/* conceptbalk en kop, uit v15 */
.conceptbalk{background:var(--vv-inkt);color:var(--vv-papier);font-size:12px;letter-spacing:.04em;text-align:center;padding:6px var(--m)}
.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-underline-offset:.3em;text-decoration-thickness:2px;text-decoration-color:var(--vv-teal)}
.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}
}

/* OPENING. De havik staat in een eigen kolom naast de kop en overlapt niets. */
.hero{padding:clamp(32px,5vh,64px) 0 clamp(28px,4vh,48px)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:24px clamp(32px,5vw,80px);align-items:center}
.hero h1{font-size:clamp(36px,4vw,58px);line-height:1.06;letter-spacing:-.02em;max-width:18ch}
.hero .lead{margin-top:20px;max-width:46ch}
.hero .acties{margin-top:26px}
.hero-beeld{justify-self:end;width:min(100%,450px)}
.hero-beeld img{width:100%}
@media (max-width:900px){
  .hero{padding:24px 0 28px}
  .hero .wrap{grid-template-columns:1fr;gap:4px}
  .hero h1{font-size:clamp(30px,8.4vw,40px)}
  .hero .lead{margin-top:14px;font-size:17.5px}
  .hero .acties{margin-top:20px}
  .hero-beeld{order:-1;justify-self:end;width:min(56%,240px);margin:-4px 0 4px}
}


/* ROUTE. Een tijdlijn van boven naar beneden: nummer links op een vaste lijn, tekst in het midden, vogel rechts.
   Elke fase is een egaal vlak. De lijn staat in elke fase op precies dezelfde x-positie en wisselt alleen van kleur. */
.fase{--bg:var(--f1);--lijn:#647AA0;--tekst-z:var(--vv-grijs);background:var(--bg);position:relative;padding:clamp(56px,8vh,96px) 0;scroll-margin-top:0}
.fase::before{content:"";position:absolute;top:0;bottom:0;width:2px;background:var(--lijn);left:calc((100% - min(100% - 2*var(--m),var(--breed)))/2 + var(--cirkel)/2 - 1px)}
.fase-kijken{padding-top:clamp(24px,4vh,44px)}
.fase-kijken .fasekop{margin-bottom:clamp(32px,5vh,48px)}
.fase-kiezen{--bg:var(--f2)}
.fase-uitwerken{--bg:var(--f3)}
.fase-live{--bg:var(--f4);--lijn:#6F8FC8;--tekst-z:rgba(250,246,238,.82);color:var(--vv-papier)}
.fase-live h2,.fase-live h3{color:var(--vv-papier)}
.fasekop{position:relative;margin:0 0 clamp(40px,6vh,64px) calc(var(--cirkel) + var(--kolgap));max-width:760px}
.fasekop::before{content:"";position:absolute;left:calc(-1*(var(--kolgap) + var(--cirkel)/2) - 8px);top:6px;width:16px;height:16px;border-radius:50%;background:var(--bg);box-shadow:inset 0 0 0 2px var(--lijn)}
.faselabel{display:block;margin-bottom:12px;font:600 14px/1.4 var(--tekst);letter-spacing:.08em;text-transform:uppercase;color:var(--vv-teal-t)}
.fase-live .faselabel{color:var(--vv-teal)}
.fasekop h2{font-size:clamp(32px,4vw,56px);line-height:1.04}
.fasekop .bijregel{margin-top:14px;font-size:18px;line-height:1.55;max-width:58ch;color:var(--tekst-z)}
.fasekop .bijregel .tekstlink{color:var(--vv-inkt)}

.stap{display:grid;grid-template-columns:var(--cirkel) minmax(0,1fr) var(--vogelkol);grid-template-areas:"nr kop vogel" "nr body vogel" "nr vb vb";column-gap:var(--kolgap);align-items:start;position:relative;scroll-margin-top:16px}
.stap+.stap{margin-top:clamp(48px,7vh,80px)}
.fase .stap{max-width:1180px}
.cirkel{grid-area:nr;display:grid;place-content:center;width:var(--cirkel);height:var(--cirkel);border-radius:50%;background:var(--vv-diep);color:var(--vv-papier);font:600 44px/1 var(--kop);letter-spacing:-.02em;margin:0;box-shadow:0 0 0 8px var(--bg);position:relative;z-index:1}
.cirkel.twee{font-size:40px;letter-spacing:-.03em}
.fase-live .cirkel{background:var(--vv-teal);color:var(--vv-diep)}
.stapkop{grid-area:kop;padding-top:10px}
.stapnaam{font:400 16px/1.4 var(--tekst);color:var(--tekst-z);margin-bottom:4px}
.stap h3{font-size:clamp(28px,2.8vw,40px);line-height:1.1;max-width:24ch}
.body{grid-area:body;margin-top:14px}
.stap .tekst{font-size:19px;line-height:1.6;max-width:62ch}
.rollen{display:grid;gap:4px;margin-top:14px;max-width:62ch}
.rollen div{display:grid;grid-template-columns:40px 1fr;gap:10px;align-items:baseline}
.rollen dt{font:600 17px/1.5 var(--tekst);color:var(--vv-teal-t)}
.rollen dd{font-size:17.5px;line-height:1.5}
.fase-live .rollen dt{color:var(--vv-teal)}
.stap .extra{margin-top:12px;font:500 italic 19px/1.45 var(--kop);color:var(--vv-diep);max-width:52ch}
.stap .acties{margin-top:14px}
.vogel{grid-area:vogel;justify-self:center;margin-top:-6px;width:var(--vw,210px)}
.vogel-beeld{display:block}
.vogel img{width:var(--vw,210px)}
/* donkere fase: een zachte blauwe gloed zonder rand, plus een lichte schaduw op de vogel zelf */
.fase-live .vogel-beeld{background:radial-gradient(circle closest-side,rgba(120,160,230,.2),rgba(120,160,230,.08) 55%,rgba(120,160,230,0));padding:18px;margin:-24px -18px -18px;border-radius:50%}
.fase-live .vogel img{filter:brightness(1.12) drop-shadow(0 0 1.5px rgba(214,228,255,.75)) drop-shadow(0 0 14px rgba(150,185,245,.3))}
.vb{grid-area:vb;margin-top:22px;max-width:880px}
.stap .inbegrepen{display:inline-block;margin-top:14px;font:500 15px/1 var(--tekst);color:var(--vv-papier);border:1px solid rgba(250,246,238,.5);border-radius:999px;padding:8px 12px}
.tempo{margin:clamp(48px,7vh,72px) 0 0 calc(var(--cirkel) + var(--kolgap));padding:6px 0 6px 20px;border-left:3px solid var(--vv-teal);font:500 italic clamp(22px,2.2vw,30px)/1.35 var(--kop);color:var(--vv-papier);max-width:34ch}

/* voorbeeldkaarten */
.kaart{background:#fff;border:1px solid rgba(11,42,91,.14);border-radius:8px;padding:clamp(18px,2.4vw,28px);color:var(--vv-inkt)}
.vergelijk{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:14px clamp(16px,3vw,36px);align-items:start}
.vergelijk .rol{display:block;font:500 15px/1.4 var(--tekst);color:var(--vv-teal-t);margin-bottom:4px}
.vergelijk .vg-kop{font:600 clamp(21px,1.8vw,25px)/1.15 var(--kop);color:var(--vv-diep);margin-bottom:6px}
.vergelijk .vg-kort{font-size:16.5px;line-height:1.5}
.vergelijk .pijl{align-self:center;width:44px;height:2px;background:var(--vv-teal-t);position:relative}
.vergelijk .pijl::after{content:"";position:absolute;right:-1px;top:-5px;width:10px;height:10px;border-top:2px solid var(--vv-teal-t);border-right:2px solid var(--vv-teal-t);transform:rotate(45deg)}
.vergelijk .vg-gratis{grid-column:1/-1;font:500 italic 17px/1.4 var(--kop);color:var(--vv-diep);padding-top:12px;border-top:1px solid var(--vv-rand)}
.aanbod{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:12px clamp(20px,3vw,40px);align-items:center}
.aanbod .prijs{font:600 clamp(34px,3vw,44px)/1 var(--kop);color:var(--vv-diep);letter-spacing:-.02em}
.aanbod .vanaf{display:block;font:500 16px/1.2 var(--tekst);color:var(--vv-grijs);margin-bottom:2px}
.aanbod .prijs{display:block}
.aanbod .voorwaarde{display:block;margin-top:6px;font-size:16px;color:var(--vv-grijs)}
.aanbod p{font-size:16.5px;line-height:1.5;margin-top:12px}
.aanbod .acties{margin-top:12px}
.skelet{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;list-style:none;padding:0;margin:0}
.skelet li:nth-child(2){margin-top:12px}.skelet li:nth-child(3){margin-top:24px}
.skelet img{width:100%}
.ontwerpkaart{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 28px;align-items:end}
.duimen{display:grid;grid-template-columns:1.25fr 1fr;gap:10px;align-items:end;max-width:480px}
.duimen img{width:100%;aspect-ratio:480/250;object-fit:cover;object-position:top;border-radius:4px;box-shadow:0 12px 30px -14px rgba(31,42,68,.45),0 0 0 1px var(--vv-rand)}
.duimen img:nth-child(2){transform:translateY(-12px) rotate(2deg)}
.duim-bij{font-size:15px;color:var(--vv-grijs);margin-top:6px}
.ontwerpkaart .acties{margin-top:0}
.variant-rij{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.variant-rij span{width:30px;height:38px;border-radius:3px;border:1.5px solid #B9C9DE;background:#fff}
.variant-rij span.gekozen{border-color:var(--vv-teal-t);background:rgba(31,191,174,.22)}
.variant-rij small{font-size:15px;color:var(--vv-grijs);margin-left:6px}
.sitemap{box-shadow:0 24px 60px -34px rgba(31,42,68,.4)}
.sm-label .nr{display:inline-grid;place-content:center;width:24px;height:24px;border-radius:50%;background:var(--vv-diep);color:var(--vv-papier);font:600 12px/1 var(--tekst)}
.sm-bij{margin-top:10px;font-size:15px;color:var(--tekst-z)}

@media (max-width:1100px) and (min-width:901px){:root{--vogelkol:190px;--kolgap:32px}.vogel img{width:180px}}
@media (max-width:900px){
  :root{--cirkel:60px;--kolgap:14px}
  .fase{padding:48px 0}
  .fase::before{left:calc(var(--m) + var(--cirkel)/2 - 1px)}
  .fasekop{margin-left:calc(var(--cirkel) + var(--kolgap));margin-bottom:36px}
  .fasekop h2{font-size:clamp(28px,8vw,38px)}
  .fasekop .bijregel{font-size:17px}
  /* nummer en titel naast elkaar; de vogel staat compact onder het nummer op de lijn */
  .stap{grid-template-columns:var(--cirkel) minmax(0,1fr);grid-template-areas:"nr kop" "vogel bij" "vogel body" "vogel vb";column-gap:var(--kolgap)}
  .stap+.stap{margin-top:44px}
  .cirkel{font-size:28px;box-shadow:0 0 0 6px var(--bg)}
  .cirkel.twee{font-size:24px}
  .stapkop{padding-top:2px}
  .stapnaam{font-size:15px}
  .stap h3{font-size:clamp(24px,6.6vw,30px)}
  .vogel{display:contents}
  .vogel-beeld{grid-area:vogel;justify-self:center;align-self:start;margin-top:10px;width:var(--cirkel);display:flex;justify-content:center;overflow:visible;position:relative;z-index:1}
  .vogel img{width:84px!important;max-width:none;flex:none}
  /* vlak achter de vogel dekt de lijn af; staat los van het beeld, zodat een filter op de vogel er geen rand omheen tekent */
  .vogel-beeld::before{content:"";position:absolute;left:50%;top:0;width:84px;height:84px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,var(--bg) 72%,transparent);z-index:-1}
  .fase-live .vogel-beeld{background:none;padding:0;margin:10px 0 0;border-radius:0}
  .fase-live .vogel-beeld::before{background:radial-gradient(closest-side,#1C3B6E,var(--f4) 72%,transparent)}
  .fase-live .vogel img{filter:brightness(1.12) drop-shadow(0 0 1px rgba(214,228,255,.75)) drop-shadow(0 0 8px rgba(150,185,245,.3))}
  .body{margin-top:10px}
  .stap .tekst{font-size:17.5px}
  .rollen dd{font-size:16.5px}
  .rollen div{grid-template-columns:34px 1fr}
  .rollen dt{font-size:16px}
  .vb{margin-top:18px}
  .vergelijk,.aanbod,.ontwerpkaart{grid-template-columns:1fr}
  .vergelijk .pijl{width:2px;height:24px;margin-left:12px}
  .vergelijk .pijl::after{right:-5px;top:auto;bottom:-1px;transform:rotate(135deg)}
  .tempo{margin-left:calc(var(--cirkel) + var(--kolgap))}
  .sm-menu,.sm-land{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sm-knoop{font-size:13.5px;padding:9px 10px}
  .sm-label{position:static;grid-column:1/-1;margin-bottom:2px}
  .sm-menu{margin-top:18px}
  .sm-menu::before,.sm-menu::after,.sm-menu .sm-knoop::before{display:none}
  .sm-land{margin-top:18px;padding-top:16px}
  .sm-home{width:100%}
}
/* UITKLAPPERS met een specifieke vraag */
.verdiep{margin-top:16px;max-width:62ch;border-top:1px solid var(--vv-rand);border-bottom:1px solid var(--vv-rand)}
.verdiep summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 2px;font:600 17px/1.3 var(--tekst);color:var(--vv-diep)}
.verdiep summary::-webkit-details-marker{display:none}
.verdiep summary::after{content:"";flex:none;width:26px;height:26px;border-radius:50%;box-shadow:inset 0 0 0 1.5px currentColor;background:linear-gradient(currentColor,currentColor) center/11px 2px no-repeat,linear-gradient(currentColor,currentColor) center/2px 11px no-repeat;transition:transform .2s}
.verdiep[open] summary::after{background:linear-gradient(currentColor,currentColor) center/11px 2px no-repeat;transform:rotate(180deg)}
.verdiep .antw{padding:2px 2px 18px;display:grid;gap:10px;font-size:17px;line-height:1.55}
.verdiep ul{list-style:none;padding:0;display:grid;gap:8px}
.verdiep li{position:relative;padding-left:20px}
.verdiep li::before{content:"";position:absolute;left:2px;top:.62em;width:8px;height:8px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--vv-teal-d)}
.verdiep li b{font-weight:600;color:var(--vv-diep)}
.verdiep .noot{font-size:15px;color:var(--vv-grijs)}
.donker .verdiep{border-color:rgba(250,246,238,.2)}
.donker .verdiep summary{color:var(--vv-papier)}
.donker .verdiep li::before{box-shadow:inset 0 0 0 2px var(--vv-teal)}
.donker .verdiep li b{color:var(--vv-papier)}
.donker .verdiep .noot{color:rgba(250,246,238,.72)}
@media (hover:hover){.verdiep summary:hover{color:var(--vv-teal-t)}.donker .verdiep summary:hover{color:var(--vv-teal)}}

/* paginaschema uit v15 */
.sitemap{position:relative;background:#fff;border:1px solid var(--vv-rand);border-radius:8px;padding:clamp(20px,3vw,36px);box-shadow:0 30px 70px -34px rgba(31,42,68,.4)}
.sitemap .vb{position:absolute;top:-11px;right:16px;background:#fff;font:600 11px/1 var(--tekst);letter-spacing:.14em;text-transform:uppercase;color:var(--vv-grijs);border:1px solid var(--vv-rand);border-radius:999px;padding:5px 9px}
.sm-rij{display:grid;gap:10px;position:relative}
.sm-knoop{position:relative;background:var(--vv-papier);border:1px solid var(--vv-rand);border-radius:6px;padding:10px 12px;font-size:14.5px;line-height:1.25;color:var(--vv-diep);font-weight:500}
.sm-knoop i{display:block;height:4px;border-radius:2px;background:var(--vv-rand);margin-top:7px;width:78%}
.sm-knoop i+i{width:56%;margin-top:4px}
.sm-home{justify-self:center;width:min(240px,70%);text-align:center;background:var(--vv-diep);border-color:var(--vv-diep);color:#fff;font:600 16px/1.2 var(--kop)}
.sm-home small{display:block;font:400 12px/1.3 var(--tekst);color:rgba(250,246,238,.7);margin-top:2px}
.sm-menu{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:34px}
.sm-menu::before{content:"";position:absolute;left:12.5%;right:12.5%;top:-17px;height:2px;background:var(--vv-rand)}
.sm-menu::after{content:"";position:absolute;left:50%;top:-34px;width:2px;height:17px;background:var(--vv-rand)}
.sm-menu .sm-knoop{background:#2F5FA8;border-color:#2F5FA8;color:#fff}
.sm-menu .sm-knoop i{background:rgba(255,255,255,.38)}
.sm-menu .sm-knoop::before{content:"";position:absolute;left:50%;top:-17px;width:2px;height:17px;background:var(--vv-rand)}
.sm-land{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:30px;padding-top:26px;border-top:2px dashed #C3D7EF}
.sm-land .sm-knoop{background:#DCE9F7;border-color:#C3D7EF;color:var(--vv-diep)}
.sm-land .sm-knoop i{background:rgba(11,42,91,.18)}
.sm-label{position:absolute;display:flex;align-items:center;gap:8px;font:600 13px/1.2 var(--tekst);color:var(--vv-grijs);background:#fff;padding-right:8px}
.sm-label.l1{left:0;top:-30px}
.sm-label.l2{left:0;top:-13px}
.sm-label .nr{min-width:24px;height:24px;font-size:12px;padding:0}
.sm-bij{margin-top:12px;font-size:14px;color:var(--vv-grijs)}

/* voorbeeld bij 6B, statisch */
.vb-tekst{margin:18px 0 0;position:relative;background:var(--vv-papier);border:1px solid var(--vv-rand);border-radius:8px;padding:22px 20px 16px;max-width:560px}
.vb-label{position:absolute;top:-11px;right:16px;background:#fff;font:600 11px/1 var(--tekst);letter-spacing:.14em;text-transform:uppercase;color:var(--vv-grijs);border:1px solid var(--vv-rand);border-radius:999px;padding:5px 9px}
.vb-blok{display:block;font:500 14px/1.3 var(--tekst);color:var(--vv-grijs);margin-bottom:6px}
.vb-kop{font:600 19px/1.2 var(--kop);color:var(--vv-diep);margin-bottom:6px}
.vb-alinea{font-size:15.5px;line-height:1.5}
.vb-reactie{margin-top:14px;background:#fff;border:1px solid var(--vv-rand);border-left:4px solid var(--vv-teal);border-radius:4px;padding:10px 12px}
.vb-reactie .wie{display:block;font:600 14px/1.3 var(--tekst);color:var(--vv-teal-t);margin-bottom:3px}
.vb-reactie p{font:500 italic 16px/1.4 var(--kop);color:var(--vv-diep)}
.vb-verwerkt{margin-top:10px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:14.5px;color:var(--vv-inkt)}
.vb-verwerkt b{font:600 13px/1 var(--tekst);color:var(--vv-diep);border:1px solid rgba(11,42,91,.3);border-radius:999px;padding:5px 9px}
.vb-tekst figcaption{margin-top:12px;font-size:13.5px;color:var(--vv-grijs)}

/* SLOT */
.slot{padding:clamp(64px,10vh,120px) 0 clamp(56px,9vh,110px);border-top:1px solid rgba(250,246,238,.16)}
.slot .wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px clamp(40px,6vw,96px);align-items:end}
.slot h2{max-width:14ch}
.slot .lead{margin-top:.6em}
.slot .kortom{margin-top:18px;font-size:16px;line-height:1.6;color:rgba(250,246,238,.86)}
.slot .kortom i{font-style:normal;color:var(--vv-teal);padding:0 .3em}
.slot .rechts{display:grid;gap:18px;justify-items:start}
.slot .tweede{font-size:16px;color:rgba(250,246,238,.86)}
.slot .tweede a{color:var(--vv-papier)}
@media (max-width:900px){.slot .wrap{grid-template-columns:1fr}}

/* voet */
.voet{background:var(--vv-inkt);color:rgba(250,246,238,.78);font-size:13px;padding:22px 0 28px}
.voet .wrap{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between}
.voet a{color:inherit}

/* BEWEGING. Alleen de havik komt kort binnen; verder staat alles meteen in de eindstand. */
@keyframes zweef-in{from{opacity:0;transform:translate(40px,14px)}}
.hero-beeld img{animation:zweef-in .6s cubic-bezier(.2,.7,.2,1) both}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* voet met groepen, gelijk aan demo NL v2 (samenhangronde 28 sep 2026) */
.voet.voet-groepen{font-size:15px;padding:44px 0 28px}
.voet.voet-groepen .wrap{display:block}
.voet-groepen a{text-decoration:none}
.voet-groepen .groepen{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));gap:28px clamp(24px,4vw,56px)}
.voet-groepen .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-groepen ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.voet-groepen ul a{display:inline-block;padding:5px 0}
.voet-groepen .merkregel{font:600 19px/1.2 var(--kop);color:var(--vv-papier);margin-bottom:8px}
.voet-groepen .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 (hover:hover){.voet-groepen a:hover{color:#fff}}
@media (max-width:900px){.voet-groepen .groepen{grid-template-columns:1fr 1fr}.voet-groepen .groep.eerste{grid-column:1/-1}}
@media (max-width:480px){.voet-groepen .groepen{grid-template-columns:1fr}}

/* sitemap volgens de sluitende paginalijst: drie bestaande pagina's in het menu, vijf landingspagina's */
.sm-menu.sm-drie{grid-template-columns:repeat(3,minmax(0,1fr))}
.sm-menu.sm-drie::before{left:16.67%;right:16.67%}
.sm-land.sm-vijf{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:900px){.sm-menu.sm-drie,.sm-land.sm-vijf{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---- 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}}