/* ==========================================================================
   Reiki by Daniëlle · site styles
   Basis + componenten, 1-op-1 overgenomen uit het designsysteem.
   ========================================================================== */

/* --------------------------------------------------------------- 1. Basis */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-light);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text-heading);
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}

p { margin: 0; }

a {
  color: var(--text-link);
  text-decoration: none;
  border-bottom: 1px solid var(--border-hairline);
  transition: color var(--dur-fast) var(--ease-calm),
              border-color var(--dur-fast) var(--ease-calm);
}

a:hover { color: var(--text-link-hover); border-color: currentColor; }

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

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

/* Ankers vrijhouden onder de vaste header */
section[id], footer[id] { scroll-margin-top: var(--header-h); }

.u-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Skip-link voor toetsenbordgebruikers */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--gutter-mobile);
  z-index: 100;
  padding: 10px 18px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--action-bg);
  color: var(--action-text);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  transition: top var(--dur-fast) var(--ease-calm);
}

.skip-link:focus { top: 12px; color: var(--action-text); }

/* -------------------------------------------------------------- 2. Iconen */

.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  color: currentColor;
}

.icon svg { width: 100%; height: 100%; display: block; }

/* ------------------------------------------------------------- 3. Knoppen */

.btn {
  display: inline-flex;
  width: auto;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  letter-spacing: 0.02em;
  line-height: 1.2;
  border-radius: var(--radius-pill);
  cursor: pointer;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background var(--dur-fast) var(--ease-calm),
              box-shadow var(--dur-fast) var(--ease-calm),
              transform var(--dur-fast) var(--ease-calm);
}

.btn:active:not([disabled]) { transform: translateY(var(--press-shift)); }
.btn[disabled] { cursor: not-allowed; opacity: .45; }
.btn--block { display: flex; width: 100%; }

/* Maten */
.btn--sm { padding: 9px 14px;  font-size: var(--fs-small); }
.btn--md { padding: 13px 20px; font-size: var(--fs-body); }
.btn--lg { padding: 16px 24px; font-size: var(--fs-lead); }

/* Varianten. Roest is gereserveerd voor boekingsacties. */
.btn--primary {
  background: var(--action-bg);
  color: var(--action-text);
  box-shadow: var(--shadow-action);
}
.btn--primary:hover:not([disabled]) { background: var(--action-bg-hover); color: var(--action-text); }

.btn--secondary {
  background: transparent;
  color: var(--olive-600);
  border-color: var(--border-strong);
  box-shadow: none;
}
.btn--secondary:hover:not([disabled]) { background: rgba(125, 114, 84, .08); color: var(--olive-600); }

.btn--quiet {
  background: var(--surface-card);
  color: var(--text-heading);
  border-color: var(--border-card);
  box-shadow: var(--shadow-soft);
}
.btn--quiet:hover:not([disabled]) { box-shadow: var(--shadow-card); color: var(--text-heading); }

.btn--on-inverse {
  background: var(--cream-50);
  color: var(--olive-700);
  box-shadow: none;
}
.btn--on-inverse:hover:not([disabled]) { box-shadow: var(--shadow-card); color: var(--olive-700); }

.btn--link {
  background: transparent;
  color: var(--text-link);
  padding: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--border-hairline);
  box-shadow: none;
}
.btn--link:hover:not([disabled]) { color: var(--text-link-hover); border-color: currentColor; }

/* -------------------------------------------------------------- 4. Badges */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  border: 1px solid transparent;
  align-self: flex-start;
}

.badge--offer      { background: var(--surface-offer); color: var(--text-on-offer); }
.badge--olive      { background: rgba(125, 114, 84, .12); color: var(--olive-600); }
.badge--outline    { background: transparent; color: var(--olive-600); border-color: var(--border-hairline); }
.badge--on-inverse { background: rgba(245, 239, 231, .16); color: var(--cream-50); border-color: var(--border-on-inverse); }

/* Eyebrow-pil op een foto */
.badge--on-photo {
  background: rgba(245, 239, 231, .16);
  border-color: rgba(245, 239, 231, .35);
  color: inherit;
}

/* -------------------------------------------------------------- 5. Header */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 40;
}

.announcement {
  background: var(--surface-offer);
  color: var(--text-on-offer);
  text-align: center;
  padding: 8px var(--gutter-mobile);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  letter-spacing: 0.03em;
}

.announcement__smal { display: none; }

.site-header__bar {
  background: rgba(236, 228, 217, .9);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-card);
}

.site-header__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 8px var(--gutter-mobile);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-4);
}

.site-nav {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  justify-self: start;
}

.site-nav__link,
.site-drawer__link {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  letter-spacing: 0.04em;
  color: var(--text-heading);
  text-decoration: none;
  border: 0;
  padding: 6px 2px;
  white-space: nowrap;
}

/* De balk bovenaan mag ingetogen blijven. Kleinere letters houden de rij kort,
   zodat die netjes tegen de linkerrand blijft en het logo er rustig naast in
   het midden staat. In het uitklapmenu op een telefoon blijven de letters juist
   groot: daar is het een lijst om aan te tikken, geen randversiering. */
.site-nav__link {
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.06em;
}

.site-nav__link:hover,
.site-drawer__link:hover { color: var(--olive-600); }

.site-header__logo {
  border: 0;
  display: flex;
  justify-content: center;
  justify-self: center;
}

.site-header__logo img { height: 64px; width: auto; }

.site-header__cta { justify-self: end; }

.site-header__toggle {
  display: none;
  justify-self: start;
  width: 44px; height: 44px;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--text-heading);
  place-items: center;
}

.site-drawer {
  display: none;
  flex-direction: column;
  padding: var(--space-2) var(--gutter-mobile) var(--space-5);
  gap: var(--space-2);
  border-top: 1px solid var(--border-card);
}

.site-drawer.is-open { display: flex; }

.site-drawer__link { font-size: var(--fs-body); padding: 10px 2px; }
.site-drawer .btn { margin-top: var(--space-2); }

/* Smalle variant, spiegelt het breekpunt van de ResizeObserver in de component */
@media (max-width: 759px) {
  .site-nav { display: none; }
  .site-header__toggle { display: grid; }
  .site-header__logo img { height: 52px; }
  .site-header__cta .btn__label--wide { display: none; }

  /* Op een telefoon blijft de mededeling op één regel staan. De korte
     schrijfwijze past bij 14 punten op een scherm vanaf 364 punten breed; op
     alles wat smaller is krimpen de letters netjes mee, zodat er nooit iets
     afbreekt of over de rand valt. Wat minder ruimte langs de zijkanten geeft
     de zin daarbij net iets meer lucht. */
  .announcement {
    padding: 8px 12px;
    white-space: nowrap;
    font-size: min(3.85vw, var(--fs-small));
  }

  .announcement__breed { display: none; }
  .announcement__smal { display: inline; }

  /* De balk is nu één regel lager, dus ankers hoeven minder ver omlaag vrij
     te blijven. Dit getal is de hoogte van aankondiging plus menubalk samen. */
  :root { --header-h: 117px; }
}

@media (min-width: 760px) {
  .site-header__cta .btn__label--narrow { display: none; }
}

/* Net boven het breekpunt is de balk op zijn krapst. Duwt de menurij daar tegen
   de middelste kolom aan, dan schuift het logo een paar tellen naar rechts en
   staat het zichtbaar scheef. Iets minder ruimte tussen de woorden houdt de rij
   binnen zijn eigen helft, zodat het logo precies in het midden blijft. */
@media (min-width: 760px) and (max-width: 869px) {
  .site-nav { gap: 10px; }
  .site-nav__link { letter-spacing: 0.03em; }
}

/* ---------------------------------------------------------------- 6. Hero */

.hero {
  position: relative;
  min-height: min(78vh, 680px);
  display: flex;
  align-items: flex-end;
  color: var(--cream-50);
  overflow: hidden;
}

.hero__media { position: absolute; inset: 0; }

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(42, 44, 43, .30) 0%,
    rgba(42, 44, 43, .55) 45%,
    rgba(42, 44, 43, .86) 100%);
  pointer-events: none;
}

.hero__body {
  position: relative;
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: calc(var(--header-h) + var(--space-6)) var(--gutter-mobile) var(--space-7);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: flex-start;
  pointer-events: none;
}

.hero__body > * { pointer-events: auto; }

.hero__title {
  font-family: var(--font-display);
  font-size: clamp(40px, 8vw, 64px);
  font-weight: var(--fw-medium);
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  margin: 0;
  color: var(--cream-50);
  max-width: 16ch;
  text-shadow: 0 2px 18px rgba(26, 24, 20, .55);
}

.hero__lead {
  margin: 0;
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--cream-100);
  max-width: 44ch;
  text-shadow: 0 1px 12px rgba(26, 24, 20, .5);
}

.hero__script {
  font-family: var(--font-serif-soft);
  font-size: 20px;
  font-style: italic;
  line-height: 1.45;
  margin: 0;
  color: var(--cream-100);
  max-width: 36ch;
  text-shadow: 0 1px 12px rgba(26, 24, 20, .5);
}

/* ------------------------------------------------------------ 7. Secties */

.section { padding: clamp(56px, 7vw, 80px) var(--gutter-mobile); }
.section--narrow { max-width: var(--content-max); margin: 0 auto; display: flex; flex-direction: column; }
.section--wide   { max-width: var(--page-max);    margin: 0 auto; display: flex; flex-direction: column; }
.section--tall   { padding: clamp(56px, 8vw, 96px) var(--gutter-mobile); }

.section__title {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
  margin: 0;
  color: var(--text-heading);
  max-width: 22ch;
}

.script-accent {
  font-family: var(--font-script);
  font-size: var(--fs-script);
  line-height: var(--lh-script);
  margin: 0;
  color: var(--olive-500);
  font-weight: var(--fw-regular);
}

.measure { max-width: var(--measure-body); }

/* Herken je dit? */
.recognition { gap: var(--space-5); }
.recognition__list { display: grid; gap: var(--space-4); }

.recognition__line {
  margin: 0;
  font-family: var(--font-serif-soft);
  font-size: 20px;
  font-style: italic;
  line-height: 1.5;
  color: var(--text-heading);
}

.recognition__close { margin: 0; font-weight: var(--fw-medium); color: var(--text-heading); }

/* Wat is Reiki */
.intro { gap: var(--space-3); }

/* Hoe het werkt */
.how { gap: var(--space-8); }

.how__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-7);
  align-items: start;
}

.how__col { display: flex; flex-direction: column; gap: var(--space-3); }
.how__aside { display: flex; flex-direction: column; gap: var(--space-5); }
.how__aside h3 { font-size: var(--fs-h3); }

.benefits { display: grid; gap: var(--space-4); padding: 0; margin: 0; }

.benefit {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  list-style: none;
}

.benefit__icon {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  flex: 0 0 auto;
  border-radius: var(--radius-circle);
  background: rgba(125, 114, 84, .10);
  color: var(--icon-accent);
}

.benefit__text {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-body);
  padding-top: 6px;
}

.benefit__text strong { font-weight: var(--fw-medium); color: var(--text-heading); }

/* Uitgelijnd kader, zoals het "Voor wie?"-paneel op de flyer */
.frame-card {
  border: var(--border-frame) solid var(--border-hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: var(--content-max);
  margin: 0 auto;
}

.frame-card h3 {
  font-family: var(--font-script);
  font-size: var(--fs-script);
  font-weight: var(--fw-regular);
  margin: 0;
  color: var(--olive-500);
  letter-spacing: var(--tracking-normal);
}

/* --------------------------------------------------------- 8. Openingsactie */

.offer { background: var(--surface-page-alt); }
.offer__inner { gap: var(--space-6); }
.offer__head { display: flex; flex-direction: column; gap: var(--space-3); }
.offer__deadline { margin: 0; font-size: var(--fs-small); color: var(--text-muted); }

.offer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-5);
  align-items: stretch;
}

.offer__media {
  position: relative;
  min-height: 380px;
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.offer__media img { width: 100%; height: 100%; object-fit: cover; }

.offer__cards { display: grid; gap: var(--space-5); align-content: start; }
.offer__cta { align-self: center; }

.price-card {
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  border: 1px solid transparent;
}

.price-card--offer {
  background: var(--surface-offer);
  color: var(--text-on-offer);
  box-shadow: var(--shadow-lift);
}

.price-card--soft {
  background: var(--surface-card);
  color: var(--text-body);
  border-color: var(--border-card);
  box-shadow: var(--shadow-card);
}

.price-card__head { display: flex; flex-direction: column; gap: var(--space-1); }

.price-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  margin: 0;
  color: inherit;
}

.price-card--soft .price-card__title { color: var(--text-heading); }

.price-card__subtitle { font-size: var(--fs-small); opacity: .85; }
.price-card--soft .price-card__subtitle { opacity: 1; color: var(--text-muted); }

.price-card__price-row { display: flex; align-items: baseline; gap: var(--space-3); }

.price-card__price {
  font-family: var(--font-display);
  font-size: var(--fs-display-2);
  line-height: 1;
  color: inherit;
}

.price-card--soft .price-card__price { color: var(--rust-600); }

.price-card__was { font-size: var(--fs-body); opacity: .72; text-decoration: line-through; }
.price-card__note { margin: 0; font-size: var(--fs-body); opacity: .9; }
.price-card--soft .price-card__note { opacity: 1; }
.price-card__footnote { margin: 0; font-size: var(--fs-small); opacity: .78; }

/* --------------------------------------------- 8b. Tarieven en pakketten */

/* De kaarten zijn keuzerondjes in een label. Het rondje zelf is weggehaald uit
   beeld, maar staat er nog wel: daardoor werkt tab en werken de pijltjes, en
   krijg je een focusring op de kaart zodra je met het toetsenbord langsloopt.
   Alles wat je ziet komt uit `:checked` en `:has()`, dus zonder JavaScript
   werkt kiezen gewoon. */

.rates { gap: var(--space-6); }
.rates__head { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); text-align: center; }
.rates__head .badge { align-self: center; }
.rates__intro { margin: 0; max-width: var(--measure-body); color: var(--text-muted); }

/* Een fieldset heeft eigen randen en ruimte die we hier niet willen. Het
   raster staat er los in, want fieldset zelf als grid geeft in oudere Safari
   rare uitkomsten. */
.rates__fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }

.rates__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: stretch;
}

@media (min-width: 760px) {
  .rates__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- De kaart --- */

.tarief {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-xl);
  background: var(--surface-card);
  border: var(--border-frame) solid var(--border-card);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: border-color var(--dur-base) var(--ease-calm),
              box-shadow var(--dur-base) var(--ease-calm),
              transform var(--dur-base) var(--ease-out-soft);
}

.tarief:hover { border-color: var(--olive-300); box-shadow: var(--shadow-lift); }

/* Gekozen: olijfrand en de kaart komt een haartje omhoog. Geen harde kleur of
   schaduwsprong, dat past niet bij de rust van de rest van de pagina. */
.tarief:has(.tarief__radio:checked) {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-lift);
  transform: translateY(-2px);
}

.tarief:has(.tarief__radio:focus-visible) {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

/* Het echte rondje blijft bestaan voor toetsenbord en schermlezers. */
.tarief__radio {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  margin: 0;
  pointer-events: none;
}

/* --- Het vinkje rechtsboven --- */

.tarief__check {
  position: absolute;
  top: -14px;
  right: -12px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-circle);
  background: var(--surface-inverse);
  color: var(--icon-on-inverse);
  box-shadow: var(--shadow-soft);
  opacity: 0;
  transform: scale(.4);
  transition: opacity var(--dur-fast) var(--ease-calm),
              transform var(--dur-base) var(--ease-out-soft);
}

.tarief__check svg { width: 17px; height: 17px; display: block; }

.tarief__radio:checked ~ .tarief__check { opacity: 1; transform: scale(1); }

/* --- Bovenkant van de kaart --- */

.tarief__top {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  flex: 1 0 auto;
}

.tarief__vlag {
  align-self: flex-start;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: var(--cream-200);
  color: var(--olive-700);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

.tarief:has(.tarief__radio:checked) .tarief__vlag {
  background: var(--surface-inverse);
  color: var(--text-on-inverse);
}

.tarief__naam {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  color: var(--text-heading);
}

.tarief__ondertitel {
  margin-top: calc(var(--space-3) * -1 + var(--space-1));
  font-size: var(--fs-small);
  color: var(--text-muted);
}

.tarief__uitleg { font-size: var(--fs-body); color: var(--text-body); }

.tarief__prijsregel { display: flex; align-items: baseline; gap: var(--space-3); }

.tarief__prijs {
  font-family: var(--font-display);
  font-size: var(--fs-display-2);
  line-height: 1;
  color: var(--rust-600);
}

.tarief__was { font-size: var(--fs-body); color: var(--text-muted); text-decoration: line-through; }

/* Wat je bespaart, in het olijf van de huisstijl. Geen signaalgroen. */
.tarief__voordeel {
  margin-top: calc(var(--space-3) * -1 + var(--space-1));
  font-size: var(--fs-small);
  color: var(--olive-600);
}

/* --- De knop in de kaart --- */
/* Dit is met opzet geen button. De hele kaart is al één klikvlak; een knop
   erbovenop zou een tweede stopplaats voor het toetsenbord opleveren die
   precies hetzelfde doet. */

.tarief__knop {
  margin-top: auto;
  display: grid;
  place-items: center;
  padding: 11px 20px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-hairline);
  background: transparent;
  color: var(--text-heading);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  transition: background var(--dur-base) var(--ease-calm),
              border-color var(--dur-base) var(--ease-calm),
              color var(--dur-base) var(--ease-calm);
}

.tarief:hover .tarief__knop { border-color: var(--olive-400); background: var(--cream-50); }

.tarief__knop-uit,
.tarief__knop-aan {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  transition: opacity var(--dur-fast) var(--ease-calm);
}

.tarief__knop-aan { opacity: 0; }
.tarief__knop-aan .icon { width: 15px; height: 15px; }

.tarief__radio:checked ~ .tarief__top .tarief__knop {
  background: var(--action-bg);
  border-color: var(--action-bg);
  color: var(--action-text);
}

.tarief:has(.tarief__radio:checked):hover .tarief__knop {
  background: var(--action-bg-hover);
  border-color: var(--action-bg-hover);
}

.tarief__radio:checked ~ .tarief__top .tarief__knop-uit { opacity: 0; }
.tarief__radio:checked ~ .tarief__top .tarief__knop-aan { opacity: 1; }

/* --- De vergelijkingsregels --- */

.tarief__regels {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-6);
  border-top: 1px solid var(--border-card);
}

.tarief__regel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: var(--fs-small);
}

.tarief__label { display: flex; align-items: center; gap: var(--space-2); color: var(--text-muted); }
.tarief__label .icon { width: 16px; height: 16px; color: var(--icon-default); }
.tarief__waarde { color: var(--text-heading); font-weight: var(--fw-medium); text-align: right; }

/* --- De balk met je keuze --- */

.tarief-balk {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--surface-card-soft);
  border: 1px solid var(--border-card);
  box-shadow: var(--shadow-soft);
  text-align: center;
}

.tarief-balk__tekst { margin: 0; display: flex; flex-direction: column; gap: var(--space-1); }

.tarief-balk__keuze {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  color: var(--text-heading);
}

.tarief-balk__prijs {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: 1;
  color: var(--rust-600);
}

.tarief-balk__extra { font-size: var(--fs-small); color: var(--olive-600); }
.tarief-balk__extra:empty { display: none; }

@media (min-width: 640px) {
  .tarief-balk { flex-direction: row; justify-content: space-between; text-align: left; gap: var(--space-6); }
  .tarief-balk__tekst { align-items: flex-start; }
}

.tarief-balk__cta { flex: 0 0 auto; }

/* --- Afsluiting --- */

.rates__closing { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); text-align: center; }

.rates__closing-line {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  color: var(--text-heading);
}

/* --- Op een telefoon: vier tegels, twee naast twee ---

   Op een breed scherm blijven de kaarten zoals ze zijn: uitgebreid, met de
   uitleg en de vergelijkingsregels erbij. Op een telefoon werkt dat niet, want
   dan wordt het één lange kolom waar je eindeloos langs scrollt. Daar tonen we
   ze als vier compacte tegels in een vierkant.

   Wat op de tegel wegvalt is de uitleg en de vergelijkingsregels. Dat kan,
   want de duur staat al in de ondertitel en op een telefoon leidt een tik
   meteen naar WhatsApp; daar is de vergelijking dus niet meer de vraag.

   De grens ligt op 759px, precies onder de 760px waar het brede raster begint.
   Zo is er geen breedte waarop beide of geen van beide gelden. */

@media (max-width: 759px) {

  .rates__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }

  .tarief__top { padding: var(--space-4) var(--space-3); gap: var(--space-2); }
  .tarief__uitleg,
  .tarief__regels { display: none; }

  .tarief__naam { font-size: var(--fs-h3); }
  .tarief__ondertitel { margin-top: 0; font-size: var(--fs-eyebrow); }
  .tarief__prijsregel { flex-wrap: wrap; gap: var(--space-2); }
  .tarief__prijs { font-size: 1.75rem; }
  .tarief__was { font-size: var(--fs-small); }
  .tarief__voordeel { margin-top: 0; font-size: var(--fs-eyebrow); line-height: 1.4; }

  /* Het strookje moet op één regel blijven. Zou het afbreken, dan wordt die
     kaart een regel hoger dan zijn buurman en staat het stel scheef. Kleiner
     lettertype, minder letterruimte en smallere randen halen de langste tekst
     ruim binnen de kaartbreedte. */
  .tarief__vlag {
    padding: 3px 8px;
    font-size: 0.5625rem;
    letter-spacing: .04em;
    white-space: nowrap;
    max-width: 100%;
  }

  /* Het vinkje stak buiten de kaart. Met twee kaarten naast elkaar botst dat
     tegen de buurman en tegen de rand van het scherm, dus hier zetten we het
     netjes binnen de kaart. */
  .tarief__check { top: 8px; right: 8px; width: 26px; height: 26px; }
  .tarief__check svg { width: 14px; height: 14px; }

  /* De marge blijft op auto staan, net als op een breed scherm. Zo zakt de knop
     naar de onderkant van de kaart en staan de knoppen van twee kaarten naast
     elkaar op dezelfde hoogte, ook als de ene wat meer tekst heeft dan de
     andere. Zette je hier een vaste marge, dan zou de knop van de kortere kaart
     halverwege blijven hangen. De tussenruimte komt van de gap. */
  .tarief__knop { padding: 9px 10px; font-size: var(--fs-small); }

  /* Op een telefoon is er niets "gekozen". Eén tik en je zit al in WhatsApp,
     dus een tegel die alvast aangevinkt staat klopt daar niet: dan lijkt het
     alsof je een keuze gemaakt hebt die je nog niet gemaakt hebt. Alle vier de
     tegels zien er hier dus hetzelfde uit en nodigen alle vier evenveel uit.
     Het keuzerondje blijft er wel gewoon onder zitten voor wie zonder
     JavaScript werkt. */
  .tarief:has(.tarief__radio:checked) {
    border-color: var(--border-card);
    box-shadow: var(--shadow-card);
    transform: none;
  }
  .tarief__radio:checked ~ .tarief__check { opacity: 0; }
  .tarief__radio:checked ~ .tarief__top .tarief__knop {
    background: transparent;
    border-color: var(--border-hairline);
    color: var(--text-heading);
  }
  .tarief__radio:checked ~ .tarief__top .tarief__knop-uit { opacity: 1; }
  .tarief__radio:checked ~ .tarief__top .tarief__knop-aan { opacity: 0; }
  .tarief:has(.tarief__radio:checked) .tarief__vlag { background: var(--cream-200); color: var(--olive-700); }

  /* De balk met je keuze is op een telefoon overbodig geworden: een tik op een
     tegel opent WhatsApp meteen. Zonder JavaScript gebeurt dat niet, en dan is
     de balk juist de enige manier om vanaf hier verder te komen. Vandaar dat
     hij alleen verdwijnt als JavaScript het overneemt. */
  .js .tarief-balk { display: none; }
}

/* ------------------------------------------------------- 9. Over Daniëlle */

.about { gap: var(--space-6); text-align: center; }
.about .badge { align-self: center; }
.about .section__title { max-width: none; }

/* Portret links, verhaal rechts. Onder 820px is daar geen ruimte voor: dan komt
   het portret boven de tekst en staat alles gecentreerd, net als de rest van de
   pagina. De scheidingslijn en de zin over reguliere zorg blijven altijd
   gecentreerd onder deze twee kolommen staan. */
.about__grid {
  display: grid;
  gap: var(--space-6);
  justify-items: center;
  align-items: center;
}

/* Het vlak is 4:5 en de foto ook, dus er valt niets weg. */
.about__portrait {
  margin: 0;
  width: min(320px, 72%);
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

.about__portrait img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* De alinea's staan in een eigen doosje met een kleinere tussenruimte. De
   sectie zelf gebruikt space-6 en dat is tussen lopende tekst te veel. */
.about__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.about__text p { margin: 0; max-width: var(--measure-body); }

@media (min-width: 820px) {
  .about__grid {
    grid-template-columns: 340px minmax(0, 1fr);
    gap: var(--space-7);
    justify-items: start;
  }
  .about__portrait { width: 340px; }
  .about__text { align-items: start; text-align: left; }
  /* Overschrijft `.about .badge` hierboven. Even zwaar, maar deze staat later. */
  .about__text .badge { align-self: start; }
}

.divider {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.divider::before,
.divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-hairline);
}

.divider img { width: 34px; }

.about__disclaimer {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--text-muted);
  max-width: 58ch;
  align-self: center;
}

/* ------------------------------------------------------------- 10. Footer */

.site-footer {
  background: var(--surface-inverse);
  color: var(--text-on-inverse);
}

.site-footer__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--space-8) var(--gutter-mobile);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  align-items: center;
}

.site-footer__logo { width: 118px; }

.site-footer__tagline {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--cream-200);
}

.divider--inverse { align-self: stretch; }
.divider--inverse::before,
.divider--inverse::after { background: var(--border-on-inverse); }
.divider--inverse img { width: 26px; }

/* --- De drie kolommen ---

   Op een telefoon staan ze onder elkaar en gecentreerd, in dezelfde lijn als de
   rest van de voettekst. Vanaf een tablet gaan ze naast elkaar en springt de
   tekst naar links, want een kolom met een kop erboven leest van links naar
   rechts en niet vanuit het midden.

   De middelste kolom krijgt wat minder ruimte dan de buren: dat zijn korte
   koppelingen, terwijl er links een adres en rechts een zin staat. */

.site-footer__kolommen {
  align-self: stretch;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  text-align: center;
}

@media (min-width: 720px) {
  .site-footer__kolommen {
    grid-template-columns: 1fr 0.8fr 1.2fr;
    gap: var(--space-6);
    text-align: left;
  }
}

.footer-kolom {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.footer-kolom__kop {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  color: var(--white);
}

.footer-kolom__lijst {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* De regels in de contactkolom hebben een pictogram ervoor. Gecentreerd op een
   telefoon zou dat pictogram bij elke regel op een andere plek staan, dus daar
   houden we het blok bij elkaar en centreren we het blok in zijn geheel. */
.footer-kolom__lijst .info-row { align-items: flex-start; }
.footer-kolom__lijst .info-row .icon { flex: 0 0 auto; margin-top: 2px; }

@media (max-width: 719px) {
  .footer-kolom__lijst .info-row { justify-content: center; }
}

/* De snelkoppelingen naar de secties. Geen pictogram ervoor: het zijn er zeven
   en een rij herhaalde pijltjes maakt het onrustiger in plaats van
   duidelijker. */
.footer-kolom__lijst--links a {
  color: var(--cream-100);
  font-size: var(--fs-small);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease-calm), border-color var(--dur-fast) var(--ease-calm);
}

.footer-kolom__lijst--links a:hover { color: var(--white); border-bottom-color: currentColor; }
.footer-kolom__lijst--links a:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }

/* De openingstijden: dag links, tijd rechts, met een streepje ruimte ertussen
   dat meegroeit. Zo staan de tijden onder elkaar uitgelijnd. */
.footer-tijden li {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  justify-content: space-between;
  font-size: var(--fs-small);
  color: var(--text-on-inverse);
}

.footer-tijden__dag { color: var(--cream-200); }
.footer-tijden__uur { white-space: nowrap; }

/* Op een telefoon staat de hele voettekst gecentreerd. Dag en tijd tot aan de
   twee randen uit elkaar trekken oogt daar juist rommelig, dus zetten we ze
   tegen elkaar aan in het midden. Deze regel moet ná de regel hierboven staan:
   een mediavraag maakt een regel niet zwaarder, dus zou space-between anders
   winnen omdat het later in het bestand komt. */
@media (max-width: 719px) {
  .footer-tijden li { justify-content: center; gap: var(--space-1) var(--space-2); }
  .footer-tijden__dag::after { content: ":"; }
}

.footer-kolom__noot {
  margin: 0;
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--cream-200);
}

/* --- De ronde snelkoppelingen --- */

.footer-sociaal {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
}

@media (min-width: 720px) {
  .footer-sociaal { justify-content: flex-start; }
}

.footer-sociaal__knop {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-circle);
  border: 1px solid var(--border-on-inverse);
  display: grid;
  place-items: center;
  color: var(--cream-100);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-calm),
              border-color var(--dur-fast) var(--ease-calm),
              color var(--dur-fast) var(--ease-calm);
}

.footer-sociaal__knop .icon { width: 19px; height: 19px; }

.footer-sociaal__knop:hover {
  background: rgba(255, 255, 255, .1);
  border-color: var(--cream-100);
  color: var(--white);
}

.footer-sociaal__knop:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }

.info-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--text-on-inverse);
  font-size: var(--fs-small);
  text-decoration: none;
  border: 0;
}

a.info-row:hover { color: var(--white); }
a.info-row:hover .icon { color: var(--white); }
.info-row .icon { color: var(--icon-on-inverse); transition: color var(--dur-fast) var(--ease-calm); }

.site-footer__closing {
  font-family: var(--font-script);
  font-size: var(--fs-script);
  text-align: center;
  margin: 0;
  color: var(--cream-100);
}

.site-footer__legal {
  font-size: var(--fs-eyebrow);
  color: var(--cream-200);
  opacity: .8;
  text-align: center;
  margin: 0;
}

/* ------------------------------------- 10b. Uitklapblokken (FAQ en verdieping)
   Gebouwd op <details>/<summary>, dus het open- en dichtklappen werkt ook
   zonder JavaScript. De chevron draait mee via [open].                        */

.faq,
.deepen__inner { gap: var(--space-4); }

.accordion {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.acc {
  background: var(--surface-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--dur-fast) var(--ease-calm);
}

.acc[open] { border-color: var(--olive-300); }
.acc:hover { border-color: var(--olive-400); }

.acc__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--text-heading);
  cursor: pointer;
  list-style: none;
  min-height: 44px;
}

/* Het standaard driehoekje van de browser weg */
.acc__q::-webkit-details-marker { display: none; }
.acc__q::marker { content: ""; }

.acc__q:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
}

.acc__icon {
  flex: none;
  width: 20px; height: 20px;
  color: var(--icon-default);
  transition: transform var(--dur-base) var(--ease-calm);
}

.acc__icon svg { width: 100%; height: 100%; display: block; }

.acc[open] .acc__icon { transform: rotate(180deg); }

.acc__a {
  padding: 0 var(--space-5) var(--space-5);
  color: var(--text-body);
  font-weight: var(--fw-light);
  line-height: var(--lh-body);
}

.acc__a p { margin: 0 0 var(--space-3); max-width: var(--measure-body); }
.acc__a p:last-child { margin-bottom: 0; }


/* --- 10c. Variant: de verdieping
   De FAQ hierboven is een rij losse kaartjes, dingen die je even opzoekt.
   De verdieping is bedoeld om in te lezen, dus geen vakjes maar één doorlopend
   blok op een eigen achtergrond, met alleen haarlijnen tussen de onderdelen. */

.deepen { background: var(--cream-200); }

/* Ruimer dan de FAQ (die staat op --content-max, 660px). De lopende tekst
   blijft leesbaar doordat de alinea's zelf op --measure-body staan.          */
.deepen__inner { max-width: 880px; }

.deepen .accordion { gap: 0; }

.deepen .acc {
  background: none;
  border: 0;
  border-top: 1px solid var(--border-hairline);
  border-radius: 0;
  overflow: visible;
}

.deepen .acc:last-child { border-bottom: 1px solid var(--border-hairline); }

/* De kaart-hovers van de FAQ zouden hier alleen de scheidingslijn verkleuren,
   wat er uitziet als een fout. De hover zit daarom op de tekst en de chevron. */
.deepen .acc:hover,
.deepen .acc[open] { border-color: var(--border-hairline); }

/* Geen kader meer, dus de tekst mag tot aan de rand van de kolom lopen. */
.deepen .acc__q { padding: var(--space-4) 0; }
.deepen .acc__a { padding: 0 0 var(--space-5); }

.deepen .acc__q:hover .acc__icon { color: var(--text-heading); }
.deepen .acc__q:focus-visible { outline-offset: 2px; }


/* --------------------------------------------------- 11. Zwevende knoppen */

/* Twee ronde knoppen onder elkaar in de rechterhoek. WhatsApp staat onderaan,
   want dat is de knop die het vaakst gebruikt wordt en die valt het dichtst
   bij je duim. */

.fab-stack {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.fab {
  width: 60px; height: 60px;
  border-radius: var(--radius-circle);
  color: var(--white);
  border: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-calm),
              transform var(--dur-fast) var(--ease-calm);
}

.fab:hover { transform: translateY(-2px); color: var(--white); }
.fab .icon { width: 30px; height: 30px; }

.fab--whatsapp { background: var(--whatsapp); box-shadow: 0 6px 18px rgba(37, 211, 102, .34), var(--shadow-lift); }
.fab--whatsapp:hover { background: var(--whatsapp-dark); }

/* De belknop draagt de kleur van de praktijk, zodat hij naast het groen van
   WhatsApp meteen als iets anders leest. */
.fab--phone { background: var(--action-bg); box-shadow: var(--shadow-action), var(--shadow-lift); }
.fab--phone:hover { background: var(--action-bg-hover); }
.fab--phone .icon { width: 27px; height: 27px; }

.fab:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }

/* Bellen is iets van een telefoon. Op een groter scherm staat het nummer in de
   voettekst en zou de knop alleen maar in de weg zitten. */
@media (min-width: 768px) { .fab--phone { display: none; } }

/* Twee knoppen boven elkaar nemen een flinke hap uit de rechterkolom, en daar
   staan op een telefoon net de tarieftegels. Iets kleiner maken scheelt
   genoeg. Deze regels staan bewust hier en niet bij de tegels: een mediavraag
   maakt een regel niet zwaarder, dus zou het blok hierboven er anders
   overheen gaan. */
@media (max-width: 759px) {
  .fab-stack { gap: var(--space-2); }
  .fab { width: 52px; height: 52px; }
  .fab .icon { width: 26px; height: 26px; }
  .fab--phone .icon { width: 24px; height: 24px; }
}

/* ------------------------------------------------- 12. Boekingssheet */

.sheet {
  position: fixed;
  inset: 0;
  background: var(--surface-photo-scrim);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 60;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-calm),
              visibility var(--dur-base) var(--ease-calm);
}

.sheet.is-open { opacity: 1; visibility: visible; }

.sheet__panel {
  width: 100%;
  max-width: 430px;
  background: var(--surface-page);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  padding: var(--space-6) var(--gutter-mobile) var(--space-7);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  box-shadow: var(--shadow-lift);
  max-height: 92vh;
  overflow-y: auto;
  transform: translateY(24px);
  transition: transform var(--dur-base) var(--ease-out-soft);
}

.sheet.is-open .sheet__panel { transform: translateY(0); }

/* [hidden] moet winnen van de display-regels hieronder */
.sheet[hidden],
.sheet__form[hidden],
.sheet__done[hidden],
.field__hint[hidden],
.field__error[hidden] { display: none; }

.sheet__form,
.sheet__done {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.sheet__title { font-family: var(--font-display); font-size: var(--fs-h2); margin: 0; }
.sheet__intro { font-size: var(--fs-small); margin: 0; }

.field { display: flex; flex-direction: column; gap: var(--space-2); }

.field__label {
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  letter-spacing: 0.02em;
  color: var(--text-heading);
}

.field__hint  { font-size: var(--fs-small); color: var(--text-muted); }
.field__error { font-size: var(--fs-small); color: var(--rust-700); }

.field__label--sub {
  font-weight: var(--fw-regular);
  color: var(--text-muted);
  margin-top: var(--space-1);
}

.field__label .icon--inline {
  width: 16px; height: 16px;
  vertical-align: -3px;
  margin-right: 6px;
  color: var(--icon-accent);
}

/* ------------------------------------------------ Suggestieknoppen (chips) */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.chip {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: var(--fw-regular);
  line-height: 1.2;
  color: var(--text-body);
  background: var(--surface-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-pill);
  padding: 9px 14px;
  min-height: 38px;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-calm),
              border-color var(--dur-fast) var(--ease-calm),
              color var(--dur-fast) var(--ease-calm);
}

.chip:hover { border-color: var(--olive-400); background: var(--cream-50); }

.chip.is-on {
  background: var(--action-bg);
  border-color: var(--action-bg);
  color: var(--action-text);
}

.chip.is-on:hover { background: var(--action-bg-hover); border-color: var(--action-bg-hover); }

.chip--wide { flex-basis: 100%; }

.chips--times .chip { min-width: 72px; text-align: center; }

/* ------------------------------------------------------------- Kalender */

.cal {
  background: var(--surface-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
}

.cal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.cal__month {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-regular);
  color: var(--text-heading);
  text-transform: capitalize;
}

.cal__nav {
  width: 36px; height: 36px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-circle);
  color: var(--icon-default);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-calm),
              border-color var(--dur-fast) var(--ease-calm);
}

.cal__nav .icon { width: 18px; height: 18px; }
.cal__nav:hover:not(:disabled) { background: var(--cream-50); border-color: var(--olive-400); }
.cal__nav:disabled { opacity: .3; cursor: not-allowed; }

.cal__weekdays,
.cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.cal__weekdays {
  margin-bottom: var(--space-1);
}

.cal__weekdays span {
  text-align: center;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
  padding: var(--space-1) 0;
}

.cal__day {
  aspect-ratio: 1;
  min-height: 38px;
  display: grid;
  place-items: center;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  color: var(--text-body);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-calm),
              color var(--dur-fast) var(--ease-calm);
}

.cal__day--empty { cursor: default; }

.cal__day:hover:not(:disabled):not(.is-selected) {
  background: var(--cream-100);
}

.cal__day:disabled {
  color: var(--cream-300);
  cursor: not-allowed;
}

.cal__day.is-today { border-color: var(--olive-300); }

.cal__day.is-selected {
  background: var(--action-bg);
  border-color: var(--action-bg);
  color: var(--action-text);
  font-weight: var(--fw-medium);
}

.input {
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-light);
  color: var(--text-heading);
  background: var(--surface-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color var(--dur-fast) var(--ease-calm),
              box-shadow var(--dur-fast) var(--ease-calm);
}

textarea.input { min-height: 120px; resize: vertical; }

.input:focus { border-color: var(--olive-500); box-shadow: 0 0 0 3px var(--action-ring); }
.input[aria-invalid="true"] { border-color: var(--rust-600); }
.input::placeholder { color: var(--text-muted); }

.checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  cursor: pointer;
  font-size: var(--fs-small);
  color: var(--text-body);
  min-height: 44px;
}

.checkbox input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
}

.checkbox__box {
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  flex: 0 0 auto;
  margin-top: 2px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-hairline);
  background: var(--surface-card);
  color: var(--cream-50);
  transition: background var(--dur-fast) var(--ease-calm),
              border-color var(--dur-fast) var(--ease-calm);
}

.checkbox__box .icon { width: 14px; height: 14px; opacity: 0; }
.checkbox input:checked + .checkbox__box { background: var(--olive-500); border-color: var(--olive-500); }
.checkbox input:checked + .checkbox__box .icon { opacity: 1; }
.checkbox input:focus-visible + .checkbox__box { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.checkbox__label { padding-top: 3px; }

.sheet__preview {
  background: var(--surface-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  font-size: var(--fs-small);
  color: var(--text-body);
}

.sheet__link-btn { align-self: center; }

/* ------------------------------------------------ 13. Onthullen bij scroll */

/* Alleen verbergen als JS draait, anders blijft de pagina zonder JS leeg. */
.js .reveal {
  opacity: 0;
  transform: translateY(var(--rise-reveal));
  transition: opacity var(--dur-slow) var(--ease-out-soft),
              transform var(--dur-slow) var(--ease-out-soft);
}

.js .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; }
}

/* ------------------------------------------------------- 13b. Tekstpagina's */

/* De voorwaarden en de privacyverklaring zijn leespagina's. Ze delen de kleuren
   en de lettertypes van de site, maar houden verder alles weg wat afleidt: geen
   foto's, geen zwevende knoppen, geen boekingssheet. Alleen een smalle kolom
   tekst die prettig leest, met bovenaan een weg terug. */

.page-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-bottom: var(--hairline) solid var(--border-hairline);
  background: var(--surface-page);
}

.page-top__logo { border: 0; display: flex; }
.page-top__logo img { width: 62px; height: 62px; display: block; }

.page-top__back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--text-body);
  text-decoration: none;
}
.page-top__back:hover { color: var(--olive-600); }
.page-top__back .icon { width: 16px; height: 16px; }

.prose-page {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-8) var(--space-5) var(--space-9);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.prose-page h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  color: var(--text-heading);
}

.prose-page__meta { margin: 0; font-size: var(--fs-small); color: var(--text-muted); }

/* Een lopende tekst mag zijn eigen ruimte houden, dus hier wél gewone marges
   in plaats van een flex-gap. Dat leest natuurlijker bij kopjes die net wat
   meer lucht boven zich nodig hebben dan eronder. */
.prose { margin-top: var(--space-4); color: var(--text-body); }

.prose h2 {
  margin: var(--space-7) 0 var(--space-3);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  color: var(--text-heading);
}

.prose h2:first-child { margin-top: 0; }

.prose h3 {
  margin: var(--space-5) 0 var(--space-2);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--text-heading);
}

.prose p { margin: 0 0 var(--space-3); max-width: var(--measure-body); }
.prose ul { margin: 0 0 var(--space-3); padding-left: 1.15em; max-width: var(--measure-body); }
.prose li { margin-bottom: var(--space-2); }
.prose li::marker { color: var(--olive-400); }
.prose a { color: var(--text-link); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--text-link-hover); }
.prose strong { font-weight: var(--fw-medium); color: var(--text-heading); }

/* Een rustig kadertje voor wat extra aandacht vraagt, zoals de gegevens van de
   praktijk of een korte waarschuwing. */
.prose-note {
  margin: var(--space-5) 0;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--surface-card-soft);
  border: 1px solid var(--border-card);
}
.prose-note p:last-child, .prose-note ul:last-child { margin-bottom: 0; }

.page-bottom {
  background: var(--surface-inverse);
  color: var(--text-on-inverse);
  padding: var(--space-6) var(--space-5);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.page-bottom__links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-4); }
.page-bottom__links a { color: var(--cream-50); text-decoration: none; font-size: var(--fs-small); }
.page-bottom__links a:hover { color: var(--white); text-decoration: underline; }
.page-bottom__legal { margin: 0; font-size: var(--fs-small); color: var(--cream-200); }

/* --------------------------------------------------------- 14. Fijnafstemming */

@media (max-width: 520px) {
  .offer__media { min-height: 280px; }
}

@media print {
  .site-header, .fab-stack, .sheet { display: none !important; }
  .hero { min-height: auto; }
}