/* TWK Lausanne — het lettertype van deonlinepsycholoog.nl zelf.
   Drie gewichten, precies de drie die de live site laadt: 200 voor de grote
   koppen, 400 voor lopende tekst, 500 voor labels en knoppen. Samen 85 KB.
   De bestanden komen van hun eigen server; zie MANIFEST.md in shared/fonts/.

   Inter Tight blijft als terugval staan. Het is de naaste verwant die er is:
   dezelfde neo-grotesk-bouw en een vergelijkbare x-hoogte, dus een pagina die
   Lausanne niet laadt verschuift nauwelijks.

   Dit blok is er eerder uitgevallen bij het opruimen van ongebruikte CSS,
   waarna de site stil op een systeemletter terugviel. Vandaar de test in
   tokens.test.js die controleert dat het er staat. */
@font-face {
  font-family: "TWK Lausanne";
  font-style: normal; font-weight: 200; font-display: swap;
  src: url("./fonts/lausanne-200.woff2") format("woff2");
}
@font-face {
  font-family: "TWK Lausanne";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("./fonts/lausanne-400.woff2") format("woff2");
}
@font-face {
  font-family: "TWK Lausanne";
  font-style: normal; font-weight: 500; font-display: swap;
  src: url("./fonts/lausanne-500.woff2") format("woff2");
}
@font-face {
  font-family: "Inter Tight";
  font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("./fonts/inter-tight-var.woff2") format("woff2");
}

/* De Online Psycholoog — fundering.
   Dezelfde bouwwijze als De Online Coach; de kleuren zijn die van DOP.
   Geen dark mode: het merk is licht, en de live site heeft hem niet. */

:root {
  /* Eén groene ramp. De drie middelste waarden zijn gemeten uit de live site
     — het knopgroen, het mintvlak en het groen van de voet — en daar
     omheen is de schaal afgemaakt. Elk getal hieronder is narekenbaar;
     tokens.test.js doet dat bij elke run. */
  --green-50:  #eff6f3;
  --green-100: #d5ece5;   /* het mintvlak van de live site */
  --green-200: #b4d4cb;   /* randen op mint, waar --line te licht wegvalt */
  --green:     #2b7669;   /* merkkleur: vlakken, accenten, randen */
  --green-600: #256355;   /* knopvulling — 7,01:1 met witte tekst */
  --green-700: #1b4e45;   /* links, hover, focusring — 9,45:1 op wit */
  --green-800: #13342d;   /* de voet — 13,49:1 met wit */

  --ink:      #0a0a0a;
  /* Groener en donkerder dan de #5b6472 van De Online Coach. Dat grijs zakt
     op --green-100 naar 4,83:1, en juist op de mintvlakken staat hier veel
     bijtekst. Dit haalt daar 5,74:1 en op wit 7,10:1. */
  --muted:    #4a5c56;
  --panel:    #f3f7f5;
  --line:     rgba(0, 0, 0, .08);
  --on-green: #ffffff;
  /* Het merkgroen als losse kanalen, voor de plekken waar een doorzichtige
     variant nodig is. color-mix() zou netter zijn, maar dit werkt overal en
     is te lezen zonder de spec erbij. */
  --green-rgb: 43, 118, 105;
  --page:     #ffffff;

  --font: "TWK Lausanne", "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --gutter:  clamp(1.25rem, 3.4vw, 3rem);
  --max:     1440px;
  /* De vaste kop is 26px padding + 57px pil + 26px = 109px hoog. Blokken die
     hun inhoud verticaal centreren moeten die ruimte vrijhouden. */
  --kop-hoogte: 109px;
  --read:    68ch;
  --pad-y:   clamp(4.5rem, 9vw, 8rem);
  --radius:  16px;
  --radius-s: 10px;
  --shadow:  1px 5px 33px 4px rgba(0, 0, 0, .05);

  --ease: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 400 1.125rem/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

/* Een klasse met display: flex verslaat de display: none die de browser aan
   [hidden] geeft. Zonder deze regel staat het mobiele menupaneel open op
   desktop. Dit hoort bovenaan, vóór elke component. */
[hidden] { display: none !important; }

/* Chrome verbergt de inhoud van een gesloten <details> hier niet betrouwbaar:
   het antwoord van een FAQ-item bleef 197px hoog terwijl het item zelf 77px
   was, en legde zich dus over de volgende vraag heen. Hetzelfde gold voor de
   navigatiepanelen. Dit is wat de browser zelf hoort te doen. */
details:not([open]) > *:not(summary) { display: none; }

/* Typografie. De lichte koppen zijn het handelsmerk van dit merk; gewicht 200
   is geen toeval en mag niet zwaarder worden. */
/* Nederlandse samenstellingen worden lang: "verzuimbegeleiding" is op een
   scherm van 320px breder dan de kolom. break-word grijpt alleen in als er
   geen ander breekpunt is, dus in normale gevallen verandert er niets. */
h1, h2, h3 { margin: 0; text-wrap: balance; overflow-wrap: break-word; }
/* De maten van deonlinecoach.nl, tot op de clamp. Nagemeten op hun live site
   bij 1024px breed: h1 57,6px met -2,88px spatiëring op 63,36px regelhoogte,
   h2 40,96px met -1,024px op 47,104px. Deze regels geven precies dat.

   Eén afwijking, en die is onvermijdelijk: DOC zet h2 en h3 op gewicht 300.
   Lausanne heeft 200, 400 en 500 en geen 300. Op deze groottes ligt 200 daar
   het dichtst bij — 400 zou een kop van 41px log maken. */
h1 { font-size: clamp(2.75rem, 6vw, 3.6rem);  font-weight: 200; letter-spacing: -.05em;  line-height: 1.1; }
h2 { font-size: clamp(2rem, 4vw, 3.25rem);    font-weight: 200; letter-spacing: -.025em; line-height: 1.15; }
h3 { font-size: clamp(1.5rem, 2.6vw, 2.2rem); font-weight: 200; letter-spacing: -.02em;  line-height: 1.25; }

p { margin: 0 0 1em; max-width: var(--read); }
p:last-child { margin-bottom: 0; }

a { color: var(--green-700); text-underline-offset: .18em; }

/* Een alinea die direct op een kop volgt heeft ruimte nodig. Zonder deze
   regel plakt hij ertegenaan en lopen de staarten van de kop erin — dat gold
   op elke pagina waar een lede onder een h2 stond. */
:where(h1, h2, h3) + p,
:where(h1, h2, h3) + .lede,
:where(h1, h2, h3) + div > p:first-child { margin-top: 1.25rem; }

.lede { font-size: 1.25rem; color: var(--muted); }
.klein { font-size: .9375rem; line-height: 1.5; }

.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

/* Secties staan standaard op wit. Een grond wordt per sectie gekozen en niet
   volgens een mechanische cadans — dat liep te ver van het origineel af. In de
   praktijk: de band, de reviews en het afsluitblok krijgen er een, de rest
   blijft wit. */
.section { padding-block: var(--pad-y); }
.section--panel { background: var(--panel); }
/* Het gekleurde vlak van de dienstenpagina's. Op het origineel is dat
   #dce9f8 — dieper dan blue-50, zodat het echt als apart vlak leest en niet
   als een iets ander wit. */
.section--tint  { background: var(--green-100); }

/* Knoppen. De vulling is --green-600 en niet --green. Het merkgroen haalt met
   wit 5,39:1 en zou op zichzelf voldoen, maar dan blijft er geen ruimte over
   voor een hover die donkerder wordt zonder in de linkkleur te vallen. */
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; gap: .5em;
  padding: .85em 1.6em; border: 0; border-radius: 999px;
  background: var(--green-600); color: var(--on-green);
  font: 500 1rem/1 var(--font); text-decoration: none; cursor: pointer;
  transition: background .18s ease, transform .18s var(--ease), box-shadow .22s ease;
}
/* De vulling die van onderaf opkomt. Zo doet de live site het ook: een laag
   die op -76% staat en bij hover naar 0 schuift. Het is de enige beweging op
   de site die de bezoeker zelf uitlokt en hem op elke knop herkennen maakt.
   De laag ligt op z-index 0 en de tekst op 1, anders schuift de vulling er
   overheen. */
.btn::before {
  content: ""; position: absolute; z-index: 0; inset: 0;
  background: var(--green-700);
  transform: translateY(100%);
  transition: transform .42s var(--ease);
}
.btn > * { position: relative; z-index: 1; }
.btn:hover  { background: var(--green-600); }
.btn:hover::before, .btn:focus-visible::before { transform: none; }
.btn:active { transform: translateY(1px); }

/* Een knop op een donkere grond keert om: wit vlak, groene tekst, en de
   vulling komt in het mintgroen op. */
.site-footer .btn::before, .btn--licht::before { background: var(--green-100); }


:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--green-700);
  outline-offset: 3px;
  border-radius: 4px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.visually-hidden:focus {
  position: fixed; top: 1rem; left: 1rem; width: auto; height: auto;
  clip-path: none; padding: .75em 1.25em; background: var(--ink);
  color: var(--page); border-radius: 8px; z-index: 100;
}

/* ==========================================================================
   Voet — het donkergroen van de live site, met witte tekst
   Bij De Online Coach staat hier het logoblauw, dat met wit maar 3,52:1 haalt
   en dus onder AA zakt; het gewicht is daar opgeschroefd om dat te dekken. DOP
   heeft een donkergroene voet en heeft die concessie niet nodig: wit op
   #13342d haalt 13,49:1.
   ========================================================================== */

.site-footer {
  padding-block: clamp(3.5rem, 7vw, 6rem) 2rem;
  background: var(--green-800);
  color: var(--on-green);
  font-weight: 400;
}

.footer__grid {
  display: grid; gap: clamp(2.5rem, 5vw, 3rem) 2.5rem;
  grid-template-columns: minmax(16rem, 1.4fr) repeat(3, minmax(0, 1fr));
  max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter);
}
.footer__merk svg { width: 190px; height: auto; margin-bottom: 1.5rem; }
/* Het merkteken van DOP is een cirkel met twee bogen, geen pad. */
.footer__merk svg path, .footer__merk svg circle { fill: currentColor !important; }
.footer__merk p { color: var(--on-green); margin-bottom: 1.75rem; max-width: 30ch; }

.site-footer .btn { background: var(--page); color: var(--green-700); }
.site-footer .btn:hover { background: var(--green-100); }

.footer__kolom h2 {
  font-size: .8125rem; font-weight: 500; letter-spacing: .06em;
  text-transform: uppercase; color: var(--on-green);
  margin-bottom: 1.1rem;
}
.footer__kolom ul { margin: 0; padding: 0; list-style: none; }
.footer__kolom li + li { margin-top: .65rem; }
.footer__kolom ul a { color: var(--on-green); text-decoration: none; font-size: 1rem; }
.footer__kolom ul a:hover { text-decoration: underline; }

.footer__kolom address {
  font-style: normal; font-size: 1rem; line-height: 1.7;
  color: var(--on-green);
}
/* Elke link in de footer, ook die buiten een lijst of adres staat. Zonder deze
   regel valt hij terug op de groene linkkleur van a, en dat is op de
   donkergroene grond bijna onleesbaar. */
.site-footer p a,
.footer__kolom address a { color: var(--on-green); text-decoration: underline; }

.footer__onder {
  display: flex; flex-wrap: wrap; gap: 1rem 2rem;
  align-items: center; justify-content: space-between;
  max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter);
  margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, .3);
}
.footer__onder p { margin: 0; color: var(--on-green); }
.footer__legal ul {
  display: flex; flex-wrap: wrap; gap: 1.25rem;
  margin: 0; padding: 0; list-style: none;
}
.footer__legal ul a { font-size: .9375rem; color: var(--on-green); }
.footer__legal ul a:hover { color: var(--green-100); }

.site-footer :where(a, button):focus-visible { outline-color: var(--page); }

/* De footer blijft twee kolommen, ook op een telefoon. Eén kolom maakt hem
   een lange lijst waar je doorheen moet scrollen. */
@media (max-width: 900px) {
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__merk { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .footer__grid { gap: 2rem 1.25rem; }
  .footer__kolom h2 { font-size: .75rem; }
  .footer__kolom ul a, .footer__kolom address { font-size: .9375rem; }
  .footer__onder { flex-direction: column; align-items: flex-start; gap: .75rem; }
}

/* ==========================================================================
   Blokken
   Structuur volgt doc.brandium.dev; waar het origineel vlak of onaf oogt is
   het bijgewerkt. Elke afwijking staat in een comment met de reden.
   ========================================================================== */

/* --- kop: woordmerk links, pil in het midden, knop rechts ---------------- */

/* Vast en buiten de flow, zodat de gekleurde banner en de hero eronderdoor
   lopen. Met sticky nam de kop ruimte in en begon de banner er pas onder — de
   kop stond dan op een witte strook die er niet hoort. */
/* Een drieluik met gelijke zijkolommen: zo staat de pil exact in het midden
   van het scherm, ongeacht hoe breed het woordmerk of de knop is. Met
   space-between schoof hij mee met de breedte van de zijkanten. */
.site-head {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: grid; grid-template-columns: 1fr minmax(0, 780px) 1fr; align-items: center;
  gap: 1.5rem;
  padding: 26px clamp(1.25rem, 4vw, 3.6rem);
  pointer-events: none;
}
.site-head > .kop__cta,
.site-head > .kop__knop { justify-self: end; }
.site-head > * { pointer-events: auto; }

/* Bovenaan zweeft de kop vrij boven de pagina. Zodra je scrolt schuift er
   inhoud onderdoor en wordt hij onleesbaar; vanaf dat moment komt er een matte
   laag onder. Bewust een dunne sluier met veel blur en geen dekkend wit: boven
   de groene banner leest hij dan als lichtgroen en boven een witte sectie als
   wit. Een witte balk over een groene banner is precies wat er niet moet
   gebeuren. Alleen opacity animeert, dus het kost geen layout. */
.site-head::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  box-shadow: 0 1px 0 rgba(10, 10, 10, .06);
  opacity: 0; transition: opacity .28s ease;
}
.site-head.is-vast::before { opacity: 1; }

/* De pil blijft altijd wit — dat is de vorm die het merk draagt. Alleen de
   eigen schaduw gaat eraf zodra er een matte laag onder de kop ligt; die zou
   anders als een vlek op de balk liggen. */
.site-head.is-vast .links-wrap { box-shadow: none; }
.site-head.is-vast .kop__knop { box-shadow: none; }

.merk { flex: 0 0 auto; display: block; line-height: 0; color: var(--ink); }
.merk svg { width: 205px; height: 24px; flex-shrink: 0; max-width: none; display: block; }

.nav-bar { flex: 0 0 auto; }

/* Maten van de live .links-wrap, gemeten op 1420px breed: 780x49, padding 5px,
   gap 30px, radius 768px. De verdeling is space-evenly en niet center: daardoor
   spreiden de items zich over de volle pil in plaats van als tros in het midden
   te staan. */
.links-wrap {
  display: flex; align-items: center; justify-content: space-evenly; gap: 30px;
  /* De breedte komt van de middenkolom van de kop, niet van de pil zelf: die
     is minmax(0, 780px). Zo houdt hij de maat van het origineel zolang er
     ruimte is, en krimpt hij als eerste als het krap wordt — in plaats van de
     knop ernaast plat te drukken. */
  width: 100%; min-height: 49px;
  margin: 0; padding: 5px;
  list-style: none;
  background: var(--page);
  border-radius: 768px;
  box-shadow: 1px 5px 33px 4px rgba(0, 0, 0, .03);
}
/* De navitems heten bewust niet .btn: die klasse is in dit systeem de groene
   knop. */
.nav__item { border-radius: 4px; }

.nav__link {
  display: inline-flex; align-items: center; gap: .5em;
  font-size: 14px; font-weight: 200; color: var(--ink);
  text-decoration: none; white-space: nowrap; cursor: pointer;
}
.nav__link::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--green);
  transform: scale(0); transition: transform .2s var(--ease);
}
.nav__link:hover::before,
.nav__link[aria-current]::before { transform: scale(1); }

.nav__sub { position: relative; }
.nav__sub > summary { list-style: none; }
.nav__sub > summary::-webkit-details-marker { display: none; }
.nav__sub > summary::after {
  content: ""; width: .4em; height: .4em;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-.12em);
  transition: transform .2s var(--ease);
}
.nav__sub[open] > summary::after { transform: rotate(-135deg) translateY(-.12em); }


.nav__sublijst {
  position: absolute; top: calc(100% + 1.1rem); left: -1rem;
  min-width: 15rem; margin: 0; padding: .5rem;
  list-style: none; background: var(--page);
  border-radius: 14px; box-shadow: 1px 5px 33px 4px rgba(0, 0, 0, .08);
}
.nav__sublijst li a {
  display: block; padding: .6rem .85rem; border-radius: 9px;
  font-size: .9375rem; color: var(--ink); text-decoration: none;
}
.nav__sublijst li a:hover { background: var(--panel); }

/* De knop is bewust hoger dan de pil: 57px tegen 49px, gemeten op de live
   site. Die verhouding maakt de kop juist. */
.kop__cta { min-height: 57px; padding: .8em 1.6em; font-size: 15px; white-space: nowrap; }

/* --- mobiele kop en menu ------------------------------------------------- */

/* Een pil met het woord erin, net als op het origineel: "Menu" met twee
   streepjes, en zodra hij openstaat "Sluiten" met een kruis op een groene
   grond. Het woord wisselt met display:none en niet met opacity, zodat de
   toegankelijke naam van de knop meewisselt — een schermlezer leest anders
   allebei de woorden voor. */
/* De menuknop van de live site, nagemeten op een telefoon: een ronde knop van
   48 bij 48 met twee streepjes van 17 bij 1 in het merkgroen, vier pixels uit
   elkaar. Geen woord ernaast — het origineel heeft dat ook niet, en een woord
   in een ronde knop drukt de streepjes plat.

   Het woord staat er wel, maar alleen voor een schermlezer: die heeft een naam
   nodig en "knop" is er geen. Het wisselt mee naar "Sluiten" zodra het menu
   openstaat, zodat de naam klopt met wat de knop dan doet. */
.kop__knop {
  display: none;
  width: 48px; height: 48px; padding: 0;
  place-items: center;
  border: 0; border-radius: 50%; background: var(--page); cursor: pointer;
  color: var(--green);
  box-shadow: 1px 5px 33px 4px rgba(0, 0, 0, .06);
  transition: background .22s ease;
}
.kop__knop-woord--sluit { display: none; }
.kop__knop[aria-expanded="true"] .kop__knop-woord { display: none; }
.kop__knop[aria-expanded="true"] .kop__knop-woord--sluit { display: inline; }

/* Twee streepjes die naar een kruis vouwen. Geen derde balk die moet
   verdwijnen: het origineel heeft er ook twee. Openstaand is het alleen nog
   een kruis — de knop houdt zijn vorm, zodat hij niet van plek lijkt te
   springen op het moment dat het paneel eroverheen komt. */
.kop__streep {
  position: relative; display: block; width: 17px; height: 5px; flex: 0 0 auto;
}
.kop__streep::before, .kop__streep::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px;
  background: currentColor; transition: transform .22s var(--ease);
}
.kop__streep::before { top: 0; }
.kop__streep::after  { bottom: 0; }
[aria-expanded="true"] .kop__streep::before { transform: translateY(2px) rotate(45deg); }
[aria-expanded="true"] .kop__streep::after  { transform: translateY(-2px) rotate(-45deg); }

/* Het paneel beslaat het scherm. De hoogte gaat op 100dvh en niet 100vh: op
   iOS is 100vh hoger dan het zichtbare deel, waardoor de onderste knop achter
   de adresbalk verdwijnt. env(safe-area-inset-bottom) houdt hem vrij van de
   home-indicator. */
.mobielmenu {
  position: fixed; inset: 0; z-index: 45;
  display: flex; flex-direction: column;
  height: 100dvh;
  padding: 5.5rem 1.5rem calc(1.5rem + env(safe-area-inset-bottom));
  background: var(--page);
  overflow-y: auto; overscroll-behavior: contain;
}
.mobielmenu nav { flex: 1; }
.mobielmenu ul { margin: 0; padding: 0; list-style: none; }
.mobielmenu > nav > ul > li + li { border-top: 1px solid var(--line); }

.mobielmenu__link {
  display: flex; align-items: center; gap: 1.25rem;
  width: 100%; padding: 1.15rem .25rem;
  color: var(--ink); text-decoration: none;
  background: none; border: 0; text-align: left; cursor: pointer;
  font-family: inherit;
}
.mobielmenu__naam {
  flex: 1; font-size: 1.75rem; font-weight: 200; letter-spacing: -.02em;
  line-height: 1.15;
}

.mobielmenu__groep > summary { list-style: none; }
.mobielmenu__groep > summary::-webkit-details-marker { display: none; }

/* Een plus in een lichtgroene cirkel bij elk item dat openklapt, zoals op het
   origineel. Hij draait naar een kruis zodra de groep openstaat. */
.mobielmenu__plus {
  position: relative; flex: 0 0 auto;
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: var(--green-50);
}
.mobielmenu__plus::before, .mobielmenu__plus::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: .875rem; height: 1.5px; margin: -.75px 0 0 -.4375rem;
  background: var(--ink);
  transition: transform .22s var(--ease);
}
.mobielmenu__plus::after { transform: rotate(90deg); }
.mobielmenu__groep[open] .mobielmenu__plus::before { transform: rotate(45deg); }
.mobielmenu__groep[open] .mobielmenu__plus::after  { transform: rotate(-45deg); }

.mobielmenu .mobielmenu__sublijst { padding: 0 0 1rem .25rem; }
.mobielmenu__sublijst li a {
  display: block; padding: .65rem 0;
  font-size: 1.0625rem; color: var(--muted); text-decoration: none;
}
.mobielmenu__sublijst li a:hover { color: var(--green-700); }

.mobielmenu__voet {
  display: flex; flex-direction: column; gap: 1rem;
  padding-top: 1.75rem; margin-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.mobielmenu__voet .btn { justify-content: center; padding: 1em 1.6em; }

/* Het drieluik past tot ongeveer 1240px: woordmerk en knop vragen elk zo'n
   205px, de pil minstens 680px, en daar komen twee gaten en de marges bij.
   Daaronder gaat de navigatie naar het paneel — liever een menuknop dan een
   kop die zichzelf platdrukt. */
@media (max-width: 1240px) {
  .nav-bar, .kop__cta { display: none; }
  .kop__knop { display: grid; }
  /* Met het drieluik blijven er twee kinderen over: woordmerk en knop. De knop
     belandde dan in de middenkolom en stond dus midden in het scherm. Twee
     kolommen zetten hem terug tegen de rechterrand. */
  .site-head { grid-template-columns: 1fr auto; }
}
@media (max-width: 520px) {
  .merk svg { width: 168px; height: 20px; }
  .site-head { padding: 1rem 1.25rem; }
}
/* Op de smalste schermen wordt "Sluiten" breder dan "Menu" en past het
   drieluik van woordmerk, gat en pil niet meer binnen de marges. Beide gaan
   een maat kleiner in plaats van dat het woord verdwijnt: dat woord is juist
   wat de knop van het origineel herkenbaar maakt. */
@media (max-width: 420px) {
  .merk svg { width: 140px; height: 17px; }
  .site-head { gap: .75rem; }
  .kop__knop { width: 44px; height: 44px; }
}

/* --- hero: 100vh, tekst links, beeld full-bleed rechts ------------------- */

/* De ruimte boven én onder is even groot, dus het midden blijft precies waar
   het stond: op een gewoon scherm verandert er niets aan de plaatsing. Op een
   laag venster — een laptop van 1440x676 — groeit de hero in plaats van de kop
   door de eerste regel van de h1 te laten snijden. Dat gebeurde eerder wel.
   Het beeld staat absoluut en trekt zich van deze ruimte niets aan; het loopt
   dus nog steeds tot achter de kop door. */
.hero {
  position: relative;
  min-height: 100vh; min-height: 100dvh;
  padding-block: var(--kop-hoogte);
  display: grid;
  grid-template-columns: minmax(0, 742fr) minmax(0, 698fr);
  align-items: center;
}
.hero__tekst {
  grid-column: 1;
  padding: 2rem clamp(1.5rem, 4vw, 3.6rem);
  max-width: 46rem;
}
/* Het origineel zet dit als één alinea van vijftien regels. Op een telefoon is
   dat een muur tekst voordat je iets anders ziet; als losse alinea's leest het
   even snel en oogt het rustiger. */
.hero__lede { margin-top: 1.5rem; max-width: 38rem; }
.hero__lede p {
  font-size: 1.0625rem; font-weight: 200; line-height: 1.55;
  color: var(--muted); margin-bottom: .9em;
}
.hero__lede p:last-child { margin-bottom: 0; }
.hero .btn { margin-top: 2.25rem; }

/* Bewust géén grid-column: een absoluut geplaatst grid-kind met een expliciete
   plaatsing krijgt zijn eigen grid-area als referentie, niet de container. Met
   grid-column: 2 werd 51.5% dus 51,5% van de rechterkolom. */
.hero__beeld { position: absolute; inset: 0 0 0 51.5%; overflow: hidden; }
.hero__beeld img { width: 100%; height: 100%; object-fit: cover; }

/* Op een telefoon staat het beeld bovenaan: van rand tot rand, onder de
   zwevende kop door, met de titel erover. Zo staat het in het ontwerp, en het
   is ook de reden dat de kop vast en doorzichtig is.

   `display: contents` op de tekstkolom maakt de titel, de lede en de knop
   losse rasterkinderen van de hero. Daardoor kan alleen de titel over het
   beeld liggen terwijl de rest eronder blijft — zonder een extra element in de
   HTML, en dus ook zonder een wijziging in het WordPress-thema. */
@media (max-width: 900px) {
  /* Onderaan wel ruimte. Met padding-block: 0 stond de knop met zijn onderrand
     precies op de grens met de volgende sectie; volgt daar een gekleurd vlak —
     de signalen op de homepage — dan leek hij bij die sectie te horen. De
     ruimte is gelijk aan die tussen tekst en knop keer twee, zodat de knop
     duidelijk de afsluiting van de hero is. */
  .hero {
    grid-template-columns: 1fr; grid-auto-rows: auto;
    min-height: 0; padding-block: 0 clamp(3.5rem, 12vw, 4.5rem);
  }
  .hero__tekst { display: contents; }

  .hero__beeld {
    grid-row: 1; grid-column: 1;
    position: relative; inset: auto; margin: 0; border-radius: 0;
    height: 70vh; height: 70dvh;
  }
  .hero__beeld img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
  /* Wit op een foto is alleen leesbaar met iets eronder. Het verloop loopt van
     de onderrand op en is boven de helft volledig doorzichtig, zodat het beeld
     zelf niet vertroebelt. */
  .hero__beeld::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to top,
      rgba(12, 32, 27, .74) 0%, rgba(12, 32, 27, .45) 24%, rgba(12, 32, 27, 0) 56%);
  }

  .hero h1 {
    grid-row: 1; grid-column: 1; align-self: end; z-index: 1;
    padding: 0 1.5rem 2.5rem; color: var(--on-green);
    font-size: clamp(2rem, 8.5vw, 2.75rem);
  }
  /* Op de desktop staat het tweede deel van de kop in --green-700 op wit. Hier
     ligt de kop op een donkere foto en zou dat groen bijna zwart zijn. Het
     mintgroen haalt op het verloop eronder ruim 9:1 en blijft herkenbaar
     dezelfde kleurfamilie. */
  .hero h1 .accent { color: var(--green-200); }
  .hero__lede {
    grid-row: 2; grid-column: 1;
    margin-top: 2.5rem; padding-inline: 1.5rem;
  }
  .hero__lede p { font-size: 1rem; }
  .hero .btn { grid-row: 3; grid-column: 1; justify-self: start; margin: 1.75rem 1.5rem 0; }
}

/* --- tweekleurige koppen ------------------------------------------------- */
/* Het tweede deel van een kop staat in het merkgroen. Handelsmerk van dit
   merk; komt op elke pagina terug. --green-700 en niet --green: als tekst op
   wit haalt het merkgroen 5,39:1 en --green-700 9,45:1, en een kop hoort niet
   net aan te tikken. */
.accent { color: var(--green-700); }



/* --- sectie met de kop links en de inhoud rechts ------------------------- */

.naast {
  display: grid; gap: clamp(2rem, 4vw, 4rem);
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  align-items: start;
}
.naast__kop h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); }
.naast__kop .lede { font-size: 1rem; }
.naast__kop .btn { margin-top: 1.75rem; }
.naast__inhoud > * { margin-top: 0; }

@media (max-width: 900px) {
  .naast { grid-template-columns: 1fr; gap: 2rem; }
}

/* --- duo ----------------------------------------------------------------- */

.duo {
  display: grid; gap: clamp(2rem, 5vw, 4.5rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
}

.duo__tekst p { color: var(--muted); }
.duo__tekst .plusknop { margin-top: 2.25rem; }
.duo__tekst .btn { margin-top: 2rem; }

/* --- plusknop: cirkel met plus, label ernaast ---------------------------- */

/* De tweede knopvorm van het origineel. Naast een blok lopende tekst weegt de
   gevulde pil te zwaar; deze leest als een uitnodiging in plaats van als een
   aanmelding. De hele regel is de link, dus het raakvlak is ruim groter dan de
   cirkel alleen. */
.plusknop {
  display: inline-flex; align-items: center; gap: 1.25rem;
  color: var(--ink); text-decoration: none; font-size: 1rem;
}
.plusknop__cirkel {
  position: relative; flex: 0 0 auto;
  width: 3.5rem; height: 3.5rem; border-radius: 50%;
  background: var(--green-100);
  transition: background .2s ease, transform .2s var(--ease);
}
/* Twee streepjes in plaats van een teken: een + uit de tekst staat nooit
   precies in het midden van zijn regel en is niet dun te krijgen. */
.plusknop__cirkel::before, .plusknop__cirkel::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 1.125rem; height: 1.5px; margin: -.75px 0 0 -.5625rem;
  background: var(--ink);
}
.plusknop__cirkel::after { transform: rotate(90deg); }
.plusknop__label { line-height: 1.3; }
.plusknop:hover .plusknop__cirkel { background: var(--green-50); transform: scale(1.06); }
.plusknop:hover .plusknop__label { text-decoration: underline; text-underline-offset: .25em; }
.plusknop:focus-visible { outline: none; }
.plusknop:focus-visible .plusknop__cirkel { outline: 2px solid var(--green-700); outline-offset: 3px; }
.plusknop:focus-visible .plusknop__label { text-decoration: underline; text-underline-offset: .25em; }
.duo__beeld { overflow: hidden; border-radius: var(--radius); }
.duo__beeld img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.duo--spiegel .duo__tekst { order: 2; }
.duo--spiegel .duo__beeld { order: 1; }

@media (max-width: 900px) {
  .duo { grid-template-columns: 1fr; gap: 2rem; }
  .duo--spiegel .duo__tekst, .duo--spiegel .duo__beeld { order: 0; }
  .duo__beeld img { aspect-ratio: 3 / 2; }
}

/* --- kaarten ------------------------------------------------------------- */

.kaarten {
  display: grid; gap: 1.25rem;
  margin-top: clamp(2.25rem, 4vw, 3.5rem);
  grid-template-columns: repeat(var(--kolommen, 3), minmax(0, 1fr));
}
.kaart {
  position: relative; overflow: hidden;
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--page);
  border: 1px solid var(--line); border-radius: var(--radius-s);
}
/* De zachte groene gloed rechtsonder komt van het origineel. De z-index is
   geen versiering: ::after is absoluut gepositioneerd en staat later in de DOM
   dan de alinea, en won daarmee de stapelvolgorde. Woorden die rechtsonder in
   de kaart vielen werden zo half weggewassen. */
.kaart::after {
  content: ""; position: absolute; z-index: 0; right: -30%; bottom: -60%;
  width: 80%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, var(--green-50), transparent 70%);
  pointer-events: none;
}
.kaart > * { position: relative; z-index: 1; }
.kaart h3 { font-size: clamp(1rem, 1.5vw, 1.125rem); font-weight: 500; margin-bottom: .6rem; }
.kaart p { color: var(--muted); font-size: .875rem; line-height: 1.55; }
.kaart__label:empty { display: none; }
.kaart__label {
  display: block; margin-bottom: .85rem;
  font-size: .6875rem; font-weight: 500; letter-spacing: .12em;
  text-transform: uppercase; color: var(--green);
  font-variant-numeric: tabular-nums;
}

/* Een kaart die ergens heen wijst. De link zit om de kop en spant zich met
   een ::after over de hele kaart: het klikvlak is daarmee de kaart, terwijl
   een schermlezer één link met de naam van de klacht krijgt — en niet de
   hele alinea als linktekst. De pijl komt erbij op hover en focus. */
.kaart:has(.kaart__link) { transition: border-color .18s ease, transform .18s ease; }
.kaart:has(.kaart__link:hover) { border-color: var(--green-200); transform: translateY(-2px); }
.kaart__link { color: inherit; text-decoration: none; }
.kaart__link::after { content: ""; position: absolute; inset: 0; }
/* De pijl is getekend en niet getypt. Het teken → hoeft niet in elk font te
   zitten, en waar het ontbreekt springt de browser naar een ander font — een
   dikkere pijl dan de rest van de pagina. Getekend volgt hij altijd de
   lijndikte van de typografie eromheen. */
.kaart__link::before {
  content: ""; float: right; margin: .4em 0 0 .6em;
  width: .62em; height: .62em;
  border-top: 1px solid var(--green-700); border-right: 1px solid var(--green-700);
  opacity: 0; transform: rotate(45deg) translate(-.18em, .18em);
  transition: opacity .2s ease, transform .24s var(--ease);
}
.kaart:hover .kaart__link::before,
.kaart__link:focus-visible::before { opacity: 1; transform: rotate(45deg); }
.kaart__link:focus-visible { outline: 2px solid var(--green-700); outline-offset: 4px; border-radius: 2px; }


@media (max-width: 980px) { .kaarten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .kaarten { grid-template-columns: 1fr; } }

/* --- oprichters ---------------------------------------------------------- */
/* Dezelfde kaart als .kaart — zelfde rand, zelfde gloed rechtsonder — met een
   rond portret erboven. De rol staat onder de naam: boven de naam zou het een
   kapitalenlabel zijn dat de kop aankondigt, en dat staat nergens op deze site.

   Op een breed scherm staan de twee kaarten naast elkaar en scrollt er niets.
   Onder 620px wordt dezelfde lijst een spoor dat je veegt: de kaart is 82%
   breed, dus de tweede piept er rechts onderuit. Dat randje ís de aanwijzing
   dat er meer staat — vandaar geen pijlen en geen balk. Bij twee kaarten is
   dat meer stuurwerk dan inhoud.

   Er komt geen JavaScript aan te pas. Valt app.js om, dan veegt dit gewoon. */

.oprichters {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: var(--max); margin: clamp(2.25rem, 4vw, 3.5rem) auto 0;
  padding-inline: var(--gutter);
  list-style: none;
}
.oprichters:focus-visible { outline: 2px solid var(--green-700); outline-offset: 4px; border-radius: 4px; }

.oprichter {
  position: relative; overflow: hidden;
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--page);
  border: 1px solid var(--line); border-radius: var(--radius-s);
}
/* Dezelfde gloed als op .kaart, en om dezelfde reden een z-index: ::after
   staat later in de DOM dan de alinea en zou die anders half wegwassen. */
.oprichter::after {
  content: ""; position: absolute; z-index: 0; right: -30%; bottom: -60%;
  width: 80%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, var(--green-50), transparent 70%);
  pointer-events: none;
}
.oprichter > * { position: relative; z-index: 1; }

/* Het portret is een vierkant dat rond wordt gesneden. Ismails foto is zelf al
   een ingeschreven cirkel, dus zijn rand valt precies samen met deze. */
/* De haarlijn is er voor Rina: haar studio-achtergrond is bijna even licht als
   de kaart, en zonder rand loopt haar cirkel eruit weg terwijl die van Ismail
   met zijn donkere achtergrond wél een schijf is. Met de lijn zijn het er twee
   van dezelfde soort. De ring ligt er met box-shadow omheen en niet als border
   of inset: een border duwt de foto een pixel kleiner, en een inset-schaduw
   wordt onder de inhoud getekend — de foto vult het vlak en zou hem afdekken. */
.oprichter__portret {
  display: block; width: clamp(5.5rem, 9vw, 7rem); aspect-ratio: 1;
  margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
  border-radius: 50%; overflow: hidden; background: var(--green-50);
  box-shadow: 0 0 0 1px var(--line);
}
.oprichter__portret img { width: 100%; height: 100%; object-fit: cover; }

.oprichter__naam { font-size: clamp(1rem, 1.5vw, 1.125rem); font-weight: 500; }
.oprichter__rol { margin-top: .25rem; font-size: .875rem; color: var(--green); }
.oprichter__tekst { margin-top: .85rem; color: var(--muted); font-size: .875rem; line-height: 1.55; }

@media (max-width: 620px) {
  .oprichters {
    display: flex; gap: 1rem;
    overflow-x: auto; scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    padding-bottom: .5rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .oprichters::-webkit-scrollbar { display: none; }
  .oprichter { flex: 0 0 82%; scroll-snap-align: start; }
  /* De laatste kaart lijnt uit op zijn rechterrand en niet op zijn linker.
     Met start zou zijn snappunt voorbij het einde van het spoor liggen — er is
     rechts van hem geen 82% scherm meer om naartoe te schuiven — en dan trekt
     een mandatory snap je elke keer terug naar de eerste kaart. De tweede was
     zo niet te bereiken. Met end valt zijn snappunt precies op het einde. */
  .oprichter:last-child { scroll-snap-align: end; }
}

/* --- stappen: horizontale tijdlijn -------------------------------------- */
/* Maten uit de .mvr-steps van het origineel: kolommen met 2,5rem gap, een rail
   van 1px die van bol naar bol loopt, en een marker van 2,75rem die groen
   invult zodra de stap in beeld komt. */

.stappen {
  display: grid; grid-template-columns: repeat(var(--stappen, 5), minmax(0, 1fr));
  gap: 2.5rem; margin-top: clamp(2.5rem, 5vw, 4rem);
  counter-reset: stap;
}
.stap { position: relative; padding-top: 4rem; counter-increment: stap; }

/* De stappen verschijnen één voor één zodra de rij in beeld komt, met een
   vaste vertraging per stap. Ze hangen niet aan de scrollpositie: een
   component die verspringt terwijl je verder scrolt leest als een storing.
   
   Bewust een keyframe-animatie en geen transition. Een transition-shorthand
   met var(--ease) erin wordt pas op computed-value-tijd opgelost, en bleef in
   Chrome op de beginwaarde hangen: de stappen stonden permanent op opacity 0.
   Dit is bovendien semantisch juister — een eenmalige entree, geen
   toestandsovergang. `both` houdt de beginstand vast tijdens de vertraging en
   de eindstand daarna. */
/* De stappen worden alleen verborgen in een rij die JavaScript daadwerkelijk
   gaat animeren, en die klasse gaat er weer af zodra hij afvuurt — plus een
   vangnet van twee seconden. Zo kan een stap nooit permanent onzichtbaar
   blijven, ook niet als de animatieklok stilstaat omdat het tabblad op de
   achtergrond geladen werd. */
.beweegt .stappen.wacht .stap { opacity: 0; }
.beweegt .stap.is-in {
  animation: stap-in .5s cubic-bezier(.22, 1, .36, 1) both;
  animation-delay: calc(var(--i, 0) * 130ms);
}
@keyframes stap-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* De rail is een kind van .stap en de bol een ::before. Een ::before wordt
   vóór de kinderen geschilderd, dus zonder deze stapeling loopt de lijn dwars
   over de bollen heen in plaats van eronder door. */
.stap__rail {
  position: absolute; top: 1.375rem; left: 0; right: -2.5rem; z-index: 0;
  height: 1px; background: rgba(var(--green-rgb), .2); overflow: hidden;
}
.stap:last-child .stap__rail { right: auto; width: 1.375rem; }
.stap__rail::after {
  content: ""; display: block; height: 100%; background: var(--green);
  transform: scaleX(0); transform-origin: left;
}
.stap.is-in .stap__rail::after {
  animation: rail-vullen .55s cubic-bezier(.22, 1, .36, 1) both;
  animation-delay: calc(var(--i, 0) * 130ms + 180ms);
}
@keyframes rail-vullen { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes rail-vullen-verticaal { from { transform: scaleY(0); } to { transform: scaleY(1); } }

.stap::before {
  content: counter(stap, decimal-leading-zero);
  position: absolute; top: 0; left: 0; z-index: 1;
  width: 2.75rem; height: 2.75rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--page); border: 1px solid var(--green-100);
  font-size: .8125rem; color: var(--green); font-variant-numeric: tabular-nums;
}
.stap.is-in::before {
  animation: bol-vullen .4s ease both;
  animation-delay: calc(var(--i, 0) * 130ms);
}
@keyframes bol-vullen {
  to { background: var(--green); border-color: var(--green); color: var(--on-green); }
}

.stap h3 { font-size: 1.375rem; font-weight: 400; letter-spacing: -.02em; margin-bottom: .75rem; }
.stap p { font-size: .9375rem; line-height: 1.65; color: var(--muted); }

@media (min-width: 701px) and (max-width: 1100px) {
  .stappen { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 3.5rem; }
  .stap:nth-child(3n) .stap__rail { right: auto; width: 1.375rem; }
}
@media (max-width: 700px) {
  /* Op een telefoon kantelt de tijdlijn: de rail loopt verticaal langs de
     bollen en de tekst staat ernaast. */
  .stappen { grid-template-columns: 1fr; gap: 0; }
  .stap { padding: 0 0 2.5rem 4rem; }
  .stap:last-child { padding-bottom: 0; }
  .stap__rail,
  .stap:nth-child(3n) .stap__rail {
    top: 2.75rem; bottom: 0; left: 1.375rem; right: auto; width: 1px; height: auto;
  }
  .stap:last-child .stap__rail { display: none; }
  .stap__rail::after { transform: scaleY(0); transform-origin: top; }
  .stap.is-in .stap__rail::after { animation-name: rail-vullen-verticaal; }
  .stap h3 { font-size: 1.25rem; }
}


/* --- signalen ------------------------------------------------------------ */

.signalen {
  display: grid; gap: 1px; margin-top: clamp(2.25rem, 4vw, 3.5rem);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background: var(--line); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden;
}
.signaal { padding: clamp(1.5rem, 3vw, 2.25rem); background: var(--page); }
.section--panel .signaal { background: var(--panel); }
/* Het icoon is optioneel: op de loopbaanpagina draagt elke kaart er een, bij
   de signalen van stress en burn-out niet. */
.signaal__icoon {
  display: block; width: 2rem; height: 2rem; margin-bottom: 1.25rem;
  color: var(--green-700);
}
.signaal__icoon svg { width: 100%; height: 100%; }
.signaal h3 { font-size: 1.125rem; font-weight: 400; margin-bottom: .5rem; }
.signaal p { color: var(--muted); font-size: .9375rem; line-height: 1.6; }

/* Het raster is een vlak met haarlijnen erin, geen losse kaarten: de gap van
   1px laat de achtergrond zien. Een aantal dat niet deelbaar is door het
   aantal kolommen laat daardoor geen witruimte achter maar een grijs gat. De
   laatste cel vult de rest van zijn rij, wat de vijf signalen van de homepage
   netjes laat uitkomen en elk ander aantal ook. */
/* De reset en de span hebben met opzet dezelfde soortelijkheid — drie
   klassen/pseudo's — want een media query telt daar niet in mee. Stond de
   reset op `.signaal:last-child`, dan verloor hij van de 3n-regel hierboven
   en bleef een cel op smal scherm twee kolommen breed. */
.signalen > .signaal:last-child:nth-child(3n + 1) { grid-column: span 3; }
.signalen > .signaal:last-child:nth-child(3n + 2) { grid-column: span 2; }

@media (max-width: 900px) {
  .signalen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .signalen > .signaal:last-child:nth-child(n)     { grid-column: auto; }
  .signalen > .signaal:last-child:nth-child(2n + 1) { grid-column: span 2; }
}
@media (max-width: 560px) {
  .signalen { grid-template-columns: 1fr; }
  .signalen > .signaal:last-child:nth-child(n) { grid-column: auto; }
}

/* --- veelgestelde vragen ------------------------------------------------- */

.faq { margin-top: clamp(2.25rem, 4vw, 3.5rem); max-width: 52rem; }
.faq__item { border-top: 1px solid var(--line); }
.faq__item:last-child { border-bottom: 1px solid var(--line); }
.faq__item > summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem;
  padding: 1.375rem .25rem; cursor: pointer; list-style: none;
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem); font-weight: 400;
}
.faq__item > summary::-webkit-details-marker { display: none; }
.faq__plus { position: relative; width: 1rem; height: 1rem; margin-top: .3em; flex: 0 0 auto; }
.faq__plus::before, .faq__plus::after {
  content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 1.5px;
  background: var(--green); transition: transform .22s var(--ease);
}
.faq__plus::after { transform: rotate(90deg); }
.faq__item[open] .faq__plus::after { transform: rotate(0); }
.faq__antwoord { padding: 0 .25rem 1.5rem; color: var(--muted); max-width: 62ch; }

/* Het zoekveld boven de vragenlijst. Eén wit vlak met een ronde hoek, de loep
   links en een kruisje zodra er iets staat — de vorm van een zoekbalk, in de
   kleuren van deze site. Hij staat op hidden tot app.js hem aanzet. */

.faq-zoek { display: grid; gap: .75rem; }
.faq-zoek[hidden] { display: none; }
.faq-zoek__veld {
  display: flex; align-items: center; gap: .75rem;
  padding: .3rem .5rem .3rem 1.125rem;
  background: var(--page); border: 1px solid var(--line); border-radius: 999px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.faq-zoek__veld:focus-within {
  border-color: var(--green); box-shadow: 0 0 0 3px rgba(var(--green-rgb), .12);
}
.faq-zoek__loep { width: 1.125rem; height: 1.125rem; flex: 0 0 auto; color: var(--muted); }
.faq-zoek input {
  flex: 1 1 auto; min-width: 0; height: 3rem;
  border: 0; background: none; font: inherit; color: var(--ink);
}
.faq-zoek input::placeholder { color: var(--muted); }
.faq-zoek input:focus { outline: none; }
/* Chrome zet er zelf een kruisje in; dat van ons staat ernaast en doet meer. */
.faq-zoek input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.faq-zoek__wis {
  flex: 0 0 auto; width: 2.25rem; height: 2.25rem; border: 0; border-radius: 50%;
  background: var(--panel); color: var(--muted); font-size: 1.25rem; line-height: 1;
  cursor: pointer;
}
.faq-zoek__wis:hover { background: var(--green-50); color: var(--green-700); }
.faq-zoek__wis:focus-visible { outline: 2px solid var(--green-700); outline-offset: 2px; }
.faq-zoek__telling { margin: 0; padding-left: 1.125rem; color: var(--muted); font-size: .875rem; }
.faq-zoek__telling:empty { display: none; }

.faq-leeg { margin: 1.5rem 0 0; color: var(--muted); }
.faq-leeg[hidden] { display: none; }
.faq__item[hidden] { display: none; }
/* Het zoekveld staat boven de lijst, dus de lijst hoeft er niet nog eens
   vanaf te duwen. */
.faq-zoek + .faq { margin-top: 1.75rem; }
/* Een deelvraag binnen een antwoord — "Ben je aangesloten bij ...?" met het
   antwoord eronder. Cursief en dicht op zijn antwoord, met ruimte ervoor, zodat
   de paren uit elkaar vallen. Dezelfde opzet als op de vorige site. */
.faq__deelvraag { font-style: italic; margin: 1.5rem 0 .25rem; }
.faq__antwoord > *:first-child.faq__deelvraag { margin-top: 0; }

/* --- reviews: verticale kolommen ---------------------------------------- */



.reviews__rij {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
  height: 40rem; margin-top: clamp(2.25rem, 4vw, 3.5rem);
  padding-inline: var(--gutter);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
}
.review-kolom { overflow: hidden; }
.scroll { display: flex; flex-direction: column; gap: 1rem; animation: scroll-verticaal 60s linear infinite; }
.scroll.reverse { animation-direction: reverse; }
.reviews__rij:hover .scroll { animation-play-state: paused; }

@keyframes scroll-verticaal {
  from { transform: translateY(0); }
  to   { transform: translateY(calc(-50% - .5rem)); }
}

.review {
  margin: 0; padding: 1.75rem;
  background: var(--page); border: 1px solid var(--line); border-radius: var(--radius);
}
.review blockquote { margin: 0; }
/* De aanhalingstekens zijn vorm, geen tekst. Op de staging stonden ze bij
   negentien citaten in de tekst en bij twee niet. */
.review blockquote p::before { content: "\201C"; }
.review blockquote p::after  { content: "\201D"; }
.review blockquote p { font-size: 1rem; line-height: 1.55; }
.review figcaption { margin-top: 1.25rem; font-size: .875rem; color: var(--muted); }

/* Onder 767px wordt het één horizontale rij die je swipet: een verticale
   auto-scroll naast de paginascroll werkt op een telefoon niet. */
@media (max-width: 767px) {
  .reviews__rij {
    display: flex; height: auto; gap: 1rem;
    overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: none; mask-image: none;
    scrollbar-width: none;
  }
  .reviews__rij::-webkit-scrollbar { display: none; }
  .review-kolom { flex: 0 0 auto; overflow: visible; }
  .scroll { flex-direction: row; animation: none; }
  .review { flex: 0 0 min(82vw, 20rem); scroll-snap-align: start; }
  /* Hier schuift niets vanzelf: de lus-kopieën zouden elke ervaring een tweede
     keer in de rij zetten. Eén kolom is genoeg, want die bevat ze allemaal. */
  .review--kopie { display: none; }
  .review-kolom + .review-kolom { display: none; }
}

/* --- afsluitende CTA ----------------------------------------------------- */

.cta-slot__inhoud { max-width: 46rem; }

.cta-slot .btn { margin-top: 2rem; }

/* ==========================================================================
   Beweging
   De eindtoestand is de standaard. De animatie neemt hem alleen tijdelijk weg,
   en alleen wanneer de JS hem heeft aangezet via .beweegt op <html>. Breekt de
   JS, dan staat alles er gewoon — dat is precies wat op de staging misging.
   ========================================================================== */

/* Het masker waarbinnen een regel omhoog schuift. Zonder de padding knipt het
   de staarten van de g, j en p af; de negatieve marge houdt de layout gelijk. */
[data-onthul] .regel {
  display: block; overflow: hidden;
  padding-block: .14em; margin-block: -.14em;
}
[data-onthul] .regel__in { display: block; }

.beweegt [data-onthul] .regel__in {
  transform: translateY(105%);
}
.beweegt [data-onthul].is-in .regel__in {
  transform: none;
  transition: transform .78s var(--ease);
  transition-delay: calc(var(--r, 0) * 75ms);
}

/* De voordeelkaarten staan bewust verspringend (even kaarten 3rem lager).
   De staffel zet transform: none en zou die offset wegvagen, dus die kaarten
   komen alleen op opacity binnen. */
.beweegt [data-staffel] > *:not(.stap) {
  opacity: 0;
  transform: translateY(16px);
}
.beweegt [data-staffel] > *:not(.stap).is-in {
  opacity: 1;
  transform: none;
  transition: opacity .55s ease, transform .55s var(--ease);
  transition-delay: calc(var(--i, 0) * 65ms);
}

/* Eén frame zonder overgang, zodat wat al in beeld staat meteen goed staat. */
.zonder-overgang, .zonder-overgang * { transition: none !important; }

[data-parallax] img { transform: translate3d(0, var(--zweef, 0), 0); }

@media (prefers-reduced-motion: reduce) {
  .beweegt [data-onthul] .regel__in,
  [data-onthul] .regel__in { transform: none; }
  [data-onthul] .regel { overflow: visible; }
  .beweegt [data-staffel] > *,
  [data-staffel] > * { opacity: 1; }
  [data-staffel] > *:not(.voordeel) { transform: none; }
  [data-parallax] img { transform: none; }
  .stap, .stap.is-in { opacity: 1 !important; animation: none !important; }
  .stap.is-in::before {
    animation: none !important;
    background: var(--green); border-color: var(--green); color: var(--on-green);
  }
  .stap.is-in .stap__rail::after { animation: none !important; transform: none; }
  .scroll { animation: none; }
  /* De stipjes langs de spaken lopen door; zonder beweging blijven de lijnen
     gewoon staan en verdwijnt alleen het stipje. */
  .beweegt .hub__figuur.is-in .hub__puls,
  .beweegt .hub__figuur.is-in .hub__naaf,
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* --- cijfers ------------------------------------------------------------- */

/* Uit het origineel: de kop links, de inleiding ernaast, en daaronder de
   cijfers als één rij cellen met haarlijnen ertussen. Die lijnen zijn de
   achtergrond die door een gap van 1px schijnt — randen per cel zouden tussen
   twee buren dubbel tellen. */
.stats__kop {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem); align-items: end;
}
.stats__kop h2 { max-width: 18ch; }
.stats__lede { color: var(--muted); font-size: 1.0625rem; line-height: 1.6; max-width: 42ch; }

.stats {
  display: grid; gap: 1px; margin-top: clamp(2.5rem, 5vw, 4rem);
  grid-template-columns: repeat(var(--kolommen, 3), minmax(0, 1fr));
  background: var(--line);
}
.stat { padding: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 3rem); background: var(--page); }
.section--panel .stat { background: var(--panel); }
.stat__getal {
  display: block; margin-bottom: 1.25rem; white-space: nowrap;
  font-size: clamp(2.75rem, 5.4vw, 4.8rem); font-weight: 200;
  letter-spacing: -.04em; line-height: 1; color: var(--green-700);
  font-variant-numeric: tabular-nums;
}
.stat__label { color: var(--muted); font-size: .9375rem; line-height: 1.5; }
.stat__bron { margin-top: 1.5rem; font-size: .8125rem; color: var(--muted); }

@media (max-width: 900px) {
  .stats__kop { grid-template-columns: 1fr; gap: 1.25rem; align-items: start; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) { .stats { grid-template-columns: 1fr; } }

/* ==========================================================================
   Print
   Zodat een PDF laat zien wat een bezoeker ziet: alles onthuld, de zwevende
   kop op zijn plek, en kaarten die niet halverwege een paginawissel breken.
   ========================================================================== */

/* Chrome print op papierbreedte, niet op vensterbreedte: zonder deze regel
   valt een PDF terug op de mobiele layout omdat Letter maar ~816px breed is.
   Met een expliciete paginagrootte krijg je de desktopweergave. */
@page { size: 1440px 2000px; margin: 0; }

@media print {
  .beweegt [data-onthul] .regel__in,
  [data-onthul] .regel__in { transform: none !important; }
  [data-onthul] .regel { overflow: visible !important; }
  .beweegt [data-staffel] > *,
  [data-staffel] > * { opacity: 1 !important; transform: none !important; }
  [data-parallax] img { transform: none !important; }

  /* De stappen wachten normaal op de observer. Bij printen scrollt niemand,
     dus zetten we de hele rij onvoorwaardelijk aan. Chrome laat volledig
     transparante inhoud helemaal weg uit de PDF, dus dit moet kloppen. */
  .stappen, .stappen * {
    opacity: 1 !important; visibility: visible !important;
    animation: none !important; transform: none !important;
  }
  .stap::before {
    animation: none !important;
    background: var(--green); border-color: var(--green); color: var(--on-green);
  }
  .stap .stap__rail::after { animation: none !important; transform: none !important; }

  /* De navigatiesubmenus horen dicht op papier; alleen de FAQ gaat open. */
  .nav__sub[open] > .nav__sublijst { display: none !important; }

  .site-head { position: static; }
  .mobielmenu, .kop__knop { display: none !important; }
  /* Op papier is er geen mobiele breedte; toon de gewone navigatie. */
  .nav-bar, .kop__cta { display: block; }
  .nav-bar { flex: 0 0 auto; }

  /* De lopende band staat stil op papier; de statische lijst is leesbaar. */
  .stap, .stap.is-in { opacity: 1 !important; animation: none !important; }
  .stap.is-in::before {
    animation: none !important;
    background: var(--green); border-color: var(--green); color: var(--on-green);
  }
  .stap.is-in .stap__rail::after { animation: none !important; transform: none; }

  /* De reviewkolommen scrollen niet op papier. */
  .reviews__rij {
    height: auto; overflow: visible;
    -webkit-mask-image: none; mask-image: none;
  }
  .scroll { animation: none; }
  .review-kolom { overflow: visible; }
  .review--kopie { display: none; }
  .review-kolom + .review-kolom { display: none; }

  /* De accordeon open, anders staan er alleen vragen in de PDF. */
  .faq__item { open: true; }
  .faq__antwoord { display: block !important; }

  .kaart, .signaal, .methode, .tarief, .review, .stap, .audience-card,
  .faq__item, .mens { break-inside: avoid; }
  section { break-inside: auto; }

  a { text-decoration: none; }
  .site-footer { break-before: avoid; }
}

/* ==========================================================================
   Maatwerkcomponenten uit het origineel
   Maten overgenomen van de inline CSS van doc.brandium.dev. Waar het origineel
   --blue-brand #4a90d9 gebruikte, staat hier --green: we werken met één groen.
   ========================================================================== */

/* --- professionals als kaartenrij --------------------------------------- */

.team { overflow: hidden; }

.team__kop h2 { max-width: 20ch; }
.team__kop .lede { max-width: 46ch; }

/* Het stuur staat onder de kaarten en niet naast de kop. Rechtsboven zweefde
   het los van waar het over gaat; onder het spoor staat het bij de rij die
   het verschuift. */
.team__stuur {
  display: flex; align-items: center; gap: .75rem;
  margin-top: clamp(1.5rem, 2.5vw, 2rem);
}
.team__pijl {
  width: 2.75rem; height: 2.75rem; flex: 0 0 auto;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%;
  background: var(--page); color: var(--ink); cursor: pointer;
  font-size: 1.125rem; line-height: 1;
  transition: background .2s ease, border-color .2s ease, opacity .2s ease;
}
.team__pijl:hover:not(:disabled) { background: var(--panel); border-color: var(--green); }
.team__pijl:disabled { opacity: .35; cursor: default; }

.team__balk {
  width: 7.5rem; height: 4px; border-radius: 999px;
  background: var(--line); overflow: hidden;
}
/* De breedte wordt door JS gezet en verandert alleen bij een resize; alleen
   de verschuiving animeert. Width animeren kost layout. */
.team__vulling {
  display: block; height: 100%; width: 25%;
  background: var(--ink); border-radius: 999px;
  transition: transform .3s var(--ease);
}

/* Een gewone lijst die horizontaal scrolt. Dat is met muis, touch én
   toetsenbord te bedienen zonder dat er een carrousel-rol bij hoeft. */
/* Het spoor houdt zich aan dezelfde kolom als de kop erboven: het loopt niet
   door tot de vensterrand. De eerste kaart begint dus exact onder de K van de
   kop, en de sectie maakt de pagina nooit breder dan de rest. */
.team__spoor {
  display: flex; gap: 1.5rem;
  max-width: var(--max); margin: clamp(2.5rem, 5vw, 4rem) auto 0;
  padding: 0 var(--gutter) 1rem;
  list-style: none;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.team__spoor::-webkit-scrollbar { display: none; }
.team__spoor:focus-visible { outline: 2px solid var(--green-700); outline-offset: 4px; border-radius: 4px; }

/* Op een breed scherm passen de vier kaarten precies naast elkaar en staat
   het spoor stil. Wordt het smaller, dan schuift hetzelfde spoor. */
.team__kaart {
  flex: 0 0 max(13.75rem, calc((100% - 4.5rem) / 4));
  scroll-snap-align: start;
}
/* De namen lopen over één of twee regels. Zonder deze duw zou het portret
   meeschuiven en stonden de kaarten scheef ten opzichte van elkaar. */
.team__kaart, .team__kaart > article { display: flex; flex-direction: column; }
.team__kaart > article { flex: 1; }
.team__kaart .team__vlak { margin-top: auto; }

.team__naam {
  font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 200;
  letter-spacing: -.02em; line-height: 1.15;
}
.team__naam span { display: block; }

/* Geen eyebrow: dit staat ónder de naam en benoemt de rol van die persoon,
   niet de kop erboven. */
.team__rol {
  margin-top: .75rem;
  font-size: .75rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted);
}

/* De ondergrens is er voor het paneel, niet voor de foto: bij vier smalle
   kaarten naast elkaar zakt 3:4 anders tot onder de 300px en moet je door de
   achtergrondinfo scrollen in een doosje van niks. */
.team__vlak {
  position: relative; margin-top: 1.5rem; width: 100%;
  aspect-ratio: 3 / 4; min-height: 20rem;
  border-radius: 1.25rem; overflow: hidden;
  background: var(--panel);
}
/* Twee van de portretten zijn vierkant aangeleverd. In een vlak van 3:4 valt
   er dus een kwart van de hoogte af; vanaf 20% houdt de snede het hoofd heel
   in plaats van de kruin af te snijden. */
.team__foto { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }

/* Zolang er nog geen portretten zijn: het merkteken op een rustig vlak. Dat
   oogt bedoeld, in plaats van een lege doos of een grijze stockfoto. */
.team__leeg {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: linear-gradient(150deg, var(--green-50), var(--green-100));
}
.team__leeg img { width: 4rem; height: auto; opacity: .3; }

.team__knop {
  position: absolute; top: 1rem; right: 1rem; z-index: 2;
  width: 2.75rem; height: 2.75rem; padding: 0;
  display: grid; place-items: center;
  border: 0; border-radius: 50%; background: var(--page); cursor: pointer;
  box-shadow: 0 .25rem 1rem rgba(10, 10, 10, .12);
}
.team__kruis { position: relative; width: .875rem; height: .875rem; }
.team__kruis::before, .team__kruis::after {
  content: ""; position: absolute; top: 50%; left: 0; right: 0;
  height: 1.5px; background: var(--ink);
  transition: transform .25s var(--ease);
}
.team__kruis::after { transform: rotate(90deg); }
.team__knop[aria-expanded="true"] .team__kruis::before { transform: rotate(45deg); }
.team__knop[aria-expanded="true"] .team__kruis::after  { transform: rotate(-45deg); }

.team__paneel {
  position: absolute; inset: 0; z-index: 1;
  padding: clamp(1rem, 2.2vw, 1.75rem);
  overflow-y: auto; overscroll-behavior: contain;
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
}
.team__paneel dl { margin: 0; }
/* De sluitknop hangt over het paneel heen. Zonder deze inspringing loopt de
   eerste regel eronderdoor. */
.team__paneel .team__feit:first-child { padding-right: 3.25rem; }
.team__feit + .team__feit { margin-top: 1rem; }
.team__feit dt {
  font-size: .75rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin-bottom: .3rem;
}
.team__feit dd { margin: 0; font-size: .9375rem; line-height: 1.45; }
.team__tekst { margin-top: 1rem; font-size: .875rem; line-height: 1.55; color: var(--muted); }
/* Het paneel is scrollbaar. Chrome en Safari geven zo'n gebied geen focus uit
   zichzelf, dus zonder tabindex kun je er met alleen een toetsenbord niet bij
   (WCAG 2.1.1). De focusring hoort binnen het paneel te blijven vallen. */
.team__paneel:focus-visible { outline: 2px solid var(--green-700); outline-offset: -4px; }

@media (max-width: 700px) {
  .team__kaart { flex-basis: min(78vw, 20rem); }
}

/* ==========================================================================
   Blokken die alleen op de andere pagina's staan
   Teruggehaald uit De Online Coach toen de negentien subpagina's erbij kwamen.
   ========================================================================== */

/* --- paginakop: de lichtgroene band -------------------------------------- */

/* Gemeten op het origineel bij 1420px breed: het gekleurde vlak is 475px hoog en
   de titel staat er verticaal gecentreerd in, op 59,64px en gewicht 200. De
   vaste kop van 109px zweeft eroverheen, dus de titel houdt vanzelf afstand.

   De titelkleur is --green-700 en niet het merkgroen: op deze mintgrond haalt
   het merkgroen 4,35:1 en dat is te krap voor een titel die ook op kleiner
   scherm meeschaalt. --green-700 haalt er 7,63:1. */
.paginakop {
  min-height: clamp(19rem, 34vw, 475px);
  display: grid; place-items: center;
  padding: 7rem var(--gutter) 3rem;
  background: var(--green-100);
  text-align: center;
}
.paginakop h1 {
  color: var(--green-700);
  font-size: clamp(1.75rem, 4.2vw, 3.73rem);
  font-weight: 200; letter-spacing: -.03em; line-height: 1.1;
}
.paginakop h1 .accent { color: var(--ink); }

@media (max-width: 900px) {
  .paginakop { min-height: 17rem; padding-top: 8rem; }
}

/* --- lopende tekst ------------------------------------------------------- */

.prose p { color: var(--muted); }
.naast__inhoud.prose p { max-width: 62ch; }

/* --- kennisbank ---------------------------------------------------------- */
/* De opbouw komt van het ontwerp voor de kennisbank van deonlinecoach.nl, hier
   in het groen van DOP en met de drie gewichten die Lausanne heeft. */

/* Overzicht: kop links, uitleg rechts. */
.blogintro {
  display: grid; gap: clamp(1.5rem, 4vw, 4rem);
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: end;
}
.blogintro .lede { margin: 0; font-size: 1.125rem; max-width: 46ch; }
@media (max-width: 900px) { .blogintro { grid-template-columns: 1fr; } }

/* Het uitgelichte artikel: beeld links, tekst rechts. De link in de kop
   spant zich over het hele blok. */
.uitgelicht {
  position: relative;
  display: grid; gap: clamp(2rem, 5vw, 5rem);
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.uitgelicht__beeld { overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--radius); }
.uitgelicht__beeld img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.uitgelicht:hover .uitgelicht__beeld :is(img, svg) { transform: scale(1.025); }
.uitgelicht h2 { font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 200; letter-spacing: -.035em; }
.uitgelicht__link { color: inherit; text-decoration: none; }
.uitgelicht__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.uitgelicht__link:focus-visible { outline: none; }
.uitgelicht:has(.uitgelicht__link:focus-visible) { outline: 2px solid var(--green-700); outline-offset: 6px; border-radius: var(--radius); }
.uitgelicht p.lede { margin-top: 1.25rem; font-size: 1.125rem; }
.uitgelicht__voet {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem;
  margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line);
}
.uitgelicht .btn { margin-top: 2rem; }
@media (max-width: 900px) { .uitgelicht { grid-template-columns: 1fr; } }

/* Auteur: portret of beeldmerk, met naam en rol. */
.auteur { display: flex; align-items: center; gap: .75rem; font-size: .9375rem; line-height: 1.35; text-align: left; }
.auteur img, .auteur__merk { flex: none; width: 44px; height: 44px; border-radius: 50%; }
.auteur img { object-fit: cover; object-position: center 20%; }
.auteur__merk { display: grid; place-items: center; background: var(--green-100); color: var(--green); }
.auteur__merk svg { width: 70%; }
.auteur b { display: block; font-weight: 400; color: var(--ink); }
.auteur span { color: var(--muted); }

.meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .9rem;
  font-size: .9375rem; color: var(--muted); font-variant-numeric: tabular-nums;
}
.meta > span:not(.tag) + span:not(.tag)::before {
  content: ""; display: inline-block; width: 3px; height: 3px; margin-right: .9rem;
  border-radius: 50%; background: var(--green); vertical-align: middle;
}

/* De balk boven de carrousel: de kop links, het stuur rechts. */
.filterbalk {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--line);
}
.filterbalk h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); }
.filterbalk__rechts { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.filterbalk__alles { font-size: 1rem; color: var(--green-700); text-underline-offset: .2em; }

/* Een artikelkaart. */
.post {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  background: var(--page); border: 1px solid var(--line); border-radius: var(--radius-s);
  transition: border-color .2s ease;
}
.post:hover { border-color: rgba(var(--green-rgb), .45); }
.post::after {
  content: ""; position: absolute; right: -30%; bottom: -40%;
  width: 80%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, var(--green-50), transparent 70%);
  pointer-events: none;
}
.post__beeld { position: relative; overflow: hidden; aspect-ratio: 3 / 2; }
.post__beeld img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.post:hover .post__beeld img, .post:hover .merkvlak svg { transform: scale(1.04); }
.post__tekst { position: relative; z-index: 1; display: flex; flex-direction: column; flex: 1; padding: 1.5rem 1.5rem 1.4rem; }
.post h3 { font-size: 1.3125rem; font-weight: 400; letter-spacing: -.015em; line-height: 1.3; }
.post__link { color: inherit; text-decoration: none; }
.post__link::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.post:hover .post__link { color: var(--green-700); }
.post__link:focus-visible { outline: none; }
.post:has(.post__link:focus-visible) { outline: 2px solid var(--green-700); outline-offset: 3px; }
.post p { margin-top: .7rem; color: var(--muted); font-size: .9375rem; line-height: 1.55; }
.post .meta { margin-top: auto; padding-top: 1.25rem; font-size: .875rem; }

/* Het beeldmerk als vlak, waar geen foto is. */
.merkvlak { position: relative; width: 100%; height: 100%; overflow: hidden; background: var(--green-100); color: var(--green); }
.merkvlak svg {
  position: absolute; left: var(--x, -8%); top: var(--y, 18%); width: var(--s, 120%); max-width: none;
  transition: transform .6s var(--ease);
}
.merkvlak--licht { background: var(--green-50); color: var(--green-100); }
.merkvlak--diep { background: var(--green-800); color: rgba(213, 236, 229, .18); }

/* De carrousel: één spoor dat tot de schermrand doorloopt. Op een telefoon
   staat de volgende kaart daardoor half in beeld, en dat nodigt uit tot vegen. */
.carrousel { margin-top: 1.75rem; }
.carrousel__spoor {
  display: flex; gap: clamp(1rem, 2vw, 1.5rem);
  margin-inline: calc(-1 * var(--gutter));
  padding: .25rem var(--gutter) 1.5rem;
  overflow-x: auto; overscroll-behavior-x: contain;
  /* Zonder scroll-padding klikt de eerste kaart bij het snappen tegen de rand
     van het spoor aan, en staat hij niet meer onder de kop. Het snappen kijkt
     naar de scrollpoort en niet naar de binnenmarge; dit vertelt hem dat wel. */
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}
.carrousel__spoor::-webkit-scrollbar { display: none; }
.carrousel__spoor > .post { flex: 0 0 clamp(17rem, 31%, 24rem); scroll-snap-align: start; }
.carrousel__spoor:focus-visible { outline: 2px solid var(--green-700); outline-offset: -2px; }
/* Met een muis sleep je het spoor. Tijdens het slepen geen tekstselectie en
   geen snap, anders vecht de browser met de sleep. */
.carrousel__spoor.sleept { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.carrousel__spoor.sleept a { pointer-events: none; }
@media (max-width: 620px) { .carrousel__spoor > .post { flex-basis: 82%; } }

.stuur { display: flex; gap: .5rem; }
.stuur button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border: 1px solid var(--line); border-radius: 50%;
  background: var(--page); color: var(--ink); cursor: pointer;
  transition: background .18s ease, border-color .18s ease, opacity .18s ease;
}
.stuur button:hover:not(:disabled) { background: var(--green-50); border-color: var(--green); }
.stuur button:disabled { opacity: .35; cursor: default; }
.stuur button:focus-visible { outline: 2px solid var(--green-700); outline-offset: 3px; }
@media (max-width: 620px) { .stuur { display: none; } }

/* --- artikel ------------------------------------------------------------- */

.artikelkop h1 { max-width: 22ch; margin-inline: auto; }
.artikelkop .meta { justify-content: center; margin-top: 1.5rem; color: var(--ink); }
/* Op een telefoon staat de auteur op een eigen regel, zodat datum en leestijd
   samen de tweede regel vormen en het stipje niet vooraan een regel belandt. */
@media (max-width: 620px) { .artikelkop .auteur { flex-basis: 100%; justify-content: center; } }
.artikelkop--beeld { padding-bottom: clamp(8rem, 16vw, 13rem); }

/* De foto schuift over de onderkant van de band heen. */
.artikel { padding-top: 0; }
.artikelbeeld { margin: calc(-1 * clamp(6rem, 13vw, 10.5rem)) 0 0; }
.artikelbeeld img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; border-radius: var(--radius); }
@media (max-width: 700px) { .artikelbeeld img { aspect-ratio: 4 / 3; } }

.leesraster {
  display: grid; gap: clamp(2rem, 5vw, 6rem);
  grid-template-columns: 15rem minmax(0, var(--read)) minmax(0, 1fr);
  padding-top: clamp(3rem, 6vw, 5rem);
}

/* De inhoudsopgave. De kop waar je bent krijgt het stipje van het menu, geen
   streep ernaast. */
.toc { position: sticky; top: 130px; align-self: start; font-size: .9375rem; }
.toc > summary { list-style: none; cursor: pointer; }
.toc > summary::-webkit-details-marker { display: none; }
.toc__titel { display: block; margin-bottom: .75rem; font-weight: 500; }
.toc ol { margin: 0; padding: 0; list-style: none; }
.toc li a {
  display: flex; align-items: baseline; gap: .6rem;
  padding: .45rem 0; color: var(--muted); text-decoration: none; line-height: 1.4;
}
.toc li a::before {
  content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%;
  background: var(--green); transform: translateY(-.15em) scale(0); transition: transform .2s var(--ease);
}
.toc li a:hover { color: var(--ink); }
.toc li a[aria-current="true"] { color: var(--green-700); }
.toc li a[aria-current="true"]::before { transform: translateY(-.15em) scale(1); }

@media (max-width: 1100px) {
  .leesraster { grid-template-columns: minmax(0, var(--read)); justify-content: center; }
  .toc { position: static; border: 1px solid var(--line); border-radius: var(--radius-s); padding: 0 1.25rem; }
  .toc > summary { display: flex; justify-content: space-between; align-items: center; min-height: 56px; }
  .toc > summary::after { content: "+"; font-size: 1.5rem; font-weight: 200; color: var(--green-700); }
  .toc[open] > summary::after { content: "−"; }
  .toc__titel { margin: 0; }
  .toc ol { margin-bottom: 1rem; }
}

.tekst { font-size: 1.1875rem; line-height: 1.7; }
.tekst > * + * { margin-top: 1.25rem; }
.tekst p { margin-bottom: 0; color: var(--ink); }
.tekst h2 {
  margin-top: 3.5rem; font-size: clamp(1.625rem, 2.6vw, 2.125rem);
  letter-spacing: -.025em; scroll-margin-top: 130px;
}
.tekst h2 + p { margin-top: 1rem; }
.tekst .inleiding { font-size: 1.375rem; line-height: 1.55; }
.tekst ul { padding: 0; list-style: none; }
.tekst ul li { position: relative; padding-left: 1.75rem; }
.tekst ul li + li { margin-top: .6rem; }
.tekst ul li::before {
  content: ""; position: absolute; left: .25rem; top: .72em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--green);
}

.citaat { margin: 3rem 0; padding: 0; border: 0; }
.citaat p { max-width: 30ch; font-size: clamp(1.75rem, 3vw, 2.4rem); font-weight: 200; letter-spacing: -.03em; line-height: 1.25; color: var(--green-700); }
.citaat p .accent { color: var(--ink); }
.citaat footer { margin-top: 1rem; font-size: .9375rem; color: var(--muted); }

.samengevat { margin-top: 3rem; padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: var(--radius); background: var(--green-50); }
.samengevat h2 { margin: 0; font-size: 1.25rem; font-weight: 400; letter-spacing: -.01em; }
.samengevat ul { margin-top: 1rem; font-size: 1.0625rem; }

.auteurkaart { margin-top: 4rem; padding-top: 2rem; border-top: 1px solid var(--line); }

/* --- vacatures -----------------------------------------------------------
   Mintvlakken zonder rand, die bij hover helemaal groen worden. Luider dan de
   rest van de site; dat mag hier, want deze pagina staat los van de route die
   een cliënt loopt. */

.vacature-tegels {
  display: grid; gap: .75rem; margin: clamp(2.25rem, 4vw, 3.5rem) 0 0;
  padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}
.vacature-tegel {
  position: relative; display: flex; flex-direction: column; min-height: 11rem;
  padding: clamp(1.5rem, 3vw, 1.875rem);
  background: var(--green-100); border-radius: var(--radius);
  transition: background .22s var(--ease);
}
.vacature-tegel h3 {
  font-size: clamp(1.0625rem, 1.7vw, 1.25rem); font-weight: 500;
  letter-spacing: -.01em; margin: 0 0 .625rem;
}
.vacature-tegel__link { color: var(--green-800); text-decoration: none; }
.vacature-tegel__link::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.vacature-tegel__link:focus-visible { outline: none; }
.vacature-tegel:has(.vacature-tegel__link:focus-visible) { outline: 2px solid var(--green-700); outline-offset: 3px; }
.vacature-tegel__kenmerken { margin: 0; color: var(--muted); font-size: .875rem; }
.vacature-tegel__meer { margin-top: auto; padding-top: 1.5rem; font-size: .9375rem; color: var(--green-700); }
.vacature-tegel__meer::after { content: "\00a0\2192"; }

/* Onder elkaar hoeven de tegels niet even hoog te zijn: de minimumhoogte is er
   om een rij naast elkaar recht te houden, en op een telefoon laat hij een gat
   vallen tussen de kenmerken en de link. */
@media (max-width: 620px) {
  .vacature-tegel { min-height: 0; }
  .vacature-tegel__meer { padding-top: 1.125rem; }
}
.vacature-tegel:hover { background: var(--green-600); }
.vacature-tegel:hover .vacature-tegel__link,
.vacature-tegel:hover .vacature-tegel__kenmerken,
.vacature-tegel:hover .vacature-tegel__meer { color: var(--on-green); }

/* Onder het raster: de open sollicitatie, als zin en niet als tweede knop —
   naast zes kaarten met een eigen pad is een grote knop een afleiding. */
.vacatures__open {
  margin: clamp(1.75rem, 3vw, 2.5rem) 0 0; color: var(--muted); font-size: .9375rem;
}

/* --- de vacature zelf ----------------------------------------------------
   Hetzelfde leesraster als een kennisbankartikel: de feiten in de smalle
   kolom links, die meeloopt terwijl je leest, en de tekst in een leesbreedte
   ernaast. Onder 1100px valt het raster in één gecentreerde kolom en staan de
   feiten erboven. */

.vacature-zij { position: sticky; top: 130px; align-self: start; }
.vacature-feiten { margin: 0; display: grid; gap: 1.125rem; }
.vacature-feiten dt { font-size: .8125rem; color: var(--muted); }
.vacature-feiten dd { margin: .2rem 0 0; font-size: 1.0625rem; }
.vacature-eisen {
  margin: clamp(2rem, 4vw, 2.75rem) 0;
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--panel); border-radius: var(--radius);
}
.section--panel .vacature-eisen { background: var(--page); }
.vacature-eisen .vacature__vraagkop { margin-top: 0; }
.vacature-eisen .vacature__punten { margin-top: .875rem; }

/* "Wij vragen:" is een tussenkop in een blok, geen sectiekop: hij hoort even
   groot te zijn als de tekst eromheen, alleen zwaarder. */
.vacature__vraagkop { margin: 1.5rem 0 .6rem; font-size: 1rem; font-weight: 500; }
.vacature__tekst { color: var(--muted); }
.vacature__tekst p + p { margin-top: .85rem; }
.vacature__punten {
  margin: 1.125rem 0 0; padding: 0; list-style: none;
  display: grid; gap: .5rem;
}
.vacature__punten li {
  position: relative; padding-left: 1.35em;
  font-size: .9375rem; line-height: 1.5; color: var(--muted);
}
.vacature__punten li::before {
  content: ""; position: absolute; left: 0; top: .6em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--green);
}

/* Het slot staat in dezelfde kolom en niet in een eigen sectie: anders komt de
   paginamarge er twee keer tussen en valt er een gat van een half scherm. */
.sollicitatie {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: clamp(1.5rem, 3vw, 2.5rem);
  padding: clamp(1.75rem, 3.5vw, 2.5rem);
  background: var(--green-100); border-radius: var(--radius);
}
.sollicitatie h2 {
  font-size: clamp(1.375rem, 2.4vw, 1.75rem); font-weight: 400; letter-spacing: -.02em;
  margin: 0;
}
.sollicitatie p { margin: .75rem 0 0; color: var(--muted); }
.sollicitatie .btn { flex: 0 0 auto; }

@media (max-width: 1100px) {
  /* Boven de tekst in plaats van ernaast. De kolom heeft dan zelf al ruimte
     eronder; de rastermarge eroverheen maakte er een gat van een halve
     schermhoogte van. */
  .vacature-duo, .leesraster:has(.vacature-zij) { row-gap: 0; }
  .vacature-zij { position: static; margin-bottom: clamp(2rem, 4vw, 2.5rem); }
  /* Naast elkaar zolang ze passen, en anders netjes doorlopend. In een raster
     van twee kolommen viel "Vanaf 15 uur per week" op een halve kolom en brak
     hij middenin. */
  .vacature-feiten { display: flex; flex-wrap: wrap; gap: 1.125rem 2.25rem; }
}

@media (max-width: 620px) {
  .sollicitatie { grid-template-columns: 1fr; justify-items: start; }
}

/* Geen enkele vacature open is een toestand en geen fout. Hij krijgt daarom
   hetzelfde kader als een kaart, met de open sollicitatie als uitweg. */
.vacatures__leeg {
  margin-top: clamp(2.25rem, 4vw, 3.5rem); max-width: 52rem;
  padding: clamp(1.75rem, 3.5vw, 2.5rem);
  background: var(--panel); border-radius: var(--radius);
}
.section--panel .vacatures__leeg { background: var(--page); }
.vacatures__leeg p { color: var(--muted); max-width: 62ch; }
.vacatures__leeg .btn { margin-top: 1.75rem; }


/* --- tarieven: de NZa-tabel per beroepsgroep ----------------------------- */

/* De gratis screening staat boven de tabel en niet erin: het is geen
   NZa-tarief maar het aanbod waarmee je begint. Eén regel, drie kolommen. */
.tarief__screening {
  display: grid; grid-template-columns: 1fr auto auto; gap: 1rem 2rem;
  align-items: baseline;
  padding: 1.25rem 1.5rem; margin-bottom: clamp(2rem, 4vw, 3rem);
  background: var(--green-100); border-radius: var(--radius);
}
.tarief__screening-naam  { font-size: 1.125rem; font-weight: 400; }
.tarief__screening-duur  { color: var(--muted); font-size: .9375rem; }
.tarief__screening-prijs { color: var(--green-700); font-size: 1.125rem; font-weight: 500; }

.tarief { display: grid; grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.5rem); }

.tarief__keuze { display: flex; flex-direction: column; gap: .25rem; }
.tarief__knop {
  display: flex; align-items: baseline; gap: 1rem;
  padding: 1rem 1.25rem; border: 0; border-radius: var(--radius-s);
  background: transparent; cursor: pointer;
  color: var(--ink); font: 400 1rem/1.3 var(--font); text-align: left;
  transition: background .18s ease, color .18s ease;
}
.tarief__nummer { color: var(--muted); font-size: .8125rem; font-variant-numeric: tabular-nums; }
.tarief__knop:hover { background: var(--green-50); }
.tarief__knop[aria-selected="true"] { background: var(--green-600); color: var(--on-green); }
.tarief__knop[aria-selected="true"] .tarief__nummer { color: var(--green-200); }
.tarief__knop:focus-visible { outline: 2px solid var(--green-700); outline-offset: 2px; }

.tarief__bladkop {
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
  align-items: baseline; justify-content: space-between;
  margin-bottom: 1.25rem;
}
.tarief__bladkop h2 { font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 400; }
.tarief__datum { color: var(--muted); font-size: .875rem; }

.tarief__tabel { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tarief__tabel th, .tarief__tabel td { padding: .85rem 1rem; text-align: right; }
.tarief__tabel thead th {
  font-size: .75rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); border-bottom: 1px solid var(--line);
}
.tarief__tabel thead th:first-child, .tarief__tabel tbody th { text-align: left; }
.tarief__tabel tbody th { font-weight: 400; color: var(--muted); }
.tarief__tabel tbody tr + tr th, .tarief__tabel tbody tr + tr td { border-top: 1px solid var(--line); }
.tarief__tabel tbody tr:hover th, .tarief__tabel tbody tr:hover td { background: var(--green-50); }

/* Zonder JavaScript staan alle vier de tabellen onder elkaar. Zodra app.js
   draait krijgt de wikkel .tarief--wisselt en verdwijnt alles behalve het
   gekozen blad. */
.tarief__blad + .tarief__blad { margin-top: clamp(2.5rem, 5vw, 4rem); }
.tarief--wisselt .tarief__blad { display: none; }
.tarief--wisselt .tarief__blad.is-open { display: block; margin-top: 0; }

.tarief__voetnoot { margin-top: 2rem; color: var(--muted); font-size: .875rem; max-width: var(--read); }

@media (max-width: 900px) {
  .tarief { grid-template-columns: 1fr; }
  /* De vier beroepsgroepen naast elkaar op één regel die je opzij veegt, in
     plaats van in twee rijen van twee. Zo staan ze in dezelfde volgorde als
     hun nummers en verspringt er niets als een naam langer is. De rij loopt
     tot de schermrand door, zodat zichtbaar is dát er meer staat. */
  .tarief__keuze {
    flex-direction: row; flex-wrap: nowrap;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--gutter);
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .tarief__keuze::-webkit-scrollbar { display: none; }
  .tarief__knop {
    flex: 0 0 auto; scroll-snap-align: start;
    gap: .625rem; padding: .875rem 1.125rem; white-space: nowrap;
  }
  .tarief__tabel th, .tarief__tabel td { padding: .7rem .5rem; font-size: .9375rem; }
}

/* --- psychologen: raster met filter -------------------------------------- */

.psy__lede { max-width: var(--read); margin-bottom: clamp(2rem, 4vw, 3rem); }

.psy-filter {
  padding: clamp(1.5rem, 3vw, 2rem);
  margin-bottom: clamp(2rem, 4vw, 3rem);
  background: var(--green-50); border-radius: var(--radius);
}
.psy-filter__kop { font-size: 1.125rem; font-weight: 400; margin-bottom: 1.25rem; }
.psy-filter__velden { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.psy-filter__veld { display: grid; gap: .4rem; }
.psy-filter__veld label { font-size: .8125rem; color: var(--muted); }
.psy-filter__veld select {
  width: 100%; padding: .7rem 2.25rem .7rem .9rem;
  border: 1px solid var(--border-select, rgba(0, 0, 0, .12)); border-radius: var(--radius-s);
  background: var(--page); color: var(--ink);
  font: 400 1rem/1.3 var(--font); cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%232b7669' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .9rem center; background-size: 12px 8px;
}
.psy-filter__veld select:focus-visible { outline: 2px solid var(--green-700); outline-offset: 2px; }
.psy-filter__voet {
  display: flex; flex-wrap: wrap; gap: .75rem 1.5rem;
  align-items: center; justify-content: space-between; margin-top: 1.25rem;
}
.psy-filter__telling { margin: 0; color: var(--muted); font-size: .875rem; }
.psy-filter__wis {
  border: 0; background: none; padding: 0; cursor: pointer;
  color: var(--green-700); font: 400 .9375rem var(--font);
  text-decoration: underline; text-underline-offset: .3em;
}
.psy-leeg { padding: 3rem 0; color: var(--muted); }

.psy__foto { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; }
.psy__leeg {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: linear-gradient(150deg, var(--green-50), var(--green-100));
}
.psy__leeg img { width: 3rem; height: 3rem; opacity: .5; }
.psy__bio { color: var(--muted); font-size: .875rem; line-height: 1.6; }

/* Hetzelfde plusje als bij de vragenlijst, zodat een uitklap er overal op de
   site hetzelfde uitziet. */
.psy__plus { position: relative; width: .875rem; height: .875rem; flex: 0 0 auto; }
.psy__plus::before, .psy__plus::after {
  content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 1.5px;
  background: var(--green); transition: transform .22s var(--ease);
}
.psy__plus::after { transform: rotate(90deg); }
details[open] .psy__plus::after { transform: rotate(0); }

/* --- smaak "register": een regel per behandelaar --------------------------
   Geen kaarten maar regels onder een haarlijn, zoals de vragenlijst. Je leest
   eenendertig namen in twee schermen in plaats van in twaalf, en de regel
   klapt open voor wie verder wil. Past bij het filter erboven: dit is een
   register waarin je zoekt, geen etalage. */

.psy-register { margin: 0; padding: 0; list-style: none; }
/* Geen kader en geen vulling: .psy is een kaart, een regel is dat niet. Alleen
   de haarlijn erboven, en een onder de laatste. */
.psy--regel {
  display: block; overflow: visible;
  border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none;
}
.psy--regel:last-child { border-bottom: 1px solid var(--line); }
.psy--regel > details > summary {
  display: grid; align-items: center; gap: 1.25rem;
  grid-template-columns: 3.5rem minmax(0, 1fr) minmax(0, 18rem) .875rem;
  padding: 1rem .25rem; list-style: none; cursor: pointer;
}
.psy--regel > details > summary::-webkit-details-marker { display: none; }
.psy--regel > details > summary:focus-visible { outline: 2px solid var(--green-700); outline-offset: 2px; }
.psy--regel:hover .psy-regel__wie { color: var(--green-700); }
.psy-regel__portret {
  position: relative; display: block; width: 3.5rem; height: 3.5rem;
  border-radius: 50%; overflow: hidden; background: var(--green-50);
}
.psy-regel__naam { display: grid; gap: .15rem; }
.psy-regel__wie { font-size: 1.0625rem; transition: color .18s ease; }
.psy-regel__rol { color: var(--muted); font-size: .8125rem; }
.psy-regel__talen { color: var(--muted); font-size: .8125rem; }
.psy-regel__meer {
  padding: 0 .25rem 1.5rem 4.75rem; max-width: 62ch;
}
.psy-regel__meer .psy__bio { margin: 0 0 1rem; }
.psy-regel__meer .psy__groep { margin: 0; }
.psy-regel__meer .psy__groep + .psy__groep { margin-top: .875rem; }

@media (max-width: 720px) {
  .psy--regel > details > summary {
    grid-template-columns: 3rem minmax(0, 1fr) .875rem;
    gap: .875rem;
  }
  .psy-regel__portret { width: 3rem; height: 3rem; }
  .psy-regel__talen { display: none; }
  .psy-regel__meer { padding-left: 0; }
}
.psy__groep + .psy__groep { margin-top: .85rem; }
.psy__label { display: block; margin-bottom: .4rem; color: var(--muted); font-size: .75rem; }
.psy__pillen { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.psy__pillen li {
  padding: .25rem .6rem; border-radius: 999px;
  background: var(--green-50); color: var(--green-700); font-size: .75rem; line-height: 1.4;
}

@media (max-width: 720px) {
  .psy-filter__velden { grid-template-columns: 1fr; }
}

/* --- contactgegevens ------------------------------------------------------ */

.contactgegevens { margin: 2rem 0 0; }
.contactgegevens > div + div { margin-top: 1.25rem; }
.contactgegevens dt { color: var(--muted); font-size: .8125rem; margin-bottom: .25rem; }
.contactgegevens dd { margin: 0; font-size: 1.0625rem; line-height: 1.6; }
.contactgegevens dd a { color: var(--green-700); }

/* --- de kennismakingsroute -----------------------------------------------
   Overgenomen van deonlinecoach.nl/contact/ en omgekleurd. Daar staat deze
   pagina al: een formulier dat je in stappen doorloopt, met de contactgegevens
   ernaast en een afsluiting die vertelt wat er daarna gebeurt.

   Zonder JavaScript staan alle stappen onder elkaar als één gewoon formulier.
   ------------------------------------------------------------------------- */

.contact { padding-top: clamp(7.5rem, 12vw, 9.5rem); }
.contact__grid {
  display: grid; gap: clamp(2.5rem, 5vw, 4.5rem);
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  align-items: start;
}

.flow { margin-top: clamp(2.5rem, 5vw, 3.5rem); max-width: 40rem; }

.flow__balk { height: 4px; background: var(--green-100); border-radius: 999px; overflow: hidden; }
/* Schaalt met transform en niet met width: width animeren kost layout. */
.flow__vulling {
  display: block; height: 100%; width: 100%; background: var(--green);
  border-radius: 999px;
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease);
}
.flow__teller { margin: .75rem 0 2rem; font-size: .875rem; color: var(--muted); }

.flow__stap { margin: 0 0 1.5rem; padding: 0; border: 0; }
.flow__stap legend {
  padding: 0; margin-bottom: 1.25rem;
  font-size: clamp(1.375rem, 2.4vw, 1.75rem); font-weight: 200; letter-spacing: -.02em;
}
.flow__stap legend:focus-visible { outline: 2px solid var(--green-700); outline-offset: 4px; }
.flow__hint { margin-bottom: 1.25rem; color: var(--muted); font-size: .9375rem; }

.flow__kaarten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.flow__kaart {
  display: flex; flex-direction: column; gap: .3rem; align-items: flex-start;
  padding: 1.15rem 1.25rem; text-align: left;
  background: var(--page); border: 1px solid var(--line); border-radius: var(--radius-s);
  font-family: inherit; font-size: 1rem; color: var(--ink); cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}
.flow__kaart:hover { border-color: var(--green); }
.flow__kaart b { font-weight: 400; }
.flow__kaart small { color: var(--muted); font-size: .875rem; line-height: 1.35; }
.flow__kaart[aria-pressed="true"] {
  border-color: var(--green); background: var(--green-50);
  box-shadow: inset 0 0 0 1px var(--green);
}

.flow__veld { display: block; margin-bottom: 1.25rem; }
.flow__veld > span { display: block; margin-bottom: .45rem; font-size: .9375rem; }
.flow__veld input, .flow__veld textarea {
  width: 100%; padding: .85em 1em;
  font: 400 1rem/1.5 var(--font); color: var(--ink);
  background: var(--page); border: 1px solid var(--line); border-radius: var(--radius-s);
}
.flow__veld input:focus, .flow__veld textarea:focus { border-color: var(--green); outline: none; }
.flow__veld input:focus-visible, .flow__veld textarea:focus-visible {
  outline: 2px solid var(--green-700); outline-offset: 2px;
}

.flow__fout { display: block; margin-top: .45rem; font-size: .875rem; font-weight: 400; color: #b42318; }

.flow__samenvatting { margin: 0; }
.flow__samenvatting > div {
  display: grid; grid-template-columns: 11rem 1fr; gap: 1rem;
  padding: .8rem 0; border-bottom: 1px solid var(--line);
}
.flow__samenvatting dt { color: var(--muted); font-size: .9375rem; }
.flow__samenvatting dd { margin: 0; }

.flow__nav { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.flow__uitweg { margin-top: 1.75rem; font-size: .9375rem; color: var(--muted); }
.flow__honing { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* De bedanksectie. Dit is het laatste wat iemand van het formulier ziet, dus
   krijgt hij het gewicht van een echte sectie in plaats van twee regels tekst:
   het vinkje staat in dezelfde open ring als bij de methodieken, en eronder
   staat wat er na het versturen gebeurt. */
.flow__klaar {
  padding: clamp(1.75rem, 4vw, 2.75rem);
  background: var(--panel); border-radius: var(--radius);
}
.klaar__vink {
  display: grid; place-items: center;
  width: 3.5rem; height: 3.5rem; margin-bottom: 1.5rem;
  border: 1.5px solid var(--green); border-top-color: transparent;
  border-radius: 50%; transform: rotate(-45deg); color: var(--green);
}
.klaar__vink svg { width: 1.5rem; height: 1.5rem; transform: rotate(45deg); }
.flow__klaar h2 { font-size: clamp(1.5rem, 3vw, 1.875rem); font-weight: 400; margin-bottom: .75rem; }
.klaar__lede { color: var(--muted); max-width: 46ch; }
.klaar__stappen {
  display: grid; gap: 1px; list-style: none;
  margin: clamp(1.75rem, 3vw, 2.25rem) 0 0; padding: 0;
  background: var(--line); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
}
.klaar__stappen li { display: grid; gap: .3rem; padding: 1.125rem 1.25rem; background: var(--page); }
.klaar__nummer { font-size: .8125rem; letter-spacing: .06em; color: var(--green); }
.klaar__stappen b { font-weight: 400; }
.klaar__stappen small { color: var(--muted); font-size: .9375rem; line-height: 1.6; }
.klaar__uitweg { margin-top: 1.5rem; font-size: .9375rem; color: var(--muted); }
.flow__klaar .btn { margin-top: 1.5rem; }
.flow__klaar:focus-visible { outline: 2px solid var(--green-700); outline-offset: 6px; }

.contact__zij {
  padding: clamp(1.75rem, 3.5vw, 2.25rem);
  background: var(--panel); border-radius: var(--radius);
}
.contact__zij h2 { font-size: 1.125rem; font-weight: 500; margin-bottom: 1rem; }
.contact__zij address { font-style: normal; line-height: 1.7; margin-bottom: 1.25rem; }
.contact__zij .klein { color: var(--muted); }

@media (max-width: 900px) {
  .contact__grid { grid-template-columns: 1fr; }
  .contact__zij { order: 2; }
}
@media (max-width: 560px) {
  .flow__kaarten { grid-template-columns: 1fr; }
  .flow__samenvatting > div { grid-template-columns: 1fr; gap: .2rem; }
  .flow__nav .btn { flex: 1; justify-content: center; }
}

/* ==========================================================================
   Micro-animaties
   Kleine bewegingen die de pagina levend houden zonder dat er iets danst.
   Alles hangt aan .beweegt op <html> — die klasse zet app.js alleen als de
   bezoeker geen prefers-reduced-motion heeft staan. Staat hij wel aan, dan
   valt elke regel hieronder weg en blijft de eindtoestand over.

   Regel voor alles hieronder: de beweging duurt korter dan een halve seconde,
   verplaatst niets meer dan een paar pixels, en gebeurt één keer.
   ========================================================================== */

/* --- hero: het beeld komt tot stilstand ---------------------------------- */
/* Het beeld staat op het moment van laden een fractie groter en zakt terug
   naar zijn eigen maat. Alleen transform, dus het kost geen herberekening van
   de layout en verschuift niets eromheen. */
.beweegt .hero__beeld img {
  animation: beeld-tot-rust 1.4s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes beeld-tot-rust {
  from { transform: scale(1.06); }
  to   { transform: none; }
}

/* --- signalen: het icoon tekent zichzelf --------------------------------- */
/* De iconen zijn lijntekeningen. Bij het verschijnen loopt de lijn zichzelf
   uit, van niets naar compleet. 240 is ruim langer dan het langste pad in de
   set; een dash die langer is dan het pad zelf is gewoon een volle lijn. */
/* Elk element in de iconen draagt pathLength="1", zodat de lengte van de
   lijn genormaliseerd is. Zonder dat zou hier een getal moeten staan dat
   langer is dan het langste pad in de set — een gok die stilletjes fout gaat
   zodra er een icoon bij komt. */
.beweegt .signaal .signaal__icoon svg * {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.beweegt .signaal.is-in .signaal__icoon svg * {
  animation: lijn-trekken .9s cubic-bezier(.35, 0, .2, 1) both;
  animation-delay: calc(var(--i, 0) * 90ms + 160ms);
}
@keyframes lijn-trekken { to { stroke-dashoffset: 0; } }

/* --- kaarten: de kop schuift op zijn link -------------------------------- */
/* Het onderstreepje loopt van links uit onder de naam van de klacht. Het
   pijltje rechts hoort erbij en staat al bij .kaart__link. */
.kaart__link { background-image: linear-gradient(var(--green-700), var(--green-700));
  background-repeat: no-repeat; background-position: 0 100%; background-size: 0 1px;
  transition: background-size .28s var(--ease); }
.kaart:hover .kaart__link,
.kaart__link:focus-visible { background-size: 100% 1px; }

/* --- de plus draait ------------------------------------------------------ */
/* Bij de duo-knop was de cirkel al groter op hover; nu draait het teken mee.
   Een kwartslag, niet meer: een hele slag leest als laden. */
.plusknop:hover .plusknop__cirkel::before,
.plusknop:hover .plusknop__cirkel::after { transition: transform .3s var(--ease); }
.plusknop:hover .plusknop__cirkel::before { transform: rotate(90deg); }
.plusknop:hover .plusknop__cirkel::after  { transform: rotate(180deg); }

/* --- veelgestelde vragen: het antwoord vouwt open ------------------------ */
/* Een <details> springt van dicht naar open. ::details-content geeft de
   inhoud een eigen doos die wél een hoogte kan animeren; interpolate-size
   maakt dat `auto` een waarde is waar naartoe te bewegen valt. Kent de
   browser het niet, dan springt hij zoals altijd — de inhoud staat er hoe
   dan ook. */
@supports selector(::details-content) {
  :root { interpolate-size: allow-keywords; }
  .beweegt .faq__item::details-content {
    block-size: 0;
    overflow: hidden;
    opacity: 0;
    transition: block-size .34s var(--ease), opacity .34s ease, content-visibility .34s;
    transition-behavior: allow-discrete;
  }
  .beweegt .faq__item[open]::details-content { block-size: auto; opacity: 1; }
}

/* --- portretten: een halve stap dichterbij ------------------------------- */
.team__vlak { overflow: hidden; }
.team__foto { transition: transform .5s var(--ease); }
.beweegt .team__kaart:hover .team__foto,
.beweegt .team__kaart:focus-within .team__foto { transform: scale(1.04); }

/* --- de knop in de kop --------------------------------------------------- */
/* Hij staat op elke pagina en is de enige knop die altijd in beeld is. Een
   kleine indruk bij het aanwijzen is genoeg om te laten voelen dat hij leeft;
   .btn had al een kleurwissel, dit is de beweging erbij. */
.btn { transition: background .18s ease, transform .18s var(--ease), box-shadow .18s ease; }
.beweegt .btn:hover { transform: translateY(-1px); box-shadow: 0 .5rem 1.25rem rgba(var(--green-rgb), .25); }
.beweegt .btn:active { transform: translateY(1px); box-shadow: none; }

/* Lopende tekst op de juridische pagina's en in een uitgeklapt antwoord:
   tussenkoppen en opsommingen moeten er ook in kunnen staan. */
.prose h2, .prose h3 { margin: 2rem 0 .75rem; font-size: 1.125rem; font-weight: 500; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose p, .prose ul { max-width: var(--read); }
.prose ul, .faq__antwoord ul { margin: 0 0 1rem; padding-left: 1.2em; }
.prose li, .faq__antwoord li { margin-bottom: .4rem; line-height: 1.6; }
.faq__antwoord p + p, .faq__antwoord ul + p { margin-top: .75rem; }

/* ==========================================================================
   Micro-animaties, tweede ronde
   Alles hieronder hangt aan .beweegt, net als de rest: geen van deze
   bewegingen is een voorwaarde om de pagina te kunnen gebruiken.
   ========================================================================== */

/* --- de knop in de kop -----------------------------------------------------
   Precies zoals op deonlinecoach.nl, nagemeten: bij aanwijzen een tint
   donkerder in 0,18 seconde, bij klikken een pixel omlaag. Geen vulling die
   opkomt, geen schaduw, niet meebewegen met de muis.

   Hij heeft hier eerder wel meebewogen en zich van onderaf gevuld. Voor een
   knop die op elke pagina vast rechtsboven staat was dat te veel: je ziet hem
   de hele tijd, en dan wordt elke beweging na een minuut onrust. De andere
   knoppen op de pagina houden de vulling. */
.kop__cta { overflow: visible; transition: background .18s ease, transform .18s ease; }
.kop__cta::before { content: none; }
.kop__cta:hover, .kop__cta:focus-visible { background: var(--green-700); }
.kop__cta:active { background: var(--green-700); transform: translateY(1px); }
.beweegt .kop__cta:hover { transform: none; box-shadow: none; }
.beweegt .kop__cta:active { transform: translateY(1px); }

/* --- voortgang van de pagina ----------------------------------------------
   Een lijn van 2px onder de vaste kop die meeloopt met hoe ver je bent. Op de
   lange pagina's — de veelgestelde vragen, de voorwaarden, de psychologen —
   is dat het verschil tussen "hoe lang duurt dit nog" en gewoon doorlezen.
   De schaal komt uit een scroll-timeline, dus zonder een regel JavaScript. */
.leesbalk {
  position: fixed; z-index: 49; inset: 0 0 auto; height: 2px;
  background: var(--green); transform-origin: 0 50%; transform: scaleX(0);
  pointer-events: none;
}
@supports (animation-timeline: scroll()) {
  .beweegt .leesbalk {
    animation: leesbalk linear both;
    animation-timeline: scroll(root block);
  }
}
@keyframes leesbalk { to { transform: scaleX(1); } }

/* --- de navigatie ---------------------------------------------------------
   Een lijntje dat onder het item uitloopt in plaats van er te verschijnen.
   Het actieve item heeft al een bolletje; dit is voor de rest. */
/* Alleen op een <a>. Een uitklapitem is een <summary> met dezelfde klasse, en
   die gebruikt zijn ::after al voor de chevron; twee regels op hetzelfde
   pseudo-element leverden daar een zwarte ruit op. */
a.nav__link { position: relative; }
a.nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -.35em; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .28s var(--ease);
}
.nav__item:hover > a.nav__link::after,
a.nav__link:focus-visible::after { transform: none; }
a.nav__link[aria-current="page"]::after { display: none; }

/* --- de talenband ---------------------------------------------------------
   De eenentwintig talen die de behandelaren samen spreken, traag langslopend.
   Het is het enige echte onderscheid van deze praktijk en het stond nergens.

   Twee identieke sporen naast elkaar, waarvan er één verschuift over precies
   zijn eigen breedte: daardoor is er geen sprong bij het opnieuw beginnen. Het
   tweede spoor is aria-hidden, anders leest een schermlezer alles dubbel.
   Zonder beweging valt de band terug op een gewone opsomming. */
.talenband {
  overflow: hidden; padding-block: clamp(2rem, 4vw, 3rem);
  border-block: 1px solid var(--line);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.talenband__spoor { display: flex; width: max-content; }
.beweegt .talenband__spoor { animation: talen 48s linear infinite; }
.talenband:hover .talenband__spoor,
.talenband:focus-within .talenband__spoor { animation-play-state: paused; }
@keyframes talen { to { transform: translateX(-50%); } }
.talenband__rij { display: flex; align-items: center; gap: clamp(1.75rem, 3.5vw, 3rem); padding-right: clamp(1.75rem, 3.5vw, 3rem); }
.talenband__taal {
  font-size: clamp(1.25rem, 2.4vw, 1.9rem); font-weight: 200;
  letter-spacing: -.02em; white-space: nowrap; color: var(--ink);
}
.talenband__stip { width: 5px; height: 5px; border-radius: 50%; background: var(--green); flex: 0 0 auto; }

@media (prefers-reduced-motion: reduce) {
  .talenband { -webkit-mask-image: none; mask-image: none; }
  .talenband__spoor { flex-wrap: wrap; width: auto; animation: none; }
  .talenband__rij:nth-child(2) { display: none; }
  .talenband__rij { flex-wrap: wrap; }
}

/* --- kruimelpad ----------------------------------------------------------
   Staat in de paginakop, boven de titel. Op een site met een laag eronder —
   /behandelingen/depressie/ — is dit het verschil tussen weten waar je bent en
   alleen een titel zien. Het laatste deel is geen link: je staat er al. */
.kruimels { margin-bottom: clamp(1rem, 2vw, 1.5rem); }
.kruimels ol {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .3rem .6rem; margin: 0; padding: 0; list-style: none;
  font-size: .8125rem; color: var(--muted);
}
.kruimels li { display: flex; align-items: center; gap: .6rem; }
/* De scheiding is getekend en niet getypt: een / of › zit niet in elk font en
   valt dan terug op een ander font, met een andere dikte. */
.kruimels li + li::before {
  content: ""; width: .32em; height: .32em;
  border-top: 1px solid currentColor; border-right: 1px solid currentColor;
  transform: rotate(45deg); opacity: .55;
}
.kruimels a { color: inherit; text-decoration: none; }
.kruimels a:hover { color: var(--green-700); text-decoration: underline; text-underline-offset: .25em; }
.kruimels [aria-current="page"] { color: var(--green-700); }