/* ================================================================= */
/* B&R VITAAL - GEDEELDE LAAG: DE HOMEPAGESTIJL OP ELKE PAGINA         */
/* (besluit Boris 06-10-2026: "verwerk dat door naar de andere        */
/* pagina's, zodat de website echt een geheel wordt").                */
/*                                                                    */
/* De homepage (home.css, home-verhaal.css, wiel.css) is de maatstaf  */
/* en blijft onaangeroerd. Dit bestand brengt de gedeelde onderdelen  */
/* van die stijl naar de andere pagina's: hero in een afgerond kader, */
/* blokkoppen en verticale maatvoering, kaarten en tegels, de bladen  */
/* van de zes energiebronnen en de espresso afsluiter.                */
/*                                                                    */
/* WAAR HET LAADT: build/build.sh laadt dit bestand als laatste        */
/* stylesheet (na huisstijl.css) en zet body.geheel, op elke pagina    */
/* behalve home, Latin Living Room en fotogalerij. Die drie krijgen   */
/* niets: geen link, geen klasse. Alle regels staan daarom onder       */
/* ":root body.geheel", wat even zwaar weegt als de body:not()-ketens  */
/* in huisstijl.css; omdat dit bestand later laadt, wint het daar.     */
/*                                                                    */
/* UITGANGSPUNT: zoveel mogelijk via de bestaande klassen, zodat een   */
/* pagina zonder html-wijziging meegaat (.page-hero, .hero-grid,       */
/* .hero-foto-groot, .section-header, .br-card, .br-tegel, .kb-kaart,  */
/* .br-afsluiter, ...). Waar de bestaande opmaak niet past, staan hier */
/* de nieuwe klassen voor de html (zie "ONDERDELEN VOOR DE HTML").     */
/*                                                                    */
/* ONDERDELEN VOOR DE HTML                                             */
/*  Hero: vier varianten (zie HERO-VARIANTEN verderop), als klasse op   */
/*    de hero-<section>: .hero-vol (volle foto met de tekst erop),     */
/*    .hero-kop-breed (kop gecentreerd, brede foto eronder),           */
/*    .hero-typo (alleen grote letters) en .hero-klein (klein beeld    */
/*    rechts). De html-indeling per variant staat bij elke variant.    */
/*    --hero-pos op .hero-kader stelt het uitgesneden stuk van de foto */
/*    in (bijvoorbeeld style="--hero-pos: 50% 20%"; geen inline script).*/
/*  Hero, foto rechts in een kader (.hero-grid met .hero-kader): het  */
/*    basiskader van 24 px waar .hero-kop-breed en .hero-klein op      */
/*    voortbouwen; .hero-foto-groot, .hv-main en figure.hero-visual    */
/*    doen hetzelfde; een tweede foto en bijschriften worden verborgen. */
/*  Bronblad in plaats van een stip (zie BRONBLADEN):                 */
/*    <span class="bron-merk" data-bron="licht" aria-hidden="true">    */
/*    </span>  (data-bron: zuurstof, licht, herstel, voeding,          */
/*    beweging, sport; "ademhaling" is een alias van zuurstof.)        */
/*  Fotolabel: <span class="foto-pil">Zuurstof</span> in een kader met */
/*    position: relative; ivoren pil, hoofdletters, linksonder.        */
/*  Afsluiter: elke .br-afsluiter wordt vanzelf het espresso vlak met  */
/*    beeldmerk; zie AFSLUITER.                                         */
/*                                                                    */
/* Beweging: alleen bij het laden en bij in beeld komen (de bestaande  */
/* .br-wacht uit main.js), korter dan 2 seconden, en niets bij "minder */
/* beweging". Geen scroll-gekoppelde beweging en geen vastgezette      */
/* banen: dat blijft een uitzondering van de homepage.                 */
/*                                                                    */
/* Let op: nooit een transform op een div, li, button, a of img;      */
/* huisstijl.css zet die bij aanwijzen uit. Daarom translate, rotate  */
/* en scale als losse eigenschappen.                                   */
/* ================================================================= */

/* ---------- MATEN: één verticale maatvoering, gelijk aan de homepage ----------
   --blok-y    lucht boven en onder een blok (tussen twee blokken dus tweemaal),
   --blok-kop  tussen de blokkop (label, kop, inleiding) en de inhoud,
   --blok-slot tussen de inhoud en de afsluitende knop of pijl,
   --vel-r     afronding van de bovenhoeken van een vel (de afsluiter),
   --kader-r   afronding van een groot kader of een grote kaart (24 px; kleine kaarten houden 12 px).
   De bestaande secties gebruiken --sp-sectie en --sp-sectie-mob (css/style.css en de paginastijlen);
   door die hier te zetten volgen ze zonder verdere regels dezelfde maten als de homepage. */
:root body.geheel {
  --blok-y: clamp(64px, 6.4vw, 96px);
  --blok-kop: clamp(28px, 3vw, 40px);
  --blok-slot: clamp(32px, 3vw, 44px);
  --vel-r: 32px;
  --kader-r: 24px;
  --sp-sectie: var(--blok-y);
  --sp-sectie-mob: 56px;
}
@media (max-width: 900px) {
  :root body.geheel { --blok-y: 56px; --blok-kop: 26px; --blok-slot: 32px; --vel-r: 24px; }
}

/* ================================================================= */
/* BLOKKOP: label met haarlijn, kop met cursief kernwoord in markeer-  */
/* stift, korte inleiding met vaste maximale breedte (zoals home)      */
/* ================================================================= */
:root body.geheel :is(.section-header, .section-header-left, .section-header-center) {
  max-width: 760px; margin: 0 0 var(--blok-kop);
}
:root body.geheel :is(.section-header, .section-header-left, .section-header-center) .br-pill-badge { margin: 0 0 14px; }
:root body.geheel :is(.section-header, .section-header-left, .section-header-center) :is(.section-heading, .br-section-title) { max-width: 17em; margin: 0 0 14px; }
:root body.geheel :is(.section-header, .section-header-left, .section-header-center) :is(.section-lead, .br-section-lead) { max-width: 54ch; margin: 0; }
:root body.geheel :is(.section-header, .section-header-left, .section-header-center) > :last-child { margin-bottom: 0; }
/* een kop die naast andere inhoud in een raster staat, heeft zijn eigen onderruimte */
:root body.geheel .krijgt-grid .section-header { margin-bottom: 0; }
/* knoppen en pijllinks onder de inhoud van een blok: links, altijd even ver onder de inhoud */
:root body.geheel :is(.br-section, .br-p-section, .br-f-section, .br-o-section, .br-r-section, .br-c-section, .br-home-section) .br-vervolg { margin-top: var(--blok-slot); gap: 16px 28px; }

/* ================================================================= */
/* HERO                                                                */
/* Rustig: tekst links (label, h1, inleiding, knoppen), één foto rechts */
/* in een kader met 24 px afronding. Geen kleine tweede foto, geen      */
/* bijschriften, geen glas, geen kantelen, geen schaduw. Op de telefoon */
/* altijd een foto-band bovenaan met de tekst eronder.                 */
/* ================================================================= */
:root body.geheel .hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
  gap: clamp(32px, 5vw, 72px); align-items: center; perspective: none;
}
:root body.geheel .hero-grid > * { min-width: 0; }
:root body.geheel .hero-beeld { position: relative; padding: 0; width: 100%; max-width: none; }

/* het kader: één foto, afgerond, zonder rand of schaduw */
:root body.geheel :is(.hero-kader, .hero-foto-groot, .hv-main, figure.hero-visual) {
  position: relative; display: block; width: 100%; max-width: none; max-height: none; margin: 0;
  aspect-ratio: 5 / 4; overflow: hidden; border: 0; border-radius: var(--kader-r); background: #E5DABB; box-shadow: none;
}
:root body.geheel :is(.hero-kader, .hero-foto-groot, .hv-main, figure.hero-visual) > img {
  display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--hero-pos, 50% 28%);
  animation: none; scale: none;
}
/* geen tweede foto, geen bijschriften, geen geribbeld glas, niet kantelen */
:root body.geheel :is(.hero-foto-klein, .hv-sub) { display: none; }
:root body.geheel :is(.hero-kader, .hero-foto-groot, .hv-main, figure.hero-visual) > :is(figcaption, .hv-caption) { display: none; }
:root body.geheel .hero-foto-groot::after { content: none; }
:root body.geheel .hero-beeld.br-kantel { transform: none; transition: none; }
/* de illustratiekaart in de hero (financiering, wat we meten): een grote kaart */
:root body.geheel :is(.hero-overzicht, .wm-legenda) { border-radius: var(--kader-r); padding: 24px 26px; }

/* tablet en telefoon: één kolom, de foto als band bovenaan */
@media (max-width: 900px) {
  :root body.geheel .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  :root body.geheel .hero-grid > :is(.hero-beeld, .hero-kader, .hero-col:has(.hero-visual)) { order: -1; }
  :root body.geheel :is(.hero-kader, .hero-foto-groot, .hv-main, figure.hero-visual) { aspect-ratio: 16 / 11; }
}

/* ================================================================= */
/* HERO-VARIANTEN (10-10-2026, besluit Boris: "zoals Function Health":   */
/* soms een volle foto zoals op home, soms geen foto, soms klein, soms  */
/* groot). De variant staat als klasse op de hero-<section>; de pagina's */
/* en hun variant staan in docs/site.md en op /stijlgids.               */
/*                                                                    */
/*  .hero-vol        de foto over de volle containerbreedte in een     */
/*                   kader van 24 px, ivoren verloop van links, de      */
/*                   tekst erop (zoals de homepage-hero).               */
/*  .hero-kop-breed  kop, inleiding en knoppen gecentreerd bovenaan,    */
/*                   daaronder één brede foto (of videokader).          */
/*  .hero-typo       alleen grote typografie, links, veel lucht, met    */
/*                   het beeldmerk als klein accent rechtsboven.        */
/*  .hero-klein      tekst links, rechts een klein beeld (kaart, omslag */
/*                   of wiel, hooguit 38% van de breedte).              */
/* Op de telefoon staat een foto altijd als band boven de tekst.        */
/* ================================================================= */

/* ---------- HERO-VOL ----------
   <section class="br-p-hero hero-vol"><div class="br-p-container">
     <div class="hero-kader" style="--hero-pos: 78% 20%; --hero-deel: 66%">
       <img class="hero-foto" src="..." alt="..." width height fetchpriority="high" decoding="async">
       <div class="hero-tekst"> label, h1, inleiding, knoppen </div>
     </div>
     ... eventueel feiten of een balk onder het kader ...
   </div></section>
   --hero-pos   het uitgesneden stuk van de foto (object-position),
   --hero-deel  hoeveel van de kaderbreedte de foto beslaat (standaard 100%): een foto waarvan de mensen links staan
                krijgt 60 tot 70%, zodat ze rechts van de tekst staan in plaats van eronder; de linkerrand
                loopt zacht uit in het ivoor verloop,
   --hero-v0 en --hero-v1  waar het ivoren verloop dicht is en waar het weg is (standaard 24% en 61% van de kaderbreedte),
   --hero-tekst  de breedte van het tekstvak (standaard 56%, hooguit 660 px),
   --hero-h     de minimale hoogte van het kader (standaard 78% van de schermhoogte). */
:root body.geheel section.hero-vol.hero-vol { --hero-h: clamp(500px, 78svh, 780px); padding-top: clamp(12px, 1.3vw, 18px); padding-bottom: 40px; }
:root body.geheel section.hero-vol.hero-vol--laag { --hero-h: clamp(420px, 56svh, 560px); }
:root body.geheel .hero-vol .hero-kader {
  position: relative; isolation: isolate; display: flex; align-items: center; width: 100%; max-width: none; margin: 0;
  min-height: var(--hero-h); aspect-ratio: auto; overflow: hidden; border: 0; border-radius: var(--kader-r); background: #E5DABB; box-shadow: none;
}
:root body.geheel .hero-vol .hero-kader > img {
  position: absolute; top: 0; right: 0; left: auto; z-index: 0; width: var(--hero-deel, 100%); height: 100%; max-width: none;
  object-fit: cover; object-position: var(--hero-pos, 78% 20%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%); mask-image: linear-gradient(90deg, transparent 0, #000 16%);
}
:root body.geheel .hero-vol .hero-kader::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  /* het verloop: dicht tot --hero-v0 (standaard 24%), helemaal weg bij --hero-v1 (standaard 61%), dezelfde stappen als op home */
  background: linear-gradient(90deg,
    rgba(241, 230, 200, 0.93) 0%, rgba(241, 230, 200, 0.91) var(--hero-v0, 24%),
    rgba(241, 230, 200, 0.80) calc(var(--hero-v0, 24%) + (var(--hero-v1, 61%) - var(--hero-v0, 24%)) * 0.32),
    rgba(241, 230, 200, 0.48) calc(var(--hero-v0, 24%) + (var(--hero-v1, 61%) - var(--hero-v0, 24%)) * 0.62),
    rgba(241, 230, 200, 0.16) calc(var(--hero-v0, 24%) + (var(--hero-v1, 61%) - var(--hero-v0, 24%)) * 0.84),
    rgba(241, 230, 200, 0) var(--hero-v1, 61%));
}
:root body.geheel .hero-vol .hero-kader > .hero-tekst {
  position: relative; z-index: 2; box-sizing: border-box; width: var(--hero-tekst, min(56%, 660px));
  padding: clamp(28px, 4vw, 56px) clamp(24px, 4.6vw, 72px);
}
:root body.geheel .hero-vol .hero-tekst > :last-child { margin-bottom: 0; }
/* tablet en telefoon (tot 1100 px): de foto als band boven de tekst, zoals op home; de tekst past dan nooit onder een
   smal ivoren verloop */
@media (max-width: 1100px) {
  :root body.geheel section.hero-vol.hero-vol { padding-top: 16px; padding-bottom: 32px; }
  :root body.geheel .hero-vol .hero-kader { display: block; min-height: 0; overflow: visible; background: transparent; }
  :root body.geheel .hero-vol .hero-kader > img {
    position: relative; width: 100%; height: clamp(280px, 46vw, 500px); border-radius: var(--kader-r); background: #E5DABB;
    object-position: var(--hero-pos-m, var(--hero-pos, 78% 20%)); -webkit-mask-image: none; mask-image: none;
  }
  :root body.geheel .hero-vol .hero-kader::before { display: none; }
  :root body.geheel .hero-vol .hero-kader > .hero-tekst { width: auto; padding: 26px 0 0; }
}
@media (max-width: 700px) {
  :root body.geheel .hero-vol .hero-kader > img { height: clamp(240px, 42svh, 380px); }
}

/* ---------- HERO-KOP-BREED ----------
   <section class="page-hero hero-kop-breed"><div class="br-container hero-grid">
     <div class="hero-tekst"> label, h1, inleiding, knoppen </div>
     <div class="hero-beeld"><figure class="hero-kader" style="--hero-pos: 50% 30%"><img ...><span class="foto-pil">..</span></figure>
       [<span class="bron-merk" data-bron="licht"></span>]</div>
   </div></section>
   Is het beeld een videokader (<figure class="video-kader">), dan blijft dat 16:9 en wordt het hooguit 1080 px breed. */
:root body.geheel section.hero-kop-breed.hero-kop-breed { padding-top: clamp(48px, 7vw, 104px); padding-bottom: 0; }
:root body.geheel .hero-kop-breed .hero-grid { display: block; perspective: none; }
:root body.geheel .hero-kop-breed .hero-tekst {
  display: flex; flex-direction: column; align-items: center; max-width: 880px; margin: 0 auto clamp(36px, 4.4vw, 60px); text-align: center;
}
:root body.geheel .hero-kop-breed .hero-tekst > * { max-width: 100%; }
:root body.geheel .hero-kop-breed .hero-tekst :is(h1, .hero-title, .br-hero-title) { max-width: 16em; margin-left: auto; margin-right: auto; }
:root body.geheel .hero-kop-breed .hero-tekst :is(p, .kb-intro, .hero-lead, .br-hero-subtitle) { max-width: 58ch; margin-left: auto; margin-right: auto; }
:root body.geheel .hero-kop-breed .hero-tekst :is(.br-knoppen, .br-geruststelling) { justify-content: center; }
:root body.geheel .hero-kop-breed .hero-tekst .br-pill-badge, :root body.geheel .hero-kop-breed .hero-tekst .br-eyebrow { justify-content: center; }
:root body.geheel .hero-kop-breed .br-feiten { justify-content: center; }
:root body.geheel .hero-kop-breed .hero-beeld { width: 100%; max-width: none; padding: 0; margin: 0; }
:root body.geheel .hero-kop-breed .hero-beeld > .hero-kader { aspect-ratio: 21 / 9; }
:root body.geheel .hero-kop-breed .hero-beeld > .video-kader { aspect-ratio: 16 / 9; max-width: 1080px; margin: 0 auto; }
@media (max-width: 900px) {
  :root body.geheel section.hero-kop-breed.hero-kop-breed { padding-top: 40px; }
  :root body.geheel .hero-kop-breed .hero-beeld > .hero-kader { aspect-ratio: 16 / 10; }
}
@media (max-width: 600px) {
  :root body.geheel .hero-kop-breed .hero-beeld > .hero-kader { aspect-ratio: 4 / 3; }
  :root body.geheel .hero-kop-breed .br-feiten { justify-content: flex-start; }
  :root body.geheel .hero-kop-breed .hero-tekst { align-items: flex-start; text-align: left; }
  :root body.geheel .hero-kop-breed .hero-tekst :is(h1, .hero-title, .br-hero-title, p, .kb-intro, .hero-lead, .br-hero-subtitle) { margin-left: 0; margin-right: 0; }
  :root body.geheel .hero-kop-breed .hero-tekst :is(.br-knoppen, .br-geruststelling) { justify-content: flex-start; }
  :root body.geheel .hero-kop-breed .hero-tekst .br-pill-badge, :root body.geheel .hero-kop-breed .hero-tekst .br-eyebrow { justify-content: flex-start; }
}

/* ---------- HERO-TYPO ----------
   <section class="page-hero hero-typo"><div class="br-container"> label, grote kop, inleiding, knoppen </div></section>
   Geen foto: grote letters, veel lucht, links. Het beeldmerk staat klein rechtsboven (alleen een accent). Een pagina
   waar de hero ook de plek van het formulier of de planner is, krijgt .hero-typo--kompakt (kleinere kop, minder lucht). */
:root body.geheel section.hero-typo.hero-typo { position: relative; padding-top: clamp(56px, 8.5vw, 128px); padding-bottom: clamp(32px, 4.6vw, 64px); }
:root body.geheel section.hero-typo.hero-typo h1 {
  max-width: 13em; margin: 0 0 clamp(18px, 2vw, 28px); font-size: clamp(42px, 6.2vw, 88px) !important; line-height: 1.02 !important; letter-spacing: -0.025em !important; text-wrap: balance;
}
:root body.geheel section.hero-typo.hero-typo :is(.hero-lead, .kb-intro, .br-hero-subtitle, .hero-tekst > p, .br-container > p, .br-c-container p.hero-lead, .br-r-container > p) {
  max-width: 52ch; font-size: clamp(17px, 1.8vw, 21px); line-height: 1.55;
}
:root body.geheel .hero-typo .br-pill-badge, :root body.geheel .hero-typo .br-eyebrow { margin-bottom: clamp(16px, 2vw, 24px); }
:root body.geheel .hero-typo .br-knoppen { margin-top: clamp(24px, 3vw, 36px); }
:root body.geheel .hero-typo::after {
  content: ""; position: absolute; top: clamp(48px, 7.6vw, 118px); right: max(20px, calc((100% - 1240px) / 2)); z-index: 0;
  width: clamp(52px, 6.4vw, 96px); aspect-ratio: 1; pointer-events: none;
  background: url(../img/beeldmerk-192.png) center / contain no-repeat;
}
:root body.geheel .hero-typo:has(.bedankt-mark)::after { content: none; }
:root body.geheel section.hero-typo.hero-typo--kompakt { padding-top: clamp(40px, 5vw, 72px); padding-bottom: clamp(24px, 3vw, 40px); }
:root body.geheel section.hero-typo.hero-typo--kompakt h1 { font-size: clamp(36px, 4.8vw, 64px) !important; }
:root body.geheel .hero-typo.hero-typo--kompakt::after { top: clamp(40px, 5vw, 76px); width: clamp(44px, 5vw, 72px); }
@media (max-width: 900px) {
  :root body.geheel section.hero-typo.hero-typo { padding-top: 48px; padding-bottom: 28px; }
  :root body.geheel section.hero-typo.hero-typo--kompakt { padding-top: 40px; }
  :root body.geheel .hero-typo::after { top: 40px; right: 20px; width: 44px; }
}
@keyframes geheel-merk { from { opacity: 0; rotate: -24deg; scale: 0.82; } }
@media (prefers-reduced-motion: no-preference) {
  :root body.geheel .hero-typo::after { animation: geheel-merk 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.2s backwards; }
}

/* ---------- HERO-KLEIN ----------
   <section class="br-f-hero hero-klein"><div class="br-f-container hero-grid">
     <div class="hero-tekst"> ... </div>
     <div class="hero-overzicht | hg-omslag | hero-wiel"> het kleine beeld </div>
   </div></section>
   Het kleine beeld (kaart, omslag of het wiel) is hooguit 38% van de breedte en staat op de telefoon onder de tekst. */
:root body.geheel .hero-klein .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
:root body.geheel .hero-klein .hero-grid > .hero-beeld { padding: 0; }
:root body.geheel .hero-wiel {
  width: min(100%, 300px); aspect-ratio: 1; margin: 0 auto;
  background:
    url(../img/wiel-icoon-zuurstof.png) 37.80% 10.18% / 20.79% 18.53% no-repeat,
    url(../img/wiel-icoon-licht.png) 78.04% 22.01% / 18.15% 18.53% no-repeat,
    url(../img/wiel-icoon-herstel.png) 91.06% 57.26% / 23.73% 17.49% no-repeat,
    url(../img/wiel-icoon-voeding.png) 65.58% 87.11% / 26.37% 19.94% no-repeat,
    url(../img/wiel-icoon-beweging.png) 21.30% 78.03% / 16.63% 23.35% no-repeat,
    url(../img/wiel-icoon-sport.png) 8.69% 37.06% / 23.06% 19.19% no-repeat,
    url(../img/wiel-blad-zuurstof.png) 11.56% 1.38% / 55.20% 39.70% no-repeat,
    url(../img/wiel-blad-licht.png) 82.41% 0.94% / 38.66% 51.98% no-repeat,
    url(../img/wiel-blad-herstel.png) 100.15% 42.38% / 44.90% 51.42% no-repeat,
    url(../img/wiel-blad-voeding.png) 96.13% 95.40% / 58.13% 35.82% no-repeat,
    url(../img/wiel-blad-beweging.png) 15.80% 98.92% / 52.84% 54.73% no-repeat,
    url(../img/wiel-blad-sport.png) -0.40% 45.48% / 47.64% 51.61% no-repeat;
}
@media (max-width: 900px) {
  :root body.geheel .hero-klein .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  :root body.geheel .hero-klein .hero-grid > :is(.hero-beeld, .hero-kader, .hero-col:has(.hero-visual)) { order: 0; }
  :root body.geheel .hero-klein .hero-grid > :is(.hero-beeld, .hero-overzicht, .hg-omslag, .hero-wiel) { width: 100%; max-width: 340px; justify-self: start; }
  :root body.geheel .hero-wiel { width: min(78%, 260px); margin: 8px 0 0; }
}

/* de tekst van de hero: grote kop, korte inleiding, dezelfde maten als de homepage */
:root body.geheel .page-hero h1 {
  font-size: clamp(36px, 4.8vw, 60px); line-height: 1.05; letter-spacing: -0.02em; text-wrap: balance;
}
:root body.geheel .page-hero .br-container > p:not(.kb-meta):not(.br-geruststelling) {
  font-size: clamp(16px, 1.7vw, 19px); line-height: 1.55;
}
:root body.geheel .hero-tekst .br-pill-badge, :root body.geheel .hero-tekst .br-eyebrow { margin-bottom: 14px; }
/* een regel met de naam van de spreker (.kb-meta) boven de knoppen: lucht ertussen, anders plakt de knop eraan */
:root body.geheel .hero-tekst .kb-meta + .br-knoppen { margin-top: 24px; }
/* een doorverwijslink (.br-pijl) in een hero loopt als gewone tekst door, met de pijl direct achter het laatste woord;
   als flexvak wordt hij zo breed als het tekstvak en zweeft de pijl ver rechts, over de foto heen */
:root body.geheel .hero-tekst .br-pijl { display: inline; padding-bottom: 0; }

/* binnenkomst bij het laden: de tekst schuift in, de foto zoomt rustig van 1,06 naar 1 (alles korter dan 1,6 s);
   de bestaande hero's (.br-p-hero e.d.) doen dat al via css/style.css. Bij "minder beweging" niets. */
@keyframes geheel-in { from { opacity: 0; translate: 0 18px; } }
@keyframes geheel-zoom { from { scale: 1.06; } }
@media (prefers-reduced-motion: no-preference) {
  :root body.geheel :is(.page-hero, .br-wandel-hero) :is(.br-container, .hero-tekst) > :is(.br-eyebrow, .br-pill-badge, h1, p, .br-zoek, .br-knoppen, .kb-meta) {
    animation: geheel-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) calc(0.05s + var(--k, 0) * 0.09s) backwards;
  }
  :root body.geheel :is(.page-hero, .br-wandel-hero) :is(.br-container, .hero-tekst) > :nth-child(2) { --k: 1; }
  :root body.geheel :is(.page-hero, .br-wandel-hero) :is(.br-container, .hero-tekst) > :nth-child(3) { --k: 2; }
  :root body.geheel :is(.page-hero, .br-wandel-hero) :is(.br-container, .hero-tekst) > :nth-child(4) { --k: 3; }
  :root body.geheel :is(.page-hero, .br-wandel-hero) :is(.br-container, .hero-tekst) > :nth-child(n+5) { --k: 4; }
  :root body.geheel :is(.page-hero, .br-wandel-hero) .accent { animation: brMarkeer 0.8s cubic-bezier(0.65, 0, 0.35, 1) 0.45s backwards; }
  :root body.geheel :is(.hero-kader, .hero-foto-groot, .hv-main, figure.hero-visual) > img {
    animation: geheel-zoom 1.2s cubic-bezier(0.16, 1, 0.3, 1) backwards;
  }
}

/* ================================================================= */
/* KAARTEN EN TEGELS                                                   */
/* Kaartkleur #FAF4E5, geen rand, geen schaduw, ruime binnenmarge.     */
/* Grote kaarten 24 px, kleine 12 px (--r-kaart blijft 12 px).         */
/* Wit blijft voor formulieren.                                        */
/* ================================================================= */
:root body.geheel :is(.br-card, .br-tegel, .br-prijskaart, .ow-prijskaart, .stap-kaart, .kb-kaart, .team-kaart, .zigzag-row, .consult-card,
  .profiel-card, .visie-card, .aside-card, .form-card, .lead-form-card, .roi-panel, .matrix-panel, .betekenis-card, .waarde-kaart,
  .profiel-kaart, .pijler-deep, .traject-card, .aanmeld-direct, .leeg-blok, .wandel-duo-kaart, .particulier-info-card) {
  border-radius: var(--kader-r) !important;
}
:root body.geheel .br-card { background: var(--br-kaart); }
/* ruime binnenmarge, zoals de kaarten op de homepage */
:root body.geheel .br-tegel { padding: 28px 28px 24px; }
:root body.geheel .stap-kaart { padding: 22px 24px 26px; }
:root body.geheel .br-prijskaart { padding: 28px 34px; }
:root body.geheel .kb-kaart-tekst { padding: 22px 26px 26px; }
@media (max-width: 900px) {
  :root body.geheel .br-tegel { padding: 24px 22px 20px; }
  :root body.geheel .br-prijskaart { padding: 24px 22px; }
  :root body.geheel .kb-kaart-tekst { padding: 20px 22px 24px; }
}
/* kleine vlakken en notities: 12 px, kaartkleur, geen rand */
:root body.geheel .kb-stap { background: var(--br-kaart); border: 0; border-radius: var(--r-kaart); }
:root body.geheel .kb-beeld { border-radius: var(--kader-r); box-shadow: none; }
:root body.geheel .kb-kaart-bron + .kb-kaart-tekst { padding-top: 14px; }

/* fotolabels: ivoren pil in hoofdletters, linksonder op de foto (zoals .foto-pil op de homepage) */
:root body.geheel :is(.foto-pil, .zz-badge, .consult-badge, .hosts-image-badge) {
  position: absolute; top: auto; right: auto; left: 16px; bottom: 16px; z-index: 2; margin: 0; padding: 8px 14px;
  border: 0 !important; border-radius: 999px !important; background: var(--br-cream) !important; color: var(--br-ink) !important;
  font-size: 11px !important; font-weight: 800; line-height: 1; letter-spacing: 0.12em !important; text-transform: uppercase;
  opacity: 1;
}

/* ================================================================= */
/* BRONBLADEN                                                          */
/* Overal waar een energiebron een stip of kleurkenmerk heeft: een     */
/* klein blad met icoon, dezelfde bitmaps als het wiel op de homepage  */
/* (img/wiel-blad-<bron>.png en img/wiel-icoon-<bron>.png). Volgorde   */
/* altijd Zuurstof, Licht, Herstel, Voeding, Beweging, Sport.          */
/* --bm is de maat van het wiel waaruit het blad is gesneden: hoe      */
/* groter, hoe groter het blad. --bw en --bh zijn breedte en hoogte    */
/* van het blad als deel van het wiel (zelfde maten als .bron-blad in  */
/* css/home.css); --ix, --iy, --iw en --ih het vak van het icoon in    */
/* het blad (uit css/wiel.css, omgerekend naar background-position).   */
/* Werkt op .bron-merk (nieuw), .wm-stip[data-bron] (wat we meten),    */
/* .kb-kaart-bron[data-bron] (kennisbank) en .ec-vraag[data-bron]      */
/* (energiecheck, rechtsboven in de vraag).                            */
/* ================================================================= */
:root body.geheel :is(.bron-merk, .wm-stip, .kb-kaart-bron, .ec-vraag)[data-bron="zuurstof"],
:root body.geheel :is(.bron-merk, .wm-stip, .kb-kaart-bron, .ec-vraag)[data-bron="ademhaling"],
:root body.geheel .wm-sprong a[href="#wm-ademhaling"] > .wm-stip {
  --bw: 0.5520; --bh: 0.3970; --ix: 71.97%; --iy: 35.27%; --iw: 37.67%; --ih: 46.67%;
  --blad-png: url(../img/wiel-blad-zuurstof.png); --icoon-png: url(../img/wiel-icoon-zuurstof.png);
}
:root body.geheel :is(.bron-merk, .wm-stip, .kb-kaart-bron, .ec-vraag)[data-bron="licht"],
:root body.geheel .wm-sprong a[href="#wm-licht"] > .wm-stip {
  --bw: 0.3866; --bh: 0.5198; --ix: 64.96%; --iy: 52.27%; --iw: 46.94%; --ih: 35.64%;
  --blad-png: url(../img/wiel-blad-licht.png); --icoon-png: url(../img/wiel-icoon-licht.png);
}
:root body.geheel :is(.bron-merk, .wm-stip, .kb-kaart-bron, .ec-vraag)[data-bron="herstel"],
:root body.geheel .wm-sprong a[href="#wm-herstel"] > .wm-stip {
  --bw: 0.4490; --bh: 0.5142; --ix: 67.41%; --iy: 78.56%; --iw: 52.84%; --ih: 34.01%;
  --blad-png: url(../img/wiel-blad-herstel.png); --icoon-png: url(../img/wiel-icoon-herstel.png);
}
:root body.geheel :is(.bron-merk, .wm-stip, .kb-kaart-bron, .ec-vraag)[data-bron="voeding"],
:root body.geheel .wm-sprong a[href="#wm-voeding"] > .wm-stip {
  --bw: 0.5813; --bh: 0.3582; --ix: 25.30%; --iy: 53.57%; --iw: 45.37%; --ih: 55.67%;
  --blad-png: url(../img/wiel-blad-voeding.png); --icoon-png: url(../img/wiel-icoon-voeding.png);
}
:root body.geheel :is(.bron-merk, .wm-stip, .kb-kaart-bron, .ec-vraag)[data-bron="beweging"],
:root body.geheel .wm-sprong a[href="#wm-beweging"] > .wm-stip {
  --bw: 0.5284; --bh: 0.5473; --ix: 28.46%; --iy: 47.89%; --iw: 31.48%; --ih: 42.66%;
  --blad-png: url(../img/wiel-blad-beweging.png); --icoon-png: url(../img/wiel-icoon-beweging.png);
}
:root body.geheel :is(.bron-merk, .wm-stip, .kb-kaart-bron, .ec-vraag)[data-bron="sport"],
:root body.geheel .wm-sprong a[href="#wm-sport"] > .wm-stip {
  --bw: 0.4764; --bh: 0.5161; --ix: 28.07%; --iy: 24.48%; --iw: 48.41%; --ih: 37.18%;
  --blad-png: url(../img/wiel-blad-sport.png); --icoon-png: url(../img/wiel-icoon-sport.png);
}

/* het blad zelf (span zonder inhoud) */
:root body.geheel :is(.bron-merk, .wm-stip, .kb-kaart-bron):is([data-bron="zuurstof"], [data-bron="ademhaling"], [data-bron="licht"], [data-bron="herstel"], [data-bron="voeding"], [data-bron="beweging"], [data-bron="sport"]),
:root body.geheel .wm-sprong a:is([href="#wm-ademhaling"], [href="#wm-licht"], [href="#wm-herstel"], [href="#wm-voeding"], [href="#wm-beweging"], [href="#wm-sport"]) > .wm-stip {
  position: relative; display: inline-block; flex: none; box-sizing: border-box; aspect-ratio: auto;
  width: calc(var(--bw) * var(--bm, 76px)); height: calc(var(--bh) * var(--bm, 76px)); padding: 0;
  border: 0; border-radius: 0;
  background: var(--icoon-png) var(--ix) var(--iy) / var(--iw) var(--ih) no-repeat, var(--blad-png) 0 0 / 100% 100% no-repeat;
}
/* het icoon is de bovenste achtergrondlaag, geen apart element; css/kennisbank.css tekent bij .kb-kaart-bron nog een masker */
:root body.geheel .kb-kaart-bron[data-bron]::after { content: none; }
:root body.geheel .wm-stip[data-bron], :root body.geheel .wm-sprong a > .wm-stip { --bm: 64px; margin-right: calc(40px - var(--bw, 0.15625) * var(--bm)); }

/* kennisbank: het blad bovenin de kaart, het beeldmerk bij "alle" */
:root body.geheel .kb-kaart-bron[data-bron] { --bm: 150px; margin: 24px 0 0 26px; }
:root body.geheel .kb-kaart-bron[data-bron="alle"] {
  display: block; width: 76px; height: 76px; aspect-ratio: auto; margin: 22px 0 0 24px; border-radius: 0;
  background: url(../img/beeldmerk-192.png) 0 0 / contain no-repeat;
}
:root body.geheel .kb-kaart-bron[data-bron="alle"]::after { content: none; }
/* alleen een kaart met een blad of beeldmerk bovenin (de kaarten onder "Herken je dit?" hebben geen beeld) */
:root body.geheel .kb-kaart > .kb-kaart-bron[data-bron] ~ .kb-kaart-tekst { padding-top: 14px; }

/* energiecheck: het blad van de bron rechtsboven in elke stelling */
:root body.geheel .ec-vraag[data-bron] { position: relative; }
:root body.geheel .ec-vraag[data-bron="ademhaling"]::after, :root body.geheel .ec-vraag[data-bron="zuurstof"]::after,
:root body.geheel .ec-vraag[data-bron="licht"]::after, :root body.geheel .ec-vraag[data-bron="herstel"]::after,
:root body.geheel .ec-vraag[data-bron="voeding"]::after, :root body.geheel .ec-vraag[data-bron="beweging"]::after,
:root body.geheel .ec-vraag[data-bron="sport"]::after {
  content: ""; position: absolute; top: 12px; right: 14px; --bm: 84px; pointer-events: none;
  width: calc(var(--bw) * var(--bm)); height: calc(var(--bh) * var(--bm));
  background: var(--icoon-png) var(--ix) var(--iy) / var(--iw) var(--ih) no-repeat, var(--blad-png) 0 0 / 100% 100% no-repeat;
}
:root body.geheel .ec-vraag[data-bron] legend { padding-right: 64px; box-sizing: border-box; }

/* ================================================================= */
/* AFSLUITER: elke pagina eindigt ermee                                */
/* Espresso vlak met afgeronde bovenhoeken dat een stukje over het    */
/* vorige blok schuift, creme tekst, hoofdknop creme gevuld, tweede   */
/* knop creme omlijnd, met het beeldmerk (zonder iconen) als rustig   */
/* beeld. Het vlak loopt door in de footer (ook espresso). Zonder     */
/* scrollbeweging.                                                    */
/* Het hele vlak is de <section> die een .br-afsluiter bevat.         */
/* ================================================================= */
:root body.geheel section:has(.br-afsluiter) {
  position: relative; z-index: 1; margin-top: calc(-1 * var(--vel-r)); padding-top: calc(var(--blok-y) + var(--vel-r)); padding-bottom: 24px;
  border-radius: var(--vel-r) var(--vel-r) 0 0; border: 0 !important;
  background: var(--br-ink) !important; background-image: none !important; color: var(--br-cream);
}
:root body.geheel div:has(> .br-afsluiter) {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); column-gap: clamp(32px, 6vw, 96px);
  align-items: center; max-width: 1240px; margin: 0 auto;
}
:root body.geheel div:has(> .br-afsluiter) > .br-afsluiter { grid-column: 1; grid-row: 1; max-width: none; margin: 0; text-align: left; }
/* het beeldmerk, rustig rechts: het gewone beeldmerk zonder iconen (img/beeldmerk-192.png, zoals in het merkboek),
   zonder beweging. De bitmap is 192 px breed; daarom niet groter dan 256 px tonen, anders wordt hij zacht. */
:root body.geheel div:has(> .br-afsluiter)::after {
  content: ""; grid-column: 2; grid-row: 1; justify-self: end; align-self: center;
  width: clamp(200px, 19vw, 256px); aspect-ratio: 1; margin-right: clamp(0px, 5vw, 80px);
  background: url(../img/beeldmerk-192.png) center / contain no-repeat;
}
:root body.geheel .br-afsluiter .section-heading {
  margin: 0 0 22px; max-width: none; color: var(--br-cream); font-size: clamp(36px, 4.8vw, 66px) !important; line-height: 1.06 !important;
}
:root body.geheel .br-afsluiter .accent { color: var(--br-ink); }  /* gouden blok op espresso: tekst blijft bruin */
:root body.geheel .br-afsluiter p { max-width: 46ch; margin: 0 0 30px; font-size: 18px; line-height: 1.55; color: var(--br-cream); opacity: 0.9; }
:root body.geheel .br-afsluiter .br-knoppen { justify-content: flex-start; }
:root body.geheel .br-afsluiter .br-geruststelling {
  justify-content: flex-start; margin: 18px 0 0; max-width: none; font-size: 14px; color: var(--br-cream); opacity: 0.78;
}
:root body.geheel .br-afsluiter .br-geruststelling::before { background: var(--kleur-lichaam, #B8C7AF); }
/* de kleine tweede route onder de hoofdknop: "Liever eerst een vraag? Stuur ons een bericht ->" (de link is crème en
   onderstreept via ".br-afsluiter p a" verderop) */
:root body.geheel .br-afsluiter .br-route-tweede { margin: 22px 0 0; max-width: none; font-size: 16px; line-height: 1.5; opacity: 0.9; }
/* knoppen op espresso: hoofdknop creme gevuld met espresso tekst, de tweede omlijnd in creme */
:root body.geheel .br-afsluiter .btn-primary {
  background: var(--br-cream) !important; color: var(--br-ink) !important; border: 1.5px solid var(--br-cream) !important;
}
:root body.geheel .br-afsluiter .btn-primary:hover { background: var(--br-cream) !important; border-color: var(--br-cream) !important; opacity: 0.88; }
:root body.geheel .br-afsluiter :is(.btn-ghost, .btn-secondary, .btn-outline-brown) {
  background: transparent !important; color: var(--br-cream) !important; border: 1.5px solid var(--br-cream) !important;
}
:root body.geheel .br-afsluiter :is(.btn-ghost, .btn-secondary, .btn-outline-brown):hover { background: rgba(241, 230, 200, 0.12) !important; }
:root body.geheel .br-afsluiter .btn:focus-visible { outline: 2px solid var(--kleur-gevoel, #F3E98C); outline-offset: 3px; }
@media (max-width: 900px) {
  :root body.geheel div:has(> .br-afsluiter) { display: block; }
  :root body.geheel div:has(> .br-afsluiter)::after { display: block; width: 240px; margin: 48px auto 0; }
  :root body.geheel .br-afsluiter .section-heading { font-size: clamp(34px, 9vw, 46px) !important; }
}

/* ================================================================= */
/* SAMENVOEGING (09-10-2026): wat de pagina's samen nog gelijk moest   */
/* ================================================================= */

/* koppen: Sansita 700 zoals op de homepage (huisstijl: gewone zinnen, 700). De paginastijlen hadden 800;
   de kolomtitels in de footer (.col-title) zijn labels en blijven zoals ze zijn. */
:root body.geheel :is(h1, h2, h3):not(.col-title) { font-weight: 700; }

/* de ruimte onder de hero: onder een hero met een ivoren blok erna is de afstand tot het volgende blok overal
   gelijk (40 px + de 92 px boven het blok); komt er een gekleurd blok, dan staat het vel 64 px onder de inhoud */
:root body.geheel :is(.br-p-hero, .br-f-hero, .br-o-hero, .br-r-hero, .br-c-hero, .br-w-hero, .br-ow-hero, .br-home-hero) { padding-bottom: 40px; }
:root body.geheel :is(.br-p-hero, .br-f-hero, .br-o-hero, .br-r-hero, .br-c-hero, .br-w-hero, .br-ow-hero, .br-home-hero):has(+ :is(.sectie-groen, .sectie-blauw, .sectie-geel, .br-section--sand, .bg-sage, .bg-tint-yellow, .bg-tint-green, .bg-zand:not(.br-home-section))) {
  padding-bottom: 64px;
}

/* gekleurde blokken: afgeronde bovenhoeken (32 px), zoals de vellen op de homepage, zonder schaduw. Dat zijn de
   blokken met een tint (sectie-groen, -blauw, -geel) en de zandblokken (.br-section--sand, .bg-sage, .bg-tint-yellow,
   .bg-tint-green, .bg-zand; een .bg-zand op een .br-home-section blijft ivoor en telt dus niet mee). Op een ivoor
   blok ligt het vel er gewoon op; volgt het op een ander gekleurd blok, dan schuift het er een stukje overheen (geen
   ivoren wig in de hoeken). De afsluiter heeft zijn eigen regel (hierboven). */
:root body.geheel :is(.sectie-groen, .sectie-blauw, .sectie-geel, .br-section--sand, .bg-sage, .bg-tint-yellow, .bg-tint-green, .bg-zand:not(.br-home-section)):not(:has(.br-afsluiter)) {
  border-radius: var(--vel-r) var(--vel-r) 0 0; box-shadow: none;
}
:root body.geheel :is(.sectie-groen, .sectie-blauw, .sectie-geel, .br-section--sand, .bg-sage, .bg-tint-yellow, .bg-tint-green, .bg-zand:not(.br-home-section))
  + :is(.sectie-groen, .sectie-blauw, .sectie-geel, .br-section--sand, .bg-sage, .bg-tint-yellow, .bg-tint-green, .bg-zand:not(.br-home-section)):not(:has(.br-afsluiter)) {
  position: relative; margin-top: calc(-1 * var(--vel-r)); padding-top: calc(var(--sp-sectie) + var(--vel-r));
}
@media (max-width: 900px) {
  :root body.geheel :is(.sectie-groen, .sectie-blauw, .sectie-geel, .br-section--sand, .bg-sage, .bg-tint-yellow, .bg-tint-green, .bg-zand:not(.br-home-section))
    + :is(.sectie-groen, .sectie-blauw, .sectie-geel, .br-section--sand, .bg-sage, .bg-tint-yellow, .bg-tint-green, .bg-zand:not(.br-home-section)):not(:has(.br-afsluiter)) {
    padding-top: calc(var(--sp-sectie-mob) + var(--vel-r));
  }
}

/* de afsluiter staat in een raster van 1240 px: staat het in de .br-container zelf (kennisbank, juridisch, planner),
   dan hoort die gewoon 1280 px breed te blijven, anders staat de kop 20 px rechts van de rest van de pagina */
:root body.geheel .br-container:has(> .br-afsluiter) { max-width: 1280px; }

/* een link in de afsluitertekst: creme en onderstreept (de tekst staat op espresso), zoals op de homepage */
:root body.geheel .br-afsluiter p a { color: var(--br-cream); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
:root body.geheel .br-afsluiter p a:hover { opacity: 0.85; }

/* telefoon en tablet: de ruimte boven de hero is overal gelijk (56 px, zoals bij de landingspagina's); de pagina's met
   .page-hero (kennisbank, juridisch, planner, statuspagina's) hadden 88 px, en dat is op een smal scherm te veel lucht */
@media (max-width: 900px) {
  :root body.geheel .page-hero { padding-top: 56px; }
}