/* ═══════════════════════════════════════════════════════════════
   Elke dag gelukkig — de ledenzone

   Erft alles van style.css (klei, haver, bosgroen, glas) en zet daar de
   ledenzone bovenop. Twee keuzes die het verschil maken met Kartra:

   · Binnen spreekt dezelfde taal als buiten: room-bladen met bogen en
     olijf-sikkels, en een glazen hoofdstukbalk — wie net betaald heeft,
     stapt hetzélfde merk binnen.
   · De voortgang is geen teller maar een tak die meegroeit; en na elke
     geopende poort is er een nazit in plaats van een duw naar de
     volgende.
   ═══════════════════════════════════════════════════════════════ */

.kamer-body { min-height: 100vh; }

/* ── de deur ─────────────────────────────────────────────────── */

.deur {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: start center;
  padding: clamp(24px, 5vh, 56px) 24px;
  background: var(--haver);
  /* Twee kaarten onder elkaar passen niet op elk scherm, dus hij moet
     kunnen scrollen. overflow-x blijft dicht vanwege de kleivorm die
     links buiten het kader hangt. */
  overflow-y: auto; overflow-x: hidden;
}
.deur.is-weg { opacity: 0; pointer-events: none; transition: opacity 420ms var(--ease-uit); }

/* het inlogvel is letterlijk een poort: de boogvorm van de site,
   recht en rustig, met één ademende kleivorm erachter */
.deur::before {
  content: ""; position: absolute; width: 62vmin; height: 62vmin;
  left: 8%; bottom: -12%;
  background: var(--haver-diep); border-radius: var(--blob);
  animation: adem-blob 34s ease-in-out infinite;
  opacity: .7;
}
.deur__blad {
  position: relative;
  width: min(100%, 440px);
  background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(247,242,232,.88));
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 210px 210px 26px 26px / 260px 260px 26px 26px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    0 30px 70px -34px rgba(34,31,26,.45);
  padding: clamp(56px, 8vw, 78px) clamp(30px, 5vw, 46px) clamp(28px, 5vw, 40px);
  text-align: center;
}
.deur__badge {
  position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
  font-family: var(--grotesk); font-weight: 700; font-size: .58rem;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--groen); border: 1px solid rgba(58,107,68,.4);
  border-radius: 999px; padding: 4px 12px;
  background: rgba(255,255,255,.6);
}
.deur__welkom {
  font-family: var(--serif); font-style: italic; font-size: 1.05rem;
  color: var(--inkt-dof); display: block; margin-bottom: 4px;
}
.deur__kop {
  font-family: var(--kaft-serif); font-weight: 600;
  font-size: clamp(32px, 6vw, 42px); line-height: 1.05;
  letter-spacing: -.02em; color: var(--inkt);
}
.deur__onder {
  font-family: var(--type); font-size: .92rem; line-height: 1.6;
  color: var(--inkt-dof); margin-top: 12px;
}
.deur__onder em { color: var(--blad); font-style: italic; }

.deur__form { display: grid; gap: 5px; margin-top: 26px; text-align: left; }
.deur__label {
  font-family: var(--grotesk); font-weight: 600; font-size: .66rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--inkt-dof);
  margin-top: 8px;
}
.deur__veld {
  font-family: var(--type); font-size: .92rem; color: var(--inkt);
  background: rgba(255,253,248,.9);
  border: 0; border-bottom: 1.5px solid rgba(34,31,26,.35);
  padding: 8px 4px;
}
.deur__veld:focus { outline: 2px solid var(--stempelrood); outline-offset: 2px; }
.deur__knop { margin-top: 22px; justify-self: center; border-radius: 999px; }
.deur__nota {
  font-family: var(--type); font-size: .74rem; color: var(--inkt-dof);
  margin-top: 18px; line-height: 1.5;
}
/* Het regeltje dat zegt van wie de ingevulde gegevens zijn. Het staat
   tussen de velden en de knop, want dáár kijkt iemand die twijfelt. */
.deur__demo {
  font-family: var(--type); font-size: .72rem; color: var(--inkt-dof);
  margin-top: 14px; line-height: 1.45; text-align: center;
  padding: 8px 12px; border-radius: 12px;
  background: rgba(58, 107, 68, .07);
  border: 1px solid rgba(58, 107, 68, .16);
}

/* de poort ademt open: het formulier lost op, één regel blijft, en het
   hele blad zet zich licht uit op ademtempo (4 tellen in, 6 uit) */
.deur.is-adem .deur__welkom, .deur.is-adem .deur__kop--logo,
.deur.is-adem .deur__onder, .deur.is-adem .deur__form,
.deur.is-adem .deur__nota, .deur.is-adem .deur__terug,
.deur.is-adem .deur__demo,
.deur.is-adem .deur__badge {
  opacity: 0; transition: opacity 600ms var(--ease-uit);
  pointer-events: none;
}
.deur__adem {
  position: absolute; inset: 0;
  display: grid; place-items: center; align-content: center; gap: 18px;
}

/* ── de ademkring ─────────────────────────────────────────────
   Hier stond alleen een regel cursieve tekst, en het blad achter de deur
   zette zich 3,5% uit — te weinig om te zien. Mensen lazen dat als "de
   pagina laadt". Een kring die zichtbaar groter en kleiner wordt zegt in
   één oogopslag wat er van je gevraagd wordt: adem mee.

   Vier tellen in, zes uit: dat is haar tempo, en het is ook waarom de
   animatie 40% van de tijd groeit en 60% krimpt. */
.ademkring {
  position: relative; width: 128px; height: 128px;
  display: grid; place-items: center;
}
.ademkring__ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid rgba(58, 107, 68, .28);
}
.ademkring__bol {
  position: absolute; width: 100%; height: 100%; border-radius: 50%;
  background: rgba(58, 107, 68, .16);
  box-shadow: 0 0 0 1px rgba(58, 107, 68, .22) inset;
  transform: scale(.42);
  animation: ademen 10s cubic-bezier(.42, 0, .58, 1) infinite;
}
.ademkring__tel {
  position: relative; z-index: 1;
  font-family: var(--serif); font-size: 1.6rem; color: var(--groen);
  line-height: 1;
}
@keyframes ademen {
  0%   { transform: scale(.42); }
  40%  { transform: scale(1); }      /* vier tellen in */
  100% { transform: scale(.42); }    /* zes tellen uit */
}

.deur__ademtekst {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3.2vw, 2rem); color: var(--inkt);
  opacity: 0; transition: opacity 700ms var(--ease-uit);
  margin: 0;
}
.deur.is-adem .deur__ademtekst { opacity: 1; }
.deur__ademonder {
  font-family: var(--type); font-size: .92rem; color: rgba(43, 36, 30, .7);
  margin: -8px 0 0; text-align: center; max-width: 30ch;
}
/* Overslaan stond er als een fluistering op 20% dekking — dus zag niemand
   hem, en dan zit je vast aan tien seconden die je niet gevraagd hebt.
   Nu een echte knop. */
.deur__ademsla {
  font-family: var(--grotesk); font-weight: 600; font-size: .64rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(43, 36, 30, .72); background: none;
  border: 1px solid rgba(43, 36, 30, .22); border-radius: 999px;
  padding: 9px 18px; cursor: pointer; margin-top: 6px;
  transition: border-color 160ms ease, color 160ms ease;
}
.deur__ademsla:hover { color: var(--inkt); border-color: rgba(43, 36, 30, .45); }
@media (prefers-reduced-motion: reduce) {
  .ademkring__bol { animation: none; transform: scale(.72); }
}
.deur.is-adem .deur__blad { animation: deur-adem 10s var(--ease-uit) both; }
@keyframes deur-adem {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.035); }   /* 4 tellen in */
  100% { transform: scale(1); }       /* 6 tellen uit */
}
@media (prefers-reduced-motion: reduce) {
  .deur::before, .deur.is-adem .deur__blad { animation: none; }
}
.rust .deur::before { animation: none; }

/* ── de kamer ────────────────────────────────────────────────── */

/* de merkbalk blijft vast bovenaan, zoals overal op de site; de glazen
   hoofdstukbalk plakt er bij het scrollen net onder */
.kop--kamer { position: fixed; }
.kamer__rechts { display: flex; align-items: center; gap: 14px; }
.kamer__wie {
  font-family: var(--type); font-size: .9rem; color: var(--inkt);
}
.kamer__uit {
  font-family: var(--grotesk); font-weight: 600; font-size: .7rem;
  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);
}
.kamer__uit:hover { color: var(--stempelrood); background: rgba(255,255,255,.5); }

/* Leden beheren. Zelfde maat en ritme als Afmelden ernaast, maar in het
   groen van de site: het is de enige knop hier die iets opent in plaats
   van iets afsluit, en dat verschil mag je zien zonder erover na te denken.
   Het tandwiel doet het werk — "Leden" alleen was op een balk met een naam
   en een afmeldknop te makkelijk te lezen als "dit ben ik". */
.kamer__beheer {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--grotesk); font-weight: 600; font-size: .7rem;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--groen); background: rgba(255,255,255,.42); cursor: pointer;
  border: 1px solid rgba(90,101,69,.22);
  padding: 7px 13px 7px 11px; border-radius: 999px;
  transition: color 160ms var(--ease-uit), background-color 160ms var(--ease-uit),
              border-color 160ms var(--ease-uit);
}
.kamer__beheer svg {
  width: 14px; height: 14px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform 420ms var(--ease-uit);
}
.kamer__beheer:hover {
  background: rgba(255,255,255,.72); border-color: rgba(90,101,69,.4);
}
/* Het tandwiel draait een achtste slag bij hover. Een tandwiel dat een hele
   slag maakt leest als "bezig, wacht even"; een achtste leest als "hier zit
   iets achter". */
.kamer__beheer:hover svg { transform: rotate(45deg); }
.rust .kamer__beheer svg { transition: none; }
.rust .kamer__beheer:hover svg { transform: none; }

@media (max-width: 620px) {
  /* op een telefoon telt elke pixel in die balk: het tandwiel alleen */
  /* font-size: 0 verbergt het woord, niet de naam: die staat in
     aria-label, dus een schermlezer noemt hem gewoon "Leden beheren" */
  .kamer__beheer { font-size: 0; gap: 0; padding: 8px; }
  .kamer__beheer svg { width: 16px; height: 16px; }
}

/* de hoofdstukbalk */
.rekken {
  position: sticky; top: clamp(72px, 9vh, 90px); z-index: 20;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 2px;
  width: fit-content; max-width: min(100% - 32px, 1180px);
  padding: 6px;
  margin: clamp(88px, 11vh, 110px) auto 0;
  border-radius: 999px;
  /* Stond op wit .58 -> .26. Die balk is sticky en zweeft dus over álles
     heen — ook over een foto of een groene band, en dan haalde de tekst
     nog 2,0:1. Kleine kapitalen hebben 4,5:1 nodig. Nu crème .95 -> .90,
     net als de uitklaplade op de website; blur en saturatie blijven, want
     dáár zit het glas in en niet in de doorzichtigheid. */
  background: linear-gradient(180deg, rgb(250 247 240 / .95), rgb(247 242 232 / .90));
  -webkit-backdrop-filter: blur(20px) saturate(1.7);
  backdrop-filter: blur(20px) saturate(1.7);
  border: 1px solid rgba(255,255,255,.7);
  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);
}
.rek { position: relative; }
.rek__knop {
  font-family: var(--grotesk); font-weight: 600; font-size: .74rem;
  /* niet --inkt-dof (62%): dat is voor bijschriften op een rustig vlak,
     niet voor kapitalen op glas. Op 78% haalt hij overal 6,3:1 of meer. */
  letter-spacing: .06em; text-transform: uppercase; color: rgba(43, 36, 30, .78);
  background: none; border: 0; cursor: pointer;
  padding: 10px 15px; border-radius: 999px;
  transition: color 150ms var(--ease-uit), background-color 150ms var(--ease-uit);
  white-space: nowrap;
}
.rek__knop:hover { color: var(--inkt); background: rgba(255,255,255,.5); }
.rek.is-hier .rek__knop { color: var(--papier); background: var(--groen); }
.rek.is-leeg .rek__knop { color: var(--inkt-fluister); cursor: default; }

/* de uitklap met de oefeningen erin */
.rek__lade {
  position: absolute; left: 0; top: calc(100% + 10px); z-index: 25;
  width: min(340px, 84vw);
  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: 20px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 24px 50px -24px rgba(34,31,26,.45);
  padding: 8px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 160ms var(--ease-uit), transform 160ms var(--ease-uit), visibility 160ms;
}
.rek:hover .rek__lade, .rek:focus-within .rek__lade {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.lade__item {
  display: block; width: 100%; text-align: left;
  background: none; border: 0; cursor: pointer;
  padding: 11px 14px; border-radius: 14px;
  transition: background-color 140ms var(--ease-uit);
}
.lade__item:hover { background: var(--blad-zacht); }
.lade__naam {
  display: block; font-family: var(--type); font-weight: 700;
  font-size: .92rem; color: var(--inkt);
}
.lade__kort {
  display: block; font-family: var(--type); font-size: .8rem;
  line-height: 1.45; color: rgba(43, 36, 30, .78); margin-top: 3px;
}
.lade__leeg {
  padding: 12px; font-family: var(--type); font-size: .78rem;
  color: var(--inkt-dof); line-height: 1.5;
}

/* ── het blad: rail + vel ────────────────────────────────────── */

.kamer__blad {
  max-width: 1240px; margin: 0 auto;
  padding: clamp(24px, 4vw, 40px) clamp(16px, 4vw, 40px) 90px;
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 38px);
  align-items: start;
}

.rail { display: grid; gap: 16px; position: sticky; top: 130px; }
.rail__kaart {
  background: var(--room);
  border-radius: 24px;
  box-shadow: 0 18px 40px -30px rgba(34,31,26,.35);
  padding: 22px;
}
.rail__kop {
  font-family: var(--grotesk); font-weight: 700; font-size: .66rem;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--groen); padding-bottom: 12px; margin-bottom: 4px;
  border-bottom: 1px solid var(--inkt-fluister);
}
.rail__items { list-style: none; }
.rail__items li + li { border-top: 1px solid var(--inkt-fluister); }
.rail__item {
  display: block; width: 100%; text-align: left;
  background: none; border: 0; cursor: pointer;
  font-family: var(--type); font-size: .9rem; color: var(--inkt-dof);
  padding: 12px 2px;
  transition: color 140ms var(--ease-uit);
}
.rail__item:hover { color: var(--inkt); }
.rail__item.is-hier { color: var(--blad); font-weight: 700; }

.rail__gastvrouw { display: flex; align-items: center; gap: 14px; position: relative; }
.rail__gastvrouw::before {
  content: ""; position: absolute; inset: 8% auto auto 6%;
  width: 66px; height: 66px;
  background: var(--olijf); border-radius: var(--blob);
  opacity: .35; z-index: 0;
}
.rail__gastvrouw > * { position: relative; z-index: 1; }
.rail__portret {
  width: 58px; height: 58px; border-radius: 50%; object-fit: cover;
  object-position: center 30%; flex: none;
  border: 2px solid rgba(255,255,255,.9);
  box-shadow: 0 2px 8px rgba(34,31,26,.18);
}
.rail__naam { display: block; font-family: var(--type); font-weight: 700; font-size: .92rem; }
.rail__rol { display: block; font-family: var(--type); font-size: .78rem; color: var(--inkt-dof); line-height: 1.4; }

.rail__stand { font-size: 1.15rem; margin: 10px 0 12px; }
.rail__zaadjes { display: flex; flex-wrap: wrap; gap: 6px; }
.zaadje-punt {
  width: 11px; height: 14px; border-radius: 50% 50% 45% 45%;
  background: rgba(34,31,26,.14);
}
.zaadje-punt.is-op { background: var(--blad); }

.rail__maak {
  font-family: var(--grotesk); font-weight: 700; font-size: .72rem;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--groen); background: transparent;
  border: 1.5px solid rgba(58,107,68,.45); border-radius: 999px;
  padding: 14px 16px; cursor: pointer;
  transition: background-color 150ms var(--ease-uit), border-color 150ms var(--ease-uit);
}
.rail__maak:hover { border-color: var(--groen); }
.rail__maak:hover { background: var(--groen-zacht); }

/* het vel papier waar de oefening op staat */
.vel {
  position: relative;
  background: var(--room);
  border-radius: clamp(30px, 5vw, 72px) clamp(30px, 5vw, 72px) 26px 26px;
  box-shadow: 0 30px 64px -36px rgba(34,31,26,.4);
  padding: clamp(32px, 5vw, 64px) clamp(28px, 4.5vw, 56px) clamp(28px, 4.5vw, 56px);
  min-height: 60vh;
}
.vel__label {
  display: block;
  font-family: var(--grotesk); font-weight: 700; font-size: .62rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--groen);
  margin-bottom: 10px;
}
.vel__titel {
  font-family: var(--serif); font-weight: 400; letter-spacing: -.015em;
  font-size: clamp(1.7rem, 3vw, 2.3rem); line-height: 1.12;
  color: var(--inkt); padding-bottom: 18px; margin-bottom: 26px;
  border-bottom: 1px solid var(--inkt-fluister);
}

/* ── de blokken zelf ─────────────────────────────────────────── */

.blok + .blok { margin-top: 1.1rem; }
.blok--kop {
  font-family: var(--serif); font-weight: 500; font-size: 1.28rem;
  letter-spacing: -.01em; color: var(--inkt); margin-top: 2.2rem;
}
.blok--tekst {
  font-family: var(--type); font-size: .97rem; line-height: 1.75;
  color: var(--inkt); max-width: 68ch;
}
.blok--stap {
  font-family: var(--type); font-weight: 700; font-size: .97rem;
  color: var(--inkt); margin-top: 1.8rem;
  display: flex; align-items: baseline; gap: 10px;
}
.blok--stap .stap__nr {
  font-family: var(--grotesk); font-weight: 700; font-size: .64rem;
  letter-spacing: .1em; color: var(--groen);
  border: 1.5px solid rgba(58,107,68,.5); border-radius: 999px;
  padding: 3px 10px; flex: none;
}
.blok--citaat {
  font-family: var(--serif); font-style: italic;
  font-size: 1.32rem; line-height: 1.4; letter-spacing: -.01em;
  color: var(--groen-diep); border-left: 2px solid var(--olijf);
  padding: 6px 0 6px 22px; margin-top: 1.9rem; max-width: 46ch;
}
.blok--kader {
  background: var(--groen-zacht);
  border-radius: 18px;
  padding: 18px 22px; margin-top: 1.5rem; max-width: 68ch;
}
.kader__titel {
  font-family: var(--grotesk); font-weight: 800; font-size: .66rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--blad);
  display: block; margin-bottom: 8px;
}
.kader__regel { font-family: var(--type); font-size: .92rem; line-height: 1.65; color: var(--inkt); }
.kader__regel + .kader__regel { margin-top: 6px; }

/* een beeld uit de openbare bucket (blog, agenda) */
.blok--beeld .beeld { margin: 0; }
/* dezelfde drie maten als op de blog, zodat de bouwer toont wat je krijgt */
.blok--beeld .beeld--klein  { max-width: min(100%, 320px); margin-inline: auto; }
.blok--beeld .beeld--middel { max-width: min(100%, 520px); margin-inline: auto; }
.blok--beeld img {
  display: block; width: 100%; height: auto;
  border-radius: clamp(18px, 2.5vw, 30px);
}
.blok--beeld.is-wacht .beeld {
  display: grid; place-items: center; min-height: 160px;
  border: 1.5px dashed rgba(34,31,26,.24); border-radius: 20px;
}
.beeld__wacht, .beeld__bijschrift {
  font-family: var(--type); font-size: .82rem; color: var(--inkt-dof);
}
.beeld__bijschrift { display: block; margin-top: 8px; line-height: 1.5; }

/* ── een YouTube-video, pas ná een klik ────────────────────────
   Vóór de klik een vlak in de huisstijl met de titel en dezelfde
   afspeelknop als bij een eigen video. Geen thumbnail van ytimg: dat zou
   een verzoek naar YouTube zijn nog vóór de bezoeker iets koos. */
.blok--film {
  position: relative; margin-bottom: 2rem;
}
.film__doek, .film__speler {
  display: block; width: 100%; aspect-ratio: 16 / 9;
  border: 0; border-radius: clamp(18px, 2.5vw, 30px);
}
.film__doek {
  position: relative;
  background: linear-gradient(168deg, #43764C, #2C5334);
  box-shadow: 0 22px 44px -30px rgba(24,40,26,.7);
}
/* De titel bovenaan, de knop in het midden. Stonden ze allebei gecentreerd,
   dan lag de knop over de tekst. */
.film__naam {
  position: absolute; top: clamp(18px, 3vw, 28px); left: 24px; right: 24px;
  font-family: var(--serif); font-size: clamp(1rem, 2vw, 1.3rem);
  color: rgba(247,242,232,.94); text-align: center; line-height: 1.3;
}
.film__bron {
  display: block; margin-top: 8px;
  font-family: var(--type); font-size: .8rem; color: var(--inkt-dof);
}
.blok--film.is-wacht .film__doek { background: rgba(34,31,26,.12); }
.blok--film.is-wacht .film__naam { color: var(--inkt-dof); }

.blok--video {
  position: relative; margin-bottom: 2rem;
  aspect-ratio: 16 / 9;
}
.blok--video::before {
  content: ""; position: absolute; inset: 3%;
  background: var(--olijf); border-radius: var(--blob);
  transform: translate(-2.5%, 3%); opacity: .5;
}
.blok--video img {
  position: relative; width: 100%; height: 100%; object-fit: cover; display: block;
  border-radius: clamp(22px, 3vw, 44px) clamp(22px, 3vw, 44px) 20px 20px;
}
.video__speel {
  position: absolute; z-index: 2; inset: 0; margin: auto;
  width: 68px; height: 68px; border-radius: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.4));
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.65); cursor: pointer;
  display: grid; place-items: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 10px 26px -12px rgba(34,31,26,.5);
  transition: transform 180ms var(--ease-uit);
}
.video__speel:hover { transform: scale(1.06); }
.video__speel::before {
  content: ""; width: 0; height: 0; margin-left: 5px;
  border-left: 17px solid var(--inkt);
  border-top: 11px solid transparent; border-bottom: 11px solid transparent;
}
.video__naam {
  position: absolute; left: 16px; bottom: 14px;
  font-family: var(--type); font-size: .82rem; color: #fff;
  text-shadow: 0 1px 6px rgba(0,0,0,.7);
}

/* Audio ís het product: een breed luisterblad met een golfvorm die
   tijdens het spelen traag volloopt, en een knop die op ademtempo
   meebeweegt. */
.blok--audio {
  display: grid; grid-template-columns: auto 1fr; align-items: center;
  column-gap: 18px; row-gap: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,.7), rgba(247,242,232,.9));
  border-radius: 22px;
  box-shadow: 0 16px 36px -26px rgba(34,31,26,.4);
  padding: 20px 24px; margin: .4rem 0 1.9rem;
}
.audio__knop {
  width: 54px; height: 54px; border-radius: 50%; flex: none;
  border: 0; background: var(--groen); cursor: pointer;
  display: grid; place-items: center;
  box-shadow: 0 10px 22px -12px rgba(44,83,52,.7);
  transition: background-color 160ms var(--ease-uit), transform 160ms var(--ease-uit);
}
.audio__knop:hover { background: var(--groen-diep); }
.audio__knop::before {
  content: ""; width: 0; height: 0; margin-left: 4px;
  border-left: 14px solid var(--papier);
  border-top: 9px solid transparent; border-bottom: 9px solid transparent;
}
.blok--audio.is-speelt .audio__knop {
  animation: audio-adem 10s ease-in-out infinite;
}
.blok--audio.is-speelt .audio__knop::before {
  border: 0; width: 14px; height: 16px; margin-left: 0;
  border-left: 5px solid var(--papier); border-right: 5px solid var(--papier);
}
@keyframes audio-adem {
  0%, 100% { transform: scale(1); }
  40%      { transform: scale(1.06); }
}
.audio__naam {
  font-family: var(--serif); font-style: italic; font-size: 1.08rem;
  color: var(--inkt);
}
.audio__golf {
  grid-column: 1 / -1;
  position: relative; height: 34px; overflow: hidden; border-radius: 8px;
}
.audio__golf svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.audio__golf .golf__basis rect { fill: rgba(58,107,68,.22); }
.audio__golf .golf__vol {
  position: absolute; inset: 0; width: 0%; overflow: hidden;
  transition: width 300ms linear;
}
.audio__golf .golf__vol rect { fill: var(--groen); }
.audio__golf .golf__vol svg { position: absolute; left: 0; top: 0; height: 100%; }

/* wat nog geschreven moet worden, tonen we als zodanig — niet verzinnen */
.blok--open {
  font-family: var(--type); font-size: .92rem; line-height: 1.7;
  color: var(--inkt-dof); max-width: 68ch;
  border: 1.5px dashed rgba(34,31,26,.28);
  padding: 14px 16px; margin-top: 1.2rem;
  background: rgba(255,255,255,.35);
}
.blok--open::before {
  content: "nog te schrijven";
  display: block; font-family: var(--grotesk); font-weight: 800;
  font-size: .6rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--balpen); margin-bottom: 6px;
}

/* onderaan een oefening: verder, en het zaadje afvinken */
.vel__voet {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
  margin-top: 2.6rem; padding-top: 20px;
  border-top: 1px solid var(--inkt-fluister);
}
.vel__gedaan {
  font-family: var(--grotesk); font-weight: 700; font-size: .72rem;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--groen); background: none; cursor: pointer;
  border: 1.5px solid rgba(58,107,68,.5); border-radius: 999px; padding: 11px 18px;
  transition: background-color 150ms var(--ease-uit), color 150ms var(--ease-uit),
              border-color 150ms var(--ease-uit);
}
.vel__gedaan:hover { background: rgba(63,125,60,.09); }
.vel__gedaan.is-af { background: var(--blad); color: var(--papier); }
.vel__volgende {
  font-family: var(--serif); font-style: italic; font-size: .98rem;
  color: var(--groen-diep);
  background: none; border: 0; cursor: pointer; text-decoration: underline;
  text-underline-offset: 4px; text-decoration-color: rgba(58,107,68,.4);
}

/* ── de nazit ─────────────────────────────────────────────────
   Na "poort geopend" niet meteen doorduwen: het vel dempt, één kernzin
   ademt een paar tellen na, en pas dan verschijnt de volgende stap.
   Zoals je bij de paarden ook nog even blijft staan. */
.vel.is-nazit { background: var(--haver-diep); transition: background-color 900ms var(--ease-uit); }
.nazit {
  min-height: 46vh;
  display: grid; place-items: center; align-content: center; gap: 26px;
  text-align: center; padding: 8vh 0;
}
.nazit__zin {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.35rem, 2.6vw, 1.9rem); line-height: 1.45;
  letter-spacing: -.01em; color: var(--groen-diep); max-width: 30ch;
  animation: nazit-adem 10s ease-in-out infinite;
}
@keyframes nazit-adem {
  0%, 100% { opacity: .82; }
  40%      { opacity: 1; }
}
.nazit__verder {
  opacity: 0; transform: translateY(8px);
  transition: opacity 900ms var(--ease-uit), transform 900ms var(--ease-uit);
  display: grid; gap: 12px; justify-items: center;
}
.nazit.is-verder .nazit__verder { opacity: 1; transform: none; }
.nazit__volgende {
  font-family: var(--grotesk); font-weight: 700; font-size: .74rem;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--papier); background: var(--groen);
  border: 0; border-radius: 999px; padding: 13px 22px; cursor: pointer;
  transition: background-color 160ms var(--ease-uit);
}
.nazit__volgende:hover { background: var(--groen-diep); }
.nazit__blijf {
  font-family: var(--type); font-size: .82rem; color: var(--inkt-dof);
  background: none; border: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
  .nazit__zin, .blok--audio.is-speelt .audio__knop { animation: none; }
}

/* leeg hoofdstuk */
.vel__wacht {
  font-family: var(--type); font-size: .95rem; line-height: 1.7;
  color: var(--inkt-dof); max-width: 54ch;
}

/* ── de bouwer ───────────────────────────────────────────────── */

.bouwer {
  position: fixed; inset: 0; z-index: 70;
  display: flex; flex-direction: column;
  background: var(--haver);
}
.bouwer__balk {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  padding: 14px clamp(16px, 3vw, 30px);
  border-bottom: 1px solid var(--inkt-fluister);
  background: rgb(250 247 240 / .95);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
          backdrop-filter: blur(16px) saturate(1.6);
}
.bouwer__wat { font-family: var(--type); font-weight: 700; font-size: 1.02rem; }
.bouwer__hint { font-family: var(--type); font-size: .8rem; color: var(--inkt-dof); margin-left: 10px; }
.bouwer__acties { display: flex; align-items: center; gap: 14px; }
.bouwer__weg {
  font-family: var(--grotesk); font-weight: 600; font-size: .72rem;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--inkt-dof); background: none; border: 0; cursor: pointer;
}
.bouwer__weg:hover { color: var(--inkt); }
.bouwer__op { font-size: .8rem; padding: 9px 16px; }

.bouwer__blad {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: clamp(16px, 2.5vw, 30px);
  padding: clamp(16px, 3vw, 28px);
  overflow: hidden;
}

.palet {
  overflow-y: auto;
  background: #fbf9f4;
  border: 1px solid rgba(34,31,26,.14);
  padding: 20px;
  display: grid; align-content: start; gap: 4px;
}
.palet__label {
  font-family: var(--grotesk); font-weight: 600; font-size: .64rem;
  letter-spacing: .13em; text-transform: uppercase; color: var(--inkt-dof);
  margin-top: 12px;
}
.palet__veld {
  font-family: var(--type); font-size: .9rem; color: var(--inkt);
  background: rgba(255,253,248,.9);
  border: 0; border-bottom: 1.5px solid rgba(34,31,26,.32);
  padding: 8px 4px; width: 100%;
}
.palet__veld:focus { outline: 2px solid var(--stempelrood); outline-offset: 2px; }
.palet__kop {
  font-family: var(--type); font-weight: 700; font-size: 1rem;
  margin-top: 26px; padding-top: 18px;
  border-top: 1px solid var(--inkt-fluister);
}
.palet__uitleg { font-family: var(--type); font-size: .76rem; color: var(--inkt-dof); line-height: 1.5; margin: 4px 0 12px; }
.palet__blokken { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.palet__blok {
  font-family: var(--type); font-size: .82rem; color: var(--inkt);
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(34,31,26,.2); border-radius: 3px;
  padding: 11px 8px; cursor: pointer; text-align: center;
  transition: border-color 150ms var(--ease-uit), background-color 150ms var(--ease-uit);
}
.palet__blok:hover { border-color: var(--blad); background: var(--blad-zacht); }

.werkbank {
  overflow-y: auto;
  background: #fbf9f4;
  border: 1px solid rgba(34,31,26,.12);
  box-shadow: 0 2px 6px rgba(34,31,26,.06);
  padding: clamp(22px, 3.5vw, 44px);
}
.werkbank__leeg {
  font-family: var(--type); font-size: .92rem; color: var(--inkt-dof);
  border: 1.5px dashed rgba(34,31,26,.24);
  padding: 34px; text-align: center;
}

.bouwsteen { position: relative; padding: 6px 96px 6px 0; }
.bouwsteen + .bouwsteen { margin-top: 6px; }
.bouwsteen:hover { background: rgba(255,255,255,.5); }
.bouwsteen__gereed {
  position: absolute; right: 0; top: 6px;
  display: flex; gap: 3px; opacity: 0;
  transition: opacity 140ms var(--ease-uit);
}
.bouwsteen:hover .bouwsteen__gereed, .bouwsteen:focus-within .bouwsteen__gereed { opacity: 1; }
.bouwsteen__gereed button {
  width: 26px; height: 26px; border-radius: 3px; cursor: pointer;
  border: 1px solid rgba(34,31,26,.22); background: rgba(255,255,255,.85);
  font-family: var(--grotesk); font-size: .8rem; line-height: 1; color: var(--inkt-dof);
}
.bouwsteen__gereed button:hover { color: var(--inkt); border-color: rgba(34,31,26,.45); }
.bouwsteen__greep { cursor: grab; }
.bouwsteen__greep:active { cursor: grabbing; }
.bouwsteen.is-sleept { opacity: .45; }
/* waar het blok terechtkomt: een groene lijn boven of onder de plek */
.bouwsteen.is-doel-boven { box-shadow: 0 -2px 0 var(--groen, #3A6B44); }
.bouwsteen.is-doel-onder { box-shadow: 0 2px 0 var(--groen, #3A6B44); }

/* voorbeeldtekst: schuin en lichter, en het blok krijgt een streepje in
   de kantlijn. Zo zie je in één blik wat nog van ons is en wat al van
   Nele — en zodra ze erin typt is het verschil weg. */
.bouwsteen [contenteditable].is-voorbeeld {
  font-style: italic; color: rgba(34,31,26,.5);
}
.bouwsteen--voorbeeld { border-left: 2px solid rgba(34,31,26,.16); padding-left: 12px; margin-left: -14px; }
.bouwsteen--voorbeeld:hover { border-left-color: var(--groen, #3A6B44); }
.werkbank__wis {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--type); font-size: .86rem; color: var(--groen, #3A6B44);
  text-decoration: underline; text-underline-offset: 3px;
}

/* de aanwijzing bovenaan de werkbank als een sjabloon klaarstaat */
.werkbank__hint {
  margin: 0 0 22px; padding: 12px 16px;
  background: rgba(58,107,68,.07); border: 1px solid rgba(58,107,68,.16);
  border-radius: 14px;
  font-family: var(--type); font-size: .86rem; line-height: 1.6;
  color: rgba(43,36,30,.82); max-width: 62ch;
}
.bouwsteen__gereed .weg:hover { color: var(--stempelrood); border-color: var(--stempelrood); }

/* de invoervelden zien er precies uit als het resultaat — dat is de truc:
   wat ze typt staat er meteen zoals het straks op de site komt */
.bouwsteen [contenteditable] {
  display: block; outline: 0; min-height: 1.4em;
  border-radius: 2px;
}
.bouwsteen [contenteditable]:focus { box-shadow: 0 0 0 2px var(--stempelrood); }
.bouwsteen [contenteditable]:empty::before {
  content: attr(data-leeg); color: var(--inkt-fluister);
}

/* ── mobiel ──────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .kamer__blad { grid-template-columns: 1fr; }
  /* De rail lost op in het blad, zodat alleen de oefeningenlijst bóven de
     tekst staat. De gastvrouw, de voortgang en de maak-knop schuiven eronder:
     die zijn niet waarvoor je de pagina opende. */
  .rail { display: contents; }
  #rail-lijst   { order: 1; }
  .vel          { order: 2; }
  .rail__gastvrouw { order: 3; }
  .rail__voortgang { order: 4; }
  .voordeel        { order: 5; }
  .rail__maak      { order: 6; }
  .kamer__blad { display: flex; flex-direction: column; }
  .bouwer__blad { grid-template-columns: 1fr; overflow-y: auto; }
  .palet { overflow: visible; }
  .werkbank { overflow: visible; }
}
@media (max-width: 640px) {
  .rekken { margin-top: 84px; overflow-x: auto; flex-wrap: nowrap;
    justify-content: flex-start; max-width: calc(100% - 24px); }
  .rek__lade { position: static; width: 100%; opacity: 1; visibility: visible; transform: none; display: none; }
  .rek.is-hier .rek__lade { display: none; }
  .vel { padding: 24px 20px; }
}

/* ── de tak die meegroeit ─────────────────────────────────────
   Eén getekende stengel (stroke-dashoffset, genormaliseerd met
   pathLength=100). Elke geopende poort ontvouwt op zijn plek een
   blaadje; bij zeventien bloeit bovenaan de klaver van het logo. */
.tak { position: relative; width: 120px; margin: 2px auto 8px; }
.tak svg { display: block; width: 100%; height: auto; overflow: visible; }
.tak__basis {
  fill: none; stroke: rgba(43,36,30,.12); stroke-width: 2.5; stroke-linecap: round;
}
.tak__stengel {
  fill: none; stroke: var(--olijf); stroke-width: 2.5; stroke-linecap: round;
  stroke-dasharray: 100;
  transition: stroke-dashoffset 900ms var(--ease-uit);
}
.tak__blad {
  fill: rgba(43,36,30,.1);
  transform-box: fill-box; transform-origin: var(--steel, 0% 100%);
  transform: scale(.55);
  transition: transform 500ms var(--ease-uit), fill 500ms var(--ease-uit);
}
.tak__blad.is-op { fill: var(--groen); transform: scale(1); }
.tak__blad.is-op:nth-child(odd) { fill: var(--olijf); }
.tak__klaver {
  position: absolute; top: -6px; left: 50%;
  width: 34px; height: 34px; margin-left: -17px;
  color: var(--groen);
  transform: scale(0); transition: transform 700ms var(--ease-uit) 500ms;
}
.tak.is-bloei .tak__klaver { transform: scale(1); }
/* Eén getal in plaats van twee. Er stond "0" met "0%" ernaast — twee
   manieren om hetzelfde te zeggen, en dan lees je geen van beide. */
.tak__cijfer {
  display: flex; align-items: baseline; justify-content: center;
  margin-bottom: 18px;
}
.tak__cijfer strong {
  font-family: var(--serif); font-weight: 400; font-size: 2.5rem;
  line-height: 1; color: var(--groen); letter-spacing: -.02em;
}

/* per hoofdstuk een balkje: waar sta je, en wat is nog leeg */
.voortgang__rekken {
  list-style: none; margin: 0 0 16px;
  border-top: 1px solid var(--inkt-fluister);
}
.voortgang__rek {
  display: grid; grid-template-columns: 1fr 46px auto;
  align-items: center; gap: 10px;
  padding: 9px 0; cursor: pointer;
  border-bottom: 1px solid var(--inkt-fluister);
}
.voortgang__rek:hover .voortgang__naam { color: var(--inkt); }
.voortgang__naam {
  font-family: var(--type); font-size: .84rem; color: var(--inkt-dof);
  transition: color 140ms var(--ease-uit);
}
.voortgang__balk {
  height: 4px; border-radius: 999px; overflow: hidden;
  background: rgba(43, 36, 30, .12);
}
.voortgang__balk i {
  display: block; height: 100%; border-radius: 999px;
  background: var(--olijf);
  transition: width 600ms var(--ease-uit);
}
.voortgang__telling {
  font-family: var(--grotesk); font-weight: 600; font-size: .68rem;
  letter-spacing: .06em; color: var(--inkt-dof);
}
.voortgang__rek.is-af .voortgang__naam { color: var(--olijf); font-weight: 600; }
.voortgang__rek.is-af .voortgang__balk i { background: var(--groen); }

/* de volgende stap — het enige dat écht aanzet tot doen */
.voortgang__volgende {
  background: var(--haver); border-radius: 3px;
  padding: 13px 14px; margin-bottom: 14px;
}
.voortgang__label {
  display: block;
  font-family: var(--grotesk); font-weight: 600; font-size: .58rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--groen);
  margin-bottom: 5px;
}
.voortgang__knop {
  font-family: var(--serif); font-size: 1.02rem; line-height: 1.25;
  color: var(--inkt); background: none; border: 0; cursor: pointer;
  text-align: left; padding: 0;
}
.voortgang__knop:hover { color: var(--groen); }


/* Ook vanaf het inlogscherm moet je terug naar de website kunnen. Wie
   hier per ongeluk belandt, zat anders opgesloten voor een deur. */
.deur__terug {
  display: inline-block; margin-top: 18px;
  font-family: var(--grotesk); font-weight: 500; font-size: .72rem;
  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 160ms var(--ease-uit), border-color 160ms var(--ease-uit);
}
.deur__terug:hover { color: var(--groen); border-color: var(--groen); }

/* op de deur staat het logo in plaats van de naam in letters */
.deur__kop--logo { margin: 4px 0 2px; }
.deur__kop--logo .edg-logo { width: min(100%, 250px); }

/* een knop midden in een pagina — de wegwijzers naar boek en mentorship */
.blok--knop { margin-top: 1.4rem; }
.blok--knop .stempel { display: inline-block; }

/* audio waarvan de opname nog moet komen: knop uit, reden erbij */
.blok--audio.is-wacht { opacity: .72; }
.blok--audio.is-wacht .audio__knop { border-color: rgba(34,31,26,.3); cursor: default; }
.blok--audio.is-wacht .audio__knop::before { border-left-color: rgba(34,31,26,.3); }
.audio__wacht {
  margin-left: auto; font-family: var(--grotesk); font-weight: 800;
  font-size: .58rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--inkt-dof);
}

/* De welkomvideo is met een telefoon gefilmd: staand beeld, 404x720. Ik
   liet hem eerst rechtop staan met de kleivorm eromheen — dat las als een
   staande foto die in een liggende vorm was geplakt, en de titel viel er
   half achter.

   Nu vult hij de vorm: liggend kader, beeld op cover, en boven en onder
   weggesneden. Het zwaartepunt ligt op 30% hoogte want daar zit haar
   gezicht; op 50% zou je vooral haar schouders zien.

   Kader op 4:3 en niet breder dan 560px: de bron is maar 404px breed, dus
   een breed 16:9-kader zou hem flink moeten oprekken. Zo blijft hij scherp. */
.blok--video {
  position: relative;
  aspect-ratio: 4 / 3;
  width: 100%; max-width: 560px;
  margin: .4rem auto 2rem;
}
.blok--video img, .video__speler {
  position: relative; z-index: 1;
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 30%;
  background: #241d16;
  border-radius: clamp(22px, 3vw, 44px) clamp(22px, 3vw, 44px) 20px 20px;
  box-shadow: 0 26px 52px -34px rgba(34,31,26,.55);
}
/* De naam stond onder het beeld in dezelfde stapel en verdween er half
   achter. Hij hoort erbovenop, met een verloopje eronder zodat witte
   letters ook op een licht stuk beeld leesbaar blijven. */
.video__naam {
  z-index: 2;
  left: 0; right: 0; bottom: 0;
  padding: 34px 20px 14px;
  border-radius: 0 0 20px 20px;
  background: linear-gradient(to top, rgba(24,20,16,.72), rgba(24,20,16,0));
  font-size: .86rem; letter-spacing: .01em;
  transition: opacity 240ms var(--ease-uit);
}
/* Zodra hij speelt komen de knoppen van de browser onderaan in beeld. De
   titel zou daar bovenop liggen, dus die stapt opzij. */
.blok--video.is-speelt .video__naam { opacity: 0; pointer-events: none; }
.blok--video.is-wacht .video__speel { opacity: .35; pointer-events: none; }
.video__wacht {
  position: absolute; z-index: 3; left: 50%; bottom: 14px; transform: translateX(-50%);
  font-family: var(--grotesk); font-weight: 600; font-size: .62rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--room); background: rgba(34,31,26,.55);
  padding: 5px 11px; border-radius: 999px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}

/* ═══ Beheer: alleen zichtbaar voor een admin ═══════════════════
   De bouwer was een demo — élk lid zag de knop, en wat er gemaakt werd
   bleef in localStorage steken. Nu hangt alles aan een rol die de
   databank afdwingt. Deze stijlen horen bij die laag. */

/* De beheerbalk boven een zelfgemaakte pagina. Dit was één dun streepje
   met een tekstlink, en dat werd niet gezien — "na publiceren kan ik niets
   meer aanpassen", terwijl het wel kon. Een beheerbalk mag eruitzien als
   een beheerbalk: hij hoort niet bij de pagina, hij hoort bij jou. */
.velbeheer {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 14px;
  margin: 0 0 30px; padding: 12px 12px 12px 16px;
  border: 1px solid rgba(58, 107, 68, .22);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(58,107,68,.09), rgba(58,107,68,.04));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}
.velbeheer__merk {
  font-family: var(--grotesk); font-size: .62rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  border-radius: 999px; padding: 6px 12px;
}
.velbeheer__merk.is-live    { color: #2c5334; background: rgba(58, 107, 68, .14); }
.velbeheer__merk.is-concept { color: #8a6a24; background: rgba(214, 168, 63, .2); }

.velbeheer__knoppen { display: flex; flex-wrap: wrap; gap: 8px; }
.velbeheer__knop {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--grotesk); font-size: .66rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  border-radius: 999px; padding: 9px 16px; cursor: pointer;
  border: 1px solid transparent;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}
.velbeheer__knop span[aria-hidden] { font-size: .9rem; line-height: 1; }
.velbeheer__knop--vol {
  background: var(--groen, #3A6B44); color: #fff;
}
.velbeheer__knop--vol:hover { background: #2c5334; }
/* Weghalen is onomkeerbaar, dus hij vraagt om een tweede blik: rustig
   tot je hem aanraakt, en pas dan rood. Een knop die altijd rood is,
   wordt genegeerd. */
.velbeheer__knop--weg {
  background: transparent; color: #8a4030;
  border-color: rgba(154, 52, 18, .32);
}
.velbeheer__knop--weg:hover { background: rgba(154, 52, 18, .1); color: #7a2e1f; }
.velbeheer__knop:disabled { opacity: .55; cursor: default; }

/* de melding in de balk van de bouwer */
.bouwer__stand {
  font-family: var(--type); font-size: .76rem; color: var(--inkt-dof);
  margin-right: 4px;
}
.bouwer__stand.is-fout { color: #9a3412; }
.bouwer__weg--rood { color: #9a3412; }

/* een bestand bij een audio- of videoblok zetten */
.uploadvak {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-top: 10px;
}
.uploadvak__knop {
  font-family: var(--grotesk); font-size: .64rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--groen); cursor: pointer;
  border: 1px solid rgba(58, 107, 68, .4); border-radius: 999px;
  padding: 7px 14px;
  transition: background-color 150ms ease;
}
.uploadvak__knop:hover { background: rgba(58, 107, 68, .08); }
/* het bestandsveld zelf is nooit mooi te krijgen; de label ís de knop */
.uploadvak__veld {
  position: absolute; width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
}
.uploadvak__knop:focus-within { outline: 2px solid var(--groen); outline-offset: 2px; }
.uploadvak__stand {
  font-family: var(--type); font-size: .74rem; color: var(--inkt-dof);
  overflow-wrap: anywhere;
}
.uploadvak__balk {
  flex: 1 1 120px; height: 6px; border-radius: 999px;
  background: rgba(43, 36, 30, .12); overflow: hidden;
}
.uploadvak__balk > span {
  display: block; height: 100%; width: 0;
  background: var(--groen); border-radius: 999px;
  transition: width 200ms ease;
}


/* ── het formaat van een video ─────────────────────────────────
   .blok--video stond vast op 4:3. Een filmpje van een telefoon is staand
   en werd dus aan alle kanten weggesneden. Zonder data-vorm blijft alles
   zoals het was, zodat de bestaande welkomvideo niet verspringt. */
.blok--video[data-vorm="liggend"]  { aspect-ratio: 16 / 9; max-width: 640px; }
.blok--video[data-vorm="vierkant"] { aspect-ratio: 1 / 1;  max-width: 520px; }
.blok--video[data-vorm="staand"]   { aspect-ratio: 9 / 16; max-width: 360px; }
/* Bij een gemeten vorm klopt het kader met het beeld, dus hoeft er niets
   meer weggesneden te worden — en dan is midden het eerlijkste. */
.blok--video[data-vorm] img, .blok--video[data-vorm] .video__speler {
  object-position: 50% 50%;
}

/* de keuze in de bouwer */
.vormkeuze {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 12px;
}
.vormkeuze__label {
  font-family: var(--grotesk); font-size: .6rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--inkt-dof); margin-right: 4px;
}
.vormkeuze__knop {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--type); font-size: .74rem; color: var(--inkt);
  background: rgba(255,255,255,.6);
  border: 1px solid var(--inkt-fluister); border-radius: 12px;
  padding: 7px 12px; cursor: pointer;
  transition: border-color 150ms ease, background-color 150ms ease;
}
.vormkeuze__knop:hover { border-color: rgba(58, 107, 68, .5); }
.vormkeuze__knop.is-aan {
  border-color: var(--groen, #3A6B44);
  background: rgba(58, 107, 68, .1);
}
.vormkeuze__knop em {
  display: block; font-style: normal; font-size: .64rem;
  color: var(--inkt-dof); letter-spacing: .04em;
}
/* een klein vormpje zegt sneller wat er bedoeld wordt dan "9:16" */
.vormkeuze__vorm {
  display: block; border: 1.5px solid currentColor; border-radius: 3px;
  opacity: .65;
}
.vormkeuze__vorm--liggend  { width: 22px; height: 13px; }
.vormkeuze__vorm--vierkant { width: 17px; height: 17px; }
.vormkeuze__vorm--staand   { width: 12px; height: 20px; }
.vormkeuze__knop.is-aan .vormkeuze__vorm { opacity: 1; color: var(--groen, #3A6B44); }

/* ═══ De deur krijgt een bordje ════════════════════════════════
   Een inlogscherm is een deur zonder bordje: wie hier belandt zonder
   account ziet twee velden, weet niet wat erachter zit, en gaat weg.
   Naast de poort staat nu wat het is, wat het kost en wat je krijgt —
   en één knop die rechtstreeks naar de bestelpagina gaat, in plaats van
   iemand terug te sturen naar een website waar hij het opnieuw moet
   zoeken. Groen tegenover crème: het paneel hoort bij dezelfde tuin maar
   is duidelijk iets ánders dan het inloggen. */
/* ONDER de poort, niet ernaast. Naast elkaar concurreerden twee kaarten
   om dezelfde blik en werd het scherm een keuzemenu; de kop "Welkom
   terug" ging kopje-onder. Nu is er één kolom en dus één volgorde: eerst
   de deur voor wie een sleutel heeft, daaronder het bordje voor wie er
   geen heeft. Dezelfde breedte, zodat het één geheel blijft. */
.deur__paar {
  position: relative; z-index: 1;
  display: grid; justify-items: center;
  width: 100%; max-width: 440px;
  margin: 0 auto;
}
/* Zodra er ademgehaald wordt is het paneel niet meer aan de orde: dan
   ben je binnen, en dan moet er niets meer verkocht worden. */
.deur.is-adem .poortje { opacity: 0; pointer-events: none; transition: opacity 500ms var(--ease-uit); }

/* De scheidslijn tussen "ik heb een account" en "ik niet": één woord op
   een haarlijn. Zonder dat leest het paneel als een tweede formulier. */
.poortje__grens {
  display: flex; align-items: center; gap: 14px;
  width: 100%; margin: 26px 0 18px;
  font-family: var(--grotesk); font-weight: 600; font-size: .6rem;
  letter-spacing: .16em; text-transform: uppercase;
  color: rgba(43, 36, 30, .5);
}
.poortje__grens::before, .poortje__grens::after {
  content: ""; flex: 1; height: 1px; background: rgba(43, 36, 30, .16);
}

.poortje {
  width: 100%;
  display: flex; flex-direction: column;
  background: linear-gradient(178deg, #40734B, #33603D);
  color: rgba(247, 242, 232, .92);
  border-radius: 26px;
  padding: clamp(26px, 3.4vw, 34px);
  box-shadow: 0 30px 70px -34px rgba(24, 40, 26, .7);
  text-align: left;
}
.poortje__merk {
  font-family: var(--grotesk); font-weight: 600; font-size: .62rem;
  letter-spacing: .16em; text-transform: uppercase;
  color: #D9E6D1; margin-bottom: 12px;
}
.poortje__kop {
  font-family: var(--serif); font-weight: 400; letter-spacing: -.02em;
  font-size: clamp(1.5rem, 2.3vw, 1.9rem); line-height: 1.14;
  color: #F7F2E8; margin: 0 0 10px;
}
.poortje__kop em { font-style: italic; }
.poortje__lead {
  font-family: var(--type); font-size: .92rem; line-height: 1.62;
  color: rgba(247, 242, 232, .84); margin: 0 0 18px;
}
.poortje__lijst {
  list-style: none; margin: 0 0 20px; padding: 0;
  display: grid; gap: 9px;
}
.poortje__lijst li {
  position: relative; padding-left: 22px;
  font-family: var(--type); font-size: .88rem; line-height: 1.5;
  color: rgba(247, 242, 232, .9);
}
/* een blaadje in plaats van een vinkje: een vinkje hoort bij een
   softwarepagina, dit hoort bij een tuin */
.poortje__lijst li::before {
  content: ""; position: absolute; left: 0; top: .42em;
  width: 9px; height: 9px; border-radius: 60% 0 60% 0;
  background: #C6D9BA;
}
.poortje__prijs {
  display: flex; align-items: baseline; gap: 10px;
  padding-top: 16px; margin-top: auto;
  border-top: 1px solid rgba(247, 242, 232, .18);
}
.poortje__prijs strong {
  font-family: var(--serif); font-weight: 400; font-size: 2.1rem;
  line-height: 1; color: #F7F2E8;
}
.poortje__prijs span {
  font-family: var(--type); font-size: .78rem; color: rgba(247, 242, 232, .7);
}
.poortje__knop {
  display: block; text-align: center; text-decoration: none;
  margin-top: 16px; padding: 15px 22px; border-radius: 999px;
  background: #F7F2E8; color: #2C5334;
  font-family: var(--grotesk); font-weight: 600; font-size: .74rem;
  letter-spacing: .14em; text-transform: uppercase;
  transition: background-color 160ms ease, transform 160ms ease;
}
.poortje__knop:hover { background: #fff; transform: translateY(-1px); }
.poortje__klein {
  font-family: var(--type); font-size: .76rem; line-height: 1.5;
  color: rgba(247, 242, 232, .68); margin: 12px 0 0; text-align: center;
}
.poortje__lees {
  display: block; text-align: center; margin-top: 12px;
  font-family: var(--type); font-size: .82rem;
  color: rgba(247, 242, 232, .85);
  text-decoration: underline; text-underline-offset: 4px;
}
.poortje__lees:hover { color: #fff; }

@media (max-width: 880px) {
  .poortje { border-radius: 22px; }
}

/* ═══ Het vraagvenster ═════════════════════════════════════════
   "Consulteer Nele" stuurde een lid naar de verkooppagina van het
   mentorship. Dat is de verkeerde kant op: wie hier zit is al binnen.
   Nu opent er een venster waarin hij zijn vraag kwijt kan, met bovenaan
   het enige wat hij moet weten — dat zijn lidmaatschap meetelt. */
.vraagvenster {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center;
  padding: clamp(16px, 4vh, 40px) 16px;
  overflow-y: auto;
}
html.vraag-open { overflow: hidden; }
.vraagvenster__doek {
  position: absolute; inset: 0;
  background: rgba(34, 31, 26, .48);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.vraagvenster__blad {
  position: relative; z-index: 1;
  width: min(100%, 520px);
  background: linear-gradient(180deg, #FBF8F1, #F5F0E5);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 26px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9),
              0 40px 90px -40px rgba(24, 20, 16, .65);
  padding: clamp(26px, 4vw, 38px);
}
.vraagvenster__kruis {
  position: absolute; top: 14px; right: 16px;
  width: 34px; height: 34px; border-radius: 50%;
  border: 0; background: rgba(43, 36, 30, .07);
  font-size: 1.4rem; line-height: 1; color: var(--inkt-dof);
  cursor: pointer;
}
.vraagvenster__kruis:hover { background: rgba(43, 36, 30, .14); color: var(--inkt); }
.vraagvenster__merk {
  display: inline-block; margin-bottom: 12px;
  font-family: var(--grotesk); font-weight: 600; font-size: .62rem;
  letter-spacing: .15em; text-transform: uppercase;
  color: #F7F2E8; background: var(--groen, #3A6B44);
  border-radius: 999px; padding: 6px 13px;
}
.vraagvenster__kop {
  font-family: var(--serif); font-weight: 400; letter-spacing: -.02em;
  font-size: clamp(1.5rem, 3.4vw, 2rem); line-height: 1.12;
  margin: 0 0 .6rem;
}
.vraagvenster__lead {
  font-family: var(--type); font-size: .95rem; line-height: 1.65;
  color: rgba(43, 36, 30, .8); margin: 0 0 22px;
}
.vraagvenster__label {
  display: block; margin: 14px 0 5px;
  font-family: var(--grotesk); font-weight: 600; font-size: .62rem;
  letter-spacing: .14em; text-transform: uppercase; color: rgba(43,36,30,.7);
}
.vraagvenster__bij { text-transform: none; letter-spacing: 0; opacity: .7; font-weight: 400; }
.vraagvenster__veld {
  width: 100%; font-family: var(--type); font-size: .95rem; color: var(--inkt);
  background: rgba(255,253,248,.9);
  border: 1px solid rgba(43, 36, 30, .16); border-radius: 12px;
  padding: 11px 13px;
}
.vraagvenster__veld:focus {
  outline: 2px solid var(--groen, #3A6B44); outline-offset: 1px;
  border-color: transparent;
}
.vraagvenster__groot { resize: vertical; min-height: 120px; line-height: 1.6; }
.vraagvenster__knop { margin-top: 20px; width: 100%; justify-content: center; }
.vraagvenster__melding {
  margin: 12px 0 0; font-family: var(--type); font-size: .9rem; line-height: 1.55;
  color: var(--groen, #3A6B44);
}
.vraagvenster__melding.is-fout { color: #9a3412; }
.vraagvenster__vink { margin: 4px 0 14px; }
.vraagvenster__klein {
  margin: 14px 0 0; font-family: var(--type); font-size: .78rem; line-height: 1.55;
  color: rgba(43, 36, 30, .58);
}

/* ═══ Ledenbeheer ══════════════════════════════════════════════
   Eén scherm in de rechterkolom, in plaats van het lesvel. Zelfde
   papier, zelfde rust — dit is geen dashboard maar een lijst die Nele
   af en toe openslaat. */

.beheer {
  grid-column: 2;
  padding: clamp(22px, 3vw, 40px);
  background: rgb(250 247 240 / .82);
  -webkit-backdrop-filter: blur(14px) saturate(1.35);
          backdrop-filter: blur(14px) saturate(1.35);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 22px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 22px 46px -32px rgba(34,31,26,.4);
}
.beheer__kop {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: clamp(18px, 2.5vh, 26px);
}
.beheer__label {
  display: block; font-family: var(--grotesk); font-weight: 600;
  font-size: .64rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--groen);
}
.beheer__titel {
  font-family: var(--serif); font-weight: 400; letter-spacing: -.02em;
  font-size: clamp(1.5rem, 2.6vw, 2rem); margin: .3rem 0 0;
}
.beheer__sluit {
  font-family: var(--grotesk); font-weight: 600; font-size: .7rem;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--inkt-dof); background: none; border: 0; cursor: pointer;
  border-bottom: 1px solid var(--inkt-fluister); padding-bottom: 3px;
}
.beheer__sluit:hover { color: var(--inkt); }

/* iemand toevoegen */
.beheer__nieuw {
  padding: clamp(16px, 2vw, 22px);
  background: rgba(58, 107, 68, .05);
  border: 1px solid rgba(58, 107, 68, .14);
  border-radius: 16px;
  margin-bottom: 18px;
}
.beheer__veldlabel {
  display: block; font-family: var(--grotesk); font-weight: 600;
  font-size: .64rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--inkt-dof); margin-bottom: 8px;
}
.beheer__rij { display: flex; gap: 10px; flex-wrap: wrap; }
.beheer__veld {
  flex: 1 1 220px; min-width: 0;
  font-family: var(--type); font-size: 1rem; color: var(--inkt);
  background: rgba(255,255,255,.7); border: 1px solid rgba(43,36,30,.16);
  border-radius: 999px; padding: .7em 1.1em;
}
.beheer__veld:focus { outline: 2px solid var(--groen); outline-offset: 1px; }
.beheer__vink {
  display: flex; align-items: center; gap: 9px; margin-top: 12px;
  font-family: var(--type); font-size: .88rem; color: var(--inkt-dof);
  cursor: pointer;
}
.beheer__hint {
  margin: 10px 0 0; font-family: var(--type); font-size: .84rem;
  line-height: 1.55; color: rgba(43,36,30,.62); max-width: 52ch;
}

.beheer__melding {
  margin: 0 0 16px; padding: .8em 1.1em; border-radius: 12px;
  background: rgba(58,107,68,.09); color: var(--groen-diep);
  font-family: var(--type); font-size: .9rem; line-height: 1.5;
}
.beheer__melding.is-fout { background: rgba(154,52,18,.09); color: #9a3412; }

.beheer__telling {
  margin: 0 0 12px; font-family: var(--grotesk); font-weight: 600;
  font-size: .66rem; letter-spacing: .12em; text-transform: uppercase;
  /* Niet --inkt-dof: dat haalt op 11px hoofdletters maar 4,27:1, en die
     regel staat nu naast het "alles"-vinkje van de bulkbalk. */
  color: rgba(43,36,30,.78);
}
.beheer__leeg { font-family: var(--type); color: var(--inkt-dof); }

/* één lid */
/* Naam boven, knoppen eronder — altijd, ook als ze naast elkaar zouden
   passen. Met `flex-wrap` bepaalde het áántal knoppen of een regel inklapte:
   de rij met twee knoppen bleef op één lijn en die met vier viel om, en dan
   staat de lijst te schuiven van regel tot regel. Eén vorm voor iedereen
   leest rustiger dan een vorm die het zuinigst met ruimte omgaat. */
.lidrij {
  display: grid; gap: 10px;
  padding: 14px 0;
  border-top: 1px solid rgba(43,36,30,.1);
}
/* De beheerdersregel stond op opacity .72 uit de tijd dat er op zo'n regel
   toch niets te doen was. Nu staan daar wél knoppen, en dan leest een
   gedimde regel als "uitgeschakeld". Een streepje in het groen zegt
   hetzelfde zonder iets onbruikbaar te laten lijken. */
.lidrij--beheer {
  border-left: 2px solid var(--groen);
  padding-left: 12px; margin-left: -14px;
}
.lidrij__woord { display: grid; gap: 3px; min-width: 0; }
.lidrij__woord strong {
  font-family: var(--type); font-weight: 600; font-size: .96rem;
  color: var(--inkt); word-break: break-word;
}
.lidrij__woord span {
  font-family: var(--type); font-size: .8rem; color: rgba(43,36,30,.6);
}
.lidrij__knoppen { display: flex; gap: 8px; flex-wrap: wrap; }

.lidknop {
  font-family: var(--grotesk); font-weight: 600; font-size: .66rem;
  letter-spacing: .08em; text-transform: uppercase;
  padding: .62em 1.05em; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--inkt-dof);
  border: 1px solid rgba(43,36,30,.2);
  transition: background 160ms var(--ease-uit), color 160ms var(--ease-uit),
              border-color 160ms var(--ease-uit);
}
.lidknop:hover:not(:disabled) { background: rgba(43,36,30,.06); color: var(--inkt); }
.lidknop:disabled { opacity: .5; cursor: default; }
.lidknop:focus-visible { outline: 2px solid var(--groen); outline-offset: 2px; }
/* wie toegang heeft, ziet er ook zo uit — één blik volstaat */
.lidknop--aan {
  background: rgba(58,107,68,.12); color: var(--groen-diep);
  border-color: rgba(58,107,68,.35);
}
.lidknop--aan:hover:not(:disabled) { background: rgba(58,107,68,.2); color: var(--groen-diep); }
.lidknop--weg { color: rgba(154,52,18,.8); border-color: rgba(154,52,18,.25); }
.lidknop--weg:hover:not(:disabled) { background: rgba(154,52,18,.08); color: #9a3412; }

@media (max-width: 860px) {
  .beheer { grid-column: 1; }
  .lidrij { align-items: flex-start; }
}

/* Tikdoelen op een telefoon: "Wachtwoord vergeten?" was 12px hoog. De
   letter blijft; het raakvlak groeit onzichtbaar via een pseudo-element. */
@media (max-width: 700px) {
  #deur-vergeten, .deur__terug, .poortje__lees { position: relative; }
  #deur-vergeten::after, .deur__terug::after, .poortje__lees::after {
    content: ""; position: absolute; left: -6px; right: -6px; top: -15px; bottom: -15px;
  }
}