/* Kandidaten: Übersicht (.kd-liste) und Kandidatenseite (Setcard) */

/* ================= Übersicht: Kopf, Reiter, Filter, Karten, Auswahlleiste ================= */
/* Listenbausteine mit denselben Werten wie die Kundenliste (.ku-liste in kunde.css). Alles strikt unter .kd-liste. */
.kd-liste .lk-kopf { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--line); }
.kd-liste .lk-kopf .head-icon { width: 36px; height: 36px; border-radius: 10px; }
.kd-liste .lk-kopf .head-icon svg.i { width: 19px; height: 19px; }
.kd-liste .lk-titel { flex: 1 1 240px; min-width: 0; }
.kd-liste .lk-titel h2 { font-size: 20px; margin: 0; display: flex; align-items: center; gap: 8px; }
.kd-liste .lk-zahl { font-size: 12.5px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: var(--flaeche-3); font-variant-numeric: tabular-nums; }
.kd-liste .lk-titel .sub { font-size: 13px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kd-liste .lk-aktionen { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.kd-liste .lk-aktionen .btn, .kd-liste .lk-aktionen select { height: 36px; }

/* Reiter: gleiche Segmentleiste wie die Statusfilter der Kunden (.fg-chips/.fc aus styles.css), nur so breit wie nötig */
.kd-liste .kd-reiter { width: fit-content; max-width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.kd-liste .kd-reiter .fc { flex: none; }

/* Filterleiste: Suche zuerst, dann Auswahlfelder, dann Schalter */
.kd-liste .lk-filter { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 12px 0; }
.kd-liste .lk-filter .input-icon { flex: 1 1 280px; min-width: 0; }
.kd-liste .lk-filter input:not([type="checkbox"]), .kd-liste .lk-filter select { height: 36px; padding-top: 0; padding-bottom: 0; }
.kd-liste .lk-filter select { flex: 0 1 auto; min-width: 0; max-width: 220px; }
/* Schalter: Checkbox als Pille, aktiv eingefärbt (Farbe aus der Abteilung, Medical bleibt türkis) */
.kd-liste .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; white-space: nowrap; cursor: pointer; user-select: none; transition: border-color .15s, background .15s; }
.kd-liste .lk-schalter:hover { border-color: var(--line-strong); }
.kd-liste .lk-schalter:has(input:checked) { background: var(--ak-bg); background: color-mix(in srgb, var(--ak) 14%, transparent); border-color: var(--ak-ln); }
.kd-liste .lk-schalter:has(input:disabled) { opacity: .5; cursor: default; }

/* Leere Liste */
.kd-liste .lk-leer { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 28px; text-align: center; color: var(--muted); }
.kd-liste .lk-leer svg.i { width: 28px; height: 28px; opacity: .7; }
.kd-liste .lk-leer p { margin: 0; }

/* Auswahlleiste unter der Liste: belegt immer denselben Platz, damit beim ersten Häkchen nichts springt.
   Mit Auswahl bleibt sie beim Scrollen unten sichtbar. */
.kd-liste .lk-auswahl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 44px; margin-top: 12px; padding: 4px 6px 4px 14px;
  border: 1px dashed var(--line); border-radius: 12px; font-size: 12.5px; color: var(--muted); }
.kd-liste .lk-auswahl .lk-hinweis { display: inline-flex; align-items: center; gap: 6px; }
.kd-liste .lk-auswahl .lk-hinweis svg.i { width: 14px; height: 14px; }
.kd-liste .lk-auswahl b { margin-right: 6px; }
.kd-liste .lk-auswahl.aktiv { position: sticky; bottom: 12px; z-index: 5; border-style: solid; color: var(--text); font-size: 13.5px;
  border-color: var(--ak-ln); border-color: var(--ak-ln);
  background: var(--flaeche); background: color-mix(in srgb, var(--ak) 10%, var(--flaeche));
  box-shadow:  var(--sch-2); }

/* Karten (Reiter Verfügbar und Im Einsatz) */
.kd-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 12px; }
.kd-karte { position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--flaeche-2); cursor: pointer; transition: border-color .15s, background .15s; }
.kd-karte:hover { border-color: var(--line-strong); }
.kd-karte.gewaehlt { border-color: var(--ak-ln); background: var(--ak-bg); background: color-mix(in srgb, var(--ak) 10%, var(--flaeche-2)); }
.kd-karte.bew-schlecht { box-shadow: inset 3px 0 0 var(--gefahr-ln); }
.kd-check { position: absolute; top: 8px; right: 8px; flex-direction: row; padding: 4px; cursor: pointer; }
.kd-kkopf { display: flex; align-items: center; gap: 10px; min-width: 0; padding-right: 24px; }
.kd-karte .avatar.md { width: 48px; height: 48px; border-radius: 12px; font-size: 16px; }
.kd-kname { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.kd-kn1 { display: flex; align-items: center; gap: 2px; min-width: 0; }
.kd-kn1 a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kd-kn1 b { font-size: 15px; font-weight: 650; }
.kd-kname .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kd-kberufe, .kd-kfakten { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.kd-kberufe .tag { margin: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kd-mehrtag { color: var(--muted); }
.kd-kfakten { font-size: 12.5px; color: var(--muted); }
.kd-kfakten > span { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.kd-kfakten .tag { margin: 0; gap: 5px; padding: 2px 8px; }
.kd-kfakten svg.i { width: 13px; height: 13px; }
.tag.kd-einsatz { background: var(--neu-bg); color: var(--neu-tx); }
.kd-kfuss { display: flex; align-items: center; gap: 4px; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--line); }
.kd-kfuss .spacer { flex: 1; }
.kd-kfuss .btn.icon { width: 32px; height: 32px; padding: 0; }
.kd-kfuss .btn.icon svg.i { width: 16px; height: 16px; }
.kd-dok { display: inline-flex; align-items: center; gap: 5px; }
.kd-dok svg.i { width: 14px; height: 14px; }

/* Archiv: Tabelle wie bisher, ohne feste Höhe */
.kd-archiv th.kd-sel, .kd-archiv td.kd-sel { width: 1%; }
.kd-archiv th.kd-akt { text-align: right; }

/* Zu prüfen: gleiche Zeilen wie bisher, nur mit Abstand zu den Reitern */
.kd-liste #checks { margin-top: 14px; }
.kd-pruefkopf { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.kd-pruefkopf p { margin: 0; flex: 1 1 260px; }

@media (max-width: 760px) {
  .kd-liste .lk-aktionen { width: 100%; }
  .kd-liste .lk-aktionen .btn { flex: 1 1 auto; }
  .kd-liste .lk-filter .input-icon { flex-basis: 100%; }
  .kd-liste .lk-filter select { flex: 1 1 40%; max-width: none; }
  .kd-liste .lk-schalter { flex: 1 1 auto; justify-content: center; }
  .kd-liste .lk-auswahl .btn { flex: 1 1 auto; }
  .kd-raster { grid-template-columns: minmax(0, 1fr); }
}

/* ================= Kandidatenseite (Setcard): seitenspezifische Ergänzungen ================= */

/* Linke Setcard über der rechten Spalte, damit das „Mehr“-Menü nie verdeckt wird */
.kd-setcard { position: relative; z-index: 2; min-width: 0; }
/* Rechte Spalte (Dossier, Verlauf) darf schmaler werden als ihr Inhalt, sonst wird die Seite auf dem Handy breiter als der Bildschirm */
.kd-setcard + .stack-col { min-width: 0; }

/* Aktionsleiste: „Mehr“ bleibt auch nach einem Umbruch rechtsbündig, das Menü öffnet sich innerhalb der Karte */
.kd-setcard .sc-aktionen .mehr { margin-left: auto; }

/* Kopf: Berufszeile, Chips, Status */
.kd-beruf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; font-size: 15px; margin-top: 2px; }
.kd-beruf b { font-weight: 650; }
.kd-beruf span:not(.sep) { color: var(--muted); }
.kd-beruf .sep { opacity: .4; }
.sc-chips .tag { margin: 0; display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; }
.sc-chips .tag svg.i { width: 12px; height: 12px; }
.tag.kd-berufstag { background: var(--flaeche-3); color: var(--text); border-color: var(--line-strong); }
.tag.kd-sofort { background: var(--ok-bg); color: var(--ok-tx); }
.tag.kd-spaeter { background: var(--warn-bg); color: var(--orange); }
.pill.cs-nichtfrei { background: var(--warn-bg); color: var(--warn-tx); border-color: var(--warn-ln); }

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

/* Hinweise unter dem Kopf: Text links, Knopf rechts */
.kd-hinweis { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kd-hinweis > span { flex: 1; min-width: 180px; }
.kd-hinweis > svg.i { width: 16px; height: 16px; }
.kd-hinweis .bew { margin-left: 0; }
.kd-hinweis > .bew { flex: 0 0 auto; min-width: 0; }

/* Werte passen sich der Breite an: breite Bereiche zeigen 3 bis 4 Spalten, schmale 1 bis 2 */
.kd-setcard .sc-werte.sp2, .kd-bank .sc-werte.sp2 { grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); }
/* Bereiche nie breiter als die Karte (setcard.css verlangt sonst mindestens 320px) */
.kd-setcard .sc-bereiche { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }

/* Bereiche: links Person und Einsatz übereinander, rechts Beruf (bei genug Breite) */
.kd-spalte { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.kd-spalte > .sc-bereich:last-child { flex: 1; }
.kd-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.kd-tags .tag { margin: 0; }
.kd-ausbildung { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 2px; }

/* Berufserfahrung: kompakte Stationen */
.kd-stationen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 12px 20px; }
.kd-stationen li { border-left: 2px solid var(--line-strong); padding: 1px 0 1px 12px; min-width: 0; }
.kd-st-kopf { font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; }
.kd-st-text { font-size: 13px; color: var(--muted); line-height: 1.45; margin-top: 3px; overflow-wrap: anywhere; }

/* Kurzporträt und Kurzprofil nebeneinander */
.kd-texte { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 14px 24px; }
.kd-texttitel { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 6px; }
.kd-texttitel .small { text-transform: none; letter-spacing: 0; margin-left: 4px; }

/* Bankverbindung im Dossier (Bankkarte kann direkt auf den Bereich gezogen werden) */
.kd-bank { margin-top: 16px; transition: border-color .15s, background .15s; }
.kd-bank.over { border-color: var(--ak-ln); border-style: dashed; background: var(--ak-bg); }
.kd-bank-hinweis { margin: 10px 0 0; }
.kd-iban { font-variant-numeric: tabular-nums; letter-spacing: .03em; white-space: nowrap; }

/* Bearbeiten-Pop-ups */
.kd-edit > label, .kd-edit .grid-2s { margin-top: 10px; }
.kd-edit[data-teil="einsatz"] { min-height: 380px; }
.kd-edit #jobs { margin: 8px 0 10px; }
.kd-edit .bank-box { margin-top: 6px; }

@media (max-width: 760px) {
  .kd-edit .grid-2s { grid-template-columns: 1fr; }
}

/* ================= Kandidatenseite: Passende Kunden (oben rechts, über dem Dossier) =================
   Klar und knapp: Wahl Meine Kunden oder Alle Firmen, Umkreis, Liste zuerst (5 Zeilen), kleine Karte darunter.
   Die Zeile passt sich der Breite des Panels an (Container-Abfrage), damit Name und Anruf-Knopf immer Platz haben. */
/* Sprung zu Passende Kunden: nur wenn die rechte Spalte unter die Setcard rutscht */
.pk-sprung { display: none; }
@media (max-width: 900px) { .pk-sprung { display: inline-flex; } #pk-bereich { scroll-margin-top: 12px; } }
.pk-bereich { container-type: inline-size; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pk-kopf { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pk-kopf h2 { font-size: 18px; margin: 0; letter-spacing: -.01em; }
.pk-zahl { display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--flaeche-3);
  color: var(--text); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pk-laedt-text { margin: 0; font-size: 13px; color: var(--muted); }
.pk-bereich.pk-laedt :is(.pk-liste, .pk-karte, .pk-leer) { opacity: .5; transition: opacity .2s; }

.pk-wahlen { display: flex; flex-wrap: wrap; gap: 6px 8px; }
.pk-wahlen .wahl button { height: 28px; padding: 0 10px; font-size: 12.5px; }
.pk-info { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.pk-hinweis { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--flaeche-2); font-size: 13px; color: var(--text); }
.pk-hinweis > svg.i { width: 16px; height: 16px; color: var(--muted-2); flex: none; }
.pk-hinweis > span { flex: 1 1 160px; min-width: 0; }

/* Liste: Logo, Name mit höchstens zwei Etiketten, darunter Ort und Ansprechperson, rechts Entfernung und Aktionen */
.pk-liste { list-style: none; margin: 0; padding: 0; }
.pk-zeile { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto auto; grid-template-areas: "logo name weg akt" "logo unter weg akt";
  column-gap: 10px; row-gap: 1px; align-items: center; padding: 9px 6px; margin: 0 -6px; border-top: 1px solid var(--line); border-radius: 10px; }
.pk-liste .pk-zeile:first-child { border-top-color: transparent; }
.pk-zeile:hover, .pk-zeile:focus-within { background: var(--hover); }
.pk-logo { grid-area: logo; align-self: center; line-height: 0; }
.pk-logo .flogo { width: 36px; height: 36px; border-radius: 10px; font-size: 12px; }
.pk-name { grid-area: name; display: flex; flex-wrap: wrap; align-items: center; gap: 3px 6px; min-width: 0; }
.pk-nm { display: inline-flex; align-items: center; gap: 5px; min-width: 0; max-width: 100%; }
.pk-nm > a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-weight: 700; font-size: 14px; text-decoration: none; }
.pk-nm > a:hover { text-decoration: underline; text-decoration-color: var(--ak-ln); text-underline-offset: 3px; }
.pk-name .tag { margin: 0; padding: 1px 8px; font-size: 11px; line-height: 16px; white-space: nowrap; }
.pk-stern { display: inline-flex; flex: none; color: var(--yellow); }
.pk-stern svg.i { width: 13px; height: 13px; fill: var(--yellow); }
.pk-unter { grid-area: unter; min-width: 0; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-weg { grid-area: weg; display: flex; flex-direction: column; align-items: flex-end; min-width: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pk-weg b { font-size: 13.5px; font-weight: 700; color: var(--text); }
.pk-weg small { font-size: 12px; color: var(--muted); }
.pk-akt { grid-area: akt; display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.pk-rund { width: 34px; height: 34px; min-height: 34px; padding: 0; border-radius: 50%; border: 1px solid var(--line-strong) !important; background: var(--flaeche-2) !important; color: var(--text); flex: none; }
.pk-rund:hover { border-color: var(--line-3) !important; background: var(--hover) !important; }
.pk-rund svg.i { width: 16px; height: 16px; }
.pk-rund-leer { width: 34px; height: 34px; flex: none; }
.pk-akt .keine-nr { min-width: 34px; text-align: center; }

.pk-mehr { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; }
.pk-mehr-knopf { padding: 4px 0; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 700; color: var(--text); cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--ak-ln); text-underline-offset: 3px; }
.pk-mehr-knopf:hover { text-decoration-color: currentColor; }
.pk-leise { font-size: 12px; color: var(--muted-2); }
.pk-leer { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 12px; border: 1px dashed var(--line-strong); border-radius: 12px; }
.pk-leer p { margin: 0; flex: 1 1 180px; font-size: 13px; color: var(--muted); }

/* Kleine Karte: Wohnort (PLZ) als Ziel, passende Kunden als Punkte */
.pk-karte { height: 200px; border-radius: 14px; border: 1px solid var(--line); }

/* Rechte Spalte bei 1440 px und Handy: Name über die ganze Breite, Entfernung und Aktionen in der dritten Zeile */
@container (max-width: 520px) {
  .pk-zeile { grid-template-columns: 36px minmax(0, 1fr) auto; grid-template-areas: "logo name name" "logo unter unter" "logo weg akt"; row-gap: 0; }
  .pk-logo { align-self: start; margin-top: 2px; }
  .pk-weg { flex-direction: row; align-items: baseline; justify-content: flex-start; gap: 0; }
  .pk-weg b { font-size: 12.5px; }
  .pk-weg small::before { content: "·"; margin: 0 6px; color: var(--muted-2); }
  .pk-akt { margin-top: 2px; }
}
/* Handy: Segmentwahl über die ganze Breite, damit der Umkreis nicht umbricht */
@container (max-width: 400px) {
  .pk-wahlen .wahl { display: flex; flex-wrap: nowrap; width: 100%; }
  .pk-wahlen .wahl button { flex: 1 1 auto; min-width: 0; padding: 0 6px; gap: 4px; }
}
/* Sehr schmal: Aktionen unter die Entfernung */
@container (max-width: 280px) {
  .pk-zeile { grid-template-columns: 36px minmax(0, 1fr); grid-template-areas: "logo name" "logo unter" "logo weg" ". akt"; }
  .pk-akt { justify-content: flex-start; margin-top: 6px; }
}

/* ================= Runde 2: Passende Kunden auf der Kandidatenliste (.kd-pk) =================
   Eine ruhige Zeile zwischen Fakten und Fuss: bis zu 5 überlappende Logos und „6 passende Kunden“.
   Ohne eigene Kunden leise „12 passende Firmen“. Die Zeile ist ein Link zu Passende Kunden auf der Kandidatenseite. */
.kd-pk { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 6px 8px; margin: 0 -8px; border-radius: 10px;
  color: var(--text); text-decoration: none; font-size: 13px; font-weight: 650; transition: background .15s; }
.kd-pk[hidden] { display: none; }
.kd-pk:hover, .kd-pk:focus-visible { background: var(--hover); }
.kd-pk:hover .kd-pk-text { text-decoration: underline; text-decoration-color: var(--ak-ln); text-underline-offset: 3px; }
.kd-pk.leise { color: var(--muted); font-weight: 500; }
.kd-pk > svg.i { width: 14px; height: 14px; margin-left: auto; flex: none; color: var(--muted-2); }
.kd-pk-logos { display: inline-flex; align-items: center; flex: none; }
.kd-pk-logo { position: relative; display: inline-flex; line-height: 0; }
.kd-pk-logo + .kd-pk-logo { margin-left: -7px; }
/* Das erste Logo liegt oben (wichtigste Firma zuerst, ihr Punkt bleibt sichtbar) */
.kd-pk-logo:nth-child(1) { z-index: 5; } .kd-pk-logo:nth-child(2) { z-index: 4; } .kd-pk-logo:nth-child(3) { z-index: 3; } .kd-pk-logo:nth-child(4) { z-index: 2; }
.kd-pk-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Kleines Logo als Kreis mit Rand in der Kartenfarbe, damit sich die Logos sauber überlappen */
.flogo.xs { width: 22px; height: 22px; border-radius: 50%; font-size: 8.5px; letter-spacing: 0; box-shadow: 0 0 0 2px var(--flaeche-2) !important; }
img.flogo.xs { padding: 1px; }
.kd-karte.gewaehlt .flogo.xs { box-shadow: 0 0 0 2px var(--app) !important; }
.kd-pk.leise .flogo.xs { opacity: .78; }
/* Offene Anfrage: kleiner Punkt am Logo */
.kd-pk-logo.offen::after { content: ""; position: absolute; top: -1px; right: -1px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--ak); box-shadow: 0 0 0 2px var(--flaeche-2); }

/* Sprung aus der Liste: Passende Kunden kurz hervorheben */
#pk-bereich { scroll-margin-top: 12px; }
.pk-bereich.kd-pk-ziel { box-shadow: 0 0 0 2px var(--ak-ln), var(--sch-2, 0 0 0 transparent); transition: box-shadow .3s; }

/* Kandidat erfassen: Hinweis auf den Massenimport */
.kd-import-link { display: flex; align-items: center; gap: 6px; margin: 12px 0 0; }
.kd-import-link svg.i { width: 14px; height: 14px; }

/* ================= Runde 2: Ersteller und Verlauf auf der Setcard (.kd-vl*) ================= */
.kd-ersteller { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 12px; margin-top: 4px; font-size: 13px; color: var(--muted); }
.kd-ersteller b { color: var(--text); font-weight: 600; }
.kd-geschaetzt { color: var(--muted-2); }
.kd-vl-knopf { font-size: 13px; font-weight: 600; color: var(--text); }
.kd-vl-knopf svg.i { width: 14px; height: 14px; }
.pill.cs-eingereicht { background: var(--warn-bg); color: var(--warn-tx); border-color: var(--warn-ln); }
.pill.cs-abgelehnt { background: transparent; color: var(--muted-2); border-color: var(--line-strong); }

/* Rechte Spalte: nur die letzten 5 Einträge */
.kd-vl-panel .panel-head { margin-bottom: 12px; }
.kd-vl-panel .panel-head h2 { font-size: 18px; }

/* Pop-up „Verlauf“ */
.kd-vl h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; }
.kd-vl-ersteller { margin: 0 0 12px; font-size: 13.5px; color: var(--muted); }
.kd-vl-ersteller b { color: var(--text); font-weight: 600; }
.kd-vl-filter { width: fit-content; max-width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-bottom: 14px; }
.kd-vl-filter button.fc { flex: none; border: 0; font: inherit; font-size: 13px; cursor: pointer; }
.kd-vl-filter button.fc:not(.active) { background: transparent; }
.kd-vl-filter button.fc:not(.active):hover { background: var(--hover); }
.kd-vl-liste { max-height: min(62vh, 640px); overflow-y: auto; padding-right: 4px; }
.kd-vl-tag + .kd-vl-tag { margin-top: 14px; }
.kd-vl-tag h3 { position: sticky; top: 0; z-index: 1; margin: 0 0 6px; padding: 4px 0; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); background: var(--flaeche); }
html[data-theme="light"] .kd-vl-tag h3 { background: #fff; }
.kd-vl-tag ol { list-style: none; margin: 0; padding: 0; }
.kd-vl-eintrag { display: grid; grid-template-columns: 44px 28px minmax(0, 1fr); align-items: start; column-gap: 8px; padding: 7px 0; border-top: 1px solid var(--line); }
.kd-vl-tag li:first-child { border-top: 0; }
.kd-vl-zeit { padding-top: 5px; font-size: 12px; color: var(--muted-2); font-variant-numeric: tabular-nums; }
.kd-vl-ic { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--flaeche-3); color: var(--muted); }
.kd-vl-ic svg.i { width: 14px; height: 14px; }
.kd-vl-eintrag.art-erfasst .kd-vl-ic, .kd-vl-eintrag.art-kurzprofil .kd-vl-ic { background: var(--ak-bg); color: var(--text); }
.kd-vl-eintrag.art-vermittler .kd-vl-ic { background: var(--warn-bg); color: var(--warn-tx); }
.kd-vl-inhalt { min-width: 0; }
.kd-vl-titel { font-size: 13.5px; line-height: 1.35; overflow-wrap: anywhere; }
.kd-vl-titel b { font-weight: 650; }
.kd-vl-titel a { color: var(--text); }
.kd-vl-text { margin-top: 1px; font-size: 13px; line-height: 1.4; color: var(--muted); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.kd-vl-wer { margin-top: 1px; font-size: 12px; color: var(--muted-2); }
.kd-vl-leer { padding: 18px 0; }
@media (max-width: 560px) {
  .kd-vl-eintrag { grid-template-columns: 38px minmax(0, 1fr); }
  .kd-vl-ic { display: none; }
}

/* ================= Runde 2b: Kandidatenseite mit Kopf und Reitern (.kd-seite, .kd-kopf2, .kd-reiterleiste) =================
   Kopf mit dem Wichtigsten (ganze Breite, Aktionen rechts), darunter Reiter. Alle Panels bleiben im DOM, inaktive sind hidden. */
.kd-zurueck { margin-bottom: 10px; }
.kd-seite { display: flex; flex-direction: column; gap: 12px; min-width: 0; z-index: auto; }
.kd-seite > * { min-width: 0; }
/* Kopf über allem, was folgt: das „Mehr“-Menü liegt so nie unter den Reitern oder Panels */
.kd-kopf2 { position: relative; z-index: 3; }
.kd-kopf2.sc-kopfkarte { grid-template-columns: auto minmax(0, 1fr) minmax(250px, 390px); gap: 12px 20px; padding: 18px 20px; }
.kd-kopf2 .sc-titel h1 { font-size: 26px; }
.kd-kopf2 .sc-titel { gap: 5px; }
.kd-kopf2 .sc-chips { margin-top: 0; }
.kd-kopf2 .sc-aktionen { grid-column: 3; grid-row: 1; justify-content: flex-end; align-content: flex-start; border-top: 0; padding-top: 0; }
.kd-kopf2 .sc-aktionen .btn { height: 34px; padding: 0 12px; font-size: 13px; }
.kd-kopf2 .sc-aktionen .mehr { margin-left: 0; }
.kd-wer { font-weight: 600; color: var(--text); }
.kd-stand { display: inline-flex; align-items: center; font-size: 12px; color: var(--muted); white-space: nowrap; }
.kd-kopf2 .kd-ersteller { margin-top: 0; }
.kd-kopf2 .sc-kontaktzeile { margin-top: 2px; }
.kd-hinweise:empty { display: none; }
.kd-hinweise { margin-top: 0; }
.vf-hinweis.leise { background: var(--flaeche-2); border-color: var(--line); color: var(--muted); }
.kd-h-freigabe { border-color: var(--warn-ln); }
.pill.cs-freigabe { background: var(--warn-bg); color: var(--warn-tx); border-color: var(--warn-ln); }
.pill.cs-verworfen { background: transparent; color: var(--muted-2); border-color: var(--line-strong); }
@media (max-width: 1180px) {
  .kd-kopf2.sc-kopfkarte { grid-template-columns: auto minmax(0, 1fr); }
  .kd-kopf2 .sc-aktionen { grid-column: 1 / -1; grid-row: auto; justify-content: flex-start; padding-top: 12px; border-top: 1px solid var(--line); }
  .kd-kopf2 .sc-aktionen .mehr { margin-left: auto; }
}
@media (max-width: 760px) {
  .kd-kopf2.sc-kopfkarte { grid-template-columns: auto minmax(0, 1fr); padding: 14px; gap: 10px 12px; }
  .kd-kopf2 .sc-bild .avatar.lg { width: 56px; height: 56px; border-radius: 14px; font-size: 18px; }
  .kd-kopf2 .sc-titel h1 { font-size: 21px; }
  .kd-kopf2 .sc-aktionen .btn { flex: 1 1 auto; justify-content: center; }
  .kd-kopf2 .sc-aktionen .mehr { flex: 1 1 auto; }
  .kd-kopf2 .sc-aktionen .mehr > .btn { width: 100%; }
}

/* Reiterleiste: Pillen mit Zahl, mobil waagrecht scrollbar */
.kd-reiterleiste { display: flex; gap: 4px; padding: 4px; max-width: 100%; width: fit-content; overflow-x: auto; scrollbar-width: none;
  border: 1px solid var(--line); border-radius: 14px; background: var(--flaeche-2); }
.kd-reiterleiste::-webkit-scrollbar { display: none; }
.kd-reiter-knopf { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border: 0; border-radius: 10px; background: none;
  color: var(--muted); font: inherit; font-size: 13.5px; font-weight: 650; white-space: nowrap; cursor: pointer; transition: background .15s, color .15s; }
.kd-reiter-knopf svg.i { width: 15px; height: 15px; }
.kd-reiter-knopf:hover { color: var(--text); background: var(--hover); }
.kd-reiter-knopf[aria-selected="true"] { background: var(--text); color: var(--app); box-shadow: 0 4px 12px -6px rgba(0, 0, 0, .5); }
.kd-reiter-knopf:focus-visible { outline: 2px solid var(--fokus); outline-offset: 1px; }
.kd-reiter-zahl { display: inline-grid; place-items: center; min-width: 20px; height: 18px; padding: 0 6px; border-radius: 9px; font-size: 11px; font-weight: 700;
  background: var(--flaeche-3); color: var(--text); font-variant-numeric: tabular-nums; }
.kd-reiter-zahl[hidden] { display: none; }
.kd-reiter-knopf[aria-selected="true"] .kd-reiter-zahl { background: color-mix(in srgb, var(--app) 18%, transparent); color: inherit; }
.kd-reiter-knopf.hat-neu .kd-reiter-zahl { background: var(--ak-btn); color: #fff; }
@media (max-width: 760px) { .kd-reiterleiste { width: 100%; } .kd-reiter-knopf { height: 36px; padding: 0 12px; } }

.kd-tabpanel[hidden] { display: none; }
.kd-tabpanel:focus { outline: none; }
.kd-tabpanel > .glass + .glass { margin-top: 14px; }
.kd-uebersicht .sc-bereiche { margin-top: 0; }
.kd-seite .sc-bereiche { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); align-items: start; }
.kd-vf-klein { height: 28px !important; padding: 0 10px !important; font-size: 12px; }
.kd-vf-klein svg.i { width: 13px; height: 13px; }

/* Dossier: Unterlagen links, Bankverbindung rechts */
.kd-dossier-raster { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(min(300px, 100%), 1fr); gap: 16px; align-items: start; }
.kd-dossier-rechts .kd-bank { margin-top: 0; }
.kd-dossier-knoepfe { margin-top: 10px; gap: 8px; flex-wrap: wrap; }
@media (max-width: 900px) { .kd-dossier-raster { grid-template-columns: minmax(0, 1fr); } }

/* Passende Kunden über die ganze Breite: Liste links, Karte rechts */
.kd-pk-huelle { container-type: inline-size; }
@container (min-width: 860px) {
  .kd-pk-huelle .pk-bereich { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, .85fr); column-gap: 22px; row-gap: 0; align-items: start; }
  .kd-pk-huelle .pk-bereich > * { grid-column: 1; }
  .kd-pk-huelle .pk-bereich > * + * { margin-top: 10px; }
  .kd-pk-huelle .pk-bereich > .pk-karte { grid-column: 2; grid-row: 1 / span 12; align-self: stretch; height: auto; min-height: 380px; margin-top: 0; }
}

/* Nachrichten: Vermittler-Panel, Verfügbarkeit, E-Mails */
.kd-nachrichten { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
.kd-nachrichten.mit-vm { grid-template-columns: minmax(0, 1.2fr) minmax(min(340px, 100%), 1fr); }
.kd-nachrichten > * { min-width: 0; }
.kd-n-rechts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); gap: 14px; align-items: start; min-width: 0; }
.kd-n-rechts > * { min-width: 0; }
.kd-nachrichten.mit-vm .kd-n-rechts { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 1000px) { .kd-nachrichten.mit-vm { grid-template-columns: minmax(0, 1fr); } }
.kd-nachrichten .panel-head h2, .kd-dossier .panel-head h2 { font-size: 18px; }
.vf-liste, .kd-mailliste { list-style: none; margin: 0; padding: 0; }
.vf-zeile { display: flex; flex-direction: column; gap: 4px; padding: 10px 0; border-top: 1px solid var(--line); }
.vf-zeile:first-child { border-top: 0; padding-top: 0; }
.vf-z-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.vf-z-kopf .tag { margin: 0; }
.vf-z-kanal { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 650; }
.vf-z-kanal svg.i { width: 14px; height: 14px; color: var(--muted-2); }
.vf-z-antwort { font-size: 13.5px; overflow-wrap: anywhere; }
.vf-z-knoepfe { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.vf-zeile.st-uebernommen, .vf-zeile.st-abgelehnt { opacity: .78; }
.kd-mail { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.kd-mail:first-child { border-top: 0; padding-top: 0; }
.kd-mail-ic { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--flaeche-3); color: var(--muted); }
.kd-mail-ic svg.i { width: 14px; height: 14px; }
.kd-mail-text { min-width: 0; }
.kd-mail-text > div { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Verlauf-Reiter: die letzten 10, Rest im Pop-up */
.kd-vl-kurz { margin: 0; }
.kd-vl-kurz li .kd-vl-text { margin-top: 2px; }
.kd-vl-alle { margin-top: 8px; }

/* ================= Runde 2b: Verfügbarkeit anfragen (Pop-ups .vf-) ================= */
.vf-fenster h2, .vf-antwort h2 { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.vf-stand, .vf-wer { margin: 0 0 10px; font-size: 13.5px; }
.vf-teil { margin-top: 12px; padding: 12px 14px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--flaeche-2); }
.vf-teil h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 14px; }
.vf-teil h3 svg.i { width: 15px; height: 15px; color: var(--muted-2); }
.vf-teil.vf-ziel { border-color: var(--ak-ln); box-shadow: 0 0 0 1px var(--ak-ln); }
.vf-kanal { margin-bottom: 4px; }
.vf-reihe { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 14px; margin: 10px 0 8px; }
.vf-datum { flex: 0 0 auto; }
.vf-vorlagen { display: flex; flex-wrap: wrap; gap: 6px; }
.vf-vorlagen .btn.active { border-color: var(--line-3); background: var(--flaeche-3); }
.modal-box.wide.vf-box { width: min(880px, 100%); }
.vf-vorschau-box { margin-top: 10px; }
.vf-vorschau-box > summary { cursor: pointer; font-size: 13px; color: var(--muted); padding: 4px 0; }
.vf-vorschau-box[open] > summary { margin-bottom: 6px; }
.vf-postfach { margin: 6px 0 10px; display: flex; align-items: center; gap: 8px; }
.vf-postfach svg.i { width: 16px; height: 16px; flex: none; }
.vf-vorschau { max-height: 240px; overflow: auto; }
.vf-telefon { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.vf-tel-zeilen { display: grid; gap: 8px; }
.vf-tel-zeile { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 10px; }
.vf-tel-zeile label { flex: 0 1 220px; }
.vf-tel-text { flex: 0 1 220px; font-size: 13px; color: var(--muted); align-self: center; }
.vf-antwort-karte { margin: 4px 0; padding: 12px 14px; border: 1px solid var(--ok-ln); border-radius: 14px; background: var(--ok-bg); font-size: 14px; }
.vf-erkannt { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--ok-bg); color: var(--ok-tx); border: 1px solid var(--ok-ln); font-size: 15px; }
.vf-erkannt b { font-weight: 700; }
.vf-erkannt.nein { background: var(--warn-bg); color: var(--warn-tx); border-color: var(--warn-ln); }
.vf-erkannt svg.i { width: 18px; height: 18px; flex: none; }
.vf-zitat { margin: 10px 0; padding: 8px 12px; border-left: 3px solid var(--line-strong); color: var(--muted); font-size: 13px; line-height: 1.5;
  white-space: pre-wrap; overflow-wrap: anywhere; max-height: 180px; overflow: auto; }
.vf-antwort-knoepfe { flex-wrap: wrap; }
@media (max-width: 760px) {
  .vf-fenster .grid-2s { grid-template-columns: 1fr; }
  .vf-kanal { display: flex; width: 100%; }
  .vf-kanal button { flex: 1 1 auto; padding: 0 8px; font-size: 12.5px; }
  .vf-tel-zeile label, .vf-tel-text { flex: 1 1 100%; }
  .vf-tel-zeile .btn { flex: 1 1 auto; }
  .vf-antwort-knoepfe .btn { flex: 1 1 auto; }
}

/* ================= Runde 2b: Kandidatenliste Meine/Alle, Berater ================= */
.kd-liste .kd-sicht { flex: none; }
.kd-erfasst { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kd-freigabe-satz { display: flex; align-items: center; gap: 6px; margin: 12px 0 0; }
.kd-freigabe-satz svg.i { width: 14px; height: 14px; }
.kd-liste .kd-frg-host { margin-top: 14px; }
@media (max-width: 760px) {
  .kd-liste .kd-sicht { width: 100%; display: flex; }
  .kd-liste .kd-sicht button { flex: 1 1 auto; }
}