@charset "utf-8";
/* ==========================================================================
   NATURE vzw, richting 3: "rivier". De agenda is de site.
   Chronologie als interface. Kalme visuele taal, de structuur is de ster.
   ========================================================================== */

/* ---------- tokens ---------- */
/* De vier merkstrengen van de knoop in het logo. Enige plaats waar deze
   hexwaarden staan. Alles wat kleur nodig heeft, leest hieruit. */
:root {
  --brand-cyan:    #44B4D4;
  --brand-olive:   #B3B200;
  --brand-red:     #C31428;
  --brand-magenta: #BD0BB1;
}

/* Categoriekleuren, gekoppeld aan data-type op een agenda-item.
   Dit blok is bewust de enige toewijzing: na de merkaudit wisselen we
   hier de strengen om, en de rest van de stylesheet volgt vanzelf.
   Let op de fysica: cyaan en olijf zakken onder AA als tekst op papier,
   dus deze tokens zijn voorlopig alleen voor grafische vlakken. */
:root {
  /* Besluit Fady 2026-09-03, na de audit van nature.be (research/13):
     hun eigen code blijft. jongeren = rood, jeugdwerkers = olijf,
     scholen = cyaan-blauw; vrijwilligers krijgt de vierde, verweesde streng: magenta.
     Internationaal (Adventure Europe) is een traject voor jeugdwerkers en volgt olijf. */
  --type-vorming:        var(--brand-olive);
  --type-kamp:           var(--brand-red);
  --type-jongeren:       var(--brand-red);
  --type-school:         var(--brand-cyan);
  --type-vrijwilligers:  var(--brand-magenta);
  --type-internationaal: var(--brand-olive);
  /* Tekstvarianten, herberekend voor AA op papier #F5F4EF (grafische vlakken
     gebruiken de zuivere streng, woorden gebruiken deze donkere variant):
     olijf #666500 5.1:1, cyaan #17708A 5.1:1, rood #C31428 5.6:1, magenta #BD0BB1 4.9:1 */
  --type-vorming-ink:        #666500;
  --type-kamp-ink:           var(--brand-red);
  --type-jongeren-ink:       var(--brand-red);
  --type-school-ink:         #17708A;
  --type-vrijwilligers-ink:  var(--brand-magenta);
  --type-internationaal-ink: #666500;
}
/* elk item draagt zijn code als twee variabelen; alles daaronder leest die */
.entry[data-type~="vorming"]        { --cat: var(--type-vorming);        --cat-ink: var(--type-vorming-ink); }
.entry[data-type~="kamp"]           { --cat: var(--type-kamp);           --cat-ink: var(--type-kamp-ink); }
.entry[data-type~="jongeren"]       { --cat: var(--type-jongeren);       --cat-ink: var(--type-jongeren-ink); }
.entry[data-type~="school"]         { --cat: var(--type-school);         --cat-ink: var(--type-school-ink); }
.entry[data-type~="vrijwilligers"]  { --cat: var(--type-vrijwilligers);  --cat-ink: var(--type-vrijwilligers-ink); }
.entry[data-type~="internationaal"] { --cat: var(--type-internationaal); --cat-ink: var(--type-internationaal-ink); }
/* Blokken op de startpagina dragen dezelfde code. Grafisch vlak = --cat,
   woorden = --cat-ink (de AA-donkere variant). */
.tint-vorming        { --cat: var(--type-vorming);        --cat-ink: var(--type-vorming-ink); }
.tint-kamp           { --cat: var(--type-kamp);           --cat-ink: var(--type-kamp-ink); }
.tint-jongeren       { --cat: var(--type-jongeren);       --cat-ink: var(--type-jongeren-ink); }
.tint-school         { --cat: var(--type-school);         --cat-ink: var(--type-school-ink); }
.tint-vrijwilligers  { --cat: var(--type-vrijwilligers);  --cat-ink: var(--type-vrijwilligers-ink); }
.tint-internationaal { --cat: var(--type-internationaal); --cat-ink: var(--type-internationaal-ink); }

:root {
  --paper:      #F5F4EF;
  --paper-2:    #EDEBE2;
  --paper-3:    #E4E1D5;
  --ink:        #14181A;
  --ink-2:      #55605C;
  --ink-3:      #7C857F;
  --rule:       #D6D2C4;
  --rule-2:     #C2BDAB;
  --accent:     var(--brand-red);      /* AA op papier (5.6:1) */
  --accent-2:   var(--brand-magenta);  /* AA op papier (5.2:1) */
  --cyan:       var(--brand-cyan);     /* NOOIT tekst op papier: enkel grafisch */
  --olive:      var(--brand-olive);    /* idem */
  --forest:     #1E2A23;

  --gut: clamp(1.15rem, 4vw, 3.5rem);
  --maxw: 1220px;

  /* ---- het verticale ritme, één schaal voor de hele site ----
     Eén sectie-afstand, één kopschaal, één binnenafstand. Geen sectie
     mag hier nog van afwijken, ook niet met een losse inline-waarde. */
  --section-gap:  clamp(3rem, 6.4vw, 5rem);   /* padding boven en onder elke sectie */
  --section-head: clamp(1.8rem, 1.3rem + 2.2vw, 3.1rem); /* de h2 in elke sectiekop */
  --head-inner:   clamp(.7rem, 1.6vw, 1rem);  /* eyebrow -> h2 -> lede */
  --head-gap:     clamp(1.6rem, 3.4vw, 2.4rem); /* sectiekop -> inhoud */
  --block-gap:    clamp(1.4rem, 3vw, 2.2rem); /* blok -> blok binnen een sectie */
  --hero-top:     clamp(1.4rem, 3vw, 2.2rem); /* lucht tussen de plakbalken en de eyebrow */
  /* Twee vaste hoogtes, randen inbegrepen. Alles wat onder de balken
     plakt rekent met --stack, nooit met een los getal. */
  --headerH: 60px;
  --barH: 60px;
  --stack: calc(var(--headerH) + var(--barH));

  --ease: cubic-bezier(.2, .7, .2, 1);
  --slow: 620ms;
  --med: 340ms;
  --fast: 170ms;

  --ff-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --ff-body: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --ff-place: "Newsreader", Georgia, "Times New Roman", serif;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto;
  scroll-padding-top: calc(var(--stack) + 1rem);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--ff-body);
  font-size: clamp(1rem, .96rem + .2vw, 1.075rem);
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
  hyphens: auto;
  overflow-x: hidden;
  /* Eén crèmekleurig papier voor de hele site. Geen gekleurde wassing meer:
     die las op sommige schermen als blauwgrijs. Secties scheiden we met
     haarlijnen en ritme, niet met vlakken. */
}

img, svg, video { max-width: 100%; display: block; }

h1, h2, h3, h4 {
  font-family: var(--ff-display);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.022em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

::selection { background: #14181A; color: var(--paper); }

/* ---------- hulpklassen ---------- */
.vh {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
.rule { height: 1px; background: var(--rule); border: 0; margin: 0; }
/* onzichtbaar ankerpunt voor oude links, zonder eigen ruimte */
.anchor-alias { position: absolute; width: 0; height: 0; overflow: hidden; }
.fineprint { margin-top: var(--block-gap); font-size: .9rem; color: var(--ink-3); max-width: 46ch; }

/* focus: overal zichtbaar, nooit verwijderd */
:where(a, button, summary, input, [tabindex]):focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute; left: 8px; top: -60px; z-index: 90;
  background: var(--ink); color: var(--paper);
  padding: .7rem 1rem; border-radius: 3px; text-decoration: none;
  transition: top var(--fast) var(--ease);
}
.skip:focus { top: 8px; }

/* ---------- intro (één keer per sessie, < 1.5 s) ---------- */
.intro {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  background: var(--paper);
}
.intro__inner { display: grid; justify-items: center; gap: 1.1rem; }
.intro__logo { width: min(190px, 46vw); height: auto; opacity: 0; }
.intro__line { width: 1px; height: 0; background: var(--ink); }
.intro__word {
  font-size: .74rem; letter-spacing: .34em; text-transform: uppercase;
  color: var(--ink-3); opacity: 0;
}
html.is-intro body { overflow: hidden; }
html:not(.is-intro) .intro { display: none; }

@media (prefers-reduced-motion: no-preference) {
  html.is-intro .intro__logo { animation: introLogo 700ms var(--ease) 80ms forwards; }
  html.is-intro .intro__line { animation: introLine 620ms var(--ease) 340ms forwards; }
  html.is-intro .intro__word { animation: introWord 500ms var(--ease) 620ms forwards; }
  html.is-intro .intro { animation: introOut 460ms var(--ease) 1000ms forwards; }
}
@media (prefers-reduced-motion: reduce) {
  html.is-intro .intro { display: none; }
}
@keyframes introLogo { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes introLine { from { height: 0; } to { height: 74px; } }
@keyframes introWord { to { opacity: 1; } }
@keyframes introOut { to { opacity: 0; visibility: hidden; } }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  height: var(--headerH);   /* rand inbegrepen, zodat --stack klopt */
  background: rgba(245,244,239,.88);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
  view-transition-name: site-header;
}
.site-header__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; height: 100%;
}
.brand { display: inline-flex; align-items: center; text-decoration: none; padding: .35rem 0; }
.brand img { height: 34px; width: auto; view-transition-name: brand; }

.nav { display: flex; gap: clamp(.85rem, 2.4vw, 1.8rem); }
.nav a {
  position: relative; text-decoration: none;
  font-size: .84rem; letter-spacing: .045em; text-transform: uppercase;
  font-weight: 600; color: var(--ink-2);
  padding: .55rem 0; min-height: 24px; display: inline-flex; align-items: center;
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .28rem; height: 1.5px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
}
@media (prefers-reduced-motion: no-preference) {
  .nav a::after { transition: transform var(--med) var(--ease); }
}
.nav a:hover, .nav a:focus-visible { color: var(--ink); }
.nav a:hover::after, .nav a:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.nav a[aria-current="page"] { color: var(--ink); }
.nav a[aria-current="page"]::after { transform: scaleX(1); background: var(--accent); }
@media (max-width: 560px) {
  .nav { gap: .62rem; }
  .nav a { font-size: .7rem; letter-spacing: .02em; }
  .brand img { height: 28px; }
}
@media (max-width: 400px) {
  .nav { gap: .5rem; }
  .nav a { font-size: .64rem; }
  .brand img { height: 24px; }
}

/* ---------- de band: seizoenen op de agenda, hoofdstukken op de home ----------
   Eén component, twee varianten. De hoogte staat vast op --barH zodat alles
   wat eronder plakt exact aansluit. */
.seasons {
  position: sticky; top: var(--headerH); z-index: 40;
  height: var(--barH); overflow: hidden;
  background: rgba(245,244,239,.94);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
  view-transition-name: seasons;
}
.seasons__in {
  height: 100%;
  display: flex; flex-direction: column; justify-content: center;
}
/* het spoor zelf: 12 px lucht boven de lijn, waar de pin in staat */
.seasons__rail {
  container-type: inline-size; position: relative;
  padding-top: 13px;
}
.seasons__track {
  position: relative; display: grid;
  grid-template-columns: 3fr 3fr 3fr 1.4fr;
  gap: 5px; list-style: none; margin: 0; padding: 0;
}
.seasons__seg {
  --tint: var(--rule-2);
  position: relative; padding-top: .5rem;
  border-top: 3px solid var(--tint);
  font-size: .66rem; line-height: 1.1; letter-spacing: .15em; text-transform: uppercase;
  /* --ink-2, niet --ink-3: op 8 tot 10 px moet ook een niet-actief label
     boven AA blijven (5.9:1 op het papier) */
  color: var(--ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (prefers-reduced-motion: no-preference) {
  .seasons__seg { transition: color var(--med) var(--ease), border-color var(--med) var(--ease); }
}
.seasons__seg[data-season="herfst"] { --tint: var(--brand-red); }
.seasons__seg[data-season="winter"] { --tint: var(--brand-cyan); }
.seasons__seg[data-season="lente"]  { --tint: var(--brand-olive); }
.seasons__seg[data-season="zomer"]  { --tint: var(--brand-magenta); }
.seasons__seg.is-now { color: var(--ink); font-weight: 600; }

/* de pin: staat vrij in de lucht boven het spoor, raakt niets aan */
.seasons__marker {
  position: absolute; top: 0; left: 0; width: 2px; height: 19px;
  border-radius: 1px; background: var(--marker, var(--ink));
  transform: translateX(calc(var(--flow, 0) * (100cqw - 2px)));
}
@media (prefers-reduced-motion: no-preference) {
  .seasons__marker { transition: transform 180ms var(--ease), background var(--med) var(--ease); }
  .seasons__marker::after { transition: background var(--med) var(--ease); }
}
.seasons__marker::after {
  content: ""; position: absolute; left: 50%; top: 0;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--marker, var(--ink)); transform: translateX(-50%);
  box-shadow: 0 0 0 3px var(--paper);
}

/* het huidige hoofdstuk in woorden, alleen op smalle schermen */
.seasons__now {
  display: none; margin: .5rem 0 0;
  font-size: .66rem; line-height: 1.1; letter-spacing: .15em; text-transform: uppercase;
  color: var(--ink); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* variant: hoofdstukken op de startpagina, vier gelijke stukken.
   Dezelfde band als op de agenda: vier gekleurde strengen met hun woord
   eronder, ook op een telefoon. De pin neemt de kleur van het hoofdstuk
   waarin je staat. Het zijn grafische vlakken, geen tekst, dus cyaan en
   olijf mogen hier. */
.seasons--chapters { --marker: var(--brand-cyan); }
.seasons--chapters[data-now="intro"] { --marker: var(--brand-cyan); }
.seasons--chapters[data-now="wat"]   { --marker: var(--brand-olive); }
.seasons--chapters[data-now="hoe"]   { --marker: var(--brand-magenta); }
.seasons--chapters[data-now="actie"] { --marker: var(--brand-red); }
.seasons--chapters .seasons__track { grid-template-columns: repeat(4, 1fr); }
.seasons--chapters .seasons__seg[data-chapter="intro"] { --tint: var(--brand-cyan); }
.seasons--chapters .seasons__seg[data-chapter="wat"]   { --tint: var(--brand-olive); }
.seasons--chapters .seasons__seg[data-chapter="hoe"]   { --tint: var(--brand-magenta); }
.seasons--chapters .seasons__seg[data-chapter="actie"] { --tint: var(--brand-red); }
@media (max-width: 420px) {
  .seasons__seg { font-size: .6rem; letter-spacing: .1em; }
  .seasons__now { font-size: .6rem; letter-spacing: .1em; }
}
/* De woorden blijven staan op een telefoon. "wat we doen" is het langste
   label, dus daarop meten we: vier kolommen van (331 - 15) / 4 = 79 px op
   een scherm van 360. Deze twee blokken staan bewust NA de algemene
   420-regel hierboven, anders wint die. */
@media (max-width: 700px) {
  .seasons--chapters .seasons__seg { font-size: .58rem; letter-spacing: .05em; }
  .seasons--chapters .seasons__now { display: none; }
}
@media (max-width: 420px) {
  .seasons--chapters .seasons__seg { font-size: .58rem; letter-spacing: .03em; }
}

/* ---------- hero ---------- */
/* De eyebrow zit dicht onder de plakbalken: --hero-top, niet een scherm lucht. */
.hero { padding-block: var(--hero-top) var(--block-gap); }
/* De startpagina heeft geen eyebrow meer, dus daar mag er iets meer lucht
   tussen de balken en de titel staan. */
.hero--split { padding-top: calc(var(--hero-top) + clamp(.4rem, 1.6vw, 1.2rem)); }
/* Op een telefoon staan kop en onderschrift onder elkaar; vanaf 900 px
   staat de kop links en het onderschrift rechts, op dezelfde onderlijn. */
.hero__head { display: grid; gap: var(--head-inner); }
/* Kop links, onderschrift rechts, twee gelijke kolommen, onderlijn gelijk.
   De kop is bewust niet zo groot als ze kan: 50/50 werkt alleen als de twee
   blokken ongeveer even hoog uitkomen, en dat lukt met een kop van twee
   regels naast een onderschrift van drie. De tussenruimte is kleiner dan
   eerst, zodat de twee blokken bij elkaar horen zoals de blokken lager op
   de pagina. Splitsing vanaf 820 px, dus ook op een tablet in staande stand. */
@media (min-width: 820px) {
  .hero__head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(1.4rem, 2.6vw, 2.6rem);
    align-items: end;
  }
  .hero--split .hero__head h1 {
    max-width: none;
    font-size: clamp(2.1rem, 3.5vw, 2.97rem);
    letter-spacing: -.026em;
  }
  .hero__head .hero__lede {
    margin: 0; max-width: none;
    /* Vlakkere helling dan de body-lede: anders staat het onderschrift rond
       820 px op vier regels terwijl de kop er twee heeft. Zo blijft het
       overal drie regels naast een kop van twee. */
    font-size: clamp(1rem, .84rem + .5vw, 1.25rem);
  }
}
.eyebrow {
  font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-3); margin: 0 0 var(--head-inner);
  display: flex; align-items: center; gap: .6rem;
}
/* Geen haarlijn meer achter het labeltje: de sectie heeft al haar eigen
   scheidingslijn bovenaan, en twee lijnen vlak onder elkaar lazen als één
   rommelige overgang. */

.hero h1 {
  font-size: clamp(2.5rem, 8.4vw, 6.1rem);
  font-stretch: 108%;
  letter-spacing: -.03em;
  max-width: 16ch;
  text-wrap: balance;
}
/* Op de telefoon: zwaarder, strakker, en klein genoeg om in twee gebalanceerde
   regels te vallen. Gemeten op 360 px met Archivo 800 (gutter 2 x 18.4 px). */
@media (max-width: 560px) {
  .hero h1 {
    font-size: clamp(1.45rem, 8.6vw, 3rem);
    font-weight: 800;
    font-stretch: 100%;
    letter-spacing: -.025em;
    line-height: 1.06;
    max-width: none;
  }
}
.hero__lede {
  margin-top: var(--head-inner);
  max-width: 46ch; font-size: clamp(1.02rem, .98rem + .35vw, 1.25rem);
  color: var(--ink-2);
}
/* Vandaag en eerstvolgende: label boven de waarde, met een streep onder het
   label in plaats van een pil. De streep van "eerstvolgende" neemt de kleur
   van het eerstvolgende programma; JS zet die kleur, en zonder JS blijft het
   inkt. Zo klopt de kleur altijd met wat eronder staat. */
.today {
  margin: var(--block-gap) 0 0;
  display: grid; gap: clamp(1.1rem, 3vw, 1.8rem);
}
@media (min-width: 620px) {
  .today { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 46rem; }
}
.today__item { min-width: 0; }
.today__k {
  margin: 0 0 .5rem; display: inline-block;
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600;
  color: var(--ink-2);
  padding-bottom: .35rem;
  border-bottom: 2px solid var(--k, var(--ink));
}
.today__v {
  margin: 0; font-weight: 600;
  font-size: clamp(1rem, .96rem + .3vw, 1.15rem); color: var(--ink);
}
.today__v a { color: inherit; text-decoration: underline; text-underline-offset: .22em; text-decoration-thickness: 1px; }
.today__v a:hover { text-decoration-thickness: 2px; }

/* gestaffelde titelreveal, aria-veilig */
.stagger > span { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .stagger > span { opacity: 0; transform: translateY(.5em); animation: rise 760ms var(--ease) forwards; }
  .stagger > span:nth-child(1) { animation-delay: 40ms; }
  .stagger > span:nth-child(2) { animation-delay: 130ms; }
  .stagger > span:nth-child(3) { animation-delay: 220ms; }
  .stagger > span:nth-child(4) { animation-delay: 310ms; }
  .stagger > span:nth-child(5) { animation-delay: 400ms; }
  .stagger > span:nth-child(6) { animation-delay: 490ms; }
  .stagger > span:nth-child(7) { animation-delay: 580ms; }
  .stagger > span:nth-child(8) { animation-delay: 670ms; }
  html.is-intro .stagger > span { animation-play-state: paused; }
}
@keyframes rise { to { opacity: 1; transform: none; } }

/* ---------- filmstrook ----------
   Beeldverhouding 2.35:1, zoals de bronbestanden, en zonder geluidsspoor:
   de audio is er bij het encoderen uit gehaald, niet enkel gedempt.
   Het posterbeeld staat er meteen (in de hero is dat het LCP-beeld), de
   video schuift er na load overheen. Tikken op het beeld zet af en aan.
   Dat is geen luxe: Safari bevriest een automatisch spelende video als je
   de app verlaat en terugkomt, en zonder knop staat het beeld dan stil. */
.clip {
  position: relative; margin: 0;
  border-radius: 14px; overflow: hidden; background: var(--paper-3);
  aspect-ratio: 2.35;
}
@media (min-width: 760px) { .clip { border-radius: 4px; } }
.clip--hero { margin-top: clamp(1.8rem, 5vw, 3rem); }
.clip img, .clip video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
}
/* Op iPhone bleef er een haarlijn van het posterbeeld links en rechts naast
   de video staan: Safari rondt de geschaalde videorechthoek naar beneden af,
   waardoor er een halve pixel poster onder vandaan piept. Twee maatregelen:
   de video krijgt één pixel overschot aan elke kant, en zodra ze loopt
   verdwijnt het posterbeeld er helemaal onder. */
.clip video { inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); max-width: none; }
.clip video { opacity: 0; }
.clip.is-ready video { opacity: 1; }
.clip.is-ready img { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .clip video { transition: opacity 700ms var(--ease); }
  /* het poster gaat pas weg als de video er helemaal overheen ligt */
  .clip img { transition: opacity 300ms var(--ease) 700ms; }
}

/* het hele beeld is de knop */
.clip__tap {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center;
  margin: 0; padding: 0; border: 0; background: transparent;
  color: #fff; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.clip__tap:focus-visible { outline: 3px solid #fff; outline-offset: -7px; }
.clip__badge {
  display: grid; place-items: center;
  width: clamp(46px, 9vw, 62px); height: clamp(46px, 9vw, 62px);
  border-radius: 50%; background: rgba(20,24,26,.5);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 0 0 1px rgba(255,255,255,.4);
}
.clip__ico { grid-area: 1 / 1; }
@media (prefers-reduced-motion: no-preference) {
  .clip__badge { transition: opacity var(--med) var(--ease), transform var(--med) var(--ease); }
}
/* Speelt de film, dan vervaagt het insigne en blijft het weg. Niet bij
   hover terugbrengen: op een aanraakscherm blijft :hover na een tik plakken,
   waardoor de knop op het beeld bleef staan na pauze en weer spelen.
   Toetsenbordfocus laat hem wel zien, anders is de knop onvindbaar. */
.clip.is-playing .clip__badge { opacity: 0; transform: scale(.86); }
.clip.is-playing .clip__tap:focus-visible .clip__badge { opacity: 1; transform: none; }
.clip__ico--pause { opacity: 0; }
.clip.is-playing .clip__ico--pause { opacity: 1; }
.clip.is-playing .clip__ico--play { opacity: 0; }

/* de voortgangsbalk ligt precies op de onderrand van de container */
.clip__track {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 3;
  background: rgba(255,255,255,.26); opacity: 0;
}
.clip.is-ready .clip__track { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .clip__track { transition: opacity var(--med) var(--ease); }
}
.clip__bar {
  display: block; width: 100%; height: 100%; background: #fff;
  transform: scaleX(var(--p, 0)); transform-origin: left center;
}

/* de twee losse stroken tussen de secties. De secties leveren zelf al
   --section-gap lucht aan beide kanten, dus we trekken er wat af. */
.clipband { margin-block: calc(var(--section-gap) * -.3); }

/* ---------- onder de film op een telefoon: twee wegen verder ----------
   Zonder kleur: beide links leiden naar alle vier de sporen, en één kleur
   zou hier een spoor beloven dat er niet is. Vanaf 900 px staat de hero
   al vol en verdwijnt dit blok. */
.herocta {
  margin-top: 1rem; overflow: hidden;
  border: 1px solid var(--rule); border-radius: 12px;
}
.herocta__a {
  display: flex; align-items: center; gap: 1rem;
  min-height: 62px; padding: .8rem 1rem;
  text-decoration: none; color: var(--ink);
}
.herocta__a + .herocta__a { border-top: 1px solid var(--rule); }
.herocta__a:hover { background: var(--paper-2); }
.herocta__txt { display: grid; gap: .12rem; }
.herocta__t { font-weight: 700; font-size: 1.02rem; letter-spacing: -.01em; }
.herocta__s { font-size: .82rem; color: var(--ink-2); }
.herocta__a svg { flex: none; margin-left: auto; color: var(--ink-2); }
@media (prefers-reduced-motion: no-preference) {
  .herocta__a svg { transition: transform var(--med) var(--ease); }
  .herocta__a:hover svg { transform: translateX(5px); }
}
@media (min-width: 900px) { .herocta { display: none; } }

/* ---------- tijdchips + filters ---------- */
.chips {
  display: flex; flex-wrap: wrap; gap: .5rem;
  list-style: none; margin: 0; padding: 0;
}
.chip {
  font: inherit; font-size: .82rem; line-height: 1;
  display: inline-flex; align-items: center; gap: .45rem;
  min-height: 40px; padding: .6rem .95rem;
  border: 1px solid var(--rule-2); border-radius: 999px;
  background: transparent; color: var(--ink-2); cursor: pointer;
  text-decoration: none;
}
@media (prefers-reduced-motion: no-preference) {
  .chip { transition: background var(--fast) var(--ease), color var(--fast) var(--ease), border-color var(--fast) var(--ease), transform var(--fast) var(--ease); }
}
.chip:hover { color: var(--ink); border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.chip .count { font-size: .74rem; opacity: .6; font-variant-numeric: tabular-nums; }
/* Geen gekleurde bolletjes op de chips: die lazen als uitgeschakeld.
   De categoriekleur staat op de items zelf, niet op de filters. */

/* De filterbalk staat nu binnen de kop van de agenda, zonder eigen lijn
   erboven: kop, de twee data en de filters vormen samen één sectie. De
   enige lijn die volgt is die van de eerste maandgroep. */
.filterbar {
  display: flex; flex-wrap: wrap; gap: 1rem 1.6rem;
  align-items: center; justify-content: space-between;
  margin-top: var(--head-gap);
}
.filterbar__note { font-size: .84rem; color: var(--ink-3); margin: 0; }

/* ---------- de rivier ---------- */
.river { padding-bottom: clamp(3rem, 8vw, 6rem); }
.month {
  display: grid; grid-template-columns: 1fr; gap: 0;
  border-top: 1px solid var(--rule);
}
@media (min-width: 900px) {
  .month { grid-template-columns: minmax(9rem, 15rem) 1fr; column-gap: clamp(1.5rem, 4vw, 3.5rem); }
}
.month__marker {
  position: sticky; top: var(--stack);   /* exact tegen de band, geen kier */
  align-self: start;
  padding-block: .95rem .85rem;
  z-index: 5;
}
/* vaste grond onder de plakkende maandkop: loopt door tot de rand van de
   wrap, zodat er niets doorheen schuift en de tekst niet op de inhoud ligt */
.month__marker::before {
  content: ""; position: absolute; z-index: -1;
  top: 0; bottom: 0; left: calc(var(--gut) * -1); right: calc(var(--gut) * -1);
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 900px) {
  .month__marker { top: calc(var(--stack) + 1.4rem); padding-block: 2.2rem 1rem; }
  .month__marker::before { display: none; }
}
.month__name {
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.35rem);
  font-stretch: 112%; letter-spacing: -.03em; text-transform: lowercase;
}
.month__year {
  display: block; font-size: .72rem; letter-spacing: .22em;
  color: var(--ink-3); margin-top: .35rem; font-weight: 500;
}
.month__count { display: block; font-size: .78rem; color: var(--ink-3); margin-top: .1rem; }

.month__list {
  position: relative; list-style: none; margin: 0;
  padding: 0 0 clamp(1.5rem, 4vw, 2.6rem) clamp(1.5rem, 4vw, 2.6rem);
}
/* de stroomlijn: grijze bedding + inkt die meevloeit.
   --line-top en --line-h zet JS in pixels: van net boven de eerste knoop tot
   de ONDERKANT van de maandgroep, niet tot de laatste knoop. Zo houdt de lijn
   niet halverwege op en loopt ze van groep naar groep door. */
.month__list::before,
.month__list::after {
  content: ""; position: absolute; left: 0; width: 1px; z-index: 0;
  top: var(--line-top, 1.6rem);
  height: var(--line-h, calc(100% - 1.6rem));
}
/* De uiteinden vervagen, zodat de verticale lijn nergens hard tegen een
   horizontale scheidingslijn aan botst. De bedding vervaagt aan beide
   kanten, de inkt aan de bovenkant en aan haar eigen kop, zodat ze zacht
   vooruit kruipt in plaats van met een snijrand. */
.month__list::before {
  background: var(--rule);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18px, #000 calc(100% - 20px), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 18px, #000 calc(100% - 20px), transparent 100%);
}
.month__list::after {
  background: var(--ink);
  height: calc(var(--fill, 0) * var(--line-h, 0px));
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18px, #000 calc(100% - 14px), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 18px, #000 calc(100% - 14px), transparent 100%);
}
/* zonder JS is er geen meting, dus tonen we alleen de bedding */
html:not(.js-on) .month__list::after { display: none; }

/* ---------- de kaart (het item in de stroom) ---------- */
.entry {
  position: relative;
  display: grid; grid-template-columns: 1fr; gap: .55rem 0;
  padding: clamp(1.4rem, 3.4vw, 2.1rem) 0;
  border-bottom: 1px solid var(--rule);
}
.entry:last-child { border-bottom: 0; }
@media (min-width: 720px) {
  .entry {
    grid-template-columns: minmax(7.5rem, 9.5rem) minmax(0, 1fr) minmax(0, auto);
    column-gap: clamp(1.2rem, 3vw, 2.6rem);
    align-items: start;
  }
}
/* knoop op de lijn. Ligt altijd boven de lijn, nooit eronder. */
.entry::before {
  content: ""; position: absolute; z-index: 2; pointer-events: none;
  left: calc(clamp(1.5rem, 4vw, 2.6rem) * -1 - 4.5px);
  top: calc(clamp(1.4rem, 3.4vw, 2.1rem) + .55rem);
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--paper); border: 1.5px solid var(--rule-2);
}
@media (prefers-reduced-motion: no-preference) {
  .entry::before { transition: transform var(--med) var(--ease), background var(--med) var(--ease), border-color var(--med) var(--ease); }
}
/* is-reached zet JS op exact het moment dat de inkt de knoop bereikt */
.entry.is-reached::before { border-color: var(--cat, var(--ink)); background: var(--cat, var(--ink)); }
.entry[data-status="binnenkort"].is-reached::before { background: var(--paper); border-color: var(--cat, var(--ink)); }
.entry[data-status="voorbij"]::before { border-color: var(--rule-2); background: var(--paper-3); }
.entry[data-status="voorbij"].is-reached::before { border-color: var(--ink-3); background: var(--paper-3); }

/* datum als displaytype */
.entry__date {
  font-family: var(--ff-display); font-weight: 700;
  line-height: .92; letter-spacing: -.04em;
  color: var(--ink);
  display: flex; align-items: baseline; flex-wrap: wrap; gap: .25rem .5rem;
}
.entry__d {
  font-size: clamp(2.1rem, 1.2rem + 3.4vw, 3.5rem);
  font-stretch: 105%;
}
.entry__to { font-size: clamp(1.1rem, 2vw, 1.4rem); color: var(--ink-3); font-weight: 500; }
.entry__my {
  font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-2); font-weight: 600; width: 100%;
}
@media (prefers-reduced-motion: no-preference) {
  .entry__date { transition: transform var(--med) var(--ease); }
  .entry:hover .entry__date, .entry:focus-within .entry__date { transform: translateX(6px); }
  .entry:hover::before, .entry:focus-within::before { transform: scale(1.5); }
}
.entry__dur {
  display: inline-block; margin-top: .55rem;
  font-family: var(--ff-body); font-weight: 500; letter-spacing: .02em;
  font-size: .74rem; color: var(--ink-2);
  border: 1px solid var(--rule-2); border-radius: 999px; padding: .2rem .55rem;
}

.entry__body { min-width: 0; }
.entry__title {
  font-size: clamp(1.22rem, 1.05rem + .7vw, 1.65rem);
  font-weight: 600; letter-spacing: -.018em;
}
.entry__title a { text-decoration: none; }
.entry__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.entry__title a::before {
  content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%;
  background: var(--ink); transform: scaleX(0); transform-origin: right; z-index: 2;
}
@media (prefers-reduced-motion: no-preference) {
  .entry__title a::before { transition: transform var(--med) var(--ease); }
}
.entry:hover .entry__title a::before,
.entry__title a:focus-visible::before { transform: scaleX(1); transform-origin: left; }
.entry__title a:focus-visible { outline-offset: 4px; }

.entry__place {
  font-family: var(--ff-place); font-style: italic;
  font-size: clamp(1.02rem, .98rem + .3vw, 1.2rem);
  color: var(--ink-2); margin: .3rem 0 0;
}
.entry__who { margin: .5rem 0 0; font-size: .9rem; color: var(--ink-2); }
.entry__cat {
  display: inline-flex; align-items: center; gap: .4rem;
  margin: 0 0 .35rem; font-size: .72rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--cat-ink, var(--ink-2));
}
.entry__cat::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cat, var(--rule-2)); }
.entry[data-status="voorbij"] .entry__cat { color: var(--ink-3); }
.entry[data-status="voorbij"] .entry__cat::before { background: var(--rule-2); }
.entry__price { margin: .35rem 0 0; font-size: .95rem; font-weight: 600; }
.entry__price .alt { font-weight: 400; color: var(--ink-2); }
.entry__note { margin: .3rem 0 0; font-size: .84rem; color: var(--ink-3); }

.entry__status { display: flex; justify-content: flex-start; padding-top: .2rem; }
@media (min-width: 720px) { .entry__status { justify-content: flex-end; } }

/* status: woord + vorm, nooit kleur alleen */
.status {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600;
  white-space: nowrap;
}
.status svg { flex: none; }
.status--open { color: var(--ink); }
.status--binnenkort { color: var(--ink-2); }
.status--voorbij { color: var(--ink-3); font-weight: 500; }

/* uitklap via :target, puur CSS */
.entry__deep {
  display: grid; grid-template-rows: 0fr; overflow: hidden;
  color: var(--ink-2); font-size: .93rem;
}
@media (prefers-reduced-motion: no-preference) {
  .entry__deep { transition: grid-template-rows 420ms var(--ease); }
}
.entry__deep > div { min-height: 0; }
.entry:target .entry__deep { grid-template-rows: 1fr; }
.entry__deep p { margin: .9rem 0 0; max-width: 60ch; }
.entry__deep a { position: relative; z-index: 3; }
/* Het geopende item lag in een verloop dat halverwege ophield en aan de
   rand van de kolom hard afbrak. Nu is het één rustig vlak dat tot in de
   marge doorloopt, zodat je nergens een snijrand ziet. De knoop neemt de
   categoriekleur, niet het rood: rood betekent hier jongeren. */
.entry:target { background: transparent; }
.entry:target::after {
  content: ""; position: absolute; z-index: -1;
  top: 0; bottom: 0;
  left: calc((var(--gut) + clamp(1.5rem, 4vw, 2.6rem)) * -1);
  right: calc(var(--gut) * -1);
  background: var(--paper-2);
}
@media (min-width: 900px) {
  .entry:target::after { left: calc(var(--gut) * -1); }
}
.entry:target::before { background: var(--cat, var(--ink)); border-color: var(--cat, var(--ink)); }

.entry[data-status="voorbij"] .entry__date,
.entry[data-status="voorbij"] .entry__title { color: var(--ink-2); }

.entry[hidden] { display: none; }
.month[hidden] { display: none; }

/* ---------- secties ----------
   Eén ritme voor alles. Geen vlakken meer om secties te scheiden: hetzelfde
   crèmepapier van boven tot onder, met een haarlijn en lucht ertussen. */
.section { padding-block: var(--section-gap); }
main > .section { border-top: 1px solid var(--rule); }
/* de sectiekop: overal dezelfde maten en dezelfde marges */
/* De maat van de kop stond op de wrapper in ch van de BODY-letter, dus in
   pixels. Hoe groter de h2 werd, hoe meer regels ze brak: precies andersom
   dan gewenst. De maat hoort op de h2 zelf, in ch van haar eigen letter, zo
   houdt de kop op elke schermbreedte hetzelfde aantal tekens per regel. */
.section__head { margin-bottom: var(--head-gap); }
.section__head .eyebrow { margin-bottom: var(--head-inner); }
.section__head h2 {
  font-size: var(--section-head);
  font-stretch: 106%;
  max-width: 24ch;
}
.section__head p { margin-top: var(--head-inner); color: var(--ink-2); max-width: 52ch; }
/* een blok inhoud dat op een kop volgt, of op een ander blok */
.section__body { margin-top: var(--block-gap); }
.section__body:first-child { margin-top: 0; }

/* vier sporen */
/* Vier sporen, 2 x 2 vanaf 700 px, nooit vier naast elkaar: ze staan nu in
   hetzelfde grid als de rest van de pagina en niet meer over de volle breedte,
   dus vier kolommen zouden veel te smal worden. */
.tracks {
  display: grid; gap: 1px; background: var(--rule);
  border: 1px solid var(--rule); border-radius: 6px; overflow: hidden;
}
@media (min-width: 700px) { .tracks { grid-template-columns: 1fr 1fr; } }
.track {
  position: relative; background: var(--paper);
  padding: clamp(1.4rem, 3vw, 2rem) clamp(1.2rem, 2.4vw, 1.6rem) clamp(1.8rem, 4vw, 2.4rem);
  display: flex; flex-direction: column; gap: .7rem;
}
@media (prefers-reduced-motion: no-preference) {
  .track { transition: background var(--med) var(--ease); }
}
.track:hover { background: var(--paper-2); }
.track__icon { color: var(--ink); }
.track h3 { font-size: 1.2rem; font-weight: 600; letter-spacing: -.01em; }
.track h3 a { text-decoration: none; }
.track h3 a::after { content: ""; position: absolute; inset: 0; }
.track p { font-size: .93rem; color: var(--ink-2); margin: 0; }
.track__go {
  margin-top: auto; padding-top: .8rem;
  font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-2); display: inline-flex; align-items: center; gap: .5rem;
}
@media (prefers-reduced-motion: no-preference) {
  .track__go svg { transition: transform var(--med) var(--ease); }
  .track:hover .track__go svg { transform: translateX(5px); }
}
/* de streng bovenaan de kaart, in de kleur van het spoor */
.track__strand { position: absolute; left: 0; top: 0; width: 100%; height: 5px; background: var(--cat, var(--rule-2)); }
.track p.track__cat {
  font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--cat-ink, var(--ink-2)); margin: 0;
}
.track__icon { color: var(--cat-ink, var(--ink)); }
/* een tweede link in een kaart moet boven de kaartklik liggen */
.track__more { position: relative; z-index: 2; font-size: .88rem; color: var(--ink-2); margin: 0; }
.track__more a { text-decoration: underline; text-underline-offset: .2em; }
.track__more a:hover { color: var(--ink); }

/* ---------- startpagina: wat we doen ----------
   Vier gelijke blokken, 2 x 2 op breed scherm, één kolom op de telefoon.
   Elk blok: een streng in de categoriekleur, het label in dezelfde kleur
   (donkere variant, want het zijn woorden), de titel, één regel, één regel. */
.offers {
  display: grid; gap: 1px; background: var(--rule);
  border: 1px solid var(--rule); border-radius: 6px; overflow: hidden;
}
@media (min-width: 720px) { .offers { grid-template-columns: 1fr 1fr; } }
.offer {
  position: relative;
  background: var(--paper);
  padding: clamp(1.5rem, 3vw, 2.1rem) clamp(1.15rem, 2.4vw, 1.8rem) clamp(1.6rem, 3.4vw, 2.3rem);
  display: flex; flex-direction: column; gap: .55rem;
}
.offer__strand { position: absolute; left: 0; top: 0; width: 100%; height: 5px; background: var(--cat, var(--rule-2)); }
.offer p.offer__cat {
  font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--cat-ink, var(--ink-2)); margin: 0;
}
.offer h3 { font-size: clamp(1.15rem, 1.05rem + .5vw, 1.45rem); font-weight: 600; letter-spacing: -.015em; }
.offer p { margin: 0; font-size: .95rem; color: var(--ink-2); max-width: 44ch; }
.offer p.offer__lead { color: var(--ink); }

/* ---------- startpagina: hoe we werken ---------- */
.method { list-style: none; margin: 0; padding: 0; }
.method li {
  border-top: 1px solid var(--rule);
  padding: 1rem 0 1rem 2.4rem; position: relative;
  max-width: 62ch;
}
/* geen sluitlijn: de lijst eindigt gewoon, de sectie zorgt voor de scheiding */
.method li::before {
  content: ""; position: absolute; left: .55rem; top: 1.55rem;
  width: 8px; height: 8px; border-radius: 50%;
  border: 1.5px solid var(--ink); background: var(--paper);
}
.method b { font-weight: 600; }

details.method-more { margin-top: var(--block-gap); max-width: 62ch; }
details.method-more > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: .6rem;
  min-height: 44px; font-weight: 600; font-size: .95rem;
}
details.method-more > summary::-webkit-details-marker { display: none; }
details.method-more > summary::after {
  content: ""; width: 9px; height: 9px; flex: none;
  border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink);
  transform: rotate(45deg) translate(-2px, -2px);
}
details.method-more[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
details.method-more p { margin: .2rem 0 1.2rem; color: var(--ink-2); }
@media (prefers-reduced-motion: no-preference) {
  details.method-more > summary::after { transition: transform var(--med) var(--ease); }
  /* zacht openvouwen waar de browser het aankan, elders gewoon open */
  @supports (interpolate-size: allow-keywords) {
    :root { interpolate-size: allow-keywords; }
    details.method-more::details-content {
      block-size: 0; overflow: hidden;
      transition: block-size 380ms var(--ease), content-visibility 380ms allow-discrete;
    }
    details.method-more[open]::details-content { block-size: auto; }
  }
}

/* ---------- startpagina: de vertrouwensregel ---------- */
.trustline {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1px; background: var(--rule);
  border: 1px solid var(--rule); border-radius: 6px; overflow: hidden;
}
@media (min-width: 700px) { .trustline { grid-template-columns: repeat(3, 1fr); } }
.trustline li { background: var(--paper); padding: 1rem 1.1rem; }
.trustline b {
  display: block; font-family: var(--ff-display); font-weight: 700;
  font-size: 1.35rem; letter-spacing: -.02em;
}
.trustline span { display: block; margin-top: .25rem; font-size: .88rem; color: var(--ink-2); }

/* ---------- startpagina: de afsluitende oproep ---------- */
.nextline {
  margin-top: var(--block-gap);
  font-size: .95rem; color: var(--ink-2);
}
.nextline a { font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: .22em; }

/* ---------- sociale kanalen in de voet ---------- */
.socials { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 1.1rem 0 0; padding: 0; }
.socials a {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 44px; padding: .5rem .85rem .5rem .7rem;
  border: 1px solid rgba(234,237,232,.28); border-radius: 999px;
  text-decoration: none; font-size: .84rem;
}
@media (prefers-reduced-motion: no-preference) {
  .socials a { transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease); }
}
.socials a:hover { border-color: #EAEDE8; background: rgba(234,237,232,.08); }
.socials svg { flex: none; }

/* geld en vertrouwen */
.trust { display: grid; gap: clamp(1.6rem, 4vw, 3rem); }
@media (min-width: 900px) { .trust { grid-template-columns: 1.05fr .95fr; } }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.steps li {
  counter-increment: s; position: relative;
  padding: 1rem 0 1rem 3.2rem; border-top: 1px solid var(--rule);
}
/* idem: geen sluitlijn onder de laatste stap */
/* De stapnummers staan in inkt en krijgen een streng eronder. De vier
   strengen tellen hier gewoon mee als 1, 2, 3, 4; ze zijn hier GEEN
   categoriecode, want een stap hoort bij geen enkel spoor in het bijzonder.
   Daarom een eigen variabele, los van --cat. */
.steps li::before {
  content: counter(s); position: absolute; left: 0; top: 1rem;
  font-family: var(--ff-display); font-weight: 700; font-size: 1.5rem;
  color: var(--ink); line-height: 1;
  padding-bottom: .22rem;
  border-bottom: 3px solid var(--num, var(--rule-2));
}
.steps li:nth-child(1) { --num: var(--brand-cyan); }
.steps li:nth-child(2) { --num: var(--brand-olive); }
.steps li:nth-child(3) { --num: var(--brand-red); }
.steps li:nth-child(4) { --num: var(--brand-magenta); }
.steps b { font-weight: 600; }
.factsheet { list-style: none; margin: 0; padding: 0; }
.factsheet li {
  display: flex; justify-content: space-between; gap: 1.5rem;
  padding: .75rem 0; border-bottom: 1px solid var(--rule); font-size: .95rem;
}
.factsheet li:last-child { border-bottom: 0; }
.factsheet span:first-child { color: var(--ink-2); }
.factsheet span:last-child { font-weight: 600; text-align: right; }

/* knoppen */
.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  min-height: 48px; padding: .85rem 1.5rem;
  background: var(--ink); color: var(--paper); text-decoration: none;
  border: 1px solid var(--ink); border-radius: 999px;
  font-weight: 600; font-size: .96rem; letter-spacing: .01em;
}
@media (prefers-reduced-motion: no-preference) {
  .btn { transition: transform var(--med) var(--ease), background var(--med) var(--ease); }
  .btn:hover { transform: translateY(-2px) scale(1.015); background: #000; }
}
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--paper-2); }
.btn svg { flex: none; }
.btn[aria-disabled="true"] {
  background: var(--paper-2); color: var(--ink-2); border-color: var(--rule-2);
  cursor: not-allowed; pointer-events: none;
}

.linklist { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.linklist a {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 40px; padding: .4rem 0; text-decoration: none; color: var(--ink-2);
}
.linklist a:hover { color: var(--ink); }
.linklist a span { text-decoration: underline; text-underline-offset: .22em; text-decoration-thickness: 1px; }

/* ---------- detailpagina ---------- */
.detail-hero { padding-block: var(--hero-top) var(--block-gap); }
.detail-hero h1 {
  font-size: clamp(2.2rem, 1.4rem + 4.4vw, 4.6rem);
  font-stretch: 108%; max-width: 15ch;
}
/* "Avonturenmakers" is één lang woord: op de telefoon moet het binnen de
   tekstkolom blijven, niet tot tegen de schermrand lopen */
@media (max-width: 560px) {
  .detail-hero h1 {
    font-size: clamp(1.6rem, 8.6vw, 2.6rem);
    font-weight: 800; font-stretch: 100%;
    letter-spacing: -.025em; line-height: 1.06; max-width: none;
  }
}
.bigdate {
  font-family: var(--ff-display); font-weight: 700;
  font-size: clamp(2.6rem, 1.4rem + 6.2vw, 6.5rem);
  font-stretch: 112%; letter-spacing: -.045em; line-height: .9;
  margin: clamp(1rem, 3vw, 1.8rem) 0 0;
}
.bigdate .to { color: var(--ink); }
.bigdate .yr { display: block; font-size: .26em; letter-spacing: .2em; color: var(--ink-2); margin-top: .8rem; }

.detail-grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; }
@media (min-width: 980px) { .detail-grid { grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); } }
.booking {
  border: 1px solid var(--ink); border-radius: 6px; padding: clamp(1.2rem, 3vw, 1.7rem);
  background: var(--paper);
}
@media (min-width: 980px) { .booking { position: sticky; top: calc(var(--stack) + 24px); } }
.booking h2 { font-size: 1.25rem; }
.booking .price { font-family: var(--ff-display); font-size: 2rem; font-weight: 700; letter-spacing: -.03em; margin-top: .7rem; }
.booking .price small { display: block; font-size: .95rem; font-weight: 500; color: var(--ink-2); letter-spacing: 0; margin-top: .3rem; }
.booking .btn { width: 100%; justify-content: center; margin-top: 1.1rem; }
.booking__pay { font-size: .88rem; color: var(--ink-2); margin-top: 1rem; }

.prose h2 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem); margin-top: var(--section-gap); }
.prose h2:first-child { margin-top: 0; }
.prose p { margin-top: .9rem; max-width: 62ch; color: var(--ink-2); }
.prose p.lead { color: var(--ink); font-size: clamp(1.08rem, 1rem + .5vw, 1.3rem); }

details.pract {
  border-top: 1px solid var(--rule);
}
details.pract:last-of-type { border-bottom: 1px solid var(--rule); }
details.pract > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.05rem 0; min-height: 48px;
  font-weight: 600; font-size: 1.02rem;
}
details.pract > summary::-webkit-details-marker { display: none; }
details.pract > summary .plus { position: relative; width: 14px; height: 14px; flex: none; }
details.pract > summary .plus::before,
details.pract > summary .plus::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  background: var(--ink);
}
details.pract > summary .plus::before { width: 14px; height: 1.5px; }
details.pract > summary .plus::after { width: 1.5px; height: 14px; }
@media (prefers-reduced-motion: no-preference) {
  details.pract > summary .plus::after { transition: transform var(--med) var(--ease); }
}
details.pract[open] > summary .plus::after { transform: scaleY(0); }
details.pract > div { padding-bottom: 1.2rem; color: var(--ink-2); max-width: 62ch; }
details.pract ul { margin: 0; padding-left: 1.1rem; }
details.pract li { margin-bottom: .35rem; }

.facts {
  display: grid; gap: 1px; background: var(--rule);
  border: 1px solid var(--rule); border-radius: 6px; overflow: hidden;
  margin-top: var(--block-gap);
}
@media (min-width: 620px) { .facts { grid-template-columns: 1fr 1fr; } }
.facts > div { background: var(--paper); padding: 1rem 1.1rem; }
.facts dt { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.facts dd { margin: .35rem 0 0; font-size: 1.05rem; font-weight: 600; }
.facts dd small { display: block; font-weight: 400; font-size: .88rem; color: var(--ink-2); margin-top: .2rem; }

/* mobiele vaste balk */
.mobilebar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
  background: rgba(245,244,239,.96);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-top: 1px solid var(--rule-2);
  padding: .7rem var(--gut) calc(.7rem + env(safe-area-inset-bottom));
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.mobilebar .p { font-size: .88rem; font-weight: 600; }
.mobilebar .p small { display: block; font-weight: 400; color: var(--ink-2); font-size: .78rem; }
.mobilebar .btn { min-height: 44px; padding: .6rem 1.1rem; font-size: .9rem; }
@media (min-width: 980px) { .mobilebar { display: none; } }
body.has-mobilebar { padding-bottom: 84px; }
@media (min-width: 980px) { body.has-mobilebar { padding-bottom: 0; } }

/* ---------- footer ---------- */
.site-footer {
  background: var(--forest); color: #EAEDE8;
  padding-block: clamp(2.6rem, 7vw, 4.5rem) clamp(1.6rem, 4vw, 2.4rem);
  margin-top: clamp(2rem, 6vw, 4rem);
}
.site-footer a { color: #EAEDE8; }
.site-footer__grid { display: grid; gap: clamp(1.8rem, 4vw, 3rem); }
@media (min-width: 760px) { .site-footer__grid { grid-template-columns: 1.2fr 1fr 1fr; } }
.site-footer h2 { font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: #9FB3A6; font-weight: 600; margin-bottom: .9rem; }
.site-footer p { color: #C8D2CB; font-size: .95rem; }
.site-footer .linklist a { color: #EAEDE8; }
.site-footer .linklist a:hover { color: #fff; }
.site-footer address { font-style: normal; color: #C8D2CB; font-size: .95rem; line-height: 1.7; }
.site-footer .brandmark { width: 132px; height: auto; margin-bottom: 1.2rem; }
.footer-strands { display: flex; gap: 6px; margin-bottom: 1.4rem; }
.footer-strands span { display: block; width: 40px; height: 5px; border-radius: 2px; }
.legal {
  margin-top: clamp(2rem, 5vw, 3rem); padding-top: 1.2rem;
  border-top: 1px solid rgba(234,237,232,.18);
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
  font-size: .82rem; color: #9FB3A6; hyphens: manual;
}
.site-footer :where(a):focus-visible { outline-color: #EAEDE8; }

/* ---------- reveals ----------
   Regel: een sectie komt in haar geheel binnen, of helemaal niet. De sectie
   zelf is de waarnemer (.reveal); de kop en de inhoud staggeren daarbinnen.
   Onder prefers-reduced-motion beweegt er niets, en het vangnet in script.js
   zet .is-in op alles wat de viewport al voorbij is. */
@media (prefers-reduced-motion: no-preference) {
  html.js-on .reveal :is(.rv, .section__head > *) {
    opacity: 0; transform: translateY(14px);
  }
  html.js-on .reveal.is-in :is(.rv, .section__head > *) {
    opacity: 1; transform: none;
    transition: opacity 620ms var(--ease) var(--rd, 0ms), transform 620ms var(--ease) var(--rd, 0ms);
  }
  /* de kop in drie zachte stappen */
  html.js-on .reveal .section__head > *:nth-child(1) { --rd: 0ms; }
  html.js-on .reveal .section__head > *:nth-child(2) { --rd: 70ms; }
  html.js-on .reveal .section__head > *:nth-child(3) { --rd: 140ms; }
  /* de inhoud volgt op de kop, in de volgorde waarin ze staat */
  html.js-on .reveal .rv { --rd: 200ms; }
  html.js-on .reveal .rv + .rv { --rd: 270ms; }
  html.js-on .reveal .rv + .rv + .rv { --rd: 340ms; }

  /* de hero staat boven de vouw: die animeert op load, niet op scroll,
     zodat er niets onzichtbaar kan blijven staan */
  html.js-on :is(.hero, .detail-hero) :is(.eyebrow, .hero__lede, .clip, .cta-row, .today, .bigdate, .detail-hero__status) {
    opacity: 0; transform: translateY(14px);
    animation: rise 700ms var(--ease) forwards;
  }
  html.js-on :is(.hero, .detail-hero) .eyebrow { animation-delay: 40ms; }
  html.js-on :is(.hero, .detail-hero) :is(.hero__lede, .bigdate) { animation-delay: 420ms; }
  html.js-on :is(.hero, .detail-hero) :is(.clip, .today, .detail-hero__status) { animation-delay: 540ms; }
  html.js-on :is(.hero, .detail-hero) .cta-row { animation-delay: 640ms; }
  html.is-intro :is(.hero, .detail-hero) * { animation-play-state: paused; }

  html.js-on .entry:not(.is-in) .entry__body,
  html.js-on .entry:not(.is-in) .entry__date,
  html.js-on .entry:not(.is-in) .entry__status { opacity: 0; transform: translateY(10px); }
  .entry.is-in .entry__body, .entry.is-in .entry__date, .entry.is-in .entry__status {
    opacity: 1; transform: none;
    transition: opacity 560ms var(--ease), transform 560ms var(--ease);
  }
  .entry.is-in .entry__body { transition-delay: 60ms; }
  .entry.is-in .entry__status { transition-delay: 110ms; }
}

/* ---------- view transitions ---------- */
@view-transition { navigation: auto; }

/* ---------- print ---------- */
@media print {
  .site-header, .seasons, .mobilebar, .clip, .clipband { display: none; }
  body { background: #fff; }
}

/* ---------- prototypenoot: eerlijk zeggen wat we nog niet weten ---------- */
.note-proto {
  font-size: .84rem; color: var(--ink-3);
  border-left: 2px solid var(--rule-2); padding-left: .85rem;
  margin-top: 1rem; max-width: 54ch;
}
.stub {
  border: 1px dashed var(--rule-2); border-radius: 6px;
  padding: clamp(1.2rem, 3vw, 1.8rem); background: transparent;
  margin-top: var(--block-gap);
}
.stub h2 { font-size: 1.3rem; }
.stub p { margin-top: .8rem; color: var(--ink-2); max-width: 58ch; }

.btn:disabled { background: var(--paper-2); color: var(--ink-2); border-color: var(--rule-2); cursor: not-allowed; font-family: inherit; }

/* ==========================================================================
   LAGEN. Variant B van ronde v2: dezelfde rivier, maar de tekstblokken zijn
   vervangen door volle banden over de hele breedte, met duidelijke rijen.
   Alles hieronder staat NA de basis, dus het wint waar het overlapt.
   Kleurfysica: op creme dragen alleen rood, magenta en de donkere varianten
   van olijf en cyaan tekst; op de bosgrond #1E2A23 dragen cyaan en olijf,
   en krijgen rood en magenta een lichte variant. Berekend, niet geschat.
   ========================================================================== */

:root {
  /* woordkleuren op een donkere band, alle vier boven 6:1 op #1E2A23 */
  --type-vorming-dark:        #B3B200; /* 6.5:1 */
  --type-internationaal-dark: #B3B200;
  --type-school-dark:         #44B4D4; /* 6.1:1 */
  --type-kamp-dark:           #F2A08C; /* 7.3:1 */
  --type-jongeren-dark:       #F2A08C;
  --type-vrijwilligers-dark:  #F09BE8; /* 7.5:1 */

  --band-tint: #ECEBDD;   /* het pale vlak van de geldband */
  --on-dark:   #EAEDE8;   /* 12.6:1 op bosgrond */
  --on-dark-2: #C8D2CB;   /*  9.6:1 op bosgrond */
  --on-dark-3: #9FB3A6;   /*  5.4:1 op bosgrond */
}
.tint-vorming        { --cat-dark: var(--type-vorming-dark); }
.tint-kamp           { --cat-dark: var(--type-kamp-dark); }
.tint-jongeren       { --cat-dark: var(--type-jongeren-dark); }
.tint-school         { --cat-dark: var(--type-school-dark); }
.tint-vrijwilligers  { --cat-dark: var(--type-vrijwilligers-dark); }
.tint-internationaal { --cat-dark: var(--type-internationaal-dark); }

/* ---------- de band ----------
   Een component. De grond wisselt, het ritme niet: elke band gebruikt
   --section-gap, elke kop gebruikt .section__head. Een band die van grond
   wisselt, wisselt ook haar tokens, zodat alles binnenin vanzelf klopt. */
.band { padding-block: var(--section-gap); }
main > .band { border-top: 0; }
.band--paper  { background: var(--paper); }
.band--paper + .band--paper { border-top: 1px solid var(--rule); }
.band--tint {
  background: var(--band-tint);
  --paper: #ECEBDD; --rule: #D8D5C2; --rule-2: #C4C0A9;
}
.band--forest {
  background: var(--forest); color: var(--on-dark);
  --paper: #1E2A23; --paper-2: #26332C; --paper-3: #26332C;
  --ink: var(--on-dark); --ink-2: var(--on-dark-2); --ink-3: var(--on-dark-3);
  --rule: rgba(234,237,232,.22); --rule-2: rgba(234,237,232,.34);
}
.band--red {
  background: var(--brand-red); color: #fff;
  --paper: #C31428; --paper-2: #B01224; --paper-3: #B01224;
  --ink: #fff; --ink-2: #FFE4DE; --ink-3: #FFE4DE;   /* 4.99:1 op rood */
  --rule: rgba(255,255,255,.32); --rule-2: rgba(255,255,255,.5);
}
.band--forest a, .band--red a { color: inherit; }

/* de koppen in een band mogen groter dan in v1, dat is de hele variant */
.band .section__head h2 { font-size: clamp(2rem, 1.35rem + 3vw, 3.5rem); max-width: 18ch; }
.band .section__head p { font-size: clamp(1rem, .96rem + .3vw, 1.15rem); }

/* ---------- rijen: het werkpaard van deze variant ----------
   Een rij is: een strengstip, een korte uitspraak, en de uitleg ernaast.
   Onder 860 px staan uitspraak en uitleg onder elkaar. */
.lagen { list-style: none; margin: 0; padding: 0; }
.laag {
  position: relative;
  display: grid; gap: .35rem 0;
  padding: clamp(1.1rem, 2.4vw, 1.5rem) 0 clamp(1.1rem, 2.4vw, 1.5rem) 1.7rem;
  border-top: 1px solid var(--rule);
  hyphens: manual;
}
.lagen > .laag:last-child { border-bottom: 1px solid var(--rule); }
.laag::before {
  content: ""; position: absolute; left: 0; top: calc(clamp(1.1rem, 2.4vw, 1.5rem) + .42em);
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--cat, var(--rule-2));
}
@media (min-width: 860px) {
  .laag {
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
    column-gap: clamp(1.6rem, 4vw, 3.5rem); align-items: baseline;
    padding-left: 2rem;
  }
}
.prose .laag { grid-template-columns: minmax(0, 1fr); padding-left: 1.7rem; }
.laag__lead {
  margin: 0; font-family: var(--ff-display); font-weight: 700;
  font-size: clamp(1.15rem, 1.02rem + .7vw, 1.55rem);
  letter-spacing: -.02em; line-height: 1.1; color: var(--ink);
}
.laag__lead a { text-decoration: none; }
.laag__lead a::after { content: ""; position: absolute; inset: 0; }
.laag__lead a:hover { text-decoration: underline; text-underline-offset: .18em; }
.laag__txt { margin: 0; color: var(--ink-2); font-size: .98rem; max-width: 60ch; }
.laag__txt + .laag__txt { margin-top: .5rem; }
.laag__cat {
  display: block; margin: 0 0 .3rem;
  font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--cat-ink, var(--ink-2));
}
.band--forest .laag__cat { color: var(--cat-dark, var(--on-dark-2)); }
.band--red .laag__cat { color: #FFE4DE; }
/* De vier sporenkleuren betekenen iets (jongeren, vormingen, scholen,
   vrijwilligers). In de methodiekband staat geen spoor, dus daar krijgt de
   knoop één rustige kleur in plaats van een kleurcode die niets zegt. */
#hoe .laag::before { background: var(--on-dark-2, #C8D2CB); }
.laag__go {
  display: inline-flex; align-items: center; gap: .45rem; margin-top: .55rem;
  font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2);
}
@media (prefers-reduced-motion: no-preference) {
  .laag__go svg { transition: transform var(--med) var(--ease); }
  .laag:hover .laag__go svg { transform: translateX(5px); }
}

/* ---------- hero: echte knoppen, op elke schermbreedte ---------- */
.cta-row {
  display: flex; flex-wrap: wrap; gap: .7rem;
  margin-top: clamp(1.3rem, 3vw, 1.9rem);
  hyphens: manual;
}
.cta-row .btn { flex: 1 1 auto; justify-content: center; }
@media (min-width: 620px) { .cta-row .btn { flex: 0 0 auto; } }
.hero .clip--hero { margin-top: clamp(1.4rem, 3.6vw, 2.4rem); }

/* ---------- binnenkort: de eerstvolgende programmas als rijen ---------- */
.laag__when {
  margin: 0 0 .25rem; font-family: var(--ff-display); font-weight: 700;
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.2rem); letter-spacing: -.03em; line-height: 1;
  color: var(--ink);
}
.laag__meta { margin: .35rem 0 0; font-size: .9rem; color: var(--ink-2); max-width: 60ch; }
.laag__prijs { margin: .3rem 0 0; font-size: .95rem; font-weight: 600; color: var(--ink); }
.laag__prijs .alt { font-weight: 400; color: var(--ink-2); }

/* ---------- grote getallen op de bosband ---------- */
.trustline--groot { border: 0; background: transparent; gap: 0; border-radius: 0; }
.trustline--groot li {
  background: transparent; padding: 1.2rem 0; border-top: 1px solid var(--rule);
}
@media (min-width: 700px) {
  .trustline--groot { grid-template-columns: repeat(3, 1fr); column-gap: clamp(1.5rem, 4vw, 3rem); }
  .trustline--groot li { padding-right: 1rem; }
}
.trustline--groot b {
  font-size: clamp(2.4rem, 1.6rem + 3.4vw, 4rem); letter-spacing: -.035em;
  font-stretch: 110%; line-height: 1;
}
.trustline--groot span { margin-top: .6rem; font-size: .95rem; }

/* ---------- het citaat ---------- */
.quote { margin: var(--block-gap) 0 0; max-width: 46ch; }
.quote blockquote {
  margin: 0; font-family: var(--ff-place); font-style: italic;
  font-size: clamp(1.25rem, 1.05rem + 1.1vw, 1.85rem); line-height: 1.28; color: var(--ink);
}
.quote figcaption { margin-top: .9rem; font-size: .85rem; color: var(--ink-2); }

/* ---------- de feature: Avonturenmakers op een volle rode band ---------- */
.feature { display: grid; gap: clamp(1.6rem, 4vw, 3rem); align-items: start; }
@media (min-width: 940px) { .feature { grid-template-columns: 1.1fr .9fr; } }
.feature h2 {
  font-size: clamp(2.1rem, 1.3rem + 3.6vw, 4rem); letter-spacing: -.035em;
  font-stretch: 106%; max-width: 14ch; hyphens: manual;
}
.feature__kicker {
  margin: 0 0 var(--head-inner); font-size: .72rem; letter-spacing: .2em;
  text-transform: uppercase; color: #FFE4DE;
}
.feature__lede { margin-top: var(--head-inner); font-size: clamp(1.05rem, 1rem + .5vw, 1.3rem); color: #fff; max-width: 34ch; }
.feature__facts { list-style: none; margin: 0; padding: 0; }
.feature__facts li {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem 1.2rem;
  padding: .8rem 0; border-top: 1px solid var(--rule); hyphens: manual;
}
.feature__facts li:last-child { border-bottom: 1px solid var(--rule); }
.feature__facts dfn { font-style: normal; color: #FFE4DE; font-size: .9rem; }
.feature__facts b { font-weight: 700; text-align: right; }
.feature__price {
  font-family: var(--ff-display); font-weight: 700; letter-spacing: -.03em;
  font-size: clamp(2.2rem, 1.5rem + 3vw, 3.4rem); line-height: 1; margin: 1.2rem 0 0;
}
.feature__price small { display: block; font-size: .28em; font-weight: 600; letter-spacing: 0; margin-top: .6rem; color: #fff; }
.btn--onred { background: #fff; color: var(--brand-red); border-color: #fff; }
.btn--onred:hover { background: #fff; color: #A01020; }
.btn--onwit { background: transparent; color: #fff; border-color: #fff; }
.btn--onwit:hover { background: rgba(255,255,255,.14); color: #fff; }

/* ---------- de tarieventabel: een echte tabel ---------- */
.tarieven {
  width: 100%; border-collapse: collapse; margin: 0;
  font-variant-numeric: tabular-nums; hyphens: manual;
}
.tarieven caption { text-align: left; font-size: .9rem; color: var(--ink-2); margin-bottom: .9rem; }
.tarieven th, .tarieven td { text-align: left; vertical-align: baseline; }
@media (min-width: 1100px) { .tarieven { max-width: 62rem; } }
.tarieven thead th {
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700;
  color: var(--ink-2); padding: 0 1rem .7rem 0; border-bottom: 2px solid var(--rule-2);
}
.tarieven tbody td { padding: .95rem 1rem .95rem 0; border-bottom: 1px solid var(--rule); }
.tarieven tbody tr:last-child td { border-bottom: 2px solid var(--rule-2); }
.tarieven .lab { color: var(--ink); font-weight: 600; }
.tarieven .lab small { display: block; font-weight: 400; font-size: .85rem; color: var(--ink-2); margin-top: .2rem; }
.tarieven .num {
  font-family: var(--ff-display); font-weight: 700; letter-spacing: -.025em;
  font-size: clamp(1.15rem, 1rem + .7vw, 1.5rem); white-space: nowrap; color: var(--ink);
}
.tarieven .alt { font-weight: 600; color: var(--ink); }
.tarieven .alt small { display: block; font-weight: 400; font-size: .85rem; color: var(--ink-2); margin-top: .2rem; }
.tarieven .geen { font-weight: 400; color: var(--ink-2); font-size: .9rem; }
@media (min-width: 720px) {
  .tarieven th:nth-child(2), .tarieven td:nth-child(2),
  .tarieven th:nth-child(3), .tarieven td:nth-child(3) { width: 12rem; padding-right: 0; }
}
/* Onder 720 px wordt elke rij een blok: het label op een eigen regel over de
   volle breedte, de twee prijzen daaronder naast elkaar. Zo staat er nooit
   een woord als "vrijwilligers" in een kolom van 80 px. */
@media (max-width: 719px) {
  .tarieven thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tarieven tbody tr {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto);
    column-gap: 1rem; padding: .95rem 0; border-bottom: 1px solid var(--rule);
  }
  .tarieven tbody tr:last-child { border-bottom: 2px solid var(--rule-2); }
  .tarieven tbody tr:last-child td { border-bottom: 0; }
  .tarieven tbody td { display: block; padding: 0; border: 0; }
  .tarieven .lab { grid-column: 1 / -1; margin-bottom: .45rem; }
  .tarieven .alt { text-align: right; }
}

/* de vier stappen als een liggend spoor */
.rail {
  list-style: none; margin: var(--block-gap) 0 0; padding: 0; counter-reset: r;
  display: grid; gap: 1px; background: var(--rule);
  border: 1px solid var(--rule); border-radius: 6px; overflow: hidden;
  hyphens: manual;
}
@media (min-width: 880px) { .rail { grid-template-columns: repeat(4, 1fr); } }
.rail li { background: var(--paper); padding: 1.1rem 1.1rem 1.3rem; counter-increment: r; }
.rail li::before {
  content: counter(r); display: inline-block;
  font-family: var(--ff-display); font-weight: 700; font-size: 1.7rem; line-height: 1;
  color: var(--ink); padding-bottom: .22rem; margin-bottom: .6rem;
  border-bottom: 3px solid var(--num, var(--rule-2));
}
.rail b { display: block; font-weight: 700; font-size: 1.02rem; letter-spacing: -.01em; }
.rail span { display: block; margin-top: .3rem; font-size: .92rem; color: var(--ink-2); }

.geldlijn {
  margin: var(--block-gap) 0 0; padding: 1rem 1.1rem;
  border: 1px solid var(--rule-2); border-radius: 6px;
  font-weight: 600; max-width: 46rem;
}
.geldlijn span { display: block; font-weight: 400; color: var(--ink-2); font-size: .93rem; margin-top: .3rem; }

/* ---------- niets meer dichtgeklapt ----------
   Alle details-elementen zijn uit de drie paginas gehaald. Wat op de agenda
   in een uitklapper zat, staat nu gewoon open. */
.entry__deep { display: block; grid-template-rows: none; overflow: visible; }
.entry__deep p { margin: .7rem 0 0; }

/* ---------- de voet ---------- */
.footer-top {
  display: grid; gap: clamp(1.2rem, 3vw, 2rem); align-items: end;
  padding-bottom: clamp(1.8rem, 4vw, 2.8rem);
  border-bottom: 1px solid rgba(234,237,232,.18);
  margin-bottom: clamp(1.8rem, 4vw, 2.8rem);
}
@media (min-width: 860px) { .footer-top { grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(2rem, 5vw, 4rem); } }
.footer-logo {
  width: min(340px, 62vw); height: auto;
  filter: brightness(0) invert(1);
}
.footer-claim {
  margin: 0; font-family: var(--ff-place); font-style: italic;
  font-size: clamp(1.2rem, 1rem + 1vw, 1.7rem); line-height: 1.3;
  max-width: 26ch;
}
.site-footer .footer-claim { color: #EAEDE8; }
.footer-official {
  margin: clamp(2.4rem, 5vw, 3.2rem) 0 0;
  display: table; background: var(--paper); border-radius: 6px;
  padding: 20px 24px;
}
.footer-official img { display: block; height: 160px; width: 411px; max-width: 100%; }
/* Op de telefoon loopt de crèmekleurige tegel van rand tot rand, zodat het
   merk van de Vlaamse overheid boven de ondergrens van 120 px blijft. */
@media (max-width: 620px) {
  .footer-official {
    display: block; margin-inline: calc(var(--gut) * -1);
    border-radius: 0; padding: 14px 12px;
  }
  .footer-official img { width: 100%; height: auto; max-width: 411px; }
}
.footer-official figcaption { margin: .6rem 0 0; font-size: .78rem; color: #55605C; max-width: 32ch; }
.site-footer .org { font-size: .92rem; color: #C8D2CB; max-width: 60ch; }

/* ---------- kleine dingen die overal gelijk moeten blijven ---------- */
h1, h2, h3, .btn, .nav a, .chip, .month__name, .entry__title { hyphens: manual; }
.band .section__head h2, .laag__lead, .feature h2 { text-wrap: balance; }

/* ---------- laatste afstellingen van de lagen ---------- */
/* De filmstroken lagen in v1 met een negatieve marge in de sectie-ruimte.
   Nu de secties een eigen grond hebben, zou dat over een gekleurde band
   heen schuiven. Dus: geen negatieve marge meer, wel hetzelfde ritme. */
.clipband { margin-block: 0; padding-block: clamp(2rem, 4.5vw, 3.4rem); background: var(--paper); }
.feature__facts .k { color: #FFE4DE; font-size: .9rem; }
.detail-hero .cta-row { margin-top: clamp(1.4rem, 3vw, 2rem); }
/* de knoppen op een pale of donkere band volgen de grond van die band */
.band--tint .btn--ghost:hover { background: #E3E1D2; }
.band--forest .btn { background: #EAEDE8; color: #14181A; border-color: #EAEDE8; }
.band--forest .btn:hover { background: #fff; color: #14181A; }
.band--forest .btn--ghost { background: transparent; color: #EAEDE8; border-color: #EAEDE8; }
.band--forest .btn--ghost:hover { background: rgba(234,237,232,.14); color: #fff; }
.band--forest :where(a, button):focus-visible { outline-color: #EAEDE8; }
.band--red :where(a, button):focus-visible { outline-color: #fff; }
/* op de agenda staat de open tekst van een item niet meer in een uitklapper */
.entry__deep > div { display: block; }

/* --ink-3 uit v1 haalde 3.46:1 op het papier, onder AA. Herberekend:
   #5F6762 geeft 5.28:1 op creme #F5F4EF en 4.85:1 op de pale band #ECEBDD.
   Op een donkere band blijft de overschrijving van .band--forest staan. */
:root { --ink-3: #5F6762; }
/* .band--red a wint op .btn--onred door specificiteit; hier expliciet terug. */
.band--red a.btn--onred { color: var(--brand-red); }
.band--red a.btn--onred:hover { color: #A01020; }

/* prozaregels breken niet meer midden in een woord: dat las goedkoop in de lede */
.hero__lede, .section__head p, .laag__txt, .laag__meta, .feature__lede, .rail span, .quote blockquote { hyphens: manual; }
.site-footer .org, .footer-claim, .site-footer address { hyphens: manual; }

/* Op 360 liep een lange noot in de derde kolom over het bedrag heen.
   Het bedrag krijgt nu exact zijn eigen breedte (het staat op nowrap) en
   de noot krijgt de rest en breekt netjes af. */
@media (max-width: 719px) {
  .tarieven tbody tr { grid-template-columns: max-content minmax(0, 1fr); }
  .tarieven .alt { min-width: 0; }
}
.geldlijn { hyphens: manual; }