/* ==========================================================================
   Mondzorg Soestdijk - conceptwebsite
   Archetype: gecentreerde koninklijke banden (multi-page)
   ========================================================================== */

:root {
  --kleur-primair: #0B3E8F;
  --kleur-accent: #2E6FF4;
  --kleur-accent-licht: #5489F6;
  --kleur-navy: #0A2A55;
  --kleur-achtergrond: #F7F4EE;
  --kleur-wit: #FFFFFF;
  --kleur-tekst: #1C2534;
  --kleur-tekst-zacht: #5A6578;
  --kleur-subtiel: #E3E9F5;
  --kleur-blauw-tint: #EAF1FD;

  --font-display: "Libre Caslon Display", Georgia, "Times New Roman", serif;
  --font-tekst: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --breedte-content: 1120px;
  --breedte-smal: 720px;
  --padding-inline: clamp(20px, 5vw, 40px);
  --band-padding: clamp(64px, 8vw, 112px);
  --radius-kaart: 24px;
  --radius-klein: 12px;
  --radius-pill: 999px;

  --schaduw-zacht: 0 2px 8px rgba(10, 42, 85, 0.05), 0 12px 32px rgba(10, 42, 85, 0.07);
  --schaduw-kaart: 0 4px 12px rgba(10, 42, 85, 0.06), 0 24px 56px rgba(10, 42, 85, 0.10);
  --schaduw-nav: 0 1px 2px rgba(10, 42, 85, 0.06), 0 8px 24px rgba(10, 42, 85, 0.08);

  --overlap: 64px;
  --header-hoogte: 84px;
}

/* --------------------------------------------------------------------------
   Reset & basis
   -------------------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-hoogte) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--kleur-achtergrond);
  color: var(--kleur-tekst);
  font-family: var(--font-tekst);
  font-size: 1.0625rem;
  line-height: 1.7;
  font-weight: 400;
  /* overflow-x: hidden maakt van body een scrollcontainer en breekt daarmee
     de sticky header. overflow-x: clip voorkomt horizontale scroll zonder
     dat neveneffect; hidden blijft de fallback voor oudere browsers. */
  overflow-x: hidden;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg,
video,
iframe {
  max-width: 100%;
}

img {
  height: auto;
  display: block;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--kleur-navy);
  line-height: 1.2;
  margin: 0 0 0.5em;
  overflow-wrap: break-word;
}

h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); line-height: 1.08; }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); }
h3 { font-size: 1.375rem; }
h4 { font-size: 1.125rem; }

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

/* Browsers geven figure/blockquote standaard margin: 1em 40px - die insprong
   zou de portretfoto en het quote-blok uit het stramien trekken. */
figure,
blockquote { margin: 0; }

a {
  color: var(--kleur-accent);
  text-decoration-color: color-mix(in srgb, var(--kleur-accent) 35%, transparent);
  text-underline-offset: 3px;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

a:hover { color: var(--kleur-primair); text-decoration-color: currentColor; }

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

ul, ol { margin: 0 0 1.15em; padding-left: 1.25em; }
li { margin-bottom: 0.4em; }

strong { font-weight: 600; color: var(--kleur-navy); }

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

.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 200;
  background: var(--kleur-primair);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 var(--radius-klein) var(--radius-klein);
  font-weight: 600;
  text-decoration: none;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 0; color: #fff; }

/* --------------------------------------------------------------------------
   Raamwerk: container & banden
   -------------------------------------------------------------------------- */

@supports (overflow-x: clip) {
  body { overflow-x: clip; }
}

.container {
  width: 100%;
  max-width: var(--breedte-content);
  margin-inline: auto;
  padding-inline: var(--padding-inline);
}

.container--smal { max-width: var(--breedte-smal); }

.band {
  padding-block: var(--band-padding);
  position: relative;
}

.band--porselein { background: var(--kleur-achtergrond); }
.band--wit { background: var(--kleur-wit); }

.band--navy {
  background: var(--kleur-navy);
  color: var(--kleur-achtergrond);
}
.band--navy h1, .band--navy h2, .band--navy h3, .band--navy h4 { color: var(--kleur-achtergrond); }
.band--navy a { color: var(--kleur-accent-licht); }
.band--navy .kicker { color: var(--kleur-accent-licht); }

.band--blauw {
  background: var(--kleur-primair);
  color: #fff;
}
.band--blauw h1, .band--blauw h2, .band--blauw h3 { color: #fff; }
.band--blauw .kicker { color: #fff; opacity: 0.85; }

/* Band die een overlappende kaart uit de vorige band opvangt */
.band--vangt-overlap { padding-top: calc(var(--band-padding) + var(--overlap)); }

/* --------------------------------------------------------------------------
   Sectiekoppen
   -------------------------------------------------------------------------- */

.sectiekop {
  text-align: center;
  max-width: 660px;
  margin-inline: auto;
  margin-bottom: clamp(40px, 5vw, 64px);
}

.kicker {
  font-family: var(--font-tekst);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kleur-accent);
  margin: 0 0 0.75em;
  display: block;
}

.lead {
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--kleur-tekst-zacht);
}

.band--navy .lead { color: color-mix(in srgb, var(--kleur-achtergrond) 78%, transparent); }
.band--blauw .lead { color: rgba(255, 255, 255, 0.85); }

/* --------------------------------------------------------------------------
   Signature-effect: de zelftekenende kroon-krul sierlijn
   -------------------------------------------------------------------------- */

.sierlijn {
  display: block;
  width: 160px;
  height: 28px;
  margin: 0 auto 20px;
  overflow: visible;
}

.sierlijn__lijn {
  fill: none;
  stroke: var(--kleur-navy);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: var(--lijn-lengte, 120);
  stroke-dashoffset: var(--lijn-lengte, 120);
}

.sierlijn__kroon {
  fill: var(--kleur-accent);
  opacity: 0;
  transform: translateY(4px);
  transform-origin: center;
}

.sierlijn.is-zichtbaar .sierlijn__lijn {
  animation: lijn-tekenen 900ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.sierlijn.is-zichtbaar .sierlijn__kroon {
  animation: kroon-verschijnen 400ms ease-out 540ms forwards;
}

@keyframes lijn-tekenen {
  to { stroke-dashoffset: 0; }
}

@keyframes kroon-verschijnen {
  to { opacity: 1; transform: translateY(0); }
}

/* Varianten op donkere banden */
.band--navy .sierlijn__lijn,
.band--blauw .sierlijn__lijn { stroke: var(--kleur-achtergrond); }

.band--navy .sierlijn__kroon { fill: var(--kleur-accent-licht); }
.band--blauw .sierlijn__kroon { fill: var(--kleur-achtergrond); }

/* Krul-hairline als scheiding */
.krul-hairline {
  display: block;
  width: min(100%, 220px);
  height: 12px;
  margin: 32px auto;
  color: var(--kleur-subtiel);
}
.krul-hairline path { fill: none; stroke: currentColor; stroke-width: 1; }

/* Kroontje als bullet */
.kroon-lijst {
  list-style: none;
  padding: 0;
  margin: 0;
}

.kroon-lijst li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 0.85em;
}

.kroon-lijst li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 14px;
  height: 10px;
  background-color: var(--kleur-accent);
  -webkit-mask: var(--kroon-masker) center / contain no-repeat;
  mask: var(--kroon-masker) center / contain no-repeat;
}

.band--navy .kroon-lijst li::before { background-color: var(--kleur-accent-licht); }
.band--blauw .kroon-lijst li::before { background-color: #fff; }

:root {
  --kroon-masker: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 18'%3E%3Cpath d='M2.6 16.4 L0.6 3.2 L7 8.6 L12 0.8 L17 8.6 L23.4 3.2 L21.4 16.4 Z' fill='%23000'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   Knoppen
   -------------------------------------------------------------------------- */

.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 28px;
  border-radius: var(--radius-pill);
  font-family: var(--font-tekst);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.knop:hover { transform: translateY(-2px); }
.knop:active { transform: translateY(0); }

.knop--primair {
  background: var(--kleur-primair);
  color: #fff;
  box-shadow: 0 4px 14px rgba(11, 62, 143, 0.24);
}
.knop--primair:hover {
  background: var(--kleur-accent);
  color: #fff;
  box-shadow: 0 8px 22px rgba(46, 111, 244, 0.32);
}

.knop--secundair {
  background: var(--kleur-wit);
  color: var(--kleur-navy);
  border-color: var(--kleur-navy);
}
.knop--secundair:hover {
  background: var(--kleur-navy);
  color: var(--kleur-wit);
}

.knop--wit {
  background: var(--kleur-wit);
  color: var(--kleur-navy);
}
.knop--wit:hover { background: var(--kleur-achtergrond); color: var(--kleur-primair); }

.knop--ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.55);
}
.knop--ghost:hover { background: rgba(255, 255, 255, 0.12); color: #fff; border-color: #fff; }

.knop-groep {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

/* Tekstlink met pijl */
.tekstlink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  color: var(--kleur-accent);
  min-height: 44px;
}
.tekstlink span:last-child { transition: transform 0.2s ease; }
.tekstlink:hover span:last-child { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   Header & navigatie
   -------------------------------------------------------------------------- */

/* Basis: een dekkende achtergrond op de header zelf. Het glaseffect
   (backdrop-filter) staat in de desktop-query hieronder; op mobiel is de
   header bij een open menu de schermvullende paneellaag en moet hij dus
   volledig dekkend zijn. Zie de mobiele navigatie onderaan. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--kleur-achtergrond);
  border-bottom: 1px solid transparent;
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.site-header.is-compact {
  box-shadow: var(--schaduw-nav);
  border-bottom-color: var(--kleur-subtiel);
}

@media (min-width: 781px) {
  .site-header {
    background: color-mix(in srgb, var(--kleur-achtergrond) 82%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: background-color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  }

  .site-header.is-compact {
    background: color-mix(in srgb, var(--kleur-achtergrond) 94%, transparent);
  }
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: var(--header-hoogte);
  transition: min-height 0.3s ease;
}

.site-header.is-compact .header-inner { min-height: 68px; }

.logo { display: inline-flex; align-items: center; flex-shrink: 0; }

.logo img {
  height: 44px;
  width: auto;
  transition: height 0.3s ease;
}

.site-header.is-compact .logo img { height: 36px; }

.site-nav { display: flex; align-items: center; gap: 28px; }

.nav-lijst {
  display: flex;
  align-items: center;
  gap: 26px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-lijst li { margin: 0; }

.nav-lijst a {
  position: relative;
  display: block;
  padding: 10px 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--kleur-navy);
  text-decoration: none;
  white-space: nowrap;
}

.nav-lijst a:hover { color: var(--kleur-accent); }

/* Actieve pagina: kroontje boven het woord (geen underline) */
.nav-lijst a[aria-current="page"] { color: var(--kleur-primair); }

.nav-lijst a[aria-current="page"]::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 11px;
  height: 8px;
  background-color: var(--kleur-accent);
  -webkit-mask: var(--kroon-masker) center / contain no-repeat;
  mask: var(--kroon-masker) center / contain no-repeat;
}

.nav-acties { display: flex; align-items: center; gap: 18px; }

.nav-telefoon {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--kleur-navy);
  text-decoration: none;
  white-space: nowrap;
}
.nav-telefoon:hover { color: var(--kleur-accent); }

.nav-acties .knop { min-height: 44px; padding: 10px 22px; }

/* Gevulde knop met woordlabel: op een lichte header is een omlijnd icoontje
   te makkelijk over het hoofd te zien. */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  padding: 0 13px;
  background: var(--kleur-primair);
  border: 1.5px solid var(--kleur-primair);
  border-radius: var(--radius-pill);
  cursor: pointer;
  color: var(--kleur-wit);
}

.nav-toggle__streep {
  position: relative;
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  transition: transform 0.25s ease, background-color 0.25s ease;
}

.nav-toggle__streep::before,
.nav-toggle__streep::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  background: currentColor;
  transition: transform 0.25s ease, top 0.25s ease;
}
.nav-toggle__streep::before { top: -6px; }
.nav-toggle__streep::after { top: 6px; }

.nav-toggle__label {
  font-family: var(--font-tekst);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1;
  color: currentColor;
  /* Op 360px mag het woord niet over twee regels breken en de streepjes
     overlappen; de knop houdt zo zijn vaste pilvorm. */
  white-space: nowrap;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__streep { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__streep::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__streep::after { top: 0; transform: rotate(-45deg); }

/* --------------------------------------------------------------------------
   Hero (homepage)
   -------------------------------------------------------------------------- */

/* Let op: GEEN overflow:hidden op .hero - dat zou de overlappende infokaart
   (margin-bottom: -64px) afknippen. De decoratieve lagen clippen zichzelf. */
.hero {
  position: relative;
  background: var(--kleur-achtergrond);
  padding-top: clamp(48px, 7vw, 88px);
  padding-bottom: 0;
}

/* Clipt het kroontje-watermerk, zonder de infokaart te raken */
.hero__decor {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}

.hero__media {
  position: absolute;
  inset: 0 0 auto 0;
  height: 55%;
  overflow: hidden;
  z-index: 0;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}

/* Verloop van onder: de foto blijft bovenin scherp zichtbaar en zakt
   naar volledig porselein weg, zodat de gecentreerde tekst leesbaar blijft. */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(247, 244, 238, 0.18) 0%,
    rgba(247, 244, 238, 0.52) 40%,
    rgba(247, 244, 238, 0.90) 70%,
    rgba(247, 244, 238, 0.99) 88%,
    var(--kleur-achtergrond) 100%);
}

/* Kroontje-watermerk, parallax */
.hero__watermerk {
  position: absolute;
  top: 8%;
  left: 50%;
  width: min(660px, 92vw);
  height: auto;
  transform: translateX(-50%);
  opacity: 0.04;
  color: var(--kleur-primair);
  z-index: 1;
  will-change: transform;
  pointer-events: none;
}

.hero__inhoud {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 780px;
  margin-inline: auto;
  /* Start de tekstlaag laag genoeg om in het dichte deel van het
     verloop te vallen, niet op het scherpe deel van de foto. */
  padding-top: clamp(120px, 20vw, 260px);
}

.hero__inhoud h1 { margin-bottom: 0.35em; }

.hero__sub {
  font-size: 1.25rem;
  line-height: 1.6;
  color: var(--kleur-tekst-zacht);
  max-width: 620px;
  margin: 0 auto 32px;
}

/* Overlappende infokaart onder de hero */
.infokaart {
  position: relative;
  z-index: 3;
  background: var(--kleur-wit);
  border-radius: var(--radius-kaart);
  box-shadow: var(--schaduw-kaart);
  margin-top: clamp(48px, 6vw, 72px);
  margin-bottom: calc(var(--overlap) * -1);
  padding: clamp(28px, 3.5vw, 40px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 40px);
  align-items: start;
}

.infokaart__kolom {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
}

.infokaart__kolom + .infokaart__kolom {
  border-left: 1px solid var(--kleur-subtiel);
  padding-left: clamp(24px, 3vw, 40px);
}

.infokaart__titel {
  font-family: var(--font-tekst);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--kleur-accent);
  margin: 0 0 4px;
}

.infokaart dl { margin: 0; font-size: 0.9375rem; }

.infokaart .tijd-rij {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 0;
}
.infokaart .tijd-rij dt { color: var(--kleur-tekst-zacht); }
.infokaart .tijd-rij dd { margin: 0; font-weight: 600; color: var(--kleur-navy); }

.infokaart__tel {
  font-family: var(--font-display);
  font-size: 1.375rem;
  color: var(--kleur-primair);
  text-decoration: none;
  display: inline-block;
  min-height: 44px;
  line-height: 44px;
}
.infokaart__tel:hover { color: var(--kleur-accent); }

/* --------------------------------------------------------------------------
   Pagina-hero (subpagina's)
   -------------------------------------------------------------------------- */

.pagina-hero {
  background: var(--kleur-achtergrond);
  padding-block: clamp(48px, 6vw, 80px) clamp(40px, 5vw, 64px);
  text-align: center;
}

.pagina-hero h1 {
  font-size: clamp(2.2rem, 4.5vw, 3.2rem);
  margin-bottom: 0.4em;
}

.pagina-hero .lead {
  max-width: 640px;
  margin-inline: auto;
}

.broodkruimels {
  margin-bottom: 28px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kleur-tekst-zacht);
}

.broodkruimels ol {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.broodkruimels li { margin: 0; display: flex; align-items: center; gap: 8px; }
.broodkruimels li + li::before { content: "\203A"; color: var(--kleur-accent-licht); }
.broodkruimels a { color: var(--kleur-tekst-zacht); text-decoration: none; }
.broodkruimels a:hover { color: var(--kleur-accent); }
.broodkruimels [aria-current="page"] { color: var(--kleur-navy); }

/* --------------------------------------------------------------------------
   USP-trio
   -------------------------------------------------------------------------- */

.usp-trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 48px);
  align-items: stretch;
}

.usp {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-inline: clamp(0px, 1.5vw, 20px);
}

.usp + .usp { border-left: 1px solid var(--kleur-subtiel); }

.usp__kroon {
  width: 20px;
  height: 15px;
  fill: var(--kleur-accent);
  margin-bottom: 6px;
}

.usp h3 { margin: 0 0 4px; font-size: 1.25rem; }
.usp p { font-size: 0.9375rem; color: var(--kleur-tekst-zacht); margin: 0; }

/* --------------------------------------------------------------------------
   Genummerde ceremoniële lijst (behandelingen)
   -------------------------------------------------------------------------- */

.rij-lijst { border-top: 1px solid var(--kleur-subtiel); }

.rij {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
  padding-block: clamp(28px, 3.2vw, 40px);
  border-bottom: 1px solid var(--kleur-subtiel);
}

/* Subtiele asymmetrie binnen het gecentreerde raamwerk */
.rij--ingesprongen { padding-left: 80px; }

.rij__nummer {
  font-family: var(--font-display);
  font-size: 3rem;
  line-height: 1;
  color: var(--kleur-subtiel);
  transition: color 0.3s ease;
  min-width: 72px;
}

.rij:hover .rij__nummer { color: var(--kleur-accent-licht); }

.rij__tekst h3 { margin: 0 0 4px; }
.rij__tekst p { margin: 0; color: var(--kleur-tekst-zacht); font-size: 0.9375rem; }

.rij__link { flex-shrink: 0; }

/* --------------------------------------------------------------------------
   Werkwijze-tijdlijn (navy band)
   -------------------------------------------------------------------------- */

.tijdlijn {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 2.5vw, 36px);
  position: relative;
  align-items: stretch;
  /* <ol>: geen markers en geen inspringing, anders loopt de tijdlijn
     uit het gedeelde stramien van .container */
  list-style: none;
  margin: 0;
  padding: 0;
}

.tijdlijn::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 12%;
  right: 12%;
  height: 1px;
  background: color-mix(in srgb, var(--kleur-accent-licht) 45%, transparent);
}

.stap {
  position: relative;
  text-align: center;
  padding-top: 34px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.stap__knoop {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 14px;
  fill: var(--kleur-accent-licht);
}

.stap__nummer {
  font-family: var(--font-tekst);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--kleur-accent-licht);
  text-transform: uppercase;
}

.stap h3 { font-size: 1.1875rem; margin: 0 0 4px; }
.stap p {
  margin: 0;
  font-size: 0.9375rem;
  color: color-mix(in srgb, var(--kleur-achtergrond) 76%, transparent);
}

/* --------------------------------------------------------------------------
   Over-blok met overlappend portret
   -------------------------------------------------------------------------- */

.over-blok {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.over-blok__media {
  position: relative;
  margin-top: calc(var(--overlap) * -1 - clamp(64px, 8vw, 112px));
  align-self: start;
}

.over-blok__media img {
  width: 100%;
  border-radius: var(--radius-kaart);
  box-shadow: var(--schaduw-kaart);
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.over-blok__watermerk {
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: 44px;
  height: 33px;
  fill: #fff;
  opacity: 0.85;
  filter: drop-shadow(0 2px 6px rgba(10, 42, 85, 0.35));
}

.quote-blok {
  background: var(--kleur-blauw-tint);
  border-radius: var(--radius-kaart);
  padding: clamp(20px, 2.5vw, 28px);
  margin-top: 24px;
  font-family: var(--font-display);
  font-size: 1.1875rem;
  line-height: 1.5;
  color: var(--kleur-navy);
}

.quote-blok cite {
  display: block;
  margin-top: 10px;
  font-family: var(--font-tekst);
  font-size: 0.8125rem;
  font-weight: 600;
  font-style: normal;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kleur-tekst-zacht);
}

/* --------------------------------------------------------------------------
   Twee kolommen (vergoeding / waarom-hier / contact)
   -------------------------------------------------------------------------- */

.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

.duo--contact { grid-template-columns: 0.9fr 1.1fr; }

.kaart {
  background: var(--kleur-wit);
  border-radius: var(--radius-kaart);
  padding: clamp(24px, 3vw, 36px);
  box-shadow: var(--schaduw-zacht);
  border: 1px solid var(--kleur-subtiel);
  height: 100%;
}

.kaart h3 { margin-top: 0; }

.kaart--tint { background: var(--kleur-blauw-tint); border-color: transparent; }

/* --------------------------------------------------------------------------
   Regio: plaatskaarten (/regio/ en de plaatspagina's)
   -------------------------------------------------------------------------- */

.plaats-raster {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.6vw, 20px);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Rij van vier verwante plaatsen onderaan een plaatspagina */
.plaats-raster--vier { grid-template-columns: repeat(4, 1fr); }

/* min-width: 0 haalt de auto-minimumbreedte van grid-items weg; zonder dat kan
   een lange naam als "Bunschoten-Spakenburg" de kolom oprekken op 360px. */
.plaats-raster li { margin: 0; min-width: 0; }

.plaats-kaart {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  height: 100%;
  min-height: 44px;
  padding: 18px 22px;
  background: var(--kleur-wit);
  border: 1px solid var(--kleur-subtiel);
  border-radius: var(--radius-klein);
  text-decoration: none;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Op witte banden zou een witte kaart wegvallen - daar porselein als vulling */
.band--wit .plaats-kaart { background: var(--kleur-achtergrond); }

.plaats-kaart:hover {
  transform: translateY(-2px);
  border-color: var(--kleur-accent-licht);
  box-shadow: var(--schaduw-zacht);
}

.plaats-kaart__tekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.plaats-kaart__naam {
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.25;
  color: var(--kleur-navy);
  overflow-wrap: anywhere;
}

.plaats-kaart__sub {
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--kleur-tekst-zacht);
}

.plaats-kaart__pijl {
  flex-shrink: 0;
  color: var(--kleur-accent);
  transition: transform 0.2s ease;
}

.plaats-kaart:hover .plaats-kaart__pijl { transform: translateX(4px); }

@media (max-width: 900px) {
  .plaats-raster,
  .plaats-raster--vier { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .plaats-raster,
  .plaats-raster--vier { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Tips: artikelkaarten
   -------------------------------------------------------------------------- */

.tips-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(20px, 2.5vw, 32px);
  align-items: stretch;
}

/* /tips/: bewust 2x2, niet auto-fit - anders valt de vierde kaart alleen op rij 2 */
.tips-raster--twee { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 720px) {
  .tips-raster--twee { grid-template-columns: 1fr; }
}

.tip-kaart {
  display: flex;
  flex-direction: column;
  background: var(--kleur-wit);
  border: 1px solid var(--kleur-subtiel);
  border-radius: 20px;
  overflow: hidden;
  height: 100%;
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.tip-kaart:hover {
  transform: translateY(-4px);
  box-shadow: var(--schaduw-kaart);
  border-color: var(--kleur-accent-licht);
  color: inherit;
}

.tip-kaart__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--kleur-blauw-tint);
  flex-shrink: 0;
}

.tip-kaart__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.tip-kaart:hover .tip-kaart__media img { transform: scale(1.045); }

/* Fallback-vlak wanneer er geen foto is: blauw-tint met kroontje */
.tip-kaart__vlak {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle at 50% 42%, #fff 0%, var(--kleur-blauw-tint) 62%);
}

.tip-kaart__vlak svg {
  width: 52px;
  height: 39px;
  fill: var(--kleur-accent-licht);
  transition: transform 0.4s ease;
}

.tip-kaart:hover .tip-kaart__vlak svg { transform: translateY(-3px) scale(1.05); }

.tip-kaart__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: clamp(20px, 2.2vw, 26px);
  flex: 1;
}

.tip-kaart__body h3 { margin: 0; font-size: 1.25rem; }

.tip-kaart__meta {
  margin-top: auto;
  padding-top: 12px;
  font-size: 0.8125rem;
  color: var(--kleur-tekst-zacht);
}

.tip-kaart p { font-size: 0.9375rem; color: var(--kleur-tekst-zacht); margin: 0; }

/* --------------------------------------------------------------------------
   FAQ-accordeon
   -------------------------------------------------------------------------- */

.faq { max-width: var(--breedte-smal); margin-inline: auto; }

.faq details {
  border-bottom: 1px solid var(--kleur-subtiel);
}

.faq details:first-of-type { border-top: 1px solid var(--kleur-subtiel); }

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 60px;
  padding: 18px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: 1.1875rem;
  color: var(--kleur-navy);
  transition: color 0.2s ease;
}

.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--kleur-accent); }

.faq summary::after {
  content: "";
  flex-shrink: 0;
  width: 16px;
  height: 12px;
  background-color: var(--kleur-accent);
  -webkit-mask: var(--kroon-masker) center / contain no-repeat;
  mask: var(--kroon-masker) center / contain no-repeat;
  transition: transform 0.3s ease;
}

.faq details[open] summary::after { transform: rotate(180deg); }

.faq__antwoord {
  padding: 0 0 22px;
  color: var(--kleur-tekst-zacht);
  font-size: 0.9375rem;
  max-width: 62ch;
}

.faq details[open] .faq__antwoord { animation: faq-open 0.3s ease-out; }

@keyframes faq-open {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --------------------------------------------------------------------------
   Artikel (tips-detail)
   -------------------------------------------------------------------------- */

.artikel { max-width: var(--breedte-smal); margin-inline: auto; }

.artikel h2 {
  text-align: left;
  font-size: clamp(1.5rem, 2.6vw, 1.95rem);
  margin-top: 1.6em;
}

.artikel h3 {
  font-size: 1.25rem;
  margin-top: 1.4em;
}

.artikel > p:first-of-type {
  font-size: 1.25rem;
  line-height: 1.6;
  color: var(--kleur-tekst-zacht);
}

.artikel__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  justify-content: center;
  font-size: 0.8125rem;
  color: var(--kleur-tekst-zacht);
  margin-top: 12px;
}

.artikel__figuur { margin: 32px 0; }

.artikel__figuur img {
  width: 100%;
  border-radius: var(--radius-kaart);
  box-shadow: var(--schaduw-zacht);
}

.artikel__figuur figcaption {
  margin-top: 10px;
  font-size: 0.8125rem;
  color: var(--kleur-tekst-zacht);
  text-align: center;
}

.artikel .kroon-lijst { margin-bottom: 1.15em; }

.artikel-cta {
  background: var(--kleur-blauw-tint);
  border-radius: var(--radius-kaart);
  padding: clamp(22px, 3vw, 32px);
  margin-top: 40px;
}

.artikel-cta h3 { margin-top: 0; }
.artikel-cta p { color: var(--kleur-tekst-zacht); }

/* --------------------------------------------------------------------------
   Beeldkaart naast lead (detailpagina's)
   -------------------------------------------------------------------------- */

.lead-duo {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}

.lead-duo__media img {
  width: 100%;
  border-radius: var(--radius-kaart);
  box-shadow: var(--schaduw-kaart);
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Portretbeeld (3:4) zonder de overlap van .over-blok__media */
.media-portret img {
  width: 100%;
  border-radius: var(--radius-kaart);
  box-shadow: var(--schaduw-kaart);
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

@media (max-width: 1024px) {
  .media-portret { max-width: 420px; margin-inline: auto; }
}

/* --------------------------------------------------------------------------
   Contactformulier
   -------------------------------------------------------------------------- */

.formulier { display: grid; gap: 18px; }

.veld { display: flex; flex-direction: column; gap: 6px; }

.veld label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--kleur-navy);
}

.veld .optioneel { font-weight: 400; color: var(--kleur-tekst-zacht); }

.veld input,
.veld textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  font-family: var(--font-tekst);
  font-size: 1rem;
  color: var(--kleur-tekst);
  background: var(--kleur-wit);
  border: 1.5px solid var(--kleur-subtiel);
  border-radius: var(--radius-klein);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.veld textarea { min-height: 140px; resize: vertical; line-height: 1.6; }

.veld input:hover,
.veld textarea:hover { border-color: var(--kleur-accent-licht); }

.veld input:focus,
.veld textarea:focus {
  outline: none;
  border-color: var(--kleur-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--kleur-accent-licht) 35%, transparent);
}

.veld input[aria-invalid="true"],
.veld textarea[aria-invalid="true"] {
  border-color: #C0392B;
  background: #FDF3F2;
}

.veld input[aria-invalid="true"]:focus,
.veld textarea[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.22);
}

.veld-fout {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #C0392B;
  min-height: 0;
}

.veld-fout:empty { display: none; }

.formulier .knop { width: 100%; }

.formulier__voet {
  font-size: 0.8125rem;
  color: var(--kleur-tekst-zacht);
  margin: 0;
}

.form-melding {
  padding: 14px 18px;
  border-radius: var(--radius-klein);
  font-size: 0.9375rem;
  font-weight: 600;
}

.form-melding[hidden] { display: none; }

.form-melding--ok {
  background: var(--kleur-blauw-tint);
  color: var(--kleur-primair);
  border: 1px solid var(--kleur-accent-licht);
}

.form-melding--fout {
  background: #FDF3F2;
  color: #C0392B;
  border: 1px solid #E8B7B1;
}

/* Honeypot */
.honingpot {
  position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Contactgegevens / kaart
   -------------------------------------------------------------------------- */

.gegevens-lijst { list-style: none; margin: 0 0 24px; padding: 0; }

.gegevens-lijst li {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--kleur-subtiel);
  font-size: 0.9375rem;
}

.gegevens-lijst li:last-child { border-bottom: none; }

.gegevens-lijst dt,
.gegevens-lijst .label {
  min-width: 92px;
  font-weight: 600;
  color: var(--kleur-tekst-zacht);
  flex-shrink: 0;
}

.gegevens-lijst a { overflow-wrap: anywhere; }

.tijden-tabel {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.tijden-tabel th,
.tijden-tabel td {
  padding: 9px 12px;
  text-align: left;
}

.tijden-tabel th {
  font-weight: 500;
  color: var(--kleur-tekst-zacht);
}

.tijden-tabel td {
  font-weight: 600;
  color: var(--kleur-navy);
  text-align: right;
  white-space: nowrap;
}

.tijden-tabel tr:nth-child(odd) { background: var(--kleur-blauw-tint); }
.tijden-tabel tr.is-gesloten td { color: var(--kleur-tekst-zacht); font-weight: 400; }

.kaart-embed {
  border: 0;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-kaart);
  box-shadow: var(--schaduw-zacht);
  display: block;
  background: var(--kleur-subtiel);
}

/* --------------------------------------------------------------------------
   CTA-band
   -------------------------------------------------------------------------- */

.cta-band { text-align: center; }
.cta-band .lead { margin-inline: auto; margin-bottom: 28px; max-width: 560px; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--kleur-navy);
  color: color-mix(in srgb, var(--kleur-achtergrond) 80%, transparent);
  padding-block: clamp(56px, 6vw, 80px) 32px;
  font-size: 0.9375rem;
}

.footer-raster {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
  gap: clamp(28px, 3.5vw, 48px);
  align-items: start;
}

.footer-kolom h3 {
  font-family: var(--font-tekst);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--kleur-accent-licht);
  margin: 0 0 16px;
}

.footer-kolom ul { list-style: none; margin: 0; padding: 0; }
.footer-kolom li { margin-bottom: 8px; }

.footer-kolom a {
  color: color-mix(in srgb, var(--kleur-achtergrond) 82%, transparent);
  text-decoration: none;
}
.footer-kolom a:hover { color: #fff; }

/* Logo op porseleinen plaquette (logo is donker op licht) */
.footer-plaquette {
  display: inline-block;
  background: var(--kleur-achtergrond);
  border-radius: var(--radius-klein);
  padding: 12px 16px;
  margin-bottom: 18px;
}

.footer-plaquette img { height: 40px; width: auto; }

.footer-adres { font-style: normal; line-height: 1.8; }
.footer-adres a { color: var(--kleur-accent-licht); text-decoration: none; overflow-wrap: anywhere; }
.footer-adres a:hover { color: #fff; }

.footer-tijden { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.footer-tijden th {
  font-weight: 400;
  text-align: left;
  padding: 3px 0;
  color: color-mix(in srgb, var(--kleur-achtergrond) 66%, transparent);
}
.footer-tijden td { text-align: right; padding: 3px 0; font-weight: 600; color: var(--kleur-achtergrond); white-space: nowrap; }

/* Regio-strip: sitewide interne links naar de plaatspagina's */
.footer-regio {
  margin-top: clamp(32px, 4vw, 44px);
  padding-top: clamp(24px, 3vw, 32px);
  border-top: 1px solid color-mix(in srgb, var(--kleur-accent-licht) 22%, transparent);
}

.footer-regio h3 {
  font-family: var(--font-tekst);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--kleur-accent-licht);
  margin: 0 0 8px;
}

.footer-regio ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-regio li { margin: 0; }

.footer-regio a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: color-mix(in srgb, var(--kleur-achtergrond) 82%, transparent);
  text-decoration: none;
}

.footer-regio a:hover { color: #fff; }

.footer-onder {
  margin-top: 40px;
  text-align: center;
}

.footer-onder .krul-hairline { color: color-mix(in srgb, var(--kleur-accent-licht) 40%, transparent); }

.footer-registraties {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: center;
  font-size: 0.8125rem;
  color: color-mix(in srgb, var(--kleur-achtergrond) 70%, transparent);
  margin: 0 0 10px;
}

.footer-credit {
  font-size: 0.8125rem;
  color: color-mix(in srgb, var(--kleur-achtergrond) 62%, transparent);
  margin: 0;
}
.footer-credit a { color: var(--kleur-accent-licht); text-decoration: none; overflow-wrap: anywhere; }

/* --------------------------------------------------------------------------
   Conceptversie-badge
   -------------------------------------------------------------------------- */

.concept-badge {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  background: color-mix(in srgb, var(--kleur-navy) 92%, transparent);
  color: var(--kleur-achtergrond);
  border: 1px solid color-mix(in srgb, var(--kleur-accent-licht) 45%, transparent);
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--schaduw-zacht);
  pointer-events: none;
}

.concept-badge svg { width: 12px; height: 9px; fill: var(--kleur-accent-licht); }

/* --------------------------------------------------------------------------
   Scroll-reveal
   -------------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.reveal.is-zichtbaar { opacity: 1; transform: none; }

/* Zonder JavaScript blijft alles zichtbaar */
.geen-js .reveal { opacity: 1; transform: none; }
.geen-js .sierlijn__lijn { stroke-dashoffset: 0; }
.geen-js .sierlijn__kroon { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   Responsief: tablet
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  :root { --overlap: 48px; }

  .container { max-width: 92vw; }

  /* USP-trio blijft drie kolommen, zonder hairlines */
  .usp + .usp { border-left: none; }

  .duo, .duo--contact, .lead-duo { grid-template-columns: 1fr; }

  /* Over-blok stapelt: foto boven, tekst onder, zonder overlap */
  .over-blok { grid-template-columns: 1fr; }
  .over-blok__media { margin-top: 0; max-width: 420px; margin-inline: auto; }

  /* Tijdlijn blijft horizontaal maar wordt scrollbaar met snap-points */
  .tijdlijn-wrap {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin-inline: calc(var(--padding-inline) * -1);
    padding-inline: var(--padding-inline);
    padding-bottom: 8px;
  }

  .tijdlijn {
    grid-template-columns: repeat(4, minmax(200px, 1fr));
    min-width: 760px;
  }

  .stap { scroll-snap-align: center; }

  .footer-raster { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .nav-lijst { gap: 18px; }
  .nav-telefoon { display: none; }
}

/* --------------------------------------------------------------------------
   Responsief: mobiele navigatie + layout
   -------------------------------------------------------------------------- */

@media (max-width: 780px) {
  /* Boven het paneel, zodat het kruisje zichtbaar en aantikbaar blijft */
  .nav-toggle {
    display: inline-flex;
    position: relative;
    z-index: 120;
  }

  /* Ruimte maken voor de bredere menuknop, zodat er op 360px niets
     buiten de container valt. */
  .header-inner { gap: 12px; }
  .logo img { height: 36px; }
  .site-header.is-compact .logo img { height: 32px; }

  /* Zolang het menu open is, is de header zelf de schermvullende laag en
     hangt het paneel daaraan vast (position: absolute binnen de header).
     Omdat de header hier position: fixed is, is hij gegarandeerd het
     containing block van dat absolute paneel: het paneel kan dus niet meer
     tot headerhoogte worden afgeknipt, en de laag ligt met z-index 1000
     boven de herofoto (z-index 0) en de infokaart (z-index 3).

     Let op bij het testen: html, body en .site-header mogen geen transform,
     filter, backdrop-filter, will-change of contain krijgen. Zulke
     eigenschappen maken van een voorouder het containing block van een
     fixed kind, en dan valt de schermvullende laag terug tot de hoogte van
     die voorouder - precies het beeld waarbij het menu achter de foto lijkt
     te vallen. De blur op de header staat daarom alleen in de desktop-query
     (min-width: 781px) en wordt hieronder voor de zekerheid nog expliciet
     uitgezet.

     De css/js worden met ?v= gekoppeld in de HTML. Zonder die versiesleutel
     blijven mobiele browsers een oude style.css uit hun cache serveren en
     lijkt een menu-fix niet aan te komen terwijl hij wel gedeployed is. Hoog
     die versie op zodra je hier iets wijzigt. */
  body.nav-open .site-header {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    /* Sluit aan op de zichtbare vensterhoogte, zodat de knoppen onderin het
       paneel niet onder de adresbalk van de telefoon vallen. Browsers zonder
       dvh negeren deze regel en vallen terug op bottom: 0. */
    height: 100dvh;
    z-index: 1000;
    background: var(--kleur-achtergrond);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    border-bottom-color: transparent;
  }

  /* Logo en sluitknop blijven op hun vaste regel bovenin het paneel staan,
     ook als de header net daarvoor compact was. */
  body.nav-open .header-inner { min-height: var(--header-hoogte); }

  .site-nav {
    position: absolute;
    top: var(--header-hoogte);
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 110;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    /* Het paneel loopt van rand tot rand (left/right: 0), maar .container is
       op mobiel 92vw breed en gecentreerd. Die 4vw marge wordt hier bij de
       inspringing opgeteld, zodat de menulinks op dezelfde linkerlijn staan
       als het logo erboven. */
    padding: 8px calc(4vw + var(--padding-inline)) 32px;
    background: var(--kleur-achtergrond);
    overflow-y: auto;
    /* Doorscrollen naar de pagina achter het paneel afvangen */
    overscroll-behavior: contain;
    opacity: 0;
    transform: translateY(-10px);
    visibility: hidden;
    transition: opacity 0.28s ease,
                transform 0.32s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0.32s;
  }

  .site-nav.is-open { opacity: 1; transform: none; visibility: visible; }

  .nav-lijst {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-bottom: 28px;
  }

  .nav-lijst li { border-bottom: 1px solid var(--kleur-subtiel); }

  .nav-lijst a {
    padding: 16px 0 16px 26px;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 400;
  }

  /* Kroontje links van het woord i.p.v. erboven */
  .nav-lijst a[aria-current="page"]::before {
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 15px;
    height: 11px;
  }

  .nav-acties {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-top: auto;
    padding-top: 24px;
  }

  .nav-acties .knop { width: 100%; min-height: 48px; }

  .nav-telefoon {
    display: block;
    text-align: center;
    min-height: 44px;
    line-height: 44px;
    font-size: 1.0625rem;
  }

  /* Voorkomt scrollen achter het geopende paneel */
  body.nav-open { overflow: hidden; }
}

@media (max-width: 720px) {
  /* Geen overlap op mobiel - nergens */
  :root { --overlap: 0px; }

  .band--vangt-overlap { padding-top: var(--band-padding); }

  .infokaart {
    grid-template-columns: 1fr;
    margin-bottom: 0;
    margin-top: 36px;
    gap: 0;
  }

  .infokaart__kolom + .infokaart__kolom {
    border-left: none;
    border-top: 1px solid var(--kleur-subtiel);
    padding-left: 0;
    padding-top: 20px;
    margin-top: 20px;
  }

  .hero { padding-bottom: clamp(48px, 8vw, 64px); }
  .hero__media { height: 48vh; }
  .hero__watermerk { display: none; }
  .hero__inhoud { padding-top: clamp(140px, 34vw, 200px); }

  .usp-trio { grid-template-columns: 1fr; gap: 28px; }
  .usp { padding-inline: 0; }
  .usp + .usp { border-left: none; border-top: 1px solid var(--kleur-subtiel); padding-top: 28px; }

  /* Behandelrijen: 1 kolom, nummer boven de kop, geen insprong */
  .rij {
    grid-template-columns: 1fr;
    gap: 8px;
    padding-block: 28px;
  }

  .rij--ingesprongen { padding-left: 0; }

  .rij__nummer { font-size: 2rem; min-width: 0; }

  /* Tijdlijn kantelt naar verticaal: lijn links, kroontjes als knopen */
  .tijdlijn-wrap {
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
    scroll-snap-type: none;
  }

  .tijdlijn {
    grid-template-columns: 1fr;
    min-width: 0;
    gap: 28px;
    padding-left: 34px;
  }

  .tijdlijn::before {
    top: 8px;
    bottom: 8px;
    left: 8px;
    right: auto;
    width: 1px;
    height: auto;
  }

  .stap { text-align: left; padding-top: 0; padding-left: 0; }

  .stap__knoop { top: 4px; left: -34px; transform: none; }

  .sierlijn { width: 120px; height: 21px; }

  .footer-raster { grid-template-columns: 1fr; gap: 32px; }

  .knop-groep .knop { width: 100%; }

  .artikel__meta { justify-content: flex-start; }
}

@media (max-width: 420px) {
  .rij__link { justify-self: start; }
  .concept-badge { right: 10px; bottom: 10px; font-size: 0.6875rem; padding: 6px 11px; }
}

/* --------------------------------------------------------------------------
   Toegankelijkheid: bewegingsvoorkeur & print
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .reveal { opacity: 1; transform: none; }
  .sierlijn__lijn { stroke-dashoffset: 0; }
  .sierlijn__kroon { opacity: 1; transform: none; }
  .hero__watermerk { transform: translateX(-50%) !important; }
  .knop:hover, .tip-kaart:hover { transform: none; }
}

@media print {
  .site-header, .concept-badge, .nav-toggle { display: none; }
  body { background: #fff; }
  .band { padding-block: 24px; }
}