/* ══════════════════════════════════════════════════════════════════════════
   Energie Zaken — de hele stylesheet.

   Kleuren komen uit het logo van de klant. Het blad in Isolatiemodus.png
   verloopt van #438601 bovenin naar #73C01D onderin, en de cirkel eromheen is
   #EAEDF0. Dat verloop is de groene kaart geworden, en dat grijswit is de
   ondergrond en de lijnkleur.

   --groen haalt 5,1:1 op wit én 5,1:1 met wit erop, dus dezelfde waarde werkt
   als linktekst en als knopvlak. --groen-fel haalt dat niet en draagt daarom
   nooit tekst; die kleur zit alleen in verlopen en accentvlakken.
   ══════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-var.woff2") format("woff2-variations");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-var-italic.woff2") format("woff2-variations");
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-var.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --groen: #3F7D02;
  --groen-fel: #73C01D;
  --groen-diep: #2F6001;
  --groen-waas: #EFF6E7;
  --verloop: linear-gradient(152deg, #438601 0%, #59A00C 48%, #73C01D 100%);

  --inkt: #141B21;
  --inkt-zacht: #55636D;
  --wit: #FFFFFF;
  --mist: #F2F5F7;
  --lijn: #E2E8EC;
  --op-donker: #C9EE9B;

  --kop: "Montserrat", "Segoe UI", system-ui, sans-serif;
  --tekst: "Inter", system-ui, -apple-system, sans-serif;

  --breed: 1180px;
  --rand: clamp(20px, 5vw, 48px);
  /* Op een telefoon stapelen de secties en telt de lucht dubbel; 52 px boven
     en onder leest daar prettiger dan 64. */
  --lucht: clamp(52px, 8vw, 112px);
  --rond: 20px;
  --rond-groot: 32px;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--tekst);
  font-size: clamp(16px, 0.55vw + 14.5px, 17.5px);
  line-height: 1.65;
  color: var(--inkt);
  background: var(--wit);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .knop, .label, .tarief__bedrag {
  font-family: var(--kop);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.12;
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); margin: 0 0 .5em; }
/* Eén woord schuin in een kop. Montserrat cursief staat iets krapper, dus een
   haartje extra ruimte erachter. */
.schuin { font-style: italic; padding-right: .06em; }
h2 { font-size: clamp(1.6rem, 3vw, 2.35rem); margin: 0 0 .55em; }
h3 { font-size: clamp(1.12rem, 1.4vw, 1.28rem); margin: 0 0 .5em; letter-spacing: -0.01em; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--groen); text-underline-offset: .18em; text-decoration-thickness: .08em; }
a:hover { color: var(--groen-diep); }

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

::selection { background: var(--groen-fel); color: #fff; }

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

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

.overslaan {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--groen); color: #fff; padding: .8em 1.2em;
  border-radius: 0 0 12px 0; font-weight: 600;
}
.overslaan:focus { left: 0; color: #fff; }

/* ── Raamwerk ─────────────────────────────────────────────────────────── */
.omhulsel {
  width: 100%;
  max-width: var(--breed);
  margin-inline: auto;
  padding-inline: var(--rand);
}
.smal { max-width: 760px; }
.midden { text-align: center; }
/* Een smalle leeskolom die links uitlijnt met de rest van de pagina. Het
   omhulsel blijft op volle breedte staan; alleen de kinderen worden gesmald.
   Zet je de breedte op het omhulsel zelf, dan schuift de kolom naar het midden
   en staat hij niet meer in één lijn met de kop van de sectie eronder. */
.tekstkolom > * { max-width: 800px; }

.sectie { padding-block: var(--lucht); }
.sectie--kaal { padding-block: clamp(48px, 7vw, 88px); }
.sectie--mist { background: var(--mist); }
.sectie--groen { background: var(--groen-waas); }
.sectie--beloftes { padding-block: clamp(40px, 5vw, 64px); }
/* Het slotblok staat op dezelfde grond als de sectie erboven; anders krijg je
   een losse strook wit tussen een grijze sectie en de donkere voet. */
.sectie--slot { padding-bottom: var(--lucht); padding-top: 0; }
.sectie--slot-wit { background: var(--wit); }
.sectie--slot-mist { background: var(--mist); }
.sectie--slot-groen { background: var(--groen-waas); }

.sectiekop { max-width: 640px; margin-bottom: clamp(36px, 4vw, 56px); }
.sectiekop--midden { margin-inline: auto; text-align: center; }
.sectiekop p:last-child { margin-bottom: 0; }

/* Een sectiekop met het tekenfiguurtje ernaast. De kolom met tekst houdt zijn
   eigen breedte; het figuurtje staat aan de rand van het omhulsel en zakt op
   smalle schermen weg. */
.sectiekop--metfiguur {
  position: relative;
  max-width: none;
  min-height: 180px;
  display: flex; align-items: flex-end;
}
.sectiekop--metfiguur .sectiekop__tekst { max-width: 640px; width: 100%; }
.sectiekop--metfiguur.sectiekop--midden .sectiekop__tekst { margin-inline: auto; }
/* Het figuurtje staat buiten de stroom, zodat de kop op één lijn blijft met de
   kaarten eronder. */
.figuur { position: absolute; bottom: 0; width: auto; }
.figuur--rechts { right: 0; }
.figuur--links { left: 0; transform: scaleX(-1); }

.lead {
  font-size: clamp(1.05rem, 1.3vw, 1.22rem);
  line-height: 1.55;
  color: var(--inkt-zacht);
}

.klein { font-size: .92rem; color: var(--inkt-zacht); }

.label {
  display: inline-block;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--groen);
  background: var(--groen-waas);
  border-radius: 999px;
  padding: .38em 1em;
  margin: 0 0 1.1em;
}
.sectie--groen .label { background: #fff; }

/* ── Knoppen ──────────────────────────────────────────────────────────── */
.knop {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5em;
  font-size: 1rem; font-weight: 800; letter-spacing: -0.01em;
  padding: .85em 1.6em;
  border: 2px solid transparent;
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
}
.knop--vol { background: var(--groen); color: #fff; }
.knop--vol:hover { background: var(--groen-diep); color: #fff; }
.knop--wit { background: #fff; color: var(--groen-diep); }
.knop--wit:hover { background: var(--groen-waas); color: var(--groen-diep); }
.knop--rand { border-color: rgba(255,255,255,.7); color: #fff; }
.knop--rand:hover { background: rgba(255,255,255,.14); color: #fff; }
.knop--lijn { border-color: var(--groen); color: var(--groen); background: transparent; }
.kop .knop--lijn { background: #fff; }
.knop--lijn:hover { background: var(--groen-waas); color: var(--groen-diep); border-color: var(--groen-diep); }

.verder a, .kaart__verder {
  display: inline-flex; align-items: center; gap: .45em;
  font-weight: 700; text-decoration: none;
}
.verder a:hover { text-decoration: underline; }
.verder a .icoon, .kaart__verder .icoon { transition: transform .15s; }
.verder a:hover .icoon, .kaart:hover .kaart__verder .icoon { transform: translateX(3px); }

/* ── Tekeningen ───────────────────────────────────────────────────────── */
.icoon {
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icoon--vol { fill: currentColor; stroke: none; }
.icoon--chevron { width: 13px; height: 13px; }
.icoon--kruimel { width: 13px; height: 13px; opacity: .5; }

.blad {
  position: absolute;
  pointer-events: none;
  opacity: .10;
  height: auto;
}

/* ── Kopbalk ──────────────────────────────────────────────────────────── */
/* Zolang het volledige menu openstaat scrollt de pagina erachter niet mee.
   Alleen `overflow: hidden`, geen `position: fixed` op de body: dat laatste
   haalt de sticky kopbalk onderuit en laat de pagina naar boven springen. */
html.menu-open, body.menu-open { overflow: hidden; }
/* `overflow: hidden` haalt de scrollcontainer weg, en daarmee heeft
   `position: sticky` niets meer om aan te plakken: de balk viel terug naar zijn
   plek bovenin het document. Klikte je halverwege de pagina op het menu, dan
   schoof de balk met het kruisje uit beeld en kon je het menu niet meer sluiten.
   Zolang het menu openstaat is de balk daarom vast. */
body.menu-open .kop { position: fixed; top: 0; left: 0; right: 0; }

.kop {
  position: sticky; top: 0; z-index: 40;
  /* Grijs in plaats van wit: de balk staat daarmee los van de pagina eronder,
     die grotendeels wit is. Dit is dezelfde tint als de ondergrond van de
     grijze secties, en `--groen` haalt daarop nog 4,6:1. */
  background: rgba(242, 245, 247, .94);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid #D9E1E7;
}
.kop__binnen {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 74px;
}
.merk {
  display: inline-flex; align-items: center; gap: .6rem;
  text-decoration: none; flex: none;
}
.merk__teken { width: 30px; height: 38px; }
.merk__naam { width: 150px; height: auto; }

.menuknop {
  display: none;
  align-items: center; justify-content: center;
  width: 44px; height: 44px;
  color: var(--inkt);
  background: none; border: 0; padding: 0; cursor: pointer;
  border-radius: 12px;
}
.menuknop:hover { background: rgba(255,255,255,.8); }
.menuknop__streep {
  position: relative; display: block; width: 22px; height: 2px;
  background: currentColor; border-radius: 2px;
  transition: background-color .15s;
}
.menuknop__streep::before, .menuknop__streep::after {
  content: ""; position: absolute; left: 0; width: 22px; height: 2px;
  background: currentColor; border-radius: 2px; transition: transform .18s;
}
.menuknop__streep::before { top: -7px; }
.menuknop__streep::after { top: 7px; }
.menuknop[aria-expanded="true"] .menuknop__streep { background: transparent; }
.menuknop[aria-expanded="true"] .menuknop__streep::before { transform: translateY(7px) rotate(45deg); }
.menuknop[aria-expanded="true"] .menuknop__streep::after { transform: translateY(-7px) rotate(-45deg); }

/* Het menu vult de rest van de balk: de lijst blijft links tegen het
   woordmerk aan staan, de twee knoppen worden naar de rechterrand geduwd. */
.menu { display: flex; align-items: center; gap: 1.5rem; flex: 1 1 auto; min-width: 0; }
.menu__lijst {
  display: flex; align-items: center; gap: .25rem;
  list-style: none; margin: 0; padding: 0;
}
.menu__link {
  display: inline-flex; align-items: center; gap: .3em;
  padding: .5em .8em;
  font-weight: 600; font-size: .97rem;
  color: var(--inkt); text-decoration: none;
  border-radius: 999px;
}
.menu__link:hover { color: var(--groen); background: rgba(255,255,255,.8); }
.menu__link.is-hier { color: var(--groen); }

/* Het huisje staat op brede schermen als pictogram in de balk; het woord
   "Home" komt er pas bij zodra het menu een lijst wordt. */
.menu__huis .menu__link { padding-inline: .6em; }
.menu__huis .icoon { width: 20px; height: 20px; }
.menu__naam { display: none; }

.menu__uit { position: relative; }
.menu__sub {
  position: absolute; left: 0; top: calc(100% + 6px);
  min-width: 322px;
  list-style: none; margin: 0; padding: .5rem;
  background: #fff;
  border: 1px solid var(--lijn);
  border-radius: var(--rond);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .15s, transform .15s, visibility .15s;
}
.menu__uit:hover .menu__sub,
.menu__uit:focus-within .menu__sub { opacity: 1; visibility: visible; transform: none; }
.menu__sub a {
  /* Het pictogram staat midden tegenover de twee regels tekst; daarvoor moet de
     regel eronder er wel één blijven. Zie de opmerking bij DIENSTEN. */
  display: flex; align-items: center; gap: .75rem;
  padding: .6rem .7rem; border-radius: 12px;
  text-decoration: none; color: var(--inkt);
  white-space: nowrap;
}
.menu__sub a:hover { background: var(--mist); }
.menu__sub .kaart__icoon {
  width: 40px; height: 40px; margin: 0; border-radius: 12px;
}
.menu__sub .kaart__icoon .icoon { width: 19px; height: 19px; }
.menu__sub-naam { display: block; font-weight: 700; }
.menu__sub em { display: block; font-style: normal; font-size: .86rem; color: var(--inkt-zacht); }

.menu__staart { display: flex; align-items: center; gap: .6rem; margin-left: auto; }
.menu__staart .knop { padding: .65em 1.2em; font-size: .95rem; white-space: nowrap; }
.menu__staart .knop .icoon { width: 17px; height: 17px; }

/* ── Kruimelpad ───────────────────────────────────────────────────────── */
.kruimels {
  display: flex; align-items: center; gap: .5em;
  font-size: .88rem; color: rgba(255,255,255,.75);
}
.kruimels a { color: rgba(255,255,255,.85); text-decoration: none; }
.kruimels a:hover { color: #fff; text-decoration: underline; }
.kruimels__huis {
  display: inline-flex; align-items: center;
  padding: 2px; border-radius: 6px;
}
.kruimels__huis:hover { color: #fff; text-decoration: none; }
.kruimels__huis .icoon { width: 19px; height: 19px; }
.kruimels span { color: #fff; font-weight: 600; }

/* ── Hero ─────────────────────────────────────────────────────────────── */
.hero { padding-block: clamp(24px, 3vw, 40px) 0; }
.hero__kaart {
  position: relative; overflow: hidden;
  background: var(--verloop);
  border-radius: var(--rond-groot);
  color: #fff;
  padding: clamp(36px, 5vw, 72px) clamp(28px, 5vw, 68px);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(32px, 4vw, 56px);
  align-items: center;
}
/* Witte tekst op het felle deel van het verloop haalt geen 4,5:1. In plaats
   van het merkgroen te verdonkeren ligt er een sluier over de tekstkant, die
   naar de rechterrand toe wegvalt: daar staat alleen het waterteken. Gemeten:
   de kop gaat van 3,6 naar 5,4 en de lopende tekst van 3,3 naar 5,0. */
.hero__kaart::before,
.slot::before,
.paginakop::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(100deg, rgba(0,0,0,.26) 0%, rgba(0,0,0,.22) 48%,
                              rgba(0,0,0,0) 82%);
  pointer-events: none;
}
/* `min-width: 0` moet erbij: een rasteritem is standaard minstens zo breed als
   zijn langste woord, en "energiecontracten" is breder dan een telefoon. Zonder
   dit werd de hele tekstkolom breder dan de kaart en sneed `overflow: hidden`
   de kop, de tekst én het labeltje af. */
.hero__kaart > *:not(.blad),
.slot > *:not(.blad),
.paginakop > .omhulsel { position: relative; z-index: 1; min-width: 0; }

/* Eigen maatvoering: de ondergrens van de algemene h1 (2,1rem) maakt
   "energiecontracten" breder dan een scherm van 390 px. */
.hero__kaart h1 { color: #fff; font-size: clamp(1.5rem, 7.4vw, 3.4rem); }
.blad--hero { right: -9%; top: -14%; width: 46%; opacity: .13; }
.hero__tekst { position: relative; }
/* Geen pil maar gewone tekst met een pulserend bolletje ervoor. Het witte
   vlakje werd op een telefoon breder dan de kaart en sneed af; losse tekst
   loopt gewoon door en past altijd. */
.hero__label {
  /* Aan de bovenkant uitlijnen: op een smal scherm loopt de regel door naar een
     tweede regel, en dan hoort het bolletje bij de eerste. */
  display: flex; align-items: flex-start; gap: .6em;
  font-family: var(--kop); font-weight: 700; font-size: .88rem;
  color: #fff;
  background: none; padding: 0; border-radius: 0;
  margin: 0 0 1.1em;
}
.hero__label::before {
  content: "";
  flex: none;
  margin-top: .42em;
  width: 9px; height: 9px; border-radius: 999px;
  background: #fff;
  animation: stip 2.2s cubic-bezier(.25, .6, .4, 1) infinite;
}

@keyframes stip {
  0%   { box-shadow: 0 0 0 0 rgba(255, 255, 255, .7); }
  70%  { box-shadow: 0 0 0 9px rgba(255, 255, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}
.hero__lead {
  font-size: clamp(1.05rem, 1.4vw, 1.22rem);
  color: rgba(255,255,255,.92);
  max-width: 30em;
  margin-bottom: 1.8em;
}
.hero__knoppen { display: flex; flex-wrap: wrap; gap: .75rem; }

.hero__prijzen {
  position: relative;
  background: rgba(255,255,255,.96);
  border-radius: var(--rond);
  padding: clamp(22px, 2.4vw, 30px);
  color: var(--inkt);
}
.hero__prijzen-kop {
  font-family: var(--kop); font-weight: 800; font-size: 1.02rem;
  white-space: nowrap;
  margin: 0 0 1rem;
}
.hero__prijzen-noot { font-size: .84rem; color: var(--inkt-zacht); margin: 1rem 0 0; }

/* ── Tarieven ─────────────────────────────────────────────────────────── */
.tarieven {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
}
.hero__prijzen .tarieven { grid-template-columns: 1fr; gap: .6rem; }

.tarief {
  /* Zonder dit is een tariefregel minstens zo breed als de naam erin, want die
     mag niet afbreken. Op een smal scherm duwde dat de bedragen buiten de
     kaart. */
  min-width: 0;
  background: #fff;
  border: 1px solid var(--lijn);
  border-radius: var(--rond);
  padding: 1.4rem 1.5rem;
}
.sectie--groen .tarief { border-color: #DCE9CE; }
.tarief__naam {
  display: flex; align-items: center; gap: .45em;
  font-size: .9rem; font-weight: 600; color: var(--inkt-zacht);
  margin: 0 0 .35em;
}
.tarief__naam .icoon { width: 17px; height: 17px; color: var(--groen); }
.tarief__bedrag {
  font-size: clamp(1.75rem, 2.6vw, 2.15rem);
  color: var(--groen-diep);
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.tarief__euro { font-size: .55em; vertical-align: .32em; margin-right: .1em; }
.tarief__deel { font-size: 1em; }
.tarief__eenheid { font-size: .86rem; color: var(--inkt-zacht); margin: .2em 0 0; }

.tarief--klein {
  display: flex; align-items: center; justify-content: space-between;
  gap: .6rem; padding: .7rem .85rem; border-radius: 14px;
  background: var(--mist); border-color: transparent;
}
/* "Stroom, normaaltarief" naast het bedrag paste net niet op één regel. Niet
   laten afbreken, en de naam mag meekrimpen; het bedrag blijft heel. */
.tarief--klein .tarief__naam {
  margin: 0; font-size: .85rem; white-space: nowrap;
  min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
.tarief--klein .tarief__bedrag { flex: none; }

/* Op een heel smal scherm passen naam en bedrag niet naast elkaar. Dan mag de
   regel afbreken en de naam gewoon doorlopen; afkappen met puntjes leest slecht
   bij een tarief. */
@media (max-width: 400px) {
  .tarief--klein { flex-wrap: wrap; gap: .15rem .6rem; }
  .tarief--klein .tarief__naam { white-space: normal; overflow: visible; }
}
.tarief--klein .tarief__bedrag { font-size: 1.28rem; white-space: nowrap; }
.tarief--klein .tarief__euro { font-size: .7em; vertical-align: .1em; }
.tarief--klein .tarief__deel { font-size: 1em; }
.tarief--klein .tarief__eenheid { display: none; }

.tarieven__noot {
  max-width: 62ch; margin: 1.6rem auto 0;
  font-size: .92rem; color: var(--inkt-zacht);
}
.sectiekop--midden ~ .tarieven__noot { text-align: center; }
.tarieven__knop { margin: 1.8rem 0 0; text-align: center; }

.tabelwikkel {
  overflow-x: auto;
  margin-top: clamp(32px, 4vw, 48px);
  scrollbar-width: thin;
  overscroll-behavior-x: contain;
}
/* Een vervagende rand rechts zolang er nog tabel achter de rand zit. Verdwijnt
   zodra je aan het eind bent, dus hij belooft niets wat er niet meer is. */
.tabelwikkel.is-veegbaar {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent);
}
.tabelwikkel.is-eind {
  -webkit-mask-image: none;
  mask-image: none;
}

/* De veegwenk onder de tabel. Alleen zichtbaar als er werkelijk iets te vegen
   valt; de JS zet hem aan en weer uit zodra je aan het eind bent. */
.veegwenk {
  display: flex; align-items: center; justify-content: flex-end; gap: .45em;
  margin: .7rem 0 0;
  font-size: .88rem; font-weight: 600; color: var(--groen);
}
.veegwenk .icoon { width: 17px; height: 17px; animation: veeg 1.8s ease-in-out infinite; }

@keyframes veeg {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(5px); }
}
.tabel { width: 100%; border-collapse: collapse; min-width: 620px; font-size: .95rem; }
.tabel th, .tabel td { text-align: left; padding: .9rem 1rem; border-bottom: 1px solid var(--lijn); }
.tabel thead th {
  font-family: var(--kop); font-weight: 800; font-size: .84rem;
  color: var(--inkt-zacht); border-bottom-width: 2px;
}
.tabel tbody th { font-weight: 700; }
.tabel .getal { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--groen-diep); white-space: nowrap; }
.tabel .uitleg { color: var(--inkt-zacht); }

/* ── Reviews ──────────────────────────────────────────────────────────── */
/* #E8A317 haalde maar 2,2:1 op wit. Dit goud haalt 3,9:1 en oogt nog steeds
   als een recensiester. */
.sterren { display: inline-flex; gap: 1px; color: #B57200; line-height: 0; }
.sterren .icoon { width: 18px; height: 18px; }

.reviews__cijfer {
  display: inline-flex; flex-wrap: wrap; align-items: center;
  justify-content: center; gap: .3rem .7rem;
  margin: 0; font-size: .97rem; color: var(--inkt-zacht);
}
.reviews__cijfer strong { color: var(--inkt); }

.reviews {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(16px, 2vw, 24px);
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}
.review {
  display: flex; flex-direction: column; gap: .9rem;
  background: #fff;
  border-radius: var(--rond-groot);
  padding: clamp(24px, 2.6vw, 32px);
}
.review blockquote {
  margin: 0; font-size: .97rem; color: var(--inkt-zacht);
}
.review blockquote::before { content: "\201C"; }
.review blockquote::after { content: "\201D"; }
.review__wie { margin: auto 0 0; font-size: .92rem; }
.review__wie strong { display: block; font-family: var(--kop); font-weight: 800; }
.review__wie span { color: var(--inkt-zacht); }
.reviews__meer { margin: clamp(24px, 3vw, 36px) 0 0; text-align: center; }

/* Collage. Zeven kaarten komen in geen enkel aantal kolommen netjes uit; in een
   gewoon raster blijft er onderaan één los staan. Hier krijgt elke kolom zijn
   eigen lijstje, even breed, en rekken de kaarten binnen die kolom de
   overgebleven ruimte op. Boven staan ze daardoor op één lijn en onder ook,
   terwijl de kaarten zelf verschillend hoog blijven. bouw.py verdeelt de
   reviews vooraf zo gelijk mogelijk over de drie kolommen. */
.reviews--collage {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
}
.reviews__kolom {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
  gap: clamp(16px, 2vw, 24px);
}
.reviews--collage .review { flex: 1 1 auto; }

/* Op een smal scherm worden de reviews een carrousel. Onder elkaar zijn zeven
   kaarten een scrollmarathon; naast elkaar met een stukje van de volgende in
   beeld ziet een bezoeker meteen dat er meer is. Alleen CSS: scroll-snap doet
   het werk, `display: contents` haalt de kolomlijstjes uit de weg zodat de
   kaarten zelf de items van de carrousel worden. */
@media (max-width: 780px) {
  .reviews,
  .reviews--collage {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--rand);
    gap: 12px;
    /* Tot de paginarand doorlopen, zodat de laatste kaart niet halverwege stopt. */
    margin-inline: calc(-1 * var(--rand));
    padding-inline: var(--rand);
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .reviews::-webkit-scrollbar,
  .reviews--collage::-webkit-scrollbar { display: none; }
  .reviews__kolom { display: contents; }
  .reviews .review,
  .reviews--collage .review {
    flex: 0 0 min(84%, 340px);
    scroll-snap-align: start;
  }
}

/* ── De e-mailbanner ──────────────────────────────────────────────────── */
/* Hij hoort alleen in het uitgeklapte mobiele menu. Zonder deze regel staat hij
   op een breed scherm als los blok naast de menu-items en loopt de pagina over
   de rechterrand heen. */
.menu__slot { display: none; }

/* Staat alleen onderin het uitgeklapte mobiele menu. Op de pagina zelf zou hij
   op een breed scherm naast dezelfde kopbalk komen te staan. */
.banner {
  display: flex; align-items: center; gap: clamp(14px, 4vw, 22px);
  background: var(--verloop);
  border-radius: var(--rond-groot);
  padding: clamp(18px, 4vw, 26px) clamp(18px, 4vw, 24px);
}
.banner__cirkel {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 84px; height: 84px;
  border-radius: 999px;
  background: #EAEDF0;
}
.banner__cirkel img { width: 42px; height: auto; }
.banner__naam { width: 168px; height: auto; display: block; margin-bottom: .5rem; }
.banner__tekst p {
  margin: 0; color: #fff; font-size: .96rem; line-height: 1.35;
  font-family: var(--kop); font-weight: 600;
}
.banner__tekst strong { font-weight: 800; }

/* ── Beloftes ─────────────────────────────────────────────────────────── */
.beloftes {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(20px, 3vw, 40px);
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
}
.beloftes h2 { font-size: 1.05rem; margin: 0 0 .4em; }
.beloftes h2::before {
  content: ""; display: block; width: 30px; height: 4px;
  background: var(--groen-fel); border-radius: 999px; margin-bottom: .9rem;
}
.beloftes p { font-size: .95rem; color: var(--inkt-zacht); margin: 0; }

/* ── Kaarten ──────────────────────────────────────────────────────────── */
.kaarten {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(16px, 2vw, 24px);
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}
.kaarten--twee { grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); }
.kaarten--drie { grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr)); }

.kaart {
  background: #fff;
  border: 1px solid var(--lijn);
  border-radius: var(--rond-groot);
  transition: border-color .15s;
}
.sectie--mist .kaart { border-color: transparent; }
.kaart:hover { border-color: var(--groen-fel); }
.kaart--stil:hover { border-color: var(--lijn); }
.sectie--mist .kaart--stil:hover { border-color: transparent; }

.kaart > a, .kaart--stil {
  display: flex; flex-direction: column; height: 100%;
  padding: clamp(24px, 2.6vw, 34px);
  text-decoration: none; color: inherit;
}
.kaart > a > p:last-of-type, .kaart--stil > p:last-of-type { margin-bottom: 1.1em; }
.kaart__icoon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; margin-bottom: 1.2rem;
  border-radius: 14px;
  background: var(--groen-waas);
  color: var(--groen);
}
.kaart__icoon .icoon { width: 24px; height: 24px; }
.sectie--groen .kaart__icoon { background: #fff; }
.kaart p { font-size: .95rem; color: var(--inkt-zacht); }
.kaart__verder { margin-top: auto; color: var(--groen); }
.kaart__voor { font-size: .9rem; }
.kaart__voor strong { color: var(--inkt); }

/* ── Duo-blokken ──────────────────────────────────────────────────────── */
.duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 34px);
  align-items: stretch;
}
.duo + .duo { margin-top: clamp(48px, 6vw, 80px); }
.duo--rechts .duo__tekst { order: 2; }

.duo__tekst {
  background: var(--mist);
  border-radius: var(--rond-groot);
  padding: clamp(28px, 3.4vw, 48px);
  display: flex; flex-direction: column; justify-content: center;
}
.sectie--mist .duo__tekst { background: #fff; }
.duo__tekst p { color: var(--inkt-zacht); }
.duo__tekst .verder { margin-top: .4rem; margin-bottom: 0; }

.duo__beeld { border-radius: var(--rond-groot); overflow: hidden; }
.duo__beeld .beeld { display: block; height: 100%; }
.duo__beeld img { width: 100%; height: 100%; object-fit: cover; display: block; }

.vinkjes { list-style: none; margin: .4rem 0 1.1rem; padding: 0; }
.vinkjes li {
  display: flex; align-items: flex-start; gap: .6em;
  margin-bottom: .5em; font-size: .95rem;
}
.vinkjes .icoon { color: var(--groen); margin-top: .28em; }

/* ── Stappen ──────────────────────────────────────────────────────────── */
.stappen {
  list-style: none; margin: 0; padding: 0;
  counter-reset: stap;
  display: grid; gap: clamp(20px, 2.6vw, 32px);
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
}
.stappen li { counter-increment: stap; }
.stappen li::before {
  content: counter(stap);
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; margin-bottom: 1.1rem;
  font-family: var(--kop); font-weight: 800; font-size: 1.1rem;
  color: #fff; background: var(--groen); border-radius: 999px;
}
.stappen p { font-size: .95rem; color: var(--inkt-zacht); margin: 0; }

/* ── Opbouw van de rekening ───────────────────────────────────────────── */
.opbouw { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.opbouw li {
  display: grid; grid-template-columns: 46px 1fr; gap: 0 1.2rem;
  align-items: start;
  background: #fff; border-radius: var(--rond); padding: 1.5rem 1.6rem;
}
.opbouw__nr {
  grid-row: span 2;
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px;
  font-family: var(--kop); font-weight: 800;
  color: var(--groen-diep); background: var(--groen-waas); border-radius: 999px;
}
.opbouw h3 { margin: .35em 0 .3em; }
.opbouw p { font-size: .95rem; color: var(--inkt-zacht); margin: 0; }

/* ── Redenen ──────────────────────────────────────────────────────────── */
.redenen {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: .9rem;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}
/* Het zijn er zeven, en zeven past in geen enkel aantal kolommen netjes op.
   De laatste loopt daarom over de volle breedte. Dat is ook inhoudelijk de
   juiste: die regel vat de ondersteunende diensten samen en is de langste. */
.redenen li:last-child { grid-column: 1 / -1; }
.redenen li {
  display: flex; align-items: center; gap: .9em;
  background: #fff; border-radius: var(--rond); padding: 1.1rem 1.3rem;
}
.redenen .kaart__icoon {
  width: 40px; height: 40px; margin: 0; border-radius: 12px;
}
.redenen .kaart__icoon .icoon { width: 21px; height: 21px; }
.sectie--mist .redenen .kaart__icoon { background: var(--groen-waas); }
.redenen p { margin: 0; font-weight: 600; }

/* ── Waar u ons vindt ─────────────────────────────────────────────────── */
.gegevens__knoppen {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem;
  margin: 0;
}
.gegevens__knoppen .icoon { width: 18px; height: 18px; }
.gegevens__adres {
  display: flex; align-items: center; justify-content: center; gap: .5em;
  margin: 1.6rem 0 0;
  font-size: .94rem; color: var(--inkt-zacht);
}
.gegevens__adres .icoon { width: 17px; height: 17px; color: var(--groen); }

/* ── Paginakop ────────────────────────────────────────────────────────── */
.paginakop {
  /* Hetzelfde verloop als de groene kaart, een paar tinten donkerder. Het
     kruimelpad staat erin, dus het verloop loopt er onderdoor. */
  background: linear-gradient(152deg, #2A5601 0%, #35700A 52%, #468F14 100%);
  color: #fff;
  padding-block: 1.9rem clamp(44px, 6vw, 84px);
}
.paginakop .kruimels { margin-bottom: clamp(28px, 4vw, 48px); }

.paginakop__binnen {
  display: flex; align-items: center; gap: clamp(24px, 4vw, 56px);
}
.paginakop__tekst { max-width: 720px; }
.paginakop h1 { color: #fff; margin-bottom: .4em; font-size: clamp(1.55rem, 6.6vw, 3.4rem); }
.paginakop .lead { color: rgba(255,255,255,.85); margin: 0; }
.paginakop { position: relative; overflow: hidden; }
.blad--paginakop { right: -2%; top: -28%; width: 22%; min-width: 190px; opacity: .12; }

/* ── Slotblok ─────────────────────────────────────────────────────────── */
.slot {
  position: relative; overflow: hidden;
  background: var(--verloop);
  border-radius: var(--rond-groot);
  color: #fff;
  padding: clamp(32px, 4vw, 56px) clamp(28px, 4vw, 56px);
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(24px, 3vw, 40px);
}
.slot__tekst { position: relative; flex: 1 1 340px; }
.slot h2 { color: #fff; margin-bottom: .35em; }
.slot p { color: rgba(255,255,255,.9); margin: 0; max-width: 46ch; }
.slot__knoppen {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem;
}
.slot__tel {
  display: inline-flex; align-items: center; gap: .5em;
  color: #fff; font-weight: 700; text-decoration: none;
}
.slot__tel:hover { color: #fff; text-decoration: underline; }
.blad--slot { right: -4%; bottom: -42%; width: 30%; opacity: .14; }


/* ── Formulieren ──────────────────────────────────────────────────────── */
.formulierblad {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.formulierblad__uitleg {
  position: sticky; top: 96px;
  background: var(--mist);
  border-radius: var(--rond-groot);
  padding: clamp(24px, 2.8vw, 34px);
}
.formulierblad__uitleg h2 { font-size: 1.3rem; }
.formulierblad__uitleg p { font-size: .95rem; }
.formulierblad__formulier > h2 { margin-bottom: .8em; }

.contactlijst { list-style: none; margin: 0 0 1.4rem; padding: 0; }
.contactlijst li {
  display: flex; align-items: flex-start; gap: .8em;
  padding: .7rem 0; border-bottom: 1px solid var(--lijn);
}
.contactlijst li:last-child { border-bottom: 0; }
.contactlijst .icoon { color: var(--groen); margin-top: .35em; }
.contactlijst span {
  display: block; font-size: .8rem; color: var(--inkt-zacht); font-weight: 600;
}
.contactlijst a { font-weight: 700; text-decoration: none; }
.contactlijst a:hover { text-decoration: underline; }

.formulier__groep {
  border: 0; margin: 0 0 clamp(24px, 3vw, 36px); padding: 0;
}
.formulier__groep legend {
  font-family: var(--kop); font-weight: 800; font-size: 1.08rem;
  padding: 0; margin-bottom: 1rem;
}
.formulier__raster {
  display: grid; gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  align-items: start;
}
.veld { display: flex; flex-direction: column; margin: 0 0 1.1rem; }
.formulier__raster .veld { margin-bottom: 0; }
.veld label { font-weight: 600; font-size: .95rem; margin-bottom: .3em; }
.veld label.vink { font-weight: 400; margin-bottom: 0; }
.hint { font-size: .85rem; color: var(--inkt-zacht); margin-top: .4em; }
.ster { color: var(--groen); }

input[type="text"], input[type="email"], input[type="tel"],
input[type="number"], textarea {
  font: inherit; font-size: 1rem;
  color: var(--inkt);
  background: #fff;
  border: 1.5px solid var(--lijn);
  border-radius: 12px;
  padding: .7em .9em;
  width: 100%;
  transition: border-color .15s;
}
input:hover, textarea:hover { border-color: #C9D3DA; }
input:focus, textarea:focus { border-color: var(--groen); outline: 0; box-shadow: 0 0 0 3px rgba(63,125,2,.14); }
textarea { resize: vertical; min-height: 7em; }

.veld.is-fout input, .veld.is-fout textarea { border-color: #B4231C; }
.fout { display: none; font-size: .88rem; color: #B4231C; margin-top: .35em; font-weight: 600; }
.veld.is-fout .fout { display: block; }

/* Systeemvinkjes zijn niet in huisstijl te krijgen, dus een eigen vakje. */
.vink, .keuze {
  display: flex; align-items: flex-start; gap: .7em;
  cursor: pointer; font-weight: 400; font-size: .95rem;
}
.vink input, .keuze input {
  position: absolute; opacity: 0; width: 0; height: 0;
}
.vink__vak, .keuze__vak {
  flex: none; width: 22px; height: 22px; margin-top: .12em;
  background: #fff;
  border: 1.5px solid var(--lijn);
  border-radius: 7px;
  transition: background-color .12s, border-color .12s;
}
.keuze__vak { border-radius: 999px; }
.vink input:checked + .vink__vak,
.keuze input:checked + .keuze__vak { background: var(--groen); border-color: var(--groen); }
.vink input:checked + .vink__vak::after,
.keuze input:checked + .keuze__vak::after {
  content: ""; display: block; width: 100%; height: 100%;
  background: #fff;
  clip-path: polygon(19% 48%, 8% 60%, 40% 88%, 92% 28%, 80% 18%, 39% 66%);
}
.keuze input:checked + .keuze__vak::after {
  clip-path: circle(26% at 50% 50%);
}
.vink input:focus-visible + .vink__vak,
.keuze input:focus-visible + .keuze__vak {
  outline: 3px solid var(--groen); outline-offset: 3px;
}
.veld--vink { margin-bottom: 1.6rem; }

.keuzes { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.keuzes li {
  background: var(--mist); border-radius: var(--rond);
  padding: 1rem 1.2rem;
}
.formulierblad .keuzes li { background: var(--mist); }
.keuze strong { font-weight: 700; }

.honing { position: absolute; left: -9999px; }

.formulier__slot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem;
  margin: 0;
}
.formulier__noot { font-size: .88rem; color: var(--inkt-zacht); }

.formulier__melding {
  border-radius: var(--rond); padding: 1rem 1.2rem; margin-bottom: 1.4rem;
  font-weight: 600;
  background: #FDECEA; color: #8E1B15;
}

/* ── Bedankt en 404 ───────────────────────────────────────────────────── */
.kaart__icoon--groot {
  width: 76px; height: 76px; border-radius: 26px; margin: 0 auto 1.6rem;
}
.kaart__icoon--groot .icoon { width: 36px; height: 36px; }
.bedankt .lead { margin-bottom: 1.8rem; }
.foutlijst {
  list-style: none; margin: 1.6rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem;
}
.foutlijst a {
  display: inline-block; padding: .6em 1.2em;
  background: var(--mist); border-radius: 999px;
  text-decoration: none; font-weight: 600;
}
.foutlijst a:hover { background: var(--groen-waas); }

/* ── Juridische pagina's ──────────────────────────────────────────────── */
.juridisch .artikel { margin-bottom: clamp(32px, 4vw, 48px); }
.juridisch h2 { font-size: clamp(1.2rem, 1.8vw, 1.45rem); }
.juridisch ul { padding-left: 1.2em; }
.juridisch li { margin-bottom: .5em; }

/* ── Voettekst ────────────────────────────────────────────────────────── */
.voet {
  position: relative; overflow: hidden;
  background: var(--groen-diep);
  color: rgba(255,255,255,.82);
  padding-top: clamp(48px, 6vw, 80px);
  margin-top: auto;
}
.voet a { color: var(--op-donker); text-decoration: none; }
.voet a:hover { color: #fff; text-decoration: underline; }
.blad--voet { left: -3%; bottom: -26%; width: 20%; opacity: .06; }

.voet__binnen {
  position: relative;
  display: grid; gap: clamp(28px, 3.5vw, 48px);
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  padding-bottom: clamp(36px, 4vw, 56px);
}
.voet__naam { width: 190px; height: auto; margin-bottom: 1.1rem; }
.voet__zin { font-size: .95rem; max-width: 38ch; }
.voet__kolom h2 {
  font-size: .85rem; color: #fff; margin-bottom: 1em;
  letter-spacing: 0;
}
.voet__kolom ul, .voet__sociaal { list-style: none; margin: 0; padding: 0; }
.voet__kolom li { margin-bottom: .55em; font-size: .95rem; }
.voet__gegevens li { display: flex; align-items: flex-start; gap: .6em; }
.voet__gegevens .icoon { width: 18px; height: 18px; margin-top: .28em; color: var(--op-donker); }
.voet__sociaal { display: flex; gap: 1rem; margin-top: 1.1rem; font-weight: 600; }

.voet__slot {
  position: relative;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem;
  border-top: 1px solid rgba(255,255,255,.17);
  padding-block: 1.2rem;
  font-size: .86rem;
}
.voet__slot p { margin: 0; }
.voet__credit { display: inline-flex; align-items: center; gap: .4em; }
.voet__credit a { display: inline-flex; align-items: center; gap: .35em; }
.voet__credit img { display: block; filter: brightness(0) invert(1); opacity: .8; }

/* ── Advertentiepagina ────────────────────────────────────────────────── */
.kop--kaal .kop__binnen { justify-content: space-between; }
.kop--kaal .merk { cursor: default; }
.kop__staart { display: flex; align-items: center; gap: .6rem; }
.kop__staart .knop { padding: .65em 1.2em; font-size: .95rem; white-space: nowrap; }
.kop__staart .knop .icoon { width: 17px; height: 17px; }

.aanbod { background: var(--mist); padding-block: clamp(36px, 5vw, 72px); }
.aanbod__binnen {
  display: grid; gap: clamp(28px, 4vw, 56px);
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
}
.aanbod__tekst h1 { font-size: clamp(1.9rem, 3.3vw, 2.75rem); margin-bottom: .45em; }
.aanbod__tekst .lead { margin-bottom: 1.4em; }
.vinkjes--groot li { font-size: 1rem; margin-bottom: .7em; }
.aanbod__cijfer {
  display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .7rem;
  margin: 1.4rem 0 0; font-size: .97rem; color: var(--inkt-zacht);
}
.aanbod__cijfer strong { color: var(--inkt); }

.aanbod__formulier {
  position: relative; overflow: hidden;
  background: #fff;
  border-radius: var(--rond-groot);
  padding: clamp(26px, 3vw, 40px);
}
.aanbod__formulier h2 { font-size: clamp(1.3rem, 1.8vw, 1.6rem); margin-bottom: .3em; }
.aanbod__formulier > p { color: var(--inkt-zacht); font-size: .95rem; margin-bottom: 1.4em; }
.aanbod__formulier .formulier__slot { margin-top: .4rem; }
.aanbod__formulier .knop { width: 100%; }
.aanbod__formulier .formulier__noot { margin: .8rem 0 0; text-align: center; display: block; }
.blad--aanbod { right: -14%; top: -18%; width: 44%; opacity: .05; }

.voet--kaal { padding-top: 0; background: var(--groen-diep); }
.voet--kaal .voet__slot { border-top: 0; padding-block: 1.6rem; }
.voet__koekjes {
  font: inherit; color: var(--op-donker); background: none; border: 0;
  padding: 0; cursor: pointer; text-decoration: underline;
}
.voet__koekjes:hover { color: #fff; }

/* ── WhatsApp ─────────────────────────────────────────────────────────── */
.whatsapp {
  position: fixed; z-index: 55;
  right: clamp(16px, 2.4vw, 28px);
  bottom: clamp(16px, 2.4vw, 28px);
  display: inline-flex; align-items: center; gap: 0;
  height: 58px; width: 58px;
  border-radius: 999px;
  background: #25D366;
  color: #fff;
  text-decoration: none;
  overflow: hidden;
  transition: width .22s ease, gap .22s ease, background-color .15s;
}
.whatsapp .icoon { width: 30px; height: 30px; margin-inline: 14px; }
.whatsapp__tekst {
  font-family: var(--kop); font-weight: 800; font-size: .95rem;
  white-space: nowrap; opacity: 0;
  padding-right: 20px;
  transition: opacity .18s ease;
}
.whatsapp:hover, .whatsapp:focus-visible {
  width: 232px; background: #1EBE5B; color: #fff;
}
.whatsapp:focus-visible { outline-color: var(--inkt); }
.whatsapp:hover .whatsapp__tekst, .whatsapp:focus-visible .whatsapp__tekst { opacity: 1; }

/* De pulserende ring. Niet met een pseudo-element: de knop heeft
   `overflow: hidden` nodig om de tekst uit te laten schuiven, en dat zou de ring
   wegknippen. Een geanimeerde box-shadow wordt niet geknipt. */
.whatsapp { animation: whatsapp-puls 2.4s cubic-bezier(.25, .6, .4, 1) infinite; }
.whatsapp:hover, .whatsapp:focus-visible { animation: none; }

@keyframes whatsapp-puls {
  0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, .6); }
  70%  { box-shadow: 0 0 0 20px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* Achter de cookiemelding of het schermvullende menu heeft de knop niets te
   zoeken. */
body.koekje-open .whatsapp,
body.menu-open .whatsapp { opacity: 0; pointer-events: none; }

@media (max-width: 620px) {
  .whatsapp { height: 54px; width: 54px; }
  .whatsapp .icoon { width: 28px; height: 28px; margin-inline: 13px; }
  .whatsapp:hover, .whatsapp:focus-visible { width: 54px; }
  .whatsapp__tekst { display: none; }
}

/* ── Cookiemelding ────────────────────────────────────────────────────── */
/* `display: grid` hieronder wint van de browserregel [hidden]{display:none},
   dus zonder deze regel gaat de melding nooit weg. */
.koekje[hidden] { display: none; }

.koekje {
  position: fixed; z-index: 60;
  left: 50%; bottom: clamp(14px, 2vw, 24px);
  transform: translateX(-50%);
  width: min(680px, calc(100vw - 2 * clamp(14px, 3vw, 28px)));
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 0 1.2rem;
  align-items: end;
  background: #fff;
  border: 2px solid var(--groen);
  border-radius: var(--rond-groot);
  padding: clamp(18px, 2vw, 24px) clamp(20px, 2.4vw, 28px);
}
.koekje__figuur {
  grid-row: 1 / span 2;
  align-self: end;
  width: auto; height: 148px;
  margin-bottom: calc(-1 * clamp(18px, 2vw, 24px));
}
.koekje__tekst h2 { font-size: 1.15rem; margin-bottom: .35em; }
.koekje__tekst p { font-size: .92rem; color: var(--inkt-zacht); margin: 0; }
.koekje__knoppen {
  grid-column: 2;
  display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem;
}
.koekje__knoppen .knop { padding: .6em 1.3em; font-size: .95rem; }

/* Op een smal scherm moeten het woordmerk en de belknop samen op één regel
   passen; anders wordt de kale kop twee regels hoog en duwt hij het formulier
   uit beeld. */
@media (max-width: 540px) {
  .kop--kaal .merk__naam { width: 112px; }
  .kop--kaal .merk__teken { width: 24px; height: 30px; }
  .kop--kaal .kop__staart .knop { padding: .55em .9em; font-size: .88rem; }
  .kop--kaal .kop__staart .knop .icoon { width: 15px; height: 15px; }
}

@media (max-width: 620px) {
  .koekje { grid-template-columns: minmax(0, 1fr); }
  .koekje__figuur { display: none; }
  .koekje__knoppen { grid-column: 1; }
  .koekje__knoppen .knop { flex: 1 1 auto; justify-content: center; }
}

/* ── Smalle schermen ──────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .hero__kaart { grid-template-columns: 1fr; }
  .aanbod__binnen { grid-template-columns: 1fr; }
  .blad--hero { right: -18%; top: -8%; width: 62%; }
  .formulierblad { grid-template-columns: 1fr; }
  .formulierblad__uitleg { position: static; }
  .voet__binnen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blad--paginakop { display: none; }
}

@media (max-width: 1000px) {
  /* Het woordmerk heeft geen `margin-right: auto` meer sinds het menu links
     tegen het logo staat; zonder deze regel plakt de hamburger daar dus tegenaan
     in plaats van rechts in de balk. */
  .menuknop { display: inline-flex; margin-left: auto; }
  /* `backdrop-filter` maakt van de kopbalk het referentievlak voor alles wat
     eronder `position: fixed` is. Het schermvullende menu klapte daardoor dicht
     tot de hoogte van de balk. Op een telefoon voegt die blur weinig toe, dus
     hij gaat eruit en de balk wordt gewoon wit. */
  .kop { backdrop-filter: none; background: var(--mist); }
  /* Het uitgeklapte menu vult het hele scherm onder de balk. Eerder was het een
     paneel dat aan de onderkant ophield, waardoor de pagina erachter zichtbaar
     bleef en meescrolde. `overscroll-behavior: contain` houdt het scrollen
     binnen het paneel; het vastzetten van de pagina zelf doet de JS. */
  .menu {
    display: none;
    position: fixed; left: 0; right: 0; top: 74px; bottom: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff;
    padding: .5rem var(--rand) 1.2rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 41;
  }
  .menu.is-open { display: flex; }
  .kop__binnen { position: relative; flex-wrap: wrap; }
  .menu__lijst { flex-direction: column; align-items: stretch; gap: 0; }
  /* Het hele vlak klikbaar, niet alleen het woord. Op een telefoon mik je met
     een duim, niet met een muisaanwijzer. */
  .menu__link {
    display: flex; width: 100%;
    padding: .85em .7em; font-size: 1.05rem; border-radius: 12px;
  }
  .menu__uit > .menu__link { justify-content: flex-start; }
  .menu__huis .menu__link { padding-inline: .4em; gap: .55em; }
  .menu__naam { display: inline; }
  .menu__uit .icoon--chevron { display: none; }
  .menu__sub {
    position: static; opacity: 1; visibility: visible; transform: none;
    border: 0; padding: 0 0 .6rem .8rem; min-width: 0;
  }
  .menu__sub em { display: none; }
  .menu__sub a { padding: .5rem .4rem; }
  /* Onder de knoppen blijft op een lange telefoon ruimte over. Daar staat de
     banner uit de e-mail, met het tekenfiguurtje dat half achter de onderrand
     wegloopt. `margin-top: auto` duwt het geheel naar beneden zolang er plek
     is; bij een korte telefoon schuift het gewoon mee in de scroll. */
  .menu__slot {
    display: block;
    position: relative;
    margin-top: auto; padding-top: 1.1rem;
  }
  .menu__slot .banner { padding-right: 92px; }
  .menu__figuur {
    position: absolute; right: -6px; bottom: -14px;
    width: auto; height: 124px;
    pointer-events: none;
  }

  .menu__staart {
    flex-direction: column; align-items: stretch; gap: .8rem;
    /* margin-left:auto duwt de knoppen op brede schermen naar rechts; in de
       uitgeklapte lijst zou dat ze smal maken in plaats van over de volle
       breedte. */
    margin-left: 0; margin-top: 1rem; padding-top: 1.1rem;
    border-top: 1px solid var(--lijn);
  }
  .menu__staart .knop { width: 100%; font-size: 1rem; padding: .8em 1.2em; }
}

@media (max-width: 860px) {
  .figuur { display: none; }
  .sectiekop--metfiguur { display: block; }
}

@media (max-width: 760px) {
  .duo { grid-template-columns: 1fr; }
  .duo--rechts .duo__tekst { order: 0; }
  .duo__beeld { aspect-ratio: 3 / 2; }
  .duo + .duo { margin-top: clamp(32px, 5vw, 48px); }
  .voet__binnen { grid-template-columns: 1fr; }
  .slot { flex-direction: column; align-items: flex-start; }
  /* flex-basis telt in een kolom als hóógte: 340px zou een gat van anderhalve
     alinea onder de tekst laten staan. */
  .slot__tekst { flex: 0 1 auto; }
  .opbouw li { grid-template-columns: 1fr; }
  .opbouw__nr { grid-row: auto; margin-bottom: .2rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .kop, .voet, .kruimels, .slot, .overslaan { display: none !important; }
  body { font-size: 11pt; }
}