/* ==========================================================================
   Bedrijving — basis stylesheet
   Ontleend aan Figma: Bedrijving - Website / Home (453:787), 1440px artboard.
   Opgezet als losse HTML-pagina, klaar om te splitsen naar een WP-thema.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Kleur — namen volgen de Figma-variabelen */
  --c-zwart:      #000000;
  --c-antraciet:  #232323;
  --c-wit:        #ffffff;
  --c-groen:      #59c8a7;
  --c-zalm:       #fd8871;
  --c-blauw:      #5696c0;
  --c-geel:       #f8cc45;
  --c-grijs:      #b4b4b4;
  --c-paars:      #aa9df2;
  /* Alleen voor de stippen van de carrousels: donkerder dan --c-grijs, die
     voor tekst wordt gebruikt en daar leesbaar moet blijven. */
  --c-stip:       #595959;

  --c-groen-70: rgb(89 200 167 / .7);     /* rust */
  --c-groen-85: rgb(89 200 167 / .85);    /* hover */
  --c-rand-licht: rgb(255 255 255 / .8);
  --c-rand-zacht: rgb(255 255 255 / .6);
  --c-vlak-zacht: rgb(255 255 255 / .2);    /* rust  */
  --c-vlak-hover: rgb(255 255 255 / .3);   /* hover */
  --c-vlak-tik:   rgb(255 255 255 / .4);   /* tik   */

  /* Typografie */
  --ff-sans:  "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ff-serif: "IBM Plex Serif", Georgia, "Times New Roman", serif;
  --ff-mono:  "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-display: clamp(3rem,   6.95vw, 6.25rem);  /* 48 → 100 */
  --fs-hero:    clamp(2.25rem, 4.17vw, 3.75rem); /* 36 → 60  */
  --fs-h2:      clamp(1.875rem, 3.33vw, 3rem);   /* 30 → 48  */
  --fs-lead:    clamp(1.5rem, 2.22vw, 2rem);     /* 24 → 32  */
  --fs-body:    clamp(1.0625rem, 1.39vw, 1.25rem); /* 17 → 20 */
  --fs-serif-m: clamp(1.25rem, 1.67vw, 1.5rem);  /* 20 → 24  */
  --fs-klein:   1rem;
  --fs-mini:    .875rem;

  /* Ritme */
  --gutter: clamp(1.5rem, 4.17vw, 3.75rem);      /* 24 → 60 */
  --maat-inhoud: 1320px;                         /* 1440 − 2×60 */
  --maat-panel:  1248px;                         /* 1440 − 2×96 */
  --maat-tekst:  640px;

  /* Woordmerk en menuknop delen één hartlijn: de knop is 40px hoog, de
     regel van het woordmerk 24px, dus de knop begint 8px hoger. */
  --kop-top: 30px;
  --menu-top: calc(var(--kop-top) - 8px);
  --menu-right: var(--gutter);

  --radius-panel-s: 20px;
  --radius-panel-l: 40px;
  --radius-kaart:   20px;
}

/* --------------------------------------------------------------------------
   2. Reset & basis
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--c-zwart);
  color: var(--c-wit);
  font-family: var(--ff-sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

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

/* Muisaanwijzer: hetzelfde pijltje als de scroll-hint, wat kleiner. In twee
   kleuren, want wit verdwijnt op de lichte panelen. Het tweede regelpaar is
   voor schermen met dubbele pixeldichtheid; browsers die image-set() in
   cursor niet kennen negeren het en houden de eerste regel.

   Dit is de terugval. Draait JS, dan neemt een zwevend pijltje het over dat
   ook meedraait met de richting — zie .aanwijzer hieronder.

   Op de wortel, zodat ook de rand buiten body meedoet; alles daarbinnen
   erft het. */
html {
  cursor: url("../img/cursor-wit.png") 16 16, auto;
  cursor: image-set(url("../img/cursor-wit.png") 1x,
                    url("../img/cursor-wit-2x.png") 2x) 16 16, auto;
}
.panel,
.kaart,
.quote,
.overlay__blad {
  cursor: url("../img/cursor-zwart.png") 16 16, auto;
  cursor: image-set(url("../img/cursor-zwart.png") 1x,
                    url("../img/cursor-zwart-2x.png") 2x) 16 16, auto;
}

/* Waar je iets kunt doen blijft de gewone aanwijzing staan: anders raak je
   kwijt wat klikbaar is. */
a, button, label, summary, [role="button"] { cursor: pointer; }
input[type="text"], input[type="email"], input[type="tel"], textarea { cursor: text; }

/* Draaiend pijltje. Het echte pijltje verdwijnt zodra dit aanstaat, behalve
   op de plekken die hun eigen aanwijzing houden.

   Op de wortel en niet alleen op body: body dekt het venster niet overal —
   denk aan de rand waar Chrome op macOS laat doorveren — en daar kwam de
   systeemcursor onder het zwevende pijltje vandaan. */
.heeft-aanwijzer,
.heeft-aanwijzer body,
.heeft-aanwijzer .panel,
.heeft-aanwijzer .kaart,
.heeft-aanwijzer .quote,
.heeft-aanwijzer .overlay__blad { cursor: none; }

.aanwijzer {
  position: fixed;
  top: 0; left: 0;
  width: 32px; height: 32px;
  margin: -16px 0 0 -16px;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  background-color: var(--c-wit);
  transition: opacity .15s ease, background-color .15s ease;
  will-change: transform;
  -webkit-mask: var(--pijl) center / contain no-repeat;
          mask: var(--pijl) center / contain no-repeat;
}
:root {
  --sliderpijl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --kruis: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 5 19 19M19 5 5 19' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  --pijl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 5.5V26.5M8.5 19.5 16 27l7.5-7.5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.aanwijzer.is-zichtbaar { opacity: 1; }
.aanwijzer.is-donker { background-color: var(--c-zwart); }

h1, h2, h3, p, blockquote, figure, ul { margin: 0; }
ul { list-style: none; padding: 0; }
a { color: inherit; }

/* Twee alineas die eruit springen, allebei een slag groter dan lopende tekst.
   Die maat komt uit --fs-serif-m: op deze site is dat de trap boven een
   gewone alinea, ook al draagt hij serif in zijn naam.
   .tekst-accent zet er serif-cursief bij, .tekst-groot houdt het gewone
   schrift. De eerste staat in het werkwijzepaneel, de tweede onder de
   codexkop. */
.tekst-groot {
  font-size: var(--fs-serif-m);
  line-height: 1.5;
}
.tekst-accent {
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: var(--fs-serif-m);
  line-height: 1.5;
}

/* <em> betekent op deze site: serif-cursief accent. */
em {
  font-family: var(--ff-serif);
  font-style: italic;
}

:focus-visible { outline: 2px solid var(--c-groen); outline-offset: 3px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--c-wit); color: var(--c-zwart);
  padding: .75rem 1.25rem; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

.container {
  width: min(100% - (var(--gutter) * 2), var(--maat-inhoud));
  margin-inline: auto;
}
.container--midden { text-align: center; }

/* --------------------------------------------------------------------------
   3. Typografische bouwstenen
   -------------------------------------------------------------------------- */
.display {
  font-family: var(--ff-serif);
  font-weight: 400;
  font-size: var(--fs-display);
  line-height: 1.1;
  max-width: 590px;
  margin-inline: auto;
  overflow-wrap: anywhere;
}

.h2 {
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: 1.25;
  letter-spacing: -.01em;
}
.h2--antraciet { color: var(--c-antraciet); }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.25;
  color: var(--c-groen);
  max-width: 540px;
  margin-inline: auto;
}

.body-640 { max-width: var(--maat-tekst); margin-inline: auto; text-align: left; }
.body-640 + .body-640 { margin-top: 1.5rem; }
.body-403 { max-width: 403px; }

/* --------------------------------------------------------------------------
   4. Woordmerk — gewichtsverloop van bold naar thin
   -------------------------------------------------------------------------- */
.wordmark {
  font-family: var(--ff-sans);
  font-style: italic;
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: .01em;
  text-decoration: none;
  white-space: nowrap;
}
.wordmark__r {
  font-style: normal;
  font-size: .45em;
  vertical-align: .8em;
  margin-left: .05em;
}

/* Spotlight: het gewicht per letter wordt door JS gezet. De vaste breedte
   komt er ook vandaan, zodat zwaarder worden niets laat verspringen. */
.knoplabel { display: inline-flex; flex: 0 0 auto; white-space: nowrap; }
.knoplabel .wl,
.wordmark--spot .wl {
  display: inline-block;
  text-align: center;
  font-weight: var(--w, inherit);
  transition: font-weight 120ms linear, color 120ms linear;
}

/* --------------------------------------------------------------------------
   5. Knoppen & pillen
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: .5rem 1.25rem;
  border-radius: 100px;
  font-size: var(--fs-klein);
  line-height: 1.3;
  text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease,
              box-shadow .2s ease;
}
.btn--groen  { background: var(--c-groen-70); font-weight: 600; }
.btn--groen:hover  { background: var(--c-groen-85); }
.btn--groen:active { background: var(--c-groen); }
/* De ghost-knop blijft doorzichtig; alleen de haarlijn wordt dikker. Dat
   gaat via een inset-schaduw en niet via border-width, anders verspringt de
   knop een pixel en schuift de hele rij mee. */
.btn--ghost  { border: 1px solid var(--c-rand-licht); }
.btn--ghost:hover  { box-shadow: inset 0 0 0 1px var(--c-rand-licht); }
.btn--ghost:active {
  border-color: var(--c-wit);
  box-shadow: inset 0 0 0 1px var(--c-wit);
}
.btn--groot  { min-height: 61px; padding: .75rem 2.5rem; font-size: 1.25rem; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: .625rem;
  align-items: center;
}
.btn-row--midden { justify-content: center; }

.pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 36px; padding: .375rem 1rem;
  border: 1px solid var(--c-rand-zacht);
  border-radius: 100px;
  font-size: var(--fs-mini);
  text-decoration: none;
}
.pill:hover { background: var(--c-wit); color: var(--c-zwart); }

.rond {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  background: var(--c-vlak-zacht);
  border-radius: 100px;
  /* Zelfde tempo als de knoppen; zonder dit sprong het vlak terwijl het
     icoon erin wel rustig overging. */
  transition: background-color .2s ease;
}
.rond:hover  { background: var(--c-vlak-hover); }
.rond:active { background: var(--c-vlak-tik); }

/* Het icoon is een masker, geen plaatje: zo is de kleur in CSS te zetten. */
.rond__icoon {
  width: 16px;
  background-color: var(--c-wit);
  -webkit-mask-repeat: no-repeat;  mask-repeat: no-repeat;
  -webkit-mask-position: center;   mask-position: center;
  -webkit-mask-size: contain;      mask-size: contain;
}
.rond__icoon--linkedin {
  height: 15.11px;
  -webkit-mask-image: url("../icons/linkedin.svg");
          mask-image: url("../icons/linkedin.svg");
}
.rond__icoon--substack {
  height: 16px;
  -webkit-mask-image: url("../icons/substack.svg");
          mask-image: url("../icons/substack.svg");
}

/* --------------------------------------------------------------------------
   6. Handgeschreven regels (alpha-mask + merkkleur)
   -------------------------------------------------------------------------- */
.script {
  position: relative;
  width: 100%;
  margin-inline: auto;
  -webkit-mask-repeat: no-repeat;  mask-repeat: no-repeat;
  -webkit-mask-position: center;   mask-position: center;
  -webkit-mask-size: contain;      mask-size: contain;
}
.script--zalm  { --kleur: var(--c-zalm);  background-color: var(--kleur); }
.script--groen { --kleur: var(--c-groen); background-color: var(--kleur); }
.script--wit   { --kleur: var(--c-wit);   background-color: var(--kleur); }

/* Opgeknipt in twee helften. Op ruime schermen liggen ze exact terug op
   hun oude plek; op smalle schermen komen ze onder elkaar. De ouder is dan
   alleen nog het kader — de kleur en het masker zitten op de helften. */
.script--delen { background-color: transparent; }
.script__deel {
  position: absolute;
  left: var(--l); top: var(--t);
  width: var(--w); height: var(--h);
  background-color: var(--kleur);
  -webkit-mask-repeat: no-repeat;  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;    mask-size: 100% 100%;
}


.script--erkennen { max-width: 942px; aspect-ratio: 942 / 167;
  transform: rotate(2.22deg); }
.script--erkennen .script__deel:nth-child(1) {
  --l: 0.000%; --t: 50.599%; --w: 46.656%; --h: 49.401%;
  --ar: 879 / 165; --mob: 96.81%;
  -webkit-mask-image: url("../img/hs-erkennen-wat-er-is-1.webp");
          mask-image: url("../img/hs-erkennen-wat-er-is-1.webp");
}
.script--erkennen .script__deel:nth-child(2) {
  --l: 51.805%; --t: 0.000%; --w: 48.195%; --h: 66.766%;
  --ar: 908 / 223; --mob: 100.00%;
  -webkit-mask-image: url("../img/hs-erkennen-wat-er-is-2.webp");
          mask-image: url("../img/hs-erkennen-wat-er-is-2.webp");
}


.script--kansen { max-width: 870px; aspect-ratio: 870 / 112; }
.script--kansen .script__deel:nth-child(1) {
  --l: 0.057%; --t: 14.667%; --w: 45.057%; --h: 85.333%;
  --ar: 784 / 192; --mob: 83.05%;
  -webkit-mask-image: url("../img/hs-kansen-waarmaken-1.webp");
          mask-image: url("../img/hs-kansen-waarmaken-1.webp");
}
.script--kansen .script__deel:nth-child(2) {
  --l: 45.747%; --t: 0.000%; --w: 54.253%; --h: 82.667%;
  --ar: 944 / 186; --mob: 100.00%;
  -webkit-mask-image: url("../img/hs-kansen-waarmaken-2.webp");
          mask-image: url("../img/hs-kansen-waarmaken-2.webp");
}

.script--doehetmaareens { max-width: 816px; aspect-ratio: 816 / 80; }
.script--doehetmaareens .script__deel:nth-child(1) {
  --l: 0.000%; --t: 1.242%; --w: 44.608%; --h: 98.758%;
  --ar: 728 / 159; --mob: 83.58%;
  -webkit-mask-image: url("../img/hs-doe-het-maar-eens-1.webp");
          mask-image: url("../img/hs-doe-het-maar-eens-1.webp");
}
.script--doehetmaareens .script__deel:nth-child(2) {
  --l: 46.630%; --t: 0.000%; --w: 53.370%; --h: 98.758%;
  --ar: 871 / 159; --mob: 100.00%;
  -webkit-mask-image: url("../img/hs-doe-het-maar-eens-2.webp");
          mask-image: url("../img/hs-doe-het-maar-eens-2.webp");
}

.script--komin {
  max-width: 916px; aspect-ratio: 916 / 173;
  -webkit-mask-image: url("../img/hs-kom-in-bedrijving.webp");
          mask-image: url("../img/hs-kom-in-bedrijving.webp");
}
/* Geen margin-inline: 0 hier: .script centreert zelf al, en dat is precies
   wat de illustratie in de kaart moet doen. */
.script--pijlen {
  max-width: 200px; aspect-ratio: 200 / 135;
  -webkit-mask-image: var(--kaart-pijlen, url("../img/pijlen-bestuur.webp"));
          mask-image: var(--kaart-pijlen, url("../img/pijlen-bestuur.webp"));
}

/* --------------------------------------------------------------------------
   8. Header
   -------------------------------------------------------------------------- */
.site-header {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: var(--kop-top) var(--gutter) 0;
}
.site-header .wordmark { color: var(--c-wit); }

.menu-toggle {
  position: fixed;
  top: var(--menu-top);
  right: var(--menu-right);
  z-index: 60;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  padding: 0;
  background: var(--c-groen-70);
  border: 0; border-radius: 50%;
  cursor: pointer;
  transition: background-color .2s ease;
}
.menu-toggle:hover  { background: var(--c-groen-85); }
.menu-toggle:active { background: var(--c-groen); }
.menu-toggle__bars,
.menu-toggle__bars::before,
.menu-toggle__bars::after {
  display: block;
  width: 16px; height: 2px;
  background: var(--c-wit);
  border-radius: 2px;
}
.menu-toggle__bars { position: relative; transition: background-color .2s ease; }
.menu-toggle__bars::before,
.menu-toggle__bars::after {
  content: "";
  /* left en right op 0 met marge auto: zo blijven ze gecentreerd als ze
     korter worden, en blijft transform vrij voor het kruis. */
  position: absolute; left: 0; right: 0; margin-inline: auto;
  transition: transform .25s ease, top .25s ease, width .2s ease;
}

/* Bij aanwijzen trekken de buitenste twee streepjes zich iets terug. Alleen
   in gesloten stand — open is het een kruis en heeft inkorten geen zin. */
.menu-toggle:not([aria-expanded="true"]):hover .menu-toggle__bars::before,
.menu-toggle:not([aria-expanded="true"]):hover .menu-toggle__bars::after {
  width: 11px;
}
.menu-toggle__bars::before { top: -5px; }
.menu-toggle__bars::after  { top:  5px; }

/* Open: de drie strepen worden een kruis */
.menu-toggle[aria-expanded="true"] .menu-toggle__bars { background: transparent; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::before { top: 0; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::after  { top: 0; transform: rotate(-45deg); }

.site-nav {
  position: fixed;
  top: calc(var(--menu-top) + 46px);
  right: var(--menu-right);
  z-index: 59;
}
.site-nav[hidden] { display: none; }
.site-nav ul { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }

/* Bij openen komen de items een voor een binnen, van boven naar beneden.
   Bij sluiten gaan ze tegelijk weg: aflopen in omgekeerde volgorde voelt
   traag als je het menu alleen maar kwijt wilt. */
.site-nav li {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity .28s ease, transform .28s ease;
}
.site-nav.is-open li { opacity: 1; transform: none; }
.site-nav.is-open li:nth-child(2) { transition-delay: 70ms; }
.site-nav.is-open li:nth-child(3) { transition-delay: 140ms; }
.site-nav.is-open li:nth-child(4) { transition-delay: 210ms; }
.site-nav.is-open li:nth-child(5) { transition-delay: 280ms; }
/* Breedtes komen uit het ontwerp: de pillen staan bewust ongelijk. */
.pil {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 40px;
  padding-inline: 20px;
  border-radius: 100px;
  font-size: var(--fs-klein);
  line-height: 1;
  text-align: right;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease;
}
.pil--groen { background: var(--c-groen-70); font-weight: 600; }
.pil--groen:hover  { background: var(--c-groen-85); }
.pil--groen:active { background: var(--c-groen); }
/* Home stond niet in het ontwerp en heeft dus geen eigen maat; die pil valt
   om zijn tekst. De andere twee houden hun breedte uit het ontwerp. */
/* Geen vaste breedtes meer per positie. Die hingen aan de volgorde van de
   items, dus een omgewisseld menu gaf meteen een pil die niet meer om zijn
   tekst paste. Ze waren bovendien gemeten voordat de spotlight de letters op
   hun vette breedte vastzet, en kwamen daarmee acht pixels tekort zodra je
   een pil aanwees. De pillen voegen zich nu naar hun eigen label; JS meet dat
   op zodra het menu opengaat, dus verspringen doet er niets. */

/* --------------------------------------------------------------------------
   9. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: min(100vh, 999px);
  min-height: min(100svh, 999px);
  padding: 8.75rem var(--gutter) 6.5rem;
  text-align: center;
  background: var(--c-zwart);
  /* Het beeld groeit tijdens het scrollen buiten zijn kader; clip houdt dat
     binnen. Geen hidden: dat zou de verticale kant op auto zetten. */
  overflow: clip;
}
/* Het beeld ligt in een eigen laag, zodat het kan schalen zonder de tekst mee
   te nemen. Een transform is daarbij een stuk goedkoper dan background-size
   animeren: dat laatste hertekent het beeld elke frame opnieuw. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../img/hero.webp") center / cover no-repeat;
  transform: scale(var(--hero-zoom, 1));
  will-change: transform;
}
/* Boven het beeld: .hero::before is gepositioneerd en zou anders over de
   tekst heen vallen. */
.hero__inner { position: relative; max-width: 640px; margin-inline: auto; }

.hero__title {
  font-weight: 400;
  font-size: var(--fs-hero);
  line-height: 1.2;
  text-wrap: balance;
}
.hero__payoff {
  margin-top: 1.75rem;
  font-size: 1.5rem;
  line-height: 1.35;
}

/* De knoppen staan los van de payoff erboven. */
.hero .btn-row { margin-top: clamp(1.3rem, 3.1vw, 44px); justify-content: center; }

/* Een licht paneel schuift over het blok erboven heen. Dat blok blijft
   staan binnen de overschuiver en laat los zodra het paneel voorbij is.
   Op de home is dat de hero onder het eerste paneel, op de agenda het
   overzicht onder het inschrijfformulier.

   --onder-top is 0 zolang het blok in het venster past, en anders precies
   het verschil, negatief. Zo mag het eerst dat stukje omhoog schuiven tot
   het helemaal in beeld staat en blijft het dan pas hangen. Met een vaste 0
   zou op een smal scherm de onderkant nooit te zien zijn. JS zet de waarde;
   zonder JS scrollt alles gewoon mee. */
.overschuif { position: relative; }
.overschuif.is-vast > .overschuif__onder {
  position: sticky;
  top: var(--onder-top, 0px);
}
.overschuif > .panel { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   10. Lichte panelen
   -------------------------------------------------------------------------- */
.panel {
  position: relative;
  background: var(--c-wit);
  color: var(--c-zwart);
  border-radius: var(--radius-panel-s);
}
.panel--rond-40 { border-radius: var(--radius-panel-l); }

.panel__inner {
  width: min(100% - (var(--gutter) * 2), var(--maat-panel));
  margin-inline: auto;
  padding-block: clamp(4rem, 10.7vw, 9.625rem) clamp(3rem, 5.5vw, 4.9375rem);
}

.split {
  display: grid;
  grid-template-columns: 529fr 531fr;
  gap: clamp(2rem, 10.3vw, 148px);
}
.split__body p + p { margin-top: 2rem; }

.panel .script--erkennen { margin-top: clamp(3rem, 6.4vw, 92px); }

/* Over ons */
.over {
  display: grid;
  grid-template-columns: 541fr 537fr;
  gap: clamp(2rem, 12.2vw, 176px);
  align-items: start;
}
.over__tekst { color: var(--c-antraciet); }
.over__tekst .h2 { margin-bottom: 2.25rem; }
.over__tekst p + p { margin-top: 2rem; }
.over__beeld {
  position: sticky;
  top: clamp(1.5rem, 4.2vw, 60px);
  aspect-ratio: 537 / 648;
  border-radius: var(--radius-kaart);
  overflow: hidden;
}
.over__beeld img {
  position: absolute;
  top: -121.7%; left: -58.12%;
  width: 179.14%; height: auto;
  max-width: none;
}

/* --------------------------------------------------------------------------
   11. Donkere blokken
   -------------------------------------------------------------------------- */
/* Let op bij het bijstellen van deze marges: de twee gepinde secties
   (kaartenwiel en reviewrail) centreren hun inhoud in een venster van
   100svh. De ruimte die daarbij boven en onder overblijft telt op bij de
   marge van de buursectie. Die speling is hieronder al afgetrokken. */
.blok { position: relative; }

.blok--codex   { padding-block: clamp(5rem, 14.6vw, 210px) 0; }
.blok--codex .lead      { margin-top: 1.25rem; }
.blok--codex .codex-tekst { margin-top: 2.5rem; }

/* Eén alinea in één kolom. De twee kolommen die hier stonden hoorden bij de
   vier alinea's van hiervoor; met één alinea knipt dat de zin doormidden. */
.codex-tekst {
  max-width: var(--maat-tekst);
  margin-inline: auto;
  text-align: left;
}
.codex-tekst p + p { margin-top: 1.5rem; }

/* De codexreeks: de vijf bewegingen naast elkaar, namen om en om boven en
   onder de pijlen. Eén raster voor de hele rij, zodat de pijlvakken van alle
   vijf op dezelfde hoogte staan; per item alleen de kolom vastzetten. */
.codexreeks {
  /* Vaste, gelijke kolommen ter breedte van één pijlvak. Met auto-kolommen
     rekt een lange naam als "Exploratie" zijn eigen kolom op en staan de
     pijlvakken niet meer op gelijke afstand. De namen mogen daarom buiten
     hun kolom vallen; hun buren staan op de andere regel. */
  --pijlmaat: clamp(1rem, 1.53vw, 1.375rem);
  --vak: calc(var(--pijlmaat) * 3.65);

  display: grid;
  grid-template-columns: repeat(5, var(--vak));
  grid-template-rows: auto auto auto;
  justify-content: center;
  align-items: center;
  column-gap: clamp(1rem, 3vw, 44px);
  row-gap: .5rem;
  margin-top: clamp(2rem, 4.9vw, 70px);
  list-style: none;
  padding: 0;
}
.codexreeks__item { display: contents; }
.codexreeks__item:nth-child(1) > * { grid-column: 1; }
.codexreeks__item:nth-child(2) > * { grid-column: 2; }
.codexreeks__item:nth-child(3) > * { grid-column: 3; }
.codexreeks__item:nth-child(4) > * { grid-column: 4; }
.codexreeks__item:nth-child(5) > * { grid-column: 5; }

.codexreeks__naam {
  grid-row: 1;
  width: var(--vak);
  white-space: nowrap;
  font-family: var(--ff-mono);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(.875rem, 1.11vw, 1rem);
  line-height: 1.2;
  text-align: center;
}
/* Om en om: de tweede en vierde naam staan onder hun pijlen. */
.codexreeks__item:nth-child(even) .codexreeks__naam { grid-row: 3; }

.codexreeks__pijlen {
  grid-row: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: clamp(1.5rem, 1.9vw, 1.75rem);
  place-items: center;
  width: 3.65em;
  font-family: var(--ff-mono);
  font-weight: 300;
  font-size: var(--pijlmaat);
  line-height: 1;
}
/* Vaste cel: het teken mag wisselen zonder dat het raster verspringt. */
.pijl { display: block; }

/* Geen padding: het wiel laat boven en onder zelf al ruimte over doordat de
   gepinde laag zijn inhoud centreert. De 257px die hier stond hoorde bij
   "kansen waarmaken", en dat kopje staat nu boven de reviews. */
/* Ruimte vóór deze sectie; het wiel is niet meer gepind en laat dus zelf
   niets meer over. Op mobiel staat hier het pijltje met zijn eigen marges,
   daar zou dit er bovenop komen. */
.blok--betekenis { padding-block: clamp(3rem, 13.2vw, 190px) 0; }
.blok--betekenis .btn-row  { margin-top: clamp(1.25rem, 1.9vw, 28px); }
/* Zonder JS is deze laag onzichtbaar voor de opmaak. */
.kaarten-viewport { display: contents; }

/* Kaarten-carrousel */
.kaarten {
  display: flex;
  gap: 38px;
  margin-top: clamp(2.5rem, 6.7vw, 96px);
  padding-inline: clamp(var(--gutter), 15vw, 216px) var(--gutter);
  padding-block: 24px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-inline-start: clamp(var(--gutter), 15vw, 216px);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.kaarten::-webkit-scrollbar { display: none; }

.kaart {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  width: 304px;
  min-height: 407px;
  padding: 28px;
  border-radius: var(--radius-kaart);
  color: var(--c-zwart);
  scroll-snap-align: start;
}
/* Elke kaart zijn eigen kleur en eigen pijlenillustratie. Welke tekening bij
   welke kaart hoort volgt uit het ontwerp, waar ze elk in de kleur van hun
   kaart staan. Beide erven omlaag: de kleur naar .kaart__beeld, de tekening
   naar .script--pijlen, dat hem als masker gebruikt.
   Het wiel wast de achtergrond met JS naar wit zodra de kaart in het midden
   staat, maar laat --kaart-kleur staan. De pijlen houden daardoor de volle
   kleur en komen juist op dat moment op wit te liggen. */
.kaart { background: var(--kaart-kleur, var(--c-groen)); }
/* Welke tekening bij welke kaart hoort is los van de kaartkleur aangeleverd:
   in het ontwerp staat elke tekening in een eigen kleur, en die kleur duidt de
   tekening aan, niet de kaart. Geel is parallel, paars bundelt samen, blauw
   waaiert uit. */
.kaart:nth-child(1) { --kaart-kleur: var(--c-groen); --kaart-pijlen: url("../img/pijlen-parallel.webp"); }
.kaart:nth-child(2) { --kaart-kleur: var(--c-paars); --kaart-pijlen: url("../img/pijlen-bundel.webp"); }
.kaart:nth-child(3) { --kaart-kleur: var(--c-zalm);  --kaart-pijlen: url("../img/pijlen-waaier.webp"); }
.kaart:nth-child(4) { --kaart-kleur: var(--c-geel);  --kaart-pijlen: url("../img/pijlen-bundel.webp"); }
.kaart:nth-child(5) { --kaart-kleur: var(--c-blauw); --kaart-pijlen: url("../img/pijlen-waaier.webp"); }
.kaart:nth-child(6) { --kaart-kleur: var(--c-groen); --kaart-pijlen: url("../img/pijlen-bundel.webp"); }

.kaart:nth-child(1) { transform: rotate(-2.94deg); }
.kaart:nth-child(3) { transform: rotate(2.81deg); }
.kaart:nth-child(4) { transform: rotate(7.86deg); }
.kaart:nth-child(5) { transform: rotate(-1.9deg); }
.kaart:nth-child(6) { transform: rotate(4.2deg); }

/* Wiel: de rij wordt een boog die meedraait met de scroll.
   Alleen actief met JS; zonder JS blijft de rij hierboven staan. */
/* Geen gepinde sectie meer: het wiel wordt met de knoppen, de stippen of
   een veeg bediend. De baan is zo hoog als een kaart; de boog mag eruit
   steken. */
/* De kaarten liggen absoluut op een boog en steken links en rechts ver buiten
   het scherm — op een smal scherm tot ruim 1700px, goed voor een horizontale
   schuifbalk over de hele pagina. Klemmen moest hier gebeuren; het stond op
   .kaarten-viewport, maar die laag draait op display: contents en maakt dus
   geen box, waardoor haar overflow nergens op sloeg.
   Alleen de zijkanten: onderlangs steekt de boog een paar honderd pixels uit
   en dat hoort zichtbaar te blijven. Vandaar clip en niet hidden — hidden zou
   de verticale kant op auto zetten en de boog afsnijden. */
.kaarten-wrap.is-wiel { position: relative; overflow-x: clip; }
.kaarten-wrap.is-wiel .kaarten {
  position: relative;
  display: block;
  height: 407px;
  margin-top: clamp(2.5rem, 5.1vw, 74px);
  padding: 0;
  overflow: visible;
  scroll-snap-type: none;
  touch-action: pan-y;
}
.kaarten-wrap.is-wiel .kaart {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: 50% 50%;
  will-change: transform;
  transition: background-color .2s linear;
}

/* Kaartindeling: label bovenaan, tekst onderaan, illustratie gecentreerd in
   wat ertussen overblijft. Dat laatste doen de twee auto-marges op
   .kaart__beeld: die verdelen de vrije ruimte gelijk over boven en onder.
   De 1.25rem hier en op .kaart__tekst is de ondergrens, zodat de illustratie
   ook op de volste kaart niet tegen de tekst aan komt. */
.kaart__label {
  margin-bottom: 1.25rem;
  font-family: var(--ff-mono);
  font-style: italic;
  font-size: var(--fs-klein);
  line-height: 1.25;
}
.kaart__tekst {
  margin-top: 1.25rem;
  font-family: var(--ff-serif);
  font-size: 1.25rem;
  line-height: 1.6;
}
/* De pijlen horen alleen bij de kaart in het midden. Dat liep eerst via de
   kleur — groen op groen valt weg — maar met zes eigen kaartkleuren gaat dat
   niet meer op, dus regelt het wiel het nu met doorzichtigheid. */
.kaart__beeld {
  margin-block: auto;
  background-color: var(--kaart-kleur, var(--c-groen));
  opacity: var(--beeld-zicht, 1);
}

/* --------------------------------------------------------------------------
   12. Quotes
   -------------------------------------------------------------------------- */
/* Maten uit het ontwerp: 285px boven het kopje, 247px eronder. Zonder die
   onderruimte plakt het handschrift tegen het witte paneel. */
.blok--kansen { padding-block: clamp(3rem, 19.8vw, 285px) clamp(3rem, 17.2vw, 247px); }

/* Kop met opsomming tussen het kaartenwiel en het handschrift. De kop is 24px
   uit het ontwerp; daar komt --fs-serif-m precies op uit, en op smalle
   schermen zakt hij mee naar 20. De bolletjes staan buiten de regel, zodat een
   omgeslagen regel onder de tekst uitlijnt en niet onder het bolletje. */
.betekenis-lijst {
  max-width: var(--maat-tekst);
  margin-inline: auto;
}
.betekenis-lijst__kop {
  font-weight: 400;
  font-size: var(--fs-serif-m);
  line-height: 1.3;
}
.betekenis-lijst__items {
  margin-top: clamp(1.25rem, 2.2vw, 2rem);
  display: grid;
  gap: .5rem;
}
.betekenis-lijst__items li {
  position: relative;
  padding-left: 1.5rem;
}
.betekenis-lijst__items li::before {
  content: "\2022";
  position: absolute;
  left: .25rem;
  line-height: inherit;
}
/* Lucht tussen de opsomming en het handschrift eronder. */
.blok--kansen .script { margin-top: clamp(2.5rem, 5.6vw, 80px); }

.blok--quotes { padding-block: clamp(3rem, 8.3vw, 120px) 0; }
/* De gepinde reviewlaag centreert zelf al ruim, dus onder het kopje hoeft
   er weinig bij. */
.blok--quotes .quotes-wrap { margin-top: clamp(1.5rem, 3vw, 44px); }

.quotes {
  display: flex;
  gap: 39px;
  margin-top: clamp(2.5rem, 5.7vw, 82px);
  padding-inline: clamp(var(--gutter), 19.9vw, 287px) var(--gutter);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-inline-start: clamp(var(--gutter), 19.9vw, 287px);
  scrollbar-width: none;
}
.quotes::-webkit-scrollbar { display: none; }

/* Tijdens het vegen niets selecteren; daarbuiten blijft de tekst gewoon
   te pakken. */
.is-veegt, .is-veegt * { user-select: none; }

.quote {
  position: relative;
  flex: 0 0 auto;
  /* Twee rijen: de tekst neemt de ruimte die er is, de bron zakt naar de
     onderrand. Alle kaarten zijn even hoog, dus foto en naam beginnen overal
     op dezelfde hoogte — met een gecentreerde kolom verschoof dat per kaart
     met de lengte van de quote mee. */
  display: grid;
  grid-template-rows: 1fr auto;
  width: min(867px, 85vw);
  min-height: 465px;
  padding: 60px;
  border-radius: var(--radius-kaart);
  color: var(--c-zwart);
  overflow: hidden;
  scroll-snap-align: start;
}
.quote {
  --rust: var(--c-zalm);      /* kleur in ruststand; per kaart te wisselen */
  background: var(--rust);
  transition: background-color .3s ease;
}
.quote--geel { --rust: var(--c-geel); }
.quote.is-actief { background: var(--c-wit); }

.quote__deco {
  position: absolute;
  /* Midden in de kaart, horizontaal en verticaal. */
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  /* Hoogte uit de verhouding van het bestand: de illustraties verschillen. */
  width: 644px; height: auto;
  max-width: none;
  pointer-events: none;
  transition: opacity .3s ease;
}
.quote.is-actief .quote__deco { opacity: 0; }

/* Rail: horizontaal verschuiven op verticale scroll.
   Alleen actief met JS; zonder JS blijft het een gewone scroller. */
/* Geen gepinde sectie meer: de rail wordt met de knoppen, de stippen of een
   veeg bediend. De laag knipt af, het spoor schuift erbinnen. */
.quotes-wrap.is-rail { position: relative; }
/* touch-action hoort op het element dat de veeg opvangt: dat is deze laag,
   niet de rail erin. Bij de andere twee carrousels staat het al zo. */
.quotes-wrap.is-rail .quotes-viewport { overflow: hidden; touch-action: pan-y; }
.quotes-wrap.is-rail .quotes {
  overflow: visible;
  scroll-snap-type: none;
  will-change: transform;
  touch-action: pan-y;
}

.quote__tekst {
  position: relative;
  align-self: center;
  font-family: var(--ff-serif);
  font-size: var(--fs-serif-m);
  line-height: 1.5;
  max-width: 580px;
}

.quote__bron {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-top: 3rem;
}
.quote__bron img {
  width: 88px; height: 90px;
  object-fit: cover;
  border-radius: 400px;
  flex: 0 0 auto;
}
.quote__naam { display: block; font-weight: 700; font-size: 1.25rem; line-height: 1.3; }
.quote__rol  { display: block; font-family: var(--ff-mono); font-size: var(--fs-klein); line-height: 1.75; }

/* --------------------------------------------------------------------------
   13. Ontmoetingen
   -------------------------------------------------------------------------- */
.blok--ontmoetingen { padding-block: clamp(2.5rem, 11.88vw, 171px) 0; }   /* 315 ontwerp min ~144 speling */

.ontmoetingen {
  display: grid;
  grid-template-columns: 640fr 564fr;
  gap: clamp(2rem, 4.1vw, 59px);
  align-items: center;
}
.ontmoetingen__tekst .body-403 { margin-top: 1.75rem; }
.ontmoetingen__tekst .body-403 + .body-403 { margin-top: 1.25rem; }
.meer-weten {
  margin-top: 2.25rem;
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.3;
}
.ontmoetingen__tekst .btn-row { margin-top: 1.25rem; }
.ontmoetingen__beeld {
  position: relative;
  aspect-ratio: 564 / 465;
  border-radius: var(--radius-kaart);
  overflow: hidden;
}
.ontmoetingen__beeld img {
  position: absolute;
  top: -67.65%; left: -.02%;
  width: 100.05%; height: auto;
  max-width: none;
}

/* --------------------------------------------------------------------------
   14. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  /* De foto is een staander van 2400x3598: 149.92% van zijn breedte hoog.
     Hij vult de voet in de breedte, en staat een stuk omhoog geschoven zodat
     Sharon naast de quote komt en Jos naast de uitnodiging. Door de foto aan
     de breedte te hangen in plaats van aan de voethoogte staan de gezichten
     altijd op dezelfde plek — anders verschuiven ze zodra de inhoud groeit,
     en dat is precies wat de tekst over hun gezicht duwt. */
  --foto-h: 149.92vw;
  --foto-y: calc(var(--foto-h) * -.1388);

  /* Waar Jos zijn kin uitkomt, gemeten in de foto zelf. */
  --jos-kin: calc(var(--foto-h) * .64 + var(--foto-y));

  position: relative;
  margin-top: clamp(3rem, 6vw, 86px);
  background-color: var(--c-zwart);
  /* Drie lagen. Bovenaan lost het zwart van de sectie erboven op, zodat de
     foto zonder harde rand begint. De tweede zakt met de foto mee terug naar
     zwart — mee, niet met de voethoogte, anders valt de onderrand van de foto
     als een streep in beeld zodra de voet hoger wordt dan de foto. */
  background-image:
    linear-gradient(to bottom,
      var(--c-zwart) 0%,
      rgb(0 0 0 / .7) 22%,
      transparent 100%),
    linear-gradient(to bottom,
      transparent 62%,
      rgb(0 0 0 / .55) 74%,
      rgb(0 0 0 / .9) 84%,
      var(--c-zwart) 92%),
    url("../img/footer.webp");
  background-position: center top, center var(--foto-y), center var(--foto-y);
  /* De foto krijgt alleen een hoogte; de breedte volgt uit zijn eigen
     verhouding. Met 100% eronder rekt hij mee zodra --foto-h iets anders
     is dan de voetbreedte maal 1.4992 — en op smalle schermen is dat zo. */
  background-size: 100% 30vw, 100% var(--foto-h), auto var(--foto-h);
  background-repeat: no-repeat;
}
.site-footer__inner {
  width: min(100% - (var(--gutter) * 2), var(--maat-inhoud));
  margin-inline: auto;
  padding-block: 0 2.5rem;
}

/* Dit blok reikt tot onder Jos zijn kin. Zo begint alles daaronder vrij van
   zijn gezicht, ongeacht hoe hoog de quote uitvalt of waar de padding
   dichtklapt. */
.footer-boven {
  min-height: calc(var(--jos-kin) + 1.25rem);
  padding-top: clamp(5rem, 27vw, 390px);
}

.footer-quote {
  /* Rechts van Sharon blijven: haar rechterrand ligt op 53.5% van de breedte,
     dus onder ongeveer 1190px moet de quote smaller worden dan 504px. */
  max-width: min(504px, calc(46.5vw - var(--gutter) - 1rem));
  margin-left: auto;
  text-align: right;
  font-size: var(--fs-h2);
  line-height: 1.25;
}

.footer-cta { margin-top: clamp(2rem, 4.2vw, 60px); }
.footer-cta .btn-row { margin-top: clamp(1.5rem, 1.5vw, 22px); }

/* Maten uit het ontwerp, gemeten op 1440: het woordmerk is daar 65px hoog en
   staat 88px onder het blok erboven. Bij regelhoogte .95 hoort daar 68px
   letterhoogte bij. Op smalle schermen bleef het altijd al op 64px hangen, dus
   die ondergrens verandert niet — alleen de bovenkant zakt van 240px naar 68px.
   JS meet de letterbreedtes na het laden opnieuw, dus die volgen mee. */
.footer-merk {
  display: block;
  margin-top: clamp(2.5rem, 6.11vw, 88px);
  color: var(--c-wit);
  font-size: clamp(4rem, 4.72vw, 68px);
  line-height: .95;
  letter-spacing: -.01em;
  white-space: nowrap;
}

.footer-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  /* Tweemaal gehalveerd, van 60 via 30 naar 15px: het woordmerk hoort dicht
     op deze regel te staan. */
  margin-top: clamp(.5rem, 1.05vw, 15px);
}
.footer-bar__meta { font-size: var(--fs-mini); }
.footer-bar__meta a { text-decoration: underline; text-underline-offset: 2px; }
.footer-bar__links { display: flex; align-items: center; gap: .625rem; }

/* --------------------------------------------------------------------------
   16. Agendapagina
   -------------------------------------------------------------------------- */

/* De 60px onderaan zijn geen ontwerpmaat maar speling: het paneel schuift bij
   het scrollen over deze lijst heen, en zonder die extra ruimte komt het te
   snel omhoog. Als calc erbij, zodat de vloeiende maat eronder herkenbaar
   blijft. */
.blok--keuze { padding-block: clamp(6.5rem, 10.4vw, 150px) calc(clamp(4rem, 8.3vw, 120px) + 60px); }

.rubriek {
  color: var(--c-groen);
  font-size: var(--fs-klein);
  line-height: 1.5;
}
.pagina-titel {
  margin-top: .5rem;
  margin-inline: auto;
  max-width: 480px;
  font-family: var(--ff-serif);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: 1.25;
}
.pagina-lead {
  margin-top: 1.75rem;
  margin-inline: auto;
  max-width: 44ch;
  font-size: var(--fs-klein);
  color: var(--c-grijs);
}

/* Keuzelijst -------------------------------------------------------------- */
.evenementen {
  display: grid;
  gap: 10px;
  max-width: var(--maat-tekst);
  margin: clamp(2rem, 3.3vw, 48px) auto 0;
  text-align: left;
}

.evenement {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.125rem 1.5rem;
  background: var(--c-antraciet);
  border-radius: 12px;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.evenement:hover { background: #2f2f2f; }

/* Het echte vakje blijft bedienbaar maar onzichtbaar; het vierkantje
   ernaast is de zichtbare weergave. */
.evenement input {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap;
}

.evenement__inhoud { flex: 1 1 auto; }
.evenement__titel {
  display: block;
  font-family: var(--ff-serif);
  font-size: 1.25rem;
  line-height: 1.3;
}
.evenement__wanneer {
  display: block;
  margin-top: .25rem;
  font-size: var(--fs-mini);
  line-height: 1.5;
  color: var(--c-grijs);
}

.evenement__vink {
  flex: 0 0 auto;
  width: 20px; height: 20px;
  border: 1px solid var(--c-rand-zacht);
  border-radius: 3px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px;
}

/* Gekozen: het groene vlak neemt de rij over. */
.evenement:has(input:checked) {
  background: var(--c-groen);
  color: var(--c-zwart);
}
.evenement:has(input:checked) .evenement__wanneer { color: rgb(0 0 0 / .65); }
.evenement:has(input:checked) .evenement__vink {
  background-color: var(--c-zwart);
  border-color: var(--c-zwart);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1 6.2 4.4 9.6 11 3' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.evenement:has(input:focus-visible) { outline: 2px solid var(--c-groen); outline-offset: 3px; }

/* Er moet minstens één bijeenkomst gekozen zijn. */
.evenementen.is-fout .evenement { box-shadow: inset 0 0 0 1px var(--c-zalm); }
.keuze-fout {
  max-width: var(--maat-tekst);
  margin: .75rem auto 0;
  text-align: left;
  font-size: var(--fs-mini);
  color: var(--c-zalm);
}

/* Inschrijfformulier ------------------------------------------------------ */
.panel__inner--smal {
  width: min(100% - (var(--gutter) * 2), var(--maat-tekst));
  padding-block: clamp(3.5rem, 6.9vw, 100px) clamp(3.5rem, 6.9vw, 100px);
  text-align: center;
}

.formulier-titel {
  font-family: var(--ff-serif);
  font-weight: 400;
  font-size: clamp(1.75rem, 2.78vw, 2.5rem);
  line-height: 1.2;
  color: var(--c-zwart);
}
.formulier-lead {
  margin-top: 1rem;
  font-size: var(--fs-klein);
  color: var(--c-antraciet);
}

.formulier {
  margin-top: clamp(2rem, 3.3vw, 48px);
  text-align: left;
  color: var(--c-antraciet);
}
.veld-rij {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.veld { margin-top: 1rem; }
.veld-rij .veld { margin-top: 0; }
.veld label {
  display: block;
  margin-bottom: .375rem;
  font-size: var(--fs-mini);
  font-weight: 600;
  line-height: 1.4;
}
.veld input,
.veld textarea {
  width: 100%;
  height: 56px;
  padding-inline: .9375rem;
  font: inherit;
  font-size: var(--fs-klein);
  color: var(--c-antraciet);
  background: var(--c-wit);
  border: 1px solid #d0d0d0;
  border-radius: 0;   /* haaks, tegenover de volledig ronde knop */
  transition: border-color .15s ease;
}
.veld textarea {
  height: auto;
  min-height: 152px;
  padding-block: .9375rem;
  line-height: 1.5;
  resize: vertical;
}
.veld input::placeholder,
.veld textarea::placeholder { color: #9a9a9a; }

/* Actief of ingevuld: zwarte rand. */
.veld input:focus-visible,
.veld input:not(:placeholder-shown),
.veld textarea:focus-visible,
.veld textarea:not(:placeholder-shown) {
  border: 2px solid var(--c-zwart);
  outline: none;
  padding-inline: calc(.9375rem - 1px);
}

/* Foutmelding pas tonen als er echt iets is ingevuld en verlaten. */
.veld__fout {
  display: none;
  margin-top: .375rem;
  font-size: var(--fs-mini);
  color: var(--c-zalm);
}

/* Fout gaat voor op actief: anders krijg je een zwarte rand bij een veld
   dat juist om aandacht vraagt. */
.veld input:user-invalid,
.veld input:user-invalid:focus-visible,
.veld input:user-invalid:not(:placeholder-shown),
.veld textarea:user-invalid,
.veld textarea:user-invalid:focus-visible,
.veld textarea:user-invalid:not(:placeholder-shown) {
  border: 2px solid var(--c-zalm);
  color: var(--c-zalm);
  padding-inline: calc(.9375rem - 1px);
}
.veld input:user-invalid::placeholder,
.veld textarea:user-invalid::placeholder { color: var(--c-zalm); }
.veld input:user-invalid ~ .veld__fout,
.veld textarea:user-invalid ~ .veld__fout { display: block; }

.akkoord {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  margin-top: 1.75rem;
  font-size: var(--fs-klein);
  line-height: 1.4;
}
.akkoord input {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  margin: 0;
  accent-color: var(--c-zwart);
}
.akkoord a { text-decoration: underline; text-underline-offset: 2px; }

.formulier .btn-row { margin-top: 2rem; }
.btn--donker {
  min-height: 60px;
  padding-inline: 2.25rem;
  background: var(--c-antraciet);
  color: var(--c-wit);
  font-weight: 600;
  font-size: var(--fs-body);
  border: 0;
  cursor: pointer;
}
.btn--donker:hover  { background: var(--c-zwart); }

/* --------------------------------------------------------------------------
   15. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  /* Ook hier alle vijf naast elkaar met de namen om en om. Ze passen alleen
     als de tekens kleiner worden en de kolommen dichter op elkaar staan; de
     namen mogen daarbij buiten hun eigen kolom vallen, want de buren staan
     op de andere regel. */
  .codexreeks {
    /* Beide maten schalen mee met het scherm. Met een vaste 8px stonden de
       vijf op een gewone telefoon tegen elkaar aan terwijl er 40px over was,
       en liepen ze op een smalle telefoon juist over de rand.
       De tekens groeien mee tot 375px en blijven daarboven staan; de ruimte
       ertussen loopt door tot 28px, zodat een brede telefoon de winst pakt. */
    --pijlmaat: clamp(.75rem, 3.73vw, .875rem);
    column-gap: clamp(8px, 7.5vw - 13px, 28px);
  }
  .codexreeks__naam   { font-size: .75rem; }
  .codexreeks__pijlen { grid-auto-rows: 1.25rem; }


  .veld-rij { grid-template-columns: 1fr; gap: 0; }
  .veld-rij .veld + .veld { margin-top: 1rem; }
  .formulier .btn-row .btn { width: 100%; }

  /* Kopjes onder elkaar in plaats van op één brede regel. */
  .script--delen {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3em;
    aspect-ratio: auto;
    transform: none;
  }
  .script--delen .script__deel {
    position: static;
    width: var(--mob);
    height: auto;
    aspect-ratio: var(--ar);
  }

  .split,
  .over,
  .ontmoetingen { grid-template-columns: 1fr; }

  /* De gap is een kolomgoot; gestapeld wordt dat verticale ruimte en is 148px
     veel te veel. .over en .ontmoetingen zetten hem hieronder op 0 met een
     eigen marge; .split houdt het bij dezelfde 2rem tussen kop en tekst. */
  .split { gap: 2rem; }

  /* Volgorde uit het mobiele ontwerp: kop, dan de foto, dan de tekst.
     display:contents haalt de tekstkolom weg als kader, zodat de kop en de
     alinea's los in het raster te ordenen zijn. */
  .over { gap: 0; }
  .over__tekst { display: contents; }
  .over__tekst .h2 { order: 1; text-align: center; margin-bottom: 2rem; }
  /* Gestapeld heeft plakken geen zin: de foto staat boven de tekst en zou
     dan de hele lap tekst lang in beeld blijven hangen. */
  .over__beeld { order: 2; margin-bottom: 2.5rem; position: relative; top: auto; }
  .over__tekst p { order: 3; }
  .over__tekst p:first-of-type { margin-top: 0; }

  /* Zelfde volgorde bij de ontmoetingen: kop, foto, dan tekst en knoppen. */
  .ontmoetingen { gap: 0; }
  .ontmoetingen__tekst { display: contents; }
  .ontmoetingen__tekst .h2 { order: 1; text-align: center; margin-bottom: 2rem; }
  .ontmoetingen__beeld { order: 2; margin-bottom: 2rem; }
  .ontmoetingen__tekst .body-403,
  .ontmoetingen__tekst .meer-weten,
  .ontmoetingen__tekst .btn-row { order: 3; }
  .ontmoetingen__tekst .body-403:first-of-type { margin-top: 0; }

  /* Footer: eerst de knoppenregel, daaronder pas de bedrijfsgegevens. */
  .footer-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 1.5rem;
    /* Gestapeld staan hier knoppen onder het woordmerk in plaats van een
       regel tekst. De krappe maat van de brede opmaak laat het woord daar
       tegen de knoppen aan plakken; hier mag het ruimer. */
    margin-top: 2rem;
  }
  .footer-bar__links { order: 1; }
  .footer-bar__links .pill + .rond { margin-left: auto; }
  .footer-bar__meta  { order: 2; text-align: center; }

  .quote { padding: 2.5rem; }
  /* Alleen de maat; het centreren komt uit de basisregel. */
  .quote__deco { width: 420px; height: auto; }

  .kaarten,
  .quotes {
    padding-inline: var(--gutter);
    scroll-padding-inline-start: var(--gutter);
  }
}

@media (max-width: 600px) {
  :root { --menu-right: 16px; }

  /* Reviewkaart even breed als het witte paneel eronder: van rand tot rand.
     Er viel niets te verliezen, want de volgende kaart begon toch al
     buiten beeld. */
  .quotes { padding-inline: 0; }
  .quote { width: 100%; }

  /* De foto is liggend; als hij het hele scherm moet vullen blijft alleen
     een smalle middenstrook over en vallen beide gezichten weg. Daarom
     staat hij hier als band bovenaan, op volle breedte, met de tekst
     eronder op zwart. */
  .hero {
    min-height: 0;
    justify-content: flex-start;
    padding: calc(6.5rem + 66.7vw + 2.5rem) var(--gutter) 3.5rem;
  }
  /* Hier staat het beeld als een band bovenaan in plaats van vullend. De laag
     krijgt precies die band als kader, zodat het schalen om het midden van het
     beeld gaat en niet om het midden van de hele hero. */
  .hero::before {
    top: 6.5rem;
    bottom: auto;
    height: 66.7vw;
    background-size: 100% auto;
    background-position: center top;
  }
  /* Elke zin op zijn eigen regel. Zonder dit breekt hij waar hij toevallig
     uitkomt, en dat is per schermbreedte ergens anders. */
  .hero__payoff span { display: block; }
  .hero .btn-row {
    flex-direction: column-reverse;   /* contact eerst, werkwijze eronder */
    align-items: center;
    gap: .75rem;
  }
  .kaart { width: 260px; min-height: 360px; padding: 24px; }
  .kaart:nth-child(n) { transform: none; }
  /* Op een smal scherm is de foto op ware breedte te klein: beide gezichten
     kruipen dan in de bovenste 280px en de quote komt er bovenop. Dus verder
     inzoomen en de uitsnede juist omlaag schuiven, zodat de quote boven
     Sharon uitkomt en de uitnodiging onder Jos. */
  .site-footer {
    --foto-h: 227vw;
    --foto-y: calc(var(--foto-h) * .153);
  }

  /* Smalle, rechts uitgelijnde quote: 173px breed, 24/32. */
  .footer-quote {
    max-width: 173px;
    margin-left: auto;
    font-weight: 400;
    font-size: 1.5rem;
    line-height: 1.3333;
  }

  /* Mobiel is de contactknop even slank als de rest: 237x40, tekst 16/21. */
  .btn--groot {
    width: min(237px, 100%);
    min-height: 40px;
    padding: .5rem 1.25rem;
    font-size: var(--fs-klein);
    line-height: 1.3125;
  }

}
/* --------------------------------------------------------------------------
   17. Contactblad
   Schuift van onder over de pagina heen. <dialog> doet zelf het zware werk:
   focus vasthouden, Escape, en de rest van de pagina buiten bereik zetten.
   -------------------------------------------------------------------------- */
.overlay {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
}
.overlay::backdrop { background: rgb(0 0 0 / .55); }

.overlay__blad {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  /* Het blad is zo breed als het venster en wordt zo hoog als het formulier
     vraagt; wat overblijft is de strook pagina erboven. Een plafond van 295px
     zag er ruim uit, maar kapte het formulier af en dwong tot scrollen binnen
     het blad. Nu telt alleen nog de ondergrens van die strook: er blijft
     altijd 1.5rem zichtbaar, en op een ruim venster is de strook vanzelf
     groter omdat het blad niet meer plaats inneemt dan het nodig heeft. */
  max-height: calc(100% - 1rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-block: 1.5rem clamp(1.5rem, 3vw, 2.5rem);
  background: var(--c-wit);
  color: var(--c-zwart);
  border-radius: var(--radius-panel-l) var(--radius-panel-l) 0 0;
  text-align: center;
}
/* De inhoud blijft een leesbare kolom, ook als het blad meegroeit met een
   breed scherm. 20px marge op mobiel komt uit het ontwerp. */
.overlay__inhoud {
  width: min(100% - 2.5rem, var(--maat-tekst));
  margin-inline: auto;
}

.overlay__sluit {
  display: block;
  /* Op de rand van het blad, dus op elk scherm even ver van de vensterrand. */
  margin-left: auto;
  margin-right: 1.25rem;
  width: 40px; height: 40px;
  padding: 0;
  background: #e2e2e2;
  border: 0;
  border-radius: 100px;
  transition: background-color .2s ease;
}
.overlay__sluit:hover { background: #cfcfcf; }
.overlay__kruis {
  display: block;
  width: 16px; height: 16px;
  margin-inline: auto;
  background-color: var(--c-zwart);
  -webkit-mask: var(--kruis) center / contain no-repeat;
          mask: var(--kruis) center / contain no-repeat;
}

.overlay .formulier-titel { margin-top: .5rem; }
.overlay .formulier-lead  { margin-inline: auto; max-width: 26rem; }
.overlay .formulier .btn-row .btn { width: 100%; }
/* In het blad telt elke pixel: het formulier moet er in zijn geheel in passen
   zonder dat je erin hoeft te scrollen. Vandaar wat minder lucht boven de
   knop dan op de agendapagina, waar de pagina zelf meeschuift. */
.overlay .formulier .btn-row { margin-top: 1.5rem; }

/* Achter het blad valt niets meer te scrollen. */
html:has(.overlay[open]) { overflow: hidden; }

@keyframes blad-omhoog { from { transform: translateY(100%); } }
@keyframes blad-omlaag { to   { transform: translateY(100%); } }
@keyframes scrim-aan   { from { opacity: 0; } }
@keyframes scrim-uit   { to   { opacity: 0; } }

/* Heen en terug precies dezelfde beweging. De curve is symmetrisch: zacht
   op gang, zacht eruit. Met een ease-out ging het blad er in het begin
   vandoor en las het openen als een sprong, terwijl het sluiten wel
   vloeiend was. */
.overlay {
  --blad-tempo: .34s;
  --blad-curve: cubic-bezier(.45, 0, .55, 1);
}
.overlay[open] .overlay__blad { animation: blad-omhoog var(--blad-tempo) var(--blad-curve); }
.overlay[open]::backdrop      { animation: scrim-aan var(--blad-tempo) var(--blad-curve); }
.overlay.is-sluiten .overlay__blad { animation: blad-omlaag var(--blad-tempo) var(--blad-curve) forwards; }
.overlay.is-sluiten::backdrop      { animation: scrim-uit var(--blad-tempo) var(--blad-curve) forwards; }

/* --------------------------------------------------------------------------
   Codexslider — dezelfde vijf bewegingen, nu als carrousel
   Eén dia tegelijk in beeld. De pijlen bedienen hem op een muis, vegen op
   een aanraakscherm; de stippen doen allebei.
   -------------------------------------------------------------------------- */
/* De carrousel staat vrijer dan de blokken eromheen: anderhalf keer de
   gewone ruimte, boven en onder gelijk. Onder telt de bovenruimte van
   .blok--levende mee (8.3vw), vandaar dat hier maar 4.2vw staat: samen is dat
   dezelfde 12.5vw als hierboven. */
.blok--codexslider { padding-block: clamp(4.5rem, 12.5vw, 180px) clamp(1.5rem, 4.2vw, 60px); }

.blok--levende { padding-block: clamp(3rem, 8.3vw, 120px) 0; }
/* Zonder de titel erboven draagt de sectiepadding de ruimte; de marge die
   onder het handschrift hoorde is daarmee vervallen. */

.slider {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: clamp(1rem, 3vw, 44px);
  max-width: 900px;
  margin-inline: auto;
}

.slider__venster {
  grid-column: 2;
  overflow: hidden;
  /* De veeg begint hier: dit is de laag die blijft staan terwijl het spoor
     erin wegschuift. De browser houdt het verticale pannen, het horizontale
     komt bij ons. */
  touch-action: pan-y;
}
.slider__spoor {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  /* Tijdens het vegen zet JS de overgang uit, zodat de dia de vinger volgt. */
  transition: transform .4s cubic-bezier(.45, 0, .55, 1);
  /* Verticaal vegen blijft van de pagina. */
  touch-action: pan-y;
}
.slider__dia {
  flex: 0 0 100%;
  text-align: center;
  user-select: none;
}

.slider__naam {
  font-family: var(--ff-mono);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.125rem, 3.33vw, 3rem);
  line-height: 1.2;
}
.bediening__pijlen {
  /* Puur versiering, en de veeg begint er bovenop. Zonder dit is het teken
     onder de vinger het doelwit van de aanraking, en dat teken wisselt
     tijdens het gewoel. Nu vangt het spoor eronder de veeg op. */
  pointer-events: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: clamp(3.125rem, 3.82vw, 3.4375rem);
  place-items: center;
  width: 3.65em;
  margin: clamp(1.5rem, 3vw, 44px) auto 0;
  font-family: var(--ff-mono);
  font-weight: 300;
  font-size: clamp(2.125rem, 2.78vw, 2.5rem);
  line-height: 1;
}
.slider__tekst {
  margin: clamp(1.5rem, 3vw, 44px) auto 0;
  max-width: clamp(192px, 22vw, 316px);
  color: var(--c-grijs);
  font-size: clamp(1rem, 1.39vw, 1.25rem);
  line-height: 1.6;
}

/* Ronde knoppen links en rechts, met een pijl als masker zodat hij meekleurt.
   Drie toestanden uit het ontwerp, alle drie via doorzichtigheid van de hele
   knop: ring en pijl doven samen. De ring vult niet op bij aanwijzen — hij
   wordt alleen helderder, net als bij de ghost-knoppen. */
.bediening__pijl {
  width: 44px; height: 44px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--c-rand-licht);
  border-radius: 100px;
  display: grid;
  place-items: center;
  opacity: .7;
  transition: background-color .2s ease, border-color .2s ease, opacity .2s ease;
}
.bediening__pijl--terug  { grid-column: 1; }
.bediening__pijl--verder { grid-column: 3; }
.bediening__pijl:hover,
.bediening__pijl:focus-visible { opacity: 1; }
/* Op een aanraakscherm blijft :hover na het tikken hangen; :active geeft daar
   de enige echte terugkoppeling. */
.bediening__pijl:active { opacity: 1; }
/* Aan het eind van de rij: nog zichtbaar, maar duidelijk niet aanklikbaar. */
.bediening__pijl[disabled] { opacity: .4; }

.bediening__punt {
  display: block;
  width: 18px; height: 18px;
  background-color: var(--c-wit);
  -webkit-mask: var(--sliderpijl) center / contain no-repeat;
          mask: var(--sliderpijl) center / contain no-repeat;
}
.bediening__pijl--terug .bediening__punt { transform: scaleX(-1); }

/* Pijlen en stippen op één regel, voor het kaartenwiel. */
.bediening {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(.75rem, 2vw, 1.5rem);
  margin-top: clamp(1.5rem, 3vw, 44px);
}
.bediening .bediening__pijl { width: 40px; height: 40px; }
.bediening .bediening__punt { width: 18px; height: 18px; }
.bediening .bediening__stippen { margin: 0; }

.bediening__stippen {
  grid-column: 2;
  display: flex;
  justify-content: center;
  gap: .625rem;
  margin: clamp(2rem, 4.2vw, 60px) 0 0;
  padding: 0;
  list-style: none;
}
.bediening__stip {
  display: block;
  width: 10px; height: 10px;
  padding: 0;
  background: var(--c-stip);
  border: 0;
  border-radius: 100px;
  transition: background-color .2s ease;
}
.bediening__stip[aria-current="true"] { background: var(--c-groen); }

@media (max-width: 600px) {
  /* Naast de dia is geen ruimte voor knoppen; daar veeg je. Bij het
     kaartenwiel staan ze onder de kaarten in een rij en passen ze wel. */
  .slider { grid-template-columns: minmax(0, 1fr); }
  .slider .bediening__pijl { display: none; }
  .slider__venster,
  .bediening__stippen { grid-column: 1; }
}

@media (max-width: 600px) {
  /* Op een smal scherm staan de stippen los onder de kaart en flankeren de
     pijlen de knop. Beide regels worden daarvoor doorzichtig gemaakt
     (display: contents), zodat hun inhoud in één raster te plaatsen is. */
  .wielbediening {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    row-gap: clamp(1.5rem, 4vw, 2rem);
  }
  .wielbediening .bediening,
  .wielbediening .btn-row { display: contents; }
  .wielbediening .bediening__stippen { grid-area: 1 / 1 / 2 / 4; justify-self: center; }
  .wielbediening .bediening__pijl--terug  { grid-area: 2 / 1; }
  .wielbediening .bediening__pijl--verder { grid-area: 2 / 3; }
  .wielbediening .btn { grid-area: 2 / 2; justify-self: center; }
  /* Zonder ring, in elke carrousel: op een aanraakscherm veeg je, dus de pijl
     hoeft zichzelf niet met een cirkel aan te kondigen.
     De tweede selector moet erbij omdat .bediening .bediening__pijl hierboven
     de maat zet. Die weegt zwaarder dan een losse .bediening__pijl, en een
     mediaregel telt daarin niet mee; met dezelfde selector erbij en dit blok
     verderop in het bestand wint deze wel. */
  .bediening__pijl,
  .bediening .bediening__pijl {
    width: 32px; height: 32px;
    background: transparent;
    border: 0;
  }
  .bediening__punt,
  .bediening .bediening__punt { width: 20px; height: 20px; }
}