/* ---------------------------------------------------------------------------
   ComniWatch - Gestaltung

   Systemschriften, keine geladenen. Der Unterschied zu einer Standard-
   Oberflaeche entsteht nicht durch die Schrift, sondern durch Ruhe: wenige
   Linien, viel Weissraum, und Farbe nur dort, wo etwas zu tun ist.

   Grundsatz durchgehend: Was in Ordnung ist, steht leise da. Der Blick soll
   ohne Suchen bei dem landen, was auffaellt.
   --------------------------------------------------------------------------- */

:root {
  /* --rot ist die SCHRIFTFARBE fuer Kritisches, --rot-flaeche die Farbe einer
     gefuellten Knopfflaeche. Im hellen Modus dasselbe; im dunklen muss die
     Schriftfarbe aufhellen, damit man sie liest - eine Flaeche darf das
     nicht, sonst steht weisse Schrift auf hellem Rot. */
  --rot:         #b40218;
  --rot-flaeche: #b40218;
  --rot-dunkel:  #8a0212;
  --auf-rot:     #ffffff;
  --rot-schein:  rgba(180, 2, 24, .16);
  --rot-weich:   #fbe7ea;
  --rot-rand:    #e9a9b2;

  --gelb:       #8a5d00;
  --gelb-weich: #fdf1da;
  --gelb-rand:  #e3cd9a;
  --gelb-punkt: #d9a021;

  --gruen:      #256b3f;
  --gruen-weich:#e4f1e9;
  --gruen-rand: #b9dbc7;

  --text:       #1f2430;
  --text-leise: #5b6472;
  --text-still: #838c9b;

  --bg:         #eef0f3;
  --flaeche:    #ffffff;
  --flaeche-2:  #f5f6f8;
  --linie:      #dce0e6;
  --linie-fein: #e8ebef;

  --neutral:    #9aa4b4;   /* Balken ohne Aussage */
  --dunkel:     #3b4250;   /* "lange weg" */

  /* Die Schriften des Systems - keine geladenen. Der Unterschied zum Entwurf
     liegt nicht in der Schrift, sondern darin, WAS dasteht und wie ruhig es
     angeordnet ist. Die drei Namen bleiben getrennt, damit sich einzelne
     Rollen spaeter noch aendern lassen, ohne jede Regel anzufassen. */
  --schrift-display: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --schrift-text:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --schrift-daten:   -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --schrift-code:    ui-monospace, Consolas, "Courier New", monospace;

  --radius: 10px;
}

/* Dunkler Modus. Eine Ueberwachung sieht man auch abends an, und ein weisses
   Rechteck im dunklen Buero ist eine Zumutung. Es werden ausschliesslich die
   Werte oben neu gesetzt - keine Regel weiter unten kennt eine feste Farbe. */
@media (prefers-color-scheme: dark) {
  :root {
    --rot:         #ff6070;
    --rot-flaeche: #c8172c;
    --rot-dunkel:  #a81225;
    --auf-rot:     #ffffff;
    --rot-schein:  rgba(255, 96, 112, .22);
    --rot-weich:   #3a1219;
    --rot-rand:    #6b2a33;

    --gelb:       #e0a53a;
    --gelb-weich: #33270f;
    --gelb-rand:  #5c4718;
    --gelb-punkt: #e0a53a;

    --gruen:      #5fc98c;
    --gruen-weich:#132a1e;
    --gruen-rand: #24503a;

    --text:       #e7eaef;
    --text-leise: #a3acbb;
    --text-still: #78818f;

    --bg:         #12161d;
    --flaeche:    #1a1f28;
    --flaeche-2:  #212733;
    --linie:      #2c333f;
    --linie-fein: #232936;

    --neutral:    #5b6472;
    --dunkel:     #9aa4b4;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--schrift-text);
  font-size: 15.5px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--rot-flaeche); color: var(--auf-rot); }
:focus-visible { outline: 2px solid var(--rot); outline-offset: 2px; }

/* ---------- Kopf ---------- */
.kopf {
  display: flex;
  align-items: center;
  gap: 26px;
  background: var(--flaeche);
  border-bottom: 1px solid var(--linie);
  padding: 0 22px;
  height: 58px;
}
/* Die Bildmarke steht vor dem Schriftzug. Sie ist ein Geschwister der
   ComniCRM-Marke: dieselbe Kachel, dasselbe ausgesparte C, derselbe rote
   Punkt - unterschieden nur durch die Welle, die aus dem Punkt laeuft.

   Als Hintergrundbild und nicht als Bild-Element, damit sich im dunklen Modus
   die invertierte Fassung einsetzen laesst, ohne das Markup anzufassen. Die
   Aussparung im C ist ein echtes Loch: auf schwarzer Kachel braucht es
   deshalb im Dunkeln die weisse Fassung, sonst verschwindet die Kachel im
   Hintergrund. */
.marke {
  display: inline-flex;
  align-items: center;
  /* KEIN gap: der Schriftzug ist "Comni" + <span>Watch</span>, also zwei
     Flex-Kinder - ein gap traennte auch die beiden Worthaelften. Der Abstand
     zum Zeichen kommt deshalb aus dessen margin. */
  font-family: var(--schrift-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -.015em;
  color: var(--rot);
  text-decoration: none;
}
.marke::before {
  content: "";
  width: 25px; height: 25px;
  margin-right: 9px;
  flex: 0 0 auto;
  background: url(marke.svg) center / contain no-repeat;
}
.marke span { color: var(--text); }

@media (prefers-color-scheme: dark) {
  .marke::before { background-image: url(marke-invers.svg); }
}
.kopf nav { display: flex; gap: 2px; }
.kopf nav a {
  color: var(--text-leise);
  text-decoration: none;
  padding: 7px 12px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 14.5px;
}
.kopf nav a:hover { background: var(--flaeche-2); color: var(--text); }
.kopf nav a.aktiv { background: var(--rot-weich); color: var(--rot); }
.kopf .rechts {
  margin-left: auto; display: flex; align-items: center; gap: 14px;
  font-family: var(--schrift-daten); font-size: 12.5px;
}
.kopf .wer { color: var(--text-still); }
.kopf .rechts a { color: var(--rot); text-decoration: none; }
.kopf .rechts a:hover { text-decoration: underline; }

/* Keine Breitenbegrenzung. Die Geraeteliste hat sieben Spalten, und die
   Befundspalte ist die, wegen der man die Seite aufruft - jedes Pixel dort
   spart einen Zeilenumbruch. Begrenzt wird stattdessen gezielt das, was als
   FLIESSTEXT gelesen wird (.hinweis, .leseregel): eine Zeile mit zweihundert
   Zeichen liest niemand. */
main { padding: 30px 24px 60px; }
@media (min-width: 1600px) { main { padding-left: 34px; padding-right: 34px; } }

/* ---------- Ueberschriften ----------
   h1 schmallaufend und krachend, h2 mit der kraeftigen Linie darunter, die
   im Plakat einen Abschnitt oeffnet. Sie ersetzt Abstand durch Struktur:
   man sieht, wo etwas Neues anfaengt, ohne zu lesen. */
h1 {
  font-family: var(--schrift-display);
  font-weight: 700;
  font-size: 1.85rem;
  line-height: 1.1;
  letter-spacing: -.02em;
  margin: 0 0 8px;
  text-wrap: balance;
}
h2 {
  font-family: var(--schrift-display);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -.01em;
  margin: 38px 0 14px;
  padding-bottom: 9px;
  border-bottom: 2px solid var(--text);
}
h3 {
  font-family: var(--schrift-display);
  font-weight: 600;
  font-size: 1.05rem;
  margin: 0 0 8px;
}

.hinweis { color: var(--text-leise); margin: 0 0 20px; max-width: 72ch; }
.leer { color: var(--text-still); padding: 20px 0; }

/* ---------- Formulare ---------- */
.suchzeile { display: flex; gap: 8px; margin: 0 0 24px; }
input[type=text], input[type=password], input[type=number] {
  padding: 9px 12px;
  border: 1px solid var(--linie);
  border-radius: 7px;
  font: inherit;
  background: var(--flaeche);
  color: var(--text);
  min-width: 260px;
}
input[type=number] { min-width: 0; font-family: var(--schrift-daten); }
input:focus { outline: none; border-color: var(--rot); box-shadow: 0 0 0 3px var(--rot-schein); }

button, .knopf {
  display: inline-block;
  padding: 9px 16px;
  border: 1px solid var(--rot-flaeche);
  border-radius: 7px;
  background: var(--rot-flaeche);
  color: var(--auf-rot);
  font-family: var(--schrift-text);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
button:hover, .knopf:hover { background: var(--rot-dunkel); border-color: var(--rot-dunkel); }
.knopf.leise {
  background: var(--flaeche);
  color: var(--text);
  border-color: var(--linie);
}
.knopf.leise:hover { background: var(--flaeche-2); }

/* Kleine Ausgabe fuer Knoepfe, die IN einer Zeile stehen - etwa hinter jedem
   einzelnen Befund. Zurueckhaltend: durchsichtig mit feinem Rand. Acht weisse
   Kaesten im Befundkasten zoegen den Blick auf sich, und dort soll der BEFUND
   auffallen, nicht der Knopf daneben. Erst beim Darauffahren wird er fest. */
button.klein-knopf, .knopf.klein-knopf {
  padding: 2px 10px;
  font-family: var(--schrift-daten);
  font-size: 11.5px;
  font-weight: 400;
  border-radius: 5px;
  background: transparent;
  color: var(--text-still);
  border-color: var(--linie-fein);
}
button.klein-knopf:hover, .knopf.klein-knopf:hover {
  background: var(--flaeche);
  color: var(--text);
  border-color: var(--linie);
}

/* ---------- Tabellen ----------
   Spaltenkoepfe in Mono-Versalien: sie sind Beschriftung, kein Text, und
   sollen sich vom Inhalt sichtbar unterscheiden. */
.rahmen { overflow-x: auto; }
table {
  width: 100%;
  border-collapse: collapse;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  overflow: hidden;
}
th {
  text-align: left;
  font-family: var(--schrift-daten);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-still);
  background: var(--flaeche-2);
  padding: 12px 14px;
  border-bottom: 1px solid var(--linie);
  white-space: nowrap;
}
td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--linie-fein);
  vertical-align: top;
  color: var(--text-leise);
}
tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--flaeche-2); }
td.zahl, th.zahl {
  text-align: right;
  font-family: var(--schrift-daten);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
td.rechts, th.rechts { text-align: right; }
td a { color: var(--rot); font-weight: 600; text-decoration: none; }
td a:hover { text-decoration: underline; }

/* Kleingedrucktes ist fast immer eine Zeitangabe oder ein Messwert - also
   Mono, damit es sich von Text unterscheidet. */
.klein {
  display: block;
  font-family: var(--schrift-daten);
  font-size: 11.5px;
  color: var(--text-still);
}
.messwert { display: block; }

/* Merkmalsliste des Geraets: die Bezeichnung links ist Beschriftung, der
   Wert rechts ist Messung. */
table td:first-child, table th[scope] { color: var(--text); }
tbody th {
  background: transparent;
  border-bottom: 1px solid var(--linie-fein);
  color: var(--text-still);
  vertical-align: top;
}

/* ---------- Kachelband: die Zusammenfassung vor dem Detail ----------
   EIN durchgehendes Band, durch feine Linien geteilt - keine vier einzelnen
   Karten mit Abstand dazwischen. Gefaerbt wird nur die ZAHL, nie die Flaeche:
   eine ganze rote Kachel schreit auch dann, wenn eine Null darin steht.
   Zahl und Beschriftung stehen nebeneinander, damit sich jede Kachel als ein
   Satz liest: "3 brauchen Aufmerksamkeit". */
.kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  overflow: hidden;
  margin: 20px 0 26px;
}
.kachel {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 18px 22px;
  border-left: 1px solid var(--linie-fein);
}
.kachel:first-child { border-left: 0; }
.k-zahl {
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.k-zahl.k-kritisch { color: var(--rot); }
.k-zahl.k-warnung  { color: var(--gelb); }
.k-zahl.k-still    { color: var(--text-still); }
.k-text {
  font-size: 13.5px;
  line-height: 1.25;
  color: var(--text-leise);
}

/* ---------- Kundenbloecke ---------- */
.kunde {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  margin-bottom: 16px;
  overflow: hidden;
}
/* Leicht abgesetzt, damit die Bloecke bei mehreren Kunden untereinander
   nicht ineinanderlaufen - sonst liest man die Geraete des einen unter der
   Ueberschrift des anderen.

   Absichtlich nur eine Nuance dunkler und KEINE Farbe: ein eingefaerbter
   Balken, womoeglich noch nach Zustand, zoege staendig Aufmerksamkeit auf
   den Kundennamen. Die gehoert der Befundspalte. Die Ecken schneidet
   .kunde mit overflow:hidden ohnehin ab. */
.kunde-kopf {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding: 13px 16px 11px;
  background: var(--flaeche-2);
  border-bottom: 1px solid var(--linie);
}
/* Im Kundenblock ist die Ueberschrift eine Zeile in einer Liste, keine
   Abschnittsmarke - hier ohne die kraeftige Linie und ohne Abstand davor. */
.kunde-kopf h2 {
  font-size: 16px;
  margin: 0;
  padding: 0;
  border: 0;
}
.kunde-kopf .bilanz {
  font-size: 13px;
  color: var(--text-still);
  white-space: nowrap;
}
.bilanz .b-kritisch { color: var(--rot); }
.bilanz .b-warnung  { color: var(--gelb); }

/* Der Punkt traegt den Zustand - eine Spalte, die man senkrecht ueberfliegt */
.punkt {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--gruen);
  flex: 0 0 auto;
  position: relative;
  top: -1px;
}
.punkt.p-kritisch { background: var(--rot); }
.punkt.p-warnung  { background: var(--gelb-punkt); }
.punkt.p-hinweis  { background: var(--text-still); }
.punkt.p-ok       { background: var(--gruen); }

/* ---------- Geraetetabelle ----------
   Normalwerte leise (grau, normal), Abweichungen laut (farbig, fett).
   Das ist der ganze Trick: die Spalten sind vollstaendig, aber nur die
   Ausnahmen ziehen den Blick.

   Der Spaltenkopf jedes Kundenblocks bleibt beim Scrollen im Block oben
   stehen. Dafuer darf .rahmen hier KEIN overflow setzen - ein Scrollbehaelter
   waere der Bezugspunkt fuer sticky, und dann klebte nichts. */
.kunde .rahmen { border: 0; overflow: visible; }
table.geraete thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--flaeche);
}
table.geraete { border: 0; border-radius: 0; table-layout: fixed; }
table.geraete td { overflow: hidden; text-overflow: ellipsis; }
table.geraete th { background: transparent; border-bottom: 1px solid var(--linie-fein); padding: 9px 14px; }
table.geraete td { padding: 10px 14px; vertical-align: middle; }
table.geraete .sp-punkt { width: 26px; padding-right: 0; }
table.geraete .sp-name a {
  font-family: var(--schrift-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--text);
  text-decoration: none;
}
table.geraete .sp-name a:hover { color: var(--rot); text-decoration: underline; }
table.geraete .sp-schutz { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Die Befundspalte traegt alle Marken. Sie darf umbrechen - ein abgeschnittener
   Befund ist wertlos. Flexbox statt Zeilenhoehe, damit die Marken bei mehreren
   Zeilen gleichmaessig sitzen. */
table.geraete .sp-befund {
  white-space: normal;
  overflow: visible;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-content: flex-start;
}

/* Mitarbeiterauswahl: Namen zum Ankreuzen, mehrspaltig. Niemand kennt die
   Benutzernummern auswendig, und ein Eingabefeld dafuer waere eine Einladung
   zum Raten. */
.zuweisung {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 4px 18px;
  max-width: 820px;
  margin: 0 0 14px;
}
.zuweisung label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  cursor: pointer;
}

/* Zustand und Knoepfe einer Zeile nebeneinander statt untereinander -
   drei gestapelte Elemente machen aus jeder Zeile einen Block. */
.sp-zugang {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px 8px;
}
.sp-zugang form { display: contents; }

/* Die Leseregel unter der Liste - einmal erklaert, dann leise. */
.leseregel {
  margin: 18px 0 0;
  font-size: 13px;
  color: var(--text-still);
  max-width: 80ch;
}

/* leise = in Ordnung, nicht der Rede wert */
td.still, .leerwert { color: var(--text-still); font-weight: 400; }
/* laut = weicht ab */
.w-kritisch { color: var(--rot);  font-weight: 700; }
.w-warnung  { color: var(--gelb); font-weight: 600; }

/* Fuellstand: Balken plus Zahl, damit man ihn ohne Lesen erfassen kann */
.fuellstand { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.balken {
  width: 54px; height: 7px;
  background: var(--linie);
  border-radius: 4px;
  overflow: hidden;
  flex: 0 0 auto;
}
/* Neutral, solange nichts zu tun ist - Farbe bedeutet in dieser Oberflaeche
   durchgehend "hinsehen". Belegter Platz an sich ist weder gut noch schlecht. */
.balken i { display: block; height: 100%; background: var(--neutral); border-radius: 4px; }
.balken.b-warnung i  { background: var(--gelb-punkt); }
.balken.b-kritisch i { background: var(--rot); }
.zahlwert {
  font-family: var(--schrift-daten);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--text-still);
}
.sp-platz { text-align: right; }
.sp-platz .klein { text-align: right; }

/* ---------- Befundmarken ---------- */
/* Bewusst NICHT in der Mono-Schrift: ein Befund ist ein Satz, keine Marke.
   Das Plakat setzt Mono fuer kurze Versalien-Beschriftungen und Zahlen -
   ganze Saetze darin werden breit und schwer lesbar. */
.befund {
  display: inline-block;
  font-size: 12.5px;
  padding: 3px 9px;
  border-radius: 5px;
  background: var(--flaeche-2);
  color: var(--text-leise);
  border: 1px solid var(--linie);
}
.befund.f-kritisch { background: var(--rot-weich);  color: var(--rot);   border-color: var(--rot-rand); font-weight: 500; }
.befund.f-warnung  { background: var(--gelb-weich); color: var(--gelb);  border-color: var(--gelb-rand); }
.befund.f-hinweis  { background: var(--flaeche-2);  color: var(--text-still); }
.befund.f-ok       { background: var(--gruen-weich); color: var(--gruen); border-color: var(--gruen-rand); }
/* Quittiert: sichtbar, aber ohne Signalwirkung - gestrichelter Rand statt
   Farbe, damit man auf einen Blick sieht "das ist abgehakt", ohne dass es
   in der Liste noch um Aufmerksamkeit ruft. */
.befund.f-quittiert {
  background: transparent; color: var(--text-still);
  border-style: dashed; border-color: var(--linie);
}

.rest {
  margin: 0;
  padding: 11px 16px;
  font-size: 12.5px;
  color: var(--text-still);
  background: var(--flaeche);
  border-top: 1px solid var(--linie-fein);
}

/* ---------- Befundkasten auf der Geraeteseite ----------
   Steht ganz oben und beantwortet die Frage, mit der man hierher klickt:
   warum ist dieses Geraet rot? */
.befundkasten {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 17px 20px;
  margin: 0 0 22px;
}
/* Getoent NUR die Rueckfrage vor dem Quittieren - die ist ein Dialog und soll
   auffallen. Der Befundkasten selbst bleibt neutral: die Marken darin tragen
   die Farbe, wie in der Uebersicht. Eine ganze rote Flaeche machte dieselbe
   Aussage ein zweites Mal und faerbte dabei die halbe Seite ein. */
.befundkasten.bk-kritisch { border-color: var(--rot-rand);  background: var(--rot-weich); }
.befundkasten.bk-warnung  { border-color: var(--gelb-rand); background: var(--gelb-weich); }
.bk-titel {
  display: block;
  font-family: var(--schrift-daten);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--text-still);
  margin-bottom: 10px;
}
.bk-kritisch .bk-titel { color: var(--rot); }
.bk-warnung .bk-titel  { color: var(--gelb); }
/* Keine Aufzaehlungspunkte mehr: die Marke selbst ist der Anfang der Zeile,
   ein Punkt davor waere ein zweites Zeichen fuer dieselbe Sache. */
/* Abstand nach unten, damit ein folgender Absatz nicht an der letzten
   Zeile klebt und wie ein weiterer Listeneintrag aussieht. Ist die Liste
   das letzte Element im Kasten, entfaellt er wieder - sonst entstuende
   unten ein Loch. */
.bk-liste { margin: 0 0 14px; padding: 0; list-style: none; }
.bk-liste:last-child { margin-bottom: 0; }
.bk-liste li {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-bottom: 6px;
}
.bk-liste li:last-child { margin-bottom: 0; }

/* "seit gestern" und "quittieren" stehen HINTER der Marke, nicht darunter -
   .klein ist sonst ein Block und wuerde jede Zeile verdreifachen. */
.bk-liste li .klein { display: inline; font-weight: 400; }

/* ---------- WordPress-Uebersicht auf der Geraeteseite ---------- */
.wp-bilanz { margin: -10px 0 14px; font-size: 13px; }
.wp-bilanz .still { color: var(--text-still); }
/* Die aufgeklappte Zeile bleibt in der Liste erkennbar */
.wp-liste tr.wp-offen td { background: var(--flaeche-2); }
.wp-details { margin-bottom: 14px; }
/* Wie die "Details"-Verweise in der Liste: rot, ohne Unterstrich */
.wp-schliessen {
  float: right; text-transform: none; letter-spacing: 0;
  font-size: 13px; font-weight: 600; color: var(--rot); text-decoration: none;
}
.wp-schliessen:hover { text-decoration: underline; }
/* "- aktuell" und "5 Plugins" gehoeren HINTER die Version, nicht darunter */
.wp-details p .klein { display: inline; }

/* ---------- Quittiertes: da, aber leise ---------- */
.quittiert {
  margin: -10px 0 20px;
  padding: 11px 16px;
  border: 1px solid var(--linie);
  border-top: 0;
  border-radius: 0 0 var(--radius) var(--radius);
  background: var(--flaeche-2);
  color: var(--text-leise);
}
.quittiert .bk-liste li { color: var(--text-leise); }
.quittiert .einzeiler { display: inline; }

/* Befehlszeilen zum Abtippen oder Kopieren. Umbruch erlaubt - eine Adresse
   mit Schluessel ist laenger als jede Spalte, und abgeschnitten waere sie
   wertlos. */
.befehl {
  margin: 10px 0 18px;
  max-width: 980px;
  padding: 12px 14px;
  background: var(--flaeche-2);
  border: 1px solid var(--linie);
  border-radius: 7px;
  font-family: var(--schrift-code);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-all;
}

/* Einzeilige Formulare: Feld und Knopf nebeneinander. Begrenzt, weil ein
   Eingabefeld ueber die ganze Breite eines Grossbildschirms albern aussieht -
   eine Mailadresse ist keine tausend Pixel lang. */
.einzeiler, .quittungsform {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  max-width: 820px;
}
.einzeiler input[type=text], .quittungsform input[type=text] { flex: 1 1 260px; }
.quittungsform { margin-top: 12px; }

.sp-meldung { white-space: nowrap; font-family: var(--schrift-daten); font-size: 12.5px; }

/* ---------- Reiter auf der Geraeteseite ---------- */
.reiter {
  display: flex;
  gap: 2px;
  margin: 0 0 20px;
  border-bottom: 1px solid var(--linie);
}
.reiter a {
  padding: 9px 16px;
  text-decoration: none;
  color: var(--text-leise);
  font-family: var(--schrift-display);
  font-weight: 600;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  margin-bottom: -1px;
}
.reiter a:hover { color: var(--text); background: var(--flaeche-2); }
.reiter a.aktiv {
  background: var(--flaeche);
  border-color: var(--linie);
  color: var(--text);
}
.reiter .anzahl {
  font-family: var(--schrift-daten);
  font-size: 11.5px;
  font-weight: 400;
  color: var(--text-still);
  font-variant-numeric: tabular-nums;
}

/* Wiederherstellungsschluessel: gut lesbar und leicht zu markieren - man tippt
   ihn im Ernstfall auf einem Rechner ab, der nicht mehr startet. */
.schluessel {
  font-family: var(--schrift-code);
  font-size: 15px;
  letter-spacing: .03em;
  background: var(--flaeche-2);
  border: 1px solid var(--linie);
  border-radius: 5px;
  padding: 5px 10px;
  display: inline-block;
  user-select: all;
  word-break: break-all;
}

/* Betroffene Zeilen in der Merkmalsliste eines Geraets: getoente Flaeche plus
   ein farbiger Streifen an der Zeile - anders als bei einer Karte ist das
   hier die uebliche Art, eine Tabellenzeile zu markieren. */
tr.z-kritisch > th, tr.z-kritisch > td { background: var(--rot-weich); }
tr.z-warnung  > th, tr.z-warnung  > td { background: var(--gelb-weich); }
tr.z-hinweis  > th, tr.z-hinweis  > td { background: var(--flaeche-2); }
tr.z-kritisch > th:first-child { box-shadow: inset 3px 0 0 var(--rot); }
tr.z-warnung  > th:first-child { box-shadow: inset 3px 0 0 var(--gelb-punkt); }
tr.z-kritisch > th, tr.z-warnung > th { color: var(--text); }

/* ---------- Zustandsmarken ---------- */
.marke-zustand {
  display: inline-block;
  font-family: var(--schrift-daten);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  white-space: nowrap;
}
.z-ok    { background: var(--gruen-weich); color: var(--gruen); }
.z-spaet { background: var(--gelb-weich);  color: var(--gelb); }
.z-still { background: var(--rot-weich);   color: var(--rot); }
.z-weg   { background: var(--dunkel);      color: var(--flaeche); }
.z-neu   { background: var(--flaeche-2);   color: var(--text-still); }

.wert-schlecht { color: var(--rot); font-weight: 700; }
.wert-warnung  { color: var(--gelb); font-weight: 600; }

/* ---------- Verlaufsbalken ---------- */
.verlauf { display: flex; align-items: flex-end; gap: 2px; height: 34px; }
/* Neutral: ein Verlauf ist eine Beobachtung, kein Alarm. Rote Balken haetten
   auch dann nach Problem ausgesehen, wenn der Wert voellig in Ordnung ist. */
.verlauf i {
  display: block;
  width: 7px;
  background: var(--neutral);
  border-radius: 1px 1px 0 0;
  min-height: 2px;
}
/* Der juengste Tag steht rechts und wird etwas hervorgehoben. */
.verlauf i:last-child { background: var(--text-leise); }

/* ---------- Anmeldung ---------- */
.anmeldung {
  max-width: 350px;
  margin: 90px auto;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 12px;
  padding: 32px 30px;
}
.anmeldung h1 { text-align: center; margin-bottom: 24px; }
.anmeldung label {
  display: block;
  font-family: var(--schrift-daten);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-still);
  margin: 16px 0 6px;
}
.anmeldung input { width: 100%; min-width: 0; }
.anmeldung button { width: 100%; margin-top: 24px; }
.fehler {
  background: var(--rot-weich); color: var(--rot);
  padding: 11px 13px; border-radius: 7px; font-weight: 600;
}

.fuss {
  padding: 20px 24px 40px;
  color: var(--text-still);
  font-family: var(--schrift-daten);
  font-size: 11.5px;
  letter-spacing: .04em;
  border-top: 1px solid var(--linie);
}

/* ---------- Schmale Bildschirme ----------
   Acht Spalten mit festen Prozentbreiten passen auf kein Telefon: dort steht
   dann "K…" statt des Rechnernamens. Deshalb wird aus jeder Tabellenzeile ein
   Block - Name oben, Befund als Satz darunter, und die Messwerte dazwischen
   als eine fortlaufende Zeile mit Trennpunkten.

   Bewusst KEINE Spalte weggelassen: dieselbe Auskunft wie am Schreibtisch,
   nur anders gefaltet. */
@media (max-width: 1100px) {
  table.geraete colgroup, table.geraete thead { display: none; }
  table.geraete, table.geraete tbody, table.geraete tr { display: block; width: 100%; }
  table.geraete tr {
    position: relative;
    padding: 14px 16px 14px 34px;
    border-bottom: 1px solid var(--linie-fein);
  }
  table.geraete tr:last-child { border-bottom: 0; }
  table.geraete tbody tr:hover { background: transparent; }

  table.geraete td {
    display: inline;
    padding: 0;
    border: 0;
    overflow: visible;
    white-space: normal;
    text-align: left;
  }
  table.geraete td.sp-punkt { position: absolute; left: 14px; top: 20px; width: auto; }
  table.geraete td.sp-name { display: block; margin-bottom: 3px; }
  table.geraete td.sp-name .klein { display: inline; margin-left: 8px; }
  table.geraete td.sp-befund { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }

  /* Beschriftung dort, wo der Wert allein mehrdeutig waere. Ohne eigenes
     Leerzeichen davor - der Zeilenumbruch in der Zelle liefert schon eines,
     und zwei nebeneinander sehen aus wie ein Setzfehler. */
  table.geraete td[data-spalte]::after { content: attr(data-spalte); }

  /* Ein einsamer Gedankenstrich unter einem gesunden Geraet ist kein Inhalt,
     sondern eine leere Zeile. Am Schreibtisch haelt er die Spalte, hier
     nicht. */
  /* Ein einsamer Gedankenstrich unter einem gesunden Geraet ist kein Inhalt,
     sondern eine leere Zeile. Am Schreibtisch haelt er die Spalte, hier nicht. */
  table.geraete td.sp-befund .leerwert { display: none; }
  table.geraete td.sp-befund:empty, table.geraete td.sp-befund:not(:has(.befund)) { margin-top: 0; }

  /* Trennpunkte zwischen den Messwerten - vor jedem ausser dem ersten */
  table.geraete td.sp-platz ~ td:not(.sp-befund)::before {
    content: " \00b7 ";
    color: var(--text-still);
  }
}

@media (max-width: 700px) {
  .kopf { gap: 12px; padding: 0 12px; }
  .kopf .wer { display: none; }
  main { padding: 20px 12px 40px; }
  h1 { font-size: 1.5rem; }
  /* Vier Kacheln untereinander waeren eine ganze Bildschirmhoehe fuer vier
     Zahlen. Zwei nebeneinander passen und bleiben lesbar. */
  .kacheln { grid-template-columns: 1fr 1fr; }
  .kachel { padding: 14px 16px; gap: 9px; }
  .k-zahl { font-size: 25px; }
  .k-text { font-size: 12.5px; }
  .kachel:nth-child(3), .kachel:nth-child(4) { border-top: 1px solid var(--linie-fein); }
  .kachel:nth-child(odd) { border-left: 0; }
  .suchzeile { flex-direction: column; }
  input[type=text] { min-width: 0; width: 100%; }
  .kunde-kopf { padding: 14px 14px 2px; }
}


/* === Konsolen: Zuordnung fremder Gruppen zu Kunden =====================
   Die Tabelle ist eine Arbeitsliste, keine Uebersicht - man geht sie einmal
   von oben nach unten durch. Deshalb steht das Unerledigte optisch vorn:
   eine nicht zugeordnete Gruppe ist stumm, und stumme Fehler findet
   niemand von allein. */
table.zuordnungen select { max-width: 100%; width: 320px; }
table.zuordnungen td { vertical-align: middle; }
table.zuordnungen tr.unzugeordnet td:first-child {
  box-shadow: inset 3px 0 0 var(--gelb-punkt);
  font-weight: 600;
}
table.zuordnungen label.klein { display: inline; white-space: nowrap; }

@media (max-width: 700px) {
  /* Der Mandantenname und die Auswahl gehoeren zusammen; die Geraetezahl
     ist Beiwerk und darf schrumpfen. */
  table.zuordnungen select { width: 100%; }
}

/* === Symbol zur Geraeteart ==============================================
   Steht in der kleinen zweiten Zeile unter dem Namen und soll dort auch
   bleiben: kein Kasten, keine Farbe, nur eine Zeichnung in der Textfarbe.
   Wer die Liste ueberfliegt, sieht die Art am Umriss - wer sie liest,
   bemerkt das Symbol gar nicht. */
.artsymbol {
  display: inline-block;
  vertical-align: -2px;
  margin-right: 5px;
  opacity: .75;
  flex: none;
}