/* ==========================================================================
   Rijbewijskeuringspunt Nederland

   Het palet komt rechtstreeks uit het logo en telt twee kleuren:
     NAVY   #012650  het woordmerk en NEDERLAND, de auto -> tekst en vlakken
     GROEN  #3C921D  de weg en het vinkje -> uitsluitend actie
   Al het overige is daaruit afgeleid met een contrastberekening, nooit
   ernaast gezet. Buiten deze twee families bestaat er geen kleur op de site.

   Leeswijzer (de blokken met een 'b' of 'c' zijn bij de merkwissel
   toegevoegd en staan achteraan in het bestand, niet op hun nummer)
   01 Tokens
   02 Reset en basis
   03 Browservlakken
   04 Typografie
   05 Layout
   06 Knoppen
   07 Header en navigatie
   07b Actielint
   08 Mobiele actiebalk
   09 Hero
   10 Paginakop
   11 Kenmerkenrij
   11b Snelle links
   11c Cijferbalk
   12 Stappen
   13 Checklijst
   14 Callout en geruststellingsband
   15 Mediablokken
   15b De arts
   16 Tarieven
   16b Prijskaarten
   16c Keuringkaarten
   17 Veelgestelde vragen
   17b Kennisbank
   18 Contact
   18b2 Afspraakblok
   18c Locaties
   19 CTA-band
   20 Footer
   20b Mobiel herontwerp
   21 Beweging
   ========================================================================== */

/* 01 Tokens ================================================================ */

:root {
  /* --- UIT HET LOGO, ongewijzigd ------------------------------------------
     Twee kleuren, allebei met de pipet uit het aangeleverde bestand gehaald.
     Het groen haalt op wit 3,1:1 en kan dus geen letter zijn: het is vlak,
     lijn en vinkje. Alles wat gelezen of aangeklikt wordt, is afgeleid.    */
  --navy:           #012650;  /* woordmerk en auto      15,1:1 op wit       */
  --groen-merk:     #3C921D;  /* weg en vinkje           4,0:1 -> nooit tekst */

  --wit:            #FFFFFF;
  --canvas:         #F2F5F8;  /* paginacanvas, navy op hoge lichtheid       */
  --canvas-rgb:     242, 245, 248;

  /* --- AFGELEID, omdat het logo zelf niet elke rol dekt ------------------- */
  --navy-diep:      #01192F;  /* CTA-band, voet, focusring 17,8:1 met wit   */
  --staal:          #3A6A94;  /* iconen, randen, grote tekst  5,7:1 op wit  */
  --tekst:          #3E4C60;  /* body                         8,0:1 op canvas */
  --tekst-zacht:    #566375;  /* bijtekst                     5,6:1 op canvas */
  --groen:          #2B7517;  /* knopvlak, cijferbol          5,7:1 met wit */
  --groen-donker:   #265E11;  /* knop-hover                   7,8:1 met wit */
  --groen-tekst:    #2B6B14;  /* groene letters, icoonglyph   6,0:1 op canvas */
  --groen-licht:    #7FD05E;  /* groen op donkere vlakken     8,0:1 op navy */

  /* --- Vlakken en lijnen, afgeleid uit het navy --- */
  --vlak:           #E9F0F6;  /* wisselsectie                               */
  --accent-vlak:    #E7F4E1;  /* icoonrondje, nadrukvlak, uit het merkgroen */
  --groen-vlak:     #E7F4E1;  /* alias, leesbaarheid in de opmaak           */
  --lijn:           #D6E1EA;
  --lijn-sterk:     #B8C8D6;

  /* --- Ruimte, 8px-raster --- */
  --s1:  0.5rem;
  --s2:  0.75rem;
  --s3:  1rem;
  --s4:  1.5rem;
  --s5:  2rem;
  --s6:  2.5rem;
  --s7:  3rem;
  --s8:  4rem;
  --s9:  5rem;
  --s10: 6.5rem;

  /* --- Radii --- */
  --r-s:   10px;
  --r:     14px;
  --r-l:   20px;
  --r-xl:  28px;

  /* --- Schaduw: koel getint, want hij valt op een koel canvas --- */
  --schaduw-s:  0 1px 2px rgba(1, 38, 80, 0.05), 0 2px 8px rgba(1, 38, 80, 0.05);
  --schaduw:    0 2px 4px rgba(1, 38, 80, 0.05), 0 12px 28px rgba(1, 38, 80, 0.09);
  --schaduw-l:  0 4px 10px rgba(1, 38, 80, 0.06), 0 24px 52px rgba(1, 38, 80, 0.12);

  /* --- Maatvoering --- */
  --breedte:      1220px;
  --breedte-smal: 800px;
  --kop-hoogte:   86px;
  --balk-hoogte:  0px;    /* vaste actiebalk; alleen op mobiel > 0 */
  --lint-hoogte:  0px;    /* actielint; main.js meet en zet dit  */

  /* --- Kopgroottes onder de sectiekop ---------------------------------
     Drie maten, meer niet. Elk onderdeel kiest er één; zo houden koppen
     over de hele site dezelfde rangorde, ook als ze in verschillende
     kaarten of panelen staan.                                            */
  --kop-paneel: clamp(1.375rem, 1.25rem + 0.5vw, 1.625rem); /* groot blok  */
  --kop-tekst:  1.25rem;                                    /* tussenkop   */
  --kop-kaart:  1.1875rem;                                  /* kleine kaart */

  /* --- Beweging --- */
  --uit:    cubic-bezier(0.16, 1, 0.3, 1);
  --snel:   150ms;
  --rustig: 280ms;
}

@media (max-width: 900px) {
  :root { --kop-hoogte: 72px; }
}

@media (max-width: 800px) {
  :root { --balk-hoogte: 88px; }
}

/* 02 Reset en basis ======================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--kop-hoogte) + var(--s4));
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--tekst);
  font-family: 'Source Sans 3', ui-sans-serif, system-ui, 'Segoe UI', Arial, sans-serif;
  font-size: 1.125rem;          /* 18px ondergrens: de doelgroep leest mee */
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Woorden als "Gezondheidsverklaring" passen bij 200% tekstzoom niet meer
     op een telefoon. Breken mag dan; bij normale grootte gebeurt niets.   */
  overflow-wrap: break-word;
}

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

ul, ol { margin: 0; padding: 0; }
li { list-style: none; }

button, input, select, textarea { font: inherit; color: inherit; }

table { border-collapse: collapse; width: 100%; }

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

/* Buiten beeld parkeren met een negatieve top laat het element meetellen in
   het scrollgebied: op mobiel werd de pagina daardoor 8px te breed. Een
   1x1-doos met clip-path kan dat per definitie niet.                      */
.overslaan {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 200;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  background: var(--navy-diep);
  color: var(--wit);
  border-radius: var(--r-s);
  font-weight: 700;
  text-decoration: none;
}
.overslaan:focus-visible {
  left: var(--s3);
  top: var(--s3);
  width: auto;
  height: auto;
  margin: 0;
  padding: var(--s3) var(--s4);
  overflow: visible;
  clip: auto;
  clip-path: none;
}

/* 03 Browservlakken ======================================================== */

::selection { background: var(--accent-vlak); color: var(--navy); }

:root { caret-color: var(--groen); }

:focus-visible {
  outline: 3px solid var(--navy-diep);
  outline-offset: 3px;
  border-radius: 4px;
}
.cta-band :focus-visible,
.voet :focus-visible,
.gerust :focus-visible { outline-color: var(--wit); }

html {
  scrollbar-color: var(--lijn-sterk) var(--vlak);
  scrollbar-width: thin;
}
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--vlak); }
::-webkit-scrollbar-thumb {
  background: var(--lijn-sterk);
  border: 3px solid var(--vlak);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: var(--tekst-zacht); }

/* 04 Typografie ============================================================ */

h1, h2, h3 {
  font-family: 'Figtree', ui-sans-serif, system-ui, 'Segoe UI', Arial, sans-serif;
  color: var(--navy);
  margin: 0;
  line-height: 1.12;
  letter-spacing: -0.023em;
  text-wrap: balance;
  font-weight: 800;
  /* Nederlandse samenstellingen zijn lang. Bij 200% tekstzoom past
     "Rijbewijskeuring" niet meer op een telefoon; dan mag hij afbreken.
     Bij normale grootte past alles en gebeurt er niets.                  */
  overflow-wrap: break-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}

h1 { font-size: clamp(2.375rem, 1.75rem + 2.75vw, 3.75rem); }
h2 { font-size: clamp(1.9375rem, 1.5rem + 1.85vw, 2.875rem); line-height: 1.16; }
h3 { font-size: clamp(1.3125rem, 1.16rem + 0.6vw, 1.625rem); line-height: 1.28; font-weight: 700; letter-spacing: -0.015em; }

p { margin: 0 0 var(--s3); max-width: 68ch; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

.lead {
  font-size: clamp(1.1875rem, 1.1rem + 0.4vw, 1.4375rem);
  line-height: 1.6;
  color: var(--tekst);
  max-width: 60ch;
}

.sub-kop {
  font-family: 'Figtree', ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(1.1875rem, 1.08rem + 0.5vw, 1.5rem);
  font-weight: 600;
  color: var(--groen-tekst);
  letter-spacing: -0.012em;
  line-height: 1.35;
  margin: var(--s2) 0 0;
}

a {
  color: var(--navy);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.22em;
  transition: color var(--snel) var(--uit);
}
a:hover { color: var(--groen-tekst); }

/* Meer lucht boven een kop dan eronder */
* + h2 { margin-top: var(--s7); }
* + h3 { margin-top: var(--s5); }
h2 + p, h2 + .lead, h3 + p { margin-top: var(--s3); }

/* 05 Layout ================================================================ */

.container {
  width: 100%;
  max-width: var(--breedte);
  margin-inline: auto;
  /* Ondergrens in px: bij 200% tekstzoom mag de goot niet meegroeien,
     anders loopt de kop over de schermrand (WCAG 1.4.10 Reflow).
     Op 100% exact gelijk aan 1.25rem = 20px. */
  padding-inline: clamp(20px, 4vw, 2.75rem);
}
.container--smal { max-width: var(--breedte-smal); }

.sectie { padding-block: clamp(3.75rem, 6.5vw, 6.5rem); }
.sectie--kort { padding-block: clamp(2.5rem, 4vw, 4rem); }
.sectie--wit  { background: var(--wit); }
.sectie--vlak { background: var(--vlak); }

.sectie-kop { max-width: 46rem; margin-bottom: var(--s7); }
.sectie-kop--midden { margin-inline: auto; text-align: center; }
.sectie-kop--midden p { margin-inline: auto; }
.sectie-kop > * + * { margin-top: var(--s3); }
.sectie-kop h2 { margin-top: 0; }

.raster { display: grid; gap: var(--s4); }
@media (min-width: 720px) {
  .raster--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .raster--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Eén icoonset: 24px-raster, stroke 1.75, altijd currentColor */
.ico {
  width: 24px; height: 24px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ico--s  { width: 20px; height: 20px; stroke-width: 1.9; }
.ico--l  { width: 32px; height: 32px; stroke-width: 1.6; }
.ico--xl { width: 40px; height: 40px; stroke-width: 1.5; }

/* 06 Knoppen =============================================================== */

.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-height: 58px;
  padding: 0.75rem 1.625rem;
  border: 2px solid transparent;
  border-radius: var(--r-s);
  font-family: 'Figtree', ui-sans-serif, system-ui, sans-serif;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--snel) var(--uit),
    border-color var(--snel) var(--uit),
    color var(--snel) var(--uit),
    box-shadow var(--rustig) var(--uit),
    transform var(--rustig) var(--uit);
}

.knop--groot { min-height: 66px; padding: 0.875rem 2rem; font-size: 1.1875rem; }

.knop--primair {
  background: var(--groen);
  border-color: var(--groen);
  color: var(--wit);
  box-shadow: 0 1px 2px rgba(43, 117, 23, 0.18), 0 6px 18px rgba(43, 117, 23, 0.20);
}
.knop--primair:hover {
  background: var(--groen-donker);
  border-color: var(--groen-tekst);
  color: var(--wit);
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(43, 117, 23, 0.20), 0 14px 30px rgba(43, 117, 23, 0.26);
}
.knop--primair:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(43, 117, 23, 0.2); }

.knop--tweede {
  background: var(--wit);
  border-color: var(--lijn-sterk);
  color: var(--navy);
  box-shadow: var(--schaduw-s);
}
.knop--tweede:hover {
  background: var(--wit);
  border-color: var(--navy);
  color: var(--navy-diep);
  transform: translateY(-2px);
  box-shadow: var(--schaduw);
}
.knop--tweede:active { transform: translateY(0); box-shadow: var(--schaduw-s); }

.knop--licht {
  background: var(--wit);
  border-color: var(--wit);
  color: var(--navy-diep);
}
.knop--licht:hover { background: var(--vlak); border-color: var(--vlak); color: var(--navy-diep); transform: translateY(-2px); }

.knop--rand-licht {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.5);
  color: var(--wit);
}
.knop--rand-licht:hover { background: rgba(255, 255, 255, 0.1); border-color: var(--wit); color: var(--wit); }

.knop-rij { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: stretch; }
.knop-rij--midden { justify-content: center; }

/* 07 Header en navigatie =================================================== */

/* De header loopt door over de hero en is daar doorzichtig. Pas zodra de
   bezoeker scrolt komt het canvas eronder; de JS zet dan .is-gescrold.
   Zonder JS staat de header meteen op het canvas: dat is de veilige staat. */
.kop {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(var(--canvas-rgb), 0.92);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid transparent;
  transition:
    background-color var(--rustig) var(--uit),
    backdrop-filter var(--rustig) var(--uit),
    border-color var(--rustig) var(--uit),
    box-shadow var(--rustig) var(--uit);
}
/* Alleen wanneer JavaScript draait durven we de header doorzichtig te maken:
   anders zou hij op een pagina zonder hero over de inhoud heen vallen.      */
.js .kop {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.js .kop.is-gescrold {
  background: rgba(var(--canvas-rgb), 0.92);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
}
.kop.is-gescrold {
  border-bottom-color: var(--lijn);
  box-shadow: 0 1px 2px rgba(1, 38, 80, 0.04), 0 10px 28px rgba(1, 38, 80, 0.07);
}
/* Op onderpagina's begint de inhoud direct onder de header; daar mag hij niet
   doorzichtig zijn, anders loopt de paginakop eronderdoor.                   */
.js body:not(.heeft-hero) .kop {
  background: rgba(var(--canvas-rgb), 0.92);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
}
@supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
  .kop { background: var(--canvas); }
}

/* Zolang het menu open staat mag de header géén backdrop-filter hebben. Een
   filter maakt van de balk het referentiekader voor alles wat erin
   position:fixed is: het menupaneel werd daardoor binnen de balkhoogte
   geknipt in plaats van over de pagina te vallen. Hij gaat tegelijk boven
   het actielint uit, anders valt dat lint over het paneel heen.            */
.kop.menu-open,
.js .kop.is-gescrold.menu-open,
.js body:not(.heeft-hero) .kop.menu-open,
.kop:has(.menu[open]),
.js .kop.is-gescrold:has(.menu[open]),
.js body:not(.heeft-hero) .kop:has(.menu[open]) {
  z-index: 130;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: none;
}

.kop__binnen {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px; /* px, zodat de kop bij 200% tekstzoom niet overloopt */
  min-height: var(--kop-hoogte);
  max-width: none;   /* header loopt tot de schermranden: logo links, CTA rechts */
}

/* De nav wordt op het midden van het scherm gehangen, niet tussen logo en
   CTA gedrukt: anders verschuift hij met de breedte van die twee mee.     */
.kop__nav-breed {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.kop__logo { min-width: 0; }
.kop__logo img { max-width: 100%; object-fit: contain; object-position: left center; }
.menu > summary { max-width: 100%; }

.kop__logo {
  flex: none;
  display: flex;
  align-items: center;
  min-height: 48px;
  line-height: 0;
  border-radius: var(--r-s);
}
.kop__logo img { width: auto; height: 62px; }
@media (max-width: 900px) { .kop__logo img { height: 46px; } }
@media (max-width: 380px) { .kop__logo img { height: 38px; } }

.kop__rechts { display: flex; align-items: center; gap: 16px; }

.nav__lijst { display: flex; align-items: center; gap: 0.15rem; }

.nav__link {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 0.9375rem;
  border-radius: var(--r-s);
  font-family: 'Figtree', ui-sans-serif, system-ui, sans-serif;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--tekst);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--snel) var(--uit), color var(--snel) var(--uit);
}
.nav__link:hover { background: var(--accent-vlak); color: var(--navy); }
.nav__link[aria-current="page"] { color: var(--navy); font-weight: 700; }
.nav__link[aria-current="page"]::after {
  content: '';
  position: absolute;
  left: 0.9375rem; right: 0.9375rem; bottom: 9px;
  height: 2px;
  border-radius: 2px;
  background: var(--groen);
}

/* Mobiel menu: native disclosure, werkt zonder JavaScript */
.menu { display: none; position: relative; }
.menu > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 52px;
  padding: 0 1.125rem;
  border: 2px solid var(--lijn-sterk);
  border-radius: var(--r-s);
  font-family: 'Figtree', ui-sans-serif, system-ui, sans-serif;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--navy);
  background: var(--wit);
  cursor: pointer;
  list-style: none;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary::marker { content: ''; }
.menu[open] > summary { background: var(--navy); border-color: var(--navy); color: var(--wit); }
.menu__dicht { display: none; }
.menu[open] .menu__dicht { display: block; }
.menu[open] .menu__open { display: none; }

/* Het paneel schuift van rechts over de pagina in plaats van als kaartje
   onder de knop te hangen: op een telefoon blijft er dan niets van de
   pagina half zichtbaar achter het menu.                                  */
.menu__overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 110;
  background: rgba(1, 25, 47, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.menu[open] .menu__overlay { display: block; }

.menu__paneel {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: 120;
  display: flex;
  flex-direction: column;
  gap: var(--s5);
  width: min(22rem, 88vw);
  padding: var(--s5) var(--s5) var(--s6);
  background: var(--navy);
  color: var(--groen-licht);
  box-shadow: -20px 0 60px rgba(1, 25, 47, 0.45);
  overflow-y: auto;
  overscroll-behavior: contain;
  animation: paneel-in var(--rustig) var(--uit);
}
@keyframes paneel-in {
  from { transform: translateX(12%); opacity: 0; }
}

.menu__kop { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); }
.menu__merk img { width: auto; height: 40px; }
.menu__sluit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  flex: none;
  border-radius: var(--r-s);
  border: 1.5px solid rgba(255, 255, 255, 0.24);
  background: transparent;
  color: var(--wit);
  cursor: pointer;
  transition: border-color var(--snel) var(--uit), color var(--snel) var(--uit);
}
.menu__sluit:hover { border-color: var(--groen-licht); color: var(--groen-licht); }

.menu__nav ul { display: grid; gap: 2px; }
.menu__nav a {
  display: block;
  padding: 0.875rem 0.75rem;
  border-radius: var(--r-s);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--wit);
  font-family: 'Figtree', ui-sans-serif, system-ui, sans-serif;
  font-size: 1.1875rem;
  font-weight: 700;
  text-decoration: none;
  transition: background-color var(--snel) var(--uit), padding-left var(--snel) var(--uit);
}
.menu__nav a:hover { background: rgba(255, 255, 255, 0.07); padding-left: 1.125rem; color: var(--wit); }
.menu__nav a[aria-current="page"] { color: var(--groen-licht); }

.menu__voet { margin-top: auto; display: grid; gap: var(--s3); }
.menu__voet .knop { width: 100%; }
.menu__voet p { margin: 0; font-size: 0.9375rem; color: var(--groen-licht); }
.menu__voet p a { color: var(--wit); }

@media (max-width: 1100px) {
  .kop__nav-breed { display: none; }
  .kop__cta-breed { display: none; }
  .menu { display: block; }
}

/* 08 Mobiele actiebalk ===================================================== */

.actiebalk {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: none;
  gap: var(--s2);
  padding: 0.625rem clamp(0.75rem, 3vw, 1.25rem);
  padding-bottom: calc(0.625rem + env(safe-area-inset-bottom, 0px));
  background: rgba(var(--canvas-rgb), 0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--lijn);
  box-shadow: 0 -2px 4px rgba(1, 38, 80, 0.04), 0 -12px 30px rgba(1, 38, 80, 0.09);
}
.actiebalk .knop {
  flex: 1 1 0;
  min-height: 58px;
  padding-inline: 0.5rem;
  font-size: min(1rem, 18px);
  min-width: 0;
  overflow-wrap: anywhere;
}
@media (max-width: 359px) { .actiebalk .knop .ico { display: none; } }

@media (max-width: 800px) {
  .actiebalk { display: flex; }
  body { padding-bottom: 88px; }
}

/* 09 Hero ================================================================== */
/* De foto loopt door tot de rand van het scherm en vervaagt naar links in het
   canvas, zoals in de mockup. Geen kaartje, geen kader, geen schaduw.       */

.hero {
  position: relative;
  background: var(--canvas);
  isolation: isolate;
}
/* De header ligt over de hero heen in plaats van erboven: de hero schuift
   omhoog over de headerhoogte en compenseert dat met padding, zodat de
   titel niet onder de navigatie verdwijnt.                                 */
.heeft-hero .hero {
  margin-top: calc(-1 * var(--kop-hoogte));
  padding-top: var(--kop-hoogte);
  /* Precies e'e'n scherm hoog, met de inhoud verticaal gecentreerd. svh in
     plaats van vh, want op een telefoon telt vh de adresbalk mee en valt de
     onderrand dan buiten beeld. Groeien mag de hero alleen nog wanneer de
     bezoeker de tekst zo ver opblaast dat hij anders niet meer past.      */
  display: grid;
  align-content: center;
  min-height: calc(100vh - var(--lint-hoogte) - var(--balk-hoogte));
  min-height: calc(100svh - var(--lint-hoogte) - var(--balk-hoogte));
}

.hero__beeld {
  position: absolute;
  inset: 0 0 0 auto;
  width: 74%;
  z-index: -1;
  overflow: hidden;   /* clip hier, niet op de sectie: anders kapt zoom tekst af */
}
.hero__beeld picture { display: block; width: 100%; height: 100%; }
.hero__beeld img { width: 100%; height: 100%; object-fit: cover; object-position: 78% 50%; }
.hero__beeld::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(var(--canvas-rgb), 1)    0%,
    rgba(var(--canvas-rgb), 0.98) 7%,
    rgba(var(--canvas-rgb), 0.62) 15%,
    rgba(var(--canvas-rgb), 0.18) 23%,
    rgba(var(--canvas-rgb), 0)    31%
  );
}

.hero__binnen {
  position: relative;
  max-width: 1280px;               /* iets breder dan --breedte: tekst schuift naar links */
  padding-block: clamp(1.75rem, 3.5vw, 3rem);
}
/* Nog 60px verder naar links, maar alleen waar het scherm die ruimte heeft.
   Een negatieve marge zou op smalle schermen buiten beeld duwen.          */
@media (min-width: 1360px) { .hero__binnen { max-width: 1400px; } }
.hero__intro { max-width: 35rem; }

.hero__titel {
  font-size: clamp(2.5rem, 1.6rem + 3.9vw, 4.5rem);
  /* Zonder dit breekt "rijbewijskeuring" af tot "rijbe-wijskeuring": de
     algemene hyphens: auto uit de typografie mag hier niet gelden.        */
  hyphens: manual;
  -webkit-hyphens: manual;
  overflow-wrap: normal;
}
.hero__titel span { display: block; color: var(--groen-tekst); }

.hero__payoff {
  display: flex;
  align-items: center;
  gap: var(--s4);
  margin: var(--s4) 0 0;
  max-width: none;
  font-family: 'Figtree', ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  font-weight: 600;
  color: var(--tekst-zacht);
}
.hero__payoff::before,
.hero__payoff::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: var(--lijn-sterk);
}

.hero__lead { margin-top: var(--s4); }
.hero__acties { margin-top: var(--s5); }

.hero__punten {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s3);
  margin-top: var(--s5);
  padding-top: var(--s5);
  border-top: 1px solid var(--lijn);
}
@media (min-width: 560px) { .hero__punten { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hero__punt {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
  font-family: 'Figtree', ui-sans-serif, system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--tekst-zacht);
  line-height: 1.35;
}
.hero__punt .ico { color: var(--groen-tekst); }

@media (max-width: 1180px) {
  .hero__beeld::after {
    background: linear-gradient(
      to right,
      rgba(var(--canvas-rgb), 1)    0%,
      rgba(var(--canvas-rgb), 0.98) 7%,
      rgba(var(--canvas-rgb), 0.62) 15%,
      rgba(var(--canvas-rgb), 0.18) 23%,
      rgba(var(--canvas-rgb), 0)    31%
    );
  }
  /* Smallere tekstkolom, anders botsen tekst en arts op deze breedtes */
  .hero__intro { max-width: 24rem; }
}

/* Onder 820px vervalt de herofoto en staat alles gecentreerd: op een
   telefoon voegt het beeld weinig toe en kost het alleen scrollhoogte.   */
@media (max-width: 820px) {
  .hero__beeld { display: none; }

  .hero__intro { max-width: none; text-align: center; }
  .hero__payoff { justify-content: center; }
  .hero__lead { margin-inline: auto; }
  .hero__acties { justify-content: center; }
  .hero__punten { justify-items: center; }
  .hero__binnen { padding-block: var(--s5); }

  /* Op een telefoon moet de hele hero binnen e'e'n schermvulling passen,
     inclusief de vaste actiebalk onderaan. Dat lukt alleen door de titel en
     de tussenruimtes terug te brengen; er valt niets weg.                 */
  .hero__titel { font-size: clamp(2.125rem, 1.5rem + 3.2vw, 2.75rem); }
  .hero__payoff { margin-top: var(--s3); }
  .hero__payoff::before, .hero__payoff::after { display: none; }
  .hero__lead { margin-top: var(--s3); font-size: 1.0625rem; }
  .hero__acties { margin-top: var(--s4); }
  .hero__punten {
    margin-top: var(--s4);
    padding-top: var(--s4);
    gap: var(--s3) var(--s2);
    font-size: 0.9375rem;
  }
  .hero__punt { font-size: 0.9375rem; }
  .hero__punt .ico--l { width: 26px; height: 26px; }

  /* Naast elkaar in plaats van onder elkaar: scheelt een knophoogte, en
     beide blijven ruim boven de 48px aanraakmaat.                        */
  .hero__acties { flex-wrap: nowrap; gap: var(--s2); }
  .hero__acties .knop { flex: 1 1 0; min-width: 0; padding-inline: 0.75rem; }
  .hero__punten { display: none; }
}

/* Lage vensters (een laptop van 768px hoog): de titel krimpt liever dan dat
   de hero over de vouw heen groeit.                                        */
@media (min-width: 821px) and (max-height: 960px) {
  .hero__titel { font-size: clamp(2.25rem, 1.4rem + 2.4vw, 3.25rem); }
  .hero__lead { font-size: 1.125rem; }
  .hero__punten { margin-top: var(--s4); padding-top: var(--s4); }
  .hero__binnen { padding-block: var(--s4); }
}

/* 10 Paginakop ============================================================= */

.paginakop {
  position: relative;
  background: var(--vlak);
  border-bottom: 1px solid var(--lijn);
  padding-block: clamp(2.25rem, 4.5vw, 3.5rem) clamp(2.75rem, 5vw, 4.5rem);
}
.paginakop__tekst { max-width: 44rem; }
.paginakop__tekst .lead { margin-top: var(--s4); }

/* 11 Kenmerkenrij ========================================================== */
/* Eén blok met haarlijnen ertussen, geen rij losse zwevende kaartjes. */

.kenmerken {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: var(--r-xl);
  box-shadow: var(--schaduw);
  overflow: hidden;
}
.kenmerk {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding: var(--s6) var(--s5);
  border-top: 1px solid var(--lijn);
}
.kenmerk:first-child { border-top: 0; }
.kenmerk__ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px; height: 54px;
  border-radius: 50%;
  background: var(--accent-vlak);
  color: var(--groen-tekst);
}
.kenmerk h3 { font-size: var(--kop-kaart); margin: 0; }
.kenmerk p { font-size: 1.0625rem; color: var(--tekst-zacht); margin: 0; }

@media (min-width: 640px) {
  .kenmerken { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kenmerk { border-top: 1px solid var(--lijn); border-left: 1px solid var(--lijn); }
  .kenmerk:nth-child(-n+2) { border-top: 0; }
  .kenmerk:nth-child(2n+1) { border-left: 0; }
}
@media (min-width: 1080px) {
  .kenmerken { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .kenmerk { border-top: 0; border-left: 1px solid var(--lijn); padding: var(--s6) var(--s4); }
  .kenmerk:nth-child(2n+1) { border-left: 1px solid var(--lijn); }
  .kenmerk:first-child { border-left: 0; }
}

/* Wat u meeneemt */
.meenemen { display: grid; gap: var(--s3); grid-template-columns: repeat(1, minmax(0, 1fr)); }
@media (min-width: 620px)  { .meenemen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .meenemen { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.meenemen__item {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  padding: var(--s4);
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: var(--r-l);
}
.meenemen__item .ico { color: var(--groen-tekst); margin-top: 2px; }
.meenemen__item > div { min-width: 0; overflow-wrap: break-word; }
.meenemen__item strong {
  display: block;
  font-family: 'Figtree', ui-sans-serif, system-ui, sans-serif;
  font-size: 1.0625rem;
  color: var(--navy);
  line-height: 1.35;
}
.meenemen__item span { display: block; font-size: 1rem; color: var(--tekst-zacht); line-height: 1.5; margin-top: 0.2rem; }

/* 12 Stappen =============================================================== */

.stappen { display: grid; gap: var(--s4); }
@media (min-width: 860px) {
  .stappen--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stappen--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1080px) { .stappen--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.stap {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  padding: var(--s6) var(--s5);
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: var(--r-xl);
  box-shadow: var(--schaduw-s);
}
.stap__nummer {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--groen);
  color: var(--wit);
  font-family: 'Figtree', ui-sans-serif, system-ui, sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 4px rgba(43, 117, 23, 0.16), 0 8px 20px rgba(43, 117, 23, 0.22);
}
.stap__ico { color: var(--lijn-sterk); }
.stap :is(h2, h3) {
  margin: 0;
  font-size: var(--kop-kaart);
  line-height: 1.28;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.stap p { font-size: 1.0625rem; color: var(--tekst-zacht); margin: 0; }

/* Genummerde rijen */
.stap-rij { display: grid; gap: var(--s3); }
.stap-rij__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s4);
  align-items: start;
  padding: var(--s4) var(--s5) var(--s4) var(--s4);
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: var(--r-l);
  box-shadow: var(--schaduw-s);
}
.stap-rij__nummer {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--groen);
  color: var(--wit);
  font-family: 'Figtree', ui-sans-serif, system-ui, sans-serif;
  font-size: 1.0625rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.stap-rij__item h3 { font-size: var(--kop-kaart); margin: 0 0 0.35rem; }
.stap-rij__item p { font-size: 1.0625rem; color: var(--tekst-zacht); margin: 0; }

/* 13 Checklijst ============================================================ */

.checklijst { display: grid; gap: var(--s3); }
.checklijst li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s3);
  align-items: start;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--tekst);
}
.checklijst .ico { color: var(--groen-tekst); margin-top: 0.28rem; }

/* 14 Callout en geruststellingsband ======================================== */

.callout {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s4);
  align-items: start;
  padding: var(--s6);
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: var(--r-xl);
}
.callout--wit { background: var(--wit); }
.callout__ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px; height: 50px;
  border-radius: 50%;
  background: var(--wit);
  color: var(--groen-tekst);
  box-shadow: var(--schaduw-s);
}
.callout h3 { font-size: var(--kop-kaart); margin: 0 0 0.5rem; }
.callout p { font-size: 1.0625rem; color: var(--tekst); margin: 0; }
.callout .knop-rij { margin-top: var(--s5); }

@media (max-width: 560px) { .callout { grid-template-columns: 1fr; padding: var(--s5) var(--s4); } }

/* Afspraakblok: de landingsplek van elke CTA op de site */
.afspraak__blok {
  max-width: 54rem;
  margin-inline: auto;
  padding: clamp(2.25rem, 4.5vw, 4rem);
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: var(--r-xl);
  text-align: center;
  box-shadow: var(--schaduw);
}
.afspraak__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 68px; height: 68px;
  margin-bottom: var(--s4);
  border-radius: 50%;
  background: var(--wit);
  color: var(--groen-tekst);
  box-shadow: var(--schaduw-s);
}
.afspraak__blok h2 { margin-top: 0; }
.afspraak__blok .lead { margin: var(--s4) auto 0; }
.afspraak__blok .knop-rij { margin-top: var(--s6); justify-content: center; }

/* 15 Mediablokken ========================================================== */

.media { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 4.5vw, 4rem); align-items: center; }
@media (min-width: 900px) {
  .media { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .media--beeld-links .media__beeld { order: -1; }
}
.media__beeld img { width: 100%; border-radius: var(--r-xl); box-shadow: var(--schaduw-l); }
.media__tekst > * + * { margin-top: var(--s4); }
.media__tekst h2 { margin-top: 0; }

/* 15b De arts ==============================================================
   Eén echt gezicht doet meer voor het vertrouwen dan vijf icoonkaarten.     */

.arts { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 4.5vw, 4rem); align-items: center; }
@media (min-width: 900px) { .arts { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); } }

.arts__portret { position: relative; }
.arts__portret img {
  width: 100%;
  border-radius: var(--r-xl);
  box-shadow: var(--schaduw-l);
}
/* Zandvlak achter het portret, met de asymmetrische boog uit het logo */
.arts__portret::before {
  content: '';
  position: absolute;
  inset: 10% -4% -6% 14%;
  z-index: -1;
  background: var(--groen-vlak, var(--accent-vlak));
  border-radius: var(--r-xl) var(--r-xl) 120px var(--r-xl);
}

.arts__tekst > * + * { margin-top: var(--s4); }
.arts__tekst h2 { margin-top: 0; }

.arts__naamkaart {
  display: flex;
  align-items: center;
  gap: var(--s4);
  margin-top: var(--s6);
  padding-top: var(--s5);
  border-top: 1px solid var(--lijn);
}
.arts__initialen {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  flex: none;
  border-radius: 50%;
  background: var(--groen);
  color: var(--wit);
  font-family: 'Figtree', ui-sans-serif, system-ui, sans-serif;
  font-size: 1.1875rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}
.arts__naam {
  display: block;
  font-family: 'Figtree', ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--navy);
}
.arts__rol { display: block; margin-top: 0.15rem; font-size: 1.0625rem; color: var(--tekst-zacht); }

/* Compacte variant, voor de contactpagina */
.arts-compact {
  display: flex;
  align-items: center;
  gap: var(--s5);
  padding: var(--s5);
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: var(--r-xl);
  box-shadow: var(--schaduw-s);
}
.arts-compact img {
  width: 108px; height: 108px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 50%;
}
.arts-compact .arts__naam { font-size: 1.3125rem; }
.arts-compact p { margin: 0.5rem 0 0; font-size: 1.0625rem; color: var(--tekst-zacht); }

@media (max-width: 560px) {
  .arts-compact { flex-direction: column; align-items: flex-start; gap: var(--s4); }
}

/* 16 Tarieven ============================================================== */

.tarieven-blok { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s6); align-items: start; }
@media (min-width: 980px) {
  .tarieven-blok { grid-template-columns: minmax(0, 0.68fr) minmax(0, 1.32fr); gap: var(--s8); }
  .tarieven-blok__intro { position: sticky; top: calc(var(--kop-hoogte) + var(--s6)); }
}
.tarieven-blok__intro h2 { margin-top: 0; }
.tarieven-blok__intro p { margin-top: var(--s4); font-size: 1.0625rem; color: var(--tekst-zacht); max-width: 34ch; }
.tarieven-blok__intro .knop-rij { margin-top: var(--s5); }

/* Geen prijzentorens en geen kolommetjes: één redactionele lijst waarin het
   bedrag het grootste element op de pagina is.                              */

.tarieven { border-top: 2px solid var(--navy); }
.tarieven th, .tarieven td {
  padding: clamp(1.25rem, 2.6vw, 2rem) 0;
  border-bottom: 1px solid var(--lijn);
  vertical-align: baseline;
  text-align: left;
}
.tarieven tr:last-child th,
.tarieven tr:last-child td { border-bottom: 2px solid var(--navy); }

.tarieven__naam {
  display: block;
  font-family: 'Figtree', ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1.25;
  color: var(--navy);
}
.tarieven__uitleg {
  display: block;
  margin-top: 0.375rem;
  max-width: 42ch;
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.55;
  color: var(--tekst-zacht);
}
.tarieven__prijs {
  width: 1%;
  white-space: nowrap;
  padding-left: var(--s5) !important;
  text-align: right;
  font-family: 'Figtree', ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(2rem, 1.5rem + 2.2vw, 3.25rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--navy);
}
.tarieven__prijs .euro { font-size: max(1.125rem, 0.56em); font-weight: 700; margin-right: 0.08em; color: var(--tekst-zacht); }
.tarieven__prijs .cent { font-size: max(1rem, 0.44em); font-weight: 700; letter-spacing: -0.01em; color: var(--tekst-zacht); }

.tarieven__vlag {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.625rem;
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--lijn-sterk);
  border-radius: 4px;
  background: var(--accent-vlak);
  font-family: 'Figtree', ui-sans-serif, system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--tekst);
}

@media (max-width: 640px) {
  .tarieven th, .tarieven td { display: block; width: auto; }
  .tarieven th { padding-bottom: 0.5rem; border-bottom: 0; }
  .tarieven td { padding-top: 0; padding-left: 0 !important; text-align: left; }
  .tarieven__prijs { width: auto; }
}

/* 17 Veelgestelde vragen =================================================== */

.vragen {
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--schaduw-s);
}
.vraag { border-top: 1px solid var(--lijn); }
.vraag:first-child { border-top: 0; }

.vraag > summary {
  display: flex;
  align-items: center;
  gap: var(--s4);
  min-height: 68px;
  padding: var(--s3) var(--s5);
  cursor: pointer;
  list-style: none;
  font-family: 'Figtree', ui-sans-serif, system-ui, sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.012em;
  line-height: 1.4;
  min-width: 0;
  overflow-wrap: anywhere;
  transition: background-color var(--snel) var(--uit);
}
.vraag > summary::-webkit-details-marker { display: none; }
.vraag > summary::marker { content: ''; }
.vraag > summary:hover { background: var(--canvas); }
.vraag__pijl {
  margin-left: auto;
  color: var(--groen-tekst);
  transition: transform var(--rustig) var(--uit);
}
.vraag[open] > summary { background: var(--canvas); }
.vraag[open] .vraag__pijl { transform: rotate(180deg); }

.vraag__antwoord {
  padding: 0 var(--s5) var(--s5);
  animation: vouw-open 300ms var(--uit) both;
}
.vraag__antwoord p { font-size: 1.0625rem; color: var(--tekst); max-width: 62ch; }
.vraag__antwoord > * + * { margin-top: var(--s3); }

@media (max-width: 560px) {
  .vraag > summary { padding: var(--s3) var(--s4); font-size: 1.0625rem; }
  .vraag__antwoord { padding: 0 var(--s4) var(--s4); }
}

.vragen-groep + .vragen-groep { margin-top: var(--s8); }
.vragen-groep h2 { margin: 0 0 var(--s4); font-size: var(--kop-paneel); }

/* 18 Contact =============================================================== */

.tijden { width: 100%; }
.tijden th, .tijden td { padding: var(--s3) 0; border-bottom: 1px solid var(--lijn); font-size: 1.0625rem; }
.tijden th { text-align: left; font-weight: 600; color: var(--navy); }
.tijden td { text-align: right; font-variant-numeric: tabular-nums; color: var(--tekst); }
.tijden tr:last-child th, .tijden tr:last-child td { border-bottom: 0; }
.tijden .dicht { color: var(--tekst-zacht); }

/* 18b Contactblok ==========================================================
   Bellen, mailen, langskomen en de openingstijden stonden in vier aparte
   secties, waardoor het nummer vier keer op de pagina kwam. Nu is het
   e'e'n paneel: links de drie routes, rechts wanneer we er zijn.          */

/* Contactpagina: een rustige kop met het merkteken als watermerk, daaronder
   links hoe u ons bereikt en rechts het formulier.                         */
.contactkop {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.5rem, 5vw, 4rem) clamp(1rem, 2vw, 1.5rem);
}
.contactkop__merk {
  position: absolute;
  top: 12%;
  right: 3%;
  width: min(26rem, 40vw);
  height: auto;
  opacity: 0.06;
  pointer-events: none;
  user-select: none;
}
.contactkop .container { position: relative; }
.contactkop__soort {
  margin: 0 0 var(--s2);
  font-family: 'Figtree', ui-sans-serif, system-ui, sans-serif;
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--groen-tekst);
}
.contactkop h1 { margin: 0; }
.contactkop .lead { margin-top: var(--s4); }

.contact-raster { display: grid; gap: var(--s5); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 980px) {
  .contact-raster { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--s5); }
}

.contactkaart {
  padding: clamp(1.75rem, 4vw, var(--s7));
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: var(--r-xl);
  box-shadow: var(--schaduw-s);
}
.contactkaart h2 { margin: 0; font-size: var(--kop-paneel); }
.contactkaart__uitleg { margin: var(--s3) 0 0; font-size: 1.0625rem; color: var(--tekst-zacht); }

.contactkaart__routes { display: grid; gap: var(--s5); margin-top: var(--s5); }
.contactkaart__routes li { display: flex; align-items: flex-start; gap: var(--s4); }
.contactkaart__routes--los {
  margin-top: var(--s5);
  padding-top: var(--s5);
  border-top: 1px solid var(--lijn);
}
.contactkaart__ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  flex: none;
  border-radius: 50%;
  background: var(--accent-vlak);
  color: var(--groen-tekst);
}
.contactkaart__ico--vlak { background: var(--vlak); color: var(--staal); }
.contactkaart__label {
  display: block;
  font-family: 'Figtree', ui-sans-serif, system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--tekst-zacht);
}
.contactkaart__waarde {
  display: block;
  margin-top: 0.1rem;
  font-family: 'Figtree', ui-sans-serif, system-ui, sans-serif;
  font-size: 1.1875rem;
  font-weight: 800;
  color: var(--navy);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.contactkaart__waarde:hover { color: var(--groen-tekst); text-decoration: underline; }
.contactkaart__extra { display: block; margin-top: 0.2rem; font-size: 1rem; color: var(--tekst-zacht); }
.contactkaart__adres { display: block; margin-top: 0.15rem; font-size: 1.0625rem; color: var(--tekst); }
.contactkaart__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  margin-top: 0.35rem;
  min-height: 44px;
  font-family: 'Figtree', ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  color: var(--groen-tekst);
  text-decoration: none;
}
.contactkaart__link:hover { color: var(--groen-donker); text-decoration: underline; }

.openingstijden {
  display: flex;
  align-items: flex-start;
  gap: var(--s4);
  margin-top: var(--s5);
  padding: var(--s4) var(--s5);
  background: var(--vlak);
  border-radius: var(--r-l);
}
.openingstijden .tijden { margin-top: var(--s2); }

/* 18b2 Afspraakblok ========================================================
   De knop "Afspraak maken" gaat naar het afsprakensysteem van
   onlineafspraken.nl. Op de contactpagina staat datzelfde in het groot, met
   het telefoonnummer eronder voor wie liever belt.                           */

/* margin-inline: auto is hier nodig, niet alleen text-align: de globale
   leesbreedte op <p> maakt deze blokken 608px breed, en die staan zonder auto
   links in de container in plaats van onder de gecentreerde sectiekop. */
.boeking-actie { margin: 0 auto; text-align: center; }
.boeking-bij {
  margin: var(--s4) auto 0;
  color: var(--tekst-zacht);
  text-align: center;
}

/* 18c Locaties =============================================================
   De bezoeker kiest straks bij het boeken zelf waar hij langskomt; hier
   laten we alleen zien waar dat kan.                                       */

.locaties {
  display: grid;
  gap: var(--s4);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 760px) { .locaties { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.locatie {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s3) var(--s4);
  align-items: start;
  padding: var(--s6) var(--s5);
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: var(--r-xl);
}
.locatie__ico {
  grid-row: span 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px; height: 54px;
  flex: none;
  border-radius: 50%;
  background: var(--wit);
  color: var(--groen-tekst);
  box-shadow: var(--schaduw-s);
}
.locatie h3 { margin: 0; font-size: var(--kop-kaart); align-self: center; }

.locatie__adres {
  grid-column: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--lijn);
  border-radius: var(--r-s);
  background: var(--wit);
  font-size: 1rem;
  color: var(--tekst-zacht);
}
.locatie__adres a { color: inherit; }
.locatie__adres .ico { color: var(--lijn-sterk); }
.locatie p:not(.locatie__adres) {
  grid-column: 2;
  margin: 0;
  font-size: 1.0625rem;
  color: var(--tekst-zacht);
}

@media (max-width: 560px) {
  .locatie { padding: var(--s5) var(--s4); }
}

/* Locaties in de voettekst */
.voet__locaties { display: grid; gap: 0.15rem; }
.voet__locaties li { display: grid; gap: 0.05rem; padding-block: 0.375rem; }
.voet__locaties strong { font-size: 1.0625rem; font-weight: 700; color: var(--wit); }
.voet__locaties span { font-size: 1rem; color: var(--groen-licht); }

/* 19 CTA-band ============================================================== */

.cta-band {
  background: var(--navy-diep);
  color: var(--groen-licht);
  text-align: center;
  padding-block: clamp(3.25rem, 6.5vw, 5.5rem);
}
.cta-band h2 { color: var(--wit); }
.cta-band p {
  margin: var(--s4) auto 0;
  max-width: 46ch;
  font-size: clamp(1.125rem, 1.06rem + 0.35vw, 1.3125rem);
  color: var(--groen-licht);
}
.cta-band .knop-rij { margin-top: var(--s6); }

/* 18d Contactformulier =====================================================
   De browser valideert zelf al; de opmaak hieronder geeft alleen plek aan de
   Nederlandse foutmelding onder het juiste veld en aan de verzendstatus.   */

.formulier {
  padding: clamp(1.75rem, 4vw, var(--s7));
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: var(--r-xl);
  box-shadow: var(--schaduw-s);
}
.formulier > * + * { margin-top: var(--s5); }
.formulier__kop h2 { margin: 0 0 var(--s3); }
.formulier__kop p { margin: 0; font-size: 1.0625rem; color: var(--tekst-zacht); }
.formulier abbr { text-decoration: none; color: var(--groen-tekst); font-weight: 700; }

/* Spamval: onzichtbaar voor mensen, wel invulbaar voor een robot. */
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.veldgroep { display: grid; gap: var(--s4); border: 0; padding: 0; margin: 0; }
@media (min-width: 620px) {
  .veldgroep--twee { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.veld { display: grid; gap: 0.375rem; margin: 0; max-width: none; }
.veld label {
  font-family: 'Figtree', ui-sans-serif, system-ui, sans-serif;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--navy);
}
.veld input,
.veld select,
.veld textarea {
  width: 100%;
  min-height: 52px;
  padding: 0.75rem 0.875rem;
  background: var(--wit);
  border: 2px solid var(--lijn);
  border-radius: var(--r-s);
  color: var(--tekst);
  font-size: 1.0625rem;
  transition: border-color var(--snel) var(--uit), box-shadow var(--snel) var(--uit);
}
.veld textarea { min-height: 0; resize: vertical; line-height: 1.6; }
.veld input:hover,
.veld select:hover,
.veld textarea:hover { border-color: var(--lijn-sterk); }
.veld input:focus-visible,
.veld select:focus-visible,
.veld textarea:focus-visible {
  outline: none;
  border-color: var(--groen);
  box-shadow: 0 0 0 3px var(--accent-vlak);
}
.veld__hint { font-size: 1rem; color: var(--tekst-zacht); }
.veld__teller { justify-self: end; font-size: 0.9375rem; color: var(--tekst-zacht); font-variant-numeric: tabular-nums; }
.veld__fout { font-size: 1rem; font-weight: 600; color: #a4201b; }
.veld__fout:empty { display: none; }
.veld--fout input,
.veld--fout select,
.veld--fout textarea { border-color: #a4201b; }

.toestemming {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.25rem var(--s3);
  margin: 0;
  max-width: none;
}
.toestemming input {
  width: 22px; height: 22px;
  margin-top: 0.2rem;
  accent-color: var(--groen);
}
.toestemming label { font-size: 1.0625rem; color: var(--tekst); }
.toestemming .veld__fout { grid-column: 2; }

.formulier__verzend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); }
.formulier__verzend .knop { min-height: 56px; }
.formulier__belofte { font-size: 1rem; color: var(--tekst-zacht); }
.formulier [data-verzenden][aria-busy='true'] { opacity: 0.7; cursor: progress; }

/* De melding verschijnt pas als er iets te melden valt: een bevestiging van
   Formspree, of de reden waarom het niet lukte.                            */
.melding { display: none; }
.melding.is-zichtbaar {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: var(--s4) var(--s5);
  border-radius: var(--r-l);
  font-size: 1.0625rem;
}
.melding .ico { flex: none; margin-top: 0.15rem; }
.melding--goed { background: var(--accent-vlak); color: var(--groen-tekst); }
.melding--fout { background: #fdecea; color: #8c1b16; }
.melding--fout .ico { display: none; }

/* 19a Keuringen-pagina =====================================================
   Per keuring één kaart met dezelfde opbouw: kop, waarom, drie stappen. Wat
   u meeneemt staat één keer bovenaan de pagina in plaats van drie keer in
   elke kaart, want die lijst is voor alle keuringen gelijk.                */

/* Naast elkaar in plaats van onder elkaar: de lijst links loopt mee terwijl
   je leest, zodat je nooit kwijt bent welke keuring je bekijkt en de volle
   paginabreedte wordt gebruikt.                                            */
.kiezer { display: grid; gap: var(--s5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) {
  .kiezer { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: var(--s6); align-items: start; }
  .kiezer__menu { position: sticky; top: calc(var(--kop-hoogte) + var(--s4)); }
}

.kiezer__menu {
  padding: var(--s5) var(--s4);
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: var(--r-xl);
  box-shadow: var(--schaduw-s);
}
.kiezer__menukop {
  margin: 0 0 var(--s3);
  padding-inline: 0.625rem;
  font-family: 'Figtree', ui-sans-serif, system-ui, sans-serif;
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tekst-zacht);
}
/* De lijst is geen inhoudsopgave maar een keuzemenu: je kiest één keuring en
   alleen die staat ernaast. Vandaar de rand om elke regel, het pijltje en de
   duidelijk gemarkeerde keuze.                                             */
.kiezer__menu ul { display: grid; gap: 0.375rem; }
.kiezer__menu a {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 48px;
  padding: 0 0.625rem;
  border: 1px solid var(--lijn);
  border-radius: var(--r-s);
  background: var(--canvas);
  color: var(--navy);
  font-size: 1.0625rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--snel) var(--uit), color var(--snel) var(--uit),
    border-color var(--snel) var(--uit);
}
.kiezer__menu a::after {
  content: '';
  width: 8px; height: 8px;
  margin-left: auto;
  flex: none;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  opacity: 0.55;
}
.kiezer__menu a .ico { color: var(--groen-tekst); flex: none; }
.kiezer__menu a:hover { background: var(--accent-vlak); border-color: var(--groen-merk); color: var(--navy); }
.kiezer__menu a.is-hier { background: var(--navy); border-color: var(--navy); color: var(--wit); }
.kiezer__menu a.is-hier .ico { color: var(--groen-licht); }
.kiezer__menu a.is-hier::after { transform: rotate(45deg); opacity: 1; }
.kiezer__menu .knop { width: 100%; margin-top: var(--s4); }

/* Alleen de gekozen keuring staat in beeld. Zonder JavaScript staan ze alle
   vijf onder elkaar: dan valt er niets te kiezen, maar ook niets te missen. */
.js .kiezer__inhoud .kiezer__blok:not(.is-actief) { display: none; }

.kiezer__blok {
  padding: clamp(1.75rem, 3vw, var(--s6));
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: var(--r-xl);
  box-shadow: var(--schaduw-s);
  scroll-margin-top: calc(var(--kop-hoogte) + var(--s4));
}
/* .kiezer__blok + .kiezer__blok { margin-top: var(--s5); } */
/* Op een telefoon staan de vijf keuringen dichtgeklapt: je ziet de titels
   onder elkaar en opent alleen wat je nodig hebt. Op een breed scherm staan
   ze alle vijf open en is de kop dus geen knop.                            */
.kiezer__kop {
  display: flex;
  align-items: center;
  gap: var(--s4);
  margin-bottom: var(--s5);
  padding-bottom: var(--s4);
  border-bottom: 1px solid var(--lijn);
  list-style: none;
  cursor: pointer;
}
.kiezer__kop::-webkit-details-marker { display: none; }
.kiezer__blok:not([open]) .kiezer__kop { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.kiezer__pijl {
  margin-left: auto;
  flex: none;
  color: var(--tekst-zacht);
  transition: transform var(--snel) var(--uit);
}
/* De kop is geen knop: welke keuring zichtbaar is bepaalt de lijst ernaast,
   niet een open- en dichtklappende balk.                                   */
.kiezer__kop { cursor: default; pointer-events: none; }
.kiezer__pijl { display: none; }
.kiezer__ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px; height: 54px;
  flex: none;
  border-radius: 50%;
  background: var(--accent-vlak);
  color: var(--groen-tekst);
}
.kiezer__kop h2 { margin: 0; font-size: var(--kop-paneel); }
.kiezer__voor { margin: 0.25rem 0 0; font-size: 1.0625rem; color: var(--tekst-zacht); }
.kiezer__vlag {
  display: inline-flex;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: var(--tekst-zacht);
  color: var(--wit);
  font-family: 'Figtree', ui-sans-serif, system-ui, sans-serif;
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* De drie stappen als tijdlijn: het cijfer draagt de volgorde en de lijn
   ertussen laat zien dat het één doorlopend traject is.                    */
.kiezer__stappen { display: grid; gap: var(--s4); counter-reset: stap; }
.kiezer__stappen li {
  position: relative;
  counter-increment: stap;
  padding-left: 3.25rem;
  font-size: 1.0625rem;
  line-height: 1.65;
}
.kiezer__stappen li::before {
  content: counter(stap);
  position: absolute;
  left: 0; top: -0.1em;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem; height: 2.25rem;
  border-radius: 50%;
  background: var(--groen);
  color: var(--wit);
  font-family: 'Figtree', ui-sans-serif, system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.kiezer__stappen li::after {
  content: '';
  position: absolute;
  left: 1.09375rem;
  top: 2.4rem;
  bottom: calc(-1 * var(--s4));
  width: 2px;
  background: var(--lijn);
}
.kiezer__stappen li:last-child::after { display: none; }

/* Wie de beslissing neemt is het meest gestelde misverstand op deze pagina:
   daarom een eigen blok in het navy van de voet, in plaats van een grijze
   voetnoot die niemand leest.                                              */
.bezwaar {
  display: flex;
  align-items: flex-start;
  gap: var(--s4);
  margin-top: var(--s5);
  padding: clamp(1.5rem, 3vw, var(--s6));
  background: var(--navy);
  color: var(--groen-licht);
  border-radius: var(--r-xl);
}
.bezwaar__ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  flex: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: var(--groen-licht);
}
.bezwaar h2 {
  margin: 0 0 var(--s2);
  font-size: var(--kop-paneel);
  color: var(--wit);
}
.bezwaar p { margin: 0; font-size: 1.0625rem; color: var(--groen-licht); }

@media (max-width: 560px) {
  .bezwaar { flex-direction: column; gap: var(--s3); }
}

/* 19b Tarieven-pagina extra's ===============================================
   Onderdelen die alleen op de tarievenpagina voorkomen: vertrouwensbadges in
   de hero, twee kaarten met wat wel/niet in de prijs zit, de tweekoloms FAQ
   en de lichte hulp-band met foto.                                         */

.tarieven-badges { display: flex; flex-wrap: wrap; gap: var(--s5) var(--s6); }
.tarieven-badge { display: flex; align-items: flex-start; gap: 0.75rem; max-width: 16rem; }
.tarieven-badge__ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  flex: none;
  border-radius: 50%;
  background: var(--accent-vlak);
  color: var(--groen-tekst);
}
.tarieven-badge h3 { font-size: var(--kop-kaart); margin: 0; }
.tarieven-badge p { font-size: 1.0625rem; color: var(--tekst-zacht); margin: 0.125rem 0 0; }

.tarieven-notitie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: var(--s6);
  padding: 0.75rem 1.25rem;
  background: var(--vlak);
  border-radius: 999px;
  color: var(--staal);
  font-size: 1rem;
  text-align: center;
  max-width: max-content;
  margin-inline: auto;
}
.tarieven-notitie .ico { flex: none; }
.tarieven-notitie a { color: var(--navy); }

.tarieven-info-raster { display: grid; gap: var(--s5); grid-template-columns: 1fr; }
@media (min-width: 860px) { .tarieven-info-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6); } }
.tarieven-info-kaart {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  padding: clamp(1.75rem, 3vw, var(--s6));
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: var(--r-xl);
  box-shadow: var(--schaduw-s);
}
.tarieven-info-kaart__kop { display: flex; align-items: center; gap: var(--s3); }
.tarieven-info-kaart__kop h3 { margin: 0; font-size: var(--kop-paneel); }
.tarieven-info-kaart__ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  flex: none;
  border-radius: 50%;
  background: var(--accent-vlak);
  color: var(--groen-tekst);
}
.tarieven-info-kaart--uit .tarieven-info-kaart__ico { background: var(--vlak); color: var(--staal); }

.tarieven-info-lijst { display: grid; gap: var(--s3); }
.tarieven-info-lijst li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 1.0625rem;
  line-height: 1.6;
}
.tarieven-info-lijst li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.72em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--staal);
}

.tarieven-info-kaart__notitie {
  margin-top: auto;
  padding: var(--s4) var(--s5);
  background: var(--vlak);
  border-radius: var(--r-l);
  font-size: 0.9375rem;
  color: var(--tekst-zacht);
}

.tarieven-faq-raster { display: grid; gap: var(--s6); grid-template-columns: 1fr; }
@media (min-width: 860px) { .tarieven-faq-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6); align-items: start; } }
.tarieven-faq-raster h3 { font-size: var(--kop-kaart); margin: 0 0 var(--s3); }

.tarieven-hulp {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s6);
  align-items: center;
  padding: clamp(2rem, 4vw, 3rem);
  background: var(--vlak);
  border-radius: var(--r-xl);
}
@media (min-width: 860px) { .tarieven-hulp { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--s7); } }
.tarieven-hulp__badge {
  display: inline-flex;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: var(--wit);
  color: var(--groen-tekst);
  font-size: 0.875rem;
  font-weight: 700;
}
.tarieven-hulp__tekst > * + * { margin-top: var(--s3); }
.tarieven-hulp__tekst .knop-rij { margin-top: var(--s5); }
.tarieven-hulp__beeld { position: relative; }
.tarieven-hulp__beeld img { width: 100%; border-radius: var(--r-l); box-shadow: var(--schaduw-l); }
.tarieven-hulp__notitie {
  position: absolute;
  top: -1.25rem; right: -0.5rem;
  max-width: 11rem;
  padding: 0.75rem 1rem;
  background: var(--wit);
  border-radius: var(--r-l);
  box-shadow: var(--schaduw);
  font-style: italic;
  font-size: 0.9375rem;
  color: var(--navy);
  transform: rotate(-3deg);
}
@media (max-width: 859px) {
  .tarieven-hulp__notitie { position: static; margin-top: var(--s3); transform: none; }
}

/* 20 Footer ================================================================ */

.voet {
  background: var(--navy);
  color: var(--groen-licht);
  padding-block: clamp(2.75rem, 5vw, 4.5rem) var(--s6);
}
.voet__raster { display: grid; gap: var(--s6); grid-template-columns: 1fr; }
@media (min-width: 620px)  { .voet__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6) var(--s7); } }
@media (min-width: 1000px) { .voet__raster { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s7); } }

.voet__logo img { width: auto; height: 58px; }

.voet h2 {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--wit);
  letter-spacing: 0;
  margin: 0 0 var(--s3);
}
/* Zes links onder elkaar maakte de voet onnodig hoog: nu twee kolommen */
.voet__lijst { display: grid; gap: 0.15rem 0; }
@media (min-width: 360px) {
  .voet__lijst { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s4); }
}

/* Op een telefoon stond alles onder elkaar en werd de voet een eigen scherm.
   Nu staat het logo bovenaan, daaronder pagina's links en locaties rechts,
   en het contact over de volle breedte eronder.                            */
@media (max-width: 619px) {
  .voet { padding-block: var(--s6) var(--s5); }
  .voet__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5) var(--s4); }
  .voet__merk { grid-column: 1 / -1; }
  .voet__logo img { height: 44px; }
  .voet__raster > .voet__kolom:last-child { grid-column: 1 / -1; }
  .voet__lijst { grid-template-columns: minmax(0, 1fr); }
  .voet__lijst a, .voet__contact a { min-height: 40px; font-size: 1rem; }
  .voet__locaties li { padding-block: 0.25rem; }
  .voet__locaties strong { font-size: 1rem; }
  .voet__locaties span { font-size: 0.9375rem; }
  .voet h2 { margin-bottom: var(--s2); }
  .voet__onder { margin-top: var(--s5); }
}
.voet__lijst a,
.voet__contact a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
  overflow-wrap: anywhere;
  color: var(--groen-licht);
  text-decoration: none;
  font-size: 1.0625rem;
}
.voet__lijst a:hover,
.voet__contact a:hover { color: var(--wit); text-decoration: underline; text-decoration-thickness: 2px; }
.voet__contact a { font-weight: 700; color: var(--wit); }
.voet__contact li { display: grid; gap: 0.1rem; }
.voet__contact span { font-size: 1rem; color: var(--groen-licht); }

.voet__onder {
  margin-top: var(--s7);
  padding-top: var(--s4);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s6);
  align-items: center;
  justify-content: space-between;
  font-size: 1rem;
  color: var(--groen-licht);
}
.voet__onder p { margin: 0; max-width: none; }
.voet__privacy a { color: var(--wit); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.22em; }
.voet__privacy a:hover { color: var(--groen-licht); }
.voet__bouwer a {
  color: var(--wit);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.22em;
}
.voet__bouwer a:hover { color: var(--groen-licht); }

.omhoog {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  color: var(--wit);
  font-weight: 600;
  text-decoration: none;
}
.omhoog:hover { color: var(--groen-licht); text-decoration: underline; text-decoration-thickness: 2px; }

/* 07b Actielint ============================================================
   De korting staat in een lint bo'v'en de header, niet eronder. Dat scheelt
   twee dingen: de herofoto loopt nu ononderbroken door tot achter de
   navigatie, en het lint schuift bij het scrollen gewoon weg in plaats van
   mee te blijven plakken. Navy vlak met het merkgroen als markering: de
   enige plek op de site waar #3C921D onvermengd groot in beeld komt.      */

.lint {
  position: relative;
  z-index: 101;                    /* boven de sticky header: hij ligt erboven */
  background: var(--navy);
  color: var(--wit);
  border-bottom: 3px solid var(--groen-merk);
}
.lint__binnen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 1rem;
  padding-block: 0.6875rem;
  padding-right: 3.25rem;          /* ruimte voor de sluitknop rechts */
  text-align: center;
}
.lint__merk {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  padding: 0.1875rem 0.6875rem;
  border-radius: 999px;
  background: var(--groen-merk);
  color: var(--navy-diep);
  font-family: 'Figtree', ui-sans-serif, system-ui, sans-serif;
  font-size: 0.9375rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.lint__merk .ico { width: 18px; height: 18px; stroke-width: 2.2; }
.lint p {
  margin: 0;
  max-width: none;       /* de globale leesbreedte brak de zin onnodig af */
  font-size: 1.0625rem;
  line-height: 1.45;
  color: var(--wit);
}
.lint strong { color: var(--groen-licht); font-weight: 800; }
.lint a {
  color: var(--wit);
  font-weight: 700;
  white-space: nowrap;   /* "Bekijk / de tarieven" las als twee losse dingen */
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}
.lint a:hover { color: var(--groen-licht); }

/* De sluitknop is een echte <button>. Zonder JavaScript valt er niets te
   sluiten, dus staat hij er dan ook niet.                                  */
.lint__sluit { display: none; }
.js .lint__sluit {
  position: absolute;
  right: clamp(0.25rem, 2vw, 0.75rem);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--groen-licht);
  cursor: pointer;
  transition: background-color var(--snel) var(--uit), color var(--snel) var(--uit);
}
.js .lint__sluit:hover { background: rgba(255, 255, 255, 0.16); color: var(--wit); }
.lint__sluit .ico { stroke-width: 2.4; }

/* Wegklikken vouwt het lint dicht in plaats van het te laten knipperen;
   daarna haalt het script het uit de DOM.                                  */
.lint.is-weg {
  overflow: hidden;
  max-height: 0;
  border-bottom-width: 0;
  transition:
    max-height var(--rustig) var(--uit),
    border-bottom-width var(--rustig) var(--uit);
}
@media (prefers-reduced-motion: reduce) {
  .lint.is-weg { transition: none; }
}

@media (max-width: 700px) {
  .lint__binnen { padding-block: 0.5rem; padding-right: 2.75rem; }
  .lint p { font-size: 1rem; }
  /* Drie regels lint kosten op een telefoon een tiende van het scherm. De
     tweede zin gaat eruit; de link ernaast leidt naar hetzelfde bedrag.  */
  .lint__extra { display: none; }
  .lint__merk { display: none; }
}

/* 11b Snelle links =========================================================
   Zes deuren naar de meestgevraagde pagina's, direct onder de hero. Voor een
   bezoeker die al weet wat hij zoekt is dit korter dan het menu.          */

.snel-links {
  display: grid;
  gap: var(--s3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 640px) { .snel-links { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .snel-links { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.snel-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--s2);
  min-height: 132px;
  padding: var(--s4) var(--s2);
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: var(--r-l);
  color: var(--navy);
  font-family: 'Figtree', ui-sans-serif, system-ui, sans-serif;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  transition:
    transform var(--rustig) var(--uit),
    border-color var(--snel) var(--uit),
    box-shadow var(--rustig) var(--uit);
}
.snel-link__ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  flex: none;
  border-radius: 50%;
  background: var(--accent-vlak);
  color: var(--groen-tekst);
}
.snel-link:hover {
  transform: translateY(-3px);
  border-color: var(--groen-merk);
  box-shadow: var(--schaduw);
}

/* 11c Cijferbalk =========================================================== */

.cijfers {
  display: grid;
  gap: var(--s4);
  grid-template-columns: repeat(1, minmax(0, 1fr));
  padding: var(--s6) var(--s5);
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: var(--r-xl);
  box-shadow: var(--schaduw-s);
}
@media (min-width: 720px) { .cijfers { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.cijfer { text-align: center; }
.cijfer + .cijfer { border-top: 1px solid var(--lijn); padding-top: var(--s4); }
@media (min-width: 720px) {
  .cijfer + .cijfer { border-top: 0; border-left: 1px solid var(--lijn); padding-top: 0; }
}
.cijfer__waarde {
  display: block;
  font-family: 'Figtree', ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(2.25rem, 1.7rem + 2.4vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: var(--navy);
}
.cijfer__label {
  display: block;
  margin-top: 0.375rem;
  font-size: 1.0625rem;
  color: var(--tekst-zacht);
}

/* 16b Prijskaarten =========================================================
   Vier keuringen met dezelfde korting. Het nieuwe bedrag is het grootste
   element in de kaart; het oude staat doorgehaald ernaast, nooit eronder,
   zodat het verschil in e'e'n oogopslag te lezen is.                        */

.prijskaarten {
  display: grid;
  gap: var(--s4);
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}
@media (min-width: 700px)  { .prijskaarten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .prijskaarten { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Vijf kaarten passen niet netjes in een raster van drie: de laatste rij zou
   links blijven hangen. Als flexrij houden de kaarten dezelfde breedte en
   staat de restrij gecentreerd onder de eerste.                            */
@media (min-width: 700px) {
  .prijskaarten--vijf { display: flex; flex-wrap: wrap; justify-content: center; }
  .prijskaarten--vijf > .prijskaart { flex: 0 1 calc((100% - var(--s4)) / 2); }
}
@media (min-width: 1080px) {
  .prijskaarten--vijf > .prijskaart { flex: 0 1 calc((100% - 2 * var(--s4)) / 3); }
}

.prijskaart {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  padding: var(--s6) var(--s5) var(--s5);
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: var(--r-xl);
  box-shadow: var(--schaduw-s);
  overflow: hidden;
}
/* De boog uit het logo: de weg die onder het woordmerk doorloopt. */
.prijskaart::before {
  content: '';
  position: absolute;
  left: -20%; right: -20%; top: -84px;
  height: 120px;
  border-radius: 50%;
  background: var(--accent-vlak);
  pointer-events: none;
}
.prijskaart > * { position: relative; }

.prijskaart--uitgelicht {
  border-color: var(--navy);
  border-width: 2px;
  box-shadow: var(--schaduw);
}
.prijskaart--uitgelicht::before { background: var(--groen-merk); opacity: 0.22; }
.prijskaart--uitgelicht .prijskaart__vlag { background: var(--groen); }

.prijskaart__vlag {
  position: absolute;
  top: var(--s3); right: var(--s3);
  z-index: 1;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  background: var(--navy);
  color: var(--wit);
  font-family: 'Figtree', ui-sans-serif, system-ui, sans-serif;
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.prijskaart__ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--wit);
  border: 1px solid var(--lijn);
  color: var(--groen-tekst);
}
.prijskaart h3 {
  margin: 0;
  font-size: var(--kop-tekst);
  line-height: 1.25;
}
.prijskaart__voor {
  margin: 0;
  font-size: 1.0625rem;
  color: var(--tekst-zacht);
}

.prijskaart__bedrag {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.75rem;
  margin-top: auto;
  padding-top: var(--s3);
}
.prijskaart__nu {
  font-family: 'Figtree', ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(2.5rem, 2rem + 2.2vw, 3.25rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--navy);
}
.prijskaart__nu .euro { font-size: 0.54em; font-weight: 700; margin-right: 0.06em; color: var(--tekst-zacht); }
.prijskaart__oud {
  font-family: 'Figtree', ui-sans-serif, system-ui, sans-serif;
  font-size: 1.3125rem;
  font-weight: 600;
  color: var(--tekst-zacht);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--groen-merk);
}
.prijskaart__korting {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.6875rem;
  border-radius: 999px;
  background: var(--accent-vlak);
  color: var(--groen-tekst);
  font-family: 'Figtree', ui-sans-serif, system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 800;
}
.prijskaart__korting .ico { width: 18px; height: 18px; stroke-width: 2.2; }

.prijskaart .checklijst { margin-top: var(--s1); }
.prijskaart .checklijst li { font-size: 1.0625rem; }
.prijskaart .knop { margin-top: var(--s4); width: 100%; }

/* Nog niet te boeken: dezelfde kaart, maar zichtbaar in de wacht. */
.prijskaart--binnenkort { background: var(--vlak); box-shadow: none; }
.prijskaart--binnenkort::before { background: var(--lijn); }
.prijskaart--binnenkort .prijskaart__ico { color: var(--staal); }
.prijskaart--binnenkort .prijskaart__nu { font-size: clamp(1.625rem, 1.4rem + 1vw, 2rem); color: var(--staal); }
.prijskaart--binnenkort .prijskaart__vlag { background: var(--tekst-zacht); }


/* Spoedkeuring: geen vast bedrag, dus geen doorgehaalde prijs maar een
   vanaf-label. De kaart krijgt het merkgroen als rand mee, omdat dit de enige
   keuring is die buiten de actie en buiten het rooster valt.               */
.prijskaart__vanaf {
  align-self: flex-end;
  padding-bottom: 0.25rem;
  font-family: 'Figtree', ui-sans-serif, system-ui, sans-serif;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--tekst-zacht);
}
.prijskaart--spoed { border-color: var(--groen-merk); }
.prijskaart--spoed::before { background: var(--groen-merk); opacity: 0.18; }
.prijskaart--spoed .prijskaart__vlag { background: var(--staal); }
.keurkaart__prijs .prijskaart__vanaf { align-self: center; padding-bottom: 0; }

/* 16c Keuringkaarten =======================================================
   Rij met e'e'n keuring per regel: naam, voor wie, duur en bedrag naast
   elkaar. Uitgebreider dan de prijskaart, voor de keuringenpagina.        */

.keurkaarten { display: grid; gap: var(--s4); }

.keurkaart {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s4);
  padding: var(--s6) var(--s5);
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: var(--r-xl);
  box-shadow: var(--schaduw-s);
}
@media (min-width: 900px) {
  .keurkaart { grid-template-columns: minmax(0, 1fr) 17.5rem; gap: var(--s6); align-items: center; }
}

.keurkaart__kop { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.keurkaart__ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  flex: none;
  border-radius: 50%;
  background: var(--accent-vlak);
  color: var(--groen-tekst);
}
.keurkaart h2, .keurkaart h3 {
  margin: 0;
  font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
  line-height: 1.2;
}
.keurkaart__code {
  display: inline-flex;
  padding: 0.1875rem 0.5625rem;
  border: 1px solid var(--lijn-sterk);
  border-radius: 6px;
  background: var(--vlak);
  font-family: 'Figtree', ui-sans-serif, system-ui, sans-serif;
  font-size: 0.9375rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--navy);
}
.keurkaart__tekst { margin: var(--s3) 0 0; font-size: 1.0625rem; color: var(--tekst); }

.keurkaart__feiten {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s5);
  margin-top: var(--s4);
  padding-top: var(--s4);
  border-top: 1px solid var(--lijn);
}
.keurkaart__feit {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.0625rem;
  color: var(--tekst-zacht);
}
.keurkaart__feit .ico { color: var(--staal); flex: none; }
.keurkaart__feit strong { color: var(--navy); font-weight: 700; }

.keurkaart__prijs {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s2);
  padding: var(--s5) var(--s4);
  background: var(--vlak);
  border-radius: var(--r-l);
}
@media (min-width: 900px) { .keurkaart__prijs { align-items: center; text-align: center; } }
.keurkaart__prijs .knop { width: 100%; margin-top: var(--s1); }

/* 17b Wegwijzer ============================================================ */

/* Een uitgeklapt kennisartikel: kop, lopende tekst, lijstjes. */
.artikel > * + * { margin-top: var(--s4); }
.artikel h3 { margin: var(--s6) 0 0; font-size: var(--kop-tekst); }
.artikel p { margin: 0; }
.artikel ul:not(.checklijst) { display: grid; gap: var(--s2); }
.artikel ul:not(.checklijst) li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 1.0625rem;
}
.artikel ul:not(.checklijst) li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.72em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--groen-merk);
}

/* 18c2 Locatie-uitbreidingen ===============================================
   Drie open vestigingen en e'e'n die nog opent. De vierde is geen grijze
   kaart met dezelfde knop erop: hij heeft geen knop, want er valt niets te
   boeken.                                                                   */

@media (min-width: 760px) { .locaties { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .locaties--vier { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.locaties--vier .locatie {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s3);
  background: var(--wit);
}
.locaties--vier .locatie__ico { grid-row: auto; }
.locaties--vier .locatie__adres,
.locaties--vier .locatie p:not(.locatie__adres) { grid-column: auto; }

.locatie--binnenkort {
  background: var(--vlak);
  border-style: dashed;
  border-color: var(--lijn-sterk);
}
.locatie--binnenkort .locatie__ico { color: var(--staal); }
.locatie__status {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  align-self: flex-start;
  padding: 0.1875rem 0.625rem;
  border-radius: 999px;
  background: var(--accent-vlak);
  color: var(--groen-tekst);
  font-family: 'Figtree', ui-sans-serif, system-ui, sans-serif;
  font-size: 0.9375rem;
  font-weight: 800;
}
.locatie--binnenkort .locatie__status { background: var(--wit); color: var(--staal); border: 1px solid var(--lijn-sterk); }
.locatie .knop { margin-top: var(--s2); }

/* Doorgehaalde prijs in de tarieventabel, zelfde regel als de prijskaart. */
.tarieven__oud {
  display: block;
  margin-top: 0.25rem;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--tekst-zacht);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--groen-merk);
  letter-spacing: 0;
}

/* 20b Mobiel herontwerp ====================================================
   Op een telefoon waaieren kaarten met het icoon bovenaan verticaal uit: vijf
   kenmerken werden 1575px hoog tegen 653px op desktop. Onder 640px draaien
   die kaarten daarom een kwartslag: merkteken links, tekst rechts. Zelfde
   informatie, zelfde tapdoelen, ruim een derde minder scrollen.            */

@media (max-width: 639px) {

  .sectie      { padding-block: clamp(2.75rem, 9vw, 3.75rem); }
  .sectie--kort{ padding-block: clamp(2rem, 7vw, 2.75rem); }
  .sectie-kop  { margin-bottom: var(--s5); }

  /* Kenmerken: icoon naast de tekst in plaats van erboven */
  .kenmerk {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.35rem var(--s4);
    align-items: start;
    padding: var(--s4);
  }
  .kenmerk__ico {
    grid-row: span 2;
    width: 46px; height: 46px;
    align-self: start;
  }
  .kenmerk__ico .ico { width: 24px; height: 24px; stroke-width: 1.75; }
  .kenmerk h3 { align-self: center; }

  /* Stappen: het cijfer draagt de volgorde, het sier-icoon voegt niets toe */
  .stap {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.35rem var(--s4);
    align-items: start;
    padding: var(--s5) var(--s4);
  }
  .stap__nummer { grid-row: span 2; width: 46px; height: 46px; font-size: 1.1875rem; }
  .stap__ico { display: none; }
  .stap :is(h2, h3) { align-self: center; }

  /* Voet: kolommen dichter op elkaar, tapdoelen ongemoeid */
  .voet__raster { gap: var(--s5); }
  .voet__onder  { margin-top: var(--s5); }

  /* Hero: de vier kenmerken passen naast elkaar als het icoon links staat */
  .hero__punten { gap: var(--s3) var(--s4); margin-top: var(--s5); padding-top: var(--s5); }

  /* Portret staand op 3:4 wordt op volle breedte bijna 500px hoog. Op een
     telefoon is een liggende uitsnede van het gezicht genoeg.              */
  .arts__portret img { aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 16%; }
  .arts__portret::before { inset: 16% -4% -8% 12%; }

}

/* 21 Beweging ============================================================== */
/* Eén geregisseerd moment: de hero komt binnen. Verder alleen reacties op
   wat de bezoeker zelf doet. Geen scroll-animaties, geen parallax.          */

@keyframes op-komen {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@keyframes beeld-in {
  from { opacity: 0; transform: scale(1.04); }
  to   { opacity: 1; transform: none; }
}
@keyframes vouw-open {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

.hero__intro > * {
  animation: op-komen 640ms var(--uit) both;
  animation-delay: calc(var(--i, 0) * 70ms);
}
.hero__beeld { animation: beeld-in 900ms var(--uit) both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .knop:hover, .knop:active { transform: none; }
  .tekst-link:hover .ico { transform: none; }
}

@media print {
  .kop, .actiebalk, .cta-band, .overslaan, .hero__beeld { display: none !important; }
  body { padding-bottom: 0; font-size: 11pt; background: #fff; }
  .voet { background: none; color: #000; }
}