/*
 * Die Grautöne stammen aus dem Erscheinungsbild des Hauses, das Rot ist die Hausfarbe. Weil Rot hier
 * „Hauptsache“ heißt und nicht „Vorsicht“, bleiben Flächen grau und neutral: Farbe bekommt nur, was
 * eine Entscheidung verlangt oder einen Zustand meldet.
 */
:root {
  --bg: #f4f3f1;
  --card: #fff;
  --text: #33322f;
  --muted: #706f6f;
  --line: #e2e0dc;
  --line-stark: #cfccc7;
  --accent: #e30613;
  --accent-weich: #fdf0f0;
  --ok: #2e7d32;
  --warn: #b26a00;
  --danger: #8d1d17;
  --rund: 12px;
  /* Höhe aller Bedienelemente, die in einer Zeile nebeneinander stehen können */
  --feldhoehe: 34px;
  /* Fläche der offenen Navigationsmenüs – heller als die Leiste, damit Reiter und Karte als ein
     erhabener Körper darüber liegen. */
  --menueflaeche: #5a5a58;
  --schatten: 0 1px 2px rgba(31, 28, 24, .05), 0 1px 3px rgba(31, 28, 24, .04);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
body { margin: 0; }
/*
 * `hidden` muss stärker sein als jedes `display` aus dem Stylesheet. Sonst hat ein Element mit
 * `display: grid` das Attribut zwar gesetzt, steht aber trotzdem da – so geschehen beim
 * Drei-Punkte-Menü, das dauerhaft offen war. Die Regel des Browsers ist nur eine Voreinstellung
 * und verliert gegen jede eigene.
 */
[hidden] { display: none !important; }
header {
  display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
  padding: .7rem 1.25rem; background: #4a4a49; color: #fff;
  border-bottom: 3px solid var(--accent);
}
header h1 { font-size: 1.05rem; margin: 0; font-weight: 600; letter-spacing: .01em; }
/* Mehr Luft zwischen den fünf Oberpunkten – bei fünf Punkten ist der Platz da, und die Trennung
   wird dadurch ohne Striche deutlich. */
header nav { display: flex; gap: .4rem; flex-wrap: wrap; }
header nav button {
  background: transparent; color: #d7d5d1; border: 0; padding: .4rem .85rem; border-radius: 999px;
  transition: background-color .12s ease, color .12s ease;
}
header nav button:hover { background: rgba(255, 255, 255, .12); color: #fff; }
header nav button.active { background: var(--accent); color: #fff; font-weight: 600; }
/* Der eigene Name rückt nach rechts, seit die Server-Adressen in der Fußzeile stehen. */
header .wer { margin-left: auto; }

/* --- Rumpf: Seitenleiste neben dem Inhalt --------------------------------- */

/*
 * Die Unterpunkte der gewählten Kategorie stehen links und bleiben stehen. Kein Klappmenü mehr:
 * Ein Menü zeigt immer nur das eine, das gerade offen ist – wo man steht und was es sonst noch
 * gibt, sieht man nie zugleich.
 */
#rumpf { display: flex; align-items: flex-start; min-height: 60vh; }
#rumpf > main { flex: 1; min-width: 0; }

#unternav {
  flex: 0 0 13rem;
  display: grid;
  gap: .15rem;
  align-content: start;
  padding: .9rem .6rem;
  /* Klebt beim Scrollen mit: Bei einer langen Geräteliste wäre eine Leiste, die oben
     zurückbleibt, nach dem ersten Bildlauf nutzlos. */
  position: sticky;
  top: 0;
  background: var(--card);
  border-right: 1px solid var(--line);
  min-height: 100%;
}
#unternav button {
  text-align: left; border: 0; background: transparent; border-radius: 8px; min-height: 0;
  padding: .45rem .7rem; color: var(--text); font-size: .9rem;
}
#unternav button:hover { background: var(--bg); }
#unternav button.active { background: var(--accent); color: #fff; font-weight: 600; }
/* Die Zwischenüberschrift ist kein Knopf und darf auch nicht so aussehen. */
#unternav .leistenkopf {
  display: block;
  padding: .9rem .7rem .25rem;
  font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted);
}
#unternav .leistenkopf:first-child { padding-top: .2rem; }

/* Schmaler Bildschirm: Die Leiste legt sich als Zeile über den Inhalt, statt ihn zu erdrücken. */
@media (max-width: 800px) {
  #rumpf { display: block; }
  #unternav {
    display: flex; flex-wrap: wrap; position: static; min-height: 0;
    border-right: 0; border-bottom: 1px solid var(--line);
  }
  #unternav .leistenkopf { width: 100%; padding-top: .4rem; }
}

/* --- Fußzeile mit den Server-Adressen ------------------------------------- */

/*
 * Nicht `position: fixed`: Eine festgenagelte Leiste nimmt auf einem 13-Zoll-Bildschirm dauerhaft
 * Platz weg, den die Geräteliste besser gebrauchen kann. Die Angaben liest man einmal beim
 * Einrichten – dafür genügt es, ans Ende zu scrollen.
 */
#serverfuss {
  margin-top: 2rem;
  padding: .85rem 1.25rem;
  border-top: 1px solid var(--line);
  background: var(--bg);
  font-size: .8rem;
}
#serverfuss .muted { color: var(--muted); }

/*
 * Die Klappmenüs der Hauptnavigation sind am 21.09.2026 entfallen. Mit ihnen gingen rund fünfzig
 * Zeilen Stilregeln für eine Form, die nur dazu diente, etwas zu verbergen – Karteireiter mit
 * angehängter Karte, gemeinsame Fläche, verschwindende Kante. Die Unterpunkte stehen jetzt in der
 * Seitenleiste (#unternav) und sind immer sichtbar; die Kopfzeile trägt nur noch Oberpunkte.
 */

.kontoknopf {
  background: transparent; color: #d7d5d1; border: 1px solid rgba(255, 255, 255, .25);
  padding: .3rem .8rem; border-radius: 999px; margin-left: .5rem;
}
.kontoknopf:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.kontoknopf.active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
main { padding: 1.25rem; }
h2 { font-size: 1.05rem; margin: 0 0 .75rem; font-weight: 600; letter-spacing: -.005em; }
h3 { font-size: .95rem; margin: 1.25rem 0 .5rem; font-weight: 600; }
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--rund);
  padding: 1.1rem 1.25rem; overflow-x: auto; box-shadow: var(--schatten);
}
.narrow { max-width: 720px; }
.split { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
@media (max-width: 1000px) { .split { grid-template-columns: 1fr; } }
.muted { color: var(--muted); }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .5rem .55rem; border-bottom: 1px solid var(--line); vertical-align: top; }
/* Zahlenspalten sollen untereinander stehen – sonst springt die Breite von Zeile zu Zeile. */
td { font-variant-numeric: tabular-nums; }
th {
  font-weight: 600; color: var(--muted); font-size: .72rem; text-transform: uppercase;
  letter-spacing: .05em; border-bottom-color: var(--line-stark);
}
tbody tr.clickable { cursor: pointer; }
tbody tr.clickable:hover { background: #faf9f8; }
tbody tr.selected { background: var(--accent-weich); box-shadow: inset 3px 0 0 var(--accent); }
button {
  font: inherit; padding: .4rem .85rem; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--line-stark); background: #fff; color: var(--text);
  transition: border-color .12s ease, background-color .12s ease;
}
button:hover { border-color: var(--accent); }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
a:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}
button[type="submit"], #install-btn, #token-btn { background: var(--accent); border-color: var(--accent); color: #fff; }
/*
 * Die Hausfarbe ist rot – damit sieht ein gefüllter roter Knopf nicht mehr nach „Vorsicht“ aus,
 * sondern nach „Hauptaktion“. Zerstörerisches unterscheidet sich deshalb durch die **Form**: weiß
 * hinterlegt mit dunkelrotem Rand, nie gefüllt. Sonst stünden Speichern und Löschen gleich aussehend
 * nebeneinander.
 */
button.warn, button.danger { color: var(--danger); background: #fff; border-color: var(--danger); font-weight: 600; }
button.warn:hover, button.danger:hover { background: #fdf2f2; border-color: var(--danger); }
input, select, textarea {
  font: inherit; padding: .4rem .55rem; border: 1px solid var(--line-stark); border-radius: 8px;
  background: #fff; color: inherit;
}
/*
 * Gleiche Höhe für alles, was nebeneinander in einer Zeile stehen kann. Auswahlfelder rechneten
 * ihre Höhe vorher aus der Schrift und blieben 3 px unter Eingaben und Knöpfen – sichtbar, sobald
 * beides nebeneinander steht. Fester Wert statt rem: Die Wurzelgröße ist hier 14 px, `2.15rem` wären
 * 30 px gewesen – also wieder zu wenig.
 */
input, select, button, .searchpicker-eingabe { min-height: var(--feldhoehe); }
select { line-height: 1.25; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); outline: none; }
textarea { width: 100%; font-family: ui-monospace, monospace; font-size: .85rem; }
label { display: block; margin: .4rem 0; }
fieldset { border: 1px solid var(--line); border-radius: 8px; margin: .75rem 0; }
.row { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin: .5rem 0; }
/* Blättern unter einer Tabelle: Seitenangabe mittig zwischen den beiden Knöpfen. */
.blaetterzeile { justify-content: space-between; margin-top: .75rem; }
.actions { display: flex; gap: .4rem; flex-wrap: wrap; margin: .5rem 0 .75rem; }
.dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; background: #cbd5e1; }
.dot.on { background: var(--ok); }
.badge {
  display: inline-block; padding: .1rem .5rem; border-radius: 999px; font-size: .72rem;
  font-weight: 600; letter-spacing: .01em; background: #e9e7e3; color: #4a4a49;
}
.badge.ok { background: #dcfce7; color: #166534; }
.badge.error { background: #fee2e2; color: #991b1b; }
.badge.pending, .badge.sent { background: #fef3c7; color: #92400e; }
.badge.stale { background: #fee2e2; color: #991b1b; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1rem; margin: 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; word-break: break-all; }
.apps { max-height: 260px; overflow: auto; font-size: .85rem; padding-left: 1.1rem; }
.warnings { color: var(--warn); padding-left: 1.1rem; }
code, pre { font-family: ui-monospace, monospace; font-size: .85rem; background: #f1efec; padding: .1rem .3rem; border-radius: 5px; }
pre { padding: .75rem; overflow-x: auto; white-space: pre-wrap; word-break: break-all; }
#qr-img { display: block; margin: 1rem 0; max-width: 100%; border: 1px solid var(--line); border-radius: 8px; }
#toast {
  position: fixed; right: 1rem; bottom: 1rem; max-width: 420px;
  padding: .75rem 1rem; border-radius: 8px; background: #111827; color: #fff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .2);
}
#toast.error { background: var(--danger); }

/* --- Gruppen ------------------------------------------------------------ */
/* C4 (18.09.2026): stand auf .9rem = 12,6 px – kleiner als der Fließtext mit 14 px. */
h4 { font-size: 1rem; margin: 1rem 0 .4rem; }
.small { font-size: .8rem; }
.mono { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; }
/* Abgelaufen oder kein CA-Zertifikat: kein Schönheitsfehler, sondern unbrauchbar. */
td.danger, .danger.small { color: var(--danger); }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
button:disabled { opacity: .55; cursor: default; }
/* C2 (18.09.2026): War gespiegelt – 1fr/1.4fr, während alle anderen Reiter 1.4fr/1fr haben. Beim
   Wechseln sprang die Trennlinie. Jetzt überall dieselbe Aufteilung; die Klasse bleibt als Anker. */
.split-groups { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.split-groups > div > .card + .card { margin-top: 1rem; }
@media (max-width: 1000px) { .split-groups { grid-template-columns: 1fr; } }
.group-list { list-style: none; margin: 0; padding: 0; max-height: 60vh; overflow-y: auto; border-top: 1px solid var(--line); }
.group-list li { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; padding: .35rem .5rem; border-bottom: 1px solid var(--line); }
.group-list li.group-item { cursor: pointer; }
.group-list li.group-item:hover { background: #faf9f8; }
.group-list li.group-item.selected { background: var(--accent-weich); box-shadow: inset 3px 0 0 var(--accent); }
.group-list li.group-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.group-list li.context .group-name { color: var(--muted); font-style: italic; }
.group-list li.group-heading { background: #f4f3f1; color: var(--muted); font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.group-list .group-meta { margin-left: auto; }
.badge.kind-region { background: #dbeafe; color: #1e40af; }
.badge.kind-haus { background: #ede9fe; color: #5b21b6; }
.badge.kind-funktion { background: #ccfbf1; color: #115e59; }
.badge.kind-test { background: #fef3c7; color: #92400e; }
.badge.kind-alle { background: #e5e7eb; color: #374151; }
.checklist { max-height: 240px; overflow-y: auto; border: 1px solid var(--line); border-radius: 6px; padding: .25rem .5rem; }
.checklist label { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin: .2rem 0; }
.checklist p { margin: .4rem 0; }
/* Mehrspaltig, solange Platz ist – bei 16 Einschränkungen spart das viel Scrollen. */
.tri-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(23rem, 1fr)); gap: 0 1.5rem; align-items: start; }
.tri-grid > label, .tri-grid > div { display: grid; grid-template-columns: minmax(10rem, 1fr) minmax(0, 14rem); gap: .75rem; align-items: center; margin: .3rem 0; }
.tri-grid > .wide { grid-column: 1 / -1; grid-template-columns: 1fr; gap: .25rem; }
/* App-Steuerung: zwei Auswahllisten nebeneinander, sobald genug Platz ist */
@media (min-width: 60rem) { .tri-grid > .halb { grid-column: span 2; } }
.tri-grid select, .tri-grid input[type="text"] { width: 100%; }
.tri-grid .row { margin: 0; }
.tri-grid .row input[type="number"] { width: 5.5rem; }
.tri-grid .update-window { margin-top: .4rem; }
.tri-grid .update-window label { display: inline-flex; align-items: center; gap: .35rem; margin: 0; }
.pkg-picker { display: grid; gap: .4rem; }
.pkg-head input[type="search"] { flex: 1 1 12rem; }
.pkg-system { display: inline-flex; align-items: center; gap: .35rem; margin: 0; white-space: nowrap; }
.pkg-list { max-height: 15rem; overflow-y: auto; border: 1px solid var(--line); border-radius: 6px; padding: .25rem; }
.pkg-row { display: grid; grid-template-columns: auto auto 1fr; gap: .5rem; align-items: center; margin: 0; padding: .25rem .35rem; border-radius: 4px; }
.pkg-icon { width: 24px; height: 24px; border-radius: 5px; object-fit: contain; }
.pkg-icon-leer { background: rgba(127, 127, 127, .15); }
.pkg-icon-letter { display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 600; font-size: .8rem; line-height: 1; }
.app-summary .pkg-icon-letter { font-size: 1rem; }
#map { height: 55vh; min-height: 320px; border-radius: 8px; margin: .5rem 0; }
.device-picker { display: grid; gap: .4rem; max-width: 34rem; margin: .5rem 0; }
.device-picker #locate-device-list { max-height: 14rem; }
.device-picker p { margin: 0; }
#message-group-search { width: 100%; max-width: 24rem; margin: .3rem 0; }
.app-row { display: grid; grid-template-columns: auto minmax(10rem, 2fr) minmax(9rem, 1.2fr) minmax(8rem, 1fr); gap: .75rem; align-items: center; width: 100%; text-align: left; font: inherit; color: inherit; background: none; border: 1px solid var(--line); border-radius: 8px; padding: .5rem; margin: .4rem 0; cursor: pointer; }
.app-row:hover { background: rgba(127, 127, 127, .08); }
.app-row .pkg-icon { width: 32px; height: 32px; }
.app-source { border-top: 1px solid var(--line); margin-top: .75rem; padding-top: .5rem; }
.app-source input[type="url"] { flex: 1 1 22rem; }
@media (max-width: 60rem) { .app-row { grid-template-columns: auto 1fr; } }

#app-dialog { width: min(60rem, 92vw); border: 1px solid var(--line); border-radius: 10px; padding: 1rem; color: inherit; }
#app-dialog::backdrop { background: rgba(0, 0, 0, .45); }
#app-dialog h2 { margin: 0; }
#app-dialog table { margin-top: .25rem; }
.dialog-head { display: grid; grid-template-columns: auto 1fr auto; gap: .75rem; align-items: center; margin-bottom: .75rem; }
.dialog-head .pkg-icon { width: 40px; height: 40px; }
.dialog-close { background: none; border: none; font-size: 1.2rem; line-height: 1; cursor: pointer; color: inherit; padding: .25rem .5rem; }
.pkg-row:hover { background: rgba(127, 127, 127, .12); }
.pkg-leer { padding: .5rem; }
.tri-grid .pkg-picker input[type="text"] { width: auto; flex: 1 1 12rem; }

.drift { color: var(--warn); font-weight: 600; }
.picker-block { display: grid; gap: .35rem; justify-items: start; margin: .75rem 0; }
.picker-block .device-picker { margin: 0; width: 100%; }

/* --- Untertabs im Gerätedetail ------------------------------------------ */
.subtabs { display: flex; gap: .1rem; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin: .9rem 0 .75rem; }
.subtabs button { background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: .4rem .7rem; color: var(--muted); }
.subtabs button:hover { color: var(--text); border-color: transparent; }
.subtabs button.active { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; }
.subtabs button.mark::after { content: "●"; color: var(--warn); font-size: .6rem; vertical-align: super; margin-left: .25rem; }
.subpane > h3:first-child { margin-top: 0; }
/* Abschnittstabs im Richtlinienformular: dieselbe Gestaltung wie jede andere Tableiste – im Gruppendetail
   trennen Überschrift und Einleitung die beiden Reihen bereits deutlich genug. */
.section-tabs { margin: 0 0 .75rem; }
.section-tabs ~ fieldset { margin-top: 0; } /* gleicher Abstand, egal welcher Abschnitt sichtbar ist */

/* Zweite Zeile unter einem WPA-Enterprise-Netz: vier Felder, die nur für diesen Fall gelten. */
tr.eap-zeile > td { border-bottom: 1px solid var(--line); padding-top: 0; }
.eap-felder { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.eap-felder label { display: grid; gap: .15rem; margin: 0; font-size: .85rem; color: var(--muted); }
.eap-felder select, .eap-felder input { min-width: 13rem; }

/* Darstellungsstufen einer Durchsage: untereinander, weil jede eine Erklärung braucht. */
.stufen { display: grid; gap: .35rem; margin: .5rem 0 .75rem; }
.stufen label { display: grid; grid-template-columns: auto 1fr; gap: .1rem .5rem; margin: 0; align-items: start; }
.stufen input { grid-row: span 2; align-self: center; }
.stufen .hilfe { grid-column: 2; font-size: .8rem; color: var(--muted); }
/* Vorschau des Benachrichtigungssymbols in der gewählten Farbe */
.msg-vorschau { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; color: var(--muted); }
.msg-vorschau svg { width: 1.4rem; height: 1.4rem; }

/* Knopf, der wie ein Link aussieht – für Zahlen, hinter denen eine Liste steckt. */
button.link { background: none; border: 0; padding: 0; color: var(--accent); text-decoration: underline; font-size: inherit; }
button.link:hover { color: var(--text); }

/* --- Formulare der App-Konfiguration ------------------------------------ */
/* Die App-Auswahl ist eine Suchliste wie in der App-Steuerung, keine Klappliste. */
.ac-appwahl { max-width: 40rem; margin-bottom: .5rem; }
.ac-appwahl .pkg-list { max-height: 14rem; }
/* Feldzeilen: Beschriftung links, Bedienelement rechts; verschachteltes nimmt die volle Breite. */
.ac-felder { display: grid; gap: .1rem; }
.ac-zeile { display: grid; grid-template-columns: minmax(12rem, 1fr) minmax(0, 20rem) auto; gap: .75rem;
            align-items: start; padding: .4rem 0; border-bottom: 1px solid var(--line); }
.ac-zeile.breit { grid-template-columns: 1fr; }
.ac-titel { font-weight: 600; }
.ac-zeile input[type="text"], .ac-zeile input[type="password"], .ac-zeile input[type="number"],
.ac-zeile select, .ac-zeile textarea { width: 100%; }
.ac-mehrzeilig { display: grid; gap: .2rem; }
.ac-mehrzeilig label { display: flex; align-items: center; gap: .35rem; margin: 0; }
.ac-liste { display: grid; gap: .5rem; margin-top: .4rem; }
.ac-liste details { border: 1px solid var(--line); border-radius: 8px; padding: .5rem .75rem; }
.ac-liste summary { cursor: pointer; font-weight: 600; display: flex; align-items: center; gap: .75rem; }
.ac-hinzufuegen { display: grid; gap: .4rem; margin-top: .75rem; padding-top: .75rem; border-top: 1px dashed var(--line); }
button.klein { font-size: .8rem; padding: .2rem .5rem; }
.checklist.klein { max-height: 12rem; }

/* Registrierungscode einer Gruppe: groß genug zum Abscannen vom Bildschirm und zum Ausdrucken. */
.qr-gross { width: 15rem; height: 15rem; image-rendering: pixelated; background: #fff; padding: .5rem; border: 1px solid var(--line); border-radius: 8px; }
@media print {
  /* Beim Drucken nur den Code und seine Beschriftung – niemand braucht die Navigation auf Papier. */
  header, nav, .subtabs, #group-list, #device-detail, button { display: none !important; }
  .card { border: 0; }
}

/* Dialog mit dem QR-Code eines Registrierungscodes – aus der Codeliste heraus. */
#code-dialog { width: min(28rem, 92vw); border: 1px solid var(--line); border-radius: 10px; padding: 1.25rem; color: inherit; }
#code-dialog::backdrop { background: rgba(0, 0, 0, .45); }
#code-dialog h3 { margin-top: 0; }
/* Ein Code, der nicht mehr wirkt, soll auch nicht wie ein gültiger aussehen. */
.code-tot { color: var(--danger); font-weight: 600; }
td code.klickbar { cursor: pointer; text-decoration: underline; text-decoration-style: dotted; }
td code.klickbar:hover { color: var(--accent); }

/* Einzeiliges Kästchen mit Text daneben – anders als die Rasterzeilen der übrigen Formularfelder. */
label.zeile { display: flex; align-items: center; gap: .45rem; }
.badge.test { background: #fef3c7; color: #92400e; }
.badge.nfc { background: #dbeafe; color: #1e40af; }

/* Firmenzeichen im Kopf – der Frosch ist das Erkennungsmerkmal, der Titel sagt, was die Seite ist. */
header .logo { height: 2.2rem; width: auto; background: #fff; padding: .2rem .35rem; border-radius: 6px; }

/* Zeile der Geräte-App-Liste: Symbol und Name nebeneinander, Paketname klein darunter. */
.app-zelle { display: flex; align-items: center; gap: .5rem; }
.app-zelle .pkg-icon { width: 28px; height: 28px; }
#device-app-rows .row { margin: 0; justify-content: flex-end; }
#install-dialog { width: min(48rem, 92vw); border: 1px solid var(--line); border-radius: var(--rund); padding: 1.25rem; color: inherit; }
#install-dialog::backdrop { background: rgba(0, 0, 0, .45); }
#install-dialog .dialog-head { margin-bottom: .25rem; }
#install-dialog .pkg-list { max-height: 22rem; }
/* Fenster „Version auf ein Gerät installieren“ – dieselbe Machart wie die übrigen Fenster. */
#push-dialog { width: min(40rem, 92vw); border: 1px solid var(--line); border-radius: var(--rund); padding: 1.25rem; color: inherit; }
#push-dialog::backdrop { background: rgba(0, 0, 0, .45); }
#push-dialog #push-search { width: 100%; margin: .5rem 0; }
#push-dialog .pkg-list { max-height: 20rem; }

/* Laufende Freischaltung: fällt auf, ohne zu schreien – die Geräteliste bleibt daneben lesbar. */
.karte-warnung {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  background: #fff7ed; border: 1px solid #f0c088; border-left: 4px solid var(--warn);
  border-radius: var(--rund); padding: .6rem .9rem; margin-bottom: .9rem;
}
.badge.offen { background: #fef3c7; color: #92400e; }

/* --- Anmeldeseite ------------------------------------------------------- */
body.anmeldeseite { display: grid; place-items: center; min-height: 100vh; background: var(--bg); }
.anmeldung { width: min(24rem, 92vw); padding: 2rem; text-align: center; }
.anmeldung .logo { height: 3rem; width: auto; margin-bottom: .5rem; }
.anmeldung h1 { font-size: 1.2rem; margin: 0 0 1.25rem; font-weight: 600; }
.anmeldung form { text-align: left; display: grid; gap: .75rem; }
.anmeldung input { width: 100%; }
.anmeldung button { width: 100%; background: var(--accent); border-color: var(--accent); color: #fff; padding: .55rem; }

/* Angemeldeter Benutzer im Kopf – rechts, klein, mit Rolle und Abmelden. */
header .wer { display: flex; align-items: center; gap: .5rem; color: #d7d5d1; font-size: .85rem; }
header .wer button { background: transparent; border-color: rgba(255,255,255,.35); color: #fff; }
header .wer button:hover { background: rgba(255,255,255,.12); }
.badge.rolle { background: rgba(255,255,255,.18); color: #fff; }

/* --- Name im Gerätedetail: Überschrift und Eingabefeld in einem ---------- */
#detail-title { display: flex; align-items: center; min-height: 2rem; }
.name-knopf {
  font: inherit; font-size: inherit; font-weight: inherit; color: inherit;
  background: none; border: 1px solid transparent; border-radius: 8px;
  padding: .1rem .4rem; margin-left: -.4rem; min-height: 0;
  display: inline-flex; align-items: center; gap: .45rem; cursor: text;
}
.name-knopf:hover { border-color: var(--line-stark); background: var(--card); }
.name-knopf .stift { color: var(--muted); font-size: .8rem; opacity: 0; transition: opacity .12s ease; }
.name-knopf:hover .stift, .name-knopf:focus-visible .stift { opacity: 1; }
.name-feld { font: inherit; font-size: inherit; font-weight: inherit; width: min(22rem, 100%); }

/* --- Drei-Punkte-Menü ---------------------------------------------------- */
.menue { position: relative; display: inline-flex; }
.menue-knopf { padding: .35rem .5rem; line-height: 1; font-size: 1.05rem; }
.menue-liste {
  position: absolute; right: 0; top: calc(100% + .25rem); z-index: 20;
  display: grid; min-width: 13rem; padding: .25rem;
  background: var(--card); border: 1px solid var(--line-stark); border-radius: var(--rund);
  box-shadow: 0 8px 24px -8px rgba(31, 28, 24, .35);
}
.menue-liste button {
  border: 0; background: none; text-align: left; border-radius: 6px;
  padding: .45rem .55rem; min-height: 0; font-weight: 400;
}
.menue-liste button:hover { background: var(--accent-weich); }
.menue-liste button.gefahr { color: var(--danger); font-weight: 600; }
.menue-liste button.gefahr:hover { background: #fdf2f2; }

/* Freischaltungs-Fenster – schmal, es enthält nur eine Entscheidung. */
#freischalt-dialog { width: min(32rem, 92vw); border: 1px solid var(--line); border-radius: var(--rund); padding: 1.25rem; color: inherit; }
#freischalt-dialog::backdrop { background: rgba(0, 0, 0, .45); }
#freischalt-dialog .zustandszeile { margin: .75rem 0 .5rem; }

/* --- Schnittstelle: Zugänge und Endpunktreferenz ------------------------- */

#token-dialog { width: min(44rem, 92vw); border: 1px solid var(--line); border-radius: var(--rund); padding: 1.25rem; color: inherit; }
#token-dialog::backdrop { background: rgba(0, 0, 0, .45); }
/* Das Token steht genau einmal da – es soll auffallen und sich in einem Zug markieren lassen. */
#token-dialog .token-wert { background: #fff7e6; border: 1px solid #e0b96a; border-radius: var(--rund); padding: .6rem .7rem; user-select: all; overflow-wrap: anywhere; }
#token-dialog pre { white-space: pre-wrap; margin: .35rem 0 .75rem; }

.endpunkt { border: 1px solid var(--line); border-radius: var(--rund); padding: .5rem .7rem; margin: .4rem 0; }
.endpunkt > summary { cursor: pointer; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.endpunkt > summary code { font-weight: 600; }
/* Feste Breite, damit die Pfade untereinander an derselben Stelle beginnen. */
.badge.methode { min-width: 3.6rem; text-align: center; font-family: ui-monospace, Consolas, monospace; }
.endpunkt-parameter { margin: .4rem 0; }
.endpunkt-parameter td { vertical-align: top; }
.endpunkt-ausgabe { background: var(--bg); border: 1px solid var(--line); border-radius: var(--rund); padding: .6rem; max-height: 22rem; overflow: auto; white-space: pre-wrap; font-family: ui-monospace, Consolas, monospace; font-size: .8rem; }

/* --- Übersicht: Lage, Kennzahlen, Auffälligkeiten ------------------------ */

/* Eine Zeile, die die Lage benennt. Rot nur, wenn es wirklich etwas zu tun gibt – sonst verliert
   die Farbe genau dann ihre Wirkung, wenn sie gebraucht wird. */
.lage { display: flex; align-items: center; gap: .9rem; padding: .9rem 1.1rem; border-radius: var(--rund); border: 1px solid var(--line); background: var(--card); margin-bottom: 1rem; }
.lage-zeichen { width: 2.1rem; height: 2.1rem; flex: none; display: grid; place-items: center; border-radius: 50%; font-weight: 700; font-size: 1.15rem; }
.lage.gut .lage-zeichen { background: #e8f5e9; color: var(--ok); }
.lage.warnung { border-color: var(--accent); background: var(--accent-weich); }
.lage.warnung .lage-zeichen { background: var(--accent); color: #fff; }



/* Kacheln passen sich der Breite an, statt auf eine feste Spaltenzahl zu bestehen. */
/* Kacheln wachsen mit, aber nicht ins Unendliche – bei 1920 px standen sonst sieben fast leere
   Flächen nebeneinander. */
.kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 13rem)); gap: .75rem; margin-bottom: 1rem; justify-content: start; }
.kachel { background: var(--card); border: 1px solid var(--line); border-radius: var(--rund); padding: .8rem 1rem; }
.kachel-zahl { font-size: 1.8rem; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kachel-text { color: var(--muted); font-size: .85rem; }
/* Farbe bekommt nur, was eine Aussage trägt – „7 Geräte“ ist keine. */
.kachel.gut .kachel-zahl { color: var(--ok); }
.kachel.warnung .kachel-zahl { color: var(--accent); }
.kachel.offen .kachel-zahl { color: var(--warn); }
.kachel.gedaempft .kachel-zahl { color: var(--muted); }

.auffaellig { border: 1px solid var(--line); border-left-width: 4px; border-radius: var(--rund); padding: .6rem .8rem; margin: .5rem 0; }
.auffaellig.warnung { border-left-color: var(--accent); }
.auffaellig.hinweis { border-left-color: var(--line-stark); }
.auffaellig.clickable { cursor: pointer; }
.auffaellig.clickable:hover { background: #faf9f8; }
.auffaellig-kopf { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

/* Kacheln sind Knöpfe – eine Zahl, der man nicht folgen kann, ist eine Sackgasse. */
.kachel.klickbar { text-align: left; font: inherit; cursor: pointer; min-height: 0; width: 100%; }
.kachel.klickbar:hover { border-color: var(--line-stark); }
.kachel.klickbar:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.filterleiste { gap: .35rem; margin: .25rem 0 .75rem; }
.filterknopf { font-size: .8rem; padding: .25rem .6rem; min-height: 0; border-radius: 999px; background: var(--bg); }
.filterknopf.aktiv { background: var(--accent); border-color: var(--accent); color: #fff; }
.filterleiste .trenner { width: 1px; align-self: stretch; background: var(--line); margin: 0 .25rem; }
select.aktiv { border-color: var(--accent); }

.auffaellig-kopf .fueller { flex: 1; }
.auffaellig.innen { border: none; border-left: 2px solid var(--line); border-radius: 0; margin: .25rem 0 .25rem .5rem; padding: .3rem .6rem; }
.auffaellig.sammel { padding: 0; }
.auffaellig-sammel {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; width: 100%; text-align: left;
  font: inherit; background: none; border: none; padding: .6rem .8rem; cursor: pointer; min-height: 0;
}
.auffaellig-sammel:hover { background: #faf9f8; }
.auffaellig-sammel .pfeil { margin-left: auto; color: var(--muted); }
.auffaellig.sammel > .auffaellig { margin-left: .8rem; margin-right: .8rem; }

/* Balken je Gruppe: Die Breite zeigt die Größe, die Füllung den Anteil mit Warnungen. */
/* Mehrere Gruppen nebeneinander: Ein Balken über 1900 px sagt nicht mehr als einer über 400. */
#gruppenlage { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .5rem 1.5rem; align-items: start; }
#gruppenlage > p { grid-column: 1 / -1; margin: .25rem 0 0; }
.gruppenbalken { display: block; width: 100%; text-align: left; font: inherit; background: none; border: none; padding: .4rem 0; cursor: pointer; min-height: 0; }
.gruppenbalken:hover .gruppenbalken-kopf b { text-decoration: underline; }
.gruppenbalken-kopf { display: flex; justify-content: space-between; gap: .5rem; margin-bottom: .25rem; }
.gruppenbalken-fuss { display: flex; justify-content: space-between; gap: .5rem; margin-top: .2rem; }
.balken { height: 8px; background: var(--line); border-radius: 999px; overflow: hidden; display: flex; }
.balken-teil { height: 100%; }
.balken-teil.gut { background: var(--ok); }
.balken-teil.warnung { background: var(--accent); }

/* --- Übersicht: Raster, Ringdiagramme, Protokoll-Feed -------------------- */

.uebersicht-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); gap: 1rem; align-items: start; }
@media (max-width: 1100px) { .uebersicht-raster { grid-template-columns: 1fr; } }
.uebersicht-haupt { display: grid; gap: 1rem; }
.diagramme { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1rem; }

.diagramm { display: flex; align-items: center; gap: 1rem; padding: 1rem; }
.ring { width: 7rem; height: 7rem; flex: none; }
/* Der Umfang des Kreises ist genau 100 – deshalb sind Anteile direkt Prozentwerte. */
.ring circle { fill: none; stroke-width: 5; }
.ring-grund { stroke: var(--line); }
/* Eine Farbfamilie je Bedeutung, darin Abstufungen. Die Nummer vergibt das Skript für Ring und
   Legende gemeinsam – so kann die Legende nicht anders aussehen als das Bild. */
.gut.s0 { --dia: #4f9d69; }
.gut.s1 { --dia: #86c09a; }
.gut.s2 { --dia: #2f6e46; }
.offen.s0 { --dia: #d9a441; }
.offen.s1 { --dia: #ecc98d; }
.offen.s2 { --dia: #a87b26; }
.warnung.s0 { --dia: #e30613; }
.warnung.s1 { --dia: #f2848a; }
.warnung.s2 { --dia: #99040d; }
.neutral.s0 { --dia: #8296a8; }
.neutral.s1 { --dia: #a8b6c2; }
.neutral.s2 { --dia: #6b7f90; }
.neutral.s3 { --dia: #c3ccd4; }
.neutral.s4 { --dia: #56697a; }
.neutral.s5 { --dia: #93a4b2; }
.ring-teil { stroke: var(--dia, #8296a8); }
.ring-mitte { text-anchor: middle; font-size: 8px; font-weight: 600; fill: var(--text); }
.ring-leer { text-anchor: middle; font-size: 4px; fill: var(--muted); }

.diagramm-text { min-width: 0; }
.diagramm-text h3 { margin: 0 0 .1rem; }
/* Ohne Begrenzung schiebt `margin-left: auto` die Zahl bis an den Kartenrand – bei breiten Karten
   stehen Beschriftung und Wert dann so weit auseinander, dass man die Zeile verliert. */
.legende { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .2rem; font-size: .85rem; max-width: 20rem; }
.legende li { display: flex; align-items: center; gap: .45rem; }
.legende li b { margin-left: auto; font-variant-numeric: tabular-nums; }
.punkt { width: .6rem; height: .6rem; border-radius: 3px; flex: none; }
.punkt { background: var(--dia, #8296a8); }

.protokoll-feed { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); display: flex; flex-direction: column; }
.feed-kopf { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.feed-kopf h2 { margin: 0; }
#feed { overflow-y: auto; margin-top: .5rem; }
.feed-eintrag { display: flex; gap: .6rem; padding: .5rem 0; border-bottom: 1px solid var(--line); font-size: .85rem; }
.feed-eintrag:last-child { border-bottom: none; }
.feed-punkt { width: .5rem; height: .5rem; border-radius: 50%; background: var(--line-stark); flex: none; margin-top: .4rem; }
.feed-fuss { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .15rem; }
.feed-zeit { margin-left: auto; white-space: nowrap; }

/* --- Einstellungen: Adressen -------------------------------------------- */

.adresszeile { border: 1px solid var(--line); border-radius: var(--rund); padding: .6rem .8rem; margin-bottom: .6rem; }
/* Die Hauptadresse trägt den Rand in Hausfarbe: Sie steht im QR-Code und in jedem Download-Link. */
.adresszeile.haupt { border-left: 4px solid var(--accent); }
.adresszeile .row { margin: 0; }
.adressstand { margin-top: .45rem; display: grid; gap: .25rem; }
.adressstand .balken { max-width: 24rem; }
.warnung-text { color: var(--warn); font-weight: 600; }

/* --- Hoher Kontrast / erzwungene Farben ---------------------------------- */

/*
 * Firefox und Windows können die Farben jeder Seite durch die des Nutzers ersetzen – gewollt, für
 * Menschen, die sonst wenig erkennen. Eigene Farben gelten dann nicht mehr, Schatten entfallen, und
 * alles, dessen Bedeutung **nur** in der Farbe steckt, verschwindet: ein Klappmenü ohne Rand schwebt
 * unsichtbar über der Seite, ein grüner Balken ist von einem roten nicht zu unterscheiden.
 *
 * Deshalb hier: Ränder statt Flächen, Systemfarben statt eigener, und für Balken und Punkte ein
 * Muster, das ohne Farbe auskommt.
 */
@media (forced-colors: active) {
  /* Markiertes bleibt markiert: Im erzwungenen Modus fällt jede eigene Farbe weg, und der aktive
     Punkt wäre sonst von den übrigen nicht zu unterscheiden. */
  header nav button.active,
  #unternav button.active,
  .seitenleiste button.active,
  .kontoknopf.active {
    background: Highlight; color: HighlightText; forced-color-adjust: none;
  }
  /* Die Seitenleiste braucht eine Kante, sonst steht sie ohne Grenze neben dem Inhalt. */
  #unternav { border-right: 1px solid CanvasText; }

  /* Abzeichen und Zustandspunkte tragen ihre Aussage sonst allein in der Farbe. */
  .badge { border: 1px solid CanvasText; }
  .dot { border: 1px solid CanvasText; }
  .dot.on { background: Highlight; }

  /* Balken: Der gefüllte Teil bekommt eine Fläche, der Rest bleibt leer – ein Größenverhältnis
     bleibt so ablesbar, auch wenn Grün und Rot dasselbe werden. */
  .balken { border: 1px solid CanvasText; }
  .balken-teil.gut { background: CanvasText; }
  .balken-teil.warnung { background: Highlight; }

  /* Ringdiagramme: ohne Farbunterschied bleibt nur die Gesamtzahl in der Mitte – dafür muss sie
     lesbar sein. Die Legende nennt die Werte ohnehin in Zahlen. */
  .ring circle { forced-color-adjust: none; }
  .ring-mitte { fill: CanvasText; }

  /* Die Lagezeile lebt von ihrer Fläche; ein Rand ersetzt sie. */
  .lage { border: 2px solid CanvasText; }
  .auffaellig.warnung { border-left: 4px solid Highlight; }
}

/* --- Einstellungen: Seitenleiste ----------------------------------------- */

/* Leiste links, Inhalt rechts. Bei schmalen Fenstern rutscht die Leiste nach oben und wird zu einer
   waagerechten Reihe – auf 400 px nebeneinander bliebe für den Inhalt nichts übrig. */
.einstellungen { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: 1rem; align-items: start; }
@media (max-width: 800px) { .einstellungen { grid-template-columns: 1fr; } }
.seitenleiste {
  display: grid; gap: .15rem; padding: .4rem; position: sticky; top: 1rem;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--rund);
}
@media (max-width: 800px) { .seitenleiste { grid-auto-flow: column; position: static; } }
.seitenleiste button {
  text-align: left; border: 0; background: transparent; border-radius: 8px; min-height: 0;
  padding: .45rem .7rem; color: var(--text);
}
.seitenleiste button:hover { background: var(--bg); }
.seitenleiste button.active { background: var(--accent); color: #fff; font-weight: 600; }

.schwellenzeile { padding: .5rem 0; border-bottom: 1px solid var(--line); }
.schwellenzeile:last-child { border-bottom: 0; }
.schwellenzeile label { display: flex; align-items: center; gap: .5rem; margin: 0; }
/* Feste Breite für die Beschriftung: Sonst stehen die Eingabefelder auf verschiedenen Höhen zu
   verschieden weit rechts, und die Spalte franst aus. */
.schwellenname { min-width: 16rem; }
/* Zahlen brauchen wenig Platz, Text viel. Eine Breite für beides ergibt entweder ein Feld, in das
   „Europe/Berlin“ nicht passt, oder eine 5 mit zwanzig Zeichen Leerraum daneben. */
.schwellenzeile input[type='number'] { width: 5rem; }
.schwellenzeile input[type='text'] { width: 18rem; }
.schwellenzeile select { min-width: 14rem; }
.schwellenzeile input[type='checkbox'] { width: auto; }
/* Die Mehrfachauswahl bricht unter die Beschriftung, wenn es eng wird – Rollen nebeneinander zu
   quetschen macht die Kästchen unklickbar. */
.schwellenzeile label:has(.mehrfach) { flex-wrap: wrap; }

.diagnose-block { margin-bottom: 1rem; }
.diagnose-block h3 { margin-top: 0; }

/* --- Einstellungen: Seitenleiste mit Themenüberschriften -------------------- */

/* Die Überschrift ist kein Knopf und darf auch nicht so aussehen: kleiner, ruhiger, eingerückt
   wie eine Gliederungsebene darüber. */
.seitenleiste .leistenkopf {
  display: block;
  padding: 0.9rem 0.7rem 0.25rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.seitenleiste .leistenkopf:first-child { padding-top: 0.2rem; }

/* Mehrfachauswahl (Rollen) und Kästchenzeilen der Regeln. */
.mehrfach { display: flex; flex-wrap: wrap; gap: 0.6rem 1.2rem; }
label.kasten { display: flex; align-items: center; gap: 0.45rem; cursor: pointer; }
label.kasten input[type='checkbox'] { margin: 0; }

.logo-vorschau {
  height: 2.4rem;
  max-width: 12rem;
  object-fit: contain;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0.25rem 0.5rem;
}

/* Die Karte, hinter der es endgültig wird. `--danger`, nicht `--accent`: Das Rot des Hauses heißt in
   dieser Konsole „Hauptsache“, nicht „Vorsicht“ – und ein Knopf, der alles überschreibt, ist keine
   Hauptsache. Roter Rand statt roter Fläche, damit der Text darin lesbar bleibt. */
.card.gefahr { border-color: var(--danger); }
.card.gefahr h2 { color: var(--danger); }
.gefahr-knopf { background: var(--danger); color: #fff; border-color: var(--danger); }
.gefahr-knopf:hover { filter: brightness(1.15); }

/* --- Marken: zugeordnete Gruppen ------------------------------------------ */

/*
 * Statt einer Kreuztabelle mit einem Kästchen je Gerätegruppe. Der Unterschied ist nicht Geschmack:
 * Bei 126 Gruppen hatte jede Zeile 127 Kästchen. Marken wachsen mit dem, was zugeordnet **ist**,
 * nicht mit dem, was zugeordnet werden könnte.
 */
.marken { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .4rem; }
.marke {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .15rem .3rem .15rem .6rem; border-radius: 999px;
  background: var(--bg); border: 1px solid var(--line-stark); font-size: .85rem;
}
.marke-weg {
  border: 0; background: transparent; color: var(--muted); cursor: pointer;
  min-height: 0; padding: 0 .3rem; line-height: 1; font-size: 1rem; border-radius: 999px;
}
.marke-weg:hover { background: var(--danger); color: #fff; }

/* Gepflegte Listen in den Einstellungen (Kategorien). Unter der Beschriftung, nicht daneben:
   Sie wächst, und ein Feld, das mit jedem Eintrag breiter wird, schiebt die Spalte auseinander. */
.listenfeld { margin-top: .4rem; display: grid; gap: .5rem; }
.listenfeld input[type='text'] { width: 14rem; }

/* Geerbte Kontaktlisten: sichtbar, aber nicht anfassbar – die Änderung gehört in die Gruppe, aus
   der sie kommt. Deshalb blasser und ohne ×. */
.marke.geerbt { background: transparent; border-style: dashed; color: var(--muted); }
/* Eine Marke, die zur Gruppe führt. Als Knopf, damit sie auch mit der Tastatur erreichbar ist. */
.marke-link { cursor: pointer; font: inherit; font-size: .85rem; }
.marke-link:hover { border-color: var(--accent); color: var(--accent); }

/* „Ganzes Verzeichnis“ hebt sich von einer einzelnen Liste ab: Es ist die weiter reichende Wahl,
   und wer sie getroffen hat, soll es auf einen Blick sehen. */
.marke.ganz { border-color: var(--accent); font-weight: 600; }

/* Dialoge, die im Skript entstehen und nach dem Schließen wieder verschwinden – bisher hatte jeder
   Dialog eine eigene ID und eigene Regel. Eine Klasse spart die nächste. */
dialog.dialog {
  width: min(32rem, 92vw);
  border: 1px solid var(--line);
  border-radius: var(--rund);
  padding: 1.25rem;
  color: inherit;
}
dialog.dialog label { display: block; margin: .75rem 0; }
/* Datei und Passphrase unter der Beschriftung, über die volle Breite - wie in den Formularen der Konsole. */
.unterschrift-dialog label > input { display: block; width: 100%; margin-top: .3rem; }
.unterschrift-dialog .row { justify-content: flex-end; gap: .5rem; }

/* ==========================================================================================
 * Ersteinrichtung – der Assistent beim ersten Anmelden
 *
 * Er liegt ÜBER der Konsole statt in einem Reiter: Solange er offen ist, gibt es nichts anderes
 * zu tun, und die Reiter dahinter bekämen vom Server ohnehin nur ein 409.
 * ========================================================================================== */
body.er-aktiv > :not(#ersteinrichtung):not(#toast) { display: none !important; }
/* Die Meldungen muessen ueber dem Assistenten liegen - sonst sieht niemand, warum ein Knopf nichts tat. */
body.er-aktiv #toast { z-index: 200; }

.hinweis-kasten {
  margin: 4px 0 0;
  padding: 10px 14px;
  border-left: 3px solid var(--warn);
  background: #fdf6e9;
  border-radius: 0 8px 8px 0;
  font-size: 13px;
}

#ersteinrichtung {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  overflow: auto;
}
.er-kopf {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 28px;
  background: var(--card);
  border-bottom: 3px solid var(--accent);
}
.er-rumpf {
  display: grid;
  grid-template-columns: 240px minmax(0, 640px);
  gap: 32px;
  justify-content: center;
  padding: 40px 24px;
  width: 100%;
}

/* Die Leiste links: wo man ist, was erledigt ist, was noch kommt. */
.er-leiste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.er-leiste li {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 8px; color: var(--muted);
}
.er-leiste li.aktuell { background: var(--card); color: var(--text); font-weight: 600; box-shadow: var(--schatten); }
.er-punkt {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px; font-weight: 600;
  border: 1.5px solid var(--line-stark); background: var(--card);
}
.er-leiste li.aktuell .er-punkt { border-color: var(--accent); color: var(--accent); }
.er-leiste li.erledigt .er-punkt { background: var(--ok); border-color: var(--ok); color: #fff; }
.er-leiste li.uebersprungen { text-decoration: line-through; text-decoration-color: var(--line-stark); }

.er-seite {
  background: var(--card);
  border-radius: var(--rund);
  box-shadow: var(--schatten);
  padding: 32px 36px 24px;
  display: flex; flex-direction: column; gap: 24px;
}
.er-zaehler { margin: 0; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.er-seite h2 { margin: 2px 0 6px; font-size: 22px; }
.er-warum { margin: 0; color: var(--muted); }
.er-koerper { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.er-koerper label { display: flex; flex-direction: column; gap: 4px; font-weight: 500; }
.er-koerper label.er-wahl { flex-direction: row; align-items: flex-start; gap: 10px; font-weight: 400; padding: 8px 0; }
.er-koerper fieldset { border: 0; padding: 0; margin: 0; }
.er-koerper legend { font-weight: 600; margin-bottom: 6px; }
.er-koerper textarea { font-family: ui-monospace, monospace; }
.er-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.er-qr { display: flex; gap: 20px; align-items: flex-start; }
.er-qr img { border: 1px solid var(--line); border-radius: 8px; }
.er-codes { background: var(--bg); padding: 12px 16px; border-radius: 8px; font-size: 15px; letter-spacing: .05em; }
.er-vorschau ul, .er-liste { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.er-vorschau .badge { margin: 0 4px 4px 0; }
.er-app { padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; }

.er-knoepfe {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px;
  border-top: 1px solid var(--line); padding-top: 18px;
}
/* Rechts darf die Gruppe umbrechen, ein einzelner Knopf nicht - „← Zurück" auf zwei Zeilen las sich
   am schmalen Fenster wie zwei Knöpfe. */
.er-knoepfe > div { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.er-knoepfe > div:first-child { margin-left: 0; }
.er-knoepfe button { white-space: nowrap; }

/* Schmal: Leiste über die Seite statt daneben. */
@media (max-width: 760px) {
  .er-rumpf { grid-template-columns: 1fr; padding: 16px; gap: 16px; }
  .er-leiste { flex-direction: row; overflow-x: auto; }
  .er-leiste li { white-space: nowrap; }
  .er-seite { padding: 20px; }
  .er-zwei { grid-template-columns: 1fr; }
  .er-qr { flex-direction: column; }
}

/* Ein Satz über den Stand eines Einstellungsbereichs, etwa die letzte tägliche Sicherung. */
.bereich-zustand {
  margin: 4px 0 12px; padding: 8px 12px; border-radius: 8px;
  background: var(--bg); border-left: 3px solid var(--line-stark);
}