/* ══════════════════════════════════════════════════════════════════════
   busbestickerd.nl v2 — "navy & signaallime"
   Merkidee: stickers. Alles wat 'plakt' (labels, het wisselwoord in de kop,
   prijzen) is een die-cut sticker met witte snijrand en een pel-hoekje.
   De weg is het tweede motief: scrollbalk met busje, werkwijze als route.

   Palet en regels
   - Lime #C8F23C is signaalkleur: knoppen, stickers, accentwoorden op donker.
     Nooit als tekst op licht (1,3:1) → gebruik --mos #4B6400 (6,2:1).
   - Knoppen: lime met navy tekst (13:1) of navy met witte tekst. Nooit wit op lime.
   - Navy draagt de donkere secties (hero, prijsberekenaar, reviews, footer).
   - Blauw #3F63FF alleen als gloed in donkere secties.
   ══════════════════════════════════════════════════════════════════════ */

@font-face { font-family: 'Archivo'; src: url('/assets/fonts/Archivo-var-latin.woff2') format('woff2'); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: 'Satoshi'; src: url('/assets/fonts/Satoshi-Variable.woff2') format('woff2'); font-weight: 300 900; font-display: swap; }

:root {
  --inkt: #0E1830;       /* tekst, de "zwart" */
  --navy: #0E1D3D;       /* donkere secties */
  --navy-2: #172B57;     /* verlopen, kaarten op donker */
  --nacht: #081226;      /* footer, diepste tint */
  --held: #0A1120;       /* achtergrond heldfoto */
  --lime: #C8F23C;       /* signaalkleur */
  --lime-2: #A9D61F;     /* hover, verloop */
  --lime-zacht: #F1FAD6; /* gekozen tegels op wit */
  --mos: #4B6400;        /* lime als tekst op licht */
  --papier: #F5F6F2;     /* hoofdachtergrond */
  --mist: #E9EDF3;       /* tweede vlak */
  --wit: #FFFFFF;
  --staal: #5E6A80;      /* bijschriften */
  --lijn: rgba(14, 24, 48, .12);
  --blauw: #3F63FF;      /* alleen gloed */

  --verloop-nacht: linear-gradient(165deg, #15295A 0%, #0E1D3D 45%, #0A1530 100%);
  --verloop-lime: linear-gradient(125deg, #DDFA6E 0%, #C8F23C 45%, #AEDD20 100%);
  --verloop-mist: linear-gradient(180deg, #F5F6F2 0%, #E9EDF3 100%);
  --verloop-foto: linear-gradient(180deg, rgba(8, 13, 26, 0) 40%, rgba(8, 13, 26, .86) 100%);

  --r-beeld: 28px; --r-kaart: 24px; --r-glas: 20px; --r-tegel: 16px; --r-veld: 12px; --r-pill: 999px;
  --f-kop: 'Archivo', 'Arial Narrow', sans-serif;
  --f-tekst: 'Satoshi', 'Helvetica Neue', Arial, sans-serif;
  --kop-h: 78px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --veer: cubic-bezier(.2, 1.35, .35, 1);
  --schaduw: 0 30px 60px -32px rgba(8, 18, 38, .5);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--kop-h) + 12px); overflow-x: clip; }
body { margin: 0; background: var(--papier); color: var(--inkt); font: 450 17px/1.6 var(--f-tekst); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
p { margin: 0 0 1em; }
h1, h2, h3, h4, figure, blockquote, fieldset, legend { margin: 0; padding: 0; }
fieldset { border: 0; min-width: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 2.5px solid var(--mos); outline-offset: 3px; border-radius: 8px; }
.donker :focus-visible, .held :focus-visible, .voet :focus-visible, .menu :focus-visible, .lb :focus-visible, .actiebalk :focus-visible { outline-color: var(--lime); }
.skip { position: absolute; left: 12px; top: -80px; z-index: 400; background: var(--lime); color: var(--inkt); padding: 10px 16px; border-radius: 10px; font-weight: 700; }
.skip:focus { top: 12px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* grain over alles */
body::after { content: ""; position: fixed; inset: 0; z-index: 300; pointer-events: none; opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

.wrap { width: 100%; max-width: 1320px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 44px); }

/* ── typografie ─────────────────────────────────────────────────────── */
.h1, .h2 { font-family: var(--f-kop); font-weight: 850; font-stretch: 68%; text-transform: uppercase; line-height: .94; letter-spacing: -.005em; word-spacing: .07em; overflow-wrap: break-word; hyphens: manual; }
.h1 { font-size: clamp(2.5rem, 5.2vw, 4.9rem); }
.h1-klein { font-size: clamp(2.3rem, 4.5vw, 4.3rem); }
.h2 { font-size: clamp(2.1rem, 3.9vw, 3.7rem); }
.h3 { font-family: var(--f-kop); font-weight: 800; font-stretch: 88%; font-size: clamp(1.3rem, 1.8vw, 1.6rem); line-height: 1.12; letter-spacing: -.005em; }
.lead { font-size: clamp(1.04rem, 1.3vw, 1.18rem); line-height: 1.55; color: #394560; max-width: 56ch; }
.lead-groot { font-size: clamp(1.2rem, 1.9vw, 1.55rem); line-height: 1.45; font-weight: 500; letter-spacing: -.01em; max-width: 46ch; margin-bottom: clamp(28px, 4vw, 52px); }
.donker .lead, .held .lead { color: #C3CCE0; }
.klein { font-size: 14px; color: var(--staal); }
.acc { color: var(--lime); }
.markeer { background: linear-gradient(176deg, transparent 0 54%, var(--lime) 54% 91%, transparent 91%); -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 .06em; margin: 0 -.06em; }
.tekstlink { display: inline-flex; align-items: center; gap: 8px; font-weight: 750; border-bottom: 2px solid var(--lime); padding-bottom: 2px; transition: gap .25s var(--ease); }
.tekstlink:hover { gap: 12px; }
.tekstlink .ico { width: 18px; height: 18px; }
.tekstlink-licht { color: #fff; }
.tag { display: inline-block; font-style: normal; font: 800 10.5px/1 var(--f-kop); font-stretch: 90%; letter-spacing: .06em; text-transform: uppercase; padding: 5px 8px 4px; border-radius: var(--r-pill); background: var(--lime); color: var(--inkt); vertical-align: 3px; margin-left: 8px; }

/* ── iconen ─────────────────────────────────────────────────────────── */
.ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ico-wa { stroke: none; }
.ster { width: 15px; height: 15px; fill: #F6BB2A; }
.sterren { display: inline-flex; gap: 1px; }
.g-logo { width: 18px; height: 18px; flex: none; }
.spiraal { width: 100%; height: 100%; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--lime); flex: none; animation: puls 2.4s infinite; }
.dot.is-dicht, .is-dicht .dot { background: #F08A5D; animation: none; }
@keyframes puls { 0% { box-shadow: 0 0 0 0 rgba(200, 242, 60, .6); } 70% { box-shadow: 0 0 0 9px rgba(200, 242, 60, 0); } 100% { box-shadow: 0 0 0 0 rgba(200, 242, 60, 0); } }

/* ── stickers: die-cut met witte snijrand en pel-hoekje ─────────────── */
.stk { --stk-bg: var(--lime); --stk-kl: var(--inkt); --r: -2deg; --pel: .38em; --rand: .14em; position: relative; display: inline-block; transform: rotate(var(--r));
  font-family: var(--f-kop); font-weight: 850; font-stretch: 84%; text-transform: uppercase; line-height: 1; white-space: nowrap; filter: drop-shadow(0 .16em .2em rgba(3, 8, 20, .3)); }
.stk-in[data-t]::before { content: attr(data-t); }
.stk-in { display: block; padding: .34em .62em .3em; border: var(--rand) solid #fff; border-radius: .38em; background: var(--stk-bg); color: var(--stk-kl);
  clip-path: polygon(0 0, calc(100% - var(--pel)) 0, 100% var(--pel), 100% 100%, 0 100%); }
.stk::after { content: ""; position: absolute; top: 0; right: 0; width: var(--pel); height: var(--pel); background: linear-gradient(225deg, transparent 50%, #F4F6F8 50%, #B7C1CE 100%); border-bottom-left-radius: .1em; }
.stk-lime { --stk-bg: var(--lime); --stk-kl: var(--inkt); }
.stk-navy { --stk-bg: var(--navy); --stk-kl: #fff; }
.stk-wit { --stk-bg: #fff; --stk-kl: var(--inkt); }
.stk-wit .stk-in { box-shadow: inset 0 0 0 1px rgba(14, 24, 48, .1); }

/* ── knoppen ────────────────────────────────────────────────────────── */
.knop { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 12px 24px; border-radius: var(--r-pill); border: 1.5px solid transparent;
  font: 750 15.5px/1.15 var(--f-tekst); letter-spacing: -.005em; white-space: nowrap; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .2s, border-color .2s; }
.knop .ico { width: 19px; height: 19px; transition: transform .25s var(--ease); }
.knop:hover { transform: translateY(-2px); }
.knop:hover .ico:not(.ico-wa) { transform: translateX(3px); }
.knop-lime { background: var(--lime); color: var(--inkt); box-shadow: 0 14px 28px -16px rgba(200, 242, 60, .85), inset 0 1px 0 rgba(255, 255, 255, .5); }
.knop-lime:hover { background: #D4F75A; }
.knop-navy { background: var(--navy); color: #fff; box-shadow: 0 14px 26px -16px rgba(8, 18, 38, .8); }
.knop-navy .ico:not(.ico-wa) { color: var(--lime); }
.knop-navy:hover { background: #15295A; }
.knop-rand { border-color: rgba(14, 24, 48, .2); color: var(--inkt); background: rgba(255, 255, 255, .5); }
.knop-rand:hover { border-color: var(--inkt); }
.knop-rand .ico-wa, .knop-rand-licht .ico-wa { color: #25D366; }
.knop-rand-licht { border-color: rgba(255, 255, 255, .28); color: #fff; }
.knop-rand-licht:hover { border-color: var(--lime); }
.knop-klein { min-height: 42px; padding: 9px 17px; font-size: 14.5px; }
.knop-breed { width: 100%; }
.knop[aria-busy="true"] { opacity: .7; pointer-events: none; }
.knoppen { display: flex; flex-wrap: wrap; gap: 10px; }

/* ── pel-hoek op beeld ──────────────────────────────────────────────── */
.pel { position: relative; --pel-b: 44px; --pel-bg: var(--papier); }
.pel::after { content: ""; position: absolute; top: 0; right: 0; z-index: 4; width: var(--pel-b); height: var(--pel-b); pointer-events: none;
  background: linear-gradient(225deg, var(--pel-bg) 0 49.5%, #CBD3DC 50%, #EEF2F5 70%, #fff 100%); border-bottom-left-radius: 12px; box-shadow: -6px 6px 14px -5px rgba(8, 18, 38, .35); transition: width .45s var(--ease), height .45s var(--ease); }
.pel:hover { --pel-b: 62px; }

/* ── header ─────────────────────────────────────────────────────────── */
.kop { position: fixed; inset: 0 0 auto; z-index: 200; height: var(--kop-h); color: #fff; transition: height .3s var(--ease), color .3s; }
.kop::before { content: ""; position: absolute; inset: 0; background: rgba(245, 246, 242, .82); -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6); opacity: 0; transition: opacity .3s; box-shadow: 0 1px 0 var(--lijn); }
.kop.is-gescrold, .kop.kop-licht { color: var(--inkt); }
.kop.is-gescrold::before { opacity: 1; }
.kop.is-gescrold { --kop-h: 68px; }
.kop-in { position: relative; height: 100%; max-width: 1400px; margin-inline: auto; padding-inline: clamp(16px, 3vw, 32px); display: flex; align-items: center; gap: 24px; }
.merk { display: inline-flex; align-items: center; gap: 10px; flex: none; }
.merk-beeld { width: 32px; height: 32px; color: var(--lime); transition: transform .8s var(--ease); }
.kop.is-gescrold .merk-beeld, .kop.kop-licht .merk-beeld { color: var(--inkt); }
.merk:hover .merk-beeld { transform: rotate(-120deg); }
.merk-woord { width: 176px; height: auto; aspect-ratio: 2063 / 164; }
.merk-licht { color: #fff; }
.merk-licht .merk-beeld { color: var(--lime) !important; }
.kop-nav { display: flex; align-items: center; gap: 2px; margin-left: 10px; }
.kop-link { display: inline-flex; align-items: center; gap: 4px; padding: 9px 13px; border-radius: var(--r-pill); font-weight: 650; font-size: 15px; background: none; border: 0; transition: background-color .2s; }
.kop-link:hover, .kop-link[aria-current="page"] { background: rgba(255, 255, 255, .12); }
.kop.is-gescrold .kop-link:hover, .kop.kop-licht .kop-link:hover, .kop.is-gescrold .kop-link[aria-current="page"], .kop.kop-licht .kop-link[aria-current="page"] { background: rgba(14, 24, 48, .06); }
.ico-caret { width: 16px; height: 16px; transition: transform .25s; }
.kop-drop { position: relative; }
.kop-drop.is-open .ico-caret { transform: rotate(180deg); }
.mega { position: absolute; top: calc(100% + 12px); left: -10px; width: 600px; color: var(--inkt); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .22s, transform .22s var(--ease), visibility .22s; }
.kop-drop.is-open .mega { opacity: 1; visibility: visible; transform: none; }
.mega-in { background: #fff; border-radius: 22px; padding: 14px; box-shadow: 0 40px 70px -30px rgba(8, 18, 38, .45), 0 0 0 1px var(--lijn); }
.mega-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.mega-item { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 14px; transition: background-color .2s; }
.mega-item:hover { background: var(--mist); }
.mega-ico { width: 70px; flex: none; color: var(--inkt); }
.mega-item strong { display: block; font-size: 15.5px; }
.mega-item small { color: var(--mos); font-weight: 650; font-size: 13px; }
.mega-cta { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 8px; padding: 14px 18px; border-radius: 16px; background: var(--navy); color: #fff; font-weight: 750; }
.mega-cta small { display: block; font-weight: 500; font-size: 13px; color: #AFBAD4; }
.mega-cta .ico { color: var(--lime); }
.kop-rechts { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.open { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 650; white-space: nowrap; opacity: .9; }
.kop-tel { display: inline-flex; align-items: center; gap: 10px; font-weight: 750; font-size: 15px; white-space: nowrap; }
.kop-tel .ico { width: 38px; height: 38px; padding: 9px; border-radius: 50%; background: var(--lime); color: var(--inkt); stroke-width: 1.8; }
.kop-menu { display: none; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .08); align-items: center; justify-content: center; color: inherit; }
.kop.is-gescrold .kop-menu, .kop.kop-licht .kop-menu { border-color: var(--lijn); background: #fff; }
.kop-menu .ico { width: 22px; height: 22px; }
/* scroll-voortgang: een busje rijdt mee over de onderrand */
.kop-weg { position: absolute; left: 0; right: 0; bottom: -1px; height: 14px; pointer-events: none; opacity: 0; transition: opacity .3s; }
.kop.is-gescrold .kop-weg { opacity: 1; }
.kop-weg-lijn { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: repeating-linear-gradient(90deg, rgba(14, 24, 48, .22) 0 10px, transparent 10px 18px); }
.kop-weg-lijn::after { content: ""; position: absolute; inset: 0; right: auto; width: calc(var(--p, 0) * 100%); background: var(--lime); }

/* mobiel menu */
.menu { position: fixed; inset: 0; z-index: 250; background: var(--verloop-nacht); color: #fff; overflow-y: auto; }
.menu-in { min-height: 100%; padding: 14px 20px 32px; display: flex; flex-direction: column; }
.menu-top { display: flex; align-items: center; justify-content: space-between; height: 50px; }
.menu-top .merk-woord { width: 150px; }
.menu-sluit { width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .18); background: none; display: flex; align-items: center; justify-content: center; }
.menu-links { display: flex; flex-direction: column; margin-top: 26px; }
.menu-links a { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font: 850 1.75rem/1.1 var(--f-kop); font-stretch: 80%; text-transform: uppercase; padding: 13px 0; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.menu-links small { font: 600 13px var(--f-tekst); text-transform: none; color: var(--lime); }
.menu-kop { margin: 26px 0 10px; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--lime); }
.menu-voertuigen { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.menu-voertuigen a { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 16px; background: rgba(255, 255, 255, .06); font-weight: 650; font-size: 14.5px; line-height: 1.25; }
.menu-voertuigen .v-lijn { width: 70px; color: var(--lime); }
.menu-contact { margin-top: auto; padding-top: 28px; display: grid; gap: 10px; }
.menu-contact p { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; font-size: 14px; color: #AFBAD4; }

/* ── hero ───────────────────────────────────────────────────────────── */
.held { position: relative; isolation: isolate; overflow: hidden; overflow: clip; background: var(--held); color: #fff; min-height: min(100svh, 920px); display: flex; align-items: center; padding: calc(var(--kop-h) + 30px) 0 72px; }
.held-foto { position: absolute; inset: 0; z-index: -2; }
.held-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 72% 50%; }
.held-waas { position: absolute; inset: 0; z-index: -1; background:
  linear-gradient(90deg, rgba(8, 13, 26, .9) 0%, rgba(8, 13, 26, .72) 32%, rgba(8, 13, 26, .08) 56%, rgba(8, 13, 26, 0) 70%),
  linear-gradient(0deg, rgba(8, 13, 26, .7) 0%, rgba(8, 13, 26, 0) 22%); }
.held-grid { position: relative; display: grid; grid-template-columns: minmax(0, 640px) 1fr; }
.held-kaart-wrap { grid-column: 1; }
.held-tekst { min-width: 0; }
.held-boven { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 650; color: #D5DCEB; margin-bottom: 20px; }
.h1-r { display: block; }
.h1-r:first-child { white-space: nowrap; }
.h1-is { color: var(--lime); font-stretch: 100%; margin-left: .12em; }
.held .h1 { margin-bottom: 22px; }
.h1 .stk { font-size: .8em; font-stretch: 70%; --r: -2.5deg; --rand: .09em; --pel: .26em; filter: drop-shadow(0 .08em .1em rgba(3, 8, 20, .35)); margin-top: .06em; }
.h1 .stk-in { padding: .1em .24em .06em; border-radius: .16em; }
.h1-lang { color: var(--lime); }
.wissel { display: inline-grid; vertical-align: top; }
.wissel-w { grid-area: 1 / 1; justify-self: start; opacity: 0; }
.wissel-w.is-aan { opacity: 1; }
.js .wissel-w.is-aan.plak { animation: plak .6s var(--veer) .22s both; }
.js .wissel-w.is-weg { animation: pel .38s ease-in both; transform-origin: 0 100%; }
@keyframes plak { 0% { opacity: 0; transform: translateY(-10%) rotate(-7deg) scale(1.1); } 40% { opacity: 1; } 100% { opacity: 1; transform: rotate(-2.5deg) scale(1); } }
.hk-stap.is-actief .hk-vink-stk { animation-name: plakGroot; }
@keyframes plakGroot { 0% { opacity: 0; transform: rotate(-16deg) scale(1.5); } 55% { opacity: 1; } 100% { opacity: 1; transform: rotate(-6deg) scale(1); } }
@keyframes pel { 0% { opacity: 1; transform: rotate(-2.5deg); } 100% { opacity: 0; transform: translate(4%, -18%) rotate(7deg) scale(.96); } }
.held-lead { font-size: clamp(1.05rem, 1.35vw, 1.22rem); line-height: 1.5; color: #D5DCEB; max-width: 48ch; margin-bottom: 22px; }
.held-lead strong { color: #fff; }
.held-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: -6px 0 22px; }
.held-prijs { font-size: 15px; --r: -3deg; }
.held-voor { font-size: 14px; color: #AFBAD4; max-width: 34ch; line-height: 1.4; }
.lc { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); font-size: 14px; font-weight: 600; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.lc .ico { width: 17px; height: 17px; color: var(--lime); }
.held-pills { display: none; }
.held-google { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 28px; font-size: 14px; color: #C3CCE0; }
.held-google strong { font: 850 18px/1 var(--f-kop); color: #fff; }
.held-kaart-wrap { position: relative; max-width: 560px; }
.hk-stk { position: absolute; z-index: 3; font-size: 13px; pointer-events: none; }
.hk-stk-1 { top: -16px; left: 22px; --r: -5deg; }
.hk-stk-2 { top: 26px; right: -34px; --r: 7deg; }
.hk-stk-3 { bottom: -15px; right: 34px; --r: -3deg; }

/* snelformulier */
.hk { position: relative; background: #fff; color: var(--inkt); border-radius: 26px; padding: 26px 24px 20px; box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .6); }
.hk-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.hk-status { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 10px; border-radius: var(--r-pill); background: var(--lime-zacht); color: var(--mos); font-size: 13.5px; font-weight: 750; }
.hk-status.is-nieuw { animation: tik .45s var(--veer); }
@keyframes tik { 0% { transform: scale(.94); } 100% { transform: none; } }
.hk-balk { display: flex; gap: 5px; }
.hk-balk li { width: 22px; height: 5px; border-radius: 3px; background: var(--mist); transition: background-color .3s, width .3s var(--ease); }
.hk-balk li.is-nu { width: 34px; background: var(--lime-2); }
.hk-balk li.is-gedaan { background: var(--lime); }
.hk-stap { display: none; }
.hk-stap.is-actief { display: block; animation: stapIn .35s var(--ease); }
@keyframes stapIn { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.hk-vraag { display: block; font: 800 1.45rem/1.15 var(--f-kop); font-stretch: 88%; letter-spacing: -.01em; margin-bottom: 14px; }
.hk-tegels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.hk-tegel input, .bk-tegel input, .bk-rij input, .bk-chipkeus input, .hk-kanaal input { position: absolute; opacity: 0; pointer-events: none; }
.hk-tegel-in, .bk-tegel-in { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 92px; padding: 12px 8px; border-radius: var(--r-tegel); border: 1.5px solid var(--lijn);
  background: #fff; font-weight: 700; font-size: 14px; text-align: center; cursor: pointer; transition: transform .25s var(--ease), border-color .2s, background-color .2s, box-shadow .25s; }
.hk-tegel-in .v-lijn, .bk-tegel-in .v-lijn { width: 64px; color: var(--inkt); }
.tegel-auto { display: block; width: 100%; max-width: 132px; height: 50px; object-fit: contain; filter: drop-shadow(0 7px 5px rgba(14, 24, 48, .2)); transition: transform .35s var(--veer); }
.hk-tegel:hover .tegel-auto, .bk-tegel:hover .tegel-auto, .hk-tegel input:checked + .hk-tegel-in .tegel-auto, .bk-tegel input:checked + .bk-tegel-in .tegel-auto { transform: translateX(-4px) scale(1.04); }
.hk-tegel:hover .hk-tegel-in, .bk-tegel:hover .bk-tegel-in { transform: translateY(-3px); border-color: rgba(14, 24, 48, .28); box-shadow: 0 14px 22px -16px rgba(8, 18, 38, .45); }
.hk-tegel input:checked + .hk-tegel-in, .bk-tegel input:checked + .bk-tegel-in { border-color: var(--lime-2); background: var(--lime-zacht); box-shadow: inset 0 0 0 1.5px var(--lime-2); }
.hk-tegel input:focus-visible + .hk-tegel-in, .bk-tegel input:focus-visible + .bk-tegel-in, .bk-rij input:focus-visible + .bk-rij-in, .bk-chipkeus input:focus-visible + span, .hk-kanaal input:focus-visible + span { outline: 2.5px solid var(--mos); outline-offset: 2px; }
.hk-veilig { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--lijn); font-size: 13.5px; line-height: 1.45; color: var(--staal); }
.hk-veilig .ico { color: var(--mos); margin-top: 1px; }
.hk-veilig strong { color: var(--inkt); }
.hk-rij { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.hk-terug { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--lijn); background: #fff; display: inline-flex; align-items: center; justify-content: center; }
.hk-terug .ico { width: 18px; height: 18px; }
.chipje { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--r-pill); background: var(--mist); font-size: 13.5px; font-weight: 700; border: 0; }
.chipje .ico { width: 14px; height: 14px; color: var(--staal); }
.hk-kanaal { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.hk-kanaal label span { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border-radius: 14px; border: 1.5px solid var(--lijn); font-weight: 700; font-size: 14.5px; cursor: pointer; transition: border-color .2s, background-color .2s; }
.hk-kanaal .ico { width: 18px; height: 18px; }
.hk-kanaal .ico-wa { color: #25D366; }
.hk-kanaal input:checked + span { border-color: var(--lime-2); background: var(--lime-zacht); }
.hk-tel { display: flex; align-items: stretch; border: 1.5px solid rgba(14, 24, 48, .2); border-radius: 14px; overflow: hidden; transition: border-color .2s, box-shadow .2s; margin-bottom: 10px; background: #fff; }
.hk-tel:focus-within { border-color: var(--inkt); box-shadow: 0 0 0 4px rgba(200, 242, 60, .45); }
.hk-tel.is-fout { border-color: #D6542E; }
.hk-tel .nl { display: flex; align-items: center; padding: 0 12px; background: var(--mist); color: var(--staal); }
.hk-tel .nl .ico { width: 20px; height: 20px; }
.hk-tel input { flex: 1; min-width: 0; border: 0; padding: 14px; font: 700 18px/1 var(--f-tekst); letter-spacing: .02em; color: var(--inkt); background: none; }
.hk-tel input:focus { outline: none; }
.hk-fout, .bk-fout { margin: 0 0 10px; font-size: 13.5px; color: #B43D1B; font-weight: 600; }
.hk-form.is-compleet .hk-knop { background: var(--lime); color: var(--inkt); }
.hk-form.is-compleet .hk-knop .ico { color: var(--inkt); }
.hk-klaar { text-align: center; padding: 8px 0 4px; }
.hk-klaar:focus { outline: none; }
.hk-vink { display: flex; justify-content: center; margin: 4px 0 14px; }
.hk-vink-stk { font-size: 34px; --r: -6deg; }
.hk-vink-stk .stk-in { padding: .22em; border-radius: .3em; }
.hk-vink-stk .ico { width: 1.3em; height: 1.3em; stroke-width: 2.4; }
.hk-stap.is-actief .hk-vink-stk { animation: plak .8s var(--veer) both; }
.hk-klaar-kop { font: 850 2rem/1 var(--f-kop); font-stretch: 80%; text-transform: uppercase; margin-bottom: 8px; }
.hk-klaar-tekst { color: #394560; font-size: 15.5px; max-width: 40ch; margin: 0 auto 18px; }
.hk-klaar-links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 18px; }
.hk-klaar-links .ico-wa { color: #25D366; }

/* ── lime klantenband ───────────────────────────────────────────────── */
.band { display: flex; align-items: center; gap: 26px; min-height: 64px; background: var(--lime); color: var(--inkt); padding-left: clamp(16px, 4vw, 44px); overflow: hidden; }
.band-kop { flex: none; margin: 0; font-size: 14px; font-weight: 700; }
.band-kop strong { font: 850 20px/1 var(--f-kop); font-variant-numeric: tabular-nums; }
.band-loop { flex: 1; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.band-spoor { display: flex; align-items: center; gap: 22px; width: max-content; animation: loop 70s linear infinite; }
.band-spoor span { font: 800 16px/1 var(--f-kop); font-stretch: 88%; text-transform: uppercase; white-space: nowrap; }
.band-sp { width: 16px; height: 16px; color: var(--navy); }
@keyframes loop { to { transform: translateX(-50%); } }

/* ── secties ────────────────────────────────────────────────────────── */
.sectie { position: relative; padding-block: clamp(68px, 8.5vw, 124px); }
.sectie-kop { margin-bottom: clamp(30px, 4vw, 52px); }
.sectie-kop.split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px 48px; align-items: end; }
.sectie-kop.split p { color: #394560; max-width: 44ch; }
.donker { background: var(--verloop-nacht); color: #fff; isolation: isolate; overflow: hidden; overflow: clip; }
.donker-achter { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, .028) 0 1px, transparent 1px 22px), repeating-linear-gradient(-45deg, rgba(255, 255, 255, .028) 0 1px, transparent 1px 22px); }
.bol { position: absolute; border-radius: 50%; filter: blur(80px); animation: drijf 28s ease-in-out infinite alternate; }
.bol-1 { width: 520px; height: 520px; left: -160px; top: 8%; background: rgba(200, 242, 60, .16); }
.bol-2 { width: 560px; height: 560px; right: -160px; bottom: -120px; background: rgba(63, 99, 255, .24); animation-duration: 34s; }
.bol-3 { width: 380px; height: 380px; left: 42%; top: 40%; background: rgba(63, 99, 255, .12); animation-duration: 40s; }
@keyframes drijf { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(60px, -40px, 0) scale(1.12); } }
.vinkjes { display: grid; gap: 9px; }
.vinkjes li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.4; }
.vinkjes .ico { width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: var(--lime); color: var(--inkt); stroke-width: 2.4; margin-top: 1px; }
.vinkjes-licht li { color: #D5DCEB; }

/* ── pakketschuif ───────────────────────────────────────────────────── */
.ps-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.ps-foto { position: relative; aspect-ratio: 3 / 2; border-radius: var(--r-beeld); overflow: hidden; background: #3A4150; box-shadow: var(--schaduw); }
.ps-stapel { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s; }
.ps-stapel.is-actief { opacity: 1; visibility: visible; }
.ps-stapel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.ps-stapel img.is-zicht { opacity: 1; }
.ps-label, .ps-meter { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: var(--r-pill); background: rgba(8, 13, 26, .62); color: #fff; font-size: 13.5px; font-weight: 700; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.ps-label { left: 16px; top: 16px; }
.ps-meter { left: 16px; bottom: 16px; }
.ps-meter-balk { display: inline-flex; gap: 4px; align-items: flex-end; }
.ps-meter-balk i { width: 6px; border-radius: 2px; background: rgba(255, 255, 255, .22); transition: background-color .25s; }
.ps-meter-balk i:nth-child(1) { height: 7px; } .ps-meter-balk i:nth-child(2) { height: 10px; } .ps-meter-balk i:nth-child(3) { height: 13px; } .ps-meter-balk i:nth-child(4) { height: 16px; } .ps-meter-balk i:nth-child(5) { height: 19px; }
.ps-meter-balk[style*="--n:1"] i:nth-child(-n+1), .ps-meter-balk[style*="--n:2"] i:nth-child(-n+2), .ps-meter-balk[style*="--n:3"] i:nth-child(-n+3), .ps-meter-balk[style*="--n:4"] i:nth-child(-n+4), .ps-meter-balk[style*="--n:5"] i { background: var(--lime); }
.ps-schuif { position: relative; margin-top: 22px; padding: 0 6px; }
.ps-range { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; margin: 0; background: transparent; cursor: grab; --p: 50%; }
.ps-range:active { cursor: grabbing; }
.ps-range::-webkit-slider-runnable-track { height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--lime) 0 var(--p), var(--mist) var(--p) 100%); box-shadow: inset 0 0 0 1px var(--lijn); }
.ps-range::-moz-range-track { height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--lime) 0 var(--p), var(--mist) var(--p) 100%); }
.ps-range::-webkit-slider-thumb { -webkit-appearance: none; width: 38px; height: 38px; margin-top: -13px; border-radius: 50%; background: var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C8F23C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 7l-5 5 5 5M15 7l5 5-5 5'/%3E%3C/svg%3E") center/20px no-repeat; border: 3px solid #fff; box-shadow: 0 8px 18px -6px rgba(8, 18, 38, .6); }
.ps-range::-moz-range-thumb { width: 32px; height: 32px; border-radius: 50%; background: var(--navy); border: 3px solid #fff; }
.ps-stops { display: flex; justify-content: space-between; margin: 2px -14px 0; }
.ps-stop { flex: 0 0 auto; width: 76px; display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: 0; padding: 0; font-size: 13.5px; font-weight: 700; color: var(--staal); transition: color .2s; }
.ps-stop i { width: 2px; height: 8px; background: rgba(14, 24, 48, .25); }
.ps-stop.is-aan { color: var(--inkt); }
.ps-stop.is-aan i { background: var(--inkt); height: 12px; }
.ps-tekst .h2 { margin-bottom: 16px; }
.ps-tekst .lead { margin-bottom: 22px; }
.segment { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 5px; border-radius: 18px; background: var(--mist); margin-bottom: 22px; }
.seg { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 12px 8px 8px; border-radius: 14px; background: none; border: 0; font-weight: 700; font-size: 14.5px; color: var(--staal); transition: background-color .2s, color .2s, box-shadow .2s; }
.seg .v-lijn { width: 38px; }
.seg.is-aan { background: #fff; color: var(--inkt); box-shadow: 0 6px 14px -8px rgba(8, 18, 38, .35); }
.ps-info { padding: 20px 0 22px; border-top: 1px solid var(--lijn); margin-bottom: 4px; min-height: 250px; }
.ps-naam { display: flex; align-items: center; margin: 0 0 2px; font: 850 2rem/1 var(--f-kop); font-stretch: 80%; text-transform: uppercase; }
.ps-kop { font-weight: 700; color: #394560; margin-bottom: 10px; }
.ps-prijs { margin-bottom: 14px; font-size: 15px; color: var(--staal); }
.ps-prijs strong { font: 850 1.7rem/1 var(--f-kop); font-stretch: 84%; color: var(--inkt); margin: 0 4px; font-variant-numeric: tabular-nums; }
.ps-info .vinkjes { font-size: 15px; }

/* ── prijsberekenaar ────────────────────────────────────────────────── */
.prijs-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.prijs-links { position: sticky; top: calc(var(--kop-h) + 30px); }
.prijs-links .h2 { margin-bottom: 18px; }
.prijs-links .lead { margin-bottom: 20px; }
.prijs-links .vinkjes { margin-bottom: 34px; }
.live { position: relative; }
.live-label { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 6px; padding: 7px 13px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); font-size: 13px; font-weight: 650; color: #D5DCEB; }
.live .mock { margin-top: 12px; }
.live-m { display: none; }
.bk { position: relative; background: #fff; color: var(--inkt); border-radius: 26px; padding: 22px 24px 18px; box-shadow: 0 60px 100px -50px rgba(0, 0, 0, .75); }
.bk-kop { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; min-height: 30px; }
.bk-terug { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 4px 0; font-weight: 700; font-size: 14px; color: var(--staal); flex: none; }
.bk-terug .ico { width: 17px; height: 17px; }
.bk-balk { flex: 1; display: flex; gap: 6px; }
.bk-balk li { flex: 1; font-size: 11.5px; font-weight: 750; color: #9AA4B8; letter-spacing: .02em; }
.bk-balk li::before { content: ""; display: block; height: 5px; border-radius: 3px; background: var(--mist); margin-bottom: 6px; transition: background-color .3s; }
.bk-balk li.is-gedaan::before { background: var(--lime); }
.bk-balk li.is-nu { color: var(--inkt); }
.bk-balk li.is-nu::before { background: var(--lime-2); }
.bk-chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 0; margin-bottom: 10px; }
.bk-chips:empty { margin: 0; }
.bk-chips .chipje { cursor: pointer; }
.bk-chips .chipje:hover { background: #DCE3EC; }
.bk-stap { display: none; }
.bk-stap.is-actief { display: block; animation: stapIn .35s var(--ease); }
.bk-vraag { display: block; font: 800 1.55rem/1.15 var(--f-kop); font-stretch: 88%; letter-spacing: -.01em; margin-bottom: 14px; }
.bk-tegels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.kenteken { display: flex; align-items: stretch; margin-top: 14px; border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 2px var(--inkt); max-width: 330px; }
.kt-nl { display: flex; align-items: flex-end; justify-content: center; width: 34px; padding-bottom: 6px; background: #1F3E9C; color: #F7D117; font-size: 11px; font-weight: 800; }
.kenteken input { flex: 1; min-width: 0; border: 0; background: #F7C600; padding: 11px 14px; font: 800 18px/1 var(--f-tekst); letter-spacing: .12em; text-transform: uppercase; color: #111; }
.kenteken input::placeholder { color: rgba(17, 17, 17, .6); letter-spacing: .01em; text-transform: none; font-weight: 700; font-size: 14.5px; }
.kenteken input:focus { outline: none; }
.kenteken:focus-within { box-shadow: 0 0 0 2px var(--inkt), 0 0 0 6px rgba(200, 242, 60, .5); }
.kt-uit { min-height: 20px; margin: 8px 0 0; font-size: 13.5px; color: var(--staal); }
.kt-uit .gevonden { color: var(--mos); font-weight: 750; }
.bk-rijen { display: grid; gap: 8px; }
.bk-rij-in { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 10px 14px 10px 10px; border-radius: 16px; border: 1.5px solid var(--lijn); cursor: pointer; transition: border-color .2s, background-color .2s, transform .25s var(--ease); }
.bk-rij:hover .bk-rij-in { border-color: rgba(14, 24, 48, .28); transform: translateX(3px); }
.bk-rij input:checked + .bk-rij-in { border-color: var(--lime-2); background: var(--lime-zacht); box-shadow: inset 0 0 0 1.5px var(--lime-2); }
.bk-rij-beeld { display: block; }
.bk-mini { display: none; }
[data-mini="Personenauto"] [data-mini-v="Personenauto"], [data-mini="Bestelauto"] [data-mini-v="Bestelauto"], [data-mini="Bestelbus"] [data-mini-v="Bestelbus"],
[data-mini="Bestelwagen"] [data-mini-v="Bestelwagen"], [data-mini="Bakwagen"] [data-mini-v="Bakwagen"], [data-mini="Vrachtwagen"] [data-mini-v="Vrachtwagen"] { display: block; }
.bk-rij-tekst strong { display: flex; align-items: center; flex-wrap: wrap; font-size: 16px; }
.bk-rij-tekst small { display: block; font-size: 13.5px; color: var(--staal); line-height: 1.35; margin-top: 2px; }
.bk-rij-meter { display: inline-flex; gap: 3px; align-items: flex-end; }
.bk-rij-meter i { width: 5px; border-radius: 2px; background: var(--mist); }
.bk-rij-meter i:nth-child(1) { height: 6px; } .bk-rij-meter i:nth-child(2) { height: 9px; } .bk-rij-meter i:nth-child(3) { height: 12px; } .bk-rij-meter i:nth-child(4) { height: 15px; } .bk-rij-meter i:nth-child(5) { height: 18px; }
.bk-rij-meter i.is-aan { background: var(--lime-2); }
.bk-sub { margin: 4px 0 8px; font-weight: 750; font-size: 15px; }
.bk-chipkeus { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.bk-chipkeus span { display: inline-flex; align-items: center; min-height: 46px; padding: 0 18px; border-radius: var(--r-pill); border: 1.5px solid var(--lijn); font-weight: 700; font-size: 15px; cursor: pointer; transition: border-color .2s, background-color .2s; }
.bk-chipkeus input:checked + span { border-color: var(--lime-2); background: var(--lime-zacht); box-shadow: inset 0 0 0 1.5px var(--lime-2); }
.bk-uit { position: relative; overflow: hidden; border-radius: 20px; background: var(--verloop-nacht); color: #fff; padding: 20px 22px; margin-bottom: 16px; isolation: isolate; }
.bk-uit::before { content: ""; position: absolute; width: 260px; height: 260px; right: -80px; top: -120px; border-radius: 50%; background: rgba(200, 242, 60, .22); filter: blur(50px); z-index: -1; }
.bk-uit-label { margin: 0 0 4px; font-size: 13px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; color: #AFBAD4; }
.bk-uit-bedrag { margin: 0; font: 850 clamp(2.6rem, 5vw, 3.6rem)/1 var(--f-kop); font-stretch: 80%; color: var(--lime); font-variant-numeric: tabular-nums; }
.bk-uit-bedrag.is-tekst { font-size: 2.2rem; }
.bk-uit-noot { margin: 8px 0 6px; font-size: 14px; color: #C3CCE0; }
.btw { background: none; border: 0; padding: 0; color: #fff; font-weight: 750; font-size: 14px; text-decoration: underline; text-decoration-color: var(--lime); text-underline-offset: 3px; }
.bk-uit-keuze { margin: 0; font-size: 14.5px; font-weight: 700; }
.bk-uit-extra { margin: 8px 0 0; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: 13.5px; color: #C3CCE0; }
.bk-feats { font-size: 14.5px; margin-bottom: 16px; }
.bk-casey { display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border-radius: 16px; background: var(--lime-zacht); margin-bottom: 14px; }
.bk-casey img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; flex: none; }
.bk-casey p { margin: 0; font-size: 14px; line-height: 1.4; color: #394560; }
.bk-casey strong { color: var(--inkt); }
.bk-velden { display: grid; gap: 10px; margin-bottom: 12px; }
.veld { display: grid; gap: 5px; }
.veld > span { font-size: 13px; font-weight: 750; }
.veld small { font-weight: 500; color: var(--staal); }
.veld input { width: 100%; min-height: 50px; padding: 12px 14px; border-radius: var(--r-veld); border: 1.5px solid rgba(14, 24, 48, .18); background: #fff; font: 600 16px var(--f-tekst); color: var(--inkt); transition: border-color .2s, box-shadow .2s; }
.veld input:focus { outline: none; border-color: var(--inkt); box-shadow: 0 0 0 4px rgba(200, 242, 60, .45); }
.veld input.is-fout { border-color: #D6542E; }
.upload { position: relative; display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 14px; border-radius: var(--r-veld); border: 1.5px dashed rgba(14, 24, 48, .25); font-size: 14px; color: var(--staal); }
.upload .ico { color: var(--mos); }
.upload input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.upload.heeft-bestand { border-style: solid; border-color: var(--lime-2); color: var(--inkt); background: var(--lime-zacht); }
.bk-verstuur { margin-bottom: 10px; }
.bk-wa { display: flex; justify-content: center; align-items: center; gap: 8px; font-weight: 700; font-size: 14.5px; }
.bk-wa .ico-wa { color: #25D366; width: 18px; height: 18px; }
.bk-tip { display: flex; align-items: center; gap: 10px; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--lijn); font-size: 13.5px; font-weight: 650; color: var(--mos); }
.bk-tip.is-nieuw span { animation: tipIn .4s var(--ease); }
@keyframes tipIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

/* ── voertuigen ─────────────────────────────────────────────────────── */
.v-lijn { width: 100%; height: auto; overflow: visible; }
.v-lijn path, .v-lijn circle { fill: none; stroke: currentColor; stroke-width: 9; stroke-linejoin: round; stroke-linecap: round; }
.v-lijn .vl-raam path { stroke-width: 7; opacity: .75; }

/* ── mockups van de klant: leeg vak zolang er geen mockup is (preview: met bestandsnaam) ── */
.mock-beeld { display: block; width: 100%; height: auto; object-fit: cover; }
.bk-mini .mock-beeld, .pt-beeld .mock-beeld, .proef-bus .mock-beeld { aspect-ratio: 3 / 2; border-radius: 10px; }
.proef-bus .mock-beeld { border-radius: 12px; }
.live .mock { box-shadow: 0 40px 70px -40px rgba(0, 0, 0, .8); }
.live-m .mock { border-radius: 16px; }
.mock-leeg { display: grid; place-items: center; width: 100%; aspect-ratio: 3 / 2; border-radius: 14px; }
.mock-leeg.is-hint { border: 1.5px dashed rgba(14, 24, 48, .2); background: rgba(14, 24, 48, .025); }
.mock-leeg small { padding: 0 8px; font: 600 11.5px/1.3 var(--f-tekst); color: var(--staal); text-align: center; overflow-wrap: break-word; }
.donker .mock-leeg.is-hint, .ptabel tr.is-pop .mock-leeg.is-hint { border-color: rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .03); }
.donker .mock-leeg small, .ptabel tr.is-pop .mock-leeg small { color: rgba(213, 220, 235, .6); }
.bk .mock-leeg.is-hint { border-color: rgba(14, 24, 48, .2); background: rgba(14, 24, 48, .025); }
.bk .mock-leeg small { color: var(--staal); }
.bk-mini .mock-leeg, .pt-beeld .mock-leeg { border-radius: 10px; }
.mock-leeg b { display: block; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: .85em; opacity: .8; }
.bk-mini small, .pt-beeld small { padding: 0 4px; font-size: 9px; }
.bk-mini b, .pt-beeld b { display: none; }
.mock { position: relative; aspect-ratio: 3 / 2; border-radius: 20px; overflow: hidden; }
.mock > * { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; transition: opacity .45s var(--ease), visibility 0s .45s; }
.mock > .is-aan { opacity: 1; visibility: visible; transition: opacity .45s var(--ease); }

/* ── werk (bento) ───────────────────────────────────────────────────── */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: clamp(170px, 15vw, 225px); gap: 14px; }
.tegel { position: relative; display: block; padding: 0; border: 0; border-radius: var(--r-kaart); overflow: hidden; background: var(--navy); color: #fff; text-align: left; cursor: zoom-in; transition: transform .35s var(--ease), box-shadow .35s var(--ease); box-shadow: 0 20px 40px -32px rgba(8, 18, 38, .6); }
.tegel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tegel::before { content: ""; position: absolute; inset: 45% 0 0; background: var(--verloop-foto); z-index: 1; }
.tegel:hover { transform: translateY(-4px); box-shadow: 0 32px 50px -28px rgba(8, 18, 38, .6); }
.tegel-info { position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 2; display: grid; gap: 2px; }
.tegel-info strong { font: 800 clamp(17px, 1.5vw, 21px)/1.15 var(--f-kop); font-stretch: 88%; }
.tegel-info small { font-size: 12.5px; font-weight: 650; color: #C9D2E4; }
.tegel-n { position: absolute; top: 14px; left: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: var(--r-pill); font-size: 12.5px; font-weight: 750; background: rgba(8, 13, 26, .5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.tegel-n .ico { width: 15px; height: 15px; }
.b-groot { grid-column: span 6; grid-row: span 2; }
.b { grid-column: span 3; }
.b-hoog { grid-column: span 3; grid-row: span 2; }
.b-breed { grid-column: span 6; }
.b-cta { grid-column: span 3; background: var(--lime); color: var(--inkt); cursor: pointer; display: flex; align-items: flex-end; padding: 20px; }
.b-cta::before { display: none; }
.b-cta-in { position: relative; z-index: 2; display: grid; gap: 6px; }
.b-cta-in strong { font: 850 1.7rem/1 var(--f-kop); font-stretch: 80%; text-transform: uppercase; }
.b-cta-in span { display: inline-flex; align-items: center; gap: 8px; font-weight: 750; }
.b-cta-sp { position: absolute; right: -30px; top: -30px; width: 150px; height: 150px; color: var(--navy); opacity: .12; transition: transform 1s var(--ease); }
.b-cta:hover .b-cta-sp { transform: rotate(-90deg); }
.rij-tegels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.rij-tegels .tegel { aspect-ratio: 4 / 3; }

/* ── werkwijze als route ────────────────────────────────────────────── */
.route { background: var(--verloop-mist); }
.route-baan { position: relative; }
.weg { position: relative; height: 26px; margin: 0 0 30px; }
.weg-asfalt { position: absolute; inset: 0; border-radius: 13px; background: var(--navy); }
.weg-streep { position: absolute; left: 14px; right: 14px; top: 12px; height: 2px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .5) 0 14px, transparent 14px 26px); }
.weg-vol { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--p, 0) * 100%); border-radius: 13px; background: var(--lime); transition: width .12s linear; }
.weg-bus { position: absolute; bottom: 8px; left: calc(var(--p, 0) * (100% - 120px)); width: 120px; transition: left .12s linear; filter: drop-shadow(0 6px 6px rgba(8, 18, 38, .35)); }
.stops { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.stop-nr { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; margin-bottom: 16px; border-radius: 50%; background: #fff; border: 2px solid var(--navy); font: 850 15px/1 var(--f-kop); transition: background-color .3s, border-color .3s, transform .4s var(--veer); }
.stop.is-bereikt .stop-nr { background: var(--lime); border-color: var(--lime); transform: rotate(-8deg) scale(1.06); }
.stop h3 { font: 800 1.25rem/1.15 var(--f-kop); font-stretch: 88%; margin-bottom: 8px; }
.stop p { color: #394560; font-size: 16px; margin: 0; max-width: 32ch; }

/* ── reviews ────────────────────────────────────────────────────────── */
.reviews { padding-bottom: clamp(56px, 7vw, 96px); }
.zweef-laag { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.zweef { position: absolute; width: 140px; height: auto; filter: blur(7px) saturate(.9); opacity: .5; animation: zweef 13s ease-in-out infinite alternate; }
.zweef.z1 { left: 40%; top: 5%; width: 160px; } .zweef.z2 { right: 6%; top: 58%; width: 100px; filter: blur(9px); animation-duration: 16s; }
.zweef.z3 { left: 4%; bottom: 8%; width: 110px; animation-duration: 11s; } .zweef.z4 { left: 60%; bottom: -30px; width: 180px; filter: blur(10px); animation-duration: 19s; }
@keyframes zweef { from { transform: translate3d(0, 0, 0) rotate(-6deg); } to { transform: translate3d(14px, -22px, 0) rotate(6deg); } }
.rev-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 32px; align-items: center; margin-bottom: clamp(24px, 4vw, 48px); }
.rev-tekst .h2 { margin-bottom: 22px; }
.rev-score { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px; color: #C3CCE0; font-size: 14.5px; }
.rev-score strong { font: 850 2.6rem/1 var(--f-kop); color: var(--lime); }
.rev-3d { position: relative; aspect-ratio: 1; max-width: 440px; width: 100%; justify-self: center; }
.rev-3d canvas { position: absolute; inset: -10%; width: 120% !important; height: 120% !important; opacity: 0; transition: opacity .8s; }
.rev-3d.is-3d canvas { opacity: 1; }
.rev-3d-plat { position: absolute; inset: 12%; display: flex; align-items: center; justify-content: center; transition: opacity .5s; }
.rev-3d.is-3d .rev-3d-plat { opacity: 0; }
.plat-stk { position: relative; width: 100%; aspect-ratio: 1; border-radius: 50%; background: var(--lime); border: 12px solid #fff; color: var(--inkt); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; transform: rotate(-8deg); box-shadow: 0 40px 60px -30px rgba(0, 0, 0, .6); }
.plat-stk > span { width: 22%; color: var(--navy); }
.plat-stk strong { font: 900 5rem/1 var(--f-kop); font-stretch: 80%; }
.plat-stk em { display: flex; gap: 2px; }
.plat-stk em .ster { fill: var(--navy); width: 22px; height: 22px; }
.plat-stk small { font: 800 13px/1 var(--f-kop); letter-spacing: .12em; text-transform: uppercase; }
.rv-banden { display: grid; gap: 14px; }
.rv-loop { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.rv-spoor { display: flex; gap: 14px; width: max-content; animation: loop 80s linear infinite; }
.rv-terug .rv-spoor { animation-direction: reverse; animation-duration: 90s; }
.rv-loop:hover .rv-spoor, .rv-loop:focus-within .rv-spoor { animation-play-state: paused; }
.rv { flex: none; width: 340px; display: flex; flex-direction: column; gap: 12px; padding: 20px 22px; border-radius: var(--r-glas); background: rgba(22, 36, 70, .55); border: 1px solid rgba(255, 255, 255, .1); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07); }
.rv-top { display: flex; align-items: center; justify-content: space-between; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--lime); }
.rv blockquote { flex: 1; font-size: 15.5px; line-height: 1.5; color: #E4E9F4; }
.rv figcaption { display: flex; justify-content: space-between; gap: 10px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 14px; }
.rv figcaption span { color: #9DA9C4; }

/* ── waarom (bento) ─────────────────────────────────────────────────── */
.wb { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; }
.wb-t { position: relative; border-radius: var(--r-beeld); padding: clamp(22px, 2.6vw, 32px); overflow: hidden; }
.wb-t h3 { font: 800 clamp(1.35rem, 2vw, 1.75rem)/1.1 var(--f-kop); font-stretch: 86%; margin-bottom: 10px; }
.wb-t p { color: #394560; max-width: 44ch; }
.wb-prijs { grid-column: span 7; background: var(--mist); display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 24px; align-items: start; }
.vanaf { display: grid; gap: 6px; }
.vanaf-rij { display: grid; grid-template-columns: 50px minmax(0, 1fr) auto 16px; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 14px; background: #fff; font-weight: 650; font-size: 15px; border: 1px solid transparent; transition: border-color .2s, transform .25s var(--ease); }
.vanaf-rij .v-lijn { color: var(--inkt); }
.vanaf-rij strong { font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.vanaf-rij .ico { width: 16px; height: 16px; color: var(--mos); }
.vanaf-rij:hover { border-color: rgba(14, 24, 48, .2); transform: translateX(3px); }
.wb-folie { grid-column: span 5; min-height: 380px; background: var(--navy); color: #fff; display: flex; align-items: flex-end; }
.wb-folie img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wb-folie::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(8, 13, 26, 0) 35%, rgba(8, 13, 26, .9) 100%); }
.wb-folie > div { position: relative; z-index: 2; }
.wb-folie p { color: #D5DCEB; margin: 0; }
.wb-proef { grid-column: span 4; background: #fff; box-shadow: 0 0 0 1px var(--lijn); display: flex; flex-direction: column; gap: 22px; }
.proef { border-radius: 18px; background: var(--mist); padding: 14px; }
.proef-kop { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 750; color: var(--staal); margin-bottom: 6px; }
.proef-bus { display: block; margin: 6px 0 10px; }
.proef-knoppen { display: flex; gap: 8px; }
.proef-knoppen span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: var(--r-pill); font-size: 13px; font-weight: 750; }
.proef-knoppen .ico { width: 15px; height: 15px; }
.proef-ok { background: var(--lime); }
.proef-aan { background: #fff; box-shadow: 0 0 0 1px var(--lijn); }
.wb-open { grid-column: span 4; background: var(--verloop-lime); display: flex; flex-direction: column; justify-content: space-between; gap: 18px; }
.wb-open p { color: #283618; }
.wk-status { display: inline-flex; align-items: center; gap: 8px; margin: 4px 0 0; padding: 8px 14px; border-radius: var(--r-pill); background: var(--navy); color: #fff !important; font-weight: 750; font-size: 14px; }
.wk { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 7px; height: 130px; }
.wk-dag { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.wk-balk { position: relative; flex: 1; width: 100%; max-width: 28px; border-radius: 9px; background: rgba(14, 24, 48, .12); overflow: hidden; }
.wk-balk i { position: absolute; left: 0; right: 0; top: 37.5%; height: 52%; border-radius: 7px; background: var(--navy); opacity: .85; }
.wk-balk .nu { position: absolute; left: -2px; right: -2px; height: 2px; background: #fff; z-index: 2; }
.wk-dag.is-vandaag .wk-balk i { opacity: 1; }
.wk-naam { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #283618; }
.wk-dag.is-vandaag .wk-naam { text-decoration: underline 2px; text-underline-offset: 4px; }
.wb-plek { grid-column: span 4; background: var(--verloop-nacht); color: #fff; display: flex; flex-direction: column; gap: 14px; }
.wb-plek p { color: #C3CCE0; }
.wb-plek .mk { margin: -6px -10px -18px; width: calc(100% + 20px); max-width: none; }

/* ── faq ────────────────────────────────────────────────────────────── */
.faq-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 76px); align-items: start; }
.faq-links { position: sticky; top: calc(var(--kop-h) + 24px); display: grid; gap: 24px; justify-items: start; }
.faq { border-bottom: 1px solid var(--lijn); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 0; cursor: pointer; list-style: none; font-weight: 750; font-size: clamp(16.5px, 1.4vw, 19px); letter-spacing: -.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq-plus { position: relative; width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--lijn); flex: none; transition: background-color .25s, border-color .25s, transform .35s var(--ease); }
.faq-plus::before, .faq-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 13px; height: 2px; background: var(--inkt); transform: translate(-50%, -50%); border-radius: 2px; }
.faq-plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq[open] .faq-plus { background: var(--lime); border-color: var(--lime); transform: rotate(45deg); }
.faq-a p { margin: -4px 0 20px; color: #394560; max-width: 64ch; }
.casey { display: flex; gap: 14px; padding: 18px; border-radius: var(--r-glas); background: #fff; box-shadow: 0 0 0 1px var(--lijn), 0 20px 40px -30px rgba(8, 18, 38, .35); max-width: 440px; }
.casey img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; border: 2px solid var(--lime); }
.casey p { font-size: 14.5px; color: #394560; margin: 0 0 12px; }
.casey .casey-naam { font-weight: 800; color: var(--inkt); margin: 0 0 3px; font-size: 16px; }

/* ── slot ───────────────────────────────────────────────────────────── */
.slot { padding-bottom: clamp(64px, 8vw, 110px); }
.slot-paneel { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; align-items: center; padding: clamp(28px, 4.5vw, 60px); border-radius: 34px; background: var(--verloop-lime); overflow: hidden; isolation: isolate; }
.slot-tekst p { color: #283618; font-size: 17.5px; max-width: 44ch; margin: 18px 0 26px; }
.slot-stk { font-size: .78em; --r: 3deg; --rand: .08em; --pel: .24em; }
.slot-stk .stk-in { padding: .1em .22em .06em; border-radius: .16em; }
.slot-beeld { --pel-bg: #C8F23C; border-radius: var(--r-kaart); overflow: hidden; box-shadow: 0 30px 60px -30px rgba(40, 54, 24, .7); }
.slot-beeld img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.slot-sp { position: absolute; width: 440px; height: 440px; left: 36%; bottom: -220px; z-index: -1; opacity: .1; color: var(--navy); }
.slot-sp .spiraal { animation: draai 70s linear infinite; }
@keyframes draai { to { transform: rotate(360deg); } }

/* ── footer ─────────────────────────────────────────────────────────── */
.voet { position: relative; overflow: hidden; background: var(--nacht); color: #B9C3D8; padding: clamp(56px, 7vw, 90px) 0 36px; font-size: 15px; isolation: isolate; }
.voet-achter { position: absolute; right: -160px; top: -140px; width: 560px; height: 560px; opacity: .05; color: var(--lime); z-index: -1; }
.voet-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding-bottom: 44px; margin-bottom: 44px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.voet-slogan { margin: 0; font: 850 clamp(1.9rem, 3.6vw, 3.2rem)/.95 var(--f-kop); font-stretch: 78%; text-transform: uppercase; color: #fff; max-width: 16ch; }
.voet-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); gap: 32px; }
.voet-merk .merk-woord { width: 190px; }
.voet-merk p { margin-top: 18px; max-width: 30ch; }
.voet-kol { display: flex; flex-direction: column; gap: 9px; }
.voet-kol a { display: inline-flex; align-items: center; gap: 8px; }
.voet-kol a:hover { color: var(--lime); }
.voet-kol .ico { width: 17px; height: 17px; }
.voet-kop { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #fff; }
.voet-kop::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--lime); }
.voet-meer { color: var(--lime); font-weight: 700; }
.voet-contact p { margin: 0; }
.voet-open { display: flex; align-items: center; gap: 8px; }
.voet-onder { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 48px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .08); font-size: 13px; color: #7F8BA6; }
.voet-onder a:hover { color: var(--lime); }

/* ── actiebalk & lightbox ───────────────────────────────────────────── */
.actiebalk { display: none; }
.lb { position: fixed; inset: 0; z-index: 260; display: flex; align-items: center; justify-content: center; padding: 24px; }
.lb-achter { position: absolute; inset: 0; background: rgba(6, 10, 20, .9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.lb-paneel { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 340px; width: min(1240px, 100%); max-height: calc(100vh - 48px); border-radius: var(--r-beeld); overflow: hidden; background: var(--navy); color: #fff; box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .8); animation: lbIn .35s var(--ease); }
@keyframes lbIn { from { opacity: 0; transform: scale(.97) translateY(10px); } }
.lb-fig { position: relative; margin: 0; background: #070B14; display: flex; align-items: center; justify-content: center; min-height: 0; }
.lb-fig img { width: 100%; height: 100%; max-height: calc(100vh - 48px); object-fit: contain; }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .9); color: var(--inkt); display: flex; align-items: center; justify-content: center; }
.lb-vorige { left: 14px; } .lb-volgende { right: 14px; }
.lb-info { position: relative; padding: 30px 26px 26px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.lb-sluit { position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .2); background: none; display: flex; align-items: center; justify-content: center; }
.lb-meta { margin: 0; padding-right: 50px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--lime); }
.lb-info .lb-titel { font: 850 1.8rem/1 var(--f-kop); font-stretch: 82%; text-transform: uppercase; }
.lb-info p { color: #C3CCE0; font-size: 15px; margin: 0; }
.lb-duimen { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.lb-duimen button { width: 60px; height: 44px; padding: 0; border-radius: 8px; overflow: hidden; border: 2px solid transparent; background: #070B14; opacity: .55; }
.lb-duimen img { width: 100%; height: 100%; object-fit: cover; }
.lb-duimen button[aria-current="true"] { border-color: var(--lime); opacity: 1; }
.lb-teller { margin-top: auto !important; padding-top: 10px; font-variant-numeric: tabular-nums; }
.lb-info .knop { align-self: flex-start; }

/* ── subpagina's ────────────────────────────────────────────────────── */
.pagina-kop { position: relative; padding: calc(var(--kop-h) + clamp(28px, 4vw, 52px)) 0 clamp(30px, 4vw, 48px); overflow: hidden; }
.pagina-kop::before { content: ""; position: absolute; width: 620px; height: 620px; right: -200px; top: -260px; border-radius: 50%; background: radial-gradient(circle, rgba(200, 242, 60, .35), transparent 65%); pointer-events: none; }
.kruimel { position: relative; margin-bottom: 20px; }
.kruimel ol { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13.5px; color: var(--staal); }
.kruimel li + li::before { content: "/"; margin-right: 6px; opacity: .6; }
.kruimel [aria-current] { color: var(--inkt); font-weight: 650; }
.pk-kop-grid { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px 48px; align-items: end; }
.cijfers { display: flex; gap: 30px; margin-top: 22px; }
.cijfers strong { display: block; font: 850 2.2rem/1 var(--f-kop); font-stretch: 84%; font-variant-numeric: tabular-nums; }
.cijfers span { font-size: 13.5px; color: var(--staal); font-weight: 650; }
.chips { position: relative; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 8px 16px; border-radius: var(--r-pill); border: 1px solid var(--lijn); background: #fff; font-weight: 700; font-size: 14.5px; transition: background-color .2s, border-color .2s; }
.chip span { font-size: 12px; color: var(--staal); font-variant-numeric: tabular-nums; }
.chip:hover { border-color: rgba(14, 24, 48, .3); }
.chip[aria-pressed="true"], .chip-navy { background: var(--navy); border-color: var(--navy); color: #fff; }
.chip[aria-pressed="true"] span { color: var(--lime); }
.chip-navy .ico { width: 16px; height: 16px; color: var(--lime); }
.pk-sectie, .vr-sectie, .wg-sectie, .av-sectie { padding-top: 10px; }
.pk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: dense; gap: 30px 18px; }
.pk { display: flex; flex-direction: column; gap: 14px; }
.pk.is-weg { display: none; }
.pk-tegel { aspect-ratio: 4 / 5; }
.pk-tegel .tegel-info, .pk-tegel::before { display: none; }
.pk-breed { grid-column: span 2; }
.pk-breed .pk-tegel { aspect-ratio: 1.63; }
.pk-meta { margin: 0 0 4px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--mos); }
.pk-tekst h2 { font: 800 1.3rem/1.15 var(--f-kop); font-stretch: 88%; margin-bottom: 6px; }
.pk-desc { margin: 0; font-size: 15px; color: #4A5570; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.uitleg { padding-top: clamp(60px, 7vw, 100px); }
.ts { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 16px 48px; padding: 32px 0; border-top: 1px solid var(--lijn); }
.ts .h3 { position: sticky; top: calc(var(--kop-h) + 24px); align-self: start; }
.ts-body p { color: #394560; max-width: 68ch; }
.ts-body p:last-child { margin-bottom: 0; }
.ts-links { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-top: 16px; }
.prijzen { background: var(--mist); }
.prijzen-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.prijzen-grid .h2 { margin-bottom: 20px; }
.prijzen-grid p { color: #394560; }
.prijzen-grid .knop { margin-top: 10px; }
.ptabel { width: 100%; border-collapse: separate; border-spacing: 0 6px; }
.ptabel caption { text-align: left; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--staal); padding-bottom: 6px; }
.ptabel th, .ptabel td { background: #fff; padding: 12px 16px; text-align: left; }
.ptabel th { border-radius: 14px 0 0 14px; display: flex; align-items: center; gap: 14px; }
.pt-beeld { width: 86px; flex: none; }
.ptabel th strong { display: flex; align-items: center; flex-wrap: wrap; font-size: 16px; }
.ptabel th small { display: block; font-weight: 500; font-size: 13.5px; color: var(--staal); margin-top: 2px; }
.ptabel td { border-radius: 0 14px 14px 0; font: 850 18px/1 var(--f-kop); font-stretch: 86%; text-align: right; white-space: nowrap; vertical-align: middle; }
.ptabel tr.is-pop th, .ptabel tr.is-pop td { background: var(--navy); color: #fff; }
.ptabel tr.is-pop td { color: var(--lime); }
.ptabel tr.is-pop small { color: #AFBAD4; }
.locatie { padding-bottom: clamp(40px, 5vw, 70px); }
.loc-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.loc-kaart { --pel-bg: var(--papier); border-radius: var(--r-beeld); overflow: hidden; background: #fff; box-shadow: 0 0 0 1px var(--lijn), var(--schaduw); padding: 6px; }
.loc-tekst .h2 { margin-bottom: 18px; }
.loc-adres { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: #394560; }
.loc-adres .ico { color: var(--mos); margin-top: 2px; }
.buren { padding-block: 0 clamp(48px, 6vw, 80px); }
.buren .chips { margin-top: 14px; }
.werk-klein { padding-top: clamp(56px, 7vw, 96px); }
.vr-grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 48px; align-items: start; }
.vr-cat + .vr-cat { margin-top: 44px; }
.vr-cat .h3 { margin-bottom: 6px; }
.vr-zij { position: sticky; top: calc(var(--kop-h) + 24px); }
.wg-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px; align-items: start; }
.wg-kaart { --pel-bg: var(--papier); position: sticky; top: calc(var(--kop-h) + 20px); border-radius: var(--r-beeld); overflow: hidden; background: #fff; box-shadow: 0 0 0 1px var(--lijn); padding: 8px; }
.wg-tip { display: flex; align-items: center; gap: 8px; margin: 4px 12px 10px; font-size: 13.5px; color: var(--staal); }
.wg-tip .ico { width: 16px; height: 16px; }
.wg-groep + .wg-groep { margin-top: 30px; }
.wg-groep .h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.wg-groep .h3 span { font: 800 13px/1 var(--f-tekst); padding: 4px 9px; border-radius: var(--r-pill); background: var(--navy); color: var(--lime); }
.wg-links { display: flex; flex-wrap: wrap; gap: 6px; }
.wg-links a { padding: 7px 13px; border-radius: var(--r-pill); background: #fff; border: 1px solid var(--lijn); font-size: 14px; font-weight: 650; transition: border-color .2s, background-color .2s; }
.wg-links a:hover { border-color: var(--inkt); background: var(--lime-zacht); }
.av-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; align-items: start; }
.av-index { position: sticky; top: calc(var(--kop-h) + 20px); display: grid; gap: 2px; max-height: calc(100vh - 120px); overflow-y: auto; }
.av-index a { display: grid; grid-template-columns: 86px 1fr; gap: 8px; padding: 7px 10px; border-radius: 10px; font-size: 13.5px; font-weight: 750; }
.av-index a span { font-weight: 500; color: #4A5570; }
.av-index a:hover { background: var(--mist); }
.av-art { padding: 26px 0; border-top: 1px solid var(--lijn); }
.av-art h2 { font: 800 1.25rem/1.2 var(--f-kop); font-stretch: 88%; margin-bottom: 12px; }
.av-art p { font-size: 15.5px; color: #394560; max-width: 72ch; }
.bedankt { position: relative; min-height: 92vh; display: flex; align-items: center; padding: calc(var(--kop-h) + 48px) 0 72px; }
.bedankt-grid { position: relative; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 48px; align-items: center; }
.bedankt .held-boven { display: inline-flex; }
.bedankt .h1 { margin-bottom: 20px; }
.bd-stappen { display: grid; gap: 12px; margin: 8px 0 28px; }
.bd-stappen li { display: flex; gap: 14px; align-items: flex-start; color: #C3CCE0; }
.bd-stappen p { margin: 4px 0 0; }
.bd-stappen li > span { width: 32px; height: 32px; border-radius: 50%; background: var(--lime); color: var(--inkt); display: inline-flex; align-items: center; justify-content: center; font: 850 14px/1 var(--f-kop); flex: none; }
.bd-stappen strong { color: #fff; }
.nf-sp { width: min(380px, 70vw); aspect-ratio: 1; justify-self: center; color: var(--lime); }
.nf-sp .spiraal { animation: draai 30s linear infinite; }

/* kaartjes */
.mk { width: 100%; height: auto; font-family: var(--f-tekst); }
.mk-arc { stroke: rgba(14, 24, 48, .1); stroke-width: 1.4; }
.mk-kust { fill: none; stroke: rgba(14, 24, 48, .38); stroke-width: 1.3; stroke-linejoin: round; }
.mk-ring { fill: none; stroke: var(--mos); stroke-opacity: .35; stroke-width: 1; stroke-dasharray: 3 5; }
.mk-ringlabel { font-size: 10px; font-weight: 750; fill: var(--mos); }
.mk-dot circle, circle.mk-dot { fill: #8E9AAE; transition: fill .2s; }
.mk-dot:hover circle, .mk-dot:focus circle { fill: var(--mos); }
.mk-buur circle { fill: var(--inkt); }
.mk-label { font-size: 10.5px; font-weight: 750; fill: rgba(14, 24, 48, .72); pointer-events: none; }
.mk-route { fill: none; stroke: var(--inkt); stroke-width: 2; stroke-dasharray: 5 5; animation: route 1.2s linear infinite; }
@keyframes route { to { stroke-dashoffset: -20; } }
.mk-doel { fill: var(--lime); stroke: var(--inkt); stroke-width: 2.2; }
.mk-puls { fill: var(--lime); opacity: .4; transform-box: fill-box; transform-origin: center; animation: mkpuls 2s ease-out infinite; }
@keyframes mkpuls { from { transform: scale(.6); opacity: .55; } to { transform: scale(2.4); opacity: 0; } }
.mk-naam { font-size: 13px; font-weight: 800; fill: var(--inkt); paint-order: stroke; stroke: #fff; stroke-width: 4px; stroke-linejoin: round; }
.mk-min { font-size: 11px; font-weight: 800; fill: var(--mos); paint-order: stroke; stroke: #fff; stroke-width: 4px; }
.mk-wp circle { fill: var(--navy); }
.mk-wp svg { color: var(--lime); }
.mk-wp-naam { font-size: 11px; font-weight: 800; fill: var(--inkt); paint-order: stroke; stroke: #fff; stroke-width: 4px; }
.mk-zee-naam { font-size: 11px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; fill: rgba(14, 24, 48, .35); }
.mk-klein .mk-arc { stroke: rgba(255, 255, 255, .08); }
.mk-klein .mk-kust { stroke: rgba(255, 255, 255, .35); }
.mk-klein .mk-ring { stroke: var(--lime); stroke-opacity: .4; }
.mk-klein circle.mk-dot { fill: rgba(255, 255, 255, .35); }
.mk-klein .mk-wp circle { fill: var(--lime); }
.mk-klein .mk-wp svg { color: var(--navy); }
.mk-klein .mk-zee-naam { fill: rgba(255, 255, 255, .3); }

/* ══ responsive ═════════════════════════════════════════════════════ */
@media (max-width: 1240px) {
  .open { display: none; }
  .kop-tel span { display: none; }
  .kop-link { padding: 9px 10px; }
  .held-grid { grid-template-columns: minmax(0, 540px) 1fr; }
}
@media (max-width: 1060px) {
  .kop-nav, .kop-cta { display: none; }
  .kop-menu { display: inline-flex; }
  .kop-tel span { display: inline; }
  .ps-grid, .prijs-grid, .rev-grid, .faq-grid, .vr-grid, .wg-grid, .av-grid, .prijzen-grid, .loc-grid, .bedankt-grid, .sectie-kop.split, .pk-kop-grid { grid-template-columns: minmax(0, 1fr); }
  .ps-grid { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .ps-tekst { display: contents; }
  .ps-tekst .h2 { order: 1; } .ps-tekst .lead { order: 2; } .segment { order: 3; }
  .ps-podium { order: 4; margin-bottom: 8px; } .ps-info { order: 5; border-top: 0; padding-top: 12px; } .ps-tekst > .knop { order: 6; align-self: flex-start; }
  .prijs-links { position: static; }
  .prijs-links .live { display: none; }
  .live-m { display: block; margin: 0 0 14px; }
  .bk { max-width: 640px; }
  .faq-links, .vr-zij, .wg-kaart, .av-index { position: static; }
  .av-index { max-height: none; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wb-prijs, .wb-folie { grid-column: span 12; }
  .wb-proef, .wb-open, .wb-plek { grid-column: span 6; }
  .wb-plek { grid-column: span 12; flex-direction: row; align-items: center; }
  .wb-plek > div { flex: 1; }
  .wb-plek .mk { width: 50%; margin: -10px -12px -20px 0; }
  .rev-3d { max-width: 340px; }
  .pk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .voet-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .voet-merk { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  :root { --kop-h: 66px; }
  body { font-size: 16.5px; }
  .kop.is-gescrold { --kop-h: 62px; }
  .merk-woord { width: 150px; }
  .merk-beeld { width: 28px; height: 28px; }
  .kop-tel span { display: none; }
  .kop-tel .ico { width: 44px; height: 44px; padding: 11px; }
  /* hero: tekst, foto-strook, dan het formulier eroverheen */
  .held { display: flex; flex-direction: column; align-items: stretch; min-height: 0; padding: calc(var(--kop-h) + 20px) 0 34px; }
  .held-foto { position: relative; inset: auto; order: 2; z-index: 0; height: 240px; margin-top: -8px; }
  .held-foto img { object-position: 78% 55%; }
  .held-foto::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, var(--held) 0%, rgba(10, 17, 32, 0) 30%, rgba(10, 17, 32, 0) 62%, var(--held) 100%); }
  .held-waas { display: none; }
  .held-grid { display: contents; }
  .held-tekst { order: 1; padding-inline: clamp(16px, 4vw, 44px); position: relative; z-index: 2; }
  .held-kaart-wrap { order: 3; margin: -96px clamp(16px, 4vw, 44px) 0; max-width: none; z-index: 2; }
  .held .h1 { margin-bottom: 14px; }
  .held-boven { margin-bottom: 14px; font-size: 13px; }
  .held-lead { margin-bottom: 14px; font-size: 16px; }
  .held-google { margin: 0; font-size: 13px; }
  .held-chips { margin: 0 0 14px; }
  .held-voor { display: none; }
  .hk-stk { font-size: 11.5px; }
  .hk-stk-1 { left: 16px; top: -14px; }
  .hk-stk-2 { right: 12px; top: -12px; --r: 5deg; }
  .hk-stk-3 { display: none; }
  .hk { padding: 24px 16px 16px; border-radius: 22px; }
  .hk-status { font-size: 12.5px; white-space: nowrap; padding: 6px 10px 6px 9px; }
  .hk-balk li { width: 14px; } .hk-balk li.is-nu { width: 22px; }
  .hk-vraag, .bk-vraag { font-size: 1.3rem; }
  .hk-tegel-in, .bk-tegel-in { min-height: 84px; font-size: 13px; padding: 10px 4px; }
  .hk-tegel-in .v-lijn, .bk-tegel-in .v-lijn { width: 54px; }
  .band { flex-direction: column; align-items: stretch; gap: 6px; padding: 14px 0; }
  .band-kop { padding-left: clamp(16px, 4vw, 44px); }
  /* swiperijen met een stukje volgende kaart */
  .bento, .rij-tegels { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(-1 * clamp(16px, 4vw, 44px)); padding-inline: clamp(16px, 4vw, 44px); scroll-padding-inline: clamp(16px, 4vw, 44px); gap: 12px; }
  .bento::-webkit-scrollbar, .rij-tegels::-webkit-scrollbar { display: none; }
  .bento .tegel, .rij-tegels .tegel { flex: 0 0 76%; aspect-ratio: 4 / 5; scroll-snap-align: start; grid-row: auto !important; grid-column: auto !important; }
  .bento .b-cta { flex-basis: 56%; }
  /* route verticaal, weg kleurt mee */
  .route-baan { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 20px; }
  .weg { height: auto; margin: 0; }
  .weg-streep { left: 12px; right: auto; top: 14px; bottom: 14px; width: 2px; height: auto; background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .5) 0 14px, transparent 14px 26px); }
  .weg-vol { right: 0; bottom: auto; width: auto; height: calc(var(--p, 0) * 100%); transition: height .12s linear; }
  .weg-bus { display: none; }
  .stops { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .stop { position: relative; }
  .stop-nr { width: 40px; height: 40px; margin-bottom: 10px; }
  .wb-proef, .wb-open, .wb-plek { grid-column: span 12; }
  .wb-prijs { grid-template-columns: minmax(0, 1fr); }
  .wb-folie { min-height: 320px; }
  .ts { grid-template-columns: minmax(0, 1fr); padding: 26px 0; }
  .ts .h3 { position: static; }
  .slot-paneel { grid-template-columns: minmax(0, 1fr); border-radius: 28px; }
  .rv { width: 290px; }
  .rv-terug { display: none; }
  .lb { padding: 0; }
  .lb-paneel { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; height: 100%; max-height: none; border-radius: 0; }
  .lb-fig img { max-height: 60vh; }
  .lb-info { padding: 18px 18px 24px; max-height: 40vh; }
  .lb-duimen { display: none; }
  /* vaste actiebalk onderin */
  .actiebalk { display: block; position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 190; border-radius: 22px; background: rgba(14, 29, 61, .92); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 20px 40px -16px rgba(0, 0, 0, .6); color: #fff; padding: 7px; transition: transform .35s var(--ease); }
  .actiebalk.is-weg, .actiebalk.bk-in-beeld { transform: translateY(140%); }
  .ab-std, .ab-prijs { display: flex; align-items: center; gap: 6px; }
  .ab-knop { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 58px; height: 50px; border-radius: 16px; font-size: 11px; font-weight: 750; color: #C3CCE0; }
  .ab-knop .ico { width: 21px; height: 21px; color: #fff; }
  .ab-knop .ico-wa { color: #25D366; }
  .ab-cta { margin-left: auto; flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 50px; border-radius: 16px; border: 0; background: var(--lime); color: var(--inkt); font-weight: 800; font-size: 15.5px; }
  .ab-cta .ico { width: 18px; height: 18px; }
  .ab-keuze { padding-left: 10px; min-width: 0; flex: 1; }
  .ab-keuze span { display: block; font-size: 12px; color: #AFBAD4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ab-keuze strong { display: block; font: 850 1.3rem/1.05 var(--f-kop); font-stretch: 84%; color: var(--lime); }
  .ab-prijs .ab-cta { flex: 0 0 auto; padding: 0 20px; margin-left: 0; }
  .voet { padding-bottom: 110px; }
  .voet-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
  .voet-contact { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .h1 { font-size: clamp(2.15rem, 10.6vw, 2.9rem); }
  .h1-klein { font-size: clamp(2rem, 9.6vw, 2.6rem); }
  .h2 { font-size: clamp(1.9rem, 8.8vw, 2.5rem); }
  .sectie { padding-block: 60px; }
  .knop { min-height: 50px; padding: 11px 20px; font-size: 15px; }
  .held-pills { display: none; }
  .ps-foto { border-radius: 22px; }
  .ps-stops { margin-inline: -8px; }
  .ps-stop { width: 58px; font-size: 12px; }
  .ps-info { min-height: 0; }
  .segment { width: 100%; }
  .seg { flex: 1; justify-content: center; flex-direction: column; gap: 2px; padding: 8px 4px; font-size: 13px; }
  .bk { padding: 18px 14px 14px; border-radius: 22px; margin-inline: -4px; }
  .bk-balk li { font-size: 10.5px; }
  .bk-rij-in { grid-template-columns: 84px minmax(0, 1fr) auto; gap: 10px; padding: 8px 10px 8px 8px; }
  .bk-rij-tekst small { font-size: 12.5px; }
  .kenteken { max-width: none; }
  .pk-grid { grid-template-columns: minmax(0, 1fr); }
  .pk-breed { grid-column: auto; }
  .pk { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 14px; align-items: center; }
  .pk .pk-tegel, .pk-breed .pk-tegel { aspect-ratio: 1; border-radius: 16px; }
  .pk-tegel .tegel-n { top: 8px; left: 8px; font-size: 11px; padding: 3px 7px; }
  .pk-desc { -webkit-line-clamp: 2; font-size: 14px; }
  .pk-tekst h2 { font-size: 1.1rem; }
  .cijfers { gap: 22px; }
  .cijfers strong { font-size: 1.8rem; }
  .ptabel th, .ptabel td { padding: 10px 12px; }
  .pt-beeld { width: 60px; }
  .ptabel th { gap: 10px; }
  .av-index { grid-template-columns: minmax(0, 1fr); }
  .rev-score strong { font-size: 2.2rem; }
  .rev-3d { max-width: 280px; }
  .vanaf-rij { grid-template-columns: 42px minmax(0, 1fr) auto 14px; gap: 10px; padding: 9px 10px; font-size: 14.5px; }
  .wb-plek { flex-direction: column; align-items: stretch; }
  .wb-plek .mk { width: calc(100% + 20px); margin: -6px -10px -18px; }
  .voet-onder { flex-direction: column; }
  .voet-top { padding-bottom: 32px; margin-bottom: 32px; }
  .faq summary { padding: 17px 0; }
}
@media (max-width: 380px) {
  .kop-in { gap: 10px; }
  .kop-rechts { gap: 8px; }
  .merk { gap: 7px; }
  .merk-woord { width: 136px; }
  .hk-tegel-in, .bk-tegel-in { font-size: 12px; }
  .hk-tegel-in .v-lijn, .bk-tegel-in .v-lijn { width: 46px; }
  .bk-rij-in { grid-template-columns: 70px minmax(0, 1fr); }
  .bk-rij-meter { display: none; }
  .vanaf-rij { grid-template-columns: minmax(0, 1fr) auto 14px; }
  .vanaf-rij .v-lijn { display: none; }
  .hk-kanaal label span { font-size: 13px; }
  .pt-beeld { display: none; }
  .ptabel td { white-space: normal; font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .band-spoor, .rv-spoor { animation: none !important; }
}