/* ============================================
   ECX 30 - Breadcrumbs
   Die bestehende Brotkrumenleiste aus der
   functions.php, an das neue Design angeglichen.
   Markup und Funktion bleiben unveraendert.
   ============================================ */

/*
 * Das Markup baut generate_custom_breadcrumbs_with_priority() in der
 * functions.php und haengt es an generate_after_header - also direkt
 * unter die ECX-Nav:
 *
 *   <nav class="breadcrumb-container grid-container">
 *     <ol class="breadcrumb mb-0">
 *       <li class="breadcrumb-item"><a>...</a></li>
 *       <i class="fas fa-angle-double-right mx-2"></i>
 *       <li class="breadcrumb-item active">...</li>
 *
 * Der Trenner ist ein eigenes Element und laesst sich deshalb hier
 * einfaerben - die functions.php musste nicht angefasst werden.
 *
 * Im Altbestand liegt die Leiste auf blauem Grund (--primary-color) mit
 * weisser Schrift. Unter dem hellen ECX-Header wirkt der blaue Balken
 * wie ein Fremdkoerper. Hier wird er hell und ruhig gesetzt.
 *
 * Alle Regeln unter body.ecx-kopf: wo kein ECX-Header steht, bleibt die
 * Leiste wie bisher.
 * Gebunden an .ecx-kopf, nicht an .ecx: Brotkrumen erscheinen ueberall
 * ausser auf der Startseite - also gerade dort, wo der Inhalt noch aus
 * dem Altbestand kommt und .ecx deshalb NICHT gesetzt ist.
 */

body.ecx-kopf .breadcrumb-container {
  background: transparent;
  color: var(--ink-3);
  margin: 0 auto;
}

/*
 * BREITE: nach dem, was DARUNTER steht - nicht nach einer festen Zahl.
 *
 * Dafuer sind die beiden Body-Klassen da:
 *
 *   nur .ecx-kopf   Der Inhalt kommt aus dem Altbestand und haengt an
 *                   .site.grid-container: 1210px breit, darunter 15px
 *                   Polster, ab 992px keins mehr (style.css).
 *   auch .ecx       Der Inhalt kommt von ECX und haengt an .ecx-wrap:
 *                   1320px breit, 32px Polster, unter 720px 18px.
 *
 * Gemessen ohne diese Angleichung: Inhaltskante bei 329px, Brotkrumen
 * bei 306px - ein Versatz von 23px, der auffiel.
 */

/* Altbestand: dieselben Werte wie .site.grid-container. */
body.ecx-kopf .breadcrumb-container {
  max-width: 1210px;
  padding: 14px 15px;
}
@media (min-width: 992px) {
  body.ecx-kopf .breadcrumb-container { padding: 14px 0; }
}

/* ECX-Inhalt: dieselben Werte wie .ecx-wrap. */
body.ecx-kopf.ecx .breadcrumb-container {
  max-width: 1320px;
  padding: 14px 32px;
}

/* Die Liste bringt aus dem Altbestand einen eigenen Grund mit. */
body.ecx-kopf .breadcrumb {
  background: transparent;
  align-items: center;
}

body.ecx-kopf .breadcrumb-item {
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--ink-3);
}

body.ecx-kopf .breadcrumb-item a {
  color: var(--ink-3);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}

/*
 * Der Altbestand unterstreicht beim Zeigen. Im ECX-System wechseln
 * Links stattdessen auf Rot, wie in den Sektionen.
 */
body.ecx-kopf .breadcrumb-item a:hover {
  color: var(--ec-red);
  text-decoration: none;
}

/* Die aktuelle Seite steht dunkler und etwas fester. */
body.ecx-kopf .breadcrumb > .active,
body.ecx-kopf .breadcrumb-item.active {
  color: var(--ink);
  font-weight: 600;
}

/* Trenner: zurueckgenommen, damit er die Namen nicht ueberlagert. */
body.ecx-kopf .breadcrumb .fas {
  color: var(--ink-4);
  font-size: 11px;
  line-height: 1;
}

@media (max-width: 720px) {
  /* Gleiches Polster wie .ecx-wrap auf schmalen Schirmen. */
  body.ecx-kopf.ecx .breadcrumb-container { padding: 12px 18px; }
}

/*
 * MOBIL AUSGEBLENDET, seit 06.10.2026 (Isa, d8 - dort fuer die
 * Event-Detailseite angemerkt, umgesetzt fuer alle Seiten).
 *
 * Unter 640 nimmt die Leiste eine eigene Zeile direkt unter der
 * Kopfzeile ein und zeigt kaum mehr als "Home >> Seitentitel" - den
 * Titel, der darunter ohnehin gross steht. Derselbe Breakpoint wie bei
 * der Magazinkarte (Punkt 43). Ueber 640 unveraendert. Das Markup bleibt
 * im Dokument - nur die Anzeige entfaellt.
 */
@media (max-width: 640px) {
  body.ecx-kopf .breadcrumb-container { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  body.ecx-kopf .breadcrumb-item a { transition-duration: 0s; }
}