/* Human Dimensions — statische nabouw van humandimensions.nl
   Waarden gemeten aan de live site op 1440px breed (Elementor-kit 6), zie README. */

/* ---------- Fonts ---------- */
@font-face { font-family: "Lasiver"; src: url(../fonts/type_dynamic_-_lasiver_thin-webfont.woff2) format("woff2"); font-weight: 100; font-display: swap; }
@font-face { font-family: "Lasiver"; src: url(../fonts/Type-Dynamic-Lasiver.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Lasiver"; src: url(../fonts/Type-Dynamic-Lasiver-Medium.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Lasiver"; src: url(../fonts/type_dynamic_-_lasiver_bold-webfont.woff2) format("woff2"); font-weight: 600 800; font-display: swap; }
@font-face { font-family: "Lasiver"; src: url(../fonts/type_dynamic_-_lasiver_black-webfont.woff2) format("woff2"); font-weight: 900; font-display: swap; }
@font-face { font-family: "Summer loving"; src: url(../fonts/SummerLoving.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "feeling_passionate"; src: url(../fonts/feeling_passionate-webfont.woff2) format("woff2"); font-display: swap; }

/* ---------- Tokens ---------- */
:root {
  --donker: #151A1A;     /* primary: koppen, footer */
  --goud: #C2AB69;       /* secondary/accent: knoppen, links, accenten */
  --creme: #F6F4F1;      /* zandkleurige secties */
  --wit: #FFFFFF;
  --tekst: #333333;      /* Elementor-standaard bodytekst */
  --zwart: #000000;
  --lijn: rgba(21, 26, 26, .15);
  --font: "Lasiver", system-ui, sans-serif;
  --hand: "Summer loving", "Lasiver", cursive;
  --hand2: "feeling_passionate", "Lasiver", cursive;
  --inhoud: 1140px;
  --kop-h: 103px;
  --rand: 5px;
  --kaart: 15px;
  --goot: clamp(16px, 3.5vw, 24px);
  /* Eén knopsysteem voor de hele site */
  --knop-py: clamp(12px, 1.18vw, 17px);
  --knop-px: clamp(20px, 1.94vw, 28px);
  --knop-fs: var(--t-15);
  /* Ruimteschaal: elke stap schaalt mee met de schermbreedte (waarde = maat op 1440px) */
  --r-2: 2px;
  --r-4: 4px;
  --r-6: 6px;
  --r-8: 8px;
  --r-10: 10px;
  --r-12: 12px;
  --r-16: 16px;
  --r-20: clamp(16px, 1.389vw, 20px);
  --r-24: clamp(16px, 1.667vw, 24px);
  --r-30: clamp(16px, 2.083vw, 30px);
  --r-36: clamp(18px, 2.500vw, 36px);
  --r-40: clamp(20px, 2.778vw, 40px);
  --r-50: clamp(25px, 3.472vw, 50px);
  --r-60: clamp(30px, 4.167vw, 60px);
  --r-72: clamp(36px, 5.000vw, 72px);
  --r-86: clamp(43px, 5.972vw, 86px);
  --r-100: clamp(50px, 6.944vw, 100px);
  --r-120: clamp(60px, 8.333vw, 120px);
  --r-144: clamp(72px, 10.000vw, 144px);
  /* Typeschaal */
  --t-12: 12px;
  --t-13: 13px;
  --t-14: 14px;
  --t-15: 15px;
  --t-16: 16px;
  --t-18: clamp(16px, 1.250vw, 18px);
  --t-20: clamp(17px, 1.389vw, 20px);
  --t-22: clamp(18px, 1.528vw, 22px);
  --t-25: clamp(20px, 1.736vw, 25px);
  --t-30: clamp(23px, 2.083vw, 30px);
  --t-35: clamp(26px, 2.431vw, 35px);
  --t-40: clamp(28px, 2.778vw, 40px);
  --t-45: clamp(30px, 3.125vw, 45px);
  --t-50: clamp(32px, 3.472vw, 50px);
  --t-56: clamp(34px, 3.889vw, 56px);
  --t-60: clamp(36px, 4.167vw, 60px);
  --t-70: clamp(40px, 4.861vw, 70px);
  --t-80: clamp(44px, 5.556vw, 80px);   /* minimale afstand tot de schermrand voor tekst en knoppen */
}

/* Lokale custom properties niet laten doorlekken naar geneste blokken. */
@property --g   { syntax: "*"; inherits: false; }
@property --b   { syntax: "*"; inherits: false; }
@property --bg  { syntax: "*"; inherits: false; }
@property --beeld { syntax: "*"; inherits: false; }
@property --ov  { syntax: "*"; inherits: false; }
@property --ovo { syntax: "*"; inherits: false; }
@property --mh  { syntax: "*"; inherits: false; }
@property --w   { syntax: "*"; inherits: false; }
@property --fs  { syntax: "*"; inherits: false; }
@property --kol { syntax: "*"; inherits: false; }
@property --mw  { syntax: "*"; inherits: false; }
@property --pt  { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --pr  { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --pb  { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --pl  { syntax: "<length>"; inherits: false; initial-value: 0px; }

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--kop-h) + 10px); }
body { margin: 0; font-family: var(--font); font-size: 15px; line-height: 1.5; color: var(--tekst); background: var(--wit); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, video, svg, iframe { max-width: 100%; }
img { height: auto; display: block; }
a { color: var(--goud); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font); font-weight: 400; color: var(--donker); margin: 0; line-height: 1.1; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0 0 1em; padding-left: 1.25em; }
strong, b { font-weight: 700; }
:focus-visible { outline: 2px solid var(--goud); outline-offset: 2px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.naar-inhoud { position: absolute; left: -9999px; top: 0; z-index: 1000; background: var(--donker); color: var(--wit); padding: 10px 16px; }
.naar-inhoud:focus { left: 10px; top: 10px; }

/* ---------- Header ---------- */
.kop-balk { position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--kop-h); border-bottom: .5px solid var(--wit); }
/* Achtergrond zoals live (gemeten), op een pseudo-element zodat het vaste mobiele menu
   niet in de header wordt opgesloten. */
.kop-balk::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(271deg, rgba(29, 29, 29, .65) 68%, rgba(0, 0, 0, .66) 100%);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.kop-binnen { width: min(100% - 2 * var(--goot), var(--inhoud)); height: 100%; margin: 0 auto; display: flex; align-items: center; gap: clamp(20px, 2.4vw, 40px); }
.logo { flex: 0 0 auto; display: block; }
.logo img { width: clamp(150px, 13vw, 187px); height: auto; }
.hoofdmenu { flex: 1 1 auto; display: flex; justify-content: center; height: 100%; min-width: 0; }
.menu { list-style: none; margin: 0; padding: 0; display: flex; align-items: stretch; justify-content: space-between; gap: clamp(18px, 2.4vw, 40px); height: 100%; }
.menu-item { position: static; display: flex; }
.menu-top { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: var(--wit); font-size: 14px; font-weight: 700; line-height: 21px; padding: 0; transition: color .15s; }
.menu-top span { display: block; white-space: nowrap; }
.menu-top:hover, .menu-item.is-actief > .menu-top, .menu-item:focus-within > .menu-top, .menu-item.heeft-sub:hover > .menu-top { color: var(--goud); text-decoration: none; }
.kop-contact { flex: 0 0 auto; font-weight: 500; padding: 17px 34px; }
.hoofdmenu .menu-contact-mobiel { display: none; }
.hamburger { display: none; }

/* Megamenu zoals live: wit paneel onder de header, categorieën links met scheidingslijn,
   de pagina's van de gekozen categorie rechts. Rechts staat altijd een gevulde lijst. */
.mega {
  position: absolute; top: var(--kop-h); left: 50%; width: min(830px, 100vw - 2 * var(--goot));
  transform: translate(-50%, -6px); background: var(--wit); border-radius: 0 0 8px 8px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .18); display: grid; grid-template-columns: 1fr 1fr;
  padding: 30px; opacity: 0; visibility: hidden; transition: opacity .18s, transform .18s, visibility .18s;
}
.menu-item.heeft-sub:hover > .mega, .menu-item.is-open > .mega, .menu-item.heeft-sub:focus-within > .mega { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.menu-item:has(> .mega--smal) { position: relative; }
.mega--smal { width: 300px; grid-template-columns: 1fr; padding: 20px; }
.mega ul { list-style: none; margin: 0; padding: 0; }
.mega a { color: var(--donker); font-size: 14px; line-height: 1.3; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 10px; border-radius: 4px; transition: background .15s, color .15s; }
.mega a:hover, .mega a.is-actief, .mega a[aria-current="page"] { text-decoration: none; color: var(--goud); }   /* actief = zelfde als hover */
/* .mega ul zet padding op 0; daarom hier specifieker, zodat de actieve balk nooit tegen de lijn komt */
.mega .mega-links { padding-right: 24px; border-right: 1px solid var(--lijn); }
.mega-groep[aria-current="true"] { background: var(--creme); }
.mega-groep .pijl { color: var(--goud); }
.mega-rechts { padding-left: 24px; }
.mega-sub-titel { font-size: 13px; color: var(--donker); margin: 6px 10px 8px; }
.mega-lijst a { padding: 9px 10px; }

/* ---------- Knoppen ---------- */
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em; font-family: var(--font); font-size: var(--knop-fs); font-weight: 400; line-height: 1;
  padding: var(--knop-py) var(--knop-px); white-space: nowrap; border-radius: var(--rand); border: 0; cursor: pointer; text-align: center; transition: background-color .2s, color .2s;
  background: var(--goud); color: var(--wit);
}
.knop:hover { text-decoration: none; background: var(--donker); color: var(--wit); }
.knop--goud-donker { background: var(--goud); color: var(--wit); }   /* gelijk aan goud: één goudvariant */
.knop--wit { background: var(--wit); color: var(--donker); }   /* zelfde tekstkleur als crème */
.knop--wit:hover { background: var(--goud); color: var(--wit); }
.knop--creme { background: var(--creme); color: var(--donker); }
.knop--creme:hover { background: var(--goud); color: var(--wit); }
.knop--donker { background: var(--donker); color: var(--wit); }
.knop--donker:hover { background: var(--goud); }
.knop--rand { background: transparent; color: var(--donker); border: 1px solid currentColor; }
.knop--rand:hover { background: var(--donker); color: var(--wit); border-color: var(--donker); }
.knop--link { background: none; color: var(--donker); padding: 0; font-weight: 500; text-decoration: underline; text-underline-offset: 4px; }
.knop--link:hover { background: none; color: var(--goud); }
.knop--link .pijl { text-decoration: none; }
.op-donker .knop--link, .op-donker .knop--rand { color: var(--wit); }

/* ---------- Layout: secties en dozen ---------- */
main { display: block; }
.zonder-hero main { padding-top: var(--kop-h); }
.sectie, .doos, .binnen { display: flex; flex-direction: column; gap: var(--g, 20px); min-width: 0; position: relative; }
.binnen { width: min(100%, var(--mw, var(--inhoud))); margin-inline: auto; }
/* goot alleen op sectieniveau (en bij volle-breedte blokken direct daarin), niet in kaarten */
.sectie > .binnen { width: min(100% - 2 * var(--goot), var(--mw, var(--inhoud))); }

.sectie > .binnen, .doos > .binnen { flex: 1 1 auto; }
.rij { flex-direction: row; }
.wrap { flex-wrap: wrap; }
.rij { flex-wrap: wrap; }
.rij > .doos { flex: 1 1 calc(var(--b, 50%) - 3rem); min-width: min(100%, var(--kmin, 16rem)); }
.rij--mob > .doos { --kmin: 0px; }
.rij--vrij > .doos { flex-grow: 0; }
@media (max-width: 767px) { .rij--vrij:not(.rij--mob) > .doos { flex-grow: 1; flex-basis: 100%; } }
.rij.rij--klein, .rij.rij--mob { flex-wrap: wrap; }
.rij > :not(.doos) { flex: 0 1 auto; min-width: 0; }
.rij > .tekst, .rij > .kop { flex: 1 1 14rem; }
.rij.rij--klein > * { flex: 0 0 auto; }
.rij.rij--klein > .kop, .rij.rij--klein > .tekst { flex: 1 1 auto; min-width: min(100%, 12rem); }
.raster { display: grid; grid-template-columns: repeat(var(--kol, 2), minmax(0, 1fr)); }
.pad { padding: var(--pt) var(--pr) var(--pb) var(--pl); }
.bg { background-color: var(--bg); }
.beeldbg { background-image: var(--beeld); background-size: cover; background-position: center; background-repeat: no-repeat; }
.overlay::before { content: ""; position: absolute; inset: 0; background: var(--ov); opacity: var(--ovo, 1); border-radius: inherit; pointer-events: none; z-index: 0; }
.overlay > * { position: relative; z-index: 1; }
.rond { }  /* geen overflow:hidden: live steken avatars e.d. buiten de afgeronde rand */
.minh { min-height: var(--mh); }
.heeft-video { overflow: hidden; }
.bgvideo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; pointer-events: none; }
.heeft-video > :not(.bgvideo) { position: relative; z-index: 1; }
.ruimte { height: var(--h); flex: 0 0 auto; }
.lijn { border: 0; border-top: 1px solid var(--lijn); width: 100%; margin: 0; }
a.doos, a.sectie, a.groeplink { color: inherit; text-decoration: none; }
a.groeplink { display: contents; }

/* ---------- Typografie ---------- */
.kop { margin: 0; overflow-wrap: break-word; text-wrap: balance; line-height: 1.25; }
/* Typografisch systeem: regelhoogte hangt af van de grootte, niet van de pagina */
.kop:is(.t-30, .t-40, .t-50, .t-60, .t-70, .t-80) { line-height: 1.1; }
.tekst { line-height: 1.65; }
.tekst.t-13 { line-height: 1.55; }
.tekst:is(.t-22, .t-25, .t-30, .t-40, .t-50) { line-height: 1.35; }
.t-12 { font-size: var(--t-12); }
.t-13 { font-size: var(--t-13); }
.t-14 { font-size: var(--t-14); }
.t-15 { font-size: var(--t-15); }
.t-16 { font-size: var(--t-16); }
.t-18 { font-size: var(--t-18); }
.t-20 { font-size: var(--t-20); }
.t-22 { font-size: var(--t-22); }
.t-25 { font-size: var(--t-25); }
.t-30 { font-size: var(--t-30); }
.t-35 { font-size: var(--t-35); }
.t-40 { font-size: var(--t-40); }
.t-45 { font-size: var(--t-45); }
.t-50 { font-size: var(--t-50); }
.t-56 { font-size: var(--t-56); }
.t-60 { font-size: var(--t-60); }
.t-70 { font-size: var(--t-70); }
.t-80 { font-size: var(--t-80); }
.kop.hand { font-family: var(--hand); font-weight: 400; line-height: .85; letter-spacing: .5px; }   /* penseelletters zijn laag: live 0.8 */
/* ondertitel direct onder een kop: overal dezelfde maat, kleur en gewicht */
.kop.ondertitel { font-size: var(--t-25); font-weight: 400; line-height: 1.25; color: var(--goud); }
.op-donker .kop.ondertitel, .beeldbg .kop.ondertitel, .kop.ondertitel--licht { color: var(--wit); }   /* op foto of donker vlak: wit, anders valt goud weg */
.kop.hand2 { font-family: var(--hand2); font-weight: 400; line-height: 1.35; letter-spacing: 1px; }
.kop a { color: inherit; }
.tekst { min-width: 0; overflow-wrap: break-word; }
/* koppen in opgemaakte tekst: zelfde schaal en gewicht als de losse koppen */
.tekst :is(h1, h2, h3, h4, h5, h6) { margin: 1.4em 0 .5em; font-weight: 500; line-height: 1.25; color: var(--donker); }
.tekst > :is(h1, h2, h3, h4, h5, h6):first-child { margin-top: 0; }
.tekst h2 { font-size: var(--t-30); line-height: 1.1; }
/* H1 = de eerste titel van de pagina: altijd handschrift, ook in opgemaakte tekst */
.tekst h1 { font-family: var(--hand); font-size: var(--t-80); font-weight: 400; line-height: .85; letter-spacing: .5px; }
.tekst h3 { font-size: var(--t-25); }
.tekst h4 { font-size: var(--t-22); }
.tekst :is(h5, h6) { font-size: var(--t-18); }
.tekst a { text-decoration: underline; text-underline-offset: 3px; }
.tekst img { border-radius: 15px; margin: 1em 0; }
.tekst blockquote { margin: 1em 0; padding-left: 1em; border-left: 3px solid var(--goud); font-style: italic; }
.tekst iframe { width: 100%; aspect-ratio: 16/9; border: 0; border-radius: 10px; }
.tekst ul li::marker { color: var(--goud); }
.op-donker, .op-donker .tekst, .op-donker .kop { color: var(--wit); }

/* ---------- Beelden en media ---------- */
.beeld { width: var(--w, auto); max-width: 100%; height: auto; }
.beeld.vol { width: 100%; max-width: var(--w, 100%); }
.beeld.midden { margin-inline: auto; }
.beeld.rechts { margin-left: auto; }
.beeldlink { display: block; }
figure { margin: 0; }
figcaption { font-size: 13px; margin-top: 6px; opacity: .8; }
.icoon { display: inline-flex; width: var(--w, 24px); color: var(--goud); }
.icoon svg { width: 100%; height: auto; fill: currentColor; }
.video { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: var(--donker); }
.video iframe, .video video, .video-start img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.video-start { all: unset; position: absolute; inset: 0; cursor: pointer; }
.video-knop { position: absolute; left: 50%; top: 50%; width: 68px; height: 68px; margin: -34px 0 0 -34px; border-radius: 50%; background: rgba(21, 26, 26, .75); transition: background .2s; }
.video-knop::after { content: ""; position: absolute; left: 27px; top: 21px; border-style: solid; border-width: 13px 0 13px 21px; border-color: transparent transparent transparent var(--wit); }
.video-start:hover .video-knop, .video-start:focus-visible .video-knop { background: var(--goud); }
.audio { width: 100%; max-width: 420px; }

/* ---------- Icoonlijsten ---------- */
.ikonen { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.ikonen--rij { flex-direction: row; flex-wrap: wrap; gap: 8px 20px; }
.ikonen li > a, .ikonen li { display: flex; align-items: flex-start; gap: 10px; color: inherit; }
.lijst-ico { flex: 0 0 auto; width: 18px; color: var(--goud); display: inline-flex; padding-top: 2px; }
.lijst-ico svg { width: 100%; height: auto; fill: currentColor; }

/* ---------- Lijstgrids (JetEngine) en rails ---------- */
.lijstgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, max(var(--imin, 220px), calc((100% - (var(--kol, 3) - 1) * var(--gap, 20px)) / var(--kol, 3)))), 1fr)); gap: var(--gap, 20px); width: 100%; }
.lijstgrid > .item, .rail-spoor > .item { display: flex; flex-direction: column; min-width: 0; }
.lijstgrid > .item > .doos, .rail-spoor > .item > .doos { flex: 1 1 auto; }
.rail { position: relative; width: 100%; }
.rail-spoor { --kol: inherit; --imin: inherit; display: grid; grid-auto-flow: column; grid-auto-columns: max(min(85%, 20rem), calc((100% - (var(--kol, 3) - 1) * var(--gap, 20px)) / var(--kol, 3))); gap: var(--gap, 20px); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-behavior: smooth; }
.rail-spoor::-webkit-scrollbar { display: none; }
.rail-spoor > .item { scroll-snap-align: start; }
.rail-pijl { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--goud); color: var(--wit); font-size: 16px; cursor: pointer; display: grid; place-items: center; }
.rail-pijl:hover { background: var(--donker); }
.rail-pijl--terug { left: 6px; }
.rail-pijl--verder { right: 6px; }
.rail-pijl[disabled] { opacity: .35; cursor: default; }
.rail.past .rail-pijl { display: none; }

/* ---------- Tabs en accordeons ---------- */
.tabs { width: 100%; }
.tabs-knoppen { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.tabs-knoppen button { font: inherit; font-weight: 500; border: 1px solid var(--goud); background: transparent; color: var(--donker); padding: 10px 18px; border-radius: var(--rand); cursor: pointer; }
.tabs-knoppen button[aria-selected="true"] { background: var(--goud); color: var(--wit); }
.accordeon { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.acc { border-bottom: 1px solid var(--lijn); }
.acc summary { cursor: pointer; list-style: none; padding: 14px 36px 14px 0; font-size: 18px; font-weight: 500; color: var(--donker); position: relative; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); color: var(--goud); font-size: 24px; line-height: 1; }
.acc[open] summary::after { content: "–"; }
.acc-inhoud { padding: 0 0 18px; }

/* ---------- Tabellen (startdata CoachView) ---------- */
.tabelwikkel, .ingesloten:has(table) { width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { background: var(--goud); color: var(--wit); text-align: left; font-weight: 500; padding: 14px 16px; }
td { padding: 14px 16px; border-bottom: 1px solid var(--lijn); background: var(--wit); }
tr:nth-child(even) td { background: var(--creme); }
td img { border-radius: 50%; width: 36px; height: 36px; margin: 0; object-fit: cover; }
td a { color: var(--goud); }

/* ---------- Agenda (EventON) — gemeten aan de live lijst ---------- */
.agenda { list-style: none; margin: 0; padding: 0; width: 100%; }
.agenda li { border-top: 1px solid #AAAAAA; min-height: 96px; }
.agenda a { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding: 30px 10px 10px; color: #202124; }
.agenda a:hover { text-decoration: none; }
.agenda a:hover strong { color: var(--goud); }
.agenda-tekst { display: flex; flex-direction: column; gap: 3px; }
.agenda-tekst strong { font-weight: 500; font-size: 15px; line-height: 18px; }
.agenda-sub { font-size: 14px; line-height: 16.8px; color: #202124; }
.agenda-datum { flex: 0 0 auto; color: #BFAB72; text-transform: lowercase; text-align: center; font-size: 25px; font-weight: 300; line-height: 27.5px; }
.agenda-datum b { display: block; font-size: 25px; font-weight: 300; }

/* ---------- Hotspots (dorpsplein) ---------- */
.hotspots { position: relative; width: 100%; }
.hotspots img { width: 100%; }
.hotspot { position: absolute; transform: translate(-10%, -50%); background: var(--goud); color: var(--wit); font-size: 13px; font-weight: 700; padding: 7px 10px; border-radius: 3px; white-space: nowrap; box-shadow: 0 4px 12px rgba(0, 0, 0, .15); }
.hotspot:hover { background: var(--donker); text-decoration: none; }

/* ---------- Formulieren ---------- */
.formulier { display: flex; flex-wrap: wrap; gap: 14px 16px; width: 100%; }
.veld { flex: 1 1 100%; display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--donker); }
.veld--half { flex: 1 1 calc(50% - 8px); }
.veld input, .veld textarea, .veld select { font: inherit; font-size: 15px; color: var(--donker); background: var(--wit); border: 1px solid #E3DED5; border-radius: var(--rand); padding: 13px 14px; width: 100%; }
.veld input:focus, .veld textarea:focus, .veld select:focus { outline: 2px solid var(--goud); outline-offset: 0; border-color: var(--goud); }
.veld--vink { flex-direction: row; align-items: flex-start; gap: 8px; }
.veld--vink input { width: auto; margin-top: 3px; accent-color: var(--goud); }
.formulier .knop { margin-top: 4px; }
.formulier-melding { flex: 1 1 100%; margin: 0; padding: 12px 14px; border-radius: var(--rand); background: var(--creme); color: var(--donker); font-size: 14px; }

/* ---------- Inhoudsopgave ---------- */
.inhoudsopgave { background: var(--creme); border-radius: 10px; padding: 20px 24px; width: 100%; }
.inhoudsopgave-titel { font-weight: 500; color: var(--donker); margin-bottom: 8px; }
.inhoudsopgave ol { margin: 0; padding-left: 1.2em; }
.inhoudsopgave a { color: var(--donker); }
.submenu ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.submenu a { color: var(--donker); }

/* ---------- Magazine-aanmelding en footer ---------- */
.magazine { background: var(--creme); }
.magazine-binnen { width: min(100% - 40px, var(--inhoud)); margin: 0 auto; display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: clamp(24px, 5vw, 72px); padding: clamp(24px, 2.4vw, 34px) 0 0; }
.magazine-tekst { flex: 0 1 570px; display: flex; flex-direction: column; gap: clamp(24px, 2.8vw, 40px); padding-bottom: clamp(32px, 4.2vw, 60px); }
.magazine-beeld { flex: 0 1 598px; align-self: flex-end; margin-top: -59px; margin-right: calc(-1 * clamp(0px, (100vw - 1140px) / 2 - 20px, 100px)); }
.magazine-beeld img { width: 100%; }
.voet { background: var(--donker); color: var(--wit); }
.voet-binnen { width: min(100% - 40px, var(--inhoud)); margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 270fr)) minmax(0, 330fr); gap: 0 20px; padding: clamp(32px, 2.9vw, 42px) 0 clamp(32px, 3vw, 44px); }
.voet-kol { display: flex; flex-direction: column; gap: 20px; }
.voet-kol ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 3px; }
.voet a { color: var(--wit); font-size: 14px; line-height: 21px; }
.voet a:hover { color: var(--goud); text-decoration: none; }
.voet-logo img { width: 187px; }
.voet-sites-kop { font-family: var(--hand); color: var(--wit); font-size: clamp(28px, 2.64vw, 38px); line-height: 1; margin: 0; white-space: nowrap; }
.voet-sites-knoppen { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.voet-site { display: grid; place-items: center; height: 48px; background: var(--zwart); border-radius: var(--rand); font-size: 14px; line-height: 14px; padding: 17px; }
.voet-site:hover { background: var(--goud); }
.voet-onder { background: var(--zwart); }
.voet-onder-binnen { width: min(100% - 40px, var(--inhoud)); margin: 0 auto; display: flex; flex-direction: row; justify-content: flex-end; gap: 40px; padding: 14px 0; font-size: 14px; }

/* ---------- Tablet ---------- */
@media (max-width: 1180px) {
}
@media (max-width: 1180px) {
  :root { --kop-h: 100px; }
  .logo img { width: 187px; }
  /* hamburger zoals live (fa-bars): drie dikke streepjes, rechts naast Contact */
  .hamburger { display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; flex: 0 0 auto; width: 44px; height: 44px; padding: 0; margin-right: -12px; border: 0; background: transparent; cursor: pointer; }
  .hamburger span { display: block; width: 20px; height: 3px; background: var(--wit); border-radius: 2px; }
  .kop-contact { margin-left: auto; font-size: 15px; padding: 17px 34px; line-height: 15px; }
  .hoofdmenu { display: none !important; }
  .hoofdmenu.is-open { transform: none; }
  .menu { flex-direction: column; gap: 0; height: auto; }
  .menu-item { display: block; }
  .mega-links { background: transparent; padding: 4px 0; }
  .hoofdmenu { height: auto; }
  .menu-item { position: relative !important; border-bottom: 1px solid rgba(255, 255, 255, .15); }
  .menu-top { flex-direction: row; gap: .35em; justify-content: flex-start; padding: 16px 0; font-size: 16px; }
  .mega, .mega--smal { position: static; transform: none !important; width: auto; opacity: 1; visibility: visible; display: none; box-shadow: none; border-radius: 6px; padding: 10px; margin-bottom: 14px; grid-template-columns: 1fr; }
  .menu-item.is-open > .mega { display: grid; }
  .mega-links { border-right: 0; padding-right: 0; }
  .mega-rechts { display: none; }
  .mega-groep .pijl { display: none; }
  .hoofdmenu .menu-contact-mobiel { display: inline-flex; margin-top: 24px; }
  .voet-binnen { grid-template-columns: 1fr 1fr; gap: 36px 20px; }
  .raster { grid-template-columns: repeat(min(var(--kol, 2), 2), minmax(0, 1fr)); }
}

/* ---------- Mobiel ---------- */
@media (max-width: 767px) {

  /* live staat de header op mobiel boven de inhoud, niet eroverheen */
  :root { --kop-h: clamp(92px, calc(62px + 7.6vw), 100px); }
  main, .zonder-hero main { padding-top: var(--kop-h); }
  .canvas main { padding-top: 0; }
  .logo img { width: clamp(118px, 38.4vw, 187px); height: auto; }
  .kop-binnen { gap: clamp(12px, 5vw, 25px); }
  .kop-contact { padding-inline: clamp(18px, 17.4vw - 34px, 34px); }   /* 34px vanaf 390px, smaller daaronder */
  .mob-weg { display: none !important; }
  .rij--klein { flex-wrap: wrap; }
  .raster { grid-template-columns: 1fr; }
  .veld--half { flex-basis: 100%; }
  .magazine-binnen { flex-direction: column; gap: 20px; }
  .magazine-tekst { padding-bottom: 0; flex: none; }
  /* in de kolom zou flex-basis 598px de hoogte worden: lege ruimte onder de laptop */
  .magazine-beeld { flex: none; width: 100%; margin: 0; align-self: center; }
  .voet-binnen { grid-template-columns: 1fr; }
  .voet-onder-binnen { justify-content: center; gap: 24px; }
  .hotspot { font-size: 11px; padding: 5px 7px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Ingesloten Spotify-spelers hebben een vaste hoogte */
.tekst iframe[src*="spotify"] { aspect-ratio: auto; height: 152px; border-radius: 12px; }

/* Rijtje trainersfoto's op een kaart */
.avatars { display: flex; flex-wrap: nowrap; }
.avatars { padding: 10px 0; }
.avatars img { width: 35px; height: 60px; object-fit: contain; margin-right: -1px; }
span.knop { pointer-events: none; }
a.doos:hover span.knop { background: var(--donker); }

/* Knoppen staan in een kolom op hun eigen breedte, zoals Elementor-widgets */
.doos > .knop, .binnen > .knop, .sectie > .knop, .item > .knop { align-self: flex-start; }
.doos > .knop--midden, .binnen > .knop--midden, .sectie > .knop--midden { align-self: center; }
.doos > .knop--rechts, .binnen > .knop--rechts, .sectie > .knop--rechts { align-self: flex-end; }
.knop.knop--vol { align-self: stretch; }

/* Blokken die in het origineel over een ander blok heen liggen */
.laag { position: absolute; z-index: 2; display: flex; flex-direction: column; }
.laag > * { flex: 1 1 auto; }
.laag .hotspots { height: 100%; }

/* Tekst in kolommen (Elementor text-editor "columns") */
.tekst--kolommen { column-count: var(--kolommen, 2); }
.tekst--kolommen h2, .tekst--kolommen h3, .tekst--kolommen h4 { break-after: avoid; }
@property --kolommen { syntax: "*"; inherits: false; }

/* Zwevende boekknop rechtsonder */
.zweef { position: fixed; right: 20px; bottom: 20px; z-index: 90; width: auto !important; }
.zweef .knop { box-shadow: 0 8px 24px rgba(0, 0, 0, .2); }

@media (max-width: 1180px) { .voet-sites-kop { white-space: normal; font-size: 30px; } }
@media (max-width: 767px) {
  .tekst--kolommen { column-count: 1; }
  .zweef { right: 12px; bottom: 12px; }
}

/* Canvas-pagina's (geen header/footer) */
.canvas.zonder-hero main { padding-top: 0; }

/* Citaat als opener van een tekstblok (trainingspagina's): groot en goud */
.tekst > blockquote:first-child { font-size: clamp(22px, 2.4vw, 34px); line-height: 1.35; color: var(--goud); border: 0; padding: 0; font-style: normal; column-span: all; margin: 0 0 1em; }

/* Op mobiel geen overlappende lagen: gewoon onder elkaar */
@media (max-width: 767px) {
  .laag { position: static !important; width: auto !important; height: auto !important; }
  .laag--omhoog { margin-top: 20px; }
}
.sectie--los img { width: 100%; border-radius: 0; }

/* Omgekeerde rij (Elementor "row-reverse") */
.rij.omgekeerd { flex-direction: row-reverse; }
@media (max-width: 767px) { .rij.omgekeerd:not(.rij--mob) { flex-direction: column-reverse; } }
/* Scrollende tekstvakjes in kaarten: dunne gouden scrollbalk zoals live */

@media (max-width: 767px) {
  .rij.mob-omgekeerd { flex-direction: column-reverse !important; }
  .mta-center { text-align: center !important; align-self: center; }
  .mta-left { text-align: left !important; }
  .mta-right { text-align: right !important; }
}

/* Icoontje in een kop (live: span.inline-rechts met gouden pijlrondje) */
.inline-ico { display: inline-block !important; vertical-align: middle; margin: 0 .1em; border-radius: 0 !important; }
.tekst img.inline-ico { margin: 0 .1em; }
/* Alleen op mobiel (live elementor-hidden-desktop) */
.alleen-mob { display: none !important; }
@media (max-width: 767px) { .alleen-mob { display: revert !important; } .doos.alleen-mob, .sectie.alleen-mob { display: flex !important; } }

/* Paginabolletjes onder sliders */
.rail-bolletjes { display: flex; justify-content: center; flex-wrap: wrap; gap: 0; margin-top: var(--r-16); padding-inline: var(--goot); }
.rail-bolletjes button { width: 16px; height: 28px; border: 0; background: transparent; cursor: pointer; position: relative; padding: 0; }
.rail-bolletjes button::after { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: #CFCFCF; transition: transform .2s, background .2s; }
.rail-bolletjes button[aria-current="true"]::after { background: var(--goud); transform: scale(1.25); }

/* Audiofragment: twee ronde knopjes */
.audio-knoppen { display: inline-flex; gap: 10px; align-items: center; }
.audio-knop { width: 22px; height: 22px; border-radius: 50%; border: 0; background: var(--wit); cursor: pointer; position: relative; padding: 0; }
.audio-knop--play::after { content: ""; position: absolute; left: 8px; top: 6px; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent var(--donker); }
.audio-knop--pauze::after { content: ""; position: absolute; left: 7px; top: 6px; width: 2px; height: 10px; border-left: 2px solid var(--donker); border-right: 2px solid var(--donker); box-sizing: content-box; width: 2px; }
.audio-knop:hover { background: var(--goud); }

/* Mobiel: kolommen/slides volgens de mobiele meting */
@property --kol-m { syntax: "*"; inherits: true; }
@media (max-width: 767px) {
}

/* Kaartensliders: native scrollbalk verborgen, eigen balk eronder (zie main.js) */
.rail--balk .rail-spoor { scrollbar-width: none; }
.rail--balk .rail-spoor::-webkit-scrollbar { display: none; }
.rail-balk { position: relative; height: clamp(3px, .35vw, 5px); border-radius: 3px; background: #E3DED5; cursor: pointer;
  margin: var(--r-30) 0 0 var(--ipl, 0px); width: min(calc(100% - var(--ipl, 0px) - var(--ipr, 0px)), var(--inhoud)); }
.naar-rechts .rail-balk { width: min(calc(100% - var(--ipl, 0px) - var(--goot)), var(--inhoud)); }
.rail-balk-duim { position: absolute; top: clamp(-2px, -.14vw, -1px); bottom: clamp(-2px, -.14vw, -1px); left: 0; border-radius: 4px; background: var(--goud); cursor: grab; touch-action: none; transition: background .2s; }
.rail-balk-duim:hover, .rail-balk-duim:active { background: var(--donker); }
.rail-balk-duim:active { cursor: grabbing; }
.op-donker .rail-balk, .beeldbg .rail-balk, .rail-balk.op-foto { background: rgba(255, 255, 255, .35); }
.rail-balk.op-foto .rail-balk-duim { background: var(--wit); }
.scrollvak::-webkit-scrollbar { width: var(--sb-maat, 1px); }
.scrollvak::-webkit-scrollbar-thumb { background: var(--sb-duim, rgba(21, 26, 26, .55)); }
@supports not selector(::-webkit-scrollbar) { .scrollvak { scrollbar-width: thin; } }

/* Vloeiende paginaovergangen (cross-document view transitions); header blijft staan */
@view-transition { navigation: auto; }
.kop-balk { view-transition-name: kop; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .18s; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* Onder de inhoudsbreedte: volle-breedte secties houden een goot, zodat tekst en
   knoppen nooit tegen de rand staan. Sliders lopen rechts wel door tot de rand. */
@media (max-width: 1239px) {
  .sectie.vol { padding-left: max(var(--pl), var(--goot)); padding-right: max(var(--pr), var(--goot)); }
  /* achtergrondvlakken lopen door tot de rand; hun inhoud houdt de goot */
  .sectie.vol > .doos.bg, .sectie.vol > .doos.beeldbg, .sectie.vol > .doos.heeft-video, .sectie.vol > .doos.overlay {
    margin-left: calc(-1 * var(--goot)) !important; margin-right: calc(-1 * var(--goot)) !important; width: auto !important;
    padding-left: max(var(--pl), var(--goot)); padding-right: max(var(--pr), var(--goot)); align-self: stretch; }
  .kop-binnen, .magazine-binnen, .voet-binnen, .voet-onder-binnen { width: min(100% - 2 * var(--goot), var(--inhoud)); padding-inline: 0; }
}
@property --bp-m { syntax: "*"; inherits: false; }
@property --bs-m { syntax: "*"; inherits: false; }
@media (max-width: 767px) {
  .beeldbg[style*="--bp-m"] { background-position: var(--bp-m) !important; }
  .beeldbg[style*="--bs-m"] { background-size: var(--bs-m) !important; }
}
/* Slider met één dia per beeld loopt van rand tot rand */
@media (max-width: 1239px) {
  .sectie.vol .rail--vol { margin-left: calc(-1 * var(--goot)) !important; margin-right: calc(-1 * var(--goot)) !important; width: calc(100% + 2 * var(--goot)) !important; flex: 0 0 calc(100% + 2 * var(--goot)) !important; }
  .sectie.vol .rail--vol .rail-spoor { padding-right: 0; }
}
/* Agenda op mobiel: rijen zoals live (105px, 8px ertussen, datum gestapeld) */
@media (max-width: 767px) {
  .agenda li { min-height: 105px; margin-bottom: 8px; }
  .agenda-datum { line-height: 21.25px; }
}
@property --beeld-m { syntax: "*"; inherits: false; }
@media (max-width: 767px) { .beeldbg[style*="--beeld-m"] { background-image: var(--beeld-m); } }
@property --ar-m { syntax: "*"; inherits: false; }
@property --fit-m { syntax: "*"; inherits: false; }
@media (max-width: 767px) {
  .beeld[style*="--ar-m"] { aspect-ratio: var(--ar-m) !important; height: auto; }
  .beeld[style*="--fit-m"] { object-fit: var(--fit-m) !important; }
}

.rail--vol .rail-spoor { grid-auto-columns: 100%; }
@property --imin { syntax: "*"; inherits: false; }
@media (max-width: 767px) { .rij.mob-omgekeerd { flex-wrap: wrap-reverse; } }

/* ---------- Kaarten schalen als geheel mee (container queries) ----------
   Elke kaart (.item) is een container. Binnen de kaart worden de type-, ruimte- en
   knoptokens herberekend in verhouding tot de kaartbreedte (--kb = breedte op 1440px),
   zodat tekst, witruimte, fotohoogte, avatars en knop samen meeschalen. */
.item { container-type: inline-size; }
.item > * {
  --t-12: clamp(12px, calc(12 * 100cqi / var(--kb, 372)), 14px);
  --t-13: clamp(12px, calc(13 * 100cqi / var(--kb, 372)), 15px);
  --t-14: clamp(12px, calc(14 * 100cqi / var(--kb, 372)), 16px);
  --t-15: clamp(13px, calc(15 * 100cqi / var(--kb, 372)), 17px);
  --t-16: clamp(13px, calc(16 * 100cqi / var(--kb, 372)), 18px);
  --t-18: clamp(15px, calc(18 * 100cqi / var(--kb, 372)), 21px);
  --t-20: clamp(16px, calc(20 * 100cqi / var(--kb, 372)), 23px);
  --t-22: clamp(18px, calc(22 * 100cqi / var(--kb, 372)), 25px);
  --t-25: clamp(20px, calc(25 * 100cqi / var(--kb, 372)), 29px);
  --t-30: clamp(25px, calc(30 * 100cqi / var(--kb, 372)), 34px);
  --t-35: clamp(29px, calc(35 * 100cqi / var(--kb, 372)), 40px);
  --t-40: clamp(33px, calc(40 * 100cqi / var(--kb, 372)), 46px);
  --t-45: clamp(37px, calc(45 * 100cqi / var(--kb, 372)), 52px);
  --t-50: clamp(41px, calc(50 * 100cqi / var(--kb, 372)), 57px);
  --t-56: clamp(46px, calc(56 * 100cqi / var(--kb, 372)), 64px);
  --t-60: clamp(49px, calc(60 * 100cqi / var(--kb, 372)), 69px);
  --t-70: clamp(57px, calc(70 * 100cqi / var(--kb, 372)), 80px);
  --t-80: clamp(66px, calc(80 * 100cqi / var(--kb, 372)), 92px);
  --r-2: clamp(1px, calc(2 * 100cqi / var(--kb, 372)), 2px);
  --r-4: clamp(2px, calc(4 * 100cqi / var(--kb, 372)), 5px);
  --r-6: clamp(3px, calc(6 * 100cqi / var(--kb, 372)), 7px);
  --r-8: clamp(4px, calc(8 * 100cqi / var(--kb, 372)), 9px);
  --r-10: clamp(5px, calc(10 * 100cqi / var(--kb, 372)), 12px);
  --r-12: clamp(6px, calc(12 * 100cqi / var(--kb, 372)), 14px);
  --r-16: clamp(8px, calc(16 * 100cqi / var(--kb, 372)), 18px);
  --r-20: clamp(10px, calc(20 * 100cqi / var(--kb, 372)), 23px);
  --r-24: clamp(12px, calc(24 * 100cqi / var(--kb, 372)), 28px);
  --r-30: clamp(15px, calc(30 * 100cqi / var(--kb, 372)), 34px);
  --r-36: clamp(18px, calc(36 * 100cqi / var(--kb, 372)), 41px);
  --r-40: clamp(20px, calc(40 * 100cqi / var(--kb, 372)), 46px);
  --r-50: clamp(25px, calc(50 * 100cqi / var(--kb, 372)), 57px);
  --r-60: clamp(30px, calc(60 * 100cqi / var(--kb, 372)), 69px);
  --r-72: clamp(36px, calc(72 * 100cqi / var(--kb, 372)), 83px);
  --r-86: clamp(43px, calc(86 * 100cqi / var(--kb, 372)), 99px);
  --r-100: clamp(50px, calc(100 * 100cqi / var(--kb, 372)), 115px);
  --r-120: clamp(60px, calc(120 * 100cqi / var(--kb, 372)), 138px);
  --r-144: clamp(72px, calc(144 * 100cqi / var(--kb, 372)), 166px);
  /* knoppen schalen niet mee met de kaart: overal dezelfde knop */
  font-size: var(--t-15);
}
.item .avatars img { width: clamp(24px, calc(35 * 100cqi / var(--kb, 372)), 40px); height: auto; aspect-ratio: 35 / 60; }
/* kaart vult altijd het item: geen extra gat tussen kaarten */
.item .binnen { width: 100%; }
/* volle-breedte dia's (teamslider): inhoud blijft op het boxed grid */
.rail--vol .item .binnen { width: min(100% - 2 * var(--goot), var(--mw, var(--inhoud))); margin-inline: auto; }

/* Kaarten altijd even groot: elk item rekt mee met het hoogste in de rij, de kaart vult
   het item, het laatste (tekst)deel groeit mee en de knop zakt naar de onderkant. */
.lijstgrid, .rail-spoor { align-items: stretch; }
.item > .doos { flex: 1 1 auto; }
/* kaart = [foto][tekstdeel]: alleen het tekstdeel (en zijn binnenkolom) rekt mee */
.item > .doos > .binnen { flex: 1 1 auto; }
:is(.item > .doos:not(.rij), .item > .doos > .binnen:not(.rij)) > .doos:last-child:not(.beeldbg) { flex-grow: 1; }
:is(.item > .doos:not(.rij), .item > .doos > .binnen:not(.rij)) > .doos:last-child:not(.beeldbg) > .doos:last-child { flex-grow: 1; }
:is(.item > .doos:not(.rij), .item > .doos > .binnen:not(.rij)) > .doos:last-child:not(.beeldbg) > .doos:last-child > :last-child:has(.knop) { margin-top: auto; }
/* item-padding valt buiten het grid: de kaartrand zelf staat op de lijn */
.rail, .lijstgrid { margin-left: calc(-1 * var(--ipl, 0px)); margin-right: calc(-1 * var(--ipr, 0px)); width: auto; }
.rail { width: calc(100% + var(--ipl, 0px) + var(--ipr, 0px)); }

/* Inhoud die op het boxed grid begint en rechts tot de rand doorloopt (kaartenslider) */
.naar-rechts { margin-left: max(0px, (100% - var(--inhoud)) / 2) !important; margin-right: 0 !important; flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; }
@media (max-width: 1239px) { .sectie.vol .naar-rechts { margin-right: calc(-1 * var(--goot)) !important; } }
/* een lijst of slider in een rij neemt altijd de volle regel (plus de item-padding) */
.rij > .rail, .rij > .lijstgrid { flex: 0 0 calc(100% + var(--ipl, 0px) + var(--ipr, 0px)); }
/* de doorlopende slider stopt precies aan de schermrand (geen item-padding erbuiten) */
.naar-rechts .rail { margin-right: 0; width: calc(100% + var(--ipl, 0px)); }
.rij.naar-rechts > .rail, .naar-rechts.rij > .rail, .naar-rechts > .rail { flex-basis: calc(100% + var(--ipl, 0px)); }
/* vangnet: nooit horizontaal scrollen door een uitstekend element */
main, footer, .magazine { overflow-x: clip; }

/* Mobiel: wat meer lucht en verhoudingen */
@media (max-width: 767px) {
  /* foto-blokken met inhoud onderaan (podium, hero's): knop nooit tegen de onderrand */
  .beeldbg.minh > .binnen, .beeldbg.minh:not(:has(> .binnen)) { padding-bottom: max(var(--pb, 0px), 32px); }
  .beeldbg.minh > .binnen > .doos:last-child, .beeldbg.minh > .binnen > .rij:last-child { padding-bottom: max(var(--pb, 0px), 8px); }
  /* volle-breedte dia's (humans-slider): staand formaat */
  .rail--vol .item .beeldbg.minh > .binnen { padding-bottom: 40px; }
}

/* Volle-breedte dia's: hoogte loopt door van staand (mobiel) naar de volle desktophoogte */
.rail--vol .item > .doos.minh, .rail--vol .item .beeldbg.minh { min-height: max(min(var(--mh), 760px), min(160vw, 640px)); }

/* Luie achtergrondbeelden: buiten de eerste sectie pas laden als het blok bijna in beeld is */
.lui-bg:not(.zichtbaar) { background-image: none !important; }

/* ---------- Mobiel menu (lade) zoals live: paneel van rechts, gouden kop met logo,
   per niveau een lijst met pijltjes, onderaan de expertise-websites ---------- */
.lade-scherm { position: fixed; inset: 0; z-index: 190; background: rgba(0, 0, 0, .45); opacity: 0; pointer-events: none; transition: opacity .3s; }
.lade-scherm.is-open { opacity: 1; pointer-events: auto; }
.lade { position: fixed; inset: 0 0 0 auto; z-index: 200; width: min(80vw, 420px); display: flex; flex-direction: column; background: var(--donker); color: var(--wit); transform: translateX(100%); visibility: hidden; transition: transform .3s ease, visibility 0s .3s; }
.lade.is-open { transform: none; visibility: visible; transition: transform .3s ease; }
.lade-kop { flex: none; height: 103px; display: flex; align-items: center; padding-left: 40px; background: var(--goud); }
.lade-kop a { display: block; width: min(250px, 100% - 40px); }
.lade-kop img { width: 100%; height: auto; display: block; }
.lade-balk { flex: none; height: 35px; display: flex; justify-content: flex-end; }
.lade-knop { width: 44px; height: 35px; display: grid; place-items: center; border: 0; background: transparent; color: var(--wit); cursor: pointer; padding: 0; }
.lade-knop svg { width: 14px; height: 14px; }
.lade-rol { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 40px; }
.lade-lijst { list-style: none; margin: 0; padding: 0 0 0 40px; animation: lade-in .25s ease; }
.lade-lijst.terug { animation-name: lade-terug; }
@keyframes lade-in { from { opacity: 0; transform: translateX(24px); } }
@keyframes lade-terug { from { opacity: 0; transform: translateX(-24px); } }
.lade-lijst li { display: flex; align-items: center; min-height: 50px; }
.lade-lijst a { flex: 1 1 auto; padding: 14px 0; color: var(--wit); font-size: 14px; line-height: 1.5; }
.lade-lijst a span { display: block; }
.lade-lijst a:hover, .lade-lijst a[aria-current="page"], .lade-lijst li.is-actief > a { color: var(--goud); text-decoration: none; }
.lade-pijl { flex: none; align-self: stretch; width: 44px; border: 0; background: transparent; color: var(--wit); cursor: pointer; display: grid; place-items: center; padding: 0; }
.lade-pijl svg { width: 8px; height: 12px; }
.lade-extra { padding: 40px 40px 0; }
.lade-extra-kop { margin: 0 0 20px; font-family: var(--hand); font-size: 31px; line-height: 1; font-weight: 400; }
.lade-sites { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 10px; }
.lade-sites a { display: grid; place-items: center; height: 44px; padding: 0 6px; text-align: center; background: var(--zwart); color: var(--goud); border-radius: 5px; font-size: 11px; line-height: 1.2; }
.lade-sites a:hover { color: var(--wit); text-decoration: none; }
@media (prefers-reduced-motion: reduce) { .lade, .lade-scherm { transition: none; } .lade-lijst { animation: none; } }

/* Een naad (slider die met een negatieve ondermarge in de volgende sectie doorloopt) ligt
   altijd bovenop die sectie; anders tekent de latere sectie over het tekstdeel van de kaarten. */
.naad { position: relative; z-index: 3; }

/* Een kaart heeft altijd een vlak: kaarten in een slider zonder eigen achtergrond of foto
   krijgen het crème kaartvlak (live stond dat op het sliderblok zelf, dat lezen we niet uit) */
.rail--vol .item > .doos.rond:not(.bg):not(.beeldbg) { background: var(--creme); border-radius: 15px; }

/* lege kolom (spacer) in een rij: houdt de ruimte vast; onder elkaar (mobiel) niet nodig */
.doos.spacer { min-height: 0; }
@media (max-width: 767px) { .doos.spacer { display: none; } }

/* ---------- Sneltoetsen (zoals Collectable World) ----------
   Desktop: rondjes rechtsonder in de marge, label klapt uit bij hover/focus; weg zodra de
   footer in beeld is (main.js). Mobiel: balk over de volle breedte onderaan met icoon én
   label (geen hover op een aanraakscherm). Sticky aan het eind van de body: plakt tegen de
   onderrand en komt onderaan vanzelf tot rust na de footer, dus nooit over de footerlinks. */
.snelmenu { position: fixed; right: var(--goot); bottom: var(--goot); z-index: 40; display: grid; gap: 8px; justify-items: end; transition: opacity .2s, transform .2s; }
.snel { display: inline-flex; align-items: center; justify-content: center; height: 44px; min-width: 44px; max-width: 44px; padding: 0; border-radius: 22px; overflow: hidden;
  background: var(--wit); border: 1px solid #DCDCDC; box-shadow: 0 6px 18px rgba(21, 26, 26, .16); color: var(--donker); font-size: 14px; line-height: 1; white-space: nowrap;
  transition: max-width .3s cubic-bezier(.22, .61, .36, 1), padding .3s cubic-bezier(.22, .61, .36, 1), background-color .18s, color .18s, border-color .18s; }
.snel span { max-width: 0; padding-left: 0; opacity: 0; transition: max-width .3s cubic-bezier(.22, .61, .36, 1), padding-left .3s, opacity .2s .04s; }
.snelmenu:hover .snel, .snelmenu:focus-within .snel { max-width: 240px; padding: 0 16px; box-shadow: 0 10px 26px rgba(21, 26, 26, .22); }
.snelmenu:hover .snel span, .snelmenu:focus-within .snel span { max-width: 12rem; padding-left: 10px; opacity: 1; }
.snel svg { width: 19px; height: 19px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.snel:hover { background: var(--donker); border-color: var(--donker); color: var(--wit); text-decoration: none; }
.snel--hoofd { background: var(--goud); border-color: var(--goud); color: var(--wit); }
.snel--hoofd:hover { background: var(--donker); border-color: var(--donker); }
.snel:focus-visible { outline: 2px solid var(--donker); outline-offset: 3px; }
.snelmenu.is-weg { opacity: 0; transform: translateY(8px); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .snel, .snel span, .snelmenu { transition: none; } }
@media (max-width: 999px) {
  .snelmenu { position: sticky; right: auto; bottom: 0; gap: 6px; justify-items: stretch; grid-template-columns: repeat(3, 1fr);
    background: var(--wit); border-top: 1px solid #DCDCDC; box-shadow: 0 -6px 18px rgba(21, 26, 26, .12); padding: 8px var(--goot) calc(8px + env(safe-area-inset-bottom, 0px)); }
  .snelmenu.is-weg { opacity: 1; transform: none; pointer-events: auto; }   /* mobiel: altijd in beeld */
  .snel, .snelmenu:hover .snel, .snelmenu:focus-within .snel { width: auto; max-width: none; height: 48px; padding: 0 8px; border-radius: var(--rand); box-shadow: none; font-size: 13px; font-weight: 500; }
  .snel span, .snelmenu:hover .snel span, .snelmenu:focus-within .snel span { max-width: none; opacity: 1; padding-left: 8px; }
  .snel, .snel span { transition: background-color .18s, color .18s; }
  .snel svg { width: 18px; height: 18px; }
  .snelmenu.is-toetsenbord { opacity: 0; transform: translateY(100%); pointer-events: none; }
}
@media (max-width: 339px) { .snel span { display: none; } }   /* drie labels passen niet meer: alleen iconen */

/* pijl in het naamvak (humans-kaarten): naam links, pijl rechts, verticaal gecentreerd */
.naamvak--pijl { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
.naamvak--pijl .icoon { flex: none; transition: transform .2s; }
.naamvak--pijl:hover .icoon, .item:hover .naamvak--pijl .icoon { transform: translate(2px, -2px); }

/* vaste kolommen: auto-fill houdt lege kolommen vast, dus 2 kaarten krijgen de breedte van 3 */
.lijstgrid--vast { align-self: stretch; grid-template-columns: repeat(auto-fill, minmax(min(100%, max(var(--imin, 220px), calc((100% - (var(--kol, 3) - 1) * var(--gap, 20px)) / var(--kol, 3)))), 1fr)); }
/* in een "naar rechts"-blok (bedoeld voor sliders die tot de schermrand doorlopen) blijft
   een raster op het inhoudsraster: niet breder dan 1140px plus de kaartmarges */
.naar-rechts > .lijstgrid--overzicht { max-width: calc(var(--inhoud) + var(--ipl, 0px) + var(--ipr, 0px)); }