/* app.css — Karten, Tabellen und Formulare von BlueGate.
   Ergänzt styles/style.css (BlueBox-Oberfläche) und nutzt dessen Farbtokens,
   damit helles und dunkles Schema ohne Zutun mitlaufen. Muss NACH style.css
   eingebunden werden. */

/* ── Globale Regeln von style.css entschärfen ───────────────────────────
   style.css bringt Regeln ohne Klasse mit, die auf die Formulare der
   BlueBox-Oberfläche zugeschnitten sind:

       label { margin-left: 40px; display: inline-block; }
       input { margin-left: 20px; text-align: center; border: 2px solid #ccc; }

   In den Rastern dieser Datei schieben sie Beschriftung und Bedienelement aus
   ihrer Spalte: Die Checkbox einer Sensorzeile (20px-Spalte) landete samt
   20px Rand außerhalb und war nicht mehr anklickbar; Textfelder standen
   eingerückt und mittig. Deshalb hier zurücksetzen — die Komponenten weiter
   unten setzen ihre Abstände selbst.

   Gilt nur innerhalb von .page/.panel/.setup-form-wrap, damit die von der
   BlueBox übernommenen Seiten (chart, export, monitor …) ihre Regeln behalten. */
.page label,
.page input,
.panel label,
.panel input,
.setup-form-wrap label,
.setup-form-wrap input {
    margin-left: 0;
    text-align: inherit;
}

/* Kontrollkästchen brauchen mehr als das Zurücksetzen des Randes: Sobald
   `border` gesetzt ist, ersetzt Firefox die native Darstellung durch die
   CSS-Box — sichtbar bleibt ein leeres Kästchen ohne Haken, das aussieht,
   als ließe es sich nicht anwählen. Deshalb Rand und Maße hier vollständig
   selbst bestimmen (die BlueBox tut in .formula-controls dasselbe).

   .setup-form-wrap gehört dazu, obwohl die Klassen aus setup.css stammen:
   setup.css setzt auf Kontrollkästchen nur margin, nicht den Rand — auf dem
   Gerät fällt das nicht auf, im Firefox des Auswerteplatzes schon. */
.page input[type=checkbox],
.page input[type=radio],
.panel input[type=checkbox],
.panel input[type=radio],
.setup-form-wrap input[type=checkbox],
.setup-form-wrap input[type=radio] {
    width: 18px;
    height: 18px;
    margin: 0;
    border: none;
    border-radius: 0;
    flex: none;
    accent-color: var(--primary-color);
}

/* ── Kopfleiste ─────────────────────────────────────────────────────── */
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 24px;
    background-color: var(--nav-bg);
    border-bottom: 1px solid var(--border-soft);
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.brand-logo {
    height: 30px;
    width: auto;
}

.brand-name {
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.user-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: 0.9rem;
    line-height: 1.3;
}

.user-level {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.btn-logout {
    padding: 8px 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-light);
    text-decoration: none;
    font-size: 0.88rem;
    transition: var(--transition);
}

.btn-logout:hover {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

/* ── Seite ──────────────────────────────────────────────────────────── */
.page {
    max-width: 1100px;
    margin: 0 auto 0 0;          /* linksbündig statt zentriert */
    padding: 32px 24px 48px;
}

.page-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
}

.page-hint {
    margin: 6px 0 28px;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.empty {
    padding: 32px;
    text-align: center;
    color: var(--text-muted);
    background-color: var(--nav-bg);
    border: 1px solid var(--border-soft);
    border-radius: 12px;
}

/* ── Karten ─────────────────────────────────────────────────────────── */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.card {
    display: flex;
    flex-direction: column;
    padding: 22px;
    background-color: var(--nav-bg);
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    transition: var(--transition);
}

.card:hover {
    border-color: rgba(0, 123, 255, 0.4);
    transform: translateY(-2px);
}

.card-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
}

.card-desc {
    margin: 6px 0 18px;
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* Kunde hinter der Seriennummer — nur der Admin bekommt ihn zu sehen.
   Erbt die gedämpfte Farbe von .card-desc: Die Zeile beantwortet zuerst
   "welches Gerät", der Kunde ist die Zugabe und soll die Seriennummer nicht
   überstrahlen. Lange Firmennamen brechen um, statt die Kachel zu sprengen. */
.card-kunde {
    overflow-wrap: anywhere;
}

/* Belegter Platz gegen die gekaufte Speicherplatzgröße (sql/70): ab 90 % orange,
   darüber rot. Dieselben Farben wie beim Status weiter unten — Orange ist in
   BlueGate durchgehend "sieh hin", Rot "es ist soweit".

   Die Farbe steht NICHT allein: Der Titel am Wert nennt Bereich und Prozentsatz
   ausgeschrieben. Wer Rot und Orange nicht unterscheidet, liest die Zahl. */
.stat-speicher--warn { color: var(--status-alarm); }
.stat-speicher--voll { color: var(--status-offline); }

.stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 0 0 20px;
}

.stat {
    padding: 10px 12px;
    background-color: var(--field-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.stat--wide {
    grid-column: 1 / -1;
}

.stat dt {
    /* flex, damit der Vermerk „Archiviert" neben der Beschriftung sitzt und
       nicht unter dem Zeitraum steht — dort las er sich wie ein Teil der
       Datumsangabe. */
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.stat dd {
    margin: 4px 0 0;
    font-size: 1rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Vermerk „Archiviert" neben der Beschriftung Datenbestand: Von diesem Bestand
   liegt ein Auszug im Archiv (bin/archiv_cron.php) oder er ist gepackt und
   schreibgeschützt (bin/archiv_pack.php). Kein Fehler und keine Warnung,
   sondern eine Eigenschaft des Bestands — deshalb eine eigene Farbe statt einer
   der Statusfarben, aber kräftig genug, um im Kachelfeld aufzufallen. */
.stat-archiv {
    display: inline-block;
    padding: 1px 8px;
    border: 1px solid var(--archiv-line);
    border-radius: 999px;
    background: var(--archiv-bg);
    color: var(--archiv-fg);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    vertical-align: middle;
    white-space: nowrap;
}

/* Gepackt: dieselbe Farbe, gefüllt. Der Unterschied zum bloßen Auszug ist
   handfest — diese Messwerte lassen sich nicht mehr ändern. */
.stat-archiv--gepackt {
    border-color: transparent;
    background: var(--archiv-fg);
    color: var(--archiv-auf);
}

.card-action {
    margin-top: auto;
    padding: 11px 18px;
    text-align: center;
    background-color: var(--primary-color);
    border-radius: 8px;
    color: #fff;
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 600;
    transition: var(--transition);
}

.card-action:hover {
    background-color: #1a87ff;
    box-shadow: 0 0 15px rgba(0, 123, 255, 0.4);
}

/* ── Navigation in der Kopfleiste ───────────────────────────────────── */
.mainnav {
    display: flex;
    gap: 4px;
    margin-left: 20px;
}

.mainnav a {
    padding: 7px 14px;
    border-radius: 8px;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.9rem;
    transition: var(--transition);
}

.mainnav a:hover { color: var(--text-light); background-color: rgba(255,255,255,0.05); }
.mainnav a.active { color: var(--text-light); background-color: rgba(0,123,255,0.18); }

.crumb { margin: 0 0 14px; font-size: 0.88rem; }
.crumb a { color: var(--text-muted); text-decoration: none; }
.crumb a:hover { color: var(--primary-color); }

/* ── Meldungen ──────────────────────────────────────────────────────── */
.msg {
    margin: 0 0 20px;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 0.9rem;
}

.msg--ok  { background-color: rgba(40,167,69,0.12);  border: 1px solid rgba(40,167,69,0.45);  color: #4cd07d; }
.msg--err { background-color: rgba(192,57,43,0.12);  border: 1px solid rgba(192,57,43,0.5);   color: #ff7a6b; }

/* ── Toolbar über Verwaltungslisten ─────────────────────────────────────
   Suche, Filter und Sortierung über einer .tbl. Die Sensorliste hat dafür
   .sensor-toolbar/#sensor-search in style.css; hier sitzt die Leiste in
   .page und braucht daher kein eigenes seitliches Padding. Knöpfe und
   Zähler kommen unverändert von dort (.filter-row/.filter-btn/
   .sensor-counter), die BlueBox-Auswahl aus bluegate.css (.bb-select). */
.list-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
/* style.css gibt input/select global margin-left:20px — das schöbe das
   Suchfeld aus der Flucht der Kacheln/Tabelle. In der Toolbar zurücksetzen. */
.list-toolbar input,
.list-toolbar select { margin-left: 0; }

/* Werte wie #sensor-search in style.css. */
.list-search {
    background: var(--nav-bg);
    border: 1px solid var(--border);
    color: var(--text-light);
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 0.88rem;
    width: 240px;
}
.list-search:focus { outline: none; border-color: #007bff; }

/* .filter-btn ist auf <button> gemünzt; die Sortierung nutzt Links, damit
   sie verlinkbar bleibt und ohne JavaScript funktioniert. */
a.filter-btn {
    display: inline-block;
    text-decoration: none;
    line-height: 1.5;
}

/* ── Tabelle ────────────────────────────────────────────────────────── */
.tbl {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--nav-bg);
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    overflow: hidden;
    font-size: 0.9rem;
}

.tbl th {
    padding: 12px 14px;
    text-align: left;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    background-color: rgba(255,255,255,0.03);
    border-bottom: 1px solid var(--border);
}

.tbl td { padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,0.05); vertical-align: top; }
.tbl tr:last-child td { border-bottom: none; }
.row--off { opacity: 0.5; }
/* Zahlenspalten rechtsbündig (admin.php, abrechnung_kunde.php). */
.tbl .td-right { text-align: right; }

.mono { font-family: 'Cascadia Code', Consolas, monospace; }
.sub  { font-size: 0.8rem; color: var(--text-muted); }
.warn { font-size: 0.82rem; color: #f0ad4e; }

.chip {
    display: inline-flex;
    flex-direction: column;
    margin: 0 6px 6px 0;
    padding: 5px 10px;
    background-color: var(--field-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.82rem;
    font-family: 'Cascadia Code', Consolas, monospace;
}

.chip-sub { font-family: 'Segoe UI', sans-serif; font-size: 0.72rem; color: var(--text-muted); }

.badge {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 600;
}

.badge--ok   { background-color: rgba(40,167,69,0.18);  color: #4cd07d; }
.badge--off  { background-color: rgba(160,160,160,0.18); color: var(--text-muted); }
.badge--warn { background-color: rgba(240,173,78,0.18); color: #f0ad4e; }

.actions { white-space: nowrap; }
.inline  { display: inline; }

/* ── Schaltflächen ──────────────────────────────────────────────────── */
.btn {
    display: inline-block;
    padding: 10px 18px;
    border: 1px solid transparent;
    border-radius: 8px;
    background-color: var(--primary-color);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition);
}

.btn:hover { background-color: #1a87ff; }
.btn--small { padding: 6px 12px; font-size: 0.8rem; }
.btn--ghost { background-color: transparent; border-color: var(--border); color: var(--text-light); }
.btn--ghost:hover { background-color: rgba(255,255,255,0.06); }
.btn--danger { background-color: transparent; border-color: rgba(192,57,43,0.5); color: #ff7a6b; }
.btn--danger:hover { background-color: rgba(192,57,43,0.15); }

/* ── Panel & Formular ───────────────────────────────────────────────── */
.panel {
    margin-top: 28px;
    padding: 22px;
    background-color: var(--nav-bg);
    border: 1px solid var(--border-soft);
    border-radius: 12px;
}

.panel-title { margin: 0 0 18px; font-size: 1.05rem; font-weight: 600; }

/* Kachel für eine Handlung ohne Rückweg — derzeit das Entfernen einer BlueBox
   (bluebox_settings.php). Nur der Rahmen und die Überschrift sind eingefärbt:
   Ein rot hinterlegter Block sähe aus wie eine Fehlermeldung, dabei ist hier
   nichts schiefgegangen — es steht nur etwas Endgültiges bereit. */
.panel--gefahr { border-color: rgba(192, 57, 43, 0.45); }
.panel--gefahr .panel-title { color: #ff7a6b; }

/* Das Bestätigungsfeld fasst genau eine Seriennummer (höchstens acht Zeichen).
   Nicht .feld-schmal: Das setzt die ganze Rasterzelle auf 80 px, und die
   Beschriftung darüber brach dann Wort für Wort um. Schmal wird hier nur das
   Eingabefeld, die Zeile darüber bleibt eine Zeile. */
.feld-sernr { width: 10ch; }

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    align-items: start;
}

.field { display: flex; flex-direction: column; }
/* Die Aktions-Zelle hat kein Label — sonst säße der Knopf auf Label-Höhe.
   align-self:end richtet ihn am unteren Zeilenrand aus, bündig mit den Feldern. */
.field--action { justify-content: flex-end; align-self: end; }

.field label {
    margin-bottom: 6px;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-muted);
}

.field input[type=text] {
    padding: 11px 13px;
    background-color: var(--field-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-light);
    font-size: 0.92rem;
    transition: var(--transition);
}

.field input[type=text]:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0,123,255,0.25);
}

/* Auswahlfelder im Formularraster wie die Textfelder.
   style.css gibt select global margin-left:20px (und einen eigenen Rahmen) —
   im Raster stand die Box damit 20 px weiter rechts als die Felder darüber
   und darunter. Dieselbe Stelle wie bei .list-toolbar select. */
.field select {
    margin-left: 0;
    padding: 11px 13px;
    background-color: var(--field-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-light);
    font-size: 0.92rem;
    transition: var(--transition);
}

.field select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0,123,255,0.25);
}

.field-hint { margin-top: 6px; font-size: 0.75rem; color: var(--text-muted); }
.form-actions { display: flex; gap: 12px; margin-top: 28px; }

/* Ein Knopf am rechten Rand derselben Zeile — bündig mit den Kacheln darüber.
   Gebraucht für „BlueBox entfernen“ neben „Speichern“: Der Abstand ist die
   Sicherung. margin-inline-start statt margin-left, damit es auch in
   rechtsläufigen Sprachen der äußere Rand bleibt. */
.form-actions .btn--rechts { margin-inline-start: auto; }

/* ── BlueBox-/Sensorauswahl ─────────────────────────────────────────── */
.bb-head { display: flex; align-items: center; }

.switch { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.switch input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--primary-color); }
.switch-title { display: flex; flex-direction: column; font-size: 1rem; font-weight: 600; }
.switch-sub { font-family: 'Segoe UI', sans-serif; font-size: 0.78rem; font-weight: 400; color: var(--text-muted); }

.bb-body { margin: 18px 0 0 30px; }

.mode-row { display: flex; gap: 22px; flex-wrap: wrap; }
.radio { display: flex; align-items: center; gap: 8px; font-size: 0.88rem; cursor: pointer; }
.radio input { accent-color: var(--primary-color); }

.sensor-list {
    margin-top: 16px;
    padding: 14px;
    max-height: 340px;
    overflow-y: auto;
    background-color: var(--field-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.sensor-tools { display: flex; gap: 8px; margin: 0 0 12px; }

.sensor-group {
    margin: 14px 0 6px;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    padding-bottom: 4px;
}

.sensor-group:first-of-type { margin-top: 0; }

.sensor {
    display: grid;
    grid-template-columns: 20px 34px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 5px 6px;
    border-radius: 6px;
    font-size: 0.86rem;
    cursor: pointer;
}

.sensor:hover { background-color: rgba(255,255,255,0.04); }
.sensor input { accent-color: var(--primary-color); }
.sensor-nr { font-family: Consolas, monospace; font-size: 0.78rem; color: var(--text-muted); text-align: right; }
.sensor-meta { font-size: 0.76rem; color: var(--text-muted); }

/* ── Messwerte ──────────────────────────────────────────────────────── */
.tbl .num { text-align: right; white-space: nowrap; }
.val  { font-family: 'Cascadia Code', Consolas, monospace; font-weight: 600; font-variant-numeric: tabular-nums; }
.unit { margin-left: 4px; font-size: 0.78rem; color: var(--text-muted); }

/* ── Verwaltung ─────────────────────────────────────────────────────── */
.page--schmal { max-width: 560px; }

.title-nr {
    margin-left: 10px;
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--text-dim);
}

.msg--warn {
    background-color: rgba(240, 173, 78, 0.12);
    border: 1px solid rgba(240, 173, 78, 0.5);
    color: #f0ad4e;
}

.badge--lvl { background-color: rgba(0, 123, 255, 0.18); color: #4da3ff; }

.panel-subtitle {
    margin: 28px 0 4px;
    padding-top: 20px;
    border-top: 1px solid var(--border-soft);
    font-size: 0.95rem;
    font-weight: 600;
}

.panel-hint { margin: 0 0 16px; }

.bb-liste {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
}

/* Die Zeile ist ein Behälter: links die Auswahl (<label class="switch">),
   rechts der Weg zur Laufzeit dieser BlueBox. Früher war .bb-zeile selbst das
   Label und trug .switch — deshalb hier dieselben Flex-Angaben. */
.bb-zeile {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: var(--field-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    transition: var(--transition);
}

.bb-zeile:hover { border-color: var(--primary-color); }

.bb-zeile > .switch { flex: 1 1 auto; min-width: 0; }

/* „Bezahlt bis" der Zuweisung: unauffällig, solange nichts ansteht — und
   deutlich, sobald der Ablauf näher rückt oder schon vorbei ist. */
.bb-laufzeit {
    flex: 0 0 auto;
    align-self: center;
    padding: 2px 8px;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 0.74rem;
    white-space: nowrap;
    color: var(--text-muted);
    text-decoration: none;
}

.bb-laufzeit:hover {
    border-color: var(--primary-color);
    color: var(--text-light);
}

.bb-laufzeit.laeuft-ab {
    border-color: #e0a458;
    color: #e0a458;
}

.bb-laufzeit.ist-abgelaufen {
    border-color: #dc3545;
    color: #dc3545;
}

/* Passwortfelder wie die Textfelder der Formulare */
.field input[type=password] {
    padding: 11px 13px;
    background-color: var(--field-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-light);
    font-size: 0.92rem;
    transition: var(--transition);
}

.field input[type=password]:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}

/* Kopfleiste: Benutzername ist ein Link zur Passwortseite */
a.header-user { text-decoration: none; transition: var(--transition); }
a.header-user:hover { color: var(--primary-color); }

/* ── Benutzereinstellungen ──────────────────────────────────────────── */
.feld-hinweis { margin: 6px 0 0 30px; }

/* Alarmwege eingerückt unter der Erlaubnis — sie hängen von ihr ab */
.alarm-wege {
    display: flex;
    gap: 22px;
    margin: 12px 0 0 30px;
    transition: opacity 0.2s ease;
}

/* Datumsfeld wie die übrigen Eingaben */
.field input[type=date] {
    padding: 10px 13px;
    background-color: var(--field-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-light);
    font-size: 0.92rem;
    font-family: inherit;
}

.field input[type=date]:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}

.abstand-oben { margin-top: 18px; }

/* Zahlenfeld mit nachgestellter Einheit ("30 Tagen vor Ablauf") */
.feld-mit-einheit { display: flex; align-items: center; gap: 8px; }
.feld-schmal { width: 80px; flex: none; }
.einheit { font-size: 0.85rem; color: var(--text-muted); }

/* ── Alarmierung ────────────────────────────────────────────────────── */
.wd-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }

/* Wochentag als Schalter — kompakter als sieben Zeilen mit Beschriftung */
.wd-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: var(--field-bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.84rem;
    cursor: pointer;
}

.wd-tag:hover { border-color: var(--primary-color); }
.wd-schnell { display: flex; gap: 6px; margin-left: auto; }

/* Zeitfeld wie die übrigen Eingaben */
.field input[type=time] {
    padding: 10px 13px;
    background-color: var(--field-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-light);
    font-size: 0.92rem;
    font-family: inherit;
}

/* ── Sensoralarm ────────────────────────────────────────────────────── */
.field--breit { grid-column: 1 / -1; }

/* Aktueller Wert im Kopf — eingefärbt wie das Symbol der Liste */
.alarm-wert { font-weight: 600; font-variant-numeric: tabular-nums; }
.alarm-wert--ok    { color: #49b58f; }
.alarm-wert--alarm { color: #eb5d7d; }
.alarm-wert--unbek,
.alarm-wert--keiner { color: var(--text-muted); }

.ziel-wahl { display: flex; flex-direction: column; gap: 8px; }
.ziel-wahl .radio { align-items: baseline; }

.ziel-typ {
    flex: none;
    min-width: 62px;
    font-size: 0.76rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.alarm-weg { margin-left: auto; }

/* ── Anmeldung & Sicherheit: die drei Karten nebeneinander (passwort.php) ──
   Passwort, zweiter Faktor und Passkeys sind drei Wege in dasselbe Konto.
   Untereinander stand die Seite drei Bildschirmhöhen hoch, und wer unten die
   Passkeys einrichtete, sah nicht mehr, ob oben 2FA an ist.

   Wie viele Spalten es sind, entscheidet auto-fit selbst: 330px ist die Breite,
   unter der die Karten unschön werden (der QR-Code misst 180px, die Felder
   brauchen Platz für ihre Beschriftung). Bei .page mit 1100px Höchstbreite
   ergibt das drei Spalten ab knapp 1080px Fensterbreite — auf 1280px passen
   sie also —, darunter zwei und ab etwa 700px eine. Mehr als drei kann es
   nicht werden, dafür ist die Seite zu schmal.

   min(330px, 100%) statt 330px: Auf einem Telefon, das schmaler ist als die
   Mindestbreite, würde die Spalte sonst über den Rand hinausstehen. */
/* Die Seitenüberschrift erbt aus style.css (`h1 { padding-left: 20px }`, von
   der BlueBox-Oberfläche mitgebracht) einen Einzug, den die Karten darunter
   nicht haben. Solange nur schmale Formulare untereinander standen, fiel er
   nicht auf — über drei nebeneinanderstehenden Karten schon.

   Nur hier zurückgenommen: Denselben Versatz haben alle Seiten mit .page-title,
   und den überall zu begradigen ist eine eigene Entscheidung, keine Nebenwirkung
   dieses Umbaus. (Dass er stört, sieht man auch an .page-title-row in admin.php,
   die ihn ebenfalls abschaltet.) */
.page-title--ohne-einzug { padding-left: 0; }

.konto-raster {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr));
    gap: 22px;
    align-items: start;              /* jede Karte so hoch wie ihr Inhalt */
    margin-top: 28px;
}

/* Den Abstand macht hier das Raster. Bliebe der Aufschlag der Karte stehen,
   säßen die Karten einer zweiten Zeile weiter auseinander als die der ersten. */
.konto-raster > .panel { margin-top: 0; }

/* In einer Spalte von 330px stehen zwei Knöpfe nebeneinander schnell über dem
   Rand — „Passwort ändern" und „Zurück" gehen auf Deutsch gerade noch aus,
   auf Französisch nicht mehr. Nur hier umbrechen lassen, nicht überall:
   auf den breiten Seiten sollen die Knöpfe in einer Zeile bleiben. */
.konto-raster .form-actions { flex-wrap: wrap; }

/* ── Zwei-Faktor-Authentifizierung (passwort.php) ───────────────────────── */
.twofa-setup {
    display: flex;
    gap: 24px;
    align-items: center;
    flex-wrap: wrap;
    margin: 12px 0 20px;
}
.twofa-qr {
    flex: 0 0 auto;
    background: #fff;              /* QR braucht hellen Grund, unabhängig vom Theme */
    padding: 10px;
    border-radius: 12px;
    line-height: 0;
}
.twofa-qr svg { display: block; width: 180px; height: 180px; }
.twofa-manual { flex: 1 1 220px; }
.twofa-secret {
    font-size: 1.05rem;
    letter-spacing: 0.08em;
    background: var(--nav-bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px 12px;
    display: inline-block;
    user-select: all;             /* ein Klick markiert den ganzen Schlüssel */
}

/* Wiederherstellungscodes: zweispaltig, gut abtippbar */
.recovery-codes {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 6px 18px;
}
.recovery-codes li {
    font-size: 1.05rem;
    letter-spacing: 0.06em;
    user-select: all;
}

/* ── Dashboard: Zahnrad, Ansichtsumschalter, Karte ──────────────────────── */
.card { position: relative; }          /* Anker für das Zahnrad */
.card-gear {
    position: absolute;
    top: 14px;
    inset-inline-end: 14px;            /* rechts (bzw. links im RTL) */
    color: var(--text-muted);
    line-height: 0;
    padding: 4px;
    border-radius: 6px;
    transition: var(--transition);
}
.card-gear:hover { color: var(--primary-color); background: var(--btn-bg); }
.card-title { padding-inline-end: 28px; }   /* Platz neben dem Zahnrad */

/* Rotes Warndreieck bei aktivem Alarm — oben rechts wie das Zahnrad. Ohne
   Zahnrad sitzt es an dessen Platz; mit Zahnrad links daneben. Optik (Farbe,
   Puls) kommt aus .alarm-icon--alarm in bluegate.css. */
.card-alarmzeichen {
    position: absolute;
    top: 14px;
    inset-inline-end: 14px;
    line-height: 0;
}
.card-alarmzeichen--neben-zahnrad { inset-inline-end: 46px; }

/* Das Zeichen steht immer im Markup und wird nur versteckt — die
   Minutenauffrischung (js/dashboard_status.js) blendet es ein und aus.
   hidden muss dafür ausdrücklich gewinnen: .alarm-icon setzt display, und
   eine Klassenregel schlägt die [hidden]-Regel des Browsers. */
.card-alarmzeichen[hidden] { display: none; }
/* Titel darf nicht unter Zahnrad + Warndreieck laufen. */
.card--alarm .card-title { padding-inline-end: 58px; }

/* Ansichts-Umschalter: deutlich sichtbarer Segmented-Control mit Icons */
.view-switch {
    display: inline-flex;
    margin-bottom: 20px;
    padding: 4px;
    gap: 4px;
    background: var(--nav-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
}
.view-switch-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.view-switch-btn svg { opacity: 0.85; }
.view-switch-btn:hover:not(.active) { background: var(--btn-bg); color: var(--text-soft); }
.view-switch-btn.active {
    background: var(--primary-color, #007bff);
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.35);
}
.view-switch-btn.active svg { opacity: 1; }

#overview-map {
    height: 60vh;
    min-height: 360px;
    border-radius: 12px;
    border: 1px solid var(--border-soft);
}
#settings-map {
    height: 320px;
    border-radius: 12px;
    border: 1px solid var(--border-soft);
    margin-bottom: 14px;
}
html[data-theme="dark"] #overview-map .leaflet-tile,
html[data-theme="dark"] #settings-map .leaflet-tile { filter: brightness(0.85) invert(0); }

/* GPS-Eingabe: zwei schmale Felder nebeneinander plus Löschen-Knopf */
.gps-fields {
    display: flex;
    gap: 16px;
    align-items: flex-end;
    flex-wrap: wrap;
}
.gps-fields .feld-schmal { flex: 0 1 160px; }

/* ── Karten-Marker mit Statusfarbe (dashboard.php) ──────────────────────── */
:root {
    --status-online:  #2ecc71;
    --status-offline: #e74c3c;
    --status-unknown: #95a5a6;
    --status-unassigned: #a366d6;   /* violett — deutlich von online/offline/unknown getrennt */
    --status-alarm: #e08a1e;        /* orange — aktiver, gemeldeter Alarm auf der BlueBox */
}
/* Eigenes divIcon statt der fehlenden Leaflet-Marker-PNGs */
.bb-pin { background: none; border: none; }
.bb-pin-dot {
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.35), 0 2px 6px rgba(0,0,0,0.5);
    background: var(--status-unknown);
}
.bb-pin--online  .bb-pin-dot { background: var(--status-online); }
.bb-pin--offline .bb-pin-dot { background: var(--status-offline); }
.bb-pin--unknown .bb-pin-dot { background: var(--status-unknown); }
.bb-pin--alarm   .bb-pin-dot { background: var(--status-alarm); }

/* Statuszeile im Popup */
.bb-pin-status { font-weight: 600; }
.bb-pin-status--online  { color: #1e8a4c; }
.bb-pin-status--offline { color: #c0392b; }
.bb-pin-status--unknown { color: #7f8c8d; }
.bb-pin-status--alarm   { color: var(--status-alarm); }

/* Filterreihe über der Karte — identisch zu den Statusfiltern der Liste.
   Kein margin-bottom mehr: die Reihe sitzt jetzt in .list-toolbar, und dort
   schöbe ein Abstand nach unten sie gegenüber dem Suchfeld nach oben. Den
   Abstand zur Karte gibt die Toolbar selbst vor. */
#dash-map .filter-row { margin-bottom: 0; }
#dash-map .filter-btn { display: inline-flex; align-items: center; gap: 6px; }
#dash-map .filter-btn .legend-dot { width: 11px; height: 11px; border-width: 1px; }

/* Farbpunkt der Status-/Filter-Chips (Karte, Liste, Karten-Filterreihe). */
.legend-dot {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.25);
}
.legend-dot--online  { background: var(--status-online); }
.legend-dot--offline { background: var(--status-offline); }
.legend-dot--unknown { background: var(--status-unknown); }
.legend-dot--unassigned { background: var(--status-unassigned); }
.legend-dot--alarm { background: var(--status-alarm); }

/* ── Status-Badge in der BlueBox-Karte (dashboard.php Liste) ─────────────── */
.card-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: -8px 0 16px;
    font-size: 0.82rem;
    font-weight: 600;
}
.card-status--online  { color: #1e8a4c; }
.card-status--offline { color: #c0392b; }
.card-status--unknown { color: var(--text-muted); }
.card-status--unassigned { color: var(--status-unassigned); }
.card-status--alarm { color: var(--status-alarm); }
/* Testzugang (dashboard.php): blau wie ein Hinweis, kein Zustand des Geräts.
   Kurz vor Ablauf orange, damit es auffällt, solange noch Zeit ist. */
.card-status--test { color: #3498db; }
.legend-dot--test { background: #3498db; }
/* Wartungsvertrag (dashboard.php): grüner Punkt in der Statuszeile der
   Kachel und im Filter. Ohne Vertrag erscheint nichts. */
.card-status--wv { color: #4cd07d; }
.legend-dot--wv  { background: #4cd07d; }
.card-status--test-bald { color: #f0ad4e; }
.card-status--test-bald .legend-dot--test { background: #f0ad4e; }

/* Aktiver Alarm färbt die ganze Karte orange: oranger Rand mit Innenring
   (wirkt wie 2px, ohne das Layout zu verschieben) und farbiger Schlagschatten.
   Der Rand bleibt auch beim Hover orange und verdrängt nicht die Blaufärbung. */
.card--alarm,
.card--alarm:hover {
    border-color: var(--status-alarm);
    box-shadow: 0 0 0 1px var(--status-alarm), 0 6px 20px rgba(224, 138, 30, 0.30);
}

/* Online-Status und „Kein Kunde" nebeneinander statt untereinander.
   Der Abstand wandert von der einzelnen .card-status auf die Zeile. */
.card-status-row { display: flex; align-items: center; gap: 14px; margin: -8px 0 16px; flex-wrap: wrap; }
.card-status-row .card-status { margin: 0; }

/* Statusfilter-Knöpfe: farbiger Punkt vor dem Text */
#dash-list .filter-btn { display: inline-flex; align-items: center; gap: 6px; }
#dash-list .filter-btn .legend-dot { width: 11px; height: 11px; border-width: 1px; }

/* ── Positions-Marker in bluebox_settings.php (roter Punkt) ─────────────── */
.settings-pin { background: none; border: none; }
.settings-pin-dot {
    display: block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #e74c3c;                 /* rot */
    border: 3px solid #fff;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.35), 0 2px 6px rgba(0,0,0,0.5);
    cursor: grab;
}

/* Überschrift mit dem Rückweg davor (admin.php): eine Zeile, der Knopf links
   am Inhaltsrand, die Überschrift dahinter — dieselbe Anordnung wie in
   .page-header-row der Setup-Seiten, nur mit der größeren .page-Überschrift.
   Die Überschrift braucht dazu .page-title--ohne-einzug, sonst kommt ihr
   Einzug aus style.css zum Abstand der Zeile hinzu. */
.page-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ── BlueBox-Anlage: Status offener/fehlgeschlagener Aufträge ─────────── */
.prov-list { margin: 12px 0 4px; display: flex; flex-direction: column; gap: 8px; }
.prov-item {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
    padding: 8px 12px;
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    background-color: var(--nav-bg);
}
.prov-item .inline { margin: 0; }
.prov-msg { font-size: 0.8rem; color: var(--text-muted); flex: 1 1 100%; }

/* ── Berechtigungen in Spalten ───────────────────────────────────────────
   Untereinander wurde die Liste zu hoch: in admin_kunde.php riss sie die
   Stammdaten-Karte auseinander und schob den Speichern-Knopf neben die
   Kästchen, in subuser_setup.php überragte sie den ganzen Rest des Formulars.
   Wie viele Spalten es sind, entscheidet die Seite über den Modifikator —
   der Admin hat sieben Einträge, der Kunde fünf. */
.field--rechte { grid-column: 1 / -1; }

.rechte-raster {
    display: grid;
    gap: 6px 18px;
    width: 100%;
}

.rechte-raster--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rechte-raster--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Kästchen und der Vermerk „für Ihr Konto nicht freigegeben" gehören in
   dieselbe Rasterzelle, sonst rutschte der Vermerk in die nächste Spalte. */
.rechte-eintrag { display: flex; align-items: center; gap: 10px; min-width: 0; }

@media (max-width: 820px) { .rechte-raster--drei { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) {
    .rechte-raster--drei,
    .rechte-raster--zwei { grid-template-columns: minmax(0, 1fr); }
}

/* Stammdaten (admin_kunde.php): Firmenname und die vier Kontingente in EINE
   Zeile.

   Das auto-fit-Raster gab jedem Feld dieselbe Spur von mindestens 220 px und
   brach nach dem vierten um — die Berichte standen als fünftes Feld allein in
   der zweiten Zeile, neben drei leeren Spalten. Die Zahlenfelder brauchen so
   viel Platz aber gar nicht: 140 px fassen die längste Beschriftung
   („Virtuelle Sensoren“), und was übrig bleibt, geht an den Firmennamen.

   Das OEM-Logo wird dabei auf Spalte 2 bis zum Ende gesetzt: Sein bisheriges
   `span 2` wären hier zwei SCHMALE Spuren, und Datei-Feld samt Knopf passen
   nicht in 296 px. */
/* Vorn die Kundennummer (schmal, wie die Kontingente), dann der Firmenname.
   In der zweiten Zeile nimmt die OEM-Domain die beiden ersten Spuren ein,
   damit sie so breit bleibt wie vorher unter dem Firmennamen allein. */
.form-grid--stamm { grid-template-columns: 140px minmax(200px, 1fr) repeat(4, 140px); }
.form-grid--stamm .field--oem-domain { grid-column: 1 / 3; }
.form-grid--stamm .field--oem-logo { grid-column: 3 / -1; }

/* Unter rund 1080 px Fensterbreite gehen die sechs Spalten nicht mehr auf
   (140 + 200 + 4×140 + Abstände brauchen rund 980 px im Panel). Dann gilt wieder das
   gewohnte Raster, und die Zeile bricht eben um. */
@media (max-width: 1080px) {
    .form-grid--stamm { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
    .form-grid--stamm .field--oem-logo { grid-column: span 2; }
    .form-grid--stamm .field--oem-domain { grid-column: auto; }
}

/* Kontingentfelder (SubUser, virtuelle Sensoren, Dashboards, Berichte):
   Höchstens vier Ziffern. Über die ganze Rasterspur gezogen sah das Feld aus,
   als gehöre ein Satz hinein — und vier solche Felder untereinander machten
   den Eindruck, die Stammdaten bestünden vor allem aus Zahlen.

   Breite wie .offline-wait in bluegate.css, die dieselben vier Ziffern fasst.
   box-sizing steht hier nicht global auf border-box, die Polsterung von
   .field input kommt also hinzu. Die Rasterspur bleibt, damit Label und Feld
   in der Spalte ihrer Nachbarn stehen. */
.field--zahl input[type=text] { width: 62px; }

/* ── OEM-Logo im Stammdaten-Formular (admin_kunde.php) ──────────────────
   Vorschau, Datei-Feld und „Hochladen" sitzen in derselben Rasterzelle wie
   sonst ein Eingabefeld — gleich neben der OEM-Domain. Dafür zwei Spalten des
   Rasters: Datei-Feld und Knopf stehen nebeneinander, und in einer einzelnen
   220px-Spalte wäre für beide kein Platz. */
.field--oem-logo { grid-column: span 2; }

.oem-logo-vorschau {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 8px;
    min-width: 0;
}

.oem-logo-vorschau img { max-width: 150px; max-height: 44px; }

/* Knopf rechts neben der Dateiauswahl, auf gleicher Höhe (stretch) — sonst
   saß er kleiner und tiefer als das Feld daneben. */
.oem-logo-zeile {
    display: flex;
    align-items: stretch;
    gap: 8px;
    min-width: 0;
}

.oem-logo-zeile .btn {
    display: inline-flex;
    align-items: center;
    flex: none;
    padding: 0 18px;
    white-space: nowrap;
}

/* Das Datei-Feld trägt sonst den Rahmen aus style.css (input { border: 2px
   solid #ccc }) und die native, hellgraue Schaltfläche — neben den dunklen
   Textfeldern des Rasters ein Fremdkörper. Deshalb dieselbe Polsterung, derselbe
   Rahmen und dieselbe Rundung wie .field input[type=text], die Schaltfläche
   darin als flacher Knopf.

   Die Höhe bestimmt hier die eingebaute Schaltfläche: sie zählt zur Zeile des
   Feldes, und mit eigener senkrechter Polsterung wurde das Feld höher als das
   Textfeld daneben (OEM-Domain). Deshalb bekommt sie keine und beide eine
   feste Zeilenhöhe — so bleibt die Höhe rechnerisch dieselbe. */
.panel .field input[type=file] {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    padding: 11px 13px;
    background-color: var(--field-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-light);
    font-size: 0.85rem;
    line-height: 1.2;
    cursor: pointer;
}

.panel .field input[type=file]:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0,123,255,0.25);
}

.panel .field input[type=file]::file-selector-button {
    margin-right: 10px;
    padding: 0 11px;
    line-height: 1.25;
    background-color: var(--btn-bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-light);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
}

.panel .field input[type=file]::file-selector-button:hover {
    background-color: var(--btn-bg-hover);
}

/* Nebeneinander wird es unter ~620px zu eng: dort untereinander, der Knopf
   linksbündig wie der Rest des Formulars. */
@media (max-width: 620px) {
    .oem-logo-zeile { flex-direction: column; align-items: flex-start; }
    .oem-logo-zeile .btn { padding: 8px 16px; }
}

/* ── „Bezahlt bis" in der Abrechnung (abrechnung.php) ───────────────────
   Die Zelle zeigt Text; der Doppelklick tauscht ihn gegen das Eingabefeld
   (js/abrechnung_bis.js). Der Zeiger sagt vorher, dass an der Zelle etwas zu
   holen ist — ein Knopf je Zeile wäre in einer Spalte aus Datumsangaben nur
   Lärm gewesen. */
.abr-bis { cursor: cell; }

.abr-bis form { margin: 0; }

/* So breit wie das Datum plus Kalendersymbol, und nicht breiter: die Spalte
   soll beim Aufklappen nicht springen. */
.abr-bis-input {
    width: 118px;
    padding: 6px 8px;
    background-color: var(--field-bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-light);
    font-size: 0.85rem;
}

.abr-bis-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0,123,255,0.25);
}

/* ── Passkeys (passwort.php) ────────────────────────────────────────────
   Eine Zeile je Schlüssel: Name links, Herkunft und Daten darunter, der
   Entfernen-Knopf rechts. Auf schmalen Schirmen rutscht er unter den Namen,
   statt die Zeile zu sprengen. */
.passkey-liste { margin: 0 0 18px; padding: 0; list-style: none; }

.passkey-zeile {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}

.passkey-zeile:last-child { border-bottom: 0; }

.passkey-name { flex: 1 1 200px; min-width: 0; color: var(--text-light); font-weight: 600; }

.passkey-info {
    flex: 1 1 100%;
    order: 3;                       /* immer unter dem Namen, nie daneben */
    font-size: .78rem;
    color: var(--text-muted);
}

/* Ein Schlüssel für eine andere Adresse ist hier nicht zu gebrauchen — das
   soll man sehen, ohne die Domains zu vergleichen. */
.passkey-fremd { color: #ffb454; }

.passkey-weg { margin: 0; }

/* ── Aufklappbare „Neu anlegen"-Maske (admin.php) ─────────────────────────
   Die Maske stand als Block am Seitenende; jetzt steckt sie hinter einem
   Knopf über der Liste. Das Aufklappen macht <details> selbst — hier bleibt
   nur, aus dem <summary> einen Knopf zu machen: Dreieck weg, .btn-Aussehen
   erbt es aus der Klasse am Element. */
.neu-panel { margin: 0 0 16px; }

.neu-panel > summary {
    display: inline-block;   /* sonst füllt es die Zeile und der Knopf wird breit */
    list-style: none;        /* Firefox: Dreieck weg */
    user-select: none;
}
.neu-panel > summary::-webkit-details-marker { display: none; }
.neu-panel > summary::marker { content: ''; }

/* Zugeklappt hängt der Knopf allein da; aufgeklappt braucht der Inhalt darunter
   etwas Luft. Der Abstand hängt am Knopf, damit er für beide Fälle gilt: eine
   eigene Karte darunter (admin.php) und Felder ohne Karte, weil die Maske schon
   in einer steht (admin_kunde.php). */
.neu-panel[open] > summary { margin-bottom: 14px; }
.neu-panel[open] > .panel { margin-top: 0; }

/* Feld in einer Tabellenzelle (admin_kunde.php: Login-Name und Name eines
   Kontos). Schmaler als ein Formularfeld und ohne den globalen linken Rand aus
   style.css, damit die Zelle nicht auseinanderläuft. Werte wie .abr-bis-input,
   nur in der Breite der Spalte. */
.tbl-input {
    width: 100%;
    max-width: 220px;
    margin-left: 0;
    padding: 6px 8px;
    box-sizing: border-box;
    background-color: var(--field-bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-light);
    font-family: inherit;
    font-size: 0.85rem;
}

.tbl-input.mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.tbl-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}

/* ── Sprachwahl im Kopf ───────────────────────────────────────────────────
   Das Auswahlfeld steckt seit der serverseitigen Umschaltung in einem
   Formular (sprache.php). Es soll aussehen wie vorher — also kein Umbruch
   und kein zusätzlicher Abstand durch das <form>. */
.lang-form {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}

/* Nur für den Fall ohne JavaScript; das Skript im Kopf blendet ihn aus. */
.lang-go {
    padding: 4px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--nav-bg);
    color: var(--text-light);
    font-size: 0.8rem;
    cursor: pointer;
}

/* ── Sicherheitshinweise (security.php, admin_security.php) ─────────
   Öffentliche Seite ohne Menü: Logo als Kopf, darunter die Liste wie bei den
   Advisory-Seiten anderer Hersteller. Der Schweregrad folgt den Stufen von
   CVSS v3.1 (FIRST): keiner, niedrig, mittel, hoch, kritisch. */
.sa-kopf { padding: 18px 24px 0; display: flex; align-items: center; justify-content: space-between; max-width: 1100px; }
.sa-sprachen { display: flex; gap: 14px; font-size: 0.85rem; }
.sa-sprachen a { color: var(--text-muted); text-decoration: none; }
.sa-sprachen a:hover { color: var(--primary-color); }
.sa-sprache--aktiv { color: var(--text-light); font-weight: 600; }
.sa-logo { height: 48px; width: auto; }
.sa-seite a { color: var(--primary-color); }
.sa-tabelle { overflow-x: auto; }
.sa-badge { margin-top: 4px; }
.sa-badge--none     { background-color: rgba(160,160,160,0.18); color: var(--text-muted); }
.sa-badge--low      { background-color: rgba(40,167,69,0.18);   color: #4cd07d; }
.sa-badge--medium   { background-color: rgba(240,173,78,0.18);  color: #f0ad4e; }
.sa-badge--high     { background-color: rgba(231,76,60,0.18);   color: #ff7a6b; }
.sa-badge--critical { background-color: rgba(142,36,170,0.22);  color: #d68cff; }
.sa-kopfdaten { margin: 18px 0 8px; max-width: 900px; }
.sa-kopfdaten th { width: 210px; text-align: left; }
.sa-abschnitt { font-size: 1.1rem; margin: 26px 0 8px; }
.sa-liste { margin: 0; padding-left: 20px; }
.sa-verlauf { white-space: pre-wrap; }
.sa-hinweis { margin-top: 28px; }
/* Mehrzeilige Felder im Pflegeformular wie die Textfelder darüber. */
.sa-form .field textarea {
    padding: 11px 13px;
    background-color: var(--field-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-light);
    font-size: 0.92rem;
    font-family: inherit;
    line-height: 1.5;
    resize: vertical;
}
.sa-form .field textarea.mono { font-family: 'Cascadia Code', Consolas, monospace; }
.sa-form .field textarea:focus { outline: none; border-color: var(--primary-color); }
.sa-form .field { margin-bottom: 14px; }