/* ── De letter ───────────────────────────────────────────────────────────────
   Geist, dezelfde als in de applicatie. Dat is de reden dat hij hier staat: een
   bezoeker die zich aanmeldt gaat van deze pagina rechtstreeks de omgeving in,
   en een andere letter aan de overkant leest als een andere partij.

   Hiervoor stond er een systeemstapel — Segoe UI op Windows, San Francisco op
   een Mac, Roboto op Android. Dat kostte niets, maar het betekende ook dat de
   pagina er op elk apparaat anders uitzag en op geen enkel apparaat hetzelfde
   als het product zelf.

   De bestanden staan náást deze pagina en niet bij Google: het uitgangspunt van
   dit bestand is dat het zonder één extern verzoek werkt. Twee variabele fonts
   van ongeveer 70 kB elk, samen minder dan één van de foto's.

   `font-display: swap` toont de tekst meteen in de systeemletter en wisselt om
   zodra Geist er is. Nooit `block`: dan staat de kop onzichtbaar te wachten op
   een lettertype, en dat is precies het gedrag dat deze pagina niet moet hebben.

   Geist is van Vercel en staat onder de SIL Open Font License; zie
   media/geist-licentie.txt. Die tekst hoort mee te reizen met de bestanden. */

@font-face {
  font-family: "Geist";
  src: url("media/geist.woff2") format("woff2-variations");
  font-weight: 100 900;   /* één bestand voor de hele reeks */
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("media/geist-mono.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ═══════════════════════════════════════════════════════════════════════════
   VIPcarwashbooking — vipcarwashbooking.com

   Eén bestand, geen externe verzoeken: dit draait op Plesk naast de applicatie
   en moet zonder buildstap te plaatsen zijn.

   De vormgeving komt uit de wasstraat zelf: natte asfaltnacht als grond,
   waterblauw uit het logo, en het amberkleurige signaallicht bij de ingang als
   enige tweede accent. Bewust één wereld — donker — en niet twee thema's: dit
   is een verkooppagina met een eigen sfeer, geen leesomgeving.
   ═════════════════════════════════════════════════════════════════════════ */

:root {
  --inkt:      #0a1018;  /* nat asfalt bij nacht */
  --diep:      #111c2b;  /* paneel, één stap lichter */
  --rand:      #1e2f45;
  --water:     #17a2e8;  /* het blauw uit het merkteken */
  --water-op:  #56c4f5;
  --schuim:    #eaf3f9;  /* schuimwit, de leestekst */
  --chroom:    #8098b0;  /* staal, de bijzin */
  --signaal:   #ffb020;  /* het amberlicht bij de ingang */

  --breed: 1140px;
  /* De systeemletters blijven erachter staan als terugval: laadt het bestand
     niet, dan leest de pagina gewoon door in de letter van het apparaat. */
  --body: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--inkt);
  color: var(--schuim);
  font: 400 17px/1.65 var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ── Typografie ────────────────────────────────────────────────────────────
   De persoonlijkheid zit in twee dingen: koppen op zeer krappe letterafstand,
   en een monoregel als structuurdrager. Die mono is geen versiering — hij komt
   terug op de tijden, de prijzen en de stations, precies waar de wasstraat zelf
   met cijfers werkt. */

h1, h2, h3 { margin: 0; text-wrap: balance; letter-spacing: -0.033em; font-weight: 800; line-height: 1.04; }
/* De kop staat in een kolom naast het paneel, niet over de volle breedte:
   schaal op de kolom, niet op het venster, anders breekt "VIP-behandelingen"
   op een groot scherm juist in drieën. */
h1 { font-size: clamp(2.15rem, 3.5vw, 3.05rem); }
h2 { font-size: clamp(2rem, 4.2vw, 3rem); }
h3 { font-size: 1.16rem; letter-spacing: -0.015em; line-height: 1.3; }
p  { margin: 0; }
a  { color: inherit; }

.station {
  font: 600 11.5px/1 var(--mono);
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--water-op);
  display: flex;
  align-items: center;
  gap: 12px;
}
.station::before {
  content: "";
  width: 26px; height: 1px;
  background: var(--water);
  flex: none;
}

.leidend { color: var(--chroom); font-size: 1.06rem; max-width: 60ch; }

:focus-visible { outline: 2px solid var(--signaal); outline-offset: 3px; border-radius: 3px; }

/* ── Raamwerk ────────────────────────────────────────────────────────────── */

.wikkel { width: 100%; max-width: var(--breed); margin-inline: auto; padding-inline: 22px; }

.baan {           /* de sectie; de naam is de kettingbaan waar de pagina langs loopt */
  padding-block: clamp(64px, 9vw, 118px);
  border-top: 1px solid var(--rand);
  position: relative;
}
.baan:first-of-type { border-top: 0; }

.kop-blok { display: flex; flex-direction: column; gap: 18px; margin-bottom: 46px; max-width: 62ch; }

/* Die 46px is de afstand tot wat eronder in dezelfde sectie staat. Staat er
   niets meer onder — een kop-blok dat in zijn eentje een inleidende sectie
   vult — dan komt hij bovenop de padding van de sectie én die van de sectie
   erna. Drie afstanden op elkaar leest als een gat waar iets is weggevallen. */
.wikkel > .kop-blok:last-child { margin-bottom: 0; }

/* ── Kop over twee kolommen ──────────────────────────────────────────────────
   Alles links uitlijnen op één kolombreedte laat de rechterhelft van elke
   sectie leeg, en dan begint de pagina te kantelen. Bij de langere inleidingen
   staat de kop daarom links en de inleiding ernaast: de regel wordt korter, de
   sectie staat in balans, en de kop krijgt meer gewicht doordat hij niet meer
   met zijn eigen inleiding om dezelfde ruimte vecht. */
@media (min-width: 940px) {
  .kop-blok--breed {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    column-gap: 56px;
    row-gap: 16px;
    max-width: none;
    align-items: end;
  }
  .kop-blok--breed .station { grid-column: 1 / -1; }
  .kop-blok--breed h2 { margin: 0; }
  .kop-blok--breed .leidend { max-width: 48ch; padding-bottom: 4px; }
}

/* ── Bovenbalk ───────────────────────────────────────────────────────────── */

.bovenbalk {
  position: sticky; top: 0; z-index: 40;
  background: rgba(10, 16, 24, 0.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rand);
}
.bovenbalk > .wikkel {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: 68px;
}
/* Het merk is één logo en geen icoon-met-tekst meer; de regels voor b en span
   hoorden bij de getekende versie en zijn met die tekening meeverdwenen.
   Op smalle schermen krimpt het mee: de bovenbalk moet naast het logo ook nog
   twee knoppen en het menu kwijt, en 148 px is dan te veel. */
.merk { display: flex; align-items: center; text-decoration: none; }
/* 176 px breed is 28 px hoog bij deze verhouding van ruim 6:1. In een balk van
   68 px laat dat boven en onder nog 20 px lucht staan; groter gaat het logo de
   balk vullen in plaats van erin staan.
   Op smalle schermen blijft het kleiner: daar moeten de knop en het menu er
   naast passen. */
.merk img { display: block; width: 176px; height: auto; }
@media (max-width: 560px) { .merk img { width: 140px; } }
@media (max-width: 380px) { .merk img { width: 124px; } }

.balk-rechts { display: flex; align-items: center; gap: 10px; }
.balk-link { display: none; color: var(--chroom); text-decoration: none; font-size: 0.95rem; }
.balk-link:hover { color: var(--schuim); }
@media (min-width: 760px) { .balk-link { display: inline; } }

/* ── Knoppen ─────────────────────────────────────────────────────────────── */

.knop {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 22px;
  border-radius: 8px;
  font: 600 15px/1 var(--body);
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, transform .16s ease;
}
@media (prefers-reduced-motion: reduce) { .knop { transition: none; } }
.knop--vol { background: var(--water); color: #04121d; font-weight: 700; }
.knop--vol:hover { background: var(--water-op); }
.knop--lijn { border-color: var(--rand); color: var(--schuim); }
.knop--lijn:hover { border-color: var(--water); }
.knop--klein { padding: 9px 16px; font-size: 14px; }

/* ── Hero ────────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(52px, 8vw, 104px);
  isolation: isolate;
}

/* ── De video in de kop ──────────────────────────────────────────────────────
   Beeld uit de behandelbrug zelf: een hand die een zwarte auto natrekt. Het
   staat er als sfeer, niet als informatie — vandaar dat de tekst er nooit van
   afhankelijk is en de video zonder geluid en zonder bediening loopt.

   Het masker is het belangrijkste onderdeel. Zonder zwart eroverheen valt de
   kop weg zodra er een lichte flits door het beeld gaat, en dat gebeurt in
   deze opname elke paar seconden. Het loopt van bijna dicht aan de tekstkant
   naar half open rechts, zodat het beeld zichtbaar blijft waar het paneel
   staat. */
/* De kop van een landingspagina.
   Zelfde video, ander masker. Op de homepage loopt het masker van donker links
   naar open rechts, omdat daar het lichte paneel met de demo staat en het beeld
   daarachter zichtbaar mag blijven. Een landingspagina heeft dat paneel niet:
   daar loopt de tekst over de volle breedte en zou een open rechterhelft de
   inleiding onleesbaar maken zodra er een lichte flits door de opname gaat.
   Vandaar een masker dat van boven naar beneden werkt in plaats van van links
   naar rechts, en onderin dichtloopt zodat de knoppen op een rustig vlak staan. */
.hero--pagina { padding-block: clamp(40px, 6vw, 78px); }
/* Alle tekst in één kolom links, ook op een breed scherm.
   De kop van een landingspagina staat normaal in twee kolommen: titel links,
   inleiding rechts. Boven een video werkt dat niet -- de rechterhelft is precies
   waar de opname zijn lichtste beeld heeft (chroom, een reflectie), en grijze
   tekst van 17 px verdwijnt daarin. Het masker verder dichtzetten loste dat wel
   op, maar dan kun je de video net zo goed weglaten.
   Links houden en het beeld rechts vrijlaten is dezelfde verdeling als de
   homepage, en daar was hij om dezelfde reden zo gekozen. */
@media (min-width: 860px) {
  .hero--pagina .kop-blok--breed { display: block; max-width: 46rem; }
  .hero--pagina .kop-blok--breed .leidend { max-width: 54ch; margin-top: 18px; }
}
.hero-masker--pagina {
  background:
    linear-gradient(180deg,
      rgba(0,0,0,0.78) 0%,
      rgba(0,0,0,0.86) 46%,
      rgba(0,0,0,0.94) 100%),
    linear-gradient(180deg, rgba(10,16,24,0.30), rgba(10,16,24,0.62));
}

.hero-beeld {
  position: absolute; inset: 0; z-index: -2;
  overflow: hidden;
  background: #05090f;
}
.hero-beeld video,
.hero-beeld img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.hero-masker {
  position: absolute; inset: 0; z-index: -1;
  background:
    /* Donker achter de tekst, open aan de rechterkant. Daar staat niets
       overheen, dus daar mag de video gewoon te zien zijn — dat was hij niet:
       de twee lagen samen kwamen rechts op ruim 0.6 uit en drukten het beeld
       plat. Links blijft het zwaar genoeg voor de kop en de lopende tekst. */
    linear-gradient(90deg,
      rgba(0,0,0,0.84) 0%,
      rgba(0,0,0,0.70) 34%,
      rgba(0,0,0,0.30) 62%,
      rgba(0,0,0,0.10) 100%),
    /* Een tweede laag in de inktkleur houdt het beeld in het palet van de
       pagina; puur zwart alleen maakt het grauw. Bewust licht: samen met de
       laag hierboven is dit al donker genoeg, en twee zware lagen drukken de
       video helemaal weg — dan kun je hem net zo goed weglaten. */
    linear-gradient(180deg, rgba(10,16,24,0.10), rgba(10,16,24,0.34));
  pointer-events: none;
}
/* Onderaan overvloeien in de pagina, anders staat er een harde rand tussen de
   video en de eerste sectie. */
.hero-masker::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 140px;
  background: linear-gradient(180deg, transparent, var(--inkt));
}

.hero-raster { position: relative; display: grid; gap: 52px; align-items: start; }
@media (min-width: 1000px) { .hero-raster { grid-template-columns: 1.02fr 0.98fr; gap: 60px; } }

.hero-tekst { display: flex; flex-direction: column; gap: 24px; }
.hero h1 .zacht { color: var(--chroom); }
.hero-acties { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hero-noot { font-size: 0.9rem; color: var(--chroom); }

.bewijs { display: flex; flex-wrap: wrap; gap: 10px 26px; padding-top: 6px; }
.bewijs div { display: flex; align-items: baseline; gap: 8px; }
.bewijs b { font: 700 15px/1 var(--mono); color: var(--signaal); font-variant-numeric: tabular-nums; }
.bewijs span { font-size: 0.9rem; color: var(--chroom); }

/* ── Het paneel: de werkende mini-widget ─────────────────────────────────── */

.paneel {
  background: linear-gradient(180deg, var(--diep), #0d1725);
  border: 1px solid var(--rand);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 30px 70px -30px rgba(0,0,0,0.9);
}
.paneel-kop {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-bottom: 14px; margin-bottom: 16px;
  border-bottom: 1px solid var(--rand);
}
.paneel-kop strong { font-size: 0.98rem; letter-spacing: -0.01em; }
.lampje { display: flex; align-items: center; gap: 7px; font: 600 10.5px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--chroom); }
.lampje i { width: 7px; height: 7px; border-radius: 50%; background: var(--signaal); box-shadow: 0 0 0 3px rgba(255,176,32,0.16); font-style: normal; }

.veldnaam { font: 600 10.5px/1 var(--mono); letter-spacing: 0.17em; text-transform: uppercase; color: var(--chroom); display: block; margin-bottom: 10px; }

.keuzes { display: flex; flex-direction: column; gap: 8px; margin: 0 0 20px; }
.keuze {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--rand); border-radius: 10px;
  cursor: pointer;
  transition: border-color .14s ease, background-color .14s ease;
}
.keuze:hover { border-color: #2c4a6b; }
.keuze input { accent-color: var(--water); width: 16px; height: 16px; flex: none; margin: 0; }
.keuze-naam { flex: 1; font-size: 0.95rem; }
.keuze-duur { font: 500 12.5px/1 var(--mono); color: var(--chroom); font-variant-numeric: tabular-nums; }
.keuze-prijs { font: 600 13px/1 var(--mono); font-variant-numeric: tabular-nums; min-width: 62px; text-align: right; }
.keuze:has(input:checked) { border-color: var(--water); background: rgba(23,162,232,0.09); }

.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 8px; }
.slot {
  font: 600 14px/1 var(--mono);
  font-variant-numeric: tabular-nums;
  padding: 11px 0;
  text-align: center;
  border: 1px solid var(--rand); border-radius: 8px;
  background: transparent; color: var(--schuim);
  cursor: pointer;
  transition: border-color .14s ease, background-color .14s ease;
}
.slot:hover { border-color: var(--water); }
.slot[aria-pressed="true"] { background: var(--water); border-color: var(--water); color: #04121d; }
.slot--vol { color: #4a5f77; border-style: dashed; cursor: not-allowed; }
.slot--vol:hover { border-color: var(--rand); }

.paneel-voet {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--rand);
  font-size: 0.9rem; color: var(--chroom);
  min-height: 46px;
}
.paneel-voet b { color: var(--schuim); font: 700 15px/1 var(--mono); font-variant-numeric: tabular-nums; }
/* De melding staat in hetzelfde raster als de tijdknoppen; zonder deze regel
   krijgt hij één kolom van 74px toegewezen en valt de zin uit elkaar. */
.leeg-melding { grid-column: 1 / -1; color: var(--signaal); font-size: 0.88rem; line-height: 1.5; }

/* ── Tweeluik: kettingbaan tegenover behandeling ─────────────────────────── */

/* ── Tweeluik ────────────────────────────────────────────────────────────────
   Twee gelijke kolommen waren hier fout. De rechterkaart heeft een foto en is
   daardoor ruim twee keer zo hoog; de linker werd door het raster meegerekt en
   stond voor de helft leeg. Een half lege kaart leest als een fout, niet als
   een keuze.

   Nu zijn ze bewust ongelijk, en dat is precies wat de sectie beweert: de baan
   heeft niets nodig — een korte kaart is genoeg — en de behandelplek is waar
   het werk en de aandacht zitten. `align-items: start` houdt de linker op zijn
   eigen hoogte in plaats van hem uit te rekken. */
/* Twee gelijke kaarten, en dat is een inhoudelijke keuze.
   De kolommen stonden op 0.86fr en 1.14fr en de kaarten rekten niet mee
   (`align-items: start`): de rechter was breder en de linker bleef korter, met
   een gat eronder op desktop. Dat hoorde bij de tijd dat de rechterkaart was
   uitgelicht. Je klant en jij zijn geen twee opties waaruit je kiest, dus
   krijgen ze dezelfde breedte en dezelfde hoogte. */
.tweeluik { display: grid; gap: 18px; }
@media (min-width: 860px) {
  .tweeluik { grid-template-columns: 1fr 1fr; gap: 22px; }
}
/* De pil zakt naar de onderrand. De ene kaart heeft een regel tekst meer dan de
   andere; zonder dit hangt de ene pil hoog en de andere laag, en dan lijkt het
   verschil in tekstlengte een bedoeld verschil. */
.tweeluik .stempel { margin-top: auto; }

/* Het etiket dat het verschil benoemt. Geen versiering: dit is de hele stelling
   van de sectie in twee woorden, en het staat op de plek waar je oog na de kop
   als eerste landt. */
.stempel {
  align-self: flex-start;
  font: 600 10.5px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: var(--radius-pil, 999px);
  border: 1px solid var(--rand);
  color: var(--chroom);
}
.kaart--nadruk .stempel {
  border-color: rgba(23,162,232,0.55);
  background: rgba(23,162,232,0.12);
  color: var(--water-op);
}

.kaart {
  background: var(--diep);
  border: 1px solid var(--rand);
  border-radius: 14px;
  /* De beelden hangen met een negatieve marge tot aan de kaartrand. Zonder
     deze knip kan een beeld op smalle schermen buiten de afgeronde hoeken
     uitsteken, en dan lijkt het alsof het is afgesneden. */
  overflow: hidden;
  padding: 26px;
  display: flex; flex-direction: column; gap: 12px;
}
/* De blauwe kaart.
   De rand is blauw, en daaromheen ligt een gloed die naar buiten uitdooft: een
   grote, zachte schaduw in dezelfde kleur, plus een haarlijn er strak omheen.
   Twee lagen omdat één het niet doet — alleen een wijde schaduw wordt een wolk
   zonder rand, alleen een lijn blijft een streep. Samen lijkt het licht dat van
   de kaart af komt.
   De schaduw staat bewust laag in dekking (0.35). Op een donkere achtergrond
   telt blauw op met de kaartkleur eronder, en boven ongeveer een halve dekking
   wordt het een lichtbak in plaats van een gloed. */
.kaart--nadruk {
  border-color: rgba(23,162,232,0.5);
  background: linear-gradient(180deg, rgba(23,162,232,0.08), var(--diep) 60%);
  box-shadow:
    0 0 0 1px rgba(23,162,232,0.14),
    0 16px 46px -20px rgba(23,162,232,0.35);
}
.kaart p { color: var(--chroom); font-size: 0.98rem; }
.kaart-etiket { font: 600 10.5px/1 var(--mono); letter-spacing: 0.17em; text-transform: uppercase; color: var(--chroom); }
.kaart--nadruk .kaart-etiket { color: var(--water-op); }

/* Beeld binnen een kaart: strak in de hoeken, met dezelfde ronding als de
   kaart zelf. De negatieve marges halen de padding van de kaart weg zodat het
   beeld tot de rand loopt. */
.kaart-beeld {
  margin: -26px -26px 4px;
  border-radius: 14px 14px 0 0;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
.kaart-beeld img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Een schermafbeelding in plaats van een foto.
   Het boekingsvenster is licht en de kaart is donker. Zonder scheiding lijkt
   dat witte vlak los boven de kaart te zweven; een rand eronder in dezelfde
   kleur als de kaartrand zet het vast. De achtergrond eronder is de kleur van
   het scherm zelf, zodat er tijdens het laden geen donker gat staat dat
   omslaat naar wit.

   Een foto mag bijgesneden worden, een schermafbeelding niet: valt er een
   regel of een knop weg, dan is het niet meer het product dat je laat zien.
   Daarom past dit beeld binnen het vak in plaats van eroverheen te vullen.
   Rondom ligt lucht in de kleur van het scherm zelf, zodat het venster niet
   tegen de kaartrand plakt.

   Het vak houdt wél dezelfde 16/9 als de foto in de kaart ernaast. Liet het
   zijn hoogte door het beeld bepalen, dan werd het de padding hoger dan de
   foto, en begon de tekst in de twee kaarten op een andere hoogte — dat leest
   als slordigheid, niet als verschil. Het schermbeeld is zelf bijna precies
   16/9 (1400×788), dus `contain` snijdt er niets af. */
.kaart-beeld--scherm {
  background: #f5f6f8;
  border-bottom: 1px solid var(--rand);
  padding: 12px;
}
.kaart-beeld--scherm img { height: 100%; object-fit: contain; }

/* ── Sfeerband ───────────────────────────────────────────────────────────────
   Eén beeld over de volle breedte, met de zin erin die de rest van de pagina
   samenvat. Het staat er niet als versiering: het is de enige plek waar het
   werk zelf te zien is op het formaat dat het verdient. */
.band {
  position: relative;
  isolation: isolate;
  min-height: min(58vh, 460px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.band img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  /* De opname staat rechtop en de band is breed; zonder deze regel wordt er
     precies op het saaiste stuk gesneden. Iets boven het midden ligt de
     lichtstreep over de flank. */
  object-position: 50% 42%;
}
.band::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  /* Lichter dan de kop: hier staat maar één regel tekst, en die staat links op
     het donkerste deel. De foto zelf is al donker — nog een zware laag erover
     maakt er een zwart vlak van. */
  background:
    /* Tot ~70% donker houden: de tekst staat in de gecentreerde wikkel en
       begint dus niet aan de rand van het venster maar rond een derde. Liep de
       verdonkering daarvóór al af, dan valt de zin over de lichtste plek van
       de foto. */
    linear-gradient(90deg, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.72) 45%, rgba(0,0,0,0.45) 72%, rgba(0,0,0,0.06) 100%),
    linear-gradient(180deg, rgba(10,16,24,0.10), rgba(10,16,24,0.40));
}
.band-inhoud { padding-block: clamp(40px, 6vw, 72px); max-width: 60ch; display: flex; flex-direction: column; gap: 14px; }
.band-inhoud p:first-of-type {
  font-size: clamp(1.35rem, 2.6vw, 1.95rem);
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1.22;
  text-wrap: balance;
}
.band-inhoud .bij { color: #b9c9d8; font-size: 1rem; }

/* ── De stelling ─────────────────────────────────────────────────────────────
   Eén zin die het probleem in geld uitdrukt, tussen de klachten en de
   oplossing in. Groter dan een kop, maar zonder kopregel erboven: het is geen
   nieuw onderwerp, het is de rekening van het vorige.

   De streep links doet het werk dat een citaatteken zou doen, zonder de
   suggestie dat iemand dit gezegd heeft. Er is namelijk niemand die het zei —
   het is onze stelling, en dat hoort het te blijven zolang er geen klant is
   die het namens ons kan zeggen. */
.stelling-baan { padding-block: clamp(28px, 4vw, 44px); }
.stelling {
  margin: 0;
  border-left: 3px solid var(--signaal);
  padding-left: clamp(18px, 3vw, 30px);
}
/* De breedte hoort op de zin zelf, niet op het blok: zet je hem op het blok,
   dan wordt de toelichting eronder net zo smal en leest die als een kolom. */
.stelling p:first-child {
  max-width: 22ch;
  font-size: clamp(1.5rem, 3.4vw, 2.35rem);
  font-weight: 800;
  letter-spacing: -0.032em;
  line-height: 1.14;
  text-wrap: balance;
  color: var(--schuim);
}
/* De toelichting mag breder lopen dan de stelling zelf: de zin erboven moet
   kort blijven om te blijven hangen, deze moet gewoon leesbaar zijn. */
.stelling .bij {
  margin-top: 16px;
  max-width: 58ch;
  color: var(--chroom);
  font-size: 1.02rem;
  line-height: 1.62;
}

/* ── Praktijkbeelden ─────────────────────────────────────────────────────────
   Foto's van het werk zelf, met een bijschrift dat de link legt naar wat de
   software ermee doet. Een foto zonder bijschrift is decoratie; met bijschrift
   is het een argument.

   Vaste verhouding op elke foto, zodat een rij niet uit elkaar valt wanneer de
   aangeleverde beelden verschillend van formaat zijn — en dat zijn ze, want ze
   komen van een telefoon. */
/* ── Het beeld bij een probleem ──────────────────────────────────────────────
   Eén liggende foto tussen de kop en de opsomming eronder. Geen galerij en
   geen bijschrift: de sectie zegt in woorden al wat er misgaat, en een
   bijschrift zou dat een tweede keer zeggen.

   Op een breed scherm een veel platter uitsnede dan de foto zelf. Een foto van
   3:2 over de volle kolombreedte is op een laptop bijna een half scherm hoog;
   dan wordt het sfeerbeeld het onderwerp van de sectie in plaats van de
   aanleiding ervoor. Op een telefoon is de kolom smal genoeg om de foto zijn
   eigen verhouding te gunnen.

   De verzachting onderaan laat de foto in de paginakleur oplopen, zodat het
   beeld geen tweede kader in een sectie vol kaders wordt. */
.verhaalbeeld {
  position: relative;
  margin: 0 0 34px;
  border: 1px solid var(--rand);
  border-radius: 14px;
  overflow: hidden;
}
/* Het onderwerp van alle drie de foto's — een gezicht met een telefoon erbij —
   zit in de bovenste helft van het kader. Een uitsnede die vanuit het midden
   snijdt haalt precies dat weg en laat een schouder over. Vandaar de hoge
   aanzet, en vandaar dat de uitsnede nergens platter wordt dan 5:2. */
.verhaalbeeld img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 30%;
  aspect-ratio: 3 / 2;
}
@media (min-width: 760px) { .verhaalbeeld img { aspect-ratio: 5 / 2; } }
.verhaalbeeld::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, var(--inkt) 0%, rgba(0,0,0,0) 42%);
  opacity: 0.55;
}

/* Twee kolommen, ook op de kleinste telefoon.
   Acht foto's onder elkaar maken van deze sectie de langste scroll van de
   pagina, en dan werkt beeld tegen je in plaats van voor je. Naast elkaar is
   het vier rijen en zie je in één oogopslag dat het om echt werk gaat. */
.praktijk { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 680px)  { .praktijk { gap: 16px; } }
@media (min-width: 1020px) { .praktijk { grid-template-columns: repeat(3, 1fr); } }

.praktijk-kaart {
  margin: 0;
  border: 1px solid var(--rand);
  border-radius: 13px;
  overflow: hidden;
  background: var(--diep);
  display: flex;
  flex-direction: column;
}
.praktijk-kaart img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
.praktijk-kaart figcaption {
  padding: 16px 18px 18px;
  color: var(--chroom);
  font-size: 0.97rem;
  line-height: 1.55;
}
/* In een halve telefoonbreedte is dat bijschrift te groot: dan valt elke regel
   na drie woorden om en wordt de kaart hoger dan de foto zelf. */
@media (max-width: 679px) {
  .praktijk-kaart { border-radius: 10px; }
  .praktijk-kaart figcaption { padding: 10px 11px 12px; font-size: 0.83rem; line-height: 1.45; }
}

/* ── Rasters ─────────────────────────────────────────────────────────────── */

.raster { display: grid; gap: 18px; }
@media (min-width: 700px)  { .raster { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { .raster--drie { grid-template-columns: repeat(3, 1fr); } }

.punt { display: flex; flex-direction: column; gap: 9px; padding: 22px; border: 1px solid var(--rand); border-radius: 13px; background: var(--diep); }
.punt p { color: var(--chroom); font-size: 0.96rem; }
.punt-icoon { width: 30px; height: 30px; color: var(--water); }

/* Het amberen rondje.
   Overal elders op deze pagina is een icoon blauw en lijndun, en daardoor
   verdwijnt het in de kaart. Hier het omgekeerde: een gevuld vlak in het amber
   uit het merkteken, met het icoon eruit gespaard in de achtergrondkleur. Dat
   is de enige plek waar amber als vlak wordt gebruikt, en juist daarom valt het
   op — gebruik je het overal, dan valt het nergens meer op.
   De maat is 42 px: groot genoeg om kleur te zijn in plaats van een stipje,
   klein genoeg om de kop ernaast niet te verdringen. */
.punt-badge {
  width: 42px; height: 42px;
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: var(--signaal);
  color: var(--inkt);
  margin-bottom: 4px;
}
.punt-badge svg { width: 21px; height: 21px; display: block; }

/* De kaart licht al op bij hover; het rondje doet subtiel mee zodat de hele
   kaart als één ding reageert en niet als een plaatje met een kader eromheen. */
.punt { transition: border-color .18s ease, transform .18s ease, background-color .18s ease; }
.punt:hover .punt-badge { background: #ffc44d; }
@media (prefers-reduced-motion: reduce) { .punt:hover .punt-badge { background: var(--signaal); } }

/* ── PWA-blok ────────────────────────────────────────────────────────────── */

.telefoon-blok { display: grid; gap: 44px; align-items: center; }
@media (min-width: 900px) { .telefoon-blok { grid-template-columns: 0.9fr 1.1fr; } }

.telefoon {
  width: 248px; max-width: 100%;
  margin-inline: auto;
  border: 1px solid var(--rand);
  border-radius: 30px;
  padding: 12px;
  background: var(--diep);
  box-shadow: 0 30px 60px -28px rgba(0,0,0,0.9);
}
.telefoon-scherm { background: var(--inkt); border-radius: 20px; padding: 18px 15px; display: flex; flex-direction: column; gap: 13px; }
.telefoon-kop { display: flex; align-items: center; justify-content: space-between; font: 600 10px/1 var(--mono); letter-spacing: 0.12em; color: var(--chroom); }
.afspraak { border: 1px solid var(--rand); border-radius: 11px; padding: 11px 12px; display: flex; flex-direction: column; gap: 3px; }
.afspraak--nu { border-color: var(--water); background: rgba(23,162,232,0.10); }
.afspraak time { font: 700 14px/1 var(--mono); font-variant-numeric: tabular-nums; }
.afspraak span { font-size: 12.5px; color: var(--chroom); }

.lijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.lijst li { display: flex; gap: 13px; align-items: flex-start; color: var(--chroom); font-size: 0.99rem; }
.lijst svg { flex: none; margin-top: 3px; color: var(--water); }
.lijst b { color: var(--schuim); font-weight: 600; }

/* ── Reviews ─────────────────────────────────────────────────────────────────
   NOG NIET LIVE. De kaarten hieronder staan er als vorm, met tekst die niet
   voor een echte recensie kan doorgaan — verzonnen citaten met verzonnen namen
   op een verkooppagina zijn misleidend, en dat valt op zodra iemand de naam
   opzoekt. Zodra er echte reviews zijn: de tekst vervangen, de naam en plaats
   invullen en het blok `.let-op` plus de klasse `--leeg` verwijderen. */

.let-op {
  display: flex; gap: 12px; align-items: flex-start;
  border: 1px dashed var(--signaal);
  border-radius: 12px;
  background: rgba(255,176,32,0.07);
  padding: 14px 16px;
  margin-bottom: 26px;
  font-size: 0.93rem;
  color: #e8d6b4;
}
.let-op b { color: var(--signaal); }

.oordeel {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
  margin-bottom: 26px;
}
.sterren { display: flex; gap: 3px; color: var(--signaal); }
.oordeel-cijfer { font: 800 1.6rem/1 var(--body); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.oordeel-bij { color: var(--chroom); font-size: 0.95rem; }

.review {
  display: flex; flex-direction: column; gap: 14px;
  padding: 22px;
  border: 1px solid var(--rand);
  border-radius: 13px;
  background: var(--diep);
}
.review--leeg { border-style: dashed; }
.review--leeg .review-tekst { color: #6f8298; font-style: italic; }
.review-tekst { font-size: 0.99rem; line-height: 1.6; }
.review-wie { display: flex; flex-direction: column; gap: 2px; margin-top: auto; }
.review-wie strong { font-size: 0.95rem; font-weight: 600; }
.review-wie span { color: var(--chroom); font-size: 0.87rem; }
.review-bron {
  font: 600 10.5px/1 var(--mono);
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--chroom);
}

/* ── Prijzen ─────────────────────────────────────────────────────────────── */

/* Onder elkaar op een telefoon is 20px te weinig: de rekensom begint dan
   tegen de onderrand van de kaart aan en lijkt erbij te horen. Naast elkaar
   scheidt de lijn de twee al, en mag de afstand kleiner blijven. */
.prijzen { display: grid; gap: 48px; align-items: start; }
@media (min-width: 880px) { .prijzen { grid-template-columns: 1fr 1fr; gap: 24px; } }

.prijskaart { background: var(--diep); border: 1px solid var(--rand); border-radius: 16px; padding: 30px; display: flex; flex-direction: column; gap: 18px; }
.prijskaart--uitgelicht { border-color: var(--water); box-shadow: 0 0 0 1px rgba(23,162,232,0.3), 0 26px 60px -34px rgba(23,162,232,0.8); }
.prijs-naam { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
/* De naam van het pakket. Stond als inline style op de h2 van de prijzenpagina
   en als niets op de h3 van de homepage — twee koppen die hetzelfde zeggen en
   er anders uitzagen. Hier, zodat de mediaquery hieronder er ook bij kan. */
.prijs-naam h2, .prijs-naam h3 { font-size: 1.16rem; }
.vlag { font: 700 10.5px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: #04121d; background: var(--signaal); padding: 6px 9px; border-radius: 5px; }
/* De pil breekt nooit. "30 DAGEN / PROBEREN" over twee regels maakt van een
   label een blokje tekst, en dan lijkt het een tweede kop naast de eerste. */
.vlag { white-space: nowrap; }

/* Op een telefoon namen de naam en de pil samen precies de volle breedte in
   beeld: 140 + 12 + 117 op 269 beschikbaar. Alle drie de getallen passen, en
   juist daarom brak élk van de twee. Hieronder krimpen ze allebei een beetje
   zodat ze naast elkaar op één regel staan — dat is wat de rij bedoelt te
   zeggen: dit is het pakket, en je mag het dertig dagen proberen.

   Kaartpadding mee omlaag: die 30px aan elke kant is op een breed scherm lucht
   en op 390px een derde van de ruimte. */
@media (max-width: 560px) {
  .prijskaart { padding: 22px; }
  .prijs-naam { gap: 8px; }
  .prijs-naam h2, .prijs-naam h3 { font-size: 0.95rem; line-height: 1.25; }
  .vlag { font-size: 9.5px; letter-spacing: 0.08em; padding: 5px 7px; }
}

/* De naam blijft op één regel — maar niet op de allersmalste toestellen.
   Onder ongeveer 360px is er domweg geen ruimte voor "VIP Carwash Booking"
   naast de pil, en een nowrap die niet past duwt de kaart breder dan het
   scherm: dan scrolt de hele pagina zijwaarts. Een kop over twee regels is
   lelijk, een pagina die opzij schuift is stuk. Vandaar de ondergrens. */
@media (min-width: 358px) and (max-width: 560px) {
  .prijs-naam h2, .prijs-naam h3 { text-wrap: nowrap; }
}
.bedrag { display: flex; align-items: baseline; gap: 8px; }
.bedrag strong { font: 800 3rem/1 var(--body); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.bedrag span { color: var(--chroom); font-size: 0.94rem; }
.jaarregel { font: 500 12.5px/1.5 var(--mono); color: var(--signaal); }

.prijslijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 0.96rem; }
.prijslijst li { display: flex; gap: 10px; align-items: flex-start; color: var(--chroom); }
.prijslijst svg { flex: none; margin-top: 4px; color: var(--water); }
.prijslijst li.uit { color: #4f6379; }
.prijslijst li.uit svg { color: #3a4c60; }

/* ── De rekensom naast de prijs ──────────────────────────────────────────────
   Sinds er één pakket is, staat er nog maar één kaart in het tweekoloms
   rooster van .prijzen. De tweede kolom vullen met een tweede kaart zou een
   keuze suggereren die er niet is; hier staat wat een lezer bij een prijs
   werkelijk wil weten — wanneer heb ik dit terugverdiend.

   Geen kaartrand en geen kaartachtergrond: dit is geen tweede product maar
   het antwoord op de kaart ernaast. Alleen een lijn aan de aanzetkant bindt
   de twee aan elkaar. */
.terugverdien { display: flex; flex-direction: column; gap: 14px; padding: 4px 0 0; }
@media (min-width: 880px) {
  .terugverdien { padding: 4px 0 0 30px; border-left: 1px solid var(--rand); }
}
.terugverdien h2 { font-size: 1.5rem; letter-spacing: -0.02em; }
.terugverdien p { color: var(--chroom); font-size: 0.98rem; }
/* Het blok is een kolom-flex, en zonder dit rekt de knop over de volle breedte
   uit. Een knop zo breed als een alinea leest als een banner. */
.terugverdien .knop { align-self: flex-start; margin-top: 4px; }

/* Drie manieren waarop het bedrag terugkomt. De kop van elke regel is de
   claim, de regel eronder de onderbouwing — zo kun je de lijst scannen en
   alleen stoppen bij wat je herkent. */
.rekensom { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.rekensom li {
  display: flex; flex-direction: column; gap: 4px;
  padding-left: 15px;
  border-left: 2px solid var(--water);
}
.rekensom strong { font-size: 0.98rem; color: var(--schuim); }
.rekensom span { color: var(--chroom); font-size: 0.94rem; line-height: 1.62; }

/* De kleine regel: voetnoten, voorbehouden en wat er onder een blok hoort te
   staan zonder de aandacht te trekken. */
.fijn { color: var(--chroom); font-size: 0.9rem; line-height: 1.7; }

/* ── FAQ ─────────────────────────────────────────────────────────────────── */

.faq { display: flex; flex-direction: column; gap: 0; max-width: 76ch; }
.faq details { border-bottom: 1px solid var(--rand); }
.faq details:first-child { border-top: 1px solid var(--rand); }
.faq summary {
  cursor: pointer; list-style: none;
  padding: 21px 40px 21px 0;
  font-weight: 600; font-size: 1.05rem; letter-spacing: -0.015em;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font: 400 24px/1 var(--body); color: var(--water);
}
.faq details[open] summary::after { content: "–"; }
.faq p { padding: 0 0 22px; color: var(--chroom); max-width: 68ch; }

/* ── Slot-CTA ────────────────────────────────────────────────────────────── */

.slotblok {
  border: 1px solid rgba(23,162,232,0.45);
  border-radius: 18px;
  background: linear-gradient(140deg, rgba(23,162,232,0.14), var(--diep) 62%);
  overflow: hidden;
  display: grid;
}
@media (min-width: 900px) { .slotblok { grid-template-columns: 1.25fr 0.75fr; } }

.slotblok-tekst {
  padding: clamp(32px, 5vw, 56px);
  display: flex; flex-direction: column; gap: 22px; align-items: flex-start;
}
/* Op een smal scherm staat het beeld boven de tekst; het `order` draait dat om
   zodat je begint bij wat er staat te gebeuren, niet bij een foto. */
.slotblok-beeld { order: -1; min-height: 220px; position: relative; }
@media (min-width: 900px) { .slotblok-beeld { order: 0; min-height: 0; } }
.slotblok-beeld img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ── Voettekst ───────────────────────────────────────────────────────────────
   Vier kolommen in plaats van één regel links. Met vijftien pagina's is de voet
   de tweede navigatie van de site: wie onderaan een landingspagina uitkomt moet
   daar verder kunnen zonder terug te scrollen. */

.voet { border-top: 1px solid var(--rand); padding-block: 44px 32px; color: var(--chroom); font-size: 0.9rem; }
.voet a { text-decoration: none; color: var(--chroom); }
.voet a:hover { color: var(--schuim); }

.voet-raster { display: grid; gap: 30px 26px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .voet-raster { grid-template-columns: repeat(4, 1fr); } }

.voet-kolom { display: flex; flex-direction: column; gap: 9px; align-items: flex-start; }
.voet-kop {
  font: 600 10.5px/1 var(--mono);
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--schuim);
  margin: 0 0 3px;
}

/* ── Vertrouwensstrook ───────────────────────────────────────────────────────
   Klein en zakelijk. Een groot blok met een schild eist aandacht op precies de
   plek waar iemand al weg wil; deze regel is er voor wie er nét even naar zoekt
   voordat hij zijn klantgegevens aan een vreemde partij toevertrouwt. */
.vertrouwen {
  display: grid; gap: 26px 64px;
  margin-top: 42px; padding-top: 32px; padding-bottom: 6px;
  border-top: 1px solid var(--rand);
}
@media (min-width: 760px) { .vertrouwen { grid-template-columns: 1fr 1fr; } }

/* Het pictogram lijnt uit met de kop en niet met het midden van de alinea:
   anders zakt het weg naast de tweede regel zodra de tekst afbreekt. */
.vertrouwen-punt { display: flex; align-items: flex-start; gap: 16px; }
.vertrouwen-schild { width: 24px; height: 29px; flex: none; }
.vertrouwen-stripe { width: 24px; height: 29px; }
.vertrouwen-tekst {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.65;
  color: var(--chroom);
}
.vertrouwen-tekst strong {
  display: block;
  margin-bottom: 4px;
  color: var(--schuim);
  font-size: 0.83rem;
  letter-spacing: 0.01em;
}
.vertrouwen-tekst a { color: var(--water-op); }
/* Stripe in hun eigen paars. Op deze donkere ondergrond haalt #635bff te weinig
   contrast; deze lichtere tint blijft herkenbaar en leesbaar. */
.stripe-naam { color: #a9a3ff; font-weight: 600; }

.voet-onder {
  display: flex; flex-wrap: wrap; gap: 8px 24px;
  justify-content: space-between;
  align-items: center;
  /* Geen eigen scheidingslijn: de vertrouwensstrook erboven brengt er al een
     mee, en twee haarlijnen onder elkaar leest als een verdwaalde rand. */
  margin-top: 30px;
  font-size: 0.86rem;
}
.voet-onder-tekst { display: flex; flex-wrap: wrap; gap: 8px 24px; }

/* De enige link in deze balk, dus hij mag zich onderscheiden van de tekst
   ernaast zonder een knop te worden. */
.voet-sociaal {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--chroom);
  text-decoration: none;
}
.voet-sociaal svg { width: 20px; height: 20px; }
.voet-sociaal:hover { color: var(--water-op); }

/* ── Skiplink ────────────────────────────────────────────────────────────────
   Buiten beeld tot hij focus krijgt. Niet met display:none of visibility:hidden
   — dan haalt het toetsenbord hem ook niet, en dan is er dus geen skiplink. */
.overslaan {
  position: absolute;
  left: -9999px; top: 0; z-index: 100;
  background: var(--water);
  color: #04121d;
  font: 600 15px/1 var(--body);
  padding: 13px 20px;
  border-radius: 0 0 8px 0;
  text-decoration: none;
}
.overslaan:focus { left: 0; }

/* ── Navigatie in de bovenbalk ───────────────────────────────────────────── */

.balk-nav { display: none; gap: 22px; margin-left: auto; }
@media (min-width: 1000px) { .balk-nav { display: flex; } }

.balk-link--rand { display: none; }
@media (min-width: 620px) { .balk-link--rand { display: inline; } }

/* Naast het logo en de menuknop blijft er op een telefoon weinig over voor de
   CTA. Zonder deze regel breekt "Gratis proberen" over twee regels en wordt de
   balk een stuk hoger dan de rest van de site. */
.bovenbalk .knop--klein { white-space: nowrap; }
@media (max-width: 430px) {
  .bovenbalk .knop--klein { padding: 9px 12px; font-size: 13.5px; }
  .bovenbalk .merk span { font-size: 0.94rem; }
}

/* ── Mobiel menu ─────────────────────────────────────────────────────────────
   Een <details> en geen JavaScript. Een navigatie die pas werkt zodra een
   script geladen is, is een navigatie die soms niet werkt — en dat merk je
   uitgerekend op de trage verbinding waar het ertoe doet. */

.menu-uit { position: relative; }
@media (min-width: 1000px) { .menu-uit { display: none; } }

.menu-uit > summary {
  list-style: none;
  cursor: pointer;
  display: flex; align-items: center;
  padding: 8px;
  border: 1px solid var(--rand);
  border-radius: 8px;
  color: var(--schuim);
}
.menu-uit > summary::-webkit-details-marker { display: none; }
.menu-uit[open] > summary { border-color: var(--water); }

.menu-uit-lijst {
  position: absolute;
  right: 0; top: calc(100% + 9px);
  min-width: 232px;
  display: flex; flex-direction: column;
  background: var(--diep);
  border: 1px solid var(--rand);
  border-radius: 12px;
  padding: 7px;
  box-shadow: 0 24px 50px -24px rgba(0,0,0,0.9);
}
.menu-uit-lijst a {
  padding: 10px 12px;
  border-radius: 7px;
  text-decoration: none;
  color: var(--schuim);
  font-size: 0.95rem;
}
.menu-uit-lijst a:hover { background: rgba(23,162,232,0.12); color: var(--water-op); }

/* ── Kruimelpad ──────────────────────────────────────────────────────────── */

.kruimels {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font: 600 10.5px/1.4 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--chroom);
  margin-bottom: 20px;
}
.kruimels a { color: var(--chroom); text-decoration: none; }
.kruimels a:hover { color: var(--water-op); }
.kruimels i { font-style: normal; opacity: 0.45; }

/* ── Vergelijkingstabel ──────────────────────────────────────────────────────
   Op een telefoon wordt een tabel met vier kolommen onleesbaar. Hij scrollt
   dan binnen zijn eigen vak; de pagina zelf scrollt nooit horizontaal. */

.vergelijk-vak { overflow-x: auto; border: 1px solid var(--rand); border-radius: 14px; }
.vergelijk { width: 100%; border-collapse: collapse; font-size: 0.95rem; min-width: 520px; }
.vergelijk th, .vergelijk td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--rand); }
.vergelijk tr:last-child th, .vergelijk tr:last-child td { border-bottom: 0; }
.vergelijk thead th { background: var(--diep); font: 600 10.5px/1 var(--mono); letter-spacing: 0.15em; text-transform: uppercase; color: var(--chroom); }
.vergelijk tbody th { font-weight: 500; color: var(--schuim); }
.vergelijk td { color: var(--chroom); }
.vergelijk .ja { color: var(--water-op); font-weight: 600; }
.vergelijk .nee { color: #4f6379; }

/* ── Tijdlijn ────────────────────────────────────────────────────────────────
   Het avondscenario: een klant die om kwart over tien reserveert. De tijden in
   de mono, want dat is waar de wasstraat zelf met cijfers werkt. */

.tijdlijn { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.tijdlijn li {
  display: grid;
  grid-template-columns: 86px 1fr;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--rand);
  align-items: baseline;
}
.tijdlijn li:last-child { border-bottom: 1px solid var(--rand); }
.tijdlijn time {
  font: 600 13px/1.4 var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--water-op);
  letter-spacing: 0.02em;
}
.tijdlijn span { color: var(--chroom); }
.tijdlijn b { color: var(--schuim); font-weight: 600; }

/* ── Binnenkomst ─────────────────────────────────────────────────────────────
   Twee bewegingen, allebei dezelfde: van iets onder de eindstand omhoog, met
   een korte vervaging. De kop doet het bij het laden, de rest zodra hij in
   beeld komt.

   Bewust klein — 18 pixels en 0,6 seconde. Groter voelt als een presentatie in
   plaats van een pagina, en wie doorscrollt naar de prijzen wil niet op een
   animatie wachten. De vertraging per kaart loopt op in stappen van 60 ms; dat
   is net genoeg om de volgorde te zien zonder dat de laatste achterblijft.

   Alles staat achter `no-preference`: wie beweging heeft uitgezet krijgt de
   pagina meteen in de eindstand, zonder verborgen elementen. Dat laatste is de
   valkuil van dit soort effecten — een element dat op opacity:0 blijft staan
   omdat de waarnemer niet afging, is onzichtbare inhoud. */

@media (prefers-reduced-motion: no-preference) {
  .komt-op { animation: opkomst .62s cubic-bezier(.2,.7,.3,1) both; }
  .komt-op:nth-child(2) { animation-delay: .07s; }
  .komt-op:nth-child(3) { animation-delay: .14s; }
  @keyframes opkomst { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

  /* Let op de `.js-onthul` ervoor: die klasse zet het script zelf op <html>,
     en pas nádat het heeft vastgesteld dat het de blokken ook weer zichtbaar
     kán maken. Zonder die voorwaarde verbergt de CSS inhoud die daarna nooit
     meer tevoorschijn komt.

     Precies dat ging hier mis. In een iframe dat zelf niet scrolt — zoals de
     voorvertoning — meldt de waarnemer alles onder de eerste schermhoogte als
     "niet in beeld", en dan bleven "Het verschil", de reviews en de rest als
     leeg vlak staan. De waarschuwing stond al in dit bestand; de code hield
     zich er niet aan. */
  /* Ruim een seconde, en een grotere afstand. Trager dan gebruikelijk, maar
     de beweging is het punt: je moet hem zien gebeuren, niet vermoeden dat er
     iets gebeurd is. De curve loopt lang uit, zodat het eind zacht is in
     plaats van dat het blok abrupt stilstaat. */
  .js-onthul .onthul {
    opacity: 0;
    transform: translateY(34px);
    transition: opacity 1.05s cubic-bezier(.16,.68,.24,1), transform 1.05s cubic-bezier(.16,.68,.24,1);
    will-change: opacity, transform;
  }
  .js-onthul .onthul.zichtbaar { opacity: 1; transform: none; }
}

/* ── Kaarten die reageren ────────────────────────────────────────────────────
   Een kaart die oplicht als je erlangs gaat, geeft de pagina leven zonder dat
   er iets beweegt wat je niet vroeg. Alleen de rand en een minieme verplaatsing;
   een schaduw of een schaal maakt er een knop van, en dat is het niet. */
.punt, .kaart, .review {
  transition: border-color .18s ease, transform .18s ease, background-color .18s ease;
}
.punt:hover, .review:hover { border-color: #2c4a6b; transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) {
  .punt, .kaart, .review { transition: none; }
  .punt:hover, .review:hover { transform: none; }
}