/* RCVRY — Aarde-palet, sans-typografie, scrollverhaal. Zie docs + kleurgids. */

:root {
  /* fundament */
  --papier: #f4f0e6;
  --perkament: #eae5d7;
  --wit: #fffdf7;
  --inkt: #1c1a17;
  --inkt-zacht: #45413a;
  --inkt-gedempt: rgba(28, 26, 23, 0.66);
  --lijn: rgba(28, 26, 23, 0.16);

  /* de zeven fasen (vivid = lijn/vlak, diep = kleine tekst) */
  --fase-1: #3f4f4a;  --fase-1-diep: #3f4f4a;  /* dennengroen */
  --fase-2: #4f6b57;  --fase-2-diep: #4f6b57;  /* mos */
  --fase-3: #6f8a74;  --fase-3-diep: #596f5d;  /* salie */
  --fase-4: #808c5d;  --fase-4-diep: #656e49;  /* olijf */
  --fase-5: #a1824b;  --fase-5-diep: #80673b;  /* zand */
  --fase-6: #b3563a;  --fase-6-diep: #a75036;  /* terracotta */
  --fase-7: #9d6a63;  --fase-7-diep: #8c5e58;  /* klei */

  /* actie — verandert nooit mee met de fase */
  --cta: #a84f34;
  --cta-hover: #93452c;
  --accent-diep: #9d4930;
  --accent-waas: rgba(179, 86, 58, 0.1);

  /* diepe banden */
  --bos: #2d3a33;
  --kleidiep: #43302a;
  --band-tekst: #f4f0e6;
  --band-tekst-zacht: rgba(244, 240, 230, 0.78);
  --band-lijn: rgba(244, 240, 230, 0.22);

  /* live gestuurd door het scrollverhaal */
  --fase-nu: #3f4f4a;
  --fase-nu-diep: #3f4f4a;
  --gloed-a: rgba(63, 79, 74, 0.2);
  --gloed-b: rgba(63, 79, 74, 0.09);
  --tint: rgba(63, 79, 74, 0.04);

  --sans: "Avenir Next", "Avenir", "Futura", "Segoe UI Variable Display", "Segoe UI",
          system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --shell: min(1200px, calc(100vw - 96px));
  --header-h: 68px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* het hidden-attribuut wint altijd, ook van display: flex/grid in een klasse */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--inkt);
  font-family: var(--sans);
  font-size: 1.0625rem; /* 17px bij standaardinstelling, maar volgt de gebruiker */
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, figure { margin: 0; }
a { color: inherit; }
button { font: inherit; }
.shell { width: var(--shell); margin: 0 auto; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -48px; z-index: 60; border-radius: 999px;
  background: var(--inkt); color: var(--papier);
  padding: 10px 18px; font-size: 0.8rem; font-weight: 700;
  text-decoration: none; letter-spacing: 0.08em; text-transform: uppercase;
  transition: top 0.2s ease;
}
.skip-link:focus-visible { top: 12px; }

/* ============ typografie ============ */
.display {
  font-weight: 700;
  letter-spacing: -0.042em;
  line-height: 0.96;
  text-wrap: balance;
  /* "Privacyverklaring" past bij 320px niet op één regel — laten afbreken
     in plaats van de pagina horizontaal laten scrollen (WCAG 1.4.10) */
  overflow-wrap: break-word;
}
.d-xl { font-size: clamp(3rem, 8vw, 6.8rem); }
.d-lg { font-size: clamp(2.3rem, 5.2vw, 4.2rem); }
.d-md { font-size: clamp(1.8rem, 3.2vw, 2.6rem); letter-spacing: -0.032em; }
.d-sm { font-size: clamp(1.25rem, 1.6vw, 1.5rem); letter-spacing: -0.022em; line-height: 1.1; }

.micro {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 0.76rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.2em;
}
.micro::before {
  content: ""; width: 7px; height: 7px; flex: 0 0 7px;
  background: var(--micro-kleur, var(--cta));
}
.lood { font-size: clamp(1.02rem, 1.1vw + 0.7rem, 1.22rem); color: var(--inkt-zacht); max-width: 40ch; }
.cijfer { font-variant-numeric: tabular-nums; }

/* ============ header ============ */
header.site {
  position: sticky; top: 0; z-index: 40; height: var(--header-h);
  background: rgba(244, 240, 230, 0.9);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.nav-row {
  width: var(--shell); margin: 0 auto; height: 100%; position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.brand { display: flex; align-items: center; text-decoration: none; }
.brand img { width: 127px; height: auto; }
nav.primary { display: flex; gap: 30px; }
nav.primary a {
  text-decoration: none; font-size: 0.82rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.13em; color: var(--inkt-zacht);
  padding: 4px 0; border-bottom: 2px solid transparent;
}
nav.primary a:hover, nav.primary a:focus-visible { color: var(--inkt); border-bottom-color: var(--cta); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--cta); outline-offset: 3px; }
.scroll-progress {
  position: absolute; left: 0; bottom: -1px; height: 3px; width: 100%;
  transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, #3f4f4a, #4f6b57, #6f8a74, #808c5d, #a1824b, #b3563a, #9d6a63);
}

/* ============ knoppen ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 14px 28px; max-width: 100%; text-align: center;
  font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.13em;
  text-decoration: none; cursor: pointer; border: 2px solid transparent; border-radius: 999px;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.btn span[aria-hidden] { font-size: max(0.8rem, 1.05em); letter-spacing: 0; }
.btn-primair { background: var(--cta); color: var(--wit); }
.btn-primair:hover { background: var(--cta-hover); transform: translateY(-2px); }
.btn-ghost { background: transparent; border-color: var(--inkt); color: var(--inkt); }
.btn-ghost:hover { background: var(--inkt); color: var(--papier); transform: translateY(-2px); }
.btn-klein { min-height: 44px; padding: 10px 20px; font-size: 0.78rem; }
.alleen-breed { display: inline; }
.btn-licht { background: var(--papier); color: var(--inkt); }
.btn-licht:hover { background: var(--wit); transform: translateY(-2px); }
.btn.is-uitgeschakeld { opacity: 0.6; cursor: not-allowed; pointer-events: none; }

.pending {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.14em; font-weight: 700;
  color: var(--accent-diep); border: 1px solid rgba(168, 79, 52, 0.55);
  border-radius: 999px; padding: 3px 12px;
  /* korte statussen blijven op één regel; een lange pil moet kunnen afbreken
     in plaats van de pagina breder te maken (WCAG 1.4.10) */
  max-width: 100%; white-space: normal;
}
.pending::before { content: "○"; flex: 0 0 auto; align-self: flex-start; }

/* ============ scrollverhaal ============ */
.story { position: relative; overflow-x: clip; }
body:not(.static-story) .story { height: calc(9 * 88vh); }
.story-stage {
  position: sticky; top: 0;
  height: 100vh; height: 100dvh;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  align-items: center; gap: 32px;
  width: 100%;
  padding: var(--header-h) calc((100vw - var(--shell)) / 2) 20px;
}
.story-stage::before {
  content: ""; position: absolute; inset: -25%; z-index: -2; pointer-events: none;
  background:
    radial-gradient(48% 44% at 78% 30%, var(--gloed-a), transparent 68%),
    radial-gradient(42% 40% at 10% 78%, var(--gloed-b), transparent 70%),
    linear-gradient(180deg, rgba(0, 0, 0, 0) 18%, var(--tint) 34%);
  transition: background 0.65s ease;
}

.fase-verticaal {
  display: none;
  position: absolute; left: 16px; top: 50%;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  font-size: 0.76rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.34em;
  color: var(--fase-nu-diep);
  pointer-events: none; z-index: 3;
  opacity: 0; transition: opacity 0.4s ease, color 0.6s ease;
}
.fase-verticaal.is-aan { opacity: 1; }
@media (min-width: 1300px) { .fase-verticaal { display: block; } }

.beats { position: relative; min-height: 27rem; }
.beat {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center;
  opacity: 0; visibility: hidden;
}
.beat .spook {
  position: absolute; left: -0.07em; top: 50%;
  transform: translateY(-54%);
  font-size: clamp(11rem, 26vw, 21rem);
  font-weight: 700; letter-spacing: -0.06em; line-height: 1;
  color: var(--spook-kleur); opacity: 0.09;
  pointer-events: none; z-index: -1; user-select: none;
}
.beat-inhoud { position: relative; z-index: 1; }
.beat h1 { margin: 22px 0 26px; }
.beat .lood { margin-bottom: 32px; }
.beat-acties { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 30px; }
.beat-signalen { display: flex; list-style: none; padding: 0; margin: 0; flex-wrap: wrap; border-top: 1px solid var(--lijn); }
.beat-signalen li {
  font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.13em;
  color: var(--inkt-zacht); padding: 12px 22px 0 0; margin-right: 22px;
}
.scroll-hint {
  margin-top: 26px; display: inline-flex; align-items: center; gap: 12px;
  font-size: 0.76rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--inkt-gedempt);
}
.scroll-hint i { display: block; width: 34px; height: 2px; background: var(--fase-nu); transition: background 0.6s ease; font-style: normal; }

.beat-kop { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; flex-wrap: wrap; }
.fase-icoon { width: 30px; height: auto; }
.beat-kop .telling { font-size: 0.76rem; font-weight: 700; letter-spacing: 0.2em; color: var(--fase-nu-diep); transition: color 0.6s ease; }
.beat-kop .naam { font-size: 0.76rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; color: var(--inkt); }
.beat blockquote { margin: 0 0 20px; max-width: 15ch; }
.beat-essentie { font-size: 1.02rem; color: var(--inkt-zacht); max-width: 40ch; }
.beat-final-quote { max-width: 19ch; margin-top: 22px; }
.beat-final-essentie { margin-bottom: 30px; }

/* spiraalkolom + hero-foto */
.beats { grid-column: 1; grid-row: 1; }
.hero-foto, .spiral-col { grid-column: 2; grid-row: 1; }
.spiral-col { position: relative; height: min(76vh, 600px); display: flex; align-items: center; justify-content: center; }
.spiral-col svg { width: min(100%, 540px); height: auto; overflow: visible; opacity: 0; transition: opacity 0.5s ease; margin-right: 34px; }
.spiral-col svg.is-aan { opacity: 1; }
.hero-foto {
  height: min(70vh, 552px); margin: 0;
  opacity: 1; transition: opacity 0.5s ease;
}
.hero-foto.is-weg { opacity: 0; pointer-events: none; }
.hero-foto img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: 24px;
  box-shadow: 0 30px 80px rgba(28, 26, 23, 0.18);
}
.spiral-basis { fill: none; stroke: rgba(28, 26, 23, 0.17); stroke-width: 1.3; stroke-linecap: round; }
.spiral-seg { fill: none; stroke-width: 3.4; stroke-linecap: round; }
.fase-marker circle { fill: var(--papier); stroke-width: 2; }
.fase-marker text {
  font-family: var(--sans); font-size: 13px; font-weight: 700;
  fill: var(--inkt-gedempt); letter-spacing: 0.08em;
}
.fase-marker { opacity: 0; transition: opacity 0.45s ease; }
.fase-marker.is-gepasseerd { opacity: 1; }
.spiral-caption {
  position: absolute; left: 0; right: 0; bottom: 0; text-align: center;
  font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--inkt-gedempt);
  opacity: 0; transition: opacity 0.5s ease;
}
.spiral-caption.is-aan { opacity: 1; }
@media (max-width: 1100px) and (max-height: 840px) { .spiral-caption { display: none; } }
@media (max-height: 700px) { .spiral-caption { display: none; } }

.fase-rail {
  position: absolute; right: -6px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 4px; z-index: 5;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.5s ease, visibility 0s linear 0.5s;
}
.fase-rail.is-aan { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.5s ease; }
.rail-dot { width: 30px; height: 26px; padding: 0; border: none; background: transparent; display: grid; place-items: center; cursor: pointer; }
.rail-dot::after {
  content: ""; width: 14px; height: 2px;
  background: rgba(28, 26, 23, 0.5); transition: background 0.3s ease, width 0.3s ease;
}
.rail-dot:hover::after { background: var(--dot-kleur); width: 20px; }
.rail-dot.is-actief::after { background: var(--dot-kleur); width: 26px; height: 3px; }

.story-cta {
  position: absolute; left: 50%; bottom: max(24px, env(safe-area-inset-bottom, 0px) + 16px);
  transform: translate(-50%, 10px); opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s linear 0.35s; z-index: 6;
}
.story-cta .btn { white-space: nowrap; }
.story-cta.is-aan {
  opacity: 1; visibility: visible; transform: translate(-50%, 0); pointer-events: auto;
  transition: opacity 0.35s ease, transform 0.35s ease;
}
body.static-story .story-cta, body.static-story .fase-verticaal, body.static-story .scroll-progress { display: none; }

/* statische terugval */
body.static-story .story-stage {
  position: static; height: auto; overflow: visible;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start; padding: 60px calc((100vw - var(--shell)) / 2);
}
body.static-story .beats { min-height: 0; display: flex; flex-direction: column; gap: 72px; }
body.static-story .beat { position: static; opacity: 1; visibility: visible; }
body.static-story .beat .spook { position: static; transform: none; font-size: 5rem; opacity: 0.16; margin-bottom: -0.3em; display: block; }
body.static-story .spiral-col { position: sticky; top: calc(var(--header-h) + 20px); height: auto; display: block; }
body.static-story .beats { grid-row: 1 / span 2; }
body.static-story .hero-foto { grid-row: 1; height: auto; margin-bottom: 24px; }
body.static-story .spiral-col { grid-row: 2; }
body.static-story .hero-foto img { height: auto; }
body.static-story .spiral-col svg { opacity: 1; }
body.static-story .fase-marker { opacity: 1; }
body.static-story .spiral-caption { position: static; margin-top: 12px; opacity: 1; }
body.static-story .fase-rail, body.static-story .scroll-hint { display: none; }
body.static-story .story-sr { display: none; }

/* ============ onthulling ============ */
html.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 0.65s ease, transform 0.65s ease; }
html.js [data-reveal].is-zichtbaar { opacity: 1; transform: none; }

/* ============ secties ============ */
.sectie { padding: 118px 0; }
.sectie-krap { padding: 88px 0; }
.sectie-diep { background: var(--perkament); }
.sectie-kop { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); gap: 40px; align-items: end; margin-bottom: 60px; }
.sectie-kop h2 { margin-top: 20px; }
.sectie-kop .rechts { color: var(--inkt-zacht); font-size: 1rem; padding-bottom: 6px; }

/* statement met fotoachtergrond */
.statement { position: relative; color: var(--papier); padding: 120px 0; overflow: hidden; isolation: isolate; }
.statement-foto { position: absolute; inset: 0; z-index: -2; }
.statement-foto img { width: 100%; height: 100%; object-fit: cover; }
.statement::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(23, 20, 16, 0.72);
}
.statement .shell { display: grid; gap: 30px; }
.statement .kleurboog { display: flex; height: 6px; max-width: 420px; }
.statement .kleurboog span { flex: 1; }
.statement blockquote { margin: 0; max-width: 17ch; }
.statement .bron { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; color: rgba(244, 240, 230, 0.9); }

/* routes */
.routes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; }
.route { background: var(--wit); display: flex; flex-direction: column; position: relative; border: 1px solid var(--lijn); border-radius: 22px; overflow: hidden; }
.route::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: var(--kaart-kleur); z-index: 2; }
.route.is-primair { border-color: rgba(179, 86, 58, 0.5); box-shadow: 0 18px 50px rgba(28, 26, 23, 0.1); }
.route.is-primair::before { height: 9px; }
#coaching { scroll-margin-top: calc(var(--header-h) + 20px); }
.route-foto { overflow: hidden; height: 300px; border-radius: 21px 21px 0 0; }
.route-foto img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.route-body { padding: 36px 40px 40px; display: flex; flex-direction: column; flex: 1; }
.route-kop { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.route-kop .tag { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; color: var(--kaart-diep); }
.route h3 { margin-bottom: 16px; }
.route .desc { color: var(--inkt-zacht); font-size: 0.99rem; margin-bottom: 26px; }
.vinken { list-style: none; margin: 0 0 30px; padding: 0; display: flex; flex-direction: column; flex: 1; }
.vinken li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; font-size: 0.95rem; padding: 14px 0; border-top: 1px solid var(--lijn); }
.vinken li:last-child { border-bottom: 1px solid var(--lijn); }
.vinken .nr { font-size: 0.76rem; font-weight: 700; color: var(--kaart-diep); padding-top: 3px; }
.vinken strong { display: block; }
.vinken small { color: var(--inkt-gedempt); font-size: 0.86rem; }
.route-status { font-size: 0.82rem; color: var(--inkt-gedempt); margin-top: 16px; }

/* drieluik */
.drie { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; width: var(--shell); margin: 0 auto; }
.principe { background: var(--wit); border: 1px solid var(--lijn); border-radius: 22px; padding: 40px 34px 44px; }
.principe .nr {
  display: block; font-size: 3.4rem; font-weight: 700; letter-spacing: -0.05em;
  line-height: 1; color: var(--p-kleur); margin-bottom: 20px;
}
.principe h3 { margin-bottom: 12px; }
.principe p { color: var(--inkt-zacht); font-size: 0.95rem; }

/* founder */
.founder { background: var(--bos); color: var(--band-tekst); padding: 112px 0; position: relative; overflow: hidden; }
.founder::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(40% 48% at 84% 22%, rgba(79, 107, 87, 0.5), transparent 70%),
              radial-gradient(36% 42% at 6% 84%, rgba(111, 138, 116, 0.3), transparent 72%);
}
.founder-grid { display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); gap: 64px; align-items: stretch; position: relative; }
/* het portret loopt door tot de vensterrand en vult de volle hoogte: de uitsnede maakt de sectie af */
.portret {
  position: relative; overflow: hidden; margin: 0;
  border: 1px solid var(--band-lijn); border-left: 0;
  border-radius: 0 26px 26px 0;
  margin-left: calc((100vw - var(--shell)) / -2);
  min-height: 460px;
}
.portret picture { display: block; height: 100%; }
.portret img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; display: block; }
/* zachte overgang naar het bos onderaan, zodat het beeld niet als losse plaat eindigt */
.portret::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 34%; pointer-events: none;
  background: linear-gradient(to top, rgba(45, 58, 51, 0.62), transparent);
}
.founder .micro { color: #b9c9a8; }
.founder .micro::before { background: #b9c9a8; }
.founder h2 { color: var(--band-tekst); margin: 20px 0 26px; }
.founder .lood { color: var(--band-tekst); max-width: 44ch; margin-bottom: 18px; }
.founder .body-copy { color: var(--band-tekst-zacht); font-size: 0.99rem; max-width: 56ch; margin-bottom: 30px; }
.chips { display: flex; flex-wrap: wrap; }
.chips { gap: 8px; }
.chips span {
  font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em;
  padding: 9px 16px; border: 1px solid var(--band-lijn); color: var(--band-tekst-zacht);
  border-radius: 999px;
}

/* faq */
.faq { border-top: 1px solid var(--lijn); max-width: 78ch; }
details { border-bottom: 1px solid var(--lijn); }
summary {
  cursor: pointer; list-style: none; padding: 24px 0;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  font-size: 1.06rem; font-weight: 600; letter-spacing: -0.01em;
}
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font-size: 1.5rem; font-weight: 400; color: var(--cta); flex-shrink: 0; line-height: 1; }
details[open] summary::after { content: "–"; }
details p { padding: 0 0 26px; color: var(--inkt-zacht); font-size: 0.97rem; max-width: 62ch; }

/* slot met fotoachtergrond */
.slot { position: relative; color: var(--band-tekst); padding: 132px 0; overflow: hidden; isolation: isolate; }
.slot-foto { position: absolute; inset: 0; z-index: -2; }
.slot-foto img { width: 100%; height: 100%; object-fit: cover; }
.slot::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(rgba(38, 30, 24, 0.78), rgba(38, 30, 24, 0.82));
}
.slot .shell { position: relative; display: grid; gap: 28px; justify-items: start; }
.slot .micro { color: #eabf9f; }
.slot .micro::before { background: #eabf9f; }
.slot h2 { color: var(--band-tekst); max-width: 16ch; }
.slot .sub { color: var(--band-tekst-zacht); font-size: 1.08rem; max-width: 40ch; }

/* footer */
.site-footer { padding: 60px 0 44px; border-top: 1px solid var(--lijn); }
.footer-grid { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; margin-bottom: 34px; align-items: center; }
.footer-grid .brand img { width: 113px; }
.footer-links { display: flex; gap: 26px; flex-wrap: wrap; }
.footer-links a {
  text-decoration: none; font-size: 0.78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--inkt-zacht);
}
.footer-links a:hover { color: var(--cta); }
.footer-note { font-size: 0.82rem; color: var(--inkt-gedempt); max-width: 60ch; margin-bottom: 8px; }
.footer-copy { font-size: 0.78rem; color: var(--inkt-gedempt); text-transform: uppercase; letter-spacing: 0.12em; }




/* ============ opleiding + wettelijke regel ============ */
.opleiding { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--band-lijn); }
.opleiding .kolom-kop { color: #b9c9a8; margin-bottom: 18px; }
.opleiding-lijst { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 14px; }
.opleiding-lijst li { padding-left: 26px; position: relative; }
.opleiding-lijst li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 12px; height: 2px; background: #b9c9a8; }
.opleiding-lijst strong { display: block; font-size: 0.98rem; color: var(--band-tekst); }
.opleiding-lijst small { font-size: 0.85rem; color: var(--band-tekst-zacht); }
.opleiding-noot { font-size: 0.85rem; color: var(--band-tekst-zacht); max-width: 54ch; }
.footer-wettelijk { font-size: 0.79rem; color: var(--inkt-gedempt); margin-bottom: 8px; }

/* ============ juridische pagina's ============ */
.invullen {
  display: inline-block; font-size: max(0.75rem, 0.82em); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--accent-diep); background: var(--accent-waas);
  border: 1px dashed rgba(168, 79, 52, 0.5); border-radius: 999px;
  padding: 1px 10px;
}
.artikel h3 { margin: 30px 0 12px; }

/* ============ voor wie ============ */
.voorwie-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; }
.voorwie-kolom { background: var(--wit); border: 1px solid var(--lijn); border-radius: 22px; padding: 34px 32px 38px; }
.voorwie-niet { background: var(--perkament); }
.kolom-kop { font-size: 0.76rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; margin-bottom: 22px; }
.kop-wel { color: var(--fase-2-diep); }
.kop-niet { color: var(--accent-diep); }
.voorwie-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.voorwie-lijst li { font-size: 0.98rem; color: var(--inkt-zacht); padding-left: 26px; position: relative; }
.voorwie-lijst li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 12px; height: 2px; background: var(--fase-2-diep); }
.voorwie-niet .voorwie-lijst li::before { background: var(--accent-diep); }
.voorwie-slot { margin-top: 34px; max-width: 46ch; font-size: clamp(1.1rem, 1.2vw + 0.8rem, 1.4rem); font-weight: 700; letter-spacing: -0.022em; line-height: 1.3; }
.nog-te-bevestigen { font-size: 0.82rem; color: var(--inkt-gedempt); margin: -12px 0 24px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vinken small a { font-weight: 600; color: var(--kaart-diep); }
@media (max-width: 940px) { .voorwie-grid { grid-template-columns: minmax(0, 1fr); } }

/* ============ scèneachtergrond ============ */
.story-achtergrond { position: absolute; inset: 0; z-index: -3; overflow: hidden; pointer-events: none; }
.story-achtergrond .scene {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: center 45%;
  opacity: 0; will-change: opacity;
}
.story-achtergrond .sluier {
  position: absolute; inset: 0;
  background: rgba(244, 240, 230, 0.65);
}
/* de lichtste inkt is niet veilig over beeld — één stap donkerder binnen het verhaal */
.story .scroll-hint, .story .spiral-caption { color: var(--inkt-zacht); }
body.static-story .story-achtergrond { display: none; }
@media (prefers-reduced-motion: reduce) { .story-achtergrond { display: none; } }

/* ============ mensbeeld ============ */
.mensbeeld { background: var(--bos); color: var(--band-tekst); padding: 120px 0; position: relative; overflow: hidden; }
.mensbeeld::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(44% 52% at 88% 14%, rgba(111, 138, 116, 0.42), transparent 70%),
              radial-gradient(38% 46% at 4% 88%, rgba(128, 140, 93, 0.28), transparent 72%);
}
.mensbeeld .shell { position: relative; }
.mensbeeld-kop { max-width: 44rem; margin-bottom: 64px; }
.mensbeeld-kop h2 { color: var(--band-tekst); margin: 20px 0 26px; }
.mensbeeld-lead { color: var(--band-tekst-zacht); font-size: clamp(1.02rem, 1.1vw + 0.7rem, 1.2rem); max-width: 46ch; }
.belofte-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
/* twee losse kaarten met dezelfde ronding als de routekaarten en het portret */
.belofte-kolom {
  background: rgba(28, 26, 23, 0.14); border: 1px solid var(--band-lijn);
  border-radius: 22px; padding: 36px 34px 40px;
}
.belofte-niet { background: rgba(28, 26, 23, 0.32); }
.kolom-kop {
  font-size: 0.76rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em;
  color: #b9c9a8; margin-bottom: 22px;
}
.belofte-niet .kolom-kop { color: #e0ab8a; }
.belofte-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.belofte-lijst li { font-size: 1rem; color: var(--band-tekst); padding-left: 26px; position: relative; }
.belofte-lijst li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 12px; height: 2px; background: #b9c9a8;
}
.belofte-niet .belofte-lijst li::before { background: #e0ab8a; }
.mensbeeld-slot {
  margin-top: 48px; max-width: 52ch;
  font-size: clamp(1.1rem, 1.2vw + 0.8rem, 1.4rem); font-weight: 600;
  letter-spacing: -0.02em; line-height: 1.35; color: var(--band-tekst);
}

/* ============ prijsblok ============ */
.prijsblok { border-top: 1px solid var(--lijn); padding-top: 22px; margin-bottom: 26px; }
.prijs-rij { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.prijs {
  font-size: clamp(1.8rem, 2.4vw, 2.4rem); font-weight: 700;
  letter-spacing: -0.035em; line-height: 1; color: var(--inkt);
}
.prijs-periode { font-size: 0.85rem; color: var(--inkt-gedempt); font-weight: 600; }
.prijs-noot { font-size: 0.82rem; color: var(--inkt-gedempt); margin-top: 12px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.founding { font-size: 0.82rem; color: var(--kaart-diep); font-weight: 700; margin-top: 10px; }

/* ============ thema-tegels ============ */
.thema-tegels { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.thema-tegels a {
  display: flex; flex-direction: column; gap: 8px; height: 100%;
  background: var(--wit); border: 1px solid var(--lijn); border-radius: 20px;
  padding: 26px 24px 28px; text-decoration: none;
  transition: transform 0.18s ease, border-color 0.18s ease;
}
.thema-tegels a:hover { transform: translateY(-3px); border-color: var(--cta); }
.thema-cat { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; color: var(--inkt-gedempt); }
.thema-naam { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.028em; }
.thema-meer a { background: transparent; border-style: dashed; justify-content: center; }
.thema-meer .thema-naam { font-size: 0.95rem; }

/* ============ wachtlijst ============ */
.wachtlijst { padding: 108px 0; background: var(--perkament); }
.wachtlijst-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.wachtlijst h2 { margin: 20px 0 20px; }
.wachtlijst-lead { color: var(--inkt-zacht); font-size: 1rem; max-width: 46ch; }
.wachtlijst-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; background: var(--wit); border: 1px solid var(--lijn); border-radius: 22px; padding: 32px; }
.veld { display: grid; gap: 8px; }
.veld label { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--inkt-zacht); }
.veld input[type="email"] {
  font: inherit; font-size: 1rem; padding: 14px 18px;
  border: 1px solid rgba(28, 26, 23, 0.3); border-radius: 999px;
  background: var(--papier); color: var(--inkt);
}
.veld input[type="email"]:focus-visible { outline: 2px solid var(--cta); outline-offset: 2px; border-color: var(--cta); }
.veld-akkoord { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 12px; }
.veld-akkoord input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--cta); }
.veld-akkoord label {
  font-size: 0.85rem; text-transform: none; letter-spacing: 0;
  font-weight: 400; color: var(--inkt-zacht); line-height: 1.5;
}
.wachtlijst-form .btn { width: 100%; }
.form-status { font-size: 0.85rem; color: var(--inkt-zacht); min-height: 1.2em; margin: 0; }
.form-status.is-fout { color: var(--accent-diep); font-weight: 600; }
.form-status.is-goed { color: #3d5544; font-weight: 600; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }

/* ============ footer-contact ============ */
.footer-contact { font-size: 0.9rem; color: var(--inkt-zacht); margin-bottom: 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.footer-contact a { font-weight: 600; }

/* ============ communitypagina ============ */
.call-kaart {
  background: var(--wit); border: 1px solid var(--lijn); border-radius: 22px;
  padding: 40px; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 40px; align-items: center; position: relative; overflow: hidden;
}
.call-kaart::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--cta);
}
.call-hoofd h2 { margin: 16px 0 14px; }
.call-meta { font-size: 0.95rem; color: var(--inkt-zacht); margin: 0; }
.call-actie { display: grid; gap: 12px; justify-items: stretch; }
.call-actie .btn { width: 100%; }

.call-verwachting { list-style: none; margin: 34px 0 0; padding: 0; display: grid; gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.call-verwachting li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; font-size: 0.95rem; padding-top: 16px; border-top: 1px solid var(--lijn); }
.call-verwachting .nr { font-size: 0.76rem; font-weight: 700; color: var(--cta); padding-top: 3px; }
.call-verwachting strong { display: block; }
.call-verwachting small { color: var(--inkt-gedempt); font-size: 0.86rem; }
.call-verwachting small a { font-weight: 600; color: var(--accent-diep); }


/* het paneel gebruikt justify-items:start, waardoor een raster-kind naar zijn
   inhoudsbreedte krimpt — expliciet vullen zodat de velden de hele kaart
   beslaan, net als de schakelaar en de knop erboven */
.app-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; width: 100%; }
.app-form input[type="text"], .app-form input[type="email"], .app-form textarea {
  border: 1px solid var(--lijn); border-radius: 14px; padding: 13px 15px;
  font: inherit; font-size: 0.95rem; background: var(--papier); color: var(--inkt);
  width: 100%; resize: vertical; appearance: none; -webkit-appearance: none;
}
.app-form input[type="text"]:focus-visible, .app-form input[type="email"]:focus-visible, .app-form textarea:focus-visible {
  outline: 2px solid var(--cta); outline-offset: 2px; border-color: var(--cta);
}
.app-form input:invalid { box-shadow: none; }
.app-form .btn { width: 100%; }
.veld-hulp { margin: 0; font-size: 0.79rem; color: var(--inkt-gedempt); }
.app-form-waarschuwing {
  margin: 0; font-size: 0.82rem; line-height: 1.5; color: var(--inkt-zacht);
  background: #f7ece4; border-left: 3px solid var(--cta);
  border-radius: 4px 14px 14px 4px; padding: 14px 16px;
}
.app-form input:disabled, .app-form textarea:disabled { opacity: 0.5; cursor: not-allowed; }

.lid-kaart {
  background: var(--wit); border: 1px solid var(--lijn); border-radius: 22px; padding: 40px;
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 40px; align-items: center;
}
.lid-kaart h2 { margin: 16px 0 14px; }
.lid-actie { display: grid; gap: 12px; }
.lid-actie .btn { width: 100%; }
.lid-alternatief { margin: 0; font-size: 0.85rem; color: var(--inkt-zacht); }

/* ============ ledenplatform ============ */
.inlog-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 48px; align-items: start; }

.kanaal-balk { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 10px; }
.kanaal-knop {
  border: 1px solid var(--lijn); background: var(--wit); color: var(--inkt-zacht);
  border-radius: 999px; padding: 10px 20px; min-height: 44px; cursor: pointer;
  font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.13em;
}
.kanaal-knop[aria-current] { background: var(--cta); border-color: var(--cta); color: var(--wit); }
.kanaal-uitleg { font-size: 0.9rem; color: var(--inkt-gedempt); margin-bottom: 28px; }

.leden-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.feed-melding { padding: 30px 10px; margin: 0; color: var(--inkt-zacht); font-size: 0.92rem; text-align: center; }

.post-auteur {
  margin: 0; display: flex; align-items: center; gap: 11px;
  font-size: 0.85rem; font-weight: 400; text-transform: none; letter-spacing: normal;
  color: var(--inkt-zacht);
}
.post-auteur-blok { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.post-naam {
  margin: 0; display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.92rem; font-weight: 700; color: var(--inkt); letter-spacing: -0.005em;
}
.post-subregel {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 0.78rem; color: var(--inkt-gedempt);
}
.post-rol {
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  font-size: 0.7rem; color: var(--accent-diep);
}
.post-context { color: var(--inkt-gedempt); }
.post-scheiding { color: var(--lijn); }
/* profielfoto: gekleurde cirkel met initiaal — geen echte foto's beschikbaar,
   de kleur komt uit het fase-palet en volgt alleen de naam, niet iemands
   werkelijke herstelfase (zie platform.js: avatarKleur) */
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 999px; flex: 0 0 auto;
  color: #fff; font-size: 0.95rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: normal; font-variant-numeric: normal;
}
.reactie .avatar, .dash-lidkaart .avatar { width: 28px; height: 28px; font-size: 0.8rem; }
.badge-coach {
  font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700;
  padding: 3px 10px; border-radius: 999px; background: var(--cta); color: var(--papier);
}
.post-datum { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--inkt-gedempt); }
.post-titel { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 8px; }
.post-inhoud { margin: 0; font-size: 0.98rem; white-space: pre-line; }

/* de actierij: reactieteller en delen als pillen naast elkaar, zoals de
   knoppenrij onder een Reddit-post — geen stemknoppen (geen stemsysteem) */
.post-acties { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.post-reactie-paneel { margin-top: 12px; padding-left: 2px; }
.post-steun-knop, .post-reactie-knop, .post-deel-knop {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 6px 13px; font-size: 0.81rem; font-weight: 600; color: var(--inkt-gedempt);
  list-style: none; background: var(--papier); border: 0;
  border-radius: 999px; font-family: inherit;
}
.post-steun-knop:not(:disabled):hover, .post-reactie-knop:hover, .post-deel-knop:hover { color: var(--accent-diep); background: var(--accent-waas); }
.post-steun-icoon { font-size: 1rem; line-height: 1; }
.post-steun-telling:empty { display: none; }
.post-steun-knop.is-actief { color: var(--accent-diep); background: var(--accent-waas); }
.post-steun-knop:disabled { cursor: default; opacity: 0.75; }
/* de FAQ-indicator hoort hier niet */
.dash-schrijf summary::after { content: none; }
.post-deel-knop.is-gelukt { color: var(--accent-diep); background: var(--accent-waas); }
/* terugval als het klembord weigert — geen dialoog, gewoon de link tonen */
.post-deel-link {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 10px 0 0; font-size: 0.8rem; color: var(--inkt-gedempt);
}
.post-deel-link input {
  flex: 1 1 220px; min-width: 0; font: inherit; font-size: 0.8rem;
  padding: 7px 10px; border: 1px solid var(--lijn); border-radius: 10px;
  background: var(--papier); color: var(--inkt);
}
.reactie-lijst { display: grid; gap: 10px; margin: 10px 0 10px 2px; }
.reactie { background: var(--papier); border-radius: 12px; padding: 11px 14px; }
.reactie-inhoud { margin: 0; font-size: 0.9rem; white-space: pre-line; }
.reactie-form { display: grid; gap: 10px; padding-bottom: 6px; }
.reactie-form textarea {
  border: 1px solid var(--lijn); border-radius: 14px; padding: 12px 14px;
  font: inherit; font-size: 0.92rem; background: var(--papier); color: var(--inkt); resize: vertical;
}
.reactie-form textarea:focus-visible { outline: 2px solid var(--cta); outline-offset: 2px; }
.reactie-form .btn { justify-self: start; }

/* ============ archief van groepscalls ============ */
.opname-lijst { display: grid; gap: 14px; }
.opname-kop { margin-bottom: 2px; }
.opname-kop-titel { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 4px; }
.opname-kop-noot { margin: 0; font-size: 0.88rem; color: var(--inkt-zacht); max-width: 60ch; }
.opname-kaart {
  background: var(--wit); border: 1px solid var(--lijn); border-radius: 18px; padding: 22px 24px;
}
.opname-meta {
  margin: 0 0 6px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-size: 0.79rem; color: var(--inkt-gedempt);
}
.opname-titel { font-size: 1.02rem; font-weight: 700; letter-spacing: -0.015em; margin-bottom: 8px; }
.opname-samenvatting p { margin: 0 0 8px; font-size: 0.93rem; line-height: 1.55; color: var(--inkt-zacht); }
.opname-samenvatting p:last-child { margin-bottom: 0; }
.opname-acties { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

.opname-slot {
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--lijn);
  display: grid; gap: 8px;
}
.opname-slot-label {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.13em; color: var(--inkt-zacht);
}
.opname-slot-rij { display: flex; gap: 8px; flex-wrap: wrap; }
.opname-slot-rij input {
  flex: 1 1 180px; min-width: 0; font: inherit; font-size: 0.92rem;
  padding: 9px 13px; border: 1px solid var(--lijn); border-radius: 12px;
  background: var(--papier); color: var(--inkt); letter-spacing: 0.05em;
}
.opname-slot-rij input:focus-visible { outline: 2px solid var(--cta); outline-offset: 2px; border-color: var(--cta); }
.opname-open-melding { margin: 0 0 8px; font-size: 0.85rem; font-weight: 700; color: var(--fase-2-diep); }
.code-rij { display: flex; gap: 8px; flex-wrap: wrap; }
.code-rij input { flex: 1 1 200px; min-width: 0; }
.opname-code-toon { margin: 6px 0 0; font-size: 0.82rem; color: var(--inkt-zacht); }
.opname-code-toon code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--perkament); border-radius: 5px; padding: 2px 7px; letter-spacing: 0.06em;
}

/* ============ beheer-dashboard ============ */
.stat-rij { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 26px 0 12px; }
.stat-kaart {
  background: var(--wit); border: 1px solid var(--lijn); border-radius: 18px;
  padding: 20px 22px; display: grid; gap: 3px; align-content: start;
}
.stat-kaart-stil { background: var(--papier); }
.stat-label {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--inkt-gedempt);
}
.stat-cijfer { font-size: clamp(1.7rem, 2.4vw, 2.3rem); font-weight: 700; letter-spacing: -0.035em; line-height: 1.05; color: var(--inkt); }
.stat-noot { font-size: 0.79rem; color: var(--inkt-zacht); }
.stat-uitleg { font-size: 0.82rem; color: var(--inkt-gedempt); max-width: 70ch; margin: 0 0 8px; }

/* opmaakknoppen boven het tekstvak */
.opmaak-balk { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.opmaak-balk button {
  border: 1px solid var(--lijn); background: var(--wit); color: var(--inkt-zacht);
  border-radius: 10px; min-width: 40px; min-height: 34px; padding: 6px 12px;
  cursor: pointer; font: inherit; font-size: 0.82rem;
}
.opmaak-balk button:hover { border-color: rgba(168, 79, 52, 0.4); color: var(--accent-diep); }
.veld-hulp code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.92em;
  background: var(--perkament); border-radius: 5px; padding: 1px 5px;
}

.upload-voorbeeld { display: grid; gap: 10px; justify-items: start; margin-top: 10px; }
.upload-voorbeeld img { max-width: 260px; border-radius: 14px; border: 1px solid var(--lijn); }
.beheer-voorbeeld summary { cursor: pointer; font-size: 0.85rem; font-weight: 700; color: var(--inkt-zacht); padding: 8px 0; }
.beheer-voorbeeld summary::after { content: none; }
.beheer-voorbeeld-vlak {
  background: var(--papier); border: 1px solid var(--lijn); border-radius: 14px;
  padding: 16px 18px; margin-top: 6px;
}

.beheer-filters { display: flex; gap: 8px; flex-wrap: wrap; margin: 18px 0 4px; }
.beheer-filters button {
  border: 1px solid var(--lijn); background: var(--wit); color: var(--inkt-zacht);
  border-radius: 999px; padding: 8px 18px; min-height: 40px; cursor: pointer;
  font-size: 0.76rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.11em;
}
.beheer-filters button[aria-pressed="true"] { background: var(--inkt); border-color: var(--inkt); color: var(--papier); }
.beheer-rij.is-gepauzeerd { opacity: 0.7; border-style: dashed; }
.beheer-rij-info { min-width: 0; }
.btn.is-gevaar { color: var(--accent-diep); border-color: rgba(168, 79, 52, 0.45); }
.btn.is-bevestigen { background: var(--cta); border-color: var(--cta); color: var(--wit); }
.btn.is-gevaar:hover { background: var(--cta); border-color: var(--cta); color: var(--wit); }

/* opgemaakte berichttekst in de feed */
.post-beeld { margin: 12px 0 0; }
.post-beeld img { width: 100%; border-radius: 14px; display: block; }
.post-meer { margin-top: 6px; }
.post-meer summary { cursor: pointer; font-size: 0.82rem; font-weight: 600; color: var(--accent-diep); padding: 4px 0; }
.post-meer summary::after { content: none; }
.post-volledig p { margin: 0 0 10px; font-size: 0.95rem; line-height: 1.55; }
.post-volledig p:last-child { margin-bottom: 0; }
.post-volledig a { font-weight: 600; color: var(--accent-diep); }
.post-lijst { margin: 0 0 10px; padding-left: 20px; display: grid; gap: 4px; font-size: 0.95rem; }

@media (max-width: 940px) { .stat-rij { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .stat-rij { grid-template-columns: minmax(0, 1fr); } }

.beheer-form { margin: 26px 0 34px; }
.beheer-lijst { display: grid; gap: 10px; margin-top: 22px; }
.beheer-rij {
  background: var(--wit); border: 1px solid var(--lijn); border-radius: 16px;
  padding: 16px 20px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
}
.beheer-rij.is-verborgen { opacity: 0.55; }
.beheer-rij small { color: var(--inkt-gedempt); font-size: 0.79rem; }
.beheer-rij.is-wachtend { border-color: rgba(168, 79, 52, 0.35); background: #fbf3ec; }
.badge-wachtend {
  font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700;
  padding: 3px 10px; border-radius: 999px; background: transparent;
  border: 1px solid rgba(168, 79, 52, 0.5); color: var(--accent-diep);
}
.leden-samenvatting {
  margin: 0 0 4px; font-size: 0.85rem; font-weight: 700; color: var(--accent-diep);
}
.beheer-actie { display: flex; gap: 8px; flex-wrap: wrap; }
.beheer-veldrij { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.veld input[type="text"], .veld input[type="date"], .veld input[type="url"], .veld textarea {
  border: 1px solid var(--lijn); border-radius: 14px; padding: 13px 15px;
  font: inherit; font-size: 0.95rem; background: var(--papier); color: var(--inkt); width: 100%;
}
.veld input:focus-visible, .veld textarea:focus-visible { outline: 2px solid var(--cta); outline-offset: 2px; border-color: var(--cta); }

/* openbare blog + vergrendelde kanalen op de communitypagina */
.nieuws-lijst { display: grid; gap: 16px; }
.kanaal-preview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.kanaal-slot {
  background: var(--wit); border: 1px solid var(--lijn); border-radius: 22px; padding: 26px 28px;
  position: relative;
}
.kanaal-slot h3 { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 6px; }
.kanaal-slot p { margin: 0; font-size: 0.9rem; color: var(--inkt-zacht); }
.kanaal-slot .slotje {
  position: absolute; top: 22px; right: 24px; font-size: 0.75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--inkt-gedempt);
}

/* ingelogd: geen marketingkop boven het dashboard. Visueel weg, maar
   voor screenreaders blijft de h1 en het kruimelpad gewoon bestaan. */
body.is-dashboard .pagina-kop-krap {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
body.is-dashboard .sectie-dash { padding-top: 40px; }

.pagina-kop-krap { padding: 40px 0 8px; }
.pagina-kop-krap .kruimels { margin-bottom: 14px; }
.pagina-kop-krap h1 { margin: 12px 0 12px; }
.pagina-kop-krap .lood { margin-bottom: 0; font-size: 1rem; }
/* dezelfde bredere shell als het dashboard eronder — anders staat de kop
   op de gewone 1200px-breedte en loopt de linkerrand niet gelijk */
.pagina-kop-krap .shell { width: min(1440px, calc(100vw - 48px)); }

/* ============ ledendashboard (drie kolommen) ============ */
.sectie-dash { padding: 26px 0 96px; }
.sectie-dash .shell { width: min(1440px, calc(100vw - 48px)); }
.dash {
  display: grid; grid-template-columns: 300px minmax(0, 1fr) 324px;
  gap: 24px; align-items: start;
}
.dash-links, .dash-rechts { display: grid; gap: 14px; align-content: start; }
/* Alleen de rechterkolom plakt: die is kort. De linkerkolom bevat bij
   bezoekers het hele aanmeldformulier en is hoger dan het scherm — sticky
   maakt de onderkant daarvan onbereikbaar, en een max-height zou de pagina
   inkorten waardoor je hélemaal niet meer kunt scrollen. */
.dash-rechts {
  position: sticky; top: calc(var(--header-h) + 16px);
  max-height: calc(100dvh - var(--header-h) - 32px);
  overflow-y: auto; scrollbar-width: thin;
}
.dash-paneel {
  background: var(--wit); border: 1px solid var(--lijn); border-radius: 22px; padding: 24px 24px 26px;
  display: grid; gap: 12px; justify-items: start;
}
.dash-paneel .kolom-kop { color: var(--inkt-zacht); margin-bottom: 2px; }
.dash-paneel .btn {
  width: 100%; min-height: 46px; padding: 11px 18px;
  font-size: 0.75rem; letter-spacing: 0.1em;
}
.dash-paneel-noot { margin: 0; font-size: 0.85rem; color: var(--inkt-zacht); width: 100%; }
.dash-paneel-noot a { font-weight: 600; }
.dash-paneel-stil { background: var(--papier); }
.dash-waarborg { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; width: 100%; }
.dash-waarborg li {
  position: relative; padding-left: 18px; font-size: 0.85rem;
  color: var(--inkt-zacht); line-height: 1.45;
}
.dash-waarborg li::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 9px; height: 2px; background: var(--fase-2-diep);
}
.dash-profiel-naam { font-size: 1.1rem; }
.dash-schakel { font-size: 0.85rem; font-weight: 700; }

.dash-call { background: #f9f0e8; border-color: rgba(168, 79, 52, 0.2); }
.dash-coaching .prijs { font-size: 1.5rem; }
.dash-coaching .prijs-rij { align-items: baseline; gap: 7px; }
.dash-korting {
  margin: 0; font-size: 0.82rem; font-weight: 700; color: var(--accent-diep);
}
.dash-call-datum { margin: 0; font-size: 1.02rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; }

/* de kalender: een echt scheurkalenderblad */
.kalender { display: flex; gap: 16px; align-items: center; width: 100%; }
.kalender-blad {
  flex: 0 0 102px; border-radius: 14px; overflow: hidden; text-align: center;
  background: var(--wit); border: 1px solid var(--lijn);
  box-shadow: 0 12px 26px rgba(28, 26, 23, 0.14), 0 2px 6px rgba(28, 26, 23, 0.08);
}
.kalender-maand {
  display: block; background: var(--cta); color: var(--papier);
  font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.09em; padding: 7px 4px 6px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kalender-dag {
  display: block; font-size: 2.6rem; font-weight: 700; line-height: 1;
  letter-spacing: -0.035em; color: var(--inkt); padding: 10px 4px 2px;
  font-variant-numeric: tabular-nums;
}
.kalender-weekdag {
  display: block; font-size: 0.75rem; font-weight: 700; color: var(--inkt-gedempt);
  text-transform: uppercase; letter-spacing: 0.08em; padding: 0 4px 10px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kalender-info { display: grid; gap: 6px; min-width: 0; }
.kalender.is-leeg .kalender-maand { background: var(--inkt-gedempt); }
.kalender.is-leeg .kalender-dag { color: var(--inkt-gedempt); }

/* topics: gewoon een lijst, zoals Reddit's community-navigatie — geen
   kadertje per item, een dunne accentbalk en tekstgewicht doen het werk */
.dash-topics { display: grid; width: 100%; }
.dash-topic {
  display: block; width: 100%; border: 0; border-left: 3px solid transparent;
  background: transparent; color: var(--inkt-zacht); border-radius: 0;
  padding: 9px 10px 9px 11px; min-height: 40px;
  cursor: pointer; text-decoration: none; font: inherit; text-align: left;
}
.dash-topic:hover { background: rgba(28, 26, 23, 0.035); }
.dash-topic[aria-current] { border-left-color: var(--cta); background: var(--accent-waas); color: var(--inkt); }
.dash-topic-kop { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.dash-topic-hoofd { display: flex; align-items: center; gap: 9px; min-width: 0; }
.dash-topic-icoon {
  flex: 0 0 auto; width: 18px; height: 18px; color: var(--inkt-gedempt);
  display: inline-flex; align-items: center; justify-content: center;
}
.dash-topic-icoon svg { width: 100%; height: 100%; }
.dash-topic[aria-current] .dash-topic-icoon { color: var(--cta); }
.dash-topic-naam { font-size: 0.88rem; font-weight: 600; color: inherit; }
/* zichtbaar maar op slot: je ziet wát er is, niet wat erin staat */
.dash-topic.is-slot { color: var(--inkt-gedempt); }
.dash-topic.is-slot .dash-topic-naam { font-weight: 600; color: var(--inkt-zacht); }
.dash-topic.is-slot .dash-topic-icoon { opacity: 0.55; }
.dash-topic-slot { flex: 0 0 auto; width: 15px; height: 15px; color: var(--inkt-gedempt); display: inline-flex; }
.dash-topic-slot svg { width: 100%; height: 100%; }
.dash-topic.is-slot:hover .dash-topic-slot { color: var(--accent-diep); }
/* het paneel waar een gesloten topic naartoe wijst, licht even op */
.dash-paneel.is-gewezen { animation: paneel-wijs 2s ease-out; }
@keyframes paneel-wijs {
  0% { box-shadow: 0 0 0 3px rgba(168, 79, 52, 0.45); }
  100% { box-shadow: 0 0 0 3px rgba(168, 79, 52, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .dash-paneel.is-gewezen { animation: none; box-shadow: 0 0 0 3px rgba(168, 79, 52, 0.45); }
}
.dash-topic[aria-current] .dash-topic-naam { font-weight: 700; color: var(--inkt); }
.dash-topic-telling { font-size: 0.75rem; color: var(--inkt-gedempt); font-variant-numeric: tabular-nums; }
/* de uitleg blijft voor screenreaders; visueel vertelt de feedkop hem al —
   zo blijft elke navigatierij één rustige regel */
.dash-topic-uitleg {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* de feed: een dichte, doorlopende lijst met dunne scheidingslijnen —
   geen losse witte kaarten, zoals Reddit's post-rijen */
/* de feed als één duidelijk paneel — wit tegen de papieren pagina-achtergrond
   erachter, zodat meteen leesbaar is waar "de posts" beginnen, zonder een
   afzonderlijke scheidingslijn nodig te hebben */
.feed-paneel {
  background: var(--wit); border: 1px solid var(--lijn);
  border-radius: 18px; overflow: hidden;
}
.feed-kop {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; padding: 16px 18px 14px; border-bottom: 1px solid var(--lijn);
  background: var(--perkament);
}
.feed-kop .kanaal-uitleg { margin: 0; }
.feed-kop .kanaal-uitleg strong { display: block; font-size: 1.02rem; font-weight: 700; letter-spacing: -0.015em; color: var(--inkt); }
.feed-kop .kanaal-uitleg span { display: block; margin-top: 1px; font-size: 0.82rem; color: var(--inkt-gedempt); }
/* geen onderrand-padding: anders schemert er een witte strook onder een
   getinte coachpost die tot de rand doorloopt */
.feed { display: block; padding: 0 18px; }
.post-kaart {
  background: transparent; border: 0; border-radius: 0;
  border-bottom: 1px solid var(--lijn); padding: 16px 4px;
  transition: background 0.12s ease;
}
.post-kaart:last-child { border-bottom: 0; }
.post-kaart:hover { background: rgba(28, 26, 23, 0.022); }
.post-kaart.is-nieuws { background: var(--accent-waas); margin: 0 -18px; padding-left: 22px; padding-right: 22px; }
.post-kaart.is-nieuws:hover { background: rgba(179, 86, 58, 0.13); }
/* even oplichten wanneer je via een gedeelde link bij dit bericht uitkomt */
.post-kaart.is-gedeeld { animation: post-gedeeld-flits 2.4s ease-out; }
@keyframes post-gedeeld-flits {
  0% { background: var(--accent-waas); }
  100% { background: transparent; }
}
@media (prefers-reduced-motion: reduce) { .post-kaart.is-gedeeld { animation: none; background: var(--accent-waas); } }
.post-skelet:last-child { border-bottom: 0; }

.post-meta {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin-bottom: 5px; font-size: 0.79rem;
}
.post-topic-badge {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--accent-diep);
}
.post-vast {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--inkt-gedempt); margin-left: auto;
}
.post-meta { align-items: flex-start; }

.post-titel { font-size: 1.02rem; font-weight: 700; letter-spacing: -0.015em; margin-bottom: 3px; line-height: 1.3; }
/* preview in plaats van de volle tekst — twee regels, dan een afkap, net als
   een Reddit-tekstpost in de lijstweergave */
.post-preview {
  margin: 0; font-size: 0.9rem; color: var(--inkt-zacht); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.app-form select {
  border: 1px solid var(--lijn); border-radius: 14px; padding: 13px 15px;
  font: inherit; font-size: 0.95rem; background: var(--papier); color: var(--inkt); width: 100%;
}
.app-form select:focus-visible { outline: 2px solid var(--cta); outline-offset: 2px; border-color: var(--cta); }

/* skeleton-laadstaat: rustig schuivend licht in plaats van "Laden…" */
.post-skelet {
  background: transparent; border: 0; border-bottom: 1px solid var(--lijn);
  border-radius: 0; padding: 16px 6px; display: grid; gap: 10px;
}
.skelet-regel {
  display: block; height: 13px; border-radius: 7px;
  background: linear-gradient(90deg, var(--perkament) 25%, #f2eee2 50%, var(--perkament) 75%);
  background-size: 200% 100%;
  animation: skelet-glans 1.4s ease-in-out infinite;
}
.skelet-kort { width: 34%; }
.skelet-titel { width: 68%; height: 17px; }
@keyframes skelet-glans { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skelet-regel { animation: none; } }


/* wie er is ingelogd, zichtbaar in de header zodra de linkerkolom weg is */
.dash-wie { font-size: 0.85rem; font-weight: 600; color: var(--inkt-zacht); white-space: nowrap; }

/* schakelaar tussen inloggen en aanmelden */
.auth-schakel {
  display: flex; gap: 4px; width: 100%; padding: 3px;
  background: var(--papier); border-radius: 999px; margin-bottom: 4px;
}
.auth-schakel button {
  flex: 1 1 0; border: 0; background: transparent; cursor: pointer;
  border-radius: 999px; padding: 8px 10px; min-height: 38px;
  font: inherit; font-size: 0.78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--inkt-gedempt);
}
.auth-schakel button[aria-selected="true"] { background: var(--wit); color: var(--inkt); box-shadow: 0 1px 3px rgba(28, 26, 23, 0.1); }
.auth-schakel button:hover { color: var(--inkt); }
[data-veld-voornaam] .veld-hulp { margin-top: 2px; }

.dash-schrijf { margin: 0; }
.dash-schrijf summary { list-style: none; display: inline-flex; }
.dash-schrijf summary::-webkit-details-marker { display: none; }
.dash-schrijf[open] { flex: 1 1 100%; }
.dash-schrijf[open] summary { display: none; }
.dash-schrijf summary.btn { min-height: 40px; padding: 8px 18px; font-size: 0.72rem; }
.dash-schrijf-form {
  background: var(--papier); border: 1px solid var(--lijn); border-radius: 16px; padding: 20px;
}
.dash-reactie-context { margin: -4px 0 8px; font-size: 0.82rem; color: var(--inkt-gedempt); }
.dash-ledenrooster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.dash-lidkaart { background: var(--wit); border: 1px solid var(--lijn); border-radius: 16px; padding: 16px 18px; }
.dash-lidkaart-kop { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.dash-lidkaart small { color: var(--inkt-gedempt); font-size: 0.79rem; padding-left: 32px; display: block; }

@media (max-width: 1100px) {
  .dash { grid-template-columns: minmax(0, 1fr) 280px; }
  .dash-links { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); position: static; }
}
@media (max-width: 940px) {
  .inlog-grid, .leden-grid, .kanaal-preview { grid-template-columns: minmax(0, 1fr); }
  .beheer-veldrij { grid-template-columns: minmax(0, 1fr); }
  .dash { grid-template-columns: minmax(0, 1fr); }
  /* mobiel: eerst de inhoud (preview), dan inloggen/lid worden, dan agenda en topics */
  .dash-midden { order: -1; }
  .dash-links { order: 0; grid-template-columns: minmax(0, 1fr); position: static; }
  .dash-rechts { order: 1; position: static; }
  .dash-ledenrooster { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 940px) {
  .call-kaart, .lid-kaart { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 30px; }
  .call-verwachting { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .call-kaart, .lid-kaart { padding: 26px 22px; }
}

@media (max-width: 940px) {
  .belofte-grid { grid-template-columns: minmax(0, 1fr); }
  .thema-tegels { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .wachtlijst-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .mensbeeld { padding: 84px 0; }
  .wachtlijst { padding: 78px 0; }
  .mensbeeld-kop { margin-bottom: 42px; }
}
@media (max-width: 720px) {
  /* met afbreekstreepje leest netter dan een harde breuk midden in het woord */
  .display { hyphens: auto; }
  .thema-tegels { grid-template-columns: minmax(0, 1fr); }
  .wachtlijst-form { padding: 24px; }
  .belofte-kolom { padding: 28px 24px 32px; }
}


/* ============ subpagina's (thema's) ============ */
.subpagina header.site { border-bottom: 1px solid var(--lijn); }
.pagina-kop { padding: 76px 0 8px; }
.pagina-kop h1 { margin: 20px 0 24px; max-width: 18ch; }
.pagina-kop .lood { max-width: 56ch; }
.kruimels { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--inkt-gedempt); margin-bottom: 26px; display: flex; gap: 10px; flex-wrap: wrap; }
.kruimels a { text-decoration: none; }
.kruimels a:hover { color: var(--cta); }
nav.primary a[aria-current="page"] { color: var(--inkt); border-bottom-color: var(--cta); }

.thema-categorie { margin-bottom: 44px; }
.thema-categorie h2 { display: flex; align-items: baseline; gap: 14px; margin-bottom: 18px; }
.cat-nr { color: var(--cta); font-size: 0.8em; }
.thema-lijst { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.thema-lijst li {
  font-size: 0.88rem; font-weight: 600; padding: 9px 18px;
  border: 1px solid var(--lijn); border-radius: 999px; color: var(--inkt-zacht);
}
.thema-lijst li:has(a) { padding: 0; border-color: var(--cta); }
.thema-lijst li a { display: block; padding: 9px 18px; text-decoration: none; color: var(--cta); }
.thema-lijst li a:hover { background: var(--cta); color: var(--wit); border-radius: 999px; }
.thema-noot { font-size: 0.85rem; color: var(--inkt-gedempt); max-width: 58ch; margin-top: 8px; }

.artikel { max-width: 68ch; }
.artikel h2 { margin: 48px 0 16px; }
.artikel h2:first-child { margin-top: 0; }
.artikel p { color: var(--inkt-zacht); margin-bottom: 16px; }
.herken-lijst { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 12px; }
.herken-lijst li { padding-left: 26px; position: relative; color: var(--inkt-zacht); }
.herken-lijst li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 12px; height: 2px; background: var(--cta); }
.artikel-noot { font-size: 0.85rem; color: var(--inkt-gedempt); border-left: 2px solid var(--lijn); padding-left: 16px; }
.artikel-quote {
  margin: 28px 0; padding: 26px 30px; background: var(--perkament);
  border-radius: 20px; color: var(--inkt); font-weight: 700;
}
.artikel-cta { margin: 56px 0 8px; padding: 34px; background: var(--wit); border: 1px solid var(--lijn); border-radius: 22px; }
.artikel-cta h2 { margin-top: 0; }
.artikel-knoppen { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 22px; }
.verwant { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.verwant li { font-size: 0.88rem; font-weight: 600; padding: 9px 18px; border: 1px solid var(--lijn); border-radius: 999px; color: var(--inkt-gedempt); }
.verwant li:has(a) { padding: 0; border-color: var(--cta); }
.verwant li a { display: block; padding: 9px 18px; text-decoration: none; color: var(--cta); }

.slot-effen { background: var(--kleidiep); }
.slot-effen::before { background: radial-gradient(42% 52% at 18% 18%, rgba(161, 130, 75, 0.28), transparent 70%), radial-gradient(42% 52% at 84% 80%, rgba(179, 86, 58, 0.36), transparent 70%); }

@media (max-width: 720px) {
  .pagina-kop { padding: 52px 0 4px; }
  .artikel-cta { padding: 24px; }
  .artikel-knoppen .btn { width: 100%; }
}

/* ============ responsief ============ */
@media (max-width: 940px) {
  :root { --shell: calc(100vw - 48px); }
  nav.primary { display: none; }
  .story-stage { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); gap: 0; align-items: start; }
  .hero-foto, .spiral-col, .beats { grid-column: 1; }
  .spiral-col { height: min(32vh, 260px); height: min(32dvh, 260px); margin-top: 6px; }
  .spiral-col svg { width: auto; height: 100%; margin-right: 0; }
  .hero-foto { height: 190px; }
  .hero-foto img { border-radius: 18px; }
  /* animatie-modus: foto en spiraal wisselen in dezelfde cel, boven de tekst */
  body:not(.static-story) .hero-foto, body:not(.static-story) .spiral-col { grid-row: 1; }
  body:not(.static-story) .beats { grid-row: 2; }
  /* gestapeld: eerst een compacte foto, dan de kop, dan de spiraal als samenvatting */
  body.static-story .hero-foto { grid-row: 1; height: 190px; margin-bottom: 20px; }
  body.static-story .beats { grid-row: 2; }
  body.static-story .spiral-col { grid-row: 3; height: auto; margin-top: 28px; }
  body.static-story .hero-foto img { height: 100%; object-fit: cover; }
  .beats { min-height: 0; height: 100%; }
  .beat { justify-content: flex-start; padding-top: 10px; }
  .beat .spook { font-size: 9rem; }
  .fase-verticaal { display: none; }
  body.static-story .story-stage { grid-template-columns: minmax(0, 1fr); }
  body.static-story .spiral-col { position: static; order: -1; height: auto; }
  .sectie-kop { grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
  .routes { grid-template-columns: minmax(0, 1fr); }
  .drie { grid-template-columns: minmax(0, 1fr); }
  .founder-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  /* één kolom: het portret staat weer netjes binnen de shell */
  .portret {
    margin-left: 0; border-left: 1px solid var(--band-lijn); border-radius: 22px;
    min-height: 0; aspect-ratio: 1 / 1;
  }
  .sectie { padding: 78px 0; }
  .sectie-krap { padding: 64px 0; }
  .founder { padding: 84px 0; }
  .slot { padding: 92px 0; }
  .statement { padding: 84px 0; }
}

@media (max-width: 720px) {
  body { font-size: 1rem; }
  .alleen-breed { display: none; }
  .btn-klein { padding: 10px 16px; letter-spacing: 0.1em; }
  :root { --shell: calc(100vw - 40px); }
  .route-body { padding: 28px 24px 32px; }
  .route-foto { height: 230px; }
  .principe { padding: 32px 26px 36px; }
  .beat-acties .btn { width: 100%; }
  .story-cta .btn { min-height: 48px; padding: 12px 22px; }
  .footer-grid { flex-direction: column; align-items: flex-start; }
}

/* ============ reduced motion ============ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .btn, .story-stage::before, .hero-foto, .spiral-col svg, .fase-marker, .story-cta { transition: none; }
}