/* autobestickerd.nl — rebranding okt 2026: cyaan #00A0DF + petrol #003F66.
   Licht en luchtig (bewust anders dan busbestickerd.nl). Typografie zoals Daktrots/TC Swiss: koppen Barlow Condensed 800 in
   kapitalen (zoals TC Swiss), tekst Elms Sans, vette nadruk in lopende tekst, cijfers in de kopletter.
   Signatuurvorm: het prijslabel (afgeschuinde bovenhoeken). */

@font-face { font-family: 'Barlow Condensed'; src: url(/assets/fonts/BarlowCondensed-700-latin.woff2) format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; src: url(/assets/fonts/BarlowCondensed-800-latin.woff2) format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Elms Sans'; src: url(/assets/fonts/ElmsSans-latin.woff2) format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Elms Sans'; src: url(/assets/fonts/ElmsSans-latin-ext.woff2) format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C4, U+2C60-2C7F, U+A720-A7FF; }

:root {
  /* palet — cyaan is het merk en de CTA (altijd met inkt-tekst, nooit wit), petrol voor donkere vlakken */
  --inkt: #06233A;          /* tekst, fungeert als zwart */
  --petrol: #003F66;        /* merk, donkere secties, footer */
  --petrol-diep: #002640;
  --cyaan: #00A0DF;         /* merk + knoppen (inkt-tekst erop) */
  --cyaan-tekst: #0077A8;   /* cyaan als tekst op licht */
  --lucht: #8FD8F5;         /* alleen in gloed en verloop */
  --papier: #F6F5F1;        /* hoofdachtergrond */
  --mist: #E7F0F4;          /* afwisselende vlakken */
  --kaart: #FDFDFB;
  --grijs: #5A6B78;         /* bijschriften */
  --lijn: #D6DFE5;

  --v-merk: linear-gradient(120deg, #00A0DF 0%, #0A72AE 55%, #003F66 100%);
  --v-licht: radial-gradient(55% 70% at 88% 0%, rgba(0,160,223,.16), transparent 62%),
             radial-gradient(45% 60% at 0% 100%, rgba(143,216,245,.22), transparent 60%), var(--papier);
  --v-nacht: linear-gradient(155deg, #003F66 0%, #002640 68%, #001B2E 100%);
  --v-foto: linear-gradient(180deg, rgba(0,27,46,0) 42%, rgba(0,27,46,.84) 100%);

  --f-kop: 'Barlow Condensed', 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif;
  --f-tekst: 'Elms Sans', 'Helvetica Neue', Arial, sans-serif;

  --r-beeld: 28px; --r-glas: 20px; --r-kaart: 22px; --r-pil: 999px;
  --schuin: 44px;           /* afgeschuinde hoek van de labelvorm */
  --schaduw: 0 1px 2px rgba(0,38,64,.06), 0 12px 32px -12px rgba(0,38,64,.18);
  --schaduw-zwaar: 0 2px 4px rgba(0,38,64,.08), 0 28px 60px -20px rgba(0,38,64,.32);
  --wrap: 1240px;
  --kop-h: 80px;
  --gutter: clamp(16px, 4vw, 40px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px; }
body { margin: 0; background: var(--papier); color: var(--inkt); font-family: var(--f-tekst); font-size: 17px; line-height: 1.58; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3 { font-family: var(--f-kop); font-weight: 800; text-transform: uppercase; letter-spacing: -.005em; line-height: .96; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2.8rem, 6.6vw, 5.6rem); }
h2 { font-size: clamp(2.15rem, 4.3vw, 3.7rem); }
h3 { font-size: 1.35rem; font-weight: 800; }
b, strong { font-weight: 750; }
.kicker { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 14px; font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--grijs); }
.kicker svg { width: 18px; height: 18px; padding: 3px; border-radius: 5px; background: var(--cyaan); color: #fff; }
.kicker-nr { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-kop); font-weight: 800; font-size: 1.05rem; letter-spacing: .02em; color: var(--cyaan-tekst); }
.kicker-nr::after { content: ''; width: 28px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--cyaan), rgba(0,160,223,0)); }
.kicker-nr:empty { display: none; }
:is(.rv-sectie, .slot, .hd) .kicker-nr { color: var(--lucht); }
.slot .kicker, .contact-cta .kicker { color: rgba(255,255,255,.7); }
.acc-vlag { position: relative; display: inline-block; white-space: nowrap; background: var(--cyaan); color: var(--inkt); padding: .06em .16em .02em; border-radius: .1em; transform: rotate(-2deg); box-shadow: .05em .06em 0 var(--petrol); margin-inline: .04em; }
p { margin: 0; }
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.verborgen { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sla-over { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--inkt); color: #fff; padding: 10px 16px; border-radius: 10px; }
.sla-over:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--cyaan); outline-offset: 3px; border-radius: 6px; }
.ic { width: 1.2em; height: 1.2em; flex: none; }
.korrel { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 90; opacity: .035; mix-blend-mode: multiply; }
.sectie { padding: clamp(64px, 9vw, 120px) 0; }
.sectie-kop { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 32px; }
.link-pijl { display: inline-flex; align-items: center; gap: .45em; font-weight: 600; color: var(--cyaan-tekst); text-decoration: none; white-space: nowrap; }
.link-pijl .ic { transition: transform .2s; }
.link-pijl:hover .ic { transform: translateX(3px); }

/* knoppen */
.knop { display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-height: 52px; padding: 0 26px; border-radius: var(--r-pil); border: 0; font-weight: 650; font-size: 1rem; text-decoration: none; white-space: nowrap; transition: transform .2s, box-shadow .2s, background .2s; }
.knop:hover { transform: translateY(-2px); }
.knop-cta { position: relative; overflow: hidden; isolation: isolate; color: var(--inkt); background: linear-gradient(110deg, #00A0DF 0%, #45CBF7 45%, #00A0DF 70%, #0392CC 100%); background-size: 220% 100%; background-position: 0 0;
  box-shadow: 0 10px 24px -10px rgba(0,160,223,.75), inset 0 1px 0 rgba(255,255,255,.35); transition: transform .2s, box-shadow .2s, background-position .7s ease; }
.knop-cta:hover { background-position: 100% 0; box-shadow: 0 16px 30px -12px rgba(0,160,223,.8), inset 0 1px 0 rgba(255,255,255,.35); }
.knop-cta::after { content: ''; position: absolute; inset: -20% auto -20% -40%; width: 30%; z-index: -1; background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-20deg) translateX(0); transition: transform .8s ease; pointer-events: none; }
.knop-cta:hover::after { transform: skewX(-20deg) translateX(560%); }
.knop-inkt { background: var(--petrol); color: #fff; }
.knop-rand { background: transparent; color: var(--inkt); box-shadow: inset 0 0 0 1.5px var(--inkt); }
.knop-rand:hover { background: var(--inkt); color: #fff; }
.knop-glas { background: rgba(255,255,255,.1); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); backdrop-filter: blur(10px); }
.knop-wa { background: #DDF6E6; color: #0B5B2E; }
.knop-klein { min-height: 42px; padding: 0 18px; font-size: .92rem; }
.knop-vol { width: 100%; }

/* sterren */
.sterren { display: inline-flex; gap: 1px; color: #F7BE2A; } /* geel-goud verloop: #goud staat bovenin <body> */
.sterren .ic { width: 15px; height: 15px; fill: url(#goud) #F7BE2A; stroke: none; filter: drop-shadow(0 1px 1px rgba(150,95,0,.35)); }

/* topbalk + header */
.topbalk { background: var(--petrol); color: #DCEBF3; font-size: .86rem; }
.topbalk-in { display: flex; gap: 28px; align-items: center; min-height: 38px; }
.topbalk span { display: inline-flex; align-items: center; gap: 6px; }
.topbalk .ic { color: var(--cyaan); width: 16px; height: 16px; stroke-width: 2.4; }
.topbalk-google { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: #fff; }
.topbalk-google .sterren .ic { width: 13px; height: 13px; }
.kop { position: sticky; top: 0; z-index: 50; transition: background .25s, box-shadow .25s; background: rgba(246,245,241,.86); backdrop-filter: blur(14px) saturate(1.4); border-bottom: 1px solid transparent; }
.kop.is-gescrold { background: rgba(253,253,251,.9); border-bottom-color: var(--lijn); box-shadow: 0 8px 24px -18px rgba(0,38,64,.35); }
.kop-in { display: flex; align-items: center; gap: 28px; min-height: 76px; }
.kop-logo { flex: none; }
.logo { width: 250px; height: auto; }
.logo .logo-merk { fill: var(--cyaan); }
.logo .logo-woord { fill: var(--petrol); }
.logo-licht .logo-woord { fill: #fff; }
.kop-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.kop-nav > a, .kop-item > a { white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; padding: 10px 14px; border-radius: var(--r-pil); text-decoration: none; font-weight: 550; font-size: .97rem; }
.kop-nav > a:hover, .kop-item > a:hover, .kop-nav .is-actief { background: var(--mist); }
.kop-item { position: relative; }
.kop-item .ic { width: 16px; height: 16px; transition: transform .2s; }
.kop-item:hover > a .ic, .kop-item:focus-within > a .ic { transform: rotate(180deg); }
.mega { position: absolute; top: 100%; left: 50%; transform: translate(-50%, 8px); padding-top: 10px; opacity: 0; visibility: hidden; transition: opacity .18s, transform .18s; }
.kop-item:hover .mega, .kop-item:focus-within .mega { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.mega-in { width: 640px; background: var(--kaart); border: 1px solid var(--lijn); border-radius: var(--r-kaart); box-shadow: var(--schaduw-zwaar); padding: 12px; }
.mega-raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.mega-v { display: grid; gap: 4px; padding: 10px; border-radius: 16px; text-decoration: none; }
.mega-v:hover { background: var(--mist); }
.mega-img { height: 58px; width: 100%; object-fit: contain; }
.mega-v b { display: block; font-size: .95rem; }
.mega-v small { color: var(--cyaan-tekst); font-weight: 600; }
.mega-alles { display: flex; align-items: center; gap: 12px; margin-top: 8px; padding: 14px 16px; border-radius: 16px; background: var(--mist); text-decoration: none; }
.mega-alles span { flex: 1; } .mega-alles b { display: block; } .mega-alles small { color: var(--grijs); }
.mega-alles .ic { color: var(--cyaan-tekst); }
.mega-klein { left: 0; transform: translate(0, 8px); }
.kop-item:hover .mega-klein, .kop-item:focus-within .mega-klein { transform: translate(0, 0); }
.mega-lijst { width: 300px; display: grid; }
.mega-lijst a { padding: 10px 14px; border-radius: 12px; text-decoration: none; font-weight: 550; }
.mega-lijst a:hover { background: var(--mist); }
.kop-acties { display: flex; align-items: center; gap: 14px; }
.kop-tel { display: inline-flex; align-items: center; gap: 10px; padding: 5px 16px 5px 5px; border-radius: var(--r-pil); background: var(--mist); text-decoration: none; font-variant-numeric: tabular-nums; transition: background .2s; }
.kop-tel:hover { background: #DCE9F0; }
.kop-tel-ic { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--cyaan); color: var(--inkt); }
.kop-tel-ic .ic { width: 18px; height: 18px; }
.kop-tel-t { display: grid; line-height: 1.1; }
.kop-tel-t small { font-size: .7rem; font-weight: 600; opacity: .7; }
.kop-tel-t b { font-family: var(--f-kop); font-weight: 800; font-size: 1.2rem; letter-spacing: .01em; }
.kop-menu { display: none; width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--mist); align-items: center; justify-content: center; }
/* mobiel menu: donkerblauwe mesh met glazen vlakken; geen prijzenblok (dat staat op de pagina zelf) */
.mob-menu { position: fixed; inset: 0; z-index: 80; overflow-y: auto; padding: 16px var(--gutter) 32px; color: #fff; display: flex; flex-direction: column;
  background: radial-gradient(60% 40% at 100% 0%, rgba(0,160,223,.55), transparent 70%), radial-gradient(70% 45% at 0% 100%, rgba(69,203,247,.35), transparent 70%),
              radial-gradient(50% 35% at 10% 30%, rgba(0,90,150,.6), transparent 70%), linear-gradient(165deg, #003F66 0%, #06233A 70%);
  visibility: hidden; clip-path: circle(0px at var(--mx, calc(100% - 40px)) var(--my, 40px));
  transition: clip-path .5s cubic-bezier(.65,0,.35,1), visibility 0s linear .5s; }
.mob-menu.is-open { visibility: visible; clip-path: circle(150vmax at var(--mx, calc(100% - 40px)) var(--my, 40px)); transition: clip-path .7s cubic-bezier(.65,0,.35,1), visibility 0s; }
.mob-menu > * { opacity: 0; transform: translateY(16px); transition: opacity .25s ease, transform .3s ease; }
.mob-menu.is-open > * { opacity: 1; transform: none; transition: opacity .45s ease, transform .55s cubic-bezier(.2,.8,.2,1); }
.mob-menu.is-open > :nth-child(1) { transition-delay: .15s; } .mob-menu.is-open > :nth-child(2) { transition-delay: .22s; }
.mob-menu.is-open > :nth-child(3) { transition-delay: .29s; } .mob-menu.is-open > :nth-child(4) { transition-delay: .34s; }
.mob-menu.is-open > :nth-child(5) { transition-delay: .4s; } .mob-menu.is-open > :nth-child(6) { transition-delay: .46s; }
@media (prefers-reduced-motion: reduce) { .mob-menu, .mob-menu.is-open, .mob-menu > * { transition: none; } }
.mob-menu-kop { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; }
.mob-menu-kop .logo { width: 200px; }
.mob-menu-kop button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.1); color: #fff; display: grid; place-items: center; backdrop-filter: blur(10px); }
.mob-menu-hoofd { display: grid; padding: 6px 16px; border-radius: 22px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.12); backdrop-filter: blur(16px); }
.mob-menu-hoofd a { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; color: #fff; text-decoration: none; font-family: var(--f-kop); font-weight: 800; font-size: 1.7rem; text-transform: uppercase; line-height: 1; }
.mob-menu-hoofd a + a { border-top: 1px solid rgba(255,255,255,.12); }
.mob-menu-hoofd .ic { width: 22px; height: 22px; color: var(--cyaan); }
.mob-menu-titel { font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.6); margin: 22px 0 10px; }
.mob-menu-d { display: flex; flex-wrap: wrap; gap: 8px; }
.mob-menu-d a { padding: 9px 14px; border-radius: var(--r-pil); background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); color: #fff; text-decoration: none; font-size: .88rem; font-weight: 600; backdrop-filter: blur(10px); }
.mob-menu-cta { width: 100%; justify-content: center; margin-top: auto; }
.mob-menu-acties { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.mob-menu-glas { justify-content: center; color: #fff; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(10px); }
.mob-menu-glas .ic { color: var(--cyaan); }
.mob-menu > .mob-menu-d { margin-bottom: 26px; }

/* hero */
.held, .pk { position: relative; background: var(--v-licht); overflow: hidden; }
.held { padding: clamp(28px, 4vw, 56px) 0 clamp(36px, 5vw, 64px); }
.held-gloed { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(38% 50% at 72% 30%, rgba(0,160,223,.12), transparent 70%); }
.held-grid { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.held-boven { display: inline-flex; align-items: center; gap: 8px; color: var(--grijs); font-weight: 550; font-size: .95rem; margin-bottom: 18px; }
.held-boven .ic { color: var(--cyaan-tekst); }
.held-h1 .r1, .held-h1 .r2 { display: block; }
.held-h1 .r1 { color: var(--grijs); font-weight: 700; }
/* Markeerstift achter een sleutelwoord (zoals btcenergy.nl): band over het onderste deel van de letters, veegt van links in. */
.hl { --hl: var(--cyaan); font-style: normal; color: var(--petrol); background-image: linear-gradient(var(--hl), var(--hl)); background-repeat: no-repeat;
  background-position: 0 76%; background-size: 100% .34em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  animation: hl-in .8s cubic-bezier(.7,0,.2,1) .45s both; }
@keyframes hl-in { from { background-size: 0% .34em; } to { background-size: 100% .34em; } }
:is(.slot, .voet, .contact-cta) .hl { --hl: transparent; color: var(--lucht); }
.held-lead { font-size: clamp(1.05rem, 1.4vw, 1.2rem); max-width: 56ch; margin-top: 22px; color: #1C3A50; }
.held-knoppen { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.held-feiten { display: flex; gap: 28px; list-style: none; padding: 0; margin: 32px 0 0; }
.held-feiten li { display: grid; padding-left: 14px; border-left: 2px solid var(--cyaan); }
.held-feiten b { font-family: var(--f-kop); font-weight: 800; font-size: 1.85rem; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.held-feiten span { color: var(--grijs); font-size: .9rem; display: inline-flex; align-items: center; gap: 6px; }
.held-beeld { position: relative; }
.held-mob-knop { display: none; }
.held-foto { border-radius: var(--r-beeld); overflow: hidden; aspect-ratio: 4 / 4.4;
  clip-path: polygon(var(--schuin) 0, calc(100% - var(--schuin)) 0, 100% var(--schuin), 100% 100%, 0 100%, 0 var(--schuin)); }
.held-foto img { width: 100%; height: 100%; object-fit: cover; }
.held-bonnetje { position: absolute; left: -36px; bottom: 34px; width: 260px; padding: 16px 18px; border-radius: var(--r-glas);
  background: rgba(253,253,251,.82); backdrop-filter: blur(16px) saturate(1.3); box-shadow: var(--schaduw-zwaar); font-size: .86rem; border: 1px solid rgba(255,255,255,.7); }
.held-bonnetje p { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; color: var(--grijs); }
.held-bonnetje .hb-titel { font-weight: 700; color: var(--inkt); border-bottom: 1px dashed var(--lijn); padding-bottom: 8px; margin-bottom: 4px; }
.held-bonnetje .hb-nul { color: var(--cyaan-tekst); font-weight: 700; }
.held-bonnetje .hb-totaal { border-top: 1px dashed var(--lijn); margin-top: 6px; padding-top: 9px; color: var(--inkt); font-weight: 650; align-items: baseline; }
.held-bonnetje .hb-totaal b { font-family: var(--f-kop); font-weight: 800; font-size: 1.75rem; letter-spacing: 0; }
.held-klant { position: absolute; right: 16px; bottom: 16px; padding: 7px 14px; border-radius: var(--r-pil); background: rgba(0,38,64,.55); color: #fff; font-size: .82rem; backdrop-filter: blur(8px); }

/* prijsrail (voertuigen met vanaf-prijs) */
.rail { margin-top: clamp(28px, 4vw, 48px); }
.rail-kop { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 12px; font-size: .95rem; color: var(--grijs); }
.rail-kop b { color: var(--inkt); }
.rail-kop a { display: inline-flex; align-items: center; gap: 6px; color: var(--cyaan-tekst); font-weight: 600; text-decoration: none; white-space: nowrap; }
.rail-rij { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.rail-v { position: relative; display: grid; grid-template-rows: auto auto auto; padding: 10px 12px 14px; background: var(--kaart); border: 1px solid var(--lijn); border-radius: var(--r-kaart); text-decoration: none; box-shadow: var(--schaduw); transition: transform .2s, box-shadow .2s, border-color .2s; }
.rail-v:hover { transform: translateY(-4px); box-shadow: var(--schaduw-zwaar); border-color: #B9D6E6; }
.rail-img { display: grid; place-items: center; height: 92px; margin: -2px -4px 6px; border-radius: 16px; background: radial-gradient(80% 70% at 50% 100%, #fff, var(--mist)); }
.rail-img img { max-height: 80px; width: auto; object-fit: contain; }
.rail-naam { font-weight: 650; font-size: .98rem; }
.rail-prijs { display: flex; align-items: baseline; gap: 5px; margin-top: 2px; }
.rail-prijs small { color: var(--grijs); font-size: .8rem; }
.rail-prijs b { font-family: var(--f-kop); font-weight: 800; font-size: 1.8rem; letter-spacing: 0; color: var(--petrol); font-variant-numeric: tabular-nums; }
.rail-pijl { position: absolute; right: 18px; top: 18px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--mist); color: var(--petrol); transition: background .2s; }
.rail-pijl .ic { width: 16px; height: 16px; }
.rail-v:hover .rail-pijl { background: var(--cyaan); color: var(--inkt); }

/* ============ CONFIGURATOR ============ */
.cfg-sectie { position: relative; padding: clamp(56px, 8vw, 104px) 0; background:
  radial-gradient(40% 50% at 15% 10%, rgba(143,216,245,.28), transparent 70%),
  radial-gradient(40% 45% at 90% 85%, rgba(0,160,223,.14), transparent 70%),
  linear-gradient(180deg, var(--papier) 0%, #EAF2F6 45%, var(--papier) 100%); }
.cfg-kop { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 32px; align-items: end; margin-bottom: 30px; }
.cfg-kop-r { display: grid; gap: 16px; justify-items: start; }
.cfg-kop-r p { color: #1C3A50; max-width: 52ch; }
.btw-schakel { flex: none; display: inline-flex; padding: 4px; border-radius: var(--r-pil); background: var(--kaart); border: 1px solid var(--lijn); box-shadow: var(--schaduw); }
.btw-schakel button { border: 0; background: transparent; padding: 9px 16px; border-radius: var(--r-pil); font-weight: 600; font-size: .9rem; color: var(--grijs); transition: background .2s, color .2s; }
.btw-schakel .is-actief { background: var(--petrol); color: #fff; }

/* voertuigwisselaar als pilbalk (zoals busbestickerd.nl) */
.cfg-voertuigen { display: flex; gap: 4px; padding: 6px; border-radius: 20px; background: rgba(253,253,251,.85); border: 1px solid rgba(255,255,255,.9); box-shadow: var(--schaduw); backdrop-filter: blur(10px); width: 100%; }
.cfg-voertuigen .cfg-v { flex: 1 1 0; justify-content: center; }
.cfg-btw { display: inline-flex; align-items: center; gap: 8px; font-size: .88rem; font-weight: 650; color: var(--petrol); }
.cfg-btw .ic { color: var(--cyaan-tekst); }
.cfg-v { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 10px; border: 0; border-radius: 15px; background: transparent; font-weight: 650; font-size: .93rem; color: var(--inkt); white-space: nowrap; transition: background .25s, color .25s; }
.cfg-v:hover { background: var(--mist); }
.cfg-v.is-actief { background: linear-gradient(135deg, #003F66, #0A5F93); color: #fff; box-shadow: 0 8px 20px -10px rgba(0,63,102,.7); }
.cfg-v-img { width: 52px; height: 28px; object-fit: contain; }

/* vijf donkere pakketkaarten, het voertuig steekt erboven uit */
.pk-rij { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 30px; margin-top: 76px; }
.pk-kaart { position: relative; display: flex; flex-direction: column; padding: 84px 18px 18px; border-radius: 24px; color: #fff; cursor: pointer;
  background: repeating-radial-gradient(circle at 50% 16%, rgba(255,255,255,.055) 0 1px, transparent 1px 30px),
              radial-gradient(90% 60% at 50% 0%, rgba(0,160,223,.28), rgba(0,160,223,0) 70%),
              linear-gradient(170deg, #0A4F7A 0%, #003F66 45%, #002640 100%);
  border: 1px solid rgba(255,255,255,.08); box-shadow: 0 24px 40px -26px rgba(0,27,46,.7); transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s, border-color .3s; }
.pk-kaart:hover { transform: translateY(-4px); }
.pk-kaart.is-actief:hover { transform: translateY(-8px); }
.pk-kaart.is-actief { transform: translateY(-8px); border-color: #00A0DF; box-shadow: 0 0 0 2px #00A0DF, 0 0 0 8px rgba(0,160,223,.18), 0 34px 60px -24px rgba(0,63,102,.8);
  background: repeating-radial-gradient(circle at 50% 16%, rgba(255,255,255,.07) 0 1px, transparent 1px 30px),
              radial-gradient(90% 60% at 50% 0%, rgba(0,160,223,.5), rgba(0,160,223,0) 70%),
              linear-gradient(170deg, #0D6296 0%, #004A78 45%, #002B48 100%); }
.pk-beeld { position: absolute; left: -5%; right: -5%; top: -66px; height: 138px; pointer-events: none; }
/* bakwagen en vrachtwagen zijn één hoog voertuig en waren al groot genoeg: die houden hun oude maat */
.cfg:is([data-v="bakwagen"], [data-v="vrachtwagen"]) .pk-beeld { left: 5%; right: 5%; top: -50px; height: 112px; }
.cfg[data-v="bakwagen"] .pk-beeld { left: 0; right: 0; top: -62px; height: 130px; }
@media (min-width: 1360px) { .cfg-sectie > .wrap { width: min(100% - 2 * var(--gutter), 1400px); } .pk-rij { gap: 34px; } }
.pk-img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 16px 18px rgba(0,0,0,.45)); transition: opacity .3s, transform .45s cubic-bezier(.2,.8,.2,1); }
.pk-kaart:hover .pk-img, .pk-kaart.is-actief .pk-img { transform: translateY(-4px) scale(1.03); }
.pk-img.is-wissel { opacity: 0; transform: translateY(6px) scale(.97); }
.pk-balken { display: flex; align-items: flex-end; gap: 3px; height: 16px; margin-bottom: 10px; }
.pk-balken i { width: 4px; border-radius: 2px; background: rgba(255,255,255,.2); }
.pk-balken i:nth-child(1) { height: 5px; } .pk-balken i:nth-child(2) { height: 8px; } .pk-balken i:nth-child(3) { height: 11px; } .pk-balken i:nth-child(4) { height: 14px; } .pk-balken i:nth-child(5) { height: 16px; }
.pk-balken i.is-aan { background: var(--cyaan); }
.pk-kaart h3 { font-size: 1.9rem; line-height: 1; }
.pk-sub { margin-top: 6px; font-size: .84rem; line-height: 1.35; color: rgba(255,255,255,.72); min-height: 2.7em; }
.pk-lijst { list-style: none; margin: 14px 0 16px; padding: 0; display: grid; gap: 7px; align-content: start; flex: 1; }
.pk-lijst li { display: flex; gap: 8px; font-size: .84rem; line-height: 1.32; color: rgba(255,255,255,.9); }
.pk-lijst .ic { flex: none; width: 16px; height: 16px; margin-top: 1px; color: var(--cyaan); stroke-width: 2.4; }
.pk-voet { display: grid; gap: 12px; padding-top: 14px; border-top: 1px dashed rgba(255,255,255,.18); }
.pk-prijsblok { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 8px; }
.pk-prijsblok small { width: 100%; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.pk-prijs { font-family: var(--f-kop); font-weight: 800; font-size: 2.3rem; line-height: 1; font-variant-numeric: tabular-nums; }
.pk-prijs.is-aanvraag { font-size: 1.5rem; line-height: 1.53; }
.pk-prijsblok span { font-size: .76rem; color: rgba(255,255,255,.6); }
.pk-kies { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 42px; border: 0; border-radius: var(--r-pil); font-weight: 700; font-size: .9rem;
  color: var(--inkt); background: rgba(255,255,255,.92); transition: background .2s, transform .2s; }
.pk-kies .ic { width: 16px; height: 16px; stroke-width: 2.4; }
.pk-kies:hover { transform: translateY(-1px); background: #fff; }
.pk-kaart.is-actief .pk-kies { background: linear-gradient(110deg, #00A0DF, #45CBF7); }
/* hover = zelfde blauwe rand en knop als de gekozen kaart (alleen op apparaten met muis) */
@media (hover: hover) {
  .pk-kaart:hover { border-color: #00A0DF; box-shadow: 0 0 0 2px #00A0DF, 0 0 0 8px rgba(0,160,223,.18), 0 34px 60px -24px rgba(0,63,102,.8); }
  .pk-kaart:hover .pk-kies { background: linear-gradient(110deg, #00A0DF, #45CBF7); }
  /* hover je een andere kaart, dan is alleen die blauw: de gekozen kaart valt zolang terug naar normaal */
  .pk-rij:has(.pk-kaart:hover) .pk-kaart.is-actief:not(:hover) { border-color: rgba(255,255,255,.08); box-shadow: 0 24px 40px -26px rgba(0,27,46,.7);
    background: repeating-radial-gradient(circle at 50% 16%, rgba(255,255,255,.055) 0 1px, transparent 1px 30px),
                radial-gradient(90% 60% at 50% 0%, rgba(0,160,223,.28), rgba(0,160,223,0) 70%),
                linear-gradient(170deg, #0A4F7A 0%, #003F66 45%, #002640 100%); }
  .pk-rij:has(.pk-kaart:hover) .pk-kaart.is-actief:not(:hover) .pk-kies { background: rgba(255,255,255,.92); }
}
@media (hover: hover) and (min-width: 901px) {
  .pk-kaart:hover { transform: translateY(-8px); }
  .pk-rij:has(.pk-kaart:hover) .pk-kaart.is-actief:not(:hover) { transform: none; }
  .pk-rij:has(.pk-kaart:hover) .pk-kaart.is-actief:not(:hover) .pk-img { transform: none; }
}
.cfg-onder { margin-top: 30px; }
.cfg-onder ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; }
.cfg-onder li { display: inline-flex; align-items: center; gap: 9px; padding: 9px 18px 9px 10px; border-radius: 999px; font-size: .92rem; font-weight: 600; color: var(--petrol);
  background: linear-gradient(135deg, rgba(143,216,245,.55), rgba(0,160,223,.24) 55%, rgba(0,63,102,.2)); border: 1px solid rgba(0,160,223,.4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 10px 24px -16px rgba(0,63,102,.55); backdrop-filter: blur(12px) saturate(1.3); -webkit-backdrop-filter: blur(12px) saturate(1.3); }
.cfg-onder li .ic { width: 24px; height: 24px; padding: 5px; border-radius: 50%; color: #fff; stroke-width: 2.6; background: linear-gradient(135deg, #00A0DF, #003F66); box-shadow: 0 3px 8px -3px rgba(0,63,102,.6); }

/* bon */
.bon-sectie { background: var(--papier); }
.bon-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 4.5vw, 64px); align-items: center; }
/* 'Geen meerwerk, geen toeslagen.' op één regel: de kop schaalt mee met de kolombreedte. */
@media (min-width: 600px) {
  .bon-tekst { container-type: inline-size; }
  .bon-tekst h2 { font-size: min(clamp(2.15rem, 4.3vw, 3.7rem), 7.5cqi); }
  .bon-r1 { white-space: nowrap; }
}
.bon-r2 { display: block; }
.niet-rood { color: #E0352B; font-weight: 800; }
.bon-tekst > p { margin-top: 18px; font-size: 1.08rem; color: #1C3A50; max-width: 54ch; }
.bon-tekst h3 { font-family: var(--f-tekst); font-size: .85rem; letter-spacing: .02em; color: var(--grijs); margin: 32px 0 10px; }
.doorhaal { text-decoration: none; position: relative; color: var(--grijs); white-space: nowrap; }
.doorhaal::after { content: ''; position: absolute; left: -4%; right: -4%; top: 50%; height: .34em; transform: translateY(-40%) rotate(-3deg);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M3 13 C 50 8, 110 6, 197 9' fill='none' stroke='%2300A0DF' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  clip-path: inset(0 100% 0 0); transition: clip-path .7s cubic-bezier(.6,.1,.2,1); }
.doorhaal:nth-of-type(2)::after { transition-delay: .35s; }
.is-zicht .doorhaal::after, .doorhaal.is-zicht::after { clip-path: inset(0 0 0 0); }
.niet-lijst { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.niet-lijst li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--lijn); }
.niet-lijst .ic { width: 28px; height: 28px; padding: 6px; border-radius: 50%; background: rgba(224,53,43,.1); color: #E0352B; stroke-width: 2.4; }
.bon-kolom { display: grid; justify-items: center; filter: drop-shadow(0 2px 3px rgba(6,35,58,.12)) drop-shadow(0 18px 26px rgba(6,35,58,.2)); } /* schaduw via de kolom: de bon zelf is gemaskeerd (kartelrand), daar valt box-shadow weg */
.bon { position: relative; width: min(100%, 390px); padding: 32px 26px 30px; background: linear-gradient(172deg, #FFFFFF 0%, #FAFAFA 45%, #EDEFF2 100%); color: var(--inkt); font-variant-numeric: tabular-nums; transform: rotate(1.6deg);
  box-shadow: var(--schaduw-zwaar);
  -webkit-mask: linear-gradient(#000 0 0) center / 100% calc(100% - 20px) no-repeat, conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 16px 10px repeat-x, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 16px 10px repeat-x;
  mask: linear-gradient(#000 0 0) center / 100% calc(100% - 20px) no-repeat, conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 16px 10px repeat-x, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 16px 10px repeat-x; }
.bon-kop { text-align: center; padding-bottom: 14px; border-bottom: 1.5px dashed var(--lijn); }
.bon-logo { width: 200px; margin: 0 auto 6px; }
.bon-kop p { font-size: .78rem; color: var(--grijs); }
.bon-titel { margin: 14px 0 8px; font-weight: 800; font-family: var(--f-kop); text-transform: uppercase; letter-spacing: 0; font-size: 1.35rem; }
.bon-regels p, .bon-som p { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: .94rem; }
.bon-regels p span:last-child { color: var(--grijs); }
.bon-regels .bon-nul span:last-child { color: var(--cyaan-tekst); font-weight: 700; }
.bon-som { border-top: 1.5px dashed var(--lijn); margin-top: 8px; padding-top: 8px; }
.bon-som p { color: var(--grijs); }
.bon-som .bon-totaal { color: var(--inkt); font-weight: 650; align-items: baseline; padding-top: 10px; }
.bon-totaal b { font-family: var(--f-kop); font-weight: 800; font-size: 2.1rem; letter-spacing: 0; }
.bon-voet { min-height: 92px; margin: 14px 0 0 128px; display: flex; align-items: center; justify-content: flex-end; text-align: right; font-size: .86rem; font-weight: 600; color: var(--petrol); }
.stempel { position: absolute; left: 22px; bottom: 26px; width: 104px; height: 104px; display: grid; place-items: center; border-radius: 50%;
  border: 3px solid rgba(0,119,168,.85); box-shadow: inset 0 0 0 4px #FFFEFA, inset 0 0 0 6px rgba(0,119,168,.7);
  color: rgba(0,119,168,.9); font-family: var(--f-kop); font-weight: 800; font-size: 1.15rem; text-transform: uppercase; text-align: center; line-height: 1.05; letter-spacing: .02em;
  transform: rotate(-16deg); mix-blend-mode: multiply; opacity: 0; }
.is-zicht .stempel { animation: stempel .5s .4s cubic-bezier(.3,1.6,.5,1) forwards; }
@keyframes stempel { from { opacity: 0; transform: rotate(-16deg) scale(1.8); } to { opacity: .92; transform: rotate(-16deg) scale(1); } }
.bon-uitleg { margin-top: 18px; font-size: .86rem; color: var(--grijs); }

/* prijslijst-matrix */
.mx-sectie { background: var(--mist); }
.mx-kop { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 32px; align-items: end; margin-bottom: 32px; }
.mx-kop p { color: var(--grijs); }
.mx-wrap { overflow-x: auto; border-radius: 26px; background: var(--kaart); border: 1px solid var(--lijn); box-shadow: var(--schaduw); }
.mx { width: 100%; border-collapse: collapse; min-width: 780px; font-variant-numeric: tabular-nums; }
.mx th, .mx td { padding: 6px; border-bottom: 1px solid #E6EDF1; }
.mx thead th { padding: 18px 8px 14px; font-family: var(--f-kop); font-weight: 800; text-transform: uppercase; font-size: 1.25rem; letter-spacing: 0; text-align: center; color: var(--petrol); }
.mx tbody tr:last-child th, .mx tbody tr:last-child td { border-bottom: 0; }
.mx tbody th { text-align: left; padding-left: 16px; position: sticky; left: 0; background: var(--kaart); z-index: 1; }
.mx tbody th a { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.mx-img { width: 64px; height: 38px; object-fit: contain; }
.mx tbody th span { display: grid; font-weight: 650; line-height: 1.2; }
.mx tbody th small { font-weight: 450; color: var(--grijs); font-size: .78rem; }
.mx-cel { width: 100%; min-height: 56px; border: 0; border-radius: 14px; background: transparent; transition: background .2s, color .2s; }
.mx-cel b { font-family: var(--f-kop); font-weight: 800; font-size: 1.5rem; letter-spacing: 0; color: var(--petrol); }
.mx-cel:hover { background: var(--mist); }
.mx-cel.is-actief { background: var(--cyaan); }
.mx-cel.is-actief b { color: var(--inkt); }
.op-aanvraag { font-size: .85rem; color: var(--grijs); }

/* werkwijze */
.ww-sectie { background: var(--kaart); }
.ww-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 96px); }
.ww-tekst > p { margin-top: 18px; color: #1C3A50; max-width: 48ch; }
.ww-foto { margin-top: 32px; border-radius: var(--r-beeld); overflow: hidden; aspect-ratio: 5 / 4;
  clip-path: polygon(var(--schuin) 0, calc(100% - var(--schuin)) 0, 100% var(--schuin), 100% 100%, 0 100%, 0 var(--schuin)); }
.ww-foto img { width: 100%; height: 100%; object-fit: cover; }
.ww-lijst { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 0; align-content: center; }
.ww-lijst::before, .ww-lijst::after { content: ''; position: absolute; left: 31px; top: 40px; bottom: 60px; width: 2px; background: var(--lijn); }
.ww-lijst::after { background: var(--v-merk); transform-origin: top; transform: scaleY(var(--ww, 0)); transition: transform .3s linear; }
.ww-stap { position: relative; z-index: 1; display: grid; grid-template-columns: 64px 1fr; gap: 22px; padding: 22px 0; }
.ww-nr { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; background: var(--kaart); border: 2px solid var(--lijn); font-family: var(--f-kop); font-weight: 800; font-size: 1.9rem; color: var(--petrol); transition: background .3s, border-color .3s, color .3s; }
.ww-stap.is-aan .ww-nr { background: var(--petrol); border-color: var(--petrol); color: #fff; }
.ww-stap h3 { font-size: 1.3rem; margin-top: 8px; }
.ww-stap p { margin-top: 8px; color: #1C3A50; }
.ww-stap .ww-tijd { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 6px 12px; border-radius: var(--r-pil); background: var(--mist); font-size: .86rem; font-weight: 600; color: var(--petrol); }

/* projecten */
.pr-raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 240px; gap: 12px; }
.pr-tegel { position: relative; display: block; border-radius: var(--r-kaart); overflow: hidden; text-decoration: none; background: var(--mist); }
.pr-tegel.pr-groot { grid-column: span 2; grid-row: span 2; border-radius: var(--r-beeld); }
@media (min-width: 901px) { .pr-raster > .pr-tegel:nth-child(n+6) { display: none; } }
.pr-tegel img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.pr-tegel:hover img { transform: scale(1.03); }
.pr-info { position: absolute; z-index: 2; left: 12px; bottom: 12px; right: 56px; display: grid; padding: 9px 14px; border-radius: 16px; background: rgba(253,253,251,.9); backdrop-filter: blur(10px); line-height: 1.25; }
.pr-info b { font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-info small { color: var(--grijs); font-size: .78rem; }
.pr-pijl { position: absolute; z-index: 2; right: 12px; bottom: 14px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--cyaan); color: var(--inkt); }
.pr-pijl .ic { width: 18px; height: 18px; }

/* reviews: diepblauwe mesh, twee kruisende rijen glazen kaarten, 3D-rakel tussen zwevende objecten (opbouw zoals Babylon) */
.rv-sectie { position: relative; isolation: isolate; overflow: hidden; color: #fff; padding: clamp(72px, 9vw, 120px) 0 clamp(56px, 7vw, 88px);
  --m1: rgba(0,160,223,.42); --m2: rgba(69,203,247,.26);
  background: radial-gradient(60% 70% at 8% 0%, rgba(0,160,223,.45) 0%, rgba(0,160,223,0) 62%),
              radial-gradient(55% 65% at 95% 25%, rgba(10,95,147,.75) 0%, rgba(10,95,147,0) 60%),
              radial-gradient(70% 60% at 45% 115%, rgba(0,160,223,.4) 0%, rgba(0,160,223,0) 62%),
              linear-gradient(160deg, #002640 0%, #003F66 46%, #001B2E 100%); }
.rv-achter { position: absolute; inset: -4%; z-index: -1; pointer-events: none; }
.rv-achter::after { content: ''; position: absolute; inset: 0; background: radial-gradient(55% 45% at 50% 55%, rgba(0,27,46,.55), rgba(0,27,46,0) 70%); }
.rv-obj { position: absolute; width: var(--w); opacity: var(--o, .5); filter: blur(var(--b, 2px)) drop-shadow(0 22px 30px rgba(0,0,0,.45));
  translate: calc(var(--mx, 0) * var(--diepte, 10px)) calc(var(--my, 0) * var(--diepte, 10px)); transition: translate .6s cubic-bezier(.2,.8,.2,1);
  animation: zweef var(--d, 18s) ease-in-out infinite; animation-delay: var(--dl, 0s); will-change: transform; }
@keyframes zweef {
  0%   { transform: translate3d(0, 0, 0) rotate(var(--r, 0deg)); }
  25%  { transform: translate3d(calc(var(--tx, 2vw) * .45), calc(var(--ty, 3vh) * -1), 0) rotate(calc(var(--r, 0deg) + var(--dr, 8deg) * .45)); }
  50%  { transform: translate3d(var(--tx, 2vw), calc(var(--ty, 3vh) * -.25), 0) rotate(calc(var(--r, 0deg) + var(--dr, 8deg))); }
  75%  { transform: translate3d(calc(var(--tx, 2vw) * .3), calc(var(--ty, 3vh) * .8), 0) rotate(calc(var(--r, 0deg) + var(--dr, 8deg) * .3)); }
  100% { transform: translate3d(0, 0, 0) rotate(var(--r, 0deg)); } }
.rv-obj.o1 { --w: clamp(84px, 8vw, 132px); --o: .55; --b: 3px; --r: -14deg; --tx: 2vw; --ty: 3vh; --dr: 10deg; --d: 20s; --dl: -3s; --diepte: 10px; left: 38%; top: 3%; }
.rv-obj.o2 { --w: clamp(96px, 10vw, 160px); --o: .75; --b: 1.5px; --r: 10deg; --tx: -2vw; --ty: 2.6vh; --dr: -12deg; --d: 17s; --dl: -9s; --diepte: 20px; right: 2%; bottom: 14%; }
.rv-obj.o3 { --w: clamp(64px, 6vw, 100px); --o: .45; --b: 4px; --r: -8deg; --tx: 2.8vw; --ty: 3.6vh; --dr: 16deg; --d: 21s; --dl: -6s; --diepte: 8px; left: 1%; top: 46%; }
.rv-obj.o4 { --w: clamp(96px, 9vw, 150px); --o: .7; --b: 1px; --r: 8deg; --tx: -2.4vw; --ty: 3vh; --dr: -9deg; --d: 16s; --dl: -14s; --diepte: 18px; right: 30%; bottom: 2%; }
.rv-obj.o5 { --w: clamp(70px, 7vw, 116px); --o: .6; --b: 2px; --r: -16deg; --tx: 2vw; --ty: 4vh; --dr: 18deg; --d: 19s; --dl: -2s; --diepte: 12px; left: 6%; bottom: 4%; }
.rv-obj.o6 { --w: clamp(84px, 8vw, 130px); --o: .4; --b: 5px; --r: 4deg; --tx: -3vw; --ty: 2.4vh; --dr: -10deg; --d: 23s; --dl: -18s; --diepte: 6px; left: 60%; top: 40%; }
.rv-obj.o7 { --w: clamp(56px, 5vw, 86px); --o: .55; --b: 3px; --r: 6deg; --tx: 3vw; --ty: 3.2vh; --dr: 13deg; --d: 18s; --dl: -11s; --diepte: 10px; right: 6%; top: 8%; }
.rv-obj.o8 { --w: clamp(64px, 6vw, 100px); --o: .5; --b: 2.5px; --r: -24deg; --tx: -2vw; --ty: 3vh; --dr: 12deg; --d: 15s; --dl: -7s; --diepte: 14px; left: 26%; top: 52%; }
.rv-obj.o9 { --w: clamp(60px, 6vw, 96px); --o: .38; --b: 6px; --r: 30deg; --tx: 2vw; --ty: 2vh; --dr: -20deg; --d: 25s; --dl: -20s; --diepte: 5px; left: 14%; top: 6%; }

.rv-kop { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px 48px; align-items: center; margin-bottom: clamp(36px, 5vw, 64px); }
.rv-sectie .kicker { color: rgba(255,255,255,.72); }
.rv-tekst h2 { max-width: 16ch; }
.rv-tekst .hl { color: #fff; }
.rv-score { display: flex; align-items: center; gap: 18px; margin-top: 22px; }
.rv-cijfer { font-family: var(--f-kop); font-weight: 800; font-size: clamp(4.6rem, 8vw, 7rem); line-height: .85; color: #fff; font-variant-numeric: tabular-nums;
  text-shadow: 0 10px 40px rgba(0,160,223,.45); }
.rv-score p { margin-top: 6px; color: rgba(255,255,255,.75); font-size: .95rem; }
.rv-score .sterren .ic { width: 20px; height: 20px; }
.rv-plek { display: grid; place-items: center; min-height: 260px; }

/* 3D-vinylrakel (naar het Avery Dennison-model, met ons logo) — signatuur in de reviews */
.rk3d { --paars: #3F3C9F; --paars-d: #2B2878; --paars-l: #5B57C2; position: relative; width: clamp(230px, 22vw, 330px); aspect-ratio: 1.32; perspective: 1100px;
  filter: drop-shadow(0 34px 40px rgba(0,0,0,.5)); animation: zweef 14s ease-in-out infinite; --tx: -1vw; --ty: 2vh; --dr: 0deg; }
.rk-rot { position: absolute; inset: 0; transform-style: preserve-3d; animation: rk-wieg 9s ease-in-out infinite alternate; }
@keyframes rk-wieg { from { transform: rotateX(16deg) rotateZ(-14deg) rotateY(-32deg); } to { transform: rotateX(10deg) rotateZ(-10deg) rotateY(28deg); } }
.rk-laag, .rk-vlak { position: absolute; inset: 0; border-radius: 7% 7% 4% 4% / 9% 9% 5% 5%; }
.rk-laag { transform: translateZ(var(--z)); background: linear-gradient(180deg, var(--paars-d) 0%, #232163 72%, #1A1946 72%, #141336 100%); }
.rk-vlak { overflow: hidden; backface-visibility: hidden;
  background: repeating-linear-gradient(100deg, rgba(255,255,255,.035) 0 1px, rgba(255,255,255,0) 1px 4px),
              radial-gradient(80% 70% at 30% 15%, rgba(255,255,255,.22), rgba(255,255,255,0) 60%),
              linear-gradient(165deg, var(--paars-l) 0%, var(--paars) 45%, var(--paars-d) 100%);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.12), inset 0 -2px 6px rgba(0,0,0,.35); }
.rk-voor { transform: translateZ(6px); }
.rk-achter { transform: rotateY(180deg) translateZ(6px); }
/* verzonken vlak met ons logo */
.rk-label { position: absolute; left: 9%; right: 9%; top: 11%; height: 21%; display: flex; align-items: center; justify-content: center; padding: 0 6%; border-radius: 10px;
  background: linear-gradient(180deg, rgba(0,0,0,.14), rgba(255,255,255,.05)); box-shadow: inset 0 2px 4px rgba(0,0,0,.4), inset 0 -1px 0 rgba(255,255,255,.18); }
.rk-logo { display: block; width: 100%; height: auto; color: #161A4F; filter: drop-shadow(-.6px -.6px 0 rgba(255,255,255,.32)) drop-shadow(.9px 1.1px 0 rgba(0,0,0,.5)) drop-shadow(0 2px 2px rgba(0,0,0,.18)); }
.rk-logo { display: block; width: 100%; height: auto; color: #161A4F; filter: drop-shadow(-.6px -.6px 0 rgba(255,255,255,.32)) drop-shadow(.9px 1.1px 0 rgba(0,0,0,.5)) drop-shadow(0 2px 2px rgba(0,0,0,.18)); }
/* twee bolle grip-ribbels */
.rk-rib { position: absolute; left: 7%; right: 7%; height: 6.5%; border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.32) 0%, var(--paars-l) 30%, var(--paars) 60%, var(--paars-d) 100%);
  box-shadow: 0 3px 5px rgba(0,0,0,.4), inset 0 1px 1px rgba(255,255,255,.35); }
.rk-rib-1 { top: 40%; } .rk-rib-2 { top: 55%; }
/* viltstrip onderaan */
.rk-vilt { position: absolute; left: 0; right: 0; bottom: 0; height: 27%;
  background: radial-gradient(circle at 20% 30%, rgba(255,255,255,.07) 0 1px, transparent 1.5px) 0 0 / 5px 5px,
              radial-gradient(circle at 70% 60%, rgba(0,0,0,.35) 0 1px, transparent 1.5px) 0 0 / 4px 4px,
              linear-gradient(180deg, #2A2866 0%, #22205A 40%, #1B1A49 100%);
  box-shadow: inset 0 3px 4px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08); }
.rk-voor::after { content: ''; position: absolute; inset: -30% auto -30% -60%; width: 34%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent); transform: skewX(-18deg); animation: glans 5s ease-in-out infinite; }
.rk-schaduw { position: absolute; left: 14%; right: 14%; bottom: -18%; height: 12%; border-radius: 50%; background: radial-gradient(closest-side, rgba(91,87,194,.55), transparent); filter: blur(7px); }

/* twee rijen die tegen elkaar in lopen */
.rv-rijen { position: relative; z-index: 1; display: grid; gap: 16px; }
.rv-rij { overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.rv-spoor { display: flex; width: max-content; animation: rv-links 64s linear infinite; }
.rv-rij.rechts .rv-spoor { animation-name: rv-rechts; animation-duration: 76s; }
.rv-rij:hover .rv-spoor, .rv-rij:focus-within .rv-spoor { animation-play-state: paused; }
@keyframes rv-links { to { transform: translateX(-50%); } }
@keyframes rv-rechts { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.rv-kaart { flex: none; width: 380px; margin: 0 16px 0 0; padding: 22px 24px; border-radius: var(--r-glas); display: flex; flex-direction: column; gap: 14px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 24px 50px -30px rgba(0,0,0,.6); transition: transform .35s cubic-bezier(.2,.8,.2,1), background .35s; }
.rv-kaart:hover { transform: translateY(-4px); background: rgba(255,255,255,.12); }
.rv-boven { display: flex; justify-content: space-between; align-items: center; }
.rv-g { font-size: .76rem; font-weight: 700; color: var(--lucht); letter-spacing: .02em; }
.rv-kaart blockquote { margin: 0; font-size: .98rem; line-height: 1.55; color: rgba(255,255,255,.9); }
.rv-kaart figcaption { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.rv-ini { width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .85rem; background: linear-gradient(135deg, #00A0DF, #0A5F93); border: 1px solid rgba(255,255,255,.25); }
.rv-kaart figcaption b { text-transform: capitalize; font-size: .95rem; }
.rv-sectie .klanten { position: relative; z-index: 1; margin-top: clamp(40px, 5vw, 64px); border-top-color: rgba(255,255,255,.12); }
.rv-sectie .klanten p { color: rgba(255,255,255,.6); }
.rv-sectie .klanten-rij img { filter: brightness(0) invert(1); opacity: .55; }

.klanten { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--lijn); }
.klanten p { font-size: .86rem; color: var(--grijs); font-weight: 600; margin-bottom: 14px; }
.klanten-rij { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 18px; align-items: center; }
.klanten-rij img { width: 100%; height: 44px; object-fit: contain; opacity: .55; }

/* diensten */
.dn-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(24px, 4vw, 64px); align-items: stretch; }
.dn-groot { position: relative; display: block; border-radius: var(--r-beeld); overflow: hidden; min-height: 480px; text-decoration: none; color: #fff;
  clip-path: polygon(var(--schuin) 0, calc(100% - var(--schuin)) 0, 100% var(--schuin), 100% 100%, 0 100%, 0 var(--schuin)); }
.dn-groot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.dn-groot:hover img { transform: scale(1.03); }
.dn-groot::after { content: ''; position: absolute; inset: 0; background: var(--v-foto); }
.dn-groot-tekst { position: absolute; left: 28px; right: 28px; bottom: 26px; z-index: 1; display: grid; gap: 6px; }
.dn-groot-tekst b { font-family: var(--f-kop); font-weight: 800; text-transform: uppercase; font-size: 2.2rem; line-height: 1; letter-spacing: 0; }
.dn-groot-tekst .link-pijl { color: var(--lucht); margin-top: 6px; }
.dn-lijst > p { margin: 16px 0 22px; color: #1C3A50; }
.dn-rij { display: flex; align-items: center; gap: 16px; padding: 12px 8px 12px 0; border-top: 1px solid var(--lijn); text-decoration: none; transition: padding .2s; }
.dn-rij:hover { padding-left: 8px; }
.dn-thumb { flex: none; width: 76px; height: 58px; border-radius: 14px; overflow: hidden; }
.dn-thumb img { width: 100%; height: 100%; object-fit: cover; }
.dn-rij > span:nth-child(2) { flex: 1; display: grid; }
.dn-rij b { font-size: 1.04rem; } .dn-rij small { color: var(--grijs); }
.dn-rij > .ic { color: var(--cyaan-tekst); }

/* over */
.over-sectie { background: var(--kaart); }
.over-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 6vw, 96px); align-items: center; }
/* persoon in een kaart, hoofd steekt erboven uit (zoals Daktrots) */
.om { position: relative; height: clamp(440px, 46vw, 600px); }
.om-kaart { position: absolute; left: 0; right: 0; bottom: 0; height: 74%; overflow: hidden; border-radius: var(--r-beeld);
  clip-path: polygon(var(--schuin) 0, calc(100% - var(--schuin)) 0, 100% var(--schuin), 100% 100%, 0 100%, 0 var(--schuin));
  background: radial-gradient(70% 60% at 15% 100%, rgba(10,95,147,.55), rgba(10,95,147,0) 70%),
              radial-gradient(60% 60% at 90% 0%, rgba(160,228,252,.7), rgba(160,228,252,0) 65%),
              linear-gradient(160deg, #6AD5FA 0%, #00A0DF 48%, #0A72AE 100%); }
.om-merk { position: absolute; right: -40px; bottom: -50px; width: 280px; height: 280px; color: rgba(255,255,255,.14); }
.om-merk svg { width: 100%; height: 100%; }
.strepen-om { left: -20px; top: -10px; width: 200px; height: 200px; opacity: .35; }
.strepen-om .s2 { fill: #fff; }
.om-mens { position: absolute; left: 50%; bottom: 0; z-index: 1; height: 100%; width: auto; max-width: none; transform: translateX(-50%); filter: drop-shadow(0 24px 30px rgba(0,27,46,.35)); }
.om-chip { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: var(--r-pil); font-size: .86rem; font-weight: 700; white-space: nowrap;
  background: rgba(255,255,255,.16); color: #fff; border: 1px solid rgba(255,255,255,.3); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: 0 14px 30px -14px rgba(0,27,46,.6); animation: dobber 5s ease-in-out infinite alternate; }
.om-chip .ic { color: var(--lucht); width: 18px; height: 18px; }
.om-chip-1 { left: -14px; top: 40%; transform: rotate(-3deg); }
.om-chip-2 { right: -18px; top: 56%; transform: rotate(3deg); animation-delay: -1.6s; background: rgba(0,38,64,.88); border-color: rgba(255,255,255,.2); }
.om-chip-3 { left: 8%; bottom: 22px; transform: rotate(-2deg); animation-delay: -3s; }
.over-tekst .held-knoppen { margin-top: 26px; }
.over-foto-oud { border-radius: var(--r-beeld); overflow: hidden; aspect-ratio: 4 / 3.2;
  clip-path: polygon(var(--schuin) 0, calc(100% - var(--schuin)) 0, 100% var(--schuin), 100% 100%, 0 100%, 0 var(--schuin)); }
.over-foto img { width: 100%; height: 100%; object-fit: cover; }
.over-tekst p { margin: 18px 0 24px; color: #1C3A50; }
/* kerncijfers: één balk zoals bij btcenergy.nl (eerste vak donker), cijfers tellen op */
.over-feiten { position: relative; list-style: none; padding: 0; margin: 0 0 26px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: 18px; overflow: hidden;
  background: #FDFDFB; border: 1px solid rgba(6,35,58,.1); box-shadow: 0 20px 44px -30px rgba(6,35,58,.55); transform-origin: 50% 60%; }
.over-feiten li { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; min-height: 128px; padding: 20px 10px; text-align: center; }
.over-feiten li + li { border-left: 1px solid rgba(6,35,58,.1); }
.over-feiten b { display: flex; align-items: baseline; gap: .14em; font-family: var(--f-kop); font-weight: 800; font-size: clamp(2.1rem, 3.3vw, 2.9rem); line-height: .9; letter-spacing: 0; color: var(--inkt); white-space: nowrap; }
.over-feiten b i { font-style: normal; font-variant-numeric: tabular-nums; }
.over-feiten b small { font-size: .42em; text-transform: uppercase; letter-spacing: .04em; color: var(--cyaan-tekst); }
.over-feiten span { max-width: 16ch; font-size: .7rem; font-weight: 650; letter-spacing: .08em; line-height: 1.3; text-transform: uppercase; color: rgba(6,35,58,.7); }
.over-feiten .of-donker { background: radial-gradient(90% 90% at 100% 0%, rgba(0,160,223,.35), transparent 60%), linear-gradient(160deg, #0A4F7A, #003F66 55%, #06233A); }
.over-feiten .of-donker b { color: #45CBF7; } .over-feiten .of-donker b small { color: rgba(255,255,255,.75); } .over-feiten .of-donker span { color: rgba(255,255,255,.82); }
/* ontkreukelen: --kreuk (1 = verfrommeld, 0 = glad) wordt bij het scrollen gezet door site.js */
.over-feiten::after { content: ''; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply; opacity: calc(var(--kreuk, 0) * 1);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='160'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.007 0.012' numOctaves='2' seed='4'/%3E%3CfeDiffuseLighting lighting-color='%23fff' surfaceScale='6'%3E%3CfeDistantLight azimuth='225' elevation='38'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E") center / cover; }
.over-feiten.is-kreuk { filter: url(#kreukel); border-radius: calc(18px + var(--kreuk) * 48%);
  transform: perspective(700px) rotateX(calc(var(--kreuk) * 14deg)) rotate(calc(var(--kreuk) * -18deg)) scale(calc(1 - var(--kreuk) * .7), calc(1 - var(--kreuk) * .32)); }
.over-feiten.is-kreuk li { opacity: calc(1 - var(--kreuk) * .55); }

/* faq */
.faq-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); }
/* vragen als losse glazen kaarten met nummer; open = petrol rand + cyaan knop */
.faq-lijst { display: grid; gap: 10px; align-content: start; }
.faq-item { border-radius: 18px; background: rgba(253,253,251,.8); border: 1px solid rgba(6,35,58,.08); box-shadow: 0 10px 26px -22px rgba(6,35,58,.5); backdrop-filter: blur(8px); transition: border-color .25s, box-shadow .25s, background .25s; }
.faq-item:hover { border-color: rgba(0,160,223,.35); }
.faq-item[open] { background: #fff; border-color: rgba(0,160,223,.5); box-shadow: 0 0 0 3px rgba(0,160,223,.1), 0 18px 36px -24px rgba(0,63,102,.55); }
.faq-item summary { list-style: none; display: flex; align-items: center; gap: 14px; padding: 16px 16px 16px 18px; cursor: pointer; border-radius: 18px; }
.faq-item summary:focus { outline: none; } .faq-item summary:focus-visible { outline: 2px solid var(--cyaan); outline-offset: 2px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary em { flex: none; font-style: normal; font-family: var(--f-kop); font-weight: 800; font-size: 1.05rem; color: var(--cyaan-tekst); min-width: 1.6em; }
.faq-item summary b { flex: 1; font-weight: 650; font-size: 1.04rem; line-height: 1.35; }
.faq-item summary span { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--mist); color: var(--petrol); transition: transform .3s cubic-bezier(.2,.8,.2,1), background .25s, color .25s; }
.faq-item summary span .ic { width: 18px; height: 18px; stroke-width: 2.2; }
.faq-item[open] summary span { transform: rotate(45deg); background: linear-gradient(135deg, #00A0DF, #003F66); color: #fff; }
.faq-item p { padding: 0 22px 20px calc(18px + 1.6em * 1.05 + 14px); color: #1C3A50; line-height: 1.6; }

/* slot-cta (het enige donkere blok boven de footer) */
.slot { padding: 0 0 clamp(64px, 8vw, 104px); }
.slot-in { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 7fr) auto; gap: 32px; align-items: end; padding: clamp(36px, 5vw, 64px); border-radius: 34px; color: #fff;
  background: linear-gradient(125deg, #003F66 0%, #002640 32%, #0A5F93 58%, #003F66 80%, #00283F 100%); background-size: 240% 240%; animation: verloop-schuif 16s ease-in-out infinite alternate; }
@keyframes verloop-schuif { from { background-position: 0% 30%; } to { background-position: 100% 70%; } }
.slot-in::before { content: ''; position: absolute; inset: 0; background: radial-gradient(45% 80% at 85% 0%, rgba(0,160,223,.45), transparent 70%); }
.slot-merk { position: absolute; right: -40px; bottom: -70px; width: 360px; height: 360px; color: rgba(255,255,255,.05); }
.slot-tekst, .slot-knoppen { position: relative; }
.slot-tekst p { margin-top: 16px; color: #C9DCE7; max-width: 52ch; }
.slot-knoppen { display: flex; flex-wrap: wrap; gap: 12px; }

/* footer */
.voet { position: relative; overflow: hidden; contain: paint; background: var(--petrol-diep); color: #BFD3DF; padding: 72px 0 calc(28px + env(safe-area-inset-bottom)); font-size: .95rem; }
.voet-watermerk { position: absolute; right: -60px; top: -40px; width: 420px; height: 420px; color: rgba(255,255,255,.035); }
.voet-top { position: relative; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; }
.voet .logo { width: 230px; }
.voet-merk p { margin-top: 18px; max-width: 34ch; }
.voet-social { display: flex; gap: 8px; margin-top: 20px; }
.voet-social a { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.08); color: #fff; }
.voet h3 { font-family: var(--f-tekst); font-size: .82rem; letter-spacing: .03em; color: #fff; margin-bottom: 14px; }
.voet ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.voet a { text-decoration: none; }
.voet a:hover { color: #fff; }
.voet-prijzen li { display: flex; justify-content: space-between; gap: 10px; }
.voet-prijzen span { color: var(--lucht); font-variant-numeric: tabular-nums; }
.voet-contact a { display: flex; gap: 10px; align-items: flex-start; }
.voet-contact .ic { color: var(--cyaan); margin-top: 2px; }
.voet-onder { position: relative; display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 56px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1); font-size: .84rem; color: #8FA9B9; }
.voet-onder span:first-child { margin-right: auto; }

/* actiebalk (mobiel) */
.actiebalk { display: none; }

/* aanvraagvenster: donker glas, velden met plaatsaanduiding, verlooplijn en verloopknop */
.lade { margin: auto; width: min(660px, calc(100% - 24px)); max-width: none; max-height: calc(100dvh - 24px); padding: 0; border-radius: 30px; overflow: auto; color: #fff;
  border: 1px solid rgba(255,255,255,.14); box-shadow: 0 40px 100px -30px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.12);
  background: radial-gradient(70% 50% at 100% 100%, rgba(0,160,223,.28), rgba(0,160,223,0) 70%),
              radial-gradient(60% 50% at 0% 0%, rgba(69,203,247,.16), rgba(69,203,247,0) 70%),
              linear-gradient(165deg, rgba(0,47,77,.97) 0%, rgba(0,32,54,.97) 60%, rgba(0,27,46,.98) 100%);
  backdrop-filter: blur(20px); scrollbar-width: thin; }
.lade::backdrop { background: rgba(0,20,36,.55); backdrop-filter: blur(10px) saturate(1.2); }
.lade[open] { animation: lade-in .4s cubic-bezier(.2,.8,.2,1); }
@keyframes lade-in { from { transform: translateY(24px) scale(.98); opacity: 0; } }
.lade-form { position: relative; padding: clamp(26px, 5vw, 44px) clamp(18px, 5vw, 44px) clamp(22px, 4vw, 34px); display: flex; flex-direction: column; gap: 18px; }
.lade-lijn { position: absolute; left: 28px; right: 28px; top: 0; height: 3px; border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, #00A0DF, #8FD8F5, #0A72AE, #00A0DF); background-size: 200% 100%; animation: lijn-glans 6s linear infinite; }
@keyframes lijn-glans { to { background-position: 200% 0; } }
.lade-dicht { position: absolute; top: 18px; right: 18px; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.25); transition: background .2s, transform .2s; }
.lade-dicht:hover { background: rgba(255,255,255,.16); transform: rotate(90deg); }
.lade-kop { padding-right: 56px; }
.lade-kop h2 { font-size: clamp(2.1rem, 5vw, 3rem); }
.lade-kop p { margin-top: 8px; color: rgba(255,255,255,.72); }
.lade-keuze { display: flex; align-items: center; gap: 14px; padding: 10px 16px 10px 10px; border-radius: 20px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); }
.lade-keuze img { width: 120px; height: 58px; object-fit: contain; filter: drop-shadow(0 8px 12px rgba(0,0,0,.35)); }
.lade-keuze p { font-weight: 650; }
.lade-prijs { margin-top: 2px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.lade-prijs b { font-family: var(--f-kop); font-weight: 800; font-size: 1.8rem; color: var(--lucht); line-height: 1; }
.lade-prijs span { font-size: .8rem; color: rgba(255,255,255,.65); font-weight: 500; }
.lade-velden { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.veld { display: grid; gap: 8px; min-width: 0; }
.veld-breed { grid-column: 1 / -1; }
.veld-label { font-size: .88rem; font-weight: 600; color: rgba(255,255,255,.85); }
.veld-label i { font-style: normal; color: rgba(255,255,255,.55); font-weight: 500; }
.lade .veld input, .lade .veld select { width: 100%; height: 58px; padding: 0 18px; border-radius: 16px; font-size: 1.02rem; color: #fff; font-weight: 500;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.17); transition: border-color .2s, background .2s, box-shadow .2s; appearance: none; -webkit-appearance: none; }
.lade .veld input::placeholder { color: rgba(255,255,255,.55); }
.lade .veld input:hover, .lade .veld select:hover { background: rgba(255,255,255,.1); }
.lade .veld input:focus, .lade .veld select:focus { outline: none; border-color: var(--cyaan); background: rgba(255,255,255,.1); box-shadow: 0 0 0 4px rgba(0,160,223,.22); }
.lade .veld input:not(:placeholder-shown):valid { border-color: rgba(0,160,223,.55); }
.lade .veld select { padding-right: 48px; cursor: pointer;
  background: rgba(255,255,255,.07) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300A0DF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center / 22px; }
.lade .veld select option { color: var(--inkt); }
.veld-bestand { position: relative; display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 16px; border: 1.5px dashed rgba(255,255,255,.3); background: rgba(255,255,255,.04); cursor: pointer; transition: border-color .2s, background .2s; }
.veld-bestand:hover, .veld-bestand.is-sleep { border-color: var(--cyaan); background: rgba(0,160,223,.1); }
.veld-bestand .ic { width: 42px; height: 42px; padding: 10px; border-radius: 12px; background: rgba(0,160,223,.2); color: var(--lucht); }
.veld-bestand span { display: grid; min-width: 0; } .veld-bestand b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.veld-bestand small { color: rgba(255,255,255,.55); }
.veld-bestand input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.veld-bestand.heeft-bestand { border-style: solid; border-color: var(--cyaan); }
.lade-verstuur { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 10px; height: 64px; border: 0; border-radius: var(--r-pil);
  font-weight: 700; font-size: 1.12rem; color: #fff; background: linear-gradient(90deg, #0392CF 0%, #2BB8F0 45%, #0A72AE 100%); background-size: 180% 100%;
  box-shadow: 0 18px 40px -16px rgba(0,160,223,.8), inset 0 1px 0 rgba(255,255,255,.3); transition: background-position .6s, transform .2s; }
.lade-verstuur:hover { background-position: 100% 0; transform: translateY(-2px); }
.lade-verstuur::after { content: ''; position: absolute; inset: -20% auto -20% -40%; width: 30%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent); transform: skewX(-20deg); transition: transform .9s; }
.lade-verstuur:hover::after { transform: skewX(-20deg) translateX(520%); }
.lade-verstuur .ic { transition: transform .2s; } .lade-verstuur:hover .ic { transform: translateX(4px); }
.lade-klein { display: flex; gap: 10px; font-size: .84rem; color: rgba(255,255,255,.62); }
.lade-klein .ic { color: var(--lucht); margin-top: 2px; }
.lade-form.is-gelukt > :not(.lade-gelukt):not(.lade-lijn):not(.lade-dicht) { display: none; }
.lade-gelukt { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 6px 0 2px; }
.lade-gelukt[hidden] { display: none; }
.lade-gelukt > :not(.gv) { animation: gv-op .6s cubic-bezier(.2,.8,.2,1) both; }
.lade-gelukt > h2 { animation-delay: .75s; font-size: clamp(2rem, 5vw, 2.8rem); }
.gv-keuze { animation-delay: .85s !important; padding: 7px 16px; border-radius: var(--r-pil); background: rgba(0,160,223,.16); border: 1px solid rgba(0,160,223,.4); color: var(--lucht); font-weight: 700; font-size: .92rem; }
.gv-tekst { animation-delay: .95s !important; color: rgba(255,255,255,.8); max-width: 44ch; }
.gv-tekst a { color: var(--lucht); }
.gv-stappen { animation-delay: 1.05s !important; list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.gv-stappen li { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 7px; border-radius: var(--r-pil); background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); font-size: .86rem; font-weight: 600; }
.gv-stappen b { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--cyaan); color: var(--inkt); font-family: var(--f-kop); font-size: .9rem; }
.lade-gelukt .demo-noot { animation-delay: 1.15s !important; }
.lade-gelukt .knop { animation-delay: 1.2s !important; margin-top: 4px; }
@keyframes gv-op { from { opacity: 0; transform: translateY(14px); } }

/* bewegende vink: cirkel tekent zich, vult, vink tekent, ringen en deeltjes spatten weg */
.gv { position: relative; width: 108px; height: 108px; margin-top: 8px; }
.gv-svg { position: relative; z-index: 2; width: 100%; height: 100%; overflow: visible; animation: gv-pop .5s .55s cubic-bezier(.3,1.6,.5,1) both; }
.gv-cirkel { fill: rgba(0,160,223,0); stroke: var(--cyaan); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 227; stroke-dashoffset: 227; transform: rotate(-90deg); transform-origin: 50% 50%;
  animation: gv-teken .6s cubic-bezier(.65,0,.35,1) forwards, gv-vul .35s .55s ease forwards; }
.gv-vink { fill: none; stroke: var(--inkt); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 52; stroke-dashoffset: 52; animation: gv-teken .4s .7s cubic-bezier(.65,0,.35,1) forwards; }
@keyframes gv-teken { to { stroke-dashoffset: 0; } }
@keyframes gv-vul { to { fill: #00A0DF; } }
@keyframes gv-pop { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }
.gv-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(0,160,223,.7); opacity: 0; animation: gv-ring 1.2s .7s cubic-bezier(.2,.8,.2,1) forwards; }
.gv-ring-2 { border-color: rgba(143,216,245,.5); animation-delay: .9s; }
@keyframes gv-ring { 0% { opacity: .9; transform: scale(.9); } 100% { opacity: 0; transform: scale(2.1); } }
.gv-deeltje { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 2px; opacity: 0;
  background: var(--cyaan); transform: rotate(var(--h)) translateY(0); animation: gv-spat .9s .75s cubic-bezier(.15,.7,.3,1) forwards; }
.gv-deeltje[style*="--k:1"] { background: var(--lucht); width: 6px; height: 12px; border-radius: 3px; }
.gv-deeltje[style*="--k:2"] { background: #fff; width: 6px; height: 6px; border-radius: 50%; }
@keyframes gv-spat { 0% { opacity: 1; transform: rotate(var(--h)) translateY(-30px) scale(.4); } 70% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--h)) translateY(calc(var(--a) * -1)) scale(1); } }
.lade-gelukt:not([hidden]) .gv { animation: gv-zweef 3s 1.6s ease-in-out infinite alternate; }
@keyframes gv-zweef { from { transform: translateY(0); } to { transform: translateY(-5px); } }
.demo-noot { font-size: .82rem; padding: 8px 12px; border-radius: 10px; background: rgba(255,244,214,.12); color: #FFE7A3 !important; }

/* paginakop */
.pk { padding: clamp(28px, 4vw, 48px) 0 clamp(40px, 5vw, 64px); }
.pk-grid { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.pk:not(.pk-met-foto) .pk-grid { grid-template-columns: minmax(0, 1fr); max-width: 900px; }
.pk h1 { font-size: clamp(2.6rem, 5.6vw, 4.8rem); }
.pk-foto { border-radius: var(--r-beeld); overflow: hidden; aspect-ratio: 4 / 3.3;
  clip-path: polygon(var(--schuin) 0, calc(100% - var(--schuin)) 0, 100% var(--schuin), 100% 100%, 0 100%, 0 var(--schuin)); }
.pk-foto img { width: 100%; height: 100%; object-fit: cover; }
.pk-pakket { display: grid; place-items: center; padding: 20px; border-radius: var(--r-beeld); background: radial-gradient(80% 70% at 50% 90%, #fff, #DCEBF2); aspect-ratio: 4 / 3; }
.pk-pakket img { width: 100%; height: 100%; object-fit: contain; }
.pk-voorbeeld { margin-top: 18px; font-size: .92rem; color: var(--grijs); }
.pk-rail { margin-top: clamp(28px, 4vw, 48px); margin-bottom: 8px; }
.pk-rail .rail { margin-top: 0; }
.kruimel ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0 0 18px; font-size: .86rem; color: var(--grijs); }
.kruimel li + li::before { content: '/'; margin-right: 6px; color: #A9BAC5; }
.kruimel a { text-decoration: none; }
.kruimel a:hover { color: var(--inkt); }

/* lopende tekst */
.tekst-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(280px, 4fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.tekst-smal { max-width: 780px; }
.lopend h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); margin: 2em 0 .6em; overflow-wrap: break-word; hyphens: auto; }
.lopend h2:first-child { margin-top: 0; }
.lopend p, .lopend ul { max-width: 68ch; color: #1C3A50; overflow-wrap: break-word; }
.lopend p + p { margin-top: 1em; }
.lopend ul { padding-left: 1.2em; margin: 1em 0; }
.lopend li { margin: .35em 0; }
.lopend li::marker { color: var(--cyaan); }
.lopend-klein { font-size: .95rem; }
.lopend-klein h2 { font-size: 1.45rem; }
.inkort { position: sticky; top: 100px; padding: 26px; border-radius: var(--r-kaart); background: var(--kaart); border: 1px solid var(--lijn); box-shadow: var(--schaduw); }
.inkort h2 { font-size: 1.6rem; }
.inkort dl { margin: 16px 0 20px; display: grid; gap: 12px; }
.inkort dt { font-size: .78rem; font-weight: 700; color: var(--grijs); letter-spacing: .02em; }
.inkort dd { margin: 2px 0 0; font-weight: 550; }

/* projectenarchief */
.pa-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.pa-filters button { padding: 10px 18px; border-radius: var(--r-pil); border: 1px solid var(--lijn); background: var(--kaart); font-weight: 600; font-size: .92rem; }
.pa-filters .is-actief { background: var(--petrol); color: #fff; border-color: var(--petrol); }
.pa-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.pa-tegel { position: relative; display: block; padding: 0; border: 0; border-radius: var(--r-kaart); overflow: hidden; aspect-ratio: 4 / 4.6; background: var(--mist); text-align: left; }
.pa-tegel[hidden] { display: none; }
.pa-tegel img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.pa-tegel:hover img { transform: scale(1.03); }
.pa-tegel .pr-info { right: 12px; }
.pa-aantal { position: absolute; top: 12px; right: 12px; display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: var(--r-pil); background: rgba(0,27,46,.55); color: #fff; font-size: .8rem; backdrop-filter: blur(6px); }
.pa-aantal .ic { width: 15px; height: 15px; }
.lb { width: min(1100px, 100% - 24px); max-width: none; max-height: calc(100dvh - 24px); padding: 0; border: 0; border-radius: 26px; background: #0A1B28; color: #fff; overflow: hidden; }
.lb::backdrop { background: rgba(0,15,26,.8); backdrop-filter: blur(6px); }
.lb-beeld { position: relative; background: #000; }
.lb-beeld img { width: 100%; max-height: calc(100dvh - 140px); object-fit: contain; }
.lb-dicht { position: absolute; top: 12px; right: 12px; z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,.14); color: #fff; display: grid; place-items: center; backdrop-filter: blur(8px); }
.lb-vorige, .lb-volgende { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(255,255,255,.16); color: #fff; display: grid; place-items: center; backdrop-filter: blur(8px); }
.lb-vorige { left: 12px; } .lb-vorige .ic { transform: rotate(180deg); }
.lb-volgende { right: 12px; }
.lb-tekst { display: flex; align-items: center; gap: 4px 16px; flex-wrap: wrap; padding: 16px 20px; }
.lb-tekst b { font-family: var(--f-kop); font-weight: 800; text-transform: uppercase; font-size: 1.3rem; letter-spacing: 0; }
.lb-tekst small { color: #9FB5C2; margin-right: auto; }

/* over-ons, contact, andere voertuigen */
.over2-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.over2-foto { border-radius: var(--r-beeld); overflow: hidden; aspect-ratio: 1; }
.over2-foto img { width: 100%; height: 100%; object-fit: cover; }
.waarden-sectie { background: var(--mist); }
.waarden { list-style: none; padding: 0; margin: 32px 0 0; display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.3fr; gap: 12px; }
.waarden li { padding: 24px; border-radius: var(--r-kaart); background: var(--kaart); border: 1px solid var(--lijn); }
.waarden li:nth-child(2n) { margin-top: 32px; }
.waarden p { margin-top: 10px; color: #1C3A50; font-size: .95rem; }
.contact-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px; align-items: start; }
.contact-kaarten { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ck { display: flex; gap: 14px; align-items: center; padding: 22px; border-radius: var(--r-kaart); background: var(--kaart); border: 1px solid var(--lijn); text-decoration: none; transition: transform .2s, box-shadow .2s; }
.ck:hover { transform: translateY(-4px); box-shadow: var(--schaduw-zwaar); }
.ck .ic { width: 44px; height: 44px; padding: 10px; border-radius: 50%; background: var(--mist); color: var(--petrol); }
.ck span { display: grid; min-width: 0; } .ck small { color: var(--grijs); } .ck b { overflow-wrap: anywhere; }
.ck-wa .ic { background: #DDF6E6; color: #0B5B2E; }
.contact-kvk { grid-column: 1 / -1; font-size: .85rem; color: var(--grijs); }
.contact-cta { min-width: 0; padding: 30px; border-radius: var(--r-beeld); background: var(--v-nacht); color: #fff; display: grid; gap: 14px; justify-items: start; }
.contact-cta p { color: #C9DCE7; }
.contact-cta .knop-rand { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.5); }
.andere-v { padding-top: 0; }
.andere-v h2 { font-size: 1.9rem; margin-bottom: 16px; }
.andere-rij { display: flex; flex-wrap: wrap; gap: 8px; }
.andere-rij a { display: inline-flex; gap: 8px; padding: 12px 18px; border-radius: var(--r-pil); background: var(--kaart); border: 1px solid var(--lijn); text-decoration: none; font-weight: 600; }
.andere-rij span { color: var(--cyaan-tekst); }

/* binnenkomen */
.opkomst { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.opkomst.is-zicht { opacity: 1; transform: none; }


/* ============ HEADER LICHT + HERO (Daktrots-opbouw) ============ */
.kop-licht { position: fixed; left: 0; right: 0; top: 0; background: transparent; backdrop-filter: none; border-bottom-color: transparent; color: #fff; }
.kop-licht .kop-in { min-height: var(--kop-h); }
.kop-licht .logo .logo-woord { fill: #fff; transition: fill .25s; }
.kop-licht .kop-nav > a:hover, .kop-licht .kop-item > a:hover, .kop-licht .kop-nav .is-actief { background: rgba(255,255,255,.12); }
.kop-licht .kop-tel { background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); backdrop-filter: blur(10px); }
.kop-licht .kop-tel:hover { background: rgba(255,255,255,.2); }
.kop-licht .kop-menu { background: rgba(255,255,255,.14); color: #fff; }
.kop-licht.is-gescrold { background: rgba(0,38,64,.86); backdrop-filter: blur(16px) saturate(1.3); border-bottom-color: rgba(255,255,255,.08); box-shadow: 0 14px 30px -20px rgba(0,0,0,.6); }
.mega-in { color: var(--inkt); }

.hd { position: relative; isolation: isolate; overflow: hidden; color: #fff; background: var(--petrol-diep); padding-top: calc(var(--kop-h) + clamp(28px, 6vh, 72px)); }
.hd-foto { position: absolute; inset: 0; z-index: -2; }
.hd-foto img { width: 100%; height: 100%; object-fit: cover; }
.hd-verloop { position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(0,27,46,.94) 0%, rgba(0,27,46,.82) 34%, rgba(0,27,46,.42) 62%, rgba(0,27,46,.28) 100%),
              linear-gradient(0deg, rgba(0,160,223,.42) 0%, rgba(0,160,223,0) 42%),
              linear-gradient(180deg, rgba(0,27,46,.75) 0%, rgba(0,27,46,0) 22%); }
/* homepage-hero: oude foto onder een blauwe sluier (rechts het dichtst, links doorzichtig zodat rakel en wagen zichtbaar blijven),
   met daarover een wit naadloos geometrisch patroon (assets/patroon-wit.svg, tegel 120px) dat langzaam diagonaal schuift */
.hd-sluier { position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: linear-gradient(270deg, rgba(0,118,178,.92) 0%, rgba(0,108,168,.82) 30%, rgba(0,80,130,.6) 62%, rgba(0,50,85,.48) 100%),
              linear-gradient(0deg, rgba(0,160,223,.35) 0%, rgba(0,160,223,0) 35%); }
.hd-patroon .hd-foto { z-index: -3; }
.hd-motief { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; -webkit-mask-image: radial-gradient(130% 100% at 78% 38%, #000 35%, rgba(0,0,0,.4) 80%); mask-image: radial-gradient(130% 100% at 78% 38%, #000 35%, rgba(0,0,0,.4) 80%); }
.hd-motief i { position: absolute; top: -120px; left: -120px; right: 0; bottom: 0; background: url(/assets/patroon-wit.svg) 0 0 / 120px 120px; opacity: .17; animation: motief 40s linear infinite; will-change: transform; }
@keyframes motief { to { transform: translate3d(120px, 120px, 0); } }
.hd.is-uit .hd-motief i { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .hd-motief i { animation: none; } }
.hd-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(28px, 4vw, 64px); align-items: center; padding-bottom: clamp(40px, 7vh, 84px); }
.hd-pil { display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px 7px 8px; border-radius: var(--r-pil); background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); backdrop-filter: blur(10px); font-size: .86rem; font-weight: 600; }
.hd-pil svg { width: 22px; height: 22px; padding: 4px; border-radius: 6px; background: var(--cyaan); color: #fff; }
.hd-h1 { margin: 20px 0 16px; font-size: clamp(2.8rem, 4.7vw, 4.9rem); text-shadow: 0 2px 30px rgba(0,0,0,.25); }
.hd-h1 span { display: block; white-space: nowrap; }
.hd-h1 .hl { color: #fff; --hl: var(--cyaan); }
.hd-lead { font-size: clamp(1.05rem, 1.4vw, 1.22rem); line-height: 1.5; max-width: 46ch; color: rgba(255,255,255,.88); }
.hd-lead b { color: #fff; }
.hd-lead-kort { white-space: nowrap; max-width: none; }
.hd-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 24px 0 18px; }
.hd-chips li { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px 9px 11px; border-radius: var(--r-pil); background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); backdrop-filter: blur(10px); font-size: .9rem; font-weight: 600; }
.hd-chips .ic { color: var(--cyaan); width: 18px; height: 18px; }
.hd-google { display: inline-flex; align-items: center; gap: 8px; color: rgba(255,255,255,.85); text-decoration: none; font-size: .92rem; }
.hd-google b { color: #fff; font-family: var(--f-kop); font-weight: 800; font-size: 1.25rem; }
/* recensies als pil boven de kop (vervangt de oude 'werkplaats Rijswijk'-pil) */
.hd-pil.hd-google { padding: 6px 15px 6px 13px; gap: 8px; }
.hd-pil.hd-google .sterren svg { width: 15px; height: 15px; padding: 0; border-radius: 0; background: none; }
.hd-pil.hd-google b { font-size: 1.1rem; line-height: 1; }


/* subpagina's: dezelfde donkere hero als de homepage */
.hd-sub .hd-grid { grid-template-columns: minmax(0, 1fr); max-width: none; padding-bottom: clamp(48px, 8vh, 96px); }
.hd-sub.hd-met-rechts .hd-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
.hd-sub:not(.hd-met-rechts) .hd-tekst { max-width: 820px; }
.hd-h1-sub { font-size: clamp(2.6rem, 5.2vw, 4.8rem); max-width: 16ch; }
.hd .kruimel ol { color: rgba(255,255,255,.65); margin-bottom: 4px; }
.hd .kruimel li + li::before { color: rgba(255,255,255,.35); }
.hd .kruimel a:hover { color: #fff; }
.hd .held-knoppen { margin-top: 24px; }
.hd .knop-rand { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.55); }
.hd .knop-rand:hover { background: #fff; color: var(--inkt); }
.hd .hd-chips { margin-bottom: 0; }
.hd-glas { position: relative; padding: 26px; border-radius: 26px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); color: #fff;
  backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 30px 60px -30px rgba(0,0,0,.6); }
.hd-glas-kop { display: flex; align-items: center; gap: 10px; font-family: var(--f-kop); font-weight: 800; font-size: 1.6rem; text-transform: uppercase; }
.hd-glas-kop .ic { color: var(--cyaan); }
.hd-glas dl { margin: 16px 0 20px; display: grid; gap: 0; }
.hd-glas dl div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid rgba(255,255,255,.12); }
.hd-glas dt { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.6); padding-top: 2px; }
.hd-glas dd { margin: 0; font-weight: 600; }
.hd-voertuig { position: relative; display: grid; place-items: center; min-height: 320px; }
.hd-voertuig img { position: relative; z-index: 1; width: 100%; height: auto; filter: drop-shadow(0 30px 40px rgba(0,0,0,.5)); animation: zweef 14s ease-in-out infinite; --tx: 1vw; --ty: 1.6vh; --dr: 0deg; }
.hd-v-gloed { position: absolute; inset: 10% 5%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,160,223,.55), rgba(0,160,223,0)); filter: blur(10px); }
.hd-voertuig .zweef-1 { top: 6%; left: 4%; } .hd-voertuig .zweef-3 { bottom: 4%; right: 6%; }

/* keuzekaart rechts (zoals het Daktrots-formulier), met de prijzen erin */
.hk { position: relative; isolation: isolate; padding: 24px; border-radius: 28px; background: rgba(246,245,241,.97); color: var(--inkt); box-shadow: 0 30px 70px -24px rgba(0,0,0,.6), inset 0 1px 0 #fff; }
/* mesh: wazige blauwe bollen achter de tegels, drijven langzaam */
.hk::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; overflow: hidden;
  background: radial-gradient(42% 50% at 10% 6%, rgba(0,160,223,.7), transparent 72%), radial-gradient(38% 46% at 94% 18%, rgba(69,203,247,.75), transparent 72%),
              radial-gradient(44% 48% at 80% 98%, rgba(0,63,102,.5), transparent 72%), radial-gradient(36% 42% at 18% 92%, rgba(0,160,223,.6), transparent 72%),
              radial-gradient(30% 34% at 52% 50%, rgba(143,216,245,.55), transparent 72%);
  background-size: 140% 140%; filter: blur(18px); clip-path: inset(0 round 28px); animation: hk-mesh 16s ease-in-out infinite alternate; }
@keyframes hk-mesh { 0% { background-position: 0% 0%; } 50% { background-position: 60% 40%; } 100% { background-position: 100% 100%; } }
.hk-boven { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.hk-stap { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--r-pil); background: #E1EEF4; font-size: .8rem; font-weight: 700; color: var(--petrol); }
.hk-stap i { width: 8px; height: 8px; border-radius: 50%; background: var(--cyaan); box-shadow: 0 0 0 0 rgba(0,160,223,.6); animation: puls 2s infinite; }
@keyframes puls { 70% { box-shadow: 0 0 0 8px rgba(0,160,223,0); } 100% { box-shadow: 0 0 0 0 rgba(0,160,223,0); } }
.hk-dots { display: flex; gap: 5px; } .hk-dots::before { content: ''; width: 22px; height: 4px; border-radius: 4px; background: var(--cyaan); }
.hk-dots i { width: 12px; height: 4px; border-radius: 4px; background: var(--lijn); }
.hk-vraag { font-size: clamp(1.7rem, 2.4vw, 2.1rem); margin-bottom: 14px; }
.hk-tegels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.hk-tegel { display: grid; justify-items: center; gap: 1px; padding: 12px 6px 14px; border-radius: 18px; background: #fff; border: 1px solid transparent; text-decoration: none; text-align: center; box-shadow: 0 1px 2px rgba(0,38,64,.05), 0 8px 20px -14px rgba(0,38,64,.25); transition: transform .2s, box-shadow .2s, border-color .2s; }
.hk-tegel:hover { transform: translateY(-4px); border-color: rgba(0,160,223,.55); box-shadow: 0 16px 28px -16px rgba(0,63,102,.45); }
.hk-tegel img { height: 72px; width: auto; max-width: 100%; object-fit: contain; margin-bottom: 8px; }
.hk-tegel b { font-size: .92rem; font-weight: 650; color: var(--inkt); }
.hk-tegel span { font-size: .8rem; font-weight: 500; color: var(--grijs); }
.hk-tegel span strong { font-weight: 700; color: var(--petrol); }
.hk-voet { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--lijn); font-size: .84rem; color: var(--grijs); }
.hk-voet .ic { color: var(--petrol); margin-top: 1px; }
.hk-voet b { color: var(--inkt); } .hk-voet a { color: var(--cyaan-tekst); font-weight: 650; }
.zweef { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: var(--r-pil); font-size: .82rem; font-weight: 700; white-space: nowrap; box-shadow: 0 12px 26px -12px rgba(0,0,0,.45); }
.zweef .ic { width: 16px; height: 16px; }
.zweef-1 { top: -16px; left: 22px; background: #fff; color: var(--inkt); transform: rotate(-4deg); } .zweef-1 .ic { color: var(--cyaan-tekst); stroke-width: 2.4; }
.zweef-2 { top: 26px; right: -20px; background: var(--cyaan); color: var(--inkt); transform: rotate(5deg); }
.zweef-3 { bottom: -15px; right: 34px; background: var(--petrol); color: #fff; transform: rotate(-3deg); } .zweef-3 .ic { color: var(--cyaan); }

/* USP-band onderaan de hero (zoals de Daktrots-keurmerkstrook) */
.hd-band { position: relative; overflow: hidden; background: rgba(0,27,46,.82); border-top: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(8px); }
.hd-band-rij { display: flex; width: max-content; gap: 40px; list-style: none; margin: 0; padding: 14px 0; animation: band 48s linear infinite; }
.hd-band:hover .hd-band-rij { animation-play-state: paused; }
.hd-band li { display: inline-flex; align-items: center; gap: 9px; font-size: .9rem; font-weight: 600; color: rgba(255,255,255,.88); white-space: nowrap; }
.hd-band .ic { color: var(--cyaan); width: 18px; height: 18px; }
@keyframes band { to { transform: translateX(-50%); } }


/* ============ BEWEGING EN VERLOPEN ============ */
/* Zacht drijvende verloopbollen achter de lichte secties (alleen transform: geen herberekening van de layout). */
:is(.cfg-sectie, .bon-sectie, .ww-sectie, .rv-sectie, .mx-sectie, .faq-sectie, .dn-sectie, .pr-sectie, .over-sectie, .pk) { position: relative; isolation: isolate; overflow: hidden; }
:is(.cfg-sectie, .bon-sectie, .ww-sectie, .rv-sectie, .mx-sectie, .faq-sectie, .dn-sectie, .pr-sectie, .over-sectie, .pk)::before,
:is(.cfg-sectie, .bon-sectie, .ww-sectie, .rv-sectie, .mx-sectie, .faq-sectie, .dn-sectie, .pr-sectie, .over-sectie, .pk)::after {
  content: ''; position: absolute; z-index: -1; width: 64vmax; height: 64vmax; border-radius: 50%; pointer-events: none; will-change: transform; }
:is(.cfg-sectie, .bon-sectie, .ww-sectie, .rv-sectie, .mx-sectie, .faq-sectie, .dn-sectie, .pr-sectie, .over-sectie, .pk)::before {
  left: -26vmax; top: -32vmax; background: radial-gradient(closest-side, var(--m1, rgba(0,160,223,.14)), transparent 72%); animation: drijf-a 26s ease-in-out infinite alternate; }
:is(.cfg-sectie, .bon-sectie, .ww-sectie, .rv-sectie, .mx-sectie, .faq-sectie, .dn-sectie, .pr-sectie, .over-sectie, .pk)::after {
  right: -28vmax; bottom: -36vmax; background: radial-gradient(closest-side, var(--m2, rgba(143,216,245,.26)), transparent 72%); animation: drijf-b 32s ease-in-out infinite alternate; }
@keyframes drijf-a { to { transform: translate(16vmax, 12vmax) scale(1.18); } }
@keyframes drijf-b { to { transform: translate(-14vmax, -10vmax) scale(.86); } }
.cfg-sectie { --m1: rgba(0,160,223,.2); --m2: rgba(10,95,147,.14); }
.bon-sectie { --m1: rgba(143,216,245,.3); --m2: rgba(0,160,223,.12); }
.ww-sectie, .over-sectie { --m1: rgba(0,160,223,.1); --m2: rgba(143,216,245,.24); }
.mx-sectie { --m1: rgba(255,255,255,.7); --m2: rgba(0,160,223,.16); }
.is-uit::before, .is-uit::after, .is-uit .hd-band-rij, .slot-in.is-uit, .hd.is-uit .hd-foto img, .hd.is-uit .zweef { animation-play-state: paused !important; }

/* hero: drijvende gloed, langzame zoom, parallax, dobberende labels, kantelende kaart */
.hd::after { content: ''; position: absolute; z-index: -1; width: 60vmax; height: 60vmax; right: -12vmax; top: -18vmax; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(0,160,223,.34), transparent 70%); animation: drijf-b 22s ease-in-out infinite alternate; }
.hd-foto { transform: translate3d(0, var(--py, 0px), 0); will-change: transform; }
.hd-foto img { animation: zoom 24s ease-in-out infinite alternate; }
@keyframes zoom { from { transform: scale(1.04); } to { transform: scale(1.14); } }
.hk { transform: perspective(1100px) rotateX(var(--kx, 0deg)) rotateY(var(--ky, 0deg)); transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.zweef { animation: dobber 4.6s ease-in-out infinite alternate; }
.zweef-2 { animation-duration: 5.4s; animation-delay: -1.5s; }
.zweef-3 { animation-duration: 6s; animation-delay: -3s; }
@keyframes dobber { from { translate: 0 -5px; } to { translate: 0 5px; } }
.hk-tegel img { transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.hk-tegel:hover img { transform: translateX(6px) scale(1.06); }

/* scrollvoortgang onder de menubalk */
.kop::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; transform-origin: left; transform: scaleX(var(--vg, 0)); background: linear-gradient(90deg, #00A0DF, #45CBF7, #0A5F93); pointer-events: none; }

/* spotlight die de cursor volgt op kaarten */
.spot { position: relative; }
.spot::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(0,160,223,.16), transparent 62%); }
.spot:hover::after { opacity: 1; }
.cfg-p.is-actief.spot::after, .ck.spot::after { background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.18), transparent 62%); }

/* inschuiven met een kleine vertraging per element */
.opkomst { transition-delay: var(--d, 0ms); }

/* de bon wordt "geprint" als hij in beeld komt */
.js .bon:not(.is-zicht) { clip-path: inset(0 0 100% 0); }
.bon.is-zicht { animation: print 1.3s cubic-bezier(.3,.7,.2,1) both; }
@keyframes print { from { clip-path: inset(0 0 100% 0); transform: rotate(1.6deg) translateY(-26px); } to { clip-path: inset(0 0 0 0); transform: rotate(1.6deg) translateY(0); } }

/* tabelrij en tegels: zachte verloopachtergrond bij hover */
.mx tbody tr { transition: background .3s; }
.mx tbody tr:hover { background: linear-gradient(90deg, rgba(0,160,223,.06), rgba(0,160,223,0) 70%); }
/* projecttegels: verloop dat van onderen opkomt + glazen label */
:is(.pr-tegel, .pa-tegel)::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(0deg, rgba(0,27,46,.9) 0%, rgba(0,38,64,.55) 26%, rgba(0,63,102,.12) 52%, rgba(0,63,102,0) 68%),
              linear-gradient(0deg, rgba(0,160,223,.28) 0%, rgba(0,160,223,0) 40%);
  transition: opacity .45s; }
:is(.pr-tegel, .pa-tegel)::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .45s;
  background: linear-gradient(0deg, rgba(0,63,102,.55) 0%, rgba(0,160,223,.18) 45%, rgba(0,160,223,0) 80%); }
:is(.pr-tegel, .pa-tegel):hover::after { opacity: 1; }
:is(.pr-tegel, .pa-tegel) .pr-info { z-index: 2; background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.26);
  backdrop-filter: blur(16px) saturate(1.5); -webkit-backdrop-filter: blur(16px) saturate(1.5); box-shadow: 0 10px 30px -14px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.25); }
:is(.pr-tegel, .pa-tegel) .pr-info small { color: rgba(255,255,255,.78); }
:is(.pr-tegel, .pa-tegel) .pr-pijl { box-shadow: 0 8px 20px -8px rgba(0,160,223,.9); }
.pa-aantal { z-index: 2; }


/* wrap-strepen als decoratie (zoals op onze voertuigontwerpen) */
.strepen { position: absolute; z-index: 0; pointer-events: none; clip-path: inset(100% 0 0 0); transition: clip-path 1.4s cubic-bezier(.6,.1,.2,1); }
.strepen.is-zicht { clip-path: inset(0 0 0 0); }
.strepen .s1, .strepen .s3 { fill: var(--cyaan); }
.strepen .s2 { fill: var(--petrol); }
.strepen-cfg { right: -30px; top: -30px; width: clamp(160px, 18vw, 280px); height: clamp(160px, 18vw, 280px); opacity: .9; }
.strepen-bon { left: -50px; bottom: -40px; width: clamp(180px, 20vw, 300px); height: clamp(180px, 20vw, 300px); transform: scaleX(-1); opacity: .85; }
.strepen-slot { right: 18%; top: -20%; width: 260px; height: 140%; opacity: .22; }
.strepen-slot .s2 { fill: #fff; }
.cfg-sectie > .wrap, .bon-sectie > .wrap { position: relative; z-index: 1; }




/* ============ CHATWIDGET RECHTSONDER (zoals dehaagsebeveiliging.nl) ============ */
.wg { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 70; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.wg-pil { display: flex; align-items: center; gap: 12px; padding: 6px 6px 6px 6px; border-radius: var(--r-pil); border: 1px solid rgba(255,255,255,.18); color: #fff; text-align: left;
  background: rgba(0,38,64,.82); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); box-shadow: 0 18px 40px -16px rgba(0,27,46,.6); transition: transform .2s, box-shadow .2s; }
.wg-pil:hover { transform: translateY(-2px); box-shadow: 0 22px 46px -16px rgba(0,27,46,.7); }
.wg-av { position: relative; flex: none; }
.wg-av img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,.25); }
.wg-dot { position: absolute; right: 0; bottom: 1px; width: 12px; height: 12px; border-radius: 50%; background: #3DDC84; border: 2px solid #002640; }
.wg-dot.is-dicht { background: #F5A524; }
.wg-tekst { display: grid; line-height: 1.2; padding-right: 4px; }
.wg-tekst b { font-size: .92rem; } .wg-tekst small { font-size: .76rem; color: rgba(255,255,255,.65); }
.wg-rond { position: relative; width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 50%; color: var(--inkt);
  background: linear-gradient(135deg, #45CBF7, #00A0DF); box-shadow: 0 8px 20px -8px rgba(0,160,223,.9); }
.wg-rond .ic { position: absolute; width: 22px; height: 22px; transition: transform .3s, opacity .3s; }
.wg-ic-dicht { opacity: 0; transform: rotate(-90deg) scale(.6); }
.wg.is-open .wg-ic-open { opacity: 0; transform: rotate(90deg) scale(.6); }
.wg.is-open .wg-ic-dicht { opacity: 1; transform: none; }
.wg.is-open .wg-tekst { display: none; }
.wg.is-open .wg-pil { padding: 4px; }
.wg.is-open .wg-av { display: none; }

@keyframes wg-in { from { opacity: 0; transform: translateY(12px) scale(.96); } }

.wg-paneel { width: min(342px, calc(100vw - 32px)); max-height: min(580px, calc(100dvh - 100px)); display: flex; flex-direction: column; overflow: hidden; border-radius: 22px; color: var(--inkt);
  background: var(--kaart); box-shadow: 0 30px 70px -24px rgba(0,27,46,.55), 0 0 0 1px rgba(0,38,64,.08); transform-origin: bottom right; animation: wg-in .35s cubic-bezier(.2,.8,.2,1); }
.wg-paneel[hidden] { display: none; }
.wg-kop { position: relative; flex: none; height: 104px; color: #fff; overflow: hidden;
  background: radial-gradient(70% 120% at 100% 0%, rgba(0,160,223,.65), transparent 60%), radial-gradient(60% 90% at 0% 100%, rgba(143,216,245,.35), transparent 65%), linear-gradient(135deg, #002B48, #0A5F93); }
.wg-x { position: absolute; z-index: 1; top: 9px; right: 9px; width: 32px; height: 32px; border-radius: 50%; border: 0; background: rgba(255,255,255,.14); color: #fff; display: grid; place-items: center; backdrop-filter: blur(8px); }
.wg-x .ic { width: 16px; height: 16px; }
.wg-wie { position: absolute; z-index: 1; left: 13px; right: 13px; bottom: 13px; display: flex; align-items: center; gap: 9px; }
.wg-wie img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; background: #0A5F93; }
.wg-wie div { display: grid; flex: 1; min-width: 0; line-height: 1.2; } .wg-wie b { font-family: var(--f-kop); font-weight: 800; font-size: 1.17rem; text-transform: uppercase; }
.wg-wie small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .72rem; color: rgba(255,255,255,.75); }
.wg-score { display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: var(--r-pil); background: rgba(255,255,255,.16); backdrop-filter: blur(8px); font-size: .7rem; font-weight: 700; white-space: nowrap; }
.wg-score .ic { width: 12px; height: 12px; fill: url(#goud) #F7BE2A; stroke: none; }
.wg-body { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 12px; display: grid; gap: 10px; align-content: start; background: linear-gradient(180deg, #F2F6F8, var(--kaart)); }
.wg-bel { justify-self: start; max-width: 90%; padding: 9px 12px; border-radius: 4px 14px 14px 14px; background: #fff; box-shadow: 0 2px 8px -4px rgba(0,38,64,.2); font-size: .84rem; line-height: 1.4; }
.wg-label { font-size: .72rem; font-weight: 700; color: var(--grijs); margin-top: 2px; }
.wg-tegels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.wg-v { display: grid; justify-items: center; gap: 3px; padding: 7px 4px; border-radius: 11px; background: #fff; border: 1px solid var(--lijn); text-decoration: none; font-size: .68rem; font-weight: 650; text-align: center; transition: border-color .2s, transform .2s; }
.wg-v:hover { border-color: var(--cyaan); transform: translateY(-2px); }
.wg-v img { height: 27px; width: auto; max-width: 100%; object-fit: contain; }
.wg-rij { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-radius: 13px; border: 1px solid rgba(0,160,223,.35); background: rgba(0,160,223,.07); color: var(--inkt); font-size: .86rem; font-weight: 650; text-align: left; }
.wg-rij span { flex: 1; min-width: 0; display: grid; line-height: 1.25; } .wg-rij small { color: var(--cyaan-tekst); font-weight: 600; font-size: .7rem; }
.wg-rij .ic { color: var(--cyaan-tekst); }
.wg-voet { flex: none; display: flex; align-items: center; gap: 7px; padding: 9px 11px; border-top: 1px solid var(--lijn); background: #fff; }
.wg-knop { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--mist); color: var(--petrol); }
.wg-knop .ic { width: 17px; height: 17px; }
.wg-wa { background: #25D366; color: #fff; }
.wg-invoer { flex: 1; min-width: 0; }
.wg-invoer input { width: 100%; height: 36px; padding: 0 13px; border-radius: var(--r-pil); border: 1px solid var(--lijn); background: var(--papier); font-size: .84rem; }
.wg-invoer input:focus { outline: none; border-color: var(--cyaan); box-shadow: 0 0 0 3px rgba(0,160,223,.15); }
.wg-stuur { width: 36px; height: 36px; flex: none; border: 0; border-radius: 50%; display: grid; place-items: center; background: var(--inkt); color: #fff; }
.wg-stuur .ic { width: 16px; height: 16px; }
@media (max-width: 900px) {
  body { padding-bottom: 0; }
  .actiebalk { display: none !important; }
  .wg { right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); }
  .wg-tekst small { display: none; }
  .wg-paneel { width: calc(100vw - 24px); max-height: calc(100dvh - 92px); }
}
@media (prefers-reduced-motion: reduce) { .wg-paneel, .hk::before { animation: none; } }

/* ============ tablet ============ */
@media (max-width: 1180px) {
  .pk-rij { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 84px 24px; }
  .pk-beeld { left: 2%; right: 2%; top: -70px; height: 150px; }
  .cfg:is([data-v="bakwagen"], [data-v="vrachtwagen"]) .pk-beeld { left: 6%; right: 6%; top: -64px; height: 136px; }
  .cfg[data-v="bakwagen"] .pk-beeld { left: 2%; right: 2%; top: -72px; height: 156px; }
  .pk-kaart { padding-top: 96px; }
  .topbalk span:nth-child(3) { display: none; }
  .logo { width: 220px; }
  .waarden { grid-template-columns: 1fr 1fr; }
  .waarden li:nth-child(2n) { margin-top: 0; }
}
@media (max-width: 1000px) {
  .kop-nav { display: none; }
  .kop-menu { display: inline-flex; }
  .kop-acties { margin-left: auto; }
  .rail-rij { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .voet-top { grid-template-columns: 1fr 1fr; }
}

/* ============ mobiel (hoofdversie) ============ */
@media (max-width: 900px) {
  body { font-size: 16px; padding-bottom: 76px; }
  .topbalk-in { justify-content: center; gap: 14px; min-height: 32px; font-size: .78rem; white-space: nowrap; }
  .topbalk span:nth-child(2), .topbalk span:nth-child(3), .topbalk-google { display: none; }
  .kop-in { min-height: 64px; gap: 10px; }
  .logo { width: 196px; }
  .kop-acties .knop { display: none; }

  .sectie { padding: 56px 0; }
  .sectie-kop { flex-direction: column; align-items: start; gap: 8px; margin-bottom: 20px; }

  .held { padding: 20px 0 28px; }
  .held-grid { grid-template-columns: minmax(0, 1fr); }
  .held-boven { margin-bottom: 12px; font-size: .86rem; }
  .held-h1 { font-size: clamp(2.5rem, 11.5vw, 3.4rem); }
  .held-lead { margin-top: 14px; font-size: 1rem; }
  .held .held-knoppen { display: none; }
  .held-feiten { display: none; }
  .held-knoppen { margin-top: 18px; }
  .held-knoppen .knop { flex: 1 1 auto; }
  .held-beeld { display: none; }
  .held-mob-knop { display: flex; margin-top: 8px; }
  .rail { margin-top: 20px; }
  .rail-kop { margin-bottom: 8px; }
  .rail-kop p span { display: none; }
  .rail-kop p { font-size: .86rem; }
  .rail-kop a { display: none; }
  .rail-rij, .pk-rail .rail-rij { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 8px; margin: 0 calc(-1 * var(--gutter)); padding: 4px var(--gutter) 10px; }
  .rail-rij::-webkit-scrollbar { display: none; }
  .rail-v { flex: 0 0 41%; scroll-snap-align: start; padding: 8px 10px 12px; }
  .rail-img { height: 74px; } .rail-img img { max-height: 64px; }
  .rail-prijs b { font-size: 1.5rem; }
  .rail-pijl { display: none; }

  .cfg-sectie { padding: 48px 0; }
  .cfg-kop { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-bottom: 18px; }
  .cfg-voertuigen { overflow-x: auto; scrollbar-width: none; width: auto; margin: 0 calc(-1 * var(--gutter)); border-radius: 0; border-left: 0; border-right: 0; padding: 6px var(--gutter); }
  .cfg-voertuigen::-webkit-scrollbar { display: none; }
  .cfg-voertuigen .cfg-v { flex: none; padding: 7px 12px 7px 8px; font-size: .86rem; }
  .cfg-v-img { width: 44px; height: 24px; }
  .pk-rij { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 16px; margin: 0 calc(-1 * var(--gutter)); padding: 72px var(--gutter) 14px; scroll-padding: 0 var(--gutter); }
  .pk-rij::-webkit-scrollbar { display: none; }
  .pk-kaart { flex: 0 0 84%; scroll-snap-align: center; padding: 92px 18px 16px; }
  /* Compact op mobiel: foto + kaart passen samen in één schermhoogte. */
  .pk-balken { margin-bottom: 8px; }
  .pk-kaart h3 { font-size: 1.7rem; }
  .pk-sub { font-size: .82rem; }
  .pk-lijst { margin: 10px 0 12px; gap: 5px; }
  .pk-lijst li { font-size: .8rem; line-height: 1.3; }
  .pk-voet { gap: 10px; padding-top: 12px; }
  .pk-prijs { font-size: 2.1rem; }
  /* Scrollen: de kaart in het midden is vol formaat, de buren krimpen en vervagen iets (--krimp = afstand tot midden, 0..1, gezet door krimpRij() in site.js). */
  .pk-kaart, .pk-kaart:hover, .pk-kaart.is-actief, .pk-kaart.is-actief:hover { transform: scale(calc(1 - .12 * var(--krimp, 0))); transform-origin: 50% 62%; opacity: calc(1 - .38 * var(--krimp, 0)); transition: box-shadow .3s, border-color .3s; }
  .pk-beeld { left: -2%; right: -2%; top: -64px; height: 152px; }
  .cfg:is([data-v="bakwagen"], [data-v="vrachtwagen"]) .pk-beeld { left: 0; right: 0; top: -62px; height: 148px; }
  .cfg[data-v="bakwagen"] .pk-beeld { left: -2%; right: -2%; top: -68px; height: 160px; }
  .cfg-onder { margin-top: 22px; }
  .cfg-onder ul { gap: 8px; }
  .cfg-onder li { font-size: .84rem; padding: 7px 14px 7px 7px; gap: 7px; }
  .cfg-onder li .ic { width: 21px; height: 21px; padding: 4px; }
  .cfg-kop { flex-direction: column; align-items: start; gap: 16px; margin-bottom: 18px; }
  .cfg-kop p { margin-top: 10px; font-size: .95rem; }
  .cfg { padding: 8px; border-radius: 26px; margin: 0 -8px; }

  .bon-grid, .mx-kop, .ww-grid, .rv-grid, .dn-grid, .over-grid, .faq-grid, .tekst-grid, .over2-grid, .contact-grid, .pk-grid { grid-template-columns: minmax(0, 1fr); }
  .bon { transform: none; }
  @keyframes print { from { clip-path: inset(0 0 100% 0); transform: translateY(-20px); } to { clip-path: inset(0 0 0 0); transform: none; } }
  .stempel { width: 92px; height: 92px; font-size: .76rem; right: 10px; }
  .mx-wrap { border-radius: 18px; margin: 0 calc(-1 * var(--gutter)); border-radius: 0; border-left: 0; border-right: 0; }
  .mx { min-width: 640px; }
  .mx tbody th { padding-left: var(--gutter); }
  .mx tbody th small, .mx-img { display: none; }
  .ww-foto { display: none; }
  .ww-stap { grid-template-columns: 48px 1fr; gap: 16px; padding: 16px 0; }
  .ww-nr { width: 48px; height: 48px; font-size: 1.5rem; }
  .ww-lijst::before, .ww-lijst::after { left: 23px; top: 30px; bottom: 40px; }
  .ww-stap h3 { margin-top: 4px; font-size: 1.12rem; }
  .pr-raster { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 12px; margin: 0 calc(-1 * var(--gutter)); padding: 10px 12vw 14px; }
  .pr-raster::-webkit-scrollbar { display: none; }
  .pr-tegel, .pr-tegel.pr-groot { flex: 0 0 76vw; height: 340px; scroll-snap-align: center; border-radius: var(--r-kaart);
    transform: scale(calc(1 - .12 * var(--krimp, 0))); opacity: calc(1 - .38 * var(--krimp, 0)); }
  .rv-kop { grid-template-columns: minmax(0, 1fr) auto; column-gap: 6px; row-gap: 0; align-items: center; }
  .rv-tekst { display: contents; } /* kicker, kop en score worden rasteritems: kop en rakel naast elkaar, even hoog */
  .rv-tekst .kicker { grid-column: 1 / -1; }
  .rv-tekst h2 { grid-column: 1; grid-row: 2; font-size: clamp(1.6rem, 8vw, 2rem); max-width: none; }
  .rv-score { grid-column: 1 / -1; grid-row: 3; }
  /* rakel klein rechts naast de kop */
  .rv-plek { grid-column: 2; grid-row: 2; min-height: 0; margin-right: -4px; pointer-events: none; }
  .rk3d { width: clamp(130px, 42vw, 165px); }
  @media (min-width: 560px) { .rv-tekst h2 { font-size: 2.7rem; max-width: 13ch; } .rk3d { width: 230px; } }
  .rv-cijfer { font-size: 4.6rem; }
  .rv-kaart { width: 290px; padding: 18px; }
  .rv-kaart blockquote { font-size: .92rem; }
  .klanten-rij { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px 18px; }
  .klanten-rij img { height: 32px; }
  .dn-groot { min-height: 300px; }
  .dn-lijst { order: -1; }
  .over-feiten { grid-template-columns: 1fr 1fr; }
  .over-feiten .of-donker { grid-column: 1 / -1; min-height: 112px; }
  .over-feiten li:nth-child(2) { border-left: 0; border-top: 1px solid rgba(6,35,58,.1); }
  .over-feiten li:nth-child(3) { border-top: 1px solid rgba(6,35,58,.1); }
  .om { height: 430px; margin-top: 30px; }
  .om-chip { font-size: .76rem; padding: 7px 12px; }
  .om-chip-1 { left: 0; } .om-chip-2 { right: 0; } .om-chip-3 { left: 4%; }
  .over-feiten li { min-height: 116px; padding: 16px 8px; }
  .over-feiten b { font-size: 2.2rem; }
  .faq-item summary { padding: 14px 12px 14px 14px; gap: 10px; }
  .faq-item summary b { font-size: .96rem; }
  .faq-item p { padding: 0 16px 16px 14px; font-size: .94rem; }
  .slot { padding-bottom: 40px; }
  .slot-in { grid-template-columns: minmax(0, 1fr); border-radius: 26px; width: calc(100% - 2 * var(--gutter) + 12px); margin: 0 auto; padding: 30px 22px; }
  .slot-knoppen .knop { flex: 1 1 auto; }
  .voet { padding-top: 48px; }
  .voet-top { grid-template-columns: 1fr 1fr; gap: 28px 18px; }
  .voet-merk { grid-column: 1 / -1; }
  .voet-top > div:nth-child(4) { grid-column: 1 / -1; }
  .voet-onder { margin-top: 32px; flex-direction: column; }
  .pk { padding: 18px 0 30px; }
  .pk-foto, .pk-pakket { order: -1; aspect-ratio: 16 / 10; }
  .pk-met-foto .pk-foto { display: none; }
  .inkort { position: static; }
  .waarden { grid-template-columns: minmax(0, 1fr); }
  .contact-kaarten { grid-template-columns: minmax(0, 1fr); }
  .pa-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .pa-tegel .pr-info { left: 8px; right: 8px; bottom: 8px; padding: 7px 10px; }
  .lade-velden { grid-template-columns: 1fr 1fr; gap: 10px; }
  .lade .veld input, .lade .veld select { height: 54px; padding: 0 14px; font-size: 1rem; }
  .lade-keuze img { width: 90px; }
  .lade-dicht { width: 42px; height: 42px; top: 14px; right: 14px; }

  .actiebalk { position: fixed; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); z-index: 60; display: flex; gap: 6px; padding: 6px; border-radius: 24px;
    background: rgba(253,253,251,.88); backdrop-filter: blur(16px) saturate(1.4); border: 1px solid rgba(255,255,255,.9); box-shadow: 0 12px 34px -12px rgba(0,27,46,.45); transition: transform .3s; }
  .actiebalk.is-weg { transform: translateY(130%); }
  .ab-ic { flex: none; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 18px; background: var(--mist); color: var(--petrol); }
  .ab-wa { background: #DDF6E6; color: #0B5B2E; }
  .ab-hoofd { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 8px 0 14px; border-radius: 18px; background: var(--petrol); color: #fff; text-decoration: none; }
  .ab-sel { display: grid; line-height: 1.15; min-width: 0; }
  .ab-sel small { font-size: .72rem; color: #A9C8DA; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ab-sel b { font-family: var(--f-kop); font-weight: 800; font-size: 1.4rem; letter-spacing: 0; }
  .ab-knop { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 9px 12px; border-radius: 14px; background: var(--cyaan); color: var(--inkt); font-weight: 700; font-size: .86rem; }
  .ab-knop .ic { width: 16px; height: 16px; }
}
@media (max-width: 380px) {
  .lade-velden { grid-template-columns: minmax(0, 1fr); }
  .knop { white-space: normal; text-align: center; padding: 10px 20px; }
  .logo { width: 168px; }
  .rail-v { flex-basis: 46%; }
  .held-feiten li:nth-child(3) { display: none; }
}


@media (min-width: 901px) and (max-width: 1180px) {
  .cfg-voertuigen { overflow-x: auto; scrollbar-width: none; }
  .cfg-voertuigen::-webkit-scrollbar { display: none; }
  .cfg-voertuigen .cfg-v { flex: none; }
  .kop-in { gap: 14px; }
  .kop-nav > a, .kop-item > a { padding: 10px 9px; font-size: .93rem; }
  .logo { width: 200px; }
}
@media (max-width: 1180px) {
  .kop-tel-t { display: none; }
  .kop-tel { padding: 5px; }
}
@media (max-width: 900px) {
  :root { --kop-h: 64px; }
  .kop-licht .kop-tel { background: transparent; box-shadow: none; padding: 0; width: auto; height: auto; }
  .kop-tel { padding: 0; background: transparent; width: auto; height: auto; }
  .hd { padding-top: calc(var(--kop-h) + 22px); }
  .hd-verloop { background: linear-gradient(180deg, rgba(0,27,46,.82) 0%, rgba(0,27,46,.7) 40%, rgba(0,27,46,.9) 72%, rgba(0,27,46,.97) 100%), linear-gradient(0deg, rgba(0,160,223,.3), rgba(0,160,223,0) 30%); }
  .hd-sluier { background: linear-gradient(180deg, rgba(0,63,102,.8) 0%, rgba(0,100,160,.78) 45%, rgba(0,63,102,.9) 100%); }
  .hd-foto img { object-position: 62% 30%; }
  .hd-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; padding-bottom: 34px; }
  .hd-pil { font-size: .78rem; }
  .hd-h1 { font-size: clamp(2.3rem, 11.6vw, 3.6rem); margin: 14px 0 12px; }
  .hd-lead { font-size: 1rem; }
  .hd-lead-kort { font-size: min(1rem, calc((100vw - 2 * var(--gutter)) / 22.9)); } /* één regel, ook op smalle telefoons */
  .hd-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 18px calc(-1 * var(--gutter)) 12px; padding: 0 var(--gutter); }
  .hd-chips::-webkit-scrollbar { display: none; }
  .hd-chips li { flex: none; font-size: .82rem; }
  .hk { padding: 18px 10px 14px; border-radius: 22px; margin: 0 calc(10px - var(--gutter)); }
  .hk-vraag { font-size: 1.6rem; margin-bottom: 10px; }
  /* homepage-hero op mobiel: alles boven de voertuigtegels gecentreerd */
  .hd:not(.hd-sub) .hd-tekst { text-align: center; }
  .hd:not(.hd-sub) .hk-vraag { text-align: center; }
  .hk-tegels { gap: 6px; }
  .hk-tegel { padding: 10px 2px 11px; border-radius: 14px; }
  .hk-tegel img { height: 46px; margin-bottom: 6px; }
  .hk-tegel b { font-size: .8rem; }
  .hk-tegel span { font-size: .74rem; }
  .hk-vraag, .hk-boven { padding: 0 6px; }
  .hk-voet { margin-left: 6px; margin-right: 6px; }
  .zweef-2 { display: none; }
  .zweef-1 { left: 14px; font-size: .74rem; padding: 6px 11px; }
  .zweef-3 { right: 14px; font-size: .74rem; padding: 6px 11px; }
  .hd-band li { font-size: .82rem; }
  .strepen-cfg, .strepen-bon { width: 130px; height: 130px; }
  .strepen-slot { display: none; }
  .hd-sub.hd-met-rechts .hd-grid { grid-template-columns: minmax(0, 1fr); }
  .hd-h1-sub { font-size: clamp(2.3rem, 10.5vw, 3.2rem); }
  .hd-voertuig { min-height: 0; }
  .hd-glas { padding: 20px; }
  .hd-glas dl div { grid-template-columns: 96px 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .hl { animation: none; }
  .gv-cirkel { stroke-dashoffset: 0; fill: #00A0DF; } .gv-vink { stroke-dashoffset: 0; } .gv-ring, .gv-deeltje { display: none; }
  .strepen { clip-path: none; }
  .rv-spoor { animation: none !important; } .rv-rij { overflow-x: auto; }
  .hd-foto, .hk { transform: none !important; }
  .js .bon:not(.is-zicht) { clip-path: none; }
  .hd-band-rij, .hk-stap i { animation: none; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .opkomst { opacity: 1; transform: none; }
}
.nw { white-space: nowrap; }
/* Kleinste telefoons (320px): pakketkaart nog compacter zodat foto + kaart in beeld passen. */
@media (max-width: 360px) {
  .pk-rij { padding-top: 60px; }
  .pk-kaart { padding-top: 78px; }
  .pk-beeld, .cfg:is([data-v="bakwagen"], [data-v="vrachtwagen"]) .pk-beeld, .cfg[data-v="bakwagen"] .pk-beeld { left: -2%; right: -2%; top: -54px; height: 128px; }
  .pk-kaart h3 { font-size: 1.55rem; }
  .pk-lijst li { font-size: .78rem; }
}

/* cookiebanner (Consent Mode v2): klein glazen kaartje linksonder, laat de chatwidget vrij */
.cb { position: fixed; left: max(16px, env(safe-area-inset-left)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 75; width: min(380px, calc(100vw - 32px)); padding: 14px 16px; border-radius: 18px;
  background: rgba(6,35,58,.92); color: #fff; border: 1px solid rgba(255,255,255,.14); box-shadow: 0 24px 50px -20px rgba(0,0,0,.6); backdrop-filter: blur(14px);
  opacity: 0; transform: translateY(12px); transition: opacity .35s ease, transform .4s cubic-bezier(.2,.8,.2,1); }
.cb.is-zicht { opacity: 1; transform: none; }
.cb[hidden] { display: none; }
.cb p { font-size: .84rem; line-height: 1.45; color: rgba(255,255,255,.85); }
.cb p b { color: #fff; margin-right: 4px; } .cb a { color: var(--lucht); }
.cb-knoppen { display: flex; gap: 8px; margin-top: 10px; }
.cb-knoppen .knop { flex: 1; justify-content: center; }
.cb .knop-rand { color: #fff; border-color: rgba(255,255,255,.3); }
@media (max-width: 600px) { .cb { bottom: calc(max(12px, env(safe-area-inset-bottom)) + 76px); left: 12px; width: calc(100vw - 24px); } }

/* landingspagina's (Google Ads): geen menu, één doel */
.kop-lp .kop-acties { gap: 12px; }
.kop-lp-score { display: inline-flex; align-items: center; gap: 6px; color: #fff; font-size: .9rem; }
.kop-lp-score b { font-family: var(--f-kop); font-weight: 800; font-size: 1.15rem; }
.kop-lp.is-vast .kop-lp-score, .kop:not(.kop-licht).kop-lp .kop-lp-score { color: var(--inkt); }
.lp-usp { list-style: none; padding: 0; margin: 22px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 10px 22px; }
.lp-usp li { display: flex; align-items: center; gap: 8px; font-size: .92rem; font-weight: 600; color: rgba(255,255,255,.9); }
.lp-usp .ic { width: 18px; height: 18px; color: var(--cyaan); flex: none; }
.voet-lp { padding: 22px 0 90px; }
.voet-lp .voet-onder { border-top: 0; margin-top: 0; padding-top: 0; }
@media (max-width: 900px) {
  .kop-lp .kop-tel, .kop-lp-score .sterren { display: none; }
  .kop-lp .kop-menu { display: none; }
  .lp-usp { grid-template-columns: 1fr 1fr; justify-items: start; gap: 8px 12px; }
  .lp-usp li { font-size: .8rem; }
  .hd:not(.hd-sub) .hd-tekst .lp-usp { justify-items: start; }
}
.kop-lp ~ main .hd-h1 span[data-lp-kop] { display: inline; white-space: normal; }
.kop-lp ~ main .hd-h1 .hl { white-space: nowrap; }

/* SEO-pagina's: lees-ook, plaatsen, werkgebied, gids */
.lees-ook { margin-top: 34px; padding: 18px 20px; border-radius: 18px; background: var(--mist); }
.lees-ook-kop { font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--grijs); margin-bottom: 8px; }
.lees-ook ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.lees-ook a { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--lijn); color: var(--inkt); font-weight: 650; text-decoration: none; }
.lees-ook li:last-child a { border-bottom: 0; }
.lees-ook .ic { width: 18px; height: 18px; color: var(--cyaan-tekst); flex: none; }
.pl-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin: 22px 0 18px; }
.pl-tegel { display: grid; gap: 2px; padding: 14px 16px; border-radius: 16px; background: rgba(253,253,251,.85); border: 1px solid rgba(6,35,58,.08); text-decoration: none; color: var(--inkt); transition: border-color .2s, transform .2s; }
.pl-tegel:hover { border-color: var(--cyaan); transform: translateY(-2px); }
.pl-tegel b { font-family: var(--f-kop); font-weight: 800; text-transform: uppercase; font-size: 1.2rem; line-height: 1; }
.pl-tegel span { font-size: .82rem; color: var(--grijs); }
.pl-tabel { width: 100%; border-collapse: collapse; margin-top: 22px; font-size: .94rem; }
.pl-tabel th, .pl-tabel td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--lijn); }
.pl-tabel th { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--grijs); }
.pl-tabel .n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pl-tabel a { color: var(--inkt); font-weight: 650; }
.tabel-scroll { overflow-x: auto; }
.tabel-scroll .pl-tabel { min-width: 560px; }
.pl-noot { color: var(--grijs); font-size: .9rem; margin-top: 8px; }
.pl-feiten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 24px 0 0; }
.pl-feiten div { padding: 12px 14px; border-radius: 14px; background: var(--mist); }
.pl-feiten dt { font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--grijs); }
.pl-feiten dd { margin: 4px 0 0; font-weight: 600; font-size: .92rem; }
.gids-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.gids-kaart { display: grid; gap: 8px; align-content: start; padding: 22px; border-radius: 20px; background: rgba(253,253,251,.9); border: 1px solid rgba(6,35,58,.08); box-shadow: 0 14px 30px -24px rgba(6,35,58,.5); text-decoration: none; color: var(--inkt); transition: border-color .2s, transform .2s; }
.gids-kaart:hover { border-color: var(--cyaan); transform: translateY(-2px); }
.gids-kaart b { font-family: var(--f-kop); font-weight: 800; text-transform: uppercase; font-size: 1.45rem; line-height: 1.02; }
.gids-kaart p { color: #1C3A50; font-size: .95rem; }
.leestijd { display: inline-block; margin-left: 6px; padding: 2px 10px; border-radius: 999px; background: rgba(255,255,255,.14); font-size: .8rem; white-space: nowrap; }
@media (max-width: 700px) { .pl-feiten { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 400px) { .pl-tabel th, .pl-tabel td { padding: 9px 8px; } }