/* =====================================================================
   Voor mens — eigen stijlblad.

   Bewust NIET de coachsite-engine. Die legt een eigen gezicht op en Voor mens
   heeft er al een. Alles hieronder komt uit hun bestaande site, met een
   kleurenprikker uit een schermafdruk gehaald en met hun eigen lettertypes:
   Montserrat voor alles, Playfair Display cursief voor het accentwoord in een kop.

   Hun taal in het kort:
     - sage balk bovenaan, actief menu-item als wit tabblad
     - cream en wit wisselen elkaar af, met volle zwarte banden als adempauze
     - koppen eindigen op een punt
     - kleine hoofdletter-bovenkopjes met veel letterafstand
     - sage pil-badges, zwarte rechthoekige knoppen
     - foto links, wit paneel rechts, tegen elkaar aan
   ===================================================================== */

@font-face{font-family:'Montserrat';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(../fonts/Montserrat-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,
    U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(../fonts/Montserrat-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,
    U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:400 700;font-display:swap;
  src:url(../fonts/Playfair-italic-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,
    U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:400 700;font-display:swap;
  src:url(../fonts/Playfair-italic-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,
    U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

:root{
  --sage:#B5BAA4;          /* geprikt uit hun navbalk en hun knoppen */
  --sage-licht:#E8EBE3;
  --sage-diep:#55604B;     /* donkerder lid van dezelfde familie, leesbaar op cream */
  --zwart:#1A1A18;         /* hun volle banden */
  --zwart-kaart:#232321;   /* hun kaarten binnen die banden */
  --inkt:#2E2E2C;
  --grijs:#6B6B65;
  --cream:#F5F3EF;
  --cream-diep:#EDEAE3;
  --wit:#FFFFFF;
  --lijn:rgba(46,46,44,.12);
  --lijn-donker:rgba(255,255,255,.14);
  --kop-h:74px;
  --maxw:1180px;
  --pad:clamp(18px,4vw,40px);
  --soepel:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--wit);color:var(--inkt);
  font-family:'Montserrat',system-ui,-apple-system,sans-serif;
  font-size:16px;line-height:1.65;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--sage-diep);outline-offset:3px;border-radius:2px}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ---------------------------------------------------------- balk */
/* Opgemeten naast hun eigen balk op 22-09. Zij hebben 16px/300 in bijna-zwart,
   ruim uit elkaar, en een rustig cream blokje voor de actieve pagina. Mijn eerste
   versie had 12,7px/500 in grijsgroen, opgepropt rechts, met een luide witte pil.
   Dit is hun maatvoering, met drie dingen erbij: een haarlijn onderaan zodat de
   balk loskomt van de zwarte band, een echte hover, en Contact als enige actie. */
.balk{position:sticky;top:0;z-index:60;background:var(--sage);
  box-shadow:inset 0 -1px 0 rgba(43,45,36,.16)}
.balk__in{max-width:1420px;margin-inline:auto;padding:0 var(--pad);
  height:var(--kop-h);display:flex;align-items:center;gap:28px}
.merk{display:flex;align-items:center;flex:none;text-decoration:none;
  opacity:.94;transition:opacity .2s var(--soepel)}
.merk:hover{opacity:1}
.merk img{height:21px;width:auto}
.menu{position:relative;margin-left:auto;display:flex;align-items:center;gap:5px;
  align-self:stretch;padding-bottom:13px;padding-top:13px}

/* Het actieve tabblad schuift mee naar waar je hovert. Geen extra figuurtje,
   wel hun eigen cream blokje dat in beweging komt. */
.menu__vlak{position:absolute;left:0;top:0;width:0;height:0;border-radius:3px;
  background:var(--cream);opacity:0;pointer-events:none;z-index:0;
  transition:transform .32s cubic-bezier(.32,1.12,.44,1),
             width .32s cubic-bezier(.32,1.12,.44,1),
             height .2s var(--soepel),opacity .22s var(--soepel)}
@media (prefers-reduced-motion: reduce){.menu__vlak{transition:opacity .2s}}
.menu a{
  position:relative;z-index:1;text-decoration:none;font-size:.95rem;font-weight:400;
  color:#2B2D24;padding:9px 18px;border-radius:3px;white-space:nowrap;
  transition:background .2s var(--soepel),color .2s var(--soepel);
}
.menu a:hover{background:rgba(250,249,245,.5)}
.menu a[aria-current="page"]{color:var(--zwart);font-weight:500}
/* Contact is de enige actie in de balk. Zwart blokje, hun eigen knoptaal. */
.menu a:last-child{background:var(--zwart);color:#F2F1ED;margin-left:12px;font-weight:500}
.menu a:last-child:hover{background:#000}
.menu a:last-child[aria-current="page"]{background:var(--cream);color:var(--zwart)}

.burger{display:none;margin-left:auto;width:42px;height:38px;border:0;background:transparent;
  cursor:pointer;padding:0;align-items:center;justify-content:center;flex-direction:column;gap:5px}
.burger i{display:block;width:20px;height:1.5px;background:#2B2D24;border-radius:2px;
  transition:transform .3s var(--soepel),opacity .2s}
.balk.is-open .burger i:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.balk.is-open .burger i:nth-child(2){opacity:0}
.balk.is-open .burger i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
@media(max-width:1120px){
  .burger{display:flex}
  .menu{position:fixed;inset:var(--kop-h) 0 auto 0;background:var(--sage);flex-direction:column;
    align-items:stretch;gap:0;padding:0 var(--pad);margin:0;
    box-shadow:0 14px 26px -16px rgba(26,26,24,.5);
    max-height:0;overflow:hidden;transition:max-height .35s var(--soepel),padding .35s var(--soepel)}
  .balk.is-open .menu{max-height:80svh;overflow:auto;padding:8px var(--pad) 20px}
  .menu a{padding:14px 6px;border-radius:0;font-size:1rem;
    border-bottom:1px solid rgba(43,45,36,.14)}
  .menu a:last-child{background:transparent;color:#2B2D24;margin-left:0;border-bottom:0}
  .menu a:last-child:hover{background:rgba(250,249,245,.5)}
  .menu{padding-top:0;padding-bottom:0;align-self:auto}
  .menu__vlak{display:none}
  .menu a[aria-current="page"]{background:rgba(250,249,245,.55)}
}

/* ---------------------------------------------------------- raamwerk */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.wrap--breed{max-width:1420px}
.vak{padding-block:clamp(52px,7vw,96px)}
.vak--cream{background:var(--cream)}
.vak--creamdiep{background:var(--cream-diep)}
.vak--zwart{background:var(--zwart);color:#F2F1ED}
.vak--krap{padding-block:clamp(30px,4vw,48px)}

/* ---------------------------------------------------------- type */
.bovenkop{
  font-size:.688rem;font-weight:600;letter-spacing:.19em;text-transform:uppercase;
  color:var(--grijs);margin:0 0 14px;
}
.vak--zwart .bovenkop{color:var(--sage)}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.021em;line-height:1.14}
.h-groot{font-size:clamp(2rem,4.4vw,3.05rem)}
.h-mid{font-size:clamp(1.55rem,3vw,2.15rem)}
.h-klein{font-size:clamp(1.12rem,1.8vw,1.32rem);letter-spacing:-.012em}
.cursief{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:400;
  letter-spacing:-.005em}
.intro{margin:16px 0 0;color:var(--grijs);font-size:1.015rem;line-height:1.68;max-width:62ch}
.vak--zwart .intro{color:rgba(255,255,255,.72)}
.midden{text-align:center}
.midden .intro{margin-inline:auto}
.kopblok{margin-bottom:clamp(30px,4vw,48px)}

/* ---------------------------------------------------------- knoppen */
.knop{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:inherit;font-size:.815rem;font-weight:600;letter-spacing:.055em;
  text-transform:uppercase;text-decoration:none;cursor:pointer;border:1.5px solid transparent;
  padding:14px 26px;min-height:48px;border-radius:2px;
  transition:background .22s var(--soepel),color .22s var(--soepel),border-color .22s var(--soepel);
}
.knop--zwart{background:var(--zwart);color:var(--wit)}
.knop--zwart:hover{background:#000}
.knop--sage{background:var(--sage);color:var(--zwart)}
.knop--sage:hover{background:#C4C8B4}
.knop--rand{background:transparent;color:var(--inkt);border-color:rgba(46,46,44,.34)}
.knop--rand:hover{background:var(--zwart);color:var(--wit);border-color:var(--zwart)}
.vak--zwart .knop--rand{color:var(--wit);border-color:rgba(255,255,255,.4)}
.vak--zwart .knop--rand:hover{background:var(--wit);color:var(--zwart)}
.knoppen{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.midden .knoppen{justify-content:center}

/* ---------------------------------------------------------- hero */
.hero{position:relative;min-height:min(74svh,620px);display:flex;align-items:center;
  isolation:isolate;overflow:hidden;background:var(--zwart)}
.hero__beeld{position:absolute;inset:0;z-index:-2}
.hero__beeld img{width:100%;height:100%;object-fit:cover;object-position:50% 34%}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(24,22,20,.62) 0%,rgba(24,22,20,.5) 45%,rgba(24,22,20,.74) 100%)}
.hero__in{width:100%;text-align:center;padding-block:clamp(56px,9vw,92px);color:var(--wit)}
.hero .bovenkop{color:rgba(255,255,255,.76)}
.hero h1{font-size:clamp(1.85rem,4.3vw,3.1rem);line-height:1.22;max-width:26ch;margin-inline:auto;
  text-wrap:balance}
.hero .knoppen{justify-content:center}
/* De omrande knop is standaard donker op licht. Op de donkere hero is dat
   onzichtbaar, dus hier de lichte variant. Gevonden op de schermafdruk. */
.hero .knop--rand{color:var(--wit);border-color:rgba(255,255,255,.48)}
.hero .knop--rand:hover{background:var(--wit);color:var(--zwart);border-color:var(--wit)}
.hero h1 em{font-style:normal;color:var(--sage)}
.hero .intro{color:rgba(255,255,255,.84);margin-inline:auto;max-width:60ch}

/* paginakop voor de subpagina's: volle zwarte band, precies zoals zij hem hebben */
.paginakop{background:var(--zwart);color:var(--wit);text-align:center;
  padding-block:clamp(48px,6.5vw,84px)}
.paginakop h1{font-size:clamp(1.9rem,4.4vw,3rem)}
.paginakop .intro{color:rgba(255,255,255,.7);margin-inline:auto;text-align:center}

/* ---------------------------------------------------------- roosters */
.rooster{display:grid;gap:clamp(14px,1.8vw,22px)}
.r2{grid-template-columns:repeat(2,minmax(0,1fr))}
.r3{grid-template-columns:repeat(3,minmax(0,1fr))}
.r4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:940px){.r3,.r4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.r2,.r3,.r4{grid-template-columns:1fr}}

/* ---------------------------------------------------------- pijlerkaart */
.pijler{background:var(--cream);border:1px solid var(--lijn);border-radius:6px;
  padding:clamp(18px,2.2vw,24px)}
.vak--cream .pijler{background:var(--wit)}
.pijler__ico{width:34px;height:34px;display:grid;place-items:center;margin-bottom:14px;
  border-radius:50%;background:var(--sage-licht)}
.pijler__ico svg{width:18px;height:18px;stroke:var(--sage-diep);fill:none;stroke-width:1.7}
.pijler h3{font-size:1.02rem;margin-bottom:6px}
.pijler p{margin:0;color:var(--grijs);font-size:.895rem;line-height:1.6}

/* ---------------------------------------------------------- aanbodkaart */
.aanbodkaart{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  background:var(--wit);border:1px solid var(--lijn);overflow:hidden}
.aanbodkaart--vol{grid-template-columns:1fr}
.aanbodkaart__beeld{position:relative;min-height:230px;background:var(--cream-diep)}
.aanbodkaart__beeld img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.aanbodkaart__in{padding:clamp(20px,2.6vw,32px);display:flex;flex-direction:column}
.tier{display:flex;align-items:center;gap:8px;font-size:.66rem;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--grijs);
  padding-bottom:9px;border-bottom:1px solid var(--lijn);margin-bottom:14px}
.tier::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--sage);flex:none}
.tier--premium::before{background:var(--sage-diep)}
.aanbodkaart h3{font-size:clamp(1.15rem,2vw,1.42rem);margin-bottom:8px}
.aanbodkaart p{margin:0 0 20px;color:var(--grijs);font-size:.925rem;line-height:1.62}
.aanbodkaart .knop{align-self:flex-start;margin-top:auto}
@media(max-width:720px){
  .aanbodkaart{grid-template-columns:1fr}
  .aanbodkaart__beeld{min-height:0;aspect-ratio:4/3}
}

/* ---------------------------------------------------------- padkiezer (WOW 2) */
.kiezer{display:flex;gap:6px;padding:5px;background:var(--cream-diep);border-radius:999px;
  width:max-content;margin-inline:auto;margin-bottom:clamp(26px,3.4vw,40px)}
.vak--cream .kiezer{background:var(--wit);border:1px solid var(--lijn)}
.kiezer button{
  font:inherit;font-size:.85rem;font-weight:600;letter-spacing:.03em;border:0;cursor:pointer;
  background:transparent;color:var(--grijs);padding:11px 24px;border-radius:999px;min-height:44px;
  transition:background .25s var(--soepel),color .25s var(--soepel);
}
.kiezer button[aria-selected="true"]{background:var(--zwart);color:var(--wit)}
.paneel[hidden]{display:none!important}
.paneel{animation:opkomen .45s var(--soepel) both}
@keyframes opkomen{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------------------------------------------------------- teamkaart */
.lid{background:var(--wit);border:1px solid var(--lijn);border-radius:6px;overflow:hidden;
  display:flex;flex-direction:column}
.vak--cream .lid{background:var(--wit)}
.vak--zwart .lid{background:var(--zwart-kaart);border-color:var(--lijn-donker);color:#F2F1ED}
.vak--zwart .lid p{color:rgba(255,255,255,.7)}
.vak--zwart .lid .badge{background:rgba(181,186,164,.18);color:var(--sage)}
.lid__beeld{position:relative;aspect-ratio:16/9;background:var(--zwart-kaart)}
.lid__beeld img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lid__in{padding:15px 17px 18px}
.lid h3{font-size:1rem;margin-bottom:7px}
.badge{display:inline-block;font-size:.635rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;background:var(--sage-licht);color:var(--sage-diep);
  padding:4px 9px;border-radius:3px;margin-bottom:9px}
.badge--goud{background:rgba(181,186,164,.22);color:var(--sage)}
.lid p{margin:0;color:var(--grijs);font-size:.868rem;line-height:1.58}

/* oprichtersband */
.oprichter{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  background:var(--zwart);color:var(--wit)}
.oprichter__beeld{position:relative;min-height:300px}
.oprichter__beeld img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.oprichter__in{padding:clamp(26px,4vw,56px);display:flex;flex-direction:column;
  justify-content:center;align-items:flex-start}
.oprichter h2{font-size:clamp(1.6rem,3vw,2.3rem);margin:12px 0 6px}
.oprichter .rol{font-size:.72rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--sage);margin:0 0 16px}
.oprichter p{margin:0;color:rgba(255,255,255,.74);font-size:.97rem;line-height:1.68;max-width:52ch}
@media(max-width:820px){
  .oprichter{grid-template-columns:1fr}
  .oprichter__beeld{min-height:0;aspect-ratio:16/10}
}

/* ---------------------------------------------------------- bloedanalyse (WOW 1) */
.bloed{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(26px,4vw,64px);align-items:center}
@media(max-width:900px){.bloed{grid-template-columns:1fr;gap:28px}}
.bloed__beeld{position:relative;border-radius:6px;overflow:hidden;background:var(--zwart-kaart)}
.bloed__beeld img{width:100%;height:auto;display:block}
.bloed__stempel{
  position:absolute;left:14px;bottom:14px;z-index:2;pointer-events:none;
  background:rgba(26,26,24,.82);color:#fff;font-size:.66rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;padding:7px 12px;border-radius:3px;
}
/* de echte uitslag, regel voor regel */
.uitslag{background:var(--wit);border:1px solid var(--lijn);border-radius:6px;
  padding:clamp(16px,2.2vw,22px)}
.uitslag__kop{display:flex;justify-content:space-between;align-items:baseline;
  padding-bottom:11px;border-bottom:1px solid var(--lijn);margin-bottom:6px}
.uitslag__kop b{font-size:.79rem;font-weight:700;letter-spacing:.03em}
.uitslag__kop span{font-size:.66rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--sage-diep)}
.rij{display:grid;grid-template-columns:minmax(88px,.9fr) minmax(0,1.6fr);gap:12px;
  align-items:center;padding:7px 0;opacity:0;transform:translateY(6px)}
.rij.is-in{opacity:1;transform:none;transition:opacity .5s var(--soepel),transform .5s var(--soepel)}
.rij b{font-size:.76rem;font-weight:500;color:var(--inkt)}
.balkje{height:9px;border-radius:2px;background:var(--cream-diep);overflow:hidden;position:relative}
.balkje i{position:absolute;inset:0 auto 0 0;width:0;border-radius:2px;
  transition:width .9s var(--soepel)}
.rij.is-in .balkje i{width:var(--w)}
.uitslag__voet{margin:12px 0 0;font-size:.74rem;color:var(--grijs);line-height:1.5}

/* ---------------------------------------------------------- verhalen */
.verhaal{background:var(--wit);border:1px solid var(--lijn);border-radius:6px;
  padding:clamp(17px,2.2vw,22px);display:flex;flex-direction:column}
.vak--cream .verhaal{background:var(--wit)}
.verhaal__boven{display:flex;align-items:center;gap:12px;margin-bottom:13px}
.verhaal__thumb{width:42px;height:42px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--sage-licht) center/cover no-repeat;color:var(--sage-diep);
  font-weight:700;font-size:.8rem}
.verhaal.heeft-poster .verhaal__thumb i{opacity:0}
.verhaal__thumb i{font-style:normal;transition:opacity .4s}
.verhaal__boven b{font-size:.95rem;font-weight:700}
.verhaal__res{margin:0 0 16px;font-size:1rem;line-height:1.52;font-weight:500}
.verhaal__knop{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:8px;
  border:1px solid rgba(46,46,44,.28);background:transparent;cursor:pointer;color:var(--inkt);
  font:inherit;font-size:.8rem;font-weight:600;border-radius:2px;padding:10px 15px;min-height:44px;
  transition:background .22s,color .22s,border-color .22s}
.verhaal__knop:hover{background:var(--zwart);color:var(--wit);border-color:var(--zwart)}
.verhaal__speler{position:relative;aspect-ratio:9/16;margin-top:14px;border-radius:4px;
  overflow:hidden;background:#000}
.verhaal__speler iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.verhaal.is-speelt .verhaal__knop{display:none}

/* ---------------------------------------------------------- overig */
.partners{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(24px,5vw,60px)}
.partners img{height:52px;width:auto;opacity:.82}
.lijst{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.lijst li{display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:start;
  font-size:.945rem;line-height:1.6;color:var(--grijs)}
.lijst li::before{content:"";width:16px;height:16px;margin-top:5px;border-radius:50%;flex:none;
  background:var(--sage-licht) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355604B' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/9px no-repeat}
.vak--zwart .lijst li{color:rgba(255,255,255,.76)}
.vak--zwart .lijst li::before{background-color:rgba(181,186,164,.2)}

.cijfers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,22px)}
.cijfer{text-align:center;padding:clamp(18px,2.4vw,26px);border:1px solid var(--lijn-donker);
  border-radius:6px;background:var(--zwart-kaart)}
.cijfer b{display:block;font-size:clamp(1.7rem,3.4vw,2.4rem);font-weight:700;letter-spacing:-.03em}
.cijfer span{display:block;font-size:.72rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--sage);margin-top:6px}
@media(max-width:560px){.cijfers{grid-template-columns:1fr}}

.vouw{border-top:1px solid var(--lijn)}
.vouw__item{border-bottom:1px solid var(--lijn)}
.vouw__knop{width:100%;text-align:left;background:transparent;border:0;cursor:pointer;
  font:inherit;font-size:1.02rem;font-weight:600;color:var(--inkt);padding:19px 40px 19px 0;
  position:relative;min-height:56px}
.vouw__knop::after{content:"";position:absolute;right:4px;top:50%;width:14px;height:14px;
  margin-top:-7px;transition:transform .3s var(--soepel);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355604B' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat}
.vouw__knop[aria-expanded="true"]::after{transform:rotate(45deg)}
.vouw__in{display:grid;grid-template-rows:0fr;transition:grid-template-rows .34s var(--soepel)}
.vouw__knop[aria-expanded="true"] + .vouw__in{grid-template-rows:1fr}
.vouw__in > div{overflow:hidden}
.vouw__in p{margin:0 0 19px;color:var(--grijs);font-size:.95rem;line-height:1.66;max-width:70ch}

.agenda{display:grid;gap:0;border-top:1px solid var(--lijn)}
.agenda__rij{display:grid;grid-template-columns:104px 1fr auto;gap:clamp(14px,2.4vw,30px);
  align-items:center;padding:20px 0;border-bottom:1px solid var(--lijn)}
.agenda__datum{text-align:center;border:1px solid var(--lijn);border-radius:5px;padding:8px 4px}
.agenda__datum b{display:block;font-size:1.4rem;font-weight:700;line-height:1}
.agenda__datum span{display:block;font-size:.66rem;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--grijs);margin-top:3px}
.agenda__in h3{font-size:1.05rem;margin-bottom:4px}
.agenda__in p{margin:0;color:var(--grijs);font-size:.885rem;line-height:1.55}
@media(max-width:700px){
  .agenda__rij{grid-template-columns:76px 1fr;row-gap:12px}
  .agenda__rij .knop{grid-column:1/-1;justify-self:start}
}

.contactkaart{display:grid;gap:14px}
.contactrij{display:flex;align-items:center;gap:13px;text-decoration:none;padding:15px 17px;
  border:1px solid var(--lijn);border-radius:6px;background:var(--wit);
  transition:border-color .22s,background .22s;min-height:56px}
.contactrij:hover{border-color:var(--sage-diep);background:var(--cream)}
.contactrij svg{width:19px;height:19px;stroke:var(--sage-diep);fill:none;stroke-width:1.7;flex:none}
.contactrij small{display:block;font-size:.67rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--grijs);margin-bottom:1px}
.contactrij b{font-weight:600;font-size:.96rem}

/* ---------------------------------------------------------- formulier */
.formulier{display:grid;gap:15px}
.veld{display:grid;gap:7px}
.veld label{font-size:.72rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--grijs)}
.veld input,.veld select,.veld textarea{
  font:inherit;font-size:.97rem;color:var(--inkt);background:var(--wit);
  border:1px solid rgba(46,46,44,.22);border-radius:4px;padding:13px 14px;width:100%;
  min-height:50px;transition:border-color .2s}
.veld textarea{min-height:104px;resize:vertical;line-height:1.6}
.veld input:focus,.veld select:focus,.veld textarea:focus{border-color:var(--sage-diep);outline:none}
.veld2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}
@media(max-width:560px){.veld2{grid-template-columns:1fr}}
.val{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formulier__noot{margin:0;font-size:.8rem;color:var(--grijs);line-height:1.55}
.formulier__ok{display:none;background:var(--sage-licht);border:1px solid var(--sage);
  border-radius:5px;padding:15px 17px;font-size:.93rem;font-weight:600;color:var(--sage-diep)}
.formulier.is-verstuurd .formulier__ok{display:block}
.formulier.is-verstuurd .veld,.formulier.is-verstuurd button[type=submit],
.formulier.is-verstuurd .formulier__noot{display:none}

/* ---------------------------------------------------------- voet */
.voet{background:var(--zwart);color:rgba(255,255,255,.72);padding-block:clamp(40px,5vw,60px)}
.voet__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:clamp(22px,3vw,40px)}
@media(max-width:860px){.voet__grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.voet__grid{grid-template-columns:1fr}}
.voet img{height:18px;width:auto;margin-bottom:14px}
.voet h4{font-size:.7rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--sage);margin-bottom:13px}
.voet ul{list-style:none;margin:0;padding:0;display:grid;gap:3px}
.voet a{text-decoration:none;font-size:.9rem;display:inline-block;padding:7px 0;
  transition:color .2s;min-height:36px}
.voet a:hover{color:var(--sage)}
.voet__onder{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
  margin-top:clamp(28px,4vw,44px);padding-top:20px;border-top:1px solid var(--lijn-donker);
  font-size:.8rem;color:rgba(255,255,255,.5)}

/* ---------------------------------------------------------- onthullen */
.op{opacity:0;transform:translateY(16px)}
.op.is-in{opacity:1;transform:none;transition:opacity .62s var(--soepel),transform .62s var(--soepel)}
.op-1{transition-delay:.07s}.op-2{transition-delay:.14s}.op-3{transition-delay:.21s}
@media (prefers-reduced-motion: reduce){.op{opacity:1;transform:none}}

/* ---------------------------------------------------------- het lichaam */
/* Idee van Dave: toon de vier pijlers niet als vier platte kaartjes maar in één
   lichaam. Bloed stroomt, darmen lichten op, spieren spannen, het brein straalt. */
.lf__in{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(24px,4vw,64px);align-items:center}
@media(max-width:900px){.lf__in{grid-template-columns:1fr;gap:26px}}

.lf__figuur{position:relative;max-width:420px;margin-inline:auto;width:100%}
.lf__figuur svg{width:100%;height:auto;display:block;overflow:visible}
.lf__bijschrift{display:block;text-align:center;margin-top:10px;font-size:.7rem;
  letter-spacing:.11em;text-transform:uppercase;color:var(--grijs)}

/* de figuur zelf: rustig, bijna papier */
.lf__romp ellipse,.lf__romp rect,.lf__romp path:not(.lf__lid){
  fill:#E4E2DB;stroke:rgba(46,46,44,.16);stroke-width:1.2}
.lf__lid{fill:none;stroke:#E4E2DB;stroke-width:17;stroke-linecap:round}
.lf__been{stroke-width:23}

/* alle stelsels uit, behalve het actieve */
.lf__laag{opacity:0;transition:opacity .55s var(--soepel);pointer-events:none}
.lf__laag.is-aan{opacity:1}

/* bloed */
.lf__vat{fill:#8E3B3B;opacity:.9}
.lf__stroom{fill:none;stroke:#8E3B3B;stroke-width:2.4;stroke-linecap:round;
  stroke-dasharray:14 12;stroke-dashoffset:0}
.lf__laag[data-laag=bloed].is-aan .lf__stroom{animation:lfstroom 2.6s linear infinite}
@keyframes lfstroom{to{stroke-dashoffset:-52}}
.lf__pols{fill:none;stroke:#8E3B3B;stroke-width:1.4;opacity:0;transform-origin:180px 158px}
.lf__laag[data-laag=bloed].is-aan .lf__pols{animation:lfpols 2.2s ease-out infinite}
@keyframes lfpols{
  0%{opacity:.55;transform:scale(.5)}
  70%{opacity:0;transform:scale(1.5)}
  100%{opacity:0;transform:scale(1.5)}}

/* voeding */
.lf__maag{fill:rgba(85,96,75,.2);stroke:#55604B;stroke-width:2;stroke-linejoin:round}
.lf__darm{fill:none;stroke:#55604B;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.lf__dunne{fill:none;stroke:#55604B;stroke-width:2.4;stroke-linecap:round;opacity:.8}
.lf__kronkel{fill:none;stroke:#55604B;stroke-width:2.2;stroke-linecap:round}
.lf__laag[data-laag=voeding].is-aan .lf__dunne{animation:lfgolf 3.4s ease-in-out infinite}
.lf__laag[data-laag=voeding].is-aan .lf__dunne:nth-of-type(3){animation-delay:.3s}
.lf__laag[data-laag=voeding].is-aan .lf__dunne:nth-of-type(4){animation-delay:.6s}
@keyframes lfgolf{0%,100%{opacity:.8}50%{opacity:1}}

/* training */
.lf__spier{fill:rgba(138,106,79,.24);stroke:#8A6A4F;stroke-width:1.6;stroke-linejoin:round}
/* spierbundel op een ledemaat: zelfde lijn als het ledemaat, dunner, en met een
   streepjespatroon dat alleen het stuk toont waar de spier zit. */
.lf__bundel{fill:none;stroke:#8A6A4F;stroke-width:11;stroke-linecap:round;opacity:.5;
  stroke-dasharray:var(--lang) 100;stroke-dashoffset:calc(var(--van) * -1)}
.lf__bundel--been{stroke-width:15}
.lf__laag[data-laag=training].is-aan .lf__bundel{animation:lfspan 2.8s ease-in-out infinite}
.lf__laag[data-laag=training].is-aan .lf__spier{animation:lfspan 2.8s ease-in-out infinite}
@keyframes lfspan{0%,100%{opacity:.78}50%{opacity:1}}

/* mindset */
.lf__brein{fill:none;stroke:#4A5560;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.lf__ring{fill:none;stroke:#4A5560;stroke-width:1.2;opacity:0;transform-origin:180px 52px}
.lf__laag[data-laag=mindset].is-aan .lf__ring{animation:lfstraal 3s ease-out infinite}
.lf__laag[data-laag=mindset].is-aan .lf__ring--2{animation-delay:.9s}
@keyframes lfstraal{
  0%{opacity:.45;transform:scale(.72)}
  75%{opacity:0;transform:scale(1.12)}
  100%{opacity:0;transform:scale(1.12)}}

/* de vier knoppen ernaast */
.lf__knoppen{display:grid;gap:10px}
.lf__knop{
  display:grid;grid-template-columns:auto 1fr;gap:15px;align-items:start;text-align:left;
  font:inherit;cursor:pointer;background:var(--wit);border:1px solid var(--lijn);
  border-radius:6px;padding:17px 19px;min-height:56px;
  transition:border-color .25s var(--soepel),box-shadow .25s var(--soepel),
             background .25s var(--soepel);
}
.lf__knop:hover{border-color:rgba(46,46,44,.28)}
.lf__knop[aria-selected="true"]{border-color:var(--kl);
  box-shadow:inset 3px 0 0 var(--kl),0 8px 22px -16px rgba(26,26,24,.5)}
.lf__stip{width:11px;height:11px;border-radius:50%;margin-top:6px;background:var(--kl);
  opacity:.28;transition:opacity .25s var(--soepel),transform .25s var(--soepel)}
.lf__knop[aria-selected="true"] .lf__stip{opacity:1;transform:scale(1.15)}
.lf__tekst b{display:block;font-size:1.03rem;font-weight:700;margin-bottom:3px;
  letter-spacing:-.012em}
.lf__tekst span{display:block;color:var(--grijs);font-size:.9rem;line-height:1.58}

@media (prefers-reduced-motion: reduce){
  .lf__stroom,.lf__pols,.lf__dunne,.lf__spier,.lf__ring{animation:none!important}
  .lf__pols,.lf__ring{opacity:.3}
}
@media(max-width:560px){
  .lf__knop{padding:14px 15px;gap:12px}
  .lf__tekst span{font-size:.86rem}
}

/* ---------------------------------------------------------- 23-10: CoachFlow-widgets en subpagina's
   Zelfde taal als de rest: wit paneel, dunne lijn, kleine radius. De iframe krijgt een
   starthoogte; form_embed.js van CoachFlow past hem daarna aan de inhoud aan. */
.cfwidget{background:var(--wit);border:1px solid var(--lijn);border-radius:6px;
  padding:clamp(4px,1.2vw,12px);overflow:hidden}
.cfwidget iframe{display:block;width:100%;border:0;min-height:var(--h,640px);background:var(--wit)}
.cfwidget-wrap{max-width:760px;margin:30px auto 0}
.vak--zwart .cfwidget{border-color:transparent}
.paginakop .knoppen{margin-top:26px}
.paginakop__noot{margin:16px auto 0;font-size:.82rem;color:rgba(255,255,255,.55);max-width:60ch}
.lijst--nee li::before{
  background:#F1E7E5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A2453F' stroke-width='3.6' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7 7 17'/%3E%3C/svg%3E") center/8px no-repeat}
.pijler .lijst{margin-top:14px}
.pijler .knop{margin-top:16px}
.citaat{margin:0}
.citaat blockquote{margin:0 0 14px;font-family:'Playfair Display',Georgia,serif;font-style:italic;
  font-size:1.02rem;line-height:1.6;color:var(--inkt)}
.citaat figcaption{font-size:.72rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--sage-diep)}
.prijskaart{max-width:760px;margin-inline:auto;text-align:center;background:var(--wit);
  border:1px solid var(--lijn);border-radius:6px;padding:clamp(26px,4vw,46px)}
.prijskaart__bedrag{font-size:clamp(2.2rem,5vw,3.2rem);font-weight:700;letter-spacing:-.03em;
  margin:14px 0 4px;line-height:1.1}
.prijskaart__onder{margin:0 auto 22px;color:var(--grijs);font-size:.9rem;max-width:56ch}
.prijskaart .lijst{text-align:left;max-width:520px;margin-inline:auto}
.prijskaart .knoppen{justify-content:center}
.vak:not(.vak--cream) .prijskaart{background:var(--cream)}
/* cijfers op een lichte band (subpagina's): zelfde blokken, lichte versie */
.vak:not(.vak--zwart) .cijfer{background:var(--wit);border-color:var(--lijn);color:var(--inkt)}
.vak:not(.vak--zwart) .cijfer b{color:var(--inkt)}
.vak:not(.vak--zwart) .cijfer span{color:var(--sage-diep)}
.vak--cream .cijfer{background:var(--wit)}