/* ---------------------------------------------------------------------------
   Kundenbereich - Ergaenzungen zu rmm.css

   Nur was die interne Oberflaeche nicht hat. Die Farben, Schriften und
   Abstaende kommen von dort, damit beides erkennbar dasselbe System ist.

   Ein Unterschied ist Absicht: hier wird nichts eingefaerbt, was der Kunde
   nicht beeinflussen kann. Der Punkt zeigt, ob etwas anliegt; die Befunde
   selbst stehen ruhig da, mit dem Bearbeitungsstand daneben. Eine Wand aus
   roten Marken waere fuer jemanden, der nichts tun kann, nur beunruhigend.
   --------------------------------------------------------------------------- */

/* Der Kundenname ist kein Verweis - es gibt keine Detailseite dahinter. */
.kundenliste .g-name {
  display: block;
  font-weight: 600;
  color: var(--text);
}

.ohne-befund { color: var(--text-still); }

/* Befund plus Bearbeitungsstand als ein Block: die beiden gehoeren zusammen,
   und der Stand ist die eigentliche Botschaft. */
.kbefund {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  padding: 6px 0;
}
.kbefund + .kbefund { border-top: 1px solid var(--linie-fein); }
.kbefund.k-kritisch { color: var(--text); font-weight: 600; }
.kbefund.k-warnung  { color: var(--text-leise); }

/* Der Stand ist die Zusage. Gruen erst, wenn wirklich jemand dran war -
   "bemerkt" allein ist noch keine Leistung. */
.kstand {
  font-size: 11.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap;
  background: var(--flaeche-2);
  color: var(--text-still);
  border: 1px solid var(--linie);
}
.kstand.s-eingeplant { background: var(--gelb-weich); color: var(--gelb); border-color: var(--gelb-rand); }
.kstand.s-bearbeitet { background: var(--gruen-weich); color: var(--gruen); border-color: var(--gruen-rand); }

/* Im Kundenbereich gibt es keine Suchzeile und keine Reiter - der Kasten
   darunter braucht deshalb oben etwas Luft. */
.kunde { margin-top: 4px; }

@media (max-width: 900px) {
  /* Die Blockdarstellung aus rmm.css greift auch hier; der Befundblock
     bekommt nur etwas mehr Abstand, weil er zwei Zeilen tragen kann. */
  table.geraete.kundenliste td.sp-befund { display: block; margin-top: 8px; }
  .kbefund { padding: 4px 0; }
}

/* === Rueckblick: was erledigt wurde =====================================
   Eigene Farbe, aber zurueckhaltend. Erledigtes soll erkennbar erledigt
   aussehen und trotzdem nicht lauter wirken als das, was gerade ansteht -
   deshalb steht der Abschnitt auch unter der Geraeteliste. */
.k-gut { color: var(--gruen, #256b3f); }

.rueckblick-titel {
  margin: 34px 0 6px;
  font-size: 1.05rem;
  font-weight: 600;
}

.kbefund.k-erledigt {
  color: var(--text-leise);
  text-decoration: none;
}
.kbefund.k-erledigt::before {
  /* Der Haken sagt in einem Zeichen, was sonst eine Spalte kostet. */
  content: "\2713\00a0";
  color: var(--gruen, #256b3f);
  font-weight: 700;
}

/* === Rueckfrage ========================================================
   Ein Verweis und kein Knopf: er steht neben jedem einzelnen Befund, und
   ein Dutzend Knoepfe untereinander sieht nach Formular aus, nicht nach
   Angebot. Zurueckhaltend, aber auffindbar - wer ihn sucht, findet ihn;
   wer nur liest, wird nicht gedraengt. */
.kfrage {
  display: inline-block;
  margin-left: 8px;
  font-size: 12px;
  color: var(--rot);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.kfrage:hover { border-bottom-color: var(--rot); }

/* Schon gefragt - dieselbe Form wie der Bearbeitungsstand, damit es sich
   einreiht statt zu blinken. */
.kstand.s-gefragt {
  background: var(--rot-weich);
  color: var(--rot);
  border-color: var(--rot-rand);
}