/* ==========================================================================
   Pedicurepraktijk Voetbijstuk: ontwerpsysteem
   Ontwerp & realisatie: Finjay (https://finjay.nl)

   Richting: "Beauty en zacht" uit de Finjay stijlenbibliotheek. Wat daaruit
   vastligt en hier is aangehouden: zacht contrast (de donkerste kleur is een
   warme bruintint, nergens zwart), ronde vormen als taal, serif voor de kop en
   sans voor de rest, en een route: bellen voor een afspraak.

   Wat van deze praktijk zelf is: het palet komt uit de praktijkkleur #d8aa9a,
   het vormmotief is de sokkel uit het logo (boog boven, plint onder), en de
   letter is Marcellus, een Romeinse kapitaal en daarmee familie van de zuil
   waar het merk op staat.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Ontwerpwaarden

   Het palet is een ladder. Alles is afgeleid van #d8aa9a: kleurtoon 15,5
   graden blijft staan, alleen verzadiging en lichtheid verschuiven. Daardoor
   zit er geen enkele losse kleur in het ontwerp. De verhouding achter elke
   tekstkleur is gemeten tegen wit.
   -------------------------------------------------------------------------- */
:root {
  /* merk */
  --kleur-merk: #d8aa9a;          /* de praktijkkleur zelf: vlakken, lijnen, iconen. Nooit tekst. */
  --kleur-merk-mid: #ba765e;      /* randen en decoratie die iets meer moeten dragen (3,6:1) */
  --kleur-merk-diep: #9b5c46;     /* primaire actie en accenttekst (5,2:1) */
  --kleur-merk-donker: #724231;   /* zweefstand van de primaire actie (8,3:1) */

  /* achtergronden */
  --kleur-wit: #ffffff;
  --kleur-room: #fdfaf9;
  --kleur-blos: #f7edea;
  --kleur-blos-diep: #eddad4;
  --kleur-steen: #edeae7;         /* de sokkel: de enige ontzadigde tint, uit het logo */
  --kleur-voet: #3a2a24;          /* voettekst */

  /* tekst */
  --kleur-inkt: #33241f;          /* 14,9:1 */
  --kleur-inkt-zacht: #513b34;    /* 10,4:1 */
  --kleur-gedempt: #7c655c;       /* 5,4:1, alleen op wit, room of blos */
  --kleur-op-donker: #f7edea;
  --kleur-op-donker-zacht: #d3bcb3;

  /* lijnen */
  --kleur-lijn: #efe1dc;
  --kleur-lijn-sterk: #e2c8bf;

  /* letters */
  --letter-kop: "Marcellus", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --letter-tekst: "Mulish", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* trapje voor lettergroottes */
  --stap--2: 0.75rem;
  --stap--1: clamp(0.82rem, 0.80rem + 0.10vw, 0.875rem);
  --stap-0: clamp(1rem, 0.98rem + 0.10vw, 1.0625rem);
  --stap-1: clamp(1.13rem, 1.09rem + 0.20vw, 1.25rem);
  --stap-2: clamp(1.35rem, 1.27rem + 0.40vw, 1.6rem);
  --stap-3: clamp(1.62rem, 1.48rem + 0.70vw, 2.1rem);
  --stap-4: clamp(1.95rem, 1.68rem + 1.35vw, 2.9rem);
  --stap-5: clamp(2.35rem, 1.85rem + 2.50vw, 4rem);

  /* ruimte, in stappen van vier punten */
  --r-1: 0.25rem;  --r-2: 0.5rem;   --r-3: 0.75rem;  --r-4: 1rem;
  --r-5: 1.5rem;   --r-6: 2rem;     --r-7: 3rem;     --r-8: 4rem;
  --r-9: 6rem;     --r-10: 8rem;

  /* rondingen: een maat per soort, consequent volgehouden */
  --rond-s: 10px;
  --rond-m: 18px;
  --rond-l: 26px;
  --rond-pil: 999px;
  --boog: 999px 999px var(--rond-l) var(--rond-l);   /* het motief: nis boven, plint onder */

  /* schaduwen, altijd warm getint; nergens grijs op deze site */
  --schaduw-s: 0 1px 2px rgba(51, 36, 31, 0.04), 0 6px 16px -10px rgba(51, 36, 31, 0.14);
  --schaduw-m: 0 2px 6px rgba(51, 36, 31, 0.04), 0 20px 44px -26px rgba(51, 36, 31, 0.30);
  --schaduw-l: 0 4px 10px rgba(51, 36, 31, 0.04), 0 40px 70px -34px rgba(51, 36, 31, 0.34);

  --breedte: 1180px;
  --overgang: 220ms cubic-bezier(0.32, 0.72, 0.35, 1);
}

/* --------------------------------------------------------------------------
   2. Letters, zelf gehost

   Twee bestanden, samen 44 kB. Geen verbinding met een derde partij, dus ook
   geen extra DNS-ronde voordat er een letter op het scherm staat.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Marcellus";
  src: url("../fonts/marcellus-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Mulish";
  src: url("../fonts/mulish-latin-var.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   3. Grondslag
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  background: var(--kleur-wit);
  color: var(--kleur-inkt);
  font-family: var(--letter-tekst);
  font-size: var(--stap-0);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3, h4 {
  font-family: var(--letter-kop);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -0.005em;
  color: var(--kleur-inkt);
  margin: 0 0 var(--r-4);
  text-wrap: balance;
}
h1 { font-size: var(--stap-5); line-height: 1.05; }
h2 { font-size: var(--stap-4); }
h3 { font-size: var(--stap-2); }
h4 { font-size: var(--stap-1); }
p { margin: 0 0 var(--r-4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--kleur-merk-diep); text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
a:hover { color: var(--kleur-merk-donker); }

:focus-visible {
  outline: 2px solid var(--kleur-merk-diep);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--kleur-blos-diep); color: var(--kleur-inkt); }

.overslaan {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--kleur-wit);
  color: var(--kleur-inkt);
  padding: var(--r-3) var(--r-5);
  border-radius: 0 0 var(--rond-m) 0;
  box-shadow: var(--schaduw-m);
  text-decoration: none;
  font-weight: 700;
}
.overslaan:focus { left: 0; }

.verborgen-visueel {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

/* --------------------------------------------------------------------------
   4. Indeling
   -------------------------------------------------------------------------- */
.omhulsel { width: min(100% - 2.5rem, var(--breedte)); margin-inline: auto; }
@media (min-width: 640px) { .omhulsel { width: min(100% - 4rem, var(--breedte)); } }

.sectie { padding-block: clamp(3.25rem, 2.2rem + 4.4vw, 6.5rem); }
.sectie--kort { padding-block: clamp(2.5rem, 1.9rem + 2.6vw, 4.25rem); }
.sectie--blos { background: var(--kleur-blos); }
.sectie--room { background: var(--kleur-room); }

.kop-blok { max-width: 44rem; margin-bottom: clamp(2rem, 1.4rem + 2vw, 3.25rem); }
.kop-blok--midden { margin-inline: auto; text-align: center; }
/* Niet voor het bovenkopje: dat ziet er overal hetzelfde uit (sectie 4,
   .bovenkop), ook boven een kop-blok. */
.kop-blok p:not(.bovenkop) { color: var(--kleur-gedempt); font-size: var(--stap-1); margin-bottom: 0; }
.kop-blok h2 { margin-bottom: var(--r-3); }

/* het bovenkopje: klein, gespatieerd, met een streepje ervoor */
.bovenkop {
  display: flex;
  align-items: center;
  gap: var(--r-3);
  margin: 0 0 var(--r-4);
  font-size: var(--stap--2);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--kleur-merk-diep);
}
.bovenkop::before {
  content: "";
  width: 28px; height: 2px;
  background: var(--kleur-merk);
  border-radius: 2px;
  flex: none;
}
.kop-blok--midden .bovenkop { justify-content: center; }

.lead { font-size: var(--stap-1); color: var(--kleur-inkt-zacht); line-height: 1.6; }
.klein { font-size: var(--stap--1); color: var(--kleur-gedempt); }
/* losse links in kleine tekst krijgen wat lucht, anders is het raakvlak
   niet meer dan een regel hoog */
.klein a, .oproep__mail a { display: inline-block; padding-block: 4px; }

/* --------------------------------------------------------------------------
   5. Knoppen: pillen, zoals de richting voorschrijft
   -------------------------------------------------------------------------- */
.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--r-2);
  min-height: 52px;
  padding: 0.85rem 1.6rem;
  border: 1px solid transparent;
  border-radius: var(--rond-pil);
  font-family: var(--letter-tekst);
  font-size: var(--stap-0);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--overgang), color var(--overgang),
              border-color var(--overgang), transform var(--overgang),
              box-shadow var(--overgang);
}
.knop:active { transform: translateY(1px); }
.knop svg { width: 19px; height: 19px; flex: none; }

.knop--bellen {
  background: var(--kleur-merk-diep);
  color: var(--kleur-wit);
  box-shadow: 0 12px 26px -16px rgba(114, 66, 49, 0.9);
}
.knop--bellen:hover { background: var(--kleur-merk-donker); color: var(--kleur-wit); }

.knop--rand { background: transparent; border-color: var(--kleur-lijn-sterk); color: var(--kleur-inkt); }
.knop--rand:hover { background: var(--kleur-blos); border-color: var(--kleur-merk); color: var(--kleur-inkt); }

.knop--wit { background: var(--kleur-wit); color: var(--kleur-inkt); box-shadow: var(--schaduw-s); }
.knop--wit:hover { color: var(--kleur-merk-diep); }

.knoppen { display: flex; flex-wrap: wrap; gap: var(--r-3); align-items: center; }

/* Het raakvlak van een tekstlink is de regelhoogte, en dat is met een duim
   aan de krappe kant. Vandaar wat lucht boven en onder: de link blijft er
   hetzelfde uitzien, maar is een stuk makkelijker te raken. */
.verder {
  display: inline-flex;
  align-items: center;
  padding-block: 5px;
  gap: var(--r-2);
  font-weight: 700;
  font-size: var(--stap--1);
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--kleur-merk-diep);
}
.verder svg { width: 16px; height: 16px; transition: transform var(--overgang); }
.verder:hover svg { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   6. Beeld in een boog

   Het vormmotief van deze site. Boven rond als de nis van een zuil, onder
   recht, want daar staat het beeld op zijn plint. Overal dezelfde vorm.
   -------------------------------------------------------------------------- */
.boog {
  position: relative;
  overflow: hidden;
  border-radius: var(--boog);
  background: var(--kleur-blos);
}
.boog img { width: 100%; height: 100%; object-fit: cover; }
/* Een haarlijn binnen de rand. De praktijkfoto's hebben lichte delen (een
   raam, het plafond) die anders tegen de witte pagina wegvallen; zo blijft de
   boog ook daar een boog. */
.boog::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(51, 36, 31, 0.08);
  pointer-events: none;
}
.boog--half { border-radius: var(--rond-l) var(--rond-l) var(--rond-l) var(--rond-l); }

/* cannelures: de groeven van de zuil, als heel lichte textuur. Eén plek per
   pagina, anders wordt het behang. */
.cannelure {
  background-image: repeating-linear-gradient(
    90deg,
    rgba(216, 170, 154, 0.16) 0 1px,
    transparent 1px 14px
  );
}

/* --------------------------------------------------------------------------
   7. Kop van de pagina

   Het logo is hoog en smal (verhouding 1 : 2,4) en past niet als liggend
   beeldmerk in een balk. In de navigatie staat daarom de compacte uitsnede,
   de voeten met hun dekplaat, in een nisje dat een stukje onder de balk uit
   steekt: het merk staat op zijn voetstuk in plaats van erin geperst. Het
   volledige merk krijgt zijn maat in de held en in de voettekst.
   -------------------------------------------------------------------------- */
.kop {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid var(--kleur-lijn);
  transition: box-shadow var(--overgang), background var(--overgang);
}
@supports (backdrop-filter: blur(10px)) {
  .kop { background: rgba(255, 255, 255, 0.82); backdrop-filter: blur(14px) saturate(140%); }
}
.kop--gezakt { box-shadow: 0 10px 30px -22px rgba(51, 36, 31, 0.5); }

.kop__binnen {
  display: flex;
  align-items: center;
  gap: var(--r-4);
  min-height: 70px;
}

.merk { display: flex; align-items: center; gap: var(--r-3); padding-block: 6px; text-decoration: none; color: inherit; }

/* Het merk staat vrij in de balk, even veel lucht boven als onder, net als de
   naam ernaast. De uitsnede loopt door tot in de zuil, zodat er ook op deze
   maat een sokkel te zien is en niet alleen twee voeten. */
.merk__nis { flex: none; display: block; transition: transform var(--overgang); }
.merk__nis img { height: 52px; width: auto; }
.merk:hover .merk__nis { transform: translateY(-2px); }

.merk__naam { display: block; font-family: var(--letter-kop); font-size: 1.3rem; line-height: 1.05; }
.merk__onder {
  display: block;
  margin-top: 2px;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--kleur-gedempt);
  white-space: nowrap;
}
/* Op een smal scherm past de plaatsnaam er niet naast zonder dat de regel
   omslaat en de balk hoger wordt. Hij staat daar direct onder in de held. */
@media (max-width: 559px) { .merk__plaats { display: none; } }

.kop__acties { display: flex; align-items: center; gap: var(--r-2); margin-left: auto; }

.hoofdnav { display: none; }
.hoofdnav ul { display: flex; align-items: center; gap: clamp(0.4rem, 0.1rem + 0.9vw, 1.1rem); list-style: none; margin: 0; padding: 0; }
.hoofdnav a {
  position: relative;
  display: block;
  white-space: nowrap;
  padding: 0.55rem 0.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--kleur-inkt-zacht);
  transition: color var(--overgang);
}
.hoofdnav a::after {
  content: "";
  position: absolute;
  left: 0.5rem; right: 0.5rem; bottom: 0.3rem;
  height: 2px;
  border-radius: 2px;
  background: var(--kleur-merk);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--overgang);
}
.hoofdnav a:hover { color: var(--kleur-inkt); }
.hoofdnav a:hover::after { transform: scaleX(1); }
.hoofdnav a[aria-current="page"] { color: var(--kleur-inkt); }
.hoofdnav a[aria-current="page"]::after { transform: scaleX(1); background: var(--kleur-merk-mid); }

.kop__bellen { min-height: 44px; padding: 0.55rem 1.1rem; font-size: 0.94rem; }
.kop__bellen .lang { display: none; }

/* schakelaar voor het mobiele menu */
.menuknop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  padding: 0;
  border: 1px solid var(--kleur-lijn-sterk);
  border-radius: var(--rond-pil);
  background: var(--kleur-wit);
  color: var(--kleur-inkt);
  cursor: pointer;
}
.menuknop svg { width: 20px; height: 20px; }
.menuknop .kruis { display: none; }
.menuknop[aria-expanded="true"] .streep { display: none; }
.menuknop[aria-expanded="true"] .kruis { display: block; }

.mobielmenu {
  display: none;
  border-top: 1px solid var(--kleur-lijn);
  background: var(--kleur-wit);
}
.mobielmenu[data-open="true"] { display: block; }
/* De belknop is het laatste element in het paneel. Zonder deze ruimte staat
   hij met zijn onderrand op de rand van het paneel zelf. */
.mobielmenu > .omhulsel { padding-bottom: var(--r-5); }
.mobielmenu ul { list-style: none; margin: 0; padding: var(--r-3) 0 var(--r-4); }
.mobielmenu ul a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.95rem 0.25rem;
  border-bottom: 1px solid var(--kleur-lijn);
  font-size: 1.05rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--kleur-inkt);
}
.mobielmenu ul a[aria-current="page"] { color: var(--kleur-merk-diep); }
.mobielmenu ul a svg { width: 15px; height: 15px; opacity: 0.5; }
.mobielmenu .knop { width: 100%; margin-top: var(--r-4); }

/* Op een smalle telefoon moeten merkzone, belknop en menuknop samen door
   320 punten. Dan krimpt alles een stapje: kleinere nis, kleinere naam,
   krappere knoppen. Onder de 340 punten verdwijnt het woord uit de belknop en
   blijft de hoorn over; de belbalk onderaan draagt daar het opschrift. */
@media (max-width: 400px) {
  .kop__binnen { gap: 0.5rem; }
  .merk { gap: 0.5rem; min-width: 0; }
  .merk__nis img { height: 46px; }
  .merk__naam { font-size: 1.12rem; }
  .merk__onder { font-size: 0.55rem; letter-spacing: 0.12em; }
  .kop__bellen { padding: 0.5rem 0.9rem; }
  .menuknop { width: 42px; height: 42px; }
}
@media (max-width: 339px) {
  .kop__bellen .kort { display: none; }
  .kop__bellen { padding: 0.5rem; width: 44px; }
  .merk__onder { display: none; }
}

/* De volledige navigatie past pas vanaf ongeveer 1080 punten naast de merkzone
   en de belknop. Daaronder blijft het menu achter de knop: liever een knop die
   werkt dan zes links die over elkaar heen vallen. Het nummer in de knop komt
   er weer bij zodra er ruimte voor is. */
@media (min-width: 1080px) {
  .kop__binnen { min-height: 88px; gap: var(--r-6); }
  .merk__nis img { height: 66px; }
  .merk__naam { font-size: 1.5rem; }
  .merk__onder { font-size: 0.63rem; }
  .hoofdnav { display: block; }
  .menuknop { display: none; }
  .mobielmenu { display: none !important; }
  .kop__bellen { min-height: 46px; padding: 0.6rem 1.35rem; }
}
@media (min-width: 1190px) {
  .kop__bellen .lang { display: inline; }
  .kop__bellen .kort { display: none; }
}

/* --------------------------------------------------------------------------
   8. Held
   -------------------------------------------------------------------------- */
.held { position: relative; padding-block: clamp(2rem, 1.2rem + 3.4vw, 4.5rem) clamp(3rem, 2rem + 4vw, 5.5rem); overflow: hidden; }
.held::before {
  content: "";
  position: absolute;
  top: -18%; right: -14%;
  width: min(60vw, 620px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, var(--kleur-blos) 0%, rgba(247, 237, 234, 0) 68%);
  pointer-events: none;
}
.held__binnen { position: relative; display: grid; gap: clamp(2.25rem, 1.4rem + 3.4vw, 4rem); align-items: center; }

.held h1 { margin-bottom: var(--r-5); }
.held h1 .zacht { display: block; color: var(--kleur-merk-diep); }
.held__lead { max-width: 34rem; margin-bottom: var(--r-6); }
.held .knoppen { margin-bottom: var(--r-6); }

/* de praktijkregel onder de knoppen: waar we zitten en hoe we bereikbaar zijn */
.held__regel {
  display: flex;
  flex-wrap: wrap;
  gap: var(--r-3) var(--r-6);
  padding-top: var(--r-5);
  border-top: 1px solid var(--kleur-lijn);
  font-size: var(--stap--1);
  color: var(--kleur-gedempt);
}
.held__regel span { display: inline-flex; align-items: center; gap: var(--r-2); }
.held__regel svg { width: 16px; height: 16px; color: var(--kleur-merk-mid); flex: none; }

/* het beeld met het merk ervoor: de boog is de nis, de plint de sokkel en het
   logo staat er als beeld voor. Zo is de compositie om het logo heen gemaakt. */
.held__beeld { position: relative; }
.held__boog { aspect-ratio: 4 / 5; box-shadow: var(--schaduw-l); }
/* Het merk staat op de plint, half voor de nis: een beeld voor een nis, niet
   een plaatje op een foto. De lichte gloed eronder maakt de sokkel los van de
   lichte tegelvloer in de foto, anders loopt steen in tegel over. */
.held__merk {
  position: absolute;
  left: clamp(-40px, -3vw, -14px);
  bottom: 0;
  width: clamp(96px, 23%, 156px);
  filter: drop-shadow(0 3px 4px rgba(51, 36, 31, 0.18))
          drop-shadow(0 22px 26px rgba(51, 36, 31, 0.34));
  pointer-events: none;
}
.held__merk::before {
  content: "";
  position: absolute;
  left: -22%; right: -22%; bottom: -6%;
  height: 46%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 65%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 70%);
}
.held__merk img { position: relative; }

/* Onder de tweekolomsgrens is de boog zo breed als het scherm. Een staande
   verhouding wordt dan een beeld van meer dan duizend punten hoog, en dan
   staat de rest van de pagina buiten beeld. Op tafelformaat gaat hij daarom
   liggen; op een telefoon is staand juist weer het prettigst. */
@media (min-width: 620px) and (max-width: 899px) {
  .held__boog { aspect-ratio: 3 / 2; border-radius: 230px 230px var(--rond-l) var(--rond-l); }
  /* Het merk schaalt op deze breedte met de hoogte van het beeld mee, niet met
     de breedte; anders torent het over een liggende foto uit. */
  .held__merk { width: clamp(80px, 13vw, 116px); }
}
@media (min-width: 900px) {
  .held__binnen { grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); }
  .held__beeld { order: 2; }
}
@media (min-width: 1120px) {
  .held__binnen { gap: 4.5rem; }
}

/* --------------------------------------------------------------------------
   8b. Kop van een binnenpagina

   Zelfde motief als de held, maar plat: een blos-vlak met een omlijnde boog
   als enige versiering, zodat de aandacht bij de kop en de tekst blijft.
   -------------------------------------------------------------------------- */
.paginakop {
  position: relative;
  overflow: hidden;
  background: var(--kleur-blos);
  border-bottom: 1px solid var(--kleur-lijn);
  padding-block: clamp(2.5rem, 1.8rem + 3vw, 4.5rem);
}
/* Het merk zweeft in de rechterhelft van het vlak: hetzelfde beeld als in de
   held, alleen kleiner en rustiger. Het staat binnen de kolombreedte, niet in
   de paginamarge, en het is decoratie: geen element in de opmaak, geen
   alternatieve tekst, niet aan te klikken. */
.paginakop::after {
  content: "";
  position: absolute;
  right: max(2rem, calc((100% - var(--breedte)) / 2 + 2rem));
  top: 50%;
  width: clamp(58px, 6vw, 92px);
  aspect-ratio: 506 / 1216;
  transform: translateY(-50%);
  background: url("../img/logo-vol-180.png") center / contain no-repeat;
  filter: drop-shadow(0 2px 3px rgba(51, 36, 31, 0.12))
          drop-shadow(0 16px 22px rgba(51, 36, 31, 0.22));
  pointer-events: none;
}
/* Dit blok is tegelijk omhulsel (met marges) en tekstkolom. De maximale
   regellengte hoort daarom op de kinderen te staan, anders zou de hele kop in
   het midden van de pagina komen te zweven in plaats van links uit te lijnen. */
.paginakop__binnen { position: relative; }
.paginakop__binnen > * { max-width: 44rem; }
.paginakop h1 { font-size: var(--stap-4); margin-bottom: var(--r-4); }
.paginakop p:not(.bovenkop) { color: var(--kleur-inkt-zacht); }
.paginakop p:last-child { margin-bottom: 0; }
/* Onder de tweekolomsgrens is er geen witruimte naast de tekst en zou het merk
   er dwars doorheen komen te staan. Daar blijft alleen het blos-vlak over; in
   de balk erboven staat het merk immers al. */
@media (max-width: 900px) {
  .paginakop::after { display: none; }
}

/* --------------------------------------------------------------------------
   9. Beloften
   -------------------------------------------------------------------------- */
.beloften { display: grid; gap: var(--r-5); }
.belofte { display: flex; gap: var(--r-4); align-items: flex-start; }
.belofte__teken {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px; height: 54px;
  border-radius: 23px 23px 8px 8px;
  background: var(--kleur-wit);
  border: 1px solid var(--kleur-lijn);
  color: var(--kleur-merk-diep);
  box-shadow: var(--schaduw-s);
}
.sectie--blos .belofte__teken { background: var(--kleur-wit); }
.belofte__teken svg { width: 21px; height: 21px; }
.belofte h3 { font-size: var(--stap-1); margin-bottom: var(--r-1); }
.belofte p { font-size: var(--stap--1); color: var(--kleur-gedempt); margin: 0; }

@media (min-width: 760px) {
  .beloften { grid-template-columns: repeat(3, 1fr); gap: var(--r-6); }
  .beloften .belofte + .belofte { padding-left: var(--r-6); border-left: 1px solid var(--kleur-lijn); }
}

/* --------------------------------------------------------------------------
   10. Twee kolommen met beeld
   -------------------------------------------------------------------------- */
.duo { display: grid; gap: clamp(2rem, 1.2rem + 3.2vw, 3.75rem); align-items: center; }
.duo__beeld { position: relative; }
.duo__beeld .boog { aspect-ratio: 4 / 5; box-shadow: var(--schaduw-m); }
.duo__tekst > *:last-child { margin-bottom: 0; }
@media (min-width: 620px) and (max-width: 859px) {
  .duo__beeld .boog { aspect-ratio: 3 / 2; border-radius: 230px 230px var(--rond-l) var(--rond-l); }
}
/* Liggend in de boog, voor een foto die in de breedte vertelt: welkom op
   home laat de hele ontvangstruimte zien. Op tabletbreedte ligt elk kader al. */
@media (max-width: 619px), (min-width: 860px) {
  .duo__beeld .boog--liggend { aspect-ratio: 5 / 4; }
}
@media (min-width: 860px) {
  .duo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .duo--omgekeerd .duo__beeld { order: 2; }
}

/* klein beeld dat over de hoek van het grote valt */
.duo__detail {
  position: absolute;
  right: -14px; bottom: -28px;
  width: 42%;
  max-width: 190px;
  border-radius: var(--rond-l);
  border: 6px solid var(--kleur-wit);
  overflow: hidden;
  box-shadow: var(--schaduw-m);
}
.duo__detail img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

/* Opleidingen en specialisaties op Mijn praktijk. Geen foto (sinds 8
   oktober, op verzoek), maar de specialisaties zelf in de nis, als een
   oorkonde aan de muur: dezelfde boog als de beeldkaders, met een fijne
   tweede lijn erbinnen. */
.specialisaties { width: 100%; max-width: 26rem; margin-inline: auto; }
.specialisaties__boog {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 5;
  padding: clamp(4.5rem, 3.8rem + 3vw, 6rem) var(--r-5) clamp(2.5rem, 2rem + 2vw, 3.25rem);
  text-align: center;
  background: var(--kleur-blos);
  border-radius: var(--boog);
  box-shadow: var(--schaduw-m);
}
/* de lijst van de oorkonde: dezelfde vorm, twaalf punten naar binnen */
.specialisaties__boog::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(186, 118, 94, 0.4);
  border-radius: inherit;
  pointer-events: none;
}
/* het boogje uit de vormtaal, als sluitsteen boven de lijst */
.specialisaties__boog::after {
  content: "";
  order: -1;
  width: 10px; height: 13px;
  margin-bottom: var(--r-4);
  border-radius: 5px 5px 2px 2px;
  background: var(--kleur-merk);
}
.specialisaties__kop { margin: 0 0 var(--r-5); font-size: var(--stap--1); color: var(--kleur-gedempt); }
.specialisaties ul { list-style: none; margin: 0; padding: 0; }
.specialisaties li { font-family: var(--letter-kop); font-size: var(--stap-2); line-height: 1.25; color: var(--kleur-inkt); }
.specialisaties li + li::before {
  content: "";
  display: block;
  width: 24px; height: 1px;
  margin: 0.8rem auto;
  background: var(--kleur-merk);
}
.specialisaties__voet { margin: var(--r-6) 0 0; text-align: center; }

/* --------------------------------------------------------------------------
   11. Kaarten
   -------------------------------------------------------------------------- */
.raster { display: grid; gap: var(--r-5); }
.raster--2 { grid-template-columns: 1fr; }
.raster--3 { grid-template-columns: 1fr; }
@media (min-width: 700px) {
  .raster--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .raster--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .raster--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.kaart {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--r-6) var(--r-5) var(--r-5);
  background: var(--kleur-wit);
  border: 1px solid var(--kleur-lijn);
  border-radius: var(--rond-l);
  transition: transform var(--overgang), box-shadow var(--overgang), border-color var(--overgang);
}
.kaart:hover { transform: translateY(-3px); border-color: var(--kleur-merk); box-shadow: var(--schaduw-m); }
.kaart__nr {
  display: block;
  margin-bottom: var(--r-3);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  color: var(--kleur-merk-diep);
}
.kaart h3 { margin-bottom: var(--r-3); font-size: var(--stap-2); }
.kaart p { color: var(--kleur-gedempt); font-size: var(--stap--1); }
.kaart__voet { margin-top: auto; padding-top: var(--r-5); }
.kaart--stil:hover { transform: none; box-shadow: none; border-color: var(--kleur-lijn); }

/* Behandelingenpagina: een behandelmenu. Geen kaart met een foto per
   behandeling (voor een orthese of een nagelprothese bestaat geen eerlijk
   voorraadbeeld), maar een rustige lijst zoals een menukaart, met een beeld dat
   op grotere schermen meeloopt. */
.behandelindeling { display: grid; gap: clamp(2rem, 1.2rem + 3vw, 4.5rem); }
.behandelindeling__beeld { display: none; }
.behandelindeling__beeld .boog { aspect-ratio: 5 / 4; box-shadow: var(--schaduw-m); }
@media (min-width: 860px) {
  .behandelindeling { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: start; }
  .behandelindeling__beeld { display: block; position: sticky; top: 7.5rem; }
}

.behandelregel { padding-block: var(--r-6); border-top: 1px solid var(--kleur-lijn); }
.behandelregel:first-child { padding-top: 0; border-top: 0; }
.behandelregel h2 { font-size: var(--stap-3); margin-bottom: var(--r-3); }
.behandelregel p { color: var(--kleur-inkt-zacht); }
.behandelregel__voet { margin-top: var(--r-3); }

/* Behandelingenstrook op home: tekst links, de vijf behandelingen rechts als
   lijst. De hele regel is de link, dus ook op een telefoon ruim te raken. */
.tweeluik { display: grid; gap: clamp(1.75rem, 1rem + 2vw, 3rem); }
.tweeluik .kop-blok { margin-bottom: 0; }
@media (min-width: 900px) {
  .tweeluik { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: start; gap: 4rem; }
}
.behandellijst { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--kleur-lijn); }
.behandellijst a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--r-4);
  padding: var(--r-4) var(--r-3);
  border-bottom: 1px solid var(--kleur-lijn);
  text-decoration: none;
  color: var(--kleur-inkt);
  transition: background var(--overgang);
}
.behandellijst a:hover { background: var(--kleur-blos); color: var(--kleur-inkt); }
.behandellijst__nr { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.2em; color: var(--kleur-merk-diep); }
.behandellijst b { display: block; font-family: var(--letter-kop); font-size: var(--stap-2); font-weight: 400; line-height: 1.2; }
.behandellijst small { display: block; margin-top: 2px; font-size: var(--stap--1); color: var(--kleur-gedempt); }
.behandellijst svg { width: 18px; height: 18px; color: var(--kleur-merk-diep); transition: transform var(--overgang); }
.behandellijst a:hover svg { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   12. Tarieven
   -------------------------------------------------------------------------- */
.tarieven { margin: 0; }
.tarief-groep + .tarief-groep { margin-top: var(--r-7); }
.tarief-groep h3 {
  display: flex;
  align-items: baseline;
  gap: var(--r-4);
  margin-bottom: var(--r-4);
  font-size: var(--stap-2);
}
.tarief-groep h3::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--kleur-lijn);
}
.tarief {
  display: flex;
  align-items: baseline;
  gap: var(--r-3);
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--kleur-lijn);
}
.tarief:last-child { border-bottom: 0; }
.tarief__naam { font-weight: 600; }
.tarief__naam small { display: block; font-weight: 400; font-size: var(--stap--1); color: var(--kleur-gedempt); }
.tarief__stip { flex: 1; min-width: 1.5rem; height: 1px; margin-bottom: 0.28rem; background-image: linear-gradient(90deg, var(--kleur-lijn-sterk) 0 2px, transparent 2px 6px); background-size: 6px 1px; }
.tarief__prijs { flex: none; font-family: var(--letter-kop); font-size: var(--stap-1); color: var(--kleur-merk-diep); white-space: nowrap; }

.tarief__voetnoot { margin: var(--r-2) 0 0; font-size: var(--stap--1); color: var(--kleur-gedempt); }

/* Tarieven op home: een blok dat op zichzelf staat, zonder foto ernaast. Het
   zijn drie tarieven voor dezelfde pedicurebehandeling, daarom staat onder elk
   bedrag waar het voor geldt. Op een telefoon een lijst in één kaart; vanaf
   tabletbreedte drie bogen naast elkaar, dezelfde vorm als de beeldkaders,
   met het bedrag in de nis. */
.prijsbogen {
  list-style: none;
  max-width: 34rem;
  margin: 0 auto;
  padding: 0 var(--r-5);
  background: var(--kleur-wit);
  border: 1px solid var(--kleur-lijn);
  border-radius: var(--rond-l);
  box-shadow: var(--schaduw-m);
}
.prijsboog {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "naam prijs" "noot prijs";
  align-items: center;
  gap: var(--r-1) var(--r-4);
  padding-block: var(--r-5);
}
.prijsboog + .prijsboog { border-top: 1px solid var(--kleur-lijn); }
.prijsboog__naam {
  grid-area: naam;
  font-size: var(--stap--2);
  font-weight: 700;
  letter-spacing: 0.18em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--kleur-merk-diep);
}
.prijsboog__prijs {
  grid-area: prijs;
  font-family: var(--letter-kop);
  font-size: var(--stap-3);
  line-height: 1;
  color: var(--kleur-merk-diep);
  white-space: nowrap;
}
.prijsboog__noot { grid-area: noot; font-size: var(--stap--1); line-height: 1.45; color: var(--kleur-gedempt); }
.prijsbogen__voet { margin: var(--r-7) 0 0; text-align: center; }

@media (min-width: 760px) {
  .prijsbogen {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 0.2rem + 1.6vw, 1.75rem);
    max-width: 60rem;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .prijsboog {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--r-3);
    aspect-ratio: 1;
    padding: clamp(2.5rem, 1.4rem + 2.4vw, 3.5rem) var(--r-4) var(--r-6);
    text-align: center;
    background: var(--kleur-wit);
    border: 1px solid var(--kleur-lijn);
    border-radius: var(--boog);
    box-shadow: var(--schaduw-m);
  }
  .prijsboog + .prijsboog { border-top-color: var(--kleur-lijn); }
  /* het boogje uit de vormtaal, als sluitsteen in de nis */
  .prijsboog::before {
    content: "";
    width: 10px; height: 13px;
    margin-bottom: var(--r-1);
    border-radius: 5px 5px 2px 2px;
    background: var(--kleur-merk);
  }
  /* Label en toelichting krijgen in elke boog dezelfde hoogte, ook als een
     ervan op één regel past. Dan staan de drie bedragen op één lijn. */
  .prijsboog__naam {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-height: 3em;
    text-wrap: balance;
  }
  .prijsboog__prijs { font-size: var(--stap-4); }
  .prijsboog__noot { min-height: 2.9em; max-width: 13rem; text-wrap: balance; }
}

/* smalle leeskolom voor een blok lopende tekst */
.tekstkolom { max-width: 46rem; }

/* Podotherapeuten waarmee de praktijk samenwerkt. Het bolletje is een boogje
   in het klein: dezelfde vorm als de beeldkaders. */
.partners {
  display: grid;
  gap: var(--r-2) var(--r-5);
  margin: var(--r-5) 0;
  padding: var(--r-4) var(--r-5);
  list-style: none;
  background: var(--kleur-wit);
  border: 1px solid var(--kleur-lijn);
  border-radius: var(--rond-m);
}
.partners li { display: flex; align-items: center; gap: var(--r-3); font-weight: 600; color: var(--kleur-inkt); }
.partners li::before {
  content: "";
  flex: none;
  width: 9px; height: 12px;
  border-radius: 5px 5px 2px 2px;
  background: var(--kleur-merk);
}
/* Vanaf tabletbreedte naast elkaar. Een naam breekt nooit halverwege af: past
   hij niet meer, dan gaat de hele naam naar de volgende regel. */
@media (min-width: 700px) {
  .partners { display: flex; flex-wrap: wrap; gap: var(--r-2) var(--r-6); }
  .partners li { white-space: nowrap; }
}

/* Een kenmerk: een korte zin als accent onder een tekstblok, in de kopletter,
   met het boogje uit de vormtaal ervoor. */
.kenmerk {
  display: flex;
  align-items: center;
  gap: var(--r-3);
  margin-top: var(--r-5);
  font-family: var(--letter-kop);
  font-size: var(--stap-1);
  color: var(--kleur-merk-diep);
}
.kenmerk::before {
  content: "";
  flex: none;
  width: 10px; height: 13px;
  border-radius: 5px 5px 2px 2px;
  background: var(--kleur-merk);
}

/* Algemene voorwaarden: een lange tekst, dus een smalle leeskolom met een
   inhoudsopgave ernaast. Op een breed scherm loopt die mee, op een telefoon
   klapt hij in. De nummers staan zowel in de inhoudsopgave als boven de koppen,
   zodat ze naar elkaar te herleiden zijn. */
.voorwaarden { display: grid; gap: clamp(1.75rem, 1rem + 2.5vw, 4rem); }
.voorwaarden__inhoud {
  align-self: start;
  border: 1px solid var(--kleur-lijn);
  border-radius: var(--rond-m);
  background: var(--kleur-room);
  font-size: var(--stap--1);
}
.voorwaarden__inhoud summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 0 var(--r-5);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.voorwaarden__inhoud summary::-webkit-details-marker { display: none; }
.voorwaarden__inhoud summary::after { content: "+"; font-size: 1.25rem; color: var(--kleur-merk-diep); }
.voorwaarden__inhoud[open] summary::after { content: "\2212"; }
.voorwaarden__inhoud ol { list-style: none; margin: 0; padding: 0 var(--r-5) var(--r-4); counter-reset: artikel; }
.voorwaarden__inhoud li { counter-increment: artikel; }
.voorwaarden__inhoud a {
  display: flex;
  gap: var(--r-3);
  padding-block: 6px;
  color: var(--kleur-inkt-zacht);
  text-decoration: none;
}
.voorwaarden__inhoud a::before {
  content: counter(artikel, decimal-leading-zero);
  flex: none;
  padding-top: 3px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--kleur-merk-diep);
}
.voorwaarden__inhoud a:hover { color: var(--kleur-merk-diep); }
.voorwaarden__tekst { max-width: 46rem; counter-reset: artikel-tekst; }
.voorwaarden__tekst h2 { counter-increment: artikel-tekst; font-size: var(--stap-3); margin: var(--r-8) 0 var(--r-4); }
.voorwaarden__tekst h2::before {
  content: counter(artikel-tekst, decimal-leading-zero);
  display: block;
  margin-bottom: var(--r-2);
  font-family: var(--letter-tekst);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  color: var(--kleur-merk-diep);
}
.voorwaarden__tekst h2:first-child { margin-top: 0; }
.voorwaarden__tekst p, .voorwaarden__tekst li { color: var(--kleur-inkt-zacht); }
.voorwaarden__tekst ul { margin: 0 0 var(--r-4); padding-left: 1.25rem; }
.voorwaarden__tekst li { margin-bottom: var(--r-2); }
.voorwaarden__tekst li::marker { color: var(--kleur-merk-mid); }
.bankgegevens { display: grid; gap: var(--r-1); margin: 0 0 var(--r-4); }
.bankgegevens div { display: flex; flex-wrap: wrap; gap: var(--r-2); }
.bankgegevens dt { font-weight: 700; color: var(--kleur-inkt); }
.bankgegevens dd { margin: 0; color: var(--kleur-inkt-zacht); }
/* Plekken die de praktijk nog moet invullen: opvallend genoeg om niet over het
   hoofd te zien, zolang ze er staan. */
.invullen { padding: 0.05em 0.35em; border-radius: 4px; background: var(--kleur-blos-diep); color: var(--kleur-inkt); }
.voorwaarden__adres { font-style: normal; line-height: 1.8; color: var(--kleur-inkt-zacht); }
.voorwaarden__adres a { display: inline-block; padding-block: 4px; }
@media (min-width: 960px) {
  .voorwaarden { grid-template-columns: 17rem minmax(0, 1fr); align-items: start; }
  .voorwaarden__inhoud { position: sticky; top: 7rem; }
}

/* opsomming met vinkjes */
.lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--r-3); }
.lijst li { display: flex; gap: var(--r-3); align-items: flex-start; }
.lijst svg { width: 18px; height: 18px; flex: none; margin-top: 5px; color: var(--kleur-merk-mid); }

/* --------------------------------------------------------------------------
   13. Ervaringen
   -------------------------------------------------------------------------- */
.sterren { display: inline-flex; gap: 3px; color: var(--kleur-merk-mid); }
.sterren svg { width: 17px; height: 17px; }

.review { display: flex; flex-direction: column; gap: var(--r-4); }
.review blockquote { margin: 0; font-size: var(--stap-1); line-height: 1.55; color: var(--kleur-inkt-zacht); font-family: var(--letter-kop); }
.review figcaption { margin-top: auto; font-size: var(--stap--1); color: var(--kleur-gedempt); }
.review figcaption b { display: block; color: var(--kleur-inkt); font-weight: 700; }

/* het blok waar het Google-gemiddelde komt zodra er reviews zijn */
.gemiddelde {
  display: grid;
  gap: var(--r-5);
  align-items: center;
  padding: var(--r-6);
  background: var(--kleur-wit);
  border: 1px dashed var(--kleur-lijn-sterk);
  border-radius: var(--rond-l);
}
.gemiddelde__cijfer { font-family: var(--letter-kop); font-size: var(--stap-4); line-height: 1; color: var(--kleur-gedempt); }
@media (min-width: 700px) { .gemiddelde { grid-template-columns: auto minmax(0, 1fr); gap: var(--r-6); } }

/* --------------------------------------------------------------------------
   14. Merkstrook: het volledige logo op ware grootte
   -------------------------------------------------------------------------- */
.merkstrook { position: relative; overflow: hidden; background: var(--kleur-blos); }
.merkstrook__binnen { display: grid; gap: clamp(2rem, 1.2rem + 3vw, 3.5rem); align-items: center; }
.merkstrook__beeld { position: relative; display: flex; justify-content: center; align-items: flex-end; }
/* Op een telefoon en tablet staat het logo boven de tekst, en daar is het
   de helft kleiner: op ware grootte vulde het daar in zijn eentje het
   scherm. Pas naast de tekst, vanaf 860 punten, staat het op ware grootte. */
.merkstrook__beeld img { width: clamp(70px, 17vw, 120px); filter: drop-shadow(0 16px 20px rgba(51, 36, 31, 0.26)); }
.merkstrook__citaat { font-family: var(--letter-kop); font-size: var(--stap-3); line-height: 1.28; margin-bottom: var(--r-5); }
@media (min-width: 860px) {
  .merkstrook__binnen { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
  .merkstrook__beeld img { width: 230px; filter: drop-shadow(0 26px 30px rgba(51, 36, 31, 0.28)); }
}

/* --------------------------------------------------------------------------
   15. Oproep tot bellen
   -------------------------------------------------------------------------- */
.oproep { position: relative; overflow: hidden; background: var(--kleur-voet); color: var(--kleur-op-donker); }
.oproep::before {
  content: "";
  position: absolute;
  left: 50%; top: -55%;
  width: min(120vw, 900px);
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(216, 170, 154, 0.22) 0%, rgba(216, 170, 154, 0) 62%);
  pointer-events: none;
}
.oproep__binnen { position: relative; text-align: center; max-width: 44rem; margin-inline: auto; }
.oproep h2 { color: var(--kleur-op-donker); }
.oproep p { color: var(--kleur-op-donker-zacht); }
.oproep .bovenkop { color: var(--kleur-merk); justify-content: center; }
.oproep .bovenkop::before { background: var(--kleur-merk-mid); }
.oproep .knoppen { justify-content: center; margin-top: var(--r-6); }
/* Op het donkere vlak keert de knop om. Het diepe kleimerk zou daar maar
   2,6 : 1 halen tegen de ondergrond; de knop zelf moet ook zichtbaar zijn,
   niet alleen zijn opschrift. */
.oproep .knop--bellen,
.voet .knop--bellen {
  background: var(--kleur-merk);
  color: var(--kleur-inkt);
  box-shadow: 0 14px 30px -18px rgba(0, 0, 0, 0.8);
}
.oproep .knop--bellen:hover,
.voet .knop--bellen:hover { background: var(--kleur-blos-diep); color: var(--kleur-inkt); }
.oproep .knop--rand { color: var(--kleur-op-donker); border-color: rgba(247, 237, 234, 0.35); }
.oproep .knop--rand:hover { background: rgba(247, 237, 234, 0.1); border-color: var(--kleur-merk); color: var(--kleur-op-donker); }
.oproep__nummer {
  display: inline-flex;
  align-items: center;
  gap: var(--r-3);
  margin-top: var(--r-6);
  font-family: var(--letter-kop);
  font-size: var(--stap-3);
  color: var(--kleur-wit);
  text-decoration: none;
}
.oproep__nummer:hover { color: var(--kleur-merk); }
/* Bellen blijft de route; mailen is het zijpad voor wie liever eerst vraagt.
   Vandaar het adres kleiner dan het nummer, en er direct onder. */
.oproep__mail { margin-top: var(--r-2); font-size: var(--stap-1); color: var(--kleur-op-donker-zacht); }
.oproep__mail a { color: var(--kleur-merk); }
.oproep__mail a:hover { color: var(--kleur-wit); }

/* --------------------------------------------------------------------------
   16. Contactgegevens
   -------------------------------------------------------------------------- */
.gegevens { display: grid; gap: var(--r-5); list-style: none; margin: 0; padding: 0; }
.gegeven { display: flex; gap: var(--r-4); align-items: flex-start; }
.gegeven__teken {
  flex: none;
  display: grid; place-items: center;
  width: 42px; height: 42px;
  border-radius: var(--rond-pil);
  background: var(--kleur-blos);
  color: var(--kleur-merk-diep);
}
.gegeven__teken svg { width: 19px; height: 19px; }
.gegeven b { display: block; font-size: var(--stap--1); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--kleur-gedempt); margin-bottom: 2px; }
.gegeven a, .gegeven address { font-style: normal; font-size: var(--stap-1); color: var(--kleur-inkt); text-decoration: none; line-height: 1.45; }
.gegeven a { display: inline-block; padding-block: 4px; }
.gegeven a:hover { color: var(--kleur-merk-diep); }

.kaartje {
  display: block;
  border-radius: var(--rond-l);
  overflow: hidden;
  border: 1px solid var(--kleur-lijn);
  box-shadow: var(--schaduw-s);
  background: var(--kleur-steen);
}
.kaartje iframe { display: block; width: 100%; height: clamp(260px, 38vw, 420px); border: 0; }

/* openingstijden: twee kolommen op een regel, hairline ertussen */
.openingstijden h2 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--r-3);
  margin-bottom: var(--r-4);
  font-size: var(--stap-2);
}
.openingstijden ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--kleur-lijn); }
.openingstijden li {
  display: flex;
  justify-content: space-between;
  gap: var(--r-4);
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--kleur-lijn);
  font-size: var(--stap--1);
}
.openingstijden li span:first-child { font-weight: 600; color: var(--kleur-inkt-zacht); }
.openingstijden li span:last-child { color: var(--kleur-gedempt); white-space: nowrap; }

/* --------------------------------------------------------------------------
   17. Voettekst
   -------------------------------------------------------------------------- */
.voet { background: var(--kleur-voet); color: var(--kleur-op-donker-zacht); padding-block: clamp(3rem, 2rem + 3vw, 4.5rem) var(--r-6); font-size: var(--stap--1); }
.voet__binnen { display: grid; gap: var(--r-7); }
.voet__merk { display: flex; gap: var(--r-4); align-items: flex-start; }
.voet__merk img { width: 58px; flex: none; }
.voet__naam { display: block; font-family: var(--letter-kop); font-size: 1.3rem; color: var(--kleur-op-donker); margin-bottom: var(--r-2); }
.voet address { font-style: normal; line-height: 1.7; }
.voet a { color: var(--kleur-op-donker); text-decoration: none; }
.voet a:hover { color: var(--kleur-merk); text-decoration: underline; }
.voet h2 { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--kleur-merk); font-family: var(--letter-tekst); margin-bottom: var(--r-4); }
.voet ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--r-1); }
.voet ul a, .voet address a, .voet__onder a { display: inline-block; padding-block: 6px; }
.voet__onder {
  display: flex;
  flex-wrap: wrap;
  gap: var(--r-3) var(--r-5);
  justify-content: space-between;
  align-items: center;
  margin-top: var(--r-7);
  padding-top: var(--r-5);
  border-top: 1px solid rgba(247, 237, 234, 0.14);
  font-size: var(--stap--2);
}
.voet__onder p { margin: 0; }
@media (min-width: 760px) {
  .voet__binnen { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--r-8); }
}

/* --------------------------------------------------------------------------
   18. Belbalk op de telefoon

   Verschijnt pas als de held voorbij is, zodat de eerste indruk rustig blijft.
   -------------------------------------------------------------------------- */
.belbalk {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 70;
  padding: 0.35rem 0.9rem calc(0.35rem + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.95);
  border-top: 1px solid var(--kleur-lijn);
  box-shadow: 0 -6px 20px -18px rgba(51, 36, 31, 0.5);
  transform: translateY(110%);
  transition: transform 320ms cubic-bezier(0.32, 0.72, 0.35, 1);
}
@supports (backdrop-filter: blur(10px)) {
  .belbalk { background: rgba(255, 255, 255, 0.86); backdrop-filter: blur(14px); }
}
.belbalk[data-zichtbaar="true"] { transform: translateY(0); }
/* Bewust laag: boven in de balk staat de belknop al. Deze is de herhaling
   onderaan, geen tweede aankondiging. 44 punten hoog blijft ruim genoeg om met
   een duim te raken. */
.belbalk .knop {
  width: 100%;
  min-height: 44px;
  padding: 0.45rem 1.2rem;
  font-size: 0.95rem;
  box-shadow: none;
}
@media (min-width: 760px) { .belbalk { display: none; } }
@media (max-width: 759px) { .voet { padding-bottom: 4.75rem; } }

/* --------------------------------------------------------------------------
   19. Voorbeeldinhoud

   Alles wat nog door echte tekst van de praktijk vervangen moet worden, staat
   in de opmaak gemarkeerd. Zichtbaar voor wie meekijkt, weg te halen met één
   klasse zodra de inhoud er is.
   -------------------------------------------------------------------------- */
.voorbeeld {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--kleur-lijn-sterk);
  border-radius: var(--rond-pil);
  background: var(--kleur-blos);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--kleur-merk-diep);
}
.melding {
  display: flex;
  gap: var(--r-3);
  padding: var(--r-4) var(--r-5);
  border: 1px dashed var(--kleur-lijn-sterk);
  border-radius: var(--rond-m);
  background: var(--kleur-room);
  font-size: var(--stap--1);
  color: var(--kleur-gedempt);
}
.melding svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--kleur-merk-mid); }
/* Een melding met echte informatie krijgt een doorgetrokken rand. De
   gestippelde versie is voor voorbeeldinhoud; zo blijft dat verschil zien. */
.melding--vast { border-style: solid; background: var(--kleur-blos); color: var(--kleur-inkt-zacht); }
.melding--vast strong { color: var(--kleur-inkt); }
.melding p { margin: 0; }
/* Een link in een melding staat midden in een zin en is anders maar een regel
   hoog; wat lucht erboven en eronder maakt hem met een duim te raken. */
.melding a { display: inline-block; padding-block: 4px; }

/* --------------------------------------------------------------------------
   20. Beweging

   Zacht en eenmalig. Nooit iets dat de bezoeker moet afwachten voordat hij
   kan lezen of bellen.
   -------------------------------------------------------------------------- */
/* Verbergen gebeurt alleen als het script zover gekomen is dat het ook weer
   kan onthullen. Struikelt het ervoor, of staat JavaScript uit, dan staat de
   klasse er niet en is er niets verborgen. Inhoud die niemand kan lezen is
   erger dan inhoud zonder animatie. */
.onthult .onthul { opacity: 0; transform: translateY(14px); transition: opacity 620ms ease, transform 620ms cubic-bezier(0.22, 0.68, 0.3, 1); }
.onthult .onthul--in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .onthul { opacity: 1 !important; transform: none !important; }
}

@media print {
  .kop, .belbalk, .oproep, .mobielmenu { display: none !important; }
  body { color: #000; }
}