/* ═══════════════════════════════════════════════════════════
   JOACHIMPROVEMENT — stijl
   Gebouwd door Smeulders Digital.

   Zwart en wit, met één accent in beige. Grote vette koppen in
   hoofdletters (Bebas Neue), rustige tekst in Barlow. Foto's
   staan in zwart-wit; ze krijgen pas kleur als je eroverheen
   gaat. Zo blijft de hele site in twee tinten, wat de klant ook
   oplaadt.

   Eén achtergrond over de hele pagina. Het verschil tussen de
   blokken zit in de lucht ertussen en in de dunne lijnen, niet
   in de kleur.

   Beide lettertypes staan in fonts\ en worden zelf gehost. Geen
   framework, geen externe verbinding, dus ook geen cookiebanner.

   De beweging zit in css. Javascript zet alleen een klasse bij
   als een blok in beeld komt. Zonder javascript staat alles er
   gewoon, meteen zichtbaar.
   ═══════════════════════════════════════════════════════════ */


/* ── De lettertypes ────────────────────────────────────── */

@font-face {
  font-family: "Bebas Neue";
  src: url("../fonts/bebas-neue-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("../fonts/barlow-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("../fonts/barlow-400-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("../fonts/barlow-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("../fonts/barlow-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("../fonts/barlow-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}


/* ── De kleuren en maten ───────────────────────────────── */

:root {
  --zwart:       #070707;   /* de achtergrond, overal */
  --zwart-op:    #101010;   /* een vlak dat iets naar voren komt */
  --zwart-kaart: #141414;
  --wit:         #F3F1EC;   /* de tekst; net niet zuiver wit */
  --wit-zacht:   #A9A59D;   /* de kleine regels: bijschriften, voetnoten */
  --wit-lees:    #D6D2CA;   /* alle lopende tekst onder een titel */
  --beige:       #CBBCA3;   /* het ene accent */
  --beige-diep:  #8F8270;
  --lijn:        rgba(243, 241, 236, .14);
  --lijn-sterk:  rgba(243, 241, 236, .38);

  --kopletter: "Bebas Neue", "Arial Narrow", Impact, sans-serif;
  --letter:    "Barlow", "Helvetica Neue", Arial, sans-serif;

  --breed: 86rem;
  --smal:  46rem;
  --kant:  clamp(1.25rem, 5vw, 4.5rem);
  --lucht: clamp(3.25rem, 7vw, 6.25rem);   /* minder zwarte lucht tussen de blokken (Joachim, 24 september 2026) */

  --veer: cubic-bezier(.2, .7, .2, 1);
}


/* ── Basis ─────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; background: var(--zwart); }

body {
  margin: 0;
  background: var(--zwart);
  color: var(--wit);
  font-family: var(--letter);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Zolang het menu op een gsm open staat, mag de pagina niet meescrollen. */
html.menu-open { overflow: hidden; }

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--kopletter);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: 1;
  margin: 0;
}
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

::selection { background: var(--beige); color: var(--zwart); }

:focus-visible { outline: 2px solid var(--beige); outline-offset: 4px; }

.overslaan {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--wit); color: var(--zwart);
  padding: .75rem 1.25rem; text-decoration: none;
}
.overslaan:focus { left: 0; }

/* De foto's stonden tot 7 september 2026 in zwart-wit (een filter op elk
   beeld). Op vraag van Joachim staan ze nu in kleur, met een lichte zwarte
   waas eroverheen: die waas zit in de donkere lagen (::after) en in de
   doorzichtigheid van elk beeld, zodat de witte tekst leesbaar blijft. Wil
   je ooit terug naar zwart-wit, zet dan hier een regel:
   .held__achter img, ... { filter: grayscale(1) contrast(1.05); } */


/* ── De overgangen ─────────────────────────────────────────
   Elk blok met de klasse rijs komt op als het in beeld schuift.
   Dit hangt aan de klasse js op <html>; zonder javascript staat
   gewoon alles er. */

.js .rijs {
  opacity: 0;
  transform: translateY(1.75rem);
  transition: opacity .9s var(--veer), transform .9s var(--veer);
}
.js .rijs.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .rijs { opacity: 1 !important; transform: none !important; transition: none !important; }
}


/* ── Terugkerende onderdelen ───────────────────────────── */

.binnen {
  max-width: var(--breed);
  margin: 0 auto;
  padding-inline: var(--kant);
}
.binnen--smal { max-width: calc(var(--smal) + var(--kant) * 2); }

section { padding-block: var(--lucht); position: relative; }

/* De kleine woordjes boven de grote titels. Na de feedback van 7 september
   2026 een maat groter, en de grote titels een maat kleiner: Joachim wilde
   de verhouding tussen die twee anders. */
.label {
  font-family: var(--letter);
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--beige);
  margin: 0 0 1.25rem;
}
.label--groot { font-size: 1.0625rem; }

.titel {
  font-size: clamp(2.5rem, 1.25rem + 4.5vw, 5rem);
  line-height: .95;
  margin: 0 0 1.5rem;
  max-width: 16ch;
}
.titel--rustig { font-size: clamp(2.25rem, 1.25rem + 3.75vw, 4.25rem); }

.inleiding {
  max-width: 52ch;
  font-size: 1.125rem;
  color: var(--wit-zacht);
  margin-bottom: 2.5rem;
}

.verder { margin-top: 3rem; }

/* Een link die geen knop is. De streep groeit onder het woord door. */
.lijn {
  color: inherit;
  text-decoration: none;
  position: relative;
  padding-bottom: 3px;
}
.lijn::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--lijn-sterk);
}
.lijn::before {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--beige);
  transition: width .5s var(--veer);
  z-index: 1;
}
.lijn:hover::before, .lijn:focus-visible::before { width: 100%; }

.lijn--groot {
  font-family: var(--kopletter);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  text-transform: uppercase;
  letter-spacing: .03em;
  display: inline-block;
  padding-bottom: 5px;
}

.knoppen { display: flex; flex-wrap: wrap; gap: .75rem; }

.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: 1rem 1.75rem;
  font-family: var(--letter);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 0;
  cursor: pointer;
  transition: background-color .3s var(--veer), color .3s var(--veer),
              border-color .3s var(--veer), transform .3s var(--veer);
}
.knop:active { transform: translateY(1px); }

.knop--vol { background: var(--wit); color: var(--zwart); border-color: var(--wit); }
.knop--vol:hover, .knop--vol:focus-visible { background: var(--beige); border-color: var(--beige); }

.knop--rand { background: transparent; color: var(--wit); border-color: var(--lijn-sterk); }
.knop--rand:hover, .knop--rand:focus-visible { border-color: var(--wit); background: rgba(243,241,236,.06); }


/* ── De melding ────────────────────────────────────────── */
/* Beige op de hele breedte. Het staat maar op één plek op de hele
   site in die vorm, zodat het precies één ding betekent: er is nieuws. */

.omroep {
  background: var(--beige);
  color: var(--zwart);
  text-align: center;
  position: relative;
  z-index: 45;
}
.omroep__tekst {
  margin: 0;
  padding: .7rem var(--kant);
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}


/* ── De kop ────────────────────────────────────────────── */
/* Zweeft over het eerste scherm en krijgt pas een achtergrond
   zodra je voorbij de eerste pixels bent. */

.kop {
  position: sticky;
  top: 0;
  z-index: 40;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color .5s var(--veer), border-color .5s var(--veer);
}
.kop.is-vast {
  background: rgba(7, 7, 7, .82);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  border-bottom-color: var(--lijn);
}
.kop__binnen {
  max-width: var(--breed);
  margin: 0 auto;
  padding: 1.1rem var(--kant);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.merk { text-decoration: none; display: inline-flex; align-items: center; flex: 0 0 auto; }
.merk__logo {
  width: auto;
  /* Groter, op vraag van Joachim (13 september 2026). Met het scherpe logo
     mocht het weer een tikje kleiner. */
  height: clamp(1.75rem, 3.9vw, 3rem);   /* op een gsm kleiner, zodat MENU er volledig naast past */
  transition: opacity .3s var(--veer);
}
.merk:hover .merk__logo { opacity: .75; }
.merk__naam {
  font-family: var(--kopletter);
  font-size: 1.75rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--wit);
}

.menuknop {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  background: none;
  border: 0;
  padding: .5rem 0;
  font-family: inherit;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--wit);
  cursor: pointer;
}
.menuknop__streep {
  width: 1.5rem; height: 2px;
  background: currentColor;
  box-shadow: 0 6px 0 currentColor, 0 -6px 0 currentColor;
  transition: box-shadow .3s var(--veer), transform .3s var(--veer);
}
.menuknop[aria-expanded="true"] .menuknop__streep { box-shadow: none; transform: rotate(45deg); }

.menu__lijst { list-style: none; margin: 0; padding: 0; }
.menu__sub { list-style: none; margin: 0; padding: 0; }

.menu__lijn, .menu__subl {
  text-decoration: none;
  color: var(--wit);
  position: relative;
}
.menu__pijl {
  background: none;
  border: 0;
  padding: .25rem;
  color: var(--wit-zacht);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}
.menu__pijl svg { width: .7rem; height: .5rem; transition: transform .3s var(--veer); }
.menu__pijl[aria-expanded="true"] svg { transform: rotate(180deg); }

/* ── Het menu op een groot scherm ── */
@media (min-width: 64rem) {
  .menuknop { display: none; }
  .menu { display: flex; align-items: center; gap: 2.25rem; }
  .menu__onder { display: none; }
  .menu__lijst { display: flex; align-items: center; gap: 2rem; }
  .menu__item { position: relative; display: flex; align-items: center; gap: .35rem; }

  .menu__lijn {
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    padding: .5rem 0;
  }
  .menu__lijn::after {
    content: "";
    position: absolute; left: 0; bottom: .1rem;
    width: 0; height: 1px;
    background: var(--beige);
    transition: width .4s var(--veer);
  }
  .menu__lijn:hover::after, .menu__lijn:focus-visible::after, .menu__lijn.is-hier::after { width: 100%; }
  .menu__lijn.is-hier { color: var(--beige); }

  /* Het uitklapmenu. Open bij muis erover, bij focus, of na een klik op
     het pijltje (dat zet javascript is-open). */
  .menu__sub {
    position: absolute;
    top: calc(100% + .5rem);
    left: -1.25rem;
    min-width: 16rem;
    padding: .75rem 0;
    background: rgba(12, 12, 12, .97);
    border: 1px solid var(--lijn);
    -webkit-backdrop-filter: blur(14px);
            backdrop-filter: blur(14px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-.5rem);
    transition: opacity .3s var(--veer), transform .3s var(--veer), visibility 0s .3s;
  }
  /* Een onzichtbare brug tussen de link en het menu, anders sluit het als
     je muis de halve rem ertussen oversteekt. */
  .menu__sub::before { content: ""; position: absolute; left: 0; right: 0; top: -.6rem; height: .6rem; }
  .menu__item--sub:hover .menu__sub,
  .menu__item--sub:focus-within .menu__sub,
  .menu__item--sub.is-open .menu__sub {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .3s var(--veer), transform .3s var(--veer), visibility 0s;
  }
  .menu__subl {
    display: block;
    padding: .65rem 1.25rem;
    font-size: .9375rem;
    font-weight: 500;
    color: var(--wit-zacht);
    transition: color .2s var(--veer), padding-left .3s var(--veer);
  }
  .menu__subl:hover, .menu__subl:focus-visible, .menu__subl.is-hier { color: var(--wit); padding-left: 1.6rem; }
  .menu__subl.is-hier { color: var(--beige); }

  .menu__cta { padding: .8rem 1.4rem; }
}

/* ── Het menu op een gsm: een scherm dat openklapt ── */
@media (max-width: 63.999rem) {
  .kop__binnen { padding-block: 1rem; }
  .menu {
    display: none;
    position: fixed;
    left: 0; right: 0;
    top: var(--overlap, 4rem);
    bottom: 0;
    z-index: 39;
    flex-direction: column;
    padding: 1.5rem var(--kant) 2rem;
    background: var(--zwart);
    overflow-y: auto;
    border-top: 1px solid var(--lijn);
  }
  .menu.is-open { display: flex; }
  .kop:has(.menu.is-open), html.menu-open .kop { background: var(--zwart); border-bottom-color: var(--lijn); }

  /* Zolang het menu open staat, staat de pagina vast en blijft de kopbalk
     met de sluitknop bovenaan. Eerst kon je op een gsm onder het open
     menu doorscrollen, en dan schoof de kopbalk weg: dat was de bug die
     Joachim zag. Javascript zet is-vast op body en bewaart de scrolstand. */
  html.menu-open .kop { position: fixed; top: 0; left: 0; right: 0; }
  body.is-vast { position: fixed; left: 0; right: 0; overflow: hidden; }

  .menu__item { border-bottom: 1px solid var(--lijn); padding: 1rem 0; }
  .menu__item--sub { display: grid; grid-template-columns: 1fr auto; align-items: center; }
  .menu__lijn {
    font-family: var(--kopletter);
    font-size: clamp(2.5rem, 10vw, 3.5rem);
    text-transform: uppercase;
    letter-spacing: .02em;
    line-height: 1;
  }
  .menu__lijn.is-hier { color: var(--beige); }
  .menu__pijl { display: none; }
  .menu__sub { grid-column: 1 / -1; margin-top: .75rem; display: grid; gap: .2rem; }
  .menu__subl {
    display: block;
    padding: .35rem 0;
    font-size: 1.0625rem;
    color: var(--wit-zacht);
  }
  .menu__subl.is-hier { color: var(--beige); }
  .menu__cta { margin-top: 1.5rem; width: 100%; }
  .menu__onder {
    margin-top: auto;
    padding-top: 2rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    font-size: .875rem;
    color: var(--wit-zacht);
  }
  .menu__onder a { color: inherit; text-decoration: none; }
}


/* ── Het eerste scherm ─────────────────────────────────── */
/* De kopbalk zweeft erover, dus het eerste scherm begint helemaal
   bovenaan de pagina. */

/* Precies één scherm hoog, met de tekst in het midden van wat er onder de
   kopbalk overblijft. Zo staat de knop Plan een intakegesprek altijd in
   beeld zonder te scrollen, ook op een laag scherm. De titel wordt daarvoor
   ook op de hoogte van het venster begrensd (zie .held__titel). */
.held {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 100svh;
  margin-top: calc(-1 * var(--overlap, 5rem));
  /* Vlak onder de kopbalk beginnen: Joachim vond de ruimte erboven te groot. */
  padding-top: calc(var(--overlap, 5rem) + clamp(2rem, 6vh, 4rem));
  padding-bottom: 0;
  overflow: hidden;
  isolation: isolate;
}
.held__achter { position: absolute; inset: 0; z-index: -3; }
.held__achter img {
  width: 100%; height: 100%;
  /* De atleet staat rechts in de uitsnede; op een smal scherm kiezen we
     de rechterkant van de foto, zodat hij ook daar naast de tekst blijft. */
  object-fit: cover; object-position: 75% 45%;
  /* Het beeld schuift traag mee omhoog terwijl je scrolt. */
  transform: translateY(calc(var(--rol, 0) * 14vh)) scale(1.06);
  will-change: transform;
}
/* De lichte zwarte waas over de foto: onderaan dicht, waar de tekst staat,
   naar boven toe opener, zodat de kleur van de foto erdoor komt. */
.held::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, var(--zwart) 0%, rgba(7,7,7,.7) 35%, rgba(7,7,7,.3) 70%, rgba(7,7,7,.45) 100%);
}
.held--geen-foto::after { background: none; }

.held__binnen { width: 100%; padding-block: 0 clamp(1.5rem, 4vh, 3rem); }

/* Het kleine zinnetje mag opvallen, want de foto erachter leidt af. Het
   staat op wit met een dun beige lijntje eronder. */
.held__label {
  font-size: clamp(.9375rem, .85rem + .4vw, 1.125rem);
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--wit);
  margin: 0 0 1.25rem;
  padding-bottom: .75rem;
  border-bottom: 2px solid var(--beige);
  display: inline-block;
}
/* De titel valt bewust in drie regels (REALISTISCH. / DOELGERICHT. /
   BETER.) en blijft zo in de linkerhelft. De rechterhelft is voor de
   atleet op de foto; die mag niet achter de tekst komen. De maat hangt
   ook aan de hoogte van het venster (13vh per regel), zodat drie regels
   plus de tekst en de knop altijd in één scherm passen. */
.held__titel {
  font-size: clamp(3rem, min(1rem + 7.5vw, 13vh), 7.5rem);
  line-height: .9;
  letter-spacing: .005em;
  max-width: 12ch;
  margin: 0 0 1.25rem;
}
.held__titel--club { font-size: clamp(3rem, min(1.25rem + 7vw, 13vh), 7.5rem); max-width: 16ch; }
/* De tekst en de knop mogen niet wegvagen: ze staan vol wit en blijven
   staan terwijl je scrolt. */
.held__tekst {
  /* Breed genoeg voor de langste regel die Joachim zelf afbrak (16 september
     2026); op een gsm breekt de browser toch waar nodig. */
  max-width: 46ch;
  font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem);
  font-weight: 500;
  /* Strakker op elkaar dan gewone tekst: het zijn korte regels die Joachim
     zelf afbreekt (Brian, 16 september 2026). */
  line-height: 1.45;
  color: var(--wit);
  margin-bottom: 1.75rem;
}
.held__knoppen { margin-top: .5rem; }

/* ── Hoe het eerste scherm opkomt ── */
.js .held__label {
  opacity: 0;
  letter-spacing: .5em;
  animation: labelOp 1.2s var(--veer) .15s forwards;
}
@keyframes labelOp { to { opacity: 1; letter-spacing: .2em; } }

.js .held__titel {
  opacity: 0;
  clip-path: inset(0 0 100% 0);
  transform: translateY(1.5rem);
  animation: titelOp 1.2s var(--veer) .35s forwards;
}
@keyframes titelOp { to { opacity: 1; clip-path: inset(0 0 -20% 0); transform: none; } }

.js .held__tekst, .js .held .feiten, .js .held__knoppen {
  opacity: 0;
  transform: translateY(1.5rem);
  animation: opkomen 1s var(--veer) forwards;
}
.js .held__tekst    { animation-delay: .8s; }
.js .held .feiten   { animation-delay: .95s; }
.js .held__knoppen  { animation-delay: 1.05s; }
@keyframes opkomen { to { opacity: 1; transform: none; } }

/* De tekst schuift iets sneller weg dan de foto terwijl je scrolt. Dat
   verschil in snelheid is wat diepte geeft. Ze vervaagt niet meer: dat
   vond Joachim te veel. */
.held__binnen {
  transform: translateY(calc(var(--rol, 0) * 5vh));
  will-change: transform;
}

/* De foto komt binnen door traag uit te zoomen. */
.js .held__achter img { animation: heldZoem 2.4s var(--veer) backwards; }
@keyframes heldZoem { from { transform: scale(1.18); } }

@media (prefers-reduced-motion: reduce) {
  /* Alles meteen zichtbaar, en elk onderdeel met zijn eigen letterafstand.
     Tot 16 september 2026 kregen ook de tekst en de knop hier .2em, waardoor
     de zin onder de titel uit elkaar getrokken stond bij wie minder beweging
     vraagt. */
  .js .held__label, .js .held__titel, .js .held__tekst, .js .held .feiten, .js .held__knoppen {
    opacity: 1; transform: none; clip-path: none; animation: none;
  }
  .js .held__label { letter-spacing: .2em; }
  .js .held__titel { letter-spacing: .005em; }
  .held__achter img, .held__binnen { transform: none; opacity: 1; animation: none; }
}

@media (max-width: 47.999rem) {
  .held { min-height: 100svh; }
  .held__tekst { font-size: 1rem; max-width: 34ch; margin-bottom: 1.5rem; }
  .held__binnen { padding-bottom: 2rem; }
}


/* ── Kopblok van een binnenpagina ──────────────────────── */

.paginakop {
  padding-top: calc(var(--overlap, 5rem) + clamp(3rem, 8vw, 6rem));
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  margin-top: calc(-1 * var(--overlap, 5rem));
  position: relative;
  isolation: isolate;
}
.paginakop__titel {
  font-size: clamp(3rem, 1.25rem + 7vw, 7rem);
  line-height: .9;
  max-width: 12ch;
  margin: 0 0 1.25rem;
}
.paginakop__tekst { max-width: 54ch; font-size: 1.125rem; color: var(--wit-zacht); }
.paginakop__badge { margin: 1.75rem 0 0; }
.paginakop__badge img { height: 1rem; width: auto; opacity: .85; }
/* Wie ben ik?: de naam met de titel erachter is breder dan een gewone titel. */
.paginakop__titel--breed { max-width: none; }
/* Wie ben ik?: minder lucht onder de naam, zodat de foto en het verhaal
   meteen in beeld komen (Brian, 7 september 2026). */
.paginakop--naam { padding-bottom: 0; }
.paginakop--naam + .over--pagina { padding-top: clamp(2rem, 4vw, 3rem); }
.paginakop__tekst p { color: inherit; }
.paginakop__noot {
  margin-top: 1.5rem;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--beige);
}

/* Met een foto erachter: het blok wordt een halve pagina hoog. */
.paginakop--beeld {
  /* Was 72svh; korter, zodat er minder zwart onder de titel staat. */
  min-height: 62svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}
.paginakop__achter { position: absolute; inset: 0; z-index: -2; }
.paginakop__achter img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 45%;
  transform: translateY(calc(var(--rol, 0) * 12vh)) scale(1.06);
}
.paginakop--beeld::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, var(--zwart) 0%, rgba(7,7,7,.72) 40%, rgba(7,7,7,.4) 100%);
}
.paginakop--beeld .paginakop__tekst { color: #D6D2CA; }
.js .paginakop__achter img { animation: heldZoem 2.4s var(--veer) backwards; }
@media (prefers-reduced-motion: reduce) {
  .paginakop__achter img { transform: none; animation: none; }
}


/* ── De balk met ankers boven aanbod en prijzen ────────── */

.ankernav {
  position: sticky;
  top: var(--kophoogte, 5rem);
  z-index: 30;
  background: rgba(7, 7, 7, .88);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  border-block: 1px solid var(--lijn);
}
.ankernav ul {
  list-style: none;
  margin: 0 auto;
  max-width: var(--breed);
  padding: .9rem var(--kant);
  display: flex;
  gap: 1.75rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.ankernav ul::-webkit-scrollbar { display: none; }
.ankernav a {
  text-decoration: none;
  white-space: nowrap;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--wit-zacht);
  padding-bottom: 3px;
  position: relative;
  transition: color .3s var(--veer);
}
.ankernav a::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--beige);
  transition: width .4s var(--veer);
}
.ankernav a:hover, .ankernav a:focus-visible, .ankernav a.is-hier { color: var(--wit); }
.ankernav a:hover::after, .ankernav a.is-hier::after { width: 100%; }


/* ── De drie wegen (tegels) ────────────────────────────── */

.wegen__kop { margin-bottom: clamp(2rem, 4vw, 3.5rem); }

.tegels {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--lijn);
  border: 1px solid var(--lijn);
}
@media (min-width: 48rem) { .tegels { grid-template-columns: repeat(3, 1fr); } }

.tegel { background: var(--zwart); }
/* Iets minder hoog dan eerst: Joachim vond de tegels te groot. */
.tegel__link {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  text-decoration: none;
  color: var(--wit);
  background: var(--zwart-op);
}
@media (max-width: 47.999rem) { .tegel__link { aspect-ratio: 16 / 10; } }

.tegel__beeld { position: absolute; inset: 0; }
.tegel__beeld img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .7;
  transform: scale(1.02);
  transition: transform 1.1s var(--veer), opacity .6s var(--veer);
}
.tegel__link::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(7,7,7,.92) 0%, rgba(7,7,7,.3) 55%, rgba(7,7,7,.15) 100%);
}
.tegel__link:hover .tegel__beeld img, .tegel__link:focus-visible .tegel__beeld img {
  transform: scale(1.07);
  opacity: .9;
}

.tegel__nr {
  position: absolute; left: 1.5rem; top: 1.25rem; z-index: 2;
  font-family: var(--kopletter);
  font-size: 1.25rem;
  letter-spacing: .06em;
  color: var(--beige);
}
.tegel__tekst {
  position: absolute; left: 1.5rem; right: 1.5rem; bottom: 1.5rem; z-index: 2;
  display: grid; gap: .5rem;
}
.tegel__naam {
  font-family: var(--kopletter);
  font-size: clamp(2.25rem, 1.5rem + 2.2vw, 3.25rem);
  line-height: .95;
  text-transform: uppercase;
}
.tegel__bij { font-size: .9375rem; color: #C9C5BD; max-width: 30ch; }
.tegel__pijl {
  position: absolute; right: 1.5rem; top: 1.1rem; z-index: 2;
  font-size: 1.5rem;
  color: var(--wit);
  transition: transform .4s var(--veer);
}
.tegel__link:hover .tegel__pijl { transform: translate(.35rem, -.35rem); }


/* ── HYROX Saturday Club in de kijker ──────────────────── */

/* Past in één scherm op een pc: nooit hoger dan het venster. */
.spot {
  position: relative;
  min-height: min(80svh, 44rem);
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  border-block: 1px solid var(--lijn);
  /* Minder lucht dan een gewone sectie: de tekst mag niet te laag hangen
     (feedback Brian, 7 september 2026). */
  padding-block: clamp(2.5rem, 4vw, 4rem);
}
.spot--klein { min-height: 60svh; }
.spot__achter { position: absolute; inset: 0; z-index: -2; }
.spot__achter img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 70% 40%;
  opacity: .7;
}
.spot::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, var(--zwart) 15%, rgba(7,7,7,.75) 50%, rgba(7,7,7,.25) 100%),
              linear-gradient(to top, var(--zwart), transparent 30%);
}
.spot__binnen { width: 100%; }
.spot__titel {
  font-size: clamp(3rem, 1.25rem + 6vw, 6.5rem);
  line-height: .9;
  max-width: 10ch;
  margin: 0 0 1.5rem;
}
.spot__tekst { max-width: 44ch; font-size: 1.125rem; color: #D6D2CA; margin-bottom: 2.5rem; }
.spot .knoppen { margin-top: 2.5rem; }


/* ── HYROX Simulation Sunday op de startpagina ─────────── */

.simulatie { border-top: 1px solid var(--lijn); }
/* De tekst staat onder de titel, zoals in de andere blokken; niet ernaast
   (Brian, 16 september 2026). */
.simulatie__raster { display: grid; gap: 1.5rem; }
.simulatie__tekst p { font-size: 1.125rem; line-height: 1.7; color: #D6D2CA; max-width: 56ch; }
.simulatie__tekst .verder { margin-top: 1.75rem; }

/* Een anker (bijvoorbeeld hyrox.php#dienst-hyrox-simulation-sunday) landt onder
   de vaste kopbalk in plaats van erachter. Zonder dit leek de link naar de
   Simulation Sunday bij "De programma's" uit te komen (16 september 2026). */
.dienst[id], section[id] { scroll-margin-top: calc(var(--kophoogte, 5rem) + 1.5rem); }

@media (max-width: 47.999rem) {
  .spot { min-height: 0; padding-block: var(--lucht); }
  .spot__achter img { object-position: 60% 30%; opacity: .45; }
  .spot::after { background: linear-gradient(to top, var(--zwart) 10%, rgba(7,7,7,.7) 60%, rgba(7,7,7,.5) 100%); }
}

/* De feiten: wanneer, waar, volgende. */
.feiten {
  margin: 0;
  display: grid;
  gap: 1.5rem 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  max-width: 44rem;
}
.feiten--held { margin-bottom: 2rem; }
.feiten--staand { grid-template-columns: 1fr; max-width: none; gap: 1.25rem; }
.feit dt {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--beige);
  margin-bottom: .35rem;
}
.feit dd {
  margin: 0;
  font-family: var(--kopletter);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: 1.05;
}
.feit__bij {
  display: block;
  font-family: var(--letter);
  font-size: .875rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--wit-zacht);
  margin-top: .25rem;
}
/* De datum onder het grote woord, even groot als dat woord. */
.feit__regel { display: block; }
.feit dd .lijn { font-family: var(--letter); font-size: 1.0625rem; text-transform: none; letter-spacing: 0; }


/* ── De lichtband ──────────────────────────────────────── */
/* Schuift traag naar links. De rij staat er twee keer in; de
   animatie schuift precies één helft op en springt terug, en dat
   zie je niet zolang de tweede helft gelijk is aan de eerste. */

.loper {
  overflow: hidden;
  border-block: 1px solid var(--lijn);
  padding-block: 1.25rem;
  background: var(--zwart);
}
.loper__spoor {
  display: flex;
  align-items: center;
  white-space: nowrap;
  width: max-content;
  animation: loper 38s linear infinite;
}
.loper__stuk {
  font-family: var(--kopletter);
  font-size: clamp(2.25rem, 1.5rem + 3.5vw, 4.5rem);
  text-transform: uppercase;
  letter-spacing: .02em;
  padding-inline: 1.5rem;
  color: var(--wit);
}
.loper__ster { color: var(--beige); font-size: .6rem; }
@keyframes loper { to { transform: translateX(-50%); } }
.loper:hover .loper__spoor { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .loper__spoor { animation: none; width: auto; overflow: hidden; }
}


/* ── Wie ben ik ────────────────────────────────────────── */

.over__raster { display: grid; gap: clamp(2.5rem, 6vw, 5rem); }
@media (min-width: 60rem) {
  .over__raster { grid-template-columns: 5fr 6fr; align-items: center; }
  .over--pagina .over__raster { align-items: start; }
}
.over__beeld { margin: 0; position: relative; overflow: hidden; background: var(--zwart-op); }
.over__beeld img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 1.2s var(--veer); }
.over__beeld:hover img { transform: scale(1.03); }
.over__beeld::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(7,7,7,.55));
  pointer-events: none;
}
/* De foto blijft alleen op een groot scherm meelopen. Op een gsm stond ze
   vast over de tekst heen; dat was de klacht van Joachim. Daar wordt ze
   ook minder hoog, zodat de tekst meteen in beeld komt. */
@media (min-width: 60rem) {
  .over__beeld--vast { position: sticky; top: calc(var(--kophoogte, 5rem) + 2rem); }
}
@media (max-width: 59.999rem) {
  /* Op een gsm: 4 op 3, met de uitsnede lager in de foto, zodat zijn schouders
     in beeld staan en de zaal boven hem niet (Brian, 14 september 2026). */
  .over__beeld img { aspect-ratio: 4 / 3; max-height: 22rem; object-position: center 45%; }
}
.over__tekst p { max-width: 54ch; color: var(--wit-zacht); }
.over__tekst .inleiding { color: var(--wit); }
.over__tekst--lang p { font-size: 1.125rem; line-height: 1.75; color: #D6D2CA; margin-bottom: 1.5em; }
.over__badge { margin-top: 3rem; }
.over__badge img { width: min(18rem, 60%); }

/* Wie ben ik?: wie en waar ik coach, naast elkaar. */
.coach { border-top: 1px solid var(--lijn); }
.coach__raster { display: grid; gap: 3rem; }
/* Wie coach ik? en Waar coach ik? staan onder elkaar, ook op een breed
   scherm (Brian, 7 september 2026). */
@media (min-width: 60rem) { .coach__raster { gap: 4.5rem; } }
.coach__tekst p { font-size: 1.125rem; line-height: 1.75; color: #D6D2CA; max-width: 52ch; margin-bottom: 1.25em; }
.coach__plek {
  font-family: var(--kopletter);
  font-size: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
  text-transform: uppercase;
  line-height: 1;
  margin: 0 0 1rem;
}
.coach__adres { font-size: 1.125rem; line-height: 1.6; color: var(--wit-zacht); margin-bottom: 1.25rem; }
.coach__adres strong { color: var(--wit); font-weight: 600; }

.troeven {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 2rem 0 0;
  display: grid;
  gap: 1.5rem;
  border-top: 1px solid var(--lijn);
}
.troeven li { display: grid; gap: .3rem; }
.troeven strong {
  font-family: var(--kopletter);
  font-weight: 400;
  font-size: 1.5rem;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.troeven span { color: var(--wit-zacht); font-size: .9375rem; max-width: 50ch; }


/* ── Stappen (aanpak, werkwijze, verloop) ──────────────── */

.stappen {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2.5rem 2rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.stap {
  border-top: 1px solid var(--lijn-sterk);
  padding-top: 1.5rem;
  display: grid;
  gap: .6rem;
  align-content: start;
}
.stap__nr {
  font-family: var(--kopletter);
  font-size: 1.125rem;
  letter-spacing: .08em;
  color: var(--beige);
}
.stap h3 { font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem); }
.stap p { font-size: .9375rem; color: var(--wit-zacht); max-width: 36ch; }

.stappen--staand { grid-template-columns: 1fr; max-width: 52rem; gap: 0; }
.stappen--staand .stap {
  grid-template-columns: 4rem 1fr;
  grid-template-rows: auto auto;
  gap: .35rem 1.5rem;
  padding-block: 1.75rem;
  border-top: 1px solid var(--lijn);
}
.stappen--staand .stap:last-child { border-bottom: 1px solid var(--lijn); }
.stappen--staand .stap__nr { grid-row: 1 / 3; align-self: start; padding-top: .35rem; }
.stappen--staand .stap p { max-width: 56ch; }


/* ── Kaarten (voor wie, waarom je komt) ────────────────── */

.kaarten {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--lijn);
  border: 1px solid var(--lijn);
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}
.kaart {
  background: var(--zwart);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  display: grid;
  gap: .75rem;
  align-content: start;
  transition: background-color .4s var(--veer);
}
.kaart:hover { background: var(--zwart-op); }
.kaart__kop { font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem); }
.kaart p { font-size: .9375rem; color: var(--wit-zacht); }


/* ── Diensten ──────────────────────────────────────────── */

.dienstgroep { border-top: 1px solid var(--lijn); }
.dienstgroep__raster { display: grid; gap: 2rem; }
@media (min-width: 60rem) {
  .dienstgroep__raster { grid-template-columns: 2fr 3fr; gap: 4rem; align-items: start; }
  .dienstgroep__kop { position: sticky; top: calc(var(--kophoogte, 5rem) + 4rem); }
}
.dienstgroep__titel {
  font-size: clamp(2.75rem, 1.5rem + 5vw, 5.5rem);
  line-height: .95;
  margin-bottom: 1rem;
}
.dienstgroep__kop p { margin: 0; color: var(--wit-lees); }
/* Het kleine label houdt zijn beige, ook hier: Joachim wil dat alle kleine
   titels dezelfde kleur hebben (24 september 2026). */
.dienstgroep__kop p.label { color: var(--beige); }

.diensten { list-style: none; margin: 0; padding: 0; }
.dienst {
  border-top: 1px solid var(--lijn);
  padding: clamp(1.5rem, 3vw, 2.25rem) 0;
  display: grid;
  /* Bovenaan uitlijnen: staan er twee blokken naast elkaar, dan begint de
     tekst van allebei op dezelfde hoogte. Zonder dit rekte het kortste blok
     zijn regels uit elkaar (Joachim, 24 september 2026). */
  align-content: start;
  gap: .5rem;
}
.dienst:last-child { border-bottom: 1px solid var(--lijn); }
.dienst__naam { font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem); }
.dienst__kort { font-size: 1.125rem; font-weight: 500; margin: 0; }
.dienst__lang { font-size: 1rem; color: var(--wit-zacht); max-width: 60ch; margin: .25rem 0 0; }
.dienst__na { margin-top: .75rem; font-size: .9375rem; }
.dienst--kort { padding: 1.25rem 0; }
.dienst--kort .dienst__naam { font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem); }
.dienstgroep--hyrox .dienstgroep__kop .label { margin-bottom: .75rem; }

/* Aanbod: het blok over de intake en de BIA-meting, bovenaan. */
.intakeblok { border-top: 1px solid var(--lijn); }
.intakeblok__raster { display: grid; gap: 2rem; }
@media (min-width: 60rem) { .intakeblok__raster { grid-template-columns: 2fr 3fr; gap: 4rem; align-items: start; } }
.intakeblok__prijs {
  font-family: var(--kopletter);
  font-size: clamp(2.5rem, 2rem + 2vw, 4rem);
  text-transform: uppercase;
  line-height: 1;
  margin: 0;
}
.intakeblok__prijs span {
  display: block;
  font-family: var(--letter);
  font-size: .9375rem;
  text-transform: none;
  color: var(--wit-zacht);
  margin-top: .5rem;
}
.intakeblok__tekst p { font-size: 1.125rem; line-height: 1.7; color: #D6D2CA; max-width: 56ch; margin-bottom: 1.25em; }
.intakeblok__tekst .knoppen { margin-top: 2rem; }


/* ── Wat is HYROX: de acht stations ────────────────────── */

.watis { border-top: 1px solid var(--lijn); }
.watis__kop { margin-bottom: clamp(2rem, 4vw, 3.5rem); }

.stations {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--lijn);
  border: 1px solid var(--lijn);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 60rem) { .stations { grid-template-columns: repeat(4, 1fr); } }
.station {
  position: relative;
  background: var(--zwart);
  padding: 1rem 1rem 1.5rem;
  display: grid;
  gap: .25rem;
}
.station__beeld { overflow: hidden; background: var(--zwart-op); margin-bottom: .75rem; }
.station__beeld img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  opacity: .8;
  transition: transform 1s var(--veer), opacity .6s var(--veer);
}
.station:hover .station__beeld img { transform: scale(1.05); opacity: 1; }
.station__nr {
  position: absolute; left: 1.5rem; top: 1.5rem;
  font-family: var(--kopletter);
  font-size: 1.125rem;
  letter-spacing: .06em;
  color: var(--wit);
  background: rgba(7,7,7,.7);
  padding: .1rem .5rem;
}
.station__naam { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.station__maat { font-size: .8125rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--beige); }


/* ── Prijzen ───────────────────────────────────────────── */

.prijsgroep { border-top: 1px solid var(--lijn); }
.prijsgroep--kort { border-top: 1px solid var(--lijn); }
.prijsgroep__kop { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.prijsgroep__titel { font-size: clamp(2.75rem, 1.5rem + 5vw, 5.5rem); line-height: .95; }

.prijstabel__omhulsel { overflow-x: auto; }
.prijstabel {
  width: 100%;
  border-collapse: collapse;
  min-width: 36rem;
}
.prijstabel th, .prijstabel td {
  padding: 1.25rem 1rem;
  border-bottom: 1px solid var(--lijn);
  vertical-align: top;
  text-align: left;
}
.prijstabel th:first-child, .prijstabel td:first-child { padding-left: 0; }
.prijstabel th:last-child, .prijstabel td:last-child { padding-right: 0; }
.prijstabel thead th {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--beige);
  padding-top: 0;
  border-bottom-color: var(--lijn-sterk);
}
/* De kopjes en de bedragen staan allebei rechts uitgelijnd in hun kolom,
   zodat "1 persoon" recht boven de prijzen staat. */
.prijstabel thead th:not(:first-child), .prijstabel td.prijs__bedrag { text-align: right; }
.prijstabel tbody th { font-weight: 400; width: 55%; }
.prijs__naam { display: block; font-weight: 600; font-size: 1.0625rem; }
.prijs__uitleg { display: block; font-size: .875rem; color: var(--wit-zacht); margin-top: .2rem; max-width: 44ch; }
.prijs__bedrag {
  font-family: var(--kopletter);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Op een gsm wordt de tabel een lijst: elke formule een blok, met de
   prijzen eronder naast elkaar en het kolomkopje erbij. Zo hoeft er
   niets opzij gescrold te worden om een prijs te zien. */
@media (max-width: 40rem) {
  .prijstabel { min-width: 0; }
  .prijstabel thead { display: none; }
  .prijstabel tbody, .prijstabel tr, .prijstabel th, .prijstabel td { display: block; }
  .prijstabel tr {
    display: grid;
    grid-template-columns: repeat(3, auto);
    justify-content: start;
    gap: .75rem 2rem;
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--lijn);
  }
  .prijstabel tbody th { grid-column: 1 / -1; width: auto; padding: 0; border: 0; }
  .prijstabel td, .prijstabel td.prijs__bedrag { padding: 0; border: 0; text-align: left; }
  .prijstabel td::before {
    content: attr(data-kolom);
    display: block;
    font-family: var(--letter);
    font-size: .625rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--beige);
    margin-bottom: .15rem;
  }
}

.beurten {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--lijn);
  border: 1px solid var(--lijn);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.beurten--staand { grid-template-columns: 1fr; }
.beurt {
  background: var(--zwart);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: grid;
  gap: .25rem;
  transition: background-color .4s var(--veer);
}
.beurt:hover { background: var(--zwart-op); }
.beurten--staand .beurt {
  grid-template-columns: auto 1fr;
  gap: .1rem 1.5rem;
  align-items: baseline;
  padding: 1.25rem 1.5rem;
}
.beurt__bedrag {
  font-family: var(--kopletter);
  font-size: clamp(2.75rem, 2rem + 3vw, 4.5rem);
  line-height: 1;
}
.beurten--staand .beurt__bedrag { grid-row: 1 / 3; font-size: clamp(2.25rem, 2rem + 1.5vw, 3rem); min-width: 5rem; }
.beurt__naam { font-size: .8125rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.beurt__uitleg { font-size: .875rem; color: var(--wit-zacht); }

.prijsnoot { padding-top: 0; }
.prijsnoot p { color: var(--wit-zacht); font-size: .9375rem; }


/* ── Een grote uitspraak ───────────────────────────────── */

.statement { border-top: 1px solid var(--lijn); }
.statement__groot {
  font-family: var(--kopletter);
  font-size: clamp(2.5rem, 1.5rem + 5vw, 5.5rem);
  text-transform: uppercase;
  line-height: .95;
  max-width: 22ch;
  margin: 0;
}


/* ── In beeld (de fotoband) ────────────────────────────── */

.galerij { padding-bottom: calc(var(--lucht) - 1rem); }
.galerij .binnen { margin-bottom: 2rem; }
.galerij__band {
  list-style: none;
  margin: 0;
  padding: 0 var(--kant) 1rem;
  display: flex;
  gap: 1px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--beige) transparent;
}
.galerij__band li { flex: 0 0 clamp(13rem, 36vw, 20rem); scroll-snap-align: start; position: relative; overflow: hidden; background: var(--zwart-op); }
.galerij__band img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  opacity: .85;
  transition: transform 1s var(--veer), opacity .6s var(--veer);
}
.galerij__band li:hover img { transform: scale(1.04); opacity: 1; }
.galerij__band span {
  position: absolute; left: 1rem; bottom: 1rem;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--wit);
  background: rgba(7,7,7,.65);
  padding: .3rem .6rem;
}


/* ── Saturday Club: de pagina ──────────────────────────── */

.club__raster { display: grid; gap: 2rem; }
@media (min-width: 60rem) {
  .club__raster { grid-template-columns: 2fr 3fr; gap: 4rem; align-items: start; }
  .club__kop { position: sticky; top: calc(var(--kophoogte, 5rem) + 4rem); }
}
.club__tekst p { font-size: 1.125rem; line-height: 1.75; color: #D6D2CA; margin-bottom: 1.5em; max-width: 58ch; }
.club__tekst p:first-child { font-size: 1.3125rem; color: var(--wit); }

.waarom, .verloop { border-top: 1px solid var(--lijn); }

.doemee { border-top: 1px solid var(--lijn); }
.doemee__raster { display: grid; gap: 3rem; }
@media (min-width: 60rem) { .doemee__raster { grid-template-columns: 6fr 5fr; gap: 5rem; align-items: start; } }
.doemee__tekst p { color: var(--wit-zacht); max-width: 50ch; }
.doemee__tekst .knoppen { margin-top: 2rem; }
.doemee__kop {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--beige);
  margin: 0 0 1rem;
}
.doemee__noot { margin-top: 1rem; font-size: .875rem; color: var(--wit-zacht); }


/* ── De intakepagina ───────────────────────────────────── */

.verwacht { border-top: 1px solid var(--lijn); }
.afspraak { border-top: 1px solid var(--lijn); }
.afspraak__raster { display: grid; gap: 3rem; }
@media (min-width: 60rem) { .afspraak__raster { grid-template-columns: 5fr 6fr; gap: 5rem; align-items: start; } }
.afspraak__tekst .feiten { margin-top: 2.5rem; }

.formulier { display: grid; gap: 1.25rem; grid-template-columns: 1fr 1fr; }
.veld { display: grid; gap: .5rem; grid-column: 1 / -1; }
.veld--half { grid-column: span 1; }
@media (max-width: 40rem) { .veld--half { grid-column: 1 / -1; } }
.veld label {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--beige);
}
.veld__bijzin { color: var(--wit-zacht); letter-spacing: .08em; text-transform: none; font-weight: 400; }
.veld input, .veld select, .veld textarea {
  width: 100%;
  font: inherit;
  color: var(--wit);
  background: var(--zwart-op);
  border: 1px solid var(--lijn-sterk);
  border-radius: 0;
  padding: .95rem 1rem;
  transition: border-color .3s var(--veer), background-color .3s var(--veer);
}
.veld input:focus, .veld select:focus, .veld textarea:focus {
  outline: none;
  border-color: var(--beige);
  background: #131313;
}
.veld select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23A9A59D' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: .75rem;
  padding-right: 2.5rem;
}
.veld select option { background: var(--zwart-op); color: var(--wit); }
.veld textarea { resize: vertical; min-height: 8rem; }
.veld--fout input, .veld--fout textarea { border-color: #C97B6B; }
.veld__fout { font-size: .875rem; color: #E0A392; }
.formulier .knop { grid-column: 1 / -1; justify-self: start; margin-top: .5rem; }
.formulier__noot { grid-column: 1 / -1; font-size: .8125rem; color: var(--wit-zacht); margin: 0; }

/* Het onzichtbare veld voor robots. */
.val { position: absolute; left: -9999px; top: 0; width: 1px; height: 1px; overflow: hidden; }

.bericht {
  padding: 1.5rem;
  border: 1px solid var(--beige);
  font-size: 1.0625rem;
  margin: 0 0 1.5rem;
}
.bericht--fout { border-color: #C97B6B; color: #E8D9D3; }


/* ── De contactpagina ──────────────────────────────────── */

.contactraster__omhulsel { padding-top: 0; }
.contactraster {
  display: grid;
  gap: 1px;
  background: var(--lijn);
  border: 1px solid var(--lijn);
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}
.contactblok {
  background: var(--zwart);
  /* Het blok is een container: zo kan het mailadres meekrimpen met de
     kolom en blijft het op één regel (feedback Brian, 7 september 2026). */
  container-type: inline-size;
  padding: clamp(1.75rem, 3vw, 2.75rem) clamp(1.5rem, 3vw, 2.25rem);
  display: grid;
  gap: .6rem;
  align-content: start;
  text-decoration: none;
  color: var(--wit);
  transition: background-color .4s var(--veer);
}
.contactblok--link:hover, .contactblok--link:focus-visible { background: var(--zwart-op); }
.contactblok__kop {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--beige);
}
/* Nummer, mailadres en Instagram in hetzelfde lettertype en dezelfde
   maat: Joachim wilde ze even groot. */
.contactblok__groot {
  /* In de titelletter, zoals Joachim vroeg (13 september 2026). Bebas is
     smal: het mailadres heeft ongeveer 10,8 keer de lettergrootte nodig,
     9% van de kolombreedte houdt een kleine marge. */
  font-family: var(--kopletter);
  font-size: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem);
  font-size: min(clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem), 9cqi);
  font-weight: 400;
  letter-spacing: .02em;
  line-height: 1.1;
  overflow-wrap: anywhere;
}
.contactblok__bij { font-size: .9375rem; color: var(--wit-zacht); }

.locatie { border-top: 1px solid var(--lijn); }
.locatie__raster { display: grid; gap: 3rem; }
@media (min-width: 60rem) { .locatie__raster { grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; } }
.locatie__adres {
  font-family: var(--kopletter);
  font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  text-transform: uppercase;
  line-height: 1.1;
  margin-bottom: 1.5rem;
}
.locatie__tekst p:not(.locatie__adres):not(.label):not(.locatie__kop) { color: var(--wit-zacht); max-width: 46ch; }
.locatie__tekst .knoppen { margin-top: 2rem; }
.locatie__raster--enkel { grid-template-columns: 1fr; }
.locatie__hoe { margin-top: 1.5rem; }
.locatie__hoe p { margin-bottom: .75em; }
.locatie__kop {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--beige);
  margin: 0 0 .5rem;
}
.locatie__beeld { margin: 0; overflow: hidden; background: var(--zwart-op); }
.locatie__beeld img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; opacity: .85; }


/* ── De oproep onderaan ────────────────────────────────── */

.cta { border-top: 1px solid var(--lijn); }
.cta__titel {
  font-size: clamp(3rem, 1.25rem + 6vw, 6.5rem);
  line-height: .9;
  max-width: 12ch;
  margin: 0 0 .75rem;
}
.cta__sub {
  font-family: var(--kopletter);
  font-size: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--wit-zacht);
  margin: 0 0 1.5rem;
}
.cta__tekst { max-width: 46ch; font-size: 1.125rem; color: var(--wit-zacht); margin-bottom: 2.5rem; }


/* ── De voet ───────────────────────────────────────────── */
/* Herbouwd op 7 september 2026, op vraag van Joachim: zijn logo in het
   midden bovenaan, daaronder drie kolommen (Pagina's, Contact, Locatie),
   alles in dezelfde letter, en zijn Instagram erbij. De slogan staat hier
   niet meer. Kleine foto's per kolom zijn geprobeerd en weer weggehaald:
   te druk. */

.voet { border-top: 1px solid var(--lijn); padding-top: clamp(3rem, 6vw, 5rem); }
.voet__binnen { padding-bottom: clamp(3rem, 5vw, 4rem); }
.voet__merk { display: flex; justify-content: center; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.voet__thuis { display: inline-flex; color: inherit; text-decoration: none; }
.voet__logo { width: auto; height: clamp(2rem, 3.6vw, 2.8rem); }
.voet__naam { font-size: 1.5rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }

.voet__kolommen { display: grid; gap: 2.5rem; }
@media (min-width: 52rem) { .voet__kolommen { grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 4vw, 4rem); } }

.voet__kop {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--beige);
  margin: 0 0 1rem;
}
.voet ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.voet ul a { text-decoration: none; color: var(--wit-zacht); font-size: .9375rem; transition: color .3s var(--veer); }
.voet ul a:hover, .voet ul a:focus-visible { color: var(--wit); }
.voet__adres { font-size: .9375rem; color: var(--wit-zacht); margin-bottom: 1rem; }
.voet__adres strong { color: var(--wit); font-weight: 600; }
.voet__kaart { margin: 0; font-size: .9375rem; }

/* Contact: WhatsApp, mail en Instagram onder elkaar, elk met een tekentje,
   in dezelfde letter en maat als de rest van de voet. */
.voet__contact { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }
.voet .voet__contact a { display: inline-flex; align-items: center; gap: .65rem; color: var(--wit); font-size: .9375rem; font-weight: 500; text-decoration: none; transition: color .3s var(--veer); }
.voet .voet__contact a:hover, .voet .voet__contact a:focus-visible { color: var(--beige); }
.voet__contact svg { width: 1.25rem; height: 1.25rem; flex: none; color: var(--wit-zacht); }

.voet__klein {
  border-top: 1px solid var(--lijn);
  margin: 0;
  padding: 1.5rem var(--kant);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .5rem 2rem;
  font-size: .8125rem;
  color: #6E6A63;
}
.voet__klein a { color: inherit; }
.voet__klein a:hover { color: var(--beige); }


/* De balk die op een gsm onderaan bleef plakken is op 7 september 2026
   weggehaald, op vraag van Joachim: de knoppen staan alleen nog onderaan
   de pagina, in de oproep en de voet. */


/* ── Tweede feedbackronde van Joachim, 13 september 2026 ── */

/* Aanbod: alleen het HYROX-deel plakt bij het scrollen; de andere delen
   zijn kort en staan vast. Titels even groot als de intake-titel, de
   eerste dienst op de hoogte van de titel, de korte zinnen in het accent,
   een foto per manier, en minder lucht per blok. */
.dienstgroep--kort { padding-block: clamp(2.5rem, 5vw, 4rem); }
.dienstgroep--kort .dienstgroep__titel { font-size: clamp(2.25rem, 1.25rem + 3.75vw, 4.25rem); margin-bottom: .75rem; }
.dienstgroep--kort .dienst__kort { color: var(--beige); }
.dienst--kort { padding: 1.1rem 0; }
.dienst--kort .dienst__naam { line-height: 1; }
.dienstgroep__foto { margin: 1.75rem 0 0; max-width: 22rem; overflow: hidden; background: var(--zwart-op); }
.dienstgroep__foto img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
@media (min-width: 60rem) {
  .dienstgroep--kort:not(.dienstgroep--hyrox) .dienstgroep__kop { position: static; }
  .dienstgroep--kort .diensten .dienst--kort:first-child { border-top: 0; padding-top: .3rem; }
}

/* De intake in twee delen; de tekst rechts begint op de hoogte van de
   titel, niet van het kleine label erboven. De knop staat links onder de
   prijs. */
.intakeblok { padding-block: clamp(2.5rem, 5vw, 4rem); }
.intakeblok__delen { display: grid; gap: 1.75rem; }
.intakeblok__deel h3 { font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); margin-bottom: .35rem; }
.intakeblok__deel p { color: var(--wit-zacht); max-width: 56ch; margin-bottom: .75em; }
.intakeblok .knoppen { margin-top: 1.5rem; }
@media (min-width: 60rem) { .intakeblok__tekst { padding-top: 2.5rem; } }

/* Wie ben ik?: Waar coach ik? ziet er hetzelfde uit als de locatie bij
   Contact, met de foto van Trigger X, maar zonder de bereikbaarheid. */
.coach__waar { display: grid; gap: 2rem; }
.coach__waar--enkel { grid-template-columns: 1fr; }
@media (min-width: 60rem) { .coach__waar:not(.coach__waar--enkel) { grid-template-columns: 3fr 2fr; gap: 4rem; align-items: center; } }
.coach__beeld { margin: 0; overflow: hidden; background: var(--zwart-op); }
.coach__beeld img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; opacity: .9; }

/* Het menu op een gsm: WhatsApp, mail en Instagram elk met een tekentje. */
.menu__onder a { display: inline-flex; align-items: center; gap: .55em; }
.menu__onder svg { width: 1.15em; height: 1.15em; flex: none; }

/* Aanbod: de foto van elke manier staat alleen vooraan, als een kaart met
   de naam en de link erover, met een donkere waas van onderuit. Niet over
   het hele blok: dat vond Brian te druk (13 september 2026). */
.dienstgroep__kaart {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--zwart-op);
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: flex-end;
}
.dienstgroep__kaart img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 40%;
  opacity: .8;
}
.dienstgroep__kaart::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(7,7,7,.94) 0%, rgba(7,7,7,.6) 45%, rgba(7,7,7,.15) 100%);
}
.dienstgroep__kaarttekst { position: relative; padding: clamp(1.25rem, 2.5vw, 2rem); }
.dienstgroep__kaarttekst .dienstgroep__titel { margin-bottom: .5rem; }
.dienstgroep__kaarttekst p { margin: 0; }
.dienstgroep__foto { display: none; }

/* Wie ben ik?, Waar coach ik?: precies zoals de locatie bij Contact (Brian,
   14 september 2026): dezelfde titel en hetzelfde adres, de foto in 4 op 3,
   de tekst bovenaan naast de foto. */
.coach__beeld img { aspect-ratio: 4 / 3; }
@media (min-width: 60rem) { .coach__waar:not(.coach__waar--enkel) { grid-template-columns: 1fr 1fr; gap: 5rem; align-items: start; } }

/* Wie ben ik?, Waar ik voor sta: de drie titels op twee regels, zodat de
   tekst eronder op dezelfde hoogte begint. De breedte in em, dus ze
   breken op elke schermgrootte op dezelfde plaats: "Kracht, interval" en
   dan "en HYROX" (Brian, 14 september 2026). */
.aanpak .stap h3 { max-width: 6.2em; min-height: 2em; line-height: 1; }

/* Simulation Sunday met foto: tekst links, foto rechts (16 september 2026). */
@media (min-width: 60rem) { .simulatie__raster--beeld { grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; } }
.simulatie__beeld { margin: 0; overflow: hidden; background: var(--zwart-op); }
.simulatie__beeld img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; opacity: .9; }

/* ── Derde feedbackronde van Joachim, 16 september 2026 ── */

/* Aanbod: de korte zinnen in dezelfde stijl als de intake-uitleg, en de
   namen even groot als de kopjes daar. */
.dienstgroep--kort .dienst__kort { color: var(--wit-zacht); font-weight: 400; font-size: 1rem; line-height: 1.6; max-width: 56ch; }
.dienst--kort .dienst__naam { font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); }
.dienstgroep__kaarttekst .label { margin-bottom: .5rem; }
@media (min-width: 60rem) { .dienstgroep--kort .dienstgroep__kop { position: static; } }

/* 1-op-1, Duo, Groepslessen: "Wat je krijgt" met de twee blokken naast
   elkaar over de volle breedte, in plaats van onder elkaar naast een
   lege kolom. */
.dienstgroep--naast .dienstgroep__raster { grid-template-columns: 1fr; gap: 1.5rem; }
.dienstgroep--naast .dienstgroep__kop { position: static; }
@media (min-width: 48rem) {
  .dienstgroep--naast .diensten { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(2rem, 4vw, 4rem); }
  .dienstgroep--naast .dienst { border-bottom: 1px solid var(--lijn); }
  .dienstgroep--naast .dienst__lang { max-width: none; }
}

/* Prijstabel: "Formule" even ver van de lijn als de tekst eronder. */
.prijstabel thead th { padding-bottom: .9rem; }
/* Op een gsm: de prijzen verdeeld over de volle breedte, per kolom een
   even groot deel, zoals bij de intake. */
@media (max-width: 40rem) {
  .prijstabel tr { justify-content: stretch; grid-template-columns: 1fr; }
  .prijstabel[data-kolommen="2"] tr { grid-template-columns: 1fr 1fr; }
  .prijstabel[data-kolommen="3"] tr { grid-template-columns: 1fr 1fr 1fr; }
}
.beurt { align-content: start; }

/* Wie ben ik?: "Mijn aanpak" staat sinds 16 september 2026 boven "Wie coach
   ik?" en "Waar coach ik?", dicht op elkaar. */
.aanpak { padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.coach { padding-top: clamp(2.5rem, 5vw, 4rem); }


/* ══════════════════════════════════════════════════════════
   Vierde ronde feedback — Joachim, 24 september 2026
   ══════════════════════════════════════════════════════════ */

/* ── Eén stijl voor de tekst onder een grote titel ─────── */
/* Er liepen drie grijzen, twee diktes en drie groottes door elkaar; dat
   viel hem op. Alles wat onder een titel staat, leest nu hetzelfde. */
.paginakop__tekst,
.paginakop--beeld .paginakop__tekst,
.inleiding,
.spot__tekst,
.dienst__kort,
.dienst__lang,
.dienstgroep--kort .dienst__kort,
.over__tekst--lang p,
.coach__tekst p,
.intakeblok__tekst p,
.club__tekst p,
.doemee__tekst p,
.simulatie__tekst p {
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.7;
  color: var(--wit-lees);
}
/* De kleine regels houden hun maat, maar wel dezelfde kleur. */
.kaart p,
.tegel__bij,
.dienst__na { color: var(--wit-lees); }

/* De tekst onder "Realistisch. Doelgericht. Beter." stond vetgedrukt. */
.held__tekst { font-weight: 400; }

/* ── De drie tegels op één lijn ────────────────────────── */
/* De tegels staan onderaan uitgelijnd; had één tegel maar één regel tekst,
   dan zakte zijn naam mee. Twee regels ruimte houdt ze gelijk. */
.tegel__bij { min-height: 3.4em; }

/* ── Een feit dat op één regel moet passen ─────────────── */
/* "September tot en met mei" past niet in een kolom van 11rem. */
.feit--breed { grid-column: span 2; }

/* ── Een programma, volledig gepresenteerd ─────────────── */
/* Start to HYROX en de Saturday Squad op Groepslessen, Road to HYROX en de
   Simulation Sunday op HYROX. Zie delen/programma.php. */
.programma { border-top: 1px solid var(--lijn); }
.spot--programma { min-height: min(58svh, 32rem); border-block: 0; }
.programma .spot__titel { font-size: clamp(2.5rem, 1.5rem + 3.6vw, 4.5rem); max-width: 18ch; margin-bottom: 1.25rem; }
.programma .spot__tekst { margin-bottom: 2rem; }
.programma__wat { padding-block: clamp(2.25rem, 4.5vw, 3.5rem); }
.programma__wat .label { margin-bottom: .5rem; }
.programma__wat .titel--klein { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.programma__noot { margin-top: 1.25rem; font-size: .9375rem; color: var(--wit-zacht); }
.programma__knoppen { margin-top: 2rem; }
.titel--klein { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); line-height: 1; }

/* De titel van het HYROX-blok op de startpagina is een hele zin, geen drie
   woorden zoals vroeger; op 10ch werd dat vijf regels van 6,5rem hoog. */
.spot--hyrox .spot__titel { font-size: clamp(2.75rem, 1.5rem + 4vw, 5rem); max-width: 17ch; }
.spot--hyrox { min-height: min(70svh, 38rem); }

/* De seizoensregel onder de tekst van een spot, zoals op de startpagina. */
.spot__noot {
  margin: -1.25rem 0 0;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--beige);
}

/* ── "Formule" stond te dicht op de tekst erboven ──────── */
.prijsgroep .prijstabel__omhulsel,
.prijsgroep--kort .prijstabel__omhulsel { margin-top: clamp(1.75rem, 3.5vw, 3rem); }

@media (max-width: 47.999rem) {
  /* Op een gsm staan de feiten onder elkaar; dan hoeft niets te spannen. */
  .feit--breed { grid-column: auto; }
  .spot--programma { min-height: 0; }
}

/* ── De zaal als achtergrond, niet als geplakte foto ───── */
/* Joachim: foto's mogen meer als achtergrond dienen; een rechthoek met
   hoeken naast de tekst vond hij "geplakt" (24 september 2026). Zo staat
   Trigger X nu op Contact en op Wie ben ik?. */
.locatie--beeld {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: min(62svh, 34rem);
  display: flex;
  align-items: center;
}
.locatie__achter { position: absolute; inset: 0; z-index: -2; }
.locatie__achter img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 35%;
  opacity: .55;
}
.locatie--beeld::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, var(--zwart) 12%, rgba(7,7,7,.8) 55%, rgba(7,7,7,.35) 100%),
              linear-gradient(to top, var(--zwart), transparent 35%);
}
.locatie--beeld .locatie__raster { width: 100%; }

@media (max-width: 47.999rem) {
  .locatie--beeld { min-height: 0; padding-block: var(--lucht); }
  .locatie__achter img { object-position: 55% 30%; opacity: .4; }
  .locatie--beeld::after { background: linear-gradient(to top, var(--zwart) 8%, rgba(7,7,7,.75) 60%, rgba(7,7,7,.55) 100%); }
}