/**
 * Purple Gym — de opmaak van de site.
 *
 * Eén op één overgenomen uit het aangeleverde ontwerp (input/009. Purple Gym).
 * Daar staat elke regel als stijlattribuut in de opmaak, omdat een
 * ontwerpprogramma geen stylesheet schrijft; hier staan dezelfde waarden als
 * klassen. De getallen zijn niet afgerond en niet "mooier gemaakt": wat er in
 * het ontwerp staat, staat hier.
 *
 * Wat in het ontwerp aan een React-state hing en in CSS gewoon kan — elke
 * hover, elke uitschuivende pijl — staat hier als `:hover`. Dat scheelt
 * JavaScript in de browser en gedraagt zich hetzelfde.
 *
 * Alle maten en kleuren komen uit tokens.css. Staat er hier een los getal, dan
 * is dat een maat die in het ontwerp ook maar op één plek voorkomt.
 *
 * De volgorde volgt de pagina: eerst wat overal terugkomt, dan de secties in
 * de volgorde waarin ze op de site staan.
 */

/* ═══════════════════════════════════════════════════ 1. wat overal terugkomt */

/**
 * De pagina. `overflow-x: clip` en niet `hidden`: een sectie met een
 * meelopende kolom (`position: sticky`) plakt binnen een scrollcontainer aan
 * die container in plaats van aan het scherm, en `hidden` maakt er een
 * scrollcontainer van. Dat gaat stil mis: de regel ziet er goed uit en de
 * kolom loopt gewoon mee. Zie de conventie hierover.
 */
.pg {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  overflow-x: clip;
}

/* De inhoudskolom van het ontwerp: 1240px breed met 24px marge ernaast. */
/**
 * De inhoudsbreedte van een sectie.
 *
 * `--container-header` en niet `--container`: in het ontwerp staat de 24px
 * zijmarge op de sectie zelf en is het vak erbinnen 1240 breed. Hier zit de
 * marge op dit vak, dus moet het 1240 + 2 x 24 meten om dezelfde 1240 over
 * te houden. Met `--container` was elke sectie 48 pixels smaller dan het
 * ontwerp en begon de inhoud 24 pixels verder naar binnen dan het logo in de
 * kopbalk — die gebruikt dezelfde maat en stond dus als enige goed.
 */
.pg-binnen {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--container-header);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

/**
 * Koppen. Het ontwerp zet ze allemaal in de kopletter op gewicht 300, met een
 * negatieve letterafstand die met de maat meeloopt.
 */
.pg-h1,
.pg-h2,
.pg-h3 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 300;
}

.pg-h1 {
  font-size: var(--h1-size);
  line-height: var(--h1-lh);
  letter-spacing: var(--h1-ls);
}

.pg-h2 {
  font-size: var(--h2-size);
  line-height: var(--h2-lh);
  letter-spacing: var(--h2-ls);
}

.pg-h3 {
  font-size: var(--h3-size);
  line-height: var(--h3-lh);
}

/**
 * Een kop die regel voor regel omhoogrolt zodra hij in beeld komt.
 *
 * Elke regel zit in een vakje dat afknipt; de regel zelf staat er net onder en
 * schuift omhoog. De `padding-bottom` met de negatieve `margin-bottom` eronder
 * is er voor de staarten van een g en een j: zonder die ruimte knipt het vakje
 * ze af, en dat zie je pas bij een kop met een staartletter erin.
 */
.pg-regel {
  display: block;
  overflow: hidden;
  padding-bottom: 0.2em;
  margin-bottom: -0.12em;
}

.pg-regel > span {
  display: block;
  /* Het ontwerp zet `text-wrap: balance` op elke kop. Een regel met een eigen
     afbreking is al één regel, dus dit telt alleen waar een regel zelf nog
     omloopt — en daar hoort hij in twee gelijke stukken te breken. */
  text-wrap: balance;
  opacity: 0;
  transform: translateY(105%);
  transition-property: opacity, transform;
  transition-duration: 900ms;
  transition-timing-function: var(--ease);
}

.pg-in-beeld .pg-regel > span {
  opacity: 1;
  transform: translateY(0);
}

/* Lopende tekst in een sectie. */
.pg-lead {
  margin: 0;
  font-size: 20px;
  line-height: 1.5;
  color: var(--text-muted-strong);
  text-wrap: pretty;
}

.pg-tekst p {
  margin: 0;
}

.pg-tekst p + p {
  margin-top: 1em;
}

/* Het kleine label in kapitalen boven een kop. Geen kop, dus geen H-niveau. */
.pg-label {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--accent-strong);
}

/* Een opsomming met een vinkje ervoor. */
.pg-punten {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}

.pg-punten li {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  white-space: nowrap;
}

.pg-punten svg {
  flex: none;
  color: var(--cta);
}

.pg-punten-licht li {
  color: rgba(255, 255, 255, 0.85);
}

/* Het paarse bolletje dat zachtjes klopt, voor een actuele melding. */
@keyframes pg-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(169, 136, 170, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(169, 136, 170, 0);
  }
}

.pg-stip {
  display: block;
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cta);
  animation: pg-pulse 2s ease-out infinite;
}

/* ───────────────────────────────────────────────────────────── de knop */

.knop {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: inline-flex;
  align-items: stretch;
  vertical-align: top;
  box-sizing: border-box;
  width: auto;
  height: var(--btn-height);
  padding: 0 28px 0 0;
  border: 0;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--btn-font-size);
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  outline-offset: 3px;
  /* De kleurwissel loopt iets achter op het uitschuiven, zodat de tekst pas
     omslaat als het blokje eronder zit. */
  transition: color 300ms var(--ease) 80ms;
}

.knop-breed {
  width: 100%;
}

.knop-klein {
  height: var(--btn-height-sm);
  padding-right: 20px;
  font-size: var(--btn-font-size-sm);
}

.knop-vlak {
  position: absolute;
  z-index: -1;
  top: 4px;
  left: 4px;
  bottom: 4px;
  width: calc(var(--btn-height) - 8px);
  border-radius: 7px;
  transition: width 450ms cubic-bezier(0.7, 0, 0.2, 1);
}

.knop-klein .knop-vlak {
  width: calc(var(--btn-height-sm) - 8px);
}

.knop:hover .knop-vlak,
.knop:focus-visible .knop-vlak {
  width: calc(100% - 8px);
}

.knop-pijl {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--btn-height);
  overflow: hidden;
  color: var(--brand-ink);
}

.knop-klein .knop-pijl {
  width: var(--btn-height-sm);
}

/**
 * Elke pijl zit in een vak van de volle breedte van de pijlkolom. Dat is nodig
 * omdat `translateX(110%)` rekent met de breedte van het element zelf: een svg
 * van twintig pixels schuift dan maar 22 pixels op en blijft binnen het vak
 * van 56 pixels zichtbaar. Met een vak van de volle breedte loopt hij er wel
 * helemaal uit.
 */
.knop-pijl > span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 380ms cubic-bezier(0.7, 0, 0.2, 1);
}

/* De eerste pijl loopt weg, de tweede komt van links binnen. */
.knop-pijl > span:first-child {
  transform: translateX(0);
}

.knop-pijl > span:last-child {
  transform: translateX(-110%);
}

.knop:hover .knop-pijl > span:first-child,
.knop:focus-visible .knop-pijl > span:first-child {
  transform: translateX(110%);
}

.knop:hover .knop-pijl > span:last-child,
.knop:focus-visible .knop-pijl > span:last-child {
  transform: translateX(0);
}

.knop-label {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex: 0 1 auto;
  padding-left: 16px;
}

.knop-klein .knop-label {
  padding-left: 12px;
}

.knop-breed .knop-label {
  flex: 1;
  justify-content: center;
}

/* Paars met een wit blokje. De knop die overal de hoofdactie is. */
.knop-primair {
  background: var(--brand-purple);
  color: #ffffff;
}

.knop-primair .knop-vlak {
  background: #ffffff;
}

.knop-primair:hover,
.knop-primair:focus-visible {
  color: var(--brand-ink);
}

/* Donker met een paars blokje. De tweede keuze op een lichte sectie. */
.knop-donker {
  background: var(--brand-ink);
  color: #ffffff;
}

.knop-donker .knop-vlak {
  background: var(--cta);
}

.knop-donker:hover,
.knop-donker:focus-visible {
  color: var(--brand-ink);
}

/* De onderstreepte tekstlink met een pijl erachter. */
.knop-tekst {
  position: static;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: auto;
  height: auto;
  min-height: 0;
  padding: 0 0 6px;
  border-bottom: 1px solid currentColor;
  border-radius: 2px;
  background: none;
  color: var(--btn-secondary-fg);
  font-size: var(--link-font-size);
  font-weight: 500;
  overflow: visible;
}

.knop-op-donker {
  color: var(--text-on-dark);
}

.knop-rol {
  display: block;
  height: 1.25em;
  overflow: hidden;
}

.knop-rol > span {
  display: block;
  height: 1.25em;
  transition: transform var(--dur) var(--ease);
}

.knop-tekst:hover .knop-rol > span,
.knop-tekst:focus-visible .knop-rol > span {
  transform: translateY(-100%);
}

.knop-pijl-klein {
  position: relative;
  display: block;
  flex: none;
  width: 18px;
  height: 18px;
  overflow: hidden;
  color: inherit;
}

.knop-pijl-klein > span {
  transition: transform var(--dur) var(--ease);
}

.knop-tekst:hover .knop-pijl-klein > span:first-child,
.knop-tekst:focus-visible .knop-pijl-klein > span:first-child {
  transform: translateX(110%);
}

.knop-tekst:hover .knop-pijl-klein > span:last-child,
.knop-tekst:focus-visible .knop-pijl-klein > span:last-child {
  transform: translateX(0);
}

/* ───────────────────────────────────────── een kaart met een foto erachter */

/**
 * Een vlak waar nog geen foto is: het merkteken op een donkere achtergrond met
 * een schuine arcering. Staat bij een locatie in aanbouw. Zo is op de pagina te
 * zien dat er beeld bij hoort te komen, zonder een gat of een gebroken plaatje.
 */
.pg-geen-foto {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background-color: var(--brand-ink);
  background-image: repeating-linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.035) 0px,
    rgba(255, 255, 255, 0.035) 1px,
    transparent 1px,
    transparent 28px
  );
}

.pg-geen-foto img {
  position: absolute;
  right: -12%;
  top: 50%;
  width: 78%;
  max-width: none;
  transform: translateY(-50%);
  opacity: 0.09;
  filter: brightness(0) invert(1);
}

/* Het statuslabel op een foto: open, of in aanbouw. */
.pg-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

.pg-status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cta);
}

.pg-status-dicht i {
  background: rgba(255, 255, 255, 0.6);
}

/* ───────────────────────────────────────── de schuif tussen twee keuzes */

/**
 * Twee knoppen in een spoor met een donker blokje dat eronder meeschuift. Komt
 * terug bij de locaties, de lidmaatschappen, de intake en de stappen van het
 * aanmeldformulier.
 */
/* `minmax(0, 1fr)` en niet `1fr`: een rasterkolom krimpt anders niet onder de
   breedte van zijn inhoud, en dan duwde "Intake plannen" op een klein scherm
   de tweede helft van de schakelaar buiten beeld. */
.pg-schuif {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  height: 56px;
  padding: 4px;
  box-sizing: border-box;
  border-radius: var(--radius-pill);
  background: var(--surface);
}

.pg-schuif-blok {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  border-radius: var(--radius-pill);
  background: var(--brand-ink);
  transition: transform 420ms var(--ease);
}

.pg-schuif-blok[data-naar='1'] {
  transform: translateX(100%);
}

.pg-schuif button {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  min-height: 0;
  padding: 0 8px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--dur) var(--ease);
}

.pg-schuif button[aria-selected='true'] {
  color: #ffffff;
}

.pg-schuif button i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cta);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}

.pg-schuif button[aria-selected='true'] i {
  opacity: 1;
}

/* ═══════════════════════════════════════════════════════════ 2. de kopbalk */

/**
 * De balk ligt over de pagina. Hij heeft bovenaan geen achtergrond en krijgt
 * die pas na 40 pixels scrollen; bij naar beneden scrollen schuift hij weg.
 *
 * Mobile first: hieronder staat de telefoonstand, en vanaf 1024px de brede.
 */
.pg-kop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  width: 100%;
  font-family: var(--font-body);
  transform: translateY(0);
  transition: transform 450ms var(--ease);
}

.pg-kop-meelopend {
  position: fixed;
}

.pg-kop-weg {
  transform: translateY(-110%);
}

.pg-kop-binnen {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  height: var(--header-h-mobile);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 var(--gutter);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition:
    background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
}

/* De achtergrond die er na het scrollen bij komt. */
.pg-kop-balk .pg-kop-binnen {
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
}

.pg-kop-balk-wit .pg-kop-binnen {
  background: rgba(255, 255, 255, 0.86);
}

.pg-kop-balk-donker .pg-kop-binnen {
  background: rgba(35, 35, 35, 0.9);
}

/**
 * Op een telefoon vult het menu het hele scherm, en dan is dát de pagina: de
 * balk wordt wit, het logo donker en de menuknop donker met witte tekst.
 *
 * Alleen op een telefoon. Op een breed scherm valt het paneel ónder de balk
 * uit en blijft die staan zoals hij stond — transparant over de foto als er
 * nog niet is gescrold. Zonder deze breedtegrens sprong de balk bij het openen
 * op elk scherm naar wit, en dat is precies wat het ontwerp niet doet.
 */
@media (max-width: 1023px) {
  .pg-kop-open .pg-kop-binnen {
    background: var(--bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* Met `.pg-kop` ervoor, want `.pg-kop-logo-wit .pg-logo-donker` verderop
     weegt even zwaar en staat later in het bestand. Zonder dat extra stukje
     bleef het witte logo staan op de inmiddels witte balk, en dan lijkt het
     logo weg te zijn. */
  .pg-kop.pg-kop-open .pg-logo-donker {
    opacity: 1;
  }

  .pg-kop.pg-kop-open .pg-logo-wit {
    opacity: 0;
  }

  .pg-kop.pg-kop-open .pg-menuknop {
    --pg-menu-bg: var(--brand-ink);
    --pg-menu-fg: #ffffff;
  }

  .pg-kop.pg-kop-open .pg-stippen i {
    background: var(--cta);
  }
}

/* ── het logo ─────────────────────────────────────────────────────────── */

/**
 * Vier beelden over elkaar: per tint het woordmerk zonder het teken, en het
 * teken apart. Het teken is apart zodat het bij het eerste bezoek één keer kan
 * ronddraaien zonder dat het hele woord meedraait. De clip-paths en het
 * draaipunt van 7,19% komen uit het ontwerp en horen bij dít logobestand.
 */
/**
 * Het logo staat midden in de balk, op dezelfde lijn als de menuknop ernaast.
 *
 * Hier stond `align-self: flex-start` met een marge van
 * `--btn-height / 2 - 12px`. Dat is geen willekeurig getal: het zette het
 * midden van het logo precies op het midden van een menuknop die met zijn
 * bovenkant aan de balk vastzat. Logo en knop stonden dus altijd al op één
 * lijn — die lijn lag alleen hoger dan het midden van de balk.
 *
 * Sinds de knop los staat en zelf gecentreerd is (28-10-2026) klopt die
 * formule niet meer mee: het logo bleef acht pixels achter. Allebei
 * gecentreerd is wat het ontwerp bedoelde, en het is ook precies hoe de balk
 * op een breed scherm in elkaar zit.
 */
.pg-kop-logo {
  position: relative;
  align-self: center;
  display: block;
  /**
   * Op 03-11-2026 een maat groter op verzoek van de klant: van 172 bij 24 naar
   * 196 bij 28.
   *
   * De breedte is wat de maat bepaalt, niet de hoogte: de twee svg's staan
   * absoluut met `width: 100%` en `height: auto`. Het logo is 232 bij 33, dus
   * een verhouding van 7,03 — vandaar 196 bij 28 en niet een rond getal, want
   * dan loopt het beeld uit zijn vak.
   */
  flex: 0 1 196px;
  min-width: 0;
  height: 28px;
}

.pg-kop-logo img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
  transition: opacity var(--dur) var(--ease);
}

.pg-logo-woord {
  clip-path: inset(0 0 0 20%);
}

.pg-logo-teken {
  clip-path: inset(-25% 80% -25% -10%);
  transform-origin: 7.19% 50%;
  will-change: transform;
}

.pg-kop-logo-donker .pg-logo-donker {
  opacity: 1;
}

.pg-kop-logo-donker .pg-logo-wit {
  opacity: 0;
}

.pg-kop-logo-wit .pg-logo-donker {
  opacity: 0;
}

.pg-kop-logo-wit .pg-logo-wit {
  opacity: 1;
}

/* ── de menuknop ──────────────────────────────────────────────────────── */

.pg-kop-rechts {
  position: relative;
  z-index: 3;
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}

/**
 * Op een telefoon hangt de knop aan de bovenrand van het scherm, niet in het
 * midden van de balk: het ontwerp zet hem daar met `align-self: flex-start`
 * in een vak dat de volle hoogte van de balk heeft. Dit omhulsel is er voor
 * de desktopstand, waar de knop wél gecentreerd staat; op een telefoon moet
 * het dus meerekken in plaats van 56 pixels hoog te blijven. Anders staat de
 * knop acht pixels te laag en zweven de twee hoekjes los boven de rand.
 */
.pg-kop-menu {
  align-self: stretch;
  display: flex;
  align-items: flex-start;
}

/**
 * De menuknop: op elk scherm een losse pil, op dezelfde hoogte als het logo.
 *
 * In het ontwerp hing hij op een telefoon aan de bovenrand vast — plat van
 * boven, rond van onder, met twee hoekjes ernaast die het gat tussen knop en
 * balk opvulden. Op 28-10-2026 op verzoek van Jos losgemaakt: hij staat nu
 * midden in de balk, net als het logo ernaast, en gedraagt zich verder
 * precies zoals op een breed scherm. De twee hoekjes zijn daarmee vervallen.
 */
.pg-menuknop {
  --pg-menu-bg: var(--brand-ink);
  --pg-menu-fg: #ffffff;
  align-self: center;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 116px;
  height: var(--btn-height);
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--pg-menu-bg);
  color: var(--pg-menu-fg);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition:
    background-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
}

/* Is het logo wit, dan is de knop wit met donkere tekst. En omgekeerd. */
.pg-kop-logo-wit .pg-menuknop {
  --pg-menu-bg: #ffffff;
  --pg-menu-fg: var(--brand-ink);
}

/* En dan zijn de stippen een tint donkerder, anders verdwijnen ze bijna in
   het wit. Het ontwerp wisselt ze mee met de knop. */
.pg-kop-logo-wit .pg-stippen i {
  background: var(--accent-strong);
}

.pg-stippen {
  display: grid;
  grid-template-columns: 4px 4px;
  gap: 3px;
  transform: rotate(0deg);
  transition: transform var(--dur) var(--ease);
}

.pg-kop-open .pg-stippen {
  transform: rotate(45deg);
}

.pg-stippen i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--cta);
  transition: background-color var(--dur) var(--ease);
}

.pg-menuknop .knop-rol,
.pg-menuknop .knop-rol > span {
  height: 1.4em;
  line-height: 1.4;
}

.pg-menuknop:hover .knop-rol > span {
  transform: translateY(-100%);
}

/* De knop rechts in de balk staat er alleen op een breed scherm. */
.pg-kop-knoppen {
  display: none;
}

/* ── het uitklappaneel op een breed scherm ────────────────────────────── */

.pg-paneel {
  display: none;
}

/* ── het menu op een telefoon ─────────────────────────────────────────── */

.pg-kop-overlay {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  height: 100dvh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: 96px var(--gutter) 28px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--bg);
  color: var(--text);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--dur) var(--ease),
    visibility var(--dur) var(--ease);
}

.pg-kop-open .pg-kop-overlay {
  opacity: 1;
  visibility: visible;
}

.pg-overlay-menu {
  display: flex;
  flex-direction: column;
}

.pg-overlay-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
  font-family: var(--font-heading);
  font-size: var(--nav-mobile-size);
  line-height: 40px;
  font-weight: 300;
  opacity: 0;
  transform: translateY(10px);
  transition-property: opacity, transform;
  transition-duration: var(--dur);
  transition-timing-function: var(--ease);
}

.pg-kop-open .pg-overlay-menu a {
  opacity: 1;
  transform: translateY(0);
}

.pg-overlay-menu i {
  display: block;
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0;
}

.pg-overlay-menu a[aria-current='page'] i {
  opacity: 1;
}

.pg-overlay-onder {
  flex: none;
  margin-top: auto;
  padding-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pg-overlay-kopje {
  font-size: var(--label-size);
  font-weight: 500;
  letter-spacing: var(--label-ls);
  text-transform: uppercase;
  color: var(--text-muted);
}

.pg-overlay-tegels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.pg-overlay-tegels a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 52px;
  padding: 0 16px;
  box-sizing: border-box;
  border-radius: var(--radius-media);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
}

.pg-overlay-tegels a > span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.15;
}

.pg-overlay-tegels a[aria-current='page'] {
  border-color: var(--accent-strong);
  background: var(--surface-purple-soft);
}

.pg-tegel-sub {
  font-size: 12px;
  font-weight: 500;
  opacity: 0.75;
}

.pg-overlay-onder .knop {
  margin-top: 8px;
}

/* ── vanaf de laptopbreedte: één balk met een uitklappaneel ──────────── */

@media (min-width: 1024px) {
  /**
   * De balk loopt over de volle breedte, de inhoud erbinnen niet.
   *
   * Daarom geen `max-width` met `margin: auto`: dan krimpt het vlak mee en
   * stopt de witte balk na het scrollen op 1288 pixels, met de donkere sectie
   * eromheen zichtbaar. Het ontwerp zet de achtergrond op de header zelf en de
   * maat op een vak erbinnen. Hier is dat één element, dus doet de zijmarge
   * allebei: hij is minstens de gutter en anders precies de ruimte die naast
   * een vak van 1240 overblijft. Dat levert tot op de pixel hetzelfde op.
   */
  .pg-kop-binnen {
    padding-inline: max(var(--gutter), calc((100% - var(--container-header)) / 2));
    height: var(--header-h);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: 100%;
    gap: 24px;
    transition:
      height var(--dur) var(--ease),
      background-color var(--dur) var(--ease),
      border-color var(--dur) var(--ease),
      color var(--dur) var(--ease);
  }

  .pg-kop-logo {
    justify-self: start;
    align-self: center;
    margin-top: 0;
    flex: none;
    width: 232px;
    height: 33px;
  }

  .pg-kop-logo img {
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .pg-kop-rechts {
    justify-self: end;
    align-self: center;
  }

  .pg-kop-menu {
    align-items: center;
    height: var(--btn-height);
  }

  /* Alleen nog wat er op een breed scherm anders is: iets breder en groter. */
  .pg-menuknop {
    width: 132px;
    gap: 10px;
    font-size: var(--btn-font-size);
  }

  .pg-kop-knoppen {
    display: flex;
    align-items: center;
    height: var(--btn-height);
    gap: 8px;
    line-height: 0;
  }

  /* Het paneel is net zo breed als de knoppen erboven en klapt open door de
     rij van 0fr naar 1fr te laten gaan. Dat werkt ook als de inhoud van
     wisselende hoogte is, anders dan een vaste max-height. */
  .pg-paneel {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 0fr;
    border-radius: var(--radius-media);
    background: var(--brand-ink);
    color: #ffffff;
    box-shadow: none;
    transition:
      grid-template-rows 560ms cubic-bezier(0.76, 0, 0.24, 1),
      box-shadow var(--dur) var(--ease);
  }

  .pg-kop-open .pg-paneel {
    grid-template-rows: 1fr;
    box-shadow: 0 30px 80px rgba(35, 35, 35, 0.3);
  }

  .pg-paneel-binnen {
    overflow: hidden;
    min-height: 0;
  }

  .pg-paneel-menu {
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 28px 24px;
  }

  .pg-paneel-menu a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    color: #ffffff;
    text-decoration: none;
    font-family: var(--font-heading);
    font-size: 30px;
    line-height: 38px;
    font-weight: 300;
    opacity: 0;
    transform: translateY(10px);
    transition-property: opacity, transform;
    transition-duration: 160ms;
    transition-timing-function: var(--ease);
  }

  .pg-kop-open .pg-paneel-menu a {
    opacity: 1;
    transform: translateY(0);
    transition-duration: 420ms;
  }

  .pg-paneel-menu .knop-rol,
  .pg-paneel-menu .knop-rol > span {
    height: 38px;
    white-space: nowrap;
  }

  .pg-paneel-menu a:hover .knop-rol > span {
    transform: translateY(-100%);
  }

  .pg-paneel-menu i {
    display: block;
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cta);
    opacity: 0;
  }

  .pg-paneel-menu a[aria-current='page'] i {
    opacity: 1;
  }

  .pg-paneel-locaties {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 28px 28px;
    opacity: 0;
    transform: translateY(10px);
    transition-property: opacity, transform;
    transition-duration: 160ms;
    transition-timing-function: var(--ease);
  }

  .pg-kop-open .pg-paneel-locaties {
    opacity: 1;
    transform: translateY(0);
    transition-duration: 420ms;
  }

  .pg-paneel-kopje {
    font-size: var(--label-size);
    font-weight: 600;
    letter-spacing: var(--label-ls);
    text-transform: uppercase;
    color: var(--cta);
  }

  .pg-paneel-tegels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .pg-paneel-tegels a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    height: 56px;
    padding: 0 16px;
    box-sizing: border-box;
    border-radius: var(--radius-media);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #ffffff;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: background var(--dur) var(--ease);
  }

  .pg-paneel-tegels a:hover {
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
  }

  .pg-paneel-tegels a[aria-current='page'] {
    border-color: var(--cta);
  }

  .pg-paneel-tegels a > span {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.15;
  }

  /* Op een breed scherm is er geen schermvullend menu. */
  .pg-kop-overlay {
    display: none;
  }
}

/* ═══════════════════════════════════════════════════════════════ 3. de voet */

.pg-voet {
  background: var(--brand-ink);
  color: #ffffff;
  font-family: var(--font-body);
}

/**
 * De oproep: een foto met twee verlopen erover. Het eerste loopt van boven naar
 * beneden en eindigt in de volle achtergrondkleur, zodat de foto naadloos in de
 * voet overgaat. Het tweede loopt van links, zodat de kop leesbaar blijft.
 */
.pg-voet-oproep {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 620px;
  display: flex;
  align-items: flex-end;
}

.pg-voet-foto,
.pg-voet-foto img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 40%;
}

.pg-voet-sluier {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      180deg,
      rgba(35, 35, 35, 0.25) 0%,
      rgba(35, 35, 35, 0.15) 40%,
      rgba(35, 35, 35, 1) 100%
    ),
    linear-gradient(90deg, rgba(35, 35, 35, 0.6) 0%, rgba(35, 35, 35, 0) 60%);
}

.pg-voet-oproep-binnen {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter) 48px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  gap: 40px;
}

.pg-voet-oproep-tekst {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
}

.pg-voet-kop {
  max-width: 760px;
  font-size: 40px;
  line-height: 44px;
  letter-spacing: -0.5px;
  text-wrap: balance;
}

.pg-voet-kop span {
  display: block;
}

.pg-voet-actie {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 18px;
  width: 100%;
}

.pg-voet-actie .pg-punten {
  justify-content: center;
}

/* ── de kolommen ──────────────────────────────────────────────────────── */

.pg-voet-onder {
  box-sizing: border-box;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter) 32px;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.pg-voet-kolommen {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  padding-top: 48px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.pg-voet-merk {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 320px;
}

.pg-voet-logo {
  display: inline-block;
  line-height: 0;
}

.pg-voet-logo img {
  display: block;
  width: 210px;
  height: auto;
}

.pg-voet-over {
  font-size: 16px;
  line-height: 25px;
  color: rgba(255, 255, 255, 0.7);
}

.pg-voet-kolom {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pg-voet-kopje {
  font-size: var(--label-size);
  font-weight: 600;
  letter-spacing: var(--label-ls);
  text-transform: uppercase;
  color: var(--brand-purple);
}

.pg-voet-kolom a {
  font-size: 16px;
  line-height: 24px;
  text-decoration: none;
  color: #ffffff;
}

.pg-voet-kolom a:hover {
  color: var(--brand-purple);
}

.pg-voet-locatie {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 16px;
  line-height: 24px;
}

.pg-voet-locatie strong {
  font-weight: 600;
}

.pg-voet-locatie span {
  color: rgba(255, 255, 255, 0.7);
}

.pg-voet-socials {
  display: flex;
  gap: 8px;
}

.pg-voet-socials a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #ffffff;
}

.pg-voet-socials a:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

/* ── de regel onderaan ───────────────────────────────────────────────── */

.pg-voet-regel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
}

.pg-voet-rechten {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 16px;
}

.pg-voet-klubb {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pg-voet-klubb:hover {
  color: var(--brand-purple);
}

.pg-voet-juridisch {
  display: flex;
  gap: 24px;
}

.pg-voet-juridisch a {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
}

.pg-voet-juridisch a:hover {
  color: #ffffff;
}

@media (min-width: 1024px) {
  .pg-voet-oproep {
    min-height: 760px;
  }

  .pg-voet-foto,
  .pg-voet-foto img {
    object-position: 60% 40%;
  }

  .pg-voet-oproep-binnen {
    padding: 0 var(--gutter) 96px;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .pg-voet-kop {
    font-size: 80px;
    line-height: 84px;
    letter-spacing: -2px;
  }

  .pg-voet-actie {
    flex-direction: row;
    align-items: center;
    gap: 28px;
    width: auto;
  }

  .pg-voet-actie .pg-punten {
    justify-content: flex-start;
  }

  .pg-voet-onder {
    padding: 0 var(--gutter) 40px;
    gap: 72px;
  }

  .pg-voet-kolommen {
    grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
    gap: 48px;
    padding-top: 72px;
  }

  .pg-voet-regel {
    flex-direction: row;
  }
}

/* ════════════════════════════════════════════ 4. de bovenkant van de pagina */

/**
 * Vier vormen, met één ding gemeen: ze dragen de H1 en ze liggen onder de
 * kopbalk, dus de bovenmarge is groot genoeg om er niet achter te verdwijnen.
 */

/* ── de grote foto over de volle breedte, op de homepage ──────────────── */

.pg-hero-beeld {
  position: relative;
  overflow: hidden;
  min-height: 844px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: var(--brand-ink);
  color: #ffffff;
}

/**
 * De foto schaalt van 1,1 naar 1 in bijna drie seconden. Het filter haalt de
 * kleur er wat af en maakt hem donkerder, zodat de witte tekst er overal op
 * leesbaar is en niet alleen op de donkere helft.
 */
.pg-hero-beeldvlak {
  position: absolute;
  inset: 0;
  transform: scale(1.1);
  transition: transform 2800ms var(--ease);
  filter: saturate(0.7) contrast(1.06) brightness(0.9);
}

.pg-in-beeld .pg-hero-beeldvlak {
  transform: scale(1);
}

.pg-hero-beeldvlak img,
.pg-hero-beeldvlak > span {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pg-hero-laag-kleur,
.pg-hero-laag-gloed,
.pg-hero-laag-verloop,
.pg-hero-laag-locatie {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.pg-hero-laag-kleur {
  background: #3a2b3b;
  mix-blend-mode: multiply;
  opacity: 0.55;
}

.pg-hero-laag-gloed {
  background:
    radial-gradient(
      120% 90% at 70% 35%,
      rgba(169, 136, 170, 0.22) 0%,
      rgba(35, 35, 35, 0) 55%
    ),
    rgba(35, 35, 35, 0.18);
}

.pg-hero-laag-verloop {
  background:
    linear-gradient(
      180deg,
      rgba(35, 35, 35, 0.45) 0%,
      rgba(35, 35, 35, 0) 26%,
      rgba(35, 35, 35, 0) 46%,
      rgba(35, 35, 35, 0.82) 100%
    ),
    linear-gradient(90deg, rgba(35, 35, 35, 0.55) 0%, rgba(35, 35, 35, 0) 62%);
}

/* Zelfde uitlijning als de header en de secties; zie de toelichting bij
   .pg-hero-proef .pg-hero-binnen hieronder. */
.pg-hero-beeld .pg-hero-binnen {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 220px max(var(--gutter), calc((100% - var(--container-header)) / 2)) 40px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  align-items: end;
  /* Het tekstvlak ligt over de hele foto en zou elke klik wegvangen. */
  pointer-events: none;
}

.pg-hero-tekst {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.pg-hero-beeld .pg-hero-kop {
  font-size: 48px;
  line-height: 52px;
  letter-spacing: -1px;
}

/* De introtekst komt na de kop in beeld, met een derde seconde vertraging. */
.pg-hero-intro {
  max-width: 480px;
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: var(--body-ls);
  color: rgba(255, 255, 255, 0.88);
  text-wrap: pretty;
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 800ms var(--ease) 350ms,
    transform 800ms var(--ease) 350ms;
}

.pg-in-beeld .pg-hero-intro {
  opacity: 1;
  transform: translateY(0);
}

.pg-hero-actie {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 18px;
  width: 100%;
  margin-top: 12px;
  /* De knop moet weer wél te klikken zijn. */
  pointer-events: auto;
}

.pg-hero-actie .pg-punten {
  justify-content: center;
}

/* ── de titel met de tekst ernaast ───────────────────────────────────── */

/* `--container-header` en niet `--container`: de zijmarge zit hier op het vak
   zelf, dus moet het de gutter erbij krijgen om dezelfde 1240 over te houden
   als het ontwerp. Zie de opmerking bij `.pg-binnen`. */
.pg-hero-intro-sectie .pg-hero-binnen {
  box-sizing: border-box;
  max-width: var(--container-header);
  margin: 0 auto;
  padding: 128px var(--gutter) 40px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.pg-hero-intro-sectie .pg-hero-kop {
  font-size: 44px;
  line-height: 48px;
  letter-spacing: -1px;
  text-wrap: balance;
}

.pg-hero-intro-sectie .pg-lead {
  max-width: 460px;
  font-size: 18px;
}

.pg-hero-introknop {
  margin-top: 8px;
}

/* ── de bovenkant van een locatiepagina ──────────────────────────────── */

.pg-hero-locatie {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: 640px;
  padding: 120px 0 40px;
  background: var(--brand-ink);
  color: #ffffff;
  overflow: hidden;
}

.pg-hero-locatiefoto,
.pg-hero-locatiefoto img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pg-hero-locatie .pg-geen-foto {
  z-index: -2;
}

.pg-hero-laag-locatie {
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(35, 35, 35, 0.55) 0%,
    rgba(35, 35, 35, 0.2) 35%,
    rgba(35, 35, 35, 0.85) 100%
  );
}

.pg-hero-locatie .pg-hero-binnen {
  max-width: var(--container-header);
  margin: 0 auto;
  width: 100%;
  padding-inline: var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
}

.pg-hero-locatietekst {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  max-width: 760px;
}

.pg-hero-locatie .pg-hero-kop {
  font-size: 44px;
  line-height: 48px;
  letter-spacing: -1px;
  text-wrap: balance;
  color: #ffffff;
}

.pg-hero-locatie .pg-hero-intro {
  max-width: 560px;
  font-size: 18px;
  color: rgba(255, 255, 255, 0.9);
}

.pg-hero-locatieactie {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 20px;
  width: 100%;
}

.pg-hero-route {
  color: #ffffff;
  font-size: 17px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-align: center;
}

/* ── de bovenkant van het aanmeldformulier ───────────────────────────── */

/**
 * Dit is in het ontwerp één sectie met het formulier eronder. Hier zijn het
 * twee blokken, dus de onderruimte van de bovenkant is nul en de bovenruimte
 * van het formulier neemt hem over. Samen is dat dezelfde maat.
 */
.pg-hero-proef {
  background: var(--bg);
  padding: 111px 0 0;
}

/**
 * Uitlijnen op dezelfde linkerrand als de secties eronder, en niet op de
 * smallere tekstmaat. Zelfde truc als bij .pg-kop-binnen: de zijruimte is
 * minstens de gutter en anders precies wat er naast een vak van
 * --container-header overblijft. Zo begint de kop op de pixel gelijk met het
 * formulier, op elke schermbreedte.
 */
.pg-hero-proef .pg-hero-binnen {
  max-width: none;
  margin: 0;
  padding-inline: max(var(--gutter), calc((100% - var(--container-header)) / 2));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.pg-hero-proef .pg-hero-kop {
  font-size: 48px;
  line-height: 52px;
  letter-spacing: -1px;
  text-wrap: balance;
}

.pg-proef-lead {
  margin: 8px 0 0;
  max-width: 720px;
  font-size: 18px;
  line-height: 1.5;
  color: var(--text-muted-strong);
  text-wrap: balance;
}

.pg-proef-punten {
  margin-top: 4px;
  flex-direction: column;
  gap: 10px 28px;
}

.pg-proef-punten svg {
  color: var(--accent-strong);
}

/* ── de routelink met een speld ──────────────────────────────────────── */

.pg-routelink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
  color: var(--text);
}

.pg-routelink span {
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media (min-width: 1024px) {
  .pg-hero-beeld {
    min-height: 940px;
  }

  .pg-hero-beeld .pg-hero-binnen {
    /* De zijruimte blijft de uitlijning van de secties volgen; alleen de
       boven- en onderruimte verschilt hier. Zie de basisregel hierboven. */
    padding: 200px max(var(--gutter), calc((100% - var(--container-header)) / 2)) 80px;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .pg-hero-tekst {
    gap: 24px;
  }

  .pg-hero-beeld .pg-hero-kop {
    font-size: 104px;
    line-height: 104px;
    letter-spacing: -2.5px;
  }

  .pg-hero-intro {
    font-size: 20px;
  }

  .pg-hero-actie {
    flex-direction: row;
    align-items: center;
    gap: 28px;
    width: auto;
    margin-top: 16px;
  }

  .pg-hero-actie .pg-punten {
    justify-content: flex-start;
  }

  .pg-hero-intro-sectie .pg-hero-binnen {
    padding: 200px var(--gutter) 72px;
    flex-direction: row;
    align-items: flex-end;
    gap: 40px;
  }

  .pg-hero-intro-sectie .pg-hero-kop {
    font-size: 88px;
    line-height: 92px;
    letter-spacing: -2px;
  }

  .pg-hero-intro-sectie .pg-lead {
    font-size: 20px;
  }

  /* Op de pagina met alle vragen staat de tekst onder de titel, niet ernaast. */
  [data-template='faq'] .pg-hero-intro-sectie .pg-hero-binnen {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  .pg-hero-locatie {
    min-height: 860px;
    padding: 200px 0 72px;
  }

  .pg-hero-locatie .pg-hero-binnen {
    flex-direction: row;
    align-items: flex-end;
  }

  .pg-hero-locatie .pg-hero-kop {
    font-size: 88px;
    line-height: 92px;
    letter-spacing: -2px;
  }

  .pg-hero-locatie .pg-hero-intro {
    font-size: 20px;
  }

  .pg-hero-locatieactie {
    flex-direction: row;
    align-items: center;
    width: auto;
  }

  .pg-hero-proef {
    /* Geen zijruimte hier: die zet .pg-hero-binnen, en twee keer telt op. */
    padding: 153px 0 0;
  }

  .pg-hero-proef .pg-hero-kop {
    font-size: 96px;
    line-height: 96px;
    letter-spacing: -2.5px;
  }

  .pg-proef-lead {
    font-size: 22px;
  }

  /**
   * Op een breed scherm staan deze drie punten in de donkere kaart naast het
   * formulier, en daar laat het ontwerp ze ook alleen staan. Ze hier nog eens
   * onder de inleiding zetten is dezelfde opsomming twee keer op één scherm.
   */
  .pg-proef-punten {
    display: none;
  }
}

/* ════════════════════════════════════════════════════════════ 5. de secties */

/**
 * De staande ruimte van een sectie. Het ontwerp gebruikt 140 pixels boven en
 * onder op een breed scherm en 80 op een telefoon, met hier en daar een paar
 * pixels verschil om twee secties tegen elkaar te laten sluiten. Waar dat zo
 * is, staat het bij die sectie.
 */
.pg-sectie {
  padding: 80px 0;
}

.pg-feiten {
  margin: 0;
  display: flex;
  flex-direction: column;
  font-size: 17px;
  line-height: 26px;
}

.pg-feiten > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px 24px;
  padding: 16px 0;
  border-top: 1px solid var(--border);
}

.pg-feiten > div:last-child {
  border-bottom: 1px solid var(--border);
}

.pg-feiten dt {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--accent-strong);
  padding-top: 3px;
}

.pg-feiten dd {
  margin: 0;
}

.pg-feiten-zacht {
  color: var(--text-muted-strong);
}

/* De faciliteiten achter elkaar, met een punt ertussen. Het scheidingsteken
   staat hier en niet in de tekst, zodat er bij één faciliteit geen losse punt
   overblijft. */
.pg-faciliteiten span + span::before {
  content: ' · ';
}

.pg-feiten-groot {
  border-bottom: 1px solid var(--border);
}

.pg-feiten-groot > div {
  padding: 20px 0;
}

.pg-feiten-groot > div:last-child {
  border-bottom: 0;
}

.pg-feiten-groot dt {
  font-size: 14px;
  padding-top: 4px;
}

.pg-feiten-groot dd {
  font-size: 18px;
  line-height: 28px;
}

/* Het streepje tussen twee feiten op één regel. */
.pg-scheiding {
  display: none;
  width: 1px;
  height: 20px;
  background: rgba(35, 35, 35, 0.2);
}

/* ── de locaties met een kaart ───────────────────────────────────────── */

.pg-locaties {
  background: var(--bg);
  padding: 73px 0 80px;
}

.pg-locaties-binnen {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.pg-locaties-kop {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  gap: 28px;
}

.pg-locaties-tabs {
  width: 100%;
}

.pg-locaties-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.pg-locaties-foto {
  position: relative;
  min-height: 300px;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--brand-ink);
}

/**
 * Alle foto's liggen op elkaar; alleen die van de gekozen locatie is te zien.
 * Zo hoeft er bij het wisselen niets te laden en springt de hoogte niet.
 */
.pg-locaties-beeld {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.06);
  transition:
    opacity 600ms var(--ease),
    transform 1200ms var(--ease);
}

.pg-locaties-beeld[data-aan='true'] {
  opacity: 1;
}

.pg-in-beeld .pg-locaties-beeld[data-aan='true'] {
  transform: scale(1);
}

.pg-locaties-beeld img,
.pg-locaties-beeld > span {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pg-locaties-sluier {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(35, 35, 35, 0) 50%, rgba(35, 35, 35, 0.8) 100%);
}

.pg-locaties-overlay {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  color: #ffffff;
}

.pg-locaties-naam {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 36px;
  line-height: 1;
}

.pg-locaties-kaart {
  position: relative;
  min-height: 260px;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--surface);
}

.pg-locaties-kaart iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.pg-locaties-kaart iframe[data-aan='true'] {
  opacity: 1;
  pointer-events: auto;
}

.pg-locaties-balk {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  gap: 24px;
  padding: 24px;
  border-radius: var(--radius-card);
  background: var(--surface);
}

.pg-locaties-feiten {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  font-size: 17px;
  line-height: 25px;
}

.pg-locaties-tijden {
  color: var(--text-muted-strong);
}

.pg-locaties-route {
  font-weight: 600;
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ── de pluspunten op donker ─────────────────────────────────────────── */

.pg-usps {
  background: var(--surface-dark);
  color: var(--text-on-dark);
  padding: 80px 0 89px;
}

.pg-usps-binnen {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.pg-usps-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.pg-usp {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px;
  border-radius: var(--radius-card);
  border: 1px solid transparent;
}

.pg-usp-foto {
  min-height: 380px;
  background: var(--brand-ink);
  color: #ffffff;
}

.pg-usp-paars {
  background: var(--brand-purple);
  color: var(--brand-ink);
}

.pg-usp-donker {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--border-on-dark);
  color: #ffffff;
}

.pg-usp-beeld,
.pg-usp img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 700ms var(--ease);
}

.pg-usp:hover img {
  transform: scale(1.04);
}

.pg-usp-sluier {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(35, 35, 35, 0.15) 0%,
    rgba(35, 35, 35, 0.35) 40%,
    rgba(35, 35, 35, 0.92) 100%
  );
}

.pg-usp-groot {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 64px;
  line-height: 1;
  color: #ffffff;
}

.pg-usp-icoon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: var(--cta);
  color: var(--brand-ink);
}

.pg-usp-paars .pg-usp-icoon {
  background: var(--brand-ink);
  color: var(--cta);
}

.pg-usp-tekst {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pg-usp-titel {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 26px;
  line-height: 1.15;
  font-weight: 300;
}

.pg-usp-regel {
  max-width: 420px;
  font-size: 17px;
  line-height: 26px;
  color: var(--text-on-dark-muted);
  text-wrap: pretty;
}

.pg-usp-foto .pg-usp-regel {
  color: rgba(255, 255, 255, 0.9);
}

.pg-usp-paars .pg-usp-regel {
  color: var(--brand-ink);
}

.pg-usps-link {
  display: flex;
}

/* ── de beoordelingen ────────────────────────────────────────────────── */

.pg-reviews {
  background: var(--bg);
  color: var(--text);
  padding: 80px 0;
}

.pg-reviews-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  align-items: center;
}

.pg-reviews-foto {
  position: relative;
  height: 420px;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--brand-ink);
}

.pg-reviews-foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  transform: scale(1.08);
  transition: transform 2400ms var(--ease);
}

.pg-reviews-foto.pg-in-beeld img {
  transform: scale(1);
}

.pg-reviews-tekst {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.pg-reviews-score {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}

.pg-reviews-cijfer {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 64px;
  line-height: 0.9;
  letter-spacing: -1.5px;
  font-variant-numeric: tabular-nums;
}

.pg-reviews-bron {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pg-reviews-sterren {
  display: flex;
  gap: 3px;
  color: var(--accent-strong);
}

.pg-reviews-bronregel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  font-size: 15px;
  line-height: 21px;
  color: var(--text-muted);
}

.pg-reviews-bronregel svg {
  flex: none;
}

.pg-reviews-bronregel strong {
  font-weight: 600;
  color: var(--text);
}

/* De citaten liggen op dezelfde plek in het raster, dus de sectie springt
   niet als het ene citaat langer is dan het andere. */
.pg-reviews-citaten {
  display: grid;
}

.pg-reviews-citaten figure {
  grid-area: 1 / 1;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition:
    opacity 500ms var(--ease),
    transform 500ms var(--ease),
    visibility 500ms;
}

.pg-reviews-citaten figure[data-aan='true'] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.pg-reviews-aanhaling {
  color: var(--cta);
}

.pg-reviews-citaten blockquote {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 28px;
  line-height: 36px;
  letter-spacing: -0.3px;
  text-wrap: pretty;
}

.pg-reviews-citaten figcaption {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  line-height: 22px;
}

.pg-reviews-letter {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--surface-purple-soft);
  color: var(--accent-strong);
  font-weight: 600;
}

.pg-reviews-naam {
  display: flex;
  flex-direction: column;
}

.pg-reviews-naam strong {
  font-weight: 600;
}

.pg-reviews-naam span {
  font-size: 14px;
  color: var(--text-muted);
}

.pg-reviews-knoppen {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}

.pg-reviews-balk {
  position: absolute;
  top: -1px;
  left: 0;
  height: 2px;
  background: var(--brand-purple);
}

.pg-reviews-teller {
  font-size: 15px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

.pg-reviews-pijlen {
  display: flex;
  gap: 10px;
}

.pg-reviews-pijlen button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  min-height: 0;
  border-radius: 10px;
  cursor: pointer;
}

.pg-reviews-vorige {
  border: 1px solid var(--text);
  background: transparent;
  color: var(--text);
}

.pg-reviews-vorige:hover {
  background: var(--surface);
}

.pg-reviews-volgende {
  border: 0;
  background: var(--brand-purple);
  color: #ffffff;
}

.pg-reviews-volgende:hover {
  background: var(--accent-strong);
}

@media (min-width: 1024px) {
  .pg-sectie {
    padding: 140px 0;
  }

  .pg-feiten > div {
    grid-template-columns: 140px minmax(0, 1fr);
  }

  .pg-feiten-groot > div {
    grid-template-columns: 160px minmax(0, 1fr);
  }

  .pg-scheiding {
    display: block;
  }

  .pg-locaties {
    padding: 130px 0 140px;
  }

  .pg-locaties-binnen {
    gap: 56px;
  }

  .pg-locaties-kop {
    flex-direction: row;
    align-items: flex-end;
  }

  .pg-locaties-tabs {
    width: 320px;
    flex: none;
  }

  .pg-locaties-raster {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-rows: 520px auto;
    gap: 16px;
  }

  .pg-locaties-foto,
  .pg-locaties-kaart {
    min-height: 0;
  }

  .pg-locaties-overlay {
    left: 32px;
    right: 32px;
    bottom: 32px;
    flex-direction: row;
    align-items: flex-end;
    gap: 16px;
  }

  .pg-locaties-naam {
    font-size: 64px;
  }

  .pg-locaties-balk {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    gap: 40px;
    padding: 20px 20px 20px 32px;
  }

  .pg-locaties-feiten {
    flex-direction: row;
    align-items: center;
    gap: 20px;
  }

  .pg-usps {
    padding: 130px 0 149px;
  }

  .pg-usps-binnen {
    gap: 56px;
  }

  /**
   * Het raster: vier kolommen van 300 pixels hoog. Het eerste vak beslaat twee
   * kolommen en twee rijen, dan twee kleine ernaast, dan één breed eronder. Die
   * plekken staan vast; bij een vijfde vak is er geen plek bedacht en dat is
   * een ontwerpvraag, vandaar maxRows 4 op het veld in het CMS.
   */
  .pg-usps-raster {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 300px;
    gap: 24px;
  }

  .pg-usps-raster > *:nth-child(1) {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
  }

  .pg-usps-raster > *:nth-child(2) {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
  }

  .pg-usps-raster > *:nth-child(3) {
    grid-column: 4 / 5;
    grid-row: 1 / 2;
  }

  .pg-usps-raster > *:nth-child(4) {
    grid-column: 3 / 5;
    grid-row: 2 / 3;
  }

  .pg-usp {
    padding: 36px;
  }

  .pg-usp-foto {
    min-height: 0;
  }

  .pg-usp-groot {
    font-size: 96px;
  }

  .pg-usp-titel {
    font-size: 30px;
  }

  .pg-reviews {
    padding: 140px 0;
  }

  .pg-reviews-raster {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 96px;
  }

  .pg-reviews-foto {
    height: 640px;
  }

  .pg-reviews-tekst {
    gap: 36px;
    padding: 0 40px 0 0;
  }

  .pg-reviews-score {
    padding-bottom: 36px;
  }

  .pg-reviews-cijfer {
    font-size: 88px;
  }

  .pg-reviews-citaten blockquote {
    font-size: 44px;
    line-height: 54px;
  }
}

/* ── de lidmaatschappen met een schuif ───────────────────────────────── */

.pg-plannen {
  background: var(--surface);
  color: var(--text);
  padding: 80px 0;
}

.pg-plannen-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
}

.pg-plannen-foto {
  position: relative;
  order: 0;
  min-height: 380px;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--brand-ink);
}

.pg-plannen-foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}

.pg-plannen-sluier {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(35, 35, 35, 0) 45%, rgba(35, 35, 35, 0.85) 100%);
}

.pg-plannen-badge {
  position: absolute;
  top: 20px;
  left: 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 16px;
  border-radius: var(--radius-pill);
  background: var(--cta);
  color: var(--brand-ink);
  font-size: 14px;
  font-weight: 600;
}

.pg-plannen-badge i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-ink);
}

.pg-plannen-fototekst {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 26px;
  line-height: 1.15;
  color: #ffffff;
  text-wrap: pretty;
}

.pg-plannen-paneel {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 28px 24px;
  border-radius: var(--radius-card);
  background: var(--bg);
}

.pg-schuif-klein {
  height: 52px;
}

.pg-schuif-klein button {
  font-size: 15px;
}

.pg-plannen-schuif {
  width: 100%;
}

.pg-plannen-prijs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}

.pg-prijsregel {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.pg-prijs {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 64px;
  line-height: 0.95;
  letter-spacing: -2px;
  font-variant-numeric: tabular-nums;
}

.pg-prijs-per {
  font-size: 17px;
  color: var(--text-muted);
}

.pg-plannen-intro {
  margin: 0;
  font-size: 17px;
  line-height: 26px;
  color: var(--text-muted-strong);
}

.pg-plannen-punten {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px 28px;
}

.pg-plannen-punten li {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  line-height: 20px;
}

.pg-plannen-punten svg {
  flex: none;
  color: var(--accent-strong);
}

.pg-plannen-actie {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 20px;
}

/* ── de veelgestelde vragen bij een sectie ───────────────────────────── */

.pg-vragen {
  background: var(--bg);
  padding: 73px 0 80px;
}

.pg-vragen-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

.pg-vragen-kop {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.pg-vragen-inleiding {
  max-width: 360px;
  font-size: var(--body-size);
  line-height: var(--body-lh);
  letter-spacing: var(--body-ls);
  color: var(--text-muted);
  text-wrap: pretty;
}

/* De knop en de foto onder de kop staan alleen op een breed scherm; op een
   telefoon staat de knop onderaan de lijst. */
.pg-vragen-knopboven,
.pg-vragen-foto {
  display: none;
}

.pg-vragen-kolom {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.pg-vragen-lijst {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border);
}

.pg-vraag {
  border-bottom: 1px solid var(--border);
}

.pg-vraag > button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding: 20px 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.4;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

/**
 * Een plus die naar een kruis draait. Twee streepjes over elkaar in een vakje
 * dat 45 graden draait; dan is er één beweging in plaats van twee die uit de
 * pas kunnen lopen.
 */
.pg-vraag-teken {
  position: relative;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--brand-ink);
  transition: background var(--dur) var(--ease);
}

.pg-vraag-teken > span {
  position: absolute;
  inset: 0;
  transform: rotate(0deg);
  transition: transform 400ms var(--ease);
}

.pg-vraag-teken i {
  position: absolute;
  border-radius: 2px;
  background: currentColor;
}

.pg-vraag-teken i:first-child {
  left: 15px;
  right: 15px;
  top: 21px;
  height: 2px;
}

.pg-vraag-teken i:last-child {
  top: 15px;
  bottom: 15px;
  left: 21px;
  width: 2px;
}

.pg-vraag > button[aria-expanded='true'] .pg-vraag-teken {
  background: var(--cta);
}

.pg-vraag > button[aria-expanded='true'] .pg-vraag-teken > span {
  transform: rotate(45deg);
}

/**
 * Het antwoord klapt open met de rij van het raster, van 0fr naar 1fr. Met een
 * maximale hoogte zou je een getal moeten verzinnen dat groot genoeg is voor
 * het langste antwoord, en dan loopt de beweging bij een kort antwoord te snel.
 */
.pg-vraag-paneel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 420ms var(--ease);
}

.pg-vraag-paneel > div {
  overflow: hidden;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}

.pg-vraag-paneel[data-aan='true'] {
  grid-template-rows: 1fr;
}

.pg-vraag-paneel[data-aan='true'] > div {
  opacity: 1;
}

.pg-vraag-paneel p {
  margin: 0;
  padding: 0 0 28px;
  max-width: 680px;
  font-size: 17px;
  line-height: 27px;
  letter-spacing: var(--body-ls);
  color: var(--text-muted-strong);
  text-wrap: pretty;
}

.pg-vragen-onder {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}

.pg-vragen-onder > .knop {
  width: 100%;
}

/* ── de locatiekaarten op het overzicht ──────────────────────────────── */

.pg-locatiekaarten {
  padding: 0 0 80px;
}

.pg-locatiekaarten-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 56px;
}

.pg-locatiekaart {
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-width: 0;
}

.pg-locatiekaart-beeld {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--brand-ink);
}

.pg-locatiekaart-beeld img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 700ms var(--ease);
}

.pg-locatiekaart-beeld:hover img {
  transform: scale(1.04);
}

.pg-locatiekaart-sluier {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(35, 35, 35, 0.1) 0%,
    rgba(35, 35, 35, 0) 40%,
    rgba(35, 35, 35, 0.7) 100%
  );
}

.pg-locatiekaart-beeld .pg-status {
  position: absolute;
  top: 20px;
  left: 20px;
}

.pg-locatiekaart-naam {
  position: absolute;
  left: 20px;
  bottom: 20px;
  color: #ffffff;
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 40px;
  line-height: 1;
}

.pg-locatiekaart-onder {
  display: flex;
  flex-direction: column;
}

.pg-locatiekaart-actie {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  gap: 16px;
  padding-top: 24px;
}

/* ── wat op elke locatie hetzelfde is ───────────────────────────────── */

.pg-beide {
  /* Sluit aan op de sectie erboven; het ontwerp schuift hem zeven pixels
     omhoog zodat de twee tegen elkaar liggen. */
  margin-top: -7px;
  padding: 0 0 80px;
}

.pg-beide-binnen {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.pg-beide-kop {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.pg-beide-inleiding {
  max-width: 380px;
  font-size: 18px;
  line-height: 28px;
  color: var(--text-muted-strong);
  text-wrap: pretty;
}

.pg-beide-raster {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.pg-tegel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  min-height: 230px;
  padding: 20px;
  border-radius: var(--radius-card);
  background: var(--brand-ink);
  color: #ffffff;
}

.pg-tegel-paars {
  background: var(--cta);
  color: var(--brand-ink);
}

.pg-tegel-beeld,
.pg-tegel img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pg-tegel-sluier {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(35, 35, 35, 0.25) 0%,
    rgba(35, 35, 35, 0.4) 45%,
    rgba(35, 35, 35, 0.88) 100%
  );
}

.pg-tegel-label {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}

.pg-tegel-paars .pg-tegel-label {
  color: var(--brand-ink);
}

.pg-tegel-onder {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pg-tegel-groot {
  font-family: var(--font-heading);
  font-weight: 300;
  /* Meebuigend, want "06 – 23" en "Op maat" zijn niet even lang en moeten
     allebei op één regel passen zonder dat een vak hoger wordt. */
  font-size: clamp(30px, 9vw, 40px);
  line-height: 1.05;
  letter-spacing: -1px;
  padding-bottom: 0.08em;
  text-wrap: balance;
}

.pg-tegel-tekst {
  font-size: 15px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.9);
  text-wrap: pretty;
}

.pg-tegel-paars .pg-tegel-tekst {
  color: var(--brand-ink);
}

@media (min-width: 1024px) {
  .pg-plannen {
    padding: 140px 0;
  }

  .pg-plannen-raster {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 24px;
  }

  .pg-plannen-foto {
    order: 2;
    min-height: 760px;
  }

  .pg-plannen-badge {
    top: 32px;
    left: 32px;
  }

  .pg-plannen-fototekst {
    left: 32px;
    right: 32px;
    bottom: 32px;
    font-size: 34px;
  }

  .pg-plannen-paneel {
    gap: 32px;
    padding: 56px;
  }

  .pg-plannen-schuif {
    width: 340px;
  }

  .pg-plannen-prijs {
    padding-bottom: 32px;
  }

  .pg-prijs {
    font-size: 112px;
  }

  .pg-plannen-punten {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pg-plannen-actie {
    flex-direction: row;
    align-items: center;
  }

  .pg-vragen {
    padding: 130px 0 140px;
  }

  .pg-vragen-raster {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: 80px;
  }

  /**
   * De linkerkolom loopt mee. Dat kan alleen omdat de pagina op
   * `overflow-x: clip` staat en niet op `hidden`: met `hidden` wordt de pagina
   * een scrollcontainer en plakt deze kolom daaraan in plaats van aan het
   * scherm. Dan loopt hij gewoon mee zonder foutmelding.
   */
  .pg-vragen-kop {
    position: sticky;
    top: 120px;
  }

  .pg-vragen-knopboven {
    display: flex;
    margin-top: 8px;
  }

  .pg-vragen-foto {
    display: block;
    width: 100%;
    height: 420px;
    margin-top: 24px;
    border-radius: var(--radius-card);
    overflow: hidden;
    background: var(--surface);
  }

  .pg-vragen-foto img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 55% 40%;
  }

  .pg-vraag > button {
    padding: 24px 0;
    font-size: 20px;
  }

  .pg-vraag-paneel p {
    padding: 0 68px 28px 0;
  }

  .pg-vragen-onder > .knop {
    width: auto;
  }

  .pg-vragen-knoponder {
    display: none;
  }

  .pg-locatiekaarten {
    padding: 0 0 140px;
  }

  .pg-locatiekaarten-raster {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 32px;
  }

  .pg-locatiekaart-beeld {
    aspect-ratio: 5 / 6;
  }

  .pg-locatiekaart-beeld .pg-status {
    top: 32px;
    left: 32px;
  }

  .pg-locatiekaart-naam {
    left: 32px;
    bottom: 32px;
    font-size: 64px;
  }

  .pg-locatiekaart-actie {
    flex-direction: row;
    align-items: center;
    gap: 28px;
  }

  .pg-beide {
    margin-top: -10px;
    padding: 0 0 140px;
  }

  .pg-beide-binnen {
    gap: 48px;
  }

  .pg-beide-kop {
    flex-direction: row;
    align-items: flex-end;
  }

  .pg-beide-raster {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }

  .pg-tegel {
    min-height: 400px;
    padding: 28px;
  }

  .pg-tegel-groot {
    font-size: clamp(44px, 3.8vw, 60px);
  }

  .pg-tegel-tekst {
    font-size: 17px;
  }
}

/* ── de locatiepagina ────────────────────────────────────────────────── */

.pg-locatieinfo {
  padding: 80px 0;
}

.pg-locatieinfo-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  align-items: stretch;
}

.pg-locatieinfo-tekst {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.pg-locatieinfo-tekst .pg-routelink {
  align-self: flex-start;
}

.pg-locatieinfo-kaart {
  position: relative;
  min-height: 320px;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--surface);
}

.pg-locatieinfo-kaart iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.pg-opening {
  padding: 0 0 80px;
}

.pg-opening-vlak {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  align-items: end;
  padding: 32px 24px;
  border-radius: var(--radius-card);
  background: var(--surface-purple-soft);
}

.pg-opening-tekst {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pg-opening-regel {
  max-width: 520px;
  font-size: 18px;
  line-height: 28px;
  color: var(--text-muted-strong);
  text-wrap: pretty;
}

.pg-opening-teller {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.pg-opening-getal {
  font-family: var(--font-heading);
  font-size: 80px;
  line-height: 1;
  font-weight: 300;
  letter-spacing: -2px;
  font-variant-numeric: tabular-nums;
}

.pg-opening-eenheid {
  font-size: 16px;
  font-weight: 600;
}

.pg-galerij {
  padding: 0 0 80px;
}

.pg-galerij-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.pg-galerij-vak {
  position: relative;
  min-height: 260px;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--brand-ink);
}

.pg-galerij-foto,
.pg-galerij-vak img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pg-galerij-leeg {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-purple-soft);
  color: var(--accent-strong);
  font-size: 15px;
  font-weight: 600;
}

.pg-start {
  margin-top: -7px;
  padding: 0 0 80px;
}

.pg-start-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

.pg-start-tekst {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pg-start-tekst .pg-lead {
  max-width: 460px;
  font-size: 18px;
}

.pg-start-kaarten {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.pg-startkaart {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 28px 24px;
  border-radius: var(--radius-card);
  background: var(--surface);
  color: var(--text);
}

.pg-startkaart-donker {
  background: var(--brand-ink);
  color: #ffffff;
}

.pg-startkaart-label {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--accent-strong);
}

.pg-startkaart-donker .pg-startkaart-label {
  color: var(--cta);
}

.pg-startkaart-titel {
  font-family: var(--font-heading);
  font-size: 32px;
  line-height: 38px;
  font-weight: 300;
}

.pg-startkaart-punten {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pg-startkaart-punten li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 16px;
  line-height: 24px;
}

.pg-startkaart-punten svg {
  flex: none;
  margin-top: 4px;
  color: var(--accent-strong);
}

.pg-startkaart-donker .pg-startkaart-punten svg {
  color: var(--cta);
}

/* ── de prijzenpagina ────────────────────────────────────────────────── */

.pg-plannendetail {
  padding: 0 0 80px;
}

.pg-plannendetail-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.pg-plankaart {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 28px 24px;
  border-radius: var(--radius-card);
  background: var(--surface);
  color: var(--text);
}

.pg-plankaart-uit {
  background: var(--brand-ink);
  color: #ffffff;
}

.pg-plankaart-boven {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.pg-plankaart-naam {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.pg-plankaart-badge {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  background: var(--cta);
  color: var(--brand-ink);
  font-size: 13px;
  font-weight: 600;
}

.pg-plankaart-prijs {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pg-plankaart .pg-prijs {
  font-size: 56px;
  line-height: 1;
}

.pg-plankaart-uit .pg-prijs-per {
  color: rgba(255, 255, 255, 0.78);
}

.pg-plankaart-intro {
  margin: 0;
  font-size: 18px;
  line-height: 28px;
  color: var(--text-muted-strong);
}

.pg-plankaart-uit .pg-plankaart-intro {
  color: rgba(255, 255, 255, 0.78);
}

.pg-plankaart-punten {
  margin: 0;
  padding: 24px 0 0;
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px 24px;
  border-top: 1px solid rgba(35, 35, 35, 0.14);
}

.pg-plankaart-uit .pg-plankaart-punten {
  border-top-color: rgba(255, 255, 255, 0.16);
}

.pg-plankaart-punten li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 16px;
  line-height: 24px;
}

.pg-plankaart-punten svg {
  flex: none;
  margin-top: 4px;
  color: var(--accent-strong);
}

.pg-plankaart-uit .pg-plankaart-punten svg {
  color: var(--cta);
}

.pg-plankaart-actie {
  margin-top: auto;
  padding-top: 8px;
}

.pg-plankaart-actie .knop {
  width: 100%;
}

.pg-weten {
  padding: 0 0 80px;
}

.pg-weten-vlak {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 160px;
  padding: 32px 24px 20px;
  border-radius: var(--radius-card);
  background: var(--brand-ink);
  color: #ffffff;
}

.pg-weten-foto,
.pg-weten-vlak > img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pg-weten-sluier {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(35, 35, 35, 0.7) 0%,
    rgba(35, 35, 35, 0.25) 40%,
    rgba(35, 35, 35, 0.85) 100%
  );
}

.pg-weten-kop {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.pg-weten-kop .pg-h2 {
  color: #ffffff;
}

.pg-weten-inleiding {
  max-width: 360px;
  font-size: 18px;
  line-height: 28px;
  color: rgba(255, 255, 255, 0.88);
}

.pg-weten-raster {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

/**
 * De doorzichtige vakken vervagen wat erachter ligt met een echte
 * `backdrop-filter`. Dat is zichtbaar anders dan een halfdoorzichtige kleur
 * over een foto, en het is wat het ontwerp doet.
 */
.pg-weten-tegel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px;
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.pg-weten-vink {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  background: var(--cta);
  color: var(--brand-ink);
}

.pg-weten-titel {
  font-family: var(--font-heading);
  font-size: 28px;
  line-height: 34px;
  font-weight: 300;
}

.pg-weten-tekst {
  font-size: 16px;
  line-height: 24px;
  color: rgba(255, 255, 255, 0.9);
  text-wrap: pretty;
}

/* ── de pagina Waarom Purple Gym ─────────────────────────────────────── */

.pg-waarombeeld {
  padding: 0 0 80px;
}

.pg-waarombeeld-vlak {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--surface-purple-soft);
}

.pg-waarombeeld-foto,
.pg-waarombeeld-vlak img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Zolang de foto nog niet is aangeleverd staat hier de melding. Met opzet
   zichtbaar: een lege plek die er normaal uitziet blijft maanden leeg. */
.pg-beeld-volgt {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-strong);
  font-size: 16px;
  font-weight: 600;
}

.pg-verhaal {
  margin-top: -7px;
  padding: 0 0 80px;
}

.pg-verhaal-binnen {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.pg-uitspraak {
  margin: 0;
  max-width: 1000px;
  font-family: var(--font-heading);
  font-size: 32px;
  line-height: 1.15;
  font-weight: 300;
  letter-spacing: -1px;
  text-wrap: balance;
}

.pg-pijlers {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.pg-pijler {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.pg-pijler-titel {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--accent-strong);
}

.pg-pijler-tekst {
  font-size: 18px;
  line-height: 28px;
  color: var(--text-muted-strong);
  text-wrap: pretty;
}

.pg-intakekeuze {
  padding: 80px 0 0;
}

.pg-intakekeuze-vlak {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  align-items: center;
  padding: 32px 24px 20px;
  border-radius: var(--radius-card);
  background: var(--surface-purple-soft);
}

.pg-intakekeuze-tekst {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
  min-width: 0;
}

.pg-intakekeuze-schuif {
  width: 100%;
  background: #ffffff;
}

.pg-intakekeuze-uitleg {
  margin: 0;
  max-width: 440px;
  font-size: 18px;
  line-height: 1.5;
  color: var(--text-muted-strong);
  text-wrap: pretty;
}

.pg-intakekeuze-knop {
  width: 100%;
}

.pg-intakekeuze-knop .knop {
  width: 100%;
}

.pg-intakekeuze-stappen {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}

.pg-intakekeuze-stappen li {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  min-height: 160px;
  padding: 20px;
  border-radius: var(--radius-card);
  background: #ffffff;
  color: var(--text);
}

/* Met de li erbij, anders wint `.pg-intakekeuze-stappen li` hierboven op
   soortelijk gewicht en blijft het laatste vak wit. */
.pg-intakekeuze-stappen li.pg-intakestap-laatste {
  background: var(--brand-ink);
  color: #ffffff;
}

.pg-intakestap-nr {
  font-family: var(--font-heading);
  font-size: 36px;
  line-height: 1;
  font-weight: 300;
  color: var(--accent-strong);
}

.pg-intakestap-laatste .pg-intakestap-nr {
  color: var(--cta);
}

.pg-intakestap-tekst {
  font-size: 18px;
  line-height: 26px;
  font-weight: 600;
  text-wrap: pretty;
}

@media (min-width: 1024px) {
  .pg-locatieinfo {
    padding: 140px 0;
  }

  .pg-locatieinfo-raster {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 80px;
  }

  .pg-locatieinfo-kaart {
    min-height: 520px;
  }

  .pg-opening {
    padding: 0 0 140px;
  }

  .pg-opening-vlak {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 64px;
    padding: 64px;
  }

  .pg-opening-teller {
    align-items: flex-end;
  }

  .pg-opening-getal {
    font-size: 140px;
  }

  .pg-galerij {
    padding: 0 0 140px;
  }

  /* Het eerste vak is hoog, de twee andere staan ernaast. */
  .pg-galerij-raster {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-rows: 320px 320px;
    gap: 16px;
  }

  .pg-galerij-vak {
    min-height: 0;
  }

  .pg-galerij-raster > *:first-child {
    grid-row: span 2;
  }

  .pg-start {
    margin-top: -10px;
    padding: 0 0 140px;
  }

  .pg-start-raster {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: 80px;
  }

  .pg-start-tekst .pg-lead {
    font-size: 20px;
  }

  .pg-start-twee {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .pg-startkaart {
    padding: 48px;
  }

  .pg-plannendetail {
    padding: 0 0 140px;
  }

  .pg-plannendetail-raster {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 32px;
  }

  .pg-plankaart {
    padding: 48px;
  }

  .pg-plankaart .pg-prijs {
    font-size: 80px;
  }

  .pg-plankaart-punten {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .pg-plankaart-actie .knop {
    width: auto;
  }

  .pg-weten {
    padding: 0 0 140px;
  }

  .pg-weten-vlak {
    min-height: 640px;
    gap: 48px;
    padding: 56px 40px 40px;
  }

  .pg-weten-kop {
    flex-direction: row;
    align-items: flex-end;
  }

  .pg-weten-raster {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .pg-weten-tegel {
    padding: 32px;
  }

  .pg-waarombeeld {
    padding: 0 0 140px;
  }

  .pg-waarombeeld-vlak {
    aspect-ratio: 16 / 7;
  }

  .pg-verhaal {
    margin-top: -10px;
    padding: 0 0 140px;
  }

  .pg-verhaal-binnen {
    gap: 72px;
  }

  .pg-uitspraak {
    font-size: 56px;
  }

  .pg-pijlers {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
  }

  .pg-intakekeuze {
    padding: 140px 0 0;
  }

  .pg-intakekeuze-vlak {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 96px;
    padding: 64px;
  }

  .pg-intakekeuze-schuif {
    width: 420px;
  }

  .pg-intakekeuze-uitleg {
    font-size: 20px;
  }

  .pg-intakekeuze-knop {
    width: auto;
  }

  .pg-intakekeuze-knop .knop {
    width: auto;
  }

  .pg-intakekeuze-stappen li {
    min-height: 220px;
    padding: 28px;
  }

  .pg-intakestap-nr {
    font-size: 56px;
  }
}

/* ── de pagina met alle vragen ──────────────────────────────────────── */

.pg-faq {
  padding: 0 0 80px;
}

.pg-faq-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

.pg-faq-kolom {
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-width: 0;
}

/**
 * De knoppenrij schuift op een telefoon horizontaal weg. De negatieve marge
 * met dezelfde padding erbij laat hem van rand tot rand lopen zonder dat de
 * eerste knop tegen de schermrand plakt.
 */
.pg-faq-knoppen {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  margin: 0 calc(var(--gutter) * -1);
  padding: 0 var(--gutter) 4px;
}

.pg-faq-knoppen button {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 44px;
  min-height: 0;
  padding: 0 16px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition:
    background var(--dur) var(--ease),
    color var(--dur) var(--ease);
}

.pg-faq-knoppen button[aria-pressed='true'] {
  background: var(--brand-ink);
  color: #ffffff;
}

.pg-faq-aantal {
  display: none;
  font-size: 14px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

.pg-faq .pg-vragen-lijst {
  border-top: 0;
  border-bottom: 1px solid var(--border);
}

.pg-faq .pg-vraag {
  border-top: 1px solid var(--border);
  border-bottom: 0;
}

/* De kaart ernaast: op een telefoon een foto met het donkere vlak eronder,
   op een breed scherm een doorzichtig vlak over de foto. */
.pg-faq-hulp {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-radius: var(--radius-card);
  background: var(--brand-ink);
  color: #ffffff;
}

.pg-faq-hulpfoto,
.pg-faq-hulp > img {
  position: relative;
  z-index: -2;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.pg-faq-hulpsluier {
  display: none;
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(35, 35, 35, 0) 30%, rgba(35, 35, 35, 0.55) 100%);
}

.pg-faq-glas {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 24px;
  background: var(--brand-ink);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.pg-faq-hulplabel {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--cta);
}

.pg-faq-hulptitel {
  font-family: var(--font-heading);
  font-size: 28px;
  line-height: 1.15;
  font-weight: 300;
}

.pg-faq-hulptekst {
  font-size: 16px;
  line-height: 24px;
  color: rgba(255, 255, 255, 0.88);
}

.pg-faq-hulpknoppen {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 20px;
  width: 100%;
  margin-top: 12px;
}

/* ── de contactpagina ───────────────────────────────────────────────── */

.pg-contact {
  padding: 0 0 80px;
}

.pg-contact-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.pg-contact-vlak {
  padding: 28px 24px;
  border-radius: var(--radius-card);
  background: var(--surface);
}

.pg-contact-titel {
  display: block;
  margin-bottom: 20px;
  font-family: var(--font-heading);
  font-size: 32px;
  line-height: 38px;
  font-weight: 300;
}

.pg-contact-naast {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pg-contact-foto {
  position: relative;
  height: 260px;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--brand-ink);
}

.pg-contact-foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pg-contact-sluier {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(35, 35, 35, 0) 50%, rgba(35, 35, 35, 0.7) 100%);
}

.pg-contact-fototekst {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 20px;
  color: #ffffff;
  font-family: var(--font-heading);
  font-size: 28px;
  line-height: 34px;
  font-weight: 300;
}

.pg-kanaal {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px;
  border-radius: var(--radius-card);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
}

.pg-kanaal-donker {
  background: var(--brand-ink);
  color: #ffffff;
}

.pg-kanaal:hover {
  color: inherit;
}

.pg-kanaal-icoon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-pill);
  background: #ffffff;
  color: var(--accent-strong);
}

.pg-kanaal-donker .pg-kanaal-icoon {
  background: var(--cta);
  color: var(--brand-ink);
}

.pg-kanaal-tekst {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.pg-kanaal-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--accent-strong);
}

.pg-kanaal-donker .pg-kanaal-label {
  color: rgba(255, 255, 255, 0.75);
}

.pg-kanaal-waarde {
  font-size: 19px;
  line-height: 28px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.pg-volg {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  border-radius: var(--radius-card);
  border: 1px solid var(--border);
}

.pg-volg-titel {
  font-size: 16px;
  font-weight: 600;
}

.pg-volg-links {
  display: flex;
  gap: 8px;
}

.pg-volg-links a {
  display: flex;
  align-items: center;
  height: 44px;
  padding: 0 16px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

.pg-contactlocaties {
  margin-top: -7px;
  padding: 0 0 80px;
}

.pg-contactlocaties-binnen {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.pg-contactlocaties-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.pg-contactlocaties-raster article {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

.pg-contactlocatie-kaart {
  position: relative;
  height: 280px;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--surface);
}

.pg-contactlocatie-kaart iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.pg-contactlocatie-onder {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.pg-contactlocatie-tekst {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 17px;
  line-height: 26px;
}

.pg-contactlocatie-naam {
  font-family: var(--font-heading);
  font-size: 36px;
  line-height: 42px;
  font-weight: 300;
}

.pg-contactlocatie-tijden {
  color: var(--text-muted-strong);
}

.pg-contactlocatie-route {
  font-size: 17px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
  white-space: nowrap;
}

/* ── de juridische pagina's ─────────────────────────────────────────── */

.pg-juridisch {
  padding: 128px 0 40px;
}

.pg-juridisch-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

.pg-juridisch-nav {
  display: flex;
  flex-direction: row;
  gap: 8px;
  overflow-x: auto;
}

.pg-juridisch-nav a {
  flex: none;
  display: flex;
  align-items: center;
  height: 48px;
  padding: 0 18px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.pg-juridisch-nav a[aria-current='page'] {
  background: var(--brand-ink);
  color: #ffffff;
}

.pg-juridisch-tekst {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
  max-width: 760px;
}

.pg-juridisch-titel {
  font-size: 44px;
  line-height: 48px;
  letter-spacing: -1px;
  text-wrap: balance;
}

.pg-juridisch-inleiding {
  font-size: 18px;
  line-height: 28px;
  color: var(--text-muted-strong);
  text-wrap: pretty;
}

/**
 * De ruimte tussen de alinea's staat op de alinea's zelf en niet als `gap` op
 * deze laag. De tekstrenderer van Payload zet er namelijk nog een laag
 * tussen: deze sectie heeft maar één kind, en een `gap` doet dan niets.
 */
.pg-juridisch-body {
  padding-top: 24px;
  border-top: 1px solid var(--border);
  font-size: 17px;
  line-height: 27px;
}

.pg-juridisch-body p + p,
.pg-juridisch-body p + ul,
.pg-juridisch-body ul + p,
.pg-juridisch-body p + ol,
.pg-juridisch-body ol + p {
  margin-top: 16px;
}

.pg-juridisch-body h2 {
  margin: 40px 0 16px;
  font-family: var(--font-heading);
  font-size: 28px;
  line-height: 34px;
  font-weight: 300;
}

.pg-juridisch-body h3 {
  margin: 24px 0 8px;
  font-size: 18px;
  line-height: 27px;
  font-weight: 600;
}

.pg-juridisch-body h4 {
  margin: 24px 0 8px;
  font-size: 17px;
  font-weight: 600;
}

/* De eerste kop hoeft geen ruimte erboven: de streep zit er al. */
.pg-juridisch-body > *:first-child > *:first-child {
  margin-top: 0;
}

.pg-juridisch-body p {
  margin: 0;
  text-wrap: pretty;
}

.pg-juridisch-body ul,
.pg-juridisch-body ol {
  margin: 0;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pg-juridisch-body li {
  text-wrap: pretty;
}

.pg-juridisch-body li::marker {
  color: var(--accent-strong);
}

/* ── de 404 ─────────────────────────────────────────────────────────── */

.pg-404-tekst {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

@media (min-width: 1024px) {
  .pg-faq {
    padding: 0 0 140px;
  }

  .pg-faq-raster {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 64px;
  }

  .pg-faq-knoppen {
    flex-wrap: wrap;
    overflow-x: visible;
    margin: 0;
    padding: 0;
  }

  .pg-faq-knoppen button {
    height: 48px;
    padding: 0 24px;
  }

  .pg-faq-aantal {
    display: block;
  }

  .pg-faq-knoppen button[aria-pressed='true'] .pg-faq-aantal {
    color: rgba(255, 255, 255, 0.7);
  }

  /* De kaart loopt mee met de lijst. Werkt alleen omdat de pagina op
     `overflow-x: clip` staat; zie de regel bij .pg. */
  .pg-faq-hulp {
    position: sticky;
    top: 112px;
    min-height: 620px;
    padding: 20px;
  }

  .pg-faq-hulpfoto,
  .pg-faq-hulp > img {
    position: absolute;
    inset: 0;
    height: 100%;
    aspect-ratio: auto;
  }

  .pg-faq-hulpsluier {
    display: block;
  }

  .pg-faq-glas {
    max-width: 420px;
    padding: 32px;
    border-radius: var(--radius-card);
    background: rgba(35, 35, 35, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.3);
  }

  .pg-faq-hulptitel {
    font-size: 34px;
  }

  .pg-faq-hulpknoppen {
    flex-direction: row;
    align-items: center;
  }

  .pg-contact {
    padding: 0 0 140px;
  }

  .pg-contact-raster {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 32px;
  }

  .pg-contact-vlak {
    padding: 48px;
  }

  .pg-contact-foto {
    height: 340px;
  }

  .pg-contactlocaties {
    margin-top: -10px;
    padding: 0 0 140px;
  }

  .pg-contactlocaties-binnen {
    gap: 48px;
  }

  .pg-contactlocaties-raster {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 32px;
  }

  .pg-contactlocatie-kaart {
    height: 420px;
  }

  .pg-contactlocatie-onder {
    flex-direction: row;
    align-items: flex-end;
  }

  .pg-juridisch {
    padding: 200px 0 72px;
  }

  .pg-juridisch-raster {
    grid-template-columns: minmax(0, 3fr) minmax(0, 8fr);
    gap: 64px;
  }

  .pg-juridisch-nav {
    position: sticky;
    top: 120px;
    flex-direction: column;
    overflow-x: visible;
  }

  .pg-juridisch-titel {
    font-size: 88px;
    line-height: 92px;
    letter-spacing: -2px;
  }
}

/* ── de pagina Proefperiode ─────────────────────────────────────────── */

/**
 * De bovenkant en dit formulier zijn in het ontwerp één sectie. Hier zijn het
 * twee blokken, dus de bovenruimte hier neemt de onderruimte van de bovenkant
 * over: samen is dat dezelfde maat.
 */
.pg-proef {
  background: var(--bg);
  padding: 32px 20px 66px;
}

.pg-proef-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  align-items: start;
  padding: 0;
}

.pg-proef-kolom {
  display: flex;
  flex-direction: column;
  gap: 32px;
  min-width: 0;
  scroll-margin-top: 96px;
}

.pg-proef-stappen button {
  gap: 10px;
  font-size: 15px;
}

.pg-proef-nr {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(35, 35, 35, 0.1);
  color: var(--text-muted);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  transition:
    background-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
}

.pg-proef-nr[data-nu='true'] {
  background: var(--cta);
  color: var(--brand-ink);
}

.pg-proef-nr[data-klaar='true'] {
  background: var(--brand-purple);
  color: #ffffff;
}

.pg-proef-form {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.pg-proef-groep {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pg-proef-vraag {
  font-size: 14px;
  font-weight: 600;
}

/**
 * De locatiekeuze: naast elkaar zodra er ruimte voor is, eronder op een
 * telefoon.
 *
 * Het ontwerp zet hier hard twee kolommen van 72 pixels hoog neer en kijkt
 * niet naar de telefoonstand. Op 375 past het adres van Den Bosch dan niet in
 * een half vak: de naam en het adres liepen aan alle kanten buiten de kaart.
 * Vandaar één kolom onder de tabletbreedte, en een minimumhoogte in plaats
 * van een vaste — een adres van drie regels hoort het vak hoger te maken, niet
 * eruit te steken.
 */
.pg-proef-keuzes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

@media (min-width: 1024px) {
  .pg-proef-keuzes {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

/* De keuze tussen de twee soorten intake volgt dezelfde kolommen als de
   locatiekeuze hierboven; alleen staat de tekst hier boven elkaar, dus hangt
   het vinkje aan de bovenkant. */

.pg-proef-keuzes button {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 72px;
  padding: 12px 18px;
  border: 1px solid transparent;
  border-radius: var(--radius-input);
  background: var(--surface);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition:
    background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.pg-proef-keuzes-breed button {
  align-items: flex-start;
  padding: 18px;
}

.pg-proef-keuzes button:hover {
  border-color: rgba(35, 35, 35, 0.35);
}

.pg-proef-keuzes button[aria-checked='true'] {
  border: 1.5px solid var(--brand-ink);
  background: #ffffff;
}

.pg-proef-keuzes button[data-fout='true'] {
  border-color: var(--fout);
}

.pg-proef-vink {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 1.5px solid rgba(35, 35, 35, 0.35);
  background: #ffffff;
  color: var(--cta);
  transition:
    background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.pg-proef-keuzes-breed .pg-proef-vink {
  margin-top: 1px;
}

.pg-proef-vink svg {
  opacity: 0;
  transform: scale(0.5);
  transition:
    opacity var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}

.pg-proef-keuzes button[aria-checked='true'] .pg-proef-vink {
  border-color: var(--brand-ink);
  background: var(--brand-ink);
}

.pg-proef-keuzes button[aria-checked='true'] .pg-proef-vink svg {
  opacity: 1;
  transform: scale(1);
}

.pg-proef-keuzetekst {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.pg-proef-keuzenaam {
  font-size: 17px;
  line-height: 22px;
  font-weight: 600;
}

.pg-proef-keuzesub {
  font-size: 13px;
  line-height: 18px;
  color: var(--text-muted);
}

.pg-proef-keuzes-breed .pg-proef-keuzesub {
  font-size: 14px;
  line-height: 20px;
  color: var(--text-muted-strong);
  text-wrap: pretty;
}

.pg-proef-vast {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 56px;
  padding: 0 18px;
  border-radius: var(--radius-input);
  background: var(--surface);
  font-size: 15px;
}

.pg-proef-vast button {
  border: 0;
  background: transparent;
  padding: 0;
  min-height: 0;
  color: var(--accent-strong);
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.pg-proef-velden {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.pg-veld {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pg-veld label {
  position: relative;
  display: block;
}

/**
 * Het label staat binnen het veld, boven de ingevulde tekst. Vandaar de
 * bovenruimte van 24 pixels in het invoerveld: anders loopt de tekst door het
 * label heen.
 */
.pg-veld-label {
  position: absolute;
  top: 11px;
  left: 18px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  color: var(--text-muted);
  pointer-events: none;
}

.pg-veld input {
  display: block;
  width: 100%;
  height: var(--input-h);
  padding: 24px 18px 0;
  border: 1px solid transparent;
  border-radius: var(--radius-input);
  background: var(--surface);
  color: var(--text);
  font-size: 17px;
  outline: none;
  transition:
    background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.pg-veld input:hover {
  background: #e6e3da;
}

.pg-veld input:focus {
  background: #ffffff;
  border-color: var(--brand-ink);
}

.pg-veld input[aria-invalid='true'] {
  border-color: var(--fout);
}

.pg-veld-fout {
  margin: 0;
  padding-left: 4px;
  font-size: 13px;
  color: var(--fout);
}

/* Een geldige kortingscode is goed nieuws en geen fout; zelfde plek en maat,
   andere kleur. Staat als tweede klasse naast .pg-veld-fout, zodat alleen de
   kleur verschilt en de uitlijning gelijk blijft. */
.pg-veld-goed {
  color: var(--brand-ink);
}

/* De inleiding boven het aanmeldformulier bestaat in twee smaken: de gewone
   en die voor Den Bosch, dat in december opent. Allebei staan ze in de pagina;
   het formulier zet de gekozen vestiging op <body> en hier valt de keuze. Dat
   is dezelfde aanpak als bij data-intake, en zonder JavaScript blijft de
   gewone regel staan. */
.pg-proef-lead-db {
  display: none;
}

body[data-vestiging='den-bosch'] .pg-proef-lead:not(.pg-proef-lead-db) {
  display: none;
}

body[data-vestiging='den-bosch'] .pg-proef-lead-db {
  display: block;
}

/* De geboortedatum staat op gelijke cijferbreedtes, zodat de streepjes niet
   verschuiven terwijl er wordt getypt. */
.pg-veld input[name='geboortedatum'] {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.5px;
}

.pg-proef-codeknop {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: var(--input-h);
  padding: 0 18px;
  border: 1px dashed rgba(35, 35, 35, 0.25);
  border-radius: var(--radius-input);
  background: transparent;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition:
    border-color var(--dur) var(--ease),
    background-color var(--dur) var(--ease);
}

.pg-proef-codeknop:hover {
  border-color: var(--brand-ink);
  background: var(--surface);
}

.pg-proef-plus {
  flex: none;
  position: relative;
  display: flex;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--surface);
}

.pg-proef-plus i {
  position: absolute;
  background: currentColor;
  border-radius: 2px;
}

.pg-proef-plus i:first-child {
  left: 7px;
  right: 7px;
  top: 12px;
  height: 2.2px;
}

.pg-proef-plus i:last-child {
  top: 7px;
  bottom: 7px;
  left: 12px;
  width: 2.2px;
}

.pg-proef-code input {
  padding-right: 52px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.pg-proef-code > button {
  position: absolute;
  top: 50%;
  right: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  min-height: 0;
  margin-top: -14px;
  border: 0;
  border-radius: 50%;
  background: rgba(35, 35, 35, 0.08);
  color: var(--text);
  cursor: pointer;
}

/* Het kruisje: twee streepjes die 45 graden gedraaid over elkaar liggen. */
.pg-proef-code > button > span {
  position: relative;
  display: block;
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
}

.pg-proef-code > button i {
  position: absolute;
  background: currentColor;
  border-radius: 2px;
}

.pg-proef-code > button i:first-child {
  left: 0;
  right: 0;
  top: 4px;
  height: 2.4px;
}

.pg-proef-code > button i:last-child {
  top: 0;
  bottom: 0;
  left: 4px;
  width: 2.4px;
}

.pg-proef-kosten {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.pg-proef-kostentekst {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.pg-proef-kostenlabel {
  font-size: 15px;
  font-weight: 600;
}

.pg-proef-kostenactie {
  font-size: 13px;
  font-weight: 500;
  color: var(--accent-strong);
}

/* Het bedrag krimpt niet mee: liever de regel ernaast laten afbreken dan een
   prijs die half wegvalt. */
.pg-proef-kostenprijs {
  display: flex;
  flex: none;
  align-items: baseline;
  gap: 10px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.pg-proef-kostenprijs s {
  font-size: 15px;
  color: var(--text-muted);
}

.pg-proef-kostenprijs strong {
  font-size: 18px;
  font-weight: 600;
  color: var(--accent-strong);
}

.pg-proef-verstuur {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pg-proef-verstuur .knop[disabled] {
  opacity: 0.6;
  cursor: progress;
}

.pg-proef-onderknop {
  margin: 0;
  font-size: 13px;
  line-height: 19px;
  color: var(--text-muted);
  text-align: center;
}

/* ── stap 2: de agenda ──────────────────────────────────────────────── */

.pg-proef-plan {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.pg-proef-plankop {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pg-proef-planh2 {
  font-size: 30px;
  line-height: 1.1;
}

.pg-proef-plantekst {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  color: var(--text-muted-strong);
}

/**
 * Het vak om de agenda van LeadConnector.
 *
 * De agenda tekent zelf een witte kaart met een dunne rand. Daarom heeft dit vak
 * geen eigen achtergrond, rand of afronding meer: dat gaf een kader in een
 * kader. Het vak is precies zo breed als de kolom (dus even breed als de velden
 * van stap 1) en precies zo hoog als de kaart: die hoogte stuurt de agenda zelf
 * bij het laden door en ProefFormulier.tsx zet hem als hoogte op dit vak.
 *
 * De 850 pixels is de terugval zolang er geen meting is, of als die niet komt.
 * Het is de hoogste maat die de agenda op deze breedtes doorgeeft (820 tot 847),
 * dus de kaart staat er altijd volledig in en het vak krimpt hooguit een paar
 * pixels zodra de meting binnenkomt. Volgende stappen in de agenda (tijden,
 * gegevens) scrollen binnen deze hoogte; daar stuurt de agenda geen maat voor.
 *
 * Tot de meting er is staat er een lichte vlak, zodat er tijdens het laden geen
 * gat in de pagina valt.
 */
.pg-proef-agenda {
  height: 850px;
  border-radius: var(--radius-media);
  background: var(--surface);
  transition:
    height 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    background-color 0.3s ease;
}

.pg-proef-agenda[data-gemeten='true'] {
  background: transparent;
}

.pg-proef-agenda iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .pg-proef-agenda {
    transition: none;
  }
}

.pg-proef-nieuwvenster {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.pg-proef-geenagenda {
  margin: 0;
  padding: 20px;
  border-radius: var(--radius-media);
  border: 1px solid var(--border);
  font-size: 16px;
  line-height: 25px;
  color: var(--text-muted-strong);
}

.pg-proef-terug {
  align-self: center;
  border: 0;
  background: transparent;
  padding: 0;
  min-height: 0;
  color: var(--text-muted);
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* ── stap 3: het is gelukt ─────────────────────────────────────────── */

.pg-proef-klaar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.pg-proef-klaarvink {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 10px;
  background: var(--brand-ink);
  color: var(--cta);
}

.pg-proef-samenvatting {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 20px;
  border-radius: var(--radius-media);
  background: var(--surface);
  font-size: 16px;
  line-height: 24px;
}

.pg-proef-samenvatting strong {
  font-weight: 600;
}

.pg-proef-klaartekst {
  margin: 0;
  font-size: 15px;
  line-height: 23px;
  color: var(--text-muted-strong);
}

/* ── de kaart naast het formulier ──────────────────────────────────── */

/* Op een telefoon staat er een smalle balk met een foto boven het formulier;
   op een breed scherm een hoge kaart ernaast die meeloopt. */
.pg-proef-zij {
  display: none;
}

/* ── het stappenplan ───────────────────────────────────────────────── */

.pg-stappen {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--brand-ink);
  color: #ffffff;
  padding: 80px 0;
}

.pg-stappen-gloed {
  position: absolute;
  z-index: -1;
  right: -240px;
  bottom: -320px;
  width: 720px;
  height: 720px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(169, 136, 170, 0.35) 0%,
    rgba(169, 136, 170, 0) 65%
  );
}

.pg-stappen-binnen {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.pg-stappen-kop {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.pg-stappen-h2 {
  max-width: 640px;
  font-size: 40px;
  line-height: 1.07;
  letter-spacing: -1px;
  text-wrap: balance;
}

.pg-stappen-inleiding {
  max-width: 400px;
  font-size: 18px;
  line-height: 28px;
  color: rgba(255, 255, 255, 0.75);
  text-wrap: pretty;
}

.pg-stappen-raster {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.pg-stapkaart {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px 28px;
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
}

.pg-stapkaart-eerste {
  background: var(--cta);
  color: var(--brand-ink);
}

.pg-stapkaart-boven {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 28px;
}

.pg-stapkaart-nr {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  opacity: 0.7;
}

.pg-stapkaart-label {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  background: var(--cta);
  color: var(--brand-ink);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.pg-stapkaart-eerste .pg-stapkaart-label {
  background: var(--brand-ink);
  color: #ffffff;
}

.pg-stapkaart-titel {
  margin: 8px 0 0;
  font-family: var(--font-heading);
  font-size: 28px;
  line-height: 33px;
  font-weight: 300;
  text-wrap: balance;
}

.pg-stapkaart-tekst {
  margin: 0;
  font-size: 16px;
  line-height: 25px;
  opacity: 0.78;
  text-wrap: pretty;
}

/* Een stap die meewisselt met de keuze in het aanmeldformulier staat twee keer
   in de pagina; hier blijft er één van over. Het formulier zet de keuze op
   <body>, zie ProefFormulier.tsx.

   De persoonlijke variant is de standaard: staat er niets op <body> — geen
   JavaScript, of een pagina zonder formulier — dan is dat wat je ziet, en dat
   is ook waar het formulier zelf mee begint. */
.pg-stapkaart [data-intake='zelfstandig'] {
  display: none;
}

body[data-intake='zelfstandig'] .pg-stapkaart [data-intake='zelfstandig'] {
  display: revert;
}

body[data-intake='zelfstandig'] .pg-stapkaart [data-intake='persoonlijk'] {
  display: none;
}

.pg-stappen-actie {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 20px 28px;
}

.pg-stappen-naast {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.7);
}

/* ── de stappen van de intake ──────────────────────────────────────── */

.pg-intakestappen {
  background: var(--surface);
  padding: 80px 0;
}

.pg-intakestappen-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  align-items: center;
}

.pg-intakestappen-foto {
  position: relative;
  order: 0;
  min-height: 300px;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--brand-ink);
  isolation: isolate;
}

.pg-intakestappen-foto > span {
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: 0;
  transform: scale(1);
  transition:
    opacity 700ms var(--ease),
    transform 4000ms linear;
}

.pg-intakestappen-foto > span[data-aan='true'] {
  opacity: 1;
}

.pg-intakestappen-foto > span[data-loopt='true'] {
  transform: scale(1.06);
}

.pg-intakestappen-foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pg-intakestappen-tekst {
  order: 1;
  display: flex;
  flex-direction: column;
  gap: 48px;
  min-width: 0;
}

.pg-intakestappen-kop {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pg-intakestappen-h2 {
  font-size: 40px;
  line-height: 1.07;
  letter-spacing: -1px;
  text-wrap: balance;
}

.pg-intakestappen-inleiding {
  max-width: 480px;
  font-size: 18px;
  line-height: 28px;
  color: var(--text-muted-strong);
  text-wrap: pretty;
}

.pg-intakestappen-lijst {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid rgba(35, 35, 35, 0.14);
}

.pg-intakestappen-lijst li {
  position: relative;
  border-top: 1px solid rgba(35, 35, 35, 0.14);
}

.pg-intakestappen-balk {
  position: absolute;
  top: -1px;
  left: 0;
  height: 2px;
  background: var(--brand-purple);
}

.pg-intakestappen-lijst button {
  display: flex;
  align-items: baseline;
  gap: 20px;
  width: 100%;
  padding: 22px 0;
  border: 0;
  background: transparent;
  color: rgba(35, 35, 35, 0.45);
  text-align: left;
  cursor: pointer;
  transition: color var(--dur) var(--ease);
}

.pg-intakestappen-lijst li[data-aan='true'] button {
  color: var(--text);
}

.pg-intakestappen-nr {
  flex: none;
  width: 32px;
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: rgba(35, 35, 35, 0.4);
}

.pg-intakestappen-lijst li[data-aan='true'] .pg-intakestappen-nr {
  color: var(--accent-strong);
}

.pg-intakestappen-titel {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: -0.3px;
}

.pg-intakestappen-paneel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 500ms var(--ease);
}

.pg-intakestappen-paneel > div {
  overflow: hidden;
  min-height: 0;
}

.pg-intakestappen-paneel[data-aan='true'] {
  grid-template-rows: 1fr;
}

.pg-intakestappen-paneel p {
  margin: 0;
  padding: 0 0 28px 52px;
  max-width: 520px;
  font-size: 17px;
  line-height: 27px;
  color: var(--text-muted-strong);
  text-wrap: pretty;
}

@media (min-width: 1024px) {
  .pg-proef {
    padding: 64px var(--gutter) 134px;
  }

  .pg-proef-raster {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 80px;
  }

  .pg-proef-kolom {
    gap: 48px;
  }

  .pg-proef-velden {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pg-proef-keuzes-breed {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .pg-proef-planh2 {
    font-size: 36px;
  }

  .pg-proef-zij {
    display: block;
    position: sticky;
    top: 120px;
  }

  .pg-proef-zijkaart {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: var(--radius-card);
    overflow: hidden;
    isolation: isolate;
    background: var(--brand-ink);
    color: #ffffff;
  }

  .pg-proef-zijfoto {
    position: absolute;
    inset: 0;
    z-index: -2;
    opacity: 0;
    transform: scale(1.06);
    transition:
      opacity 600ms var(--ease),
      transform 1200ms var(--ease);
  }

  .pg-proef-zijfoto[data-aan='true'] {
    opacity: 1;
    transform: scale(1);
  }

  .pg-proef-zijfoto img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .pg-proef-zijsluier {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
      180deg,
      rgba(35, 35, 35, 0) 25%,
      rgba(35, 35, 35, 0.55) 55%,
      rgba(35, 35, 35, 0.92) 100%
    );
  }

  .pg-proef-zijtekst {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 36px;
  }

  .pg-proef-zijlabel {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--cta);
  }

  .pg-proef-zijlabel > span {
    display: block;
    width: 32px;
    height: 1px;
    background: currentColor;
  }

  .pg-proef-zijtitel {
    font-family: var(--font-heading);
    font-weight: 300;
    font-size: 40px;
    line-height: 44px;
    letter-spacing: -0.5px;
    text-wrap: balance;
  }

  .pg-proef-zijregel {
    font-size: 16px;
    line-height: 24px;
    color: rgba(255, 255, 255, 0.8);
    text-wrap: pretty;
  }

  .pg-proef-zijpunten {
    margin: 12px 0 0;
    padding: 20px 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    flex-direction: column;
    gap: 10px;
  }

  .pg-stappen {
    padding: 140px 0;
  }

  .pg-stappen-binnen {
    gap: 72px;
  }

  .pg-stappen-kop {
    flex-direction: row;
    align-items: flex-end;
  }

  .pg-stappen-h2 {
    font-size: 56px;
  }

  .pg-stappen-raster {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
  }

  .pg-stappen-actie {
    flex-direction: row;
    align-items: center;
  }

  .pg-intakestappen {
    padding: 140px 0;
  }

  .pg-intakestappen-raster {
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    gap: 80px;
  }

  .pg-intakestappen-foto {
    order: 2;
    min-height: 720px;
  }

  .pg-intakestappen-h2 {
    font-size: 56px;
  }

  .pg-intakestappen-lijst button {
    padding: 28px 0;
  }

  .pg-intakestappen-titel {
    font-size: 36px;
  }
}

/**
 * De streepjes die vollopen: bij de beoordelingen en bij de stappen van de
 * intake. Een animatie en geen overgang, zodat hij herstart doordat het
 * element opnieuw wordt gemaakt; met een overgang zou er eerst een stukje
 * state terug naar nul moeten.
 */
@keyframes pg-vollopen {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}

.pg-reviews-balk,
.pg-intakestappen-balk {
  width: 0%;
  animation-name: pg-vollopen;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

/* ── het contactformulier ────────────────────────────────────────────── */

/**
 * De vorm komt uit het ontwerp; de valkuilen staan in formulier.css uit de
 * gedeelde laag. Het label staat boven het veld, anders dan bij het
 * aanmeldformulier op de proefperiodepagina: daar staat het ín het veld.
 */
.pg-formulier {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px 16px;
}

.pg-formulier-veld {
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* Een cel in een raster krimpt niet onder de breedte van zijn inhoud; zonder
     deze regel loopt een lang veld buiten het vlak. */
  min-width: 0;
}

.pg-formulier-breed {
  grid-column: 1 / -1;
}

.pg-formulier-label {
  font-size: 14px;
  font-weight: 600;
}

.pg-formulier-optioneel {
  font-weight: 400;
  color: var(--text-muted);
}

.pg-formulier input[type='text'],
.pg-formulier input[type='email'],
.pg-formulier input[type='tel'],
.pg-formulier select,
.pg-formulier textarea {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: 60px;
  padding: 0 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-input);
  background: #ffffff;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  outline: none;
  transition: border-color var(--dur) var(--ease);
}

.pg-formulier input:focus,
.pg-formulier select:focus,
.pg-formulier textarea:focus {
  border-color: var(--brand-ink);
}

.pg-formulier input[aria-invalid='true'],
.pg-formulier select[aria-invalid='true'],
.pg-formulier textarea[aria-invalid='true'] {
  border-color: var(--fout);
}

.pg-formulier textarea {
  height: auto;
  min-height: 150px;
  padding: 16px 18px;
  line-height: 26px;
  resize: vertical;
}

/* De keuze als twee knoppen met een vinkje, in plaats van een uitklaplijst. */
/* Zelfde reden als bij `.pg-schuif`: met `1fr` krimpt een kolom niet onder de
   breedte van zijn inhoud, en dan liep de tweede knop buiten het raster. */
.pg-formulier-keuzes {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}

.pg-formulier-keuzes button {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  height: 60px;
  padding: 0 16px;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: var(--radius-input);
  background: #ffffff;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition:
    background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.pg-formulier-keuzes button[aria-checked='true'] {
  border-color: var(--accent-strong);
  background: var(--surface-purple-soft);
}

.pg-formulier-vink {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  border: 1.5px solid rgba(35, 35, 35, 0.35);
  background: transparent;
  color: #ffffff;
  transition:
    background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.pg-formulier-vink svg {
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}

.pg-formulier-keuzes button[aria-checked='true'] .pg-formulier-vink {
  border-color: var(--accent-strong);
  background: var(--accent-strong);
}

.pg-formulier-keuzes button[aria-checked='true'] .pg-formulier-vink svg {
  opacity: 1;
}

.pg-formulier-melding {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 15px;
  color: #a33a3a;
}

.pg-formulier-verstuur {
  grid-column: 1 / -1;
}

.pg-formulier-verstuur .knop {
  width: 100%;
}

.pg-formulier-verstuur .knop[disabled] {
  opacity: 0.6;
  cursor: progress;
}

@media (min-width: 1024px) {
  .pg-formulier {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pg-formulier-verstuur .knop {
    width: auto;
  }
}

/* ── tikdoelen op een telefoon ────────────────────────────────────────── */

/**
 * Elke link die je met een duim raakt is minstens 44 pixels hoog.
 *
 * Dat staat in de afspraken van Klubb en het ontwerp houdt er geen rekening
 * mee: daar zijn de voetlinks 24 pixels hoog en "Plan je route" 25. Op een
 * breed scherm maakt dat niet uit, daar wijs je met een muis; vandaar dat dit
 * alleen onder de laptopbreedte staat.
 *
 * Twee manieren, en het verschil zit in de ruimte eromheen. Waar er plek is
 * groeit de link zelf met ruimte erboven en eronder, en krimpt de tussenruimte
 * even hard mee, zodat het ritme hetzelfde blijft. Waar dat de opmaak zou
 * verschuiven — een link midden in een regel tekst — rekt alleen het
 * tikvlak op, met een laagje eroverheen dat je niet ziet.
 */
@media (max-width: 1023px) {
  .pg-voet-kolom {
    gap: 0;
  }

  .pg-voet-kopje {
    margin-bottom: 4px;
  }

  .pg-voet-kolom > a {
    padding-block: 10px;
  }

  .pg-voet-juridisch a,
  .pg-voet-klubb {
    display: inline-flex;
    align-items: center;
    min-height: var(--tikdoel);
  }

  .pg-voet-locatie {
    padding-block: 10px;
  }

  .pg-routelink,
  .pg-hero-route,
  .pg-locaties-route,
  .pg-contactlocatie-route,
  .knop-tekst,
  .pg-kop-logo,
  .pg-voet-logo {
    position: relative;
  }

  .pg-routelink::after,
  .pg-hero-route::after,
  .pg-locaties-route::after,
  .pg-contactlocatie-route::after,
  .knop-tekst::after,
  .pg-kop-logo::after,
  .pg-voet-logo::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: var(--tikdoel);
    transform: translateY(-50%);
  }
}

/**
 * Onder 375 pixels — de kleinste breedte waar wij op ontwerpen — krijgt de
 * stapschakelaar een slagje kleiner. Dat is geen vijfde breekpunt: het houdt
 * alleen "Intake plannen" heel op een iPhone SE.
 */
@media (max-width: 374px) {
  .pg-schuif button {
    gap: 6px;
    padding: 0 4px;
    font-size: 14px;
  }
}

/**
 * De oproep midden in beeld, waarmee iemand zich alvast kan inschrijven voor
 * een vestiging die nog opengaat. Zie src/componenten/Oproep.tsx.
 *
 * Het is een echt `<dialog>`, dus de browser legt hem in de bovenste laag en
 * tekent zelf de achtergrond via `::backdrop`. Daardoor is er geen eigen
 * z-index nodig: hij komt per definitie boven de kopbalk en boven elke sticky
 * kolom, ook boven dingen die er later bij komen.
 *
 * Een dicht `<dialog>` staat op `display: none`; de regels hieronder gelden dus
 * alleen als hij open is. Vandaar `.pg-oproep[open]` voor de indeling.
 */
.pg-oproep {
  padding: 0;
  border: 0;
  background: none;
  /* Het dialoogelement vult het scherm en centreert de kaart. Dat is ook wat
     een klik "naast de kaart" mogelijk maakt: die raakt dan dit element.
     Met `inset` en niet met `100vw`: die eenheid rekent de schuifbalk mee en
     levert op de desktop een paar pixels horizontale scroll op. */
  position: fixed;
  inset: 0;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  overflow: auto;
  overscroll-behavior: contain;
}

.pg-oproep[open] {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Ruimte rondom, zodat de kaart op een kleine telefoon niet tegen de randen
     aanloopt. Met de veilige zone erbij voor de balk van iOS. */
  padding: max(var(--gutter), env(safe-area-inset-top)) var(--gutter)
    max(var(--gutter), env(safe-area-inset-bottom));
}

.pg-oproep::backdrop {
  background: rgba(35, 35, 35, 0.55);
  animation: pg-oproep-laag 200ms ease-out both;
}

.pg-oproep-kaart {
  position: relative;
  width: min(460px, 100%);
  padding: 32px 32px 28px;
  border-radius: var(--radius-card);
  background: var(--bg);
  box-shadow: 0 18px 50px rgba(35, 35, 35, 0.22);
  animation: pg-oproep-in 220ms ease-out both;
}

@keyframes pg-oproep-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
}

@keyframes pg-oproep-laag {
  from {
    opacity: 0;
  }
}

.pg-oproep-kop {
  margin: 0 36px 10px 0;
  font-family: var(--font-heading);
  /* Meegroeien met het scherm, maar nooit groter dan de sectiekoppen op de
     pagina zelf: dit blijft een kaart en geen tweede titel. */
  font-size: clamp(1.5rem, 3vw, 1.875rem);
  line-height: 1.2;
  color: var(--text);
}

.pg-oproep-tekst {
  margin: 0 0 22px;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--text-muted);
}

/**
 * De sluitknop. Het tikdoel is de volle 44 pixels uit de afspraken, maar het
 * kruisje zelf is klein. Hij staat in de kaart en niet in de hoek van het
 * scherm: op een telefoon is de hoek van het scherm de duimzone van de
 * browser zelf.
 */
.pg-oproep-sluit {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tikdoel);
  height: var(--tikdoel);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
}

.pg-oproep-sluit svg {
  width: 18px;
  height: 18px;
}

.pg-oproep-sluit:hover,
.pg-oproep-sluit:focus-visible {
  color: var(--text);
  background: var(--surface);
}

@media (max-width: 767px) {
  .pg-oproep-kaart {
    padding: 28px 24px 24px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   De evenementpagina

   Nagebouwd uit het ontwerp in input/009. Purple Gym, op de tokens van deze
   stylesheet. De fonts uit die export kloppen niet; hier staan dus gewoon
   --font-heading en --font-body van de site.

   Breekpunt 1024px, net als de rest van dit bestand. Mobiel eerst: alles
   onder elkaar, pas daarboven twee kolommen.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── gedeelde onderdelen ────────────────────────────────────────────────── */

/* `.pg-label` en `.pg-lead` staan al bovenin deze stylesheet en doen precies
   wat deze pagina nodig heeft. Ze hier nog eens definiëren overschreef ze
   site-breed — de lead ging van 20 naar 18 pixels op elke pagina die hem
   gebruikt. Dus: hergebruiken, niet herhalen.

   Het vierkante vlak met een icoon erin. */
.pg-icoonvak {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-card);
  background: var(--surface-purple-soft);
  color: var(--accent-strong);
}

/* Een foto met een donker verloop onderin en een bijschrift erover. */
.pg-fotovlak {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--brand-ink);
}

.pg-fotovlak img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pg-fotovlak::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(35, 35, 35, 0) 50%, rgba(35, 35, 35, 0.7) 100%);
}

.pg-fotobijschrift {
  position: absolute;
  z-index: 1;
  left: 24px;
  right: 24px;
  bottom: 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: #ffffff;
}

.pg-fotobijschrift small {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--cta);
}

.pg-fotobijschrift span {
  font-family: var(--font-heading);
  font-size: 28px;
  line-height: 34px;
  font-weight: 300;
}

@media (min-width: 1024px) {
  .pg-fotobijschrift span {
    font-size: 30px;
    line-height: 36px;
  }
}

/* ── de bovenkant van een evenement ─────────────────────────────────────── */

/* De lagen liggen op volgorde van het document, net als bij de hero van de
   homepage: eerst de foto, dan de sluier, dan de tekst. Geen z-index en geen
   isolation — met een negatieve z-index verdween de foto achter het vlak van
   de sectie zelf. */
.pg-hero-evenement {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 760px;
  padding: 120px 0 40px;
  background: var(--brand-ink);
  color: var(--text-on-dark);
  overflow: hidden;
}

.pg-hero-evenement .pg-hero-beeldvlak img {
  object-position: 50% 45%;
}

/* Twee verlopen over elkaar: van boven naar beneden voor de leesbaarheid van
   de tekst onderin, en van links voor die van de titel. */
.pg-hero-evenement-sluier {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(35, 35, 35, 0.6) 0%,
      rgba(35, 35, 35, 0.55) 40%,
      rgba(35, 35, 35, 0.92) 100%
    );
}

.pg-hero-evenement-rij {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
}

.pg-hero-evenement-tekst {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  max-width: 780px;
}

.pg-hero-evenement-intro {
  max-width: 580px;
  font-size: 18px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.9);
}

.pg-hero-evenement-knoppen {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 18px;
  width: 100%;
  margin-top: 8px;
}

/* De pil boven de titel: een stip en een korte regel op matglas. */
.pg-pil {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  border-radius: var(--radius-card);
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 14px;
  font-weight: 600;
}

.pg-pil i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cta);
}

/* De kaart naast de titel. */
.pg-glas {
  width: 100%;
  border-radius: var(--radius-card);
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(35, 35, 35, 0.42);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
}

.pg-glas-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 24px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.pg-glas-top small {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--cta);
}

.pg-glas-top span {
  font-size: 16px;
  line-height: 22px;
  color: rgba(255, 255, 255, 0.85);
}

.pg-glas-top .pg-glas-getal {
  flex: none;
  font-family: var(--font-heading);
  font-size: 72px;
  line-height: 0.9;
  font-weight: 300;
  letter-spacing: -2px;
  font-variant-numeric: tabular-nums;
}

.pg-glas-regel {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 16px;
  line-height: 24px;
}

.pg-glas-regel svg {
  flex: none;
  color: var(--cta);
}

.pg-glas-voet {
  padding: 16px 24px;
  font-size: 14px;
  line-height: 20px;
  color: rgba(255, 255, 255, 0.7);
}

@media (min-width: 1024px) {
  .pg-hero-evenement {
    min-height: 880px;
    padding: 200px 0 72px;
  }

  .pg-hero-evenement-sluier {
    background:
      linear-gradient(
        180deg,
        rgba(35, 35, 35, 0.55) 0%,
        rgba(35, 35, 35, 0.15) 35%,
        rgba(35, 35, 35, 0.88) 100%
      ),
      linear-gradient(90deg, rgba(35, 35, 35, 0.55) 0%, rgba(35, 35, 35, 0) 65%);
  }

  .pg-hero-evenement-rij {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 64px;
  }

  .pg-hero-evenement-knoppen {
    flex-direction: row;
    align-items: center;
    gap: 20px;
    width: auto;
  }

  .pg-glas {
    flex: none;
    width: 360px;
  }
}

/* ── het programma ──────────────────────────────────────────────────────── */

.pg-verwachting-binnen {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.pg-verwachting-kop {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.pg-verwachting-koptekst {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pg-verwachting-inleiding {
  max-width: 460px;
}

.pg-verwachting-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  align-items: stretch;
}

.pg-verwachting-foto {
  min-height: 360px;
}

.pg-verwachting-lijst {
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--border);
}

.pg-verwachting-lijst li {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 8px 24px;
  align-items: start;
  padding: 24px 0;
  border-top: 1px solid var(--border);
}

.pg-verwachting-lijst strong {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-heading);
  font-size: 24px;
  line-height: 1.2;
  font-weight: 300;
}

.pg-verwachting-lijst p {
  margin: 0;
  font-size: 17px;
  line-height: 27px;
  color: var(--text-muted-strong);
  text-wrap: pretty;
}

/* Het nummer valt op een smal scherm weg: daar zegt de lijst zelf al genoeg,
   en het zou een derde kolom kosten die er niet is. */
.pg-verwachting-nr {
  display: none;
  font-family: var(--font-heading);
  font-size: 22px;
  line-height: 1;
  font-weight: 300;
  color: var(--accent-strong);
  padding-top: 4px;
}

.pg-verwachting-statement {
  margin: 0;
  max-width: 900px;
  font-family: var(--font-heading);
  font-size: 28px;
  line-height: 1.2;
  font-weight: 300;
  letter-spacing: -0.5px;
  text-wrap: balance;
}

.pg-verwachting-statement span {
  display: block;
}

@media (min-width: 1024px) {
  .pg-verwachting-binnen {
    gap: 64px;
  }

  .pg-verwachting-kop {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
  }

  .pg-verwachting-raster {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 64px;
  }

  .pg-verwachting-foto {
    min-height: 560px;
  }

  .pg-verwachting-lijst li {
    grid-template-columns: 52px minmax(0, 1fr) auto;
    padding: 28px 0;
  }

  .pg-verwachting-lijst strong {
    font-size: 28px;
  }

  .pg-verwachting-nr {
    display: block;
  }

  .pg-verwachting-statement {
    font-size: 40px;
  }
}

/* ── de actie ───────────────────────────────────────────────────────────── */

.pg-actie-binnen {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  align-items: center;
  padding: 32px 24px 24px;
  border-radius: var(--radius-card);
  background: var(--surface-purple-soft);
}

.pg-actie-tekst {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  min-width: 0;
}

.pg-actie-label {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 12px;
  border-radius: var(--radius-card);
  background: #ffffff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--accent-strong);
}

.pg-actie-h2 {
  margin: 0;
}

.pg-actie-inleiding {
  margin: 0;
  max-width: 500px;
}

.pg-actie-tegels {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.pg-actietegel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  min-height: 200px;
  padding: 24px;
  border-radius: var(--radius-card);
  background: #ffffff;
}

.pg-actietegel-donker {
  background: var(--brand-ink);
  color: var(--text-on-dark);
}

.pg-actietegel-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--cta);
}

.pg-actietegel-groot {
  display: flex;
  align-items: flex-end;
  gap: 16px;
}

.pg-actietegel-groot b {
  font-family: var(--font-heading);
  font-size: 110px;
  line-height: 0.85;
  font-weight: 300;
  letter-spacing: -3px;
  color: var(--cta);
}

.pg-actietegel-groot > span {
  display: block;
  padding-bottom: 6px;
  font-size: 18px;
  line-height: 26px;
  font-weight: 600;
}

.pg-actietegel-groot > span span {
  display: block;
}

.pg-actietegel strong {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-heading);
  font-size: 28px;
  line-height: 34px;
  font-weight: 300;
}

.pg-actietegel p {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  color: var(--text-muted-strong);
}

/* De smalle balk: dezelfde inhoud, minder nadruk. Hij staat tussen twee
   secties in en mag die niet overstemmen. */
.pg-actie[data-variant='banner'] .pg-actie-binnen {
  padding: 22px 24px;
}

.pg-actie[data-variant='banner'] .pg-actie-h2 {
  font-size: 24px;
  line-height: 32px;
}

@media (min-width: 1024px) {
  .pg-actie-binnen {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: 72px;
    padding: 64px;
  }

  .pg-actie[data-variant='banner'] .pg-actie-binnen {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
    padding: 26px 32px;
  }

  .pg-actie[data-variant='banner'] .pg-actie-tekst {
    flex-direction: column;
    gap: 10px;
  }

  /* De knop mag niet meekrimpen met een lange kop ernaast. */
  .pg-actie[data-variant='banner'] .pg-actie-knop {
    flex: 0 0 auto;
  }

  .pg-actietegel-groot b {
    font-size: 130px;
  }
}

/* ── praktische informatie ──────────────────────────────────────────────── */

.pg-praktisch-binnen {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  align-items: stretch;
}

.pg-praktisch-tekst {
  display: flex;
  flex-direction: column;
  gap: 32px;
  min-width: 0;
}

.pg-praktisch-lijst {
  margin: 0;
  border-bottom: 1px solid var(--border);
}

.pg-praktisch-regel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px 24px;
  padding: 20px 0;
  border-top: 1px solid var(--border);
}

.pg-praktisch-label {
  padding-top: 4px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--accent-strong);
}

.pg-praktisch-waarde {
  margin: 0;
  font-size: 18px;
  line-height: 28px;
}

.pg-praktisch-route {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 17px;
  font-weight: 600;
  text-underline-offset: 4px;
}

.pg-praktisch-route:hover {
  color: var(--accent-strong);
}

.pg-praktisch-kaart {
  position: relative;
  min-height: 300px;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--surface);
}

.pg-praktisch-kaart iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (min-width: 1024px) {
  .pg-praktisch-binnen {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 80px;
  }

  .pg-praktisch-regel {
    grid-template-columns: 160px minmax(0, 1fr);
  }

  .pg-praktisch-kaart {
    min-height: 520px;
  }
}

/* ── het aanmeldformulier ───────────────────────────────────────────────── */

.pg-aanmeld-binnen {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

.pg-aanmeld-kop {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  min-width: 0;
}

.pg-aanmeld-inleiding {
  margin: 0;
  max-width: 440px;
}

.pg-aanmeld-punten {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pg-aanmeld-punten li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  line-height: 26px;
}

.pg-aanmeld-punten svg {
  flex: none;
  color: var(--accent-strong);
}

.pg-aanmeld-foto {
  width: 100%;
  height: 240px;
  margin-top: 8px;
}

.pg-aanmeld-vlak {
  padding: 28px 24px;
  border-radius: var(--radius-card);
  background: var(--surface);
  /* Een gridcel krimpt niet onder de breedte van zijn inhoud; zonder dit loopt
     een veld op een telefoon buiten het scherm. Zie de afspraak over
     formulieren in de gedeelde laag. */
  min-width: 0;
}

.pg-aanmeld-formuliertitel {
  display: block;
  margin-bottom: 20px;
  font-family: var(--font-heading);
  font-size: 32px;
  line-height: 38px;
  font-weight: 300;
}

@media (min-width: 1024px) {
  .pg-aanmeld-binnen {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 64px;
  }

  .pg-aanmeld-foto {
    height: 320px;
  }

  .pg-aanmeld-vlak {
    padding: 48px;
  }
}

/* De keuze "met hoeveel personen" staat in het ontwerp als vier knoppen naast
   elkaar in plaats van twee bij twee. Alleen binnen dit formuliervlak, want
   het contactformulier en het proefformulier houden hun eigen indeling —
   daar staan langere keuzes in die naast elkaar niet zouden passen. */
@media (min-width: 560px) {
  .pg-aanmeld-vlak .pg-formulier-keuzes {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .pg-aanmeld-vlak .pg-formulier-keuzes button {
    justify-content: center;
    padding: 0 12px;
  }
}

/* Een akkoordvinkje staat naast zijn tekst en niet erboven. Zonder deze regels
   rekt het vakje op tot de volle breedte van de cel: .pg-formulier-veld is een
   kolom, en een checkbox daarin wordt uitgerekt. Zie Formulier.tsx. */
.pg-formulier-akkoord {
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
}

.pg-formulier-akkoord input[type='checkbox'] {
  flex: none;
  width: 22px;
  height: 22px;
  /* tokens.css zet elk invoerveld op het tikdoel van 44 pixels. Voor een
     vakje van 22 is dat te veel — maar het tikdoel gaat niet verloren: het
     hele label is aanklikbaar, want het vakje staat erbinnen. */
  min-height: 0;
  margin: 1px 0 0;
  /* Het eigen vinkje van de browser houden en alleen de kleur zetten: dat
     scheelt een nagebouwde checkbox en houdt toetsenbord en schermlezer
     precies zoals ze horen te werken. */
  accent-color: var(--accent-strong);
  cursor: pointer;
}

.pg-formulier-akkoordtekst {
  font-size: 15px;
  line-height: 22px;
  color: var(--text-muted-strong);
}