/* ============================================================
   Breadcrumb
   HTML: <nav class="breadcrumb" aria-label> > ol > li
         Jedes Segment: [svg#chevron-right] + (a|span[aria-current]) > svg(icon) + span(label)
         Icons: home (Start) · building (Immobilien) · typ-spezifisch (Detail, data1)
   View\Breadcrumb — Trail geteilt mit JSON-LD (StructuredData).
   Erstes Segment fluchtet mit dem Content: <main> liefert bereits
   max-width + padding-inline (04-layout.css), daher hier KEIN eigenes
   Inset — sonst doppelte Einrückung. Ausnahme: full-bleed-Main.
   ============================================================ */

nav.breadcrumb {
  margin-block-end: var(--space-3);
}

/* Mobile: Breadcrumb ausblenden (zu wenig Platz, Pfad wird zu eng) */
@media (max-width: 44.999rem) {
  nav.breadcrumb {
    display: none;
  }
}

/* full-bleed-Main (CMS-Pages mit page_sections) hat selbst kein Inset →
   Breadcrumb begrenzt sich dort selbst auf Content-Breite. */
main.full-bleed > nav.breadcrumb {
  width: 100%;
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: var(--padding-page);
}

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

nav.breadcrumb li {
  display: flex;
  align-items: center;
  /* Abstand nach dem Chevron bewusst enger als die Spacing-Skala (--space-1 = 4px) */
  gap: 0.125rem;
  min-width: 0;
}

/* Icons (Home + Trenner-Chevron) skalieren mit der Schriftgröße */
nav.breadcrumb svg {
  width: 1.1em;
  height: 1.1em;
  flex: none;
}

/* Trenner-Chevron: direktes li-Kind (vor dem Link/Span), dezent */
nav.breadcrumb li > svg {
  color: var(--color-border-dark);
}

/* Link + aktuelles Segment: Icon und Label nebeneinander */
nav.breadcrumb a,
nav.breadcrumb [aria-current="page"] {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
}

nav.breadcrumb a {
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition);
}

nav.breadcrumb a:hover {
  color: var(--color-text);
  text-decoration: underline;
}

/* Aktuelle Seite: kein Link, hervorgehoben */
nav.breadcrumb [aria-current="page"] {
  color: var(--color-text);
  font-weight: 600;
}

/* Lange Titel (v.a. Objekttitel im Detail-Segment) abschneiden */
nav.breadcrumb [aria-current="page"] > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 60vw;
}