/* ═══════════════════════════════════════════════════════════════════════════
   css/kundenprofil.css — das Kundenprofil, an einer Stelle
   ═══════════════════════════════════════════════════════════════════════════

   ZWECK (1 Satz)
   Abstaende und Formen des Kundenprofils — vor allem des Verlaufs im
   Kontakt-Reiter — an EINER Stelle, statt in hunderten `style="…"` im
   JavaScript.

   WARUM
   Stefan 2026-08-03: „Boxen keine guten abstände. Unübersichtlich.
   Kommunikationslogs unübersichtlich… nicht gut." und „Style muss stimmen
   und einfach sein zum ändern nicht von Hand."
   Die Zeilen des Verlaufs wurden bis dahin im JavaScript mit
   `style="display:flex;gap:10px;padding:10px 0;…"` zusammengesetzt — pro
   Zeile neu. Wer den Abstand aendern wollte, musste ihn im Code suchen.
   Jetzt gibt es Klassen, und die Abstaende stehen hier.

   ABSTAENDE
   Es gibt genau drei: eng (8px), normal (16px), weit (24px). Sie kommen aus
   `--nv-s2/--nv-s4/--nv-s6`, damit sie zum Rest der App passen. Keine
   krummen Zwischenwerte — die sind der Grund, warum Kaesten „nicht gut"
   nebeneinander liegen.

   VERLINKUNGEN: js/kunden.js (renderKundenKontaktTab, _kvZeichnen),
   css/design-system.css (Knoepfe, Eingabefelder), docs/DEVLOG.md 2026-08-03.
   ═══════════════════════════════════════════════════════════════════════ */

.kp-verlauf {
  display: flex;
  flex-direction: column;
  gap: var(--nv-s4, var(--nv-s4));
}

/* ── Notiz erfassen ───────────────────────────────────────────────────── */
.kp-verlauf-notiz {
  display: flex;
  gap: var(--nv-s2, var(--nv-s2));
  align-items: center;
  flex-wrap: wrap;
}


/* ── Filterstreifen ───────────────────────────────────────────────────────
   Die eigenen Chips (.kp-verlauf-chip) sind am 2026-08-03 entfallen — es gibt
   jetzt das Haus-Bauteil `.nv-segment` (css/design-system.css). Sie waren eine
   von vier Chip-Reihen der App; genau diese Vervielfachung war der Anlass fuer
   das Bauteil. */
.kp-verlauf-filter { /* nur noch Platzhalter fuer nvSegment */ }

.kp-verlauf-suche { width: 100%; }

/* ── Die Zeilen ───────────────────────────────────────────────────────────
   Eine Zeile = ein Vorgang. Kein Kasten um jede Zeile: zwanzig Kaesten
   untereinander sind unruhiger als zwanzig Zeilen mit einer feinen Linie. */
.kp-verlauf-tag {
  font-size: var(--k-fs-caption);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--k-text3, rgba(26,26,26,.45));
  padding: var(--nv-s4, var(--nv-s4)) 0 var(--nv-s2, var(--nv-s2));
}
.kp-verlauf-tag:first-child { padding-top: 0; }

.kp-verlauf-zeile {
  display: flex;
  gap: var(--nv-s3, var(--nv-s3));
  padding: var(--nv-s3, var(--nv-s3)) 0;
  border-bottom: 1px solid var(--k-border, rgba(26,26,26,.08));
}
.kp-verlauf-zeile.is-klickbar { cursor: pointer; }
.kp-verlauf-zeile.is-klickbar:hover { background: var(--k-fill, rgba(26,26,26,.03)); }

.kp-verlauf-ikon {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--k-fs-hervor);
  background: var(--k-fill, rgba(26,26,26,.05));
  color: var(--k-text2, rgba(26,26,26,.65));
}
/* Die Farbe sagt die Art — sie ist die einzige Farbe in der Zeile, damit
   man beim Ueberfliegen Anruf von Mail unterscheidet, ohne zu lesen. */

.kp-verlauf-inhalt { flex: 1; min-width: 0; }
.kp-verlauf-kopf {
  display: flex;
  align-items: baseline;
  gap: var(--nv-s2, var(--nv-s2));
}
.kp-verlauf-titel {
  font-size: var(--k-fs-body);
  font-weight: 600;
  color: var(--k-text, var(--k-text));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kp-verlauf-uhr {
  margin-left: auto;
  flex-shrink: 0;
  font-size: var(--k-fs-caption);
  color: var(--k-text3, rgba(26,26,26,.45));
  font-variant-numeric: tabular-nums;
}
.kp-verlauf-neu {
  flex-shrink: 0;
  padding: 1px var(--nv-s2);
  border-radius: var(--k-r-full, 9999px);
  background: var(--k-brand);
  color:var(--k-text-auf-marke);
  font-size: var(--k-fs-micro);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.kp-verlauf-text {
  margin-top: 2px;
  font-size: var(--k-fs-body);
  line-height: 1.45;
  color: var(--k-text2, rgba(26,26,26,.65));
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.kp-verlauf-fuss {
  margin-top: var(--nv-s1);
  font-size: var(--k-fs-caption);
  color: var(--k-text3, rgba(26,26,26,.45));
}

.kp-verlauf-hinweis {
  padding: var(--nv-s3, var(--nv-s3)) var(--nv-s4, var(--nv-s4));
  border-radius: var(--k-r-sm, 14px);
  background: var(--k-fill, rgba(26,26,26,.04));
  color: var(--k-text2, rgba(26,26,26,.65));
  font-size: var(--k-fs-body);
}

.kp-verlauf-leer {
  text-align: center;
  padding: var(--nv-s8, var(--nv-s8)) var(--nv-s4, var(--nv-s4));
  color: var(--k-text3, rgba(26,26,26,.45));
}
.kp-verlauf-leer .material-symbols-outlined {
  font-size: 40px;
  opacity: .35;
  display: block;
  margin-bottom: var(--nv-s2, var(--nv-s2));
}
.kp-verlauf-leer > div { font-size: var(--k-fs-body); font-weight: 600; color: var(--k-text2, rgba(26,26,26,.65)); }
.kp-verlauf-leer-sub { font-size: .76rem !important; font-weight: 400 !important; margin-top: 4px; }

/* ── Kontakt nachtragen ───────────────────────────────────────────────── */
.kp-vermerk {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nv-s2, var(--nv-s2));
  padding: var(--nv-s4, var(--nv-s4));
}

/* ── Kurzinfo im Info-Reiter (eine Zeile statt zweiter Liste) ─────────── */
.kp-kurzinfo {
  display: flex;
  align-items: center;
  gap: var(--nv-s3, var(--nv-s3));
  padding: var(--nv-s3, var(--nv-s3)) var(--nv-s4, var(--nv-s4));
  margin-bottom: var(--nv-s3, var(--nv-s3));
  border-radius: var(--k-r-sm, 14px);
  background: var(--k-fill, rgba(26,26,26,.04));
}
.kp-kurzinfo .material-symbols-outlined { font-size: 20px; color: #34C759; }
.kp-kurzinfo-text { flex: 1; min-width: 0; font-size: var(--k-fs-body); }
.kp-kurzinfo-text span {
  display: block;
  font-size: var(--k-fs-caption);
  color: var(--k-text3, rgba(26,26,26,.45));
}

/* ── Eine Spalte fuer Reiter mit durchlaufender Liste ─────────────────────
   `.kp-content` fliesst am Rechner in zwei Spalten (nv-consistency.css) —
   richtig fuer Karten, falsch fuer eine Zeitleiste: die braeche in der Mitte
   um und liefe rechts weiter. Gesetzt wird die Klasse in
   js/kunden.js → switchKundenTab(). */
.kp-content--fluss { columns: 1 !important; }
/* Und kein Kasten um die ganze Liste: keeva-ui.css gibt jedem direkten Kind
   von .kp-content einen Kartenrahmen. Fuer eine Liste ist das ein Rahmen zu
   viel — die Zeilen trennen sich schon selbst. */
.kp-content--fluss > .kp-verlauf {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

/* ── Fusszeile im Info-Reiter (erstellt / aktualisiert) ──────────────────
   Kein Kasten: das ist eine Randnotiz, keine Karte. Sie stand bis
   2026-08-03 als rahmenloses Kind zwischen lauter Karten und bekam vom
   Sammel-Selektor trotzdem einen Rahmen. */
.kp-fusszeile {
  font-size: var(--k-fs-caption);
  color: var(--k-text3, rgba(26,26,26,.45));
  padding: var(--nv-s2, var(--nv-s2)) var(--nv-s1) 0;
}

/* Leere Platzhalter (werden erst nach dem Laden gefuellt) nehmen keinen
   Platz weg. Ohne diese Zeile bleibt zwischen zwei Karten eine Luecke, die
   nach einem vergessenen Kasten aussieht. */
.kp-content > div:empty { display: none; }