/* Stilvertrag V2 (eingefroren 09.08.2026) - gemeinsame Grundlage der drei
   Layout-Varianten. Nur Farben, Typo und Form; JEDE Variante bringt ihr
   eigenes Raster mit.

   Die Sichtung admin-hub-preview.html traegt noch die alte GOLD-Palette; hier
   ist auf CYAN umgezogen. Gold gibt es nicht mehr - es ist Rang/Marke
   vorbehalten und hat in einem Werkzeug nichts zu suchen. */

:root {
    --bg: #050508;
    --panel: #0E0E12;
    --panel-alt: #08080B;
    --border: #26262E;
    --hairline: #18181E;
    --text-primary: #F5F5F5;
    --text-body: #D6D9DE;
    --text-secondary: #9A9FA8;
    --text-muted: #6E7480;
    --text-disabled: #42464F;
    --accent: #7AE7FF;
    --danger: #D62828;
    --danger-text: #E24444;

    /* Flag-Stufen. Die Skala laeuft von ruhig nach laut, und sie benutzt
       ABSICHTLICH nicht den Akzent fuer "sauber": Cyan ist die Aktiv-Farbe der
       Oberflaeche, nicht ein Urteil ueber einen Menschen. */
    --clean: #4ADE80;
    --watch: #F5A524;
    --review: #E24444;
    --ban: #D62828;

    --display: 'Orbitron', 'Eurostile', 'Bank Gothic', sans-serif;
    --mono: 'IBM Plex Mono', 'Consolas', ui-monospace, monospace;
    --body: 'Inter', 'Segoe UI', system-ui, sans-serif;
}

/* border-radius 0 ueberall - nur echte Kreise sind rund. */
* { box-sizing: border-box; border-radius: 0; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text-body);
    font-family: var(--body);
    font-size: 13px;
    line-height: 1.5;
}

h1, h2, h3, .kicker, nav a, button {
    font-family: var(--display);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}

h1 { font-size: 15px; color: var(--text-primary); margin: 0; }
h2 { font-size: 11px; color: var(--text-secondary); margin: 0 0 8px; }
h3 { font-size: 12px; color: var(--text-primary); margin: 0; }

/* Kicker-Balken vor Versalien: cyan (Stilvertrag V2). */
.kicker {
    font-size: 10px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 8px;
}
.kicker::before {
    content: '';
    width: 3px;
    height: 11px;
    background: var(--accent);
    display: block;
}

.num, td.num, .score { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.panel { background: var(--panel); border: 1px solid var(--border); }
.hair { border-top: 1px solid var(--hairline); }

table { width: 100%; border-collapse: collapse; }
th {
    font-family: var(--display);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
    font-weight: 600;
}
td { padding: 9px 10px; border-bottom: 1px solid var(--hairline); }
tr.sel td { background: rgba(122, 231, 255, 0.07); }
tr:hover td { background: rgba(255, 255, 255, 0.02); }

/* Stufen-Marke: Doppelcodierung ueber Farbe UND Text. */
.stufe {
    font-family: var(--mono);
    font-size: 10px;
    padding: 2px 7px;
    border: 1px solid;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}
.s-clean  { color: var(--clean);  border-color: rgba(74, 222, 128, 0.45); }
.s-watch  { color: var(--watch);  border-color: rgba(245, 165, 36, 0.5); }
.s-review { color: var(--review); border-color: rgba(226, 68, 68, 0.6); }
.s-ban    { background: var(--ban); color: #050508; border-color: var(--ban); font-weight: 600; }

/* Score-Balken: die Zahl bleibt lesbar, der Balken ist nur Beiwerk. */
.bar { height: 3px; background: #1B1B22; margin-top: 3px; }
.bar > i { display: block; height: 100%; background: var(--accent); }
.bar.hot > i { background: var(--danger-text); }

button, .btn {
    font-size: 10px;
    padding: 6px 12px;
    border: 1px solid var(--text-disabled);
    background: transparent;
    color: var(--text-body);
    cursor: pointer;
}
/* Max. EIN Primaerbutton je Zeile. */
.btn.prim { background: var(--accent); color: #050508; border-color: var(--accent); }
.btn.warn { border-color: var(--danger); color: var(--danger-text); }

.muted { color: var(--text-muted); }
.sec { color: var(--text-secondary); }

/* Der Demo-Streifen. Er muss unuebersehbar sein: eine Forensik-Oberflaeche mit
   erfundenen Zahlen, die man fuer echt haelt, ist gefaehrlicher als gar keine. */
.demo {
    background: rgba(214, 40, 40, 0.12);
    border: 1px solid var(--danger);
    color: var(--danger-text);
    padding: 7px 12px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.06em;
}

.regel {
    display: inline-block;
    font-family: var(--mono);
    font-size: 10px;
    padding: 1px 6px;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    margin: 1px 3px 1px 0;
}
.regel.hot { color: var(--danger-text); border-color: rgba(226, 68, 68, 0.5); }

.vlabel {
    position: fixed; right: 0; top: 0; z-index: 50;
    background: var(--accent); color: #050508;
    font-family: var(--display); font-size: 10px; font-weight: 700;
    padding: 5px 12px; letter-spacing: 0.1em;
}