/* MMBC - huisstijl: zwart #0a0a0a, gebroken wit #f4f4f1, accentpaars #473675, donkerpaars #241d3f
   Lettertype: Inter (variabel bestand, zelf gehost in /fonts, licentie SIL OFL 1.1, zie LEESMIJ.md).
   Koppen: Inter 900 (Black). Tekst en menu: Inter 400/600. */

@font-face {
  font-family: "Inter";
  src: url("../fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* Barlow Condensed 800: koppen, kaartkoppen en grote cijfers. Self-hosted, alleen de tekens die de site nodig heeft (zie LEESMIJ.md) */
@font-face { font-family: "Barlow Condensed"; src: url("../fonts/BarlowCondensed-ExtraBold.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }

:root {
  --kop-fam: "Barlow Condensed", "Arial Narrow", Impact, sans-serif; /* koppen, kaartkoppen en grote cijfers */
  --kop-schaal: 1.23; /* Barlow Condensed is smal: 1,04 = even hoge hoofdletters als Inter Black, 1,23 is de gekozen maat (V2); op lagere schermen kleiner, zie onderaan */
  --zwart: #0a0a0a;
  --wit: #f4f4f1;
  --paars: #473675;
  --donkerpaars: #241d3f;
  --paars-licht: #b7a9e0; /* alleen voor tekst/accenten op zwart (leesbaarheid) */
  --lijn: rgba(244, 244, 241, .18);
  --kop: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --tekst: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --breed: 1120px;
  --pad: clamp(20px, 5vw, 48px);
  --kh-groot: 72px;  /* hoogte kopbalk bovenaan de pagina */
  --kh-klein: 56px;  /* hoogte kopbalk na scrollen */
}
@media (min-width: 1100px) { :root { --kh-groot: 112px; --kh-klein: 64px; } }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--zwart);
  color: var(--wit);
  font-family: var(--tekst);
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
/* Focus: zie het blok "Focus (toetsenbord)" onderaan de basisstijlen. Er is bewust geen outline of box-shadow. */
:root { --focus: var(--paars-licht); } /* accentkleur voor focus: lichtpaars op donkere secties, paars op lichte */
.licht { --focus: var(--paars); }

h1, h2, h3 {
  font-family: var(--kop-fam);
  font-weight: 800;
  text-transform: uppercase;
  line-height: .93;
  word-spacing: .06em;
  letter-spacing: .015em; /* kleine letterafstand voor hoofdletters in Barlow Condensed */
  margin: 0 0 .6em;
}
h1 { font-size: calc(clamp(2.6rem, 11vw, 6.2rem) * var(--kop-schaal)); }
h2 { font-size: calc(clamp(2rem, 7.5vw, 3.9rem) * var(--kop-schaal)); }
h3 { font-size: calc(clamp(1.15rem, 3.4vw, 1.5rem) * var(--kop-schaal)); line-height: .95; letter-spacing: .015em; word-spacing: 0; }
p { margin: 0 0 1em; }

.wrap { width: 100%; max-width: var(--breed); margin: 0 auto; padding: 0 var(--pad); }
section { padding: clamp(32px, 6vw, 60px) 0; }

.label {
  display: inline-block;
  font-family: var(--kop);
  font-weight: 900;
  font-size: .8rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--paars-licht);
  margin-bottom: 1.2rem;
}
.licht .label { color: var(--paars); }
.lead { font-size: clamp(1.15rem, 3.2vw, 1.4rem); line-height: 1.5; max-width: 34em; }

/* Secties */
.donker { background: var(--zwart); color: var(--wit); }
.paars { background: var(--donkerpaars); color: var(--wit); }
.licht { background: var(--wit); color: var(--zwart); }

/* Knoppen */
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 52px; padding: 14px 28px;
  font-family: var(--kop); font-weight: 900; font-size: 1rem;
  text-transform: uppercase; letter-spacing: .06em; text-decoration: none;
  background: var(--paars); color: var(--wit);
  border: 2px solid var(--paars); border-radius: 0; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.knop:hover { background: var(--wit); color: var(--zwart); border-color: var(--wit); }
.licht .knop:hover { background: var(--zwart); color: var(--wit); border-color: var(--zwart); }
.header .knop, .donker .knop, .paars .knop {
  background: var(--paars-licht); border-color: var(--paars-licht); color: var(--zwart);
}
.header .knop:hover, .donker .knop:hover, .paars .knop:hover {
  background: var(--wit); border-color: var(--wit); color: var(--zwart);
}
.knop--klein { min-height: 44px; padding: 10px 18px; font-size: .85rem; }
.cta-rij { margin-top: 2.2rem; }

/* Header: groot bovenaan, kleiner zodra de bezoeker scrolt (klasse .klein via js/main.js) */
.header {
  --kop-h: 72px; --logo-h: 48px;
  position: sticky; top: 0; z-index: 50;
  background: rgba(10, 10, 10, .94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--lijn);
}
.header.klein { --kop-h: 56px; --logo-h: 36px; }
.header .wrap { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; height: var(--kop-h); transition: height .2s ease; }
.logo-link { display: block; line-height: 0; flex: none; }
.logo-link img { height: var(--logo-h); width: auto; transition: height .2s ease; }
.header .knop { white-space: nowrap; margin-left: auto; }
/* Smalle telefoons (onder 375px): de kopbalk bevat logo, "Plan kennismaking" en het hamburgermenu. Knop en tussenruimtes schalen mee met
   de breedte, zodat alles in beeld blijft (op 320px past de brede knop anders niet naast het menu). Vanaf 375px ongewijzigd. */
@media (max-width: 374px) {
  .header { --logo-h: 40px; }
  .header .wrap { gap: 3vw; }
  .header .knop { font-size: 3.4vw; letter-spacing: .05em; padding-inline: 2.6vw; }
}
.menu-knop { flex: none; width: 44px; height: 44px; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: transparent; border: 2px solid var(--lijn); color: var(--wit); cursor: pointer; }
.menu-knop span { display: block; width: 20px; height: 2px; background: currentColor; transition: transform .2s, opacity .2s; }
.menu-knop[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menu-knop[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-knop[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
/* Mobiel: uitklapmenu onder de kopbalk */
.nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; background: var(--zwart); padding: 4px var(--pad) 16px; border-bottom: 1px solid var(--lijn); font-weight: 600; letter-spacing: .04em; font-size: 1.1rem; }
.nav.open { display: flex; }
.nav a { text-decoration: none; padding: 14px 0; border-bottom: 1px solid var(--lijn); }
@media (min-width: 1100px) {
  .header { --kop-h: 112px; --logo-h: 80px; }
  .header.klein { --kop-h: 64px; --logo-h: 44px; }
  .menu-knop { display: none; }
  .header .knop { margin-left: 0; }
  /* Menutekst groeit mee met het scherm (1100px = 12px, 1280px ca. 14,3px, 1440px en breder 16,3px). Onder 1100px: hamburgermenu */
  .nav { display: flex; position: static; flex-direction: row; background: none; padding: 0; border: 0; white-space: nowrap;
    font-size: clamp(12px, calc(1.265vw - 1.9px), 1.02rem); gap: max(20px, 1.6em); }
  .nav a { padding: 0; border: 0; opacity: .85; }
  .nav a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 6px; }
}

/* Hero */
.hero { padding: clamp(20px, 3.5vw, 48px) 0 clamp(16px, 2.5vw, 32px); position: relative; overflow: hidden;
  background: radial-gradient(120% 80% at 90% 0%, var(--donkerpaars) 0%, var(--zwart) 62%); }
.hero h1 span { color: var(--paars-licht); display: block; }
.hero h1 { font-size: calc(clamp(2.3rem, min(9.5vw, 8vh), 4rem) * var(--kop-schaal)); margin-bottom: .45em; }
.hero .label { margin-bottom: .8rem; }
/* Hero met achtergrondfoto (decoratief, eigen foto). De foto vult de hero (16:9; trainer en slag rechts van het midden), links een
   donkere laag voor de tekst. Mobiel: staande uitsnede, de foto begint bovenaan zodat het gezicht van de trainer in beeld blijft. */
.hero-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: var(--zwart); }
.hero { isolation: isolate; }
.hero-bg::before, .hero-bg::after { content: ""; position: absolute; top: 0; bottom: 0; }
.hero-bg::before { left: 0; width: 100%;
  background-image: url("../img/hero-training-900.jpg");
  background-image: image-set(url("../img/hero-training-900.webp") type("image/webp"), url("../img/hero-training-900.jpg") type("image/jpeg"));
  background-size: cover; background-position: 50% 12%; }
.hero-bg::after { left: 0; right: 0;
  /* de donkere laag is lichter rond het gezicht van de trainer, zodat het herkenbaar blijft (mobiel: gezicht rechts) */
  -webkit-mask-image: radial-gradient(ellipse 11% 22% at 86% 33%, rgba(0,0,0,.35) 0%, rgba(0,0,0,.35) 40%, #000 100%);
  mask-image: radial-gradient(ellipse 11% 22% at 86% 33%, rgba(0,0,0,.35) 0%, rgba(0,0,0,.35) 40%, #000 100%); }
/* mobiel: foto vult de hero, sterke donkere laag */
.hero--foto-a .hero-bg::after { background: linear-gradient(180deg, rgba(10,10,10,.80) 0%, rgba(10,10,10,.68) 100%); }
.hero--foto-b .hero-bg::after { background: linear-gradient(180deg, rgba(36,29,63,.86) 0%, rgba(36,29,63,.74) 100%), rgba(36,29,63,.12); }
@media (min-width: 768px) {
  /* De foto begint onder de kopbalk (+8 px): het haar van de trainer ligt maar 3% onder de bovenrand van de foto en zou anders
     achter de kopbalk verdwijnen. Kop en subregel stoppen links van het gezicht (46,5% van de breedte). */
  .hero-bg::before { left: 0; width: 100%; top: calc(var(--kh-groot) + 8px);
    background-image: url("../img/hero-training-2400.jpg");
    background-image: image-set(url("../img/hero-training-2400.webp") type("image/webp"), url("../img/hero-training-2400.jpg") type("image/jpeg"));
    background-position: 50% 0%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%); mask-image: linear-gradient(90deg, transparent 0, #000 14%); }
  .hero--foto-a .hero-bg::after { background: linear-gradient(90deg, rgba(10,10,10,.88) 0%, rgba(10,10,10,.85) 38%, rgba(10,10,10,.40) 100%); }
  .hero--foto-b .hero-bg::after { background: linear-gradient(90deg, rgba(36,29,63,.90) 0%, rgba(36,29,63,.85) 38%, rgba(36,29,63,.42) 100%), rgba(36,29,63,.16); }
  .hero-bg::after { /* laag lichter rond het gezicht (desktop: x 46,5 tot 56,5%) */
    -webkit-mask-image: radial-gradient(ellipse 9% 21% at 51.5% 31%, rgba(0,0,0,.35) 0%, rgba(0,0,0,.35) 45%, #000 100%);
    mask-image: radial-gradient(ellipse 9% 21% at 51.5% 31%, rgba(0,0,0,.35) 0%, rgba(0,0,0,.35) 45%, #000 100%); }
  .hero .label, .hero h1, .hero p.lead { max-width: calc(46.5vw - max(48px, (100vw - 1024px) / 2) - 24px); }
}
.hero p.lead { font-size: clamp(1rem, 2.6vw, 1.25rem); }
.hero .cta-rij { margin-top: 1.4rem; }
.hero-grid { display: grid; gap: 28px; }
.hero p.lead { margin-bottom: 0; text-wrap: pretty; text-wrap: balance; /* evenwichtige regels, geen los laatste woord; oudere browsers negeren dit */ }
.locaties { margin-top: 1.2rem; font-family: var(--kop); font-weight: 900; letter-spacing: .14em; text-transform: uppercase; font-size: .85rem; }
.locaties b { color: var(--paars-licht); }
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: 1.4fr .6fr; align-items: stretch; gap: 56px; }
  /* kop, tekst bovenaan; de knop onderaan, op één lijn met de onderkant van de foto */
  .hero-grid > div:first-child { display: flex; flex-direction: column; }
  .hero-grid > div:first-child .cta-rij { margin-top: auto; padding-top: 16px; }
}

/* Foto's als achtergrond (Hoe het werkt, De groepen, De coach): de foto is sfeer, met de donkere laag en paarse tint van de hero.
   Mobiel: smalle foto, sterkere laag. De sfeerfoto's hebben een lege alt-tekst; het portret heeft een echte alt-tekst. */
.met-foto { position: relative; isolation: isolate; overflow: hidden; }
.foto-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.foto-laag { position: absolute; }
.foto-laag picture, .foto-laag img { display: block; width: 100%; height: 100%; }
.foto-laag img { object-fit: cover; }
.foto-laag::after { content: ""; position: absolute; inset: 0; }

/* Waarom */
.pijlers { display: grid; gap: 0; margin-top: 3rem; border-top: 2px solid currentColor; }
.pijler { padding: 28px 0; border-bottom: 1px solid var(--lijn); }
.pijler h3 { color: var(--paars-licht); }
.pijler p { margin: 0; max-width: 36em; }
@media (min-width: 800px) {
  .pijlers { grid-template-columns: repeat(3, 1fr); gap: 32px; border-top: 0; }
  .pijler { border-top: 2px solid currentColor; border-bottom: 0; padding-top: 20px; }
}

/* Hoe het werkt */
.cijfers { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 2.5rem 0 1.5rem; }
#werkwijze { background: radial-gradient(120% 80% at 90% 0%, var(--donkerpaars) 0%, var(--zwart) 62%); }
#werkwijze .foto-laag { inset: 0; }
#werkwijze .foto-laag::after { background: linear-gradient(180deg, rgba(36,29,63,.92) 0%, rgba(36,29,63,.86) 100%), rgba(36,29,63,.12); }
@media (min-width: 768px) {
  #werkwijze .foto-laag { left: 23%; right: 0; top: 0; bottom: 0; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%); mask-image: linear-gradient(90deg, transparent 0, #000 22%); }
  #werkwijze .foto-laag::after { background: linear-gradient(90deg, rgba(36,29,63,.92) 0%, rgba(36,29,63,.88) 38%, rgba(36,29,63,.60) 100%), rgba(36,29,63,.16); }
  #werkwijze .foto-laag img { object-position: 50% 40%; }
}
.cijfer { background: rgba(10, 10, 10, .55); border: 2px solid rgba(244, 244, 241, .7); padding: 22px 18px; }
.cijfer b { display: block; font-family: var(--kop-fam); font-weight: 800; font-size: calc(clamp(3rem, 14vw, 5.5rem) * var(--kop-schaal)); line-height: .9; color: var(--paars-licht); }
.cijfer span { display: block; margin-top: .5rem; font-family: var(--kop); font-weight: 900; text-transform: uppercase; letter-spacing: .06em; font-size: .85rem; color: var(--wit); }
.uitleg { display: grid; gap: 1.2rem; }
.uitleg p { margin: 0; font-size: 1.1rem; line-height: 1.6; }
.uitleg .nw { white-space: nowrap; } /* "mastermind-sessie" breekt niet af aan het streepje */
.uitleg p:last-child { font-size: clamp(1.5rem, 6.4vw, 1.7rem); font-weight: 700; line-height: 1.3; } /* alinea 2 als stelling */
.uitleg .zin { display: inline-block; max-width: 100%; text-wrap: balance; } /* mobiel: elke zin op een eigen regel; loopt hij over, dan zonder los woord */
@media (min-width: 768px) {
  /* vier kolommen met dezelfde tussenruimte als de cijferblokken: alinea 1 onder blok 1 en 2, alinea 2 onder blok 3 en 4 */
  .cijfers { grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .uitleg { grid-template-columns: repeat(4, 1fr); gap: 0 16px; align-items: baseline; } /* eerste regels van beide alinea's op dezelfde basislijn */
  .uitleg p { max-width: 62ch; text-wrap: pretty; }
  .uitleg p:first-child { grid-column: 1 / span 2; padding-right: 3rem; } /* ruimte tussen de kolommen: 3rem plus de 16px tussenruimte */
  /* elke zin van de stelling op één regel: de langste zin is ca. 470px breed bij 1.3rem, daarom is het lettertype naar boven begrensd */
  .uitleg p:last-child { grid-column: 3 / span 2; font-size: clamp(1.3rem, 2.5svh, 1.35rem); white-space: nowrap; text-wrap: wrap; }
}
@media (min-width: 768px) and (max-width: 1079px) { /* kolom 2 net zo breed als de stelling, kolom 1 neemt de rest */
  .uitleg { grid-template-columns: 1fr max-content; }
  .uitleg p:first-child { grid-column: 1; padding-right: 1rem; }
  .uitleg p:last-child { grid-column: 2; }
}
@media (min-width: 768px) and (max-width: 959px) { /* te smal voor twee kolommen: onder elkaar */
  .uitleg { grid-template-columns: 1fr; gap: 1.2rem; }
  .uitleg p:first-child { padding-right: 0; }
  .uitleg p:first-child, .uitleg p:last-child { grid-column: 1; }
}

/* Voor wie */
.lijsten { display: grid; gap: 40px; margin-top: 2.5rem; }
@media (min-width: 800px) { .lijsten { grid-template-columns: 1fr 1fr; gap: 64px; } }
.lijst h3 { padding-bottom: .6em; border-bottom: 2px solid currentColor; }
.lijst ul { list-style: none; padding: 0; margin: 0; }
.lijst li { padding: 14px 0 14px 34px; border-bottom: 1px solid var(--lijn); position: relative; }
.lijst li::before { position: absolute; left: 0; top: 14px; font-family: var(--kop); font-weight: 900; font-size: 1.2rem; line-height: 1.4; }
.lijst--wel li::before { content: "+"; color: var(--paars-licht); }
.lijst--niet li::before { content: "\2212"; color: var(--wit); opacity: .6; }

/* Groepen */
.groepen { display: grid; gap: 20px; margin-top: 2.5rem; }
@media (min-width: 800px) { .groepen { grid-template-columns: 1fr 1fr; } }
.groep { border: 2px solid var(--zwart); padding: 28px; background: #fff; }
.groep h3 { color: var(--paars); font-size: calc(1.8rem * var(--kop-schaal)); }
.groep .tijd { font-weight: 600; }
.groep p:last-child { margin-bottom: 0; }
.verwachten { display: grid; gap: 28px; }
.v-cta { margin-top: 0; }
.v-rechts { display: contents; } /* mobiel: lijst en knop zijn gewone onderdelen van het grid: introductie, lijst, knop */
@media (min-width: 800px) {
  /* links: kop en introductie (op de foto-strook); rechts: de lijst met de knop eronder */
  .verwachten { grid-template-columns: 1fr 1fr; gap: 0 56px; align-items: start; }
  .v-intro { grid-column: 1; grid-row: 1; }
  .v-rechts { display: block; grid-column: 2; grid-row: 1; }
  .v-rechts .v-cta { margin-top: 2.2rem; }
}
.licht .lijst li { border-bottom-color: rgba(10, 10, 10, .15); }
.licht .lijst--wel li::before { color: var(--paars); }

/* Coach */
.tekstlink { color: var(--paars-licht); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; }
.tekstlink:visited, .tekstlink:hover, .tekstlink:active, .tekstlink:focus { color: var(--paars-licht); }
.tekstlink:hover, .tekstlink:active { text-decoration-thickness: 3px; }
.functie { margin: -.2em 0 1.4rem; font-family: var(--kop); font-weight: 900; text-transform: uppercase; letter-spacing: .08em; font-size: .85rem; color: var(--paars-licht); }
.coach-grid { display: block; }
/* mobiel: het portret staat als band bovenin en loopt onderaan uit in het paars; de tekst begint eronder */
#coach .foto-laag { left: 0; right: 0; top: 0; height: min(88vw, 420px); -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 55%, transparent 100%); }
#coach .foto-laag::after { background: rgba(36,29,63,.30); }
#coach .foto-laag img { object-position: 50% 25%; }
#coach .wrap { padding-top: min(66vw, 320px); }
@media (min-width: 768px) {
  /* Het portret staat links over de volle hoogte (40% van de breedte) en loopt rechts en onderaan uit in het paars.
     Alle tekst staat in een kolom (.coach-tekst): de linkerrand is gelijk aan "Voor wie" in de kopbalk (js/main.js zet
     --coach-inspring), de rechterrand is de rechterrand van de pagina-inhoud. Terugval zonder script: 40% van de breedte. */
  #coach .wrap { padding-top: 0; }
  #coach .foto-laag { inset: 0 auto 0 0; height: auto; width: min(40%, calc(var(--coach-x, 100vw) + 40px)); -webkit-mask-image: linear-gradient(90deg, #000 42%, transparent 100%),linear-gradient(180deg, #000 38%, transparent 80%); mask-image: linear-gradient(90deg, #000 42%, transparent 100%),linear-gradient(180deg, #000 38%, transparent 80%); -webkit-mask-composite: source-in; mask-composite: intersect; }
  #coach .foto-laag::after { background: linear-gradient(180deg, rgba(36,29,63,.16) 0%, rgba(36,29,63,.16) 40%, rgba(36,29,63,.5) 72%, rgba(36,29,63,.6) 100%); }
  #coach .foto-laag img { object-position: 50% 20%; }
  .coach-grid .coach-label { display: block; margin-bottom: var(--gap-m, 19px); }
  .coach-tekst { margin-left: var(--coach-inspring, calc(40vw - (100vw - 100%) / 2 + 24px)); }
  .coach-tekst p { max-width: 60ch; } /* ca. 75 tekens per regel */
}

/* Ervaringen */
/* Ervaringen: zonder JavaScript staan alle quotes onder elkaar; met JavaScript wordt het een carrousel */
.carrousel { margin-top: 2.5rem; }
.slides { display: grid; gap: 20px; }
.quote { margin: 0; padding: clamp(22px, 4vw, 40px); border: 1px solid var(--lijn); background: rgba(244,244,241,.04); display: flex; flex-direction: column; justify-content: space-between; gap: 22px; }
.quote blockquote { margin: 0; }
.quote blockquote p { margin: 0; font-size: clamp(1.15rem, 3.2vw, 1.7rem); font-weight: 600; line-height: 1.4; }
.quote blockquote p::before { content: "\201C"; }
.quote blockquote p::after { content: "\201D"; }
.quote figcaption { border-top: 2px solid var(--paars-licht); padding-top: 12px; font-size: .9rem; }
.carrousel-aan .slides { gap: 0; }
/* Alle slides liggen in dezelfde cel: de hoogte is die van de langste quote, dus de pagina verspringt niet */
.carrousel-aan .slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s linear .25s; }
.carrousel-aan .slide.actief { opacity: 1; visibility: visible; transition: opacity .4s ease .25s; }
.car-bediening { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 8px; margin-top: 20px; } /* links, op de linkerrand van de kaart */
.car-pijl { width: 44px; height: 44px; flex: none; display: flex; align-items: center; justify-content: center; background: transparent; color: var(--wit); border: 2px solid var(--lijn); cursor: pointer; font-size: 1.3rem; line-height: 1; }
.car-pijl:hover { border-color: var(--paars-licht); color: var(--paars-licht); }
.car-stippen { display: flex; flex-wrap: nowrap; }
.car-stip { width: 24px; height: 44px; padding: 0; background: transparent; border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.car-stip::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: transparent; border: 2px solid var(--wit); opacity: .5; }
.car-stip[aria-current="true"]::before { background: var(--paars-licht); border-color: var(--paars-licht); opacity: 1; }
/* mobiel: alleen een indicator (niet aanraakbaar), kleiner zodat pijltje, stipjes en pijltje in één rij passen: 8 px stip, 12 px tussen de middens */
@media (max-width: 767px) {
  .car-stip { width: 12px; pointer-events: none; cursor: default; }
  .car-stip::before { width: 8px; height: 8px; }
}
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: reduce) { .carrousel-aan .slide, .carrousel-aan .slide.actief { transition: none; } }
.quote figcaption b { display: block; font-family: var(--kop); font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }

/* Investering */
.invest { display: grid; gap: 32px; }
@media (min-width: 800px) { .invest { grid-template-columns: 1fr 1fr; gap: 64px; } }
.prijs { border: 2px solid var(--zwart); background: #fff; padding: 28px; }
.prijs ul { list-style: none; padding: 0; margin: 0 0 1.4rem; }
.prijs-bedrag { margin: 0 0 .3rem; font-family: var(--kop-fam); font-weight: 800; font-size: calc(clamp(1.4rem, 4vw, 1.9rem) * var(--kop-schaal)); line-height: 1.15; color: var(--paars); }
.prijs-regel { margin: 0; font-weight: 600; }
.prijs li { padding: 10px 0; border-bottom: 1px solid rgba(10,10,10,.15); font-weight: 600; }

/* FAQ */
.faq { margin-top: 2.5rem; border-top: 2px solid currentColor; }
.faq details { border-bottom: 1px solid var(--lijn); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 44px 20px 0; position: relative; font-family: var(--kop); font-weight: 500; font-size: 1.1rem; line-height: 1.25; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 1.8rem; color: var(--paars-licht); }
.faq details[open] summary::after { content: "\2212"; }
.faq .antwoord { padding: 0 0 22px; max-width: 40em; }

/* Formulier */
.formulier { background: var(--paars); }
.form-grid { display: grid; gap: 40px; }
@media (min-width: 900px) { .form-grid { grid-template-columns: .8fr 1.2fr; gap: 72px; align-items: start; } }
form { display: grid; gap: 18px; }
label, legend { display: block; font-weight: 600; font-size: .95rem; margin-bottom: 6px; padding: 0; }
input[type=text], input[type=email], input[type=tel], textarea, select {
  width: 100%; min-height: 52px; padding: 12px 14px;
  font: inherit; font-size: 1rem; color: var(--zwart);
  background: var(--wit); border: 2px solid transparent; border-radius: 0;
}
textarea { min-height: 130px; resize: vertical; }
select {
  -webkit-appearance: none; appearance: none; cursor: pointer; text-overflow: ellipsis;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'%3E%3Cpath d='M1.5 1.5 8 8l6.5-6.5' fill='none' stroke='%230a0a0a' stroke-width='2.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 16px 10px;
}
select:required:invalid { color: #55555a; } /* "Kies een ..." in grijs, de gekozen waarde in zwart */
select option { color: var(--zwart); }
/* twee velden naast elkaar (E-mail/Telefoon, Locatie/Groep); op mobiel onder elkaar. De hulpzin loopt onder beide velden door. */
.veld-rij { display: grid; grid-template-columns: 1fr; }
.veld-rij > .veld + .veld { margin-top: 18px; }
.veld-rij > .veld-hulp { margin: 8px 0 0; }
.veld-rij > .veld-hulp:empty { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }
.akkoord { display: flex; gap: 12px; align-items: flex-start; font-weight: 400; font-size: .92rem; }
.akkoord input { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; flex: none; margin: 2px 0 0; display: grid; place-content: center; background: var(--wit); border: 2px solid transparent; border-radius: 0; cursor: pointer; }
.akkoord input::before { content: ""; width: 12px; height: 12px; background: var(--zwart); clip-path: polygon(14% 44%, 0 62%, 50% 100%, 100% 16%, 86% 0, 43% 62%); transform: scale(0); }
.akkoord input:checked::before { transform: scale(1); }
.klein { font-size: .85rem; opacity: .85; }
.form-verplicht { margin: 0 0 12px; }
.veld-fout { margin: 6px 0 0; padding: 6px 10px; background: #fff; color: #7a0010; border-left: 4px solid #7a0010; font-weight: 600; font-size: .9rem; line-height: 1.4; }
.veld-fout[hidden] { display: none; }
input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"] { border-color: #ffb3b3; }
.akkoord input[aria-invalid="true"] { border-color: #ffb3b3; }
/* Vanaf 768px staat de melding rechts op de regel van het label (geen extra hoogte, de lay-out springt niet).
   Alleen de melding bij het privacyvakje staat eronder. */
@media (min-width: 768px) {
  .veld { position: relative; }
  .veld:not(.veld-onder) > .veld-fout { position: absolute; top: 0; right: 0; margin: 0; padding: 1px 8px; font-size: .9rem; line-height: 1.5; }
  fieldset.veld > .veld-fout { top: -31px; } /* de padding-box van een fieldset begint onder de legend */
}
/* Zolang er foutmeldingen staan en het blok hoger is dan het scherm, wordt het snappen gepauzeerd (js/main.js) */
html.snap-aan.snap-pauze { scroll-snap-type: none; }
/* Een antwoord in de FAQ openen of sluiten verandert de hoogte van het blok; het snappen staat daar even uit (js/main.js), anders springt de pagina naar het volgende blok */
html.snap-aan.faq-pauze { scroll-snap-type: none; }
.form-knop { background: var(--zwart); border-color: var(--zwart); width: 100%; }
.form-knop:hover { background: var(--wit); color: var(--zwart); border-color: var(--wit); }
.form-knop[disabled] { opacity: .6; cursor: progress; }
.melding { padding: 16px; border: 2px solid var(--wit); font-weight: 600; }
.melding[hidden] { display: none; }
.melding--fout { background: #fff; color: #7a0010; border-color: #7a0010; }
/* Onzichtbaar spamfilter: voor mensen verborgen, bots vullen het in */
.val-veld { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Footer */
footer { background: var(--zwart); border-top: 1px solid var(--lijn); padding: 48px 0; font-size: .92rem; }
.foot { display: grid; gap: 28px; }
.foot img { height: 90px; width: auto; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot { gap: 40px; }
.foot-gegevens ul + ul { margin-top: .9rem; }
/* Drie kolommen vanaf 1025px: logo links, gegevens in het midden, links rechts; daaronder alles onder elkaar */
@media (min-width: 1025px) { .foot { grid-template-columns: 1fr 1fr 1fr; column-gap: 48px; align-items: start; } .foot-links { justify-self: end; } }

/* Mobiel (onder 768px): de enige "Plan kennismaking"-knop is die in de kopbalk (die blijft zichtbaar tijdens scrollen). De knoppen in de
   secties en in de hero zijn hier verborgen (inclusief hun ruimte); op desktop blijven ze zoals ze waren. */
@media (max-width: 767px) { .cta-rij { display: none; } }

/* Focus (toetsenbord): alleen bij :focus-visible, dus niet na een muisklik of aanraking. Geen outline of box-shadow: de focus is
   zichtbaar door dezelfde soort statusverandering als bij hover (kleurwissel, onderstreping). */
:focus-visible { outline: none; }
a:focus-visible { color: var(--focus); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.logo-link:focus-visible { background: rgba(244, 244, 241, .18); }
.nav a:focus-visible { opacity: 1; color: var(--paars-licht); text-underline-offset: 6px; }
.tekstlink:focus-visible { color: var(--wit); text-decoration-thickness: 3px; }
/* knoppen: lichtpaars wordt wit, paars wordt lichtpaars, zwart wordt wit; de tekst is dan donker en onderstreept */
.knop:focus-visible { background: var(--paars-licht); border-color: var(--paars-licht); color: var(--zwart); text-underline-offset: 5px; }
.header .knop:focus-visible, .donker .knop:focus-visible, .paars .knop:focus-visible,
.form-knop:focus-visible { background: var(--wit); border-color: var(--wit); color: var(--zwart); }
.car-pijl:focus-visible, .menu-knop:focus-visible { border-color: var(--paars-licht); color: var(--paars-licht); }
.faq summary:focus-visible { color: var(--focus); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.carrousel:focus-visible .quote { border-color: var(--paars-licht); }
input:focus-visible, textarea:focus-visible, select:focus-visible, input[aria-invalid="true"]:focus-visible, textarea[aria-invalid="true"]:focus-visible, select[aria-invalid="true"]:focus-visible { border-color: var(--zwart); }

/* Privacypagina */
.tekstpagina { padding: 56px 0 96px; }
.tekstpagina h1 { font-size: calc(clamp(2rem, 8vw, 3.6rem) * var(--kop-schaal)); }
.tekstpagina h2 { font-size: calc(1.35rem * var(--kop-schaal)); margin-top: 2.2em; letter-spacing: 0; }
.tekstpagina .wrap { max-width: 760px; }
.tekstpagina ul { padding-left: 1.2em; }
.tekstpagina address { font-style: normal; }
.tekstpagina .nw { white-space: nowrap; }

/* ==========================================================================
   Schermvullende secties met scroll-snap (alleen vanaf 768px breed en 500px hoog)
   - Elke sectie is minstens zo hoog als het scherm min de kopbalk, inhoud verticaal gecentreerd.
   - Maten schalen mee met de schermhoogte (svh).
   - Snappen is "mandatory": de pagina komt altijd op het begin van een blok tot stilstand. Is een blok hoger dan het
     scherm, dan blijft het ook volledig bereikbaar (de browser laat vrij scrollen binnen zo'n blok).
   - js/main.js meet per sectie of de inhoud past en zet de klassen .snap en .snap-veilig (terugval naar "proximity").
   - Snappen uitzetten: zet data-snappen="uit" op de <body> in index.html (of haal de regel
     html.snap-aan { scroll-snap-type ... } hieronder weg).
   - Smal of laag scherm (mobiel, ingezoomd tot 200%): niets hiervan geldt, de pagina scrolt vrij.
   ========================================================================== */
@media (min-width: 768px) and (min-height: 500px) {
  :root {
    --sec-pad: clamp(14px, 3.6svh, 52px);
    --gap-l: clamp(14px, 3.4svh, 40px);
    --gap-m: clamp(8px, 1.8svh, 22px);
  }
  html { scroll-padding-top: var(--kh-klein); }
  /* Blok voor blok: mandatory. Veilige terugval (proximity) alleen als js/main.js dat nodig vindt, zie daar. */
  html.snap-aan { scroll-snap-type: y mandatory; overflow-anchor: none; } /* anchoring + snappen: bij een hoogteverandering (FAQ, formulier) springt de pagina anders naar het volgende blok */
  #faq.vast-boven { justify-content: flex-start; padding-top: var(--faq-boven); } /* de FAQ groeit naar beneden; de vraag waarop je klikt blijft staan (js/main.js) */
  html.snap-aan.snap-veilig { scroll-snap-type: y proximity; }

  /* kopbalk zweeft over de pagina, zodat krimpen geen verspringen geeft */
  .header { position: fixed; top: 0; left: 0; right: 0; }
  .header ~ main.tekstpagina { padding-top: calc(var(--kh-groot) + 48px); }

  main > section {
    min-height: calc(100vh - var(--kh-klein));
    min-height: calc(100svh - var(--kh-klein));
    display: flex; flex-direction: column; justify-content: center;
    padding: var(--sec-pad) 0;
  }
  main > section.hero {
    min-height: 100vh; min-height: 100svh;
    padding-top: calc(var(--kh-groot) + clamp(6px, 1.6svh, 20px));
    padding-bottom: clamp(8px, 2svh, 24px);
  }
  main > section.hero { scroll-snap-align: start; } /* de hero snapt altijd aan de bovenkant, ook als js/main.js hem niet als passend meet */
  main > section.snap { scroll-snap-align: start; scroll-snap-stop: normal; } /* normal: een harde veeg mag blokken overslaan */
  footer.snap { scroll-snap-align: end; scroll-snap-stop: normal; } /* zonder dit is de footer met mandatory onbereikbaar */

  /* koppen en tekst schalen mee met de hoogte */
  h2 { font-size: calc(clamp(1.7rem, min(7.5vw, 6.4svh), 3.9rem) * var(--kop-schaal)); }
  .lead { font-size: clamp(1rem, min(3.2vw, 2.5svh), 1.4rem); }
  .label { margin-bottom: var(--gap-m); }
  .cta-rij { margin-top: var(--gap-l); }
  .hero .cta-rij { margin-top: var(--gap-m); }

  /* bio (de vier alinea's): 16px (15px onder 800px hoogte, zie onderaan), regelafstand 1,6, ruimte tussen de alinea's meeschalend met de
     hoogte (1,4 svh); kolombreedte in ch, zodat het bij beide maten ca. 72 tekens per regel is (maximaal ca. 83) */
  #coach { padding-block: clamp(10px, 2.4svh, 36px); }
  #coach p:not(.functie) { font-size: 16px; line-height: 1.6; max-width: 62ch; margin-bottom: clamp(9px, 1.4svh, 27px); }
  #coach .cta-rij { margin-top: var(--gap-m); }
  #coach .functie { font-size: .85rem; }

  /* ruimtes die meeschalen */
  .pijlers { margin-top: var(--gap-l); }
  .pijler { padding-block: clamp(10px, 2.4svh, 28px); }
  .cijfers { margin: var(--gap-l) 0 var(--gap-m); }
  .cijfer { padding-block: clamp(12px, 2.8svh, 32px); }
  .cijfer b { font-size: calc(clamp(2.4rem, min(14vw, 9.2svh), 6.5rem) * var(--kop-schaal)); }
  .cijfer span { font-size: clamp(.85rem, 1.9svh, 1.15rem); }
  .uitleg p { font-size: clamp(1.1rem, 1.9svh, 1.2rem); }
  @media (max-height: 800px) { /* lage schermen: lagere cijferblokken, zodat de sectie op één scherm blijft; de tekst blijft minimaal 1rem */
    .cijfer { padding-block: clamp(8px, 1svh, 32px); }
    .cijfer b { font-size: calc(clamp(2.4rem, min(14vw, 8svh), 6.5rem) * var(--kop-schaal)); }
  }
  .lijsten { margin-top: var(--gap-l); }
  .lijst li { padding-block: clamp(7px, 1.5svh, 14px); }
  .lijst li::before { top: clamp(7px, 1.5svh, 14px); }
  .groepen { margin-top: var(--gap-l); }
  .groep { padding: clamp(14px, 3svh, 28px); }
  #verwachten .verwachten { margin-top: 0; }
  .v-rechts .v-cta { margin-top: var(--gap-l); }
  .carrousel { margin-top: var(--gap-l); }
  .quote { padding: clamp(16px, 3.4svh, 40px); }
  .quote blockquote p { font-size: clamp(1.1rem, min(3.2vw, 3svh), 1.7rem); }
  .faq { margin-top: var(--gap-l); }
  .faq summary { padding-block: clamp(9px, 1.9svh, 20px); }
  .invest { gap: var(--gap-l) 64px; }
  .prijs { padding: clamp(14px, 3svh, 28px); }
  form { gap: clamp(7px, 1.29svh, 16.5px); } /* formulier ca. 8% compacter dan voorheen (alleen vanaf 768px) */
  input[type=text], input[type=email], input[type=tel], textarea, select { padding-block: 10px; }
  input[type=text], input[type=email], input[type=tel], select { min-height: clamp(34px, 4.9svh, 48px); }
  label:not(.akkoord), legend { margin-bottom: 5.5px; font-size: 1rem; }
  textarea { height: clamp(60px, 8.8svh, 73px); min-height: 0; }
  /* E-mail en telefoon naast elkaar, zodat het formulier ruim op één scherm past. De meldingen staan daar onder het veld. */
  .veld-rij { grid-template-columns: 1fr 1fr; column-gap: 12px; }
  .veld-rij > .veld + .veld { margin-top: 0; }
  .veld-rij > .veld-hulp { grid-column: 1 / -1; }
  /* in de gedeelde rijen staan de meldingen onder het veld (niet op de labelregel): daar is geen ruimte naast het label */
  form .veld-rij .veld > .veld-fout { position: static; margin: 6px 0 0; padding: 4px 8px; }
  .form-knop { min-height: clamp(38px, 5.76svh, 47.8px); padding-block: 10px; }
}
/* ===== De groepen: foto rechts met brede, zachte uitloop =====
   - De foto ligt als lichte, paarse (22%) laag in de achtergrond van de sectie en wordt met mix-blend-mode: multiply met die
     achtergrond gemengd: lichte delen nemen de paginakleur aan, alleen de donkere delen blijven zichtbaar.
   - De sectie is een eigen stapelcontext (isolation: isolate, via .met-foto), zodat de menging alleen met de achtergrond van
     deze sectie gebeurt. De blend staat op .foto-bg: een element met z-index vormt een eigen groep, dus op .foto-laag zelf
     mengt multiply niet met de sectieachtergrond.
   - Uitloop: masker in 9 stappen (easing, geen lineair verloop), horizontaal en verticaal gecombineerd met mask-composite.
   - Mobiel (< 768 px): de foto is een strook bovenaan die naar de lichte achtergrond uitloopt.
   - De kaarten blijven links van de handschoenen (max-width), zodat de foto zichtbaar blijft. */
#groepen { isolation: isolate; padding-top: calc(var(--sec-pad, 48px) + 150px); }
#groepen .foto-bg { mix-blend-mode: multiply; }
#groepen .foto-laag { inset: 0 0 auto 0; height: 190px; -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.0) 0.0%, rgba(0,0,0,0.074) 2.3%, rgba(0,0,0,0.259) 4.7%, rgba(0,0,0,0.5) 7.0%, rgba(0,0,0,0.741) 9.3%, rgba(0,0,0,0.926) 11.7%, rgba(0,0,0,1.0) 14.0%, rgba(0,0,0,1.0) 86.0%, rgba(0,0,0,0.926) 88.3%, rgba(0,0,0,0.741) 90.7%, rgba(0,0,0,0.5) 93.0%, rgba(0,0,0,0.259) 95.3%, rgba(0,0,0,0.074) 97.7%, rgba(0,0,0,0.0) 100.0%); mask-image: linear-gradient(180deg, rgba(0,0,0,0.0) 0.0%, rgba(0,0,0,0.074) 2.3%, rgba(0,0,0,0.259) 4.7%, rgba(0,0,0,0.5) 7.0%, rgba(0,0,0,0.741) 9.3%, rgba(0,0,0,0.926) 11.7%, rgba(0,0,0,1.0) 14.0%, rgba(0,0,0,1.0) 86.0%, rgba(0,0,0,0.926) 88.3%, rgba(0,0,0,0.741) 90.7%, rgba(0,0,0,0.5) 93.0%, rgba(0,0,0,0.259) 95.3%, rgba(0,0,0,0.074) 97.7%, rgba(0,0,0,0.0) 100.0%); }
#groepen .foto-laag::after { background: rgba(71,54,117,.22); }
/* browsers zonder mix-blend-mode: zonder menging, met lagere dekking, zodat de foto de tekst niet overheerst */
@supports not (mix-blend-mode: multiply) { #groepen .foto-bg { opacity: .75; } }
@media (min-width: 768px) {
  #groepen { padding-top: var(--sec-pad); }
  #groepen .foto-laag { inset: 0 0 0 auto; height: auto; width: 56%;
    -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0.0) 0.0%, rgba(0,0,0,0.034) 11.1%, rgba(0,0,0,0.126) 22.2%, rgba(0,0,0,0.259) 33.3%, rgba(0,0,0,0.417) 44.4%, rgba(0,0,0,0.583) 55.6%, rgba(0,0,0,0.741) 66.7%, rgba(0,0,0,0.874) 77.8%, rgba(0,0,0,0.966) 88.9%, rgba(0,0,0,1.0) 100.0%, #000 100%), linear-gradient(180deg, rgba(0,0,0,0.0) 0.0%, rgba(0,0,0,0.074) 2.3%, rgba(0,0,0,0.259) 4.7%, rgba(0,0,0,0.5) 7.0%, rgba(0,0,0,0.741) 9.3%, rgba(0,0,0,0.926) 11.7%, rgba(0,0,0,1.0) 14.0%, rgba(0,0,0,1.0) 86.0%, rgba(0,0,0,0.926) 88.3%, rgba(0,0,0,0.741) 90.7%, rgba(0,0,0,0.5) 93.0%, rgba(0,0,0,0.259) 95.3%, rgba(0,0,0,0.074) 97.7%, rgba(0,0,0,0.0) 100.0%);
    mask-image: linear-gradient(90deg, rgba(0,0,0,0.0) 0.0%, rgba(0,0,0,0.034) 11.1%, rgba(0,0,0,0.126) 22.2%, rgba(0,0,0,0.259) 33.3%, rgba(0,0,0,0.417) 44.4%, rgba(0,0,0,0.583) 55.6%, rgba(0,0,0,0.741) 66.7%, rgba(0,0,0,0.874) 77.8%, rgba(0,0,0,0.966) 88.9%, rgba(0,0,0,1.0) 100.0%, #000 100%), linear-gradient(180deg, rgba(0,0,0,0.0) 0.0%, rgba(0,0,0,0.074) 2.3%, rgba(0,0,0,0.259) 4.7%, rgba(0,0,0,0.5) 7.0%, rgba(0,0,0,0.741) 9.3%, rgba(0,0,0,0.926) 11.7%, rgba(0,0,0,1.0) 14.0%, rgba(0,0,0,1.0) 86.0%, rgba(0,0,0,0.926) 88.3%, rgba(0,0,0,0.741) 90.7%, rgba(0,0,0,0.5) 93.0%, rgba(0,0,0,0.259) 95.3%, rgba(0,0,0,0.074) 97.7%, rgba(0,0,0,0.0) 100.0%);
    -webkit-mask-composite: source-in; mask-composite: intersect; }
  #groepen .foto-laag img { object-position: 50% 78%; }
  #groepen .groepen { max-width: min(68%, calc(58vw - (100vw - 100%) / 2)); }
  #groepen .groep { padding: clamp(12px, 2.4svh, 22px) 20px; }
  #groepen .groep p { line-height: 1.45; margin-bottom: .55em; }
  #groepen .groep h3 { margin-bottom: .35em; }
}

/* ===== Maat van de koppen naar schermhoogte =====
   Schermvullende blokken (vanaf 768 px breed) moeten op één scherm passen. Barlow Condensed op 1,23 is op lagere schermen te hoog voor
   "Hoe het werkt"; daarom zakt de schaal: 1,23 vanaf 900 px hoog, 1,10 daaronder. Onder 800 px hoog (1280x720, 1024x768) krijgen de
   cijferblokken en de FAQ-vragen iets minder verticale ruimte. Gemeten marges (px): zie LEESMIJ.md, sectie 3d. */
@media (min-width: 768px) and (max-height: 899px) {
  :root { --kop-schaal: 1.10; }
}
@media (min-width: 768px) and (min-height: 500px) and (max-height: 799px) {
  .cijfer { padding-block: clamp(10px, 1.9svh, 32px); }
  .cijfers { margin: clamp(10px, 1.9svh, 40px) 0 clamp(6px, 1.2svh, 22px); }
  #werkwijze .uitleg p { line-height: 1.5; }
  .faq summary { padding-block: clamp(6px, 1.25svh, 20px); }
}
@media (min-width: 768px) and (max-width: 1099px) and (min-height: 500px) and (max-height: 799px) {
  #werkwijze .uitleg p { line-height: 1.4; } /* smalle kolom: meer regels, dus iets strakker (1024x768) */
}

/* ===== Hero op mobiel: de kop stopt links van het gezicht van de trainer =====
   In de mobiele foto staat het gezicht op 75% tot 98% van de breedte. De kop mag maximaal tot 16 px ervoor lopen, dus
   "GROEI ALS LEIDER." loopt over twee regels en de kop is drie regels hoog. */
@media (max-width: 767px) {
  .hero h1 { max-width: calc(75vw - var(--pad) - 16px); }
}

/* ===== Citaat (herbruikbaar blok, geen knop en geen menu-item) =====
   Effen wit (klasse .licht op de sectie), zwarte tekst in Barlow Condensed 800 in hoofdletters, links uitgelijnd op de rand van de koppen (.wrap),
   kort paars streepje erboven. Typografische aanhalingstekens in paars (iets groter dan de tekst); het openingsteken hangt links van de
   tekst (handmatig: Chrome kent hanging-punctuation niet; -0,447em = breedte van het teken in Barlow x 1,15). Geen tekens in de HTML:
   ze komen uit css. Bron (<figcaption>) is optioneel; zonder bron blijven streepje en ruimte kloppen. */
.citaat figure { margin: 0; }
.citaat blockquote { margin: 0; }
.citaat blockquote::before { content: ""; display: block; width: 64px; height: 4px; background: var(--paars); margin-bottom: clamp(16px, 3svh, 32px); }
.citaat blockquote p {
  margin: 0; max-width: 20em; font-family: var(--kop-fam); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.7rem, min(7vw, 9svh), 4.6rem); line-height: .95; letter-spacing: .015em; word-spacing: .06em;
  text-wrap: balance; text-indent: -.447em;
}
.citaat blockquote p::before, .citaat blockquote p::after { color: var(--paars); font-size: 1.15em; line-height: 0; }
.citaat blockquote p::before { content: "\201C"; }
.citaat blockquote p::after { content: "\201D"; }
.citaat figcaption {
  margin-top: clamp(14px, 3svh, 28px); font-family: var(--kop); font-weight: 900; font-size: .85rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--paars);
}
/* Mobiel: geen snap, dus geef het blok eigen hoogte; de tekst staat verticaal in het midden en het verloop is zichtbaar */
@media (max-width: 767px) {
  .citaat { min-height: 40svh; display: flex; align-items: center; }
  .citaat > .wrap { width: 100%; }
}

/* De coach op lage of smalle schermen: iets minder ruimte tussen de alinea's, zodat de sectie op één scherm blijft passen.
   Alleen deze sectie. */
@media (min-width: 768px) and (min-height: 500px) and (max-height: 799px), (min-width: 768px) and (min-height: 500px) and (max-width: 1099px) {
  #coach p:not(.functie) { margin-bottom: clamp(6px, .98svh, 21px); }
}
/* Lage schermen (onder 800px hoog): de bio is 15px */
@media (min-width: 768px) and (max-height: 799px) {
  #coach p:not(.functie) { font-size: 15px; }
}
/* Mobiel: 16px, regelafstand 1,6, alinea-ruimte 1,4 keer de gewone (17px) */
@media (max-width: 767px) {
  #coach p:not(.functie) { font-size: 16px; line-height: 1.6; margin-bottom: 23.8px; }
}