/* More Advice, stijl voor het joepa-voorproefje.
   Merkkleuren zijn wet: uit de stylesheet van moreadvice.nl (Divi).
   Contrast (WCAG 2.x, berekend 2026-09-24):
     --blauw  #003450 op wit 13,07 · op zand 11,62 · op zeelicht 11,43
     --groen  #4ba829 op wit 3,03 (alleen vlak/lijn/icoon/kop >= 24px),
              op zand 2,69 (NOOIT tekst op zand), op blauw 4,31 (kop >= 24px)
     --groen-tekst #2e7a17 op wit 5,37 · op zand 4,77 · op zeelicht 4,70
     --groen-op-blauw #6cc24a op blauw 5,88
     --inkt   #1c2b36 op wit 14,50 · op zand 12,89
     --grijs  #4d5d69 op wit 6,81 · op zand 6,05
     wit op blauw 13,07 (knoppen) */
:root {
  --blauw: #003450;
  --groen: #4ba829;
  --groen-tekst: #2e7a17;
  --groen-op-blauw: #6cc24a;
  --inkt: #1c2b36;
  --grijs: #4d5d69;
  --lijn: #d6dfe4;
  --zand: #f6f1e8;
  --zeelicht: #eaf1f3;
  --wit: #ffffff;

  --letter-kop: 'Jost', 'Futura', 'Century Gothic', system-ui, sans-serif;
  --letter-tekst: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --letter-citaat: 'Gilda Display', Georgia, 'Times New Roman', serif;

  --maat: 1200px;          /* inhoudsbreedte */
  --maat-smal: 65ch;       /* leesbreedte proza */
  --rand: 24px;            /* zijmarge mobiel */
  --ritme: 8px;            /* alle ruimtes zijn veelvouden */
  --radius: 6px;
  --horizon: 1px solid var(--lijn);
  --schaduw: 0 1px 2px rgba(0, 52, 80, .06), 0 8px 24px rgba(0, 52, 80, .06);
}

/* Aanvullende tokens (afgeleid, geen nieuwe merkkleuren), berekend 2026-09-24:
     --blauw-hover #0b4566: wit erop 10,21 (knop-hover)
     --groen-zacht #e3efdc: de lichtgroene schijf uit haar banners;
                   --blauw erop 10,98 (iconen), --groen-tekst erop 4,51
     --lijn-blauw  rgba(255,255,255,.18): haarlijn op blauw
     wit 72% op blauw (label BEL/MAIL) 7,3 · --grijs op zeelicht 5,96
     focusring: --groen op wit 3,03 en op blauw 4,31 (niet-tekst >= 3);
                op zand/zeelicht wordt het --groen-tekst (4,77 / 4,70).
     Groene iconen op zand/zeelicht worden --groen-tekst (--groen haalt daar
     2,69 / 2,65).
     --blauw-diep  #002a41: haar donkerblauw iets verdiept, voor tekst op een
                   groen vlak (wegwijzerbord, cirkelmodel): op --groen 4,93,
                   dus AA ook voor kleine tekst (--blauw zelf haalt daar 4,31).
     --paal-kleur  rgba(0,52,80,.2): de paal van de wegwijzer (decoratief). */
:root {
  --blauw-diep: #002a41;
  --paal-kleur: rgba(0, 52, 80, .2);
  --blauw-hover: #0b4566;
  --groen-zacht: #e3efdc;
  --lijn-blauw: rgba(255, 255, 255, .18);
  --focus: var(--groen);

  --h1: 34px; --h2: 28px; --h3: 21px; --h4: 18px;
  --tekst: 17px; --klein: 15px; --citaat: 26px;
  --sectie: 56px;
  --kopbalk: 68px;
  --kop-mobiel: 30px;      /* paginakop op de telefoon, overal gelijk (zie 3.) */
  --overgang: .2s cubic-bezier(.2, .7, .2, 1);
}
@media (min-width: 880px) {
  :root {
    --h1: 52px; --h2: 36px; --h3: 24px; --h4: 19px;
    --tekst: 18px; --citaat: 32px;
    --sectie: 96px;
    --rand: 40px;
  }
}
@media (min-width: 1080px) {
  :root { --kopbalk: 88px; }
}
/* Heel smalle telefoons (onder 360px): één stap kleiner, ook weer op elke
   pagina gelijk, zodat "Arbeidsongeschiktheid" heel blijft. */
@media (max-width: 359.98px) {
  :root { --kop-mobiel: 26px; }
}

/* ── Basis ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--kopbalk) + 16px);
}
body {
  margin: 0;
  background: var(--wit);
  color: var(--inkt);
  font-family: var(--letter-tekst);
  font-size: var(--tekst);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
::selection { background: rgba(75, 168, 41, .22); color: var(--blauw); }

h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
  font-family: var(--letter-kop);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.12;
  color: var(--blauw);
  margin: 0 0 .5em;
}
h1, .h1 { font-size: var(--h1); }
h2, .h2 { font-size: var(--h2); }
h3, .h3 { font-size: var(--h3); line-height: 1.25; }
h4, .h4 { font-size: var(--h4); line-height: 1.35; letter-spacing: 0; }
h1, h2, h3 { text-wrap: balance; hyphens: manual; overflow-wrap: normal; }
p, li { hyphens: auto; -webkit-hyphenate-limit-before: 4; -webkit-hyphenate-limit-after: 4; hyphenate-limit-chars: 10 4 4; text-wrap: pretty; }
p { margin: 0 0 1em; }
.klein { font-size: var(--klein); line-height: 1.55; color: var(--grijs); }
strong, b { font-weight: 700; }

a { color: var(--blauw); }
a:hover { color: var(--groen-tekst); }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}
.vlak-zand, .vlak-zeelicht, .voet { --focus: var(--groen-tekst); }
.vlak-blauw { --focus: var(--groen); }

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

.overslaan {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  background: var(--blauw); color: var(--wit);
  font-family: var(--letter-kop); font-weight: 500; font-size: 16px;
  padding: 12px 20px; border-radius: 999px; text-decoration: none;
}
.overslaan:focus { top: 12px; color: var(--wit); }

/* Iconen: één lijnset (lucide), iets fijner dan standaard, zoals haar banners. */
.icoon {
  width: 24px; height: 24px; flex: none;
  stroke-width: 1.75;
}

/* ── Typografische onderdelen ────────────────────────────── */
.tweekleur__1 { color: var(--blauw); display: block; }
.tweekleur__2 { color: var(--groen); display: block; }
.kopdeel { display: inline-block; }   /* paginakop: afbreken alleen na een komma */
.vlak-zand .tweekleur__2, .vlak-zeelicht .tweekleur__2 { color: var(--groen-tekst); }
.vlak-blauw .tweekleur__1 { color: var(--wit); }
.vlak-blauw .tweekleur__2 { color: var(--groen-op-blauw); }
/* Groen op wit haalt 3:1 alleen als grote tekst; een tweekleurkop kleiner dan
   24px krijgt daarom de verdiepte groentint. */
h3.tweekleur .tweekleur__2, h4.tweekleur .tweekleur__2,
.h3.tweekleur .tweekleur__2, .h4.tweekleur .tweekleur__2 { color: var(--groen-tekst); }

.kop-groen {
  color: var(--groen-tekst);
  font-family: var(--letter-kop);
  font-weight: 500;
}

.citaat { margin: 0; }
.citaat blockquote { margin: 0; }
.citaat blockquote::before {
  content: ""; display: block; width: 48px; height: 2px;
  background: var(--groen); margin-bottom: 24px;
}
.citaat p {
  font-family: var(--letter-citaat);
  font-size: var(--citaat);
  line-height: 1.25;
  color: var(--blauw);
  margin: 0;
  max-width: 30ch;
  hyphens: manual;
  text-wrap: balance;
}
.citaat figcaption { margin-top: 16px; font-size: var(--klein); color: var(--grijs); }
.citaat--midden { margin-inline: auto; text-align: center; }
.citaat--midden p { margin-inline: auto; }
.citaat--midden blockquote::before { margin-inline: auto; }
.vlak-blauw .citaat p { color: var(--wit); }
.vlak-blauw .citaat blockquote::before { background: var(--groen-op-blauw); }

/* Lopende tekst uit haar pagina's */
.proza { max-width: var(--maat-smal); }
.proza > :last-child { margin-bottom: 0; }
.proza h2 { font-size: var(--h3); margin-top: 1.6em; }
.proza h3 { font-size: var(--h4); margin-top: 1.6em; line-height: 1.35; }
.proza h2:first-child, .proza h3:first-child { margin-top: 0; }
.proza a {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  text-decoration-color: var(--groen);
}
.proza a:hover { text-decoration-thickness: 2px; }
.proza ul, .proza ol { margin: 0 0 1em; padding-left: 1.4em; }
.proza li { margin-bottom: .35em; padding-left: .2em; }
.proza ul { list-style: none; padding-left: 1.4em; }
.proza ul > li { position: relative; }
.proza ul > li::before {
  content: ""; position: absolute; left: -1.1em; top: .72em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--groen);
}
.proza ol > li::marker { color: var(--groen-tekst); font-family: var(--letter-kop); font-weight: 500; }
.vlak-blauw .proza, .vlak-blauw .proza a { color: var(--wit); }

/* ── Layout-hulpklassen ──────────────────────────────────── */
.wrap {
  width: 100%;
  max-width: calc(var(--maat) + 2 * var(--rand));
  margin-inline: auto;
  padding-inline: var(--rand);
}
.smal { max-width: var(--maat-smal); }
.sectie { padding-block: var(--sectie); }
.sectie:not([class*="vlak-"]) + .sectie:not([class*="vlak-"]) { padding-top: 0; }
.vlak-zand { background: var(--zand); }
.vlak-zeelicht { background: var(--zeelicht); }
.vlak-blauw { background: var(--blauw); color: var(--wit); }
.vlak-blauw h1, .vlak-blauw h2, .vlak-blauw h3, .vlak-blauw h4 { color: var(--wit); }
.vlak-blauw a { color: var(--wit); }
.vlak-blauw a:hover { color: var(--groen-op-blauw); }
.vlak-wit { background: var(--wit); }

.split { display: grid; gap: 24px; }
.split__titel > :last-child { margin-bottom: 0; }
@media (min-width: 880px) {
  .split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    column-gap: 64px;
  }
  .split__titel { padding-top: 6px; }
}

.knoppenrij { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
/* Beeld in een sectie (niet de paginakop): zachte hoek, vult zijn vak */
.foto { display: block; width: 100%; height: auto; border-radius: var(--radius); }
.foto--vak { height: 100%; object-fit: cover; }

.horizon {
  border: 0;
  border-top: var(--horizon);
  margin: 0 auto;
  width: calc(100% - 2 * var(--rand));
  max-width: var(--maat);
}
/* Een lijst met haarlijnen (rijen, uitklappers, vragen) die vlak boven een
   horizon eindigt, sluit niet ook nog zelf af: één lijn, niet twee. */
.sectie:has(+ .horizon) .uitklappers { border-bottom: 0; }
.sectie:has(+ .horizon) :is(.rij, .vraaglijst__item):last-child { border-bottom: 0; }
@media (min-width: 880px) {
  .sectie:has(+ .horizon) .rijen--2 .rij:nth-last-child(-n+2) { border-bottom: 0; }
}

/* ── 2. Kopbalk ──────────────────────────────────────────── */
.kopbalk {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .97);
  border-bottom: var(--horizon);
  transition: box-shadow var(--overgang);
}
@supports (backdrop-filter: blur(8px)) {
  .kopbalk { background: rgba(255, 255, 255, .9); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); }
}
.kopbalk.is-gescrold { box-shadow: 0 1px 0 rgba(0, 52, 80, .04), 0 10px 30px -18px rgba(0, 52, 80, .35); }
.kopbalk__binnen {
  max-width: calc(var(--maat) + 2 * var(--rand));
  margin-inline: auto;
  padding-inline: var(--rand);
  height: var(--kopbalk);
  display: flex; align-items: center; gap: 24px;
  position: relative;
}
.kopbalk__logo { display: block; flex: none; margin-right: auto; border-radius: 4px; }
.kopbalk__logo img { height: 44px; width: auto; }
@media (min-width: 1080px) { .kopbalk__logo img { height: 62px; } }

.kopbalk__menuknop {
  display: inline-flex; align-items: center; gap: 8px;
  font: 500 16px/1 var(--letter-kop);
  color: var(--blauw);
  background: none;
  border: 1px solid var(--lijn);
  border-radius: 999px;
  padding: 10px 16px 10px 12px;
  min-height: 44px;
  cursor: pointer;
}
.kopbalk__menuknop:hover { border-color: var(--blauw); }
.kopbalk__dicht { display: none; }
.kopbalk__menuknop[aria-expanded="true"] .kopbalk__open { display: none; }
.kopbalk__menuknop[aria-expanded="true"] .kopbalk__dicht { display: block; }
html:not(.js) .kopbalk__menuknop { display: none; }
@media (max-width: 1079.98px) { html:not(.js) .menu__uitklapknop { display: none; } }

.menu, .menu__raster, .menu__lijst { list-style: none; margin: 0; padding: 0; }
.menu li { hyphens: manual; }
.menu__link {
  font-family: var(--letter-kop);
  font-weight: 500;
  color: var(--blauw);
  text-decoration: none;
}
.menu__uitklapknop {
  display: inline-grid; place-items: center;
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--blauw);
  border-radius: 999px;
}
.menu__uitklapknop .icoon { width: 18px; height: 18px; transition: transform var(--overgang); }
.menu__uitklapknop[aria-expanded="true"] .icoon { transform: rotate(180deg); }

/* De lichtgroene schijf uit haar banners, met een blauw lijnicoon */
.schijf {
  display: inline-grid; place-items: center; flex: none;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--groen-zacht);
  color: var(--blauw);
}
.schijf .icoon { width: 20px; height: 20px; }
.schijf--groot { width: 72px; height: 72px; }
.schijf--groot .icoon { width: 32px; height: 32px; stroke-width: 1.5; }
.schijf--blauw { background: rgba(255, 255, 255, .1); color: var(--groen-op-blauw); box-shadow: inset 0 0 0 1px var(--lijn-blauw); }

.menu__moment {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 12px 8px 8px;
  border-radius: 999px;
  font-family: var(--letter-kop); font-weight: 500; font-size: 16px; line-height: 1.2;
  color: var(--blauw); text-decoration: none;
  transition: background-color var(--overgang);
}
.menu__moment:hover { background: var(--zeelicht); color: var(--blauw); }
.menu__moment[aria-current="page"] { background: var(--groen-zacht); }
.menu__lijst a {
  display: block; padding: 10px 16px; border-radius: var(--radius);
  font-family: var(--letter-kop); font-weight: 500; font-size: 16px;
  color: var(--blauw); text-decoration: none;
}
.menu__lijst a:hover { background: var(--zeelicht); color: var(--blauw); }
.menu__lijst a[aria-current="page"] { color: var(--groen-tekst); }
.menu__voet { margin: 16px 0 0; padding-top: 16px; border-top: var(--horizon); }

/* Desktop-menu (vanaf 1080px: vijf items plus knop passen ruim) */
@media (min-width: 1080px) {
  .kopbalk__menuknop { display: none; }
  .kopbalk__paneel { display: flex; align-items: center; gap: 32px; align-self: stretch; }
  .menu { display: flex; align-items: stretch; gap: 28px; height: 100%; }
  .menu__item { position: relative; display: flex; align-items: center; gap: 2px; }
  .menu__link { font-size: 16px; padding-block: 8px; position: relative; }
  .menu__link::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0;
    height: 2px; border-radius: 2px; background: var(--groen);
    transform: scaleX(0); transform-origin: left;
    transition: transform var(--overgang);
  }
  .menu__link:hover { color: var(--blauw); }
  .menu__link:hover::after, .is-actief > .menu__link::after { transform: scaleX(1); }
  .menu__uitklapknop { width: 28px; height: 28px; }
  .menu__uitklapknop:hover { background: var(--zeelicht); }
  .kopbalk__cta { margin: 0; }
  .kopbalk__cta .knop { padding: 12px 22px; }

  .menu__paneel {
    position: absolute; top: 100%; left: -24px;
    background: var(--wit);
    border: var(--horizon);
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 52, 80, .04), 0 24px 48px -16px rgba(0, 52, 80, .22);
    padding: 20px;
    visibility: hidden; opacity: 0; transform: translateY(6px);
    transition: opacity var(--overgang), transform var(--overgang), visibility 0s linear .2s;
  }
  /* brug over de ruimte tussen link en paneel, zodat hover niet wegvalt */
  .menu__paneel::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
  .menu__paneel--raster { width: max-content; padding: 20px 20px 16px; }
  .menu__paneel--lijst { width: 260px; padding: 12px; }
  .menu__raster { display: grid; grid-template-columns: repeat(3, max-content); gap: 4px 12px; }
  .menu__moment { padding-right: 20px; }
  .menu__item--uitklap:hover > .menu__paneel,
  .menu__uitklapknop[aria-expanded="true"] + .menu__paneel,
  html:not(.js) .menu__item--uitklap:focus-within > .menu__paneel {
    visibility: visible; opacity: 1; transform: none;
    transition-delay: 0s;
  }
}

/* Mobiel en tablet: menu als paneel onder de balk */
@media (max-width: 1079.98px) {
  .kopbalk__paneel {
    padding: 8px var(--rand) 32px;
  }
  .js .kopbalk__paneel {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--wit);
    border-bottom: var(--horizon);
    box-shadow: 0 24px 40px -24px rgba(0, 52, 80, .35);
    max-height: calc(100dvh - var(--kopbalk));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .js .kopbalk__paneel.is-open { display: block; }
  /* zonder JS staat het menu open in de balk: dan niet sticky, anders dekt hij de pagina af */
  html:not(.js) .kopbalk { position: relative; }
  html:not(.js) .kopbalk__paneel { padding-inline: 0; }
  html:not(.js) .kopbalk__binnen { height: auto; min-height: var(--kopbalk); flex-wrap: wrap; padding-top: 12px; }
  html:not(.js) .kopbalk__paneel { flex-basis: 100%; }
  .menu__item {
    display: grid; grid-template-columns: 1fr auto; align-items: center;
    border-bottom: var(--horizon);
  }
  .menu__link { font-size: 20px; padding: 14px 0; display: block; }
  .menu__link[aria-current="page"], .is-actief > .menu__link { color: var(--groen-tekst); }
  .menu__uitklapknop { width: 44px; height: 44px; }
  .menu__uitklapknop .icoon { width: 22px; height: 22px; }
  .menu__paneel { grid-column: 1 / -1; padding: 0 0 16px; }
  .js .menu__paneel { display: none; }
  .js .menu__uitklapknop[aria-expanded="true"] + .menu__paneel { display: block; }
  .menu__raster { display: grid; grid-template-columns: 1fr; gap: 2px; }
  .menu__moment { font-size: 17px; padding: 6px 12px 6px 4px; }
  .menu__moment .schijf { width: 36px; height: 36px; }
  .menu__lijst a { padding: 10px 0; font-size: 17px; }
  .menu__voet { border-top: 0; padding-top: 4px; margin-top: 8px; }
  .kopbalk__cta { margin: 24px 0 0; }
  .kopbalk__cta .knop { min-width: min(100%, 320px); }
}
@media (min-width: 560px) and (max-width: 1079.98px) {
  .menu__raster { grid-template-columns: 1fr 1fr; }
}

/* ── 3. Paginakop ────────────────────────────────────────── */
.paginakop {
  --kop-hoogte: 520px;
  /* tekstkolom iets meer dan de helft, zoals haar banners: zo past een kop als
     "Inzicht in je financiële toekomst" of "Samen wonen, samen regelen" op
     twee regels (vanaf 1280 breed), net als in haar financiële-planningbanner */
  --kop-tekst: .52;
  position: relative;
  background: var(--wit);
  border-bottom: var(--horizon);
}
.paginakop__tekst { position: relative; z-index: 1; }
.paginakop__tekst .tweekleur { margin-bottom: 0; }
.paginakop__sub {
  font-size: 19px; line-height: 1.55; color: var(--grijs);
  max-width: 40ch; margin: 20px 0 0;
  hyphens: manual;
}
.paginakop__extra { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.paginakop__img { width: 100%; height: 100%; object-fit: cover; }

/* Kruimelpad boven de kop: kleine Jost-regel in --grijs (6,81 op wit), het
   groene chevronnetje wijst naar de kop eronder. */
.kruimel { margin-bottom: 14px; }
.kruimel__lijst { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.kruimel__item {
  display: inline-flex; align-items: center; gap: 6px;
  font: 500 14px/1.3 var(--letter-kop); letter-spacing: .01em;
  hyphens: manual; margin: 0;
}
.kruimel__link { color: var(--grijs); text-decoration: none; padding-block: 5px; }
.kruimel__link:hover { color: var(--groen-tekst); text-decoration: underline; text-decoration-color: var(--groen); text-underline-offset: 4px; }
.kruimel__teken { width: 14px; height: 14px; stroke-width: 2; color: var(--groen); transform: rotate(-90deg); }

@media (max-width: 879.98px) {
  .paginakop { display: flex; flex-direction: column; }
  .paginakop__beeld { order: -1; height: 280px; overflow: hidden; }
  .paginakop__tekst { padding: 32px var(--rand) 40px; }
  .paginakop__sub { font-size: 18px; margin-top: 16px; }
  .paginakop__extra { margin-top: 24px; }
  /* Haar punt 1: op een telefoon is de paginakop op ELKE pagina even groot,
     kort of lang, home of artikel. 30px is de grootste maat waarop haar
     langste kopwoord ("Arbeidsongeschiktheid", ~297px) op een scherm van
     360px (312px tekstbreedte) heel blijft (haar punt 9). Een lange kop
     loopt gewoon een regel verder door. */
  .paginakop__tekst .tweekleur { font-size: var(--kop-mobiel); }
  /* zachte overgang van beeld naar tekstvlak, zoals de lucht in haar banners */
  .paginakop__img { -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent); mask-image: linear-gradient(to bottom, #000 78%, transparent); }
}

@media (min-width: 880px) {
  .paginakop {
    --binnen: min(var(--maat), 100% - 2 * var(--rand));
    display: grid;
    grid-template-columns:
      [vol-start] minmax(var(--rand), 1fr)
      [tekst-start] calc(var(--binnen) * var(--kop-tekst))
      [beeld-start] calc(var(--binnen) * (1 - var(--kop-tekst)))
      [inhoud-eind] minmax(var(--rand), 1fr) [vol-end];
    min-height: var(--kop-hoogte);
  }
  .paginakop__tekst {
    grid-column: tekst-start / beeld-start;
    grid-row: 1;
    align-self: center;
    padding-block: 56px;
    /* de kop mag iets over het uitlopende deel van het beeld heen, zoals haar
       tekst op de lichte lucht; daar is het beeld nog vrijwel wit */
    margin-right: -72px;
  }
  .paginakop__beeld {
    grid-column: beeld-start / vol-end;
    grid-row: 1;
    height: var(--kop-hoogte);
    position: relative;
  }
  .paginakop__img {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 22%);
    mask-image: linear-gradient(to right, transparent, #000 22%);
  }
  .paginakop__sub { font-size: 20px; margin-top: 24px; }
  .paginakop--kort { --kop-hoogte: 440px; }
  .kruimel { margin-bottom: 18px; }
  .paginakop--portret { --kop-hoogte: 600px; --kop-tekst: .6; }
  .paginakop--portret .paginakop__img {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 26%);
    mask-image: linear-gradient(to right, transparent, #000 26%);
  }
  .tweekleur--lang { font-size: 44px; }
}

/* Iconenrij in de kop (contact, kluis): zoals haar banners */
.iconenrij {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
  width: 100%; max-width: 460px;
}
.iconenrij__item {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  text-align: center;
}
.iconenrij__label {
  font-family: var(--letter-kop); font-weight: 500; font-size: 16px; line-height: 1.3;
  color: var(--blauw);
  hyphens: manual;
}
@media (max-width: 879.98px) {
  .iconenrij .schijf--groot { width: 60px; height: 60px; }
  .iconenrij .schijf--groot .icoon { width: 28px; height: 28px; }
  .iconenrij__label { font-size: 15px; }
}

/* ── 4. Knoppen en links ─────────────────────────────────── */
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--letter-kop);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.25;
  letter-spacing: .01em;
  padding: 14px 24px;
  min-height: 48px;
  border-radius: 999px;
  border: 1.5px solid var(--blauw);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--overgang), border-color var(--overgang), color var(--overgang), box-shadow var(--overgang), transform .08s ease;
  -webkit-tap-highlight-color: transparent;
}
.knop__icoon { width: 20px; height: 20px; margin-left: -4px; }
.knop--primair { background: var(--blauw); color: var(--wit); }
.knop--primair:hover, .knop--primair.is-hover {
  background: var(--blauw-hover); border-color: var(--blauw-hover); color: var(--wit);
  box-shadow: 0 8px 20px -10px rgba(0, 52, 80, .6);
}
.knop--secundair { background: transparent; color: var(--blauw); }
.knop--secundair:hover, .knop--secundair.is-hover { background: var(--zeelicht); color: var(--blauw); }
.knop:active { transform: translateY(1px); box-shadow: none; }
.knop:focus-visible, .knop.is-focus { outline: 3px solid var(--focus); outline-offset: 3px; }
.vlak-blauw .knop--secundair { color: var(--wit); border-color: rgba(255, 255, 255, .7); }
.vlak-blauw .knop--secundair:hover, .vlak-blauw .knop--secundair.is-hover { background: var(--wit); border-color: var(--wit); color: var(--blauw); }
.vlak-blauw .knop--primair { background: var(--wit); border-color: var(--wit); color: var(--blauw); }

.pijllink {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--letter-kop); font-weight: 500; font-size: 16px;
  color: var(--blauw);
  text-decoration: none;
  padding-block: 6px;
  border-bottom: 1.5px solid var(--groen);
  line-height: 1.3;
}
.pijllink .icoon { width: 18px; height: 18px; transition: transform var(--overgang); }
.pijllink:hover { color: var(--groen-tekst); }
.pijllink:hover .icoon { transform: translateX(4px); }
.vlak-blauw .pijllink { color: var(--wit); border-color: var(--groen-op-blauw); }
.vlak-blauw .pijllink:hover { color: var(--groen-op-blauw); }

/* ── 5. Afspraakband ─────────────────────────────────────── */
.afspraakband { padding-block: 88px; position: relative; overflow: hidden; }
.afspraakband__raster { display: grid; gap: 40px; position: relative; }
.afspraakband__kop { margin: 0; font-size: var(--h2); }
.afspraakband__contact { display: grid; gap: 12px; justify-items: start; }
.afspraakband__contact .knop { margin-top: 20px; }
.grotelink {
  display: inline-flex; align-items: center; gap: 16px;
  text-decoration: none;
  font-family: var(--letter-kop); font-weight: 500;
  font-size: 24px; line-height: 1.2;
  padding-block: 6px;
  overflow-wrap: anywhere;
}
.grotelink .schijf { width: 52px; height: 52px; }
.grotelink .schijf .icoon { width: 22px; height: 22px; }
.grotelink__label {
  display: block;
  font-family: var(--letter-tekst); font-weight: 600; font-size: 13px;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
  margin-bottom: 2px;
}
.vlak-blauw .grotelink:hover { color: var(--wit); }
.grotelink:hover .schijf { background: var(--groen-op-blauw); color: var(--blauw); box-shadow: none; }
.grotelink .schijf { transition: background-color var(--overgang), color var(--overgang); }
@media (min-width: 880px) {
  .afspraakband { padding-block: 112px; }
  .afspraakband__raster { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: 64px; }
  .afspraakband__kop { font-size: 44px; line-height: 1.1; }
  .afspraakband__contact { padding-left: 56px; border-left: 1px solid var(--lijn-blauw); }
  .grotelink { font-size: 26px; }
}
/* stille horizon: één heel lichte lijn over de band, zoals de zee op afstand */
.afspraakband::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 36px; height: 1px;
  background: linear-gradient(to right, transparent, var(--lijn-blauw) 20%, var(--lijn-blauw) 80%, transparent);
}

/* ── 6. Zwaai ────────────────────────────────────────────── */
/* Haar golf uit de kluisbanner: een groen en een blauw lint dat van links
   onder naar rechts oploopt. Het vlak onder het blauwe lint heeft de kleur van
   de sectie eronder (--zwaai-onder), zodat de foto langs de golf eindigt. */
.zwaai { --zwaai-onder: var(--wit); position: relative; z-index: 2; height: 48px; margin-top: -48px; pointer-events: none; }
.zwaai svg { width: 100%; height: 100%; }
.zwaai__groen { fill: var(--groen); }
.zwaai__blauw { fill: var(--blauw); }
.zwaai__onder { fill: var(--zwaai-onder); }
.zwaai:has(+ .vlak-zeelicht) { --zwaai-onder: var(--zeelicht); }
.zwaai:has(+ .vlak-zand) { --zwaai-onder: var(--zand); }
.paginakop:has(+ .zwaai) { border-bottom: 0; }
@media (max-width: 879.98px) {
  .zwaai { height: 28px; margin-top: -8px; }
}

/* ── 7. Review ───────────────────────────────────────────── */
.review { margin: 0; max-width: 60ch; position: relative; }
.review__teken {
  width: 36px; height: 36px;
  color: var(--groen);
  fill: var(--groen);
  stroke-width: 0;
  margin-bottom: 20px;
}
.review__tekst { margin: 0; }
.review__tekst p {
  font-size: 18px; line-height: 1.65; color: var(--inkt);
  font-style: normal;
  margin: 0 0 .75em;
}
.review__tekst p:last-child { margin-bottom: 0; }
/* naam en maand lopen als gewone regel door: in een smalle kolom nooit een
   losse regel die met "· datum" begint */
.review__bron {
  display: block; line-height: 1.6;
  margin-top: 20px;
  font-size: var(--klein); color: var(--grijs);
}
.review__bron::before {
  content: ""; display: inline-block; vertical-align: middle;
  width: 24px; height: 1.5px; background: var(--groen); margin-right: 10px;
}
.review__naam { font-family: var(--letter-kop); font-weight: 500; font-size: 16px; color: var(--blauw); }
.review--klein .review__teken { width: 28px; height: 28px; margin-bottom: 14px; }
.review--klein .review__tekst p { font-size: 17px; }
.vlak-blauw .review__tekst p { color: var(--wit); }
.vlak-blauw .review__naam { color: var(--wit); }
.vlak-blauw .review__bron { color: rgba(255, 255, 255, .78); }

/* ── 8. Reviewscore ──────────────────────────────────────── */
.reviewscore { display: flex; align-items: center; gap: 20px; }
.reviewscore__cijfer {
  font-family: var(--letter-kop); font-weight: 500;
  font-size: 64px; line-height: 1; letter-spacing: -0.02em;
  color: var(--blauw);
  margin: 0;
  font-variant-numeric: lining-nums;
}
.reviewscore__rest { display: grid; gap: 6px; padding-left: 20px; border-left: var(--horizon); }
.reviewscore__rest p { margin: 0; }
.reviewscore__sterren { display: flex; gap: 3px; color: var(--groen); }
.ster { width: 20px; height: 20px; fill: var(--groen); stroke-width: 0; }
.reviewscore__bron { font-size: var(--klein); line-height: 1.4; }
.reviewscore__bron a { color: var(--grijs); text-decoration-color: var(--lijn); text-underline-offset: 3px; }
.reviewscore__bron a:hover { color: var(--blauw); text-decoration-color: var(--groen); }
.vlak-blauw .reviewscore__cijfer { color: var(--wit); }
.vlak-blauw .reviewscore__bron a { color: rgba(255, 255, 255, .85); }

/* ── 9. Uitklap ──────────────────────────────────────────── */
.uitklappers { border-bottom: var(--horizon); }
.uitklap { border-top: var(--horizon); }
.uitklap__kop {
  display: flex; align-items: center; gap: 16px;
  list-style: none;
  cursor: pointer;
  padding: 20px 0;
  font-family: var(--letter-kop); font-weight: 500;
  font-size: 20px; line-height: 1.3;
  color: var(--blauw);
  transition: color var(--overgang);
}
.uitklap__kop::-webkit-details-marker { display: none; }
.uitklap__kop::marker { content: ""; }
.uitklap__titel { flex: 1; text-wrap: balance; }
/* Nummerschijf: één badge voor de uitklap, de genummerde rijen en de open
   vragenlijst van het levensmoment-sjabloon. Het cijfer is --groen-tekst
   (5,37 op wit), de ring --groen; op zand en zeelicht wordt de ring ook
   --groen-tekst. */
.uitklap__nr, .lm-nr, .vraaglijst__item::before {
  flex: none;
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  font: 500 15px/1 var(--letter-kop); font-variant-numeric: tabular-nums;
  color: var(--groen-tekst);
  box-shadow: inset 0 0 0 1.5px var(--groen);
}
.vlak-zand .uitklap__nr, .vlak-zeelicht .uitklap__nr,
.vlak-zand .lm-nr, .vlak-zeelicht .lm-nr,
.vlak-zand .vraaglijst__item::before, .vlak-zeelicht .vraaglijst__item::before { box-shadow: inset 0 0 0 1.5px var(--groen-tekst); }
.uitklap__nr, .lm-nr { align-self: flex-start; margin-top: -2px; }
.uitklap__knop {
  flex: none; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--zeelicht);
  color: var(--blauw);
  transition: background-color var(--overgang), transform var(--overgang);
}
.uitklap__knop .icoon { width: 20px; height: 20px; transition: transform var(--overgang); }
.uitklap[open] .uitklap__knop .icoon { transform: rotate(180deg); }
.uitklap[open] .uitklap__knop { background: var(--groen-zacht); }
.uitklap__kop:hover { color: var(--groen-tekst); }
.uitklap__kop:hover .uitklap__knop { background: var(--groen-zacht); }
.uitklap__kop:focus-visible { outline-offset: 4px; }
.uitklap__inhoud { padding: 0 52px 28px 48px; }
.uitklap:not(:has(.uitklap__nr)) .uitklap__inhoud { padding-left: 0; }
.vlak-zeelicht .uitklap__knop { background: var(--wit); }
@media (max-width: 879.98px) {
  .uitklap__kop { font-size: 18px; gap: 12px; padding: 18px 0; }
  .uitklap__inhoud { padding: 0 0 24px 44px; }
}

/* ── 10. Rijen ───────────────────────────────────────────── */
.rijen { list-style: none; margin: 0; padding: 0; border-top: var(--horizon); }
.rij {
  display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 14px; row-gap: 10px;
  align-items: center;
  padding: 24px 0;
  border-bottom: var(--horizon);
}
/* mobiel: icoon en titel op één regel, tekst over de volle breedte */
.rij__tekst { display: contents; }
.rij__tekst .proza { grid-column: 1 / -1; }
.rij__icoon { color: var(--groen); display: flex; }
.rij__icoon .icoon { width: 28px; height: 28px; stroke-width: 1.6; }
.rij__titel { font-size: 20px; line-height: 1.3; margin: 0; letter-spacing: 0; }
.rij__tekst .proza { color: var(--inkt); }
.vlak-zand .rij__icoon, .vlak-zeelicht .rij__icoon { color: var(--groen-tekst); }
@media (min-width: 880px) {
  .rij { grid-template-columns: 56px minmax(0, 1fr); column-gap: 24px; row-gap: 0; align-items: start; padding: 32px 0; }
  .rij__tekst { display: block; }
  .rij__icoon { padding-top: 2px; }
  .rij__titel { margin-bottom: 8px; }
  .rijen--2 { display: grid; grid-template-columns: 1fr 1fr; column-gap: 64px; border-top: 0; }
  .rijen--2 .rij { border-top: var(--horizon); border-bottom: 0; }
  .rijen--2 .rij:nth-last-child(-n+2) { border-bottom: var(--horizon); }
}

/* ── 11. Voet ────────────────────────────────────────────── */
.voet { padding-block: 80px 0; font-size: 16px; line-height: 1.6; }
.voet a { color: var(--blauw); text-decoration: none; }
.voet a:hover { color: var(--groen-tekst); text-decoration: underline; text-decoration-color: var(--groen); text-underline-offset: 4px; }
.voet li { hyphens: manual; }
.voet__raster { display: grid; gap: 40px; padding-bottom: 56px; }
.voet__logo { display: inline-block; margin-bottom: 24px; }
.voet__logo img { height: 72px; width: auto; }
.voet__adres { font-style: normal; display: grid; gap: 2px; color: var(--inkt); }
.voet__adres strong { font-family: var(--letter-kop); font-weight: 500; color: var(--blauw); font-size: 18px; margin-bottom: 6px; }
.voet__adres span { max-width: 30ch; }
.voet__klein { font-size: 14px; color: var(--grijs); margin-top: 8px; }
.voet__kop {
  font-family: var(--letter-tekst); font-weight: 700;
  font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--grijs);
  margin: 0 0 18px;
  line-height: 1.3;
}
.voet__lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.voet__lijst a { font-family: var(--letter-kop); font-weight: 400; font-size: 17px; line-height: 1.35; }
.voet__lijst--2 { grid-template-columns: repeat(2, minmax(0, max-content)); column-gap: 40px; }
/* Aangesloten bij: eigen rij op het lichte vlak, logo's op ware grootte-verhouding */
.voet__aangesloten {
  display: flex; flex-wrap: wrap; align-items: center; gap: 20px 48px;
  padding-block: 32px;
  border-top: 1px solid rgba(0, 52, 80, .1);
}
.voet__aangesloten .voet__kop { margin: 0; }
.voet__logos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 24px 48px; }
.voet__keurmerk { height: 56px; width: auto; mix-blend-mode: multiply; }
.voet__keurmerk--logo-cfp { height: 64px; }
.voet__keurmerk--logo-ffp { height: 60px; }
.voet__onder {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px;
  padding-block: 24px 36px;
  font-size: 14px; color: var(--grijs);
  position: relative;
}
.voet__onder::before {
  content: ""; position: absolute; top: 0; left: var(--rand); right: var(--rand);
  border-top: 1px solid rgba(0, 52, 80, .1);
}
.voet__documenten, .voet__social { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 24px; }
.voet__onder a { color: var(--grijs); }
.voet__onder a:hover { color: var(--blauw); }
@media (min-width: 880px) {
  .voet__raster { grid-template-columns: 5fr 5fr 3fr; gap: 64px; }
}
@media (max-width: 879.98px) {
  .voet { padding-top: 56px; }
  .voet__logos { gap: 20px 32px; }
  .voet__keurmerk { height: 40px; }
  .voet__keurmerk--logo-cfp { height: 50px; }
  .voet__keurmerk--logo-ffp { height: 46px; }
}

/* ── 12. Levensmoment (sjabloon levensmoment.html.j2) ────── */
/* Eén format voor elk onderwerp (haar punt 11): titel in groen links, tekst
   rechts, rijen met haarlijnen. Kleurvlakken alleen per band, nooit per rij.
   Contrast: --groen-tekst op wit 5,37 / zand 4,77 / zeelicht 4,70 (h3 24/21px). */
.proza { overflow-wrap: break-word; }
.proza a { hyphens: manual; }   /* nooit een afbreekstreepje in een link of webadres */
.levensmoment .proza h3, .levensmoment .proza h4 {
  font-size: var(--h4); line-height: 1.35; letter-spacing: 0;
  color: var(--groen-tekst);
  margin: 1.6em 0 .4em;
}
.levensmoment .proza h3:first-child, .levensmoment .proza h4:first-child { margin-top: 0; }
/* Lijst in twee kolommen (lange lijsten, design-audit) en haar vinkjes */
@media (min-width: 880px) {
  .proza ul.lijst-2 { columns: 2; column-gap: 48px; }
  .proza ul.lijst-2 > li { break-inside: avoid; }
}
.proza ul.vink > li::before {
  width: 11px; height: 6px; border-radius: 0; background: none;
  border-left: 2px solid var(--groen); border-bottom: 2px solid var(--groen);
  transform: rotate(-45deg); top: .55em; left: -1.3em;
}

/* Opening: haar kernzin groot in Gilda, intro als smalle leeskolom eronder */
.lm-kern { margin-bottom: 48px; }
.lm-kern p { max-width: 28ch; }
.lm-intro { margin-inline: auto; }
.lm-intro > p:first-child { font-size: 19px; line-height: 1.6; }
@media (min-width: 880px) {
  .lm-kern { margin-bottom: 64px; }
  .lm-kern p { font-size: 36px; line-height: 1.22; }
  .lm-intro > p:first-child { font-size: 20px; }
}

/* De groene titel: vragen, rijen en verder lezen delen hem */
.lm-titel {
  font-family: var(--letter-kop); font-weight: 500;
  font-size: var(--h3); line-height: 1.25; letter-spacing: -0.005em;
  color: var(--groen-tekst);
  margin: 0;
}
.lm-titel--nr { display: flex; align-items: flex-start; gap: 14px; }
/* .lm-nr: zie de nummerschijf bij 9. Uitklap */

/* Band: optionele kop (h2) met intro, daaronder de rijen */
.lm-band__kop { display: grid; gap: 20px; margin-bottom: 40px; }
.lm-band__titel { font-size: var(--h2); margin: 0; max-width: 22ch; }
.lm-band__titel::before {
  content: ""; display: block; width: 48px; height: 2px;
  background: var(--groen); margin-bottom: 20px;
}
.lm-band__intro > :last-child { margin-bottom: 0; }
.lm-band__kop + .lm-rijen { border-top: var(--horizon); padding-top: 40px; }

.lm-rij { padding-block: 32px; }
.lm-rij:first-child { padding-top: 0; }
.lm-rij:last-child { padding-bottom: 0; }
.lm-rij + .lm-rij { border-top: var(--horizon); }
.vlak-zand .lm-rij + .lm-rij, .vlak-zeelicht .lm-rij + .lm-rij,
.vlak-zand .lm-band__kop + .lm-rijen, .vlak-zeelicht .lm-band__kop + .lm-rijen { border-top-color: rgba(0, 52, 80, .13); }
.lm-rij.split { row-gap: 14px; }
/* lijsten in twee kolommen en blokken naast elkaar mogen de hele tekstkolom
   gebruiken; lopende tekst blijft op leesbreedte */
.lm-rij .proza { max-width: none; }
.lm-rij .proza > :not(.lijst-2):not(.naast) { max-width: var(--maat-smal); }

/* Rij met beeld: beeld links (in de titelkolom), titel en tekst rechts.
   Op mobiel staat het beeld gewoon boven de tekst, niets verdwijnt. */
.lm-rij--beeld { display: grid; gap: 24px; }
.lm-rij__beeld { margin: 0; }
.lm-rij__img { aspect-ratio: 3 / 2; object-fit: cover; }
.lm-rij__tekst .lm-titel { margin-bottom: 14px; }

@media (min-width: 880px) {
  .lm-band__kop { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: 64px; margin-bottom: 56px; }
  /* zonder intro loopt de kop over de volle breedte, met intro staat hij in
     de titelkolom en de intro ernaast, op de as van de tekst eronder */
  .lm-band__titel { grid-column: 1 / -1; }
  .lm-band__kop:has(.lm-band__intro) .lm-band__titel { grid-column: 1; }
  .lm-band__intro { grid-column: 2; padding-top: 24px; }
  .lm-band__kop + .lm-rijen { padding-top: 56px; }
  .lm-rij { padding-block: 48px; }
  /* bij lange tekst blijft de titel (of het beeld) in beeld */
  .lm-rij .split__titel, .lm-vragen .split__titel { position: sticky; top: calc(var(--kopbalk) + 32px); align-self: start; }
  /* beeld en tekst op één as: het beeld staat naast de tekst, nooit los eronder (haar punt 9) */
  .lm-rij--beeld { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: 64px; align-items: center; }
  .lm-rij__img { aspect-ratio: 4 / 5; }
}

/* Twee blokken naast elkaar in haar tekst (wie doet wat) */
.proza .naast { display: grid; gap: 8px 40px; margin-top: 1.4em; }
.proza .naast > div > :last-child { margin-bottom: 0; }
@media (min-width: 720px) { .proza .naast { grid-template-columns: 1fr 1fr; } }

/* Vragen: meer dan vier klappen uit (uitklap), anders een open lijst */
.lm-vragen__intro { margin-top: 16px; font-size: 16px; line-height: 1.6; color: var(--inkt); }
.vraaglijst { list-style: none; margin: 0; padding: 0; counter-reset: vraag; border-top: var(--horizon); }
.vraaglijst__item {
  counter-increment: vraag;
  display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 16px;
  padding: 24px 0; border-bottom: var(--horizon);
}
.vraaglijst__item::before { content: counter(vraag); grid-row: 1 / span 2; }   /* nummerschijf, zie 9. Uitklap */
.vraaglijst__vraag { font-size: 20px; line-height: 1.3; color: var(--groen-tekst); margin: 4px 0 8px; letter-spacing: 0; }
.vraaglijst__item .proza { grid-column: 2; }

/* Reviews: score in de titelkolom, één of twee reviews ernaast */
.lm-reviews__raster { display: grid; gap: 40px; }
.lm-reviews__score { align-self: start; }
@media (min-width: 880px) {
  .lm-reviews__raster { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: 64px; }
  .lm-reviews__raster--2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .lm-reviews__raster--2 .lm-reviews__score { grid-column: 1 / -1; }
}
@media (min-width: 1080px) {
  .lm-reviews__raster--2 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lm-reviews__raster--2 .lm-reviews__score { grid-column: auto; }
}

/* Pagina's onder dit levensmoment (levensmoment.html.j2, "ouder"): rij van
   pijllinks met haar eigen subregel eronder; haarlijn tussen de regels.
   Tekst --grijs op wit 6,81. */
.lm-onder__lijst { list-style: none; margin: 0; padding: 0; }
.lm-onder__item { padding: 24px 0; border-bottom: var(--horizon); }
.lm-onder__item:first-child { padding-top: 0; }
.lm-onder__item:last-child { padding-bottom: 0; border-bottom: 0; }
.lm-onder__tekst { margin: 12px 0 0; max-width: var(--maat-smal); color: var(--grijs); }

/* Verder lezen: zie 28. Artikelen (kaart, kaartrij) */
.lm-lezen__kop {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 16px 40px; margin-bottom: 40px;
}

/* ── 13. Home (sjabloon home.html.j2) ────────────────────── */
/* Tweede kopknop wijst omlaag naar de Wegwijzer */
.pijllink--omlaag .icoon { transform: rotate(90deg); }
.pijllink--omlaag:hover .icoon { transform: rotate(90deg) translateX(3px); }

.home-pijlers__kop { margin-bottom: 32px; }
@media (min-width: 880px) { .home-pijlers__kop { margin-bottom: 48px; } }

/* ── 14. Wegwijzer (signatuur, home) ─────────────────────── */
/* Haar houten wegwijzer in de duinen (banner financiële planning), vertaald
   naar vorm: richtingborden aan één paal, afwisselend links en rechts,
   donkerblauw en groen, met haar lijniconen. Eén bord tegelijk open.
   Contrast (berekend 2026-09-24):
     blauw bord: wit 13,07 · icoon --groen-op-blauw 5,88
     groen bord: --blauw-diep 4,93 (tekst en icoon; AA ook onder 18px)
     subregel --grijs op zeelicht 5,96 · paneeltekst --inkt op wit 14,50
   Focus: clip-path knipt outline en box-shadow weg, dus de ring volgt de
   bordvorm via drop-shadow op het bord zelf: 2px zeelicht, dan 3px
   --groen-tekst (4,70 op zeelicht; niet-tekst vraagt >= 3). */
.wegwijzer {
  --bord-h: 52px;      /* hoogte van een bord */
  --pitch: 36px;       /* hoogteverschil tussen twee borden aan de paal */
  --paal: 10px;
  --tip: 22px;         /* diepte van de pijlpunt */
  --paal-top: 48px;    /* paal boven het eerste bord uit */
}
/* De paal staat op het strand: de band heeft geen onderwit, de paal loopt
   door tot de rand, waar de zandkleurige reviewband begint (haar duinbanner:
   lucht, horizon, zand). */
.wegwijzer { padding-bottom: 0; }
.wegwijzer + .reviewband { box-shadow: inset 0 1px 0 rgba(0, 52, 80, .1); }
.wegwijzer__kop { margin: 0; }
.wegwijzer__sub { font-size: 19px; line-height: 1.5; color: var(--grijs); margin: 12px 0 0; max-width: 30ch; hyphens: manual; }

/* Mobiel en tablet: borden onder elkaar, over de paal heen, zoals op haar
   banner; het paneel klapt direct onder zijn bord open. */
.wegwijzer__paal {
  position: relative;
  display: grid; gap: 10px;
  max-width: 520px;
  margin: 32px auto 0;
  padding: var(--paal-top) 0 56px;
}
.wegwijzer__paal::before {
  content: ""; position: absolute; z-index: 0;
  left: 50%; top: 0; bottom: 0; width: var(--paal); margin-left: calc(var(--paal) / -2);
  border-radius: calc(var(--paal) / 2) calc(var(--paal) / 2) 0 0;
  background: var(--paal-kleur);
}

.bord {
  --vlak: var(--blauw); --bord-tekst: var(--wit); --teken: var(--groen-op-blauw);
  --uit: 0px;          /* hoever het bord uitschuift (hover 4px, open 12px) */
  --richting: 1;
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 10px;
  width: calc(100% - 20px);
  height: var(--bord-h);
  color: var(--bord-tekst);
  font: 600 16px/1 var(--letter-kop);
  letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none;
  transition: transform var(--overgang), filter var(--overgang);
  -webkit-tap-highlight-color: transparent;
}
/* Het vlak rekt aan de paalkant evenveel mee als het bord uitschuift: de
   punt en het woord gaan de pijlrichting in, het bord blijft aan de paal. */
.bord::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--vlak);
  transition: left var(--overgang), right var(--overgang);
}
.bord--rechts::before { left: calc(-1 * var(--uit)); }
.bord--links::before { right: calc(-1 * var(--uit)); }
.bord { transform: translateX(calc(var(--richting) * var(--uit))); }
.bord--rechts { justify-self: end; padding: 0 calc(var(--tip) + 12px) 0 16px; }
.bord--rechts::before { clip-path: polygon(0 0, calc(100% - var(--tip)) 0, 100% 50%, calc(100% - var(--tip)) 100%, 0 100%); }
.bord--links { justify-self: start; padding: 0 16px 0 calc(var(--tip) + 12px); --richting: -1; }
.bord--links::before { clip-path: polygon(var(--tip) 0, 100% 0, 100% 100%, var(--tip) 100%, 0 50%); }
.bord--groen { --vlak: var(--groen); --bord-tekst: var(--blauw-diep); --teken: var(--blauw-diep); }
.bord:hover { color: var(--bord-tekst); }
@media (hover: hover) { .bord:hover { --uit: 4px; } }
.bord:active { --uit: 2px; }
.bord__icoon { width: 22px; height: 22px; stroke-width: 1.75; color: var(--teken); }
.bord__label { white-space: nowrap; hyphens: manual; }
.bord[aria-expanded="true"] {
  --uit: 12px;
  filter: drop-shadow(0 8px 12px rgba(0, 52, 80, .28));
}
.bord:focus-visible {
  outline: none;
  filter:
    drop-shadow(2px 0 0 var(--zeelicht)) drop-shadow(-2px 0 0 var(--zeelicht))
    drop-shadow(0 2px 0 var(--zeelicht)) drop-shadow(0 -2px 0 var(--zeelicht))
    drop-shadow(3px 0 0 var(--groen-tekst)) drop-shadow(-3px 0 0 var(--groen-tekst))
    drop-shadow(0 3px 0 var(--groen-tekst)) drop-shadow(0 -3px 0 var(--groen-tekst));
}

/* Het paneel: haar kernvraag in Gilda, twee of drie van haar vragen, lees verder */
.bord__paneel {
  position: relative; z-index: 2;
  background: var(--wit);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 52, 80, .06), 0 20px 44px -22px rgba(0, 52, 80, .4);
  padding: 26px 24px 22px;
  margin: 2px 0 10px;
  --focus: var(--groen-tekst);
  animation: ww-open .32s cubic-bezier(.2, .7, .2, 1);
}
@keyframes ww-open { from { opacity: 0; transform: translateY(-6px); } }
.bord__moment { display: none; }
.bord__vraag {
  font-family: var(--letter-citaat);
  font-size: 25px; line-height: 1.25;
  color: var(--blauw);
  margin: 0 0 18px;
  text-wrap: balance; hyphens: manual;
}
.bord__vraag::before {
  content: ""; display: block; width: 40px; height: 2px;
  background: var(--groen); margin-bottom: 16px;
}
.bord__punten { list-style: none; margin: 0 0 18px; padding: 0; border-top: var(--horizon); }
.bord__punten li {
  position: relative;
  padding: 11px 0 11px 22px;
  border-bottom: var(--horizon);
  font-size: 17px; line-height: 1.5; color: var(--inkt);
}
.bord__punten li::before {
  content: ""; position: absolute; left: 2px; top: 1.15em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--groen);
}

@media (prefers-reduced-motion: reduce) {
  .bord:hover, .bord:active { --uit: 0px; }
  .bord__paneel { animation: none; }
}

/* Mobiel: blauw en groen om en om, net als de richting */
@media (max-width: 1079.98px) {
  .bord:nth-of-type(odd) { --vlak: var(--blauw); --bord-tekst: var(--wit); --teken: var(--groen-op-blauw); }
  .bord:nth-of-type(even) { --vlak: var(--groen); --bord-tekst: var(--blauw-diep); --teken: var(--blauw-diep); }
}
/* Het langste woord (ARBEIDSONGESCHIKTHEID) moet op elk scherm op zijn bord
   passen, zonder afbreken: gemeten 236px bij 16px, 215 bij 15px, 195 bij
   14px, 178 bij 13px. */
@media (max-width: 479.98px) { .bord { font-size: 15px; letter-spacing: .06em; } }
@media (max-width: 384.98px) { .bord { font-size: 14px; letter-spacing: .04em; } }
@media (max-width: 349.98px) {
  .bord { font-size: 13px; letter-spacing: .03em; }
  .bord__icoon { display: none; }
}

/* Tablet: kop links, de gestapelde wegwijzer rechts ernaast */
@media (min-width: 700px) and (max-width: 1079.98px) {
  .wegwijzer__raster {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
    column-gap: 48px; align-items: start;
  }
  .wegwijzer__intro { position: sticky; top: calc(var(--kopbalk) + 32px); padding-top: 24px; }
  .wegwijzer__paal { margin: 0; max-width: none; }
}

/* Desktop: de borden om de paal (rechts), kop en paneel links, zoals haar
   banner: tekst op het lichte deel links, de wegwijzer rechts. De paal is een
   raster-item (::after); elk bord staat op zijn eigen hoogte via --i. */
@media (min-width: 1080px) {
  .wegwijzer__raster {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    grid-template-rows: auto 1fr;
    column-gap: 56px;
  }
  .wegwijzer__intro { grid-column: 1; grid-row: 1; padding-top: 20px; }
  .wegwijzer__kop { font-size: 44px; line-height: 1.1; }
  .wegwijzer__sub { font-size: 20px; margin-top: 16px; }
  .wegwijzer__paal { display: contents; }
  .wegwijzer__paal::before { content: none; }
  /* de paal: minstens tot onder het laatste bord plus een stuk voet, en
     altijd tot de onderrand van de band */
  .wegwijzer__raster::after {
    content: ""; grid-column: 2; grid-row: 1 / span 2;
    justify-self: center; align-self: stretch;
    width: var(--paal);
    min-height: calc(var(--paal-top) + (var(--n, 12) - 1) * var(--pitch) + var(--bord-h) + 96px);
    border-radius: calc(var(--paal) / 2) calc(var(--paal) / 2) 0 0;
    background: var(--paal-kleur);
  }
  .bord {
    grid-column: 2; grid-row: 1 / span 2; align-self: start;
    width: calc(50% - var(--paal) / 2 + 2px);
    margin-top: calc(var(--paal-top) + var(--i) * var(--pitch));
    gap: 12px;
    font-size: 14px; letter-spacing: .05em;
  }
  .bord--rechts { padding: 0 calc(var(--tip) + 16px) 0 20px; }
  .bord--links { padding: 0 20px 0 calc(var(--tip) + 16px); }
  /* het icoon zit aan de paal, het woord wijst mee */
  .bord--links { flex-direction: row-reverse; justify-content: flex-start; }
  .bord__paneel {
    grid-column: 1; grid-row: 2; align-self: start;
    position: sticky; top: calc(var(--kopbalk) + 32px);
    margin: 36px 0 72px;
    padding: 30px 36px 30px;
    max-width: 480px;
  }
  .bord__moment {
    display: inline-flex; align-items: center; gap: 10px;
    margin: 0 0 20px;
    font: 600 13px/1 var(--letter-kop); letter-spacing: .1em; text-transform: uppercase;
    color: var(--wit);
    background: var(--blauw);
    padding: 8px 26px 8px 12px;
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%);
  }
  .bord__moment .icoon { width: 16px; height: 16px; color: var(--groen-op-blauw); }
  .bord__paneel--groen .bord__moment { background: var(--groen); color: var(--blauw-diep); }
  .bord__paneel--groen .bord__moment .icoon { color: var(--blauw-diep); }
  .bord__vraag { font-size: 26px; line-height: 1.22; }
  .bord__vraag::before { display: none; }
}
@media (min-width: 1280px) {
  .wegwijzer__raster { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 72px; }
  .bord { font-size: 16px; letter-spacing: .08em; }
  .bord__vraag { font-size: 30px; }
}

/* ── 15. Reviewband (home) ───────────────────────────────── */
/* Score links, citaten rechts in een rij met scroll-snap, zonder autoplay.
   De rij loopt op desktop door tot de rand van het venster. */
.reviewband__raster { display: grid; gap: 28px; }
.reviewband__kop h2 { margin: 0 0 24px; }
.reviewband__navigatie { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 28px; }
.reviewband__knoppen { display: flex; gap: 10px; }
html:not(.js) .reviewband__knoppen, .reviewband__knoppen[hidden] { display: none; }
.reviewband__knop {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: transparent; color: var(--blauw);
  border: 1.5px solid var(--blauw);
  cursor: pointer;
  transition: background-color var(--overgang), color var(--overgang), opacity var(--overgang);
}
.reviewband__knop .icoon { width: 20px; height: 20px; }
.reviewband__terug { transform: rotate(180deg); }
.reviewband__knop:hover:not(:disabled) { background: var(--blauw); color: var(--wit); }
.reviewband__knop:active:not(:disabled) { transform: translateY(1px); }
.reviewband__knop:disabled { opacity: .3; cursor: default; }
.reviewband__rij {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  margin-inline: calc(-1 * var(--rand));
  padding: 6px var(--rand);
  scroll-padding-inline: var(--rand);
}
.reviewband__rij::-webkit-scrollbar { display: none; }
html:not(.js) .reviewband__rij { scrollbar-width: thin; }
.reviewband__rij:focus-visible { outline-offset: -3px; }
.reviewband__lijst { list-style: none; margin: 0; padding: 0; display: flex; }
.reviewband__item {
  flex: 0 0 min(84%, 340px);
  scroll-snap-align: start;
  padding-right: 28px;
}
.reviewband__item + .reviewband__item { border-left: 1px solid rgba(0, 52, 80, .13); padding-left: 28px; }
.reviewband__item .review__tekst p { font-size: 17px; }
/* naam en datum lopen als gewone regel door, nooit een los "· datum" */
.reviewband__item .review__bron { display: block; line-height: 1.6; }
.reviewband__item .review__bron::before { display: inline-block; vertical-align: middle; margin-right: 10px; }
@media (min-width: 880px) {
  .reviewband__raster { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 64px; align-items: start; }
  .reviewband__kop { padding-top: 6px; }
  .reviewband__rij {
    margin-inline: 0 calc((100vw - min(var(--maat), 100vw - 2 * var(--rand))) / -2);
    padding-inline: 0 var(--rand);
    scroll-padding-inline: 0;
  }
  .reviewband__item { flex-basis: 360px; padding-right: 40px; }
  .reviewband__item + .reviewband__item { padding-left: 40px; }
}

/* ── 16. Suzanne-intro (home) ────────────────────────────── */
.home-suzanne__raster { display: grid; gap: 32px; }
.home-suzanne__beeld { margin: 0; }
.home-suzanne__img { aspect-ratio: 4 / 3; object-fit: cover; }
.home-suzanne__naam {
  font-size: 20px; line-height: 1.3; letter-spacing: 0;
  color: var(--groen-tekst);
  margin: 0 0 18px;
}
.home-suzanne__motto { margin-bottom: 28px; }
.home-suzanne__motto blockquote::before { display: none; }
.home-suzanne__motto p { max-width: none; }
.home-suzanne__knop { margin: 32px 0 0; }
@media (min-width: 880px) {
  .home-suzanne__raster { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 88px; align-items: center; }
  .home-suzanne__img { aspect-ratio: 4 / 5; }
  .home-suzanne__motto p { font-size: 40px; line-height: 1.15; }
}

/* ── 17. Werkwijze compact en Actueel (home) ─────────────── */
.home-werkwijze__kop, .home-actueel__kop {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 16px 40px; margin-bottom: 40px;
}
.home-werkwijze__kop .tweekleur, .home-actueel__kop h2 { margin: 0; }
.stations { list-style: none; margin: 0; padding: 0; display: grid; position: relative; }
.stations::before {
  content: ""; position: absolute; left: 19px; top: 20px; bottom: 20px; width: 2px;
  background: var(--lijn);
}
.station__link { display: flex; align-items: center; gap: 16px; padding: 10px 0; text-decoration: none; }
/* de cirkels kleuren van licht naar donker, zoals op de werkwijzepagina en in
   haar grafiek (stapkleur-N, zie 20); de witte rand houdt de lijn los */
.station__nr {
  position: relative; flex: none;
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--stap-vlak, var(--wit));
  box-shadow: var(--stap-ring, inset 0 0 0 1.5px var(--groen)), 0 0 0 4px var(--wit);
  font: 500 16px/1 var(--letter-kop); color: var(--stap-cijfer, var(--groen-tekst));
  transition: box-shadow var(--overgang), transform var(--overgang);
}
.station__titel { font: 500 19px/1.3 var(--letter-kop); color: var(--blauw); hyphens: manual; }
.station__link:hover .station__nr {
  box-shadow: var(--stap-ring, inset 0 0 0 1.5px var(--groen)), 0 0 0 4px var(--wit), 0 0 0 6px var(--stap-halo, var(--groen));
}
.station__link:hover .station__titel { color: var(--groen-tekst); }
@media (min-width: 880px) {
  .stations { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
  .stations::before { left: 20px; right: calc(20% - 4px); top: 19px; bottom: auto; width: auto; height: 2px; }
  .station__link { flex-direction: column; align-items: flex-start; gap: 14px; padding: 0; }
}

/* De drie nieuwste artikelen: kaartrij, zie 28. Artikelen */

/* ── 18. Aangesloten bij (home) ──────────────────────────── */
.aangesloten { padding-block: 0 64px; }
.aangesloten__raster {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 24px 48px;
  padding-top: 56px;
}
/* horizon op de breedte van de inhoud, niet van de marge */
.aangesloten__raster::before { content: ""; position: absolute; top: 0; left: var(--rand); right: var(--rand); border-top: var(--horizon); }
/* na een gekleurd vlak (Actueel) is de kleurwissel de scheiding */
[class*="vlak-"] + .aangesloten { padding-top: 16px; }
[class*="vlak-"] + .aangesloten .aangesloten__raster::before { content: none; }
/* direct na de pijlers is hun laatste haarlijn al de scheiding */
.home-pijlers + .aangesloten .aangesloten__raster { padding-top: 0; }
.home-pijlers + .aangesloten .aangesloten__raster::before { content: none; }
.aangesloten__kop {
  font: 700 13px/1.3 var(--letter-tekst); letter-spacing: .12em; text-transform: uppercase;
  color: var(--grijs); margin: 0;
}
.aangesloten__logos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 24px 56px; }
.aangesloten__logo { height: 60px; width: auto; }
.aangesloten__logo--logo-cfp { height: 72px; }
.aangesloten__logo--logo-ffp { height: 64px; }
@media (max-width: 879.98px) {
  .aangesloten { padding-block: 0 48px; }
  .aangesloten__raster { padding-top: 40px; }
  .aangesloten__logos { gap: 16px 28px; }
  .aangesloten__logo { height: 36px; }
  .aangesloten__logo--logo-cfp { height: 48px; }
  .aangesloten__logo--logo-ffp { height: 42px; }
}

/* ── 19. Financiële planning (sjabloon financiele-planning.html.j2) ── */
/* Haar tekst links, haar cirkelmodel rechts (zoals op haar pagina); het model
   blijft in beeld zolang je leest. Contrast in het model: --blauw-diep op
   --groen 4,93 · wit op --groen-tekst 5,37 · wit op --blauw 13,07. */
.fp-intro__raster { display: grid; gap: 48px; }
.fp-intro__kop { margin-bottom: 24px; }
.fp-intro__proza > p:first-child { font-size: 20px; line-height: 1.6; color: var(--blauw); }
.fp-intro__knop { margin: 36px 0 0; }
.fp-model { margin: 0 auto; width: 100%; max-width: 380px; }
.fp-model__svg { width: 100%; height: auto; overflow: visible; }
.fp-model__laag--1 { fill: var(--groen); }
.fp-model__laag--2 { fill: var(--groen-tekst); }
.fp-model__laag--3 { fill: var(--blauw); }
.fp-model__label { font-family: var(--letter-kop); font-weight: 500; font-size: 30px; letter-spacing: .005em; }
.fp-model__label--1 { fill: var(--blauw-diep); }
.fp-model__label--2, .fp-model__label--3 { fill: var(--wit); }
@media (min-width: 880px) {
  .fp-intro__raster { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 80px; align-items: start; }
  .fp-intro__proza > p:first-child { font-size: 22px; }
  .fp-model { position: sticky; top: calc(var(--kopbalk) + 40px); max-width: none; margin-top: 8px; }
}

/* Persoonlijke financiële begeleiding: term en uitleg, in twee kolommen */
.begeleiding { margin: 0; display: grid; border-top: var(--horizon); }
.begeleiding__item { padding: 22px 0; border-bottom: var(--horizon); }
.begeleiding__term {
  font: 500 19px/1.3 var(--letter-kop); color: var(--blauw);
  margin: 0 0 6px; hyphens: manual;
}
.begeleiding__tekst { margin: 0; color: var(--inkt); font-size: 17px; line-height: 1.6; }
@media (min-width: 880px) {
  .begeleiding { grid-template-columns: 1fr 1fr; column-gap: 48px; border-top: 0; }
  .begeleiding__item { border-top: var(--horizon); border-bottom: 0; padding: 24px 0 28px; }
  .begeleiding__item:nth-last-child(-n+2) { border-bottom: var(--horizon); }
  .fp-begeleiding__kop { position: sticky; top: calc(var(--kopbalk) + 32px); }
}

/* Alle levensmomenten: icoon, naam en haar kernzin, als rijen met haarlijnen */
.fp-momenten__kop { display: grid; gap: 12px; margin-bottom: 40px; }
.fp-momenten__kop h2 { margin: 0; }
.fp-momenten__intro { margin: 0; font-size: 19px; color: var(--grijs); max-width: 40ch; }
.momenten { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid rgba(0, 52, 80, .13); }
.momenten__item { border-bottom: 1px solid rgba(0, 52, 80, .13); }
.moment {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 16px;
  padding: 22px 0;
  text-decoration: none;
}
.moment__schijf { width: 48px; height: 48px; background: var(--wit); }
.moment__schijf .icoon { width: 22px; height: 22px; }
.moment__tekst { display: grid; gap: 4px; padding-top: 2px; }
.moment__naam { font: 500 20px/1.3 var(--letter-kop); color: var(--blauw); hyphens: manual; }
.moment__kern { font-size: 16px; line-height: 1.5; color: var(--grijs); text-wrap: pretty; }
.moment__pijl { margin-top: 12px; color: var(--groen-tekst); transition: transform var(--overgang); }
.moment:hover .moment__naam { color: var(--groen-tekst); }
.moment:hover .moment__schijf { background: var(--groen-zacht); }
.moment:hover .moment__pijl { transform: translateX(4px); }
@media (min-width: 880px) {
  .fp-momenten__kop { gap: 16px; margin-bottom: 48px; }
  .fp-momenten__intro { font-size: 20px; }
  .momenten { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 48px; border-top: 0; }
  .momenten__item { border-top: 1px solid rgba(0, 52, 80, .13); border-bottom: 0; }
  .momenten__item:nth-last-child(-n+3) { border-bottom: 1px solid rgba(0, 52, 80, .13); }
  .moment { padding: 28px 0 30px; }
}

/* ── 20. Stapkleuren (werkwijze, home) ───────────────────── */
/* Haar grafiek "Van inzicht naar vrijheid": vijf cirkels die van licht naar
   donker kleuren, van groen naar blauw. Contrast van het cijfer (berekend
   2026-09-24): 1 --blauw op --groen-zacht 10,98 · 2 --blauw-diep op --groen
   4,93 · 3 wit op --groen-tekst 5,37 · 4 wit op --blauw-zee 9,63 · 5 wit op
   --blauw 13,07. --blauw-zee #0e4b5c ligt tussen haar groen en blauw in,
   zoals de vierde cirkel in haar grafiek (geen nieuwe merkkleur).
   Cirkel 1 is bijna zo licht als zeelicht (1,04): een ring in --groen-tekst
   (4,70 op zeelicht) houdt hem zichtbaar. */
:root { --blauw-zee: #0e4b5c; }
.stapkleur-1 { --stap-vlak: var(--groen-zacht); --stap-cijfer: var(--blauw); }
.stapkleur-2 { --stap-vlak: var(--groen); --stap-cijfer: var(--blauw-diep); }
.stapkleur-3 { --stap-vlak: var(--groen-tekst); --stap-cijfer: var(--wit); }
.stapkleur-4 { --stap-vlak: var(--blauw-zee); --stap-cijfer: var(--wit); }
.stapkleur-5 { --stap-vlak: var(--blauw); --stap-cijfer: var(--wit); }
[class*="stapkleur-"] { --stap-ring: inset 0 0 0 0 transparent; --stap-halo: var(--stap-vlak); }
.stapkleur-1 { --stap-ring: inset 0 0 0 1.5px var(--groen-tekst); --stap-halo: var(--groen-tekst); }

/* ── 21. Werkwijze (sjabloon werkwijze.html.j2) ─────────────── */
/* Opening: haar intro naast haar kernvragen, die in Gilda, tussen haarlijnen */
.ww-opening__raster { display: grid; gap: 48px; }
.ww-opening__intro > p:first-child { font-size: 20px; line-height: 1.6; color: var(--blauw); hyphens: manual; }
.ww-kernvragen__kop {
  font: 500 19px/1.35 var(--letter-kop); letter-spacing: 0;
  color: var(--groen-tekst);
  margin: 0 0 12px;
}
.ww-kernvragen__lijst { list-style: none; margin: 0 0 32px; padding: 0; border-bottom: var(--horizon); }
.ww-kernvragen__vraag {
  font-family: var(--letter-citaat); font-size: 27px; line-height: 1.22;
  color: var(--blauw);
  padding: 18px 0;
  border-top: var(--horizon);
  margin: 0;
  hyphens: manual; text-wrap: balance;
}
@media (min-width: 880px) {
  .ww-opening__raster { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 88px; align-items: start; }
  .ww-opening__intro { padding-top: 40px; }
  .ww-opening__intro > p:first-child { font-size: 22px; line-height: 1.55; }
  .ww-kernvragen__kop { font-size: 20px; margin-bottom: 16px; }
  .ww-kernvragen__vraag { font-size: 38px; line-height: 1.18; padding: 24px 0; }
}

/* Het stappenpad. Zonder JS en op mobiel: een verticaal pad, de nummers op
   één as met een lijn ertussen, de titels er recht naast (haar punt 4).
   Met JS vanaf 880px: stations bovenaan, één paneel eronder. */
.stappenpad { --nr: 44px; --pad-lijn: rgba(0, 52, 80, .2); --actief: 0; }
.stappenpad__kop { margin: 0 0 28px; max-width: 18ch; }
.stappenpad__stations { display: none; }

.stap { position: relative; }
/* het stuk lijn van dit nummer naar het volgende (loopt door langs de open tekst) */
.stap::before {
  content: ""; position: absolute; z-index: 0;
  left: calc(var(--nr) / 2 - 1px); width: 2px;
  top: calc(16px + var(--nr) / 2); bottom: calc(-16px - var(--nr) / 2);
  background: var(--pad-lijn);
}
.stap:last-child::before { content: none; }
.stap__kop {
  position: relative;
  display: grid; grid-template-columns: var(--nr) minmax(0, 1fr) 36px; align-items: center; column-gap: 16px;
  padding: 16px 0;
  list-style: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.stap__kop::-webkit-details-marker { display: none; }
.stap__kop::marker { content: ""; }
.stap__kop:focus-visible { outline-offset: 2px; border-radius: 8px; }
/* haarlijn tussen de stappen, alleen in de tekstkolom: de as blijft vrij */
.stap + .stap .stap__kop::before {
  content: ""; position: absolute; top: 0; right: 0; left: calc(var(--nr) + 16px);
  border-top: 1px solid rgba(0, 52, 80, .13);
}
.stap__nr {
  position: relative; z-index: 1;
  width: var(--nr); height: var(--nr); border-radius: 50%;
  display: grid; place-items: center;
  background: var(--stap-vlak); color: var(--stap-cijfer);
  box-shadow: var(--stap-ring), 0 0 0 5px var(--zeelicht);
  font: 500 18px/1 var(--letter-kop); font-variant-numeric: tabular-nums;
}
.stap__titel {
  margin: 0;
  font: 500 20px/1.3 var(--letter-kop); letter-spacing: 0;
  color: var(--blauw);
  transition: color var(--overgang);
}
.stap__knop {
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--wit); color: var(--blauw);
  transition: background-color var(--overgang);
}
.stap__knop .icoon { width: 20px; height: 20px; transition: transform var(--overgang); }
.stap[open] .stap__knop .icoon { transform: rotate(180deg); }
.stap[open] .stap__knop { background: var(--groen-zacht); }
/* alleen met een muis: op een telefoon blijft :hover na een tik hangen */
@media (hover: hover) {
  .stap__kop:hover .stap__titel { color: var(--groen-tekst); }
  .stap__kop:hover .stap__knop { background: var(--groen-zacht); }
}

.stap__inhoud { padding: 4px 0 40px calc(var(--nr) + 16px); }
.stap__label, .stap__paneelkop { display: none; }
.stap__proza { max-width: var(--maat-smal); }
.stap__proza h4 { font-size: var(--h4); line-height: 1.35; color: var(--groen-tekst); margin: 1.5em 0 .4em; letter-spacing: 0; }
.stap__proza h4:first-child { margin-top: 0; }
.stap__aanloop { font: 500 21px/1.4 var(--letter-kop); color: var(--blauw); margin-bottom: .6em; }
/* "Over keuzes. Over ruimte. Over rust." in Gilda, zoals haar motto's */
.stap__slot {
  font-family: var(--letter-citaat); font-size: 26px; line-height: 1.3;
  color: var(--blauw); hyphens: manual;
  padding-left: 20px; border-left: 2px solid var(--groen);
  margin-top: 1.2em;
}
.proza ul.stap__vragen { padding-left: 1.2em; }
.stap__verder { margin: 32px 0 0; }
.stap__zij { display: grid; gap: 28px; margin-top: 36px; padding-top: 32px; border-top: 1px solid rgba(0, 52, 80, .13); align-content: start; }
.stap__beeld { margin: 0; }
.stap__beeld { max-width: 320px; }
.stap__img { aspect-ratio: 4 / 5; object-fit: cover; }
.stap__link { margin: 0; }
.stap__model { max-width: 280px; margin: 0; position: static; }
.stap__zij .review { max-width: 52ch; }


@media (max-width: 879.98px) {
  .stap__titel { font-size: 19px; }
  .stap__aanloop { font-size: 19px; }
  .stap__slot { font-size: 23px; }
}

/* Desktop zonder JS: hetzelfde pad, maar de zijkolom naast de tekst */
@media (min-width: 880px) {
  .stappenpad { --nr: 52px; }
  .stappenpad__kop { margin-bottom: 44px; }
  .stap__titel { font-size: 22px; }
  .stap__nr { font-size: 20px; }
  .stap__inhoud { padding: 8px 0 48px calc(var(--nr) + 20px); }
  .stap__kop { column-gap: 20px; }
  .stap + .stap .stap__kop::before { left: calc(var(--nr) + 20px); }
  .stap__inhoud--zij { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); grid-template-rows: auto 1fr; column-gap: 64px; }
  .stap__inhoud--zij .stap__hoofd, .stap__inhoud--zij .stap__verder { grid-column: 1; }
  .stap__inhoud--zij .stap__zij { grid-column: 2; grid-row: 1 / span 2; }
  .stap__inhoud--zij .stap__verder { align-self: start; }
  .stap__inhoud--zij .stap__zij { margin-top: 0; padding-top: 0; border-top: 0; }
  .proza ul.stap__vragen { columns: 2; column-gap: 40px; }
  .proza ul.stap__vragen > li { break-inside: avoid; font-size: 17px; }
}

/* Met JS vanaf 880px: stations bovenaan, zoals haar grafiek; het paneel
   eronder wijst met een punt naar het gekozen station. */
@media (min-width: 880px) {
  .js .stappenpad__stations {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    list-style: none; margin: 0; padding: 0;
  }
  .stappenpad__halte { position: relative; display: flex; justify-content: center; }
  /* verbindingslijn met een pijlpunt, van cirkel naar cirkel */
  .stappenpad__halte:not(:last-child)::after {
    content: ""; position: absolute; top: 27px; height: 2px;
    left: calc(50% + 44px); right: calc(-50% + 46px);
    background: var(--pad-lijn);
  }
  .stappenpad__halte:not(:last-child)::before {
    content: ""; position: absolute; top: 23.5px; right: calc(-50% + 45px);
    width: 9px; height: 9px;
    border-top: 2px solid rgba(0, 52, 80, .38); border-right: 2px solid rgba(0, 52, 80, .38);
    transform: rotate(45deg);
  }
  .stappenpad__station {
    display: flex; flex-direction: column; align-items: center; gap: 16px;
    width: 100%; padding: 0 12px 2px;
    background: none; border: 0; border-radius: 10px;
    font: inherit; color: var(--blauw); text-align: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .stappenpad__station:focus-visible { outline-offset: 6px; }
  .stappenpad__nr {
    width: 56px; height: 56px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--stap-vlak); color: var(--stap-cijfer);
    box-shadow: var(--stap-ring);
    font: 500 22px/1 var(--letter-kop); font-variant-numeric: tabular-nums;
    transition: transform var(--overgang), box-shadow var(--overgang);
  }
  .stappenpad__titel {
    font: 500 18px/1.3 var(--letter-kop);
    max-width: 14ch; text-wrap: balance; hyphens: manual;
    transition: color var(--overgang);
  }
  /* het streepje onder elke stap uit haar grafiek, voor alle vijf op één
     hoogte (onderaan de knop); groen en breder bij de gekozen stap */
  .stappenpad__station::after {
    content: ""; display: block; flex: none; width: 24px; height: 2px; border-radius: 2px;
    margin-top: auto;
    background: rgba(0, 52, 80, .22);
    transition: width var(--overgang), background-color var(--overgang);
  }
  @media (hover: hover) {
    .stappenpad__station:hover .stappenpad__nr { transform: translateY(-3px); }
    .stappenpad__station:hover .stappenpad__titel { color: var(--groen-tekst); }
  }
  .stappenpad__station:active .stappenpad__nr { transform: translateY(0); }
  .stappenpad__station[aria-current="step"] .stappenpad__nr {
    box-shadow: var(--stap-ring), 0 0 0 5px var(--zeelicht), 0 0 0 7px var(--stap-halo), 0 12px 24px -10px rgba(0, 52, 80, .55);
  }
  .stappenpad__station[aria-current="step"] .stappenpad__titel { color: var(--blauw); }
  .stappenpad__station[aria-current="step"]::after { width: 56px; background: var(--groen); }

  .js .stappenpad__stappen { margin-top: 32px; }
  .js .stap:not([open]) { display: none; }
  /* vaste ondergrens van het paneel (site.js meet --paneel-min: het hoogste
     paneel, begrensd op wat er onder de stations in het venster past) */
  .js .stap { min-height: var(--paneel-min, 0); }
  .js .stap::before, .js .stap__kop { display: none; }
  .js .stap {
    background: var(--wit);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(0, 52, 80, .06), 0 28px 56px -32px rgba(0, 52, 80, .4);
  }
  /* de punt naar het gekozen station (--actief zet site.js, 0 = stap 1) */
  .js .stap::after {
    content: ""; position: absolute; top: -11px;
    left: calc((var(--actief) * 2 + 1) * 10% - 13px);
    width: 26px; height: 12px;
    background: var(--wit);
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
  }
  .js .stap__inhoud { padding: 56px 64px 60px; }
  .js .stap__inhoud--zij { column-gap: 72px; }
  .js .stap__label {
    display: flex; align-items: center; gap: 10px;
    margin: 0 0 12px;
    font: 600 13px/1 var(--letter-kop); letter-spacing: .14em; text-transform: uppercase;
    color: var(--groen-tekst);
  }
  .js .stap__label::before {
    content: ""; width: 12px; height: 12px; border-radius: 50%;
    background: var(--stap-vlak); box-shadow: var(--stap-ring);
  }
  .js .stap__paneelkop { display: block; font-size: var(--h2); margin: 0 0 28px; }
  .js .stap__zij { padding-left: 40px; border-left: 1px solid var(--lijn); }
}
@media (prefers-reduced-motion: reduce) {
  .stappenpad__station:hover .stappenpad__nr { transform: none; }
}

/* ── 22. Tarieven (sjabloon tarieven.html.j2) ─────────────────── */
/* Haar punt 15: kleurblokken, tekst verdeeld, geen opsommingstekens.
   Contrast: --blauw op wit 13,07 (bedragen) · --inkt op wit 14,50 ·
   --grijs op wit 6,81 (subregel) · --grijs op zeelicht 5,96 ·
   --groen-tekst op zand 4,77 (titels) · iconen --groen op wit 3,03 (niet-tekst). */
.tarief-btw {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0 0 24px;
  font: 500 16px/1.4 var(--letter-kop); color: var(--blauw);
  hyphens: manual;
}
.tarief-btw__icoon { width: 20px; height: 20px; color: var(--groen-tekst); }

.prijzen {
  display: grid; gap: 16px;
  grid-template-areas: "advies" "actie" "update" "toeslag";
}
.prijzen__advies { grid-area: advies; }
.prijzen__actie { grid-area: actie; }
.prijzen__update { grid-area: update; }
.prijzen__toeslag { grid-area: toeslag; }
@media (min-width: 720px) {
  .prijzen { grid-template-columns: 1fr 1fr; grid-template-areas: "advies update" "actie toeslag"; gap: 20px; }
}
@media (min-width: 1080px) {
  .prijzen {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto 1fr;
    grid-template-areas: "advies actie update" "advies toeslag update";
    gap: 24px;
  }
}
.prijs {
  --prijs-kleur: var(--blauw);
  height: 100%;
  background: var(--wit);
  border-radius: 10px;
  border-top: 5px solid var(--prijs-kleur);
  padding: 26px 24px 14px;
  box-shadow: 0 1px 2px rgba(0, 52, 80, .05), 0 16px 32px -24px rgba(0, 52, 80, .3);
}
.prijs--groen { --prijs-kleur: var(--groen); }
.prijs__titel { font-size: 22px; line-height: 1.25; margin: 0; letter-spacing: -0.005em; }
.prijs__sub { margin: 8px 0 0; font-size: 15px; line-height: 1.45; color: var(--grijs); hyphens: manual; }
.prijs__rijen { margin: 22px 0 0; }
.prijs__rij {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px 16px;
  padding: 13px 0;
  border-top: 1px solid var(--lijn);
}
.prijs__situatie { margin: 0; font-size: 16px; line-height: 1.4; color: var(--inkt); hyphens: manual; }
.prijs__bedrag {
  margin: 0; flex: none;
  font: 500 20px/1.2 var(--letter-kop); color: var(--blauw);
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}
.prijs__bedrag--tekst { font-size: 16px; font-weight: 400; color: var(--grijs); }
/* Actiegesprek: twee bedragen, groot, het bedrag voorop */
.prijs--groot .prijs__rij { justify-content: flex-start; align-items: baseline; }
.prijs--groot .prijs__bedrag { order: -1; font-size: 34px; letter-spacing: -0.01em; }
.prijs--groot .prijs__situatie { color: var(--grijs); }
/* de rij zonder situatie: zijn label (de bloktitel) is visueel-verborgen */

/* De toeslag: een notitie op zand, met een kalender */
.toeslag {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px;
  align-content: start;
  background: var(--zand);
  border-radius: 10px;
  padding: 24px;
}
.toeslag__icoon {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--wit); color: var(--groen-tekst);
}
.toeslag__icoon .icoon { width: 22px; height: 22px; }
.toeslag__titel { font-size: 18px; line-height: 1.3; margin: 2px 0 8px; letter-spacing: 0; }
.toeslag .proza p { font-size: 16px; line-height: 1.55; }
.tarief-richtlijn { margin-top: 40px; font-size: 17px; }
@media (min-width: 880px) { .tarief-richtlijn { margin-top: 48px; } }

/* Tariefvormen: vier kleurvlakken. Op desktop een lijst die je van boven naar
   beneden leest: de vaste prijs (haar eerste keus) over de volle breedte,
   uurtarief en combinatie naast elkaar, aanvullend weer over de volle
   breedte. De twee brede vlakken hebben icoon en titel links, de tekst rechts
   (zoals de split elders op de site); zo staat er nergens een half leeg vlak. */
.tarief-vormen__kop { margin: 0 0 32px; }
.vormen { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.vorm { border-radius: 10px; padding: 28px 24px 30px; }
.vorm--zand { background: var(--zand); }
.vorm--zeelicht { background: var(--zeelicht); }
.vorm__icoon { display: block; color: var(--groen-tekst); margin-bottom: 14px; }
.vorm__icoon .icoon { width: 32px; height: 32px; stroke-width: 1.5; }
.vorm__titel { font-size: 21px; line-height: 1.3; margin: 0 0 10px; letter-spacing: 0; }
.vorm__tekst p { font-size: 17px; }
@media (min-width: 880px) {
  .tarief-vormen__kop { margin-bottom: 44px; }
  .vormen {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "a a" "b c" "d d";
    gap: 24px;
  }
  .vorm:nth-child(1) { grid-area: a; }
  .vorm:nth-child(2) { grid-area: b; }
  .vorm:nth-child(3) { grid-area: c; }
  .vorm:nth-child(4) { grid-area: d; }
  /* de brede vlakken: icoon en titel links, tekst rechts */
  .vorm:nth-child(1), .vorm:nth-child(4) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    grid-template-rows: auto 1fr;
    column-gap: 64px;
  }
  .vorm:nth-child(1) .vorm__icoon, .vorm:nth-child(1) .vorm__titel,
  .vorm:nth-child(4) .vorm__icoon, .vorm:nth-child(4) .vorm__titel { grid-column: 1; }
  .vorm:nth-child(1) .vorm__tekst, .vorm:nth-child(4) .vorm__tekst { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .vorm:nth-child(1) .vorm__tekst p, .vorm:nth-child(4) .vorm__tekst p { max-width: 62ch; }
  .vorm { padding: 40px 44px 42px; }
  .vorm:nth-child(1) .vorm__tekst p { font-size: 19px; line-height: 1.6; }
}

/* Hoe verdient het zich terug: icoonrij, haar citaat, twee reviews */
.tarief-waarde__kop { margin-bottom: 36px; }
.tarief-waarde__kop h2 { margin: 0 0 10px; max-width: 22ch; }
.tarief-waarde__intro { margin: 0; font-size: 19px; color: var(--grijs); hyphens: manual; }
.waarden { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; }
.waarde { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 16px; align-items: start; }
.waarde__schijf { width: 48px; height: 48px; background: var(--wit); color: var(--groen); grid-row: 1 / span 2; }
.waarde__schijf .icoon { width: 22px; height: 22px; }
.waarde__titel { font-size: 19px; line-height: 1.3; margin: 2px 0 4px; letter-spacing: 0; }
.waarde__tekst { margin: 0; font-size: 16px; line-height: 1.55; color: var(--inkt); }
.waarde__tekst::first-letter { text-transform: uppercase; }
.tarief-waarde__stemmen {
  display: grid; gap: 40px;
  margin-top: 48px; padding-top: 48px;
  border-top: 1px solid rgba(0, 52, 80, .13);
}
.tarief-waarde__citaat p { font-size: 30px; }
.tarief-waarde__citaat figcaption { font-family: var(--letter-kop); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; font-size: 13px; color: var(--blauw); }
@media (min-width: 880px) {
  .tarief-waarde__kop { margin-bottom: 56px; }
  .tarief-waarde__intro { font-size: 20px; }
  .waarden { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px; }
  .waarde { display: block; }
  .waarde__schijf { width: 64px; height: 64px; margin-bottom: 20px; }
  .waarde__schijf .icoon { width: 28px; height: 28px; stroke-width: 1.5; }
  .waarde__titel { margin: 0 0 6px; }
  .tarief-waarde__stemmen { margin-top: 72px; padding-top: 64px; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 56px; }
  .tarief-waarde__citaat p { font-size: 36px; line-height: 1.18; }
}

/* Goed om te weten: rijen met haarlijnen, twee kolommen */
.tarief-weten__kop { margin: 0 0 28px; }
.weten { list-style: none; margin: 0; padding: 0; display: grid; border-top: var(--horizon); }
.weten__item { padding: 26px 0; border-bottom: var(--horizon); }
.weten__titel { margin: 0 0 10px; }
.weten__nadruk { padding-left: 16px; border-left: 2px solid var(--groen); }
.weten__tip { font-size: 16px; line-height: 1.6; color: var(--grijs); }
.weten__tip strong { color: var(--inkt); }
@media (min-width: 880px) {
  .tarief-weten__kop { margin-bottom: 40px; }
  .weten { grid-template-columns: 1fr 1fr; column-gap: 64px; border-top: 0; }
  .weten__item { border-top: var(--horizon); border-bottom: 0; padding: 32px 0 36px; }
  .weten__item:nth-last-child(-n+2) { border-bottom: var(--horizon); }
}

/* ── 23. Digitale kluis (sjabloon kluis.html.j2) ──────────────── */
.kluis-rij { padding-block: 36px; }
.kluis-rij:first-child { padding-top: 0; }
.kluis-rij:last-child { padding-bottom: 0; }
.kluis-rij + .kluis-rij { border-top: var(--horizon); }
.kluis-voordelen__kop { margin: 0 0 28px; }
.kluis-voordelen .rij .proza p::first-letter { text-transform: uppercase; }
.kluis-voordelen__na { margin-top: 36px; display: grid; gap: 16px; justify-items: start; }
.kluis-voordelen__link { margin: 0; }
@media (min-width: 880px) {
  .kluis-rij { padding-block: 56px; }
  .kluis-voordelen__kop { margin-bottom: 40px; }
  .kluis-voordelen__na { margin-top: 48px; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: end; column-gap: 64px; }
  .kluis-voordelen__link { justify-self: end; }
}

/* ── 24. Samenwerking (sjabloon samenwerking.html.j2) ─────────── */
/* Haar punt 5: de paginakop is terug. Intro met de vier partners als
   inhoudsopgave ernaast; daarna per partner een rij: schijf en groene titel
   links (blijft staan bij lange tekst), haar tekst rechts.
   Contrast: --groen-tekst op zeelicht 4,70 (titels 21/24px) · --blauw op
   zeelicht 11,43 · --grijs op wit 6,81 (label). */
.sw-intro__raster { display: grid; gap: 40px; }
.sw-intro__proza > p:first-child { font-size: 19px; line-height: 1.6; color: var(--blauw); }
.sw-wijzer__label {
  font: 700 13px/1.3 var(--letter-tekst); letter-spacing: .12em; text-transform: uppercase;
  color: var(--grijs); margin: 0 0 14px;
}
.sw-wijzer__lijst { list-style: none; margin: 0; padding: 0; border-top: var(--horizon); }
.sw-wijzer__link {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 4px 14px 0;
  border-bottom: var(--horizon);
  text-decoration: none;
  font: 500 19px/1.3 var(--letter-kop); color: var(--blauw);
  hyphens: manual;
}
.sw-wijzer__titel { flex: 1; }
.sw-wijzer__pijl { width: 18px; height: 18px; color: var(--groen-tekst); transform: rotate(90deg); transition: transform var(--overgang); }
.sw-wijzer__link:hover { color: var(--groen-tekst); }
.sw-wijzer__link:hover .sw-wijzer__pijl { transform: rotate(90deg) translateX(3px); }
.scheidsteken {
  display: inline-block; width: 1.5px; height: .95em;
  background: var(--groen); vertical-align: -0.12em;
}

.sw-partners__lijst { list-style: none; margin: 0; padding: 0; }
.sw-partner {
  display: grid; gap: 20px;
  padding-block: 40px;
  scroll-margin-top: calc(var(--kopbalk) + 24px);
}
.sw-partner:first-child { padding-top: 0; }
.sw-partner:last-child { padding-bottom: 0; }
.sw-partner + .sw-partner { border-top: 1px solid rgba(0, 52, 80, .13); }
.sw-partner__kop { display: flex; align-items: center; gap: 16px; }
.sw-partner__schijf { background: var(--wit); width: 56px; height: 56px; }
.sw-partner__schijf .icoon { width: 26px; height: 26px; }
.sw-partner__titel {
  font-size: var(--h3); line-height: 1.25; letter-spacing: -0.005em;
  color: var(--groen-tekst); margin: 0; hyphens: manual;
}
.sw-partner__tekst { max-width: none; }
.sw-partner__tekst > p { max-width: var(--maat-smal); }
/* de notaris: haar vier onderwerpen twee aan twee, elk onder een haarlijn */
.proza .naast--notaris { margin-top: 0; row-gap: 8px; }
.naast--notaris > div { border-top: 1px solid rgba(0, 52, 80, .13); padding-top: 18px; }
.naast--notaris h3 { font-size: 19px; line-height: 1.3; color: var(--blauw); margin: 0 0 .45em; letter-spacing: 0; }
.naast--notaris p { font-size: 17px; }
@media (min-width: 720px) {
  .proza .naast--notaris { row-gap: 32px; column-gap: 48px; }
  .naast--notaris > div:nth-child(-n+2) { border-top: 0; padding-top: 0; }
}
@media (min-width: 880px) {
  .sw-intro__raster { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 88px; align-items: start; }
  /* een inleidende alinea breekt op brede kolommen geen woorden af */
  .sw-intro__proza > p:first-child { font-size: 20px; hyphens: manual; }
  .sw-wijzer { padding-top: 6px; }
  .sw-partner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    column-gap: 64px;
    padding-block: 64px;
  }
  .sw-partner__kop {
    flex-direction: column; align-items: flex-start; gap: 20px;
    position: sticky; top: calc(var(--kopbalk) + 32px); align-self: start;
  }
  .sw-partner__schijf { width: 72px; height: 72px; }
  .sw-partner__schijf .icoon { width: 32px; height: 32px; stroke-width: 1.5; }
}

/* ── 25. Over More Advice (sjabloon over.html.j2) ────────────────── */
/* Haar verhaal naast haar portret; de citaatband met het SUP-silhouet;
   haar taak groot in Gilda; Less is More (Advice) als woordbeeld; kennis
   en erkenning met haar podcasts; reviews. Contrast: --blauw op wit 13,07 ·
   --groen-tekst op zand 4,77 (aanloop) en op zeelicht 4,70 · --groen op
   wit 3,03 alleen in de kop van 64px ("(Advice)") · --grijs op zeelicht 5,96. */
.over-verhaal__raster { display: grid; gap: 32px; }
.over-verhaal__beeld { margin: 0; }
.over-verhaal__img { aspect-ratio: 4 / 5; object-fit: cover; }
.over-verhaal__link { margin: 28px 0 0; }
.over-verhaal__naam {
  font-size: 20px; line-height: 1.3; letter-spacing: 0;
  color: var(--groen-tekst); margin: 0 0 18px;
}
/* haar ❤️, als het groene hart uit de lijnset; het woord ervoor en het
   hart breken nooit los van elkaar (zie over.html.j2) */
.hartwoord { white-space: nowrap; }
.icoon.hartje {
  display: inline-block; width: .82em; height: .82em;
  vertical-align: -0.08em; margin: 0;
  color: var(--groen); fill: var(--groen); stroke-width: 0;
}
@media (min-width: 880px) {
  .over-verhaal__raster { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 88px; align-items: center; }
}

/* Citaatband: wit Gilda op een verloop in --blauw-diep (#002a41) linksonder
   in het beeld. Contrast gemeten 2026-09-24 in Chromium: tekst verborgen,
   band geschoten, relatieve luminantie van elke pixel binnen de regelvakken
   van het motto. Wit tegen de lichtste pixel (een schittering) / tegen de
   donkerste:
     1440 breed (46px)  7,25 / 16,55      1920 (46px)  6,21 / 16,68
     1024 (38px)        6,53 / 16,20       880 (38px)  5,77 / 16,86
      390 mobiel (24px) 7,26 / 15,87       360 (24px)  7,16 / 16,02
   Overal >= 4,5, dus AA ook op de lichtste plek. Wie het verloop of de
   lettermaat aanpast, meet opnieuw. */
.citaatband {
  --band-h: 360px;
  position: relative; margin: 0;
  height: var(--band-h);
  overflow: hidden;
  background: var(--blauw-diep);
}
.citaatband__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
/* verloop linksonder, waar de tekst staat; rechts en boven houdt het beeld
   zijn goud */
.citaatband::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top, rgba(0, 42, 65, .86) 0%, rgba(0, 42, 65, .6) 32%, rgba(0, 42, 65, 0) 62%),
    linear-gradient(to right, rgba(0, 42, 65, .6) 0%, rgba(0, 42, 65, .34) 38%, rgba(0, 42, 65, 0) 60%);
}
.citaatband__wrap {
  position: relative; z-index: 1; height: 100%;
  display: flex; align-items: flex-end;
  padding-bottom: 32px;
}
.citaatband__tekst { margin: 0; }
.citaatband__tekst::before {
  content: ""; display: block; width: 40px; height: 2px;
  background: var(--groen-op-blauw); margin-bottom: 16px;
}
.citaatband__tekst p {
  font-family: var(--letter-citaat);
  font-size: 24px; line-height: 1.22;
  color: var(--wit); margin: 0;
  hyphens: manual;
}
/* twee regels, na de komma: "You can't stop the waves, / but you can learn to surf" */
.citaatband__tekst .kopdeel { display: block; }
@media (max-width: 879.98px) {
  /* Suzanne rechts in beeld, de tekst links onder haar uit; op een smal
     scherm ligt de zonnestreep dichter bij de tekst, dus een dieper verloop */
  .citaatband__img { object-position: 25% 50% !important; }
  .citaatband::after {
    background:
      linear-gradient(to top, rgba(0, 42, 65, .88) 0%, rgba(0, 42, 65, .64) 38%, rgba(0, 42, 65, 0) 72%),
      linear-gradient(to right, rgba(0, 42, 65, .45) 0%, rgba(0, 42, 65, .2) 50%, rgba(0, 42, 65, 0) 75%);
  }
}
@media (min-width: 880px) {
  .citaatband { --band-h: 520px; }
  .citaatband__wrap { padding-bottom: 64px; }
  .citaatband__tekst::before { width: 48px; margin-bottom: 22px; }
  .citaatband__tekst p { font-size: 38px; line-height: 1.16; }
}

@media (min-width: 1200px) {
  .citaatband__tekst p { font-size: 46px; line-height: 1.14; }
}

.over-rij { padding-block: 36px; }
.over-rij:first-child { padding-top: 0; }
.over-rij:last-child { padding-bottom: 0; }
.over-rij + .over-rij { border-top: var(--horizon); }
.over-rij .proza em { font-style: italic; }

.over-taak__raster { display: grid; gap: 36px; }
.over-taak__citaat { margin: 0; }
.over-taak__citaat blockquote { margin: 0; }
.over-taak__aanloop {
  font: 500 18px/1.3 var(--letter-kop); color: var(--groen-tekst);
  margin: 0 0 18px; letter-spacing: .01em;
  display: flex; align-items: center; gap: 14px;
}
.over-taak__aanloop::before { content: ""; width: 40px; height: 2px; background: var(--groen-tekst); flex: none; }
.over-taak__citaat blockquote p {
  font-family: var(--letter-citaat);
  font-size: 30px; line-height: 1.22;
  color: var(--blauw); margin: 0;
  text-indent: -0.4em;   /* het openingsteken hangt in de marge */
  max-width: 24ch;
  hyphens: manual; text-wrap: balance;
}
.over-taak__tekst .over-taak__na { font: 500 20px/1.45 var(--letter-kop); color: var(--blauw); hyphens: manual; }
@media (min-width: 880px) {
  .over-taak__raster { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 88px; align-items: end; }
  .over-taak__citaat blockquote p { font-size: 42px; line-height: 1.16; }
  .over-taak__tekst .over-taak__na { font-size: 22px; }
}

.over-less__raster { display: grid; gap: 28px; }
.over-less__kop { font-size: 44px; line-height: 1.02; letter-spacing: -0.02em; margin: 0; }
.over-less__1 { display: block; color: var(--blauw); }
.over-less__2 { display: block; color: var(--groen); }
.over-less__tekst > p:first-child { font-size: 19px; line-height: 1.6; }
@media (min-width: 880px) {
  .over-less__raster { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 88px; align-items: start; }
  .over-less__kop { font-size: 64px; padding-top: 4px; }
  .over-less__tekst > p:first-child { font-size: 20px; }
}

.over-bewijs__raster { display: grid; gap: 36px; }
.over-bewijs__kop h2 { margin: 0 0 24px; }
.over-bewijs__jaren { margin: 0; display: flex; align-items: baseline; gap: 14px; }
.over-bewijs__getal {
  font: 500 88px/.9 var(--letter-kop); letter-spacing: -0.03em;
  color: var(--blauw); font-variant-numeric: lining-nums;
}
.over-bewijs__eenheid { font: 500 20px/1.2 var(--letter-kop); color: var(--groen-tekst); max-width: 7ch; hyphens: manual; }
.over-bewijs__lijst { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(0, 52, 80, .13); }
.bewijs {
  display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 18px;
  padding: 22px 0; border-bottom: 1px solid rgba(0, 52, 80, .13);
}
.bewijs__schijf { width: 48px; height: 48px; background: var(--wit); }
.bewijs__schijf .icoon { width: 22px; height: 22px; }
.bewijs__titel { font-size: 20px; line-height: 1.3; letter-spacing: 0; margin: 11px 0 0; hyphens: manual; }
.bewijs__uitleg p { margin: 6px 0 0; font-size: 16px; line-height: 1.55; color: var(--inkt); }
.bewijs__link { margin: 10px 0 0; }

.podcasts {
  display: grid; gap: 24px;
  margin-top: 48px; padding-top: 40px;
  border-top: 1px solid rgba(0, 52, 80, .13);
}
.podcasts__titel { font-size: var(--h3); line-height: 1.25; margin: 0 0 8px; max-width: 24ch; }
.podcasts__intro { margin: 0; color: var(--grijs); }
.podcasts__lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.podcast {
  display: flex; align-items: center; gap: 16px;
  padding: 12px 20px 12px 12px;
  background: var(--wit); border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(0, 52, 80, .05), 0 12px 28px -20px rgba(0, 52, 80, .45);
  transition: box-shadow var(--overgang), transform .08s ease;
}
.podcast__schijf { width: 44px; height: 44px; }
.podcast__label { flex: 1; font: 500 18px/1.3 var(--letter-kop); color: var(--blauw); hyphens: manual; }
.podcast__speel { width: 28px; height: 28px; stroke-width: 1.5; color: var(--groen-tekst); transition: transform var(--overgang); }
.podcast:hover { box-shadow: 0 1px 2px rgba(0, 52, 80, .05), 0 16px 32px -18px rgba(0, 52, 80, .55); }
.podcast:hover .podcast__label { color: var(--groen-tekst); }
.podcast:hover .podcast__speel { transform: scale(1.08); }
.podcast:active { transform: translateY(1px); }
.over-reviews__meer { margin: 24px 0 0; }
@media (min-width: 880px) {
  .over-bewijs__raster { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 64px; }
  .over-bewijs__lijst { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 40px; border-top: 0; }
  .bewijs { display: block; padding: 28px 0 0; border-bottom: 0; border-top: 1px solid rgba(0, 52, 80, .13); }
  .bewijs__schijf { width: 56px; height: 56px; margin-bottom: 18px; }
  .bewijs__schijf .icoon { width: 26px; height: 26px; stroke-width: 1.5; }
  .bewijs__titel { margin: 0; }
  .over-bewijs__getal { font-size: 112px; }
  .podcasts { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 64px; align-items: center; margin-top: 72px; padding-top: 56px; }
  .podcasts__lijst { grid-template-columns: 1fr 1fr; gap: 16px; }
}

/* ── 26. Contact (sjabloon contact.html.j2) ──────────────────────── */
/* Haar punt 6: haar drie iconen in de kop (zie 3. Paginakop, iconenrij).
   Brief met portret, haar melding over de planning, haar groet in Gilda;
   contactblok op blauw met mailen als grote knop (bellen is eruit, feedback
   2026-09-28).
   Contrast: --blauw op wit 13,07 (knoptekst) · --grijs op wit 6,81 (label) ·
   --inkt op zand 12,89 (melding) · wit 78% op blauw 8,3 (klein) ·
   focusring --groen op blauw 4,31 (niet-tekst). */
.contact-brief__raster { display: grid; gap: 32px; }
.contact-brief__beeld { margin: 0; }
.contact-brief__img { aspect-ratio: 3 / 2; object-fit: cover; }
.contact-brief__proza > p:first-child { font-size: 19px; line-height: 1.6; color: var(--blauw); }
.melding {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: center;
  margin: 32px 0 0; padding: 18px 22px 18px 18px;
  background: var(--zand); border-radius: 10px;
  max-width: var(--maat-smal);
}
.melding__icoon {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--wit); color: var(--groen-tekst);
}
.melding__icoon .icoon { width: 22px; height: 22px; }
.melding__tekst { margin: 0; font-size: 17px; line-height: 1.55; color: var(--inkt); }
.groet { margin: 36px 0 0; display: grid; gap: 4px; }
.groet__regel { font: 400 17px/1.4 var(--letter-tekst); color: var(--grijs); }
.groet__naam { font-family: var(--letter-citaat); font-size: 34px; line-height: 1.1; color: var(--blauw); }
@media (min-width: 880px) {
  .contact-brief__raster { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 88px; align-items: center; }
  .contact-brief__img { aspect-ratio: 4 / 5; }
  .contact-brief__proza > p:first-child { font-size: 20px; hyphens: manual; }
  .groet__naam { font-size: 40px; }
}

.contactblok { padding-block: 72px 88px; position: relative; overflow: hidden; }
.contactblok::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 36px; height: 1px;
  background: linear-gradient(to right, transparent, var(--lijn-blauw) 20%, var(--lijn-blauw) 80%, transparent);
}
.contactblok__raster { display: grid; gap: 48px; position: relative; }
.contactblok__kop { font-size: var(--h3); line-height: 1.25; margin: 0 0 20px; display: flex; align-items: center; gap: 12px; }
.contactblok__kopicoon { display: flex; color: var(--groen-op-blauw); }
.contactblok__knoppen { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.vlak-blauw .grooteknop, .grooteknop {
  display: flex; align-items: center; gap: 16px;
  min-height: 80px; padding: 14px 18px 14px 14px;
  background: var(--wit); color: var(--blauw);
  border-radius: 16px;
  text-decoration: none;
  transition: background-color var(--overgang), transform .08s ease;
}
.grooteknop__schijf { width: 52px; height: 52px; }
.grooteknop__schijf .icoon { width: 24px; height: 24px; }
.grooteknop__tekst { flex: 1; min-width: 0; display: grid; gap: 2px; }
.grooteknop__label {
  font: 700 13px/1.3 var(--letter-tekst); letter-spacing: .1em; text-transform: uppercase;
  color: var(--grijs);
}
.grooteknop__waarde { font: 500 20px/1.2 var(--letter-kop); hyphens: manual; }
.grooteknop__pijl { width: 22px; height: 22px; color: var(--groen-tekst); transition: transform var(--overgang); }
.vlak-blauw .grooteknop:hover { background: var(--groen-zacht); color: var(--blauw); }
.grooteknop:hover .grooteknop__schijf { background: var(--wit); }
.grooteknop:hover .grooteknop__pijl { transform: translateX(4px); }
.grooteknop:active { transform: translateY(1px); }
.contactblok__klein { margin-top: 24px; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, .78); }
.contactblok__klein p { margin: 0; }
.contactblok__adres p { margin: 0 0 16px; }
.contactblok__adres p:last-child { margin-bottom: 0; }
.contact-adres strong { display: inline-block; font: 500 22px/1.3 var(--letter-kop); margin-bottom: 2px; }
.contact-navigatie {
  font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, .78);
  padding-left: 14px; border-left: 2px solid var(--groen-op-blauw);
}
@media (max-width: 379.98px) { .grooteknop__pijl { display: none; } }
@media (min-width: 880px) {
  .contactblok { padding-block: 104px 120px; }
  .contactblok__raster { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 64px; align-items: start; }
  .contactblok__kop { font-size: 28px; margin-bottom: 28px; }
  .contactblok__kantoor { padding-left: 56px; border-left: 1px solid var(--lijn-blauw); }
  .grooteknop { min-height: 96px; padding: 18px 28px 18px 18px; gap: 20px; }
  .grooteknop__schijf { width: 60px; height: 60px; }
  .grooteknop__waarde { font-size: 28px; }
}

/* ── 27. Reviews (sjabloon referenties.html.j2) ─────────────────── */
/* Het cijfer groot naast haar intro; acht reviews in twee kolommen met een
   haarlijn ertussen (zand); de knoppen naar Advieskeuze eronder.
   Contrast: --inkt op zand 12,89 · --grijs op zand 6,05 · --blauw op zand 11,62. */
.rv-intro__raster { display: grid; gap: 32px; }
.rv-intro .reviewscore__cijfer { font-size: 88px; }
.rv-intro .ster { width: 24px; height: 24px; }
.rv-intro__tekst > p:first-child { font-size: 19px; line-height: 1.6; }
.rv-lijst { list-style: none; margin: 0; padding: 0; }
.rv-lijst__item {
  break-inside: avoid;
  padding: 28px 0 32px;
  border-top: 1px solid rgba(0, 52, 80, .13);
}
.rv-lijst__item .review { max-width: none; }
.rv-knoppen { margin: 40px 0 0; }
@media (min-width: 880px) {
  .rv-intro__raster { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: 64px; align-items: center; }
  .rv-intro .reviewscore__cijfer { font-size: 120px; }
  .rv-intro__tekst > p:first-child { font-size: 20px; hyphens: manual; }
  .rv-lijst { columns: 2; column-gap: 96px; column-rule: 1px solid rgba(0, 52, 80, .13); }
  .rv-lijst__item { padding: 32px 0 44px; }
  .rv-knoppen { margin-top: 56px; }
}

/* ── 28. Artikelen (kaart, Actueel, artikel) ──────────────── */
/* Eén kaart voor haar artikelen op Actueel, home, de levensmomenten en onder
   een artikel (macro artikelkaart). Beeld 3:2, iets naar boven gericht: haar
   beelden zijn foto's met gezichten, portretten en kaarten met tekst bovenin.
   Contrast: --groen-tekst (thema) op wit 5,37 / zeelicht 4,70; --grijs
   (datum, intro) op wit 6,81 / zeelicht 5,96. */
.kaart { position: relative; display: flex; flex-direction: column; gap: 18px; height: 100%; }
.kaart__beeld {
  aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--radius);
  background: var(--zeelicht);
}
.kaart__img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 30%;
  transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
.kaart:hover .kaart__img { transform: scale(1.035); }
.kaart__tekst { display: grid; align-content: start; gap: 8px; }
.kaart__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0;
  margin: 0; font: 500 14px/1.35 var(--letter-kop); letter-spacing: .01em;
  color: var(--grijs); hyphens: manual;
}
.kaart__thema { color: var(--groen-tekst); }
.kaart__thema::after {
  content: ""; display: inline-block; width: 4px; height: 4px; border-radius: 50%;
  background: currentColor; opacity: .5; margin: 0 10px; vertical-align: middle;
}
.kaart__titel {
  font: 500 20px/1.28 var(--letter-kop); letter-spacing: -.005em;
  color: var(--blauw); margin: 0; text-wrap: balance; hyphens: manual;
}
.kaart__link { color: inherit; text-decoration: none; }
.kaart__link::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.kaart__link:focus-visible { outline: none; }
.kaart__link:focus-visible::after { outline: 3px solid var(--focus); outline-offset: 8px; }
.kaart:hover .kaart__titel, .kaart__link:hover { color: var(--groen-tekst); }
.kaart__intro {
  margin: 2px 0 0; font-size: 16px; line-height: 1.6; color: var(--grijs);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
}
@media (min-width: 880px) { .kaart__titel { font-size: 21px; } }

/* Zonder beeld: stil zeelicht met een horizon, het icoon van het
   levensmoment staat als een zon op de lijn. Nooit een kapot beeld. */
.artikelbeeld-leeg {
  display: grid; place-items: center;
  background:
    linear-gradient(to bottom, transparent calc(58% - .5px), rgba(0, 52, 80, .16) calc(58% - .5px), rgba(0, 52, 80, .16) calc(58% + .5px), transparent calc(58% + .5px)),
    linear-gradient(to bottom, var(--zeelicht) 58%, #dde9ec 58%);
}
.artikelbeeld-leeg .schijf { background: var(--wit); transform: translateY(8%); box-shadow: 0 0 0 10px rgba(255, 255, 255, .45); }
.vlak-zeelicht .artikelbeeld-leeg {
  background:
    linear-gradient(to bottom, transparent calc(58% - .5px), rgba(0, 52, 80, .16) calc(58% - .5px), rgba(0, 52, 80, .16) calc(58% + .5px), transparent calc(58% + .5px)),
    linear-gradient(to bottom, var(--wit) 58%, var(--zand) 58%);
}
.vlak-zeelicht .artikelbeeld-leeg .schijf { background: var(--groen-zacht); box-shadow: none; }

/* Liggende kaart: beeld links groot, tekst rechts. Het uitgelichte artikel op
   Actueel en een enkel artikel bij "verder lezen". */
@media (min-width: 880px) {
  .is-uitgelicht > .kaart, .kaartrij--1 .kaart {
    display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: 56px; align-items: center;
  }
  .is-uitgelicht .kaart__beeld { aspect-ratio: 16 / 10; }
  .is-uitgelicht .kaart__tekst { gap: 12px; }
  .is-uitgelicht .kaart__titel { font-size: 36px; line-height: 1.15; letter-spacing: -.01em; }
  .is-uitgelicht .kaart__meta { font-size: 15px; }
  .is-uitgelicht .kaart__intro { font-size: 18px; line-height: 1.65; color: var(--inkt); -webkit-line-clamp: 5; line-clamp: 5; margin-top: 6px; }
  .kaartrij--1 .kaart { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 40px; }
  .kaartrij--1 .kaart__titel { font-size: 24px; }
}

/* De leesregel staat alleen op de uitgelichte kaart, en alleen zolang die
   uitgelicht is (bij een gekozen levensmoment is het een gewone kaart). */
.kaart__lees { display: none; justify-self: start; margin-top: 14px; }
.is-uitgelicht .kaart__lees { display: inline-flex; }
.kaart:hover .kaart__lees { color: var(--groen-tekst); }
.kaart:hover .kaart__lees .icoon { transform: translateX(4px); }

/* Kaartrij: twee of drie naast elkaar (home, verder lezen, onder een artikel) */
.kaartrij { list-style: none; margin: 0; padding: 0; display: grid; gap: 48px; }
.kaartrij__item { min-width: 0; }
@media (min-width: 720px) {
  .kaartrij--2, .kaartrij--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 32px; }
}
@media (min-width: 1080px) {
  .kaartrij--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
  /* op een levensmoment houden één of twee kaarten de maat van drie */
  .lm-lezen .kaartrij--2 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
  .lm-lezen .kaartrij--1 { max-width: calc((100% - 80px) / 3 * 2 + 40px); }
}

/* ── Actueel (sjabloon actueel.html.j2) ── */
.actueel { padding-top: 48px; }
@media (min-width: 880px) { .actueel { padding-top: 64px; } }

/* Filterchips: een rij pillen zoals de knoppen, het gekozen levensmoment in
   haar blauw. Op een telefoon één rij die zijwaarts schuift. */
.filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 48px; }
.filter[hidden] { display: none; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  min-height: 44px; padding: 8px 10px 8px 14px;
  border: 1.5px solid var(--lijn); border-radius: 999px;
  background: var(--wit); color: var(--blauw);
  font: 500 15px/1.2 var(--letter-kop); letter-spacing: .01em;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--overgang), border-color var(--overgang), color var(--overgang), transform .08s ease;
}
.chip__icoon { width: 18px; height: 18px; stroke-width: 1.75; color: var(--groen-tekst); margin-left: -2px; margin-right: -2px; }
.chip__aantal {
  display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px;
  border-radius: 999px; background: var(--zeelicht); color: var(--grijs);
  font: 700 12px/1 var(--letter-tekst); font-variant-numeric: tabular-nums;
}
.chip:hover { border-color: var(--blauw); }
.chip:active { transform: translateY(1px); }
.chip[aria-pressed="true"] { background: var(--blauw); border-color: var(--blauw); color: var(--wit); }
.chip[aria-pressed="true"] .chip__icoon { color: var(--groen-op-blauw); }
.chip[aria-pressed="true"] .chip__aantal { background: rgba(255, 255, 255, .16); color: var(--wit); }
@media (max-width: 719.98px) {
  .filter {
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
    margin-inline: calc(-1 * var(--rand)); padding: 4px var(--rand) 8px;
    scroll-padding-inline: var(--rand); scroll-snap-type: x proximity; scrollbar-width: none;
    margin-bottom: 32px;
  }
  .filter::-webkit-scrollbar { display: none; }
  .chip { scroll-snap-align: start; }
}

.artikelraster { list-style: none; margin: 0; padding: 0; display: grid; gap: 56px; }
.artikelraster__item { min-width: 0; }
.artikelraster__item[hidden] { display: none; }
.artikelraster__item.is-uitgelicht { grid-column: 1 / -1; }
@media (min-width: 720px) {
  .artikelraster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 32px; }
}
@media (min-width: 880px) {
  .artikelraster__item.is-uitgelicht { padding-bottom: 64px; border-bottom: var(--horizon); margin-bottom: 8px; }
}
@media (min-width: 1080px) {
  .artikelraster { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 64px 40px; }
}

/* "Meer artikelen": de knop op de horizon */
.actueel__meer { display: flex; align-items: center; gap: 24px; margin: 64px 0 0; }
.actueel__meer::before, .actueel__meer::after { content: ""; flex: 1; border-top: var(--horizon); }
.actueel__meer[hidden] { display: none; }

/* ── Artikel (sjabloon artikel.html.j2) ── */
/* Kop: titel in haar twee kleuren links, het beeld rechts heel (contain) op
   een zeelicht vlak tot de rand. Haar beelden zijn kaarten met tekst,
   portretten en foto's: afsnijden of vervagen zou ze kapotmaken. */
.artikelkop__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 0;
  font: 500 15px/1.3 var(--letter-kop); letter-spacing: .01em; color: var(--grijs);
}
.artikelkop__thema {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 36px; padding: 6px 14px 6px 10px; border-radius: 999px;
  background: var(--groen-zacht); color: var(--blauw); text-decoration: none;
  transition: background-color var(--overgang), color var(--overgang);
}
.artikelkop__icoon { width: 18px; height: 18px; stroke-width: 1.75; }
.artikelkop__thema:hover { background: var(--blauw); color: var(--wit); }
.paginakop--artikel .paginakop__extra { margin-top: 24px; }
/* een artikeltitel breekt gewoon (gebalanceerd), niet alleen na een komma zoals haar korte koppen */
.paginakop--artikel .kopdeel { display: inline; }
.paginakop--artikel .paginakop__beeld { background: var(--zeelicht); display: grid; place-items: center; }
.paginakop--artikel .artikelkop__img {
  width: auto; height: auto; max-width: 100%; object-fit: contain;
  -webkit-mask-image: none; mask-image: none;
  border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(0, 52, 80, .08), 0 22px 44px -22px rgba(0, 52, 80, .45);
}
@media (max-width: 879.98px) {
  .paginakop--artikel .paginakop__beeld { height: auto; padding: 28px var(--rand) 36px; }
  .paginakop--artikel .artikelkop__img { max-height: 300px; }
  .paginakop--artikel .paginakop__tekst { padding-top: 28px; }
}
@media (min-width: 880px) {
  .paginakop--artikel { --kop-hoogte: 540px; --kop-tekst: .5; }
  .paginakop--artikel .paginakop__tekst { margin-right: 0; padding-right: 64px; }
  .paginakop--artikel .paginakop__beeld { padding: 56px 64px 72px; }
  .paginakop--artikel .artikelkop__img { max-height: calc(var(--kop-hoogte) - 128px); }
  .paginakop--artikel .tweekleur { font-size: 42px; line-height: 1.12; }
}

/* Tekst: één leeskolom op ~65 tekens, ruime regels, tussenkoppen in Jost
   blauw met lucht erboven, links in --groen-tekst. Een korte eerste alinea is
   haar opening en staat iets groter, zoals de intro op de levensmomenten
   (filter opening in bouw.py). */
.artikel { padding-top: 40px; }
/* 640px: bij 18px zo'n 65 tot 70 tekens per regel (ch is de breedte van
   een 0 en daarmee te ruim voor een leeskolom) */
.artikel__kolom { max-width: 640px; margin-inline: auto; }
.auteur {
  display: flex; align-items: center; gap: 14px;
  margin: 0 0 40px; padding-bottom: 28px; border-bottom: var(--horizon);
  hyphens: manual;
}
.auteur__foto { width: 56px; height: 56px; flex: none; border-radius: 50%; object-fit: cover; object-position: 50% 22%; }
.auteur__tekst { display: grid; gap: 2px; }
.auteur__naam { font: 500 17px/1.3 var(--letter-kop); color: var(--blauw); }
.auteur__rol { font-size: 15px; line-height: 1.4; color: var(--grijs); }
.artikel__tekst { max-width: none; font-size: 17px; line-height: 1.75; }
.artikel__tekst p { margin-bottom: 1.2em; }
.artikel__tekst > .opening { font-size: 19px; line-height: 1.6; color: var(--inkt); }
.artikel__tekst h2, .artikel__tekst h3, .artikel__tekst h4 { color: var(--blauw); letter-spacing: -.005em; }
.artikel__tekst h2 { font-size: 24px; line-height: 1.25; margin: 1.9em 0 .6em; }
.artikel__tekst h3 { font-size: 20px; line-height: 1.3; margin: 1.7em 0 .5em; }
.artikel__tekst h4 { font-size: 18px; line-height: 1.35; margin: 1.6em 0 .4em; }
.artikel__tekst h2 + h3 { margin-top: .8em; }
/* haar koppen zijn soms ook vet gemaakt: Jost blijft op zijn eigen gewicht */
.artikel__tekst :is(h2, h3, h4) :is(strong, b) { font-weight: inherit; }
.artikel__tekst a { color: var(--groen-tekst); text-decoration-color: rgba(46, 122, 23, .45); }
.artikel__tekst a:hover { text-decoration-color: currentColor; }
.artikel__tekst ul, .artikel__tekst ol { margin-bottom: 1.2em; }
.artikel__tekst li { margin-bottom: .45em; }
.artikel__tekst figure { margin: 2em 0; }
.artikel__tekst figure img { width: 100%; height: auto; border-radius: var(--radius); }
.artikel__tekst blockquote {
  margin: 1.6em 0; padding-left: 24px; border-left: 2px solid var(--groen);
  font-family: var(--letter-citaat); font-size: 22px; line-height: 1.4; color: var(--blauw);
}
.artikel__bron {
  margin: 40px 0 0; padding-top: 20px; border-top: var(--horizon);
  font-size: 15px; color: var(--grijs);
}
.artikel__bron a { color: var(--groen-tekst); text-underline-offset: .2em; }
@media (min-width: 880px) {
  .artikel { padding-top: 56px; }
  .artikel__tekst { font-size: 18px; }
  .artikel__tekst > .opening { font-size: 21px; }
  .artikel__tekst h2 { font-size: 27px; }
  .artikel__tekst h3 { font-size: 21px; }
}

/* Meer over dit levensmoment: titel en links links, twee kaarten rechts */
.artikel-meer__raster { display: grid; gap: 32px; }
.artikel-meer__titel { font-size: var(--h2); margin: 0 0 24px; max-width: 16ch; }
.artikel-meer__titel::before {
  content: ""; display: block; width: 48px; height: 2px;
  background: var(--groen); margin-bottom: 20px;
}
.artikel-meer__links { list-style: none; margin: 0; padding: 0; display: grid; justify-items: start; gap: 10px; }
@media (min-width: 880px) {
  .artikel-meer__raster { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: 64px; align-items: start; }
  .artikel-meer .kaartrij--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
}

/* ── 30. Niet gevonden (sjabloon niet-gevonden.html.j2) ─────── */
/* De borden van de Wegwijzer (14) als gewone links, zonder paneel. Op
   desktop is er dus geen paneel onder de kop: kop en subregel staan
   verticaal gecentreerd naast de paal. */
@media (min-width: 1080px) {
  .wegwijzer--links .wegwijzer__intro { grid-row: 1 / span 2; align-self: center; padding: 0 0 48px; }
}

/* ── Stijlgids (alleen /_stijlgids.html) ─────────────────── */
.sg-label {
  font-family: var(--letter-tekst); font-weight: 700;
  font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--groen-tekst);
  margin: 0 0 12px;
}
.sg-uitleg { color: var(--grijs); font-size: var(--klein); max-width: 36ch; }
.sg-maat {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 12px;
  color: var(--grijs); margin: 32px 0 8px; letter-spacing: .02em;
}
.sg-letters > .sg-maat:first-child { margin-top: 0; }
.sg-letters .h1, .sg-letters .h2, .sg-letters .h3, .sg-letters .h4 { margin: 0; }
.sg-rij { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; padding-block: 20px; border-bottom: var(--horizon); }
.sg-rij:first-child { padding-top: 0; }
.sg-rij--blauw { padding: 28px; border-radius: var(--radius); border: 0; margin-top: 24px; }
.sg-inline { margin: 0; }
.sectie--los { padding-bottom: var(--sectie); }
.sg-vlakken { display: grid; gap: 16px; margin-top: 8px; }
.sg-vlak { padding: 40px 32px; border-radius: var(--radius); border: var(--horizon); }
.sg-vlak .tweekleur { margin: 0; }
.sg-vlak.vlak-blauw, .sg-vlak.vlak-zand, .sg-vlak.vlak-zeelicht { border-color: transparent; }
.vlak-blauw .sg-maat { color: rgba(255, 255, 255, .7); }
@media (min-width: 880px) { .sg-vlakken { grid-template-columns: 1fr 1fr; } }
.sg-reviews { display: grid; gap: 48px; margin-top: 8px; }
.sg-reviews__score { display: grid; gap: 40px; align-content: start; }
@media (min-width: 880px) { .sg-reviews { grid-template-columns: 5fr 7fr; gap: 80px; } }
.sg-koppen > .wrap { padding-bottom: 24px; }
.sg-koppen .paginakop { border-top: var(--horizon); }
.sg-koppen .paginakop + .paginakop { margin-top: 48px; }

/* ── Beweging ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0s !important;
    transition-delay: 0s !important;
    animation-duration: 0s !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* ── 31. Aangeleverd 2026-09-28 (feedback Suzanne) ─────────────────
   FFP-citaat, beeld met citaat (home), Je geld en je leven, Life Planning,
   Money beliefs, Pip en het certificaat (over), contactformulier, AI-regel.
   Contrast (berekend 2026-09-28):
     --blauw op zand 11,62 / zeelicht 11,43 (citaat, Gilda)
     --grijs op zand 6,05 / zeelicht 5,96 (bron onder het citaat)
     --groen-tekst op zand 4,77 (aanhalingsteken)
     wit op --blauw 13,07 (levensgebieden) · --groen-op-blauw op blauw 5,88 (icoon)
     --blauw-diep op --groen 4,93 (midden van Life Planning)
     --groen-tekst op --groen-zacht 4,51 · --blauw op --groen-zacht 10,98
     --veldrand #6f7f8a op wit 4,13 (rand invoerveld, niet-tekst >= 3)
     --fout #b3261e op wit 6,54 (foutmelding en foutrand) */
:root { --veldrand: #6f7f8a; --fout: #b3261e; }

/* FFP-citaat: groot in Gilda, links, met een groen aanhalingsteken */
.ffp-citaat { margin: 0; display: grid; gap: 16px; max-width: 900px; }
.ffp-citaat__teken { width: 40px; height: 40px; color: var(--groen-tekst); stroke-width: 1.5; }
.ffp-citaat__tekst { margin: 0; }
.ffp-citaat__tekst p {
  margin: 0; font-family: var(--letter-citaat); color: var(--blauw);
  font-size: 32px; line-height: 1.18; max-width: 22ch; text-wrap: balance; hyphens: manual;
}
.ffp-citaat__bron {
  font: 600 13px/1.4 var(--letter-tekst); letter-spacing: .12em; text-transform: uppercase;
  color: var(--grijs);
}
@media (min-width: 880px) {
  .ffp-citaat { grid-template-columns: 64px minmax(0, 1fr); column-gap: 32px; }
  .ffp-citaat__teken { width: 56px; height: 56px; grid-row: 1 / span 2; margin-top: 4px; }
  .ffp-citaat__tekst p { font-size: 48px; }
}
.lm-citaat { padding-block: 72px; }
@media (min-width: 880px) { .lm-citaat { padding-block: 104px; } }

/* Beeld met citaat (home): foto tot de linkerrand, citaat op zand */
.citaatbeeld { display: grid; }
.citaatbeeld__beeld { margin: 0; }
.citaatbeeld__img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.citaatbeeld__tekst { padding: 48px var(--rand) 56px; }
.citaatbeeld .ffp-citaat__tekst p { font-size: 34px; }
@media (min-width: 880px) {
  .citaatbeeld { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
  .citaatbeeld__img { aspect-ratio: auto; height: 100%; min-height: 480px; max-height: 620px; }
  .citaatbeeld__beeld { align-self: stretch; }
  .citaatbeeld__tekst { padding: 64px var(--rand) 64px 72px; max-width: calc(var(--maat) / 2 + 72px); }
  .citaatbeeld .ffp-citaat { grid-template-columns: 1fr; }
  .citaatbeeld .ffp-citaat__teken { grid-row: auto; }
  .citaatbeeld .ffp-citaat__tekst p { font-size: 44px; }
}

/* Rij met een liggende foto (drie kinderen naast elkaar): het beeldvak
   volgt de foto, zodat niemand eruit valt; op desktop een bredere kolom. */
.lm-rij--liggend .lm-rij__img { aspect-ratio: auto; }
@media (min-width: 880px) {
  .lm-rij--liggend { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .lm-rij--liggend .lm-rij__img { aspect-ratio: auto; }
}

/* Rij met een staande foto die heel moet blijven (Suzanne van top tot teen
   op Vermogensplanning; feedback 2026-09-29: "mijn voeten zijn eraf"). */
.lm-rij--heel .lm-rij__img { aspect-ratio: auto; }
@media (min-width: 880px) { .lm-rij--heel .lm-rij__img { aspect-ratio: auto; } }

/* Je geld en je leven (Life Planning, naast de intro) */
.lm-opening__raster { display: grid; gap: 48px; }
.lm-opening__raster .lm-intro { margin-inline: 0; }
.lm-opening__figuur { max-width: 520px; width: 100%; margin-inline: auto; }
@media (min-width: 1080px) {
  .lm-opening__raster { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 72px; align-items: start; }
  .lm-opening__figuur { position: sticky; top: calc(var(--kopbalk) + 40px); }
}
.geldleven { margin: 0; }
.geldleven__svg { width: 100%; height: auto; overflow: visible; }
.geldleven__cirkel { stroke-width: 3; }
.geldleven__cirkel--geld { fill: var(--groen-zacht); stroke: var(--groen); }
.geldleven__cirkel--leven { fill: var(--zeelicht); stroke: var(--blauw); fill-opacity: .85; }
.geldleven__overlap { stroke: none; }
.geldleven__arceringvlak { fill: var(--groen-zacht); }
.geldleven__arcering { stroke: var(--blauw); stroke-width: 3; }
.geldleven__label {
  font-family: var(--letter-kop); font-weight: 500; font-size: 24px;
  letter-spacing: .08em; text-transform: uppercase;
}
.geldleven__label--geld { fill: var(--groen-tekst); }
.geldleven__label--leven { fill: var(--blauw); }
.geldleven__pijl, .geldleven__pijlpunt { fill: none; stroke: var(--blauw); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.geldleven__onder {
  font-family: var(--letter-kop); font-weight: 500; font-size: 22px;
  letter-spacing: .16em; text-transform: uppercase; fill: var(--blauw);
}

/* Life Planning: midden in groen, acht levensgebieden eromheen */
.lm-rij--figuur { display: grid; gap: 32px; }
.lm-rij__figuur { min-width: 0; }
@media (min-width: 1080px) {
  .lm-rij--figuur { grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); column-gap: 64px; align-items: center; }
  .lm-rij--figuur .proza ul.lijst-2 { columns: 1; }
}
.levenswiel { margin: 0; }
.levenswiel__raster { display: grid; gap: 16px; }
.levenswiel__kant { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.levenswiel__gebied {
  display: flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 10px 14px;
  background: var(--blauw); color: var(--wit); border-radius: 10px;
  font: 500 16px/1.2 var(--letter-kop); letter-spacing: .01em;
  hyphens: manual;
}
.levenswiel__icoon { width: 22px; height: 22px; flex: none; color: var(--groen-op-blauw); }
.levenswiel__midden {
  order: -1; margin: 0;
  display: grid; justify-items: center; gap: 8px;
  padding: 20px 16px; border-radius: 14px;
  background: var(--groen); color: var(--blauw-diep);
  font: 600 22px/1.2 var(--letter-kop); text-align: center;
}
.levenswiel__kiem { width: 40px; height: 40px; color: var(--blauw-diep); stroke-width: 1.75; }
@media (min-width: 600px) {
  .levenswiel__raster { grid-template-columns: minmax(0, 1fr) minmax(0, 150px) minmax(0, 1fr); column-gap: 64px; align-items: center; }
  .levenswiel__midden { order: 0; align-self: center; aspect-ratio: 1; align-content: center; position: relative; }
  .levenswiel__kant { grid-template-columns: 1fr; gap: 14px; position: relative; }
  /* verbindingslijnen: per label een streepje naar de rail, de rail, en
     van de rail naar het midden */
  .levenswiel__gebied { position: relative; }
  .levenswiel__kant--links .levenswiel__gebied::after,
  .levenswiel__kant--rechts .levenswiel__gebied::before {
    content: ""; position: absolute; top: 50%; width: 32px; border-top: 2px solid var(--groen);
  }
  .levenswiel__kant--links .levenswiel__gebied::after { left: 100%; }
  .levenswiel__kant--rechts .levenswiel__gebied::before { right: 100%; }
  .levenswiel__kant::after {
    content: ""; position: absolute; top: 24px; bottom: 24px; border-left: 2px solid var(--groen);
  }
  .levenswiel__kant--links::after { left: calc(100% + 31px); }
  .levenswiel__kant--rechts::after { right: calc(100% + 31px); }
  .levenswiel__midden::before, .levenswiel__midden::after {
    content: ""; position: absolute; top: 50%; width: 32px; border-top: 2px solid var(--groen);
  }
  .levenswiel__midden::before { right: 100%; }
  .levenswiel__midden::after { left: 100%; }
}

/* Money beliefs: vijf overtuigingen naast elkaar, met haar vraag erboven */
.overtuigingen__kop { max-width: 640px; margin-bottom: 40px; }
.overtuigingen__titel { margin: 0 0 12px; }
.overtuigingen__titel::before {
  content: ""; display: block; width: 48px; height: 2px;
  background: var(--groen); margin-bottom: 20px;
}
.overtuigingen__intro { margin: 0; font-size: 19px; line-height: 1.55; color: var(--inkt); hyphens: manual; }
.overtuigingen__lijst {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px;
}
.overtuiging { display: grid; justify-items: start; gap: 14px; }
.overtuiging .schijf { color: var(--blauw); }
.overtuiging__tekst {
  font-family: var(--letter-citaat); font-size: 22px; line-height: 1.25; color: var(--blauw);
  hyphens: manual; text-wrap: balance;
}
@media (min-width: 880px) {
  .overtuigingen__lijst { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; border-top: var(--horizon); padding-top: 40px; }
  .overtuiging { justify-items: center; text-align: center; }
  .overtuiging__tekst { font-size: 24px; }
}

/* Over: Pip, en het certificaat bij Kennis en erkenning */
.over-pip {
  margin: 32px 0 0; display: flex; align-items: center; gap: 18px;
  padding-top: 24px; border-top: var(--horizon);
}
.over-pip__img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex: none; }
.over-pip__tekst { display: grid; gap: 4px; }
.over-pip__naam { font-family: var(--letter-citaat); font-size: 26px; line-height: 1.1; color: var(--blauw); }
.over-pip__link { color: var(--groen-tekst); font-weight: 600; text-underline-offset: 3px; }
.over-bewijs__certificaat { margin: 32px 0 0; max-width: 300px; }
.over-bewijs__certificaatimg { border-radius: 4px; box-shadow: var(--schaduw); background: var(--wit); }

/* Contactformulier op zand; het formulier zelf op wit */
.formulierband__raster { display: grid; gap: 32px; }
.formulierband__kop { margin: 0 0 16px; }
.formulierband__kop::before {
  content: ""; display: block; width: 48px; height: 2px;
  background: var(--groen); margin-bottom: 20px;
}
.formulierband__mail { margin: 0; color: var(--grijs); font-size: 16px; }
.formulierband__mail a { color: var(--blauw); font-weight: 600; text-underline-offset: 3px; }
.formulier {
  background: var(--wit); border-radius: 16px; box-shadow: var(--schaduw);
  padding: 28px 22px; display: grid; gap: 22px;
}
.formulier__rij { display: grid; gap: 22px; }
.veld { margin: 0; display: grid; gap: 8px; }
.veld__label { font: 600 16px/1.3 var(--letter-tekst); color: var(--blauw); padding: 0; }
.veld__optioneel { font-weight: 400; color: var(--grijs); }
.veld__hulp { font-size: 15px; line-height: 1.5; color: var(--grijs); margin-top: -2px; }
.veld__invoer {
  width: 100%; min-height: 52px; padding: 12px 14px;
  font: 400 17px/1.4 var(--letter-tekst); color: var(--inkt);
  background: var(--wit); border: 1.5px solid var(--veldrand); border-radius: 10px;
  transition: border-color var(--overgang), box-shadow var(--overgang);
}
.veld__invoer--tekst { min-height: 160px; resize: vertical; }
.veld__invoer:hover { border-color: var(--blauw); }
.veld__invoer:focus-visible { outline: none; border-color: var(--blauw); box-shadow: 0 0 0 3px var(--focus); }
.veld__invoer[aria-invalid="true"] { border-color: var(--fout); }
.veld--val { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.keuzes { border: 0; margin: 0; padding: 0; min-width: 0; }
.keuzes > legend { margin-bottom: 12px; }
.keuzes__lijst { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.keuze {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 8px 14px 8px 12px;
  border: 1.5px solid var(--veldrand); border-radius: 999px;
  font: 500 15px/1.2 var(--letter-kop); color: var(--blauw); background: var(--wit);
  cursor: pointer; user-select: none;
  transition: background-color var(--overgang), border-color var(--overgang);
}
.keuze__icoon { width: 18px; height: 18px; color: var(--groen-tekst); }
.keuze:hover { border-color: var(--blauw); }
.keuze__invoer:checked + .keuze { background: var(--blauw); border-color: var(--blauw); color: var(--wit); }
.keuze__invoer:checked + .keuze .keuze__icoon { color: var(--groen-op-blauw); }
.keuze__invoer:focus-visible + .keuze { outline: 3px solid var(--focus); outline-offset: 2px; }
.vinkje { margin: 0; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; }
.vinkje__invoer { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--blauw); }
.vinkje__invoer[aria-invalid="true"] { outline: 2px solid var(--fout); outline-offset: 2px; }
.vinkje__label { font-size: 16px; line-height: 1.5; hyphens: manual; }
.vinkje__label a { color: var(--blauw); font-weight: 600; text-underline-offset: 3px; }
.formulier__verstuur { display: grid; gap: 14px; justify-items: start; }
.formulier__knop[disabled] { opacity: .6; cursor: progress; }
.formulier__melding { margin: 0; font-size: 16px; line-height: 1.5; min-height: 1.5em; }
.formulier__melding[data-soort="fout"] { color: var(--fout); }
.formulier__melding[data-soort="ok"] { color: var(--groen-tekst); font-weight: 600; }
.formulier__melding[data-soort="info"] { color: var(--blauw); padding: 12px 14px; background: var(--zeelicht); border-radius: 10px; }
@media (min-width: 720px) {
  .formulier { padding: 40px; }
  .formulier__rij--2 { grid-template-columns: 1fr 1fr; }
  .veld--half { max-width: calc(50% - 11px); }
}
@media (min-width: 880px) {
  .formulierband__raster { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 64px; align-items: start; }
  .formulierband__intro { position: sticky; top: calc(var(--kopbalk) + 32px); }
}
.contactblok__thuis { display: flex; align-items: center; gap: 10px; margin-top: 20px !important; }
.contactblok__thuis .icoon { width: 20px; height: 20px; color: var(--groen-op-blauw); flex: none; }

/* Startpaneel van de Wegwijzer (home): financiële planning, haar kern.
   Alleen op desktop, waar het paneel naast de paal staat. */
.bord__tekst { margin: 0 0 18px; font-size: 17px; line-height: 1.6; color: var(--inkt); }
@media (max-width: 1079.98px) { .bord__paneel--start { display: none; } }
@media (min-width: 1080px) { .bord__paneel--start { animation: none; } }

/* Onderste regel van de voet: AI-vermelding links, "Website door joepa" rechts (zoals op elke joepa-klantsite) */
.voet__slot {
  flex-basis: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline;
  gap: 8px 32px; margin-top: 8px;
}
.voet__ai { margin: 0; font-size: 13px; line-height: 1.5; color: var(--grijs); }
.voet__joepa { margin: 0; font-size: 14px; color: var(--grijs); }
.voet__onder .voet__joepa a { color: var(--blauw); font-weight: 700; text-underline-offset: 3px; }