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

   COCKPIT — die Schicht für Werkzeuge, die wie ein Instrument aussehen:
   Kachel, Hero-Zahl, Puls-Punkt, Instrument-Zelle. Für Oberflächen, die
   aus zwei Metern gelesen und über Instrumente gezogen werden. Größen darf
   das Werkzeug überschreiben — Optik zentral, Größe lokal. */

/* ── Die Kachel ── vertiefte Fläche ohne Rand, Versalien-Kopf mit Platz für
   den Puls-Punkt. Rund wie die Karte der Seite; was sie von ihr unter-
   scheidet: tiefer statt erhaben, kein Rand, enger Abstand im Raster. */
.kachel {
    background: var(--vertieft);
    border-radius: var(--rundung-karte);
    padding: 18px 22px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
.kachel-kopf {
    display: flex;
    align-items: center;
    gap: var(--abstand-6);
    font-size: var(--schrift-xs);
    letter-spacing: var(--laufweite);
    text-transform: uppercase;
    color: var(--text-gedaempft);
    margin-bottom: var(--abstand-8);
    flex-shrink: 0;
}

/* ── Die Hero-Zahl ── eine Ziffer, aus zwei Metern lesbar: Mono, leicht,
   skaliert mit dem Fenster. Die Spanne steht als Wert, weil sie die
   Anatomie dieser Zahl ist, kein geteilter Ton. */
.hero-zahl {
    font-family: var(--schriftart-mono);
    font-weight: var(--gewicht-leicht);
    font-size: clamp(2.2rem, 4.5vw, 3.4rem);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.hero-einheit {
    font-size: var(--schrift-sm);
    color: var(--text-gedaempft);
}

/* ── Der Puls-Punkt ── „lebt die Quelle?" Ein Vokabular, vier Zustände.
   Kein rotes Blinken: Farbe ist Signal, Alarm bleibt Sache des Werkzeugs.
   Ohne Klasse = aus; die Zustände gewinnen per Doppelklasse. */
.puls-punkt {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
    background: var(--text-leise);
    transition: background 0.3s;
}
.puls-punkt.lebt      { background: var(--ok); }
.puls-punkt.empfaengt { background: var(--ok); animation: puls-atmen 2s ease-in-out infinite; }
.puls-punkt.stockt    { background: var(--warnung); }
.puls-punkt.aus       { background: var(--text-leise); }
@keyframes puls-atmen { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ── Die Instrument-Zelle ── die dichte Zelle einer Zeittafel: Zebra ODER
   Linien, nie beides; Kopfzeile in Versalien; Zahlen tabellarisch. Die
   Zeile selbst baut jede Tafel als eigenes Grid — geteilt ist die Zelle. */
.instrument-zelle {
    padding: var(--abstand-8) var(--abstand-12);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Kein Markieren ── Ein Cockpit wird bedient, nicht gelesen und kopiert:
   Man zieht über Instrumente, und ohne diese Sperre startet der Browser bei
   jeder Zieh-Geste eine Textauswahl, die halbe Seite färbt sich blau.
   Deshalb gilt die Regel für das ganze Werkzeug und nicht kachelweise.
   Tippbare Felder bleiben markierbar — dort ist Auswählen Bedienung. */
body {
    user-select: none;
    -webkit-user-select: none;
}
input, textarea, [contenteditable] {
    user-select: text;
    -webkit-user-select: text;
}