/* ===========================================================================
   Gezondheidscentrum Binnenstad, Utrecht
   ---------------------------------------------------------------------------
   Richting: het pand zelf. Een fysiologisch laboratorium uit 1865 met
   boogramen en gestucte pilasters, waarin de zorg over drie verdiepingen is
   verdeeld. Twee motieven lopen door de hele pagina:
     1. de pil, overgenomen uit hun eigen verdiepingenschema (02 / 01 / BG);
     2. de boog, overgenomen uit de ramen van de gevel.
   De secties zijn lagen die met een afgeronde bovenrand over elkaar heen
   schuiven, zoals de verdiepingen op elkaar staan.
   =========================================================================== */

:root {
  --diep: #0d2238;
  --diep-2: #14314c;
  --marine: #24478c;
  --marine-diep: #1b3568;
  --lucht: #8cc6de;
  --lucht-licht: #e4eff5;
  --lucht-rand: #c6dfea;
  --aqua: #3bafbf;
  --limoen: #d2d53f;
  --zand: #f0e5d3;
  --papier: #fbf8f2;
  --inkt: #142231;
  --inkt-zacht: #4e6072;
  --rood: #780404;

  --opening-achtergrond: #0d2238;
  --opening-demping: .62;

  --display: 'Iowan Old Style', 'Palatino Linotype', Georgia, 'Times New Roman', serif;
  --tekst: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;

  --rand: clamp(1.25rem, 5vw, 5.5rem);
  --breed: 1320px;
  --kop-h: 4.5rem;
  --laag-radius: clamp(1.5rem, 4vw, 3rem);
  --sectie-y: clamp(4rem, 8vw, 7rem);
}

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

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

html.js { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--inkt);
  font-family: var(--tekst);
  font-size: clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a { color: inherit; }

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

h1, h2, h3 { margin: 0; font-weight: 400; }

ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }

button { font: inherit; color: inherit; }

/* ---- taalkeuze: één pagina, elke tekst per taal ------------------------ */

html[data-taal="nl"] [lang="en"] { display: none !important; }
html[data-taal="en"] [lang="nl"] { display: none !important; }

/* ---- hulpklassen ------------------------------------------------------- */

.anker { display: block; height: 0; }

.overslaan {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: .75rem 1.25rem;
  background: var(--diep);
  color: #fff;
  text-decoration: none;
}
.overslaan:focus { left: 0; }

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

/* =======================================================================
   TYPOGRAFIE
   ======================================================================= */

.titel {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.15rem);
  line-height: 1.05;
  letter-spacing: -.01em;
  text-wrap: balance;
  max-width: 19ch;
}

.titel--groot {
  font-size: clamp(2.2rem, 1.2rem + 3.8vw, 4.15rem);
  max-width: 17ch;
}

.titel--wit { color: #fff; }

.kop3 {
  font-family: var(--display);
  font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
  line-height: 1.15;
  letter-spacing: -.005em;
  max-width: 24ch;
}

.kop3--wit { color: #fff; }

.lead {
  font-size: clamp(1.08rem, 1rem + .45vw, 1.3rem);
  line-height: 1.5;
  color: var(--inkt);
  max-width: 48ch;
}

.lead--wit { color: rgba(255, 255, 255, .94); }

.nadruk { font-weight: 600; }

.opmaat {
  margin: 0 0 1.1rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--inkt-zacht);
}
.opmaat--licht { color: rgba(255, 255, 255, .72); }

/* de pil: het motief uit hun eigen verdiepingenschema */
.pil {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin: 0 0 1.4rem;
  padding: .36rem 1.05rem .4rem;
  border-radius: 999px;
  background: var(--lucht-licht);
  color: var(--marine);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
}
.pil::before {
  content: '';
  width: .42rem;
  height: .42rem;
  border-radius: 50%;
  background: currentColor;
}
.pil--licht { background: rgba(140, 198, 222, .16); color: var(--lucht); }
.pil--spoed { background: rgba(255, 255, 255, .14); color: #ffd9d9; }

.voetnoot {
  font-size: .9rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, .88);
  max-width: 66ch;
}

/* ---- knoppen ----------------------------------------------------------- */

.knoppenrij {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin-top: 1.6rem;
}

.knop {
  display: inline-flex;
  align-items: center;
  padding: .78rem 1.5rem .82rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .005em;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .25s ease, background-color .25s ease, border-color .25s ease, color .25s ease;
}

.knop--vol { background: var(--limoen); color: #11253a; }
.knop--vol:hover { background: #e2e55a; transform: translateY(-2px); }

.knop--rand { border-color: rgba(255, 255, 255, .45); color: #fff; }
.knop--rand:hover { border-color: #fff; background: rgba(255, 255, 255, .1); transform: translateY(-2px); }

.knop--donker { border-color: rgba(20, 34, 49, .25); color: var(--inkt); }
.knop--donker:hover { border-color: var(--inkt); background: rgba(20, 34, 49, .05); }

.knop--klein { padding: .5rem 1.05rem .55rem; font-size: .85rem; background: var(--marine); color: #fff; }
.knop--klein:hover { background: var(--marine-diep); }

.tekstlink {
  display: inline-block;
  margin-top: .35rem;
  color: var(--marine);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: opacity .2s ease;
}
.tekstlink:hover { opacity: .65; }
.tekstlink--licht { color: var(--lucht); }

/* =======================================================================
   KOPBALK
   ======================================================================= */

.kop {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  height: var(--kop-h);
  background: rgba(251, 248, 242, .9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(20, 34, 49, .09);
  transition: background-color .3s ease, box-shadow .3s ease;
}

.kop--vast { box-shadow: 0 10px 30px -22px rgba(13, 34, 56, .55); background: rgba(251, 248, 242, .97); }

.kop__binnen {
  max-width: var(--breed);
  height: 100%;
  margin: 0 auto;
  padding: 0 var(--rand);
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.kop__merk { display: flex; align-items: center; margin-right: auto; }
.kop__merk img { height: 1.6rem; width: auto; }

.kop__nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 2rem);
}

.kop__lijst {
  display: flex;
  gap: clamp(.9rem, 1.6vw, 1.75rem);
}

.kop__lijst a {
  font-size: .9rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--inkt);
  padding: .4rem 0;
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, color .25s ease;
}
.kop__lijst a:hover { border-color: var(--aqua); color: var(--marine); }

.taalkeuze {
  display: flex;
  border: 1px solid rgba(20, 34, 49, .18);
  border-radius: 999px;
  overflow: hidden;
}
.taalkeuze button {
  border: 0;
  background: transparent;
  padding: .35rem .7rem;
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .08em;
  cursor: pointer;
  color: var(--inkt-zacht);
  transition: background-color .2s ease, color .2s ease;
}
.taalkeuze button[aria-pressed="true"] { background: var(--diep); color: #fff; }

.kop__schakel {
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgba(20, 34, 49, .18);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  position: relative;
}
.kop__streep, .kop__streep::before, .kop__streep::after {
  position: absolute;
  left: 50%;
  width: 1.1rem;
  height: 1.5px;
  background: var(--inkt);
  transform: translateX(-50%);
  transition: transform .28s ease, opacity .2s ease;
}
.kop__streep { top: 50%; margin-top: -.75px; }
.kop__streep::before { content: ''; top: -5px; left: 0; transform: none; }
.kop__streep::after { content: ''; top: 5px; left: 0; transform: none; }
.kop__schakel[aria-expanded="true"] .kop__streep { background: transparent; }
.kop__schakel[aria-expanded="true"] .kop__streep::before { transform: translateY(5px) rotate(45deg); }
.kop__schakel[aria-expanded="true"] .kop__streep::after { transform: translateY(-5px) rotate(-45deg); }

/* =======================================================================
   DE OPENING (opmaak van kop, knoppen, slotregel en wenk)
   ======================================================================= */

/* De uitsnede van de gevel: iets naar beneden, zodat de gevelsteen in de
   filmband staat en niet alleen lucht. */
.opening__foto { object-position: 50% 56%; }

.opening__kop,
.opening__slot {
  padding: 0 var(--rand) clamp(3.5rem, 9svh, 6rem);
}

.opening__kolom {
  max-width: var(--breed);
  margin: 0 auto;
  width: 100%;
}

.opening__kop .opmaat { margin-bottom: .8rem; }

.opening__titel {
  font-family: var(--display);
  font-size: clamp(2.1rem, 1rem + 4.6vw, 4rem);
  line-height: .98;
  letter-spacing: -.015em;
  color: #fff;
  max-width: 15ch;
  text-wrap: balance;
}

.opening__lead {
  margin: .9rem 0 0;
  max-width: 40ch;
  color: rgba(255, 255, 255, .8);
  font-size: clamp(.95rem, .92rem + .25vw, 1.1rem);
  line-height: 1.5;
}

.opening__kop .knoppenrij { margin-top: 1.4rem; }

.opening__slotregel {
  font-family: var(--display);
  font-size: clamp(1.6rem, 1rem + 2.6vw, 3rem);
  line-height: 1.1;
  color: #fff;
  max-width: 18ch;
  margin: 0;
}

.opening__wenk {
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  color: rgba(255, 255, 255, .75);
}
.wenk__lijn {
  width: 1px;
  height: 2.4rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .85));
  transform-origin: top;
  animation: wenk 2.4s ease-in-out infinite;
}
.wenk__woord {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
}
@keyframes wenk {
  0%, 100% { transform: scaleY(.4); opacity: .5; }
  50% { transform: scaleY(1); opacity: 1; }
}

/* =======================================================================
   WELKOM, in het donker verder onder de hero
   ======================================================================= */

.welkom {
  background: var(--diep);
  color: #fff;
  padding: clamp(3.5rem, 7vw, 6rem) var(--rand) clamp(7rem, 13vw, 11rem);
  position: relative;
  overflow: hidden;
}

/* het boogmotief, heel licht, als textuur achter de welkomsectie */
.welkom::before {
  content: '';
  position: absolute;
  top: clamp(2rem, 5vw, 4rem);
  right: calc(var(--rand) * -.3);
  width: min(42vw, 30rem);
  aspect-ratio: 1 / 1.35;
  border: 1px solid rgba(140, 198, 222, .16);
  border-radius: 50% 50% 0 0 / 34% 34% 0 0;
  pointer-events: none;
}

.welkom__binnen {
  max-width: var(--breed);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(2rem, 5vw, 5rem);
  row-gap: clamp(2.5rem, 5vw, 4rem);
  position: relative;
}

.welkom__intro .titel { color: #fff; }
.welkom__tekst { align-self: end; color: rgba(255, 255, 255, .94); font-weight: 500; }
.welkom__tekst .lead { color: #fff; }

.waarden {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 2.25rem);
  border-top: 1px solid rgba(255, 255, 255, .16);
  padding-top: clamp(1.75rem, 3vw, 2.5rem);
}

.waarden li { display: flex; flex-direction: column; gap: .5rem; }

.waarden__nr {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(2rem, 1.2rem + 2.2vw, 3.1rem);
  line-height: 1;
  color: var(--lucht);
}

.waarden__tekst {
  margin: 0;
  font-size: clamp(.95rem, .9rem + .25vw, 1.08rem);
  font-weight: 500;
  line-height: 1.35;
  color: #fff;
  max-width: 14ch;
}

/* =======================================================================
   LAAGMOTIEF: elke band schuift met een afgeronde bovenrand over de vorige
   ======================================================================= */

.fysio,
.laag-licht,
.tarieven,
.contact {
  position: relative;
  z-index: 2;
  margin-top: calc(var(--laag-radius) * -1);
  border-radius: var(--laag-radius) var(--laag-radius) 0 0;
}

/* =======================================================================
   FYSIOTHERAPIE
   ======================================================================= */

.fysio {
  background: var(--papier);
  padding: var(--sectie-y) var(--rand) clamp(3.5rem, 7vw, 6rem);
  scroll-margin-top: var(--kop-h);
}

.fysio__binnen {
  max-width: var(--breed);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .68fr);
  grid-template-areas:
    "hoofd beeld"
    "hoofd tijden";
  column-gap: clamp(2rem, 4.5vw, 4.5rem);
  row-gap: clamp(2.5rem, 4vw, 3.5rem);
}

.fysio__hoofd { grid-area: hoofd; }
.fysio__beeld { grid-area: beeld; position: relative; margin-top: clamp(-9rem, -7vw, -4rem); }
.kaart--tijden { grid-area: tijden; align-self: start; }
.afspraak { max-width: 58ch; margin-top: clamp(1.75rem, 3vw, 2.5rem); }

/* de boog uit de ramen van de gevel */
.boog {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 62%;
  border-radius: 50% 50% 6px 6px / 34% 34% 1% 1%;
}

.fysio__etage {
  position: absolute;
  left: 50%;
  bottom: -1.35rem;
  transform: translateX(-50%);
  margin: 0;
  min-width: 4.4rem;
  padding: .45rem 1.1rem .5rem;
  border-radius: 999px;
  background: var(--limoen);
  color: #11253a;
  font-family: var(--display);
  font-size: 1.35rem;
  line-height: 1;
  text-align: center;
}

.bericht {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  padding: clamp(1.4rem, 2.5vw, 2rem);
  border-radius: 1.25rem;
  background: var(--lucht-licht);
  border: 1px solid var(--lucht-rand);
  max-width: 62ch;
}

.bericht__kop {
  font-family: var(--display);
  font-size: clamp(1.25rem, 1.1rem + .6vw, 1.6rem);
  line-height: 1.15;
  margin-bottom: .6rem;
  color: var(--marine-diep);
}

.bericht p { font-size: .97rem; }

/* secundaire, kleinere variant: de migratienotitie komt na de echte inhoud */
.bericht--klein {
  margin-top: clamp(2.25rem, 4vw, 3rem);
  padding: clamp(1rem, 1.8vw, 1.3rem) clamp(1.1rem, 2vw, 1.5rem);
  max-width: 52ch;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--lucht-rand);
  border-radius: 0;
}
.bericht--klein .bericht__kop { font-size: 1rem; color: var(--inkt-zacht); }
.bericht--klein p { font-size: .88rem; color: var(--inkt-zacht); }

.kaart {
  padding: clamp(1.4rem, 2.5vw, 1.9rem);
  border-radius: 1.25rem;
  background: #fff;
  border: 1px solid rgba(20, 34, 49, .09);
  box-shadow: 0 24px 50px -40px rgba(13, 34, 56, .45);
}

.kaart__label {
  margin: 0 0 .9rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--inkt-zacht);
}
.kaart__label--verder { margin-top: 1.75rem; }

.tijden {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 1rem;
}
.tijden dt {
  padding: .45rem 0;
  border-top: 1px solid rgba(20, 34, 49, .08);
  font-size: .95rem;
}
.tijden dd {
  padding: .45rem 0;
  border-top: 1px solid rgba(20, 34, 49, .08);
  font-size: .95rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
/* de eerste regel heeft geen lijn, in welke taal die ook staat */
.tijden dt:first-of-type,
.tijden dt:first-of-type + dt,
.tijden dd:first-of-type { border-top: 0; }
.tijden--groepen dt { font-size: .9rem; max-width: 22ch; }

.afspraak p { max-width: 58ch; }

/* =======================================================================
   BAND: het pand uit 1865
   ======================================================================= */

.band {
  position: relative;
  min-height: clamp(26rem, 58vw, 40rem);
  display: grid;
  background: var(--diep);
}

.band__foto {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
}

.band__over {
  grid-area: 1 / 1;
  position: relative;
  align-self: end;
  max-width: var(--breed);
  width: 100%;
  margin: 0 auto;
  padding: clamp(3rem, 8vw, 6rem) var(--rand) clamp(4.5rem, 9vw, 7rem);
  background: linear-gradient(180deg, rgba(13, 34, 56, 0) 0%, rgba(13, 34, 56, .62) 42%, rgba(13, 34, 56, .88) 100%);
}

.band__jaar {
  margin: 0 0 .4rem;
  font-family: var(--display);
  font-size: clamp(3.5rem, 2rem + 8vw, 9rem);
  line-height: .85;
  color: var(--limoen);
  letter-spacing: -.02em;
}

.band__tekst {
  margin-top: 1.1rem;
  max-width: 62ch;
  color: rgba(255, 255, 255, .94);
}

/* op smalle schermen moet de gradient het hele beeld dekken */
@media (max-width: 760px) {
  .band__over { background: linear-gradient(180deg, rgba(13, 34, 56, .25) 0%, rgba(13, 34, 56, .78) 45%, rgba(13, 34, 56, .94) 100%); }
}

/* =======================================================================
   LICHTE LAAG: het pand en de zorgverleners
   ======================================================================= */

.laag-licht {
  background: var(--lucht-licht);
  overflow: hidden;
}

.pand {
  padding: var(--sectie-y) var(--rand) clamp(2.5rem, 5vw, 4rem);
  scroll-margin-top: var(--kop-h);
}

.pand__binnen { max-width: var(--breed); margin: 0 auto; }

.pand__hoofd {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  column-gap: clamp(2rem, 5vw, 5rem);
  align-items: end;
  margin-bottom: clamp(2.25rem, 4vw, 3.5rem);
}
.pand__hoofd .pil { grid-column: 1; }
.pand__hoofd .titel { grid-column: 1; }
.pand__hoofd .lead { grid-column: 2; padding-bottom: .4rem; }

.etages { display: flex; flex-direction: column; gap: clamp(.6rem, 1.2vw, 1rem); }

.etage {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding: clamp(1.1rem, 2.2vw, 1.6rem) clamp(1.4rem, 3vw, 2.4rem);
  border-radius: clamp(1.25rem, 3vw, 2.25rem);
  background: var(--marine);
  color: #fff;
  transition: transform .35s cubic-bezier(.2, .7, .3, 1), box-shadow .35s ease;
}
.etage:hover {
  transform: translateX(6px);
  box-shadow: 0 26px 46px -34px rgba(13, 34, 56, .8);
}

.etage--aan { background: var(--limoen); color: #11253a; }
.etage--bg { background: var(--marine-diep); }

.etage__naam {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.3rem, 1.05rem + .9vw, 1.9rem);
  line-height: 1.1;
}

.etage__lijst {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .5rem;
}
.etage__lijst li {
  padding: .25rem .8rem .3rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .35);
  font-size: .85rem;
  font-weight: 500;
}
.etage--aan .etage__lijst li { border-color: rgba(17, 37, 58, .35); }

.etage__nr {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(2.4rem, 1.6rem + 3vw, 4.4rem);
  line-height: .9;
  letter-spacing: -.02em;
  opacity: .92;
}

/* ---- register van zorgverleners ---------------------------------------- */

.register {
  padding: clamp(2.5rem, 5vw, 4rem) var(--rand) var(--sectie-y);
  scroll-margin-top: var(--kop-h);
}

.register__binnen { max-width: var(--breed); margin: 0 auto; }

.register__hoofd { margin-bottom: clamp(1.75rem, 3vw, 2.75rem); }

.post {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1.5fr) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  gap: .9rem clamp(1rem, 3vw, 2.5rem);
  padding: clamp(1.75rem, 3vw, 2.5rem) 0;
  border-top: 1px solid var(--lucht-rand);
}
.post:last-child { border-bottom: 1px solid var(--lucht-rand); }

.post__naam {
  grid-column: 1;
  grid-row: 1;
  font-family: var(--display);
  font-size: clamp(1.3rem, 1.1rem + .8vw, 1.75rem);
  line-height: 1.1;
  color: var(--marine-diep);
  max-width: 14ch;
}

.post__tekst { grid-column: 2; grid-row: 1 / span 2; }
.post__gegevens { grid-column: 3; grid-row: 1 / span 2; }
.post:not(:has(.post__gegevens)) .post__tekst { grid-column: 2 / -1; }

.post__etage {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  justify-self: start;
  margin: 0;
  font-family: var(--display);
  font-size: .95rem;
  line-height: 1;
  padding: .3rem .7rem .35rem;
  border-radius: 999px;
  background: rgba(36, 71, 140, .1);
  color: var(--marine);
}

.post__tekst p { font-size: .97rem; color: #27394a; }
.post__tekst .nadruk { color: var(--inkt); }

.post__sub {
  font-weight: 700;
  font-size: .95rem !important;
  color: var(--marine-diep) !important;
  margin-bottom: .35rem;
}
.post__tekst .tekstlink + .post__sub { margin-top: 1.4rem; }

.post__gegevens {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  font-size: .92rem;
  align-content: start;
}
.post__gegevens dt {
  margin-top: .9rem;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--inkt-zacht);
}
.post__gegevens dt:first-of-type,
.post__gegevens dt:first-of-type + dt { margin-top: 0; }
.post__gegevens dd { word-break: break-word; }
.post__gegevens a { text-decoration: none; border-bottom: 1px solid rgba(36, 71, 140, .3); color: var(--marine-diep); font-weight: 500; }
.post__gegevens a:hover { border-bottom-color: currentColor; }

/* =======================================================================
   TARIEVEN
   ======================================================================= */

.tarieven {
  background: var(--diep);
  color: rgba(255, 255, 255, .8);
  padding: var(--sectie-y) var(--rand) clamp(3rem, 6vw, 5rem);
  scroll-margin-top: var(--kop-h);
  overflow: hidden;
}

.tarieven__binnen { max-width: var(--breed); margin: 0 auto; }

.tarieven__hoofd {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  column-gap: clamp(2rem, 5vw, 5rem);
  align-items: end;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.tarieven__hoofd .pil, .tarieven__hoofd .titel { grid-column: 1; }
.tarieven__hoofd .lead { grid-column: 2; }

.tarieven__blok {
  border-top: 1px solid rgba(255, 255, 255, .16);
  padding: clamp(1.75rem, 3vw, 2.5rem) 0;
  display: grid;
  grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
  gap: 1rem clamp(1rem, 3vw, 3rem);
}
.tarieven__blok > .kop3 { grid-column: 1; }
.tarieven__blok > *:not(.kop3) { grid-column: 2; }

.prijslijst { display: flex; flex-direction: column; }

.prijslijst li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding: .6rem 0;
  border-bottom: 1px dotted rgba(255, 255, 255, .25);
}
.prijslijst li:first-child { border-top: 1px dotted rgba(255, 255, 255, .25); }

.prijs__wat { margin: 0; color: #fff; font-size: .98rem; }
.prijs__bedrag {
  margin: 0;
  font-family: var(--display);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--limoen);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.tabel-houder { overflow-x: auto; }

.tabel {
  width: 100%;
  min-width: 20rem;
  border-collapse: collapse;
  font-size: .95rem;
}
.tabel th, .tabel td { text-align: left; padding: .6rem .75rem .6rem 0; }
.tabel thead th {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--lucht);
  border-bottom: 1px solid rgba(255, 255, 255, .25);
  white-space: nowrap;
}
.tabel tbody th { font-weight: 500; color: #fff; }
.tabel tbody td {
  font-family: var(--display);
  font-size: 1.2rem;
  color: var(--limoen);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.tabel tbody tr { border-bottom: 1px dotted rgba(255, 255, 255, .2); }
.tabel thead th:nth-child(n+3), .tabel tbody td { text-align: right; }

/* ---- rookvrij ---------------------------------------------------------- */

.rookvrij {
  display: grid;
  grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
  margin-top: clamp(1rem, 2vw, 2rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid rgba(255, 255, 255, .16);
}

.rookvrij__beeld img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 50% 30%;
  border-radius: 1.25rem;
}

.rookvrij__tekst p { color: rgba(255, 255, 255, .94); max-width: 56ch; }
.rookvrij__tekst .kop3 { margin-bottom: .8rem; }

/* =======================================================================
   CONTACT
   ======================================================================= */

.contact {
  background: var(--papier);
  padding: var(--sectie-y) var(--rand) clamp(3.5rem, 7vw, 6rem);
  scroll-margin-top: var(--kop-h);
}

.contact__binnen { max-width: var(--breed); margin: 0 auto; }

.contact__hoofd { margin-bottom: clamp(2rem, 4vw, 3rem); }

.contact__raster {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
  align-items: start;
}

.kaart--contact .post__gegevens { font-size: .95rem; }

.adres { margin: 0; font-size: 1.05rem; font-weight: 500; }
.adres + .adres { margin-top: .1rem; }

.spoed {
  padding: clamp(1.4rem, 2.5vw, 1.9rem);
  border-radius: 1.25rem;
  background: var(--rood);
  color: #fff;
}
.spoed .kop3 { margin-bottom: 1.2rem; }
.post__gegevens--wit dt { color: rgba(255, 255, 255, .7); }
.post__gegevens--wit a { color: #fff; border-bottom-color: rgba(255, 255, 255, .45); }
.spoed__tekst { margin-top: 1.4rem; font-size: .9rem; color: rgba(255, 255, 255, .82); }

/* =======================================================================
   VOET
   ======================================================================= */

.voet {
  background: var(--zand);
  color: var(--inkt);
  padding: clamp(3rem, 6vw, 5rem) var(--rand) 2rem;
}

.voet__binnen {
  max-width: var(--breed);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
}

.voet__logo { width: min(100%, 17rem); height: auto; }

.voet__regel {
  margin: 1.25rem 0 0;
  font-family: var(--display);
  font-size: 1.35rem;
  line-height: 1.2;
  max-width: 16ch;
  color: var(--marine-diep);
}

.voet__tekst { font-size: .88rem; line-height: 1.6; color: #42505c; }

.voet__kolom .tekstlink { display: block; width: fit-content; font-size: .88rem; }

.voet__slot {
  max-width: var(--breed);
  margin: clamp(2.5rem, 5vw, 4rem) auto 0;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(20, 34, 49, .14);
  font-size: .8rem;
  color: #5b6873;
}

/* =======================================================================
   404
   ======================================================================= */

.fout-pagina { background: var(--diep); }

.fout {
  display: grid;
  min-height: 100svh;
  background: var(--diep);
}

.fout__foto {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 58%;
}

.fout__over {
  grid-area: 1 / 1;
  position: relative;
  align-self: end;
  width: 100%;
  max-width: var(--breed);
  margin: 0 auto;
  padding: clamp(4rem, 12vw, 8rem) var(--rand) clamp(3.5rem, 8vw, 6rem);
  background: linear-gradient(180deg, rgba(13, 34, 56, 0) 0%, rgba(13, 34, 56, .72) 40%, rgba(13, 34, 56, .93) 100%);
}

.fout__nr {
  margin: 0 0 .3rem;
  font-family: var(--display);
  font-size: clamp(3.5rem, 2rem + 8vw, 8rem);
  line-height: .85;
  color: var(--limoen);
}

/* =======================================================================
   ONTHULLEN (korte overgangen, geen scroll-scrub)
   ======================================================================= */

html.reveal-aan [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s cubic-bezier(.2, .7, .3, 1), transform .7s cubic-bezier(.2, .7, .3, 1);
}
html.reveal-aan [data-reveal].zichtbaar { opacity: 1; transform: none; }

/* =======================================================================
   RESPONSIEF
   ======================================================================= */

@media (max-width: 1080px) {
  .post { grid-template-columns: minmax(0, 12rem) minmax(0, 1.4fr) minmax(0, 1fr); }
  .etage { grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) auto; }
}

@media (max-width: 960px) {
  :root { --kop-h: 3.9rem; }

  .kop__merk img { height: 1.4rem; }
  .kop__schakel { display: block; }

  .kop__nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: .25rem;
    padding: 1rem var(--rand) 1.5rem;
    background: var(--papier);
    border-bottom: 1px solid rgba(20, 34, 49, .1);
    box-shadow: 0 24px 40px -30px rgba(13, 34, 56, .6);
    display: none;
  }
  .kop__nav[data-open="ja"] { display: flex; }

  .kop__lijst { flex-direction: column; gap: 0; }
  .kop__lijst a { display: block; padding: .7rem 0; border-bottom: 1px solid rgba(20, 34, 49, .08); }
  .kop__nav .knop--klein { align-self: flex-start; margin-top: 1rem; }

  .welkom__binnen { grid-template-columns: minmax(0, 1fr); }
  .welkom::before { display: none; }
  .waarden { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.75rem; }

  .fysio__binnen {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "beeld" "hoofd" "tijden";
  }
  .fysio__beeld { margin-top: clamp(-6rem, -12vw, -3rem); max-width: 24rem; }
  .boog { aspect-ratio: 1 / 1; }

  .pand__hoofd { grid-template-columns: minmax(0, 1fr); row-gap: 1.25rem; }
  .pand__hoofd .pil, .pand__hoofd .titel, .pand__hoofd .lead { grid-column: 1; }

  .etage {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    row-gap: .85rem;
  }
  .etage__naam { grid-column: 1; grid-row: 1; }
  .etage__nr { grid-column: 2; grid-row: 1; }
  .etage__lijst { grid-column: 1 / -1; grid-row: 2; }

  .post {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    gap: 1rem;
  }
  .post__naam, .post__etage, .post__tekst, .post__gegevens,
  .post:not(:has(.post__gegevens)) .post__tekst { grid-column: 1; grid-row: auto; }
  .post__naam { max-width: 26ch; }
  .post__etage { order: -1; }

  .tarieven__hoofd { grid-template-columns: minmax(0, 1fr); row-gap: 1.25rem; }
  .tarieven__hoofd .pil, .tarieven__hoofd .titel, .tarieven__hoofd .lead { grid-column: 1; }
  .tarieven__blok { grid-template-columns: minmax(0, 1fr); }
  .tarieven__blok > .kop3, .tarieven__blok > *:not(.kop3) { grid-column: 1; }

  .rookvrij { grid-template-columns: minmax(0, 1fr); }
  .rookvrij__beeld { max-width: 18rem; }

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

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

@media (max-width: 560px) {
  .waarden { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .waarden li { flex-direction: row; align-items: baseline; gap: 1rem; }
  .waarden__nr { font-size: 1.6rem; }
  .waarden__tekst { max-width: none; }

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

  .prijslijst li { flex-direction: column; gap: .15rem; align-items: flex-start; }
  .prijs__bedrag { font-size: 1.35rem; }

  .tabel { font-size: .85rem; }
  .tabel tbody td { font-size: 1.05rem; }
  .tabel th, .tabel td { padding: .5rem .5rem .5rem 0; }

  .opening__kop, .opening__slot { padding-bottom: clamp(2.5rem, 7svh, 4rem); }
  .opening__lead { font-size: .95rem; }
  .knoppenrij { gap: .5rem; }
  .knop { padding: .68rem 1.15rem .72rem; font-size: .9rem; }

  .fysio__beeld { margin-top: -3.5rem; }
}

/* =======================================================================
   MINDER BEWEGING
   ======================================================================= */

@media (prefers-reduced-motion: reduce) {
  html.js { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0s !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .wenk__lijn { animation: none; transform: scaleY(1); }
}