/* ============================================================
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,');
--ico-hart: url('data:image/svg+xml;utf8,');
--ico-klok: url('data:image/svg+xml;utf8,');
--ico-herhaal: url('data:image/svg+xml;utf8,');
}
/* 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); }
/* Op een zachte band (band-soft, band-teal) ligt de roze vulling van btn-outline
te dicht bij de achtergrond en leest de knop niet meer als knop. De witte
variant tekent zich wel af, met dezelfde zachte schaduw als de kaarten. */
.btn-outline.on-white { background: #fff; box-shadow: var(--shadow-sm); }
.btn-outline.on-white:hover { background: #fff; color: var(--mpo-magenta-600); box-shadow: var(--shadow-md); }
.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); }
/* De twee acties staan bovenaan het paneel: op mobiel verdwijnen ze uit de
header, dus wie het menu opent moet ze meteen zien en niet eerst langs de
navigatie hoeven scrollen. */
.mobile-menu .mm-cta { display: flex; flex-direction: column; gap: 10px; padding: 4px 0 16px; }
.mobile-menu .mm-cta .btn { width: 100%; margin-top: 0; }
@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,');
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; }
/* Verplicht of optioneel: één woord achter het label, op dezelfde regel. Geen
sterretjes, want die zeggen niets als je de conventie niet kent. */
.lb-req, .lb-opt { margin-left: 6px; font-weight: 400; font-size: 12.5px; }
.lb-req { color: var(--mpo-teal-600); font-weight: 700; }
.lb-opt { color: var(--mpo-ink-70); }
/* Alleen voor schermlezers: staat er wel in de voorleesvolgorde, maar neemt geen
ruimte in beeld. Gebruikt om te melden dat een link een nieuw tabblad opent. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
/* Velden op een gekleurd vlak (sollicitatieformulier op magenta-100): de
standaard vulling surface-2 valt daar bijna tegen weg, dus daar zijn de
velden wit. */
#sollicitatie-form .in { background: #fff; }
#sollicitatie-form .in:hover { background: #fff; }
#sollicitatie-form .in:focus { background: #fff; }
/* Regel met een vinkje ervoor: vinkje en tekstblok zijn de enige twee items,
zodat de zin doorloopt over de volle breedte. */
.consent-regel { display: flex; gap: 10px; align-items: flex-start;
font-size: 14px; line-height: 1.55; color: var(--mpo-ink-70); }
.consent-regel input[type="checkbox"] { flex: none; width: 17px; height: 17px; margin-top: 2px; }
/* Uitleg boven een formulier over wat er moet en wat mag. */
.form-noot { font-size: 14px; line-height: 1.55; color: var(--mpo-ink-70); margin: 0 0 18px; }
/* Foutmelding onder het veld waar het over gaat, in plaats van één regel
onderaan het formulier: zo weet je welk veld je moet nakijken. */
.veld-melding { margin: 0; font-weight: 600; font-size: 13.5px; line-height: 1.45; }
.veld-fout { color: var(--mpo-magenta-600); }
/* Een hint is een vraag ("bedoelde je..."), geen fout: dus geen alarmkleur. */
.veld-hint { color: var(--mpo-ink-70); }
/* Een veld draagt geen kaderlijn, dus een fout tonen we met vulling plus ring. */
.in.wz-invalid, .in.veld-invalid { background: var(--mpo-magenta-100); box-shadow: 0 0 0 2px var(--mpo-magenta); }
.in.wz-invalid:focus, .in.veld-invalid:focus { background: #fff; }
@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 ============ */
/* Geen margin-top meer: die zette het hele afsluitblok los van de pagina, alsof
het ergens anders bij hoorde. De prefooter erboven doet de scheiding al. */
.ftr { background: var(--mpo-purple-800); color: #fff; padding: 0 0 34px; }
/* Uitnodiging halverwege de pagina, zodat je niet eerst tot onderaan hoeft te
lezen voordat je iets kunt doen. Teal in plaats van het roze van de prefooter:
anders leest het als een tweede afsluiting. */
.cta-band { background: var(--mpo-teal-100); }
.cta-band .cta-band-in { max-width: 860px; margin: 0 auto; padding: 64px var(--gutter) 60px; text-align: center; }
.cta-band h2 { color: var(--mpo-purple); margin: 0; font-size: clamp(24px,2.8vw,34px); }
.cta-band p { color: var(--mpo-ink-70); font-size: 17px; line-height: 1.6; margin: 16px auto 28px; max-width: 640px; }
.cta-band .actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
@media (max-width: 640px) {
.cta-band .cta-band-in { padding: 46px var(--gutter); }
.cta-band p { font-size: 16px; }
.cta-band .actions { flex-direction: column; }
.cta-band .actions .btn { width: 100%; }
}
.prefooter { background: var(--mpo-magenta-100); padding: 68px 0 64px; }
.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: 18px auto 30px; 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; }
/* Slotregel van de footer: iconen links, beeldverantwoording rechts. Ze delen
één regel, zodat de footer een regel korter is en het gewicht niet allemaal
in de linkerkolom hangt. */
.ftr-slotrij { display: flex; align-items: center; justify-content: space-between;
gap: 24px 40px; margin-top: 36px; }
.ftr-slotrij .ftr-social { margin-top: 0; flex: none; }
/* 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; }
/* min() en niet 62ch alleen: in de gestapelde variant is de kolom smaller dan
62 tekens en liep de noot buiten de kantlijn. */
.ftr-slotrij .beeld-noot { margin: 0; max-width: min(62ch, 100%); text-align: right; }
@media (max-width: 700px) {
/* Naast elkaar wordt de noot te smal; dan iconen boven, noot eronder links. */
.ftr-slotrij { flex-direction: column; align-items: flex-start; gap: 20px; margin-top: 30px; }
.ftr-slotrij .beeld-noot { text-align: left; }
}
.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) {
/* De staande foto's zijn zelf precies 4:5. Een vierkante tegel sneed daar
20% uit, boven en onder, en juist onderaan staan de voeten van het kind.
Staande tegels blijven daarom ook op een telefoon 4:5; alleen een tegel
die vierkant bedoeld is, wordt vierkant. */
.media-tile-11 { 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) {
/* De verhouding van het bestand bepaalt de hoogte, maar niet onbeperkt: op een
breed scherm werd de hero ruim 1000px hoog en stonden de knoppen onder de
vouw. De limiet knijpt de hoogte af. Het beeld houdt daarbij zijn volle
breedte en wordt aan de ónderkant afgeknipt: deze foto's zijn rijen figuren,
dus een uitsnede aan de zijkanten (object-fit: cover) laat de buitenste
figuren wegvallen. Onderaan ligt toch het donkere verloop met de tekst. */
/* Expliciete hoogte, geen aspect-ratio met max-height: die combinatie laat
de browser de breedte uit de afgeknepen hoogte afleiden en dan vult de
hero het scherm niet meer. De eerste term is de natuurlijke hoogte van
het beeld bij volle breedte; de andere twee zijn de limiet. */
.hero-vol { height: min(calc(100vw * 720 / 1680), 80vh, 760px); overflow: hidden; }
/* 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 { height: min(calc(100vw * 816 / 1456), 78vh, 720px); } }
/* Dit beeld is 1456x816, dus op de volle breedte 56vw hoog. De padding moet
daar dus boven liggen, anders begint de tekst nog op de foto: met 50vw
startte hij 5px boven de onderrand. Nu dezelfde ~15px lucht als op de
homepage, waar 42vw padding hoort bij een beeld van 42,9vw hoog. */
@media (max-width: 699.98px) { .hero-vol.hero-vol-56 .hero-vol-inhoud { padding-top: calc(56vw + 16px); } }
@media (max-width: 1199.98px) and (min-width: 700px) { .hero-vol.hero-vol-56 .hero-vol-inhoud { padding-top: 30vw; } }
/* Kruimelpad in de hero zelf. Als losse balk boven het beeld was het een strook
die nergens bij hoorde en het beeld van de menubalk losknipte; hier hoort hij
bij de pagina waar hij naartoe wijst. */
.kruimel-op-beeld { display: inline-flex; align-items: center; gap: 8px; margin-bottom: clamp(14px, 2vw, 22px);
font-family: var(--font-body); font-weight: 600; font-size: 14.5px; color: rgba(255,255,255,.72); }
.kruimel-op-beeld a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: #fff; }
.kruimel-op-beeld a:hover { color: var(--mpo-gold-200); }
.kruimel-op-beeld .ico { width: 15px; height: 15px; vertical-align: 0; }
/* ============ Beeldband: sectie met sectievullend beeld ============
Vervangt de zwevende fototegel naast een tekstkolom. Het beeld is hier de
helft van de sectie zelf: het loopt van boven- tot onderrand door en raakt
de schermrand, zonder eigen kader of schaduw. De tekstkolom houdt de
kantlijn van de shell aan; de hoogte van de sectie volgt de tekst. */
.band-split { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); align-items: stretch; }
.band-split .bs-tekst { align-self: center; min-width: 0;
padding: clamp(48px, 6vw, 80px) clamp(28px, 4vw, 60px) clamp(48px, 6vw, 80px)
max(var(--gutter), calc((100vw - 1180px) / 2 + var(--gutter))); }
.band-split .bs-beeld { position: relative; min-height: 100%; }
/* De uitsnede hangt aan de bovenkant, niet in het midden: dit zijn staande
portretten waar het hoofd bovenin zit. Zodra het beeldvlak breder wordt dan
hoog (breed scherm, korte tekstkolom) sneed een gecentreerde uitsnede precies
het hoofd eraf. Beelden waarvan het onderwerp wél in het midden zit, zetten
hun eigen object-position. */
.band-split .bs-beeld img { position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; object-position: 50% 20%; display: block; }
/* Een korte tekstkolom mag de band niet tot een reep persen: onder deze hoogte
wordt het beeld een letterbox in plaats van een beeld. */
.band-split { min-height: clamp(340px, 28vw, 560px); }
/* Beeld links in plaats van rechts: de tekstkolom wisselt van kantlijn. */
.band-split.bs-links .bs-tekst { order: 2;
padding-left: clamp(28px, 4vw, 60px);
padding-right: max(var(--gutter), calc((100vw - 1180px) / 2 + var(--gutter))); }
.band-split.bs-links .bs-beeld { order: 1; }
/* Vanaf hier groeit alleen het beeld nog mee met het scherm, terwijl de
tekstkolom aan de kantlijn van de site vastzit. Zonder deze correctie krijgt
het beeld op een 2560-scherm meer dan de helft van de breedte en houdt de
tekst een smalle strook over. */
@media (min-width: 1600px) {
.band-split { grid-template-columns: minmax(0, 1.22fr) minmax(0, .78fr);
min-height: clamp(440px, 26vw, 640px); }
.band-split.bs-links { grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); }
}
@media (max-width: 900px) {
/* Gestapeld: tekst eerst, beeld eronder over de volle breedte. Het beeld
krijgt dan een eigen verhouding, want er is geen tekstkolom meer om de
hoogte aan te ontlenen. */
.band-split, .band-split.bs-links { display: block; min-height: 0; }
.band-split .bs-tekst, .band-split.bs-links .bs-tekst {
padding: 44px var(--gutter) 40px; }
.band-split .bs-beeld { min-height: 0; aspect-ratio: 4 / 3; }
.band-split .bs-beeld img { position: absolute; }
}
/* Schermbrede beeldband: vaste hoogte in plaats van verhouding, anders groeit
het beeld op een breed scherm tot een halve schermhoogte. */
.beeldband { position: relative; height: clamp(280px, 40vw, 540px); margin: 0; }
.beeldband img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* Bijschrift op de band, niet eronder: het hoort bij het beeld en moet in één
blik meekomen. Het verloop van onderaf houdt de tekst leesbaar zonder dat er
een balk over de foto valt; de tekst begint op de kantlijn van de site. */
.beeldband figcaption {
position: absolute; inset: auto 0 0 0; z-index: 1;
padding: clamp(22px, 5vw, 44px) max(var(--gutter), calc((100vw - 1180px) / 2 + var(--gutter)))
clamp(16px, 2.2vw, 26px);
background: linear-gradient(to top, rgba(29,14,29,.66) 0%, rgba(29,14,29,.34) 58%, rgba(29,14,29,0) 100%);
/* Bijschrift, geen kop: de bodyletter in een rustige maat, met een lichte
letterafstand zodat hij als toelichting bij het beeld leest en niet als
tweede titel gaat concurreren met de kop eronder. */
font-family: var(--font-body); font-weight: 600;
font-size: clamp(13.5px, 1.05vw, 15.5px); line-height: 1.5; letter-spacing: .01em;
color: rgba(255,255,255,.88); text-wrap: pretty;
}
.beeldband figcaption span { display: block; max-width: 46ch; }
.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; }
/* Merkje boven de vraag: alles is verplicht, behalve waar dit staat. Staat vóór
de vraag zodat je het leest voordat je begint te typen. */
.wz-opt { display: inline-block; margin: 0 0 12px; padding: 5px 11px; border-radius: 6px;
background: var(--mpo-surface-2); font-family: var(--font-body); font-weight: 700; font-size: 12.5px; color: var(--mpo-ink-70); }
/* 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; }
/* Ontbreekt jongen/meisje, dan moet die keuze zichtbaar openstaan. De knoppen
dragen geen kaderlijn, dus dat gaat via vulling en een ring om het groepje. */
.kind-row-invalid .kind-geslacht { border-radius: 9px; box-shadow: 0 0 0 2px var(--mpo-magenta); }
.kind-row-invalid .k-geslacht:not(.sel) { background: var(--mpo-magenta-100); }
/* Op een telefoon past de rij niet op één regel en belandt het kruisje eronder,
als een losse knop zonder duidelijke eigenaar. Daarom zetten we het naast het
kopje "Kind 1"; de vrije ruimte houden we open met padding, zodat de knoppen
er nooit onder doorlopen. */
@media (max-width: 640px) {
/* Het kopje "Kind 1" heeft hier een eigen regel (zie .kind-nr verderop), dus
daar is plek voor het kruisje aan de rechterkant. De rij zelf houdt zijn
volle breedte, anders wringt het leeftijdveld naar een eigen regel. */
.kind-row { position: relative; margin-bottom: 18px; }
/* De kopregel krijgt de hoogte van het kruisje, zodat het ernaast past en
niet over het leeftijdveld eronder valt. */
.kind-nr { line-height: 34px; }
.kind-del { position: absolute; top: 0; right: 0; width: 34px; height: 34px; }
}
.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); }
/* Aanbodkaart als link naar de dienst erachter. De kaart blijft hetzelfde vlak;
alleen de heenwijzer onderaan verraadt dat er iets achter zit. */
.aanbod-kaart-link { display: flex; flex-direction: column; color: inherit; }
.aanbod-kaart-link:hover { color: inherit; }
.aanbod-kaart-link h3 { transition: color .16s ease; }
.aanbod-kaart-link:hover h3 { color: var(--mpo-magenta); }
.kaart-heen { margin-top: auto; padding-top: 16px; display: inline-flex; align-items: center; gap: 8px;
font-family: var(--font-body); font-weight: 700; font-size: 14.5px; color: var(--mpo-magenta); }
.kaart-heen .ico { width: 16px; height: 16px; vertical-align: 0;
transition: transform .18s cubic-bezier(.2,.7,.3,1); }
.aanbod-kaart-link:hover .kaart-heen .ico { transform: translateX(3px); }
/* Kruimelpad: waar je vandaan komt, boven aan een pagina die je vanuit het
aanbod binnenkomt. Zonder dit is zo'n dienstpagina een doodlopende weg. */
.kruimel { display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
font-family: var(--font-body); font-weight: 600; font-size: 14px; color: var(--mpo-ink-70); }
.kruimel a { display: inline-flex; align-items: center; gap: 8px; color: var(--mpo-magenta); min-height: 44px; }
.kruimel a:hover { color: var(--mpo-magenta-600); }
.kruimel .ico { width: 15px; height: 15px; vertical-align: 0; }
.kruimel span[aria-current] { color: var(--mpo-ink-70); font-weight: 400; }
/* Persoonlijk aanspreekpunt bij een formulier: één gezicht in plaats van een
algemeen postvak. Geen foto (nog niet), dus de initialen dragen de plek. */
.persoon { display: flex; align-items: center; gap: 16px; }
.persoon-mark { flex: none; width: 52px; height: 52px; border-radius: 50%;
background: var(--mpo-purple); color: #fff;
display: flex; align-items: center; justify-content: center;
font-family: var(--font-body); font-weight: 700; font-size: 17px; letter-spacing: .02em; }
.persoon > div { display: flex; flex-direction: column; }
.persoon strong { font-family: var(--font-display); font-weight: var(--fw-display);
font-size: 18px; letter-spacing: -.01em; color: var(--mpo-purple); }
.persoon span { font-size: 14px; color: var(--mpo-ink-70); margin-top: 1px; }
.persoon a { font-size: 15px; font-weight: 600; margin-top: 3px; }
@media (max-width: 480px) {
/* Naast elkaar wordt de kolom te smal voor het e-mailadres; dan onder elkaar. */
.persoon { align-items: flex-start; gap: 14px; }
.persoon-mark { width: 44px; height: 44px; font-size: 15px; }
.persoon a { word-break: break-word; }
}
.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); }
/* ============ Ons aanbod: genummerde diensten met opsommingen ============
Zelfde taal als de uitgangspunten (genummerde cirkel, accentkleur per blok),
maar als doorlopende leesblokken in plaats van kaarten: elk blok heeft een
opsomming en een knop, en dat is te veel inhoud voor een kaartraster. */
.dienst { margin-top: 46px; }
.dienst-kop { display: flex; align-items: center; gap: 14px; }
.dienst-kop .nr { flex: none; width: 40px; height: 40px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: var(--mpo-magenta); color: #fff;
font-family: var(--font-body); font-weight: 700; font-size: 16px; }
.dienst + .dienst .dienst-kop .nr { background: var(--mpo-teal-600); }
.dienst + .dienst + .dienst .dienst-kop .nr { background: var(--mpo-purple); }
.dienst-kop h3 { margin: 0; font-size: clamp(20px, 2.2vw, 25px); }
.dienst > p { font-size: clamp(16.5px, 1.25vw, 17.5px); line-height: 1.7;
color: var(--mpo-ink); margin: 16px 0 0; }
.dienst .btn { margin-top: 22px; }
/* Twee knoppen naast elkaar (aanvragen én verder lezen). Op een telefoon staan
ze onder elkaar over de volle breedte, anders knijpen de labels af. */
.dienst-acties { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 560px) {
.dienst-acties { flex-direction: column; align-items: stretch; }
.dienst-acties .btn { width: 100%; }
}
.dienst-lijst { margin: 14px 0 0; padding-left: 24px;
font-size: clamp(16px, 1.2vw, 17px); line-height: 1.7; color: var(--mpo-ink); }
.dienst-lijst li { margin-top: 7px; }
.dienst-lijst li::marker { color: var(--mpo-teal-600); }
/* ============ 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); }
.band-teal { background: var(--mpo-teal-100); }
/* ============ 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; }
/* Het tweede cijfer stond in teal. Dat leest als goed nieuws, terwijl het over
afgebroken plaatsingen gaat: beide cijfers dragen nu dezelfde alarmkleur. */
/* Merkje boven het getal: benoemt in twee woorden wát er misgaat, zodat je het
ziet zonder de zin eronder te lezen. */
.cijfer .cf-label { display: block; margin-bottom: 10px;
font-family: var(--font-body); font-weight: 700; font-size: 12.5px; letter-spacing: .08em;
text-transform: uppercase; color: var(--mpo-magenta-600); }
/* Het getal staat in de zin, dus inline en net groot genoeg om te dragen zonder
over de tekst heen te walsen. tabular-nums houdt de breedte gelijk, anders
schuift de zin heen en weer terwijl de teller oploopt. */
.cijfer .cf-nr { font-family: var(--font-display); font-weight: var(--fw-display);
font-size: clamp(30px, 3.2vw, 38px); line-height: 1; letter-spacing: -.02em;
color: var(--cf-acc, var(--mpo-magenta)); font-variant-numeric: tabular-nums; }
/* Getal en zin staan in eigen kolommen, op dezelfde basislijn. Zo loopt de
tweede regel van de zin niet onder het getal door maar netjes onder de eerste. */
.cijfer .cf-feit { display: grid; grid-template-columns: auto 1fr; gap: 0 11px;
align-items: baseline; margin: 0; font-size: 16.5px; line-height: 1.65; color: var(--mpo-ink); }
/* Twee feiten in één kaart, gescheiden door een haarlijn zodat het één geheel
blijft in plaats van twee losse regels. */
.cijfer .cf-feit + .cf-feit { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--mpo-magenta-200); }
/* Beide kaarten hebben dezelfde drie rijen: merkje, feit met aantal, feit met
percentage. Met subgrid delen ze die rijhoogtes, dus de tweede regel begint in
beide kaarten op dezelfde hoogte, ook als de ene zin afbreekt en de andere niet. */
@supports (grid-template-rows: subgrid) {
.cijfers { grid-template-rows: auto auto auto; }
.cijfer { display: grid; grid-row: span 3; grid-template-rows: subgrid;
/* Ook de kolommen zijn gedeeld: de zinnen van beide feiten beginnen daardoor
op dezelfde x, of het getal nu "553" of "+3,0%" breed is. */
grid-template-columns: auto 1fr; align-content: start; }
.cijfer .cf-label { grid-column: 1 / -1; }
.cijfer .cf-feit { grid-column: 1 / -1; grid-template-columns: subgrid; }
}
@media (max-width: 700px) { .cijfers { grid-template-columns: 1fr; gap: 14px; } }
/* Op een telefoon is een tekstkolom naast het getal te smal: dan gaat het getal
boven de zin staan, over de volle breedte. Staat ná het subgrid-blok, anders
wint dat blok. */
@media (max-width: 560px) {
.cijfer { grid-template-columns: 1fr; }
.cijfer .cf-feit { display: block; }
.cijfer .cf-nr { display: block; margin-bottom: 2px; }
}
/* 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; }
/* ---- Publicatiekaart: lezen voorop, downloaden ernaast ---------------- */
/* De pdf blijft bereikbaar maar niet als gelijkwaardige knop: hij staat als
tekstlink naast de hoofdknop, zodat lezen de vanzelfsprekende route is. */
.pub-acties { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 20px; }
.pub-pdf { font-size: 15.5px; font-weight: 600; color: var(--mpo-ink-70);
display: inline-flex; align-items: center; min-height: 44px; }
.pub-pdf:hover { color: var(--mpo-magenta); }
/* ---- Leesartikel: Islam en pleegzorg --------------------------------- */
/* Deze pagina is een richtlijn van 1500 woorden en leest als een essay, niet
als een landingspagina. De vorige versie zette per hoofdstuk een foto en twee
gekleurde kaartjes in; dat gaf ritme, maar het las als een dashboard en de
beelden waren decoratie. Nu draagt de typografie het ritme: een smalle
kolom, veel wit, en hoofdstukken die als opeenvolgende bladzijden voelen.
Alleen deze pagina gebruikt deze klassen. De klassen hero-vol-56 en g2 staan
elders nog wel in gebruik en blijven daarom ongemoeid. */
/* ---- Hero ------------------------------------------------------------ */
/* Het beeld is 1680x720 met de jongen linksonder en de moskee rechtsonder, en
daartussen een lege okerlucht. Twee dingen volgen daaruit.
Geen uitsnede aan de zijkanten: bij object-fit: cover valt op een smal scherm
precies een van beide figuren weg. Het beeld houdt dus zijn eigen verhouding
over de volle breedte.
En geen donker verloop over de onderkant, zoals de hero's elders op de site
dat hebben. Daar staan de figuren midden in beeld; hier staan ze op de
onderrand en zou het verloop het onderwerp bedekken. De titel gaat daarom
naar de lege lucht bovenin, in aubergine op oker (contrast 6:1). */
.hero-essay { position: relative; background: #CD890A; }
.hero-essay-beeld img { display: block; width: 100%; height: auto; }
.hero-essay-titel { padding: clamp(26px, 5vw, 40px) var(--gutter) clamp(30px, 5vw, 44px); text-align: center; }
.hero-essay-eyebrow {
font-family: var(--font-body); font-weight: 700;
font-size: clamp(.72rem, .85vw, .85rem); letter-spacing: .12em; text-transform: uppercase;
color: var(--mpo-purple-800); margin: 0 0 clamp(10px, 1.4vw, 18px);
}
.hero-essay h1 {
font-family: var(--font-display); font-weight: var(--fw-display);
font-size: clamp(2rem, 3.4vw, 4rem); line-height: 1.04; letter-spacing: -.022em;
color: var(--mpo-purple-800); margin: 0 auto; max-width: 20ch; text-wrap: balance;
}
/* Vanaf 1000px is de okerlucht hoog genoeg om de titel te dragen: hij staat dan
in de bovenste derde, ruim boven de minaret (die op 37% van de hoogte begint)
en boven het hoofd van de jongen (47%). Daaronder is het beeld te laag en
staat de titel er gewoon onder, op wit. */
@media (min-width: 1000px) {
.hero-essay-titel {
position: absolute; left: 0; right: 0; top: 0;
padding-top: clamp(28px, 5.5vh, 64px);
}
}
/* ---- Opbouw van het artikel ------------------------------------------ */
/* Eén doorlopende leeskolom. 680px houdt een regel rond de 70 tekens, de maat
waarop lange tekst het prettigst leest. */
.essay-kolom { max-width: 680px; margin: 0 auto; padding: 0 var(--gutter); }
/* Een hoofdstuk is een bladzijde: royale lucht erboven en eronder, en om en om
een andere ondertoon zodat je aan de kleurwissel ziet dat er iets nieuws
begint. Geen randen, geen schaduwen, geen ronde hoeken: het onderscheid komt
uit ruimte en toon. */
.essay-band, .essay-deel { padding: clamp(48px, 6vw, 88px) 0; }
.essay-deel { background: var(--mpo-white); }
.essay-deel:nth-of-type(even) { background: var(--mpo-surface); }
.essay > .essay-band:first-child { padding-top: clamp(40px, 5vw, 68px); }
/* ---- Tekst ------------------------------------------------------------ */
.essay p { font-size: clamp(16.5px, 1.15vw, 17.5px); line-height: 1.78;
color: var(--mpo-ink); margin: 18px 0 0; text-wrap: pretty; }
.essay p:first-child { margin-top: 0; }
.essay-lead { font-size: clamp(19px, 1.5vw, 22px) !important; line-height: 1.55 !important;
color: var(--mpo-purple) !important; margin: 0 !important; }
.essay-credit { font-size: 14.5px !important; line-height: 1.6 !important;
color: var(--mpo-ink-50) !important; margin: 14px 0 0 !important; }
/* ---- Hoofdstukkop ----------------------------------------------------- */
/* Het nummer staat boven de titel in plaats van ernaast: zo blijft de titel op
de marge staan en leest de kop als één blok. Het streepje links is het enige
sieraad; het vervangt het gekleurde vlak van de vorige versie. */
.essay-kop { margin: 0 0 clamp(22px, 2.6vw, 32px); border-left: 2px solid var(--mpo-gold);
padding-left: clamp(16px, 1.8vw, 22px); }
.essay-nr { font-family: var(--font-body); font-weight: 700;
font-size: 12.5px !important; letter-spacing: .14em; text-transform: uppercase;
color: var(--mpo-gold-ink) !important; margin: 0 0 10px !important; line-height: 1.2 !important; }
.essay-titel { font-family: var(--font-display); font-weight: var(--fw-display);
font-size: clamp(28px, 3.2vw, 40px); line-height: 1.12; letter-spacing: -.015em;
color: var(--mpo-purple-800); margin: 0;
scroll-margin-top: calc(var(--hdr-h) + 24px); }
/* Tussenkoppen horen bij de lopende tekst. Ze staan in het bodyfont, zodat het
verschil met de hoofdstuktitel categorisch is en niet alleen een maatverschil:
het displayfont bestaat maar in één gewicht, dus gewicht kan dat werk niet
doen. */
.essay h3 { font-family: var(--font-body); font-weight: 700; font-size: 18.5px;
line-height: 1.35; color: var(--mpo-purple); margin: clamp(34px, 3.4vw, 44px) 0 0;
scroll-margin-top: calc(var(--hdr-h) + 24px); }
.essay h3 + p { margin-top: 8px; }
/* ---- Inhoudsopgave ---------------------------------------------------- */
/* Een lijst achter een haarlijn, geen kaart. Hij hoort te helpen, niet op te
vallen. */
.essay-inhoud { margin: clamp(34px, 4vw, 48px) 0 0;
border-top: 1px solid var(--mpo-line); padding-top: 20px; }
.essay-inhoud-kop { font-family: var(--font-body); font-weight: 700;
font-size: 12.5px !important; letter-spacing: .14em; text-transform: uppercase;
color: var(--mpo-ink-50) !important; margin: 0 0 12px !important; }
.essay-inhoud ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.essay-inhoud li { counter-increment: toc; margin: 0; }
.essay-inhoud a { display: flex; gap: 14px; padding: 7px 0;
font-size: 16px; line-height: 1.5; color: var(--mpo-ink); text-decoration: none; }
.essay-inhoud a::before { content: counter(toc, decimal-leading-zero);
color: var(--mpo-ink-50); font-variant-numeric: tabular-nums; flex: none; }
.essay-inhoud a:hover { color: var(--mpo-magenta); text-decoration: underline; }
/* ---- Tussenpagina ----------------------------------------------------- */
/* De aubergine bladzijde uit de PDF, tussen het algemene deel en de
richtlijnen. Het enige volvlak op de pagina, en juist daarom werkt het: één
keer stilstaan voordat het inhoudelijke deel begint. */
.essay-tussen { background: var(--mpo-purple); color: var(--mpo-white);
padding: clamp(64px, 9vw, 128px) 0; text-align: center; }
.essay-tussen-eyebrow { font-family: var(--font-body); font-weight: 700;
font-size: 12.5px !important; letter-spacing: .16em; text-transform: uppercase;
color: var(--mpo-gold-200) !important; margin: 0 0 clamp(14px, 1.6vw, 20px) !important; }
.essay-tussen-titel { font-family: var(--font-display); font-weight: var(--fw-display);
font-size: clamp(28px, 3.6vw, 46px) !important; line-height: 1.1 !important;
letter-spacing: -.015em; color: var(--mpo-white) !important;
margin: 0 auto !important; max-width: 18ch; text-wrap: balance; }
.essay-tussen-tekst { color: rgba(255,255,255,.88) !important;
margin: clamp(18px, 2.2vw, 26px) auto 0 !important; max-width: 54ch; }
.essay-tussen-streep { border: 0; height: 2px; width: 56px;
background: var(--mpo-gold); margin: clamp(26px, 3vw, 38px) auto 0; }
/* ---- Mahram-overzicht ------------------------------------------------- */
/* Was twee gekleurde kaartjes met schaduw. Nu twee kolommen achter een
haarlijn: dezelfde informatie, maar het blijft onderdeel van de tekst in
plaats van een los blok dat om aandacht vraagt. */
.essay-mahram { display: grid; grid-template-columns: 1fr 1fr; gap: 0;
margin: clamp(28px, 3vw, 36px) 0 0;
border-top: 1px solid var(--mpo-line); border-bottom: 1px solid var(--mpo-line); }
.essay-mahram > div { padding: 22px 0; }
.essay-mahram > div + div { border-left: 1px solid var(--mpo-line); padding-left: clamp(20px, 3vw, 32px); }
.essay-mahram > div:first-child { padding-right: clamp(20px, 3vw, 32px); }
.essay-mahram dt { font-family: var(--font-body); font-weight: 700; font-size: 16px;
line-height: 1.3; color: var(--mpo-purple); margin: 0; }
.essay-mahram dt span { display: block; font-weight: 700; font-size: 11.5px;
letter-spacing: .13em; text-transform: uppercase; color: var(--mpo-ink-50); margin-top: 5px; }
.essay-mahram dd { margin: 10px 0 0; font-size: 16px; line-height: 1.7; color: var(--mpo-ink); }
/* ---- Slot ------------------------------------------------------------- */
.essay-slot { background: var(--mpo-white); }
.essay-slot-streep { border: 0; height: 3px; width: 56px; background: var(--mpo-gold);
margin: 0 0 26px; }
.essay-acties { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 0; }
.essay-noot { font-size: 15px !important; line-height: 1.6 !important;
color: var(--mpo-ink-70) !important; margin: 20px 0 0 !important; }
@media (max-width: 620px) {
/* Twee kolommen naast elkaar worden op een telefoon te smal voor de rij
familieleden; onder elkaar met een lijn ertussen leest beter. */
.essay-mahram { grid-template-columns: 1fr; }
.essay-mahram > div + div { border-left: 0; border-top: 1px solid var(--mpo-line);
padding-left: 0; }
.essay-mahram > div:first-child { padding-right: 0; }
.essay-acties .btn { width: 100%; }
}