/*
 * Componenten. Elke staat die bestaat staat hier: rust, hover, focus, actief,
 * uitgeschakeld, bezig, fout, leeg.
 *
 * De vormentaal komt uit het logo: een cirkel met twee bogen die eruit
 * stralen. Wat je aanraakt is een pil, wat een persoon toont is een cirkel,
 * wat een vlak is heeft een grote radius, en de boog komt terug als markering
 * onder elke h2 en bij het aanwijzen van een dienst.
 *
 * Hover-regels staan altijd binnen @media (hover: hover) and (pointer: fine),
 * anders blijft een tik op een telefoon in de hover-staat hangen.
 */

/* ---- Kop ----------------------------------------------------------------- */

.kop {
  background: var(--wit);
}

.kop__binnen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ruimte-4);
  padding-block: var(--ruimte-4);
}

.kop__logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  border-radius: var(--radius-klein);
}

.kop__logo img {
  height: 3rem;
  width: auto;
  transition: transform var(--duur-normaal) var(--ease-uit);
}

@media (min-width: 48rem) {
  .kop__logo img {
    height: 3.5rem;
  }
}

@media (hover: hover) and (pointer: fine) {
  /* Een klein duwtje, geen sprong. De mond in het logo lijkt even te bewegen,
   * wat past bij wat de praktijk doet. */
  .kop__logo:hover img {
    transform: scale(1.03) rotate(-1.5deg);
  }
}

/* ---- Navigatie -----------------------------------------------------------
 * Zonder JavaScript staat de navigatie uitgeklapt onder het logo. De CSS
 * stuurt op aria-expanded, dat al in de HTML staat, zodat er bij het eerste
 * schilderen niets verspringt.
 */

.hoofdnav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ruimte-2);
}

/* :not(.knop) want de afspraakknop staat in dezelfde lijst. Zonder deze
 * uitzondering wint .hoofdnav a (0,1,1) van .knop (0,1,0) en verliest de knop
 * zijn eigen padding en zijn veegovergang. Gemeten in de browser: de knop
 * kreeg background-color in plaats van background-position. */
.hoofdnav a:not(.knop) {
  display: inline-block;
  padding: var(--ruimte-2) var(--ruimte-4);
  border-radius: var(--pil);
  color: var(--ink);
  text-decoration: none;
  font-weight: var(--gewicht-half);
  transition: background-color var(--duur-snel) var(--ease-uit),
    color var(--duur-snel) var(--ease-uit);
}

@media (hover: hover) and (pointer: fine) {
  .hoofdnav a:not(.knop):hover {
    background: var(--oker-zacht);
  }
}

.hoofdnav a:not(.knop)[aria-current="page"] {
  background: var(--ink);
  color: var(--wit);
}

.navknop {
  display: none;
}

@media (max-width: 61.99rem) {
  .kop__binnen {
    flex-wrap: wrap;
  }

  .hoofdnav {
    flex-basis: 100%;
  }

  .hoofdnav ul {
    flex-direction: column;
    align-items: stretch;
    gap: var(--ruimte-1);
  }

  .hoofdnav a:not(.knop) {
    /* 44px raakvlak, ook op een kleine telefoon. */
    padding-block: var(--ruimte-3);
    min-height: 2.75rem;
    border-radius: var(--radius-groot);
  }

  /* Ingeklapt vanaf het EERSTE schilderen, niet pas als nav.js draait. Met de
   * oude versie stond de navigatie open tot het script hem dichtklapte, en
   * sprong de pagina ruim 200px omhoog. Gemeten: CLS 0,27. */
  .js .hoofdnav {
    display: none;
  }

  /* Uitklappen met dezelfde vloeiende hoogte als de uitklappers verderop.
   * display: none en block wisselen gaf een sprong; nu groeit het menu open en
   * krimpt het weer dicht. interpolate-size staat op :root en maakt van auto
   * een waarde waar een transitie tussen kan rekenen. */
  .js .navknop + .hoofdnav {
    display: block;
    block-size: 0;
    overflow: clip;
    /* Niet alleen wegklikken maar echt overslaan. Met alleen een hoogte van 0
     * blijven de links met de tab-toets bereikbaar terwijl niemand ze ziet.
     * allow-discrete laat de eigenschap pas aan het eind van de animatie
     * omslaan, zodat het dichtklappen zichtbaar blijft. */
    content-visibility: hidden;
    transition: block-size var(--duur-normaal) var(--ease-uit),
      content-visibility var(--duur-normaal) var(--ease-uit) allow-discrete;
  }

  .js .navknop[aria-expanded="true"] + .hoofdnav {
    block-size: auto;
    content-visibility: visible;
  }

  .js .navknop {
    display: inline-flex;
    align-items: center;
    gap: var(--ruimte-2);
    min-height: 2.75rem;
    padding: var(--ruimte-2) var(--ruimte-5);
    background: var(--wit);
    border: var(--lijn-sterk);
    border-radius: var(--pil);
    font-weight: var(--gewicht-half);
    cursor: pointer;
    transition: background-color var(--duur-snel) var(--ease-uit),
      color var(--duur-snel) var(--ease-uit);
  }

  .js .navknop[aria-expanded="true"] {
    background: var(--ink);
    color: var(--wit);
  }
}


/* ---- Icoon ---------------------------------------------------------------
 * Altijd currentColor, dus een icoon neemt de kleur van de tekst ernaast over.
 * flex: none, want in een flexrij naast tekst wordt een svg anders platgedrukt
 * zodra de tekst afbreekt.
 */

.icoon {
  flex: none;
  width: 1.25em;
  height: 1.25em;
}

/* Een icoon dat vlak voor tekst staat. De verticale uitlijning gaat op de
 * onderkant van de hoofdletter en niet op de basislijn: anders hangt een rond
 * icoon net te laag naast een kapitaal. */
.met-icoon {
  display: inline-flex;
  align-items: center;
  gap: var(--ruimte-2);
}

/* Een link die op zijn eigen regel staat is een raakvlak en moet 44 pixels
 * hoog zijn. Binnen een lopende alinea niet: daar zou een minimumhoogte de
 * regelafstand oprekken, en de WCAG-regel over raakvlakken maakt voor een
 * link in lopende tekst juist een uitzondering. */
p > a:only-child,
.voet li a,
.kruimels a,
.reviews {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}

/* ---- Google-score --------------------------------------------------------
 * Vijf sterren plus het aantal tussen haakjes. De tekstversie ("5 op Google,
 * uit 6 beoordelingen") las als een som en zei niet meteen wat het was.
 *
 * De halve ster is een echte halve: het icoon staat twee keer over elkaar en
 * de bovenste wordt met clip-path op de helft afgesneden. Geen tweede pad om
 * te onderhouden.
 */

.reviews {
  display: inline-flex;
  align-items: center;
  gap: var(--ruimte-3);
  text-decoration: none;
  color: var(--ink);
  border-radius: var(--pil);
}

.reviews__sterren {
  display: inline-flex;
  gap: 0.125rem;
  color: var(--oker);
}

.reviews__ster {
  position: relative;
  display: block;
  width: 1.125rem;
  height: 1.125rem;
}

.reviews__ster .icoon {
  width: 100%;
  height: 100%;
  stroke-width: 1.5;
}

.reviews__ster--vol .icoon {
  fill: currentcolor;
}

.reviews__ster--leeg .icoon {
  fill: none;
  color: var(--zand);
}

.reviews__ster--half .icoon {
  fill: currentcolor;
  clip-path: inset(0 50% 0 0);
}

/* De lege helft eronder, zodat een halve ster een hele omtrek houdt. */
.reviews__ster--half::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: none;
}

.reviews__cijfer {
  font-weight: var(--gewicht-half);
  font-variant-numeric: tabular-nums;
}

.reviews__aantal {
  color: var(--klei);
  font-weight: var(--gewicht-normaal);
}

.reviews__datum {
  margin-block-start: var(--ruimte-2);
  font-size: var(--tekst-xs);
  color: var(--klei);
}

@media (hover: hover) and (pointer: fine) {
  .reviews:hover .reviews__cijfer {
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}

/* ---- Knoppen -------------------------------------------------------------
 * Pillen, want alles wat je aanraakt hoort bij de cirkelfamilie.
 *
 * De hoofdknop veegt bij hover van links naar rechts vol met inkt. Dat is een
 * harde tweekleurenovergang die als vulling beweegt, geen decoratief verloop:
 * de beweging is de terugkoppeling. Geen schaal, geen lift, geen schaduw.
 */

.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.875rem;
  padding: var(--ruimte-3) var(--ruimte-6);
  border: 2px solid transparent;
  border-radius: var(--pil);
  /* no-repeat is hier geen detail. De veeg is een vlak van 200 procent breed
   * dat op 100 procent staat, en met repeat tekende de donkere helft zich
   * opnieuw in de 2px rand. Dat gaf op elke knop een zwart streepje links en
   * rechts. De randkleur volgt daarnaast de vulling, zodat de rand nooit als
   * een aparte lijn te zien is. */
  background-repeat: no-repeat;
  font-weight: var(--gewicht-half);
  font-size: var(--tekst-m);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-position var(--duur-normaal) var(--ease-uit),
    border-color var(--duur-snel) var(--ease-uit),
    color var(--duur-normaal) var(--ease-uit);
}

.knop--hoofd {
  color: var(--ink);
  border-color: var(--oker);
  background-color: var(--oker);
  background-image: linear-gradient(to right, var(--ink) 0 50%, var(--oker) 50% 100%);
  /* 210 procent, en niet 200.
   *
   * De veeg is een vlak met de grens tussen inkt en oker precies op de helft.
   * Is dat vlak exact tweemaal de knopbreedte, dan valt die grens op een rand
   * van de knop, en bij een knop die op een halve pixel begint of 224,41 breed
   * is rondt de browser een apparaatpixel van de verkeerde kant naar binnen.
   * Gemeten op deviceScaleFactor 2: pixel 16 was #28221A midden in het oker.
   *
   * Het vlak opschuiven loste dat niet op maar verplaatste het: dan valt er een
   * strook van de knop buiten het vlak, en daar komt de background-color door.
   * Dat gaf een okeren streepje in de gehoverde knop.
   *
   * Een breder vlak heeft beide problemen niet. Bij 210 procent ligt de grens
   * op ruim vijf procent van de knopbreedte buiten beeld, aan welke kant de
   * veeg ook staat, en blijft de knop volledig bedekt.
   *
   * background-origin: border-box, want de rand hoort bij het vlak. Anders
   * blijft de rand onbedekt en schemert de background-color daar door. */
  background-size: 210% 100%;
  background-origin: border-box;
  background-position: 100% 0;
}

@media (hover: hover) and (pointer: fine) {
  .knop--hoofd:hover {
    background-position: 0 0;
    border-color: var(--ink);
    color: var(--oker);
  }
}

.knop--hoofd:focus-visible {
  outline-color: var(--ink);
}

.knop--tweede {
  color: var(--ink);
  background-color: transparent;
  background-image: linear-gradient(to right, var(--ink) 0 50%, transparent 50% 100%);
  /* Zelfde overmaat als bij .knop--hoofd, zie daar. */
  background-size: 210% 100%;
  background-origin: border-box;
  background-position: 100% 0;
  border-color: var(--ink);
}

@media (hover: hover) and (pointer: fine) {
  .knop--tweede:hover {
    background-position: 0 0;
    color: var(--wit);
  }
}

.knop[aria-busy="true"],
.knop:disabled {
  opacity: 0.55;
  cursor: progress;
}

.knop:disabled {
  cursor: not-allowed;
}

/* ---- Telefoonnummer als bediening ---------------------------------------- */

/* Twee telefoonnummers onder elkaar zijn twee losse knoppen en moeten er ook
 * zo uitzien. Met de 16px van .rij raakten ze elkaar bijna en las het als een
 * blok van twee regels. Gemeten: 16px tussen de pillen in de zijkaart, 0px op
 * /afspraak/ en /contact/ waar ze met een <br> gescheiden stonden. */
.telefoonrij {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ruimte-5);
  align-items: center;
}

.telefoon {
  display: inline-flex;
  align-items: center;
  min-height: 2.875rem;
  padding: var(--ruimte-2) var(--ruimte-5);
  border: 2px solid var(--zand);
  border-radius: var(--pil);
  font-size: var(--tekst-m);
  font-weight: var(--gewicht-half);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  text-decoration: none;
  transition: border-color var(--duur-snel) var(--ease-uit),
    background-color var(--duur-snel) var(--ease-uit);
}

@media (hover: hover) and (pointer: fine) {
  .telefoon:hover {
    border-color: var(--ink);
    background: var(--oker-zacht);
  }
}

/* ---- De boog -------------------------------------------------------------
 * Het uitstralende streepje uit het logo, teruggebracht als markering onder
 * elke h2. Hij tekent zichzelf wanneer de kop in beeld komt.
 */

.boog {
  display: block;
  width: 5.5rem;
  height: 1.25rem;
  margin-block-end: var(--ruimte-3);
  overflow: visible;
}

.boog-lijn {
  fill: none;
  stroke: var(--oker);
  stroke-width: 4;
  stroke-linecap: round;
  /* Bij het tekenen loopt de streeplengte van vol naar nul. De lengte komt uit
   * het element zelf, zodat de animatie weet hoe lang de lijn is. */
  stroke-dasharray: var(--booglengte);
}

.boog--ink .boog-lijn {
  stroke: var(--ink);
}

/* ---- Dienstenlijst -------------------------------------------------------
 * Geen raster van identieke kaartjes met een icoon in een gekleurd vierkant.
 * Rijen met een ronde okeren stip die bij het aanwijzen uitgroeit, en een
 * titel die een duwtje naar rechts krijgt.
 */

.dienstlijst {
  list-style: none;
}

.dienstlijst li + li {
  border-block-start: var(--lijn);
}

.dienstlijst__link {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--ruimte-4);
  align-items: start;
  padding-block: var(--ruimte-5);
  text-decoration: none;
  color: var(--ink);
}

.dienstlijst__stip {
  grid-row: span 2;
  width: 0.75rem;
  height: 0.75rem;
  margin-block-start: 0.55rem;
  border-radius: var(--rond);
  background: var(--oker);
  transition: transform var(--duur-normaal) var(--ease-uit);
}

/* De tekening bij de dienst. Geen ronde uitsnede en geen vlak eromheen: de
 * tekening vult zijn eigen vierkant tot in de hoeken, dus een cirkel zou de
 * lijnen afknippen. De achtergrond is transparant, dus hij staat even goed op
 * wit als op de botplaat. Staat er geen beeld, dan valt de lijst terug op de
 * okeren stip hierboven. */
.dienstlijst__beeld {
  grid-row: span 2;
  width: 3.5rem;
  height: 3.5rem;
}

@media (min-width: 48rem) {
  .dienstlijst__beeld {
    width: 4.5rem;
    height: 4.5rem;
  }
}

/* De picture moet zelf de volle hoogte krijgen. Een percentage-hoogte op de
 * img rekent tegen zijn ouder, en een picture met hoogte auto geeft daar geen
 * antwoord op: de img viel terug op zijn eigen verhouding en stond als een
 * strook in een cirkel, met botkleurige randen boven en onder. */
.dienstlijst__beeld picture {
  display: block;
  width: 100%;
  height: 100%;
}

.dienstlijst__beeld img {
  width: 100%;
  height: 100%;
  /* contain en niet cover: een tekening wordt niet bijgesneden. */
  object-fit: contain;
  transition: transform var(--duur-traag) var(--ease-uit);
}

.dienstlijst__titel {
  display: block;
  font-family: var(--letter-display);
  font-size: var(--tekst-h3);
  font-weight: var(--gewicht-half);
  line-height: var(--regelhoogte-h3);
  transition: transform var(--duur-normaal) var(--ease-uit);
}

.dienstlijst__regel {
  display: block;
  margin-block-start: var(--ruimte-2);
  color: var(--klei);
  max-width: var(--maat-tekst);
  transition: transform var(--duur-normaal) var(--ease-uit);
}

@media (hover: hover) and (pointer: fine) {
  .dienstlijst__link:hover .dienstlijst__stip {
    transform: scale(2.2);
  }

  /* Het beeld schaalt binnen zijn eigen masker, dus de cirkel blijft even
   * groot en er verschuift niets in de rij eronder. */
  .dienstlijst__link:hover .dienstlijst__beeld img {
    transform: scale(1.08);
  }

  .dienstlijst__link:hover .dienstlijst__titel,
  .dienstlijst__link:hover .dienstlijst__regel {
    transform: translateX(6px);
  }
}

.dienstlijst__link:focus-visible {
  outline-offset: 4px;
  border-radius: var(--radius-groot);
}

/* ---- Merkschijf ----------------------------------------------------------
 * Een vreemd logo op de okerplaat. In een witte cirkel, want oker achter een
 * logo dat zelf oker gebruikt laat het vlak wegvallen, en een rechthoekig wit
 * vlak vloekt met de ronde vormentaal.
 */

.merkschijf {
  justify-self: center;
  align-self: center;
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--rond);
  background: var(--wit);
  display: flex;
  align-items: center;
  padding: var(--ruimte-6);
}

/* De link en de picture moeten blok zijn en de volle breedte krijgen. Als ze
 * inline blijven, heeft de img geen referentiebreedte voor width: 100% en
 * staat hij op 0 bij 0 zolang het bestand nog niet binnen is. Een lege schijf
 * dus, precies tot het moment dat niemand er nog naar kijkt. */
.merkschijf a,
.merkschijf picture {
  display: block;
  width: 100%;
}

.merkschijf img {
  display: block;
  width: 100%;
  height: auto;
  /* De hoeken van het bestand wegknippen. Het origineel is een PNG met
   * transparantie, maar JPEG kent geen alpha, dus de terugval heeft witte
   * hoeken met een compressierand eromheen. Op de witte schijf zag je die
   * rand als een vierkant. */
  border-radius: var(--rond);
  /* contain en niet cover: een logo mag niet bijgesneden worden. */
  object-fit: contain;
  transition: transform var(--duur-traag) var(--ease-uit);
}

@media (hover: hover) and (pointer: fine) {
  .merkschijf:hover img {
    transform: scale(1.04);
  }
}

/* ---- Plekken waar een behandeling doorgaat -------------------------------
 * Dezelfde okeren stip als de dienstlijst, maar dit zijn geen links: het is
 * een definitielijst van vier plekken. Twee kolommen boven 52rem, want vier
 * korte alinea's onder elkaar in een halve kolom laten de rechterhelft leeg.
 */

.plekken {
  margin-block-start: var(--ruimte-6);
  display: grid;
  gap: var(--ruimte-5);
}

@media (min-width: 52rem) {
  .plekken {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--ruimte-6) var(--ruimte-8);
  }
}

.plek dt {
  display: flex;
  align-items: baseline;
  gap: var(--ruimte-3);
  font-family: var(--letter-display);
  font-size: var(--tekst-h3);
  font-weight: var(--gewicht-half);
  line-height: var(--regelhoogte-h3);
}

/* Een rond teken in plaats van een stip: het zegt meteen om welke plek het
 * gaat, en dat scheelt de lezer een regel. */
.plek__teken {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--rond);
  background: var(--oker-zacht);
  color: var(--ink);
  transition: background-color var(--duur-normaal) var(--ease-uit);
}

.plek__teken .icoon {
  width: 1.25rem;
  height: 1.25rem;
}

@media (hover: hover) and (pointer: fine) {
  .plek:hover .plek__teken {
    background: var(--oker);
  }
}

/* Uitgelijnd met de tekst van de term, niet met het teken. Anders springt de
 * omschrijving een teken-plus-gat naar links onder de kop uit. */
.plek dd {
  margin-block-start: var(--ruimte-3);
  padding-inline-start: calc(2.25rem + var(--ruimte-3));
  color: var(--klei);
}

/* ---- Portret van een logopedist ------------------------------------------
 * Een cirkel, want het merk is een cirkel. Het beeld schaalt binnen het ronde
 * masker, dus de cirkel blijft precies even groot staan en er verschuift niets
 * op de pagina.
 */

/* Geen max-width onder de 40rem: daar vult de cirkel zijn kolom, want anders
 * blijft er naast elk portret een strook wit over. */
.portret__kader {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--rond);
  overflow: hidden;
  background: var(--bot);
}

.portret__beeld {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duur-traag) var(--ease-uit);
}

@media (hover: hover) and (pointer: fine) {
  .portret:hover .portret__beeld {
    transform: scale(1.06);
  }
}

/* Geen max-width meer op het portret. Met 15rem bleef er in de plaat van
 * "De logopedisten" links en rechts van elke cirkel een strook wit over, en
 * gebruikte de rij maar 70 procent van de plaat. De cirkel vult nu zijn cel;
 * naast een bio op /over/ is die cel 12rem en klopt het daar ook. */

.portret__naam {
  margin-block-start: var(--ruimte-4);
  font-family: var(--letter-display);
  font-size: var(--tekst-h3);
  font-weight: var(--gewicht-half);
  line-height: var(--regelhoogte-h3);
}

.portret__rol {
  color: var(--klei);
}

.portret__riziv {
  margin-block-start: var(--ruimte-1);
  font-size: var(--tekst-xs);
  color: var(--klei);
  font-variant-numeric: tabular-nums;
}

/* Zichtbaar gemarkeerd zolang de tekst nog moet komen. Deze staat mag nooit op
 * het echte domein komen: tests/Feature/GeenPlaceholdersTest.php blokkeert een
 * productiedeploy zolang hij bestaat. */
.portret--placeholder .portret__kader {
  display: grid;
  place-items: center;
  border: 2px dashed var(--zand);
}

.placeholdervlag {
  display: inline-block;
  padding: var(--ruimte-1) var(--ruimte-3);
  border-radius: var(--pil);
  background: var(--karmijn);
  color: var(--wit);
  font-size: var(--tekst-xs);
  font-weight: var(--gewicht-vet);
}

/* ---- Galerij met therapiemateriaal ---------------------------------------
 * De foto's van het echte materiaal dat in de praktijk gebruikt wordt. Geen
 * decoratie: een ouder ziet hier waar zijn kind mee gaat werken.
 */

.galerij {
  display: grid;
  gap: var(--ruimte-5);
  grid-template-columns: 1fr;
  list-style: none;
}

/* Een galerij van een enkel beeld heeft geen raster nodig. In twee kolommen
 * stond zo'n foto op de halve kolombreedte met een leeg vak ernaast. */
.galerij:has(> li:only-child) {
  grid-template-columns: 1fr;
}

@media (min-width: 30rem) {
  .galerij {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 62rem) {
  .galerij--drie {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* De verhouding komt per beeld mee als custom property, want hij verschilt
 * per foto. 1,5 is 3:2, de maat waarin bijna al het materiaal gefotografeerd
 * is. Een staand portret geeft 0,75 mee, het pand 1,42. */
.galerij__kader {
  border-radius: var(--radius-groot);
  overflow: hidden;
  background: var(--bot);
  aspect-ratio: var(--kader-verhouding, 1.5);
}

.galerij__kader img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duur-traag) var(--ease-uit);
}

@media (hover: hover) and (pointer: fine) {
  .galerij li:hover .galerij__kader img {
    transform: scale(1.05);
  }
}

.galerij__bijschrift {
  display: block;
  margin-block-start: var(--ruimte-3);
  font-size: var(--tekst-s);
  color: var(--klei);
}

/* Een staand beeld tussen de tekst, bijvoorbeeld het strottenhoofd of de
 * workshopfoto. */
/* Geen max-width: een beeld hoort zijn kolom te vullen. Met 22rem stond het
 * op 352 pixels in een kolom van 564 en las de rechterkant als een gat. */
.beeld-staand {
  border-radius: var(--radius-groot);
  overflow: hidden;
}

.beeld-staand img {
  width: 100%;
  height: auto;
}

/* ---- Tarieftabel ---------------------------------------------------------
 * In een ronde plaat, haarlijnen tussen de rijen, geen zebra. Op een telefoon
 * wordt elke rij een blokje, want vier kolommen passen daar niet.
 */

.tabelplaat {
  background: var(--wit);
  border: var(--lijn);
  border-radius: var(--radius-groot);
  padding: var(--ruimte-4) var(--ruimte-5);
}

.tarieven th,
.tarieven td {
  text-align: left;
  padding: var(--ruimte-3) var(--ruimte-4) var(--ruimte-3) 0;
  border-block-end: var(--lijn);
  vertical-align: top;
}

.tarieven tr:last-child td {
  border-block-end: 0;
}

.tarieven th {
  font-weight: var(--gewicht-half);
  font-size: var(--tekst-s);
  color: var(--klei);
}

.tarieven td:last-child,
.tarieven th:last-child {
  padding-inline-end: 0;
}

.tarieven .bedrag {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 47.99rem) {
  .tarieven thead {
    display: none;
  }

  .tarieven tr {
    display: block;
    border-block-end: var(--lijn);
    padding-block: var(--ruimte-4);
  }

  .tarieven tr:last-child {
    border-block-end: 0;
  }

  .tarieven td {
    display: flex;
    justify-content: space-between;
    gap: var(--ruimte-4);
    border: 0;
    padding: var(--ruimte-1) 0;
  }

  .tarieven td::before {
    content: attr(data-label);
    color: var(--klei);
    font-size: var(--tekst-s);
  }

  .tarieven td:first-child {
    display: block;
    font-weight: var(--gewicht-half);
    padding-block-end: var(--ruimte-2);
  }

  .tarieven td:first-child::before {
    content: none;
  }
}

/* ---- Vraag en antwoord --------------------------------------------------- */

.vraag {
  background: var(--wit);
  border: var(--lijn);
  border-radius: var(--radius-groot);
  padding-inline: var(--ruimte-5);
  transition: border-color var(--duur-snel) var(--ease-uit);
}

.vraag + .vraag {
  margin-block-start: var(--ruimte-3);
}

@media (hover: hover) and (pointer: fine) {
  .vraag:hover {
    border-color: var(--oker);
  }
}

.vraag summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ruimte-4);
  padding-block: var(--ruimte-4);
  min-height: 2.75rem;
  font-weight: var(--gewicht-half);
  cursor: pointer;
  list-style: none;
}

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

/* Een rond plusje dat bij het openen naar een kruisje draait. Twee lijnen,
 * getekend met achtergrondvlakken, dus geen extra element en geen icoonset. */
.vraag summary::after {
  content: "";
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--rond);
  background-color: var(--oker-zacht);
  background-image: linear-gradient(var(--ink) 0 0), linear-gradient(var(--ink) 0 0);
  background-size: 0.75rem 2px, 2px 0.75rem;
  background-position: center center;
  background-repeat: no-repeat;
  transition: transform var(--duur-normaal) var(--ease-uit),
    background-color var(--duur-normaal) var(--ease-uit);
}

.vraag[open] summary::after {
  transform: rotate(135deg);
  background-color: var(--oker);
}

.vraag__antwoord {
  padding-block-end: var(--ruimte-5);
}

/* ---- Open en dicht, zonder hapering --------------------------------------
 * Een <details> klapt van nature in een keer open. Animeren met max-height is
 * de bekende oplossing en meteen de bron van de hapering: je gokt een hoogte,
 * en bij een korte tekst staat de animatie stil aan het eind terwijl bij een
 * lange tekst de laatste regels eruit springen.
 *
 * Dit animeert de echte hoogte. ::details-content is het vak dat de browser om
 * de inhoud zet, en interpolate-size maakt van auto een waarde waar een
 * transitie tussen kan rekenen. content-visibility gaat met allow-discrete mee,
 * anders verdwijnt de inhoud meteen bij het sluiten en klapt het dicht.
 *
 * Een browser die ::details-content niet kent, klapt gewoon open zoals altijd.
 */
:root {
  interpolate-size: allow-keywords;
}

.vraag::details-content {
  block-size: 0;
  /* clip en niet hidden: hidden maakt er een scrollcontainer van, en dan
   * springt de focus naar boven zodra je met het toetsenbord binnenkomt. */
  overflow: clip;
  transition: block-size var(--duur-normaal) var(--ease-uit),
    content-visibility var(--duur-normaal) var(--ease-uit) allow-discrete;
}

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

/* ---- Formulier -----------------------------------------------------------
 * Labels staan zichtbaar boven het veld. Nooit een placeholder als label: die
 * verdwijnt zodra er getypt wordt, en dan weet niemand meer wat er stond.
 */

.veld + .veld {
  margin-block-start: var(--ruimte-5);
}

.veld__label {
  display: block;
  font-weight: var(--gewicht-half);
  margin-block-end: var(--ruimte-2);
}

.veld__hint {
  display: block;
  font-weight: var(--gewicht-normaal);
  font-size: var(--tekst-s);
  color: var(--klei);
}

.veld input,
.veld select,
.veld textarea {
  width: 100%;
  min-height: var(--veldhoogte);
  padding: var(--ruimte-3) var(--ruimte-4);
  background: var(--wit);
  border: 2px solid var(--zand);
  border-radius: var(--radius-midden);
  transition: border-color var(--duur-snel) var(--ease-uit);
}

.veld textarea {
  min-height: 9rem;
  resize: vertical;
}

.veld input:hover,
.veld select:hover,
.veld textarea:hover {
  border-color: var(--klei);
}

.veld input:focus,
.veld select:focus,
.veld textarea:focus {
  border-color: var(--ink);
}

.veld--fout input,
.veld--fout select,
.veld--fout textarea {
  border-color: var(--fout);
}

.veld__fout {
  display: block;
  margin-block-start: var(--ruimte-2);
  color: var(--fout);
  font-weight: var(--gewicht-half);
  font-size: var(--tekst-s);
}

.veld--keuze {
  display: flex;
  align-items: flex-start;
  gap: var(--ruimte-3);
  /* De hele regel is het raakvlak: het vakje is 24px, maar het label
   * ernaast hoort erbij en is klikbaar. Samen 44px hoog. */
  min-height: 2.75rem;
}

/* margin op 0: een selectievakje heeft in elke browser een eigen marge van
 * enkele pixels, en daardoor stond het 4px naar binnen ten opzichte van elk
 * ander veld in het formulier.
 *
 * Geen eigen tekening van het vakje: het native vakje met accent-color krijgt
 * de merkkleur en houdt het gedrag dat iedereen kent, inclusief de manier
 * waarop een schermlezer het aankondigt. De radius die de browser negeert,
 * staat er daarom ook niet. */
.veld--keuze input {
  width: 1.5rem;
  height: 1.5rem;
  min-height: 0;
  flex: none;
  margin: 0.15rem 0 0;
  padding: 0;
  accent-color: var(--karmijn);
}

.veld--keuze .veld__label {
  margin-block-end: 0;
  font-weight: var(--gewicht-normaal);
}

/* Honingpot. Weg voor mensen, aanwezig voor een bot. Niet display: none, want
 * sommige bots slaan dat over; wel uit de tabvolgorde. */
.honingpot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formuliermelding {
  padding: var(--ruimte-5);
  border-radius: var(--radius-groot);
  margin-block-end: var(--ruimte-5);
}

.formuliermelding--goed {
  border: 2px solid var(--goed);
  color: var(--goed);
}

.formuliermelding--fout {
  border: 2px solid var(--fout);
  color: var(--fout);
}

.formuliermelding strong {
  display: block;
  margin-block-end: var(--ruimte-1);
}

/* ---- Zijkaart ------------------------------------------------------------ */

.zijkaart {
  background: var(--bot);
  padding: var(--ruimte-6);
  border-radius: var(--radius-plaat);
}

/* Plakken mag alleen als de kaart alleen in zijn kolom staat. Staat er iets
 * onder, dan schuift de kaart daar overheen zodra je scrollt. */
@media (min-width: 48rem) {
  .zijkaart:only-child {
    position: sticky;
    top: var(--ruimte-5);
  }
}

.zijkaart h2 {
  font-size: var(--tekst-h3);
  margin-block-end: var(--ruimte-3);
}

/* ---- Kruimelpad ---------------------------------------------------------- */

.kruimels {
  font-size: var(--tekst-s);
  color: var(--klei);
  padding-block: var(--ruimte-4);
}

.kruimels ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ruimte-2);
}

.kruimels li + li::before {
  content: "";
  display: inline-block;
  width: 0.3rem;
  height: 0.3rem;
  margin-inline-end: var(--ruimte-2);
  border-radius: var(--rond);
  background: var(--zand);
}

/* ---- Voet ----------------------------------------------------------------
 * De laatste plaat van de stapel, met een grote ronde bovenkant.
 */

.voet {
  background: var(--ink);
  color: var(--bot);
  border-start-start-radius: var(--radius-plaat);
  border-start-end-radius: var(--radius-plaat);
  padding-block: var(--ruimte-9) var(--ruimte-7);
  margin-block-start: var(--ruimte-8);
}

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

@media (hover: hover) and (pointer: fine) {
  .voet a:hover {
    color: var(--oker);
  }
}

.voet :focus-visible {
  outline-color: var(--oker);
}

.voet__kolommen {
  display: grid;
  gap: var(--ruimte-7);
  grid-template-columns: 1fr;
}

@media (min-width: 40rem) {
  .voet__kolommen {
    grid-template-columns: repeat(3, 1fr);
  }
}

.voet h2 {
  font-size: var(--tekst-s);
  font-weight: var(--gewicht-vet);
  margin-block-end: var(--ruimte-3);
  color: var(--oker);
}

.voet ul {
  list-style: none;
}

.voet li + li {
  margin-block-start: var(--ruimte-2);
}

.voet .telefoon {
  border-color: var(--bot-lijn);
  color: var(--bot);
}

@media (hover: hover) and (pointer: fine) {
  .voet .telefoon:hover {
    border-color: var(--oker);
    background: transparent;
    color: var(--oker);
  }
}

.voet__fijn {
  font-size: var(--tekst-xs);
  line-height: var(--regelhoogte-klein);
  color: var(--bot-gedempt);
  margin-block-start: var(--ruimte-2);
}

.voet__slot {
  margin-block-start: var(--ruimte-8);
  padding-block-start: var(--ruimte-5);
  border-block-start: 1px solid var(--bot-lijn);
  font-size: var(--tekst-xs);
  color: var(--bot-gedempt);
}

/* ---- Keuzelijst en datumveld ---------------------------------------------
 * De standaardpijl van een select ziet er in elke browser anders uit en heeft
 * niets met dit merk te maken. Met appearance: none verdwijnt hij, en dan moet
 * er zelf een komen: Safari en Firefox tonen ook met een achtergrondafbeelding
 * geen pijl terug. Vandaar een omhulling met een pijl van twee randen, zodat
 * er geen kleurwaarde buiten tokens.css nodig is en er niets in te laden valt.
 */

.veld__keuzelijst {
  position: relative;
}

.veld__keuzelijst select {
  appearance: none;
  /* Ruimte voor de pijl, zodat een lange optie er niet onder loopt. */
  padding-inline-end: var(--ruimte-8);
  cursor: pointer;
}

.veld__keuzelijst::after {
  content: "";
  position: absolute;
  inset-inline-end: var(--ruimte-5);
  top: 50%;
  width: 0.6rem;
  height: 0.6rem;
  margin-block-start: -0.45rem;
  border-inline-end: 2px solid var(--ink);
  border-block-end: 2px solid var(--ink);
  transform: rotate(45deg);
  transition: transform var(--duur-snel) var(--ease-uit);
  /* De pijl mag geen klikken opvangen: dan opent de lijst niet. */
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .veld__keuzelijst:hover::after {
    transform: rotate(45deg) translate(2px, 2px);
  }
}

/* Het datumveld. De native kalenderknop blijft staan, want die opent de
 * datumkiezer van het toestel en dat is precies wat iemand verwacht. Hij wordt
 * alleen groter en krijgt een aanwijzer, want standaard is hij te klein om
 * comfortabel te raken. */
/* Vaste hoogte, niet alleen een minimum: het datumveld is intrinsiek twee
 * pixels hoger dan een tekstveld en zou anders uit het rijtje springen. */
.veld input:not([type="checkbox"]),
.veld select {
  height: var(--veldhoogte);
}

.veld input[type="date"] {
  /* Zonder dit is een datumveld in Safari op iOS lager dan de andere velden. */
  appearance: none;
}

/* Geen padding op de kalenderknop: die telt op bij de veldhoogte, waardoor
 * het datumveld 60px werd terwijl elk ander veld 58px is. In een rijtje zie je
 * die twee pixels. Het raakvlak blijft groot genoeg via de eigen maat. */
.veld input[type="date"]::-webkit-calendar-picker-indicator {
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
  cursor: pointer;
  border-radius: var(--radius-klein);
  opacity: 0.75;
  transition: opacity var(--duur-snel) var(--ease-uit),
    background-color var(--duur-snel) var(--ease-uit);
}

.veld input[type="date"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
  background-color: var(--oker-zacht);
}

/* Firefox toont in een select met appearance: none nog een eigen pijl in het
 * vervolgkeuzemenu; deze regel haalt de restanten weg. */
.veld__keuzelijst select::-ms-expand {
  display: none;
}

/* ---- Eigen kalender bij het datumveld -------------------------------------
 * De kalender van het besturingssysteem is niet vorm te geven: er bestaat geen
 * pseudo-element voor dat paneel, en in Chrome beslaat
 * ::-webkit-calendar-picker-indicator het hele veld. Zie public/js/datum.js.
 *
 * Alles hieronder hangt aan .js, want zonder JavaScript staat er een gewoon
 * datumveld en hoort het er niet.
 */

.datumveld {
  position: relative;
  display: flex;
  align-items: center;
}

.js .datumveld input[type="text"] {
  /* Ruimte voor de knop, zodat een getypte datum er niet onder loopt. */
  padding-inline-end: var(--ruimte-9);
}

.datumveld__knop {
  position: absolute;
  inset-inline-end: var(--ruimte-2);
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: var(--rond);
  background: var(--oker-zacht);
  color: var(--ink);
  cursor: pointer;
  transition: background-color var(--duur-snel) var(--ease-uit);
}

.datumveld__knop svg {
  width: 1.25rem;
  height: 1.25rem;
}

@media (hover: hover) and (pointer: fine) {
  .datumveld__knop:hover {
    background: var(--oker);
  }
}

.datumveld__knop[aria-expanded="true"] {
  background: var(--oker);
}

.kalender {
  position: absolute;
  z-index: 20;
  inset-block-start: calc(100% + var(--ruimte-2));
  inset-inline-start: 0;
  width: min(21rem, calc(100vw - var(--marge-buiten) * 2));
  padding: var(--ruimte-4);
  background: var(--wit);
  border: 2px solid var(--ink);
  border-radius: var(--radius-groot);
}

.kalender[hidden] {
  display: none;
}

.kalender__kop {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--ruimte-1);
  margin-block-end: var(--ruimte-3);
}

.kalender__titel {
  text-align: center;
  font-weight: var(--gewicht-half);
  font-size: var(--tekst-s);
}

.kalender__stap {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  border-radius: var(--rond);
  background: none;
  color: var(--ink);
  cursor: pointer;
  transition: background-color var(--duur-snel) var(--ease-uit);
}

@media (hover: hover) and (pointer: fine) {
  .kalender__stap:hover {
    background: var(--oker-zacht);
  }
}

.kalender__weekdagen,
.kalender__raster {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.kalender__weekdagen span {
  padding-block: var(--ruimte-1);
  text-align: center;
  font-size: var(--tekst-xs);
  font-weight: var(--gewicht-half);
  color: var(--klei);
}

.kalender__dag {
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: var(--rond);
  background: none;
  color: var(--ink);
  font-size: var(--tekst-s);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background-color var(--duur-snel) var(--ease-uit),
    color var(--duur-snel) var(--ease-uit);
}

/* Een rij is er alleen voor de toegankelijkheidsboom: role="grid" eist
 * role="row" om de cellen heen. display: contents laat de cellen gewoon in het
 * raster van zeven vallen. */
.kalender__week {
  display: contents;
}

/* Geen opacity. Met 0,55 kwam de contrastverhouding op 2,3 en dat is te weinig
 * om een datum te kunnen lezen; gemeten met axe. Klei op wit is 6,5. */
.kalender__dag--buiten {
  color: var(--klei);
}

/* Vandaag krijgt een ring en geen vulling: die is voor de gekozen dag. */
.kalender__dag--vandaag {
  box-shadow: inset 0 0 0 2px var(--oker);
}

.kalender__dag--gekozen {
  background: var(--ink);
  color: var(--wit);
  font-weight: var(--gewicht-half);
}

.kalender__dag:disabled {
  color: var(--zand);
  cursor: default;
}

@media (hover: hover) and (pointer: fine) {
  .kalender__dag:not(:disabled, .kalender__dag--gekozen):hover {
    background: var(--oker-zacht);
  }
}

.kalender__voet {
  display: flex;
  justify-content: space-between;
  gap: var(--ruimte-3);
  margin-block-start: var(--ruimte-3);
  padding-block-start: var(--ruimte-3);
  border-block-start: var(--lijn);
}

.kalender__actie {
  min-height: 2.75rem;
  padding-inline: var(--ruimte-3);
  border: 0;
  border-radius: var(--pil);
  background: none;
  color: var(--oker-donker);
  font-size: var(--tekst-s);
  font-weight: var(--gewicht-half);
  cursor: pointer;
  transition: background-color var(--duur-snel) var(--ease-uit);
}

@media (hover: hover) and (pointer: fine) {
  .kalender__actie:hover {
    background: var(--oker-zacht);
  }
}

/* ---- De uitgeklapte keuzelijst -------------------------------------------
 * Een native select laat zijn opengeklapte lijst niet vormgeven: die tekent
 * het besturingssysteem. Sinds appearance: base-select kan dat wel, en dan is
 * ook de lijst zelf onderdeel van het ontwerp in plaats van een grijs blok van
 * Windows.
 *
 * Alles staat in @supports. Een browser die het niet kent, houdt gewoon zijn
 * eigen lijst: die werkt en is toegankelijk, hij ziet er alleen anders uit.
 * Er zit geen JavaScript aan en dus ook geen eigen toetsenbordafhandeling die
 * stuk kan gaan.
 */

@supports (appearance: base-select) {
  /* BEIDE, en dat is de hele crux.
   *
   * Zonder appearance: base-select op ::picker(select) blijft de uitgeklapte
   * lijst die van het besturingssysteem: wit blok, rechte hoeken, blauwe balk.
   * De regels hieronder worden dan wel gelezen (getComputedStyle geeft ze
   * keurig terug) maar tekenen niets, want de picker rendert nog native. Dat
   * is precies wat Jordy drie keer meldde, en waarom een gemeten
   * computed style hier geen bewijs was. Zie
   * https://developer.mozilla.org/en-US/docs/Web/CSS/::picker */
  .veld__keuzelijst select,
  .veld__keuzelijst select::picker(select) {
    appearance: base-select;
  }

  .veld__keuzelijst select {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ruimte-3);
    text-align: start;
    /* Terug naar de gewone padding. De 4rem hierboven was gereserveerd voor
     * een pijl die met position absolute over het veld heen lag. Met
     * base-select is de pijl een echt flex-kind dat zijn eigen plek inneemt,
     * en dan duwt die reservering hem het veld uit: in het smalle dagveld van
     * 5.5rem bleef er 8 pixels inhoud over voor tekst plus een rondje van 28,
     * en stak het rondje buiten de rand. */
    padding-inline-end: var(--ruimte-3);
  }

  /* De eigen pijl van de omhulling is nu overbodig: base-select levert een
   * ::picker-icon die met de lijst meedraait. */
  .veld__keuzelijst::after {
    content: none;
  }

  /* De pijl wordt hier zelf getekend en niet door de browser.
   *
   * De eigen driehoek van ::picker-icon staat niet in het midden van zijn
   * vakje. Zet je daar een rondje omheen en draai je het geheel, dan draait de
   * driehoek om een punt dat buiten hemzelf ligt en zwiept hij door de cirkel.
   * Vandaar: het eigen teken onzichtbaar (color: transparent) en een chevron
   * als achtergrond precies in het midden. Nu draait hij om zijn eigen as. */
  .veld__keuzelijst select::picker-icon {
    flex: none;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--rond);
    color: transparent;
    background-color: var(--oker-zacht);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23241f1b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5 8 10.5 12 6.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 0.875rem 0.875rem;
    transform-origin: center center;
    transition: transform var(--duur-normaal) var(--ease-uit),
      background-color var(--duur-normaal) var(--ease-uit);
  }

  .veld__keuzelijst select:open::picker-icon {
    transform: rotate(180deg);
    background-color: var(--oker);
  }

  .veld__keuzelijst select::picker(select) {
    /* De lijst hoort bij de familie: dezelfde radius, dezelfde rand, dezelfde
     * kleuren als de velden eromheen. */
    border: 2px solid var(--ink);
    /* Even breed als het veld eronder, niet breder en niet smaller. */
    box-sizing: border-box;
    min-width: anchor-size(width);
    border-radius: var(--radius-groot);
    background: var(--wit);
    padding: var(--ruimte-2);
    margin-block-start: var(--ruimte-2);
    /* Geen eigen max-height en geen schuifbalk.
     *
     * Aan de schuifbalk van een ::picker(select) is alleen de breedte en de
     * kleur te veranderen, via scrollbar-width en scrollbar-color. Zijn positie
     * niet: hij loopt altijd van rand tot rand, en daar snijdt de radius van 24
     * pixels dwars doorheen. ::-webkit-scrollbar werkt hier niet; gemeten met
     * een felrode baan die nergens verscheen.
     *
     * Dus: geen balk, en de lijst krijgt de hoogte die hij nodig heeft. Bij
     * deze tien onderwerpen past hij op elk normaal venster in een keer.
     * Schuift hij toch, dan kan dat met het wiel, met de pijltjes en met een
     * veeg; alleen de balk zelf is er niet. */
    overflow-y: auto;
    scrollbar-width: none;
    opacity: 0;
    transition: opacity var(--duur-snel) var(--ease-uit), overlay var(--duur-snel) allow-discrete,
      display var(--duur-snel) allow-discrete;
  }

  .veld__keuzelijst select:open::picker(select) {
    opacity: 1;
  }

  @starting-style {
    .veld__keuzelijst select:open::picker(select) {
      opacity: 0;
    }
  }

  .veld__keuzelijst option {
    display: flex;
    align-items: center;
    gap: var(--ruimte-3);
    padding: var(--ruimte-3) var(--ruimte-4);
    border-radius: var(--radius-midden);
    font-size: var(--tekst-m);
    color: var(--ink);
    /* 44px raakvlak, ook in een lijst. */
    min-height: 2.75rem;
    transition: background-color var(--duur-snel) var(--ease-uit);
  }

  .veld__keuzelijst option:hover,
  .veld__keuzelijst option:focus {
    background: var(--oker-zacht);
  }

  .veld__keuzelijst option:checked {
    background: var(--ink);
    color: var(--wit);
  }

  /* Het vinkje dat de browser voor de gekozen optie zet, staat standaard als
   * een los teken links. Hier een rond stipje in de merkkleur, in lijn met de
   * stippen in de dienstenlijst. */
  .veld__keuzelijst option::checkmark {
    content: "";
    flex: none;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: var(--rond);
    background: var(--oker);
  }

  .veld__keuzelijst option:not(:checked)::checkmark {
    background: transparent;
  }
}

/* ---- Specialismen in de kopband -----------------------------------------
 * Twee regels, elk met een jaartal dat het echte werk doet, en een link naar
 * de plek waar die dienst beschreven staat.
 */
.band__naast-kop {
  font-size: var(--tekst-xs);
  line-height: var(--regelhoogte-klein);
  color: var(--klei);
}

.specialismen {
  list-style: none;
  padding: 0;
  margin-block-start: var(--ruimte-4);
}

.specialismen > li + li {
  margin-block-start: var(--ruimte-4);
  padding-block-start: var(--ruimte-4);
  border-block-start: var(--lijn);
}

.specialismen__jaar {
  display: block;
  font-family: var(--letter-display);
  font-weight: var(--gewicht-zwaar);
  font-size: var(--tekst-h3);
  line-height: var(--regelhoogte-krap);
}

/* ---- Venster ------------------------------------------------------------
 * Een native dialog, en dat is geen stijlkeuze. showModal() geeft de focusval,
 * Escape en het teruggeven van de focus aan het element waar je vandaan kwam
 * gratis mee, en dat is precies het deel dat bij een zelfgebouwd venster
 * altijd ontbreekt.
 *
 * De duur komt uit de tokens, en die staan onder prefers-reduced-motion al op
 * 1ms. Daarom staat hier geen aparte media query: dat zou dezelfde regel twee
 * keer op twee plaatsen zetten.
 */
.venster {
  /* Nooit breder of hoger dan het scherm, met de marge erbij. Een venster
   * waarvan de knop onder de onderrand valt, is op een telefoon niet te
   * sluiten. */
  max-inline-size: min(32rem, calc(100vw - var(--ruimte-6)));
  max-block-size: calc(100dvh - var(--ruimte-6));
  padding: 0;
  border: 0;
  border-radius: var(--radius-plaat);
  background: var(--bot);
  color: var(--ink);
  overflow: auto;
  opacity: 0;
  transform: translateY(0.75rem);
  transition:
    opacity var(--duur-normaal) var(--ease-uit),
    transform var(--duur-normaal) var(--ease-uit),
    overlay var(--duur-normaal) var(--ease-uit) allow-discrete,
    display var(--duur-normaal) var(--ease-uit) allow-discrete;
}

.venster[open] {
  opacity: 1;
  transform: none;
}

@starting-style {
  .venster[open] {
    opacity: 0;
    transform: translateY(0.75rem);
  }
}

.venster::backdrop {
  background: var(--waas);
  opacity: 0;
  transition:
    opacity var(--duur-normaal) var(--ease-uit),
    overlay var(--duur-normaal) var(--ease-uit) allow-discrete,
    display var(--duur-normaal) var(--ease-uit) allow-discrete;
}

.venster[open]::backdrop {
  opacity: 1;
}

@starting-style {
  .venster[open]::backdrop {
    opacity: 0;
  }
}

.venster__binnen {
  padding: var(--ruimte-7) var(--ruimte-6);
}

.venster__binnen > * + * {
  margin-block-start: var(--ruimte-4);
}

.venster__kop {
  font-size: var(--tekst-h3);
  line-height: var(--regelhoogte-h3);
}

.venster__slot {
  margin-block-start: var(--ruimte-6);
}