/* transzorg.nl — rustig en strak, in de lijn van apple.com: veel wit, grote koppen, grijze kaarten, één accentkleur.
   De vlagkleuren zijn alleen accent. Licht en donker. */
:root{
  --bg:#ffffff; --bg2:#f5f5f7; --kaart:#f5f5f7; --kaart2:#ffffff; --inkt:#1d1d1f; --zacht:#6e6e73; --lijn:#d2d2d7;
  --link:#0066cc; --knop:#0071e3; --knop-hover:#0077ed; --accent:#b03a6c;
  --blauw:#5bcefa; --roze:#f5a9b8; --lila:#b9a2ff;
  --tint-blauw:#eaf6fd; --tint-roze:#fcf0f3; --tint-lila:#f2effc;
  --vlag:linear-gradient(90deg,#5bcefa,#f5a9b8 30%,#d9d9e0 50%,#f5a9b8 70%,#5bcefa);
  --kop:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter",system-ui,sans-serif;
  --tekst:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter",system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
  --r:28px; --r2:18px; --ease:cubic-bezier(.25,.1,.25,1);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#000000; --bg2:#0d0d0f; --kaart:#161617; --kaart2:#1d1d1f; --inkt:#f5f5f7; --zacht:#a1a1a6; --lijn:#38383b;
  --link:#2997ff; --accent:#ff8fb6; --tint-blauw:#0f1a20; --tint-roze:#1f1418; --tint-lila:#17141f; color-scheme:dark}}
:root[data-theme="dark"]{--bg:#000000; --bg2:#0d0d0f; --kaart:#161617; --kaart2:#1d1d1f; --inkt:#f5f5f7; --zacht:#a1a1a6; --lijn:#38383b;
  --link:#2997ff; --accent:#ff8fb6; --tint-blauw:#0f1a20; --tint-roze:#1f1418; --tint-lila:#17141f; color-scheme:dark}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}
body{margin:0;background:var(--bg);color:var(--inkt);font-family:var(--tekst);font-size:1.0625rem;line-height:1.5;letter-spacing:-.011em;overflow-x:hidden;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--bg)}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
:focus-visible{outline:3px solid color-mix(in srgb,var(--link) 70%,transparent);outline-offset:3px;border-radius:8px}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:16px;z-index:99;background:var(--kaart2);padding:.6em 1em;border-radius:10px}
h1,h2,h3{font-family:var(--kop);font-weight:600;line-height:1.08;letter-spacing:-.022em;text-wrap:balance;margin:0}
p{margin:0 0 .8rem}p:last-child{margin-bottom:0}
.kicker{display:block;font-size:.95rem;font-weight:600;letter-spacing:-.01em;color:var(--accent);margin-bottom:.5rem}
b,strong{font-weight:600}

/* kop: dunne glazen balk */
.kop{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:color-mix(in srgb,var(--bg) 80%,transparent);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid color-mix(in srgb,var(--lijn) 60%,transparent)}
.kop-in{max-width:76rem;margin:0 auto;display:flex;align-items:center;gap:.8rem;min-height:52px;padding:.35rem max(16px,env(safe-area-inset-right,0px)) .35rem max(16px,env(safe-area-inset-left,0px))}
.logo{font-family:var(--kop);font-weight:600;font-size:1.05rem;color:var(--inkt);display:inline-flex;align-items:center;gap:.5rem;letter-spacing:-.02em}
.logo:hover{text-decoration:none}
.logo b{font-weight:600;color:var(--zacht)}
.logo-vlag{width:18px;height:18px;border-radius:5px;background:linear-gradient(#5bcefa 0 20%,#f5a9b8 20% 40%,#fff 40% 60%,#f5a9b8 60% 80%,#5bcefa 80%);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.nav{display:flex;align-items:center;gap:.1rem;margin-left:auto}
.nav a.top,.groep summary{font-size:.82rem;color:var(--inkt);opacity:.8;padding:.5em .75em;border-radius:999px;cursor:pointer;list-style:none;transition:opacity .2s}
.nav a.top:hover,.groep summary:hover{opacity:1;text-decoration:none}
.groep summary::-webkit-details-marker{display:none}
.groep summary::after{content:"";display:inline-block;width:.38em;height:.38em;margin-left:.45em;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-.2em) rotate(45deg)}
.nav a[aria-current],.groep.actief summary{opacity:1;font-weight:600}
.groep{position:relative}
.groep .sub{position:absolute;top:calc(100% + .6rem);left:-.5rem;min-width:15rem;background:color-mix(in srgb,var(--kaart2) 92%,transparent);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--lijn);border-radius:var(--r2);padding:.4rem;box-shadow:0 20px 50px -20px rgba(0,0,0,.25);display:grid}
.groep .sub a{padding:.55em .8em;border-radius:10px;color:var(--inkt);font-size:.92rem}
.groep .sub a:hover,.groep .sub a[aria-current]{background:var(--bg2);text-decoration:none}
.kop-acties{display:flex;gap:.4rem;align-items:center}
.taal,.hulp,.weg{font-weight:500;font-size:.8rem;border-radius:999px;padding:.45em .95em;white-space:nowrap;min-height:34px;display:inline-flex;align-items:center;text-decoration:none!important}
.taal{color:var(--inkt);background:var(--bg2)}
.hulp{background:#f5a9b8;color:#3a0f1f}
.weg{background:var(--inkt);color:var(--bg)}
.menu-knop{display:none;margin-left:auto;font:500 .85rem var(--tekst);color:var(--inkt);background:var(--bg2);border:0;border-radius:999px;padding:.5em 1em;cursor:pointer;min-height:36px}
@media (max-width:1060px){
  .kop-in{flex-wrap:wrap}
  .menu-knop{display:inline-flex;align-items:center}
  .nav{display:none;order:5;width:100%;flex-direction:column;align-items:stretch;margin:0;padding:.4rem 0 1rem}
  .nav.open{display:flex}
  .nav a.top,.groep summary{font-size:1.25rem;font-weight:600;opacity:1;padding:.45em .2em;border-radius:0}
  .groep .sub{position:static;box-shadow:none;border:0;padding:0 0 .4rem .3rem;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
  .groep .sub a{font-size:1rem;color:var(--zacht)}
  .kop-acties{order:4;width:100%;justify-content:flex-end}
}

/* hero */
main{display:block}
.hero{max-width:76rem;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:2rem;align-items:center;padding:4.5rem max(16px,env(safe-area-inset-right,0px)) 2.5rem max(16px,env(safe-area-inset-left,0px))}
.hero h1{font-size:clamp(2.5rem,6vw,4.5rem);font-weight:700;letter-spacing:-.03em;line-height:1.04}
.hero h1 em{font-style:normal;color:var(--zacht)}
.hero .lead{font-size:clamp(1.15rem,1.9vw,1.45rem);line-height:1.38;color:var(--zacht);max-width:38rem;margin-top:1.1rem;letter-spacing:-.015em}
.hero-knoppen{display:flex;gap:.8rem;flex-wrap:wrap;align-items:center;margin-top:1.8rem}
.knop{display:inline-flex;align-items:center;justify-content:center;font-family:var(--tekst);font-weight:500;font-size:1rem;color:#fff;background:var(--knop);border-radius:999px;padding:.7em 1.35em;min-height:44px;text-decoration:none!important;transition:background .2s var(--ease)}
.knop:hover{background:var(--knop-hover)}
.knop.rand{background:transparent;color:var(--link);box-shadow:inset 0 0 0 1px var(--link)}
.knop.rand:hover{background:color-mix(in srgb,var(--link) 8%,transparent)}
.hero-art{position:relative;min-height:260px;display:flex;justify-content:center;align-items:flex-end}
/* home: gecentreerd, zoals een productpagina */
.hero.home{grid-template-columns:1fr;justify-items:center;text-align:center;padding-top:5rem;gap:2.5rem}
.hero.home .hero-tekst{max-width:56rem}
.hero.home h1{font-size:clamp(2.7rem,7.4vw,5.6rem)}
.hero.home .lead{margin-left:auto;margin-right:auto}
.hero.home .hero-knoppen{justify-content:center}
@media (max-width:760px){.hero{grid-template-columns:1fr;padding-top:2.5rem}.hero-art{min-height:0}.hero.home{padding-top:3rem}}

/* pagina */
.pagina{max-width:76rem;margin:0 auto;padding:0 max(16px,env(safe-area-inset-right,0px)) 5rem max(16px,env(safe-area-inset-left,0px));display:grid;grid-template-columns:minmax(0,1fr);gap:1.25rem}
.sec{background:var(--kaart);border-radius:var(--r);padding:clamp(1.5rem,4vw,3.2rem)}
.sec-kop{margin-bottom:1.5rem}
.sec h2{font-size:clamp(1.75rem,3.6vw,2.6rem);font-weight:700;letter-spacing:-.028em}
.sec h3{font-size:1.15rem;margin-bottom:.4rem;letter-spacing:-.018em}
.sec>p,.sec>.lijst{max-width:46rem}
.kaarten{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr))}
.kaarten.twee{grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr))}
.kaart{background:var(--kaart2);border-radius:var(--r2);padding:1.4rem 1.5rem;min-width:0}
.kaart p{color:var(--zacht)}
.kaart .tag{display:inline-block;font-size:.75rem;font-weight:600;letter-spacing:-.005em;color:var(--accent);margin-bottom:.45rem}
.lijst{margin:0;padding-left:1.2rem;display:grid;gap:.55rem}
.lijst li::marker{color:var(--zacht)}
.stappen{list-style:none;margin:0;padding:0;counter-reset:s;display:grid;gap:1.1rem}
.stappen>li{counter-increment:s;display:grid;grid-template-columns:2.4rem 1fr;gap:1rem;align-items:start}
.stappen>li::before{content:counter(s);width:2.4rem;height:2.4rem;border-radius:50%;display:grid;place-items:center;font-family:var(--kop);font-weight:600;font-size:.95rem;background:var(--kaart2);color:var(--inkt);box-shadow:inset 0 0 0 1px var(--lijn)}
.stappen p{color:var(--zacht)}
ol.drie,ul.drie{padding-left:1.3rem;display:grid;gap:.3rem;margin:.2rem 0 .9rem}
.tabel-wrap+p,.tabel-wrap+.lijst{margin-top:1.3rem}
.tabel-wrap{overflow-x:auto;border-radius:var(--r2);background:var(--kaart2)}
table{width:100%;border-collapse:collapse;font-size:.95rem;min-width:34rem}
caption{caption-side:bottom;text-align:left;font-size:.85rem;color:var(--zacht);padding:.8rem 1.1rem}
th{font-size:.78rem;font-weight:600;text-align:left;color:var(--zacht);padding:.9rem 1.1rem;border-bottom:1px solid var(--lijn)}
td{padding:.85rem 1.1rem;border-top:1px solid color-mix(in srgb,var(--lijn) 60%,transparent);vertical-align:top;font-variant-numeric:tabular-nums}
tbody tr:first-child td{border-top:0}
td:first-child{font-weight:600}
.let{border-radius:var(--r2);padding:1.2rem 1.4rem;background:var(--kaart2)}
.let.info{background:var(--tint-blauw)}
.let.tip{background:var(--tint-lila)}
.let.waarschuwing{background:var(--tint-roze)}
.let.quote{background:transparent;font-family:var(--kop);font-weight:600;font-size:clamp(1.4rem,3vw,2.1rem);line-height:1.2;letter-spacing:-.025em;padding:1.5rem 0;text-wrap:balance}
.sec .let{background:var(--kaart2)}

/* bento */
.bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.tegel{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:.8rem;min-height:13.5rem;border-radius:var(--r);padding:1.8rem;color:var(--inkt);background:var(--kaart);overflow:hidden;text-decoration:none!important;transition:transform .5s var(--ease)}
.tegel:hover{transform:scale(1.012)}
.tegel.groot{grid-column:span 2}
.tegel h3{font-size:clamp(1.35rem,2.2vw,1.85rem);font-weight:700;letter-spacing:-.025em}
.tegel p{color:var(--zacht);margin:0;max-width:28rem}
.tegel .pijl{align-self:flex-start;width:2rem;height:2rem;border-radius:50%;display:grid;place-items:center;font-size:.95rem;color:var(--inkt);background:color-mix(in srgb,var(--inkt) 8%,transparent);transition:background .3s var(--ease),color .3s var(--ease)}
.tegel:hover .pijl{background:var(--knop);color:#fff}
.tegel.blauw{background:linear-gradient(160deg,var(--tint-blauw),var(--kaart) 70%)}
.tegel.roze{background:linear-gradient(160deg,var(--tint-roze),var(--kaart) 70%)}
.tegel.lila{background:linear-gradient(160deg,var(--tint-lila),var(--kaart) 70%)}
.tegel.groot:last-child{grid-column:span 4}
@media (max-width:900px){.bento{grid-template-columns:repeat(2,minmax(0,1fr))}.tegel.groot:last-child{grid-column:span 2}}
@media (max-width:560px){.bento{grid-template-columns:1fr}.tegel.groot,.tegel.groot:last-child{grid-column:auto}.tegel{min-height:0}}

/* ervaring (donker vlak, zoals een productbanner) */
.ervaring{display:grid;gap:.6rem;color:#f5f5f7;border-radius:var(--r);padding:clamp(1.8rem,5vw,3.4rem);background:radial-gradient(ellipse at 85% 0%,rgba(245,169,184,.28),transparent 55%),radial-gradient(ellipse at 0% 100%,rgba(91,206,250,.24),transparent 60%),#000;text-decoration:none!important}
.ervaring .kicker{color:#5bcefa}
.ervaring h2{font-size:clamp(1.9rem,4.4vw,3rem);font-weight:700}
.ervaring p{color:#a1a1a6;max-width:36rem}
.ervaring .knop{justify-self:start;margin-top:.6rem}

/* steun */
.lijnen{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
.lijn{display:grid;gap:.15rem;background:var(--kaart2);border-radius:var(--r2);padding:1rem 1.2rem}
.lijn .nr{font-family:var(--kop);font-weight:700;color:var(--inkt);font-size:1.25rem;letter-spacing:-.02em}
.lijn span:last-child{color:var(--zacht);font-size:.9rem}
.hulpnu{box-shadow:inset 0 0 0 2px #f5a9b8}

/* verhaal */
.tijdlijn{list-style:none;margin:0;padding:0;display:grid}
.tijdlijn li{display:grid;grid-template-columns:7rem 1fr;gap:1rem;padding:1rem 0;border-top:1px solid var(--lijn)}
.tijdlijn .jaar{font-family:var(--kop);font-weight:600;color:var(--zacht)}
@media (max-width:560px){.tijdlijn li{grid-template-columns:1fr;gap:.2rem}}
.lessen{margin:0;padding-left:1.3rem;display:grid;gap:.6rem}

/* faq + bronnen */
.faq details{border-top:1px solid var(--lijn);padding:1rem 0}
.faq details:last-child{border-bottom:1px solid var(--lijn)}
.faq summary{font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:400;font-size:1.3rem;line-height:1;color:var(--zacht);transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details>div{color:var(--zacht);padding-top:.6rem}
.bronnen{border-top:1px solid var(--lijn);padding:2rem .2rem 0;margin-top:1rem}
.bronnen h2{font-size:1rem;margin-bottom:.3rem}
.bronnen .gecheckt{font-size:.82rem;color:var(--zacht)}
.bronnen ul{margin:.6rem 0 0;padding-left:1.1rem;display:grid;gap:.35rem;font-size:.88rem;overflow-wrap:anywhere}

/* voet */
.voet{background:var(--bg2);padding:2.5rem max(16px,env(safe-area-inset-right,0px)) calc(2rem + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));font-size:.85rem}
.voet-in{max-width:76rem;margin:0 auto;display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
.voet h2{font-size:.85rem;font-weight:600;margin-bottom:.6rem}
.voet a:not(.logo){display:block;color:var(--zacht);padding:.2rem 0}
.voet a:not(.logo):hover{color:var(--inkt)}
.voet p{color:var(--zacht);margin-top:.6rem}
.voet .klein{max-width:76rem;margin:2rem auto 0;padding-top:1.2rem;border-top:1px solid var(--lijn);font-size:.78rem;color:var(--zacht)}

/* ---------- stem-route: scrollend verhaal met een tekening die meegaat (altijd donker, zoals een productpagina) ---------- */
.route{--rk:#000;--rt:#f5f5f7;--rz:#a1a1a6;--rl:#5bcefa;--rr:#f5a9b8;background:var(--rk);color:var(--rt);border-radius:var(--r);padding:clamp(1.6rem,5vw,4rem) clamp(1rem,4vw,3.5rem) 2rem;overflow:clip}
.route-kop{max-width:44rem;margin:0 auto 2.5rem;text-align:center}
.route-kop .kicker{color:var(--rr)}
.route-kop h2{font-size:clamp(2rem,5vw,3.4rem);font-weight:700;letter-spacing:-.03em;color:var(--rt)}
.route-kop p{color:var(--rz);font-size:1.1rem;margin-top:1rem}
.route-in{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(1rem,4vw,4rem);align-items:start}
.route-plak{position:sticky;top:calc(env(safe-area-inset-top,0px) + 76px);order:2;display:grid;gap:1rem}
.route-nav{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center}
.route-nav a{font-size:.8rem;font-weight:500;color:var(--rz);background:#1d1d1f;border-radius:999px;padding:.4em .85em;text-decoration:none;transition:background .3s var(--ease),color .3s var(--ease)}
.route-nav a:hover{color:var(--rt)}
.route-nav a[aria-current="step"]{background:var(--rt);color:#000}
.route-fig{aspect-ratio:1;max-height:calc(100vh - 190px);margin:0 auto;width:100%}
.route-fig svg{width:100%;height:100%;display:block;overflow:hidden}
.route-stappen{order:1;padding:8vh 0 20vh}
.rstap{min-height:72vh;display:flex;flex-direction:column;justify-content:center;max-width:30rem;opacity:.28;transition:opacity .5s var(--ease)}
.rstap.nu,.route:not(.live) .rstap{opacity:1}
.rnr{font-size:.8rem;font-weight:600;color:var(--rz);font-variant-numeric:tabular-nums;margin-bottom:.6rem}
.rstap h3{font-size:clamp(1.6rem,3vw,2.3rem);font-weight:700;letter-spacing:-.028em;color:var(--rt);margin-bottom:.8rem}
.rstap p{color:var(--rz);font-size:1.08rem;line-height:1.55}
.rstap p b{color:var(--rt)}
.rchip{display:inline-block;align-self:flex-start;margin-top:1rem!important;font-size:.85rem!important;color:var(--rt)!important;background:#1d1d1f;border-radius:999px;padding:.45em 1em}
@media (max-width:860px){
  .route-in{grid-template-columns:1fr}
  .route-plak{top:calc(env(safe-area-inset-top,0px) + 92px);order:0;background:var(--rk);z-index:2;padding-bottom:.6rem;margin:0 calc(-1 * clamp(1rem,4vw,3.5rem));padding-left:clamp(1rem,4vw,3.5rem);padding-right:clamp(1rem,4vw,3.5rem)}
  .route-nav{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;scrollbar-width:none;-webkit-mask:linear-gradient(90deg,#000 85%,transparent)}
  .route-nav::-webkit-scrollbar{display:none}
  .route-nav a{flex:none}
  .route-fig{max-height:40vh;width:auto;height:40vh}
  .route-stappen{padding:2vh 0 10vh}
  .rstap{min-height:62vh;justify-content:flex-start;padding-top:2rem}
}

/* tekening: scènes zoomen van buiten naar binnen */
.anat .scene{transform-box:view-box;transition:opacity .7s var(--ease),transform .9s var(--ease);opacity:0;transform:scale(.8)}
.anat .s0{transform-origin:45% 62%}.anat .s1{transform-origin:46% 45%}.anat .s2{transform-origin:50% 50%}
.anat .scene.nu{opacity:1;transform:none}
.anat .scene.voor{transform:scale(2.6)}
.route:not(.live) .anat .s0{opacity:1;transform:none}
.anat [data-st]{opacity:0;transition:opacity .5s var(--ease)}
.anat [data-st].aan{opacity:1}
.anat text{font:500 15px var(--tekst);fill:#f5f5f7;letter-spacing:-.01em}
.anat .lab text,.anat .staat{paint-order:stroke;stroke:#000;stroke-width:5px;stroke-linejoin:round}
@media (max-width:860px){.anat text{font-size:21px}.anat .kompas{font-size:15px}}
.anat .kompas{font-size:12px;fill:#8e8e93;text-transform:uppercase;letter-spacing:.08em}
.anat .lijntje{stroke:#8e8e93;stroke-width:1;fill:none}
.anat .punt{fill:#f5f5f7}
/* scène 0 */
.anat .silhouet{fill:url(#an-huid);stroke:#5a5a60;stroke-width:1.2}
.anat .geest path{fill:none;stroke:var(--rl);stroke-width:1.4;stroke-dasharray:4 4;opacity:.75}
.anat .golven path{fill:none;stroke:var(--rr);stroke-width:2;stroke-linecap:round}
.anat .golven.aan path{animation:golf 2.4s var(--ease) infinite;animation-delay:calc(var(--i) * .3s)}
@keyframes golf{0%{opacity:0}30%{opacity:1}100%{opacity:0}}
.anat .holte path{fill:none;stroke:var(--rr);stroke-width:10;stroke-linecap:round;opacity:.35}
/* scène 1 */
.anat .kraak{fill:url(#an-kraak);stroke:#dfe6ee;stroke-width:1.4;stroke-linejoin:round}
.anat .tongbeen{fill:none;stroke:#dfe6ee;stroke-width:11;stroke-linecap:round;opacity:.5}
.anat .ringen path{fill:none;stroke:#dfe6ee;stroke-width:10;stroke-linecap:round;opacity:.22}
.anat .band{stroke:var(--rl);stroke-width:5;stroke-linecap:round;opacity:0;transition:opacity .6s var(--ease)}
.anat .larynx{transform-box:view-box;transition:transform .9s var(--ease)}
.anat .schild{transform-box:view-box;transform-origin:318px 290px;transition:transform .9s var(--ease),opacity .6s var(--ease)}
.anat .oud{fill:none;stroke:#8e8e93;stroke-width:1.2;stroke-dasharray:5 5}
.anat .fem{stroke:var(--rr)}
.anat .hecht path{stroke:var(--rr);stroke-width:2.4;stroke-linecap:round}
.route-fig:not([data-stap="cta"]):not([data-stap="femlar"]) .band-0{opacity:1}
.route-fig[data-stap="cta"] .schild{transform:rotate(-6deg)}
.route-fig[data-stap="cta"] .band-cta{opacity:1}
.route-fig[data-stap="femlar"] .schild{opacity:0}
.route-fig[data-stap="femlar"] .band-fem{opacity:1}
.route-fig[data-stap="femlar"] .larynx{transform:translateY(-22px)}
/* scène 2 */
.anat .valse{fill:#d98593;opacity:.85}
.anat .epi{fill:#f0bcc4}
.anat .aryepi{fill:none;stroke:#d98593;stroke-width:9;stroke-linecap:round;opacity:.8}
.anat .ary{fill:#e3a1ac}
.anat .ringen-boven path{fill:none;stroke:#5a2a32;stroke-width:5;stroke-linecap:round}
.anat .vb{transform-box:view-box;transform-origin:240px 136px;transition:transform .7s var(--ease)}
.anat .tril,.anat .dun{transform-box:view-box;transform-origin:240px 240px;transition:transform .7s var(--ease)}
.anat .web{fill:#c86f80;stroke:#f5a9b8;stroke-width:1}
.anat .steek path{stroke:#fff;stroke-width:1.6;stroke-linecap:round}
.anat .maat path{fill:none;stroke:var(--rl);stroke-width:2}
.anat .maat .was{stroke:#8e8e93;stroke-dasharray:4 4}
.anat .laserpunt{fill:var(--rl);opacity:0}
.route-fig[data-stap="lava"] .laserpunt{animation:laser 1.6s var(--ease) infinite;animation-delay:calc(var(--i) * .35s)}
@keyframes laser{0%,100%{opacity:0;r:2}40%{opacity:1;r:5}}
.route-fig[data-stap="lava"] .dun{transform:scaleX(.72)}
.route-fig[data-stap="stembanden"] .vb-l{animation:open-l 4.8s var(--ease) infinite}
.route-fig[data-stap="stembanden"] .vb-r{animation:open-r 4.8s var(--ease) infinite}
@keyframes open-l{0%,40%{transform:rotate(13deg)}50%,90%{transform:rotate(0)}100%{transform:rotate(13deg)}}
@keyframes open-r{0%,40%{transform:rotate(-13deg)}50%,90%{transform:rotate(0)}100%{transform:rotate(-13deg)}}
.route-fig[data-stap="stembanden"] .staat-open{animation:staat-a 4.8s infinite}
.route-fig[data-stap="stembanden"] .staat-dicht{animation:staat-b 4.8s infinite}
@keyframes staat-a{0%,42%{opacity:1}48%,94%{opacity:0}100%{opacity:1}}
@keyframes staat-b{0%,44%{opacity:0}52%,90%{opacity:1}96%,100%{opacity:0}}
.route-fig:is([data-stap="wendler"],[data-stap="vfs"],[data-stap="lava"]) .tril{animation:tril .14s linear infinite alternate}
.route-fig[data-stap="stembanden"] .tril{animation:tril-soms 4.8s infinite}
@keyframes tril{to{transform:translateX(1.2px)}}
@keyframes tril-soms{0%,50%{transform:none}52%,54%,56%,58%,60%,62%,64%,66%,68%,70%,72%,74%,76%,78%,80%,82%,84%,86%,88%{transform:translateX(1.2px)}53%,55%,57%,59%,61%,63%,65%,67%,69%,71%,73%,75%,77%,79%,81%,83%,85%,87%,89%{transform:translateX(-.6px)}90%,100%{transform:none}}
.vb-r .tril{animation-direction:alternate-reverse}
/* minder beweging: geen zoom, stembanden in rust, open in de stap 'stembanden' */
@media (prefers-reduced-motion:reduce){.route-fig[data-stap="stembanden"] .vb-l{transform:rotate(13deg)}.route-fig[data-stap="stembanden"] .vb-r{transform:rotate(-13deg)}.route-fig[data-stap="stembanden"] .staat-open{opacity:1}.route-fig[data-stap="stembanden"] .staat-dicht{opacity:0}.route-fig[data-stap="lava"] .laserpunt{opacity:1}}

/* ikoonknoppen (zoeken, licht/donker) */
.ikoon{width:34px;height:34px;border-radius:50%;border:0;background:var(--bg2);color:var(--inkt);display:inline-grid;place-items:center;cursor:pointer;padding:0}
.ikoon svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.ikoon .vul{fill:currentColor;stroke:none}
.ikoon:hover{background:color-mix(in srgb,var(--inkt) 12%,var(--bg2))}

/* zoekvenster */
.zoek{width:min(44rem,calc(100vw - 24px));max-height:min(80vh,44rem);margin:10vh auto auto;padding:0;border:0;border-radius:var(--r2);background:var(--kaart2);color:var(--inkt);box-shadow:0 40px 100px -30px rgba(0,0,0,.45),0 0 0 1px var(--lijn)}
.zoek::backdrop{background:rgba(0,0,0,.35);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.zoek[open]{animation:zoek-in .28s var(--ease)}
@keyframes zoek-in{from{opacity:0;transform:translateY(-8px) scale(.98)}}
.zoek-kop{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.2rem .4rem;font-weight:600}
.zoek-dicht{font:500 .85rem var(--tekst);color:var(--link);background:none;border:0;cursor:pointer;padding:.4em .2em}
.zoek-in{padding:.4rem 1.2rem 1.4rem;overflow:auto;max-height:calc(min(80vh,44rem) - 3.5rem)}
.zoek-in{--pagefind-ui-scale:.9;--pagefind-ui-primary:var(--link);--pagefind-ui-text:var(--inkt);--pagefind-ui-background:var(--kaart2);--pagefind-ui-border:var(--lijn);--pagefind-ui-tag:var(--bg2);--pagefind-ui-border-width:1px;--pagefind-ui-border-radius:12px;--pagefind-ui-font:var(--tekst)}
.zoek-in mark{background:color-mix(in srgb,#f5a9b8 55%,transparent);color:inherit;border-radius:3px}

/* lichaam-route: één lichaam, een camera die inzoomt */
.anat .camera{transform-box:view-box;transform-origin:0 0;transition:transform 1.1s cubic-bezier(.65,0,.25,1)}
.anat .silhouet-lijf path,.anat .silhouet-lijf ellipse{fill:url(#li-huid)}
.anat .camera *{vector-effect:non-scaling-stroke}
.anat .plek{fill:#f5a9b8}
.anat .plek.aan{animation:plek 2.4s var(--ease) infinite}
@keyframes plek{0%,100%{opacity:1}50%{opacity:.35}}
.anat .ov-lijn{fill:none;stroke:#dfe6ee;stroke-width:1.6}
.anat .ov-snee{fill:none;stroke:#f5a9b8;stroke-width:2.4;stroke-linecap:round}
.anat .ov-weg{fill:#f5a9b8;fill-opacity:.28;stroke:#f5a9b8;stroke-width:1.2;stroke-dasharray:4 3}
.anat .ov-prothese{fill:#5bcefa;fill-opacity:.22;stroke:#5bcefa;stroke-width:1.6}
.anat .ov-tepel{fill:none;stroke:#5bcefa;stroke-width:1.6}
.anat .ov-orgaan{fill:#f5a9b8;fill-opacity:.12;stroke:#f5a9b8;stroke-width:1.6;stroke-dasharray:5 3}
.anat .ov-poort{fill:none;stroke:#5bcefa;stroke-width:1.8}
.anat .ov-donor{fill:#5bcefa;fill-opacity:.3;stroke:#5bcefa;stroke-width:1.4}
.anat .ov-donor.of{fill-opacity:.08;stroke-dasharray:4 3}
.anat .ov-pijl{fill:none;stroke:#f5a9b8;stroke-width:2;stroke-dasharray:6 5;animation:stroom-pijl 1.2s linear infinite}
@keyframes stroom-pijl{to{stroke-dashoffset:-22}}
.anat .nummer circle{fill:#f5f5f7}
.anat .nummer text{fill:#000;font-weight:700;font-size:14px;stroke:none}
@media (max-width:860px){.anat .nummer text{font-size:17px}.anat .nummer circle{r:16px}}
.omzet{list-style:none;counter-reset:o;margin:1rem 0 0;padding:0;display:grid;gap:.45rem}
.omzet li{counter-increment:o;display:grid;grid-template-columns:1.6rem minmax(0,1fr) auto minmax(0,1fr);gap:.55rem;align-items:center;font-size:.95rem;color:var(--rt);background:#1d1d1f;border-radius:14px;padding:.55rem .8rem}
.omzet li::before{content:counter(o);width:1.5rem;height:1.5rem;border-radius:50%;background:#f5f5f7;color:#000;font-weight:700;font-size:.8rem;display:grid;place-items:center}
.omzet .naar{color:var(--rr)}
.omzet li span:last-child{color:var(--rz)}
.anat .ov-orgaan.buis{fill:none}

/* onderwerp-symbolen (zoals de Gezondheid-app): wit op een verloop in één tint */
.ikoon-tegel,.ikoon-groot{display:inline-grid;place-items:center;color:#fff;background:linear-gradient(160deg,var(--c1),var(--c2));box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 8px 20px -12px var(--c2)}
.ikoon-tegel{width:44px;height:44px;border-radius:12px}
.ikoon-tegel svg{width:24px;height:24px}
.tegel .ikoon-tegel{margin-bottom:.2rem}
.ikoon-groot{position:relative;width:clamp(132px,15vw,188px);aspect-ratio:1;border-radius:24%;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 40px 70px -30px var(--c2)}
.ikoon-groot::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.28),transparent 46%)}
.ikoon-groot svg{position:relative;width:46%;height:46%;stroke-width:1.6}
/* lijntekeningen */
.lijnkunst{fill:var(--inkt);display:block;height:auto}
.hero-art.figuren{gap:clamp(.5rem,3vw,2.5rem);align-items:flex-end;min-height:0}
.hero-art.figuren .lijnkunst{width:clamp(150px,22vw,280px)}
.hero.home .hero-art.figuren .lijnkunst{width:clamp(140px,24vw,300px)}
@media (max-width:760px){.hero-art.figuren .lijnkunst{width:42vw}}

/* vertrouwen: melding 'nog niet nagekeken' en 'Klopt er iets niet?' */
.status{border-radius:var(--r2);padding:1rem 1.2rem;background:var(--tint-roze);font-size:.95rem;line-height:1.5}
.status b{display:block;margin-bottom:.2rem}
.melden{border-top:1px solid var(--lijn);padding:1.2rem .2rem 0}
.melden summary{cursor:pointer;font-weight:600;color:var(--link);list-style:none}
.melden summary::-webkit-details-marker{display:none}
.melden-form{display:grid;gap:.6rem;max-width:40rem;margin-top:.9rem}
.melden-form label{font-size:.92rem}
.melden-form textarea{font:inherit;color:var(--inkt);background:var(--kaart);border:1px solid var(--lijn);border-radius:12px;padding:.7rem .8rem;resize:vertical}
.melden-form textarea:focus{outline:3px solid color-mix(in srgb,var(--link) 50%,transparent);outline-offset:1px}
.melden-form .klein{font-size:.82rem;color:var(--zacht);margin:0}
.melden-form .knop{justify-self:start;border:0;cursor:pointer}
.melden-dank{color:var(--inkt);font-weight:600}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.kaarten+p{margin-top:1.2rem}