/* Richting B — "Annelien uit Moere"
   Persoonlijk, lokaal, warm. Linnen en stro als papier, blad en mos als inkt,
   klei enkel op de boekknop. */

:root {
  --linnen: #f4efe3;
  --stro: #e7dfc9;
  --papier: #fbf8f0;
  --taupe: #d6ccb4;
  --taupe-donker: #b9ad92;
  --blad: #4a7726;
  --blad-donker: #3b611e;
  --mos: #263a1f;
  --inkt: #22281d;
  --inkt-zacht: #545a4b;
  --klei: #b8643c;
  --klei-knop: #a65632;   /* iets dieper dan --klei, voor leesbare witte tekst (4.9:1) */
  --klei-diep: #8f4826;

  --font-titel: "Bebas Neue", "Arial Narrow", sans-serif;
  --font-tekst: "Raleway", "Helvetica Neue", Arial, sans-serif;
  --font-hand: "Homemade Apple", cursive;

  --band-h: 4.75rem;
  --breedte: 76rem;
  --gutter: clamp(1rem, 4vw, 3rem);
  --sectie: clamp(4rem, 8vw, 7.5rem);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--band-h) + 1.5rem);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--linnen);
  color: var(--inkt);
  font-family: var(--font-tekst);
  font-size: 1.0625rem;
  line-height: 1.72;
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
svg { overflow: visible; }

a { color: var(--blad); text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
a:hover { color: var(--blad-donker); }

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

h1, h2, h3 {
  font-family: var(--font-titel);
  font-weight: 400;
  color: var(--mos);
  letter-spacing: 0.012em;
  line-height: 0.94;
  margin: 0;
}
h1 { font-size: clamp(3.1rem, 6.4vw, 5.9rem); }
h1, h2 { text-wrap: balance; }
.titel { font-size: clamp(2.5rem, 4.6vw, 3.9rem); }
h3 { font-size: 1.55rem; line-height: 1; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.wrap {
  width: 100%;
  max-width: var(--breedte);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.sectie { padding-block: var(--sectie); }
.sectie--stro { background: var(--stro); }

.inleiding { font-size: clamp(1.1rem, 1.5vw, 1.22rem); line-height: 1.68; color: var(--inkt); }
.zacht { color: var(--inkt-zacht); }

.skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 200;
  background: var(--mos); color: var(--linnen); padding: 0.5rem 1rem; border-radius: 3px;
}
.skip:focus { top: 1rem; color: var(--linnen); }

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

/* ---------- Knoppen ---------- */

.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  min-height: 2.9rem;
  padding: 0.7rem 1.4rem;
  border: 1.5px solid var(--klei-knop);
  border-radius: 999px;
  background: var(--klei-knop);
  color: #fff;
  font: 700 0.95rem/1.1 var(--font-tekst);
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s, border-color .2s, color .2s;
}
.knop:hover { background: var(--klei-diep); border-color: var(--klei-diep); color: #fff; }

.knop--lijn { background: transparent; border-color: var(--blad); color: var(--blad-donker); }
.knop--lijn:hover { background: var(--blad); border-color: var(--blad); color: #fff; }

.knop svg { width: 1.05rem; height: 1.05rem; flex: none; }

.tekstlink {
  font-weight: 600;
  color: var(--blad-donker);
  text-decoration-color: var(--taupe-donker);
  transition: text-decoration-color .2s;
}
.tekstlink:hover { text-decoration-color: currentColor; }

/* Label op een foto */
.chip {
  position: absolute; left: 1rem; bottom: 1rem;
  display: inline-flex; align-items: baseline; gap: 0.45rem;
  padding: 0.5rem 0.95rem 0.45rem;
  border-radius: 999px;
  background: var(--papier);
  color: var(--mos);
  font-size: 0.86rem; font-weight: 600; line-height: 1.2;
  box-shadow: 0 6px 18px -10px rgba(38, 58, 31, .55);
}
.chip strong { font-family: var(--font-titel); font-weight: 400; font-size: 1.2rem; letter-spacing: .02em; color: var(--blad-donker); }

/* ---------- Bovenband ---------- */

.band {
  position: sticky; top: 0; z-index: 100;
  background: var(--stro);
  border-bottom: 1px solid var(--taupe);
}
.band__in {
  display: flex; align-items: center; justify-content: space-between; gap: 1.25rem;
  min-height: var(--band-h);
}

.merk {
  display: flex; align-items: center; gap: 0.7rem;
  color: var(--mos); text-decoration: none;
}
.merk:hover { color: var(--mos); }
.merk__teken { width: 3rem; height: 3rem; flex: none; }
.merk__naam {
  display: block;
  font-family: var(--font-titel);
  font-size: 1.85rem; line-height: .9; letter-spacing: .1em;
}
.merk__sub {
  display: block; margin-top: 0.22rem;
  font-size: 0.66rem; font-weight: 600; letter-spacing: .015em; line-height: 1.25;
  color: var(--inkt-zacht);
}

.menu { display: flex; align-items: center; gap: 1.6rem; }
.menu__lijst { display: flex; gap: 1.3rem; list-style: none; margin: 0; padding: 0; }
.menu__lijst a {
  display: block; padding-block: 0.45rem;
  color: var(--mos);
  font-size: 0.9rem; font-weight: 600;
  text-decoration: none; white-space: nowrap;
  background: no-repeat left bottom / 0 6px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 6' preserveAspectRatio='none'%3E%3Cpath d='M1 4 C12 1 20 5 31 3 S50 1 59 3' fill='none' stroke='%234a7726' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  transition: background-size .25s;
}
.menu__lijst a:hover,
.menu__lijst a[aria-current="page"] { background-size: 100% 6px; }
.menu__lijst a[aria-current="page"] { color: var(--blad-donker); }

.knop .kort { display: none; }

.menu-knop {
  display: none; align-items: center; justify-content: center;
  width: 2.9rem; height: 2.9rem;
  background: transparent; border: 1.5px solid var(--taupe-donker); border-radius: 999px;
  color: var(--mos); cursor: pointer;
}
.menu-knop__streep, .menu-knop__streep::before, .menu-knop__streep::after {
  display: block; width: 1.1rem; height: 1.5px; background: currentColor; position: relative;
  transition: transform .2s, background-color .2s;
}
.menu-knop__streep::before, .menu-knop__streep::after { content: ""; position: absolute; left: 0; }
.menu-knop__streep::before { top: -5px; }
.menu-knop__streep::after { top: 5px; }
.band.is-open .menu-knop__streep { background: transparent; }
.band.is-open .menu-knop__streep::before { transform: translateY(5px) rotate(45deg); }
.band.is-open .menu-knop__streep::after { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 75rem) {
  .menu-knop { display: inline-flex; }
  .menu { gap: 0.55rem; }
  .menu__lijst {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; gap: 0;
    padding: 0.25rem var(--gutter) 1.25rem;
    background: var(--stro);
    border-bottom: 1px solid var(--taupe);
    box-shadow: 0 18px 30px -24px rgba(38, 58, 31, .5);
  }
  .menu__lijst a { padding-block: 0.9rem; font-size: 1.02rem; border-bottom: 1px solid var(--taupe); background: none; }
  .menu__lijst li:last-child a { border-bottom: 0; }
  .menu__lijst a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--blad); }
  .band.is-open .menu__lijst { display: flex; }
}

@media (max-width: 34rem) {
  :root { --band-h: 4.25rem; }
  .merk { gap: 0.5rem; }
  .merk__teken { width: 2.5rem; height: 2.5rem; }
  .merk__naam { font-size: 1.5rem; }
  .merk__sub { font-size: 0.6rem; max-width: 7.6rem; }
  .knop .lang { display: none; }
  .knop .kort { display: inline; }
  .band .knop { padding-inline: 1rem; min-height: 2.75rem; }
  .menu-knop { width: 2.75rem; height: 2.75rem; }
}

/* ---------- Hero ---------- */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  min-height: min(calc(100svh - var(--band-h)), 56rem);
}
.hero__foto { position: relative; min-height: 32rem; background: var(--stro); }
.hero__foto img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 22%;
}
.hero__foto .chip { left: 1.5rem; bottom: 1.5rem; }

.hero__tekst {
  align-self: center;
  max-width: 42rem;
  padding: clamp(2.5rem, 4.5vw, 4rem) var(--gutter) clamp(2.5rem, 4vw, 3.5rem) clamp(2rem, 5.5vw, 5.5rem);
}
.hero__tekst h1 { margin-bottom: 1.3rem; }
.hero__ik {
  font-size: clamp(1.12rem, 1.5vw, 1.24rem);
  font-weight: 500;
  color: var(--mos);
  line-height: 1.6;
}
.hero__acties { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 1.75rem; }

.feiten {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem;
  margin: 2.25rem 0 0; padding: 1.25rem 0 0; list-style: none;
  border-top: 1px solid var(--taupe);
  font-size: 0.9rem; line-height: 1.45; color: var(--inkt-zacht);
}
.feiten li { display: flex; gap: 0.6rem; align-items: flex-start; }
.feiten svg { width: 1.35rem; height: 1.35rem; flex: none; color: var(--blad); margin-top: 0.05rem; }
.feiten strong { display: block; color: var(--mos); font-weight: 600; }

@media (max-width: 56rem) {
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero__foto { min-height: 0; aspect-ratio: 4 / 4.6; }
  .hero__foto .chip { left: 1rem; bottom: 1rem; }
  .hero__tekst { max-width: 40rem; padding: 2.5rem var(--gutter) 1rem; }
}
@media (max-width: 34rem) {
  .feiten { grid-template-columns: 1fr; gap: 0.85rem; }
}

/* ---------- Landschap (illustratie + rand) ---------- */

.landschap {
  display: block; width: 100%;
  height: clamp(9.5rem, 15vw, 15rem);
  color: var(--mos);
}
.landschap .grond { fill: var(--stro); }
.landschap--voet { height: clamp(7.5rem, 12vw, 12rem); color: var(--blad); }
.landschap--voet .grond { fill: var(--mos); }

.landschap-band { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
.landschap-band figcaption {
  max-width: var(--breedte); margin: 0 auto 0.75rem; padding-inline: var(--gutter);
  font-size: 0.88rem; font-style: italic; color: var(--inkt-zacht); text-align: right;
}

/* ---------- Welkom, ik ben Annelien ---------- */

.welkom { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2.5rem, 7vw, 7rem); align-items: start; }
.welkom h2 { margin-bottom: 1.5rem; }
.handtekening {
  display: block; margin: 1.8rem 0 1.6rem;
  font-family: var(--font-hand);
  font-size: clamp(1.9rem, 3vw, 2.35rem); line-height: 1.2;
  color: var(--blad-donker);
  transform: rotate(-4deg); transform-origin: left center;
}

.levensloop { margin: 0.4rem 0 0; padding: 0; list-style: none; position: relative; }
.levensloop li:not(:last-child)::after {
  content: ""; position: absolute; left: 0.43rem; top: 1.5rem; bottom: 0.1rem;
  border-left: 1.5px dashed var(--taupe-donker);
}
.levensloop li { position: relative; padding: 0 0 1.4rem 2.2rem; }
.levensloop li::before {
  content: ""; position: absolute; left: 0; top: 0.42rem;
  width: 0.9rem; height: 0.9rem; border-radius: 50%;
  background: var(--stro); border: 1.5px solid var(--blad);
}
.levensloop li:last-child::before { background: var(--blad); }
.levensloop b { display: block; font-family: var(--font-titel); font-weight: 400; font-size: 1.35rem; letter-spacing: .03em; color: var(--blad-donker); line-height: 1.2; }
.levensloop span { display: block; color: var(--inkt); font-weight: 600; line-height: 1.4; }
.levensloop small { display: block; margin-top: 0.15rem; font-size: 0.86rem; line-height: 1.4; color: var(--inkt-zacht); }
.levensloop__kop { font-family: var(--font-tekst); font-size: 0.95rem; font-weight: 700; letter-spacing: 0; line-height: 1.4; color: var(--mos); margin: 0.6rem 0 1.5rem; }

@media (max-width: 56rem) {
  .welkom { grid-template-columns: 1fr; }
}

/* ---------- Waarbij kan het helpen? ---------- */

.helpen { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(2rem, 6vw, 6rem); }
.helpen h2 { max-width: 7ch; }
.klachten {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 1.75rem;
  margin: 2rem 0 0; padding: 0; list-style: none;
}
.klachten li {
  display: flex; gap: 0.6rem; align-items: baseline;
  padding: 0.7rem 0; border-bottom: 1px solid var(--taupe);
  font-weight: 500; color: var(--mos); line-height: 1.35;
  hyphens: auto; overflow-wrap: anywhere;
}
.klachten li::before {
  content: ""; flex: none; width: 0.7rem; height: 0.7rem; transform: translateY(0.05rem);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 10.5C2 5 5.5 1.5 10.5 1.5 10.5 6.5 7 10 1.5 10.5ZM1.5 10.5 7 5' fill='none' stroke='%234a7726' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (max-width: 56rem) {
  .helpen { grid-template-columns: 1fr; }
  .helpen h2 { max-width: none; }
}
@media (max-width: 40rem) {
  .klachten { grid-template-columns: 1fr 1fr; gap: 0 1rem; }
  .klachten li { font-size: 0.97rem; }
}

/* ---------- Vijf elementen ---------- */

.elementen { display: grid; grid-template-columns: minmax(0, 6.2fr) minmax(0, 5fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.wiel { width: 100%; height: auto; max-width: 36rem; justify-self: center; color: var(--mos); }
.wiel text { font-family: var(--font-tekst); fill: var(--inkt-zacht); }
.wiel .wiel__element { font-family: var(--font-titel); font-size: 19px; letter-spacing: .06em; fill: var(--mos); }
.wiel .wiel__seizoen { font-size: 17px; font-weight: 700; fill: var(--blad-donker); }
.wiel .wiel__orgaan { font-size: 16px; font-style: italic; }
.wiel .wiel__knoop { fill: var(--papier); stroke: var(--mos); stroke-width: 1.4; }
.elementen__tekst h2 { margin-bottom: 1.5rem; }
.notitie {
  margin: 2rem 0 0; padding: 1.25rem 0 0;
  border-top: 1px solid var(--taupe-donker);
  font-style: italic; font-size: 1.05rem; color: var(--mos);
}
.notitie cite { display: block; margin-top: 0.4rem; font-style: normal; font-size: 0.88rem; font-weight: 600; color: var(--inkt-zacht); }
.legende { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; margin-top: 1.4rem; font-size: 0.88rem; color: var(--inkt-zacht); }
.legende span { display: inline-flex; align-items: center; gap: 0.5rem; }
.legende svg { width: 2rem; height: 0.8rem; color: var(--blad); }

@media (max-width: 56rem) {
  .elementen { grid-template-columns: 1fr; }
  .elementen__tekst { order: -1; }
}
@media (max-width: 40rem) {
  .wiel { width: calc(100% + 2 * var(--gutter)); max-width: none; margin-inline: calc(-1 * var(--gutter)); }
  .wiel .wiel__seizoen { font-size: 24px; }
  .wiel .wiel__orgaan { font-size: 23px; }
  .wiel .wiel__seizoen.wiel__rechts, .wiel .wiel__seizoen.wiel__links { font-size: 21px; }
  .wiel .wiel__orgaan.wiel__rechts, .wiel .wiel__orgaan.wiel__links { font-size: 20px; }
  .wiel .wiel__rechts { transform: translateX(-6px); }
  .wiel .wiel__element { font-size: 23px; }
}

/* ---------- Behandelingen ---------- */

.behandel { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.behandel__intro h2 { margin-bottom: 1.5rem; }
.behandel__intro img { margin-top: 2.25rem; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; }
.therapielijst { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--taupe); }
.therapielijst a {
  display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: 0.4rem 1.5rem; align-items: baseline;
  padding: 1.05rem 0; border-bottom: 1px solid var(--taupe);
  color: var(--inkt); text-decoration: none;
}
.therapielijst__naam {
  font-family: var(--font-titel); font-size: 1.75rem; line-height: 1; letter-spacing: .02em; color: var(--mos);
  text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1.5px; text-underline-offset: .18em;
  transition: text-decoration-color .2s, color .2s;
}
.therapielijst__wat { font-size: 0.97rem; line-height: 1.5; color: var(--inkt-zacht); }
.therapielijst a:hover .therapielijst__naam { color: var(--blad-donker); text-decoration-color: var(--blad); }
@media (max-width: 56rem) {
  .behandel { grid-template-columns: 1fr; }
}
@media (max-width: 40rem) {
  .therapielijst a { grid-template-columns: 1fr; }
}

/* ---------- Kindertuina & qigong ---------- */

.tweeluik { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4.4fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.tweeluik h2 { margin: 1.75rem 0 1rem; }
.fotokader { position: relative; }
.fotokader img { width: 100%; border-radius: 4px; object-fit: cover; }
.tweeluik .fotokader img { aspect-ratio: 16 / 8.5; object-position: 50% 45%; }
.aankondiging {
  position: relative;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background: var(--papier);
  border-radius: 4px;
  box-shadow: 0 1px 0 rgba(38, 58, 31, .06), 0 18px 34px -26px rgba(38, 58, 31, .5);
}
.aankondiging h2 { margin-top: 0.75rem; }
.aankondiging__plaats {
  display: flex; gap: 0.6rem; align-items: flex-start;
  margin-top: 1.5rem; padding-top: 1.1rem; border-top: 1px solid var(--taupe);
  font-size: 0.92rem; line-height: 1.45; color: var(--inkt-zacht);
}
.aankondiging__plaats svg { width: 1.3rem; height: 1.3rem; flex: none; color: var(--blad); }
.aankondiging__teken { width: 3.2rem; height: 3.2rem; color: var(--blad); }
@media (max-width: 56rem) {
  .tweeluik { grid-template-columns: 1fr; }
}

/* ---------- Eerste afspraak in 3 stappen ---------- */

.stappen__kop { max-width: 40rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.stappen__kop h2 { margin-bottom: 1.2rem; }
.stappen-veld { position: relative; }
.stappen-veld { --stap-gap: clamp(1.5rem, 4vw, 3.5rem); }
.stappen { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--stap-gap); margin: 0; padding: 0; list-style: none; }
.stappen__pad {
  position: absolute; left: 2.875rem; top: 1.9rem; height: 2rem; width: calc((100% + var(--stap-gap)) * 3 / 4);
  color: var(--taupe-donker); pointer-events: none;
}
.stap { position: relative; }
.stap__icoon {
  display: grid; place-items: center;
  width: 5.75rem; height: 5.75rem; border-radius: 50%;
  background: var(--papier); border: 1.5px solid var(--mos);
  color: var(--mos);
  margin-bottom: 1.5rem;
}
.stap__icoon svg { width: 2.9rem; height: 2.9rem; }
.stap h3 { display: flex; align-items: baseline; gap: 0.7rem; margin-bottom: 0.8rem; font-size: 1.85rem; }
.stap__nr { font-size: 1.05rem; color: var(--blad); letter-spacing: .06em; }
.stap__duur {
  display: inline-block; justify-self: start; width: max-content; margin-bottom: 0.7rem;
  padding: 0.18rem 0.7rem; border-radius: 999px;
  background: var(--stro); color: var(--mos); font-size: 0.84rem; font-weight: 600;
}
.stap p { color: var(--inkt); }
@media (max-width: 64rem) {
  .stappen { grid-template-columns: 1fr; gap: 0; max-width: 40rem; }
  .stappen__pad { display: none; }
  .stap { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 0 1.25rem; padding-bottom: 2rem; }
  .stap::before {
    content: ""; position: absolute; left: 2.25rem; top: 4.75rem; bottom: 0.5rem;
    border-left: 1.5px dashed var(--taupe-donker);
  }
  .stap:last-child::before { display: none; }
  .stap__icoon { width: 4.5rem; height: 4.5rem; grid-row: span 3; margin: 0; }
  .stap__icoon svg { width: 2.3rem; height: 2.3rem; }
  .stap h3 { font-size: 1.6rem; margin-top: 0.55rem; }
}

/* ---------- Boeken ---------- */

.boeken { display: grid; grid-template-columns: minmax(0, 4.6fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 5.5rem); align-items: start; }
.boeken .fotokader { position: sticky; top: calc(var(--band-h) + 2rem); }
.boeken .fotokader img { aspect-ratio: 4 / 5; }
.boeken h2 { margin-bottom: 0.5rem; }

.prijsgroep { margin-top: 2.4rem; }
.prijsgroep__titel {
  display: flex; align-items: center; gap: 0.75rem;
  font-family: var(--font-tekst); font-size: 1rem; font-weight: 700; letter-spacing: 0; color: var(--mos);
  padding-bottom: 0.7rem; border-bottom: 1.5px solid var(--mos);
}
.prijsgroep__titel svg { width: 1.5rem; height: 1.5rem; color: var(--blad); }
.prijs {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 0.5rem 2rem; align-items: center;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--taupe-donker);
}
.prijs h4 { margin: 0; font-size: 1.12rem; font-weight: 700; color: var(--mos); line-height: 1.3; }
.prijs p { margin: 0.15rem 0 0; font-size: 0.92rem; line-height: 1.45; color: var(--inkt-zacht); }
.prijs__duur { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; font-size: 0.95rem; color: var(--mos); white-space: nowrap; }
.prijs__duur svg { width: 1.1rem; height: 1.1rem; color: var(--blad); }
.prijs__bedrag { font-family: var(--font-titel); font-size: 2.6rem; line-height: 1; color: var(--mos); text-align: right; letter-spacing: .01em; }
.prijs .knop { min-height: 2.6rem; padding: 0.55rem 1.1rem; font-size: 0.88rem; }

.boeken__voet {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2rem;
  margin-top: 2.25rem; padding: 1.5rem 1.6rem;
  background: var(--linnen); border-radius: 4px;
}
.boeken__voet p { margin: 0; font-size: 0.97rem; line-height: 1.6; text-align: right; }
.boeken__voet p a { color: var(--mos); font-weight: 600; }
.boeken__voet strong { color: var(--mos); }
.boeken__mail { margin-top: 1.25rem; display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.92rem; color: var(--inkt-zacht); }
.boeken__mail svg { width: 1.25rem; height: 1.25rem; flex: none; color: var(--blad); margin-top: 0.15rem; }

@media (max-width: 56rem) {
  .boeken { grid-template-columns: 1fr; }
  .boeken .fotokader { position: relative; top: 0; }
  .boeken .fotokader img { aspect-ratio: 4 / 3; }
}
@media (max-width: 40rem) {
  .prijs { gap: 0.5rem 1rem; }
  .boeken__voet { padding: 1.25rem; }
  .boeken__voet p { text-align: left; }
}

/* ---------- Getuigenissen als briefkaarten ---------- */

.getuigen__kop { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.getuigen__kop p { margin: 0; max-width: 28rem; color: var(--inkt-zacht); }

.kaarten { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2.75rem 2.25rem; align-items: start; }
.kaart {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) 8.5rem; gap: 0 1.5rem;
  margin: 0; padding: 1.75rem 1.6rem 1.6rem 1.9rem;
  background-color: var(--papier);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .2 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  border-radius: 3px;
  box-shadow: 0 1px 1px rgba(38, 58, 31, .06), 0 16px 30px -22px rgba(38, 58, 31, .55);
  transform: rotate(var(--kanteling, 0deg));
}
.kaart::after { /* scheidingslijn tussen bericht en adres */
  content: ""; position: absolute; top: 1.75rem; bottom: 1.6rem; right: calc(1.6rem + 8.5rem + 0.75rem);
  border-left: 1px solid var(--taupe);
}
.kaart__tekst { font-size: 0.98rem; line-height: 1.66; color: var(--inkt); }
.kaart__tekst blockquote { margin: 0; }
.kaart__tekst p { margin: 0; }
.kaart__tekst .kaart__van { margin-top: 1rem; font-weight: 700; color: var(--mos); }
.kaart__adres { display: flex; flex-direction: column; align-items: flex-end; }
.kaart__zegel { width: 3rem; height: 3.6rem; color: var(--blad); }
.kaart__zegel .zegel__rand { fill: var(--linnen); stroke: var(--taupe-donker); stroke-width: .8; }
.kaart__zegel .zegel__binnen { fill: none; stroke: var(--blad); stroke-width: .7; opacity: .6; }
.kaart__regels {
  align-self: stretch; margin-top: auto; padding-top: 1.5rem;
  font-size: 0.78rem; font-style: italic; line-height: 1.25; color: var(--inkt-zacht);
}
.kaart__regels span { display: block; padding: 0.45rem 0 0.2rem; border-bottom: 1px solid var(--taupe); }

.kaart:nth-child(1) { grid-column: 1 / span 6; --kanteling: -0.7deg; }
.kaart:nth-child(2) { grid-column: 7 / span 6; --kanteling: 0.6deg; margin-top: 3.5rem; }
.kaart:nth-child(3) { grid-column: 1 / span 5; --kanteling: 0.5deg; margin-left: 1.5rem; margin-top: 2rem; }
.kaart:nth-child(4) { grid-column: 6 / span 7; --kanteling: -0.6deg; margin-top: 1rem; }
.kaart:nth-child(5) { grid-column: 3 / span 6; --kanteling: -0.3deg; margin-top: -0.5rem; }

@media (max-width: 62rem) {
  .kaarten { grid-template-columns: 1fr; gap: 2rem; max-width: 40rem; margin-inline: auto; }
  .kaart:nth-child(n) { grid-column: 1 / -1; margin: 0; }
}
@media (max-width: 34rem) {
  .kaart { grid-template-columns: 1fr; padding: 1.4rem 1.25rem 1.3rem; --kanteling: 0deg !important; }
  .kaart:nth-child(odd) { --kanteling: -0.6deg !important; }
  .kaart:nth-child(even) { --kanteling: 0.5deg !important; }
  .kaart::after { display: none; }
  .kaart__adres {
    flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 1rem;
    margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--taupe);
  }
  .kaart__regels { order: -1; margin: 0; padding: 0; flex: 1; }
  .kaart__regels span { padding-top: 0.2rem; }
}

/* ---------- Voet ---------- */

.voet { background: var(--mos); color: #e6e0cf; }
.voet a { color: var(--linnen); }
.voet a:hover { color: #fff; }
.voet :focus-visible { outline-color: var(--linnen); }
.voet__grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.5rem;
  padding-block: 2rem 3rem;
  font-size: 0.95rem; line-height: 1.65;
}
.voet h2 { font-size: 1.4rem; letter-spacing: .06em; color: #c9d4a8; margin-bottom: 0.6rem; }
.voet .merk { color: var(--linnen); margin-bottom: 1.5rem; }
.voet .merk__sub { color: #c4c0ae; }
.voet__noot { font-size: 0.86rem; color: #bdb8a5; }
.voet__onder {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem;
  padding-block: 1.25rem 2rem; border-top: 1px solid rgba(244, 239, 227, .16);
  font-size: 0.85rem; color: #bdb8a5;
}
@media (max-width: 56rem) {
  .voet__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 34rem) {
  .voet__grid { grid-template-columns: 1fr; gap: 1.75rem; }
}

/* ---------- Therapieën-pagina ---------- */

.paginakop { padding-block: clamp(3rem, 7vw, 6rem) clamp(2.5rem, 5vw, 4rem); }
.paginakop__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 6vw, 6rem); align-items: end; }
.paginakop h1 { margin-bottom: 1.6rem; }
.paginakop__citaat {
  margin: 0; padding: 1.6rem 0 0 0;
  border-top: 1.5px solid var(--mos);
  font-size: 1.15rem; font-style: italic; line-height: 1.6; color: var(--mos);
}
.paginakop__citaat footer { margin-top: 0.6rem; font-style: normal; font-size: 0.88rem; font-weight: 600; color: var(--inkt-zacht); }

.inhoud-index { border-block: 1px solid var(--taupe); background: var(--stro); }
.inhoud-index ul { display: flex; flex-wrap: wrap; gap: 0.5rem 0.6rem; margin: 0; padding: 1.1rem 0; list-style: none; }
.inhoud-index a {
  display: inline-block; padding: 0.35rem 0.9rem;
  border: 1px solid var(--taupe-donker); border-radius: 999px;
  color: var(--mos); font-size: 0.9rem; font-weight: 600; text-decoration: none;
  transition: background-color .2s, border-color .2s;
}
.inhoud-index a:hover { background: var(--papier); border-color: var(--blad); }

.therapie { padding-block: clamp(3.5rem, 7vw, 6.5rem); border-bottom: 1px solid var(--taupe); }
.therapie:nth-of-type(even) { background: var(--stro); border-bottom-color: transparent; }
.therapie__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6.4fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.therapie:nth-of-type(even) .therapie__foto { order: 2; }
.therapie:nth-of-type(even) .therapie__grid { grid-template-columns: minmax(0, 6.4fr) minmax(0, 5fr); }
.therapie__foto { position: sticky; top: calc(var(--band-h) + 2rem); }
.therapie__foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 4px; }
.therapie__foto--liggend img { aspect-ratio: 4 / 3.4; }
.therapie__tekst { max-width: 40rem; }
.therapie__tekst h2 { margin-bottom: 1.4rem; }
.therapie__tekst h3 { margin: 2rem 0 0.85rem; font-size: 1.45rem; color: var(--blad-donker); letter-spacing: .03em; }

.citaat {
  position: relative;
  margin: 0 0 2rem; padding: 1.3rem 1.4rem 1.2rem 3.4rem;
  background: var(--papier); border-radius: 4px;
  font-size: 1.08rem; font-style: italic; line-height: 1.6; color: var(--mos);
  box-shadow: 0 14px 28px -24px rgba(38, 58, 31, .55);
}
.citaat::before {
  content: ""; position: absolute; left: 1.15rem; top: 1.45rem; width: 1.4rem; height: 1.4rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 21C4 11 10 4 21 3 20 14 13 20 3 21ZM3 21 13 11' fill='none' stroke='%234a7726' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.citaat p { margin: 0; }
.citaat footer { margin-top: 0.45rem; font-style: normal; font-size: 0.86rem; font-weight: 600; color: var(--inkt-zacht); }

.puntlijst { columns: 2; column-gap: 2rem; margin: 0; padding: 0; list-style: none; }
.puntlijst li { break-inside: avoid; position: relative; padding: 0.3rem 0 0.3rem 1.25rem; line-height: 1.45; }
.puntlijst li::before {
  content: ""; position: absolute; left: 0; top: 0.85rem; width: 0.45rem; height: 0.45rem; border-radius: 50%;
  border: 1.5px solid var(--blad);
}

.kader {
  margin-top: 1.75rem; padding: 1.15rem 1.3rem;
  border: 1.5px solid var(--blad); border-radius: 4px;
  font-size: 0.95rem; line-height: 1.6; color: var(--mos);
}

.afspraak-blok { padding-block: var(--sectie) 0; }

@media (max-width: 56rem) {
  .paginakop__grid { grid-template-columns: 1fr; }
  .therapie__grid { grid-template-columns: 1fr; }
  .therapie:nth-of-type(even) .therapie__foto { order: 0; }
  .therapie:nth-of-type(even) .therapie__grid { grid-template-columns: 1fr; }
  .therapie__foto { position: relative; top: 0; }
  .therapie__foto img,
  .therapie__foto--liggend img { aspect-ratio: 4 / 3; }
}
@media (max-width: 34rem) {
  .puntlijst { columns: 1; }
  .citaat { padding-left: 3rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* Logo: groene ensō rond TCG */
.merk__enso { fill: var(--blad); }
.merk__tcg { fill: var(--mos); font-family: var(--font-titel); }
.voet .merk__enso { fill: #b9c79a; }
.voet .merk__tcg { fill: var(--linnen); }
.therapie__foto img.foto-onder { object-position: 50% 80%; }

/* Revisie: vijf elementen als losse tekening, slotvraag bij klachten, enkelvoudige paginakop */
.elementen--solo { display: flex; gap: 0; flex-direction: column; align-items: center; text-align: center; }
.elementen--solo h2 { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.elementen--solo .legende { justify-content: center; margin-top: 1.5rem; }
.helpen__vraag { margin-top: 1.75rem; font-size: 1.08rem; font-weight: 500; color: var(--mos); }
.paginakop__enkel .inleiding { max-width: 46rem; }