/* Lettertypes zelf gehost (09-08-2026).
   Waarom: de site laadde ze bij Google, en dan ziet Google het IP-adres van elke
   bezoeker -- dat stond ook zo eerlijk in de privacyverklaring. Bovendien is het
   een extra verbinding naar een andere server voordat er tekst op het scherm kan.
   `swap` zorgt dat tekst meteen leesbaar is in een vervangend lettertype. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/Inter-400.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/Inter-500.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/Inter-600.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/Inter-700.woff2) format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/SpaceGrotesk-500.woff2) format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/SpaceGrotesk-700.woff2) format('woff2')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/Outfit-500.woff2) format('woff2')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/Outfit-700.woff2) format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/Montserrat-500.woff2) format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/Montserrat-700.woff2) format('woff2')}

/* DCSS Verhuur — vita-structuur, LICHTE versie
   ---------------------------------------------------------------------------
   Feedback: "maak wit de primaire kleur, zwart en rood secundair."
   Wit draagt de hele site. Zwart nog op twee plekken waar het rust geeft (de
   werkwijze-strook en de voet), rood alleen voor acties en accenten.

   Wat van vita blijft: het ritme komt van SCHAAL en HAARLIJNEN, niet van om en
   om een andere bandkleur. Daarom staat bijna alles op wit met dunne lijnen
   ertussen — dat was het punt "te veel template-blokken".

   Rood in drie varianten: één rood haalt de contrasteis niet in alle rollen
   (les uit de toegankelijkheidsronde).                                        */

:root{
  --wit:#ffffff;            /* primair */
  --papier:#f1efe9;         /* 18-08: was #f7f6f3 = grijswaarde 246, negen punten van wit
                               en daarmee onzichtbaar als vlak. Nu 239, leest wel als eigen vlak. */
  --papier-2:#efeee9;
  --grond:#eeebe4;          /* 18-08: sectiegrond. De site was bimodaal: 55% wit + 33% bijna-zwart,
                               en maar 4,8% in de lichte middenband waar een licht ontwerp zijn
                               structuur vandaan haalt. Dit is die ontbrekende laag. */
  --grijs-grond:#626269;    /* --grijs (#6b6b74) zakt op --grond naar 4,43:1 en haalt de norm niet.
                               Deze haalt 5,08:1 op --grond en 6,05:1 op wit. */
  --inkt:#0b0b0d;           /* secundair: zwart */
  --inkt-zacht:#3d3d44;
  --grijs:#6b6b74;          /* 5,9:1 op wit */
  --lijn:#e3e1db;
  --lijn-sterk:#c9c6bd;     /* randen van bedieningselementen: 3:1 */
  --rood:#ec1c24;           /* secundair: accent */
  --rood-btn:#d40f17;       /* knopvlak met witte tekst: 5,4:1 */
  --rood-tx:#c00d14;        /* rode tekst op wit: 5,1:1 */
  --rood-licht:#ff6b70;     /* rode tekst op zwart: 5,3:1 */
  /* 17-08-2026: Space Grotesk ("robotachtig", Dhiraj) -> Outfit -> Montserrat.
     Montserrat is de enige gratis geometrisch-ronde letter die in onze meting van
     52 grote bedrijfssites echt werd aangetroffen (Procter & Gamble). Keuze Lenny. */
  --disp:"Montserrat",system-ui,sans-serif;
  --sans:"Inter",system-ui,sans-serif;
  --pad:clamp(20px,5vw,64px);
  --r:12px;
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--wit);color:var(--inkt);font-family:var(--sans);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--disp);font-weight:700;letter-spacing:-.02em;line-height:1.04;margin:0}
ul{list-style:none;margin:0;padding:0}
button{font:inherit;cursor:pointer}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--inkt);color:#fff;padding:12px 18px;z-index:90}
.skip-link:focus{left:0}
:focus-visible{outline:3px solid var(--rood-btn);outline-offset:3px}
.vt-concept{margin:0;padding:9px var(--pad);background:var(--papier-2);
  border-bottom:1px solid var(--lijn);color:var(--grijs);font-size:13px;text-align:center}

/* ── kop ──────────────────────────────────────────────────────────────────── */
.vt-kop{position:sticky;top:0;z-index:60;display:grid;
  grid-template-columns:auto 1fr auto auto;align-items:stretch;
  /* 06-08: was rgba(...,.96) — die 4% liet alles wat eronder wegscrolde als
     grijze spookletters door de balk schijnen. Dekkend, geen doorschijn. */
  background:var(--wit);border-bottom:1px solid var(--lijn)}
.vt-merk{display:flex;align-items:center;padding:14px var(--pad);border-right:1px solid var(--lijn)}
/* 07-08: het volledige embleem staat nu in de kop. Iets breder dan het oude
   woordmerk, want dit merk heeft een cirkel eromheen en wordt anders een
   vlekje. Hoger dan dit kan niet: de kopbalk is 88 px. */
.vt-merk img{width:118px;height:auto}
.vt-nav{display:flex;align-items:center;justify-content:flex-end;gap:2px;padding:0 8px}
.vt-navlink{display:inline-flex;align-items:center;gap:6px;min-height:46px;padding:10px 15px;
  border:0;background:transparent;color:var(--inkt-zacht);
  font-family:var(--disp);font-weight:500;font-size:15px;border-radius:8px;
  transition:background .16s ease,color .16s ease}
.vt-navlink:hover{background:var(--papier);color:var(--inkt)}
.vt-navlink[aria-current]{color:var(--rood-tx)}
.vt-mand{display:inline-flex;align-items:center;gap:9px;padding:0 clamp(16px,2.6vw,26px);
  border-left:1px solid var(--lijn);background:var(--inkt);color:#fff;
  font-family:var(--disp);font-weight:700;font-size:15px;
  transition:background .18s ease}
.vt-mand:hover{background:var(--rood-btn)}
.vt-teller{display:inline-flex;align-items:center;justify-content:center;min-width:23px;height:23px;
  padding:0 6px;border-radius:999px;background:var(--rood);color:#fff;font-size:12.5px}
.vt-burger{display:none;background:transparent;border:0;padding:14px var(--pad)}
.vt-burger span:not(.sr-only){display:block;width:22px;height:2px;background:var(--inkt);margin:4px 0}

.vt-menu{position:relative}
.vt-paneel{
  /* rechts uitlijnen: de knoppen staan rechts in de balk, dus vanaf links liep
     het brede paneel 106px buiten beeld (een absoluut element telt mee in
     scrollWidth, ook als het verborgen is). */
  position:absolute;top:calc(100% + 1px);right:0;left:auto;width:min(420px,90vw);
  background:var(--wit);border:1px solid var(--lijn);border-radius:14px;padding:12px;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
  box-shadow:0 24px 60px rgba(11,11,13,.14)}
.vt-paneel.breed{width:min(660px,92vw)}
.vt-menu.is-open .vt-paneel{opacity:1;visibility:visible;transform:none}
.vt-paneellijst{display:grid;gap:2px}
.vt-paneellijst.twee{grid-template-columns:1fr 1fr}
.vt-paneellijst a{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:10px;
  transition:background .16s ease}
.vt-paneellijst a:hover{background:var(--papier)}
.vt-paneellijst svg{flex:none;color:var(--rood-tx)}
.vt-paneellijst strong{display:block;font-family:var(--disp);font-size:15px}
.vt-paneellijst em{font-style:normal;font-size:12.5px;color:var(--grijs)}
.vt-paneelvoet{display:block;margin-top:8px;padding:12px;border-top:1px solid var(--lijn);
  color:var(--rood-tx);font-family:var(--disp);font-weight:700;font-size:14px}
.vt-paneelvoet:hover{text-decoration:underline}

/* ── kruimelpad + paginakop ───────────────────────────────────────────────── */
.vt-kruimel{display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  margin-bottom:22px;font-size:13.5px;color:var(--grijs)}
.vt-kruimel a:hover{color:var(--inkt);text-decoration:underline}
.vt-kruimelsep{color:var(--grijs)}
.vt-paginakop{padding:clamp(32px,5vw,60px) var(--pad) clamp(28px,4vw,46px);
  border-bottom:1px solid var(--lijn)}
.vt-paginakop h1{font-size:clamp(34px,6vw,88px)}
.vt-paginakop.smal .vt-lead{max-width:56ch}
.vt-lead{max-width:64ch;margin:18px 0 0;font-size:clamp(16px,1.5vw,18px);color:var(--grijs)}
.vt-label{display:flex;align-items:center;gap:8px;margin:0 0 16px;
  color:var(--grijs);font-family:var(--disp);font-weight:500;font-size:14px}
.vt-label svg{color:var(--rood-tx)}

/* ── hero ─────────────────────────────────────────────────────────────────── */
.vt-hero{position:relative;min-height:min(72vh,620px);display:flex;align-items:flex-end;
  background:var(--inkt);overflow:hidden}
.vt-herofoto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.vt-hero::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(11,11,13,.32) 0%,rgba(11,11,13,.72) 100%)}
.vt-heroinhoud{position:relative;z-index:2;padding:clamp(40px,8vw,90px) var(--pad);color:#fff}
.vt-op-foto{color:rgba(255,255,255,.86)}
.vt-op-foto svg{color:var(--rood-licht)}
.vt-hero h1{font-size:clamp(42px,7.6vw,96px);color:#fff}
.vt-herotekst{max-width:46ch;margin:20px 0 0;font-size:clamp(16px,1.6vw,19px);color:rgba(255,255,255,.88)}
.vt-herotekst strong{color:#fff}
.vt-heroknoppen{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}

/* ── pill-knoppen ─────────────────────────────────────────────────────────── */
.vt-pill{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:50px;padding:13px 24px;border-radius:999px;
  border:1px solid var(--lijn-sterk);background:var(--wit);color:var(--inkt);
  font-family:var(--disp);font-weight:700;font-size:15px;
  transition:background .18s ease,border-color .18s ease,color .18s ease}
.vt-pill:hover{background:var(--papier);border-color:var(--inkt)}
.vt-pill-vol{background:var(--rood-btn);border-color:var(--rood-btn);color:#fff}
.vt-pill-vol:hover{background:#a80a11;border-color:#a80a11;color:#fff}
.vt-pill.groot{min-height:56px;padding:16px 30px;font-size:17px}
.vt-pill.is-toegevoegd{background:#166534;border-color:#166534;color:#fff}

/* ── keuze-ingang op de home ──────────────────────────────────────────────── */
.vt-keuze{padding:clamp(44px,7vw,86px) var(--pad);border-bottom:1px solid var(--lijn)}
.vt-keuzerij{display:grid;grid-template-columns:1fr 1fr;gap:0;
  border:1px solid var(--lijn);border-radius:var(--r);overflow:hidden}
.vt-keuzekaart{display:block;padding:clamp(24px,3.4vw,42px);border-right:1px solid var(--lijn);
  transition:background .2s ease}
.vt-keuzekaart:last-child{border-right:0}
.vt-keuzekaart:hover{background:var(--papier)}
.vt-keuzenr{display:block;font-family:var(--disp);font-weight:700;font-size:14px;color:var(--rood-tx)}
.vt-keuzekaart h2{margin:10px 0 0;font-size:clamp(24px,3vw,38px)}
.vt-keuzekaart p{margin:12px 0 0;color:var(--grijs);max-width:44ch}
.vt-keuzelink{display:inline-flex;align-items:center;gap:8px;margin-top:20px;
  font-family:var(--disp);font-weight:700;font-size:15px;color:var(--rood-tx)}
.vt-keuzekaart:hover .vt-keuzelink{text-decoration:underline}

/* ── statement ────────────────────────────────────────────────────────────── */
.vt-statement{display:grid;grid-template-columns:minmax(200px,30%) minmax(0,1fr);gap:24px;  /* 200px vast was te smal: "Staat uw event er niet bij?" brak in vijf regels */
  padding:clamp(56px,9vw,120px) var(--pad);border-bottom:1px solid var(--lijn)}
.vt-statement h2{font-size:clamp(28px,4.4vw,68px);max-width:22ch;line-height:1.1}
.vt-dim{color:var(--grijs)}

/* ── blokken + sectiekop ──────────────────────────────────────────────────── */
.vt-blok{border-bottom:1px solid var(--lijn)}
.vt-sectiekop{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:24px;
  align-items:end;padding:clamp(48px,7vw,96px) var(--pad) clamp(24px,3.4vw,40px)}
.vt-sectiekop h2{font-size:clamp(30px,5vw,78px)}
.vt-sectiekop p{margin:0;color:var(--grijs)}
.vt-meer{padding:26px var(--pad) clamp(40px,5vw,64px)}

/* ── setkaarten ───────────────────────────────────────────────────────────────
   Opmaak naar het model van powersounds.nl (keuze Lenny, 04-08): uitstalfoto
   groot bovenaan, dan de naam, één regel uitleg, de prijs en een knop over de
   volle breedte. Drie op een rij, want smallere kaarten laten meer sets in één
   blik zien — en op een verhuurcatalogus kiest men op het beeld.

   De kaart is een FLEXKOLOM met de acties op `margin-top:auto`, zodat de
   knoppen van alle kaarten in een rij op dezelfde hoogte staan, ook als de ene
   uitleg twee regels langer is dan de andere.                                */
.vt-setgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;
  padding:26px var(--pad) clamp(38px,5vw,60px);border-top:1px solid var(--lijn)}
.vt-set{display:flex;flex-direction:column;background:var(--wit);
  border:1px solid var(--lijn);border-radius:var(--r);overflow:hidden;
  scroll-margin-top:110px;transition:box-shadow .2s ease,border-color .2s ease}
.vt-set:hover{border-color:var(--lijn-sterk);box-shadow:0 12px 28px rgba(11,11,13,.09)}
/* Draaiende gloed in de tredekleur (07-08-2026, keuze Lenny uit het gloed-lab).
   Nagebouwd uit een aangeleverd React-component; bewust ZONDER de `filter: blur()`
   en de per-frame hertekende gradient uit het origineel, want dat zijn de twee
   dingen die het scrollen stroef maken. De rand is een conische gradient waarvan
   alleen de HOEK animeert: dat is een geregistreerde eigenschap, dus de browser
   kan die zelf interpoleren. Draait alleen bij aanwijzen of focus -- tijdens het
   scrollen staat alles stil.
   De kleuren komen uit --trede / --trede2, die per kaart al op de trede staan:
   Go grijs, Plus blauw, Pro rood, Premium groen, Ultra paars. */
@property --gl-hoek{syntax:'<angle>';initial-value:0deg;inherits:false}
.vt-set-tier{position:relative;isolation:isolate;border-color:transparent;
  --gl-licht:color-mix(in srgb, var(--trede) 45%, #ffffff);
  --gl-diep:color-mix(in srgb, var(--trede) 72%, #0b0b0d);
  background:
  linear-gradient(var(--wit),var(--wit)) padding-box,
  conic-gradient(from var(--gl-hoek),
    var(--trede) 0%, var(--gl-licht) 18%, var(--trede2,var(--trede)) 38%,
    var(--gl-diep) 58%, var(--gl-licht) 78%, var(--trede) 100%) border-box;
  border:2px solid transparent;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .2s ease}
.vt-set-tier:hover,.vt-set-tier:focus-within{animation:vt-gloed 4.5s linear infinite}
@keyframes vt-gloed{to{--gl-hoek:360deg}}
@media(prefers-reduced-motion:reduce){
  .vt-set-tier:hover,.vt-set-tier:focus-within{animation:none}}
.vt-set-tier::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(112deg,transparent 0%,transparent 38%,rgba(255,255,255,.55) 48%,
             transparent 60%,transparent 100%);
  opacity:0;transform:translateX(-125%)}
.vt-set-tier::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px var(--trede);opacity:0;transition:opacity .45s var(--ease)}
.vt-set-tier:hover{border-color:transparent;transform:translateY(-4px);
  box-shadow:0 0 0 1px var(--trede),0 18px 42px -18px var(--trede)}
.vt-set-tier:hover::before,.vt-set-tier:focus-within::before{
  opacity:.38;animation:vt-tier-shine .95s var(--ease) both}
.vt-set-tier:hover::after{opacity:.45}
.vt-tredelabel{position:absolute;z-index:3;top:12px;right:12px;padding:4px 11px;border-radius:999px;
  background:var(--trede);color:#fff;font-family:var(--disp);font-weight:700;font-size:11.5px;
  letter-spacing:.01em;line-height:1.4;
  box-shadow:0 0 0 3px rgba(255,255,255,.72),0 10px 24px -15px var(--trede);
  animation:vt-tier-label 4.8s ease-in-out infinite}
.vt-set-tier:hover .vt-tredelabel,.vt-set-tier:focus-within .vt-tredelabel{
  animation-duration:2.6s}
@keyframes vt-tier-shine{from{transform:translateX(-125%)}to{transform:translateX(125%)}}
@keyframes vt-tier-label{
  0%,100%{box-shadow:0 0 0 3px rgba(255,255,255,.72),0 10px 24px -15px var(--trede)}
  50%{box-shadow:0 0 0 3px rgba(255,255,255,.86),0 14px 30px -10px var(--trede)}
}
.vt-set-tier .vt-setfoto{border-bottom-color:rgba(0,0,0,.06)}
.vt-setfoto{display:block;background:var(--wit);border-bottom:1px solid var(--lijn);padding:14px}
/* De verhouding staat op de IMG, niet op de <a>. In een kolom-flexbox bepaalt
   het kind de hoogte van een auto-hoog item, dus met aspect-ratio op de <a>
   werden de bijna-vierkante uitstalfoto's (822x850) 120 px hoger dan de brede.
   contain, niet cover: een uitstalfoto is een rij onderdelen naast elkaar —
   een cover-uitsnede zou de buitenste onderdelen wegsnijden. */
.vt-setfoto img{width:100%;height:auto;aspect-ratio:4/3;object-fit:contain}
.vt-settekst{display:flex;flex-direction:column;flex:1;padding:18px 20px 20px}
.vt-setlabel{margin:0;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--grijs);font-family:var(--disp);font-weight:500}
.vt-set h3{margin:9px 0 0;font-size:clamp(21px,1.7vw,26px)}
.vt-set h3 a:hover{color:var(--rood-tx)}
.vt-setwie{margin:7px 0 0;color:var(--grijs);font-size:14px}
.vt-setkort{margin:12px 0 0;color:var(--inkt-zacht);font-size:15px}
.vt-setprijs{margin:16px 0 0;font-size:15px;color:var(--grijs)}
.vt-setprijs strong{color:var(--inkt);font-family:var(--disp);font-size:24px;font-weight:700}
.vt-setprijs span{display:block;font-size:13px}
.vt-setnoot{margin:6px 0 0;color:var(--grijs);font-size:13px}
.vt-setacties{margin-top:auto;padding-top:18px}
.vt-setknop{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  min-height:48px;padding:12px 18px;border:1px solid var(--rood-btn);border-radius:999px;
  background:var(--rood-btn);color:#fff;font-family:var(--disp);font-weight:600;font-size:15px;
  text-align:center;transition:background .15s ease,border-color .15s ease}
.vt-setknop:hover{background:#b60c13;border-color:#b60c13}
.vt-setmeer{display:block;margin-top:10px;padding:6px 0;text-align:center;font-size:14px;
  color:var(--inkt-zacht);text-decoration:underline;text-underline-offset:3px}
.vt-setmeer:hover{color:var(--rood-tx)}
.vt-set.opmaat{border-style:dashed;border-color:var(--lijn-sterk);background:var(--papier)}
.vt-set.opmaat .vt-setknop{background:var(--wit);border-color:var(--lijn-sterk);color:var(--inkt)}
.vt-set.opmaat .vt-setknop:hover{background:var(--inkt);border-color:var(--inkt);color:#fff}
.vt-set.opmaat .vt-setknop svg{color:currentColor}
@media (max-width:1180px){.vt-setgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ── setreeksen (overzicht) ───────────────────────────────────────────────── */
/* .vt-vanaf hoorde bij de oude setkaart en wordt nu alleen nog gebruikt op de
   reeksenkaarten van /sets/. Blijft daarom hier staan, niet hierboven.        */
.vt-vanaf{margin:10px 0 0;color:var(--grijs);font-size:15px}
.vt-vanaf strong{color:var(--inkt);font-family:var(--disp);font-size:23px}
.vt-famgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;
  padding:26px var(--pad) clamp(38px,5vw,58px);border-top:1px solid var(--lijn)}
.vt-fam{display:flex;flex-direction:column;background:var(--wit);border:1px solid var(--lijn);
  border-radius:var(--r);overflow:hidden;padding:0}
.vt-famfoto{display:block;background:var(--papier);border-bottom:1px solid var(--lijn);
  padding:14px}
.vt-famfoto img{width:100%;height:auto;aspect-ratio:16/10;object-fit:contain}
.vt-faminfo{display:flex;flex-direction:column;flex:1;padding:20px 22px 22px}
.vt-faminfo .vt-pill-vol{align-self:flex-start;margin-top:auto}
.vt-famlijst{margin-top:auto}
.vt-faminfo h3{font-size:clamp(21px,2.4vw,30px)}
.vt-faminfo h3 a:hover{color:var(--rood-tx)}
.vt-faminfo>p{margin:10px 0 0;color:var(--grijs)}
.vt-famlijst{margin:16px 0 20px 0;border-top:1px solid var(--lijn)}
.vt-famlijst li{border-bottom:1px solid var(--lijn)}
.vt-famlijst a{display:flex;justify-content:space-between;gap:12px;padding:9px 0;font-size:14px}
.vt-famlijst a:hover{color:var(--rood-tx)}
.vt-famlijst span{color:var(--grijs)}

/* ── gastkiezer ───────────────────────────────────────────────────────────── */
.vt-gastkiezer{margin-top:26px}
.vt-gastkop{margin:0 0 10px;font-family:var(--disp);font-weight:700;font-size:15px}
.vt-gastopties{display:flex;flex-wrap:wrap;gap:8px}
.vt-gast{min-height:44px;padding:10px 17px;border-radius:999px;border:1px solid var(--lijn-sterk);
  background:var(--wit);color:var(--inkt);font-family:var(--disp);font-weight:700;font-size:14px;
  transition:background .16s ease,border-color .16s ease,color .16s ease}
.vt-gast:hover{border-color:var(--inkt)}
.vt-gast.is-aan{background:var(--inkt);border-color:var(--inkt);color:#fff}
.vt-gastuitslag{margin:12px 0 0;font-size:15px;color:var(--rood-tx);font-weight:600;min-height:22px}

/* ── categorieblok op de home ─────────────────────────────────────────────── */
.vt-catgrid{display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--lijn);border-left:1px solid var(--lijn)}
.vt-cat{display:flex;flex-direction:column;gap:14px;padding:20px;
  border-right:1px solid var(--lijn);border-bottom:1px solid var(--lijn);
  transition:background .2s ease}
.vt-cat:hover{background:var(--papier)}
.vt-catfoto{background:var(--wit);border:1px solid var(--lijn);border-radius:10px;
  overflow:hidden;aspect-ratio:4/3;padding:8px}
.vt-catfoto img{width:100%;height:100%;object-fit:contain}
.vt-catkop{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.vt-catkop span{font-family:var(--disp);font-weight:700;font-size:16px}
.vt-catkop em{font-style:normal;font-size:13px;color:var(--grijs)}

/* ── werkwijze: het enige donkere blok ────────────────────────────────────── */
.vt-werkwijze{position:relative;color:#fff;background:var(--inkt);border-bottom:1px solid var(--lijn)}
.vt-wwfoto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.vt-werkwijze::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(11,11,13,.72) 0%,rgba(11,11,13,.94) 100%)}
.vt-wwboven{position:relative;z-index:2;padding:clamp(48px,8vw,104px) var(--pad) clamp(34px,6vw,74px)}
.vt-wwboven h2{font-size:clamp(30px,5vw,78px);color:#fff}
.vt-plus{margin-top:16px}
.vt-plus li{font-family:var(--disp);font-weight:700;font-size:clamp(20px,3vw,38px);line-height:1.26}
.vt-plus span{color:var(--rood-licht);margin-right:8px}
.vt-wwstrip{position:relative;z-index:2;display:grid;
  grid-template-columns:minmax(0,1.4fr) repeat(4,minmax(0,1fr));
  border-top:1px solid rgba(255,255,255,.18)}
.vt-wwtekst{margin:0;padding:24px var(--pad);color:rgba(255,255,255,.82);font-size:15px;
  border-right:1px solid rgba(255,255,255,.18)}
.vt-wwstap{padding:24px 18px;border-right:1px solid rgba(255,255,255,.18);
  display:flex;flex-direction:column}
.vt-wwstap:last-child{border-right:0}
.vt-wwnr{margin:0;font-family:var(--disp);font-weight:700;font-size:clamp(26px,3.2vw,42px);line-height:1}
.vt-wwlabel{margin:2px 0 0;font-size:12px;color:rgba(255,255,255,.62)}
.vt-wwtxt{margin-top:auto;padding-top:32px}
.vt-wwtxt strong{display:block;font-family:var(--disp);font-size:16px}
.vt-wwtxt span{font-size:13px;color:rgba(255,255,255,.7)}

/* ── catalogus ────────────────────────────────────────────────────────────── */
.vt-catlayout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:0}
.vt-zijbalk{position:sticky;top:92px;align-self:start;padding:26px var(--pad);
  border-right:1px solid var(--lijn)}
.vt-zijkop{margin:0 0 12px;font-family:var(--disp);font-weight:700;font-size:17px}
.vt-zijlijst{display:grid;gap:1px}
.vt-catlink{display:flex;align-items:center;justify-content:space-between;gap:10px;
  min-height:44px;padding:10px 12px;border-radius:9px;
  font-family:var(--disp);font-weight:500;font-size:14.5px;
  transition:background .16s ease,color .16s ease}
.vt-catlink:hover{background:var(--papier)}
.vt-catlink span{flex:none;min-width:24px;padding:1px 6px;border-radius:999px;
  background:var(--papier-2);color:var(--grijs);font-size:12px;text-align:center}
.vt-catlink.is-aan{background:var(--inkt);color:#fff;font-weight:700}
.vt-catlink.is-aan span{background:rgba(255,255,255,.2);color:#fff}
.vt-zijnoot{margin:18px 0 0;padding-top:14px;border-top:1px solid var(--lijn);
  font-size:13px;color:var(--grijs);line-height:1.5}
.vt-zijnoot a{color:var(--rood-tx);text-decoration:underline}
.vt-zoekrij{display:flex;flex-wrap:wrap;gap:14px;align-items:center;padding:26px var(--pad) 14px}
.vt-zoekrij input{flex:1 1 280px;max-width:420px;min-height:48px;padding:12px 18px;
  border-radius:999px;border:1px solid var(--lijn-sterk);background:var(--wit);color:var(--inkt);
  font-size:16px}   /* 16px: anders zoomt iOS in bij focus */
.vt-zoekrij input::placeholder{color:var(--grijs)}
.vt-telling{margin:0;color:var(--grijs);font-size:14px}
.vt-noot{margin:0 var(--pad) 22px;padding:13px 16px;border-left:3px solid var(--rood);
  background:var(--papier);border-radius:0 8px 8px 0;font-size:14px;color:var(--grijs);max-width:70ch}
.vt-noot strong{color:var(--inkt)}
.vt-prodgrid{display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--lijn);border-left:1px solid var(--lijn)}
.vt-prod{display:flex;flex-direction:column;padding:18px;
  border-right:1px solid var(--lijn);border-bottom:1px solid var(--lijn);
  transition:background .2s ease}
.vt-prod:hover{background:var(--papier)}
.vt-prodfoto{background:var(--wit);border:1px solid var(--lijn);border-radius:10px;
  overflow:hidden;aspect-ratio:4/3;margin-bottom:14px;padding:8px}
.vt-prodfoto img{width:100%;height:100%;object-fit:contain}
.vt-prodcat{margin:0;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--grijs)}
.vt-prod h3{margin:6px 0 0;font-size:17px;line-height:1.24}
.vt-prodsub{margin:5px 0 0;font-size:13.5px;color:var(--grijs)}
.vt-prodprijs{margin:12px 0 0;font-size:14px;color:var(--grijs)}
.vt-prodprijs strong{font-family:var(--disp);font-size:22px;color:var(--inkt)}
.vt-prodprijs span{display:block;font-size:12px}
.vt-prodknop{display:inline-flex;align-items:center;justify-content:space-between;gap:8px;
  margin-top:auto;min-height:46px;padding:12px 16px;border-radius:999px;
  border:1px solid var(--lijn-sterk);background:var(--wit);color:var(--inkt);
  font-family:var(--disp);font-weight:700;font-size:14px;
  transition:background .18s ease,border-color .18s ease,color .18s ease}
.vt-prodknop:hover{background:var(--rood-btn);border-color:var(--rood-btn);color:#fff}
.vt-prodknop.is-toegevoegd{background:#166534;border-color:#166534;color:#fff}
.vt-geen{padding:40px var(--pad);color:var(--grijs);text-align:center}
.vt-geen a{color:var(--rood-tx);text-decoration:underline}

/* ── aanbod-overzicht: donkere horizontale kaarten ───────────────────────── */
.vt-air{background:var(--wit);color:var(--inkt);padding:clamp(30px,4vw,54px) 0 clamp(44px,6vw,78px);
  border-top:1px solid var(--lijn)}
.vt-airintro{padding:0 var(--pad) clamp(20px,3vw,32px)}
.vt-airintro .vt-label{display:inline-flex;width:auto;color:var(--rood-tx);background:transparent;padding:0}
.vt-airintro h2{margin:10px 0 0;max-width:780px;font-size:clamp(28px,4vw,48px);line-height:1.05}
.vt-aircard{position:relative;display:flex;flex-direction:column;min-height:400px;overflow:hidden;
  background:var(--wit);border:1px solid var(--lijn);border-radius:16px;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .25s ease}
.vt-aircard:hover,.vt-aircard:focus-within{transform:translateY(-4px);border-color:var(--lijn-sterk);
  box-shadow:0 18px 40px rgba(11,11,13,.10)}
.vt-airmedia{position:relative;display:block;height:208px;background:var(--wit);overflow:hidden;
  border-bottom:1px solid var(--lijn)}
.vt-airmedia img{width:100%;height:100%;object-fit:contain;padding:14px;
  transition:transform .5s cubic-bezier(.2,.8,.3,1)}
.vt-aircard:hover .vt-airmedia img,.vt-aircard:focus-within .vt-airmedia img{transform:scale(1.045)}
/* Een productfoto die zelf een FOTO is (de studiovloer met horizon, of een eigen
   opname op locatie) hoort zich te gedragen als een setfoto en niet als een
   uitgeknipt persbeeld: geen binnenmarge, vullend in het vak. Precies wat
   `.vt-setfoto img` verderop al doet (padding:0 + object-fit:cover).
   16-09-2026, Lenny: "ik wil de weergave de afbeeldingen hetzelfde als bij de
   sets met die achtergond".
   De klasse wordt niet met de hand gezet maar door vita.py GEMETEN aan de hoeken
   van de foto, zodat hij vanzelf meeloopt zodra de overige 50 omgezet worden.
   De rand blijft staan: die hoort bij het raster, niet bij de foto.
   ⚠️ Dit blok staat hier en niet bij `.vt-prodfoto` hierboven omdat
   `.vt-airmedia img` even zwaar weegt: stond het eerder, dan won bij de
   aircards de oude regel gewoon op volgorde. */
.vt-prodfoto--vol{padding:0}
.vt-prodfoto--vol img{object-fit:cover}
.vt-airmedia--vol img{padding:0;object-fit:cover}

.vt-airadd{position:absolute;top:12px;right:12px;z-index:4;display:inline-flex;align-items:center;
  justify-content:center;border-radius:999px;background:var(--wit);
  border:1px solid var(--lijn-sterk);color:var(--inkt);
  transition:background .18s ease,transform .18s ease,color .18s ease}
.vt-airadd:hover{background:var(--inkt);color:#fff;transform:scale(1.04)}
.vt-airadd.is-toegevoegd{width:auto;min-width:112px;padding:0 14px;background:#12795a;color:#fff;
  border-color:#12795a}
.vt-airbody{display:flex;flex-direction:column;flex:1;padding:16px 18px 16px}
.vt-airbody p{margin:0;color:var(--grijs);font-size:13.5px}
.vt-airbody h3{margin:7px 0 0;color:var(--inkt);font-size:19px;line-height:1.2}
.vt-airbody h3 a{color:inherit}
.vt-airbody>span{display:block;margin-top:5px;color:var(--grijs);font-size:13.5px;line-height:1.35}
.vt-airfoot{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-top:auto;padding-top:16px}
.vt-airfoot em{font-style:normal;color:var(--grijs);font-size:12.5px}
.vt-airfoot strong{font-family:var(--disp);font-size:17px;color:var(--inkt);white-space:nowrap}
@media(max-width:780px){
  .vt-aircard{min-height:376px;border-radius:14px}
  .vt-airmedia{height:186px}
}

/* ── twee-koloms infokaarten ──────────────────────────────────────────────── */
.vt-tweekolom{display:grid;grid-template-columns:1fr 1fr;gap:18px;
  padding:0 var(--pad) clamp(48px,6vw,80px)}
.vt-infokaart{padding:24px;border:1px solid var(--lijn);border-radius:var(--r);background:var(--papier)}
.vt-infokaart h3{font-size:20px;margin-bottom:14px}
.vt-lijst li{position:relative;padding-left:26px;padding-block:5px;font-size:15px;color:var(--inkt-zacht)}
.vt-lijst.ja li::before{content:"";position:absolute;left:4px;top:12px;width:10px;height:6px;
  border-left:2px solid var(--rood-tx);border-bottom:2px solid var(--rood-tx);transform:rotate(-45deg)}
.vt-lijst.nee li::before{content:"";position:absolute;left:2px;top:15px;width:12px;height:2px;
  background:var(--lijn-sterk)}
.vt-klein{margin:14px 0 0;font-size:13.5px;color:var(--grijs)}

/* ── offerte ──────────────────────────────────────────────────────────────── */
.vt-offlayout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:0;align-items:start}
.vt-offlayout>div:first-child{padding:clamp(28px,4vw,48px) var(--pad);border-right:1px solid var(--lijn)}
.vt-stapbalk{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0 0 26px}
.vt-bol{display:flex;align-items:center;gap:9px;padding-top:13px;border-top:3px solid var(--lijn);
  font-family:var(--disp);font-weight:700;font-size:14px;color:var(--grijs)}
.vt-bol.is-actief,.vt-bol.is-klaar{border-top-color:var(--rood-btn);color:var(--inkt)}
.vt-bol>span{display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:25px;height:25px;border-radius:999px;background:var(--papier-2);font-size:13px}
.vt-bol.is-actief>span{background:var(--rood-btn);color:#fff}
.vt-bol.is-klaar>span{background:var(--inkt);color:#fff}
.vt-form{display:grid;gap:0}
.vt-stap{display:grid;gap:18px}
.vt-stap h2{font-size:24px}
.vt-status{margin:0 0 16px;padding:13px 16px;border-radius:8px;border:1px solid var(--lijn);
  background:var(--papier);font-size:15px}
.vt-status.err{border-color:var(--rood-btn);background:#fdeced;color:var(--rood-tx)}
.vt-status.ok{border-color:#166534;background:#eefaf1}
.vt-veldrij{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.vt-veld{display:grid;gap:6px;margin:0;border:0;padding:0}
.vt-veld label,.vt-veld legend{font-family:var(--disp);font-weight:700;font-size:14px;padding:0}
.vt-veld input,.vt-veld textarea,.vt-veld select{width:100%;min-height:48px;font-size:16px;
  padding:12px 14px;border:1px solid var(--lijn-sterk);border-radius:8px;
  background:var(--wit);color:var(--inkt)}
.vt-veld textarea{min-height:120px;resize:vertical}
.vt-hint{font-size:13px;color:var(--grijs)}
.vt-req{color:var(--rood-tx)}
.vt-radio,.vt-checkbox{display:flex;align-items:flex-start;gap:10px;min-height:44px;
  padding:5px 0;cursor:pointer;font-family:var(--sans);font-weight:400;font-size:15px}
.vt-radio input,.vt-checkbox input{width:21px;height:21px;flex:none;margin-top:2px;
  accent-color:var(--rood-btn)}
.vt-akkoord{padding:16px;background:var(--papier);border:1px solid var(--lijn);border-radius:var(--r)}
.vt-dagen{margin:0;font-size:14px;color:var(--grijs);min-height:20px}
.vt-dagen.fout{color:var(--rood-tx);font-weight:600}
.vt-stapacties{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.vt-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.vt-hp input{font-size:16px}
.vt-mandlijst{display:grid;gap:8px}
.vt-mandleeg{margin:0;padding:18px;border:1px dashed var(--lijn-sterk);border-radius:var(--r);
  background:var(--papier);color:var(--grijs)}
.vt-mandregel{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;
  padding:12px 14px;border:1px solid var(--lijn);border-radius:var(--r);background:var(--wit)}
.vt-mandnaam{font-family:var(--disp);font-weight:700}
.vt-mandnaam em{font-style:normal;font-size:11.5px;text-transform:uppercase;color:var(--rood-tx);
  border:1px solid var(--rood-tx);border-radius:4px;padding:1px 5px;margin-left:7px}
.vt-mandprijs{color:var(--grijs);font-size:14px;white-space:nowrap}
.vt-mandaantal{display:flex;align-items:center;gap:6px}
.vt-mandaantal button{min-width:42px;min-height:42px;border:1px solid var(--lijn-sterk);
  border-radius:8px;background:var(--wit);font-family:var(--disp);font-weight:700}
.vt-mandaantal button:hover{border-color:var(--inkt)}
.vt-mandaantal b{min-width:22px;text-align:center;font-family:var(--disp)}
.vt-mandwis{font-size:13px;padding:0 10px}
.vt-mandkiezen{padding-top:8px;border-top:1px solid var(--lijn);display:grid;gap:10px}
.vt-veldkop{margin:0;font-family:var(--disp);font-weight:700;font-size:14px}
.vt-losrij{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center}
.vt-losrij select{min-width:0;width:100%;min-height:48px;font-size:16px;padding:12px 14px;
  border:1px solid var(--lijn-sterk);border-radius:8px;background:var(--wit);color:var(--inkt)}
.vt-mandkiezen a{color:var(--rood-tx);text-decoration:underline}

.vt-bon{position:sticky;top:92px;padding:clamp(24px,3vw,34px) var(--pad)}
.vt-bon h2{font-size:19px;margin-bottom:14px}
.vt-bonregels{display:grid;gap:8px;margin-bottom:14px;padding-bottom:14px;
  border-bottom:1px solid var(--lijn)}
.vt-bonregels li{display:flex;justify-content:space-between;gap:12px;font-size:14px}
.vt-bonleeg{color:var(--grijs)}
.vt-bontotaal{margin:0}
.vt-bontotaal div{display:flex;justify-content:space-between;gap:12px;padding:5px 0;font-size:14px}
.vt-bontotaal dt{color:var(--grijs)}
.vt-bontotaal dd{margin:0;text-align:right}
.vt-bonsom{margin-top:10px;padding-top:12px;border-top:1px solid var(--lijn)}
.vt-bonsom dt{color:var(--inkt);font-family:var(--disp);font-weight:700;font-size:16px}
.vt-bonsom dd{font-family:var(--disp);font-weight:700;font-size:22px}
.vt-bonnoot{margin:14px 0 0;font-size:13px;color:var(--grijs);line-height:1.55}

/* ── slot + voet ──────────────────────────────────────────────────────────── */
.vt-slot{padding:clamp(56px,8vw,110px) var(--pad) 0}
.vt-slot h2{font-size:clamp(28px,4.6vw,70px)}
.vt-slotfeiten{display:grid;grid-template-columns:repeat(4,1fr);
  margin:clamp(40px,6vw,72px) 0 0;border-top:1px solid var(--lijn)}
.vt-slotfeiten div{padding:20px 18px 20px 0;border-right:1px solid var(--lijn)}
.vt-slotfeiten div:last-child{border-right:0}
.vt-slotfeiten dt{font-size:12.5px;color:var(--grijs);text-transform:uppercase;letter-spacing:.06em}
.vt-slotfeiten dd{margin:6px 0 0;font-family:var(--disp);font-weight:700;font-size:18px}
.vt-slotfeiten a:hover{color:var(--rood-tx)}
.vt-voet{background:var(--inkt);color:rgba(255,255,255,.76)}
.vt-voetrij{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:26px;
  padding:clamp(40px,5vw,62px) var(--pad)}
.vt-voetlogo{width:132px;height:auto;margin-bottom:14px}
.vt-voetrij p{margin:0;font-size:14px;max-width:40ch}
.vt-voetkop{color:#fff;font-family:var(--disp);font-weight:700;font-size:15px;margin-bottom:10px!important}
.vt-voetrij nav,.vt-voetrij>div:last-child{display:flex;flex-direction:column;gap:8px}
.vt-voetrij a{font-size:14px}
.vt-voetrij a:hover{color:#fff}
.vt-copy{margin:0;padding:18px var(--pad);border-top:1px solid rgba(255,255,255,.14);font-size:13px}

/* ── responsief ───────────────────────────────────────────────────────────── */
@media(max-width:1180px){
  .vt-catlayout{grid-template-columns:210px minmax(0,1fr)}
  .vt-prodgrid{grid-template-columns:repeat(2,1fr)}
  .vt-offlayout{grid-template-columns:minmax(0,1fr)}
  .vt-offlayout>div:first-child{border-right:0}
  .vt-bon{position:static;border-top:1px solid var(--lijn)}
}
@media(max-width:1000px){
  .vt-famgrid{grid-template-columns:1fr}
  .vt-fam{border-right:0}
  .vt-catgrid{grid-template-columns:repeat(2,1fr)}
  .vt-wwstrip{grid-template-columns:1fr 1fr}
  .vt-wwtekst{grid-column:1/-1;border-right:0;border-bottom:1px solid rgba(255,255,255,.18)}
  .vt-wwstap:nth-child(3){border-right:0}
}
@media(max-width:880px){
  .vt-kop{grid-template-columns:1fr auto auto}
  /* Feedback 05-08: zonder deze rijen zette de grid het opengeklapte menu op
     rij 2 en duwde hij logo/Offerte/hamburger naar rij 3 — de knoppen sprongen
     dus ONDER het menu en "Zo werkt het" liep half achter de zwarte balk. */
  .vt-merk,.vt-mand,.vt-belmob,.vt-burger{grid-row:1}
  .vt-nav{grid-row:2}
  .vt-nav{display:none;grid-column:1/-1;flex-direction:column;align-items:stretch;
    padding:8px var(--pad) 16px;border-top:1px solid var(--lijn);
    /* een lang menu mag de pagina niet uitrekken; het scrollt zelf */
    max-height:calc(100svh - 78px);overflow-y:auto;overscroll-behavior:contain}
  .vt-kop.is-open .vt-nav{display:flex}
  .vt-burger{display:block}
  .vt-paneel{position:static;width:auto;box-shadow:none;opacity:1;visibility:visible;
    transform:none;display:none;border:0;padding:0 0 0 12px}
  .vt-menu.is-open .vt-paneel{display:block}
  .vt-paneellijst.twee{grid-template-columns:1fr}
  .vt-statement,.vt-sectiekop{grid-template-columns:1fr;align-items:start}
  .vt-keuzerij{grid-template-columns:1fr}
  .vt-keuzekaart{border-right:0;border-bottom:1px solid var(--lijn)}
  .vt-catlayout{grid-template-columns:1fr}
  .vt-zijbalk{position:static;border-right:0;border-bottom:1px solid var(--lijn)}
  .vt-zijlijst{grid-template-columns:1fr 1fr;display:grid}
  .vt-tweekolom,.vt-veldrij{grid-template-columns:1fr}
  .vt-slotfeiten{grid-template-columns:1fr 1fr}
  .vt-slotfeiten div:nth-child(2){border-right:0}
  .vt-voetrij{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .vt-fam{grid-template-columns:1fr}
  .vt-setgrid{grid-template-columns:1fr}
  .vt-catgrid,.vt-prodgrid{grid-template-columns:1fr}
  .vt-wwstrip{grid-template-columns:1fr}
  .vt-wwstap{border-right:0;border-bottom:1px solid rgba(255,255,255,.18)}
  .vt-wwtxt{padding-top:12px}
  .vt-stapbalk{grid-template-columns:1fr 1fr}
  .vt-zijlijst{grid-template-columns:1fr}
  .vt-mandregel{grid-template-columns:1fr;gap:8px}
  .vt-voetrij{grid-template-columns:1fr}
  .vt-losrij{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* ═══════════════════════════════════════════════════════════════════════════
   Feedbackronde 03-08 (2e): hero-slideshow · vergelijkkaarten · gids · CTA
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── hero-slideshow ───────────────────────────────────────────────────────── */
.vt-dias{position:absolute;inset:0;z-index:0;overflow:hidden}
.vt-dia{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .9s ease}
.vt-dia.is-aan{opacity:1}
.vt-dia img{width:100%;height:100%;object-fit:cover}
.vt-bolletjes{position:absolute;z-index:3;left:calc(var(--pad) - 5px);bottom:12px;
  display:flex;gap:1px}
/* De streepjes waren 38x4 px: zichtbaar genoeg, maar met de duim niet te raken.
   Het streepje blijft even dun, het KNOPJE eromheen is nu 24 px hoog (WCAG 2.5.8)
   door verticale padding en een doorzichtige achtergrond. */
.vt-bolletje{width:48px;height:24px;border:0;padding:10px 5px;background:none;
  cursor:pointer;-webkit-appearance:none;appearance:none;display:flex;align-items:center}
.vt-bolletje::before{content:"";display:block;width:100%;height:4px;border-radius:999px;
  background:rgba(255,255,255,.34);transition:background .25s ease}
.vt-bolletje:hover::before{background:rgba(255,255,255,.6)}
.vt-bolletje.is-aan::before{background:var(--rood)}
.vt-pill-glas{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.4);color:#fff}
.vt-pill-glas:hover{background:#fff;border-color:#fff;color:var(--inkt)}
.vt-hero .vt-heroknoppen{margin-bottom:26px}

/* ── intro (verving "Waar wilt u beginnen?") ──────────────────────────────── */
.vt-intro{max-width:900px;margin:0 auto;padding:clamp(52px,8vw,104px) var(--pad);
  text-align:center;border-bottom:1px solid var(--lijn)}
.vt-intro .vt-label{justify-content:center}
.vt-intro h2{font-size:clamp(26px,4vw,50px);line-height:1.12}

/* ── vergelijkkaarten (model: aangeleverde prijstabel) ────────────────────── */
.vt-planrij{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
  padding:0 var(--pad) clamp(30px,4vw,48px)}
.vt-plan{display:flex;flex-direction:column;padding:22px;
  border:1px solid var(--lijn);border-radius:16px;background:var(--wit);
  transition:border-color .2s ease,box-shadow .2s ease}
.vt-plan:hover{box-shadow:0 2px 4px rgba(11,11,13,.04),0 16px 40px rgba(11,11,13,.08)}
.vt-plan.is-uitgelicht{border-color:var(--rood);box-shadow:0 0 0 1px var(--rood)}
.vt-planfoto{background:var(--wit);border:1px solid var(--lijn);border-radius:12px;
  overflow:hidden;aspect-ratio:16/9;padding:8px;margin-bottom:16px}
.vt-planfoto img{width:100%;height:100%;object-fit:contain}
.vt-plan h3{font-size:clamp(20px,2.2vw,26px)}
.vt-planprijs{margin:8px 0 0;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.vt-planprijs strong{font-family:var(--disp);font-size:clamp(30px,3.6vw,42px);line-height:1}
.vt-planprijs span{font-size:13px;color:var(--grijs)}
.vt-planbest{margin:18px 0 0;padding:14px 0;border-top:1px solid var(--lijn);
  border-bottom:1px solid var(--lijn)}
.vt-planbest p:last-child{margin:4px 0 0;color:var(--grijs);font-size:14.5px}
.vt-planlabel{margin:16px 0 10px;font-family:var(--disp);font-weight:700;font-size:14px}
.vt-planlijst{display:grid;gap:9px}
.vt-planlijst li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;
  color:var(--inkt-zacht)}
.vt-planlijst svg{flex:none;margin-top:4px;color:var(--rood-tx)}
.vt-planlijst.groot li{font-size:16px}
.vt-planacties{display:grid;gap:8px;margin-top:20px}
.vt-planvoet{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--lijn);
  font-size:13px;color:var(--grijs)}
.vt-meer{display:flex;flex-wrap:wrap;gap:10px}

/* ── gids ─────────────────────────────────────────────────────────────────── */
.vt-gidsrij{border-top:1px solid var(--lijn)}
.vt-gids{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px;align-items:center;
  padding:20px var(--pad);border-bottom:1px solid var(--lijn);transition:background .2s ease}
.vt-gids:hover{background:var(--papier)}
.vt-gidsnr{font-family:var(--disp);font-weight:700;font-size:15px;color:var(--rood-tx)}
.vt-gids strong{display:block;font-family:var(--disp);font-size:clamp(17px,2vw,21px)}
.vt-gids span{color:var(--grijs);font-size:15px}
.vt-gids>svg{color:var(--lijn-sterk);transition:color .2s ease,transform .2s ease}
.vt-gids:hover>svg{color:var(--rood-tx);transform:translateX(4px)}

/* ── CTA (model: aangeleverde CTA-referentie) ─────────────────────────────── */
.vt-ctablok{padding:clamp(48px,7vw,96px) var(--pad)}
.vt-cta{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,48%);
  border-radius:22px;overflow:hidden;background:var(--inkt);color:#fff;min-height:340px}
.vt-ctatekst{padding:clamp(28px,4vw,56px);align-self:center;position:relative;z-index:2}
.vt-ctatekst h2{font-size:clamp(28px,4vw,50px);color:#fff}
.vt-ctatekst p{margin:16px 0 0;max-width:44ch;color:rgba(255,255,255,.78)}
.vt-ctaknoppen{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.vt-ctaknop{display:inline-flex;align-items:center;min-height:48px;padding:13px 24px;
  border-radius:10px;border:1px solid rgba(255,255,255,.28);color:#fff;
  font-family:var(--disp);font-weight:700;font-size:15px;
  transition:background .18s ease,color .18s ease,border-color .18s ease}
.vt-ctaknop:hover{background:rgba(255,255,255,.14)}
.vt-ctaknop.vol{background:#fff;border-color:#fff;color:var(--inkt)}
.vt-ctaknop.vol:hover{background:var(--papier-2);border-color:var(--papier-2)}
.vt-ctabeeld{position:relative}
.vt-ctabeeld img{width:100%;height:100%;object-fit:cover}
.vt-ctabeeld::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,var(--inkt) 0%,rgba(11,11,13,.55) 40%,rgba(11,11,13,0) 100%)}

/* ── setfoto op de kaarten (06-08) ─────────────────────────────────────────
   De kaartbeelden waren ingericht op de uitstalfoto: producten op wit, dus een
   witte kaart met padding en object-fit:contain. Sinds Lenny's keuze staat op de
   kaart de FOTO van de opgestelde set, en die heeft zijn eigen studio-achtergrond.
   Dan wil je hem vullend en zonder rand — anders zie je een grijze foto in een
   wit lijstje. De verhouding blijft 4:3, gelijk aan de foto zelf, zodat er niets
   wordt afgesneden. De uitstalfoto houdt zijn witte kader op de setpagina. */
.vt-setfoto,.vt-popfoto{padding:0}
.vt-setfoto img,.vt-famfoto img,.vt-popfoto img{aspect-ratio:4/3;object-fit:cover}
/* ⚠ De BAK moet ook 4:3 zijn. Hij stond op 16/9 met overflow:hidden, dus de
   foto zat er keurig 4:3 in en werd er onderaan gewoon afgeknipt — je zag de
   case en de kabel niet meer. Alleen de afbeelding meten is daarom niet genoeg:
   meet wat er zichtbaar blijft ná het knippen van de ouder. */
.vt-planfoto{padding:0;overflow:hidden;aspect-ratio:4/3}
.vt-planfoto img{aspect-ratio:4/3;object-fit:cover}
.vt-famfoto{aspect-ratio:4/3}
.vt-setfoto picture,.vt-famfoto picture,.vt-popfoto picture,.vt-planfoto picture{display:block}

/* ── merkblok (06-08) ──────────────────────────────────────────────────────
   Het volledige embleem, één keer, met veel lucht. Geen kader, geen schaduw,
   geen kleurvlak eromheen: het embleem heeft zelf al chroom en verlopen, en
   alles wat je er nog omheen zet maakt het rommelig. Rust komt hier uit
   ruimte, niet uit decoratie. */
.vt-merkzegel{text-align:center;padding:clamp(56px,8vw,110px) var(--pad);
  border-top:1px solid var(--lijn)}
.vt-merkzegel img{width:min(340px,74vw);height:auto;margin:0 auto}
.vt-merkzegel p{margin:22px auto 0;max-width:26em;color:var(--grijs);font-size:15.5px}

/* ── setpagina, opzet 06-08 ────────────────────────────────────────────────
   Keuze van Lenny na de proef in /setlab/. De oude pagina liet alles tegelijk
   zien: foto, prijs, elf regels, chips en twee knoppen. Wie alles tegelijk
   ziet, kiest niets. Nu in stappen, zoals een productpagina van Apple of
   Samsung: eerst één boodschap en één knop, dan het beeld met lucht eromheen,
   dan de inhoud in drie of vier groepen, en de letterlijke lijst pas als je
   erom vraagt. Geen backdrop-filter — dat was hier de jank-oorzaak. */
.vt-setkop{max-width:820px;margin:0 auto;text-align:center;
  padding:clamp(30px,6vw,84px) var(--pad) clamp(22px,3vw,38px)}
.vt-setkop .vt-kruimels{justify-content:center;margin-bottom:18px}
.vt-eyebrow{margin:0 0 12px;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--grijs);font-weight:600}
.vt-setkop h1{margin:0;font-size:clamp(38px,7vw,88px);line-height:1.03;letter-spacing:-.035em}
.vt-eenzin{margin:18px auto 0;max-width:19em;font-size:clamp(17px,2.1vw,22px);
  line-height:1.45;color:#3c4245}
.vt-prijsregel{margin:22px 0 0;font-size:15px;color:var(--grijs)}
.vt-prijsregel b{color:var(--inkt);font-weight:600}
.vt-setkopacties{margin-top:22px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.vt-naarinhoud{display:inline-block;margin-top:16px;font-size:15px;font-weight:600;
  color:var(--rood-tx)}
.vt-naarinhoud::after{content:" \2193"}
.vt-naarinhoud:hover{text-decoration:underline}
.vt-beeldbij{margin:14px 0 0;text-align:center;font-size:13.5px;color:var(--grijs)}

.vt-inhoud{background:var(--papier);border-top:0}
.vt-inhoudkop{max-width:1240px;margin:0 auto clamp(26px,3.4vw,44px)}
.vt-inhoudkop h2{margin:0;font-family:var(--disp);font-weight:700;letter-spacing:-.03em;
  font-size:clamp(26px,4.2vw,44px);line-height:1.08}
.vt-inhoudkop p{margin:12px 0 0;max-width:34em;color:var(--grijs)}
.vt-groepen{max-width:1240px;margin:0 auto;display:grid;gap:clamp(12px,1.6vw,20px);
  grid-template-columns:repeat(auto-fit,minmax(258px,1fr))}
.vt-groep{background:var(--wit);border:1px solid var(--lijn);border-radius:22px;
  padding:clamp(20px,2.4vw,30px)}
.vt-groep h3{margin:0 0 3px;font-family:var(--disp);font-size:19px;font-weight:700;
  letter-spacing:-.01em}
.vt-groepnoot{margin:0 0 14px;font-size:13.5px;color:var(--grijs)}
.vt-groep ul{margin:0;padding:0;list-style:none}
.vt-groep li{padding:10px 0;border-top:1px solid var(--lijn);font-size:15.5px}
.vt-groep li:first-child{border-top:0}
.vt-alles{max-width:1240px;margin:clamp(20px,2.6vw,32px) auto 0;background:var(--wit);
  border:1px solid var(--lijn);border-radius:22px;overflow:hidden}
.vt-alles summary{list-style:none;cursor:pointer;font-weight:600;min-height:56px;
  padding:18px clamp(18px,2.2vw,28px);display:flex;align-items:center;
  justify-content:space-between;gap:14px}
.vt-alles summary::-webkit-details-marker{display:none}
.vt-alles summary::after{content:"";width:9px;height:9px;flex:none;
  border-right:2px solid var(--grijs);border-bottom:2px solid var(--grijs);
  transform:rotate(45deg) translateY(-2px);transition:transform .2s var(--ease)}
.vt-alles[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.vt-alleslijst{padding:0 clamp(18px,2.2vw,28px) 10px;columns:2;column-gap:44px}
.vt-alleslijst div{padding:10px 0;border-top:1px solid var(--lijn);break-inside:avoid;
  font-size:15.5px}
.vt-inhoudchips{max-width:1240px;margin:clamp(20px,2.6vw,32px) auto 0}
.vt-weten .vt-wetenin{max-width:820px;margin:0 auto;text-align:center}
.vt-weten h2{margin:0;font-family:var(--disp);font-weight:700;letter-spacing:-.03em;
  font-size:clamp(24px,3.6vw,38px)}
.vt-weten p{margin:14px auto 0;max-width:32em;color:var(--grijs)}

/* de keuze reist mee: verschijnt zodra de knop bovenin uit beeld is.
   Alleen op desktop — op mobiel staat daar al de vaste Bel/WhatsApp-balk. */
.vt-setbalk{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--inkt);
  color:#fff;transform:translateY(102%);transition:transform .28s var(--ease)}
.vt-setbalk.is-aan{transform:none}
.vt-setbalkin{max-width:1240px;margin:0 auto;padding:11px var(--pad);display:flex;
  align-items:center;justify-content:space-between;gap:16px}
.vt-setbalkwat{min-width:0}
.vt-setbalkwat strong{display:block;font-family:var(--disp);font-size:15.5px;
  letter-spacing:-.01em}
.vt-setbalkwat span{font-size:13px;color:rgba(255,255,255,.72)}
.vt-setbalk .vt-pill{min-height:44px}
@media(max-width:880px){
  .vt-setbalk{display:none}
  .vt-setkopacties{flex-direction:column}
  .vt-setkopacties .vt-pill{width:100%}
  .vt-alleslijst{columns:1}
}
@media(prefers-reduced-motion:reduce){.vt-setbalk{transition:none}}

/* ── op-maat-kaart (06-08) ─────────────────────────────────────────────────
   Stond tussen kaarten met een foto en las als een lege plek: geen beeld, een
   wit knopje tussen rode knoppen, en een gat van ruim 200 px in het midden
   omdat er geen prijsregel is. Nu bewust de ándere kaart: donker, met een
   getekend beeldvlak in dezelfde 4:3 als de foto's zodat hij uitlijnt.
   Geen backdrop-filter en geen animatiefilters — zie de jank-regels. */
.vt-set.opmaat{background:var(--inkt);border-color:var(--inkt);color:#fff;
  display:flex;flex-direction:column}
.vt-opmaatbeeld{background:linear-gradient(155deg,#17171b 0%,#0b0b0d 62%);
  border-bottom:1px solid rgba(255,255,255,.10)}
.vt-opmaatbeeld svg{display:block;width:100%;height:auto;aspect-ratio:4/3}
.vt-set.opmaat .vt-settekst{flex:1;display:flex;flex-direction:column}
.vt-set.opmaat .vt-setlabel{color:var(--rood-lt,#ff8d88)}
.vt-set.opmaat h3,.vt-set.opmaat .vt-setprijs strong{color:#fff}
.vt-set.opmaat .vt-setwie,.vt-set.opmaat .vt-setkort{color:rgba(255,255,255,.80)}
/* de toelichting duwt de knoppen omlaag; hij hoort bij de prijs, niet los */
.vt-set.opmaat .vt-setnoot{color:rgba(255,255,255,.62);margin-bottom:auto}
.vt-set.opmaat .vt-setacties{margin-top:22px}
.vt-set.opmaat .vt-setknop{background:var(--rood);border-color:var(--rood);color:#fff}
.vt-set.opmaat .vt-setknop:hover{background:#c8140b;border-color:#c8140b}
.vt-set.opmaat .vt-setmeer{color:#fff}
.vt-set.opmaat .vt-setmeer:hover{color:var(--rood-lt,#ff8d88)}

/* ── setdetailpagina ──────────────────────────────────────────────────────── */
/* Het beeld van de opgestelde set, boven het detailblok. Geen kader eromheen:
   de foto heeft zelf al een lichte studio-achtergrond, dus een rand erbij maakt
   er een dubbele lijst van. */
.vt-setbeeld{padding:0 var(--pad) clamp(20px,3vw,36px);border-bottom:1px solid var(--lijn)}
.vt-setbeeld picture{display:block;max-width:1180px;margin:0 auto}
.vt-setbeeld img{width:100%;height:auto;display:block;border-radius:18px;background:var(--papier)}
@media(max-width:880px){
  .vt-setbeeld{padding-bottom:clamp(16px,4vw,24px)}
  .vt-setbeeld img{border-radius:12px}
}

/* 06-08 · De uitstalfoto is hier weg: sinds de setfoto boven de pagina staat
   toonde die tweede foto dezelfde set nog een keer, alleen uit elkaar gelegd.
   Lenny: "staat dubbel". Wat er overblijft is de informatie, en die is nu één
   kaart in plaats van een halve kolom naast een lege plek.

   iPhone-stijl, gelijk aan de mobiele richting die we gekozen hebben: witte
   kaart met flinke ronding op een grijze ondergrond, hairlines tussen de
   regels, en een zachte schaduw in plaats van een harde rand. Geen
   backdrop-filter (jank-regel). */
.vt-detail{display:block;background:var(--papier);
  padding:0 var(--pad) clamp(30px,4.4vw,56px);border-bottom:1px solid var(--lijn)}
.vt-detailinfo{max-width:1180px;margin:0 auto;background:var(--wit);
  border:1px solid var(--lijn);border-radius:24px;
  padding:clamp(24px,3.2vw,40px) clamp(20px,3vw,40px);
  box-shadow:0 1px 2px rgba(11,11,13,.05), 0 10px 30px rgba(11,11,13,.05)}
/* de lijst als gegroepeerde regels met haarlijnen, zoals een iOS-instellijst */
.vt-detailinfo .vt-planlijst.groot{margin-top:6px;border-top:1px solid var(--lijn)}
.vt-detailinfo .vt-planlijst.groot li{display:flex;gap:12px;align-items:center;
  padding:13px 2px;border-bottom:1px solid var(--lijn)}
.vt-detailinfo .vt-planlijst.groot li svg{flex:none}
.vt-detailinfo .vt-planlabel{margin-top:26px}
.vt-detailinfo .vt-detailacties{margin-top:26px}
@media(min-width:1001px){
  /* Op 1180 px wordt één kolom regels van een halve meter breed met veel lucht
     rechts. Alleen de LIJST gaat daarom in twee kolommen — de kopjes blijven
     boven hun eigen blok staan. Een grid over de hele kaart zette "Wat zit
     erin" naast de lijst in plaats van erboven; dat las niet. */
  /* let op: .vt-planlijst staat op display:grid en dan doet `columns` niets.
     Daarom hier expliciet terug naar block. Kostte een bouwronde om te zien. */
  .vt-detailinfo .vt-planlijst.groot{display:block;columns:2;
    column-gap:clamp(32px,4vw,64px)}
  .vt-detailinfo .vt-planlijst.groot li{break-inside:avoid}
}
.vt-detailprijs{margin:0;display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.vt-detailprijs strong{font-family:var(--disp);font-size:clamp(32px,4vw,46px);line-height:1}
.vt-detailprijs span{font-size:13.5px;color:var(--grijs)}
.vt-detailpubliek{margin:8px 0 0;color:var(--grijs)}
.vt-chips{display:flex;flex-wrap:wrap;gap:8px}
.vt-chips li{padding:7px 14px;border:1px solid var(--lijn);border-radius:999px;
  background:var(--papier);font-size:13.5px}
.vt-detailacties{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.vt-nietbij{margin-top:22px;padding-top:16px;border-top:1px solid var(--lijn)}
.vt-nietbij summary{cursor:pointer;font-family:var(--disp);font-weight:700;font-size:15px;
  min-height:36px;display:flex;align-items:center}
.vt-nietbij summary:hover{color:var(--rood-tx)}
.vt-nietbij ul{margin-top:10px}
.vt-verder{border-top:1px solid var(--lijn);margin:0 var(--pad) clamp(40px,5vw,64px)}
.vt-verder li{border-bottom:1px solid var(--lijn)}
.vt-verder a{display:flex;justify-content:space-between;gap:14px;padding:14px 0;
  font-family:var(--disp);font-weight:700;font-size:16px}
.vt-verder a:hover{color:var(--rood-tx)}
.vt-verder span{font-family:var(--sans);font-weight:400;color:var(--grijs);font-size:14px}

@media(max-width:1000px){
  .vt-planrij{grid-template-columns:1fr 1fr}
  /* .vt-detail is sinds 06-08 één kolom met een kaart erin; de oude
     twee-kolomregels en .vt-detailfoto zijn hier weggehaald met de uitstalfoto. */
}
@media(max-width:880px){
  .vt-cta{grid-template-columns:1fr}
  .vt-ctabeeld{order:-1;min-height:190px}
  .vt-ctabeeld::before{background:linear-gradient(180deg,rgba(11,11,13,0) 0%,var(--inkt) 100%)}
}
@media(max-width:700px){
  .vt-planrij{grid-template-columns:1fr}
  .vt-gids{grid-template-columns:auto minmax(0,1fr);gap:12px}
  .vt-gids>svg{display:none}
}

/* ── gelegenheden (feedback: knop per evenement, eigen subpagina) ─────────── */
.vt-gelrij{display:grid;grid-template-columns:repeat(5,1fr);
  border-top:1px solid var(--lijn);border-left:1px solid var(--lijn)}
.vt-gelkaart{display:flex;flex-direction:column;
  border-right:1px solid var(--lijn);border-bottom:1px solid var(--lijn);
  transition:background .2s ease}
.vt-gelkaart:hover{background:var(--papier)}
.vt-gelfoto{overflow:hidden;aspect-ratio:4/3;background:var(--papier-2)}
.vt-gelfoto img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.vt-gelkaart:hover .vt-gelfoto img{transform:scale(1.04)}
.vt-gelinfo{display:grid;gap:4px;padding:16px 18px 20px}
.vt-gelinfo strong{font-family:var(--disp);font-size:clamp(16px,1.7vw,19px)}
.vt-gelinfo span{font-size:14px;color:var(--grijs)}

.vt-gelhero{position:relative;min-height:min(58vh,480px);display:flex;align-items:flex-end;
  background:var(--inkt);color:#fff}
.vt-gelhero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.vt-gelhero::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(11,11,13,.3) 0%,rgba(11,11,13,.86) 100%)}
.vt-gelheroinhoud{position:relative;z-index:2;padding:clamp(34px,6vw,72px) var(--pad)}
.vt-gelheroinhoud h1{font-size:clamp(32px,5.4vw,66px);color:#fff}
.vt-gelheroinhoud p{margin:16px 0 0;max-width:56ch;color:rgba(255,255,255,.84);
  font-size:clamp(15px,1.5vw,18px)}
.vt-gelhero .vt-kruimel{color:rgba(255,255,255,.72)}
.vt-gelhero .vt-kruimel a:hover{color:#fff}
.vt-gelhero .vt-kruimelsep{color:rgba(255,255,255,.45)}

/* praktische tips per gelegenheid */
.vt-tips{display:grid;grid-template-columns:repeat(2,1fr);
  border-top:1px solid var(--lijn);border-left:1px solid var(--lijn);
  margin-bottom:clamp(40px,5vw,64px)}
.vt-tip{padding:24px var(--pad);border-right:1px solid var(--lijn);
  border-bottom:1px solid var(--lijn)}
.vt-tip h3{font-size:clamp(18px,2vw,22px)}
.vt-tip p{margin:10px 0 0;color:var(--grijs);max-width:52ch}

@media(max-width:1100px){.vt-gelrij{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){
  .vt-gelrij{grid-template-columns:repeat(2,1fr)}
  .vt-tips{grid-template-columns:1fr}
}
@media(max-width:460px){.vt-gelrij{grid-template-columns:1fr}}

/* ═══════════════════════════════════════════════════════════════════════════
   Feedbackronde 03-08 (3e): beweging in de hero · populaire sets · vragen ·
   reviews · rijkere menu's · animaties
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── hero: doorlopende beweging in plaats van alleen wisselen ─────────────── */
/* De actieve dia schuift langzaam mee en zoomt licht in. Alleen transform en
   opacity, dus het loopt op de GPU en veroorzaakt geen hapering. */
.vt-hero-beweegt .vt-dia img{will-change:transform;transform:scale(1.06)}
.vt-hero-beweegt .vt-dia.is-aan img{animation:vt-drift 7s linear forwards}
@keyframes vt-drift{
  from{transform:scale(1.06) translate3d(2%,0,0)}
  to{transform:scale(1.13) translate3d(-2%,0,0)}
}
.vt-dia{transition:opacity 1.1s ease}

/* ── populaire sets: draaibare rij (model powersounds) ────────────────────── */
.vt-popkop{display:flex;flex-wrap:wrap;gap:20px;align-items:end;justify-content:space-between;
  padding:clamp(48px,7vw,96px) var(--pad) clamp(20px,3vw,32px)}
.vt-popkop h2{font-size:clamp(30px,5vw,66px)}
.vt-popkop p{margin:10px 0 0;color:var(--grijs);max-width:52ch}
.vt-popknoppen{display:flex;gap:8px}
.vt-popknop{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;
  border:1px solid var(--lijn-sterk);border-radius:999px;background:var(--wit);color:var(--inkt);
  transition:background .18s ease,border-color .18s ease,color .18s ease}
.vt-popknop:hover{background:var(--inkt);border-color:var(--inkt);color:#fff}
.vt-popknop[disabled]{opacity:.35;cursor:default}
.vt-popknop[disabled]:hover{background:var(--wit);border-color:var(--lijn-sterk);color:var(--inkt)}
.vt-poprij{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(268px,1fr);gap:16px;
  overflow-x:auto;scroll-snap-type:none;
  padding:4px var(--pad) clamp(44px,5vw,64px);scrollbar-width:thin}
.vt-pop{display:flex;flex-direction:column;background:var(--wit);
  border:1px solid var(--lijn);border-radius:16px;overflow:hidden;
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.vt-pop:hover{border-color:var(--lijn-sterk);transform:translateY(-3px);
  box-shadow:0 2px 4px rgba(11,11,13,.04),0 18px 42px rgba(11,11,13,.09)}
.vt-popfoto{position:relative;display:block;background:var(--wit);aspect-ratio:4/3;padding:12px;
  border-bottom:1px solid var(--lijn)}
.vt-popfoto img{width:100%;height:100%;object-fit:contain}
.vt-popnr{position:absolute;top:12px;left:12px;z-index:2;padding:5px 12px;border-radius:999px;
  background:var(--inkt);color:#fff;font-family:var(--disp);font-weight:700;font-size:12px}
.vt-popnr.los{position:static;display:inline-block;background:var(--rood-btn);margin-bottom:12px}
.vt-popinfo{display:flex;flex-direction:column;padding:16px 18px 20px;flex:1}
.vt-pop h3{font-size:19px}
.vt-pop h3 a:hover{color:var(--rood-tx)}
.vt-poppub{margin:6px 0 0;font-size:13.5px;color:var(--grijs)}
.vt-popprijs{margin:12px 0 0;display:flex;align-items:baseline;gap:7px}
.vt-popprijs strong{font-family:var(--disp);font-size:26px;line-height:1}
.vt-popprijs span{font-size:12.5px;color:var(--grijs)}
.vt-popacties{display:grid;gap:8px;margin-top:auto;padding-top:16px}
.vt-popacties .vt-pill{min-height:44px;padding:11px 16px;font-size:14px}
/* Op maat in de populaire rij. Stond hier als kaart zonder beeld tussen kaarten
   mét een setfoto: een streepjesrand en een gat waar bij de buren een foto zat.
   Nu hetzelfde getekende vlak als op de setpagina, zodat de kaart uitlijnt en
   de streepjesrand niet meer hoeft — het beeld vertelt zelf dat er niets
   vaststaat. */
.vt-pop-opmaat{background:var(--papier)}
.vt-pop-opmaat .vt-popprijs{display:block}
.vt-pop-opmaat .vt-popprijs strong{font-size:21px}
.vt-pop-opmaat .vt-popprijs span{display:block;margin-top:3px}
.vt-popfoto.opmaat{padding:0;background:var(--inkt);border-bottom-color:rgba(255,255,255,.10)}
.vt-popfoto.opmaat .vt-opmaatbeeld{height:100%;border-bottom:0}
.vt-popfoto.opmaat .vt-popnr{background:var(--rood-btn)}
.vt-pop-opmaat:hover .vt-popfoto.opmaat{background:#17171b}

/* ── op maat als kaart in de vergelijkrij ─────────────────────────────────── */
.vt-plan-opmaat{border-style:dashed;border-color:var(--lijn-sterk);background:var(--papier)}
.vt-opmaaticoon{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;
  border-radius:14px;background:var(--wit);border:1px solid var(--lijn);color:var(--rood-tx);
  margin-bottom:16px}

/* ── veelgestelde vragen ──────────────────────────────────────────────────── */
.vt-vragen{border-top:1px solid var(--lijn);margin-bottom:clamp(40px,5vw,64px)}
.vt-vraag{border-bottom:1px solid var(--lijn)}
.vt-vraag summary{display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:20px var(--pad);cursor:pointer;list-style:none;
  font-family:var(--disp);font-weight:700;font-size:clamp(16px,1.9vw,20px);
  transition:background .18s ease}
.vt-vraag summary::-webkit-details-marker{display:none}
.vt-vraag summary:hover{background:var(--papier)}
.vt-vraag summary svg{flex:none;color:var(--rood-tx);transition:transform .28s ease}
.vt-vraag[open] summary svg{transform:rotate(45deg)}
.vt-vraag p{margin:0;padding:0 var(--pad) 22px;max-width:74ch;color:var(--grijs)}

/* ── voorbeeld-reviews ────────────────────────────────────────────────────── */
.vt-reviewrij{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:0 var(--pad)}
.vt-review{margin:0;display:flex;flex-direction:column;padding:22px;background:var(--papier);
  border:1px solid var(--lijn);border-radius:16px}
.vt-reviewlabel{margin:0 0 12px;align-self:flex-start;padding:4px 10px;border-radius:999px;
  background:var(--wit);border:1px solid var(--lijn-sterk);
  font-family:var(--disp);font-weight:700;font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--grijs)}
.vt-review blockquote{margin:0;font-size:15.5px;color:var(--inkt-zacht);line-height:1.6}
.vt-review blockquote::before{content:"\201C";display:block;font-family:var(--disp);
  font-size:40px;line-height:.6;color:var(--lijn-sterk);margin-bottom:8px}
.vt-review figcaption{margin-top:auto;padding-top:16px;font-family:var(--disp);font-weight:700;
  font-size:13.5px;color:var(--grijs)}
.vt-reviewnoot{margin:20px var(--pad) clamp(40px,5vw,64px);font-size:13.5px;color:var(--grijs);
  max-width:70ch}

/* ── events: icoon per punt ───────────────────────────────────────────────── */
.vt-gelfoto{position:relative}
.vt-gelicoon{position:absolute;left:14px;bottom:14px;z-index:2;
  display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  border-radius:12px;background:rgba(255,255,255,.94);color:var(--rood-tx);
  transition:background .2s ease,color .2s ease,transform .2s ease}
.vt-gelkaart:hover .vt-gelicoon{background:var(--rood-btn);color:#fff;transform:translateY(-3px)}
.vt-gelpijl{display:inline-flex;align-items:center;gap:7px;margin-top:10px;
  font-family:var(--disp);font-weight:700;font-size:13.5px;color:var(--rood-tx);
  opacity:0;transform:translateX(-6px);transition:opacity .2s ease,transform .2s ease}
.vt-gelkaart:hover .vt-gelpijl{opacity:1;transform:none}

/* ── rijkere uitklapmenu's met hover-effect ───────────────────────────────── */
.vt-paneellijst a{position:relative;overflow:hidden}
.vt-paneellijst a::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--rood-btn);transform:scaleY(0);transform-origin:bottom;
  transition:transform .22s ease}
.vt-paneellijst a:hover::after,.vt-paneellijst a:focus-visible::after{transform:scaleY(1);
  transform-origin:top}
.vt-paneellijst a:hover strong{color:var(--rood-tx)}
.vt-paneellijst svg{transition:transform .22s ease}
.vt-paneellijst a:hover svg{transform:translateX(2px) scale(1.08)}
.vt-navlink{position:relative}
.vt-navlink::after{content:"";position:absolute;left:15px;right:15px;bottom:8px;height:2px;
  background:var(--rood-btn);transform:scaleX(0);transform-origin:right;
  transition:transform .24s ease}
.vt-navlink:hover::after,.vt-menu.is-open .vt-navlink::after{transform:scaleX(1);
  transform-origin:left}
.vt-setpaneel{transition:opacity .2s ease,transform .24s cubic-bezier(.2,.8,.3,1),visibility .24s}

/* ── animaties: rustig in beeld schuiven ──────────────────────────────────── */
[data-anim]{opacity:0;transform:translateY(18px);
  transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
[data-anim].is-zichtbaar{opacity:1;transform:none}
[data-anim] .vt-plan,[data-anim] .vt-gelkaart,[data-anim] .vt-review,[data-anim] .vt-tip{
  opacity:0;transform:translateY(14px);
  transition:opacity .6s ease var(--vert,0ms),transform .6s ease var(--vert,0ms)}
[data-anim].is-zichtbaar .vt-plan,[data-anim].is-zichtbaar .vt-gelkaart,
[data-anim].is-zichtbaar .vt-review,[data-anim].is-zichtbaar .vt-tip{opacity:1;transform:none}
.vt-pill,.vt-prodknop,.vt-popknop{transition:background .18s ease,border-color .18s ease,
  color .18s ease,transform .16s ease}
.vt-pill:active,.vt-prodknop:active{transform:translateY(1px)}
.vt-prod:hover .vt-prodfoto img,.vt-planfoto img{transition:transform .4s ease}
.vt-prod:hover .vt-prodfoto img{transform:scale(1.05)}
.vt-plan:hover .vt-planfoto img{transform:scale(1.04)}

@media(max-width:1000px){.vt-reviewrij{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.vt-reviewrij{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){
  .vt-hero-beweegt .vt-dia.is-aan img{animation:none;transform:scale(1.02)}
  [data-anim],[data-anim] .vt-plan,[data-anim] .vt-gelkaart,
  [data-anim] .vt-review,[data-anim] .vt-tip{opacity:1;transform:none;transition:none}
}

/* ═══════════════════════════════════════════════════════════════════════════
   Feedbackronde 03-08 (4e): menu-kaarten met beeld · rijkere eventkaarten ·
   rijen die vanzelf bewegen
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── menupanelen: kaarten in plaats van een lijstje ───────────────────────── */
.vt-setpaneel{width:min(460px,92vw);padding:10px}
.vt-setpaneel.breed{width:min(760px,94vw)}
.vt-paneellijst{gap:4px}
.vt-paneellijst a{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:12px;
  align-items:center;padding:8px;border-radius:12px;border:1px solid transparent}
.vt-paneellijst a:hover{background:var(--papier);border-color:var(--lijn)}
.vt-menufoto{display:block;overflow:hidden;border-radius:9px;background:var(--wit);
  border:1px solid var(--lijn);aspect-ratio:4/3}
.vt-menufoto img{width:100%;height:100%;object-fit:contain;padding:4px;
  transition:transform .3s ease}
.vt-paneellijst a:hover .vt-menufoto img{transform:scale(1.08)}
.vt-menutekst{display:grid;gap:2px;min-width:0}
.vt-menutekst strong{font-family:var(--disp);font-size:15px;line-height:1.2}
.vt-menutekst em{font-style:normal;font-size:12.5px;color:var(--grijs)}
.vt-menupijl{display:inline-flex;color:var(--lijn-sterk);opacity:0;transform:translateX(-4px);
  transition:opacity .2s ease,transform .2s ease,color .2s ease}
.vt-paneellijst a:hover .vt-menupijl{opacity:1;transform:none;color:var(--rood-tx)}
.vt-paneellijst a::after{display:none}   /* de streep hoort niet bij een kaart */

/* ── eventkaarten: zeggen nu wát je krijgt ────────────────────────────────── */
.vt-gelkort{font-size:14px;color:var(--grijs)}
.vt-gelwatkop{margin:14px 0 6px;font-family:var(--disp);font-weight:700;font-size:11.5px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--grijs)}
.vt-gelwat{display:grid;gap:5px}
.vt-gelwat li{position:relative;padding-left:16px;font-size:13.5px;color:var(--inkt-zacht)}
.vt-gelwat li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:2px;
  background:var(--rood)}
.vt-gelvanaf{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--lijn);
  font-size:13.5px;color:var(--grijs)}
.vt-gelvanaf strong{font-family:var(--disp);font-size:19px;color:var(--inkt)}
.vt-gelinfo{padding:16px 18px 20px}
.vt-gelpijl{margin-top:12px}

/* ── rijen die vanzelf doorlopen ──────────────────────────────────────────── */
/* Beweging via scrollLeft in JS: dat werkt met échte scrollbalken, snapping en
   toetsenbord, en de bezoeker kan er gewoon doorheen slepen. */
.vt-poprij,.vt-gelrij-scroll{scroll-behavior:auto}
.vt-poprij::-webkit-scrollbar,.vt-gelrij-scroll::-webkit-scrollbar{height:6px}
.vt-poprij::-webkit-scrollbar-thumb,.vt-gelrij-scroll::-webkit-scrollbar-thumb{
  background:var(--lijn-sterk);border-radius:999px}
.vt-gelrij-scroll{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(280px,1fr);
  gap:16px;overflow-x:auto;scroll-snap-type:none;
  padding:4px var(--pad) clamp(40px,5vw,60px);border:0}
.vt-gelrij-scroll .vt-gelkaart{border:1px solid var(--lijn);
  border-radius:16px;overflow:hidden;background:var(--wit)}
.vt-gelrij-scroll .vt-gelkaart:hover{border-color:var(--lijn-sterk);
  box-shadow:0 2px 4px rgba(11,11,13,.04),0 18px 42px rgba(11,11,13,.09)}
.vt-rijkop{display:flex;flex-wrap:wrap;gap:20px;align-items:end;justify-content:space-between;
  padding:clamp(48px,7vw,96px) var(--pad) clamp(20px,3vw,32px)}
.vt-rijkop h2{font-size:clamp(30px,5vw,66px)}
.vt-rijkop p{margin:10px 0 0;color:var(--grijs);max-width:52ch}

/* ═══════════════════════════════════════════════════════════════════════════
   Feedbackronde 03-08 (5e): mobiele belknop · nettere kop
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── belknop in de kop + vaste balk onderaan op mobiel ────────────────────── */
.vt-belmob{display:none;align-items:center;justify-content:center;width:46px;
  border-left:1px solid var(--lijn);color:var(--inkt)}
.vt-belmob:hover{background:var(--papier)}
.vt-mbalk{display:none}
/* Feedback 05-08 (Lenny, "maybe overkill"): Offerte en bellen stonden allebei
   BOVEN en ONDER. Nu staat elke actie precies een keer:
     kop    = logo + Offerte (met teller) + hamburger
     balk   = Bel direct + WhatsApp
   Daarom is .vt-belmob (belicoon in de kop) en .vt-moff (Offerte in de balk)
   op mobiel weg. De elementen blijven in de HTML staan voor de a11y-tests en
   voor het geval de keuze terugdraait. */
@media(max-width:880px){
  .vt-belmob{display:none}
  .vt-kop{grid-template-columns:1fr auto auto}
  /* Er was op mobiel geen enkele manier om direct te bellen. */
  .vt-mbalk{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:80;
    border-top:1px solid var(--lijn);background:var(--wit)}
  .vt-mbalk a{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;
    min-height:56px;padding:12px 8px;font-family:var(--disp);font-weight:700;font-size:14px}
  .vt-mbel{background:var(--wit);color:var(--inkt)}
  /* met nog maar twee knoppen mag WhatsApp een echt vlak zijn i.p.v. een strookje */
  .vt-mwa{flex:0 0 40%;background:#1f8f4d;color:#fff}
  /* .vt-mbalk a hierboven zet display:flex op ALLE knoppen in de balk en is
     specifieker dan .vt-moff — vandaar deze selector, niet .vt-moff alleen. */
  .vt-mbalk .vt-moff{display:none}
  /* De 56px die de balk afdekt zat als padding op de BODY. Daardoor stond er
     onder de donkere footer een witte strook, die op de telefoon leest als
     "de pagina houdt niet op". Nu draagt de footer die ruimte zelf, dus de
     kleur loopt door tot achter de balk. */
  .vt-voetrij{padding-bottom:clamp(28px,4vw,40px)}
  .vt-copy{padding-bottom:calc(18px + 56px)}
  .vt-bon{bottom:auto}
}
/* iOS blijft anders doorveren voorbij het einde van de pagina; dat voelt als
   eindeloos scrollen terwijl er niets meer komt. */
html{overscroll-behavior-y:none}

/* ── kop: rustiger, met een duidelijke scheiding ──────────────────────────── */
.vt-navlink-link{font-weight:700;padding-right:6px}
.vt-navsub{display:inline-flex;align-items:center;justify-content:center;width:26px;
  min-height:46px;border:0;background:transparent;color:var(--grijs);border-radius:8px;
  transition:color .16s ease,background .16s ease}
.vt-navsub:hover{color:var(--inkt);background:var(--papier)}
.vt-menu{display:flex;align-items:center}
.vt-menu.is-open .vt-navsub{color:var(--rood-tx);transform:rotate(180deg)}
.vt-navsub{transition:transform .22s ease,color .16s ease,background .16s ease}
.vt-nav{gap:0}
.vt-nav>.vt-navlink,.vt-menu{position:relative}
.vt-nav>.vt-navlink:not(:last-child)::before,.vt-menu:not(:first-child)::before{
  content:"";position:absolute;left:-1px;top:50%;transform:translateY(-50%);
  width:1px;height:20px;background:var(--lijn)}

@media(max-width:880px){
  .vt-nav>.vt-navlink::before,.vt-menu::before{display:none}
  .vt-menu{flex-wrap:wrap}
  .vt-navlink-link{flex:1}
  /* Feedback 05-08: het uitklapmenu van Sets kwam NAAST "Sets" te staan in
     plaats van eronder. .vt-menu is een flexrij (link + pijltje + paneel) en
     het paneel paste net op dezelfde regel, dus wrapte het niet. Een eigen
     regel afdwingen lost het op. .breed staat er expliciet bij, want die
     selector is specifieker en won anders met width:min(660px,92vw). */
  .vt-paneel,.vt-paneel.breed{flex:0 0 100%;width:100%;min-width:0}
}

/* ── op maat: zelf samenstellen (model: offertepagina powersounds) ────────── */
.vt-kieslayout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:0;align-items:start}
.vt-kieslayout>div:first-child{padding:clamp(22px,3vw,36px) var(--pad);
  border-right:1px solid var(--lijn)}
.vt-kiesbalk input{width:100%;max-width:420px;min-height:50px;padding:13px 18px;font-size:16px;
  border:1px solid var(--lijn-sterk);border-radius:999px;background:var(--wit);color:var(--inkt)}
.vt-kiesfilters{display:flex;flex-wrap:wrap;gap:7px;margin:16px 0 24px}
.vt-kiesfilter{min-height:40px;padding:9px 15px;border-radius:999px;
  border:1px solid var(--lijn-sterk);background:var(--wit);color:var(--inkt-zacht);
  font-family:var(--disp);font-weight:500;font-size:13.5px;
  transition:background .16s ease,color .16s ease,border-color .16s ease}
.vt-kiesfilter:hover{border-color:var(--inkt);color:var(--inkt)}
.vt-kiesfilter.is-aan{background:var(--inkt);border-color:var(--inkt);color:#fff;font-weight:700}
.vt-kiesblok{margin-bottom:34px}
.vt-kiesblok h2{font-size:clamp(19px,2.2vw,24px);margin-bottom:12px;padding-bottom:10px;
  border-bottom:1px solid var(--lijn)}
.vt-kieslijst{display:grid;gap:6px}
.vt-kiesrij{display:grid;grid-template-columns:auto 62px minmax(0,1fr) auto;gap:14px;
  align-items:center;padding:9px 12px;border:1px solid transparent;border-radius:12px;
  cursor:pointer;transition:background .16s ease,border-color .16s ease}
.vt-kiesrij:hover{background:var(--papier);border-color:var(--lijn)}
.vt-kiesrij:has(.vt-kiesvink:checked){background:#fdf1f1;border-color:var(--rood)}
.vt-kiesvink{width:22px;height:22px;flex:none;accent-color:var(--rood-btn);cursor:pointer}
.vt-kiesfoto{display:block;overflow:hidden;border:1px solid var(--lijn);border-radius:8px;
  background:var(--wit);aspect-ratio:4/3}
.vt-kiesfoto img{width:100%;height:100%;object-fit:contain;padding:3px}
.vt-kiestekst{display:grid;gap:1px;min-width:0}
.vt-kiestekst strong{font-family:var(--disp);font-size:15px;line-height:1.25}
.vt-kiestekst em{font-style:normal;font-size:12.5px;color:var(--grijs)}
.vt-kiesprijs{font-family:var(--disp);font-weight:700;font-size:17px;white-space:nowrap}
.vt-kiesprijs small{display:block;font-family:var(--sans);font-weight:400;font-size:11px;
  color:var(--grijs);text-align:right}
.vt-kiesbon{position:sticky;top:92px;padding:clamp(22px,3vw,32px) var(--pad)}
.vt-kiesbon h2{font-size:19px;margin-bottom:14px}
.vt-kiesbon .vt-pill{width:100%;margin-top:16px}
@media(max-width:1080px){
  .vt-kieslayout{grid-template-columns:1fr}
  .vt-kieslayout>div:first-child{border-right:0}
  .vt-kiesbon{position:static;border-top:1px solid var(--lijn)}
}
@media(max-width:560px){
  .vt-kiesrij{grid-template-columns:auto 52px minmax(0,1fr);gap:10px}
  .vt-kiesprijs{grid-column:2/4;text-align:left;font-size:15px}
  .vt-kiesprijs small{display:inline;text-align:left;margin-left:5px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   Onderzoeksronde: minder op de kaart, meer op de detailpagina
   ---------------------------------------------------------------------------
   Uit het onderzoek: een kaart met beeld + naam + prijs klikt beter door dan
   een kaart die alles al toont; de details horen op de pagina erachter
   (progressive disclosure). En: laat de inhoud zíen in plaats van opsommen —
   vandaar de punten op de uitstalfoto.
   ═══════════════════════════════════════════════════════════════════════════ */

.vt-planpub{margin:10px 0 0;color:var(--grijs);font-size:14.5px}
.vt-plan .vt-planacties{margin-top:18px}

/* ── hotspots op de uitstalfoto ───────────────────────────────────────────── */
.vt-hsvlak{position:relative;display:block;background:var(--wit);
  border:1px solid var(--lijn);border-radius:16px;padding:14px}
.vt-hsvlak img{width:100%;height:auto;display:block}
.vt-hs{position:absolute;transform:translate(-50%,-50%);width:30px;height:30px;padding:0;
  border:0;border-radius:999px;background:var(--rood-btn);color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--disp);font-weight:700;font-size:13px;
  box-shadow:0 0 0 4px rgba(212,15,23,.18);
  transition:transform .18s ease,box-shadow .18s ease}
.vt-hs:hover,.vt-hs:focus-visible,.vt-hs.is-aan{transform:translate(-50%,-50%) scale(1.18);
  box-shadow:0 0 0 8px rgba(212,15,23,.22);z-index:3}
.vt-hs em{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);
  white-space:nowrap;font-style:normal;font-size:12.5px;font-weight:600;
  background:var(--inkt);color:#fff;padding:6px 11px;border-radius:8px;
  opacity:0;pointer-events:none;transition:opacity .18s ease}
.vt-hs em::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border:5px solid transparent;border-top-color:var(--inkt)}
.vt-hs:hover em,.vt-hs:focus-visible em,.vt-hs.is-aan em{opacity:1}
.vt-detailbij{margin:12px 0 0;font-size:13.5px;color:var(--grijs);text-align:center}
@media(prefers-reduced-motion:no-preference){
  .vt-hs{animation:vt-pols 2.6s ease-out infinite}
  .vt-hs:hover,.vt-hs:focus-visible,.vt-hs.is-aan{animation:none}
  @keyframes vt-pols{
    0%,70%{box-shadow:0 0 0 4px rgba(212,15,23,.18)}
    85%{box-shadow:0 0 0 11px rgba(212,15,23,0)}
    100%{box-shadow:0 0 0 4px rgba(212,15,23,.18)}
  }
}

/* ── inhoudslijst schuift gestaffeld in ───────────────────────────────────── */
[data-staffel] li{opacity:0;transform:translateX(-10px);
  transition:opacity .5s ease var(--vert,0ms),transform .5s ease var(--vert,0ms)}
[data-staffel].is-zichtbaar li{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  [data-staffel] li{opacity:1;transform:none;transition:none}
}

/* (de zachte gloed is er op verzoek weer uitgehaald) */


/* ── dock: navigatie die meegroeit met de cursor ──────────────────────────── */
/* Naar het aangeleverde component, maar zonder framer-motion: het is een
   schaal op basis van de afstand tot de muis. Alleen transform, dus geen jank. */
.vt-dock{position:fixed;left:50%;top:14px;transform:translateX(-50%);z-index:90;
  pointer-events:none}
.vt-dockpaneel{display:flex;align-items:center;gap:2px;padding:7px 10px;
  border-radius:20px;background:rgba(255,255,255,.9);border:1px solid var(--lijn);
  box-shadow:0 10px 40px rgba(11,11,13,.16);pointer-events:auto}
.vt-dockitem{position:relative;display:inline-flex;align-items:center;justify-content:center;
  gap:8px;height:44px;padding:0 16px;flex:none;border-radius:12px;background:transparent;
  color:var(--inkt-zacht);white-space:nowrap;
  font-family:var(--disp);font-weight:600;font-size:15px;letter-spacing:-.01em;
  transition:background .18s ease,color .18s ease}
.vt-dockitem:hover{background:var(--papier-2);color:var(--inkt)}
.vt-dockitem[aria-current]{background:var(--inkt);color:#fff}
/* het woord IS de knop; het pictogram staat er klein naast als herkenning */
.vt-docklabel{position:static;opacity:1;transform:none;pointer-events:auto;
  background:none;color:inherit;padding:0;border-radius:0;white-space:nowrap;
  font:inherit}
.vt-dockicoon{display:flex;align-items:center;justify-content:center;opacity:.55}
.vt-dockicoon svg{width:17px;height:17px}
.vt-dockitem:hover .vt-dockicoon,.vt-dockitem[aria-current] .vt-dockicoon{opacity:1}
/* het pictogram valt weg zodra de balk krap wordt, het woord blijft */
@media(max-width:1160px){.vt-dockicoon{display:none}
  .vt-dockitem{padding:0 13px;font-size:14.5px}}
@media(max-width:880px){.vt-dock{display:none}}   /* mobiel heeft de onderbalk al */
@media(prefers-reduced-motion:reduce){.vt-dockitem{transform:none!important}}

/* ── CTA's met de veer uit het dock-component ─────────────────────────────── */
/* framer-motion gebruikt een veer (mass .1, stiffness 150, damping 12). Die
   lichte doorschot zit hier in de easing; transform-only, dus geen jank. */
.vt-pill,.vt-ctaknop,.vt-prodknop,.vt-dockitem{
  transition:background .18s ease,border-color .18s ease,color .18s ease,
             transform .34s cubic-bezier(.34,1.56,.64,1);
  transform-origin:center bottom;will-change:transform}
.vt-pill:active,.vt-prodknop:active,.vt-ctaknop:active{transform:translateY(1px) scale(.98)}
@media(prefers-reduced-motion:reduce){
  .vt-pill,.vt-ctaknop,.vt-prodknop,.vt-dockitem{transform:none!important;
    transition:background .18s ease,border-color .18s ease,color .18s ease}
}

/* ── bedankpagina ─────────────────────────────────────────────────────────── */
.vt-bedankt{max-width:640px;margin:0 auto;padding:clamp(48px,8vw,110px) var(--pad) 0;
  text-align:center}
.vt-bvink{display:inline-flex;align-items:center;justify-content:center;width:78px;height:78px;
  margin-bottom:24px;border-radius:999px;background:#166534;color:#fff}
.vt-bedankt .vt-label{justify-content:center}
.vt-bedankt h1{font-size:clamp(30px,4.6vw,54px)}
.vt-bedankt .vt-lead{margin-left:auto;margin-right:auto}
.vt-bedankt .vt-heroknoppen{justify-content:center;margin-top:30px}
.vt-blijst{display:grid;gap:2px;margin:36px 0 0;text-align:left;border-top:1px solid var(--lijn)}
.vt-blijst li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:start;
  padding:18px 4px;border-bottom:1px solid var(--lijn)}
.vt-bnr{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;
  border-radius:999px;background:var(--papier-2);color:var(--inkt);
  font-family:var(--disp);font-weight:700;font-size:14px}
.vt-blijst strong{display:block;font-family:var(--disp);font-size:17px}
.vt-blijst span:not(.vt-bnr){color:var(--grijs);font-size:15px}
.vt-bedankt .vt-klein{margin-top:22px}

/* ── de dock IS de navigatie geworden (feedback: naar boven, vervangt de balk) ── */
@media(min-width:881px){
  /* De dock is de navigatie; de balk houdt alleen nog het logo en de
     offerteknop. Doorzichtig, zodat het één zwevende rij wordt. */
  .vt-nav{display:none}
  .vt-kop{grid-template-columns:auto 1fr auto;background:transparent;border-bottom:0;
    padding:0;pointer-events:none}
  .vt-kop>*{pointer-events:auto}
  /* 07-08: het logo zat in een wit tegeltje met een ronde hoek en een schaduw.
     Bij het oude platte woordmerk viel dat niet op; het nieuwe embleem heeft een
     eigen zwarte rand en dan zie je vooral het witte blok eromheen. Alleen het
     merk laten zweven dus. Geen filter/drop-shadow: dit element is sticky en
     hertekent bij elke scrollstap — precies waar het scrollen stroef van werd. */
  .vt-merk{grid-column:1;border-right:0;padding:14px var(--pad);
    background:transparent;box-shadow:none}
  /* zonder expliciete kolom belandt de knop in de vrijgekomen 1fr en rekt hij
     over de halve balk uit */
  .vt-mand{grid-column:3;border-left:0;border-radius:0 0 0 18px;min-height:68px;
    box-shadow:0 10px 34px rgba(11,11,13,.12)}
  .vt-belmob{display:none}
  .vt-dock{top:16px}
  .vt-dockpaneel{box-shadow:0 12px 36px rgba(11,11,13,.14)}
  /* de inhoud begint onder de zwevende rij */
  .vt-hero,.vt-gelhero,.vt-paginakop{padding-top:96px}
  .vt-hero,.vt-gelhero{padding-top:0}
}

/* ── confetti (alleen op de bedankpagina, ruimt zichzelf op) ─────────────── */
.vt-confetti{position:fixed;inset:0;z-index:95;pointer-events:none}

/* ── op maat: stappenprogramma ────────────────────────────────────────────── */
/* 17-08-2026 — 960px gaf op een breed scherm 480px leeg wit PER KANT (50% van
   1920). Feedback Dhiraj: "meer gebruik maken van de witte links en rechts balk
   die leeg is". Nu 1180px, gelijk aan de andere brede containers op de site.
   Blijft een max-width, dus mobiel (390px) verandert er niets. */
.vt-wizard{padding:clamp(28px,4vw,52px) var(--pad) clamp(48px,6vw,80px);
  max-width:1180px;margin:0 auto}
/* Icoon-stepper naar de aangeleverde referentie: alleen iconen met een dunne
   lijn ertussen, geen cijfers en geen labels — die staan al in de kop van de
   stap zelf. */
.vt-wbalk{display:flex;align-items:center;justify-content:center;
  margin:0 0 38px;list-style:none;padding:0}
.vt-wbol{display:flex;align-items:center;color:var(--lijn-sterk);transition:color .3s ease}
.vt-wbol+.vt-wbol::before{content:"";width:clamp(28px,7vw,78px);height:1px;
  background:var(--lijn-sterk);margin:0 6px;transition:background .3s ease}
.vt-wbol.is-klaar{color:var(--inkt)}
.vt-wbol.is-actief{color:var(--rood-tx)}
.vt-wbol.is-klaar+.vt-wbol::before,.vt-wbol.is-actief+.vt-wbol::before{background:var(--inkt-zacht)}
.vt-wbol svg{display:block}
.vt-wstap h2{font-size:clamp(24px,3.4vw,38px);margin-bottom:6px}
.vt-whulp{margin:0 0 18px;color:var(--grijs)}
.vt-stapkaarten{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:20px}
.vt-stapkaart{display:grid;gap:6px;justify-items:start;text-align:left;padding:20px;
  border:1px solid var(--lijn);border-radius:16px;background:var(--wit);cursor:pointer;
  transition:border-color .18s ease,background .18s ease,transform .18s ease}
.vt-stapkaart:hover{border-color:var(--inkt);transform:translateY(-2px)}
.vt-stapkaart.is-aan{border-color:var(--rood);background:#fdf1f1}
.vt-stapicoon{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;
  border-radius:12px;background:var(--papier);color:var(--rood-tx);margin-bottom:6px}
.vt-stapkaart.is-aan .vt-stapicoon{background:var(--rood-btn);color:#fff}
.vt-stapnaam{font-family:var(--disp);font-weight:700;font-size:17px}
.vt-staponder{font-size:13.5px;color:var(--grijs)}
.vt-wacties{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.vt-wsamen{margin:0 0 20px;color:var(--grijs);font-size:15px}
.vt-wkaart{display:grid;grid-template-columns:minmax(0,40%) minmax(0,1fr);gap:22px;
  border:1px solid var(--lijn);border-radius:18px;padding:20px;background:var(--wit)}
.vt-wfoto{background:var(--wit);border:1px solid var(--lijn);border-radius:12px;padding:10px;
  aspect-ratio:4/3;display:flex;align-items:center}
.vt-wfoto img{width:100%;height:100%;object-fit:contain}
.vt-wtekst h3{font-size:clamp(20px,2.4vw,28px)}
.vt-wpub{margin:6px 0 0;color:var(--grijs);font-size:14.5px}
.vt-wprijs{margin:12px 0 0}
.vt-wprijs strong{font-family:var(--disp);font-size:28px}
.vt-wlijst{margin:16px 0 0;display:grid;gap:6px}
.vt-wlijst li{position:relative;padding-left:18px;font-size:14.5px;color:var(--inkt-zacht)}
.vt-wlijst li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:2px;
  background:var(--rood)}
@media(max-width:760px){
  .vt-stapkaarten{grid-template-columns:1fr 1fr}
  .vt-wkaart{grid-template-columns:1fr}
  .vt-wbalk{grid-template-columns:repeat(5,1fr);gap:5px}
  .vt-wbol{font-size:0;gap:0;justify-content:center}
  .vt-wbol>span{font-size:12.5px}
}
@media(max-width:460px){.vt-stapkaarten{grid-template-columns:1fr}}

/* De pagina springt bij elke stap naar de wizard; zonder deze marge belandt
   de stepper onder de zwevende kopbalk. */
.vt-wizard{scroll-margin-top:110px}

/* ── uitklappanelen onder de dock ─────────────────────────────────────────── */
/* De dock verving de menubalk, en daarmee verdwenen de dropdowns. Ze komen hier
   terug: één paneel per icoon, gecentreerd onder de dock zodat een breed paneel
   nooit buiten het scherm valt. Alleen opacity/transform, dus geen jank. */
.vt-dockpaneel-uit{position:absolute;top:calc(100% + 10px);left:50%;
  width:min(880px,calc(100vw - 28px));padding:14px;border-radius:20px;
  background:var(--wit);border:1px solid var(--lijn);
  box-shadow:0 24px 60px rgba(11,11,13,.2);pointer-events:auto;
  transform:translateX(-50%) translateY(-8px);opacity:0;visibility:hidden;
  transition:opacity .2s ease,transform .26s cubic-bezier(.2,.8,.3,1),visibility .26s}
.vt-dockmenu{position:static}
.vt-dock.is-open .vt-dockpaneel-uit.is-uit{opacity:1;visibility:visible;
  transform:translateX(-50%) translateY(0)}
.vt-dpkop{margin:2px 4px 10px;font-family:var(--disp);font-weight:700;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--grijs)}
.vt-dockpaneel-uit .vt-paneellijst.twee{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.vt-dockpaneel-uit .vt-paneellijst.drie{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.vt-dockpaneel-uit .vt-paneellijst a{min-height:66px;align-content:center}
.vt-dockpaneel-uit .vt-paneelvoet{display:flex;align-items:center;justify-content:center;gap:8px;
  margin-top:10px;border-top:1px solid var(--lijn);color:var(--rood-tx)}
.vt-dockitem[aria-expanded="true"]{background:var(--inkt);color:#fff}
/* het chevrontje dat verraadt dat er iets uitklapt */
.vt-dockmenu>.vt-dockitem::after{content:"";position:absolute;bottom:5px;left:50%;
  width:11px;height:11px;margin-left:-5.5px;
  background:currentColor;opacity:.42;
  clip-path:polygon(50% 78%,4% 24%,17% 12%,50% 48%,83% 12%,96% 24%);
  transition:opacity .18s ease,transform .18s ease}
.vt-dockmenu>.vt-dockitem:hover::after,
.vt-dockmenu>.vt-dockitem[aria-expanded="true"]::after{opacity:.9;transform:translateY(1px)}
@media(max-width:880px){.vt-dockpaneel-uit{display:none!important}}
@media(prefers-reduced-motion:reduce){.vt-dockpaneel-uit{transition:opacity .12s ease}}

/* ── mobiel menu: compacter en duidelijk een niveau lager ─────────────────── */
/* De uitgeklapte lijst nam bijna 140 px per regel; dan zie je er drie en scrol
   je de rest blind voorbij. Nu passen er zeven op één scherm. */
@media(max-width:880px){
  .vt-menu.is-open .vt-setpaneel{background:var(--papier);border-radius:14px;
    padding:8px;margin:2px 0 8px}
  .vt-paneellijst{gap:2px}
  .vt-paneellijst a{grid-template-columns:46px minmax(0,1fr) auto;gap:11px;padding:8px;
    background:var(--wit);min-height:0}
  .vt-menufoto{width:46px;height:46px;flex:none}
  .vt-menutekst strong{font-size:14.5px}
  .vt-menutekst em{font-size:12px}
  .vt-menupijl{opacity:.4;transform:none;color:var(--lijn-sterk)}
  .vt-paneelvoet{margin-top:6px;padding:10px;font-size:14px;color:var(--rood-tx)}
  .vt-navlink{font-size:16px}
}

/* ── aanbod: kop met feiten ──────────────────────────────────────────────── */
.vt-aanbodhero{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:24px;align-items:end;background:var(--inkt);color:#fff;
  padding:clamp(96px,10vw,132px) var(--pad) clamp(30px,4vw,44px);overflow:hidden}
.vt-aanbodhero::before{content:"";position:absolute;inset:0;
  background:radial-gradient(90% 130% at 8% 0%,rgba(212,15,23,.34),transparent 60%)}
.vt-abinner{position:relative;max-width:760px}
.vt-aanbodhero h1{font-size:clamp(32px,5vw,60px);line-height:1.02;margin:6px 0 12px;color:#fff}
.vt-aanbodhero .vt-lead{color:rgba(255,255,255,.76);max-width:56ch;margin:0}
.vt-aanbodhero .vt-kruimel,.vt-aanbodhero .vt-kruimel a{color:rgba(255,255,255,.72)}
.vt-aanbodhero .vt-kruimelsep{color:rgba(255,255,255,.72)}
.vt-aanbodhero .vt-kruimel a:hover{color:#fff}
.vt-label.licht{color:var(--rood-licht)}
.vt-abfeiten{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.vt-abfeiten div{padding:9px 15px;border:1px solid rgba(255,255,255,.2);border-radius:999px;
  background:rgba(255,255,255,.06)}
.vt-abfeiten strong{font-family:var(--disp);font-size:15px}
.vt-abfeiten span{color:rgba(255,255,255,.62);font-size:13.5px;margin-left:7px}
.vt-abfoto{position:relative;width:190px;height:150px;border-radius:18px;overflow:hidden;
  background:var(--wit);flex:none}
.vt-abfoto img{width:100%;height:100%;object-fit:contain;padding:14px}

/* ── categoriestrook met diepte (naar de CodePen-parallax) ───────────────── */
.vt-cstrip{padding:clamp(28px,4vw,44px) 0 clamp(20px,3vw,34px);
  border-bottom:1px solid var(--lijn);background:var(--papier)}
.vt-csbalk{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;
  padding:0 var(--pad) 18px}
.vt-csbalk h2{font-size:clamp(20px,2.4vw,26px);margin:0}
.vt-csbalk p{margin:0;color:var(--grijs);font-size:14px}
/* het perspectief zit op de scrollende bak; kaarten met een andere translateZ
   schuiven daardoor met een andere snelheid mee */
.vt-csrail{display:flex;gap:26px;align-items:center;overflow-x:auto;overflow-y:hidden;
  padding:34px calc(var(--pad) + 4px) 44px;scrollbar-width:none;
  perspective:1.4px;transform-style:preserve-3d;cursor:grab;
  -webkit-overflow-scrolling:touch}
.vt-csrail::-webkit-scrollbar{display:none}
.vt-csrail.is-slepend{cursor:grabbing}
.vt-csrail:focus-visible{outline:2px solid var(--rood-btn);outline-offset:-4px}
.vt-cstrook{flex:none;width:212px;padding:14px;border-radius:20px;background:var(--wit);
  border:1px solid var(--lijn);box-shadow:0 12px 34px rgba(11,11,13,.07);
  transform:translateZ(var(--z)) translateY(var(--y));
  transition:box-shadow .24s ease,border-color .24s ease}
.vt-cstrook:hover{border-color:var(--rood-btn);box-shadow:0 20px 46px rgba(11,11,13,.16)}
.vt-csfoto{display:block;height:118px;border-radius:13px;overflow:hidden;background:var(--papier)}
.vt-csfoto img{width:100%;height:100%;object-fit:contain;padding:10px;
  transition:transform .4s cubic-bezier(.2,.8,.3,1)}
.vt-cstrook:hover .vt-csfoto img{transform:scale(1.07)}
.vt-cstekst{display:block;margin-top:12px}
.vt-cstekst strong{display:block;font-family:var(--disp);font-size:15.5px;line-height:1.2}
.vt-cstekst em{font-style:normal;font-size:12.5px;color:var(--grijs)}
@media(max-width:640px){
  .vt-csrail{gap:16px;padding:22px var(--pad) 30px;perspective:none}
  .vt-cstrook{width:168px;transform:none}
  .vt-aanbodhero{grid-template-columns:1fr}
  .vt-abfoto{display:none}
}
@media(prefers-reduced-motion:reduce){.vt-cstrook{transform:none}}

/* ── productkaarten: minder droog ────────────────────────────────────────── */
.vt-prod{transition:box-shadow .26s ease,border-color .26s ease,transform .26s ease}
.vt-prod:hover{box-shadow:0 22px 44px rgba(11,11,13,.1);border-color:var(--lijn-sterk);z-index:1}
.vt-prodfoto img{transition:transform .45s cubic-bezier(.2,.8,.3,1)}
.vt-prod:hover .vt-prodfoto img{transform:scale(1.06)}
.vt-prod:hover .vt-prodknop{background:var(--rood-btn);border-color:var(--rood-btn);color:#fff}
.vt-prodknop{transition:background .2s ease,border-color .2s ease,color .2s ease}
/* opkomen bij het in beeld scrollen */
.vt-op{opacity:0;transform:translateY(16px);
  transition:opacity .55s var(--ease),transform .55s var(--ease)}
.vt-op.is-in{opacity:1;transform:none}
.vt-prod.vt-op{opacity:0;transform:translateY(14px)}
.vt-prod.vt-op.is-in{opacity:1;transform:none;
  transition:opacity .5s ease,transform .5s cubic-bezier(.2,.8,.3,1)}
@media(prefers-reduced-motion:reduce){
  .vt-prod.vt-op{opacity:1;transform:none}
  .vt-prodfoto img,.vt-prod{transition:none}
}

/* ── op maat: stapteller, terugknop en de waaier ─────────────────────────── */
.vt-wtel{margin:0 0 14px;text-align:center;color:var(--grijs);font-size:14px}
.vt-wtel strong{color:var(--rood-tx);font-family:var(--disp)}
.vt-wtel span{color:var(--inkt)}
.vt-wterugknop{display:inline-flex;align-items:center;gap:8px;margin:0 0 14px;padding:8px 15px;
  border:1px solid var(--lijn-sterk);border-radius:999px;background:var(--wit);
  color:var(--inkt-zacht);font-family:var(--disp);font-weight:700;font-size:14px;cursor:pointer}
.vt-wterugknop:hover{border-color:var(--inkt);color:var(--inkt)}
.vt-wstap h2{margin-top:0}

/* De waaier: kaarten liggen over elkaar en draaien om hun onderkant. De kaart
   onder de muis komt rechtop naar voren. --i loopt van -2 tot 2. */
.vt-waaier{display:flex;justify-content:center;align-items:flex-end;padding:26px 0 8px}
.vt-wkaart{position:relative;display:block;flex:none;width:clamp(150px,17vw,208px);
  margin:0 clamp(-17px,-1.2vw,-7px);padding:0;border:0;background:none;cursor:pointer;
  transform-origin:bottom center;
  transform:rotate(calc(var(--i) * 5.5deg)) translateY(calc(abs(var(--i)) * 7px));
  transition:transform .34s cubic-bezier(.2,.8,.3,1),filter .3s ease;
  filter:drop-shadow(0 14px 30px rgba(11,11,13,.22))}
.vt-wkaart:hover,.vt-wkaart:focus-visible{z-index:3;
  transform:rotate(0deg) translateY(-16px) scale(1.06);
  filter:drop-shadow(0 26px 50px rgba(11,11,13,.32))}
.vt-wkaart.is-aan{z-index:4;transform:rotate(0deg) translateY(-16px) scale(1.06)}
.vt-wkfoto{display:block;position:relative;width:100%;aspect-ratio:3/4;overflow:hidden;
  border-radius:18px;border:4px solid var(--wit);background:var(--inkt)}
.vt-wkfoto img{width:100%;height:100%;object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.8,.3,1)}
.vt-wkaart:hover .vt-wkfoto img{transform:scale(1.07)}
.vt-wkfoto::after{content:"";position:absolute;inset:auto 0 0;height:62%;
  background:linear-gradient(to top,rgba(8,8,10,.9),rgba(8,8,10,.45) 45%,transparent)}
.vt-wktekst{position:absolute;left:12px;right:12px;bottom:12px;z-index:2;text-align:left;
  transition:right .3s ease}
/* de buurkaart legt zich over de rechterkant; daar hoort geen tekst te staan */
.vt-wkaart:not(:last-child) .vt-wktekst{right:34px}
.vt-wkaart:hover .vt-wktekst,.vt-wkaart:focus-visible .vt-wktekst,
.vt-wkaart.is-aan .vt-wktekst{right:12px}
.vt-wktekst strong{display:block;font-family:var(--disp);font-size:clamp(15px,1.5vw,19px);
  line-height:1.1;color:#fff}
.vt-wktekst em{display:block;margin-top:3px;font-style:normal;font-size:12.5px;
  color:rgba(255,255,255,.78);line-height:1.25}
.vt-wkaart.is-aan .vt-wkfoto{border-color:var(--rood-btn)}
@media(max-width:760px){
  /* een waaier van vijf past niet op een telefoon: dan naast elkaar schuiven */
  .vt-waaier{justify-content:flex-start;overflow-x:auto;gap:12px;padding:16px var(--pad) 14px;
    margin:0 calc(var(--pad) * -1);scrollbar-width:none}
  .vt-waaier::-webkit-scrollbar{display:none}
  .vt-wkaart{width:158px;margin:0;transform:none;filter:none;
    box-shadow:0 10px 26px rgba(11,11,13,.16);border-radius:18px}
  .vt-wkaart:hover,.vt-wkaart.is-aan{transform:none}
}
@media(prefers-reduced-motion:reduce){
  .vt-wkaart{transition:none}
  .vt-wkaart:hover,.vt-wkaart:focus-visible,.vt-wkaart.is-aan{transform:rotate(0) translateY(0)}
}

/* de kop krijgt focus bij een stapwissel (voor schermlezers); die ring hoort
   daar niet zichtbaar te zijn, want het is geen bedienbaar element */
.vt-wstap h2[tabindex="-1"]:focus{outline:none}
.vt-wizard{min-height:520px}
.vt-gastrij{display:flex;gap:2px;align-items:flex-end;height:26px;margin-bottom:12px;
  color:var(--rood-tx)}
.vt-gastrij svg:nth-child(n+4){opacity:.55}
.vt-stapkaart{transition:border-color .2s ease,box-shadow .24s ease,transform .24s ease}
.vt-stapkaart:hover{border-color:var(--rood-btn);box-shadow:0 16px 34px rgba(11,11,13,.09);
  transform:translateY(-3px)}
@media(prefers-reduced-motion:reduce){.vt-stapkaart:hover{transform:none}}

/* ── hero met foto ───────────────────────────────────────────────────────── */
.vt-aanbodhero.met-beeld{grid-template-columns:1fr;align-items:end;
  min-height:clamp(300px,38vw,440px);padding-bottom:clamp(34px,4vw,52px)}
.vt-abbeeld{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:0}
/* De tekst moet leesbaar blijven op elke foto, maar de sluier lag als een deken
   over het hele beeld. Sinds 07-08 zijn de reeksbeelden onze eigen setfoto's op
   een lichte studio-achtergrond, en die werden daar grauw van. Nu twee lagen die
   allebei naar rechts open trekken: donker waar de tekst staat, helder waar de
   apparatuur staat. De onderrand blijft donker, want daar liggen de feitenpillen. */
.vt-aanbodhero.met-beeld::before{z-index:1;
  background:linear-gradient(to right,rgba(8,8,10,.90) 0%,rgba(8,8,10,.78) 34%,
             rgba(8,8,10,.34) 62%,rgba(8,8,10,.14) 100%),
             linear-gradient(to top,rgba(8,8,10,.72) 0%,rgba(8,8,10,.28) 26%,
             rgba(8,8,10,0) 58%),
             radial-gradient(70% 100% at 6% 100%,rgba(212,15,23,.26),transparent 62%)}
.vt-aanbodhero.met-beeld .vt-abinner{z-index:2}

/* ── events: overzichtskaarten ───────────────────────────────────────────── */
.vt-evgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;
  padding:clamp(30px,4vw,52px) var(--pad)}
.vt-evkaart{display:flex;flex-direction:column;border:1px solid var(--lijn);
  border-radius:22px;overflow:hidden;background:var(--wit);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .3s var(--ease)}
.vt-evkaart:hover,.vt-evkaart:focus-within{border-color:var(--trede,var(--lijn-sterk));
  box-shadow:0 26px 54px rgba(11,11,13,.12),0 0 0 1px color-mix(in srgb,var(--trede,#c9c6bd) 24%,transparent);
  transform:translateY(-5px)}
.vt-evkaart.is-preview{border-color:var(--trede,var(--lijn-sterk));
  box-shadow:0 28px 58px rgba(11,11,13,.13),0 0 0 1px color-mix(in srgb,var(--trede,#c9c6bd) 38%,transparent)}
.vt-evfoto{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:var(--inkt)}
.vt-evfoto img{width:100%;height:100%;object-fit:cover;
  transition:transform .55s cubic-bezier(.2,.8,.3,1)}
.vt-evkaart:hover .vt-evfoto img,.vt-evkaart:focus-within .vt-evfoto img{transform:scale(1.045)}
.vt-evfoto::after{content:"";position:absolute;inset:auto 0 0;height:60%;
  background:linear-gradient(to top,rgba(8,8,10,.86),transparent)}
.vt-evnaam{position:absolute;left:20px;bottom:16px;z-index:2;color:#fff;
  font-family:var(--disp);font-weight:700;font-size:clamp(21px,2.4vw,28px)}
.vt-evinfo{display:flex;flex-direction:column;gap:12px;padding:20px 22px 22px}
.vt-evkort{margin:0;color:var(--inkt-zacht)}
.vt-evlabel{margin:0;font-family:var(--disp);font-weight:700;font-size:12px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--grijs)}
.vt-evsets{list-style:none;display:grid;gap:7px;margin:0;padding:0}
.vt-evsetlink{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px;
  padding:10px 12px;border-radius:12px;background:var(--papier);border:1px solid transparent;
  font-size:14.5px;transition:background .2s ease,color .2s ease,border-color .2s ease,
  box-shadow .2s ease,transform .2s ease}
.vt-evsets li.is-tier .vt-evsetlink:hover,.vt-evsets li.is-tier .vt-evsetlink:focus-visible,
.vt-evsets li.is-active .vt-evsetlink{background:#fff;border-color:var(--trede);color:var(--trede2);
  box-shadow:0 13px 28px -20px var(--trede);transform:translateX(4px)}
.vt-evsets span{color:var(--grijs);font-size:13px;white-space:nowrap}
.vt-evpreview{height:0;opacity:0;overflow:hidden;border-radius:14px;
  transition:height .32s var(--ease),opacity .24s ease,margin .24s ease}
/* 06-08 · Was 150 px hoog met de uitstalfoto erin: die werd tot een strookje
   geperst en zag er op elke kaart hetzelfde uit. Nu de setfoto van díe set, en
   een bak die hoog genoeg is om hem te laten zien. Het beeld staat op `contain`
   en gecentreerd — bij `cover` zou een 4:3-foto in deze brede bak ruim de helft
   verliezen, en juist het afsnijden was de klacht. */
.vt-evkaart.is-preview .vt-evpreview{height:236px;opacity:1;margin-top:6px}
.vt-evpreview img{display:block;width:auto;max-width:100%;height:100%;margin:0 auto;
  object-fit:contain;background:var(--papier);border:1px solid var(--lijn);border-radius:14px}
.vt-evinfo .vt-pill{margin-top:4px;align-self:flex-start}
@media(max-width:880px){
  .vt-evgrid{grid-template-columns:1fr}
  .vt-evkaart.is-preview .vt-evpreview{height:186px}
  .vt-evsets span{white-space:normal;text-align:right}
}
/* eerste kaart over de volle breedte: vijf events geven anders een wees-kaart */
@media(min-width:881px){
  .vt-evgrid > .vt-evkaart:first-child{grid-column:1/-1;flex-direction:row}
  .vt-evgrid > .vt-evkaart:first-child .vt-evfoto{flex:0 0 52%;aspect-ratio:auto}
  .vt-evgrid > .vt-evkaart:first-child .vt-evinfo{flex:1;justify-content:center;padding:30px 34px}
  .vt-evgrid > .vt-evkaart:first-child .vt-evnaam{font-size:32px}
}

/* reekskaarten op /sets/ */
.vt-fam{transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.vt-fam:hover{transform:translateY(-5px);box-shadow:0 22px 46px rgba(11,11,13,.10)}
.vt-famfoto img{transition:transform .6s var(--ease)}
.vt-fam:hover .vt-famfoto img{transform:scale(1.05)}
.vt-faminfo .vt-pill-vol{transition:transform .3s var(--ease)}
.vt-fam:hover .vt-faminfo .vt-pill-vol{transform:translateX(3px)}

/* wat wij leveren / wat u zelf regelt */
/* Twee LOSSE kaarten in plaats van een breed vak met een haarlijn ertussen
   (07-08-2026, Lenny: "ik vond de indeling lelijk"). Wat er mis was: beide helften
   zagen er precies hetzelfde uit, dus je las niet dat het om twee verschillende
   dingen ging, en de twee iconen hadden dezelfde rode kleur en hetzelfde gewicht.
   Nu: wat wij doen krijgt nadruk (witte kaart, rode accentlijn, rode vinkjes),
   wat de klant zelf regelt blijft rustig papier met open rondjes. */
.vt-lever{display:grid;gap:14px}
@media(min-width:820px){.vt-lever{grid-template-columns:repeat(2,1fr);gap:18px}}
.vt-leverkaart{position:relative;padding:26px 26px 28px;border-radius:var(--r);
  border:1px solid var(--lijn);background:var(--wit);overflow:hidden}
.vt-leverkaart::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--rood)}
.vt-leverkaart.is-zelf{background:var(--papier);border-color:var(--lijn)}
.vt-leverkaart.is-zelf::before{background:var(--lijn-sterk)}
.vt-leverkop{display:flex;align-items:center;gap:11px;margin:0 0 16px;
  font-family:var(--disp);font-weight:700;font-size:17px;letter-spacing:-.01em}
.vt-leverkop i{display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;flex:none;
  background:var(--rood);color:#fff}
.vt-leverkop i svg{display:block}
.is-zelf .vt-leverkop i{background:transparent;color:var(--grijs);
  box-shadow:inset 0 0 0 1.5px var(--lijn-sterk)}
.vt-leverlijst{margin:0;padding:0;list-style:none;display:grid;gap:11px}
.vt-leverlijst li{position:relative;padding-left:22px;color:var(--inkt-zacht);
  font-size:15px;line-height:1.55}
.vt-leverlijst li::before{content:"";position:absolute;left:1px;top:8px;width:8px;height:8px;
  border-radius:50%;background:var(--rood)}
.vt-lever .zelf li::before{background:transparent;box-shadow:inset 0 0 0 1.5px var(--lijn-sterk)}
.vt-levernoot{margin:12px 0 0;color:var(--grijs);font-size:13.5px}
@media(prefers-reduced-motion:reduce){
  .vt-evkaart,.vt-evfoto img,.vt-fam,.vt-famfoto img,.vt-set-tier,.vt-aircard,.vt-airmedia img{
    transition:none!important}
  .vt-tredelabel,.vt-set-tier::before{animation:none!important}
  .vt-evkaart:hover,.vt-fam:hover,.vt-set-tier:hover,.vt-aircard:hover{transform:none}
}

/* ── FAQ: beeld links, vragen rechts ──────────────────────────────────────────
   Opmaak aangeleverd door Lenny (04-08). De referentie is donker; hier licht
   gehouden, want de homepagina heeft al een zwarte werkwijze-strook en een
   zwarte voet - een derde donker blok maakt de onderkant één massa. */
.vt-faq{padding:clamp(48px,6vw,84px) var(--pad)}
.vt-faqrij{display:grid;gap:clamp(28px,4vw,56px);align-items:start}
@media(min-width:940px){.vt-faqrij{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr)}}
.vt-faqbeeld{border-radius:18px;overflow:hidden;background:var(--papier-2)}
.vt-faqbeeld img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5;display:block}
@media(max-width:939px){.vt-faqbeeld img{aspect-ratio:16/9}}
.vt-faqlabel{margin:0;font-family:var(--disp);font-weight:700;font-size:13px;letter-spacing:.02em;
  color:var(--rood-tx)}
.vt-faq h2{margin:10px 0 0;font-size:clamp(30px,4.6vw,54px);line-height:1.04}
.vt-faqlead{margin:14px 0 0;color:var(--grijs);max-width:60ch}
.vt-faq .vt-vragen{margin-top:clamp(22px,3vw,34px)}

/* ── reeks-navigatie (verving de gastenkiezer, 05-08) ─────────────────────────
   De filter toonde bij elke keuze alles, omdat elke set "tot X" is en dus vanaf
   nul meetelt. Lenny: "filters werken niet en zijn eigenlijk niet nodig; zet daar
   liever de categorie naar de andere opties." Deze plek is nu een sprong naar de
   andere reeksen, met de huidige uitgelicht. */
.vt-reeksnav{padding:0}
.vt-reekskop{margin:0 0 12px;font-family:var(--disp);font-weight:700;font-size:12px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--grijs)}
.vt-reeksnav ul{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.vt-reekslink{display:inline-flex;align-items:baseline;gap:9px;padding:11px 18px;
  border:1px solid var(--lijn-sterk);border-radius:999px;background:var(--wit);
  font-family:var(--disp);font-weight:600;font-size:15px;
  transition:border-color .2s ease,background .2s ease,transform .2s var(--ease)}
.vt-reekslink span{font-family:var(--sans);font-weight:400;font-size:13px;color:var(--grijs)}
.vt-reekslink:hover{border-color:var(--inkt);transform:translateY(-1px)}
.vt-reekslink.is-hier{background:var(--inkt);border-color:var(--inkt);color:#fff;cursor:default}
.vt-reekslink.is-hier span{color:rgba(255,255,255,.65)}
.vt-reekslink.is-hier:hover{transform:none}
@media(prefers-reduced-motion:reduce){.vt-reekslink:hover{transform:none}}

/* ── aanbod: vaste categoriekolom links, raster rechts (05-08) ────────────────
   Verving de horizontale rijen met "Bekijk alles". Filteren gebeurt in de
   pagina, dus je hoeft nergens heen om je categorie te zien. */
.vt-airlayout{display:grid;gap:clamp(22px,3vw,40px);padding:clamp(26px,3.5vw,46px) var(--pad) clamp(40px,5vw,70px)}
@media(min-width:940px){.vt-airlayout{grid-template-columns:minmax(210px,248px) minmax(0,1fr);align-items:start}}
.vt-filterkolom{position:sticky;top:84px;min-width:0}
@media(max-width:939px){.vt-filterkolom{position:static}}
.vt-filterkop{margin:0 0 10px;font-family:var(--disp);font-weight:700;font-size:12px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--grijs)}
.vt-filterlijst{list-style:none;margin:0;padding:0;display:grid;gap:2px}
@media(max-width:939px){.vt-filterlijst{grid-auto-flow:column;grid-auto-columns:max-content;
  overflow-x:auto;gap:8px;padding-bottom:6px;-webkit-overflow-scrolling:touch}}
.vt-filterknop{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  min-height:42px;padding:9px 13px;border:1px solid transparent;border-radius:11px;
  background:transparent;color:var(--inkt-zacht);text-align:left;
  font-family:var(--disp);font-weight:600;font-size:14.5px;
  transition:background .18s ease,color .18s ease,border-color .18s ease}
.vt-filterknop span{font-family:var(--sans);font-weight:400;font-size:13px;color:var(--grijs)}
.vt-filterknop:hover{background:var(--papier-2)}
.vt-filterknop.is-aan{background:var(--inkt);color:#fff;border-color:var(--inkt)}
.vt-filterknop.is-aan span{color:rgba(255,255,255,.6)}
@media(max-width:939px){.vt-filterknop{width:auto;border:1px solid var(--lijn-sterk);border-radius:999px}}
.vt-filternoot{margin:16px 0 0;font-size:13px;color:var(--grijs);line-height:1.5}
@media(max-width:939px){.vt-filternoot{display:none}}
.vt-filteruitslag{margin:0 0 14px;font-family:var(--disp);font-weight:600;font-size:14px;color:var(--grijs)}
.vt-airgrid{display:block}
/* 18-08: de kaarten zitten nu per categorie in een .vt-airgroep. Het raster is
   daarmee van .vt-airgrid naar .vt-airrij verhuisd; .vt-airgrid is de stapel. */
.vt-airrij{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.vt-airrij .vt-aircard{width:auto;min-width:0}
.vt-airgroep+.vt-airgroep{margin-top:clamp(30px,4vw,52px)}
.vt-airgroep[hidden]{display:none}
.vt-airgroepkop{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding-bottom:9px;border-bottom:2px solid var(--inkt)}
.vt-airgroepkop h3{margin:0;font-size:clamp(19px,2vw,24px);line-height:1.15}
.vt-airgroepkop span{flex:none;font-size:13px;color:var(--grijs-grond)}
.vt-airgroepsub{margin:9px 0 16px;max-width:70ch;font-size:14px;color:var(--grijs-grond)}
.vt-aircard[hidden]{display:none!important}

/* ── setsoverzicht: uitklappende panelen (05-08) ──────────────────────────────
   Eén reeks breed, de rest als smalle strook. Alleen flex-grow en opacity
   bewegen; de foto's staan stil, dus geen herschilder-storm tijdens het scrollen. */
.vt-setpanelen{display:flex;gap:10px;padding:clamp(22px,3vw,40px) var(--pad) clamp(38px,5vw,64px);
  min-height:clamp(360px,46vw,540px)}
.vt-setpaneel{position:relative;flex:1 1 0;min-width:0;border-radius:18px;overflow:hidden;
  background:var(--inkt);transition:flex-grow .55s var(--ease)}
.vt-setpaneel.is-open{flex-grow:4.2}
.vt-setpaneel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:opacity .5s var(--ease);opacity:.72}
.vt-setpaneel.is-open img{opacity:1}
.vt-setpaneelscrim{position:absolute;inset:0;
  background:linear-gradient(to top,rgba(8,8,10,.9) 6%,rgba(8,8,10,.45) 46%,rgba(8,8,10,.18))}
.vt-setpaneelvlak{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
  gap:10px;padding:clamp(18px,2vw,28px);color:#fff}
.vt-setpaneelnaam{font-family:var(--disp);font-weight:700;font-size:clamp(19px,2vw,30px);
  line-height:1.08;white-space:nowrap}
/* smalle strook: de naam staat verticaal, zodat hij leesbaar blijft */
/* de langste naam ("Sets met LED") liep boven het paneel uit -> kleiner en van
   onderaf gestapeld, zodat elke naam past ongeacht de lengte */
.vt-setpaneel:not(.is-open) .vt-setpaneelnaam{writing-mode:vertical-rl;transform:rotate(180deg);
  align-self:flex-start;margin-bottom:0;margin-top:auto;font-size:clamp(16px,1.5vw,21px);
  max-height:100%;overflow:hidden}
.vt-setpaneelmeer{display:grid;gap:8px;max-width:44ch;opacity:0;transform:translateY(10px);
  transition:opacity .45s var(--ease),transform .45s var(--ease);pointer-events:none}
.vt-setpaneel.is-open .vt-setpaneelmeer{opacity:1;transform:none;pointer-events:auto}
.vt-setpaneelkort{color:rgba(255,255,255,.8);font-size:15px;line-height:1.45}
.vt-setpaneelfeit{font-family:var(--disp);font-weight:600;font-size:14px;color:rgba(255,255,255,.66)}
.vt-setpaneelcta{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;margin-top:4px;
  padding:11px 20px;border-radius:999px;background:#fff;color:var(--inkt);
  font-family:var(--disp);font-weight:600;font-size:14.5px}
.vt-setpaneelvlak:focus-visible{outline:3px solid #fff;outline-offset:-6px}
@media(max-width:880px){
  .vt-setpanelen{flex-direction:column;min-height:0}
  .vt-setpaneel{flex:none;height:210px}
  .vt-setpaneel.is-open{flex-grow:0;height:300px}
  .vt-setpaneel img{opacity:1}
  .vt-setpaneel:not(.is-open) .vt-setpaneelnaam{writing-mode:horizontal-tb;transform:none;margin-bottom:0}
  .vt-setpaneelmeer{opacity:1;transform:none;pointer-events:auto}
}
@media(prefers-reduced-motion:reduce){
  .vt-setpaneel,.vt-setpaneel img,.vt-setpaneelmeer{transition:none!important}
}

/* Op de offertepagina zelf voegt de offerteknop rechtsboven niets toe: je staat
   er al, en hij liep daar half buiten beeld. */
.vt-mand.is-verborgen{display:none}

/* Feitenrij onder een tekstkop (donker op wit) - de variant op de beeldhero
   staat op .vt-abfeiten en is licht op de foto. */
.vt-kopfeiten{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.vt-kopfeiten div{padding:9px 15px;border:1px solid var(--lijn);border-radius:999px;
  background:var(--wit)}
.vt-kopfeiten strong{font-family:var(--disp);font-size:15px}
.vt-kopfeiten span{color:var(--grijs);font-size:13.5px;margin-left:7px}

/* ── Juridische pagina's en 404 (09-08) ───────────────────────────────────────
   Eigen tokens van de site gebruikt (--inkt, --papier-2, --lijn, --rood-tx), zodat
   deze pagina's meelopen als het palet ooit verandert. Geen backdrop-filter en geen
   mix-blend-mode: dat zijn de twee dingen die het scrollen stroef maken. */
.vt-jur{max-width:760px;margin:0 auto;padding:56px var(--pad) 96px}
.vt-jurkop{border-bottom:1px solid var(--lijn);padding-bottom:26px;margin-bottom:8px}
.vt-jurkop h1{font-family:var(--disp);font-size:clamp(30px,5vw,44px);line-height:1.08;
  letter-spacing:-.02em;margin:10px 0 0}
.vt-jurlead{color:var(--inkt-zacht);font-size:17px;line-height:1.6;margin:12px 0 0;max-width:56ch}
.vt-kruimel{font-size:13px;color:var(--inkt-zacht)}
.vt-kruimel a{color:var(--inkt-zacht);text-decoration:underline;text-underline-offset:3px}
.vt-kruimel a:hover{color:var(--rood-tx)}

.vt-jurblok{padding:30px 0;border-bottom:1px solid var(--lijn)}
.vt-jurblok:last-child{border-bottom:0}
.vt-jurblok h2{display:flex;align-items:baseline;gap:12px;font-family:var(--disp);
  font-size:20px;letter-spacing:-.01em;margin:0 0 12px}
.vt-jurblok h2 span{font-size:13px;font-variant-numeric:tabular-nums;color:var(--rood-tx);
  min-width:22px}
.vt-jurblok p{margin:0 0 12px;line-height:1.68;color:var(--inkt);max-width:62ch}
.vt-jurblok p:last-child{margin-bottom:0}
.vt-jurblok code{background:var(--papier-2);border:1px solid var(--lijn);border-radius:5px;
  padding:1px 6px;font-size:.92em}

/* Concept-waarschuwing en de open punten erin. Bewust opvallend: deze pagina mag
   niet per ongeluk als vastgesteld doorgaan. */
.vt-jurwaarschuwing{margin:26px 0 0;padding:16px 18px;border:1px solid var(--rood);
  border-left-width:4px;border-radius:var(--r);background:var(--rood-licht);
  color:var(--inkt);line-height:1.6;font-size:15px}
.vt-open{display:inline-block;background:var(--rood-tx);color:#fff;border-radius:4px;
  padding:1px 7px;font-size:12px;font-weight:600;letter-spacing:.02em;white-space:nowrap}

.vt-vier{max-width:640px;margin:0 auto;padding:96px var(--pad) 120px;text-align:center}
.vt-vier h1{font-family:var(--disp);font-size:clamp(28px,5vw,40px);line-height:1.1;
  letter-spacing:-.02em;margin:8px 0 0}
.vt-vier .vt-jurlead{margin-left:auto;margin-right:auto}
.vt-vierknoppen{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:26px}
@media(max-width:600px){
  .vt-jur{padding-top:34px}
  .vt-vierknoppen .vt-pill{width:100%;justify-content:center}
}

/* 17-08-2026 — productbeeld dat er nog niet is. Eerlijk vlak in plaats van een
   <img> die 404 geeft. Zelfde maatverhouding als een echte productfoto. */
.vt-fotovolgt{display:flex;align-items:center;justify-content:center;width:100%;
  aspect-ratio:450/324;background:var(--papier-2);color:var(--grijs);
  border-bottom:1px solid var(--lijn)}
.vt-fotovolgt span{font-size:13px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase}

/* ══════════════════════════════════════════════════════════════════════════
   18-08-2026 — DE ONTBREKENDE MIDDENTOON (desktop)

   Gemeten over acht pagina's: 54,9% wit + 32,7% bijna-zwart = 87,6%, en maar
   4,8% in de lichte middenband. Daardoor leest het wit als leegte in plaats van
   als rust. De referentie van de ondernemer (powersounds.nl) is met 70,4%
   bijna-wit zelfs WITTER dan wij; het verschil is dat daar pagina, kaart en
   fototegel drie verschillende waarden hebben en bij ons alle drie #ffffff.

   Alleen desktop: mobiel doet dit sinds 06-08 al via de iOS-richting in
   mobiel.css (--wit:#f2f2f7 als grond, --papier:#ffffff als kaart). Die blijft
   ongemoeid — vandaar min-width:881px, precies het spiegelbeeld van de
   mobiel-only-afspraak.
   ══════════════════════════════════════════════════════════════════════════ */
@media(min-width:881px){

  /* ── de catalogus krijgt grond ─────────────────────────────────────────── */
  /* --grijs binnen een getinte sectie opnieuw definieren in plaats van per
     element overschrijven: elk kind dat var(--grijs) gebruikt pakt hem dan
     vanzelf. Op wit haalt deze 6,05:1, op --grond 5,08:1; de oude #6b6b74
     zakte op --grond naar 4,43:1 en haalde de norm dus niet meer. */
  .vt-air,.vt-catalogus{background:var(--grond);--grijs:var(--grijs-grond)}

  /* De kaart is nu het lichtste vlak op de pagina en heeft geen rand meer
     nodig om zich te begrenzen. In ruststand een lichte schaduw: van de zeven
     gemeten catalogussen heeft alleen deze site die niet, en dat is precies
     wat een kaart tot een object maakt. Statisch, dus geen jank. */
  /* .vt-prod had geen eigen achtergrond en stond dus doorzichtig op de grond;
     op een getinte grond moet hij expliciet wit worden om kaart te blijven. */
  .vt-aircard,.vt-prod{background:var(--wit);border-color:transparent;
    box-shadow:0 1px 2px rgba(11,11,13,.05),0 6px 16px rgba(11,11,13,.045)}
  .vt-aircard:hover,.vt-aircard:focus-within,.vt-prod:hover{border-color:transparent}
  .vt-prod:hover{background:var(--wit)}

  /* Fotovak een stap terug ten opzichte van de kaart. Dit werkt pas echt zodra
     de witte achtergrond uit de productfoto's is; met een dekkende witte JPG
     zie je alleen de rand eromheen. */
  .vt-airmedia,.vt-prodfoto{background:var(--papier);border-color:transparent}
  .vt-airmedia{border-bottom:1px solid var(--lijn)}

  /* ── tekstkoppen zonder beeld ──────────────────────────────────────────
     /sets en /offerte openen als enige zonder donkere hero: boven de vouw
     respectievelijk 71,9% en 92,6% bijna-wit, en dat zijn de twee pagina's
     waar de order valt. */
  .vt-paginakop{background:var(--grond);border-left:4px solid var(--rood);--grijs:var(--grijs-grond)}
}

/* ══════════════════════════════════════════════════════════════════════════
   18-08-2026 — punt 1 en 3 uit de designskill-review

   Bronnen: web-interface-guidelines (raakvlakken, CLS), make-interfaces-feel-
   better (tabular-nums, text-wrap), WCAG 2.5.8 (24 px).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── koppen netter afbreken ──────────────────────────────────────────────
   `balance` verdeelt de regels van een kop gelijkmatig; browsers passen het
   tot ongeveer zes regels toe, dus het is veilig op elke kop. `pretty` op de
   lopende tekst voorkomt een laatste regel met één woord erop. */
h1,h2,h3,.vt-airgroepkop h3{text-wrap:balance}
.vt-lead,.vt-airgroepsub,.vt-prodsub,.vt-setsub{text-wrap:pretty}

/* ── bedragen op tabellarische cijfers ───────────────────────────────────
   Zonder dit heeft elk cijfer een eigen breedte. Op /offerte lopen de
   bedragen mee terwijl je het formulier invult, en dan verspringt de kolom
   bij elke wijziging. Ook toegepast op de aantallen in het filter en de
   categoriekoppen, want die staan onder elkaar en horen uit te lijnen. */
.vt-setprijs,.vt-prodprijs,.vt-airfoot strong,.vt-bontotaal dd,
.vt-filterknop span,.vt-airgroepkop span,.vt-dagen,.vt-vanaf,
.vt-herotekst strong,.vt-gelvanaf,.vt-popprijs,.vt-planprijs,.vt-menutekst em{
  font-variant-numeric:tabular-nums}

/* ── raakvlakken naar 24 px (WCAG 2.5.8) ─────────────────────────────────
   Kruimelpad- en voettekstlinks stonden op 20,8 en 22,4 px: ze hebben geen
   padding en worden dus precies zo hoog als hun regelhoogte. Met flex plus
   min-height groeit de link naar 24 px zonder dat de tekst verschuift. */
.vt-kruimel a,.vt-voetrij nav a,.vt-voetrij>div:last-child a{
  display:inline-flex;align-items:center;min-height:24px}

/* Het plusje op een productkaart was 36×36. WCAG haalt hij daarmee wel, maar
   40 px is de maat waarop een duim betrouwbaar raakt. */
.vt-airadd{width:40px;height:40px}

/* ══════════════════════════════════════════════════════════════════════════
   18-08-2026 — punt 2: aanraking en systeemkleuren

   Vier dingen die nergens in de CSS stonden. Uit de Web Interface Guidelines.
   ══════════════════════════════════════════════════════════════════════════ */

/* De site is alleen licht. Zonder deze regel geeft het systeem de scrollbars,
   selectievelden en datumkiezers zijn eigen kleuren, en op een toestel dat in
   donkere modus staat botst dat met de pagina. */
:root{color-scheme:light}

/* Zonder `manipulation` wacht een mobiele browser ~300 ms na een tik om te
   zien of er een tweede tik komt (dubbeltikken om in te zoomen). Knijpen om te
   zoomen blijft gewoon werken; alleen dubbeltikken vervalt. */
a,button,input,select,textarea,label,summary,[role="button"],[onclick]{
  touch-action:manipulation}

/* De standaard is een grijs blok over het hele raakvlak, dat bij een ronde knop
   vierkant is en er goedkoop uitziet. Bewust vervangen door het merkrood op 12%.
   Niet volledig doorzichtig maken: dan verdwijnt de tikbevestiging, en niet elk
   element heeft al een eigen :active-staat. */
html{-webkit-tap-highlight-color:rgba(236,28,36,.12)}