/* ============================================================
   Vooruit met Zorg — stijlblad
   Samengevoegd uit design/preview.html en design/preview-eetstoornissen.html.
   SHOPIFY: assets/custom-effects.css | WP: assets/css/effects.css
   Contrastwaarden narekend en gemeten, zie design/tokens.md sectie 1 en 8.
   ============================================================ */

/* ---------- DESIGN TOKENS -> Shopify settings_data.json / WP Customizer ---------- */
:root{
  --blauw:#00a9e0;        /* alleen als VLAK, met --inkt erop = 5,96:1 */
  --blauw-diep:#005f7f;   /* knopvulling, wit erop = 7,13:1 */
  --blauw-tekst:#00769c;  /* link op wit = 5,16:1 */
  --blauw-tint:#d7f0fa;   /* vlak, --inkt erop = 13,63:1 */
  --koraal:#ff8c61;       /* alleen als VLAK, met --inkt erop = 7,05:1 */
  --koraal-tint:#ffe4d7;  /* vlak, --inkt erop = 13,32:1 */
  --inkt:#12232b;         /* op wit = 16,14:1 */
  --inkt-zacht:#4a5c66;   /* op wit = 6,97:1 */
  --wit:#fff;
  --mist:#f4f8fa;
  --lijn:#dde7ec;
  --lijn-sterk:#5f7783;
  --nacht:#0e1b22;
  --kop:'Newsreader',Georgia,'Times New Roman',serif;
  --body:'Atkinson Hyperlegible','Segoe UI',system-ui,sans-serif;
  --hdr-h:64px;           /* mobiel */
  --radius:14px;
  --schaduw:0 1px 2px rgba(18,35,43,.06),0 10px 28px rgba(18,35,43,.08);
}
@media(min-width:1024px){:root{--hdr-h:76px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--wit);color:var(--inkt);font-family:var(--body);
  font-size:17px;line-height:1.65;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{font-family:var(--kop);font-weight:500;line-height:1.18;letter-spacing:-.012em;margin:0}
h1{font-size:clamp(2.05rem,1.25rem + 3.1vw,3.6rem)}
h2{font-size:clamp(1.65rem,1.15rem + 1.7vw,2.5rem)}
h3{font-size:clamp(1.16rem,1.02rem + .5vw,1.45rem)}
p{margin:0 0 1.05rem}
a{color:var(--blauw-tekst)}
a:hover{color:var(--blauw-diep)}
ul{margin:0;padding:0}
:focus-visible{outline:3px solid var(--blauw-diep);outline-offset:2px;border-radius:3px}
.paginakop :focus-visible,.spoor--blauw :focus-visible,.spoor--koraal :focus-visible,
.citaat :focus-visible{outline-color:var(--inkt)}
.wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 20px}
.smal{max-width:760px}
section{padding:clamp(52px,7vw,92px) 0}
section[id]{scroll-margin-top:calc(var(--hdr-h) + 18px)}
.mist{background:var(--mist)}
.oogje{font-size:.83rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--inkt-zacht);margin:0 0 .55rem}
.streep::after{content:"";display:block;width:46px;height:4px;background:var(--blauw);
  border-radius:2px;margin-top:.95rem}
.zacht{color:var(--inkt-zacht)}
.skip{position:absolute;left:-9999px;top:0;background:var(--inkt);color:#fff;padding:12px 18px;z-index:200}
.skip:focus{left:12px;top:12px}

/* ---------- Knoppen ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:50px;padding:.78rem 1.4rem;border-radius:10px;font-family:var(--body);
  font-weight:700;font-size:1rem;text-decoration:none;border:2px solid transparent;
  cursor:pointer;transition:background-color .18s,color .18s,border-color .18s,transform .18s}
.btn--primair{background:var(--blauw-diep);color:#fff}         /* 7,13:1 */
.btn--primair:hover{background:#004a63;color:#fff;transform:translateY(-1px)}
.btn--rand{background:transparent;color:var(--inkt);border-color:var(--lijn-sterk)}
.btn--rand:hover{background:var(--blauw-tint);color:var(--inkt);border-color:var(--blauw-diep)}
.btn--inkt{background:var(--inkt);color:#fff}                    /* 16,14:1 */
.btn--inkt:hover{background:#000;color:#fff;transform:translateY(-1px)}
.btn--vol{width:100%}

/* ============================================================
   HEADER  |  SHOPIFY: sections/header.liquid  |  WP: template-parts/header
   3 uitklapmenu's: desktop = hover + klik + toetsenbord,
   mobiel = accordeon binnen schermvullend overlay. Zie tokens.md sectie 4.
   ============================================================ */
.topbar{display:none;background:var(--mist);border-bottom:1px solid var(--lijn);font-size:.88rem}
.topbar .wrap{display:flex;gap:1.5rem;align-items:center;justify-content:flex-end;min-height:40px}
.topbar a{text-decoration:none;font-weight:700}
.topbar span{color:var(--inkt-zacht)}
.hdr{position:sticky;top:0;z-index:60;background:var(--wit);border-bottom:1px solid transparent}
.hdr.geplakt{border-bottom-color:var(--lijn);box-shadow:0 6px 18px rgba(18,35,43,.06)}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:var(--hdr-h)}
.merk{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--inkt);flex:0 0 auto}
.merk img{width:52px;height:37px}
.merk b{font-family:var(--kop);font-size:1.16rem;font-weight:600;line-height:1.05;letter-spacing:-.02em}
.merk i{display:block;font-style:normal;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--inkt-zacht);font-family:var(--body);font-weight:700}
.ham{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:48px;height:48px;
  padding:0 11px;background:transparent;border:1px solid var(--lijn);border-radius:10px;cursor:pointer}
.ham span{display:block;height:2px;background:var(--inkt);border-radius:2px;transition:transform .22s,opacity .18s}
.ham[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.ham[aria-expanded=true] span:nth-child(2){opacity:0}
.ham[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.nav{position:fixed;inset:var(--hdr-h) 0 0 0;background:var(--wit);transform:translateX(102%);
  transition:transform .28s cubic-bezier(.22,1,.36,1);overflow-y:auto;z-index:55;
  padding:8px 20px 40px;visibility:hidden}
.nav.open{transform:none;visibility:visible}
.nav__lijst{list-style:none}
.nav__lijst>li{border-bottom:1px solid var(--lijn)}
.nav__link,.nav__knop{display:flex;width:100%;align-items:center;justify-content:space-between;gap:.5rem;
  min-height:52px;padding:.6rem 0;background:none;border:0;font:inherit;font-weight:700;
  color:var(--inkt);text-decoration:none;text-align:left;cursor:pointer}
.nav__link[aria-current=page]{color:var(--blauw-tekst)}
.pijl{width:11px;height:11px;border-right:2.5px solid var(--inkt-zacht);border-bottom:2.5px solid var(--inkt-zacht);
  transform:rotate(45deg);margin-bottom:4px;flex:0 0 auto;transition:transform .2s}
[aria-expanded=true]>.pijl{transform:rotate(-135deg);margin-bottom:-4px}
.sub{list-style:none;display:none;padding:0 0 .7rem}
.sub.open{display:block}
.sub a{display:flex;align-items:center;min-height:46px;padding:.35rem 0 .35rem 1.1rem;
  border-left:3px solid var(--blauw-tint);color:var(--inkt);text-decoration:none;font-size:.98rem}
.sub a:hover{border-left-color:var(--blauw);color:var(--blauw-diep)}
.sub a[aria-current=page]{border-left-color:var(--blauw);font-weight:700}
.extern{font-size:.78rem;color:var(--inkt-zacht);margin-left:.4rem;font-weight:700}
.nav__bel{display:grid;gap:10px;margin:20px 0 6px}
.belkaart{display:flex;flex-direction:column;justify-content:center;min-height:60px;padding:.6rem 1rem;
  border-radius:12px;text-decoration:none;color:var(--inkt)}
.belkaart small{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em}
.belkaart b{font-size:1.06rem}
.belkaart--b{background:var(--blauw)}     /* inkt erop = 5,96:1 */
.belkaart--k{background:var(--koraal)}    /* inkt erop = 7,05:1 */

@media(min-width:1024px){
  .topbar{display:block}
  .ham{display:none}
  .nav{position:static;transform:none;visibility:visible;overflow:visible;padding:0;background:none;inset:auto}
  .nav__bel{display:none}
  .nav__lijst{display:flex;align-items:center;gap:.1rem}
  .nav__lijst>li{border:0;position:relative}
  .nav__link,.nav__knop{min-height:44px;padding:.45rem .72rem;border-radius:9px;font-size:.97rem;width:auto}
  .nav__link:hover,.nav__knop:hover{background:var(--mist)}
  .nav__lijst>li>.nav__link[aria-current=page]{background:var(--blauw-tint);color:var(--inkt)}
  .pijl{width:8px;height:8px;border-width:2px;margin:0 0 3px 2px}
  [aria-expanded=true]>.pijl{margin:0 0 -3px 2px}
  .sub{position:absolute;top:calc(100% + 6px);left:0;min-width:290px;background:var(--wit);
    border:1px solid var(--lijn);border-top:4px solid var(--blauw);border-radius:12px;
    box-shadow:var(--schaduw);padding:.5rem;display:none}
  .sub.open{display:block}
  .sub--2kol{min-width:520px;display:none;grid-template-columns:1fr 1fr;gap:0 .4rem}
  .sub--2kol.open{display:grid}
  .sub a{border-left:0;border-radius:8px;padding:.5rem .7rem;min-height:44px}
  .sub a:hover{background:var(--blauw-tint);color:var(--inkt)}
  .sub a[aria-current=page]{background:var(--blauw-tint)}
  .sub li:last-child a{border-bottom:0}
  .hdr__cta{display:inline-flex}
}
.hdr__cta{display:none}

/* ============================================================
   HERO (alleen home)  |  SHOPIFY: sections/hero-home.liquid
   ============================================================ */
.hero{padding:clamp(30px,5vw,58px) 0 clamp(44px,6vw,72px);
  background:linear-gradient(180deg,var(--mist) 0%,var(--wit) 100%)}
.hero__grid{display:grid;gap:clamp(26px,4vw,48px);align-items:center}
.hero h1{margin-bottom:1.1rem}
.hero__lead{font-size:1.12rem;max-width:56ch;color:var(--inkt)}
.hero__acties{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.6rem}
.pil{display:inline-flex;align-items:center;gap:.6rem;background:var(--blauw-tint);
  border:1px solid #a9dcf1;border-radius:999px;padding:.5rem 1rem .5rem .8rem;
  font-weight:700;font-size:.97rem;margin-bottom:1.1rem}
.pil .stip{width:11px;height:11px;border-radius:50%;background:var(--blauw-diep);flex:0 0 auto}
.hero__media{position:relative;border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--schaduw);aspect-ratio:4/3}
.hero__media img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);will-change:transform}
.hero__bijschrift{font-size:.86rem;color:var(--inkt-zacht);margin:.6rem 0 0}
@media(min-width:900px){
  .hero__grid{grid-template-columns:1.05fr .95fr}
  .hero__media{aspect-ratio:5/4}
}
/* Mobiel: de foto wordt een smalle band bovenaan, zodat het wachttijdblok
   binnen het eerste scherm valt. Gemeten op 390x844. */
@media(max-width:899px){
  /* padding-top stond op 0, waardoor de foto begon op 59px terwijl de plakkende
     header 65px hoog is: de bovenkant van het beeld viel er dus achter weg.
     Ook 2.5/1 maakte van een foto van 1400x1050 een strook van 151px. */
  .hero{padding-top:14px}
  .hero__media{order:-1;aspect-ratio:2/1;border-radius:var(--radius);
    margin-inline:0;box-shadow:none}
  .hero__media img{object-position:center 62%}
  .hero__grid{gap:22px}
}

/* ============================================================
   PAGINAKOP met spoorkleur | SHOPIFY: sections/paginakop.liquid
   --eet   = blauw   (eetstoornissen)
   --jeugd = koraal  (jeugd en gezin en de zes gezinsdiensten)
   --neutraal = mist (Over ons, Veiligheid en kwaliteit, Blogs, Vacatures,
   Contact). Verzadigde kleur blijft daarmee voorbehouden aan de twee
   zorgstromen; dat is de hele logica van de kleurcodering, zie tokens.md 3.
   ============================================================ */
.paginakop{background:var(--blauw);color:var(--inkt);padding:clamp(26px,4vw,44px) 0 clamp(34px,4.5vw,56px)}
.paginakop--jeugd{background:var(--koraal)}
.paginakop--neutraal{background:var(--mist);border-bottom:1px solid var(--lijn)}
.paginakop--neutraal .oogje{color:var(--inkt-zacht);opacity:1}
.kruimels{font-size:.9rem;margin:0 0 1.6rem}
.kruimels ol{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem .55rem;padding:0;margin:0}
.kruimels a{color:var(--inkt);text-decoration:underline;text-underline-offset:3px}
.kruimels a:hover{color:var(--inkt);text-decoration-thickness:2px}
.kruimels li[aria-current]{font-weight:700}
.kruimels span{opacity:.65}
.paginakop .oogje{color:var(--inkt);opacity:.8;margin-bottom:.35rem}
.paginakop h1{max-width:16ch}
.paginakop--breed h1{max-width:24ch}
.paginakop__lead{max-width:60ch;margin:1.3rem 0 0;font-size:1.1rem}

/* ============================================================
   WACHTTIJD | SHOPIFY: snippets/wachttijd.liquid
   Herbruikbaar blok: home, alle aanbodpagina's en werkwijze.
   Stand per zorgstroom plus zichtbare verificatiedatum.
   ============================================================ */
.statusband{background:var(--blauw-tint);padding:clamp(22px,3vw,30px) 0}
.statusband__in{display:grid;gap:18px;align-items:center}
@media(min-width:900px){.statusband__in{grid-template-columns:1.35fr .65fr}}
.wachttijd{background:var(--wit);border:1px solid #a9dcf1;border-left:5px solid var(--blauw-diep);
  border-radius:var(--radius);padding:clamp(16px,2.2vw,22px) clamp(18px,2.4vw,26px)}
.wachttijd__kop{display:flex;flex-wrap:wrap;gap:.35rem 1rem;align-items:baseline;
  justify-content:space-between;margin-bottom:.95rem}
.wachttijd__kop h2{font-size:1.25rem}
.wachttijd__datum{font-size:.86rem;color:var(--inkt-zacht);margin:0}
.wachttijd__rijen{list-style:none;display:grid;gap:.5rem}
.wachttijd__rijen li{display:flex;flex-wrap:wrap;gap:.4rem .9rem;align-items:center;
  justify-content:space-between;padding:.55rem .8rem;background:var(--mist);border-radius:10px}
.wachttijd__naam{display:flex;align-items:center;gap:.6rem;font-weight:700}
.stip{width:12px;height:12px;border-radius:50%;flex:0 0 auto;border:1px solid rgba(18,35,43,.22)}
.stip--b{background:var(--blauw)}
.stip--k{background:var(--koraal)}
.stand{background:var(--blauw-tint);border-radius:999px;padding:.15rem .8rem;font-size:.95rem}
.statusband__verwijzer p{margin:0 0 .7rem;font-weight:700}
.statusband__verwijzer .zacht{font-weight:400;font-size:.95rem}

/* ============================================================
   VOOR VERWIJZERS (home) | SHOPIFY: sections/verwijzers.liquid
   ============================================================ */
.verwijzers{background:var(--nacht);color:#fff}
.verwijzers h2,.verwijzers h3{color:#fff}
.verwijzers .oogje{color:#a9dcf1}
.verwijzers .streep::after{background:var(--blauw)}
.verwijzers a{color:#a9dcf1}
.verwijzers a:hover{color:#fff}
.feiten{list-style:none;display:grid;gap:1px;background:#24363f;border:1px solid #24363f;
  border-radius:var(--radius);overflow:hidden;margin-top:2.1rem}
@media(min-width:760px){.feiten{grid-template-columns:1fr 1fr}}
.feit{background:var(--nacht);padding:1.25rem 1.35rem;display:flex;flex-direction:column;gap:.35rem}
.feit h3{font-size:1.1rem}
.feit p{margin:0;color:#dbe5ea;font-size:.98rem}
.feit .vraag{font-size:.85rem;color:#a9dcf1;font-weight:700;margin:0}
.feit ul{list-style:none;display:grid;gap:.1rem;color:#dbe5ea;font-size:.98rem}
.feit ul a{display:inline-flex;align-items:center;min-height:44px}
.verwijzers .invullen{background:#3a2a1e;color:#ffd9c9;border-color:#a2703f}

/* ============================================================
   TWEE SPOREN | SHOPIFY: sections/twee-sporen.liquid
   ============================================================ */
.sporen{display:grid;gap:18px}
@media(min-width:860px){
  .sporen{grid-template-columns:1fr 1fr;gap:22px}
  .sporen--enkel{grid-template-columns:1fr}
}
.spoor{border-radius:var(--radius);padding:clamp(24px,3.2vw,38px);color:var(--inkt);
  display:flex;flex-direction:column}
.spoor--blauw{background:var(--blauw)}
.spoor--koraal{background:var(--koraal)}
.spoor h3{font-size:clamp(1.45rem,1.1rem + 1.1vw,1.95rem);margin-bottom:.7rem}
.spoor p{margin-bottom:1.3rem}
.spoor__label{display:inline-block;font-size:.8rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;margin-bottom:.55rem}
.spoor__voet{margin-top:auto;display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.spoor__tel{display:inline-flex;align-items:center;gap:.5rem;min-height:50px;padding:.7rem 1.1rem;
  background:rgba(255,255,255,.62);border-radius:10px;text-decoration:none;color:var(--inkt);font-weight:700}
.spoor__tel:hover{background:#fff;color:var(--inkt)}

/* ---------- Voordelen (home) ---------- */
.voordelen{display:grid;gap:14px;list-style:none;margin:0 0 2rem}
@media(min-width:700px){.voordelen{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.voordelen{grid-template-columns:repeat(4,1fr)}}
.voordeel{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--radius);
  padding:1.15rem 1.2rem;display:flex;gap:.75rem;align-items:flex-start;font-weight:700;line-height:1.4}
.vink{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--blauw);
  display:grid;place-items:center;margin-top:1px}
.vink svg{width:14px;height:14px;stroke:var(--inkt);stroke-width:2.6;fill:none}
.tekstkolommen{columns:1;column-gap:44px}
@media(min-width:860px){.tekstkolommen{columns:2}}
.tekstkolommen p{break-inside:avoid}
.bron{font-size:.85rem;color:var(--inkt-zacht);margin:0}

/* ---------- Citaat ---------- */
.citaat{background:var(--koraal-tint);text-align:center}
.citaat blockquote{margin:0;font-family:var(--kop);font-weight:400;
  font-size:clamp(1.5rem,1.05rem + 1.8vw,2.35rem);line-height:1.3;max-width:22ch;
  margin-inline:auto;letter-spacing:-.01em}
.citaat p{margin:1.4rem auto 0;max-width:46ch;color:var(--inkt)}

/* ---------- Split / verhaal ---------- */
.split{display:grid;gap:clamp(24px,4vw,52px);align-items:center}
@media(min-width:900px){.split{grid-template-columns:1fr 1fr}
  .split--om .split__media{order:2}}
.split__media{border-radius:var(--radius);overflow:hidden;box-shadow:var(--schaduw)}
.split__media img{width:100%;aspect-ratio:3/2;object-fit:cover}

/* ---------- Uitgelicht ---------- */
.uitgelicht{background:var(--koraal-tint)}
.uitgelicht .streep::after{background:var(--koraal)}
.uitgelicht .split__media img{aspect-ratio:16/9}

/* ---------- Ruimtes ---------- */
.ruimtes{display:grid;gap:16px}
@media(min-width:760px){.ruimtes{grid-template-columns:repeat(3,1fr)}}
.ruimte{border-radius:var(--radius);overflow:hidden;background:var(--wit);border:1px solid var(--lijn)}
.ruimte img{width:100%;aspect-ratio:4/3;object-fit:cover}
/* Panden en banners zijn 16/9 en bevatten tekst. Bij 4/3 snijdt de uitsnede
   dwars door het adres heen, dus die tegels krijgen hun eigen verhouding. */
.ruimte--breed img{aspect-ratio:16/9}
.ruimte figcaption{padding:.85rem 1rem;font-size:.92rem;color:var(--inkt-zacht)}

/* ---------- Locaties ---------- */
.locaties{display:grid;gap:14px;list-style:none}
@media(min-width:640px){.locaties{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.locaties{grid-template-columns:repeat(4,1fr)}}
.locatie{background:var(--wit);border:1px solid var(--lijn);border-top:4px solid var(--blauw);
  border-radius:var(--radius);padding:1.2rem}
.locatie h3{font-size:1.2rem;margin-bottom:.35rem}
.locatie address{font-style:normal;color:var(--inkt-zacht);margin-bottom:.4rem}
.locatie a{display:inline-flex;align-items:center;min-height:44px;font-weight:700;text-decoration:none}
.locatie a span{border-bottom:2px solid var(--blauw-tint);padding-bottom:1px}
.locatie a:hover span{border-bottom-color:var(--blauw-diep)}

/* ---------- Kwaliteit ---------- */
.merken{display:grid;gap:16px;align-items:center;list-style:none}
@media(min-width:700px){.merken{grid-template-columns:repeat(3,1fr)}}
.merk-item{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--radius);
  padding:1.4rem;display:flex;flex-direction:column;align-items:center;gap:.9rem;text-align:center}
.merk-item img{max-height:64px;width:auto;object-fit:contain}
.merk-item span{font-size:.92rem;color:var(--inkt-zacht)}
.merk-item .skj{font-family:var(--kop);font-size:1.9rem;color:var(--inkt);line-height:1}

/* ---------- Contact ---------- */
.contact{background:var(--mist)}
.contact__grid{display:grid;gap:22px}
@media(min-width:900px){.contact__grid{grid-template-columns:1.1fr .9fr}}
.contactkaart{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--radius);padding:clamp(20px,3vw,30px)}
.gegevens{list-style:none;display:grid;gap:.85rem;margin:0}
.gegevens li{display:flex;gap:.8rem;align-items:flex-start}
.gegevens a{display:inline-flex;align-items:center;min-height:44px}
.gegevens dt{font-weight:700}
.icoon{flex:0 0 auto;width:34px;height:34px;border-radius:9px;background:var(--blauw-tint);
  display:grid;place-items:center}
.icoon svg{width:17px;height:17px;stroke:var(--inkt);stroke-width:2;fill:none}

/* ---------- Binnenpagina: intro met verwijslijst en cijferblok ---------- */
.verwijs{display:grid;gap:clamp(24px,4vw,48px);align-items:start}
@media(min-width:900px){.verwijs{grid-template-columns:1.15fr .85fr}}
.lijstvink{list-style:none;display:grid;gap:.9rem;margin:1.5rem 0 0}
.lijstvink li{display:flex;gap:.8rem;align-items:flex-start}
.stat{background:var(--mist);border:1px solid var(--lijn);border-left:5px solid var(--blauw);
  border-radius:var(--radius);padding:clamp(20px,3vw,30px)}
.stat b{display:block;font-family:var(--kop);font-weight:600;font-size:clamp(3rem,2rem + 5vw,4.6rem);
  line-height:1;letter-spacing:-.03em}
.stat p{margin:.9rem 0 0}
.stat .bron{font-size:.85rem;color:var(--inkt-zacht);margin:.9rem 0 0}

/* ---------- Focusgrid en stappen ---------- */
.focusgrid{display:grid;gap:14px;list-style:none;margin-top:2.2rem}
@media(min-width:640px){.focusgrid{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.focusgrid{grid-template-columns:repeat(3,1fr)}}
.focuskaart{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--radius);
  padding:1.3rem 1.35rem;display:flex;flex-direction:column;gap:.45rem;padding-block:1.3rem}
.focuskaart .nr{font-family:var(--kop);font-size:.95rem;font-weight:600;color:var(--blauw-tekst);letter-spacing:.02em}
.focuskaart h3{font-size:1.14rem}
.focuskaart p{margin:0;font-size:.97rem;color:var(--inkt-zacht)}
.focuskaart--links{border-left:4px solid var(--blauw-tint)}
.focuskaart a{font-weight:700}

/* ---------- Gemeenten ---------- */
.gemeentenblok{background:var(--blauw-tint);border-radius:var(--radius);padding:clamp(20px,3vw,32px)}
.gemeentenblok p{margin:0}
.gemeentenblok p + p{margin-top:1rem}

/* ---------- Verder lezen en pagina-foto ---------- */
.verder{display:grid;gap:14px;list-style:none;margin-top:2rem}
@media(min-width:760px){.verder{grid-template-columns:repeat(3,1fr)}}
.verder a{display:flex;flex-direction:column;gap:.3rem;min-height:104px;justify-content:center;
  background:var(--wit);border:1px solid var(--lijn);border-top:4px solid var(--blauw);border-radius:var(--radius);
  padding:1.15rem 1.25rem;text-decoration:none;color:var(--inkt);font-family:var(--kop);font-size:1.2rem}
.verder a:hover{border-color:var(--blauw-diep);border-top-color:var(--blauw-diep);color:var(--inkt)}
.verder small{font-family:var(--body);font-size:.9rem;color:var(--inkt-zacht)}
.paginafoto{border-radius:var(--radius);overflow:hidden;box-shadow:var(--schaduw)}
.paginafoto img{width:100%;aspect-ratio:16/9;object-fit:cover}
.paginafoto figcaption{font-size:.86rem;color:var(--inkt-zacht);padding:.7rem 0 0}

/* ============================================================
   TOEVOEGINGEN VOOR DE 20 BINNENPAGINA'S
   ============================================================ */

/* ---------- Lopende tekst ---------- */
.tekst h2{margin-top:2.6rem}
.tekst h2:first-child{margin-top:0}
.tekst h3{margin-top:1.9rem}
.tekst > p:first-child{margin-top:0}
.tekst ul:not([class]){list-style:none;display:grid;gap:.7rem;margin:0 0 1.05rem}
.tekst ul:not([class]) li{position:relative;padding-left:1.4rem}
.tekst ul:not([class]) li::before{content:"";position:absolute;left:0;top:.72em;width:8px;height:8px;
  border-radius:50%;background:var(--blauw)}
.tekst ol{padding-left:1.3rem;display:grid;gap:.7rem;margin:0 0 1.05rem}
.tekst .lead{font-size:1.1rem}

/* ---------- Kader (getint informatieblok) ---------- */
.kader{background:var(--mist);border:1px solid var(--lijn);border-left:5px solid var(--blauw);
  border-radius:var(--radius);padding:clamp(18px,2.6vw,26px)}
.kader h2,.kader h3{margin-bottom:.6rem}
.kader > :last-child{margin-bottom:0}
.kader--koraal{border-left-color:var(--koraal)}

/* ---------- Hulproutes (meldcode en inspraak) ---------- */
.hulproutes{display:grid;gap:14px;list-style:none;margin-top:1.6rem}
@media(min-width:760px){.hulproutes{grid-template-columns:1fr 1fr}}
.hulproute{background:var(--wit);border:1px solid var(--lijn);border-top:4px solid var(--koraal);
  border-radius:var(--radius);padding:1.25rem 1.35rem}
.hulproute h3{font-size:1.15rem;margin-bottom:.35rem}
.hulproute p{margin:0 0 .3rem;color:var(--inkt-zacht);font-size:.97rem}
.hulproute a{font-weight:700;display:inline-flex;align-items:center;min-height:44px}

/* ---------- Team ---------- */
.teamgrid{list-style:none;display:grid;gap:14px;margin-top:2.2rem;
  grid-template-columns:repeat(auto-fill,minmax(148px,1fr))}
.teamkaart{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column}
.teamkaart img{width:100%;aspect-ratio:3/5;object-fit:cover;background:#fff}
.teamkaart__geen{aspect-ratio:3/5;background:var(--blauw-tint);display:grid;place-items:center;
  font-family:var(--kop);font-size:2.6rem;font-weight:600;color:var(--inkt)}
.teamkaart__tekst{padding:.8rem .9rem 1rem}
.teamkaart h3{font-size:1.1rem}
.teamkaart p{margin:.25rem 0 0;font-size:.88rem;color:var(--inkt-zacht);line-height:1.45}

/* ---------- Blogs ---------- */
.blogs{list-style:none;display:grid;gap:18px;margin-top:2.2rem}
@media(min-width:700px){.blogs{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.blogs{grid-template-columns:repeat(3,1fr)}}
.blogkaart{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column}
.blogkaart img{width:100%;aspect-ratio:16/10;object-fit:cover}
.blogkaart__geen{aspect-ratio:16/10;background:var(--blauw-tint);display:grid;place-items:center}
.blogkaart__geen img{width:104px;height:74px;object-fit:contain}
.blogkaart__tekst{padding:1.1rem 1.2rem 1.3rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.blogkaart h3{font-size:1.18rem}
.blogkaart time{font-size:.85rem;color:var(--inkt-zacht);font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.blogkaart p{margin:0;font-size:.97rem;color:var(--inkt-zacht)}

/* ---------- Vacatures ---------- */
.vacature{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--radius);
  padding:clamp(20px,3vw,34px);margin-bottom:18px}
.vacature > h2{margin-bottom:.5rem}
.vacature h3{font-size:1.12rem;margin-top:1.7rem;margin-bottom:.5rem}
.vacature > :last-child{margin-bottom:0}
.kenmerken{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1.3rem}
.kenmerken li{background:var(--blauw-tint);border-radius:999px;padding:.3rem .85rem;font-size:.9rem;font-weight:700}

/* ---------- Keuzehulp tabel ---------- */
.tabelwrap{overflow-x:auto;margin-top:2rem;border:1px solid var(--lijn);border-radius:var(--radius)}
.tabel{width:100%;border-collapse:collapse;font-size:.98rem;min-width:520px}
.tabel th,.tabel td{text-align:left;padding:.85rem 1.1rem;border-bottom:1px solid var(--lijn);vertical-align:top}
.tabel thead th{background:var(--mist);font-family:var(--body);font-weight:700;font-size:.9rem;
  letter-spacing:.05em;text-transform:uppercase}
.tabel tr:last-child td{border-bottom:0}
.tabel td a{font-weight:700}

/* ---------- Footer ---------- */
.voet{background:var(--nacht);color:#fff;padding:clamp(46px,6vw,72px) 0 30px}
.voet a{color:#a9dcf1;text-decoration:none}
.voet a:hover{color:#fff;text-decoration:underline}
.voet__grid{display:grid;gap:32px}
@media(min-width:760px){.voet__grid{grid-template-columns:1.3fr 1fr 1fr 1fr}}
.voet h2{font-size:1.06rem;font-family:var(--body);font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;margin-bottom:1rem;color:#fff}
.voet ul{list-style:none;display:grid;gap:.55rem;font-size:.96rem}
.voet li a{display:inline-flex;min-height:34px;align-items:center}
.voet__over p{color:#b8c6cd;font-size:.96rem}   /* 10,01:1 op nacht */
.voet__logo{background:#fff;border-radius:10px;padding:.55rem .7rem;display:inline-block;margin-bottom:1rem}
.voet__logo img{width:120px;height:86px;object-fit:contain}
.voet__hulp{border-top:1px solid #24363f;margin-top:34px;padding-top:26px}
.voet__hulp h2{margin-bottom:.9rem}
.voet__hulp ul{grid-template-columns:1fr;gap:.9rem}
@media(min-width:760px){.voet__hulp ul{grid-template-columns:1fr 1fr;gap:1.4rem}}
.voet__hulp li{color:#b8c6cd;display:block}
.voet__hulp b{color:#fff;display:block;font-family:var(--kop);font-weight:600;font-size:1.1rem}
.voet__hulp a{display:inline-flex;align-items:center;min-height:38px;font-weight:700}
.voet__onder{border-top:1px solid #24363f;margin-top:30px;padding-top:20px;display:flex;
  flex-wrap:wrap;gap:.5rem 1.4rem;font-size:.88rem;color:#b8c6cd}
.invullen{background:#3a2a1e;color:#ffd9c9;border:1px dashed #a2703f;border-radius:6px;
  padding:.06rem .45rem;font-size:.82rem;font-weight:700;white-space:nowrap;display:inline-block}

/* Op de getinte vlakken zakt --blauw-tekst naar 4,36:1 (blauwtint) en 4,26:1
   (koraaltint). Daar dus --blauw-diep gebruiken: 6,03:1 en 5,89:1. Gemeten. */
.statusband a:not(.btn),.gemeentenblok a,.citaat a,.uitgelicht a:not(.btn),
.kader a:not(.btn){color:var(--blauw-diep)}
/* Let op: in .paginakop NIET --blauw-diep gebruiken. Op het blauwe vlak haalt
   dat 2,63:1 en op het koraalvlak 3,12:1. De kruimels blijven --inkt: 5,96:1
   respectievelijk 7,05:1. Gemeten, niet aanpassen. */
.paginakop .kruimels a{color:var(--inkt)}
.voet .extern{color:#b8c6cd}   /* was --inkt-zacht: 2,51:1 op de donkere voet, nu 10,01:1 */

/* ---------- Mobiele belbalk ---------- */
.belbar{position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--wit);
  border-top:1px solid var(--lijn);box-shadow:0 -6px 20px rgba(18,35,43,.1);
  padding:8px 12px calc(8px + env(safe-area-inset-bottom));display:grid;grid-template-columns:1fr 1fr;gap:8px;
  transform:translateY(110%);transition:transform .26s cubic-bezier(.22,1,.36,1)}
.belbar.zichtbaar{transform:none}
.belbar a{display:flex;flex-direction:column;justify-content:center;align-items:center;
  min-height:52px;border-radius:10px;text-decoration:none;color:var(--inkt);font-weight:700;
  font-size:.95rem;line-height:1.15;text-align:center;padding:.35rem}
.belbar a small{font-size:.74rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.belbar .b{background:var(--blauw)}
.belbar .k{background:var(--koraal)}
@media(min-width:1024px){.belbar{display:none}}
@media(max-width:1023px){body{padding-bottom:76px}}

/* ============================================================
   REVEAL (patroon 1). data-rv wordt in JS gezet, dus zonder JS
   staat er niets op opacity:0 vast.
   ============================================================ */
[data-rv]{opacity:0;transform:translateY(18px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
[data-rv].in{opacity:1;transform:none}
.rm [data-rv]{opacity:1!important;transform:none!important;transition:none!important}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .hero__media img{transform:none!important}
}

/* Tikdoel: links in lopende tekst werden 19-21px hoog en zakken onder de
   minimummaat van 24x24 (WCAG 2.2 AA, criterium 2.5.8). */
p a, li a, .lead a, address a, small a, dd a, figcaption a, td a,
.tekst a:not(.btn), .kader a:not(.btn){display:inline-block;padding-block:.28rem;min-height:24px}


/* ===== Verwijzersblok inklappen op mobiel =====
   Dit blok is 1886px = 2,2 schermen op 390px, en het is informatie voor
   professionals terwijl daar vooral ouders kijken. Ingeklapt achter een knop:
   ouders scrollen erlangs, verwijzers tikken een keer. Desktop blijft open.
   LET OP: grid-template-rows:0fr definieert maar EEN rij. Op een lijst met zes
   kinderen krijgen kind 2 t/m 6 een impliciete auto-rij en klapt er niets in.
   Daarom collabeert een wrapper met precies een kind. */
.verwijzers__knop{display:none}
@media(max-width:719px){
  .verwijzers__knop{
    display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;
    margin-top:1.6rem;padding:1rem 1.15rem;min-height:44px;cursor:pointer;
    font:inherit;font-weight:700;text-align:left;color:#fff;
    background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.28);border-radius:10px;
  }
  .verwijzers__knop:focus-visible{outline:3px solid var(--blauw);outline-offset:2px}
  .verwijzers__knop svg{flex:none;transition:transform .3s cubic-bezier(.16,1,.3,1)}
  .verwijzers[data-open="true"] .verwijzers__knop svg{transform:rotate(180deg)}
  .verwijzers__body{
    display:grid;grid-template-rows:0fr;
    transition:grid-template-rows .38s cubic-bezier(.16,1,.3,1);
  }
  .verwijzers[data-open="true"] .verwijzers__body{grid-template-rows:1fr}
  .verwijzers__inner{overflow:hidden;min-height:0}
  .verwijzers[data-open="true"] .feiten{margin-top:1.1rem}
  .rm .verwijzers__body{grid-template-rows:1fr}
}


/* ===== Footer inklappen op mobiel =====
   De footer was 1940px = 2,3 schermen met 24 links in vier lijsten. Op mobiel
   klappen de linkgroepen dicht; het logo, de omschrijving en de hulpnummers
   blijven altijd zichtbaar. Desktop verandert niet. */
.voet__knop{display:none}
@media(max-width:899px){
  .voet__groep .voet__knop{
    display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;
    padding:.85rem 0;min-height:44px;cursor:pointer;font:inherit;text-align:left;
    background:none;border:0;border-top:1px solid rgba(255,255,255,.16);color:inherit;
  }
  .voet__groep .voet__knop h2{margin:0;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase}
  .voet__groep .voet__knop:focus-visible{outline:3px solid var(--blauw);outline-offset:-3px}
  .voet__groep .voet__knop svg{flex:none;transition:transform .3s cubic-bezier(.16,1,.3,1)}
  .voet__groep[data-open="true"] .voet__knop svg{transform:rotate(180deg)}
  .voet__body{display:grid;grid-template-rows:0fr;
    transition:grid-template-rows .34s cubic-bezier(.16,1,.3,1)}
  .voet__groep[data-open="true"] .voet__body{grid-template-rows:1fr}
  .voet__body > div{overflow:hidden;min-height:0}
  .voet__groep ul{padding-bottom:.6rem}
  .rm .voet__body{grid-template-rows:1fr}
}