/* Taxi de Gouden Venen, v8 (01-11-2026, Twan: "zwaar uitwerken naar Apple-stijl"). SF Pro van het toestel (Host Grotesk
   als terugval), Apple-grijs #F5F5F7, wit en inkt #1D1D1F, goud als enige accent, afgeronde kaarten. Menu zoals
   designcheck.nl (licht vlak van boven), voet met alle pagina's, opening met een foto van de Vinkeveense Plassen. */
@font-face{font-family:"Host Grotesk";src:url(../fonts/HostGrotesk.woff2) format("woff2");font-weight:300 800;font-display:swap}

:root{
  --grijs:#F5F5F7; --wit:#FFFFFF; --inkt:#1D1D1F; --tekst-2:#6E6E73; --tekst-3:#86868B; --lijn:#D2D2D7; --lijn-zacht:#E5E5EA;
  --goud:#E0C274; --goud-licht:#E9D08F; --goud-tekst:#7A5C1C; --nacht:#000000; --nacht-2:#1C1C1E;
  /* namen van v5/v7 voor de subpaginaregels */
  --beton:var(--grijs); --beton-diep:#E8E8ED; --kaart:var(--wit); --zwart:var(--inkt); --grafiet:var(--inkt); --staal:var(--tekst-3);
  --lijn-donker:rgba(255,255,255,.12); --tegel-donker:#2C2C2E; --papier:var(--grijs); --veen:var(--inkt);
  --kop:-apple-system,BlinkMacSystemFont,"SF Pro Display","Host Grotesk","Helvetica Neue",Arial,sans-serif;
  --romp:-apple-system,BlinkMacSystemFont,"SF Pro Text","Host Grotesk","Helvetica Neue",Arial,sans-serif;
  --t-klein:.76rem; --t-tekst:1rem; --t-lead:clamp(1.12rem,1.45vw,1.3rem); --t-h3:clamp(1.3rem,1.9vw,1.65rem);
  --t-h2:clamp(2.2rem,4.4vw,3.6rem); --t-titel:clamp(2.6rem,7.4vw,6.6rem);
  --breed:80rem; --kantlijn:clamp(16px,2.4vw,32px); --rand:clamp(20px,4vw,48px); --uit:cubic-bezier(.16,1,.3,1); --duur:.6s;
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--grijs);color:var(--inkt);font-family:var(--romp);font-size:17px;line-height:1.47;letter-spacing:-.022em;-webkit-font-smoothing:antialiased;text-size-adjust:100%;-webkit-text-size-adjust:100%;touch-action:manipulation}   /* geen zoom bij dubbeltikken op een blok (iOS); knijpen blijft */
body{margin:0;background:var(--grijs)}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
p{margin:0;text-wrap:pretty}
h1,h2,h3{font-family:var(--kop);font-weight:700;margin:0;letter-spacing:-.025em;line-height:1.05;text-wrap:balance}
button{font:inherit;color:inherit}
fieldset{border:0;margin:0;padding:0;min-width:0}
:focus-visible{outline:2px solid var(--inkt);outline-offset:3px;border-radius:6px}
.opening :focus-visible,.rit :focus-visible,.thuis .kop :focus-visible{outline-color:#fff}
.verborgen{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.springnaar{position:absolute;left:12px;top:-80px;z-index:100;background:var(--inkt);color:#fff;padding:10px 16px;border-radius:999px}
.springnaar:focus{top:12px}
a[href^="tel:"]{white-space:nowrap}
/* geen scrollbalk rechts (Twan 01-11: iedereen snapt dat hij kan scrollen); scrollen zelf werkt gewoon */
html{scrollbar-width:none;-ms-overflow-style:none}
html::-webkit-scrollbar,body::-webkit-scrollbar{display:none;width:0;height:0}
.houder{width:100%;max-width:var(--breed);margin:0 auto;padding:0 var(--rand)}

/* ---------- knoppen: effen capsule, dieper bij aanwijzen, iets kleiner bij indrukken (geen glans) ---------- */
.knop{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;padding:0 1.4rem;border:0;border-radius:999px;font:600 var(--t-tekst)/1 var(--romp);
  letter-spacing:-.01em;text-decoration:none;cursor:pointer;transition:background-color .3s var(--uit),transform .2s var(--uit)}
.knop:active{transform:scale(.97)}
.knop svg{width:18px;height:18px;flex:none}
.knop--goud{background:var(--goud);color:var(--inkt)}
.knop--goud:hover{background:var(--goud-licht)}
.knop--zwart{background:var(--inkt);color:#fff}
.knop--zwart:hover{background:#000}
.knop--licht{background:rgba(0,0,0,.06);color:var(--inkt)}
.knop--licht:hover{background:rgba(0,0,0,.1)}
.knop--wit{background:#fff;color:var(--inkt)}
.knop--klein{min-height:36px;padding:0 1rem;font-size:.88rem}
.pijl-link,.lijnlink{font-weight:500;color:var(--goud-tekst);text-decoration:none}
.pijl-link:hover,.lijnlink:hover{text-decoration:underline;text-underline-offset:.2em}
.pijl-link span{display:none}

/* ---------- het teken (zon in het water, geen tekst) ---------- */
.merk{display:block;width:36px;height:36px}

/* ---------- kop: hoort bij de pagina en scrolt mee (Twan 02-11: "geen topbar", logo, bel- en menuknop gaan gewoon mee) ---------- */
.kop{position:absolute;inset:0 0 auto 0;z-index:50;color:var(--inkt)}
.thuis .kop{color:#fff}
/* Twan 01-11: het menu verder naar rechts, zoals op designcheck.nl (de balk over de hele breedte, rand clamp(16px,2.4vw,32px)) */
.kop__binnen{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 var(--kantlijn);height:64px}
.kop__logo{display:block;border-radius:9px}
.kop__logo .merk{width:44px;height:44px}
/* linksboven alleen het gouden teken, zonder tegel (Twan 01-11): de foto is ertussen te zien */
.kop__logo .merk--goud{width:auto;height:40px;border-radius:0;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
.kop__logo{border-radius:6px}
/* op de lichte pagina's: hetzelfde goud, dieper, zodat het op lichtgrijs leest */
body:not(.thuis) .kop__logo .merk--goud{filter:brightness(.74) saturate(1.25) hue-rotate(-12deg) contrast(1.08)}
/* de belknop rechtsboven naast het menu (Twan 01-11), zelfde ronde knop */
.kop__rechts{display:flex;align-items:center;gap:10px}
.kop__bel,.menuknop{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:0;border-radius:50%;background:rgba(0,0,0,.05);cursor:pointer;padding:0;color:inherit;transition:background-color .3s}
.kop__bel svg{width:17px;height:17px;fill:currentColor}
.thuis .kop__bel,.thuis .menuknop{background:rgba(255,255,255,.16)}
.kop__bel:hover,.menuknop:hover{background:rgba(0,0,0,.09)}
.thuis .kop__bel:hover,.thuis .menuknop:hover{background:rgba(255,255,255,.26)}
.menuknop span{position:relative;display:block;width:18px;height:8px}
.menuknop i{position:absolute;left:0;right:0;height:1.5px;background:currentColor;border-radius:1px}
.menuknop i:first-child{top:0}.menuknop i:last-child{bottom:0}

/* ---------- menu: het paneel van designcheck.nl (licht vlak van boven, grote woorden, contact, één knop) ---------- */
.menu{position:fixed;inset:0;z-index:300;visibility:hidden;pointer-events:none;color:var(--inkt);transition:visibility 0s linear .5s}
.menu-open .menu{visibility:visible;pointer-events:auto;transition:visibility 0s}
.menu-open body{overflow:hidden}
.menu__scrim{position:absolute;inset:0;background:rgba(29,29,31,.32);opacity:0;transition:opacity .3s var(--uit)}
.menu-open .menu__scrim{opacity:1}
.menu__vlak{position:absolute;top:0;left:0;right:0;max-height:100%;overflow-y:auto;overscroll-behavior:contain;background:#FAFAFC;box-shadow:0 24px 48px -28px rgba(28,28,32,.35);
  opacity:0;transform:translateY(-16px);transition:opacity .28s var(--uit),transform .42s var(--uit)}
.menu-open .menu__vlak{opacity:1;transform:none}
.menu::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:calc(var(--vh,1vh)*100);background:#FAFAFC;opacity:0;transition:opacity .28s}
.menu-open .menu::before{opacity:1}
.menu__kop{display:flex;justify-content:space-between;align-items:center;padding:0 var(--kantlijn);height:64px}
.menu__logo{display:block;border-radius:6px}
/* in het menu (licht vlak) hetzelfde gouden teken als in de kop, in het diepere goud van de lichte pagina's */
.menu__logo .merk--goud{display:block;width:auto;height:40px;filter:brightness(.74) saturate(1.25) hue-rotate(-12deg) contrast(1.08) drop-shadow(0 1px 2px rgba(0,0,0,.25))}
.menu__dicht{-webkit-appearance:none;appearance:none;position:relative;width:40px;height:40px;margin-right:0;border:0;background:transparent;color:var(--inkt);cursor:pointer;border-radius:50%;transition:background-color .2s}
.menu__dicht:hover{background:rgba(0,0,0,.05)}
.menu__dicht::before,.menu__dicht::after{content:"";position:absolute;left:8px;right:8px;top:50%;height:1.5px;margin-top:-.75px;background:currentColor;border-radius:1px;transform:rotate(45deg)}
.menu__dicht::after{transform:rotate(-45deg)}
.menu__binnen{max-width:1120px;margin:0 auto;padding:clamp(20px,3vw,36px) clamp(20px,5vw,64px) clamp(36px,5vw,64px);display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:32px clamp(32px,5vw,72px)}
.menu__groot{list-style:none;margin:0;padding:0;display:grid;gap:4px;grid-row:1/span 2}
.menu__groot a{display:inline-block;font:600 clamp(28px,3vw,40px)/1.15 var(--kop);letter-spacing:-.035em;color:var(--inkt);text-decoration:none;padding:2px 0;transition:color .2s}
.menu__klein{list-style:none;margin:0;padding:0;display:grid;gap:10px;align-content:start}
.menu__klein a{font:600 17px/1.3 var(--romp);letter-spacing:-.02em;color:var(--inkt);text-decoration:none;transition:color .2s}
.menu__klein span{display:block;margin-top:2px;font-size:13px;color:var(--tekst-2);letter-spacing:-.01em}
.menu__groot a:hover,.menu__klein a:hover,.menu a[aria-current="page"]{color:var(--goud-tekst)}
.menu__actie{grid-column:2;grid-row:2;align-self:start;margin-top:-8px}
.menu__in{opacity:0;transform:translateY(-8px);transition:opacity .35s var(--uit),transform .5s var(--uit)}
.menu-open .menu__in{opacity:1;transform:none}
.menu-open .menu__in[data-i="0"]{transition-delay:.06s}.menu-open .menu__in[data-i="1"]{transition-delay:.09s}.menu-open .menu__in[data-i="2"]{transition-delay:.12s}
.menu-open .menu__in[data-i="3"]{transition-delay:.15s}.menu-open .menu__in[data-i="4"]{transition-delay:.18s}.menu-open .menu__in[data-i="5"]{transition-delay:.21s}
.menu-open .menu__in[data-i="6"]{transition-delay:.24s}.menu-open .menu__in[data-i="7"]{transition-delay:.27s}.menu-open .menu__in[data-i="8"]{transition-delay:.3s}
.menu-open .menu__in[data-i="9"]{transition-delay:.33s}

/* de naam in het laadscherm: Jost (OFL, fonts/OFL-Jost.txt), geometrisch zoals het teken (ronde G, scherpe V), in
   kapitalen (Twan 02-11: "alles in caps, zelfde font als het logo ongeveer"); alleen de letters van de naam (3 kB) */
@font-face{font-family:"Jost Merk";src:url(../fonts/Jost-500-merk.woff2) format("woff2");font-weight:400 600;font-style:normal;font-display:block}
/* ---------- laadscherm (Twan 01-11/02-11): het gouden teken valt letter voor letter in (eerst de D, dan de G, dan de
   V), daarna "Taxi de Gouden Venen" eronder en één glans over het goud. Drie keer dezelfde render, elk met een eigen
   uitsnede (img/v8/laad-*.svg uit tools/laad_maskers.py); aan het eind komt de hele render eroverheen, zodat er geen
   naad overblijft. Alleen verticaal en opacity: niets zoomt. Alleen het eerste bezoek (start.js zet .al-gezien), weg
   als de letters gevallen zijn en de naam er even staat en de foto er is (js/v8.js, hooguit 4,5 s), na 4,2 s ook zonder JS. ---------- */
.laad{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;overflow:hidden;animation:laadNood .5s var(--uit) 4.8s forwards;
  --waas:url(data:image/jpeg;base64,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);--waas-staand:url(data:image/jpeg;base64,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)}
/* het vlak apart, zodat het kan wegvloeien terwijl het logo naar de kop vliegt. Het vlak is de
   foto zelf, klein, vervaagd en donkerder (tools/laad_waas.py; Twan 02-11: niet meer één donkerblauw dat botst met de
   foto), op dezelfde plek als de foto van de opening; tools/css_v8.py zet hem als data-URI in v8.css */
.laad::before{content:"";position:absolute;inset:0 0 auto 0;height:max(100%,var(--held-h,100%));background:#151b29 var(--waas) 50% 74%/cover no-repeat;transition:opacity .85s cubic-bezier(.4,0,.2,1)}
.laad--weg{opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s}
.al-gezien .laad{display:none}
@keyframes laadNood{to{opacity:0;visibility:hidden}}
.laad__binnen{position:relative;z-index:1;display:grid;justify-items:center;gap:24px}
/* onthullen: het vlak vloeit weg (de foto komt eronder op), de naam gaat, het logo vliegt naar de kop */
.laad--onthul::before{opacity:0}
.laad--onthul .laad__naam{animation:laadUit .35s var(--uit) forwards}
@keyframes laadUit{from{opacity:1}to{opacity:0;transform:translateY(-6px)}}
html.laad-bezig .kop__logo{opacity:0}
.kop__logo{transition:opacity .2s}
.laad__merk{position:relative;width:84px;height:85px;transform-origin:0 0;transition:transform .85s cubic-bezier(.65,0,.25,1)}
.laad__deel,.laad__heel{position:absolute;inset:0;width:100%;height:100%;display:block}
.laad__deel{opacity:0;transform:translateY(-34px);animation:laadVal .7s cubic-bezier(.34,1.42,.55,1) forwards}
.laad__d{-webkit-mask:url(../img/v8/laad-d.svg) 0 0/100% 100% no-repeat;mask:url(../img/v8/laad-d.svg) 0 0/100% 100% no-repeat;animation-delay:.08s}
.laad__g{-webkit-mask:url(../img/v8/laad-g.svg) 0 0/100% 100% no-repeat;mask:url(../img/v8/laad-g.svg) 0 0/100% 100% no-repeat;animation-delay:.32s}
.laad__v{-webkit-mask:url(../img/v8/laad-v.svg) 0 0/100% 100% no-repeat;mask:url(../img/v8/laad-v.svg) 0 0/100% 100% no-repeat;animation-delay:.56s}
.laad__heel{opacity:0;animation:laadAan .01s linear 1.28s forwards}
@keyframes laadVal{0%{opacity:0;transform:translateY(-34px)}35%{opacity:1}100%{opacity:1;transform:none}}
@keyframes laadAan{to{opacity:1}}
.laad__glans{position:absolute;inset:0;pointer-events:none;
  -webkit-mask:url(../img/v8/merk-goud-kop-160.png) center/contain no-repeat;mask:url(../img/v8/merk-goud-kop-160.png) center/contain no-repeat;
  background:linear-gradient(112deg,rgba(255,250,232,0) 38%,rgba(255,250,232,.9) 50%,rgba(255,250,232,0) 62%) 130% 0/320% 100% no-repeat;
  animation:glans 1s cubic-bezier(.45,0,.2,1) 1.3s forwards}
@keyframes glans{to{background-position:-30% 0}}
.laad__naam{font-family:"Jost Merk",var(--romp);font-weight:500;font-size:clamp(.95rem,1.25vw,1.12rem);line-height:1;letter-spacing:.24em;text-transform:uppercase;
  padding-left:.24em;color:#EBD9A8;white-space:nowrap;opacity:0;transform:translateY(10px);animation:laadNaam .7s var(--uit) .95s forwards}
@keyframes laadNaam{to{opacity:1;transform:none}}

/* ---------- de opening (v10): polderweg bij het blauwe uur; boven de belofte in de lucht, onder de rit op de weg,
   het lichtspoor ertussen blijft vrij ---------- */
.opening{position:relative;height:var(--held-h,max(calc(var(--svh,1svh)*100),640px));min-height:640px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;background:#0A1226;color:#fff;isolation:isolate}
.opening__foto,.opening__foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* de foto staat stil: geen zoom bij laden of scrollen, nooit (Twan 01-11, al vaker gezegd: de foto trekt zich uit bij de
   eerste scroll op de telefoon). De hoogte van de opening ligt vast in px (js/start.js zet --held-h bij het laden) en
   groeit niet mee met de adresbalk; geen env(safe-area) in de opening, die verspringt als de balk inklapt */
.opening__foto img{object-position:50% 74%}
.opening::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(4,8,20,.5) 0,rgba(4,8,20,0) 34%),linear-gradient(to top,rgba(0,0,0,.62) 0,rgba(0,0,0,0) 26%)}
.opening__boven,.opening__onder{position:relative;z-index:2}
.opening__boven{padding-top:clamp(112px,calc(var(--vh,1vh)*16),180px)}
/* de titel is de rit: Taxi [dorp] / naar [bestemming], de keuzes zitten in de kop zelf */
.opening__titel{font-size:clamp(2.6rem,6.2vw,6rem);letter-spacing:-.04em;line-height:1.02;max-width:none}
.opening__regel{display:block}
.opening__naar{color:rgba(255,255,255,.58)}
.opening__titel .kies{text-decoration-thickness:.05em;text-underline-offset:.12em;text-decoration-color:rgba(255,255,255,.35)}
.opening__titel .kies::after{width:.2em;height:.2em;border-width:0 .055em .055em 0;margin-left:.22em;transform:translateY(-.18em) rotate(45deg)}
.opening__onder{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:20px 36px;padding-bottom:calc(clamp(32px,calc(var(--vh,1vh)*6),60px) + var(--held-onder,0px))}
.opening__koop{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px}
.opening__prijs{display:flex;align-items:flex-start;font-family:var(--kop);font-weight:700;font-size:clamp(3.6rem,6.6vw,6.2rem);line-height:.82;letter-spacing:-.05em;color:var(--goud);font-variant-numeric:tabular-nums}
.opening__euro{font-size:.42em;margin:.06em .05em 0 0;letter-spacing:0}
.opening__prijs b{font-weight:700;display:inline-block}
.opening__prijs b.wissel{animation:wissel .6s var(--uit)}
.opening__vast{flex:none;white-space:nowrap;font-size:.94rem;line-height:1.35;color:rgba(255,255,255,.72)}   /* Safari (text-wrap:pretty) brak "Vaste prijs, dag en nacht" over 3 regels (02-11); de regels zijn hier vast (br) */
.opening__vast .kies{color:#fff;font-weight:600}
.opening__reviews{display:flex;flex-direction:column;gap:3px;color:rgba(255,255,255,.78);font-size:.94rem;text-decoration:none}
.opening__reviews b{color:#fff}
.opening__reviews:hover span:nth-child(2){text-decoration:underline;text-underline-offset:.2em}
.opening__sterren{color:var(--goud);letter-spacing:.08em;font-size:1.05rem}
.opening__knop{min-height:54px;padding:0 1.8rem;font-size:1.0625rem}
/* de chatknop staat ook in de opening, rechts naast Plan deze rit (Twan 02-11); het wolkje Geen cookies wacht tot de
   opening uit beeld is (tools/dcbot.py) */
/* De rit en zijn prijs als één regel op de foto, geen kaart en geen knop: met de bot rechtsonder is die de enige actie
   (non-default-build Deel B); de bot neemt de keuze hier over. */
/* de prijs 1 cm achter de rit (Twan 01-11), niet helemaal rechts; de lijn erboven zo breed als de regel */
.ritregel{width:fit-content;max-width:100%;margin-top:0;padding-top:18px;border-top:1px solid rgba(255,255,255,.32);display:grid;grid-template-columns:minmax(0,max-content) auto;justify-content:start;align-items:end;gap:6px 38px}
.ritregel__rit{grid-column:1;font-family:var(--kop);font-weight:600;font-size:var(--t-h3);letter-spacing:-.02em;line-height:1.2}
.ritregel__naar{font-weight:400;color:rgba(255,255,255,.72)}
.ritregel__pers{grid-column:1;font-size:var(--t-tekst);color:rgba(255,255,255,.72)}
.ritregel__pers .kies{color:#fff;font-weight:600}
.ritregel__prijs{grid-column:2;grid-row:1/span 2;display:flex;align-items:flex-start;font-family:var(--kop);font-weight:700;font-size:var(--t-h2);line-height:.9;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.ritregel__euro{font-size:.45em;margin:.1em .06em 0 0;letter-spacing:0}
.ritregel__prijs b{font-weight:700;display:inline-block}
.ritregel__prijs b.wissel{animation:wissel .6s var(--uit)}
@keyframes wissel{from{opacity:0;transform:translateY(.15em)}to{opacity:1;transform:none}}
.kies{position:relative;display:inline-block;white-space:nowrap;cursor:pointer;text-decoration:underline;text-decoration-color:rgba(255,255,255,.45);text-decoration-thickness:1.5px;text-underline-offset:.22em;transition:text-decoration-color .3s}
.kies:hover{text-decoration-color:#fff}
.kies::after{content:"";display:inline-block;width:max(7px,.3em);height:max(7px,.3em);margin:0 2px 0 .32em;border-right:max(1.6px,.075em) solid currentColor;border-bottom:max(1.6px,.075em) solid currentColor;transform:translateY(-.3em) rotate(45deg);opacity:.75}
.kies select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:16px;-webkit-appearance:none;appearance:none;border:0;margin:0}
.kies:focus-within{outline:2px solid #fff;outline-offset:3px;border-radius:6px}
/* het eigen keuzemenu (vervangt de pop-up van het systeem): glas op de zwevende laag, donker op de foto, licht elders */
.kies--eigen select{display:none}
.kies--eigen:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:6px}

.kiezer{position:fixed;z-index:400;max-width:calc(100vw - 24px);overflow-y:auto;overscroll-behavior:contain;padding:6px;border-radius:18px;
  background:linear-gradient(160deg,rgba(255,255,255,.84),rgba(248,248,250,.72));-webkit-backdrop-filter:blur(24px) saturate(1.6);backdrop-filter:blur(24px) saturate(1.6);
  box-shadow:0 26px 52px -18px rgba(0,0,0,.34),0 6px 16px -8px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(255,255,255,.55);
  color:var(--inkt);font:500 1rem/1.2 var(--romp);letter-spacing:-.01em;outline:0;
  opacity:0;transform:translateY(-8px) scale(.97);transform-origin:20% 0;transition:opacity .2s var(--uit),transform .36s cubic-bezier(.34,1.4,.5,1)}
.kiezer--boven{transform:translateY(8px) scale(.97);transform-origin:20% 100%}
.kiezer.open{opacity:1;transform:none}
.kiezer--donker{background:linear-gradient(160deg,rgba(70,70,76,.58),rgba(24,24,28,.62));color:#fff;
  box-shadow:0 32px 64px -20px rgba(0,0,0,.75),0 8px 22px -12px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.3),inset 0 0 0 1px rgba(255,255,255,.1)}
.kiezer__optie{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:42px;padding:9px 12px 9px 14px;border-radius:12px;cursor:pointer;white-space:nowrap}
.kiezer__optie.actief{background:rgba(0,0,0,.06)}
.kiezer--donker .kiezer__optie.actief{background:rgba(255,255,255,.13)}
.kiezer__optie[aria-selected=true]{font-weight:600}
.kiezer__optie[aria-selected=true]::after{content:"";flex:none;width:11px;height:6px;border-left:2px solid var(--goud-tekst);border-bottom:2px solid var(--goud-tekst);transform:translateY(-2px) rotate(-45deg)}
.kiezer--donker .kiezer__optie[aria-selected=true]::after{border-color:var(--goud)}
/* in het prijzenblok ligt de lijst boven het glazen paneel; daar vervaagt WebKit niet, dus een dicht vlak (02-11) */
.kiezer--tarief{background:#1E1E21}
@media (prefers-reduced-transparency:reduce){.kiezer{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}.kiezer--donker{background:#1D1D1F}}
@media (prefers-reduced-motion:reduce){.kiezer{transition:opacity .01s}}

/* ---------- de rit meerijden: Apple-donker, de echte route in goud ---------- */
.rit{background:var(--nacht);color:#F5F5F7;position:relative;overflow:clip}
.rit__scene{height:calc(var(--svh,1svh)*100);min-height:560px;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:center;gap:clamp(24px,4vw,64px);max-width:var(--breed);margin:0 auto;padding:clamp(48px,calc(var(--vh,1vh)*8),96px) var(--rand)}
.rit__haltes{list-style:none;margin:0;padding:0;display:grid;align-self:center}
.halte{grid-area:1/1;opacity:0;transform:translateY(20px);transition:opacity var(--duur) var(--uit),transform var(--duur) var(--uit);visibility:hidden}
.halte.aan{opacity:1;transform:none;visibility:visible}
.halte__kop{font-size:var(--t-h2);letter-spacing:-.03em;line-height:1.02}
.halte p{margin-top:18px;font-size:var(--t-lead);max-width:30ch;color:#A1A1A6}
.rit__kaart{position:relative;height:min(calc(var(--svh,1svh)*78),760px);min-height:300px;overflow:hidden}
.rit__svg{display:block;width:100%;height:100%;overflow:hidden;--k:.05}
.rit__svg path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.rk-water{fill:var(--nacht-2)!important;stroke:none}
.rk-snelweg{stroke:#2C2C2E;stroke-width:1.2px;vector-effect:non-scaling-stroke}
.rk-spoor{stroke:rgba(224,194,116,.4);stroke-width:calc(var(--k) * 2.5px)}
.rk-lijn{stroke:var(--goud);stroke-width:calc(var(--k) * 6px)}
.rk-begin,.rk-eind{fill:var(--nacht);stroke:var(--goud);stroke-width:calc(var(--k) * 3px)}
.rk-stip{fill:var(--goud)}
.rk-naam{fill:#F5F5F7;font-family:var(--kop);font-weight:600;letter-spacing:-.01em;paint-order:stroke;stroke:var(--nacht);stroke-linejoin:round;text-rendering:geometricPrecision}
/* de rit in 3D (js/rit3d.js): het doek vult de hele scène, de tekst staat op een zwevend glazen paneel (liquid glass
   alleen op de zwevende laag), de namen van begin en eind als kleine glazen labels in de kaart */
.rit__scene{position:relative}
.rit__doek{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}
.rit--3d .rit__kaart{visibility:hidden}
.rit--3d .rit__haltes{position:relative;z-index:2;align-self:end;margin-bottom:clamp(24px,calc(var(--vh,1vh)*7),72px);padding:30px 34px 32px;border-radius:30px;max-width:440px;
  background:linear-gradient(155deg,rgba(122,126,132,.30) 0%,rgba(72,76,82,.20) 30%,rgba(26,28,32,.32) 100%);
  -webkit-backdrop-filter:blur(22px) saturate(1.4);backdrop-filter:blur(22px) saturate(1.4);
  box-shadow:0 32px 70px -18px rgba(0,0,0,.72),0 8px 24px -12px rgba(0,0,0,.55),inset 0 1.5px 0 rgba(255,255,255,.38),inset 0 0 0 1px rgba(255,255,255,.09),inset 0 -10px 22px -8px rgba(0,0,0,.45)}
.rit--3d .halte p{color:rgba(235,235,240,.74)}
.rit__label{position:absolute;left:0;top:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .4s var(--uit);padding:7px 13px;margin-top:-44px;translate:-50% 0;
  border-radius:999px;font:600 .82rem/1 var(--romp);letter-spacing:-.01em;color:#fff;white-space:nowrap;
  background:rgba(44,44,48,.42);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 0 0 1px rgba(255,255,255,.1),0 10px 24px -10px rgba(0,0,0,.6)}
.rit__label.aan{opacity:1}
@media (prefers-reduced-transparency:reduce){.rit--3d .rit__haltes,.rit__label{background:#1c1c1e;-webkit-backdrop-filter:none;backdrop-filter:none}}
.rit.rustig .rit__scene{height:auto;min-height:0;align-items:start}
.rit.rustig .rit__haltes{gap:40px}
.rit.rustig .halte{grid-area:auto;opacity:1;transform:none;visibility:visible}

/* ---------- zo gaat uw rit: wanneer, wat, hoe; rustige rijen met een haarlijn ---------- */
.stappen{background:#fff;padding:clamp(80px,calc(var(--vh,1vh)*12),128px) 0}
.stappen h2{font-size:var(--t-h2)}
.stappen__lijst{list-style:none;margin:clamp(32px,calc(var(--vh,1vh)*5),48px) 0 0;padding:0;border-top:1px solid var(--lijn-zacht)}
.stappen__lijst li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) minmax(0,2fr);gap:8px 40px;align-items:baseline;padding:26px 0;border-bottom:1px solid var(--lijn-zacht)}
.stappen__wanneer{font-size:.94rem;font-weight:600;color:var(--goud-tekst)}
.stappen__lijst h3{font-size:var(--t-h3);letter-spacing:-.02em;line-height:1.2}
.stappen__lijst p{color:var(--tekst-2);max-width:46ch}
.stappen__actie{margin-top:36px;display:flex;flex-wrap:wrap;align-items:center;gap:12px}

/* ---------- Vaste prijzen (02-11 avond, plan goedgekeurd: "meer gebruik maken van de ruimte"): één scherm, de keuze als
   grote zin zoals de titel van de opening, de drie bestemmingen als brede rijen: de naam, de prijs groot in goud er vlak
   achter (ongeveer 1 cm), Boek. Geen paneel en geen tegels; de vervaagde polderfoto komt op uit het donker van Zo gaat uw
   rit en lost onderin weer op in het verloop naar Goed om te weten. ---------- */
.tarief{position:relative;isolation:isolate;overflow:hidden;display:flex;min-height:var(--held-h,calc(var(--svh,1svh)*100));background:#070B16;color:#fff}
.tarief__waas,.tarief__waas img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tarief__waas{z-index:-2}
.tarief__waas img{object-position:50% 50%}
.tarief::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(to right,rgba(7,11,22,.66) 0,rgba(7,11,22,.4) 55%,rgba(7,11,22,.3) 100%)}
/* indeling (Twan 02-11 avond: "de indeling kan wat beter"): op de computer links de keuze (de zin, personen, alle tarieven),
   rechts de drie rijen met naam, prijs en Boek bij elkaar; op de telefoon de zin bovenaan en de rijen over de hoogte verdeeld */
.tarief>.houder{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-areas:"keuze rijen" "meer rijen";grid-template-rows:auto auto;
  align-content:center;column-gap:clamp(40px,6vw,112px);padding-top:clamp(40px,calc(var(--vh,1vh)*9),120px);padding-bottom:clamp(40px,calc(var(--vh,1vh)*9),112px)}
.tarief__keuze{grid-area:keuze;align-self:end}
.tarief :focus-visible{outline-color:#fff}
.tarief__zin{font-size:clamp(2rem,min(3.7vw,calc(var(--vh,1vh)*7)),3.3rem);letter-spacing:-.04em;line-height:1.02;color:#fff}
.tarief__regel{display:block}
.tarief__vanuit{color:rgba(255,255,255,.58)}
.tarief__zin .kies{white-space:normal;text-decoration-thickness:.05em;text-underline-offset:.12em;text-decoration-color:rgba(255,255,255,.35)}
.tarief__zin .kies::after{width:.2em;height:.2em;border-width:0 .055em .055em 0;margin-left:.22em;transform:translateY(-.18em) rotate(45deg)}
.tarief__pers{margin-top:clamp(8px,calc(var(--vh,1vh)*1.8),20px);font-size:var(--t-lead);color:rgba(255,255,255,.72)}
.tarief__pers .kies{color:#fff;font-weight:600}
.tarief__doelen{grid-area:rijen;align-self:center;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:max-content max-content auto minmax(0,1fr);column-gap:clamp(28px,3.4vw,48px);border-top:1px solid rgba(255,255,255,.16)}
.tarief__doelen li{display:contents}
.tarief__doel{grid-column:1/-1;display:grid;grid-template-columns:subgrid;align-items:center;padding:clamp(6px,calc(var(--vh,1vh)*1.6),22px) 0;border-bottom:1px solid rgba(255,255,255,.16);color:#fff;text-decoration:none;transition:background-color .3s var(--uit)}
.tarief__doel:hover{background:rgba(255,255,255,.04)}
.tarief__plaats{grid-column:1;display:flex;flex-direction:column;gap:4px;min-width:0}
.tarief__naar{font-family:var(--kop);font-weight:600;font-size:clamp(1.25rem,min(2.4vw,calc(var(--vh,1vh)*4.6)),2.6rem);letter-spacing:-.025em;line-height:1.05}
.tarief__km{font-size:.94rem;color:rgba(235,235,245,.72);font-variant-numeric:tabular-nums}
.tarief__bedrag{grid-column:2;display:flex;align-items:flex-start;font-family:var(--kop);font-weight:700;font-size:clamp(2.4rem,min(5vw,calc(var(--vh,1vh)*9.4)),5.6rem);line-height:.84;letter-spacing:-.05em;color:var(--goud);font-variant-numeric:tabular-nums}
.tarief__euro{font-size:.42em;margin:.06em .05em 0 0;letter-spacing:0}
.tarief__bedrag b{font-weight:700;display:inline-block}
.tarief__bedrag b.wissel{animation:wissel .6s var(--uit)}
.tarief__boek{grid-column:3;display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 22px;border-radius:999px;background:var(--goud);color:var(--inkt);font-weight:600;font-size:1rem;letter-spacing:-.01em;
  transition:background-color .3s var(--uit),color .3s var(--uit),transform .2s var(--uit)}
.tarief__doel:hover .tarief__boek{background:var(--goud-licht)}
.tarief__doel:active .tarief__boek{transform:scale(.97)}
.tarief__meer{grid-area:meer;align-self:start;margin-top:clamp(14px,calc(var(--vh,1vh)*2.6),28px);font-size:.94rem}
.tarief__meer a{color:var(--goud);text-decoration:none;font-weight:500}
.tarief__meer a:hover{text-decoration:underline;text-underline-offset:.2em}

/* ---------- Goed om te weten (02-11 avond, Twan: "mooier, en precies één pagina"): één scherm, licht. Links de kop met een
   andere vraag via WhatsApp en alle vragen, rechts vier grote vraagrijen die openklappen (één tegelijk, de eerste open). ---------- */
.kortvragen{position:relative;z-index:1;display:flex;min-height:var(--held-h,calc(var(--svh,1svh)*100));background:#fff}
.kortvragen>.houder{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:start;align-content:start;
  padding-top:clamp(72px,calc(var(--vh,1vh)*12),140px);padding-bottom:clamp(48px,calc(var(--vh,1vh)*8),96px)}
.kortvragen h2{font-size:var(--t-h2);margin-top:-.12em}
.kortvragen__meer{margin-top:clamp(12px,calc(var(--vh,1vh)*2),20px);font-size:var(--t-lead);color:var(--tekst-2)}
.kortvragen__meer a{color:var(--goud-tekst);font-weight:500;text-decoration:none}
.kortvragen__meer a:hover{text-decoration:underline;text-underline-offset:.2em}
.vraagrij{border-bottom:1px solid var(--lijn-zacht)}
.vraagrij:first-child{border-top:1px solid var(--lijn-zacht)}
.vraagrij summary{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:clamp(16px,calc(var(--vh,1vh)*2.6),28px) 0;cursor:pointer;list-style:none;
  font-family:var(--kop);font-weight:600;font-size:clamp(1.15rem,1.7vw,1.6rem);letter-spacing:-.02em;line-height:1.25;color:var(--inkt)}
.vraagrij summary::-webkit-details-marker{display:none}
.vraagrij summary:focus-visible{outline:2px solid var(--inkt);outline-offset:4px;border-radius:6px}
.vraagrij__plus{position:relative;flex:none;width:34px;height:34px;border-radius:50%;background:#F2F2F4;transition:background-color .3s var(--uit),transform .45s var(--uit)}
.vraagrij__plus::before,.vraagrij__plus::after{content:"";position:absolute;left:50%;top:50%;width:13px;height:2px;margin:-1px 0 0 -6.5px;border-radius:1px;background:var(--inkt)}
.vraagrij__plus::after{transform:rotate(90deg)}
.vraagrij summary:hover .vraagrij__plus{background:#E8E8ED}
.vraagrij[open] .vraagrij__plus{transform:rotate(45deg);background:var(--goud)}
.vraagrij__antwoord p{margin:0;padding:0 58px clamp(16px,calc(var(--vh,1vh)*2.6),28px) 0;color:var(--tekst-2);max-width:58ch}
.vraagrij__antwoord a{color:var(--inkt)}

/* ---------- de chauffeur ---------- */
.chauffeur{background:#fff;padding:clamp(72px,calc(var(--vh,1vh)*10),112px) 0}
.chauffeur h2{font-size:var(--t-h2)}
.chauffeur__zin{margin-top:14px;font-size:var(--t-lead);color:var(--tekst-2)}

/* ---------- de voet: plat en klein (Twan 02-11: "minder lomp, een heel stuk smaller"): één regel menu + contact, één onderregel ---------- */
.voet{background:#2A1E14;color:rgba(255,255,255,.62);font-size:12px;line-height:1.4;letter-spacing:-.01em}
.voet__binnen{max-width:var(--breed);margin:0 auto;padding:22px var(--rand) calc(20px + env(safe-area-inset-bottom))}
.voet a{text-decoration:none;color:rgba(255,255,255,.72)}
.voet a:hover{text-decoration:underline;color:#fff}
.voet ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px}
.voet__boven{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 32px;padding-bottom:14px}
.voet__onder{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 0;padding-top:12px;border-top:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.45)}
.voet__onder>span{margin-right:auto;padding-right:16px}
.voet__onder>span a{color:rgba(255,255,255,.45);text-decoration:underline}
.voet__onder>a{padding-inline:10px;border-left:1px solid rgba(255,255,255,.16)}
.voet__onder>a:last-child{padding-right:0}
/* "Website gebouwd door designcheck.": het woordmerk zoals op designcheck.nl (lichtblauwe lijn onder "check" en de punt) */
.voet__dc{display:inline-flex;align-items:baseline;gap:5px}
.voet__dc:hover{text-decoration:none}
.dc-merk{display:inline-flex;align-items:baseline;gap:3px;font-weight:700;font-size:12.5px;line-height:1;letter-spacing:-.03em;color:#fff}
.dc-merk__check{position:relative}
.dc-merk__check::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:#6FB4FF}
.dc-merk__punt{width:4px;height:4px;border-radius:50%;background:#6FB4FF;box-shadow:0 0 5px rgba(111,180,255,.55)}

/* ---------- WhatsApp-knopje rechtsonder (Twan 02-11), op de plek van de oude botknop: 54 px op 16 px van de rand,
   effen WhatsApp-groen met het witte teken, een zachte schaduw zodat hij op foto en wit blijft staan; indrukken zoals
   de andere knoppen. Ligt boven de inhoud, onder het open menu. ---------- */
.wa-knop{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:300;width:54px;height:54px;border-radius:50%;
  display:grid;place-items:center;background:#25D366;color:#fff;box-shadow:0 10px 24px -8px rgba(0,0,0,.45),0 2px 6px rgba(0,0,0,.18);
  transition:transform .2s var(--uit),background-color .2s var(--uit)}
.wa-knop svg{width:29px;height:29px;display:block;fill:currentColor}
.wa-knop:hover{background:#1FBF5B}
.wa-knop:active{transform:scale(.94)}
.wa-knop:focus-visible{outline:3px solid #fff;outline-offset:2px;box-shadow:0 0 0 7px rgba(7,11,22,.9),0 10px 24px -8px rgba(0,0,0,.45)}
.menu-open .wa-knop{opacity:0;visibility:hidden}
/* bij binnenkomst nooit over tekst: ligt het knopje bij het laden op een tekstregel of knop, dan wacht het tot de
   bezoeker scrolt (js/v8.js) */
.wa-knop{transition:transform .2s var(--uit),background-color .2s var(--uit),opacity .35s var(--uit),visibility 0s}
.js .wa-knop:not(.wa-klaar){opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .2s,visibility 0s .2s,transform .2s}
/* de voet houdt de hoek van het knopje vrij waar zijn rechterkant er anders onder valt (tot 1400 px breed) */
@media (min-width:701px) and (max-width:1400px){.voet__binnen{padding-right:calc(var(--rand) + 72px)}}
/* Vaste prijzen tot 1000 px: één kolom (twee kolommen worden daar te krap) */
@media (max-width:1000px){
  .tarief>.houder{grid-template-columns:minmax(0,1fr);grid-template-areas:"keuze" "rijen" "meer"}
  .tarief__zin{font-size:clamp(2rem,min(5vw,calc(var(--vh,1vh)*7)),3.6rem)}
  .tarief__doelen{margin-top:clamp(18px,calc(var(--vh,1vh)*4),44px);grid-template-columns:minmax(0,1fr) max-content auto}
}
/* ---------- tablet en telefoon ---------- */
@media (max-width:900px){
  .menu__binnen{grid-template-columns:minmax(0,1fr);gap:36px 24px;padding:16px 24px 48px}
  .menu__groot{grid-row:auto}
  .menu__groot a{font-size:32px}
  .menu__actie{grid-column:1;grid-row:auto;margin-top:0}
  .menu__actie .knop{width:100%;min-height:50px}
  .menu__vlak{bottom:0}
  .opening__boven{padding-top:96px}
  .opening__titel{font-size:clamp(2.3rem,11.4vw,3.4rem)}
  .opening__titel .kies{white-space:normal}
  .opening__onder{gap:14px 18px;padding-bottom:calc(16px + var(--held-onder,0px))}   /* boven de zwevende onderbalk van Safari */
  .opening__koop{display:contents}
  .opening__prijs{order:1;font-size:clamp(3.2rem,15vw,4.2rem)}
  .opening__vast{order:2}
  .opening__reviews{order:3;width:100%}
  /* de knop laat rechts 70 px vrij voor het WhatsApp-knopje (54 px op 16 px van de rand), zelfde hoogte en onderkant */
  .opening__knop{order:4;width:calc(100% - 70px);min-height:54px}
  .opening__reviews{flex-direction:row;align-items:center;gap:10px;font-size:.88rem}
  .opening__foto img{object-position:50% 70%}
  .laad::before{background-position:50% 70%}
  .ritregel{padding-top:16px;gap:4px 22px}
  .ritregel__rit{font-size:1.15rem}
  .ritregel__pers{font-size:.94rem}
  .opening::before{background:linear-gradient(to bottom,rgba(4,8,20,.45) 0,rgba(4,8,20,0) 30%),linear-gradient(to top,rgba(0,0,0,.72) 0,rgba(0,0,0,0) 34%)}
  .stappen__lijst li{grid-template-columns:minmax(0,1fr);gap:6px;padding:22px 0}
  .kortvragen>.houder{grid-template-columns:minmax(0,1fr);gap:clamp(16px,calc(var(--svh,1svh)*3),32px)}
  .rit__scene{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;align-items:stretch;gap:20px;padding:28px var(--rand) 40px}
  .rit__kaart{height:auto;min-height:0;grid-row:1}
  .rit__haltes{grid-row:2;min-height:12.5em}
  .rit--3d .rit__haltes{margin:0;padding:20px 22px 22px;border-radius:24px;max-width:none}
  .halte__kop{font-size:clamp(2rem,9vw,2.6rem)}
  .halte p{font-size:1.05rem;margin-top:12px}
}
/* ---------- telefoon (Twan 02-11) ---------- */
@media (max-width:700px){
  .voet__binnen{padding:20px var(--rand) calc(80px + env(safe-area-inset-bottom))}   /* onderin vrij voor het WhatsApp-knopje */
  .voet__boven{flex-direction:column;gap:8px;padding-bottom:12px}
  .voet ul{gap:6px 14px}
  .voet__onder>span{flex-basis:100%;padding-right:0;margin-bottom:2px}
  .voet__onder>a:first-of-type{padding-left:0;border-left:0}
  .voet__onder>.voet__dc{flex-basis:100%;padding-left:0;border-left:0;margin-top:4px}   /* eigen regel, geen los streepje ervoor */
  .laad::before{background-image:var(--waas-staand)}   /* de staande uitsnede, zoals de foto van de opening */
  /* Zo gaat uw rit: precies één scherm hoog (svh: het scherm met de balken van de browser, springt niet bij scrollen);
     de vijf rijen verdelen de ruimte, onderin Plan uw rit en Bellen naast elkaar, rechts 70 px vrij voor de chatknop
     (54 px op 16 px van de rand, zelfde onderkant), zoals in de opening */
  .stappen{padding:0}
  .stappen>.houder{display:flex;flex-direction:column;min-height:calc(var(--vh,1vh)*100);min-height:var(--held-h,calc(var(--svh,1svh)*100));padding-top:clamp(14px,calc(var(--svh,1svh)*4.6),44px);padding-bottom:calc(16px + var(--held-onder,0px))}   /* één vol scherm, ook onder de zwevende balk van Safari; de knoppen erboven */
  .stappen h2{font-size:clamp(1.7rem,calc(var(--svh,1svh)*4.4),2.2rem)}
  .stappen__lijst{flex:1 1 auto;display:flex;flex-direction:column;margin-top:clamp(6px,calc(var(--svh,1svh)*2.2),22px)}
  .stappen__lijst li{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;gap:2px;padding:clamp(3px,calc(var(--svh,1svh)*1.3),14px) 0}
  .stappen__wanneer{font-size:.8rem;line-height:1.3}
  .stappen__lijst h3{font-size:clamp(.94rem,calc(var(--svh,1svh)*2.6),1.2rem)}
  .stappen__lijst p{font-size:clamp(.76rem,calc(var(--svh,1svh)*2.1),.94rem);line-height:1.32}
  .stappen__actie{flex-wrap:nowrap;gap:10px;width:calc(100% - 70px);margin-top:clamp(8px,calc(var(--svh,1svh)*2.2),22px)}   /* 70 px vrij voor het WhatsApp-knopje */
  .stappen__actie .knop{flex:1 1 0;min-width:0;min-height:54px;padding:0 12px}
  /* Vaste prijzen: dezelfde zin en rijen, kleiner; de inhoud in het midden van wat je ziet (--held-onder onderin erbij) */
  .tarief>.houder{display:flex;flex-direction:column;justify-content:space-between;padding-top:clamp(40px,calc(var(--svh,1svh)*7),72px);padding-bottom:calc(clamp(20px,calc(var(--svh,1svh)*3),40px) + var(--held-onder,0px))}
  .tarief__keuze,.tarief__doelen{align-self:stretch}
  .tarief__zin{font-size:clamp(2rem,calc(var(--svh,1svh)*5),2.6rem)}
  .tarief__zin .kies{white-space:normal}
  .tarief__pers{font-size:1.06rem}
  .tarief__doelen{column-gap:14px;margin-top:clamp(18px,calc(var(--svh,1svh)*4.6),44px)}
  .tarief__doel{padding:clamp(12px,calc(var(--svh,1svh)*3),30px) 0}
  .tarief__naar{font-size:clamp(1.15rem,calc(var(--svh,1svh)*2.9),1.5rem)}
  .tarief__km{font-size:.8rem}
  .tarief__bedrag{font-size:clamp(2.3rem,calc(var(--svh,1svh)*6.4),3rem)}
  .tarief__boek{min-height:38px;padding:0 14px;font-size:.88rem}
  .tarief__meer{padding-right:70px}
  /* Goed om te weten: kop, dan de vragen; één scherm */
  .kortvragen>.houder{padding-top:clamp(40px,calc(var(--svh,1svh)*7),72px);padding-bottom:28px}
  .kortvragen h2{font-size:clamp(1.9rem,calc(var(--svh,1svh)*4.6),2.4rem)}
  .kortvragen__meer{margin-top:8px;font-size:1rem}
  .vraagrij summary{gap:16px;padding:clamp(11px,calc(var(--svh,1svh)*2.1),20px) 0;font-size:clamp(1rem,calc(var(--svh,1svh)*2.45),1.2rem);text-wrap:balance}
  .vraagrij__plus{width:30px;height:30px}
  .vraagrij__antwoord p{padding:0 0 clamp(12px,calc(var(--svh,1svh)*2.1),20px);font-size:.94rem;line-height:1.45}
}
/* lage telefoon: bepaald bij het laden (js/start.js zet .laag), niet met een max-height-query, want die springt om
   zodra de adresbalk inklapt (Twan 01-11: de titels sprongen naar voren) */
@media (max-width:900px){
  .laag .opening__titel{font-size:clamp(1.9rem,8.8vw,2.4rem)}
  .laag .opening__boven{padding-top:80px}
  .laag .opening__prijs{font-size:3rem}
  .laag .knop{min-height:44px}
  .laag .opening__knop{min-height:54px}
  .laag .stappen__actie .knop{min-height:54px}
  .laag .tarief__doelen{margin-top:10px}
  .laag .tarief__doel{padding:8px 0}
  .laag .tarief__zin{font-size:1.9rem}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* ================= SUBPAGINA'S: overgenomen uit v5/v6 ================= */

.belkaart{display:block;white-space:normal;border-radius:18px;background:var(--tegel-donker);color:#F5F5F7;padding:18px 20px;text-decoration:none;transition:background-color .3s}
a.belkaart[href]{white-space:normal}
.belkaart:hover{background:#3A3A3C}
.belkaart b{display:block;white-space:nowrap;font-weight:600;font-size:var(--t-h3);letter-spacing:-.02em}
.belkaart b.klein{font-size:1rem}
.belkaart span{display:block;margin-top:4px;font-size:.88rem;color:#A1A1A6}
.schakel{display:inline-flex;padding:2px;border-radius:999px;background:#E8E8ED;border:0}
.schakel span{position:relative}
.schakel input{position:absolute;opacity:0;width:1px;height:1px;left:0;top:0;margin:0}
.schakel label{display:block;margin:0;padding:7px 14px;border-radius:999px;font-size:.88rem;font-weight:500;color:var(--inkt);cursor:pointer;transition:background-color .25s,box-shadow .25s}
.schakel input:checked+label{background:#fff;color:var(--inkt);box-shadow:0 1px 3px rgba(0,0,0,.12),0 0 0 .5px rgba(0,0,0,.04)}
.schakel input:focus-visible+label{outline:2px solid var(--inkt);outline-offset:2px}
.cijfers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;list-style:none;margin:0;padding:0}
.cijfers b{display:block;font-weight:700;font-size:var(--t-h3);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.cijfers span{display:block;margin-top:4px;font-size:.88rem;color:var(--tekst-2)}
/* ================= SUBPAGINA'S (v5) ================= */
.paginakop{padding:calc(64px + clamp(40px,calc(var(--vh,1vh)*8),80px)) 0 clamp(10px,calc(var(--vh,1vh)*2),20px);position:relative}
.paginakop .houder{position:relative}
.kruimel{display:flex;gap:8px;font-size:.78rem;color:var(--staal);margin-bottom:18px}
.kruimel a{text-decoration:none}.kruimel a:hover{color:var(--beton)}
.kruimel span:last-child{color:rgba(236,233,227,.72)}
.paginakop h1{font-size:clamp(2.3rem,min(5vw,calc(var(--vh,1vh)*8)),4.4rem);line-height:1.04;letter-spacing:-.022em;max-width:20ch;color:var(--inkt)}
.paginakop__zin{margin-top:14px;max-width:44rem;color:var(--tekst-2);font-size:var(--t-lead);line-height:1.45;text-wrap:balance}
.inhoud{padding:clamp(28px,calc(var(--vh,1vh)*5),60px) 0 clamp(36px,calc(var(--vh,1vh)*6),72px)}
.twee{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,5vw,72px);align-items:start}
.knoppenrij{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px}

/* genummerde lijst als keuze (diensten, privacy, voorwaarden) */
.genummerd{list-style:none;margin:0;padding:0;border-top:1px solid var(--lijn)}
.genummerd li{border-bottom:1px solid var(--lijn)}
.genummerd button{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:18px;width:100%;padding:clamp(12px,calc(var(--vh,1vh)*1.9),20px) 0;cursor:pointer}
.genummerd b{font-size:.82rem;font-weight:600;color:var(--goud-tekst);font-variant-numeric:tabular-nums}
.genummerd span{font-family:var(--kop);font-weight:600;font-size:clamp(1.15rem,1.7vw,1.45rem);letter-spacing:-.01em;color:var(--tekst-2);transition:color .25s,transform .3s var(--uit)}
.genummerd button::after{content:"";margin-left:auto;width:28px;height:1px;background:var(--lijn);transition:width .3s var(--uit),background-color .3s;flex:none}
.genummerd button:hover span{color:var(--zwart)}
.genummerd button[aria-selected=true] span{color:var(--inkt)}
.genummerd button[aria-selected=true]::after{width:52px;background:var(--inkt)}
.genummerd button:focus-visible{outline:2px solid var(--inkt);outline-offset:2px;border-radius:6px}
.genummerd--klein button{padding:clamp(8px,calc(var(--vh,1vh)*1.2),12px) 0}
.genummerd--klein span{font-family:var(--romp);font-size:1rem;font-weight:600}
.panelen{display:grid}
.paneel{grid-area:1/1}
.paneel:not(.aan){display:none}
.paneel.aan{animation:paneel .6s var(--uit)}
@keyframes paneel{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.paneel{border-radius:28px;overflow:hidden;background:var(--kaart);box-shadow:none}
.paneel__beeld{aspect-ratio:16/9;max-height:calc(calc(var(--svh,1svh)*100) - 470px);min-height:180px;overflow:hidden;background:var(--beton-diep)}
.paneel__beeld img{width:100%;height:100%;object-fit:cover}
.paneel__tekst{padding:clamp(22px,calc(var(--vh,1vh)*3),32px) clamp(24px,2.4vw,34px)}
.paneel__tekst h2{font-size:clamp(1.5rem,2.2vw,2rem)}
.paneel__tekst p{margin:12px 0 22px;color:var(--tekst-2);max-width:52ch}
.tekstkaart{padding:clamp(24px,3vw,40px);max-height:calc(calc(var(--svh,1svh)*100) - 360px);overflow:auto}
.tekstkaart h2{font-size:clamp(1.5rem,2.2vw,2rem);margin-bottom:14px}
.tekstkaart p,.tekstkaart li{color:var(--tekst-2);font-size:.98rem}
.tekstkaart p+p{margin-top:12px}
.tekstkaart ul{padding-left:1.1em;margin:10px 0 0}
.tekstkaart strong{color:var(--zwart);font-weight:600}

/* tarieven */
.tabelkop{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;margin-bottom:18px}
.tabelkop p{font-size:.88rem;color:var(--tekst-2)}
.schakel--licht{background:var(--beton-diep);border-color:var(--lijn)}
.schakel--licht label{color:#515154}
.schakel--licht input:checked+label{background:var(--zwart);color:var(--beton)}
.tabelkaart{border-radius:28px;background:var(--kaart);box-shadow:none;padding:clamp(8px,calc(var(--vh,1vh)*1.4),16px) clamp(18px,2.4vw,32px)}
.tabelkaart table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.tabelkaart thead th{font-size:.8rem;font-weight:600;color:var(--tekst-2);text-align:right;padding:10px 0}
.tabelkaart thead th:first-child{text-align:left}
.tabelkaart tbody th{text-align:left;font-weight:600;font-size:.98rem;padding:clamp(5px,calc(var(--vh,1vh)*.85),10px) 0;border-top:1px solid var(--beton-diep)}
.tabelkaart td{text-align:right;border-top:1px solid var(--beton-diep);width:20%}
.tabelkaart td a{display:inline-flex;align-items:baseline;gap:8px;padding:clamp(5px,calc(var(--vh,1vh)*.85),10px) 0;text-decoration:none;font-family:var(--kop);font-weight:700;font-size:clamp(1.15rem,1.6vw,1.45rem)}
.tabelkaart td a span::before{content:"\20AC\00A0";font-size:.7em;color:var(--tekst-2)}
.tabelkaart td a em{font-style:normal;font-size:.8rem;color:var(--lijn);transition:color .2s,transform .3s var(--uit)}
.tabelkaart tr:hover td a em{color:var(--inkt)}
.tabelkaart td a:hover em{transform:translateX(3px)}

/* over */
.groot{font-size:clamp(1.15rem,1.5vw,1.35rem);line-height:1.5;color:var(--grafiet);max-width:44ch}
.waarden5{list-style:none;margin:clamp(20px,calc(var(--vh,1vh)*3.4),36px) 0 0;padding:0;border-top:1px solid var(--lijn)}
.waarden5 li{display:flex;gap:18px;padding:clamp(12px,calc(var(--vh,1vh)*1.8),18px) 0;border-bottom:1px solid var(--lijn)}
.waarden5 b{font-size:.82rem;font-weight:600;color:var(--goud-tekst);padding-top:4px}
.waarden5 strong{display:block;font-family:var(--kop);font-weight:600;font-size:1.15rem}
.waarden5 span{display:block;color:var(--tekst-2);font-size:.95rem;margin-top:2px}
.fotokaart{border-radius:28px;overflow:hidden;aspect-ratio:16/10;max-height:calc(calc(var(--svh,1svh)*100) - 470px);min-height:200px}
.fotokaart img{width:100%;height:100%;object-fit:cover}
.cijfers--klein{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(20px,calc(var(--vh,1vh)*3.4),32px)}
.cijfers--klein b{font-size:clamp(1.6rem,2.6vw,2.2rem)}

/* vragen */
.twee--vragen{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(28px,4vw,64px)}
.vraag{border-top:1px solid var(--lijn)}
.twee--vragen>div{border-bottom:1px solid var(--lijn)}
.vraag button{all:unset;box-sizing:border-box;display:flex;justify-content:space-between;align-items:center;gap:16px;width:100%;cursor:pointer;padding:clamp(12px,calc(var(--vh,1vh)*1.9),18px) 0;font-weight:600;font-size:1rem}
.vraag button:focus-visible{outline:2px solid var(--inkt);outline-offset:2px;border-radius:6px}
.vraag button i{position:relative;width:30px;height:30px;border-radius:50%;background:var(--beton-diep);flex:none;transition:background-color .3s}
.vraag button i::before,.vraag button i::after{content:"";position:absolute;left:9px;right:9px;top:14px;height:2px;background:var(--zwart);border-radius:2px;transition:transform .35s var(--uit)}
.vraag button i::after{transform:rotate(90deg)}
.vraag button[aria-expanded=true] i{background:var(--inkt);box-shadow:none}
.vraag button[aria-expanded=true] i::before,.vraag button[aria-expanded=true] i::after{background:#fff}
.vraag button[aria-expanded=true] i::after{transform:rotate(0)}
.vraag__antwoord{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--uit)}
.vraag__antwoord>div{overflow:hidden;visibility:hidden;transition:visibility 0s .45s}
.vraag button[aria-expanded=true]+.vraag__antwoord{grid-template-rows:1fr}
.vraag button[aria-expanded=true]+.vraag__antwoord>div{visibility:visible;transition-delay:0s}
.vraag__antwoord p{color:var(--tekst-2);font-size:.95rem;margin:0 0 clamp(12px,calc(var(--vh,1vh)*1.8),18px);padding-right:44px}

/* boeken */
.twee--boeken{grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr)}
.formkaart{border-radius:28px;background:var(--kaart);box-shadow:none;padding:clamp(20px,2.6vw,34px)}
.velden5{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(10px,calc(var(--vh,1vh)*1.5),16px) 14px}
.veld5 label{display:block;font-size:.82rem;font-weight:500;color:var(--tekst-2);margin-bottom:5px}
.veld5--breed{grid-column:1/-1}
.veld5 input,.veld5 select{width:100%;font:500 16px/1.3 var(--romp);color:var(--zwart);background:var(--beton);border:1px solid var(--lijn);border-radius:14px;padding:12px 14px;min-height:clamp(44px,calc(var(--vh,1vh)*5.6),50px);-webkit-appearance:none;appearance:none}
.veld5 select{background-image:linear-gradient(45deg,transparent 50%,var(--tekst-2) 50%),linear-gradient(-45deg,transparent 50%,var(--tekst-2) 50%);background-position:calc(100% - 20px) 54%,calc(100% - 14px) 54%;background-size:6px 6px;background-repeat:no-repeat;padding-right:38px}
.veld5 input:focus,.veld5 select:focus{outline:none;border-color:var(--zwart);box-shadow:0 0 0 3px rgba(224,194,116,.35)}
.formkaart__voet{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:clamp(14px,calc(var(--vh,1vh)*2.2),22px)}
.formkaart__voet p{font-size:.82rem;color:var(--tekst-2);flex:1;min-width:200px}
.zijkaart{border-radius:28px;padding:12px;display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.zijkaart .belkaart{padding:16px 20px}
.zijkaart .belkaart b{font-size:clamp(1.25rem,1.8vw,1.6rem)}
.zijkaart .belkaart b.klein{font-size:1rem}

/* blog */
.blogfilter{margin-bottom:20px}
.blog__register{list-style:none;margin:0;padding:0;columns:3;column-gap:clamp(24px,3vw,44px)}
.blog__register li{break-inside:avoid;border-top:1px solid var(--lijn)}
.blog__register li[hidden]{display:none}
.blog__register a{display:block;padding:clamp(6px,calc(var(--vh,1vh)*1),10px) 0;text-decoration:none}
.blog__register a span{display:block;font-family:var(--kop);font-weight:600;font-size:.98rem;line-height:1.25;transition:color .2s}
.blog__register a small{display:block;font-size:.76rem;color:var(--tekst-2);margin-top:2px}
.blog__register a:hover span{text-decoration:underline;text-underline-offset:3px}

/* artikel */
.lap5{max-width:42rem;margin:0 auto;font-size:1.08rem;line-height:1.75;color:var(--grafiet)}
.lap5 h2{font-size:clamp(1.5rem,2.4vw,2rem);margin:1.8em 0 .5em;color:var(--zwart)}
.lap5 p+p{margin-top:1em}
.lap5 ul,.lap5 ol{padding-left:1.2em;margin:1em 0}
.lap5 li{margin-bottom:.35em}
.lap5 a{color:var(--inkt);text-underline-offset:3px}
.lap5 strong{color:var(--zwart)}
.verder5{max-width:42rem;margin:clamp(40px,calc(var(--vh,1vh)*7),72px) auto 0;border-top:1px solid var(--lijn);padding-top:26px}
.verder5 h2{font-size:1.4rem;margin-bottom:12px}
.verder5 ul{list-style:none;margin:0 0 24px;padding:0}
.verder5 li{border-bottom:1px solid var(--lijn)}
.verder5 a{display:flex;justify-content:space-between;gap:12px;padding:12px 0;text-decoration:none;font-weight:600}
.verder5 a:hover{text-decoration:underline;text-underline-offset:3px}
body.lang .paginakop h1{max-width:24ch;font-size:clamp(2rem,4.2vw,3.6rem)}

/* onderbalk van de eenpagina's */
.onderbalk{border-top:1px solid var(--lijn)}
.onderbalk .houder{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 22px;padding-top:14px;padding-bottom:max(16px,env(safe-area-inset-bottom));font-size:.76rem;color:var(--tekst-2)}
.onderbalk nav{display:flex;flex-wrap:wrap;gap:6px 18px}
.onderbalk a{text-decoration:none}.onderbalk a:hover{color:var(--zwart)}
body.een{min-height:calc(var(--svh,1svh)*100);display:flex;flex-direction:column}
body.een main{flex:1}

@media (min-width:901px) and (max-height:820px){
  .paginakop{padding-top:96px;padding-bottom:22px}
  .paginakop h1{font-size:clamp(2rem,4vw,3rem)}
  .paginakop__zin{font-size:.95rem;margin-top:10px}
  .inhoud{padding-top:20px;padding-bottom:20px}
}
@media (max-width:900px){
  .twee,.twee--boeken,.twee--vragen{grid-template-columns:minmax(0,1fr)}
  .twee--vragen>div+div{border-top:0}
  .genummerd{display:flex;gap:8px;overflow-x:auto;border-top:0;margin:0 calc(-1 * var(--rand));padding:0 var(--rand) 6px;scrollbar-width:none}
  .genummerd::-webkit-scrollbar{display:none}
  .genummerd li{border:0;flex:none}
  .genummerd button{padding:10px 14px;border-radius:999px;background:var(--kaart);box-shadow:0 0 0 1px var(--lijn);gap:8px}
  .genummerd button::after{display:none}
  .genummerd span{font-family:var(--romp);font-size:.92rem;white-space:nowrap}
  .genummerd button[aria-selected=true]{background:var(--zwart)}
  .genummerd button[aria-selected=true] span{color:var(--beton);transform:none}
  .paneel__beeld,.fotokaart{max-height:220px}
  .tekstkaart{max-height:none}
  .velden5{grid-template-columns:minmax(0,1fr)}
  .blog__register{columns:1}
  .tabelkaart{padding:6px 14px}
  .tabelkaart td a em{display:none}
}
/* eenpagina's: alles in het eerste scherm (Twan: geen eindeloos scrollen) */
@media (min-width:901px){
  body.een .paginakop{padding-top:calc(64px + clamp(28px,calc(var(--vh,1vh)*5),52px));padding-bottom:clamp(8px,calc(var(--vh,1vh)*1.6),16px)}
  body.een .paginakop h1{font-size:clamp(2.1rem,min(4.2vw,calc(var(--vh,1vh)*6.6)),3.6rem);max-width:none}
  body.een .paginakop__zin{max-width:46rem;margin-top:10px;font-size:1.05rem}
  body.een .kruimel{margin-bottom:10px}
  body.een .inhoud{padding-top:clamp(18px,calc(var(--vh,1vh)*3),32px);padding-bottom:clamp(14px,calc(var(--vh,1vh)*2.4),28px)}
  .tabelkaart tbody th,.tabelkaart td a{padding-top:clamp(2px,calc(var(--vh,1vh)*.45),7px);padding-bottom:clamp(2px,calc(var(--vh,1vh)*.45),7px)}
  .tabelkaart td a{font-size:clamp(1.05rem,1.4vw,1.3rem)}
  .tabelkaart thead th{padding:6px 0}
  .tabelkop{margin-bottom:12px}
  .paneel__beeld{aspect-ratio:auto;height:calc(calc(var(--svh,1svh)*100) - 560px);max-height:none;min-height:150px}
  .paneel__tekst{padding:18px 26px 22px}
  .paneel__tekst p{margin:8px 0 14px}
  .fotokaart{aspect-ratio:auto;height:calc(calc(var(--svh,1svh)*100) - 520px);max-height:none;min-height:170px}
  .groot{font-size:clamp(1.05rem,1.3vw,1.2rem)}
  .waarden5 li{padding:clamp(8px,calc(var(--vh,1vh)*1.3),14px) 0}
  .velden5{grid-template-columns:repeat(3,minmax(0,1fr))}
  .veld5--breed{grid-column:span 3}
  .blog__register{columns:4}
  .blog__register a{padding:clamp(4px,calc(var(--vh,1vh)*.75),8px) 0}
  .blog__register a span{font-size:.92rem}
  .tekstkaart{max-height:calc(calc(var(--svh,1svh)*100) - 330px)}
}
@media (min-width:901px) and (max-width:1200px){.blog__register{columns:3}.velden5{grid-template-columns:repeat(2,minmax(0,1fr))}.veld5--breed{grid-column:1/-1}}
@media (min-width:901px){
  body.een .paginakop .houder{display:block}
  body.een .kruimel{grid-column:1/-1}
  body.een .paginakop__zin{margin:10px 0 0;font-size:1.05rem;line-height:1.45}
  .tabelkaart tbody th,.tabelkaart td a{line-height:1.15}
  .paneel__beeld{height:calc(calc(var(--svh,1svh)*100) - 600px)}
}
@media (min-width:901px) and (max-height:800px){
  body.een .paginakop{padding-top:88px;padding-bottom:8px}
  body.een .inhoud{padding-top:16px;padding-bottom:12px}
  .tabelkaart tbody th,.tabelkaart td a{padding-top:2px;padding-bottom:2px}
  .tabelkaart td a{font-size:1.02rem}
  .blog__register a small{display:none}
}
@media (min-width:901px){
  body.een .paginakop h1:last-child{grid-column:1/-1}
  .genummerd--klein{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px}
  .genummerd--klein button::after{width:16px}
  .genummerd--klein button[aria-selected=true]::after{width:30px}
}
@media (min-width:901px) and (max-height:800px){
  .velden5{gap:10px 16px}
  .veld5 label{margin-bottom:4px}
  .formkaart{padding:18px 24px}
  .waarden5{margin-top:14px}
  .waarden5 li{padding:8px 0}
  .zijkaart .belkaart{padding:14px 20px}
}
.paginakop__rechts .blogfilter{margin:14px 0 0}
@media (min-width:901px){.paginakop__rechts{margin-bottom:.2em}.paginakop__rechts .paginakop__zin{margin-bottom:0}}
@media (min-width:901px) and (max-height:800px){
  .veld5 input,.veld5 select{min-height:40px;padding-top:9px;padding-bottom:9px}
  .tabelkop{margin-bottom:8px}
  .tabelkaart thead th{padding:3px 0}
}
@media (min-width:901px) and (max-width:1200px){.blog__register{columns:4;column-gap:22px}.blog__register a span{font-size:.86rem}}
@media (min-width:901px) and (max-height:880px){.blog__register a small{display:none}}
@media (min-width:901px){
  .genummerd--klein button{gap:12px}
  .genummerd--klein button::after{display:none}
  .genummerd--klein span{font-size:.94rem;line-height:1.2}
  .genummerd--klein button[aria-selected=true] span{transform:none;color:var(--zwart);box-shadow:inset 0 -2px 0 var(--inkt)}
}
@media (max-width:900px){.tabelkaart tbody th{width:36%}.tabelkaart td{width:21%}.tabelkaart thead th{font-size:.7rem;padding-left:8px}.tabelkaart thead th:first-child{padding-left:0}}


/* v6 ronde 2 (keurders 01-11) */
@media (max-width:900px){
  .paneel__beeld,.fotokaart{aspect-ratio:auto;height:220px;max-height:none;width:100%}
  .twee--vragen>div:first-child{border-bottom:0}
  .paginakop{padding-top:calc(64px + 28px)}
  .paginakop__zin{font-size:1rem;margin-top:10px}
}
.blog__register a span,.vraag button span,.verder5 a{text-wrap:balance}
.paginakop .schakel{background:var(--beton-diep)}
.paginakop .schakel label{color:#515154}
.paginakop .schakel input:checked+label{background:var(--inkt);color:#fff}


/* v8: paginakop onder de kop van 64 px, dorppagina's */
.paginakop{padding-top:calc(64px + clamp(32px,calc(var(--vh,1vh)*6),72px))}
body.een .paginakop{padding-top:calc(64px + clamp(20px,calc(var(--vh,1vh)*4),44px))}
.zijkaart{background:var(--inkt)}
@media (max-width:900px){.paginakop,body.een .paginakop{padding-top:calc(64px + 24px)}}
@media (min-width:901px) and (max-height:800px){body.een .paginakop{padding-top:calc(64px + 8px);padding-bottom:6px}body.een .inhoud{padding-top:12px}body.een .paginakop h1{font-size:clamp(2rem,3.6vw,2.8rem)}body.een .paginakop__zin{margin-top:6px}}
.dorp{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(28px,5vw,80px);align-items:start}
.dorp__tabel{background:#fff;border-radius:24px;padding:4px 24px 8px;display:block}
.dorp__tabel thead th{text-align:right}.dorp__tabel thead th:first-child{text-align:left}
.dorp__tabel tbody th span{display:block;font-size:var(--t-klein);font-weight:400;color:var(--tekst-2);margin:-6px 0 10px}
.dorp__tekst{display:grid;gap:14px;color:var(--tekst-2)}
.dorp__tekst a:not(.knop){color:var(--inkt)}
.dorp__knoppen{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:6px}
.dorp__andere{grid-column:1/-1;border-top:1px solid var(--lijn);padding-top:22px;margin-top:clamp(24px,calc(var(--vh,1vh)*5),56px)}
.dorp__andere h2{font-size:var(--t-tekst);letter-spacing:-.01em;margin-bottom:10px}
.dorp__andere ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 20px}
.dorp__andere a{color:var(--goud-tekst);text-decoration:none}.dorp__andere a:hover{text-decoration:underline}
@media (max-width:900px){.dorp{grid-template-columns:minmax(0,1fr)}.dorp__tabel{padding:4px 16px 8px}
  /* 01-11: de boekknop direct onder de tabel, niet onderaan het eerste scherm onder de bel- en botknop */
  .dorp__knoppen{order:-1;margin:0 0 8px}}
.schakel--licht,.paginakop .schakel{background:#E8E8ED;border:0}
.schakel--licht label,.paginakop .schakel label{color:var(--inkt)}
.schakel--licht input:checked+label,.paginakop .schakel input:checked+label{background:#fff;color:var(--inkt);box-shadow:0 1px 3px rgba(0,0,0,.12),0 0 0 .5px rgba(0,0,0,.04)}