/**
 * ZONE breadcrumb — kruimelpad.
 * Template: templates/layout/regions/_breadcrumb.html.twig
 *           templates/navigation/breadcrumb.html.twig
 */
.kruimelpad__lijst {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-klein);
}

.kruimelpad__item + .kruimelpad__item::before {
  content: "›";
  margin-inline-end: var(--s-2);
  color: var(--c-antraciet);
}

/* Klikvlak 24px met muis, 48px op touchscreens (--klik), maar de regel wordt
   daar niet hoger van: de negatieve marge laat het klikvlak onzichtbaar boven
   en onder de tekst uitsteken. Anders staat er op de telefoon lege ruimte
   boven en onder het kruimelpad. */
.kruimelpad a {
  display: inline-flex;
  align-items: center;
  min-height: var(--klik);
  margin-block: calc((1lh - var(--klik)) / 2);
  color: var(--c-inkt);
}