/* Seite „Betrieb“ (Schritt 8a): Ampelübersicht, Kennzahlen, Verlauf. Nur Tokens aus tokens.css (keine Farb-, Schrift-, Abstands- oder
   Rundungswerte hier; TokenTests prüft das). Zustände nie nur über Farbe: jede Ampel trägt Symbol und Text. Am Handy einspaltig. */

.bt-gesamt {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--rd-abstand-3); padding: var(--rd-abstand-3) var(--rd-abstand-4);
  border: 1px solid var(--rd-rahmen); border-left-width: 6px; border-radius: var(--rd-rundung); margin-bottom: var(--rd-abstand-4);
}
.bt-gesamt-titel { font-size: var(--rd-schrift-ueberschrift); font-weight: var(--rd-gewicht-fett); }
.bt-gesamt-stand { font-size: var(--rd-schrift-klein); }

.bt-gesund { background: var(--rd-ampel-gruen-hell); color: var(--rd-ampel-gruen-text); border-left-color: var(--rd-ampel-gruen); }
.bt-warnung { background: var(--rd-ampel-gelb-hell); color: var(--rd-ampel-gelb-text); border-left-color: var(--rd-ampel-gelb); }
.bt-fehler { background: var(--rd-ampel-rot-hell); color: var(--rd-ampel-rot-text); border-left-color: var(--rd-ampel-rot); }

.bt-ampel {
  display: inline-flex; align-items: center; gap: var(--rd-abstand-1); padding: var(--rd-abstand-0-5) var(--rd-abstand-2);
  border-radius: var(--rd-rundung-voll); font-size: var(--rd-schrift-klein); font-weight: var(--rd-gewicht-halbfett); white-space: nowrap;
  border: 1px solid transparent;
}
.bt-ampel.bt-gesund { border-color: var(--rd-ampel-gruen); }
.bt-ampel.bt-warnung { border-color: var(--rd-ampel-gelb); }
.bt-ampel.bt-fehler { border-color: var(--rd-ampel-rot); }

.bt-liste { list-style: none; margin: 0; padding: 0; }
.bt-pruefung {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--rd-abstand-1) var(--rd-abstand-3);
  padding: var(--rd-abstand-3) var(--rd-abstand-4); border-top: 1px solid var(--rd-rahmen-leicht); border-left: 4px solid transparent;
}
.bt-pruefung:first-child { border-top: 0; }
.bt-pruefung.bt-rand-warnung { border-left-color: var(--rd-ampel-gelb); }
.bt-pruefung.bt-rand-fehler { border-left-color: var(--rd-ampel-rot); }
.bt-pruefung-titel { font-weight: var(--rd-gewicht-halbfett); }
.bt-pruefung-text { grid-column: 1 / -1; }
.bt-messwert { grid-column: 1 / -1; font-size: var(--rd-schrift-klein); color: var(--rd-text-gedaempft); font-variant-numeric: tabular-nums; }
.bt-empfehlung {
  grid-column: 1 / -1; margin: var(--rd-abstand-1) 0 0; padding: var(--rd-abstand-2) var(--rd-abstand-3);
  background: var(--rd-flaeche-hell); border-radius: var(--rd-rundung-klein); color: var(--rd-text);
}
.bt-empfehlung strong { font-weight: var(--rd-gewicht-halbfett); }

.bt-kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--rd-abstand-3); }
.bt-kennzahl { border: 1px solid var(--rd-rahmen); border-radius: var(--rd-rundung); padding: var(--rd-abstand-3); background: var(--rd-flaeche); }
.bt-kennzahl-titel { font-size: var(--rd-schrift-klein); color: var(--rd-text-gedaempft); margin-bottom: var(--rd-abstand-1); }
.bt-kennzahl-wert { font-variant-numeric: tabular-nums; }

.bt-verlauf { list-style: none; margin: var(--rd-abstand-1) 0 0; padding: 0; }
.bt-verlauf li { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--rd-abstand-2); margin: var(--rd-abstand-1) 0; }
.bt-verlauf-zeit { font-size: var(--rd-schrift-klein); color: var(--rd-text-gedaempft); white-space: nowrap; font-variant-numeric: tabular-nums; }
.bt-verlauf-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rd-abstand-2); }

.bt-zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }