/* ═══════════════════════════════════════════════════════════════
   de Groei-tuin — Richting C, "de Klei"

   Herbrand na Nele's feedback: het tuinschrift oogde te jong. Weg met
   het handschrift, het plakband, de stempels en het schriftraster.

   Wat ervoor in de plaats komt:
   · warme aarde — haver, klei, olijf, houtskoolbruin
   · een elegante serif met hoog contrast voor de koppen, kleine wijd
     gespatieerde kapitalen als labels, humanistische sans voor de tekst
   · ORGANISCHE VORMEN als dragend principe: foto's zitten in bogen en
     blobs met onregelmatige randen, met een platte kleivorm eronder die
     aan één kant uitsteekt; secties lopen in elkaar over via een
     gebogen rand, nooit een rechte lijn
   · een fijne papierkorrel over alles, nooit hoorbaar

   De structuur van de site blijft: die vond ze juist goed.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* de aarde */
  --haver:       #EFE7DA;   /* de grond waar alles op staat */
  --haver-diep:  #E5DACA;
  --room:        #F7F2E8;   /* kaarten en vlakken, net lichter */
  --inkt:        #2B241E;   /* houtskoolbruin, nooit zwart */
  --inkt-dof:    rgba(43, 36, 30, 0.62);
  --inkt-fluister: rgba(43, 36, 30, 0.20);

  /* Nele houdt niet van rood. Het accent was terracotta; dat is nu een
     diep bosgroen. Twee groenen naast elkaar: dit diepe voor knoppen,
     labels en prijzen, en het lichtere olijf voor de brede banden en de
     vormen achter de foto's. Ze bijten elkaar niet omdat ze ver genoeg
     uit elkaar liggen in helderheid. */
  --groen:       #3A6B44;   /* het accent: diep bosgroen */
  --groen-diep:  #2C5334;
  --groen-zacht: rgba(58, 107, 68, 0.12);
  --olijf:       #6E7A55;   /* de tweede kleur: banden en vormen achter foto's */
  --olijf-diep:  #5A6545;

  /* De groene trappen tussen haver en olijf. Zonder deze drie liep een
     hele pagina in één beige door: elke sectie stond op precies dezelfde
     grond, dus het oog kreeg nergens een naad om op te rusten. Ze zijn
     bewust laag verzadigd — dit is de kleur van de tuin in de schaduw,
     niet van een gekleurd vlak. */
  --salie:       #E6EBDD;   /* haver met een scheut olijf: de eerste trap */
  --salie-diep:  #DDE4D2;
  --mos:         #D2DBC3;   /* een trap dieper, nog licht genoeg voor inkt */

  /* de oude namen blijven bestaan zodat niets breekt, maar wijzen nu
     naar de nieuwe kleuren */
  --papier:      var(--haver);
  --papier-diep: var(--haver-diep);
  --balpen:      var(--groen);
  --stempelrood: var(--groen);
  --stempelrood-diep: var(--groen-diep);
  --blad:        var(--olijf);
  --blad-zacht:  rgba(110, 122, 85, 0.14);

  --serif:   "Fraunces", "Iowan Old Style", Georgia, serif;
  --grotesk: "Archivo", "Helvetica Neue", sans-serif;
  --type:    "Archivo", "Helvetica Neue", sans-serif;
  --kaft-serif: var(--serif);
  /* het handschrift is eruit; waar .pen stond komt cursieve serif */
  --hand:    var(--serif);

  /* organische randen — één set, overal hergebruikt, zodat de vormen
     familie van elkaar blijven in plaats van willekeurig */
  --boog:  56% 56% 12% 12% / 46% 46% 6% 6%;
  --blob:  62% 38% 46% 54% / 54% 45% 55% 46%;
  --blob2: 44% 56% 62% 38% / 48% 58% 42% 52%;

  --ease-uit: cubic-bezier(0.23, 1, 0.32, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* `hidden` moet altijd winnen, ook van display-overrides zoals .pen */
[hidden] { display: none !important; }

html {
  /* De vulling staat op HTML en niet op body. Reden: een
     body-achtergrond propageert naar het viewport en wordt achter
     ALLES geschilderd, ook achter elementen met een negatieve
     z-index — het veld zou dan onzichtbaar zijn. Meteen is dit ook
     de terugval: zonder WebGL zie je gewoon deze kleur. */
  background-color: var(--haver);
  scroll-behavior: smooth;
  /* de zachte kleivlakken achter de secties steken bewust buiten beeld;
     `clip` snijdt dat weg zonder position:sticky te breken zoals
     overflow:hidden dat zou doen */
  overflow-x: clip;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
html.rust { scroll-behavior: auto; }

body {
  background-color: transparent;
  color: var(--inkt);
  font-family: var(--type);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  /* clip, niet hidden: hidden maakt van body een scrollcontainer en
     breekt position:sticky (de hoofdstukbalk van de ledenzone) */
  overflow-x: clip;
}

/* ── het geluid van de tuin ───────────────────────────────────
   Wind door gras en vogels, zacht en gelust. Het knopje is een
   stempeltje linksonder — geen mediaspeler-UI, dat zou het schrift
   breken. Uit staat het kruisje erdoor; aan deinen de golfjes mee. */
.geluid {
  position: fixed; right: clamp(14px, 2.4vw, 30px); bottom: clamp(14px, 2.4vw, 26px);
  z-index: 31; display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--grotesk); font-weight: 800; font-size: .68rem;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--inkt-dof); cursor: pointer;
  /* zelfde glas als de kopbalk, zodat de twee zwevende dingen één taal spreken */
  background: linear-gradient(180deg, rgba(255,255,255,.58), rgba(255,255,255,.26));
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  backdrop-filter: blur(14px) saturate(1.5);
  border: 1px solid rgba(255,255,255,.55); border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 10px 24px -14px rgba(34,31,26,.4);
  padding: 8px 14px 8px 11px;
  transition: color 180ms var(--ease-uit), border-color 180ms var(--ease-uit);
}
.geluid:hover { color: var(--inkt); }
.geluid__golf {
  width: 21px; height: 16px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.geluid__horen { fill: currentColor; stroke-width: 1.2; }
.geluid__b1, .geluid__b2 { opacity: 0; }
.geluid__kruis { opacity: 1; stroke-width: 1.5; }

.geluid.is-aan { color: var(--stempelrood); border-color: var(--stempelrood); }
.geluid.is-aan .geluid__kruis { opacity: 0; }
.geluid.is-aan .geluid__b1 { opacity: 1; animation: golfje 2.4s ease-in-out infinite; }
.geluid.is-aan .geluid__b2 { opacity: 1; animation: golfje 2.4s ease-in-out .35s infinite; }
@keyframes golfje {
  0%, 100% { opacity: .3; }
  50%      { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .geluid.is-aan .geluid__b1, .geluid.is-aan .geluid__b2 { animation: none; opacity: 1; }
}
.rust .geluid { display: none; }
@media (max-width: 640px) { .geluid__woord { display: none; } }


/* ═══ de Ruimte: de levende achtergrond ═══════════════════════
   Eén vast doek achter alle content. Het ligt boven de haver-vulling
   van <html> maar onder alles wat de pagina zelf tekent, dus het is
   zichtbaar in de lichte secties en verdwijnt achter de massieve
   banden — precies het ritme dat we willen: leven, rust, leven. */
#ruimte-doek {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  z-index: -1;
  pointer-events: none;
  display: block;
  contain: strict;
}

/* Alles hieronder wijkt pas als het veld bewezen leeft. Faalt WebGL,
   dan komt `ruimte-aan` er nooit en is de site zoals hij was. */
html.ruimte-aan .korrel { display: none; }        /* de korrel zit nu in de shader */
html.ruimte-aan 
/* Zakt de afbouwladder helemaal door, dan gaat het echte glas eruit en
   komt er statisch matglas voor in de plaats — dat scheelt een volledige
   herrastering per frame. */
html.ruimte-zuinig .kop {
  -webkit-backdrop-filter: none; backdrop-filter: none;
  background: rgba(255, 255, 255, .72);
}

.korrel {
  position: fixed; inset: 0; z-index: 40; pointer-events: none; opacity: .34;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.16'/%3E%3C/svg%3E");
}

/* ── gedeelde stemmen ─────────────────────────────────────────── */

.type { font-family: var(--type); }

/* Waar vroeger balpen stond staat nu cursieve serif in klei. Dezelfde
   functie — een terzijde, een persoonlijke stem — maar volwassen. */
.pen {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.12rem;
  line-height: 1.4;
  color: var(--groen);
  display: inline-block;
}
.pen--groot { font-size: 1.85rem; font-style: normal; letter-spacing: -.01em; }

/* het kleine label boven een kop: wijd gespatieerde kapitalen */
.label {
  display: block;
  font-family: var(--grotesk); font-weight: 600; font-size: .68rem;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--groen); margin-bottom: 1rem;
}

.doorstreept { position: relative; white-space: nowrap; }
.doorstreept::after {
  content: ""; position: absolute; left: -1%; right: -1%; top: 56%;
  border-top: 2px solid var(--groen);
}

/* de knop: een volle pil in klei, of dezelfde pil in lijn */
.stempel {
  display: inline-block;
  font-family: var(--grotesk);
  font-weight: 600;
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--groen);
  background: transparent;
  border: 1.5px solid var(--groen);
  border-radius: 999px;
  padding: 1.05em 1.9em;
  cursor: pointer;
  transition: background-color 200ms var(--ease-uit), color 200ms var(--ease-uit),
              transform 200ms var(--ease-uit);
}
.stempel:hover { background: var(--groen-zacht); transform: translateY(-2px); }
.stempel:active { transform: translateY(0); }
.stempel--vol { background: var(--groen); color: var(--room); border-color: var(--groen); }
.stempel--vol:hover { background: var(--groen-diep); border-color: var(--groen-diep); color: var(--room); }
.stempel.is-bezig { opacity: .72; }

/* Het plakband is weg. De spans blijven in de HTML staan omdat ze
   aria-hidden zijn en niets betekenen; hier zetten we ze uit. */
.tape { display: none; }

/* ── organische vormen ────────────────────────────────────────
   Het dragende principe van deze richting. Een foto zit nooit in een
   rechthoek: hij zit in een boog of een blob, met een platte kleivorm
   eronder die aan één kant een sikkel laat zien. Die twee vormen samen
   maken de diepte — geen slagschaduw. */

.vorm { position: relative; display: block; }
.vorm img, .vorm video, .vorm canvas {
  display: block; width: 100%; height: 100%; object-fit: cover;
  position: relative; z-index: 1;
}
.vorm--boog  img, .vorm--boog  video { border-radius: var(--boog); }
.vorm--blob  img, .vorm--blob  video { border-radius: var(--blob); }
.vorm--blob2 img, .vorm--blob2 video { border-radius: var(--blob2); }

/* de kleivorm erachter, verschoven zodat er een sikkel uitsteekt */
.vorm::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: var(--olijf);
  transform: translate(var(--schuif-x, 5%), var(--schuif-y, -4%));
}
.vorm--boog::before  { border-radius: var(--boog); }
.vorm--blob::before  { border-radius: var(--blob); }
.vorm--blob2::before { border-radius: var(--blob2); }
.vorm--olijf::before { background: var(--groen); }
.vorm--kaal::before  { display: none; }

/* ── de banden ────────────────────────────────────────────────
   Zonder banden loopt de pagina als één lange lap door. Een band is een
   sectie die van rand tot rand een andere kleur heeft, met bovenaan en
   onderaan een golfrand die in de kleur van de buursectie geschilderd is.
   Die golf is een SVG met preserveAspectRatio="none", zodat hij op elke
   schermbreedte klopt — een border-radius geeft één nette boog, en dat
   is precies te netjes.

   Drie paden, om beurten gebruikt, zodat geen twee randen gelijk zijn. */

.band {
  position: relative;
  width: 100vw; margin-left: calc(50% - 50vw);
  /* Was clamp(80px, 12vh, 150px): op een scherm van 900px is dat 216px lucht
     per band, boven én onder samen. Met vier banden op een pagina is dat bijna
     een heel scherm aan niets. De golf en de uitvloei doen het scheidingswerk
     al; deze marge hoeft alleen te voorkomen dat tekst tegen de rand plakt. */
  padding: clamp(52px, 7.5vh, 96px) 0;
}
.band__binnen {
  max-width: 1080px; margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 48px);
}

/* ── de banden als het veld leeft ──────────────────────────────
   Zodra er een levende achtergrond is, worden de geverfde golfranden
   een probleem: ze zijn geverfd in de kleur van de BUURsectie, en die
   buur is geen effen vlak meer. Een platte haver-golf tegen een levend
   veld is een zichtbare naad.

   Daarom wordt de bandrand vanaf hier door een MASKER gevormd in plaats
   van door een overlay. Dan toont elke rand vanzelf wat erachter leeft.
   Room en zand krijgen bovendien een sluier in plaats van een dekvlak,
   zodat het veld er zacht doorheen ademt; olijf en diepgroen blijven
   massief — dat zijn de rustpunten in het ritme.

   De sluierkleur staat op het element zelf en niet als extra laag: zo
   kan de alfa per definitie niet stapelen op de golfstrook. */

/* ── de gemaskeerde bandranden ────────────────────────────────
   Elke band is een masker van twee of drie lagen: een golf bovenaan, het
   lijf, en soms een golf onderaan. Twee dingen gingen daar mis en zijn
   hier opgelost:

   1. DE WITTE HAARLIJN. De golflaag was precies --golf hoog en het lijf
      precies 100% - --golf. Bij een gebroken pixelhoogte raakten die twee
      elkaar net niet, en in dat haartje werd níets geschilderd — je zag
      de achtergrond erdoorheen als een lichte streep dwars over de hele
      breedte. Het lijf overlapt de golf nu met --naad.

   2. DE RECHTE ONDERRAND. Een band die hard ophoudt geeft een kaarsrechte
      snede zodra de sectie eronder een andere kleur of dekking heeft.
      Geen enkele band houdt nog hard op: onderaan zit óf een golf óf een
      uitvloei van --uitvloei waarin de kleur wegzakt. */
/* De maskerlagen stapelen op elkaar in plaats van elkaar te vervangen.
   --golf en --veer staan op de banden zelf (zie hieronder); ze stonden hier
   ook, met hogere voorrang, waardoor de golf op 72px bleef steken terwijl
   hij 168 moest zijn — en zo klein leest een golf weer als een streep. */
html.ruimte-aan .band {
  -webkit-mask-composite: source-over; mask-composite: add;
}

/* Elke overgang krijgt precies ÉÉN gegolfde rand, niet twee: bij twee
   naast elkaar liggende banden zou je anders een lensvormig gat tussen
   beide zien. De gemaskeerde rand toont vanzelf het veld erachter. */
html.ruimte-aan .blad--aanbod { padding-block: 0 clamp(44px, 6vh, 72px); }


/* ── de randen van een band: een golf, of een uitvloei ────────
   Even helemaal zonder golf gewerkt en dat schoot te ver door: dan leest
   een pagina als één doorlopende scroll zonder secties. De golf is terug,
   want die deed werk. Wat níét terugkomt is de SNEDE — de kaarsrechte rij
   pixels waar de ene kleur ophoudt en de andere begint.

   Twee dingen maken dat mogelijk:

   1. De golf is een MASKER met een `feGaussianBlur` die alleen VERTICAAL
      werkt (`stdDeviation="0 26"`). Horizontaal blijft de vorm scherp — je
      ziet echt een golf — maar van boven naar beneden lost hij op over
      tientallen pixels.

   2. De golf staat op een EIGEN LAAG bóven de band (`::before`, met
      `top: -golf`), niet als maskerlaag ván de band. Dat was de vorige
      poging en die klopte niet: twee maskerlagen naast elkaar knippen
      elkaars vervaging af, en precies op die knip stond weer een streep.
      Nu heeft de laag dezelfde kleur als de band eronder, dus de naad
      tussen die twee is per definitie onzichtbaar.

   Onder de band ligt `::after`: dezelfde kleur die naar beneden wegvalt.
   Zo heeft elke band aan de ene kant een golf en aan de andere een
   uitvloei, en delen geen twee banden op één pagina dezelfde golf. */

.band--room, .band--zand, .band--diep, .band--salie, .band--mos, .band.citaatband {
  --golf: clamp(130px, 16vh, 220px);
  --veer: clamp(70px, 9vh, 130px);
  position: relative;
}
/* Huisregel 8: elke pixel golf is een pixel verplichte leegte bij de buur
   erboven. Op een telefoon was 16vh 135px, en het boekje onderaan "Over
   mij" eindigde 76px boven de band: de golf schoof over de kaft. Een
   kortere golf — rond 100px is de vorm nog onmiskenbaar een golf — en
   ruimte onder het boekje. */
@media (max-width: 700px) {
  .band--room, .band--zand, .band--diep, .band--salie, .band--mos, .band.citaatband {
    --golf: clamp(84px, 11vh, 110px);
  }
  /* .blad.blad--nele, niet .blad--nele: de algemene .blad-regel staat later
     in dit bestand en heeft dezelfde specificiteit, dus won die. */
  .blad.blad--nele { padding-bottom: clamp(104px, 13vh, 130px); }
}
.band--room::before, .band--salie::before, .band--mos::before,
.band--zand::before, .band--diep::before, .band.citaatband::before,
.band--room::after, .band--salie::after, .band--mos::after,
.band--zand::after, .band--diep::after, .band.citaatband::after {
  content: ""; position: absolute; left: 0; right: 0;
  z-index: 0; pointer-events: none;
  background: var(--bandkleur);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
/* de golf hangt bóven de band, de uitvloei eronder */
.band--room::before, .band--salie::before, .band--mos::before,
.band--zand::before, .band--diep::before, .band.citaatband::before {
  top: calc(-1 * var(--golf) + 1px); height: var(--golf);
}
.band--room::after, .band--salie::after, .band--mos::after,
.band--zand::after, .band--diep::after, .band.citaatband::after {
  bottom: calc(-1 * var(--veer) + 1px); height: var(--veer);
  -webkit-mask-image: linear-gradient(180deg,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,0.947) 14%,
      rgba(0,0,0,0.79) 32%,
      rgba(0,0,0,0.5) 50%,
      rgba(0,0,0,0.24) 68%,
      rgba(0,0,0,0.055) 86%,
      rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(180deg,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,0.947) 14%,
      rgba(0,0,0,0.79) 32%,
      rgba(0,0,0,0.5) 50%,
      rgba(0,0,0,0.24) 68%,
      rgba(0,0,0,0.055) 86%,
      rgba(0,0,0,0) 100%);
}
/* en de inhoud staat er altijd bovenop */
.band > * { position: relative; z-index: 1; }

/* Wie een golf boven zich heeft, en welke. Vijf verschillende, zodat geen
   twee randen op een pagina dezelfde vorm hebben. */
.band--room::before  { -webkit-mask-image: url("assets/golf/zacht-a-boven.svg"); mask-image: url("assets/golf/zacht-a-boven.svg"); }
.band--salie::before { -webkit-mask-image: url("assets/golf/zacht-b-boven.svg"); mask-image: url("assets/golf/zacht-b-boven.svg"); }
.band--mos::before   { -webkit-mask-image: url("assets/golf/zacht-c-boven.svg"); mask-image: url("assets/golf/zacht-c-boven.svg"); }
.band--diep::before  { -webkit-mask-image: url("assets/golf/zacht-a-onder.svg"); mask-image: url("assets/golf/zacht-a-onder.svg"); transform: scaleY(-1); }
/* zand en de adempauze komen juist ZONDER golf op: die vloeien in, zodat
   niet elke overgang hetzelfde trucje is */
.band--zand::before, .band.citaatband::before {
  -webkit-mask-image: linear-gradient(180deg,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0.055) 14%,
      rgba(0,0,0,0.24) 32%,
      rgba(0,0,0,0.5) 50%,
      rgba(0,0,0,0.79) 68%,
      rgba(0,0,0,0.947) 86%,
      rgba(0,0,0,1) 100%);
          mask-image: linear-gradient(180deg,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0.055) 14%,
      rgba(0,0,0,0.24) 32%,
      rgba(0,0,0,0.5) 50%,
      rgba(0,0,0,0.79) 68%,
      rgba(0,0,0,0.947) 86%,
      rgba(0,0,0,1) 100%);
}

/* De kleur staat op ÉÉN plek. De golflaag en de band zelf lezen allebei
   uit --bandkleur, want zodra die twee uit elkaar lopen staat er weer een
   streep: onder `html.ruimte-aan` zijn de banden een SLUIER (alfa < 1) en
   de laag erboven was dekkend — een sprong van veertien procent, dwars
   over de volle breedte. */
.band--room  { --bandkleur: var(--room);       background: var(--bandkleur); }
.band--salie { --bandkleur: var(--salie);      background: var(--bandkleur); }
.band--mos   { --bandkleur: var(--mos);        background: var(--bandkleur); }
.band--zand  { --bandkleur: var(--haver-diep); background: var(--bandkleur); }
.band.citaatband { --bandkleur: var(--haver-diep); background: var(--bandkleur); }
html.ruimte-aan .band--room  { --bandkleur: rgb(247 242 232 / .86); }
html.ruimte-aan .band--zand  { --bandkleur: rgb(229 218 202 / .78); }
html.ruimte-aan .band--salie { --bandkleur: rgb(230 235 221 / .88); }
html.ruimte-aan .band--mos   { --bandkleur: rgb(210 219 195 / .88); }
/* .band--diep blijft BEWUST dekkend. Hem halfdoorzichtig maken zoals de
   lichte banden gaf een sprong op de naad tussen golflaag en lijf: een
   donkere kleur met alfa over een levend veld valt per pixel anders uit dan
   dezelfde kleur over de vlakke bodem eronder. Gemeten: drie harde randen.
   Een donkere band is een rustpunt en mag massief zijn. */
html.ruimte-aan .band.citaatband { --bandkleur: rgb(229 218 202 / .82); }


/* ── de groene tussentrappen ──────────────────────────────────
   Salie en mos hadden hier eerst een gegolfde bovenrand, zoals room. Dat
   is eruit. Een golf is nog altijd een SNEDE: aan de ene kant van de lijn
   de ene kleur, aan de andere kant de andere. Uitgerekt over een volle
   schermbreedte is die golf zo flauw dat je hem als een kaarsrechte
   streep leest — en dat is precies wat er nergens mag staan.

   Deze twee houden daarom nergens op. Ze vallen aan boven- én onderkant
   over ruim tweehonderd pixels weg in het veld erachter, met een geknepen
   alfacurve (een rechte ramp geeft op de knik alsnog een zichtbare lijn).
   Er is geen rij pixels aan te wijzen waar de band begint. */

/* ── de groene adempauze ──────────────────────────────────────
   De olijfband was met afstand de hardste lijn van de site: een sprong van
   89 op één rij pixels, boven én onder. Hij wordt nu met hetzelfde masker
   uitgeveerd, en hij is hoger geworden — anders blijft er van het groen
   niets over als je er aan beide kanten tweehonderd pixels van afhaalt.
   Wat overblijft is geen band meer maar een groen dat opzwelt en wegzakt. */
.band.citaatband {
  --veer: clamp(110px, 14vh, 190px);
  -webkit-mask-image: linear-gradient(180deg,
            rgba(0,0,0,0) 0,
            rgba(0,0,0,0.055) calc(var(--veer) * 0.14),
            rgba(0,0,0,0.24) calc(var(--veer) * 0.32),
            rgba(0,0,0,0.5) calc(var(--veer) * 0.5),
            rgba(0,0,0,0.79) calc(var(--veer) * 0.68),
            rgba(0,0,0,0.947) calc(var(--veer) * 0.86),
            rgba(0,0,0,1) calc(var(--veer) * 1),
            rgba(0,0,0,1) calc(100% - var(--veer) * 1),
            rgba(0,0,0,0.947) calc(100% - var(--veer) * 0.86),
            rgba(0,0,0,0.79) calc(100% - var(--veer) * 0.68),
            rgba(0,0,0,0.5) calc(100% - var(--veer) * 0.5),
            rgba(0,0,0,0.24) calc(100% - var(--veer) * 0.32),
            rgba(0,0,0,0.055) calc(100% - var(--veer) * 0.14),
            rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(180deg,
            rgba(0,0,0,0) 0,
            rgba(0,0,0,0.055) calc(var(--veer) * 0.14),
            rgba(0,0,0,0.24) calc(var(--veer) * 0.32),
            rgba(0,0,0,0.5) calc(var(--veer) * 0.5),
            rgba(0,0,0,0.79) calc(var(--veer) * 0.68),
            rgba(0,0,0,0.947) calc(var(--veer) * 0.86),
            rgba(0,0,0,1) calc(var(--veer) * 1),
            rgba(0,0,0,1) calc(100% - var(--veer) * 1),
            rgba(0,0,0,0.947) calc(100% - var(--veer) * 0.86),
            rgba(0,0,0,0.79) calc(100% - var(--veer) * 0.68),
            rgba(0,0,0,0.5) calc(100% - var(--veer) * 0.5),
            rgba(0,0,0,0.24) calc(100% - var(--veer) * 0.32),
            rgba(0,0,0,0.055) calc(100% - var(--veer) * 0.14),
            rgba(0,0,0,0) 100%);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}

.band--diep  { color: rgba(247, 242, 232, .88); }
/* Vlak groen leest goedkoop. Drie zachte lichtvallen over elkaar geven
   diepte zonder dat er iets te zien valt dat er niet hoort: licht van
   linksboven, een warme gloed achter de foto rechts, en een donkere
   onderrand die het vlak laat wegzakken. */
/* De drie lichtvallen die het groen diepte geven stonden op ::before. Dat
   pseudo-element is nu de golflaag, dus ze zijn verhuisd naar de
   achtergrond van de band zelf — als extra lagen boven de kleur. */
/* GEEN LICHTVALLEN MEER OP DEZE BAND. Ze stonden als radiale gradiënten op
   de band zelf, maar niet op de golflaag erboven — en die golflaag is een
   eigen element van een paar honderd pixels hoog. Op de naad tussen die twee
   sprong de kleur dus, kaarsrecht over de volle breedte, precies onder de
   golf. Percentage-gradiënten in twee verschillend hoge dozen kunnen per
   definitie niet gelijk uitkomen.

   Het groen is nu vlak. Vlak groen leest goedkoop als er verder niets
   gebeurt — maar hier gebeurt genoeg: de golf komt eroverheen, de uitvloei
   laat hem onderaan wegzakken, en het levende veld ademt eromheen. */
/* De `background` hoort hier óók te staan. Toen de lichtvallen eruit gingen
   verdween met dezelfde regel de achtergrond van de band zelf: alleen de
   golflaag en de uitvloei waren nog groen, en het lijf ertussen was
   doorzichtig. Dát was de rechte lijn onder de golf. */
.band--diep { --bandkleur: var(--olijf-diep); background: var(--bandkleur); }

/* Een band die een sectie omvat die zijn eigen ademruimte al meebrengt.
   Zonder dit tellen twee paddings op en staat er ineens 300px lucht. */
.band--sectie { padding-block: clamp(30px, 4.5vh, 60px); }

.band--diep h2, .band--diep h3 { color: var(--room); }
.band--diep .blad__titel { color: rgba(247, 242, 232, .72); }
.band--diep .blad__titel::after { border-color: rgba(247, 242, 232, .5); }
.band--diep .pen { color: #E7C9B4; }
.band--diep .stempel { color: var(--room); border-color: rgba(247,242,232,.6); }
.band--diep .stempel:hover { background: rgba(247,242,232,.12); }
/* Op een olijfband is groen op groen niet te lezen. Daar wordt de volle
   knop crème met donkergroene letters — dezelfde knop, omgekeerd. */
.band--diep .stempel--vol {
  background: var(--room); border-color: var(--room); color: var(--groen-diep);
}
.band--diep .stempel--vol:hover {
  background: #fff; border-color: #fff; color: var(--groen-diep);
}
/* en de sikkel achter een foto binnen zo'n band wordt zand */
.band--diep .vorm::before,
.band--diep .ding__foto::before {
  background: var(--haver-diep);
}

/* De golfrand is volledig verdwenen. Hij was een geverfde vorm in de
   kleur van de buursectie, en dat is per definitie een snede: aan de ene
   kant van de lijn de ene kleur, aan de andere de andere. Uitgerekt over
   een schermbreedte las hij als een rechte streep. Banden vervloeien nu
   zelf; er is geen rand meer om te tekenen. */

/* een band heeft ruimte nodig onder de golf, anders raakt de tekst hem */
.band > .band__binnen { position: relative; z-index: 2; }

/* ── kop ──────────────────────────────────────────────────────── */

/* Een zwevende glazen balk in plaats van een streep over het papier.
   Het schrift eronder blijft doorschijnen en vervormt licht — dat is
   wat glas doet. Drie lagen maken het glas: een lichte vulling, een
   heldere bovenrand die het licht vangt, en een donkere onderrand voor
   de dikte. De typografie ging mee: de merknaam in de serif van de
   kaft, de links klein en breed gespatieerd in de grotesk. */
.kop {
  /* vást, niet plakkend: zo neemt de balk geen ruimte in en begint de
     tuinfilm bovenaan het scherm. Het glas ligt er dan écht over. */
  position: fixed; top: clamp(10px, 1.4vw, 18px); left: 0; right: 0;
  z-index: 30;
  width: min(100% - clamp(20px, 4vw, 48px), 1180px);
  margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px;
  padding: 11px clamp(16px, 2.4vw, 26px);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .58), rgba(255, 255, 255, .26));
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  backdrop-filter: blur(16px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, .55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .85),
    inset 0 -1px 0 rgba(34, 31, 26, .06),
    0 12px 30px -16px rgba(34, 31, 26, .35);
}
/* de lichtstreep die over glas loopt */
.kop::after {
  content: ""; position: absolute; inset: 1px 1px auto; height: 46%;
  border-radius: 999px 999px 40% 40% / 999px 999px 100% 100%;
  background: linear-gradient(180deg, rgba(255,255,255,.5), transparent);
  pointer-events: none;
}

.kop__merk {
  font-family: var(--kaft-serif); font-weight: 600; font-size: 1.22rem;
  letter-spacing: -.01em;
  color: var(--inkt); text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px;
  white-space: nowrap;
}
/* Het beeldmerk van Nele (unalome en boom, zonder de tekst eronder —
   pipeline/beeldmerk.py). Iets hoger dan de letters, zodat het leest als
   een merk naast een naam en niet als een icoontje. */
.kop__beeldmerk { height: 46px; width: auto; display: block; margin-block: -6px; }

.kop__nav { display: flex; gap: clamp(10px, 1.8vw, 22px); align-items: center; }
.kop__nav a {
  font-family: var(--grotesk); font-weight: 500; font-size: .74rem;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--inkt-dof); text-decoration: none;
  padding: 7px 11px; border-radius: 999px;
  transition: color 160ms var(--ease-uit), background-color 160ms var(--ease-uit);
}
.kop__nav a:hover { color: var(--inkt); background: rgba(255, 255, 255, .5); }
/* de enige knop in de balk: gevuld glas met haar rood */
.kop__cta {
  font-weight: 700; color: var(--papier) !important;
  background: var(--stempelrood);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 4px 12px -6px rgba(44,83,52,.55);
}
.kop__cta:hover { background: var(--stempelrood-diep) !important; color: var(--papier) !important; }

/* ── de bladen van het schrift ───────────────────────────────── */

.schrift { max-width: 1080px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 48px); }

/* Op een telefoon telt élke lege pixel: 12vh boven én onder betekende
   bijna een kwart scherm lucht tussen twee alinea's. Op smalle schermen
   is de tussenruimte daarom kleiner — de pagina leest daardoor als één
   verhaal in plaats van als een reeks losse bladen. */
.blad { padding: clamp(48px, 9vh, 130px) 0; position: relative; }
/* De kopbalk zweeft vást over de pagina. Zonder deze marge landt een
   anker precies eronder en staat de sectietitel achter het glas. */
[id^="schrift-"], [id^="edg-"], main [id] { scroll-margin-top: clamp(88px, 12vh, 124px); }
/* Geen streepjeslijn tussen de bladen. En: twee bladen na elkaar telden
   allebei hun volle padding op, wat een gat van ruim 260px gaf. Het
   tweede blad brengt zijn bovenmarge nu niet meer mee. */
.blad + .blad { border-top: 0; padding-top: 0; }

/* De sectietitel is nu een klein wijd gespatieerd kapitaal met een kort
   streepje eronder — het onderstreepte kopje van vroeger las als een
   schoolschrift. */
.blad__titel {
  font-family: var(--grotesk); font-weight: 600;
  font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--groen);
  margin-bottom: 2.4rem;
  display: inline-block; position: relative; padding-bottom: .9em;
}
.blad__titel::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 34px; border-top: 1.5px solid var(--groen);
}
.blad__titel .pen { font-size: .95rem; text-transform: none; letter-spacing: 0; }

/* ── een eigen achtergrond per sectie ─────────────────────────
   Elke sectie krijgt zijn eigen zachte tuinachtergrond. De beelden zijn
   in de pipeline al boven- en onderaan uitgeveerd, dus twee secties
   lopen vanzelf in elkaar over zonder zichtbare naad. Ze zijn sterk
   onscherp en halfdoorzichtig: er komt tekst overheen.               */
/* Zachte kleivlakken achter de secties. Er was even een WebGL-laag die
   deze vlekken als vloeibare stof tekende; die las in de praktijk als
   niets en is eruit. Deze CSS-versie is zichtbaar én kost niets. */
.blad--meter::before { bottom: -6%; right: -22vw; border-radius: var(--blob2); background: var(--groen-zacht); }
.blad--nele::before  { top: -4%; left: -18vw;  border-radius: var(--blob);  background: var(--blad-zacht); }

/* ── kleivormen als achtergrond ───────────────────────────────
   Het levende veld is mooi maar leeg: hele stukken pagina hadden niets
   dan tekst op een egale ondergrond. Deze vormen liggen erachter, half
   buiten beeld, en geven elke sectie een eigen zwaartepunt. Ze zijn
   opzettelijk groot en zacht — je moet ze niet zien, je moet merken dat
   de bladzijde niet leeg is.

   Voeg .sfeer toe aan een sectie, plus --sfeer-x / --sfeer-y / --sfeer-kleur
   als hij ergens anders moet liggen dan de standaard. */
.sfeer { position: relative; }
.sfeer::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: var(--sfeer-maat, 48vw); aspect-ratio: 1 / 1;
  top: var(--sfeer-y, -6%); left: var(--sfeer-x, -20vw);
  border-radius: var(--blob2);
  background: var(--sfeer-kleur, var(--blad-zacht));
  opacity: var(--sfeer-dekking, .5);
}
/* rechts in plaats van links */
.sfeer--rechts::before { left: auto; right: var(--sfeer-x, -20vw); border-radius: var(--blob); }
/* een tweede, kleinere vorm aan de andere kant: dat maakt van één vlek
   een compositie */
.sfeer--dubbel::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: var(--sfeer2-maat, 26vw); aspect-ratio: 1 / 1;
  bottom: var(--sfeer2-y, 4%); right: var(--sfeer2-x, -10vw);
  border-radius: var(--blob);
  background: var(--sfeer2-kleur, var(--groen-zacht));
  opacity: var(--sfeer2-dekking, .42);
}
.sfeer--dubbel.sfeer--rechts::after { right: auto; left: var(--sfeer2-x, -10vw); }

/* op smalle schermen mogen ze niet de halve tekst overspoelen */
@media (max-width: 620px) {
  .sfeer::before  { width: var(--sfeer-maat, 74vw); opacity: var(--sfeer-dekking, .38); }
  .sfeer--dubbel::after { width: var(--sfeer2-maat, 44vw); opacity: .3; }
}

/* opkomen bij het scrollen — alleen als JS meedoet (guard: .js) */
.js [data-op] { opacity: 0; transform: translateY(18px); }
.js [data-op].is-op {
  opacity: 1; transform: none;
  transition: opacity 600ms var(--ease-uit), transform 600ms var(--ease-uit);
  transition-delay: calc(var(--op-i, 0) * 90ms);
}
/* beelden in een organische vorm worden uit hun eigen vorm geboren:
   de uitsnede opent zich terwijl het beeld heel licht terugzoomt */
.js .ding[data-op] .ding__foto img,
.js .ding[data-op] .vorm img {
  clip-path: inset(12% round 40px);
  transform: scale(1.06);
}
.js .ding[data-op].is-op .ding__foto img,
.js .ding[data-op].is-op .vorm img {
  clip-path: inset(0 round 0);
  transform: scale(1);
  transition: clip-path 900ms var(--ease-uit), transform 900ms var(--ease-uit);
  transition-delay: calc(var(--op-i, 0) * 90ms);
}
.rust [data-op], .rust .js [data-op] { opacity: 1 !important; transform: none !important; transition: none !important; }
.rust .js .ding[data-op] .ding__foto img, .rust .js .ding[data-op] .vorm img {
  clip-path: none !important; transform: none !important; transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .js [data-op], .js .ding[data-op] .ding__foto img, .js .ding[data-op] .vorm img {
    opacity: 1; transform: none; clip-path: none; transition: none;
  }
}

:root {
  --kaft-groen:  #23491f;   /* het diepe groen van haar titel */
  --kaft-salie:  #7ea36a;
  --kaft-serif: "Fraunces", "Iowan Old Style", Georgia, serif;
}
/* ── de hero ──────────────────────────────────────────────────
   Links het woord, rechts het beeld in een boog. De boog is hoog en
   smal zodat hij als een poort leest, en de kleivorm erachter steekt
   rechtsboven uit — één sikkel, niet rondom, anders wordt het een lijst. */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
  gap: clamp(30px, 6vw, 78px);
  align-items: center;
  min-height: min(88vh, 780px);
  padding: clamp(110px, 15vh, 170px) 0 clamp(60px, 9vh, 110px);
}
/* De pijnregel boven de kop. Hij moet herkenbaar zijn, niet schreeuwen:
   dus dezelfde maat als het label dat er stond, maar cursief in de serif
   in plaats van in kapitalen — het is een zin die iemand tegen zichzelf
   zegt, en kapitalen klinken als een reclamebord. */
.hero__pijn {
  font-family: var(--serif); font-style: italic;
  font-size: 1rem; letter-spacing: 0; text-transform: none;
  color: var(--inkt-dof);
  display: block; margin-bottom: .9rem;
}
.hero__pijn::after {
  content: ""; display: block;
  width: 42px; height: 1px; margin-top: .8rem;
  background: rgba(58, 107, 68, .45);
}

.hero__titel {
  font-family: var(--serif); font-optical-sizing: auto;
  font-weight: 400; letter-spacing: -.025em; line-height: 1.04;
  font-size: clamp(2.6rem, 6.2vw, 4.6rem);
  margin-bottom: 1.4rem;
}
.hero__titel em { font-style: italic; }
.hero__belofte {
  font-size: 1.06rem; line-height: 1.7; color: var(--inkt-dof);
  max-width: 38ch; margin-bottom: 2.2rem;
}
.hero__acties { display: flex; align-items: center; gap: clamp(16px, 3vw, 30px); flex-wrap: wrap; }
.hero__tweede {
  font-family: var(--grotesk); font-size: .82rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--inkt-dof); text-decoration: none;
  border-bottom: 1px solid var(--inkt-fluister); padding-bottom: 3px;
  transition: color 180ms var(--ease-uit), border-color 180ms var(--ease-uit);
}
.hero__tweede:hover { color: var(--groen); border-color: var(--groen); }

.hero__beeld {
  margin: 0;
  aspect-ratio: 4 / 5;
  --schuif-x: 6%;
  --schuif-y: -4%;
}
.hero__beeld img { height: 100%; }

@media (max-width: 860px) {
  .hero {
    grid-template-columns: 1fr;
    padding-top: clamp(96px, 13vh, 130px);
    min-height: 0;
  }
  /* Tobias: "haar hoofd wordt afgesneden". De foto is 4:5 en stond hier in
     een 5:4-kader: een kwart van de hoogte viel weg, bovenaan én onderaan.
     Nu hetzelfde kader als de foto, smaller en in het midden — een boog
     boven de kop in plaats van een banner die haar kruin mist. */
  .hero__beeld { order: -1; aspect-ratio: 4 / 5; max-width: 300px; margin-inline: auto; }
  .hero__belofte { margin-bottom: 1.8rem; }
}

/* ── het drieluik: boek · mentorship · programma ───────────────
   Vervangt de drie losse aanbod-blokken. Het leest als ÉÉN gewelf, niet
   als drie losse kaarten: alleen de buitenrand is afgerond, de panelen
   sluiten onderling naadloos op elkaar aan. De boog is breed en laag —
   een kerkgewelf boven drie deuren, geen drie hoge poortjes.

   De knoppen staan alle drie op dezelfde hoogte onderaan, zodat ze niet
   over Nele's gezicht of over het boek vallen. */
.drieluik {
  /* Drie afzonderlijke kaders naast elkaar, elk met een eigen licht
     organische ronding — familie van elkaar, geen kopieën. Breed
     uitgezet maar met lucht ertussen en aan de randen, zodat het veld
     erachter overal even ademt. */
  width: 100vw; margin-left: calc(50% - 50vw);
  display: grid;
  /* het mentorship draagt de rij: dat is waar het geld en het gesprek
     zitten. Boek en programma blijven bereikbaar, maar als tweede keus. */
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(14px, 1.8vw, 28px);
  padding-inline: max(clamp(16px, 3vw, 44px), calc((100vw - 1680px) / 2));
  margin-top: clamp(22px, 3.5vh, 38px);
}


.luik {
  position: relative;
  display: flex; flex-direction: column;
  min-height: clamp(500px, 64vh, 620px);
  background: var(--room);
  overflow: hidden;
  box-shadow: 0 30px 58px -38px rgba(34, 31, 26, .40);
}
/* elk kader zijn eigen ronding — licht organisch, geen kopieën */
.luik--boek { border-radius: 54px 32px 46px 30px / 46px 30px 38px 30px; }
.luik--nele { border-radius: 34px 52px 30px 48px / 30px 44px 28px 40px; }
.luik--edg  { border-radius: 44px 30px 56px 30px / 40px 28px 46px 28px; }

.luik__beeld {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  object-position: 50% 100%;
}
.luik--nele .luik__beeld { object-position: 62% 100%; }
/* De planten mogen blijven — ze zijn het mooiste aan deze drie. Maar de
   prijs stond op een plantenvlek van rgb(171,165,140) en haalde daar
   2,5:1; de ondertitel 3,0:1. Nagemeten op zestien punten achter de
   tekst, niet op het gemiddelde: dát is precies waarom het gemiddelde
   hier niets zegt — de plaat is licht, de vlekken niet.

   BEWUST GEEN VERLOOP. Een verloop over een foto leest als een
   afgeplakte hoek. Dit is één vlakke crèmesluier van 22% over het hele
   beeld: de planten blijven zichtbaar, alles wordt een tikje lichter, en
   er is geen rand te zien omdat er niets afgebakend wordt. De rest van
   het werk doet de tekst zelf (dieper groen, minder doffe ondertitel):
   samen 4,3:1 op de prijs en 5,2:1 op de ondertitel. */
.luik__beeld + .luik__sluier,
/* Er lag een egale crèmesluier van 22% over de HELE foto. Dat maakte drie
   mooie beelden dof — en de tekst werd er nauwelijks leesbaarder van, want
   hij verlicht ook de plek waar geen tekst staat.

   Wat er nu ligt is geen sluier maar een verloop dat alleen bovenaan zit,
   precies achter de tekst, en dat naar beneden helemaal verdwijnt. De foto
   is vanaf een derde volledig onbedekt. */
.luik__sluier {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg,
    rgba(247, 242, 232, .92) 0%,
    rgba(247, 242, 232, .80) 18%,
    rgba(247, 242, 232, .46) 30%,
    rgba(247, 242, 232, .14) 40%,
    rgba(247, 242, 232, 0)   50%);
  pointer-events: none;
}
/* Alleen het buitenste paneel wordt door de gewelfboog geraakt: daar
   moet de tekst verder van de rand blijven, anders snijdt de curve het
   label af. Rechts speelt dat niet, want de tekst is links uitgelijnd. */

.luik--edg  .luik__beeld { object-position: 50% 92%; }
.luik--boek .luik__beeld { object-position: 58% 100%; }
/* ═══ Boek en Elke Dag Gelukkig: de foto begint ONDER de tekst ═══
   Nele zag op haar laptop de tekst nog steeds over de kaft staan, terwijl
   het bij Tobias goed stond. Logisch: de foto vulde de hele kaart en de
   tekst lag erbovenop, met een verloop ertussen. Op een kleiner scherm is
   de kaart smaller en lager, de tekst breekt over meer regels, en dan
   schuift hij over het boek. Een verloop kan je voor één schermmaat
   afstellen, nooit voor allemaal.

   Daarom is de kaart hier een raster van twee rijen: de tekst bovenaan,
   zo hoog als hij nodig heeft, en de foto in wat overblijft. Ze delen geen
   ruimte meer, dus overlappen kán niet — op geen enkel scherm, met geen
   enkele tekstlengte. De bovenrand van de foto vloeit uit in het room van
   de kaart (een masker, geen harde snede), en de knop ligt onderaan over
   de foto, zoals voorheen. De mentorshipkaart blijft zoals ze was: daar
   staat het gezicht rechts en de tekst links, en die botsen niet. */
/* ALLEEN OP DESKTOP (vanaf 901px, waar de drie kaarten naast elkaar staan).
   Tobias, 18-09: "dit was enkel voor desktop, ik heb niets gezegd van
   mobiel." Op een telefoon staat de kaart alleen, op volle breedte, en
   stond de foto met de tekst erop goed; het raster maakte daar van de foto
   een lege muur met het boek half achter de knop. Onder 901px geldt dus
   weer de oude opbouw: foto vult de kaart, verloop erover, tekst erop. */
@media (min-width: 901px) {
  .luik--boek, .luik--edg {
    display: grid; grid-template-rows: auto 1fr;
    background: rgb(247, 242, 232);
  }
  .luik--boek > .luik__sluier, .luik--edg > .luik__sluier { display: none; }
  .luik--boek > .luik__woord, .luik--edg > .luik__woord {
    grid-row: 1; grid-column: 1; padding-bottom: 6px;
  }
  .luik--boek > .luik__beeld, .luik--edg > .luik__beeld {
    grid-row: 2; grid-column: 1;
    position: relative; inset: auto; width: 100%; height: auto; min-height: 100%;
    /* De foto is zo hoog als de kaart breed is. Het boek is in de plaat
       ongeveer 0,66x de kaartbreedte hoog; met deze verhouding past het
       altijd volledig boven de knop, op een smalle laptop én op een breed
       scherm. Een vaste pixelhoogte klopte maar op één maat. */
    aspect-ratio: 1 / 1.02;
    -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0, rgba(0,0,0,.24) 5%, rgba(0,0,0,.79) 11%, #000 17%);
            mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0, rgba(0,0,0,.24) 5%, rgba(0,0,0,.79) 11%, #000 17%);
  }
  /* het boek staat op 27–67% van de foto: daar kijken we naar */
  .luik--boek > .luik__beeld { object-position: 58% 95%; }
  .luik--edg  > .luik__beeld { object-position: 50% 88%; }
  .luik--boek > .luik__voet, .luik--edg > .luik__voet {
    grid-row: 2; grid-column: 1; align-self: end; margin-top: 0;
  }
}

/* Op de boekkaart staat de kaft hoog in de foto en is de titel twee regels:
   het verloop loopt op deze kaart dieper door, tot voorbij de prijsregel.
   (Op desktop staat de sluier uit; dit telt voor de telefoon.) */
.luik--boek .luik__sluier {
  background: linear-gradient(180deg,
    rgba(247, 242, 232, .94) 0%,
    rgba(247, 242, 232, .88) 30%,
    rgba(247, 242, 232, .62) 44%,
    rgba(247, 242, 232, .22) 56%,
    rgba(247, 242, 232, 0)   66%);
}

.luik__woord {
  position: relative; z-index: 2;
  padding: clamp(44px, 6vh, 64px) clamp(28px, 2.8vw, 40px) 0;
}
.luik__titel {
  font-family: var(--serif); font-optical-sizing: auto;
  font-weight: 400; letter-spacing: -.02em; line-height: 1.08;
  font-size: clamp(1.45rem, 2vw, 1.95rem);
  margin-bottom: .55rem;
}
.luik__titel em { font-style: italic; }
.luik__onder {
  /* niet --inkt-dof (62%): dat is voor tekst op een rustig vlak, en dit
     is een foto met planten erin */
  /* Dit staat op een foto en moet het van zichzelf hebben: voller in kleur
     en een maat groter dan een gewone bijregel. */
  font-family: var(--type); color: rgba(43, 36, 30, .92);
  font-size: .98rem; line-height: 1.6; font-weight: 500;
  max-width: 26ch;
}
/* De prijs: subtiel, een bijregel en geen prijskaartje. Tobias: "bij het
   boek en bij Elke Dag Gelukkig mocht de prijs er ook wel subtiel klein
   bij". Mentorship houdt "op aanvraag" — daar is geen bedrag. Alle drie
   dezelfde maat, zodat het drieluik gelijk leest. Kleiner dan eerst
   (1,3rem), dus onder de grens voor grote tekst: de kleur is daarom nog
   een tint dieper dan het groen dat er stond. */
.luik__prijs {
  font-family: var(--serif); font-size: 1.05rem; color: #1F3F27;
  margin-top: .7rem; letter-spacing: -.005em;
}
.luik__prijs span { font-family: var(--type); font-size: .8rem; color: rgba(43, 36, 30, .82); margin-left: .15em; }

/* de voet: alle drie de knoppen op exact dezelfde hoogte */
.luik__voet {
  position: relative; z-index: 2; margin-top: auto;
  padding: 0 clamp(28px, 2.8vw, 40px) clamp(30px, 4.5vh, 46px);
}
.luik__knop {
  display: inline-flex; align-items: center; gap: .5em;
  font-family: var(--grotesk); font-weight: 600; font-size: .7rem;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--inkt); text-decoration: none; white-space: nowrap;
  border-radius: 999px; padding: 11px 19px;
  background: rgba(255, 255, 255, .58);
  -webkit-backdrop-filter: blur(10px) saturate(1.4);
          backdrop-filter: blur(10px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, .75);
  transition: background-color 160ms var(--ease-uit), color 160ms var(--ease-uit);
}
.luik__knop:hover { background: rgba(255, 255, 255, .88); color: var(--groen-diep); }

@media (prefers-reduced-motion: reduce) { .drieluik { animation: none; } }
.rust .drieluik { animation: none; }

@media (max-width: 900px) {
  /* onder elkaar: dan is het geen gewelf meer maar drie zachte bladen */
  .drieluik { grid-template-columns: 1fr; gap: clamp(14px, 2vh, 22px); }
  .luik { min-height: clamp(440px, 62vh, 560px); }
  /* Op desktop staat de tekst in de lucht boven de foto; op één kolom
     zakte diezelfde padding de tekst pal op het beeld — donkere letters
     op een boek, op bladeren, op Nele's schouder. De tekst gaat omhoog,
     naar het rustigste stuk van elk kader. */
  .luik__woord { padding: clamp(28px, 4vh, 42px) clamp(28px, 7vw, 40px) 0; }
  .luik--boek .luik__woord, .luik--edg .luik__woord { padding-inline: clamp(28px, 7vw, 40px); }
  .luik__onder { max-width: 34ch; }

  /* En omhoog schuiven alleen is niet genoeg: elke foto is anders licht.
     Een sluier van de eigen roomkleur bovenaan geeft de letters overal
     dezelfde ondergrond, zonder dat het beeld eronder verdwijnt. */
  .luik::before {
    content: ""; position: absolute; z-index: 1;
    left: 0; right: 0; top: 0; height: 62%;
    background: linear-gradient(to bottom,
      rgb(247 242 232 / .92) 0%,
      rgb(247 242 232 / .80) 34%,
      rgb(247 242 232 / .42) 68%,
      rgb(247 242 232 / 0)  100%);
    pointer-events: none;
  }
  /* de knop staat op de foto, dus die mag juist wél dekkender worden */
  .luik__knop { background: rgba(255, 255, 255, .74); }
}

/* ── blad 1: "Geluk wacht niet op een beter moment" ───────────────
   Geen fotoachtergrond meer (afgekeurd): het levende veld van de Ruimte
   ís de achtergrond. Twee kleivormen geven de sectie haar eigen plek —
   de olijf draagt de tekst, de groene vangt rechtsonder het zakje. Zo
   is er diepte zonder dat er iets met de tekst concurreert. */
html.ruimte-aan .blad--hero,
.blad--hero {
  position: relative;
  width: 100vw; margin-left: calc(50% - 50vw);
  padding-block: clamp(76px, 10vh, 118px) clamp(54px, 7.5vh, 88px);
  padding-inline: max(clamp(22px, 6vw, 80px), calc((100vw - 1140px) / 2));
  overflow: clip;
  background: none;
  -webkit-mask-image: none; mask-image: none;
}
/* De sectie heeft overflow:clip, dus een vorm die buiten de rand begint
   wordt daar recht afgesneden — precies wat er misging. Beide vormen
   staan nu volledig binnen het kader: je ziet de hele organische vorm,
   nergens een rechte snede. */
html.ruimte-aan .blad--hero::before,
.blad--hero::before {
  content: ""; position: absolute; z-index: -1; display: block;
  width: min(46vw, 560px); aspect-ratio: 1.08 / 1;
  left: clamp(10px, 2.4vw, 52px); top: 4%;
  background: var(--olijf); opacity: .15;
  border-radius: var(--blob);
  inset-inline-end: auto; inset-block-end: auto;
  animation: adem-blob 34s ease-in-out infinite;
}
html.ruimte-aan .blad--hero::after,
.blad--hero::after {
  content: ""; position: absolute; z-index: -1;
  width: min(27vw, 330px); aspect-ratio: 1 / 1.06;
  right: clamp(10px, 2.4vw, 52px); bottom: 5%;
  background: var(--groen); opacity: .10;
  border-radius: var(--blob2);
  animation: adem-blob2 30s ease-in-out infinite -11s;
}
@media (prefers-reduced-motion: reduce) {
  .blad--hero::before, .blad--hero::after { animation: none; }
}
.rust .blad--hero::before, .rust .blad--hero::after { animation: none; }

/* ── blad 1: hero ─────────────────────────────────────────────── */

.blad--hero {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: clamp(30px, 6vw, 80px);
  align-items: center;
}

.hero__kop {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 400;
  letter-spacing: -.02em;
  line-height: 1.1;
  font-size: clamp(2.3rem, 5.4vw, 4rem);
  margin-bottom: 1.5rem;
  position: relative;
}
/* de annotatie hoort bij de doorstreepte belofte: hij stond rechts in de
   lucht met de pijl naar niets. Nu staat hij eronder, tegen de kop aan,
   en wijst de pijl naar de tekst die volgt. */
.pen--boven {
  display: block; margin: .35em 0 0 .15em;
  font-size: 1.5rem; transform: rotate(-2.5deg);
}
.hero__tekst .type { margin-bottom: 1.1rem; max-width: 46ch; }
.hero__actie { display: flex; align-items: center; gap: 18px; margin-top: 1.8rem; }
.pen--pijl { font-size: 1.45rem; }

/* De weggever was een zaadzakje met plakband — het meest "tuincentrum"
   element van de hele site. Nu is het een rustige kaart in room met een
   kleirand: hetzelfde aanbod, volwassen gebracht. */
.zakje {
  position: relative;
  background: var(--room);
  border: 1px solid var(--inkt-fluister);
  border-radius: 4px 4px 60% 60% / 4px 4px 14% 14%;
  padding: 34px 28px 30px;
  text-align: left;
}
.zakje::before { display: none; }
.zakje--hero { max-width: 330px; justify-self: center; }
.zakje__nr {
  font-family: var(--grotesk); font-weight: 600; font-size: .68rem;
  letter-spacing: .2em; color: var(--groen); display: block;
}
.zakje__naam {
  font-family: var(--serif); font-weight: 400; font-size: 1.55rem;
  letter-spacing: -.015em; line-height: 1.15; display: block; margin-top: 6px;
}
.zakje__bloem { display: none; }
.zakje__voet {
  font-family: var(--grotesk); font-size: .68rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--inkt-dof);
  display: block; margin-top: 26px; padding-top: 16px;
  border-top: 1px solid var(--inkt-fluister); line-height: 1.6;
}
.zakje__gratis { display: none; }

/* het cadeau-merk: een klein kapitaal in klei, geen rubberstempel */
.zakje__stempel {
  display: inline-block;
  font-family: var(--grotesk); font-weight: 600; font-size: .62rem;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--room); background: var(--groen);
  border-radius: 999px; padding: 5px 12px; margin-bottom: 14px;
}
.zakje__soort {
  font-family: var(--type); font-size: .88rem; line-height: 1.6;
  color: var(--inkt-dof); display: block; margin-top: 10px;
}
.zakje__open {
  font-family: var(--grotesk); font-weight: 600; font-size: .72rem;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--groen); background: none; cursor: pointer;
  border: 0; border-bottom: 1.5px solid var(--groen);
  padding: 4px 1px; margin-top: 20px;
  transition: color 180ms var(--ease-uit);
}
.zakje__open:hover { color: var(--groen-diep); }

.gift { display: grid; gap: 10px; margin-top: 18px; }
.gift__label { font-family: var(--serif); font-style: italic; font-size: 1.02rem; color: var(--groen); }
.gift__veld {
  font-family: var(--type); font-size: .9rem; color: var(--inkt);
  background: rgba(255,255,255,.5);
  border: 0; border-bottom: 1.5px solid var(--inkt-fluister); padding: 9px 4px;
}
.gift__veld:focus { outline: 2px solid var(--groen); outline-offset: 2px; }
.gift__stuur { justify-self: start; font-size: .7rem; padding: .9em 1.6em; }
.gift__dank { margin-top: 14px; font-size: 1.05rem; }

/* de vallende zaadjes hoorden bij het zakje en zijn nu misplaatst */
.zakje__zaad { display: none; }

/* de lijst van zeventien in het aanbod */
.poort--gratis { color: var(--inkt); font-weight: 600; }
.poort__gratis {
  font-family: var(--grotesk); font-weight: 600; font-size: .58rem;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--room); background: var(--groen);
  border-radius: 999px; padding: 2px 8px; margin-left: 8px;
}

/* ── blad 2: de foto en het water ────────────────────────────── */

.zaai {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(30px, 5vw, 70px);
  align-items: center;
}

/* de ingeplakte foto: witte fotorand, plakband, licht scheef */
/* De foto zat in een witte polaroidrand met plakband. Nu zit hij in een
   blob met een kleivorm eronder — dezelfde taal als de hero. */
/* De kleivorm achter een foto nam de hoogte van de hele figure — dus óók
   van het bijschrift eronder. Daardoor stak er een olijf blok onder de
   foto uit, dwars door "nog niets geplant" heen. Nu is de figure een
   grid: beeld en kleivorm delen cel 1, het bijschrift staat in cel 2. De
   vorm kan dus per definitie niet meer onder het beeld uitsteken —
   behalve de sikkel die hij van zijn verschuiving krijgt. */
.foto {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr);
  background: none; padding: 0; box-shadow: none; transform: none;
}
.foto > img, .foto > .foto__kader, .foto > .videokader, .foto::before {
  grid-area: 1 / 1;
}
.foto::before {
  content: ""; z-index: 0;
  background: var(--olijf); border-radius: var(--blob);
  transform: translate(-3.5%, 3%) scale(.94);
}
.foto__schrift { grid-area: 2 / 1; }
.foto img { display: block; width: 100%; height: auto; position: relative; z-index: 1; }
.foto__schrift { font-family: var(--serif); font-style: italic; }
/* donkere ondergrond: mocht er ooit één frame geen beeld zijn, dan
   schijnt de bijna-witte fotorand er niet doorheen als een flits */
.foto__kader { position: relative; z-index: 1; overflow: hidden;
  border-radius: var(--blob); background: #241d16; }
.foto__kader video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
/* de foto's zitten nu in blobs: de onderrand loopt bol, dus een bijschrift
   op 10px leest als plakkend. Meer lucht, en links uitgelijnd met de tekst. */
/* de sikkel steekt onder de foto uit; zonder deze lucht loopt het
   bijschrift er dwars doorheen */
.foto__schrift { margin-top: 26px; text-align: center; font-size: 1.08rem; }
/* Het bijschrift stond in hetzelfde groen als de sikkel er vlak boven en
   liep daardoor visueel met die vorm samen, ook al is er 48px lucht.
   In inkt leest het meteen als onderschrift. */


/* ── de Geluksmeter: invulbaar, met een stengel die meegroeit ──── */

.meterblad {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(24px, 4vw, 56px); align-items: start;
}

/* De vijf vragen hadden op desktop helemaal geen eigen opmaak — alleen
   de mobiele query verwees ernaar. Daardoor stonden label en invulregel
   tegen elkaar geplakt en de vragen tegen elkaar: het voelde als één
   blok in plaats van vijf momenten. Dit is wat het nodig had: lucht
   ertussen, en een haarlijn die de vragen scheidt zonder een tabel te
   worden. */
.formulier__vragen {
  list-style: none; margin: 1.6rem 0 0; padding: 0;
  counter-reset: vraag;
}
.formulier__vragen li {
  position: relative;
  padding: 1.05rem 0 1.1rem 2.2rem;
  display: grid; gap: .5rem;
}
.formulier__vragen li + li { border-top: 1px solid rgba(43, 36, 30, .1); }
/* een klein nummer in de kantlijn: je ziet in één blik dat het er vijf
   zijn, en hoe ver je bent */
.formulier__vragen li::before {
  counter-increment: vraag; content: counter(vraag);
  position: absolute; left: 0; top: 1.15rem;
  font-family: var(--grotesk); font-size: .68rem; font-weight: 600;
  letter-spacing: .1em; color: rgba(58, 107, 68, .55);
}
.formulier__vragen label { display: block; line-height: 1.5; }
.formulier__vragen .antwoordlijn { width: 100%; }

/* Het bedankje na de Geluksmeter. Het staat er pas als de mail écht weg
   is, dus het mag ook echt iets zeggen — en het wordt ondertekend, want
   een handtekening maakt van een systeemmelding een mens. */
.formulier__dank {
  display: block; margin-top: 14px; line-height: 1.55;
  max-width: 42ch;
}
.formulier__dank.is-fout { color: #9a3412; }
.formulier__ondertekening {
  display: block; margin-top: .5rem;
  font-size: 1.35em; color: var(--groen);
}

/* de antwoordlijn is een echte invulregel — schrijven in balpen */
.antwoordlijn {
  flex: 1 1 220px; min-width: 180px;
  font-family: var(--hand); font-size: 1.3rem; color: var(--balpen);
  background: transparent; border: none;
  border-bottom: 1px dashed rgba(34, 31, 26, .3);
  padding: 0 2px 3px;
  transition: border-color 160ms var(--ease-uit);
}
.antwoordlijn::placeholder { color: var(--inkt-fluister); font-style: italic; }
.antwoordlijn:focus { outline: none; border-bottom-color: var(--balpen); }
.antwoordlijn.is-vol { border-bottom-color: var(--blad); }

/* ── de boom bij de Geluksmeter ───────────────────────────────
   De glazen buis is eruit. Een thermometer meet, en meten is niet wat
   deze vijf vragen doen: je zet iets neer en er groeit iets uit. De
   boom wordt in js/boom.js procedureel getekend — hier staat alleen
   hoe de lijnen zich gedragen.

   Alles is LIJN. Geen enkel vlak, geen schaduw, geen verloop: de
   tekening moet naast Nele's handschrift kunnen staan. */

.boom {
  position: relative; margin: .4rem 0 0;
  width: clamp(150px, 19vw, 235px);
  display: flex; flex-direction: column; align-items: center;
  /* Onderaan uitlijnen, niet bovenaan. Twee redenen, en de tweede is de
     echte: de boom hoort op de grond te staan in plaats van in de lucht
     te hangen, én de laurierstengel hangt van de rechterbovenhoek naar
     binnen. Bovenaan uitgelijnd stond de hele tekening precies áchter
     die bladeren en was er niets van te zien. */
  align-self: end;
}
.boom__doek { width: 100%; height: auto; display: block; overflow: visible; }

/* Elke tak, elk blad en elke knop trekt zichzelf. pathLength="1" maakt
   de streeplengte los van hoe lang het pad werkelijk is, dus een korte
   twijg en de stam tekenen even snel — anders schiet een twijgje in
   een oogwenk vol terwijl de stam nog bezig is. */
.boom__deel {
  fill: none;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 820ms var(--ease-uit) var(--vertraag, 0ms),
              fill-opacity 620ms linear var(--vertraag, 0ms);
}
.boom__deel.is-gegroeid { stroke-dashoffset: 0; }

.boom__tak  { stroke: var(--groen-diep); }
.boom__blad { stroke: var(--olijf); stroke-width: 1.1; fill: var(--olijf); fill-opacity: 0; }
.boom__blad.is-gegroeid { fill-opacity: .26; }
.boom__knop { stroke: var(--groen); stroke-width: 1.2; fill: var(--room); fill-opacity: 0; }
.boom__knop.is-gegroeid { fill-opacity: .85; }

.boom__grond {
  fill: none; stroke: var(--inkt-fluister); stroke-width: 1.2; stroke-linecap: round;
}
/* Het zaad ligt er zolang er niets ingevuld is en zakt weg zodra de stam
   eruit komt: het is opgegaan in wat eruit groeit. */
.boom__zaad {
  fill: var(--groen-diep); opacity: .5;
  transition: opacity 500ms var(--ease-uit), transform 700ms var(--ease-uit);
  transform-box: view-box; transform-origin: center;
}
.boom:not([data-stand="0"]) .boom__zaad { opacity: 0; transform: scale(.3); }

/* De wieging. Een stilstaande tekening naast vijf invulregels is dood;
   dit is de enige beweging en ze mag nauwelijks opvallen. Het draaipunt
   ligt in de voet van de stam, dus de kruin beweegt en de grond niet. */
@keyframes boom-wieg {
  0%, 100% { transform: rotate(-1.1deg); }
  50%      { transform: rotate(1.35deg); }
}
.boom__wieg { transform-box: view-box; animation: boom-wieg 9s ease-in-out infinite; }

.boom__stand { margin-top: .9rem; font-size: 1.05rem; text-align: center; }

@media (max-width: 700px) {
  /* Op een telefoon staat de boom ONDER de vragen in plaats van ernaast,
     en dan mag hij groter — daar is de volle kolombreedte voor. */
  .meterblad { grid-template-columns: 1fr; justify-items: center; }
  .boom { width: min(230px, 62vw); margin-top: 1.4rem; }
  .boom__stand { margin-top: .6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .boom__deel, .boom__zaad { transition: none; }
  .boom__wieg { animation: none; }
}

.formulier__mail label { display: block; margin-bottom: .8rem; }
.formulier__rij { display: flex; gap: 12px; flex-wrap: wrap; }
.formulier__veld {
  flex: 1 1 240px;
  font-family: var(--hand); font-size: 1.3rem; color: var(--balpen);
  background: transparent;
  border: none; border-bottom: 2px solid var(--inkt);
  padding: .35em .2em; outline: none;
}
.formulier__veld:focus { border-bottom-color: var(--balpen); }
.formulier__veld::placeholder { color: var(--inkt-fluister); }
.formulier__dank { margin-top: 1rem; font-size: 1.35rem; }

/* ── blad 4: het aanbod ──────────────────────────────────────── */

.aanbod { display: grid; gap: clamp(50px, 8vw, 90px); }

.ding {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(26px, 5vw, 60px);
  align-items: center;
}
/* om en om: foto links, dan rechts — een schrift is nooit symmetrisch */
.ding--omgekeerd .ding__foto { order: 2; }

/* de foto's zijn platliggende opnames op dezelfde houten tafel: één
   fotografische taal voor het hele aanbod, licht scheef ingeplakt */
/* de aanbodfoto's zitten in blobs met een kleisikkel erachter, om en om
   naar links en naar rechts verschoven */
.ding__foto { margin: 0; position: relative; }
.ding__foto img {
  width: 100%; height: auto; display: block;
  position: relative; z-index: 1;
  border-radius: var(--blob);
}
.ding__foto::before {
  content: ""; position: absolute; inset: 3%; z-index: 0;
  background: var(--olijf); border-radius: var(--blob);
  transform: translate(-4%, 4%);
}
.ding--omgekeerd .ding__foto img,
.ding--omgekeerd .ding__foto::before { border-radius: var(--blob2); }
.ding--omgekeerd .ding__foto::before { transform: translate(4%, -4%); }
/* het boek zweeft en heeft geen masker nodig */
.ding--boek .ding__foto::before { display: none; }
.ding:nth-child(odd)  .ding__foto { transform: none; }
.ding--omgekeerd .ding__foto { transform: none; }

/* het boek krijgt géén tafelfoto: enkel de cover zelf, zwevend boven zijn
   eigen schaduw. Een boek is een staand object, dus het staat rechtop en
   iets kleiner dan de liggende foto's ernaast. De schaduw eronder is een
   apart vlak — zo zweeft het echt, in plaats van dat het plakt. */
.ding__foto--zweeft {
  display: flex; justify-content: center; align-items: center;
  padding: clamp(10px, 2vw, 26px) 0 clamp(30px, 4vw, 48px);
}
.ding--boek .ding__foto--zweeft { transform: none; }
.ding__foto--zweeft img {
  width: auto; max-width: min(100%, 300px); height: auto;
  border-radius: 2px;
  box-shadow:
    0 1px 2px rgba(34,31,26,.16),
    0 10px 20px -10px rgba(34,31,26,.30),
    0 40px 60px -34px rgba(34,31,26,.55);
}
/* de zachte slagschaduw op de grond eronder */
.ding__foto--zweeft::after {
  content: ""; position: absolute; left: 50%; bottom: clamp(12px, 2vw, 22px);
  width: min(64%, 210px); height: 22px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(34,31,26,.26), transparent 70%);
  filter: blur(5px); z-index: -1;
}

.ding__nr {
  display: block;
  font-family: var(--grotesk); font-weight: 600; font-size: .66rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--groen);
  margin-bottom: .9rem;
}

/* de kleine geruststelling onder de knop: wat je krijgt, hoe lang het van
   jou blijft en dat je terug kan. Dat wegnemen van twijfel doet het werk,
   niet nóg een keer het woord "zaadjes". */
.gerust {
  font-family: var(--type); font-size: .76rem; line-height: 1.6;
  color: var(--inkt-dof); margin-top: .85rem; max-width: 42ch;
}
.gerust__pen { display: block; margin-top: .5rem; font-size: 1.08rem; }

.poort__nr {
  color: var(--stempelrood); font-weight: 700;
  margin-right: .5em; font-size: .78rem;
}

@media (max-width: 760px) {
  .ding, .ding--omgekeerd { grid-template-columns: 1fr; gap: 22px; }
  .ding--omgekeerd .ding__foto { order: 0; }
    /* het boek vult anders het hele scherm en loopt door de rotatie
     links buiten beeld */
  .ding__foto--zweeft img { max-width: min(62%, 230px); }
  .ding--boek .ding__foto--zweeft { transform: none; }
}

.ding__uitleg h3 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 1.95rem); letter-spacing: -.015em;
  line-height: 1.15; margin-bottom: .8rem;
}
.ding__uitleg .type { max-width: 44ch; margin-bottom: .8rem; }
.prijs { margin: .4rem 0 1.1rem; }

/* het boek: haar échte cover, als object op de pagina */
.boek--echt {
  max-width: 240px; margin: 0 auto;
  box-shadow: -6px 8px 0 -2px #ddd5c2, -6px 8px 0 -1px rgba(34,31,26,.18), 0 20px 40px -20px rgba(34,31,26,.35);
  border: 1px solid rgba(34,31,26,.14);
}
.boek--echt img { display: block; width: 100%; height: auto; }

/* de bundel van 17 zakjes met elastiek */
.bundel { position: relative; max-width: 250px; margin: 0 auto; aspect-ratio: 1 / 1.1; }
.bundel__zakje {
  position: absolute; inset: 12% 8%;
  background: #e9e2cf;
  border: 1px solid rgba(34,31,26,.22);
  box-shadow: 0 2px 4px rgba(34,31,26,.1);
}
.bundel__zakje--3 { transform: rotate(6deg) translate(6px, 4px); }
.bundel__zakje--2 { transform: rotate(-4deg) translate(-4px, 2px); }
.bundel__zakje--1 { transform: rotate(1deg); display: flex; align-items: center; justify-content: center; }
.bundel__zakje--1 svg { width: 44%; stroke: var(--inkt); fill: none; stroke-width: 1.5; }
.bundel__elastiek {
  position: absolute; left: 2%; right: 2%; top: 48%; height: 9px;
  background: #b8a98c;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(34,31,26,.25);
  transform: rotate(-1deg);
}
.bundel__etiket {
  position: absolute; left: 50%; top: 44%;
  transform: translateX(-50%) rotate(-3deg);
  background: linear-gradient(100deg, rgba(226,213,172,.92), rgba(233,222,186,.85));
  padding: 4px 14px;
  box-shadow: 0 1px 3px rgba(34,31,26,.15);
  white-space: nowrap;
  font-size: 1.25rem;
}

/* de brief van het mentorship */
.brief {
  position: relative;
  max-width: 280px; margin: 0 auto;
  background: #faf7ef;
  border: 1px solid rgba(34,31,26,.16);
  box-shadow: 0 2px 5px rgba(34,31,26,.08), 0 18px 36px -20px rgba(34,31,26,.3);
  padding: 40px 26px 26px;
  border-radius: 18px;
}
.brief__regel { display: block; font-size: 1.45rem; margin-bottom: .3rem; }
.brief__handtekening { display: block; text-align: right; font-size: 1.6rem; margin-top: 1rem; }

/* ── blad 5: stemmen ─────────────────────────────────────────── */

.stemmen {
  display: grid;
  /* auto-fit: met twee getuigenissen bleef de derde kolom leeg staan */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(20px, 3vw, 36px);
  align-items: start;
}
/* ── de stemmen ───────────────────────────────────────────────
   Drie zachte room-kaarten met een blaadje op de hoek. Geen plakband
   en geen scheve stand meer: dat las als scrapbook. De rust komt van
   ruime witruimte, een cursieve serif en één dun streepje boven de
   naam — de citaten moeten klinken, niet schreeuwen. */
.kaartje {
  position: relative;
  background: linear-gradient(170deg, rgba(255,255,255,.86), rgba(247,242,232,.92));
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
          backdrop-filter: blur(10px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 26px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 2px 6px rgba(34,31,26,.05),
    0 22px 44px -26px rgba(34,31,26,.30);
  padding: clamp(30px, 3.4vw, 42px) clamp(26px, 3vw, 36px) clamp(26px, 3vw, 34px);
  transform: none !important;
  display: flex; flex-direction: column;
}
/* het blaadje hangt net over de rechterbovenhoek */
.kaartje__blad {
  position: absolute; top: -13px; right: 16px;
  width: 38px; height: 38px;
  fill: var(--olijf); stroke: none;
  opacity: .9;
  transform: rotate(6deg);
}
.kaartje__blad .kaartje__nerf {
  fill: none; stroke: rgba(255,255,255,.55); stroke-width: 1.4; stroke-linecap: round;
}
.kaartje--2 .kaartje__blad { transform: rotate(-4deg); }
.kaartje--3 .kaartje__blad { transform: rotate(10deg); }

/* het citaat: cursieve serif, ruim gezet */
.kaartje .pen {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(1.02rem, 1.25vw, 1.18rem); line-height: 1.62;
  letter-spacing: -.005em; color: var(--inkt);
  /* vaste lucht onder het citaat: met alleen margin-top:auto op de naam
     raakt het streepje de staarten van de laatste regel zodra een citaat
     de kaart vult */
  margin: 0 0 1.7rem;
}
/* één dun streepje boven de naam, zoals in het ontwerp */
.kaartje__naam {
  position: relative; margin-top: auto; padding-top: 22px;
  font-family: var(--grotesk); font-weight: 500; font-size: .68rem;
  /* niet --inkt-dof: op de roomkaart is dat 4,33:1 voor 11px kapitalen */
  letter-spacing: .18em; text-transform: uppercase; color: rgba(43, 36, 30, .8);
}
.kaartje__naam::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 34px; height: 1px; background: var(--inkt-fluister);
}

/* de drie staan op gelijke hoogte; het ritme komt van de kaarten zelf */
.stemmen { align-items: stretch; }

.nele__quote { margin-top: 1.4rem; }

/* ── de plant bij de Geluksmeter ───────────────────────────────
   Een echte vrijgesneden laurierlak, geen getekende vectoren: het moet
   herkenbaar een plant zijn en dat haalt een SVG niet. Daaronder zakken
   drie losse blaadjes heel traag door de sectie — één rondje duurt bijna
   een minuut, zodat het nooit als een animatie leest maar als iets dat
   toevallig gebeurt terwijl je zit te schrijven. */
.blad--meter { position: relative; }

.plant-tak {
  /* z-index 2: de tak hangt VÓÓR het formulier. Dat is wat een echte
     plant doet en het geeft de sectie diepte — de bladpunten vallen over
     de kaartrand, nooit over de tekst. */
  position: absolute; z-index: 2; pointer-events: none;
  /* De steel zit rechts in deze plaat en de bladeren waaieren naar links.
     Hij vertrekt daarom vanaf de rechter SCHERMrand — niet vanaf de
     tekstkolom — en staat er altijd volledig op: nooit afgesneden, hoe je
     het venster ook schaalt. */
  /* Iets hoger dan voorheen (was 1%): onder de tak staat nu de getekende
     boom van de Geluksmeter, en die twee mogen elkaar niet raken — een
     echte laurier over een pentekening heen leest als één rommelig vlak. */
  right: calc(50% - 50vw); top: -4%;
  width: min(31vw, 430px); height: auto;
  opacity: .92;
  filter: drop-shadow(-10px 16px 18px rgba(34, 31, 26, .16));
  transform-origin: 92% 40%;
  animation: tak-wieg 16s ease-in-out infinite;
}
/* de hele tak wiegt heel licht om zijn aanhechting, als in een tochtje */
@keyframes tak-wieg {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(1.4deg); }
}

.blaadjes {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  /* alleen de vallende blaadjes worden begrensd, niet de tak */
  overflow: clip;
}
.blaadje {
  position: absolute; top: -14%;
  height: auto; opacity: 0;
  will-change: transform, opacity;
}
.blaadje--1 { left: 16%; width: clamp(30px, 3.4vw, 52px);
  animation: blad-val-a 46s linear infinite; }
.blaadje--2 { left: 47%; width: clamp(20px, 2.2vw, 34px);
  animation: blad-val-b 58s linear infinite -19s; }
.blaadje--3 { left: 76%; width: clamp(34px, 3.8vw, 58px);
  animation: blad-val-c 52s linear infinite -34s; }

/* Elk blad zijn eigen baan: dwarrelen is nooit rechtlijnig. De opacity
   loopt op en weer af, zodat een blad opduikt en verdwijnt in plaats van
   abrupt bij de sectierand te beginnen. */
@keyframes blad-val-a {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0; }
  8%   { opacity: .55; }
  50%  { transform: translate3d(52px, 58vh, 0) rotate(122deg); opacity: .55; }
  92%  { opacity: 0; }
  100% { transform: translate3d(-18px, 128vh, 0) rotate(268deg); opacity: 0; }
}
@keyframes blad-val-b {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0; }
  10%  { opacity: .45; }
  50%  { transform: translate3d(-64px, 62vh, 0) rotate(-96deg); opacity: .45; }
  90%  { opacity: 0; }
  100% { transform: translate3d(26px, 130vh, 0) rotate(-214deg); opacity: 0; }
}
@keyframes blad-val-c {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0; }
  9%   { opacity: .50; }
  50%  { transform: translate3d(38px, 60vh, 0) rotate(148deg); opacity: .50; }
  91%  { opacity: 0; }
  100% { transform: translate3d(-44px, 126vh, 0) rotate(300deg); opacity: 0; }
}

/* In rust staan de blaadjes stil op verspreide, zichtbare plekken —
   niet opgestapeld bovenaan, want dan toont geen enkele schermafdruk dat
   ze er zijn. Buiten de kaart, zodat ze niet achter het formulier vallen. */
@media (prefers-reduced-motion: reduce) {
  .plant-tak { animation: none; }
  .blaadje { animation: none; }
  .blaadje--1 { opacity: .5; top: 30%; left: 9%;  transform: rotate(34deg); }
  .blaadje--2 { opacity: .42; top: 62%; left: 17%; transform: rotate(-58deg); }
  .blaadje--3 { opacity: .48; top: 74%; left: 79%; transform: rotate(22deg); }
}
.rust .plant-tak { animation: none; }
.rust .blaadje { animation: none; }
.rust .blaadje--1 { opacity: .5; top: 30%; left: 9%;  transform: rotate(34deg); }
.rust .blaadje--2 { opacity: .42; top: 62%; left: 17%; transform: rotate(-58deg); }
.rust .blaadje--3 { opacity: .48; top: 74%; left: 79%; transform: rotate(22deg); }

/* het formulier blijft boven de plant */
.blad--meter .formulier { position: relative; z-index: 1; }

@media (max-width: 700px) {
  /* Op mobiel is er geen ruimte naast de kaart, dus hangt de tak er
     ruim overheen: zo is hij eindelijk zichtbaar én geeft hij diepte. */
  .plant-tak {
    right: calc(50% - 50vw); top: -23%;
    width: min(58vw, 285px);
    opacity: .88;
  }
  /* De blaadjes dwarrelen van boven naar beneden door de hele sectie, en
     op een telefoon staan de vragen over de volle breedte: elk blad viel
     dus dwars door een vraag. Tobias: "bij de 5 vragen staat het blaadje
     telkens onder de tekst". Op een smal scherm dwarrelt er niets; de tak
     bovenaan blijft. */
  .blaadje { display: none; }

  /* de Geluksmeter was hier veel te groot: minder marge, kortere regels
     en een thermometer die niet meer los onder het formulier hangt */
  .blad--meter .formulier { padding: clamp(22px, 5vw, 30px); }
  .formulier__kop { font-size: clamp(1.35rem, 6vw, 1.7rem); }
  .formulier__vragen { margin: 1.1rem 0 0; }
  /* Krapper dan op desktop, maar de kantlijn met het nummer moet blijven:
     zonder padding-left valt het cijfer over de vraag heen. */
  .formulier__vragen li { padding: .85rem 0 .9rem 1.9rem; }
  .formulier__vragen li::before { top: .95rem; }
  .formulier__antwoord { font-size: 1.05rem; }
  /* De boom reserveert zijn volle hoogte, ook als er nog niets groeit —
     dan ligt er een zaadje onder 180px lucht, en dat las als een gat
     tussen de vragen en het mailveld. Kleiner op de telefoon en dichter
     op de vragen; groeien doet hij nog altijd. */
  .meterblad { gap: 6px; }
  .boom { width: min(150px, 42vw); margin-top: .4rem; }
  .boom__stand { font-size: .92rem; margin-top: .3rem; }
  /* Zolang er niets ingevuld is, is de boom een zaadje op de grond onder
     160px lucht. Die lucht valt weg tot de eerste letter; daarna groeit
     het kader mee met wat eruit komt. flex-end met overflow hidden knipt
     de bovenkant weg, niet de grond. */
  .boom {
    max-height: 420px; overflow: hidden; justify-content: flex-end;
    transition: max-height 900ms var(--ease-uit);
  }
  .boom[data-stand="0"] { max-height: 92px; }
}

/* Deze sectie had op desktop geen grid meer — alleen de mobiele query
   verwees er nog naar. Daardoor vulde de foto de volle kolombreedte en
   was ze veel te groot. Grid terug, en de foto krijgt een maat. */
.blad--nele {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1fr);
  gap: clamp(34px, 5vw, 76px);
  align-items: center;
}

/* Eén groot beeld: zij en het paard in hetzelfde moment. De collage van
   twee losse foto's las als drukte — dit ademt. */
.nele__beelden { position: relative; padding-bottom: clamp(38px, 4.5vw, 58px); }
.nele__groot {
  margin: 0; max-width: 100%;
  --schuif-x: 4%; --schuif-y: -3.5%;
}
.nele__groot img {
  aspect-ratio: 1 / 1.08;
  box-shadow: 0 34px 64px -40px rgba(34, 31, 26, .45);
}
/* Het bijschrift staat onder de hele compositie, niet in de figure:
   daarbinnen viel het achter de olijf sikkel die onder de foto uitsteekt. */
.nele__bijschrift {
  position: absolute; left: 0; right: 0; bottom: 0;
  text-align: center;
  font-family: var(--serif); font-style: italic;
  font-size: .96rem; color: var(--inkt-dof);
  margin: 0;
}

.nele__kop {
  font-family: var(--serif); font-weight: 400; letter-spacing: -.02em;
  font-size: clamp(1.9rem, 3.6vw, 2.9rem); line-height: 1.1;
  margin-bottom: 1.1rem;
}

/* ── blad 7: contact en het eikenblad ────────────────────────── */

.blad--contact h2 {
  font-family: var(--serif); font-weight: 400; letter-spacing: -.015em;
  font-size: clamp(1.8rem, 3.2vw, 2.5rem); line-height: 1.15;
}
/* het ingeplakte kaartje is weg; het blad zit nu in een blob */
.blad-ingeplakt { background: none !important; padding: 0 !important;
  box-shadow: none !important; transform: none !important; max-width: 330px;
  justify-self: center; position: relative; }
.blad-ingeplakt img { border-radius: var(--blob2); position: relative; z-index: 1; }
/* een dun, warm oplichtend randje om de vorm — het detail dat de foto
   uit het vlak tilt in plaats van erin te verdwijnen */
.blad-ingeplakt::after {
  content: ""; position: absolute; inset: -7px; z-index: 0;
  border-radius: var(--blob2);
  border: 1px solid rgba(231, 201, 180, .42);
  pointer-events: none;
}

/* ═══ Het slot van de homepage ═══
   Dit stond als twee kolommen: links álles (kop, formulier, agenda),
   rechts de foto. Daardoor kregen de twee wegen samen maar de helft van de
   breedte en vielen ze onder elkaar, met een "of"-streep ertussen — terwijl
   ze onderaan de mentorpagina wél naast elkaar staan en daar meteen duidelijk
   is dát je iets kiest.

   Nu hetzelfde raster als daar: de kop bovenaan (met de foto ernaast), en de
   twee keuzes eronder over de volle breedte, elk in een eigen kolom. */
.blad--contact { display: block; }
.contact { display: block; }
.contact h2 {
  font-family: var(--serif); font-weight: 400; letter-spacing: -.02em;
  font-size: clamp(2.1rem, 4.2vw, 3.2rem); line-height: 1.08;
  margin-bottom: .7rem;
}
.contact__onder { font-size: clamp(1rem, 1.3vw, 1.15rem); margin-bottom: 1.9rem; }

/* het adres als pil: één duidelijke handeling in plaats van een link
   die verdwijnt in de lopende tekst */
.contact__pil {
  display: inline-flex; align-items: center; gap: .7em;
  font-family: var(--type); font-weight: 600;
  font-size: clamp(1rem, 1.35vw, 1.18rem);
  color: var(--room); text-decoration: none;
  padding: 15px 26px; border-radius: 999px;
  background: rgba(247, 242, 232, .13);
  border: 1px solid rgba(247, 242, 232, .30);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background-color 170ms var(--ease-uit), border-color 170ms var(--ease-uit);
}
.contact__pil:hover {
  background: rgba(247, 242, 232, .22);
  border-color: rgba(247, 242, 232, .55);
}
.contact__pijl { transition: transform 170ms var(--ease-uit); }

/* ── de agenda naast het formulier ──────────────────────────────
   Twee wegen naast elkaar: schrijven wat er aan de hand is, of gewoon
   een moment kiezen. Het vak draagt zelf geen kader — het formulier
   ernaast is al een glazen paneel, en twee panelen naast elkaar vragen
   allebei om dezelfde aandacht. */
.afspraak { align-self: start; }
.afspraak__uitleg {
  margin: 0 0 1rem; max-width: 34ch;
  font-family: var(--type); font-size: .95rem; line-height: 1.6;
  color: rgba(43,36,30,.82);
}
.afspraak__knop { display: inline-block; }
.afspraak__klein {
  margin: .9rem 0 0; max-width: 36ch;
  font-family: var(--type); font-size: .8rem; line-height: 1.55;
  color: rgba(43,36,30,.68);
}
/* ── de vrije momenten, in onze eigen vormgeving ────────────────
   Geen ingebouwde Calendly. Die haalde een script van derden en zette
   cookies, en dus moest de bezoeker eerst toestemming geven vóór hij ook
   maar één vrij moment zag. Nu haalt de server ze op en tekenen we ze zelf:
   meteen zichtbaar, in de letters en kleuren van de site.

   .is-laden houdt de hoogte vast terwijl de momenten onderweg zijn. Zonder
   dat schiet het vak vol en verspringt de pagina onder je handen. */
.afspraak.is-laden { min-height: 220px; }

/* ── naam en mailadres, vóór de uren ────────────────────────────
   Twee smalle velden. Ze staan er niet om een formulier te zijn maar om
   te voorkomen dat iemand bij Calendly alsnog moet typen wat hij hier al
   had kunnen invullen. */
.afspraak__velden {
  display: grid; gap: 10px; margin: 1.1rem 0 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
}
.afspraak__veldwikkel { display: grid; gap: 4px; }
.afspraak__veldlabel {
  font-family: var(--grotesk); font-weight: 600; font-size: .6rem;
  letter-spacing: .14em; text-transform: uppercase; color: rgba(43,36,30,.76);
}
.afspraak__veld {
  font-family: var(--type); font-size: .95rem; color: var(--inkt);
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(43,36,30,.16);
  border-radius: 12px; padding: 10px 12px; width: 100%;
  transition: border-color 150ms var(--ease-uit), background-color 150ms var(--ease-uit);
}
.afspraak__veld:focus {
  outline: none; border-color: var(--groen); background: rgba(255,255,255,.85);
}
.afspraak__melding {
  margin: .7rem 0 0; min-height: 1.2em;
  font-family: var(--type); font-size: .85rem; line-height: 1.5;
  color: rgba(43,36,30,.8);
}
.afspraak__melding.is-fout { color: var(--stempelrood); }

.momenten { margin: 1.2rem 0 0; }

/* De dagen als raster, niet als schuifbalk. Er stonden elf dagen in een
   rij die zijwaarts schoof: de laatste kaartjes liepen half buiten beeld en
   je moest slepen om te zien wat er nog vrij was. Nu breekt de rij gewoon af
   op twee regels en staat alles er in één oogopslag. */
.momenten__dagen {
  display: grid; gap: 7px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 88px), 1fr));
}
.momentdag {
  display: inline-flex; align-items: baseline; justify-content: center; gap: 5px;
  min-width: 0; padding: 8px 10px;
  border-radius: 12px; cursor: pointer;
  background: rgba(255,255,255,.5);
  border: 1px solid rgba(43,36,30,.12);
  transition: background-color 150ms var(--ease-uit), border-color 150ms var(--ease-uit),
              color 150ms var(--ease-uit);
}
/* Alleen weekdag en datum. Het tellertje ("22 tijden") is weg: het maakte
   elf kaartjes druk zonder dat je er iets mee koos. */
.momentdag__dag {
  font-family: var(--grotesk); font-weight: 600; font-size: .56rem;
  letter-spacing: .1em; text-transform: uppercase; color: rgba(43,36,30,.7);
}
.momentdag__nr {
  font-family: var(--serif); font-size: .94rem; color: var(--inkt);
  line-height: 1.2; white-space: nowrap;
}
.momentdag:hover { border-color: rgba(58,107,68,.4); background: rgba(255,255,255,.75); }
.momentdag.is-aan {
  background: linear-gradient(172deg, #43764C, #33603D);
  border-color: transparent;
  box-shadow: 0 6px 14px -8px rgba(24,40,26,.7);
}
.momentdag.is-aan .momentdag__dag { color: #E8F0E1; }
.momentdag.is-aan .momentdag__nr { color: #F7F2E8; }
.momentdag:focus-visible { outline: 2px solid var(--groen); outline-offset: 2px; }

/* "meer dagen" en "alle momenten": een tekstknop, geen kaartje, zodat hij
   niet meetelt als een dag. */
.momenten__meer {
  display: inline-flex; align-items: center; align-self: center;
  background: none; border: 0; padding: 8px 6px; cursor: pointer;
  font-family: var(--type); font-size: .86rem; color: var(--groen-diep);
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: rgba(58,107,68,.4);
}
.momenten__meer:hover { text-decoration-color: currentColor; }
.momenten__meer:focus-visible { outline: 2px solid var(--groen); outline-offset: 2px; }

/* De uren per dagdeel. Voormiddag, namiddag, avond: drie kalme kopjes met
   het eerste open. Zo zie je nooit meer dan een handvol pillen tegelijk,
   en toch valt er niets weg. */
.momenten__tijden { margin-top: 10px; }
.dagdeel + .dagdeel { margin-top: 6px; }
.dagdeel__kop {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  width: 100%; background: none; border: 0; border-bottom: 1px solid rgba(43,36,30,.12);
  padding: 9px 2px 7px; cursor: pointer; text-align: left;
  font-family: var(--type); color: var(--inkt);
}
.dagdeel__naam { font-size: .92rem; font-weight: 500; }
.dagdeel__naam::before {
  content: "\203A"; display: inline-block; width: 14px; color: rgba(43,36,30,.5);
  transition: transform 150ms var(--ease-uit);
}
.dagdeel.is-open .dagdeel__naam::before { transform: rotate(90deg); }
.dagdeel__aantal { font-size: .78rem; color: rgba(43,36,30,.72); }
.dagdeel__kop:focus-visible { outline: 2px solid var(--groen); outline-offset: 2px; }
.dagdeel__uren {
  display: grid; gap: 7px; padding: 10px 0 6px;
  grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
}

/* De kleine vorm: de eerstvolgende drie momenten met dag én uur. */
.eerstvolgende { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.eerstvolgende .moment { padding-inline: 14px; white-space: nowrap; }

.moment {
  font-family: var(--type); font-size: .92rem; font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--groen-diep); text-decoration: none;
  padding: 9px 6px; border-radius: 999px;
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(58,107,68,.28);
  transition: background-color 150ms var(--ease-uit), border-color 150ms var(--ease-uit),
              color 150ms var(--ease-uit);
}
.moment:hover {
  background: linear-gradient(172deg, #43764C, #33603D);
  border-color: transparent; color: #F7F2E8;
}
.moment:focus-visible { outline: 2px solid var(--groen); outline-offset: 2px; }
/* Gedempt tot naam en mailadres kloppen. Bewust NIET verborgen en niet
   `disabled`: je moet kunnen zien wat er vrij is voordat je iets invult,
   en wie er toch op klikt hoort te horen waaróm het nog niet gaat in
   plaats van op een dode knop te drukken. */
/* Op `[data-afspraak]` en niet op `.afspraak`: de drie blokken heten elk
   anders (`.afspraak`, `.contact__afspraak`, `.dank__afspraak`) en op de
   homepage bleven de uren daardoor gewoon oplichten terwijl ze nog niet
   werkten. Het attribuut hebben ze alle drie. */
/* Gedempt met echte kleuren en niet met `opacity`. Een half doorzichtige
   pil op de diepgroene band trekt de letter mee naar beneden en dan zakt
   het contrast onder de norm; zo blijft de tekst op sterkte en is alleen
   het vlak lichter. De stippellijn zegt: hier valt straks op te klikken. */
[data-afspraak]:not(.is-klaar) .moment {
  background: rgba(255,255,255,.5);
  border: 1px dashed rgba(58,107,68,.34);
  color: var(--groen-diep);
}
[data-afspraak]:not(.is-klaar) .moment:hover {
  background: rgba(255,255,255,.5);
  border-color: rgba(58,107,68,.34); color: var(--groen-diep);
}
.contact__afspraak:not(.is-klaar) .moment,
.contact__afspraak:not(.is-klaar) .moment:hover,
.dank__afspraak:not(.is-klaar) .moment,
.dank__afspraak:not(.is-klaar) .moment:hover {
  background: transparent;
  border-color: rgba(247, 242, 232, .45);
  color: var(--room);
}

/* ── het contactformulier ───────────────────────────────────────
   Staat op een diepgroene band. De glazen velden van land.css zijn voor
   een lichte ondergrond gemaakt en worden hier onleesbaar, dus dit is een
   eigen, donkere variant: crème letters op een doorschijnend vlak, met een
   rand die oplicht waar je typt. */
.contactform {
  display: grid; gap: 12px; margin: 0 auto 1rem; max-width: 460px;
  text-align: left;
}
.contactform__rij {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
}
.contactform__vak { display: grid; gap: 5px; }
.contactform__label {
  font-family: var(--grotesk); font-weight: 600; font-size: .62rem;
  letter-spacing: .15em; text-transform: uppercase;
  color: rgba(247, 242, 232, .92);
}
.contactform__veld {
  font-family: var(--type); font-size: .97rem; color: var(--room);
  background: rgba(247, 242, 232, .06);
  border: 1px solid rgba(247, 242, 232, .38);
  border-radius: 14px; padding: 12px 14px; width: 100%;
  transition: border-color 160ms var(--ease-uit), background-color 160ms var(--ease-uit);
}
.contactform__veld::placeholder { color: rgba(247, 242, 232, .5); }
.contactform__veld:focus {
  outline: none;
  border-color: rgba(247, 242, 232, .85);
  background: rgba(247, 242, 232, .13);
}
.contactform__groot { resize: vertical; border-radius: 18px; }
.contactform__knop { justify-self: start; margin-top: 6px; }
/* Op groen is de gewone volle stempel (groen op groen) onzichtbaar. */
.contactform__knop.stempel--vol {
  background: var(--room); color: var(--groen-diep); border-color: var(--room);
}
.contactform__knop.stempel--vol:hover { background: #fff; border-color: #fff; }
/* ═══ Twee wegen: schrijven, of een moment prikken ═══════════════
   Ze stonden los onder elkaar en lazen als één sliert. Twee kaders met
   een "of" ertussen zegt in één blik dat er iets te kiezen valt. Geen
   nieuwe kleur: allebei een lichte sluier op dezelfde diepgroene band,
   zodat er niets bijkomt wat er nog niet was (huisregel 1b). */
/* De twee wegen naast elkaar, met de "of" als smalle kolom ertussen —
   dezelfde opbouw als .land__slot op de mentorpagina. */
.contactweg {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, .8fr);
  align-items: start;
  gap: 0; margin: 2.2rem 0 0;
}
.contactweg > .contactweg__vak:first-of-type { grid-column: 1; grid-row: 1 / 3; }
.contactweg > .contactweg__of { grid-column: 2; grid-row: 1 / 3; }
.contactweg > .contactweg__vak:last-of-type { grid-column: 3; grid-row: 1; }
.contactweg > .blad-ingeplakt {
  grid-column: 3; grid-row: 2;
  max-width: 250px; margin-top: clamp(22px, 3vw, 38px);
}
.contactweg__vak {
  padding: clamp(20px, 3vw, 28px);
  /* Dieper in plaats van lichter. Een crèmesluier maakte de ondergrond
     bleker en dan zakt crème tekst naar 3,6:1; een donkerder vlak op
     dezelfde band tilt hem juist op. Geen nieuwe kleur, alleen schaduw. */
  background: rgba(22, 30, 22, .17);
  border: 1px solid rgba(247, 242, 232, .22);
  border-radius: 22px;
}
.contactweg__label {
  display: block; margin-bottom: .5rem;
  font-family: var(--grotesk); font-weight: 600; font-size: .64rem;
  letter-spacing: .16em; text-transform: uppercase;
  color: rgba(247, 242, 232, .94);
}
.contactweg__lead {
  margin: 0 0 1.1rem; max-width: 44ch;
  font-size: .95rem; line-height: 1.6; color: var(--room);
}
.contactweg__klein {
  margin: 1rem 0 0; font-size: .86rem; line-height: 1.6;
  color: rgba(247, 242, 232, .92);
}
.contactweg__klein a { color: rgba(247, 242, 232, .95); }
/* de scheiding: een lijn met "of" erin, en geen kale witregel — anders
   lijken de twee kaders twee stappen in plaats van twee keuzes */
/* De streep loopt niet mee met de hoogste kolom: het formulier is dubbel zo
   hoog als het agendakader, en dan hangt er een halve meter lijn naast niets.
   Ze is zo lang dat ze allebei de kaders raakt en verder niet. */
.contactweg__of {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  align-self: start; height: 230px; margin: 0 clamp(14px, 2.2vw, 26px);
  font-family: var(--grotesk); font-weight: 600; font-size: .62rem;
  letter-spacing: .18em; text-transform: uppercase;
  color: rgba(247, 242, 232, .9);
}
/* De streep loopt verticaal en dooft aan beide uiteinden uit: een lijn die
   hard begint en hard stopt is precies de snede die hier nergens mag staan. */
.contactweg__of::before,
.contactweg__of::after {
  content: ""; flex: 1; width: 1px; border: 0;
}
.contactweg__of::before {
  background: linear-gradient(180deg, rgba(247,242,232,0), rgba(247,242,232,.2));
}
.contactweg__of::after {
  background: linear-gradient(180deg, rgba(247,242,232,.2), rgba(247,242,232,0));
}
.contactweg .contact__afspraak { margin-top: 0; }
.contactweg .afspraak__uitleg { margin-bottom: .9rem; }

/* het nieuwsbriefvinkje op de diepgroene band: crème, zoals de rest */
.contactform__vink {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 2px 0 6px; cursor: pointer;
  font-family: var(--type); font-size: .86rem; line-height: 1.55;
  color: rgba(247, 242, 232, .86); max-width: 46ch;
}
.contactform__vink input { flex: none; margin-top: .22em; width: 16px; height: 16px; accent-color: var(--room); }
.beeldvraag__vink { margin: 8px 0 14px; }
.contactform__melding {
  margin: 0; min-height: 1.2em;
  font-family: var(--type); font-size: .86rem; line-height: 1.5;
  color: rgba(247, 242, 232, .86);
}
.contactform__melding.is-fout { color: #FFD9CE; }

.contact__pil:hover .contact__pijl { transform: translateX(4px); }

/* ── de tweede weg: meteen een moment prikken ───────────────────
   Deze staat op een DIEPGROENE band, dus de opmaak van .afspraak (bedoeld
   voor de lichte mentorpagina) klopt hier niet: donkere tekst op donker
   groen haalt geen enkel contrast. Zelfde vorm als de mailpil ernaast,
   maar zonder vulling — het mailadres blijft de eerste weg. */
.contact__afspraak { margin-top: 1.1rem; }
.contact__afspraak .afspraak__uitleg {
  margin: 0 0 .8rem; max-width: 38ch;
  font-family: var(--type); font-size: .93rem; line-height: 1.6;
  color: rgba(247, 242, 232, .93);
}
.contact__afspraak .afspraak__knop {
  display: inline-flex; align-items: center;
  font-family: var(--grotesk); font-weight: 600; font-size: .7rem;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--room); text-decoration: none;
  padding: 13px 24px; border-radius: 999px;
  background: transparent;
  border: 1px solid rgba(247, 242, 232, .42);
  transition: background-color 170ms var(--ease-uit), border-color 170ms var(--ease-uit);
}
.contact__afspraak .afspraak__knop:hover {
  background: rgba(247, 242, 232, .14);
  border-color: rgba(247, 242, 232, .7);
}
.contact__afspraak .afspraak__klein {
  margin: .8rem 0 0; max-width: 40ch;
  font-family: var(--type); font-size: .78rem; line-height: 1.55;
  color: rgba(247, 242, 232, .86);
}
/* De momentenlijst is getekend voor de lichte mentorpagina; hier staat ze
   op diepgroen. De datumkopjes zijn daar donker op donker — gemeten 1,3:1,
   praktisch onzichtbaar — dus die krijgen hier hun eigen kleur. De pilletjes
   zelf zijn crème met groene letter en werken op allebei. */
.contact__afspraak .afspraak__veldlabel { color: rgba(247, 242, 232, .92); }
.contact__afspraak .afspraak__veld {
  color: var(--room);
  background: rgba(247, 242, 232, .06);
  border-color: rgba(247, 242, 232, .38);
}
.contact__afspraak .afspraak__veld:focus {
  border-color: rgba(247, 242, 232, .85); background: rgba(247, 242, 232, .13);
}
.contact__afspraak .afspraak__melding { color: rgba(247, 242, 232, .88); }
.contact__afspraak .afspraak__melding.is-fout { color: #FFD9CE; }
.contact__afspraak .momenten { margin-top: 1rem; }
.contact__afspraak .momenten__meer { color: rgba(247, 242, 232, .9); text-decoration-color: rgba(247,242,232,.4); }
.contact__afspraak .dagdeel__kop { color: var(--room); border-bottom-color: rgba(247,242,232,.22); }
.contact__afspraak .dagdeel__naam::before { color: rgba(247,242,232,.6); }
.contact__afspraak .dagdeel__aantal { color: rgba(247,242,232,.7); }
.contact__afspraak .momentdag {
  background: rgba(247, 242, 232, .14); border-color: rgba(247, 242, 232, .3);
}
.contact__afspraak .momentdag__dag { color: rgba(247, 242, 232, .8); }
.contact__afspraak .momentdag__nr { color: var(--room); }
.contact__afspraak .momentdag:hover {
  background: rgba(247, 242, 232, .24); border-color: rgba(247, 242, 232, .55);
}
.contact__afspraak .momentdag.is-aan {
  background: var(--room); border-color: var(--room);
}
.contact__afspraak .momentdag.is-aan .momentdag__dag,
.contact__afspraak .momentdag.is-aan .momentdag__nr { color: var(--groen-diep); }
.contact__afspraak .moment {
  background: rgba(247, 242, 232, .92);
  border-color: rgba(247, 242, 232, .5);
}
.contact__afspraak .moment:hover {
  background: #F7F2E8; border-color: #F7F2E8; color: var(--groen-diep);
}

/* het streepje boven de ondertekening, zoals bij de stemmen */
.contact__klein {
  position: relative; margin-top: 2.2rem; padding-top: 20px;
  /* .62 gaf op deze diepgroene band 3,23:1 — te weinig voor lopende tekst. */
  color: rgba(247, 242, 232, .86); font-size: .92rem;
}
.contact__klein::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 62px; height: 1px; background: rgba(247, 242, 232, .34);
}

/* het gedroogde blad — geen bijschrift, bewust */
.blad-ingeplakt { position: relative; justify-self: center; padding-top: 10px; }
.eikenblad-foto {
  display: block; width: 150px; height: auto;
  transform: rotate(7deg);
  /* multiply laat het papier van de site door het papier van de foto ademen */
  mix-blend-mode: multiply;
}

/* de vlinder van de cover — strijkt neer op het zakje, ademt traag */
.vlinder {
  position: absolute; right: 14px; top: -36px;
  width: 86px; height: 64px;
  transform: rotate(9deg);
}
.vlinder__vlk { stroke: rgba(34,31,26,.25); stroke-width: .8; }
.vlinder__vlk--roze  { fill: #d9a7b8; opacity: .75; }
.vlinder__vlk--groen { fill: #9bbd8e; opacity: .75; }
.vlinder__lijf { fill: none; stroke: #5a5346; stroke-width: 1.6; stroke-linecap: round; }
.vlinder__l, .vlinder__r { transform-origin: 40px 32px; }
@keyframes flapL { 0%,100% { transform: scaleX(1); } 50% { transform: scaleX(.72) skewY(-3deg); } }
@keyframes flapR { 0%,100% { transform: scaleX(1); } 50% { transform: scaleX(.72) skewY(3deg); } }
@keyframes zweef { 0%,100% { transform: rotate(9deg) translateY(0); } 50% { transform: rotate(7deg) translateY(-5px); } }
.vlinder { animation: zweef 5.2s ease-in-out infinite; }
.vlinder__l { animation: flapL 3.4s ease-in-out infinite; }
.vlinder__r { animation: flapR 3.4s ease-in-out infinite; }
.rust .vlinder, .rust .vlinder__l, .rust .vlinder__r { animation: none; }


/* ── voet ─────────────────────────────────────────────────────── */

.voet {
  /* Was een kaarsrechte streep van rand tot rand. Nu een lijn die aan
     beide kanten wegvalt — dezelfde afspraak als de golfranden: niets op
     deze site houdt hard op. */
  position: relative;
  margin-top: 40px;
  padding: 30px clamp(20px, 5vw, 64px) 44px;
  display: flex; flex-wrap: wrap; gap: 14px 34px; align-items: baseline; justify-content: space-between;
  font-size: .88rem; color: var(--inkt-dof);
}
.voet::before {
  content: ""; position: absolute; left: 8%; right: 8%; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--inkt-fluister) 22%,
                              var(--inkt-fluister) 78%, transparent);
}
.voet a { color: inherit; }
.voet a:hover { color: var(--stempelrood); }
.voet__links { display: flex; gap: 22px; }

/* ── EDG-pagina: extra onderdelen ────────────────────────────── */

.edg-hero { text-align: left; max-width: 780px; }
.edg-hero__label { font-size: 1rem; color: var(--inkt-dof); margin-bottom: .6rem; display: block; }
.edg-hero .hero__kop {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 400;
  letter-spacing: -.02em;
  line-height: 1.08; max-width: 15ch; }
.edg-hero__feiten { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 1.6rem; color: var(--inkt-dof); font-size: .92rem; }

/* Nele: "de lay-out van de tekst lijkt rommelig". Het vinkje hing op de
   basislijn en zakte bij elke regel anders; de regels braken op 60ch net
   ongelijk. Vinkje bovenaan vast, iets smaller zodat elk punt op twee
   regels valt, en gelijke lucht ertussen. */
.checklijst { list-style: none; max-width: 56ch; margin: 0 0 1.6rem; padding: 0; }
.checklijst li { display: flex; gap: 14px; margin-bottom: 1.15rem; align-items: flex-start; line-height: 1.6; }
.checklijst .vinkje {
  flex: 0 0 1.2em; margin-top: -.15em;
  font-family: var(--hand); font-size: 1.5rem; line-height: 1; color: var(--stempelrood);
  transform: rotate(-6deg);
}

.moeilijk { max-width: 62ch; }
.moeilijk .type { margin-bottom: 1rem; }
.moeilijk__citaat {
  margin: 1.8rem 0 0; padding-left: 1.2rem;
  border-left: 3px solid var(--stempelrood);
}

.programma { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); max-width: 860px; }
.programma__punt { border-top: 2px solid var(--inkt); padding-top: .9rem; }
.programma__punt .nr { font-family: var(--grotesk); font-weight: 800; color: var(--stempelrood); margin-right: 8px; }
.programma__punt h3 { font-family: var(--serif); font-weight: 500; font-size: 1.12rem; letter-spacing: -.01em; display: inline; }
.programma__punt p { margin-top: .5rem; color: var(--inkt-dof); font-size: .95rem; max-width: 38ch; }

/* vier korte feiten in plaats van vier blokken met uitleg: op een
   telefoon scheelde dat een half scherm en het zegt evenveel */
.feiten {
  list-style: none; margin: 1.6rem 0 1.6rem; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px 26px;
}
.feiten li {
  display: flex; align-items: baseline; gap: 11px;
  font-family: var(--type); font-size: .96rem; color: var(--inkt);
  padding: 9px 0;
  position: relative;
}
.feiten li::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, rgba(34,31,26,.16), rgba(34,31,26,.16) 62%, transparent);
}
.feiten .nr {
  font-family: var(--grotesk); font-weight: 600; font-size: .64rem;
  letter-spacing: .1em; color: var(--groen);
}

/* meldingen aan de deur van de Tuinkamer */
.deur__melding {
  font-family: var(--type); font-size: .86rem; line-height: 1.5;
  color: var(--inkt-dof); margin-top: .9rem; text-align: center;
}
.deur__melding.is-fout { color: var(--stempelrood); }
.deur__nota a { color: var(--groen); text-decoration: underline; text-underline-offset: 3px; }

/* de prijs op de kassapagina */
.start__prijs { margin: 1.4rem 0 .4rem; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }

/* ── de 17 poorten, gegroepeerd per manier ────────────────────
   Zeventien losse zakjes naast elkaar werden op een telefoon een kolom
   van bijna 2400 pixels. Nu staan ze per manier bij elkaar in zes
   glazen bladen, en klapt elke groep open en dicht. Dat is niet alleen
   compacter — het is ook wat de tekst belooft: ieder mens vindt geluk
   op een andere manier. */
.zaaitafel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(12px, 1.6vw, 18px);
  margin-top: 2.4rem;
  align-items: start;
}

.poortgroep {
  background: linear-gradient(180deg, rgb(250 247 240 / .88), rgb(247 242 232 / .70));
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
          backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 22px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 22px 44px -30px rgba(34,31,26,.45);
  overflow: hidden;
}

.poortgroep__kop {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto 12px;
  align-items: center; gap: 14px;
  width: 100%; text-align: left;
  padding: 16px clamp(16px, 2.2vw, 22px);
  background: none; border: 0; cursor: pointer;
  transition: background-color 160ms var(--ease-uit);
}
.poortgroep__kop:hover { background: rgba(255,255,255,.5); }
.poortgroep__bloem {
  width: 22px; height: 34px;
  fill: none; stroke: var(--groen); stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
}
.poortgroep__woord strong {
  display: block; font-family: var(--serif); font-weight: 400;
  font-size: 1.18rem; color: var(--inkt); letter-spacing: -.015em;
}
.poortgroep__zin {
  display: block; font-family: var(--type); font-size: .8rem;
  color: var(--inkt-dof); margin-top: 2px;
}
.poortgroep__telling {
  font-family: var(--grotesk); font-weight: 600; font-size: .62rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--groen);
  white-space: nowrap;
}
.poortgroep__pijl {
  width: 10px; height: 6px; fill: none; stroke: var(--inkt-dof);
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  transition: transform 220ms var(--ease-uit);
}
.poortgroep.is-open .poortgroep__pijl { transform: rotate(180deg); }

/* dicht: nul hoogte, maar met een grid-overgang zodat het schuift in
   plaats van springt. De 0fr→1fr-truc werkt alleen op één kind, dus de
   lijst zit in een wikkel. */
.poortgroep__lade {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 320ms var(--ease-uit);
}
.poortgroep.is-open .poortgroep__lade { grid-template-rows: 1fr; }
.poortgroep__lade > * { min-height: 0; overflow: hidden; }
.poortgroep__lijst { list-style: none; margin: 0; padding: 0; }

.poort {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: baseline; gap: 12px;
  padding: 11px clamp(16px, 2.2vw, 22px);
  border-top: 1px solid var(--inkt-fluister);
}
.poort__nr {
  font-family: var(--grotesk); font-weight: 600; font-size: .68rem;
  letter-spacing: .08em; color: var(--groen);
}
.poort__woord strong {
  display: block; font-family: var(--type); font-weight: 500;
  font-size: .95rem; color: var(--inkt); line-height: 1.35;
}
.poort__zin {
  display: block; font-family: var(--type); font-size: .8rem;
  color: var(--inkt-dof); margin-top: 2px;
}
.poort__gratis {
  font-family: var(--grotesk); font-weight: 800; font-size: .6rem;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--papier); background: var(--groen);
  padding: 4px 8px; border-radius: 999px; white-space: nowrap;
}
.poort--gratis { background: rgba(110, 122, 85, .09); }

@media (max-width: 620px) {
  .poortgroep__kop { grid-template-columns: 22px minmax(0, 1fr) 12px; gap: 11px; }
  .poortgroep__telling { display: none; }   /* het aantal staat al in de lijst */
  .poort { grid-template-columns: 26px minmax(0, 1fr); }
  .poort__gratis { grid-column: 2; justify-self: start; margin-top: 6px; }
}

/* prijsblad */
.prijsblad {
  max-width: 560px; margin: 0 auto; text-align: center;
  background: linear-gradient(180deg, rgb(250 247 240 / .92), rgb(247 242 232 / .76));
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
          backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, .78);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 28px 56px -34px rgba(34,31,26,.45);
  padding: clamp(30px, 5vw, 54px);
  border-radius: 28px;
  position: relative;
}
.prijsblad__stempel {
  display: inline-block;
  font-family: var(--grotesk); font-weight: 700; font-size: .72rem; letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--papier); background: var(--groen);
  border-radius: 999px;
  padding: .6em 1.4em;
  margin-bottom: 1.4rem;
}
.prijsblad__bedrag { font-family: var(--serif); font-weight: 400; letter-spacing: -.02em; font-size: 3.8rem; line-height: 1; }
.prijsblad__eenmalig { color: var(--inkt-dof); margin-bottom: 1.4rem; }
.prijsblad ul { list-style: none; text-align: left; max-width: 34ch; margin: 0 auto 1.6rem; }
.prijsblad li { display: flex; gap: 12px; margin-bottom: .55rem; align-items: baseline; }
.prijsblad .vinkje { font-family: var(--hand); font-size: 1.3rem; color: var(--stempelrood); }
.prijsblad__garantie { font-size: .9rem; color: var(--inkt-dof); margin-top: 1.2rem; max-width: 40ch; margin-left: auto; margin-right: auto; }

/* faq als uitklapbare vragen */
.vragen { max-width: 700px; }
/* De scheiding tussen twee vragen was een harde streep van rand tot rand.
   Op deze site houdt niets hard op: de lijn valt aan beide kanten weg. */
.vragen details { position: relative; padding: 1rem 0; }
.vragen details::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, rgba(34,31,26,.22), rgba(34,31,26,.22) 72%, transparent);
}
.vragen summary {
  font-family: var(--type); font-weight: 700; font-size: 1.02rem;
  cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; gap: 16px; align-items: baseline;
}
.vragen summary::-webkit-details-marker { display: none; }
.vragen summary::after { content: "+"; font-family: var(--grotesk); font-weight: 800; color: var(--stempelrood); }
.vragen details[open] summary::after { content: "–"; }
.vragen details p { margin-top: .7rem; color: var(--inkt-dof); max-width: 58ch; }

.slotcta { text-align: center; max-width: 620px; margin: 0 auto; }
.slotcta h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2rem, 4vw, 3rem); line-height: 1.12;
  letter-spacing: -0.015em; margin-bottom: 1rem; }
.slotcta .type { margin-bottom: 1.6rem; }
.slotcta__garantie { display: block; margin-top: 1rem; color: var(--inkt-dof); font-size: .88rem; }

/* welkomvideo-slot: krijgt straks Nele's echte mp4 */
/* Was een leeg vak met een nepknop; nu de echte <video>. De vorm blijft
   dezelfde, zodat de kleivorm erachter nog steeds klopt. */
/* HET KADER. De video zat in een kleivorm (--blob): mooi, maar de
   knoppenbalk van de browser plakt tegen de ónderrand, en juist daar
   snijdt zo'n bolle vorm het diepst naar binnen. De afspeelknop viel
   daardoor buiten beeld — je kon de film niet starten. De organische
   vorm blijft nu waar hij hoort: in het olijfvlak eráchter. De film
   zelf krijgt een zachte rechthoek, zodat elke knop bereikbaar is. */
.videokader {
  position: relative; z-index: 1; width: 100%; max-width: 640px;
  display: block; line-height: 0;
}
.video-slot {
  position: relative; z-index: 1; width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--papier-diep);
  border-radius: clamp(16px, 2.2vw, 26px);
  display: block; object-fit: cover;
}

/* ── de eigen afspeelknop ─────────────────────────────────────
   Hij bedekt het hele beeld: waar je ook klikt, de film start. Dat is
   wat mensen bij een stilstaand videobeeld verwachten. Zodra hij loopt
   verdwijnt de knop en neemt de browser het over met zijn eigen balk. */
.videokader__play {
  position: absolute; inset: 0; z-index: 2;
  /* NIET in het midden: daar zit Nele's gezicht, en een knop over iemands
     gezicht is precies wat een warme opname koud maakt. Linksonder, op de
     bank naast haar — even duidelijk, en het portret blijft heel. */
  display: flex; align-items: flex-end; justify-content: flex-start;
  gap: clamp(12px, 1.6vw, 18px);
  padding: clamp(16px, 2.4vw, 26px);
  border: 0; cursor: pointer;
  border-radius: clamp(16px, 2.2vw, 26px);
  /* de doek is bodemzwaar: bovenin blijft het beeld zoals het is, onderin
     genoeg donker om de ring en de tijd te laten staan */
  background: linear-gradient(180deg, rgba(28,24,18,0) 38%,
                                       rgba(28,24,18,.16) 66%,
                                       rgba(28,24,18,.52) 100%);
  transition: background-color 200ms var(--ease-uit), opacity 320ms var(--ease-uit);
}
.videokader.is-bezig .videokader__play { opacity: 0; pointer-events: none; }
.videokader__ring {
  width: clamp(58px, 7vw, 76px); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(250,247,239,.9);
  -webkit-backdrop-filter: blur(6px) saturate(1.4);
          backdrop-filter: blur(6px) saturate(1.4);
  box-shadow: 0 10px 30px -12px rgba(20,26,16,.6),
              inset 0 1px 0 rgba(255,255,255,.9);
  transition: transform 220ms var(--ease-uit), background-color 220ms var(--ease-uit);
}
.videokader__ring::after {
  content: ""; margin-left: .18em;
  border-left: clamp(17px, 2vw, 22px) solid var(--groen);
  border-top: clamp(11px, 1.3vw, 14px) solid transparent;
  border-bottom: clamp(11px, 1.3vw, 14px) solid transparent;
}
.videokader__play:hover .videokader__ring,
.videokader__play:focus-visible .videokader__ring { transform: scale(1.06); background: #fff; }
.videokader__play:focus-visible { outline: 3px solid var(--room); outline-offset: -6px; }
.videokader__woord {
  font-family: var(--grotesk); font-weight: 600;
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--room); line-height: 1.35; text-align: left;
  text-shadow: 0 1px 12px rgba(20,26,16,.6);
  padding-bottom: .5em;   /* op de onderlijn van de ring */
}
.videokader__woord em {
  display: block; font-style: normal; opacity: .72;
  letter-spacing: .12em; font-weight: 500; margin-top: 2px;
}
.videokader__ring { flex: none; }
@media (prefers-reduced-motion: reduce) {
  .videokader__play, .videokader__ring { transition: none; }
}
/* het videovak is smaller dan de kolom; de vorm volgt hem */
.foto:has(.videokader)::before {
  justify-self: start; width: min(100%, 640px);
  transform: translate(4%, -4%) scale(.96);
}
.video-slot__knop {
  width: 74px; height: 74px; border-radius: 50%;
  border: 3px solid var(--stempelrood); background: rgba(250,247,239,.85);
  display: grid; place-items: center; cursor: pointer;
  transition: transform 140ms var(--ease-uit);
}
.video-slot__knop:hover { transform: scale(1.05); }
.video-slot__knop::after {
  content: ""; margin-left: 5px;
  border-left: 20px solid var(--stempelrood);
  border-top: 12px solid transparent; border-bottom: 12px solid transparent;
}

/* ── responsief ──────────────────────────────────────────────── */

@media (max-width: 880px) {
  .blad--hero, .blad--nele, .blad--contact { grid-template-columns: 1fr; }
  /* Onder elkaar, en dan is de "of" weer een streep dwars: verticaal
     tussen twee blokken die boven elkaar staan zegt hij niets. */
  .contactweg { grid-template-columns: 1fr; }
  .contactweg > .contactweg__vak:first-of-type,
  .contactweg > .contactweg__of,
  .contactweg > .contactweg__vak:last-of-type,
  .contactweg > .blad-ingeplakt { grid-column: 1; grid-row: auto; }
  .contactweg__of {
    flex-direction: row; height: auto; align-self: auto; margin: 16px 2px;
  }
  .contactweg__of::before, .contactweg__of::after { width: auto; height: 1px; }
  .contactweg__of::before {
    background: linear-gradient(90deg, rgba(247,242,232,0), rgba(247,242,232,.2));
  }
  .contactweg__of::after {
    background: linear-gradient(90deg, rgba(247,242,232,.2), rgba(247,242,232,0));
  }
  .contactweg > .blad-ingeplakt { margin-top: clamp(24px, 6vw, 40px); }
  .zakje--hero { margin-top: 20px; }
  .kaartje--2 { transform: none; }
  .ding, .ding:nth-child(even) { grid-template-columns: 1fr; }
  .ding:nth-child(even) > :first-child { order: 0; }
  .programma { grid-template-columns: 1fr; }
  .pen--boven { position: static; display: block; margin-top: .3em; transform: rotate(-2deg); }
  .br-desktop { display: none; }
  .nele__groot { max-width: 420px; margin-inline: auto; }
  .nele__bijschrift { text-align: center; }
}

@media (max-width: 520px) {
  body { font-size: 16px; }
  .kop { padding-top: 10px; padding-bottom: 10px; }
  .kop__merk { font-size: 1rem; }
  .kop__beeldmerk { height: 38px; margin-block: -4px; }
  .kop__nav { gap: 12px; }
  .kop__nav a:not(.kop__cta) { display: none; }
  .kop__cta { font-size: .85rem; white-space: nowrap; }
  .zaaitafel { grid-template-columns: 1fr; }   /* de poortgroepen onder elkaar */
  .hero__actie { flex-wrap: wrap; }
}

/* ── rust en toegankelijkheid ────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
.rust * { transition: none !important; animation: none !important; }

:focus-visible { outline: 3px solid var(--balpen); outline-offset: 3px; }


/* ── de citaatband: effen groen met plantenrelief ─────────────
   Hier stond een wateroppervlak op een foto. Dat las als drukte: de zin is
   het enige dat hier mag spreken. Nu is de band effen olijf, met alleen
   een reliëf van bladeren erin gedrukt — je ziet het pas als je kijkt.

   Het gedroogde eikenblad dat hier stond is eruit (afgekeurd). Daardoor
   is er één kolom en heeft de zin lucht. */
.citaatband { position: relative; isolation: isolate; }
.band.citaatband {
  /* GEEN GROEN. Deze band lag op alle vier de pagina's tussen twee BEIGE
     secties, en dan komt er ineens een olijfgroene balk uit het niets —
     "van waar komt dat groen? van beige naar beige met groen ertussen,
     dat kan niet." Terecht: een overgang mag alleen kleuren gebruiken die
     aan minstens één van beide kanten al in het spel zijn.

     Wat blijft is de adempauze zelf: een diepere beige die opzwelt en weer
     wegzakt, met het bladreliëf erin. Groen zit op deze site waar het iets
     betekent (de contactband, de accenten, de knoppen), niet als vulling
     tussen twee secties. */
  padding: 0;
  min-height: clamp(300px, 36vh, 440px);
  color: var(--inkt);
  background:
    radial-gradient(120% 90% at 18% 0%,  rgba(255,255,255,.28), rgba(255,255,255,0) 62%),
    radial-gradient(90% 120% at 88% 100%, rgba(43,36,30,.055),  rgba(43,36,30,0)   64%),
    var(--haver-diep);
}

/* Het reliëf: dezelfde laurierbladeren als elders op de pagina, maar hier
   niet als beeld — als indruk. soft-light houdt ze binnen het groen; een
   spiegeling links en rechts maakt er een patroon van in plaats van een
   losse tak. */
.citaatband__relief {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  /* De twee grote takken zijn eruit. Ze kwamen elk van een andere hoek de
     band in en kruisten elkaar in het midden — dat leest als rommel, niet
     als reliëf. Wat blijft zijn twee losse blaadjes, ver uit elkaar. */
  background-image:
    url("assets/merk/plant_blad2.png"),
    url("assets/merk/plant_blad3.png");
  background-repeat: no-repeat;
  background-position: 10% 78%, 78% 16%;
  background-size:
    clamp(70px, 7vw, 108px) auto,
    clamp(120px, 13vw, 200px) auto;
  /* Op het oude groen werkte soft-light met een lichte plaat; op beige
     verdween het blad daarmee volledig. Multiply zet het terug als een
     schaduw van een blad op papier. */
  opacity: .13;
  mix-blend-mode: multiply;
  filter: blur(.4px);
}
.citaatband__relief::after {
  /* de spiegeling rechtsboven: zelfde tak, andere kant op */
  content: ""; position: absolute; inset: 0;
  background: url("assets/merk/plant_tak.webp") no-repeat 108% -14% / clamp(380px, 40vw, 620px) auto;
  transform: scaleX(-1);
  opacity: .8;
}

/* Het water krijgt dezelfde golfrand als elke andere sectie. De band schuift
   één golfhoogte omhoog onder de roomband; het masker snijdt zijn bovenkant
   weg en toont dus de room eronder — geen naad, geen rechte lijn. Onderaan
   schuift de zandband op dezelfde manier over het water heen. */
/* De groene band dooft onderaan uit in plaats van hard op te houden; de
   zandband eronder komt op met precies dezelfde uitvloei, zodat de twee
   vlakken in elkaar overlopen. */
/* De band schuift een stuk omhoog onder wat erboven ligt, zodat de twee
   elkaar overlappen in plaats van elkaar te raken. Het golfmasker dat hier
   stond is weg — het uitveren aan beide kanten gebeurt bij .band.citaatband. */
html.ruimte-aan .citaatband { margin-top: calc(-1 * var(--veer, 90px)); }
/* een blad binnen een band brengt zijn eigen padding niet mee */
.band .blad { padding: 0; }
.band .blad + .blad { margin-top: clamp(50px, 8vh, 90px); }



/* ── de vormen ademen ─────────────────────────────────────────
   Heel traag morfen de randen tussen drie standen. Twintig seconden per
   ronde en een verschuiving van een paar procent: je ziet het niet
   bewegen, je merkt alleen dat het leeft. Elke vorm start op een andere
   plek in de cyclus, anders deint de hele pagina in de maat mee. */

@keyframes adem-boog {
  0%, 100% { border-radius: 56% 56% 12% 12% / 46% 46% 6% 6%; }
  33%      { border-radius: 60% 52% 10% 14% / 50% 44% 5% 7%; }
  66%      { border-radius: 53% 59% 14% 10% / 43% 49% 8% 5%; }
}
@keyframes adem-blob {
  0%, 100% { border-radius: 62% 38% 46% 54% / 54% 45% 55% 46%; }
  33%      { border-radius: 55% 45% 52% 48% / 48% 52% 48% 52%; }
  66%      { border-radius: 67% 33% 41% 59% / 58% 41% 59% 42%; }
}
@keyframes adem-blob2 {
  0%, 100% { border-radius: 44% 56% 62% 38% / 48% 58% 42% 52%; }
  33%      { border-radius: 51% 49% 55% 45% / 54% 50% 50% 46%; }
  66%      { border-radius: 39% 61% 67% 33% / 43% 63% 37% 57%; }
}

.vorm--boog  img, .vorm--boog::before  { animation: adem-boog  22s ease-in-out infinite; }
.vorm--blob  img, .vorm--blob::before  { animation: adem-blob  26s ease-in-out infinite; }
.vorm--blob2 img, .vorm--blob2::before { animation: adem-blob2 24s ease-in-out infinite; }
.foto img, .foto__kader, .foto::before { animation: adem-blob 28s ease-in-out infinite; }
.ding__foto img, .ding__foto::before   { animation: adem-blob 25s ease-in-out infinite; }
.ding--omgekeerd .ding__foto img,
.ding--omgekeerd .ding__foto::before   { animation: adem-blob2 23s ease-in-out infinite; }

/* de kleivorm loopt een halve tel achter op de foto: daardoor ademt de
   sikkel mee in plaats van als één stuk met de foto te bewegen */
.vorm::before, .foto::before, .ding__foto::before { animation-delay: -6s; }

/* ook de zachte kleivlakken achter de secties */
.blad--hero::before  { animation: adem-blob  34s ease-in-out infinite; }
.blad--meter::before { animation: adem-blob2 36s ease-in-out infinite -14s; }
.blad--nele::before  { animation: adem-blob  32s ease-in-out infinite -20s; }

/* KAPOT BLOK, HERSTELD. Hier stond een `@media (prefers-reduced-motion)` met
   een KOMMA en een sluitaccolade waar `{ animation: none }` hoorde te staan.
   De accolades telden wél op — 801 om 801 — dus geen enkele controle sloeg
   aan. Twee gevolgen, allebei het omgekeerde van de bedoeling:

     1. Het media-blok was LEEG. De animatie-reset voor wie beweging uitzet
        bestond niet.
     2. De selectorlijst liep door tot de volgende accolade, twaalf regels
        verderop — de regel die het BOEK rechthoekig maakt en laat zweven.
        Daardoor kregen `.rust .foto img` en `.rust .foto::before`
        `border-radius: 2px !important` en `animation: zweef !important`.

   Netto: wie "beweging beperken" aanzette, kreeg Nele's foto rechthoekig én
   wiegend. `.rust * { animation: none !important }` verloor het op
   specificiteit (0,1,0 tegen 0,2,1).

   Nu twee losse, gesloten blokken die doen wat er staat. */
@media (prefers-reduced-motion: reduce) {
  .vorm img, .vorm::before, .foto img, .foto__kader, .foto::before,
  .ding__foto img, .ding__foto::before, .blad--hero::before {
    animation: none !important;
  }
}
.rust .vorm img, .rust .vorm::before, .rust .foto img, .rust .foto__kader,
.rust .foto::before, .rust .ding__foto img, .rust .ding__foto::before,
.rust .blad--hero::before {
  animation: none !important;
}


/* ── het boek blijft rechthoekig ──────────────────────────────
   Een boek ís een rechthoek. Het in een blob gieten maakt er een
   sticker van. Dus: scherpe hoeken, geen kleivorm erachter, maar het
   zweeft wel — het hangt boven zijn eigen schaduw en deint heel traag
   op en neer. Dat geeft de hoogte die de organische vormen elders
   met hun rand geven. */
.ding--boek .ding__foto img,
.ding__foto--zweeft img {
  border-radius: 2px !important;
  animation: zweef 7s ease-in-out infinite !important;
}
.ding--boek .ding__foto::before,
.ding__foto--zweeft::before { display: none; }

@keyframes zweef {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
/* de schaduw ademt mee: verder weg als het boek hoger hangt */
.ding__foto--zweeft::after { animation: zweef-schaduw 7s ease-in-out infinite; }
@keyframes zweef-schaduw {
  0%, 100% { transform: translateX(-50%) scale(1);    opacity: 1; }
  50%      { transform: translateX(-50%) scale(1.12); opacity: .62; }
}

/* ── Elke Dag Gelukkig zonder foto ────────────────────────────
   De zaadzakjes-foto was precies het tuinbeeld dat afgekeurd werd, en bij
   "poorten" klopte hij helemaal niet meer. De zeventien namen zijn zelf
   het sterkste beeld: een register dat je wil doorlezen. */
.ding--breed { grid-template-columns: 1fr; }
.ding--breed .ding__uitleg { max-width: 100%; }
.ding--breed .ding--breed /* prijs en knop stonden tegen elkaar aan op één regel */
.ding--breed .prijs { display: block; margin-bottom: 1.4rem; }
.ding--breed .stempel { display: inline-block; }

@media (max-width: 860px) { .ding--breed  }
@media (max-width: 560px) { .ding--breed  }

@media (prefers-reduced-motion: reduce) {
  .ding--boek .ding__foto img, .ding__foto--zweeft img,
  .ding__foto--zweeft::after { animation: none !important; }
}
.rust .ding--boek .ding__foto img, .rust .ding__foto--zweeft img,
.rust .ding__foto--zweeft::after { animation: none !important; }

/* ── de toestemmingsbalk ──────────────────────────────────────
   Moet er zijn (EU), mag niet schreeuwen. Onderaan, glas, twee knoppen,
   en de weigerknop is even goed zichtbaar als de andere — een balk waar
   je alleen "ja" kan aanklikken is geen toestemming. */
.toestemming {
  position: fixed; left: 50%; bottom: clamp(12px, 2.4vw, 26px); z-index: 60;
  width: min(100% - 28px, 640px);
  transform: translate(-50%, 130%);
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(14px, 3vw, 28px); flex-wrap: wrap;
  padding: 16px clamp(16px, 2.4vw, 24px);
  background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.45));
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  backdrop-filter: blur(16px) saturate(1.5);
  border: 1px solid rgba(255,255,255,.6); border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 18px 40px -20px rgba(43,36,30,.45);
  transition: transform 480ms var(--ease-uit);
}
.toestemming.is-op { transform: translate(-50%, 0); }
.toestemming__tekst { font-size: .84rem; line-height: 1.55; color: var(--inkt-dof); max-width: 40ch; }
.toestemming__knoppen { display: flex; align-items: center; gap: 14px; }
/* Aanvaarden en weigeren zijn VISUEEL GELIJK. Hier stond een kale
   tekstknop naast een gevulde groene stempel: weigeren zag er dan uit als
   een bijzaak en aanvaarden als de bedoeling. Dat is misleidend ontwerp in
   de zin van de EDPB-richtsnoeren 03/2022, en de Gegevensbeschermingsauto-
   riteit beboet er in België op. Zelfde vorm, zelfde grootte, zelfde
   gewicht — alleen de kleur van de rand verschilt, en dat mag. */
.toestemming__knop {
  font-family: var(--grotesk); font-weight: 600; font-size: .72rem;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .78em 1.5em; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--groen-diep);
  border: 1.5px solid var(--groen-diep);
  transition: background 160ms var(--ease-uit), color 160ms var(--ease-uit);
}
.toestemming__knop:hover { background: rgba(58, 107, 68, .08); }
.toestemming__knop:focus-visible { outline: 2px solid var(--groen-diep); outline-offset: 3px; }
.toestemming__link {
  color: var(--groen-diep); text-underline-offset: 3px;
}


/* ── het ledenvoordeel ────────────────────────────────────────
   Wie de zeventien poorten kocht, heeft al ja gezegd tegen haar manier
   van werken. Dat is precies de mens die je daarna persoonlijk wil zien.
   Bewust GEEN kortingstaal in de kop: "korting" maakt van een coach een
   uitverkoop. Het is een lidmaatschapsvoordeel — je hoort er al bij, en
   dat telt mee. Het percentage staat er wel, maar als gevolg, niet als
   lokkertje. */
.voordeel {
  position: relative;
  background: var(--room);
  border: 1px solid var(--inkt-fluister);
  border-radius: 4px 4px 44% 44% / 4px 4px 10% 10%;
  padding: clamp(24px, 3vw, 34px);
}
.voordeel__merk {
  display: inline-block;
  font-family: var(--grotesk); font-weight: 600; font-size: .6rem;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--room); background: var(--olijf);
  border-radius: 999px; padding: 5px 12px; margin-bottom: 14px;
}
.voordeel__kop {
  font-family: var(--serif); font-weight: 400; letter-spacing: -.015em;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.18; margin-bottom: .8rem;
}
.voordeel__tekst { font-size: .95rem; line-height: 1.7; color: var(--inkt-dof); max-width: 46ch; }
.voordeel__tekst strong { color: var(--inkt); font-weight: 600; }
.voordeel .stempel { margin-top: 1.4rem; }

/* in de ledenzone staat hij smaller, in de rail */
.rail .voordeel { border-radius: 4px 4px 30% 30% / 4px 4px 8% 8%; padding: 20px; }
.rail .voordeel__kop { font-size: 1.15rem; }
.rail .voordeel__tekst { font-size: .86rem; }

/* het overvloei-laagje voor de gietbeurt zonder film */

/* ── de uitklap onder Aanbod ──────────────────────────────────
   De drie productpagina's moeten vanaf de hoofdsite bereikbaar zijn.
   Zonder deze links bestaan ze alleen voor wie een advertentie zag — en
   dan mist ook Google de interne verwijzing naar je verkooppagina's. */
.kop__uit { position: relative; }
.kop__uitknop {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--grotesk); font-weight: 500; font-size: .74rem;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--inkt-dof); background: none; border: 0; cursor: pointer;
  padding: 7px 11px; border-radius: 999px;
  transition: color 160ms var(--ease-uit), background-color 160ms var(--ease-uit);
}
.kop__uitknop:hover, .kop__uit.is-open .kop__uitknop {
  color: var(--inkt); background: rgba(255, 255, 255, .5);
}
.kop__pijl {
  width: 9px; height: 6px; fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  transition: transform 200ms var(--ease-uit);
}
.kop__uit.is-open .kop__pijl { transform: rotate(180deg); }

.kop__lade {
  position: absolute; left: 50%; top: calc(100% + 12px);
  transform: translateX(-50%) translateY(-6px);
  width: min(320px, 84vw);
  /* Glas mag je door de pagina laten kijken, maar niet ten koste van de
     prijzen: op .82 -> .62 wit haalde de prijsregel 3,3:1 boven een foto
     of een groene band, en 4,5:1 is het minimum voor kleine tekst. Nu
     .95 -> .90 in crème (dezelfde waarden als het mobiele paneel, dat om
     precies dezelfde reden al dekkender was gezet). Blur en saturatie
     blijven staan — dáár zit het glas in, niet in de doorzichtigheid. */
  background: linear-gradient(180deg, rgb(250 247 240 / .97), rgb(247 242 232 / .94));
  -webkit-backdrop-filter: blur(20px) saturate(1.7);
  backdrop-filter: blur(20px) saturate(1.7);
  border: 1px solid rgba(255,255,255,.7); border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 20px 44px -22px rgba(43,36,30,.45);
  padding: 8px;
  opacity: 0; visibility: hidden;
  transition: opacity 200ms var(--ease-uit), transform 200ms var(--ease-uit), visibility 200ms;
}
.kop__uit.is-open .kop__lade {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
/* De brug over het gat tussen knop en lade. De lade hangt 12px lager; wie
   er met de muis heen ging, zweefde even boven niets en het menu sloot.
   Dit onzichtbare stuk hoort bij de lade, dus de muis blijft binnen. */
.kop__lade::before {
  content: ""; position: absolute;
  left: 0; right: 0; top: -18px; height: 20px;
}
/* de lade zit binnen .kop__nav en erfde daar de kapitalen en de
   letterspatiëring van; hier zetten we die terug naar leestekst */
.kop__lade a {
  display: block; padding: 11px 13px; border-radius: 10px;
  text-decoration: none; transition: background-color 150ms var(--ease-uit);
  text-transform: none; letter-spacing: normal; font-size: 1rem;
}
.kop__lade a:hover { background: var(--groen-zacht); }
.kop__lade strong {
  display: block; font-family: var(--serif); font-weight: 400;
  font-size: 1.06rem; color: var(--inkt); letter-spacing: -.01em;
}
.kop__lade span {
  display: block; font-family: var(--type); font-size: .8rem;
  /* niet --inkt-dof (62%): dat is bedoeld voor bijschriften op een rustig
     vlak, niet voor een prijs op glas. Op 78% haalt hij overal 6,5:1. */
  color: rgba(43, 36, 30, .78); margin-top: 3px;
}
/* ── "Al lid? Inloggen" ────────────────────────────────────────
   Een kale knop "Inloggen" laat een nieuwe bezoeker zich afvragen of hij
   iets gemist heeft: moet ik een account maken om verder te kunnen? Die
   twee woorden ervoor zeggen meteen dat de knop niet voor hem is — en
   voor wie wél lid is, is het juist een herkenningspunt. Ze staan
   kleiner en doffer, dus de balk wordt er niet drukker van. */
/* Het aanhefje "Al lid?" is er weer uit (afgekeurd: niet mooi). Het werk
   dat het deed — een nieuwe bezoeker laten weten waar die knop voor is —
   doet nu de inlogpagina zelf, en dat is ook de juiste plek: daar staat
   iemand die twijfelt, niet in de balk. */

.kop__lade-alles {
  font-family: var(--grotesk); font-weight: 600; font-size: .66rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--groen);
  border-top: 1px solid var(--inkt-fluister); border-radius: 0 !important;
  margin-top: 4px; padding-top: 13px !important;
}

/* ── het mobiele menu ─────────────────────────────────────────
   Onder 760px paste de navigatie niet in de balk en stond ze op
   display:none — het boek, het mentorship en de Tuinkamer waren daar dus
   niet te bereiken. Nu zit alles achter één knop naast de CTA. */
.kop__hamburger {
  display: none;
  width: 38px; height: 34px; padding: 0;
  flex-direction: column; justify-content: center; align-items: center; gap: 5px;
  background: rgba(255, 255, 255, .5); border: 1px solid rgba(255,255,255,.7);
  border-radius: 999px; cursor: pointer;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.kop__hamburger span {
  display: block; width: 15px; height: 1.5px; border-radius: 2px;
  background: var(--inkt);
  transition: transform 220ms var(--ease-uit), opacity 160ms var(--ease-uit);
}
html.menu-open .kop__hamburger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
html.menu-open .kop__hamburger span:nth-child(2) { opacity: 0; }
html.menu-open .kop__hamburger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.kop__mobiel {
  display: none;
  position: absolute; left: clamp(10px, 3vw, 22px); right: clamp(10px, 3vw, 22px);
  top: calc(100% - 4px);
  /* dekkend genoeg om leesbaar te zijn: half doorzichtig glas over een
     foto van Nele maakte de onderste links onleesbaar */
  background: linear-gradient(180deg, rgb(250 247 240 / .985), rgb(247 242 232 / .96));
  -webkit-backdrop-filter: blur(26px) saturate(1.7);
          backdrop-filter: blur(26px) saturate(1.7);
  border: 1px solid rgba(255,255,255,.8); border-radius: 20px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 26px 52px -24px rgba(43,36,30,.5);
  padding: 8px;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity 220ms var(--ease-uit), transform 220ms var(--ease-uit), visibility 220ms;
}
.kop__mobiel a {
  display: block; padding: 10px 14px; border-radius: 12px;
  text-decoration: none; text-transform: none; letter-spacing: normal;
}
.kop__mobiel a:active { background: var(--groen-zacht); }
.kop__mobiel a + a { border-top: 1px solid var(--inkt-fluister); border-radius: 0; }
.kop__mobiel strong {
  display: block; font-family: var(--serif); font-weight: 400;
  font-size: 1.02rem; color: var(--inkt); letter-spacing: -.01em;
}
.kop__mobiel span {
  display: block; font-family: var(--type); font-size: .74rem;
  color: var(--inkt-dof); margin-top: 2px;
}

@media (max-width: 760px) {
  .kop__uit { display: none; }   /* de uitklap zit nu in het mobiele paneel */
  .kop__hamburger { display: flex; }
  .kop__mobiel { display: block; }
  html.menu-open .kop__mobiel { opacity: 1; visibility: visible; transform: translateY(0); }
}

/* ── de intro ─────────────────────────────────────────────────
   Naar het idee van monolith.nyc: één woord, met een fotopaneel op de
   plek waar het koppelteken hoort. Het paneel heeft dezelfde verhouding
   als de hero-foto (4:5), zodat de overgang op het eind een zuivere
   vormverandering is en het beeld niet uitrekt. */

html.intro-bezig, html.intro-bezig body { overflow: hidden; }

.intro {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center;
  background: var(--haver);
  transition: background-color 520ms var(--ease-uit);
}
.intro.is-sluiten { background-color: transparent; pointer-events: none; }
.intro.is-weg { opacity: 0; transition: opacity 600ms var(--ease-uit); }

.intro__woord {
  display: flex; align-items: center;
  gap: clamp(4px, 0.8vw, 14px);
}
.intro__deel {
  font-family: var(--serif); font-optical-sizing: auto;
  font-weight: 600; letter-spacing: -.04em; line-height: .8;
  font-size: clamp(4rem, 15vw, 13rem);
  color: var(--inkt);
  transition: opacity 500ms var(--ease-uit), transform 700ms var(--ease-uit);
}
.intro.is-sluiten .intro__deel { opacity: 0; transform: translateY(-14px); }
/* het linkerdeel gaat een tikje later weg dan het rechter: dat leest als
   één beweging in plaats van als twee dingen die tegelijk verdwijnen */
.intro__deel:first-child { transition-delay: 60ms; }

.intro__paneel {
  margin: 0; overflow: hidden;
  width: clamp(84px, 11.5vw, 210px);
  aspect-ratio: 4 / 5;
  border-radius: 2px;
  background: var(--haver-diep);
  box-shadow: 0 18px 40px -26px rgba(43, 36, 30, .5);
}
.intro__beeld { display: block; width: 100%; height: 100%; object-fit: cover; }

.intro__staat, .intro__teller {
  position: absolute; bottom: clamp(18px, 3vw, 34px);
  font-family: var(--grotesk); font-weight: 500; font-size: .72rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--inkt-dof);
  transition: opacity 400ms var(--ease-uit);
}
.intro__staat  { left: clamp(18px, 3vw, 34px); }
.intro__teller { right: clamp(18px, 3vw, 34px); font-variant-numeric: tabular-nums; }
.intro.is-sluiten .intro__staat, .intro.is-sluiten .intro__teller { opacity: 0; }

/* ── de overgang naar de hero ─────────────────────────────────
   Eerst kwam de pagina pas óp nadat de intro verdwenen was. Dat gaf aan
   het eind nog een fade van bijna een seconde — precies de hapering die
   je niet wil na een beweging die net zo mooi landde.

   Nu komt de pagina op TIJDENS de morph. Tegen de tijd dat het paneel
   zijn plek bereikt staat alles er al, en is er bij het opruimen letterlijk
   niets meer te faden.

   Eén uitzondering: de hero-foto zelf. Daar landt het paneel bovenop, en
   twee keer hetzelfde beeld over elkaar geeft een dubbeling. Die staat op
   nul tot het laatste moment en springt dan aan — zonder overgang, want
   het is exact hetzelfde beeld op exact dezelfde plek. Je kan het verschil
   niet zien, en dát is de bedoeling. */
html.intro-bezig .kop, html.intro-bezig main { opacity: 0; }

html.intro-onthult .kop, html.intro-onthult main {
  opacity: 1;
  transition: opacity 560ms var(--ease-uit);
}

/* Alleen de FOTO blijft verborgen, niet de figure. Zette ik de hele
   figure op nul, dan verdween de groene sikkel erachter mee en plopte die
   er op het laatste moment bij. Nu staat de vorm er al klaar en vliegt het
   beeld erin — de lijst hangt eerst, dan komt het schilderij. */
html.intro-bezig .hero__beeld img,
html.intro-onthult .hero__beeld img { opacity: 0; }
html.intro-klaar .hero__beeld img { opacity: 1; transition: none; }

@media (prefers-reduced-motion: reduce) { .intro { display: none; } }
.rust .intro { display: none; }

/* ── het boekje bij haar verhaal ──────────────────────────────
   Een tweede, zachtere ingang naar het boek. Het aanbod verderop is een
   verkoopblok; dit is een terloopse zin met een cover ernaast, midden in
   het stuk waar ze vertelt wat ze doorliep. Klein gehouden: zodra dit
   even luid wordt als het aanbod, staat hetzelfde ding twee keer te
   roepen en gelooft niemand het nog. */
.boekje {
  margin-top: clamp(28px, 4vh, 44px);
  padding-top: clamp(22px, 3vh, 32px);
  border-top: 1px solid var(--inkt-fluister);
  max-width: 44ch;
}
.boekje__link {
  display: flex; align-items: center; gap: 20px;
  text-decoration: none; color: inherit;
}
.boekje__cover {
  width: 74px; height: auto; flex: none;
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(43,36,30,.18),
              0 8px 18px -10px rgba(43,36,30,.42);
  transition: transform 320ms var(--ease-uit), box-shadow 320ms var(--ease-uit);
}
.boekje__link:hover .boekje__cover {
  transform: translateY(-5px) rotate(-1.5deg);
  box-shadow: 0 2px 4px rgba(43,36,30,.2),
              0 18px 30px -14px rgba(43,36,30,.5);
}
.boekje__woord { display: block; }
.boekje__label {
  display: block;
  font-family: var(--grotesk); font-weight: 600; font-size: .62rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--groen);
  margin-bottom: 6px;
}
.boekje__titel {
  display: block;
  font-family: var(--serif); font-weight: 400; font-size: 1.24rem;
  line-height: 1.2; letter-spacing: -.015em; color: var(--inkt);
}
.boekje__bij {
  display: block; margin-top: 6px;
  font-family: var(--type); font-size: .82rem; color: var(--inkt-dof);
  transition: color 200ms var(--ease-uit);
}
.boekje__link:hover .boekje__bij { color: var(--groen); }

@media (max-width: 560px) { .boekje__link { gap: 15px; } .boekje__cover { width: 62px; } }

/* ── het merk van Elke Dag Gelukkig ───────────────────────────
   Het volledige logo waar het programma zich voorstelt; de klaver alleen
   als terugkerend teken. De klaver is een MASKER, geen afbeelding: zo
   blijft het haar tekening, maar neemt hij de kleur van zijn omgeving
   aan — groen op het papier, crème op een olijfband. Met een gewone PNG
   zou hij daar als een groene vlek blijven staan. */

.edg-logo { display: block; height: auto; }
.edg-logo--groot { width: min(100%, 340px); }
.edg-logo--mid   { width: min(100%, 260px); }

.klaver {
  display: inline-block; flex: none;
  width: 1.15em; height: 1.36em;
  background-color: currentColor;
  -webkit-mask: url("assets/merk/klaver.png") center / contain no-repeat;
  mask: url("assets/merk/klaver.png") center / contain no-repeat;
}
.klaver--groot { width: 2.4em; height: 2.84em; }

.ding__logo { margin-bottom: .9rem; }

/* ═══ De Levenslijn ═══════════════════════════════════════════
   Een wandeling over de volle breedte van het scherm. De zinnen staan
   om en om links en rechts, één draad slingert ertussen, en waar je
   blijft staan ontvouwt zich een blad. Geen kader: het levende veld
   ís de ondergrond, zoals overal op de site. */

.lijn {
  position: relative;
  width: 100vw; margin-left: calc(50% - 50vw);
  padding: clamp(40px, 8vh, 90px) 0 0;
}

/* De Levenslijn is zes schermen hoog en stond daarvan élke pixel op
   dezelfde beige grond. Precies daar begon de pagina als één lap te
   lezen. Er komt géén band omheen — dat zou de lijn juist in stukken
   hakken — maar een heel trage groene was die halverwege zijn diepste
   punt heeft en er aan beide kanten weer uit wegloopt. Je ziet nergens
   een overgang; je merkt alleen dat het onderweg groener wordt en aan
   het eind weer opklaart. Dat is de wandeling die de sectie beschrijft. */
.lijn::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(230, 235, 221, 0)    0%,
    rgba(230, 235, 221, .48) 13%,
    rgba(210, 219, 195, .62) 44%,
    rgba(221, 228, 210, .46) 74%,
    rgba(230, 235, 221, 0)  100%);
}
.lijn > * { position: relative; z-index: 1; }

/* de draad ligt over de hele sectie, achter de woorden */
.lijn__draad {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.draad__stippel {
  fill: none; stroke: var(--inkt-dof); stroke-width: 1.6;
  stroke-dasharray: .5 10; stroke-linecap: round;
  opacity: .55;
}
.draad__getrokken {
  fill: none; stroke: var(--groen-diep); stroke-width: 2.2;
  stroke-linecap: round;
  opacity: .85;
}
.draad__halte {
  fill: var(--haver); stroke: var(--inkt-dof); stroke-width: 1.4;
  transition: fill 600ms var(--ease-uit), stroke 600ms var(--ease-uit);
}
.draad__halte.is-gezien { fill: var(--groen); stroke: var(--groen-diep); }
.draad__blad { opacity: 0; transition: opacity 700ms var(--ease-uit); }
/* het puntje van de pen: reist op de tekenrand mee en gloeit zachtjes */
.draad__punt {
  fill: var(--groen);
  stroke: var(--room); stroke-width: 2;
  transition: opacity 500ms var(--ease-uit);
  animation: puntgloed 2.6s ease-in-out infinite;
}
@keyframes puntgloed {
  0%, 100% { fill-opacity: .85; }
  50%      { fill-opacity: 1; }
}
.rust .draad__punt { animation: none; }
.draad__blad.is-open { opacity: 1; }
.draad__bladvorm { fill: var(--groen); opacity: .8; }
.draad__bladnerf { fill: none; stroke: var(--room); stroke-width: 1.6; stroke-linecap: round; }

/* ── de intro ────────────────────────────────────────────────── */
.lijn__intro {
  position: relative; z-index: 1;
  max-width: 1080px; margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 48px) clamp(46px, 8vh, 84px);
  text-align: center;
}
/* het merkje: het enige groene vlak op deze hele sectie, dus het oog
   valt er vanzelf op zonder dat er iets schreeuwt */
.lijn__merk {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--grotesk); font-weight: 600; font-size: .68rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: #F7F2E8; background: var(--groen);
  border-radius: 999px; padding: 9px 18px;
  box-shadow: 0 12px 26px -14px rgba(58, 107, 68, .8);
}
/* een puntje dat traag aanzwelt: genoeg om te zeggen "dit leeft",
   te weinig om af te leiden van het lezen */
.lijn__merk-punt {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(247, 242, 232, .9);
  animation: lijnpuls 2.8s ease-in-out infinite;
}
@keyframes lijnpuls {
  0%, 100% { transform: scale(.75); opacity: .55; }
  50%      { transform: scale(1);   opacity: 1; }
}
.rust .lijn__merk-punt { animation: none; }

.lijn__kop {
  font-family: var(--serif); font-optical-sizing: auto;
  font-weight: 400; letter-spacing: -.022em; line-height: 1.1;
  font-size: clamp(1.9rem, 4.2vw, 3rem);
  margin: 1.1rem 0 0;
}
.lijn__lead {
  font-family: var(--type); font-size: 1.02rem; line-height: 1.7;
  color: rgba(43, 36, 30, .8);
  max-width: 46ch; margin: .9rem auto 0;
}
.lijn__hand { display: block; margin-top: .5rem; font-size: 1.05rem; }
/* een pijl die zachtjes zakt: het antwoord op "en nu?" */
.lijn__pijl {
  display: block; width: 1px; height: 42px; margin: 26px auto 0;
  background: linear-gradient(to bottom, rgba(58,107,68,.55), rgba(58,107,68,0));
  animation: lijnzak 3.4s ease-in-out infinite;
}
@keyframes lijnzak {
  0%, 100% { transform: translateY(0);   opacity: .5; }
  50%      { transform: translateY(8px); opacity: 1; }
}
.rust .lijn__pijl { animation: none; }
.lijn__intro .label::after { display: none; }

/* ── de momenten: om en om, elk bijna een scherm ─────────────── */
.lijn__moment {
  position: relative; z-index: 1;
  min-height: 62vh;
  max-width: 1080px; margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 48px);
  display: flex; flex-direction: column; justify-content: center;
  align-items: flex-start;
}
.lijn__moment--rechts { align-items: flex-end; text-align: right; }

.lijn__nr {
  font-family: var(--grotesk); font-weight: 600; font-size: .64rem;
  letter-spacing: .22em; color: var(--groen);
  margin-bottom: .8rem;
}
.lijn__zin {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.7rem, 3.6vw, 3rem); line-height: 1.22;
  letter-spacing: -.018em; color: var(--inkt);
  max-width: 13em; margin: 0;
  opacity: .38; transform: translateY(10px);
  transition: opacity 700ms var(--ease-uit), transform 700ms var(--ease-uit);
}
.lijn__moment.is-hier .lijn__zin { transform: none; }
.rust .lijn__zin { transition: none; transform: none; }
.lijn__moment.is-hier .lijn__zin { opacity: 1; }
.lijn__moment.is-hier .lijn__nr { opacity: 1; }
.lijn__nr { opacity: .55; transition: opacity 700ms var(--ease-uit); }

/* ── de stilte voor de onthulling ────────────────────────────── */
.lijn__stilte { height: 46vh; }

/* ── de onthulling ───────────────────────────────────────────── */
.lijn__onthulling {
  position: relative; z-index: 1;
  max-width: 1080px; margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 48px) clamp(70px, 12vh, 130px);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.lijn__spoor {
  margin: 0; display: grid; justify-items: center; gap: 10px;
  opacity: 0; transform: translateY(12px);
  transition: opacity 900ms var(--ease-uit) 300ms, transform 900ms var(--ease-uit) 300ms;
}
.lijn--onthuld .lijn__spoor { opacity: 1; transform: none; }
.lijn__spoor svg {
  width: clamp(96px, 11vw, 150px); height: auto;
  overflow: visible;
}
.lijn__spoor .pen { font-size: .92rem; text-align: center; }
.spoor__lijn { fill: none; stroke: var(--groen-diep); stroke-width: 1.6; stroke-linecap: round; }
.spoor__halte { fill: var(--groen); }
.spoor__kring {
  fill: none; stroke: var(--groen-diep); stroke-width: 1.4;
  stroke-dasharray: 3.2 2.3;      /* met de hand omcirkeld, niet perfect */
}

.lijn__woorden { display: grid; gap: 1.1rem; }
.lijn__regel {
  margin: 0;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.3rem, 2.4vw, 1.9rem); line-height: 1.35;
  color: var(--inkt);
  opacity: 0; transform: translateY(10px);
  transition: opacity 800ms var(--ease-uit), transform 800ms var(--ease-uit);
}
.lijn__regel em { font-style: italic; color: var(--groen-diep); }
.lijn__regel--nele { font-size: clamp(1.05rem, 1.8vw, 1.35rem); color: var(--inkt-dof); }
.lijn--onthuld .lijn__regel { opacity: 1; transform: none; }
.lijn--onthuld .lijn__regel:nth-child(1) { transition-delay: 200ms; }
.lijn--onthuld .lijn__regel:nth-child(2) { transition-delay: 1100ms; }
.lijn--onthuld .lijn__regel:nth-child(3) { transition-delay: 2100ms; }

.lijn__acties {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
  margin-top: .6rem;
  opacity: 0; transform: translateY(10px);
  transition: opacity 800ms var(--ease-uit) 3100ms, transform 800ms var(--ease-uit) 3100ms;
}
.lijn--onthuld .lijn__acties { opacity: 1; transform: none; }
.lijn__verder {
  font-family: var(--type); font-size: .88rem; color: var(--inkt-dof);
  text-decoration: underline; text-underline-offset: 4px;
}
.lijn__verder:hover { color: var(--groen-diep); }

/* rust of reduced motion: alles staat er meteen, niets beweegt */
.lijn--rust .lijn__regel, .rust .lijn__regel,
.lijn--rust .lijn__acties, .rust .lijn__acties,
.lijn--rust .lijn__spoor, .rust .lijn__spoor {
  transition: none; opacity: 1; transform: none;
}
.lijn--rust .lijn__zin, .rust .lijn__zin,
.lijn--rust .draad__blad, .rust .draad__blad { transition: none; }

@media (max-width: 700px) {
  /* de draad loopt in de linker kantlijn; de zinnen krijgen de ruimte.
     52vh per zin was op een telefoon 440px per zin: vijf zinnen werden
     drie schermen scrollen zonder dat er iets bijkwam. 42vh is nog ruim
     een derde scherm per zin — genoeg om te blijven hangen. */
  .lijn__moment { min-height: 42vh; padding-left: 58px; }
  .lijn__moment--rechts { align-items: flex-start; text-align: left; }
  .lijn__zin { font-size: clamp(1.45rem, 6.4vw, 1.9rem); }
  .lijn__stilte { height: 20vh; }
  /* Het slot stond 58px van links, met het spoor op 71 en de tekst op 58:
     nergens tegen uitgelijnd. Tobias: "staat niet gecentreerd". Nu in het
     midden, zoals de intro van dezelfde sectie — een conclusie staat in
     het midden. */
  .lijn__onthulling {
    grid-template-columns: 1fr;
    padding-left: clamp(20px, 5vw, 48px);
    justify-items: center; text-align: center;
    gap: 22px;
  }
  .lijn__spoor { justify-items: center; }
  .lijn__woorden { justify-items: center; }
  .lijn__acties { justify-content: center; }
}

/* ═══ De beeldvraag ═══════════════════════════════════════════
   Eerst iets geven, dan iets vragen. Links het formulier op een
   papieren blad, rechts het gratis zakje — kleiner dan vroeger,
   want het is nu de tweede keuze, niet de eerste. */
.beeldvraag {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .7fr);
  gap: clamp(30px, 5vw, 70px);
  align-items: start;
}
.beeldvraag__kop {
  font-family: var(--serif); font-weight: 400; letter-spacing: -.02em;
  font-size: clamp(1.7rem, 3.2vw, 2.5rem); line-height: 1.12;
  margin-bottom: .7rem;
}
.beeldvraag__form { display: grid; gap: 6px; margin-top: 1.6rem; }
.beeldvraag__label {
  font-family: var(--grotesk); font-weight: 600; font-size: .64rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--inkt-dof);
  margin-top: 12px;
}
.beeldvraag__optioneel { text-transform: none; letter-spacing: normal; font-weight: 400; }
.beeldvraag__veld {
  font-family: var(--type); font-size: .98rem; color: var(--inkt);
  background: rgba(255, 255, 255, .62);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 2px rgba(34, 31, 26, .05);
  border-radius: 14px;
  padding: 13px 15px; width: 100%;
  transition: border-color 160ms var(--ease-uit), background-color 160ms var(--ease-uit);
}
.beeldvraag__veld:focus { outline: none; border-color: var(--groen); background: rgba(255, 255, 255, .85); }
.beeldvraag__groot { resize: vertical; border-radius: 18px; }
.beeldvraag__form .stempel { justify-self: start; margin-top: 14px; }
.beeldvraag__melding {
  font-family: var(--type); font-size: .9rem; line-height: 1.55;
  color: var(--groen-diep); margin-top: .6rem;
}
.beeldvraag__melding.is-fout { color: var(--stempelrood); }
.beeldvraag__privacy {
  font-size: .78rem; color: var(--inkt-dof); max-width: 46ch; margin-top: .9rem;
}
.beeldvraag__zij { display: grid; justify-items: start; gap: 18px; align-content: center; }

/* het takje: de vijf zinnen als vijf bladeren aan één steel */
.takje {
  margin: 0;
  display: grid; grid-template-columns: 52px minmax(0, 1fr);
  gap: 6px; align-items: stretch;
}
.takje__beeld {
  width: 48px; height: 250px; overflow: visible;
  transform-origin: 24px 8px;
  animation: takjewieg 8s ease-in-out infinite alternate;
}
@keyframes takjewieg {
  from { transform: rotate(-1.4deg); }
  to   { transform: rotate(1.6deg); }
}
.rust .takje__beeld { animation: none; }
.takje__steel { fill: none; stroke: var(--groen-diep); stroke-width: 2; stroke-linecap: round; opacity: .85; }
.takje__blad { fill: var(--groen); opacity: .8; }
.takje__nerf { fill: none; stroke: var(--room); stroke-width: 1.6; stroke-linecap: round; }
.takje__halte { fill: var(--haver); stroke: var(--groen-diep); stroke-width: 1.3; }
.takje__kring {
  fill: none; stroke: var(--groen-diep); stroke-width: 1.3;
  stroke-dasharray: 3.2 2.3;
  opacity: 0; transition: opacity 700ms var(--ease-uit);
}
.takje--jouw .takje__kring { opacity: 1; }

.takje__woorden {
  list-style: none; margin: 0; padding: 0;
  height: 250px;
  display: grid; grid-template-rows: repeat(5, 1fr); align-items: center;
}
.takje__woorden li { font-size: 1.02rem; line-height: 1.3; transition: color 500ms var(--ease-uit); }
.takje__woorden li.is-jouw { color: var(--groen-diep); font-weight: 600; }
.takje__onder { font-size: .88rem; color: var(--inkt-dof); max-width: 30ch; }

@media (max-width: 860px) {
  .beeldvraag { grid-template-columns: 1fr; }
  .beeldvraag__zij { justify-items: start; }
  .beeldvraag__zij .zakje { max-width: 230px; }
}

/* de acties onder de onthulling */
.lijn__acties {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
  margin-top: .6rem;
  opacity: 0; transform: translateY(10px);
  transition: opacity 800ms var(--ease-uit) 3100ms, transform 800ms var(--ease-uit) 3100ms;
}
.lijn--onthuld .lijn__acties { opacity: 1; transform: none; }
.lijn--rust .lijn__acties, .rust .lijn__acties { transition: none; opacity: 1; transform: none; }
.lijn__verder {
  font-family: var(--type); font-size: .88rem; color: var(--inkt-dof);
  text-decoration: underline; text-underline-offset: 4px;
}
.lijn__verder:hover { color: var(--groen-diep); }

/* ═══ De juridische pagina ═════════════════════════════════════
   Stond letterlijk leeg ("dit blad is nog leeg — bewust") terwijl de site
   ondertussen accounts aanmaakt, betalingen verwerkt en mail verstuurt.
   Dit is de opmaak van een pagina die je moet kúnnen lezen: één kolom,
   ruime regelafstand, en koppen die je met de wegwijzer kan overslaan. */
.juridisch__intro { max-width: 56ch; font-size: 1.05rem; line-height: 1.75; }
.juridisch__datum { display: block; margin-top: .6rem; color: var(--inkt-dof); }

/* de wegwijzer: acht korte links, geen inhoudsopgave met nummers */
.juridisch__wegwijzer {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 30px 0 46px; padding: 18px 0 0;
  border-top: 1px solid var(--inkt-fluister);
}
.juridisch__wegwijzer a {
  font-family: var(--grotesk); font-size: .68rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--groen); text-decoration: none;
  border: 1px solid rgba(58, 107, 68, .28); border-radius: 999px;
  padding: 8px 14px;
  transition: background-color 150ms ease;
}
.juridisch__wegwijzer a:hover { background: rgba(58, 107, 68, .08); }

.juridisch__blok { max-width: 64ch; margin-bottom: clamp(38px, 6vh, 62px); }
.juridisch__blok h2 {
  font-family: var(--serif); font-weight: 400; letter-spacing: -.02em;
  font-size: clamp(1.4rem, 2.6vw, 1.85rem); line-height: 1.2;
  margin: 0 0 1rem; padding-top: .4rem;
}
.juridisch__blok h3 {
  font-family: var(--type); font-weight: 700; font-size: 1.02rem;
  margin: 1.8rem 0 .5rem;
}
.juridisch__blok p, .juridisch__blok li, .juridisch__blok dd {
  font-family: var(--type); font-size: .97rem; line-height: 1.75;
  color: rgba(43, 36, 30, .86);
}
.juridisch__blok p { margin: 0 0 1rem; }
.juridisch__blok ul { margin: 0 0 1rem; padding-left: 0; list-style: none; }
.juridisch__blok ul li { position: relative; padding-left: 22px; margin-bottom: .6rem; }
.juridisch__blok ul li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 9px; height: 9px; border-radius: 60% 0 60% 0;
  background: rgba(58, 107, 68, .55);
}

/* "wanneer gebeurt wat" leest beter als term-en-uitleg dan als opsomming */
.juridisch__lijst { margin: 0; }
.juridisch__lijst dt {
  font-family: var(--grotesk); font-weight: 600; font-size: .68rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--groen);
  margin-top: 1.4rem;
}
.juridisch__lijst dd { margin: .4rem 0 0; }

.juridisch__tabel {
  width: 100%; border-collapse: collapse; margin: 0 0 1.2rem;
  font-family: var(--type); font-size: .9rem;
}
.juridisch__tabel th, .juridisch__tabel td {
  text-align: left; padding: 10px 12px 10px 0;
  border-bottom: 1px solid var(--inkt-fluister);
  vertical-align: top; line-height: 1.55;
}
.juridisch__tabel th {
  font-family: var(--grotesk); font-weight: 600; font-size: .64rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--inkt-dof);
}
.juridisch__tabel code {
  font-family: var(--type); font-size: .84rem;
  background: rgba(43, 36, 30, .06); border-radius: 5px; padding: 2px 6px;
}

/* wat nog moet gebeuren of wat een nuance is, niet weggemoffeld in een
   voetnoot maar zichtbaar — dit zijn precies de regels die ertoe doen */
.juridisch__nota {
  background: rgba(214, 168, 63, .12);
  border-left: 3px solid rgba(214, 168, 63, .55);
  border-radius: 0 12px 12px 0;
  padding: 14px 16px; margin: 1rem 0 1.2rem !important;
  font-size: .92rem !important;
}
.juridisch__slot { margin-top: 2.4rem; }
@media (max-width: 640px) {
  .juridisch__tabel { font-size: .85rem; }
  .juridisch__tabel th:nth-child(3), .juridisch__tabel td:nth-child(3) { display: none; }
}

/* het vinkje bij de Geluksmeter: apart van het adresveld, want het is een
   aparte keuze — en met de tekst naast het vakje in plaats van eronder */
.formulier__vink {
  display: flex; align-items: flex-start; gap: 10px;
  margin-top: 14px; cursor: pointer;
  font-family: var(--type); font-size: .86rem; line-height: 1.55;
  color: rgba(43, 36, 30, .78); max-width: 46ch;
}
.formulier__vink input {
  flex: none; margin-top: .22em; width: 16px; height: 16px;
  accent-color: var(--groen);
}

/* meldingen onder de formulieren op de aanbodpagina's — die bestonden
   niet, want er kon ook niets misgaan: het formulier deed niets */
.land__melding {
  margin: 14px 0 0; font-family: var(--type); font-size: .9rem;
  line-height: 1.55; color: var(--groen);
}
.land__melding.is-fout { color: #9a3412; }
.land__vink {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 16px 0 4px; cursor: pointer;
  font-family: var(--type); font-size: .88rem; line-height: 1.55;
  color: rgba(43, 36, 30, .78);
}
.land__vink input { flex: none; margin-top: .22em; width: 16px; height: 16px; accent-color: var(--groen); }


/* ── naar de inhoud springen ──────────────────────────────────
   Wie met een toetsenbord of een schermlezer werkt, moest eerst door zes à
   zeven links in de kopbalk voor hij bij de eerste zin was — op elke pagina
   opnieuw. Deze link staat als eerste in de tab-volgorde, is onzichtbaar tot
   hij focus krijgt, en springt dan naar main. */
.overslaan {
  position: absolute; left: 12px; top: -100px; z-index: 200;
  padding: .7em 1.2em; border-radius: 999px;
  background: var(--groen-diep); color: var(--room);
  font-family: var(--grotesk); font-weight: 600; font-size: .8rem;
  text-decoration: none;
  transition: top 160ms var(--ease-uit);
}
.overslaan:focus { top: 12px; }
/* Tekst die er wél moet staan voor een schermlezer maar niet op het scherm.
   Niet display:none en niet visibility:hidden — dan slaat een schermlezer
   hem óók over, en dan heb je niets opgelost. */
.overslaan-tekst {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; border: 0; overflow: hidden; white-space: nowrap;
  clip: rect(0 0 0 0); clip-path: inset(50%);
}

/* de tekstversie van wat er in de welkomvideo gezegd wordt */
.video__samenvatting { color: var(--inkt-dof); font-size: .93rem; }

/* ═══ Het programma op diepgroen ═══════════════════════════════
   Deze sectie stond op mos en is nu diepgroen. Drie dingen die op een
   lichte grond werkten, werken daar niet meer: donkere inkt, een groen
   accent, en een haarlijn in inkt. Alle drie verdwenen ze in de
   achtergrond.

   Dit is geen nieuwe opmaak maar dezelfde, in de kleuren die op donker
   wél leesbaar zijn. */

.band--diep .feiten li { color: rgba(247, 242, 232, .92); }
.band--diep .feiten .nr {
  /* was --groen: donkergroen op donkergroen, gemeten 1,3:1 — de nummers
     waren er wel maar je zag ze niet. Warm zand op .95 haalde 3,75 en dat
     is te weinig voor tien pixels; crème haalt 5,4. */
  color: rgba(247, 242, 232, .88);
}
.band--diep .feiten li::after {
  background: linear-gradient(90deg,
    rgba(247, 242, 232, .28), rgba(247, 242, 232, .28) 62%, transparent);
}
.band--diep .blad__titel { color: rgba(247, 242, 232, .9); }
.band--diep .blad__titel::after { border-color: rgba(247, 242, 232, .45); }

/* De poortkaarten. Ze hadden een verloop van bijna-wit naar doorschijnend;
   op beige zag je dat niet, op diepgroen wordt de onderkant van elke kaart
   groenig en zakt de tekst weg. Nu één egale, lichte kaart. */
.band--diep .poortgroep {
  background: rgb(250 247 240 / .95);
  border-color: rgba(255, 255, 255, .55);
}
.band--diep .poortgroep__zin,
.band--diep .poort__zin { color: rgba(43, 36, 30, .72); }

/* de handgeschreven regel "poort 1 staat open. gratis." */
/* het handschrift mag warm blijven, maar wel leesbaar: op .95 zand haalde
   het 3,75, en dit is lopende tekst. */
.band--diep .pen { color: rgba(240, 219, 200, .98); }

/* ═══ De prijs, met de twijfels ernaast ════════════════════════
   De prijskaart stond als los eiland midden in een leeg vlak, en de
   vragen stonden er los onder. Ze horen bij elkaar: elke vraag gaat over
   dat bedrag. Naast elkaar leest de bezoeker zijn eigen bezwaar op het
   moment dat hij naar de prijs kijkt.

   De kaart staat links en blijft staan terwijl je de vragen doorleest —
   het bedrag mag niet uit beeld verdwijnen zodra iemand gaat twijfelen. */
.prijsvel {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
.prijsvel__kaart { position: sticky; top: clamp(96px, 13vh, 140px); }
.prijsvel__kaart .prijsblad { margin: 0; }
.prijsvel__vragen .vragen { max-width: none; }

@media (max-width: 900px) {
  /* Onder elkaar, en dan niet meer sticky: een kaart die op een telefoon
     blijft plakken neemt het halve scherm in. */
  .prijsvel { grid-template-columns: 1fr; gap: clamp(24px, 4vh, 40px); }
  .prijsvel__kaart { position: static; }
}


/* ═══ Binnenkort: de eerstvolgende evenementen op de homepage ═══
   Drie kaartjes met een groot dagcijfer, in het blad van het drieluik.
   Het blad staat `hidden` tot js/agenda.js iets te tonen heeft. */
.blad--binnenkort { padding-top: 0; }
.binnenkort { max-width: 1140px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 40px); }
.binnenkort__kop {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-bottom: clamp(16px, 2.5vh, 26px);
}
.binnenkort__titel {
  font-family: var(--serif); font-weight: 400; letter-spacing: -.02em;
  font-size: clamp(1.5rem, 2.8vw, 2.1rem); margin: .3rem 0 0; flex-basis: 100%;
}
.binnenkort__alles {
  font-family: var(--grotesk); font-weight: 600; font-size: .68rem;
  letter-spacing: .13em; text-transform: uppercase; color: var(--groen-diep); text-decoration: none;
}
.binnenkort__alles:hover { text-decoration: underline; text-underline-offset: 4px; }
.binnenkort__lijst { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.binnenkort__kaart {
  display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; align-items: start;
  padding: 18px 20px; text-decoration: none; color: var(--inkt);
  background: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.8);
  border-radius: 22px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 18px 40px -32px rgba(34,31,26,.4);
  transition: background-color 180ms var(--ease-uit), transform 180ms var(--ease-uit);
}
.binnenkort__kaart:hover { background: rgba(255,255,255,.78); transform: translateY(-2px); }
.binnenkort__datum {
  display: grid; justify-items: center; align-content: center; gap: 0;
  width: 64px; height: 64px; border-radius: 18px;
  background: rgba(58,107,68,.1); color: var(--groen-diep);
}
.binnenkort__dag { font-family: var(--serif); font-size: 1.6rem; line-height: 1; }
.binnenkort__maand { font-family: var(--grotesk); font-weight: 600; font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; }
.binnenkort__woord { display: grid; gap: 3px; min-width: 0; }
.binnenkort__meta { font-family: var(--grotesk); font-weight: 600; font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(43,36,30,.7); }
.binnenkort__kaart .binnenkort__titel { font-family: var(--serif); font-weight: 400; font-size: 1.15rem; line-height: 1.25; margin: 0; letter-spacing: -.01em; }
.binnenkort__kort { font-family: var(--type); font-size: .9rem; line-height: 1.55; color: rgba(43,36,30,.78); }

/* ═══ Tikdoelen op een telefoon ═══════════════════════════════════
   Een link van 15px hoog raak je met een vinger niet betrouwbaar; Apple
   en Google vragen allebei minstens 44 punten. De letter blijft even
   groot; het raakvlak groeit onzichtbaar via een pseudo-element, zodat
   er in de opmaak niets verschuift. */
@media (max-width: 700px) {
  .stempel {
    min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  }
  /* ook elke link in lopende tekst: een mailadres van 17px hoog in een
     alinea is precies zo'n doel dat je op een telefoon twee keer moet
     proberen */
  .hero__tweede, .lijn__verder, .contactweg__klein a, .voet a, p a {
    position: relative;
  }
  .hero__tweede::after, .lijn__verder::after, .contactweg__klein a::after, .voet a::after, p a::after {
    content: ""; position: absolute; left: -6px; right: -6px; top: -15px; bottom: -15px;
  }
}

/* ═══ Smalle telefoons ═══════════════════════════════════════════
   "Vraag een gesprek" in de kopbalk stak op 390px vier pixels buiten de
   rand: de knop kreeg op mobiel .85rem terwijl hij op desktop .74rem is,
   en dan past de langste variant niet meer naast het merk en het menu. */
@media (max-width: 430px) {
  /* .kop__nav .kop__cta, niet .kop__cta: de basisregel .kop__nav a (klasse
     + element) wint anders van elke losse klasse — ook van de bestaande
     mobiele regel op 520px, die daardoor nooit iets deed. */
  .kop__nav .kop__cta { font-size: .68rem; letter-spacing: .05em; padding: 8px 11px; }
  .kop__merk { font-size: .9rem; }
  .kop__nav { gap: 8px; }
}

@media (max-width: 700px) {
  /* De welkomvideo op Elke Dag Gelukkig stond op een telefoon in een
     kolom van 184px met de tekst in 136px ernaast: acht woorden per regel
     en een filmpje zo groot als een postzegel. Onder elkaar. */
  .zaai { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  /* de wegwijzer op de juridische pagina: 36px hoog is net te weinig voor
     een vinger */
  .juridisch__wegwijzer a { padding: 12px 14px; }
  /* De adempauze op de boekpagina is een band met alleen een bladreliëf.
     Op desktop is dat een rustpunt; op een telefoon was het 300px scrollen
     door niets tussen het boek en het bestelformulier. */
  .band.citaatband { min-height: clamp(120px, 18vh, 170px); }
}

/* ═══ De Geluksmeter op een telefoon: één vraag tegelijk ═══════════
   Tobias: "het neemt nog altijd te veel plek. Eén vraag die verschijnt, en
   als je ze invult komt de tweede. En dat ze kunnen overslaan."

   Vijf vragen onder elkaar waren op 390px een halve meter scrollen voor je
   bij het mailveld was. Nu staat er één, met eronder waar je bent en twee
   knoppen: overslaan of verder. Enter doet hetzelfde als verder. De
   antwoorden blijven gewoon in hun eigen veld staan — main.js telt ze zoals
   altijd en de boom groeit mee.

   Alleen op een smal scherm. Op desktop staan ze naast de boom en is er
   plaats genoeg; daar verandert niets. De klasse is-stapsgewijs zet main.js
   pas als JavaScript draait: zonder JS staan alle vijf er gewoon. */
.meterstap { display: none; }
@media (max-width: 700px) {
  .formulier__vragen.is-stapsgewijs li { display: none; border-top: 0; }
  .formulier__vragen.is-stapsgewijs li.is-aan {
    display: grid;
    animation: vraag-in 260ms var(--ease-uit) both;
  }
  .formulier__vragen.is-stapsgewijs li::before {
    /* het nummer staat nu in de voortgang eronder */
    display: none;
  }
  .formulier__vragen.is-stapsgewijs li { padding-left: 0; }
  /* .meterblad centreert zijn kinderen op een telefoon (voor de boom).
     Daardoor kromp de lijst tot de breedte van de langste vraag, stond de
     vraag ingesprongen, en schoof "verder" rechts buiten het scherm. De
     vraag en de voortgang nemen de volle breedte; de boom blijft in het
     midden. */
  .formulier__vragen.is-stapsgewijs, .meterstap { justify-self: stretch; width: 100%; }
  .formulier__vragen.is-stapsgewijs label { font-size: 1.08rem; min-height: 3em; }

  .meterstap {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin: .9rem 0 0; width: 100%;
  }
  .meterstap__punten { display: flex; gap: 2px; align-items: center; }
  /* 30x44: de hoogte van een vingertop, en ruim boven de 24px die WCAG
     2.5.8 vraagt. Breder kan niet: vijf puntjes plus een knop moeten op
     één regel van 306px passen. */
  .meterstap__punt {
    width: 30px; height: 44px; padding: 0; border: 0; background: none;
    display: grid; place-items: center; cursor: pointer;
  }
  .meterstap__punt::before {
    content: ""; width: 7px; height: 7px; border-radius: 50%;
    background: rgba(43, 36, 30, .2);
    transition: background-color 200ms var(--ease-uit), transform 200ms var(--ease-uit);
  }
  .meterstap__punt.is-vol::before { background: var(--blad, #6E8B4E); }
  .meterstap__punt.is-aan::before { background: var(--groen); transform: scale(1.45); }
  .meterstap__knoppen { display: flex; gap: 6px; align-items: center; }
  .meterstap__over {
    font-family: var(--type); font-size: .86rem; color: var(--inkt-dof);
    background: none; border: 0; padding: 12px 8px; cursor: pointer;
    text-decoration: underline; text-underline-offset: 3px;
  }
  .meterstap__verder { padding: .8em 1.4em; }
  .meterstap__verder[hidden], .meterstap__over[hidden] { display: none; }
}
@keyframes vraag-in {
  from { opacity: 0; transform: translateX(14px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .formulier__vragen.is-stapsgewijs li.is-aan { animation: none; }
}

/* ═══ De reviews: een rij om door te bladeren ═══════════════════════
   Tobias: "mensen moeten naar rechts en links kunnen klikken om meerdere
   reviews te zien, dat je er maar drie of zo op een rij ziet." En elk een
   foto erbij.

   Eén strook op elke breedte: drie kaarten breed op desktop, één op een
   telefoon. Ze snapt per kaart; je veegt of je tikt op een pijl. Passen
   alle kaarten in één blik, dan verbergt js/stemmen.js de bediening — drie
   kaarten op een breed scherm zijn gewoon drie kaarten.

   De rij loopt tot buiten zijn kolom (negatieve marge) en krijgt boven en
   onder lucht: een scroller knipt alles af wat erbuiten valt, en dan
   verdwijnen het blaadje op de hoek (top: -13px) en de schaduw. */
.stemmen {
  --stemmen-gap: clamp(16px, 2.4vw, 28px);
  --stemmen-rand: clamp(20px, 5vw, 48px);
  display: flex; gap: var(--stemmen-gap);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin-inline: calc(-1 * var(--stemmen-rand));
  padding: 18px var(--stemmen-rand) 30px;
  scroll-padding-inline: var(--stemmen-rand);
  align-items: stretch;
}
.stemmen::-webkit-scrollbar { display: none; }
.stemmen > .kaartje {
  flex: 0 0 calc((100% - 2 * var(--stemmen-gap)) / 3);
  scroll-snap-align: start;
}
@media (max-width: 1000px) { .stemmen > .kaartje { flex-basis: calc((100% - var(--stemmen-gap)) / 2); } }
@media (max-width: 700px)  { .stemmen > .kaartje { flex-basis: 84%; } }

/* de foto bij de naam */
.kaartje__naam { display: flex; align-items: center; gap: 12px; }
.kaartje__foto {
  width: 44px; height: 44px; border-radius: 50%; object-fit: cover;
  flex: 0 0 auto;
  box-shadow: 0 0 0 2px rgba(255,255,255,.9), 0 6px 14px -8px rgba(34,31,26,.45);
}

/* de bediening: pijl, puntjes, pijl */
.stemmen__bediening {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: -6px;
}
.stemmen__bediening[hidden] { display: none; }
.stemmen__punten { display: flex; gap: 2px; }
.stemmen__punt {
  width: 28px; height: 44px; padding: 0; border: 0; background: none;
  display: grid; place-items: center; cursor: pointer;
}
.stemmen__punt::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: rgba(43, 36, 30, .22);
  transition: background-color 200ms var(--ease-uit), transform 200ms var(--ease-uit);
}
.stemmen__punt.is-aan::before { background: var(--groen); transform: scale(1.35); }
.stemmen__pijl {
  width: 44px; height: 44px; padding: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.8);
  display: grid; place-items: center; color: var(--groen-diep);
  transition: background-color 160ms var(--ease-uit), opacity 160ms var(--ease-uit);
}
.stemmen__pijl svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.stemmen__pijl:hover { background: rgba(255,255,255,.85); }
.stemmen__pijl:disabled { opacity: .3; cursor: default; }