/* =========================================================================
   Dunker Fitness - ontwerpsysteem
   Kleuren gemeten uit het echte logo (1734x1271 PNG van de klant):
   grijs #808080 · oranje #FE6D0C · cyaan #01B3E3 · groen #3FAE2B · geel #FEDA00
   Doelgroep is 40-plus tot senior: grote letters, hoog contrast, ruime knoppen.
   ========================================================================= */

:root{
  /* merk */
  --oranje:#FE6D0C;
  --oranje-licht:#FF8A38;
  --cyaan:#01B3E3;
  --groen:#3FAE2B;
  --geel:#FEDA00;
  --grijs:#808080;
  --oranje-link:#FE6D0C;   /* past zich aan op lichte blokken */

  /* grond */
  --nacht:#000000;
  --nacht-2:#0A0A0A;
  --nacht-3:#141414;
  --lijn:rgba(255,255,255,.10);
  --lijn-sterk:rgba(255,255,255,.18);

  /* tekst */
  --wit:#FFFFFF;
  --zacht:#D8DEE4;
  --dof:#8C97A2;

  /* licht blok */
  --papier:#FFFFFF;
  --papier-2:#F0F2F4;
  --inkt:#000000;

  --max:1200px;
  --pad:clamp(20px,5vw,40px);
  --radius:0px;

  --font-display:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;overflow-x:clip;
  background:var(--nacht);color:var(--zacht);
  font-family:var(--font-body);
  font-size:18px;line-height:1.68;
  -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:target{scroll-margin-top:104px}

/* ---------- typografie ---------- */
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:900;color:var(--wit);
  font-stretch:112%;
  line-height:.97;letter-spacing:-.008em;margin:0 0 .5em;
  text-wrap:balance;
  /* Lange samenstellingen als "revalidatiecentrum" passen in dit zware, brede
     type niet meer op een kolom. Zonder dit breekt het woord zonder koppelteken
     midden doormidden. Met lang="nl"/"en" hyphenateert de browser netjes;
     break-word blijft eronder liggen als laatste redmiddel. */
  -webkit-hyphens:auto;hyphens:auto;
}
h1{font-size:clamp(2.7rem,7vw,5.4rem);text-transform:uppercase;letter-spacing:-.012em;font-stretch:118%;line-height:.92}
h2{font-size:clamp(2.05rem,4.5vw,3.35rem);text-transform:uppercase;font-stretch:116%;line-height:.94}
/* Automatisch afbreken werkt op leestekst, maar niet op een kop van 55 pixels in
   een zwaar breed kapitaal: daar las "VOOR IEDEREEN DIE VERANTWOORD WIL BEWEGEN"
   als "VOOR IEDER-EEN DIE VER-ANTWOORD". Op h1 en h2 breken we daarom alleen op
   een spatie of op een ­ die we zelf zetten. Elke kop is daarna nagemeten op
   390px en 1440px; geen enkele loopt buiten zijn kolom. */
h1,h2{-webkit-hyphens:manual;hyphens:manual}
h3{font-size:clamp(1.2rem,2.1vw,1.55rem);letter-spacing:-.012em;line-height:1.12}
h4{font-size:1.05rem;letter-spacing:.01em;line-height:1.15}
p{margin:0 0 1.15em;max-width:66ch}
.groot{font-size:clamp(1.1rem,1.9vw,1.32rem);line-height:1.62;color:var(--zacht)}
strong,b{color:var(--wit);font-weight:650}

.kop-label{
  display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--font-body);font-size:.79rem;font-weight:700;
  letter-spacing:.19em;text-transform:uppercase;color:var(--oranje);
  margin:0 0 1.1rem;
}
/* Chevrons in plaats van een streepje: het pijlmotief uit Armands concept.
   currentColor via mask, zodat de pijlen automatisch de kleur van het label pakken. */
.kop-label::before{
  content:"";width:34px;height:12px;flex:none;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 12'%3E%3Cg fill='%23000'%3E%3Cpath d='M0 0l6 6-6 6h4.2l6-6-6-6z'/%3E%3Cpath d='M11 0l6 6-6 6h4.2l6-6-6-6z'/%3E%3Cpath d='M22 0l6 6-6 6h4.2l6-6-6-6z'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 12'%3E%3Cg fill='%23000'%3E%3Cpath d='M0 0l6 6-6 6h4.2l6-6-6-6z'/%3E%3Cpath d='M11 0l6 6-6 6h4.2l6-6-6-6z'/%3E%3Cpath d='M22 0l6 6-6 6h4.2l6-6-6-6z'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
}
.kop-label.cyaan{color:var(--cyaan)}
.kop-label.groen{color:var(--groen)}
.kop-label.geel{color:var(--geel)}

/* De kop erft de kleur van zijn eigen label. Zo krijgt elke sectie een eigen
   merkkleur, zoals in het concept, zonder dat er iets in de HTML hoeft te veranderen. */
.kop-label + h2{color:var(--oranje)}
.kop-label.cyaan + h2{color:var(--cyaan)}
.kop-label.groen + h2{color:var(--groen)}
.kop-label.geel  + h2{color:var(--geel)}
.licht .kop-label + h2{color:var(--inkt)}

/* ---------- leesbaarheid op de lichte blokken ----------
   Het merkoranje haalt op hardwit maar 2,8:1 en zakt dus door de eis van 4,5:1 voor
   kleine tekst. Gemeten in de browser, niet geschat. Voor de lichte blokken daarom een
   donkerder oranje uit dezelfde familie; op zwart blijft het merkoranje gewoon staan.
   De doelgroep is 40-plus tot senior, dus hier valt niets op af te dingen. */
.licht{--oranje-leesbaar:#B24700;--oranje-link:#B24700}
.licht .kop-label{color:var(--oranje-leesbaar)}
.licht .kop-label.cyaan{color:#00687F}
.licht .kop-label.groen{color:#256B18}
.licht .kop-label.geel{color:#6B5C00}
.licht a:not(.knop){color:var(--oranje-leesbaar)}
.licht .klein,.licht .per,.licht .looptijd,.licht .balk-tekst{color:#5A646E}

/* De CTA in de navigatie erfde het grijs van .nav-menu a en stond dus lichtgrijs op
   oranje (2,1:1). Donkere tekst terugzetten, met genoeg gewicht om .nav-menu a te verslaan. */
.nav-menu a.knop-hoofd,.nav-menu a.knop-hoofd:hover{color:#160800}
.nav-menu a.nav-cta{padding:12px 22px}
.mobielmenu a.knop-hoofd,.mobielmenu a.knop-hoofd:hover{color:#160800}
.mobielmenu a.knop-rand{color:var(--wit)}
/* .mobielmenu a (0,1,1) verslaat .knop (0,1,0) en pakte ook display, padding,
   gewicht en grootte af. Terugzetten, anders is het geen knop maar een balk. */
.mobielmenu a.knop{display:inline-flex;padding:18px 32px;font-weight:800;font-size:1rem}

/* ---------- layout ---------- */
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--pad)}
.wrap-breed{max-width:1400px;margin:0 auto;padding-inline:var(--pad)}
section{padding-block:clamp(64px,9vw,120px)}
.licht{background:var(--papier);color:#3D4852}
.licht h1,.licht h2,.licht h3,.licht h4{color:var(--inkt)}
.licht strong{color:var(--inkt)}
.licht .groot{color:#4A5560}
.duiker{background:var(--nacht-2);position:relative;isolation:isolate}
/* Een fijne betonstructuur over de donkere secties. Puur zwart is vlak; dit geeft
   de vlakken diepte zonder dat je bewust een foto ziet. Gegenereerd, maar het is
   een materiaal, geen mens: op een klantsite verzinnen we geen leden.
   Decoratief, dus aria-hidden via ::before en pointer-events uit. */
.duiker::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:url("/assets/img/textuur-beton.webp") center/cover no-repeat;
  opacity:.16;mix-blend-mode:screen;
}
@media(prefers-reduced-data:reduce){.duiker::before{display:none}}

.duo{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center}
.duo > *{min-width:0}
@media(min-width:900px){
  .duo{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .duo.smal-links{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
  .duo.smal-rechts{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
  .duo.omgekeerd > :first-child{order:2}
}

.rooster{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:clamp(16px,2.4vw,26px)}
.rooster > *{min-width:0}
@media(min-width:640px){.rooster.k2,.rooster.k3,.rooster.k4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:980px){
  .rooster.k3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .rooster.k4{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* ---------- knoppen ---------- */
.knop{
  display:inline-flex;align-items:center;justify-content:center;gap:.65em;
  font-family:var(--font-display);font-weight:800;font-size:1rem;
  font-stretch:106%;letter-spacing:.05em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;
  padding:18px 32px;min-height:58px;border:2px solid transparent;border-radius:var(--radius);
  text-align:center;
  transition:transform .16s ease,background .18s ease,border-color .18s ease,color .18s ease;
}
/* Lange Nederlandse labels in kapitaal worden op een smal scherm te breed. */
@media(max-width:520px){.knop{letter-spacing:.02em;padding-inline:22px;font-size:.94rem}}
/* De kaartkolommen zijn ongeveer 183px breed; daar past "GRATIS PROEFLES" in
   kapitaal niet op een regel met de normale knopmaat. */
.prijskaart .knop,.kaart .knop{padding-inline:16px;font-size:.9rem;letter-spacing:.02em}
.knop:active{transform:translateY(1px)}
.knop-hoofd{background:var(--oranje);color:#160800;border-color:var(--oranje)}
.knop-hoofd:hover{background:var(--oranje-licht);border-color:var(--oranje-licht)}
.knop-rand{background:transparent;color:var(--wit);border-color:rgba(255,255,255,.34)}
.knop-rand:hover{border-color:var(--wit);background:rgba(255,255,255,.07)}
.licht .knop-rand{color:var(--inkt);border-color:rgba(0,0,0,.45)}
.licht .knop-rand:hover{border-color:var(--inkt);background:rgba(16,22,27,.05)}
.knop-cyaan{background:var(--cyaan);color:#00212C;border-color:var(--cyaan)}
.knop-cyaan:hover{background:#31C5EC;border-color:#31C5EC}
.knoppen{display:flex;flex-wrap:wrap;gap:14px;margin-top:2rem}
.knop:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible{outline:3px solid var(--cyaan);outline-offset:3px}

/* ---------- navigatie ---------- */
.nav{
  position:sticky;top:0;z-index:60;
  background:rgba(0,0,0,.86);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--lijn);
  transition:padding .22s ease,background .22s ease;
}
.nav-in{display:flex;align-items:center;gap:20px;padding-block:16px;transition:padding .22s ease}
.nav.krimp .nav-in{padding-block:9px}
.nav-logo{display:flex;align-items:center;flex:none;text-decoration:none}
.nav-logo img{height:46px;width:auto;transition:height .22s ease}
.nav.krimp .nav-logo img{height:38px}
.nav-menu{display:none;margin-left:auto;align-items:center;gap:clamp(14px,1.8vw,30px)}
@media(min-width:1040px){.nav-menu{display:flex}}
.nav-menu a{
  text-decoration:none;color:var(--zacht);font-weight:600;font-size:.97rem;
  padding:8px 2px;border-bottom:2px solid transparent;white-space:nowrap;
}
.nav-menu a:hover{color:var(--wit);border-bottom-color:var(--oranje)}
.nav-menu a[aria-current="page"]{color:var(--wit);border-bottom-color:var(--oranje)}
.nav-talen{display:flex;gap:2px;margin-left:8px;border:1px solid var(--lijn-sterk);border-radius:var(--radius);overflow:hidden}
.nav-talen a{
  padding:7px 11px;font-size:.78rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--dof);text-decoration:none;border:0;
}
.nav-talen a:hover{color:var(--wit);background:rgba(255,255,255,.08)}
.nav-talen a[aria-current="true"]{background:var(--oranje);color:#160800}
.nav-cta{display:none}
@media(min-width:1040px){.nav-cta{display:inline-flex;padding:12px 22px;min-height:46px;font-size:.94rem}}
.hamburger{
  margin-left:auto;display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;background:none;border:1px solid var(--lijn-sterk);
  border-radius:var(--radius);color:var(--wit);cursor:pointer;
}
@media(min-width:1040px){.hamburger{display:none}}
.mobielmenu{display:none;border-top:1px solid var(--lijn);background:var(--nacht-2)}
.mobielmenu.open{display:block}
.mobielmenu ul{list-style:none;margin:0;padding:10px var(--pad) 22px}
.mobielmenu li+li{border-top:1px solid var(--lijn)}
.mobielmenu a{display:block;padding:16px 0;text-decoration:none;color:var(--wit);font-weight:650;font-size:1.06rem}
.mobielmenu .knop{width:100%;margin-top:16px}
.mobielmenu .talen-mob{display:flex;gap:10px;padding:16px 0 0;border-top:1px solid var(--lijn)}
.mobielmenu .talen-mob a{
  flex:1;text-align:center;padding:12px 0;border:1px solid var(--lijn-sterk);
  border-radius:var(--radius);font-size:.86rem;letter-spacing:.08em;text-transform:uppercase;
}
.mobielmenu .talen-mob a[aria-current="true"]{background:var(--oranje);color:#160800;border-color:var(--oranje)}

/* ---------- hero ---------- */
.hero{position:relative;padding-block:clamp(56px,8vw,104px) clamp(56px,8vw,96px);overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(58% 48% at 12% 4%, rgba(254,109,12,.20), transparent 62%),
    radial-gradient(46% 42% at 92% 88%, rgba(1,179,227,.16), transparent 66%);
}
.hero .wrap{position:relative;z-index:1}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(34px,5vw,60px);align-items:center}
.hero-grid > *{min-width:0}
@media(min-width:960px){.hero-grid{grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr)}}
/* De kop van een subpagina staat in een halve kolom van ongeveer 550px, maar erfde
   het volle heroformaat van de homepage. Daardoor braken lange woorden als
   "revalidatiecentrum" en "rekuperashon" middendoor. Eigen maat, passend bij de kolom. */
.hero h1{margin-bottom:.34em;font-size:clamp(2.1rem,4vw,3.2rem)}

/* Papiaments heeft lange woorden en Chrome kent er geen afbreekwoordenboek voor,
   dus hyphens:auto doet daar niets. Een maatje kleiner voorkomt de lelijkste breuken.
   De volle-breedte hero (.banner h1) blijft bewust ongemoeid. */
html[lang="pap"] .hero h1{font-size:clamp(1.9rem,3.4vw,2.7rem)}
html[lang="pap"] h2{font-size:clamp(1.75rem,3.3vw,2.48rem)}
html[lang="pap"] h3{font-size:clamp(1.06rem,1.8vw,1.3rem)}
.hero h1 em{font-style:normal;color:var(--oranje)}
.hero-onder{font-size:clamp(1.12rem,2vw,1.36rem);line-height:1.58;color:var(--zacht);max-width:33ch}
.hero-beeld{position:relative}
.hero-beeld img{
  width:100%;border-radius:var(--radius);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.9);
}
.hero-badge{
  position:absolute;left:-10px;bottom:-18px;
  background:var(--oranje);color:#160800;
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.5rem,3vw,2.1rem);line-height:1;
  padding:16px 20px 14px;border-radius:var(--radius);
  box-shadow:0 16px 40px -14px rgba(0,0,0,.8);
}
.hero-badge span{display:block;font-family:var(--font-body);font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-top:5px;opacity:.78}
@media(max-width:560px){.hero-badge{left:auto;right:10px;bottom:-14px}}

/* ---------- cijferbalk ---------- */
.balk{border-block:1px solid var(--lijn);background:var(--nacht-2);padding-block:clamp(28px,4vw,46px)}
.balk .rooster{gap:clamp(20px,3vw,34px)}
.balk-item{text-align:left}
.balk-getal{
  font-family:var(--font-display);font-weight:800;color:var(--wit);
  font-size:clamp(2rem,4vw,2.9rem);line-height:1;letter-spacing:-.03em;
}
.balk-getal .eenheid{font-size:.46em;margin-left:.14em;color:var(--oranje)}
.balk-tekst{margin:.55rem 0 0;font-size:.95rem;color:var(--dof);max-width:26ch}

/* ---------- kaarten ---------- */
.kaart{
  background:var(--nacht-2);border:1px solid var(--lijn);border-radius:var(--radius);
  padding:clamp(24px,3vw,32px);height:100%;
  transition:border-color .2s ease,transform .2s ease;
}
.kaart:hover{border-color:var(--lijn-sterk);transform:translateY(-3px)}
.licht .kaart{background:#fff;border-color:rgba(0,0,0,.42)}
.licht .kaart:hover{border-color:rgba(0,0,0,.62)}
.kaart p:last-child{margin-bottom:0}
.kaart .ikoon{color:var(--oranje);margin-bottom:18px}
.kaart .ikoon svg{width:30px;height:30px;display:block}
.kaart.cyaan .ikoon{color:var(--cyaan)}
.kaart.groen .ikoon{color:var(--groen)}
.kaart.geel .ikoon{color:var(--geel)}
.kaart-nr{
  font-family:var(--font-display);font-weight:800;font-size:1.05rem;
  color:var(--oranje);letter-spacing:.02em;margin-bottom:12px;display:block;
}

.beeldkaart{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--nacht-3)}
.beeldkaart img{width:100%;aspect-ratio:3/2;object-fit:cover}
/* Een portret hoort niet in een liggend kader. De oprichtersfoto is 4:5 en krijgt
   daarom zijn eigen verhouding, anders snijdt 3/2 zijn hoofd en schouders eraf. */
.beeldkaart.staand img{aspect-ratio:4/5}
.beeldkaart figcaption{
  position:absolute;inset:auto 0 0 0;padding:22px;
  background:linear-gradient(to top,rgba(6,8,10,.92),rgba(6,8,10,.55) 55%,transparent);
  color:var(--wit);font-weight:650;font-size:1.02rem;
}

/* ---------- lijstjes ---------- */
.vink{list-style:none;margin:0;padding:0;display:grid;gap:13px}
.vink li{position:relative;padding-left:36px;line-height:1.5}
.vink li::before{
  content:"";position:absolute;left:0;top:.30em;width:21px;height:21px;border-radius:50%;
  background:var(--oranje);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/15px no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/15px no-repeat;
}
.vink.cyaan li::before{background:var(--cyaan)}
.vink.groen li::before{background:var(--groen)}

/* ---------- prijzen ---------- */
.prijskaart{
  display:flex;flex-direction:column;background:var(--nacht-2);
  border:1px solid var(--lijn);border-radius:var(--radius);padding:clamp(26px,3vw,34px);height:100%;
}
.prijskaart.uitgelicht{border-color:var(--oranje);background:linear-gradient(180deg,rgba(254,109,12,.10),rgba(254,109,12,.02))}
.prijskaart .vlag{
  align-self:flex-start;background:var(--oranje);color:#160800;
  font-size:.72rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  padding:6px 11px;border-radius:var(--radius);margin-bottom:16px;
}
.prijskaart h3{margin-bottom:.25em}
.prijs{display:flex;align-items:baseline;gap:.3em;margin:14px 0 4px}
.prijs .bedrag{font-family:var(--font-display);font-weight:900;font-stretch:110%;font-size:clamp(2.4rem,4.6vw,3.1rem);color:var(--wit);line-height:1;letter-spacing:-.03em}
.prijs .munt{font-family:var(--font-display);font-weight:800;font-size:1.15rem;color:var(--oranje)}
.prijs .per{font-size:.95rem;color:var(--dof)}
.prijskaart .looptijd{font-size:.95rem;color:var(--dof);margin:0 0 20px}
.prijskaart .vink{margin-bottom:24px}
.prijskaart .vink li{font-size:.97rem}
.prijskaart .knop{margin-top:auto;width:100%}

/* ---------- tabel ---------- */
.tabelwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--lijn);border-radius:var(--radius)}
table{width:100%;border-collapse:collapse;min-width:520px;font-size:.98rem}
th,td{padding:15px 18px;text-align:left;border-bottom:1px solid var(--lijn)}
th{font-family:var(--font-display);font-weight:700;color:var(--wit);font-size:.85rem;letter-spacing:.1em;text-transform:uppercase}
tbody tr:last-child td{border-bottom:0}
.licht .tabelwrap{border-color:rgba(16,22,27,.12)}
.licht th,.licht td{border-bottom-color:rgba(16,22,27,.10)}
.licht th{color:var(--inkt)}

/* ---------- faq ---------- */
.faq{border-top:1px solid var(--lijn)}
.licht .faq{border-top-color:rgba(16,22,27,.12)}
.faq details{border-bottom:1px solid var(--lijn)}
.licht .faq details{border-bottom-color:rgba(16,22,27,.12)}
.faq summary{
  cursor:pointer;list-style:none;padding:22px 44px 22px 0;position:relative;
  font-family:var(--font-display);font-weight:700;font-size:clamp(1.02rem,1.7vw,1.2rem);
  color:var(--wit);letter-spacing:-.01em;
}
.licht .faq summary{color:var(--inkt)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:6px;top:50%;width:14px;height:2px;
  background:var(--oranje);transform:translateY(-50%);
}
.faq summary::before{
  content:"";position:absolute;right:12px;top:50%;width:2px;height:14px;
  background:var(--oranje);transform:translateY(-50%);transition:opacity .2s ease;
}
.faq details[open] summary::before{opacity:0}
.faq .antwoord{padding:0 0 22px}
.faq .antwoord p:last-child{margin-bottom:0}

/* ---------- formulier ---------- */
.formulier{display:grid;gap:18px}
.veld{display:grid;gap:7px}
.veld label{font-weight:650;font-size:.95rem;color:var(--wit)}
.licht .veld label{color:var(--inkt)}
.veld input,.veld select,.veld textarea{
  font-family:inherit;font-size:1.02rem;color:var(--wit);
  background:var(--nacht-3);border:1px solid var(--lijn-sterk);border-radius:var(--radius);
  padding:15px 16px;width:100%;min-height:56px;
}
.licht .veld input,.licht .veld select,.licht .veld textarea{background:#fff;color:var(--inkt);border-color:rgba(0,0,0,.45)}
.veld textarea{min-height:132px;resize:vertical}
.veld input::placeholder,.veld textarea::placeholder{color:var(--dof)}
.veld-duo{display:grid;gap:18px}
@media(min-width:640px){.veld-duo{grid-template-columns:1fr 1fr}}
.honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-melding{display:none;padding:16px 18px;border-radius:var(--radius);font-weight:600;line-height:1.5}
.form-melding.goed{display:block;background:rgba(63,174,43,.14);border:1px solid rgba(63,174,43,.5);color:#BFF0B4}
.form-melding.fout{display:block;background:rgba(254,109,12,.12);border:1px solid rgba(254,109,12,.5);color:#FFD0AC}
.licht .form-melding.goed{background:rgba(63,174,43,.12);color:#22651A}
.licht .form-melding.fout{background:rgba(254,109,12,.10);color:#8A3A00}
.klein{font-size:.88rem;color:var(--dof);line-height:1.55}

/* ---------- contactblokken ---------- */
.contactlijst{list-style:none;margin:0;padding:0;display:grid;gap:20px}
.contactlijst li{display:flex;gap:15px;align-items:flex-start}
.contactlijst svg{width:22px;height:22px;color:var(--oranje);flex:none;margin-top:3px}
.contactlijst a{color:var(--wit);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.28);font-weight:600}
.contactlijst a:hover{border-bottom-color:var(--oranje);color:var(--oranje)}
.licht .contactlijst a{color:var(--inkt);border-bottom-color:rgba(16,22,27,.3)}

.uren{list-style:none;margin:0;padding:0}
.uren li{display:flex;justify-content:space-between;gap:20px;padding:13px 0;border-bottom:1px solid var(--lijn)}
.licht .uren li{border-bottom-color:rgba(16,22,27,.10)}
.uren li:last-child{border-bottom:0}
.uren .dag{font-weight:650;color:var(--wit)}
.licht .uren .dag{color:var(--inkt)}
.uren .tijd{color:var(--zacht);text-align:right;white-space:nowrap}
.licht .uren .tijd{color:#4A5560}

/* ---------- cta-band ---------- */
.band{
  position:relative;overflow:hidden;
  background:linear-gradient(120deg,#0A0A0A 0%,#16181A 60%,#0A0A0A 100%);
  border-block:1px solid var(--lijn);
}
.band::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(52% 62% at 82% 18%, rgba(254,109,12,.22), transparent 66%);
}
.band .wrap{position:relative;z-index:1;text-align:center}
.band h2{margin-bottom:.4em}
.band p{margin-inline:auto}
.band .knoppen{justify-content:center}

/* ---------- footer ---------- */
footer{background:#070A0C;border-top:1px solid var(--lijn);padding-block:clamp(48px,6vw,72px) 34px}
.voet-grid{display:grid;grid-template-columns:1fr;gap:36px}
@media(min-width:800px){.voet-grid{grid-template-columns:1.5fr 1fr 1fr}}
footer h4{color:var(--wit);font-size:.86rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:16px}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
footer a{color:var(--dof);text-decoration:none}
footer a:hover{color:var(--wit)}
/* De voetlinks waren 21 pixels hoog. Op een telefoon is dat voor deze bezoekers,
   veertig tot vijfentachtig, geen doel maar een gok. Ze staan nu op 44 pixels:
   de AAA-maat uit WCAG 2.5.5, niet de AA-ondergrens van 24. De regelafstand van
   de lijst is meegekrompen zodat de voet niet langer wordt. */
   Geen flex op de li: daar staat ook het adres in, met een <br> erin, en die zou
   in een flexcontainer een eigen item worden en de regelovergang stukmaken. */
footer ul li{padding-block:11px}
footer ul a{display:block;padding-block:11px;margin-block:-11px}
@media(min-width:800px){
  footer ul{gap:6px}
  footer ul li{padding-block:5px}
  footer ul a{padding-block:5px;margin-block:-5px}
}
footer .logo-voet{height:52px;width:auto;margin-bottom:18px}
.voet-onder{
  margin-top:40px;padding-top:24px;border-top:1px solid var(--lijn);
  display:flex;flex-wrap:wrap;gap:12px 22px;justify-content:space-between;
  font-size:.86rem;color:var(--dof);
}
.voet-onder a{border-bottom:1px solid rgba(255,255,255,.16)}

/* ---------- reveal ---------- */
[data-reveal]{opacity:0;transform:translateY(22px);
  transition:opacity .62s cubic-bezier(.22,.61,.36,1),transform .62s cubic-bezier(.22,.61,.36,1)}
[data-reveal].zichtbaar{opacity:1;transform:none}
@media(min-width:900px){
  [data-reveal="links"]{transform:translate(-26px,14px)}
  [data-reveal="rechts"]{transform:translate(26px,14px)}
}
@media(prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none;transition:none}
}

/* ---------- overslaan-link ---------- */
.overslaan{
  position:absolute;left:-9999px;top:0;background:var(--oranje);color:#160800;
  padding:12px 18px;font-weight:700;z-index:100;border-radius:0 0 var(--radius) 0;
}
.overslaan:focus{left:0}

/* =========================================================================
   Laag 2, de visuele upgrade (08-09-2026)
   Aanleiding: Joanne miste de wow-factor van de Willemstad-site. Wat daar
   werkt en hier terugkomt: een bewegende bannervideo, reuzentypografie,
   een altijd zichtbare taalbalk, een lopende ticker, en beeld dat parallax
   meebeweegt. De leesbaarheidsregels voor 40-plus blijven leidend.
   ========================================================================= */

/* ---------- taal- en adresbalk, altijd zichtbaar, ook op mobiel ---------- */
.topbalk{
  position:fixed;inset:0 0 auto 0;z-index:70;
  background:#000;border-bottom:1px solid rgba(255,255,255,.08);
}
.topbalk-in{
  max-width:1400px;margin:0 auto;padding-inline:var(--pad);
  height:38px;display:flex;align-items:center;justify-content:space-between;gap:12px;
}
/* Deze regel stond op 10px in rgba(255,255,255,.42), en op mobiel zelfs op 9,5px.
   Over zwart is dat 3,94:1, en daarmee de enige echte contrastzakker op de site.
   Hij glipte door mijn eigen controle omdat die de alpha van een rgba-kleur niet
   over de achtergrond rekende en dus gewoon wit mat: altijd 21:1, altijd goed.
   Nu .62 over #000, dat is 7,84:1, en 11px in plaats van 9,5. De staart "Health in
   motion" valt onder de 560px weg, want daar werd hij toch met een beletselteken
   middenin een woord afgekapt; het adres zelf past dan wel volledig. */
.topbalk .adres{
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.62);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
@media(max-width:560px){
  .topbalk .adres{letter-spacing:.14em;font-size:11px}
  /* Alleen het huisnummer blijft staan. Op 320px is er naast de taalknoppen nog
     ongeveer 150px over, en "Mahaaiweg 9, Willemstad" past daar niet in: dat werd
     "MAHAAIWEG ..." met een beletselteken. Het volledige adres staat in de voet en
     op de contactpagina, dus er gaat niets verloren. */
  .topbalk .adres-extra{display:none}
}
.taalwissel{display:inline-flex;flex:none;border:1px solid rgba(255,255,255,.22);border-radius:var(--radius);overflow:hidden}
.taalwissel a{
  padding:10px 14px;font-size:15px;font-weight:800;letter-spacing:.10em;
  text-transform:uppercase;color:rgba(255,255,255,.82);text-decoration:none;line-height:1;
  display:inline-flex;align-items:center;min-height:44px;
}
.taalwissel a+a{border-left:1px solid rgba(255,255,255,.16)}
.taalwissel a:hover{color:#fff;background:rgba(255,255,255,.08)}
.taalwissel a[aria-current="true"]{background:var(--oranje);color:#160800}

/* de gewone nav zakt onder de topbalk */
.nav{top:38px}
:target{scroll-margin-top:150px}

/* ---------- bannerhero met video ---------- */
.banner{
  position:relative;min-height:100svh;display:flex;flex-direction:column;
  justify-content:center;overflow:hidden;overflow:clip;background:#000;
  padding-block:clamp(90px,12vh,150px) clamp(90px,12vh,140px);
}
.banner-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.banner-bg video,.banner-bg img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.5;transform:scale(1.04);
}
.banner-scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(to right, rgba(0,0,0,.94) 0%, rgba(0,0,0,.74) 42%, rgba(0,0,0,.34) 72%, rgba(0,0,0,.58) 100%),
    linear-gradient(to bottom, rgba(0,0,0,.88) 0%, rgba(0,0,0,.20) 30%, rgba(0,0,0,.58) 70%, rgba(0,0,0,.97) 100%);
}
.banner-glow{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(46% 40% at 8% 18%, rgba(254,109,12,.24), transparent 68%);
  mix-blend-mode:screen;
}
.banner .wrap{position:relative;z-index:2}

/* de linten uit het logo, heel subtiel als achtergrondritme */
.banner-linten{
  position:absolute;right:-8%;top:-10%;bottom:-10%;width:62%;z-index:1;opacity:.055;
  background:repeating-linear-gradient(118deg, transparent 0 130px, var(--cyaan) 130px 214px);
  pointer-events:none;
}

.banner h1{
  font-size:clamp(3.1rem,10.5vw,8.2rem);
  line-height:.88;letter-spacing:-.018em;margin:0 0 .32em;
  text-transform:uppercase;font-stretch:118%;font-weight:900;
}
.banner h1 .zacht-woord{
  display:block;font-family:var(--font-body);font-weight:700;
  font-size:clamp(.98rem,2.1vw,1.35rem);letter-spacing:.34em;
  text-transform:uppercase;color:var(--oranje);margin-bottom:.9em;
}
.banner h1 em{font-style:normal;color:var(--oranje)}
.banner h1 .lijn{display:block}
.banner-onder{
  font-size:clamp(1.06rem,1.9vw,1.3rem);line-height:1.6;
  color:rgba(255,255,255,.82);max-width:38ch;
}

/* cijferstrip in de banner */
.banner-cijfers{
  margin-top:clamp(38px,6vh,64px);padding-top:26px;
  border-top:1px solid rgba(255,255,255,.14);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 18px;max-width:940px;
}
@media(min-width:760px){.banner-cijfers{grid-template-columns:repeat(4,minmax(0,1fr))}}
.banner-cijfers .waarde{
  font-family:var(--font-display);font-weight:900;font-stretch:112%;color:#fff;
  font-size:clamp(1.9rem,4.2vw,3rem);line-height:1;letter-spacing:-.035em;
}
.banner-cijfers .waarde .eh{font-size:.44em;color:var(--oranje);margin-left:.12em}
.banner-cijfers .wat{
  margin:.5rem 0 0;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.5);line-height:1.5;
}

/* ---------- lopende ticker ---------- */
.ticker{
  position:relative;z-index:2;overflow:hidden;overflow:clip;
  background:var(--oranje);color:#160800;border-block:1px solid rgba(0,0,0,.22);
}
.banner .ticker{position:absolute;inset:auto 0 0 0}
.ticker-spoor{display:flex;width:max-content;animation:tickerloop 34s linear infinite}
.ticker-spoor span{
  display:inline-flex;align-items:center;padding:11px 0;
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(.82rem,1.5vw,1rem);letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;
}
.ticker-spoor .item{padding-inline:26px}
.ticker-spoor .punt{width:7px;height:7px;border-radius:50%;background:#160800;opacity:.55;flex:none}
@keyframes tickerloop{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- waarom deze balk niet meer uit zichzelf loopt ----------
   Hij liep op een timer van 34 seconden. Dat valt onder WCAG 2.2.2 (niveau A): wat
   langer dan vijf seconden vanzelf beweegt moet te pauzeren zijn. Hover telt niet,
   want op een telefoon bestaat hover niet, en de knop die dat opving vond de klant
   terecht overbodige ruis midden in het ontwerp.
   Beide problemen verdwijnen als de balk niet meer uit zichzelf beweegt maar met de
   scroll. Dan is er geen automatische beweging, dus geldt 2.2.2 niet en is er geen
   pauzeknop nodig. En de balk staat niet stil: hij loopt mee terwijl je de banner uit
   scrollt, in dezelfde bewegingstaal als de rest van de pagina.
   De timerversie blijft staan als terugval voor browsers zonder scroll-tijdlijnen;
   daar is de pauzeknop via het toetsenbord dan nog steeds bereikbaar. */
@supports (animation-timeline: view()){
  .ticker-spoor{
    animation:tickerloop linear both;
    animation-timeline:view();
    animation-range:cover 0% cover 100%;
  }
  .ticker-pauze{display:none}
}
@media(prefers-reduced-motion:reduce){.ticker-spoor{animation:none}}
.ticker:hover .ticker-spoor{animation-play-state:paused}
.ticker{display:flex;align-items:stretch}
.ticker-venster{flex:1 1 auto;overflow:hidden;overflow:clip;min-width:0}
.ticker-pauze{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0;cursor:pointer;
}
/* Zodra hij focus krijgt springt hij wel gewoon in beeld. */
.ticker-pauze:focus-visible{
  position:static;width:auto;height:auto;margin:0;overflow:visible;clip-path:none;
  flex:none;display:inline-flex;align-items:center;gap:.5em;
  min-height:44px;min-width:44px;padding:0 14px;
  background:rgba(0,0,0,.16);border-left:1px solid rgba(0,0,0,.22);
  color:#160800;font-family:var(--font-display);font-weight:800;font-size:.76rem;
  letter-spacing:.12em;text-transform:uppercase;outline:3px solid #160800;outline-offset:-3px;
}
.ticker-pauze svg{width:15px;height:15px;flex:none}
.ticker-pauze .woord{display:none}
@media(min-width:640px){.ticker-pauze .woord{display:inline}}
.ticker.gepauzeerd .ticker-spoor{animation-play-state:paused!important}

/* ---------- volle-breedte beeldband met parallax ---------- */
.beeldband{
  position:relative;min-height:clamp(360px,62vh,620px);
  display:flex;align-items:center;overflow:hidden;background:#000;
}
.beeldband-bg{position:absolute;inset:-12% 0;z-index:0;will-change:transform}
.beeldband-bg img{width:100%;height:100%;object-fit:cover;opacity:.46}
.beeldband::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to right, rgba(0,0,0,.9), rgba(0,0,0,.42) 55%, rgba(0,0,0,.75));
}
.beeldband .wrap{position:relative;z-index:2;padding-block:clamp(56px,8vw,96px)}
.beeldband blockquote{
  margin:0;max-width:20ch;
  font-family:var(--font-display);font-weight:900;font-stretch:112%;
  font-size:clamp(1.9rem,5.2vw,4rem);line-height:1.04;letter-spacing:-.012em;
  color:#fff;text-wrap:balance;
}
.beeldband blockquote em{font-style:normal;color:var(--oranje)}
.beeldband .bron{
  margin-top:22px;font-size:.82rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.55);
}
.beeldband .bron b{color:#fff;font-weight:700}

/* ---------- magnetische knop ---------- */
.knop[data-magnetisch]{will-change:transform}

/* ---------- zwevende WhatsApp-knop ---------- */
.wa-knop{
  position:fixed;right:clamp(14px,3vw,26px);bottom:clamp(14px,3vw,26px);z-index:80;
  display:inline-flex;align-items:center;gap:11px;
  background:#25D366;color:#062611;text-decoration:none;
  font-weight:750;font-size:.95rem;letter-spacing:.01em;
  padding:13px 19px 13px 15px;border-radius:999px;
  box-shadow:0 12px 34px -10px rgba(0,0,0,.75), 0 0 0 4px rgba(37,211,102,.16);
  transition:transform .18s ease, box-shadow .18s ease;
}
.wa-knop svg{width:24px;height:24px;flex:none}
.wa-knop:hover{transform:translateY(-2px);box-shadow:0 18px 40px -12px rgba(0,0,0,.8), 0 0 0 6px rgba(37,211,102,.22)}
.wa-knop .wa-tekst{display:none}
@media(min-width:520px){.wa-knop .wa-tekst{display:inline}}
@media(max-width:519px){.wa-knop{padding:14px;border-radius:50%}}
@media(prefers-reduced-motion:reduce){.wa-knop{transition:none}}
/* De knop zweeft vast onderin en schuift dus over alles wat eronder doorloopt. Op een
   telefoon van 320px landde hij op de cijfers in de banner en op de rand van de oranje
   knoppen. Hij verdwijnt nu zolang er al een grote knop in beeld staat: in de banner en
   bij het aanmeldformulier is hij overbodig, want daar staat de oproep al groot op de
   pagina. Zodra je daar voorbij bent komt hij terug. */
.wa-knop.wa-weg{
  opacity:0;visibility:hidden;transform:translateY(14px) scale(.92);pointer-events:none;
}
@media(prefers-reduced-motion:reduce){.wa-knop.wa-weg{transform:none}}

/* ---------- accentlijn die zichzelf tekent ---------- */
.tekenlijn{display:block;width:100%;max-width:320px;height:26px;overflow:visible}
.tekenlijn path{
  fill:none;stroke:var(--oranje);stroke-width:2.5;stroke-linecap:round;
  stroke-dasharray:var(--lengte,400);stroke-dashoffset:var(--lengte,400);
  transition:stroke-dashoffset 1.4s cubic-bezier(.22,.61,.36,1);
}
.tekenlijn.zichtbaar path{stroke-dashoffset:0}
@media(prefers-reduced-motion:reduce){.tekenlijn path{stroke-dashoffset:0;transition:none}}

/* ---------- kleine correcties ---------- */
.uren li .tijd{font-variant-numeric:tabular-nums}
body{padding-top:0}

/* ---------- hero op een telefoon ----------
   Met een staande montage mag er meer beeld doorkomen. De brede scrim was links
   zwaar omdat de tekst daar staat; op een telefoon staat de tekst over de volle
   breedte, dus daar werkt een verticaal verloop beter. */
@media(max-width:700px){
  .banner-bg video,.banner-bg img{opacity:.6}
  .banner-scrim{
    background:linear-gradient(to bottom,
      rgba(0,0,0,.90) 0%, rgba(0,0,0,.46) 30%, rgba(0,0,0,.62) 62%, rgba(0,0,0,.97) 100%);
  }
  .banner-linten{display:none}
}

/* ---------- de opening ----------
   Bij het laden ligt de merknaam als één vlak over de banner. Hij scheurt door het
   midden: bovenhelft schiet omhoog, onderhelft omlaag, en daarachter staat de video.
   BELANGRIJK: de standaardstand is OPEN (helften al buiten beeld). De animatie loopt
   van dicht naar open. Draait de animatie niet, dan zie je gewoon de banner. Niets
   blokkeert ooit de inhoud: pointer-events staat uit en na afloop is de laag weg. */
.opening{
  position:absolute;inset:0;z-index:5;overflow:hidden;pointer-events:none;
  display:grid;place-items:center;
}
.opening-helft{
  position:absolute;left:0;right:0;height:50%;overflow:hidden;
  background:var(--oranje);display:flex;align-items:center;justify-content:center;
}
/* De maat is gemeten, niet gegokt: bij font-stretch 118% en gewicht 900 is
   "DUNKER FITNESS" precies 10,74 keer de lettergrootte breed. 8.5vw zet hem dus
   op 91% van de vensterbreedte, van 390px tot 1440px, zonder ooit af te snijden. */
.opening-helft span{
  font-family:var(--font-display);font-weight:900;font-stretch:118%;
  font-size:min(8.5vw,176px);line-height:1;letter-spacing:-.03em;
  text-transform:uppercase;color:#160800;white-space:nowrap;
}
/* de tekst staat in beide helften op dezelfde plek, zodat hij bij het sluiten
   precies één woord vormt en pas bij het scheuren in tweeën breekt */
.opening-boven{top:0;align-items:flex-end;transform:translateY(-101%)}
.opening-boven span{transform:translateY(50%)}
.opening-onder{bottom:0;align-items:flex-start;transform:translateY(101%)}
.opening-onder span{transform:translateY(-50%)}

/* De scheur zelf: een dunne lichte lijn precies op de breuk, die meeloopt met de
   helften. Zonder die lijn oogt het splitsen als een schuivend vlak; met de lijn
   leest het als iets dat kapotgaat. */
.opening-boven::after,.opening-onder::before{
  content:"";position:absolute;left:0;right:0;height:2px;background:#160800;opacity:.55;
}
.opening-boven::after{bottom:0}
.opening-onder::before{top:0}

@keyframes opening-omhoog{
  0%,26%{transform:translateY(0)}
  100%{transform:translateY(-101%)}
}
@keyframes opening-omlaag{
  0%,26%{transform:translateY(0)}
  100%{transform:translateY(101%)}
}
/* De video achter de scheur duwt tegelijk terug van 1.14 naar 1. Dat is wat het
   verschil maakt tussen "er schuift een vlak weg" en "de zaal komt tevoorschijn". */
@keyframes opening-duw{
  0%,26%{transform:scale(1.16)}
  100%{transform:scale(1.04)}   /* 1.04 is de ruststand van het beeld zelf */
}
.opening-boven{animation:opening-omhoog 1.6s cubic-bezier(.78,0,.16,1) both}
.opening-onder{animation:opening-omlaag 1.6s cubic-bezier(.78,0,.16,1) both}
.banner-bg video,.banner-bg img{animation:opening-duw 2.1s cubic-bezier(.2,.7,.2,1) both}

@media(prefers-reduced-motion:reduce){
  .opening{display:none}
  .banner-bg video,.banner-bg img{animation:none}
}

/* ---------- bewegingstaal: onthullen in plaats van faden ----------
   Overgenomen van phive.pt: beeld opent vanuit een middenlijn, koppen worden van
   boven naar beneden vrijgegeven. Dat leest als iets dat gebeurt, in plaats van
   een blok dat er ineens staat. Alleen clip-path en transform, dus geen rasterpass
   per frame. Alles staat uit bij prefers-reduced-motion. */
.beeldkaart img,.fotoblok img,.hero-beeld img{
  clip-path:inset(50% 0 50% 0);
  transition:clip-path .95s cubic-bezier(.16,.84,.44,1);
}
[data-reveal].zichtbaar .beeldkaart img,
[data-reveal].zichtbaar .fotoblok img,
[data-reveal].zichtbaar .hero-beeld img,
.beeldkaart[data-reveal].zichtbaar img,
.fotoblok[data-reveal].zichtbaar img,
.hero-beeld[data-reveal].zichtbaar img{clip-path:inset(0 0 0 0)}

/* koppen worden van boven naar beneden vrijgegeven; de negatieve marges houden
   staarten en accenten (Curaçao, kòrsou) buiten de snede */
[data-reveal] h2,[data-reveal] .km-winst,[data-reveal] .beoordeling .cijfer{
  clip-path:inset(-14% 0 108% 0);
  transition:clip-path .85s cubic-bezier(.16,.84,.44,1) .06s;
}
[data-reveal].zichtbaar h2,
[data-reveal].zichtbaar .km-winst,
[data-reveal].zichtbaar .beoordeling .cijfer{clip-path:inset(-14% 0 -14% 0)}

/* het chevronlabel schuift mee vanaf links */
[data-reveal] .kop-label::before{transform:translateX(-14px);opacity:0;
  transition:transform .6s cubic-bezier(.16,.84,.44,1) .1s,opacity .6s ease .1s}
[data-reveal].zichtbaar .kop-label::before{transform:none;opacity:1}

@media(prefers-reduced-motion:reduce){
  .beeldkaart img,.fotoblok img,.hero-beeld img,
  [data-reveal] h2,[data-reveal] .km-winst,[data-reveal] .beoordeling .cijfer{
    clip-path:none!important;transition:none!important}
  [data-reveal] .kop-label::before{transform:none!important;opacity:1!important;transition:none!important}
}

/* ---------- de gesplitste baan ----------
   Overgenomen van phive.pt, maar getemperd voor deze doelgroep. Eén baan met type
   dat exact even hoog is als de baan zelf, plus twee kopieën die met clip-path
   horizontaal doormidden zijn gesneden en uit elkaar schuiven. Je kijkt door de
   spleet heen naar de foto erachter.
   De standaard is UIT ELKAAR, niet dicht. Zo ziet het er ook goed uit in browsers
   zonder scroll-gedreven animatie, en bij prefers-reduced-motion. */
/* overflow:clip in plaats van hidden, en dat is geen schoonheidsfoutje.
   overflow:hidden maakt van dit blok een scrollcontainer, en animation-timeline:view()
   zoekt de dichtstbijzijnde scrollcontainer om aan te hangen. Die was dus dit blok
   zelf, dat nooit scrolt, waardoor de baan stil bleef staan op zijn beginstand.
   overflow:clip knipt net zo hard af maar maakt geen scrollcontainer, dus hangt de
   animatie nu aan de pagina. De regel eronder blijft staan voor browsers die clip
   nog niet kennen; die kennen view() ook niet en krijgen gewoon de stilstaande vorm. */
.splitband{
  position:relative;overflow:hidden;overflow:clip;isolation:isolate;background:#000;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(26px,5vw,48px);min-height:clamp(340px,54vh,560px);
  padding-block:clamp(40px,7vw,72px);
}
.splitband-bg{position:absolute;inset:0;z-index:0}
.splitband-bg img{width:100%;height:100%;object-fit:cover;opacity:.72;
  filter:grayscale(1) contrast(1.12) brightness(.62)}
.splitband::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(0,0,0,.72) 0%,rgba(0,0,0,.18) 42%,rgba(0,0,0,.78) 100%);
}
.sb-lagen{position:relative;z-index:2;width:100%;height:clamp(120px,27vw,420px)}
.sb-baan{
  --h:clamp(38px,9vw,140px);
  position:absolute;left:50%;top:50%;width:max-content;height:var(--h);
  padding-inline:3vw;background:var(--oranje);
  display:flex;align-items:center;justify-content:center;
  transform:translate(-50%,-50%);
}
.sb-baan span{
  font-family:var(--font-display);font-weight:900;font-stretch:118%;
  font-size:var(--h);line-height:1;letter-spacing:-.03em;
  text-transform:uppercase;color:#160800;white-space:nowrap;
}
.sb-heel{z-index:3}
/* kleurvariant, zodat twee banen op één pagina niet hetzelfde zijn */
.splitband.cyaan .sb-baan{background:var(--cyaan)}
.splitband.cyaan .sb-baan span{color:#00212C}
.sb-boven{z-index:2;clip-path:polygon(0 0,100% 0,100% 50%,0 50%);
  transform:translate(-50%,-50%) translateY(calc(var(--h) * -0.92))}
.sb-onder{z-index:2;clip-path:polygon(0 50%,100% 50%,100% 100%,0 100%);
  transform:translate(-50%,-50%) translateY(calc(var(--h) * 0.92))}
.splitband-bron{
  position:relative;z-index:3;margin:0;text-align:center;
  font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.82);
}

@keyframes sb-open-boven{
  from{transform:translate(-50%,-50%)}
  to{transform:translate(-50%,-50%) translateY(calc(var(--h) * -0.92))}
}
@keyframes sb-open-onder{
  from{transform:translate(-50%,-50%)}
  to{transform:translate(-50%,-50%) translateY(calc(var(--h) * 0.92))}
}
@supports (animation-timeline: view()){
  .sb-boven{animation:sb-open-boven linear both;animation-timeline:view();animation-range:entry 15% cover 50%}
  .sb-onder{animation:sb-open-onder linear both;animation-timeline:view();animation-range:entry 15% cover 50%}
}
@media(prefers-reduced-motion:reduce){
  .sb-boven,.sb-onder{animation:none!important}
}

/* ---------- de krachtmeter ----------
   Interactief blok dat het verhaal persoonlijk maakt. Grote raakvlakken (58px),
   want de doelgroep is 40-plus tot senior. */
.km{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,4vw,48px);margin-top:clamp(30px,4vw,44px)}
.km > *{min-width:0}
@media(min-width:960px){.km{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr)}}
.km-vraag{margin:0 0 26px;border:0;padding:0;min-inline-size:0}
.km-vraag > legend,.km-vraag > .km-label{
  font-family:var(--font-display);font-weight:800;font-stretch:106%;font-size:.95rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--wit);padding:0;margin:0 0 12px;display:block}
.km-leeftijd{display:flex;align-items:baseline;gap:14px;margin-bottom:6px}
.km-leeftijd .cijfer{font-family:var(--font-display);font-weight:900;font-stretch:116%;
  font-size:clamp(3rem,7vw,4.2rem);line-height:.9;color:var(--groen)}
.km-leeftijd .eh{font-size:1rem;color:var(--dof)}
.km input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:46px;background:transparent;cursor:pointer;margin:0}
.km input[type=range]::-webkit-slider-runnable-track{height:8px;background:rgba(255,255,255,.16)}
.km input[type=range]::-moz-range-track{height:8px;background:rgba(255,255,255,.16)}
.km input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:38px;height:38px;margin-top:-15px;
  background:var(--groen);border:3px solid #000;cursor:grab}
.km input[type=range]::-moz-range-thumb{width:32px;height:32px;background:var(--groen);border:3px solid #000;border-radius:0}
.km input[type=range]:focus-visible{outline:3px solid var(--cyaan);outline-offset:4px}
.km-keuze{display:flex;flex-wrap:wrap;gap:10px;border:0;padding:0;margin:0}
.km-keuze label{position:relative;flex:1 1 auto;min-width:92px}
.km-keuze input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.km-keuze span{display:flex;align-items:center;justify-content:center;text-align:center;min-height:58px;
  padding:12px 14px;border:2px solid var(--lijn-sterk);background:transparent;color:var(--zacht);
  font-family:var(--font-display);font-weight:800;font-stretch:104%;font-size:.92rem;
  letter-spacing:.03em;text-transform:uppercase;
  transition:border-color .16s ease,background .16s ease,color .16s ease}
.km-keuze input:checked + span{background:var(--groen);border-color:var(--groen);color:#04240A}
.km-keuze input:focus-visible + span{outline:3px solid var(--cyaan);outline-offset:3px}
.km-uit{background:var(--nacht-2);border:1px solid var(--lijn);padding:clamp(22px,3vw,34px)}
.km-winst{font-family:var(--font-display);font-weight:900;font-stretch:118%;
  font-size:clamp(3.4rem,9vw,6rem);line-height:.86;letter-spacing:-.02em;color:var(--groen);margin:0}
.km-winst .eh{font-size:.3em;letter-spacing:.04em;margin-left:.2em;color:var(--wit)}
.km-zin{font-size:clamp(1.06rem,2vw,1.28rem);line-height:1.5;color:var(--wit);margin:.5em 0 0;max-width:34ch}
.km-legenda{display:flex;flex-wrap:wrap;gap:8px 22px;margin:22px 0 0;padding:0;list-style:none;font-size:.92rem}
.km-legenda li{display:flex;align-items:center;gap:9px}
.km-legenda i{width:22px;height:4px;flex:none;display:block}
.km-legenda .zonder i{background:var(--dof)}
.km-legenda .met i{background:var(--groen)}
.km-grafiek{width:100%;height:auto;display:block;margin-top:18px;overflow:visible}
.km-grafiek .as{stroke:rgba(255,255,255,.14);stroke-width:1}
/* De aslabels stonden hier, als svg-tekst op 11px in viewBox-eenheden. Op een
   telefoon schaalt die viewBox mee naar ongeveer 0,54 keer, dus kwamen ze uit op
   zes echte pixels terwijl de kleinste andere tekst in datzelfde blok op 14,7px
   staat. Ze staan nu als HTML onder de grafiek en schalen dus niet meer mee. De
   percentages links en rechts komen overeen met PAD_L en PAD_R uit site.js, zodat
   de labels onder hun eigen aslijn uitkomen. */
.km-as-labels{
  display:flex;justify-content:space-between;gap:8px;
  padding-left:6.07%;padding-right:2.5%;margin-top:8px;
  font-size:.84rem;line-height:1.3;color:var(--dof);
}
.km-as-labels span:first-child{text-align:left}
.km-as-labels span:last-child{text-align:right}
/* De maatregel onder het grote getal. Zonder die regel is "86" betekenisloos. */
.km-maat{
  margin:-2px 0 14px;font-size:.95rem;line-height:1.4;color:var(--zacht);max-width:34ch;
}
.km-grafiek .lijn-zonder{fill:none;stroke:var(--dof);stroke-width:3;stroke-linecap:round;stroke-dasharray:6 7}
.km-grafiek .lijn-met{fill:none;stroke:var(--groen);stroke-width:4;stroke-linecap:round}
.km-grafiek .vlak{fill:var(--groen);opacity:.12}
.km-grafiek .punt{fill:var(--groen);stroke:#000;stroke-width:3}
.km-bron{font-size:.84rem;color:var(--dof);line-height:1.55;margin:22px 0 0;max-width:78ch}

/* ---------- reviews van Google ----------
   Echte reviews van het Google-bedrijfsprofiel. Het cijfer staat groot, want
   4,5 uit 10 is sterker sociaal bewijs dan drie losse citaten. Witte kaarten op
   zwart, precies zoals in Armands concept. */
.beoordeling{
  display:flex;align-items:baseline;gap:8px 18px;flex-wrap:wrap;
  margin:0 0 clamp(30px,4vw,44px);
}
.beoordeling .cijfer{
  font-family:var(--font-display);font-weight:900;font-stretch:116%;
  font-size:clamp(3.2rem,7vw,4.8rem);line-height:.9;letter-spacing:-.02em;color:var(--cyaan);
}
.beoordeling .sterren{color:var(--geel);font-size:1.35rem;letter-spacing:.1em;line-height:1}
.beoordeling .half{opacity:.42}
.beoordeling .waaruit{color:var(--zacht);font-size:1.05rem}

.citaat{
  margin:0;background:#fff;color:#1A1A1A;padding:clamp(22px,3vw,30px);
  border-radius:var(--radius);display:flex;flex-direction:column;gap:14px;height:100%;
}
.citaat::before{
  content:"\201C";font-family:var(--font-display);font-weight:900;
  font-size:3.4rem;line-height:.62;color:#D0550A;display:block;
}
.citaat p{margin:0;font-size:1.06rem;line-height:1.55;color:#1A1A1A;max-width:none}
.citaat cite{
  font-style:normal;font-family:var(--font-display);font-weight:800;font-stretch:106%;
  text-transform:uppercase;letter-spacing:.04em;font-size:.9rem;color:#000;margin-top:auto;
}
.citaat cite span{
  display:block;font-family:var(--font-body);font-weight:600;text-transform:none;
  letter-spacing:0;font-size:.82rem;color:#5A646E;margin-top:5px;
}

/* ---------- fijnafstemming banner (na de eerste meting) ---------- */
.banner{padding-block:clamp(76px,10vh,120px) clamp(76px,10vh,110px)}
/* Ondergrens van 3rem naar 2.7rem: bij 3rem paste het Engelse STRONGER op een
   telefoon van 360-375px precies niet in de kolom en brak het middendoor. */
.banner h1{font-size:clamp(2.7rem,8.6vw,6.6rem)}
.banner h1 .zacht-woord{letter-spacing:.26em;margin-bottom:.75em}
@media(max-width:560px){
  .banner h1 .zacht-woord{letter-spacing:.18em;font-size:.92rem}
  .topbalk .adres{max-width:52vw}
}
@media(min-width:1000px) and (max-height:900px){
  .banner h1{font-size:clamp(3rem,6.4vw,5.4rem)}
  .banner-onder{font-size:1.08rem}
  .banner-cijfers{margin-top:clamp(26px,3.4vh,40px);padding-top:20px}
  .banner .knoppen{margin-top:1.5rem}
}
/* de ticker staat vast onderin de banner, dus daaronder mag geen inhoud wegvallen */
.banner{padding-bottom:calc(clamp(76px,10vh,110px) + 46px)}

/* de beeldband mocht wat lichter, anders gaat de lach in de foto verloren */
.beeldband-bg img{opacity:.62}
.beeldband::after{
  background:linear-gradient(to right, rgba(0,0,0,.92) 0%, rgba(0,0,0,.62) 38%, rgba(0,0,0,.22) 68%, rgba(0,0,0,.58) 100%);
}

/* =========================================================================
   Laag 3, meer beeld en rustige beweging op beeld (11-09-2026)
   Aanleiding: er miste beeld. Drie secties (#oprichter, #reviews, #acu) en
   het probleemblok hadden helemaal geen foto, terwijl er nog echte
   ledenfoto's ongebruikt in assets/img lagen. De .webp-varianten lagen er
   ook al, maar werden nergens uitgeserveerd.
   ========================================================================= */

/* <picture> mag niets aan de opmaak veranderen. Met display:contents blijft
   de <img> het element dat telt voor bestaande regels als
   .beeldband-bg img{height:100%} en .beeldkaart img{aspect-ratio:3/2}. */
picture{display:contents}

/* De browser geeft <figure> standaard marge 1em 40px mee. Daardoor stonden de
   drie beeldkaarten 80px smaller in hun kolom dan de kaarten eronder. */
figure{margin:0}

/* ---------- beeld dat rustig inzoomt zodra het in beeld komt ----------
   De klasse hangt op hetzelfde element als data-reveal, dus site.js hoeft
   niets extra's te doen: die zet daar al .zichtbaar op. Zonder IntersectionObserver
   of met prefers-reduced-motion staat .zichtbaar er meteen op. */
.beeld-zoom{overflow:hidden}
.beeld-zoom img{
  transform:scale(1.07);
  transition:transform 1.25s cubic-bezier(.22,.61,.36,1);
}
.beeld-zoom.zichtbaar img{transform:none}
@media(prefers-reduced-motion:reduce){
  .beeld-zoom img{transform:none;transition:none}
}

/* ---------- foto met bijschrift IN het beeld ----------
   Stond eerst als losse regel onder de foto, wat willekeurig oogde. Nu ligt het
   in het beeld op een verloop, net als bij .beeldkaart. */
.fotoblok{position:relative;overflow:hidden;background:var(--nacht-3)}
.fotoblok img{width:100%;display:block}
.fotoblok figcaption{
  position:absolute;inset:auto 0 0 0;padding:clamp(16px,3vw,24px);
  background:linear-gradient(to top,rgba(0,0,0,.92),rgba(0,0,0,.52) 58%,transparent);
  color:var(--wit);font-weight:650;font-size:clamp(.94rem,1.6vw,1.02rem);line-height:1.42;
}
.licht .fotoblok figcaption{color:var(--wit)}

/* ---------- brede beeldkaart over de volle kolombreedte ----------
   Niet breder dan 16/9. De bron is 3/2; bij 21/9 snijdt object-fit:cover de
   opgestoken armen bovenin en de tekst op het shirt onderin weg. Bij 16/9
   blijft 84% van de hoogte staan en blijft allebei in beeld. */
.beeldkaart.breed img{aspect-ratio:3/2}
@media(min-width:760px){.beeldkaart.breed img{aspect-ratio:16/9}}

  
/* ---------- accentkleur als variabele ----------
   De kopkleur stond al per onderdeel ingesteld via het label ernaast. Datzelfde
   accent is nu ook als variabele beschikbaar, zodat een uitgeholde letter of een
   lijntje dezelfde kleur pakt zonder dat het ergens dubbel opgeschreven staat. */
.kop-label       + h2{--accent:var(--oranje)}
.kop-label.cyaan + h2{--accent:var(--cyaan)}
.kop-label.groen + h2{--accent:var(--groen)}
.kop-label.geel  + h2{--accent:var(--geel)}
.licht .kop-label + h2{--accent:var(--inkt)}

/* ---------- uitgehold type ----------
   Alleen de omtrek van de letter. Eén woord per pagina, nooit een hele zin: het
   is een accent, en uitgeholde tekst leest trager dan gevulde. Daarom staat de
   informatie altijd in het gevulde deel van de kop en is dit het bijvoeglijke stuk.
   Zonder ondersteuning valt hij terug op gewone gevulde tekst in plaats van te
   verdwijnen, want color:transparent zonder omtrek is een onzichtbare kop. */
@supports (-webkit-text-stroke: 2px red){
  .uitgehold{
    -webkit-text-stroke:2px var(--accent,var(--oranje));
    color:transparent;
    paint-order:stroke fill;
  }
}
@media(max-width:700px){
  @supports (-webkit-text-stroke: 2px red){ .uitgehold{-webkit-text-stroke-width:1.5px} }
}

/* ---------- de bewijsstrook ----------
   Zeven echte opnames uit de zaal in twee sporen die tegen elkaar in lopen.
   De beweging hangt aan de scrollpositie (animation-timeline: view()), niet aan
   een timer. Dat is een bewuste keuze: beweging die vanzelf start vraagt om een
   pauzeknop (WCAG 2.2.2), en juist die knop hebben we er net uitgehaald omdat hij
   in de weg stond. Scrollt de bezoeker niet, dan beweegt er niets, en dan valt er
   ook niets te pauzeren. Zonder ondersteuning staan de sporen stil, maar verschoven
   ten opzichte van elkaar, zodat het nog steeds als compositie leest. */
.bewijsstrook{
  padding-block:clamp(52px,7vw,100px);
  background:var(--nacht-2);overflow:hidden;overflow:clip;position:relative;
}
/* hyphens:none is hier geen smaak maar een correctie: met automatische afbreking
   werd "MODELLEN" midden in het woord gebroken tot "MODEL-LEN" in plaats van na de
   spatie. Bij een kop van deze grootte is dat het eerste wat je ziet. */
.bewijs-kop{margin-bottom:clamp(26px,3.4vw,48px);max-width:820px}
.bewijs-kop h2{hyphens:none;-webkit-hyphens:none}
.bewijs-kop .groot{margin-top:14px}
.bewijs-rij{overflow:hidden;overflow:clip}
.bewijs-rij + .bewijs-rij{margin-top:clamp(9px,1.2vw,16px)}
.bewijs-spoor{display:flex;gap:clamp(9px,1.2vw,16px);width:max-content}
.bewijs-spoor picture{display:block;flex:none}
.bewijs-spoor img{
  display:block;height:clamp(98px,14.5vw,196px);width:auto;
  filter:grayscale(.22) contrast(1.06);
}
.bewijs-boven .bewijs-spoor{transform:translateX(-6%)}
.bewijs-onder .bewijs-spoor{transform:translateX(-22%)}

@keyframes spoor-naar-links {from{transform:translateX(0)}      to{transform:translateX(-26%)}}
@keyframes spoor-naar-rechts{from{transform:translateX(-26%)}   to{transform:translateX(0)}}

@supports (animation-timeline: view()){
  .bewijs-boven .bewijs-spoor{
    animation:spoor-naar-links linear both;
    animation-timeline:view();animation-range:entry 0% exit 100%;
  }
  .bewijs-onder .bewijs-spoor{
    animation:spoor-naar-rechts linear both;
    animation-timeline:view();animation-range:entry 0% exit 100%;
  }
}
@media(prefers-reduced-motion:reduce){
  .bewijs-spoor{animation:none!important}
}

/* ---------- feitenlijst ----------
   Drie korte feiten naast een portret. Bedoeld om een kolom die anders halfleeg
   onder de foto uitloopt af te maken, en om de tekst te laten ademen: een getal
   dat je van een meter afstand leest, met de uitleg er klein naast. Alle drie de
   feiten staan elders op de pagina ook in lopende tekst, hier zijn ze alleen
   sneller te pakken. */
.feiten{margin-top:clamp(24px,3vw,38px);border-top:1px solid var(--lijn-sterk)}
.feiten > div{
  display:grid;grid-template-columns:minmax(0,11.5rem) minmax(0,1fr);
  gap:6px 18px;align-items:baseline;padding:15px 0;
  border-bottom:1px solid var(--lijn-sterk);
}
.feiten dt{
  font-family:var(--font-display);font-weight:900;font-stretch:112%;
  font-size:clamp(1.3rem,2.3vw,1.8rem);line-height:1;letter-spacing:-.02em;
  color:var(--oranje);text-transform:uppercase;white-space:nowrap;
}
.feiten dd{margin:0;color:var(--zacht);font-size:1rem;line-height:1.45}
@media(max-width:560px){
  .feiten > div{grid-template-columns:minmax(0,1fr);padding:13px 0}
}

/* ---------- koptype op telefoons ----------
   De clamp-ondergrenzen van h1 en h2 gelden vanaf ongeveer 729px naar beneden, dus
   op elke telefoon staat het koptype op zijn vaste minimum terwijl de kolom wel
   blijft krimpen. Daardoor liepen op 320 en 360 px negentien koppen buiten hun
   kolom, in alle drie de talen, met "physiotherapy" (350px in een kolom van 320)
   als ergste. Alleen .banner{overflow:hidden} maskeerde dat.
   Een tweede vaste ondergrens eronder leggen lost 320 op en 360 niet, dus zijn de
   maten hier vloeiend: ze lopen mee met de vensterbreedte tot ze bij 390px weer
   op de gewone ondergrens uitkomen. Vanaf daar past het langste woord vanzelf.
   Elke waarde hieronder is nagemeten op 320, 360, 375 en 390px in alle twaalf de
   paginas; het langste woord houdt overal minstens twintig pixels marge.
   Dit raakt nog echte toestellen: een iPhone SE 1e generatie is 320px. */
@media(max-width:389px){
  .banner h1{font-size:clamp(2.1rem,10.5vw,2.7rem)}
  .banner .wrap{min-width:0}
  h1{font-size:clamp(1.7rem,8vw,2.1rem)}
  .hero h1{font-size:clamp(1.7rem,8vw,2.1rem)}
  /* Automatisch afbreken mag hier weer meedoen als extra vangnet. De lelijke
     breuken die we op h1 en h2 hebben uitgezet ontstonden op brede schermen; op een
     telefoon weegt een afgesneden woord zwaarder dan een afbreekstreepje. */
  h2{font-size:clamp(1.5rem,7.6vw,2.05rem);-webkit-hyphens:auto;hyphens:auto}
  /* Papiamentu heeft een eigen, kleinere trap met hogere specificiteit, dus die moet
     apart mee omlaag. Automatisch afbreken helpt daar niet: Chrome heeft er geen
     woordenboek voor, dus de maat moet het alleen doen. */
  html[lang="pap"] h2{font-size:clamp(1.45rem,6.6vw,1.75rem)}
  html[lang="pap"] .hero h1{font-size:clamp(1.55rem,7.2vw,1.9rem)}
}