/* ============================================================
   Huid- & Oedeemtherapie Delden — stijl.css (v2)
   Richting uit het klantonderzoek: de rust en "1 geheel"-sfeer van
   Middelbos (video bovenaan, serif-koppen, zachte tinten), het trage
   insliden van LUX (~0,9s, zachte ease-out), bewegend beeld zoals EV.
   Palet: FIGS-burgundy, gemeten van haar echte werkkleding.
   Tokens en diepte volgens DESIGN.md.
   ============================================================ */
:root{
  /* standaardpalet: Perzik & bordeaux (keuze Steffanie, 1 sep) —
     warm perzikpapier met de lichtere burgundy als hoofdkleur */
  --paper:#fbf3ec; --paper-2:#f6e2d2; --card:#fdf8f3;
  /* ink is warm donkerbruin, geen puur zwart: dat valt uit dit palet als een gat */
  --ink:#392721; --muted:#856a5c; --muted-2:#a2887a;
  --accent:#7f3639; --accent-2:#8c4144;
  --mauve:#d99f7c; --mauve-licht:#f3dcc9;
  /* de golf uit het HD-monogram, in de kleur van het logo zelf */
  --golf:#ac828c;
  /* tinten van het video-placeholder-vlak (volgen het palet) */
  --hv-licht:#9e6263; --hv-mid:#7c4a49; --hv-donker:#5f3335;
  /* lijnen en schaduw altijd als alpha van de inktkleur (nooit zwart) */
  --line:rgba(57,39,33,.14); --line-2:rgba(57,39,33,.07); --shadow:rgba(57,39,33,.16);
  --panel-bg:#392721; --panel-fg:#fbf3ec;
  /* diepte: één lichtbron van boven */
  --lift-hi:rgba(255,255,255,.62); --lift-edge:rgba(57,39,33,.07); --lift-drop:rgba(57,39,33,.5);
  --soft-dark:rgba(57,39,33,.10); --soft-light:rgba(255,255,255,.7);
  /* motion: korte ease-out voor UI; de lange, zachte curve is voor entrances
     (het LUX-insliden duurt daar 1,2s — wij zitten op 0,9s) */
  --ease-out:cubic-bezier(.22,1,.36,1); --ease-snap:cubic-bezier(.16,1,.3,1);
  --ease-zacht:cubic-bezier(.16,1,.3,1);
  --dur-1:.13s; --dur-2:.2s; --dur-3:.32s; --entree:.9s;
  --sans:"Satoshi",system-ui,-apple-system,sans-serif;
  /* serif-display: Newsreader, de keuze uit de stijl-kiezer (17 sep),
     zelf gehost — geen CDN op de echte site */
  --serif:"Newsreader","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --r:16px; --maxw:1180px;
}
@font-face{font-family:"Newsreader";font-weight:400 500;font-style:normal;font-display:swap;src:url("fonts/Newsreader.woff2") format("woff2")}
@font-face{font-family:"Satoshi";font-weight:300;font-style:normal;font-display:swap;src:url("fonts/Satoshi-300.woff2") format("woff2")}
@font-face{font-family:"Satoshi";font-weight:400;font-style:normal;font-display:swap;src:url("fonts/Satoshi-400.woff2") format("woff2")}
@font-face{font-family:"Satoshi";font-weight:500;font-style:normal;font-display:swap;src:url("fonts/Satoshi-500.woff2") format("woff2")}
@font-face{font-family:"Satoshi";font-weight:700;font-style:normal;font-display:swap;src:url("fonts/Satoshi-700.woff2") format("woff2")}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
  line-height:1.55;-webkit-font-smoothing:antialiased;letter-spacing:-.006em;overflow-x:clip} /* clip, niet hidden: hidden maakt body een scrollcontainer en dan werkt position:sticky nergens meer (25 okt) */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px}
/* koppen in serif, gewicht 400: serif wil geen negatieve spatiëring */
h1,h2{font-family:var(--serif);font-weight:400;letter-spacing:0;text-wrap:balance;margin:0;line-height:1.14}
h3,h4{font-weight:600;letter-spacing:-.018em;text-wrap:balance;margin:0;line-height:1.1}
h2{font-size:clamp(1.9rem,3.4vw,2.7rem)}
p{margin:0;text-wrap:pretty}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
section{padding:clamp(56px,7vw,104px) 0}
section[id],#lipoedeem{scroll-margin-top:96px}
/* de onzichtbare wachter bovenaan: zodra hij uit beeld is, krimpt de header */
#bovenwacht{position:absolute;top:0;height:1px;width:1px}
/* tonale band: zelfde familie, één stap warmer, full-bleed */
section.band{background:var(--paper-2);box-shadow:0 0 0 100vw var(--paper-2);clip-path:inset(0 -100vw)}
/* verhoogd paneel */
section.panel{position:relative;z-index:1;margin:clamp(22px,3.2vw,46px) 0;padding:clamp(46px,6vw,88px) clamp(26px,4vw,60px);border-radius:26px;background:var(--card);
  box-shadow:inset 0 2px 0 var(--lift-hi), 0 1px 0 var(--lift-hi),
    0 16px 30px -16px var(--lift-drop), 0 42px 66px -46px var(--lift-drop)}
/* donkere variant (nu nergens in gebruik: het slotpaneel is licht sinds 25 sep,
   het inktbruin sloeg een gat in het papier en bordeaux vond Steffanie niet mooi) */
section.panel.donker{background:var(--panel-bg);color:var(--panel-fg);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.09), 0 1px 0 var(--lift-hi),
    0 16px 30px -16px var(--lift-drop), 0 42px 66px -46px var(--lift-drop)}
.panel.donker h2{color:var(--panel-fg)}
.panel.donker p{color:rgba(247,239,236,.82)}
@media(max-width:640px){section.panel{border-radius:18px}}
/* Slotpaneel: diep donkerrood (wens Rodin, 25 sep), zonder foto sinds 18 okt
   (de voorbeeldfoto is eruit tot er een eigen foto is). Op brede schermen de
   kop links en de tekst met de knoppen rechts, onderaan uitgelijnd, zodat het
   brede vlak niet half leeg staat; op smalle schermen alles onder elkaar. */
section.panel.slot{--slot-bg:#3a1215;text-align:left;background:var(--slot-bg);
  /* zonder de lichtlijn onder de rand: die hoort bij licht papier, onder donkerrood leest hij als een witte streep */
  box-shadow:inset 0 2px 0 rgba(255,255,255,.07), 0 16px 30px -16px var(--lift-drop), 0 42px 66px -46px var(--lift-drop)}
.slot-tekst{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(30px,6vw,96px);row-gap:22px;align-items:end}
.slot-tekst h2{margin:0;grid-row:1 / span 2;align-self:center;max-width:14ch}
.slot-tekst p{margin:0;max-width:42ch}
.slot-knoppen{display:flex;gap:14px;flex-wrap:wrap}
@media(max-width:820px){.slot-tekst{grid-template-columns:1fr;row-gap:18px}
  .slot-tekst h2{grid-row:auto;max-width:16ch}
  .slot-knoppen{margin-top:6px}}
/* sectiekop: serif-kop + korte intro. Geen haarlijn erboven: de tonale
   banden scheiden de secties al, en een lijn boven elke kop wordt
   sjabloon-decoratie */
.shead{margin-bottom:40px;display:grid;gap:12px}
.shead p{color:var(--muted);max-width:58ch}

/* entrances: het LUX-insliden. Alleen verborgen als JS draait; vuren één
   keer bij binnenkomst, niets beweegt mee met de scroll. */
.js .reveal,.js .reveal-l,.js .reveal-r{opacity:0;
  transition:opacity var(--entree) var(--ease-zacht),transform var(--entree) var(--ease-zacht);
  transition-delay:calc(var(--i,0)*90ms)}
.js .reveal{transform:translateY(26px)}
.js .reveal-l{transform:translateX(-42px)}
.js .reveal-r{transform:translateX(42px)}
/* op een telefoon schuiven blokken van onder in, niet van opzij: 42px naar
   rechts maakte de pagina 16px te breed om zijwaarts te slepen (20 okt) */
@media(max-width:760px){.js .reveal-l,.js .reveal-r{transform:translateY(26px)}}
.js .reveal.in,.js .reveal-l.in,.js .reveal-r.in{opacity:1;transform:none}

/* afwerking */
:where(a,button,summary,input,textarea,[tabindex]):focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:10px}
:where(a,button):focus:not(:focus-visible){outline:none}
.scrollbar{position:fixed;left:0;top:0;height:2px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:var(--accent);z-index:100;pointer-events:none}
@supports (animation-timeline:scroll()){@media(prefers-reduced-motion:no-preference){
  .scrollbar{animation:sb-grow linear both;animation-timeline:scroll(root block)}
  @keyframes sb-grow{to{transform:scaleX(1)}}
}}

/* ============ knoppen: één indruk-taal ============
   Rust = lichtlijn op de bovenrand, hover = een haar omhoog met diepere
   schaduw, active = 1px zakken. Alles pill; kaarten 16-26px; dat is het
   vaste radiussysteem van de site. */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--sans);font-weight:600;font-size:.96rem;
  padding:12px 22px;border-radius:999px;border:1px solid transparent;cursor:pointer;white-space:nowrap;
  transition:transform var(--dur-1) var(--ease-snap),background var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out)}
.btn:active{transform:translateY(1px)}
.btn svg{width:17px;height:17px;flex:none}
.btn-p{background:var(--accent);color:var(--paper);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 2px 5px -2px var(--lift-drop)}
.btn-p:hover{background:#74393c;background:color-mix(in oklab, var(--accent) 88%, var(--paper));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 8px 18px -8px var(--lift-drop), 0 3px 6px -3px var(--lift-drop)}
.btn-p:active{box-shadow:inset 0 2px 6px rgba(43,26,25,.4), inset 0 -1px 0 rgba(255,255,255,.06)}
.btn-o{background:var(--card);color:var(--ink);border-color:var(--line);
  box-shadow:inset 0 1px 0 var(--lift-hi), 0 1px 2px -1px var(--shadow)}
.btn-o:hover{background:var(--card);border-color:rgba(43,26,25,.26);
  box-shadow:inset 0 1px 0 var(--lift-hi), 0 7px 16px -8px var(--shadow), 0 2px 5px -3px var(--shadow)}
.btn-o:active{box-shadow:inset 0 2px 6px -1px var(--soft-dark), inset 0 -1px 0 var(--lift-hi)}
.btn-lift{background:var(--paper);color:var(--ink);border:none;
  box-shadow:inset 0 1.5px 0 var(--lift-hi), 0 1px 0 var(--lift-hi),
    0 9px 18px -8px var(--lift-drop), 0 3px 7px -4px var(--lift-drop)}
.btn-lift:hover{background:var(--paper);
  box-shadow:inset 0 1.5px 0 var(--lift-hi), 0 1px 0 var(--lift-hi),
    0 13px 24px -8px var(--lift-drop), 0 4px 10px -4px var(--lift-drop)}
.btn-lift:active{box-shadow:inset 0 2px 6px -1px var(--lift-drop), inset 0 -1px 0 var(--lift-hi)}
.btn-ghost{background:transparent;color:var(--panel-fg);border-color:rgba(247,239,236,.4)}
.btn-ghost:hover{border-color:rgba(247,239,236,.75);background:rgba(247,239,236,.06)}
/* tekstlink met pijl: het rustige alternatief voor een zoveelste knop */
.tlink{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--accent);
  border-bottom:1px solid transparent;transition:border-color var(--dur-2) var(--ease-out)}
.tlink:hover{border-color:var(--accent)}
.tlink svg{width:15px;height:15px;transition:transform var(--dur-2) var(--ease-out)}
.tlink:hover svg{transform:translateX(3px)}

/* ============ header + megamenu ============ */
header{position:sticky;top:0;z-index:60;width:100vw;margin-left:calc(50% - 50vw);
  background:color-mix(in srgb,var(--paper) 90%,transparent);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-2);transition:box-shadow .4s ease,border-color .3s ease}
header:not(.small){border-bottom-color:transparent;
  box-shadow:inset 0 1.5px 0 var(--lift-hi), 0 1px 0 var(--lift-hi), 0 12px 22px -10px var(--lift-drop), 0 4px 9px -4px var(--lift-drop)}
.head{display:flex;align-items:center;gap:clamp(14px,2vw,30px);padding-top:10px;padding-bottom:10px;transition:padding .35s ease} /* alleen boven/onder: de zijruimte komt van .wrap (was 10px 0, waardoor het logo op mobiel tegen de rand stond) */
header.small .head{padding-top:7px;padding-bottom:7px}
/* Het logo staat overal exact zoals aangeleverd (bouw-logo.js, 11 okt): één
   gestapeld beeld, in de header 72px hoog (56px na scrollen), in de footer
   de witte versie groot. Niet splitsen, niet hertekenen, altijd width:auto
   zodat de verhouding nooit verandert. */
.brand{display:flex;align-items:center;line-height:1;flex:none}
.brand-logo{height:72px;width:auto;display:block;transition:height .35s ease}
header.small .brand-logo{height:56px}
@media(max-width:640px){.brand-logo{height:60px}header.small .brand-logo{height:50px}}
.brand-beeld{height:44px;width:auto;display:block}
.js .brand-terugval{display:none}
.brand.geen-beeld .brand-logo,.foot-logo.geen-beeld .brand-beeld{display:none}
.js .brand.geen-beeld .brand-terugval,.js .foot-logo.geen-beeld .brand-terugval{display:inline}
.brand-2{font-family:var(--serif);font-size:1.2rem;font-weight:400;color:var(--ink);letter-spacing:.005em;white-space:nowrap}
.brand-2 i{font-style:normal;color:var(--accent)}
.foot-logo{display:inline-block}
.foot-logo .brand-beeld{height:180px}
.head-nav{display:flex;align-items:center;gap:clamp(0px,.5vw,6px);flex:1;justify-content:center}
.head-nav>div{position:relative}
.head-nav a.toplink,.head-nav button.toplink{font:inherit;font-size:.9rem;font-weight:500;color:var(--muted);background:none;border:0;cursor:pointer;white-space:nowrap;
  padding:10px 9px;border-radius:10px;display:inline-flex;align-items:center;gap:5px;transition:color var(--dur-2) var(--ease-out)}
.head-nav .toplink:hover{color:var(--ink)}
.head-nav .toplink svg{width:11px;height:11px;transition:transform var(--dur-2) var(--ease-out)}
.head-nav div.open .toplink{color:var(--ink)}
.head-nav div.open .toplink svg{transform:rotate(180deg)}
.head-acts{display:flex;align-items:center;gap:8px;flex:none;margin-left:auto}
.head-acts .btn{padding:11px 18px;font-size:.92rem}
.zoekknop{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:none;border:1px solid transparent;cursor:pointer;color:var(--ink);
  transition:border-color var(--dur-2) var(--ease-out),background var(--dur-2) var(--ease-out)}
.zoekknop:hover{border-color:var(--line);background:var(--card)}
.zoekknop svg{width:18px;height:18px}

/* megamenu (EV-referentie): links een burgundy kaart, rechts de lijst met
   pijl-in-cirkel. Subtiele fade + 8px lift. */
.mega{position:fixed;left:0;right:0;top:var(--headh,72px);z-index:59;
  background:var(--paper);border-bottom:1px solid var(--line);
  box-shadow:0 30px 50px -30px var(--lift-drop);
  opacity:0;transform:translateY(8px);pointer-events:none;visibility:hidden;
  transition:opacity var(--dur-3) var(--ease-out),transform var(--dur-3) var(--ease-out),visibility 0s linear var(--dur-3)}
.head-nav div.open .mega{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition-delay:0s}
.mega-in{max-width:var(--maxw);margin:0 auto;padding:34px 26px 40px;display:grid;grid-template-columns:340px 1fr;gap:clamp(26px,4vw,56px)}
/* tekstkleur volgt --paper: op lichte paletten is dat licht-op-burgundy,
   op donkere paletten donker-op-mauve — altijd leesbaar */
.mega-kaart{background:var(--accent);color:var(--paper);border-radius:20px;padding:30px 28px 26px;display:flex;flex-direction:column;gap:14px;
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.18), 0 16px 30px -16px var(--lift-drop)}
.mega-kaart h3{font-family:var(--serif);font-weight:400;font-size:1.7rem;letter-spacing:0}
.mega-kaart p{font-size:.95rem;line-height:1.55;color:color-mix(in srgb, var(--paper) 85%, transparent)}
.mega-kaart .knoppen{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto;padding-top:14px}
.mega-lijst h4{font-size:1.3rem;margin-bottom:18px}
.mega-cols{display:grid;grid-template-columns:1fr 1fr;gap:6px clamp(26px,3.5vw,54px)}
.mega-item{display:block;padding:12px 10px;border-radius:12px;transition:background var(--dur-2) var(--ease-out)}
.mega-item:hover{background:var(--paper-2)}
.mega-item .rij{display:flex;align-items:center;justify-content:space-between;gap:14px}
.mega-item b{font-size:1.02rem;font-weight:600;letter-spacing:-.012em}
.mega-item .pijl{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--ink);flex:none;
  transition:background var(--dur-2) var(--ease-out),color var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out)}
.mega-item .pijl svg{width:14px;height:14px}
.mega-item:hover .pijl{background:var(--ink);color:var(--paper);transform:translateX(2px)}
.mega-item p{font-size:.88rem;color:var(--muted);margin-top:4px;max-width:40ch}
/* statusmarkering voor teksten die er nog niet zijn: klein en rustig */
.volgt{font-size:.78rem;font-weight:500;color:var(--muted-2);margin-left:7px}
/* huidaandoeningen in groepen (haar "Groepen"-indeling, zoals de
   Skinlab-referentiefoto: categoriekolommen met klachten eronder) */
.mega-groepen{display:grid;grid-template-columns:repeat(3,1fr);gap:24px clamp(20px,2.5vw,44px)}
.groep h5{font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);margin:0 0 8px}
.groep a{display:flex;align-items:baseline;padding:5px 0;font-weight:500;font-size:.94rem;color:var(--ink);transition:color var(--dur-2) var(--ease-out)}
.groep a:hover{color:var(--accent)}
@media(max-width:1020px){.mega-groepen{grid-template-columns:1fr 1fr}}
@media(max-width:1020px){.mega-in{grid-template-columns:1fr}.mega-kaart{display:none}}

/* mobiel: burger + lade (concept is desktop-eerst, dit is het vangnet) */
.burger{display:none;place-items:center;width:44px;height:42px;background:none;border:1px solid var(--line);border-radius:9px;cursor:pointer;color:var(--ink)}
@media(max-width:1080px){.head-nav{display:none}.burger{display:inline-flex;align-items:center}.head-acts .btn{display:none}}
.drawer{position:fixed;inset:0;z-index:70;background:var(--paper);padding:26px;display:none;flex-direction:column;gap:6px;overflow:auto}
.drawer.open{display:flex}
.drawer a{font-family:var(--serif);font-size:1.4rem;padding:12px 0;border-bottom:1px solid var(--line-2)}
.drawer .x{align-self:flex-end;background:none;border:none;font-size:2rem;cursor:pointer;color:var(--ink);line-height:1}

/* ============ zoeklaag ============ */
.zoek{position:fixed;inset:0;z-index:80;display:none;align-items:flex-start;justify-content:center;padding:14vh 20px 0;
  background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(10px)}
.zoek.open{display:flex}
.zoek-box{width:min(560px,100%);background:var(--card);border-radius:20px;border:1px solid var(--line);overflow:hidden;
  box-shadow:inset 0 1.5px 0 var(--lift-hi), 0 30px 60px -30px var(--lift-drop)}
.zoek-box input{width:100%;padding:20px 24px;font:inherit;font-size:1.15rem;border:0;background:transparent;color:var(--ink);outline:none}
.zoek-box input::placeholder{color:var(--muted-2)}
.zoek-res{max-height:46vh;overflow:auto;border-top:1px solid var(--line-2);padding:8px}
.zoek-res a{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:11px 16px;border-radius:10px;font-weight:500}
.zoek-res a:hover{background:var(--paper-2)}
.zoek-res a span{font-size:.8rem;color:var(--muted-2)}
.zoek-res .leeg{padding:14px 16px;color:var(--muted)}
.zoek-tip{padding:10px 24px 14px;font-size:.8rem;color:var(--muted-2)}

/* ============ video-hero (Middelbos-referentie) ============
   Full-bleed met een smalle papieren rand, afgeronde hoeken, tekst in het
   midden op de video. Eén knop: de video is het verhaal, niet de verkoop. */
.hero-video{width:100vw;margin-left:calc(50% - 50vw);padding:0 clamp(12px,1.6vw,22px)}
.hv-kader{position:relative;border-radius:24px;overflow:hidden;isolation:isolate;
  min-height:min(84dvh,820px);display:grid;place-items:center;background:var(--hv-mid);
  box-shadow:0 24px 48px -28px var(--lift-drop)}
/* de video ligt boven het vangnet: poster en video dekken het af zodra ze
   er zijn, en laadt de video niet (los deelbestand, geen verbinding), dan
   blijft het ademende vlak eronder gewoon zichtbaar */
.hv-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
/* vangnet onder de video: een traag ademend warm vlak in de tinten van het
   gekozen palet. Speelt de video, dan gaat het uit (scheelt rekenwerk). */
.hv-plaats{position:absolute;inset:-6%;z-index:0;
  background:
    radial-gradient(90% 120% at 22% 18%, color-mix(in srgb, var(--mauve) 55%, transparent), transparent 58%),
    radial-gradient(110% 130% at 82% 86%, color-mix(in srgb, var(--hv-donker) 70%, transparent), transparent 62%),
    linear-gradient(160deg, var(--hv-licht) 0%, var(--hv-mid) 45%, var(--hv-donker) 100%)}
@media(prefers-reduced-motion:no-preference){
  .hv-plaats{animation:hv-adem 26s ease-in-out infinite alternate}
  @keyframes hv-adem{from{transform:translate3d(-1.5%,-1%,0) scale(1.02)}to{transform:translate3d(1.5%,1.2%,0) scale(1.06)}}
}
/* zachte scrim voor leesbaarheid van de witte kop, gemeten niet gegokt:
   het midden krijgt een extra verdieping */
.hv-scrim{position:absolute;inset:0;z-index:2;
  background:radial-gradient(70% 60% at 50% 55%, rgba(43,26,25,.34), rgba(43,26,25,.12) 70%, rgba(43,26,25,.2))}
.hv-inhoud{position:relative;z-index:3;display:grid;justify-items:center;gap:20px;text-align:center;padding:40px 26px;color:#fdf8f6}
/* kicker 86% dekkend: op 78% zakte hij op een telefoon net onder 4,5:1 (gemeten over de hele videolus) */
.hv-kicker{font-size:.78rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:rgba(253,248,246,.86);margin:0}
.hv-inhoud h1{font-size:clamp(2.5rem,4.6vw,4.2rem);line-height:1.13;max-width:22ch;color:#fdf8f6}
/* haar motto als slogan: de knip na de komma is een echte regel, zodat
   "begrip voor jouw lichaam" als tweede beat leest */
.hv-regel{display:block}
.hv-knop{display:inline-flex;align-items:center;font-size:.84rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  padding:15px 30px;border-radius:999px;background:var(--accent);color:var(--paper);margin-top:6px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 10px 24px -10px rgba(43,26,25,.7);
  transition:transform var(--dur-1) var(--ease-snap),background var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out)}
.hv-knop:hover{background:color-mix(in oklab, var(--accent) 86%, var(--paper));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26), 0 14px 30px -10px rgba(43,26,25,.75)}
.hv-knop:active{transform:translateY(1px)}
.hv-note{position:absolute;left:22px;bottom:16px;z-index:3;font-size:.76rem;color:rgba(253,248,246,.55);margin:0}
.hv-kader.speelt .hv-plaats{display:none}
/* de bordeaux focusring verdwijnt op de bordeaux video: hier licht */
.hv-kader :focus-visible{outline-color:#fdf8f6}
/* pauzeknop: bewegend beeld dat langer dan 5 seconden loopt moet je kunnen
   stoppen (WCAG 2.2.2). Linksonder, want rechtsonder staat de dock al.
   Zelfde indruk-taal als de andere knoppen: lichtlijn boven, hover een
   haar omhoog, ingedrukt 1px omlaag. */
.hv-pauze{position:absolute;left:clamp(14px,1.8vw,24px);bottom:clamp(14px,1.8vw,24px);z-index:3;
  width:40px;height:40px;border-radius:999px;display:grid;place-items:center;padding:0;cursor:pointer;
  color:#fdf8f6;background:rgba(43,26,25,.34);border:1px solid rgba(253,248,246,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 6px 16px -8px rgba(43,26,25,.7);
  transition:transform var(--dur-1) var(--ease-snap),background var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out)}
.hv-pauze[hidden]{display:none}
.hv-pauze svg{width:15px;height:15px}
.hv-pauze .ic-speel{display:none;transform:translateX(1px)}
.hv-pauze.gepauzeerd .ic-pauze{display:none}
.hv-pauze.gepauzeerd .ic-speel{display:block}
.hv-pauze:hover{transform:translateY(-1px);background:rgba(43,26,25,.5);border-color:rgba(253,248,246,.46)}
.hv-pauze:active{transform:translateY(1px);box-shadow:inset 0 2px 4px rgba(43,26,25,.5)}
@media(hover:none){.hv-pauze:hover{transform:none}}
@media(max-width:640px){.hv-kader{min-height:72dvh;border-radius:18px}}
/* op een telefoon loopt haar motto over vier regels en schuift de kicker
   omhoog, de lichte glans in: daar zakte hij naar 3,5:1. Het scrim wordt
   op smal scherm een hogere ellips achter het hele tekstblok (gemeten). */
@media(max-width:640px){.hv-scrim{
  background:radial-gradient(130% 60% at 50% 48%, rgba(43,26,25,.5), rgba(43,26,25,.18) 74%, rgba(43,26,25,.24))}}

/* ============ foto-placeholder (bewust geen stock) ============ */
.ph{position:relative;display:grid;place-items:center;background:var(--paper-2);border-radius:24px;overflow:hidden;
  box-shadow:inset 0 16px 30px -14px var(--lift-drop), inset 0 4px 7px -3px var(--lift-drop),
    inset 0 1px 0 var(--lift-edge), inset 0 -2px 0 var(--lift-hi)}
.ph::before{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 90% at 30% 20%, color-mix(in srgb, var(--mauve) 36%, transparent), transparent 60%),
             radial-gradient(110% 100% at 80% 90%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 55%)}
.ph>div{position:relative;display:grid;place-items:center;gap:10px;color:var(--muted);text-align:center;padding:20px}
.ph svg{width:26px;height:26px;opacity:.6}
.ph small{font-size:.82rem;max-width:26ch;line-height:1.45}

/* ============ wie ben je: gesplitst, foto links ============
   Haar eigen verhaal is langer dan de kolom met de foto; daarom loopt
   het portret mee (sticky) terwijl je leest, zodat tekst en gezicht bij
   elkaar blijven. Op smal scherm staat de foto gewoon boven de tekst. */
.over{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(30px,5vw,70px);align-items:start}
@media(max-width:900px){.over{grid-template-columns:1fr}}
.over .ph{aspect-ratio:4/4.6;border-radius:26px}
@media(max-width:900px){.over .ph{aspect-ratio:16/10}}
.over-foto-kolom{align-self:stretch}
.over-foto{position:sticky;top:110px;margin:0;aspect-ratio:4/5;border-radius:26px;overflow:hidden;background:var(--paper-2);
  box-shadow:inset 0 1.5px 0 var(--lift-hi), 0 24px 44px -26px var(--lift-drop)}
.over-foto img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 18%}
/* NVH en KP onder haar verhaal, naast elkaar: het NVH-logo hoort bij de naam
   van het lid en de tekst "Lid van de NVH", het KP-logo bij het persoonlijke
   nummer. Zo kan een bezoeker beide registraties ook echt nazoeken. */
.over-merken{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.over-merk{display:inline-flex;align-items:center;gap:14px;background:var(--card);border-radius:16px;padding:12px 16px;
  box-shadow:inset 0 1.5px 0 var(--lift-hi), 0 8px 18px -14px var(--lift-drop);
  transition:transform var(--dur-1) var(--ease-snap),box-shadow var(--dur-2) var(--ease-out)}
.over-merk img{width:auto;height:30px;flex:none}
.over-merk img.nvh{height:38px}
.over-merk span{font-size:.84rem;color:var(--muted);line-height:1.4}
.over-merk b{display:block;color:var(--ink);font-weight:600}
.over-merk:hover{transform:translateY(-1px);
  box-shadow:inset 0 1.5px 0 var(--lift-hi), 0 14px 26px -14px var(--lift-drop)}
@media(hover:none){.over-merk:hover{transform:none}}
@media(max-width:900px){.over-foto{position:static;max-width:520px}}
.over-intro{color:var(--ink);font-size:1.12rem;line-height:1.6;max-width:54ch;margin-top:18px}
.over-tekst h3{font-family:var(--serif);font-weight:400;font-size:1.4rem;letter-spacing:0;margin:32px 0 10px;color:var(--ink)}
.over-tekst p:not(.over-intro):not(.over-groet){color:var(--muted);max-width:60ch;margin:0 0 12px;line-height:1.65}
.motto{font-family:var(--serif);font-style:italic;font-size:1.08em;line-height:1;color:var(--accent)}
.over-groet{font-family:var(--serif);font-style:italic;font-size:1.35rem;color:var(--ink);margin:24px 0 0}
.over-reg{list-style:none;margin:24px 0 0;padding:16px 0 0;border-top:1px solid var(--line);display:grid;gap:8px}
.over-reg li{display:flex;gap:10px;align-items:baseline;font-size:.92rem;color:var(--muted)}
.over-reg li b{color:var(--ink);font-weight:600}
.over-reg svg{width:15px;height:15px;flex:none;color:var(--accent-2);transform:translateY(2px)}

/* ============ behandelingen: bento, specialisatie groot ============
   Geen rij identieke kaarten: één groot burgundy vlak voor lipoedeem
   (2x2), de rest compact eromheen, twee cellen met een tonale tint. */
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:900px){.bento{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.bento{grid-template-columns:1fr}}
.bcel{display:flex;flex-direction:column;gap:7px;background:var(--card);border-radius:var(--r);padding:22px 22px 20px;
  box-shadow:inset 0 1.5px 0 var(--lift-hi), 0 1px 0 var(--lift-hi), 0 9px 18px -12px var(--lift-drop);
  transition:transform var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out)}
a.bcel:hover{transform:translateY(-2px);
  box-shadow:inset 0 1.5px 0 var(--lift-hi), 0 1px 0 var(--lift-hi), 0 16px 28px -14px var(--lift-drop)}
.bcel b{font-size:1.04rem;font-weight:600;letter-spacing:-.012em}
.bcel p{font-size:.88rem;color:var(--muted)}
.bcel .onder{margin-top:auto;padding-top:10px;display:flex;justify-content:flex-end}
.bcel .pijl{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1.5px solid var(--ink);
  transition:background var(--dur-2) var(--ease-out),color var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out)}
.bcel .pijl svg{width:13px;height:13px}
a.bcel:hover .pijl{background:var(--ink);color:var(--paper);transform:translateX(2px)}
.bcel.tint{background:var(--paper-2)}
/* behandeltechnieken onder de behandeltekst: kaart met "Lees meer" in plaats
   van een link in de lopende zin (wens Steffanie, 20 sep) */
.lees{display:inline-flex;align-items:center;gap:9px;font-size:.86rem;font-weight:600;color:var(--accent)}
/* de pijl staat los van de bento-kaarten, dus hij krijgt hier zijn eigen maat;
   zonder deze regel valt hij terug op de volledige breedte van de svg */
.lees .pijl{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;flex:none;
  border:1.5px solid currentColor;transition:transform var(--dur-2) var(--ease-out),background var(--dur-2) var(--ease-out)}
.lees .pijl svg{width:12px;height:12px}
a:hover .lees{color:var(--accent-2)}
a:hover .lees .pijl{transform:translateX(2px);background:color-mix(in srgb, var(--accent) 10%, transparent)}
@media(hover:none){a:hover .lees .pijl{transform:none}}
/* elf behandelingen in drie kolommen: het grote lipoedeemvlak (2x2) plus
   tien kaarten laat één gat, dus de laatste kaart neemt twee kolommen.
   Op twee kolommen gaat het precies op en is hij weer gewoon. */
.bcel.breed{grid-column:span 2}
@media(max-width:900px){.bcel.breed{grid-column:auto}}
/* kaart zonder eigen pagina: geen pijl, wel een eerlijke noot */
.bcel-volgt{font-size:.78rem;color:var(--muted-2)}
.bcel.groot{grid-column:span 2;grid-row:span 2;background:var(--accent);color:var(--paper);padding:30px;gap:12px;justify-content:flex-end;min-height:340px;
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.18), 0 16px 30px -16px var(--lift-drop)}
.bcel.groot small{font-size:.82rem;font-weight:500;color:color-mix(in srgb, var(--paper) 65%, transparent)}
.bcel.groot h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.6rem,2.6vw,2.2rem);letter-spacing:0;color:var(--paper)}
.bcel.groot p{font-size:.98rem;color:color-mix(in srgb, var(--paper) 85%, transparent);max-width:44ch}
.bcel.groot .pijl{border-color:color-mix(in srgb, var(--paper) 70%, transparent);color:var(--paper)}
a.bcel.groot:hover .pijl{background:var(--paper);color:var(--accent)}
@media(max-width:900px){.bcel.groot{grid-column:span 2;grid-row:auto;min-height:260px}}
@media(max-width:560px){.bcel.groot{grid-column:span 1}}

/* ============ in het nieuws: persvermelding (Hofweekblad) ============
   Eén echt citaat in serif, gecentreerd; de krant is het bewijs,
   dus geen extra opsmuk eromheen. */
.pers{display:grid;justify-items:center;text-align:center;gap:16px;max-width:760px;margin:0 auto}
.pers-kicker{font-size:.74rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-2);margin:0}
.pers blockquote{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(1.35rem,2.4vw,1.85rem);
  line-height:1.42;color:var(--ink);text-wrap:balance;max-width:32ch}
.pers figcaption{font-size:.9rem;color:var(--muted)}
.pers .tlink{margin-top:4px}

/* ============ huidaandoeningen: rustige indexlijst ============ */
.klachtlijst{display:grid;grid-template-columns:1fr 1fr;gap:2px clamp(30px,4vw,60px);max-width:900px}
@media(max-width:700px){.klachtlijst{grid-template-columns:1fr}}
.krij{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 12px;border-radius:12px;
  transition:background var(--dur-2) var(--ease-out)}
.krij:hover{background:var(--card)}
.krij b{font-size:1.06rem;font-weight:600;letter-spacing:-.012em}
.krij .pijl{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--ink);flex:none;
  transition:background var(--dur-2) var(--ease-out),color var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out)}
.krij .pijl svg{width:14px;height:14px}
.krij:hover .pijl{background:var(--ink);color:var(--paper);transform:translateX(2px)}
.klacht-voet{margin-top:22px;color:var(--muted);font-size:.92rem}

/* ============ huidaandoeningen: index met levend paneel ============
   Award-patroon (INDEX-hoverinteractie): de volledige lijst blijft
   altijd zichtbaar; het paneel rechts beantwoordt elke aanraking met
   groep, typering en een leeslink. De hover is een inschuivende
   accentlijn met haarlijnen tussen de regels; een vlak groeit mee met
   de hoogste regel in de rij en oogt daardoor uit verhouding. */
.indexwrap{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(26px,4vw,64px);align-items:start}
@media(max-width:900px){.indexwrap{grid-template-columns:1fr}}
/* twee losse kolommen, geen raster: in een raster rekt een regel die over twee
   lijnen gaat (post-inflammatoire hyperpigmentatie) ook de buurregel in de
   andere kolom op. Zo loopt het alfabet bovendien per kolom van boven naar
   beneden. */
.indexlijst{columns:2;column-gap:clamp(28px,3vw,48px)}
.indexlijst a{break-inside:avoid}
@media(max-width:640px){.indexlijst{columns:1}}
/* Regelhoogte in hele pixels én een veelvoud van 4: met 1,55 x 17,92px was elke
   regel 52,766px hoog en begon elke volgende regel op een andere sub-pixel; de
   golf (een masker) werd daardoor per regel anders gerasterd en de top van de
   boog viel soms weg. Met 53px bleef dat gebeuren op Windows-schaal 125%
   (53 x 1,25 = 66,25 schermpixels). Nu 11 + 28 + 12 + 1 = 52px, en een naam
   over twee regels 11 + 56 + 12 + 1 = 80px: beide heel op 100, 125, 150, 175 en
   200%. Gemeten 3 okt: pixelverschil tussen regels van 96 naar 0. */
.indexlijst a,.kindex-lijst a,.teklijst a{position:relative;display:block;padding:11px 2px 12px;font-family:var(--serif);font-size:1.12rem;line-height:28px;color:var(--ink);
  border-bottom:1px solid var(--line-2);
  transition:color var(--dur-2) var(--ease-out),padding-left var(--dur-3) var(--ease-snap),opacity var(--dur-3) var(--ease-out)}
/* hover: de golf uit het HD-monogram tekent zichzelf in, van links naar
   rechts. De vorm is exact uit merk.png gelicht (golfkleur #ac828c, kolom
   voor kolom gevolgd, 643 px breed); alleen de lijn is 2,9x dikker, anders
   zakt hij op 30px breed onder de pixel en valt weg. Uitgelijnd op de
   eerste regel, zodat hij bij een tweeregelige naam niet tussen de regels
   zweeft.
   Iets dikker op verzoek van Steffanie (19 sep): dezelfde golf twee keer,
   1,1px onder elkaar. Samen is de lijn ruim anderhalf keer zo dik, terwijl
   de vorm uit het logo exact blijft (geen nagetekende dikkere variant). */
/* Het vakje van de golf staat op hele pixels, zonder transform, en de tegel
   van het masker heeft 3 eenheden lucht rondom de golf (viewBox -3 -3 106 40.2):
   de top van de boog ligt dus nooit op een tegelrand en kan niet worden
   afgesneden, op welke sub-pixel de regel ook valt (gezien door Rodin, 3 okt). */
.indexlijst a::before,.kindex-lijst a::before,.teklijst a::before,.golfkop::before{content:"";position:absolute;left:0;top:20px;width:30px;height:14px;
  background:var(--golf);
  --golf-vorm:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-3 -3 106 40.2'%3E%3Cpath d='M0 18.8C0.6 18.2 2.3 16.5 3.4 15.4C4.6 14.3 5.7 13.2 6.9 12.2C8 11.1 9.1 10.1 10.3 9.2C11.4 8.3 12.6 7.5 13.7 6.8C14.8 6 16 5.3 17.1 4.7C18.3 4.1 19.4 3.5 20.6 3C21.7 2.5 22.8 2 24 1.6C25.1 1.2 26.3 0.9 27.4 0.7C28.6 0.5 29.7 0.3 30.8 0.2C32 0.1 33.1 0 34.3 0C35.4 -0 36.6 0 37.7 0.2C38.8 0.3 40 0.5 41.1 0.8C42.3 1.1 43.4 1.5 44.5 1.9C45.7 2.3 46.8 2.8 48 3.3C49.1 3.9 50.3 4.5 51.4 5.2C52.5 5.9 53.7 6.7 54.8 7.5C56 8.3 57.1 9.2 58.3 10.1C59.4 11 60.5 12 61.7 12.9C62.8 13.8 64 14.7 65.1 15.6C66.3 16.5 67.4 17.5 68.5 18.5C69.7 19.4 70.8 20.5 72 21.4C73.1 22.3 74.2 23 75.4 23.7C76.5 24.4 77.7 25.1 78.8 25.8C80 26.4 81.1 27 82.2 27.6C83.4 28.2 84.5 28.7 85.7 29.2C86.8 29.7 88 30.1 89.1 30.5C90.2 30.9 91.4 31.2 92.5 31.5C93.7 31.7 94.8 31.9 96 32.1C97.1 32.3 98.7 32.4 99.4 32.6C100.1 32.7 99.9 32.8 100 32.8L100 32.8C99.9 32.9 100.1 33 99.4 33.2C98.7 33.4 97.1 33.8 96 34C94.8 34.2 93.7 34.2 92.5 34.2C91.4 34.2 90.2 34.1 89.1 34C88 33.9 86.8 33.7 85.7 33.5C84.5 33.2 83.4 32.9 82.2 32.5C81.1 32.1 80 31.6 78.8 31.1C77.7 30.6 76.5 30.1 75.4 29.5C74.2 28.9 73.1 28.2 72 27.5C70.8 26.8 69.7 26.1 68.5 25.4C67.4 24.6 66.3 23.8 65.1 22.9C64 22 62.8 21 61.7 20.1C60.5 19.2 59.4 18.3 58.3 17.5C57.1 16.6 56 15.8 54.8 15C53.7 14.2 52.5 13.4 51.4 12.7C50.3 11.9 49.1 11.2 48 10.6C46.8 9.9 45.7 9.3 44.5 8.8C43.4 8.3 42.3 7.9 41.1 7.6C40 7.2 38.8 6.9 37.7 6.7C36.6 6.5 35.4 6.4 34.3 6.3C33.1 6.2 32 6.2 30.8 6.3C29.7 6.4 28.6 6.6 27.4 6.8C26.3 7.1 25.1 7.4 24 7.8C22.8 8.1 21.7 8.5 20.6 9C19.4 9.5 18.3 10 17.1 10.6C16 11.1 14.8 11.8 13.7 12.4C12.6 13 11.4 13.7 10.3 14.3C9.1 14.9 8 15.5 6.9 16.1C5.7 16.7 4.6 17.4 3.4 17.8C2.3 18.2 0.6 18.6 0 18.8Z'/%3E%3C/svg%3E");
  -webkit-mask:var(--golf-vorm) no-repeat -0.9px 0.6px/31.8px 12.11px,var(--golf-vorm) no-repeat -0.9px 1.7px/31.8px 12.11px;
  mask:var(--golf-vorm) no-repeat -0.9px 0.6px/31.8px 12.11px,var(--golf-vorm) no-repeat -0.9px 1.7px/31.8px 12.11px;
  clip-path:inset(0 100% 0 0);transition:clip-path .45s var(--ease-snap)}
.indexlijst a:hover,.indexlijst a.aan,.kindex-lijst a:hover,.kindex-lijst a.aan,.teklijst a:hover{color:var(--accent);padding-left:40px}
.indexlijst a:hover::before,.indexlijst a.aan::before,.kindex-lijst a:hover::before,.kindex-lijst a.aan::before,.teklijst a:hover::before{clip-path:inset(0 0 0 0)}
@media(prefers-reduced-motion:reduce){.indexlijst a::before,.kindex-lijst a::before,.teklijst a::before,.golfkop::before{transition:none}}
/* tijdens het zoeken wijken niet-passende regels zacht terug; niets verdwijnt */
.indexlijst.zoekt a{opacity:.3}
.indexlijst.zoekt a.raak{opacity:1}
/* bewust niet sticky: alleen de kaart plakte, het zoekblok eronder niet,
   waardoor de kaart er bij scrollen overheen schoof. De lijst is maar tien
   regels hoog, dus kaart en zoekblok staan toch al naast de hele lijst. */
.detail{position:relative;background:var(--card);border:1px solid var(--line-2);border-radius:20px;padding:28px 30px;min-height:230px;
  box-shadow:inset 0 1.5px 0 var(--lift-hi), 0 16px 30px -20px var(--lift-drop)}
.detail small{font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2)}
.detail h3{font-family:var(--serif);font-weight:400;font-size:1.7rem;letter-spacing:0;margin:8px 0 10px;transition:opacity var(--dur-3) var(--ease-out)}
.detail p{color:var(--muted);max-width:34ch;transition:opacity var(--dur-3) var(--ease-out)}
.detail .tlink{margin-top:16px}
.detail.wissel h3,.detail.wissel p{opacity:0}
/* zoekblok onder het paneel: direct zoeken, zonder popup; de uitkomsten
   verschijnen als een ontworpen menu in de kolom zelf. Een haarlijn en
   een klein label geven het blok hetzelfde ritme als het paneel. */
.zoekblok{margin-top:clamp(24px,3vw,34px);padding-top:clamp(20px,2.5vw,28px);border-top:1px solid var(--line)}
.zoekblok small{font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2)}
.zoekblok p{color:var(--muted);font-size:.95rem;max-width:36ch;margin:7px 0 16px}
.indexzoek{position:relative}
.indexzoek .loep{position:absolute;left:17px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--muted-2);pointer-events:none}
.indexzoek input{width:100%;padding:14px 18px 14px 45px;border-radius:14px;border:1px solid var(--line);background:var(--card);
  font:inherit;font-size:.95rem;color:var(--ink);
  box-shadow:inset 0 1.5px 0 var(--lift-hi), 0 12px 24px -20px var(--lift-drop);
  transition:border-color var(--dur-2) var(--ease-out)}
.indexzoek input::placeholder{color:var(--muted-2)}
.indexzoek input:focus{outline:none;border-color:var(--accent)}
.indexzoek input::-webkit-search-cancel-button{-webkit-appearance:none}
.zoekmenu{margin-top:10px;background:var(--card);border:1px solid var(--line-2);border-radius:16px;padding:6px;
  box-shadow:inset 0 1.5px 0 var(--lift-hi), 0 16px 30px -20px var(--lift-drop)}
.zoekmenu a{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:10px 13px;border-radius:11px;
  transition:background var(--dur-2) var(--ease-out)}
.zoekmenu a:hover,.zoekmenu a:focus-visible{background:var(--paper-2)}
.zoekmenu b{font-family:var(--serif);font-weight:400;font-size:1.06rem;color:var(--ink)}
.zoekmenu span{font-size:.66rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);white-space:nowrap}
.zoekmenu .leeg{margin:0;padding:11px 13px;color:var(--muted);font-size:.92rem}

/* ============ producten: split met feiten-rijen en beeldvlak ============ */
.prodwrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,70px);align-items:center}
@media(max-width:900px){.prodwrap{grid-template-columns:1fr}}
.prodwrap .ph{aspect-ratio:4/3.3;border-radius:26px}
/* de productlijnen: logo's op een opgetild papieren vlak, elk op een eigen
   regel met een haarlijn ertussen; hoogtes per logo gelijk getrokken op oog
   (emmagen is breed en licht, Theraderm compact met balken). */
/* De lijnen (27 okt): naar hoe sterke merkwanden het doen. Geen kaart, geen
   vier losse kleuren: een open raster van 2x2 met haarlijnen in een kruis,
   de logo's in hun eigen kleuren (wens Rodin) en optisch even groot
   (zelfde oppervlak, niet zelfde hoogte); bij hover groeien ze een fractie. */
.lijnen-kop{display:block;font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-2);margin-bottom:18px}
.lijnen ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr}
.lijnen li{display:grid;place-items:center;min-height:clamp(118px,11vw,150px);padding:20px 16px}
.lijnen li:nth-child(odd){border-right:1px solid var(--line-2)}
.lijnen li:nth-child(-n+2){border-bottom:1px solid var(--line-2)}
.lijn{position:relative;display:block;width:var(--w);height:var(--h);max-width:100%}
.lijn img{display:block;width:100%;height:100%;object-fit:contain;transition:transform var(--dur-3) var(--ease-snap)}
.lijnen li:hover .lijn img{transform:scale(1.04)}
@media(prefers-reduced-motion:reduce){.lijnen li:hover .lijn img{transform:none}}

@media(max-width:560px){.lijnen li{min-height:96px;padding:14px 10px}.lijn{width:calc(var(--w) * .78);height:calc(var(--h) * .78)}}
.prod-feiten{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:18px}
.prod-feiten li{display:flex;gap:16px;align-items:flex-start}
.prod-feiten .sicoon{flex:none;margin-top:2px}
.prod-feiten b{display:block;font-size:1.04rem;font-weight:600;letter-spacing:-.012em;margin-bottom:3px}
.prod-feiten p{font-size:.93rem;color:var(--muted);max-width:44ch}

/* ============ tarieven en vergoedingen: stappen + notitie ============
   Referentiepatroon van premium klinieken: vragen beantwoorden vóór het
   eerste contact, in rustige, gelabelde regels */
.tariefwrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(26px,4vw,64px);align-items:start}
@media(max-width:900px){.tariefwrap{grid-template-columns:1fr}}
.tariefwrap .shead{margin-bottom:0}
.tstappen{display:grid}
.tstap{display:grid;grid-template-columns:58px 1fr;gap:18px;padding:22px 0}
.tstap + .tstap{border-top:1px solid var(--line)}
.tstap i{font-family:var(--serif);font-style:normal;font-size:2.3rem;line-height:1;color:var(--mauve)}
.tstap b{display:block;font-size:1.08rem;font-weight:600;letter-spacing:-.012em;margin-bottom:5px}
.tstap p{font-size:.95rem;color:var(--muted);max-width:52ch}
.tarief-noot{margin-top:10px;background:var(--card);border:1px solid var(--line-2);border-radius:16px;padding:18px 22px;
  font-size:.93rem;color:var(--muted);box-shadow:inset 0 1.5px 0 var(--lift-hi), 0 9px 18px -14px var(--lift-drop)}

/* ============ tarieven en vergoedingen: gewoon proza ============ */
.tarief{max-width:640px;display:grid;gap:16px}
.tarief p{color:var(--muted)}

/* ============ FAQ ============
   Tweekoloms zodat de band geen leeg wit vlak overhoudt: kop links
   (plakt zacht mee), accordeon rechts over de volle breedte */
.faqwrap{display:grid;grid-template-columns:.7fr 1.5fr;gap:clamp(26px,4vw,64px);align-items:start}
@media(max-width:900px){.faqwrap{grid-template-columns:1fr}}
.faqwrap .shead{margin-bottom:0;position:sticky;top:120px}
@media(max-width:900px){.faqwrap .shead{position:static;margin-bottom:8px}}
.faqwrap .faq{max-width:none}
.faq{max-width:760px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:18px;
  padding:19px 4px;font-weight:600;font-size:1.05rem;letter-spacing:-.012em}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{width:16px;height:16px;flex:none;color:var(--muted);transition:transform var(--dur-3) var(--ease-out)}
.faq details[open] summary svg{transform:rotate(45deg)}
.faq details p{padding:0 4px 20px;color:var(--muted);max-width:62ch}
/* een antwoord met meer alinea's of een opsomming (lymfoedeem): de alinea's
   dichter op elkaar, de lijst in dezelfde inspringing als de tekst */
.faq details p:not(:last-child){padding-bottom:12px}
.faq details .blijst{margin:0;padding:0 4px 20px;max-width:62ch}

/* ============ contact en afspraak ============ */
.afspraak{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,54px);align-items:start}
@media(max-width:900px){.afspraak{grid-template-columns:1fr}}
.contact-lijst{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:14px}
.contact-lijst li{display:flex;gap:13px;align-items:baseline;font-size:.98rem}
.contact-lijst svg{width:16px;height:16px;flex:none;color:var(--accent-2);transform:translateY(2px)}
.widget-vlak{display:grid;place-items:center;gap:10px;min-height:320px;border-radius:20px;background:var(--paper-2);color:var(--muted);text-align:center;padding:30px;
  box-shadow:inset 0 16px 30px -14px var(--lift-drop), inset 0 4px 7px -3px var(--lift-drop),
    inset 0 1px 0 var(--lift-edge), inset 0 -2px 0 var(--lift-hi)}
.widget-vlak svg{width:26px;height:26px;opacity:.6}
.widget-vlak small{max-width:34ch;line-height:1.5}
/* Mijn DiAd-agenda: het script zet het afspraakformulier rechtstreeks in dit
   vlak (geen iframe). Het vlak is opgetild papier zoals de rest; de inhoud
   bepaalt de hoogte. */
.agenda-vlak{border-radius:20px;overflow:hidden;background:var(--card);border:1px solid var(--line-2);min-height:200px;padding:clamp(14px,2vw,24px);
  box-shadow:inset 0 1.5px 0 var(--lift-hi), 0 16px 30px -20px var(--lift-drop)}
.agenda-vlak iframe{display:block;width:100%;border:0}
.agenda-noscript{color:var(--muted);text-align:center;padding:40px 10px}
/* De widget zet zijn kleuren als --md-color-* op :root (groen en blauw uit haar
   Mijn DiAd-account). Op het element zelf winnen onze waarden: bordeaux voor
   knoppen en de actieve stap, inkt voor de koppen. Het lettertype erft hij al. */
.agenda-vlak .md-scheduler{--md-color-accent:var(--accent);--md-color-accent_text:var(--paper);
  --md-color-primary:var(--accent);--md-color-primary_text:var(--paper)}
/* ============ Afspraak maken: de Mijn DiAd-widget (26 okt) ============
   Ontwerp volgens wat in boekingsflows werkt (o.a. Baymard): eerst de
   behandeling, dan pas beschikbaarheid, gegevens als laatste; één stap
   tegelijk in beeld, met een voortgangsbalk in woorden in plaats van
   nummers; wat al gekozen is staat als korte regel met "Wijzig". Geen
   kaartjes met schaduw, geen grijze kaders: haarlijnen, serif-koppen, de
   ronde pijl van de site. Alleen CSS op hun klassen + labels uit site.js. */
.agenda-vlak{border:0;padding:clamp(22px,2.8vw,36px) clamp(20px,2.8vw,38px)}
/* voortgang: vier woorden met elk een lijntje erboven */
.md-stappen{list-style:none;margin:0 0 clamp(22px,2.6vw,30px);padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.md-stappen li{padding-top:10px;border-top:2px solid var(--line);font-size:.78rem;letter-spacing:.01em;color:var(--muted-2);transition:color var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out)}
.md-stappen li.klaar{border-color:var(--mauve);color:var(--muted)}
.md-stappen li.nu{border-color:var(--accent);color:var(--ink);font-weight:600}
/* de widget zelf: alles plat, één stap tegelijk */
.agenda-vlak .md-scheduler .md-scheduler__box{margin:0;padding:0;border:0;border-radius:0;box-shadow:none;background:none;opacity:1;display:none}
.agenda-vlak .md-scheduler .md-scheduler__box:first-child{display:none}
.agenda-vlak .md-scheduler .md-scheduler__box--open{display:block}
.agenda-vlak .md-scheduler .md-scheduler__small{font-size:.84rem;color:var(--muted);line-height:1.5;margin-top:3px}
/* open stap: eigen kop in de serif */
.agenda-vlak .md-scheduler .md-scheduler__box--open .md-scheduler__box__title{display:none}
.agenda-vlak .md-scheduler .md-scheduler__box--open::before{content:attr(data-kop);display:block;font-family:var(--serif);font-size:clamp(1.35rem,2vw,1.6rem);line-height:1.2;color:var(--ink);margin:4px 0 16px}
.agenda-vlak .md-scheduler .md-scheduler__box--open .md-scheduler__box__content{display:block!important}
/* gekozen stap: samenvattingsregel */
.agenda-vlak .md-scheduler .md-scheduler__box--done:not(.md-scheduler__box--open){display:grid;grid-template-columns:96px 1fr auto;align-items:baseline;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);cursor:pointer}
.agenda-vlak .md-scheduler .md-scheduler__box--done:not(.md-scheduler__box--open)::before{content:attr(data-label);font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-2)}
.agenda-vlak .md-scheduler .md-scheduler__box--done:not(.md-scheduler__box--open)::after{content:"Wijzig";font-size:.82rem;color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-2)}
.agenda-vlak .md-scheduler .md-scheduler__box--done.md-scheduler__box--readonly::after{content:""}
.agenda-vlak .md-scheduler .md-scheduler__box--done.md-scheduler__box--readonly{cursor:default}
.agenda-vlak .md-scheduler .md-scheduler__box--done:not(.md-scheduler__box--open) .md-scheduler__box__title{display:block;font-weight:400}
.agenda-vlak .md-scheduler .md-scheduler__box--done:not(.md-scheduler__box--open) .md-scheduler__box__title__text{font-size:0}
.agenda-vlak .md-scheduler .md-scheduler__box--done:not(.md-scheduler__box--open) .md-scheduler__box__title__text::after{content:attr(data-waarde);font-family:var(--serif);font-size:1.06rem;color:var(--ink)}
.agenda-vlak .md-scheduler .md-scheduler__box--done:not(.md-scheduler__box--open) .md-scheduler__box__title__extra,.agenda-vlak .md-scheduler .md-scheduler__box--done:not(.md-scheduler__box--open) .md-scheduler__box__title__photo{display:none}
.agenda-vlak .md-scheduler .md-scheduler__box--done:not(.md-scheduler__box--open)+.md-scheduler__box--open{margin-top:24px}
.agenda-vlak .md-scheduler .md-scheduler__box--done:not(.md-scheduler__box--open):hover::after{text-decoration-color:var(--accent)}
/* keuzes: regels met haarlijn en de ronde pijl */
.agenda-vlak .md-scheduler .md-scheduler__list-item{border:0;border-bottom:1px solid var(--line);border-radius:0;margin:0;padding:15px 50px 14px 2px;font-family:var(--serif);font-size:1.12rem;line-height:1.35;color:var(--ink);background:none;
  transition:color var(--dur-2) var(--ease-out),padding-left var(--dur-3) var(--ease-snap)}
.agenda-vlak .md-scheduler .md-scheduler__box__content>div>.md-scheduler__list-item:first-child{border-top:1px solid var(--line)}
.agenda-vlak .md-scheduler .md-scheduler__list-item:not(.md-scheduler__list-item--open):hover{background:none;color:var(--accent);padding-left:10px}
.agenda-vlak .md-scheduler .md-scheduler__list-item .md-scheduler__small{font-family:var(--sans);max-width:46ch}
.agenda-vlak .md-scheduler .md-scheduler__list-item::before{border:1px solid color-mix(in srgb,var(--ink) 20%,transparent);border-radius:50%;width:32px;height:32px;right:2px;top:50%;transform:translateY(-50%);box-sizing:border-box;background:none;transition:border-color var(--dur-2) var(--ease-out),background var(--dur-2) var(--ease-out)}
.agenda-vlak .md-scheduler .md-scheduler__list-item::after{content:"";position:absolute;right:2px;top:50%;width:32px;height:32px;margin-top:-16px;background:var(--muted-2);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M10 15h10M15.5 10.5 20 15l-4.5 4.5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M10 15h10M15.5 10.5 20 15l-4.5 4.5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat;
  transition:background var(--dur-2) var(--ease-out)}
.agenda-vlak .md-scheduler .md-scheduler__list-item:hover::before{border-color:var(--accent);background:var(--accent)}
.agenda-vlak .md-scheduler .md-scheduler__list-item:hover::after{background:var(--paper)}
/* een categorie open: de andere verdwijnen, de kop wordt een terugknop */
.agenda-vlak .md-scheduler .md-scheduler__box__content>div:has(>.md-scheduler__list-item--open)>.md-scheduler__list-item--treatment-category:not(.md-scheduler__list-item--open){display:none}
.agenda-vlak .md-scheduler .md-scheduler__box__content>div:has(>.md-scheduler__list-item--open)>.md-scheduler__list-item:first-child{border-top:0}
.agenda-vlak .md-scheduler .md-scheduler__list-item--open{border:0;padding:0;cursor:default}
.agenda-vlak .md-scheduler .md-scheduler__list-item--open::before,.agenda-vlak .md-scheduler .md-scheduler__list-item--open::after{display:none}
.agenda-vlak .md-scheduler .md-scheduler__list-item--open>span:first-child{display:inline-flex;align-items:center;gap:8px;font-size:0;cursor:pointer;margin-bottom:10px}
.agenda-vlak .md-scheduler .md-scheduler__list-item--open>span:first-child::before{content:"\2190  Alle afspraken";font-family:var(--sans);font-size:.84rem;color:var(--accent);white-space:pre}
.agenda-vlak .md-scheduler .md-scheduler__list-item--open>span:first-child:hover::before{text-decoration:underline;text-underline-offset:3px}
.agenda-vlak .md-scheduler .md-scheduler__list-item__collapsible::before{content:attr(data-naam);display:block;font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-2);padding-bottom:10px;border-bottom:1px solid var(--line)}
.agenda-vlak .md-scheduler .md-scheduler__list-item--open .md-scheduler__list-item.md-treatment{cursor:pointer;padding-right:50px}
.agenda-vlak .md-scheduler .md-scheduler__list-item--open .md-scheduler__list-item.md-treatment::before,.agenda-vlak .md-scheduler .md-scheduler__list-item--open .md-scheduler__list-item.md-treatment::after{display:block}
.agenda-vlak .md-scheduler .md-scheduler__list-item--open .md-scheduler__list-item.md-treatment:last-child{border-bottom:0}
/* bij wie: de behandelaar als regel met foto-rondje */
.agenda-vlak .md-scheduler .md-scheduler__list-item--clinician{gap:14px}
.agenda-vlak .md-scheduler .md-scheduler__list-item--clinician svg,.agenda-vlak .md-scheduler .md-scheduler__list-item--clinician img{width:36px;height:36px;border-radius:50%}
.agenda-vlak .md-scheduler .md-scheduler__list-item--clinician svg path{fill:var(--mauve)}
/* moment: kalender en tijden */
.agenda-vlak .md-scheduler__datetime .md-scheduler__box__content>div{gap:clamp(18px,2.4vw,28px)}
.agenda-vlak .md-scheduler__datepicker{max-width:340px}
.agenda-vlak .md-scheduler__datepicker .md-header{align-items:center;font-family:var(--serif);font-size:1.12rem;color:var(--ink)}
.agenda-vlak .md-scheduler__datepicker .md-header strong{font-weight:400}
.agenda-vlak .md-scheduler__datepicker .md-header button{position:relative;width:34px;height:34px;padding:0;border-radius:50%;border:1.5px solid var(--line);color:var(--muted-2)}
.agenda-vlak .md-scheduler__datepicker .md-header button svg{display:none}
.agenda-vlak .md-scheduler__datepicker .md-header button::after{content:"";position:absolute;inset:0;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M10 15h10M15.5 10.5 20 15l-4.5 4.5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M10 15h10M15.5 10.5 20 15l-4.5 4.5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
.agenda-vlak .md-scheduler__datepicker .md-header button.md-datepicker_prev-month::after{transform:scaleX(-1)}
.agenda-vlak .md-scheduler__datepicker .md-header button:hover{border-color:var(--accent);color:var(--accent)}
.agenda-vlak .md-scheduler__datepicker .md-day-names{font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2)}
.agenda-vlak .md-scheduler__datepicker .md-calendar{gap:6px}
.agenda-vlak .md-scheduler__datepicker .md-calendar button,.agenda-vlak .md-scheduler__datepicker .md-calendar div{border-radius:50%;padding:0;aspect-ratio:1;display:grid!important;place-items:center;font-size:.88rem}
.agenda-vlak .md-scheduler__datepicker .md-calendar .md-day,.agenda-vlak .md-scheduler__datepicker .md-calendar .md-day.md-weekend:not(.md-available){background:none;color:var(--muted-2)}
.agenda-vlak .md-scheduler__datepicker .md-calendar .md-day.md-available{background:var(--paper-2);color:var(--accent);font-weight:600}
.agenda-vlak .md-scheduler__datepicker .md-calendar .md-day.md-available:hover{box-shadow:inset 0 0 0 1.5px var(--accent)}
.agenda-vlak .md-scheduler__datepicker .md-calendar .md-day.md-available.md-selected,.agenda-vlak .md-scheduler__datepicker .md-selected{background:var(--accent);color:var(--paper);text-decoration:none;outline:0}
.agenda-vlak .md-scheduler__datepicker .md-today{border:0;box-shadow:inset 0 0 0 1px var(--line-2);font-weight:600}
.agenda-vlak .md-scheduler__datepicker button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.agenda-vlak .md-scheduler__timepicker__description{font-family:var(--serif);font-weight:400;font-size:1.06rem;color:var(--ink)}
.agenda-vlak .md-scheduler__timepicker__times{gap:8px;margin-top:10px}
.agenda-vlak .md-scheduler__timepicker__times__time{float:none;margin:0;background:none;color:var(--ink);border:1.5px solid var(--line);border-radius:999px;padding:9px 18px;font-size:.92rem;font-variant-numeric:tabular-nums;transition:border-color var(--dur-2) var(--ease-out),color var(--dur-2) var(--ease-out)}
.agenda-vlak .md-scheduler__timepicker__times__time:hover{border-color:var(--accent);color:var(--accent)}
/* gegevens */
.agenda-vlak .md-scheduler__form-group span{font-size:.82rem;color:var(--muted);margin-bottom:5px}
.agenda-vlak .md-scheduler__form-group input[type=text],.agenda-vlak .md-scheduler__form-group input[type=email],.agenda-vlak .md-scheduler__form-group input[type=date],.agenda-vlak .md-scheduler__form-group textarea,.agenda-vlak .md-scheduler__form-group select{
  border:1px solid var(--line-2);border-radius:12px;background:var(--paper);padding:11px 14px;font:inherit;color:var(--ink)}
.agenda-vlak .md-scheduler__form-group input:focus,.agenda-vlak .md-scheduler__form-group textarea:focus,.agenda-vlak .md-scheduler__form-group select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(127,54,57,.12)}
.agenda-vlak .md-scheduler__form-group textarea{width:100%}
.agenda-vlak .md-scheduler__personal-form__remark{min-width:0}
.agenda-vlak .md-scheduler__personal-form button{float:none;border-radius:999px;padding:13px 28px;font-weight:600;font-size:.95rem;margin:12px 0 0}
.agenda-vlak .md-scheduler__personal-form button:hover{opacity:1;filter:brightness(1.08)}
.agenda-vlak .md-scheduler__success-message{border-radius:16px}
.agenda-vlak .md-scheduler__loading{background:rgba(253,248,244,.7)}
@media(max-width:700px){.agenda-vlak .md-scheduler__personal-form__fields,.agenda-vlak .md-scheduler__personal-form__remark{flex:1 1 100%}.agenda-vlak .md-scheduler__personal-form__fields__name>div{flex:1 1 100%}
  .agenda-vlak .md-scheduler .md-scheduler__box--done:not(.md-scheduler__box--open){grid-template-columns:78px 1fr auto}}

/* markering voor plekken waar nog input van Stephanie nodig is */
.nb{font-size:.82rem;color:var(--muted-2)}

/* ============ snelnavigatie rechts (patroon Doctor Wrap) ============
   Verschijnt voorbij de hero; de actieve sectie krijgt een langere
   streep in de hoofdkleur, hover toont de namen. */
.secnav{position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:55;display:flex;flex-direction:column;align-items:flex-end;gap:12px;opacity:0;pointer-events:none;transition:opacity .45s ease}
.secnav.show{opacity:1;pointer-events:auto}
@media(max-width:1180px){.secnav{display:none}}
.sn-item{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:.74rem;font-weight:500;letter-spacing:.005em;white-space:nowrap;line-height:1}
.sn-item .sn-label{opacity:0;transform:translateX(8px);transition:opacity .3s var(--ease-out),transform .3s var(--ease-out),color .2s}
.sn-item .sn-tick{width:16px;height:1.5px;border-radius:2px;background:currentColor;opacity:.4;transition:width .3s var(--ease-out),opacity .25s,background .25s}
.sn-item:hover{color:var(--ink)}
.sn-item:hover .sn-label,.secnav:hover .sn-item .sn-label{opacity:1;transform:none}
.sn-item:hover .sn-tick,.secnav:hover .sn-item .sn-tick{opacity:.75}
.sn-item.on{color:var(--ink)}
.sn-item.on .sn-label{opacity:1;transform:none}
.sn-item.on .sn-tick{width:30px;opacity:1;background:var(--accent)}
@media(prefers-reduced-motion:reduce){.secnav,.sn-item .sn-label,.sn-item .sn-tick{transition:none}}

/* ============ zwevende knoppen rechtsonder (haar wens) ============ */
.dock{position:fixed;right:22px;bottom:22px;z-index:65;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.dock .btn{box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 10px 24px -10px var(--lift-drop), 0 3px 8px -4px var(--lift-drop)}
.dock-wa{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:#2e6b4f;color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 10px 24px -10px var(--lift-drop);
  transition:transform var(--dur-1) var(--ease-snap),box-shadow var(--dur-2) var(--ease-out)}
.dock-wa:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 14px 28px -10px var(--lift-drop)}
.dock-wa:active{transform:translateY(1px)}
.dock-wa svg{width:24px;height:24px}
@media(max-width:560px){.dock{right:14px;bottom:14px}}

/* ============ footer ============ */
footer{background:var(--panel-bg);color:var(--panel-fg);width:100vw;margin-left:calc(50% - 50vw);padding:clamp(46px,6vw,80px) 0 34px;margin-top:clamp(40px,6vw,80px)}
.foot{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:clamp(26px,4vw,50px)}
@media(max-width:900px){.foot{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.foot{grid-template-columns:1fr}}
.foot h5{font-size:.78rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--mauve);margin:0 0 14px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.foot a,.foot span{font-size:.92rem;color:rgba(247,239,236,.78)}
.foot a{position:relative}
/* onderstreping bij hover voor tekstlinks; het logo is ook een link (naar
   boven), maar een streep onder een beeldmerk oogt als een fout */
.foot a[href]:not(.foot-logo)::after{content:"";position:absolute;left:0;bottom:-3px;height:1.5px;width:100%;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform var(--dur-3) var(--ease-out)}
.foot a[href]:not(.foot-logo):hover::after{transform:scaleX(1);transform-origin:left}
.foot-brand{display:grid;gap:10px;align-content:start}
.foot-brand .brand-2{color:var(--panel-fg);font-size:1.4rem}
.foot-brand p{font-size:.9rem;color:rgba(247,239,236,.65);max-width:30ch}
/* Instagram en Facebook onder de naam: ronde haarlijnknoppen in de footertint,
   zelfde taal als de pijlen op de site; bij hover vult de rand zich iets */
.foot-social{display:flex;gap:10px;margin-top:6px}
.foot-social a{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  border:1.5px solid rgba(247,239,236,.28);color:rgba(247,239,236,.85);
  transition:border-color var(--dur-2) var(--ease-out),background var(--dur-2) var(--ease-out),color var(--dur-2) var(--ease-out)}
.foot-social a::after{display:none}
.foot-social a:hover{border-color:rgba(247,239,236,.7);background:rgba(247,239,236,.08);color:var(--panel-fg)}
.foot-social svg{width:18px;height:18px}
.foot-onder{max-width:var(--maxw);margin:44px auto 0;padding:20px 26px 0;border-top:1px solid rgba(247,239,236,.14);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.82rem;color:rgba(247,239,236,.55)}

/* ============ klachtpagina (bijv. acne.html) ============ */
.kruimel{display:flex;gap:8px;align-items:center;font-size:.85rem;color:var(--muted-2);padding:26px 0 0}
.kruimel a:hover{color:var(--ink)}
.kruimel svg{width:12px;height:12px}
.kop-klacht{padding:clamp(30px,4vw,54px) 0 clamp(40px,5vw,70px)}
.kop-klacht h1{font-size:clamp(2.4rem,4.6vw,3.8rem);line-height:1.12}
.kop-klacht .intro{color:var(--muted);font-size:1.06rem;max-width:62ch;margin-top:20px}
/* Tarieven (20 okt): de actie als verhoogd paneel bovenaan, daaronder per
   behandeling een kaart van opgetild papier met naam links en prijs rechts,
   verbonden door een stippellijn. Twee kolommen, kaarten breken niet af. */
section.panel.tar-actie{display:grid;grid-template-columns:minmax(0,1.4fr) auto;gap:clamp(24px,4vw,64px);align-items:center;padding:clamp(30px,4vw,52px) clamp(26px,4vw,56px)}
.tar-kicker{display:inline-block;font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-2);margin-bottom:10px}
.tar-actie h2{font-size:clamp(1.6rem,2.8vw,2.3rem);max-width:20ch}
.tar-actie p{color:var(--muted);margin-top:12px;max-width:52ch}
.tar-actie-prijs{display:grid;justify-items:center;gap:4px;text-align:center}
.tar-actie-prijs s{color:var(--muted-2);font-size:1.05rem}
.tar-actie-prijs b{font-family:var(--serif);font-weight:400;font-size:clamp(2.6rem,4.4vw,3.4rem);line-height:1;color:var(--accent);margin-bottom:14px}
@media(max-width:760px){section.panel.tar-actie{grid-template-columns:1fr}.tar-actie-prijs{justify-items:start;text-align:left}}
section.tar-wrap{padding:clamp(40px,5vw,64px) 0}
.tar-grid{columns:2 380px;column-gap:clamp(16px,2.2vw,26px)}
.tar-groep{break-inside:avoid;margin:0 0 clamp(16px,2.2vw,26px);background:var(--card);border-radius:18px;padding:clamp(22px,2.6vw,30px) clamp(22px,2.6vw,32px);scroll-margin-top:110px;
  box-shadow:inset 0 1.5px 0 var(--lift-hi), 0 1px 0 var(--lift-hi), 0 9px 18px -8px var(--lift-drop), 0 3px 7px -4px var(--lift-drop)}
.tar-groep h2{font-size:clamp(1.4rem,2vw,1.7rem);margin:0 0 14px}
.tar-groep h2 a{display:inline-flex;align-items:center;gap:10px;color:inherit;text-decoration:none}
.tar-groep h2 a svg{width:17px;height:17px;color:var(--accent);transition:transform var(--dur-2) var(--ease-out)}
.tar-groep h2 a:hover{color:var(--accent)}
.tar-groep h2 a:hover svg{transform:translateX(3px)}
.tar-lijst{list-style:none;margin:0;padding:0}
.tar-lijst li{display:flex;align-items:baseline;gap:10px;padding:11px 0;font-size:.95rem}
.tar-lijst li + li{border-top:1px solid var(--line)}
.tar-naam{flex:1;min-width:0;color:var(--ink)}
.tar-prijs{flex:none;display:inline-flex;align-items:baseline;gap:7px;font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink);white-space:nowrap}
.tar-prijs small{font-size:.78rem;font-weight:400;color:var(--muted-2)}
.tar-prijs s{font-weight:400;color:var(--muted-2)}
.tar-gratis{color:var(--accent)}
.tar-label{display:block;width:max-content;margin-top:5px;font-size:.74rem;font-weight:600;letter-spacing:.02em;color:var(--accent);background:var(--paper-2);border-radius:999px;padding:3px 10px}
.tar-praktisch{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,64px)}
.tar-praktisch h2{font-size:clamp(1.4rem,2vw,1.7rem);margin-bottom:10px}
.tar-praktisch p{color:var(--muted);max-width:52ch}
@media(max-width:760px){.tar-praktisch{grid-template-columns:1fr}}
/* Beeldverantwoording (26 okt): per pagina een kop en een rustige lijst */
section.bv{columns:2 420px;column-gap:clamp(30px,4vw,60px)}
.bv-groep{break-inside:avoid;margin:0 0 clamp(26px,3.5vw,40px)}
.bv-groep h2{font-size:clamp(1.25rem,1.8vw,1.5rem);margin:0 0 10px}
.bv-lijst{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:.86rem;color:var(--muted)}
.bv-lijst li{display:grid;gap:2px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.bv-wat{color:var(--ink)}
.bv-bron a{color:inherit}
/* Algemene voorwaarden (18 okt): 18 artikelen, dus links een inhoud die
   meeloopt bij het scrollen, rechts de artikelen met hun ledennummers in een
   eigen kolom zodat de tekst recht onder elkaar staat. Smal: alles onder
   elkaar, de inhoud als compacte lijst in twee kolommen. */
section.av{display:grid;grid-template-columns:minmax(200px,250px) minmax(0,1fr);gap:clamp(30px,5vw,80px);align-items:start;padding:clamp(40px,5vw,64px) 0}
.av-inhoud{position:sticky;top:104px;font-size:.88rem}
.av-inhoud b{display:block;font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-2);margin-bottom:10px}
.av-inhoud ol{list-style:none;margin:0;padding:0;display:grid;gap:1px}
.av-inhoud a{display:grid;grid-template-columns:24px 1fr;padding:4px 0;color:var(--muted);text-decoration:none;line-height:1.35;transition:color var(--dur-1) var(--ease-out)}
.av-inhoud a span{font-variant-numeric:tabular-nums;color:var(--muted-2)}
.av-inhoud a:hover{color:var(--accent)}
.av-art{max-width:68ch;scroll-margin-top:104px}
.av-art + .av-art{margin-top:clamp(30px,3.6vw,44px);padding-top:clamp(30px,3.6vw,44px);border-top:1px solid var(--line)}
.av-art h2{font-size:clamp(1.45rem,2.2vw,1.85rem);margin:0 0 16px}
.av-art h2 span{display:block;font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-2);margin-bottom:8px}
.av-art > p,.av-leden p,.av-def dd{color:var(--muted)}
.av-leden{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.av-leden li{display:grid;grid-template-columns:44px minmax(0,1fr)}
.av-leden .nr{font-variant-numeric:tabular-nums;font-size:.9rem;font-weight:500;color:var(--ink);padding-top:.12em}
.av-contact{margin-top:12px}
.av-def{display:grid;gap:12px;margin:14px 0 0}
.av-def dt{font-weight:600;color:var(--ink)}
.av-def dd{margin:2px 0 0}
@media(max-width:900px){section.av{grid-template-columns:1fr;gap:34px}
  .av-inhoud{position:static}
  .av-inhoud ol{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));column-gap:20px}}
@media(max-width:560px){.av-leden li{grid-template-columns:38px minmax(0,1fr)}}
.knoprij{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin:28px 0 0}
.duo{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,5vw,64px);align-items:center}
@media(max-width:900px){.duo{grid-template-columns:1fr}}
.duo .ph{aspect-ratio:16/11;border-radius:24px}
/* symptomen: alles tegelijk zichtbaar, nooit afgesneden of te schuiven.
   Het aantal kolommen volgt het aantal kaarten (site.js): tot vier past
   alles op één rij, vijf of zes worden rijen van drie, zeven of acht
   rijen van vier. */
.sympt{display:grid;gap:14px;padding:4px 0;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))}
.sympt.kolom-3{grid-template-columns:repeat(3,1fr)}
.sympt.kolom-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.sympt,.sympt.kolom-3,.sympt.kolom-4{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.sympt,.sympt.kolom-3,.sympt.kolom-4{grid-template-columns:1fr}}
.sympt>figure{margin:0;background:var(--card);border-radius:var(--r);overflow:hidden;
  box-shadow:inset 0 1.5px 0 var(--lift-hi), 0 9px 18px -12px var(--lift-drop)}
.sympt .ph{border-radius:0;aspect-ratio:4/3;box-shadow:inset 0 -1px 0 var(--line-2)}
.sympt figcaption{padding:14px 18px 18px;font-size:.9rem;color:var(--muted);line-height:1.5}
.sympt figcaption b{display:block;color:var(--ink);font-weight:600;font-size:.95rem;margin-bottom:3px}

/* behandeltechnieken onder de behandeltekst: dezelfde index als elders, met
   de naam in serif en de uitleg eronder. Geen kaartenraster met "Lees meer"
   onder elke kaart: dat is drie keer dezelfde actie en het sjabloon dat elke
   site heeft. De golf laat al zien dat de regel een link is. */
.teklijst{list-style:none;margin:26px 0 0;padding:0;max-width:620px;display:grid;gap:12px} /* 12, niet 10: heel op 125% */
/* opgetild papier, het dieptesysteem van Doctor Wrap in ons eigen palet: een
   lichtlijn langs de bovenrand plus twee lagen slagschaduw die naar de inkt
   getint zijn (nooit zwart, dat valt uit een warm palet als een gat). Bij
   hover komt de regel een haar omhoog, bij klikken drukt hij in en keert de
   lichtlijn naar binnen. Dat verschil tussen gedrukt en gevormd is precies
   waarom je ziet dat er geklikt kan worden. */
.teklijst a{display:flex;align-items:center;gap:18px;padding:16px 18px;border-radius:16px;border-bottom:0;
  background:var(--card);
  box-shadow:inset 0 1.5px 0 var(--lift-hi), 0 1px 0 var(--lift-hi),
    0 9px 18px -8px var(--lift-drop), 0 3px 7px -4px var(--lift-drop);
  transition:color var(--dur-2) var(--ease-out),padding-left var(--dur-3) var(--ease-snap),
    transform var(--dur-1) var(--ease-snap),box-shadow var(--dur-2) var(--ease-out)}
.teklijst a::before{top:24px;left:18px}
.teklijst a:hover{transform:translateY(-1px);padding-left:52px;
  box-shadow:inset 0 1.5px 0 var(--lift-hi), 0 1px 0 var(--lift-hi),
    0 13px 24px -8px var(--lift-drop), 0 4px 10px -4px var(--lift-drop)}
.teklijst a:active{transform:translateY(1px);
  box-shadow:inset 0 2px 6px -1px var(--lift-drop), inset 0 -1px 0 var(--lift-hi)}
@media(hover:none){.teklijst a:hover{transform:none}}
.tek-t{display:grid;gap:2px;flex:1}
.teklijst b{font-weight:400;letter-spacing:0}
.teklijst .tek-t span{font-family:var(--sans);font-size:.9rem;line-height:22px;color:var(--muted);letter-spacing:-.006em}
/* de pijl volgt dezelfde taal: in rust een haarlijn, bij hover gevuld */
.teklijst .pijl,.kindex-lijst .pijl,.koplink .pijl{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;flex:none;
  border:1.5px solid var(--line);color:var(--muted-2);
  transition:transform var(--dur-2) var(--ease-out),background var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out),color var(--dur-2) var(--ease-out)}
.teklijst .pijl svg,.kindex-lijst .pijl svg,.koplink .pijl svg{width:14px;height:14px}
.teklijst a:hover .pijl,.kindex-lijst a:hover .pijl,.kindex-lijst a.aan .pijl,.koplink:hover .pijl{
  background:var(--accent);border-color:var(--accent);color:var(--paper);transform:translateX(2px)}
@media(hover:none){.teklijst a:hover .pijl,.kindex-lijst a:hover .pijl{transform:none}}
/* oedeemtherapie: per oedeemvorm een blok waarvan de kop zelf de link is
   (haar "kliklink"), met dezelfde ronde pijl als de regels hierboven */
.delen{display:grid;gap:clamp(30px,4vw,48px)}
.koplink{display:inline-flex;align-items:center;gap:14px;color:inherit;border-bottom:0;
  transition:color var(--dur-2) var(--ease-out)}
.koplink:hover{color:var(--accent)}
.kindex-lijst a{display:flex;align-items:center;gap:18px;padding:13px 2px 12px} /* 13+30+12+1 = 56px, zie hierboven */
/* oedeemtherapie (25 okt): de blokken als index met paneel. De golf staat
   verticaal midden voor de kop; de kop schuift opzij zoals de regels in de
   index. Inactieve blokken iets terug, zodat het actieve leest als "hier". */
.delen-wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(30px,5vw,72px);align-items:start}
/* het paneel staat naast het actieve blok (wens Rodin 26 okt): niet sticky
   bovenaan, maar het schuift met een zachte beweging naar de hoogte van het
   blok dat je aanwijst of dat in beeld komt (site.js zet de verschuiving). */
.delen-wrap .delen-paneel{position:relative;top:0;transform:translateY(var(--paneel-y,0px));transition:transform .55s var(--ease-snap)}
@media(prefers-reduced-motion:reduce){.delen-wrap .delen-paneel{transition:none}}
.deel{transition:opacity var(--dur-3) var(--ease-out)}
.js .delen-wrap.leeft .deel:not(.aan){opacity:.62}
.golfkop{position:relative;transition:color var(--dur-2) var(--ease-out),padding-left var(--dur-3) var(--ease-snap)}
.golfkop::before{top:calc(50% - 7px)}
.deel.aan .golfkop,.golfkop:hover{color:var(--accent);padding-left:44px}
.deel.aan .golfkop::before,.golfkop:hover::before{clip-path:inset(0 0 0 0)}
.deel.aan .koplink .pijl{background:var(--accent);border-color:var(--accent);color:var(--paper)}
.deel-foto{display:none}
@media(max-width:900px){
  .delen-wrap{grid-template-columns:1fr}
  .delen-wrap .delen-paneel{display:none}
  .deel-foto{display:block;width:100%;height:auto;aspect-ratio:16/11;object-fit:cover;border-radius:20px;margin-bottom:18px;
    box-shadow:inset 0 1.5px 0 var(--lift-hi), 0 18px 34px -24px var(--lift-drop)}
  .js .delen-wrap.leeft .deel:not(.aan){opacity:1}
  .deel.aan .golfkop{padding-left:0;color:inherit}
  .deel.aan .golfkop::before{clip-path:inset(0 100% 0 0)}
  .deel.aan .koplink .pijl{background:none;border-color:var(--line);color:var(--muted-2)}
}
.kindex-lijst a>span:first-child{flex:1}

/* ============ "Hiermee behandelen we" ============
   Geen kaartenraster: dat is precies het sjabloon dat elke site heeft. Deze
   sectie spreekt de taal van de site zelf, de index met de golf uit het logo,
   zoals op de homepage: een serif-lijst waar je langsloopt en een paneel dat
   meebeweegt. Bij precies een klacht vervalt de lijst en wordt het een
   tweeluik; een lijst van een regel is geen lijst. */
.kindex{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(26px,4vw,60px);align-items:start}
.kindex-lijst{list-style:none;margin:0;padding:0}
.kindex-paneel{margin:0;position:sticky;top:110px;display:grid;gap:14px}
.kindex-paneel img{width:100%;height:auto;aspect-ratio:16/11;object-fit:cover;border-radius:22px;
  box-shadow:inset 0 1.5px 0 var(--lift-hi), 0 18px 34px -24px var(--lift-drop);
  transition:opacity var(--dur-3) var(--ease-out)}
.kindex-paneel.wissel img{opacity:.35}
.kindex-paneel figcaption{display:grid;gap:4px;padding:0 4px}
.kindex-paneel b{font-family:var(--serif);font-weight:400;font-size:1.3rem;letter-spacing:0}
.kindex-paneel span{font-size:.92rem;color:var(--muted);max-width:40ch}
@media(max-width:900px){
  .kindex{grid-template-columns:1fr}
  .kindex-paneel{position:static;order:-1}
}
/* een klacht: tweeluik, beeld naast de naam in serif */
.ksolo{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(26px,4vw,60px);align-items:center}
.ksolo-beeld{border-radius:22px;aspect-ratio:4/3;
  box-shadow:inset 0 1.5px 0 var(--lift-hi), 0 18px 34px -24px var(--lift-drop)}
.ksolo-tekst{display:grid;gap:10px;justify-items:start}
.ksolo-tekst h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.7rem,3vw,2.4rem);letter-spacing:0;line-height:1.1}
.ksolo-tekst p{color:var(--muted);max-width:46ch}
.ksolo-tekst .tlink{margin-top:6px}
@media(max-width:760px){.ksolo{grid-template-columns:1fr}}

/* ============ registraties: NVH en KP ============
   Regels van de organisaties zelf (zie LOGBOEK 19 sep): het NVH-logo alleen
   voor leden, in ongewijzigde vorm en met de naam van het lid erbij; het
   KP-logo alleen samen met het KP-nummer, en de kleuren mogen niet worden
   gewijzigd. Daarom staan ze in hun eigen kleuren op een kaart in papierwit,
   klein en op gelijke optische hoogte, in een rustige band boven de footer. */
.reg-band{background:var(--paper-2);padding:clamp(26px,3.4vw,44px) 0}
.reg-in{display:flex;flex-wrap:wrap;gap:clamp(14px,2vw,26px);justify-content:center;align-items:stretch}
.reg-item{display:flex;align-items:center;gap:18px;background:var(--card);border-radius:16px;padding:14px 22px;max-width:440px;
  box-shadow:inset 0 1.5px 0 var(--lift-hi), 0 9px 18px -14px var(--lift-drop)}
.reg-item img{width:auto;height:34px;flex:none}
.reg-item img.nvh{height:40px}
.reg-item p{font-size:.84rem;color:var(--muted);line-height:1.45}
.reg-item b{color:var(--ink);font-weight:600}
a.reg-item{transition:transform var(--dur-1) var(--ease-snap),box-shadow var(--dur-2) var(--ease-out)}
a.reg-item:hover{transform:translateY(-1px);
  box-shadow:inset 0 1.5px 0 var(--lift-hi), 0 14px 26px -14px var(--lift-drop)}
@media(hover:none){a.reg-item:hover{transform:none}}
@media(max-width:560px){.reg-item{width:100%}}

/* ============ sfeerfoto's (CC0, Unsplash-verzameling op Commons) ============
   Zelfde maten als het lege vlak dat ze vervangen. Minimalistisch en
   associatief, nooit de aandoening zelf: klinische foto's bleken te
   confronterend voor de uitstraling die de site wil. */
.foto{position:relative;overflow:hidden;background:var(--paper-2)}
.foto img{width:100%;height:100%;object-fit:cover}
.duo .foto{aspect-ratio:16/11;border-radius:24px;
  box-shadow:inset 0 1.5px 0 var(--lift-hi), 0 16px 30px -18px var(--lift-drop)}
.sympt .foto{aspect-ratio:4/3;box-shadow:inset 0 -1px 0 var(--line-2)}
/* foto's faden in zodra ze geladen zijn; de klasse zet site.js, dus
   zonder script staat de foto er gewoon */
.js .foto img{opacity:0;transition:opacity .6s var(--ease-out)}
.js .foto img.geladen{opacity:1}
@media(prefers-reduced-motion:reduce){.js .foto img{transition:none}}
/* bronvermelding (CC BY/BY-SA vraagt maker, bron, licentie en wijziging):
   klein op de foto, leesbaar maar niet schreeuwerig */
.foto-bron{position:absolute;right:8px;bottom:8px;max-width:calc(100% - 16px);
  font-size:.66rem;line-height:1.3;letter-spacing:0;color:rgba(253,248,246,.92);
  background:rgba(43,26,25,.58);padding:3px 8px;border-radius:999px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.foto-bron a{text-decoration:underline;text-decoration-color:rgba(253,248,246,.35);text-underline-offset:2px}
.foto-bron a:hover{text-decoration-color:currentColor}
.foto-bron a:focus-visible{outline-color:#fdf8f6;border-radius:4px}

/* ============ symptoom-icoontjes (wens Steffanie, WhatsApp 25 aug) ============
   Eigen lijnstijl, passend bij de rest: dunne strokes in een zachte
   mauve cirkel. Drie toepassingen: klein bij de tekst (A), als lijst
   zoals haar referentie (B), of groot in de kaart in plaats van een
   foto (C). */
.sicoon{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;flex:none;
  background:var(--paper-2);color:var(--accent)}
.sicoon svg{width:20px;height:20px}
/* termlink in lopende tekst: premium doorklik (wens Steffanie) — accent
   met een zachte onderstreping die aantrekt bij hover */
/* opsomming in een behandeltekst (o.a. Holistic Lipedema Method) */
.blijst{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:9px;max-width:60ch}
.blijst li{position:relative;padding-left:22px;color:var(--muted)}
.blijst li::before{content:"";position:absolute;left:2px;top:.55em;width:7px;height:7px;border-radius:50%;background:var(--mauve)}
.tin{color:var(--accent);font-weight:600;
  border-bottom:1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  transition:border-color var(--dur-2) var(--ease-out)}
.tin:hover{border-bottom-color:var(--accent)}
/* triggers (rosacea): rustige chips */
.chips{display:flex;flex-wrap:wrap;gap:10px;max-width:760px}
.chips span{padding:9px 16px;border-radius:999px;background:var(--card);border:1px solid var(--line);
  font-size:.9rem;font-weight:500;color:var(--ink);box-shadow:inset 0 1px 0 var(--lift-hi)}
/* "Lees ook"-kaarten: drie kolommen op ruim scherm */
.bento.drie{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.bento.drie{grid-template-columns:1fr}}

/* het icoontje staat bij de kaarttekst in de fotostrip (gekozen optie) */
.sympt figcaption{display:flex;gap:12px;align-items:flex-start}
.sympt figcaption .sicoon{margin-top:2px}

/* ============ producten (wens Steffanie): waar we mee werken ============ */
.producten{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:900px){.producten{grid-template-columns:1fr}}
.product{display:flex;flex-direction:column;align-items:flex-start;gap:10px;background:var(--card);border-radius:var(--r);padding:24px 22px;
  box-shadow:inset 0 1.5px 0 var(--lift-hi), 0 1px 0 var(--lift-hi), 0 9px 18px -12px var(--lift-drop)}
.product .sicoon{width:44px;height:44px}
.product b{font-size:1.02rem;font-weight:600;letter-spacing:-.012em}
.product p{font-size:.9rem;color:var(--muted)}

/* touch: hover-transforms uit */
@media(hover:none){a.bcel:hover,.krij:hover .pijl,.mega-item:hover .pijl{transform:none}}
/* reduced motion: echte fallbacks */
@media(prefers-reduced-motion:reduce){
  .js .reveal,.js .reveal-l,.js .reveal-r{opacity:1;transform:none;transition:none;transition-delay:0s}
  html{scroll-behavior:auto}
  .scrollbar{display:none}
  .mega{transition:none}
}/* afspraak, gegevens: in het smalle paneel één kolom; voor- en achternaam naast elkaar, tussenvoegsel smal */
.agenda-vlak .md-scheduler__personal-form__fields,.agenda-vlak .md-scheduler__personal-form__remark{flex:1 1 100%}
.agenda-vlak .md-scheduler__personal-form__fields__name{display:grid;grid-template-columns:1fr 104px 1fr;gap:10px}
.agenda-vlak .md-scheduler__personal-form__remark textarea{min-height:110px}
@media(max-width:560px){.agenda-vlak .md-scheduler__personal-form__fields__name{grid-template-columns:1fr}}
@media(max-width:700px){.agenda-vlak .md-scheduler .md-scheduler__box--done:not(.md-scheduler__box--open){grid-template-columns:1fr auto;row-gap:2px}
  .agenda-vlak .md-scheduler .md-scheduler__box--done:not(.md-scheduler__box--open)::before{grid-column:1/-1}}

/* ============ ronde pijlen, overal gelijk (27 okt) ============
   Waren 1,5px rand in bijna-zwart met een dikke pijl van 14px: een halve
   pixel wordt op een gewoon scherm wazig getekend ("lijkt slechte
   resolutie"). Nu een rand van precies 1px in een zachte inkt, een iets
   grotere, dunnere pijl, en bij hover gevuld in bordeaux. */
.mega-item .pijl,.bcel:not(.groot) .pijl,.krij .pijl,.teklijst .pijl,.kindex-lijst .pijl,.koplink .pijl{
  width:32px;height:32px;border:1px solid color-mix(in srgb,var(--ink) 20%,transparent);background:color-mix(in srgb,var(--paper) 55%,transparent);color:var(--ink);
  box-shadow:0 1px 2px -1px color-mix(in srgb,var(--ink) 25%,transparent)}
.mega-item .pijl svg,.bcel .pijl svg,.krij .pijl svg,.teklijst .pijl svg,.kindex-lijst .pijl svg,.koplink .pijl svg{width:15px;height:15px;stroke-width:1.6}
.bcel.groot .pijl{width:32px;height:32px;border-width:1px}
.mega-item:hover .pijl,a.bcel:not(.groot):hover .pijl,.krij:hover .pijl,.teklijst a:hover .pijl,.kindex-lijst a:hover .pijl,.kindex-lijst a.aan .pijl,.koplink:hover .pijl,.deel.aan .koplink .pijl{
  background:var(--accent);border-color:var(--accent);color:var(--paper);box-shadow:0 4px 10px -4px color-mix(in srgb,var(--accent) 60%,transparent)}
/* "specialisatie": geen grijs tekstje meer, maar een fijn label in de serif, cursief in bordeaux, met een haarlijntje ervoor */
.volgt{display:inline;margin-left:8px;white-space:nowrap;font-family:var(--serif);font-style:italic;font-size:.92rem;font-weight:400;letter-spacing:0;color:var(--accent)}


/* openingstijden in het contactblok (27 okt): klein kopje, per dag een regel met haarlijn */
.openingstijden{margin-top:28px;max-width:340px}
.ot-kop{display:block;font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-2);margin-bottom:8px}
.openingstijden dl{margin:0}
.openingstijden dl>div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:9px 0;border-bottom:1px solid var(--line)}
.openingstijden dl>div:first-child{border-top:1px solid var(--line)}
.openingstijden dt{font-size:.95rem;color:var(--ink)}
.openingstijden dd{margin:0;font-size:.95rem;color:var(--muted);font-variant-numeric:tabular-nums}

/* ============ mobiel (27 okt) ============
   Tikdoelen: tekstlinks die los staan (kruimelpad, telefoon/e-mail, koppen
   op de tarieven, inhoud van de voorwaarden) krijgen op een telefoon een
   aanraakvlak van minstens 40px hoog, zonder dat de tekst zelf groter wordt.
   Beeldverantwoording: één kolom (de kolommen vroegen 420px). */
@media(max-width:700px){
  .kruimel a,.contact-lijst a,.tlink,.tar-groep h2 a,.bv-groep h2 a,.pers a,.ksolo-tekst .tlink,.tarief a.tlink{display:inline-flex;align-items:center;min-height:40px}
  .kruimel{gap:2px 8px;flex-wrap:wrap}
  .av-inhoud a{padding:10px 0}
  .contact-lijst{gap:4px}
  .contact-lijst li{align-items:center}
  section.bv{columns:1}
}
/* lange woorden in koppen (Beeldverantwoording, Talgklierhyperplasie) breken op een telefoon af met een afbreekstreepje */
/* geen afbreekstreepjes in koppen (Rodin: "persoonlijk met zon streepje kan niet"); alleen de ene lange kop krijgt op een telefoon een kleinere maat */
@media(max-width:700px){.kop-klacht h1{font-size:clamp(1.9rem,8.6vw,2.4rem);overflow-wrap:normal;hyphens:manual}}

/* ============ mobiel menu en actiebalk (27 okt) ============
   Menuknop met het woord Menu; het menu toont alle pagina's (uitklapbaar) en
   eindigt met afspraak, bellen en WhatsApp. Op een telefoon wordt de zwevende
   dock een vaste balk over de volle breedte, binnen duimbereik, met ruimte
   onder de pagina zodat hij niets afdekt. */
.burger{width:auto;gap:8px;padding:0 13px 0 11px;font:600 .88rem/1 var(--sans);letter-spacing:.01em}
.burger span{display:inline}
.drawer{padding:18px 22px calc(22px + env(safe-area-inset-bottom));gap:0}
.dr-top{display:flex;align-items:center;justify-content:space-between;padding-bottom:6px}
.dr-kop{font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-2)}
.drawer .x{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;border:1px solid color-mix(in srgb,var(--ink) 18%,transparent);font-size:1.5rem}
.dr-nav{display:flex;flex-direction:column}
.dr-nav>a,.dr-groep>summary{font-family:var(--serif);font-size:1.32rem;padding:14px 0;border-bottom:1px solid var(--line-2);color:var(--ink)}
.dr-groep>summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center}
.dr-groep>summary::-webkit-details-marker{display:none}
.dr-groep>summary::after{content:"";width:9px;height:9px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(45deg) translateY(-3px);transition:transform var(--dur-2) var(--ease-out);margin-right:6px}
.dr-groep[open]>summary::after{transform:rotate(225deg) translateY(-2px)}
.dr-groep[open]>summary{color:var(--accent);border-bottom-color:transparent}
.dr-sub{display:grid;grid-template-columns:1fr;padding:2px 0 12px 14px;border-left:1px solid var(--line-2);margin:0 0 6px 2px;border-bottom:1px solid var(--line-2)}
.dr-sub a{font-size:1rem;color:var(--muted);padding:10px 0;font-family:var(--sans);border:0}
.dr-sub a:active,.dr-sub a:hover{color:var(--accent)}
.dr-nav .volgt{font-size:.85rem}
.dr-acties{margin-top:22px;display:grid;gap:10px}
.dr-acties .btn{justify-content:center;padding:15px 22px}
.dr-snel{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dr-snel a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;border-radius:999px;border:1px solid color-mix(in srgb,var(--ink) 18%,transparent);font-weight:600;font-size:.92rem;color:var(--ink)}
.dr-snel svg{width:18px;height:18px}
.dock-bel{display:none}
@media(max-width:700px){
  body{padding-bottom:calc(74px + env(safe-area-inset-bottom))}
  .dock{left:0;right:0;bottom:0;flex-direction:row;align-items:center;gap:10px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:color-mix(in srgb,var(--paper) 92%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid var(--line-2)}
  .dock .btn{flex:1;justify-content:center;padding:14px 18px;box-shadow:none}
  .dock-wa,.dock-bel{width:50px;height:50px;flex:none;box-shadow:none}
  .dock-bel{display:grid;place-items:center;border-radius:50%;border:1px solid color-mix(in srgb,var(--ink) 18%,transparent);color:var(--ink);background:var(--paper)}
  .dock-bel svg{width:20px;height:20px}
  .dock-wa{order:2}.dock-bel{order:3}
}

/* ============ mobiel compacter (27 okt, Rodin: "te lang op de telefoon") ============ */
/* menuknop: alleen de drie streepjes, geen kader */
.burger{border:0;background:none;padding:0;width:44px;height:44px;justify-content:center}
.burger span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.burger svg{width:24px;height:24px}
@media(max-width:700px){
  /* klachtenlijst: zoekveld boven, lijst in twee kolommen met korte regels; de
     detailkaart (bedoeld voor hover) vervalt, op een telefoon tik je direct door */
  .indexwrap{display:flex;flex-direction:column;gap:18px}
  .detailkolom{order:-1}
  .detailkolom .detail{display:none}
  .zoekblok{margin-top:0;padding-top:0;border-top:0}
  .zoekblok small,.zoekblok p{display:none}
  .indexlijst{columns:2;column-gap:18px}
  .indexlijst a{font-size:.98rem;line-height:22px;padding:9px 0 10px;break-inside:avoid}
  .indexlijst a::before{display:none}
  .indexlijst a:hover,.indexlijst a.aan{padding-left:0}
  #huidaandoeningen .shead p{display:none}
  /* behandelingen: Lipoedeem blijft de opvallende kaart, de rest compacte regels */
  .bento:not(.drie){display:block}
  .bento:not(.drie) .bcel.groot{min-height:0;padding:24px 22px;margin-bottom:10px}
  .bento:not(.drie) .bcel:not(.groot){display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;column-gap:14px;row-gap:2px;align-items:center;
    background:none;box-shadow:none;border-radius:0;padding:14px 2px;border-bottom:1px solid var(--line)}
  .bento:not(.drie) .bcel:not(.groot) b{grid-column:1;grid-row:1}
  .bento:not(.drie) .bcel:not(.groot) p{grid-column:1;grid-row:2;font-size:.84rem}
  .bento:not(.drie) .bcel:not(.groot) .onder{grid-column:2;grid-row:1/3;margin:0;padding:0}
  .bento:not(.drie) .bcel:not(.groot):hover{transform:none}
}
@media(max-width:700px){
  .bento:not(.drie) .bcel:not(.groot) p{display:none}
  .bento:not(.drie) .bcel:not(.groot){padding:12px 2px}
  .bento:not(.drie) .bcel.groot p{font-size:.92rem}
  .zoekblok .indexzoek{max-width:none}
  .indexzoek{width:100%}
}
@media(max-width:700px){
  /* symptomen: twee per rij, icoon boven de tekst, kortere kaart */
  .sympt,.sympt.kolom-3,.sympt.kolom-4{grid-template-columns:1fr 1fr;gap:10px}
  .sympt figcaption{display:block;padding:10px 12px 13px;font-size:.8rem;line-height:1.4}
  .sympt figcaption .sicoon{display:none}
  .sympt figcaption b{font-size:.86rem;line-height:1.3}
  .sympt .foto-bron{display:none}
  /* portret: minder hoog op een telefoon */
  .over-foto{aspect-ratio:1/1;max-width:none}
}

/* slotvlak op mobiel: knoppen naast elkaar, even breed, met lucht ertussen */
@media(max-width:700px){.slot-knoppen{display:grid;grid-template-columns:1fr 1fr;gap:10px}.slot-knoppen .btn{justify-content:center;padding:14px 12px;white-space:nowrap;font-size:.92rem}}
/* actieknoppen onderaan: zwevend, zonder balk eronder (Rodin 27 okt) */
@media(max-width:700px){
  body{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
  .dock{left:14px;right:14px;bottom:calc(14px + env(safe-area-inset-bottom));padding:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;border-top:0}
  .dock .btn{box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 12px 26px -10px rgba(57,39,33,.45),0 3px 8px -4px rgba(57,39,33,.3)}
  .dock-wa,.dock-bel{box-shadow:0 12px 26px -10px rgba(57,39,33,.45),0 3px 8px -4px rgba(57,39,33,.3)}
}
/* footer: adres en telefoon links onder de tagline, boven de social-knoppen (Steffanie 27 okt) */
.foot-contact{list-style:none;margin:6px 0 2px;padding:0;display:grid;gap:8px}
.foot-contact a{display:inline-flex;align-items:center;gap:10px;font-size:.92rem;color:rgba(247,239,236,.82)}
.foot-contact a::after{display:none}
.foot-contact a:hover{color:var(--panel-fg)}
.foot-contact svg{width:16px;height:16px;flex:none;opacity:.75}
@media(max-width:700px){.foot-contact a{min-height:40px}}