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

html{scroll-behavior:smooth}
[id]{scroll-margin-top:96px}
img{max-width:100%;height:auto}

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

/* ---------- 1 · held ---------- */
.vv2.v4 .held{position:relative;overflow:hidden;padding:104px 0 150px;
  background:
    linear-gradient(96deg, #0B2A5B 0%, rgba(11,42,91,.92) 22%, rgba(11,42,91,.45) 40%, rgba(11,42,91,0) 56%),
    url('/assets/vv-havik-rechts.webp?v=1') right -30px bottom -22px / auto 82% no-repeat,
    radial-gradient(ellipse 900px 600px at 82% 12%, rgba(31,191,174,.14), transparent 55%),
    linear-gradient(158deg, #103468 0%, #0B2A5B 46%, #081F46 100%) !important}
.vv2.v4 .held .golf{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:70px;z-index:3}
.vv2.v4 .held .wrap{position:relative;z-index:2}
.vv2.v4 .held .kicker{color:#7FD8CE}
.vv2.v4 .held h1{font-size:clamp(40px,5.8vw,72px);max-width:760px;line-height:1.02}
.vv2.v4 .held h1 em{font-style:normal;color:#7FD8CE}
.vv2.v4 .held .sub{margin-top:22px;max-width:600px;font-size:clamp(17px,2vw,19.5px)}
.vv2.v4 .knoppen{margin-top:30px;display:flex;gap:8px 26px;flex-wrap:wrap;align-items:center}
.vv2.v4 .cta.groot{padding:16px 30px;font-size:17px}
.vv2.v4 .tekstlink{color:#fff;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(255,255,255,.45);font-size:16px}
.vv2.v4 .tekstlink:hover{text-decoration-color:#fff}
.vv2.v4 .held .micro{color:#A9BBD8;margin-top:22px}
.vv2.v4 .held .micro i{font-style:normal;opacity:.5;margin:0 6px}
@media(max-width:900px){.vv2.v4 .held{padding:76px 0 120px;background-size:auto,auto 42%,auto,auto}}

/* ---------- 2 · herkenning: compacte strook ---------- */
.vv2.v4 .herkenning{padding:56px 0 60px}
.vv2.v4 .herkenning h2{font-size:clamp(24px,3vw,34px);margin-bottom:18px}
.vv2.v4 .vragen{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.vv2.v4 .vragen li{background:#fff;border:1px solid var(--vv-rand);border-radius:999px;padding:9px 16px;font-size:15.5px;color:var(--vv-diep);
  font-family:Fraunces,Georgia,serif;font-style:italic;line-height:1.3}
.vv2.v4 .antwoord{margin:20px 0 0;font-size:17px;max-width:640px}

/* ---------- 3 · voorbeeld ---------- */
.vv2.v4 .voorbeelden{background:#fff;padding:88px 0 80px}
.vv2.v4 .frames{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:8px}
.vv2.v4 .frame{margin:0}
.vv2.v4 .venster{border:1px solid var(--vv-rand);border-radius:10px;overflow:hidden;background:#fff;box-shadow:0 10px 30px rgba(11,42,91,.08)}
.vv2.v4 .venster>span{display:block;height:22px;background:var(--vv-zand);border-bottom:1px solid var(--vv-rand);position:relative}
.vv2.v4 .venster>span::before{content:"";position:absolute;left:10px;top:7px;width:8px;height:8px;border-radius:50%;background:#D9D2C3;box-shadow:13px 0 0 #D9D2C3,26px 0 0 #D9D2C3}
.vv2.v4 .venster img{display:block;width:100%;height:auto}
.vv2.v4 .venster a{display:block}
.vv2.v4 .venster a:hover img{opacity:.92}
.vv2.v4 .frame figcaption{font-size:14.5px;line-height:1.5;color:var(--vv-grijs);margin-top:12px;padding:0 2px}
.vv2.v4 .frame figcaption b{display:block;color:var(--vv-diep);font-weight:600;margin-bottom:2px}
@media(max-width:900px){.vv2.v4 .frames{grid-template-columns:1fr;gap:26px;max-width:560px}}

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

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

/* ---------- 6 · Stefan en de scan ---------- */
.vv2.v4 .slot{padding:88px 0 96px}
.vv2.v4 .slotkolommen{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:start}
.vv2.v4 .persoon{display:grid;grid-template-columns:260px 1fr;gap:34px;align-items:start}
.vv2.v4 .persoon.geenfoto{grid-template-columns:1fr}
.vv2.v4 .persoon .foto img{border-radius:12px;display:block}
.vv2.v4 .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.v4 .formulier .ftitel{margin:0 0 8px;font-family:Fraunces,Georgia,serif;font-size:23px;letter-spacing:-.01em}
.vv2.v4 .formulier .fintro{font-size:15px;color:var(--vv-grijs);margin-bottom:6px}
.vv2.v4 .formulier label{display:block;font-weight:600;font-size:14.5px;margin:14px 0 6px;color:var(--vv-diep)}
.vv2.v4 .formulier .cta{width:100%;margin-top:20px;text-align:center}
.vv2.v4 .formulier .gerust{font-size:14px;color:var(--vv-grijs);margin:14px 0 0;text-align:center}
.vv2.v4 .formulier .gerust a{color:var(--vv-grijs);text-decoration:underline}
.vv2.v4 .formulier .fout{background:#FDF3F2;border:1px solid #E6B8B3;color:#8A2A22;border-radius:8px;padding:10px 12px;font-size:14.5px;margin:10px 0 0}
.vv2.v4 .knop2{border-color:rgba(11,42,91,.6)}
@media(max-width:900px){.vv2.v4 .slotkolommen{grid-template-columns:1fr;gap:36px}.vv2.v4 .persoon{grid-template-columns:1fr}}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ---------- ronde 3 (9 sep 2026): gedachten en voorbeelden van het traject ---------- */
.vv2.v4 .gedachten{padding:72px 0 66px}
.vv2.v4 .gedachten h2{font-size:clamp(26px,3.2vw,38px);margin-bottom:22px}
.vv2.v4 .gedachtenlijst{max-width:840px}
.vv2.v4 .gedachte{border-top:1px solid var(--vv-rand)}
.vv2.v4 .gedachte:last-child{border-bottom:1px solid var(--vv-rand)}
.vv2.v4 .gedachte summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:16px;padding:16px 4px}
.vv2.v4 .gedachte summary::-webkit-details-marker{display:none}
.vv2.v4 .gedachte .q{font-family:Fraunces,Georgia,serif;font-style:italic;font-size:clamp(17px,2vw,20px);color:var(--vv-diep);line-height:1.35;flex:1}
.vv2.v4 .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.v4 .gedachte[open] .plus{transform:rotate(45deg)}
.vv2.v4 .gedachte summary:hover .q{color:var(--vv-tealdonker)}
.vv2.v4 .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.v4 .gedachte p{padding-right:4px}}

.vv2.v4 .traject{background:#fff;padding:88px 0 80px}
.vv2.v4 .trajectgrid{display:grid;grid-template-columns:.85fr 1.4fr;gap:34px;margin-top:8px;align-items:start}
.vv2.v4 .tkaart{margin:0}
.vv2.v4 .tkaart figcaption,.vv2.v4 .tkaart.varianten>p{font-size:15px;line-height:1.55;color:var(--vv-grijs);margin:12px 0 0;padding:0 2px}
.vv2.v4 .tkaart b{display:block;color:var(--vv-diep);font-weight:600;font-size:18px;margin-bottom:4px;font-family:Fraunces,Georgia,serif}
.vv2.v4 .tkaart figcaption a,.vv2.v4 .tkaart p a{color:var(--vv-diep);font-weight:600}
.vv2.v4 .venster.hoog{aspect-ratio:700/880;overflow:hidden}
.vv2.v4 .venster.hoog a,.vv2.v4 .venster.hoog img{height:100%}
.vv2.v4 .venster.hoog img{object-fit:cover;object-position:top}
.vv2.v4 .tkolom{display:grid;gap:34px}
.vv2.v4 .minis{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.vv2.v4 .minis a{display:block;color:var(--vv-diep);text-decoration:none}
.vv2.v4 .minis .venster{display:block}
.vv2.v4 .minis .venster>span{height:14px}
.vv2.v4 .minis .venster>span::before{top:4px;width:6px;height:6px;box-shadow:10px 0 0 #D9D2C3,20px 0 0 #D9D2C3}
.vv2.v4 .minis a:hover .venster{box-shadow:0 12px 30px rgba(11,42,91,.16)}
.vv2.v4 .minis .mlabel{display:block;font-size:13.5px;line-height:1.35;margin-top:8px;font-weight:600}
@media(max-width:1000px){.vv2.v4 .minis{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.vv2.v4 .trajectgrid{grid-template-columns:1fr}.vv2.v4 .venster.hoog{aspect-ratio:700/640}}
@media(max-width:560px){.vv2.v4 .minis{grid-template-columns:repeat(2,1fr)}}

.vv2.v4 .gedachten .slotzin{margin:22px 0 0;font-family:Fraunces,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.v4 .gedachtenlijst{max-width:860px}
.vv2.v4 .gedachte summary{padding:20px 4px;gap:20px}
.vv2.v4 .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.v4 .gedachte .q b{font-weight:600;color:var(--vv-diep)}
.vv2.v4 .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.v4 .gedachte summary:hover .q{color:var(--vv-inkt)}
.vv2.v4 .gedachte summary:hover .plus{color:var(--vv-tealdonker)}
.vv2.v4 .gedachte p{font-size:16.5px;padding-left:4px}
.vv2.v4 .gedachten .slotzin{margin-top:26px}

/* ---------- ronde 4 (9 sep, laat): vier stappen, tempoblok, samenwerking met drie kaarten ---------- */
.vv2.v4 .stappen3.vier{grid-template-columns:repeat(4,1fr);gap:22px}
.vv2.v4 .stappen3.vier h3{font-size:19px}
@media(max-width:1000px){.vv2.v4 .stappen3.vier{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.vv2.v4 .stappen3.vier{grid-template-columns:1fr}}
.vv2.v4 .aanpak .onder b{color:var(--vv-diep)}
.vv2.v4 .tempo{margin-top:30px;background:#fff;border:1px solid var(--vv-rand);border-radius:12px;padding:22px 26px;max-width:880px}
.vv2.v4 .tempo h3{margin:0 0 8px;font-size:21px}
.vv2.v4 .tempo p{margin:0;font-size:15.5px;line-height:1.6}
.vv2.v4 .samenwerking{background:#fff;padding:88px 0 80px}
.vv2.v4 .kaarten3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:8px}
.vv2.v4 .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.v4 .vkaart:hover{box-shadow:0 14px 34px rgba(11,42,91,.14);transform:translateY(-2px)}
.vv2.v4 .vkaart .venster{display:block;aspect-ratio:16/10;overflow:hidden;box-shadow:none}
.vv2.v4 .vkaart .venster img{width:100%;height:calc(100% - 22px);object-fit:cover;object-position:top}
.vv2.v4 .vkaart .vkop{display:block;font-family:Fraunces,Georgia,serif;font-weight:600;font-size:19px;color:var(--vv-diep);margin:14px 0 4px}
.vv2.v4 .vkaart .vtekst{display:block;font-size:15px;line-height:1.5;color:var(--vv-grijs)}
.vv2.v4 .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}
.vv2.v4 .minis.groot{grid-template-columns:repeat(3,1fr);gap:22px;margin-top:22px}
.vv2.v4 .minis.groot .mlabel{font-size:16px}
.vv2.v4 .minis.groot .venster>span{height:22px}
.vv2.v4 .minis.groot .venster>span::before{top:7px;width:8px;height:8px;box-shadow:13px 0 0 #D9D2C3,26px 0 0 #D9D2C3}
@media(max-width:900px){.vv2.v4 .kaarten3{grid-template-columns:1fr;max-width:560px}}
@media(max-width:700px){.vv2.v4 .minis.groot{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.vv2.v4 .vkaart:hover{transform:none}}

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