/*
 * PowerVault — Gestaltung
 *
 * Verbindliche Vorlage ist powervault_prototyp.html im Projektroot. Farben,
 * Typografie und Aufbau werden daraus uebernommen, nicht neu interpretiert.
 *
 * Stand Phase 2: Token, Grundgeruest, Kopfbereich, Navigation, Karten,
 * Formulare und Fehlerseiten. Kacheln, Charts und der Doppelspur-Schrieb
 * folgen in Phase 4.
 *
 * Die beiden Kreisfarben sind funktional, nicht dekorativ: Kreis A ist im
 * gesamten System cyan, Kreis B bernstein — in jedem Chart, jeder Kachel,
 * jeder Tabellenzeile, jeder Mail. Farbe ist dabei nie alleiniger
 * Informationstraeger: jeder Zustand traegt zusaetzlich ein Textlabel.
 *
 * @since 0.1.0
 */

/* ---------------------------------------------------------------------------
 * Schriften
 *
 * Alle Schnitte liegen lokal unter assets/fonts/. Es wird nichts von einem
 * fremden Server nachgeladen — die CSP erlaubt mit font-src 'self' auch gar
 * nichts anderes, und ein Web-Font von aussen gaebe bei jedem Seitenaufruf
 * die IP des Betrachters an Dritte weiter.
 *
 * Beide Familien stehen unter der SIL Open Font License 1.1 und duerfen
 * mitgeliefert werden; die Lizenztexte liegen daneben im selben Verzeichnis.
 *
 * Die Dateien sind auf das Latin-Subset beschnitten. Die unicode-range sagt
 * dem Browser, welche Zeichen darin enthalten sind: fuer alles ausserhalb
 * greift er ohne Umweg auf die Systemschrift zurueck, statt ein leeres
 * Kaestchen zu zeichnen. Betroffen ist genau ein Zeichen im Projekt, der
 * Pfeil "→" (U+2192) in einigen Erlaeuterungstexten.
 *
 * font-display: swap zeigt den Text sofort in der Systemschrift und tauscht
 * die Schrift nach. Die Alternative waere unsichtbarer Text — bei einer
 * Ueberwachungsanwendung ist ein kurz umbrechender Messwert das kleinere
 * Uebel als eine leere Kachel.
 * ------------------------------------------------------------------------- */

@font-face {
    font-family: 'Chakra Petch';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../assets/fonts/chakra-petch-400.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Chakra Petch';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../assets/fonts/chakra-petch-500.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Chakra Petch';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../assets/fonts/chakra-petch-600.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
 * IBM Plex Sans kommt als Variable Font: eine einzige Datei deckt den ganzen
 * Bereich 400 bis 500 ab. Deshalb steht hier eine Gewichtsspanne statt zweier
 * getrennter Regeln — zwei Dateien waeren byteweise dieselbe.
 */
@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 400 500;
    font-display: swap;
    src: url('../assets/fonts/ibm-plex-sans-var.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../assets/fonts/ibm-plex-mono-400.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../assets/fonts/ibm-plex-mono-500.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------------------------------------------------------------------------
 * Token
 * ------------------------------------------------------------------------- */

:root {
    /* --- Gehaeuse und Flaechen --- */
    --gehaeuse:     #0a0e12;  /* Seitenhintergrund */
    --panel:        #131a21;  /* Kachel- und Kartenflaeche */
    --panel-hoch:   #18212a;  /* hervorgehobene Flaeche, etwa Schaltflaeche bei Hover */
    --raster:       #1e2933;  /* Rahmen, Trennlinien, Gitternetz in den Charts */

    /* --- Funktionsfarben der Stromkreise --- */
    --kreis-a:      #00d4aa;  /* Kreis A, systemweit cyan */
    --kreis-b:      #ff9f1c;  /* Kreis B, systemweit bernstein */
    --alarm:        #ff3b47;  /* Stoerung, Grenzwertueberschreitung, Abweichung */

    /* --- Text --- */
    --text:         #c8d4de;  /* Fliesstext */
    --text-schwach: #6b7f8f;  /* Etiketten, Einheiten, Zeitstempel */
    --text-hell:    #e8f1f6;  /* Messwerte, Ueberschriften */

    /* --- Masse --- */
    --radius:       4px;

    /*
     * Schriftfamilien. Die WOFF2-Dateien liegen seit 0.7.2 lokal unter
     * assets/fonts/ und sind oben als @font-face deklariert. Die jeweils
     * angehaengten Systemschriften bleiben als Rueckfallebene stehen: fuer
     * Zeichen ausserhalb des Latin-Subsets und fuer den Moment vor dem
     * Nachladen der Schrift.
     */
    --schrift-titel:    'Chakra Petch', system-ui, sans-serif;
    --schrift-text:     'IBM Plex Sans', system-ui, sans-serif;
    --schrift-messwert: 'IBM Plex Mono', ui-monospace, monospace;
}

/* ---------------------------------------------------------------------------
 * Grundgeruest
 * ------------------------------------------------------------------------- */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background: var(--gehaeuse);
    color: var(--text);
    font-family: var(--schrift-text);
    font-size: 15px;
    line-height: 1.6;
    padding: 24px;
    -webkit-font-smoothing: antialiased;
}

.rahmen {
    max-width: 1180px;
    margin: 0 auto;
}

a {
    color: var(--kreis-a);
}

code {
    font-family: var(--schrift-messwert);
    font-size: 0.92em;
    color: var(--text-hell);
}

/* Sichtbarer Tastaturfokus auf allem, was fokussierbar ist. */
a:focus-visible,
button:focus-visible,
input:focus-visible {
    outline: 2px solid var(--kreis-a);
    outline-offset: 2px;
}

/*
 * Sprungmarke fuer die Tastaturbedienung: ausserhalb des sichtbaren Bereichs,
 * bis sie den Fokus bekommt.
 */
.sprungmarke {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--panel);
    color: var(--text-hell);
    padding: 10px 16px;
    border: 1px solid var(--raster);
    z-index: 10;
}

.sprungmarke:focus {
    left: 8px;
    top: 8px;
}

/* ---------------------------------------------------------------------------
 * Kopfbereich
 * ------------------------------------------------------------------------- */

.kopf {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--raster);
    padding-bottom: 14px;
    margin-bottom: 18px;
}

.marke {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.marke-name {
    font-family: var(--schrift-titel);
    font-size: 24px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--text-hell);
}

.marke-version {
    font-family: var(--schrift-messwert);
    font-size: 12px;
    color: var(--text-schwach);
}

.kopf-benutzer {
    display: flex;
    align-items: center;
    gap: 12px;
}

.benutzer-name {
    font-family: var(--schrift-messwert);
    font-size: 13px;
    color: var(--text-schwach);
}

.abmelde-form {
    display: inline;
}

/* ---------------------------------------------------------------------------
 * Navigation
 * ------------------------------------------------------------------------- */

.hauptnavigation {
    display: flex;
    gap: 2px;
    margin-bottom: 22px;
    flex-wrap: wrap;
}

.nav-punkt {
    font-family: var(--schrift-titel);
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-schwach);
    text-decoration: none;
    padding: 8px 16px;
    border: 1px solid transparent;
    border-radius: var(--radius);
}

.nav-punkt:hover {
    color: var(--text);
}

.nav-punkt-aktiv {
    color: var(--text-hell);
    background: var(--panel);
    border-color: var(--raster);
}

/*
 * Noch nicht umgesetzte Bereiche. Deutlich abgesetzt und nicht anklickbar,
 * mit Angabe der Phase — nicht als toter Verweis, der wie ein Fehler wirkt.
 */
.nav-punkt-inaktiv {
    opacity: 0.45;
    cursor: default;
}

.nav-punkt-inaktiv small {
    font-family: var(--schrift-messwert);
    font-size: 10px;
    text-transform: none;
    letter-spacing: 0;
    margin-left: 6px;
}

/* ---------------------------------------------------------------------------
 * Inhalt und Karten
 * ------------------------------------------------------------------------- */

.inhalt {
    display: block;
}

.karte {
    background: var(--panel);
    border: 1px solid var(--raster);
    border-radius: var(--radius);
    padding: 20px 22px;
    margin-bottom: 16px;
}

.karte-titel {
    font-family: var(--schrift-titel);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-hell);
    margin-bottom: 14px;
}

.karte p + p {
    margin-top: 12px;
}

.hinweis {
    font-size: 13px;
    color: var(--text-schwach);
    line-height: 1.55;
}

/* ---------------------------------------------------------------------------
 * Meldungen
 * ------------------------------------------------------------------------- */

.meldung {
    border: 1px solid var(--raster);
    border-left-width: 3px;
    border-radius: var(--radius);
    padding: 10px 14px;
    margin-bottom: 16px;
    font-size: 14px;
}

/*
 * Farbe ist nie alleiniger Informationstraeger: die Kennung davor benennt die
 * Art der Meldung im Klartext.
 */
.meldung-kennung {
    font-family: var(--schrift-messwert);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-right: 8px;
}

.meldung-fehler {
    border-left-color: var(--alarm);
    background: #1a1216;
}

.meldung-fehler .meldung-kennung {
    color: var(--alarm);
}

/* ---------------------------------------------------------------------------
 * Anmeldung und Formulare
 * ------------------------------------------------------------------------- */

.anmeldung {
    display: flex;
    justify-content: center;
    padding-top: 24px;
}

.karte-anmeldung {
    width: 100%;
    max-width: 380px;
}

.feld {
    margin-bottom: 14px;
}

.feld label {
    display: block;
    font-size: 11px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-schwach);
    margin-bottom: 5px;
}

.feld input {
    width: 100%;
    background: var(--gehaeuse);
    border: 1px solid var(--raster);
    border-radius: var(--radius);
    color: var(--text-hell);
    font-family: var(--schrift-messwert);
    font-size: 15px;
    padding: 9px 12px;
}

.feld input:hover {
    border-color: var(--text-schwach);
}

/*
 * SECURITY: Honeypot. Fuer Menschen unsichtbar, aber vorhanden — deshalb nicht
 * display:none und nicht type=hidden, denn beides ueberspringt ein
 * Formularroboter. Aus der Sprachausgabe und der Tabulatorreihenfolge ist das
 * Feld ueber aria-hidden und tabindex herausgenommen.
 */
.honigtopf {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---------------------------------------------------------------------------
 * Schaltflaechen
 * ------------------------------------------------------------------------- */

.knopf {
    display: inline-block;
    font-family: var(--schrift-text);
    font-size: 14px;
    background: transparent;
    color: var(--text);
    border: 1px solid var(--raster);
    border-radius: var(--radius);
    padding: 9px 18px;
    cursor: pointer;
    text-decoration: none;
}

.knopf:hover {
    border-color: var(--text-schwach);
    background: var(--panel-hoch);
}

.knopf-haupt {
    width: 100%;
    margin-top: 4px;
    border-color: var(--kreis-a);
    color: var(--kreis-a);
}

.knopf-haupt:hover {
    background: rgba(0, 212, 170, 0.08);
    border-color: var(--kreis-a);
}

.knopf-schlicht {
    font-size: 13px;
    padding: 6px 12px;
}

/* ---------------------------------------------------------------------------
 * Fehlerseiten
 * ------------------------------------------------------------------------- */

.karte-fehler {
    max-width: 560px;
    margin: 32px auto;
}

.fehler-code {
    font-family: var(--schrift-messwert);
    font-size: 44px;
    line-height: 1;
    color: var(--alarm);
    font-variant-numeric: tabular-nums;
    margin-bottom: 6px;
}

/* ---------------------------------------------------------------------------
 * Hinweisbalken
 * ------------------------------------------------------------------------- */

/*
 * Farbe ist nie alleiniger Informationstraeger: jeder Balken traegt links eine
 * Kennung im Klartext.
 */
.balken {
    display: flex;
    align-items: baseline;
    gap: 12px;
    border: 1px solid var(--raster);
    border-left-width: 3px;
    border-radius: var(--radius);
    padding: 10px 14px;
    margin-bottom: 14px;
    font-size: 13.5px;
    line-height: 1.5;
}

.balken-kennung {
    font-family: var(--schrift-messwert);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.balken-hinweis {
    border-left-color: var(--kreis-b);
    background: #191712;
}

.balken-hinweis .balken-kennung {
    color: var(--kreis-b);
}

.balken-alarm {
    border-left-color: var(--alarm);
    background: #1a1216;
}

.balken-alarm .balken-kennung {
    color: var(--alarm);
}

/* ---------------------------------------------------------------------------
 * Doppelspur-Schrieb
 * ------------------------------------------------------------------------- */

.schrieb {
    background: var(--panel);
    border: 1px solid var(--raster);
    border-radius: var(--radius);
    padding: 16px 18px 10px;
    margin-bottom: 18px;
}

.schrieb-kopf {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.schrieb-titel {
    font-family: var(--schrift-titel);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-schwach);
}

.legende {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    font-family: var(--schrift-messwert);
    font-size: 12px;
}

.legende span {
    display: flex;
    align-items: center;
    gap: 7px;
}

.legende-schwach {
    color: var(--text-schwach);
}

.punkt {
    width: 14px;
    height: 3px;
    display: inline-block;
}

.punkt-nominal {
    background: var(--text-schwach);
}

#schriebCanvas {
    display: block;
    width: 100%;
    height: 210px;
}

.schrieb-fuss {
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--raster);
    font-size: 13px;
    line-height: 1.5;
}

.einordnung-kennung {
    font-family: var(--schrift-messwert);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-right: 8px;
    color: var(--text-schwach);
}

.einordnung-gleichlauf .einordnung-kennung {
    color: var(--kreis-a);
}

.einordnung-einseitig,
.einordnung-gemeinsam {
    color: var(--text-hell);
}

.einordnung-einseitig .einordnung-kennung,
.einordnung-gemeinsam .einordnung-kennung {
    color: var(--alarm);
}

/* ---------------------------------------------------------------------------
 * Kreis-Kacheln
 * ------------------------------------------------------------------------- */

.kreise {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.kreis {
    background: var(--panel);
    border: 1px solid var(--raster);
    border-left: 3px solid var(--farbe);
    padding: 16px 18px;
}

/* Bei Batteriebetrieb oder Stoerung eine sichtbare Randmarkierung, nicht nur
   ein Farbwechsel — eine Umrandung faellt auch dann auf, wenn Farben schwer
   zu unterscheiden sind. */
.kreis-alarm {
    border-color: var(--alarm);
    border-left-color: var(--alarm);
    box-shadow: inset 0 0 0 1px var(--alarm);
    background: #1a1216;
}

/* Veraltet: die Werte werden gedaempft, damit sie nicht mehr wie aktuelle
   Messwerte wirken. Zusaetzlich traegt die Kachel das Textlabel "Veraltet". */
.kreis-veraltet .werte,
.kreis-veraltet .fuehrend,
.kreis-veraltet .lastbalken,
.kreis-veraltet .kachel-fuss {
    opacity: 0.35;
    filter: grayscale(1);
}

.kreis-veraltet .zustand {
    border-color: var(--alarm);
    color: var(--alarm);
}

.kreis-kopf {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.kreis-name {
    font-family: var(--schrift-titel);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.03em;
    color: var(--text-hell);
}

.zustand {
    font-family: var(--schrift-messwert);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 3px 9px;
    border: 1px solid var(--farbe);
    color: var(--farbe);
    white-space: nowrap;
}

.kreis-alarm .zustand {
    border-color: var(--alarm);
    color: var(--alarm);
}

.veraltet-hinweis {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--alarm);
    border: 1px solid var(--alarm);
    border-radius: var(--radius);
    padding: 8px 10px;
    margin-bottom: 14px;
}

/* --- Fuehrende Zahl: Restlaufzeit --- */

.fuehrend {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--raster);
}

.fuehrend-zahl .zahl {
    font-family: var(--schrift-messwert);
    font-size: 40px;
    font-weight: 500;
    line-height: 1;
    color: var(--text-hell);
    font-variant-numeric: tabular-nums;
}

.fuehrend-zahl small {
    font-size: 14px;
    color: var(--text-schwach);
    margin-left: 4px;
}

.fuehrend-neben {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.fuehrend-neben .etikett {
    font-size: 11px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-schwach);
}

.fuehrend-neben .ladung {
    font-family: var(--schrift-messwert);
    font-size: 13px;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

/* Kennzeichnung fuer alles, was das Geraet schaetzt statt misst. */
.fuehrend-neben .quelle,
.berechnet {
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-schwach);
    border: 1px solid var(--raster);
    border-radius: 2px;
    padding: 0 4px;
    display: inline-block;
}

/* --- Messwertgitter --- */

.werte {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px 10px;
}

.wert .etikett {
    font-size: 11px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-schwach);
}

.wert .zahl {
    font-family: var(--schrift-messwert);
    font-size: 21px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--text-hell);
    line-height: 1.25;
}

.wert .zahl small {
    font-size: 12px;
    color: var(--text-schwach);
    font-weight: 400;
    margin-left: 3px;
}

/* --- Lastbalken --- */

.lastbalken {
    grid-column: 1 / -1;
    margin-top: 4px;
}

.balken-spur {
    height: 5px;
    background: var(--raster);
    position: relative;
    overflow: hidden;
}

.balken-spur i {
    position: absolute;
    inset: 0 auto 0 0;
    background: var(--farbe);
    display: block;
}

.balken-spur-warn i {
    background: var(--alarm);
}

.balken-marke {
    position: absolute;
    top: -3px;
    bottom: -3px;
    width: 1px;
    background: var(--text-schwach);
}

.balken-fuss {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-family: var(--schrift-messwert);
    font-size: 11px;
    color: var(--text-schwach);
    margin-top: 5px;
}

.balken-fuss strong {
    color: var(--alarm);
    font-weight: 500;
}

.kachel-fuss {
    margin-top: 12px;
    font-family: var(--schrift-messwert);
    font-size: 11px;
    color: var(--text-schwach);
    font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
 * Ereignisliste und Tabellen
 * ------------------------------------------------------------------------- */

.zeile {
    display: flex;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--raster);
    align-items: baseline;
}

.zeile:last-child {
    border-bottom: none;
}

.zeit {
    font-family: var(--schrift-messwert);
    font-size: 12px;
    color: var(--text-schwach);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.zeile .txt {
    flex: 1;
    font-size: 13.5px;
}

.zeile .dauer {
    color: var(--text-schwach);
    font-family: var(--schrift-messwert);
    font-size: 12px;
    margin-left: 8px;
}

.kennung {
    font-family: var(--schrift-messwert);
    font-size: 11px;
    padding: 1px 6px;
    border: 1px solid currentColor;
    white-space: nowrap;
}

.tabelle {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
    font-size: 13.5px;
}

.tabelle th,
.tabelle td {
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid var(--raster);
}

.tabelle th {
    font-family: var(--schrift-titel);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-schwach);
    font-weight: 500;
}

.tabelle .zahlenspalte {
    font-family: var(--schrift-messwert);
    font-variant-numeric: tabular-nums;
}

.leerzustand {
    font-size: 13.5px;
    color: var(--text-schwach);
    line-height: 1.55;
}

.zustandszeile {
    margin: 14px 0;
    font-size: 13.5px;
}

.marke {
    font-family: var(--schrift-messwert);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 2px 8px;
    border: 1px solid currentColor;
    margin-right: 8px;
}

.marke-ok {
    color: var(--kreis-a);
}

.marke-offen {
    color: var(--kreis-b);
}

.knopfreihe {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 16px 0;
}

.knopf-haupt-schmal {
    border-color: var(--kreis-a);
    color: var(--kreis-a);
}

.knopf-haupt-schmal:hover {
    background: rgba(0, 212, 170, 0.08);
}

.knopf[disabled],
.knopf-haupt-schmal[disabled] {
    opacity: 0.4;
    cursor: default;
}

.meldung-erfolg {
    border-left-color: var(--kreis-a);
}

.meldung-erfolg .meldung-kennung {
    color: var(--kreis-a);
}

.meldung-hinweis {
    border-left-color: var(--kreis-b);
}

.meldung-hinweis .meldung-kennung {
    color: var(--kreis-b);
}

/* ---------------------------------------------------------------------------
 * Auswertungsansichten
 * ------------------------------------------------------------------------- */

.karte-kopfzeile {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.karte-kopfzeile .karte-titel {
    margin-bottom: 0;
}

.untertitel {
    font-family: var(--schrift-titel);
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-schwach);
    margin: 20px 0 8px;
}

/* --- Zeitraumwahl --- */

.zeitraumwahl {
    display: flex;
    gap: 2px;
    flex-wrap: wrap;
}

.zeitraum {
    font-family: var(--schrift-messwert);
    font-size: 12px;
    color: var(--text-schwach);
    text-decoration: none;
    padding: 5px 12px;
    border: 1px solid var(--raster);
    border-radius: var(--radius);
}

.zeitraum:hover {
    color: var(--text);
    border-color: var(--text-schwach);
}

.zeitraum-aktiv {
    color: var(--text-hell);
    background: var(--panel-hoch);
    border-color: var(--text-schwach);
}

/* --- Diagramme --- */

.diagramme {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: 18px;
    margin-top: 16px;
}

.diagramm {
    margin: 0;
}

.diagramm figcaption {
    font-family: var(--schrift-titel);
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-schwach);
    margin-bottom: 8px;
}

/*
 * Feste Hoehe der Diagrammflaeche.
 *
 * Chart.js laeuft hier mit maintainAspectRatio: false und richtet sich damit
 * nach dem Elternknoten des Canvas: es misst dessen Abmessung und schreibt
 * das Ergebnis als Inline-Style zurueck ins Canvas. Bezieht der Elternknoten
 * seine Hoehe umgekehrt vom Canvas, schaukelt sich das ueber den
 * ResizeObserver bei jedem Neuzeichnen weiter hoch — das Diagramm waechst
 * dann unaufhoerlich in die Hoehe, bis die Seite unbrauchbar ist.
 *
 * Die Hoehe steht deshalb an einem eigenen Behaelter mit fester Abmessung
 * und nicht am Canvas. Eine Angabe am Canvas selbst hat den Fehler nicht
 * verhindert: der Inline-Style von Chart.js schlaegt jede Regel aus dem
 * Stylesheet, und das <figure> darum herum bezog seine Hoehe weiterhin vom
 * gewachsenen Canvas.
 *
 * position: relative macht den Behaelter zum Bezugsrahmen — sonst misst
 * Chart.js den naechsten positionierten Vorfahren statt dieser Flaeche.
 */
.diagramm-flaeche {
    position: relative;
    height: 240px;
}

.diagramm-flaeche canvas {
    display: block;
}

/* --- Filter und Formularreihen --- */

.filterzeile,
.feldreihe {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.feld-schmal {
    max-width: 200px;
}

.feld select {
    width: 100%;
    background: var(--gehaeuse);
    border: 1px solid var(--raster);
    border-radius: var(--radius);
    color: var(--text-hell);
    font-family: var(--schrift-text);
    font-size: 14px;
    padding: 8px 10px;
}

.feld-einstellung {
    display: grid;
    grid-template-columns: 260px 160px 1fr;
    gap: 12px;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--raster);
    margin-bottom: 0;
}

.feld-einstellung label {
    margin-bottom: 0;
    text-transform: none;
    font-size: 13.5px;
    letter-spacing: 0;
    color: var(--text);
}

.feld-einstellung .einheit {
    font-family: var(--schrift-messwert);
    font-size: 11px;
    color: var(--text-schwach);
    margin-left: 6px;
}

.feldhinweis {
    font-size: 12px;
    color: var(--text-schwach);
    line-height: 1.45;
}

.geraetefeld {
    border: 1px solid var(--raster);
    border-radius: var(--radius);
    padding: 12px 14px;
    margin-bottom: 14px;
}

.geraetefeld legend {
    font-family: var(--schrift-titel);
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0 6px;
}

/* --- Marken und Einordnungen --- */

.marke-warnung {
    color: var(--kreis-b);
}

.marke-kritisch {
    color: var(--alarm);
}

.marke-unbekannt {
    color: var(--text-schwach);
}

.einordnung-marke {
    font-family: var(--schrift-messwert);
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 1px 6px;
    border: 1px solid currentColor;
    margin-left: 6px;
}

.einordnung-marke-gemeinsam,
.einordnung-marke-einseitig {
    color: var(--alarm);
}

.bewertungstext {
    font-size: 14px;
    line-height: 1.55;
    margin: 12px 0;
}

.blaettern {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 14px;
}

/* --- Werteraster in anderen Breiten --- */

.werte-drei {
    grid-template-columns: repeat(3, 1fr);
}

.werte-vier {
    grid-template-columns: repeat(4, 1fr);
}

.wert .zahl.klein {
    font-size: 14px;
    line-height: 1.4;
}

.ohne-wert {
    color: var(--text-schwach);
}

/* ---------------------------------------------------------------------------
 * Fussbereich
 * ------------------------------------------------------------------------- */

.fuss {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    border-top: 1px solid var(--raster);
    margin-top: 28px;
    padding-top: 12px;
    font-family: var(--schrift-messwert);
    font-size: 11px;
    color: var(--text-schwach);
}

/* ---------------------------------------------------------------------------
 * Bildschirmbreiten und Bewegung
 * ------------------------------------------------------------------------- */

@media (max-width: 640px) {
    body {
        padding: 14px;
    }

    .kopf {
        align-items: flex-start;
    }

    .nav-punkt {
        padding: 8px 12px;
    }

    .kreise {
        grid-template-columns: 1fr;
    }

    .werte {
        grid-template-columns: repeat(2, 1fr);
    }

    .fuehrend-zahl .zahl {
        font-size: 32px;
    }

    /* Breite Tabellen bekommen ihren eigenen Rollbereich, damit die Seite
       selbst niemals waagerecht rollt. */
    .tabelle {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    .diagramme {
        grid-template-columns: 1fr;
    }

    .werte-drei,
    .werte-vier {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Einstellungsfelder untereinander statt in drei Spalten. */
    .feld-einstellung {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .feld-schmal {
        max-width: none;
    }
}

@media (max-width: 900px) {
    .diagramme {
        grid-template-columns: 1fr;
    }
}

/* Bewegung nur, wenn der Nutzer sie nicht abbestellt hat. */
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}