/* Geräteverwaltung — Erscheinungsbild
 *
 * 2026-09-22: Farbwerte, Bausteine und Klassennamen wörtlich aus TB Web
 * (mittel/stil.css) übernommen, damit beide Anwendungen gleich aussehen und
 * die Geräteverwaltung sich später ohne optischen Bruch eingliedern lässt.
 * Wer hier etwas ändert, ändert es auch dort — oder gar nicht.
 *
 * Das verbindliche Marken-Gelb ist Pantone 3955 · RGB 210/215/0.
 */

:root {
  --gelb: #d2d700;
  /* Heller als das Marken-Gelb, nur für das Wort neben der Wortmarke. */
  --gelb-marke: #ecf200;
  --auf-gelb: #0f1208;
  --gelb-schrift: #d2d700;

  --tinte: #080808;
  --grund: #0a0b0c;
  --grund-tief: #000;
  --karte: #101113;
  --karte-hell: #17181a;
  --linie: #212327;
  --linie-leise: #16171a;
  --schrift: #e9eae5;
  --schrift-leise: #86887f;

  --gut: #64c07a;
  --schlecht: #e0655b;
  --achtung: #d99a3c;
  /* 2026-09-23: Blau für den Zustand Wartung, Orange für Lager und für ein
   * mittleres LTE-Signal. */
  --blau: #4aa3ff;
  --orange-signal: #e8912d;
  /* 2026-10-05: Leuchtfarben für online/offline und die Punkte. Der Betreiber:
   * "das Grün eher Neongrün, das Rot eher Neonrot, muss Kontrast zum
   * Hintergrund ergeben". Auf dunklem Grund die reinen Neontöne. */
  --neon-gruen: #1fcf0c;
  --neon-rot: #ff1f44;

  --akzent: var(--gelb);
  --auf-akzent: var(--auf-gelb);
  --flaeche: var(--grund-tief);

  --schatten: 0 4px 16px rgba(0, 0, 0, .28);
  --schatten-klein: 0 1px 2px rgba(0, 0, 0, .12);

  --seitengrund: radial-gradient(120% 60% at 50% 0%,
                   #101114 0%, var(--grund) 55%) fixed;
  --kartengrund: linear-gradient(180deg,
                   color-mix(in srgb, var(--karte-hell) 45%, var(--karte)),
                   var(--karte) 42%);
  --knopfgrund: linear-gradient(180deg, #dee402, #c9ce00);

  --titelschrift: Montserrat, "Helvetica Neue", system-ui, sans-serif;
  --textschrift: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --zahlschrift: ui-monospace, SFMono-Regular, Menlo, monospace;

  --rund: 10px;
  --rund-gross: 18px;
  --breite: 1600px;
  color-scheme: dark;
}

[data-thema="hell"] {
  --gelb-schrift: #5f6300;
  --grund: #ffffff;
  --grund-tief: #0b0c0d;
  --karte: #fbfbf6;
  --karte-hell: #ffffff;
  --linie: #e8e9de;
  --linie-leise: #f2f3ea;
  --schrift: #121409;
  --schrift-leise: #6b6e5f;
  /* Eine Spur dunkler als im dunklen Thema: auf Weiß verlangt die Norm für
   * kleine Schrift 4,5 zu 1, die helleren Töne kamen nur auf rund 4. */
  --gut: #36804b;
  --schlecht: #c0392f;
  --achtung: #9c6410;
  --blau: #1f5fbf;
  --orange-signal: #b35c00;
  --schatten: 0 12px 32px rgba(17, 19, 8, .10), 0 2px 6px rgba(17, 19, 8, .06);
  --schatten-klein: 0 1px 3px rgba(17, 19, 8, .07), 0 8px 24px rgba(17, 19, 8, .05);
  --seitengrund: linear-gradient(180deg, #ffffff 0%, #f7f8f0 100%) fixed;
  --kartengrund: linear-gradient(180deg, #ffffff,
                   color-mix(in srgb, #ffffff 65%, var(--karte)) 60%);
  --knopfgrund: linear-gradient(180deg, #dee402, #c6cb00);
  color-scheme: light;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--seitengrund), var(--grund);
  color: var(--schrift);
  font: 15px/1.6 var(--textschrift);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1 { font-size: 1.35rem; margin: 0 0 .2rem; }
h2 { font-size: 1.05rem; margin: 0 0 .75rem; }
h3 { font-size: .95rem; margin: 0 0 .5rem; }

a { color: var(--gelb-schrift); text-decoration: none; }
a:hover { text-decoration: underline; }

.leise { color: var(--schrift-leise); }
.klein { font-size: .82rem; }
.warnt { color: var(--achtung); }
.zahlen { font-variant-numeric: tabular-nums; }
.nichtumbrechen { white-space: nowrap; }
.dehnen { flex: 1 1 auto; }

/* ---------------------------------------------------------------- Kopf */

.kopf {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--grund-tief) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--linie-leise);
}

.kopfzeile {
  max-width: var(--breite);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: .65rem 1.5rem;
}

.marke { display: flex; align-items: baseline; gap: .5rem; flex: 0 0 auto; }
.marke:hover { text-decoration: none; }
.marken-logo { height: 20px; width: auto; display: block; }
/* 2026-09-23: Das Logo bleibt in beiden Themen im leuchtenden Gelb. Der Betreiber:
 * "egal ob Hell- oder Dunkelmodus, die kräftige leuchtende Schriftfarbe gleich
 * lassen". Die Kopfleiste ist ohnehin in beiden Themen dunkel. */

.marke em {
  font-style: normal;
  font-family: var(--titelschrift);
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: .06em;
  color: var(--gelb-marke);
}

.module { display: flex; gap: .2rem; flex-wrap: wrap; }
.module a {
  color: var(--schrift-leise);
  padding: .35rem .7rem;
  border-radius: var(--rund);
  font-size: .88rem;
}
.module a:hover { color: var(--schrift); background: var(--karte); text-decoration: none; }
.module a.hier { color: var(--gelb-schrift); background: var(--karte); }

.kopfwerkzeuge { display: flex; align-items: center; gap: .5rem; flex: 0 1 auto; }

/* ---------------------------------------------------- Menü und Gerippe
 *
 * 2026-09-22: Das Menü steht links, nicht oben. Die Geräteklassen wachsen —
 * Lautsprecher, Scheinwerfer, Videoserver kommen dazu —, und eine Reihe quer
 * über den Kopf läuft irgendwann aus dem Bild.
 */

.gerippe {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  max-width: var(--breite);
  margin: 0 auto;
  padding: 1.5rem 1.5rem 5rem;
}

.seitenmenue {
  position: sticky;
  top: 4rem;
  flex: 0 0 13rem;
  display: flex;
  flex-direction: column;
  gap: .15rem;
}

/* 2026-10-08: Menüschrift größer und fett. Der Betreiber: "die große Menüleiste
 * links, die Bezeichnungen hervorheben, zurzeit sind die Menüschriften noch in
 * kleiner Standardschrift." */
.seitenmenue a {
  display: block;
  padding: .6rem .85rem;
  border-radius: var(--rund);
  color: var(--schrift);
  font-size: 1.08rem;
  font-weight: 600;
  border-left: 3px solid transparent;
}
.seitenmenue a:hover {
  color: var(--schrift);
  background: var(--karte);
  text-decoration: none;
}
.seitenmenue a.hier {
  color: var(--schrift);
  background: var(--karte);
  border-left-color: var(--gelb);
  font-weight: 600;
}

main {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
}

/* --------------------------------------------------------------- Karte */

.karte {
  background: var(--kartengrund);
  border: 1px solid var(--linie);
  border-radius: var(--rund-gross);
  box-shadow: var(--schatten-klein);
  padding: 1.6rem 1.7rem 1.7rem;
}

section { margin-bottom: 2.2rem; }

.abschnittskopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .6rem;
}

/* -------------------------------------------------------------- Knöpfe */

button, .knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  background: var(--knopfgrund);
  color: var(--auf-gelb);
  border: 0;
  border-radius: var(--rund);
  padding: .58rem 1.1rem;
  font: 500 .875rem var(--textschrift);
  letter-spacing: .005em;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color .13s ease, border-color .13s ease,
              color .13s ease, opacity .13s ease, transform .12s ease;
}

button:hover, .knopf:hover { filter: brightness(1.06); text-decoration: none; }

.knopf.umrandet, button.umrandet {
  background: none;
  border: 1px solid var(--linie);
  color: var(--schrift);
  font-weight: 450;
}
.knopf.umrandet:hover, button.umrandet:hover {
  border-color: var(--gelb);
  color: var(--gelb-schrift);
  filter: none;
}

.knopf.flach, button.flach {
  background: none;
  color: var(--schrift-leise);
  font-weight: 500;
  padding: .4rem .55rem;
}
.knopf.flach:hover, button.flach:hover {
  color: var(--gelb-schrift);
  background: var(--karte);
  filter: none;
}

.knopf.flach.loeschen:hover, button.flach.loeschen:hover,
.knopf.flach.loeschen:focus-visible, button.flach.loeschen:focus-visible {
  color: var(--schlecht);
  background: color-mix(in srgb, var(--schlecht) 10%, transparent);
}

.knopfreihe { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }

/* ------------------------------------------------------------ Tabellen */

.tabelle { width: 100%; border-collapse: collapse; font-size: .9rem; }
/* 2026-10-05: Spaltenköpfe deutlicher. Der Betreiber: "Farbe bleibt schwarz,
 * Schrift etwas größer und etwas fetter, so dass man sieht, es sind
 * Spaltenüberschriften." Schwarz heißt hier die Schriftfarbe des Themas — im
 * dunklen Thema also hell, sonst wären die Köpfe dort unsichtbar. */
.tabelle th {
  text-align: left;
  color: var(--schrift);
  font-weight: 700;
  font-size: .84rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--linie);
  padding: .55rem .85rem;
}
.tabelle td {
  padding: .7rem .85rem;
  border-bottom: 1px solid var(--linie-leise);
  vertical-align: middle;
}
.tabelle tr:hover td { background: var(--karte-hell); }
.tabelle .rechts { text-align: right; }
.tabelle tr.unveraendert { opacity: .55; }

.aktion { white-space: nowrap; text-align: right; }
.aktion form { display: inline; }

/* ---------------------------------------------------------- Kennzeichen
 *
 * Kleine Merkwörter in Listen: Herkunft einer Box, Zustand beim RMS-Sync.
 * Nicht `.marke` nennen — die Klasse trägt in TB Web die Wortmarke im Kopf.
 */

.kennzeichen {
  display: inline-block;
  padding: .05rem .5rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .02em;
}
.kennzeichen.rms { background: var(--gelb); color: var(--auf-gelb); }
.kennzeichen.manuell { border: 1px solid var(--linie); color: var(--schrift-leise); }
.kennzeichen.neu { background: var(--gut); color: var(--grund-tief); }
.kennzeichen.aenderung { background: var(--achtung); color: var(--grund-tief); }

/* Ampel für die DDNS-Erreichbarkeit. Grün nur, wenn der Name wirklich auf den
 * Router zeigt — siehe backend/erreichbarkeit.py. Bernstein heißt: der Name
 * löst auf, aber auf etwas anderes. Grau heißt: kann noch gar nicht gehen. */
.ampel {
  display: inline-block;
  padding: .05rem .5rem;
  border-radius: 999px;
  border: 1px solid currentColor;
  font-size: .72rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: help;
}
.ampel.erreichbar,
.ampel.erreichbar_fest { color: var(--gut); }
.ampel.port_zu,
.ampel.falsche_adresse { color: var(--achtung); }
.ampel.kein_eintrag { color: var(--schlecht); }
.ampel.kein_weg,
.ampel.nichts_hinterlegt { color: var(--schrift-leise); }

.unterschied { margin: .35rem 0 0; padding-left: 1.1rem; font-size: .82rem; }
.unterschied .alt { text-decoration: line-through; color: var(--schrift-leise); }

/* ----------------------------------------------------------- Formulare */

input, select, textarea {
  background: var(--karte-hell);
  color: var(--schrift);
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  padding: .52rem .7rem;
  font: inherit;
  width: 100%;
  transition: border-color .13s ease, background-color .13s ease;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--gelb);
}

.formular { display: grid; gap: 1rem; max-width: 34rem; }
.feld { display: flex; flex-direction: column; gap: .3rem; }
.feld > span { color: var(--schrift-leise); font-size: .82rem; }
.feld > input, .feld > select, .feld > textarea { max-width: 100%; min-width: 0; }

fieldset {
  display: grid;
  gap: 1rem;
  border: 1px solid var(--linie);
  border-radius: var(--rund-gross);
  padding: 1rem 1.2rem 1.2rem;
  margin: 0;
}
legend {
  color: var(--schrift);
  font-weight: 600;
  font-size: .88rem;
  padding: 0 .4rem;
}

/* Ein Feldblock, der für den gewählten Boxtyp nicht gilt: Felder weg, dafür
 * der Satz, warum es sie hier nicht gibt. Siehe box_formular.html. */
.nur-eb { display: none; }
fieldset.inaktiv .feld,
fieldset.inaktiv .nur-tb { display: none; }
fieldset.inaktiv .nur-eb { display: block; }

/* ------------------------------------------------------------ Hinweise */

.hinweis {
  border-left: 3px solid var(--gelb);
  background: var(--karte);
  padding: .7rem 1rem;
  border-radius: 0 4px 4px 0;
  margin: 0 0 1rem;
  color: var(--schrift-leise);
  font-size: .86rem;
}
.hinweis.fehler { border-left-color: var(--schlecht); color: var(--schlecht); }

.meldung {
  border-left: 3px solid var(--gut);
  background: var(--karte);
  padding: .7rem 1rem;
  border-radius: 0 4px 4px 0;
  margin: 0 0 1.4rem;
}

.leer { color: var(--schrift-leise); }

/* ------------------------------------------------------------ Suchleiste */

.suchleiste {
  flex: 1 1 22rem;
  max-width: 34rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  padding: 0 .7rem;
  color: #86887f;
  margin-left: 1rem;
}
.suchleiste:focus-within { border-color: var(--gelb); }
.suchleiste input {
  border: 0;
  background: transparent;
  padding: .48rem 0;
  /* Die Kopfleiste ist in beiden Themen dunkel, die Schrift darin also hell. */
  color: #e9eae5;
}
.suchleiste input:focus { outline: none; }
:root[data-thema="hell"] .suchleiste { background: #17181a; border-color: #2a2c30; }

/* -------------------------------------------------------- Statuszeile
 *
 * 2026-09-23: Farben nach Vorgabe des Betreibers.
 *   online / AN  grün      offline / AUS  rot
 *   aktiv grün · inaktiv rot · Lager orange · Wartung blau · defekt schwarz
 */

.an  { color: var(--neon-gruen); font-weight: 600; }
.aus { color: var(--neon-rot); font-weight: 600; }

/* 2026-10-05: Keine dunklen Schilder hinter den Statuswörtern. Der Betreiber:
 * "Das schwarz Hinterlegte möchte ich nicht, zu viel Kontrast. Nimm die neuen
 * Farben und schreib sie etwas dicker." Also Neongrün und Neonrot frei auf dem
 * Grund, in beiden Themen. Schriftstärke 600 wie die Signalwerte — 800 war
 * dem Betreiber zu dick. */

.zustand { font-weight: 600; }
.zustand.aktiv   { color: var(--neon-gruen); }
.zustand.inaktiv { color: var(--neon-rot); }
/* 2026-09-23: Lager orange, Wartung blau — vorher beide blau und nur am Wort
 * zu unterscheiden. */
.zustand.lager   { color: var(--orange-signal); }
.zustand.wartung { color: var(--blau); }
/* Schwarz auf dunklem Grund wäre unsichtbar. Deshalb im dunklen Thema ein
 * heller Grund darunter — die Schrift bleibt schwarz, wie gewünscht. */
.zustand.defekt {
  color: #000;
  background: #d7d8d2;
  padding: .05rem .45rem;
  border-radius: 6px;
}
:root[data-thema="hell"] .zustand.defekt { background: none; padding: 0; }

/* Signal in drei Stufen, Grenzen in backend/statuszeile.py. */
.signal { font-weight: 600; white-space: nowrap; }
.signal.gut      { color: var(--gut); }
.signal.mittel   { color: var(--orange-signal); }
.signal.schlecht { color: var(--schlecht); }

.warnzeichen { color: var(--achtung); margin-left: .25rem; cursor: help; font-size: .95rem; }
/* Der Grund ist oft ein ganzer Satz: umbrechen und links anschlagen, damit das
 * Fenster am Zeilenanfang nicht aus dem Bild läuft. */
.warnzeichen[data-tipp]:hover::after,
.warnzeichen[data-tipp]:focus-visible::after {
  white-space: normal;
  width: 22rem;
  left: 0;
  transform: none;
}
.abfragezeit { font-size: .74rem; color: var(--schrift-leise); margin-left: .25rem; }
.vermerk {
  display: inline-block;
  margin-left: .3rem;
  padding: 0 .35rem;
  border: 1px solid var(--linie);
  border-radius: 4px;
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--schrift-leise);
  vertical-align: middle;
}
/* DIREKT in Grün, RMS in Bernstein: Auf einen Blick, wo der schnelle Weg
 * trägt und wo nur die Reserve. */
.vermerk.direkt { color: var(--neon-gruen); border-color: currentColor; }
.vermerk.rms    { color: var(--achtung); border-color: currentColor; }

.punktzeile { display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; }
.punkt {
  width: .6rem; height: .6rem;
  border-radius: 50%;
  flex: 0 0 auto;
  cursor: help;
}
/* Die Punkte tragen in beiden Themen den reinen Neonton. Als gefüllte Fläche
 * mit dunklem Rand und Schein brauchen sie keinen Schriftkontrast. */
.punkt.an, .punkt.aus { width: .7rem; height: .7rem; border: 1px solid rgba(0, 0, 0, .35); }
.punkt.an    { background: var(--neon-gruen); box-shadow: 0 0 6px 1px rgba(31, 207, 12, .7); }
.punkt.aus   { background: #ff1f44; box-shadow: 0 0 6px 1px rgba(255, 31, 68, .75); }
.punkt.offen { background: var(--schrift-leise); }
.adresse { font-size: .86rem; }

.statustabelle td { padding-top: .6rem; padding-bottom: .6rem; }

/* Pfeile neben der Spaltenüberschrift: Reihenfolge umdrehen. */
.sortierer {
  display: inline-flex;
  flex-direction: column;
  vertical-align: middle;
  margin-left: .35rem;
  padding: .1rem .3rem;
  border-radius: 5px;
  line-height: .85;
  font-size: .62rem;
  color: var(--schrift-leise);
}
.sortierer:hover { background: var(--karte-hell); text-decoration: none; }
.sortierer span { opacity: .4; }
.sortierer .gilt { color: var(--gelb-schrift); opacity: 1; }
th:has(.sortierer) { white-space: nowrap; }

.gruende { margin: 0; padding-left: 1.1rem; }

/* Auswahl in der Status-Spalte: welcher Status zuerst stehen soll. */
.statuswahl { display: inline-block; position: relative; vertical-align: middle; }
.statuswahl summary { list-style: none; cursor: pointer; }
.statuswahl summary::-webkit-details-marker { display: none; }
.sortierer.belegt span { color: var(--gelb-schrift); opacity: 1; }
.statusmenue {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 25;
  min-width: 11rem;
  padding: .3rem;
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  background: var(--karte-hell);
  box-shadow: var(--schatten);
  text-transform: none;
  letter-spacing: 0;
  font-size: .86rem;
  font-weight: 450;
}
.statusmenue a {
  display: block;
  padding: .38rem .6rem;
  border-radius: 7px;
  color: var(--schrift);
  white-space: nowrap;
}
.statusmenue a:hover { background: var(--karte); text-decoration: none; }
.statusmenue a.gewaehlt { background: var(--karte); font-weight: 600; }
.zuerstmerker {
  margin-left: .3rem;
  font-size: .68rem;
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
}

/* ----------------------------------------------------------- Symbole */

.sinnbild { display: block; flex: 0 0 auto; }

.symbolreihe { display: inline-flex; align-items: center; gap: .15rem; }
.symbolreihe form { display: inline; margin: 0; }

.symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 .35rem;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--schrift-leise);
  cursor: pointer;
  text-decoration: none;
  font: 600 .7rem var(--textschrift);
  letter-spacing: .04em;
}
.symbol:hover { color: var(--gelb-schrift); background: var(--karte-hell); text-decoration: none; filter: none; }
.symbol.wort { border: 1px solid var(--linie); height: 1.55rem; min-width: auto; }
.symbol.loeschen:hover { color: var(--schlecht); background: color-mix(in srgb, var(--schlecht) 12%, transparent); }
.symbol.aus { opacity: .3; cursor: not-allowed; }
.symbol.reset:hover { color: var(--neon-rot); background: color-mix(in srgb, var(--neon-rot) 12%, transparent); }

/* Auge im Passwortfeld. */
.passwortfeld { position: relative; display: block; }
.passwortfeld input { padding-right: 2.6rem; }
.augenknopf {
  position: absolute;
  top: 50%;
  right: .35rem;
  transform: translateY(-50%);
  padding: .3rem;
  background: none;
  color: var(--schrift-leise);
  border-radius: 7px;
}
.augenknopf:hover { color: var(--gelb-schrift); background: var(--karte); filter: none; }
button:disabled { opacity: .45; cursor: not-allowed; }
.symbol.aus:hover { color: var(--schrift-leise); background: none; }

/* ------------------------------------------------------------ Tooltip
 *
 * Ein kleines Fenster beim Überfahren, ohne Skript. Der Betreiber wollte beim
 * grünen Punkt "online", beim roten "offline" in einem kleinen Infofenster.
 */

[data-tipp] { position: relative; }
[data-tipp]:hover::after,
[data-tipp]:focus-visible::after {
  content: attr(data-tipp);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  transform: translateX(-50%);
  z-index: 30;
  padding: .3rem .55rem;
  border-radius: 6px;
  background: #1d1f22;
  color: #eef0ea;
  border: 1px solid #33363b;
  box-shadow: var(--schatten);
  font: 500 .74rem/1.3 var(--textschrift);
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  pointer-events: none;
}

/* ------------------------------------------------------ Löschdialog */

.dialog {
  border: 1px solid var(--linie);
  border-radius: var(--rund-gross);
  background: var(--karte);
  color: var(--schrift);
  padding: 1.4rem 1.6rem;
  max-width: 28rem;
  width: calc(100% - 2rem);
  box-shadow: var(--schatten);
}
.dialog::backdrop { background: rgba(0, 0, 0, .55); }
.dialog form { display: grid; gap: 1rem; }
.dialog p { margin: 0; }

button.gefahr { background: var(--schlecht); color: #fff; }
button.gefahr:disabled { opacity: .35; cursor: not-allowed; filter: none; }

/* ---------------------------------------------------- Infoseite, Kacheln */

.inforaster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
  gap: 1.2rem;
}
.inforaster .karte { padding: 1.2rem 1.4rem; }
.tabelle.schlicht th {
  width: 9.5rem;
  text-transform: none;
  font-size: .82rem;
  letter-spacing: 0;
  vertical-align: top;
  border-bottom: 1px solid var(--linie-leise);
}
.tabelle.schlicht tr:hover td { background: none; }

.kachelraster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: 1rem;
  margin-top: 1.2rem;
}
.kachel { display: flex; flex-direction: column; gap: .2rem; color: var(--schrift); padding: 1.2rem 1.3rem; }
.kachel:hover { text-decoration: none; border-color: var(--gelb); }
.kachelzahl { font: 600 2rem/1.1 var(--titelschrift); font-variant-numeric: tabular-nums; }
.kachelname { font-size: .92rem; }

/* 2026-09-27: Infoseite der Box — Angaben als Begriff und Wert nebeneinander. */
.stand { color: var(--schrift-leise); font-size: .86rem; margin: 0 0 1rem; }
.angaben {
  display: grid;
  grid-template-columns: 9.5rem 1fr;
  gap: .55rem 1rem;
  margin: 0;
}
.angaben dt { color: var(--schrift-leise); font-size: .84rem; padding-top: .1rem; }
.angaben dd { margin: 0; }
.umbrechen { white-space: pre-line; }
.firmware {
  display: inline-block;
  margin-left: .35rem;
  padding: 0 .4rem;
  border: 1px solid var(--linie);
  border-radius: 4px;
  font-size: .74rem;
  color: var(--schrift-leise);
  font-variant-numeric: tabular-nums;
}
.lanbereich { margin-top: 1.2rem; }
.freigabe { display: flex; align-items: center; gap: .45rem; padding: .1rem 0; }
.freigabe.abgeschaltet { opacity: .5; }
h3.abstand { margin-top: 1.4rem; }

/* Haken und Kreuz hinter jedem Port des LAN-Scans. */
.haken { font-size: 1rem; margin-left: .3rem; cursor: help; }
.porttabelle tr.unbelegt td { opacity: .5; }
.porttabelle tr.unbelegt:hover td { background: none; }
.hinweis.warnung { border-left-color: var(--achtung); color: var(--achtung); }
.weitere { margin-top: 1.2rem; padding: 1rem 1.4rem; }
.weitere summary { cursor: pointer; font-weight: 600; }
.weitere[open] summary { margin-bottom: .9rem; }
.ankreuz { display: flex; align-items: center; gap: .5rem; cursor: pointer; font-size: .88rem; }

.unstimmigkeiten { margin-top: 1.4rem; padding: 1.2rem 1.4rem; }
.befundstufe { font-weight: 600; font-size: .8rem; }
.befundstufe.fehler  { color: var(--neon-rot); }
.befundstufe.warnung { color: var(--achtung); }
.befundstufe.hinweis { color: var(--schrift-leise); }

/* 2026-10-07: Kästchen hinter jedem Befund. Weiß, wie vom Betreiber gewünscht;
   nach bestandener Nachprüfung steht an seiner Stelle ein grüner Haken. */
.abhakspalte { text-align: right; width: 1%; }
.abhakvermerk { margin-right: .5rem; }
.abhaken {
  width: 1.3rem;
  height: 1.3rem;
  padding: 0;
  vertical-align: middle;
  border: 1.5px solid var(--schrift-leise);
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
}
.abhaken:hover { border-color: var(--neon-gruen); filter: none; }
.abhaken.prueft { opacity: .5; cursor: progress; }
.abhaken[data-tipp]:hover::after { left: auto; right: 0; transform: none; }
.abgehakt { display: inline-flex; vertical-align: middle; color: var(--neon-gruen); }
tr.erledigt td { color: var(--schrift-leise); }
tr.erledigt .befundstufe { color: var(--schrift-leise); }

/* 2026-10-08: Bestellplattform. Das Menü steht abgesetzt unter den Gerätemenüs. */
.menuetrenner { display: block; height: 1px; margin: .8rem .85rem; background: var(--linie); }
.mitte { text-align: center; }
.anzahlfeld { width: 4.5rem; padding: .3rem .4rem; }
.hinweisfeld { min-width: 14rem; padding: .3rem .5rem; }
.namefeld { min-width: 9rem; padding: .3rem .5rem; }
.anzahlfeld.gespeichert, .namefeld.gespeichert, .hinweisfeld.gespeichert { border-color: var(--neon-gruen); }

/* Das weiße Kästchen mit grünem Haken — jeder kann es setzen und zurücknehmen. */
.haken {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 1.5px solid var(--schrift-leise);
  border-radius: 4px;
  background: #fff;
  color: var(--neon-gruen);
  cursor: pointer;
}
.haken svg { opacity: 0; }
.haken[aria-pressed="true"] svg { opacity: 1; }
.haken[aria-pressed="true"] { border-color: var(--neon-gruen); }
.haken:hover:not(:disabled) { border-color: var(--neon-gruen); filter: none; }
.haken:disabled { cursor: not-allowed; background: #e3e4dd; }

/* 2026-10-07: Zurück-Knopf vor der Überschrift einer Unterseite. */
.zurueck {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
  margin-right: .35rem;
  vertical-align: -.35rem;
  border-radius: 8px;
  color: var(--schrift-leise);
}
.zurueck:hover { color: var(--gelb-schrift); background: var(--karte-hell); text-decoration: none; }
.zurueck[data-tipp]:hover::after { left: 0; transform: none; }
/* Mit dem Pfeil davor brach "TBoxen (28)" neben den Knöpfen in zwei Zeilen um. */
.abschnittskopf h1 { white-space: nowrap; }

.werkzeugreihe { margin-bottom: 1rem; }
.werkzeugreihe form { margin: 0; }

/* Kleine Schirme: Tabellen dürfen seitlich rollen, statt die Seite zu sprengen. */
@media (max-width: 860px) {
  /* Auf schmalen Geräten wandert das Menü wieder nach oben, als rollende Reihe. */
  .gerippe { flex-direction: column; gap: 1rem; padding: 1rem 1rem 4rem; }
  .seitenmenue {
    position: static;
    flex-direction: row;
    overflow-x: auto;
    width: 100%;
    gap: .3rem;
    padding-bottom: .3rem;
  }
  .seitenmenue a {
    white-space: nowrap;
    border-left: 0;
    border-bottom: 3px solid transparent;
    border-radius: var(--rund) var(--rund) 0 0;
  }
  .seitenmenue a.hier { border-left: 0; border-bottom-color: var(--gelb); }
  .menuetrenner { width: 1px; height: auto; margin: .3rem .4rem; flex: 0 0 1px; }
  .tabelle { display: block; overflow-x: auto; white-space: nowrap; }
  .kopfzeile { flex-wrap: wrap; gap: .6rem; }
}