/* ------------------------------------------------------------------
 * Sjabloon: home-v5 (10 sep 2026, hybride na het ChatGPT-ontwerp)
 * Zeven blokken: lichte held met de havik groot · gedachten · vier stappen ·
 * drie voorbeelden · pakketten · Stefan en Gaby met foto · donkere slotband
 * met het formulier. Drie patronen: statement-kop naast een groot merkbeeld,
 * vensters met echte schermen, licht en donker als ritme. Teal alleen voor de
 * actie. Meer verticale rust dan v4 (secties 104 px in plaats van 88).
 * ------------------------------------------------------------------ */

html{scroll-behavior:smooth}
[id]{scroll-margin-top:96px}
img{max-width:100%;height:auto}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ------------------------------------------------------------------
 * Sjabloon: home-v4 (6 sep 2026, ronde 2 na overleg met ChatGPT)
 * Zes blokken, elk met één taak: wat ik doe · herkenning · voorbeeld ·
 * fasen · prijs · Stefan en de scan. Gedeelde kern in algemeen.css.
 * Drie patronen: statement-kop op de held, vensters met echte schermen,
 * licht en donker als ritme. Teal alleen voor de actie.
 * ------------------------------------------------------------------ */


.vv2.v5 p,.vv2.v5 li{font-weight:400}
.vv2.v5 .lead{font-size:clamp(17px,2vw,19.5px);line-height:1.6;max-width:720px;margin-bottom:26px}
.vv2.v5 .micro{font-size:14px;color:var(--vv-grijs);margin-top:14px;max-width:640px}
.vv2.v5 .klein{font-size:14.5px;color:var(--vv-grijs)}
.vv2.v5 .breedte{background:var(--vv-papier)}
.vv2.v5 .onder{font-size:15.5px;color:var(--vv-grijs);margin-top:26px}
.vv2.v5 .onder a,.vv2.v5 .persoon a{color:var(--vv-diep);font-weight:600}
.vv2.v5 .kicker i{font-style:normal;opacity:.5;margin:0 4px}

/* ---------- 4 · fasen ---------- */
.vv2.v5 .aanpak{padding:88px 0 80px}
.vv2.v5 .stappen3{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.vv2.v5 .stappen3 li{position:relative;padding-left:58px}
.vv2.v5 .stappen3 .nr{position:absolute;left:0;top:-2px;width:42px;height:42px;border-radius:50%;background:var(--vv-diep);color:#fff;font-family:Literata,Georgia,serif;font-weight:600;font-size:20px;display:flex;align-items:center;justify-content:center}
.vv2.v5 .stappen3 h3{margin:0 0 8px;font-size:20px}
.vv2.v5 .stappen3 .prijsje{display:inline-block;font-family:Literata,Georgia,serif;font-weight:600;color:var(--vv-tealdonker);font-size:18px;margin-left:6px;white-space:nowrap}
.vv2.v5 .stappen3 p{font-size:15.5px;line-height:1.55;margin:0}
@media(max-width:820px){.vv2.v5 .stappen3{grid-template-columns:1fr;gap:26px}}

/* ---------- 5 · pakketten ---------- */
.vv2.v5 .pakketten{background:#fff;padding:88px 0 84px}
.vv2.v5 .pakketten3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:start;margin-top:10px}
.vv2.v5 .pkaart{border:1px solid var(--vv-rand);border-radius:12px;padding:22px 20px 24px;background:var(--vv-papier)}
.vv2.v5 .pkaart .pvogel{height:96px;display:flex;align-items:flex-end}
.vv2.v5 .pkaart .pvogel img{width:auto;height:96px}
.vv2.v5 .pkaart .pprijs{font-family:Literata,Georgia,serif;font-size:30px;font-weight:600;color:var(--vv-diep);margin-top:6px;line-height:1}
.vv2.v5 .pkaart .pwat{font-size:15.5px;line-height:1.5;margin:12px 0 0}
.vv2.v5 .verreken{margin-top:28px;background:var(--vv-zand);border:1px solid var(--vv-rand);border-radius:12px;padding:22px 26px;display:grid;grid-template-columns:auto 1fr;gap:6px 32px;align-items:baseline}
.vv2.v5 .verreken h3{margin:0;font-size:19px;white-space:nowrap}
.vv2.v5 .verreken p{font-size:15.5px;line-height:1.55;margin:0}
@media(max-width:900px){.vv2.v5 .pakketten3{grid-template-columns:1fr}.vv2.v5 .verreken{grid-template-columns:1fr}.vv2.v5 .verreken h3{white-space:normal}}

.vv2.v5 .formulier{background:#fff;border:1px solid var(--vv-rand);border-radius:14px;padding:28px 26px 26px;box-shadow:0 10px 30px rgba(11,42,91,.06)}
.vv2.v5 .formulier .ftitel{margin:0 0 8px;font-family:Literata,Georgia,serif;font-size:23px;letter-spacing:-.01em}
.vv2.v5 .formulier .fintro{font-size:15px;color:var(--vv-grijs);margin-bottom:6px}
.vv2.v5 .formulier label{display:block;font-weight:600;font-size:14.5px;margin:14px 0 6px;color:var(--vv-diep)}
.vv2.v5 .formulier .cta{width:100%;margin-top:20px;text-align:center}
.vv2.v5 .formulier .gerust{font-size:14px;color:var(--vv-grijs);margin:14px 0 0;text-align:center}
.vv2.v5 .formulier .gerust a{color:var(--vv-grijs);text-decoration:underline}
.vv2.v5 .formulier .fout{background:#FDF3F2;border:1px solid #E6B8B3;color:#8A2A22;border-radius:8px;padding:10px 12px;font-size:14.5px;margin:10px 0 0}

/* ---------- ronde 3 (9 sep 2026): gedachten en voorbeelden van het traject ---------- */
.vv2.v5 .gedachten{padding:72px 0 66px}
.vv2.v5 .gedachten h2{font-size:clamp(26px,3.2vw,38px);margin-bottom:22px}
.vv2.v5 .gedachtenlijst{max-width:840px}
.vv2.v5 .gedachte{border-top:1px solid var(--vv-rand)}
.vv2.v5 .gedachte:last-child{border-bottom:1px solid var(--vv-rand)}
.vv2.v5 .gedachte summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:16px;padding:16px 4px}
.vv2.v5 .gedachte summary::-webkit-details-marker{display:none}
.vv2.v5 .gedachte .q{font-family:Literata,Georgia,serif;font-style:italic;font-size:clamp(17px,2vw,20px);color:var(--vv-diep);line-height:1.35;flex:1}
.vv2.v5 .gedachte .plus{flex:0 0 30px;width:30px;height:30px;border-radius:50%;border:1px solid var(--vv-rand);background:#fff;display:flex;align-items:center;justify-content:center;font-family:Jost,'Segoe UI',Arial,sans-serif;font-size:20px;line-height:1;color:var(--vv-tealdonker);transition:transform .2s}
.vv2.v5 .gedachte[open] .plus{transform:rotate(45deg)}
.vv2.v5 .gedachte summary:hover .q{color:var(--vv-tealdonker)}
.vv2.v5 .gedachte p{margin:0 0 18px;padding:0 50px 0 4px;font-size:16px;line-height:1.6;max-width:740px}
@media(max-width:700px){.vv2.v5 .gedachte p{padding-right:4px}}

.vv2.v5 .gedachten .slotzin{margin:22px 0 0;font-family:Literata,Georgia,serif;font-size:clamp(18px,2.2vw,22px);color:var(--vv-diep);max-width:840px}

/* gedachten scanbaar (9 sep, laat): niet cursief, kernwoorden vet, iets groter en luchtiger */
.vv2.v5 .gedachtenlijst{max-width:860px}
.vv2.v5 .gedachte summary{padding:20px 4px;gap:20px}
.vv2.v5 .gedachte .q{font-family:Jost,'Segoe UI',Arial,sans-serif;font-style:normal;font-weight:400;font-size:clamp(17.5px,2.1vw,21px);line-height:1.5;color:var(--vv-inkt);max-width:720px}
.vv2.v5 .gedachte .q b{font-weight:600;color:var(--vv-diep)}
.vv2.v5 .gedachte .plus{flex:0 0 26px;width:26px;height:26px;border-color:transparent;background:transparent;color:var(--vv-grijs);font-size:22px;margin-top:2px}
.vv2.v5 .gedachte summary:hover .q{color:var(--vv-inkt)}
.vv2.v5 .gedachte summary:hover .plus{color:var(--vv-tealdonker)}
.vv2.v5 .gedachte p{font-size:16.5px;padding-left:4px}
.vv2.v5 .gedachten .slotzin{margin-top:26px}

/* ---------- ronde 4 (9 sep, laat): vier stappen, tempoblok, samenwerking met drie kaarten ---------- */
.vv2.v5 .stappen3.vier{grid-template-columns:repeat(4,1fr);gap:22px}
.vv2.v5 .stappen3.vier h3{font-size:19px}
@media(max-width:1000px){.vv2.v5 .stappen3.vier{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.vv2.v5 .stappen3.vier{grid-template-columns:1fr}}
.vv2.v5 .aanpak .onder b{color:var(--vv-diep)}
.vv2.v5 .tempo{margin-top:30px;background:#fff;border:1px solid var(--vv-rand);border-radius:12px;padding:22px 26px;max-width:880px}
.vv2.v5 .tempo h3{margin:0 0 8px;font-size:21px}
.vv2.v5 .tempo p{margin:0;font-size:15.5px;line-height:1.6}
.vv2.v5 .samenwerking{background:#fff;padding:88px 0 80px}
.vv2.v5 .kaarten3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:8px}
.vv2.v5 .vkaart{display:block;color:var(--vv-inkt);text-decoration:none;border:1px solid var(--vv-rand);border-radius:12px;background:var(--vv-papier);padding:14px 14px 18px;transition:box-shadow .2s,transform .2s}
.vv2.v5 .vkaart:hover{box-shadow:0 14px 34px rgba(11,42,91,.14);transform:translateY(-2px)}
.vv2.v5 .vkaart .venster{display:block;aspect-ratio:16/10;overflow:hidden;box-shadow:none}
.vv2.v5 .vkaart .venster img{width:100%;height:calc(100% - 22px);object-fit:cover;object-position:top}
.vv2.v5 .vkaart .vkop{display:block;font-family:Literata,Georgia,serif;font-weight:600;font-size:19px;color:var(--vv-diep);margin:14px 0 4px}
.vv2.v5 .vkaart .vtekst{display:block;font-size:15px;line-height:1.5;color:var(--vv-grijs)}
.vv2.v5 .vkaart .vlink{display:inline-block;margin-top:10px;font-weight:600;color:var(--vv-tealdonker);font-size:14.5px;text-decoration:underline;text-underline-offset:3px}

@media(max-width:900px){.vv2.v5 .kaarten3{grid-template-columns:1fr;max-width:560px}}

@media(prefers-reduced-motion:reduce){.vv2.v5 .vkaart:hover{transform:none}}

.vv2.v5 .stappen3 .nr.ab{font-size:15px;letter-spacing:-.3px}

/* ================= v5: wat anders is dan v4 ================= */
.vv2.v5 section{padding:104px 0}
.vv2.v5 .wit{background:#fff}
.vv2.v5 .papier{background:var(--vv-papier)}
.vv2.v5 h2{margin-bottom:12px}
.vv2.v5 .lead{margin-bottom:30px}

/* held: licht, tekst links, havik rechts op volle sterkte */
.vv2.v5 .held{position:relative;overflow:hidden;padding:64px 0 56px;background:var(--vv-papier)}
.vv2.v5 .held .wrap{max-width:1280px}
.vv2.v5 .heldgrid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:32px 40px;align-items:center}
.vv2.v5 .held .kicker{color:var(--vv-tealdonker)}
.vv2.v5 .held h1{font-size:clamp(40px,4.5vw,64px);max-width:600px;line-height:1.04;color:var(--vv-diep)}
@media(max-width:480px){.vv2.v5 .held .kicker{letter-spacing:1.6px;font-size:11.5px}}
.vv2.v5 .held h1 em{font-style:normal;color:var(--vv-tealdonker)}
.vv2.v5 .held .sub{margin-top:22px;max-width:560px;font-size:clamp(17px,2vw,19.5px);color:var(--vv-inkt)}
.vv2.v5 .tekstlink{color:var(--vv-diep);text-decoration-color:rgba(11,42,91,.4)}
.vv2.v5 .tekstlink:hover{text-decoration-color:var(--vv-diep)}
.vv2.v5 .held .micro{color:var(--vv-grijs);margin-top:22px;max-width:560px}
.vv2.v5 .held .micro.platform{margin-top:8px}
.vv2.v5 .heldbeeld{position:relative;justify-self:end;width:100%;max-width:640px}
.vv2.v5 .heldbeeld img{display:block;width:100%;height:auto}
@media(max-width:900px){
  .vv2.v5 .held{padding:44px 0 40px}
  .vv2.v5 .heldgrid{grid-template-columns:1fr;gap:26px}
  .vv2.v5 .heldbeeld{justify-self:center;max-width:460px;margin-top:4px}
  .vv2.v5 .held h1{max-width:none}
}

/* gedachten: witte sectie, intro als lead */
.vv2.v5 .gedachten{padding:104px 0 96px}
.vv2.v5 .gedachten .lead{margin-bottom:22px;max-width:640px}

/* stappen: 15 minuten valt op */
.vv2.v5 .stappen3 p b{color:var(--vv-diep);font-weight:600}
.vv2.v5 .aanpak{padding:104px 0 96px}

/* samenwerking: drie gelijke vensters, kaart klikbaar */
.vv2.v5 .samenwerking{padding:104px 0 100px}
.vv2.v5 .vkaart .venster{aspect-ratio:16/10}
.vv2.v5 .vkaart .vlink{margin-top:12px}

/* pakketten */
.vv2.v5 .pakketten{padding:104px 0 96px}

/* Stefan en Gaby: foto links, twee rollen rechts */
.vv2.v5 .over{padding:104px 0 100px}
.vv2.v5 .overgrid{display:grid;grid-template-columns:300px minmax(0,1fr);gap:56px;align-items:start}
.vv2.v5 .over .foto img{display:block;width:100%;height:auto;border-radius:14px}
.vv2.v5 .rollen{display:grid;grid-template-columns:1fr 1fr;gap:28px 40px;margin-top:22px}
.vv2.v5 .rollen h3{font-size:18px;margin:0 0 8px;color:var(--vv-diep)}
.vv2.v5 .rollen p{margin:0;font-size:16px;line-height:1.6}
.vv2.v5 .over .contact{margin-top:30px;font-size:16px}
.vv2.v5 .over .contact a{color:var(--vv-diep);font-weight:600}
@media(max-width:900px){
  .vv2.v5 .overgrid{grid-template-columns:1fr;gap:28px}
  .vv2.v5 .over .foto{max-width:240px}
  .vv2.v5 .rollen{grid-template-columns:1fr;gap:22px}
}

/* slotband: donker, tekst links, wit formulier rechts */
.vv2.v5 .slot{padding:104px 0 112px}
.vv2.v5 .slotkolommen{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:64px;align-items:center}
.vv2.v5 .slot h2{color:#fff;max-width:520px}
.vv2.v5 .slot .slottekst p{color:#DCE4F1;font-size:17px;line-height:1.6;max-width:520px}
.vv2.v5 .slot .slottekst p b{color:#fff;font-weight:600}
.vv2.v5 .slot .formulier{box-shadow:0 18px 44px rgba(3,16,40,.35)}
.vv2.v5 .slot .formulier .ftitel{margin-bottom:2px}
.vv2.v5 .slot .formulier label:first-of-type{margin-top:10px}
.vv2.v5 .slot .formulier .gerust{margin-top:12px}
.vv2.v5 .slot .formulier p,.vv2.v5 .slot .formulier label{color:var(--vv-inkt)}
.vv2.v5 .slot .formulier .gerust,.vv2.v5 .slot .formulier .gerust a{color:var(--vv-grijs)}
@media(max-width:900px){.vv2.v5 .slotkolommen{grid-template-columns:1fr;gap:34px}.vv2.v5 .slot{padding:80px 0 88px}}

/* formuliertitel in de donkere band blijft donker op de witte kaart */
.vv2.v5 .slot .formulier .ftitel{color:var(--vv-diep)}

/* volle breedte: de Astra-container laat op deze pagina de banden edge to edge lopen; .wrap centreert de tekst */
#content .ast-container{max-width:100%;padding-left:0;padding-right:0}
#content .ast-container article.ast-article-single{padding:0;margin:0}
#content #primary,#content .content-area,#content .entry-content,#content .ast-article-single{max-width:100%;width:100%;margin:0}
#content .entry-content>.vv2.v5,#content .entry-content>*{max-width:none;margin-left:0;margin-right:0}
.vv2.v5{overflow-x:clip}

/* controleronde 10 sep (middag): kleine reparaties */
.vv2.v5 .gedachte .plus{opacity:1}
.vv2.v5 .pakketten .pkaart{background:#fff}
.vv2.v5 .gedachten .slotzin{font-weight:600}
.vv2.v5 .micro i{font-style:normal;opacity:.5;margin:0 6px}
.vv2.v5 .slot .formulier .fout{color:#8A2A22}
.vv2.v5 .stappen3 .prijsje{display:block;margin:0 0 8px;white-space:normal}

/* ronde 2 (12 sep 2026): D-Physics-voorbeeld, Over-blok, slotband */
.vv2.v5 .samenwerking .case h3{font-family:Literata,Georgia,serif;font-size:clamp(20px,2.4vw,26px);margin:4px 0 10px;color:var(--vv-diep)}
.vv2.v5 .samenwerking .case .lead{max-width:760px;margin-bottom:26px}
.vv2.v5 .samenwerking .case .lead a{color:var(--vv-diep);font-weight:600}
.vv2.v5 .over .intro{font-size:17.5px;line-height:1.6;margin-top:16px;max-width:620px}
.vv2.v5 .over h3{margin:26px 0 8px;font-size:18px;color:var(--vv-diep)}
.vv2.v5 .over .overtekst>p{font-size:16px;line-height:1.6;max-width:620px}
.vv2.v5 .over .merkzin{margin-top:18px;font-family:Literata,Georgia,serif;font-size:19px;color:var(--vv-diep)}
.vv2.v5 .over .merkzin a{font-family:Jost,'Segoe UI',Arial,sans-serif;font-size:15.5px;margin-left:10px;color:var(--vv-diep);font-weight:600}
.vv2.v5 .over .contact{margin-top:14px;font-size:15px;color:var(--vv-grijs)}
.vv2.v5 .over .contact a{color:var(--vv-diep);font-weight:600}
.vv2.v5 .slot .formulier label:first-of-type{margin-top:0}
.vv2.v5 .slot .formulier label .optie{font-weight:400;color:var(--vv-grijs)}
.vv2.v5 .slot .formulier .gerust{text-align:left;font-size:14px;line-height:1.55;margin-top:14px}
.vv2.v5 .slot .formulier .gerust b{color:var(--vv-diep);font-weight:600}
.vv2.v5 .slot .formulier .gerust a{color:var(--vv-diep)}

/* ronde 3 (12 sep 2026): stapkaarten, compacter ritme, contactlinks */
.vv2.v5 section{padding:84px 0}
.vv2.v5 .gedachten{padding:84px 0 76px}
.vv2.v5 .aanpak{padding:84px 0 76px}
.vv2.v5 .samenwerking{padding:84px 0 80px}
.vv2.v5 .pakketten{padding:84px 0 76px}
.vv2.v5 .over{padding:84px 0 80px}
.vv2.v5 .slot{padding:84px 0 92px}
.vv2.v5 .stappen3.vier{gap:18px;margin-top:30px}
.vv2.v5 .stappen3.vier li{background:#fff;border:1px solid var(--vv-rand);border-radius:12px;padding:22px 20px 22px 66px}
.vv2.v5 .stappen3.vier .nr{left:16px;top:20px}
.vv2.v5 .stappen3.vier h3{font-size:18px}
.vv2.v5 .stappen3.vier p{font-size:15px}
.vv2.v5 .stappen3 .prijsje{font-size:16px}
@media(max-width:600px){.vv2.v5 .stappen3.vier li{padding-left:62px}}
.vv2.v5 .over .contact a{white-space:nowrap}

/* ronde 4 (12 sep 2026): de havik een kwart groter */
.vv2.v5 .held .wrap{max-width:1360px}
.vv2.v5 .heldgrid{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:32px}
.vv2.v5 .heldbeeld{max-width:780px}
.vv2.v5 .held h1{max-width:560px}
.vv2.v5 .held .sub,.vv2.v5 .held .micro{max-width:520px}
@media(max-width:900px){
  .vv2.v5 .heldgrid{grid-template-columns:1fr;gap:26px}
  .vv2.v5 .heldbeeld{max-width:520px}
  .vv2.v5 .held h1,.vv2.v5 .held .sub,.vv2.v5 .held .micro{max-width:none}
}

/* ronde 5 (12 sep 2026): introblok boven de stappen, vier gelijke kaarten */
.vv2.v5 .aanpak .lead{margin-top:14px;max-width:760px;font-size:18px;line-height:1.6;color:var(--vv-inkt)}
.vv2.v5 .aanpak .lead.tussen{margin-top:22px;color:var(--vv-grijs);font-size:16.5px}
.vv2.v5 .tweeluik{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 40px;margin-top:26px;max-width:1000px}
.vv2.v5 .tweeluik h3{margin:0 0 8px;font-size:19px;color:var(--vv-diep)}
.vv2.v5 .tweeluik p{margin:0;font-size:15.5px;line-height:1.6}
@media(max-width:820px){.vv2.v5 .tweeluik{grid-template-columns:1fr;gap:22px}}
/* 1fr groeit mee met het langste woord; minmax(0,1fr) houdt de vier kolommen gelijk */
.vv2.v5 .stappen3.vier{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1000px){.vv2.v5 .stappen3.vier{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.vv2.v5 .stappen3.vier{grid-template-columns:minmax(0,1fr)}}
/* het nummer boven de titel, zodat de tekst de volle kaartbreedte krijgt */
.vv2.v5 .stappen3.vier li{padding:20px 20px 22px}
.vv2.v5 .stappen3.vier .nr{position:static;margin:0 0 12px;width:38px;height:38px;font-size:18px}
.vv2.v5 .stappen3.vier .nr.ab{font-size:14px}
@media(max-width:600px){.vv2.v5 .stappen3.vier li{padding:20px 20px 22px}}

/* ronde 6 (12 sep 2026): de gedachten als raster van zes kaarten */
.vv2.v5 .gedachten h2{font-size:clamp(30px,3.8vw,44px);margin-bottom:26px}
.vv2.v5 .gedachtenlijst.kaarten6{max-width:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.vv2.v5 .kaarten6 .gedachte{border:1px solid var(--vv-rand);border-top:1px solid var(--vv-rand);
  border-radius:14px;background:var(--vv-zand);padding:0}
.vv2.v5 .kaarten6 .gedachte:last-child{border-bottom:1px solid var(--vv-rand)}
.vv2.v5 .kaarten6 .gedachte summary{display:block;padding:24px 26px 20px;gap:0}
.vv2.v5 .kaarten6 .gkop{display:block;font-family:Literata,Georgia,serif;font-weight:600;
  font-size:clamp(21px,2.1vw,24px);line-height:1.18}
.vv2.v5 .kaarten6 .gkop b{display:block;font-weight:600;color:var(--vv-diep)}
.vv2.v5 .kaarten6 .gkop i{display:block;font-style:normal;color:var(--vv-tealdonker)}
.vv2.v5 .kaarten6 .gsub{display:block;margin-top:16px;font-size:15.5px;line-height:1.55;color:var(--vv-inkt)}
.vv2.v5 .kaarten6 .gmeer{display:flex;align-items:center;justify-content:space-between;margin-top:20px;
  color:var(--vv-tealdonker);font-size:15px;font-weight:500}
.vv2.v5 .kaarten6 .pijl{font-size:17px;line-height:1;transition:transform .18s ease}
.vv2.v5 .kaarten6 .gedachte[open] .pijl{transform:rotate(90deg)}
.vv2.v5 .kaarten6 .gedachte summary:hover .gmeer{color:var(--vv-diep)}
.vv2.v5 .kaarten6 .gedachte p{margin:0;padding:0 26px 24px;font-size:15.5px;line-height:1.6;max-width:none}
.vv2.v5 .gedachten .slotzin{display:flex;align-items:flex-start;gap:16px;margin-top:28px;max-width:700px;
  font-family:Literata,Georgia,serif;font-weight:400;font-size:clamp(19px,2.2vw,23px);line-height:1.35;
  color:var(--vv-grijs)}
.vv2.v5 .gedachten .slotzin .streep{flex:none;width:26px;height:2px;background:var(--vv-teal);margin-top:15px}
@media(max-width:1000px){.vv2.v5 .gedachtenlijst.kaarten6{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.vv2.v5 .gedachtenlijst.kaarten6{grid-template-columns:minmax(0,1fr)}}

/* ronde 7 (12 sep 2026): meettools en AI-platforms als pills onder de twee kolommen */
.vv2.v5 .meetbron{margin-top:24px}
.vv2.v5 .meetbron .kicker.klein{display:block;font-size:11px;letter-spacing:1.8px;margin-bottom:10px;color:var(--vv-grijs)}
.vv2.v5 .meetpils{display:flex;flex-wrap:wrap;gap:8px}
.vv2.v5 .meetpil{display:inline-block;background:#fff;border:1px solid var(--vv-rand);border-radius:999px;
  padding:6px 15px;font-size:14.5px;line-height:1.4;color:var(--vv-inkt);white-space:nowrap}

/* ronde 8 (12 sep 2026): merktekens in de meetpills, elk klikbaar naar het platform */
.vv2.v5 .meetpil{display:inline-flex;align-items:center;gap:10px;padding:6px 16px 6px 8px;
  text-decoration:none;color:var(--vv-inkt);transition:border-color .15s ease,box-shadow .15s ease}
.vv2.v5 .meetpil img{width:26px;height:26px;flex:none;border-radius:6px;background:transparent}
.vv2.v5 a.meetpil:hover,.vv2.v5 a.meetpil:focus-visible{border-color:var(--vv-teal);
  box-shadow:0 1px 8px rgba(11,42,91,.09)}
.vv2.v5 a.meetpil:focus-visible{outline:2px solid var(--vv-tealdonker);outline-offset:2px}
/* 12 sep 2026: de merkzin verviel, alleen de link blijft */
.vv2.v5 .over .merkzin{margin-top:20px;font-size:0}
.vv2.v5 .over .merkzin a{margin-left:0;font-size:15.5px}

/* ===== v11 (12 sep 2026): vorm en ritme ===== */
/* 1. Grotere typografische sprong. De kop mag groter en strakker, het kickertje kleiner,
      zodat het verschil tussen het grootste en het kleinste op de pagina toeneemt. */
.vv2.v5 .held h1{font-size:clamp(42px,5.2vw,74px);line-height:.98;letter-spacing:-.015em}
.vv2.v5 .held .sub{font-size:clamp(17.5px,2vw,21px);line-height:1.5;margin-top:26px}
.vv2.v5 h2{letter-spacing:-.012em}
.vv2.v5 .gedachten h2,.vv2.v5 .aanpak h2,.vv2.v5 .samenwerking h2,
.vv2.v5 .pakketten h2,.vv2.v5 .over h2,.vv2.v5 .slot h2{font-size:clamp(30px,4.2vw,50px);line-height:1.04}
.vv2.v5 .kicker{font-size:11px;letter-spacing:2.4px}

/* 2. Ritme in plaats van een vaste maat. De hero en de slotband krijgen lucht, het
      middendeel wordt strakker, zodat de pagina ademt in plaats van te tikken. */
.vv2.v5 .held{padding:76px 0 72px}
.vv2.v5 .gedachten{padding:96px 0 88px}
.vv2.v5 .aanpak{padding:72px 0 68px}
.vv2.v5 .samenwerking{padding:96px 0 92px}
.vv2.v5 .pakketten{padding:72px 0 68px}
.vv2.v5 .over{padding:96px 0 92px}
.vv2.v5 .slot{padding:96px 0 104px}

/* 3. Kaarten met diepte in plaats van alleen een lijn. Subtiel, en bij aanwijzen komt de
      kaart een fractie omhoog. */
.vv2.v5 .kaarten6 .gedachte,.vv2.v5 .stappen3.vier li,.vv2.v5 .pkaart,.vv2.v5 .vkaart{
  box-shadow:0 1px 2px rgba(11,42,91,.04),0 8px 24px -18px rgba(11,42,91,.28);
  transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s ease}
.vv2.v5 .kaarten6 .gedachte:hover,.vv2.v5 .vkaart:hover,.vv2.v5 .pkaart:hover{
  transform:translateY(-3px);box-shadow:0 2px 4px rgba(11,42,91,.05),0 18px 40px -22px rgba(11,42,91,.38)}

/* 4. Het geadviseerde pakket krijgt gewicht, zodat de drie kaarten niet even zwaar wegen. */
.vv2.v5 .pakketten3 .pkaart:nth-child(2){border-color:var(--vv-teal);
  box-shadow:0 2px 4px rgba(31,191,174,.10),0 20px 44px -24px rgba(11,42,91,.42)}

/* 5. Beweging bij het scrollen, alleen waar de browser het zonder script kan en alleen
      als de bezoeker daar geen bezwaar tegen heeft. Zonder ondersteuning staat alles
      gewoon zichtbaar, er wordt dus nooit iets verborgen. */
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .vv2.v5 .gedachten .gedachte,.vv2.v5 .stappen3.vier li,.vv2.v5 .kaarten3 .vkaart,
    .vv2.v5 .pakketten3 .pkaart,.vv2.v5 .tweeluik>div,.vv2.v5 .overgrid>div{
      animation:v11op linear both;animation-timeline:view();animation-range:entry 5% cover 26%}
  }
}
@keyframes v11op{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ===== v11 ronde 2: na het overleg ===== */
/* De lopende tekst stond op Jost 300. Onder een kop van Literata 600 leest dat fragiel.
   Tekst naar 400, koppen naar 500, en de maten terug naar een normale schaal. */
.vv2.v5,.vv2.v5 p,.vv2.v5 li,.vv2.v5 .gsub,.vv2.v5 .vtekst,.vv2.v5 .pwat{font-weight:400}
.vv2.v5 h1,.vv2.v5 h2,.vv2.v5 h3,.vv2.v5 .pnaam,.vv2.v5 .pprijs{font-weight:500}
.vv2.v5 .held h1{font-size:clamp(36px,4.6vw,64px);line-height:1.02}
.vv2.v5 .gedachten h2,.vv2.v5 .aanpak h2,.vv2.v5 .samenwerking h2,
.vv2.v5 .pakketten h2,.vv2.v5 .over h2,.vv2.v5 .slot h2{font-size:clamp(28px,3.4vw,42px)}
.vv2.v5 p,.vv2.v5 .intro,.vv2.v5 .lead{font-size:17.5px;line-height:1.55}
.vv2.v5 .lead,.vv2.v5 .held .sub,.vv2.v5 .intro{max-width:62ch}

/* Sectieritme binnen de geadviseerde marges, met ruimte tussen samenhangende onderdelen
   die kleiner is dan die tussen secties. */
.vv2.v5 .held{padding:80px 0 76px}
.vv2.v5 .gedachten{padding:96px 0 88px}
.vv2.v5 .aanpak{padding:88px 0 84px}
.vv2.v5 .samenwerking{padding:96px 0 92px}
.vv2.v5 .pakketten{padding:88px 0 84px}
.vv2.v5 .over{padding:96px 0 92px}
.vv2.v5 .slot{padding:96px 0 104px}
@media(max-width:760px){
  .vv2.v5 .held,.vv2.v5 .gedachten,.vv2.v5 .aanpak,.vv2.v5 .samenwerking,
  .vv2.v5 .pakketten,.vv2.v5 .over,.vv2.v5 .slot{padding-top:52px;padding-bottom:52px}
}

/* De vier stappen waren de derde kaartenreeks op een rij. Ze worden een open opsomming
   met het nummer boven een dunne lijn, zodat de herkenningskaarten hun eigen vorm houden. */
.vv2.v5 .stappen3.vier li{background:transparent;border:0;border-top:2px solid var(--vv-rand);
  border-radius:0;padding:18px 0 0;box-shadow:none}
.vv2.v5 .stappen3.vier li:hover{transform:none;box-shadow:none}
.vv2.v5 .stappen3.vier .nr{position:static;margin:0 0 12px;width:auto;height:auto;background:none;
  color:var(--vv-tealdonker);font-family:Literata,Georgia,serif;font-size:15px;font-weight:600;
  letter-spacing:1.6px;display:block;border-radius:0}
.vv2.v5 .stappen3.vier h3{margin:0 0 8px;font-size:19px}

/* Het tempoblok had een eigen omlijsting en werd daarmee een vierde kader op dezelfde pagina. */
.vv2.v5 .tempo{background:transparent;border:0;border-left:3px solid var(--vv-teal);
  border-radius:0;padding:4px 0 4px 20px;margin-top:34px}

/* Beweging alleen waar hij iets doet, dus op de voorbeeldbeelden, en niet meer dan een
   kleine verschuiving. Op tekst, hero en formulier gebeurt niets. */
.vv2.v5 .gedachten .gedachte,.vv2.v5 .stappen3.vier li,.vv2.v5 .pakketten3 .pkaart,
.vv2.v5 .tweeluik>div,.vv2.v5 .overgrid>div{animation:none}
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .vv2.v5 .kaarten3 .vkaart{animation:v11op linear both;animation-timeline:view();
      animation-range:entry 5% cover 22%}
  }
  .vv2.v5 .vkaart .vlink,.vv2.v5 .kaarten6 .pijl{transition:transform .2s cubic-bezier(.2,.7,.3,1)}
  .vv2.v5 .vkaart:hover .vlink{transform:translateX(3px)}
}
@keyframes v11op{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.vv2.v5 a:focus-visible,.vv2.v5 button:focus-visible,.vv2.v5 summary:focus-visible{
  outline:2px solid var(--vv-tealdonker);outline-offset:3px;border-radius:4px}

/* ===== v11 ronde 3: schaal en diepte ===== */
/* 1. De kop veel groter. Dit is de grootste bron van het wow-gevoel bij de voorbeeldsite,
      niet de beweging. Literata 500 houdt hem elegant op dit formaat. */
.vv2.v5 .held h1{font-size:clamp(44px,7.4vw,96px);line-height:.94;letter-spacing:-.025em;max-width:12ch}
.vv2.v5 .gedachten h2,.vv2.v5 .aanpak h2,.vv2.v5 .samenwerking h2,
.vv2.v5 .pakketten h2,.vv2.v5 .over h2,.vv2.v5 .slot h2{font-size:clamp(30px,5vw,58px);line-height:1.0;
  letter-spacing:-.02em;max-width:16ch}
.vv2.v5 .slot h2{max-width:20ch}

/* 2. Grote, heel lichte cirkels achter de hero. Zuiver opmaak, geen afbeelding, geen script. */
.vv2.v5 .held{position:relative;isolation:isolate;overflow:hidden}
.vv2.v5 .held::before,.vv2.v5 .held::after{content:"";position:absolute;border-radius:50%;
  border:1px solid rgba(11,42,91,.09);pointer-events:none;z-index:-1}
.vv2.v5 .held::before{width:86vw;height:86vw;max-width:1180px;max-height:1180px;top:-34%;right:-22%}
.vv2.v5 .held::after{width:52vw;height:52vw;max-width:720px;max-height:720px;bottom:-46%;left:-14%;
  border-color:rgba(31,191,174,.16)}

/* 3. De kickers mogen kleiner en verder uit elkaar, zodat het verschil met de kop groter wordt. */
.vv2.v5 .kicker{font-size:10.5px;letter-spacing:3px}

/* 4. Het slotblok wordt het donkere anker halverwege het einde, met dezelfde schaalsprong. */
.vv2.v5 .slot{position:relative;overflow:hidden}
.vv2.v5 .slot::before{content:"";position:absolute;width:70vw;height:70vw;max-width:900px;max-height:900px;
  border-radius:50%;border:1px solid rgba(255,255,255,.08);top:-30%;left:-18%;pointer-events:none}

/* ===== v11 ronde 4: hero over de volle breedte ===== */
.vv2.v5 .heldbreed{max-width:1360px}
.vv2.v5 .heldbreed h1{max-width:none;margin:14px 0 0;font-size:clamp(40px,7.4vw,100px);line-height:.94;
  letter-spacing:-.03em}
.vv2.v5 .heldonder{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:28px 48px;
  align-items:center;margin-top:34px}
.vv2.v5 .heldonder .heldkolom{max-width:56ch}
.vv2.v5 .heldonder .heldbeeld{max-width:660px;justify-self:end;width:100%}
.vv2.v5 .heldbreed .sub{margin-top:0}
.vv2.v5 .heldbreed .knoppen{margin-top:24px}
.vv2.v5 .heldbreed .micro{margin-top:18px}
@media(max-width:900px){
  .vv2.v5 .heldonder{grid-template-columns:1fr;gap:22px}
  .vv2.v5 .heldonder .heldbeeld{justify-self:center;max-width:460px;margin-top:4px}
}

/* ===== v11 ronde 5: het voorbeeldblok als donkere blikvanger ===== */
.vv2.v5 .donkerblok{background:var(--vv-diep);color:#E8EEF7;position:relative;overflow:hidden;
  padding:100px 0 104px}
.vv2.v5 .donkerblok::before{content:"";position:absolute;width:74vw;height:74vw;max-width:980px;
  max-height:980px;border-radius:50%;border:1px solid rgba(255,255,255,.07);top:-28%;right:-16%;
  pointer-events:none}
.vv2.v5 .donkerblok .kicker{color:var(--vv-teal)}
.vv2.v5 .donkerblok h2{color:#fff}
.vv2.v5 .donkerblok .lead{color:#C9D6E8}
.vv2.v5 .vbgrid{display:grid;grid-template-columns:minmax(0,34%) minmax(0,1fr);gap:40px 56px;
  align-items:center;max-width:1360px}
.vv2.v5 .vbnoot{margin-top:18px;font-size:14.5px;line-height:1.55;color:#9FB2CC;max-width:46ch}
.vv2.v5 .vbnoot b{color:#fff}
.vv2.v5 .vblinks{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:10px}
.vv2.v5 .vblinks a{display:inline-flex;align-items:center;gap:8px;color:#fff;text-decoration:none;
  font-weight:600;font-size:16px;border-bottom:1px solid rgba(255,255,255,.28);padding-bottom:3px;
  transition:border-color .18s ease,color .18s ease}
.vv2.v5 .vblinks a span{color:var(--vv-teal);transition:transform .18s cubic-bezier(.2,.7,.3,1)}
.vv2.v5 .vblinks a:hover{border-color:var(--vv-teal)}
.vv2.v5 .vblinks a:hover span{transform:translate(3px,-3px)}
.vv2.v5 .vbbeeld{position:relative;padding-bottom:56px}
.vv2.v5 .vbbeeld img{display:block;width:100%;height:auto;border-radius:10px}
.vv2.v5 .vbgroot{display:block;border-radius:12px;overflow:hidden;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.7);border:1px solid rgba(255,255,255,.12)}
.vv2.v5 .vbklein{position:absolute;width:30%;border-radius:10px;overflow:hidden;text-decoration:none;
  border:1px solid rgba(255,255,255,.16);box-shadow:0 22px 44px -22px rgba(0,0,0,.75);background:#fff}
.vv2.v5 .vbklein span{position:absolute;left:0;right:0;bottom:0;background:rgba(11,42,91,.88);color:#fff;
  font-size:12px;letter-spacing:1.4px;text-transform:uppercase;font-weight:600;padding:5px 8px;text-align:center}
.vv2.v5 .vbklein.een{left:2%;bottom:0}
.vv2.v5 .vbklein.twee{left:34%;bottom:-14px}
.vv2.v5 .vbklein:hover{border-color:var(--vv-teal)}
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .vv2.v5 .vbklein{animation:v11schuif linear both;animation-timeline:view();animation-range:entry 10% cover 34%}
  }
}
@keyframes v11schuif{from{transform:translateY(20px);opacity:.55}to{transform:none;opacity:1}}
@media(max-width:900px){
  .vv2.v5 .donkerblok{padding:56px 0 60px}
  .vv2.v5 .vbgrid{grid-template-columns:1fr;gap:28px}
  .vv2.v5 .vbbeeld{padding-bottom:0;display:grid;gap:14px}
  .vv2.v5 .vbklein{position:static;width:100%}
  .vv2.v5 .vbklein.een,.vv2.v5 .vbklein.twee{left:auto;bottom:auto}
}

/* ===== v11 ronde 6: onderzoeksfase asymmetrisch, stappen als route ===== */
.vv2.v5 .aanpakgrid{display:grid;grid-template-columns:minmax(0,34%) minmax(0,1fr);gap:40px 56px;
  align-items:start;max-width:1360px}
.vv2.v5 .aanpaklinks{position:sticky;top:104px}
.vv2.v5 .aanpaklinks h2{max-width:none}
.vv2.v5 .aanpaklinks .lead{margin-top:16px;max-width:none;font-size:17px}
.vv2.v5 .aanpakrechts .tweeluik{margin-top:0;max-width:none;gap:24px 40px}
.vv2.v5 .aanpakrechts .meetbron{margin-top:26px}
.vv2.v5 .aanpakrechts .lead.tussen{margin-top:24px;max-width:none}

/* De vier stappen worden een verticale route met een doorlopende lijn. */
.vv2.v5 .stappen3.vier.route{display:block;position:relative;margin-top:30px;padding-left:46px}
.vv2.v5 .stappen3.vier.route::before{content:"";position:absolute;left:15px;top:8px;bottom:8px;
  width:2px;background:linear-gradient(var(--vv-teal),rgba(31,191,174,.18))}
.vv2.v5 .stappen3.vier.route li{border:0;padding:0 0 26px;background:transparent;box-shadow:none;position:relative}
.vv2.v5 .stappen3.vier.route li:last-child{padding-bottom:0}
.vv2.v5 .stappen3.vier.route .nr{position:absolute;left:-46px;top:1px;width:32px;height:32px;
  border-radius:50%;background:var(--vv-papier);border:2px solid var(--vv-rand);color:var(--vv-grijs);
  display:flex;align-items:center;justify-content:center;font-family:Literata,Georgia,serif;
  font-size:13px;font-weight:600;letter-spacing:0;margin:0;
  transition:border-color .25s ease,color .25s ease,background .25s ease}
.vv2.v5 .stappen3.vier.route h3{margin:0 0 6px;font-size:20px}
.vv2.v5 .stappen3.vier.route p{max-width:62ch}
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .vv2.v5 .stappen3.vier.route .nr{animation:v11stap linear both;animation-timeline:view();
      animation-range:entry 20% cover 45%}
  }
}
@keyframes v11stap{to{border-color:var(--vv-teal);background:var(--vv-teal);color:#04332d}}
@media(max-width:980px){
  .vv2.v5 .aanpakgrid{grid-template-columns:1fr;gap:28px}
  .vv2.v5 .aanpaklinks{position:static}
}

/* ===== v11 ronde 8: havik groter, logo uit het kader ===== */
/* 1. De havik. Was 660 px en stond gelijk met de tekstkolom. Nu 800 px, hoger in beeld en
      met de punt van de vleugel over de rechterrand van het kader heen. De sectie knipt af,
      dat is precies het effect dat we willen. */
.vv2.v5 .heldonder{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr)}
.vv2.v5 .heldonder .heldbeeld{max-width:820px;margin-top:-36px;margin-right:-5vw}
@media(max-width:1200px){.vv2.v5 .heldonder .heldbeeld{max-width:680px;margin-right:-2vw}}
@media(max-width:900px){
  .vv2.v5 .heldonder .heldbeeld{max-width:500px;margin-top:0;margin-right:0;justify-self:center}
}

/* 2. Het logo. De header is hier al doorzichtig en zonder lijn, dus het beeldmerk kan groter
      en dichter naar de paginarand. Het zakt iets door in de hero en overlapt de cirkels. */
body.vv-stijl-home-v11 #masthead{position:relative;z-index:3}
body.vv-stijl-home-v11 .site-branding.ast-site-identity{margin-left:-10px}
body.vv-stijl-home-v11 .custom-logo{width:74px;height:74px;max-width:none;
  transition:width .2s ease,height .2s ease}
body.vv-stijl-home-v11 .site-logo-img{margin-bottom:-16px}
body.vv-stijl-home-v11 .ast-site-title-wrap .site-title,
body.vv-stijl-home-v11 .ast-site-title-wrap .site-title a{font-size:27px;letter-spacing:-.01em}
@media(max-width:920px){
  body.vv-stijl-home-v11 .custom-logo{width:46px;height:46px}
  body.vv-stijl-home-v11 .site-logo-img{margin-bottom:0}
  body.vv-stijl-home-v11 .site-branding.ast-site-identity{margin-left:0}
  body.vv-stijl-home-v11 .ast-site-title-wrap .site-title,
  body.vv-stijl-home-v11 .ast-site-title-wrap .site-title a{font-size:20px}
}

/* ===== v11 ronde 9: vleugelfragment achter het donkere blok ===== */
.vv2.v5 .donkerblok::before{
  width:min(58vw,800px);height:132%;max-width:none;max-height:none;
  border:0;border-radius:0;
  top:auto;bottom:-20%;right:-8%;
  background:url(/assets/vv-vleugel-fragment.webp) right bottom / contain no-repeat;
  opacity:.11;
  transform:rotate(-12deg);transform-origin:right bottom;
  z-index:0}
.vv2.v5 .donkerblok .vbgrid{position:relative;z-index:1}
@media(max-width:900px){
  .vv2.v5 .donkerblok::before{width:74vw;height:100%;bottom:-14%;right:-22%;opacity:.06;
    transform:rotate(-8deg)}
}

/* ===== v11 ronde 10: een vaste vogel per stap op de homepage ===== */
/* Elke stap wordt een rooster met de tekst links en de vogel rechts. Het stapnummer staat
   absoluut en telt dus niet mee als kolom. */
.vv2.v5 .stappen3.vier.route li{position:relative;padding-right:210px}
.vv2.v5 .stappen3.vier.route p{max-width:54ch}
.vv2.v5 .stapvogel{position:absolute;right:0;top:50%;transform:translateY(-50%);
  width:184px;height:auto;display:block}
@media(max-width:1200px){
  .vv2.v5 .stappen3.vier.route li{padding-right:150px}
  .vv2.v5 .stapvogel{width:132px}
}
@media(max-width:760px){
  .vv2.v5 .stappen3.vier.route li{padding-right:96px}
  .vv2.v5 .stapvogel{width:84px}
}
@media(max-width:520px){
  .vv2.v5 .stappen3.vier.route li{padding-right:0}
  .vv2.v5 .stapvogel{position:static;transform:none;width:76px;margin:10px 0 0}
}

/* ===== v11 ronde 11: de kop van de havik bij het aanvraagblok ===== */
/* De cirkel uit ronde 3 zat op hetzelfde ::before, dus rand en ronding gaan hier expliciet
   terug naar nul. De kop staat links, half buiten beeld, achter de tekst. */
.vv2.v5 .slot{background:
    url(/assets/vv-zwerm.webp) left 31% bottom 7% / 330px auto no-repeat,
    url(/assets/vv-havik-alleen.webp) left 1% top 7% / 330px auto no-repeat,
    radial-gradient(115% 95% at 76% 16%, #14407C 0%, #0D2F64 46%, #0A2650 100%)}
.vv2.v5 .slot::before{content:none}
.vv2.v5 .slot .wrap{position:relative;z-index:1}

/* ===== v11: de havik en de zwerm los geplaatst in het aanvraagblok ===== */
/* Op een telefoon staan deze twee op 180 en 210 px, maar het bestand is 750 en 900 px
   breed. Dat kost 83 kB aan sierbeeld op precies het scherm waar bandbreedte telt.
   Daarom een eigen mobiele versie; het beeld blijft hetzelfde. (13 sep 2026) */
@media(max-width:900px){
  .vv2.v5 .slot{background:
      url(/assets/vv-zwerm-mobiel.webp) right 4% bottom 4% / 180px auto no-repeat,
      url(/assets/vv-havik-alleen-mobiel.webp) left 2% top 3% / 210px auto no-repeat,
      radial-gradient(115% 95% at 76% 16%, #14407C 0%, #0D2F64 46%, #0A2650 100%)}
}

/* ===== Het ontwerpblok op de homepage (12 sep 2026) ===== */
.vv2.v5 .ontwerpblok{padding:88px 0 84px;background:#fff}
.vv2.v5 .ogrid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:40px 56px;
  align-items:center;max-width:1360px}
.vv2.v5 .obeeld{display:block;border-radius:14px;overflow:hidden;
  transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s ease}
.vv2.v5 .obeeld img{display:block;width:100%;height:auto}
.vv2.v5 .obeeld:hover{transform:translateY(-3px)}
.vv2.v5 .otekst .lead{margin-top:16px;max-width:46ch}
.vv2.v5 .onoot{margin-top:14px;font-size:14.5px;line-height:1.55;color:var(--vv-grijs);max-width:46ch}
.vv2.v5 .olink{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-weight:600;
  color:var(--vv-diep);text-decoration:none;border-bottom:1px solid var(--vv-rand);padding-bottom:3px;
  transition:border-color .18s ease}
.vv2.v5 .olink span{color:var(--vv-tealdonker);transition:transform .18s cubic-bezier(.2,.7,.3,1)}
.vv2.v5 .olink:hover{border-color:var(--vv-teal)}
.vv2.v5 .olink:hover span{transform:translate(3px,-3px)}
@media(max-width:900px){
  .vv2.v5 .ontwerpblok{padding:56px 0 60px}
  .vv2.v5 .ogrid{grid-template-columns:1fr;gap:26px}
}
@media (prefers-reduced-motion: reduce){.vv2.v5 .obeeld:hover{transform:none}}

/* ===== Nameting als pil op de pakketkaarten (12 sep 2026) ===== */
.vv2.v5 .ppil{display:inline-block;margin-top:12px;padding:5px 13px;border-radius:999px;
  background:#DFF4F0;color:#0B5F55;font-size:12px;font-weight:600;
  letter-spacing:.7px;text-transform:uppercase;white-space:nowrap}

/* ===== Wat er in Kolibri zit, als kleine pillen ===== */
.vv2.v5 .pillenrij{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.vv2.v5 .ppil.licht{margin-top:0;padding:4px 11px;font-size:11px;letter-spacing:.5px;
  background:#EDF3FA;color:var(--vv-diep);text-transform:none;font-weight:600}

/* ===== De vijf stijlen naast elkaar (13 sep 2026) ===== */
.vv2.v5 .stijlen{padding:76px 0 80px;background:#fff}
.vv2.v5 .svgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:1180px}
@media(max-width:1000px){.vv2.v5 .svgrid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.vv2.v5 .svgrid{grid-template-columns:1fr}}
.vv2.v5 .svkaart{display:flex;flex-direction:column;gap:6px;padding:22px 22px 20px;
  background:var(--vv-papier);border:1px solid var(--vv-rand);border-radius:14px;
  text-decoration:none;color:var(--vv-inkt);
  transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s ease,border-color .18s ease}
.vv2.v5 .svkaart:hover{transform:translateY(-3px);border-color:var(--vv-teal);
  box-shadow:0 2px 4px rgba(11,42,91,.05),0 18px 40px -22px rgba(11,42,91,.38)}
.vv2.v5 .svkaart:focus-visible{outline:2px solid var(--vv-tealdonker);outline-offset:3px}
.vv2.v5 .svletter{font-family:Literata,Georgia,serif;font-size:30px;color:var(--vv-teal);
  line-height:1;font-weight:600}
.vv2.v5 .svnaam{font-family:Literata,Georgia,serif;font-size:21px;color:var(--vv-diep);
  line-height:1.2;margin-top:2px}
.vv2.v5 .svwat{font-size:15px;line-height:1.5;color:var(--vv-grijs);margin-top:2px}
.vv2.v5 .svmeer{margin-top:10px;font-size:14.5px;font-weight:600;color:var(--vv-diep);
  display:inline-flex;align-items:center;gap:7px}
.vv2.v5 .svmeer i{font-style:normal;color:var(--vv-tealdonker);
  transition:transform .18s cubic-bezier(.2,.7,.3,1)}
.vv2.v5 .svkaart:hover .svmeer i{transform:translate(3px,-3px)}
.vv2.v5 .slotzacht{padding:72px 0 84px}
@media(max-width:760px){.vv2.v5 .stijlen{padding:52px 0 56px}}
@media (prefers-reduced-motion: reduce){.vv2.v5 .svkaart:hover{transform:none}}

/* ===== Pakketkaarten op een smalle telefoon (13 sep 2026) =====
 * De nametingpil stond op nowrap. In het Nederlands past "Nameting na 3 maanden" nog,
 * maar "Follow-up measurement after 3 months" duwde de kaart nine­tien px buiten het
 * scherm op een toestel van 360 px. Een rasterkolom rekt namelijk mee met zijn inhoud
 * zolang je min-width niet op nul zet. */
@media(max-width:520px){
  .vv2.v5 .pakketten3{grid-template-columns:minmax(0,1fr)}
  .vv2.v5 .pakketten3 > *{min-width:0}
  .vv2.v5 .ppil{white-space:normal}
}

/* ronde 9 (16 sep 2026): 'Zo help ik je' hangt onderaan de kaart, niet achter de tekst.
   De kaarten staan in een raster en rekken dus mee tot de hoogste van de rij, maar de
   samenvatting deed dat niet. Daardoor stond de regel per kaart op een andere hoogte,
   afhankelijk van hoe lang de kop en de zin eronder waren. */
.vv2.v5 .kaarten6 .gedachte{display:flex;flex-direction:column}
.vv2.v5 .kaarten6 .gedachte summary{display:flex;flex-direction:column;flex:1 1 auto}
.vv2.v5 .kaarten6 .gmeer{margin-top:auto;padding-top:20px}

/* ronde 10 (16 sep 2026): miniatuur op elke stijlkaart, en de vergroting opent op de
   pagina zelf in plaats van in een nieuw tabblad. Geen script; :target doet het werk,
   net als de rest van de site het zonder JavaScript redt. */
.vv2.v5 .svkaart{padding:0 0 20px;overflow:hidden}
.vv2.v5 .svbeeld{display:block;margin:0 0 18px;background:var(--vv-zand);
  border-bottom:1px solid var(--vv-rand)}
.vv2.v5 .svbeeld img{display:block;width:100%;height:auto;aspect-ratio:760/456;object-fit:cover}
.vv2.v5 .svletter,.vv2.v5 .svnaam,.vv2.v5 .svwat,.vv2.v5 .svmeer{padding-left:22px;padding-right:22px}
.vv2.v5 .svmeer{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:14px}
.vv2.v5 .svkaart{display:flex;flex-direction:column}
.vv2.v5 .svmeer i{font-style:normal;font-size:19px;line-height:1;transition:transform .18s ease}
.vv2.v5 .svkaart:hover .svmeer i{transform:rotate(90deg)}

/* de vergroting */
.vv2.v5 .svgroot{display:none}
.vv2.v5 .svgroot:target{display:flex;position:fixed;inset:0;z-index:70;
  align-items:center;justify-content:center;padding:26px}
.vv2.v5 .svgroot .svachter{position:absolute;inset:0;background:rgba(11,42,91,.72);
  backdrop-filter:blur(2px)}
.vv2.v5 .svgroot figure{position:relative;margin:0;max-width:1180px;width:100%;
  background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 24px 60px rgba(11,42,91,.34)}
.vv2.v5 .svgroot img{display:block;width:100%;height:auto}
.vv2.v5 .svgroot figcaption{padding:16px 22px 18px;font-size:15px;line-height:1.55;
  color:var(--vv-grijs);display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline}
.vv2.v5 .svgroot figcaption b{color:var(--vv-diep);font-family:Literata,Georgia,serif;
  font-size:18px;font-weight:600}
.vv2.v5 .svgroot .svopen{margin-left:auto;color:var(--vv-tealdonker);font-weight:600;
  white-space:nowrap}
.vv2.v5 .svgroot .svsluit{position:absolute;top:10px;right:12px;z-index:2;
  width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.92);
  display:flex;align-items:center;justify-content:center;font-size:24px;line-height:1;
  color:var(--vv-diep);text-decoration:none;box-shadow:0 2px 8px rgba(11,42,91,.18)}
@media (hover: hover){.vv2.v5 .svgroot .svsluit:hover{background:#fff;color:var(--vv-tealdonker)}}
@media(max-width:620px){
  .vv2.v5 .svgroot:target{padding:12px}
  .vv2.v5 .svgroot figcaption{font-size:14px;padding:13px 16px 15px}
  .vv2.v5 .svgroot .svopen{margin-left:0}
}

/* de vergroting mag nooit buiten het scherm vallen, ook niet op een laag venster */
.vv2.v5 .svgroot figure{max-height:calc(100vh - 52px);display:flex;flex-direction:column}
.vv2.v5 .svgroot img{flex:0 1 auto;min-height:0;object-fit:contain;background:var(--vv-zand)}
.vv2.v5 .svgroot figcaption{flex:none}
@media(max-width:620px){.vv2.v5 .svgroot figure{max-height:calc(100vh - 24px)}}

/* De appknop staat op z-index 9990 en de pijl-omhoog van Astra op 99; de vergroting
   hoort daar bovenop, anders liggen ze over het bijschrift heen. */
.vv2.v5 .svgroot:target{z-index:10000}

/* ---------- ronde 11 (16 sep 2026): timing en portaal in het samenwerkingsblok ----------
   Het tempoblok .tempo stond in de aanpaksectie en staat nu hier, samen met het getal.
   Bewust geen rond zegel en bewust geen SVG. Een rond zegel met ringtekst is de vorm van een
   keurmerk en leest daarmee als een garantie, terwijl dit juist geen belofte is. En tekst in
   een SVG schaalt mee omlaag zodra het beeld smaller staat, waardoor precies het voorbehoud
   onleesbaar wordt. Dit is gewone tekst, dus 'gemiddeld' staat op halve grootte van de acht
   in plaats van in de kleine letter, en het voorbehoud blijft op leesmaat staan. */
.vv2.v5 .vbtempo{display:grid;grid-template-columns:minmax(0,42%) minmax(0,1fr);
  gap:38px 56px;margin-top:54px;padding-top:44px;
  border-top:1px solid rgba(255,255,255,.16);position:relative;z-index:1}
.vv2.v5 .vbtempo .kicker{margin-bottom:8px}
.vv2.v5 .vbtempo h3{font-family:Literata,Georgia,serif;font-weight:600;color:#fff;
  font-size:clamp(20px,2.1vw,25px);line-height:1.25;margin:0 0 14px}
.vv2.v5 .vbtempo p{margin:0 0 12px;font-size:15.5px;line-height:1.62;color:#C9D6E8}
.vv2.v5 .vbtempo p:last-child{margin-bottom:0}

/* De sticker. Papier op diepblauw met een schaduw, zodat hij er echt op ligt.
   De lichte draaiing van anderhalve graad is er op 22 sep 2026 uit gehaald. Die
   was bedoeld als losse hand, maar naast een blok dat verder strak op een
   raster staat leest scheef niet als speels maar als slordig. */
.vv2.v5 .vlsticker{background:var(--vv-papier);color:var(--vv-inkt);border-radius:3px;
  padding:20px 24px 18px;margin:0 0 26px;max-width:352px;
  box-shadow:0 12px 30px rgba(3,14,34,.38)}
.vv2.v5 .vlsticker .vlkop{display:block;font-size:11.5px;letter-spacing:2.4px;
  text-transform:uppercase;color:var(--vv-tealdonker);margin:0 0 12px}
.vv2.v5 .vlsticker .vlcijfer{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap;margin:0}
.vv2.v5 .vlsticker .vlcijfer b{font-family:Literata,Georgia,serif;font-weight:600;
  font-size:48px;line-height:.92;color:var(--vv-diep)}
.vv2.v5 .vlsticker .vlcijfer span{font-size:24px;line-height:1.1;color:var(--vv-diep)}
.vv2.v5 .vlsticker .vlwaar{margin:10px 0 0;font-size:15px;line-height:1.5;color:#414A58}
.vv2.v5 .vlsticker .vlrek{margin:14px 0 0;padding-top:13px;font-size:15px;line-height:1.5;
  color:#414A58;border-top:1px solid var(--vv-rand)}

/* Het voorbehoud krijgt geen kleine letter, alleen een streepje ervoor. */
.vv2.v5 .vbtempo .vlnoot{border-left:3px solid var(--vv-teal);padding-left:15px;
  margin:18px 0 0;font-size:15px;line-height:1.55;color:#C9D6E8}

.vv2.v5 .vbdoenlijst{list-style:none;margin:0;padding:0;display:grid;gap:13px}
.vv2.v5 .vbdoenlijst li{position:relative;padding-left:24px;font-size:15.5px;
  line-height:1.6;color:#C9D6E8}
.vv2.v5 .vbdoenlijst li::before{content:"";position:absolute;left:0;top:9px;
  width:8px;height:8px;border-radius:50%;background:var(--vv-teal)}
.vv2.v5 .vbdoenlijst b{color:#fff;font-weight:600}

@media(max-width:900px){
  .vv2.v5 .vbtempo{grid-template-columns:1fr;gap:30px;margin-top:38px;padding-top:32px}
  .vv2.v5 .vlsticker{margin-bottom:22px;max-width:none}
}

/* ===== ronde 12 (21 sep 2026): de gedachten uit hun kaartjes =====
   Zes identieke dozen in een net 3x2-raster is het duidelijkste sjabloonsignaal
   dat er was. De inhoud blijft gelijk, de doos verdwijnt. Wat overblijft is een
   haarlijn per vraag en een ongelijke kolomverdeling, zodat het raster niet meer
   op te tellen is. De eerste vraag krijgt meer gewicht, want dat is de ingang. */

.vv2.v5 .gedachtenlijst.kaarten6{
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:0 44px;
}
.vv2.v5 .kaarten6 .gedachte{
  border:0;
  border-top:1px solid var(--vv-rand);
  border-radius:0;
  background:transparent;
  padding:0;
}
.vv2.v5 .kaarten6 .gedachte:last-child{border-bottom:0}

/* ongelijke breedtes, drie rijen die elk wel precies vol zijn */
.vv2.v5 .kaarten6 .gedachte:nth-child(1){grid-column:span 7}
.vv2.v5 .kaarten6 .gedachte:nth-child(2){grid-column:span 5}
.vv2.v5 .kaarten6 .gedachte:nth-child(3){grid-column:span 5}
.vv2.v5 .kaarten6 .gedachte:nth-child(4){grid-column:span 7}
.vv2.v5 .kaarten6 .gedachte:nth-child(5){grid-column:span 6}
.vv2.v5 .kaarten6 .gedachte:nth-child(6){grid-column:span 6}

/* zonder doos hoort de tekst tegen de kantlijn te staan */
.vv2.v5 .kaarten6 .gedachte summary{padding:22px 0 18px}
.vv2.v5 .kaarten6 .gedachte p{padding:0 0 24px;max-width:62ch}
.vv2.v5 .kaarten6 .gsub{margin-top:12px;color:var(--vv-grijs)}
.vv2.v5 .kaarten6 .gmeer{margin-top:16px;justify-content:flex-start;gap:10px}

/* de eerste vraag is de ingang en mag groter */
.vv2.v5 .kaarten6 .gedachte:nth-child(1) .gkop{font-size:clamp(24px,2.7vw,30px)}
.vv2.v5 .kaarten6 .gedachte:nth-child(1) .gsub{font-size:16.5px}

/* open staat markeren met de merkkleur in plaats van met een vlak */
.vv2.v5 .kaarten6 .gedachte[open]{border-top-color:var(--vv-teal);border-top-width:2px}

/* hover alleen waar een muisaanwijzer bestaat (les van d-physics, 14 sep 2026) */
@media (hover:hover){
  .vv2.v5 .kaarten6 .gedachte summary:hover .gkop i{color:var(--vv-diep)}
}

@media(max-width:1000px){
  .vv2.v5 .gedachtenlijst.kaarten6{gap:0 32px}
  .vv2.v5 .kaarten6 .gedachte:nth-child(n){grid-column:span 6}
}
@media(max-width:640px){
  .vv2.v5 .kaarten6 .gedachte:nth-child(n){grid-column:span 12}
  .vv2.v5 .kaarten6 .gedachte:nth-child(1) .gkop{font-size:clamp(21px,2.1vw,24px)}
}