/* ══════════════════════════════════════════════════════
   Subpagina's — behandelingen, gemeenten, hubs.
   Leunt volledig op de tokens uit styles.css. Geen nieuwe
   kleuren, geen nieuwe fonts: dezelfde site, andere pagina.
   ══════════════════════════════════════════════════════ */

/* de nav op subpagina's start meteen "vast": er is geen donkere hero
   waar hij lichtjes overheen kan liggen */
.nav--sub{
  background:rgba(250,247,243,.93);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--lijn);
}
/* styles.css draait de balk om naar licht zolang hij niet .vast is, omdat de
   homepage-hero een donkere foto is. Subpagina's hebben die hero niet, dus die
   omkering moet hier weer terug. */
.nav--sub:not(.vast) .nav__links a{ color:var(--inkt-2) }
.nav--sub:not(.vast) .nav__links a:hover{ color:var(--groen-700) }
.nav--sub:not(.vast) .merk{ color:var(--inkt) }
.nav--sub:not(.vast) .merk__mark{ color:var(--groen-500) }
.nav--sub:not(.vast) .merk__txt i{ color:var(--groen-700) }
.nav--sub:not(.vast) .nav__links .knop{
  background:var(--groen-700); border-color:var(--groen-700); color:var(--zand);
}
.nav--sub:not(.vast) .nav__links .knop:hover{
  background:var(--groen-900); border-color:var(--groen-900); color:var(--zand);
}

/* ── kruimelpad ──────────────────────────────────────── */
.kruimel{
  padding:calc(5.5rem + .9rem) 0 0;
  font-size:.8rem;
  letter-spacing:.04em;
  color:var(--inkt-3);
}
.kruimel ol{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:.5rem .35rem; align-items:center;
}
.kruimel li+li::before{ content:"›"; margin-right:.35rem; color:var(--lijn) }
.kruimel a{ text-decoration:none; color:var(--inkt-2) }
.kruimel a:hover{ color:var(--groen-700) }
.kruimel [aria-current]{ color:var(--inkt-3) }

/* ── kop van een subpagina ───────────────────────────── */
.subhero{ padding:2.2rem 0 clamp(2rem,5vw,3.4rem) }
.subhero__in > *{ max-width:44rem }
.subhero h1{
  font-size:clamp(2.3rem, 5.2vw, 4rem);
  margin:.5rem 0 0;
}
.subhero .lead{
  font-size:clamp(1.08rem, 1rem + .45vw, 1.3rem);
  color:var(--inkt-2);
  margin:1.1rem 0 0;
  max-width:36em;
}

/* ── "herken je dit?" ────────────────────────────────── */
.herken{
  background:var(--groen-100);
  border-top:1px solid var(--groen-200);
  border-bottom:1px solid var(--groen-200);
  padding:clamp(1.8rem,4vw,2.8rem) 0;
}
.herken__in > *{ max-width:52rem }
.herken__kop{
  font-size:.74rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--groen-700); margin:0 0 1rem;
}
.herken ul{ list-style:none; margin:0; padding:0; display:grid; gap:.7rem }
.herken li{
  font-family:var(--serif);
  font-size:clamp(1.15rem,1rem + .7vw,1.5rem);
  font-style:italic;
  line-height:1.3;
  color:var(--groen-900);
  padding-left:1.1rem;
  border-left:2px solid var(--groen-500);
}
.herken li::before{ content:"“" }
.herken li::after{ content:"”" }
.herken__slot{ margin:1.3rem 0 0; color:var(--inkt-2); font-size:.95rem }

/* ── tekstkolom + zijkolom ───────────────────────────── */
.sub-lijf__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 20rem;
  gap:clamp(2rem,5vw,4.5rem);
  align-items:start;
}
.sub-lijf__tekst{ max-width:40rem }
.proza+.proza{ margin-top:clamp(2rem,4vw,3rem) }
.proza h2{
  font-size:clamp(1.55rem,1.2rem + 1.1vw,2.2rem);
  margin:0 0 .9rem;
}
.proza p{ margin:0 0 1rem; color:var(--inkt-2) }
.proza p:last-child{ margin-bottom:0 }
.proza b{ font-weight:500; color:var(--inkt) }

/* open punt dat Veerle nog moet aanleveren — bewust zichtbaar,
   niet verzonnen */
.proza--open{
  border:1px dashed var(--klei);
  border-radius:var(--r);
  padding:clamp(1.2rem,3vw,1.8rem);
  background:rgba(188,154,110,.06);
}
.proza--open h2{ font-size:clamp(1.2rem,1rem + .6vw,1.5rem); color:var(--klei) }
.proza--open ul{ margin:.8rem 0 0; padding-left:1.1rem; color:var(--inkt-2) }
.proza--open li{ margin:.4rem 0 }

.sub-zij{ position:sticky; top:6.5rem; display:grid; gap:1.2rem }
.sub-beeld{ margin:0 }
.sub-beeld img{ width:100%; border-radius:var(--r) }
.sub-beeld figcaption{
  font-size:.8rem; color:var(--inkt-3); margin-top:.5rem; line-height:1.5;
}
.zij-kaart{
  background:var(--zand-2);
  border:1px solid var(--lijn);
  border-radius:var(--r);
  padding:1.4rem;
}
.zij-kaart--stil{ background:transparent }
.zij-kaart__kop{
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--groen-700); margin:0 0 .7rem;
}
.zij-kaart p{ margin:0 0 .5rem; font-size:.92rem; color:var(--inkt-2); line-height:1.6 }
.zij-kaart .knop{ margin-top:.9rem }
.zij-lijst{ list-style:none; margin:0 0 .4rem; padding:0 }
.zij-lijst li{
  font-size:.92rem; color:var(--inkt-2);
  padding:.32rem 0; border-bottom:1px solid var(--lijn);
}
.zij-lijst li:last-child{ border-bottom:0 }

/* ── voor/na op een subpagina ────────────────────────── */
.sub-paar{
  margin:0 auto clamp(2rem,5vw,3.5rem);
  max-width:760px;
  padding:0 var(--pad);
}
.sub-paar figcaption{
  margin-top:.8rem; font-size:.85rem; color:var(--inkt-3); text-align:center;
}

/* ── vragen ──────────────────────────────────────────── */
.vragen{
  background:var(--zand-2);
  border-top:1px solid var(--lijn);
  padding:clamp(2.5rem,6vw,4.5rem) 0;
}
.vragen__in > *{ max-width:46rem }
.vragen h2{ margin:0 0 1.5rem }
.vragen details{
  border-bottom:1px solid var(--lijn);
}
.vragen summary{
  cursor:pointer; list-style:none;
  padding:1.05rem 2rem 1.05rem 0;
  position:relative;
  font-size:1.02rem;
  color:var(--inkt);
}
.vragen summary::-webkit-details-marker{ display:none }
.vragen summary::after{
  content:"+"; position:absolute; right:.2rem; top:50%;
  transform:translateY(-50%);
  font-size:1.3rem; color:var(--groen-700); line-height:1;
}
.vragen details[open] summary::after{ content:"–" }
.vragen summary:hover{ color:var(--groen-700) }
.vraag__a{ padding:0 2rem 1.2rem 0 }
.vraag__a p{ margin:0; color:var(--inkt-2) }

/* ── afsluitende oproep ──────────────────────────────── */
.sub-cta{
  background:var(--groen-900);
  color:var(--zand);
  padding:clamp(3rem,7vw,5rem) 0;
}
.sub-cta__in{ text-align:center }
.sub-cta__in > *{ max-width:42rem; margin-inline:auto }
.sub-cta h2{ color:var(--zand); margin:0 0 .9rem }
.sub-cta p{ color:rgba(250,247,243,.8); margin:0 }
.sub-cta__knoppen{
  display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; margin:1.8rem 0 0;
}
.sub-cta .knop{ background:var(--zand); color:var(--groen-900); border-color:var(--zand) }
.sub-cta .knop--lijn{ background:transparent; color:var(--zand); border-color:rgba(250,247,243,.4) }
.sub-cta .knop--lijn:hover{ border-color:var(--zand) }
.sub-cta__klein{
  margin-top:1.4rem !important; font-size:.82rem; color:rgba(250,247,243,.55) !important;
}

/* ── verwante pagina's ───────────────────────────────── */
.verwant{ padding:clamp(2.5rem,6vw,4.5rem) 0 }
.verwant .overline{ margin:0 0 1.4rem }
.verwant__grid{
  display:grid; gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
}
.verwant__grid--3{ grid-template-columns:repeat(auto-fit,minmax(16rem,1fr)) }
.verwant .tegel{
  display:block; position:relative;
  background:var(--zand-2);
  border:1px solid var(--lijn);
  border-radius:var(--r);
  padding:1.4rem 1.4rem 2.6rem;
  text-decoration:none;
  transition:border-color .25s, transform .25s, background .25s;
}
.verwant .tegel:hover{
  border-color:var(--groen-500); background:var(--groen-100); transform:translateY(-2px);
}
.verwant .tegel h3{ margin:0 0 .5rem; font-size:1.25rem }
.verwant .tegel p{ margin:0; font-size:.9rem; color:var(--inkt-2); line-height:1.6 }
.tegel__pijl{
  position:absolute; left:1.4rem; bottom:1.1rem;
  color:var(--groen-700); font-size:1.1rem;
}
.verwant__meer{ margin:1.6rem 0 0; font-size:.95rem }
.verwant__meer a{ color:var(--groen-700); text-decoration:none; border-bottom:1px solid var(--groen-200) }
.verwant__meer a:hover{ border-color:var(--groen-700) }

/* ── hub: raster van klachten ────────────────────────── */
.hub-grid{
  display:grid; gap:1.1rem;
  grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));
}
.hub-kaart{
  display:flex; flex-direction:column;
  background:var(--zand-2);
  border:1px solid var(--lijn);
  border-radius:var(--r);
  overflow:hidden;
  text-decoration:none;
  transition:border-color .25s, transform .25s;
}
.hub-kaart:hover{ border-color:var(--groen-500); transform:translateY(-2px) }
.hub-kaart__beeld{ display:block; aspect-ratio:4/3; overflow:hidden; background:var(--zand-3) }
.hub-kaart__beeld img{ width:100%; height:100%; object-fit:cover }
.hub-kaart__beeld--leeg{
  background:
    linear-gradient(135deg, var(--groen-100), var(--zand-3));
}
.hub-kaart__lijf{ display:block; padding:1.2rem 1.3rem 2.4rem; position:relative; flex:1 }
.hub-kaart__titel{
  display:block; font-family:var(--serif); font-size:1.3rem; line-height:1.2;
  color:var(--inkt); margin-bottom:.5rem;
}
.hub-kaart__herken{
  display:block; font-style:italic; font-size:.9rem; color:var(--inkt-2); line-height:1.55;
}
.hub-kaart__pijl{ position:absolute; left:1.3rem; bottom:1rem; color:var(--groen-700) }

.sectie--zand{ background:var(--zand-2); border-top:1px solid var(--lijn) }

/* ── voor & na-pagina ────────────────────────────────── */
.vn-lijst{ display:grid; gap:clamp(2.5rem,6vw,4rem) }
.vn-paar{
  display:grid; gap:clamp(1.2rem,3vw,2.5rem);
  grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  align-items:center;
}
.vn-paar__tekst h2{ font-size:clamp(1.5rem,1.2rem + 1vw,2.1rem); margin:0 0 .7rem }
.vn-paar__tekst p{ margin:0 0 .7rem; color:var(--inkt-2) }
.vn-paar__tekst a{ color:var(--groen-700); text-decoration:none; border-bottom:1px solid var(--groen-200) }
.vn-raster{
  display:grid; gap:1.2rem;
  grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));
}
.vn-los{ margin:0 }
.vn-los img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--r) }
.vn-los figcaption{ margin-top:.55rem; font-size:.82rem; color:var(--inkt-3); line-height:1.5 }
.vn-los a{ color:var(--groen-700) }

/* ── voettekst met meer kolommen ─────────────────────── */
.voet--sub .voet__in{ align-items:start }
.voet--sub .voet__merk{ max-width:22rem }
.voet__adres{ margin-top:.9rem; font-size:.88rem }
.voet__kop{
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--groen-500); margin:0 0 .6rem !important;
}
.voet__kop--2{ margin-top:1.3rem !important }
.voet--sub .voet__kol p{ line-height:2 }

/* ── smal ────────────────────────────────────────────── */
@media (max-width: 62rem){
  .sub-lijf__grid{ grid-template-columns:1fr }
  .sub-zij{ position:static; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)) }
  .vn-paar{ grid-template-columns:1fr }
}
@media (max-width: 40rem){
  .kruimel{ padding-top:calc(4.6rem + .7rem) }
  .kruimel ol{ font-size:.75rem }
  .sub-zij{ grid-template-columns:1fr }
}

/* ── homepage: doorkliks vanaf de klachtkaarten ──────── */
.zorg__meer{ margin:1rem 0 0 !important; font-size:.9rem }
.zorg__meer a{
  color:var(--groen-700); text-decoration:none;
  border-bottom:1px solid var(--groen-200);
  padding-bottom:1px;
}
.zorg__meer a:hover{ border-color:var(--groen-700) }
.zorg__slot h3 a{ color:inherit; text-decoration:none }
.zorg h3 a{ color:inherit; text-decoration:none }
.zorg h3 a:hover{ color:var(--groen-700) }

/* ── homepage: werkgebied ────────────────────────────── */
.regio{ background:var(--zand-2); border-top:1px solid var(--lijn) }
.regio__grid{
  display:grid; gap:.8rem; margin-top:clamp(1.8rem,4vw,2.6rem);
  grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));
}
.regio__grid a{
  display:flex; align-items:center; justify-content:center;
  min-height:5.2rem; padding:1rem .8rem;
  background:var(--zand);
  border:1px solid var(--lijn); border-radius:var(--r);
  font-family:var(--serif); font-size:1.35rem;
  text-decoration:none; color:var(--inkt);
  transition:border-color .25s, background .25s, transform .25s;
}
.regio__grid a:hover{
  border-color:var(--groen-500); background:var(--groen-100);
  color:var(--groen-900); transform:translateY(-2px);
}
.regio__meer{
  display:flex; flex-wrap:wrap; gap:.4rem 1.6rem;
  margin:1.6rem 0 0; font-size:.92rem;
}
.regio__meer a{
  color:var(--groen-700); text-decoration:none;
  border-bottom:1px solid var(--groen-200);
}
.regio__meer a:hover{ border-color:var(--groen-700) }

/* de subhero heeft zelf al ruimte onderaan; de eerste sectie erna hoeft
   niet nog eens de volle .sectie-padding bovenop te zetten */
.subhero + .sectie,
.subhero + div.sectie{ padding-top:0 }
.subhero + .herken + .sectie,
.subhero + .herken + div.sectie{ padding-top:clamp(2.2rem,5vw,3.6rem) }