/* breadcrumb: der Weg von der Startseite zur aufgerufenen Seite. Steht als
   Erstes unter der Kopfleiste.

   Die Leiste scrollt zur Seite, statt umzubrechen. Bei 300px passt ein Weg
   wie „Start › Lebensmittel › Vollkornhaferkleieflockenmischung › Bearbeiten"
   in keine Zeile; über mehrere Zeilen verliert er seine Form, und die Stufen
   wären nicht mehr als Folge zu lesen. Deshalb bleibt jede Stufe in einer
   Zeile und man schiebt sie seitwärts.

   Das ist kein Widerspruch zur Regel „keine zwei Spalten": Hier steht kein
   Ding neben einem anderen, sondern eine Folge gleichartiger Stufen, die
   zusammen eine Zeile bilden. */
.breadcrumb {
  overflow-x: auto;
  /* Der eigene Weg schiebt die Seite nicht mit. */
  overscroll-behavior-x: contain;
  margin-bottom: var(--space-4);
}

.breadcrumb__list {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  /* Ohne das würde die letzte Stufe am Rand kleben, sobald geschoben wird. */
  padding-right: var(--space-2);
}

.breadcrumb__item {
  display: flex;
  align-items: center;
  /* Stufen brechen nicht um — sie werden geschoben. */
  white-space: nowrap;
}

/* Die Trefferfläche ist so hoch wie überall sonst, damit man sie am Handy
   trifft. Der Text steht darin mittig. */
.breadcrumb__link,
.breadcrumb__current {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding-inline: var(--space-2);
  font-size: var(--text-sm);
  line-height: var(--leading-tight);
}

.breadcrumb__link {
  color: var(--color-text-muted);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

@media (hover: hover) {
  .breadcrumb__link:hover { color: var(--color-text); }
}

/* Rückmeldung unter dem Finger: die Fläche ändert sich, nicht nur die
   Schriftfarbe. */
.breadcrumb__link:active {
  border-radius: var(--radius-sm);
  background: var(--color-surface-muted);
  color: var(--color-text);
}

.breadcrumb__link:focus-visible {
  outline: var(--focus-ring) solid var(--color-focus);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-sm);
}

/* Die Seite, auf der man steht: kein Link, kräftiger gesetzt — die Aussage
   hängt nicht allein an der Farbe. */
.breadcrumb__current {
  color: var(--color-text);
  font-weight: var(--weight-medium);
}

.breadcrumb__separator {
  color: var(--color-text-muted);
  /* Das Zeichen sitzt zwischen zwei Flächen mit eigenem Innenabstand und
     braucht selbst keinen. */
  font-size: var(--text-sm);
}