/* ============================================================
   Kontakte als Tabelle — Material Design 3

   MD3 gibt der Datentabelle drei Regeln, und die drei tragen das
   ganze Aussehen:

   1. Zeilenhoehe 52, Kopfzeile 56, Polster 16 links und rechts.
      Das ist kein Zierrat — bei 52 trifft man eine Zeile auch mit
      dem Finger, und das Auge zaehlt die Zeilen, ohne zu stolpern.
   2. Eine Linie je Zeile, keine Streifen und keine Rahmen um die
      Zellen. Ein Gitter zeichnet die Tabelle, nicht die Daten.
   3. Der Kopf ist stiller als der Inhalt: kleiner, gewichtiger,
      gedaempft. Er beschriftet, er konkurriert nicht.

   Die Sortierung folgt MD3: ein Pfeil hinter der Beschriftung, nur
   an der sortierten Spalte voll sichtbar, an den anderen beim
   Zeigen blass. So sieht man, wonach sortiert ist, UND dass man es
   woanders auch kann.

   Farben und Rundungen sind die der Suite, nicht die des
   Material-Katalogs — eine zweite Formensprache mitten in der
   Anwendung waere kein System, sondern ein Flickteppich.
   ============================================================ */

/* ---------- Der Umschalter in der Kopfzeile ----------
   Ein geteilter Knopf nach MD3: zwei Haelften, eine davon aktiv.
   Kein Schalter mit Griff — es sind zwei gleichwertige Sichten,
   nicht ein Zustand an oder aus. */
.kt-schalter {
  display: inline-flex;
  margin-right: 4px;
  border: 1px solid var(--scrm-linie, #e7eef6);
  border-radius: 999px;
  overflow: hidden;
  background: #fff;
}
.kt-sbtn {
  all: unset;
  display: grid;
  place-items: center;
  width: 38px;
  height: 34px;
  color: var(--scrm-mut, #8a97a8);
  cursor: pointer;
  transition: background .12s, color .12s;
}
.kt-sbtn .material-symbols-rounded { font-size: 19px; }
.kt-sbtn:hover { background: #f1f5fa; color: var(--scrm-text, #12233a); }
.kt-sbtn.an {
  background: rgba(var(--accent-rgb, 47, 122, 214), .14);
  color: var(--accent-dark, #c96a22);
}
.kt-sbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* ---------- Die Flaeche ---------- */
.kt-wrap {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 0 0 1px var(--scrm-linie, #e7eef6);
  overflow: hidden;
}
/* Die Maschine gibt #scrmInhalt keine Hoehe, weil ihre Liste
   waechst. Die Tabelle soll dagegen bis unten reichen und IN sich
   rollen — sonst scrollt die ganze Seite und die Kopfzeile der
   Tabelle ist beim dreissigsten Kontakt nicht mehr zu sehen. */
.scrm-body:has(.kt-wrap) { display: flex; flex-direction: column; }
#scrmInhalt:has(.kt-wrap) { flex: 1; min-height: 0; display: flex; }

/* ---------- Leiste ueber der Tabelle ---------- */
.kt-leiste {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--scrm-linie, #e7eef6);
}
.kt-suchfeld {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  flex: 0 1 300px;
  padding: 7px 12px;
  border: 1px solid var(--scrm-linie, #e7eef6);
  border-radius: 999px;
  background: #f7fafd;
}
.kt-suchfeld:focus-within { border-color: var(--accent); background: #fff; }
.kt-suchfeld .material-symbols-rounded { font-size: 18px; color: var(--scrm-mut, #8a97a8); flex: none; }
.kt-suchfeld input {
  all: unset;
  flex: 1;
  min-width: 0;
  font-size: 13px;
  color: var(--scrm-text, #12233a);
}
.kt-zahlen { font-size: 12.5px; color: var(--scrm-mut, #8a97a8); font-variant-numeric: tabular-nums; }
.kt-mhalter { position: relative; margin-left: auto; }

/* ---------- Spaltenmenue ----------
   Haengt IM Halter, nicht am body. Ein Menue am body gilt fuer
   jeden Empfaenger, der in der Erfassungsphase horcht, als
   "ausserhalb" — und davon hat die Suite einige. Hier drin kann
   das nicht passieren. */
.kt-menue {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  width: 232px;
  max-height: 60vh;
  overflow-y: auto;
  padding: 7px;
  background: #fff;
  border: 1px solid var(--scrm-linie, #e7eef6);
  border-radius: 12px;
  box-shadow: 0 10px 28px -12px rgba(18, 35, 58, .4);
}
.kt-menue[hidden] { display: none; }
.kt-mtitel {
  padding: 5px 9px 7px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--scrm-mut, #8a97a8);
}
.kt-mz {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
}
.kt-mz:hover { background: #f1f5fa; }
.kt-mz.fest { cursor: default; color: var(--scrm-mut, #8a97a8); }
.kt-mz.fest:hover { background: none; }
.kt-mz input { accent-color: var(--accent); }
.kt-mz small { margin-left: auto; font-size: 10.5px; color: var(--scrm-mut, #8a97a8); }
.kt-mzurueck {
  all: unset;
  display: block;
  width: 100%;
  margin-top: 5px;
  padding: 8px 9px;
  border-top: 1px solid var(--scrm-linie, #e7eef6);
  box-sizing: border-box;
  font-size: 12.5px;
  color: var(--scrm-mut, #8a97a8);
  text-align: center;
  cursor: pointer;
}
.kt-mzurueck:hover { color: var(--accent-dark, #c96a22); }

/* ---------- Die Tabelle ---------- */
.kt-rollfeld { flex: 1; min-height: 0; overflow: auto; }
.kt-tab {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  /* fixed, nicht auto: sonst verhandelt der Browser die Breiten mit
     dem Inhalt neu, und eine gezogene Spalte springt beim naechsten
     Zeichnen zurueck. */
  table-layout: fixed;
}

/* ---------- Kopf ---------- */
.kt-th {
  position: sticky;
  top: 0;
  z-index: 2;
  height: 56px;
  padding: 0;
  background: #fff;
  border-bottom: 1px solid var(--scrm-linie, #e7eef6);
  text-align: left;
  vertical-align: middle;
  user-select: none;
}
.kt-thbtn {
  all: unset;
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
  box-sizing: border-box;
  height: 56px;
  padding: 0 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--scrm-mut, #8a97a8);
  cursor: pointer;
}
.kt-thbtn > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kt-th.rechts .kt-thbtn { justify-content: flex-end; flex-direction: row-reverse; }
.kt-th:hover .kt-thbtn { color: var(--scrm-text, #12233a); }
.kt-th.sortiert .kt-thbtn { color: var(--scrm-text, #12233a); }

/* Der Pfeil: an der sortierten Spalte da, an den anderen erst beim
   Zeigen und blass. Das beantwortet zwei Fragen auf einmal —
   wonach ist sortiert, und wo kann ich sonst noch sortieren. */
.kt-pfeil {
  font-size: 16px;
  flex: none;
  opacity: 0;
  transition: opacity .12s, transform .12s;
}
.kt-th:hover .kt-pfeil { opacity: .4; }
.kt-th.sortiert .kt-pfeil { opacity: 1; color: var(--accent-dark, #c96a22); }

/* Der Griff zum Breitziehen. Vier Pixel breit, aber mit einem
   groesseren Greifbereich — man trifft sonst die Linie nicht. */
.kt-griff {
  position: absolute;
  top: 10px;
  right: -3px;
  bottom: 10px;
  width: 7px;
  z-index: 3;
  cursor: col-resize;
}
.kt-griff::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 3px;
  width: 1px;
  background: var(--scrm-linie, #e7eef6);
  transition: background .12s;
}
.kt-th:hover .kt-griff::after,
.kt-griff:hover::after { background: var(--accent); }
.kt-th:last-child .kt-griff { display: none; }
body.kt-zieht-breite { cursor: col-resize; user-select: none; }

/* Ziehen zum Umstellen. */
.kt-th.zieht { opacity: .45; }
.kt-th.zielLinks  { box-shadow: inset 2px 0 0 var(--accent); }
.kt-th.zielRechts { box-shadow: inset -2px 0 0 var(--accent); }

/* ---------- Zeilen ---------- */
.kt-tr { cursor: pointer; }
.kt-tr:hover > .kt-td { background: #f5f9fd; }
.kt-tr:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.kt-td {
  height: 52px;
  padding: 0 16px;
  border-bottom: 1px solid rgba(18, 35, 58, .06);
  font-size: 13px;
  color: var(--scrm-text, #12233a);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: background .1s;
}
.kt-td.rechts { text-align: right; }
.kt-tdname { display: flex; align-items: center; gap: 10px; }
.kt-av {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}
.kt-nam { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Ein fehlender Wert ist ein Strich, kein leeres Feld. Leer sieht
   aus wie ein Fehler der Anzeige; der Strich sagt "steht nicht da". */
.kt-ohne { color: #c6d0da; }
.kt-mono { font-variant-numeric: tabular-nums; }
.kt-zahl { font-variant-numeric: tabular-nums; font-weight: 600; }

.kt-chip, .kt-tag {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  background: #eef3f9;
  color: #41556d;
}
.kt-tag { margin-right: 4px; }
.kt-flagge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  background: #fdeceb;
  color: var(--scrm-kalt, #b3261e);
}
/* A, B, C: die Qualifizierung ist eine Rangfolge, also soll man sie
   auch als Rangfolge sehen und nicht dreimal dasselbe Grau. */
.kt-quali {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 800;
  background: #eef3f9;
  color: #41556d;
}
.kt-quali.qA { background: #e2f3ea; color: #0e7c6b; }
.kt-quali.qB { background: #fdeedf; color: #b3620f; }
.kt-quali.qC { background: #eef3f9; color: #6b7b8c; }

.kt-leer {
  padding: 52px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--scrm-mut, #8a97a8);
}

/* ============================================================
   Was Firmen und Deals dazu brauchen
   ============================================================ */

/* Die Firmenseite zeichnet in #crsEigen, nicht in #scrmInhalt.
   Dieselbe Regel wie dort: die Tabelle soll bis unten reichen und
   IN sich rollen, sonst scrollt die Seite und die Kopfzeile der
   Tabelle ist beim dreissigsten Eintrag nicht mehr zu sehen. */
#crsEigen:has(.kt-wrap) { display: flex; min-height: 0; }

/* Eine Firma ist kein Gesicht. Darum ein eckiges Zeichen mit
   abgerundeten Ecken statt eines Kreises — und in Grau, weil der
   Anfangsbuchstabe einer Firma keine Person unterscheidet,
   sondern nur die Zeile findet. */
.kt-av.eckig {
  border-radius: 8px;
  background: #eef3f9;
  color: #41556d;
  font-size: 13px;
}

/* Die Phase ist die wichtigste Spalte der Dealtabelle, und sie ist
   eine Reihenfolge. Die Farben laufen deshalb mit: grau fuers
   Vorzimmer, blau fuer Bedarf, orange fuers Angebot, violett fuer
   die Verhandlung, gruen fuer gewonnen, rot fuer verloren. Wer die
   Spalte ueberfliegt, sieht die Verteilung, ohne zu lesen. */
.kt-phase {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  background: #eef3f9;
  color: #41556d;
}
.kt-phase.punklar      { background: #eef3f9; color: #6b7b8c; }
.kt-phase.pbedarf      { background: #e2eefb; color: #15618f; }
.kt-phase.pangebot     { background: #fdeedf; color: #b3620f; }
.kt-phase.pverhandlung { background: #eee9fb; color: #5a42a8; }
.kt-phase.pgewonnen    { background: #e2f3ea; color: #0e7c6b; }
.kt-phase.pverloren    { background: #fdeceb; color: #b3261e; }

/* Ein faelliges Datum in der Vergangenheit ist im Vertrieb keine
   Angabe, sondern eine Mahnung. Die einzige Zelle mit einer
   Wertung — und sie hat eine verdient. */
.kt-mono.spaet { color: var(--scrm-kalt, #b3261e); font-weight: 700; }

/* Der Lebenszyklus einer Firma ist eine Reihenfolge, also laufen
   die Farben mit: grau für den Lead, blau für den Interessenten,
   grün für den Kunden, gedämpft für inaktiv, rot für verloren. */
.kt-fstatus {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  background: #eef3f9;
  color: #41556d;
}
.kt-fstatus.slead        { background: #eef3f9; color: #6b7b8c; }
.kt-fstatus.sinteressent { background: #e2eefb; color: #15618f; }
.kt-fstatus.skunde       { background: #e2f3ea; color: #0e7c6b; }
.kt-fstatus.sinaktiv     { background: #f2f4f6; color: #9aa7b4; }
.kt-fstatus.sverloren    { background: #fdeceb; color: #b3261e; }