/* ------------------------------------------------------------------
 * Algemeen: geldt op de hele site.
 * Deel 1: bestaande regels (22 aug 2026, uit Customizer verhuisd).
 * Deel 2: VV2-kern (30 aug 2026): de gedeelde vormgeving van de
 * nieuwe insteek. Alles met vv2-prefix, zodat oudere sjablonen
 * (uitleg, landing, EN/DE) er geen last van hebben.
 * ------------------------------------------------------------------ */

/* Merklettertype ook buiten de pagina-inhoud (30 aug 2026).
 * Alle fontregels stonden op .vv2 gescoped, waardoor de header, het menu,
 * de taalschakelaar en de footer op het systeemlettertype bleven staan
 * (gemeten: -apple-system) terwijl de inhoud Jost gebruikte. Dat verschil
 * zie je vooral bovenaan, precies waar de eerste indruk valt. */
body,
.site-title, .site-title a,
.main-header-menu a,
.ast-header-break-point .main-header-menu a,
.site-footer, .site-footer a,
button, input, select, textarea,
.ast-button, .ast-custom-button {
  font-family: Jost, 'Segoe UI', Arial, sans-serif;
}
.site-title, .site-title a { font-weight: 600; }

/* Gratis vindbaarheidsscan als knop in menu */
.main-header-menu > li:last-child > a { background: var(--ast-global-color-0); color:#03251F !important; border-radius:999px; padding:9px 17px !important; font-weight:600; margin-left:6px; }
.main-header-menu > li:last-child > a:hover { background:#2ED4C2; }

/* Header op één regel houden (30 aug 2026).
 * De menu-items waren samen 994 px breed in een balk van 946 px, waardoor de
 * scanknop als achtste item naar een tweede regel viel. Dat oogde als een header
 * die net niet past. Minder lucht per item levert ongeveer 70 px op, ruim genoeg,
 * en werkt ook voor de langere Engelse en Duitse menulabels. */
.ast-desktop .main-header-menu > li > a { padding-left:9px; padding-right:9px; }
@media (min-width:922px) and (max-width:1200px){
  .ast-desktop .main-header-menu > li > a { padding-left:6px; padding-right:6px; font-size:14px; }
  .ast-desktop .main-header-menu > li:last-child > a { padding:7px 12px !important; font-size:13.5px; margin-left:4px; }
  .ast-desktop .site-branding img,
  .ast-desktop .custom-logo-link img { max-width:34px; }
  .ast-desktop .site-title { font-size:19px; }
}
/* FAQ details-blokken */
details.wp-block-details { background:#fff; border:1px solid var(--ast-global-color-6); border-radius:12px; padding:14px 20px; margin-bottom:12px; }
details.wp-block-details summary { font-weight:500; color: var(--ast-global-color-2); cursor:pointer; }
/* tabellen */
.wp-block-table table { background:#fff; border-radius:12px; overflow:hidden; }
.wp-block-table th { background: var(--ast-global-color-2); color:#fff; }
/* quote-statement */
.wp-block-quote { border-left:4px solid var(--ast-global-color-0); background: var(--ast-global-color-5); padding:18px 26px; border-radius:0 12px 12px 0; }

/* ==================================================================
 * VV2-KERN · de nieuwe insteek (30 aug 2026)
 * Palet gelijk aan de rapportstandaard: diepblauw, teal, crème.
 * ================================================================== */
:root{
  --vv-diep:#0B2A5B; --vv-teal:#1FBFAE; --vv-tealdonker:#0F7C70; --vv-papier:#FAF6EE;
  --vv-inkt:#1F2A44; --vv-grijs:#5C6670; --vv-rand:#E3DED2; --vv-zand:#F5F2E9;
  --vv-goud:#B9770E; --vv-lichtteal:#EFFAF8;
}
.vv2{font-family:Jost,'Segoe UI',Arial,sans-serif;color:var(--vv-inkt);font-size:17px;line-height:1.65;font-weight:300}
.vv2 *{box-sizing:border-box}
.vv2 .wrap{max-width:1120px;margin:0 auto;padding:0 clamp(20px,4vw,48px)}
.vv2 h1,.vv2 h2,.vv2 h3{font-family:Fraunces,Georgia,serif;font-weight:600;line-height:1.08;letter-spacing:-.015em;color:var(--vv-diep);margin:0}
.vv2 h2{font-size:clamp(28px,3.6vw,42px);margin-bottom:14px}
.vv2 h3{font-size:21px;font-family:Jost,'Segoe UI',Arial,sans-serif;font-weight:600;letter-spacing:0}
.vv2 p{margin:0 0 12px}
.vv2 b{font-weight:600}
.vv2 .kicker{display:inline-block;font-size:12.5px;letter-spacing:2.5px;font-weight:600;text-transform:uppercase;color:var(--vv-tealdonker);margin-bottom:14px}
.vv2 section{padding:88px 0}
.vv2 .stil{color:var(--vv-grijs)}
.vv2 .cta{display:inline-block;background:var(--vv-teal);color:#03251F !important;font-weight:600;padding:14px 28px;border-radius:999px;text-decoration:none;font-size:16px;border:none;cursor:pointer}
.vv2 .cta:hover{background:#2ED4C2}
.vv2 .knop2{display:inline-block;border:1.5px solid rgba(11,42,91,.4);color:var(--vv-diep);text-decoration:none;padding:12px 24px;border-radius:999px;font-size:15px}
.vv2 .knop2:hover{border-color:var(--vv-diep)}
.vv2 .micro{font-size:14px;color:var(--vv-grijs);margin-top:12px;max-width:540px}

/* --- donkere secties --- */
.vv2 .donker{background:var(--vv-diep);color:#fff}
.vv2 .donker h1,.vv2 .donker h2,.vv2 .donker h3{color:#fff}
.vv2 .donker .kicker{color:#7FD8CE}
.vv2 .donker p{color:#DCE4F1}
.vv2 .donker .stil{color:#9FB2D2}
.vv2 .donker .knop2{border-color:rgba(255,255,255,.5);color:#fff}
.vv2 .donker .knop2:hover{border-color:#fff}
.vv2 .donker .micro{color:#8FA3C4}

/* --- uitklap (quotes en stappen), zonder JavaScript --- */
.vv2 details{border-radius:14px;overflow:hidden}
.vv2 details summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:16px}
.vv2 details summary::-webkit-details-marker{display:none}
.vv2 details .plus{width:26px;height:26px;border-radius:50%;border:1.5px solid currentColor;opacity:.65;display:flex;align-items:center;justify-content:center;font-size:16px;flex:none;font-style:normal;font-family:Jost,Arial,sans-serif;transition:transform .3s}
.vv2 details[open] .plus{transform:rotate(45deg);opacity:1;color:var(--vv-teal);border-color:var(--vv-teal)}

/* quotes op de held */
.vv2 .quotes{margin-top:34px;display:grid;gap:12px;max-width:760px}
.vv2 .q{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16)}
.vv2 .q summary{padding:17px 22px;color:#fff}
.vv2 .q .zin{font-family:Fraunces,Georgia,serif;font-style:italic;font-weight:500;font-size:clamp(17px,2.1vw,20px);flex:1;line-height:1.4}
.vv2 .q .antwoord{padding:0 22px 20px;color:#DCE4F1;font-size:16px;max-width:640px}
.vv2 .q .antwoord b{color:#fff}
.vv2 .q .antwoord a{color:#7FD8CE}
.vv2 .q[open]{background:rgba(31,191,174,.13)}
.vv2 .herken{margin:22px 0 0;color:#7FD8CE;font-weight:600;font-size:14px;letter-spacing:.6px;text-transform:uppercase}

/* stappen 0-10 */
.vv2 .tlijst{max-width:880px}
.vv2 .tstap{border-top:1px solid rgba(255,255,255,.14);border-radius:0}
.vv2 .tstap summary{padding:18px 0;align-items:baseline}
.vv2 .tstap .n{font-family:Fraunces,Georgia,serif;color:var(--vv-teal);font-weight:600;font-size:28px;line-height:1;min-width:46px}
.vv2 .tstap.gratis .n{color:#7FD8CE}
.vv2 .tstap .kop{flex:1}
.vv2 .tstap .titel{display:block;color:#fff;font-weight:600;font-size:18px;
  font-family:Jost,'Segoe UI',Arial,sans-serif;line-height:1.35;letter-spacing:0;margin:0}
.vv2 .tstap .mens{display:block;color:#C9D4E6;font-size:15.5px;line-height:1.55;font-weight:300;margin-top:3px}
.vv2 .tstap .acties{padding:2px 0 18px 46px}
.vv2 .acties ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.vv2 .acties li{display:grid;grid-template-columns:62px 1fr;gap:12px;align-items:baseline;font-size:15px;color:#DCE4F1;line-height:1.5;font-weight:300}
.vv2 .rol{font-size:10.5px;letter-spacing:1.3px;font-weight:600;text-align:center;padding:3px 0;border-radius:99px;font-family:Jost,Arial,sans-serif}
.vv2 .r-ik{background:rgba(31,191,174,.22);color:#7FD8CE}
.vv2 .r-jij{background:rgba(185,119,14,.32);color:#F0C173}
.vv2 .r-samen{background:rgba(255,255,255,.14);color:#C9D4E6}
/* lichte variant (werkwijzepagina) */
.vv2 .licht .tstap{border-top-color:var(--vv-rand)}
.vv2 .licht .tstap .titel{color:var(--vv-diep)}
.vv2 .licht .tstap .mens{color:var(--vv-grijs)}
.vv2 .licht .tstap .n{color:var(--vv-tealdonker)}
.vv2 .licht .acties li{color:var(--vv-inkt)}
.vv2 .licht .r-ik{background:#DCF3EC;color:var(--vv-tealdonker)}
.vv2 .licht .r-jij{background:#FBEFD6;color:#8a6a09}
.vv2 .licht .r-samen{background:#EFEAE0;color:var(--vv-grijs)}

/* kaarten */
.vv2 .kaartrij{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:22px 0}
.vv2 .kaart{background:#fff;border:1px solid var(--vv-rand);border-radius:14px;padding:20px 22px}
.vv2 .kaart .kop{font-weight:600;font-size:16px;margin-bottom:5px;color:var(--vv-diep)}
.vv2 .kaart .tekst{font-size:15px;line-height:1.55;color:var(--vv-inkt)}
.vv2 .extrablok{margin-top:24px;border-radius:14px;padding:20px 24px;max-width:880px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16)}
.vv2 .extrablok .kop{color:#7FD8CE;font-size:11.5px;letter-spacing:2px;font-weight:600;margin-bottom:5px}
.vv2 .extrablok .titel{color:#fff;font-weight:600;font-size:17px;margin-bottom:3px;
  font-family:Jost,'Segoe UI',Arial,sans-serif;line-height:1.35;letter-spacing:0;margin-top:0}
.vv2 .extrablok p{color:#DCE4F1;font-size:15px;margin:0}
.vv2 .licht .extrablok,.vv2 .extrablok.licht{background:#fff;border-color:var(--vv-rand)}
.vv2 .extrablok.licht .kop{color:var(--vv-tealdonker)}
.vv2 .extrablok.licht .titel{color:var(--vv-diep)}
.vv2 .extrablok.licht p{color:var(--vv-inkt)}

/* inzichtzin */
.vv2 .inzicht{font-family:Fraunces,Georgia,serif;font-style:italic;font-weight:500;font-size:clamp(19px,2.4vw,24px);line-height:1.45;color:var(--vv-diep);border-left:3px solid var(--vv-teal);padding:4px 0 4px 22px;margin:26px 0 8px;max-width:720px}

/* pakketkaarten */
.vv2 .pakketten3{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;margin-top:10px}
.vv2 .pkaart{background:#fff;border:1px solid var(--vv-rand);border-radius:16px;padding:26px;display:flex;flex-direction:column;position:relative}
.vv2 .pkaart.top{border:2px solid var(--vv-teal)}
.vv2 .pkaart .badge{position:absolute;top:-12px;left:24px;background:var(--vv-teal);color:#03251F;font-size:12px;font-weight:600;padding:3px 12px;border-radius:999px}
.vv2 .pkaart .pvogel{height:86px;display:flex;align-items:flex-end}
.vv2 .pkaart .pvogel img{max-height:86px;width:auto}
.vv2 .pkaart .pnaam{font-family:Fraunces,Georgia,serif;font-size:23px;font-weight:600;color:var(--vv-diep);margin:10px 0 0;line-height:1.15;letter-spacing:-.01em}
.vv2 .pkaart .lp{font-family:Fraunces,Georgia,serif;font-size:40px;font-weight:600;color:var(--vv-diep);line-height:1;margin:12px 0 2px}
.vv2 .pkaart .lpsub{font-size:14px;color:var(--vv-grijs);margin-bottom:14px}
.vv2 .pkaart .pwat{font-size:15px;color:var(--vv-inkt);border-top:1px solid var(--vv-rand);padding-top:12px;margin-bottom:16px;line-height:1.55}
.vv2 .pkaart .pprijs{font-size:24px;font-weight:600;margin-top:auto;color:var(--vv-inkt)}
.vv2 .pkaart .pprijs small{font-size:13px;color:var(--vv-grijs);font-weight:300}

/* basisblok */
.vv2 .basisblok{background:#fff;border:1px solid var(--vv-rand);border-radius:16px;padding:26px 28px;margin-bottom:20px}
.vv2 .basisblok>.kop{font-size:12px;letter-spacing:2px;font-weight:600;color:var(--vv-tealdonker);margin-bottom:4px;text-transform:uppercase}
.vv2 .basisblok>.titel{font-family:Fraunces,Georgia,serif;font-size:23px;font-weight:600;color:var(--vv-diep);margin:0 0 16px;line-height:1.15}
.vv2 .pkop{font-size:clamp(24px,2.8vw,31px);margin:34px 0 16px}
.vv2 .basis3{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}
.vv2 .bkolom .bkop{font-weight:600;font-size:16px;color:var(--vv-diep);margin:0 0 8px;font-family:Jost,'Segoe UI',Arial,sans-serif;line-height:1.35;letter-spacing:0}
.vv2 .bkolom .bkop i{font-style:normal;display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:8px}
.vv2 .bkolom ul{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:6px}
.vv2 .bkolom li{font-size:15px;padding-left:20px;position:relative;line-height:1.5}
.vv2 .bkolom li:before{content:"\2713";position:absolute;left:0;color:var(--vv-tealdonker);font-weight:600}
.vv2 .bkolom details{background:var(--vv-zand);border:1px solid var(--vv-rand)}
.vv2 .bkolom details summary{padding:10px 14px;font-size:13.5px;font-weight:600;color:var(--vv-tealdonker)}
.vv2 .bkolom details .plus{width:20px;height:20px;font-size:13px}
.vv2 .bkolom .tech{padding:2px 14px 12px;font-size:13.5px;color:var(--vv-grijs);line-height:1.55}
.vv2 .bkolom .tech ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.vv2 .bkolom .tech li{padding-left:19px;position:relative}
.vv2 .bkolom .tech li:before{content:"\2713";position:absolute;left:0;color:var(--vv-tealdonker);font-weight:600}

/* formulier */
.vv2 .formulier{background:#fff;border:1px solid var(--vv-rand);border-radius:16px;padding:28px;max-width:520px}
.vv2 .formulier label{display:block;font-size:13.5px;font-weight:600;margin:14px 0 5px;color:var(--vv-inkt)}
.vv2 .formulier input{width:100%;padding:12px 14px;border:1px solid var(--vv-rand);border-radius:10px;font-size:16px;font-family:inherit;background:#fff}
.vv2 .formulier .hint{font-size:12.5px;color:var(--vv-grijs);display:block;margin-top:4px}
.vv2 .formulier .cta{width:100%;margin-top:20px;text-align:center}
.vv2 .formulier .klein{font-size:13px;color:var(--vv-grijs);margin:12px 0 0;text-align:center}

/* scankaart-afbeelding */
.vv2 .voorbeeldkaart{margin:18px 0 0;max-width:460px}
.vv2 .voorbeeldkaart img{border:1px solid var(--vv-rand);border-radius:14px;background:#fff;padding:6px;cursor:zoom-in;box-shadow:0 16px 44px rgba(11,42,91,.10)}
.vv2 .voorbeeldkaart figcaption{font-size:13px;color:var(--vv-grijs);margin-top:8px}
.vv-lightbox{position:fixed;inset:0;background:rgba(3,20,45,.9);display:none;align-items:flex-start;justify-content:center;overflow:auto;z-index:99;padding:30px;cursor:zoom-out}
.vv-lightbox.open{display:flex}
.vv-lightbox img{max-width:min(920px,94vw);height:auto;border-radius:10px}

/* persoon */
.vv2 .persoon{display:grid;grid-template-columns:260px 1fr;gap:40px;align-items:center}
.vv2 .foto{aspect-ratio:4/5;background:#E8E2D4;border-radius:16px;display:flex;align-items:center;justify-content:center;color:#A39B8A;font-size:13px;letter-spacing:1px;overflow:hidden}
.vv2 .foto img{width:100%;height:100%;object-fit:cover}
.vv2 .persoon .groot{font-family:Fraunces,Georgia,serif;font-size:clamp(23px,2.8vw,31px);font-weight:600;color:var(--vv-diep);line-height:1.25;margin-bottom:12px}

@media(max-width:760px){
  .vv2 section{padding:64px 0}
  .vv2 .persoon{grid-template-columns:1fr}
  .vv2 .foto{max-width:230px}
  .vv2 .tstap .acties{padding-left:0}
  .vv2 .q summary{padding:15px 16px;gap:10px}
  .vv2 .q .antwoord{padding:0 16px 18px}
}

/* portaal-inkijk */
.vv2 .portaalkijk{display:block;max-width:760px;margin:26px 0 0;text-decoration:none}
.vv2 .portaalkijk img{border-radius:14px;border:1px solid rgba(255,255,255,.25);box-shadow:0 22px 60px rgba(0,0,0,.35);transition:transform .25s}
.vv2 .portaalkijk:hover img{transform:translateY(-3px)}
.vv2 .portaalkijk .bijschrift{display:block;font-size:13.5px;color:#8FA3C4;margin-top:10px}
.vv2 .portaalkijk.licht img{border-color:var(--vv-rand);box-shadow:0 16px 44px rgba(11,42,91,.12)}
.vv2 .portaalkijk.licht .bijschrift{color:var(--vv-grijs)}

/* zachte afronding op donkere blokken (rust, naar voorbeeld van moderne SaaS-pagina's) */
.vv2 .traject{border-radius:34px;margin:0 clamp(0px,2vw,26px)}
.vv2 .ctaband{border-radius:34px;margin:0 clamp(0px,2vw,26px) 34px}
@media(max-width:760px){.vv2 .traject,.vv2 .ctaband{border-radius:22px;margin-left:12px;margin-right:12px}}