/* chrisinterface UI-Kit
   Christian Steiner · chrisinterface.com
   Version siehe Datei VERSION.

   STATUS UND BADGE — zwei Sprachen für zwei Fragen.
     ZUSTAND     = farbiger Punkt + Text (.status): Wartend, Läuft, Fertig
     EIGENSCHAFT = umrandeter Chip (.badge): Admin, Entwurf, Gesperrt
   Die Varianten sind semantisch (ok / warn / err / info / neutral); welche
   fachliche Bedeutung „ok" hat, entscheidet das Werkzeug. */

/* === STATUS — Zustand: farbiger Punkt + Text =============== */
.status {
    display: inline-flex;
    align-items: center;
    gap: var(--abstand-6);
    font-family: var(--schriftart-ui);
    font-size: var(--schrift-2xs);
    font-weight: var(--gewicht-mittel);
    text-transform: uppercase;
    letter-spacing: var(--laufweite);
    white-space: nowrap;
}
.status::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;   /* der Punkt erbt die Farbe der Variante */
}
.status-neutral { color: var(--text-gedaempft); }
.status-ok      { color: var(--ok); }
.status-warn    { color: var(--warnung); }
.status-err     { color: var(--fehler); }
.status-info    { color: var(--info); }

/* Etwas läuft gerade: Der Punkt atmet, dezent. */
.status-pulse::before { animation: status-puls 1.6s ease-in-out infinite; }
@keyframes status-puls { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* === BADGE — Eigenschaft: umrandeter Chip ================== */
.badge {
    display: inline-block;
    padding: 1px 8px;
    border-radius: var(--rundung-mittel);
    border: 1px solid var(--linie);
    background: var(--flaeche-schwebend);
    color: var(--text-gedaempft);
    font-family: var(--schriftart-ui);
    font-size: var(--schrift-2xs);
    text-transform: uppercase;
    letter-spacing: var(--laufweite);
}
.badge-accent { color: var(--akzent-aktiv); }
.badge-ok     { color: var(--ok); }
.badge-warn   { color: var(--warnung); }
.badge-err    { color: var(--fehler); }
.badge-info   { color: var(--info); }