/* ==========================================================================
   Sati Psychologie — gedeelde stylesheet
   ========================================================================== */

:root {
  --emphasis-style: normal;
  --card-shadow-soft: 0 4px 10px rgba(8,18,20,.09), 0 16px 36px rgba(8,18,20,.2);
  --card-shadow-strong: 0 34px 70px rgba(8,18,20,.44), 0 12px 26px rgba(8,18,20,.28);
  --therapy-main: #5B5541;   /* warm olijfkhaki: kaart, header en hero van Therapie */
  --therapy-deep: #3F3A2C;
  --therapy-tint: #D9D4C4;
  --therapy-light: #F4F4F0;
  --therapy-soft: #D7DEDB;
  --training-main: #EDE6D8;   /* warm licht zand: kaart en basis van Training */
  --training-ink: #2B3835;    /* donkere tekst op zand */
  --training-light: #F6F1E7;  /* ivoor: paginavlak van Training */
  --training-panel: #FBF8F1;  /* kaarten op het ivoren vlak */
  --training-accent: #4E625F;
  --meditation-main: #F0C779;   /* warm saffraangeel: kaart en basis van Meditatie */
  --meditation-ink: #283B35;    /* donkere tekst, iconen en lijnillustraties */
  --meditation-soft: #FBF4E7;   /* warm crème voor langere inhoudssecties en kaarten */
  --meditation-deep: #283B35;   /* donker vlak voor het formulier en de basis onder de video */
  --meditation-accent: #B8761C; /* diep saffraan voor kickers en links op crème */
  --sage: #4E625F;           /* saliegroen blijft het merkaccent (knoppen, kickers, traject) */
  --sage-deep: var(--therapy-deep);
  --sage-soft: #6B827E;
  --sage-tint: #D7DEDB;
  --beige: var(--therapy-light);
  --beige-deep: #E8E9E2;
  --dark: #242E35;
  --dark-soft: #46535C;
  --ink: #242E35;
  --ink-soft: #4F5B63;
  --line: rgba(36, 46, 53, 0.14);
  --wit: #FAFBF8;
  --kaart: #FBFBF8;
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-body: "Figtree", "Helvetica Neue", sans-serif;
  --ease-out: cubic-bezier(.19, .6, .22, 1);
  --ease-in-out: cubic-bezier(.45, 0, .25, 1);
  /* Huisstijl: gedeelde bewegingsrecepten. JS leest deze tokens via satiMotion. */
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);
  --ease-faq-open: cubic-bezier(.22, .61, .36, 1);
  --ease-faq-close: cubic-bezier(.65, 0, .35, 1);
  --motion-feedback: 160ms;
  --motion-press: 120ms; /* indrukken (schaal .97) */
  --motion-fade: 180ms;
  --motion-disclosure: 240ms;
  --motion-layout: 280ms;
  --motion-text: 700ms;
  --motion-text-step: 65ms;
  --motion-text-distance: 14px;
  --motion-blur: 6px;
  --motion-menu-surface: 480ms;
  --motion-menu-text: 440ms;
  --motion-menu-delay: 80ms;
  --motion-menu-step: 45ms;
  /* Afwijkend recept: het donkere submenu zakt als druppel uit de header en spreidt dan uit. */
  --motion-menu-blob: 700ms;
  --motion-menu-blob-mobiel: 450ms; /* De mobiele kaart is groter; 700 ms voelde daar traag (Jasper, 24 september). */
  --motion-faq-open: 480ms;
  --motion-faq-close: 420ms;
  --motion-section: 1050ms;
  --motion-section-distance: 26px;
  --motion-stagger: 800ms;
  --motion-stagger-step: 75ms;
  --motion-heading: 1000ms;
  --motion-heading-distance: .55em;
  --motion-heading-blur: 10px;
  --motion-stagger-distance: 16px;
  --motion-stagger-blur: 4px;
  --button-radius: 8px; /* Besluit Jasper, 2026-09-15: Contact is de standaard. */
  --header-height: calc(76px + env(safe-area-inset-top, 0px));
  --header-compact-height: calc(64px + env(safe-area-inset-top, 0px));
  --contact-hover: #F1DEA8;
  --contact-sky: color-mix(in srgb, #B5CAE4 80%, var(--wit));
  --contact-rose: color-mix(in srgb, #E0A593 80%, var(--wit));
  --contact-apricot: color-mix(in srgb, #FED393 80%, var(--wit));
  --contact-cream: color-mix(in srgb, #F8D2A9 80%, var(--wit));
  --contact-cloud: color-mix(in srgb, #9B95A8 80%, var(--wit));
  --form-radius: 16px; /* formulieren, contactvlakken, kaarten en tabellen */
  /* Hoekenschaal (24 september, Jasper: uniformiteit). Klikbaar = 8 px; menu's en velden 10 px;
     blokken en foto's 12 px; kaarten en formulieren 16 px; routekaarten hun eigen vorm (42/12).
     Volledig rond alleen voor niet-klikbare labels. Zie Huisstijl, Vormen en knoppen. */
  --field-radius: 10px;
  --block-radius: 12px;
}

/* PLAN-10: officiële Figtree-webfonts, inclusief echt cursief en 300–900. */
@font-face {
  font-family: "Figtree"; font-style: normal; font-weight: 300 900;
  font-display: swap; src: url(fonts/figtree-variable.woff2) format("woff2");
}
@font-face {
  font-family: "Figtree"; font-style: italic; font-weight: 300 900;
  font-display: swap; src: url(fonts/figtree-italic-variable.woff2) format("woff2");
}

/* Handgeschreven letter voor het naamblok (keuze Jasper uit fontproef,
   2026-07-15). Zelf-gehost (pad relatief aan dit CSS-bestand), dus geen
   externe request. Vervangt de handtekening-scan (PLAN-4, stap 4c). */
@font-face {
  font-family: "Caveat";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/caveat-400.woff2) format("woff2");
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html {
  background: var(--dark); /* Ook de browsercanvas gebruikt de footerbasis. */
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  background: var(--beige);
  color: var(--ink);
  line-height: 1.65;
  font-size: 1.09375rem;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}


::selection { background: var(--sage-tint); color: var(--dark); }

.wrap { max-width: 1140px; margin: 0 auto; padding: 0 28px; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: 0.005em;
  text-wrap: balance;
}
em, i, cite, dfn, address { font-style: var(--emphasis-style); }
h1 em, h2 em, h3 em { font-style: var(--emphasis-style); font-weight: 400; }

img { display: block; }

/* ---------- Kicker / labels ---------- */
.kicker {
  display: block;
  font-size: .72rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  margin-bottom: 20px;
}

/* ---------- Buttons ---------- */
.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--dark); color: var(--beige);
  font-family: var(--font-body); font-weight: 500; font-size: .82rem;
  letter-spacing: .02em;
  padding: 10px 22px; border-radius: var(--button-radius);
  text-decoration: none; border: none; cursor: pointer;
  transition: background-color var(--motion-feedback) ease, color var(--motion-feedback) ease, transform var(--motion-feedback) var(--ease-out), box-shadow var(--motion-feedback) ease;
}
/* 24 september (ronde 4): hover blijft in de eigen kleur, alleen 12% lichter via een witte laag
   (geen overgang naar salie meer); een pijl achter de tekst schuift 2 px mee. */
@media (hover: hover) and (pointer: fine) {
  .btn:hover { box-shadow: inset 0 0 0 100vmax rgba(255, 255, 255, .12); }
  .btn:hover > svg:last-child { transform: translateX(2px); }
}
.btn > svg:last-child { transition: transform var(--motion-feedback) var(--ease-out); }
/* 24 september: hover is alleen een kleurwissel, zonder lift of schaduw; indrukken 98%. Zo voelen
   alle knoppen hetzelfde, ook de brede formulierknop (Jasper). */
.btn:active { transform: scale(.98); transition-duration: var(--motion-press); }
.btn:focus-visible:active { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .btn, .btn:active { transform: none !important; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: none !important; }
}
  .btn { transition-property: background-color, color, box-shadow; }
}
html.noanim .btn, html.noanim .btn:active { transform: none !important; transition: none !important; }
@media (hover: hover) and (pointer: fine) {
  html.noanim .btn:hover { transform: none !important; transition: none !important; }
}
.btn.light { background: var(--beige); color: var(--dark); }
@media (hover: hover) and (pointer: fine) {
  .btn.light:hover { background: #fff; color: var(--dark); }
}
.btn.outline { background: transparent; color: var(--dark); box-shadow: inset 0 0 0 1.4px var(--dark); }
@media (hover: hover) and (pointer: fine) {
  .btn.outline:hover { background: var(--dark); color: var(--beige); transform: none; box-shadow: inset 0 0 0 1.4px var(--dark); }
}
.btn svg { flex-shrink: 0; }

/* ---------- Motion ---------- */
.reveal {
  opacity: 0; transform: translateY(var(--motion-section-distance)); filter: blur(var(--motion-blur));
  transition: opacity var(--motion-section) var(--ease-out), transform var(--motion-section) var(--ease-out), filter var(--motion-section) var(--ease-out);
}
.reveal.in { opacity: 1; transform: none; filter: none; }

html.js-enabled [data-stagger] > * { opacity: 0; }
[data-stagger].in > * {
  animation: rise var(--motion-stagger) var(--ease-out) forwards;
  animation-delay: calc(var(--stagger-base, 0ms) + var(--i, 0) * var(--motion-stagger-step));
}
@keyframes rise {
  from { opacity: 0; transform: translateY(var(--motion-stagger-distance)); filter: blur(var(--motion-stagger-blur)); }
  to { opacity: 1; transform: none; filter: none; }
}

.hero h1 .w, .pagina-hero h1 .w, .portal-intro h1 .w {
  display: inline-block; opacity: 0;
  transform: translateY(var(--motion-heading-distance)); filter: blur(var(--motion-heading-blur));
  animation: wordIn var(--motion-heading) var(--ease-out) forwards;
  animation-delay: calc(var(--wi) * var(--motion-text-step) + 120ms);
}
/* Drie korte openingswoorden krijgen meer ruimte tussen de starts. */
.portal-intro h1 .w { animation-delay: calc(var(--wi) * 220ms + 180ms); }
html.js-enabled:not(.intro-ready) [data-word-split] .w { animation-play-state: paused; }
/* De toelichting volgt de kop; daarna volgt een golf langs de drie kaarten. */
.portal-reveal { transition: none; }
.portal-reveal.in { animation: var(--portal-motion, wordIn) var(--portal-duration, .8s) var(--ease-out) both; animation-delay: var(--portal-delay, 0ms); }
.portal-item.portal-reveal { --portal-motion: portalCardIn; --portal-duration: 1.4s; }
@keyframes portalCardIn {
  from { opacity: 0; transform: translateY(64px); filter: blur(10px); }
  to { opacity: 1; transform: none; filter: none; }
}
.portal-reveal:focus-within { opacity: 1; transform: none; filter: none; animation: none; }
/* De beweging, duur en curve blijven gelijk aan Therapie. */
@keyframes wordIn { from { opacity: 0; transform: translateY(var(--word-distance, var(--motion-heading-distance))); filter: blur(var(--word-blur, var(--motion-heading-blur))); } to { opacity: 1; transform: none; filter: none; } }

@media (prefers-reduced-motion: reduce) {
  .motion-toggle { display: none; }
  .reveal { opacity: 1; transform: none; filter: none; transition: none; }
  .portal-reveal.in { animation: none; }
  [data-stagger] > *, .hero h1 .w, .pagina-hero h1 .w, .portal-intro h1 .w { opacity: 1; animation: none; transform: none; filter: none; }
  html { scroll-behavior: auto; }
}
html.noanim .reveal { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
html.noanim [data-stagger] > *, html.noanim .hero h1 .w, html.noanim .pagina-hero h1 .w, html.noanim .portal-intro h1 .w { opacity: 1 !important; animation: none !important; transform: none !important; filter: none !important; }

/* ---------- Header ---------- */
/* Basiskleuren; de gedeelde header en navigatielaag staan bij PLAN-17. */
header {
  background: var(--sage);
}
.nav {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  height: 96px; column-gap: 40px;
}
/* Logo links, menulinks in het midden, knop en taalwissel rechts. De gedeelde
   .wrap houdt de buitenranden gelijk aan die van de footer. */
.nav .logo-lockup { grid-column: 1; grid-row: 1; }
.nav-left { grid-column: 2; grid-row: 1; display: flex; gap: 34px; align-items: center; justify-content: center; }
.nav-left a {
  color: var(--beige); text-decoration: none;
  font-size: .95rem; font-weight: 500; letter-spacing: .04em;
}
.nav-right { grid-column: 3; grid-row: 1; display: flex; justify-content: flex-end; align-items: center; gap: 18px; }
.taal {
  font-size: .78rem; font-weight: 600; letter-spacing: .1em;
  color: var(--beige-deep); text-decoration: none;
  text-underline-offset: 4px;
}
@media (hover: hover) and (pointer: fine) {
  .taal:hover { color: var(--wit); text-decoration: underline; }
}
.nav .btn { font-size: .9rem; padding: 10px 22px; border-radius: var(--button-radius); }

.menu-knop {
  display: none; position: relative; flex: 0 0 44px;
  width: 44px; height: 44px; margin-right: 2px;
  background: transparent; border: 0; border-radius: var(--button-radius); cursor: pointer;
}
.menu-knop__art {
  position: absolute; inset: 0; pointer-events: none; transform-origin: center;
  transition: transform var(--motion-fade) var(--ease-out), opacity var(--motion-press) ease;
}
.menu-knop.is-pointer-pressed .menu-knop__art { transform: scale(.97); transition-duration: var(--motion-press); }
.menu-knop:active:not(.is-pointer-pressed) .menu-knop__art { opacity: .8; }
@media (prefers-reduced-motion: reduce) {
  .menu-knop.is-pointer-pressed .menu-knop__art { transform: none; opacity: .8; }
  .menu-knop__art { transition: opacity var(--motion-press) ease; }
}
html.noanim .menu-knop__art { transform: none !important; transition: none; }
html.noanim .menu-knop.is-pointer-pressed .menu-knop__art { opacity: .8; }
.menu-knop__line {
  position: absolute; left: 10px; right: 10px; height: 2px;
  background: var(--beige); border-radius: 2px;
  transition: transform var(--motion-fade) var(--ease-out);
}
.menu-knop__line:nth-child(1) { top: 17px; }
.menu-knop__line:nth-child(2) { top: 25px; }
.menu-knop.open .menu-knop__line:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.menu-knop.open .menu-knop__line:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }
.menu-knop.open { position: fixed; top: 14px; right: 18px; z-index: 100; }

.mobiel-menu {
  position: fixed; inset: 0; z-index: 80;
  display: flex; align-items: center; justify-content: center;
  background: var(--sage); opacity: 0; visibility: hidden;
  transition: opacity .35s var(--ease-out), visibility .35s;
}
.mobiel-menu.open { opacity: 1; visibility: visible; }
.mobiel-menu nav { display: grid; gap: 20px; width: min(340px, 82vw); text-align: center; }
.mobiel-menu a {
  min-height: 44px; display: flex; align-items: center; justify-content: center;
  color: var(--wit); text-decoration: none;
  font-family: var(--font-display); font-size: 1.55rem;
  opacity: 0; transform: translateY(12px);
  transition: opacity .4s var(--ease-out), transform .4s var(--ease-out);
}
.mobiel-menu.open a { opacity: 1; transform: none; }
.mobiel-menu.open a:nth-child(2) { transition-delay: 55ms; }
.mobiel-menu.open a:nth-child(3) { transition-delay: 110ms; }
.mobiel-menu.open a:nth-child(4) { transition-delay: 165ms; }
.mobiel-menu.open a:nth-child(5) { transition-delay: 220ms; }
html.menu-open { overflow: hidden; }

[id] { scroll-margin-top: 28px; }

.skip-link {
  position: absolute; left: 12px; top: -70px; z-index: 200;
  padding: 11px 18px; border-radius: var(--button-radius);
  background: var(--dark); color: var(--beige); text-decoration: none;
  font-size: .88rem; transition: top var(--motion-feedback) var(--ease-out);
}
.skip-link:focus { top: 12px; }

.btn:focus-visible, .nav-left a:focus-visible, .taal:focus-visible,
.menu-knop:focus-visible, .mobiel-menu a:focus-visible, footer a:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--sage-tint); outline-offset: 4px; border-radius: 6px;
}

.logo-lockup { display: flex; align-items: center; text-decoration: none; }
/* De PNG heeft links 61 transparante pixels op 610px breed. Corrigeer die
   optische inspringing bij elke logohoogte, zonder de navigatie te verschuiven. */
.logo-lockup img { display: block; transform: translateX(-10%); transition: opacity var(--motion-layout); }
@media (hover: hover) and (pointer: fine) {
  .logo-lockup:hover img { opacity: .85; }
}

/* ---------- Verloop: saliegroen blijft ±1,5 pagina, dan geleidelijk naar neutraal.
   De gradient krijgt via --verloop-hoogte (gezet in site.js) een vaste hoogte: de
   gemeten hoogte met alle accordeons dicht. De blend eindigt dan exact op de
   onderrand van de wrapper in gesloten toestand; opent een accordeon, dan groeit
   de wrapper onderaan door in effen beige (naadloos met de sectie eronder) en
   schuift de kleurovergang zelf niet mee. ---------- */
.verloop {
  background-color: var(--beige);
  background-image: linear-gradient(180deg,
    var(--sage) 0,
    var(--sage) 68%,
    #93A19C 84%,
    #D8DAD3 95%,
    var(--beige) 100%);
  background-repeat: no-repeat;
  background-size: 100% var(--verloop-hoogte, 100%);
}
.verloop .usp { color: var(--beige-deep); }
.verloop .usp svg { color: var(--sage-tint); }
.verloop .herken-head .kicker { color: var(--sage-tint); }
.verloop .herken-head h2 { color: var(--wit); }

/* ---------- Hero (index) ---------- */
.hero {
  background: none;
  padding: 200px 0 96px;
  text-align: center;
}
.hero h1 {
  font-size: clamp(2rem, 4vw, 3.05rem);
  color: var(--wit);
  max-width: 21em; margin: 0 auto;
}
.hero-lede {
  color: var(--beige-deep); font-size: 1.06rem;
  max-width: 38em; margin: 22px auto 0;
  /* Balanceert de regels: op desktop past de zin op één regel (de zin is ~34em,
     max-width ruim daarboven), op mobiel breekt hij in twee even lange regels
     (nooit een los woord aan het eind). */
  text-wrap: balance;
}
.hero-cta {
  margin-top: 30px;
  display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap;
}
.hero-cta .btn { font-size: .92rem; padding: 13px 30px; }
.hero-cta-alt {
  color: var(--beige-deep); font-size: .92rem;
  text-decoration: underline; text-underline-offset: 4px;
  transition: color var(--motion-feedback);
}
@media (hover: hover) and (pointer: fine) {
  .hero-cta-alt:hover { color: var(--wit); }
}
.hero-cards {
  margin-top: 56px;
  display: flex; justify-content: center; align-items: center; gap: 26px;
  perspective: 1100px;
}
@media (prefers-reduced-motion: no-preference) {
  @media (hover: hover) and (pointer: fine) {
    html:not(.noanim) .mcol:hover .tile { --tilt: 45deg; --gloed: .9; }
  }
}

.usp-strip {
  margin-top: 68px;
  display: flex; justify-content: center; flex-wrap: wrap; gap: 14px 38px;
}
.usp {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: .85rem; font-weight: 500; color: var(--dark-soft);
}
.usp svg { color: var(--sage); flex-shrink: 0; }
.usp .usp-icon { width: 21px; height: 21px; }

/* ---------- Sections ---------- */
section { padding: 150px 0; }
.sectie-cta { text-align: center; margin-top: 56px; }

/* ---------- Herken je dit ---------- */
.herken { padding-top: 0; }
.herken-head { text-align: center; max-width: 560px; margin: 0 auto 48px; }
.herken-head .kicker { color: var(--sage); }
.herken-head h2 { font-size: clamp(1.7rem, 2.9vw, 2.35rem); }
.herken-panel {
  background: var(--kaart); border: 1px solid var(--line); border-radius: var(--form-radius);
  padding: 52px 56px 46px; max-width: 880px; margin: 0 auto;
}
.herken-list {
  list-style: none;
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px 44px;
}
.herken-list li {
  display: flex; gap: 13px; align-items: flex-start;
  font-size: .96rem; color: var(--ink-soft); line-height: 1.55;
}
.herken-list li svg { color: var(--sage); flex-shrink: 0; margin-top: 4px; }
.klacht-accordion details { border-top: 1px solid var(--line); }
.klacht-accordion details:first-child { border-top: none; }
.klacht-accordion details:last-child { border-bottom: 1px solid var(--line); }
.klacht-accordion summary {
  font-family: var(--font-display);
  font-size: 1.06rem; font-weight: 400;
  padding: 17px 4px;
}
.klacht-accordion .ks { display: inline-flex; align-items: center; gap: 14px; }
.klacht-accordion .k-icoon { color: var(--sage); flex-shrink: 0; }
.klacht-accordion .faq-body { padding-left: 37px; }
.klacht-accordion .faq-body a { color: var(--sage); font-weight: 500; }
.symptomen {
  list-style: none; display: grid; gap: 8px;
  margin: 2px 0 16px; padding: 0;
}
.symptomen li {
  position: relative; padding-left: 22px;
  font-size: .92rem; color: var(--ink-soft); line-height: 1.5;
}
.symptomen li::before {
  content: ""; position: absolute; left: 0; top: .72em;
  width: 11px; height: 1.5px; border-radius: 1px; background: var(--sage);
}
@media (max-width: 980px) {
  .klacht-accordion .faq-body { padding-left: 4px; }
}

.herken-foot {
  margin-top: 40px; padding-top: 34px;
  text-align: center;
}
.herken-foot p {
  font-family: var(--font-display); font-style: var(--emphasis-style);
  font-size: 1.18rem; color: var(--dark); margin-bottom: 22px;
}
.herken-foot .micro { display: block; margin-top: 14px; font-size: .78rem; color: var(--ink-soft); font-family: var(--font-body); font-style: normal; }


/* ---------- Over mij ---------- */
.over-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 70px; align-items: center; }
.over-copy .kicker { color: var(--sage); }
.over-copy h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); margin-bottom: 24px; }
.over-copy p { color: var(--ink-soft); margin-bottom: 17px; max-width: 34em; }
.over-photo {
  border-radius: var(--form-radius); overflow: hidden;
  box-shadow: 0 26px 60px rgba(36,46,53,.22);
  max-width: 380px; justify-self: center;
}
.over-photo img { width: 100%; aspect-ratio: 4 / 4.1; object-fit: cover; }
.over-cta { margin-top: 30px; }
/* .cred: gebruikt in stijlgids.html (intern), niet meer op de site zelf */
.cred {
  font-size: .72rem; font-weight: 600; letter-spacing: .07em;
  color: var(--dark); background: var(--beige-deep);
  border: 1px solid var(--line);
  padding: 7px 14px; border-radius: 100px;
}
.nip-merk { margin-top: 28px; }

/* ---------- Methode-overzicht ---------- */
.methode { background: var(--beige); }
.methode .section-head { text-align: center; max-width: 560px; margin: 0 auto 64px; }
.methode .kicker { color: var(--sage); }
.methode h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); }
.methode-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.mcol { text-decoration: none; color: inherit; display: block; }
.mcol-photo { border-radius: var(--block-radius); overflow: hidden; margin-bottom: 24px; }
.mcol-photo .tile { width: 100%; aspect-ratio: 4/3; display: block; transition: transform .6s ease; }
@media (hover: hover) and (pointer: fine) {
  .mcol:hover .mcol-photo .tile { transform: scale(1.04); }
}
.mcol h3 { font-size: 1.3rem; margin-bottom: 4px; }
.mcol .sub { font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--sage); display: block; margin-bottom: 14px; }
.mcol p { color: var(--ink-soft); font-size: .95rem; }
.mcol .lees-meer {
  display: inline-block; margin-top: 16px;
  font-size: .85rem; font-weight: 600; color: var(--dark);
  text-decoration: underline; text-underline-offset: 4px;
  transition: color var(--motion-feedback);
}
@media (hover: hover) and (pointer: fine) {
  .mcol:hover .lees-meer { color: var(--sage); }
}
.methode-note {
  margin: 64px auto 0; max-width: 640px; text-align: center;
  font-family: var(--font-display); font-weight: 400; font-style: var(--emphasis-style);
  font-size: 1.12rem; color: var(--dark-soft);
}

/* ---------- Traject ---------- */
.traject { background: var(--sage); color: var(--beige); }
.traject .kicker { color: var(--beige-deep); opacity: .85; }
.traject-head { text-align: center; max-width: 620px; margin: 0 auto 70px; }
.traject-head h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); color: var(--wit); }
.traject-head p { margin-top: 16px; color: var(--beige-deep); font-size: .98rem; }
.stappen { max-width: 720px; margin: 0 auto; }
.stap {
  display: grid; grid-template-columns: 64px 1fr; gap: 26px;
  padding: 30px 0; border-top: 1px solid rgba(244,244,240,.25);
}
.stap:last-child { border-bottom: 1px solid rgba(244,244,240,.25); }
.stap-num {
  font-family: var(--font-display); font-style: var(--emphasis-style); font-weight: 400;
  font-size: 1.9rem; line-height: 1; color: var(--beige-deep); padding-top: 3px;
}
.stap h3 { font-size: 1.22rem; color: var(--wit); margin-bottom: 2px; }
.stap .tijd { font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--beige-deep); opacity: .8; display: block; margin-bottom: 10px; }
.stap p { color: var(--beige-deep); font-size: .94rem; }

/* ---------- Tarieven ---------- */
.tarieven .section-head { text-align: center; max-width: 600px; margin: 0 auto 64px; }
.tarieven .kicker { color: var(--sage); }
.tarieven h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); }
.tarieven .section-head p { margin-top: 16px; color: var(--ink-soft); font-size: .98rem; }
.tarief {
  background: var(--kaart); border: 1px solid var(--line); border-radius: var(--form-radius);
  padding: 40px 34px; display: flex; flex-direction: column; text-align: center;
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out), border-color .3s;
}
@media (hover: hover) and (pointer: fine) {
  .tarief:hover {
  transform: translateY(-10px);
  box-shadow: 0 26px 54px rgba(36,46,53,.16);
  border-color: var(--sage-tint);
}
}
.tarief.featured { background: var(--dark); color: var(--beige); border-color: var(--dark); }
@media (hover: hover) and (pointer: fine) {
  .tarief.featured:hover { border-color: var(--dark); box-shadow: 0 28px 58px rgba(36,46,53,.32); }
}
.tarief h3 { font-size: 1.22rem; margin-bottom: 2px; }
.tarief .tsub { font-size: .82rem; color: var(--ink-soft); margin-bottom: 26px; }
.tarief.featured .tsub { color: var(--sage-tint); }
.tarief .prijs { font-family: var(--font-display); font-weight: 400; font-size: 2.7rem; line-height: 1; }
.tarief .prijs sup { font-size: 1.15rem; margin-right: 3px; font-weight: 400; }
.tarief .eenheid { font-size: .82rem; color: var(--ink-soft); margin: 8px 0 26px; }
.tarief.featured .eenheid { color: var(--sage-tint); }
.tarief ul { list-style: none; display: grid; gap: 9px; margin-bottom: 32px; }
.tarief li { font-size: .89rem; color: var(--ink-soft); }
.tarief.featured li { color: var(--beige-deep); }
.tarief .btn { margin-top: auto; align-self: center; }
/* PLAN-27: tarief naar draagkracht. De kiezer (tariefkiezer.js) staat boven de tabel; de tabel werkt ook zonder JavaScript. */
.tarieven .section-head :is(.tarief-principe, .tarief-gratis) { color: var(--ink); }
.tariefkiezer {
  /* 24 september: zelfde vorm als het keuzehulppaneel: wit vlak zonder rand, 16 px hoeken, dezelfde vraagregel en keuzeknoppen. */
  max-width: 760px; margin: 0 auto 32px; padding: clamp(24px, 3vw, 40px);
  background: var(--wit); border-radius: var(--form-radius);
  display: grid; gap: 28px; text-align: left; color: var(--ink);
}
.tariefkiezer__titel { font-size: clamp(1.45rem, 2.1vw, 1.85rem); line-height: 1.25; margin: 0; } /* gelijk aan de keuzehulpvraag */
.tariefkiezer__stap { display: grid; gap: 12px; }
.tariefkiezer__stap[hidden], .tariefkiezer__uitkomst[hidden] { display: none; }
.tariefkiezer .choice-guide__meter-fill { transform-origin: left; }
.tariefkiezer__label { font-family: var(--font-display); font-size: clamp(1.2rem, 1.6vw, 1.35rem); line-height: 1.3; margin: 0; }
.tariefkiezer__invoer { display: flex; align-items: center; gap: 8px; max-width: 280px; min-height: 52px; padding: 0 15px; border: 1px solid var(--line); border-radius: var(--field-radius); background: var(--kaart); transition: border-color var(--motion-feedback) ease, box-shadow var(--motion-feedback) ease, background var(--motion-feedback) ease; }
.tariefkiezer__invoer:focus-within { border-color: var(--sage); background: #fff; box-shadow: 0 0 0 3px rgba(78,98,95,.38); } /* zelfde focus als de formuliervelden */
.tariefkiezer__invoer span { color: var(--ink-soft); }
.tariefkiezer__invoer input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: max(1.05rem, 16px); color: var(--ink); }
.tariefkiezer__invoer:has(input[aria-invalid="true"]) { border-color: #A1402E; }
.tariefkiezer__hint { font-size: .82rem; color: var(--ink-soft); max-width: 36em; }
.tariefkiezer__zelf { justify-self: start; min-height: 44px; padding: 0; border: 0; background: none; font: inherit; font-size: .88rem; color: var(--therapy-deep); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.tariefkiezer__schuif { width: 100%; height: 44px; margin: 0; accent-color: var(--therapy-deep); cursor: pointer; }
.tariefkiezer__standen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: -6px; }
.tariefkiezer__stand { display: grid; gap: 2px; padding: 8px 4px; border: 0; background: none; font: inherit; text-align: center; color: var(--ink-soft); cursor: pointer; border-radius: var(--button-radius); }
.tariefkiezer__stand:first-child { text-align: left; }
.tariefkiezer__stand:last-child { text-align: right; }
.tariefkiezer__stand.is-actief { color: var(--therapy-deep); }
.tariefkiezer__standnaam { font-size: .9rem; font-weight: 600; }
.tariefkiezer__standbereik { font-size: .78rem; }
.tariefkiezer__advies { font-size: .88rem; color: var(--ink-soft); }
.tariefkiezer__pakketten { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.tariefkiezer__pakket { justify-content: space-between; }
.tariefkiezer__pakket input { order: 0; }
.tariefkiezer__pakketnaam { flex: 1; font-weight: 500; font-size: .94rem; }
.tariefkiezer__pakketkorting { font-size: .82rem; color: var(--ink-soft); }
.tariefkiezer__uitkomst { display: grid; gap: 6px; padding: 22px 24px; border-radius: var(--block-radius); background: var(--therapy-light); }
.tariefkiezer__prijs { font-variant-numeric: tabular-nums; font-family: var(--font-display); font-size: 2.7rem; line-height: 1; color: var(--therapy-deep); }
.tariefkiezer__eenheid { font-size: .84rem; color: var(--ink-soft); margin-bottom: 8px; }
.tariefkiezer__totaal { font-weight: 500; }
.tariefkiezer__locatie, .tariefkiezer__vangnet, .tariefkiezer__nza { font-size: .86rem; color: var(--ink-soft); }
.tariefkiezer__vangnet { color: var(--ink); }
.tariefkiezer__stap.is-nieuw, .tariefkiezer__uitkomst.is-nieuw { animation: tariefkiezer-in var(--motion-text) var(--ease-out) both; }
@keyframes tariefkiezer-in { from { opacity: 0; transform: translateY(var(--motion-text-distance)); filter: blur(var(--motion-blur)); } }
@media (prefers-reduced-motion: reduce) { .tariefkiezer__stap.is-nieuw, .tariefkiezer__uitkomst.is-nieuw { animation: none; } }
html.noanim .tariefkiezer__stap.is-nieuw, html.noanim .tariefkiezer__uitkomst.is-nieuw { animation: none; }
@media (max-width: 560px) {
  .tariefkiezer__pakketten { grid-template-columns: minmax(0, 1fr); }
  .tariefkiezer__standnaam { font-size: .8rem; }
}
.tariefgroepen { max-width: 760px; margin: 0 auto; }
.tariefgroepen h3 { font-size: 1.22rem; margin-bottom: 14px; }
.tariefgroepen__tabel { background: var(--wit); border: 1px solid var(--line); border-radius: var(--form-radius); overflow: clip; }
.tariefgroepen table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.tariefgroepen th, .tariefgroepen td { padding: 16px 14px; text-align: left; vertical-align: top; }
.tariefgroepen tbody tr { border-top: 1px solid var(--line); }
.tariefgroepen thead th, .tariefgroepen tbody th { font-size: .9rem; font-weight: 600; line-height: 1.3; }
.tariefgroepen tr > :first-child { width: 28%; }
.tariefgroepen th span, .tariefgroepen td span { display: block; margin-top: 3px; font-size: .78rem; font-weight: 400; line-height: 1.35; color: var(--ink-soft); }
.tariefgroepen td strong { display: block; font-variant-numeric: tabular-nums; font-family: var(--font-display); font-size: 1.55rem; font-weight: 400; line-height: 1.1; }
.tariefgroepen__hoek { font-size: .76rem; line-height: 1.35; color: var(--ink-soft); }
.tariefgroepen__noot { margin-top: 12px; font-size: .84rem; color: var(--ink-soft); }
@media (max-width: 560px) {
  .tariefgroepen th, .tariefgroepen td { padding: 12px 6px; }
  .tariefgroepen tr > :first-child { width: 26%; padding-left: 12px; }
  .tariefgroepen th { hyphens: auto; -webkit-hyphens: auto; }
  .tariefgroepen tr > :last-child { padding-right: 12px; }
  .tariefgroepen thead th, .tariefgroepen tbody th { font-size: .78rem; }
  .tariefgroepen th span, .tariefgroepen td span, .tariefgroepen__hoek { font-size: .7rem; }
  .tariefgroepen td strong { font-size: 1.25rem; }
}
.tarief-voetnoot {
  margin-top: 34px; text-align: center; font-size: .86rem; color: var(--ink-soft);
  max-width: 560px; margin-left: auto; margin-right: auto;
}

/* ---------- FAQ ---------- */
.faq { background: var(--beige); padding-top: 80px; }
.faq-head { text-align: center; max-width: 520px; margin: 0 auto 54px; }
.faq-head .kicker { color: var(--sage); }
.faq-head h2 { font-size: clamp(1.7rem, 2.8vw, 2.3rem); }
.faq-list { max-width: 680px; margin: 0 auto; }
.faq-list details, .herken details { border-top: 1px solid var(--line); overflow: hidden; }
.faq-list details:last-child, .herken details:last-child { border-bottom: 1px solid var(--line); }
summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 19px 4px;
  font-size: .93rem; font-weight: 500; color: var(--dark);
  transition: color var(--motion-feedback);
}
summary::-webkit-details-marker { display: none; }
@media (hover: hover) and (pointer: fine) {
  summary:hover { color: var(--sage); }
}
summary .chev { flex-shrink: 0; transition: transform .45s cubic-bezier(.76, 0, .24, 1); color: var(--sage); }
details[open]:not(.sluiten) > summary .chev { transform: rotate(180deg); }
.faq-body { padding: 0 4px 22px; font-size: .92rem; color: var(--ink-soft); max-width: 56em; }
.faq-body a { color: var(--sage); }

/* ---------- Quote ---------- */
.faq:has(+ .quote) { padding-bottom: 44px; }
.quote { padding: 20px 0 100px; text-align: center; }
.quote__card { position: relative; max-width: 900px; margin: 0 auto; padding: 48px clamp(24px, 5vw, 70px); border-radius: var(--form-radius); background: linear-gradient(135deg, color-mix(in srgb, var(--therapy-tint) 55%, var(--wit)), var(--therapy-light)); border: 1px solid color-mix(in srgb, var(--therapy-deep) 12%, transparent); }
.quote__card::before { content: "“"; display: block; height: 50px; font: 5rem/1 var(--font-display); color: var(--therapy-deep); opacity: .45; }
.quote blockquote {
  max-width: 700px; margin: 0 auto;
  font-family: var(--font-display); font-weight: 400; font-style: var(--emphasis-style);
  font-size: clamp(1.2rem, 2.2vw, 1.55rem); line-height: 1.55; color: var(--dark);
}
.quote cite { display: block; margin-top: 24px; font-family: var(--font-body); font-style: normal; font-size: .82rem; letter-spacing: .06em; color: var(--ink-soft); }
.quote-context { margin-top: 14px; font-size: .82rem; color: var(--ink-soft); }

/* ---------- Aanmelden ---------- */
.aanmelden {
  position: relative; padding: 120px 0;
  background: #3B4C48;
  overflow: hidden; overflow: clip; /* Knip decoratie af zonder intern scrollvlak. */
}
.aanmelden::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(720px 520px at 82% 18%, rgba(244,244,240,.07), transparent 70%),
    radial-gradient(560px 420px at 8% 92%, rgba(36,46,53,.35), transparent 70%);
}
.aanmelden .wrap { position: relative; z-index: 2; }
.aanmelden form.reveal:focus-within { opacity: 1; transform: none; filter: none; transition: none; }
.aanmelden-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 76px; align-items: start; }
.aanmelden .kicker { color: var(--sage-tint); }
.aanmelden h2 { font-size: clamp(1.9rem, 3.2vw, 2.7rem); color: var(--wit); margin-bottom: 20px; }
.aanmelden .lede { color: var(--beige-deep); font-size: 1.02rem; margin-bottom: 30px; max-width: 30em; }
.aanmelden-punten { display: grid; gap: 12px; }
.aanmelden-punt { display: flex; gap: 12px; align-items: flex-start; font-size: .92rem; color: var(--beige-deep); }
.aanmelden-punt svg { color: var(--sage-tint); flex-shrink: 0; margin-top: 4px; }
.aanmelden-punt strong { color: var(--wit); font-weight: 600; }
.plekken {
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: 26px; font-size: .84rem; font-weight: 500; color: var(--beige-deep);
}
.plekken .dot {
  width: 8px; height: 8px; border-radius: 50%; background: #D8B27A;
  animation: pulse-dot 2.8s ease-in-out infinite;
}
@keyframes pulse-dot { 0%,100% { opacity: .5 } 50% { opacity: 1 } }

form {
  background: var(--beige); border-radius: var(--form-radius); padding: 38px 36px;
  color: var(--ink); box-shadow: 0 30px 70px rgba(0,0,0,.35);
  display: grid; gap: 18px;
}
form h3 { font-size: 1.3rem; margin-bottom: 2px; }
.veld label { display: block; font-size: .8rem; font-weight: 600; letter-spacing: .04em; margin-bottom: 6px; }
.keuze { display: flex; gap: 10px; flex-wrap: wrap; }
.keuze input[type="radio"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: 0; overflow: hidden; clip-path: inset(50%); opacity: 0; pointer-events: none; }
.keuze label {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .85rem; font-weight: 500; letter-spacing: 0; margin: 0;
  padding: 10px 18px; border-radius: var(--button-radius); cursor: pointer;
  border: 1.4px solid var(--line); background: var(--kaart); color: var(--ink-soft);
  transition: border-color var(--motion-feedback), background var(--motion-feedback), color var(--motion-feedback);
}
.keuze input:checked + label { border-color: var(--dark); background: var(--dark); color: var(--beige); }
.keuze input:focus-visible + label { box-shadow: 0 0 0 4px rgba(78,98,95,.25); }
.veld input, .veld textarea, .veld select {
  width: 100%; font-family: var(--font-body); font-size: .95rem;
  padding: 12px 15px; border: 1px solid var(--line); border-radius: var(--field-radius);
  background: var(--kaart); color: var(--ink);
  transition: border-color var(--motion-feedback), box-shadow var(--motion-feedback), background var(--motion-feedback);
}
.veld input:focus, .veld textarea:focus, .veld select:focus {
  outline: none; border-color: var(--sage); background: #fff;
  box-shadow: 0 0 0 3px rgba(78,98,95,.38); /* 24 september: duidelijker focusring (web-interface-richtlijnen); was .14 */
}
.veld textarea { resize: vertical; min-height: 5.5em; line-height: 1.55; }
form .btn { width: 100%; padding: 13px; font-size: .88rem; }
.form-note { font-size: .78rem; color: var(--ink-soft); text-align: left; }
.waarborgen {
  list-style: none; margin-top: 18px;
  display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: center;
}
.waarborgen li {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .8rem; color: var(--beige-deep);
}
.waarborgen li svg { color: var(--sage-tint); flex-shrink: 0; }
.form-sent { align-content: center; }
.form-status:focus { outline: none; }
.form-status { font-size: .95rem; padding: 14px 16px; border-radius: var(--field-radius); }
.form-status.gelukt { background: var(--sage-tint); color: var(--dark); }
.form-status.mislukt { background: #F3E3DF; color: #7A3B2E; }
.form-status a { color: inherit; font-weight: 600; }

/* ---------- Methode-detailpagina's ---------- */
.pagina-hero {
  background: linear-gradient(180deg, var(--sage) 0%, var(--sage) 55%, #8C9C97 85%, var(--beige) 100%);
  padding: 90px 0 110px;
}
.pagina-hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 70px; align-items: center; }
.pagina-hero .kicker { color: var(--beige-deep); opacity: .9; }
.pagina-hero h1 { font-size: clamp(2rem, 3.8vw, 2.9rem); color: var(--wit); margin-bottom: 22px; }
.pagina-hero .lede { color: var(--beige-deep); font-size: 1.06rem; max-width: 32em; margin-bottom: 32px; }
.pagina-hero-visual {
  border-radius: var(--form-radius); overflow: hidden;
  box-shadow: 0 26px 60px rgba(36,46,53,.3);
  justify-self: end; width: min(360px, 100%);
}
.pagina-hero-visual .tile { width: 100%; aspect-ratio: 4/4.6; display: block; }
.pagina-hero-visual img { width: 100%; aspect-ratio: 4/4.6; object-fit: cover; display: block; }
.pagina-hero .btn-rij { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.pagina-hero .terug {
  color: var(--beige-deep); font-size: .85rem; text-decoration: underline; text-underline-offset: 4px;
}
@media (hover: hover) and (pointer: fine) {
  .pagina-hero .terug:hover { color: var(--wit); }
}

.inhoud { padding: 96px 0; }
.inhoud.smal .wrap { max-width: 760px; }
.inhoud .kicker { color: var(--sage); }
.inhoud h2 { font-size: clamp(1.6rem, 2.7vw, 2.2rem); margin-bottom: 22px; }
.prose p { color: var(--ink-soft); margin-bottom: 18px; }
.prose strong { color: var(--dark); }

/* ---------- Routepagina's: aanbodkaarten en uitklapsecties ----------
   De kleuren komen uit de route-variabelen onderaan dit bestand (body[data-route]). */
.aanbod { padding: 110px 0 120px; background: var(--route-bg); }
.aanbod-head { max-width: 680px; margin: 0 auto 52px; text-align: center; }
.aanbod-head .kicker { color: var(--route-accent); }
.aanbod-head h2 { font-size: clamp(1.7rem, 2.9vw, 2.4rem); color: inherit; }
.aanbod-head p { margin-top: 16px; color: var(--route-text-soft); }
.aanbod-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.aanbod-card {
  position: relative; display: flex; flex-direction: column;
  padding: 34px 30px 28px; border-radius: var(--form-radius);
  background: var(--route-panel); color: var(--route-panel-ink);
  border: 1px solid var(--route-line);
  box-shadow: 0 1px 2px rgba(20,30,32,.05), 0 14px 36px rgba(20,30,32,.08);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .3s;
}
@media (hover: hover) and (pointer: fine) {
  .aanbod-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 2px 4px rgba(20,30,32,.06), 0 24px 52px rgba(20,30,32,.14);
    border-color: color-mix(in srgb, var(--route-accent) 45%, var(--route-line));
  }
}
.aanbod-card:active { transform: translateY(-2px) scale(.995); transition-duration: var(--motion-feedback); }
.aanbod-card:focus-within { border-color: var(--route-accent); }
.aanbod-card__num {
  font-size: .7rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--route-accent); margin-bottom: 14px;
}
.aanbod-card__duur {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  margin-bottom: 18px; padding: 8px 15px; border-radius: 100px;
  border: 1px solid color-mix(in srgb, var(--route-accent) 55%, transparent);
  font-family: var(--font-display); font-size: 1.05rem; line-height: 1;
}
.aanbod-card__duur svg { color: var(--route-accent); }
.aanbod-card h3 { font-size: clamp(1.45rem, 2vw, 1.75rem); line-height: 1.12; margin-bottom: 8px; color: inherit; }
.aanbod-card__belofte {
  font-family: var(--font-display); font-style: var(--emphasis-style); font-size: 1.08rem;
  color: var(--route-panel-soft); margin-bottom: 22px;
}
.aanbod-card__blok { padding-top: 16px; border-top: 1px solid var(--route-line); margin-bottom: 16px; }
.aanbod-card__blok h4, .aanbod-card .faq-body h4 {
  font-family: var(--font-body); font-size: .72rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--route-accent); margin-bottom: 6px;
}
.aanbod-card__blok p { font-size: .92rem; color: var(--route-panel-soft); line-height: 1.55; }
.aanbod-card details { border-top: 1px solid var(--route-line); border-bottom: 0; margin-top: auto; }
.aanbod-card summary { color: inherit; font-size: .9rem; padding: 16px 2px; }
@media (hover: hover) and (pointer: fine) {
  .aanbod-card summary:hover { color: var(--route-accent); }
}
.aanbod-card summary .chev { color: var(--route-accent); }
.aanbod-card .faq-body { color: var(--route-panel-soft); font-size: .9rem; padding: 0 2px 20px; max-width: none; }
.aanbod-card .faq-body h4 { margin-top: 14px; }
.aanbod-card .faq-body h4:first-child { margin-top: 0; }
.aanbod-card .faq-body p { margin-bottom: 8px; }
.aanbod-card .faq-body ul { padding-left: 18px; margin: 4px 0 10px; }
.aanbod-card .faq-body li { margin-bottom: 4px; }
.aanbod-card .faq-body a { color: var(--route-accent); }
.aanbod-card__cta {
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: 4px; padding-top: 18px; border-top: 1px solid var(--route-line);
  color: var(--route-accent); font-size: .88rem; font-weight: 600; text-decoration: none;
}
.aanbod-card__cta svg { transition: transform .3s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .aanbod-card__cta:hover svg { transform: translateX(4px); }
}
.aanbod-card__cta:focus-visible { outline: 3px solid var(--route-accent); outline-offset: 4px; border-radius: 6px; }
.aanbod-noot { margin: 40px auto 0; max-width: 640px; text-align: center; font-size: .9rem; color: var(--route-text-soft); }
.weken { list-style: none; display: grid; gap: 0; margin: 6px 0 14px; padding: 0; }
.weken li {
  display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: baseline;
  padding: 9px 0; border-top: 1px solid var(--route-line); font-size: .9rem;
}
.weken .nr { font-family: var(--font-display); font-style: var(--emphasis-style); color: var(--route-accent); }
.weken strong { display: block; font-weight: 600; color: var(--route-panel-ink); }
.onderscheid-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 36px; }
.onderscheid-card { padding: 28px; border-radius: var(--form-radius); background: var(--kaart); box-shadow: 0 0 0 1px rgba(36,46,53,.06); }
.onderscheid-card h3 { font-size: 1.2rem; margin-bottom: 10px; }
.onderscheid-card p { color: var(--ink-soft); font-size: .9rem; }
.klachten-grid {
  list-style: none;
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px 40px;
  margin-top: 8px;
}
.klachten-grid li {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: .95rem; color: var(--ink-soft);
  padding: 10px 0; border-bottom: 1px solid var(--line);
}
.klachten-grid li svg { color: var(--sage); flex-shrink: 0; margin-top: 5px; }

/* ---------- Cv-kaart (over-mij / about) ---------- */
.cv {
  margin-top: 32px;
  background: var(--wit);
  border: 1px solid var(--line);
  border-radius: var(--form-radius);
  box-shadow: 0 22px 54px rgba(36, 46, 53, .07);
  overflow: hidden;
}
.cv-lijst { padding: 6px 34px; }
.cv-row {
  display: grid; grid-template-columns: 116px 1fr; gap: 30px;
  padding: 22px 2px; align-items: baseline;
  border-bottom: 1px solid var(--line);
}
.cv-row:last-child { border-bottom: none; }
.cv-jaar {
  font-variant-numeric: tabular-nums;
  font-weight: 600; font-size: .82rem; letter-spacing: .04em;
  color: var(--sage); white-space: nowrap; padding-top: .12em;
}
.cv-titel { font-weight: 600; color: var(--dark); font-size: 1.05rem; line-height: 1.35; }
.cv-plek { color: var(--ink-soft); font-size: .92rem; margin-top: 4px; }
.cv-reg {
  background: var(--beige-deep); border-top: 1px solid var(--line);
  padding: 22px 34px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px;
}
.cv-reg-label {
  font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft); margin-right: 4px;
}
.cv-reg .chip {
  font-size: .82rem; color: var(--dark);
  background: var(--wit); border: 1px solid var(--line);
  padding: 6px 14px; border-radius: 100px;
}
@media (max-width: 980px) {
  .cv-lijst { padding: 4px 22px; }
  .cv-row { grid-template-columns: 84px 1fr; gap: 18px; padding: 20px 0; }
  .cv-jaar { font-size: .78rem; letter-spacing: .02em; }
  .cv-reg { padding: 20px 22px; }
}

.sessie-stappen { counter-reset: sessie; display: grid; gap: 0; margin-top: 10px; }
.sessie-stap {
  display: grid; grid-template-columns: 56px 1fr; gap: 22px;
  padding: 26px 0; border-top: 1px solid var(--line);
}
.sessie-stap:last-child { border-bottom: 1px solid var(--line); }
.sessie-stap .num {
  font-family: var(--font-display); font-style: var(--emphasis-style);
  font-size: 1.7rem; color: var(--sage); line-height: 1; padding-top: 2px;
}
.sessie-stap h3 { font-size: 1.12rem; margin-bottom: 6px; }
.sessie-stap p { font-size: .93rem; color: var(--ink-soft); }

.evidence {
  background: var(--beige-deep); border-radius: var(--form-radius);
  padding: 40px 44px; margin-top: 10px;
  display: flex; gap: 20px; align-items: flex-start;
}
.evidence svg { color: var(--sage); flex-shrink: 0; margin-top: 4px; }
.evidence p { font-size: .95rem; color: var(--dark-soft); }
.evidence strong { color: var(--dark); }

/* ---------- Juridische pagina's ---------- */
.legal { padding: 80px 0 100px; }
.legal .wrap { max-width: 760px; }
.legal h1 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); margin-bottom: 10px; }
.legal .datum { font-size: .84rem; color: var(--ink-soft); margin-bottom: 42px; }
.legal h2 { font-size: 1.35rem; margin: 42px 0 14px; }
.legal p, .legal li { color: var(--ink-soft); font-size: .96rem; margin-bottom: 14px; }
.legal ul { padding-left: 22px; margin-bottom: 14px; }
.legal li { margin-bottom: 8px; }
.legal a { color: var(--sage); }
.legal a.btn { color: var(--beige); } /* anders salie op donkerblauw (2,1:1) */
.legal-intro { font-size: 1.02rem; }

/* ---------- Footer ---------- */
footer {
  position: relative; overflow: hidden;
  background: var(--dark);
}
.footer-legal {
  padding-top: 28px; display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center;
  font-size: .78rem; opacity: .6;
  position: relative; z-index: 2;
}
/* Drie kolommen 1fr-auto-1fr: de crisisverwijzing staat exact in het midden,
   ongeacht de breedte van de tekst links en rechts. */
.footer-legal > span:nth-child(2) { text-align: center; }
.footer-legal > span:nth-child(3) { text-align: right; }
.footer-legal a { color: inherit; }


/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  section { padding: 104px 0; }
  .nav { grid-template-columns: auto 1fr; height: 74px; }
  .nav-left { display: none; }
  .menu-knop { display: block; }
  .nav-right { grid-column: 2; justify-content: flex-end; }
  .nav { column-gap: 20px; }
  .hero { padding: 80px 0 72px; }
  .hero-cards { flex-direction: column; margin-top: 52px; }
  .usp-strip { flex-direction: column; align-items: center; gap: 10px; margin-top: 48px; }
  .herken-panel { padding: 34px 26px; }
  .herken-list { grid-template-columns: 1fr; gap: 14px; }
  .over-grid, .aanmelden-grid, .pagina-hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .pagina-hero-visual { justify-self: start; }
  .methode-grid { grid-template-columns: 1fr; }
  .methode-grid { gap: 48px; }
  .stap { grid-template-columns: 46px 1fr; gap: 16px; }
  .klachten-grid { grid-template-columns: 1fr; }
  .evidence { padding: 28px 24px; }
  form { padding: 28px 22px; }
  .nav { height: 72px; }
  /* Kleiner logo en kleinere aanmeldknop in de header op mobiel. */
  .nav .logo-lockup img { height: 50px; }
  .nav .btn { font-size: .85rem; padding: 10px 20px; }
  .over-photo { max-width: 320px; justify-self: start; }
  .footer-legal { display: flex; justify-content: space-between; flex-wrap: wrap; }
  .footer-legal > span:nth-child(2), .footer-legal > span:nth-child(3) { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .menu-knop__line, .mobiel-menu, .mobiel-menu a { transition: none; }
}
html.noanim .menu-knop__line, html.noanim .mobiel-menu, html.noanim .mobiel-menu a {
  transition: none !important;
}

/* ---------- Kleuren van de drie routepagina's ----------
   Elke routekaart op de openingspagina heeft dezelfde kleur als de basis van
   haar landingspagina: saliegroen (Therapie), warm zand (Training) en donker
   petrol (Meditatie). De overgangslaag in site.js leest de kaartkleur uit. */
body[data-route] {
  --route-main: var(--therapy-main);
  --route-on: var(--beige);
  --route-on-soft: rgba(244, 244, 240, .78);
  --route-bg: var(--beige);
  --route-text-soft: var(--ink-soft);
  --route-panel: var(--kaart);
  --route-panel-ink: var(--ink);
  --route-panel-soft: var(--ink-soft);
  --route-line: rgba(36, 46, 53, .12);
  --route-accent: var(--sage);
  --route-strong: var(--therapy-deep);
  background: var(--route-bg);
}
body[data-route] main:focus { outline: none; }
/* De therapiesite volgt de routekleur: --sage wordt daar lokaal de khaki-familie,
   zodat kickers, iconen, trajectblok en knoppen erbij passen. */
body[data-route="therapie"] {
  --sage: var(--therapy-main);
  --sage-deep: var(--therapy-deep);
  --sage-soft: #857E68;
  --sage-tint: var(--therapy-tint);
}
body[data-route="therapie"] .verloop {
  background-image: linear-gradient(180deg,
    var(--therapy-main) 0, var(--therapy-main) 68%, #9A9484 84%, #D9D6CC 95%, var(--beige) 100%);
}
body[data-route="therapie"] .aanmelden { background: var(--therapy-deep); }
body[data-route="therapie"] .btn:not(.light):not(.contact-action) { background: var(--therapy-deep); }
@media (hover: hover) and (pointer: fine) {
  body[data-route="therapie"] .btn:not(.light):not(.contact-action):hover { background: var(--therapy-deep); }
}
body[data-route="therapie"] .tarief.featured { background: var(--therapy-deep); border-color: var(--therapy-deep); }
body[data-route="therapie"] .keuze input:checked + label { background: var(--therapy-deep); border-color: var(--therapy-deep); }

/* Handschrift-animatie naamblok op de therapiepagina */

body[data-route="training"] {
  --route-main: var(--training-main);
  --route-on: var(--training-ink);
  --route-on-soft: rgba(43, 56, 53, .72);
  --route-bg: var(--training-light);
  --route-text-soft: #55625E;
  --route-panel: var(--training-panel);
  --route-panel-ink: var(--training-ink);
  --route-panel-soft: #55625E;
  --route-line: rgba(43, 56, 53, .12);
  --route-accent: var(--sage);
  --route-strong: var(--sage);
  color: var(--training-ink);
}
body[data-route="meditatie"] {
  --route-main: var(--meditation-main);
  --route-on: var(--meditation-ink);
  /* Toegankelijkheid (24 september): zachte tekst en accent iets donkerder, zodat ze op salie
     (#C7CEAC) minstens 4,5:1 halen (WCAG 1.4.3). Was .74, #4A5B55 en #53623D (4,0 tot 4,4:1). */
  --route-on-soft: rgba(40, 59, 53, .84);
  --route-bg: var(--meditation-soft);
  --route-text-soft: #44544E;
  --route-panel: var(--meditation-soft);
  --route-panel-ink: var(--meditation-ink);
  --route-panel-soft: #44544E;
  --route-line: rgba(40, 59, 53, .14);
  --route-accent: #46532F;
  --route-strong: var(--meditation-deep);
  color: var(--meditation-ink);
}
/* Meditatie wisselt saffraan (hero, aanbod) af met warm crème (inhoud), en
   sluit af met een donker formuliervlak. */
body[data-route="meditatie"] .aanbod { background: var(--meditation-main); }
body[data-route="meditatie"] .aanbod-head .kicker { color: var(--meditation-ink); } /* volle dekking: met .75 haalde deze kleine tekst maar 3,9:1 */
body[data-route="meditatie"] .aanbod-head p, body[data-route="meditatie"] .aanbod-noot { color: rgba(40, 59, 53, .8); }
body[data-route="meditatie"] .aanbod-card { border-color: rgba(40, 59, 53, .1); box-shadow: 0 1px 2px rgba(40, 59, 53, .06), 0 18px 44px rgba(120, 78, 18, .18); }
body[data-route="meditatie"] .onderscheid-card { background: #FFFCF5; }
body[data-route="meditatie"] header .btn.light { background: var(--meditation-ink); color: var(--meditation-soft); }
body[data-route] header { background: var(--route-main); }
body[data-route] .nav-left a, body[data-route] .taal { color: var(--route-on); }
@media (hover: hover) and (pointer: fine) {
  body[data-route] header.site-header:not(.is-scrolled) .taal:hover { color: var(--route-on); }
}
body[data-route] .menu-knop__line { background: var(--route-on); }
body[data-route] .mobiel-menu { background: var(--route-main); }
body[data-route] .mobiel-menu a { color: var(--route-on); }
body[data-route="training"] header .btn.light { background: var(--route-on); color: var(--route-main); }
@media (hover: hover) and (pointer: fine) {
  body[data-route="training"] header .btn.light:hover, body[data-route="meditatie"] header .btn.light:hover { background: var(--wit); color: var(--dark); }
}
/* Het logo bestaat alleen als wit PNG; op de zandkleurige Training-header
   kleurt een filter het naar het donkere saliegroen van de tekst. */
body[data-route="training"] header .logo-lockup img,
body[data-route="meditatie"] header .logo-lockup img {
  filter: brightness(0) saturate(100%) invert(19%) sepia(11%) saturate(700%) hue-rotate(118deg) brightness(92%);
}
body[data-route] .inhoud { background: var(--route-bg); }
body[data-route] .inhoud .kicker { color: var(--route-accent); }
body[data-route] .inhoud h2, body[data-route] .inhoud h3 { color: inherit; }
body[data-route] .prose p { color: var(--route-text-soft); }
body[data-route] .prose a { color: var(--route-accent); }
body[data-route] .onderscheid-card { background: var(--route-panel); color: var(--route-panel-ink); box-shadow: 0 0 0 1px var(--route-line); }
body[data-route] .onderscheid-card p { color: var(--route-panel-soft); }
body[data-route="training"] .aanmelden { background: #3B4C48; }
/* PLAN-17: methodepagina’s delen data-route="therapie" en volgen het gekozen palet. */

@media (max-width: 980px) {
  .aanbod { padding: 80px 0 90px; }
  .aanbod-grid { grid-template-columns: 1fr; }
  .onderscheid-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .aanbod-card, .aanbod-card__cta svg { transition: none; }
  .aanbod-card:active { transform: none; }
@media (hover: hover) and (pointer: fine) {
  .aanbod-card:hover { transform: none; }
}
}
html.noanim .aanbod-card { transition: none !important; }


/* ---------- Openingspagina: landschapsvideo en drie routekaarten ----------
   De video (assets/video/sati-achtergrond-web.mp4) vult de opening; de poster
   (assets/video/sati-achtergrond-poster.webp) staat als achtergrond klaar zodat er
   nooit een leeg vlak is. Alle tekst en knoppen zijn echte HTML boven de video.
   De opbouw volgt de therapiesite: kop op dezelfde hoogte, lede, drie staande
   routekaarten (.portal-card). */
body.portal { background: var(--dark); color: var(--beige); }
/* De gedeelde header staat buiten de film, zodat hij boven de kaartovergang blijft. */
.portal-hero {
  --portal-vh: 1svh;
  position: relative; isolation: isolate;
  min-height: calc(100 * var(--portal-vh));
  display: flex; flex-direction: column;
}
.portal-media {
  --portal-image-position: 50% 50%;
  position: absolute; inset: 0; z-index: -1; overflow: hidden;
  contain: paint; transform: translateZ(0);
  background: #2C4A4B url(video/sati-achtergrond-poster.webp) var(--portal-image-position) / cover no-repeat;
}
.portal-media video {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: var(--portal-image-position);
  opacity: 0; transition: opacity .9s ease;
  pointer-events: none;
}
.portal-media video.is-playing { opacity: 1; }
/* Schilderij als achtergrond, te kiezen met de hero-knop (zie site.js). */
.portal-art { position: absolute; inset: 0; background: center / cover no-repeat; opacity: 0; transition: opacity var(--motion-text) var(--ease-out); }
.portal-art.is-shown { opacity: 1; }
.portal-art.is-instant { transition: none; }
.portal-media.is-art::after {
  background:
    linear-gradient(rgba(18, 32, 34, .14), rgba(18, 32, 34, .14)),
    radial-gradient(60% 34% at 50% 34%, rgba(18, 32, 34, .34), transparent 100%),
    linear-gradient(180deg, rgba(18, 32, 34, .40) 0%, rgba(18, 32, 34, .10) 22%, rgba(18, 32, 34, 0) 48%, rgba(18, 32, 34, .24) 100%);
}
.hero-switch {
  position: absolute; z-index: 5; top: calc(var(--header-height, 88px) + 12px); right: var(--page-right, 28px);
  display: inline-flex; align-items: center; gap: 2px; padding: 3px;
  border-radius: var(--field-radius); color: var(--wit); font-size: .74rem; line-height: 1;
  background: rgba(18, 32, 34, .34); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(250, 251, 248, .16);
}
.hero-switch__label { padding-inline: 6px; white-space: nowrap; max-width: 44vw; overflow: hidden; text-overflow: ellipsis; }
.hero-switch__knop { display: grid; place-items: center; width: 26px; height: 26px; border: 0; border-radius: var(--button-radius); background: transparent; color: inherit; cursor: pointer; transition: background-color var(--motion-feedback) ease; }
@media (hover: hover) and (pointer: fine) { .hero-switch__knop:hover { background: rgba(250, 251, 248, .16); } }
.hero-switch__knop:focus-visible { outline: 2px solid var(--contact-hover); outline-offset: 1px; }
@media (pointer: coarse) { .hero-switch__knop { width: 34px; height: 34px; } } /* kleiner op verzoek van Jasper; ruim boven het minimum van 24 px */
@media (prefers-reduced-motion: reduce) { .portal-art { transition: none; } }
html.noanim .portal-art { transition: none; }
/* Alleen bovenin (header) en onderin (kaarten) een licht verloop; het landschap
   zelf blijft licht. */
.portal-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 34% at 50% 34%, rgba(18, 32, 34, .30), transparent 100%),
    linear-gradient(180deg,
    rgba(18, 32, 34, .36) 0%, rgba(18, 32, 34, .10) 22%,
    rgba(18, 32, 34, 0) 48%, rgba(18, 32, 34, .22) 100%);
}
.portal-body { flex: 1; padding: 200px 0 96px; text-align: center; }
.portal-intro { max-width: 980px; margin: 0 auto; }
.portal-intro h1 {
  font-size: clamp(2.4rem, 4.6vw, 3.7rem); color: var(--wit);
  max-width: none; margin: 0 auto; white-space: nowrap;
  text-shadow: 0 2px 20px rgba(18, 32, 34, .34);
}
.portal-intro p {
  margin: 22px auto 0; max-width: 58em;
  font-size: 1.12rem; font-weight: 500; line-height: 1.6; color: #fff;
  text-shadow: 0 1px 3px rgba(10, 20, 22, .45), 0 2px 22px rgba(10, 20, 22, .55);
  text-wrap: balance;
}
.portal-routes {
  list-style: none; margin: 56px auto 0; padding: 0;
  display: flex; justify-content: center; align-items: center; gap: 26px;
  perspective: 1100px;
}
.portal-item { min-width: 0; perspective: 1100px; }
@keyframes portal-in { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes portal-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(6px); } }
/* PLAN-17: muiskanteling op een aparte laag, los van entree en illustraties. */
.portal-tilt { position: relative; transform: rotateX(0deg) rotateY(0deg); transition: transform 250ms var(--ease-out); }
.portal-tilt.is-tilting { transition-duration: var(--motion-feedback); will-change: transform; }
.portal-tilt.tilt-reset { transition: none; }
.route-portal-item { perspective: 1100px; }
.route-portal-item > .portal-tilt { height: 100%; }
@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) {
  .portal-tilt { transform: none !important; transition: none !important; }
}
html.noanim .portal-tilt { transform: none !important; transition: none !important; }
.portal-card {
  position: relative; display: block; text-align: left; container-type: inline-size;
  width: 250px; aspect-ratio: 4 / 5.4;
  border-radius: var(--form-radius); overflow: hidden;
  background: var(--card-bg); color: var(--card-ink); text-decoration: none;
  border: 1px solid var(--card-line);
  /* Diepe, zachte schaduw: de kaart hangt vóór het landschap. */
  box-shadow: var(--card-shadow-strong);
  transform: none;
}
.portal-item--mid .portal-card { width: 280px; aspect-ratio: 4 / 5.6; }
.portal-card--therapie { --card-bg: var(--therapy-main); --card-ink: var(--therapy-on, var(--beige)); --card-line: color-mix(in srgb, var(--card-ink) 16%, transparent); --card-accent: var(--card-ink); }
.portal-card--training { --card-bg: var(--training-main); --card-ink: var(--training-ink); --card-line: rgba(43, 56, 53, .14); --card-accent: var(--sage); }
.portal-card--meditatie { --card-bg: var(--meditation-main); --card-ink: var(--meditation-ink); --card-line: rgba(40, 59, 53, .14); --card-accent: var(--meditation-ink); }
.portal-card:focus-visible { outline: 3px solid var(--wit); outline-offset: 5px; }
/* Eigen schaal op de SVG, los van entree en interne rotatie. */
.portal-card__art {
  --hover: 0; --gloed: .55;
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  color: var(--card-accent); pointer-events: none;

}
/* Rustige zoom; geen verplaatsing of kanteling van het kaartvlak. */
@media (hover: hover) and (pointer: fine) {
  html:not(.noanim) .portal-card:is(:hover, :focus-visible) .art-zoom { transform: scale(1.07); }
}
.portal-card__inner {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 0 20px 20px;
  transition: opacity var(--motion-feedback) ease;
}
.portal-item--mid .portal-card__inner { padding: 0 24px 24px; }
.portal-card :is(h2,h3) { font-size: 1.42rem; line-height: 1.1; margin: 0 0 5px; color: inherit; }
.portal-item--mid .portal-card :is(h2,h3) { font-size: 1.55rem; }
.portal-card__label { display: block; font-size: .62rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; opacity: .88; margin-bottom: 10px; } /* was .72: 3,6:1; nu 4,5:1 of meer */
.portal-card p { font-size: .8rem; line-height: 1.45; opacity: .92; margin-bottom: 14px; text-wrap: pretty; }
.portal-card__action { display: inline-flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 600; letter-spacing: .01em; }
.portal-card__action svg { flex-shrink: 0; transition: transform .35s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .portal-card:hover .portal-card__action svg { transform: translateX(4px); }
}

/* Overgangslaag: de gekozen kaart groeit vanuit haar eigen plek tot het scherm
   gevuld is (clip-path), de kaarttitel reist mee naar de titelpositie van de
   bestemming en daarna volgt de echte navigatie. */
.route-veil { position: fixed; inset: 0; pointer-events: none; }
body.is-leaving .portal-item, body.is-leaving .portal-intro > * { animation: portal-out .45s ease forwards; }
body.is-leaving .portal-item.is-chosen { animation: none; opacity: 1; transform: none; }
body.is-leaving .portal-item.is-chosen .portal-card > * { opacity: 0; transition: opacity var(--motion-feedback) ease; }

@media (max-width: 980px) {
  body.portal .nav { height: 72px; }
  .portal-hero { min-height: 0; }
  /* Op kleine schermen vult de video alleen het eerste scherm; de kaarten
     staan daaronder op een effen vlak, zodat de uitsnede rustig blijft. */
  .portal-media { inset: 0 0 auto 0; height: calc(100 * var(--portal-vh)); }
  .portal-media { --portal-image-position: 8% 50%; }
  .portal-media::after {
    background: linear-gradient(180deg,
      rgba(18, 32, 34, .42) 0%, rgba(18, 32, 34, .12) 30%,
      rgba(18, 32, 34, 0) 56%, rgba(27, 49, 48, 0) 82%, var(--meditation-deep) 100%);
  }
  .portal-body { padding: 80px 0 72px; }
  .portal-intro { min-height: calc(100 * var(--portal-vh) - 72px - 80px - 60px); }
  .portal-intro h1 { font-size: clamp(2.1rem, 9vw, 2.8rem); white-space: normal; }
  .portal-intro p br { display: none; }
  .portal-routes { flex-direction: column; margin-top: 52px; gap: 20px; }
  .portal-card, .portal-item--mid .portal-card { width: min(320px, 82vw); aspect-ratio: 4 / 5; }
  .portal-card__inner, .portal-item--mid .portal-card__inner { padding: 0 22px 22px; }
  .portal-card p { font-size: .88rem; }
}
@media (max-width: 980px) and (hover: none) {
  .portal-card:active { transform: scale(.98); }
}

@media (prefers-reduced-motion: reduce) {
  .portal-item, .portal-intro p { animation: none; }
  .portal-card, .portal-tilt, .portal-card__art, .portal-card__action svg, .portal-card > * { transition: none; }
  @media (hover: hover) and (pointer: fine) {
  html:not(.noanim) .portal-card:hover .art-zoom { transform: none !important; transition: none; }
}
  .portal-card:active { transform: none; }
@media (hover: hover) and (pointer: fine) {
  .portal-card:hover { transform: none; }
}
  .portal-media video { transition: none; }
}
html.noanim .portal-item, html.noanim .portal-intro p { animation: none !important; }
html.noanim .portal-card, html.noanim .portal-card__art { transition: none !important; transform: none !important; }

/* ========================================================================
   PLAN-17: drie samenhangende paletten, persoonlijke CTA en gedeelde header.
   De donkere merkbasis blijft gelijk; routes en hun kaarten volgen de proef.
   ======================================================================== */
html[data-style="gelaagd"] {
  /* Therapie: Terracotta, gekozen door Jasper op 25 september (was Abrikoos). */
  --therapy-main: #E3A98E; --therapy-deep: #7A3B28; --therapy-tint: #F2D6C8; --therapy-light: #FDF5F0; --therapy-soft: #E9C0AB;
  --therapy-on: #4A2A1F; --therapy-on-soft: #633A2C;
  --training-main: #EBE5D8; --training-ink: #3E4549; --training-light: #FAF8F2; --training-panel: #FFFEFA; --training-accent: #5A5C52;
  --meditation-main: #C7CEAC; --meditation-ink: #343F30; --meditation-soft: #F5F6EA; --meditation-deep: #374634; --meditation-accent: #53623D;
}
html { background: var(--dark); }
body[data-route="therapie"] { --sage-soft: var(--therapy-soft); }
body[data-route="therapie"] .verloop {
  background-image: linear-gradient(180deg, var(--therapy-main) 0%, var(--therapy-main) 68%, var(--therapy-soft) 84%, var(--therapy-tint) 95%, var(--therapy-light) 100%);
}
body[data-route="training"] { --route-accent: var(--training-accent); --route-strong: var(--training-accent); }
body:is([data-route="training"], [data-route="meditatie"]) .aanmelden { background: var(--training-accent); }
body[data-route="meditatie"] .onderscheid-card { background: var(--meditation-soft); }
body[data-route="meditatie"] .aanbod-card { border-color: var(--route-line); box-shadow: 0 2px 3px rgba(0,0,0,.04), 0 18px 44px rgba(0,0,0,.10); }
body[data-route="training"] .aanbod-card:nth-child(2) { background: color-mix(in srgb, var(--training-main) 20%, var(--training-panel)); }
body[data-route="training"] .aanbod-card:nth-child(3) { background: color-mix(in srgb, var(--training-main) 38%, var(--training-panel)); }
body[data-route="meditatie"] .aanbod-card:nth-child(2) { background: color-mix(in srgb, var(--meditation-main) 25%, var(--meditation-soft)); }
.therapy-hero { background: var(--therapy-main); }

/* Eén header boven de kleurlaag, ook tijdens navigatie. */
body header.site-header {
  position: sticky; top: 0; z-index: 1000; isolation: isolate;
  height: var(--header-height); background: transparent; color: var(--wit); view-transition-name: site-header;
}
body header.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--dark); transform-origin: top; pointer-events: none;
  transition: opacity var(--motion-layout) ease, transform var(--motion-layout) var(--ease-out);
}
body header.site-header .nav { height: var(--header-height); transition: transform var(--motion-layout) var(--ease-out); }
body header.site-header .logo-lockup img {
  filter: none; width: auto; height: 63px; transform-origin: 10% 50%;
  transition: transform var(--motion-layout) var(--ease-out), opacity var(--motion-feedback);
}
body header.site-header.is-scrolled::before { transform: scaleY(.842105); }
body header.site-header.is-scrolled .nav { transform: translateY(-6px); }
body header.site-header.is-scrolled .logo-lockup img { transform: translateX(-10%) scale(.8); }
html[data-header="transparent"] body.portal header.site-header { margin-bottom: calc(-1 * var(--header-height)); }
html[data-header="transparent"] body.portal header.site-header:not(.is-scrolled)::before { opacity: 0; }
html[data-header="transparent"] body.portal header.site-header:not(.is-scrolled) .nav-route-link,
html[data-header="transparent"] body.portal header.site-header:not(.is-scrolled) .taal { text-shadow: 0 1px 10px rgba(0,0,0,.4); }
body header.site-header .nav-left a, body header.site-header .taal { color: var(--wit); }
body header.site-header .nav .btn.light { background: var(--wit); color: var(--dark); }
@media (hover: hover) and (pointer: fine) {
  body header.site-header .nav .btn.light:hover { background: var(--therapy-tint); }
}
body header.site-header .menu-knop__line { background: var(--wit); }
body header.site-header .nav-left { gap: 22px; }
.nav-route { position: relative; display: flex; align-items: center; gap: 2px; }
.nav-route > .nav-route-link {
  position: relative; min-height: 44px; display: inline-flex; align-items: center;
  font-size: .86rem; letter-spacing: .01em; transition: transform var(--motion-fade) var(--ease-out);
}
.nav-route-link::after { content: none; }
.nav-route-link[aria-current="page"] { text-decoration: none !important; }
.nav-dropdown { border: 0; }
.nav-dropdown > summary { position: relative; display: flex; align-items: center; justify-content: center; padding: 0; width: 32px; height: 40px; list-style: none; cursor: pointer; color: var(--wit); border: 0; box-shadow: none; }
.nav-dropdown > summary::before { content: ""; position: absolute; width: 26px; height: 26px; border-radius: 6px; background: rgba(255,255,255,.1); opacity: 0; transition: opacity var(--motion-feedback) ease; }
.nav-dropdown > summary::after { display: none; }
.nav-dropdown > summary::-webkit-details-marker { display: none; }
.nav-dropdown[open] > summary { background: transparent; }
@media (hover: hover) and (pointer: fine) {
  .nav-dropdown > summary:hover { background: transparent; }
}
.nav-dropdown[open] > summary::before { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .nav-dropdown > summary:hover::before { opacity: 1; }
}
.nav-dropdown > summary svg { display: block; flex: 0 0 14px; width: 14px; height: 14px; margin: 0; transition: transform var(--motion-fade) var(--ease-out); }
.nav-dropdown[open] > summary svg { transform: rotate(180deg); }
.nav-submenu {
  position: absolute; top: calc(100% + 12px); left: -16px; min-width: 240px; padding: 8px 16px 20px;
  --menu-bg: var(--wit); --menu-ink: var(--dark); --menu-line: var(--line);
  --menu-radius: var(--field-radius); --menu-top: 0px; --menu-origin: 50%;
  --menu-ease: var(--ease-drawer);
  isolation: isolate; background: transparent; color: var(--menu-ink);
}
.nav-submenu::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
/* Doorlopende oversteek naar de links, zonder wachttijd bij wegbewegen. */
.site-header .nav-dropdown[open]::before { content: ""; position: absolute; top: 100%; left: -16px; width: 240px; height: 16px; }
.nav-submenu::after {
  content: ""; position: absolute; inset: var(--menu-top) 0 0; z-index: -1; pointer-events: none;
  background: var(--menu-bg); border-radius: var(--menu-radius);
  clip-path: ellipse(150% 150% at var(--surface-origin, var(--menu-origin)) 0);
}
body header.site-header .nav-submenu a { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 6px 0; min-height: 40px; color: var(--menu-ink); font-size: .86rem; letter-spacing: 0; border-top: 1px solid var(--menu-line); }
@media (min-width: 981px) {
  .site-header.is-scrolled .nav-submenu {
    --menu-bg: var(--dark); --menu-ink: var(--wit); --menu-line: rgba(250,251,248,.16);
    --menu-radius: 0 0 var(--field-radius) var(--field-radius); --menu-top: -12px;
    top: calc(100% + 4px);
  }
  /* Holle schouders verbinden het paneel met de header, zonder rechte hoeken. */
  .site-header.is-scrolled .nav-submenu::before {
    top: -12px; left: -24px; right: -24px; height: 32px;
    --surface-origin: calc(var(--menu-origin) + 24px);
    background:
      radial-gradient(circle 24px at left bottom, transparent calc(100% - .5px), var(--menu-bg) 100%) left top / 24px 24px no-repeat,
      radial-gradient(circle 24px at right bottom, transparent calc(100% - .5px), var(--menu-bg) 100%) right top / 24px 24px no-repeat;
  }
}
.nav-submenu a svg { width: 16px; height: 16px; opacity: .5; transition: transform var(--motion-fade) var(--ease-out); }
/* Hover: warmgeel alleen op donker. Op het witte paneel de donkere tint van de route, goed leesbaar. */
.nav-left > .nav-route:nth-child(1) .nav-submenu { --submenu-hover: var(--therapy-deep); }
.nav-left > .nav-route:nth-child(2) .nav-submenu { --submenu-hover: var(--training-accent); }
.nav-left > .nav-route:nth-child(3) .nav-submenu { --submenu-hover: var(--meditation-accent); }
@media (hover: hover) and (pointer: fine) {
  body header.site-header .nav-left .nav-route .nav-submenu a:hover { color: var(--submenu-hover, var(--menu-ink)); }
  body header.site-header.is-scrolled .nav-left .nav-route .nav-submenu a:hover,
  .mobiel-menu .nav-submenu a:hover {
    color: var(--contact-hover);
  }
  .nav-submenu a:hover svg { transform: translateX(3px); opacity: 1; }
}
body header.site-header .nav-left .nav-route .nav-submenu a:focus-visible { color: var(--submenu-hover, var(--menu-ink)); }
body header.site-header.is-scrolled .nav-left .nav-route .nav-submenu a:focus-visible,
.mobiel-menu .nav-submenu a:focus-visible {
  color: var(--contact-hover);
}
/* Vloeiende vorm van beide desktopsubmenu's (site.js tekent het pad): wit en los bovenaan,
   donker met holle schouders na scrollen. Zonder JavaScript blijven de CSS-panelen staan. */
.nav-submenu__blob { display: none; }
html.js-enabled .nav-dropdown .nav-submenu > .nav-submenu__blob { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
@media (min-width: 981px) {
  .site-header.is-scrolled .nav-submenu { --menu-line: rgba(250,251,248,.1); }
  .site-header .nav-submenu__blob { display: block; position: absolute; left: 0; top: 0; z-index: -1; overflow: visible; pointer-events: none; fill: var(--menu-bg); }
  html.js-enabled .site-header .nav-submenu.has-blob::after { display: none; }
  html.js-enabled .site-header.is-scrolled .nav-submenu.has-blob::before { background: none; }
  html.js-enabled .site-header .nav-submenu.is-blobbing { clip-path: var(--blob-clip, none); }
  html.js-enabled .site-header .nav-dropdown.is-menu-visible .nav-submenu > * {
    transition-delay: calc(var(--motion-menu-blob) * .3 + var(--menu-i, 0) * var(--motion-menu-step));
  }
}
[id] { scroll-margin-top: calc(var(--header-compact-height) + 24px); }
.skip-link { z-index: 1100; }

/* Foto en uitnodiging, royaal maar met één duidelijke actie. */
.persoonlijk-contact { background: var(--therapy-light); color: var(--ink); }
body[data-route="training"] .persoonlijk-contact { background: var(--training-light); }
body[data-route="meditatie"] .persoonlijk-contact { background: var(--meditation-soft); }
.persoonlijk-contact__grid { display: grid; grid-template-columns: .92fr 1.08fr; gap: 96px; align-items: center; }
.persoonlijk-contact__portret { position: relative; overflow: hidden; border-radius: var(--block-radius); aspect-ratio: 4 / 4.5; background: var(--dark); }
.persoonlijk-contact__portret img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; outline: 1px solid rgba(0,0,0,.1); outline-offset: -1px; }
.persoonlijk-contact__portret figcaption { position: absolute; bottom: 0; left: 0; right: 0; padding: 64px 32px 28px; background: linear-gradient(transparent, rgba(0,0,0,.6)); color: var(--wit); font-size: .94rem; }
.persoonlijk-contact__portret figcaption span { display: block; font-size: .7rem; letter-spacing: .05em; opacity: .8; margin-top: 3px; }
.persoonlijk-contact__tekst .kicker { color: var(--route-accent, var(--therapy-main)); }
.persoonlijk-contact__tekst h2 { font-size: clamp(2rem, 3.6vw, 3rem); margin: 18px 0 26px; max-width: 12em; }
.persoonlijk-contact__tekst > p { color: var(--ink-soft); max-width: 32em; font-size: 1.03rem; line-height: 1.75; }
.persoonlijk-contact__tekst > .persoonlijk-contact__reactie { font-size: .75rem; margin-top: 24px; }
.algemeen-contact, .contact-gradient--film {
  background:
    radial-gradient(ellipse at 6% 12%, var(--contact-sky), transparent 62%),
    radial-gradient(ellipse at 93% 90%, var(--contact-apricot), transparent 60%),
    radial-gradient(ellipse at 66% 8%, var(--contact-rose), transparent 65%),
    var(--contact-cream);
  color: var(--dark);
}
.algemeen-contact::before { display: none; }
.algemeen-contact h2 { color: var(--dark); }
.algemeen-contact .kicker, .algemeen-contact .lede { color: var(--ink); }
.algemeen-contact form { background: rgba(250,251,248,.94); box-shadow: 0 3px 8px rgba(36,46,53,.05), 0 24px 64px rgba(36,46,53,.14); }
.algemeen-contact h2 { font-size: clamp(2rem, 3vw, 2.7rem); margin-bottom: 24px; }
.algemeen-contact .lede { max-width: 26em; }
.algemeen-contact .aanmelden-grid > div > .form-note { color: var(--ink); }
.algemeen-contact form .form-note { color: var(--ink-soft); }
.veld select { appearance: none; min-height: 44px; padding-right: 42px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%234F5B63' stroke-width='1.5'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 15px center; }
.veld label .optioneel { font-weight: 400; letter-spacing: 0; opacity: .75; }
.veld select:focus-visible, .contact-formulier:focus-visible { outline: 3px solid var(--therapy-soft); outline-offset: 4px; }

/* Drie originele kaartcomposities. Alleen de gekozen SVG-groep wordt getekend. */
/* Gelijke ruimte boven en onder de kaarten; de kop staat in de bovenste rij.
   Hoogte én breedte begrenzen de kaartmaat, zodat laptop en tablet blijven passen. */
.portal-hero { min-height: calc(100 * var(--portal-vh) - var(--header-height)); }
.portal-body {
  --portal-offset: clamp(46px, calc(2.5 * var(--portal-vh) + 32px), 64px);
  --portal-gap: clamp(14px, 2.2vw, 28px);
  --portal-card-width: clamp(220px, min(26vw, calc(36 * var(--portal-vh))), 320px);
  width: 100%; min-height: 0; flex: 0 0 auto; height: calc(100 * var(--portal-vh) - var(--header-height)); padding: 24px 28px;
  display: grid; grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
}
.portal-intro { width: 100%; align-self: end; padding-bottom: clamp(18px, calc(2.5 * var(--portal-vh)), 40px); }
.portal-intro h1 { font-size: clamp(2rem, min(4.6vw, calc(5 * var(--portal-vh))), 3.7rem); white-space: normal; }
.portal-intro p { font-size: clamp(.92rem, calc(1.8 * var(--portal-vh)), 1.12rem); margin-top: clamp(12px, calc(1.5 * var(--portal-vh)), 22px); }
.portal-intro { grid-row: 1; }
.portal-routes { grid-row: 2; }
.portal-routes {
  width: min(100%, calc(var(--portal-card-width) * 3.08 + var(--portal-gap) * 2));
  margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr) minmax(0, 1fr); gap: var(--portal-gap);
}
.portal-card, .portal-item--mid .portal-card { width: 100%; }
.portal-card :is(h2,h3) { font-size: clamp(1.42rem, 2vw, 1.75rem); }
.portal-item--mid .portal-card :is(h2,h3) { font-size: clamp(1.55rem, 2.15vw, 1.9rem); }
.portal-card p { font-size: clamp(.8rem, 4.4cqw, .92rem); }
html[data-header="transparent"] .portal-hero { min-height: calc(100 * var(--portal-vh)); }
html[data-header="transparent"] .portal-body { height: calc(100 * var(--portal-vh)); padding-top: calc(var(--header-height) + 24px + var(--portal-offset) * 2); }
.portal-card__number { position: absolute; top: 22px; left: 24px; font-size: .65rem; font-variant-numeric: tabular-nums; letter-spacing: .1em; opacity: .55; }
.portal-card__art { opacity: .85; }
.portal-card .art-zoom { transform-box: view-box; transform-origin: 200px 200px; transform: scale(1); transition: transform 900ms var(--ease-out); }
.portal-card--therapie .art-zoom { transform-origin: 200px 198px; }
.portal-card--meditatie .art-zoom { transform-origin: 200px 185px; }
html.noanim .portal-card .art-zoom { transform: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { .portal-card .art-zoom { transform: none !important; transition: none !important; } }
.art-variant { display: none; }
html[data-style="gelaagd"] .art-gelaagd { display: inline; }
html[data-style="gelaagd"] .portal-card { border-radius: 42px 12px 12px 12px; }
.art-variant * { transform-box: fill-box; transform-origin: center; }
.art-draw path { stroke-dasharray: 520; animation: contour-trace 12s ease-in-out infinite; animation-delay: calc(var(--n) * -.7s); }
.art-align path { animation: contour-align 7s ease-in-out infinite alternate; animation-delay: calc(var(--n) * -.6s); }
.art-open circle { animation: contour-open 8s ease-in-out infinite alternate; animation-delay: calc(var(--n) * -.8s); }
/* Vijfvoudige symmetrie; afstand tot het hart is de straal gedeeld door phi. */
.golden-petals {
  transform-box: view-box; transform-origin: 0 0;
  fill: currentColor; fill-opacity: .045;
  animation: therapy-turn 48s linear infinite;
}
.art-stack { animation: layer-stack 7s ease-in-out infinite alternate; }
.portal-card { --art-merge-duration: 1200ms; }
.stack-turn { transform-box: view-box; transform-origin: 200px 200px; transform: rotate(0deg); }
.stack-sheet { transform: translateY(0); transition: transform var(--art-merge-duration, 1200ms) var(--ease-out); }
.golden-petals circle { transform: translate(0,0); transition: transform var(--art-merge-duration, 1200ms) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  html:not(.noanim) .portal-card--training:is(:hover, :focus-visible) .stack-sheet { transform: translateY(var(--merge-y)); }
  html:not(.noanim) .portal-card--training:is(:hover, :focus-visible) .art-stack { animation-play-state: paused; }
  html:not(.noanim) .portal-card--therapie:is(:hover, :focus-visible) .golden-petals circle:nth-child(1) { transform: translate(0px,38.318px); }
  html:not(.noanim) .portal-card--therapie:is(:hover, :focus-visible) .golden-petals circle:nth-child(2) { transform: translate(-36.443px,11.841px); }
  html:not(.noanim) .portal-card--therapie:is(:hover, :focus-visible) .golden-petals circle:nth-child(3) { transform: translate(-22.523px,-31px); }
  html:not(.noanim) .portal-card--therapie:is(:hover, :focus-visible) .golden-petals circle:nth-child(4) { transform: translate(22.523px,-31px); }
  html:not(.noanim) .portal-card--therapie:is(:hover, :focus-visible) .golden-petals circle:nth-child(5) { transform: translate(36.443px,11.841px); }
}
html.noanim .stack-sheet, html.noanim .stack-turn, html.noanim .golden-petals circle { transition: none !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  .stack-sheet, .stack-turn, .golden-petals circle { transition: none !important; transform: none !important; }
}
.art-breathe { transform-box: fill-box; transform-origin: center; animation: layer-breathe 10s ease-in-out infinite; }
.art-orbit { transform-box: fill-box; transform-origin: center; animation: light-orbit 18s ease-in-out infinite alternate; }
.art-connect path:first-child { stroke-dasharray: 100; animation: light-connect 9s ease-in-out infinite; }
.art-connect circle { animation: light-pulse 5s ease-in-out infinite alternate; animation-delay: calc(var(--n) * -.8s); }
.art-wave path { animation: light-wave 9s ease-in-out infinite alternate; animation-delay: calc(var(--n) * -.65s); }
@keyframes contour-trace { 0%,100% { stroke-dashoffset: 70; opacity: .3; } 50% { stroke-dashoffset: 0; opacity: .85; } }
@keyframes contour-align { from { transform: translateY(12px); opacity: .3; } to { transform: translateY(-8px); opacity: .9; } }
@keyframes contour-open { from { transform: scale(.86); opacity: .25; } to { transform: scale(1.06); opacity: .8; } }
@keyframes therapy-turn { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes layer-stack { from { transform: translateY(-9px); opacity: .45; } to { transform: translateY(9px); opacity: .9; } }
@keyframes layer-breathe { 0%,100% { transform: scale(.88); } 50% { transform: scale(1.04) rotate(8deg); } }
@keyframes light-orbit { from { transform: rotate(-18deg); } to { transform: rotate(22deg); } }
@keyframes light-connect { 0%,100% { stroke-dashoffset: 90; } 55%,75% { stroke-dashoffset: 0; } }
@keyframes light-pulse { from { opacity: .3; transform: scale(.7); } to { opacity: 1; transform: scale(1); } }
@keyframes light-wave { from { transform: translateY(-6px) scaleY(.8); opacity: .35; } to { transform: translateY(6px) scaleY(1.15); opacity: .8; } }

/* Een schaalbaar kleurvlak, zonder een tweede tintlaag of bewegende titel. */
.route-veil { z-index: 900; transform-origin: 0 0; will-change: transform; }
body.is-leaving .portal-card { pointer-events: none; }
body.is-leaving .art-variant * { animation-play-state: paused; }
@view-transition { navigation: auto; }
::view-transition { pointer-events: none; }
::view-transition-group(site-header) { z-index: 10; animation: none; }
::view-transition-old(site-header) { display: none; }
::view-transition-new(site-header) { animation: none; opacity: 1; }
::view-transition-old(root) { animation: none; }
::view-transition-new(root) { animation: page-arrive .18s ease-out both; }
@keyframes page-arrive { from { opacity: 0; } to { opacity: 1; } }

/* Tijdelijk vergelijken op localhost / lokaal wifi-adres. */

/* Basisbediening op smal scherm; de uitgebreide mobiele ontwerpronde volgt. */
@media (max-width: 980px) {
  :root { --header-height: calc(68px + env(safe-area-inset-top, 0px)); --header-compact-height: calc(60px + env(safe-area-inset-top, 0px)); }
  body header.site-header .logo-lockup img { height: 54px; }
  body header.site-header.is-scrolled .logo-lockup img { transform: translateX(-10%) scale(.809); }
  body header.site-header.is-scrolled::before { transform: scaleY(.882353); }
  body header.site-header.is-scrolled .nav { transform: translateY(-4px); }
  body header.site-header .nav-left { display: none; }
  body .mobiel-menu { z-index: 1001; background: var(--dark); overflow-y: auto; }
  .site-header .menu-knop.open { z-index: 1010; position: relative; top: auto; right: auto; }
  body:has(.mobiel-menu.open) header.site-header { z-index: 1010; }
  .mobiel-menu nav { text-align: left; gap: 12px; padding: 96px 0 60px; }
  .mobiel-menu .nav-route { display: grid; grid-template-columns: 1fr 44px; border-bottom: 1px solid rgba(255,255,255,.15); padding: 10px 0; }
  .mobiel-menu a { justify-content: flex-start; color: var(--wit) !important; }
  .mobiel-menu .nav-route-link { font-size: 1.5rem; }
  .mobiel-menu .nav-dropdown { display: contents; }
  .mobiel-menu .nav-dropdown summary { grid-column: 2; grid-row: 1; }
  .mobiel-menu .nav-submenu { position: static; min-width: 0; grid-column: 1 / -1; background: transparent; padding: 10px 0; box-shadow: none; }
  .mobiel-menu .nav-submenu::after { display: none; }
  .mobiel-menu .nav-dropdown:not([open]) .nav-submenu { display: none; }
  .mobiel-menu .nav-submenu a { min-height: 44px; font: inherit; font-size: .9rem; gap: 16px; opacity: .8; }
  .persoonlijk-contact__grid { grid-template-columns: 1fr; gap: 42px; }
  .persoonlijk-contact__portret { max-width: 450px; width: 100%; aspect-ratio: 1; }
  .persoonlijk-contact__tekst h2 { font-size: 2.2rem; }
  .portal-hero { min-height: 0; }
  .portal-body { padding: 80px 0 72px; }
  .portal-media { height: calc(100 * var(--portal-vh) - 72px); }
  [id] { scroll-margin-top: 92px; }
}
@media (prefers-reduced-motion: reduce) {
  .art-variant *, .nav-submenu, .nav-submenu > * { animation: none !important; }
  .nav-dropdown > summary svg { transition: none; }
  @view-transition { navigation: none; }
}
html.noanim .art-variant *, html.noanim .nav-submenu, html.noanim .nav-submenu > * { animation: none !important; }
html.noanim::view-transition-group(*), html.noanim::view-transition-old(*), html.noanim::view-transition-new(*) { animation: none !important; }

/* Zonder JavaScript blijven de inhoud en de navigatielinks leesbaar. */
html:not(.js-enabled) .reveal, html:not(.js-enabled) [data-stagger] > *,
html:not(.js-enabled) .hero h1 .w { opacity: 1; transform: none; filter: none; animation: none; }
@media (max-width: 980px) {
  html:not(.js-enabled) body header.site-header .nav { height: auto; min-height: 72px; padding-top: 12px; padding-bottom: 12px; row-gap: 12px; }
  html:not(.js-enabled) body header.site-header .nav-left { display: flex; grid-column: 1 / -1; grid-row: 2; justify-content: space-between; gap: 4px; flex-wrap: wrap; }
  html:not(.js-enabled) .nav-submenu { left: auto; right: 0; min-width: min(290px, 85vw); }
}

/* PLAN-17, feedbackronde 2: tablet blijft onderdeel van de gecentreerde opening. */
@media (min-width: 700px) and (max-width: 980px) {
  .portal-hero { min-height: calc(100 * var(--portal-vh) - var(--header-height)); }
  .portal-body { padding: 24px 28px; }
  .portal-intro { min-height: 0; }
  .portal-intro h1 { font-size: clamp(2rem, 4.6vw, 2.8rem); }
  .portal-media { inset: 0; height: auto; }
  .portal-media { --portal-image-position: 50% 50%; }
  .portal-routes { margin: 0 auto; }
  .portal-card, .portal-item--mid .portal-card { width: 100%; min-height: 350px; aspect-ratio: 4 / 5.7; }
  .portal-card__inner, .portal-item--mid .portal-card__inner { padding: 0 17px 20px; }
  .portal-card :is(h2,h3), .portal-item--mid .portal-card :is(h2,h3) { font-size: 1.42rem; }
  .portal-card p { font-size: .8rem; }
  .portal-card__art { height: 86%; }
}
@media (max-width: 699px) {
  .portal-body, html[data-header="transparent"] .portal-body,
  html:not(.js-enabled) body.portal .portal-body {
    display: flex; flex-direction: column; height: auto;
    padding: calc(var(--header-height) + 60px) 28px 72px;
  }
  .portal-intro { min-height: 0; padding: 0; }
  .portal-intro h1 { font-size: clamp(2.3rem, 10.5vw, 3.4rem); line-height: 1.08; }
  .portal-word { display: block; }
  .portal-intro p { max-width: 30em; margin-top: 24px; font-size: .94rem; line-height: 1.6; }
  .portal-routes { margin-top: 48px; display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; gap: 16px; }
  .portal-card, .portal-item--mid .portal-card { width: 100%; min-height: 0; aspect-ratio: auto; }
  .portal-card__inner, .portal-item--mid .portal-card__inner { position: relative; padding: 44px 24px 24px; }
  .portal-card :is(h2,h3), .portal-item--mid .portal-card :is(h2,h3) { font-size: 1.8rem; max-width: 65%; }
  .portal-card__label { margin-bottom: 22px; max-width: 65%; }
  .portal-card p { font-size: .9rem; max-width: 30em; }
  .portal-card__action { display: flex; justify-content: space-between; font-size: .8rem; }
  .portal-card__art { inset: -5px -12px auto auto; width: 148px; height: 158px; }
  .portal-card__number { top: 18px; left: 24px; }
  .portal-media { height: min(940px, calc(115 * var(--portal-vh))); }
  .portal-media::after {
    background: linear-gradient(180deg, color-mix(in srgb, var(--dark) 30%, transparent),
      color-mix(in srgb, var(--dark) 18%, transparent) 45%, color-mix(in srgb, var(--dark) 34%, transparent) 100%);
  }
  /* 24 september: de achtergrond loopt wazig door tot na de laatste kaart en vervaagt dan in de
     pagina, in plaats van halverwege de Meditatiekaart hard te stoppen. De scherpe film of het
     schilderij vloeit onderaan over in een onscherpe kopie van hetzelfde beeld. */
  .portal-hero { overflow-x: clip; }
  /* Meer ruimte na de laatste kaart, zodat de onscherpe uitloop rustig kan doorlopen (Jasper, 24 september). */
  .portal-body, html[data-header="transparent"] .portal-body,
  html:not(.js-enabled) body.portal .portal-body { padding-bottom: 190px; }
  .portal-media { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 200px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 200px), transparent); }
  /* Ronde 4: het beeld loopt over in één kleur (het gemiddelde van de onderkant van film of schilderij,
     berekend in site.js) en die kleur vervaagt daarna langzaam in de pagina. */
  .portal-hero::before {
    content: ""; position: absolute; z-index: -1; pointer-events: none;
    left: 0; right: 0; bottom: 0; top: calc(min(940px, calc(115 * var(--portal-vh))) - 220px);
    background: linear-gradient(180deg, var(--uitloop-kleur, #3A3D33) 0, var(--uitloop-kleur, #3A3D33) 42%, transparent 100%);
  }
}
@media (max-width: 420px) {
  body header.site-header .nav { padding-inline: 28px; column-gap: 8px; }
  body header.site-header .logo-lockup img { height: 46px; }
  body header.site-header.is-scrolled .logo-lockup img { transform: translateX(-10%) scale(.804); }
  .site-header .nav-right { gap: 4px; }
  .site-header .nav .btn { padding-inline: 12px; font-size: .8rem; }
  .site-header .taal { min-width: 28px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
}
/* Terracotta heeft donkere tekst nodig; de hele Therapiefamilie volgt die keuze. */
html[data-style="gelaagd"] body[data-route="therapie"] { --sage: var(--therapy-deep); --route-on: var(--therapy-on); --route-on-soft: var(--therapy-on-soft); --route-accent: var(--therapy-deep); }
html[data-style="gelaagd"] .therapy-hero h1,
html[data-style="gelaagd"] .therapy-hero .hero-cta-alt,
html[data-style="gelaagd"] body[data-route="therapie"] .pagina-hero h1 { color: var(--therapy-on); }
html[data-style="gelaagd"] .therapy-hero .hero-lede,
html[data-style="gelaagd"] body[data-route="therapie"] .pagina-hero .lede,
html[data-style="gelaagd"] body[data-route="therapie"] .pagina-hero .kicker,
html[data-style="gelaagd"] body[data-route="therapie"] .pagina-hero .terug,
html[data-style="gelaagd"] .verloop .usp,
html[data-style="gelaagd"] .verloop .usp svg,
html[data-style="gelaagd"] .verloop .herken-head .kicker,
html[data-style="gelaagd"] .verloop .herken-head h2 { color: var(--therapy-on); -webkit-text-stroke: 0; }
html[data-style="gelaagd"] body:is(.portal, [data-route="therapie"]) .persoonlijk-contact__tekst .kicker,
html[data-style="gelaagd"] body[data-route="therapie"] .inhoud .kicker { color: var(--therapy-deep); }
@media (prefers-reduced-motion: reduce) {
  body header.site-header::before, body header.site-header .nav,
  body header.site-header .logo-lockup img, .nav-route-link, .nav-route-link::after { transition: none; }
  @media (hover: hover) and (pointer: fine) {
  .nav-route-link:hover { transform: none; }
}
}
html.noanim body header.site-header::before, html.noanim body header.site-header .nav,
html.noanim body header.site-header .logo-lockup img, html.noanim .nav-route-link,
html.noanim .nav-route-link::after { transition: none; }


html[data-style="gelaagd"] body[data-route="therapie"] .pagina-hero {
  background: linear-gradient(180deg, var(--therapy-main) 0%, var(--therapy-main) 55%, var(--therapy-soft) 85%, var(--beige) 100%);
}
@media (hover: hover) and (pointer: fine) {
  html[data-style="gelaagd"] body[data-route="therapie"] .btn:not(.light):not(.contact-action):hover { background: var(--therapy-deep); }
}

/* PLAN-17: e-mail en formulier, zonder publiek telefoonnummer. */
.persoonlijk-contact__acties { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; margin-top: 32px; }
.persoonlijk-contact .kicker a { color: color-mix(in srgb, var(--dark) 60%, var(--therapy-deep)); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: .2em; }
.persoonlijk-contact .kicker a:focus-visible { text-decoration-color: currentColor; }
@media (hover:hover) and (pointer:fine) { .persoonlijk-contact .kicker a:hover { text-decoration-color: currentColor; } }
body .persoonlijk-contact__acties .btn { display: flex; justify-content: center; min-height: 60px; width: 100%; padding: 14px 16px; gap: 10px; font-size: .86rem; line-height: 1.45; text-align: left; text-decoration: none; }
body .persoonlijk-contact__acties .btn.contact-email { background: transparent; color: var(--dark); border: 1px solid var(--line); }
body .persoonlijk-contact__acties .btn.contact-formulier { background: var(--route-strong, var(--therapy-deep)); color: var(--wit); }
body .btn.contact-action:focus-visible { background: var(--contact-hover) !important; color: var(--dark) !important; }
@media (hover: hover) and (pointer: fine) {
  body .btn.contact-action:hover { background: var(--contact-hover) !important; color: var(--dark) !important; }
}
body .btn.contact-action { transition: background-color var(--motion-layout) ease, color var(--motion-layout) ease; }
body .btn.contact-action:active { transform: none; box-shadow: none; }
@media (hover: hover) and (pointer: fine) {
  body .btn.contact-action:hover { transform: none; box-shadow: none; }
}
.icon { display: inline-block; width: 18px; height: 18px; flex: 0 0 18px; vertical-align: -.2em; }
html[data-card-shadow="uit"] :is(.portal-card, .aanbod-card) { box-shadow: none !important; }
body.is-leaving .portal-item, body.is-leaving .portal-intro > * { animation-play-state: paused; }
body.is-leaving .portal-item.is-chosen { visibility: hidden; }
body.is-leaving .portal-card { transition: none; }
.site-header .nav-dropdown { border: 0; box-shadow: none; overflow: visible; }
.nav-dropdown > summary svg { position: relative; }
@media (pointer: coarse) { .nav-dropdown > summary { width: 44px; height: 44px; } }
footer[hidden] { display: none; }
@media (max-width: 599px) {
  .persoonlijk-contact__acties { grid-template-columns: minmax(0, 1fr); }
}
html:not(.js-enabled) body.portal .site-header { margin-bottom: calc(-1 * var(--header-height)); }
html:not(.js-enabled) body.portal .site-header::before { opacity: 0; }
@media (min-width: 700px) {
  html:not(.js-enabled) body.portal .portal-body { height: calc(100 * var(--portal-vh)); padding-top: calc(var(--header-height) + 24px + var(--portal-offset) * 2); }
}
@media (prefers-reduced-motion: reduce) { body .btn.contact-action, .nav-dropdown > summary::before { transition: none; } }
html.noanim body .btn.contact-action, html.noanim .nav-dropdown > summary::before { transition: none; }

/* Lage vensters krijgen scrollruimte. Op touch blijft de gekozen indeling
   gelijk wanneer alleen de browserbalk verschijnt of verdwijnt. */
@media (min-width: 700px) and (max-height: 700px) {
  .portal-hero:not(.portal-viewport-stable) .portal-body,
  html:not(.js-enabled) body.portal .portal-body {
    height: auto; min-height: calc(100 * var(--portal-vh)); padding-top: calc(var(--header-height) + 60px);
    grid-template-rows: auto auto auto; row-gap: 24px;
  }
  .portal-hero:not(.portal-viewport-stable) .portal-intro { padding-bottom: 0; }
  .portal-hero:not(.portal-viewport-stable) .portal-card__art { inset: 0 15% auto; width: 70%; height: 55%; }
}
@media (min-width: 700px) {
  .portal-hero.portal-viewport-short .portal-body {
    height: auto; min-height: calc(100 * var(--portal-vh)); padding-top: calc(var(--header-height) + 60px);
    grid-template-rows: auto auto auto; row-gap: 24px;
  }
  .portal-hero.portal-viewport-short .portal-intro { padding-bottom: 0; }
  .portal-hero.portal-viewport-short .portal-card__art { inset: 0 15% auto; width: 70%; height: 55%; }
}

/* Keuze Jasper, 17 september: groter middenmenu en transparante routeopening. */
@media (min-width: 981px) {
  body header.site-header .nav { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); column-gap: 24px; }
  .site-header .logo-lockup { justify-self: start; }
  .site-header .nav-right { justify-self: end; }
  body header.site-header .nav-left { gap: 26px; }
  .site-header .nav-route > .nav-route-link { font-size: .98rem; }
}
body.route-entry header.site-header { margin-bottom: calc(-1 * var(--header-height)); }
body.route-entry header.site-header:not(.is-scrolled)::before { opacity: 0; }
body.route-entry header.site-header:not(.is-scrolled) { color: var(--ink); }
body.route-entry header.site-header:not(.is-scrolled) :is(.nav-left a, .taal, .nav-dropdown > summary) { color: var(--ink); }
body.route-entry header.site-header:not(.is-scrolled) .logo-lockup img { filter: brightness(0) opacity(.8); }
body.route-entry header.site-header:not(.is-scrolled) .menu-knop__line { background: var(--ink); }
body.route-entry header.site-header:not(.is-scrolled) .nav .btn.light { background: var(--dark); color: var(--wit); }
@media (hover: hover) and (pointer: fine) {
  body.route-entry header.site-header:not(.is-scrolled) .nav .btn.light:hover { background: var(--contact-hover); color: var(--dark); }
}
@media (max-width: 980px) {
  body.route-entry .therapy-hero { padding-top: calc(var(--header-height) + 64px); }
}

/* PLAN-18: brede filmgradient, dezelfde hoeken als het formulier. */
.contact-shell { background: var(--therapy-light); padding: 12px; }
.contact-shell > .aanmelden {
  isolation: isolate; width: 100%; max-width: none; margin: 0 auto;
  border-radius: var(--form-radius);
  padding: clamp(64px, 8vw, 120px) clamp(0px, 2vw, 28px);
}
.contact-shell .algemeen-contact { background: var(--contact-cream); }
/* De decoratieve vormen gebruiken kleuren uit het filmbeeld; alleen transforms bewegen. */
.contact-lava { position: absolute; inset: -12%; z-index: 0; overflow: hidden; pointer-events: none; }
.contact-lava__blob {
  position: absolute; display: block; filter: blur(clamp(24px, 3vw, 48px));
  border-radius: 46% 54% 62% 38% / 52% 40% 60% 48%;
  animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate;
}
.contact-lava__blob--sky {
  left: -12%; top: -20%; width: 75%; height: 85%; background: var(--contact-sky);
  animation-name: lava-sky; animation-duration: 10s; animation-delay: -2.5s;
}
.contact-lava__blob--sun {
  left: 30%; top: 42%; width: 58%; height: 68%; background: var(--contact-apricot);
  animation-name: lava-sun; animation-duration: 12.5s; animation-delay: -7.5s;
}
.contact-lava__blob--peach {
  left: 55%; top: -18%; width: 58%; height: 72%; background: var(--contact-rose); opacity: .85;
  animation-name: lava-peach; animation-duration: 15s; animation-delay: -3.75s;
}
.contact-lava__blob--cloud {
  left: 18%; top: 50%; width: 48%; height: 54%; background: var(--contact-cloud); opacity: .48;
  animation-name: lava-cloud; animation-duration: 11.25s; animation-delay: -6.25s;
}
@keyframes lava-sky {
  from { transform: translate(-12%, -8%) rotate(-18deg) scale(1.05, .9); }
  to { transform: translate(44%, 52%) rotate(24deg) scale(.85, 1.2); }
}
@keyframes lava-sun {
  from { transform: translate(-42%, 15%) rotate(-22deg) scale(.85, 1.05); }
  to { transform: translate(44%, -75%) rotate(18deg) scale(1.15, .85); }
}
@keyframes lava-peach {
  from { transform: translate(10%, 52%) rotate(18deg) scale(1, .85); }
  to { transform: translate(-88%, 2%) rotate(-26deg) scale(.85, 1.15); }
}
@keyframes lava-cloud {
  from { transform: translate(-50%, -80%) rotate(-12deg) scale(.8, 1.1); }
  to { transform: translate(85%, -10%) rotate(32deg) scale(1.15, .85); }
}
@media (max-width: 699px) {
  .contact-shell .aanmelden-grid { padding-inline: 24px; gap: 32px; }
  .contact-shell form { padding: 28px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .contact-lava__blob { animation: none; transform: none; }
}
html.noanim .contact-lava__blob { animation: none; transform: none; }

/* PLAN-21: compacte footer. 22 september: merk, Over Jasper en e-mail vormen de
   eerste kolom naast de drie routes; registratie en crisislijn delen één strook. */
.footer-v3 { background: var(--dark); color: var(--wit); padding: 56px 0 0; }
.footer-v3::before { display: none; }
.footer-v3 a { text-decoration: none; }
.footer-v3__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: 48px; padding-bottom: 40px; }
.footer-v3__routes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }
.footer-v3__route { --footer-accent: var(--wit); padding: 0; }
.footer-v3__route--therapy { --footer-accent: var(--therapy-main); }
.footer-v3__route--training { --footer-accent: var(--training-main); }
.footer-v3__route--meditation { --footer-accent: var(--meditation-main); }
.footer-v3__route h3 { margin: 0 0 8px; font-size: 1.22rem; font-weight: 400; }
.footer-v3__route-head { display: flex; align-items: center; gap: 10px; min-height: 42px; color: var(--footer-accent); }
.footer-v3__art { display: block; width: 34px; height: 34px; flex: 0 0 34px; overflow: visible; }
.footer-v3__art .art-breathe { transform-box: fill-box; transform-origin: center; }
html.js-enabled .footer-v3__art * { animation-play-state: paused; }
html.js-enabled .footer-v3.is-art-visible .footer-v3__art * { animation-play-state: running; }
html.noanim .footer-v3__art * { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .footer-v3__art * { animation: none !important; } }
/* Het pijltje hoort bij de routenaam, niet los aan de rand van de kolom. */
.footer-v3__route-head > .icon:last-child { width: 14px; height: 14px; flex-basis: 14px; margin-left: -2px; opacity: .65; }
.footer-v3__route ul { list-style: none; margin: 0; padding: 0; gap: 0; }
.footer-v3__route li { white-space: normal; opacity: 1; }
.footer-v3__route li a,
.footer-v3__brand > a:not(.logo-lockup),
.footer-v3__contact a { display: flex; align-items: center; min-height: 40px; padding-block: 6px; font-size: .82rem; line-height: 1.45; color: color-mix(in srgb, var(--wit) 80%, transparent); }
.footer-v3__note { margin-top: 10px; font-size: .7rem; color: color-mix(in srgb, var(--wit) 66%, transparent); }
.footer-v3__brand { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.footer-v3__brand .logo-lockup { min-height: 42px; margin-bottom: 8px; }
/* Breedte volgt de hoogte: anders rekt de PNG uit tot de breedte van het HTML-attribuut. */
.footer-v3__brand .logo-lockup img { width: auto; height: 42px; }
.footer-v3__brand > a:not(.logo-lockup) { display: inline-flex; gap: 8px; }
.footer-v3__brand > a:not(.logo-lockup) .icon { width: 14px; height: 14px; flex-basis: 14px; opacity: .65; }
.footer-v3__contact { display: grid; gap: 0; max-width: 100%; }
.footer-v3__contact a { display: inline-flex; gap: 9px; overflow-wrap: anywhere; }
.footer-v3__contact .icon { width: 16px; height: 16px; flex-basis: 16px; opacity: .75; }
.footer-v3__mini { display: flex; align-items: center; justify-content: space-between; gap: 16px 48px; padding: 22px 0; border-top: 1px solid color-mix(in srgb, var(--wit) 14%, transparent); }
.footer-v3__registration { display: flex; align-items: center; gap: 16px; min-width: 0; }
.footer-v3__registration img { flex: 0 0 40px; }
.footer-v3__registration p,
.footer-v3__crisis { margin: 0; font-size: .74rem; line-height: 1.7; color: color-mix(in srgb, var(--wit) 76%, transparent); }
.footer-v3__crisis { text-align: right; text-wrap: balance; }
.footer-v3__crisis a { color: var(--wit); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .footer-v3 a:hover { color: var(--contact-hover); }
}
.footer-v3 a:focus-visible { outline: 2px solid var(--contact-hover); outline-offset: 3px; border-radius: 2px; }
.footer-v3 .footer-legal { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 6px 24px; margin: 0; padding-block: 18px 24px; border-top: 1px solid color-mix(in srgb, var(--wit) 8%, transparent); font-size: .72rem; opacity: 1; color: color-mix(in srgb, var(--wit) 60%, transparent); }
.footer-v3 .footer-legal > span:nth-child(2) { text-align: right; }
@media (max-width: 980px) {
  .footer-v3 { padding-top: 44px; }
  .footer-v3__top { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-bottom: 32px; }
  .footer-v3__brand { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 28px; padding-bottom: 20px; border-bottom: 1px solid color-mix(in srgb, var(--wit) 12%, transparent); }
  .footer-v3__brand .logo-lockup { margin: 0 auto 0 0; }
  .footer-v3__routes { gap: 24px; }
  .footer-v3__route h3 { font-size: 1.15rem; }
  .footer-v3__mini { flex-direction: column; align-items: flex-start; }
  .footer-v3__crisis { max-width: none; text-align: left; }
}
@media (max-width: 699px) {
  .footer-v3 { padding-top: 28px; }
  .footer-v3__brand { column-gap: 20px; }
  .footer-v3__brand .logo-lockup { flex: 1 0 100%; margin-bottom: 4px; }
  .footer-v3__routes { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .footer-v3__route + .footer-v3__route { border-top: 1px solid color-mix(in srgb, var(--wit) 12%, transparent); padding-top: 16px; }
  .footer-v3__mini { gap: 14px; padding-block: 20px; }
  .footer-v3 .footer-legal { flex-direction: column-reverse; align-items: flex-start; }
  .footer-v3 .footer-legal > span:nth-child(2) { text-align: left; }
  /* Op smal beeld vallen de tekstpuntjes weg; ruimte scheidt de links zonder losse punt aan een regeleinde. */
  .footer-v3 .footer-legal > span:nth-child(2) { font-size: 0; column-gap: 0; }
  .footer-v3 .footer-legal > span:nth-child(2) a { font-size: .72rem; margin-right: 20px; }
}
@media (pointer: coarse) {
  .footer-v3__route li a, .footer-v3__brand > a:not(.logo-lockup), .footer-v3__contact a { min-height: 44px; }
}

/* Achtergrond en tekst bewegen apart; transitions kunnen soepel omkeren. */
html.js-enabled .nav-submenu::after,
html.js-enabled .site-header.is-scrolled .nav-submenu::before {
  opacity: 0; clip-path: ellipse(14px 8px at var(--surface-origin, var(--menu-origin)) 0);
  transition: clip-path var(--motion-layout) var(--menu-ease), opacity var(--motion-feedback) ease;
}
html.js-enabled .is-menu-visible .nav-submenu::after,
html.js-enabled .site-header.is-scrolled .is-menu-visible .nav-submenu::before {
  opacity: 1; clip-path: ellipse(150% 150% at var(--surface-origin, var(--menu-origin)) 0);
  transition-duration: var(--motion-menu-surface), var(--motion-feedback);
}
html.js-enabled .nav-dropdown .nav-submenu > * {
  opacity: 0; transform: translateY(8px); filter: blur(var(--motion-blur));
  transition: opacity var(--motion-feedback) ease, transform var(--motion-layout) var(--ease-out), filter var(--motion-layout) var(--ease-out);
  transition-delay: 0s;
}
html.js-enabled .nav-dropdown.is-menu-visible .nav-submenu > * {
  opacity: 1; transform: none; filter: blur(0);
  transition-duration: var(--motion-layout), var(--motion-menu-text), var(--motion-menu-text);
  transition-delay: calc(var(--motion-menu-delay) + var(--menu-i, 0) * var(--motion-menu-step));
}
html.js-enabled .nav-dropdown.is-menu-closing .nav-submenu { pointer-events: none; }
html.js-enabled .nav-dropdown.is-menu-closing .nav-submenu::after,
html.js-enabled .site-header.is-scrolled .nav-dropdown.is-menu-closing .nav-submenu::before,
html.js-enabled .nav-dropdown.is-menu-closing .nav-submenu > * {
  opacity: 0; transition: opacity var(--motion-fade) ease; transition-delay: 0s;
}
html.js-enabled .site-header.is-scrolled .nav-dropdown.menu-instant .nav-submenu::before,
html.js-enabled .nav-dropdown.menu-instant .nav-submenu::after,
html.js-enabled .nav-dropdown.menu-instant .nav-submenu > * { transition: none; }
@media (prefers-reduced-motion: reduce) {
  html.js-enabled .site-header.is-scrolled .nav-submenu::before,
  html.js-enabled .nav-dropdown .nav-submenu::after,
  html.js-enabled .nav-dropdown .nav-submenu > * { transition: none !important; }
}
html.noanim .site-header.is-scrolled .nav-submenu::before,
html.noanim .nav-dropdown .nav-submenu::after,
html.noanim .nav-dropdown .nav-submenu > * { transition: none !important; }
/* Sinds 24 september houdt de header bij een open mobiel menu zijn eigen stand (transparant of donker). */

/* PLAN-20: dezelfde kaartcomponent als de opening, met eigen illustraties. */
.route-showcase { background: var(--route-main); color: var(--route-on); padding-top: 190px; }
.route-showcase h1 { color: var(--route-on); max-width: 19em; }
.route-showcase .hero-lede { color: var(--route-on-soft); max-width: 43em; }
.route-showcase .hero-cta-alt { color: var(--route-on); }
.route-showcase .usp, .route-showcase .usp svg { color: var(--route-on); }
.hero .hero-cards.route-portal-cards {
  display: grid; grid-template-columns: repeat(3,minmax(0,1fr));
  align-items: stretch; gap: 26px; max-width: 1000px; margin: 64px auto 0;
}
.route-portal-item { min-width: 0; }
.route-portal-card { height: 100%; aspect-ratio: auto; }
.route-portal-card .portal-card__inner { position: relative; height: 100%; min-height: 135cqw; padding-top: 72cqw; display: flex; flex-direction: column; }
.route-portal-card .portal-card__action { margin-top: auto; }
@media (min-width: 700px) {
  .route-portal-card .portal-card__art { height: 135cqw; }
}
.route-portal-card .route-card-art { margin: 0; }
.route-portal-card .art-zoom { transform-origin: 200px 172px; }
.route-portal-card:focus-visible { outline-color: var(--dark); }

/* PLAN-20: drie eigen kaarttinten binnen de kleur van iedere route. */
:is(body[data-route="therapie"], [data-card-palette="therapie"]) {
  --hero-card-dark: var(--therapy-deep); --hero-card-light: var(--therapy-tint);
  --hero-card-mid: color-mix(in srgb, var(--therapy-main) 78%, var(--therapy-deep)); --hero-card-ink: var(--therapy-on);
}
:is(body[data-route="training"], [data-card-palette="training"]) {
  --hero-card-dark: var(--training-accent); --hero-card-light: var(--training-panel);
  --hero-card-mid: color-mix(in srgb, var(--training-main) 68%, var(--training-accent)); --hero-card-ink: var(--training-ink);
}
:is(body[data-route="meditatie"], [data-card-palette="meditatie"]) {
  --hero-card-dark: var(--meditation-deep); --hero-card-light: var(--meditation-soft);
  --hero-card-mid: color-mix(in srgb, var(--meditation-main) 70%, var(--meditation-accent)); --hero-card-ink: var(--meditation-ink);
}
.route-portal-cards .route-portal-card {
  --card-bg: var(--hero-card-light); --card-ink: var(--hero-card-ink); --card-accent: var(--card-ink);
  --card-line: color-mix(in srgb, var(--card-ink) 16%, transparent);
}
.route-portal-item:nth-child(1) .route-portal-card { --card-bg: var(--hero-card-dark); --card-ink: var(--wit); }
.route-portal-item:nth-child(3) .route-portal-card { --card-bg: var(--hero-card-mid); }
.route-portal-card :is(p, .portal-card__label) { opacity: 1; }

@media (max-width: 980px) and (min-width: 700px) {
  .hero .hero-cards.route-portal-cards { gap: 18px; }
}
@media (max-width: 699px) {
  .hero .hero-cards.route-portal-cards { grid-template-columns: minmax(0,1fr); gap: 16px; margin-top: 48px; }
  .route-portal-card .portal-card__inner { height: auto; min-height: 0; padding-top: 44px; }
  .route-portal-card :is(h2,h3) { font-size: clamp(1.2rem,7cqw,1.8rem); hyphens: auto; }
}
.route-introduction { background: var(--route-main); padding: 72px 0 130px; }
.route-introduction .prose { text-align: center; }
.route-introduction .prose p { color: var(--route-on-soft); }
.route-introduction .kicker { color: var(--route-on); }
.route-recognition { background: var(--route-bg); }
.route-recognition .herken-head { max-width: 650px; margin: 0 auto 42px; text-align: center; }
.route-recognition .klachten-list { max-width: 780px; margin: auto; }
.route-recognition h2, .route-faq h2 { font-size: clamp(1.7rem, 2.9vw, 2.4rem); }
.route-recognition .kicker, .route-background .kicker { color: var(--route-accent); }
.route-background { background: var(--route-main); }
.route-background__grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 100px; align-items: center; max-width: 1020px; }
.route-background__visual { position: relative; }
.route-background__visual img { width: 100%; height: 380px; display: block; object-fit: cover; object-position: center 25%; border-radius: 160px 160px 16px 16px; }
.route-background__visual a { display: flex; justify-content: space-between; align-items: center; padding: 16px 4px; color: var(--route-on); text-underline-offset: 5px; }
.route-background__copy h2 { font-size: clamp(1.7rem, 2.9vw, 2.4rem); color: var(--route-on); margin-bottom: 24px; }
.route-background__copy p { color: var(--route-on-soft); }
.route-background__copy ul { list-style: none; }
.route-background__copy li { padding: 12px 0; border-bottom: 1px solid var(--route-line); font-size: .88rem; color: var(--route-on); }
.route-programmes { display: grid; grid-template-columns: 1fr; gap: 64px; }
.route-programmes .route-programme {
  display: grid; grid-template-columns: .8fr 1.2fr; gap: 64px;
  border: 0; border-radius: 0; padding: 46px 0 0; border-top: 1px solid var(--route-line);
  background: transparent !important; box-shadow: none !important; transform: none;
}
.route-programme__intro { max-width: 370px; }
.route-programme__intro .aanbod-card__num { display: block; }
.route-programme__intro h3 { font-size: clamp(1.6rem, 2.5vw, 2.2rem); }
.route-programme__content .aanbod-card__blok:first-child { border: 0; padding-top: 0; }
.route-programme__content details { margin-top: 24px; }
.route-programme__content .aanbod-card__cta { width: 100%; margin-top: 0; }
.route-process { background: var(--route-main); color: var(--route-on); }
.route-steps { list-style: none; display: grid; grid-template-columns: repeat(3,1fr); gap: 50px; }
.route-steps li { padding-top: 22px; border-top: 1px solid var(--route-line); }
.route-step-number { display: block; font-size: .72rem; letter-spacing: .12em; opacity: .85; margin-bottom: 26px; } /* was .6: 2,8:1; nu 4,9:1 of meer */
.route-steps h3 { font-size: 1.4rem; margin-bottom: 14px; }
.route-steps p { color: var(--route-on-soft); font-size: .93rem; }
.route-faq { background: var(--route-bg); }
@media (max-width: 980px) {
  .route-showcase { padding-top: calc(var(--header-height) + 64px); }
  .route-showcase .hero-cards { gap: 18px; }
  .route-background__grid { gap: 48px; }
  .route-programmes .route-programme { gap: 32px; }
}
@media (max-width: 700px) {
  .route-showcase { padding-bottom: 72px; }
  .route-showcase .hero-cards { flex-direction: column; gap: 24px; margin-top: 48px; }
  .route-introduction { padding: 32px 0 104px; }
  .route-background__grid, .route-programmes .route-programme, .route-steps { grid-template-columns: 1fr; gap: 32px; }
  .route-background__visual { max-width: 310px; margin-inline: auto; width: 100%; }
  .route-background__visual img { height: 350px; }
  .route-programme__intro { max-width: none; }
  .route-programmes { gap: 40px; }
  body:is([data-route="training"],[data-route="meditatie"]) .inhoud:not(.route-introduction) { padding-block: 104px; }
}
@media (prefers-reduced-motion: reduce) {
  .route-card-art * { animation: none !important; }
}
html.noanim .route-card-art * { animation: none !important; }
.route-process .kicker { color: var(--route-on); }

.nav-label { display: block; line-height: 32px; white-space: nowrap; }
body header.site-header .nav-submenu > a:first-child { border-top: 0; }

/* PLAN-22: gekozen compacte 3D-Contactknop. Geen proefvarianten of wisselaar. */
:root { --contact-cube-ease: cubic-bezier(.34,1.56,.64,1); }
body .btn.contact-3d, body .btn.contact-3d:focus-visible, body .btn.contact-3d:active {
  width: 128px; height: 44px; flex: 0 0 auto; padding: 0;
  font-size: .9rem; line-height: 1; border-radius: var(--button-radius);
  overflow: visible; perspective: 700px; background: transparent !important;
  transform: none; box-shadow: none;
}
@media (hover: hover) and (pointer: fine) {
  body .btn.contact-3d:hover {
  width: 128px; height: 44px; flex: 0 0 auto; padding: 0;
  font-size: .9rem; line-height: 1; border-radius: var(--button-radius);
  overflow: visible; perspective: 700px; background: transparent !important;
  transform: none; box-shadow: none;
}
}
.contact-scale { position: absolute; inset: 0; transform-origin: right center; transition: transform var(--motion-layout) var(--ease-out); }
.site-header.is-scrolled .contact-scale { transform: scale(.92); }
.contact-cube {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transform: translateZ(-22px); transition: transform 650ms var(--contact-cube-ease);
}
.contact-cube__face {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 9px;
  border-radius: var(--button-radius); backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.contact-cube__face svg { flex: 0 0 16px; }
.contact-cube__front { background: var(--training-main); color: var(--training-ink); transform: translateZ(22px); }
.contact-cube__next { background: var(--dark); color: var(--wit); transform: rotateX(-90deg) translateZ(22px); }
.site-header .contact-cube__next { background: var(--meditation-main); color: var(--meditation-ink); }
body:is(.portal, .route-entry) .site-header:not(.is-scrolled) .contact-cube__next { background: var(--dark); color: var(--wit); }
@media (prefers-reduced-motion: reduce) { .contact-scale { transition: none; } }
html.noanim .contact-scale { transition: none; }
body .btn.contact-3d:focus-visible { outline: 2px solid var(--dark); outline-offset: 4px; }
body .site-header .btn.contact-3d:focus-visible { outline-color: var(--wit); }
body.route-entry .site-header:not(.is-scrolled) .btn.contact-3d:focus-visible { outline-color: var(--route-on, var(--dark)); }
.contact-3d:focus-visible .contact-cube { transform: translateZ(-22px) rotateX(90deg); }
@media (hover: hover) and (pointer: fine) {
  .contact-3d:hover .contact-cube { transform: translateZ(-22px) rotateX(90deg); }
}
.contact-demos { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; margin-block: 32px; }
.contact-demo { display: grid; justify-items: center; align-content: center; min-height: 210px; gap: 24px; border-radius: var(--form-radius); background: var(--training-light); }
.contact-demo h3 { font-size: 1.1rem; color: var(--dark); }
#contact-motion { margin-top: 20px; }
@media (max-width: 700px) {
  body .btn.contact-3d, body .btn.contact-3d:focus-visible, body .btn.contact-3d:active { width: 104px; font-size: .8rem; }
@media (hover: hover) and (pointer: fine) {
  body .btn.contact-3d:hover { width: 104px; font-size: .8rem; }
}
  .contact-cube__face { gap: 6px; }
  .contact-demos { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .contact-cube, .contact-cube__face { transform: none !important; transition: none; }
  .contact-cube__next { opacity: 0; }
  .contact-3d:focus-visible .contact-cube__next { opacity: 1; }
  @media (hover: hover) and (pointer: fine) {
    .contact-3d:hover .contact-cube__next { opacity: 1; }
  }
}
html.noanim .contact-cube, html.noanim .contact-cube__face { transform: none !important; transition: none; }
html.noanim .contact-cube__next { opacity: 0; }
html.noanim .contact-3d:focus-visible .contact-cube__next { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  html.noanim .contact-3d:hover .contact-cube__next { opacity: 1; }
}

/* PLAN-23: één rustige vraag tegelijk, met de bestaande routekleuren. */
.choice-guide { background: var(--training-main); color: var(--dark); }
.choice-guide__layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(40px,7vw,100px); align-items: start; }
.choice-guide__intro { padding-top: 28px; }
.choice-guide__intro h2 { font-size: clamp(2.1rem,3.8vw,3.15rem); line-height: 1.14; margin: 22px 0 26px; max-width: 11em; }
.choice-guide__intro > p { color: var(--ink-soft); max-width: 29em; }
.choice-guide__intro .choice-guide__privacy { font-size: .78rem; line-height: 1.65; margin-top: 32px; max-width: 31em; }
.choice-guide__panel { min-height: 440px; padding: clamp(24px,3vw,40px); background: var(--wit); border-radius: var(--form-radius); }
.choice-guide__progress { display: flex; justify-content: space-between; align-items: center; gap: 20px; font-size: .7rem; letter-spacing: .06em; color: var(--ink-soft); margin-bottom: 22px; }
.choice-guide__progress button, .choice-summary__remove { appearance: none; color: inherit; background: transparent; border: 0; font: inherit; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.choice-guide__progress button { min-height: 44px; }
.choice-guide__panel h3 { font-size: clamp(1.45rem,2.1vw,1.85rem); line-height: 1.25; margin: 0 0 12px; }
.choice-guide__panel h3:focus { outline: none; }
.choice-guide__hint { font-size: .82rem; color: var(--ink-soft); margin-bottom: 20px; }
.choice-guide__options { display: grid; gap: 10px; border: 0; margin: 0; padding: 0; min-width: 0; }
.choice-guide__option { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--button-radius); cursor: pointer; font-size: .94rem; line-height: 1.45; transition: background var(--motion-feedback) ease, border-color var(--motion-feedback) ease; }
.choice-guide__option input { appearance: auto; flex: 0 0 17px; width: 17px; height: 17px; margin: 0; accent-color: var(--dark); }
.choice-guide__option:has(input:checked) { background: var(--training-main); border-color: var(--training-accent); }
.choice-guide__option:has(input:focus-visible) { outline: 2px solid var(--dark); outline-offset: 3px; }
.choice-guide__controls { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 26px; }
.choice-guide__controls .btn { min-height: 44px; margin-left: auto; }
.choice-summary__remove { min-height: 44px; font-size: .82rem; }
.choice-guide__fallback { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 20px; }
.choice-guide__fallback a { color: var(--dark); }
.choice-result { --choice-tone: var(--training-main); padding: 24px; border-radius: var(--block-radius); background: var(--choice-tone); }
.choice-result--therapie { --choice-tone: var(--therapy-main); }
.choice-result--meditatie { --choice-tone: var(--meditation-main); }
.choice-result__art { width: 64px; height: 64px; display: block; margin-bottom: 20px; }
.choice-result__art * { animation: none !important; }
.choice-result > p { font-size: .91rem; line-height: 1.65; margin: 14px 0 20px; }
.choice-result .choice-result__status { font-size: .73rem; margin: 16px 0 0; }
.choice-result .btn { display: inline-flex; gap: 12px; justify-content: space-between; white-space: normal; line-height: 1.4; max-width: 100%; text-align: left; }
.choice-result .btn svg { flex: 0 0 18px; }
.choice-result__alternative { margin-top: 20px; font-size: .87rem; line-height: 1.55; }
.choice-result__alternative a { color: var(--dark); text-underline-offset: 4px; }
.choice-summary[hidden] { display: none !important; }
@media (hover: hover) and (pointer: fine) { .choice-guide__option:hover { border-color: var(--training-accent); } }
@media (max-width: 760px) {
  .choice-guide__layout { grid-template-columns: 1fr; gap: 32px; }
  .choice-guide__intro { padding-top: 0; }
  .choice-guide__intro h2 { max-width: 13em; }
  .choice-guide__intro .choice-guide__privacy { margin-top: 20px; }
  .choice-guide__panel { min-height: 0; padding: 24px 20px; }
  .choice-guide__option { font-size: 1rem; }
  .choice-summary textarea { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) { .choice-guide__option { transition: none; } }
html.noanim .choice-guide__option { transition: none; }

/* PLAN-17: gelaagde lotus; brede buitenbladen, hoger hart en kleine ademhaling. */
.art-lotus .lotus-petal, .art-lotus .lotus-sway, .art-lotus .lotus-mirror { transform-box: view-box; transform-origin: 0 0; }
.lotus-petal { transform: rotate(var(--petal-rest)); transition: transform 1200ms var(--ease-out); }
.lotus-sway { animation: lotus-unfold 6s ease-in-out infinite alternate; animation-delay: var(--petal-phase, 0s); }
@keyframes lotus-unfold { from { transform: rotate(0deg); } to { transform: rotate(var(--petal-breath)); } }
.portal-card--meditatie .lotus-sway { animation: none; }
.portal-card--meditatie .lotus-petal { opacity: 1; transform: rotate(var(--petal-open)); transition: none; }
.portal-card--meditatie .lotus-heart { transform-box: view-box; transform-origin: 0 0; transform: none; transition: none; }
html.noanim .lotus-sway { animation: none !important; }
html.noanim .lotus-petal { opacity: 1 !important; transform: rotate(var(--petal-rest)) !important; transition: none !important; }
html.noanim .lotus-heart { transform: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .lotus-sway { animation: none !important; }
  .lotus-petal { opacity: 1 !important; transform: rotate(var(--petal-rest)) !important; transition: none !important; }
  .lotus-heart { transform: none !important; transition: none !important; }
}
@media (hover: none), (pointer: coarse) {
  .portal-card--meditatie .lotus-petal { opacity: 1; transform: rotate(var(--petal-rest)); }
  .portal-card--meditatie .lotus-heart { transform: none; }
}

/* PLAN-23: direct kiezen, herkenning vooraf en een compact antwoordenoverzicht. */
.choice-guide__option { appearance: none; width: 100%; background: transparent; color: var(--dark); font-family: inherit; text-align: left; justify-content: space-between; }
.choice-guide__option[aria-pressed="true"] { background: var(--training-main); border-color: var(--training-accent); }
.choice-guide__option:focus-visible { outline: 2px solid var(--dark); outline-offset: 3px; }
.choice-guide__checks { max-height: min(52svh, 520px); overflow-y: auto; overscroll-behavior: contain; padding: 4px 10px 4px 4px; }
.choice-check { display: flex; gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: var(--button-radius); cursor: pointer; }
.choice-check:has(input:checked) { background: var(--training-main); border-color: var(--training-accent); }
.choice-check:focus-within { outline: 2px solid var(--dark); outline-offset: 2px; }
.choice-check input { appearance: auto; flex: 0 0 20px; width: 20px; height: 20px; margin-top: 2px; accent-color: var(--dark); }
.choice-check__copy { min-width: 0; font-size: .92rem; line-height: 1.5; }
.choice-check__copy strong { font-weight: 500; }
.choice-check__examples { display: grid; gap: 4px; margin-top: 8px; font-size: .78rem; color: var(--ink-soft); }
.choice-check__examples > span { display: list-item; margin-left: 15px; }
.choice-guide__option > svg { flex: 0 0 18px; opacity: .65; }
.choice-option-wrap { position: relative; min-width: 0; }
.choice-option__copy { min-width: 0; }
.choice-option__label { font-weight: 500; }
.choice-option__examples { display: block; margin: 9px 0 0; padding-left: 17px; font-size: .79rem; line-height: 1.6; color: var(--ink-soft); }
.choice-option__examples > span { display: list-item; margin: 2px 0; }
.choice-combinations { margin-top: 6px; }
.choice-combinations > summary { cursor: pointer; padding: 12px 0; font-size: .85rem; min-height: 44px; }
.choice-combinations .choice-guide__options { margin-top: 8px; }
.choice-guide__controls .choice-guide__back { margin-left: 0; text-decoration: none; display: inline-flex; gap: 10px; }
.choice-guide__controls:empty { display: none; }
.choice-guide__panel { position: relative; }
.choice-disclosure { position: relative; max-width: 100%; }
.choice-disclosure > summary { width: auto; min-width: 0; display: inline-flex; gap: 9px; min-height: 44px; padding: 10px 14px; cursor: pointer; color: var(--dark); font: inherit; font-size: .78rem; list-style: none; }
.choice-disclosure > summary::-webkit-details-marker { display: none; }
.choice-disclosure > summary::before { display: none; }
.choice-disclosure > summary svg { width: 14px; height: 14px; flex: 0 0 14px; transform: rotate(90deg); }
.choice-disclosure[open] > summary svg { transform: rotate(270deg); }
.choice-disclosure > summary:focus-visible { outline: 2px solid var(--dark); outline-offset: 3px; }
.choice-disclosure .choice-popover {
  top: calc(100% - 1px); left: 0; min-width: 0; width: 420px; max-width: calc(100vw - 104px); padding: 16px;
  --menu-bg: var(--dark); --menu-ink: var(--wit); --menu-line: rgba(250,251,248,.16);
  --menu-radius: 0 var(--field-radius) var(--field-radius) var(--field-radius); --menu-top: 0px;
  z-index: 25; color: var(--menu-ink);
}
.choice-disclosure .choice-popover::before {
  top: 0; left: -12px; right: -12px; height: 12px; pointer-events: none;
  --surface-origin: calc(var(--menu-origin) + 12px);
  background: radial-gradient(circle 12px at left bottom,transparent calc(100% - .5px),var(--menu-bg) 100%) left top / 12px 12px no-repeat,radial-gradient(circle 12px at right bottom,transparent calc(100% - .5px),var(--menu-bg) 100%) right top / 12px 12px no-repeat;
}
html.js-enabled .choice-popover::before { opacity: 0; clip-path: ellipse(14px 8px at var(--surface-origin) 0); transition: clip-path var(--motion-layout) var(--menu-ease),opacity var(--motion-feedback) ease; }
html.js-enabled .is-menu-visible .choice-popover::before { opacity: 1; clip-path: ellipse(150% 150% at var(--surface-origin) 0); transition-duration: var(--motion-menu-surface),var(--motion-feedback); }
.choice-popover__scroll { max-height: min(490px,58vh); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 4px; }
.choice-popover h4 { font: 1.2rem/1.3 'Iowan Old Style',Palatino,Georgia,serif; margin: 0 0 12px; color: inherit; }
/* Antwoorden blijven in het formulier staan, zonder overlay of losse pills. */
.choice-summary { margin: 16px 0 8px; min-width: 0; border: 1px solid var(--line); border-radius: var(--block-radius);
  background: color-mix(in srgb,var(--training-main) 28%,var(--wit)); color: var(--dark); }
.choice-answers > summary { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 16px 18px;
  cursor: pointer; list-style: none; font-size: .9rem; font-weight: 500; line-height: 1.4; }
.choice-answers > summary::-webkit-details-marker { display: none; }
.choice-answers > summary::before, .choice-answers > summary::after { content: none; }
.choice-answers > summary > svg { width: 16px; height: 16px; flex: 0 0 16px; transform: rotate(90deg); }
.choice-answers[open] > summary > svg { transform: rotate(270deg); }
.choice-answers.is-collapsing > summary > svg { transform: rotate(90deg); }
.choice-answers.is-animating > summary > svg { transition: transform var(--motion-disclosure) var(--ease-out); }
.is-language-changing, .is-layout-changing { overflow-anchor: none; }
.choice-guide__panel.is-resizing { overflow: clip; }
.choice-answers > summary:focus-visible { outline: 2px solid var(--dark); outline-offset: 3px; border-radius: var(--field-radius); }
.choice-summary__count { margin-left: auto; color: var(--ink-soft); font-size: .75rem; font-variant-numeric: tabular-nums; }
.choice-summary__body { padding: 0 18px 12px; }
.choice-summary__note { font-size: .79rem; line-height: 1.55; color: var(--ink-soft); margin: 0 0 16px; }
.choice-answer-list { list-style: none; margin: 0; padding: 0; }
.choice-answer-list > li { padding: 14px 0; border-top: 1px solid var(--line); }
.choice-answer__question { display: block; color: var(--ink-soft); font-size: .74rem; margin-bottom: 5px; line-height: 1.45; }
.choice-answer__values { display: grid; gap: 6px; }
.choice-answer__value { display: block; font-size: .89rem; line-height: 1.5; }
.choice-summary__actions { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 8px; border-top: 1px solid var(--line); padding-top: 6px; }
.choice-summary__actions button { appearance: none; background: none; border: 0; color: inherit; cursor: pointer; font: inherit; font-size: .8rem; min-height: 44px; text-decoration: underline; text-underline-offset: 4px; }
.choice-summary__editor label { color: var(--dark); }
.choice-summary__editor textarea { margin-top: 8px; min-height: 180px; color: var(--dark); line-height: 1.55; }
.choice-summary__edited { font-size: .89rem; white-space: pre-line; line-height: 1.6; }
.choice-guide__result-controls { display: flex; align-items: stretch; flex-wrap: nowrap; gap: 12px; }
.choice-guide__result-controls .btn { font-size: .82rem; padding: 12px 14px; line-height: 1.4; white-space: normal; }
.choice-guide__result-controls .choice-guide__back { flex: 0 0 auto; background: transparent; color: var(--dark); border: 1px solid var(--line); }
.choice-guide__result-controls .choice-guide__add { flex: 0 1 auto; min-width: 0; width: auto; }
html.noanim .choice-popover::before, html.js-enabled .menu-instant .choice-popover::before { transition: none; }
@media (prefers-reduced-motion: reduce) { .choice-popover::before { transition: none !important; } }
@media (max-width: 760px) {
  .choice-popover__scroll { max-height: 52vh; }
  .choice-disclosure .choice-popover { padding: 12px; }
  .choice-guide__controls:not(.choice-guide__result-controls) { flex-wrap: wrap; }
}
/* Een antwoordpaneel blijft binnen het venster, ook als de pill laag in beeld staat. */
.choice-popover__scroll { max-height: min(var(--choice-max-height,490px),58dvh); }
.choice-disclosure.is-choice-above .choice-popover { top: auto; bottom: calc(100% - 1px); --menu-radius: 12px 12px 12px 0; }
.choice-disclosure.is-choice-above .choice-popover::before { top: auto; bottom: 0; transform: scaleY(-1); }
html.js-enabled .is-choice-above .choice-popover::after { clip-path: ellipse(14px 8px at var(--menu-origin) 100%); }
html.js-enabled .is-choice-above.is-menu-visible .choice-popover::after { clip-path: ellipse(150% 150% at var(--menu-origin) 100%); }

/* Animatiescan 18 september: decoratie buiten beeld houdt haar actuele fase. */
html.js-enabled :is(.contact-lava, .portal-card__art, svg.tile):not(.is-motion-visible),
html.js-enabled :is(.contact-lava, .portal-card__art, svg.tile):not(.is-motion-visible) * {
  animation-play-state: paused !important;
}

/* PLAN-17: mobiele navigatie naar Jaspers videoreferentie. */
.menu-knop__line { left: 8px; right: 8px; height: 1.5px; transition: transform var(--motion-fade) var(--ease-out), opacity var(--motion-press) ease; }
.menu-knop__line:nth-child(1) { top: 14px; }
.menu-knop__line:nth-child(2) { top: 21px; }
.menu-knop__line:nth-child(3) { top: 28px; transform: scaleX(.75); transform-origin: left; }
.menu-knop.open .menu-knop__line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-knop.open .menu-knop__line:nth-child(2) { transform: rotate(-45deg); }
.menu-knop.open .menu-knop__line:nth-child(3) { transform: scaleX(.2); opacity: 0; }
@media (min-width: 981px) {
  /* Langere bestemmingsnamen blijven binnen het scherm en zijn ook op lage vensters bereikbaar. */
  .site-header .nav-submenu { width: 300px; }
  body header.site-header .nav-submenu a { line-height: 1.4; }
  .site-header .nav-submenu > a { max-width: 100%; }
}
@media (min-width: 981px) and (max-height: 680px) {
  .site-header .nav-submenu { max-height: calc(100dvh - 112px); overflow-y: auto; overscroll-behavior: contain; }
}
@media (max-width: 980px) {
  html.js-enabled body header.site-header .nav { grid-template-columns: 1fr auto; }
  html.js-enabled .site-header .nav-right { grid-column: 2; gap: 0; }
  html.js-enabled .site-header .nav-right > :is(.contact-action, .taal) { display: none; }
  .site-header .menu-knop { margin: 0 -8px 0 0; }
  /* Alleen de root blokkeert scroll; body overflow maakt een nieuwe sticky-scrollcontainer. */
  /* 24 september: het menu valt als een druppel onder de knop open, net als de desktopsubmenu's,
     en vult niet meer het hele scherm. De vorm tekent site.js (mobiel-menu__blob). */
  body .mobiel-menu, body[data-route] .mobiel-menu {
    z-index: 1001; inset: auto; top: var(--mobiel-menu-top, var(--header-height)); left: 12px; right: 12px;
    display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
    max-height: calc(100dvh - var(--mobiel-menu-top, var(--header-height)) - 16px);
    background: transparent; color: var(--wit); overflow: visible; padding: 0;
    opacity: 1; transform: none; visibility: hidden;
    transition: opacity var(--motion-fade) ease, visibility 0s var(--motion-fade);
  }
  body .mobiel-menu.open { visibility: visible; transition-delay: 0s; }
  body .mobiel-menu.is-sluiten { opacity: 0; }
  body .mobiel-menu.is-blobbing .mobiel-menu__scroll { clip-path: var(--blob-clip, none); }
  /* Losse lichte kaart (voorbeeld van Jasper, 24 september): ronde hoeken, dunne rand, zachte schaduw. */
  .mobiel-menu__blob { position: absolute; top: 0; left: 0; z-index: -1; overflow: visible; pointer-events: none;
    fill: #FCFCFA; stroke: rgba(36, 46, 53, .09); stroke-width: 1; filter: drop-shadow(0 18px 36px rgba(36, 46, 53, .16)); }
  .mobiel-menu__scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .mobiel-menu nav { display: block; width: auto; margin: 0; padding: 12px 20px 20px; opacity: 0; transform: translateY(-6px); transition: opacity var(--motion-feedback) ease, transform 300ms var(--ease-out); }
  .mobiel-menu.is-inhoud nav { opacity: 1; transform: none; transition-delay: calc(var(--motion-menu-blob-mobiel) * .3); }
  .mobiel-menu.menu-instant nav { transition: none; }
  .mobiel-menu__achtergrond {
    position: fixed; inset: 0; z-index: 1000; background: rgba(18, 32, 34, .14);
    opacity: 0; visibility: hidden; transition: opacity var(--motion-fade) ease, visibility 0s var(--motion-fade);
  }
  html.menu-open .mobiel-menu__achtergrond { opacity: 1; visibility: visible; transition-delay: 0s; }
  body .mobiel-menu a { opacity: 1; transform: none; transition: color var(--motion-feedback) ease; font-family: var(--font-body); font-size: .94rem; }
  .mobile-route { border: 0; border-bottom: 1px solid color-mix(in srgb, var(--wit) 18%, transparent); border-radius: 0; box-shadow: none; }
  .mobile-route > summary {
    min-height: 72px; padding: 16px 0; display: flex; align-items: center; justify-content: space-between; gap: 20px;
    cursor: pointer; list-style: none; color: var(--wit); background: transparent;
    font: 400 1.55rem/1.2 var(--font-display); border: 0;
  }
  .mobile-route > summary::-webkit-details-marker { display: none; }
  .mobile-route > summary::after { display: none; }
  @media (hover: hover) and (pointer: fine) {
  .mobile-route > summary:hover { background: transparent; }
}
  .mobile-route__plus { width: 18px; height: 18px; flex: 0 0 18px; position: relative; }
  .mobile-route__plus::before, .mobile-route__plus::after { content: ''; position: absolute; top: 8px; left: 2px; width: 14px; height: 1px; background: currentColor; transition: transform var(--motion-fade) var(--ease-out), opacity var(--motion-feedback) ease; }
  .mobile-route__plus::after { transform: rotate(90deg); }
  .mobile-route.is-expanded .mobile-route__plus::after { transform: rotate(0); opacity: 0; }
  .mobile-route__body { overflow: hidden; }
  .mobile-route__body::after { content: ''; display: block; height: 18px; }
  .mobile-route__body a { min-height: 46px; padding: 9px 0; line-height: 1.45; gap: 16px; justify-content: space-between; }
  .mobile-route__body a svg { flex: 0 0 16px; width: 16px; height: 16px; opacity: .45; }
  .mobile-route__body a[aria-current] { text-decoration: underline; text-underline-offset: 5px; }
  .mobiel-menu__bottom { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; margin: 24px 0 0; padding-bottom: env(safe-area-inset-bottom); }
  body .mobiel-menu .mobiel-menu__contact { min-height: 48px; padding-inline: 26px; background: var(--training-main); color: var(--training-ink) !important; justify-content: center; }
  .mobiel-menu__bottom .taal { letter-spacing: 0; font-size: .84rem; font-weight: 400; }
  .mobile-route > summary:focus-visible { outline: 2px solid var(--wit); outline-offset: 4px; }
  body .mobiel-menu.menu-instant { transition: none; }
  /* Inhoud van de lichte kaart: gewone rijen, één scheidingslijn, onderaan twee brede ronde knoppen. */
  body .mobiel-menu, body[data-route] .mobiel-menu { color: var(--ink); --menu-line: var(--line); }
  body .mobiel-menu .mobile-route { border-bottom: 0; }
  body .mobiel-menu .mobile-route > summary { min-height: 50px; padding: 10px 2px; color: var(--ink); font: 500 1.08rem/1.3 var(--font-body); }
  body .mobiel-menu .mobile-route__plus { color: var(--ink-soft); }
  body .mobiel-menu a { color: var(--ink) !important; }
  body .mobiel-menu .mobile-route__body a { color: var(--ink-soft) !important; min-height: 44px; padding: 8px 2px; font-size: .92rem; }
  body .mobiel-menu .mobile-route__body a[aria-current] { color: var(--ink) !important; }
  body .mobiel-menu .mobile-route__body::after { height: 8px; }
  body .mobiel-menu .mobile-route > summary:focus-visible { outline: 2px solid var(--therapy-deep); outline-offset: 2px; border-radius: var(--button-radius); }
  body .mobiel-menu .mobiel-menu__bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0 0; padding-top: 16px; border-top: 1px solid var(--line); }
  /* Twee knoppen naast elkaar in de stijl van de Contact-knop: vlak Training-beige, 8 px hoeken, Lucide-icoon. */
  body .mobiel-menu .mobiel-menu__knop { min-height: 48px; width: 100%; padding: 0 12px; gap: 8px; border-radius: var(--button-radius);
    background: var(--training-main); color: var(--training-ink) !important; font-size: .9rem; font-weight: 500; letter-spacing: 0; box-shadow: none; }
  body .mobiel-menu .mobiel-menu__knop svg { flex: 0 0 16px; }
}
@media (prefers-reduced-motion: reduce) {
  body .mobiel-menu { transform: none; opacity: 0; transition: opacity var(--motion-press) ease, visibility 0s var(--motion-press); }
  body .mobiel-menu.open { opacity: 1; }
  .menu-knop__line, .mobile-route__plus::before, .mobile-route__plus::after { transition: none; }
}
html.noanim body .mobiel-menu { transition: none; }
html.noanim .menu-knop__line, html.noanim .mobile-route__plus::before, html.noanim .mobile-route__plus::after { transition: none; }
@media (min-width: 981px) {
  .site-header .nav-dropdown[open]::before { width: 300px; }
}

/* PLAN-17: betekenisvolle groepen in desktop- en mobiele navigatie. */
.nav-group { margin: 12px 0 0; padding: 16px 0 0; border-top: 1px solid var(--menu-line, var(--line)); }
.nav-group__title { margin: 0 0 4px; font: 600 .9rem/1.5 var(--font-body); color: inherit; }
.nav-group__links { list-style: none; margin: 0; padding: 0 0 0 16px; }
.nav-group__links li { margin: 0; padding: 0; }
body header.site-header .nav-group a { border: 0; min-height: 36px; padding-block: 7px; font-size: .82rem; }
@media (max-width: 980px) {
  /* Boven het paneel blijven, ook terwijl de open/sluittransitie loopt. */
  html.js-enabled body header.site-header { z-index: 1010; }
  .mobiel-menu { --menu-line: color-mix(in srgb, var(--wit) 18%, transparent); }
  .mobile-route .nav-group { margin-top: 16px; padding-top: 16px; }
  .mobile-route .nav-group__title { font-size: .94rem; }
  body .mobiel-menu .nav-group a { font-size: .88rem; min-height: 44px; }
}

/* PLAN-24: mobiele platformlaag, zonder scroll of knijpzoom te blokkeren. */
:root {
  --page-left: max(28px, env(safe-area-inset-left, 0px));
  --page-right: max(28px, env(safe-area-inset-right, 0px));
}
html { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-height) + 12px); }
.wrap { padding-left: var(--page-left); padding-right: var(--page-right); }
body header.site-header { padding-top: env(safe-area-inset-top, 0px); }
body header.site-header .nav { height: calc(var(--header-height) - env(safe-area-inset-top, 0px)); }
.portal-body, html[data-header="transparent"] .portal-body,
html:not(.js-enabled) body.portal .portal-body { padding-left: var(--page-left); padding-right: var(--page-right); }
.footer-v3 .footer-legal { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
[id] { scroll-margin-top: 12px; } /* De root reserveert al de headerhoogte. */
.veld input, .veld textarea, .veld select, .choice-summary textarea { font-size: max(1rem, 16px); scroll-margin-block: 16px; }
.veld { min-width: 0; }
/* Lange woorden mogen ook bij 200% tekstvergroting de gridkolom niet oprekken. */
main { overflow-wrap: anywhere; }
.aanmelden-grid > *, .persoonlijk-contact__grid > *, .stap > *, .aanbod-card { min-width: 0; }
.field-error { margin-top: 7px; font-size: .875rem; line-height: 1.5; font-weight: 600; color: var(--dark); }
.veld [aria-invalid="true"] { border: 2px solid var(--therapy-deep); }
.form-status { overflow-wrap: anywhere; }
.form-status.mislukt { border-left: 3px solid currentColor; padding-left: 12px; }
.form-status:not([hidden]) { scroll-margin-block: 20px; }

button, a, summary, .keuze label, .choice-check, [role="button"] { touch-action: manipulation; }
button, summary, .keuze label, .choice-check, [role="button"] {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
/* Jasper kiest geen browserflits of grijs drukvlak; open/gekozen/focus blijft zichtbaar. */
.btn, .menu-knop, .choice-guide__option, .choice-check, .keuze label,
.faq-list summary, .klacht-accordion summary, .mobile-route > summary, .nav-dropdown > summary,
.portal-card, .email-copy { -webkit-tap-highlight-color: transparent; }
.choice-guide__option, .choice-check, .keuze label,
.faq-list summary, .klacht-accordion summary, .mobile-route > summary, .email-copy {
  transition: background-color var(--motion-press) var(--ease-out), border-color var(--motion-press) var(--ease-out), color var(--motion-press) var(--ease-out);
}
.choice-guide__option:active, .choice-check:active, .keuze label:active { border-color: var(--dark); }
.keuze input:checked + label:active { background-color: var(--dark); color: var(--beige); }
body .btn.contact-action:active { background: var(--contact-hover) !important; color: var(--dark) !important; }
.portal-card:active .portal-card__action { text-decoration: underline; text-underline-offset: 4px; }

/* Het kopieericoon staat naast de mailactie, met een eigen raakvlak. */
.email-copy-control { display: grid; grid-template-columns: minmax(0,1fr) 44px; column-gap: 6px; align-items: center; min-width: 0; }
.email-copy-control > a { min-width: 0; }
.email-copy { appearance: none; display: inline-flex; align-items: center; justify-content: center; position: relative;
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--button-radius);
  background: transparent; color: var(--dark); cursor: pointer; }
.email-copy svg { position: relative; width: 17px; height: 17px; }
.email-copy .email-copy__icon-check { display: none; }
.email-copy.is-copied .email-copy__icon-copy { display: none; }
.email-copy.is-copied .email-copy__icon-check {
  display: block;
  animation: check-pop var(--motion-feedback, 180ms) cubic-bezier(.16, 1, .3, 1);
}
@keyframes check-pop {
  0% { transform: scale(.6); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.email-copy.is-copied { color: var(--therapy-deep, var(--dark)); }
.footer-v3 .email-copy.is-copied { color: var(--meditation-main); }
.email-action > .email-copy.is-copied::before {
  background: color-mix(in srgb, var(--therapy-main, #E3A98E) 40%, var(--wit));
}
.email-copy::before { content: ''; position: absolute; inset: 6px; border-radius: 6px;
  background: color-mix(in srgb,currentColor 8%,transparent); transition: background var(--motion-feedback) ease; }
.footer-v3 .email-copy { color: var(--wit); }
@media (hover: hover) and (pointer: fine) {
  .email-copy:hover::before { background: color-mix(in srgb,currentColor 14%,transparent); }
}
.email-copy:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.email-copy-status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.email-copy-control:has(.email-copy.is-error) .email-copy-status,
.email-copy-status.is-error {
  position: static;
  width: auto;
  height: auto;
  margin: 6px 0 0;
  clip: auto;
  white-space: normal;
  color: #b00020;
  grid-column: 1 / -1;
  font-size: .8rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
/* Eén visuele e-mailknop, met twee losse en toegankelijke acties. */
.email-copy-control--compound { display: flex; flex-direction: column; align-items: stretch; }
.email-action { display: grid; grid-template-columns: minmax(0,1fr) 44px; align-items: center; flex: 1;
  min-height: 60px; padding-right: 5px; border: 1px solid var(--line); border-radius: var(--button-radius);
  transition: background var(--motion-feedback) ease; }
body .email-action > .btn.contact-email { border: 0; border-radius: var(--button-radius) 0 0 var(--button-radius);
  min-width: 0; min-height: 58px; height: 100%; padding-inline: 12px; transform: none; box-shadow: none; }
.email-action > .email-copy { position: relative; background: transparent; }
.email-action > .email-copy::before {
  background: color-mix(in srgb,var(--dark) 8%,var(--wit)); border: 1px solid color-mix(in srgb,var(--dark) 10%,transparent); }
.email-action > .email-copy svg { position: relative; width: 17px; height: 17px; }
@media (hover: hover) and (pointer: fine) {
  .email-action:hover { background: var(--contact-hover); }
  .email-action > .email-copy:hover::before { background: color-mix(in srgb,var(--dark) 14%,var(--wit)); }
}
body .email-action > .btn.contact-email:is(:hover,:active,:focus-visible) { background: transparent !important; }
.email-action:has(.contact-email:focus-visible), .email-action:has(.contact-email:active) { background: var(--contact-hover); }

.footer-v3 .email-copy-control { width: fit-content; max-width: 100%; }
.footer-v3__contact { min-width: 0; }
.portal-card :is(h2,h3), .portal-card__label, .mobile-route > summary,
.choice-guide__option, .choice-summary__trigger { overflow-wrap: anywhere; }
.choice-guide__option > span { min-width: 0; }
.choice-disclosure .choice-popover { max-width: min(var(--choice-width, calc(100vw - 32px)), 420px); translate: 0 var(--choice-offset-y, 0px); }
.choice-summary__editor textarea { max-width: 100%; }

@media (any-pointer: coarse) {
  .veld input, .veld textarea, .veld select, .choice-summary textarea { font-size: max(1.0625rem, 17px); }
  .footer-v3__route li a, .footer-v3__route-head, .footer-v3__brand > a:not(.logo-lockup),
  .footer-v3__contact a, .footer-legal > span:last-child a { min-height: 44px; }
  .footer-legal > span:last-child a { display: inline-flex; align-items: center; }
}
@media (max-width: 980px) {
  .veld input, .veld textarea, .veld select, .choice-summary textarea { font-size: max(1.0625rem, 17px); }
  body .mobiel-menu { height: auto; bottom: auto; } /* druppelpaneel: zo hoog als de inhoud (24 september) */
  .mobiel-menu nav { padding-left: calc(var(--page-left) - 12px); padding-right: calc(var(--page-right) - 12px); } /* tekst lijnt uit met het logo */
  .mobiel-menu__bottom { padding-bottom: env(safe-area-inset-bottom, 0px); flex-wrap: wrap; }
  .footer-v3__route li a, .footer-v3__route-head, .footer-v3__brand > a:not(.logo-lockup),
  .footer-v3__contact a { min-height: 44px; }
  .footer-legal > span:last-child { display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; row-gap: 2px; }
  .footer-legal > span:last-child a { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (max-width: 699px) {
  .contact-shell .aanmelden-grid {
    padding-left: max(24px, calc(env(safe-area-inset-left, 0px) - 12px));
    padding-right: max(24px, calc(env(safe-area-inset-right, 0px) - 12px));
  }
  .choice-summary__trigger { white-space: normal; text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .choice-guide__option, .choice-check, .keuze label, .faq-list summary,
  .klacht-accordion summary, .mobile-route > summary, .email-copy { transition: none; }
}
html.noanim :is(.choice-guide__option, .choice-check, .keuze label, .faq-list summary,
.klacht-accordion summary, .mobile-route > summary, .email-copy) { transition: none; }

/* PLAN-24: één blijvende voortgangslijn; snelle nieuwe keuzes sturen haar bij. */
.choice-guide__step { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 12px; min-height: 44px; }
.choice-guide__meter { width: 88px; height: 3px; display: block; border-radius: 3px; overflow: hidden; background: var(--line); }
.choice-guide__meter-fill { display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--dark);
  transform: scaleX(0); transform-origin: left center; transition: transform var(--motion-layout) var(--ease-out); }
.choice-guide__meter.is-instant .choice-guide__meter-fill,
html.noanim .choice-guide__meter-fill { transition: none; }
@media (prefers-reduced-motion: reduce) { .choice-guide__meter-fill { transition: none; } }

/* Onderwerpkeuze: dezelfde lichte vlakken, randen en hoeken als het formulier. */
.sati-select { width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
  min-height:52px; padding:14px 16px; border:1px solid var(--line); border-radius:var(--button-radius);
  font:inherit; font-size:max(1rem,16px); text-align:left; color:var(--dark); background:var(--wit); cursor:pointer; }
.sati-select__value { min-width:0; overflow-wrap:anywhere; }
.sati-select__chevron { flex:0 0 8px; width:8px; height:8px; border-right:1.5px solid; border-bottom:1.5px solid; transform:translateY(-2px) rotate(45deg); }
.sati-select[aria-expanded="true"] .sati-select__chevron { transform:translateY(2px) rotate(225deg); }
.sati-select:focus-visible { outline:3px solid var(--therapy-soft); outline-offset:3px; }
.sati-select[aria-invalid="true"] { border-color:var(--therapy-deep); }
.sati-select__list { position:fixed; z-index:1200; overflow-y:auto; overscroll-behavior:contain; padding:6px;
  border:1px solid var(--line); border-radius: var(--block-radius); background:var(--wit); color:var(--dark);
  box-shadow:0 8px 24px color-mix(in srgb,var(--dark) 10%,transparent); }
.sati-select__option { display:flex; align-items:center; gap:12px; min-height:48px; padding:10px 12px;
  border-radius:var(--button-radius); font-size:max(1rem,16px); line-height:1.5; cursor:pointer; }
.sati-select__option.is-active { background:var(--training-main); }
.sati-select__option.is-chosen::after { content:'✓'; margin-left:auto; }
@media (hover:hover) and (pointer:fine) { .sati-select__option:hover { background:var(--contact-hover); } }
@media (max-width:599px), (pointer:coarse) { .sati-select,.sati-select__option { font-size:max(1.0625rem,17px); } }

/* Alleen echte laadproblemen vragen aandacht; de pagina blijft intussen staan. */
.language-status { position:fixed; z-index:1300; top:calc(var(--header-height) + 12px); right:28px; left:28px;
  width:fit-content; max-width:min(560px,calc(100% - 56px)); margin-left:auto; padding:16px 20px;
  border:1px solid var(--line); border-radius: var(--block-radius); color:var(--dark); background:var(--wit); font-size:.9rem; line-height:1.5; }
.language-status a { text-decoration:underline; text-underline-offset:3px; }
[data-word-split].is-translated, [data-word-split].is-translated * { animation:none !important; opacity:1; filter:none; transform:none; }

.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }

/* Ook kleur- en disclosurefeedback volgt de actuele bewegingsvoorkeur. */
html.noanim .email-action, html.noanim .email-copy::before, html.noanim .choice-answers.is-animating > summary > svg { transition: none; }
@media (prefers-reduced-motion: reduce) { .email-action,.email-copy::before,.choice-answers.is-animating > summary > svg { transition: none; } }

/* Interne stijlgids; waarden worden uit bovenstaande tokens gelezen. */
.gids-motion-table { border-collapse: collapse; width: 100%; margin-block: 24px 40px; font-size: .85rem; }
.gids-motion-table :is(th,td) { text-align: left; vertical-align: top; padding: 14px 18px 14px 0; border-bottom: 1px solid var(--line); }
.gids-motion-table td:nth-child(2) { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Persoonlijke missie en een gelijk ritme rond de keuzehulp. */
:root { --home-section-gap: 150px; --motion-underline-in: 350ms; --motion-underline-out: 250ms; }
body.portal main { background: var(--therapy-light); }
.mission-statement { padding-bottom: 0; }
.mission-statement__opening { display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; gap: clamp(40px,6vw,88px); }
.mission-statement__portrait { margin: 0; position: relative; overflow: hidden; border-radius: var(--block-radius); }
.mission-statement__portrait img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 4.5; object-fit: cover; object-position: 50% 40%; border-radius: var(--block-radius); }
.mission-statement__portrait figcaption { position: absolute; inset: auto 0 0; padding: 64px 28px 26px; font-size: 1rem; color: var(--wit); background: linear-gradient(transparent, rgb(0 0 0 / .7)); }
.mission-statement__portrait figcaption span { display: block; margin-top: 6px; font-size: .8rem; color: inherit; opacity: .85; }
.mission-statement__quote { margin: 0; }
.mission-statement__quote h2 { font-size: clamp(1.9rem,3.1vw,2.85rem); font-weight: 400; line-height: 1.16; letter-spacing: -.025em; text-wrap: balance; color: var(--therapy-deep); }
.mission-statement__story { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px,6vw,88px); margin-top: 88px; }
/* Twee blokken: links eindigt met de vraag, rechts is even lang geschreven (24 september), dus even hoog. */
.mission-statement__story p { margin: 0 0 22px; font-size: 1rem; line-height: 1.8; color: var(--ink-soft); }
.mission-statement__story p:last-child { margin-bottom: 0; }
.mission-statement__story a { color: var(--therapy-deep); text-underline-offset: 4px; }
.mission-statement__closing { margin-top: 48px; text-align: center; }
.mission-statement__signature { margin: 0; color: var(--therapy-deep); }
.mission-statement__name { display: inline-block; width: clamp(135px,12.5vw,165px); max-width: 100%; } /* Handtekening A (Herr Von Muellerhoff), gekozen 24 september; bewust klein */
.signature-art { display: block; width: 100%; height: auto; overflow: visible; }
.mission-statement__role { display: block; margin-top: 8px; font-size: .95rem; color: var(--ink-soft); }
/* Meer over mij: de standaard omlijnde knop (.btn.outline), 24 september. */
.mission-statement__closing .mission-statement__about { margin-top: 18px; min-height: 44px; }
.mission-statement__about:focus-visible, .mission-statement__story a:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
body.portal .mission-statement + .choice-guide { margin-top: var(--home-section-gap); margin-bottom: 0; }
body.portal .choice-guide + .contact-shell,
body.portal .contact-shell { padding: 0; background: transparent; }
body.portal .contact-shell > .aanmelden { border-radius: 0; }
/* 22 september: keuzehulp en contact delen één raster, één kopstijl en dezelfde lijnen.
   Tekst begint op dezelfde linkerlijn; vragenkaart en formulier zijn even breed. */
body.portal .choice-guide__layout,
body.portal .algemeen-contact .aanmelden-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 7vw, 100px); }
body.portal .contact-shell > .aanmelden { padding-inline: 0; }
/* Zelfde buitenmarge als iedere .wrap, ook waar de losse contactkaart extra inspringing had. */
body.portal .contact-shell .aanmelden-grid { padding-left: var(--page-left); padding-right: var(--page-right); }
body.portal .algemeen-contact .aanmelden-grid > div:first-child { padding-top: 28px; }
body.portal .algemeen-contact h2 { font-size: clamp(2.1rem, 3.8vw, 3.15rem); line-height: 1.14; margin: 22px 0 26px; max-width: 11em; }
body.portal .algemeen-contact .lede { font-size: inherit; max-width: 29em; }
/* Binnenkant gelijk: velden en keuzeknoppen beginnen en eindigen op dezelfde lijn, koppen even groot. */
body.portal .algemeen-contact form { padding: clamp(24px, 3vw, 40px); }
body.portal .algemeen-contact form h3 { font-size: clamp(1.45rem, 2.1vw, 1.85rem); line-height: 1.25; }
@media (max-width: 980px) {
  body.portal .choice-guide__layout,
  body.portal .algemeen-contact .aanmelden-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  body.portal .algemeen-contact .aanmelden-grid > div:first-child { padding-top: 0; }
  body.portal .algemeen-contact h2 { max-width: 13em; }
  body.portal .algemeen-contact form { padding: 24px 20px; }
}
/* Het klikvlak en de letters houden hun maat tijdens het tekenen. */
.nav-route > .nav-route-link { padding-block: 0; min-height: 48px; }
.nav-underline { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 100%; max-width: 100%; pointer-events: none; clip-path: inset(0 50% 0 50%); transition: clip-path var(--motion-underline-out) var(--ease-out); }
.nav-route-link:focus-visible .nav-underline { clip-path: inset(0 0 0 0); transition-duration: var(--motion-underline-in); }
@media (hover: hover) and (pointer: fine) {
  .nav-route-link:hover .nav-underline { clip-path: inset(0 0 0 0); transition-duration: var(--motion-underline-in); }
  .nav-left:has(.nav-route-link:focus-visible) .nav-route-link:not(:focus-visible) .nav-underline { clip-path: inset(0 50% 0 50%); }
}
@media (hover: none), (pointer: coarse) {
  .nav-route-link[aria-current="page"] .nav-underline { clip-path: inset(0 0 0 0); transition: none; }
}
.mobile-route:has(a[aria-current="page"]) > summary, .mobile-route a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
html.noanim .nav-route-link .nav-underline { transition: none; }
html.noanim .email-copy.is-copied .email-copy__icon-check { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .nav-underline, .nav-route-link:is(:hover,:focus-visible) .nav-underline { transition: none; }
  .email-copy.is-copied .email-copy__icon-check { animation: none; }
}
@media (max-width: 700px) {
  :root { --home-section-gap: 104px; }
  .mission-statement__opening { grid-template-columns: 1fr; gap: 32px; }
  .mission-statement__quote { grid-row: 1; }
  .mission-statement__portrait { max-width: 450px; }
  .mission-statement__portrait img { aspect-ratio: 1; }
  .mission-statement__story { grid-template-columns: 1fr; margin-top: 56px; gap: 22px; }
  .mission-statement__closing { grid-template-columns: 1fr; gap: 20px; }
  .mission-statement__about { min-height: 44px; }
}

/* Eenmalige missie-entree: woorden komen tot rust, de naam schrijft zich uit. */
:root { --motion-signature: 2000ms; } /* handtekening A met snelheidsprofiel, 25 september */
.mission-quote-word { display: inline-block; }
[data-mission-quote].is-armed .mission-quote-word { opacity: 0; transform: translateY(.35em); }
[data-mission-quote].is-playing .mission-quote-word {
  animation: mission-word-in var(--motion-text) var(--ease-out) both;
  animation-delay: calc(var(--quote-word) * var(--motion-text-step));
}
@keyframes mission-word-in { to { opacity: 1; transform: translateY(0); } }
/* Small, one-shot SVG mask: dashoffset follows the actual pen paths. */
.signature-stroke { stroke-dasharray: 1; stroke-dashoffset: 0; }
[data-mission-signature].is-armed .signature-stroke { stroke-dashoffset: 1; opacity: 0; }
[data-mission-signature].is-playing .signature-stroke {
  animation: mission-pen-stroke calc(var(--motion-signature) * var(--stroke-time)) linear both;
  animation-delay: calc(var(--motion-signature) * var(--stroke-start));
}
@keyframes mission-pen-stroke {
  0% { stroke-dashoffset: 1; opacity: 0; }
  .1% { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}
.mission-motion-paused :is(.mission-quote-word,.signature-stroke) { animation-play-state: paused; }
html.noanim [data-mission-quote] .mission-quote-word,
html.noanim [data-mission-signature] .signature-stroke {
  animation: none; opacity: 1; transform: none; stroke-dashoffset: 0;
}
@media (prefers-reduced-motion: reduce) {
  [data-mission-quote] .mission-quote-word,
  [data-mission-signature] .signature-stroke {
    animation: none; opacity: 1; transform: none; stroke-dashoffset: 0;
  }
}

/* Interactieontwerp (24 september): zichtbare activiteit tijdens verzenden, zonder dat de knop verspringt. */
.btn[aria-busy="true"] { cursor: progress; }
.btn .knop-bezig { flex: 0 0 16px; animation: knop-draai 900ms linear infinite; }
@keyframes knop-draai { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn .knop-bezig { animation: none; } }
html.noanim .btn .knop-bezig { animation: none; }
/* Feedback op bedieningselementen die die nog misten. */
@media (hover: hover) and (pointer: fine) {
  .tariefkiezer__stand:hover { color: var(--therapy-deep); }
  .tariefkiezer__zelf:hover { text-decoration-thickness: 2px; }
}
.tariefkiezer__stand, .tariefkiezer__zelf { transition: color var(--motion-feedback) ease, text-decoration-thickness var(--motion-feedback) ease; }
@media (max-width: 980px) {
  /* Mobiel menu: dezelfde routekleur als de hover in het witte desktopsubmenu, bij aanwijzen en indrukken. */
  body .mobiel-menu .mobile-route > summary { transition: color var(--motion-feedback) ease; }
  body .mobiel-menu .mobile-route:nth-child(1) { --route-hover: var(--therapy-deep); }
  body .mobiel-menu .mobile-route:nth-child(2) { --route-hover: var(--training-accent); }
  body .mobiel-menu .mobile-route:nth-child(3) { --route-hover: var(--meditation-accent); }
  body .mobiel-menu .mobile-route > summary:active,
  body .mobiel-menu .mobile-route.is-expanded > summary { color: var(--route-hover); }
  body .mobiel-menu .mobile-route__body a { transition: color var(--motion-feedback) ease; }
  body .mobiel-menu .mobile-route__body a:active { color: var(--route-hover) !important; }
  body .mobiel-menu .mobiel-menu__knop:active { transform: scale(.97); transition-duration: var(--motion-press); }
}

/* iPad en andere aanraakschermen met het desktopmenu: ruime tikvlakken (24 september). */
@media (min-width: 981px) and (any-pointer: coarse) {
  body header.site-header .nav-dropdown > summary { min-width: 44px; min-height: 44px; display: inline-grid; place-items: center; }
  body header.site-header .nav-submenu a,
  body header.site-header .nav-group a { min-height: 44px; }
}

/* ===== Ronde 4 (24 september) ===== */
/* Vaste saliegroen, los van de routekleur (--sage wordt per route overschreven). */
:root { --salie: #4E625F; }
/* Tarieven in de kleuren van de keuzehulp ("Voor wie zoek je iets?"): beige vlak, wit paneel,
   beige gekozen staat en uitkomst, donkere accenten. */
body[data-route="therapie"] .tarieven { background: var(--training-main); }
.tariefkiezer__schuif { accent-color: var(--dark); }
.tariefkiezer__stand.is-actief { color: var(--dark); }
.tariefkiezer__zelf { color: var(--dark); }
.tariefkiezer__uitkomst { background: var(--training-main); }
.tariefkiezer__prijs { color: var(--dark); }
@media (hover: hover) and (pointer: fine) { .tariefkiezer__stand:hover { color: var(--dark); } }
/* Eén vraagregel bovenaan het paneel, zoals de keuzehulp. */
.tariefkiezer__voortgang { margin: 0 0 -8px; font-size: .78rem; color: var(--ink-soft); }
.tariefkiezer__voortgang .choice-guide__meter-fill { transform-origin: left; transition: transform var(--motion-layout) var(--ease-out); }
/* Meer lucht boven Wat ik behandel, nu de intro weg is. */
body[data-route="therapie"] .herken { padding-top: clamp(72px, 9vw, 128px); }
/* De voordelen onder de therapiehero in de donkere tekstkleur van de Therapiefamilie: haalt in ieder palet 4,5:1. */
html[data-style="gelaagd"] .therapy-hero .usp { color: var(--therapy-on); }
/* Mobiel menu: Contact links (donkerblauw), taal rechts (salie), inhoud gecentreerd. */
@media (max-width: 980px) {
  body .mobiel-menu .mobiel-menu__knop { justify-content: center; text-decoration: none; }
  body .mobiel-menu .mobiel-menu__contact { order: 1; background: var(--dark); color: var(--wit) !important; }
  body .mobiel-menu .mobiel-menu__bottom .taal { order: 2; background: var(--salie); color: var(--wit) !important; }
  body .mobiel-menu .mobiel-menu__knop span { text-decoration: none; }
}

/* ===== Over mij: nieuwe opbouw (ronde 4, 24 september) =====
   Volgt de Therapiefamilie en dus het gekozen palet; het blok over aandacht staat in de kleuren van Meditatie. */
.over-pagina main { background: var(--therapy-light); }
.over-hero { padding: clamp(72px, 8vw, 112px) 0 clamp(48px, 6vw, 72px); }
.over-hero .pagina-hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(40px, 6vw, 88px); }
.over-hero h1 { font-size: clamp(2.3rem, 4.6vw, 3.6rem); line-height: 1.08; letter-spacing: -.02em; }
.over-portret { position: relative; margin: 0; justify-self: end; width: min(420px, 100%); overflow: hidden; border-radius: var(--block-radius); box-shadow: 0 30px 70px rgb(73 54 38 / .22); }
.over-portret img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 4.8; object-fit: cover; object-position: 50% 40%; }
.over-portret figcaption { position: absolute; inset: auto 0 0; padding: 64px 26px 22px; font-size: 1rem; color: var(--wit); background: linear-gradient(transparent, rgb(0 0 0 / .66)); }
.over-portret figcaption span { display: block; margin-top: 4px; font-size: .8rem; opacity: .85; }
.over-feiten { list-style: none; margin: clamp(48px, 6vw, 72px) 0 0; padding: 28px 0 0; justify-content: flex-start; gap: 14px 40px; border-top: 1px solid rgb(73 54 38 / .16); }
.over-hero .over-feiten .usp { color: var(--therapy-on); font-size: .9rem; }
.over-hero .over-feiten .usp svg { color: var(--therapy-deep); }

.over-blok { padding: clamp(72px, 9vw, 128px) 0; }
.over-blok:not(.over-blok--aandacht, .over-blok--vlak) + .over-blok:not(.over-blok--aandacht, .over-blok--vlak) { padding-top: 0; }
.over-blok__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 24px clamp(40px, 7vw, 104px); align-items: start; }
.over-blok__kop { position: sticky; top: 120px; }
.over-blok__kop .kicker { color: var(--therapy-deep); }
.over-blok__kop h2 { margin: 0; font-size: clamp(1.7rem, 2.8vw, 2.35rem); line-height: 1.15; text-wrap: balance; }
.over-blok .prose { max-width: 38em; }
.over-blok .prose p { font-size: 1.04rem; line-height: 1.8; }
.over-blok .prose p:last-child { margin-bottom: 0; }

.over-blok--aandacht { background: var(--meditation-soft); }
.over-blok--aandacht .over-blok__grid { grid-template-areas: "kop tekst" "tijdlijn tekst"; grid-template-rows: auto 1fr; }
.over-blok--aandacht .over-blok__kop { grid-area: kop; position: static; }
.over-blok--aandacht .over-blok__kop .kicker { color: var(--meditation-accent); }
.over-blok--aandacht .prose { grid-area: tekst; }
.over-tijdlijn { grid-area: tijdlijn; list-style: none; margin: 16px 0 0; padding: 0; }
.over-tijdlijn li { position: relative; padding: 0 0 26px 30px; }
.over-tijdlijn li:last-child { padding-bottom: 0; }
.over-tijdlijn li::before { content: ""; position: absolute; left: 0; top: .3em; width: 9px; height: 9px; border-radius: 50%; background: var(--meditation-accent); box-shadow: 0 0 0 4px var(--meditation-soft); }
.over-tijdlijn li:not(:last-child)::after { content: ""; position: absolute; left: 4px; top: 1.2em; bottom: .2em; width: 1px; background: color-mix(in srgb, var(--meditation-accent) 35%, transparent); }
.over-tijdlijn__jaar { display: block; font-size: .78rem; font-weight: 600; letter-spacing: .08em; font-variant-numeric: tabular-nums; color: var(--meditation-accent); }
.over-tijdlijn__wat { display: block; margin-top: 3px; font-size: 1.02rem; font-weight: 600; color: var(--dark); }
.over-tijdlijn__hoe { display: block; margin-top: 2px; font-size: .9rem; color: var(--ink-soft); }

.over-blok--cv .cv { margin-top: 0; }
.over-pagina .cv-reg { background: color-mix(in srgb, var(--therapy-tint) 45%, var(--wit)); }
.over-pagina .cv-reg { position: relative; padding-right: 112px; }
.over-pagina .cv-reg .nip-merk { position: absolute; right: 34px; top: 50%; width: 56px; height: 56px; margin: 0; transform: translateY(-50%); }

.over-slot { padding: 0 0 clamp(96px, 11vw, 150px); }
.over-afsluiter { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 28px 56px; padding: clamp(32px, 5vw, 64px); border-radius: var(--form-radius); background: var(--therapy-main); color: var(--therapy-on); }
.over-afsluiter .kicker { color: var(--therapy-on-soft); }
.over-afsluiter h2 { margin: 0 0 14px; font-size: clamp(1.8rem, 3.2vw, 2.6rem); color: var(--therapy-on); }
.over-afsluiter p { margin: 0; max-width: 34em; color: var(--therapy-on-soft); }
@media (max-width: 980px) {
  .over-hero .pagina-hero-grid, .over-blok__grid, .over-blok--aandacht .over-blok__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; grid-template-rows: none; gap: 28px; }
  .over-blok--aandacht :is(.over-blok__kop, .prose, .over-tijdlijn) { grid-area: auto; }
  .over-blok__kop { position: static; }
  .over-portret { justify-self: start; }
  .over-hero .usp-strip.over-feiten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 16px 24px; margin-top: 44px; }
  .over-hero .over-feiten .usp { align-items: flex-start; }
  .over-afsluiter { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .over-afsluiter .btn { justify-self: start; }
  .over-pagina .cv-reg { padding-right: 92px; }
  .over-pagina .cv-reg .nip-merk { right: 22px; }
}
@media (max-width: 420px) {
  .over-hero .usp-strip.over-feiten { grid-template-columns: minmax(0, 1fr); }
}

/* ===== Ronde 5 (24 september) ===== */
/* Voordelenstroken: tot 980 px één blok in het midden, iconen in één kolom en tekst links uitgelijnd.
   De regels verschijnen na elkaar (120 ms) en ieder icoon tekent zichzelf. */
@media (max-width: 980px) {
  .usp-strip { display: grid; grid-template-columns: minmax(0, max-content); justify-content: center; justify-items: start; }
  .usp { align-items: flex-start; text-align: left; }
  .usp svg { margin-top: max(0px, calc((1lh - 21px) / 2)); }
}
.usp-strip[data-stagger] { --motion-stagger-step: 120ms; }
.usp-icon .teken { stroke-dasharray: 1; stroke-dashoffset: 1; }
.usp-strip.in .usp-icon .teken { animation: uspTeken 900ms var(--ease-out) forwards; animation-delay: calc(var(--stagger-base, 0ms) + var(--i, 0) * 120ms + 150ms); }
@keyframes uspTeken { to { stroke-dashoffset: 0; } }
html.noanim .usp-icon .teken { stroke-dashoffset: 0; animation: none; }
@media (prefers-reduced-motion: reduce) { .usp-icon .teken { stroke-dashoffset: 0; animation: none; } }
/* Tarieven zoals de keuzehulp: tekst links, kiezer rechts (tot 980 px onder elkaar). */
.tarieven__layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 7vw, 100px); align-items: start; }
.tarieven .tarieven__intro { max-width: none; margin: 0; padding-top: 28px; text-align: left; }
.tarieven .tarieven__intro h2 { font-size: clamp(2.1rem, 3.8vw, 3.15rem); line-height: 1.14; margin: 22px 0 26px; max-width: 11em; }
.tarieven .tarieven__intro p { max-width: 29em; }
.tarieven .tarieven__intro .tarief-voetnoot { margin: 32px 0 0; max-width: 31em; text-align: left; font-size: .78rem; line-height: 1.65; }
.tarieven__kiezer .tariefkiezer, .tarieven__kiezer .tariefgroepen { max-width: none; margin: 0; }
@media (max-width: 980px) {
  .tarieven__layout { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .tarieven .tarieven__intro { padding-top: 0; }
  .tarieven .tarieven__intro h2 { max-width: 13em; }
  .tarieven .tarieven__intro .tarief-voetnoot { margin-top: 20px; }
}
/* Vraag 1: bedrag met Verder-knop; de uitleg zit achter het info-icoon. */
.tariefkiezer__labelrij { display: flex; align-items: center; gap: 6px; }
.tariefkiezer__uitleg { position: relative; display: inline-flex; }
.tariefkiezer__info { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--button-radius); background: none; color: var(--ink-soft); cursor: help; transition: color var(--motion-feedback) ease, background-color var(--motion-feedback) ease; }
.tariefkiezer__info:focus-visible { outline: 2px solid var(--dark); outline-offset: 1px; }
.tariefkiezer__uitleg.is-open .tariefkiezer__info { color: var(--dark); background: var(--training-main); }
.tariefkiezer__tip { position: absolute; z-index: 5; left: 50%; bottom: calc(100% + 8px); width: max-content; max-width: min(300px, 78vw); padding: 12px 14px; border-radius: var(--field-radius); background: var(--dark); color: var(--wit); font-size: .82rem; line-height: 1.5; box-shadow: 0 12px 30px rgb(36 46 53 / .18);
  opacity: 0; visibility: hidden; transform: translate(-50%, 4px); transition: opacity var(--motion-feedback) ease, transform var(--motion-feedback) var(--ease-out), visibility 0s var(--motion-feedback); }
.tariefkiezer__uitleg:is(:hover, .is-open):not(.is-verborgen) .tariefkiezer__tip,
.tariefkiezer__uitleg:not(.is-verborgen) .tariefkiezer__info:focus-visible + .tariefkiezer__tip { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
@media (hover: hover) and (pointer: fine) { .tariefkiezer__info:hover { color: var(--dark); } }
.tariefkiezer__invoergroep { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.tariefkiezer__invoergroep .tariefkiezer__invoer { flex: 1 1 220px; max-width: 300px; }
.tariefkiezer__verder { min-height: 52px; display: inline-flex; align-items: center; gap: 10px; }
.tariefkiezer__fout { font-size: .82rem; color: #A1402E; }
.tariefkiezer__fout:empty { display: none; }
@media (pointer: coarse) { .tariefkiezer__info { width: 44px; height: 44px; margin: -6px -6px -6px -4px; } }
@media (max-width: 560px) { .tariefkiezer__tip { left: auto; right: -8px; transform: translateY(4px); } .tariefkiezer__uitleg:is(:hover, .is-open):not(.is-verborgen) .tariefkiezer__tip, .tariefkiezer__uitleg:not(.is-verborgen) .tariefkiezer__info:focus-visible + .tariefkiezer__tip { transform: none; } }
html.noanim .tariefkiezer__tip { transition: none; }
@media (prefers-reduced-motion: reduce) { .tariefkiezer__tip { transition: none; } }
/* Verder in het donkerblauw van de keuzehulp, ook op de Therapiepagina. */
html body .tariefkiezer .btn.tariefkiezer__verder { background: var(--dark); color: var(--wit); }
@media (hover: hover) and (pointer: fine) { html body .tariefkiezer .btn.tariefkiezer__verder:hover { background: var(--dark); } }

/* Routekaarten als één familie met de opening (ronde 5).
   Zelfde vormtaal: doorschijnende vlakken, dunne lijnen, een stip als anker en een langzame eigen beweging.
   Bij aanwijzen of toetsenbordfocus komt alles in 1,2 s tot rust (--los van 1 naar 0):
   Therapie komt samen, Training lijnt uit, Meditatie (eigen natuurstijl) wordt stil. Buiten beeld pauzeert alles (.is-motion-visible). */
@property --los { syntax: '<number>'; inherits: true; initial-value: 1; }
@property --golf { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --golf2 { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --hoek { syntax: '<angle>'; inherits: true; initial-value: 0deg; }
@keyframes route-golf { from { --golf: -1; } to { --golf: 1; } }
@keyframes route-golf2 { from { --golf2: -1; } to { --golf2: 1; } }
@keyframes route-draai { to { transform: rotate(360deg); } }
@keyframes kompas-zoek { 0%, 100% { --hoek: -30deg; } 24% { --hoek: 16deg; } 46% { --hoek: -10deg; } 72% { --hoek: 22deg; } }
@keyframes aandacht-dwaal { 0% { --hoek: 0deg; } 16% { --hoek: 48deg; } 26% { --hoek: 30deg; } 45% { --hoek: 132deg; } 55% { --hoek: 118deg; } 78% { --hoek: 250deg; } 88% { --hoek: 236deg; } 100% { --hoek: 360deg; } }
.route-art { --los: 1; transition: --los var(--art-merge-duration, 1200ms) var(--ease-out); }
:where(.route-art g) { transform-box: view-box; transform-origin: 0 0; }
.route-portal-card:focus-visible .route-art { --los: 0; }
@media (hover: hover) and (pointer: fine) {
  .route-portal-card:hover .route-art { --los: 0; }
  .route-portal-card:hover :is(.route-art, .route-art *) { animation-play-state: paused; }
}
.route-portal-card:focus-visible :is(.route-art, .route-art *) { animation-play-state: paused; }

/* EMDR: een stip gaat rustig heen en weer; de kant waar hij is licht op. Tot rust: beide kanten worden één. */
.route-art--emdr { animation: route-golf 2.8s var(--ease-in-out) infinite alternate; }
.emdr-stip { transform: translateX(calc(var(--golf) * var(--los) * 104px)); }
.emdr-kant--links { transform: translateX(calc(var(--los) * -50px)); opacity: calc(.7 - var(--golf) * var(--los) * .3); }
.emdr-kant--rechts { transform: translateX(calc(var(--los) * 50px)); opacity: calc(.7 + var(--golf) * var(--los) * .3); }
/* CGT: drie vierkanten zweven los van elkaar. Tot rust: ze staan recht en in elkaar, geordend. */
.cgt-vorm { transform: translate(calc(var(--golf) * var(--los) * var(--dx)), calc(var(--golf2) * var(--los) * var(--dy))) rotate(calc(var(--basis, 0deg) * var(--los) + var(--golf) * var(--los) * var(--dr))); }
.cgt-vorm--1 { --dx: 8px; --dy: 6px; --dr: 6deg; animation: route-golf 11s var(--ease-in-out) -3s infinite alternate, route-golf2 13s var(--ease-in-out) -7s infinite alternate; }
.cgt-vorm--2 { --dx: -12px; --dy: 10px; --dr: -10deg; --basis: 45deg; animation: route-golf 8s var(--ease-in-out) -5s infinite alternate, route-golf2 10s var(--ease-in-out) -2s infinite alternate; }
.cgt-vorm--3 { --dx: 14px; --dy: -12px; --dr: 14deg; animation: route-golf 6s var(--ease-in-out) -1s infinite alternate, route-golf2 7s var(--ease-in-out) -4s infinite alternate; }
/* Mindfulness: de adem zet uit en in (10 s per ademhaling); de aandacht dwaalt langs de rand. Tot rust: de aandacht keert terug naar het midden. */
.adem { animation: route-golf 5s var(--ease-in-out) infinite alternate; transform: scale(calc(.89 + var(--golf) * var(--los) * .11)); }
.aandacht { animation: aandacht-dwaal 28s var(--ease-in-out) infinite; transform: rotate(var(--hoek)); }
.aandacht__stip { transform: translateY(calc(var(--los) * -112px)); }
/* Zelfleiderschap: de naald zoekt. Tot rust: hij wijst recht omhoog. */
.kompas-naald { animation: kompas-zoek 13s var(--ease-in-out) infinite; transform: rotate(calc(var(--hoek) * var(--los))); }
/* Veerkracht en focus: woelige golven en een surfer (bal) die erin rondtolt. Bij aanwijzen wordt het water rustig,
   staat de golf op en ligt de surfer bovenop de kam (Jasper, 25 september: plank weg, golven heftiger). */
.golf { transform-origin: 0 110px; }
.golf--achter { animation: route-golf 3.4s var(--ease-in-out) -1.2s infinite alternate, route-golf2 2.3s var(--ease-in-out) infinite alternate;
  transform: translate(calc(var(--golf) * var(--los) * 22px), calc(var(--golf2) * var(--los) * 6px)); }
.golf--midden { animation: route-golf 2.7s var(--ease-in-out) -.6s infinite alternate, route-golf2 1.9s var(--ease-in-out) -.9s infinite alternate;
  transform: translate(calc(var(--golf) * var(--los) * -30px), calc(var(--golf2) * var(--los) * 8px)) scaleY(calc(1 + var(--golf2) * var(--los) * .22 + (1 - var(--los)) * .1)); }
.golf--voor { animation: route-golf 2.2s var(--ease-in-out) infinite alternate, route-golf2 1.6s var(--ease-in-out) -.4s infinite alternate;
  transform: translate(calc(var(--golf) * var(--los) * 36px), calc(var(--golf2) * var(--los) * 7px)) scaleY(calc(1 + var(--golf2) * var(--los) * .28 + (1 - var(--los)) * .3)); }
.surfer { animation: route-golf 2.1s var(--ease-in-out) -1.3s infinite alternate, route-golf2 1.4s var(--ease-in-out) infinite alternate;
  transform: translate(calc(var(--golf) * var(--los) * 58px), calc((62px + var(--golf2) * 26px) * var(--los) - (1 - var(--los)) * 21px));
  opacity: calc(.5 + (1 - var(--los)) * .5); }
.surfer > circle:first-child { transform-box: view-box; transform-origin: 0 0; transform: scale(calc(1 + (1 - var(--los)) * .45)); }
/* Samenwerken: twee cirkels bewegen naar elkaar toe en weer weg, en draaien om elkaar. Tot rust: ze worden één cirkel. */
.samen-paar { animation: route-golf 9s var(--ease-in-out) infinite alternate, route-golf2 6s var(--ease-in-out) -2s infinite alternate; transform: rotate(calc(var(--golf) * var(--los) * 32deg)); }
.samen-cirkel--a { transform: translateX(calc(-1 * var(--los) * (38px + var(--golf2) * 14px))); }
.samen-cirkel--b { transform: translateX(calc(var(--los) * (38px + var(--golf2) * 14px))); }
/* Meditatie heeft een eigen stijl: natuurlijke elementen (inkt, steen, water) in plaats van meetkunde.
   Bij aanwijzen wordt het stil. */
@property --p { syntax: '<number>'; inherits: true; initial-value: .5; }
@keyframes route-tijd { from { --p: 0; } to { --p: 1; } }
/* Eén dag: de zon beschrijft langzaam een dagboog, van horizon tot horizon (12 s); de kring ademt mee.
   Tot rust: de zon staat op het hoogste punt en de kring gaat open. */
@keyframes dag-boog { from { --hoek: 0deg; } to { --hoek: 180deg; } }
.dag-baan { animation: dag-boog 12s var(--ease-in-out) infinite alternate; transform: rotate(calc(var(--hoek) * var(--los) + 90deg * (1 - var(--los)))); }
.dag-zon { transform-box: view-box; }
.dag-kring { animation: route-golf 3s var(--ease-in-out) infinite alternate; transform: scale(calc(1 + var(--golf) * var(--los) * .12 + (1 - var(--los)) * .35)); }
/* Zes weken: een ring van zes delen, één per week. De delen lichten om de beurt op (zes seconden rond).
   Tot rust: alle zes staan vol en de kern komt tot stilstand. */
@keyframes week-licht { 0%, 100% { stroke-opacity: .28; } 12% { stroke-opacity: .95; } 40% { stroke-opacity: .55; } }
.week { stroke-opacity: .28; animation: week-licht 6s var(--ease-in-out) infinite; animation-delay: calc(var(--k) * 1s); }
.weken-ring { transition: none; }
.weken-kern { animation: route-golf 4s var(--ease-in-out) infinite alternate; transform: scale(calc(.94 + var(--golf) * var(--los) * .06 + (1 - var(--los)) * .06)); }
@media (hover: hover) and (pointer: fine) {
  .route-portal-card:hover .week { animation: none; stroke-opacity: .9; transition: stroke-opacity 600ms var(--ease-out); transition-delay: calc(var(--k) * 90ms); }
}
.route-portal-card:focus-visible .week { animation: none; stroke-opacity: .9; }
/* Verdiepen: een kleine bal zakt in het water, drie kringen lopen uit en vervagen; onder het oppervlak liggen lagen diepte.
   Tot rust: het water wordt stil, de kringen liggen rustig verdeeld en de diepte wordt zichtbaar. */
.route-art--water { animation: route-tijd 6s linear infinite; }
.druppel {
  --q: clamp(0, calc(var(--p) / .3), 1);
  transform: translateY(calc(var(--q) * var(--q) * 106px));
  opacity: calc(clamp(0, calc(var(--p) * 20), 1) * (1 - clamp(0, calc((var(--p) - .28) * 30), 1)) * var(--los));
}
.rimpel {
  --r: clamp(0, calc((var(--p) - .3 - var(--k) * .12) / .5), 1);
  --rust: calc(.35 + var(--k) * .3);
  transform: scale(calc((.08 + .92 * var(--r)) * var(--los) + var(--rust) * (1 - var(--los))));
  opacity: calc(min(1, var(--r) * 8) * (1 - var(--r)) * var(--los) + .5 * (1 - var(--los)));
}
.water-diepte { opacity: calc(.6 + (1 - var(--los)) * .4); transform: translateY(calc((1 - var(--los)) * 8px)); }
.water-diepte--2 { transform: translateY(calc((1 - var(--los)) * 16px)); }

html.noanim .route-art { --los: 1 !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { .route-art { --los: 1 !important; transition: none !important; } }

/* ===== Ronde 7 (25 september) ===== */
/* Raameffect: het schilderij en de bewegende kleurvlakken staan vast in beeld; de pagina schuift eroverheen.
   Techniek: de sectie knipt (clip-path) een laag die position: fixed heeft. Geen transform op de voorouders. */
.portal-hero { clip-path: inset(0); }
.portal-hero .portal-media {
  position: fixed; inset: 0 0 auto 0; height: 100vh; height: 100lvh;
  background-image: url(art/sjisjkin-eikenbos-1887.webp);
  -webkit-mask-image: none; mask-image: none;
}
@media (max-width: 699px) {
  .portal-hero::before { display: none; }
  .portal-body, html[data-header="transparent"] .portal-body,
  html:not(.js-enabled) body.portal .portal-body { padding-bottom: 72px; }
}
.aanmelden:has(> .contact-lava) { isolation: isolate; clip-path: inset(0 round var(--aanmelden-radius, 0px)); }
.contact-shell > .aanmelden { --aanmelden-radius: var(--form-radius); }
body.portal .contact-shell > .aanmelden { --aanmelden-radius: 0px; }
.aanmelden > .contact-lava { position: fixed; inset: -12%; }
/* Iedere routepagina krijgt onder het formulier haar eigen kleurvlakken. De tinten houden de lichte tekst
   op minstens 4,5:1 contrast. */
body[data-route="therapie"] .aanmelden { --lava-1: #8A4632; --lava-2: #652F20; --lava-3: #844430; --lava-4: #5E2B1D; }
body[data-route="training"] .aanmelden { background: #5A5C52; --lava-1: #4E5A56; --lava-2: #60625A; --lava-3: #474B45; --lava-4: #5E6058; }
body[data-route="meditatie"] .aanmelden { background: var(--meditation-deep); --lava-1: #4F6340; --lava-2: #3E5243; --lava-3: #566645; --lava-4: #506147; }
body[data-route] .aanmelden .contact-lava__blob--sky { background: var(--lava-1); }
body[data-route] .aanmelden .contact-lava__blob--sun { background: var(--lava-2); }
body[data-route] .aanmelden .contact-lava__blob--peach { background: var(--lava-3); opacity: 1; }
body[data-route] .aanmelden .contact-lava__blob--cloud { background: var(--lava-4); opacity: 1; }
body[data-route] .aanmelden::before { z-index: 1; }
/* Menulijn: precies zo breed als het woord. Tekent zich bij aanwijzen van links naar rechts (480 ms, zacht
   uitlopend) en schuift bij weggaan naar rechts weg (320 ms). De oude SVG-lijn was zo breed als de link. */
:root { --motion-underline-in: 480ms; --motion-underline-out: 320ms; }
.nav-route-link .nav-underline { display: none; }
.nav-route-link .nav-label { position: relative; width: fit-content; margin-inline: auto; }
.nav-route-link .nav-label::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1.5px; border-radius: 2px;
  background: currentColor; transform: scaleX(0); transform-origin: right center;
  transition: transform var(--motion-underline-out) cubic-bezier(.65, 0, .35, 1);
}
.nav-route-link:focus-visible .nav-label::after { transform: scaleX(1); transform-origin: left center; transition: transform var(--motion-underline-in) cubic-bezier(.22, 1, .36, 1); }
@media (hover: hover) and (pointer: fine) {
  .nav-route-link:hover .nav-label::after { transform: scaleX(1); transform-origin: left center; transition: transform var(--motion-underline-in) cubic-bezier(.22, 1, .36, 1); }
  .nav-left:has(.nav-route-link:focus-visible) .nav-route-link:not(:focus-visible) .nav-label::after { transform: scaleX(0); transform-origin: right center; }
}
@media (hover: none), (pointer: coarse) { .nav-route-link[aria-current="page"] .nav-label::after { transform: scaleX(1); transition: none; } }
html.noanim .nav-route-link .nav-label::after { transition: none; }
@media (prefers-reduced-motion: reduce) { .nav-route-link .nav-label::after { transition: none; } }
/* Training: de contactknop had dezelfde kleur als de achtergrond van de hero. Nu donkerblauw, met een lichte
   achterkant bij het kantelen. */
/* Tariefkiezer: verticaal in het midden naast de tekst zolang hij korter is dan de tekst. */
.tarieven__kiezer { align-self: center; }
@media (max-width: 980px) { .tarieven__kiezer { align-self: start; } }
/* Ervaring op Therapie: één keer per bezoek. Eerst het aanhalingsteken, dan de woorden rustig na elkaar,
   dan een lijntje en de naam. */
.quote__card.is-armed::before { opacity: 0; transform: scale(.6) rotate(-8deg); }
.quote__card.is-armed .quote-woord { opacity: 0; }
.quote__card.is-armed :is(cite, .quote-context) { opacity: 0; }
.quote__card::before { transform-origin: 50% 70%; }
.quote-woord { display: inline-block; }
.quote__card cite::before { content: ""; display: block; width: 40px; height: 1px; margin: 0 auto 14px; background: currentColor; opacity: .5; transform-origin: center; }
.quote__card.is-armed cite::before { transform: scaleX(0); }
.quote__card.is-playing::before { animation: quote-teken 700ms var(--ease-out) both; }
.quote__card.is-playing .quote-woord { animation: quote-woord 700ms var(--ease-out) both; animation-delay: calc(300ms + var(--qw) * 30ms); }
.quote__card.is-playing cite { animation: quote-vervolg 600ms var(--ease-out) both; animation-delay: calc(500ms + var(--qw-totaal) * 30ms); }
.quote__card.is-playing cite::before { animation: quote-lijn 700ms var(--ease-out) both; animation-delay: calc(500ms + var(--qw-totaal) * 30ms); }
.quote__card.is-playing .quote-context { animation: quote-vervolg 600ms var(--ease-out) both; animation-delay: calc(700ms + var(--qw-totaal) * 30ms); }
@keyframes quote-teken { from { opacity: 0; transform: scale(.6) rotate(-8deg); } to { opacity: .45; transform: none; } }
@keyframes quote-woord { from { opacity: 0; transform: translateY(.35em); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes quote-vervolg { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes quote-lijn { from { transform: scaleX(0); } to { transform: scaleX(1); } }
html.noanim .quote__card :is(.quote-woord, cite, .quote-context), html.noanim .quote__card::before, html.noanim .quote__card cite::before { animation: none !important; opacity: revert; transform: none; filter: none; }
@media (prefers-reduced-motion: reduce) { .quote__card :is(.quote-woord, cite, .quote-context), .quote__card::before, .quote__card cite::before { animation: none !important; } }
/* Menu op het schilderij: een iets donkerder strook bovenin (alleen de hoogte van de header), zodat de witte
   menutekst en EN op ieder schilderij leesbaar blijven. Geen gloed achter de tekst (Jaspers keuze). */
.portal-media.is-art::after {
  background:
    linear-gradient(180deg, rgba(18, 32, 34, .62) 0, rgba(18, 32, 34, .34) 64px, rgba(18, 32, 34, 0) 120px),
    linear-gradient(rgba(18, 32, 34, .14), rgba(18, 32, 34, .14)),
    radial-gradient(60% 34% at 50% 34%, rgba(18, 32, 34, .34), transparent 100%),
    linear-gradient(180deg, rgba(18, 32, 34, .40) 0%, rgba(18, 32, 34, .10) 22%, rgba(18, 32, 34, 0) 48%, rgba(18, 32, 34, .24) 100%);
}
/* De vaste kleurlaag bestaat alleen zolang de formuliersectie in beeld is: scheelt tekenwerk, en hulpmiddelen
   die clip-path niet meenemen (zoals axe) zien hem dan ook niet achter het menu. */
html.js-enabled .aanmelden > .contact-lava:not(.is-in-beeld) { visibility: hidden; }

/* ===== Ronde 8 (25 september) ===== */
/* Contactknop: donkerblauw bovenaan Therapie, Training en Meditatie (transparante header); na scrollen, op de
   donkerblauwe header, weer beige zoals altijd. */
body.route-entry .site-header:not(.is-scrolled) .contact-cube__front { background: var(--dark); color: var(--wit); }
body.route-entry .site-header:not(.is-scrolled) .contact-cube__next { background: var(--wit); color: var(--dark); }
/* Mobiel menu: de taalknop in Training-beige met donkere tekst (Contact blijft donkerblauw). */
@media (max-width: 980px) {
  body .mobiel-menu .mobiel-menu__bottom .taal { background: var(--training-main); color: var(--dark) !important; }
}
/* Kleurvlakken onder de formulieren van rand tot rand: geen lichte rand links, rechts en onder. */
.contact-shell { padding: 0; background: transparent; }
.contact-shell > .aanmelden { border-radius: 0; --aanmelden-radius: 0px; }
/* Rustiger kleurvlakken: alle vormen bewegen 1,6 keer zo langzaam. */
.contact-lava__blob--sky { animation-duration: 16s; }
.contact-lava__blob--sun { animation-duration: 20s; }
.contact-lava__blob--peach { animation-duration: 24s; }
.contact-lava__blob--cloud { animation-duration: 18s; }
/* Tariefkiezer: titel met info-icoon op één regel; het paneel staat precies in het midden van het tekstvlak links
   (de tekst heeft 28 px ruimte bovenin, dus het paneel schuift 28 px mee). */
.tariefkiezer__titelrij { display: flex; align-items: center; gap: 8px; }
.tarieven__kiezer { align-self: center; margin-top: 28px; }
@media (max-width: 980px) { .tarieven__kiezer { align-self: start; margin-top: 0; } }
/* Hero-parallax: de vaste laag is 24vh hoger dan het venster, zodat hij trager mee kan schuiven zonder dat de
   onderkant zichtbaar wordt; 4% groter voor de muisbeweging. */
.portal-hero .portal-media {
  height: calc(100vh + 24vh); height: calc(100lvh + 24lvh);
  transform: translate3d(var(--muis-x, 0px), calc(var(--parallax-y, 0px) + var(--muis-y, 0px)), 0) scale(1.04);
  transform-origin: 50% 0; will-change: transform;
}
html.noanim .portal-hero .portal-media { transform: none; }
@media (prefers-reduced-motion: reduce) { .portal-hero .portal-media { transform: none; } }

/* ===== Ronde 9 (25 september) ===== */
/* Geen raameffect en geen parallax meer (Jasper vond het niet mooi). De kleurvlakken onder de formulieren
   schuiven gewoon mee met de pagina. Het schilderij in de hero scrolt ook mee, maar 12% trager (site.js zet
   --schuif-y), zodat de pagina er heel licht overheen schuift. Zonder JavaScript of met minder beweging
   scrolt het schilderij gewoon mee. */
.aanmelden > .contact-lava { position: absolute; }
.portal-hero .portal-media {
  position: absolute; inset: 0; height: auto;
  transform: translate3d(0, var(--schuif-y, 0px), 0);
  will-change: transform;
}
html.noanim .portal-hero .portal-media { transform: none; }
@media (prefers-reduced-motion: reduce) { .portal-hero .portal-media { transform: none; } }
/* Contactknop op de opening: bij aanwijzen draait hij naar groen, zoals na scrollen en op de andere pagina's
   met een donkere header. Alleen Therapie, Training en Meditatie draaien bovenaan naar wit. */
body.portal .site-header:not(.is-scrolled) .contact-cube__next { background: var(--meditation-main); color: var(--meditation-ink); }
/* Dieptepagina's: Over mij, CGT, EMDR, Mindfulness en de zes programmapagina's van Training en Meditatie
   delen één opbouw. Een hero met een feitenstrook, daarna blokken met de kop links (plakt bij scrollen) en de
   inhoud rechts. Eén blok per pagina krijgt een zacht vlak in de routekleur (over-blok--vlak). */
body[data-route="therapie"] { --diepte-vlak: color-mix(in srgb, var(--therapy-tint) 42%, var(--beige)); }
body[data-route="training"] { --diepte-vlak: var(--training-main); }
body[data-route="meditatie"] { --diepte-vlak: color-mix(in srgb, var(--meditation-main) 42%, var(--meditation-soft)); }
.over-blok--vlak { background: var(--diepte-vlak); }
.over-blok__inhoud { min-width: 0; }
.over-blok__inhoud > :first-child { margin-top: 0; }
.over-blok__inhoud .faq-list { max-width: none; margin-top: 0; }
.over-blok__inhoud .prose + * { margin-top: 28px; }
.over-blok .prose + .prose { margin-top: 18px; }
.diepte-hero h1 { font-size: clamp(2.1rem, 3.9vw, 3rem); line-height: 1.1; }
.diepte-hero .over-feiten { margin-top: clamp(40px, 5vw, 64px); }
/* Training en Meditatie: de hero en de koppen volgen de routekleur, zoals Therapie dat al deed. */
body[data-route="training"] .pagina-hero {
  background: linear-gradient(180deg, var(--training-main) 0%, var(--training-main) 55%, color-mix(in srgb, var(--training-main) 50%, var(--training-light)) 85%, var(--training-light) 100%);
}
body[data-route="meditatie"] .pagina-hero {
  background: linear-gradient(180deg, var(--meditation-main) 0%, var(--meditation-main) 55%, color-mix(in srgb, var(--meditation-main) 45%, var(--meditation-soft)) 85%, var(--meditation-soft) 100%);
}
body:is([data-route="training"], [data-route="meditatie"]) .pagina-hero h1 { color: var(--route-on); }
body:is([data-route="training"], [data-route="meditatie"]) .pagina-hero :is(.lede, .terug) { color: var(--route-on-soft); }
body:is([data-route="training"], [data-route="meditatie"]) .pagina-hero .kicker { color: var(--route-on); opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  body:is([data-route="training"], [data-route="meditatie"]) .pagina-hero .terug:hover { color: var(--route-on); }
}
body:is([data-route="training"], [data-route="meditatie"]) .over-hero .over-feiten { border-top-color: var(--route-line); }
body:is([data-route="training"], [data-route="meditatie"]) .over-hero .over-feiten .usp,
body:is([data-route="training"], [data-route="meditatie"]) .over-hero .over-feiten .usp svg { color: var(--route-on); }
body:is([data-route="training"], [data-route="meditatie"]) .over-blok__kop .kicker { color: var(--route-accent); }
body:is([data-route="training"], [data-route="meditatie"]) .over-blok__kop h2 { color: var(--route-on); }
/* Het programma-icoon in de hero: dezelfde tekening als op de kaart, zonder link of tekst. */
.product-kaart { width: min(360px, 100%); }
.product-kaart .portal-card { display: block; position: relative; aspect-ratio: 4 / 4.6; height: auto; min-height: 0; border-radius: inherit; pointer-events: auto; cursor: default; }
.product-kaart .portal-card__art { position: absolute; inset: 0; width: 100%; height: 100%; }
.product-kaart .route-portal-card {
  --card-bg: var(--hero-card-light); --card-ink: var(--hero-card-ink); --card-accent: var(--card-ink);
  --card-line: color-mix(in srgb, var(--card-ink) 16%, transparent);
}
.product-kaart--1 .route-portal-card { --card-bg: var(--hero-card-dark); --card-ink: var(--wit); }
.product-kaart--3 .route-portal-card { --card-bg: var(--hero-card-mid); }