/* ═══════════════════════════════════════════════════════════════════════════
   BLUE HORIZON DESIGN SYSTEM — components/breadcrumb.css
   Version: 0.1.0 · Build: 2026-09-13 · Benötigt: tokens.css, base.css
   VENDORED — READ-ONLY.

   UNGEPRÜFT (Stand 2026-09-21) — DESIGN.md §0e. Keine Seite trägt diese
   Komponente: null Vorkommen in ticketsystem und Team Hub. Sie steht im
   Design-Guide, und der zählt nicht — er stellt jede Komponente allein in
   eine Bühne, die er selbst baut. Wer sie als erster aufnimmt, rechnet mit
   Fehlern und meldet sie zurück; danach fällt dieser Vermerk.

   Im Bestand nur in Bruchstücken vorhanden (.topbar-breadcrumb). Neu gebaut.
   ═══════════════════════════════════════════════════════════════════════════ */

.bh-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--bh-space-1);
  margin: 0; padding: 0;
  list-style: none;
  font-size: var(--bh-text-xs);
  color: var(--bh-text-muted);
  min-width: 0;
}

.bh-breadcrumb__item { display: inline-flex; align-items: center; gap: var(--bh-space-1); min-width: 0; }

.bh-breadcrumb__item + .bh-breadcrumb__item::before {
  content: "/";
  color: var(--bh-text-muted);
  margin-right: var(--bh-space-1);
  flex: none;
}

.bh-breadcrumb__link {
  color: var(--bh-text-tertiary);
  border-radius: var(--bh-radius-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color var(--bh-transition);
}
.bh-breadcrumb__link:hover  { color: var(--bh-color-accent); }
.bh-breadcrumb__link:active { color: var(--bh-color-accent-bright); }
.bh-breadcrumb__link:focus-visible {
  outline: var(--bh-focus-width) solid var(--bh-focus-color);
  outline-offset: var(--bh-focus-offset);
}

.bh-breadcrumb__link > svg { width: 14px; height: 14px; }

/* Letztes Glied ist die aktuelle Seite: kein Link, etwas kräftiger. */
.bh-breadcrumb__current {
  color: var(--bh-text-secondary);
  font-weight: var(--bh-weight-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Auf Mobil bleiben erstes und letztes Glied stehen, der Rest wird zu "…". */
@media (max-width: 639px) {
  .bh-breadcrumb__item:not(:first-child):not(:last-child) { display: none; }
  .bh-breadcrumb__item:first-child + .bh-breadcrumb__item::before { content: "… /"; display: inline; }
  .bh-breadcrumb__item:last-child::before { content: "/"; }
}