/* ------------------------------------------------------------------
 * Sjabloon: home (nieuwe insteek v2, 30 aug 2026)
 * Tien secties, elk met één boodschap. De gedeelde kern staat in
 * algemeen.css (VV2); hier alleen wat specifiek voor de homepage is.
 * ------------------------------------------------------------------ */

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

/* gedeeld: introzin onder een kop */
.vv2 .lead{font-size:clamp(17px,2vw,19.5px);line-height:1.6;max-width:720px;margin-bottom:26px}

/* ---------- 1 · held ---------- */
.vv2 .held{position:relative;overflow:hidden;padding:96px 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,.16), transparent 55%),
    radial-gradient(ellipse 700px 500px at 8% 95%, rgba(31,191,174,.09), transparent 50%),
    linear-gradient(158deg, #103468 0%, #0B2A5B 46%, #081F46 100%) !important}
.vv2 .held .gloed{position:absolute;right:2%;top:60px;width:460px;height:460px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle, rgba(31,191,174,.20) 0%, rgba(31,191,174,0) 62%);z-index:1}
.vv2 .held .golf{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:70px;z-index:3}
.vv2 .held .wrap{position:relative;z-index:2}
.vv2 .held h1{font-size:clamp(38px,5.4vw,66px);max-width:840px}
.vv2 .held h1 em{font-style:normal;color:#7FD8CE}
.vv2 .held .sub{margin-top:20px;max-width:620px;font-size:clamp(17px,2vw,19.5px)}
.vv2 .held .micro{color:#A9BBD8;font-size:14.5px;max-width:560px}
.vv2 .knoppen{margin-top:30px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
@media(max-width:900px){.vv2 .held .gloed{display:none}
  .vv2 .held{padding:74px 0 120px;background-size:auto,auto 42%,auto,auto,auto}}

/* ---------- herkenningsstrook (tussen held en blok 2) ----------
 * De zes bezwaren stonden eerst als uitklapblokken in de held (te druk) en
 * daarna alleen in de FAQ onderaan (te laat). Nu: de herkenning bovenaan als
 * korte klikbare regels, het antwoord beneden.
 * Klasse heet herkenstrook en niet herken: die naam is in algemeen.css al bezet
 * (oud label in de held, hoofdletters en lichtteal) en erft door naar de regels. */
.vv2 .herkenstrook{background:var(--vv-papier);padding:34px 0 0}
.vv2 .herkenstrook .hlabel{display:block;font-size:12.5px;letter-spacing:2.5px;text-transform:uppercase;
  font-weight:600;color:var(--vv-tealdonker);margin-bottom:12px}
.vv2 .herkenlijst{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.vv2 .herkenlijst a{display:inline-block;background:#fff;border:1px solid var(--vv-rand);border-radius:999px;
  padding:9px 16px;font-size:15px;color:var(--vv-diep);text-decoration:none;
  font-family:Fraunces,Georgia,serif;font-style:italic;line-height:1.3;transition:border-color .2s,background .2s}
.vv2 .herkenlijst a:hover{border-color:var(--vv-teal);background:var(--vv-lichtteal)}
.vv2 .herkenstrook + .breedte{padding-top:56px}
@media(max-width:760px){.vv2 .herkenstrook{padding-top:26px}.vv2 .herkenlijst a{font-size:14px;padding:8px 13px}}

/* ---------- 2 · vindbaarheid is nooit één ding ---------- */
.vv2 .breedte{background:var(--vv-papier)}
.vv2 .proefblok{background:var(--vv-lichtteal);border:1px solid #CDEDE7;border-radius:18px;
  padding:26px 30px;display:grid;grid-template-columns:minmax(210px,1fr) 1.55fr;gap:30px;align-items:center;margin-top:8px}
.vv2 .proefblok .label{display:block;font-size:12.5px;letter-spacing:2px;text-transform:uppercase;
  font-weight:600;color:var(--vv-tealdonker);margin-bottom:8px}
.vv2 .proefblok .proeftekst p{margin:0;font-size:16px;color:var(--vv-inkt)}
.vv2 .proefstappen{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.vv2 .proefstappen li{display:flex;gap:14px;align-items:baseline;font-size:16px;line-height:1.5}
.vv2 .proefstappen .tekst{flex:1}
.vv2 .proefstappen .nr{font-family:Fraunces,Georgia,serif;font-size:22px;font-weight:600;
  color:var(--vv-tealdonker);line-height:1;flex:none;min-width:20px}
.vv2 .naproef{margin-top:24px;max-width:720px;font-size:17px}
@media(max-width:760px){.vv2 .proefblok{grid-template-columns:1fr;gap:18px;padding:22px}}

/* ---------- drieslag in de held ----------
 * Persoonlijk, Grondig, Compleet staat op de plek van de oude kicker.
 * De scheidingspunten zijn <i> zodat ze los te stylen zijn en niet meelezen. */
.vv2 .held .drieslag{font-size:13px;letter-spacing:3px;color:#7FD8CE;white-space:nowrap}
.vv2 .held .drieslag i{font-style:normal;opacity:.45;margin:0 4px}
/* op smalle schermen paste de drieslag niet op een regel en eindigde een regel
 * op een scheidingsteken; iets minder letterafstand lost dat op */
@media(max-width:520px){
  .vv2 .held .drieslag{font-size:11px;letter-spacing:1.6px}
  .vv2 .held .drieslag i{margin:0 3px}
}

/* ---------- de vijf lagen in blok 2 ----------
 * Bewust geen kaarten: blok 2 heeft al het lichtblauwe proefvlak, en nog een
 * rij dozen zou het blok druk maken. Dunne scheidslijnen houden het rustig. */
.vv2 .lagen{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:0;max-width:900px}
.vv2 .lagen li{display:grid;grid-template-columns:34px 190px 1fr;gap:0 14px;
  align-items:baseline;padding:14px 0;border-top:1px solid var(--vv-rand)}
.vv2 .lagen li:last-child{border-bottom:1px solid var(--vv-rand)}
.vv2 .lagen .lnr{font-family:Fraunces,Georgia,serif;font-size:19px;font-weight:600;
  color:var(--vv-tealdonker);line-height:1}
.vv2 .lagen .lkop{font-weight:600;font-size:16.5px;color:var(--vv-diep)}
.vv2 .lagen .luit{font-size:15.5px;line-height:1.55;color:var(--vv-inkt)}
/* de vijfde laag is de vondst; die mag een tint krijgen zonder een doos te worden */
.vv2 .lagen li.uit{background:var(--vv-lichtteal);margin:0 -14px;padding:14px;border-radius:10px;
  border-top-color:#CDEDE7}
.vv2 .lagen li.uit .lnr,.vv2 .lagen li.uit .lkop{color:var(--vv-tealdonker)}
@media(max-width:760px){
  .vv2 .lagen li{grid-template-columns:28px 1fr;gap:2px 12px}
  .vv2 .lagen .luit{grid-column:2}
}
.vv2 .consistentie{max-width:760px;font-size:17px;margin-bottom:30px}

/* ---------- 3 · zo ziet grondig meten eruit ---------- */
.vv2 .bewijs{background:#fff}
.vv2 .bgrid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.vv2 .bgrid p{max-width:500px}
.vv2 .bronnen{background:var(--vv-zand);border-left:3px solid var(--vv-teal);border-radius:0 10px 10px 0;
  padding:14px 18px;font-size:15px;line-height:1.6;color:var(--vv-inkt);margin:18px 0 14px}
.vv2 .bronnen .blabel{display:block;font-size:11.5px;letter-spacing:1.8px;text-transform:uppercase;
  font-weight:600;color:var(--vv-tealdonker);margin-bottom:3px}
.vv2 .bronnen .tools{display:block;margin-top:9px;padding-top:9px;border-top:1px solid var(--vv-rand);
  font-size:12.5px;color:var(--vv-grijs);letter-spacing:.2px}
.vv2 .bewijs .klein{font-size:15px;color:var(--vv-grijs);margin-bottom:20px}
.vv2 .bewijs .voorbeeldkaart{margin:0;max-width:396px;justify-self:center}
@media(max-width:860px){.vv2 .bgrid{grid-template-columns:1fr}}

/* ---------- 4 · meten kiezen bouwen bewijzen ----------
 * Strenge hiërarchie: het fasewoord is dominant, de zin is kort,
 * het stapbereik is stille metadata en het portaalbeeld ondersteunt. */
.vv2 .traject h2{font-size:clamp(32px,4.4vw,52px);margin-bottom:12px}
.vv2 .traject .lead{max-width:600px;margin-bottom:30px}
.vv2 .fasen{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-top:6px}
.vv2 .fase{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);
  border-radius:16px;padding:22px 24px 24px}
.vv2 .fase .fstappen{display:block;font-size:11px;letter-spacing:1.6px;text-transform:uppercase;
  font-weight:500;color:rgba(159,178,210,.75);margin-bottom:10px}
.vv2 .fase h3{font-family:Fraunces,Georgia,serif;font-size:30px;color:#fff;
  margin-bottom:9px;letter-spacing:-.02em;line-height:1}
.vv2 .fase p{font-size:14.5px;line-height:1.55;color:#B9C6DC;margin:0}

/* ---------- 5 · geen overdracht, geen wachtrij ---------- */
.vv2 .persoonlijk{background:var(--vv-papier)}
.vv2 .persoonlijk .persoon p{max-width:580px}
/* Tot het portret er is (maandag 31 aug) staat deze sectie in één kolom.
 * Een lege fotolijst met een tekstplaatshouder erin is erger dan geen foto:
 * die brak juist op de plek waar de persoonlijke belofte bewijs moet krijgen. */
.vv2 .persoon.geenfoto{grid-template-columns:1fr;gap:0}
.vv2 .persoon.geenfoto p,
.vv2 .persoon.geenfoto .inzicht{max-width:680px}
.vv2 .persoonlijk .klein{font-size:15px;color:var(--vv-grijs);line-height:1.6;margin-top:14px}
.vv2 .persoonlijk .klein a{color:var(--vv-tealdonker)}

/* ---------- 6 · van techniek tot reputatie ---------- */
.vv2 .omvang{background:#fff}
.vv2 .ogrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:16px}
.vv2 .okaart{background:var(--vv-papier);border:1px solid var(--vv-rand);border-radius:16px;padding:22px 24px}
.vv2 .okaart h3{font-family:Fraunces,Georgia,serif;font-size:22px;color:var(--vv-diep);margin-bottom:8px;letter-spacing:-.01em}
.vv2 .okaart p{font-size:15.5px;line-height:1.55;color:var(--vv-inkt);margin:0}
.vv2 .okaart.extra{background:var(--vv-lichtteal);border-color:#CDEDE7}
/* zes gescoorde gebieden plus één slotkaart: die slotkaart loopt over de volle
 * breedte, anders blijft er een wees achter in het raster */
@media(min-width:900px){.vv2 .okaart.extra{grid-column:1/-1}}
/* het zesde gebied is nieuw (v1.1) en de kern van de nieuwe insteek: iets meer nadruk */
.vv2 .okaart.nieuw{border-color:#E4C3B4;background:#FBF2EE}
.vv2 .okaart.nieuw h3{color:#A0522D}

/* ---------- 7 · pakketten ---------- */
.vv2 .pakketd{background:var(--vv-zand)}
.vv2 .pvoet{margin-top:22px;background:#fff;border:1px solid var(--vv-rand);border-radius:16px;padding:22px 26px;max-width:900px}
.vv2 .pvoet p{font-size:15.5px;line-height:1.6;margin:0 0 10px}
.vv2 .pvoet p:last-child{margin:0;color:var(--vv-grijs);font-size:15px}
.vv2 .knopregel{margin-top:18px}

/* ---------- 8 · de case ---------- */
.vv2 .meetlat{background:var(--vv-papier)}
.vv2 .casegrid{display:grid;grid-template-columns:1.35fr .85fr;gap:26px;align-items:start;margin-top:6px}
.vv2 .casetabel{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--vv-rand);border-radius:16px;overflow:hidden}
.vv2 .casetabel caption{caption-side:bottom;text-align:left;font-size:13px;color:var(--vv-grijs);padding-top:10px}
.vv2 .casetabel thead th{background:var(--vv-diep);color:#fff;font-size:12.5px;letter-spacing:1.2px;text-transform:uppercase;
  font-weight:600;text-align:left;padding:12px 16px}
.vv2 .casetabel td{padding:13px 16px;border-top:1px solid var(--vv-rand);font-size:15.5px;vertical-align:top;line-height:1.45}
/* De eerste kolom is een rijkop geworden (th scope=row), zodat een schermlezer
 * bij elk cijfer noemt waar het over gaat. De opmaak blijft die van een cel. */
.vv2 .casetabel tbody th{background:none;font-weight:500;color:var(--vv-diep);text-align:left;
  text-transform:none;letter-spacing:0;
  padding:13px 16px;border-top:1px solid var(--vv-rand);font-size:15.5px;vertical-align:top;line-height:1.45}
.vv2 .casetabel .bron{display:block;font-weight:300;font-size:12.5px;color:var(--vv-grijs);
  letter-spacing:.6px;text-transform:uppercase;margin-top:2px}
.vv2 .formulier .gerust{font-size:13.5px;color:var(--vv-tealdonker);text-align:center;margin:12px 0 0;font-weight:500}
.vv2 .formulier .klein{margin-top:6px}
.vv2 .casetabel .voor{color:var(--vv-grijs)}
.vv2 .casetabel .na{font-weight:600;color:var(--vv-tealdonker)}
.vv2 .casetabel .na span{display:block;font-weight:300;font-size:13.5px;color:var(--vv-grijs)}
.vv2 .casezij{display:grid;gap:14px}
.vv2 .uitschieter,.vv2 .eerlijk{border-radius:16px;padding:20px 22px;border:1px solid var(--vv-rand);background:#fff}
.vv2 .uitschieter{background:var(--vv-lichtteal);border-color:#CDEDE7}
.vv2 .ulabel{display:block;font-size:11.5px;letter-spacing:1.8px;text-transform:uppercase;font-weight:600;
  color:var(--vv-tealdonker);margin-bottom:7px}
.vv2 .eerlijk .ulabel{color:var(--vv-grijs)}
.vv2 .uitschieter p,.vv2 .eerlijk p{margin:0;font-size:15px;line-height:1.55}
.vv2 .mslot{margin-top:24px;max-width:780px;font-size:17px;color:var(--vv-inkt)}
@media(max-width:900px){.vv2 .casegrid{grid-template-columns:1fr}
  .vv2 .casetabel{display:block;overflow-x:auto}}

/* ---------- 9 · vragen (lichte variant van de uitklappers) ---------- */
.vv2 .vragen{background:#fff}
.vv2 .vragen .quotes{margin-top:6px;max-width:840px}
.vv2 .vragen .q{background:var(--vv-papier);border:1px solid var(--vv-rand)}
.vv2 .vragen .q summary{padding:17px 22px;color:var(--vv-diep)}
.vv2 .vragen .q .zin{font-family:Jost,'Segoe UI',Arial,sans-serif;font-style:normal;font-weight:600;
  font-size:17px;line-height:1.45;color:var(--vv-diep)}
.vv2 .vragen .q .antwoord{padding:0 22px 20px;color:var(--vv-inkt);font-size:16px;max-width:700px}
.vv2 .vragen .q .antwoord a{color:var(--vv-tealdonker)}
.vv2 .vragen .q[open]{background:var(--vv-lichtteal);border-color:#CDEDE7}
.vv2 .vragen details[open] .plus{color:var(--vv-tealdonker);border-color:var(--vv-tealdonker)}

/* ---------- 10 · formulier ---------- */
.vv2 .ctaband{padding:76px 0}
.vv2 .fgrid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.vv2 .fgrid>div p{max-width:480px}
.vv2 .krijgt{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px}
.vv2 .krijgt li{padding-left:24px;position:relative;font-size:16px;color:#DCE4F1}
.vv2 .krijgt li:before{content:"\2713";position:absolute;left:0;color:var(--vv-teal);font-weight:600}
.vv2 .krijgt b{color:#fff}
.vv2 .ctaband .leesmeer{grid-column:1/-1;margin:34px 0 0;padding-top:22px;
  border-top:1px solid rgba(255,255,255,.16);font-size:14px;color:#8FA3C4}
.vv2 .ctaband .leesmeer a{color:#9FB2D2}
@media(max-width:860px){.vv2 .fgrid{grid-template-columns:1fr}}