/* ==========================================================================
   Bureau Bloei — stylesheet
   1. Lettertypen   2. Design tokens   3. Basis   4. Layout   5. Componenten
   6. Secties       7. Formulieren     8. Pagina-specifiek    9. Beweging
   ========================================================================== */

/* 1. Lettertypen — zelf gehost (geen verbinding met Google, AVG-vriendelijk) */
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-latin-full-normal.woff2") format("woff2-variations"),
       url("../fonts/fraunces-latin-full-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("../fonts/figtree-latin-wght-normal.woff2") format("woff2-variations"),
       url("../fonts/figtree-latin-wght-normal.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

/* 2. Design tokens ------------------------------------------------------- */
:root {
  /* Merkkleuren. Wit is de hoofdkleur; beige, pastelblauw, oker, zachtroze en
     saliegroen ondersteunen. Antraciet komt exact overeen met het logo.
     Oker, roze en salie zijn gemeten uit de aangeleverde illustratie. */
  --kleur-wit: #FFFFFF;
  --kleur-beige: #E9E0D7;
  --kleur-blauw: #D9E6E9;
  --kleur-oker: #E0B370;
  --kleur-roze: #DEB49E;
  --kleur-salie: #87978C;
  --kleur-bordeaux: #754451;
  --kleur-antraciet: #353832;

  /* Afgeleide tinten */
  --kleur-licht: #F7F3EE;          /* lichte vlakken op wit (meldingen, lege staat) */
  --kleur-bordeaux-donker: #5E3541; /* hover/actief */
  --kleur-salie-donker: #4F6155;    /* tekst in groen (contrast 5:1) */
  --kleur-tekst-zacht: #585C54;     /* secundaire tekst (contrast 5,2:1) */
  --kleur-lijn: rgba(53, 56, 50, .18);
  --kleur-fout: #9E2B25;
  --kleur-fout-vlak: #F3E1DC;
  --kleur-succes-vlak: #E2E9E1;

  /* Rollen */
  --achtergrond: var(--kleur-wit);
  --tekst: var(--kleur-antraciet);
  --accent: var(--kleur-bordeaux);
  --focus: var(--kleur-bordeaux);

  /* Typografie: schaal volgens Bringhurst (16 · 18 · 21 · 24 · 36 · 48 · 60 · 72) */
  --font-kop: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-tekst: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
  --fs-klein: .9375rem;   /* 15 */
  --fs-basis: 1.0625rem;  /* 17 → 18 op groter scherm */
  --fs-intro: clamp(1.1875rem, .9rem + .9vw, 1.3125rem);   /* 19–21 */
  --fs-h3: clamp(1.3125rem, 1.1rem + .6vw, 1.5rem);        /* 21–24 */
  --fs-h2: clamp(1.875rem, 1.3rem + 2vw, 2.625rem);        /* 30–42 */
  --fs-h1: clamp(2.375rem, 1.4rem + 4vw, 4.25rem);         /* 38–68 */
  --maat: 34em;          /* regellengte lopende tekst (~70 tekens) */

  /* Ruimte */
  --r-1: .25rem; --r-2: .5rem; --r-3: .75rem; --r-4: 1rem; --r-5: 1.5rem;
  --r-6: 2rem;   --r-7: 3rem;  --r-8: 4.5rem; --r-9: 6.5rem;
  --sectie: clamp(4rem, 2.5rem + 6vw, 7.5rem);
  --rand: clamp(1rem, .5rem + 3vw, 2.5rem);
  --breedte: 74rem;

  /* Vorm */
  --hoek-klein: 4px;
  --hoek-knop: 999px;

  /* Beweging: kort voor feedback, langer voor de ene groei-animatie */
  --t-snel: 120ms;
  --t-normaal: 200ms;
  --t-nadruk: 320ms;
  --ease-uit: cubic-bezier(.22, .61, .36, 1);
}

@media (min-width: 48em) {
  :root { --fs-basis: 1.125rem; }
}

/* 3. Basis ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 6rem; }
body {
  margin: 0;
  background: var(--achtergrond);
  color: var(--tekst);
  font-family: var(--font-tekst);
  font-size: var(--fs-basis);
  line-height: 1.65;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4 {
  font-family: var(--font-kop);
  font-weight: 400;
  font-variation-settings: "SOFT" 100, "WONK" 0;
  line-height: 1.12;
  letter-spacing: -.01em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); line-height: 1.04; letter-spacing: -.02em; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 450; line-height: 1.25; }
p, ul, ol, dl { margin: 0 0 1em; }
p { text-wrap: pretty; }
strong { font-weight: 600; }

a {
  color: var(--accent);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  transition: text-decoration-thickness var(--t-snel) var(--ease-uit), color var(--t-snel) var(--ease-uit);
}
a:hover { text-decoration-thickness: 2px; color: var(--kleur-bordeaux-donker); }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
main:focus { outline: none; }

.skiplink {
  position: absolute; left: var(--r-4); top: -4rem; z-index: 100;
  background: var(--kleur-antraciet); color: var(--kleur-licht);
  padding: var(--r-2) var(--r-4); border-radius: var(--hoek-klein);
  transition: top var(--t-normaal) var(--ease-uit);
}
.skiplink:focus { top: var(--r-4); color: var(--kleur-licht); }

.visueel-verborgen {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Placeholder voor nog aan te vullen inhoud — goed zichtbaar, zodat niets vergeten wordt */
.aanvullen {
  background: repeating-linear-gradient(-45deg, #F7E6A8, #F7E6A8 6px, #F3DD8E 6px, #F3DD8E 12px);
  color: #3F2F00;
  font-family: var(--font-tekst);
  font-size: .85em;
  font-weight: 500;
  letter-spacing: 0;
  padding: .05em .35em;
  border-radius: 3px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* 4. Layout ---------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--breedte); margin-inline: auto; padding-inline: var(--rand); }
.tekst-maat { max-width: var(--maat); }
.intro { font-size: var(--fs-intro); line-height: 1.55; max-width: 32em; }
.zacht { color: var(--kleur-tekst-zacht); }

.sectie { padding-block: var(--sectie); position: relative; }
.sectie--blauw { background: var(--kleur-blauw); }
.sectie--beige { background: var(--kleur-beige); }
.sectie--krap { padding-block: calc(var(--sectie) * .6); }
/* Rustige, organische overgang: een flauwe boog boven gekleurde secties */
.sectie--boog::before {
  content: "";
  position: absolute; left: 0; right: 0; top: calc(-1 * clamp(1.5rem, 4vw, 3.5rem));
  height: clamp(1.5rem, 4vw, 3.5rem);
  background: inherit;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  pointer-events: none;
}

.sectie__kop { max-width: 40rem; margin-bottom: var(--r-7); }
.sectie__kop p { color: var(--kleur-tekst-zacht); font-size: var(--fs-intro); line-height: 1.55; }

.twee-kolom {
  display: grid; gap: var(--r-5);
}
@media (min-width: 56em) {
  .twee-kolom { grid-template-columns: 5fr 7fr; gap: var(--r-8); align-items: start; }
  .twee-kolom--omgekeerd { grid-template-columns: 7fr 5fr; }
}

/* 5. Componenten ---------------------------------------------------------- */

/* Knoppen */
.knop {
  --knop-bg: var(--kleur-bordeaux);
  --knop-tekst: var(--kleur-licht);
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 3rem; padding: .7em 1.5em;
  background: var(--knop-bg); color: var(--knop-tekst);
  border: 1.5px solid var(--knop-bg); border-radius: var(--hoek-knop);
  font-family: var(--font-tekst); font-size: 1rem; font-weight: 550; line-height: 1.2;
  text-decoration: none; cursor: pointer;
  transition: background-color var(--t-snel) var(--ease-uit), border-color var(--t-snel) var(--ease-uit),
              color var(--t-snel) var(--ease-uit), transform var(--t-snel) var(--ease-uit);
}
.knop:hover { --knop-bg: var(--kleur-bordeaux-donker); color: var(--knop-tekst); }
.knop:active { transform: scale(.98); }
.knop--rustig {
  --knop-bg: transparent; --knop-tekst: var(--kleur-bordeaux);
  border-color: var(--kleur-bordeaux);
}
.knop--rustig:hover { --knop-bg: rgba(117, 68, 81, .08); --knop-tekst: var(--kleur-bordeaux-donker); border-color: var(--kleur-bordeaux-donker); }
.knop[aria-disabled="true"], .knop:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.knop .laden { width: 1em; height: 1em; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: draai .7s linear infinite; }
.knoppen { display: flex; flex-wrap: wrap; gap: var(--r-4) var(--r-5); align-items: center; }

/* Tekstlink met pijl-loze, rustige vormgeving */

/* Header */
.kop {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--kleur-wit) 92%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-normaal) var(--ease-uit);
}
.kop.is-gescrold { border-bottom-color: var(--kleur-lijn); }
.kop__binnen { display: flex; align-items: center; gap: var(--r-5); min-height: 4.5rem; }
.kop__logo { display: block; color: var(--kleur-antraciet); flex-shrink: 0; margin-right: auto; }
.kop__logo svg { height: 2.75rem; width: auto; }
.knop--kop { min-height: 2.5rem; padding: .5em 1.15em; font-size: .9375rem; }

.nav__lijst { list-style: none; margin: 0; padding: 0; }
.nav__lijst a {
  color: var(--kleur-antraciet); text-decoration: none; font-size: 1rem; font-weight: 450;
  padding: .4em 0; position: relative;
}
.nav__lijst a[aria-current="page"] { font-weight: 600; }
.nav__lijst a:not(.knop)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .1em; height: 1.5px;
  background: var(--kleur-bordeaux); transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-normaal) var(--ease-uit);
}
.nav__lijst a:hover::after, .nav__lijst a[aria-current="page"]::after { transform: scaleX(1); }
.nav__knop {
  display: none; align-items: center; gap: .5em;
  min-height: 2.75rem; padding: .4em .9em; margin: 0;
  background: transparent; color: var(--kleur-antraciet);
  border: 1.5px solid var(--kleur-antraciet); border-radius: var(--hoek-knop);
  font: 550 .9375rem/1 var(--font-tekst); cursor: pointer;
}
.nav__icoon { position: relative; width: 1rem; height: .7rem; display: inline-block; }
.nav__icoon span { position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform var(--t-normaal) var(--ease-uit), top var(--t-normaal) var(--ease-uit); }
.nav__icoon span:first-child { top: 0; }
.nav__icoon span:last-child { top: calc(100% - 1.5px); }
.nav__knop[aria-expanded="true"] .nav__icoon span:first-child { top: calc(50% - .75px); transform: rotate(45deg); }
.nav__knop[aria-expanded="true"] .nav__icoon span:last-child { top: calc(50% - .75px); transform: rotate(-45deg); }
.nav__actie-mobiel { display: none; }

@media (min-width: 70em) {
  .nav__lijst { display: flex; gap: var(--r-5); }
}
@media (max-width: 69.99em) {
  .kop__logo svg { height: 2.35rem; }
  .knop--kop { display: none; }
  .nav__knop { display: inline-flex; }
  .nav__lijst {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--kleur-wit);
    border-bottom: 1px solid var(--kleur-lijn);
    padding: var(--r-3) var(--rand) var(--r-6);
    box-shadow: 0 24px 32px -24px rgba(53, 56, 50, .25);
  }
  .nav__lijst { max-height: calc(100dvh - 4.5rem); overflow-y: auto; overscroll-behavior: contain; }
  .js .nav__lijst { display: none; }
  .js .nav__lijst.is-open { display: block; animation: menu-in var(--t-normaal) var(--ease-uit); }
  .nav__lijst li { border-top: 1px solid var(--kleur-lijn); }
  .nav__lijst li:first-child { border-top: 0; }
  .nav__lijst a:not(.knop) { display: block; padding: .9em 0; font-size: 1.125rem; }
  .nav__lijst a:not(.knop)::after { display: none; }
  .nav__actie-mobiel { display: block; padding-top: var(--r-5); }
  .nav__actie-mobiel .knop { width: 100%; }
  .no-js .nav__lijst { position: static; box-shadow: none; padding-inline: 0; }
  .no-js .nav__knop { display: none; }
  .no-js .kop__binnen { flex-wrap: wrap; }
}
/* Lage schermen (of sterk ingezoomd): kop niet vast, zodat de inhoud ruimte houdt */
@media (max-height: 30em) { .kop { position: static; } }
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* Footer */
.voet { background: var(--kleur-antraciet); color: #E4DED5; padding-block: var(--r-8) var(--r-6); font-size: var(--fs-klein); }
.voet a { color: #F2ECE4; }
.voet a:hover { color: #fff; }
.voet :focus-visible { outline-color: var(--kleur-beige); }
.voet__binnen { display: grid; gap: var(--r-7); }
@media (min-width: 48em) { .voet__binnen { grid-template-columns: 2fr 1fr 1fr; } }
.voet__logo { display: inline-block; color: var(--kleur-beige); margin-bottom: var(--r-4); }
.voet__logo svg { height: 3.25rem; width: auto; }
.voet__merk p { max-width: 24em; color: #CFC8BE; }
.voet__kop { font-family: var(--font-tekst); font-size: var(--fs-klein); font-weight: 600; letter-spacing: 0; margin-bottom: var(--r-3); color: #F2ECE4; }
.voet__lijst { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; }
.voet__onder {
  display: flex; flex-wrap: wrap; gap: var(--r-3) var(--r-6); justify-content: space-between;
  margin-top: var(--r-8); padding-top: var(--r-5); color: #CFC8BE; position: relative;
}
.voet__onder::before { content: ""; position: absolute; top: 0; left: var(--rand); right: var(--rand); height: 1px; background: rgba(233, 224, 215, .2); }
.voet__onder p { margin: 0; }
.voet__gegevens { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.voet__juridisch { list-style: none; display: flex; gap: var(--r-5); padding: 0; margin: 0; }

/* Meldingen: succes, fout, info */
.melding {
  border-radius: var(--hoek-klein); padding: var(--r-5); margin-bottom: var(--r-6);
  border-left: 4px solid currentColor;
}
.melding:focus { outline: none; }
.melding--fout { background: var(--kleur-fout-vlak); color: var(--kleur-fout); }
.melding--fout p, .melding--fout li { color: var(--kleur-antraciet); }
.melding--succes { background: var(--kleur-succes-vlak); color: var(--kleur-salie-donker); }
.melding--succes p { color: var(--kleur-antraciet); }
.melding--info { background: var(--kleur-licht); color: var(--kleur-salie-donker); }
.melding--info p { color: var(--kleur-antraciet); }
.melding__titel { font-weight: 650; color: inherit !important; margin-bottom: .35em; }
.melding ul { margin: 0; padding-left: 1.2em; }
.melding a { color: var(--kleur-bordeaux); font-weight: 500; }
.melding--fout a { color: var(--kleur-fout); }
.melding > :last-child { margin-bottom: 0; }

/* Gegevenslijst (duur, locatie, vorm …) */
.feiten { display: grid; grid-template-columns: max-content 1fr; gap: .4rem var(--r-5); margin: 0 0 var(--r-5); font-size: var(--fs-klein); }
.feiten dt { color: var(--kleur-tekst-zacht); }
.feiten dd { margin: 0; }

/* Uitklapper (FAQ, workshopdetails) */
.uitklap { border-top: 1px solid var(--kleur-lijn); }
.uitklap:last-child { border-bottom: 1px solid var(--kleur-lijn); }
.uitklap summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--r-4);
  padding: var(--r-5) 0; font-family: var(--font-kop); font-variation-settings: "SOFT" 100; font-size: var(--fs-h3); line-height: 1.3;
}
.uitklap summary::-webkit-details-marker { display: none; }
.uitklap summary::after {
  content: ""; flex-shrink: 0; width: .65rem; height: .65rem; margin-right: .35rem;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-25%);
  transition: transform var(--t-normaal) var(--ease-uit);
}
.uitklap[open] summary::after { transform: rotate(-135deg) translateY(-25%); }
.uitklap__inhoud { padding-bottom: var(--r-5); max-width: var(--maat); }
.uitklap[open] .uitklap__inhoud { animation: menu-in var(--t-normaal) var(--ease-uit); }

/* Lijstje met rustige streepjes */
.lijst-rustig { list-style: none; padding: 0; }
.lijst-rustig li { position: relative; padding-left: 1.4em; margin-bottom: .45em; }
.lijst-rustig li::before {
  content: ""; position: absolute; left: 0; top: .78em; width: .7em; height: 1.5px; background: var(--kleur-salie);
}

/* Organische vorm achter illustraties en portret */
.vorm { position: relative; }
.vorm::before {
  content: ""; position: absolute; inset: 4% 0 0 6%;
  background: var(--vorm-kleur, var(--kleur-blauw));
  border-radius: 58% 42% 48% 52% / 46% 54% 46% 54%;
  z-index: 0;
}
.vorm > * { position: relative; z-index: 1; }

/* 6. Secties -------------------------------------------------------------- */

/* Hero (home) */
.held { padding-block: clamp(2.5rem, 1rem + 5vw, 5.5rem) calc(var(--sectie) * .55); overflow: hidden; }
.held__raster { display: grid; gap: var(--r-6); align-items: center; }
@media (min-width: 56em) { .held__raster { grid-template-columns: 7fr 5fr; gap: var(--r-7); } }
.held h1 { margin-bottom: var(--r-5); }
.held h1 .regel { display: block; }
.held__bovenregel { font-size: var(--fs-klein); font-weight: 550; color: var(--kleur-salie-donker); margin-bottom: var(--r-4); }
@media (min-width: 56em) {
  /* Twee regels in plaats van vier: "Ruimte om te groeien." / "Ruimte om te bloeien." */
  .held__raster { grid-template-columns: 8fr 5fr; }
  .held h1 { font-size: clamp(2.5rem, 1rem + 3.2vw, 3.75rem); }
  .held h1 .regel { white-space: nowrap; }
}
.held .intro { margin-bottom: var(--r-6); }
.held__beeld { position: relative; color: var(--kleur-antraciet); max-width: 31rem; justify-self: center; width: 100%; }
.held__beeld svg { position: relative; z-index: 1; width: 100%; height: auto; padding: 8% 4% 4% 2%; }
/* Drie organische vlakken achter de lijntekening, in de kleuren van de illustratie */
.vlek { position: absolute; z-index: 0; display: block; }
.vlek--oker  { background: var(--kleur-oker);  top: 2%;  left: 24%; width: 52%; height: 48%; border-radius: 52% 48% 58% 42% / 44% 56% 44% 56%; }
.vlek--salie { background: var(--kleur-salie); right: 0;  bottom: 10%; width: 44%; height: 46%; border-radius: 48% 52% 50% 50% / 56% 50% 50% 44%; opacity: .9; }
.vlek--roze  { background: var(--kleur-roze);  left: 0;   bottom: 2%; width: 34%; height: 34%; border-radius: 58% 42% 52% 48% / 52% 58% 42% 48%; }
@media (max-width: 55.99em) {
  /* Op mobiel eerst de boodschap en de knop, daarna de illustratie */
  .held__beeld { max-width: 14rem; justify-self: center; }
}

/* Kleine paginakop (subpagina's) */
.paginakop { padding-block: clamp(2.5rem, 1rem + 4vw, 5rem) clamp(2rem, 1rem + 3vw, 3.5rem); }
.paginakop h1 { font-size: clamp(2.25rem, 1.5rem + 3vw, 3.5rem); max-width: 16em; }
.paginakop .intro { color: var(--kleur-antraciet); }
.kruimel { font-size: var(--fs-klein); margin-bottom: var(--r-4); color: var(--kleur-tekst-zacht); }
.kruimel a { color: var(--kleur-tekst-zacht); }

/* Herkenning */
.gedachten { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--r-5); }
.gedachten li {
  font-family: var(--font-kop); font-variation-settings: "SOFT" 100; font-size: var(--fs-h3); line-height: 1.35;
  padding-left: var(--r-5); border-left: 3px solid var(--kleur-oker);
}

/* Drie pijlers: een groeiende lijn met drie knopen */
.pijlers { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--r-6); position: relative; }
@media (min-width: 48em) {
  .pijlers { grid-template-columns: repeat(3, 1fr); gap: var(--r-7); }
  .pijlers::before {
    content: ""; position: absolute; top: .5rem; left: .5rem; right: 0; height: 1.5px; background: var(--kleur-salie);
  }
}
.pijler { position: relative; padding-top: var(--r-6); }
.pijler::before {
  content: ""; position: absolute; top: 0; left: 0; width: 1rem; height: 1rem; border-radius: 50%;
  background: var(--kleur-oker);
}
.pijler:nth-child(2)::before { background: var(--kleur-roze); }
.pijler:nth-child(3)::before { background: var(--kleur-salie); }
.pijler h3 { margin-bottom: .35em; }
.pijler p { margin: 0; color: var(--kleur-tekst-zacht); }

/* Aanbod-rijen */
.aanbod { list-style: none; padding: 0; margin: 0; }
.aanbod__rij {
  display: grid; gap: var(--r-3) var(--r-7);
  padding-block: var(--r-6); border-top: 1px solid var(--kleur-lijn);
}
.aanbod__rij:last-child { border-bottom: 1px solid var(--kleur-lijn); }
@media (min-width: 56em) {
  .aanbod__rij { grid-template-columns: 4fr 6fr 15rem; align-items: baseline; }
  .aanbod__rij .aanbod__actie { justify-self: end; text-align: right; }
}
.aanbod__rij h3 { margin: 0; }
.aanbod__rij p { margin: 0; }
.aanbod__actie .knop { white-space: nowrap; }

/* Persoon / portret */
.portret { aspect-ratio: 4 / 5; max-width: 26rem; }
.portret__zonder-foto { height: 100%; display: grid; place-items: center; padding: 12% 10%; color: var(--kleur-antraciet); }
.portret__zonder-foto svg { width: 100%; height: auto; }
.portret__notitie { position: absolute; left: 0; right: 0; bottom: -2.5rem; text-align: center; font-size: var(--fs-klein); margin: 0; }
.portret img { width: 100%; height: 100%; object-fit: cover; border-radius: 46% 54% 50% 50% / 40% 40% 60% 60%; }
.ondertitel { font-family: var(--font-tekst); font-size: var(--fs-klein); color: var(--kleur-salie-donker); font-weight: 550; margin-top: -.25em; margin-bottom: var(--r-5); }

/* Stappen (echte volgorde, dus genummerd) */
.stappen { list-style: none; padding: 0; margin: 0; counter-reset: stap; display: grid; gap: var(--r-5); }
.stap { counter-increment: stap; position: relative; padding-left: 3.25rem; }
.stap::before {
  content: counter(stap);
  position: absolute; left: 0; top: -.1rem;
  width: 2.25rem; height: 2.25rem; border-radius: 50%;
  display: grid; place-items: center;
  border: 1.5px solid var(--kleur-antraciet);
  font-family: var(--font-kop); font-variation-settings: "SOFT" 100; font-size: 1.05rem; line-height: 1;
  background: var(--achtergrond-stap, var(--kleur-wit));
}
.stap::after {
  content: ""; position: absolute; left: 1.075rem; top: 2.4rem; bottom: calc(-1 * var(--r-5) + .2rem);
  width: 1.5px; background: var(--kleur-lijn);
}
.stap:last-child::after { display: none; }
.stap h3 { font-size: 1.25rem; margin-bottom: .25em; }
.stap p { margin: 0; color: var(--kleur-tekst-zacht); }
@media (min-width: 70em) {
  .stappen--horizontaal { grid-template-columns: repeat(5, 1fr); gap: var(--r-5); }
  .stappen--horizontaal .stap { padding-left: 0; padding-top: 3.25rem; }
  .stappen--horizontaal .stap::after { left: 2.5rem; right: -.75rem; top: 1.1rem; bottom: auto; width: auto; height: 1.5px; }
}
.sectie--blauw .stap::before { --achtergrond-stap: var(--kleur-blauw); }
.sectie--beige .stap::before { --achtergrond-stap: var(--kleur-beige); }

/* Stappen met meer tekst (werkwijze-pagina) */
.stappen--groot { gap: var(--r-7); }
.stappen--groot .stap { padding-left: 4rem; }
.stappen--groot .stap::before { width: 2.75rem; height: 2.75rem; font-size: 1.25rem; }
.stappen--groot .stap::after { left: 1.325rem; top: 3rem; bottom: calc(-1 * var(--r-7) + .25rem); }
.stappen--groot .stap h2 { font-size: var(--fs-h3); margin-bottom: .35em; }
.stappen--groot .stap p { color: var(--kleur-antraciet); max-width: var(--maat); margin-bottom: .75em; }

/* Uitnodiging */
.uitnodiging__tekst { font-family: var(--font-kop); font-variation-settings: "SOFT" 100; font-size: var(--fs-h2); line-height: 1.15; max-width: 18em; margin-bottom: var(--r-5); text-wrap: balance; }
.uitnodiging p.zacht { max-width: 32em; }

/* Prose (privacy, voorwaarden, over) */
.prose { max-width: var(--maat); }
.prose h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); margin-top: 1.6em; }
.prose h3 { margin-top: 1.4em; }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: .35em; }

/* 7. Formulieren ---------------------------------------------------------- */
.formulier { max-width: 38rem; }
.veld { margin-bottom: var(--r-6); }
.veld > label, .veld legend, .veld__label {
  display: block; font-weight: 600; margin-bottom: .35rem; line-height: 1.35; padding: 0;
}
.veld__optioneel { font-weight: 400; color: var(--kleur-tekst-zacht); }
.veld__hint { display: block; font-size: var(--fs-klein); color: var(--kleur-tekst-zacht); margin: -.1rem 0 .5rem; line-height: 1.45; }
fieldset.veld { border: 0; padding: 0; margin-inline: 0; min-width: 0; }

.invoer {
  display: block; width: 100%;
  min-height: 3rem; padding: .7rem .9rem;
  background: var(--kleur-wit); color: var(--kleur-antraciet);
  border: 1.5px solid var(--kleur-tekst-zacht); border-radius: var(--hoek-klein);
  font: inherit; font-size: max(1rem, 16px); line-height: 1.4;
  transition: border-color var(--t-snel) var(--ease-uit), box-shadow var(--t-snel) var(--ease-uit);
}
.invoer:hover { border-color: var(--kleur-antraciet); }
.invoer:focus { outline: none; border-color: var(--kleur-bordeaux); box-shadow: 0 0 0 2px var(--kleur-wit), 0 0 0 5px var(--kleur-bordeaux); }
textarea.invoer { min-height: 8.5rem; resize: vertical; }
select.invoer {
  appearance: none; -webkit-appearance: none; padding-right: 2.5rem;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 55%, calc(100% - .8rem) 55%;
  background-size: .35rem .35rem; background-repeat: no-repeat;
}
.invoer[aria-invalid="true"] { border-color: var(--kleur-fout); background-color: #FBF2EF; }
.invoer--kort { max-width: 20rem; }

.veld__fout { color: var(--kleur-fout); font-size: var(--fs-klein); font-weight: 500; margin: .4rem 0 0; display: flex; gap: .4em; }
.veld__fout::before { content: "!" / ""; flex-shrink: 0; display: inline-grid; place-items: center; width: 1.15rem; height: 1.15rem; margin-top: .1rem; border-radius: 50%; background: var(--kleur-fout); color: #fff; font-size: .75rem; font-weight: 700; }
.veld__fout[hidden] { display: none; }

/* Keuzes als tegels: groot klikvlak */
.keuzes { display: grid; gap: .5rem; }
@media (min-width: 36em) { .keuzes--twee { grid-template-columns: 1fr 1fr; } }
.keuze { position: relative; }
.keuze input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.keuze label {
  display: flex; align-items: center; gap: .75rem; min-height: 3rem;
  padding: .7rem 1rem; cursor: pointer;
  background: var(--kleur-wit); border: 1.5px solid var(--kleur-lijn); border-radius: var(--hoek-klein);
  font-weight: 450; line-height: 1.35;
  transition: border-color var(--t-snel) var(--ease-uit), background-color var(--t-snel) var(--ease-uit);
}
.keuze label::before {
  content: ""; flex-shrink: 0; width: 1.1rem; height: 1.1rem; border-radius: 50%;
  border: 1.5px solid var(--kleur-tekst-zacht); background: #fff;
  transition: border-width var(--t-snel) var(--ease-uit), border-color var(--t-snel) var(--ease-uit);
}
.keuze input[type="checkbox"] + label::before { border-radius: 3px; }
.keuze label:hover { border-color: var(--kleur-antraciet); }
.keuze input:checked + label { border-color: var(--kleur-bordeaux); background: #F8F0EE; }
.keuze input[type="radio"]:checked + label::before { border: .35rem solid var(--kleur-bordeaux); }
.keuze input[type="checkbox"]:checked + label::before {
  background: var(--kleur-bordeaux) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/80% no-repeat;
  border-color: var(--kleur-bordeaux);
}
.keuze input:focus-visible + label { outline: 3px solid var(--focus); outline-offset: 2px; }
fieldset[aria-invalid="true"] .keuze label, .keuzes.is-fout .keuze label { border-color: var(--kleur-fout); }

.akkoord .keuze label { background: transparent; border: 0; padding: .25rem 0; min-height: 0; align-items: flex-start; }
.akkoord .keuze label::before { margin-top: .2rem; }

.formulier__voet { display: flex; flex-wrap: wrap; align-items: center; gap: var(--r-4) var(--r-5); margin-top: var(--r-6); }
.formulier__privacy { font-size: var(--fs-klein); color: var(--kleur-tekst-zacht); margin-top: var(--r-5); max-width: 34em; }

/* Honeypot: verborgen voor mensen */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Voorwaardelijke velden */
[data-toon-als][hidden] { display: none; }

/* Gekozen workshop (samenvatting boven aanmeldformulier) */
.keuze-samenvatting { background: var(--kleur-licht); border-radius: var(--hoek-klein); padding: var(--r-5); margin-bottom: var(--r-6); border-left: 4px solid var(--kleur-oker); }
.keuze-samenvatting h2 { font-size: var(--fs-h3); margin-bottom: .3em; }
.keuze-samenvatting p { margin: 0; }

/* Contact: zijkolom */
.zijkolom { font-size: var(--fs-klein); }
.zijkolom h2 { font-size: var(--fs-h3); }
.zijkolom section + section { margin-top: var(--r-6); padding-top: var(--r-6); border-top: 1px solid var(--kleur-lijn); }

/* 8. Workshops ------------------------------------------------------------ */
.workshops { display: grid; gap: var(--r-8); }
.workshop { display: grid; gap: var(--r-5) var(--r-8); padding-top: var(--r-6); border-top: 1px solid var(--kleur-antraciet); }
@media (min-width: 56em) { .workshop { grid-template-columns: 7fr 5fr; } }
.workshop h2 { font-size: clamp(1.625rem, 1.2rem + 1.6vw, 2.25rem); margin-bottom: .35em; }
.workshop__kort { font-size: var(--fs-intro); line-height: 1.5; }
.workshop .uitklap summary { font-size: 1.125rem; font-family: var(--font-tekst); font-weight: 550; }

.data-lijst { list-style: none; padding: 0; margin: 0 0 var(--r-4); }
.data-lijst__kop { font-family: var(--font-tekst); font-size: var(--fs-klein); font-weight: 600; margin-bottom: var(--r-3); }
.datum {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem var(--r-4);
  padding: var(--r-4) 0; border-top: 1px solid var(--kleur-lijn);
}
.datum:last-child { border-bottom: 1px solid var(--kleur-lijn); }
.datum__moment { font-weight: 550; line-height: 1.4; }
.datum__moment span { display: block; font-weight: 400; color: var(--kleur-tekst-zacht); font-size: var(--fs-klein); }
.datum .knop { min-height: 2.5rem; padding: .45em 1.1em; font-size: .9375rem; }
.label-vol { font-size: var(--fs-klein); font-weight: 600; color: var(--kleur-tekst-zacht); padding: .3em .8em; border: 1.5px solid var(--kleur-lijn); border-radius: var(--hoek-knop); }
.prijs { font-family: var(--font-kop); font-variation-settings: "SOFT" 100; font-size: 1.5rem; margin-bottom: .1em; }

/* Lege staat en foutstaat */
.lege-staat { padding: var(--r-7) var(--r-6); background: var(--kleur-licht); border-radius: var(--hoek-klein); max-width: 44rem; }
.lege-staat h2 { font-size: var(--fs-h3); }
.lege-staat .illustratie { width: 7rem; color: var(--kleur-salie-donker); margin-bottom: var(--r-4); }

/* 9. Beweging --------------------------------------------------------------- */
@keyframes draai { to { transform: rotate(360deg); } }

/* De ene groei-animatie: de illustratie verschijnt van onder naar boven, zoals iets dat opkomt */
@media (prefers-reduced-motion: no-preference) {
  .js .held__beeld .vlek { animation: vorm-in 600ms var(--ease-uit) both; }
  .js .held__beeld .vlek--salie { animation-delay: 120ms; }
  .js .held__beeld .vlek--roze { animation-delay: 240ms; }
  .js .held__beeld svg { animation: groei 1400ms var(--ease-uit) 350ms both; }
}
@keyframes vorm-in { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes groei { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

@media print {
  .kop, .voet, .knop, .skiplink { display: none !important; }
  body { background: #fff; }
}

/* Hulpklassen */
.na-lijst { margin-top: var(--r-6); }
.js .alleen-zonder-js { display: none; }
.sectie--geen-top { padding-top: 0; }
.klein { font-size: var(--fs-klein); }
.h3-maat { font-size: var(--fs-h3); font-weight: 450; margin: 0 0 .5em; }
.aanbod__rij .h3-maat { margin: 0; }
.prose > h2:first-child { margin-top: 0; }
.ervaring__bron { font-family: var(--font-tekst); margin: .5em 0 0; }
.sectie--boog { margin-top: clamp(1.5rem, 4vw, 3.5rem); }
.nav__lijst a.knop { color: var(--knop-tekst); font-weight: 550; padding: .7em 1.5em; }
.portret.vorm { --vorm-kleur: var(--kleur-roze); }
.drempel { font-size: var(--fs-klein); color: var(--kleur-tekst-zacht); margin: var(--r-5) 0 0; padding-left: var(--r-4); border-left: 3px solid var(--kleur-salie); max-width: 34em; }
.drempel + .formulier__voet { margin-top: var(--r-5); }
.aanbod__actie .knop { width: 100%; }
@media (max-width: 55.99em) { .aanbod__actie .knop { width: auto; } }

/* Lijntekeningen "van zaadje tot bloem": klein, rustig, alleen waar ruimte is */
.groei { position: relative; color: var(--kleur-antraciet); width: 100%; max-width: 11rem; }
.groei svg { position: relative; z-index: 1; width: 100%; height: auto; }
.groei__vlek { position: absolute; z-index: 0; left: 18%; top: 14%; width: 66%; height: 50%; border-radius: 52% 48% 58% 42% / 44% 56% 44% 56%; }
.groei--oker .groei__vlek { background: var(--kleur-oker); }
.groei--roze .groei__vlek { background: var(--kleur-roze); }
.groei--salie .groei__vlek { background: var(--kleur-salie); opacity: .85; }
.groei--blauw .groei__vlek { background: var(--kleur-blauw); }

/* Paginakop met tekening rechts (alleen op bredere schermen) */
.paginakop--beeld .wrap { display: grid; gap: var(--r-6); align-items: end; }
.paginakop--beeld .groei { display: none; }
@media (min-width: 56em) {
  .paginakop--beeld .wrap { grid-template-columns: minmax(0, 1fr) 10rem; }
  .paginakop--beeld .groei { display: block; justify-self: end; }
}

/* Werkwijze: elke stap een groeifase */
.stap__inhoud { min-width: 0; }
.stap--met-beeld .groei { display: none; }
@media (min-width: 56em) {
  .stap--met-beeld { display: grid; grid-template-columns: minmax(0, 1fr) 7rem; gap: var(--r-6); align-items: start; }
  .stap--met-beeld .groei { display: block; margin-top: -1rem; }
}

/* Uitnodiging met tekening rechts */
.uitnodiging__raster { display: grid; gap: var(--r-6); align-items: center; }
.uitnodiging .groei { display: none; }
@media (min-width: 56em) {
  .uitnodiging__raster { grid-template-columns: minmax(0, 1fr) 12rem; }
  .uitnodiging .groei { display: block; justify-self: end; max-width: 12rem; }
}
.lege-staat .groei { max-width: 7rem; margin-bottom: var(--r-4); }
.velden-groep { margin-bottom: var(--r-6); padding-left: var(--r-5); border-left: 3px solid var(--kleur-blauw); }
.velden-groep > .veld__hint { margin: 0 0 var(--r-4); }
.velden-groep .veld { margin-bottom: var(--r-5); }
.velden-groep .veld:last-child { margin-bottom: 0; }
.invoer::placeholder { color: var(--kleur-tekst-zacht); opacity: .8; }

/* Knop "Toon e-mailadres / telefoonnummer": ziet eruit als een link met een stippellijn */
.onthul__knop {
  appearance: none; background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  font: inherit; color: var(--kleur-bordeaux); font-weight: 500;
  text-decoration: underline dotted; text-decoration-thickness: 1.5px; text-underline-offset: .22em;
}
.onthul__knop:hover { color: var(--kleur-bordeaux-donker); text-decoration-style: solid; }
.voet .onthul__knop { color: #F2ECE4; }
.voet .onthul__knop:hover { color: #fff; }
.melding--fout .onthul__knop { color: var(--kleur-fout); }