/* ============================================================
   BRAND MUT — Chrome-CSS (Header + Breadcrumb)
   ============================================================
   Vollstaendig und eigenstaendig. Wird von index.html NACH
   src/theme.css geladen, gehoert der Marke also komplett und
   ueberschreibt den System-Default.

   Die Geometrie des Headers (Position, Hoehe, Safety-Area)
   bleibt System-Mechanik in theme.css; hier wohnt alles
   Sichtbare.
   ============================================================ */

/* ---------- Breadcrumb ---------- */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
}
.crumb {
  font-family: var(--font-main);   /* Söhne */
  font-weight: 400;
  font-size: var(--bc-fs);         /* Breadcrumb-Groesse = Skalenstufe (--bc-fs) */
  line-height: 1;                  /* Kapitelzeile tight; Abschnitte nutzen --bc-section-line */
  cursor: pointer;
}
/* Farben aus den Rollen-Variablen (Theme-Aufloesung im System). */
.crumb { color: var(--c-inactive); }
.crumb.is-active { color: var(--c-active); }
.crumb:hover { color: var(--c-active); }   /* klickbare Krume beim Ueberfahren */
.crumb-sep { color: var(--c-inactive); }
.crumb-sep.is-active { color: var(--c-active); }   /* Trenner vor dem aktiven Kapitel */
.crumb-sep::before {
  content: " → ";
  white-space: pre;
}

/* ---------- Abschnittsspalte (Breadcrumb-Opt-in) ---------- */
/* Haengt absolut unter der aktiven Kapitel-Krume; ihre Hoehe ist im Header
   bereits reserviert (--bc-sections * --bc-section-line). Farben erbt die
   Abschnitts-Krume ueber die .crumb-Basis (inaktiv/aktiv). Startwerte,
   visuell feinjustierbar. */
.crumb-chapter { position: relative; }
.crumb-sections {
  position: absolute;
  /* Erster Abschnitt genau eine Listen-Zeile (--bc-section-line) unter der
     Kapitel-Grundlinie. Die tighte Kapitelzeile (line-height 1) wird ueber
     (line - fs)/2 ausgeglichen, sodass der Grundlinien-Abstand exakt eine Zeile
     ist; weitere Abschnitte folgen ueber line-height im selben Rhythmus. */
  top: calc(100% + (var(--bc-section-line) - var(--bc-fs)) / 2);
  left: 0;
  display: flex;
  flex-direction: column;
}
.crumb-section {
  line-height: var(--bc-section-line);   /* = reservierte Hoehe je Abschnitt */
  white-space: nowrap;
}

/* ---------- Header ---------- */
.header {
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0;
}
.header .breadcrumb {
  padding: var(--chrome-pad-y) 0 0 var(--chrome-pad-x);   /* Chrome-Polster (erbt ohne eigenen Wert vom Folienrand) */
}
/* Trennlinie als eigenes Element. Grundposition 4rem von der Oberkante (eine
   Zeile unter der Kapitel-Grundlinie). Sie wandert mit der Abschnittsliste mit:
   jeder Abschnitt verlaengert den Stapel um eine --bc-section-line, also traegt
   die Linie genau diesen Versatz nach und behaelt ihren Grundlinien-Abstand zur
   jeweils letzten Zeile. Theme-Farbe ueber currentColor. */
.header::after {
  content: "";
  position: absolute;
  top: calc(4rem + var(--bc-sections, 0) * var(--bc-section-line));
  left: 2rem;
  right: 2rem;
  height: var(--line-width);
  background: currentColor;        /* schwarz auf weiss, weiss auf schwarz */
}