/* ------------------------------------------------------------------
 * Sjabloon: pakketten (nieuwe insteek, 30 aug 2026)
 * Gedeelde kern in algemeen.css (VV2).
 * ------------------------------------------------------------------ */
img{max-width:100%;height:auto}
.vv2 .pkop{background:var(--vv-papier);padding:64px 0 8px}
.vv2 .pkop h1{font-size:clamp(32px,4.4vw,52px);max-width:820px}
.vv2 .lead{margin-top:16px;max-width:720px;font-size:18px;color:var(--vv-inkt)}
.vv2 .pbasis{padding-top:28px;background:var(--vv-papier)}

/* ---------- v2 (9 sep 2026): 'Dit zit er precies in' in acht groepen met status en tools ---------- */
.vv2.p2 .inhoud{background:var(--vv-papier);padding:72px 0 80px}
.vv2.p2 .inhoud .legenda{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 22px}
.vv2.p2 .status{display:inline-block;font-size:11px;letter-spacing:1.2px;text-transform:uppercase;font-weight:600;border-radius:99px;padding:3px 10px;line-height:1.5;font-family:Jost,'Segoe UI',Arial,sans-serif}
.vv2.p2 .status.controle{background:#EEF3FA;color:var(--vv-diep)}
.vv2.p2 .status.uitvoering{background:var(--vv-lichtteal);color:var(--vv-tealdonker)}
.vv2.p2 .status.apart{background:var(--vv-zand);color:var(--vv-grijs)}
.vv2.p2 .groepen{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.vv2.p2 .groep{border:1px solid var(--vv-rand);border-radius:12px;padding:20px 22px 18px;background:#fff}
.vv2.p2 .groep h3{font-size:19px;margin:0 0 8px;font-family:Fraunces,Georgia,serif;color:var(--vv-diep)}
.vv2.p2 .groep .statussen{margin:0 0 12px;display:flex;gap:6px;flex-wrap:wrap}
.vv2.p2 .groep .tools{font-size:13.5px;color:var(--vv-grijs);margin:12px 0 0;line-height:1.5}
.vv2.p2 .checks{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.vv2.p2 .checks li{font-size:15px;line-height:1.45;padding-left:24px;position:relative;color:var(--vv-inkt);font-weight:400}
.vv2.p2 .checks li::before{content:"";position:absolute;left:0;top:5px;width:12px;height:12px;border:1.5px solid var(--vv-tealdonker);border-radius:3px}
.vv2.p2 .stil a,.vv2.p2 .lead a{color:var(--vv-diep);font-weight:600}
@media(max-width:820px){.vv2.p2 .groepen{grid-template-columns:1fr}}
/* 12 sep 2026: een vergelijkingstabel in plaats van acht groepen, techniek in uitklappers */
.vv2.p2 .inhoud .lead.klein{font-size:16px;color:var(--vv-grijs);margin:6px 0 16px;max-width:720px}
.vv2.p2 .tabelrand{overflow-x:auto;border:1px solid var(--vv-rand);border-radius:12px;background:#fff;margin-top:22px}
.vv2.p2 .vergelijk{width:100%;border-collapse:collapse;font-size:15.5px;min-width:640px}
.vv2.p2 .vergelijk th,.vv2.p2 .vergelijk td{text-align:left;padding:13px 18px;border-bottom:1px solid var(--vv-rand);vertical-align:top}
.vv2.p2 .vergelijk thead th{font-family:Jost,'Segoe UI',Arial,sans-serif;font-size:12px;letter-spacing:1.6px;text-transform:uppercase;color:var(--vv-grijs);font-weight:600;background:var(--vv-zand);white-space:nowrap}
.vv2.p2 .vergelijk thead th+th,.vv2.p2 .vergelijk td{text-align:center}
.vv2.p2 .vergelijk tbody th{font-weight:400;color:var(--vv-inkt);width:46%}
.vv2.p2 .vergelijk tbody th b{font-weight:600;color:var(--vv-diep)}
.vv2.p2 .vergelijk tbody th small{display:block;margin-top:4px;font-size:13.5px;color:var(--vv-grijs);line-height:1.5}
.vv2.p2 .vergelijk tr:last-child th,.vv2.p2 .vergelijk tr:last-child td{border-bottom:0}
.vv2.p2 .vergelijk tr.prijs td{font-family:Fraunces,Georgia,serif;font-size:20px;color:var(--vv-diep);font-weight:600}
.vv2.p2 .vergelijk tr.nadruk{background:var(--vv-zand)}
.vv2.p2 .vergelijk tr.nadruk td{font-family:Fraunces,Georgia,serif;font-size:22px;color:var(--vv-tealdonker);font-weight:600}
.vv2.p2 .vergelijk td.ja span[aria-hidden]{color:var(--vv-tealdonker);font-size:17px;font-weight:700}
.vv2.p2 .vergelijk td.ja .vb{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.vv2.p2 .voetnoot{margin:12px 0 0;font-size:14px;color:var(--vv-grijs);line-height:1.55;max-width:820px}
.vv2.p2 .verdiepkop{margin:44px 0 0;font-family:Fraunces,Georgia,serif;font-size:26px;color:var(--vv-diep)}
.vv2.p2 .verdiepingen{display:grid;gap:10px;max-width:900px}
.vv2.p2 details.verdiep{border:1px solid var(--vv-rand);border-radius:12px;background:#fff}
.vv2.p2 details.verdiep summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 20px;font-weight:600;color:var(--vv-diep);font-size:16.5px}
.vv2.p2 details.verdiep summary::-webkit-details-marker{display:none}
.vv2.p2 details.verdiep .plus{flex:none;width:26px;height:26px;display:flex;align-items:center;justify-content:center;font-size:21px;color:var(--vv-grijs);transition:transform .18s ease}
.vv2.p2 details.verdiep[open] .plus{transform:rotate(45deg)}
.vv2.p2 details.verdiep summary:hover .plus{color:var(--vv-tealdonker)}
.vv2.p2 .vdl{padding:0 20px 18px}
.vv2.p2 .vdl .waarom{margin:0 0 10px;font-size:15.5px;color:var(--vv-tealdonker);line-height:1.55}
.vv2.p2 .vdl ul{margin:0;padding-left:20px}
.vv2.p2 .vdl li{margin-bottom:6px;font-size:15.5px;line-height:1.55}
.vv2.p2 .apartblok{margin-top:36px;background:var(--vv-zand);border-radius:12px;padding:22px 26px;max-width:900px}
.vv2.p2 .apartblok h3{margin:0 0 10px;font-family:Fraunces,Georgia,serif;font-size:21px;color:var(--vv-diep)}
.vv2.p2 .apartblok ul{margin:0 0 12px;padding-left:20px}
.vv2.p2 .apartblok li{margin-bottom:5px;font-size:15.5px;line-height:1.55}
.vv2.p2 .apartblok p{margin:0;font-size:15.5px}
@media(max-width:700px){
  .vv2.p2 .vergelijk th,.vv2.p2 .vergelijk td{padding:11px 14px}
  .vv2.p2 .verdiepkop{font-size:23px}
}

/* ===== v11 (12 sep 2026): vorm en ritme ===== */
.vv2.p2 h1{font-size:clamp(38px,4.8vw,62px);line-height:1.02;letter-spacing:-.015em}
.vv2.p2 h2{font-size:clamp(28px,3.8vw,44px);line-height:1.06;letter-spacing:-.012em}
.vv2.p2 .kicker{font-size:11px;letter-spacing:2.4px}
.vv2.p2 .pkaart,.vv2.p2 details.verdiep{
  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.p2 .pkaart:hover,.vv2.p2 details.verdiep:hover{transform:translateY(-2px);
  box-shadow:0 2px 4px rgba(11,42,91,.05),0 16px 36px -22px rgba(11,42,91,.36)}
.vv2.p2 .pkaarten .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)}
.vv2.p2 .tabelrand{box-shadow:0 1px 2px rgba(11,42,91,.04),0 12px 30px -24px rgba(11,42,91,.34)}
.vv2.p2 .vergelijk tbody tr{transition:background .15s ease}
.vv2.p2 .vergelijk tbody tr:hover{background:rgba(31,191,174,.05)}
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .vv2.p2 .pkaart,.vv2.p2 details.verdiep,.vv2.p2 .tabelrand,.vv2.p2 .apartblok{
      animation:v11op linear both;animation-timeline:view();animation-range:entry 5% cover 24%}
  }
}
@keyframes v11op{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ===== v11 ronde 2: na het overleg ===== */
.vv2.p2,.vv2.p2 p,.vv2.p2 li{font-weight:400}
.vv2.p2 h1,.vv2.p2 h2,.vv2.p2 h3,.vv2.p2 .pnaam{font-weight:500}
.vv2.p2 h1{font-size:clamp(34px,4.4vw,60px);line-height:1.04}
.vv2.p2 h2{font-size:clamp(27px,3.4vw,42px)}
.vv2.p2 p,.vv2.p2 .lead{font-size:17.5px;line-height:1.55}
.vv2.p2 .lead{max-width:62ch}
.vv2.p2 .vdl li,.vv2.p2 .apartblok li{font-size:16.5px;line-height:1.55}
.vv2.p2 .pkaart,.vv2.p2 details.verdiep,.vv2.p2 .tabelrand,.vv2.p2 .apartblok{border-radius:12px}
.vv2.p2 .tabelrand,.vv2.p2 .apartblok{animation:none}
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .vv2.p2 .pkaart,.vv2.p2 details.verdiep{animation:none}
  }
}
.vv2.p2 a:focus-visible,.vv2.p2 summary:focus-visible{outline:2px solid var(--vv-tealdonker);
  outline-offset:3px;border-radius:4px}

/* ===== v11 ronde 3: schaal en diepte ===== */
.vv2.p2 h1{font-size:clamp(40px,6.6vw,86px);line-height:.96;letter-spacing:-.025em;max-width:13ch}
.vv2.p2 h2{font-size:clamp(28px,4.6vw,54px);line-height:1.0;letter-spacing:-.02em;max-width:16ch}
.vv2.p2 .kicker{font-size:10.5px;letter-spacing:3px}
.vv2.p2 .pkop{position:relative}

/* De middelste kolom van de vergelijking wordt over de volle hoogte marineblauw, zoals bij
   de voorbeeldsite. Geen label "meest gekozen", want het advies komt uit het onderzoek. */
.vv2.p2 .vergelijk thead th:nth-child(3){background:var(--vv-diep);color:#fff;border-radius:10px 10px 0 0}
.vv2.p2 .vergelijk tbody td:nth-child(3){background:rgba(11,42,91,.055)}
.vv2.p2 .vergelijk tbody tr:last-child td:nth-child(3){border-radius:0 0 10px 10px}
.vv2.p2 .vergelijk tbody td:nth-child(3) span[aria-hidden]{color:var(--vv-diep)}
.vv2.p2 .vergelijk tr.prijs td:nth-child(3),.vv2.p2 .vergelijk tr.nadruk td:nth-child(3){color:var(--vv-diep)}
.vv2.p2 .vergelijk tbody tr:hover td:nth-child(3){background:rgba(11,42,91,.085)}

/* ===== v11: dezelfde koptekst en hetzelfde beeldmerk als op de homepage ===== */
body.vv-stijl-pakketten-v11 #masthead{position:relative;z-index:3}
body.vv-stijl-pakketten-v11 .site-branding.ast-site-identity{margin-left:-10px}
body.vv-stijl-pakketten-v11 .custom-logo{width:74px;height:74px;max-width:none;
  transition:width .2s ease,height .2s ease}
body.vv-stijl-pakketten-v11 .site-logo-img{margin-bottom:-16px}
body.vv-stijl-pakketten-v11 .ast-site-title-wrap .site-title,
body.vv-stijl-pakketten-v11 .ast-site-title-wrap .site-title a{font-size:27px;letter-spacing:-.01em}
@media(max-width:920px){
  body.vv-stijl-pakketten-v11 .custom-logo{width:46px;height:46px}
  body.vv-stijl-pakketten-v11 .site-logo-img{margin-bottom:0}
  body.vv-stijl-pakketten-v11 .site-branding.ast-site-identity{margin-left:0}
  body.vv-stijl-pakketten-v11 .ast-site-title-wrap .site-title,
  body.vv-stijl-pakketten-v11 .ast-site-title-wrap .site-title a{font-size:20px}
}

/* ===== Nameting als pil op de pakketkaarten (12 sep 2026) ===== */
.vv2.p2 .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.p2 .pillenrij{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.vv2.p2 .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 vergelijkingstabel op een telefoon (13 sep 2026) =====
 * Wat er mis was. De tabel is 640 px breed en stond in een kader dat zijwaarts kon
 * scrollen. Op een scherm van 390 px zag je daardoor alleen de eerste kolom en een
 * streepje van Kolibri; de drie pakketten die de pagina moet vergelijken stonden buiten
 * beeld, zonder dat iets liet zien dat je kon schuiven. Bovendien maakte die 640 px het
 * document breder dan het scherm, waardoor de zwevende WhatsApp-knop mee naar buiten
 * schoof en niet meer aan te tikken was.
 *
 * Wat het nu doet. Onder 700 px wordt elke regel een blokje: de omschrijving boven, de
 * drie pakketten eronder naast elkaar met hun naam erbij. Geen zijwaarts schuiven meer,
 * en je ziet in een oogopslag wat je bij welk pakket krijgt. De kolomnamen staan via
 * nth-of-type in de opmaak, dus de tabel in de pagina hoeft niet te veranderen. */
@media(max-width:700px){
  .vv2.p2 .tabelrand{overflow-x:visible;border:0;background:none;border-radius:0}
  .vv2.p2 .vergelijk{min-width:0;width:100%;display:block;font-size:15px}
  /* wegstoppen met clip liet de kopregel toch een eigen breedte houden, waardoor de
     tabel alsnog buiten het scherm stak; de kolomnamen staan nu per cel */
  .vv2.p2 .vergelijk thead{display:none}
  .vv2.p2 .vergelijk tbody{display:block}
  .vv2.p2 .vergelijk tbody tr{display:block;background:#fff;border:1px solid var(--vv-rand);
    border-radius:12px;padding:14px 16px 12px;margin-bottom:10px}
  .vv2.p2 .vergelijk tbody tr:hover{background:#fff}
  .vv2.p2 .vergelijk tbody th{display:block;width:auto;padding:0 0 10px;border:0;
    text-align:left;font-weight:600;color:var(--vv-diep)}
  .vv2.p2 .vergelijk tbody th small{font-weight:400}
  .vv2.p2 .vergelijk tbody td{display:inline-block;width:calc(33.333% - 6px);padding:0;border:0;
    text-align:left;vertical-align:top}
  .vv2.p2 .vergelijk tbody td::before{display:block;font-family:Jost,'Segoe UI',Arial,sans-serif;
    font-size:10.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--vv-grijs);
    font-weight:600;margin-bottom:3px}
  /* op het bureaublad heeft de Vink-kolom een lichte achtergrond als kolomanker; in
     blokjes onder elkaar is dat alleen een vlek achter het middelste woord */
  .vv2.p2 .vergelijk tbody td:nth-child(3),
  .vv2.p2 .vergelijk tbody tr:hover td:nth-child(3){background:none;border-radius:0}
  .vv2.p2 .vergelijk tbody td:nth-of-type(1)::before{content:"Kolibri"}
  .vv2.p2 .vergelijk tbody td:nth-of-type(2)::before{content:"Vink"}
  .vv2.p2 .vergelijk tbody td:nth-of-type(3)::before{content:"Valk"}
  /* een vinkje zegt op zichzelf niets als de kolomkop wegvalt, dus hier het woord erbij */
  .vv2.p2 .vergelijk td.ja span[aria-hidden]{display:none}
  .vv2.p2 .vergelijk td.ja .vb{position:static;width:auto;height:auto;overflow:visible;
    clip:auto;white-space:normal;font-size:14px;color:var(--vv-tealdonker);font-weight:600}
  .vv2.p2 .vergelijk td.getal .vb{position:static;width:auto;height:auto;overflow:visible;
    clip:auto;white-space:normal;font-size:14px;color:var(--vv-grijs)}
  .vv2.p2 .vergelijk tr.prijs td,.vv2.p2 .vergelijk tr.nadruk td{font-size:19px}
  .vv2.p2 .vergelijk tr.nadruk{background:var(--vv-zand)}
  .vv2.p2 .vergelijk tr:last-child{margin-bottom:0}
}

/* ===== 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.p2 .pakketten3{grid-template-columns:minmax(0,1fr)}
  .vv2.p2 .pakketten3 > *{min-width:0}
  .vv2.p2 .ppil{white-space:normal}
}