/* ReRiGo — opbouw en stijl naar Specialized (performance-retail), met de huisstijl van rerigo.nl als accent.
   Zwart #1d1e20 en wit dragen de basis; donkergroen, petrol, groen, staalblauw en oranje keren terug als accentvlakken. */

@font-face { font-family: "Barlow"; src: url("../fonts/barlow-400-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/barlow-500-latin.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/barlow-600-latin.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/barlow-700-latin.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  /* Uitsluitend de huisstijl van rerigo.nl (gemeten op de live site, 13-09-2026). */
  --c-ink: #0a1015;       /* tekst */
  --c-zwart: #1d1e20;     /* zwart uit de huisstijl: hero, verhalen, footer */
  --c-void: #193d2f;      /* donkergroen: servicebalk, maatsectie, paginakoppen */
  --c-carbon: #1a3a4f;    /* petrol: voordeelkaarten, gekozen maat */
  --c-groen: #1d803e;     /* groen: slotband */
  --c-paper: #ffffff;
  --c-mist: #f2f3f6;
  --c-hairline: #f1f1f1;
  --c-steel: #2b2c32;
  --c-alu: #f2f3f6;
  --c-field: #4d7298;     /* staalblauw: lijnen en invoerranden */
  --c-naaf: #ffa200;      /* oranje: offerteknop en labels, altijd met donkere tekst */
  --c-naaf-hover: #ed9600;
  --c-naaf-licht: #ffa200;
  --c-fout: #0a1015;

  --f: "Barlow", Helvetica, Arial, sans-serif;
  --f-kop: var(--f); --f-display: var(--f); --f-text: var(--f);

  --t-display: clamp(2.5rem, 1.5rem + 3.4vw, 4rem);
  --t-h-lg: clamp(1.875rem, 1.35rem + 1.7vw, 2.75rem);
  --t-h: clamp(1.5rem, 1.25rem + .9vw, 2rem);
  --t-spec: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem);

  --r-card: 8px;
  --r-btn: 4px;
  --r-field: 4px;
  --r-pill: 999px;
  --shadow-float: 0 4px 15px rgba(10, 16, 21, .18);
  --gutter: 20px;
  --sec: clamp(48px, 7vw, 88px);
  --ease: cubic-bezier(.22, 1, .36, 1);

  --bg: var(--c-paper);
  --fg: var(--c-ink);
  --muted: var(--c-steel);
  --line: var(--c-hairline);
  --focus: var(--c-ink);
  --ghost: var(--c-field);
}
@media (min-width: 768px) { :root { --gutter: 24px; } }
@media (min-width: 1280px) { :root { --gutter: 40px; } }

/* Donkere oppervlakken wisselen alleen de rol-tokens */
.band--void, .band--carbon, .voet, .balk, .service, .hero-vol, .fotokaart, .promo, .verhaal, .rene-band, .voordeel {
  --bg: var(--c-void); --fg: var(--c-paper); --muted: var(--c-alu); --line: var(--c-field); --focus: var(--c-paper); --ghost: var(--c-alu);
}
.band--carbon, .voordeel { --bg: var(--c-carbon); }
.voet, .balk, .hero-vol, .fotokaart, .promo, .verhaal, .rene-band { --bg: var(--c-zwart); }
.band--mist { --bg: var(--c-mist); }
.band--void:has(> .slot) { --bg: var(--c-groen); --muted: var(--c-paper); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--c-paper); color: var(--c-ink); font: 400 1.0625rem/1.55 var(--f); }
img, svg { display: block; max-width: 100%; height: auto; }
figure, blockquote { margin: 0; }
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 100; background: var(--c-paper); color: var(--c-ink); padding: 12px 20px; border-radius: var(--r-btn); font-weight: 600; }
.skip:focus { top: 12px; }

.wrap { width: min(100% - 2 * var(--gutter), 1600px); margin-inline: auto; }
.band { background: var(--bg); color: var(--fg); padding-block: var(--sec); }
.band--tight { padding-block: clamp(40px, 5vw, 64px); }
/* twee witte banden na elkaar: geen dubbele sectieruimte */
.band:not(.band--void):not(.band--mist):not(.band--carbon) + .band:not(.band--void):not(.band--mist):not(.band--carbon) { padding-top: 0; }
.muted { color: var(--muted); }
.stack { display: flex; flex-direction: column; gap: 20px; }
.sectiekop { display: flex; flex-direction: column; gap: 12px; margin-bottom: clamp(28px, 4vw, 44px); max-width: 48rem; }
.sectie-kop { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 20px; }

/* ---------- Typografie ---------- */
h1, h2, h3, .display, .h-lg, .h-md, .h-sm, .hero__maat { font-family: var(--f); font-weight: 700; text-wrap: balance; }
.display { font-size: var(--t-display); line-height: 1.04; letter-spacing: -.015em; }
.h-lg { font-size: var(--t-h-lg); line-height: 1.06; letter-spacing: -.012em; }
.h-md { font-size: var(--t-h); line-height: 1.1; letter-spacing: -.01em; }
.h-sm { font-size: 1.25rem; line-height: 1.2; letter-spacing: -.005em; }
.display em, .h-lg em { font-style: normal; color: var(--c-naaf); }
.label { font: 700 .8125rem/1.3 var(--f); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.lead { font-size: 1.1875rem; line-height: 1.5; color: var(--muted); max-width: 38em; }
p { max-width: 68ch; }
.spec { font-family: var(--f); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.ph { background: var(--c-naaf); color: var(--c-ink); padding: 0 .3em; border-radius: 2px; font-style: normal; }
.ph::before { content: "Te bevestigen: "; font-weight: 600; }

/* ---------- Knoppen ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: 12px 20px; border-radius: var(--r-btn);
  border: 1.5px solid transparent; cursor: pointer; text-decoration: none; text-align: center;
  font: 600 1rem/1.1 var(--f); letter-spacing: .01em;
  transition: background-color .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.btn--offerte { background: var(--c-naaf); color: var(--c-ink); }
.btn--offerte:hover { background: var(--c-naaf-hover); }
.btn--licht { background: var(--c-paper); color: var(--c-ink); }
.btn--licht:hover { background: var(--c-mist); }
.btn--donker { background: var(--c-zwart); color: var(--c-paper); }
.btn--donker:hover { background: var(--c-steel); }
.btn--ghost { background: transparent; color: var(--fg); border-color: var(--ghost); }
.btn--ghost:hover { border-color: var(--fg); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .4; pointer-events: none; }
.btn .pijl { transition: transform .15s var(--ease); }
.btn:hover .pijl { transform: translateX(3px); }
.knoppen { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.pijllink { display: inline-flex; gap: .35em; align-items: center; font-weight: 600; text-decoration: none; min-height: 44px; }
.pijllink::after { content: "→"; transition: transform .15s var(--ease); }
.pijllink:hover { text-decoration: underline; text-underline-offset: 4px; }
.pijllink:hover::after { transform: translateX(3px); }
.linkknop { background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; min-height: 44px; }

/* ---------- Servicebalk, menubalk en menu ---------- */
.service { background: var(--bg); color: var(--fg); font: 500 .875rem/1.2 var(--f); }
.service__in { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 44px; }
.service nav { display: flex; gap: 28px; }
.service a { text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.service a:hover, .service a:last-child { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 767px) { .service__tekst { display: none; } .service nav { width: 100%; justify-content: space-between; } }

.kop { position: sticky; top: 0; z-index: 20; background: var(--c-paper); color: var(--c-ink); border-bottom: 1px solid var(--c-hairline); }
.kop__in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; min-height: 60px; }
.kop__logo { display: flex; align-items: center; min-height: 48px; justify-self: start; }
/* Het logo van ReRiGo (aangeleverd bestand, vrijstaand gemaakt); kleur via background, zodat het op licht en donker werkt */
.woordmerk { display: block; width: 184px; aspect-ratio: 1800 / 222; background: var(--c-ink); -webkit-mask: url("../img/rerigo-logo.png") center / contain no-repeat; mask: url("../img/rerigo-logo.png") center / contain no-repeat; }
.voet .woordmerk { width: 210px; background: var(--c-paper); }
.kop__nav { display: none; }
.kop__links { display: flex; gap: 40px; }
.kop__links a { text-decoration: none; font-weight: 600; font-size: 1.0625rem; display: inline-flex; align-items: center; min-height: 48px; }
.kop__links a:hover, .kop__links a[aria-current="page"] { text-decoration: underline; text-underline-offset: 8px; text-decoration-thickness: 2px; text-decoration-color: var(--c-naaf); }
.kop__acties { justify-self: end; display: flex; align-items: center; gap: 12px; }
.kop__tel { display: none; text-decoration: none; font-weight: 600; font-variant-numeric: tabular-nums; }
.kop__tel:hover { text-decoration: underline; }
.kop__cta { display: none; }
.kop__menuknop { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-btn); border: 1px solid var(--c-hairline); background: transparent; cursor: pointer; }
@media (min-width: 1024px) {
  .kop__nav, .kop__tel { display: block; }
  .kop__cta { display: inline-flex; }
  .kop__menuknop { display: none; }
}
@media (min-width: 640px) and (max-width: 1023px) { .kop__cta { display: inline-flex; } }
@media (max-width: 1023px) { .kop__in { grid-template-columns: auto 1fr; } }

.menu { position: absolute; left: 0; right: 0; top: 100%; background: var(--c-paper); color: var(--c-ink); border-bottom: 1px solid var(--c-hairline); box-shadow: var(--shadow-float); max-height: calc(100dvh - 96px); overflow-y: auto; z-index: 30; --focus: var(--c-ink); --ghost: var(--c-field); --fg: var(--c-ink); }
.menu__in { display: flex; flex-direction: column; gap: 24px; padding-block: 12px 32px; }
.menu__lijst a { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--c-hairline); text-decoration: none; font-weight: 700; font-size: 1.25rem; }
.menu__lijst .spec { font-size: 1rem; color: var(--c-steel); }
.menu__acties { display: flex; flex-direction: column; gap: 10px; }
body.menu-open { overflow: hidden; }

/* ---------- Homepage-hero: video over de volle breedte ---------- */
.hero-vol { position: relative; isolation: isolate; overflow: hidden; background: var(--bg); color: var(--fg); min-height: min(78svh, 720px); display: grid; align-items: center; }
.hero-vol .videoframe { position: absolute; inset: 0; z-index: -2; border-radius: 0; }
.hero-vol .videoframe .frame { height: 100%; border-radius: 0; }
.hero-vol::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(29, 30, 32, .86) 0%, rgba(29, 30, 32, .6) 38%, rgba(29, 30, 32, 0) 72%); }
.hero-vol__in { padding-block: 56px; display: flex; flex-direction: column; gap: 14px; }
.hero-vol h1 { max-width: 14ch; }
.hero-vol__sub { font: 700 clamp(1.25rem, 1rem + .9vw, 1.625rem)/1.2 var(--f); }
.hero-vol__sub em { font-style: normal; color: var(--c-naaf); }
.hero-vol__tekst { max-width: 38em; font-size: 1.0625rem; margin-bottom: 18px; color: var(--muted); }
/* Tablet en kleine laptop: de lopende tekst reikt verder naar rechts dan het verloop; verloop breder maken */
@media (min-width: 1024px) and (max-width: 1279px) {
  .hero-vol::after { background: linear-gradient(90deg, rgba(29, 30, 32, .88) 0%, rgba(29, 30, 32, .72) 50%, rgba(29, 30, 32, .3) 80%, rgba(29, 30, 32, 0) 100%); }
}
/* Staande tablet: de tekst loopt over bijna de hele breedte, dus verloop van onder naar boven */
@media (min-width: 768px) and (max-width: 1023px) {
  .hero-vol::after { background: linear-gradient(0deg, rgba(29, 30, 32, .9) 0%, rgba(29, 30, 32, .78) 55%, rgba(29, 30, 32, .5) 100%); }
}
@media (max-width: 767px) {
  .hero-vol { align-items: end; min-height: min(86svh, 720px); }
  .hero-vol::after { background: linear-gradient(0deg, rgba(29, 30, 32, .9) 0%, rgba(29, 30, 32, .72) 55%, rgba(29, 30, 32, .5) 100%); }
}

/* ---------- Paginakoppen (overige pagina's): wit zoals de productpagina's van Specialized, beeld links ---------- */
.hero.band--void { --bg: var(--c-paper); --fg: var(--c-ink); --muted: var(--c-steel); --focus: var(--c-ink); --ghost: var(--c-field); --line: var(--c-hairline); border-bottom: 1px solid var(--c-hairline); }
.hero.band--void .maatlijn { color: var(--c-carbon); }
@media (min-width: 1024px) { .hero__grid > figure, .hero__grid > .frame { order: -1; } }
.voordelen-band { border-top: 1px solid var(--c-hairline); }
.hero { padding-block: clamp(32px, 5vw, 64px) clamp(40px, 6vw, 80px); }
.hero__grid { display: grid; gap: clamp(32px, 5vw, 56px); align-items: center; }
@media (min-width: 1024px) { .hero__grid { grid-template-columns: 1fr 1fr; } }
.hero__tekst { display: flex; flex-direction: column; gap: 20px; }
.hero h1 { display: flex; flex-direction: column; gap: 12px; }
.hero__kicker { font: 700 .875rem/1.3 var(--f); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.hero__maat { font-size: var(--t-display); line-height: 1.02; letter-spacing: -.015em; font-variant-numeric: tabular-nums; }
.hero--kort { padding-block: clamp(28px, 4vw, 48px) clamp(32px, 5vw, 56px); }
.paginakop { display: flex; flex-direction: column; gap: 16px; max-width: 56rem; }
.kruimel { display: flex; flex-wrap: wrap; gap: 8px; font-size: .9375rem; color: var(--muted); }
.kruimel li { display: flex; align-items: center; }
.kruimel a { text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.kruimel a:hover { text-decoration: underline; }
.kruimel li + li::before { content: "/"; margin-right: 8px; }

/* Maatvoering rond een echte foto */
.maatfoto { display: grid; grid-template-columns: minmax(0, 1fr) 28px; grid-template-areas: "beeld v" "h ." "cap cap"; gap: 10px 12px; }
.maatfoto__beeld { grid-area: beeld; }
.maatfoto__beeld .frame { aspect-ratio: 16 / 10; }
.maatlijn { position: relative; color: var(--c-naaf-licht); font: 700 .875rem/1 var(--f); font-variant-numeric: tabular-nums; }
.band:not(.band--void) .maatlijn { color: var(--c-carbon); }
.maatlijn--h { grid-area: h; height: 24px; border-inline: 1.5px solid currentColor; display: grid; place-items: center; }
.maatlijn--v { grid-area: v; width: 28px; border-block: 1.5px solid currentColor; display: grid; place-items: center; }
.maatlijn::before { content: ""; position: absolute; background: currentColor; }
.maatlijn--h::before { left: 0; right: 0; top: 50%; height: 1.5px; transform-origin: left; animation: teken-x .7s var(--ease) .2s both; }
.maatlijn--v::before { top: 0; bottom: 0; left: 50%; width: 1.5px; transform-origin: bottom; animation: teken-y .7s var(--ease) .35s both; }
.maatlijn span { position: relative; background: var(--bg); padding: 0 8px; white-space: nowrap; }
.maatlijn--v span { writing-mode: vertical-rl; transform: rotate(180deg); padding: 8px 0; }
.maatfoto figcaption { grid-area: cap; color: var(--muted); font-size: .9375rem; }
@keyframes teken-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes teken-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* ---------- Beeld ---------- */
.frame { display: block; background: var(--c-mist); border-radius: var(--r-card); overflow: hidden; }
.frame img { width: 100%; height: 100%; object-fit: cover; }
.frame--vol { border-radius: 0; }
.adem { background: var(--c-zwart); color: var(--c-paper); }
.adem .frame { aspect-ratio: 4 / 3; }
@media (min-width: 768px) { .adem .frame { aspect-ratio: 21 / 9; max-height: 760px; width: 100%; } }
.adem figcaption { padding-block: 18px 28px; color: var(--c-alu); --bg: var(--c-zwart); }

/* Heroloop over de echte foto: de foto blijft staan tot de video speelt */
.videoframe { position: relative; border-radius: var(--r-card); overflow: hidden; }
.videoframe__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s var(--ease); }
.videoframe__video.is-speelt { opacity: 1; }
/* Logo op het groene eindvlak: telefoon en tablet in de vrije ruimte boven de kop, vanaf 1280 px in het midden */
.hero-vol__in { position: relative; z-index: 1; }
.hero-vol__logo { position: absolute; z-index: 0; left: 50%; top: 9%; transform: translateX(-50%); width: min(62vw, 300px); height: auto;
  opacity: 0; transition: opacity .45s var(--ease); pointer-events: none; }
.is-logomoment .hero-vol__logo { opacity: 1; }
@media (min-width: 1280px) { .hero-vol__logo { top: 50%; transform: translate(-50%, -50%); width: min(30vw, 540px); } }
.videoframe__knop { position: absolute; right: 12px; bottom: 12px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--c-paper); background: var(--c-zwart); color: var(--c-paper); display: grid; place-items: center; cursor: pointer; --focus: var(--c-paper); }
.videoframe__knop:hover { background: var(--c-steel); }
/* Onzichtbaar tot toetsenbordfocus; met muis of vinger pauzeer je door op het beeld te tikken (WCAG 2.2.2 blijft gehaald) */
.videoframe__knop:not(:focus-visible) { opacity: 0; pointer-events: none; }
.videoframe__knop .icoon-speel, .videoframe__knop[aria-pressed="true"] .icoon-pauze { display: none; }
.videoframe__knop[aria-pressed="true"] .icoon-speel { display: block; }

/* ---------- Kaartenrijen met pijlen ---------- */
.rij { display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: var(--r-card); }
.rij::-webkit-scrollbar { display: none; }
@media (min-width: 768px) { .rij { grid-auto-columns: calc((100% - 2 * 12px) / 2.5); } }
@media (min-width: 1200px) { .rij { grid-auto-columns: calc((100% - 3 * 12px) / 3.6); } }
.rij--product { grid-auto-columns: 46%; }
@media (min-width: 768px) { .rij--product { grid-auto-columns: calc((100% - 3 * 12px) / 3.4); } }
@media (min-width: 1200px) { .rij--product { grid-auto-columns: calc((100% - 4 * 12px) / 5.2); } }
.pijlen { display: flex; justify-content: flex-end; gap: 6px; margin-top: 12px; }
.pijlen button { width: 44px; height: 44px; border: 0; border-radius: var(--r-btn); background: transparent; cursor: pointer; font: 600 1.5rem/1 var(--f); color: var(--fg); }
.pijlen button:hover { background: var(--c-mist); }

.fotokaart { scroll-snap-align: start; position: relative; display: block; aspect-ratio: 4 / 5; border-radius: var(--r-card); overflow: hidden; background: var(--bg); color: var(--fg); text-decoration: none; }
.fotokaart .frame { position: absolute; inset: 0; border-radius: 0; height: 100%; }
.fotokaart .frame img { transition: transform .5s var(--ease); }
@media (hover: hover) { .fotokaart:hover .frame img { transform: scale(1.03); } }
.fotokaart::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(29, 30, 32, .78) 0%, rgba(29, 30, 32, 0) 48%); }
.fotokaart__t { position: absolute; left: 20px; right: 20px; top: 18px; z-index: 2; display: flex; flex-direction: column; gap: 4px; }
.fotokaart__t small { font-size: .9375rem; color: var(--muted); }
.fotokaart__pijl { position: absolute; right: 16px; bottom: 16px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; background: var(--c-paper); color: var(--c-ink); display: grid; place-items: center; font-weight: 700; transition: background .15s; }
/* hoverkleur alleen met een muis: op een touchscreen blijft :hover na een tik hangen en werd de knop oranje */
@media (hover: hover) { .fotokaart:hover .fotokaart__pijl { background: var(--c-naaf); } }
.fotokaart__pijl svg, .voordeel__pijl svg { width: 16px; height: 16px; }
.tegels { display: grid; gap: 12px; margin-top: 28px; }
/* Rij van drie detailfoto's, bijvoorbeeld de verstevigde hoeken */
.fotorij3 { display: grid; gap: 12px; }
@media (min-width: 768px) { .fotorij3 { grid-template-columns: repeat(3, 1fr); } }
.fotorij3 .frame { border-radius: var(--r-card); overflow: hidden; aspect-ratio: 3 / 4; }
.fotorij3 .frame img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 768px) { .tegels { grid-template-columns: 1fr 1fr; } }
.tegels .fotokaart { aspect-ratio: 16 / 9; }

/* Dieptecarrousel: JS zet .rij--diepte en de kaartmaat (--dk-w). Zonder JS en bij printen blijft het de scrollrij. */
@media screen {
  .rij.rij--diepte { display: block; position: relative; overflow: hidden; height: calc(var(--dk-w, 300px) * 1.25 + 120px); margin-inline: calc(var(--gutter) * -1); perspective: 1400px; scroll-snap-type: none; border-radius: 0; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; }
  .rij--diepte:active { cursor: grabbing; }
  .rij--diepte .fotokaart { position: absolute; top: 50%; left: 50%; width: var(--dk-w, 300px); will-change: transform, opacity, filter; box-shadow: 0 22px 36px -18px rgba(10, 16, 21, .45), 0 6px 14px -8px rgba(10, 16, 21, .3); }
  .rij--diepte .fotokaart::after { content: ""; position: absolute; inset: 0; z-index: 3; background: var(--c-zwart); opacity: var(--dk-tint, 0); mix-blend-mode: multiply; pointer-events: none; }
  .rij--diepte .fotokaart img { pointer-events: none; -webkit-user-drag: none; }
  .rij--diepte .fotokaart:not(.is-voor) .fotokaart__pijl { opacity: 0; }
  .diepte__stippen { display: flex; margin-right: auto; }
  .diepte__stippen button { width: 44px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; }
  .diepte__stippen button::before { content: ""; width: 8px; height: 8px; border-radius: var(--r-pill); background: var(--c-field); transition: width .25s var(--ease), background .25s; }
  .diepte__stippen button[aria-current="true"]::before { width: 22px; background: var(--c-ink); }
  .diepte__stippen button:hover::before { background: var(--c-ink); }
  .pijlen .diepte__pauze { display: grid; place-items: center; }
  .diepte__pauze span[aria-hidden] { display: grid; }
}

.promo { position: relative; isolation: isolate; overflow: hidden; min-height: clamp(420px, 44vw, 640px); display: grid; align-items: end; background: var(--bg); color: var(--fg); }
.promo > .frame { position: absolute; inset: 0; z-index: -2; height: 100%; }
.promo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(29, 30, 32, .82) 0%, rgba(29, 30, 32, 0) 58%); }
.promo__in { padding-block: 48px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.promo__in p { font: 600 1.25rem/1.3 var(--f); margin-bottom: 14px; }

.product { scroll-snap-align: start; display: grid; gap: 8px; text-decoration: none; align-content: start; }
.product__foto { position: relative; display: block; background: var(--c-mist); border-radius: var(--r-card); overflow: hidden; aspect-ratio: 1; }
.product__foto .frame { height: 100%; border-radius: 0; }
.product__label { position: absolute; left: 10px; top: 10px; z-index: 1; background: var(--c-naaf); color: var(--c-ink); font: 700 .75rem/1 var(--f); letter-spacing: .04em; text-transform: uppercase; padding: 6px 8px; border-radius: 2px; }
.product__naam { font-weight: 600; font-size: 1.0625rem; line-height: 1.25; }
.product__prijs { color: var(--c-steel); font-size: .9375rem; }
.product:hover .product__naam { text-decoration: underline; text-underline-offset: 3px; }

.verhaal { scroll-snap-align: start; position: relative; aspect-ratio: 4 / 5; border-radius: var(--r-card); overflow: hidden; background: var(--bg); color: var(--fg); }
.verhaal .frame { position: absolute; inset: 0; height: 100%; border-radius: 0; }
.verhaal::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(29, 30, 32, .85) 0%, rgba(29, 30, 32, .25) 55%, rgba(29, 30, 32, .7) 100%); }
.verhaal blockquote { position: absolute; left: 20px; right: 20px; top: 20px; z-index: 2; }
.verhaal blockquote p { font: 700 1.625rem/1.12 var(--f); letter-spacing: -.01em; }
.verhaal figcaption { position: absolute; left: 20px; bottom: 20px; z-index: 2; font-weight: 600; color: var(--muted); }
.verhaal--groen { background: var(--c-void); }
.verhaal--groen::before { display: none; }

.rene-band { position: relative; isolation: isolate; overflow: hidden; background: var(--bg); color: var(--fg); min-height: clamp(520px, 50vw, 720px); display: grid; align-items: center; }
.rene-band > .frame { position: absolute; right: 0; top: 0; bottom: 0; width: 58%; border-radius: 0; z-index: -2; }
.rene-band > .frame img { object-position: 60% 30%; }
.rene-band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--c-zwart) 0%, var(--c-zwart) 42%, rgba(29, 30, 32, 0) 78%); }
.rene-band__in { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; padding-block: 56px; }
.rene-band__in p:not(.label) { max-width: 34em; color: var(--muted); margin-bottom: 10px; }
.rene-band .h-lg { max-width: 12ch; }
@media (max-width: 767px) {
  .rene-band { align-items: end; min-height: 640px; }
  .rene-band > .frame { width: 100%; bottom: 40%; }
  .rene-band::after { background: linear-gradient(0deg, var(--c-zwart) 0%, var(--c-zwart) 45%, rgba(29, 30, 32, 0) 70%); }
}

.voordelen { display: grid; gap: 12px; }
@media (min-width: 900px) { .voordelen { grid-template-columns: repeat(3, 1fr); } }
.voordeel { position: relative; display: grid; gap: 10px; align-content: start; min-height: 190px; padding: 24px 24px 56px; border-radius: var(--r-card); background: var(--bg); color: var(--fg); text-decoration: none; }
.voordeel svg { width: 26px; height: 26px; color: var(--c-naaf); }
.voordeel p { color: var(--muted); font-size: .9375rem; }
.voordeel__pijl { position: absolute; right: 20px; bottom: 18px; font-weight: 700; }
@media (hover: hover) { .voordeel:hover { background: var(--c-void); } }

/* ---------- Werkwijze ---------- */
.stappen { display: grid; gap: 24px; }
@media (min-width: 768px) { .stappen { grid-template-columns: repeat(3, 1fr); gap: 12px; } }
.stap { display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: var(--r-card); background: var(--c-mist); }
.stap__nr { font: 700 var(--t-spec)/1 var(--f); color: var(--c-groen); font-variant-numeric: tabular-nums; }

/* ---------- Maatstaal: alle maten in één tekening, de actieve maat loopt mee met scrollen ---------- */
.maatstaal { display: grid; gap: clamp(20px, 3vw, 32px); }
.maatstaal__beeld svg { width: 100%; height: auto; overflow: visible; }
.maatstaal__grond { fill: none; stroke: var(--c-field); stroke-width: 1.5; }
.maatstaal__paal { fill: url(#ms-alu-v); }
.maatstaal__lat { fill: url(#ms-alu-h); }
.maatstaal__voor { opacity: .28; transition: opacity .35s var(--ease); }
.maatstaal__doel.is-actief .maatstaal__voor { opacity: 1; }
.maatstaal__achter { stroke: #b9c1cc; stroke-linecap: round; fill: none; }
.maatstaal__netachter { opacity: .5; }
.maatstaal__netboven { opacity: .8; }
.maatstaal__netzij { opacity: .7; }
.maatstaal__schaduw { fill: #000; opacity: .32; }
.maatstaal__wiel { fill: #1e2125; stroke: #0b0c0e; stroke-width: .6; }
.maatstaal__band { fill: #0b0c0e; }
.maatstaal__plaat { fill: #aeb6c1; stroke: #7f8b9a; stroke-width: .5; }
.maatstaal__as { stroke: #c9ced6; }
.maatstaal__asdop { fill: #c9ced6; }
.maatstaal__naaf { fill: #c8102e; }
.maatstaal__diepte { opacity: 0; transition: opacity .35s var(--ease); }
.maatstaal__doel.is-actief .maatstaal__diepte { opacity: 1; }
.maatstaal__maat { fill: none; stroke: var(--c-naaf-licht); stroke-width: 2; opacity: 0; transition: opacity .35s var(--ease); }
.maatstaal__doel.is-actief .maatstaal__maat { opacity: 1; }
.maatstaal__lijst { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px 16px; }
@media (min-width: 600px) { .maatstaal__lijst { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .maatstaal__lijst { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
.maatstaal__lijst a { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 48px; padding: 8px 0 8px 12px; border-left: 2px solid var(--c-field); text-decoration: none; color: var(--muted); transition: border-color .25s var(--ease), color .25s var(--ease); }
.maatstaal__lijst a.is-actief { color: var(--fg); border-left-color: var(--c-naaf-licht); }
.band:not(.band--void) .maatstaal__maat { stroke: var(--c-carbon); }
.band:not(.band--void) .maatstaal__lijst a.is-actief { border-left-color: var(--c-carbon); }
.maatstaal__lijst a:hover .spec { text-decoration: underline; text-underline-offset: 4px; }
.maatstaal__lijst .spec { font-size: 1.0625rem; line-height: 1.15; white-space: nowrap; }
.maatstaal__lijst small { font-size: .8125rem; }
@media (max-width: 599px) { .maatstaal__lijst a { flex-direction: row; align-items: baseline; justify-content: space-between; } }

/* ---------- Details, clubs en reviews ---------- */
.details { display: grid; gap: 24px; }
@media (min-width: 768px) { .details { grid-template-columns: repeat(3, 1fr); gap: 12px; } }
.detail { display: flex; flex-direction: column; gap: 12px; }
.detail .frame { aspect-ratio: 4 / 5; }
.detail p { color: var(--muted); }
.clubs { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 20px 12px; }
.club { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; font-size: .875rem; color: var(--muted); }
.club img { width: auto; height: 56px; max-width: 100%; object-fit: contain; filter: grayscale(1); opacity: .85; transition: filter .2s var(--ease), opacity .2s var(--ease); }
.club:hover img { filter: none; opacity: 1; }
.clubs-blok { margin-top: 32px; padding: 28px; border-radius: var(--r-card); background: var(--c-mist); display: grid; gap: 20px; }
.reviews { display: grid; gap: 12px; }
@media (min-width: 900px) { .reviews { grid-template-columns: repeat(3, 1fr); } }
.review { display: flex; flex-direction: column; justify-content: space-between; gap: 20px; padding: 28px; border-radius: var(--r-card); background: var(--c-mist); color: var(--c-ink); }
.review blockquote p { font: 600 1.25rem/1.35 var(--f); }
.review figcaption { font: 700 .8125rem var(--f); text-transform: uppercase; letter-spacing: .08em; color: var(--c-steel); }

/* ---------- FAQ ---------- */
.faq { display: flex; flex-direction: column; border-top: 2px solid var(--c-ink); max-width: 960px; }
.faq details { border-bottom: 1px solid var(--c-field); }
.faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 24px; min-height: 60px; padding-block: 14px; cursor: pointer; font: 700 1.1875rem/1.3 var(--f); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 14px; height: 14px; background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat; transition: transform .2s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq__antwoord { padding-bottom: 22px; display: flex; flex-direction: column; gap: 12px; color: var(--c-steel); }

/* ---------- Slot ---------- */
.slot { display: grid; gap: 28px; align-items: end; }
@media (min-width: 900px) { .slot { grid-template-columns: 1.3fr 1fr; } }
.slot__acties { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.slot__acties p { color: var(--muted); }

/* ---------- Productpagina ---------- */
.specs { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 2px solid var(--c-ink); }
.specs div { display: grid; grid-template-columns: minmax(8rem, 40%) 1fr; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--c-hairline); }
.specs dt { color: var(--c-steel); }
.specs dd { font-weight: 600; }
.twee { display: grid; gap: clamp(32px, 5vw, 64px); }
@media (min-width: 1024px) { .twee { grid-template-columns: 1fr 1fr; align-items: start; } }
.galerij { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }
.galerij .frame { aspect-ratio: 1; }
.galerij > .frame:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
.prose { display: flex; flex-direction: column; gap: 16px; }
.prose h2 { margin-top: 12px; }
.prose ul { padding-left: 1.2em; display: flex; flex-direction: column; gap: 6px; }
.register { display: flex; flex-direction: column; border-top: 2px solid var(--c-ink); }
.register li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px 20px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--c-hairline); }
.register .frame { aspect-ratio: 1; }
.register li { scroll-margin-top: 88px; }
.register li:target, .register li.is-gekozen { box-shadow: inset 4px 0 0 var(--c-naaf); background: var(--c-mist); padding-left: 16px; padding-right: 16px; }
.register__maat { font-size: 1.5rem; line-height: 1.05; }
.register__tekst { color: var(--c-steel); font-size: .9375rem; grid-column: 1 / -1; }
.register__prijs { color: var(--c-ink); font-weight: 600; }
.register__prijs small { font-weight: 400; font-size: .8em; }
.register .pijllink { grid-column: 2; }
@media (min-width: 768px) {
  .register li { grid-template-columns: 140px minmax(0, 1.1fr) minmax(0, 1fr) auto; }
  .register__tekst { grid-column: auto; }
  .register .pijllink { grid-column: auto; }
}

/* ---------- Offerte ---------- */
.offerte__grid { display: grid; gap: 32px; align-items: start; }
@media (min-width: 1024px) { .offerte__grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, .9fr); } }
.paneel { background: var(--c-paper); border-radius: var(--r-card); padding: clamp(22px, 4vw, 40px); color: var(--c-ink); }
.voortgang { display: none; gap: 8px; margin-bottom: 26px; }
.js .voortgang { display: flex; }
.voortgang li { flex: 1; display: flex; flex-direction: column; gap: 8px; font-size: .875rem; color: var(--c-steel); }
.voortgang li::before { content: ""; height: 4px; border-radius: 2px; background: var(--c-hairline); }
.voortgang li.is-klaar::before { background: var(--c-ink); }
.voortgang li.is-actief::before { background: var(--c-naaf); }
.voortgang li.is-actief { color: var(--c-ink); font-weight: 600; }
.no-js-only { display: block; }
.js .no-js-only { display: none; }
.stap-veld { border: 0; padding: 0; margin: 0 0 30px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.stap-veld legend { padding: 0; margin-bottom: 18px; }
.js .stap-veld:not(.is-actief) { display: none; }
.stap-nav { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; }
.stap-nav [data-stap-terug] { margin-right: auto; }
html:not(.js) [data-stap-verder], html:not(.js) [data-stap-terug] { display: none; }

.telrijen { display: grid; gap: 8px; list-style: none; padding: 0; margin: 0 0 16px; }
.telrij { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 8px 12px 8px 10px; border: 1.5px solid var(--c-field); border-radius: var(--r-card); background: var(--c-paper); }
.telrij.is-gekozen { border-color: var(--c-carbon); box-shadow: inset 3px 0 0 var(--c-carbon); }
.telrij__beeld { display: flex; width: 54px; align-items: flex-end; }
.telrij__beeld:empty { width: 0; }
.telrij__naam { min-width: 0; display: flex; flex-direction: column; gap: 2px; font-weight: 600; font-size: .9375rem; line-height: 1.2; font-variant-numeric: tabular-nums; }
.telrij__naam small { font-weight: 400; font-size: .8125rem; color: var(--muted); }
.teller { display: flex; align-items: center; gap: 4px; }
.teller__knop { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; line-height: 1; font-weight: 600; color: var(--c-ink); background: var(--c-mist); border: 1.5px solid var(--c-field); border-radius: var(--r-btn); cursor: pointer; }
.teller__knop:hover { border-color: var(--c-ink); }
.teller__knop:disabled { opacity: .4; cursor: default; }
.teller__veld { width: 52px; height: 44px; padding: 0; text-align: center; font: inherit; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--c-ink); background: var(--c-paper); border: 1.5px solid var(--c-field); border-radius: var(--r-field); -moz-appearance: textfield; }
.teller__veld::-webkit-outer-spin-button, .teller__veld::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
@media (min-width: 481px) { .telrij__naam > span, .telrij__naam small { white-space: nowrap; } }
@media (max-width: 480px) { .telrij { gap: 8px; padding: 6px 8px; } .telrij__beeld { display: none; } .telrij__naam { font-size: .875rem; } .telrij__naam small { font-size: .75rem; } .teller__knop { width: 40px; height: 40px; } .teller__veld { width: 44px; height: 40px; } }
.chips--kort { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.chip__input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 16px 10px 12px; border: 1.5px solid var(--c-field); border-radius: var(--r-card); cursor: pointer; background: var(--c-paper); transition: border-color .15s var(--ease), background .15s var(--ease); }
.chip:hover { border-color: var(--c-ink); }
.chip__goal { flex: none; width: 54px; display: flex; align-items: flex-end; }
.chip__goal .goal { width: calc(var(--w) / 750 * 100%); min-width: 10px; color: var(--c-steel); }
.chip__label { font-weight: 600; font-size: .9375rem; line-height: 1.2; font-variant-numeric: tabular-nums; }
.chip--tekst { padding-left: 18px; }
.chip--net .chip__label { display: flex; flex-direction: column; gap: 2px; line-height: 1.2; }
.chip--net small { font-size: .8125rem; opacity: .8; }
.keuzekop { margin-top: 28px; font-size: 1.0625rem; font-weight: 600; scroll-margin-top: 110px; }
.chip__input:checked + .chip { border-color: var(--c-carbon); background: var(--c-carbon); color: var(--c-paper); }
.chip__input:checked + .chip .goal { color: var(--c-paper); }
.chip__input:focus-visible + .chip { outline: 2px solid var(--c-ink); outline-offset: 3px; }

.veld { display: flex; flex-direction: column; gap: 8px; }
.veld--groep { border: 0; padding: 0; margin: 0; min-width: 0; }
.veld--groep legend { padding: 0; margin-bottom: 8px; }
.veld label, .veld .veld__titel { font-weight: 600; font-size: .9375rem; }
.veld .hint, .hint { color: var(--c-steel); font-size: .9375rem; }
.veld input:not([type="radio"]):not([type="checkbox"]), .veld textarea, .veld select { width: 100%; min-height: 50px; padding: 12px 14px; border: 1.5px solid var(--c-field); border-radius: var(--r-field); background: var(--c-paper); font-size: 1.0625rem; }
.veld textarea { min-height: 120px; resize: vertical; }
.veld input:focus-visible, .veld textarea:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 2px; border-color: var(--c-ink); }
.veld [aria-invalid="true"] { border-color: var(--c-ink); border-width: 2.5px; }
.fout { color: var(--c-fout); font-size: .9375rem; font-weight: 600; }
.fout:not(:empty)::before { content: ""; display: inline-block; width: 4px; height: 1em; margin-right: 8px; vertical-align: -2px; background: var(--c-naaf); border-radius: 2px; }
.velden-2 { display: grid; gap: 18px; }
@media (min-width: 640px) { .velden-2 { grid-template-columns: 1fr 1fr; } }
.keuzes { display: flex; flex-wrap: wrap; gap: 8px; }
.keuze { position: relative; }
.keuze input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.keuze label { display: inline-flex; align-items: center; min-height: 46px; padding: 10px 18px; border: 1.5px solid var(--c-field); border-radius: var(--r-btn); cursor: pointer; font-weight: 500; }
.keuze input:checked + label { border-color: var(--c-carbon); background: var(--c-carbon); color: var(--c-paper); }
.keuze input:focus-visible + label { outline: 2px solid var(--c-ink); outline-offset: 3px; }
.status { margin-top: 14px; font-weight: 500; }
.honing { position: absolute; left: -9999px; }

.zijkant { display: flex; flex-direction: column; gap: 12px; }
.zijkant__blok { background: var(--c-paper); border-radius: var(--r-card); padding: 24px; display: flex; flex-direction: column; gap: 12px; color: var(--c-ink); }
.zijkant__blok .clubs { grid-template-columns: repeat(3, 1fr); gap: 12px; }
.zijkant__blok .club img { height: 44px; }
.kaart__maat { font-size: var(--t-spec); line-height: 1; }
.review-mini blockquote p { font: 600 1.125rem/1.4 var(--f); }
.contactrij { display: flex; flex-direction: column; gap: 10px; }

/* ---------- Footer ---------- */
.voet { background: var(--bg); color: var(--fg); padding-block: 48px 28px; }
.voet__in { display: grid; gap: 32px; }
@media (min-width: 768px) { .voet__in { grid-template-columns: 1.4fr repeat(3, 1fr); } }
.voet__merk { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.voet__merk img { width: 140px; }
.voet__slogan { color: var(--muted); }
.voet h2 { margin-bottom: 10px; }
.voet ul { display: flex; flex-direction: column; }
.voet a:not(.btn) { text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.voet a:not(.btn):hover { text-decoration: underline; }
.voet address { font-style: normal; line-height: 1.75; }
.voet__onder { display: flex; flex-wrap: wrap; gap: 8px 28px; align-items: center; margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--c-steel); color: var(--muted); font-size: .875rem; }
@media (max-width: 1023px) { .voet { padding-bottom: 104px; } }

/* ---------- Mobiele offertebalk ---------- */
.balk { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 40; display: flex; gap: 8px; padding: 8px; background: var(--bg); color: var(--fg); border-radius: var(--r-card); box-shadow: var(--shadow-float); transition: transform .25s var(--ease), opacity .25s var(--ease); }
.balk.is-weg { transform: translateY(140%); opacity: 0; pointer-events: none; }
.balk__cta { flex: 1; }
.balk__icoon { flex: none; display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: var(--r-btn); border: 1.5px solid var(--c-alu); }
@media (min-width: 1024px) { .balk { display: none !important; } }

/* ---------- Cookiemelding ---------- */
.consent { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 50; max-width: 440px; background: var(--c-paper); color: var(--c-ink); border-radius: var(--r-card); padding: 22px; box-shadow: var(--shadow-float); display: flex; flex-direction: column; gap: 12px; border: 1px solid var(--c-hairline); --focus: var(--c-ink); }
.consent p { font-size: .9375rem; color: var(--c-steel); }
.consent .consent__titel { font: 700 1.125rem var(--f); color: var(--c-ink); }
.consent__knoppen { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (min-width: 768px) { .consent { left: 24px; bottom: 24px; } }

/* ---------- Beweging en print ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media print {
  .kop__menuknop, .menu, .balk, .consent, .skip, .kop__acties, .service, .pijlen, .videoframe__video, .videoframe__knop { display: none !important; }
  .band--void, .hero-vol, .voet, .adem, .promo, .rene-band { background: #fff !important; color: var(--c-ink) !important; }
  .js .stap-veld { display: flex !important; }
  .rij { grid-auto-flow: row; grid-template-columns: repeat(2, 1fr); overflow: visible; }
  img { break-inside: avoid; }
}

/* Citaat van René op de pagina over René en Teun (vader en zoon) */
.citaat { margin: clamp(28px, 4vw, 44px) 0 0; max-width: 46rem; border-left: 3px solid var(--c-naaf); padding: 4px 0 4px 20px; }
.citaat p { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.625rem); line-height: 1.3; font-weight: 600; letter-spacing: -.01em; }
.citaat footer { margin-top: 10px; font-size: .9375rem; color: var(--muted); }

/* Prijstabellen (netten, maatadvies) en prijsregels bij producten */
.tabelwrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--bg); }
.tabel { width: 100%; border-collapse: collapse; min-width: 560px; }
.tabel th, .tabel td { text-align: left; vertical-align: top; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.tabel thead th { font: 700 .8125rem/1.3 var(--f); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); background: var(--c-mist); }
.tabel tbody tr:last-child td { border-bottom: 0; }
.tabel td.spec { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
.prijs { font-weight: 700; font-variant-numeric: tabular-nums; }
.prijs small { font-weight: 500; color: var(--muted); }
.prijs__incl { color: var(--muted); font-size: .9375rem; }
.klein { font-size: .9375rem; color: var(--muted); margin-top: 14px; max-width: 68ch; }
.specs dd small { color: var(--muted); font-weight: 400; }
.keuzes--kolom { display: grid; gap: 8px; }

/* Tikvlakken: links in tabellen minimaal 44 px hoog */
.tabel td a { display: inline-block; padding: 12px 2px; }
@media (max-width: 380px) { .service nav a:nth-child(2) { display: none; } .service__in { gap: 10px; } }

/* Telefoonicoon voor elk nummer */
.tel-icoon { display: inline-block; width: 1em; height: 1em; flex: none; vertical-align: -.14em; }
a:not(.btn) > .tel-icoon { margin-right: .35em; }
a[href^="tel:"]:not(.btn) { white-space: nowrap; }   /* icoon en nummer altijd samen op een regel */
/* Alleen een telefoonicoon: tikvlak 44 x 44, zonder de regelhoogte in lopende tekst op te rekken */
.belkeuze { position: fixed; z-index: 1000; min-width: 250px; padding: 8px; background: var(--c-paper); color: var(--c-ink); border-radius: var(--r-card); box-shadow: 0 10px 30px rgba(10, 16, 21, .28); }
.belkeuze__kop { margin: 4px 10px 6px; font-size: .8125rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--c-steel); }
.belkeuze__optie { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; padding: 8px 12px; border-radius: var(--r-btn); color: var(--c-ink); text-decoration: none; font-weight: 600; }
.belkeuze__optie:hover, .belkeuze__optie:focus-visible { background: var(--c-mist); }
.belkeuze__optie:focus-visible { outline: 2px solid var(--c-ink); outline-offset: -2px; }
.belkeuze__nr { font-weight: 500; font-variant-numeric: tabular-nums; color: var(--c-steel); white-space: nowrap; }
.tel-icoonlink { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px;
  margin-block: -12px; vertical-align: middle; text-decoration: none; }
a.tel-icoonlink > .tel-icoon { width: 1.25em; height: 1.25em; margin-right: 0; }
.kop__tel.tel-icoonlink { display: none; }
@media (min-width: 1024px) { .kop__tel.tel-icoonlink { display: inline-flex; } }