/* =========================================================
   Studio Anja: stylesheet
   Opbouw van dit bestand:
   1. Variabelen (kleuren, lettertypes, maten)
   2. Basis (reset en standaard tekst)
   3. Hulpklassen (container, knoppen, boogfoto, golven)
   4. Header en menu
   5. Footer en contact
   6. Homepage
   7. Behandelpagina (tarieven en stappen)
   8. Over mij, veelgestelde vragen, algemene voorwaarden
   9. Animaties en prefers-reduced-motion
   ========================================================= */

/* ---------- Lettertypes ----------
   Staan op de website zelf (assets/fonts), niet via Google Fonts: zo gaan er geen bezoekersgegevens naar Google.
   Het zijn variabele lettertypes: één bestand bevat alle diktes. Licentie: SIL Open Font License. */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url("../fonts/montserrat-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("../fonts/playfair-display-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Playfair Display";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/playfair-display-italic-latin.woff2") format("woff2");
}



/* ---------- 1. Variabelen ---------- */
/* Alles wat vaker terugkomt staat hier één keer.
   Wil je later een kleur aanpassen? Dan doe je dat alleen hier. */
:root {
  /* Huisstijl */
  --mauve: #b2879f;          /* accent, knoppen, voetreflex */
  --oudroze: #cca29f;        /* accent */
  --salie: #b1c09e;          /* holistische massage */
  --nachtblauw: #192a3d;     /* in de huisstijl, op de site niet meer gebruikt */
  --bg: #f9f6f8;             /* achtergrond */
  --bg-roze: #f8f1f5;        /* achtergrond, iets rozer */

  /* Tekstkleuren: warme pruimtinten rond #7e656f.
     Tussen haakjes het contrast met de achtergrond (minimaal 4,5 nodig). */
  --tekst-zacht: #7e656f;    /* kleine bijteksten, labels (4,9 op --bg) */
  --tekst: #6b5560;          /* lopende tekst, menu (6,3 op --bg) */
  --tekst-diep: #4f3c46;     /* extra donkere tekst, voor als het nodig is */

  /* Donkere varianten van de huisstijl voor leesbaarheid */
  --mauve-donker: #8a5f78;   /* mauve koppen en knoppen op licht (4,9) */
  --mauve-diep: #94687f;     /* mauve vlak met witte tekst erop (4,6) */
  --salie-diep: #8a9c76;     /* salie vlak met witte tekst erop (3,0) */
  --salie-donker: #5f7050;
  --mauve-zacht: #ead9e2;    /* heel licht mauve vlak (zoals "Voordelen") */

  /* Lettertypes */
  --font-kop: "Playfair Display", Georgia, serif;
  --font-tekst: "Montserrat", "Helvetica Neue", Arial, sans-serif;

  /* Maten: clamp(min, voorkeur, max) laat iets meegroeien met het scherm */
  --container: 1200px;
  --gutter: clamp(1.25rem, 4vw, 3rem);           /* ruimte aan de zijkant */
  --sectie: clamp(3rem, 6vw, 5.5rem);            /* ruimte boven/onder secties */
  --header-h: 6rem;                              /* hoogte van de header */
  --radius: 1.25rem;

  /* Beweging */
  --ease: cubic-bezier(.22, .61, .36, 1);        /* rustig uitlopende beweging */
}

@media (max-width: 900px) {
  :root { --header-h: 4.5rem; }
}


/* ---------- 2. Basis ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);   /* ankerlinks verdwijnen niet onder de header */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--tekst);
  font-family: var(--font-tekst);
  font-weight: 300;
  font-size: clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-kop);
  font-weight: 400;
  line-height: 1.2;
  color: var(--mauve-donker);
  margin: 0 0 .6em;
  text-wrap: balance;      /* verdeelt koppen mooi over regels */
}
h1 { font-size: clamp(2.4rem, 1.6rem + 3.4vw, 4.25rem); }
h2 { font-size: clamp(2rem, 1.5rem + 2.2vw, 3.25rem); }
h3 { font-size: clamp(1.35rem, 1.2rem + .6vw, 1.7rem); }

p { margin: 0 0 1.1em; text-wrap: pretty; }

a { color: var(--mauve-donker); text-underline-offset: .2em; }
a:hover { color: var(--tekst); }

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

ul { padding-left: 1.2em; }

/* Losse tekstlinks een groter klikvlak geven, zodat ze met een vinger
   makkelijk te raken zijn (minstens 24 pixels hoog, de norm van WCAG 2.2) */
.contact-lijst a,
.footer-links a,
.voorwaarden__inhoud a,
.kaart__links a,
.link-pijl {
  display: inline-block;
  padding-block: .55rem .2em;
}

/* Zichtbare focusrand voor wie met het toetsenbord navigeert */
:focus-visible {
  outline: 2px solid var(--mauve-donker);
  outline-offset: 3px;
  border-radius: 4px;
}

/* "Ga naar de inhoud": alleen zichtbaar als je met Tab navigeert */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  padding: .75rem 1.25rem;
  background: var(--tekst);
  color: #fff;
  border-radius: 999px;
  transition: top .2s;
}
.skip-link:focus { top: 1rem; color: #fff; }

/* Tekst alleen voor schermlezers */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}


/* ---------- 3. Hulpklassen ---------- */
.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}

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

/* Klein woord boven een kop, zoals "STUDIO" in het logo */
.bovenkop {
  display: block;
  font-family: var(--font-tekst);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--mauve-donker);
  margin-bottom: 1rem;
}

/* Knop */
.knop {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  padding: .95em 2em;
  border-radius: 999px;
  background: var(--mauve-donker);
  color: #fff;
  font-family: var(--font-tekst);
  font-size: .9rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-decoration: none;
  transition: background-color .4s var(--ease), transform .4s var(--ease);
}
.knop:hover { background: var(--tekst); color: #fff; transform: translateY(-2px); }

/* Tekstlink met een lijntje dat bij hover meegroeit */
.link-pijl {
  font-weight: 500;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 30% 1px no-repeat;
  padding-bottom: .2em;
  transition: background-size .5s var(--ease);
}
.link-pijl:hover { background-size: 100% 1px; }

/* Foto in boogvorm: rond aan de bovenkant.
   Een heel grote border-radius wordt door de browser automatisch
   verkleind tot een perfecte halve cirkel, hoe breed de foto ook is. */
.boog {
  border-radius: 100vmax 100vmax 0 0;
  overflow: hidden;
}
.boog img {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* vult de vorm zonder te vervormen */
}

/* Golvende rand tussen twee vlakken.
   De SVG staat in de HTML. Je geeft twee kleuren mee:
   --van  = kleur van het vlak erboven (achtergrond van de golf)
   --naar = kleur van het vlak eronder (de golf zelf)
   Voorbeeld: <svg class="golf" style="--van: var(--bg); --naar: var(--mauve)"> */
.golf {
  display: block;
  width: 100%;
  height: clamp(36px, 5vw, 90px);
  background: var(--van, transparent);
  color: var(--naar, var(--mauve));
  fill: currentColor;
  margin-block: -1px -3px;   /* overlapt een paar pixels: voorkomt een haarlijntje tussen golf en vlak */
}
.golf--gespiegeld { transform: scaleX(-1); }
/* Het vlak na een golf ligt er net overheen, zodat de onderrand van de golf wegvalt */
.golf + *,
footer { position: relative; }


/* ---------- 4. Header en menu ---------- */
/* De header blijft bovenin staan (fixed) en is half doorzichtig.
   backdrop-filter maakt wat erachter zit zacht wazig, zoals matglas. */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  height: var(--header-h);
  background: rgb(249 246 248 / .55);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  transition: background-color .5s var(--ease), box-shadow .5s var(--ease);
}
/* Na een stukje scrollen wordt hij iets minder doorzichtig (via main.js) */
.site-header.is-gescrold {
  background: rgb(249 246 248 / .82);
  box-shadow: 0 1px 0 rgb(79 60 70 / .06), 0 10px 30px -18px rgb(79 60 70 / .25);
}

.site-header .container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.logo { display: block; flex-shrink: 0; }
.logo img { height: calc(var(--header-h) - 1.5rem); width: auto; }

.menu {
  display: flex;
  gap: clamp(1.5rem, 3.5vw, 3.25rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu a {
  position: relative;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tekst);
  text-decoration: none;
  padding-block: .5rem;
}
/* Lijntje onder het menu-item: groeit vanuit het midden bij hover */
.menu a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--mauve);
  transform: scaleX(0);
  transition: transform .5s var(--ease);
}
.menu a:hover::after,
.menu a[aria-current="page"]::after { transform: scaleX(1); }

/* Hamburgerknop: alleen zichtbaar op kleinere schermen */
.menu-knop {
  display: none;
  position: relative;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--tekst);
  cursor: pointer;
}
/* De drie streepjes zijn één span plus ::before en ::after */
.menu-knop span,
.menu-knop span::before,
.menu-knop span::after {
  position: absolute;
  left: 50%;
  width: 1.4rem;
  height: 1.5px;
  margin-left: -.7rem;
  background: currentColor;
  border-radius: 2px;
  transition: transform .45s var(--ease), opacity .3s;
}
.menu-knop span { top: 50%; }
.menu-knop span::before,
.menu-knop span::after { content: ""; left: 0; margin-left: 0; }
.menu-knop span::before { transform: translateY(-.45rem); }
.menu-knop span::after { transform: translateY(.45rem); }
/* Open: de streepjes worden een kruisje */
.menu-knop[aria-expanded="true"] span { background: transparent; }
.menu-knop[aria-expanded="true"] span::before { transform: rotate(45deg); background: var(--tekst); }
.menu-knop[aria-expanded="true"] span::after { transform: rotate(-45deg); background: var(--tekst); }

@media (max-width: 900px) {
  .menu-knop { display: block; }

  /* Het menu klapt onder de header uit.
     De truc met grid-template-rows (0fr naar 1fr) laat de hoogte
     soepel meegroeien, ook al weten we de precieze hoogte niet. */
  .site-nav {
    position: absolute;
    inset: 100% 0 auto;
    display: grid;
    grid-template-rows: 0fr;
    background: rgb(249 246 248 / .97);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: 0 24px 40px -24px rgb(79 60 70 / .3);
    visibility: hidden;
    transition: grid-template-rows .55s var(--ease), visibility 0s .55s;
  }
  .site-nav.is-open {
    grid-template-rows: 1fr;
    visibility: visible;
    transition: grid-template-rows .55s var(--ease), visibility 0s;
  }
  .site-nav > .menu { overflow: hidden; min-height: 0; }

  .menu {
    flex-direction: column;
    align-items: center;
    gap: 0;
  }
  .menu li:first-child { margin-top: 1.5rem; }
  .menu li:last-child { margin-bottom: 2.25rem; }
  .menu a {
    display: block;
    padding: 1rem 0;
    font-size: .85rem;
    opacity: 0;
    transform: translateY(-.5rem);
    transition: opacity .4s var(--ease), transform .4s var(--ease);
  }
  /* Menu-items komen één voor één tevoorschijn */
  .site-nav.is-open .menu a { opacity: 1; transform: none; }
  .site-nav.is-open li:nth-child(2) a { transition-delay: .06s; }
  .site-nav.is-open li:nth-child(3) a { transition-delay: .12s; }
}

/* Ruimte bovenaan zodat de inhoud niet onder de vaste header verdwijnt.
   De homepage heeft een grote foto die juist wél onder de header doorloopt. */
main { padding-top: var(--header-h); }
.pagina-home main { padding-top: 0; }


/* ---------- 5. Footer en contact ---------- */
.contact {
  background: var(--bg);
  padding-block: var(--sectie) clamp(3rem, 6vw, 4.5rem);
}
.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 4fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: end;
}
.contact__foto { aspect-ratio: 4 / 5; max-width: 360px; }
.contact h2 { margin-bottom: 1.5rem; }
.contact h3 { margin-bottom: 1rem; }

.contact-lijst {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.25rem;
}
.contact-lijst li {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  align-items: center;
  line-height: 1.5;
}
.contact-lijst .label {
  display: block;
  font-size: .8rem;
  color: var(--tekst-zacht);
}
.contact-lijst a,
.contact-lijst strong {
  font-weight: 500;
  color: var(--tekst);
  text-decoration: none;
}
.contact-lijst a:hover { color: var(--mauve-donker); }

/* Rond icoontje voor adres, mail, telefoon */
.icoon {
  width: 2rem;
  height: 2rem;
  padding: .45rem;
  border-radius: 50%;
  background: var(--mauve-zacht);
  color: var(--mauve-donker);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.openingstijden {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .4rem 1.5rem;
  margin: 0 0 2rem;
}
.openingstijden dt { font-weight: 400; }
.openingstijden dd { margin: 0; white-space: nowrap; }

.contact__tip {
  font-size: .9rem;
  color: var(--tekst-zacht);
}

.footer-onder {
  border-top: 1px solid rgb(79 60 70 / .08);
  padding-block: 1.75rem;
  font-size: .8rem;
  color: var(--tekst-zacht);
}
.footer-onder .container {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
}
.footer-onder img { width: 2.5rem; height: auto; }
.footer-links {
  display: flex;
  justify-content: flex-end;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-links a {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: inherit;
  text-decoration: none;
}
.footer-links a:hover { color: var(--mauve-donker); }
.footer-links svg {
  width: 1.1rem; height: 1.1rem;
  fill: none; stroke: currentColor; stroke-width: 1.6;
}

@media (max-width: 1000px) {
  .contact__grid { grid-template-columns: 1fr 1fr; align-items: start; }
  .contact__foto { grid-row: span 2; }
}
@media (max-width: 640px) {
  .contact__grid { grid-template-columns: 1fr; }
  .contact__foto { grid-row: auto; max-width: 280px; }
  .footer-onder .container { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .footer-onder img { order: -1; }
  .footer-links { justify-content: center; }
}


/* ---------- 6. Homepage ---------- */

/* Grote foto bovenaan. De header ligt eroverheen. */
.hero {
  position: relative;
  min-height: min(92vh, 900px);
  display: grid;
  align-items: center;
  overflow: hidden;
  background: var(--bg-roze);
}
.hero__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 62%;
}
/* Zachte waas van links, zodat de tekst goed leesbaar is op de foto */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(100deg, rgb(249 246 248 / .88) 0%, rgb(249 246 248 / .55) 38%, rgb(249 246 248 / 0) 62%);
}
.hero__tekst {
  position: relative;
  z-index: 2;
  padding-block: calc(var(--header-h) + 3rem) 5.5rem;
}
.hero h1 {
  max-width: 14ch;
  margin-bottom: 1.25rem;
}
.hero p {
  max-width: 26rem;
  font-size: 1.05rem;
}
/* De golf ligt onderaan over de foto heen */
.hero .golf {
  position: absolute;
  inset: auto 0 0;
  z-index: 3;
}

@media (max-width: 700px) {
  .hero { min-height: 82vh; align-items: end; }
  .hero::before {
    background: linear-gradient(0deg, rgb(249 246 248 / .97) 0%, rgb(249 246 248 / .9) 42%, rgb(249 246 248 / 0) 72%);
  }
  .hero__foto { object-position: 50% 20%; }
  .hero__tekst { padding-block: 0 5.5rem; }
}

/* Gekleurd vlak voor een behandeling (mauve of salie), met lichte tekst.
   Beide kleuren zijn een paar tinten donkerder dan de huisstijl,
   zodat de witte tekst beter leesbaar is. */
.behandeling {
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
  color: #fff;
}
.behandeling--mauve { background: var(--mauve-diep); }
.behandeling--salie { background: var(--salie-diep); }
.behandeling h2 { color: #fff; }

.behandeling__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2.5rem, 7vw, 7rem);
  align-items: center;
}
/* Bij de massage staat de foto rechts */
.behandeling--salie .behandeling__foto { order: 2; }

.behandeling__foto {
  aspect-ratio: 4 / 5;
  width: 100%;
  max-width: 460px;
  justify-self: center;
}
.behandeling__foto img { transition: transform 1.6s var(--ease); }
.behandeling__foto:hover img { transform: scale(1.04); }

.behandeling__tekst { max-width: 34rem; }
.behandeling__tekst p { font-weight: 400; }

/* Tijd en prijs als klein label */
.label-prijs {
  display: inline-flex;
  gap: .9em;
  margin-bottom: 1.5rem;
  padding: .45em 1.1em;
  border-radius: 999px;
  background: rgb(255 255 255 / .35);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .08em;
}

/* Lijst met een klein bolletje als opsommingsteken */
.lijst-zacht {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .55rem 2rem;
  font-weight: 400;
}
.lijst-zacht li {
  position: relative;
  padding-left: 1.3rem;
  line-height: 1.5;
}
.lijst-zacht li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: .45rem;
  height: .45rem;
  border-radius: 50%;
  background: #fff;
}
.behandeling a.link-pijl { color: inherit; }   /* zelfde kleur als de tekst van het vlak */
.behandeling a.link-pijl:hover { color: inherit; opacity: .8; }
.behandeling .label-prijs { background: rgb(255 255 255 / .18); }

@media (max-width: 800px) {
  .behandeling__grid { grid-template-columns: 1fr; }
  .behandeling--salie .behandeling__foto { order: 0; }
  .behandeling__foto { max-width: 340px; }
}
@media (max-width: 460px) {
  .lijst-zacht { grid-template-columns: 1fr; }
}

/* Over Anja: foto met een kaart die er half overheen valt */
.intro-anja { background: var(--bg); }
.intro-anja__grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  align-items: center;
}
.intro-anja__foto {
  grid-column: 1;
  grid-row: 1;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  overflow: hidden;
}
.intro-anja__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.intro-anja__kaart {
  grid-column: 2;
  grid-row: 1;
  margin-left: -18%;
  position: relative;
  padding: clamp(2rem, 5vw, 4rem);
  background: var(--bg-roze);
  border-radius: var(--radius);
  box-shadow: 0 30px 60px -30px rgb(79 60 70 / .25);
}

@media (max-width: 800px) {
  .intro-anja__grid { grid-template-columns: 1fr; }
  .intro-anja__foto { max-width: 420px; width: 88%; }
  .intro-anja__kaart { grid-column: 1; grid-row: 2; margin: -4rem 0 0 auto; width: 92%; }
}

/* Voordelen */
.voordelen {
  background: var(--mauve-zacht);
  text-align: center;
}
.voordelen__intro { max-width: 36rem; margin: 0 auto 3.5rem; }
.voordelen__lijst {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 3rem 2rem;
}
.voordelen__lijst li {
  display: grid;
  justify-items: center;
  gap: 1rem;
  line-height: 1.5;
  font-weight: 400;
}
.voordelen__lijst svg {
  width: 4.25rem;
  height: 4.25rem;
  padding: 1.1rem;
  border-radius: 50%;
  background: var(--bg);
  color: var(--mauve-donker);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .8s var(--ease), background-color .8s var(--ease);
}
.voordelen__lijst li:hover svg { transform: translateY(-4px); background: #fff; }
.voordelen__noot {
  max-width: 40rem;
  margin: 4rem auto 0;
  font-size: .9rem;
  color: var(--tekst);       /* --tekst-zacht is op dit roze vlak te licht */
}

@media (max-width: 800px) {
  .voordelen__lijst { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Cadeaubon en strippenkaart */
.cadeau__grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(2.5rem, 7vw, 6rem);
  align-items: center;
}
.cadeau__foto { aspect-ratio: 3 / 4; max-width: 400px; }
.cadeau__kaarten {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}
.kaart {
  padding: 2rem;
  border-radius: var(--radius);
  background: #fff;
  box-shadow: 0 20px 50px -35px rgb(79 60 70 / .35);
}
.kaart h3 { margin-bottom: .75rem; }
.kaart p { font-size: .95rem; }
.kaart p:last-child { margin-bottom: 0; }
.kaart__accent {
  font-family: var(--font-kop);
  font-size: 1.15rem;
  font-style: italic;
  color: var(--mauve-donker);
}
.kaart__links {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.1rem;
  font-size: .9rem;
}

@media (max-width: 1000px) {
  .cadeau__grid { grid-template-columns: 1fr; }
  .cadeau__foto { display: none; }   /* op kleinere schermen alleen de kaarten */
}
@media (max-width: 640px) {
  .cadeau__kaarten { grid-template-columns: 1fr; }
}


/* ---------- 7. Behandelpagina ---------- */

/* Tarieven bovenaan */
.tarieven__grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(2.5rem, 7vw, 7rem);
  align-items: start;   /* foto en tekst beginnen op dezelfde hoogte */
}
.tarieven__foto { aspect-ratio: 4 / 5; max-width: 400px; }
.tarieven__intro { max-width: 34rem; }

.prijslijst {
  list-style: none;
  margin: 2.5rem 0 1.5rem;
  padding: 0;
  border-top: 1px solid rgb(79 60 70 / .12);
}
.prijslijst li {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: .25rem 2rem;
  padding: 1.35rem 0;
  border-bottom: 1px solid rgb(79 60 70 / .12);
}
.prijslijst__naam {
  font-family: var(--font-kop);
  font-size: clamp(1.15rem, 1.05rem + .4vw, 1.4rem);
  color: var(--mauve-donker);
}
.prijslijst__tijd {
  grid-column: 1;
  font-size: .85rem;
  color: var(--tekst-zacht);
}
.prijslijst__prijs {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  font-family: var(--font-kop);
  font-size: clamp(1.3rem, 1.15rem + .5vw, 1.6rem);
  color: var(--mauve-donker);
}
.tarieven__noot {
  font-size: .95rem;
  color: var(--tekst);
}

@media (max-width: 800px) {
  .tarieven__grid { grid-template-columns: 1fr; }
  .tarieven__foto { max-width: 300px; width: 100%; justify-self: center; }
}

/* Een behandeling met een stappenplan */
.stappenplan {
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
}
.stappenplan__kop {
  max-width: 44rem;
  margin: 0 auto clamp(2.5rem, 5vw, 4rem);
  text-align: center;
}
.stappenplan__kop .bovenkop { color: inherit; opacity: .85; }

/* Mauve: donker vlak met lichte tekst */
.stappenplan--mauve { background: var(--mauve-diep); color: #fff; }
.stappenplan--mauve h2,
.stappenplan--mauve h3 { color: #fff; }

/* Massage: lichte achtergrond met saliegroene accenten (zoals in Canva) */
.stappenplan--salie h2,
.stappenplan--salie h3 { color: var(--salie-donker); }
.stappenplan--salie .bovenkop { color: var(--salie-donker); }

/* ---- Het stappenpad ----
   Een golflijn verbindt de drie stappen en tekent zichzelf terwijl je scrolt.
   main.js zet daarvoor twee dingen op het pad:
   --voortgang  een getal van 0 tot 1: hoe ver de lijn getekend is
   --x1 --y1 --x2 --y2  de middens van de eerste en laatste cirkel
   Zodra de lijn een stap bereikt, krijgt die stap de class "is-actief". */
.stappenpad {
  --beeld: 150px;                         /* doorsnede van de ronde foto */
  --kolom-gat: clamp(2rem, 4vw, 3.5rem);
  --accent: #fff;                         /* lijn en ring (mauve vlak) */
  --spoor: rgb(255 255 255 / .3);         /* de nog niet getekende lijn */
  --adem: rgb(255 255 255 / .14);         /* de ademende vorm achter de foto */
  position: relative;
}
.stappenplan--salie .stappenpad {
  --accent: var(--salie-diep);
  --spoor: rgb(138 156 118 / .4);
  --adem: rgb(177 192 158 / .38);
}

/* De lijn ligt achter de stappen. Zonder JavaScript is hij er niet. */
.stappenpad__lijn {
  position: absolute;
  display: none;
  overflow: visible;
  pointer-events: none;
  fill: none;
}
.js .stappenpad__lijn--breed {
  display: block;
  left: var(--x1);
  top: calc(var(--y1) - 22px);
  width: calc(var(--x2) - var(--x1));
  height: 44px;
}
.stappenpad__lijn .spoor {
  stroke: var(--spoor);
  stroke-width: 1.5;
  stroke-dasharray: .004 .01;             /* stippellijn (in "padlengte", zie pathLength="1") */
}
.stappenpad__lijn .getekend {
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--voortgang, 0));   /* 0 = niets, 1 = helemaal */
}

.stappen {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--kolom-gat);
  position: relative;                     /* ligt boven de lijn */
}
.stap { text-align: center; }

/* Ronde foto met ring, nummer en ademende vorm */
.stap__beeld {
  position: relative;
  width: var(--beeld);
  height: var(--beeld);
  margin: 0 auto 1.75rem;
}
.stap__adem {
  position: absolute;
  inset: -16%;
  background: var(--adem);
  border-radius: 58% 42% 55% 45% / 48% 60% 40% 52%;
  animation: ademen 8s ease-in-out infinite alternate;
  transition: scale .6s var(--ease), opacity 1s var(--ease);
}
.stap:nth-child(2) .stap__adem { animation-delay: -2.7s; }
.stap:nth-child(3) .stap__adem { animation-delay: -5.4s; }

/* Rustig in- en uitademen: groter worden en van vorm veranderen */
@keyframes ademen {
  from { transform: scale(.94) rotate(0deg); border-radius: 58% 42% 55% 45% / 48% 60% 40% 52%; }
  to   { transform: scale(1.06) rotate(12deg); border-radius: 44% 56% 42% 58% / 57% 43% 57% 43%; }
}

.stap__foto {
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--adem);
  transition: transform 1s var(--ease), opacity 1s var(--ease), filter 1s var(--ease);
}
.stap__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease);
}

/* De ring om de foto: een SVG-cirkel die zich tekent */
.stap__ring {
  position: absolute;
  inset: 0;
  transform: rotate(-90deg);              /* begin bovenaan */
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.3s var(--ease);
}

/* Nummer: strak, in Montserrat */
.stap__nummer {
  position: absolute;
  top: 2%;
  right: -2%;
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--mauve-diep);
  font-family: var(--font-tekst);
  font-size: .78rem;
  font-weight: 400;
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
  transition: transform .8s var(--ease), opacity .8s var(--ease);
}
.stappenplan--salie .stap__nummer { color: #fff; }

.stap h3 { margin-bottom: .6rem; }
.stap p { font-size: .975rem; }
.stappenplan--mauve .stap p { font-weight: 400; }
.stap__tekst { transition: opacity 1s var(--ease), transform 1s var(--ease); }

/* Begintoestand (alleen met JavaScript): de stap wacht tot de lijn er is */
.js .stap:not(.is-actief) .stap__foto { opacity: .45; transform: scale(.82); filter: grayscale(.7); }
.js .stap:not(.is-actief) .stap__ring { stroke-dashoffset: 1; }
.js .stap:not(.is-actief) .stap__nummer { opacity: 0; transform: scale(.6); }
.js .stap:not(.is-actief) .stap__adem { opacity: 0; animation-play-state: paused; }
.js .stap:not(.is-actief) .stap__tekst { opacity: .5; transform: translateY(10px); }

/* Hover, alleen met een muis */
@media (hover: hover) {
  .stap:hover .stap__foto img { transform: scale(1.08); }
  .stap:hover .stap__adem { scale: 1.1; }
}

/* Afsluitende zin onder de stappen */
.stappenplan__slot {
  max-width: 34rem;
  margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
  text-align: center;
  font-size: .95rem;
  font-weight: 400;
  line-height: 1.7;
}
.stappenplan__slot::before {
  content: "";
  display: block;
  width: 2.5rem;
  height: 1px;
  margin: 0 auto 1.25rem;
  background: currentColor;
  opacity: .5;
}

/* Tablet en telefoon: stappen onder elkaar, cirkel links, lijn verticaal */
@media (max-width: 900px) {
  .stappenpad { --beeld: 112px; }
  .js .stappenpad__lijn--breed { display: none; }
  .js .stappenpad__lijn--smal {
    display: block;
    left: calc(var(--x1) - 20px);
    top: var(--y1);
    width: 40px;
    height: calc(var(--y2) - var(--y1));
  }
  .stappen { grid-template-columns: 1fr; gap: 2.5rem; }
  .stap {
    display: grid;
    grid-template-columns: var(--beeld) minmax(0, 1fr);
    gap: 1.75rem;
    align-items: start;
    text-align: left;
  }
  .stap__beeld { margin: 0; }
}
@media (max-width: 560px) {
  .stappenpad { --beeld: 92px; }
  .stap { gap: 1.25rem; }
  .stap__nummer { width: 2.3rem; height: 2.3rem; font-size: .75rem; }
}

/* Combibehandeling */
.combi {
  background: var(--mauve-zacht);
  text-align: center;
}
.combi .container { max-width: 46rem; }
.combi .label-prijs { background: var(--bg); color: var(--mauve-donker); }
.combi__noot {
  margin-top: 2rem;
  font-size: .9rem;
  color: var(--tekst);       /* --tekst-zacht is op dit roze vlak te licht */
}


/* ---------- 8. Over mij, veelgestelde vragen, algemene voorwaarden ---------- */

/* Twee kolommen: tekst en beeld (gebruikt op Over mij en Veelgestelde vragen) */
.duo {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2.5rem, 7vw, 6rem);
  align-items: center;
}
.duo--omgekeerd > :first-child { order: 2; }
.duo__tekst { max-width: 36rem; }

/* Ronde foto */
.rond {
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  width: 100%;
  max-width: 440px;
  justify-self: center;
}
.rond img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 800px) {
  .duo { grid-template-columns: 1fr; }
  .duo--omgekeerd > :first-child { order: 0; }
  .rond { max-width: 300px; }
}

/* Klaproos-kaartje onder de missie */
.klaproos-noot {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: 1.25rem;
  align-items: center;
  margin-top: 1.75rem;
  padding: 1.25rem 1.5rem 1.25rem 1.25rem;
  border-radius: var(--radius);
  background: var(--bg-roze);
  box-shadow: 0 20px 45px -35px rgb(79 60 70 / .35);
}
.klaproos-noot p {
  margin: 0;
  font-family: var(--font-kop);
  font-style: italic;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--tekst);
}
.klaproos-noot__bloem {
  width: 100%;
  height: auto;
  transform-origin: 50% 100%;             /* draaien vanuit de steel */
}
@media (max-width: 560px) {
  .klaproos-noot { grid-template-columns: 1fr; gap: .75rem; padding: 1.25rem; }
  .klaproos-noot__bloem { width: 3.25rem; }
}

/* De bloei: zodra het kaartje in beeld komt (class "is-zichtbaar"),
   groeit de klaproos van onder naar boven open en wiegt daarna zacht. */
.js .klaproos-noot .klaproos-noot__bloem { clip-path: inset(100% 0 0 0); }
.js .klaproos-noot.is-zichtbaar .klaproos-noot__bloem {
  animation:
    bloeien 2.2s var(--ease) .5s forwards,
    wiegen 6s ease-in-out 2.7s infinite alternate;
}
@keyframes bloeien {
  0%   { clip-path: inset(100% 0 0 0); transform: scale(.7) rotate(-12deg); }
  60%  { clip-path: inset(0 0 0 0);    transform: scale(1.06) rotate(3deg); }
  100% { clip-path: inset(0 0 0 0);    transform: scale(1) rotate(0deg); }
}
@keyframes wiegen {
  from { clip-path: inset(0 0 0 0); transform: rotate(-3deg); }
  to   { clip-path: inset(0 0 0 0); transform: rotate(3deg); }
}

/* Over mij: alles een maatje kleiner, zodat de pagina compact blijft */
.pagina-over-mij h1 { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); }
.pagina-over-mij .rond { max-width: 360px; }
.pagina-over-mij .tekstblok h2 { font-size: clamp(1.45rem, 1.25rem + .8vw, 1.9rem); }
.pagina-over-mij .icoon-groot { width: 2.5rem; height: 2.5rem; margin-bottom: .75rem; }
.pagina-over-mij .tekstblok + .tekstblok { margin-top: 2rem; }
.pagina-over-mij .fotoduo { max-width: 420px; justify-self: center; }
.pagina-over-mij .fotoduo .boog:last-child { margin-top: 2.5rem; }
.pagina-over-mij .citaat { padding-block: clamp(2rem, 4vw, 3rem); }
.pagina-over-mij .citaat blockquote { font-size: clamp(1.2rem, 1rem + .9vw, 1.6rem); }

/* Opleiding en praktijk */
.icoon-groot {
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: 1.25rem;
  color: var(--mauve-donker);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tekstblok + .tekstblok { margin-top: clamp(2.5rem, 5vw, 3.5rem); }

/* Twee boogfoto's die een beetje verspringen */
.fotoduo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  align-items: start;
}
.fotoduo .boog { aspect-ratio: 3 / 4; }
.fotoduo .boog:last-child { margin-top: 4rem; }

/* Citaat op mauve */
.citaat {
  background: var(--mauve-diep);
  color: #fff;
  text-align: center;
  padding-block: var(--sectie);
}
.citaat blockquote {
  max-width: 46rem;
  margin: 0 auto;
  font-family: var(--font-kop);
  font-style: italic;
  font-size: clamp(1.35rem, 1.1rem + 1.1vw, 2rem);
  line-height: 1.5;
}
.citaat blockquote::before {
  content: "\201C";                       /* het openingsaanhalingsteken */
  display: block;
  font-size: 3.5em;
  line-height: .6;
  margin-bottom: .2em;
  opacity: .5;
}
.citaat p { margin: 0; }
.citaat cite {
  display: block;
  margin-top: 1.5rem;
  font-family: var(--font-tekst);
  font-style: normal;
  font-size: .8rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  opacity: .85;
}

/* ---- Veelgestelde vragen ---- */
.vragen-nav {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: 2rem;
  padding: 0;
  list-style: none;
}
.vragen-nav a {
  display: inline-block;
  padding: .55em 1.2em;
  border: 1px solid rgb(138 95 120 / .35);
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 400;
  text-decoration: none;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.vragen-nav a:hover { background: var(--mauve-donker); color: #fff; }

.vragen { max-width: 52rem; }
.vragen-groep + .vragen-groep { margin-top: clamp(3rem, 6vw, 4.5rem); }
.vragen-groep h2 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem); }

/* Uitklapvraag. <details> en <summary> zijn HTML-elementen die zelf al
   open en dicht kunnen: daar is geen JavaScript voor nodig. */
.vraag { border-bottom: 1px solid rgb(79 60 70 / .14); }
.vraag:first-of-type { border-top: 1px solid rgb(79 60 70 / .14); }
.vraag summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding: 1.3rem 0;
  list-style: none;                       /* geen standaard driehoekje */
  cursor: pointer;
  font-family: var(--font-kop);
  font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem);
  line-height: 1.4;
  color: var(--mauve-donker);
  transition: color .3s var(--ease);
}
.vraag summary::-webkit-details-marker { display: none; }
.vraag summary:hover { color: var(--tekst); }

/* Plusje dat een minnetje wordt */
.vraag summary::after {
  content: "";
  flex-shrink: 0;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background:
    linear-gradient(currentColor, currentColor) center / 11px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 11px no-repeat,
    var(--mauve-zacht);
  transition: transform .45s var(--ease), background-size .45s var(--ease);
}
.vraag[open] summary::after {
  transform: rotate(180deg);
  background-size: 11px 1.5px, 1.5px 0, auto;
}

.vraag__antwoord { padding: 0 3.5rem 1.4rem 0; }
.vraag__antwoord p:last-child { margin-bottom: 0; }

/* Soepel open- en dichtschuiven. Werkt in nieuwe browsers (Chrome, Edge);
   in andere browsers springt het antwoord gewoon open. */
:root { interpolate-size: allow-keywords; }
.vraag::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size .5s var(--ease), content-visibility .5s allow-discrete;
}
.vraag[open]::details-content { block-size: auto; }

.vragen-contact {
  max-width: 52rem;
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  border-radius: var(--radius);
  background: var(--mauve-zacht);
}
.vragen-contact h2 { font-size: clamp(1.5rem, 1.3rem + .8vw, 2rem); margin-bottom: .5rem; }
.vragen-contact .kaart__links { margin-top: 1rem; font-size: .95rem; }

@media (max-width: 560px) {
  .vraag__antwoord { padding-right: 0; }
}

/* ---- Algemene voorwaarden ---- */
.voorwaarden {
  display: grid;
  grid-template-columns: 15rem minmax(0, 46rem);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
/* Inhoudsopgave die blijft staan tijdens het lezen */
.voorwaarden__inhoud {
  position: sticky;
  top: calc(var(--header-h) + 1.5rem);
  font-size: .85rem;
}
.voorwaarden__inhoud ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.voorwaarden__inhoud a { color: var(--tekst); text-decoration: none; }
.voorwaarden__inhoud a:hover { color: var(--mauve-donker); text-decoration: underline; }

.artikel + .artikel { margin-top: 2.25rem; }
.artikel h2 {
  font-size: clamp(1.25rem, 1.15rem + .4vw, 1.5rem);
  margin-bottom: .75rem;
}
/* Genummerde regels met het nummer in een eigen kolom */
.artikel p {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  margin-bottom: .6rem;
}
.artikel p span:first-child { color: var(--tekst-zacht); font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
  .voorwaarden { grid-template-columns: 1fr; }
  .voorwaarden__inhoud { position: static; }
  .voorwaarden__inhoud ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ---------- 9. Animaties ---------- */
/* Elementen met class "reveal" faden rustig in zodra ze in beeld komen.
   Alleen als JavaScript werkt (class "js" op <html>), anders blijft alles
   gewoon zichtbaar. */
.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
  transition-delay: var(--vertraging, 0s);
}
.js .reveal.is-zichtbaar { opacity: 1; transform: none; }

/* Wie in de instellingen van zijn apparaat "minder beweging" heeft gekozen,
   krijgt geen animaties: alles staat er meteen. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  /* Geen inzoomende foto's bij hover */
  .stap:hover .stap__foto img,
  .behandeling__foto:hover img { transform: none; }
  /* Stappenpad: lijn meteen helemaal, alle stappen actief, geen ademen */
  .stappenpad { --voortgang: 1 !important; }
  .js .stap:not(.is-actief) .stap__foto { opacity: 1; transform: none; filter: none; }
  .js .stap:not(.is-actief) .stap__ring { stroke-dashoffset: 0; }
  .js .stap:not(.is-actief) .stap__nummer { opacity: 1; transform: none; }
  .js .stap .stap__adem { opacity: 1; animation: none; }
  .stap:hover .stap__adem { scale: 1; }
  /* Klaproos meteen in bloei, zonder wiegen */
  .js .klaproos-noot .klaproos-noot__bloem { clip-path: none; animation: none; }
  .js .stap:not(.is-actief) .stap__tekst { opacity: 1; transform: none; }
}