/* =========================================================================
   bnbboekhouder — stylesheet
   -------------------------------------------------------------------------
   Alles draait op custom properties. Het admin-paneel zet ze live om, dus
   gebruik in nieuwe regels altijd een token in plaats van een vaste kleur.

   1. Tokens          6. Hero            11. Reviews & kaart
   2. Basis           7. Balken          12. Tarieven
   3. Typografie      8. Secties         13. Artikelen & A-Z
   4. Knoppen         9. Kaarten         14. Formulier
   5. Header          10. Stappen        15. Footer, cookies, animatie
   ========================================================================= */

/* ------------------------------------------------------------ 1. tokens */

:root {
  /* Palet "Duin" — standaard, afgeleid van het logo */
  --kleur-merk: #ff6b00;
  --kleur-merk-diep: #e05c00;
  --kleur-merk-tekst: #c24a00;
  --kleur-merk-zacht: #fff1e5;
  --kleur-ink: #0e2340;
  --kleur-ink-zacht: #17335c;
  --kleur-tekst: #3e4e66;
  --kleur-stil: #6b7b94;
  --kleur-lijn: #e3eaf3;
  --kleur-lijn-sterk: #cfdcec;
  --kleur-vlak: #ffffff;
  --kleur-bg: #ffffff;
  --kleur-zand: #fbf6ef;
  --kleur-tint: #eff5fd;
  --kleur-accent: #12a294;
  --kleur-accent-zacht: #e4f5f2;

  /* Typografie */
  --font-kop: 'Outfit', 'Segoe UI', system-ui, sans-serif;
  --font-tekst: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --schaal: 1;
  --kop-gewicht: 700;
  --kop-spatiering: -0.02em;

  /* Vorm */
  --rond-s: 10px;
  --rond-m: 16px;
  --rond-l: 24px;
  --rond-xl: 32px;
  --rond-vol: 999px;

  --schaduw-s: 0 1px 2px rgb(14 35 64 / 0.05), 0 2px 8px rgb(14 35 64 / 0.05);
  --schaduw-m: 0 2px 6px rgb(14 35 64 / 0.05), 0 12px 30px rgb(14 35 64 / 0.08);
  --schaduw-l: 0 4px 12px rgb(14 35 64 / 0.06), 0 24px 60px rgb(14 35 64 / 0.12);

  --wrap: 1180px;
  --sectie-ruimte: clamp(56px, 6.4vw, 92px);

  --soepel: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ------------------------------------------------------------- 2. basis */

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

html {
  font-size: calc(16.5px * var(--schaal));
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}

body {
  margin: 0;
  background: var(--kleur-bg);
  color: var(--kleur-tekst);
  font-family: var(--font-tekst);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, picture, svg, video { max-width: 100%; }
img { height: auto; display: block; }

a { color: var(--kleur-merk-tekst); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--kleur-merk-diep); }

button { font: inherit; }

:focus-visible {
  outline: 3px solid var(--kleur-merk);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 40px);
}
.wrap--breed { max-width: 1340px; }

.visueel-verborgen {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.overslaan {
  position: absolute; left: 16px; top: -60px; z-index: 200;
  background: var(--kleur-ink); color: #fff;
  padding: 12px 20px; border-radius: var(--rond-s);
  text-decoration: none; transition: top 0.2s;
}
.overslaan:focus { top: 16px; color: #fff; }

.ico { width: 1.15em; height: 1.15em; flex: none; }

/* -------------------------------------------------------- 3. typografie */

h1, h2, h3, h4 {
  font-family: var(--font-kop);
  font-weight: var(--kop-gewicht);
  letter-spacing: var(--kop-spatiering);
  color: var(--kleur-ink);
  line-height: 1.15;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.05rem, 1.25rem + 2.9vw, 3.15rem); }
h2 { font-size: clamp(1.65rem, 1.1rem + 2vw, 2.4rem); }
h3 { font-size: clamp(1.1rem, 1rem + 0.5vw, 1.3rem); }
h4 { font-size: 1.05rem; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

strong { color: var(--kleur-ink); font-weight: 650; }

.eyebrow {
  font-family: var(--font-kop);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kleur-merk-tekst);
  margin: 0 0 0.7em;
}

.tekst-merk { color: var(--kleur-merk); }
.tekst-accent { color: var(--kleur-accent); }

.badge {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-family: var(--font-kop);
  font-size: 0.76rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--kleur-ink-zacht);
  background: var(--kleur-tint);
  padding: 0.5em 1em;
  border-radius: var(--rond-vol);
  margin-bottom: 1.4rem;
}

.lood { font-size: 1.1rem; color: var(--kleur-tekst); max-width: 62ch; }

/* Losse toelichtende regel, gecentreerd onder een blok */
.notitie {
  display: flex; align-items: center; justify-content: center; gap: 0.5em;
  margin-top: 28px; text-align: center;
  font-family: var(--font-kop); font-weight: 550;
  color: var(--kleur-ink);
}
.notitie .ico { color: var(--kleur-merk); }

/* ----------------------------------------------------------- 4. knoppen */

.knop {
  --knop-bg: var(--kleur-merk);
  --knop-tekst: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55em;
  font-family: var(--font-kop);
  font-weight: 650;
  font-size: 0.98rem;
  line-height: 1.2;
  padding: 0.92em 1.5em;
  border: 1px solid transparent;
  border-radius: var(--rond-s);
  background: var(--knop-bg);
  color: var(--knop-tekst);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.18s var(--soepel), box-shadow 0.18s var(--soepel),
              background-color 0.18s, border-color 0.18s, color 0.18s;
}
.knop:hover { transform: translateY(-2px); color: var(--knop-tekst); }
.knop:active { transform: translateY(0); }
.knop__ico { transition: transform 0.22s var(--soepel); }
.knop:hover .knop__ico { transform: translateX(3px); }

.knop--primair { box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--kleur-merk) 70%, transparent); }
.knop--primair:hover { background: var(--kleur-merk-diep); box-shadow: 0 10px 26px -8px color-mix(in srgb, var(--kleur-merk) 75%, transparent); }

.knop--stil {
  --knop-bg: var(--kleur-vlak);
  --knop-tekst: var(--kleur-ink);
  border-color: var(--kleur-lijn-sterk);
  box-shadow: var(--schaduw-s);
}
.knop--stil:hover { border-color: var(--kleur-ink); }

.knop--donker { --knop-bg: var(--kleur-ink); --knop-tekst: #fff; }
.knop--donker:hover { --knop-bg: var(--kleur-ink-zacht); }

.knop--rand {
  --knop-bg: transparent;
  --knop-tekst: var(--kleur-ink);
  border-color: color-mix(in srgb, var(--kleur-ink) 22%, transparent);
}
.knop--rand:hover { --knop-bg: var(--kleur-ink); --knop-tekst: #fff; }

.knop--klein { padding: 0.7em 1.15em; font-size: 0.9rem; }

.knoppenrij { display: flex; flex-wrap: wrap; gap: 12px; }

/* Losse tekstlink met pijl */
.pijllink {
  display: inline-flex; align-items: center; gap: 0.4em;
  font-family: var(--font-kop); font-weight: 650;
  color: var(--kleur-merk-tekst); text-decoration: none;
}
.pijllink .ico { transition: transform 0.22s var(--soepel); }
.pijllink:hover .ico { transform: translateX(4px); }

/* ------------------------------------------------------------ 5. header */

.kop {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--kleur-bg) 88%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s, box-shadow 0.25s, background-color 0.25s;
}
.kop.is-geplakt {
  border-bottom-color: var(--kleur-lijn);
  box-shadow: 0 4px 20px -12px rgb(14 35 64 / 0.3);
}

.kop__binnen {
  display: flex; align-items: center; gap: clamp(16px, 3vw, 36px);
  min-height: 78px;
}

.kop__logo { flex: none; display: block; }
.kop__logo img { width: clamp(150px, 16vw, 194px); height: auto; }

.nav { margin-inline: auto; }
.nav__lijst { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }

.nav__link {
  display: inline-flex; align-items: center; gap: 0.25em;
  white-space: nowrap;
  font-family: var(--font-kop); font-weight: 550; font-size: 0.95rem;
  color: var(--kleur-ink); text-decoration: none;
  padding: 0.6em 0.8em; border-radius: var(--rond-s);
  transition: color 0.2s, background-color 0.2s;
}
.nav__link:hover { color: var(--kleur-merk-tekst); background: var(--kleur-merk-zacht); }
.nav__link.is-actief { color: var(--kleur-merk-tekst); }
.nav__chevron { width: 0.9em; height: 0.9em; transition: transform 0.25s; }

.nav__heeft-sub { position: relative; }
.nav__heeft-sub:hover .nav__chevron,
.nav__heeft-sub:focus-within .nav__chevron { transform: rotate(180deg); }

.nav__sub {
  position: absolute; top: calc(100% + 8px); left: 50%;
  transform: translate(-50%, 8px);
  min-width: 290px;
  background: var(--kleur-vlak);
  border: 1px solid var(--kleur-lijn);
  border-radius: var(--rond-m);
  box-shadow: var(--schaduw-l);
  padding: 10px;
  opacity: 0; visibility: hidden;
  transition: opacity 0.2s, transform 0.24s var(--soepel), visibility 0.2s;
}
.nav__heeft-sub:hover .nav__sub,
.nav__heeft-sub:focus-within .nav__sub {
  opacity: 1; visibility: visible; transform: translate(-50%, 0);
}
.nav__sub ul { list-style: none; margin: 0; padding: 0; }
.nav__sub a {
  display: block; padding: 0.6em 0.85em;
  border-radius: var(--rond-s);
  color: var(--kleur-ink); text-decoration: none;
  font-size: 0.94rem;
}
.nav__sub a:hover { background: var(--kleur-tint); color: var(--kleur-merk-tekst); }
.nav__sub-alles {
  display: flex; align-items: center; gap: 0.4em;
  margin-top: 6px; padding: 0.7em 0.85em;
  border-top: 1px solid var(--kleur-lijn);
  font-family: var(--font-kop); font-weight: 650; font-size: 0.9rem;
  color: var(--kleur-merk-tekst); text-decoration: none;
}

.kop__acties { display: flex; align-items: center; gap: 12px; flex: none; }
/* Dezelfde schuivende kleurverloop als het meetingblok, zonder het ademen. */
.kop__acties .knop--primair,
.kop__acties .knop--primair:hover {
  background: linear-gradient(110deg, var(--kleur-merk), #ff9a3d, var(--kleur-merk-diep), var(--kleur-merk));
  background-size: 300% 100%;
  animation: verloopSchuif 8s ease-in-out infinite alternate;
}
.kop__inloggen {
  display: inline-flex; align-items: center; gap: 0.4em;
  font-family: var(--font-kop); font-weight: 600; font-size: 0.94rem;
  color: var(--kleur-ink); text-decoration: none;
  padding: 0.8em 1.1em;
  border: 1px solid var(--kleur-lijn-sterk);
  border-radius: var(--rond-s);
  transition: border-color 0.2s, color 0.2s;
}
.kop__inloggen:hover { border-color: var(--kleur-ink); color: var(--kleur-ink); }

.kop__menuknop {
  display: none; flex: none;
  width: 46px; height: 46px;
  align-items: center; justify-content: center;
  background: var(--kleur-vlak);
  border: 1px solid var(--kleur-lijn-sterk);
  border-radius: var(--rond-s);
  color: var(--kleur-ink); cursor: pointer;
}
.kop__menuknop .ico { width: 22px; height: 22px; }
.kop__menu-dicht { display: none; }
.kop__menuknop[aria-expanded='true'] .kop__menu-open { display: none; }
.kop__menuknop[aria-expanded='true'] .kop__menu-dicht { display: block; }

.mobielmenu {
  border-top: 1px solid var(--kleur-lijn);
  background: var(--kleur-vlak);
  max-height: calc(100dvh - 78px);
  overflow-y: auto;
  padding: 20px 0 32px;
}
.mobielmenu ul { list-style: none; margin: 0 0 20px; padding: 0; }
.mobielmenu a {
  display: block; padding: 0.7em 0;
  font-family: var(--font-kop); font-weight: 600; font-size: 1.05rem;
  color: var(--kleur-ink); text-decoration: none;
  border-bottom: 1px solid var(--kleur-lijn);
}
.mobielmenu__sub a { font-weight: 450; font-size: 0.95rem; padding-left: 16px; color: var(--kleur-tekst); }
.mobielmenu__acties { display: grid; gap: 10px; }
.mobielmenu__acties .knop, .mobielmenu__acties .kop__inloggen { justify-content: center; }

/* -------------------------------------------------------------- 6. hero */

.hero { position: relative; padding: clamp(36px, 5vw, 64px) 0 0; overflow: hidden; }

.hero::before {
  content: '';
  position: absolute; inset: -180px -10% auto -10%; height: 640px;
  background:
    radial-gradient(60% 70% at 78% 30%, color-mix(in srgb, var(--kleur-tint) 90%, transparent), transparent 70%),
    radial-gradient(50% 60% at 12% 8%, color-mix(in srgb, var(--kleur-merk-zacht) 75%, transparent), transparent 72%);
  z-index: -1;
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}

.hero__tekst h1 { margin-bottom: 0.35em; }
.hero__slogan {
  font-family: var(--font-kop);
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.25rem);
  font-weight: 600;
  color: var(--kleur-ink);
  margin-bottom: 0.7em;
}
.hero__intro { font-size: 1.05rem; max-width: 46ch; margin-bottom: 1.8rem; }
.hero__knoppen { margin-bottom: 1.5rem; }

.hero__zeker { display: flex; flex-wrap: wrap; gap: 10px 24px; list-style: none; margin: 0; padding: 0; }
.hero__zeker li {
  display: flex; align-items: center; gap: 0.5em;
  font-size: 0.93rem; color: var(--kleur-tekst);
}
.hero__zeker .ico { color: var(--kleur-accent); width: 1.25em; height: 1.25em; }

/* Beeld met zwevende kaartjes */
.hero__beeld { position: relative; --uitloop: 0px; }

/* Op brede schermen loopt de woning door tot de rand van het scherm, net als
   in het ontwerp. De hero heeft overflow:hidden, dus dit veroorzaakt geen
   horizontale scrollbalk.

   --uitloop is precies hoever het beeld voorbij de schermrand steekt. De
   kaartjes rekenen daarmee, zodat ze binnen beeld blijven. */
@media (min-width: 1240px) {
  .hero__beeld {
    --uitloop: calc((100vw - var(--wrap)) / 2 + 40px);
    margin-right: calc(-1 * var(--uitloop));
  }
}
.hero__woning {
  position: relative; z-index: 1;
  filter: drop-shadow(0 24px 50px rgb(14 35 64 / 0.16));
  animation: zweef 9s ease-in-out infinite;
}
.hero__woning img { width: 100%; }

/* Bescheidener beeld (contactpagina): blijft binnen de kolom en loopt niet door. */
.hero__beeld--klein { --uitloop: 0px; margin-right: 0; width: 92%; justify-self: end; }

.zwevend {
  position: absolute; z-index: 2;
  background: var(--kleur-vlak);
  border: 1px solid color-mix(in srgb, var(--kleur-lijn) 70%, transparent);
  border-radius: var(--rond-m);
  box-shadow: var(--schaduw-l);
  padding: 14px 16px;
  font-size: 0.82rem;
  animation: zweef 7s ease-in-out infinite;
}
.zwevend__kop {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-family: var(--font-kop); font-weight: 650; color: var(--kleur-ink);
  font-size: 0.9rem; margin-bottom: 10px;
}
.zwevend__label { color: var(--kleur-stil); font-size: 0.76rem; }
.zwevend__cijfer {
  font-family: var(--font-kop); font-weight: 700;
  font-size: 1.5rem; color: var(--kleur-ink); line-height: 1.1;
}
.zwevend__delta { color: var(--kleur-accent); font-weight: 650; font-size: 0.8rem; }
.zwevend__pil {
  font-size: 0.72rem; font-weight: 650;
  color: var(--kleur-accent);
  background: var(--kleur-accent-zacht);
  padding: 0.25em 0.7em; border-radius: var(--rond-vol);
}
.zwevend .knop { margin-top: 10px; width: 100%; }

.zwevend--omzet { top: 2%; left: -1%; width: min(52%, 252px); animation-delay: -1.5s; }
.zwevend--btw { bottom: 2%; left: -6%; width: min(42%, 196px); animation-delay: -3.5s; }
/* Het beeld loopt op brede schermen door tot de schermrand. Een negatieve
   `right` zou dit kaartje dus voorbij de rand duwen; daarom een positieve
   marge die meeschaalt met de schermbreedte. */
.zwevend--factuur { top: 46%; right: clamp(12px, 2.5vw, 40px); width: min(44%, 205px); animation-delay: -5s; }

.grafiek { width: 100%; height: 62px; overflow: visible; }
.grafiek__lijn {
  fill: none; stroke: var(--kleur-accent); stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 400; stroke-dashoffset: 400;
  animation: teken 2.2s var(--soepel) 0.4s forwards;
}
.grafiek__vlak { fill: color-mix(in srgb, var(--kleur-accent) 12%, transparent); }
.grafiek__as { font-size: 7px; fill: var(--kleur-stil); font-family: var(--font-tekst); }

.balkjes { display: flex; align-items: flex-end; gap: 5px; height: 46px; margin-top: 8px; }
.balkjes span {
  flex: 1; border-radius: 3px 3px 0 0;
  background: color-mix(in srgb, var(--kleur-accent) 45%, transparent);
  transform-origin: bottom; animation: opkomen 0.8s var(--soepel) backwards;
}
.balkjes span:last-child { background: var(--kleur-accent); }

.regels { display: grid; gap: 7px; margin: 8px 0 10px; }
.regels i { display: block; height: 7px; border-radius: 4px; background: var(--kleur-lijn); }
.regels i:nth-child(2) { width: 78%; }
.regels i:nth-child(3) { width: 55%; }

@keyframes zweef {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-11px); }
}
@keyframes teken { to { stroke-dashoffset: 0; } }
@keyframes opkomen { from { transform: scaleY(0.1); opacity: 0; } }

/* -------------------------------------------------------------- 7. balken */

/* De witte USP-balk die over de onderkant van de hero valt */
.uspbalk { position: relative; z-index: 5; margin-top: clamp(28px, 4vw, 52px); }
.uspbalk__binnen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  background: var(--kleur-vlak);
  border: 1px solid var(--kleur-lijn);
  border-radius: var(--rond-l);
  box-shadow: var(--schaduw-m);
  overflow: hidden;
}
.uspbalk__item {
  display: flex; align-items: center; gap: 12px;
  padding: 22px 20px;
  border-right: 1px solid var(--kleur-lijn);
  font-family: var(--font-kop); font-weight: 600; font-size: 0.9rem;
  color: var(--kleur-ink); line-height: 1.35;
}
.uspbalk__item:last-child { border-right: 0; }
.uspbalk__item .dienst-icon { width: 42px; height: 42px; }

/* Het duinlint als scheiding tussen secties */
.duinlint { position: relative; margin-top: -1px; pointer-events: none; }
.duinlint img { width: 100%; opacity: 0.9; }

/* ----------------------------------------------------------- 8. secties */

.sectie { padding-block: var(--sectie-ruimte); }
.sectie--zand { background: var(--kleur-zand); }
.sectie--tint { background: var(--kleur-tint); }
.sectie--zacht { background: color-mix(in srgb, var(--kleur-zand) 55%, var(--kleur-bg)); }
.sectie--ink { background: var(--kleur-ink); color: color-mix(in srgb, #fff 82%, var(--kleur-ink)); }
.sectie--ink h2, .sectie--ink h3 { color: #fff; }
.sectie--strak { padding-block: clamp(40px, 5vw, 64px); }
/* Sluit strak aan op de sectie erboven: hoort inhoudelijk bij elkaar, maar
   staat op een eigen ondergrond. Boven en onder even veel lucht, zodat de
   band als één blok leest. */
.sectie--aansluitend { padding-block: clamp(24px, 3vw, 38px); }

.sectiekop { margin-bottom: clamp(32px, 4vw, 52px); }
.sectiekop--midden { text-align: center; max-width: 720px; margin-inline: auto; }
.sectiekop__titel { margin-bottom: 0.4em; }
.sectiekop__intro { font-size: 1.05rem; margin: 0; }
.sectiekop--midden .sectiekop__intro { margin-inline: auto; max-width: 60ch; }

.raster { display: grid; gap: clamp(14px, 1.6vw, 22px); }
.raster--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.raster--3 { grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); }
.raster--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(28px, 4vw, 60px);
  align-items: center;
}
.split__beeld img { border-radius: var(--rond-l); width: 100%; }
.split--om .split__beeld { order: 2; }

/* Portretblok op de over-onspagina: grote foto naast een persoonlijk verhaal. */
.portret { display: grid; gap: clamp(20px, 2.5vw, 34px); align-items: start; }
@media (min-width: 900px) {
  .portret { grid-template-columns: 230px minmax(0, 1fr); }
  .portret__beeld { position: sticky; top: 104px; }
}
.portret__kader {
  aspect-ratio: 1; width: min(230px, 100%); border-radius: var(--rond-vol); overflow: hidden;
  display: grid; place-items: center;
  background: linear-gradient(155deg, var(--kleur-merk-zacht), var(--kleur-zand));
}
.portret__kader img { width: 100%; height: 100%; object-fit: cover; display: block; }
.portret__letter {
  font-size: clamp(4.5rem, 10vw, 8rem); font-weight: 700; line-height: 1;
  color: var(--kleur-accent); opacity: 0.55;
}
.portret__tekst h2 { margin: 6px 0 18px; }
.portret__tekst p { max-width: 66ch; }
.portret__tekst p + p { margin-top: 16px; }
/* Iets meer ruimte voor de tekstkolom, zodat een lange kop op twee regels past.
   Onder deze breedte staan de twee helften toch al onder elkaar. */
@media (min-width: 900px) {
  .split--tekstbreed { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
}

/* ---------------------------------------------------------- 9. kaarten */

.kaart {
  display: block;
  background: var(--kleur-vlak);
  border: 1px solid var(--kleur-lijn);
  border-radius: var(--rond-m);
  padding: 24px 22px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.28s var(--soepel), box-shadow 0.28s var(--soepel), border-color 0.28s;
}
a.kaart:hover {
  transform: translateY(-4px);
  box-shadow: var(--schaduw-m);
  border-color: color-mix(in srgb, var(--kleur-merk) 35%, var(--kleur-lijn));
}
.kaart h3 { margin-bottom: 0.4em; }
.kaart p { font-size: 0.94rem; margin-bottom: 0; }
.kaart p + p { margin-top: 14px; }
.kaart__meer {
  display: inline-flex; align-items: center; gap: 0.4em;
  margin-top: 14px;
  font-family: var(--font-kop); font-weight: 650; font-size: 0.9rem;
  color: var(--kleur-merk-tekst);
}
.kaart__meer .ico { transition: transform 0.22s var(--soepel); }
a.kaart:hover .kaart__meer .ico { transform: translateX(4px); }

.dienst-icon {
  display: grid; place-items: center;
  width: 62px; height: 62px;
  margin-bottom: 16px;
}
.dienst-icon img { width: 100%; height: 100%; object-fit: contain; }

.kaart__label {
  font-family: var(--font-kop); font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--kleur-merk-tekst); margin-bottom: 0.6em;
}
.kaart--artikel h3 { font-size: 1.15rem; }
.kaart__tekst { color: var(--kleur-tekst); }
.kaart__meta {
  display: flex; align-items: center; gap: 0.45em;
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--kleur-lijn);
  font-size: 0.85rem; color: var(--kleur-stil);
}
.kaart__meta .kaart__meer { margin: 0 0 0 auto; }

/* Kleine feature-kaart met inline icoon */
.mini { display: flex; gap: 14px; align-items: flex-start; }
.mini__ico {
  display: grid; place-items: center; flex: none;
  width: 44px; height: 44px; border-radius: var(--rond-s);
  background: var(--kleur-merk-zacht); color: var(--kleur-merk-tekst);
}
.mini__ico .ico { width: 22px; height: 22px; }
.mini h3 { font-size: 1.02rem; margin-bottom: 0.3em; }
.mini p { font-size: 0.93rem; margin: 0; }

.vinklijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.vinklijst li { display: flex; gap: 0.7em; align-items: flex-start; }
.vinklijst .ico { color: var(--kleur-accent); margin-top: 0.28em; width: 1.2em; height: 1.2em; }
/* Twee kolommen naast elkaar; op smalle schermen weer onder elkaar. */
.vinklijst--twee { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 26px; text-align: left; }
@media (max-width: 560px) { .vinklijst--twee { grid-template-columns: 1fr; } }

/* ----------------------------------------------------------- 10. stappen */

/* De stappen staan in rijen (bij vijf stappen: twee boven drie). Elke rij
   verdeelt zichzelf over de volle breedte en klapt op smallere schermen
   vanzelf terug naar minder kolommen. */
.stappen {
  --stap-gat: clamp(20px, 3vw, 40px);
  display: grid;
  /* Ruimte tússen de rijen stappen; iets meer dan de ruimte binnen een rij,
     zodat de twee rijen als aparte groepen lezen. */
  gap: clamp(40px, 5vw, 66px);
  position: relative;
}
.stappenrij {
  display: grid;
  /* --kolommen en --basis komen uit de build: het aantal stappen in deze rij
     en in de breedste rij. */
  grid-template-columns: repeat(var(--kolommen, 3), minmax(0, 1fr));
  gap: var(--stap-gat);
}

/* Een rij met minder stappen dan de breedste rij krijgt precies dezelfde
   kolombreedte en staat gecentreerd. Zonder dit zouden twee stappen over de
   volle breedte ver uit elkaar komen te staan. */
.stappenrij--smal {
  /* width expliciet, anders krimpt het element door `margin-inline: auto`
     naar zijn inhoud in plaats van naar de berekende maximumbreedte. */
  width: 100%;
  max-width: calc(
    (100% - (var(--basis) - 1) * var(--stap-gat)) / var(--basis) * var(--kolommen)
    + (var(--kolommen) - 1) * var(--stap-gat));
  margin-inline: auto;
}

/* Tablet: overal twee naast elkaar. Blijft er één over, dan krijgt die de
   volle breedte, zodat hij gecentreerd staat in plaats van scheef links. */
@media (max-width: 880px) {
  .stappenrij { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stappenrij--smal { max-width: none; }
  .stappenrij > .stap:nth-child(3):last-child { grid-column: span 2; }
}
@media (max-width: 560px) {
  .stappenrij { grid-template-columns: 1fr; }
  .stappenrij > .stap:nth-child(3):last-child { grid-column: auto; }
}
.stap { text-align: center; position: relative; }

/* Koppen van verschillende lengte zouden de kolommen uit elkaar trekken.
   Met subgrid liggen beeld, kop en tekst binnen een rij op dezelfde hoogte.
   Browsers zonder subgrid vallen terug op de normale stapeling. */
@supports (grid-template-rows: subgrid) {
  .stappenrij { grid-template-rows: auto auto auto; }
  .stap { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
  .stap h3 { align-self: end; }
}

/* De illustraties verschillen in hoogte. Verticaal centreren zorgt dat hun
   middelpunten op één lijn liggen; de maximumbreedte houdt ze in alle rijen
   even groot, ook als een rij minder kolommen heeft. */
.stap__beeld {
  position: relative;
  /* width expliciet: met alleen `margin-inline: auto` valt een grid-item
     terug op shrink-to-fit, en dan heeft het beeld geen breedte meer. */
  width: 100%;
  max-width: 324px;
  margin: 0 auto 18px;
  align-self: center;
}
/* picture is van zichzelf inline en krijgt dan een paar pixels regelruimte
   onder het beeld; dat verschuift het middelpunt net iets. */
.stap__beeld picture { display: block; }
.stap__beeld img { border-radius: var(--rond-l); width: 100%; }
.stap__nummer {
  /* Linksboven het beeld, ongeacht hoe breed de kolom is. */
  position: absolute; top: -8px; left: 4%;
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: var(--rond-vol);
  background: var(--kleur-merk); color: #fff;
  font-family: var(--font-kop); font-weight: 700; font-size: 1.05rem;
  box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--kleur-merk) 80%, transparent);
}
.stap h3 { margin-bottom: 0.35em; }
.stap p { font-size: 0.95rem; max-width: 34ch; margin-inline: auto; }


/* --------------------------------------------------- 11. reviews & kaart */

.bewijs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: center; }

.citaat {
  background: var(--kleur-vlak);
  border: 1px solid var(--kleur-lijn);
  border-radius: var(--rond-l);
  padding: 28px;
  box-shadow: var(--schaduw-s);
}
.citaat__teken { color: color-mix(in srgb, var(--kleur-merk) 45%, transparent); width: 34px; height: 34px; }
.citaat blockquote { margin: 8px 0 18px; font-size: 1.06rem; color: var(--kleur-ink); font-family: var(--font-kop); font-weight: 500; line-height: 1.5; }
.citaat__wie { display: flex; align-items: center; gap: 12px; }
.citaat__avatar {
  width: 46px; height: 46px; border-radius: var(--rond-vol); flex: none;
  background: linear-gradient(140deg, var(--kleur-merk-zacht), var(--kleur-tint));
  display: grid; place-items: center;
  font-family: var(--font-kop); font-weight: 700; color: var(--kleur-merk-tekst);
}
.citaat__naam { font-family: var(--font-kop); font-weight: 650; color: var(--kleur-ink); font-size: 0.96rem; }
.citaat__rol { font-size: 0.86rem; color: var(--kleur-stil); }

.sterren { display: inline-flex; gap: 2px; color: #f5a623; }
.sterren .ico { fill: currentColor; width: 1.05em; height: 1.05em; }

.cijfers { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px; margin-top: clamp(28px, 3vw, 44px); }
.cijfer { text-align: center; padding: 20px 12px; border-radius: var(--rond-m); background: var(--kleur-vlak); border: 1px solid var(--kleur-lijn); }
.cijfer__waarde { font-family: var(--font-kop); font-weight: 700; font-size: 1.7rem; color: var(--kleur-ink); line-height: 1.1; }
.cijfer__label { font-size: 0.86rem; color: var(--kleur-stil); }

.nlkaart { width: 100%; max-width: 260px; margin-inline: auto; display: block; }
.nlkaart__land { stroke-linejoin: round; fill: color-mix(in srgb, var(--kleur-accent) 16%, transparent); stroke: color-mix(in srgb, var(--kleur-accent) 40%, transparent); stroke-width: 1.5; }
.nlkaart__water { fill: var(--kleur-zand); }
.nlkaart__pin { fill: var(--kleur-merk); animation: pinval 0.6s var(--soepel) backwards; animation-delay: calc(var(--i) * 90ms + 0.2s); }
.nlkaart__pinhart { fill: #fff; }
@keyframes pinval { from { opacity: 0; transform: translateY(-14px); } }

/* --------------------------------------------------------- strandstoel */

.strandstoel { padding-block: clamp(20px, 3vw, 32px); }
.strandstoel__kaart {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: clamp(18px, 3vw, 40px);
  background: var(--kleur-zand);
  border: 1px solid color-mix(in srgb, var(--kleur-merk) 14%, var(--kleur-lijn));
  border-radius: var(--rond-l);
  padding: clamp(18px, 3vw, 28px) clamp(20px, 3vw, 36px);
}
.strandstoel__beeld { width: clamp(120px, 16vw, 190px); flex: none; }
.strandstoel__tekst h2 { font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.6rem); margin-bottom: 0.25em; }
.strandstoel__tekst p { font-size: 0.96rem; margin: 0; }
.strandstoel__kanalen { display: flex; gap: 10px; }
.strandstoel__kanalen a {
  display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: var(--rond-vol);
  background: var(--kleur-vlak); color: var(--kleur-merk-tekst);
  border: 1px solid var(--kleur-lijn);
  transition: transform 0.2s var(--soepel), background-color 0.2s, color 0.2s;
}
.strandstoel__kanalen a:hover { transform: translateY(-3px); background: var(--kleur-merk); color: #fff; }

/* ------------------------------------------------------------- ctaband */

.ctaband { padding-block: clamp(30px, 4vw, 52px); }
.ctaband__kaart {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: clamp(20px, 3vw, 40px);
  background: var(--kleur-zand);
  border-radius: var(--rond-xl);
  padding: clamp(28px, 4vw, 44px) clamp(24px, 4vw, 48px);
}
.ctaband__duin { position: absolute; inset: 0; z-index: 0; }
.ctaband__zand { position: absolute; right: 0; bottom: -2px; width: min(66%, 700px); opacity: 0.6; }
.ctaband__zand img { width: 100%; }
.ctaband__tekst, .ctaband__acties { position: relative; z-index: 1; }
.ctaband__tekst h2 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem); margin-bottom: 0.3em; }
.ctaband__tekst p { margin: 0; max-width: 46ch; }
.ctaband__acties { display: grid; gap: 10px; justify-items: center; }
.ctaband__acties .knop { box-shadow: 0 8px 24px -8px rgb(14 35 64 / 0.35); }
.ctaband__tel {
  display: inline-flex; align-items: center; gap: 0.45em;
  font-size: 0.92rem; font-weight: 600; color: var(--kleur-ink); text-decoration: none;
}

/* ---------------------------------------------------------------- faq */

.faq__lijst { max-width: 800px; margin-inline: auto; display: grid; gap: 10px; }
.faq__item {
  background: var(--kleur-vlak);
  border: 1px solid var(--kleur-lijn);
  border-radius: var(--rond-m);
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.faq__item[open] { border-color: color-mix(in srgb, var(--kleur-merk) 35%, var(--kleur-lijn)); box-shadow: var(--schaduw-s); }
.faq__vraag {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 22px; cursor: pointer;
  font-family: var(--font-kop); font-weight: 600; font-size: 1.02rem;
  color: var(--kleur-ink); list-style: none;
}
.faq__vraag::-webkit-details-marker { display: none; }
.faq__teken { position: relative; flex: none; width: 22px; height: 22px; }
.faq__teken::before, .faq__teken::after {
  content: ''; position: absolute; inset: 50% 0 auto 0;
  height: 2px; border-radius: 2px; background: var(--kleur-merk);
  transition: transform 0.28s var(--soepel), opacity 0.2s;
}
.faq__teken::after { transform: rotate(90deg); }
.faq__item[open] .faq__teken::after { transform: rotate(0); opacity: 0; }
.faq__antwoord { padding: 0 22px 20px; }
.faq__antwoord p { color: var(--kleur-tekst); margin: 0; max-width: 68ch; }
.faq__antwoord p + p { margin-top: 12px; }
.faq__antwoord ul { color: var(--kleur-tekst); max-width: 68ch; margin: 12px 0 0; padding-left: 20px; }
.faq__antwoord ul li { margin-top: 4px; }
.faq__antwoord ul + p { margin-top: 12px; }
.faq__item[open] .faq__antwoord { animation: uitvouwen 0.35s var(--soepel); }
@keyframes uitvouwen { from { opacity: 0; transform: translateY(-6px); } }

/* -------------------------------------------------------- 12. tarieven */

.prijskaart {
  position: relative;
  max-width: 720px; margin-inline: auto;
  background: var(--kleur-vlak);
  border: 1px solid var(--kleur-lijn);
  border-radius: var(--rond-xl);
  box-shadow: var(--schaduw-m);
  padding: clamp(32px, 4vw, 52px);
  text-align: center;
}
.prijskaart__vlag {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
  background: var(--kleur-merk); color: #fff;
  font-family: var(--font-kop); font-weight: 700; font-size: 0.8rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.55em 1.4em; border-radius: var(--rond-vol);
}
.prijskaart__prijs {
  display: flex; align-items: baseline; justify-content: center; gap: 0.2em;
  font-family: var(--font-kop); font-weight: 700; color: var(--kleur-ink);
  line-height: 1;
}
.prijskaart__bedrag { font-size: clamp(3.6rem, 2rem + 7vw, 5.6rem); letter-spacing: -0.04em; }
.prijskaart--rekenhulp .prijskaart__bedrag { font-size: clamp(2.9rem, 1.8rem + 5vw, 4.2rem); }
.prijskaart--rekenhulp .prijskaart__pm { font-size: 1.2rem; }
.prijskaart--rekenhulp .schuif { max-width: 460px; margin: 22px auto 0; }
.prijskaart__pm { font-size: 1.4rem; color: var(--kleur-stil); font-weight: 600; }
.prijskaart__btw { color: var(--kleur-stil); font-size: 0.85rem; margin-top: 0.55em; }
.prijskaart__btw + .prijskaart__onder { margin-top: 0.25em; }

/* Verspringknopje naar de uitleg over mutaties. */
.infoknop {
  display: inline-flex; vertical-align: -0.22em; margin-left: 0.35em;
  color: var(--kleur-stil); transition: color 0.15s var(--soepel);
}
.infoknop .ico { width: 1.05em; height: 1.05em; }
.infoknop:hover, .infoknop:focus-visible { color: var(--kleur-merk); }
#mutatie { scroll-margin-top: 110px; }

/* Uitlegwolkje boven het (i)-knopje. Verschijnt bij hover en bij toetsenbord-
   focus; op een touchscreen bestaat hover niet, daar brengt de link je naar
   dezelfde uitleg verderop op de pagina. */
.infowenk { position: relative; display: inline-block; }
.infoknop__tip {
  position: absolute; left: 50%; bottom: calc(100% + 10px);
  transform: translateX(-50%) translateY(4px);
  width: max-content; max-width: min(260px, 70vw);
  padding: 10px 12px; border-radius: var(--rond-s);
  background: var(--kleur-ink); color: #fff;
  font-size: 0.78rem; line-height: 1.45; text-align: left; font-weight: 400;
  box-shadow: var(--schaduw-m);
  opacity: 0; visibility: hidden; pointer-events: none; z-index: 5;
  transition: opacity 0.16s var(--soepel), transform 0.16s var(--soepel),
              visibility 0.16s;
}
.infoknop__tip::after {
  content: ''; position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: var(--kleur-ink);
}
.infowenk:hover .infoknop__tip,
.infoknop:focus-visible + .infoknop__tip {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.prijskaart__onder { color: var(--kleur-stil); margin-top: 0.5em; }

/* Kleine terzijde naast een kop, bv. "excl. btw". Erft niet de
   kopgrootte, zodat het als voetnoot leest en niet als deel van de kop. */
.kop-noot {
  font-family: var(--font-tekst); font-size: 0.42em; font-weight: 500;
  color: var(--kleur-stil); white-space: nowrap; vertical-align: 0.35em;
}
.prijskaart__scheiding { border: 0; border-top: 1px solid var(--kleur-lijn); margin: 28px 0; }
.prijskaart .vinklijst { text-align: left; max-width: 420px; margin-inline: auto; }
/* Twee kolommen hebben meer ruimte nodig dan de smalle lijst van één kolom. */
.prijskaart .vinklijst--twee { max-width: 620px; }
/* Kleine lettertjes onder het pakket. Niet in --kleur-stil: dat haalt op deze
   grootte de 4,5:1 van WCAG AA niet. */
.prijskaart__klein {
  max-width: 480px; margin: 22px auto 0;
  font-size: 0.78rem; font-style: italic; line-height: 1.5;
  color: color-mix(in srgb, var(--kleur-ink) 64%, #ffffff);
}
.prijskaart .knoppenrij { justify-content: center; margin-top: 28px; }

.tabelomhulsel { overflow-x: auto; border: 1px solid var(--kleur-lijn); border-radius: var(--rond-m); background: var(--kleur-vlak); }
table.tabel { width: 100%; border-collapse: collapse; min-width: 520px; }
table.tabel th, table.tabel td { padding: 15px 22px; text-align: left; border-bottom: 1px solid var(--kleur-lijn); font-size: 0.95rem; }
table.tabel thead th {
  font-family: var(--font-kop); font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--kleur-stil);
  background: color-mix(in srgb, var(--kleur-tint) 55%, var(--kleur-vlak));
}
table.tabel tbody tr:last-child td { border-bottom: 0; }
table.tabel td:last-child { text-align: right; font-family: var(--font-kop); font-weight: 650; color: var(--kleur-ink); white-space: nowrap; }
table.tabel tbody tr:hover { background: color-mix(in srgb, var(--kleur-zand) 60%, transparent); }

.uitleg {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: 22px; align-items: start;
  background: var(--kleur-vlak); border: 1px solid var(--kleur-lijn);
  border-radius: var(--rond-l); padding: clamp(22px, 3vw, 32px);
}
.uitleg__ico {
  display: grid; place-items: center; width: 62px; height: 62px;
  border-radius: var(--rond-vol);
  background: var(--kleur-merk-zacht); color: var(--kleur-merk);
}
.uitleg__ico .ico { width: 30px; height: 30px; }
.uitleg--blauw .uitleg__ico { background: var(--kleur-tint); color: var(--kleur-ink-zacht); }
.uitleg h3 { margin-bottom: 0.4em; }

/* Variant met het icoon náást de kop en de tekst op een eigen regel eronder,
   over de volle breedte. Zo houdt het icoon geen kolom tekst bezet. */
.uitleg--kop {
  column-gap: 18px; row-gap: 14px;
  /* Icoon en kop op elkaar centreren, maar de rijen wel bovenaan houden,
     anders zakken ze in een even hoog gemaakte kaart naar het midden. */
  align-items: center; align-content: start;
}
.uitleg--kop > h3 { margin: 0; align-self: center; }
.uitleg--kop > .uitleg__tekst { grid-column: 1 / -1; }
.uitleg p:last-child { margin-bottom: 0; }
.uitleg ul { margin: 0 0 0.6em; padding-left: 1.2em; }
.uitleg li::marker { color: var(--kleur-merk); }

/* ------------------------------------------------ 13. artikelen & A-Z */

.artikelkop { padding-block: clamp(28px, 4vw, 48px) clamp(20px, 3vw, 32px); }
.artikelkop__meta { display: flex; flex-wrap: wrap; gap: 8px 20px; color: var(--kleur-stil); font-size: 0.9rem; margin-top: 1rem; }
.artikelkop__meta span { display: inline-flex; align-items: center; gap: 0.4em; }

/* Tekst blijft op leesbreedte; tabellen mogen de hele kolom gebruiken. */
.proza { max-width: none; }
.proza > h2, .proza > h3, .proza > p, .proza > ul, .proza > ol { max-width: 720px; }
.proza h2 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem); margin-top: 2.2em; }
.proza h2:first-child { margin-top: 0; }
.proza h3 { margin-top: 1.8em; }
.proza p, .proza li { font-size: 1.02rem; }
.proza ul, .proza ol { padding-left: 1.3em; margin: 0 0 1.2em; display: grid; gap: 0.5em; }
.proza li::marker { color: var(--kleur-merk); }
.proza .tabelomhulsel { margin: 1.6em 0; }
.proza .tabel td:first-child { font-weight: 600; }

/* Tabellen in juridische teksten lopen terug; horizontaal scrollen hoeft niet.
   De prijstabellen elders houden hun compacte, rechts uitgelijnde opmaak. */
.proza .tabelomhulsel { overflow-x: visible; }
.proza table.tabel { min-width: 0; }
.proza .tabel th, .proza .tabel td {
  vertical-align: top; padding: 14px 18px; overflow-wrap: break-word;
}
.proza .tabel td:last-child {
  text-align: left; white-space: normal; font-family: inherit;
  font-weight: 400; color: var(--kleur-tekst);
}
.proza .tabel th:first-child, .proza .tabel td:first-child { width: 30%; }
@media (max-width: 700px) {
  .proza .tabel, .proza .tabel tbody, .proza .tabel tr, .proza .tabel td { display: block; width: auto; }
  .proza .tabel thead { display: none; }
  .proza .tabel tr { border-bottom: 1px solid var(--kleur-lijn); }
  .proza .tabel tr:last-child { border-bottom: 0; }
  .proza .tabel td { border: 0; padding: 2px 18px; }
  .proza .tabel td:first-child { width: auto; padding-top: 14px; font-weight: 700; }
  .proza .tabel td:last-child { padding-bottom: 14px; }
}

.tipblok {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px;
  background: var(--kleur-merk-zacht);
  border-left: 4px solid var(--kleur-merk);
  border-radius: var(--rond-m);
  padding: 20px 24px; margin: 1.8em 0;
}
.tipblok__ico { color: var(--kleur-merk); }
.tipblok__ico .ico { width: 24px; height: 24px; }
.tipblok p { margin: 0; font-size: 0.98rem; }
.tipblok strong { display: block; font-family: var(--font-kop); }

.artikellayout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(30px, 4vw, 60px); align-items: start; }
.zijbalk { position: sticky; top: 100px; display: grid; gap: 18px; }
.zijbalk__blok { background: var(--kleur-vlak); border: 1px solid var(--kleur-lijn); border-radius: var(--rond-m); padding: 22px; }
.zijbalk__blok h2 { font-size: 1.05rem; }
.zijbalk__blok ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 0.93rem; }
.zijbalk__blok a { color: var(--kleur-ink); text-decoration: none; }
.zijbalk__blok a:hover { color: var(--kleur-merk-tekst); text-decoration: underline; }
.zijbalk__cta { background: var(--kleur-ink); color: #fff; }
.zijbalk__cta h2 { color: #fff; }
.zijbalk__cta p { font-size: 0.93rem; color: color-mix(in srgb, #fff 78%, var(--kleur-ink)); }
.zijbalk__cta .knop { width: 100%; margin-top: 12px; }

/* A-Z */
.azbalk {
  position: sticky; top: 86px; z-index: 20;
  display: flex; flex-wrap: wrap; gap: 5px; justify-content: center;
  padding: 12px; margin-bottom: 36px;
  background: color-mix(in srgb, var(--kleur-vlak) 90%, transparent);
  backdrop-filter: blur(10px);
  border: 1px solid var(--kleur-lijn); border-radius: var(--rond-m);
}
.azbalk a, .azbalk span {
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: var(--rond-s);
  font-family: var(--font-kop); font-weight: 650; font-size: 0.9rem;
  text-decoration: none; color: var(--kleur-ink);
}
.azbalk a:hover { background: var(--kleur-merk); color: #fff; }
.azbalk span { color: var(--kleur-lijn-sterk); }

.azgroep { margin-bottom: 40px; scroll-margin-top: 150px; }
.azgroep__letter {
  font-family: var(--font-kop); font-size: 2rem; font-weight: 700;
  color: var(--kleur-merk); line-height: 1;
  padding-bottom: 12px; margin-bottom: 18px;
  border-bottom: 2px solid var(--kleur-lijn);
}
/* auto-fill i.p.v. auto-fit: een letter met één begrip blijft dan even
   breed als de rest, in plaats van over de hele breedte uit te rekken. */
.azlijst { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.azitem { background: var(--kleur-vlak); border: 1px solid var(--kleur-lijn); border-radius: var(--rond-m); padding: 20px 22px; }
.azitem h3 { font-size: 1.02rem; margin-bottom: 0.35em; }
.azitem p { font-size: 0.93rem; margin-bottom: 0.6em; }

/* Tijdlijn voor het stappenplan */
.tijdlijn { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; max-width: 780px; }
.tijdlijn li { position: relative; padding: 0 0 28px 56px; }
.tijdlijn li::before {
  content: counter(stap); counter-increment: stap;
  position: absolute; left: 0; top: 0;
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: var(--rond-vol);
  background: var(--kleur-merk-zacht); color: var(--kleur-merk-tekst);
  font-family: var(--font-kop); font-weight: 700;
}
.tijdlijn li::after {
  content: ''; position: absolute; left: 18.5px; top: 44px; bottom: 4px;
  width: 2px; background: var(--kleur-lijn);
}
.tijdlijn li:last-child { padding-bottom: 0; }
.tijdlijn li:last-child::after { display: none; }
.tijdlijn { counter-reset: stap; }
.tijdlijn h3 { margin-bottom: 0.25em; }
.tijdlijn p { font-size: 0.95rem; margin: 0; }

/* Kruimelpad */
.kruimels { padding-top: 18px; font-size: 0.86rem; }
.kruimels ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.kruimels li { display: flex; align-items: center; gap: 4px; }
.kruimels a { color: var(--kleur-stil); text-decoration: none; }
.kruimels a:hover { color: var(--kleur-merk-tekst); }
.kruimels span { color: var(--kleur-ink); font-weight: 500; }
.kruimels__pijl { width: 0.9em; height: 0.9em; color: var(--kleur-lijn-sterk); transform: rotate(-90deg); }

/* ------------------------------------------------------- 14. formulier */

.formulier { display: grid; gap: 18px; }
.veld { display: grid; gap: 6px; }
.veld--half { grid-column: span 1; }
.formulier__rij { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; }
.veld label { font-family: var(--font-kop); font-weight: 600; font-size: 0.92rem; color: var(--kleur-ink); }
.veld input, .veld select, .veld textarea {
  font: inherit; font-size: 0.98rem;
  padding: 0.8em 1em;
  color: var(--kleur-ink);
  background: var(--kleur-vlak);
  border: 1px solid var(--kleur-lijn-sterk);
  border-radius: var(--rond-s);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.veld input:focus, .veld select:focus, .veld textarea:focus {
  outline: none;
  border-color: var(--kleur-merk);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--kleur-merk) 18%, transparent);
}
.veld textarea { min-height: 130px; resize: vertical; }
.veld__hint { font-size: 0.84rem; color: var(--kleur-stil); }
.veld--keuze { display: flex; gap: 0.7em; align-items: flex-start; }
.veld--keuze input { margin-top: 0.25em; }
.veld--keuze label { font-weight: 400; font-family: var(--font-tekst); font-size: 0.92rem; color: var(--kleur-tekst); }

.tijdkeuze { display: flex; flex-wrap: wrap; gap: 8px; }
.tijdkeuze input { position: absolute; opacity: 0; pointer-events: none; }
.tijdkeuze label {
  padding: 0.6em 1.1em; border-radius: var(--rond-vol);
  border: 1px solid var(--kleur-lijn-sterk);
  font-size: 0.9rem; font-weight: 500; cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.tijdkeuze input:checked + label { background: var(--kleur-merk); border-color: var(--kleur-merk); color: #fff; }
.tijdkeuze input:focus-visible + label { outline: 3px solid var(--kleur-merk); outline-offset: 2px; }

/* Bedankpagina na het contactformulier. */
.bedankt { max-width: 620px; margin-inline: auto; text-align: center; }
.bedankt__ico {
  display: grid; place-items: center; width: 72px; height: 72px; margin: 0 auto 24px;
  border-radius: var(--rond-vol); background: var(--kleur-merk-zacht); color: var(--kleur-accent);
}
.bedankt__ico .ico { width: 34px; height: 34px; }
.bedankt h1 { margin-bottom: 14px; }
.bedankt .lood { margin-bottom: 14px; }

/* Spamval: onzichtbaar voor bezoekers, zichtbaar voor bots. */
.spamval { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formulier__fout {
  margin: 14px 0 0; padding: 12px 16px; border-radius: var(--rond-s);
  background: color-mix(in srgb, #d7263d 10%, transparent);
  color: #a01a2c; font-size: 0.92rem;
}
.formulier__melding {
  display: none;
  background: var(--kleur-accent-zacht);
  border: 1px solid color-mix(in srgb, var(--kleur-accent) 35%, transparent);
  border-radius: var(--rond-m); padding: 18px 22px;
}
.formulier__melding.is-zichtbaar { display: block; }

.contactblok {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(28px, 4vw, 56px); align-items: start;
}
.contactkaart { background: var(--kleur-vlak); border: 1px solid var(--kleur-lijn); border-radius: var(--rond-l); padding: clamp(24px, 3vw, 36px); box-shadow: var(--schaduw-s); }
.contactzij { display: grid; gap: 18px; }
.contacthoofd { display: grid; gap: 22px; }

/* Online meeting: ademt zacht en het verloop schuift langzaam mee. */
.meetingblok {
  display: flex; align-items: center; gap: 18px;
  padding: clamp(20px, 2.6vw, 28px) clamp(22px, 3vw, 32px);
  border-radius: var(--rond-l);
  background: linear-gradient(110deg, var(--kleur-merk), #ff9a3d, var(--kleur-merk-diep), var(--kleur-merk));
  background-size: 300% 100%;
  color: #fff; text-decoration: none;
  box-shadow: 0 14px 34px -14px color-mix(in srgb, var(--kleur-merk) 80%, transparent);
  animation: verloopSchuif 8s ease-in-out infinite alternate, ademen 3.6s ease-in-out infinite;
}
.meetingblok:hover, .meetingblok:focus-visible { color: #fff; animation-play-state: paused; box-shadow: 0 18px 40px -14px color-mix(in srgb, var(--kleur-merk) 90%, transparent); }
.meetingblok__ico {
  flex: none; display: grid; place-items: center;
  width: 52px; height: 52px; border-radius: var(--rond-vol);
  background: rgb(255 255 255 / 0.2);
}
.meetingblok__ico .ico { width: 26px; height: 26px; }
.meetingblok__tekst { display: grid; gap: 3px; flex: 1; }
.meetingblok__tekst strong { font-family: var(--font-kop); font-size: 1.25rem; line-height: 1.2; color: #fff; }
.meetingblok .ico { color: #fff; }
.meetingblok__tekst span { font-size: 0.94rem; opacity: 0.92; }
.meetingblok__pijl .ico { width: 24px; height: 24px; transition: transform 0.3s var(--soepel); }
.meetingblok:hover .meetingblok__pijl .ico { transform: translateX(4px); }
@keyframes verloopSchuif { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@keyframes ademen { 0%, 100% { scale: 1; } 50% { scale: 1.025; } }
.contactzij__item { display: flex; gap: 14px; align-items: flex-start; }
.contactzij__item .ico { color: var(--kleur-merk); margin-top: 0.2em; }
.contactzij__item a { color: var(--kleur-ink); text-decoration: none; font-weight: 600; }

/* --------------------------------------------------------- 15. footer */

.voet { background: var(--kleur-ink); color: rgb(255 255 255 / 0.88); }
.voet__binnen {
  display: grid;
  grid-template-columns: minmax(240px, 1.3fr) repeat(3, minmax(150px, 1fr)) minmax(200px, 1.1fr);
  gap: clamp(24px, 3vw, 44px);
  padding-block: clamp(44px, 5vw, 68px) 36px;
}
.voet__logo img { width: 190px; filter: brightness(0) invert(1) drop-shadow(0 0 0 transparent); }
.voet__merk p { font-size: 0.92rem; margin: 16px 0 20px; max-width: 34ch; }
.voet__socials { display: flex; gap: 10px; }
.voet__socials a {
  display: grid; place-items: center; width: 38px; height: 38px;
  border-radius: var(--rond-vol);
  border: 1px solid color-mix(in srgb, #fff 22%, transparent);
  color: #fff; transition: background-color 0.2s, border-color 0.2s;
}
.voet__socials a:hover { background: var(--kleur-merk); border-color: var(--kleur-merk); }

.voet__kolom h2 { font-size: 0.95rem; color: #fff; margin-bottom: 1em; font-family: var(--font-kop); }
.voet__kolom ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.voet__kolom a, .voet__kolom span {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-size: 0.9rem; color: rgb(255 255 255 / 0.88);
  text-decoration: none;
}
.voet__kolom a:hover { color: #fff; text-decoration: underline; }
.voet__contact .ico { color: var(--kleur-merk); flex: none; }
.voet__contact .knop { margin-top: 18px; }
/* De oranje slagschaduw van de knop leest op de donkere voet als een gloed. */
.voet .knop--primair, .voet .knop--primair:hover { box-shadow: none; }

.voet__onder {
  display: flex; flex-wrap: wrap; gap: 12px 28px;
  align-items: center; justify-content: space-between;
  padding-block: 20px 26px;
  border-top: 1px solid color-mix(in srgb, #fff 14%, transparent);
  font-size: 0.85rem;
}
.voet__onder p { margin: 0; }
.voet__disclaimer { flex-basis: 100%; color: rgb(255 255 255 / 0.62); }
.voet__juridisch { display: flex; flex-wrap: wrap; gap: 10px 22px; list-style: none; margin: 0; padding: 0; }
.voet__juridisch a, .voet__cookieknop {
  color: rgb(255 255 255 / 0.88);
  text-decoration: none; background: none; border: 0; padding: 0;
  font-size: 0.85rem; cursor: pointer;
}
.voet__juridisch a:hover, .voet__cookieknop:hover { color: #fff; text-decoration: underline; }

/* --------------------------------------------------------- cookiemelding */

.cookie {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 150;
  max-width: 720px; margin-inline: auto;
  background: var(--kleur-vlak);
  border: 1px solid var(--kleur-lijn);
  border-radius: var(--rond-l);
  box-shadow: var(--schaduw-l);
  padding: 22px 26px;
  animation: opduiken 0.45s var(--soepel);
}
.cookie[hidden] { display: none; }
.cookie__binnen { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 22px; align-items: center; }
.cookie h2 { font-size: 1.05rem; margin-bottom: 0.3em; }
.cookie p { font-size: 0.9rem; margin: 0; }
.cookie__knoppen { display: flex; gap: 10px; flex-wrap: wrap; }
@keyframes opduiken { from { opacity: 0; transform: translateY(24px); } }

/* ------------------------------------------------------------- animatie */

[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s var(--soepel), transform 0.6s var(--soepel);
  transition-delay: var(--vertraging, 0ms);
}
[data-reveal].is-zichtbaar { opacity: 1; transform: none; }
.geen-js [data-reveal] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ----------------------------------------------------------- responsive */

@media (max-width: 1120px) {
  .kop__inloggen { display: none; }
  .nav__lijst { gap: 0; }
  .nav__link { padding-inline: 0.6em; font-size: 0.92rem; }
}

@media (max-width: 980px) {
  .nav, .kop__acties { display: none; }
  .kop__menuknop { display: flex; }
  .kop__binnen { justify-content: space-between; }
  .hero__grid { grid-template-columns: 1fr; }
  .hero__beeld { order: -1; max-width: 560px; margin-inline: auto; width: 100%; }
  .bewijs { grid-template-columns: 1fr; }
  .nlkaart { max-width: 200px; }
  .artikellayout { grid-template-columns: 1fr; }
  .zijbalk { position: static; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  .contactblok { grid-template-columns: 1fr; }
  .voet__binnen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .voet__merk { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .uspbalk__binnen { grid-template-columns: repeat(2, 1fr); }
  .uspbalk__item { border-bottom: 1px solid var(--kleur-lijn); }
  .uspbalk__item:nth-child(2n) { border-right: 0; }
  .strandstoel__kaart { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .ctaband__kaart { grid-template-columns: 1fr; }
  .ctaband__acties { justify-items: start; }
  .split--om .split__beeld { order: 0; }
  .cookie__binnen { grid-template-columns: 1fr; }
  .zwevend--omzet { left: 0; width: 62%; }
  .zwevend--btw { display: none; }
  .zwevend--factuur { right: 0; width: 54%; }
}

@media (max-width: 520px) {
  .voet__binnen { grid-template-columns: 1fr; }
  .uspbalk__binnen { grid-template-columns: 1fr; }
  .uspbalk__item { border-right: 0; }
  .knoppenrij .knop { width: 100%; }
  .azlijst { grid-template-columns: 1fr; }
}

@media print {
  .kop, .voet, .cookie, .ctaband, .strandstoel, [id^='bnb-admin'] { display: none !important; }
  body { color: #000; }
}

/* ------------------------------------------------- FAQ: link naar alles */

.faq__alles { text-align: center; margin-top: 26px; }
.faq__alles .pijllink { font-size: 0.98rem; }

/* Op de FAQ-pagina staan de rubrieken onder elkaar; wat compacter dan een
   losse sectie, zodat je makkelijk doorleest. */
.faq--rubriek { scroll-margin-top: 90px; }
.faq--rubriek .sectiekop { margin-bottom: 28px; }
.faq--rubriek .faq__alles .pijllink .ico { transform: rotate(180deg); }
.faq--rubriek .faq__alles .pijllink:hover .ico { transform: rotate(180deg) translateY(3px); }

/* Badge op een 'Binnenkort'-pagina — iets warmer dan de gewone badge, zodat
   meteen duidelijk is dat deze sectie nog niet af is. */
.badge--wacht {
  background: var(--kleur-merk-zacht);
  color: var(--kleur-merk-tekst);
}

/* Toelichting onder de stappen, bij het sterretje achter stap 3.
   Het blok gebruikt de opmaak van de uitlegblokken (.uitleg--blauw), zodat
   het er hetzelfde uitziet als "Waarom een vanaf-prijs?" op de tarieven.
   Alleen de breedte en de kleinere tekst wijken af. */
.voetnoot {
  max-width: 100%;
  margin: clamp(32px, 4vw, 46px) auto 0;
  /* Ruimte onder de plakkende header als je via het sterretje hierheen springt. */
  scroll-margin-top: 110px;
}
.voetnoot__binnen { text-align: left; }
.voetnoot p {
  font-size: 0.8rem;
  line-height: 1.65;
  color: color-mix(in srgb, var(--kleur-ink) 64%, #ffffff);
  margin: 0;
}
.voetnoot p + p { margin-top: 0.7em; }

/* De kop is een vetgedrukte alinea, geen kop-element: zo staat hij in
   hetzelfde lettertype als de tekst eronder, en blijft de koppenstructuur
   van de pagina voorbehouden aan echte koppen. Het sterretje hangt links
   buiten de tekstkolom, zodat kop en alinea's op dezelfde lijn beginnen. */
.voetnoot .voetnoot__kop {
  position: relative;
  font-weight: 700;
  color: var(--kleur-ink);
}
.voetnoot .voetnoot__kop + p { margin-top: 0.5em; }
.voetnoot__kop .ster {
  position: absolute;
  right: 100%;
  margin-right: 0.35em;
}

.ster { font-family: var(--font-kop); font-weight: 700; color: var(--kleur-merk); }

/* Dienstenblokken: drie op een rij, zodat zes blokken netjes uitkomen op twee
   volle rijen in plaats van vier plus twee. */
.raster--diensten { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .raster--diensten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .raster--diensten { grid-template-columns: 1fr; } }

/* De teksten in de dienstenblokken verschillen in lengte; met de link
   onderaan vastgezet staan alle "Lees meer" op dezelfde hoogte. */
.kaart--dienst { display: flex; flex-direction: column; }
.kaart--dienst .kaart__meer { margin-top: auto; padding-top: 16px; }

/* ------------------------------------- schuifbalk in de prijskaart */

.schuif__regelaar { display: block; margin-top: 8px; }
/* Schaalverdeling. De knop loopt niet van rand tot rand maar van
   halve knop tot halve knop; elk cijfer wordt op precies die plek
   gecentreerd, anders lopen de tussenruimtes zichtbaar uiteen. */
.schuif__schaal {
  position: relative; height: 1.2em; margin-top: 8px;
  font-size: 0.74rem; color: var(--kleur-stil);
  font-variant-numeric: tabular-nums;
}
.schuif__schaal span {
  position: absolute; transform: translateX(-50%); white-space: nowrap;
  left: calc(var(--duim) / 2 + var(--stand) * (100% - var(--duim)));
}

/* De schuifbalk. Webkit en Firefox willen elk hun eigen selectors; de
   gevulde helft komt uit --gevuld, dat de JS bijwerkt. */
/* Twee losse keuzeknoppen boven de prijs. De radio zelf is verborgen maar
   blijft bedienbaar met toetsenbord en schermlezer. */
.keuzebalk {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  margin: 2px 0 clamp(22px, 3vw, 32px); padding: 0; border: 0;
}
.keuzebalk label { display: block; }
.keuzebalk input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.keuzebalk span {
  display: block; padding: 0.62em 1.35em; border-radius: var(--rond-vol);
  font-family: var(--font-kop); font-weight: 600; font-size: 0.92rem;
  color: var(--kleur-stil); cursor: pointer; white-space: nowrap;
  background: var(--kleur-vlak);
  border: 1px solid var(--kleur-lijn);
  transition: background 0.18s var(--soepel), border-color 0.18s var(--soepel),
              color 0.18s var(--soepel);
}
.keuzebalk span:hover { color: var(--kleur-ink); border-color: var(--kleur-stil); }
.keuzebalk input:checked + span {
  background: color-mix(in srgb, var(--kleur-merk) 10%, #ffffff);
  border-color: color-mix(in srgb, var(--kleur-merk) 40%, #ffffff);
  color: var(--kleur-ink);
}
.keuzebalk input:focus-visible + span {
  outline: 3px solid var(--kleur-merk); outline-offset: 2px;
}

/* Aantal vennoten: verschijnt alleen bij een v.o.f. */
.schuif__vennoten {
  display: flex; justify-content: center; align-items: center; gap: 10px;
  margin-top: 20px; font-size: 0.88rem; color: var(--kleur-stil);
}
.schuif__vennoten[hidden] { display: none; }
.schuif__vennoten label span { color: color-mix(in srgb, var(--kleur-stil) 75%, #ffffff); }
.schuif__vennoten select {
  font: inherit; font-weight: 600; color: var(--kleur-ink);
  padding: 0.35em 0.6em; background: var(--kleur-vlak);
  border: 1px solid var(--kleur-lijn); border-radius: var(--rond-s);
  cursor: pointer;
}
.schuif__vennoten select:focus-visible { outline: 3px solid var(--kleur-merk); outline-offset: 2px; }

.schuif { --duim: 26px; }

.schuif input[type='range'] {
  --gevuld: 10%;
  width: 100%; height: 26px;
  background: none; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.schuif input[type='range']:focus-visible { outline: 3px solid var(--kleur-merk); outline-offset: 4px; }

.schuif input[type='range']::-webkit-slider-runnable-track {
  height: 8px; border-radius: var(--rond-vol);
  background: linear-gradient(to right,
    var(--kleur-merk) var(--gevuld), var(--kleur-lijn) var(--gevuld));
}
.schuif input[type='range']::-moz-range-track {
  height: 8px; border-radius: var(--rond-vol); background: var(--kleur-lijn);
}
.schuif input[type='range']::-moz-range-progress {
  height: 8px; border-radius: var(--rond-vol); background: var(--kleur-merk);
}

.schuif input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: var(--duim); height: var(--duim); margin-top: -9px;
  border-radius: var(--rond-vol);
  background: var(--kleur-merk);
  border: 3px solid var(--kleur-vlak);
  box-shadow: 0 3px 10px -2px color-mix(in srgb, var(--kleur-merk) 70%, transparent);
  transition: transform 0.15s var(--soepel);
}
.schuif input[type='range']::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: var(--rond-vol);
  background: var(--kleur-merk); border: 3px solid var(--kleur-vlak);
  box-shadow: 0 3px 10px -2px color-mix(in srgb, var(--kleur-merk) 70%, transparent);
}
.schuif input[type='range']:active::-webkit-slider-thumb { transform: scale(1.12); }

/* Het sterretje is een sprong-link naar de voorwaarden. */
a.ster { text-decoration: none; }
a.ster:hover, a.ster:focus-visible { text-decoration: underline; }

/* De prijskaart op de homepage is één grote link naar de tarievenpagina. */
a.prijskaart--link { display: block; text-decoration: none; color: inherit; transition: transform 0.25s var(--soepel), box-shadow 0.25s var(--soepel); }
a.prijskaart--link:hover { transform: translateY(-4px); box-shadow: var(--schaduw-l); color: inherit; }
.prijskaart__meer {
  display: inline-flex; align-items: center; gap: 0.4em;
  margin-top: 26px;
  font-family: var(--font-kop); font-weight: 650; font-size: 0.95rem;
  color: var(--kleur-merk-tekst);
}
.prijskaart__meer .ico { transition: transform 0.22s var(--soepel); }
a.prijskaart--link:hover .prijskaart__meer .ico { transform: translateX(4px); }