/* ================================================================= */
/* B&R VITAAL - HOMEPAGE: HERO, VEL EN DE ZES BRONNEN                 */
/* (index.html, sinds 03-10-2026: de homepage als één doorlopende     */
/* film). Dit bestand: de hero (.film-hero), het vel (.vel) dat er    */
/* overheen schuift en het vastgezette blok met de zes bronnen als    */
/* compacte rijen (.bronnen-baan, sinds 10-10-2026). Het draaibare    */
/* wiel staat in css/wiel.css, de rest van                            */
/* het verhaal (zo werkt het, methode, team, trajecten, vragen,       */
/* afsluiter) in css/home-verhaal.css. De huisstijl in                */
/* css/huisstijl.css laadt als laatste. js/home.js hoort hierbij.     */
/*                                                                    */
/* Let op: huisstijl.css zet bij aanwijzen transform: none op div, li,*/
/* button, a, img, article, figure en label. Beweging loopt daarom    */
/* via de losse eigenschappen translate, rotate en scale, of via een  */
/* span. Zonder JavaScript staat alles in de eindstand; bij "minder   */
/* beweging" is er geen scroll-gekoppelde beweging en geen pin.       */
/* ================================================================= */

body { background-color: var(--br-cream); }

:root {
  --w-cream: #F1E6C8;
  --w-yellow: #F3E98C;
  --w-green: #B8C7AF;
  --w-blue: #8A94B7;
  --w-blue-tekst: #5A658F;
  --w-brown: #4A2B21;
  --w-white: #FFFFFF;
}

/* ---------- SECTIES ---------- */
.br-home-hero, .br-home-section {
  width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw;
  color: var(--w-brown); background: var(--w-cream);
}
.br-home-hero { padding: var(--sp-hero) 4% var(--sp-blok) 4%; overflow: hidden; }
.br-home-section { padding: var(--sp-sectie) 4%; }
.br-home-container { max-width: 1240px; margin: 0 auto; width: 100%; position: relative; }

.section-header-left { max-width: 760px; margin: 0 0 44px 0; }
.section-heading { margin: 0 0 16px 0; color: var(--w-brown); }
.section-lead { font-size: 17px; line-height: 1.6; opacity: 0.9; margin: 0; max-width: var(--leesbreedte); }

/* ---------- DE GEWONE PAGINAHERO (andere pagina's) ----------
   De homepage heeft sinds 03-10-2026 een eigen hero (.film-hero, verderop). Deze gewone hero (tekst links,
   één rustige foto rechts) gebruiken nog de wandelgroep, de ondernemerswandeling, wat we meten en de
   stijlgids; die laden dit bestand ook. Niet weghalen. */
.hero-grid { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 56px; align-items: center; }
.hero-tekst { min-width: 0; }
.br-hero-title { font-size: clamp(38px, 5.4vw, 66px); line-height: 1.04; letter-spacing: -0.02em; color: var(--w-brown); margin: 0 0 18px 0; }
.br-hero-subtitle { font-size: clamp(16px, 1.7vw, 19px); line-height: 1.55; opacity: 0.9; max-width: 44ch; margin: 0 0 26px 0; transition: opacity 0.25s ease; }
.hero-beeld { position: relative; padding: 0; }
.hero-foto-groot { margin: 0; position: relative; aspect-ratio: 4 / 5; max-height: 560px; border-radius: var(--r-kaart); overflow: hidden; background: #E5DABB; }
.hero-foto-groot img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* De foto groeit van 1 naar 1,04 met --hp; zonder script (of bij minder beweging) staat die op 0 of 1 */
.br-home-hero .hero-foto-groot img { animation: none; scale: calc(1 + 0.04 * var(--hp, 1)); }
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .br-home-hero { --hp: 0; }
}
@media (min-width: 769px) {
  .br-home-hero { padding-bottom: 64px; }
}
@media (min-width: 1101px) {
  .hero-beeld { justify-self: end; }
}
@media (max-width: 1100px) {
  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .hero-beeld { max-width: 620px; }
  .hero-foto-groot { aspect-ratio: 16 / 10; max-height: none; }
}
@media (max-width: 768px) {
  .br-home-hero { padding: var(--sp-sectie-mob) 16px 32px 16px; }
  .hero-beeld { max-width: 100%; }
  .section-header-left { margin-bottom: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .br-hero-subtitle { transition: none; }
}
@media print {
  .br-home-hero { --hp: 1 !important; }
}

/* Kleur en icoon per energiebron: stip (hero) en blad (de rijen van de zes bronnen). --tint is de zachte
   achtergrond die het blok krijgt als deze bron de laatst ingeschoven rij is. Kleuren uit het merkboek;
   op de lichte bladen (groen, geel) een donker icoon, op de andere crème. */
:is(.film-stip, .bron-blad)[data-bron] { --lijn: var(--br-cream); }
:is(.film-stip, .bron-blad)[data-bron="zuurstof"] { --c: #8A94B7; --tint: #E2E5EF; --icoon: url(../img/icoon-bron-zuurstof.png); }
:is(.film-stip, .bron-blad)[data-bron="licht"]    { --c: #E7D1A1; --tint: rgba(231, 209, 161, 0.34); --icoon: url(../img/icoon-bron-licht.png); --lijn: var(--br-ink); }
:is(.film-stip, .bron-blad)[data-bron="herstel"]  { --c: #B8C7AF; --tint: #E1EBDC; --icoon: url(../img/icoon-bron-herstel.png); --lijn: var(--br-ink); }
:is(.film-stip, .bron-blad)[data-bron="voeding"]  { --c: #F3E98C; --tint: rgba(243, 233, 140, 0.27); --icoon: url(../img/icoon-bron-voeding.png); --lijn: var(--br-ink); }
:is(.film-stip, .bron-blad)[data-bron="beweging"] { --c: #C4A181; --tint: rgba(196, 161, 129, 0.22); --icoon: url(../img/icoon-bron-beweging.png); }
:is(.film-stip, .bron-blad)[data-bron="sport"]    { --c: #4A2B21; --tint: rgba(74, 43, 33, 0.08);    --icoon: url(../img/icoon-bron-sport.png); }

.film-stip {
  flex: none; display: inline-block; box-sizing: border-box; width: 10px; height: 10px; border-radius: 50%;
  background: var(--c); border: 1px solid rgba(74, 43, 33, 0.28);
}

/* ================================================================= */
/* DE FILM: hero en vel                                               */
/* ================================================================= */
.film { position: relative; --kop: 76px; --rand: 12px; }
@media (max-width: 480px) { .film { --kop: 66px; --rand: 8px; } }

/* ---------- HERO: vult het scherm onder de vaste header en blijft staan ---------- */
/* De header is 76 px hoog, na scrollen 64 px: de hero blijft op 64 px staan, zodat er geen sprong is.
   --fp (0 tot 1 over de eerste schermhoogte, gezet door js/home.js) stuurt het kader, de tekst en de
   feiten. Zonder JavaScript is --fp 0: de beginstand. */
.film-hero {
  --fp: 0;
  position: sticky; top: 64px; z-index: 0;
  height: calc(100vh - var(--kop)); height: calc(100svh - var(--kop)); min-height: 540px;
}
/* Is het vel er helemaal overheen geschoven, dan haalt js/home.js de hero uit beeld (ook voor
   toetsenbord en schermlezer) en schakelt het bijwerken uit. */
.film-hero.is-weg { visibility: hidden; }

.film-kader {
  position: relative; isolation: isolate; overflow: hidden;
  height: calc(100% - 2 * var(--rand)); margin: var(--rand);
  border-radius: calc(24px + 16px * var(--fp)); background: #E5DABB;
  scale: calc(1 - 0.06 * var(--fp)); transform-origin: 50% 32%;
}
/* De foto is 12% hoger dan het kader en zakt iets terwijl je scrolt (parallax); de binnenkomst zoomt hem
   van 1,08 naar 1. Romy staat rechts in beeld. */
.film-foto {
  position: absolute; left: 0; top: -6%; width: 100%; max-width: none; height: 112%;
  object-fit: cover; object-position: 78% 18%;
  translate: 0 calc(var(--fp) * 4.5%);
}
/* Crème verloop van links, zodat de espresso tekst leesbaar is (op telefoon van onder naar boven) */
.film-kader::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg,
    rgba(241, 230, 200, 0.93) 0%, rgba(241, 230, 200, 0.91) 24%, rgba(241, 230, 200, 0.80) 36%,
    rgba(241, 230, 200, 0.48) 47%, rgba(241, 230, 200, 0.16) 55%, rgba(241, 230, 200, 0) 61%);
}

.film-tekst {
  position: absolute; z-index: 2; left: 0; top: 0; bottom: 0; width: min(55%, 700px);
  box-sizing: border-box; padding: clamp(28px, 4vh, 56px) clamp(24px, 4.6vw, 76px) clamp(76px, 11vh, 104px);
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  translate: 0 calc(var(--fp) * -7vh); opacity: calc(1 - 0.8 * var(--fp));
}
body[data-page="home"] .film-tekst .br-hero-title {
  font-size: clamp(34px, min(4.5vw, 7.4vh), 68px) !important; line-height: 1.04 !important; letter-spacing: -0.022em !important;
  margin: 16px 0 16px; text-wrap: balance;
}
.film-w { display: inline-block; }
.film-tekst .br-hero-subtitle {
  font-size: clamp(15px, min(1.35vw, 2.4vh), 19px); line-height: 1.55; max-width: 42ch; margin: 0 0 clamp(14px, 2.6vh, 24px);
  transition: opacity 0.25s ease;
}
.film-tekst .br-mode-switch { margin-bottom: clamp(14px, 2.4vh, 22px); }
.film-tekst .br-geruststelling { margin-top: clamp(10px, 1.6vh, 14px); }

/* De productfeiten: vier labels onder in het kader */
.film-feiten {
  position: absolute; z-index: 2; left: clamp(24px, 4.6vw, 76px); right: clamp(24px, 4.6vw, 76px); bottom: clamp(16px, 2.8vh, 30px);
  margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px 10px; line-height: 1.2;
}
.film-feiten li {
  display: inline-flex; align-items: center; gap: 9px; padding: 8px 15px 8px 12px; border-radius: 999px;
  background: rgba(241, 230, 200, 0.92); border: 1px solid rgba(74, 43, 33, 0.12); color: var(--br-ink);
  font-size: 11.5px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase;
  translate: calc(var(--fp) * var(--fx, 0px)) calc(var(--fp) * -14px);
}
.film-feiten li:nth-child(1) { --fx: -6px; --k: 0; }
.film-feiten li:nth-child(2) { --fx: -12px; --k: 1; }
.film-feiten li:nth-child(3) { --fx: -18px; --k: 2; }
.film-feiten li:nth-child(4) { --fx: -24px; --k: 3; }

/* Binnenkomst bij het laden (onder 1,6 s): de foto zoomt van 1,08 naar 1, de tekst schuift erin. Alleen een
   beginstand (backwards): na afloop regelt de gewone opmaak weer alles, ook de fade van de B2B/B2C-wissel. */
@keyframes film-zoom { from { scale: 1.08; } }
@keyframes film-in { from { opacity: 0; translate: 0 18px; } }
@keyframes film-woord { from { opacity: 0; translate: 0 0.6em; } }
@keyframes film-pil { from { opacity: 0; translate: 0 22px; } }
@media (prefers-reduced-motion: no-preference) {
  .film-foto { animation: film-zoom 1.5s cubic-bezier(0.16, 1, 0.3, 1) backwards; }
  .film-tekst .br-pill-badge { animation: film-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.1s backwards; }
  .film-w { animation: film-woord 0.75s cubic-bezier(0.16, 1, 0.3, 1) calc(0.18s + var(--i, 0) * 0.04s) backwards; }
  .film-tekst .br-hero-subtitle { animation: film-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.62s backwards; }
  .film-tekst .br-mode-switch { animation: film-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.72s backwards; }
  .film-tekst .br-knoppen { animation: film-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.8s backwards; }
  .film-tekst .br-geruststelling { animation: film-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.9s backwards; }
  .film-feiten li { animation: film-pil 0.6s cubic-bezier(0.16, 1, 0.3, 1) calc(0.8s + var(--k, 0) * 0.06s) backwards; }
  .film-hero .accent { animation: brMarkeer 0.8s cubic-bezier(0.65, 0, 0.35, 1) 0.55s backwards; }
}

/* Telefoon en staand scherm: de foto bovenin, het verloop van onder naar boven en de tekst onderin */
@media (max-width: 900px), (max-aspect-ratio: 6 / 5) {
  .film-kader { display: flex; flex-direction: column; justify-content: flex-end; }
  .film-foto { object-position: 80% 0%; }
  .film-kader::before {
    background: linear-gradient(0deg,
      rgba(241, 230, 200, 0.97) 0%, rgba(241, 230, 200, 0.96) 46%, rgba(241, 230, 200, 0.84) 56%,
      rgba(241, 230, 200, 0.45) 66%, rgba(241, 230, 200, 0.12) 74%, rgba(241, 230, 200, 0) 80%);
  }
  .film-tekst {
    position: relative; left: auto; top: auto; bottom: auto; width: auto; padding: 0 clamp(18px, 4vw, 40px) 14px;
    justify-content: flex-end; translate: 0 calc(var(--fp) * -5vh);
  }
  body[data-page="home"] .film-tekst .br-hero-title { font-size: clamp(30px, min(8.4vw, 6.4vh), 52px) !important; margin: 12px 0 12px; }
  .film-tekst .br-hero-subtitle { font-size: 15px; max-width: 52ch; margin-bottom: 12px; }
  .film-tekst .br-mode-switch { margin-bottom: 12px; }
  .film-feiten {
    position: relative; left: auto; right: auto; bottom: auto; z-index: 2;
    padding: 0 clamp(18px, 4vw, 40px) clamp(14px, 2.4vh, 22px); display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  }
  .film-feiten li { padding: 7px 12px 7px 10px; border-radius: 18px; font-size: 10.5px; letter-spacing: 0.07em; gap: 8px; }
}
/* Een laag telefoonscherm: de hero is niet vastgezet maar groeit mee met de tekst, zodat het gezicht zichtbaar blijft */
@media ((max-width: 900px), (max-aspect-ratio: 6 / 5)) and (max-height: 719px) {
  .film-hero { position: relative; top: auto; height: auto; min-height: 0; }
  .film-kader { height: 700px; }
}
/* Telefoon (tot 600 px): de foto is een band bovenaan (ongeveer 46% van de schermhoogte, hoeken 24 px) en de
   tekst, de knoppen en de feitenlabels staan daaronder op de ivoren achtergrond. Geen verloop over het gezicht
   en geen overlap. De hero is hier niet vastgezet en groeit mee met de tekst; de beweging gekoppeld aan het
   scrollen (--fp) staat uit, zodat de tekst niet wegvaagt terwijl hij nog in beeld is. De binnenkomst bij het
   laden (foto zoomt, tekst schuift erin) blijft werken. Staat bewust ná de regel voor een laag scherm. */
@media (max-width: 600px) {
  .film-hero { position: relative; top: auto; height: auto; min-height: 0; }
  .film-kader {
    height: auto; justify-content: flex-start; background: transparent; border-radius: 24px; scale: none;
  }
  .film-kader::before { display: none; }
  /* de band: gezicht van Romy rechts in beeld (zij staat op ongeveer 70% van de breedte, 27% van de hoogte) */
  .film-foto {
    position: relative; left: auto; top: auto; flex: none; width: 100%; height: 46vh; height: 46svh; min-height: 260px;
    border-radius: 24px; object-position: 88% 30%; translate: none;
  }
  .film-tekst {
    padding: 22px calc(16px - var(--rand)) 6px; translate: none; opacity: 1; justify-content: flex-start;
  }
  .film-feiten { padding: 0 calc(16px - var(--rand)) clamp(10px, 2vh, 18px); }
  .film-feiten li { translate: none; background: var(--br-kaart); }
}

/* Een laag breed scherm (laptop): het labelrijtje en de lucht iets krapper */
@media (min-width: 901px) and (min-aspect-ratio: 6 / 5) and (max-height: 760px) {
  .film-tekst { padding-top: 22px; padding-bottom: 68px; }
  .film-tekst .br-pill-badge + .br-hero-title { margin-top: 12px; }
  .film-tekst .br-mode-switch { margin-bottom: 14px; }
  .film-feiten li { padding: 6px 13px 6px 10px; font-size: 11px; }
}

/* ---------- HET VEL: schuift als nieuwe pagina over de hero ---------- */
.vel { position: relative; z-index: 1; background: var(--br-cream); border-radius: var(--vel-r, 32px) var(--vel-r, 32px) 0 0; }

/* Het eerste blok in het vel hoeft de breedte van het scherm niet te forceren: zo vallen de afgeronde
   bovenhoeken van het vel en van de tint precies samen (100vw is breder dan het venster met scrollbalk). */
.vel > #br-bronnen {
  width: auto; left: 0; right: 0; margin-left: 0; margin-right: 0;
  border-radius: var(--vel-r, 32px) var(--vel-r, 32px) 0 0; background-color: transparent; transition: background-color 0.8s ease;
}

/* ================================================================= */
/* DE ZES BRONNEN (#br-bronnen)                                       */
/* ================================================================= */
/* ---------- Eén verticale maatvoering voor de hele homepage ----------
   Hiërarchie (besluit 06-10-2026): de hero en de hoofdknop zijn het belangrijkst; de zes bronnen en het wiel
   zijn het hart (elk hoofdstuk een scherm); zo werkt het en de trajecten zijn de route naar contact; de
   vragen zijn licht; de afsluiter is krachtig (espresso). Alle blokken delen dezelfde maten:
   --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 (altijd onder de inhoud, links),
   --vel-r     afronding van de bovenhoeken van een vel, --vel-over hoever een vel over het vorige blok schuift. */
body[data-page="home"] {
  --blok-y: clamp(64px, 6.4vw, 96px);
  --blok-kop: clamp(28px, 3vw, 40px);
  --blok-slot: clamp(32px, 3vw, 44px);
  --vel-r: 32px;
  --vel-over: 48px;
}
@media (max-width: 900px) {
  body[data-page="home"] { --blok-y: 56px; --blok-kop: 26px; --blok-slot: 32px; --vel-r: 24px; --vel-over: 32px; }
}
body[data-page="home"] .br-home-section { padding-top: var(--blok-y); padding-bottom: var(--blok-y); }
/* Gelijke opbouw van elke blokkop: label, kop, korte inleiding, met vaste maximale breedtes */
body[data-page="home"] .br-home-section .section-header-left { max-width: 760px; margin: 0 0 var(--blok-kop); }
body[data-page="home"] .br-home-section .section-header-left .br-pill-badge { margin: 0 0 14px; }
body[data-page="home"] .br-home-section .section-header-left .section-heading { max-width: 17em; margin: 0 0 14px; }
body[data-page="home"] .br-home-section .section-header-left .section-lead { max-width: 54ch; margin: 0; }
body[data-page="home"] .br-home-section .section-header-left > :last-child { margin-bottom: 0; }
/* Knoppen en pijllinks onder de inhoud van een blok: altijd links, altijd even ver onder de inhoud */
body[data-page="home"] .br-home-section .br-vervolg { margin-top: var(--blok-slot); gap: 16px 28px; }
body[data-page="home"] .br-home-section > .br-home-container > .br-pijl { display: inline-flex; margin-top: var(--blok-slot); }
@media (max-width: 768px) {
  .br-home-section { padding: var(--sp-sectie-mob) 16px; }
}

/* De korte binnenkomst van het wiel schuift bladen buiten het wiel; alleen de x-as wordt geknipt (clip laat
   de y-as ongemoeid en maakt van het blok geen scrollcontainer, dus sticky blijft werken). */
#br-bronnen { overflow-x: clip; }

/* Het vel kleurt per hoofdstuk mee: js/home.js zet data-actief op #br-bronnen op het hoofdstuk dat midden
   in beeld staat. Tussen de kop en het wiel blijft het crème. */
#br-bronnen[data-actief="zuurstof"] { background-color: #E2E5EF; }
#br-bronnen[data-actief="licht"]    { background-color: rgba(231, 209, 161, 0.34); }
#br-bronnen[data-actief="herstel"]  { background-color: #E1EBDC; }
#br-bronnen[data-actief="voeding"]  { background-color: rgba(243, 233, 140, 0.27); }
#br-bronnen[data-actief="beweging"] { background-color: rgba(196, 161, 129, 0.22); }
#br-bronnen[data-actief="sport"]    { background-color: rgba(74, 43, 33, 0.08); }


/* ---------- De zes bronnen: één vastgezet blok met compacte rijen (sinds 10-10-2026) ----------
   Geen foto's per bron en geen schermhoge hoofdstukken meer. Links staat de blokkop met de knoppen
   (.bronnen-kop, .bronnen-acties), rechts staan zes rijen (.bronnen-rij) die bij het scrollen één voor één
   inschuiven: het blad en het icoon van de bron, het nummer, de naam, één korte zin en een link.
   Op een breed en hoog scherm (vanaf 901 px breed, 620 px hoog, met beweging en JavaScript) is .bronnen-baan
   een scherm plus 6 x 32svh hoog en blijft .bronnen-podium staan (sticky) terwijl js/home.js per rij --rv
   (0 tot 1) zet. Op een telefoon, een laag scherm, bij minder beweging en zonder JavaScript is het een gewone
   lijst: de rijen komen dan in bij in beeld komen (is-wacht en is-in door js/home.js).
   Op de baan mag geen voorouder overflow hidden of auto hebben (clip mag, #br-bronnen heeft overflow-x: clip). */
.bronnen-baan { position: relative; margin-bottom: clamp(32px, 5vw, 56px); }
.bronnen-podium { display: grid; grid-template-columns: minmax(0, 1fr); }
.bronnen-lijst { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--br-line); }

/* een rij: blad met icoon, tekst, link. --W is de maat van het wiel waaruit het blad is gesneden; --bw en --bh
   (bij .bron-blad hieronder) zijn breedte en hoogte van het blad als deel daarvan. De eerste kolom is een vast
   vak, zodat de tekst van alle rijen onder elkaar begint. */
.bronnen-rij {
  --W: clamp(104px, 30vw, 128px);
  display: grid; grid-template-columns: calc(var(--W) * 0.6) minmax(0, 1fr); column-gap: clamp(14px, 4vw, 22px); align-items: center;
  --rij-pad: 14px; padding: var(--rij-pad) 0; min-height: calc(var(--W) * 0.58 + 2 * var(--rij-pad)); border-bottom: 1px solid var(--br-line);
}
.rij-tekst { min-width: 0; }
.rij-kop { display: flex; align-items: baseline; gap: 12px; }
.rij-nr { flex: none; font-size: 12px; opacity: 0.6; }
.bronnen-rij h3 { margin: 0; font-size: clamp(25px, 6.4vw, 30px); line-height: 1.1; letter-spacing: -0.01em; }
.bronnen-rij p { margin: 5px 0 0; font-size: 15.5px; line-height: 1.45; max-width: 46ch; }
.bronnen-rij .rij-link { grid-column: 2; justify-self: start; margin-top: 8px; font-size: 15px; white-space: nowrap; }
.bronnen-acties { margin-top: var(--blok-slot); }

/* Het blad van de bron: dezelfde bitmap als in het wiel (css/wiel.css), met het icoon als eigen laagje erin. De
   maten (--bw, --bh: breedte en hoogte als deel van het wiel) horen bij de bitmaps; het icoonvak (--il, --it,
   --iw, --ih) en de bitmaps zelf komen uit css/wiel.css. */
.bron-blad {
  position: relative; display: block; justify-self: center; pointer-events: none;
  width: calc(var(--bw) * var(--W)); height: calc(var(--bh) * var(--W));
  background: var(--blad-png) 0 0 / 100% 100% no-repeat;
}
.bron-blad > .wiel-icoon {
  position: absolute; left: var(--il); top: var(--it); width: var(--iw); height: var(--ih); display: block;
  background: var(--icoon-png) 0 0 / 100% 100% no-repeat;
}
.bron-blad[data-bron="zuurstof"] { --bw: 0.5520; --bh: 0.3970; }
.bron-blad[data-bron="licht"]    { --bw: 0.3866; --bh: 0.5198; }
.bron-blad[data-bron="herstel"]  { --bw: 0.4490; --bh: 0.5142; }
.bron-blad[data-bron="voeding"]  { --bw: 0.5813; --bh: 0.3582; }
.bron-blad[data-bron="beweging"] { --bw: 0.5284; --bh: 0.5473; }
.bron-blad[data-bron="sport"]    { --bw: 0.4764; --bh: 0.5161; }

/* Telefoon en gewone lijst: de rijen komen één voor één in bij in beeld komen (js/home.js zet is-wacht op rijen die
   bij het laden onder de vouw staan en is-in zodra ze in beeld komen). Het blad draait mee in. */
@media (prefers-reduced-motion: no-preference) {
  .bronnen-rij.is-wacht { opacity: 0; translate: 0 28px; }
  .bronnen-rij.is-wacht .bron-blad { rotate: -60deg; scale: 0.6; }
  .bronnen-rij.is-wacht .bron-blad > .wiel-icoon { rotate: 60deg; }
  .bronnen-rij.is-wacht.is-in { opacity: 1; translate: 0 0; transition: opacity 0.7s ease, translate 0.9s cubic-bezier(0.16, 1, 0.3, 1); }
  .bronnen-rij.is-wacht.is-in .bron-blad { rotate: 0deg; scale: 1; transition: rotate 1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.12s, scale 1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.12s; }
  .bronnen-rij.is-wacht.is-in .bron-blad > .wiel-icoon { rotate: 0deg; transition: rotate 1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.12s; }
}

/* Breed scherm: kop en knoppen links, de rijen rechts. De rij krijgt zijn link rechts in dezelfde regel. */
@media (min-width: 901px) {
  .bronnen-podium { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr; column-gap: clamp(32px, 5vw, 80px); align-items: start; }
  body[data-page="home"] #br-bronnen .bronnen-kop { grid-column: 1; grid-row: 1; margin-bottom: 0; }
  .bronnen-lijst { grid-column: 2; grid-row: 1 / span 2; }
  .bronnen-acties { grid-column: 1; grid-row: 2; align-self: start; }
  .bronnen-rij { --W: clamp(104px, 11vw, 140px); grid-template-columns: calc(var(--W) * 0.6) minmax(0, 1fr) auto; --rij-pad: 16px; }
  .bronnen-rij .rij-link { grid-column: 3; grid-row: 1; margin-top: 0; justify-self: end; }
}
/* een smaller breed scherm (tablet liggend): de rijen krijgen meer ruimte, zodat de zinnen op twee regels blijven */
@media (min-width: 901px) and (max-width: 1100px) {
  .bronnen-podium { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
}

/* Breed en hoog genoeg, met beweging en JavaScript: de baan met het vastgezette podium. De baan is het podium
   (het scherm onder de vaste header van 64 px) plus 6 x 32svh scrollen: per rij ongeveer 32svh. Kop en knoppen
   staan links in het midden, de rijen rechts in het midden. js/home.js zet is-baan op de baan en --rv per rij.
   Zonder is-baan (script nog niet gestart) staan de rijen er gewoon, dus ook herladen midden in de baan klopt. */
@supports (translate: 0) {
  @media (min-width: 901px) and (min-height: 620px) and (prefers-reduced-motion: no-preference) and (scripting: enabled) {
    .bronnen-baan { height: calc(100vh - 64px + 192vh); height: calc(100svh - 64px + 192svh); margin-bottom: 0; }
    .bronnen-podium {
      position: sticky; top: 64px; height: calc(100vh - 64px); height: calc(100svh - 64px);
      grid-template-rows: minmax(0, 1fr) auto auto minmax(0, 1fr); align-items: center; padding-block: 8px;
    }
    body[data-page="home"] #br-bronnen .bronnen-kop { grid-row: 2; align-self: end; }
    .bronnen-acties { grid-row: 3; align-self: start; }
    .bronnen-lijst { grid-row: 1 / -1; align-self: center; }
    /* de maat van het blad volgt de hoogte van het scherm, zodat zes rijen altijd in het podium passen */
    .bronnen-rij {
      --W: clamp(100px, calc((100vh - 64px - 150px) / 6 * 1.55), 150px);
      --W: clamp(100px, calc((100svh - 64px - 150px) / 6 * 1.55), 150px);
      --rij-pad: clamp(8px, 1.5vh, 16px); --rij-pad: clamp(8px, 1.5svh, 16px);
    }
    .bronnen-rij h3 { font-size: clamp(22px, 2.3vw, 30px); }

    /* het inschuiven: --rv loopt per rij van 0 (nog niet) tot 1 (staat er); het blad draait en groeit mee */
    .bronnen-baan.is-baan .bronnen-rij { opacity: var(--rv, 1); translate: calc((1 - var(--rv, 1)) * 64px) 0; }
    .bronnen-baan.is-baan .bronnen-rij .bron-blad { rotate: calc((1 - var(--rv, 1)) * -70deg); scale: calc(0.5 + 0.5 * var(--rv, 1)); }
    .bronnen-baan.is-baan .bronnen-rij .bron-blad > .wiel-icoon { rotate: calc((1 - var(--rv, 1)) * 70deg); }
  }
}
/* een laag scherm (laptop): de rijen iets compacter, en in de baan wat lucht onderin, zodat de knop om naar boven
   te gaan (rechtsonder) de laatste link niet bedekt */
@media (min-width: 901px) and (max-height: 760px) {
  .bronnen-rij { --rij-pad: 8px; }
  .bronnen-rij h3 { font-size: 22px; }
  .bronnen-rij p { margin-top: 3px; font-size: 14.5px; line-height: 1.4; }
}
@supports (translate: 0) {
  @media (min-width: 901px) and (min-height: 620px) and (max-height: 760px) and (prefers-reduced-motion: no-preference) and (scripting: enabled) {
    .bronnen-podium { padding-block: 8px 52px; }
  }
}

/* ---------- Afdrukken ---------- */
@media print {
  .film-hero { position: static; height: auto; min-height: 0; }
  .film-hero .film-kader { height: 560px; }
  .film-kader, .film-tekst, .film-feiten li { scale: none; translate: none; opacity: 1; }
  .bronnen-baan { height: auto !important; }
  .bronnen-podium { position: static !important; height: auto !important; }
  .bronnen-rij, .bronnen-rij .bron-blad, .bronnen-rij .bron-blad > .wiel-icoon { scale: none !important; translate: none !important; rotate: none !important; opacity: 1 !important; }
}

/* ---------- Minder beweging: geen scroll-gekoppelde beweging, geen pin ---------- */
@media (prefers-reduced-motion: reduce) {
  .film-hero { position: relative; top: auto; }
  .film-kader, .film-tekst, .film-foto, .film-feiten li { scale: none; translate: none; opacity: 1; }
  .film-kader { border-radius: 24px; }
  .film-tekst .br-hero-subtitle, #br-bronnen, .vel > #br-bronnen { transition: none; }
}
/* Zonder JavaScript: ook geen pin, de hero staat gewoon boven de rest */
@media (scripting: none) {
  .film-hero { position: relative; top: auto; }
}