/* ==========================================================================
   ontwerpvarianten.css  ·  de stijlkiezer op /voorbeeld-ontwerpvarianten/
   21 september 2026.

   Vervangt het raster van zes kaarten met :target-vergroting. Dat raster had
   twee problemen: zes identieke dozen zijn het duidelijkste sjabloonsignaal
   dat er is, en de vergroting werkte via :target, waar Astra overheen fietst.
   Nu is het een nagemaakt browservenster met tabbladen, waarin de echte
   voorbeeldpagina staat ingesloten. Geen :target meer, dus ook de omweg in
   vv-ankers.php is hier niet meer nodig.

   Kleuren komen uit algemeen.css, dit bestand voegt er geen nieuwe toe.
   ========================================================================== */

.vv2 .vvskiezer{margin:38px 0 0}

/* ---------- het venster ---------- */
.vv2 .vvsvenster{
  border:1px solid var(--vv-rand);border-radius:10px;overflow:hidden;
  background:#fff;box-shadow:0 18px 40px -28px rgba(11,42,91,.45);
}

.vv2 .vvschroom{background:#E8E4DC;border-bottom:1px solid var(--vv-rand);padding:11px 14px 0}
.vv2 .vvsbovenrij{display:flex;align-items:center;gap:12px;padding-bottom:11px}
.vv2 .vvslampjes{display:flex;gap:6px;flex:0 0 auto}
.vv2 .vvslampjes i{width:11px;height:11px;border-radius:50%;display:block}
.vv2 .vvslampjes i:nth-child(1){background:#F2675B}
.vv2 .vvslampjes i:nth-child(2){background:#F5BF4F}
.vv2 .vvslampjes i:nth-child(3){background:#61C454}

.vv2 .vvsadres{
  flex:1 1 auto;display:flex;align-items:center;gap:8px;min-width:0;
  background:#fff;border:1px solid var(--vv-rand);border-radius:999px;
  padding:6px 14px;font-size:14px;color:var(--vv-grijs);
}
.vv2 .vvsadres span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vv2 .vvsadres b{color:var(--vv-inkt);font-weight:600}

/* ---------- de tabbladen ---------- */
.vv2 .vvstabs{display:flex;gap:3px;overflow-x:auto;scrollbar-width:none;margin-bottom:-1px;padding-right:2px}
.vv2 .vvstabs::-webkit-scrollbar{display:none}

.vv2 .vvstab{
  flex:0 0 auto;display:flex;align-items:center;gap:8px;
  border:1px solid transparent;border-bottom:none;border-radius:8px 8px 0 0;
  background:transparent;color:var(--vv-grijs);
  font-family:inherit;font-size:13.5px;font-weight:500;
  padding:8px 12px;cursor:pointer;white-space:nowrap;
  transition:background .14s ease,color .14s ease;
}
.vv2 .vvstab .vvsletter{
  display:grid;place-items:center;width:19px;height:19px;border-radius:50%;flex:0 0 auto;
  background:var(--vv-rand);color:var(--vv-diep);
  font-family:Literata,Georgia,serif;font-size:12px;font-weight:600;
  transition:background .14s ease,color .14s ease;
}
.vv2 .vvstab[aria-selected="true"]{background:#fff;color:var(--vv-diep);font-weight:600;border-color:var(--vv-rand)}
.vv2 .vvstab[aria-selected="true"] .vvsletter{background:var(--vv-teal);color:#06302B}
.vv2 .vvstab:focus-visible{outline:2px solid var(--vv-tealdonker);outline-offset:-2px}

/* ---------- het scherm ----------
   De ingesloten pagina staat altijd zichtbaar en het voorbeeldbeeld ligt
   erbovenop. Zo zie je nooit een wit vlak als de overgang niet doorloopt,
   wat gebeurt zodra het venster even niet tekent. */
.vv2 .vvsscherm{position:relative;background:#fff;aspect-ratio:16/10;overflow:hidden}
.vv2 .vvspaneel{position:absolute;inset:0;visibility:hidden}
.vv2 .vvspaneel[data-actief="ja"]{visibility:visible}
.vv2 .vvslijst{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:1}
.vv2 .vvsposter{
  position:absolute;inset:0;width:100%;height:100%;z-index:2;
  object-fit:cover;object-position:top center;transition:opacity .28s ease;
}
.vv2 .vvspaneel.geladen .vvsposter{opacity:0;pointer-events:none}

/* ---------- onderschrift ---------- */
.vv2 .vvsonder{
  display:flex;flex-wrap:wrap;gap:14px 26px;align-items:flex-start;
  border-top:1px solid var(--vv-rand);padding:16px 20px;background:var(--vv-zand);
}
.vv2 .vvsonder-tekst{flex:1 1 22rem;min-width:0}
.vv2 .vvsonder-tekst h3{
  font-family:Literata,Georgia,serif;font-weight:600;color:var(--vv-diep);
  font-size:19px;line-height:1.2;margin:0 0 3px;
}
.vv2 .vvsonder-tekst p{margin:0;font-size:15.5px;color:var(--vv-grijs)}
.vv2 .vvseigen{display:block;margin-top:7px;font-size:14.5px;color:var(--vv-tealdonker);font-weight:500}
.vv2 .vvsonder-actie{flex:0 0 auto;display:flex;gap:14px;align-items:center;flex-wrap:wrap}

.vv2 .vvsknop{
  display:inline-block;background:var(--vv-diep);color:#fff;
  font-weight:600;font-size:15px;padding:11px 20px;border-radius:4px;
  text-decoration:none;transition:background .15s ease;
}
.vv2 .vvsmobiel{display:none;font-size:14.5px;color:var(--vv-grijs);margin-top:6px}

@media (hover:hover){
  .vv2 .vvstab:not([aria-selected="true"]):hover{background:rgba(255,255,255,.55);color:var(--vv-inkt)}
  .vv2 .vvsknop:hover{background:#08214A;color:#fff}
}

/* ---------- telefoon: daar tonen we het beeld, geen ingesloten site ---------- */
@media (max-width:820px){
  .vv2 .vvsscherm{aspect-ratio:4/3}
  .vv2 .vvslijst{display:none}
  .vv2 .vvspaneel.geladen .vvsposter{opacity:1}
  .vv2 .vvsadres{font-size:13px}
  .vv2 .vvsonder{padding:14px 16px}
  .vv2 .vvsmobiel{display:block}
  .vv2 .vvstab{padding:8px 12px;font-size:13px}
}

@media (prefers-reduced-motion:reduce){
  .vv2 .vvsposter,.vv2 .vvstab,.vv2 .vvsknop{transition:none}
}

/* ==========================================================================
   De korte versie op de homepage
   Daar staat het venster in een kolom van ongeveer 635 px, en dan passen zes
   tabbladen met hun naam erbij niet. De naam staat daar dus alleen in het
   onderschrift, dat toch al meewisselt. En er wordt geen pagina ingesloten,
   want de homepage staat op 99 mobiel en dat houden we zo.
   ========================================================================== */

.vv2 .vvskort .vvsnaam{position:absolute;left:-9999px}
.vv2 .vvskort .vvstab{gap:0;padding:8px 14px}
.vv2 .vvskort .vvsletter{width:22px;height:22px;font-size:13px}
.vv2 .vvskort .vvstabs{gap:2px}

.vv2 .vvskort .vvsonder{padding:14px 16px;gap:10px 20px}
.vv2 .vvskort .vvsonder-tekst h3{font-size:17px}
.vv2 .vvskort .vvsonder-tekst p{font-size:14.5px}

.vv2 .vvslink{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--vv-tealdonker);font-weight:600;font-size:14.5px;
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;
}
@media (hover:hover){
  .vv2 .vvslink:hover{text-decoration-thickness:2px;color:var(--vv-diep)}
}

/* in de korte versie blijft het beeld staan, er komt geen pagina overheen */
.vv2 .vvskort .vvspaneel.geladen .vvsposter{opacity:1}

@media (max-width:820px){
  .vv2 .vvskort .vvsonder{padding:12px 14px}
}

/* ==========================================================================
   Het technische regeltje: kleurcodes en lettertypen
   ========================================================================== */

/* Eerst een bug uit de weg. Een span met display:block negeert het
   hidden-kenmerk, want [hidden]{display:none} van de browser weegt even
   zwaar als onze eigen klasse en verliest dan van wie later staat.
   Daardoor stond de regel over de eigen huisstijl onder elke stijl. */
.vv2 .vvseigen[hidden],
.vv2 .vvstech[hidden]{display:none}

.vv2 .vvstech{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;
  margin-top:10px;padding-top:10px;border-top:1px solid var(--vv-rand);
}
.vv2 .vvstlabel{
  font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--vv-grijs);font-weight:600;
}
.vv2 .vvskleuren{display:flex;flex-wrap:wrap;gap:4px 10px}
.vv2 .vvskleur{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12.5px;font-variant-numeric:tabular-nums;color:var(--vv-inkt);
}
.vv2 .vvskleur::before{
  content:"";width:13px;height:13px;border-radius:2px;
  background:var(--c);border:1px solid rgba(31,42,68,.22);flex:none;
}
.vv2 .vvsletters{font-size:12.5px;color:var(--vv-inkt)}

@media (max-width:820px){
  .vv2 .vvstech{gap:5px 10px}
  .vv2 .vvskleur{font-size:12px}
}

/* ==========================================================================
   Het venster duidelijker afbakenen van de site erin
   Het chroom was warm crème en dat leek bij de warme stijlen gewoon door te
   lopen in de pagina. Een neutrale grijstint leest als browservenster en botst
   niet met een warme of een donkere site. Plus een steviger kader en een
   duidelijke scheiding boven het onderschrift.
   ========================================================================== */

.vv2 .vvsvenster{
  border:1px solid #C7C3BC;
  box-shadow:0 20px 44px -26px rgba(11,42,91,.42), 0 2px 6px -2px rgba(11,42,91,.12);
}

.vv2 .vvschroom{
  background:#E4E2DE;
  border-bottom:1px solid #C7C3BC;
}
.vv2 .vvsadres{border-color:#CFCBC4}

.vv2 .vvstab[aria-selected="true"]{border-color:#C7C3BC}

/* het scherm krijgt een eigen rand, zodat de pagina er echt in ligt */
.vv2 .vvsscherm{
  box-shadow:inset 0 0 0 1px rgba(20,20,20,.10);
}

.vv2 .vvsonder{
  background:#E4E2DE;
  border-top:1px solid #C7C3BC;
}
.vv2 .vvstech{border-top-color:#CBC7C0}

/* ==========================================================================
   Het hele blok klikbaar in de korte versie
   Een echte link over het scherm, geen klikafhandelaar op een div. Zo werken
   rechtsklikken, openen in een nieuw tabblad en de tabtoets gewoon.
   ========================================================================== */

.vv2 .vvsdek{
  position:absolute;inset:0;z-index:3;
  display:block;text-indent:-9999px;overflow:hidden;
}
.vv2 .vvsdek:focus-visible{
  outline:3px solid var(--vv-tealdonker);outline-offset:-3px;
}

/* de link onderaan is de zichtbare aankondiging van die klik */
.vv2 .vvslink{text-decoration-thickness:1.5px}

@media (hover:hover){
  /* zweven over het hele venster licht de link op, zodat het als één geheel leest */
  .vv2 .vvskort .vvsvenster:hover .vvslink{
    color:var(--vv-diep);text-decoration-thickness:2.5px;
  }
  .vv2 .vvskort .vvsvenster:hover{
    box-shadow:0 26px 52px -26px rgba(11,42,91,.5), 0 2px 6px -2px rgba(11,42,91,.14);
  }
  .vv2 .vvskort .vvsvenster{transition:box-shadow 180ms ease}
}
@media (prefers-reduced-motion:reduce){
  .vv2 .vvskort .vvsvenster{transition:none}
}

/* ==========================================================================
   Het venster is één knop
   De link ligt nu over het hele venster, dus ook over de balk bovenin en het
   onderschrift. Alleen de tabbladen worden erbovenuit getild, want die moeten
   hun eigen klik houden.
   ========================================================================== */

.vv2 .vvskort .vvsvenster{position:relative}
.vv2 .vvskort .vvsdek{inset:0;z-index:4}
.vv2 .vvskort .vvstabs{position:relative;z-index:5}

/* het onderschrift ligt onder de dekking, dus de losse link hoeft geen
   eigen aanwijzer meer te tonen. Hij blijft staan als zichtbaar label. */
.vv2 .vvskort .vvslink{pointer-events:none}

/* ==========================================================================
   22 september 2026 · de tabbladen als knoppen herkenbaar maken

   Drie dingen tegelijk opgelost. De zes namen vroegen 1070 px en kregen er
   994, waardoor F buiten beeld viel en de strook stil zijwaarts schoof.
   Het venster is daarom breder dan de tekstkolom. Verder was aan niets te
   zien dat je op A tot en met F kunt klikken, en stond nergens dat de eerste
   de huidige stijl is.
   ========================================================================== */

/* ---------- het venster breder dan de leeskolom ---------- */
@media (min-width:1180px){
  .vv2 .vvskiezer:not(.vvskort){
    width:min(76rem, calc(100vw - 4rem));
    margin-inline:calc((100% - min(76rem, 100vw - 4rem)) / 2);
  }
}

/* ---------- het eerste tabblad is de huidige stijl ---------- */
.vv2 .vvseigenmerk{
  display:inline-block;flex:0 0 auto;
  background:var(--vv-teal);color:#06302B;
  font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:2px 7px;border-radius:999px;line-height:1.5;
}
/* in de korte stand op de homepage staan alleen de letters, daar past hij niet */
.vv2 .vvskort .vvseigenmerk{position:absolute;left:-9999px}

/* ---------- zichtbaar maken dat er te klikken valt ---------- */
/* gewone lopende regel, geen flex. Als flex werden de vette instructie en de
   rest twee vakken naast elkaar, en zodra de tekst afbrak stond het vette deel
   op een andere regel dan waar het bij hoorde. */
.vv2 .vvshint{
  margin:0 0 10px;font-size:14px;line-height:1.5;color:var(--vv-grijs);
}
/* de instructie zelf mag nooit afbreken; in een smalle kolom stond er
   anders "Klik op A tot en met" op de ene regel en "F" op de volgende */
.vv2 .vvshint b{color:var(--vv-inkt);font-weight:600;white-space:nowrap}

@media (hover:hover){
  .vv2 .vvstab:not([aria-selected="true"]):hover{
    background:#fff;color:var(--vv-inkt);
    border-color:var(--vv-rand);
    transform:translateY(-1px);
  }
  .vv2 .vvstab:not([aria-selected="true"]):hover .vvsletter{
    background:var(--vv-teal);color:#06302B;
  }
}
.vv2 .vvstab{transition:background .14s ease,color .14s ease,transform .14s ease,border-color .14s ease}

/* een korte pulse op de letters, zodat het oog er een keer langs gaat. Twee
   slagen en dan stil; een doorlopende animatie wordt vanzelf irritant. */
@keyframes vvsklop{
  0%,100%{box-shadow:0 0 0 0 rgba(45,191,168,0)}
  50%    {box-shadow:0 0 0 5px rgba(45,191,168,.32)}
}
.vv2 .vvstab:not([aria-selected="true"]) .vvsletter{
  animation:vvsklop 1.5s ease-in-out .8s 2;
}
@media (prefers-reduced-motion: reduce){
  .vv2 .vvstab:not([aria-selected="true"]) .vvsletter{animation:none}
  .vv2 .vvstab{transition:none}
  @media (hover:hover){.vv2 .vvstab:not([aria-selected="true"]):hover{transform:none}}
}

/* ---------- en als de strook toch te smal is, laat dat dan zien ---------- */
.vv2 .vvschroom{position:relative}
.vv2 .vvstabs{scroll-behavior:smooth}
@media (max-width:1179px){
  .vv2 .vvschroom::after{
    content:"";position:absolute;right:0;bottom:0;width:38px;height:42px;
    background:linear-gradient(to right,rgba(232,228,220,0),rgba(232,228,220,.95));
    pointer-events:none;
  }
}

/* ---------- het venster volgt de verhouding van wat erin staat ----------
   De poster is 1400 bij 729 en het venster stond op 16:10. Met object-fit
   cover sneed dat de poster links en rechts af, precies door de kop heen.
   Waar een poster getoond wordt volgt het venster dus die verhouding; op de
   variantenpagina op een breed scherm staat er een echte pagina in een
   iframe, en die houdt 16:10 omdat je daar juist hoogte wilt zien. */
.vv2 .vvskort .vvsscherm{aspect-ratio:1400/729}

@media (max-width:820px){
  /* onder deze breedte sluiten we geen pagina in, dus overal de poster */
  .vv2 .vvsscherm{aspect-ratio:1400/729}
}