/* Pedicurepraktijk Lamsoor, voorbeeldsite van joepa (deze praktijk bestaat
   niet). Eigen stijl, los van de joepa-kleuren en van de andere
   voorbeeldsites.
   Letters: Red Hat Display (koppen en logo) en Red Hat Text (tekst, gemaakt
   voor kleine maten), zelf gehost onder de SIL Open Font License (zie fonts/).
   Open vormen en een gewone nul: Atkinson Hyperlegible stond eerst in het plan,
   maar die heeft een nul met een streep erdoor, en die las bij tarieven en
   tijden onrustig. De klanten van een pedicure zijn vaak ouder, en bij diabetes
   gaat het zicht soms achteruit: daarom tekst op 20 px en knoppen van minstens
   56 px hoog.
   Kleuren uit de kwelder: grond warm wit, kwelder (licht lila) als tweede
   vlak, inkt voor tekst, lamsoor (de lila kwelderplant) als accent,
   zeegroen voor het werkgebied, slik voor het afsluitblok en de voet.
   Vormtaal: foto's op een lila vlak dat eronder uitsteekt, de tarieven als
   ruime tabel, het werkgebied als route met stippen, en een lamsoortakje in
   het logo.
   Contrast (WCAG): inkt #24212c op grond #f8f6f2 14,6:1, op kwelder #eeebf3
   13,4:1; inkt-zacht #4c4855 op grond 8,2:1, op kwelder 7,5:1; lamsoor
   #6b56a3 op grond 5,6:1, op kwelder 5,1:1 (alleen voor kopjes, links en
   decoratie); lamsoor-diep #4b3a7a op grond 8,9:1, op kwelder 8,2:1, wit erop
   9,6:1; zeegroen #48695a op grond 5,65:1, op kwelder 5,17:1, wit erop 6,1:1;
   grond op slik #2b2836 13,3:1, lamsoorlicht #d9d2ea op slik 9,8:1. */
@font-face { font-family: "Red Hat Display"; src: url("fonts/red-hat-display.woff2") format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Red Hat Text"; src: url("fonts/red-hat-text.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }

:root {
  --grond: #f8f6f2;
  --kwelder: #eeebf3;
  --wit: #ffffff;
  --inkt: #24212c;
  --inkt-zacht: #4c4855;
  --lamsoor: #6b56a3;
  --lamsoor-diep: #4b3a7a;
  --lamsoorlicht: #d9d2ea;
  --zeegroen: #48695a;
  --slik: #2b2836;
  --lijn: #d9d3e3;
  --lijn-licht: rgba(248, 246, 242, 0.22);
  --kop: "Red Hat Display", system-ui, -apple-system, "Segoe UI", sans-serif;
  --letter: "Red Hat Text", system-ui, -apple-system, "Segoe UI", sans-serif;
  --maat: 71.25rem;
  --rand: 1.25rem;
  --rond: 12px;
}
* { box-sizing: border-box; }
/* Ruimte voor de plakkende kop bij ankers en bij focus met Tab: zo valt een
   element dat focus krijgt nooit onder de kop (WCAG 2.4.11). Waar de
   onderbalk staat, komt er onderin ruimte bij. */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 6.5rem; }
body { margin: 0; font-family: var(--letter); font-size: 1.25rem; line-height: 1.6; color: var(--inkt); background: var(--grond); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { font-family: var(--kop); font-weight: 750; line-height: 1.12; margin: 0 0 0.5em; text-wrap: balance; letter-spacing: -0.005em; }
h1 { font-size: clamp(2.3rem, 1.5rem + 2.8vw, 3.6rem); font-weight: 800; line-height: 1.06; letter-spacing: -0.01em; }
h2 { font-size: clamp(1.8rem, 1.35rem + 1.4vw, 2.5rem); }
h3 { font-size: 1.4rem; }
p { margin: 0 0 1em; }
/* Geen los woord op de laatste regel van lopende tekst. */
p, li, dt, dd, summary, th, td { text-wrap: pretty; }
a { color: var(--inkt); text-decoration-color: var(--lamsoor); text-underline-offset: 0.22em; text-decoration-thickness: 2px; }
a:hover { color: var(--lamsoor-diep); }
/* Het accent in de h1 in kleur, niet schuin: de letter heeft geen cursief,
   en een nagemaakte cursief leest slecht. */
.accent { font-style: normal; color: var(--lamsoor); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--lamsoor-diep); outline-offset: 3px; }
.voorbeeldbalk :focus-visible, .site-voet :focus-visible, .blok--slik :focus-visible { outline-color: var(--lamsoorlicht); }
.skiplink { position: absolute; left: -999px; top: 0; z-index: 100; background: var(--grond); color: var(--inkt); font-weight: 700; padding: 0.3rem 0.9rem; border-radius: 8px; }
.skiplink:focus { left: 1rem; top: 0.25rem; }
.skiplink:focus-visible { outline: 2px solid var(--inkt); outline-offset: -5px; }

/* De voorbeeldbalk staat op elke pagina bovenaan. */
.voorbeeldbalk { background: var(--slik); color: var(--grond); font-size: 1rem; text-align: center; padding: 0.55rem 1rem; }
.voorbeeldbalk p { margin: 0; }
.voorbeeldbalk a { color: var(--grond); font-weight: 700; text-decoration-color: var(--lamsoorlicht); }

/* Kop met logo, menu en de belknop, plakt bovenaan. */
.site-kop { position: sticky; top: 0; z-index: 20; background: var(--grond); border-bottom: 1px solid var(--lijn); }
.site-kop__inner { max-width: calc(var(--maat) + 2 * var(--rand)); margin: 0 auto; padding: 0.7rem var(--rand); display: flex; align-items: center; gap: 1.75rem; }
.site-kop__logo { display: flex; align-items: center; gap: 0.55rem; text-decoration: none; color: var(--inkt); line-height: 1; }
.logo__takje { width: 2.3rem; height: 2.3rem; color: var(--lamsoor); flex: none; }
.site-kop__woord { display: flex; flex-direction: column; }
.site-kop__naam { font-family: var(--kop); font-size: 1.8rem; font-weight: 800; letter-spacing: -0.02em; color: var(--lamsoor-diep); }
.site-kop__sub { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--inkt-zacht); margin-top: 0.3rem; }
.site-nav { display: flex; gap: 1.5rem; margin-left: auto; }
.site-nav a { color: var(--inkt); text-decoration: none; font-size: 1.08rem; font-weight: 600; padding: 0.35rem 0; border-bottom: 3px solid transparent; white-space: nowrap; }
.site-nav a:hover, .site-nav a[aria-current="page"] { border-bottom-color: var(--lamsoor); }
.site-kop__menu { display: none; }
.site-kop__bel { white-space: nowrap; }

/* Knoppen: groot en duidelijk. Vol is lamsoor-diep met wit (9,6:1), lijn is
   inkt op de grond. */
.knop { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; min-height: 3.5rem; font: inherit; font-size: 1.15rem; font-weight: 700; padding: 0.75rem 1.5rem; border-radius: var(--rond); border: 2px solid transparent; cursor: pointer; text-decoration: none; line-height: 1.2; transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease; }
.knop--vol { background: var(--lamsoor-diep); color: var(--wit); border-color: var(--lamsoor-diep); }
.knop--vol:hover { background: var(--slik); border-color: var(--slik); color: var(--wit); }
.knop--lijn { background: var(--wit); color: var(--inkt); border-color: var(--inkt); }
.knop--lijn:hover { background: var(--kwelder); color: var(--inkt); }
.knop--licht-vol { background: var(--grond); color: var(--slik); border-color: var(--grond); }
.knop--licht-vol:hover { background: var(--lamsoorlicht); border-color: var(--lamsoorlicht); color: var(--slik); }
.knop--licht { background: transparent; color: var(--grond); border-color: var(--grond); }
.knop--licht:hover { background: rgba(248, 246, 242, 0.14); color: var(--grond); }
.knop:active { transform: translateY(1px); }
.tekstknop { font: inherit; background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; text-decoration-color: var(--lamsoor); text-decoration-thickness: 2px; text-underline-offset: 0.22em; cursor: pointer; }
.tekstknop:hover { color: var(--lamsoor-diep); }
.tekstlink { font-weight: 700; }

/* Blokken */
.blok { padding: clamp(3rem, 6vw, 5.25rem) var(--rand); }
.blok__inner { max-width: var(--maat); margin: 0 auto; }
.blok--kwelder { background: var(--kwelder); }
.blok--slik { background: var(--slik); color: var(--grond); }
.blok p { max-width: 60ch; }
.blok__kop { margin-bottom: 2rem; }
.blok__kop p { margin: 0; color: var(--inkt-zacht); }

/* Twee kolommen */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.split--midden { align-items: center; }
/* Een foto op een lila vlak dat eronder uitsteekt. */
.split picture, .hero__beeld { position: relative; display: block; }
.split picture::before, .hero__beeld::before { content: ""; position: absolute; inset: 1rem -1rem -1rem 1rem; background: var(--lamsoorlicht); border-radius: calc(var(--rond) + 6px); }
.blok--kwelder .split picture::before { background: var(--wit); }
.split > picture, .split > div > picture { margin-right: 1rem; }
.split img { position: relative; border-radius: calc(var(--rond) + 6px); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.split__beeld { margin-top: 2rem; }
@media (min-width: 47.5em) {
  /* Foto rechts, om blokken met de foto links af te wisselen. Op de telefoon
     blijft de foto boven de tekst. */
  .split--foto-rechts > picture { order: 2; }
}

/* Kop van de pagina: tekst links, foto rechts. */
.hero { padding: clamp(1.75rem, 4vw, 3.5rem) var(--rand) clamp(3rem, 5vw, 4.5rem); }
.hero__inner { max-width: var(--maat); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
/* Van 960 tot 1072 liep de h1 van de home over drie regels: daar krijgt de
   tekst iets meer ruimte dan de foto. */
@media (min-width: 60em) and (max-width: 67em) {
  .hero__inner { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
}
.hero__tekst p { max-width: 38ch; font-size: 1.35rem; color: var(--inkt-zacht); }
.hero__knoppen { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }
.hero__beeld { margin-right: 1rem; }
.hero__beeld img { position: relative; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: calc(var(--rond) + 6px); }
.hero__beeld--staand img { aspect-ratio: 4 / 5; max-height: 40rem; }

/* Wat we doen: rijen met de vanaf-prijs rechts. */
.diensten { list-style: none; margin: 0; padding: 0; }
.diensten li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.15rem 1.5rem; padding: 1.4rem 0; border-top: 1px solid var(--lijn); }
.diensten li:last-child { border-bottom: 1px solid var(--lijn); }
.diensten h3 { margin: 0; grid-column: 1; }
.diensten h3 a { text-decoration: none; color: var(--lamsoor-diep); }
.diensten h3 a:hover { text-decoration: underline; }
.diensten p { margin: 0; color: var(--inkt-zacht); grid-column: 1; }
.diensten .diensten__prijs { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-family: var(--kop); font-weight: 800; font-size: 1.3rem; color: var(--inkt); white-space: nowrap; }

/* Het werkgebied als route: dorpen onder elkaar aan een stippellijn, met de
   vaste dag erachter. */
.route { list-style: none; margin: 1.25rem 0 1.5rem; padding: 0 0 0 1.75rem; position: relative; max-width: 30rem; }
.route::before { content: ""; position: absolute; left: 0.5rem; top: 0.9rem; bottom: 0.9rem; border-left: 3px dotted var(--zeegroen); }
.route__dorp { position: relative; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.45rem 0; }
.route__dorp::before { content: ""; position: absolute; left: -1.62rem; top: 0.95rem; width: 0.85rem; height: 0.85rem; border-radius: 50%; background: var(--zeegroen); box-shadow: 0 0 0 4px var(--grond); }
.blok--kwelder .route__dorp::before { box-shadow: 0 0 0 4px var(--kwelder); }
.route__naam { font-weight: 700; }
.route__dag { font-size: 1.05rem; font-weight: 700; color: var(--zeegroen); white-space: nowrap; }
.route--groot { margin: 0; }
.route--groot .route__dorp { padding: 0.65rem 0; border-bottom: 1px solid var(--lijn); }
/* De stippellijn loopt van de eerste tot de laatste stip: in de grote route
   zit onder elke plaats meer ruimte, dus de onderkant ligt hoger. */
.route--groot::before { top: 1.15rem; bottom: 1.35rem; }

/* Diabetes of reuma op de home: drie korte punten met een lila streep. Geen
   kaartjes: die staan al bij de zorgprofielen op Medische voetzorg. */
.uitleg__punten { list-style: none; margin: 0; padding: 0; }
.uitleg__punten li { border-left: 4px solid var(--lamsoor); padding: 0.15rem 0 0.15rem 1.1rem; font-size: 1.25rem; }
.uitleg__punten li + li { margin-top: 1.25rem; }

/* De tarieven als ruime tabel. De kopkolom is minstens zo breed als het
   langste woord van de kop (Voetbehandelingen): anders liep dat op 960 en bij
   een grote browserletter de tussenruimte in. */
.tariefgroep { display: grid; grid-template-columns: minmax(min-content, 0.8fr) minmax(0, 1.5fr); gap: clamp(1.75rem, 5vw, 4.5rem); align-items: start; }
.tariefgroep__kop p { color: var(--inkt-zacht); }
.tarieven { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tarieven thead th { font-size: 1rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--inkt-zacht); text-align: left; padding: 0 0 0.6rem; border-bottom: 2px solid var(--inkt); }
.tarieven thead th:nth-child(n + 2) { text-align: right; padding-left: 1rem; }
:where(.tarief) :is(th, td) { padding: 1.1rem 0; border-bottom: 1px solid var(--lijn); vertical-align: top; }
.tarief__naam { text-align: left; font-size: 1.3rem; font-weight: 750; line-height: 1.3; }
.tarief__uitleg { display: block; margin-top: 0.3rem; font-size: 1.08rem; font-weight: 400; line-height: 1.5; color: var(--inkt-zacht); }
.tarief__duur { text-align: right; white-space: nowrap; padding-left: 1rem; color: var(--inkt-zacht); }
.tarief__prijs { text-align: right; white-space: nowrap; padding-left: 1rem; font-family: var(--kop); font-size: 1.35rem; font-weight: 800; }
/* De duur als eigen regel onder de uitleg, alleen op smalle telefoons (daar
   vervalt de kolom Duur). */
.tarief__duur-klein { display: none; }

/* Zorgprofielen als treden naast elkaar. */
.treden { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; align-items: stretch; }
.trede { background: var(--wit); border-radius: var(--rond); padding: 1.4rem 1.4rem 1.2rem; border: 1px solid var(--lijn); }
:where(.trede) p { margin: 0; }
.trede__nummer { font-family: var(--kop); font-size: 1.35rem; font-weight: 800; color: var(--lamsoor-diep); margin-bottom: 0.5rem; padding-bottom: 0.5rem; border-bottom: 3px solid var(--lamsoorlicht); }

/* Een notitie onder de zorgprofielen (reuma): wit vlak met een lila streep. */
.notitie { margin-top: 2rem; background: var(--wit); border-left: 5px solid var(--lamsoor); border-radius: 0 var(--rond) var(--rond) 0; padding: 1.4rem 1.6rem; }
.notitie h3 { margin-bottom: 0.4rem; color: var(--lamsoor-diep); }
.notitie p:last-child { margin-bottom: 0; }

/* Wat je zelf doet: een breed vlak met de kop erboven en de drie adviezen
   naast elkaar, zodat het niet de opmaak van de blokken ernaast herhaalt. */
.zelfzorg { border-top: 6px solid var(--zeegroen); padding-top: 1.75rem; }
.zelfzorg__kop { margin-bottom: 1.5rem; }
.zelfzorg__kop p { margin: 0; color: var(--inkt-zacht); }

/* Een lijst met vinkjes. */
.vinklijst { list-style: none; margin: 0; padding: 0; }
.vinklijst li { position: relative; padding: 0.9rem 0 0.9rem 2.6rem; border-top: 1px solid var(--lijn); }
.vinklijst li:last-child { border-bottom: 1px solid var(--lijn); }
.vinklijst li::before { content: ""; position: absolute; left: 0.2rem; top: 1.15rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--zeegroen); }
.vinklijst li::after { content: ""; position: absolute; left: 0.72rem; top: 1.42rem; width: 0.42rem; height: 0.72rem; border: solid var(--wit); border-width: 0 3px 3px 0; transform: rotate(45deg); }
/* Naast elkaar: het vinkje boven de tekst. */
.vinklijst--rij { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.vinklijst--rij li, .vinklijst--rij li:last-child { border: 0; padding: 2.6rem 0 0; }
.vinklijst--rij li::before { left: 0; top: 0; width: 1.9rem; height: 1.9rem; }
.vinklijst--rij li::after { left: 0.66rem; top: 0.38rem; width: 0.5rem; height: 0.9rem; }

/* Genummerde stappen. */
.stappen { list-style: none; counter-reset: stap; margin: 0; padding: 0; }
.stappen li { counter-increment: stap; position: relative; padding: 0.85rem 0 0.85rem 3.4rem; }
.stappen li::before { content: counter(stap); position: absolute; left: 0; top: 0.75rem; width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center; background: var(--lamsoor-diep); color: var(--wit); font-weight: 800; font-size: 1.15rem; line-height: 1; }

/* Openingstijden als week: per dag een balk met waar we zijn (in de praktijk,
   aan huis of dicht) en de tijden, als lijst met een dt per dag en een dd voor
   de plek en een voor de tijd. Breed op één regel, op de telefoon dag en plek
   boven en de tijd eronder. */
.week__dicht { display: inline-block; margin: 0 0 1.25rem; background: var(--slik); color: var(--grond); font-weight: 700; border-radius: var(--rond); padding: 0.55rem 1rem; }
/* De rijen delen de kolommen van de week (subgrid): zo is de kolom met Aan
   huis of In de praktijk overal even breed en beginnen de tijden onder
   elkaar. Zonder subgrid staat elke rij op zichzelf. */
.week { max-width: 46rem; margin: 0; display: grid; grid-template-columns: 9.5rem max-content minmax(0, 1fr); gap: 0.5rem 1.25rem; font-variant-numeric: tabular-nums; }
.week__dag { grid-column: 1 / -1; display: grid; grid-template-columns: 9.5rem auto minmax(0, 1fr); grid-template-columns: subgrid; grid-template-areas: "dag soort tijd"; align-items: center; column-gap: 1.25rem; row-gap: 0.2rem; background: var(--wit); border-left: 6px solid var(--lijn); border-radius: var(--rond); padding: 0.75rem 1rem; }
.week__dag dt { grid-area: dag; font-weight: 700; }
.week__dag dd { grid-area: soort; margin: 0; }
.week__dag dd.week__tijd { grid-area: tijd; }
.week__dag--huis { border-left-color: var(--zeegroen); }
.week__dag--praktijk { border-left-color: var(--lamsoor-diep); }
.week__dag--dicht { background: transparent; border-left-color: var(--lijn); }
.week__soort { display: inline-block; font-size: 1.05rem; font-weight: 700; padding: 0.2rem 0.75rem; border-radius: 999px; white-space: nowrap; }
.week__dag--huis .week__soort { background: var(--zeegroen); color: var(--wit); }
.week__dag--praktijk .week__soort { background: var(--lamsoor-diep); color: var(--wit); }
.week__dag--dicht .week__soort { border: 2px solid var(--lijn); color: var(--inkt-zacht); }

/* Route: grote foto van de ingang, met de feiten eronder naast elkaar. */
.route__beeld { position: relative; display: block; margin: 0 1rem 2.5rem 0; }
.route__beeld::before { content: ""; position: absolute; inset: 1rem -1rem -1rem 1rem; background: var(--wit); border-radius: calc(var(--rond) + 6px); }
.route__beeld img { position: relative; width: 100%; aspect-ratio: 21 / 9; object-fit: cover; object-position: 50% 60%; border-radius: calc(var(--rond) + 6px); }

/* Feiten (route) */
.feiten { margin: 0; }
.feiten div { display: grid; grid-template-columns: minmax(10rem, 0.8fr) minmax(0, 1.6fr); gap: 0.25rem 1.5rem; padding: 1rem 0; border-top: 1px solid var(--lijn); }
.feiten div:last-child { border-bottom: 1px solid var(--lijn); }
.feiten dt { font-weight: 700; }
.feiten dd { margin: 0; }
.feiten--rij { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 2rem; }
.feiten--rij div, .feiten--rij div:last-child { display: block; border-bottom: 0; border-top: 3px solid var(--zeegroen); padding: 0.9rem 0 0; }
.feiten--rij dt { margin-bottom: 0.25rem; }

/* Vragen */
.vragen details { border-top: 1px solid var(--lijn); }
.vragen details:last-child { border-bottom: 1px solid var(--lijn); }
.vragen summary { cursor: pointer; font-weight: 700; font-size: 1.25rem; padding: 1.05rem 2.4rem 1.05rem 0; position: relative; list-style: none; }
.vragen summary:hover { color: var(--lamsoor-diep); }
.vragen summary::-webkit-details-marker { display: none; }
.vragen summary::after { content: "+"; content: "+" / ""; position: absolute; right: 0.25rem; top: 1.2rem; font-size: 1.7rem; line-height: 1; color: var(--lamsoor-diep); }
.vragen details[open] summary::after { content: "\2212"; content: "\2212" / ""; }
.vragen details p { margin: 0 0 1.2rem; max-width: 60ch; }

/* Afsluitend blok met knoppen */
.actie { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem 2rem; flex-wrap: wrap; }
.actie h2 { margin-bottom: 0.3rem; }
.actie p { margin: 0; color: var(--lamsoorlicht); }
.actie__knoppen { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* Voet */
.site-voet { background: var(--slik); color: var(--grond); padding: clamp(2.5rem, 5vw, 3.75rem) var(--rand); border-top: 1px solid var(--lijn-licht); }
.site-voet__inner { max-width: var(--maat); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem 2rem; align-items: end; }
:where(.site-voet) p { margin: 0; }
.site-voet__naam { font-family: var(--kop); font-size: 1.5rem; font-weight: 800; margin-bottom: 0.25rem; }
.site-voet a { color: var(--grond); text-decoration-color: var(--lamsoorlicht); }
.site-voet .tekstknop { text-decoration-color: var(--lamsoorlicht); }
.site-voet .tekstknop:hover { color: var(--lamsoorlicht); }
.site-voet__joepa { grid-column: 1 / -1; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--lijn-licht); font-size: 1rem; color: var(--lamsoorlicht); }

/* De melding achter bellen, afspraak en mailen. */
.melding { border: 0; border-radius: 16px; padding: 1.75rem; max-width: 28rem; width: calc(100% - 2rem); color: var(--inkt); background: var(--grond); box-shadow: 0 20px 60px rgba(43, 40, 54, 0.3); border-top: 6px solid var(--lamsoor); }
.melding::backdrop { background: rgba(43, 40, 54, 0.55); }
.melding__kop { font-family: var(--kop); font-size: 1.5rem; font-weight: 800; margin-bottom: 0.5rem; }
.melding__sluit { margin-top: 0.5rem; }

/* Omslagpunten in em, niet in px: kiest iemand in de browser een grotere
   letter, dan schuift het omslagpunt mee en loopt de kop niet uit beeld.
   Onder 60em (960 px bij de standaardletter) past het menu met de belknop
   niet meer: menu achter een knop, onderin altijd Bel en Afspraak. */
.onderbalk { display: none; }
@media (max-width: 59.9375em) {
  body { padding-bottom: calc(5rem + env(safe-area-inset-bottom)); }
  html { scroll-padding-bottom: calc(6rem + env(safe-area-inset-bottom)); }
  .onderbalk { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 0.6rem 0.8rem calc(0.6rem + env(safe-area-inset-bottom)); background: var(--grond); border-top: 1px solid var(--lijn); box-shadow: 0 -6px 18px rgba(43, 40, 54, 0.1); }
  .site-kop__bel { display: none; }
  .site-kop__menu { display: inline-flex; align-items: center; min-height: 3rem; margin-left: auto; font: inherit; font-size: 1.1rem; font-weight: 700; color: var(--inkt); background: var(--wit); border: 2px solid var(--inkt); border-radius: var(--rond); padding: 0.4rem 1.1rem; cursor: pointer; }
  .site-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; gap: 0; background: var(--grond); padding: 0.25rem var(--rand) 1rem; border-bottom: 1px solid var(--lijn); box-shadow: 0 12px 24px rgba(43, 40, 54, 0.08); }
  .site-kop--open .site-nav { display: flex; }
  .site-nav a { padding: 0.9rem 0; border-bottom: 1px solid var(--lijn); font-size: 1.2rem; }
  /* De huidige pagina niet alleen in kleur, ook vet en met een streep. */
  .site-nav a[aria-current="page"] { border-bottom-color: var(--lijn); color: var(--lamsoor-diep); box-shadow: inset 4px 0 0 var(--lamsoor); padding-left: 0.9rem; }
}

/* Onder 60em komt de kopfoto boven de tekst. */
@media (max-width: 59.9375em) {
  .hero__inner { grid-template-columns: minmax(0, 1fr); }
  .hero__beeld { grid-row: 1; margin: 0 1rem 1rem 0; }
  /* Hooguit ruim een derde van het scherm, zodat kop en knoppen op een staande
     tablet en een grote telefoon boven de onderbalk blijven. */
  .hero__beeld img, .hero__beeld--staand img { aspect-ratio: 16 / 9; max-height: 34svh; }
  .hero__beeld--staand img { object-position: 50% 45%; }
  .hero { padding-top: 1.25rem; }
  .tariefgroep { grid-template-columns: minmax(0, 1fr); }
  .treden, .vinklijst--rij, .feiten--rij { grid-template-columns: minmax(0, 1fr); }
  .vinklijst--rij { gap: 1.5rem; }
  .feiten--rij { gap: 1.25rem; }
  .split--vroeg { grid-template-columns: minmax(0, 1fr); }
  .route__beeld img { aspect-ratio: 16 / 9; }
}

@media (max-width: 47.4375em) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .feiten div { grid-template-columns: minmax(0, 1fr); }
  .site-voet__inner { grid-template-columns: minmax(0, 1fr); }
}

/* Smalle telefoons: vanaf-prijzen onder de tekst, en de duur onder de naam
   in de tarieven, zodat naam en prijs ruimte houden. */
@media (max-width: 34.9375em) {
  body { font-size: 1.15rem; }
  .diensten li { grid-template-columns: minmax(0, 1fr); }
  .diensten .diensten__prijs { grid-column: 1; grid-row: auto; margin-top: 0.3rem; }
  /* De tabel blijft een tabel (een schermlezer leest hem dan als tabel voor);
     alleen de kolom Duur verhuist naar een regel onder de uitleg. */
  .tarieven thead th:nth-child(2), .tarief__duur { display: none; }
  .tarief__duur-klein { display: block; margin-top: 0.35rem; font-size: 1rem; font-weight: 700; color: var(--inkt-zacht); }
  .tarief__naam { font-size: 1.2rem; }
  .route__dorp { flex-wrap: wrap; gap: 0 1rem; }
  .week { grid-template-columns: minmax(0, 1fr); }
  /* Op de telefoon: dag links, Aan huis of In de praktijk rechts en de tijden
     eronder. Past de dag niet naast het label (een smalle telefoon met een
     grote browserletter), dan schuift het label onder de dag in plaats van dat
     de dag afbreekt. */
  .week__dag { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.2rem 0.75rem; padding: 0.7rem 0.85rem; }
  .week__dag dd.week__tijd { flex-basis: 100%; }
}

/* Heel smalle telefoons: logo en menuknop passen naast elkaar. Met een grotere
   letter in de browser past dat soms niet meer; dan schuift de menuknop naar
   een eigen regel in plaats van buiten beeld te vallen. */
@media (max-width: 22.4375em) {
  .voorbeeldbalk { font-size: 0.9rem; padding-inline: 0.75rem; }
  .site-kop__inner { gap: 0.5rem 0.75rem; }
  .logo__takje { width: 1.9rem; height: 1.9rem; }
  .site-kop__naam { font-size: 1.5rem; }
  .site-kop__sub { letter-spacing: 0.12em; }
  .site-kop__menu { padding: 0.35rem 0.8rem; }
}

/* Onder 20em: een telefoon met een grote browserletter (bij de
   standaardletter pas onder 320 px). Logo en Menu mogen dan over twee regels
   en de kop plakt niet meer bovenaan, zodat er ruimte voor de tekst
   overblijft. Een lang woord (Voetbehandelingen) breekt af met een
   afbreekstreepje in plaats van buiten beeld te lopen. */
@media (max-width: 19.9375em) {
  html { scroll-padding-top: 1rem; }
  .site-kop { position: relative; }
  .site-kop__inner { flex-wrap: wrap; row-gap: 0.5rem; }
  body { overflow-wrap: break-word; hyphens: auto; hyphenate-limit-chars: 16 6 6; }
  :is(h1, h2, h3, th, dt, .trede__nummer, .site-voet__naam) { hyphenate-limit-chars: 8 3 3; }
  /* In de tarieftabel breekt een naam als Voetbehandeling af; de kolomkop
     Prijs blijft heel. */
  .tarieven thead th:last-child { white-space: nowrap; }
}
/* Een telefoon met een grote browserletter: onder 19.5em passen Bel en
   Afspraak niet meer naast elkaar (ze hebben samen 19,1em nodig). Dan staan ze
   onder elkaar en komt er onderin ruimte bij. Bij de standaardletter is dat
   pas onder 320 px. */
@media (max-width: 19.5em) {
  body { padding-bottom: calc(9.25rem + env(safe-area-inset-bottom)); }
  html { scroll-padding-bottom: calc(10.25rem + env(safe-area-inset-bottom)); }
  .onderbalk { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; }
}