/* Kundenseite (Setcard): seitenspezifische Ergänzungen */

/* Bereiche dicht packen: schmale Bereiche füllen die Lücke neben einem breiten */
.ku-setcard .sc-bereiche { grid-auto-flow: row dense; }

/* Kopf */
.ku-setcard .sc-untertitel b { color: var(--text); font-weight: 600; }
.ku-ort { display: inline-flex; align-items: center; gap: 4px; }
.ku-ort svg.i { width: 14px; height: 14px; }
.ku-zentrale { display: inline-flex; align-items: center; gap: 8px; }
.ku-zentrale .muted { text-transform: uppercase; letter-spacing: .05em; font-size: 11px; }
.ku-setcard .btn.star-on svg.i { fill: var(--yellow); }
.ku-anrufen-nr { font-weight: 400; font-size: 13px; opacity: .85; }
/* Mein-Kunde-Stern als Symbol neben dem Namen statt als eigener grosser Knopf */
.ku-setcard .ku-stern-kopf { padding: 4px 6px; color: var(--muted); }
.ku-stern-kopf svg.i { width: 20px; height: 20px; }
.ku-setcard .ku-stern-kopf:not(.star-on):hover { color: var(--yellow); }
.ku-mail-fehlt { display: inline-flex; align-items: center; gap: 6px; }
.sc-kontaktzeile .ku-mail-fehlt svg.i { color: inherit; }
/* „Mehr“ bleibt immer rechts, auch wenn die Leiste umbricht (Menü klappt dann nie über die Seitenleiste) */
.ku-setcard .sc-aktionen .mehr { margin-left: auto; }
/* Bereichsköpfe dürfen umbrechen (z.B. Handelsregister mit Stand und Knopf auf dem Handy) */
.ku-setcard .sc-kopf { flex-wrap: wrap; row-gap: 6px; }

/* E-Mail-Adresse in Link-Optik (Knopf, öffnet das E-Mail-Fenster) */
.ku-link { font: inherit; color: var(--text); background: none; border: 0; padding: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  text-align: left; max-width: 100%; overflow-wrap: anywhere; }
.ku-link:hover { color: var(--text); text-decoration: underline; }
.ku-link svg.i { width: 15px; height: 15px; color: var(--muted-2); flex: none; }
.sc-werte dd .ku-link svg.i, .ku-kv .ku-link svg.i { width: 13px; height: 13px; }
.sc-werte dd a.plain svg.i, .sc-werte dd a svg.i { color: var(--muted-2); }

/* Ansprechpersonen */
.ku-hinweis { display: inline-flex; align-items: center; gap: 4px; }
.ku-hinweis svg.i { width: 12px; height: 12px; color: var(--yellow); fill: var(--yellow); }
.ku-karte { gap: 10px; }
.ku-karte .k-kopf { gap: 6px; }
.ku-karte .k-kopf .avatar { margin-right: 2px; }
.ku-setcard .k-karten { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
/* Namen ganz zeigen (darf zweizeilig werden), man soll sehen, wen man anruft */
.ku-karte .k-name b { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; line-height: 1.3; }
.ku-karte .k-name .muted { overflow-wrap: anywhere; }
.ku-karte .k-stern { display: inline-flex; padding: 0 4px; }
.ku-stern-aus { opacity: .45; }
.ku-stern-aus:hover { opacity: 1; color: var(--yellow); }
.ku-karte:hover .sc-stift { opacity: 1; }
.ku-kdaten { display: flex; flex-direction: column; gap: 5px; font-size: 13.5px; }
.ku-kz { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 8px; align-items: baseline; }
.ku-kl { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.ku-kv { min-width: 0; overflow-wrap: anywhere; }
.ku-kv a { color: var(--text); }
.ku-kv a:hover { color: var(--primary-2); }
.ku-kv svg.i { width: 13px; height: 13px; vertical-align: -2px; color: var(--muted-2); }
.ku-knotiz { font-size: 12.5px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 7px; white-space: pre-wrap; line-height: 1.45; }
.ku-setcard .k-plus { min-height: 112px; }

/* Kommunikation */
.ku-abstand { margin-top: 10px; }

/* Handelsregister */
.ku-zweck { display: block; font-size: 13px; line-height: 1.5; }
.ku-zweck[data-action] { cursor: pointer; }
.ku-zweck.kurz { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ku-hr-titel { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 14px 0 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.ku-hr-titel .muted { text-transform: none; letter-spacing: 0; font-size: 12px; opacity: .8; }
.ku-setcard .hr-pers td { padding: 4px 6px; white-space: normal; overflow-wrap: anywhere; }
.ku-setcard .hr-pers .tag { white-space: normal; margin-left: 0; }
.ku-setcard .hr-pers td:last-child { width: 1%; }
.ku-hr-mehr { margin-top: 8px; }

/* Pop-ups */
.ku-voll { grid-column: 1 / -1; }
.sc-edit .modal-actions .ku-links { margin-right: auto; }

/* Breite Felder (span2) belegen auf schmalen Bildschirmen die ganze Zeile statt eine zusätzliche Spalte zu erzeugen */
@media (max-width: 760px) {
  .ku-edit .span2, #new-company .span2 { grid-column: 1 / -1; }
}

/* Nummer im Anrufen-Knopf nur bei viel Platz, damit die Aktionsleiste auf einer Zeile bleibt */
@media (max-width: 1499px) {
  .ku-anrufen-nr { display: none; }
}
@media (max-width: 760px) {
  .ku-hinweis { display: none; }
  .ku-setcard .hr-pers td:nth-child(3) { display: none; }
}

/* ================= Kundenliste (Meine Kunden, Telefonbuch) und Passende Kandidaten ================= */
/* Gemeinsame Listenbausteine mit denselben Werten wie unter .kd-liste (kandidat.css). Wurzeln: .ku-liste und .ku-vorschlaege */
/* --ku-flaeche: deckende Farbe der Liste (gemessen), für die rechts stehende Aktionsspalte */
.ku-liste { --ku-flaeche: var(--flaeche); container: kuliste / inline-size; }

:is(.ku-liste, .ku-vorschlaege) .lk-kopf { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--line); }
:is(.ku-liste, .ku-vorschlaege) .lk-kopf .head-icon { width: 36px; height: 36px; border-radius: 10px; }
:is(.ku-liste, .ku-vorschlaege) .lk-kopf .head-icon svg.i { width: 20px; height: 20px; }
:is(.ku-liste, .ku-vorschlaege) .lk-titel { flex: 1 1 240px; min-width: 0; }
:is(.ku-liste, .ku-vorschlaege) .lk-titel h2 { font-size: 20px; margin: 0; display: flex; align-items: center; gap: 8px; line-height: 1.25; }
:is(.ku-liste, .ku-vorschlaege) .lk-zahl { font-size: 12.5px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: var(--flaeche-3); }
:is(.ku-liste, .ku-vorschlaege) .lk-titel .sub { font-size: 13px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:is(.ku-liste, .ku-vorschlaege) .lk-titel .sub b { color: var(--text); font-weight: 600; }
:is(.ku-liste, .ku-vorschlaege) .lk-aktionen { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }
:is(.ku-liste, .ku-vorschlaege) .lk-aktionen .btn, :is(.ku-liste, .ku-vorschlaege) .lk-aktionen select { height: 36px; }
:is(.ku-liste, .ku-vorschlaege) .lk-aktionen select { max-width: 220px; padding: 0 10px; }
:is(.ku-liste, .ku-vorschlaege) .lk-kopf.klein { border-bottom: 0; padding-bottom: 0; margin-bottom: 8px; }
:is(.ku-liste, .ku-vorschlaege) .lk-kopf.klein h2 { font-size: 17px; }
.ku-vorschlaege .flogo.kl { width: 32px; height: 32px; border-radius: 8px; font-size: 11.5px; }

/* Filterleiste: Suche zuerst, dann Auswahlfelder, zuletzt "Filter zurücksetzen" (nur wenn etwas aktiv ist) */
:is(.ku-liste, .ku-vorschlaege) .lk-filter { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 10px 0 12px; }
:is(.ku-liste, .ku-vorschlaege) .lk-filter .lk-suche { flex: 1 1 280px; min-width: 0; }
:is(.ku-liste, .ku-vorschlaege) .lk-filter .lk-suche input { height: 36px; }
:is(.ku-liste, .ku-vorschlaege) .lk-filter select { height: 36px; max-width: 220px; padding: 0 10px; }
:is(.ku-liste, .ku-vorschlaege) .lk-filter .btn.small { height: 32px; }
:is(.ku-liste, .ku-vorschlaege) .lk-filter > .tag { margin: 0; padding: 0 12px; height: 36px; display: inline-flex; align-items: center; border-radius: 9px; font-size: 13px; }
.ku-liste .lk-fokus { height: 36px; border-radius: 999px; padding: 0 12px; gap: 6px; max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
.ku-liste .lk-fokus svg.i { width: 15px; height: 15px; flex: none; }

/* Schalter (Checkbox als Pille) */
:is(.ku-liste, .ku-vorschlaege) .lk-schalter { flex-direction: row; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px;
  color: var(--text); font-size: 13px; cursor: pointer; white-space: nowrap; user-select: none; }
:is(.ku-liste, .ku-vorschlaege) .lk-schalter:has(input:checked) { background: color-mix(in srgb, var(--ak) 14%, transparent); border-color: var(--ak-ln); }

/* Auswahlleiste: immer da und gleich hoch, damit nichts springt */
:is(.ku-liste, .ku-vorschlaege) .lk-auswahl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 44px; margin-top: 10px; padding: 6px 12px;
  border: 1px dashed var(--line); border-radius: 12px; font-size: 13px; }
:is(.ku-liste, .ku-vorschlaege) .lk-auswahl.aktiv { background: color-mix(in srgb, var(--ak) 10%, transparent); border: 1px solid var(--ak-ln); }
:is(.ku-liste, .ku-vorschlaege) .lk-auswahl .spacer { flex: 1; }
/* Mit Auswahl bleibt die Leiste unten im Bild (Karten sind hoch, die Leiste stünde sonst weit unter dem Bildschirm), wie auf der Kandidatenliste */
.ku-liste .lk-auswahl.aktiv { position: sticky; bottom: 12px; z-index: 5; background: var(--flaeche); background: color-mix(in srgb, var(--ak) 10%, var(--flaeche));
  box-shadow: 0 6px 20px rgb(0 0 0 / .18); }
:is(.ku-liste, .ku-vorschlaege) .lk-auswahl .btn.wartet { opacity: .6; }
:is(.ku-liste, .ku-vorschlaege) .lk-hinweis { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12.5px; }
:is(.ku-liste, .ku-vorschlaege) .lk-hinweis svg.i { width: 14px; height: 14px; flex: none; }

/* Leere Zustände und ruhige Hinweiszeile */
:is(.ku-liste, .ku-vorschlaege) .lk-leer { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 28px; text-align: center; color: var(--muted); white-space: normal; }
:is(.ku-liste, .ku-vorschlaege) .lk-leer svg.i { width: 28px; height: 28px; opacity: .7; }
:is(.ku-liste, .ku-vorschlaege) .lk-leer p { margin: 0; max-width: 520px; line-height: 1.5; }
.ku-liste .lk-info { display: flex; gap: 8px; align-items: flex-start; margin: -4px 0 4px; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.ku-liste .lk-info svg.i { width: 14px; height: 14px; flex: none; margin-top: 2px; color: var(--muted-2); }
.ku-liste .lk-info b { color: var(--text); font-weight: 600; }
.ku-liste .fgruppen { margin: 0 0 10px; }

/* Tabelle: Aktionen rechts immer sichtbar (sticky), mehr Höhe, Kopfzeile bleibt stehen */
.ku-liste .table-wrap { max-height: clamp(340px, 52vh, 620px); border: 1px solid var(--line); border-radius: 12px; }
.ku-tab th, .ku-tab td { padding: 8px 10px; }
.ku-tab tbody tr:last-child td { border-bottom: 0; }
.ku-tab .kt-sel { width: 36px; padding-right: 2px; }
.ku-tab td.kt-firma { white-space: normal; min-width: 210px; max-width: 360px; }
.ku-firma { display: flex; align-items: center; gap: 10px; }
.ku-firma > .firm-link { flex: none; }
.ku-firma-text { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ku-firma-text .ku-name { display: block; }
.ku-firma-text .ku-name b { overflow-wrap: anywhere; line-height: 1.3; }
/* Branchen einzeilig mit Auslassungspunkten, der title zeigt alle */
.ku-liste .ku-tab td .ku-branchen { display: -webkit-box; -webkit-line-clamp: 1; line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; max-width: 260px; }
.ku-liste .ku-tab td .ku-falt { display: none; }
.ku-tab .ku-falt svg.i { width: 12px; height: 12px; vertical-align: -1px; }
.ku-tab td.kt-person { white-space: normal; min-width: 110px; max-width: 200px; }
.ku-tab td.kt-kontakt { white-space: normal; min-width: 130px; max-width: 240px; }
.ku-tab .kt-kontakt a.plain { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.ku-tab .kt-kontakt a.plain svg.i { width: 13px; height: 13px; color: var(--muted-2); }
.ku-liste .ku-tab td .ku-mail { display: -webkit-box; -webkit-line-clamp: 1; line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.ku-tab td.kt-zuletzt { white-space: normal; min-width: 104px; }
.ku-tab td.kt-von { white-space: normal; min-width: 90px; max-width: 160px; }
.ku-liste .pill { font-size: 11.5px; padding: 2px 8px; }
.ku-liste .pill svg.i { width: 12px; height: 12px; }
.ku-tab .kt-akt { position: sticky; right: 0; width: 1%; padding: 4px 8px 4px 6px; background: var(--ku-flaeche); box-shadow: -8px 0 12px -10px rgba(0, 0, 0, .6); }
.ku-tab th.kt-akt { z-index: 2; background: var(--flaeche); }
.ku-akt { display: flex; gap: 2px; justify-content: flex-end; }
.ku-akt .btn.icon { width: 30px; height: 30px; padding: 0; }
.ku-akt .btn.icon svg.i { width: 16px; height: 16px; }
.ku-akt .btn.icon:disabled { opacity: .35; cursor: default; }
.ku-tab tbody tr:hover td.kt-akt { background: color-mix(in srgb, var(--text) 5%, var(--ku-flaeche)); }

/* Status in der Liste getönt statt vollfarbig */
.ku-liste .pill.st-neu, .ku-liste .pill.st-in_bearbeitung { background: var(--neu-bg); color: var(--neu-tx); border-color: var(--neu-ln); }
.ku-liste .pill.st-offene_anfrage { background: var(--ak-bg); color: var(--ink); border-color: var(--ak-ln); }
.ku-liste .pill.st-rueckruf { background: var(--warn-bg); color: var(--warn-tx); border-color: var(--warn-ln); }
.ku-liste .pill.st-interesse, .ku-liste .pill.st-im_einsatz { background: var(--ok-bg); color: var(--ok-tx); border-color: var(--ok-ln); }
.ku-liste .pill.st-kein_interesse { background: transparent; color: var(--muted-2); border-color: var(--line-strong); }
.ku-liste .pill.st-kurzprofil_gesendet { background: var(--info-bg); color: var(--info-tx); border-color: var(--info-ln); }
.ku-liste .pill.st-sperre { background: var(--gefahr-bg); color: var(--gefahr-tx); border-color: var(--gefahr-ln); }

/* Ausgewählte Zeile ruhig, Farbe aus der Abteilung (stärker als die allgemeinen Regeln in styles.css) */
body[data-mandant] .ku-liste tbody tr.selected td { background: color-mix(in srgb, var(--ak) 4%, transparent); }
body[data-mandant] .ku-liste tbody tr.selected:hover td { background: color-mix(in srgb, var(--ak) 7%, transparent); }
body[data-mandant] .ku-liste tbody tr.selected td:first-child { box-shadow: inset 3px 0 0 var(--ak-grafik); }
body[data-mandant] .ku-liste tbody tr.selected td.kt-akt { background: color-mix(in srgb, var(--ak) 4%, var(--ku-flaeche)); }
body[data-mandant] .ku-liste tbody tr.selected:hover td.kt-akt { background: color-mix(in srgb, var(--ak) 7%, var(--ku-flaeche)); }

/* Weniger Platz: zuerst "Kunde von", dann die Ansprechperson in die Firmenzelle falten (nicht ausblenden) */
@container kuliste (max-width: 1180px) {
  .ku-tab .kt-von { display: none; }
  .ku-liste .ku-tab td .ku-falt-von { display: block; }
}
@container kuliste (max-width: 1020px) {
  .ku-tab .kt-person { display: none; }
  .ku-liste .ku-tab td .ku-falt-person { display: block; }
}
/* Schmal (Handy): Zeilen als Karten. Firma und Status oben, Kontakt und letzter Kontakt darunter, Aktionen über die volle Breite. */
@container kuliste (max-width: 720px) {
  .ku-liste .table-wrap { max-height: none; }
  .ku-tab, .ku-tab tbody { display: block; }
  .ku-tab thead { display: none; }
  .ku-tab tbody tr { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; grid-template-areas: "sel firma firma" "sel status zuletzt" "sel kontakt kontakt" "sel akt akt";
    gap: 6px 10px; padding: 10px; border-bottom: 1px solid var(--line); }
  .ku-tab tbody tr:last-child { border-bottom: 0; }
  .ku-tab td { display: block; padding: 0; border: 0; min-width: 0; max-width: none; }
  .ku-tab td.kt-sel { grid-area: sel; width: auto; padding-top: 8px; }
  .ku-tab td.kt-firma { grid-area: firma; min-width: 0; }
  .ku-tab td.kt-status { grid-area: status; align-self: center; }
  .ku-tab td.kt-kontakt { grid-area: kontakt; min-width: 0; }
  .ku-tab td.kt-zuletzt { grid-area: zuletzt; min-width: 0; text-align: right; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 2px 8px; }
  .ku-tab td.kt-akt { grid-area: akt; position: static; width: auto; padding: 0; box-shadow: none; background: none; }
  .ku-tab td.kt-person, .ku-tab td.kt-von { display: none; }
  .ku-liste .ku-tab td .ku-falt-person, .ku-liste .ku-tab td .ku-falt-von { display: block; }
  .ku-akt { justify-content: flex-start; gap: 4px; }
  .ku-akt .btn.icon { width: 36px; height: 36px; border: 1px solid var(--line); }
  .ku-tab tbody tr:hover td, .ku-tab tbody tr:hover td.kt-akt { background: none; }
  body[data-mandant] .ku-liste tbody tr.selected td, body[data-mandant] .ku-liste tbody tr.selected:hover td,
  body[data-mandant] .ku-liste tbody tr.selected td:first-child, body[data-mandant] .ku-liste tbody tr.selected td.kt-akt { background: none; box-shadow: none; }
  body[data-mandant] .ku-liste tbody tr.selected { background: color-mix(in srgb, var(--ak) 4%, transparent); box-shadow: inset 3px 0 0 var(--ak-grafik); }
}
@media (max-width: 760px) {
  :is(.ku-liste, .ku-vorschlaege) .lk-titel .sub { white-space: normal; }
  :is(.ku-liste, .ku-vorschlaege) .lk-filter > * { flex: 1 1 140px; max-width: none; }
  :is(.ku-liste, .ku-vorschlaege) .lk-filter .lk-suche { flex-basis: 100%; }
  :is(.ku-liste, .ku-vorschlaege) .lk-filter select { max-width: none; }
  :is(.ku-liste, .ku-vorschlaege) .lk-filter .btn.small { flex: 0 0 auto; }
  .ku-liste .lk-fokus { max-width: none; }
  /* Aktionen über die ganze Breite, Mehr immer rechts (das Menü öffnet nach links und bleibt im Bild) */
  :is(.ku-liste, .ku-vorschlaege) .lk-aktionen { flex: 1 1 100%; }
  :is(.ku-liste, .ku-vorschlaege) .lk-aktionen .mehr { margin-left: auto; }
}

/* Anrufen in der Aktionsspalte: grüner runder Knopf (gleiche Farbe wie überall, beide Abteilungen) */
.ku-akt a.btn.icon.anruf { background: var(--anruf, #15803D); border-color: var(--anruf, #15803D); color: #fff; border-radius: 50%; }
.ku-akt a.btn.icon.anruf:hover { background: var(--anruf-h, #166534); border-color: var(--anruf-h, #166534); color: #fff; }
.ku-akt a.btn.icon.anruf svg.i { color: #fff; }

/* ================= Passende Kandidaten: Werkzeugleiste, Lagebild (Karte links, Karten rechts), Auswahlleiste ================= */
#matches-panel.laedt { opacity: .55; pointer-events: none; transition: opacity .15s; }
.vk-werkzeug { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 2px 0 12px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--flaeche-2); }
.vk-gruppe { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.vk-lbl { font-size: 12px; color: var(--muted-2); white-space: nowrap; }
.vk-werkzeug select { height: 34px; max-width: 210px; padding: 0 10px; }
.vk-werkzeug .vk-branche { margin: 0; display: inline-block; max-width: 240px; height: 28px; line-height: 26px; padding: 0 11px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vk-filterknoepfe { margin-left: auto; }
.vk-filterknopf.aktiv { border-color: var(--ak-ln); background: var(--ak-bg); }
.vk-filterknopf .wahl-zahl:empty { display: none; }
.ku-vorschlaege .vk-filter { margin-top: -4px; }
.vk-hinweis { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; font-size: 12.5px; color: var(--muted); }
.vk-hinweis svg.i { width: 14px; height: 14px; color: var(--muted-2); }

.vk-lage { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.vk-lage.ohne-karte { grid-template-columns: minmax(0, 1fr); }
.vk-kartenpanel { position: sticky; top: 12px; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--sch-1); }
.vk-kartenfeld { height: 520px; }
/* Ziel (Firma mit Lichthof), Beschriftungen und Pillen fangen keine Klicks ab: Wohnorte nahe der Firma bleiben anklickbar */
#vk-karte :is(.kz, .kz-text, .ks-pillen, .ks-staedte) { pointer-events: none; }
.vk-liste { display: grid; gap: 10px; min-width: 0; align-content: start; container: vkliste / inline-size; }
/* Schmale Karten: Etiketten (frei ab, schon gesendet) unter den Kopf, damit der Name ganz sichtbar bleibt */
@container vkliste (max-width: 430px) {
  .ku-vorschlaege .vk-kopf { grid-template-columns: 44px minmax(0, 1fr); row-gap: 8px; }
  .ku-vorschlaege .vk-tags { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; }
}
.vk-lage.ohne-karte .vk-liste { grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); }
.vk-lage.ohne-karte .vk-liste > .lk-leer, .vk-lage.ohne-karte .vk-liste > .vk-mehr { grid-column: 1 / -1; }

/* Karte je Kandidat: Kopf (Foto, Name, frei ab), Beruf, Wohnort mit Entfernung, Fuss mit Anrufen, Auswählen, Kurzprofil, Anfahrt */
.ku-vorschlaege .vk-karte { position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 16px;
  background: var(--flaeche-2); cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; }
.ku-vorschlaege .vk-karte:hover { border-color: var(--line-strong); }
.ku-vorschlaege .vk-karte.aktiv { border-color: var(--fokus); box-shadow: 0 0 0 3px rgba(var(--ak-rgb), .10); }
.ku-vorschlaege .vk-karte.aktiv::before { content: ""; position: absolute; left: 18px; top: -1px; width: 72px; height: 2px; border-radius: 2px; background: var(--ak-grafik); }
.ku-vorschlaege .vk-karte.gewaehlt { background: color-mix(in srgb, var(--ak) 7%, var(--flaeche-2)); }
.ku-vorschlaege .vk-kopf { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.vk-bild { display: block; line-height: 0; }
#matches-panel .vk-karte .avatar { width: 44px; height: 44px; border-radius: 12px; font-size: 15px; object-fit: cover; object-position: 50% 18%; }
.ku-vorschlaege .vk-name { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ku-vorschlaege .vk-name b { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 15px; line-height: 1.3; }
.vk-link { color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.vk-link:hover { text-decoration: underline; }
.vk-beruf { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vk-tags { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; align-self: start; min-width: 0; }
.vk-tags .tag { margin: 0; white-space: nowrap; }
.ku-vorschlaege .vk-fakten { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-width: 0; font-size: 12.5px; color: var(--muted); }
.vk-ort { display: inline-flex; align-items: center; gap: 4px; color: var(--text); font-weight: 600; white-space: nowrap; }
.vk-ort svg.i { width: 13px; height: 13px; color: var(--muted-2); }
.vk-fakten .weg-werte.kompakt .ww-km { font-weight: 600; }
/* „ÖV prüfen“ leise (wiederholt sich auf jeder Karte): normale Schrift, gepunktet, volle Stärke erst bei Hover und Fokus (Regel in karte.css) */
.vk-tags .vk-gesendet { display: inline-flex; align-items: center; gap: 5px; }
.vk-gesendet svg.i { width: 12px; height: 12px; }
.vk-eck { display: flex; flex-wrap: wrap; gap: 2px 0; font-size: 12px; color: var(--muted); }
.vk-eck span + span::before { content: "·"; margin: 0 7px; color: var(--muted-2); }
.ku-vorschlaege .vk-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.vk-fuss .btn { min-height: 30px; padding: 0 11px; font-size: 12.5px; border-radius: 999px; text-decoration: none; }
.vk-fuss .btn svg.i { width: 14px; height: 14px; }
.vk-fuss .btn.anruf { padding: 0 13px; }
.vk-fuss .keine-nr { padding: 0 6px; }
.ku-vorschlaege .vk-karte.aktiv .vk-fuss [data-action="anfahrt"] { color: var(--ink); border-color: var(--ak-ln); background: var(--ak-bg); }
/* Auswählen als Pille, gewählt „Ausgewählt“ (Häkchen bleibt ein echtes Kontrollkästchen) */
.vk-wahl { display: inline-flex; flex-direction: row; align-items: center; gap: 7px; height: 30px; margin: 0; padding: 0 12px 0 9px; border: 1px solid var(--line-strong); border-radius: 999px;
  font-size: 12.5px; font-weight: 700; color: var(--muted); cursor: pointer; user-select: none; white-space: nowrap; }
.vk-wahl:hover { color: var(--text); border-color: var(--line-3); }
.vk-wahl input { width: 14px; height: 14px; margin: 0; }
.vk-wahl .vk-w-an { display: none; }
.vk-wahl:has(input:checked) { background: var(--text); border-color: var(--text); color: var(--app); }
.vk-wahl:has(input:checked) .vk-w-aus { display: none; }
.vk-wahl:has(input:checked) .vk-w-an { display: inline; }
/* Weitere ausserhalb des Umkreises, ohne bekannten Wohnort */
.vk-mehr { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border: 1px dashed var(--line-3); border-radius: 16px; font-size: 13px; color: var(--muted); }
.vk-mehr p { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; }
.vk-mehr p > svg.i { width: 15px; height: 15px; color: var(--ink); flex: none; }
.vk-mehr b { color: var(--text); }
.vk-mehr .vk-erweitern { margin-left: auto; font-size: 13px; }
/* Auswahlleiste bleibt beim Blättern sichtbar, sobald etwas gewählt ist */
.ku-vorschlaege #vk-auswahl.aktiv { position: sticky; bottom: 10px; z-index: 5; background: color-mix(in srgb, var(--ak) 10%, var(--flaeche)); box-shadow: var(--sch-1); }

@media (max-width: 1060px) {
  .vk-lage { grid-template-columns: minmax(0, 1fr); }
  .vk-kartenpanel { position: relative; top: 0; }
  .vk-kartenfeld { height: 340px; }
}
@media (max-width: 760px) {
  .vk-werkzeug { padding: 10px; gap: 10px 12px; }
  .vk-gruppe { width: 100%; }
  .vk-lbl { width: 100%; }
  .vk-werkzeug .wahl button { padding: 0 7px; gap: 4px; font-size: 12px; }
  .vk-werkzeug .wahl-zahl { min-width: 16px; padding: 0 4px; }
  .ku-vorschlaege #vk-auswahl .btn { max-width: 100%; height: auto; min-height: 30px; padding-top: 5px; padding-bottom: 5px; white-space: normal; text-align: left; }
  .vk-werkzeug select { flex: 1 1 160px; max-width: none; }
  .vk-filterknoepfe { margin-left: 0; }
  .vk-kartenfeld { height: 280px; }
  .ku-vorschlaege .vk-karte { padding: 11px 12px; }
  .vk-mehr .vk-erweitern { margin-left: 0; }
}

/* ================= Kunden-Setcard: Lage und Anfahrt ================= */
.ku-lage { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ku-lage-karte { height: 240px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); }
.ku-lage-hinweis { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12.5px; color: var(--muted); }
.ku-lage-hinweis svg.i { width: 14px; height: 14px; color: var(--muted-2); flex: none; }
.ku-lage-leer { margin: 0; }
.ku-lage-zahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ku-lage-zahl { font: inherit; display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; padding: 8px 6px; border-radius: 12px; border: 1px solid var(--line-strong);
  background: var(--flaeche); color: var(--text); cursor: pointer; transition: border-color .15s ease, background-color .15s ease; }
.ku-lage-zahl b { font-size: 20px; line-height: 1.15; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ku-lage-zahl span { font-size: 11.5px; color: var(--muted-2); white-space: nowrap; }
.ku-lage-zahl:hover { border-color: var(--ak-ln); background: var(--ak-bg); }
.ku-lage-links { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; }
.ku-lage-links a { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); text-decoration: none; }
.ku-lage-links a:hover { color: var(--text); text-decoration: underline; }
.ku-lage-links svg.i { width: 14px; height: 14px; }

/* ================= Meine Kunden (Runde 2): Aufgabenbereich, Visitenkarten, Firmenportal, Zuteilung ================= */
.kv-seite { display: flex; flex-direction: column; gap: 14px; min-width: 0; transition: margin-right .2s ease; }
.ku-liste .lk-aktionen .kv-ansicht { height: 36px; align-items: center; }
.ku-liste .lk-aktionen .kv-ansicht button { height: 28px; }
.kv-firmen-knopf.aktiv { border-color: var(--ak-ln); background: var(--ak-bg); color: var(--text); }

/* Aufgabenbereich: eigene Fläche, klar getrennt von der Kundenliste */
.ab-bereich { display: flex; flex-direction: column; gap: 12px; margin: 0 0 12px; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--flaeche-2); }
.ab-kopf { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.ab-kopf h3 { margin: 0; font-size: 15px; letter-spacing: -.01em; }
.ab-kopf > span { font-size: 12.5px; color: var(--muted); }
.ab-alle { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border: 1px solid var(--line-strong); border-radius: 999px;
  font-size: 12.5px; font-weight: 700; color: var(--muted); text-decoration: none; white-space: nowrap; }
.ab-alle b { font-size: 11px; padding: 1px 6px; border-radius: 9px; background: var(--flaeche-3); color: var(--text); }
.ab-alle:hover { color: var(--text); border-color: var(--line-3); }
.ab-alle.aktiv { background: var(--text); border-color: var(--text); color: var(--app); }
.ab-alle.aktiv b { background: color-mix(in srgb, var(--app) 18%, transparent); color: inherit; }
.ab-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 10px; }
.ab-kachel { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; row-gap: 2px; align-items: center; min-width: 0;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--flaeche); color: var(--text); text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease; }
.ab-kachel:hover { border-color: var(--line-3); }
.ab-zahl { grid-row: 1 / span 2; min-width: 1.3em; font-size: 26px; font-weight: 700; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; text-align: center; }
.ab-titel { font-size: 13.5px; font-weight: 700; line-height: 1.25; }
.ab-satz { font-size: 12px; line-height: 1.35; color: var(--muted); }
.ab-kachel.ohne-zahl { grid-template-columns: minmax(0, 1fr); }
.ab-kachel.warn { border-color: var(--warn-ln); }
.ab-kachel.warn .ab-zahl { color: var(--warn-tx); }
.ab-kachel.aktiv { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.ab-stand { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.ab-lbl { font-size: 12px; color: var(--muted-2); }
.ab-stand .fg-chips { background: var(--flaeche); }
/* Handy: Verkaufsstand eingeklappt */
.ab-stand-klapp { display: block; }
.ab-stand-klapp > summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-weight: 700; color: var(--muted); list-style: none; }
.ab-stand-klapp > summary::-webkit-details-marker { display: none; }
.ab-stand-klapp > summary::after { content: "▾"; font-size: 11px; }
.ab-stand-klapp[open] > summary::after { content: "▴"; }
.ab-stand-klapp[open] > .fg-chips { margin-top: 8px; }
/* Überschrift über Suche und Karten, gleiche Grösse wie „Meine Aufgaben“ */
.kv-abschnitt { display: flex; align-items: baseline; gap: 8px; margin: 4px 0 8px; }
.kv-abschnitt h3 { margin: 0; font-size: 15px; letter-spacing: -.01em; }
/* Weitere Filter (eingeklappt) und Zeile „Gefiltert: …“ */
.ab-mehr > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 999px;
  font-size: 13px; font-weight: 700; color: var(--muted); cursor: pointer; user-select: none; white-space: nowrap; }
.ab-mehr > summary::-webkit-details-marker { display: none; }
.ab-mehr > summary svg.i { width: 15px; height: 15px; }
.ab-mehr > summary:hover, .ab-mehr[open] > summary { color: var(--text); border-color: var(--line-3); }
.ab-mehr .wahl-zahl[hidden] { display: none; }
.kv-filter .ab-mehr[open] { flex: 1 1 100%; }
.ab-mehr-inhalt { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.ab-mehr-inhalt .fc { height: 36px; border: 1px solid var(--line); border-radius: 999px; background: var(--flaeche-2); }
.ku-liste .ab-mehr-inhalt select { height: 36px; max-width: 220px; padding: 0 10px; }
.ab-aktiv { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: -2px 0 12px; padding: 7px 8px 7px 14px; border: 1px solid var(--line-strong); border-radius: 12px;
  background: var(--flaeche-2); font-size: 13px; font-weight: 700; }
.ab-aktiv .btn { margin-left: auto; }

/* Visitenkarten */
.kv-raster { position: relative; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 12px; min-height: 60px; border-radius: 16px;
  transition: outline-color .15s ease, background-color .15s ease; }
.kv-raster > .lk-leer { grid-column: 1 / -1; }
.kv-seite.fp-platz .kv-raster { min-height: 220px; }
.kv-karte { position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 14px 14px 12px; border: 1px solid var(--line); border-radius: 16px;
  background: var(--flaeche-2); cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; }
.kv-karte:hover { border-color: var(--line-3); }
.kv-karte.gewaehlt { border-color: var(--ak-ln); background: color-mix(in srgb, var(--ak) 6%, var(--flaeche-2)); }
.kv-karte.laeuft-ab { border-color: var(--warn-ln); }
.kv-karte.neu { animation: kv-neu 1.8s ease-out; }
@keyframes kv-neu { from { box-shadow: 0 0 0 3px var(--ak-ln); } to { box-shadow: 0 0 0 3px transparent; } }
.kv-wahl { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 30px; height: 30px; margin: 0; border-radius: 8px; cursor: pointer; }
.kv-wahl:hover { background: var(--hover); }
.kv-oben { display: flex; align-items: center; gap: 12px; min-width: 0; padding-right: 26px; }
.kv-logo { flex: none; line-height: 0; }
.kv-kopf { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kv-name { color: var(--text); text-decoration: none; }
.kv-name:hover { text-decoration: underline; }
.kv-name b { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; font-size: 15.5px; line-height: 1.3; }
.kv-ort { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--muted); }
.kv-person { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 13px; }
.kv-person span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kv-person svg.i { width: 14px; height: 14px; flex: none; color: var(--muted-2); }
.kv-stand { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 12.5px; color: var(--muted); }
.kv-naechste { display: inline-flex; align-items: center; gap: 5px; color: var(--text); font-weight: 700; }
.kv-naechste svg.i { width: 13px; height: 13px; color: var(--muted-2); }
.kv-karte .grund { max-width: none; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; margin: 0; }
.kv-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); }
.kv-fuss .btn { min-height: 30px; padding: 0 12px; border-radius: 999px; font-size: 12.5px; text-decoration: none; }
.kv-fuss .btn svg.i { width: 14px; height: 14px; }
.kv-fuss .btn:disabled { opacity: .45; cursor: default; }
.kv-fuss .keine-nr { font-size: 12.5px; color: var(--muted-2); padding: 0 4px; }
.kv-ablauf { display: inline-flex; align-items: center; gap: 5px; margin: 0 0 0 auto; }
.kv-ablauf svg.i { width: 12px; height: 12px; }
/* Ablage beim Ziehen aus dem Firmenportal */
:is(#kv-raster, #company-table).kv-ablage-bereit { outline: 2px dashed var(--line-3); outline-offset: 4px; }
:is(#kv-raster, #company-table).kv-ablage-aktiv { outline: 2px dashed var(--ak); background: color-mix(in srgb, var(--ak) 5%, transparent); }
#company-table { position: relative; }
:is(#kv-raster, #company-table).kv-ablage-aktiv::before { content: "Hier ablegen: wird dein Kunde"; position: absolute; top: 12px; left: 50%; z-index: 4; transform: translateX(-50%);
  padding: 8px 16px; border-radius: 999px; background: var(--ak-btn); color: #fff; font-size: 13px; font-weight: 700; white-space: nowrap; pointer-events: none; box-shadow: var(--sch-2); }

/* Seitenleiste Firmenportal: rechts 420px, schmal als Vollbild */
.fp-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 40; display: flex; flex-direction: column; gap: 10px; width: 420px; padding: 16px;
  background: var(--app); border-left: 1px solid var(--line-strong); box-shadow: var(--sch-2); }
html[data-theme="light"] .fp-panel { background: #fff; }
.fp-kopf { display: flex; align-items: flex-start; gap: 10px; }
.fp-titel { flex: 1; min-width: 0; }
.fp-titel h2 { margin: 0; font-size: 18px; letter-spacing: -.015em; }
.fp-titel .sub { margin-top: 2px; font-size: 12.5px; color: var(--muted); }
.fp-zu { flex: none; }
.fp-werkzeug { display: flex; flex-direction: column; gap: 8px; }
.fp-werkzeug input:not([type="checkbox"]) { height: 36px; }
.fp-reihe { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.fp-reihe select { height: 36px; min-width: 0; padding: 0 10px; }
.fp-frei { margin: 2px 0 0; font-size: 13px; }
.fp-zahl { margin: 0; font-size: 12px; color: var(--muted-2); }
.fp-zahl:empty { display: none; }
.fp-liste { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0 2px 0 0; list-style: none; }
.fp-zeile { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--flaeche-2); cursor: grab; }
.fp-zeile:hover { border-color: var(--line-3); }
.fp-zeile.zieht { opacity: .45; }
.fp-zeile.fremd { grid-template-columns: 34px minmax(0, 1fr); background: transparent; cursor: default; opacity: .62; }
.fp-logo { line-height: 0; }
.fp-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: 12px; color: var(--muted); }
.fp-name { color: var(--text); text-decoration: none; }
.fp-name:hover { text-decoration: underline; }
.fp-name b { font-size: 13.5px; overflow-wrap: anywhere; }
.fp-ort { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* „Zuletzt kontaktiert vor 4 Monaten von Name“: bis zwei Zeilen statt abgeschnitten */
.fp-info { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.fp-knopf { min-height: 30px; padding: 0 10px; border-radius: 999px; font-size: 12.5px; }
.fp-knopf svg.i { width: 14px; height: 14px; }
.fp-leer { padding: 18px 8px; text-align: center; font-size: 13px; color: var(--muted); }
.fp-mehr:empty { display: none; }
.fp-mehr { display: flex; justify-content: center; }
.fp-fuss { padding-top: 10px; border-top: 1px solid var(--line); font-size: 13px; }
.fp-fuss a { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); text-decoration: none; }
.fp-fuss a:hover { color: var(--text); text-decoration: underline; }
.fp-fuss svg.i { width: 14px; height: 14px; }
@media (min-width: 901px) {
  .kv-seite.fp-platz { margin-right: 406px; }
}
@media (max-width: 900px) {
  .fp-panel { left: 0; width: auto; border-left: 0; }
  .fp-zeile { grid-template-columns: 34px minmax(0, 1fr); }
  .fp-knopf { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 760px) {
  .ab-bereich { padding: 12px; }
  .ab-kacheln { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
  /* Handy: Zahl links neben dem Titel, eine Zeile pro Kachel (die erste Kundenkarte rückt in den ersten Bildschirm) */
  .ab-kachel { grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; padding: 8px 10px; }
  .ab-kachel.ohne-zahl { grid-template-columns: minmax(0, 1fr); }
  .ab-zahl { grid-row: auto; text-align: left; font-size: 20px; }
  .ab-satz { display: none; }
  .ab-alle { margin-left: 0; }
  .ab-stand .fg-chips { max-width: 100%; }
  .ku-liste .lk-aktionen .kv-ansicht { margin-left: auto; }
  .ku-liste .ab-mehr-inhalt select { flex: 1 1 140px; max-width: none; }
}

/* Kundenprofil, Verlauf: ein Kurzprofil-Versand als ein Eintrag mit Kandidaten-Chips */
.kv-v-kand { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 4px 0 2px; }

/* Kundenprofil: Passende Kandidaten, Hinweise Fremdkunde und Läuft ab, Stern bei Kunden von Kollegen */
.kv-passend { scroll-margin-top: 12px; }
.sc-hinweise .kv-fremd { display: flex; align-items: center; gap: 8px; background: var(--flaeche-2); border-color: var(--line-strong); color: var(--text); }
.sc-hinweise .kv-fremd svg.i, .kv-ablauf-hinweis > svg.i { width: 15px; height: 15px; flex: none; color: var(--muted-2); }
.kv-ablauf-hinweis { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.kv-ablauf-hinweis > svg.i { color: var(--warn-tx); }
.kv-ablauf-knoepfe { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.ku-stern-fremd { display: inline-grid; place-items: center; color: var(--muted-2); opacity: .5; cursor: default; }
.ku-stern-fremd:hover { background: none; }
.ku-setcard .ku-stern-kopf.ku-stern-fremd { padding: 4px 6px; }
.recip-fremd { white-space: nowrap; }

/* Pop-up „Läuft ab“ */
.zt-popup h2 { display: flex; align-items: center; gap: 10px; }
.zt-popup h2 svg.i { width: 22px; height: 22px; color: var(--warn-tx); flex: none; }
.zt-unter { margin: -6px 0 14px; color: var(--muted); }
.zt-liste { display: flex; flex-direction: column; gap: 10px; margin: 0 0 12px; padding: 0; list-style: none; }
.zt-zeile { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--warn-ln); border-radius: 14px; background: var(--flaeche-2); }
.zt-logo { line-height: 0; }
.zt-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 12.5px; color: var(--muted); }
.zt-name { color: var(--text); text-decoration: none; }
.zt-name b { font-size: 15px; overflow-wrap: anywhere; }
.zt-frist { display: inline-flex; align-items: center; gap: 5px; color: var(--warn-tx); font-weight: 700; }
.zt-frist svg.i { width: 13px; height: 13px; }
.zt-knoepfe { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.zt-behalten { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 14px; padding-top: 10px; border-top: 1px solid var(--line); }
.zt-behalten > label:first-child { flex: 1 1 260px; }
.zt-behalten .check-line { margin: 0 0 8px; }
.zt-behalten.hidden { display: none; }
@media (max-width: 560px) {
  .zt-zeile { grid-template-columns: 44px minmax(0, 1fr); }
  .zt-zeile .flogo.md { width: 44px; height: 44px; }
  .zt-knoepfe { grid-column: 1 / -1; justify-content: flex-start; }
}

/* Admin: Kunden-Zuteilung */
.zt-seite { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.zt-kopf { margin-bottom: 8px; }
.zt-einst { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.zt-einst .check-line { margin: 0; }
.zt-tage { flex-direction: row !important; align-items: center; gap: 8px !important; color: var(--text); }
.zt-tage input { width: 96px; height: 34px; }
.zt-bkopf { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 10px; }
.zt-bkopf svg.i { width: 18px; height: 18px; color: var(--muted-2); }
.zt-bkopf h3 { margin: 0; font-size: 16px; }
.zt-bkopf .lk-zahl { font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--flaeche-3); }
.zt-bsub { flex-basis: 100%; }
.zt-tab td { vertical-align: middle; white-space: normal; }
.zt-tab td.nowrap { white-space: nowrap; }
.zt-firma { display: inline-flex; align-items: center; gap: 10px; min-width: 0; color: var(--text); text-decoration: none; }
.zt-firma > span { display: flex; flex-direction: column; min-width: 0; }
.zt-firma b { overflow-wrap: break-word; }
/* Admin-Tabellen: Firmenspalte nie auf einen Buchstaben schrumpfen, auf dem Handy scrollt .table-wrap seitlich */
.zt-tab td:has(> .zt-firma) { min-width: 180px; }
.zt-tab .zt-firma b { overflow-wrap: normal; }
.zt-firma:hover b { text-decoration: underline; }
.zt-akt { white-space: nowrap; text-align: right; }
.zt-akt .zt-behalten { min-width: 280px; text-align: left; white-space: normal; }
.zt-grund-zelle { max-width: 320px; color: var(--muted); }
.zt-mliste { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.zt-mzeile { display: grid; grid-template-columns: minmax(200px, 1fr) minmax(0, 2fr); gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.zt-mzeile:first-child { border-top: 0; }
.zt-inhaber { display: flex; flex-direction: column; gap: 8px; }
.zt-inh { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.zt-inh > span { display: flex; flex-direction: column; min-width: 0; }
/* Mein Tag: Meldungen zur Kunden-Zuteilung (andere Abteilung, automatische Freigaben) */
.zt-meldung { display: flex; flex-direction: column; gap: 12px; border-color: var(--warn-ln); }
.zt-mel-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.zt-mel-zeile > span { flex: 1 1 260px; min-width: 0; }
.zt-mel-zeile svg.i, .zt-mel-kopf svg.i { width: 18px; height: 18px; color: var(--warn-tx); flex: none; }
.zt-mel-frei + .zt-mel-zeile, .zt-mel-zeile + .zt-mel-frei { padding-top: 12px; border-top: 1px solid var(--line); }
.zt-mel-kopf { display: flex; align-items: center; gap: 8px; }
.zt-mel-frei > p { margin: 4px 0 10px; }
.zt-mel-liste { display: flex; flex-direction: column; gap: 8px; margin: 0 0 10px; padding: 0; list-style: none; }
.zt-mel-liste li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.zt-mel-liste .tag { margin: 0; }
.zt-mel-fuss { display: flex; justify-content: flex-end; }
@media (max-width: 760px) {
  .zt-mzeile { grid-template-columns: minmax(0, 1fr); }
  .zt-akt { white-space: normal; text-align: left; }
  .zt-akt .zt-behalten { min-width: 0; }
}

/* Kandidatenwahl für das Kurzprofil */
.kv-kw-bereich { margin-top: 12px; }
.kv-kw-suche { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-bottom: 8px; }
.kv-kw-suche .input-icon { flex: 1 1 260px; }
.kv-kw-suche .input-icon input { height: 36px; }
.kv-kw-suche .check-line { margin: 0; }
.kv-kw-liste { display: flex; flex-direction: column; gap: 4px; max-height: min(260px, 27vh); overflow-y: auto; padding-right: 2px; }
.kv-kw-zeile { display: grid; grid-template-columns: auto 36px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 12px;
  color: var(--text); cursor: pointer; }
.kv-kw-zeile:hover { border-color: var(--line-3); }
.kv-kw-zeile.an { border-color: var(--ak-ln); background: color-mix(in srgb, var(--ak) 7%, transparent); }
.kv-kw-zeile .avatar { width: 36px; height: 36px; border-radius: 10px; font-size: 13px; object-fit: cover; }
.kv-kw-text { display: flex; flex-direction: column; min-width: 0; }
.kv-kw-text b, .kv-kw-text span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kv-kw-rechts { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; font-size: 12px; color: var(--muted); }
.kv-kw-rechts .tag { margin: 0; }
.kv-kw-mehr { margin: 6px 2px 0; }
.kv-kw .modal-actions { position: sticky; bottom: -22px; z-index: 2; align-items: center; flex-wrap: wrap; margin-bottom: -22px; padding: 12px 0 22px; background: var(--app); }
html[data-theme="light"] .kv-kw .modal-actions { background: #fff; }
.kv-kw-zahl { margin-right: auto; font-size: 13px; }
@media (max-width: 560px) {
  .kv-kw-zeile { grid-template-columns: auto 36px minmax(0, 1fr); }
  .kv-kw-rechts { grid-column: 3; justify-content: flex-start; }
}

/* Kundenprofil: „Mehr“ nur als Symbol, damit die Kopf-Aktionen auf einer Zeile bleiben (Name bleibt für Screenreader) */
.ku-setcard .sc-aktionen .mehr > [data-mehr] { gap: 0; padding: 0 11px; font-size: 0; }
.ku-setcard .sc-aktionen .mehr > [data-mehr] svg.i { width: 18px; height: 18px; }
.ku-setcard .sc-aktionen > .btn { padding: 0 12px; }