/* ============================================================
   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 ---------- */
/* Die Huelle ist durchsichtig. Vorher war sie eine weisse
   Flaeche um alles — Kopfzahlen, Leiste und Tabelle lagen
   gemeinsam darin, und zwischen den Karten und der Tabelle stand
   ein weisser Streifen, der nichts bedeutete. Jetzt steht jedes
   Teil fuer sich auf der Seite, und weiss ist nur noch das, was
   man auch anfasst: die Tabelle. */
.kt-wrap {
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* Ohne min-width:0 nimmt dieses Flex-Kind die MINDESTbreite
     seines Inhalts — und die Tabelle hat min-width:860px. Es
     waere dann breiter als sein Rahmen, sobald der schmaler wird
     (etwa wenn das Firmenblatt von rechts Platz nimmt). */
  min-width: 0;
  height: 100%;
  background: transparent;
}
/* 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 ---------- */
/* Eine Zeile fuer alles, womit man die Liste einstellt: Ansicht
   links, Filter in der Mitte, Gruppierung rechts. Ohne Polster
   und ohne Trennlinie — sie steht auf der Seite, nicht in einem
   Kasten. */
.kt-leiste {
  --kt-zh: 36px;
  flex: none;
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  padding: 0;
  margin-bottom: 12px;
}
.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 ---------- */
/* Die weisse Flaeche sitzt jetzt hier — um die Tabelle, und nur
   um sie. */
.kt-rollfeld {
  flex: 1;
  min-height: 0;
  overflow: auto;
  background: #fff;
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px var(--scrm-linie, #e7eef6);
}
.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 ---------- */
/* Gesperrte Grossbuchstaben auf hellem Grund: die Kopfzeile ist
   kein Inhalt, sie benennt ihn. Vorher stand sie in derselben
   Schrift wie die Zeilen darunter und in derselben Farbe wie die
   Flaeche — man las sie als erste Zeile mit. */
.kt-th {
  position: sticky;
  top: 0;
  z-index: 2;
  height: 42px;
  padding: 0;
  background: #f7f9fc;
  border-bottom: 1px solid var(--scrm-linie, #e7eef6);
  text-align: left;
  vertical-align: middle;
  user-select: none;
}
.kt-th:first-child { border-top-left-radius: 16px; }
.kt-th:last-child { border-top-right-radius: 16px; }
.kt-th:hover { background: #eef3f8; }
.kt-thbtn {
  all: unset;
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
  box-sizing: border-box;
  height: 42px;
  padding: 0 15px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--scrm-text2, #4b5159);
  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; }

/* ============================================================
   Die Kopfzahlen ueber der Firmentabelle

   Label oben, grosse Zahl darunter, Erlaeuterung unten — gleich
   hohe Karten in einem Raster, das von selbst umbricht. Dieselbe
   Form wie auf der Aufgaben- und der Deal-Seite, damit alle drei
   gleich gelesen werden.
   ============================================================ */
.kt-kopfzahlen {
  flex: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.4fr) auto;
  gap: 10px;
  margin-bottom: 14px;
}
.kt-kz {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 13px 15px 14px;
  border-radius: 15px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--scrm-linie, #e7eef6);
}
.kt-kzk { display: flex; align-items: center; gap: 8px; min-width: 0; }
.kt-kzk b {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  font-weight: 650;
  color: var(--scrm-text2, #4b5159);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Die Woerter stehen klein im Satz — als Label oben gehoeren sie
   gross. first-letter statt capitalize: sprachrichtig. */
.kt-kzk b::first-letter { text-transform: uppercase; }
.kt-kzp {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  background: #f1f5f9;
  color: var(--scrm-mut, #8b9099);
}
.kt-kzp .material-symbols-rounded { font-size: 14px; }

/* DIE ZAHL. Sie ist die Nachricht, nicht das Beiwerk. */
.kt-kzahl {
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  color: var(--scrm-tinte, #12233a);
}
.kt-kzu {
  font-size: 11.5px;
  color: var(--scrm-mut, #8b9099);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kt-kz.warn .kt-kzahl { color: var(--scrm-kalt, #b3261e); }
.kt-kz.warn .kt-kzp { background: rgba(179, 38, 30, .1); color: var(--scrm-kalt, #b3261e); }

/* Der Ring zeigt nur — darum keine Flaeche zum Draufdruecken. */
.kt-ring { flex-direction: row; align-items: center; gap: 11px; padding: 13px 16px; }
.kt-ring svg { width: 38px; height: 38px; flex: none; }
.kt-ring circle { fill: none; stroke-width: 3; }
.kt-ring .rh { stroke: #e8eef5; }
.kt-ring .rv {
  stroke: var(--scrm-gut, #0e7c6b);
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: center;
  transition: stroke-dasharray .7s cubic-bezier(.3, .85, .25, 1);
}
.kt-ring b { display: block; font-size: 17px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kt-ring small { display: block; font-size: 11px; color: var(--scrm-mut, #8b9099); white-space: nowrap; }

@media (max-width: 1240px) {
  .kt-kopfzahlen { grid-template-columns: repeat(2, minmax(0, 1fr)) auto; }
}
@media (max-width: 760px) {
  .kt-kopfzahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kt-ring { grid-column: span 2; }
}

/* ---------- Die Zellen der Firmen-Uebersicht ---------- */
/* Zwei Zeilen in einer Zelle: Name oben, Status und Gruendung
   darunter. Die Zeile wird dadurch hoeher — das ist gewollt, sie
   traegt jetzt zwei Aussagen. */
.kt-av.eckig.gross {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  font-size: 12px;
  color: #fff;
}
.kt-ft { min-width: 0; }
.kt-ft b {
  display: block;
  font-weight: 650;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kt-ft small { display: block; font-size: 11.5px; color: var(--scrm-mut, #8b9099); }

.kt-br { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.kt-br i { width: 7px; height: 7px; border-radius: 50%; flex: none; }

.kt-sitz small { font-size: 11.5px; color: #bfcbd8; font-weight: 500; }

/* Mit Zeichen davor — und eine fehlende Zahl sieht anders aus
   als eine vorhandene. */
.kt-zic {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.kt-zic .material-symbols-rounded { font-size: 15px; color: var(--scrm-mut, #8b9099); }
.kt-zic.ohne { color: #bfcbd8; font-weight: 500; }
.kt-zahl.gut { color: var(--scrm-gut, #0e7c6b); }

/* ============================================================
   Die Leiste der Firmenseite: Ansicht, Filter, Gruppierung
   ============================================================ */
.kt-leiste.kt-schlicht { padding: 11px 14px; margin-bottom: 0; border-bottom: 1px solid var(--scrm-linie, #e7eef6); }

.kt-seg {
  display: inline-flex; align-items: center; height: var(--kt-zh); box-sizing: border-box;
  padding: 3px; border-radius: 11px; background: #e9eef4; gap: 2px; flex: none;
}
.kt-seg button {
  all: unset; box-sizing: border-box; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 12px; border-radius: 8px;
  font-size: 12.5px; font-weight: 700; color: var(--scrm-text2, #4b5159);
}
.kt-seg button .material-symbols-rounded { font-size: 17px; }
.kt-seg button.an { background: #fff; color: var(--scrm-tinte, #12233a); box-shadow: 0 1px 3px rgba(20,40,70,.12); }

/* Der Filter nimmt den Platz zwischen Ansicht und Gruppierung. */
.kt-filter {
  position: relative; flex: 1; min-width: 230px;
  height: var(--kt-zh); box-sizing: border-box;
  display: flex; align-items: center; gap: 7px;
  padding: 0 8px 0 11px; border-radius: 10px; background: #fff;
  box-shadow: inset 0 0 0 1px var(--scrm-linie2, #d6e2ef); cursor: text;
}
.kt-filter:focus-within { box-shadow: inset 0 0 0 1.6px var(--accent, #2f7ad6); }
.kt-filter > .material-symbols-rounded { font-size: 18px; color: var(--scrm-mut, #8a97a8); flex: none; }
/* Mehr als ein paar Filter rollen seitlich, statt die Ansichten
   zu verdraengen. */
.kt-chips { display: flex; align-items: center; gap: 6px; max-width: 55%; overflow-x: auto; scrollbar-width: none; }
.kt-chips::-webkit-scrollbar { display: none; }
.kt-chip {
  flex: none; display: inline-flex; align-items: center; gap: 5px;
  height: 26px; padding: 0 4px 0 9px; border-radius: 8px; background: #eef2f6;
  font-size: 12px; font-weight: 650; white-space: nowrap; color: var(--scrm-text2, #4b5159);
}
.kt-chip small { font-size: 9.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; opacity: .62; }
.kt-chip .material-symbols-rounded { font-size: 15px; }
.kt-chip button {
  all: unset; cursor: pointer; display: grid; place-items: center;
  width: 20px; height: 20px; border-radius: 6px;
}
.kt-chip button:hover { background: rgba(16,24,40,.1); }
.kt-chip button .material-symbols-rounded { font-size: 14px; }
.kt-fhuelle { position: relative; flex: 1; min-width: 110px; display: flex; }
.kt-filter input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font: inherit; font-size: 13px; color: inherit; padding: 4px 0;
}
.kt-filter input::placeholder { color: var(--scrm-mut, #8a97a8); }

/* Die Vorschlaege: was es in den Daten wirklich gibt. */
.kt-vorschlag {
  position: absolute; left: 0; top: calc(100% + 9px); min-width: 300px; z-index: 40;
  max-height: 340px; overflow: auto; padding: 7px; border-radius: 13px; background: #fff;
  box-shadow: 0 20px 44px -14px rgba(18,35,58,.4), 0 0 0 1px var(--scrm-linie, #e7eef6);
  cursor: default;
}
.kt-vg { padding: 6px 8px 3px; font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--scrm-mut, #8a97a8); }
.kt-vz {
  all: unset; cursor: pointer; display: flex; align-items: center; gap: 9px;
  width: 100%; box-sizing: border-box; padding: 6px 8px; border-radius: 8px; font-size: 13px;
}
.kt-vz:hover { background: #eef3f8; }
.kt-vz .material-symbols-rounded { font-size: 16px; color: var(--scrm-mut, #8a97a8); }
.kt-vt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kt-vn {
  min-width: 22px; height: 19px; padding: 0 6px; border-radius: 10px; display: grid; place-items: center;
  background: #eef2f6; font-size: 11px; font-weight: 800; color: var(--scrm-text2, #4b5159);
  font-variant-numeric: tabular-nums;
}

.kt-gruppierung {
  display: inline-flex; align-items: center; height: var(--kt-zh); box-sizing: border-box;
  gap: 6px; white-space: nowrap; flex: none;
  font-size: 12.5px; font-weight: 600; color: var(--scrm-text2, #4b5159);
}
.kt-gruppierung .material-symbols-rounded { font-size: 17px; color: var(--scrm-mut, #8a97a8); }
.kt-gruppierung .crs-sel { height: var(--kt-zh); box-sizing: border-box; }
.kt-leiste .kt-mhalter { flex: none; }
.kt-leiste .kt-spaltenbtn { height: var(--kt-zh); box-sizing: border-box; }

.kt-treffer { flex: none; margin: -4px 2px 10px; font-size: 12px; color: var(--scrm-mut, #8a97a8); }
.kt-treffer b { color: var(--scrm-tinte, #12233a); }

/* Gruppenkoepfe in der Tabelle. */
.kt-gkopf td {
  background: #eef3f8; padding: 7px 15px; cursor: default;
  font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: var(--scrm-text2, #4b5159);
}
.kt-gkopf .n { margin-left: 8px; opacity: .6; }

/* ---------- Karten und Branchen ----------
   Sie bringen ihre eigenen Flaechen mit, also faellt der weisse
   Kasten des Rollfelds weg. */
.kt-rollfeld.blank { background: transparent; box-shadow: none; }
.kt-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(262px, 1fr)); gap: 12px; padding-bottom: 14px; }
.kt-karte {
  all: unset; box-sizing: border-box; cursor: pointer;
  display: flex; flex-direction: column; gap: 11px;
  padding: 15px 16px 16px; border-radius: 16px; background: #fff;
  box-shadow: inset 0 0 0 1px var(--scrm-linie, #e7eef6);
  transition: transform .13s ease, box-shadow .13s ease;
}
.kt-karte:hover { transform: translateY(-2px); box-shadow: 0 8px 20px -8px rgba(18,35,58,.3); }
.kt-kkopf { display: flex; align-items: flex-start; gap: 11px; }
.kt-kkopf .kt-ft b { font-size: 14.5px; font-weight: 700; line-height: 1.3; white-space: normal; }
.kt-kzahlen { display: flex; gap: 18px; }
.kt-kzahl b { display: block; font-size: 17px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kt-kzahl small {
  display: block; font-size: 10.5px; color: var(--scrm-mut, #8a97a8);
  text-transform: uppercase; letter-spacing: .05em; font-weight: 700;
}
.kt-kfuss { display: flex; align-items: center; gap: 8px; }
.kt-kmrr {
  margin-left: auto; font-size: 12.5px; font-weight: 750;
  color: var(--scrm-gut, #0e7c6b); font-variant-numeric: tabular-nums;
}

.kt-branchen { display: flex; flex-direction: column; gap: 10px; padding-bottom: 14px; }
.kt-bzeile {
  all: unset; box-sizing: border-box; cursor: pointer;
  display: grid; grid-template-columns: 190px 1fr auto; align-items: center; gap: 16px;
  padding: 13px 16px; border-radius: 14px; background: #fff;
  box-shadow: inset 0 0 0 1px var(--scrm-linie, #e7eef6);
  transition: box-shadow .13s ease, transform .13s ease;
}
.kt-bzeile:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px var(--scrm-linie2, #d6e2ef); }
.kt-bname { display: flex; align-items: center; gap: 9px; min-width: 0; }
.kt-bname i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.kt-bname b { font-size: 13.5px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kt-bbalken { display: flex; height: 26px; border-radius: 8px; overflow: hidden; background: #eef2f6; }
.kt-bbalken i { display: block; height: 100%; transition: width .5s cubic-bezier(.3,.85,.25,1); }
.kt-bzahlen { display: flex; gap: 20px; text-align: right; }
.kt-bzahlen b { display: block; font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.kt-bzahlen small { display: block; font-size: 10.5px; color: var(--scrm-mut, #8a97a8); white-space: nowrap; }

.kt-nichts { padding: 52px 20px; text-align: center; color: var(--scrm-mut, #8a97a8); }
.kt-nichts .material-symbols-rounded { display: block; font-size: 34px; opacity: .45; margin: 0 auto 8px; }

/* Gefuellt, nicht nur umrandet: ein Filter, den man uebersieht,
   ist schlimmer als keiner. */
button.kt-kz { all: unset; box-sizing: border-box; cursor: pointer; }
button.kt-kz {
  display: flex; flex-direction: column; gap: 6px; min-width: 0;
  padding: 13px 15px 14px; border-radius: 15px; background: #fff;
  box-shadow: inset 0 0 0 1px var(--scrm-linie, #e7eef6);
  transition: box-shadow .15s ease, background .15s ease, transform .12s ease;
}
button.kt-kz:hover { box-shadow: inset 0 0 0 1px var(--scrm-linie2, #d6e2ef); transform: translateY(-1px); }
button.kt-kz:focus-visible { outline: 2px solid var(--accent, #2f7ad6); outline-offset: 2px; }
.kt-kz.an {
  background: rgba(var(--accent-rgb, 47,122,214), .1);
  box-shadow: inset 0 0 0 1.5px rgba(var(--accent-rgb, 47,122,214), .55);
}
.kt-kz.an .kt-kzk b { color: var(--accent-dark, #1d4f8f); }
.kt-kz.warn.an { background: rgba(179,38,30,.08); box-shadow: inset 0 0 0 1.5px rgba(179,38,30,.45); }

@media (max-width: 900px) {
  .kt-bzeile { grid-template-columns: 1fr; gap: 10px; }
}

/* ============================================================
   DIE SIGNALFILTER (nur Kontakte)
   previews/kontakt-ueberblick.html, Flo am 11.11.2026

   Eine eigene Zeile UNTER der Suchleiste, nicht darin: die
   Suche greift in Spalten und Freitexte, diese Chips greifen
   auf Gerechnetes. Zwei verschiedene Dinge nebeneinander in
   einer Zeile liest niemand als zwei Dinge.
   ============================================================ */
.kt-sigleiste{ display:flex; flex-wrap:wrap; gap:6px; padding:0 14px 11px; }
.kt-sigchip{ all:unset; box-sizing:border-box; cursor:pointer; display:inline-flex;
  align-items:center; gap:5px; height:29px; padding:0 10px; border-radius:7px;
  font-size:12.5px; font-weight:600; white-space:nowrap;
  color:var(--scrm-text2,#36506b); background:#fff;
  border:1px solid var(--scrm-linie2,#cfe0ee); }
.kt-sigchip:hover{ border-color:var(--accent,#2f7ad6); color:var(--accent-dark,var(--accent,#2f7ad6)); }
.kt-sigchip:focus-visible{ outline:2px solid var(--accent,#2f7ad6); outline-offset:2px; }
.kt-sigchip .material-symbols-rounded{ font-size:16px; }
.kt-sigchip.an{ background:rgba(var(--accent-rgb,47,122,214),.12);
  border-color:rgba(var(--accent-rgb,47,122,214),.55); color:var(--accent-dark,var(--accent,#2f7ad6)); }
/* Die Zahl sagt, ob sich das Klicken lohnt. Gedaempft, damit sie
   die Beschriftung nicht ueberstimmt. */
.kt-sigchip .n{ font-weight:700; opacity:.6; font-variant-numeric:tabular-nums; }