/* =========================================================
   Start Opnieuw — huisstijl
   Groen, paars en wit met de mandala rond de ronde foto's, zoals de
   vertrouwde site van Ans. Koppen in Fraunces, tekst in Nunito Sans.
   ========================================================= */


:root {
  --groen: #8ebe3a;          /* merkgroen: knoppen, accenten */
  --groen-donker: #4d7a17;   /* groen voor tekst/links op wit (leesbaar) */
  --groen-kop: #5f8a1c;      /* groene koppen (groot genoeg om goed leesbaar te zijn) */
  --groen-licht: #eef5e1;    /* lichte groene achtergrond */
  --paars: #472e63;          /* koppen, footer */
  --paars-diep: #2d2c40;     /* broodtekst */
  --lila: #f3eff8;           /* lichte paarse achtergrond */
  --lila-rand: #ddd3ea;
  --wit: #ffffff;
  --grijs: #5d5b6e;

  --font-kop: "Fraunces", Georgia, serif;
  --font-tekst: "Nunito Sans", "Segoe UI", system-ui, sans-serif;

  --breed: 1140px;
  --smal: 720px;
  --rond: 18px;
  --rond-klein: 10px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--wit);
  color: var(--paars-diep);
  font-family: var(--font-tekst);
  font-size: 1.125rem;          /* 18px: prettig leesbaar */
  line-height: 1.65;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--groen-donker); text-underline-offset: 3px; }
a:hover { color: var(--paars); }

:focus-visible { outline: 3px solid var(--paars); outline-offset: 3px; border-radius: 4px; }
/* Op donkere en paarse vlakken een witte focusrand, anders is hij onzichtbaar */
.voet :focus-visible, .oproep :focus-visible, .btn-paars:focus-visible, .actiebalk-hoofd:focus-visible { outline-color: var(--wit); }
/* De vaste kop mag een element met focus of een #anker niet afdekken */
@media (min-width: 1021px) { html { scroll-padding-top: 110px; } }

h1, h2, h3, h4 {
  font-family: var(--font-kop);
  color: var(--paars);
  font-weight: 500;
  line-height: 1.15;
  font-variation-settings: "SOFT" 100, "WONK" 0;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.3rem, 5vw, 3.6rem); letter-spacing: -.01em; }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); }
h3 { font-size: 1.45rem; }
h4 { font-size: 1.15rem; }

p { margin: 0 0 1em; }
p, li { max-width: 68ch; }

.skip {
  position: absolute; left: -999px; top: 0;
  background: var(--paars); color: var(--wit); padding: .6em 1em; z-index: 100;
}
.skip:focus { left: 1rem; top: 1rem; }
main:focus { outline: none; }

.wrap { width: min(var(--breed), 100% - 2rem); margin-inline: auto; }
.wrap-smal { width: min(var(--smal), 100% - 2rem); margin-inline: auto; }

.sectie { padding-block: clamp(3rem, 7vw, 5.5rem); }
.sectie-lila { background: var(--lila); }
.sectie-groen { background: var(--groen-licht); }

.intro { font-size: 1.25rem; color: var(--paars-diep); }
.klein { font-size: .95rem; color: var(--grijs); }

/* ---------- Knoppen ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .5em;
  font: 700 1.05rem/1 var(--font-tekst);
  padding: .95em 1.5em;
  border-radius: 999px;
  border: 2px solid var(--groen);
  background: var(--groen);
  color: var(--paars-diep);
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.btn:hover { background: #7fae2c; border-color: #7fae2c; color: var(--paars-diep); }
.btn-rand { background: transparent; border-color: var(--paars); color: var(--paars); }
.btn-rand:hover { background: var(--paars); border-color: var(--paars); color: var(--wit); }
.btn-paars { background: var(--paars); border-color: var(--paars); color: var(--wit); }
.btn-paars:hover { background: #5a3d7c; border-color: #5a3d7c; color: var(--wit); }
.knoppen { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; }

.link-pijl { font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--groen); color: var(--paars); padding-bottom: 2px; }
.link-pijl:hover { border-color: var(--paars); }

/* ---------- Kop (header) ---------- */
.topbalk { background: var(--groen); color: var(--paars-diep); font-size: .95rem; }
.topbalk .wrap { display: flex; flex-wrap: wrap; gap: .3rem 1.5rem; justify-content: flex-end; padding-block: .45rem; }
.topbalk a { color: var(--paars-diep); text-decoration: none; font-weight: 600; }
.topbalk a:hover { text-decoration: underline; }

.kop { background: var(--wit); border-bottom: 1px solid var(--lila-rand); position: sticky; top: 0; z-index: 50; }
.kop .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 84px; }
.logo img { width: 190px; height: auto; }

.menu-knop {
  display: none;
  background: none; border: 2px solid var(--paars); color: var(--paars);
  border-radius: 999px; padding: .5em 1em; font: 700 1rem var(--font-tekst); cursor: pointer;
}
.nav ul { list-style: none; margin: 0; padding: 0; }
.nav > ul { display: flex; gap: .2rem; align-items: center; }
.nav a {
  display: block; padding: .55em .8em; border-radius: 999px;
  color: var(--paars-diep); text-decoration: none; font-weight: 600; font-size: 1.02rem;
}
.nav a:hover { background: var(--lila); color: var(--paars); }
.nav a[aria-current="page"] { color: var(--paars); background: var(--groen-licht); }
.nav .heeft-sub { position: relative; }
.nav .sub {
  position: absolute; left: 0; top: 100%; min-width: 230px;
  background: var(--wit); border: 1px solid var(--lila-rand); border-radius: var(--rond-klein);
  padding: .4rem; box-shadow: 0 12px 30px rgba(71, 46, 99, .12);
  display: none;
}
.nav .heeft-sub:hover .sub, .nav .heeft-sub:focus-within .sub { display: block; }
.nav .sub a { border-radius: 8px; }

@media (max-width: 1020px) {
  .menu-knop { display: inline-block; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--wit); border-bottom: 1px solid var(--lila-rand); padding: .5rem 1rem 1.2rem; box-shadow: 0 16px 30px rgba(71,46,99,.1); }
  .nav.open { display: block; }
  .nav > ul { flex-direction: column; align-items: stretch; }
  .nav a { padding: .75em .9em; font-size: 1.1rem; }
  .nav .sub { position: static; display: block; border: 0; box-shadow: none; padding: 0 0 0 1rem; }
  .kop { position: relative; }
}

/* ---------- Hero (home): tekst links, video van een behandeling rechts ---------- */
.hero { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--wit) 55%, var(--lila) 100%); }
.hero .wrap {
  min-height: clamp(520px, 64vh, 660px); display: flex; align-items: center;
  padding-block: clamp(2.5rem, 6vw, 4.5rem); position: relative; z-index: 2;
}
.hero-tekst { width: min(46%, 560px); }
.hero h1 { margin-bottom: .4em; }
.hero-tekst p { font-size: 1.25rem; }
.hero-video {
  position: absolute; z-index: 1; top: clamp(1.5rem, 3vw, 2.5rem); bottom: clamp(1.5rem, 3vw, 2.5rem); right: 0;
  width: min(50vw, 980px); margin: 0; overflow: hidden;
  border-radius: 56px 0 0 56px; background: var(--paars);
  box-shadow: 0 24px 60px rgba(71, 46, 99, .18);
}
.hero-video video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 38% 50%; }
.hero-video figcaption {
  position: absolute; left: 1.4rem; bottom: 1.3rem; padding: .45em 1em; border-radius: 999px;
  background: rgba(255, 255, 255, .92); color: var(--paars); font-weight: 700; font-size: .95rem;
}
.video-knop {
  position: absolute; right: 1.2rem; bottom: 1.2rem; width: 46px; height: 46px; border-radius: 50%;
  border: 0; background: rgba(255, 255, 255, .92); color: var(--paars); cursor: pointer;
  display: grid; place-items: center;
}
.video-knop svg { width: 20px; height: 20px; fill: currentColor; }
.video-knop .speel, .video-knop.gepauzeerd .pauze { display: none; }
.video-knop.gepauzeerd .speel { display: block; }
.hero-mandala {
  position: absolute; z-index: 0; width: 360px; height: 360px;
  right: calc(min(50vw, 980px) - 180px); bottom: -110px; opacity: .9;
}
@media (max-width: 900px) {
  .hero .wrap { min-height: 0; padding-block: 2rem 1.5rem; }
  .hero-tekst { width: 100%; }
  .hero-video {
    position: relative; inset: auto; width: calc(100% - 2rem); margin: 0 auto 2rem;
    aspect-ratio: 16 / 10; border-radius: 24px;
  }
  .hero-mandala { display: none; }
}

/* ---------- Paginakop (overige pagina's) ---------- */
.paginakop { background: var(--lila); position: relative; overflow: hidden; }
.paginakop .wrap { padding-block: clamp(2.2rem, 5vw, 3.8rem); position: relative; z-index: 1; }
.paginakop h1 { margin-bottom: .25em; }
.paginakop p { font-size: 1.2rem; margin: 0; }
.paginakop::after {
  content: ""; position: absolute; right: -90px; top: 50%; width: 380px; height: 380px; transform: translateY(-50%);
  background: url("../img/mandala.svg") center / contain no-repeat;
}
@media (max-width: 700px) { .paginakop::after { width: 220px; height: 220px; right: -110px; opacity: .6; } }
.kruimel { font-size: .95rem; margin-bottom: .6rem; }
.kruimel a { color: var(--grijs); }

/* ---------- Tekst + beeld ---------- */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.duo-omgekeerd > :first-child { order: 2; }
.duo img { border-radius: var(--rond); width: 100%; object-fit: cover; }
.foto-rond { border-radius: 50% !important; aspect-ratio: 1; object-fit: cover; }
.foto-rond.pos-links { object-position: 30% 50%; }
.foto-rond.pos-boven { object-position: 50% 18%; }
.mandala-rand {
  position: relative; display: grid; place-items: center; aspect-ratio: 1; width: 100%; max-width: 520px; margin-inline: auto;
  background: url("../img/mandala.svg") center / contain no-repeat;
}
.mandala-rand > img { width: 75% !important; }
.foto-staand { aspect-ratio: 4 / 5; max-height: 560px; object-position: 50% 30%; }
@media (max-width: 820px) {
  .duo { grid-template-columns: 1fr; }
  .duo-omgekeerd > :first-child { order: 0; }
}

.tekst h2 { margin-top: 1.6em; }
.tekst h2:first-child { margin-top: 0; }
.tekst ul { padding-left: 1.2em; }
.tekst li { margin-bottom: .35em; }
.tekst li::marker { color: var(--groen); }

.citaat {
  font-family: var(--font-kop); font-size: clamp(1.4rem, 2.6vw, 1.9rem); line-height: 1.35; color: var(--paars);
  margin: 0; padding-left: 1.2rem; border-left: 4px solid var(--groen);
}
.citaat cite { display: block; font: 600 1rem var(--font-tekst); color: var(--grijs); margin-top: .8rem; font-style: normal; }

/* ---------- Behandelingen ---------- */
.behandel-lijst { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 3rem; margin-top: 2rem; }
.behandel {
  display: grid; grid-template-columns: 88px 1fr; gap: 1.4rem; align-items: start;
  padding: 1.6rem 0; border-top: 1px solid var(--lila-rand);
}
.behandel img { width: 88px; height: 88px; object-fit: cover; border-radius: 22px; }
.behandel h3 { margin-bottom: .3em; }
.behandel h3 a { color: var(--paars); text-decoration: none; }
.behandel h3 a:hover { text-decoration: underline; text-decoration-color: var(--groen); }
.behandel p { margin-bottom: .4em; }
@media (max-width: 760px) { .behandel-lijst { grid-template-columns: 1fr; } }

.behandel-fotos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; margin-top: 2rem; }
.behandel-foto { text-decoration: none; color: var(--paars); }
.behandel-foto img { aspect-ratio: 1; object-fit: cover; border-radius: 50%; margin-bottom: .8rem; border: 4px solid var(--wit); box-shadow: 0 0 0 1.5px var(--groen); }
.behandel-foto span { font-family: var(--font-kop); font-size: 1.3rem; display: block; text-align: center; }
.behandel-foto:hover span { text-decoration: underline; text-decoration-color: var(--groen); }
@media (max-width: 760px) { .behandel-fotos { grid-template-columns: repeat(2, 1fr); } }

/* Stappen (echte volgorde) */
.stappen { list-style: none; padding: 0; margin: 1.5rem 0 0; counter-reset: stap; display: grid; gap: 1rem; }
.stappen li { counter-increment: stap; display: grid; grid-template-columns: 2.6rem 1fr; gap: 1rem; align-items: start; max-width: none; }
.stappen li::before {
  content: counter(stap);
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  display: grid; place-items: center;
  font: 600 1.15rem var(--font-kop); color: var(--paars); background: var(--groen-licht); border: 1.5px solid var(--groen);
}
.stappen strong { display: block; color: var(--paars); }

/* Veelgestelde vragen */
.vragen details { border-top: 1px solid var(--lila-rand); padding: 1.1rem 0; }
.vragen details:last-child { border-bottom: 1px solid var(--lila-rand); }
.vragen summary {
  cursor: pointer; list-style: none; font: 500 1.25rem var(--font-kop); color: var(--paars);
  display: flex; justify-content: space-between; gap: 1rem; align-items: center;
}
.vragen summary::-webkit-details-marker { display: none; }
.vragen summary::after { content: "+"; font: 400 1.6rem/1 var(--font-tekst); color: var(--groen-donker); }
.vragen details[open] summary::after { content: "–"; }
.vragen details > div { padding-top: .8rem; }

/* Video */
.video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--rond); overflow: hidden; background: var(--paars); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- Tarieven ---------- */
.tarief-groep { margin-bottom: 2.8rem; }
.tarief-groep h2 { font-size: 1.7rem; margin-bottom: .2em; }
.tarief-groep > p { color: var(--grijs); }
.tarieven { width: 100%; border-collapse: collapse; margin-top: .6rem; }
.tarieven th, .tarieven td { text-align: left; padding: 1rem 0; border-bottom: 1px solid var(--lila-rand); vertical-align: top; }
.tarieven th { font-weight: 700; color: var(--paars-diep); padding-right: 1.5rem; }
.tarieven th span { display: block; font-weight: 400; color: var(--grijs); font-size: 1rem; margin-top: .2rem; }
.tarieven td { text-align: right; white-space: nowrap; font: 600 1.35rem var(--font-kop); color: var(--paars); }
.tarieven td small { display: block; font: 400 .9rem var(--font-tekst); color: var(--groen-donker); }

.notitie {
  background: var(--groen-licht); border-radius: var(--rond); padding: 1.4rem 1.6rem;
}
.notitie p:last-child { margin-bottom: 0; }

/* ---------- Agenda ---------- */
.agenda-lijst { display: grid; gap: 1.4rem; }
.agenda-item {
  display: grid; grid-template-columns: 120px 1fr; gap: 1.6rem;
  background: var(--wit); border: 1px solid var(--lila-rand); border-radius: var(--rond);
  padding: 1.6rem;
}
.agenda-item.met-foto { grid-template-columns: 120px 1fr 220px; }
.agenda-wanneer {
  text-align: center; align-self: start;
  border-radius: 14px; background: var(--lila); padding: .8rem .4rem; color: var(--paars);
}
.agenda-wanneer .dag { display: block; font: 500 2.4rem/1 var(--font-kop); }
.agenda-wanneer .maand { display: block; font-weight: 700; font-size: 1rem; margin-top: .25rem; }
.agenda-wanneer .jaar { display: block; font-size: .9rem; color: var(--grijs); }
.agenda-wanneer.open { font: 600 .98rem/1.3 var(--font-tekst); padding: 1rem .5rem; }
.agenda-item h3 { margin-bottom: .35em; }
.agenda-meta { display: grid; grid-template-columns: auto 1fr; gap: .15rem 1rem; margin: 0 0 1rem; font-size: 1rem; }
.agenda-meta dt { font-weight: 700; color: var(--paars); }
.agenda-meta dd { margin: 0; }
.agenda-tekst p:last-child { margin-bottom: 0; }
.agenda-tekst ul { padding-left: 1.2em; }
.agenda-item .btn { margin-top: 1.2rem; }
.agenda-foto img { border-radius: 14px; aspect-ratio: 1; object-fit: cover; width: 100%; }
.agenda-item.uitgelicht { border: 2px solid var(--groen); background: linear-gradient(var(--wit), var(--wit)) padding-box; position: relative; }
.label-uitgelicht {
  display: inline-block; background: var(--groen); color: var(--paars-diep);
  font-weight: 700; font-size: .85rem; padding: .25em .8em; border-radius: 999px; margin-bottom: .6rem;
}
@media (max-width: 860px) {
  /* tablet: datum links, foto als brede strook bovenaan */
  .agenda-item, .agenda-item.met-foto { grid-template-columns: 100px 1fr; gap: 1.2rem 1.4rem; }
  .agenda-foto { order: -1; grid-column: 1 / -1; }
  .agenda-foto img { aspect-ratio: auto; height: clamp(160px, 32vw, 260px); }
}
@media (max-width: 600px) {
  /* telefoon: alles onder elkaar, datum als compact labeltje */
  .agenda-item, .agenda-item.met-foto { grid-template-columns: 1fr; padding: 1.2rem; gap: 1rem; }
  .agenda-wanneer { display: inline-flex; gap: .45rem; align-items: baseline; justify-self: start; padding: .45rem .9rem; }
  .agenda-wanneer .dag { font-size: 1.4rem; }
  .agenda-wanneer.open { padding: .5rem .9rem; }
  .agenda-foto img { height: 180px; }
  .agenda-meta { gap: .2rem .8rem; }
}

.agenda-kort { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.agenda-kort .kaartje {
  border: 1px solid var(--lila-rand); border-radius: var(--rond); padding: 1.4rem; background: var(--wit);
  display: flex; flex-direction: column; gap: .4rem;
}
.agenda-kort .kaartje.uitgelicht { border: 2px solid var(--groen); }
.agenda-kort .wanneer { font-weight: 700; color: var(--groen-donker); font-size: 1rem; }
.agenda-kort h3 { font-size: 1.3rem; margin: 0; }
.agenda-kort p { font-size: 1rem; margin: 0; color: var(--grijs); }
@media (max-width: 860px) { .agenda-kort { grid-template-columns: 1fr; } }

.leeg { padding: 1.6rem; border: 1.5px dashed var(--lila-rand); border-radius: var(--rond); color: var(--grijs); }
.laden { color: var(--grijs); }

/* ---------- Ervaringen ---------- */
.ervaringen { columns: 2 340px; column-gap: 1.6rem; }
.ervaring {
  break-inside: avoid; margin: 0 0 1.6rem;
  background: var(--wit); border-radius: var(--rond); padding: 1.6rem 1.7rem;
  border: 1px solid var(--lila-rand);
}
.ervaring blockquote { margin: 0; }
.ervaring blockquote p { font-size: 1.06rem; }
.ervaring blockquote p:first-child::before { content: "“"; font: 500 3.4rem/0 var(--font-kop); color: var(--groen); vertical-align: -.42em; margin-right: .1em; }
.ervaring figcaption { font-weight: 700; color: var(--paars); display: flex; flex-wrap: wrap; gap: .2rem .6rem; align-items: baseline; }
.ervaring figcaption span { font-weight: 400; color: var(--grijs); font-size: .95rem; }
.ervaring .citaten { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .5rem; }
.ervaring .citaten li { font-family: var(--font-kop); font-size: 1.25rem; color: var(--paars); }
.ervaring .citaten li::before { content: "“"; color: var(--groen); }
.ervaring .citaten li::after { content: "”"; color: var(--groen); }

.ervaringen-home { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.ervaringen-home .ervaring { margin: 0; }
@media (max-width: 860px) { .ervaringen-home { grid-template-columns: 1fr; } }

/* ---------- Blog ---------- */
.blog-lijst { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2rem 1.6rem; }
.blog-kaart { text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: .6rem; }
.blog-kaart img { aspect-ratio: 16/10; object-fit: cover; border-radius: var(--rond); }
.blog-kaart time { font-size: .95rem; color: var(--grijs); }
.blog-kaart h2 { font-size: 1.4rem; margin: 0; }
.blog-kaart:hover h2 { text-decoration: underline; text-decoration-color: var(--groen); }
.blog-kaart p { margin: 0; font-size: 1.02rem; }
.artikel-beeld { border-radius: var(--rond); margin: 0 0 2rem; aspect-ratio: 16/9; object-fit: cover; width: 100%; }
.artikel-meta { color: var(--grijs); font-size: 1rem; }

/* ---------- Formulier ---------- */
.formulier { display: grid; gap: 1.1rem; }
.veld label { display: block; font-weight: 700; margin-bottom: .35rem; color: var(--paars-diep); }
.veld .hulp { font-weight: 400; color: var(--grijs); font-size: .95rem; }
.veld input, .veld textarea, .veld select {
  width: 100%; font: inherit; font-size: 1.05rem; color: var(--paars-diep);
  padding: .8em 1em; border: 1.5px solid var(--lila-rand); border-radius: 12px; background: var(--wit);
}
.veld input:focus, .veld textarea:focus, .veld select:focus { outline: none; border-color: var(--paars); box-shadow: 0 0 0 3px rgba(71,46,99,.15); }
.veld textarea { min-height: 170px; resize: vertical; }
.twee-velden { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 600px) { .twee-velden { grid-template-columns: 1fr; } }
.vinkje { display: flex; gap: .7rem; align-items: flex-start; font-size: 1rem; }
.vinkje input { width: 1.3rem; height: 1.3rem; margin-top: .2rem; accent-color: var(--paars); flex: none; }
.honing { position: absolute; left: -5000px; }
.melding { padding: 1rem 1.2rem; border-radius: 12px; font-weight: 600; }
.melding-ok { background: var(--groen-licht); color: #2f5209; }
.melding-fout { background: #fbe9ec; color: #8a1c2c; }

.contact-gegevens { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.1rem; }
.contact-gegevens li { display: grid; grid-template-columns: 1.6rem 1fr; gap: .8rem; }
.contact-gegevens svg { width: 1.4rem; height: 1.4rem; color: var(--groen-donker); margin-top: .25rem; }
.contact-gegevens strong { display: block; color: var(--paars); }
.kaart { border: 0; width: 100%; height: 300px; border-radius: var(--rond); margin-top: 1.6rem; }

/* ---------- Oproep ---------- */
.oproep { background: var(--paars); color: #f2edf8; position: relative; overflow: hidden; }
.oproep h2 { color: var(--wit); }
.oproep p { font-size: 1.2rem; }
.oproep .wrap { position: relative; z-index: 1; }
.oproep::before {
  content: ""; position: absolute; right: -140px; bottom: -200px; width: 520px; height: 520px;
  background: url("../img/mandala-wit.svg") center / contain no-repeat;
}
.oproep .btn-rand { border-color: var(--wit); color: var(--wit); }
.oproep .btn-rand:hover { background: var(--wit); color: var(--paars); }

/* ---------- Voet (footer) ---------- */
.voet { background: var(--paars-diep); color: #d9d4e4; font-size: 1rem; }
.voet .wrap { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 2rem; padding-block: 3.2rem 2rem; }
.voet h2 { color: var(--wit); font-size: 1.35rem; }
.voet a { color: var(--wit); }
.voet a:hover { color: var(--groen); }
.voet ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; }
.voet address { font-style: normal; }
.voet .bewust { background: var(--wit); border-radius: 10px; padding: .5rem .8rem; display: inline-block; margin-top: 1rem; }
.voet .bewust img { height: 34px; width: auto; }
.voet-onder { border-top: 1px solid rgba(255,255,255,.12); }
.voet-maker { font-size: .82rem; letter-spacing: .02em; color: #a9a5b8; }
.voet .voet-maker .wrap { display: block; padding-block: 0 1.2rem; }
.voet-maker a { color: #d9d4e4; text-decoration: none; border-bottom: 1px solid rgba(142, 190, 58, .45); }
.voet-maker a:hover, .voet-maker a:focus-visible { color: var(--groen); border-bottom-color: var(--groen); }
.voet-onder .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem 1.4rem; padding-block: 1.1rem; grid-template-columns: none; font-size: .92rem; }
@media (max-width: 820px) { .voet .wrap { grid-template-columns: 1fr 1fr; } .voet .wrap > div:first-child { grid-column: 1 / -1; } }
@media (max-width: 560px) { .voet .wrap { grid-template-columns: 1fr; } }

.mt-0 { margin-top: 0; }
.mt-2 { margin-top: 2rem; }
.centraal { text-align: center; }
.centraal p { margin-inline: auto; }
.visueel-verborgen { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Aanvullingen: kaartjes en blog ---------- */
.agenda-kort .kaartje { text-decoration: none; color: inherit; }
.agenda-kort .kaartje:hover h3 { text-decoration: underline; text-decoration-color: var(--groen); }
.agenda-kort .label-uitgelicht { align-self: flex-start; margin-bottom: 0; }

.blog-zonder-foto {
  display: block; aspect-ratio: 16/10; border-radius: var(--rond); background: var(--lila);
  background-image: radial-gradient(circle at 70% 60%, transparent 0 18%, var(--groen) 18.4% 18.9%, transparent 19.3% 27%, rgba(71,46,99,.35) 27.4% 27.9%, transparent 28.3%);
}
.blog-uitgelicht .blog-kaart { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: .4rem 2rem; align-items: center; }
.blog-uitgelicht .blog-kaart > img, .blog-uitgelicht .blog-kaart > .blog-zonder-foto { grid-row: span 3; }
.blog-uitgelicht .blog-kaart h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
@media (max-width: 760px) { .blog-uitgelicht .blog-kaart { grid-template-columns: 1fr; } .blog-uitgelicht .blog-kaart > img { grid-row: auto; } }
.tekst h2 + p, .tekst h3 + p { margin-top: 0; }
#blog-artikel h2 { font-size: 1.7rem; margin-top: 1.6em; }

/* ---------- Op afspraak ---------- */
.topbalk-tekst { margin-right: auto; font-weight: 600; }
@media (max-width: 640px) { .topbalk-tekst { display: none; } }
.voet-afspraak { color: var(--groen); font-weight: 700; margin-bottom: .4rem; }

/* Drie stappen naar een afspraak (echte volgorde, daarom genummerd) */
.stappen-rij { grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin-top: 1.8rem; }
.stappen-rij li { display: block; background: var(--wit); border-radius: var(--rond); padding: 1.5rem 1.6rem; }
.stappen-rij li::before { display: grid; margin-bottom: .8rem; }
.stappen-rij h3 { margin-bottom: .35em; }
.stappen-rij p { margin: 0; }
@media (max-width: 700px) { .stappen-rij { grid-template-columns: 1fr; } }
@media (min-width: 701px) and (max-width: 900px) { .stappen-rij li { padding: 1.2rem 1.1rem; } }

/* Snel contact onderin het scherm op de telefoon */
.actiebalk { display: none; }
@media (max-width: 700px) {
  .actiebalk {
    display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: .4rem;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: var(--wit); border-top: 1px solid var(--lila-rand);
    padding: .5rem .6rem calc(.5rem + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -6px 20px rgba(45, 44, 64, .08);
  }
  .actiebalk a {
    display: grid; place-items: center; min-height: 46px; border-radius: 999px;
    border: 2px solid var(--paars); color: var(--paars); font-weight: 700; text-decoration: none; font-size: .98rem;
  }
  .actiebalk a.actiebalk-hoofd { background: var(--groen); border-color: var(--groen); color: var(--paars-diep); }
  .voet { padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 700px) {
  .oproep::before { width: 320px; height: 320px; right: -190px; bottom: -150px; opacity: .6; }
  .mandala-rand { max-width: 340px; }
}


/* ---------- Levendiger: golfje onder koppen, fotomozaïek, citaat, avatar ---------- */
/* Een klankgolf onder de belangrijkste koppen */
h2.golf::after, .paginakop h1::after {
  content: ""; display: block; width: 72px; height: 12px; margin-top: .45rem;
  background: url("../img/golf.svg") left center / contain no-repeat;
}
.centraal h2.golf::after { margin-inline: auto; }

.praktijk { padding-top: 0; }
.mozaiek {
  display: grid; gap: 1rem; margin-top: 1.6rem;
  grid-template-columns: 1.35fr 1fr 1fr; grid-template-rows: 250px 250px;
}
.mozaiek > a { position: relative; display: block; overflow: hidden; border-radius: var(--rond); background: var(--lila); color: inherit; text-decoration: none; }
.mozaiek .m1 { grid-row: 1 / span 2; }
.mozaiek .m2 { grid-column: 2 / span 2; }
.mozaiek img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.mozaiek-bijschrift {
  position: absolute; left: .9rem; bottom: .9rem; padding: .35em .9em; border-radius: 999px;
  display: inline-flex; align-items: center; gap: .45em;
  background: rgba(255, 255, 255, .92); color: var(--paars); font-weight: 700; font-size: .95rem;
  transition: background .2s ease, color .2s ease;
}
.mozaiek-bijschrift .pijl { color: var(--groen-donker); transition: transform .2s ease; }
.mozaiek > a:hover .mozaiek-bijschrift, .mozaiek > a:focus-visible .mozaiek-bijschrift { background: var(--wit); color: var(--paars-diep); }
.mozaiek > a:hover .pijl, .mozaiek > a:focus-visible .pijl { transform: translateX(3px); }
.mozaiek > a:focus-visible { outline: 3px solid var(--paars); outline-offset: 3px; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .mozaiek > a:hover img { transform: scale(1.04); }
}
@media (max-width: 760px) {
  .mozaiek { grid-template-columns: 1fr 1fr; grid-template-rows: 240px 200px 170px; }
  .mozaiek .m1 { grid-row: auto; grid-column: 1 / span 2; }
  .mozaiek .m2 { grid-column: 1 / span 2; }
}

.over-ans .citaat { margin: 0 0 1.4rem; }

.op-afspraak { display: grid; grid-template-columns: 76px 1fr; gap: 1.1rem; align-items: center; }
.op-afspraak .avatar { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; border: 3px solid var(--wit); box-shadow: 0 0 0 2px var(--groen); }
.op-afspraak p { margin: 0; }

/* Toestemming statistieken */
.cookiemelding {
  position: fixed; z-index: 70; left: 1rem; bottom: 1rem; max-width: 420px;
  background: var(--wit); border: 1px solid var(--lila-rand); border-radius: var(--rond);
  padding: 1.1rem 1.2rem; box-shadow: 0 18px 50px rgba(45, 44, 64, .2); font-size: .98rem;
}
.cookiemelding p { margin: 0 0 .8rem; }
.cookiemelding .btn-klein { padding: .65em 1.1em; font-size: .95rem; }
@media (max-width: 700px) {
  .cookiemelding { left: .6rem; right: .6rem; max-width: none; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 600px) {
  .hero-video figcaption { left: .8rem; bottom: .8rem; font-size: .88rem; max-width: calc(100% - 4.6rem); }
  .video-knop { right: .8rem; bottom: .8rem; width: 40px; height: 40px; }
  .behandel { grid-template-columns: 64px 1fr; gap: 1rem; }
  .behandel img { width: 64px; height: 64px; border-radius: 16px; }
}

/* ---------- Iconen bij contactgegevens ---------- */
.topbalk-link { display: inline-flex; align-items: center; gap: .45rem; }
.topbalk-link svg { width: 1.05rem; height: 1.05rem; flex: none; }
@media (max-width: 420px) {
  .topbalk .wrap { justify-content: center; gap: .3rem 1.2rem; }
}

.voet-contact { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.voet-contact li { display: grid; grid-template-columns: 1.2rem 1fr; gap: .65rem; align-items: start; }
.voet-contact svg { width: 1.1rem; height: 1.1rem; color: var(--groen); margin-top: .2rem; }

.actiebalk a { gap: .4rem; grid-auto-flow: column; }
.actiebalk svg { width: 1.1rem; height: 1.1rem; flex: none; }

.btn svg { width: 1.1em; height: 1.1em; flex: none; }

/* Route-link in de agenda */
.route-link {
  display: inline-flex; align-items: center; margin-left: .4rem; padding: .05em .65em; border-radius: 999px;
  background: var(--groen-licht); color: var(--groen-donker); font-weight: 700; font-size: .85rem; text-decoration: none;
}
.route-link:hover { background: var(--groen); color: var(--paars-diep); }

/* Kaart: eerst een vak met knoppen, Google Maps pas na een klik */
.kaart-vak {
  margin-top: 1.6rem; border-radius: var(--rond); min-height: 260px; display: grid; place-items: center; text-align: center;
  background: var(--lila) url("../img/mandala-paars.svg") center / 420px no-repeat; border: 1px solid var(--lila-rand); padding: 1.5rem;
}
.kaart-vak.geladen { padding: 0; border: 0; background: none; display: block; }
.kaart-vak .kaart { margin-top: 0; display: block; }
.kaart-inhoud { display: grid; justify-items: center; gap: .8rem; max-width: 340px; }
.kaart-inhoud > svg { width: 2.2rem; height: 2.2rem; color: var(--paars); }
.kaart-inhoud p { margin: 0; }
.kaart-inhoud .knoppen { justify-content: center; }
.btn-klein { padding: .7em 1.15em; font-size: .98rem; }

/* Foutmelding onder een formulierveld */
.veld-fout { color: #a3263a; font-weight: 600; font-size: .95rem; margin: .35rem 0 0; }
.veld input[aria-invalid="true"], .veld textarea[aria-invalid="true"] { border-color: #a3263a; }
.vinkje + .veld-fout, .vinkje .veld-fout { margin-left: 2rem; }
.veld .hulp { display: block; font-size: .92rem; color: var(--grijs); margin-top: .35rem; }
.hulp-inline { font-weight: 400; color: var(--grijs); font-size: .95rem; }
.kaart-inhoud { background: rgba(243, 239, 248, .9); padding: 1.1rem 1.2rem; border-radius: 16px; }

/* ---------- Plekken bij activiteiten ---------- */
.plekken { display: inline-flex; align-items: center; gap: .45rem; margin: 1.1rem 1rem 0 0; font-weight: 700; color: var(--groen-donker); }
.plekken::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: var(--groen); }
.plekken.bijna { color: #8a5a00; }
.plekken.bijna::before { background: #e3a21a; }
.plekken.vol { color: #8a1c2c; }
.plekken.vol::before { background: #c4304a; }
.plekken + .btn { margin-top: 1.1rem; }
.plekken-klein { align-self: flex-start; font-size: .82rem; font-weight: 700; color: var(--groen-donker); background: var(--groen-licht); border-radius: 999px; padding: .15em .7em; }
.plekken-klein.vol { color: #8a1c2c; background: #fbe9ec; }
.agenda-item { scroll-margin-top: 1.5rem; }

/* ---------- Aanmeldvenster ---------- */
.aanmeld-dialoog {
  border: 0; border-radius: var(--rond); padding: 0; color: var(--paars-diep);
  width: min(640px, 100% - 1.5rem); max-height: calc(100% - 1.5rem);
  box-shadow: 0 30px 80px rgba(45,44,64,.35);
}
.aanmeld-dialoog::backdrop { background: rgba(45, 44, 64, .55); }
.aanmeld-dialoog form { display: flex; flex-direction: column; max-height: calc(100vh - 1.5rem); gap: 0; }
.aanmeld-kop { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: 1.3rem 1.5rem 1rem; background: var(--lila); }
.aanmeld-kop h2 { margin: 0; font-size: 1.6rem; }
.aanmeld-sub { margin: 0; font-weight: 700; font-size: .9rem; color: var(--groen-donker); text-transform: uppercase; letter-spacing: .04em; }
.aanmeld-wanneer { margin: .3rem 0 0; color: var(--grijs); }
.aanmeld-sluit { background: none; border: 0; font-size: 2rem; line-height: 1; cursor: pointer; color: var(--grijs); padding: 0 .2rem; }
.aanmeld-inhoud { display: grid; gap: 1rem; padding: 1.3rem 1.5rem; overflow: auto; }
.aanmeld-dialoog .melding { margin: 0 1.5rem 1rem; }
.aanmeld-dialoog #aanmeld-inhoud[hidden] + .melding { margin-top: 1.3rem; }
.aanmeld-plekken { margin: 0; font-weight: 700; color: var(--groen-donker); }
.aanmeld-voet { display: flex; justify-content: flex-end; gap: .7rem; padding: 1rem 1.5rem; border-top: 1px solid var(--lila-rand); flex-wrap: wrap; }
.aanmeld-dialoog select { width: 100%; }
@media (max-width: 600px) {
  .aanmeld-dialoog { width: 100%; max-width: 100%; max-height: 100%; height: 100%; border-radius: 0; margin: 0; }
  .aanmeld-dialoog form { max-height: 100%; height: 100%; }
  .aanmeld-inhoud { flex: 1; }
}
.aanmeld-dialoog textarea { min-height: 90px; }

/* ---------- Aanraakschermen: alles goed aan te tikken (min. ± 44px) ---------- */
@media (pointer: coarse) {
  .topbalk .wrap { padding-block: .1rem; align-items: center; }
  .topbalk-tekst { align-self: center; }
  .voet-onder .wrap { align-items: center; }
  .topbalk-link { min-height: 40px; display: inline-flex; align-items: center; }
  .vragen summary { min-height: 44px; }
  .vragen details { padding-block: .7rem; }
  .link-pijl { display: inline-block; padding-block: .55rem .25rem; }
  .voet ul { gap: 0; }
  .voet ul a, .voet-onder a, .voet-maker a { display: inline-block; padding-block: .5rem; }
  .route-link { padding: .3em .8em; }
  .behandel h3 a { display: inline-block; padding-block: .3rem; }
}

/* Telefoon: kleine verfijningen */
@media (max-width: 600px) {
  .op-afspraak { grid-template-columns: 56px 1fr; align-items: start; gap: .9rem; }
  .op-afspraak .avatar { width: 56px; height: 56px; }
  .voet-onder .wrap { flex-direction: column; align-items: flex-start; gap: .2rem; }
}
@media (max-width: 420px) {
  .actiebalk { gap: .3rem; padding-inline: .4rem; }
  .actiebalk a { font-size: .9rem; gap: .3rem; }
  .actiebalk svg { width: 1rem; height: 1rem; }
}

/* iPad liggend en kleine laptops: menu iets compacter zodat alles op één regel past */
@media (min-width: 1021px) and (max-width: 1180px) {
  .nav a { padding: .55em .6em; font-size: .98rem; }
  .logo img { width: 170px; }
}

@media (max-width: 900px) { .paginakop::after { opacity: .45; } }

/* Telefoon: als het toetsenbord open is (veld met focus), de belbalk onderin verbergen zodat hij niets afdekt */
@media (max-width: 700px) {
  body:has(input:focus, textarea:focus, select:focus) .actiebalk { display: none; }
}