/* ============================================================================
   PRIJSBLOK — de optelsom, de dienstkaarten en de tussenstops
   ----------------------------------------------------------------------------
   Dit bestand hoort bij prijsblok.js en wordt door BEIDE publieke pagina's
   geladen: landing.html en boeken.html. Eén bestand, één gedrag — zodat de
   twee pagina's niet uit elkaar kunnen lopen.

   KLEUREN KOMEN VAN DE PAGINA, NIET VAN HIER.
   Elke kleur hieronder is een var() met een terugval. De pagina zet
   --accent (landing.html) of --goud (boeken.html); wij gebruiken wat er is.
   Zo houdt elke pagina zijn eigen jasje en staat er hier geen enkele
   hardgecodeerde huisstijlkleur die later uit de pas gaat lopen.

   Er staat in dit bestand GEEN bedrag en geen tarief. Alles wat een getal is,
   komt van de server.
   ============================================================================ */

.vz{
  /* De brug tussen de twee paletten. landing.html heeft --accent, boeken.html
     heeft --goud; beide hebben --tekst, --tekst-2, --lijn en --vlak-2. */
  --vz-accent: var(--accent, var(--goud, #E0B970));
  --vz-tekst:  var(--tekst, #F4F7FA);
  --vz-tekst-2:var(--tekst-2, #9EAAB7);
  --vz-tekst-3:var(--tekst-3, #74808D);
  --vz-lijn:   var(--lijn, rgba(244,247,250,.08));
  --vz-lijn-op:var(--lijn-op, rgba(244,247,250,.16));
  --vz-vlak:   var(--vlak-2, #0E2130);
  --vz-vlak-2: var(--vlak-3, #142A3C);
  --vz-kop:    var(--kop, 'Sora', -apple-system, system-ui, sans-serif);
  --vz-sans:   var(--sans, 'Inter', -apple-system, system-ui, sans-serif);
  --vz-soepel: var(--soepel, var(--vloei, cubic-bezier(.32,.72,0,1)));
  --vz-veer:   var(--veer, cubic-bezier(.34,1.28,.48,1));
  font-family: var(--vz-sans);
  color: var(--vz-tekst);
}

/* Cijfers in tabelbreedte. Zonder dit danst elke regel bij het meetellen —
   een 1 is smaller dan een 8 en dan verspringt de hele kolom. */
.vz b, .vz .vz-bedrag, .vz .vz-min, .vz .vz-totaal-bedrag{ font-variant-numeric: tabular-nums }

/* ============================================================
   1 · DE DIENSTKAARTEN
   ============================================================ */
/* ---- de kaarten komen op ----
   Ze worden door JavaScript gebouwd zodra /api/diensten antwoordt, dus ze
   verschijnen ná de rest van de bladzijde. Zonder animatie ploffen ze er
   ineens in. Nu komen ze rustig op, met 90 ms tussen de eerste en de tweede —
   dezelfde tussenruimte als de woorden op het introscherm.
   Eén keer, bij het verschijnen. Niet opnieuw bij het wisselen van dienst:
   dan verandert er alleen een rand, en beweging zou dan zeggen dat er iets
   nieuws is terwijl er niets nieuws is. */
.vz-kaarten{ display:grid; gap:12px; grid-template-columns:1fr }  /* 4pt */
@keyframes vz-kaart-op{
  from{ opacity:0; transform:translateY(10px) }
  to  { opacity:1; transform:none }
}
.vz-kaart.vz-komt{
  opacity:0;
  animation:vz-kaart-op 520ms var(--vz-veer) forwards;
  animation-delay:calc(var(--n, 0) * 90ms);
}
@media(min-width:760px){ .vz-kaarten{ grid-template-columns:1fr 1fr } }
/* ---- alleen de kaart die je opent wordt langer ----
   Een grid rekt zijn kinderen standaard tot de hoogte van de langste in de
   rij (align-items:stretch). Dat is precies goed zolang beide uitlegpanelen
   dicht zijn: de kaarten zijn dan even hoog en de twee "Kies …"-knoppen
   staan netjes op één lijn — dat is ook waar de margin-top:auto op die knop
   voor is.

   Maar zodra er één paneel opengaat, rekt de ANDERE kaart mee. Die wordt dan
   een halve schermhoogte leeg vlak met zijn knop helemaal onderaan, terwijl
   er niets veranderd is. Gemeld met een schermafdruk: CARE+ open, Butler een
   gapend gat ernaast.

   Deze regel grijpt alleen in op het moment dat het misgaat: staat er ergens
   in de rij een paneel open, dan houdt elke kaart zijn eigen hoogte en zakt
   alleen de geopende naar beneden. Gaat hij weer dicht, dan staan ze weer
   gelijk.

   :has() wordt door Safari sinds 15.4 ondersteund. Kan een browser het niet,
   dan valt hij terug op het gedrag van hiervoor — vervelend, niet stuk. */
.vz-kaarten:has(.vz-uitleg[data-open="1"]){ align-items:start }
/* Op een telefoon staan de twee kaarten boven het formulier en duwen ze het
   naar beneden. Krapper dus — niets weggehaald, alleen dichter op elkaar,
   zodat de adresvelden eerder in beeld staan. */
@media(max-width:600px){
  .vz-kaarten{ gap:8px }  /* 4pt */
  .vz-kaart{ padding:8px 12px; gap:4px }
}

.vz-kaart{
  position:relative; display:flex; flex-direction:column; gap:4px;
  cursor:pointer;
  /* Klein, zoals de dienstkaartjes in de boekingsfilm: naam bovenaan,
     prijsregel eronder, en verder niets. */
  padding:8px 12px; border-radius:var(--r-m,10px);
  background:var(--vz-vlak);
  /* Geen border: de rand doet het werk met insets — zie §9.2 van de opdracht. */
  box-shadow:
    inset 2px 2px 0 -2px rgba(255,255,255,.5),
    inset 0 0 3px 1px rgba(255,255,255,.06),
    inset 0 0 0 1px rgba(0,0,0,.28);
}
.vz-kaart[aria-pressed="true"], .vz-kaart.vz-gekozen{
  box-shadow:
    inset 2px 2px 0 -2px rgba(255,255,255,.6),
    inset 0 0 3px 1px rgba(255,255,255,.10),
    inset 0 0 0 1.5px var(--vz-accent);
}
.vz-kaart-kop{ display:flex; align-items:flex-start; gap:12px }
.vz-kaart h3{
  margin:0; font-family:var(--vz-kop); font-weight:700;
  font-size:15px; line-height:1.3; flex:0 1 auto; min-width:0;
}
/* De regel onder de naam: sinds 03-09 geen prijs meer maar één zin uitleg
   (de prijs komt in de berekening). Klein en dienend, de naam draagt de
   kaart; in goud, maar niet vet, want het is geen bedrag. */
.vz-kaart-prijs{
  margin:0; font-size:12px; color:var(--vz-accent);
  font-family:var(--vz-sans); font-weight:500; letter-spacing:0; line-height:1.45;
}
.vz-kaart-prijs b{ color:var(--vz-accent); font-weight:600 }
/* De kaart is zelf de knop; hover en focus horen dat te laten zien. */
@media(hover:hover){
  .vz-kaart:hover{ box-shadow:
    inset 2px 2px 0 -2px rgba(255,255,255,.6),
    inset 0 0 3px 1px rgba(255,255,255,.09),
    inset 0 0 0 1px rgba(224,185,112,.45) }
}
.vz-kaart:focus-visible{ outline:2px solid var(--vz-accent); outline-offset:2px }
.vz-kaart:active{ transform:scale(.99) }

/* ---- DE KEUZE ZICHTBAAR MAKEN (eigenaar 03-09) ------------------------------
   Drie dingen tegelijk, zodat het ook op een telefoon zonder hover leest:
   1 · een groen vinkje rechtsboven dat in de kaart springt en zich tekent;
   2 · één ring die van de kaart af loopt op het moment van kiezen;
   3 · de andere kaart stapt iets terug.
   Groen is hier de kleur van "dit staat goed", net als de keuze-bubbel en
   de kortingsbadge eronder; de kaart zelf blijft in het merkgoud. */
.vz-kaart{ transition:transform 220ms var(--vz-soepel, ease), opacity 260ms ease, box-shadow 200ms ease }
.vz-vink{
  flex:0 0 auto; width:16px; height:16px; border-radius:50%;
  display:grid; place-items:center; margin-top:1px;
  /* Direct naast de naam (eigenaar 03-09): 8 px ervan af, de i-knop blijft
     rechts doordat dit vinkje de rest van de ruimte opeist. */
  margin-left:-4px; margin-right:auto;
  /* Glas (eigenaar 03-09): doorzichtig groen met een lichtrand, het vinkje
     zelf licht en scherp, zodat het op de gouden kaart niet uit de toon valt. */
  background:rgba(29,185,84,.28); border:1px solid rgba(62,210,122,.7);
  -webkit-backdrop-filter:blur(6px) saturate(1.3); backdrop-filter:blur(6px) saturate(1.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 2px 8px -2px rgba(29,185,84,.6);
  opacity:0; transform:scale(.35) rotate(-20deg);
  transition:opacity 160ms ease, transform 380ms cubic-bezier(.2,1.4,.4,1);
}
.vz-vink svg{
  width:9px; height:9px; fill:none; stroke:#C9F7DA; stroke-width:2.6;
  stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:18; stroke-dashoffset:18;
  transition:stroke-dashoffset 260ms ease-out 140ms;
}
.vz-kaart.vz-gekozen .vz-vink{ opacity:1; transform:scale(1) rotate(0) }
.vz-kaart.vz-gekozen .vz-vink svg{ stroke-dashoffset:0 }
@keyframes vz-kies-ring{
  from{ outline:2px solid rgba(29,185,84,.7); outline-offset:0 }
  to  { outline:2px solid rgba(29,185,84,0);  outline-offset:14px }
}
.vz-kaart.vz-kies-nu{ animation:vz-kies-ring 640ms ease-out }
/* Zodra er gekozen is, stapt de andere kaart terug; aanraken of hover haalt
   hem weer naar voren, want hij blijft te kiezen. */
.vz-kaarten:has(.vz-gekozen) .vz-kaart:not(.vz-gekozen){ opacity:.62 }
.vz-kaarten:has(.vz-gekozen) .vz-kaart:not(.vz-gekozen):is(:hover,:focus-visible,:active){ opacity:1 }
@media(hover:hover){
  .vz-kaart:hover{ transform:translateY(-2px) }
  .vz-kaart:hover:active{ transform:translateY(-1px) scale(.99) }
}

/* ---- de i-knop ----
   Rechtsboven in de kaart, maar NIET position:absolute over de tekst heen:
   hij zit in de kop-flex en houdt dus zijn eigen ruimte. Zo dekt hij nooit
   iets af, ook niet als de titel lang wordt. */
/* De i, het kruisje en de greep ogen klein (28-30px) maar hun RAAKVLAK is
   44px: een onzichtbare rand van 8px eromheen vangt de tik ook. Zo blijft de
   vorm rustig en mist een duim toch niet. */
.vz-i,.vz-x,.vz-greep{ position:relative }
.vz-i::after,.vz-x::after,.vz-greep::after{
  content:""; position:absolute; inset:-8px }
.vz-i{
  position:relative;               /* draagt het onzichtbare 44px-raakvlak */
  /* 36 px zichtbaar (eigenaar 08-09, was 28): op een telefoon is 28 te
     klein om raak te tikken; het onzichtbare vlak eromheen maakt er 44 van. */
  flex:0 0 auto; width:36px; height:36px; border-radius:50%;
  border:1px solid var(--vz-lijn-op); background:transparent; cursor:pointer;
  color:var(--vz-tekst-2); font:600 15px/1 var(--vz-sans);
  display:grid; place-items:center; padding:0;   /* UA-standaard 1px 6px eruit */
  transition:color 160ms var(--vz-soepel), border-color 160ms var(--vz-soepel);
}
/* Het raakvlak is 44 via dit vlak (36 zichtbaar + 4 rondom). */
.vz-i::after{ content:""; position:absolute; inset:-4px; width:auto; height:auto; transform:none }
.vz-i:hover, .vz-i[aria-expanded="true"]{ color:var(--vz-accent); border-color:var(--vz-accent) }
.vz-i:focus-visible{ outline:2px solid var(--vz-accent); outline-offset:2px }

/* ---- het paneel achter de i ----
   NIET-BLOKKEREND. Geen scherm eroverheen, geen overflow:hidden op de body.
   Hij staat gewoon in de stroom van de kaart en duwt wat eronder staat naar
   beneden. Dat is het enige gedrag dat op elk scherm klopt en waarbij de
   rest van de lijst zichtbaar blijft. */
.vz-uitleg{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows 240ms var(--vz-soepel), opacity 240ms var(--vz-soepel);
  opacity:0;
}
.vz-uitleg > div{ overflow:hidden; min-height:0 }
.vz-uitleg[data-open="1"]{ grid-template-rows:1fr; opacity:1 }
.vz-uitleg-in{
  margin-top:12px; padding:16px 16px; border-radius:var(--r-m,10px);
  background:var(--vz-vlak-2);
  box-shadow:inset 0 0 0 1px var(--vz-lijn);
  font-size:14px; line-height:1.6; color:var(--vz-tekst-2);
  transform:translateY(6px);
  transition:transform 240ms var(--vz-soepel);
}
.vz-uitleg[data-open="1"] .vz-uitleg-in{ transform:none }
.vz-uitleg-in h4{ margin:0 0 8px; font-family:var(--vz-kop); font-size:15px; color:var(--vz-tekst) }
.vz-uitleg-in p{ margin:0 0 8px }
.vz-uitleg-in p:last-child{ margin-bottom:0 }
.vz-uitleg-in ul{ margin:0 0 8px; padding-left:20px }
.vz-uitleg-in li{ margin:0 0 4px }
.vz-uitleg-in .vz-fijn{ font-size:13px; color:var(--vz-tekst-3) }
.vz-uitleg-in:focus{ outline:none }
.vz-uitleg-sluit{
  margin-top:12px; padding:8px 16px; min-height:44px; border-radius:999px; cursor:pointer;
  border:1px solid var(--vz-lijn-op); background:transparent;
  color:var(--vz-tekst-2); font:500 13px/1 var(--vz-sans);
}
.vz-uitleg-sluit:hover{ color:var(--vz-tekst); border-color:var(--vz-lijn-op) }

/* ============================================================
   2 · DE TUSSENSTOPS
   ============================================================ */
/* ---- een stop schuift open, en dicht ----
   Een rij die er ineens staat leest als een storing; een rij die openschuift
   zegt "hier is iets bij gekomen". 0fr -> 1fr is de enige manier om naar "zo
   hoog als de inhoud" te bewegen zonder een hoogte te moeten raden.
   Bij het weghalen andersom, en pas dáárna gaat hij uit de bladzijde — anders
   klapt de lijst dicht voordat u ziet welke rij weg is. */
.vz-stops{ display:grid; gap:8px }
.vz-stop-wik{
  display:grid; grid-template-rows:0fr; opacity:0;
  transition:grid-template-rows 320ms var(--vz-soepel),
             opacity 320ms var(--vz-soepel);
}
.vz-stop-wik>div{ overflow:hidden; min-height:0 }
.vz-stop-wik.vz-in{ grid-template-rows:1fr; opacity:1 }
.vz-stop{
  display:flex; align-items:center; gap:8px;
  border-radius:var(--r-m,10px); background:var(--vz-vlak);
  box-shadow:inset 0 0 0 1px var(--vz-lijn);
  padding:4px 4px 4px 8px;
}
.vz-stop.vz-sleept{ opacity:.45 }
.vz-stop.vz-doel{ box-shadow:inset 0 0 0 1.5px var(--vz-accent) }
.vz-greep{
  flex:0 0 auto; width:28px; height:34px; cursor:grab; border:0; background:transparent;
  color:var(--vz-tekst-3); display:grid; place-items:center; border-radius:8px;
}
.vz-greep:active{ cursor:grabbing }
.vz-greep:focus-visible{ outline:2px solid var(--vz-accent); outline-offset:-2px }
.vz-stop input{
  flex:1 1 auto; min-width:0; border:0; background:transparent;
  color:var(--veld-tekst, var(--vz-tekst));
  /* 16px en geen 15: onder de 16 zoomt iOS het hele scherm in zodra het veld
     focus krijgt, en dan springt de pagina. Dezelfde regel staat bij de
     adresvelden van de hoofdsite. */
  font:400 16px/1.4 var(--vz-sans);
  padding:12px 4px;
}
.vz-stop input:focus{ outline:none }
.vz-stop:focus-within{ box-shadow:inset 0 0 0 1.5px var(--vz-accent) }
.vz-x{
  flex:0 0 auto; width:30px; height:30px; border-radius:50%; cursor:pointer;
  border:0; background:transparent; color:var(--vz-tekst-3);
  font:400 18px/1 var(--vz-sans); display:grid; place-items:center;
}
.vz-x:hover{ color:var(--vz-tekst) }
.vz-x:focus-visible{ outline:2px solid var(--vz-accent); outline-offset:-2px }
.vz-stop-erbij{
  justify-self:start; margin-top:4px;
  padding:8px 16px; min-height:44px; border-radius:999px; cursor:pointer;
  border:1px dashed var(--vz-lijn-op); background:transparent;
  color:var(--vz-tekst-2); font:500 14px/1 var(--vz-sans);
}
.vz-stop-erbij:hover{ color:var(--vz-accent); border-color:var(--vz-accent) }
.vz-stop-erbij[hidden]{ display:none }

/* ---- wachten bij een stop (15-09) ----
   Onder het adres, in de rij zelf, zodat het bij dié stop hoort. Dezelfde
   stapper als de urenkiezer van de site: 32 px knoppen met 44 px raakvlak,
   het getal als invoerveld met tabular-nums, SVG-strepen als teken. */
.vz-stop{ flex-wrap:wrap }
.vz-wacht{
  flex:1 0 100%; display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px;
  padding:0 4px 8px 36px; padding-inline-start:36px; padding-inline-end:4px; min-width:0;
}
/* Het label krijgt de ruimte; past de stapper er niet naast (een telefoon van
   375 px), dan zakt hij naar de volgende regel en blijft aan de einde-kant staan.
   De inspringing is logisch (inline-start): de stoprij spiegelt in het
   Arabisch, en dan hoort het label onder de rechterkant van het adresveld. */
.vz-wacht-l{ flex:1 1 120px; font:500 13px/1.35 var(--vz-sans); color:var(--vz-tekst-2); min-width:0 }
.vz-stapper{ display:flex; align-items:center; gap:16px; flex:none; margin-inline-start:auto }
.vz-stapper input{
  width:56px; text-align:center; background:transparent; border:0; padding:0;
  color:var(--vz-tekst); font:600 15px/1 var(--vz-sans); font-variant-numeric:tabular-nums;
}
.vz-stapper input:focus-visible{ outline:2px solid var(--vz-accent); outline-offset:4px; border-radius:6px }
.vz-stapper input::-webkit-outer-spin-button,
.vz-stapper input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0 }
.vz-stapper input[type=number]{ -moz-appearance:textfield; appearance:textfield }
.vz-eenheid{ color:var(--vz-tekst-3); font-size:12px; letter-spacing:.02em; margin-inline-start:-8px }
/* Met .vz ervoor: de knopreset van de pagina (.boek-open button{color:inherit})
   is anders sterker en maakt de strepen wit in plaats van goud. */
.vz .vz-stap-k{
  position:relative; flex:none; width:32px; height:32px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--vz-lijn-op); border-radius:var(--r-m,10px); background:transparent;
  color:var(--vz-accent); cursor:pointer;
  transition:border-color 140ms var(--vz-soepel), transform 120ms var(--vz-soepel);
}
.vz .vz-stap-k::after{ content:""; position:absolute; inset:-6px }
.vz .vz-stap-k:hover{ border-color:var(--vz-accent) }
.vz .vz-stap-k:active{ transform:scale(.94) }
.vz .vz-stap-k:disabled{ opacity:.35; cursor:default }
.vz .vz-stap-k:focus-visible{ outline:2px solid var(--vz-accent); outline-offset:2px }
.vz-stap-ic{ display:block; width:15px; height:15px }
.vz-stap-ic svg{ display:block; width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round }
@media(prefers-reduced-motion:reduce){ .vz .vz-stap-k{ transition:none } }

/* ============================================================
   3 · DE OPTELSOM
   ============================================================ */
.vz-som{
  border-radius:var(--r-l,14px); background:var(--vz-vlak);
  box-shadow:
    inset 2px 2px 0 -2px rgba(255,255,255,.45),
    inset 0 0 3px 1px rgba(255,255,255,.05),
    inset 0 0 0 1px rgba(0,0,0,.26);
  padding:16px 16px 8px;
}
.vz-som-kop{ display:flex; align-items:baseline; gap:12px }
/* min-width:0 hoort erbij. Een flex-kind krimpt standaard niet onder zijn
   min-content-breedte, en het bedrag ernaast staat op white-space:nowrap.
   Zonder dit konden kop en bedrag samen breder worden dan de kolom. */
.vz-som-kop h3{
  margin:0; flex:1 1 auto; min-width:0;
  font-family:var(--vz-kop); font-weight:600;
  font-size:16px; color:var(--vz-tekst);
}
/* De bedragen zijn groen (eigenaar 03-09), net als de kortingsbadge en de
   keuze-bubbel op de hoofdsite: één kleur voor "wat het kost". Tekst en
   labels blijven in de tekstkleur, grijze regels blijven grijs. */
.vz-totaal-bedrag{
  font-family:var(--vz-kop); font-weight:600; font-size:clamp(28px,4.4vw,38px);
  color:var(--vz-groen, #1DB954); white-space:nowrap;
}
.vz-som-samen{
  margin:4px 0 0; font-size:14px; color:var(--vz-tekst-2);
}
/* De besparingsregel onder het totaal. Groen en niet goud: goud is in deze
   opmaak de kleur van "u kunt hier iets doen" (knoppen, koppelingen), en dit
   is geen knop maar een uitkomst. De kleur komt uit de pagina als die er een
   heeft, met een eigen waarde als terugval — precies zoals de rest van dit
   bestand met kleuren omgaat. */
.vz-bespaar{
  margin:8px 0 0; font-size:15px; font-weight:600; line-height:1.4;
  color:var(--vz-groen, #1DB954);
}
.vz-bespaar[hidden]{ display:none }
/* ---- DE WENSENREGEL (eigenaar 09-09) --------------------------------------
   Onder een dunne lijn, want alles erboven gaat over geld en dit gaat over de
   dienst. Twee delen onder elkaar: de belofte in de tekstkleur, de drie
   wensen eronder in de stille kleur met puntjes ertussen.

   Op een telefoon van 375 px past "chauffeurkeuze · tijden · gewoontes" op
   één regel bij 13px. Breekt hij toch, dan breekt hij tussen de puntjes en
   niet middenin een woord; daarom staan de scheidingstekens in de tekst en
   niet als losse elementen met een gap ertussen. */
.vz-wensen{
  margin:12px 0 0; padding:12px 0 4px;   /* op het 4-raster (audit 11-09; was 10/2) */
  border-top:1px solid var(--vz-lijn, rgba(244,247,250,.13));
  display:flex; flex-direction:column; gap:4px;
}
.vz-wensen-kop{
  font-size:13px; font-weight:600; line-height:1.35; color:var(--vz-tekst);
}
.vz-wensen-lijst{
  font-size:13px; line-height:1.35; color:var(--vz-tekst-2);
}
/* De aansporing om retour te boeken. Hij staat op dezelfde plek als de
   besparingsregel en heeft dezelfde maat — het is dezelfde mededeling, alleen
   een stap eerder. De KLEUR verschilt met opzet: de besparing is groen omdat
   het een uitkomst is, dit is goud omdat het iets is wat u kunt doen. Dat is
   in deze opmaak overal de betekenis van goud.
   De twee sluiten elkaar uit; er staat er nooit meer dan één. */
.vz-kans{
  margin:8px 0 0; font-size:14px; line-height:1.45;
  color:var(--vz-tekst-2);
  display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px;
}
.vz-kans[hidden]{ display:none }
/* De knop is een echte knop en geen link-in-tekst: hij zet iets aan. Hoog
   genoeg om met een duim te raken (44px raakvlak via het ::after-vlak, net als
   de i-knop en het kruisje elders in dit bestand). */
.vz-kans-k{
  position:relative;
  border:1px solid var(--vz-accent); background:transparent; cursor:pointer;
  color:var(--vz-accent); font:600 13px/1 var(--vz-sans);
  padding:8px 12px; border-radius:999px; white-space:nowrap;
  transition:background-color 160ms var(--vz-soepel), color 160ms var(--vz-soepel);
}
.vz-kans-k::after{
  content:''; position:absolute; left:0; right:0; top:50%;
  height:44px; transform:translateY(-50%);
}
.vz-kans-k:hover{ background:var(--vz-accent); color:#081724 }
/* De korting staat als groen badge ín de knop (eigenaar 03-09): zodra de
   route en het bedrag er zijn, verhuist hij van de retour-rij hierheen. */
.vz-kans-badge{
  display:inline-block; margin-left:8px; padding:2px 8px; border-radius:999px;
  border:1px solid #178F43; background:rgba(29,185,84,.12); color:#1DB954;
  font-size:12px; font-weight:500; line-height:16px; vertical-align:middle;
  font-variant-numeric:tabular-nums;
  transition:background-color 160ms var(--vz-soepel), color 160ms var(--vz-soepel), border-color 160ms var(--vz-soepel);
}
.vz-kans-k:hover .vz-kans-badge{ background:rgba(8,23,36,.18); color:#062A14; border-color:transparent }
.vz-kans-k:active{ transform:scale(.97) }
.vz-kans-k:focus-visible{ outline:2px solid var(--vz-accent); outline-offset:2px }
.vz-doorklik{
  width:100%; margin-top:12px; padding:12px 0; min-height:44px; cursor:pointer;   /* 4pt; was 10 */
  border:0; border-top:1px solid var(--vz-lijn); background:transparent;
  color:var(--vz-accent); font:500 14px/1 var(--vz-sans);
  display:flex; align-items:center; justify-content:center; gap:8px;
  transition:transform 140ms var(--vz-soepel);
}
.vz-doorklik:active{ transform:scale(.985) }
.vz-doorklik:focus-visible{ outline:2px solid var(--vz-accent); outline-offset:-2px; border-radius:8px }
.vz-adres-hier:focus-visible, .vz-i:focus-visible{ outline:2px solid var(--vz-accent); outline-offset:2px }
.vz-doorklik .vz-pijl{
  display:inline-block; width:8px; height:8px; margin-top:-4px;
  border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor;
  transform:rotate(45deg); transition:transform 240ms var(--vz-soepel);
}
.vz-doorklik[aria-expanded="true"] .vz-pijl{ transform:rotate(225deg); margin-top:4px }

/* De hoogte animeert met grid-template-rows 0fr -> 1fr. Dat is de enige manier
   om naar "zo hoog als de inhoud" te animeren zonder een vaste hoogte te
   moeten raden. */
.vz-opbouw{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows 420ms var(--vz-soepel);
}
.vz-opbouw > div{ overflow:hidden; min-height:0 }
.vz-opbouw[data-open="1"]{ grid-template-rows:1fr }

/* minmax(0,1fr) en niet 1fr. Een 1fr-baan krimpt niet onder zijn eigen
   min-content-breedte, en de baan ernaast draagt een bedrag met
   white-space:nowrap. Samen konden die twee de regel breder maken dan de
   kolom waarin hij staat — en in de boekingslaag betekende dat een
   zijwaartse schuif over het hele scherm. Nu mag de tekstbaan tot nul
   krimpen en breekt de tekst gewoon af. */
/* Factuurstijl sinds 31-08: de omschrijving links, het bedrag rechts
   uitgelijnd in de eigen kolom, en de regels strakker op elkaar. Elke plek
   staat expliciet vast (kolom én rij), zodat de indeling nergens van de
   invoegvolgorde of van de omgeving kan afhangen. */
.vz-regel{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 12px;
  align-items:baseline; padding:8px 0; border-top:1px solid var(--vz-lijn);
}
.vz-regel:first-child{ border-top:0 }
/* Een adres zonder spaties (of een lange straatnaam) mag de regel niet
   oprekken; liever midden in een woord afbreken dan de bladzijde scheeftrekken. */
.vz-regel-tekst{ grid-column:1; grid-row:1; font-size:13px; color:var(--vz-tekst);
  line-height:1.35; overflow-wrap:anywhere }
.vz-regel-bij{
  grid-column:1; grid-row:2; font-size:11.5px; color:var(--vz-tekst-3); line-height:1.4;
  overflow-wrap:anywhere;
}
.vz-regel-bij:empty{ display:none }
.vz-bedrag{ grid-column:2; grid-row:1; font-size:13px; color:var(--vz-groen, #1DB954);
  white-space:nowrap; text-align:right }
.vz-min{
  grid-column:2; grid-row:2; font-size:11.5px; color:var(--vz-tekst-3);
  white-space:nowrap; text-align:right;
}
.vz-min:empty{ display:none }
.vz-regel.vz-grijs .vz-regel-tekst,
.vz-regel.vz-grijs .vz-bedrag{ color:var(--vz-tekst-3) }
/* De terugrit is de enige regel die goedkoper is dan hij zou zijn. Groen,
   zodat het oog hem vindt zonder dat er een label bij hoeft. */
.vz-regel[data-sleutel="terugrit"] .vz-regel-tekst,
.vz-regel[data-sleutel="terugrit"] .vz-bedrag{ color:var(--vz-groen, #1DB954) }
/* De veranderde regel licht kort op. Geen beweging, alleen kleur — dat leest
   rustiger en werkt ook voor wie geen beweging wil. */
@keyframes vz-oplicht{
  from{ background:color-mix(in srgb, var(--vz-accent) 16%, transparent) }
  to  { background:transparent }
}
.vz-regel.vz-nieuw{
  animation:vz-oplicht 900ms var(--vz-soepel);
  border-radius:8px; margin:0 -8px; padding-left:8px; padding-right:8px;
}

.vz-totaal{
  display:grid; grid-template-columns:1fr auto; gap:4px 12px;
  align-items:baseline; padding:12px 0 4px; border-top:1px solid var(--vz-lijn-op);
}
.vz-totaal .vz-regel-tekst{ font-weight:600 }
.vz-totaal .vz-bedrag{ font-weight:600; font-size:16px }

.vz-co2{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:12px 0 12px; font-size:13.5px; color:var(--vz-tekst-2);
}
/* Kleiner dan de gewone .vz-i (22 i.p.v. 28), dus de standaard inset van
   -8px kwam op 38px uit. -11px brengt het raakvlak terug op 44×44 zonder
   dat het rondje groter oogt. */
.vz-co2 .vz-i{ width:22px; height:22px; font-size:12px }
.vz-co2 .vz-i::after{ inset:-11px }

/* Zolang de server rekent: strepen, geen nul. Een 0 op het scherm leest als
   "gratis" en dat is het niet. */
.vz-skelet{
  display:inline-block; min-width:82px; height:1em; border-radius:6px;
  background:linear-gradient(90deg,var(--vz-lijn),var(--vz-lijn-op),var(--vz-lijn));
  background-size:200% 100%; animation:vz-glans 1400ms linear infinite;
  vertical-align:middle;
}
/* Sier-animatie pauzeert buiten beeld (§9.3). Deze glans is een lus die
   anders eeuwig doordraait, ook als de optelsom drie schermen lager staat.
   Dat kost stroom op een telefoon en levert niemand iets op. De klasse wordt
   door prijsblok.js gezet met een IntersectionObserver. */
.vz-som.vz-weg-van-beeld .vz-skelet{ animation-play-state:paused }
@keyframes vz-glans{ from{background-position:200% 0} to{background-position:-200% 0} }
.vz-melding{
  margin:0; padding:12px 0; font-size:14px; line-height:1.5; color:var(--vz-tekst-2);
}
.vz-melding b{ color:var(--vz-tekst); font-weight:600 }

/* ---- de plakstrook: de prijs staat altijd in beeld ----
   Niet iets dat de klant moet opvragen — daarom is "Bekijk uw prijs"
   verdwenen. Hij plakt onderaan zodra er genoeg is ingevuld. */
.vz-strook{
  position:sticky; bottom:0; z-index:4;
  margin-top:16px; padding:12px 14px calc(12px + env(safe-area-inset-bottom));
  border-radius:var(--r-l,14px) var(--r-l,14px) 0 0;
  background:var(--vz-vlak);
  box-shadow:0 -8px 28px rgba(0,0,0,.35), inset 0 1px 0 0 var(--vz-lijn-op);
  display:flex; align-items:center; gap:12px;
}
.vz-strook .vz-strook-tekst{ flex:1 1 auto; font-size:13px; color:var(--vz-tekst-2) }
.vz-strook .vz-totaal-bedrag{ font-size:19px }

/* ============================================================
   3b · HET TARIEVENOVERZICHT
   ------------------------------------------------------------
   Bewust STILLER dan de optelsom: geen eigen vlak, geen schaduw, alleen een
   scheidingslijn. De optelsom is waar de klant naar kijkt; dit is waar hij
   naar kijkt als hij het niet vertrouwt. Zou dit blok net zo zwaar staan, dan
   staan er twee prijskaarten onder elkaar en weet niemand meer welke telt.
   ============================================================ */
.vz-tarieven{ display:block }
.vz-tarieven[hidden]{ display:none }
/* Hij deelt de doorklikknop met de optelsom (zelfde vorm, zelfde pijl), maar
   staat een maat kleiner en in de rustige tekstkleur: het is een uitnodiging
   om te controleren, geen tweede hoofdactie. */
.vz-tarieven .vz-tar-k{ color:var(--vz-tekst-2); font-size:13px; margin-top:0 }
.vz-tarieven .vz-tar-k:hover{ color:var(--vz-tekst) }
.vz-tar-lijst{ padding:4px 0 12px }
/* Compacter sinds 31-08: het overzicht bleef na het dichtklappen van de
   uitzonderingen nog te fors ogen. Een maat kleiner en strakker gezet;
   de toelichting blijft leesbaar, hij hoeft alleen niet zo te wegen. */
.vz-tar-kop{
  margin:12px 0 4px; font-family:var(--vz-kop); font-weight:600;
  font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--vz-tekst-3);
}
.vz-tar-kop:first-child{ margin-top:4px }
/* Twee kolommen: waarvoor, en hoeveel. De toelichting loopt onder de eerste
   kolom door — hij hoort bij de regel, niet bij het bedrag. */
.vz-tar-rij{
  display:grid; grid-template-columns:1fr auto; gap:4px 12px;
  padding:4px 0; border-top:1px solid var(--vz-lijn);
}
.vz-tar-wat{ font-size:13px; color:var(--vz-tekst); line-height:1.35 }
.vz-tar-bedrag{
  font-size:13px; font-weight:600; color:var(--vz-tekst);
  white-space:nowrap; text-align:right; font-variant-numeric:tabular-nums;
}
.vz-tar-bij{
  grid-column:1 / -1; font-size:11.5px; line-height:1.4; color:var(--vz-tekst-3);
}
.vz-tar-bij:empty{ display:none }
/* Het dichtgeklapte staartje: buiten de stad en de mogelijke extra's. De
   samenvatting leest als een kopje met een plus ervoor; open wordt de plus
   een min. Raakvlak minstens 44px hoog, dit is een telefoonknop. */
.vz-tar-meer{ margin-top:12px; border-top:1px solid var(--vz-lijn) }
.vz-tar-meer>summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:8px;
  min-height:44px; font-family:var(--vz-kop); font-weight:600; font-size:11px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--vz-tekst-3);
}
.vz-tar-meer>summary::-webkit-details-marker{ display:none }
.vz-tar-meer>summary::before{ content:'+'; font-size:15px; line-height:1 }
.vz-tar-meer[open]>summary::before{ content:'−' }
.vz-tar-meer>summary:hover{ color:var(--vz-tekst) }

/* ============================================================
   4 · BEWEGING — en het uitzetten daarvan
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  .vz-opbouw, .vz-uitleg, .vz-uitleg-in, .vz-doorklik, .vz-doorklik .vz-pijl,
  .vz-kaart, .vz-i, .vz-kans-k{ transition-duration:1ms !important }
  .vz-regel.vz-nieuw{ animation-duration:1ms }
  .vz-kaart.vz-komt{ animation-duration:1ms; opacity:1 }
  .vz-kaart.vz-kies-nu{ animation:none }
  .vz-vink, .vz-vink svg{ transition-duration:1ms }
  .vz-kaart:hover{ transform:none }
  .vz-stop-wik{ transition-duration:1ms }
  .vz-skelet{ animation:none; background:var(--vz-lijn) }
  .vz-uitleg-in{ transform:none }
}