/* Schoonheidssalon Vlasbloem, voorbeeldsite van joepa (deze salon bestaat
   niet). Eigen stijl, los van de joepa-kleuren en van de andere
   voorbeeldsites.
   Letters: Newsreader 500 rechtop en cursief (koppen en logo, verfijnd en
   zacht) en Commissioner (tekst, variabel van 400 tot 600, warm en goed
   leesbaar op kleine maten), zelf gehost onder de SIL Open Font License (zie
   fonts/). Niet Figtree: dat is de tekstletter van joepa.nl zelf.
   Kleuren uit vlas en linnen: linnen als grond, bleek (het bleekveld) als
   tweede vlak, inkt voor tekst, vlasblauw (de bloem van het vlas) als enige
   accent, nacht voor het afsluitblok en de voet.
   Vormtaal: de boog van een salonspiegel boven de kopfoto, de prijslijst als
   gezette kaart met duur en prijs op één lijn, en een vlasbloempje van vijf
   blaadjes in het logo.
   Contrast (WCAG AA): inkt #26262e op linnen #f5f1ea 13,3:1, op bleek #ebe4d8
   11,9:1; inkt-zacht #5c5963 op linnen 6,1:1, op bleek 5,4:1; vlasblauw
   #4d6796 op linnen 5,0:1 (op bleek maar 4,497:1, dus daar geen tekst in
   vlasblauw); vlasblauw-diep #3f5783 op linnen 6,4:1, op bleek 5,7:1; wit op
   vlasblauw-diep 7,2:1; linnen op nacht #262c3a 12,4:1; vlaslicht #c9d3e6 op
   nacht 9,3:1. */
@font-face { font-family: "Newsreader"; src: url("fonts/newsreader-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("fonts/newsreader-500-italic.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Commissioner"; src: url("fonts/commissioner.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; }

:root {
  --linnen: #f5f1ea;
  --bleek: #ebe4d8;
  --wit: #ffffff;
  --inkt: #26262e;
  --inkt-zacht: #5c5963;
  --vlasblauw: #4d6796;
  --vlasblauw-diep: #3f5783;
  --nacht: #262c3a;
  --vlaslicht: #c9d3e6;
  --lijn: #d8cfc1;
  --lijn-licht: rgba(245, 241, 234, 0.2);
  --kop: "Newsreader", "Iowan Old Style", Georgia, serif;
  --tekst: "Commissioner", system-ui, -apple-system, "Segoe UI", sans-serif;
  --maat: 1120px;
  --rand: 1.25rem;
  --rond: 6px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--tekst); font-size: 1.0625rem; line-height: 1.65; color: var(--inkt); background: var(--linnen); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { font-family: var(--kop); font-weight: 500; line-height: 1.1; margin: 0 0 0.5em; text-wrap: balance; }
h1 { font-size: clamp(2.2rem, 1.55rem + 2.5vw, 3.45rem); line-height: 1.04; letter-spacing: -0.012em; }
h2 { font-size: clamp(1.75rem, 1.35rem + 1.3vw, 2.4rem); letter-spacing: -0.008em; }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1em; }
/* Geen los woord op de laatste regel van lopende tekst. */
p, li, dd, summary, td { text-wrap: pretty; }
a { color: var(--inkt); text-decoration-color: var(--vlasblauw); text-underline-offset: 0.2em; text-decoration-thickness: 1.5px; }
a:hover { color: var(--vlasblauw-diep); }
.accent { font-style: italic; color: var(--vlasblauw); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--vlasblauw); outline-offset: 3px; }
.voorbeeldbalk :focus-visible, .site-voet :focus-visible, .blok--nacht :focus-visible { outline-color: var(--vlaslicht); }
/* De skiplink valt bij focus over de donkere voorbeeldbalk: daarom een licht
   vlak met een donkere ring binnen dat vlak, anders liepen de teksten in
   elkaar over en was de ring onzichtbaar. Laag genoeg om ook op desktop, waar
   de balk één regel hoog is, binnen de balk te blijven. */
.skiplink { position: absolute; left: -999px; top: 0; z-index: 100; background: var(--linnen); color: var(--inkt); font-weight: 600; padding: 0.3rem 0.9rem; border-radius: var(--rond); }
.skiplink:focus { left: 1rem; top: 0.2rem; }
.skiplink:focus-visible { outline: 2px solid var(--inkt); outline-offset: -5px; }

/* De voorbeeldbalk staat op elke pagina bovenaan. */
.voorbeeldbalk { background: var(--nacht); color: var(--linnen); font-size: 0.9rem; text-align: center; padding: 0.5rem 1rem; }
.voorbeeldbalk p { margin: 0; }
.voorbeeldbalk a { color: var(--linnen); font-weight: 600; text-decoration-color: var(--vlaslicht); }

/* Kop met logo, menu en de afspraakknop, plakt bovenaan. */
.site-kop { position: sticky; top: 0; z-index: 20; background: var(--linnen); border-bottom: 1px solid var(--lijn); }
.site-kop__inner { max-width: calc(var(--maat) + 2 * var(--rand)); margin: 0 auto; padding: 0.65rem var(--rand); display: flex; align-items: center; gap: 1.75rem; }
.site-kop__logo { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--inkt); line-height: 1; }
.logo__bloem { width: 2.1rem; height: 2.1rem; color: var(--vlasblauw); flex: none; }
.logo__hart { fill: var(--linnen); }
.site-kop__woord { display: flex; flex-direction: column; }
.site-kop__naam { font-family: var(--kop); font-size: 1.75rem; font-weight: 500; letter-spacing: -0.01em; }
.site-kop__sub { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; color: var(--inkt-zacht); margin-top: 0.25rem; }
.site-nav { display: flex; gap: 1.6rem; margin-left: auto; }
.site-nav a { color: var(--inkt); text-decoration: none; font-weight: 500; padding: 0.3rem 0; border-bottom: 1.5px solid transparent; white-space: nowrap; }
.site-nav a:hover, .site-nav a[aria-current="page"] { border-bottom-color: var(--vlasblauw); }
.site-kop__menu { display: none; }
/* Net boven 960 is de kop krap: met de gewone tussenruimtes brak de knop
   Afspraak maken tot 989 breed over twee regels. De knop blijft op één regel,
   de ruimte tussen logo, menu en knop wordt daar kleiner. */
.site-kop__afspraak { white-space: nowrap; }
@media (min-width: 960px) and (max-width: 1040px) {
  .site-kop__inner { gap: 1.1rem; }
  .site-nav { gap: 1.2rem; }
}
/* 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). Onder 960 komt
   er ruimte voor de onderbalk bij, zie daar. */
html { scroll-padding-top: 6rem; }

/* Knoppen: vol is vlasblauw-diep met wit (7,2:1), lijn is inkt op de grond. */
.knop { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; font: inherit; font-weight: 600; padding: 0.8rem 1.4rem; border-radius: 999px; border: 1.5px 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(--vlasblauw-diep); color: var(--wit); border-color: var(--vlasblauw-diep); }
.knop--vol:hover { background: var(--nacht); border-color: var(--nacht); color: var(--wit); }
.knop--lijn { background: transparent; color: var(--inkt); border-color: var(--inkt); }
.knop--lijn:hover { background: var(--bleek); color: var(--inkt); }
.knop--licht-vol { background: var(--linnen); color: var(--nacht); border-color: var(--linnen); }
.knop--licht-vol:hover { background: var(--vlaslicht); border-color: var(--vlaslicht); }
.knop--licht { background: transparent; color: var(--linnen); border-color: var(--linnen); }
.knop--licht:hover { background: rgba(245, 241, 234, 0.12); }
.knop:active { transform: translateY(1px); }
.tekstknop { font: inherit; background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; text-decoration-color: var(--vlasblauw); text-decoration-thickness: 1.5px; text-underline-offset: 0.2em; cursor: pointer; }
.tekstknop:hover { color: var(--vlasblauw-diep); }
.tekstlink { font-weight: 600; white-space: nowrap; }

/* Blokken */
.blok { padding: clamp(2.75rem, 6vw, 5rem) var(--rand); }
.blok__inner { max-width: var(--maat); margin: 0 auto; }
.blok--bleek { background: var(--bleek); }
.blok--nacht { background: var(--nacht); color: var(--linnen); }
.blok p { max-width: 62ch; }
.blok__kop { margin-bottom: 1.75rem; }
.blok__kop h2 { margin-bottom: 0.3rem; }
.blok__kop p { margin: 0; color: var(--inkt-zacht); }

/* Twee kolommen */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: clamp(1.75rem, 5vw, 5rem); align-items: start; }
.split--midden { align-items: center; }
.split--gelijk { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.split img { border-radius: var(--rond); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.split__beeld { display: block; margin-top: 1.75rem; }
/* Foto rechts: op de home staan anders drie blokken na elkaar met de foto
   links. Op de telefoon blijft de foto boven de tekst. */
@media (min-width: 760px) {
  .split--foto-rechts > picture { order: 2; }
}

/* Kop van de pagina: tekst links, foto rechts. Op de home en bij De salon
   krijgt de foto de boog van een salonspiegel. */
.hero { padding: clamp(1.75rem, 4vw, 3.25rem) var(--rand) clamp(2.5rem, 5vw, 4rem); }
.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; }
.hero__tekst p { max-width: 44ch; font-size: 1.2rem; color: var(--inkt-zacht); text-wrap: pretty; }
.hero__knoppen { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }
.hero__beeld img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--rond); }
.hero__beeld--boog img { aspect-ratio: 4 / 5; max-height: 38rem; border-radius: 999px 999px var(--rond) var(--rond); }

/* Wat we doen: drie rijen met haarlijnen, 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.1rem 1.5rem; padding: 1.35rem 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; }
.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-style: italic; font-size: 1.2rem; color: var(--inkt); white-space: nowrap; }

/* Je eerste afspraak: foto en vier genummerde stappen. */
.eerste { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(1.75rem, 5vw, 4.5rem); align-items: center; }
.eerste__beeld img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--rond); }
.stappen { list-style: none; counter-reset: stap; margin: 0; padding: 0; }
.stappen li { counter-increment: stap; display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: 0.9rem; padding: 1.1rem 0; border-top: 1px solid var(--lijn); }
.stappen li:last-child { border-bottom: 1px solid var(--lijn); }
/* Rechtop: cursief vlasblauw staat hooguit één keer per pagina (in de h1). */
.stappen li::before { content: counter(stap) "."; font-family: var(--kop); font-size: 1.6rem; line-height: 1; color: var(--vlasblauw); padding-top: 0.05rem; }
.stappen strong { display: block; font-family: var(--kop); font-weight: 500; font-size: 1.25rem; line-height: 1.2; margin-bottom: 0.2rem; }
.stappen p { margin: 0; color: var(--inkt-zacht); }

/* De prijslijst als gezette kaart: naam en uitleg links, duur en prijs
   rechts op één lijn, met tabulaire cijfers zodat de bedragen onder elkaar
   staan. */
.prijsgroep { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: clamp(1.75rem, 5vw, 4.5rem); align-items: start; }
.prijsgroep__kop p { color: var(--inkt-zacht); }
.prijsgroep__kop p:last-child { margin-bottom: 0; }
.prijskaart { list-style: none; margin: 0; padding: 0.4rem 1.6rem; background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--rond); }
.blok--bleek .prijskaart { background: var(--linnen); }
.prijs { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.25rem 1.5rem; padding: 1.05rem 0; border-top: 1px solid var(--lijn); align-items: baseline; }
.prijs:first-child { border-top: 0; }
.prijs__naam { font-size: 1.22rem; margin: 0 0 0.15rem; }
.prijs__uitleg { margin: 0; font-size: 0.97rem; color: var(--inkt-zacht); }
.prijs__meta { margin: 0; display: flex; align-items: baseline; gap: 1rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.prijs__duur { font-size: 0.95rem; color: var(--inkt-zacht); }
.prijs__bedrag { font-family: var(--kop); font-size: 1.3rem; min-width: 3.4rem; text-align: right; }

/* Cadeaubon */
.bon h2 { margin-bottom: 0.4rem; }

/* Rijen (zo werken we) en feiten (route) */
.rijen { list-style: none; margin: 1.5rem 0 0; padding: 0; }
/* Kop en tekst op één basislijn: bovenaan uitgelijnd stond de kop hoger dan de
   tekst ernaast, want de regel van de tekst is hoger. */
.rijen li { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.8fr); gap: 0.4rem 2.5rem; align-items: baseline; padding: 1.35rem 0; border-top: 1px solid var(--lijn); }
.rijen li:last-child { border-bottom: 1px solid var(--lijn); }
.rijen h3 { margin: 0; }
.rijen p { margin: 0; }
.feiten { margin: 0; }
.feiten div { display: grid; grid-template-columns: minmax(9rem, 0.7fr) 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: 600; }
.feiten dd { margin: 0; }

/* Voor en na je afspraak: per behandeling een rij met twee vakken. Op
   desktop staan de kolomkoppen één keer bovenaan en zijn de labels per vak
   alleen voor schermlezers; smaller dan 760 staat het label bij elk vak.
   Koppen en labels rechtop in vlasblauw-diep: dit blok ligt op bleek, en daar
   haalt vlasblauw net geen 4,5:1. */
.wijzer__koppen { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; margin: 0; padding-bottom: 0.7rem; font-family: var(--kop); font-size: 1.2rem; color: var(--vlasblauw-diep); }
/* Anders wint .blok p (62ch) en staan de kolomkoppen niet boven hun kolom. */
.blok .wijzer__koppen { max-width: none; }
.wijzer__lijst { list-style: none; margin: 0; padding: 0; }
.wijzer__rij { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr) minmax(0, 1fr); gap: 0.5rem 2rem; align-items: baseline; padding: 1.25rem 0; border-top: 1px solid var(--lijn); }
.wijzer__rij:last-child { border-bottom: 1px solid var(--lijn); }
.wijzer__naam { margin: 0; font-size: 1.3rem; }
.wijzer__vak p { margin: 0; }
.wijzer__label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Openingstijden als tabel */
.tijden { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tijden th, .tijden td { text-align: left; padding: 0.8rem 0; border-top: 1px solid var(--lijn); font-weight: 400; }
.tijden tr:last-child th, .tijden tr:last-child td { border-bottom: 1px solid var(--lijn); }
.tijden th { font-weight: 600; width: 45%; }
/* Een extra sluiting naast het vaste rooster, zoals een salon die per mail
   doorgeeft. */
.tijden__extra { border-left: 3px solid var(--vlasblauw); padding: 0.1rem 0 0.1rem 0.9rem; font-weight: 600; }

/* 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: 600; font-size: 1.1rem; padding: 1rem 2rem 1rem 0; position: relative; list-style: none; }
.vragen summary::-webkit-details-marker { display: none; }
.vragen summary:hover { color: var(--vlasblauw-diep); }
.vragen summary::after { content: "+"; content: "+" / ""; position: absolute; right: 0.25rem; top: 0.8rem; font-size: 1.4rem; line-height: 1; color: var(--vlasblauw); }
.vragen details[open] summary::after { content: "\2212"; content: "\2212" / ""; }
.vragen details p { margin: 0 0 1.1rem; max-width: 62ch; }

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

/* Voet */
.site-voet { background: var(--nacht); color: var(--linnen); padding: clamp(2.25rem, 5vw, 3.5rem) 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; margin-bottom: 0.25rem; }
.site-voet a { color: var(--linnen); text-decoration-color: var(--vlaslicht); }
.site-voet .tekstknop { text-decoration-color: var(--vlaslicht); }
/* Bij hover licht blijven: vlasblauw-diep op nacht haalde maar 1,9:1. */
.site-voet .tekstknop:hover { color: var(--vlaslicht); }
.site-voet__joepa { grid-column: 1 / -1; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--lijn-licht); font-size: 0.9rem; color: var(--vlaslicht); }

/* De melding achter afspraak, bellen en mailen. */
.melding { border: 0; border-radius: 14px; padding: 1.75rem; max-width: 27rem; width: calc(100% - 2rem); color: var(--inkt); background: var(--linnen); box-shadow: 0 20px 60px rgba(38, 44, 58, 0.3); border-top: 4px solid var(--vlasblauw); }
.melding::backdrop { background: rgba(38, 44, 58, 0.5); }
.melding__kop { font-family: var(--kop); font-size: 1.45rem; margin-bottom: 0.5rem; }
.melding__sluit { margin-top: 0.5rem; }

/* Onder 960: de kop naast de foto past niet meer (alles onder elkaar), het
   menu met de afspraakknop ook niet (menu achter een knop, onderin altijd
   Afspraak en Bel). De boog vervalt: liggend over de hele breedte. */
.onderbalk { display: none; }
@media (max-width: 959px) {
  .hero__inner { grid-template-columns: minmax(0, 1fr); }
  .hero__beeld { grid-row: 1; margin: 0 calc(-1 * var(--rand)); }
  /* Hooguit 42 procent van het scherm, zodat kop en knop op een staande
     tablet boven de vouw blijven (met 45 procent eindigde de knop op 760 tot
     800 breed 3 tot 8 px onder de vouw). */
  .hero__beeld img, .hero__beeld--boog img { border-radius: 0; aspect-ratio: 16 / 9; max-height: 42svh; }
  /* De staande kopfoto van de home liggend: net boven het midden, zodat de
     specialiste, haar handen en het gezicht van de klant samen in beeld zijn
     (met 30% viel de klant eruit). */
  .hero__beeld--boog img { object-position: 50% 48%; }
  .hero { padding-top: 0; }
  .eerste { grid-template-columns: minmax(0, 1fr); }
  /* Ruimte voor de onderbalk, die op een iPhone met thuisbalk hoger wordt. */
  body { padding-bottom: calc(4.6rem + env(safe-area-inset-bottom)); }
  /* Een link of vraag die focus krijgt, valt niet achter de onderbalk. */
  html { scroll-padding-bottom: calc(5.5rem + 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(--linnen); border-top: 1px solid var(--lijn); box-shadow: 0 -6px 18px rgba(38, 44, 58, 0.08); }
  .site-kop__afspraak { display: none; }
  .site-kop__menu { display: inline-block; margin-left: auto; font: inherit; font-weight: 600; color: var(--inkt); background: none; border: 1.5px solid var(--inkt); border-radius: 999px; padding: 0.45rem 1rem; cursor: pointer; }
  .site-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; gap: 0; background: var(--linnen); padding: 0.25rem var(--rand) 1rem; border-bottom: 1px solid var(--lijn); }
  .site-kop--open .site-nav { display: flex; }
  .site-nav a { padding: 0.75rem 0; border-bottom: 1px solid var(--lijn); font-weight: 400; }
  /* De huidige pagina niet alleen in kleur, ook vet (WCAG 1.4.1). */
  .site-nav a[aria-current="page"] { border-bottom-color: var(--lijn); color: var(--vlasblauw-diep); font-weight: 600; }
}

@media (max-width: 759px) {
  .split, .split--gelijk, .prijsgroep, .rijen li { grid-template-columns: minmax(0, 1fr); }
  .wijzer__koppen { display: none; }
  .wijzer__rij { grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
  .wijzer__label { position: static; width: auto; height: auto; margin: 0 0 0.15rem; overflow: visible; clip: auto; white-space: normal; font-family: var(--kop); font-size: 1.05rem; color: var(--vlasblauw-diep); }
  .rijen li { gap: 0.3rem; padding: 1.2rem 0; }
  .feiten div { grid-template-columns: minmax(0, 1fr); }
  .site-voet__inner { grid-template-columns: minmax(0, 1fr); }
}

/* Smalle telefoons: de prijskaart met minder binnenruimte, duur en prijs onder
   de naam. */
@media (max-width: 559px) {
  .prijskaart { padding: 0.2rem 1rem; }
  .prijs { grid-template-columns: minmax(0, 1fr); }
  .prijs__meta { justify-content: space-between; }
  .diensten li { grid-template-columns: minmax(0, 1fr); }
  .diensten .diensten__prijs { grid-column: 1; grid-row: auto; margin-top: 0.2rem; }
}

/* Heel smalle telefoons: de voorbeeldbalk blijft op twee regels, en logo en
   menuknop passen naast elkaar (op 320 stak de menuknop 10 px uit). */
@media (max-width: 359px) {
  .voorbeeldbalk { font-size: 0.8rem; padding-inline: 0.75rem; }
  .site-kop__inner { gap: 0.75rem; }
  .logo__bloem { width: 1.7rem; height: 1.7rem; }
  .site-kop__logo { gap: 0.45rem; }
  .site-kop__naam { font-size: 1.45rem; }
  .site-kop__sub { letter-spacing: 0.16em; }
  .site-kop__menu { padding: 0.4rem 0.8rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; }
}