/* Baustein statusleiste: Statusleiste eines Vorgangs (Bedienkonzept E10,
   F30). Ausrollen bis zur Begehung, Bauplan 3A. Besitzer: A1a. Leer
   angelegt von A0a. Die Grundvorlage bindet die Datei nach dem globalen
   Stylesheet ein. Nur Regeln fuer eigene, neue Klassen; Farben als Token
   mit Rueckfall; eine Regel fuer die Telefonbreite (560px).

   Makro in templates/_bausteine/statusleiste.html, gezeichnet im
   Kopfband unter Titel und Unterzeile. Nur Anzeige: kein Element ist
   klickbar. Erledigtes ist nie gruen (E1), der Haken steht in Navy; kein
   Ocker in den Bausteinen (Korrektur B, K-a). */

/* --- Leiste: Schritte, daneben der Abzweig, darunter der Satz -------- */
.statusleiste { display: flex; flex-direction: column; gap: 6px;
  margin: 12px 0 0; padding: 10px 0 0;
  border-top: 1px solid var(--border, #e2e7ee); }
.statusleiste-zeile { display: flex; align-items: center; flex-wrap: wrap;
  gap: 8px 16px; }
.statusleiste-schritte { display: flex; align-items: center;
  flex-wrap: wrap; gap: 6px 0; margin: 0; padding: 0; list-style: none; }
.statusleiste-schritt { position: relative; display: inline-flex;
  align-items: center; gap: 6px; font-size: 0.92rem; line-height: 1.4; }
/* Das Trennzeichen zwischen zwei Schritten setzt das Stylesheet, damit
   der Text der Leiste nur die Woerter traegt. Es steht im Abstand VOR dem
   Schritt (absolut), nicht in seiner Flaeche: sonst laege es im
   hervorgehobenen aktuellen Schritt. */
.statusleiste-schritt + .statusleiste-schritt { margin-left: 26px; }
.statusleiste-schritt + .statusleiste-schritt::before { content: "\203A";
  position: absolute; left: -17px; top: 50%; transform: translateY(-50%);
  color: var(--muted, #5f7183); font-weight: 400; }
.statusleiste-erledigt { color: var(--navy-mid, #305186); }
.statusleiste-marke { font-weight: 700; color: var(--navy, #1F4570); }
.statusleiste-aktuell { color: var(--navy, #1F4570); font-weight: 700; }
.statusleiste-schritt.statusleiste-aktuell { padding: 3px 12px;
  border-radius: 999px; background: #e8edf4;
  box-shadow: inset 0 0 0 1px var(--navy-mid, #305186); }
.statusleiste-kommend { color: var(--muted, #5f7183); }
/* "n von m" nur am Telefon (unten). */
.statusleiste-nummer { display: none; margin-right: 8px; font-weight: 400;
  color: var(--muted, #5f7183); }

/* Der Abzweig daneben: gestrichelt als offener Weg, durchgezogen, wenn
   der Vorgang darin steht. */
.statusleiste-abzweig { display: inline-flex; align-items: center;
  padding: 3px 12px; border-radius: 999px; font-size: 0.92rem;
  line-height: 1.4; border: 1px dashed var(--muted, #5f7183); }
.statusleiste-abzweig.statusleiste-aktuell { border-style: solid;
  border-color: var(--navy-mid, #305186); background: #e8edf4; }

/* Wer dran ist. */
.statusleiste-satz { margin: 0; font-size: 0.92rem;
  color: var(--text, #1c2733); }

/* Nur fuer Vorleseprogramme ("erledigt" hinter dem Wort). */
.statusleiste-vorlesen { position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0; }

/* --- Telefon: nur der aktuelle Schritt mit "n von m" (R-A17) --------- */
@media (max-width: 560px) {
  .statusleiste-zeile { flex-direction: column; align-items: flex-start; }
  .statusleiste-erledigt, .statusleiste-kommend { display: none; }
  .statusleiste-im-abzweig { display: none; }
  .statusleiste-schritt + .statusleiste-schritt { margin-left: 0; }
  .statusleiste-schritt + .statusleiste-schritt::before { content: none; }
  .statusleiste-nummer { display: inline; }
}