/* ============================================================
   Mijn Pleegouders, site styles
   Foundations (kleuren, type, fonts) komen uit css/styles.css.
   Dit bestand volgt het definitieve ontwerp (Mijn Pleegouders.dc.html).
   ============================================================ */

* { box-sizing: border-box; }
/* overflow-x op html (de scroll-root), niet op body: op body breekt het de
   sticky header in iOS Safari (WebKit-bug), op html niet. Voorkomt nog steeds
   horizontaal scrollen. */
html { scroll-behavior: smooth; overflow-x: clip; }
html, body { margin: 0; }
body { background: var(--mpo-surface); color: var(--mpo-ink); font-family: var(--font-body);
  -webkit-tap-highlight-color: transparent; }
img { max-width: 100%; }

/* Toetsenbord-focus zichtbaar, zonder ringen bij muisklikken */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid var(--mpo-teal-200); outline-offset: 2px; }

/* Soft UI: high-blur, low-opacity shadows (ontwerp overschrijft de tokens) */
:root {
  --shadow-sm: 0 6px 26px rgba(60,60,59,.045);
  --shadow-md: 0 16px 48px rgba(60,60,59,.06);
  --shadow-lg: 0 30px 80px rgba(103,48,103,.10);

  /* Eén horizontale kantlijn voor de hele site. Secties zetten hem in hun
     inline padding als var(--gutter), zodat smalle schermen niet 64px aan
     lege marge verliezen op een breedte van 375px. */
  --gutter: 32px;

  /* Werkelijke hoogte van de plakkende header, per breakpoint. Ankerlinks
     gebruiken dit als scroll-margin, anders landt een #anker onder de balk. */
  --hdr-h: 116px;
}
@media (max-width: 1024px) { :root { --hdr-h: 76px; } }
@media (max-width: 640px)  { :root { --gutter: 22px; --hdr-h: 64px; } }
@media (max-width: 360px)  { :root { --gutter: 18px; } }

/* Respecteer de systeemvoorkeur voor minder beweging. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

/* ============ Iconen ============
   Eén getekende set, geen unicode-tekens die per besturingssysteem anders
   vallen. Alles op stroke 2 in een 24-raster, kleur volgt currentColor.
   Vormen die in een ::before zitten gebruiken hetzelfde pad als masker. */
.ico { flex: none; width: 1em; height: 1em; display: inline-block; vertical-align: -.125em;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ico-sm { width: .8em; height: .8em; }
/* Gesloten vormen (hart) zijn gevuld, niet getekend. Een fill-attribuut op de
   svg zelf verliest het van deze regel, dus dat gaat via een klasse. */
.ico-vlak { fill: currentColor; stroke: none; }

/* Vormen die als masker of achtergrond dienen. Een masker neemt de kleur van
   het element; een background-image niet, daar staat de kleur in het pad. */
:root {
  --ico-check-teal: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%230F5F62" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12.5 9.5 18 20 6.5"/></svg>');
  --ico-hart: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><path d="M12 20.7 3.9 12.9a5 5 0 0 1 7.1-7.1l1 1 1-1a5 5 0 0 1 7.1 7.1Z"/></svg>');
  --ico-klok: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 7v5.4l3.4 2"/></svg>');
  --ico-herhaal: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 12a8 8 0 1 1-2.6-5.9"/><path d="M20 4v4.6h-4.6"/></svg>');
}

/* Afloopteken op donatie-afgerond: JS zet hier ico-hart / ico-klok / ico-herhaal. */
.afloop-teken { width: 44px; height: 44px; margin: 0 auto 18px; background-color: var(--mpo-magenta);
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.afloop-teken.ico-hart { --ico: var(--ico-hart); }
.afloop-teken.ico-klok { --ico: var(--ico-klok); background-color: var(--mpo-gold-600); }
.afloop-teken.ico-herhaal { --ico: var(--ico-herhaal); background-color: var(--mpo-purple); }

a { color: var(--mpo-magenta); text-decoration: none; transition: color .16s ease; }
a:hover { color: var(--mpo-magenta-600); }
button { font-family: var(--font-body); transition: transform .24s cubic-bezier(.2,.7,.3,1), box-shadow .24s ease, background .2s ease, border-color .2s ease; }
button:hover { transform: translateY(-2px); }
button:active { transform: translateY(0) scale(.98); }

/* Gentle, calm card hover */
[data-card] { transition: transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s ease; }
[data-card]:hover { transform: translateY(-4px); box-shadow: 0 26px 64px rgba(103,48,103,.11) !important; }

/* Knooppunten komen op met een exponentiële uitloop, zonder doorschieten.
   translate(-50%,-50%) zet het bolletje op het pad; die moet in beide keyframes
   staan, anders schuift de animatie het een halve diameter naar rechtsonder. */
@keyframes nodePop {
  from { opacity:0; transform:translate(-50%,-50%) scale(.72); }
  to   { opacity:1; transform:translate(-50%,-50%) scale(1); }
}
/* De kaart is met translateY(-50%) op zijn knooppunt gecentreerd. Die verschuiving
   moet in de keyframes terugkomen, anders overschrijft de animatie hem en zakt
   elke kaart een halve kaarthoogte omlaag. */
@keyframes cardRise { from { opacity:0; transform:translateY(calc(-50% + 14px)); } to { opacity:1; transform:translateY(-50%); } }
/* Voor de route-kaartjes: die centreren horizontaal, dus de translateX moet in
   de keyframes terugkomen; de geklemde buitenste kaartjes hebben geen transform. */
@keyframes kaartRise { from { opacity:0; transform:translate(-50%,14px); } to { opacity:1; transform:translate(-50%,0); } }
@keyframes kaartRiseVast { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }
@keyframes dashFlow { to { stroke-dashoffset: -40; } }

.shell { max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter); }

/* ============ Buttons ============ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-body); font-weight: 700; font-size: 16px;
  border: none; border-radius: 9px; padding: 14px 26px; color: #fff; cursor: pointer;
  text-decoration: none;
  transition: transform .16s ease, background .2s ease, color .2s ease, opacity .2s ease; }
a.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.97); }
.btn-sm { font-size: 14px; padding: 11px 20px; }
.btn-lg { font-size: 17px; padding: 15px 30px; }
.btn-teal { background: var(--mpo-teal); }
.btn-teal:hover { background: var(--mpo-teal-600); color: #fff; }
.btn-purple { background: var(--mpo-purple); }
.btn-purple:hover { background: var(--mpo-purple-800); color: #fff; }
.btn-magenta { background: var(--mpo-magenta); }
.btn-magenta:hover { background: var(--mpo-magenta-600); color: #fff; }
.btn-gold { background: var(--mpo-gold); color: var(--mpo-ink); }
.btn-gold:hover { background: var(--mpo-gold-600); color: var(--mpo-ink); }
/* De tweede knop is een zacht vlak in plaats van een omlijnde knop, zodat ook
   hier geen lijn overblijft. Het kleurverschil met btn-magenta doet het werk. */
/* Tekst op magenta-600, niet op magenta: het volle magenta haalt op deze
   zachte vulling 4,07:1 en dat is te weinig voor 16px vet. Nu 5,58:1. */
.btn-outline { background: var(--mpo-magenta-100); border: none; color: var(--mpo-magenta-600); padding: 14px 26px; }
.btn-outline:hover { background: var(--mpo-magenta-100-hover); color: var(--mpo-magenta-600); }
.btn-outline.on-white { background: #fff; }
.btn-outline.on-white:hover { background: #fff; color: var(--mpo-magenta-600); }
.btn-block { width: 100%; }

/* ============ Header ============ */
.hdr { position: sticky; top: 0; z-index: 60; background: rgba(251,249,247,.94);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--mpo-line); }
.topbar { background: var(--mpo-purple); color: #fff; }
.topbar-in { height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.topbar-in > span { font-size: 13px; color: rgba(255,255,255,.78); }
.topbar-links { display: flex; align-items: center; gap: 20px; }
.topbar-links a { color: rgba(255,255,255,.85); font-size: 13.5px; font-weight: 600; }
.topbar-links a:hover { color: #fff; }
.topbar-login { display: inline-flex; align-items: center; gap: 6px; color: #fff !important; font-weight: 700 !important;
  border: 1px solid rgba(255,255,255,.35); border-radius: 7px; padding: 4px 14px; }
.topbar-login:hover { background: rgba(255,255,255,.12); }
.topbar-login .glyph { font-size: 12px; }

.hdr-in { height: 76px; display: flex; align-items: center; gap: 24px; }
.hdr-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.hdr-logo img { width: 44px; height: 44px; border-radius: 7px; display: block; }
.hdr-logo span { font-family: var(--font-display); font-weight: var(--fw-display); font-size: 20px; color: var(--mpo-purple); }

.hdr-nav { display: flex; gap: 26px; margin-left: 12px; }
.hdr-nav > a, .nav-drop-btn { position: relative; display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-body); font-weight: 600; font-size: 15px; color: var(--mpo-ink);
  cursor: pointer; padding: 4px 0; white-space: nowrap; background: none; border: none; }
.hdr-nav > a:hover, .nav-drop-btn:hover { color: var(--mpo-magenta); transform: none; }
.hdr-nav > a.active::after, .nav-drop.active .nav-drop-btn::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 3px; border-radius: 3px; background: var(--mpo-magenta); }
.nav-drop-btn .caret { display: inline-flex; color: var(--mpo-ink-50); }
.nav-drop-btn .caret .ico { width: 13px; height: 13px; vertical-align: 0; stroke-width: 2.4;
  transition: transform .2s cubic-bezier(.2,.7,.3,1); }
.nav-drop:hover .caret .ico, .nav-drop.open .caret .ico { transform: rotate(180deg); }
.nav-drop { position: relative; }
.nav-drop-wrap { position: absolute; top: 100%; left: -14px; padding-top: 12px; z-index: 60; display: none; }
.nav-drop:hover .nav-drop-wrap, .nav-drop.open .nav-drop-wrap, .nav-drop:focus-within .nav-drop-wrap { display: block; }
.nav-drop-menu { background: #fff; border-radius: 11px; box-shadow: var(--shadow-lg); padding: 8px; min-width: 220px; display: flex; flex-direction: column; }
.nav-drop-menu a { display: block; padding: 11px 14px; border-radius: 8px; font-weight: 600; font-size: 15px; color: var(--mpo-purple); white-space: nowrap; transition: background .16s; }
.nav-drop-menu a:hover { background: var(--mpo-magenta-100); color: var(--mpo-purple); }

.hdr-cta { margin-left: auto; display: flex; align-items: center; gap: 12px; }

.hamburger { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
  background: transparent; border: none; cursor: pointer; width: 44px; height: 44px; margin-right: -8px; }
.hamburger span { display: block; width: 26px; height: 3px; border-radius: 3px; background: var(--mpo-purple);
  transition: transform .22s cubic-bezier(.2,.7,.3,1), opacity .16s ease; }
/* Open menu: de drie streepjes worden een kruis, zodat de knop zijn eigen
   toestand toont in plaats van alleen het paneel eronder. */
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Het paneel scrollt zelf en stopt onder de header; 100dvh houdt rekening met
   de adresbalk van mobiele browsers, die vh laat liegen. */
.mobile-menu { display: none; border-top: 1px solid var(--mpo-line); background: var(--mpo-surface);
  padding: 8px var(--gutter) calc(26px + env(safe-area-inset-bottom));
  max-height: calc(100dvh - var(--hdr-h)); overflow-y: auto; overscroll-behavior: contain; }
.mobile-menu.open { display: block; }
.mobile-menu .mm-item { display: flex; align-items: center; min-height: 52px; font-family: var(--font-body); font-weight: 700; font-size: 18px; color: var(--mpo-purple); border-bottom: 1px solid var(--mpo-line); }
.mobile-menu .mm-sub { padding: 2px 0 10px 16px; display: flex; flex-direction: column; }
.mobile-menu .mm-sub a { display: flex; align-items: center; min-height: 46px; font-weight: 600; font-size: 15.5px; color: var(--mpo-ink-70); }
.mobile-menu .btn { width: 100%; margin-top: 10px; }
.mobile-menu .btn:first-of-type { margin-top: 16px; }
.mobile-menu .mm-login { display: block; text-align: center; margin-top: 14px; font-family: var(--font-body); font-weight: 700; font-size: 15px; color: var(--mpo-purple); }

@media (max-width: 1024px) {
  .topbar, .hdr-nav, .hdr-cta .btn-purple { display: none; }
  .hamburger { display: inline-flex; }
}
@media (max-width: 640px) {
  .hdr-cta .btn-teal { display: none; }
}

/* ============ Type helpers ============
   Display = Basic, alleen Regular 400. Koppen krijgen daarom wat negatieve
   letterafstand en iets meer regelafstand, zodat ze op desktop stevig ogen
   zonder op mobiel dicht te slibben. Nooit een zwaarder gewicht opgeven. */
h1 { font-family: var(--font-display); font-weight: var(--fw-display); line-height: 1.08; letter-spacing: -.02em; color: var(--mpo-purple); }
h2 { font-family: var(--font-display); font-weight: var(--fw-display); line-height: 1.16; letter-spacing: -.015em; }
h3, h4 { font-family: var(--font-display); font-weight: var(--fw-display); line-height: 1.26; letter-spacing: -.01em; color: var(--mpo-purple); }
h1 em, h2 em, h3 em, h4 em { font-style: normal; color: var(--mpo-magenta); }
h2 em { color: var(--mpo-purple); }

/* Op smalle schermen loopt -.02em snel te krap; iets terugnemen. */
@media (max-width: 640px) {
  h1 { letter-spacing: -.015em; line-height: 1.12; }
  h2 { letter-spacing: -.01em; line-height: 1.2; }
}
.eyebrow { font-family: var(--font-body); font-weight: 700; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mpo-teal-600); }
.eyebrow-gold { color: var(--mpo-gold-200); }
.lead-p { font-size: 19px; line-height: 1.6; color: var(--mpo-ink-70); }

/* ============ Cards & grids ============ */
/* Kaarten dragen geen kaderlijn. Ze komen los van de achtergrond door
   een zachte schaduw en hun eigen vlak, nooit door een omlijning. */
.card { background: #fff; border-radius: 9px; box-shadow: var(--shadow-md); }
.g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.g3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 26px; }
@media (max-width: 900px) {
  .g2, .g3 { grid-template-columns: 1fr; }
}

/* ============ Formulieren ============ */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-weight: 700; font-size: 13.5px; color: var(--mpo-ink); }
/* Velden zijn gevulde vlakken, geen omlijnde vakjes. De vulling maakt ze
   herkenbaar als invoer; focus zetten we met een ring die buiten het vak valt
   en dus geen kader op het element zelf is. */
.in { font-family: var(--font-body); font-size: 15.5px; color: var(--mpo-ink); padding: 14px 16px;
  border: none; border-radius: 8px; outline: none; background: var(--mpo-surface-2); width: 100%;
  transition: background .15s ease, box-shadow .15s ease; }
/* ink-50 haalt op dit vlak maar 3:1; placeholders staan daarom op ink-70. */
.in::placeholder { color: var(--mpo-ink-70); opacity: 1; }
.in:hover { background: var(--mpo-surface-2-hover); }
.in:focus { background: #fff; box-shadow: 0 0 0 3px var(--acc-soft, var(--mpo-teal-100)), 0 0 0 5px var(--acc, var(--mpo-teal)); }
.in:focus-visible { outline: none; }
textarea.in { resize: vertical; }
select.in { appearance: none; -webkit-appearance: none; padding-right: 42px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%236A6068" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>');
  background-repeat: no-repeat; background-position: right 15px center; background-size: 16px 16px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.form-grid .span2 { grid-column: 1 / -1; }
@media (max-width: 720px) { .form-grid { grid-template-columns: 1fr; } }

/* Keuzeknoppen (aanmelden, doneren, kgw). Niet gekozen = zacht vlak,
   gekozen = vol accent. Het verschil zit in de vulling, niet in een rand. */
.choice { cursor: pointer; font-family: var(--font-body); font-size: 14.5px; text-align: left;
  padding: 14px 16px; border: none; background: var(--mpo-surface-2); border-radius: 8px; color: var(--mpo-ink);
  min-height: 46px; transition: background .16s ease, color .16s ease; }
.choice:hover { background: var(--mpo-surface-2-hover); transform: none; }
.choice.sel, .choice.sel:hover { background: var(--acc, var(--mpo-teal)); color: #fff; }
.chip-choice { cursor: pointer; font-family: var(--font-body); font-size: 13.5px; padding: 9px 14px;
  border-radius: 8px; border: none; background: var(--mpo-surface-2); color: var(--mpo-ink); min-height: 38px; }
.chip-choice:hover { background: var(--mpo-surface-2-hover); transform: none; }
.chip-choice.sel, .chip-choice.sel:hover { background: var(--mpo-magenta); color: #fff; }

.acc-teal { --acc: var(--mpo-teal); --acc-soft: var(--mpo-teal-100); }
.acc-magenta { --acc: var(--mpo-magenta); --acc-soft: var(--mpo-magenta-100); }
.acc-gold { --acc: var(--mpo-gold); --acc-soft: var(--mpo-gold-100); }
.acc-purple { --acc: var(--mpo-purple); --acc-soft: var(--mpo-purple-100); }

/* ============ FAQ ============ */
.faq-item { background: #fff; border-radius: 9px; box-shadow: var(--shadow-sm); overflow: hidden; }
.faq-q { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px;
  cursor: pointer; width: 100%; border: none; background: none; text-align: left; }
.faq-q:hover { transform: none; }
.faq-q span:first-child { font-family: var(--font-body); font-weight: 700; font-size: 18px; color: var(--mpo-purple); }
.faq-sign { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--mpo-magenta-100); color: var(--mpo-magenta);
  display: flex; align-items: center; justify-content: center; }
.faq-sign .ico { width: 15px; height: 15px; vertical-align: 0; }
/* Plus wordt min: de staande streep klapt dicht als het item opengaat. */
.faq-sign .ico .staand { transform-origin: center; transition: transform .22s cubic-bezier(.2,.7,.3,1); }
.faq-item.open .faq-sign .ico .staand { transform: scaleY(0); }
.faq-a { display: none; padding: 0 24px 22px; font-size: 16px; line-height: 1.65; color: var(--mpo-ink-70); }
.faq-item.open .faq-a { display: block; }

/* Twee kolommen die elk hun eigen hoogte houden. Met één raster zouden de
   rijen gedeeld worden en trok een opengeklapt antwoord een gat in de buurkolom. */
.faq-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 22px; align-items: start; }
.faq-kolom { display: flex; flex-direction: column; gap: 14px; }
@media (max-width: 860px) { .faq-raster { grid-template-columns: 1fr; } }

/* ============ Traject-roadmap (pleegouder worden) ============ */
/* Verhouding volgt de viewBox van de route (960x1080). Wijzig je de een,
   wijzig dan de ander, anders lopen het pad en de knooppunten uit elkaar. */
.roadmap { position: relative; width: 100%; max-width: 960px; margin: 36px auto 0; aspect-ratio: 960/1080; }
.roadmap svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.rm-node { position: absolute; transform: translate(-50%,-50%); z-index: 2; width: 58px; height: 58px; border-radius: 50%;
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-weight: 700; font-size: 23px;
  animation: nodePop .55s cubic-bezier(.16,1,.3,1) both; }
.rm-card { position: absolute; transform: translateY(-50%); width: 268px; background: #fff; border-radius: 10px;
  padding: 16px 20px; box-shadow: 0 14px 40px rgba(103,48,103,.1); animation: cardRise .5s ease both; z-index: 1; }
.rm-owner { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-body); font-weight: 700;
  font-size: 11.5px; letter-spacing: .04em; color: #fff; border-radius: 6px; padding: 4px 11px; margin-bottom: 8px; }
.rm-card h3 { margin: 0; font-size: 19px; text-align: left; }
.rm-card p { font-size: 15px; line-height: 1.55; color: var(--mpo-ink-70); margin: 5px 0 0; text-align: left; }
@media (max-width: 820px) {
  .roadmap { aspect-ratio: auto; display: flex; flex-direction: column; gap: 16px; }
  .roadmap svg { display: none; }
  .rm-node { position: static; transform: none; flex: none; width: 44px; height: 44px; font-size: 18px; animation: none; }
  .rm-card { position: static; transform: none; width: auto; animation: none; text-align: left !important; }
  .rm-step { display: flex; gap: 14px; align-items: flex-start; }
}
@media (min-width: 821px) { .rm-step { display: contents; } }

/* ============ Footer ============ */
.ftr { background: var(--mpo-purple-800); color: #fff; padding: 0 0 34px; margin-top: 40px; }
.prefooter { background: var(--mpo-magenta-100); padding: 72px 0; }
.prefooter h2 { color: var(--mpo-purple); margin: 0; font-size: clamp(26px,3vw,38px); line-height: 1.15; }
.prefooter p { color: var(--mpo-ink-70); font-size: 17px; line-height: 1.6; margin: 20px auto 32px; max-width: 820px; }
.prefooter .actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.ftr-main { padding-top: 56px; }
.ftr-grid { display: grid; grid-template-columns: 1.4fr repeat(4,1fr); gap: 32px; }
.ftr-brand p { color: rgba(255,255,255,.72); font-size: 15px; line-height: 1.6; max-width: 290px; margin: 0; }
.ftr-brand .addr { color: rgba(255,255,255,.55); font-size: 14px; margin-top: 20px; line-height: 1.65; }
.ftr-brand .addr a { color: rgba(255,255,255,.78); }
.ftr-brand .addr a:hover { color: #fff; }
.mit10-badge { margin-top: 18px; display: inline-flex; align-items: center; gap: 10px; background: rgba(255,255,255,.08);
  border-radius: 8px; padding: 8px 14px; font-size: 13px; color: rgba(255,255,255,.85); }
.mit10-badge .mark { font-family: Georgia, serif; font-weight: 700; color: var(--mpo-gold-200); }
.ftr-social { display: flex; gap: 10px; margin-top: 18px; }
.ftr-social a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  border-radius: 7px; background: rgba(255,255,255,.08); color: rgba(255,255,255,.78);
  transition: background .15s, color .15s; }
.ftr-social a:hover { background: rgba(255,255,255,.16); color: #fff; }
.ftr-social a:focus-visible { outline: 2px solid var(--mpo-gold-200); outline-offset: 2px; }
.ftr-grid h4 { font-size: 15px; color: #fff; margin: 0 0 16px; letter-spacing: .02em; }
.ftr-grid .col a { display: block; color: rgba(255,255,255,.72); font-size: 15px; margin-bottom: 11px; transition: color .15s; }
.ftr-grid .col a:hover { color: #fff; }
/* Verantwoording bij het beeldgebruik. Klein, maar op elke pagina zichtbaar. */
.beeld-noot { color: rgba(255,255,255,.55); font-size: 13.5px; line-height: 1.6;
  max-width: 620px; margin: 44px 0 0; }
.ftr-bottom { border-top: 1px solid rgba(255,255,255,.14); margin-top: 22px; padding-top: 22px;
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center;
  color: rgba(255,255,255,.55); font-size: 14px; }
.ftr-bottom a { color: rgba(255,255,255,.55); }
.ftr-bottom a:hover { color: #fff; }
.ftr-bottom .links { display: flex; gap: 22px; }
@media (max-width: 900px) {
  .ftr-grid { grid-template-columns: 1fr 1fr; gap: 28px 24px; }
}
@media (max-width: 560px) {
  .ftr-grid { grid-template-columns: 1fr; gap: 32px; }
  /* Footerlinks staan op de telefoon vlak op elkaar; hier krijgen ze een
     echt aanraakvlak in plaats van een regel tekst van 19px hoog. */
  .ftr-grid .col a { display: flex; align-items: center; min-height: 44px; margin-bottom: 0; }
  .ftr-grid h4 { margin-bottom: 6px; }
  .ftr-social a { width: 44px; height: 44px; }
  .ftr-bottom { gap: 12px; }
  .ftr-bottom .links { flex-wrap: wrap; gap: 4px 20px; }
  .ftr-bottom .links a { display: inline-flex; align-items: center; min-height: 44px; }
  .ftr-brand .addr a { display: inline-flex; align-items: center; min-height: 44px; }
  .hdr-logo { min-height: 44px; }
}

/* ============ Diversen ============ */
/* Signatuurhoek van het merk: drie rond, linksonder scherp. Kalmer gezet,
   in lijn met de strakkere hoeken elders. */
.logo-corner { border-radius: 20px 20px 4px 20px; }

/* Gekleurd vlak dat schuin achter een beeld uitsteekt (contact). De uitstek
   moet kleiner blijven dan de kantlijn, anders loopt hij op smalle schermen
   van de pagina af en wordt hij scheef afgekapt. */
.beeld-offset {
  position: absolute; inset: 26px -26px -26px 26px;
  border-radius: 20px 20px 4px 20px; background: var(--mpo-gold-100);
}
@media (max-width: 700px) { .beeld-offset { inset: 18px -14px -18px 18px; } }

/* MIT10 strookje (Over ons, bovenin) */
.mit10-strip { background: #14213d; color: #fff; }
.mit10-strip-in { display: flex; align-items: center; gap: 14px; padding: 12px var(--gutter); }
.mit10-strip-badge { display: inline-flex; align-items: center; }
.mit10-strip-badge .m10 { font-family: Georgia, "Times New Roman", serif; font-weight: 700;
  font-size: 18px; line-height: 1; letter-spacing: .02em; color: #fff; }
.mit10-strip-badge .m10 span { color: #E6B93D; }
.mit10-strip-txt { font-size: 14px; letter-spacing: .01em; color: rgba(255,255,255,.9); }
.mit10-strip-txt strong { color: #E6B93D; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: 12px; margin-right: 6px; }
@media (max-width: 640px) {
  .mit10-strip-in { gap: 10px; }
  .mit10-strip-txt { font-size: 13px; }
}

/* Foto-tegels. De merkfoto's zijn staande studiobeelden; op smalle schermen
   houden we ze daarom staand (4/5) in plaats van liggend, anders snijden we
   koppen af. Alleen de liggende reportagefoto blijft liggend. */
.media-tile { position: relative; overflow: hidden; }
.media-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.media-tile-11 { aspect-ratio: 1/1; }
.media-tile-45 { aspect-ratio: 4/5; }
.media-tile-54 { aspect-ratio: 5/4; }
.media-tile-169 { aspect-ratio: 16/9; }
@media (max-width: 900px) {
  .media-tile-11, .media-tile-45 { aspect-ratio: 4/5; }
  .media-tile-54 { aspect-ratio: 16/11; }
}
@media (max-width: 520px) {
  .media-tile-11, .media-tile-45 { aspect-ratio: 1/1; }
}

/* Verhaal-teaser (home) */
.teaser-grid { display: grid; grid-template-columns: .85fr 1.15fr; align-items: stretch; }
.teaser-media { position: relative; min-height: 320px; }
.teaser-body { padding: 56px 54px; }
@media (max-width: 900px) {
  .teaser-grid { grid-template-columns: 1fr; }
  .teaser-media { min-height: 230px; }
  .teaser-body { padding: 30px 26px 36px; }
}

/* Organogram (over ons) */
.org-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; position: relative; }
@media (max-width: 640px) {
  .org-grid { grid-template-columns: 1fr; margin-top: 18px; }
  .org-conn { display: none; }
}
/* ============ Beeldvullende hero (home) ============
   De foto is een rij van vijf figuren op vijf kleurvlakken. Dat beeld verdraagt
   geen uitsnede: snijd je de zijkanten af, dan verdwijnen de buitenste figuren
   en daarmee de boodschap. De verhouding van het bestand (1680x720) is dus
   leidend en de layout past zich aan, niet het beeld.

   Vanaf 1200px staat de tekst op de foto, zoals in het ontwerp. Daaronder is
   de foto te laag voor deze hoeveelheid tekst, dus stapelen we: beeld boven,
   tekst op aubergine eronder. */
.hero-vol {
  position: relative; isolation: isolate; display: block;
  background: var(--mpo-purple-800);
}
/* De foto wordt nooit zijdelings uitgesneden: hij hangt op zijn eigen
   verhouding aan de bovenkant en het vlak eronder is dezelfde diepe aubergine,
   zodat beeld, tekst en de sectie 'Waarom wij bestaan' in elkaar overlopen. */
.hero-vol > img { position: absolute; top: 0; left: 0; width: 100%; height: auto; z-index: 0; }
.hero-vol::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(to bottom,
    rgba(58,30,58,.62) 0%,
    rgba(58,30,58,.22) 22%,
    rgba(58,30,58,.34) 46%,
    rgba(58,30,58,.72) 66%,
    rgba(58,30,58,.94) 82%,
    var(--mpo-purple-800) 94%);
}
.hero-vol-inhoud {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  /* De tekst begint over de onderste helft van het beeld. */
  padding: 5vw clamp(20px, 5vw, 72px) clamp(38px, 5vw, 64px);
  gap: clamp(22px, 3vw, 40px);
}
.hero-vol-top, .hero-vol-onder { position: relative; z-index: 1; text-align: center; }
.hero-vol-onder { display: flex; flex-direction: column; align-items: center; gap: clamp(18px, 2vw, 28px); }

.hero-vol-eyebrow {
  font-family: var(--font-body); font-weight: 700;
  font-size: clamp(.72rem, .85vw, .85rem); letter-spacing: .12em; text-transform: uppercase;
  color: var(--mpo-gold-200); margin-bottom: clamp(10px, 1.4vw, 20px);
}
.hero-vol h1 {
  font-family: var(--font-display); font-weight: var(--fw-display);
  font-size: clamp(1.75rem, 3.4vw, 4rem); line-height: 1.04; letter-spacing: -.022em;
  color: var(--mpo-white); margin: 0 auto; max-width: 20ch; text-wrap: balance;
}
.hero-vol-onder p {
  margin: 0; font-family: var(--font-body);
  font-size: clamp(.95rem, .95vw, 1.0625rem); line-height: 1.7;
  color: rgba(255,255,255,.92); text-wrap: pretty; max-width: 78ch;
}
.hero-vol-acties { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* Desktop: het beeld vult de hero en de tekst staat erop, boven en onder. */
@media (min-width: 1200px) {
  .hero-vol { aspect-ratio: 1680 / 720; }
  .hero-vol > img { height: 100%; object-fit: cover; }
  /* De laatste stop is volledig dekkend, niet 94%: anders schemert de foto op
     de onderrand nog net door en tekent zich een streep af tegen de sectie
     eronder, die op dezelfde aubergine staat. */
  .hero-vol::after {
    background: linear-gradient(to bottom,
      rgba(58,30,58,.78) 0%,
      rgba(58,30,58,.44) 30%,
      rgba(58,30,58,.50) 52%,
      rgba(58,30,58,.94) 92%,
      var(--mpo-purple-800) 100%);
  }
  .hero-vol-inhoud {
    position: absolute; inset: 0;
    justify-content: space-between;
    padding: clamp(34px, 4vw, 64px) clamp(32px, 5vw, 72px);
  }
}

/* Tablet: iets meer beeld zichtbaar voordat de tekst begint. */
@media (max-width: 1199.98px) and (min-width: 700px) {
  .hero-vol-inhoud { padding-top: 24vw; }
}
/* Mobiel: de foto is dan maar ~150px hoog, dus de tekst start er direct onder. */
@media (max-width: 699.98px) {
  .hero-vol-inhoud { padding-top: calc(42vw + 18px); }
  .hero-vol::after {
    background: linear-gradient(to bottom,
      rgba(58,30,58,.30) 0%,
      rgba(58,30,58,.46) 30%,
      rgba(58,30,58,.86) 44%,
      var(--mpo-purple-800) 56%);
  }
}
@media (max-width: 560px) {
  .hero-vol-acties { flex-direction: column; align-self: stretch; }
  .hero-vol-acties .btn { width: 100%; }
}

/* Hero-variant voor een 1456×816-beeld (werken-bij): de foto is naar verhouding
   hoger dan de homepage-hero, dus de tekst start lager. */
@media (min-width: 1200px) { .hero-vol.hero-vol-56 { aspect-ratio: 1456 / 816; } }
@media (max-width: 699.98px) { .hero-vol.hero-vol-56 .hero-vol-inhoud { padding-top: calc(50vw + 18px); } }
@media (max-width: 1199.98px) and (min-width: 700px) { .hero-vol.hero-vol-56 .hero-vol-inhoud { padding-top: 30vw; } }

.hero-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 52px; align-items: center; }
.hero-grid-2 { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
@media (max-width: 900px) {
  .hero-grid, .hero-grid-2, .split { grid-template-columns: 1fr; }
}
.check-dot { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--mpo-teal-100); color: var(--mpo-teal-600);
  display: flex; align-items: center; justify-content: center; font-size: 15px; }

/* Routekaarten (aanmelden) */
.route-card { text-align: left; cursor: pointer; font-family: var(--font-body); background: #fff;
  border: none; border-radius: 11px; padding: 22px 22px 20px; box-shadow: var(--shadow-md);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.route-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.route-card.sel { background: var(--acc-soft, var(--mpo-teal-100)); }
.route-card .rc-tag { font-family: var(--font-body); font-weight: 700; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.route-card .rc-title { font-family: var(--font-display); font-weight: var(--fw-display); font-size: 19px; color: var(--mpo-ink); margin: 8px 0 6px; }
.route-card p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--mpo-ink-70); }

/* Aanmeld-wizard (typeform-stijl: één vraag per stap) */
.wizard { background: #fff; border-radius: 12px; padding: 34px 44px 30px; box-shadow: var(--shadow-md); }
.wz-top { display: flex; align-items: center; gap: 18px; margin-bottom: 30px; }
.wz-count { flex: none; font-family: var(--font-body); font-weight: 700; font-size: 14px; color: var(--mpo-magenta); white-space: nowrap; }
.wz-bar { flex: 1; height: 6px; border-radius: 999px; background: var(--mpo-surface-2); overflow: hidden; }
/* De balk schaalt op de compositor in plaats van zijn breedte te hertekenen;
   JS zet --wz-voortgang van 0 naar 1. */
.wz-fill { height: 100%; width: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--mpo-magenta), var(--mpo-purple));
  transform: scaleX(var(--wz-voortgang, 0)); transform-origin: left center;
  transition: transform .35s cubic-bezier(.22,1,.36,1); }
.wz-body { min-height: 200px; }
.wz-step { animation: wzIn .3s ease both; }
@keyframes wzIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.wz-q { font-family: var(--font-display); font-weight: var(--fw-display); font-size: clamp(21px, 2.6vw, 27px); line-height: 1.2; color: var(--mpo-purple); margin: 0 0 8px; }
.wz-help { font-size: 15.5px; line-height: 1.55; color: var(--mpo-ink-70); margin: 0 0 20px; }
.wz-q + .form-grid, .wz-q + .wz-options, .wz-q + .wz-chips, .wz-q + .in, .wz-q + div { margin-top: 18px; }
.wz-options { display: flex; flex-direction: column; gap: 10px; }
.wz-choice { font-size: 15.5px; padding: 15px 18px; border-radius: 9px; }
.wz-chips { display: flex; flex-wrap: wrap; gap: 8px; max-height: 250px; overflow-y: auto; padding: 4px; }
.wz-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 30px; }
.wz-back { background: none; border: none; cursor: pointer; font-family: var(--font-body); font-weight: 700; font-size: 15px; color: var(--mpo-ink-70); padding: 10px 0; }
.wz-back:hover { color: var(--mpo-purple); transform: none; }
.wz-next-wrap { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.wz-hint { font-size: 13px; color: var(--mpo-ink-70); }
.wz-error { color: var(--mpo-magenta-600); font-weight: 600; font-size: 14.5px; margin: 14px 0 0; }
.in.wz-invalid { border-color: var(--mpo-magenta); }

/* Kinderen-rijen in de wizard */
.kind-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.kind-nr { flex: none; width: 58px; font-family: var(--font-body); font-weight: 700; font-size: 14px; color: var(--mpo-purple); }
.kind-geslacht { display: flex; gap: 8px; flex-wrap: wrap; }
.k-geslacht { padding: 12px 22px; border-radius: 8px; }
.k-leeftijd { width: 120px; flex: none; }
.kind-del { flex: none; width: 38px; height: 38px; border-radius: 50%; border: none; background: var(--mpo-surface-2);
  color: var(--mpo-ink-50); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; }
.kind-del .ico { width: 16px; height: 16px; vertical-align: 0; }
.kind-del:hover { background: var(--mpo-magenta-100); color: var(--mpo-magenta); transform: none; }
.kind-row-invalid .k-geslacht { border-color: var(--mpo-magenta); }
.kind-add { margin-top: 6px; background: var(--mpo-teal-100); border: none; border-radius: 9px; padding: 11px 22px;
  font-family: var(--font-body); font-weight: 700; font-size: 15px; color: var(--mpo-teal-600); cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; transition: background .16s ease; }
.kind-add .ico { width: 16px; height: 16px; vertical-align: 0; }
.kind-add:hover { background: var(--mpo-teal-100-hover); transform: none; }

/* ============ Mobiel/tablet-polish ============ */
@media (max-width: 900px) {
  /* Tussenmaat: kaartbinnenwerk mag hier al krimpen, de kolom is smal. */
  .aanbod-kaart { padding: 24px 22px; }
  .pilot-stap { padding: 18px 20px; gap: 14px; }
}
@media (max-width: 640px) {
  /* iOS zoomt in op velden onder 16px, dus op mobiel altijd 16px */
  .in { font-size: 16px; }
  .hdr-in { height: 64px; gap: 14px; }
  .hdr-logo img { width: 38px; height: 38px; border-radius: 6px; }
  .hdr-logo span { font-size: 18px; }
  .btn { font-size: 15.5px; padding: 13px 22px; }
  .btn-lg { font-size: 16px; padding: 14px 24px; }
  .btn-outline { padding: 11px 20px; }
  .lead-p { font-size: 17.5px; line-height: 1.62; }
  .prefooter { padding: 48px 0; }
  .prefooter p { font-size: 16px; margin: 16px auto 26px; }
  .prefooter .actions { flex-direction: column; }
  .prefooter .actions .btn { width: 100%; }
  .ftr-main { padding-top: 44px; }

  .faq-q { padding: 16px 18px; gap: 12px; }
  .faq-q span:first-child { font-size: 16.5px; }
  .faq-a { padding: 0 18px 18px; font-size: 15.5px; }
  .cijfer { padding: 26px 24px; }
  .vormen li { padding: 14px 18px; }
  .werkwijze { gap: 22px; }

  .wizard { padding: 24px 22px; }
  .wz-hint { display: none; }
  .wz-body { min-height: 200px; }
  .wz-q { font-size: 20px; }
  .wz-footer { gap: 12px; }
  .wz-next-wrap .btn { min-width: 128px; }
  .kind-nr { width: 100%; }
  .k-leeftijd { flex: 1; min-width: 90px; }
  .don-keuze { padding: 18px 20px; }
  .btn-bedrag { padding: 12px 16px; }
}

/* Tabs (kindgericht werven). Een pil in een pil oogde bolvormig en week af van
   de rest; dit is een rustige segmentkeuze met een strakke hoek. */
.kgw-kies-kop { margin: 0 0 16px; font-size: clamp(22px, 2.2vw, 27px); color: var(--mpo-purple); }
.kgw-tabs { display: flex; gap: 6px; flex-wrap: wrap; background: var(--mpo-surface-2);
  padding: 6px; border-radius: 7px; width: fit-content; }
.kgw-tab { font-family: var(--font-body); font-weight: 700; font-size: clamp(15px, 1.2vw, 16px);
  border: none; border-radius: 7px; min-height: 46px;
  padding: 12px 22px; cursor: pointer; background: transparent; color: var(--mpo-ink-70);
  transition: background .18s ease, color .18s ease; }
.kgw-tab:hover { background: rgba(255,255,255,.7); color: var(--mpo-ink); transform: none; }
.kgw-tab.sel, .kgw-tab.sel:hover { background: var(--mpo-purple); color: #fff; }
@media (max-width: 700px) {
  .kgw-tabs { width: 100%; flex-direction: column; }
  .kgw-tab { width: 100%; }
}

/* Doneren */
/* Doneerkeuzes: het bolletje draagt de keuze, het vlak draagt de nadruk.
   Geen omlijning, ook niet in de gekozen staat. */
.don-keuze { text-align: left; background: #fff; border: none; border-radius: 9px;
  padding: 22px 24px; cursor: pointer; display: flex; gap: 16px; align-items: flex-start; width: 100%;
  box-shadow: var(--shadow-md); transition: background .18s ease, box-shadow .18s ease; font-family: var(--font-body); }
.don-keuze .dot { flex: none; width: 22px; height: 22px; margin-top: 3px; border-radius: 50%;
  background: var(--mpo-surface-2); display: flex; align-items: center; justify-content: center; transition: background .18s ease; }
.don-keuze .dot i { width: 9px; height: 9px; border-radius: 50%; background: transparent; display: block; }
.don-keuze .dk-title { display: block; font-family: var(--font-display); font-weight: var(--fw-display); font-size: 20px; }
.don-keuze .dk-sub { display: block; font-size: 15.5px; line-height: 1.55; color: var(--mpo-ink-70); margin-top: 5px; }
.don-keuze.don-sel { background: var(--don-acc-soft); box-shadow: var(--shadow-lg); }
.don-keuze.don-sel .dot { background: var(--don-acc); }
.don-keuze.don-sel .dot i { background: #fff; }
.btn-bedrag { font-family: var(--font-body); font-weight: 700; font-size: 16px; border: none;
  background: var(--mpo-surface-2); color: var(--mpo-ink); border-radius: 9px; padding: 13px 20px; min-height: 46px;
  cursor: pointer; transition: background .16s ease, color .16s ease; }
.btn-bedrag:hover { background: var(--mpo-surface-2-hover); transform: none; }
.btn-bedrag.sel, .btn-bedrag.sel:hover { background: var(--acc, var(--mpo-teal)); color: #fff; }
.done-panel { text-align: center; }
.done-panel .ok { width: 66px; height: 66px; border-radius: 50%; background: var(--acc-soft, var(--mpo-teal-100)); color: var(--acc, var(--mpo-teal-600));
  display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; }
.done-panel .ok .ico { width: 30px; height: 30px; vertical-align: 0; }
/* ============ Uitgangspunten (de-beweging) ============
   Vijf gelijkwaardige kaarten. Zes kolommen zodat de onderste
   rij van twee gecentreerd uitkomt in plaats van links te blijven hangen. */
.uitgangspunten { display: grid; grid-template-columns: repeat(6, 1fr); gap: 24px; margin-top: 44px; }
.uitgangspunt { grid-column: span 2; }
.uitgangspunt:nth-child(4) { grid-column: 2 / span 2; }
.uitgangspunt:nth-child(5) { grid-column: 4 / span 2; }

.uitgangspunt {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  background: #fff; border-radius: 10px;
  box-shadow: var(--shadow-md); padding: 30px 28px 30px;
  --up-acc: var(--mpo-magenta); --up-soft: var(--mpo-magenta-100);
}
.uitgangspunt:nth-child(2) { --up-acc: var(--mpo-teal-600); --up-soft: var(--mpo-teal-100); }
.uitgangspunt:nth-child(3) { --up-acc: var(--mpo-gold-ink); --up-soft: var(--mpo-gold-100); }
.uitgangspunt:nth-child(4) { --up-acc: var(--mpo-purple);   --up-soft: var(--mpo-purple-100); }
.uitgangspunt:nth-child(5) { --up-acc: var(--mpo-magenta);  --up-soft: var(--mpo-magenta-100); }

.up-nr { flex: none; width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--up-acc); color: #fff;
  font-family: var(--font-body); font-weight: 700; font-size: 17px; margin-bottom: 16px; }
.uitgangspunt h3 { margin: 0 0 9px; font-size: 20px; }
.uitgangspunt p { margin: 0; font-size: 15.5px; line-height: 1.62; color: var(--mpo-ink-70); }

@media (max-width: 1024px) {
  .uitgangspunten { grid-template-columns: repeat(4, 1fr); }
  .uitgangspunt, .uitgangspunt:nth-child(4) { grid-column: span 2; }
  .uitgangspunt:nth-child(5) { grid-column: 2 / span 2; }
}
@media (max-width: 700px) {
  .uitgangspunten { grid-template-columns: 1fr; gap: 16px; margin-top: 32px; }
  .uitgangspunt, .uitgangspunt:nth-child(4), .uitgangspunt:nth-child(5) { grid-column: 1 / -1; }
  .uitgangspunt { padding: 26px 24px; }
  .up-nr { width: 38px; height: 38px; font-size: 15px; margin-bottom: 13px; }
}

/* ============ Aanbod: trainingskaarten en pilotstappen ============ */
.aanbod-kaart { background: #fff; border-radius: 9px; padding: 26px 28px;
  box-shadow: var(--shadow-md); }
.aanbod-kaart h3 { margin: 0 0 8px; font-size: 19px; }
.aanbod-kaart p { margin: 0; font-size: 15.5px; line-height: 1.62; color: var(--mpo-ink-70); }

.pilot-stappen { display: flex; flex-direction: column; gap: 12px; }
.pilot-stap { display: flex; gap: 16px; align-items: flex-start; background: #fff;
  border-radius: 9px; padding: 20px 24px; box-shadow: var(--shadow-md); }
.pilot-nr { flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: var(--mpo-magenta); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-weight: 700; font-size: 15px; }
.pilot-stap h4 { margin: 0; font-size: 16.5px; }
.pilot-stap p { margin: 4px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--mpo-ink-70); }

/* ============ Processtroom (kindgericht werven: "Hoe het werkt") ============
   Zeven genummerde stappen, verbonden door één doorlopende lijn. Bewust géén
   kaarten zoals .pilot-stap hierboven: zeven identieke witte vakken maakten van
   een volgorde een opsomming, en kostten een hele schermlengte voor zeven korte
   zinnen. De lijn doet wat de kaarten niet deden — laten zien dat dit een route
   is. Staat vlak boven het formulier, dus de tekst is primair (ink, niet ink-70). */
/* Verticaal gecentreerd: de kop staat dan tegenover het midden van de route in
   plaats van tegenover stap 1, waardoor de lege ruimte zich onder én boven
   verdeelt in plaats van als één gat onder de lead te hangen. */
.stroom { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
.stroom-kop { margin: 0 0 14px; font-size: clamp(26px, 2.9vw, 36px); }
.stroom-lead { margin: 0; font-size: clamp(16.5px, 1.3vw, 18px); line-height: 1.7; color: var(--mpo-ink-70); max-width: 34ch; }

.stroom-stappen { position: relative; list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 22px; }
/* De lijn loopt van het midden van de eerste bol tot het midden van de laatste,
   niet van rand tot rand: anders steekt hij er boven en onder uit. */
.stroom-stappen::before { content: ""; position: absolute; left: 17px; top: 18px; bottom: 18px;
  width: 2px;
  /* teal-200 alleen was op de warme off-white bijna niet te zien; dit houdt de
     lijn rustig maar aanwezig. De lijn loopt achter de bollen door — geen ring
     in de paginakleur eromheen, want die hakte hem juist in losse stukjes. */
  background: color-mix(in srgb, var(--mpo-teal) 34%, var(--mpo-surface)); }
.stroom-stap { position: relative; display: grid; grid-template-columns: 36px 1fr; gap: 18px;
  align-items: start; }
.stroom-nr { position: relative; z-index: 1; width: 36px; height: 36px; border-radius: 50%;
  background: var(--mpo-teal); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-weight: 700; font-size: 16px; line-height: 1; }
.stroom-stap p { margin: 0; font-size: clamp(16.5px, 1.3vw, 18px); line-height: 1.6; color: var(--mpo-ink);
  padding-top: 7px; max-width: 46ch; }

@media (max-width: 900px) {
  .stroom { grid-template-columns: 1fr; gap: 26px; }
  .stroom-lead { max-width: none; }
}

/* Route (kindgericht werven, "Hoe het werkt"): horizontale slingerweg in de
   taal van de roadmap op 'Pleegouder worden' — breed pad met stippellijn,
   genummerde bollen, kaartjes om en om boven en onder het pad. */
.route { position: relative; width: 100%; margin: 26px auto 0; aspect-ratio: 1160/540; }
.route svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.route-node { position: absolute; transform: translate(-50%,-50%); z-index: 2; width: 50px; height: 50px; border-radius: 50%;
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-weight: 700; font-size: 20px;
  animation: nodePop .55s cubic-bezier(.16,1,.3,1) both; }
.route-kaart { position: absolute; transform: translateX(-50%); z-index: 1; width: 176px;
  background: #fff; border-radius: 10px; padding: 13px 15px;
  box-shadow: 0 14px 40px rgba(103,48,103,.1);
  animation: kaartRise .5s ease both; }
.route-kaart p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--mpo-ink); text-align: center; }
/* De buitenste kaartjes klemmen binnen de container in plaats van te centreren
   op hun bol; anders steken ze bij smallere schermen buiten de pagina. */
.route-stap:first-of-type .route-kaart { left: 0; transform: none; animation-name: kaartRiseVast; }
.route-stap:last-of-type .route-kaart { left: auto; right: 0; transform: none; animation-name: kaartRiseVast; }
@media (min-width: 861px) { .route-stap { display: contents; } }
@media (max-width: 860px) {
  .route { aspect-ratio: auto; display: flex; flex-direction: column; gap: 14px; margin-top: 30px; }
  .route svg { display: none; }
  .route-stap { display: flex; gap: 14px; align-items: flex-start; }
  .route-node { position: static; transform: none; flex: none; width: 42px; height: 42px; font-size: 17px; animation: none; }
  .route-kaart { position: static; transform: none; width: auto; flex: 1; animation: none; }
  .route-kaart p { text-align: left; }
}

/* ============ Publicatielijst (kennis) ============ */
.pub-lijst { display: flex; flex-direction: column; gap: 14px; }
.pub-item { display: flex; gap: 28px; align-items: flex-start; justify-content: space-between;
  background: #fff; border-radius: 10px;
  padding: 28px 30px; box-shadow: var(--shadow-md); }
.pub-body { flex: 1; min-width: 0; }
.pub-type { display: inline-block; font-family: var(--font-body); font-weight: 700; font-size: 12px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--mpo-teal-600); }
.pub-item h3 { margin: 8px 0 0; font-size: 20px; }
.pub-omschrijving { margin: 10px 0 0; font-size: 15.5px; line-height: 1.62; color: var(--mpo-ink-70); }
.pub-meta { display: flex; flex-wrap: wrap; gap: 6px 26px; margin: 14px 0 0;
  font-size: 14px; color: var(--mpo-ink-70); }
.pub-meta strong { color: var(--mpo-ink-70); font-weight: 700; }
.pub-download { flex: none; align-self: center; display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-body); font-weight: 700; font-size: 15px; color: #fff;
  background: var(--mpo-magenta); border-radius: 9px; padding: 12px 22px; white-space: nowrap; min-height: 46px; }
.pub-download .ico { width: 16px; height: 16px; vertical-align: 0; }
.pub-download:hover { background: var(--mpo-magenta-600); color: #fff; }
/* Nog niet verschenen: geen knop die niets doet, wel een eerlijk label */
.pub-binnenkort { flex: none; align-self: center; font-family: var(--font-body); font-weight: 700;
  font-size: 14px; color: var(--mpo-ink-70); background: var(--mpo-surface-2);
  border-radius: 8px; padding: 11px 20px; white-space: nowrap; }
@media (max-width: 700px) {
  .pub-item { flex-direction: column; gap: 18px; padding: 24px; }
  .pub-download, .pub-binnenkort { align-self: stretch; justify-content: center; text-align: center; }
}

/* Secties op volle merkkleur */
.band-purple { background: var(--mpo-purple); color: #fff; }
.band-purple h2, .band-purple h3 { color: #fff; }
.band-purple > div > p { color: rgba(255,255,255,.9); }
.band-soft { background: var(--mpo-surface-2); }

/* ============ Cijfers (home, De opgave) ============
   Kleurvlak in plaats van een omlijnd kader; het cijfer zelf draagt de kleur. */
.cijfers { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin: 36px 0 0; }
.cijfer { background: var(--cf-soft, var(--mpo-magenta-100)); border-radius: 10px; padding: 30px 32px; }
.cijfer:nth-child(2) { --cf-acc: var(--mpo-teal-600); --cf-soft: var(--mpo-teal-100); }
.cijfer .cf-nr { display: block; font-family: var(--font-display); font-weight: var(--fw-display);
  font-size: clamp(40px, 5.4vw, 58px); line-height: 1; letter-spacing: -.02em; color: var(--cf-acc, var(--mpo-magenta)); }
.cijfer p { margin: 12px 0 0; font-size: 16px; line-height: 1.6; color: var(--mpo-ink); }
@media (max-width: 700px) { .cijfers { grid-template-columns: 1fr; gap: 14px; } }

/* Prikkelende slotvraag onder een sectie */
.prikkel { font-family: var(--font-display); font-weight: var(--fw-display);
  font-size: clamp(21px, 2.6vw, 29px); line-height: 1.3; letter-spacing: -.015em;
  color: var(--mpo-purple); margin: 34px 0 0; max-width: 760px; }

/* ============ Manier van werken (home) ============
   Geen streep en geen kader; de kop draagt de accentkleur. */
.werkwijze { display: flex; flex-direction: column; gap: 12px; counter-reset: wz; }
.werkwijze-item {
  --wz-acc: var(--mpo-magenta);
  counter-increment: wz;
  display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 18px; align-items: start;
  background: var(--mpo-white); border-radius: 10px;
  padding: 20px 22px;
  box-shadow: inset 0 0 0 1px var(--mpo-line);
  transition: box-shadow 160ms ease, transform 160ms ease;
}
.werkwijze-item:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--wz-acc), var(--shadow-md); }
.werkwijze-item::before {
  content: counter(wz, decimal-leading-zero);
  grid-row: span 2;
  width: 40px; height: 40px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: var(--wz-acc); color: #fff;
  font-family: var(--font-display); font-size: 15px; line-height: 1;
}
.werkwijze-item:nth-child(2) { --wz-acc: var(--mpo-teal-600); }
.werkwijze-item:nth-child(3) { --wz-acc: var(--mpo-gold-ink); }
.werkwijze-item h3 { margin: 8px 0 6px; font-size: 21px; color: var(--wz-acc); }
.werkwijze-item p { margin: 0; font-size: 16px; line-height: 1.62; color: var(--mpo-ink-70); }

/* ============ Opsommingen met vinkje / streep ============ */
.lijst-check { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.lijst-check li { display: flex; gap: 13px; align-items: flex-start;
  font-size: 16.5px; line-height: 1.6; color: var(--mpo-ink); }
/* Vinkje als getekend pad in een gevulde schijf. De streekkleur zit in de
   data-URI, want een background-image erft geen currentColor. */
.lijst-check li::before { content: ""; flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--mpo-teal-100) var(--ico-check-teal) center / 14px 14px no-repeat; margin-top: 2px; }

/* ============ Wel en niet (pleegouder worden) ============
   Twee gelijkwaardige vlakken naast elkaar. Zonder dit werd links kale tekst
   en rechts een blok, en dat las niet als een paar. */
.wel-niet { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
.wn-vlak { border-radius: 11px; padding: clamp(26px,4vw,38px) clamp(22px,3.5vw,34px); }
.wn-wel { background: var(--mpo-teal-100); }
.wn-niet { background: var(--mpo-purple-100); }
.wn-vlak h2 { margin: 0; font-size: clamp(24px,2.6vw,31px); }
.wn-wel h2 { color: var(--mpo-teal-600); }
.wn-niet h2 { color: var(--mpo-purple); }
.wn-niet p { font-size: 16.5px; line-height: 1.7; color: var(--mpo-ink); margin: 18px 0 0; }
/* Rechts dezelfde opsommingsopbouw als links, met een eigen markering:
   een streepje in aubergine in plaats van een vinkje. */
.lijst-streep { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.lijst-streep li { display: flex; gap: 13px; align-items: flex-start;
  font-size: 16.5px; line-height: 1.6; color: var(--mpo-ink); }
/* Rijen houden dezelfde pitch als de vinkjeslijst links, zodat de markeringen
   in beide kolommen op één hoogte staan. */
.wn-vlak .lijst-check li, .wn-vlak .lijst-streep li { min-height: 53px; }
.lijst-streep li::before { content: ""; flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: #fff; margin-top: 2px; }
.wn-niet .lijst-streep li::before {
  background: #fff linear-gradient(var(--mpo-purple), var(--mpo-purple)) center / 12px 2.6px no-repeat; }
.wn-wel .lijst-check { margin-top: 20px; }
/* De schijf achter het vinkje wordt wit; teal-op-teal zou wegvallen. */
.wn-wel .lijst-check li::before { background-color: #fff; }
@media (max-width: 900px) {
  .wel-niet { grid-template-columns: 1fr; gap: 16px; }
  /* Gestapeld staan de kolommen onder elkaar; de vaste rijhoogte die ze naast
     elkaar uitlijnt, zet dan alleen maar lucht tussen de korte regels. */
  .wn-vlak .lijst-check li, .wn-vlak .lijst-streep li { min-height: 0; }
}

/* Vormen van pleegzorg: term, uitleg. Vlak zonder omlijning. */
.vormen { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; }
.vormen li { background: #fff; border-radius: 8px;
  padding: 16px 20px; font-size: 16px; line-height: 1.55; color: var(--mpo-ink-70); }
.vormen li strong { display: block; font-family: var(--font-body); font-weight: 700;
  font-size: 16.5px; color: var(--mpo-purple); margin-bottom: 2px; }

[hidden] { display: none !important; }