/* focal CI für tally – Stufe 1 (Stil-Schicht über Bootstrap 5). Vorlage vom Prüfer (Chat), 22.10.2026.
   Wird NACH bootstrap.min.css und VOR app.css geladen. Werte = focal Design-Richtlinie (gleich wie die Plattform, focal-gmbh design/ci).
   Ein Ort für Farben: Seiten und Teile verwenden Bootstrap-Klassen oder diese Tokens, nie feste Farbwerte. */

@font-face { font-family: "IBM Plex Sans"; src: url("../schrift/IBMPlexSans-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../schrift/IBMPlexSans-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../schrift/IBMPlexSans-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Condensed"; src: url("../schrift/IBMPlexSansCondensed-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../schrift/IBMPlexMono-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../schrift/IBMPlexMono-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --grund: #f4f3f0; --flaeche: #ffffff; --kopfzelle: #faf9f7; --linie: #d8d6d0; --feldrand: #8b939b;
  --text: #14202b; --matt: #56606a;
  --akzent: #14202b; --akzent-hell: #e6e9ec; --auf-akzent: #ffffff;   /* Hauptknopf; falls Adrian Messblau wählt: nur hier #2166ac */
  --verweis: #2166ac;
  --tally: #2f5d50; --tally-hell: #eaf1ee; --tally-auf-dunkel: #8fc2af; /* Linienfarbe: Kopf, Symbol, Offline-Band, Fortschritt */
  --signal: #e8590c;                                                   /* nur Logo-Punkt */
  --gruen: #2e7d32; --gruen-hell: #eef6ef; --orange: #b45309; --orange-hell: #fef5e7; --rot: #b42318; --rot-hell: #fde8e6; --neutral-hell: #eceae5; --schleier: rgb(20 32 43 / .35);
  --leiste: #14202b; --leiste-text: #e8ecef; --leiste-matt: #8b98a4; --leiste-aktiv: #24323e; --leiste-linie: #2c3945;
  --schrift-text: "IBM Plex Sans", system-ui, sans-serif;
  --schrift-titel: "IBM Plex Sans Condensed", "Arial Narrow", sans-serif;
  --schrift-zahl: "IBM Plex Mono", ui-monospace, monospace;

  /* Bootstrap auf die Tokens */
  --bs-body-font-family: var(--schrift-text);
  --bs-body-font-size: 0.9375rem;
  --bs-body-color: var(--text);
  --bs-body-bg: var(--grund);
  --bs-secondary-color: var(--matt);
  --bs-border-color: var(--linie);
  --bs-link-color: var(--verweis); --bs-link-color-rgb: 33, 102, 172; --bs-link-hover-color: var(--text);
  --bs-primary: var(--akzent); --bs-primary-rgb: 20, 32, 43;
  --bs-success: var(--gruen); --bs-success-rgb: 46, 125, 50;
  --bs-warning: var(--orange); --bs-warning-rgb: 180, 83, 9;
  --bs-danger: var(--rot); --bs-danger-rgb: 180, 35, 24;
  --bs-border-radius: 4px; --bs-border-radius-lg: 8px;
  --bs-focus-ring-color: rgba(33, 102, 172, .5);
}

h1, .h1 { font: 600 1.625rem/2rem var(--schrift-titel); }
h2.h6, .card h2 { font-family: var(--schrift-text); }
.text-muted { color: var(--matt) !important; }
.text-warning { color: var(--orange) !important; }   /* Bootstrap-Gelb ist auf Weiss nicht lesbar */

.btn { min-height: 44px; font-weight: 600; display: inline-flex; align-items: center; }
.btn-sm { min-height: 36px; }
.btn-primary { --bs-btn-bg: var(--akzent); --bs-btn-border-color: var(--akzent); --bs-btn-color: var(--auf-akzent);
  --bs-btn-hover-bg: #24323e; --bs-btn-hover-border-color: #24323e; --bs-btn-active-bg: #0b141b; --bs-btn-disabled-bg: var(--matt); }
.btn-outline-primary { --bs-btn-color: var(--text); --bs-btn-border-color: var(--feldrand); --bs-btn-hover-bg: var(--akzent-hell);
  --bs-btn-hover-color: var(--text); --bs-btn-hover-border-color: var(--text); --bs-btn-active-bg: var(--akzent-hell); --bs-btn-active-color: var(--text); }
.form-control, .form-select { border-color: var(--feldrand); min-height: 44px; }
/* Felder weiss: Bootstrap nimmt --bs-body-bg (hier der graue Grund), und grau heisst gesperrt */
.form-control, .form-select, .input-group-text, .form-check-input:not(:checked),
.form-control:focus, .form-select:focus { background-color: var(--flaeche); }
.form-control:disabled, .form-select:disabled, .form-control[readonly]:not(.form-control-plaintext) { background-color: var(--neutral-hell); }
.card { border-color: var(--linie); border-radius: 8px; }
.progress-bar { background-color: var(--tally); }
.alert-secondary.offline, .offline-band { background: var(--tally-hell); color: var(--tally); border-color: #d6e6e0; }

/* Zahlen: immer Mono, gleich breite Ziffern */
.zahl, td.betrag, .fs-4.fw-bold, .fs-5.fw-bold { font-family: var(--schrift-zahl); font-variant-numeric: tabular-nums; font-weight: 500 !important; }

/* Stufen-/Zustands-Pille mit Zeichen (wie Plattform): .pille .pille-warn / .pille-ok / .pille-alarm */
.pille { display: inline-flex; align-items: center; gap: 6px; font-size: .8125rem; font-weight: 600; padding: 2px 10px 2px 8px; border-radius: 999px; width: fit-content; }
.pille-ok { background: var(--gruen-hell); color: var(--gruen); }
.pille-warn { background: var(--orange-hell); color: var(--orange); }
.pille-alarm { background: var(--rot-hell); color: var(--rot); }
.pille-neutral { background: var(--neutral-hell); color: var(--text); }