/* ==========================================================================
   Rijbewijskeuring Bergen op Zoom

   Drie hue-families, strikt gescheiden rollen:
     ZAND   H 70   alle vlakken en lijnen        -> de warmte
     NAVY   H 251  alle tekst en donkere vlakken -> het merk
     GROEN  H 150  uitsluitend actie             -> de conversie
   Buiten deze drie bestaat er geen kleur op deze site.

   Leeswijzer
   01 Tokens
   02 Reset en basis
   03 Browservlakken
   04 Typografie
   05 Layout
   06 Knoppen
   07 Header en navigatie
   08 Mobiele actiebalk
   09 Hero
   10 Paginakop
   11 Kenmerkenrij
   12 Stappen
   13 Checklijst
   14 Callout en geruststellingsband
   15 Mediablokken
   15b De arts
   16 Tarieven
   17 Veelgestelde vragen
   18 Contact
   18b2 Afspraakblok
   18c Locaties
   19 CTA-band
   20 Footer
   20b Mobiel herontwerp
   21 Beweging
   ========================================================================== */

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

:root {
  /* --- HUISSTIJL, ongewijzigd overgenomen uit het merkblad -----------------
     Elke kleur hieronder staat exact zoals aangeleverd. De regels erachter
     zijn gemeten, niet gevoeld: zie de commentaarregel bij elke kleur.      */
  --navy:           #1D3557;  /* vertrouwen, stabiliteit  12,4:1 op wit      */
  --staal:          #457B9D;  /* rust, professionaliteit   4,6:1 op wit      */
  --groen-merk:     #6FAF7B;  /* gezondheid, veiligheid    2,6:1 -> nooit tekst */
  --groen-licht:    #A8D5BA;  /* zorg, vriendelijkheid     7,6:1 op navy     */
  --canvas:         #F4F6F1;  /* rust, overzicht           paginacanvas      */
  --wit:            #FFFFFF;
  --canvas-rgb:     244, 246, 241;

  /* --- AFGELEID, omdat de huisstijl zelf niet elke rol dekt ----------------
     #6FAF7B haalt op wit 2,6:1 en kan dus geen knop met witte tekst dragen;
     #457B9D haalt op het canvas 4,2:1 en is dus geen lopende tekst.        */
  --navy-diep:      #111F34;  /* CTA-band, voet, focusring 16,5:1 met wit    */
  --tekst:          #44536A;  /* body                       7,2:1 op canvas  */
  --tekst-zacht:    #546378;  /* bijtekst                   5,6:1 op canvas  */
  --groen:          #2D7A3C;  /* knopvlak, cijferbol        5,3:1 met wit    */
  --groen-donker:   #256531;  /* knop-hover                 7,0:1 met wit    */
  --groen-tekst:    #245E2F;  /* groene tekst, icoonglyph   7,1:1 op canvas  */

  /* --- Vlakken en lijnen, afgeleid uit het staalblauw --- */
  --vlak:           #EBF2F7;  /* wisselsectie                                */
  --accent-vlak:    #E7F5EA;  /* icoonrondje, nadrukvlak                     */
  --groen-vlak:     #E7F5EA;  /* alias, leesbaarheid in de opmaak            */
  --lijn:           #D9E4EA;
  --lijn-sterk:     #BDCCD6;

  /* --- 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(29, 53, 87, 0.05), 0 2px 8px rgba(29, 53, 87, 0.05);
  --schaduw:    0 2px 4px rgba(29, 53, 87, 0.05), 0 12px 28px rgba(29, 53, 87, 0.09);
  --schaduw-l:  0 4px 10px rgba(29, 53, 87, 0.06), 0 24px 52px rgba(29, 53, 87, 0.12);

  /* --- Maatvoering --- */
  --breedte:      1220px;
  --breedte-smal: 800px;
  --kop-hoogte:   86px;

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

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

/* 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(37, 101, 49, 0.18), 0 6px 18px rgba(37, 101, 49, 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(37, 101, 49, 0.20), 0 14px 30px rgba(37, 101, 49, 0.26);
}
.knop--primair:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(37, 101, 49, 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); }

/* Bellen: het nummer staat IN de knop, achter een omcirkeld icoon */
.knop--bel {
  gap: 0.875rem;
  padding-block: 0.625rem;
  padding-inline: 0.75rem 1.5rem;
  text-align: left;
}
.knop__ring {
  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);
}
.knop__tekst { display: flex; flex-direction: column; gap: 0.05rem; }
.knop__label { font-size: 1rem; font-weight: 600; color: var(--tekst-zacht); line-height: 1.25; }
.knop__nummer { font-size: 1.1875rem; font-weight: 800; letter-spacing: -0.015em; line-height: 1.25; color: var(--navy); }

.knop--primair .knop__ring { background: rgba(255, 255, 255, 0.18); color: var(--wit); }
.knop--primair .knop__label { color: rgba(255, 255, 255, 0.88); }
.knop--primair .knop__nummer { 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(29, 53, 87, 0.04), 0 10px 28px rgba(29, 53, 87, 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); }
}

.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: 54px; }
@media (max-width: 900px) { .kop__logo img { height: 40px; } }
@media (max-width: 380px) { .kop__logo img { height: 34px; } }

.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; }

.menu__paneel {
  position: absolute;
  right: 0;
  top: calc(100% + 0.75rem);
  width: min(21rem, calc(100vw - 2.5rem));
  padding: var(--s2);
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: var(--r-l);
  box-shadow: var(--schaduw-l);
}
.menu__paneel .nav__lijst { flex-direction: column; align-items: stretch; gap: 2px; }
.menu__paneel .nav__link { min-height: 56px; font-size: 1.125rem; padding: 0 1rem; }
.menu__paneel .nav__link[aria-current="page"]::after { left: 1rem; right: auto; width: 22px; bottom: 12px; }
.menu__paneel .knop { width: 100%; margin-top: var(--s2); }

@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(29, 53, 87, 0.04), 0 -12px 30px rgba(29, 53, 87, 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);
}

.hero__beeld {
  position: absolute;
  inset: 0 0 0 auto;
  width: 66%;
  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: 100% 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(3rem, 6vw, 6rem);
}
/* 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: 34rem; }

.hero__titel { font-size: clamp(2.5rem, 1.6rem + 3.9vw, 4.5rem); }
.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(--s6); }

.hero__punten {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s4) var(--s3);
  margin-top: var(--s6);
  padding-top: var(--s6);
  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: clamp(2.5rem, 9vw, 4rem); }
}

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

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

.kruimels { margin-bottom: var(--s5); }
.kruimels ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; font-size: 1rem; }
.kruimels li { display: flex; align-items: center; gap: 0.375rem; color: var(--tekst-zacht); }
.kruimels a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  color: var(--navy);
  font-weight: 600;
  text-decoration-thickness: 1.5px;
}
.kruimels [aria-hidden] { color: var(--lijn-sterk); }

/* 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: 1.1875rem; 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(37, 101, 49, 0.16), 0 8px 20px rgba(37, 101, 49, 0.22);
}
.stap__ico { color: var(--lijn-sterk); }
.stap :is(h2, h3) {
  margin: 0;
  font-size: clamp(1.3125rem, 1.16rem + 0.6vw, 1.625rem);
  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: 1.1875rem; 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: 1.25rem; 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: clamp(1.5rem, 1.3rem + 0.9vw, 2rem); }

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

.contactkaart {
  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);
  height: 100%;
}
.contactkaart__ico {
  display: flex; align-items: center; justify-content: center;
  width: 54px; height: 54px;
  border-radius: 50%;
  background: var(--accent-vlak);
  color: var(--groen-tekst);
}
.contactkaart h3 { margin: 0; font-size: 1.1875rem; }
.contactkaart__waarde {
  font-family: 'Figtree', ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--navy);
  text-decoration: none;
  overflow-wrap: anywhere;
}
a.contactkaart__waarde {
  display: inline-block;
  padding-block: 0.625rem;
  margin-block: -0.5rem;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}
a.contactkaart__waarde:hover { color: var(--groen-tekst); }
.contactkaart p { font-size: 1rem; color: var(--tekst-zacht); margin: 0; }

.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.          */

.contactblok {
  display: grid;
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: var(--r-xl);
  box-shadow: var(--schaduw);
  overflow: hidden;
}
@media (min-width: 880px) {
  .contactblok { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
}

.contactblok__rij {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s4);
  align-items: center;
  padding: var(--s5);
  border-top: 1px solid var(--lijn);
}
.contactblok__routes .contactblok__rij:first-child { border-top: 0; }
.contactblok__ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  flex: none;
  border-radius: 50%;
  background: var(--accent-vlak);
  color: var(--groen-tekst);
}
.contactblok__label {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: var(--tekst-zacht);
  line-height: 1.3;
}
.contactblok__waarde {
  display: inline-block;
  margin-top: 0.15rem;
  font-family: 'Figtree', ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(1.25rem, 1.12rem + 0.55vw, 1.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--navy);
  overflow-wrap: anywhere;
}
a.contactblok__waarde {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
  padding-block: 0.5rem;
  margin-block: -0.35rem 0;
}
a.contactblok__waarde:hover { color: var(--groen-tekst); }
.contactblok__extra { display: block; margin-top: 0.2rem; font-size: 1rem; color: var(--tekst-zacht); }

.contactblok__tijden {
  padding: var(--s5);
  background: var(--vlak);
  border-top: 1px solid var(--lijn);
}
@media (min-width: 880px) {
  .contactblok__tijden { border-top: 0; border-left: 1px solid var(--lijn); }
}
.contactblok__tijden h3 { font-size: 1.1875rem; margin: 0 0 var(--s3); }
.contactblok__tijden p { margin-top: var(--s4); font-size: 1rem; color: var(--tekst-zacht); }

@media (max-width: 560px) {
  .contactblok__rij, .contactblok__tijden { padding: var(--s4); }
}

/* 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 =============================================================
   Twee vestigingen onder e'e'n merk. De bezoeker kiest straks bij het boeken
   zelf waar hij langskomt; hier laten we alleen zien wa'a'r dat kan.
   De adressen volgen nog: die staan als zichtbaar lege sleuf in het ontwerp,
   niet als verzonnen straatnaam.                                            */

.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; align-self: center; }

/* Lege sleuf voor het adres: herkenbaar als 'volgt nog', nooit te verwarren
   met een echt adres.                                                       */
.locatie__adres {
  grid-column: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0.5rem 0.875rem;
  border: 1px dashed var(--lijn-sterk);
  border-radius: var(--r-s);
  background: var(--wit);
  font-size: 1rem;
  color: var(--tekst-zacht);
}
.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); }

/* 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: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr)); gap: var(--s7); } }

.voet__logo img { width: auto; height: 58px; }
.voet__merk p { margin-top: var(--s4); font-size: 1.0625rem; color: var(--groen-licht); max-width: 34ch; }

.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); }
}
.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__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; }

/* 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; }

  /* Meenemen en contactkaarten volgen dezelfde draai */
  .contactkaart { display: grid; grid-template-columns: auto 1fr; gap: 0.35rem var(--s4); padding: var(--s4); }
  .contactkaart__ico { grid-row: span 3; width: 46px; height: 46px; align-self: start; }
  .contactkaart 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; }
}