/* CRM-Seiten nach docs/design/entwurf. Farben nur aus theme.css. Mindestschrift 12 Pixel. */
.crm { max-width: none; margin: 0; padding: 32px 40px 64px; display: flex; flex-direction: column; gap: 24px; box-sizing: border-box; }
.crm h1 { font-size: var(--fs-40); font-weight: 600; margin: 0; letter-spacing: -0.01em; }
.crm h2 { font-size: var(--fs-20); font-weight: 600; margin: 0; }
.crm .kopf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.crm .kopf .sub, .crm .muted { color: var(--muted); font-size: var(--fs-14); }
.crm .crumbs { display: flex; gap: 8px; color: var(--muted); font-size: var(--fs-13); }
.crm .crumbs a { color: var(--muted); text-decoration: none; }
.crm .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-karte); padding: 28px; box-shadow: var(--shadow-karte); }
.crm .card.tight { padding: 20px 24px; }
.crm .card > .titel { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 16px; }
.crm .card > .titel span { color: var(--muted); font-size: var(--fs-13); }
.crm .grid2 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 24px; }
.crm .grid2e { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
/* Profile in Spalten wie Salesforce und HubSpot (06.11.2026): breit drei Spalten (Fakten, Arbeit, Zusammenhang),
   mittel zwei (Arbeit links, rechts Zusammenhang über den Fakten), schmal eine. Karten wachsen nicht in die Höhe. */
.crm .profil-raster { display: grid; gap: 24px; align-items: start;
  grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr); grid-template-areas: "arbeit bezug" "arbeit fakten"; grid-template-rows: auto 1fr; }
/* Verwaltung und Personal stehen wie alle Seiten links am Menü und nutzen die Breite (Connor, 09.11.2026) */
.crm.schmal { max-width: none; margin: 0; }
.crm .profil-raster > .fakten { grid-area: fakten; }
.crm .profil-raster .titel { flex-wrap: wrap; row-gap: 4px; }
.crm .profil-raster .titel h2 { white-space: nowrap; }
.crm .profil-raster > .arbeit { grid-area: arbeit; }
.crm .profil-raster > .bezug { grid-area: bezug; }
@media (min-width: 1700px) {
  .crm .profil-raster { grid-template-columns: minmax(320px, 1fr) minmax(0, 2fr) minmax(320px, 1fr); grid-template-areas: "fakten arbeit bezug"; }
}
@media (max-width: 1000px) {
  .crm .profil-raster { grid-template-columns: minmax(0, 1fr); grid-template-areas: "arbeit" "bezug" "fakten"; }
}
.crm .pill, .crm .btn { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 18px; border-radius: var(--r-pille);
  border: 1px solid var(--control-line); background: transparent; color: var(--text); font: 500 var(--fs-14) var(--sans);
  text-decoration: none; cursor: pointer; }
.crm .btn.akzent { background: var(--accent-fill); color: var(--on-accent); border-color: var(--accent-edge); font-weight: 600; }
.crm .btn.linie { color: var(--accent-text); border-color: var(--accent-line); font-weight: 600; }
.crm .btn[disabled], .crm .pill[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.crm .chip { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: var(--r-pille); background: var(--chip); font-size: var(--fs-12); color: var(--text-2); }
.crm .chip.lime { color: var(--accent-text); border: 1px solid var(--accent-line); background: transparent; }
.crm .chip.warn { color: var(--warn); border: 1px solid var(--warn); background: transparent; }
.crm .reiter { display: flex; gap: 8px; flex-wrap: wrap; }
.crm .reiter a, .crm .reiter button { padding: 8px 16px; border-radius: var(--r-pille); border: 1px solid var(--control-line); color: var(--text-2);
  text-decoration: none; background: transparent; font: 500 var(--fs-14) var(--sans); cursor: pointer; }
.crm .reiter [aria-pressed="true"] { border-color: var(--accent-line); color: var(--accent-text); background: var(--chip); }
.crm nav.reiter a { min-height: 44px; display: inline-flex; align-items: center; padding: 0 20px; box-sizing: border-box; }
.crm nav.reiter a[aria-current="page"] { background: var(--inv-bg); color: var(--inv-text); border-color: transparent; font-weight: 500; }
.crm input, .crm select, .crm textarea { box-sizing: border-box; width: 100%; border-radius: var(--r-kachel); border: 1px solid var(--control-line);
  background: var(--inner); color: var(--text); font: var(--fs-14) var(--sans); padding: 10px 14px; }
.crm textarea { min-height: 84px; resize: vertical; }
.crm input:focus, .crm select:focus, .crm textarea:focus { outline: 2px solid var(--accent-line); outline-offset: 1px; }
.crm label { display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-13); color: var(--text-2); }
.crm .formular { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.crm .formular .voll { grid-column: 1 / -1; }

/* Listen: ruhige Kopfzeile, die beim Scrollen stehen bleibt, Zahlen rechtsbündig, lange Texte gekürzt */
.nur-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.crm .liste-karte { padding: 20px 24px 8px; display: flex; flex-direction: column; gap: 14px; }
.crm .liste-karte > .scroll { max-height: calc(100vh - 290px); overflow: auto; margin: 0 -24px; padding: 0 24px; }
.crm .tabelle { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-14); }
.crm .tabelle th { position: sticky; top: 0; z-index: 2; background: var(--card); text-align: left; font-weight: 500; color: var(--label);
  font-size: var(--fs-12); letter-spacing: .06em; text-transform: uppercase; padding: 12px 14px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.crm .tabelle td { padding: 12px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; color: var(--text-2); }
.crm .tabelle td:first-child, .crm .tabelle th:first-child { padding-left: 4px; }
.crm .tabelle .zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.crm .tabelle .eng { white-space: nowrap; width: 1%; }
.crm .tabelle .haupt { color: var(--text); font-weight: 500; }
.crm .tabelle td small { display: block; color: var(--muted); font-size: var(--fs-12); margin-top: 2px; }
.crm .tabelle .kurz { display: inline-block; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.crm .tabelle tr.zeile { cursor: pointer; }
.crm .tabelle tr.zeile:hover td { background: rgba(var(--accent-rgb), .05); }
.crm .tabelle tr.zeile:focus-within td { background: rgba(var(--accent-rgb), .07); }
.crm .tabelle input[type="checkbox"], .crm .check input { width: 16px; height: 16px; accent-color: var(--accent-line); cursor: pointer; }
.crm .wer-text { display: flex; flex-direction: column; min-width: 0; }
.crm .lead { display: inline-flex; width: 26px; height: 26px; border-radius: var(--r-pille); align-items: center; justify-content: center; font-size: var(--fs-12);
  font-weight: 600; background: var(--chip); color: var(--text-2); }
.crm .lead-A { color: var(--accent-text); box-shadow: inset 0 0 0 1px var(--accent-line); }
.crm .lead-BL { color: var(--warn); box-shadow: inset 0 0 0 1px var(--warn); }
.crm .cvs { display: inline-flex; flex-direction: column; gap: 4px; min-width: 70px; font-variant-numeric: tabular-nums; }

/* Werkzeugleiste: Suche, Ansicht, Filter, Spalten (oben rechts) */
.crm .werkzeug { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.crm .werkzeug .suche { flex: 1 1 280px; }
.crm .werkzeug .suche input { border-radius: var(--r-pille); height: 44px; padding: 0 18px; }
.crm .werkzeug select { border-radius: var(--r-pille); height: 44px; padding: 0 16px; width: auto; }
.crm .werkzeug .pill svg, .crm .spalten-wahl svg { width: 16px; height: 16px; }
.crm .werkzeug .pill.an { border-color: var(--accent-line); color: var(--accent-text); background: var(--chip); }
.crm .spalten-wahl { position: relative; margin-left: auto; }
.crm .spalten-pop { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; width: 260px; background: var(--pop); border: 1px solid var(--line);
  border-radius: var(--r-karte); padding: 16px; box-shadow: var(--shadow-pop); display: flex; flex-direction: column; gap: 10px; }
.crm .spalten-pop[hidden] { display: none; }
.crm .spalten-liste { display: flex; flex-direction: column; gap: 2px; max-height: 50vh; overflow: auto; }
.crm .check { flex-direction: row; align-items: center; gap: 10px; padding: 7px 8px; border-radius: var(--r-feld); font-size: var(--fs-14); color: var(--text); cursor: pointer; }
.crm .check:hover { background: rgba(var(--accent-rgb), .06); }
.crm .spalten-fuss { display: flex; justify-content: space-between; gap: 8px; border-top: 1px solid var(--line-soft); padding-top: 10px; }
.crm .schnell { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.crm .schnell a { padding: 6px 14px; border-radius: var(--r-pille); border: 1px solid var(--line); color: var(--muted); font-size: var(--fs-13); text-decoration: none; }
.crm .schnell a[aria-current] { background: var(--chip); color: var(--text); border-color: transparent; font-weight: 500; }
.crm .schnell .pille a { border: 0; padding: 0 4px; color: inherit; font-size: var(--fs-16); }
.crm .tabelle .id { color: var(--muted); font-size: var(--fs-12); white-space: nowrap; font-variant-numeric: tabular-nums; }
.crm .tabelle .wer { display: flex; align-items: center; gap: 12px; }
.crm .tabelle .wer small { display: block; color: var(--muted); font-size: var(--fs-12); }
.crm .av { width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--r-pille); background: var(--chip); display: inline-flex; align-items: center;
  justify-content: center; font-size: var(--fs-13); font-weight: 600; color: var(--text); }
.crm .scroll { overflow-x: auto; }
.crm .leer { color: var(--muted); padding: 18px 4px; font-size: var(--fs-14); }

/* Kandidatenprofil */
.crm .profil-kopf { display: flex; flex-wrap: wrap; gap: 28px; align-items: center; justify-content: space-between; }
.crm .profil-kopf .links { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; }
.crm .foto { width: 148px; height: 148px; border-radius: var(--r-pille); background: var(--chip); border: 2px solid var(--accent-line);
  box-shadow: 0 0 0 6px rgba(var(--accent-rgb), .12); display: flex; align-items: center; justify-content: center; font-size: var(--fs-40); font-weight: 600; }
.crm .profil-kopf h1 { font-size: var(--fs-40); }
.crm .profil-kopf .zeile { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; color: var(--text-2); font-size: var(--fs-14); }
.crm .profil-kopf .rechts { display: flex; flex-direction: column; gap: 12px; align-items: flex-end; }
.crm .profil-kopf .rechts .knoepfe { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.crm .meta { display: flex; gap: 18px; color: var(--muted); font-size: var(--fs-13); }
.crm .meta b { color: var(--text); font-weight: 500; }
.crm .actions { display: flex; flex-wrap: wrap; gap: 8px; }
.crm .actions button { padding: 8px 14px; border-radius: var(--r-pille); border: 1px solid var(--control-line); background: transparent;
  color: var(--text-2); font: 500 var(--fs-13) var(--sans); cursor: pointer; }
.crm .actions button[aria-pressed="true"] { border-color: var(--accent-line); color: var(--accent-text); background: var(--chip); }
.crm .erfassen-zeile { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 12px; align-items: end; margin-top: 14px; }
.crm .erfassen-zeile .voll { grid-column: 1 / -1; }

.crm .strahl { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.crm .strahl .st { display: flex; flex-direction: column; gap: 8px; font-size: var(--fs-12); color: var(--muted); min-width: 0; }
.crm .strahl .bar { height: 10px; border-radius: var(--r-pille); background: var(--track); }
.crm .strahl .st.an .bar { background: var(--accent-fill); }
.crm .strahl .st.an { color: var(--text); }
.crm .strahl.grau .st.an .bar { background: var(--track-2); }
.crm .strahl .st b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.crm .eck { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.crm .eck .feld { background: var(--inner); border-radius: var(--r-kachel); padding: 16px; }
.crm .eck .feld span { display: block; color: var(--muted); font-size: var(--fs-12); }
.crm .eck .feld b { display: block; font-size: var(--fs-16); font-weight: 600; margin-top: 4px; }
.crm .eck .feld small { color: var(--muted); font-size: var(--fs-12); }
.crm .liste { display: flex; flex-direction: column; }
.crm .liste > a, .crm .liste > div { display: flex; gap: 12px; align-items: center; padding: 12px 4px; border-bottom: 1px solid var(--line-soft);
  color: var(--text); text-decoration: none; }
.crm .liste > :last-child { border-bottom: 0; }
.crm .liste small { display: block; color: var(--muted); font-size: var(--fs-12); }
.crm .liste .rechts { margin-left: auto; color: var(--muted); font-size: var(--fs-13); text-align: right; }
.crm .verlauf .eintrag { padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
.crm .verlauf .eintrag .kopfzeile { display: flex; gap: 10px; align-items: center; font-size: var(--fs-13); color: var(--muted); }
.crm .verlauf .eintrag p { margin: 6px 0 0; white-space: pre-wrap; color: var(--text-2); font-size: var(--fs-14); }
.crm .balken { height: 8px; border-radius: var(--r-pille); background: var(--track); overflow: hidden; }
.crm .balken i { display: block; height: 100%; background: var(--accent-line); }
.crm .netz { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; font-size: var(--fs-13); }
.crm .netz .zelle { background: var(--inner); border-radius: var(--r-feld); padding: 10px; text-align: center; text-decoration: none; color: var(--text); }
.crm .netz .zelle b { display: block; font-size: var(--fs-16); }
.crm .netz .zelle.leer0 { color: var(--muted); }

.crm-sticky { position: fixed; top: 0; left: var(--side-w); right: 0; z-index: 25; display: flex; align-items: center; gap: 14px;
  padding: 12px 32px; background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: 0 8px 24px var(--shadow); }
.crm-sticky[hidden] { display: none; }
.crm-sticky .name { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.crm-sticky .name small { color: var(--muted); font-size: var(--fs-13); }

.crm-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 60; background: var(--inv-bg); color: var(--inv-text);
  border-radius: var(--r-pille); padding: 12px 14px 12px 22px; display: flex; gap: 16px; align-items: center; box-shadow: var(--shadow-pop);
  font-size: var(--fs-14); max-width: calc(100vw - 32px); }
.crm-toast button { border: 0; border-radius: var(--r-pille); padding: 8px 14px; background: var(--accent-fill); color: var(--on-accent); font: 600 var(--fs-13) var(--sans); cursor: pointer; }

.neu-reiter { display: flex; gap: 8px; margin: 14px 0 20px; flex-wrap: wrap; }
.neu-hinweis { margin-top: 14px; padding: 14px 16px; border-radius: var(--r-kachel); background: var(--inner); font-size: var(--fs-14); }
.neu-hinweis.warn { border: 1px solid var(--warn); }
.neu-fuss { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.fehler { color: var(--warn); font-size: var(--fs-14); }

/* Quick Changes: Klick, ändern, Enter */
.crm .qc { cursor: text; border-radius: var(--r-feld); padding: 0 2px; margin: 0 -2px; border-bottom: 1px dashed transparent; }
.crm .qc:hover, .crm .qc:focus-visible { border-bottom-color: var(--accent-line); outline: none; background: rgba(var(--accent-rgb), .06); }
.crm .qc .offen { color: var(--muted); font-style: normal; font-weight: 500; font-size: var(--fs-13); }
.crm .qc .offen::before { content: "+ "; color: var(--accent-text); }
.crm .qc:hover .offen { color: var(--accent-text); }
.crm .qc.an { border: 0; background: none; }
.crm .qc.an input, .crm .qc.an select { width: auto; min-width: 9em; padding: 4px 8px; border-radius: var(--r-feld); font-size: var(--fs-14); }
.crm .qc.an textarea { min-width: min(560px, 80vw); }
.crm h1 .qc.an input { font-size: var(--fs-20); }
.crm .mini { font-size: var(--fs-12); color: var(--accent-text); margin-left: 4px; }
.crm .kontaktzeile { gap: 14px; }

/* Firmenlogos (19.7), ohne Logo das Kürzel */
.crm .mitlogo { display: inline-flex; align-items: center; gap: 8px; }
.crm .logo { width: 28px; height: 28px; flex-shrink: 0; border-radius: var(--r-feld); object-fit: contain; background: var(--inner); border: 1px solid var(--line-soft); }
.crm .logo.kuerzel { display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-12); font-weight: 600; color: var(--text-2); box-sizing: border-box; }
.crm .logo.gross { width: 72px; height: 72px; border-radius: var(--r-kachel); font-size: var(--fs-20); }
.crm .tabelle.pflege input { min-width: 150px; padding: 8px 10px; font-size: var(--fs-14); }

/* Seitenfenster rechts (10.1) */
.crm-seite { position: fixed; top: 0; right: 0; bottom: 0; z-index: 45; width: min(460px, 100vw); max-width: none; margin: 0;
  padding: 24px; gap: 16px; overflow-y: auto; background: var(--card); border-left: 1px solid var(--line); box-shadow: -16px 0 40px var(--shadow); }
.crm-seite[hidden] { display: none; }
.crm-seite .seite-kopf { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.crm-seite .seite-name { font-size: var(--fs-28); font-weight: 600; color: var(--text); text-decoration: none; }
.crm-seite .zeile { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.crm-seite .seite-form { display: flex; flex-direction: column; gap: 12px; }
.crm-seite .seite-form[hidden], .crm-seite label[hidden] { display: none; }
.crm-seite .knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
.crm-seite .pill { min-height: 36px; padding: 0 14px; font-size: var(--fs-13); }
.crm .name-link { text-decoration: none; border: 0; background: none; padding: 0; font: inherit; color: var(--text); cursor: pointer; text-align: left; }
.crm .name-link:hover { color: var(--accent-text); text-decoration: underline; }
.crm .lupe { margin-left: auto; width: 32px; height: 32px; border-radius: var(--r-pille); border: 1px solid transparent; background: none; color: var(--muted); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; }
.crm .lupe:hover, .crm .lupe:focus-visible { border-color: var(--accent-line); color: var(--accent-text); }
.crm .lupe svg { width: 16px; height: 16px; }
.crm .auswahl { display: flex; gap: 12px; align-items: center; padding: 8px 12px; border-radius: var(--r-kachel); background: var(--inner); margin-bottom: 8px; }
.crm .auswahl[hidden] { display: none; }

/* Listen-Funktionen (Abschnitt 9): Filter, Gruppen, Ansichten, private Listen */
.crm .filter { display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: var(--r-karte); background: var(--inner); margin-bottom: 16px; }
.crm .filter[hidden] { display: none; }
.crm .flabel { display: block; font-size: var(--fs-13); color: var(--text-2); margin-bottom: 6px; }
.crm .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.crm .chips button { padding: 6px 12px; border-radius: var(--r-pille); border: 1px solid var(--control-line); background: var(--card); color: var(--text-2); font: 500 var(--fs-13) var(--sans); cursor: pointer; }
.crm .chips button[aria-pressed="true"] { border-color: var(--accent-line); color: var(--accent-text); background: var(--chip); }
.crm .fgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.crm .bereich { display: flex; gap: 6px; }
.crm .bereich input { min-width: 0; }
.crm tr.gruppe td { background: var(--inner); padding-top: 8px; padding-bottom: 8px; }
.crm tr.gruppe button { border: 0; background: none; font: 500 var(--fs-14) var(--sans); color: var(--text); cursor: pointer; padding: 0; }
.crm tr.gruppe .pfeil { display: inline-block; width: 1em; color: var(--accent-text); }
.crm label.inline { flex-direction: row; align-items: center; gap: 8px; }
.crm label.inline select { width: auto; padding: 6px 10px; }

.crm .pillen { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.crm .pille { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 12px; border-radius: var(--r-pille); border: 1px solid var(--accent-line);
  color: var(--accent-text); font-size: var(--fs-13); }
.crm .pille button { border: 0; background: none; color: inherit; font-size: var(--fs-16); line-height: 1; cursor: pointer; padding: 0 4px; }
.crm .grad { min-width: 52px; text-align: center; font-weight: 600; font-size: var(--fs-13); padding: 4px 8px; border-radius: var(--r-pille); background: var(--chip); color: var(--accent-text); }
.crm .liste small + small { margin-top: 2px; }

/* Submission (15) */
.crm .schritte { display: flex; gap: 8px; list-style: none; padding: 0; margin: 0; flex-wrap: wrap; }
.crm .schritte li { padding: 8px 16px; border-radius: var(--r-pille); border: 1px solid var(--control-line); color: var(--muted); font-size: var(--fs-14); }
.crm .schritte li[aria-current] { border-color: var(--accent-line); color: var(--accent-text); background: var(--chip); font-weight: 600; }
.crm .station { border-top: 1px solid var(--line-soft); padding: 14px 0; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.crm .mailvorschau { width: 100%; min-height: 640px; border: 1px solid var(--line); border-radius: var(--r-kachel); margin-top: 16px; background: var(--inner); }

@media (max-width: 900px) {
  .crm .liste-karte { padding: 16px 16px 8px; }
  .crm .liste-karte > .scroll { margin: 0 -16px; padding: 0 16px; max-height: none; }
  .crm .spalten-wahl { margin-left: 0; }
  .crm { padding: 20px 16px 40px; }
  .crm .grid2, .crm .grid2e { grid-template-columns: 1fr; }
  .crm .eck { grid-template-columns: 1fr 1fr; }
  .crm .formular { grid-template-columns: 1fr; }
  .crm .erfassen-zeile { grid-template-columns: 1fr; }
  .crm .strahl { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .crm .foto { width: 96px; height: 96px; font-size: var(--fs-28); }
  .crm .profil-kopf .rechts { align-items: flex-start; }
  .crm .profil-kopf .rechts .knoepfe { justify-content: flex-start; }
  .crm .meta { flex-wrap: wrap; }
  .crm-sticky { left: 0; padding: 10px 16px; }
  .crm .netz { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* In Tabellen leere Felder ruhig als Strich, im Profil als „offen“ */
.crm .tabelle .qc .offen { font-size: 0; font-style: normal; }
.crm .tabelle .qc .offen::after { content: "–"; font-size: var(--fs-14); color: var(--muted); }
.crm .tabelle .qc { display: inline-block; min-width: 1.2em; }

/* Profilkopf: beschriftete Felder im Raster statt einer langen Zeile */
.crm .fakten { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px 24px; margin-top: 16px; }
.crm .fakt > span { display: block; font-size: var(--fs-12); letter-spacing: .08em; text-transform: uppercase; color: var(--label); margin-bottom: 4px; }
.crm .fakt > div { font-size: var(--fs-14); color: var(--text); min-height: 20px; }
.crm .profil-kopf .links { align-items: flex-start; flex: 1 1 520px; min-width: 0; }
.crm .profil-kopf .links > div:last-child { flex: 1; min-width: 0; }
.crm .zeile.hinweise:empty { display: none; }

/* CRM-Verwaltung */
.crm .tabelle td input:not([type="checkbox"]), .crm .tabelle td select { padding: 6px 10px; border-radius: var(--r-feld); font-size: var(--fs-14); width: auto; max-width: 180px; }
.crm .sichtprofil { display: grid; grid-template-columns: minmax(140px, 1fr) 110px repeat(3, minmax(0, 2fr)) auto; gap: 8px; align-items: center; }
.crm .sichtprofil input, .crm .sichtprofil select { padding: 8px 10px; font-size: var(--fs-14); }
.crm .mini-x { border: 0; background: none; color: var(--muted); font-size: var(--fs-16); cursor: pointer; padding: 0 4px; }
.crm .mini-x:hover { color: var(--warn); }
.crm label.check.inline { display: inline-flex; padding: 0; }
@media (max-width: 900px) { .crm .sichtprofil { grid-template-columns: 1fr; } }

.crm .eingang { flex-wrap: wrap; }
.crm .eingang .knoepfe { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; }
.crm .tp-eingabe { width: 110px; padding: 8px 12px; border-radius: var(--r-pille); font-size: var(--fs-13); }
@media (max-width: 900px) {
  .crm .profil-kopf .links { flex-direction: column; align-items: flex-start; gap: 16px; }
  .crm .profil-kopf h1 { font-size: var(--fs-28); }
  .crm .fakten { grid-template-columns: 1fr 1fr; gap: 12px 16px; }
  .crm .profil-kopf .rechts { width: 100%; }
}
@media (max-width: 480px) { .crm .fakten { grid-template-columns: 1fr; } }

/* ===== Stand 05.11.2026: moderne Tabellen, Profile, Startseite, Masken (Farben nur aus theme.css) ===== */

/* Tabellen: Kopf als ruhiges Band, feine Spaltenlinien, Zebra, klare Zeilen */
.crm .liste-karte > .scroll { margin: 0 -24px; padding: 0 24px 8px; }
.crm .tabelle { font-size: var(--fs-14); }
.crm .tabelle thead th { background: var(--inner); color: var(--text-2); font-size: var(--fs-12); letter-spacing: .07em; font-weight: 600;
  padding: 12px 16px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.crm .tabelle thead th:first-child { border-left: 1px solid var(--line); border-top-left-radius: 14px; border-bottom-left-radius: 14px; padding-left: 14px; }
.crm .tabelle thead th:last-child { border-right: 1px solid var(--line); border-top-right-radius: 14px; border-bottom-right-radius: 14px; }
.crm .tabelle td { padding: 14px 16px; border-bottom: 1px solid var(--line-soft); }
.crm .tabelle td:first-child { padding-left: 14px; }
.crm .tabelle th + th { box-shadow: inset 1px 0 0 var(--line-soft); }
.crm .tabelle td + td { box-shadow: inset 1px 0 0 var(--line-soft); }
.crm .tabelle tbody tr.zeile:nth-child(even of .zeile) td { background: rgba(var(--accent-rgb), .028); }
.crm .tabelle tbody tr.zeile:hover td { background: rgba(var(--accent-rgb), .075); }
.crm .tabelle tbody tr.zeile:hover td:first-child { box-shadow: inset 3px 0 0 var(--accent-line); }
.crm .tabelle td.aktion, .crm .tabelle th.aktion { text-align: right; padding-right: 10px; box-shadow: none; }
.crm .tabelle .id { display: inline-block; padding: 2px 8px; border-radius: var(--r-feld); background: var(--chip); color: var(--text-2);
  font-size: var(--fs-12); font-weight: 500; letter-spacing: .02em; }
.crm .tabelle .haupt, .crm .tabelle .name-link { font-weight: 600; }
.crm .tabelle .chip { white-space: nowrap; }
.crm tr.gruppe td { box-shadow: none !important; }

/* Kleiner Stift: schnell bearbeiten */
.crm .stift, .crm-seite .stift { width: 32px; height: 32px; border-radius: var(--r-pille); border: 1px solid transparent; background: none; color: var(--muted);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; }
.crm .stift svg, .crm .stift-pill svg, .crm .kontakt-knoepfe svg, .crm .fenster-fuss svg { width: 16px; height: 16px; }
.crm .stift:hover, .crm .stift:focus-visible { border-color: var(--accent-line); color: var(--accent-text); }
.crm .tabelle tr.zeile .stift { opacity: .55; }
.crm .tabelle tr.zeile:hover .stift, .crm .tabelle tr.zeile .stift:focus-visible { opacity: 1; }
.crm .pill.klein { min-height: 32px; padding: 0 12px; font-size: var(--fs-13); }

/* Startseite: Begrüßung mit Foto, drei Fenster */
.crm .gruss { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.crm .gruss-foto { width: 92px; height: 92px; border-radius: var(--r-pille); overflow: hidden; flex-shrink: 0; background: var(--chip); border: 2px solid var(--accent-line);
  box-shadow: 0 0 0 6px rgba(var(--accent-rgb), .12); display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-28); font-weight: 600; }
.crm .gruss-foto img { width: 100%; height: 100%; object-fit: cover; }
.crm .gruss-text h1 { font-size: var(--fs-40); }
.crm .gruss-zahlen { margin-left: auto; display: flex; gap: 12px; flex-wrap: wrap; }
.crm .gruss-zahlen a { min-width: 116px; padding: 14px 18px; border-radius: var(--r-karte); border: 1px solid var(--line); background: var(--card);
  color: var(--text); text-decoration: none; display: flex; flex-direction: column; gap: 2px; }
.crm .gruss-zahlen a:hover { border-color: var(--accent-line); }
.crm .gruss-zahlen b { font-size: var(--fs-28); font-weight: 600; line-height: 1.1; }
.crm .gruss-zahlen span { font-size: var(--fs-12); color: var(--muted); }
.crm .grid3 { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
.crm .fenster { display: flex; flex-direction: column; }
.crm .fenster .titel .mehr { font-size: var(--fs-13); color: var(--accent-text); text-decoration: none; }
.crm .fenster-fuss { margin-top: auto; padding-top: 16px; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  font-size: var(--fs-13); color: var(--muted); }
.crm .fenster-fuss a { display: inline-flex; align-items: center; gap: 4px; color: var(--accent-text); text-decoration: none; font-weight: 500; }
.crm .mini-kacheln { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.crm .mini-kachel { background: var(--inner); border-radius: var(--r-kachel); padding: 14px 16px; color: var(--text); text-decoration: none;
  display: flex; flex-direction: column; gap: 2px; border: 1px solid transparent; }
.crm .mini-kachel:hover { border-color: var(--accent-line); }
.crm .mini-kachel span { font-size: var(--fs-12); color: var(--muted); }
.crm .mini-kachel b { font-size: var(--fs-28); font-weight: 600; line-height: 1.15; font-variant-numeric: tabular-nums; }
.crm .mini-kachel small { font-size: var(--fs-12); color: var(--muted); }
.crm .mini-kachel .balken { display: block; margin-top: 6px; height: 6px; }
.crm .mini-kacheln.zwei { margin-bottom: 8px; }
.crm .mini-kacheln.zwei b { font-size: var(--fs-20); }
.crm .liste.kompakt > a, .crm .liste.kompakt > div { padding: 10px 2px; }
.crm .faellig.ueber { color: var(--warn); }

/* Profile: Kopf, Eckdaten-Kacheln, Prozesskette */
.crm .profil-kopf .kopf-text { display: flex; flex-direction: column; gap: 6px; }
.crm .profil-kopf .kopf-text h1 { margin: 2px 0 0; }
.crm .unterzeile { font-size: var(--fs-16); color: var(--text-2); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.crm .unterzeile.klein { font-size: var(--fs-14); }
.crm .punkt::before { content: "·"; color: var(--muted); margin: 0 2px; }
.crm .kontakt-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.crm .kontakt-knoepfe .pill { min-height: 36px; padding: 0 14px; font-size: var(--fs-13); }
/* Telefonnummern: Art klein, Nummer kräftig; ein Klick öffnet die sipgate App (24.39) */
.crm .nummer, .crm-seite .nummer { white-space: nowrap; }
.crm .nummer svg, .crm-seite .nummer svg { width: 16px; height: 16px; flex: none; }
.crm .nummer small, .crm-seite .nummer small { font-size: var(--fs-12); color: var(--muted); font-weight: 500; }
.crm .nummer strong, .crm-seite .nummer strong { font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.crm .lead-chip { font-weight: 600; }
.crm .lead-chip.lead-A { color: var(--accent-text); border: 1px solid var(--accent-line); background: transparent; }
.crm .lead-chip.lead-BL { color: var(--warn); border: 1px solid var(--warn); background: transparent; }
.crm .kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.crm .kachel { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-karte); padding: 18px 20px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.crm .kachel > span { font-size: var(--fs-12); letter-spacing: .07em; text-transform: uppercase; color: var(--label); font-weight: 600; }
.crm .kachel b { font-size: var(--fs-20); font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.crm .kachel.gross b { font-size: var(--fs-28); }
.crm .kachel small { font-size: var(--fs-12); color: var(--muted); }
.crm .kachel .balken { display: block; margin-top: 6px; }
.crm .kachel .offen { color: var(--muted); font-weight: 500; font-style: normal; }
.crm .prozess-karte { padding-bottom: 24px; }
.crm .vorgestellt { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin-top: 18px; }
.crm .vk { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--r-kachel); border: 1px solid var(--line);
  color: var(--text); text-decoration: none; }
.crm .vk:hover { border-color: var(--accent-line); }
.crm .vk b { display: block; font-weight: 600; font-size: var(--fs-14); }
.crm .vk small { display: block; color: var(--muted); font-size: var(--fs-12); }
.crm .vk.aus { opacity: .6; }
.crm .spalte { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.crm .erfassen-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.crm .erfassen-raster .voll { grid-column: 1 / -1; }
.crm #erfassen .neu-fuss { justify-content: space-between; align-items: center; margin-top: 14px; }
.crm .note-wahl { font-weight: 500; }
.crm .dl-gruppe { display: flex; flex-direction: column; }
.crm .dl-gruppe + .dl-gruppe { margin-top: 14px; }
.crm .dl-gruppe h3 { margin: 0 0 4px; font-size: var(--fs-12); letter-spacing: .08em; text-transform: uppercase; color: var(--label); font-weight: 600; }
.crm .dl { display: grid; grid-template-columns: 138px minmax(0, 1fr); gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); font-size: var(--fs-14); }
.crm .dl:last-child { border-bottom: 0; }
.crm .dl > span { color: var(--muted); }
.crm .dl > div { color: var(--text); overflow-wrap: anywhere; }
.crm .card > .titel .stift { margin-left: auto; }
.crm .netz .zelle span { display: block; font-size: var(--fs-12); color: var(--muted); }

/* Anlegen und Schnell bearbeiten */
.shell-dialog.breit { width: min(960px, calc(100vw - 32px)); }
.shell-dialog { max-height: calc(100vh - 48px); overflow-y: auto; }
.crm .form-abschnitt { border: 0; margin: 18px 0 0; padding: 0; min-width: 0; }
.crm .form-abschnitt legend { float: left; width: 100%; box-sizing: border-box; padding: 10px 16px; margin-bottom: 14px; border-radius: var(--r-kachel);
  background: var(--inner); font-weight: 600; font-size: var(--fs-14); color: var(--text); }
.crm .form-abschnitt legend + * { clear: both; }
.crm .pflicht { color: var(--warn); font-size: var(--fs-16); line-height: 0; margin-left: 2px; }
.crm .mit-einheit { position: relative; display: block; }
.crm .mit-einheit input { padding-right: 52px; }
.crm .mit-einheit i { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: var(--fs-13); color: var(--muted); }
.crm .seg { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.crm .seg label { flex-direction: row; cursor: pointer; }
.crm .seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.crm .seg span { padding: 8px 16px; border-radius: var(--r-pille); border: 1px solid var(--control-line); color: var(--text-2); font-size: var(--fs-14); }
.crm .seg input:checked + span { border-color: var(--accent-line); color: var(--accent-text); background: var(--chip); font-weight: 600; }
.crm .seg input:focus-visible + span { outline: 2px solid var(--accent-line); outline-offset: 1px; }
.crm .hinweis-klein { margin: 0; font-size: var(--fs-12); }
.crm label.ungueltig input, .crm label.ungueltig select { border-color: var(--warn); }
.crm input:disabled { opacity: .7; }

@media (max-width: 1440px) {
  .crm .grid3 { grid-template-columns: 1fr 1fr; }
  .crm .grid3 > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .crm .kacheln { grid-template-columns: 1fr 1fr; }
  .crm .grid3 { grid-template-columns: 1fr; }
  .crm .erfassen-raster { grid-template-columns: 1fr; }
  .crm .gruss-zahlen { margin-left: 0; width: 100%; }
  .crm .gruss-zahlen a { flex: 1; min-width: 0; }
  .crm .gruss-foto { width: 68px; height: 68px; font-size: var(--fs-20); }
  .crm .gruss-text h1 { font-size: var(--fs-28); }
  .crm .dl { grid-template-columns: 120px minmax(0, 1fr); }
}
.crm .mini-kacheln.zwei b { font-size: var(--fs-20); white-space: nowrap; }
.crm .fenster-fuss a { white-space: nowrap; }
.crm .tabelle .breit { min-width: 250px; }
.crm .tabelle .wer-text small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; }
.crm .tabelle .wer-text .name-link { white-space: nowrap; }
/* Profilkopf: Aktionen als eigene Leiste unten im Kopf */
.crm .profil-kopf > .rechts { flex: 1 1 100%; flex-direction: row; flex-wrap: wrap-reverse; justify-content: space-between; align-items: center;
  gap: 12px; border-top: 1px solid var(--line-soft); padding-top: 18px; }
.crm .profil-kopf > .rechts .knoepfe { justify-content: flex-end; }
.crm .profil-kopf > .links { flex: 1 1 100%; }
/* Schmale Leiste beim Scrollen: gleiche Knöpfe wie auf der Seite */
.crm-sticky .pill, .crm-sticky .btn { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 16px; border-radius: var(--r-pille);
  border: 1px solid var(--control-line); background: transparent; color: var(--text); font: 500 var(--fs-14) var(--sans); text-decoration: none; cursor: pointer; }
.crm-sticky .btn.akzent { background: var(--accent-fill); color: var(--on-accent); border-color: var(--accent-edge); font-weight: 600; }
.crm-sticky .av { width: 36px; height: 36px; border-radius: var(--r-pille); background: var(--chip); display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-13); font-weight: 600; }
/* Geschlossene Fenster nie anzeigen (.crm setzt display: flex und würde die Browserregel überschreiben) */
dialog.crm:not([open]) { display: none !important; }
dialog.crm { margin: auto; }
.crm .lt { display: inline-flex; align-items: baseline; gap: 2px; }
/* Ältere Eckfelder (Unternehmen, Personal) im Stil der Kacheln */
.crm .eck { gap: 14px; }
.crm .eck .feld { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-karte); padding: 18px 20px; }
.crm .eck .feld > span { font-size: var(--fs-12); letter-spacing: .07em; text-transform: uppercase; color: var(--label); font-weight: 600; }
.crm .eck .feld b { font-size: var(--fs-20); }
.crm .kachel b { overflow-wrap: break-word; hyphens: none; line-height: 1.25; }
/* Lange Werte kleiner und höchstens zwei Zeilen, leere Werte ruhig (UX-Paket 1) */
.crm .kachel.lang b { font-size: var(--fs-16); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.crm .kachel.leer b, .crm .kachel b .offen { font-size: var(--fs-14); font-weight: 500; }
.crm .kachel.leer { background: var(--inner); box-shadow: none; }
@media (max-width: 900px) {
  .crm .profil-kopf > .rechts { flex-direction: column-reverse; align-items: stretch; }
  .crm .profil-kopf > .rechts .knoepfe { justify-content: flex-start; }
}

/* Hotlists wie in Bullhorn: Raster Tätigkeit × PLZ-Region */
.crm .hl-raster .hl-name { font-weight: 600; white-space: nowrap; }
.crm .hl-raster td.zahl, .crm .hl-raster th.zahl { width: 52px; text-align: center; }
.crm .hl-zelle { display: inline-block; min-width: 34px; padding: 3px 0; border-radius: var(--r-feld); color: var(--accent-text); font-weight: 600; text-decoration: none; }
.crm .hl-zelle:hover { background: var(--chip); }
.crm .hl-zelle.leer0 { color: var(--muted); font-weight: 400; }

/* Prozesskette (05.11.2026): nur die Stufen, ohne Datum, einheitlich gesetzt wie im übrigen Portal */
.crm .kette { list-style: none; margin: 6px 0 0; padding: 0 0 2px; display: flex; overflow-x: auto; scrollbar-width: thin; }
.crm .kette li { flex: 1 0 auto; min-width: 0; height: 52px; white-space: nowrap; margin-left: -6px; padding: 0 14px 0 20px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; text-align: center;
  background: var(--inner); color: var(--muted); font: 500 var(--fs-13)/1.2 var(--sans);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%, 10px 50%); }
.crm .kette li:first-child { margin-left: 0; padding-left: 14px; border-radius: var(--r-kachel) 0 0 var(--r-kachel);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%); }
.crm .kette li span { hyphens: none; overflow-wrap: normal; }
.crm .kette li.an { background: var(--chip); color: var(--accent-text); font-weight: 600; }
.crm .kette li.jetzt { background: var(--inv-bg); color: var(--inv-text); font-weight: 600; }
.crm .kette.grau li.an, .crm .kette.grau li.jetzt { background: var(--track); color: var(--muted); }
.crm .vk .chip { white-space: nowrap; flex-shrink: 0; }
/* Kunde mit Absage: Marke bleibt in der Karte und rutscht bei wenig Platz unter den Namen (Connor, 09.11.2026) */
.crm .vk { flex-wrap: wrap; min-width: 0; row-gap: 8px; }
.crm .vk .mitlogo { flex: 1 1 160px; min-width: 0; }
.crm .vk .mitlogo b, .crm .vk .mitlogo small { overflow-wrap: anywhere; }
.crm .vk .chip { margin-left: auto; max-width: 100%; }
@media (max-width: 900px) { .crm .kette { overflow-x: auto; } .crm .kette li { flex: 0 0 auto; min-width: 104px; } }

/* Aus dem Q-Call: abweichende Angaben mit Übernehmen und Verwerfen */
.crm .vorschlaege { border: 1px solid var(--accent-line); }
.crm .vorschlaege .liste > div { flex-direction: column; align-items: stretch; gap: 8px; }
.crm .vorschlaege .knoepfe { display: flex; gap: 6px; margin-left: 0; }

/* --- Bewegung und Rückmeldung (UX-Paket 3, 06.11.2026) ------------------------------------------------
   Kurze Übergänge für Hover und Fokus, Karten mit Link heben sich an, Seiten blenden aus einem sichtbaren Zustand ein,
   Ladeplatzhalter schimmern. Wer im System „Bewegung reduzieren“ gewählt hat, bekommt alles ohne Bewegung. */
.crm .pill, .crm .btn, .crm .reiter a, .crm .reiter button, .crm .chips button, .crm .seg span, .crm .schnell a,
.crm input, .crm select, .crm textarea, .crm .qc, .crm .tabelle td, .crm .kachel, .crm .mini-kachel, .crm .vk, .crm .liste > a {
  transition: background-color var(--dauer) ease, border-color var(--dauer) ease, color var(--dauer) ease,
    box-shadow var(--dauer) ease, transform var(--dauer) ease; }
.crm .pill:hover, .crm .reiter a:hover, .crm .reiter button:hover { border-color: var(--accent-line); }
.crm .btn:active, .crm .pill:active { transform: translateY(1px) scale(0.985); }
.crm .btn.akzent:hover { box-shadow: 0 6px 18px rgba(var(--accent-rgb), 0.28); }
.crm .mini-kachel:hover, .crm .vk:hover, .crm a.kachel:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.crm .kachel { box-shadow: var(--shadow-karte); }
.crm > * { animation: crm-ein 220ms ease-out both; }
.crm > *:nth-child(2) { animation-delay: 30ms; } .crm > *:nth-child(3) { animation-delay: 60ms; } .crm > *:nth-child(4) { animation-delay: 90ms; }
@keyframes crm-ein { from { opacity: 0.4; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.crm .kette li.an { animation: kette-fuellen 420ms ease-out both; }
@keyframes kette-fuellen { from { filter: saturate(0.2); opacity: 0.6; } to { filter: none; opacity: 1; } }
.crm-toast { animation: toast-ein 200ms ease-out both; }
@keyframes toast-ein { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }
/* Ladeplatzhalter */
.crm .platz { display: flex; flex-direction: column; gap: 14px; box-shadow: none; }
.crm .platz i, .crm .platz-kopf i { display: block; height: 14px; border-radius: var(--r-pille); background: var(--inner);
  background-image: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.08), transparent); background-size: 200% 100%;
  animation: schimmer 1.2s linear infinite; }
.crm .platz i:nth-child(1) { width: 40%; height: 18px; } .crm .platz i:nth-child(2) { width: 75%; } .crm .platz i:nth-child(3) { width: 55%; }
.crm .platz-kopf { display: flex; flex-direction: column; gap: 10px; }
.crm .platz-kopf i:nth-child(1) { width: 260px; height: 34px; } .crm .platz-kopf i:nth-child(2) { width: 180px; }
@keyframes schimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
/* Ein gemeinsamer Fokusrahmen für alle Bedienelemente */
.crm :is(a, button, input, select, textarea, [tabindex]):focus-visible, .shell :is(a, button, input):focus-visible {
  outline: 2px solid var(--accent-line); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .crm *, .crm-toast, .crm > * { animation: none !important; transition: none !important; }
}

/* --- Kompakter Profilkopf wie das Highlights Panel (UX-Paket 2, 06.11.2026) ----------------------------
   Kleinerer Kreis ohne Doppelring, auf breiten Bildschirmen stehen Aktionen und Schutzfrist rechts neben dem Namen.
   Ein leichter Verlauf gibt dem Kopf Tiefe. */
.crm .foto { width: 88px; height: 88px; font-size: var(--fs-28); border-width: 1px; box-shadow: none; flex: none; }
.crm .profil-kopf { padding: 24px 28px; gap: 20px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.07), transparent 46%), var(--card); }
.crm .profil-kopf .links { gap: 22px; }
.crm .profil-kopf h1 { font-size: var(--fs-28); }
@media (min-width: 1100px) {
  .crm .profil-kopf { flex-wrap: nowrap; align-items: flex-start; }
  .crm .profil-kopf > .links { flex: 1 1 0; }
  .crm .profil-kopf > .rechts { flex: 0 0 auto; flex-direction: column; align-items: flex-end; justify-content: flex-start;
    border-top: 0; padding-top: 0; max-width: 46%; }
  .crm .profil-kopf > .rechts .meta { flex-wrap: wrap; justify-content: flex-end; }
}
/* Q-Call-Vorschläge: Markierung links statt grüner Rahmen (eine Akzentfläche je Seite) */
.crm .vorschlaege { border: 1px solid var(--line); box-shadow: var(--shadow-karte), inset 4px 0 0 var(--accent-line); }
/* Listen dichter wie in Bullhorn (UX-Paket 2): etwa 18 statt 11 Zeilen je Bildschirm */
.crm .tabelle td { padding: 8px 14px; }
.crm .tabelle th { padding-top: 10px; padding-bottom: 10px; }
.crm .tabelle .av, .crm .tabelle .logo { width: 28px; height: 28px; font-size: var(--fs-12); }
/* Handy: Listen als Karten statt breiter Tabelle (UX-Paket 3). Gezeigt werden Name, Arbeitgeber oder Kunde, Ort,
   Stufe und Telefon; alle anderen Spalten bleiben am Rechner. */
@media (max-width: 700px) {
  .crm .liste-karte .tabelle { min-width: 0 !important; width: 100%; }
  .crm .liste-karte .tabelle thead { display: none; }
  .crm .liste-karte .tabelle tbody { display: block; }
  .crm .liste-karte .tabelle tr.zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 12px 2px;
    border-bottom: 1px solid var(--line-soft); }
  .crm .liste-karte .tabelle tr.zeile td { display: none; padding: 0; border: 0; box-shadow: none !important; background: transparent !important; }
  .crm .liste-karte .tabelle tr.zeile td:is([data-k="kandidat"], [data-k="name"], [data-k="job"]) { display: block; flex: 1 1 100%; min-width: 0; }
  .crm .liste-karte .tabelle tr.zeile td:is([data-k="arbeitgeber"], [data-k="kunde"], [data-k="unternehmen"], [data-k="stadt"], [data-k="stufe"], [data-k="status"], [data-k="mobil"]) {
    display: inline-flex; flex-wrap: wrap; gap: 6px; max-width: 100%; font-size: var(--fs-13); color: var(--muted); white-space: normal; }
  .crm .liste-karte > .scroll { overflow-x: visible; }
}
/* Handy: Profilkopf schlank, Knöpfe nebeneinander, Eckdaten zweispaltig */
@media (max-width: 700px) {
  .crm .foto { width: 56px; height: 56px; font-size: var(--fs-20); }
  .crm .profil-kopf { padding: 18px; }
  .crm .profil-kopf > .rechts .knoepfe { flex-direction: row; flex-wrap: wrap; }
  .crm .profil-kopf > .rechts .knoepfe > * { flex: 1 1 auto; justify-content: center; }
  .crm .kacheln { grid-template-columns: 1fr 1fr; }
}
.crm .kette li.jetzt.erfolg { animation: erfolg 1.2s ease-out 1; }
@keyframes erfolg { 0% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.6); } 70% { box-shadow: 0 0 0 14px rgba(var(--accent-rgb), 0); } 100% { box-shadow: none; } }

/* --- Grünakzente im ganzen CRM (Connor, 06.11.2026) ---------------------------------------------------
   Lime als Markenfarbe für Orientierung: aktuelle Stufe, gewählte Filter, Kennzahlen und Fortschritt.
   Lime-Flächen tragen immer --on-accent als Schrift, grüne Schrift auf Hell immer --accent-text. */
/* Bis zur aktuellen Stufe alles hellgrün, die aktuelle zusätzlich mit Kontur und fett (Connor, 09.11.2026) */
.crm .kette li.an { background: var(--accent-fill); color: var(--on-accent); }
.crm .kette li.an.jetzt, .crm .kette li.jetzt { background: var(--accent-fill); color: var(--on-accent); font-weight: 700;
  box-shadow: inset 0 -3px 0 var(--accent-edge); }
.crm .reiter [aria-pressed="true"], .crm .chips button[aria-pressed="true"], .crm .actions button[aria-pressed="true"],
.crm .schritte li[aria-current] {
  background: var(--accent-fill); color: var(--on-accent); border-color: var(--accent-edge); }
.crm .schnell a[aria-current] { background: var(--accent-fill); color: var(--on-accent); }
.crm .chip.lime { background: rgba(var(--accent-rgb), 0.14); }
.crm .grad { background: var(--accent-fill); color: var(--on-accent); }
.crm .balken { background: rgba(var(--accent-rgb), 0.14); }
.crm .balken i { background: var(--accent-fill); box-shadow: inset 0 0 0 1px var(--accent-edge); }
/* Kennzahlen: grüne Oberkante und grüne Zahlen in den Kacheln */
.crm .kachel:not(.leer), .crm .gruss-zahlen a { box-shadow: var(--shadow-karte), inset 0 3px 0 var(--accent-line); }
.crm .kachel.gross b, .crm .gruss-zahlen b { color: var(--accent-text); }
/* Seitenköpfe mit leichtem grünem Licht, Profilkopf etwas kräftiger */
.crm .profil-kopf { background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.14), transparent 50%), var(--card); }
.crm .gruss { background: radial-gradient(ellipse at 0% 0%, rgba(var(--accent-rgb), 0.12), transparent 55%); border-radius: var(--r-karte); }
/* Überschriften der Karten mit kleinem grünem Strich davor */
.crm .card > .titel h2::before { content: ""; display: inline-block; width: 4px; height: 0.9em; margin-right: 10px; vertical-align: -0.08em;
  border-radius: var(--r-pille); background: var(--accent-line); }
/* Tabellen: Kopfzeile und gewählte Zeilen leicht grün */
.crm .tabelle th { background: linear-gradient(var(--card), var(--card)), var(--card); box-shadow: inset 0 -2px 0 rgba(var(--accent-rgb), 0.35); }
.crm .tabelle tr.zeile:has(input.wahl:checked) td { background: rgba(var(--accent-rgb), 0.12); }

/* Heute, Forecast-Fenster: die drei weitesten Prozesse mit kleinem Prozessstrahl (Connor, 09.11.2026) */
.crm .weiteste { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.crm .prozess-zeile { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: var(--r-kachel); background: var(--inner);
  color: var(--text); text-decoration: none; border: 1px solid transparent; }
.crm .prozess-zeile:hover { border-color: var(--accent-line); background: var(--card); box-shadow: var(--shadow-hover); }
.crm .prozess-zeile .kopf { display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: flex-start; gap: 12px; }
.crm .prozess-zeile .wer { display: flex; flex-direction: column; min-width: 0; }
.crm .prozess-zeile .wer b { font-size: var(--fs-14); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm .prozess-zeile small { font-size: var(--fs-12); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm .prozess-zeile .wert { display: flex; flex-direction: column; align-items: flex-end; font-weight: 600; font-size: var(--fs-14);
  font-variant-numeric: tabular-nums; color: var(--accent-text); white-space: nowrap; }
.crm .prozess-zeile .fuss { display: flex; align-items: center; gap: 10px; }
.crm .prozess-zeile .stufe { font-size: var(--fs-12); font-weight: 600; color: var(--accent-text); white-space: nowrap; }
.crm .mini-strahl { flex: 1; display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; }
.crm .mini-strahl i { height: 6px; border-radius: var(--r-pille); background: var(--track); }
.crm .mini-strahl i.an { background: rgba(var(--accent-rgb), 0.45); }
.crm .mini-strahl i.jetzt { background: var(--accent-fill); box-shadow: inset 0 0 0 1px var(--accent-edge); }
/* Heute, Dashboard-Fenster: weitere Zahlen der Woche in einer Zeile */
.crm .woche-zahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.crm .woche-zahlen a { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: var(--r-kachel); background: var(--inner);
  color: var(--text); text-decoration: none; min-width: 0; }
.crm .woche-zahlen a:hover { background: var(--chip); }
.crm .woche-zahlen span { font-size: var(--fs-12); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm .woche-zahlen b { font-size: var(--fs-16); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--accent-text); white-space: nowrap; }

/* Kurzfassung aus den Aktivitäten (Connor, 09.11.2026) */
.crm .kurzfassung { display: grid; grid-template-columns: max-content 1fr; gap: 8px 14px; margin: 4px 0 0; font-size: var(--fs-13); }
.crm .kurzfassung dt { color: var(--muted); font-size: var(--fs-12); padding-top: 1px; white-space: nowrap; }
.crm .kurzfassung dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.crm .kurzfassung dt:first-child, .crm .kurzfassung dt:first-child + dd { font-weight: 600; }
.crm .kf-ki { margin: 4px 0 0; font-size: var(--fs-14); line-height: 1.6; color: var(--text); }
.crm .kf-laeuft { margin: 10px 0 0; font-size: var(--fs-12); animation: kf-puls 1.4s ease-in-out infinite; }
@keyframes kf-puls { 50% { opacity: .45; } }
/* Dokumente am Kandidaten (24.46) */
.crm .dok-art { display: flex; align-items: center; gap: 10px; margin: 2px 0 8px; font-size: var(--fs-12); }
.crm .dok-art select { padding: 4px 10px; font-size: var(--fs-12); width: auto; }
.crm .dok-link { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; color: var(--text); text-decoration: none; }
.crm .dok-link:hover span span { color: var(--accent-text); }
.crm .dok-link > span:last-child { min-width: 0; overflow-wrap: anywhere; }

/* Tabellen frischer (Connor, 09.11.2026): weiß, ohne Spaltenstriche und Zebra, ruhiger Kopf mit grüner Linie,
   TP-ID als leise Zahl, Zeile beim Überfahren hellgrün mit Rundung, leere Zellen fast unsichtbar */
.crm .tabelle { border-spacing: 0 2px; }
.crm .tabelle thead th, .crm .tabelle th { background: var(--card) !important; border: 0 !important; border-radius: 0 !important;
  box-shadow: inset 0 -2px 0 var(--accent-line) !important; color: var(--label); font-size: var(--fs-12); font-weight: 600;
  letter-spacing: .06em; padding-top: 12px; padding-bottom: 12px; }
.crm .tabelle td { box-shadow: none !important; border-bottom: 1px solid var(--line-soft); padding: 12px 16px; background: transparent; }
.crm .tabelle td + td, .crm .tabelle th + th { box-shadow: none !important; }
.crm .tabelle thead th + th { box-shadow: inset 0 -2px 0 var(--accent-line) !important; }
.crm .tabelle tbody tr.zeile:nth-child(even of .zeile) td { background: transparent; }
.crm .tabelle tbody tr.zeile td { transition: background-color var(--dauer) ease; }
.crm .tabelle tbody tr.zeile:hover td { background: rgba(var(--accent-rgb), .10); }
.crm .tabelle tbody tr.zeile:hover td:first-child { border-radius: var(--r-feld) 0 0 var(--r-feld); box-shadow: inset 3px 0 0 var(--accent-line) !important; }
.crm .tabelle tbody tr.zeile:hover td:last-child { border-radius: 0 var(--r-feld) var(--r-feld) 0; }
.crm .tabelle .id { background: transparent; padding: 0; color: var(--muted); font-weight: 500; }
.crm .tabelle .haupt, .crm .tabelle .name-link { color: var(--text); font-weight: 600; font-size: var(--fs-14); }
.crm .tabelle .name-link:hover { color: var(--accent-text); }
.crm .tabelle td .chip { background: rgba(var(--accent-rgb), .14); color: var(--accent-text); border: 0; font-weight: 500; }
.crm .tabelle .qc .offen::after { color: var(--line-strong); opacity: .5; }
.crm .tabelle .mitlogo { gap: 10px; }
.crm .tabelle .logo { border-radius: var(--r-feld); }

/* Zahlen neben der Begrüßung: breiter, freundlicher, mit Symbol, ohne Strich oben (Connor, 09.11.2026) */
.crm .gruss-zahlen { gap: 14px; }
.crm .gruss-zahlen a { display: flex; flex-direction: row; align-items: center; gap: 14px; min-width: 230px; padding: 16px 22px 16px 16px;
  border-radius: var(--r-karte); border: 1px solid var(--accent-soft-line); text-decoration: none; color: var(--text);
  background: linear-gradient(135deg, rgba(var(--accent-rgb), .16), var(--card) 70%);
  box-shadow: var(--shadow-karte) !important; transition: transform var(--dauer) ease, box-shadow var(--dauer) ease, border-color var(--dauer) ease; }
.crm .gruss-zahlen a:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover) !important; border-color: var(--accent-line); }
.crm .gruss-zahlen i { width: 44px; height: 44px; flex-shrink: 0; border-radius: var(--r-pille); display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-fill); color: var(--on-accent); }
.crm .gruss-zahlen i svg { width: 20px; height: 20px; }
.crm .gruss-zahlen a > span { display: flex; flex-direction: column; }
.crm .gruss-zahlen b { font-size: var(--fs-28); line-height: 1.05; color: var(--text); }
.crm .gruss-zahlen a > span > span { font-size: var(--fs-13); color: var(--text-2); }
@media (prefers-reduced-motion: reduce) { .crm .gruss-zahlen a:hover { transform: none; } }
/* Lebenslauf und Unterlagen im Formular „Kandidat hinzufügen“ (Connor, 09.11.2026) */
.crm .ablage { display: flex !important; flex-direction: row !important; align-items: center; gap: 14px; padding: 18px; cursor: pointer;
  border: 1.5px dashed var(--accent-line); border-radius: var(--r-kachel); background: rgba(var(--accent-rgb), .06);
  transition: background-color var(--dauer) ease, border-color var(--dauer) ease; }
.crm .ablage:hover, .crm .ablage.ziehen { background: rgba(var(--accent-rgb), .14); border-color: var(--accent-text); }
.crm .ablage.gewaehlt { border-style: solid; background: rgba(var(--accent-rgb), .12); }
.crm .ablage-symbol { width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--r-pille); background: var(--accent-fill); color: var(--on-accent);
  display: inline-flex; align-items: center; justify-content: center; }
.crm .ablage-symbol svg { width: 18px; height: 18px; }
.crm .ablage-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.crm .ablage-text b { font-size: var(--fs-14); color: var(--text); font-weight: 600; }
.crm .ablage-text small { font-size: var(--fs-12); color: var(--text-2); overflow-wrap: anywhere; }
.crm .ablage:focus-within { outline: 2px solid var(--accent-line); outline-offset: 2px; }

/* CC bei Note Actions (24.49) */
.crm .cc-box .flabel { display: block; font-size: var(--fs-12); color: var(--label); margin-bottom: 4px; }
.crm .cc-feld { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 8px; border: 1px solid var(--control-line);
  border-radius: var(--r-feld); background: var(--card); }
.crm .cc-feld .cc-suche { border: 0; background: transparent; padding: 4px; min-width: 180px; flex: 1; box-shadow: none; }
.crm .cc-feld .cc-suche:focus { outline: none; }
.crm .cc-chips { display: contents; }
.crm .cc-chip { display: inline-flex; align-items: center; gap: 4px; }
.crm .cc-chip button { border: 0; background: transparent; color: inherit; cursor: pointer; font-size: var(--fs-14); line-height: 1; padding: 0 2px; }

/* Prozesskette klickbar, Erfassen-Karte leuchtet kurz auf (Team-Anmerkung 10.11.2026) */
.crm .kette li[data-stufe] { cursor: pointer; transition: filter var(--dauer) ease, transform var(--dauer) ease; }
.crm .kette li[data-stufe]:hover { filter: brightness(0.96); }
.crm .kette li[data-stufe]:focus-visible { outline: 2px solid var(--accent-line); outline-offset: -2px; }
.crm section.hervor { animation: hervor 1.2s ease-out 1; }
@keyframes hervor { 0% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), .55), var(--shadow-karte); } 100% { box-shadow: 0 0 0 14px rgba(var(--accent-rgb), 0), var(--shadow-karte); } }
.crm textarea { overflow-y: hidden; resize: vertical; }
@media (prefers-reduced-motion: reduce) { .crm section.hervor { animation: none; } }
.crm .stellentext { white-space: pre-wrap; max-height: 420px; overflow-y: auto; font-size: var(--fs-14); line-height: 1.6; }

/* Assistent je Kandidat und Kontakt (24.56) und Diktat (24.57) */
.crm-seite.assistent { width: min(560px, 100vw); display: flex; flex-direction: column; gap: 14px; padding-bottom: 16px; }
.crm .assistent-titel { display: flex; align-items: center; gap: 8px; font-size: var(--fs-20); margin: 0; }
.crm .assistent-titel svg, .crm .assistent-knopf svg { width: 18px; height: 18px; color: var(--accent-text); }
.crm .btn.assistent-knopf svg { color: inherit; }
.crm .assistent-knopf { display: inline-flex; align-items: center; gap: 6px; }
.crm .chat { flex: 1 1 auto; min-height: 200px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding: 4px 2px; }
.crm .chat .leer { margin: auto 0; }
.crm .blase { max-width: 92%; padding: 12px 14px; border-radius: var(--r-kachel); font-size: var(--fs-14); line-height: 1.5; }
.crm .blase-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.crm .blase.ich { align-self: flex-end; background: var(--chip); color: var(--text); }
.crm .blase.ki { align-self: flex-start; background: var(--inner); color: var(--text); border: 1px solid var(--line); }
.crm .blase.schreibt .blase-text { color: var(--text-2); }
.crm .blase.fehler { border-color: var(--warn); }
.crm .blase.fehler .blase-text { color: var(--warn); }
.crm .chat-aktionen { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.crm .chat-aktionen[hidden] { display: none; }
.crm .chat-aktionen .mini, .crm .notiz-werkzeug .mini { border: 0; background: none; padding: 0; margin: 0; cursor: pointer; font: inherit;
  font-size: var(--fs-13); color: var(--accent-text); }
.crm .chat-aktionen .mini:hover, .crm .notiz-werkzeug .mini:hover { text-decoration: underline; }
.crm .chat-vorschlaege { display: flex; flex-wrap: wrap; gap: 8px; }
.crm .chat-vorschlaege[hidden] { display: none; }
.crm .chat-eingabe { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--line); padding-top: 12px; }
.crm .chat-eingabe textarea { width: 100%; min-height: 64px; max-height: 220px; resize: vertical; }
.crm .chat-fuss { display: flex; align-items: center; gap: 10px; }
.crm .chat-fuss .muted { flex: 1; font-size: var(--fs-12); }
.crm .hinweis-box { margin: 0; padding: 10px 12px; border-radius: var(--r-feld); background: var(--inner); color: var(--text-2); font-size: var(--fs-13); }
.crm .notiz-werkzeug { display: flex; align-items: center; gap: 14px; margin-top: -4px; }
.crm .mikro { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border-radius: var(--r-pille);
  border: 1px solid var(--line); background: none; color: var(--text-2); font: inherit; font-size: var(--fs-13); cursor: pointer;
  transition: border-color var(--dauer), color var(--dauer); }
.crm .mikro svg { width: 16px; height: 16px; }
.crm .mikro span:empty { display: none; }
.crm .mikro:hover, .crm .mikro:focus-visible { border-color: var(--accent-line); color: var(--accent-text); }
.crm .mikro[data-zustand="an"] { border-color: var(--warn); color: var(--warn); }
.crm .mikro[data-zustand="an"] svg { animation: mikro-puls 1.2s ease-in-out infinite; }
.crm .mikro:disabled { opacity: .6; cursor: progress; }
@keyframes mikro-puls { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .crm .mikro[data-zustand="an"] svg { animation: none; } }
.crm-seite.assistent .seite-kopf .knoepfe { flex-wrap: nowrap; flex-shrink: 0; }

/* --- Aktionen im Profilkopf (Connor, 10.11.2026): Hauptaktionen groß, Werkzeuge als eine ruhige Leiste ------------
   Assistent mit eigenem KI-Ton (getönte Fläche, Funke), Submission als einzige Akzentfläche mit Pfeil,
   Bearbeiten, Lebenslauf, Q-Call und Bouncen gebündelt mit Symbolen statt einzelner gleicher Pillen. */
.crm .profil-kopf > .rechts { gap: 12px; }
.crm .haupt-aktionen { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.crm .haupt-aktionen .btn.akzent { min-height: 44px; padding: 0 22px; font-size: var(--fs-14); }
.crm .haupt-aktionen .btn.akzent svg { width: 16px; height: 16px; transition: transform var(--dauer); }
.crm .haupt-aktionen .btn.akzent:hover svg { transform: translateX(2px); }
.crm .ki-knopf { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 20px 0 16px;
  border-radius: var(--r-pille); border: 1px solid var(--accent-soft-line); cursor: pointer;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.16), rgba(var(--accent-rgb), 0.05)), var(--card);
  color: var(--text); font: 600 var(--fs-14) var(--sans);
  transition: border-color var(--dauer), box-shadow var(--dauer), transform var(--dauer); }
.crm .ki-knopf svg { width: 18px; height: 18px; color: var(--accent-text); transition: transform var(--dauer); }
.crm .ki-knopf:hover { border-color: var(--accent-line); box-shadow: var(--shadow-hover); }
.crm .ki-knopf:hover svg { transform: rotate(18deg) scale(1.08); }
.crm .ki-knopf:active { transform: translateY(1px) scale(0.985); }
.crm .werkzeugleiste { display: inline-flex; align-items: stretch; flex-wrap: wrap; border: 1px solid var(--line);
  border-radius: var(--r-pille); background: var(--inner); padding: 3px; gap: 2px; }
.crm .werkzeugleiste > a, .crm .werkzeugleiste > button { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px;
  border: 0; border-radius: var(--r-pille); background: transparent; color: var(--text-2); font: 500 var(--fs-13) var(--sans);
  text-decoration: none; cursor: pointer; white-space: nowrap; transition: background var(--dauer), color var(--dauer); }
.crm .werkzeugleiste svg { width: 15px; height: 15px; color: var(--muted); transition: color var(--dauer); }
.crm .werkzeugleiste > a:hover, .crm .werkzeugleiste > button:hover { background: var(--card); color: var(--text); box-shadow: var(--shadow-karte); }
.crm .werkzeugleiste > a:hover svg, .crm .werkzeugleiste > button:hover svg { color: var(--accent-text); }
.crm .werkzeugleiste > button[disabled] { opacity: .45; cursor: not-allowed; }
.crm .profil-kopf > .rechts .meta { font-size: var(--fs-12); }
@media (max-width: 1099px) {
  .crm .profil-kopf > .rechts { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; }
  .crm .haupt-aktionen { order: 2; }
  .crm .werkzeugleiste { order: 1; }
  .crm .profil-kopf > .rechts .meta { order: 3; flex: 1 1 100%; }
}
@media (max-width: 600px) {
  .crm .haupt-aktionen { width: 100%; justify-content: stretch; }
  .crm .haupt-aktionen > * { flex: 1 1 0; justify-content: center; }
  .crm .werkzeugleiste > a span, .crm .werkzeugleiste > button span { display: none; }
}
@media (min-width: 1100px) {
  .crm .profil-kopf > .rechts { max-width: none; }
  .crm .werkzeugleiste { flex-wrap: nowrap; }
}
/* Datei-Knöpfe als label: .crm label stapelt sonst senkrecht und die Schrift sitzt oben (Connor, 10.11.2026) */
.crm label.pill { display: inline-flex; flex-direction: row; justify-content: center; align-self: center; gap: 6px; color: var(--text); font: 500 var(--fs-14) var(--sans); cursor: pointer; }
.crm label.pill.klein { font-size: var(--fs-13); }

/* --- Unternehmensprofil geordnet (Connor, 10.11.2026) -------------------------------------------------------
   Kopf: Status oben, Name, darunter Eckangaben als Paare aus Bezeichnung und Wert in einer Reihe.
   Knöpfe rechts in einer Reihe mit Symbolen. Sechs Eckfelder in einer Reihe gleich hoch. Linke Spalte ohne Versatz. */
.crm .firmen-kopf .kopf-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.crm .firmen-kopf .kopf-text .zeile { margin-top: 0; }
.crm .firmen-kopf h1 { margin: 0; }
.crm .firmen-fakten { display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: baseline; margin-top: 4px; font-size: var(--fs-14); }
.crm .firmen-fakten > span { display: inline-flex; align-items: baseline; gap: 8px; min-width: 0; }
.crm .firmen-fakten small { font-size: var(--fs-12); letter-spacing: .07em; text-transform: uppercase; color: var(--label); font-weight: 600; }
.crm .firmen-kopf .knoepfe { align-items: center; }
.crm .firmen-kopf .knoepfe svg { width: 16px; height: 16px; }
.crm .eck.sechs { grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: stretch; }
.crm .eck.sechs .feld { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.crm .eck.sechs .feld b { margin-top: 0; font-size: var(--fs-20); overflow-wrap: anywhere; }
.crm .eck.sechs .feld small { margin-top: auto; }
@media (max-width: 1400px) { .crm .eck.sechs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .crm .eck.sechs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* .fakten ist auch der Name der linken Spalte im Profilraster: dort kein Raster und kein Abstand oben */
.crm .profil-raster > .spalte.fakten { display: flex; margin-top: 0; gap: 24px; }
.crm .eck.sechs .feld small { display: flex; flex-wrap: wrap; gap: 4px; align-items: baseline; }

/* Wechselprofil, passende Jobs, Auswahl (24.63) */
/* Wechselprofil als ruhige Zeilen in zwei Spalten: Bezeichnung, Wert, Status (12.11.2026) */
.crm .wp-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
.crm .wp-feld { display: grid; grid-template-columns: 132px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--line-soft); min-width: 0; }
.crm .wp-label { font-size: var(--fs-12); color: var(--muted); }
.crm .wp-wert { font-size: var(--fs-13); line-height: 1.45; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.crm .wp-neben { color: var(--muted); font-size: var(--fs-12); }
.crm .wp-status { display: inline-flex; gap: 6px; align-items: center; justify-self: end; white-space: nowrap; }
.crm .wp-status .chip { padding: 0 8px; font-size: var(--fs-12); }
.crm .wp-feld.vorschlag .wp-wert { color: var(--text-2); }
@media (max-width: 900px) { .crm .wp-raster { grid-template-columns: minmax(0, 1fr); } .crm .wp-feld { grid-template-columns: 110px minmax(0, 1fr) auto; } }
.crm .chip.wp-vorschlag { border: 1px dashed var(--line-strong); background: transparent; }
.crm .treffer-liste > .treffer { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.crm .treffer-liste > .treffer:last-child { border-bottom: 0; }
.crm .treffer .t-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.crm .treffer .t-text a { color: var(--text); text-decoration: none; font-weight: 600; }
.crm .treffer .t-warum { color: var(--text-2); }
.crm .treffer .t-chips, .crm .treffer .t-knoepfe, .crm .treffer .t-grund { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 2px; }
.crm .weitere summary { cursor: pointer; font-size: var(--fs-13); color: var(--text-2); margin-top: 8px; }
.crm .auswahl-zeile { flex-wrap: wrap; }
.crm .auswahl-zeile select { font-size: var(--fs-13); }
.crm .zustimmung { display: flex; gap: 8px; align-items: flex-start; font-size: var(--fs-13); padding: 10px 0 0; }
.crm .modus-wahl { margin-bottom: 24px; }
.crm .waehlen { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
.crm .waehlen input { margin: 0; accent-color: var(--accent-fill); }

/* Foto aus dem Lebenslauf (10.2) */
.crm .foto-box { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: none; }
.crm .foto.mit-bild { overflow: hidden; padding: 0; }
.crm .foto.mit-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.crm .foto-knoepfe { display: flex; align-items: center; gap: 2px; }

/* Telefonnummer im Knopf immer einzeilig (12.11.2026) */
.crm .nummer, .crm-seite .nummer, .crm-sticky .nummer { display: inline-flex; align-items: center; gap: 6px; flex: none; white-space: nowrap; font-size: var(--fs-13); }
.crm .nummer strong, .crm-sticky .nummer strong { white-space: nowrap; }
/* Lange Einträge im Verlauf eingeklappt */
.crm .verlauf .eintrag p.lang.zu { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.crm .verlauf .eintrag [data-auf] { margin-top: 6px; }
.crm .t-abschnitt { font-size: var(--fs-13); color: var(--muted); font-weight: 600; margin: 16px 0 4px; }

/* Dokumente: Formular in einer Zeile, Link zur Unterseite */
.crm .dok-art { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.crm .dok-zeile { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.crm .dok-alle { margin-top: 8px; align-self: flex-start; white-space: nowrap; width: max-content; }

/* Sortieren nach Spalte (13.11.2026) */
.crm table.tabelle th.sortierbar { cursor: pointer; user-select: none; white-space: nowrap; }
.crm table.tabelle th.sortierbar:hover { color: var(--text); }
.crm table.tabelle th.sortierbar .pfeil { color: var(--accent-text); }

/* Start: Kennzahl-Knöpfe dezenter (13.11.2026) */
.crm .gruss-zahlen { gap: 10px; }
.crm .gruss-zahlen a { min-width: 0; gap: 10px; padding: 10px 16px 10px 10px; }
.crm .gruss-zahlen i { width: 34px; height: 34px; }
.crm .gruss-zahlen i svg { width: 17px; height: 17px; }
.crm .gruss-zahlen b { font-size: var(--fs-20); }
.crm .gruss-zahlen a > span > span { font-size: var(--fs-12); }