/* raleway-cyrillic-ext-wght-normal */
@font-face {
  font-family: 'Raleway Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/_astro/raleway-cyrillic-ext-wght-normal.Dc5xu4We.woff2) format('woff2-variations');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* raleway-cyrillic-wght-normal */
@font-face {
  font-family: 'Raleway Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/_astro/raleway-cyrillic-wght-normal.B0Yo_ULV.woff2) format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* raleway-vietnamese-wght-normal */
@font-face {
  font-family: 'Raleway Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/_astro/raleway-vietnamese-wght-normal.wikBsL6_.woff2) format('woff2-variations');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* raleway-latin-ext-wght-normal */
@font-face {
  font-family: 'Raleway Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/_astro/raleway-latin-ext-wght-normal.CwtNDoQR.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* raleway-latin-wght-normal */
@font-face {
  font-family: 'Raleway Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/_astro/raleway-latin-wght-normal.CSF1BaNN.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* archivo-black-latin-ext-400-normal */
@font-face {
  font-family: 'Archivo Black';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/_astro/archivo-black-latin-ext-400-normal.DQAASfvW.woff2) format('woff2'), url(/_astro/archivo-black-latin-ext-400-normal.-j5WRK12.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* archivo-black-latin-400-normal */
@font-face {
  font-family: 'Archivo Black';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/_astro/archivo-black-latin-400-normal.BTVu2TQR.woff2) format('woff2'), url(/_astro/archivo-black-latin-400-normal.HW9MwEcM.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* De site van Fit-Boost. Alle maten komen uit één systeem van variabelen (zie hieronder), geen losse pixels.
   Drie schermbreedtes voor de opbouw: groot, tablet (tot 1024px) en telefoon (tot 767px). Groottes en
   afstanden schalen daartussen vloeiend mee, van een scherm van 360px tot een van 1440px. */

:root {
  --turquoise: #009fb4; /* links en iconen */
  --turquoise-diep: #006c7a; /* een icoon waar je op staat */
  --blauwgrijs: #5f848b; /* het uitklapmenu en de menubalk zodra je scrolt */
  --blauwgrijs-diep: #4b686d; /* de footer: dezelfde tint, donkerder */
  --grond: #fafafa;
  --lijn: #dadada; /* de rand om kaarten en vragen */

  /* ---------- Letters ----------
     Eén schaal met een vaste verhouding van 1,25 vanaf de lopende tekst van 18px (op een telefoon 1,2 vanaf 16px).
     Elke stap is een kwart groter dan de vorige, zo zie je meteen welk niveau iets is.
     Tussen 360 en 1440px breed groeit elke grootte geleidelijk mee; `rem` zodat een grotere tekstinstelling
     van de bezoeker gewoon doorwerkt. */
  --t-label: 0.75rem; /* 12: een klein label in hoofdletters boven een kop */
  --t-klein: 0.875rem; /* 14: labels, knoppen, de onderste regel */
  --t-ui: 1rem; /* 16: menu, recensies, kleine kaarten */
  --t-basis: clamp(1rem, 0.958rem + 0.185vw, 1.125rem); /* 16 → 18: lopende tekst */
  --t-groot: clamp(1.1875rem, 1.125rem + 0.278vw, 1.375rem); /* 19 → 22: namen op tegels, kopjes van kaarten */
  --t-h3: clamp(1.4375rem, 1.333rem + 0.463vw, 1.75rem); /* 23 → 28 */
  --t-h2: clamp(1.75rem, 1.417rem + 1.481vw, 2.75rem); /* 28 → 44 */
  --t-h1: clamp(2.0625rem, 1.604rem + 2.037vw, 3.4375rem); /* 33 → 55 */
  --t-display: clamp(2.5rem, 1.542rem + 4.259vw, 5.375rem); /* 40 → 86: de slogan op de foto */

  /* Regelafstand loopt omgekeerd met de grootte: ruim bij lopende tekst, strak bij grote koppen */
  --r-tekst: 1.6;
  --r-groot: 1.35;
  --r-kop: 1.15;
  --r-display: 1;

  /* ---------- Ruimte ----------
     Elke afstand komt uit één rij op een raster van 8: 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96 · 128 · 160.
     De regel erachter: wat bij elkaar hoort staat dichter bij elkaar dan wat los staat. Dus een kop staat
     dichter op zijn tekst dan de knop eronder, en blokken binnen een sectie dichter dan twee secties.
     De vaste maten groeien mee met het scherm, telkens tussen twee stappen van de rij. */
  --ruimte-kop: clamp(16px, 13.33px + 0.741vw, 24px); /* kop tot tekst */
  --ruimte-actie: clamp(24px, 21.33px + 0.741vw, 32px); /* tekst tot link of knop */
  --ruimte-blok: clamp(32px, 26.67px + 1.481vw, 48px); /* tussen blokken in een sectie, en kolommen onder elkaar */
  --ruimte-kolom: clamp(32px, 10.67px + 5.926vw, 96px); /* tussen twee kolommen naast elkaar */
  --ruimte-sectie: clamp(64px, 32px + 8.889vw, 160px); /* tussen twee secties */
  --raster: clamp(16px, 13.33px + 0.741vw, 24px); /* tussen kaarten en tegels */
  --vlak: clamp(24px, 21.33px + 0.741vw, 32px); /* binnenkant van een kaart */

  /* De inhoud: hooguit 1280px breed, en aan de zijkant altijd minstens 24px vrij (80px op een groot scherm) */
  --breed: 1280px;
  --marge: clamp(24px, 5.33px + 5.185vw, 80px);

  /* Afronding: één hoek voor vlakken, foto's en knoppen, en een kleinere voor een vlak dat in een ander vlak ligt
     (een tab in de balk, een naam op een tegel, een regel in het menu) */
  --hoek: 10px;
  --hoek-binnen: 6px;

  /* Waar iets blijft staan tijdens het scrollen: ruim onder de menubalk */
  --plak: 160px;

  /* De menubalk ligt over de pagina heen. Een pagina zonder grote foto begint daaronder met een halve sectieruimte. */
  --kop-hoogte: 80px;
  --pagina-boven: calc(var(--kop-hoogte) + var(--ruimte-sectie) / 2);

  /* Staat een vraag open of dicht, dan schuift het antwoord in en uit in plaats van te verspringen */
  interpolate-size: allow-keywords;
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--grond);
  color: #000;
  font-family: "Raleway Variable", "Raleway", sans-serif;
  font-size: var(--t-basis);
  line-height: var(--r-tekst);
  font-weight: 500;
}

h1,
h2,
h3,
p,
ul {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

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

a {
  color: var(--turquoise);
  text-decoration: none;
}

a:hover {
  color: #00626f;
}

/* Geen grijze flits bij een tik op een telefoon: de ingedrukte staat (zie Reactie op aanraken) geeft de reactie */
a,
button,
summary {
  -webkit-tap-highlight-color: transparent;
}

/* Koppen: hoe groter, hoe strakker de regels en hoe dichter de letters op elkaar */
h1 {
  font-size: var(--t-h1);
  line-height: var(--r-kop);
  font-weight: 700;
  letter-spacing: -0.025em;
}

h2 {
  font-size: var(--t-h2);
  line-height: var(--r-kop);
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Een kop van twee regels krijgt twee ongeveer even lange regels, in plaats van één los woord eronder */
h1,
h2 {
  text-wrap: balance;
  overflow-wrap: break-word;
}

/* Een naam die niet over twee regels mag breken, zoals Fit-Boost bij het streepje */
.heel {
  white-space: nowrap;
}

button {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

/* De inhoud staat in het midden, nooit breder dan --breed en nooit tegen de rand */
.binnen {
  width: min(var(--breed), 100% - 2 * var(--marge));
  margin-inline: auto;
}

/* Een knop is 48px hoog (op een telefoon 40px): 24px regel en 12px erboven en eronder */
.knop {
  display: inline-block;
  white-space: nowrap;
  padding: 12px 24px;
  border-radius: var(--hoek);
  background: #000;
  color: #fff;
  font-size: var(--t-klein);
  line-height: 24px;
  font-weight: 700;
  letter-spacing: 0.04em;
  transition:
    transform 100ms ease-out,
    background-color 0.3s;
}

.knop:hover {
  background: #4f5758;
  color: #fff;
}

/* ---------- Menubalk ---------- */

/* Ligt over de foto heen en is doorzichtig; na 60px scrollen wordt hij een doorschijnende laag in
   blauwgrijs, waar de pagina wazig onderdoor schuift (zie het script in Layout.astro). Niet lichter: doorschijnend
   valt de witte menutekst daar anders op weg.
   Op een pagina zonder grote foto bovenaan (vast) staat hij meteen in die kleur.
   Logo en contactknop staan op dezelfde lijn als de inhoud eronder. Het menu staat precies in het midden van het
   scherm, op dezelfde as als de slogan, ook al zijn logo en contactknop niet even breed: links en rechts krijgen
   allebei de helft van wat er overblijft. */
.kop {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: var(--kop-hoogte);
  padding-inline: max(var(--marge), (100% - var(--breed)) / 2);
  transition: background-color 0.4s ease-in-out;
}

.kop.gescrold,
.kop.vast {
  border-bottom: 1px solid rgb(255 255 255 / 0.25);
  background: rgb(95 132 139 / 0.72);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
}

.kop-logo {
  justify-self: start;
}

.kop-logo img {
  width: 96px;
}

.menu {
  display: flex;
}

.menu li {
  position: relative;
}

.menu a,
.menu button {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  color: #fff;
  font-size: var(--t-ui);
  line-height: 24px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: color 0.4s;
}

.menu a:hover,
.menu li:hover > button,
.menu li:focus-within > button,
.menu a[aria-current="page"] {
  color: #000;
}

.pijl {
  width: 16px;
  height: 16px;
  margin-left: 8px;
  fill: currentColor;
}

/* Het uitklapmenu onder Info: open zolang je erop staat of er met het toetsenbord in zit.
   Het groeit vanuit de knop in plaats van in één klap te verschijnen. Het zweeft 8px onder de menubalk; de ruimte
   tot de knop is doorzichtige binnenruimte van het menu, zodat het openblijft als je de muis ernaartoe beweegt
   (de knop is 48px hoog en staat midden in de balk). */
.submenu {
  position: absolute;
  top: 100%;
  left: 0;
  padding-top: calc((var(--kop-hoogte) - 48px) / 2 + 8px);
  visibility: hidden;
  opacity: 0;
  transform: scale(0.96);
  transform-origin: 40px 24px;
  transition:
    opacity 0.18s ease-out,
    transform 0.18s ease-out,
    visibility 0.18s;
}

.menu li:hover > .submenu,
.menu li:focus-within > .submenu {
  visibility: visible;
  opacity: 1;
  transform: none;
}

.submenu ul {
  padding-block: 8px;
  border: 1px solid rgb(255 255 255 / 0.25);
  border-radius: var(--hoek);
  background: rgb(95 132 139 / 0.96);
  box-shadow: 0 12px 32px -8px rgb(26 60 66 / 0.3);
  overflow: hidden;
}

.submenu a {
  padding: 8px 16px;
}

/* Rechts in de balk: de contactknop, en op tablet en telefoon daarnaast de menuknop */
.kop-knop {
  display: flex;
  justify-self: end;
  align-items: center;
  gap: 8px;
}

/* De menuknop: een zwart vierkant in de vorm van de knoppen, even hoog als de contactknop.
   De drie streepjes worden een kruis zolang het menu open staat. */
.menuknop {
  display: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--hoek);
  background: #000;
  color: #fff;
}

.menuknop svg {
  width: 24px;
  height: 24px;
}

.menuknop .kruis,
.menuknop[aria-expanded="true"] .strepen {
  display: none;
}

.menuknop[aria-expanded="true"] .kruis {
  display: block;
}

/* Het menu op tablet en telefoon: een witte kaart die onder de balk
   openklapt, met alle onderdelen meteen in beeld. De onderdelen van Info staan er ingesprongen onder.
   De kaart groeit vanuit de menuknop rechtsboven en staat rechts op de lijn van de inhoud.
   Op een groot scherm bestaat hij niet. */
.mobielmenu {
  position: absolute;
  top: calc(100% + 8px);
  right: var(--marge);
  left: var(--marge);
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  border-radius: var(--hoek);
  background: #fff;
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.12);
  visibility: hidden;
  opacity: 0;
  transform: scale(0.96);
  transform-origin: top right;
  transition:
    opacity 0.2s ease-out,
    transform 0.2s ease-out,
    visibility 0.2s;
}

.mobielmenu.open {
  visibility: visible;
  opacity: 1;
  transform: none;
}

.mobielmenu a,
.mobielmenu p {
  padding: 12px 16px;
  border-radius: var(--hoek-binnen);
  color: #000;
  font-size: var(--t-ui);
  line-height: 24px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.mobielmenu a.onder {
  padding: 8px 16px 8px 32px;
  font-weight: 500;
  letter-spacing: 0;
}

.mobielmenu a:hover,
.mobielmenu a[aria-current="page"] {
  background: rgb(95 132 139 / 0.14);
  color: #000;
}

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

.hero {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 102vh;
  overflow: hidden;
}

/* De foto's liggen op elkaar; de actieve is zichtbaar en ze vloeien in 2,5 seconde in elkaar over */
.hero-dia {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 2.5s;
}

.hero-dia.actief {
  opacity: 1;
}

/* Een zwarte waas over de foto, zodat de witte tekst leesbaar blijft */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0.4;
}

/* De slogan: de grootste stap van de schaal, met krappe letters en een ruime woordafstand, in verhouding tot de
   lettergrootte zodat het op elk scherm hetzelfde beeld geeft. Hij staat in het midden
   van de foto, met onder zich evenveel ruimte als de marge aan de zijkant. */
.hero-kop {
  position: relative;
  z-index: 1;
  width: min(var(--breed), 100% - 2 * var(--marge));
  margin: 0 auto var(--marge);
  color: #fff;
  font-family: "Archivo Black", sans-serif;
  font-size: var(--t-display);
  line-height: var(--r-display);
  font-weight: 400;
  letter-spacing: -0.05em;
  word-spacing: 0.2em;
  text-align: center;
}

/* Op een telefoon twee regels: "Sneller herstel," en "Sterker terug." */
.hero-kop .regel {
  display: block;
}

/* Vanaf tablet één regel, zo groot als in de breedte van de inhoud past (de slogan is 15,6 keer zo breed als
   zijn lettergrootte), en nooit groter dan de grootste stap van de schaal */
@media (min-width: 768px) {
  .hero-kop {
    font-size: min(var(--t-display), min(var(--breed), 100vw - 2 * var(--marge)) / 15.6);
    white-space: nowrap;
  }

  .hero-kop .regel,
  .beweging .hero-kop .regel {
    display: inline-block;
  }
}

/* ---------- Secties ---------- */

/* De ruimte tussen twee secties is een marge, geen binnenruimte: twee marges die elkaar raken vallen samen,
   dus er staat altijd precies één keer --ruimte-sectie tussen, ook naar de recensies in de footer */
.sectie {
  margin-block: var(--ruimte-sectie);
}

.rij {
  display: flex;
  gap: var(--ruimte-blok) var(--ruimte-kolom);
}

.kolom {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: var(--ruimte-kop);
  min-width: 0;
}

/* Een link of knop onder een tekst staat iets verder weg dan de kop boven die tekst */
.kolom > .pijl-link,
.kolom > .knop,
.kolom > .los-kader {
  margin-top: calc(var(--ruimte-actie) - var(--ruimte-kop));
}

/* Een link onder een tekst als los kader (components/LinkKader.astro zonder kop), even breed als de tekst erboven */
.los-kader {
  max-width: 36em;
}

/* Tussen twee alinea's een witregel van één lettergrootte: kleiner dan de ruimte onder een kop,
   zodat de kop bij de tekst hoort */
.tekst p + p {
  margin-top: 1em;
}

/* Een regel tekst blijft prettig leesbaar, rond de 70 tekens, ook waar de kolom breder is */
.tekst {
  max-width: 36em;
}

.pijl-link {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #000;
}

.pijl-link:hover {
  color: #000;
}

.pijl-link svg {
  flex: none;
  width: 24px;
  height: 24px;
  fill: var(--turquoise);
  transition: fill 0.3s;
}

.pijl-link:hover svg {
  fill: var(--turquoise-diep);
}

.foto {
  width: 100%;
  object-fit: cover;
  border-radius: var(--hoek);
}

/* Een fototegel met de naam in een wazige, licht getinte balk onderaan, zodat de witte naam ook op een
   lichte foto leesbaar is; de foto zoomt in als je erop staat. De balk staat aan drie kanten even ver van de rand. */
.tegel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 2 / 1;
  padding: 16px;
  border-radius: var(--hoek);
  overflow: hidden;
}

.tegel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

a.tegel:hover img {
  transform: scale(1.08);
}

.tegel-naam {
  position: relative;
  padding: 16px 24px;
  border-radius: var(--hoek-binnen);
  background: rgb(0 0 0 / 0.3);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(15px);
  color: #fff;
  font-size: var(--t-groot);
  line-height: var(--r-groot);
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* Intro: links de vier behandelingen, rechts de tekst die blijft staan terwijl de tegels voorbij scrollen.
   De tekstkolom heeft geen lege ruimte onder zich: zo blijft hij staan tot zijn onderkant gelijk staat met de
   onderkant van de laatste tegel, en scrollen ze daarna samen weg. */
.tegels {
  gap: var(--raster);
}

/* Waarom Fit-Boost: links de tekst die blijft staan, rechts drie kaarten die over elkaar heen schuiven.
   De tekstkolom is precies zo hoog als de laatste kaart (gemeten door het script in index.astro), zodat tekst en
   kaart met de bovenkant gelijk blijven staan en op hetzelfde moment wegscrollen. */
.waarom-tekst {
  min-height: var(--laatste-kaart, 0);
}

.stappen {
  gap: var(--ruimte-sectie);
}

/* Onder de tekst van Waarom Fit-Boost drie sterke punten in een kader, elk met een turquoise vinkje */
.punten {
  max-width: 36em;
  margin-top: calc(var(--ruimte-actie) - var(--ruimte-kop));
}

.punten ul {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.punten li {
  display: flex;
  gap: 16px;
  font-size: var(--t-ui);
  line-height: 1.5;
}

.punten svg {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 4px;
  fill: var(--turquoise);
}

.punt-titel {
  font-weight: 700;
}

.punten li p:last-child {
  color: #5c6f72;
}

/* Een stapkaart: kop, tekst en onderaan de foto, met overal dezelfde binnenruimte */
.stap {
  position: sticky;
  top: var(--plak);
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: var(--hoek);
  background: #fff;
}

.stap-titel {
  font-size: var(--t-groot);
  line-height: var(--r-groot);
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* De foto sluit de kaart af, met wat meer lucht erboven dan tussen kop en tekst */
/* De foto vult de kaart tot onderaan: de kaarten zijn even hoog als de hoogste (beweging.css), en de laatste soms
   even hoog als de tekst ernaast (script in index.astro) */
.stap .foto {
  flex: 1 0 auto;
  margin-top: 8px;
  aspect-ratio: 16 / 9;
}

/* Manon: de foto is een tegel in dezelfde verhouding als de behandelingen, de tekst staat er midden naast */
.manon .rij {
  align-items: center;
}

/* Klachten en Praktijk: de foto is precies zo hoog als de tekst ernaast, zodat boven- en onderkant gelijk lopen */
.klachten .foto,
.praktijk .foto {
  flex: 1 1 0;
  min-height: 320px;
}

/* ---------- Veelgestelde vragen ---------- */

/* De kop in het midden, tabs om op onderwerp te kiezen en daaronder witte kaarten
   die openklappen. De hoeken, de grijze rand van de stapkaarten en het lettertype zijn die van Fit-Boost. */
.faq .binnen {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.faq h2 {
  text-align: center;
}

.tabs {
  --wissel: 0.45s cubic-bezier(0.65, 0, 0.35, 1); /* rustig op gang, vlot onderweg, zacht tot stilstand */
  position: relative;
  display: flex;
  gap: 4px;
  max-width: 100%;
  margin-top: var(--ruimte-actie);
  padding: 4px;
  border: 1px solid var(--lijn);
  border-radius: var(--hoek);
  background: #fff;
  overflow-x: auto;
}

.tabs button {
  flex: none;
  height: 40px;
  padding: 0 24px;
  border-radius: var(--hoek-binnen);
  font-size: var(--t-klein);
  font-weight: 700;
  letter-spacing: 0.04em;
  transition:
    transform 100ms ease-out,
    background-color 0.2s,
    color 0.2s;
}

.tabs button[aria-selected="true"] {
  background: #000;
  color: #fff;
}

/* Het zwarte balkje schuift naar het gekozen tab (positie en breedte zet het script in Vragen.astro). Een nieuwe klik
   halverwege buigt het vanaf waar het is af naar het nieuwe tab. De tekstkleur wisselt in hetzelfde tempo mee, zodat
   hij nooit even wit op wit of zwart op zwart staat. Zonder script blijft de zwarte achtergrond van het gekozen tab. */
.tabs-pil {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  width: var(--pil-breed, 0);
  border-radius: var(--hoek-binnen);
  background: #000;
  transform: translateX(var(--pil-x, 0));
  transition:
    transform var(--wissel),
    width var(--wissel);
}

.tabs.met-pil button {
  position: relative;
  transition:
    transform 100ms ease-out,
    color var(--wissel);
}

.tabs.met-pil button[aria-selected="true"] {
  background: none;
}

/* Bij het laden en bij een andere schermbreedte staat het balkje meteen goed, zonder te schuiven */
.tabs.direct .tabs-pil,
.tabs.direct button {
  transition: none;
}

.vragen {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 800px;
  margin-top: var(--ruimte-blok);
}

/* Een zin onder de vragen, zoals de uitnodiging om een afspraak te maken op een behandelpagina */
.vragen-afsluiter {
  max-width: 36em;
  margin-top: var(--ruimte-blok);
  text-align: center;
  text-wrap: balance;
}

.vragen-afsluiter a {
  color: var(--turquoise-diep);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Een onderwerp dat niet gekozen is blijft verborgen */
.vragen[hidden] {
  display: none;
}

.vraag {
  border: 1px solid var(--lijn);
  border-radius: var(--hoek);
  background: #fff;
}

/* Vraag en antwoord beginnen op dezelfde lijn: 24px van de linkerrand */
.vraag summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  min-height: 64px;
  padding: 12px 16px 12px 24px;
  border-radius: var(--hoek);
  color: #1f2124;
  font-weight: 600;
  line-height: var(--r-groot);
  list-style: none;
  cursor: pointer;
}

.vraag summary::-webkit-details-marker {
  display: none;
}

/* De plus in een kadertje; staat de vraag open, dan verdwijnt het staande streepje en blijft een min over */
.vraag-knop {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 32px;
  border: 1px solid #000;
  border-radius: 8px;
}

.vraag-knop svg {
  width: 16px;
  height: 16px;
}

.vraag[open] .staand {
  display: none;
}

.vraag::details-content {
  block-size: 0;
  overflow: hidden;
  transition:
    block-size 0.4s,
    content-visibility 0.4s allow-discrete;
}

.vraag[open]::details-content {
  block-size: auto;
}

.antwoord {
  max-width: calc(36em + 88px);
  padding: 0 64px 24px 24px;
}

/* ---------- Pagina's: gedeelde opbouw ----------
   Elke pagina zonder grote foto begint onder de menubalk met een halve sectieruimte erboven
   (--pagina-boven). Rijen en banden volgen elkaar op met één sectieruimte van inhoud tot inhoud: een grijze band
   heeft daarom binnenin een halve sectieruimte boven en onder. */

/* Een kader: een witte kaart die licht boven de pagina zweeft, voor lijsten met links, de specialisaties en de
   BIG-registratie. Een lijst met links staat in
   components/LinkKader.astro: elke regel licht op als je erover gaat, de pagina waar je bent staat in zacht turquoise. */
.kader {
  padding: var(--vlak);
  border-radius: 16px;
  background: #fff;
  box-shadow:
    0 1px 2px rgb(0 0 0 / 0.04),
    0 12px 32px -8px rgb(26 60 66 / 0.14);
}

.kader h2 {
  margin-bottom: 16px;
  font-size: var(--t-h3);
  line-height: var(--r-kop);
  letter-spacing: -0.01em;
}

/* Een klein label boven de kop, in turquoise hoofdletters */
.kader-label {
  margin-bottom: 4px;
  color: var(--turquoise-diep);
  font-size: var(--t-label);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* De regels: tot aan de rand van de kaart als je erover gaat, de tekst blijft op de lijn van de kop */
.kader-regels {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-inline: -12px;
}

.kader-regel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 10px 12px;
  border-radius: 10px;
  color: #1a1a1a;
  font-size: var(--t-ui);
  line-height: 1.4;
  transition:
    background-color 0.2s,
    transform 100ms ease-out;
}

.kader-regel svg {
  flex: none;
  width: 20px;
  height: 20px;
  fill: #c9d6d8;
  transition:
    fill 0.2s,
    translate 0.2s ease-out;
}

a.kader-regel:hover {
  background: #f1f6f7;
  color: #1a1a1a;
}

a.kader-regel:hover svg {
  fill: var(--turquoise);
  translate: 2px 0;
}

a.kader-regel:active {
  transform: scale(0.98);
}

.kader-regel[aria-current] {
  background: rgb(0 159 180 / 0.1);
  color: var(--turquoise-diep);
  font-weight: 700;
}

.kader-hier {
  flex: none;
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Een los kader zonder kop, met één link (onder een foto): compact, de regel vult de kaart */
.link-kader:not(:has(h2)) {
  padding: 8px;
}

.link-kader:not(:has(h2)) .kader-regels {
  margin-inline: 0;
}

.link-kader:not(:has(h2)) .kader-regel {
  padding: 14px 16px;
  font-weight: 600;
}

/* Het BIG-nummer op de Over-pagina, onder het label */
.big-nummer {
  font-size: var(--t-groot);
  font-weight: 600;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

/* Onderaan een link naar het overzicht, onder een dunne lijn */
.kader-alles {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #eceff0;
  color: var(--turquoise-diep);
  font-size: var(--t-ui);
  font-weight: 600;
}

.kader-alles:hover {
  color: var(--turquoise-diep);
}

.kader-alles svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: translate 0.2s ease-out;
}

.kader-alles:hover svg {
  translate: 3px 0;
}

/* Een tussenkop in een lange tekst (vacature, klacht, partner): kleiner dan de kop van de pagina, met meer ruimte
   erboven dan eronder, zodat hij bij de tekst eronder hoort */
.klacht-sectie h2,
.vacature h2,
.partner-tekst h2,
.tekstpagina-sectie h2 {
  font-size: var(--t-h3);
  line-height: var(--r-kop);
  letter-spacing: -0.01em;
}

/* Lopende tekst met lijsten: een witregel van één lettergrootte tussen alinea's en lijsten, behalve waar ze zonder
   witregel op elkaar volgen (vast) */
.behandel-tekst .tekst > * + *,
.vacature .tekst > * + *,
.klacht .tekst > * + * {
  margin-top: 1em;
}

.behandel-tekst .tekst > .vast,
.vacature .tekst > .vast,
.klacht .tekst > .vast {
  margin-top: 0;
}

.behandel-tekst .tekst ul,
.vacature .tekst ul,
.klacht .tekst ul,
.specialisaties ul {
  padding-left: 24px;
  list-style: disc;
}

/* De kop van een overzichtspagina: titel en een korte intro in het midden */
.pagina-kop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ruimte-kop);
  padding-top: var(--pagina-boven);
  text-align: center;
}

.pagina-kop .tekst {
  max-width: 32em;
  text-wrap: balance;
}

/* De foutpagina (404): het losse kader met de weg terug, in het midden onder de kop */
.niet-gevonden {
  width: min(26rem, 100% - 2 * var(--marge));
  margin-top: var(--ruimte-blok);
}

/* ---------- Over ---------- */

/* Twee rijen: Manon naast de foto, de visie naast de kaders. De foto is precies zo hoog als de tekst ernaast. */
.over-boven {
  padding-top: var(--pagina-boven);
}

.over-onder {
  margin-top: var(--ruimte-sectie);
}

.over-foto {
  flex: 1 1 0;
  width: 100%;
  min-height: 320px;
  border-radius: var(--hoek);
  object-fit: cover;
}

.over-kaders {
  gap: var(--raster);
}

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

/* Het specialisatiekader in het zesde vak is even hoog als de tegel ernaast */
.specialisatie-kader {
  display: grid;
}

/* Twee kolommen fototegels, het laatste vak is het kader met de specialisaties. De lucht eronder komt van
   het recensieblok. */
.behandelingen {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--raster);
  padding-top: var(--ruimte-blok);
}

/* ---------- Behandelpagina's ---------- */

/* Een behandeling of specialisatie: rijen met tekst en foto naast elkaar, om en om links en rechts; de tweede en
   vierde rij op een lichtgrijze band. De foto wordt vanzelf even hoog als de tekst ernaast. */
.behandel-rij {
  padding-block: calc(var(--ruimte-sectie) / 2);
}

.behandel-rij:first-child {
  padding-top: var(--pagina-boven);
}

.behandel-rij.band {
  background: #f1f1f1;
}

.foto-links .behandel-fotos {
  order: -1;
}

.behandel-fotos {
  gap: var(--raster);
}

.behandel-foto {
  flex: 1 1 0;
  width: 100%;
  height: 0;
  min-height: 320px;
  border-radius: var(--hoek);
  object-fit: cover;
}

.behandel-fotos .link-kader {
  flex: none;
}

/* De tussenkopjes in de tekst in turquoise */
.behandel-tekst .tekst h3 {
  margin-top: var(--ruimte-actie);
  color: var(--turquoise);
  font-size: var(--t-groot);
  line-height: var(--r-groot);
  letter-spacing: 0.01em;
}

.behandel-tekst .tekst > :first-child {
  margin-top: 0;
}

.behandel-tekst .tekst h3 + * {
  margin-top: 8px;
}

/* ---------- Locatie, Tarieven en Contact ---------- */

/* Een rij met tekst en een foto naast elkaar. Tussen twee rijen één sectieruimte. */
.info-rij {
  display: flex;
  gap: var(--ruimte-kolom);
  align-items: flex-start;
}

main > .info-rij:first-child {
  padding-top: var(--pagina-boven);
}

.info-rij + .info-rij {
  margin-top: var(--ruimte-sectie);
}

.info-tekst,
.info-foto {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: var(--ruimte-kop);
  min-width: 0;
}

.info-foto .foto {
  aspect-ratio: 6 / 5;
}

/* ---------- Openingstijden ---------- */

/* De openingstijden (footer en Locatie): dag links, tijd rechts, met cijfers die onder elkaar uitlijnen. Vandaag
   staat in een zacht vlak met een stip, zoals de pagina waar je bent in een kader. De kleuren zijn variabelen, zodat
   de footer ze in wit kan zetten. */
.tijden {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-inline: -12px;
}

.tijden li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 4px 12px;
  border-radius: var(--hoek-binnen);
  font-variant-numeric: tabular-nums;
}

.tijden li span:last-child {
  color: var(--tijden-zacht, #5c6f72);
}

.tijden li.vandaag {
  background: var(--tijden-vandaag, rgb(0 159 180 / 0.1));
  color: var(--tijden-nadruk, var(--turquoise-diep));
  font-weight: 700;
}

.tijden li.vandaag span:first-child::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 8px;
  border-radius: 50%;
  background: var(--tijden-stip, var(--turquoise));
  vertical-align: middle;
}

.tijden li.vandaag span:last-child {
  color: inherit;
}

/* Op Locatie in een kader, met de kop als klein label zoals boven de andere kaders */
.tijden-kader {
  margin-top: calc(var(--ruimte-actie) - var(--ruimte-kop));
}

.tijden-kader h2 {
  margin-bottom: 8px;
  color: var(--turquoise-diep);
  font-size: var(--t-label);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tijden-kader .tijden li {
  padding-block: 8px;
}

/* Adres, mail en telefoon (en de gegevens van de vacature) met een blauwgrijs icoon ervoor */
.gegevens {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-weight: 600;
}

.gegevens li {
  display: flex;
  align-items: center;
  gap: 12px;
}

.gegevens a {
  color: inherit;
}

.icoon {
  flex: none;
  width: 20px;
  height: 20px;
  fill: #a3bec2;
}

/* Een tussenkop, een groep tarieven of de knoppen staan iets verder van wat erboven staat dan van wat eronder komt */
.tarief-groep + .tarief-groep {
  margin-top: calc(var(--ruimte-actie) - var(--ruimte-kop));
}

/* Een lijst met links de naam, rechts de tijd of de prijs en een stippellijn ertussen */
.lijst-stippel {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lijst-stippel li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
}

.lijst-stippel li > span:nth-child(2) {
  flex: 1;
  min-width: 16px;
  margin-inline: 8px;
  border-bottom: 1px dotted #a3bec2;
}

.tarief-groep {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tarief-kop {
  color: var(--turquoise);
  font-size: var(--t-groot);
  line-height: var(--r-groot);
  letter-spacing: 0.01em;
}

.tarief-intro {
  font-size: var(--t-ui);
  font-weight: 400;
}

.tarieven {
  gap: 16px;
}

.tarieven li > span:first-child {
  font-weight: 600;
}

/* Wat bij een tarief hoort of hoe lang het duurt, op een eigen regel eronder */
.tarieven small {
  flex-basis: 100%;
  margin-top: 4px;
  font-size: var(--t-ui);
  font-weight: 400;
}


/* ---------- Partners ---------- */

/* Per partner een band, om en om lichtgrijs. De tekst houdt de leesbare breedte van de andere pagina's en het
   logo staat in het midden van de ruimte ernaast. */
.partner {
  padding-block: calc(var(--ruimte-sectie) / 2);
}

.partners-kop + .partner {
  margin-top: var(--ruimte-blok);
}

.partner.band {
  background: #f1f1f1;
}

.partner-rij {
  display: flex;
  gap: var(--ruimte-kolom);
  align-items: center;
}

.partner-tekst {
  display: flex;
  flex: 0 1 36em;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ruimte-kop);
}

.partner-tekst .pijl-link {
  margin-top: calc(var(--ruimte-actie) - var(--ruimte-kop));
  color: #333;
}

.partner-logo {
  display: flex;
  flex: 1 1 312px;
  justify-content: center;
}

.partner-logo img {
  max-height: 200px;
  object-fit: contain;
}

.logo-links .partner-logo {
  order: -1;
}

/* ---------- Vacatures ---------- */

/* Eén witte kaart in het midden, zo breed dat de tekst rond de 70 tekens per regel blijft */
.vacature-ruimte {
  padding-top: var(--pagina-boven);
}

.vacature {
  display: flex;
  flex-direction: column;
  gap: var(--ruimte-kop);
  max-width: calc(36em + 2 * var(--ruimte-blok));
  margin-inline: auto;
  padding: var(--ruimte-blok);
  border: 1px solid var(--lijn);
  border-radius: var(--hoek);
  background: #fff;
}

.vacature h1 {
  font-size: var(--t-h2);
}

.vacature h2 {
  margin-top: calc(var(--ruimte-blok) - var(--ruimte-kop));
}

.vacature .tekst {
  max-width: none;
}

/* ---------- Tekstpagina (cookiebeleid) ---------- */

/* Eén kolom tekst op leesbare breedte, met dezelfde opbouw als een klachtpagina: kop, intro, en onderdelen met een
   tussenkop en één blokruimte ertussen */
.tekstpagina {
  padding-top: var(--pagina-boven);
}

.tekstpagina > * {
  max-width: 36em;
}

.tekstpagina-kop,
.tekstpagina-sectie {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ruimte-kop);
}

.tekstpagina-sectie {
  margin-top: var(--ruimte-blok);
}

.tekstpagina-sectie .knop {
  margin-block: calc(var(--ruimte-actie) - var(--ruimte-kop));
}

.tekstpagina code {
  padding: 2px 6px;
  border-radius: 4px;
  background: #eef3f4;
  font-size: 0.9em;
}

.tekstpagina-datum {
  margin-top: var(--ruimte-blok);
  color: #6b7a7d;
  font-size: var(--t-klein);
}

/* ---------- Klachtenoverzicht ---------- */

/* Dezelfde kop en tegels als bij Behandelingen, in drie kolommen */
.regios {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--raster);
  padding-top: var(--ruimte-blok);
}

/* In drie kolommen is een tegel smaller, dus iets hoger van verhouding */
.regios .tegel {
  aspect-ratio: 3 / 2;
}

/* ---------- Kruimelpad ----------
   Klein en grijs boven de kop van een klacht- of behandelpagina (components/Kruimelpad.astro). Een lange naam loopt
   door op de volgende regel, het pad schuift nooit zijwaarts. */
.kruimelpad ol {
  display: flex;
  padding: 0;
  list-style: none;
  flex-wrap: wrap;
  gap: 4px 8px;
  color: #5c5c5c;
  font-size: var(--t-klein);
  line-height: 1.4;
}

.kruimelpad li {
  display: flex;
  gap: 8px;
}

.kruimelpad li + li::before {
  content: "/";
  color: #b0b0b0;
}

.kruimelpad a {
  color: inherit;
  transition: color 0.2s;
}

.kruimelpad a:hover {
  color: var(--turquoise-diep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.kruimelpad [aria-current] {
  color: #1a1a1a;
}

/* ---------- Klachtpagina's ---------- */

/* Een regio of een losse klacht: links de tekst, rechts het kader met links en een foto. De rechterkolom loopt over
   beide rijen, zodat de tekst niet wacht tot het kader en de foto klaar zijn. De lucht eronder komt van het
   recensieblok. */
.klacht {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto 1fr;
  column-gap: var(--ruimte-kolom);
  padding-top: var(--pagina-boven);
}

.klacht-intro,
.klacht-rest {
  grid-column: 1;
}

.klacht-zij {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: var(--raster);
}

.klacht-intro,
.klacht-sectie {
  display: flex;
  flex-direction: column;
  gap: var(--ruimte-kop);
}

/* Tussen de onderdelen van de tekst één blokruimte */
.klacht-intro {
  padding-bottom: var(--ruimte-blok);
}

.klacht-sectie + .klacht-sectie,
.klacht-rest .link-kader {
  margin-top: var(--ruimte-blok);
}

.klacht-foto {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--hoek);
  object-fit: cover;
}

/* ---------- Recensies ---------- */

/* De Google-recensies boven de footer: een lichtgrijze kopbalk met de score, daaronder kaarten om doorheen te schuiven. Drie naast elkaar op een groot
   scherm, twee op tablet, één op een telefoon. Het lettertype is dat van de site.
   Net als een sectie staat het blok met een marge onder de laatste sectie van de pagina. */
.recensies {
  margin-block: var(--ruimte-sectie);
  font-size: var(--t-ui);
  line-height: 1.5;
}

.recensies-kop {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px 24px;
  min-height: 64px;
  padding: 12px 24px;
  border-radius: var(--hoek);
  background: #f4f4f4;
}

.recensies-score {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.recensies-score strong {
  font-weight: 600;
}

.google-logo {
  width: 80px;
  height: 25px;
}

.sterren {
  display: flex;
  gap: 2px;
  fill: #f6bb06;
}

.sterren svg {
  width: 16px;
  height: 16px;
}

.recensies-schrijf {
  padding: 8px 16px;
  border: 1px solid #767676;
  border-radius: var(--hoek-binnen);
  color: #000;
  font-size: var(--t-klein);
  line-height: 24px;
  font-weight: 600;
  transition: background-color 0.2s;
}

.recensies-schrijf:hover {
  background: #fff;
  color: #000;
}

/* De rij kaarten schuift opzij; de pijlen liggen half over de rand */
.recensies-rij {
  position: relative;
  margin-top: var(--raster);
}

.recensies-baan {
  display: grid;
  grid-auto-columns: calc((100% - 2 * var(--raster)) / 3);
  grid-auto-flow: column;
  gap: var(--raster);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.recensies-baan::-webkit-scrollbar {
  display: none;
}

.recensie {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  border-radius: var(--hoek);
  background: #f4f4f4;
  scroll-snap-align: start;
}

.recensie-kop {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.recensie-naam {
  font-weight: 600;
}

.recensie-datum {
  color: #767676;
  font-size: var(--t-klein);
}

.google-g {
  flex: none;
  width: 20px;
  height: 20px;
}

/* Vier regels, daarna "Lees verder" */
.recensie-tekst {
  display: -webkit-box;
  overflow: hidden;
  white-space: pre-line;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.recensie-tekst.open {
  display: block;
}

.recensie-meer {
  align-self: flex-start;
  margin-top: -4px;
  color: #767676;
  font-size: var(--t-klein);
}

.recensie-meer:hover {
  color: #000;
}

.recensies-pijl {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 6px rgb(0 0 0 / 0.18);
  translate: 0 -50%;
}

.recensies-pijl svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: #000;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.recensies-pijl.vorige {
  left: -16px;
}

.recensies-pijl.volgende {
  right: -16px;
}

.recensies-pijl[hidden],
.recensie-meer[hidden] {
  display: none;
}

/* ---------- Footer ---------- */

/* Bovenaan de slogan naast de contactgegevens, dan drie kolommen met een klein label als kop, onderaan één regel.
   Dunne lijnen in plaats van witte balken. Onder altijd 96px, zodat de WhatsApp-knop nooit over de onderste regel valt. */
.voet {
  --voet-lijn: rgb(255 255 255 / 0.16);
  --voet-zacht: rgb(255 255 255 / 0.68);
  padding: calc(2 * var(--ruimte-blok)) 0 96px;
  background: var(--blauwgrijs-diep);
  color: #fff;
}

.voet a {
  color: #fff;
  transition: color 0.2s;
}

.voet a:hover {
  color: var(--voet-zacht);
}

/* Slogan en contact naast elkaar, onderaan gelijk */
.voet-boven {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--ruimte-blok) var(--ruimte-kolom);
  padding-bottom: var(--ruimte-blok);
  border-bottom: 1px solid var(--voet-lijn);
}

/* De slogan van de homepage, in de letter van de foto */
.voet-slogan {
  font-family: "Archivo Black", sans-serif;
  font-size: var(--t-h1);
  line-height: var(--r-display);
  letter-spacing: -0.04em;
  word-spacing: 0.15em;
}

.voet-contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

/* Contact, telefoon en mail als regel met een icoon, op de maat van de gewone tekst */
.voet-regel {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
}

.voet-regel .icoon {
  width: 16px;
  height: 16px;
  fill: currentColor;
  opacity: 0.68;
}

.voet-kolommen {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ruimte-blok) var(--ruimte-kolom);
  padding-block: var(--ruimte-blok);
  border-bottom: 1px solid var(--voet-lijn);
}

.voet-kolommen > div {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* De kop van een kolom als klein label, zoals boven een kader */
.voet h2 {
  color: var(--voet-zacht);
  font-size: var(--t-label);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* De zes links in twee rijtjes naast elkaar */
.voet-menu ul {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 8px 48px;
}

/* Instagram en LinkedIn als rondje met een dunne rand, dat bij aanwijzen wit wordt */
.socials {
  display: flex;
  gap: 8px;
}

.socials a {
  display: flex;
  padding: 11px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.4);
  transition:
    transform 100ms ease-out,
    background-color 0.2s;
}

.socials svg {
  width: 18px;
  height: 18px;
  fill: #fff;
  transition: fill 0.2s;
}

.socials a:hover {
  background: #fff;
}

.socials a:hover svg {
  fill: var(--blauwgrijs-diep);
}

/* In de footer de openingstijden in wit (de lijst zelf staat onder Openingstijden) */
.voet .tijden {
  --tijden-zacht: var(--voet-zacht);
  --tijden-vandaag: rgb(255 255 255 / 0.1);
  --tijden-nadruk: #fff;
  --tijden-stip: #6fe3f0; /* turquoise, lichter gemaakt zodat hij op het donkere vlak opvalt */
}

/* Onderaan één regel in zachter wit: links het jaar, in het midden de juridische links, rechts de maker */
.voet-onder {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 32px;
  margin-top: 24px;
  color: var(--voet-zacht);
  font-size: var(--t-klein);
}

.voet-onder a {
  color: var(--voet-zacht);
}

.voet-onder a:hover {
  color: #fff;
}

.voet-regels {
  display: flex;
  gap: 32px;
}

/* De maker van de site: "Website & SEO by Praktijkmarketing", met het logo klein erachter. Naam en logo linken
   samen naar de LinkedIn van de maker. */
.voet-maker {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
}

.voet-maker a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.pm-logo {
  flex: none;
  width: auto;
  height: 16px;
}

/* De groene WhatsApp-knop blijft rechtsonder in beeld */
.whatsapp {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 15;
  padding: 12px;
  border-radius: 50%;
  background: #25d366;
}

.whatsapp:hover {
  background: #00d34d;
}

.whatsapp svg {
  display: block;
}

/* Alleen voor wie de pagina laat voorlezen */
.voorlezen {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Reactie op aanraken ---------- */

/* Alles wat je kunt aantikken drukt licht in zolang je vinger of muis erop staat. Zo voelt een tik meteen raak,
   ook op een telefoon waar zweven met de muis niet bestaat. */
.tegel,
.pijl-link,
.menuknop,
.whatsapp,
.socials a {
  transition: transform 100ms ease-out;
}

.knop:active,
.tabs button:active,
.pijl-link:active,
.menuknop:active,
.whatsapp:active,
.socials a:active {
  transform: scale(0.97);
}

/* Een groot vlak drukt minder ver in, anders verspringt het */
a.tegel:active {
  transform: scale(0.985);
}

.vraag summary:active,
.mobielmenu a:active {
  background: rgb(0 0 0 / 0.06);
}

/* ---------- Groot scherm: de tekstkolom blijft staan ---------- */

@media (min-width: 1025px) {
  .plak {
    position: sticky;
    top: var(--plak);
    align-self: flex-start;
  }
}

/* ---------- Tablet ----------
   Groottes en afstanden schalen vanzelf mee (zie :root); hier verandert alleen de opbouw. */

@media (max-width: 1024px) {
  /* Zonder menu in het midden staan logo en knoppen gewoon links en rechts */
  .kop {
    display: flex;
    justify-content: space-between;
  }

  .menu {
    display: none;
  }

  .menuknop,
  .mobielmenu {
    display: flex;
  }

  /* Op tablet is de kaart niet breder dan nodig en staat hij rechts onder de knop */
  .mobielmenu {
    left: auto;
    width: 360px;
  }

  /* Intro, Waarom en Manon gaan onder elkaar; bij Intro en Manon komt de tekst boven de foto's */
  .intro .rij,
  .waarom .rij,
  .manon .rij {
    flex-direction: column;
    align-items: stretch;
  }

  .intro .kolom,
  .waarom .kolom,
  .manon .kolom {
    flex: none;
  }

  .intro-tekst,
  .manon-tekst {
    order: -1;
  }

  /* De vier behandelingen twee aan twee */
  .tegels {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tegels .tegel {
    aspect-ratio: 3 / 2;
  }

  .waarom-tekst {
    min-height: 0;
  }

  .stappen {
    gap: var(--ruimte-blok);
  }

  .recensies-baan {
    grid-auto-columns: calc((100% - var(--raster)) / 2);
  }

  /* De zes links in één rijtje: twee naast elkaar passen niet in een derde van een tablet */
  .voet-menu ul {
    grid-template-columns: max-content;
  }
}

/* Alleen op tablet krijgt de tekstkolom bij Klachten en Praktijk meer ruimte dan de foto */
@media (min-width: 768px) and (max-width: 1024px) {
  .klachten .kolom:first-child,
  .praktijk .kolom:last-child {
    flex: 3 1 0;
  }

  .klachten .kolom:last-child,
  .praktijk .kolom:first-child {
    flex: 2 1 0;
  }
}

/* ---------- Telefoon ---------- */

@media (max-width: 767px) {
  /* Op een telefoon is de menubalk lager. Op heel smalle schermen (onder 390px) krimpen de koppen mee met de
     breedte, zodat lange woorden als "Patellapeesontsteking" en "Sportfysiotherapie" op de regel passen. */
  :root {
    --plak: 96px;
    --kop-hoogte: 56px;
    --t-h1: min(clamp(2.0625rem, 1.604rem + 2.037vw, 3.4375rem), 9.5vw - 4px);
    --t-h2: min(clamp(1.75rem, 1.417rem + 1.481vw, 2.75rem), 8.5vw - 4px);
  }

  .kop-logo img {
    width: 60px;
  }

  /* De contactknop en de menuknop iets kleiner, zodat ze naast het logo passen: 40px hoog */
  .kop .knop {
    padding: 8px 16px;
    font-size: 12px;
  }

  .menuknop {
    width: 40px;
    height: 40px;
  }

  .mobielmenu {
    left: var(--marge);
    width: auto;
  }

  /* Alleen de foto die in beeld staat: de rest van de reeks laadt op een telefoon niet */
  .hero-dia:not(.actief) {
    display: none;
  }

  /* De slogan over de hele breedte, ruim boven de onderrand zodat hij niet achter de WhatsApp-knop valt */
  .hero-kop {
    margin-bottom: 128px;
  }

  .tegels {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Klachten en Praktijk gaan nu ook onder elkaar; bij Praktijk komt de tekst boven de foto */
  .klachten .rij,
  .praktijk .rij {
    flex-direction: column;
  }

  .klachten .kolom,
  .praktijk .kolom {
    flex: none;
  }

  .praktijk .kolom:last-child {
    order: -1;
  }

  .klachten .foto,
  .praktijk .foto {
    flex: none;
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  .vraag summary {
    padding-left: 16px;
  }

  .antwoord {
    padding: 0 16px 16px;
  }

  /* Op een telefoon één kaart tegelijk, en de knop om een recensie te schrijven onder de score */
  .recensies-kop {
    padding: 16px;
  }

  .recensies-schrijf {
    flex: 1 1 100%;
    text-align: center;
  }

  .recensies-baan {
    grid-auto-columns: 100%;
  }

  /* De footer onder elkaar: de slogan, het contact, dan het menu, de locatie en de openingstijden */
  .voet-boven {
    flex-direction: column;
    align-items: stretch;
  }

  .voet-kolommen {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Onder elkaar is er weer plek voor de links in twee rijtjes */
  .voet-menu ul {
    grid-template-columns: repeat(2, max-content);
  }

  /* De onderste regel: eerst de drie links, daaronder copyright en maker elk op een eigen, zachtere regel */
  .voet-onder {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .voet-regels {
    order: -1;
    flex-wrap: wrap;
    gap: 4px 24px;
    margin-bottom: 8px;
  }


}

/* De FAQ-tabbladen vullen op een telefoon de breedte en krimpen mee, zodat ze ook op 320px alle drie in beeld staan */
@media (max-width: 767px) {
  .tabs {
    width: 100%;
  }

  .tabs button {
    flex: 1 1 auto;
    padding: 0 clamp(4px, 2.5vw, 24px);
    font-size: clamp(12px, 3.6vw, 14px);
    letter-spacing: clamp(0px, 0.3vw - 0.6px, 0.04em);
  }
}

/* ---------- Pagina's op tablet en telefoon ----------
   Afstanden schalen vanzelf mee; hier verandert alleen de opbouw: alles onder elkaar, eerst de tekst en dan de foto,
   het logo of het kader, met de breedte van de tekst. */

@media (max-width: 1024px) {
  /* Over: de foto bovenaan over de volle breedte, in de verhouding van de telefoonversie en niet hoger dan 480px */
  .over .rij {
    flex-direction: column;
  }

  .over .kolom {
    flex: none;
  }

  .over-fotokolom {
    order: -1;
  }

  .over-foto {
    flex: none;
    height: auto;
    max-height: 480px;
    min-height: 0;
    aspect-ratio: 7 / 5;
  }

  .over-kaders {
    max-width: 36em;
  }

  /* Behandelpagina's: elke rij onder elkaar, altijd eerst de tekst en dan de foto, zodat de pagina met de titel
     begint en niet zigzagt */
  .behandel-rij .rij {
    flex-direction: column;
  }

  .behandel-rij .kolom {
    flex: none;
    max-width: 36em;
  }

  .foto-links .behandel-fotos {
    order: 0;
  }

  .behandel-foto {
    flex: none;
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 10;
  }

  /* Locatie, Tarieven, Contact en Partners */
  .info-rij,
  .partner-rij {
    flex-direction: column;
    align-items: stretch;
    gap: var(--ruimte-blok);
  }

  .info-tekst,
  .info-foto,
  .partner-tekst {
    flex: none;
    max-width: 36em;
  }

  .info-foto {
    order: 1;
  }

  .info-foto .foto {
    aspect-ratio: 16 / 10;
  }

  .logo-links .partner-logo {
    order: 1;
  }

  .partner-logo {
    flex: none;
    justify-content: flex-start;
  }

  .partner-logo img {
    max-height: 128px;
  }

  /* Het klachtenoverzicht twee tegels naast elkaar */
  .regios {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Klachtpagina's: één kolom. Eerst de intro, dan het kader met de klachten van de regio of "Terug naar", dan de
     rest van de tekst, met één blokruimte ertussen. Het kader en de foto houden de breedte van de tekst. */
  .klacht {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    row-gap: var(--ruimte-blok);
  }

  .klacht-intro {
    padding-bottom: 0;
  }

  .klacht-zij {
    grid-column: 1;
    grid-row: auto;
    max-width: 36em;
  }

  /* Een losse klacht: eerst de tekst, dan pas het kader met de andere klachten van de regio, zodat de uitleg niet
     achter een lijst van tien links verdwijnt. De foto blijft na de intro. */
  .klacht-zij.onder {
    display: contents;
  }

  .klacht-zij.onder > * {
    max-width: 36em;
  }

  .klacht-zij.onder .klacht-foto {
    order: 1;
  }

  .klacht:has(.onder) .klacht-rest {
    order: 2;
  }

  .klacht-zij.onder .link-kader {
    order: 3;
  }
}

@media (max-width: 767px) {
  /* Behandelingen en het klachtenoverzicht: de tegels onder elkaar */
  .behandelingen,
  .regios {
    grid-template-columns: minmax(0, 1fr);
  }

  .behandelingen .tegel,
  .regios .tegel {
    aspect-ratio: 3 / 2;
  }

  /* Op een telefoon vervalt de foto naast een klacht: de tekst komt eerder in beeld */
  .klacht-foto {
    display: none;
  }
}

/* ---------- Contactpagina ----------
   Links de tekst met een blauwgrijs kopje, een grote kop en een kaart om meteen te WhatsAppen; rechts het formulier in
   een vlak in de huisstijlkleur, dat blijft staan terwijl je langs de tekst scrolt. */

.contact-rij {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: var(--ruimte-blok) var(--ruimte-kolom);
  padding-top: var(--pagina-boven);
}

.contact-intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ruimte-kop);
}

/* Het kopje boven de grote kop: in de gewone tekstdikte en het rustige blauwgrijs van de footer, zodat de grote kop
   eronder de aandacht krijgt. Het is de H1 van de pagina. */
.contact-bovenkop {
  color: var(--blauwgrijs-diep);
  font-size: var(--t-groot);
  line-height: var(--r-groot);
  font-weight: 500;
  letter-spacing: normal;
}

.contact-groot {
  font-size: var(--t-h1);
  letter-spacing: -0.025em;
}

.actiekaarten {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: calc(var(--ruimte-actie) - var(--ruimte-kop));
}

/* Een kaart om direct iets te doen: een icoon in een wit rondje en een korte tekst */
.actiekaart {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 24px 12px 12px;
  border-radius: 16px;
  background: #eef3f4;
  color: #000;
  font-size: var(--t-ui);
  font-weight: 600;
  transition:
    background-color 0.2s,
    transform 100ms ease-out;
}

.actiekaart:hover {
  background: #e3ebed;
  color: #000;
}

.actiekaart:active {
  transform: scale(0.98);
}

.actiekaart-icoon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
}

.actiekaart-icoon svg {
  width: 18px;
  height: 18px;
  fill: var(--blauwgrijs-diep);
}

.actiekaart-icoon.whatsapp-groen svg {
  fill: #25d366;
}

/* ---------- Contactformulier ----------
   Het vlak in teal met het formulier (components/Contactformulier.astro). De velden zijn een donkere tint van het
   vlak; zodra je erin staat krijgen ze een witte rand en gloed. Een fout zie je pas als je een veld verlaat. */

.contact-vlak {
  --fout: #ffd0d8;
  position: sticky;
  top: calc(var(--kop-hoogte) + 24px);
  display: flex;
  flex-direction: column;
  padding: var(--ruimte-blok);
  border-radius: 20px;
  background: var(--turquoise-diep);
  color: #fff;
}

.formulier-kop {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.formulier-kop h2 {
  font-size: var(--t-h3);
  letter-spacing: -0.01em;
}

.formulier-kop p {
  color: rgb(255 255 255 / 0.78);
  font-size: var(--t-ui);
  line-height: 1.5;
}

.velden {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: var(--ruimte-actie);
}

/* Telefoon en e-mail naast elkaar zolang er plek is */
.veld-paar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.veld {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.veld label {
  color: rgb(255 255 255 / 0.85);
  font-size: var(--t-label);
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* De lettergrootte is minstens 16px, anders zoomt een iPhone in bij het aantikken */
.veld input,
.veld textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: rgb(0 0 0 / 0.18);
  color: #fff;
  font: inherit;
  font-size: var(--t-basis);
  line-height: 24px;
  transition:
    background-color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s;
}

.veld textarea {
  min-height: 128px;
  max-height: 320px;
  resize: vertical;
  field-sizing: content;
}

.veld input:hover,
.veld textarea:hover {
  background: rgb(0 0 0 / 0.24);
}

.veld input:focus,
.veld textarea:focus {
  border-color: #fff;
  background: rgb(0 0 0 / 0.28);
  box-shadow: 0 0 0 4px rgb(255 255 255 / 0.16);
  outline: none;
}

/* Een fout zie je pas als je het veld verlaat, en hij verdwijnt zodra het klopt */
.veld [aria-invalid="true"] {
  border-color: var(--fout);
}

.veld-fout {
  display: none;
  color: var(--fout);
  font-size: var(--t-klein);
  line-height: 1.4;
}

.veld:has([aria-invalid="true"]) .veld-fout {
  display: block;
}

/* Het onzichtbare veld voor bots: mensen zien en bereiken het niet */
.lokveld {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formulier-melding {
  margin-top: 16px;
  padding: 12px 16px;
  border-radius: 12px;
  background: rgb(255 255 255 / 0.14);
  font-size: var(--t-ui);
  line-height: 1.5;
}

.formulier-melding a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
}

.formulier-melding[hidden] {
  display: none;
}

.formulier-voet {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: var(--ruimte-actie);
}

/* De verzendknop wit op teal */
.verzend {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 52px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 6px 16px rgb(0 0 0 / 0.16);
  color: var(--turquoise-diep);
  font-size: var(--t-ui);
  font-weight: 700;
  letter-spacing: 0.01em;
  transition:
    transform 100ms ease-out,
    box-shadow 0.2s,
    filter 0.2s;
}

.verzend:hover {
  filter: brightness(0.97);
  box-shadow: 0 8px 20px rgb(0 0 0 / 0.2);
}

.verzend:active {
  transform: scale(0.98);
}

/* Tijdens het versturen: de tekst maakt plaats voor een draaiend wieltje */
.verzend-draai {
  position: absolute;
  width: 22px;
  height: 22px;
  border: 2.5px solid rgb(0 108 122 / 0.25);
  border-top-color: var(--turquoise-diep);
  border-radius: 50%;
  opacity: 0;
}

.verzend[aria-busy="true"] {
  pointer-events: none;
}

.verzend[aria-busy="true"] .verzend-tekst {
  opacity: 0;
}

.verzend[aria-busy="true"] .verzend-draai {
  opacity: 1;
  animation: draai 0.8s linear infinite;
}

@keyframes draai {
  to {
    rotate: 1turn;
  }
}

.verzend:focus-visible,
.knop-zacht:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.formulier-privacy {
  color: rgb(255 255 255 / 0.78);
  font-size: var(--t-klein);
  line-height: 1.4;
}

.formulier-privacy a {
  color: inherit;
  text-decoration: underline;
}

/* ---------- Verstuurd ---------- */

/* Een cirkel die zich tekent, een vinkje erin en een zachte gloed erachter; daarna schuift de tekst omhoog. Het vlak
   houdt de hoogte van het formulier, het bedankje staat er midden in. */
.gelukt {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: var(--ruimte-blok) 0;
  text-align: center;
}

.gelukt[hidden] {
  display: none;
}

.gelukt-vink {
  position: relative;
  width: 96px;
  height: 96px;
  margin-bottom: 16px;
}

.gelukt-vink::before {
  content: "";
  position: absolute;
  inset: -24px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(255 255 255 / 0.22), transparent);
}

.gelukt-vink svg {
  position: relative;
  width: 100%;
  height: 100%;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gelukt-vink circle {
  fill: rgb(255 255 255 / 0.12);
  stroke: #fff;
  stroke-width: 3;
  stroke-dasharray: 183;
}

.gelukt-vink path {
  stroke: #fff;
  stroke-width: 4.5;
  stroke-dasharray: 36;
}

.gelukt h2 {
  font-size: var(--t-h3);
  letter-spacing: -0.01em;
  outline: none;
}

.gelukt p {
  max-width: 24em;
  color: rgb(255 255 255 / 0.8);
}

.knop-zacht {
  height: 44px;
  margin-top: var(--ruimte-kop);
  padding: 0 24px;
  border-radius: 12px;
  background: rgb(255 255 255 / 0.16);
  color: #fff;
  font-size: var(--t-ui);
  font-weight: 600;
  transition:
    background-color 0.2s,
    transform 100ms ease-out;
}

.knop-zacht:hover {
  background: rgb(255 255 255 / 0.24);
}

.knop-zacht:active {
  transform: scale(0.97);
}

/* Met beweging: de cirkel tekent zich, het vinkje volgt, het geheel veert een fractie aan, de tekst komt erna */
.beweging .gelukt.speel .gelukt-vink {
  animation: vink-plop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.beweging .gelukt.speel circle {
  animation: vink-teken 0.7s var(--uitloop) 0.05s both;
}

.beweging .gelukt.speel path {
  --lengte: 36;
  animation: vink-teken 0.35s ease-out 0.5s both;
}

.beweging .gelukt.speel .gelukt-vink::before {
  animation: vink-gloed 1.2s ease-out 0.4s both;
}

.beweging .gelukt.speel > :not(.gelukt-vink) {
  animation: gelukt-tekst 0.5s var(--uitloop) 0.6s both;
}

@keyframes vink-plop {
  from {
    transform: scale(0.6);
    opacity: 0;
  }
}

@keyframes vink-teken {
  from {
    stroke-dashoffset: var(--lengte, 183);
  }
}

@keyframes vink-gloed {
  from {
    transform: scale(0.4);
    opacity: 0;
  }

  40% {
    opacity: 1;
  }
}

@keyframes gelukt-tekst {
  from {
    transform: translateY(12px);
    opacity: 0;
  }
}

/* Tablet en telefoon: alles onder elkaar, het vlak op de breedte van de tekst */
@media (max-width: 1024px) {
  .contact-rij {
    grid-template-columns: minmax(0, 1fr);
  }

  .contact-vlak {
    position: static;
    max-width: calc(36em + 2 * var(--ruimte-blok));
  }
}

@media (max-width: 767px) {
  .contact-vlak {
    padding: var(--vlak);
  }

  .veld-paar {
    grid-template-columns: minmax(0, 1fr);
  }

  .actiekaart {
    flex: 1 1 100%;
  }
}

/* ---------- Cookiebanner ----------
   Een kleine kaart onderin, links op de lijn van de inhoud, in de stijl van het contactformulier. Weigeren en
   Accepteren zijn even groot en zien er hetzelfde uit: weigeren is net zo makkelijk als accepteren. De kaart schuift
   omhoog en verdwijnt langs dezelfde weg (het script in Toestemming.astro zet de klasse `zichtbaar`). */

.toestemming {
  position: fixed;
  bottom: 16px;
  left: max(var(--marge), (100% - var(--breed)) / 2);
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(400px, 100% - 32px);
  padding: var(--vlak);
  border-radius: 20px;
  background: #fff;
  box-shadow:
    0 1px 2px rgb(0 0 0 / 0.06),
    0 16px 48px rgb(0 0 0 / 0.18);
  opacity: 0;
  transform: translateY(calc(100% + 32px));
  transition:
    transform 0.5s cubic-bezier(0.32, 0.72, 0, 1),
    opacity 0.3s ease;
}

.toestemming.zichtbaar {
  opacity: 1;
  transform: none;
}

.toestemming[hidden] {
  display: none;
}

.toestemming h2 {
  font-size: var(--t-groot);
  line-height: var(--r-groot);
  letter-spacing: 0.01em;
}

.toestemming p {
  color: #3d5357;
  font-size: var(--t-ui);
  line-height: 1.5;
}

.toestemming p a {
  color: inherit;
  text-decoration: underline;
}

.toestemming-knoppen {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.toestemming-knop {
  height: 44px;
  border-radius: 12px;
  background: #000;
  color: #fff;
  font-size: var(--t-ui);
  font-weight: 700;
  transition:
    background-color 0.2s,
    transform 100ms ease-out;
}

.toestemming-knop:hover {
  background: #4f5758;
}

.toestemming-knop:active {
  transform: scale(0.97);
}

.toestemming-knop:focus-visible {
  outline: 2px solid var(--turquoise);
  outline-offset: 2px;
}

/* Op een telefoon over de volle breedte, net boven de onderrand en de balk van de iPhone */
@media (max-width: 767px) {
  .toestemming {
    right: 12px;
    bottom: max(12px, env(safe-area-inset-bottom));
    left: 12px;
    width: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .toestemming {
    transform: none;
    transition: opacity 0.2s ease;
  }
}

/* ---------- Minder beweging ---------- */

/* Wie op zijn apparaat "minder beweging" heeft ingesteld krijgt een rustige pagina: geen groeiend menu,
   geen zoom en geen wisselende foto (dat laatste regelt het script in Layout.astro) */
@media (prefers-reduced-motion: reduce) {
  .tabs-pil {
    transition: none;
  }

  .hero-dia,
  .tegel img,
  .vraag::details-content {
    transition: none;
  }

  a.tegel:hover img {
    transform: none;
  }

  .mobielmenu {
    transform: none;
  }
}
/* De beweging op de site.
   Alles hangt aan de klasse `beweging` op <html>, die het script in de kop van de pagina zet. Zonder script, of bij
   "minder beweging" op het apparaat, staat die er niet en staat alles gewoon stil in beeld.

   Twee vaste keuzes: alleen eigenschappen die de browser soepel kan bewegen (plaats, schaal, doorzichtigheid en
   een uitsnede), en één uitloop voor alles: snel op gang, rustig tot stilstand. */

:root {
  --uitloop: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Het laadscherm: bij het openen van de pagina staat eerst het logo op een leeg vlak, met de praktijk in één regel
   en een lijn die zich trekt. Na anderhalve seconde schuift het vlak naar boven weg en begint de pagina.
   Alleen met beweging (de klasse met-laadscherm komt uit het script in de kop van de pagina). */
.laadscherm {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding-inline: 24px;
  background: var(--grond);
  text-align: center;
}

.met-laadscherm .laadscherm {
  display: flex;
  animation: laadscherm-weg 0.9s cubic-bezier(0.76, 0, 0.24, 1) 1.5s forwards;
}

.laadscherm-logo {
  width: 160px;
  animation: laadscherm-in 0.8s var(--uitloop) 0.1s both;
}

.laadscherm-tekst {
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  animation: laadscherm-in 0.8s var(--uitloop) 0.3s both;
}

.laadscherm-lijn {
  width: 112px;
  height: 1px;
  background: var(--turquoise);
  animation: laadscherm-lijn 1.1s var(--uitloop) 0.45s both;
}

@keyframes laadscherm-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}

@keyframes laadscherm-lijn {
  from {
    transform: scaleX(0);
  }
}

@keyframes laadscherm-weg {
  to {
    transform: translateY(-100%);
    visibility: hidden;
  }
}

/* 1. De slogan komt bij het laden regel voor regel van onder uit een onzichtbare rand omhoog.
      De rand krijgt wat ruimte rondom, anders snijdt hij de staart van de g en de komma af. */
.beweging .regel {
  display: block;
  margin: -0.05em -0.1em -0.18em;
  padding: 0.05em 0.1em 0.18em;
  overflow: hidden;
  vertical-align: top;
}

.beweging .regel > span {
  display: inline-block;
  translate: 0 115%;
  transition: translate 1s var(--uitloop);
}

.beweging .regel + .regel > span {
  transition-delay: 0.12s;
}

.beweging.geladen .regel > span {
  translate: none;
}

/* 2. De foto in de hero zoomt heel langzaam in zolang hij in beeld staat, zodat het beeld leeft */
.beweging .hero-dia {
  transition:
    opacity 2.5s,
    transform 9s linear;
}

.beweging.geladen .hero-dia.actief {
  transform: scale(1.07);
}

/* 3. Bij het wegscrollen schuift de foto trager mee dan de pagina en vervaagt de slogan: de hero krijgt diepte.
      Het script in Layout.astro geeft door hoe ver er gescrold is (--hero-y), alleen op een groot scherm. */
.beweging .hero-dia {
  translate: 0 calc(var(--hero-y, 0) * 0.3px);
}

.beweging .hero-kop {
  opacity: calc(1 - var(--hero-y, 0) / 600);
  translate: 0 calc(var(--hero-y, 0) * -0.12px);
}

/* 4. Koppen, teksten, tegels en vragen komen op zodra ze in beeld scrollen: een klein stukje omhoog en
      van doorzichtig naar helder. Wat tegelijk in beeld komt volgt elkaar kort op (--vertraging, uit het script).
   5. Grote foto's schuiven van onder naar boven open in plaats van op te komen. */
.beweging [data-in] {
  transition:
    opacity 0.7s ease-out,
    translate 0.8s var(--uitloop),
    clip-path 1.1s var(--uitloop),
    transform 100ms ease-out;
  transition-delay: var(--vertraging, 0ms);
}

.beweging [data-in]:not([data-in="foto"]):not(.zichtbaar) {
  opacity: 0;
  translate: 0 28px;
}

.beweging [data-in="foto"] {
  clip-path: inset(0 round 10px);
}

.beweging [data-in="foto"]:not(.zichtbaar) {
  clip-path: inset(100% 0 0 0 round 10px);
}

/* 6. De drie stappen stapelen met diepte: schuift de volgende kaart eroverheen, dan wordt de kaart eronder iets
      kleiner en donkerder en blijft zijn bovenrand zichtbaar, als een stapel. Het script in Layout.astro rekent
      per kaart uit hoe ver hij bedekt is; de beweging volgt het scrollen één op één. */
.beweging .stap {
  transform-origin: top center;
}

/* Voor een strakke stapel zijn de drie kaarten even hoog: zo hoog als de hoogste. Op een telefoon is de
   middelste kaart een regel langer, en stak hij anders boven de laatste uit. */
.beweging .stappen {
  display: grid;
  grid-auto-rows: 1fr;
}

/* 7. Vertraagd scrollen heeft geen eigen stijl: dat doet Lenis, aangezet door het script in Layout.astro. */