/* =============================================================
   BRAINSPARK — foundation stylesheet
   Placeholder identity, built swap-ready:
   the creative hire's delivery replaces the :root tokens below;
   pages never hard-code colors or fonts.
   =============================================================
   Palette brief: forest green + cream base, gold highlight.
   Type (placeholder): Archivo (display) · IBM Plex Sans (body)
   · Jost (meta, badges & taglines — Glacial Indifference-achtig).
   IBM Plex Mono is bewust verbannen: geen typewriter-fonts.
   ============================================================= */

/* ---------- 1. DESIGN TOKENS (the swap layer) ---------- */
:root {
  /* base */
  --c-cream:       #F6F2E6;   /* page background */
  --c-cream-2:     #EDE6D2;   /* panels, cards */
  --c-cream-3:     #E4DCC3;   /* pressed / borders on cream */
  --c-ink:         #20261F;   /* body text */
  --c-ink-soft:    #4A5347;   /* secondary text */

  /* forest green */
  --c-forest:      #1E4B38;   /* primary brand */
  --c-forest-deep: #122E22;   /* footer, dark bands */
  --c-forest-soft: #33654E;   /* hover */
  --c-on-forest:   #F2EEDF;   /* text on green */

  /* gold highlight */
  --c-gold:        #D9A514;   /* graphic accent: rules, chips, marks */
  --c-gold-soft:   #EAC24A;   /* hover accent on dark */
  --c-gold-ink:    #7A5E0B;   /* text-safe gold on cream (contrast) */

  /* the three Gaps — sitewide taxonomy, drie tinten groen
     (besluit 2026-07: donker → midden → licht i.p.v. groen/blauw/paars) */
  --gap-kennis:    #173D28;   /* Gap 01 · knowledge (donkergroen) */
  --gap-zorg:      #2F7D4F;   /* Gap 02 · quality of care (middengroen) */
  --gap-empathie:  #6FAE7C;   /* Gap 03 · double empathy (lichtgroen — donkere tekst erop) */

  /* lines & shadows */
  --hair:          rgba(30, 75, 56, .22);
  --shadow:        0 1px 2px rgba(18, 46, 34, .06), 0 8px 24px rgba(18, 46, 34, .07);

  /* type */
  --f-display: 'Archivo', 'Arial Black', sans-serif;
  --f-body:    'IBM Plex Sans', 'Segoe UI', sans-serif;
  --f-geo:     'Jost', 'Century Gothic', sans-serif;  /* Glacial Indifference-achtig — badges, taglines & meta */

  /* scale */
  --fs-hero:  clamp(2.1rem, 5.2vw, 3.4rem);
  --fs-h2:    clamp(1.45rem, 3vw, 2rem);
  --fs-h3:    1.15rem;
  --fs-body:  1.0625rem;   /* 17px — generous for readability */
  --fs-meta:  .8125rem;

  /* rhythm */
  --space-1: .5rem;
  --space-2: 1rem;
  --space-3: 1.75rem;
  --space-4: 3rem;
  --space-5: 5rem;
  --maxw:    72rem;
  --maxw-text: 44rem;
  --radius:  10px;
}

/* ---------- 2. BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
body {
  margin: 0;
  background: var(--c-cream);
  color: var(--c-ink);
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
h1, h2, h3 { font-family: var(--f-display); line-height: 1.15; color: var(--c-forest-deep); margin: 0 0 var(--space-2); letter-spacing: -.01em; }
h1 { font-size: var(--fs-hero); font-weight: 800; }
h2 { font-size: var(--fs-h2); font-weight: 700; }
h3 { font-size: var(--fs-h3); font-weight: 700; }
p  { margin: 0 0 var(--space-2); max-width: var(--maxw-text); }
a  { color: var(--c-forest); text-decoration-color: var(--c-gold); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--c-forest-soft); }
::selection { background: var(--c-gold); color: var(--c-ink); }
:focus-visible { outline: 3px solid var(--c-gold); outline-offset: 3px; border-radius: 2px; }

.skip-link {
  position: absolute; left: -999px; top: 0;
  background: var(--c-forest-deep); color: var(--c-on-forest);
  padding: .6rem 1rem; z-index: 100; border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2.5rem); }
main > section { padding: var(--space-4) 0; }

/* meta text: versions, dates, labels — the epistemic layer */
.meta {
  font-family: var(--f-geo);
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .05em;
  color: var(--c-ink-soft);
}
.meta strong { color: var(--c-gold-ink); font-weight: 600; }

/* ---------- 3. SIGNATURE — the gap in the track ----------
   A track rule with a deliberate gap and two station dots.
   Used under page titles and section openers: the metaphor
   as structure, not decoration. */
.rule-gap {
  display: flex; align-items: center; gap: 0;
  height: 14px; margin: var(--space-2) 0 var(--space-3);
  max-width: 22rem;
}
.rule-gap::before, .rule-gap::after {
  content: ""; height: 4px; background: var(--c-forest); border-radius: 2px;
}
.rule-gap::before { flex: 1 1 60%; }
.rule-gap::after  { flex: 1 1 25%; }
.rule-gap .station {
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--c-cream); border: 4px solid var(--c-gold);
  margin: 0 .55rem; flex: none;
}
.rule-gap .station:first-child { margin-left: .55rem; }
/* variant on dark bands */
.on-dark .rule-gap::before, .on-dark .rule-gap::after { background: var(--c-gold); }
.on-dark .rule-gap .station { background: var(--c-forest-deep); }

/* ---------- 4. HEADER & NAV ---------- */
.site-header {
  background: var(--c-cream);
  position: sticky; top: 0; z-index: 50;
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-2); min-height: 4.25rem;
}
.wordmark {
  font-family: var(--f-display); font-weight: 800; font-size: 1.35rem;
  color: var(--c-forest-deep); text-decoration: none; letter-spacing: -.01em;
  display: inline-flex; align-items: baseline;
}
.wordmark .spark { color: var(--c-gold-ink); }
.wordmark .dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--c-gold); align-self: center; margin-left: .4rem;
}

.site-nav ul { list-style: none; display: flex; gap: .25rem; margin: 0; padding: 0; }
.site-nav a {
  display: block; padding: .55rem .8rem;
  font-family: var(--f-display); font-weight: 600; font-size: .95rem;
  color: var(--c-forest-deep); text-decoration: none; border-radius: 6px;
  border-bottom: 3px solid transparent;
}
.site-nav a:hover { background: var(--c-cream-2); }
.site-nav a[aria-current="page"] { border-bottom-color: var(--c-gold); }

/* sub-link onder Library (Externe bronnen) en Het Landschap (Startpunt).
   Mobiel: statisch, ingesprongen in het uitklapmenu. Desktop: verborgen tot
   je over "Library"/"Het Landschap" hovert of er met het toetsenbord op focust
   (dropdown-stijl, zie .has-sub hieronder). */
.site-nav .nav-sub {
  font-family: var(--f-geo); font-weight: 500; font-size: .72rem;
  letter-spacing: .01em; color: var(--c-ink-soft); text-decoration: none;
}
.site-nav .nav-sub:hover { color: var(--c-forest-deep); text-decoration: underline; }
.site-nav .nav-sub[aria-current="page"] {
  color: var(--c-forest-deep); font-weight: 700;
  text-decoration: underline; text-decoration-color: var(--c-gold); text-underline-offset: 2px;
}
@media (min-width: 821px) {
  .site-nav li.has-sub { position: relative; }
  .site-nav .nav-sub {
    display: block; position: absolute; left: .8rem; top: 100%; margin-top: 0;
    padding: .65rem .7rem .55rem; white-space: nowrap;
    background: var(--c-cream); border-radius: 6px; box-shadow: var(--shadow);
    opacity: 0; pointer-events: none; transform: translateY(-4px);
    transition: opacity .15s ease, transform .15s ease;
  }
  .site-nav li.has-sub:hover .nav-sub,
  .site-nav li.has-sub:focus-within .nav-sub {
    opacity: 1; pointer-events: auto; transform: translateY(0);
  }
}

/* sitebrede gap-kleurlijn: vervangt de vlakke lijn onder de nav, kleuren geven
   aan welke gap(s) deze pagina dient (zelfde principe als de vroegere .gap-taxo,
   nu edge-to-edge onder de header i.p.v. onder de paginatitel)
   <div class="gap-line" aria-hidden="true"><span class="seg kennis aan">…</div> */
.gap-line { display: flex; height: 5px; }
.gap-line .seg { flex: 1; opacity: .18; }
.gap-line .seg.kennis   { background: var(--gap-kennis); }
.gap-line .seg.zorg     { background: var(--gap-zorg); }
.gap-line .seg.empathie { background: var(--gap-empathie); }
.gap-line .seg.aan      { opacity: 1; }

.lang-toggle {
  font-family: var(--f-geo); font-size: .8rem; letter-spacing: .06em;
  border: 1.5px solid var(--c-forest); border-radius: 999px;
  padding: .3rem .8rem; text-decoration: none; color: var(--c-forest-deep);
  white-space: nowrap;
}
.lang-toggle:hover { background: var(--c-forest); color: var(--c-on-forest); }

.nav-toggle {
  display: none; background: none; border: 1.5px solid var(--c-forest);
  border-radius: 6px; padding: .45rem .7rem; cursor: pointer;
  font-family: var(--f-display); font-weight: 700; color: var(--c-forest-deep);
}
@media (max-width: 820px) {
  .nav-toggle { display: inline-block; }
  .site-nav { display: none; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--c-cream); border-bottom: 1px solid var(--hair);
    box-shadow: var(--shadow); }
  .site-nav.open { display: block; }
  .site-nav ul { flex-direction: column; padding: .75rem clamp(1rem,4vw,2.5rem) 1rem; }
  .site-nav a { padding: .8rem .5rem; border-bottom: none; border-left: 3px solid transparent; border-radius: 4px; }
  .site-nav a[aria-current="page"] { border-left-color: var(--c-gold); }
  .site-nav .nav-sub { margin-top: 0; padding: .55rem .5rem .55rem 1.7rem; font-size: .78rem; }
  .site-nav .nav-sub[aria-current="page"] { border-left: 3px solid var(--c-gold); margin-left: -3px; padding-left: calc(1.7rem - 3px); }
}

/* ---------- 5. HERO ---------- */
.hero { padding: var(--space-5) 0 var(--space-4); }
.hero .kicker {
  font-family: var(--f-geo); font-size: .85rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--c-gold-ink); margin-bottom: var(--space-2);
}
.hero p.lede { font-size: 1.2rem; color: var(--c-ink-soft); max-width: 40rem; }

/* ---------- 6. GAP CHIPS — the taxonomy ---------- */
.gap-chip {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--f-geo); font-size: .78rem; font-weight: 600;
  letter-spacing: .05em; color: var(--c-ink);
  background: var(--c-cream-2); border: 1px solid var(--hair);
  border-radius: 999px; padding: .25rem .75rem .25rem .5rem;
}
.gap-chip::before {
  content: ""; width: 12px; height: 12px; border-radius: 50%;
  background: var(--gap-c, var(--c-forest));
  border: 2.5px solid var(--c-cream); box-shadow: 0 0 0 1.5px var(--gap-c, var(--c-forest));
}
.gap-chip.zorg     { --gap-c: var(--gap-zorg); }
.gap-chip.kennis   { --gap-c: var(--gap-kennis); }
.gap-chip.empathie { --gap-c: var(--gap-empathie); }

/* ---------- 7. BUTTONS ---------- */
.btn {
  display: inline-block; font-family: var(--f-display); font-weight: 700;
  font-size: .95rem; text-decoration: none; cursor: pointer;
  border-radius: var(--radius); padding: .7rem 1.35rem;
  border: 2px solid var(--c-forest); transition: background .15s, color .15s;
}
.btn-primary { background: var(--c-forest); color: var(--c-on-forest); }
.btn-primary:hover { background: var(--c-forest-soft); border-color: var(--c-forest-soft); color: var(--c-on-forest); }
.btn-ghost { background: transparent; color: var(--c-forest-deep); }
.btn-ghost:hover { background: var(--c-cream-2); color: var(--c-forest-deep); }
.on-dark .btn-primary { background: var(--c-gold); border-color: var(--c-gold); color: var(--c-ink); }
.on-dark .btn-primary:hover { background: var(--c-gold-soft); border-color: var(--c-gold-soft); }

/* ---------- 8. CARDS ---------- */
.card-grid { display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.card {
  background: var(--c-cream-2); border: 1px solid var(--hair);
  border-radius: var(--radius); padding: var(--space-3);
  box-shadow: var(--shadow); display: flex; flex-direction: column; gap: .6rem;
}
.card h3 { margin: 0; }
.card p { margin: 0; font-size: .97rem; color: var(--c-ink-soft); }
.card .card-foot {
  margin-top: auto; padding-top: var(--space-2);
  display: flex; justify-content: space-between; align-items: center; gap: .5rem;
  border-top: 1px dashed var(--hair);
}

/* tagline: korte kenmerk-regels op kaarten ("Diagnostiek · Antwerpen · volwassenen") */
.tagline {
  font-family: var(--f-geo); font-weight: 500; font-size: .9rem;
  letter-spacing: .06em; color: var(--c-ink-soft); margin: 0;
}

/* artifact card (Library): version + date are first-class */
.card .chips { display: flex; flex-wrap: wrap; gap: .4rem; }

/* status badges (Engagements, availability) */
.badge {
  display: inline-block; font-family: var(--f-geo); font-weight: 500;
  font-size: .8rem; letter-spacing: .07em;
  padding: .2rem .6rem; border-radius: 4px;
}
.badge-open   { background: #DCE9DB; color: #1E4B38; border: 1px solid #B9D2B8; }
.badge-wait   { background: #F3E4C2; color: #6B4E00; border: 1px solid #E0C98A; }
.badge-closed { background: #EBD7D2; color: #7C2A1B; border: 1px solid #D9B4AB; }

/* ---------- 9. DARK BAND (footer, feature sections) ---------- */
.band-dark { background: var(--c-forest-deep); color: var(--c-on-forest); }
.band-dark h2, .band-dark h3 { color: var(--c-cream); }
.band-dark a { color: var(--c-gold-soft); text-decoration-color: var(--c-gold-soft); }
.band-dark .meta { color: #B9C4B4; }

/* ---------- 10. FORMS ---------- */
form.std { display: grid; gap: var(--space-2); max-width: 34rem; }
form.std label { font-family: var(--f-display); font-weight: 600; font-size: .95rem; display: grid; gap: .4rem; }
form.std input, form.std textarea, form.std select {
  font: inherit; color: var(--c-ink);
  background: #FFFDF6; border: 1.5px solid var(--hair); border-radius: 8px;
  padding: .65rem .8rem; width: 100%;
}
form.std input:focus, form.std textarea:focus, form.std select:focus {
  outline: 3px solid var(--c-gold); outline-offset: 1px; border-color: var(--c-forest);
}

/* ---------- 11. FOOTER ---------- */
.site-footer { margin-top: var(--space-5); }
.site-footer .inner { padding: var(--space-4) 0; display: grid; gap: var(--space-3); grid-template-columns: 2fr 1fr 1fr; }
.site-footer h3 { font-size: 1rem; color: var(--c-gold-soft); letter-spacing: .04em; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.site-footer li.footer-sub { margin: -.2rem 0 0 1rem; }
.site-footer li.footer-sub a { font-size: .85rem; opacity: .8; }
.site-footer .legal {
  border-top: 1px solid rgba(242,238,223,.18);
  padding: var(--space-2) 0; font-size: .85rem; color: #B9C4B4;
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
}
@media (max-width: 820px) { .site-footer .inner { grid-template-columns: 1fr; } }

/* ---------- 12. UTILITIES ---------- */
.text-narrow { max-width: var(--maxw-text); }
/* sitebrede utility: tekst die de volle breedte van .wrap mag gebruiken i.p.v. de standaard leesbreedte */
.text-wide, .text-wide p { max-width: none; }
.hero p.lede.text-wide { max-width: none; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* =============================================================
   13. DESIGNRONDE 2026-07 — "VELDBOEK × VONK"
   Sitewide raamwerken: papierkorrel, gap-taxonomielijn,
   stempel (epistemische laag), lege staten, fiche, bladspiegel,
   citaten, mededelingen, grondlagen, dienstregeling, agenda-rail,
   overstap-links, balans, register. Nieuwe microcopy in deze
   ronde = placeholder tot Aileen tekent.
   ============================================================= */

/* papierkorrel + boekhoofd (dubbele haarlijn) — sitewide look */
body {
  background-image: radial-gradient(rgba(30,75,56,.035) 1px, transparent 1px);
  background-size: 22px 22px;
}
.site-header { box-shadow: 0 3px 0 -2px var(--hair); }

/* paragraafnummers boven sectietitels */
.paragraaf-nr {
  font-family: var(--f-geo); font-weight: 600; font-size: .78rem;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--c-gold-ink); margin: 0 0 .5rem;
}

/* ---------- gap-taxonomielijn: waar zit deze pagina in de missie?
   <div class="gap-taxo" aria-hidden="true">
     <span class="seg kennis aan"></span><span class="seg zorg"></span>…
   Heldere segmenten = de gap(s) die deze pagina dient. ---------- */
.gap-taxo {
  display: flex; gap: 6px; height: 5px;
  max-width: 22rem; margin: .35rem 0 var(--space-2);
}
.gap-taxo .seg { flex: 1; border-radius: 3px; opacity: .18; }
.gap-taxo .seg.kennis   { background: var(--gap-kennis); }
.gap-taxo .seg.zorg     { background: var(--gap-zorg); }
.gap-taxo .seg.empathie { background: var(--gap-empathie); }
.gap-taxo .seg.aan      { opacity: 1; }

/* ---------- stempel: versie + datum als eersteklas metadata ---------- */
.stempel {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--f-geo); font-weight: 500; font-size: .78rem;
  letter-spacing: .07em; color: var(--c-ink-soft);
  border: 1.5px solid var(--hair); border-radius: 4px;
  padding: .18rem .55rem; background: rgba(255,253,246,.7);
}
.stempel::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--c-cream); border: 2.5px solid var(--c-gold);
}
.stempel .upd {
  font-weight: 600; color: var(--c-gold-ink); text-transform: uppercase;
  letter-spacing: .1em; font-size: .68rem;
  border-left: 1.5px solid var(--hair); padding-left: .5rem;
}

/* ---------- lege/volle staten zijn inhoud, geen gaten ---------- */
.leeg {
  border: 2px dashed var(--c-cream-3); border-radius: var(--radius);
  background: rgba(255,253,246,.55);
  padding: var(--space-3); max-width: var(--maxw-text);
}
.leeg p { margin: 0; color: var(--c-ink-soft); }
.leeg .leeg-titel {
  font-family: var(--f-geo); font-weight: 600; font-size: .78rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--c-gold-ink);
  display: block; margin-bottom: .35rem;
}
/* gereserveerde plank (Research · Publicaties) */
.plank { position: relative; display: flex; align-items: flex-end; gap: .5rem; height: 3.2rem; margin-bottom: var(--space-2); }
.plank i {
  display: block; width: 1.15rem; border: 2px dashed var(--c-cream-3);
  border-bottom: none; border-radius: 3px 3px 0 0; height: 100%;
}
.plank i:nth-child(2) { height: 78%; } .plank i:nth-child(3) { height: 90%; }
.plank i:nth-child(4) { height: 66%; } .plank i:nth-child(5) { height: 84%; }
.plank-rand { height: 4px; background: var(--c-forest); border-radius: 2px; max-width: 14rem; margin: -1rem 0 var(--space-2); }

/* ---------- fiche: ingeplakte kaart met goudband (home/engagements) ---------- */
.fiche {
  max-width: 50rem; background: #FFFDF6; border: 1px solid var(--hair);
  border-radius: 2px; padding: var(--space-3); box-shadow: var(--shadow);
  transform: rotate(-.5deg); position: relative;
}
.fiche::before {
  content: ""; position: absolute; top: -9px; left: 50%;
  transform: translateX(-50%) rotate(.8deg);
  width: 7rem; height: 1.15rem; background: rgba(217,165,20,.45); border-radius: 2px;
}
.fiche > .kicker, .fiche .fiche-kicker {
  font-family: var(--f-geo); font-size: .8rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--c-gold-ink); margin: 0 0 .25rem;
}
.fiche h2, .fiche h3 { margin: 0 0 .4rem; }
.fiche .foot {
  display: flex; justify-content: space-between; align-items: center;
  gap: .8rem; flex-wrap: wrap; padding-top: var(--space-2);
  border-top: 1px dashed var(--hair);
}

/* ---------- bladspiegel: hoofdkolom + kantlijn (Aileen bio) ---------- */
.spread { display: grid; grid-template-columns: minmax(0,1fr) 15rem; gap: clamp(1.5rem,3.5vw,3.5rem); align-items: start; }
.kantlijn {
  padding-left: 1.4rem; border-left: 1px dashed var(--hair);
  display: grid; gap: 1rem; align-content: start;
  font-size: .9rem; color: var(--c-ink-soft);
}
.kantlijn .nootje { margin: 0; font-style: italic; font-size: .92rem; line-height: 1.55; }
.kantlijn .label {
  font-family: var(--f-geo); font-style: normal; font-weight: 600; font-size: .72rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--c-gold-ink);
  display: block; margin-bottom: .25rem;
}
@media (max-width: 940px) {
  .spread { grid-template-columns: 1fr; }
  .kantlijn { border-left: none; border-top: 1px dashed var(--hair); padding: 1rem 0 0; }
}

/* ---------- reviews: leesbare artikelpagina op de Leestafel ---------- */
.review-terug { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--f-geo); font-size: .85rem;
  color: var(--c-forest-deep); text-decoration: none; }
.review-terug:hover { text-decoration: underline; }
.review-kop { max-width: 42rem; }
.review-meta { font-family: var(--f-geo); font-size: .85rem; color: var(--c-ink-soft); letter-spacing: .02em; margin: 0 0 var(--space-2); }
.review-hero { max-width: 42rem; border-radius: var(--radius); border: 1px solid var(--hair); margin: 0 0 var(--space-3); overflow: hidden; }
.review-hero img { display: block; width: 100%; height: auto; }
.review-deel { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin: var(--space-2) 0 var(--space-3); }
.review-deel button, .review-deel a.btn-deel {
  font-family: var(--f-geo); font-weight: 600; font-size: .85rem; padding: .5rem 1.1rem; border-radius: 999px;
  border: 1.5px solid var(--c-forest); background: var(--c-cream-2); color: var(--c-forest-deep); cursor: pointer;
  text-decoration: none; transition: background .15s;
}
.review-deel button:hover, .review-deel a.btn-deel:hover { background: var(--c-forest-soft); }
.review-deel .deel-status { font-size: .82rem; color: var(--c-ink-soft); }
.review-body { max-width: 42rem; font-size: 1rem; line-height: 1.7; }
.review-body h2 { font-family: var(--f-display); font-weight: 800; font-size: 1.28rem; margin: var(--space-3) 0 .6rem; color: var(--c-forest-deep); }
.review-body h3 { font-family: var(--f-display); font-weight: 700; font-size: 1.05rem; margin: var(--space-2) 0 .4rem; color: var(--c-forest-deep); }
.review-body p { margin: 0 0 var(--space-2); }
.review-body ul, .review-body ol { margin: 0 0 var(--space-2); padding-left: 1.3rem; }
.review-body li { margin-bottom: .35rem; }
.review-body blockquote { margin: var(--space-2) 0; padding: .1rem 0 .1rem 1.1rem; border-left: 3px solid var(--c-gold); font-style: italic; color: var(--c-forest-deep); }
.review-figuur { margin: var(--space-2) 0; max-width: 20rem; }
.review-figuur img { display: block; width: 100%; border-radius: var(--radius); border: 1px solid var(--hair); }
.review-figuur figcaption { font-size: .78rem; color: var(--c-ink-soft); margin-top: .3rem; }
.review-feiten { list-style: none; margin: 0 0 var(--space-3); padding: .9rem 1.1rem; background: var(--c-cream-2);
  border: 1px solid var(--hair); border-radius: var(--radius); display: grid; gap: .35rem; font-size: .92rem; }
.review-feiten li strong { color: var(--c-forest-deep); }
.review-galerij { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: .6rem; margin: var(--space-2) 0; }
.review-galerij img { width: 100%; height: 8.5rem; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--hair); }
.review-referenties { font-size: .85rem; color: var(--c-ink-soft); padding-left: 1.3rem; }
.review-referenties li { margin-bottom: .5rem; }
.review-bron { font-size: .85rem; color: var(--c-ink-soft); margin-top: var(--space-3); padding-top: var(--space-2); border-top: 1px dashed var(--hair); max-width: 42rem; }
.principe-accordion { max-width: 42rem; border-top: 1px dashed var(--hair); }
.principe-item { border-bottom: 1px dashed var(--hair); }
.principe-item summary {
  cursor: pointer; list-style: none; padding: .75rem .1rem; font-family: var(--f-display); font-weight: 700;
  color: var(--c-forest-deep); display: flex; align-items: center; gap: .8rem; font-size: 1.02rem;
}
.principe-item summary::-webkit-details-marker { display: none; }
.principe-item .stip { width: 10px; height: 10px; border-radius: 50%; background: var(--c-cream); border: 3px solid var(--c-gold); flex: none; }
.principe-item[open] .stip { background: var(--c-gold); }
.principe-item p { margin: 0 0 .9rem 1.8rem; font-size: .93rem; line-height: 1.5; color: var(--c-ink-soft); max-width: 36rem; }

/* ---------- mededeling: niet te missen paneel (aanmeldstop e.d.) ---------- */
.mededeling {
  max-width: 52rem; background: #FFFDF6; border: 1px solid var(--hair);
  border-left: 6px solid var(--c-gold); border-radius: var(--radius);
  padding: var(--space-3); box-shadow: var(--shadow);
}
.mededeling p { margin: 0; }
.mededeling strong { font-family: var(--f-display); font-size: 1.05em; }

/* ---------- grondlagen / register-tabs (home-gaps, bronnen) ---------- */
.strata { display: grid; gap: 0; margin-top: var(--space-3); }
.stratum {
  position: relative; padding: var(--space-3) var(--space-3) var(--space-3) 3.4rem;
  background: linear-gradient(0deg, var(--tint, transparent), var(--tint, transparent)), var(--c-cream);
  border: 1px solid var(--hair); border-top: none;
}
.stratum:first-child { border-top: 1px solid var(--hair); border-radius: var(--radius) var(--radius) 0 0; }
.stratum:last-child { border-radius: 0 0 var(--radius) var(--radius); }
.stratum .tab {
  position: absolute; left: 0; top: 0; bottom: 0; width: 2rem;
  background: var(--laag, var(--c-forest));
  display: flex; align-items: center; justify-content: center;
}
.stratum:first-child .tab { border-radius: calc(var(--radius) - 1px) 0 0 0; }
.stratum:last-child .tab { border-radius: 0 0 0 calc(var(--radius) - 1px); }
.stratum .tab span {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--f-geo); font-weight: 600; font-size: .72rem;
  letter-spacing: .22em; text-transform: uppercase; color: #fff; white-space: nowrap;
}
.stratum.kennis   { --laag: var(--gap-kennis);   --tint: rgba(23,61,40,.05); }
.stratum.zorg     { --laag: var(--gap-zorg);     --tint: rgba(47,125,79,.06); }
.stratum.empathie { --laag: var(--gap-empathie); --tint: rgba(111,174,124,.10); }
.stratum.empathie .tab span { color: var(--c-ink); } /* lichtgroen ⇒ donkere tekst */

/* gap-chip stip volgt de laagkleur wanneer binnen .stratum */
.stratum .gap-chip::before { background: var(--laag); box-shadow: 0 0 0 1.5px var(--laag); }

/* ---------- filterzin: filterstatus als leesbare zin ---------- */
.filter-zin {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem;
  font-family: var(--f-geo); font-size: .92rem; letter-spacing: .03em;
  color: var(--c-ink-soft); margin: var(--space-2) 0;
}
.filter-zin strong { color: var(--c-forest-deep); font-weight: 600; }
.filter-zin .wis {
  font-family: var(--f-geo); font-weight: 600; font-size: .85rem;
  color: var(--c-gold-ink); background: none; border: none; cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--c-gold);
  text-decoration-thickness: 2px; text-underline-offset: 3px; padding: 0;
}
.filter-zin .wis:hover { color: var(--c-forest); }
/* actieve filter als verwijderbare chip */
.chip-actief {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--f-geo); font-weight: 500; font-size: .8rem; letter-spacing: .05em;
  background: var(--c-cream-2); border: 1.5px solid var(--c-forest);
  border-radius: 999px; padding: .2rem .35rem .2rem .7rem;
  color: var(--c-forest-deep); cursor: pointer;
}
.chip-actief b { font-weight: 600; }
.chip-actief .x {
  width: 1.1rem; height: 1.1rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-forest); color: var(--c-on-forest);
  font-size: .75rem; line-height: 1; font-weight: 700;
}
.chip-actief:hover .x { background: var(--c-forest-soft); }

/* ---------- dienstregeling: status van het aanbod als bord ---------- */
.dienstregeling {
  max-width: 52rem; border: 1px solid var(--hair); border-radius: var(--radius);
  background: #FFFDF6; box-shadow: var(--shadow); overflow: hidden;
}
.dienstregeling .kop {
  display: flex; justify-content: space-between; align-items: center;
  padding: .6rem 1.1rem; background: var(--c-forest); color: var(--c-on-forest);
  font-family: var(--f-geo); font-weight: 600; font-size: .8rem;
  letter-spacing: .14em; text-transform: uppercase;
}
.dienst-rij {
  display: grid; grid-template-columns: minmax(0,1fr) auto;
  gap: .3rem 1rem; align-items: center;
  padding: .95rem 1.1rem; border-top: 1px dashed var(--hair);
}
.dienst-rij:first-of-type { border-top: none; }
.dienst-rij h3 { margin: 0; font-size: 1.05rem; }
.dienst-rij .status {
  display: inline-flex; align-items: center; gap: .5rem; justify-self: end;
  font-family: var(--f-geo); font-weight: 500; font-size: .85rem; letter-spacing: .04em;
  text-align: left; width: 15.5rem;
}
.dienst-rij .status::before {
  content: ""; width: 11px; height: 11px; border-radius: 50%; flex: none;
}
.dienst-rij .status.s-open::before   { background: #2F7D4F; box-shadow: 0 0 0 3px #DCE9DB; }
.dienst-rij .status.s-wait::before   { background: #D9A514; box-shadow: 0 0 0 3px #F3E4C2; }
.dienst-rij .status.s-closed::before { background: #A3492F; box-shadow: 0 0 0 3px #EBD7D2; }
.dienst-rij .toelichting { grid-column: 1 / -1; margin: 0; font-size: .95rem; color: var(--c-ink-soft); }
@media (max-width: 640px) {
  .dienst-rij { grid-template-columns: 1fr; }
  .dienst-rij .status { justify-self: start; width: auto; }
}

/* ---------- agenda-rail: tijdlijn met stationsstippen ---------- */
.agenda-rail { position: relative; max-width: 46rem; padding-left: 2.2rem; display: grid; gap: var(--space-3); }
.agenda-rail::before {
  content: ""; position: absolute; left: .55rem; top: .4rem; bottom: .4rem;
  width: 4px; background: var(--c-forest); border-radius: 2px;
}
.agenda-halte { position: relative; }
.agenda-halte::before {
  content: ""; position: absolute; left: -1.93rem; top: .3em;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--c-cream); border: 4px solid var(--c-gold);
  box-shadow: 0 0 0 4px var(--c-cream);
}
.agenda-halte .wanneer {
  font-family: var(--f-geo); font-weight: 600; font-size: .8rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--c-gold-ink);
  display: block; margin-bottom: .2rem;
}
.agenda-halte h3 { margin: 0 0 .25rem; font-size: 1.05rem; }
.agenda-halte p { margin: 0; font-size: .97rem; color: var(--c-ink-soft); }
/* het eerstvolgende station: dezelfde stip-taal als de rest van de lijn, maar groter en gouden-gevuld met een zachte gloed */
.agenda-halte.eerstvolgend::before {
  width: 19px; height: 19px; left: -2.12rem; top: .2em;
  background: var(--c-gold); border: 3px solid var(--c-gold);
  box-shadow: 0 0 0 4px var(--c-cream), 0 0 0 8px rgba(217,165,20,.32);
  animation: halte-puls 2.6s ease-in-out infinite;
}
@keyframes halte-puls {
  0%, 100% { box-shadow: 0 0 0 4px var(--c-cream), 0 0 0 8px rgba(217,165,20,.32); }
  50%      { box-shadow: 0 0 0 4px var(--c-cream), 0 0 0 11px rgba(217,165,20,.14); }
}
/* voorbije haltes: de stip blijft een crisp, leeg gouden ringetje — enkel de tekst dimt,
   zodat je geen "uitgevaagde" gouden cirkel krijgt naast de stippen */
.agenda-halte.voorbij .wanneer,
.agenda-halte.voorbij h3,
.agenda-halte.voorbij p { opacity: .6; }
/* archief klapt dicht */
details.archief { max-width: 46rem; margin-top: var(--space-3); border-top: 1px dashed var(--hair); padding-top: var(--space-2); }
details.archief summary {
  cursor: pointer; font-family: var(--f-display); font-weight: 700;
  color: var(--c-forest-deep); padding: .4rem 0; list-style: none;
}
details.archief summary::-webkit-details-marker { display: none; }
details.archief summary::before { content: "▸ "; color: var(--c-gold-ink); }
details.archief[open] summary::before { content: "▾ "; }

/* ---------- overstap: deep link als overstapstation ---------- */
.overstap {
  display: inline-flex; align-items: center; gap: .8rem;
  background: var(--c-cream-2); border: 1.5px solid var(--c-forest);
  border-radius: 999px; padding: .55rem 1.2rem .55rem .6rem;
  text-decoration: none; color: var(--c-forest-deep);
  font-family: var(--f-display); font-weight: 700; font-size: .95rem;
  transition: background .15s, transform .15s;
}
.overstap .perron {
  width: 2rem; height: 2rem; border-radius: 50%; flex: none;
  background: var(--c-forest); color: var(--c-on-forest);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--f-geo); font-weight: 600; font-size: 1rem;
}
.overstap .richting {
  display: block; font-family: var(--f-geo); font-weight: 500; font-size: .72rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--c-ink-soft);
}
.overstap:hover { background: #FFFDF6; transform: translateY(-2px); }
.overstap:hover .perron { background: var(--c-forest-soft); }

/* ---------- balans: voordelen/nadelen als weegschaal ---------- */
.balans { max-width: 52rem; }
.balans .schalen { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); align-items: start; }
.balans .schaal {
  border: 1px solid var(--hair); border-radius: var(--radius);
  padding: var(--space-3); box-shadow: var(--shadow);
}
.balans .schaal.voor  { background: rgba(47,125,79,.07); border-top: 6px solid var(--gap-zorg); }
.balans .schaal.tegen { background: var(--c-cream-2); border-top: 6px solid var(--c-cream-3); }
.balans .schaal h3 { margin-top: 0; }
/* het steunpunt: een rule met gouden spil eronder */
.balans .spil { display: flex; flex-direction: column; align-items: center; margin-top: var(--space-2); }
.balans .spil .lat { height: 4px; width: 100%; background: var(--c-forest); border-radius: 2px; }
.balans .spil .punt {
  width: 0; height: 0; margin-top: 2px;
  border-left: 13px solid transparent; border-right: 13px solid transparent;
  border-top: 15px solid var(--c-gold);
}
@media (max-width: 700px) { .balans .schalen { grid-template-columns: 1fr; } }

/* ---------- register: deontologie-artikelen met margenummers ---------- */
.register { max-width: 48rem; }
.register .artikel {
  display: grid; grid-template-columns: 4.6rem minmax(0,1fr);
  gap: 1.4rem; padding: var(--space-3) 0; border-top: 1px solid var(--hair);
}
.register .artikel:last-child { border-bottom: 1px solid var(--hair); }
.register .artikel-nr {
  font-family: var(--f-display); font-weight: 900; font-size: 2rem;
  line-height: 1; color: var(--c-cream-3); text-align: right;
  -webkit-text-stroke: 1.5px var(--c-forest); letter-spacing: -.02em;
}
.register .artikel-nr small {
  display: block; font-family: var(--f-geo); font-weight: 600; font-size: .62rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--c-gold-ink);
  -webkit-text-stroke: 0; margin-bottom: .3rem;
}
.register .artikel h3 { margin: 0 0 .4rem; }
.register .artikel p { margin: 0; }
@media (max-width: 560px) {
  .register .artikel { grid-template-columns: 1fr; gap: .4rem; }
  .register .artikel-nr { text-align: left; }
}

/* ---------- artefact-typen (Library): herkenbaar vóór je leest ---------- */
.card[data-type] { position: relative; }
.card .type-hoek {
  position: absolute; top: 0; right: 0; width: 2.6rem; height: 2.6rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 0 var(--radius) 0 var(--radius);
  color: #fff;
}
.card .type-hoek svg { width: 1.15rem; height: 1.15rem; display: block; }
.card[data-type="tool"]       { border-top: 6px solid var(--c-forest); }
.card[data-type="tool"] .type-hoek { background: var(--c-forest); }
.card[data-type="mindmap"]    { border-top: 6px solid var(--c-forest-soft); border-radius: var(--radius) 22px var(--radius) var(--radius); }
.card[data-type="mindmap"] .type-hoek { background: var(--c-forest-soft); border-radius: 0 20px 0 var(--radius); }
.card[data-type="whitepaper"] { border-top: 6px solid var(--c-gold); }
.card[data-type="whitepaper"] .type-hoek { background: var(--c-gold); color: var(--c-ink); }
.card[data-type="whitepaper"]::after { /* ezelsoor */
  content: ""; position: absolute; bottom: 0; right: 0;
  border-style: solid; border-width: 0 0 18px 18px;
  border-color: transparent transparent var(--c-cream-3) transparent;
  border-bottom-right-radius: var(--radius);
}
.card[data-type="review"]     { border-top: 6px solid #6FAE7C; }
.card[data-type="review"] .type-hoek { background: #6FAE7C; color: var(--c-ink); }
.card[data-type="lezing"]     { border-top: 6px solid var(--c-forest-deep); }
.card[data-type="lezing"] .type-hoek { background: var(--c-forest-deep); }
.card[data-type] h3 { padding-right: 2.3rem; }
.type-label {
  font-family: var(--f-geo); font-weight: 600; font-size: .7rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--c-ink-soft);
}

/* ---------- audit-etiket (Bronnen): het gouden zegel ---------- */
.bron-kaart { position: relative; }
.audit-zegel {
  position: absolute; top: -11px; right: 1.1rem;
  width: 34px; height: 34px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--c-gold-soft), var(--c-gold) 65%);
  box-shadow: 0 1px 3px rgba(18,46,34,.25), inset 0 0 0 2.5px rgba(255,253,246,.55);
  display: flex; align-items: center; justify-content: center;
}
.audit-zegel::before {
  content: ""; width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px dashed rgba(32,38,31,.5);
}
.audit-zegel svg { position: absolute; width: 13px; height: 13px; color: var(--c-ink); }
.vertrouw {
  margin-top: var(--space-2); padding: .9rem 1rem;
  background: rgba(217,165,20,.08); border-left: 4px solid var(--c-gold);
  border-radius: 0 8px 8px 0;
}
.vertrouw .label {
  display: block; font-family: var(--f-geo); font-weight: 600; font-size: .7rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--c-gold-ink);
  margin-bottom: .25rem;
}
.vertrouw p { margin: 0; font-size: .95rem; color: var(--c-ink); }

/* ---------- home: titelblad (ghost, vonkenveld, inhoudsopgave, doel-lagen) ---------- */
.hero { position: relative; overflow: hidden; }
.hero .kicker {
  font-family: var(--f-geo); font-size: .85rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--c-gold-ink); margin: 0 0 var(--space-2);
}
.hero p.lede { font-size: 1.2rem; color: var(--c-ink-soft); max-width: 40rem; }
#vonkveld { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
.hero .ghost {
  position: absolute; right: clamp(.5rem,3vw,3rem); top: .6rem; z-index: 1;
  pointer-events: none; user-select: none; text-align: right; white-space: nowrap;
  font-family: var(--f-display); font-weight: 900; letter-spacing: -.02em;
  font-size: clamp(1.8rem,6.5vw,6rem); line-height: .95;
  color: transparent; -webkit-text-stroke: 2px var(--c-cream-3);
}
.hero > .wrap { position: relative; z-index: 2; }
.hero .lede-vlak { background: rgba(246,242,230,.65); border-radius: 8px; }

.inhoudsopgave {
  margin-top: var(--space-3); max-width: 38rem;
  border-top: 2px solid var(--c-forest); counter-reset: hoofdstuk;
  background: rgba(246,242,230,.55); border-radius: 0 0 8px 8px;
}
.inhoudsopgave a {
  counter-increment: hoofdstuk;
  display: flex; align-items: baseline; gap: 1rem;
  padding: .9rem .2rem; text-decoration: none; color: var(--c-forest-deep);
  font-family: var(--f-display); font-weight: 800; font-size: clamp(1.1rem,2.2vw,1.45rem);
  border-bottom: 1px solid var(--hair);
}
.inhoudsopgave a::before {
  content: counter(hoofdstuk, decimal-leading-zero);
  font-family: var(--f-geo); font-weight: 600; font-size: .85rem;
  letter-spacing: .1em; color: var(--c-gold-ink); flex: none; transform: translateY(-2px);
}
.inhoudsopgave a::after {
  content: ""; flex: 1; border-bottom: 2px dotted var(--c-cream-3);
  transform: translateY(-4px); transition: border-color .15s;
}
.inhoudsopgave a span.blz {
  font-family: var(--f-geo); font-weight: 500; font-size: .8rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--c-ink-soft);
}
.inhoudsopgave a:hover { color: var(--c-forest-soft); }
.inhoudsopgave a:hover::after { border-color: var(--c-gold); }

/* de drie doelen op home: grondlagen met trapsgewijze insprong */
.strata-doelen .stratum {
  display: grid; gap: .4rem 2.5rem;
  grid-template-columns: minmax(14rem,20rem) minmax(0,1fr);
}
.strata-doelen .stratum.zorg     { margin-left: 1.6rem; }
.strata-doelen .stratum.empathie { margin-left: 3.2rem; }
.strata-doelen .stratum h3 { margin: 0 0 .4rem; }
.strata-doelen .kopblok p { margin: 0; font-size: .97rem; color: var(--c-ink-soft); }
.verwijzingen { align-self: center; display: grid; gap: .4rem; justify-items: start; }
.verwijzingen .label {
  font-family: var(--f-geo); font-weight: 600; font-size: .72rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--c-ink-soft);
}
.verwijzingen a {
  display: inline-flex; align-items: center; gap: .5rem; text-decoration: none;
  font-weight: 600; font-size: .95rem; color: var(--c-forest-deep);
  border-bottom: 2px solid transparent;
}
.verwijzingen a::before { content: "↳"; color: var(--laag, var(--c-forest)); font-weight: 700; }
.verwijzingen a:hover { border-bottom-color: var(--laag, var(--c-forest)); color: var(--c-forest-soft); }
@media (max-width: 940px) {
  .strata-doelen .stratum { grid-template-columns: 1fr; padding-left: 2.9rem; }
  .strata-doelen .stratum.zorg, .strata-doelen .stratum.empathie { margin-left: 0; }
}

/* ===== 14. /en/ pages — tag for nav/footer links that lead to a Dutch-only page ===== */
.lang-tag { font-size: .72em; opacity: .6; font-weight: 500; }