/* ============================================================
   Sales Suite — Intentio-App
   Rahmen wie die uebrigen Andock-Apps: .sales-frame steht so auch in
   DOCK_REG, sonst findet der Resizer den Rahmen nicht.
   MD3 outlined (md3-kit.css) fuer alle Bedienelemente.
   HELL zuerst, ohne body.theme-light: der Inhalt der Workstation ist
   immer hell, das dunkle Design faerbt nur Topbar und Sidebar.
   ============================================================ */
#salesOverlay{ position:fixed; inset:0; z-index:1400; display:none; }
#salesOverlay[data-open="true"]{ display:block; }
#salesOverlay .material-symbols-rounded{ vertical-align:middle; line-height:1; }

:root{
  --sal-linie:#e7eef6; --sal-linie2:#d9e4f0; --sal-mut:#8a97a8;
  --sal-ich:#1f7a8c;    --sal-ich-rgb:31,122,140;
  --sal-kunde:#c2691a;  --sal-kunde-rgb:194,105,26;
  --sal-notiz:#6b7a8c;  --sal-notiz-rgb:107,122,140;
  --sal-gate:#6d4fc4;   --sal-gate-rgb:109,79,196;
  --sal-pflicht:#b3261e; --sal-pflicht-rgb:179,38,30;
}
.sales-frame{
  display:flex; flex-direction:column; overflow:hidden;
  background:#f5f8fc; color:#12233a;
}
.sales-frame *{ box-sizing:border-box; }

/* ---------- Kopf ---------- */
.sal-head{ flex:none; display:flex; align-items:center; gap:11px; padding:14px 16px;
  background:#fff; border-bottom:1px solid var(--sal-linie); }
.sal-logo{ width:36px; height:36px; border-radius:10px; display:grid; place-items:center; color:#fff;
  background:linear-gradient(135deg,#f0862f,#e0564f); flex:none; }
.sal-logo .material-symbols-rounded{ font-size:21px; }
.sal-hs h2{ margin:0; font-size:16px; font-weight:700; letter-spacing:-.01em; }
.sal-pw{ font-size:11px; color:var(--sal-mut); }
.sal-pw b{ color:var(--accent-dark, var(--accent,#2f7ad6)); font-weight:700; }
.sal-krumen{ margin-left:18px; padding-left:18px; border-left:1px solid var(--sal-linie);
  font-size:12.5px; color:var(--sal-mut); }
.sal-akt{ margin-left:auto; display:flex; align-items:center; gap:9px; }
.sal-x{ width:34px; height:34px; border-radius:9px; display:grid; place-items:center; cursor:pointer;
  color:var(--sal-mut); border:0; background:none; }
.sal-x:hover{ background:#eef3f9; color:#12233a; }

/* ---------- Aufbau ---------- */
.sal-body{ flex:1; display:flex; min-height:0; }
.sal-nav{ flex:none; width:216px; background:#fff; border-right:1px solid var(--sal-linie);
  padding:14px 10px; display:flex; flex-direction:column; gap:3px; }
.sal-nav-h{ font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:#9fb0c4; padding:4px 12px 8px; }
.sal-ni{ all:unset; cursor:pointer; display:flex; align-items:center; gap:11px; padding:10px 12px;
  border-radius:10px; font-size:13.5px; font-weight:600; color:#41556d; transition:.13s; }
.sal-ni .material-symbols-rounded{ font-size:20px; color:#8ea4bd; }
.sal-ni:hover{ background:#f2f7fc; color:#12233a; }
.sal-ni.on{ background:rgba(var(--accent-rgb,47,122,214),.14); color:var(--accent-dark, var(--accent,#2f7ad6)); }
.sal-ni.on .material-symbols-rounded{ color:var(--accent-dark, var(--accent,#2f7ad6)); }
.sal-nav-f{ margin-top:auto; padding-top:10px; border-top:1px solid var(--sal-linie); }

.sal-inhalt{ flex:1; min-width:0; display:flex; flex-direction:column; overflow:hidden; }
.sal-sk{ flex:none; padding:16px 20px 12px; display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap; }
.sal-sk h1{ margin:0; font-size:19px; font-weight:800; letter-spacing:-.015em; }
.sal-lfk{ display:flex; align-items:center; gap:2px; }
.sal-lfk h1{ margin-right:6px; }
.sal-lfkn{ all:unset; cursor:pointer; width:28px; height:28px; border-radius:8px; display:grid; place-items:center; color:var(--sal-mut); }
.sal-lfkn .material-symbols-rounded{ font-size:18px; }
.sal-lfkn:hover{ background:rgba(16,24,40,.06); color:var(--sal-text, #0f172a); }
.sal-lfkn.weg:hover{ background:rgba(186,26,26,.08); color:#ba1a1a; }
.sal-lfkn:focus-visible{ outline:2px solid var(--accent,#2f7ad6); outline-offset:1px; }
.sal-sk .sub{ font-size:12.5px; color:var(--sal-mut); margin-top:2px; }
.sal-sk .re{ margin-left:auto; display:flex; gap:9px; align-items:center; }

/* ---------- Auswahl: Leitfaden und Ansicht ---------- */
.sal-mw{ position:relative; }
.sal-menu{ position:absolute; top:calc(100% + 6px); right:0; z-index:20; width:272px; background:var(--panel);
  border:1px solid var(--sal-linie); border-radius:12px; box-shadow:0 18px 44px -18px rgba(15,23,42,.5);
  padding:6px; display:flex; flex-direction:column; gap:2px; max-height:340px; overflow-y:auto; }
.sal-menu[hidden]{ display:none; }
.sal-mi{ all:unset; cursor:pointer; display:flex; align-items:flex-start; gap:10px; padding:9px 10px;
  border-radius:9px; transition:.12s; }
.sal-mi:hover{ background:#f2f7fc; }
.sal-mi.on{ background:rgba(var(--accent-rgb,47,122,214),.14); }
.sal-mi > .material-symbols-rounded{ font-size:20px; color:#8ea4bd; margin-top:1px; }
.sal-mi.on > .material-symbols-rounded{ color:var(--accent-dark, var(--accent,#2f7ad6)); }
.sal-mt{ flex:1; min-width:0; }
.sal-mt b{ display:block; font-size:13px; font-weight:700; }
.sal-mt span{ display:block; font-size:11.5px; color:var(--sal-mut); line-height:1.4; margin-top:1px; }
.sal-mi.on .sal-mt b{ color:var(--accent-dark, var(--accent,#2f7ad6)); }
.sal-mhk{ flex:none; font-size:11px; color:#b8c5d3; font-variant-numeric:tabular-nums; margin-top:2px; }
.sal-mtrenn{ height:1px; background:var(--sal-linie); margin:5px 4px; }

/* ---------- Brett ---------- */
.sal-brett{ flex:1; min-height:0; overflow:auto; padding:4px 20px 20px;
  display:flex; gap:12px; align-items:flex-start; }
.sal-brett.voll{ display:block; padding:0; }
.sal-brett.voll > .sal-fokus{ height:100%; }

.sal-step{ flex:none; width:246px; background:#fff; border:1px solid var(--sal-linie);
  border-radius:12px; display:flex; flex-direction:column; max-height:100%; }
.sal-sh{ flex:none; display:flex; align-items:center; gap:6px; padding:10px 10px 8px;
  border-bottom:1px solid var(--sal-linie); }
.sal-snr{ width:20px; height:20px; border-radius:6px; background:#eef3f9; color:#8ea4bd; font-size:11px;
  font-weight:800; display:grid; place-items:center; flex:none; }
.sal-sname{ flex:1; min-width:0; font-size:13px; font-weight:700; border:0; background:none;
  padding:3px 5px; border-radius:5px; font-family:inherit; color:#12233a; }
.sal-sname:hover{ background:#f2f7fc; }
.sal-sname:focus{ outline:2px solid rgba(var(--accent-rgb,47,122,214),.4); background:#fff; }
.sal-sdel{ width:28px; height:28px; border:0; background:none; border-radius:7px; cursor:pointer;
  color:#b8c5d3; display:grid; place-items:center; padding:0; }
.sal-sdel:hover{ background:#fdeaea; color:#ba1a1a; }
.sal-sdel .material-symbols-rounded{ font-size:17px; }
.sal-liste{ flex:1; min-height:64px; overflow-y:auto; padding:9px; display:flex; flex-direction:column; gap:7px; }
.sal-liste.ueber{ background:rgba(var(--accent-rgb,47,122,214),.06);
  outline:2px dashed rgba(var(--accent-rgb,47,122,214),.45); outline-offset:-5px; border-radius:8px; }
.sal-leer{ font-size:11.5px; color:#a9b8c8; text-align:center; padding:14px 6px; line-height:1.45; }
.sal-add{ flex:none; width:52px; align-self:stretch; min-height:120px; border:1.5px dashed var(--sal-linie2);
  border-radius:12px; background:none; cursor:pointer; color:#9fb0c4; display:grid; place-items:center; transition:.15s; }
.sal-add:hover{ border-color:var(--accent-dark, var(--accent,#2f7ad6)); color:var(--accent-dark, var(--accent,#2f7ad6));
  background:rgba(var(--accent-rgb,47,122,214),.04); }

/* ---------- Karte ---------- */
.sal-el{ border:1px solid; border-radius:9px; padding:8px 9px; background:#fff; position:relative;
  cursor:grab; transition:box-shadow .14s, transform .14s; }
.sal-el:active{ cursor:grabbing; }
.sal-el.zieht{ opacity:.4; }
.sal-mk{ font-size:9px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; padding:2px 6px;
  border-radius:4px; display:inline-block; margin-bottom:4px; }
.sal-tx{ font-size:12.5px; line-height:1.42; outline:none; min-height:18px; border-radius:4px;
  padding:1px 3px; margin:-1px -3px; }
.sal-tx:focus{ background:rgba(var(--accent-rgb,47,122,214),.07);
  box-shadow:0 0 0 2px rgba(var(--accent-rgb,47,122,214),.3); }
.sal-tx:empty::before{ content:attr(data-leer); color:#a9b8c8; }
.sal-elx{ position:absolute; top:5px; right:5px; width:22px; height:22px; border:0; background:none;
  border-radius:5px; cursor:pointer; color:#b8c5d3; display:none; place-items:center; padding:0; }
.sal-el:hover .sal-elx{ display:grid; }
.sal-elx:hover{ background:#fdeaea; color:#ba1a1a; }
.sal-elx .material-symbols-rounded{ font-size:15px; }
.sal-el[data-wer="ich"]   { border-color:rgba(var(--sal-ich-rgb),.42);   background:rgba(var(--sal-ich-rgb),.045); }
.sal-el[data-wer="kunde"] { border-color:rgba(var(--sal-kunde-rgb),.42); background:rgba(var(--sal-kunde-rgb),.05); }
.sal-el[data-wer="notiz"] { border-color:rgba(var(--sal-notiz-rgb),.32); background:rgba(var(--sal-notiz-rgb),.045); }
.sal-el[data-wer="ich"]   .sal-mk{ background:rgba(var(--sal-ich-rgb),.15);   color:#155e6d; }
.sal-el[data-wer="kunde"] .sal-mk{ background:rgba(var(--sal-kunde-rgb),.15); color:#96500f; }
.sal-el[data-wer="notiz"] .sal-mk{ background:rgba(var(--sal-notiz-rgb),.14); color:#4d5a68; }
.sal-el[data-wer="gate"]  { border-color:rgba(var(--sal-gate-rgb),.42);   background:rgba(var(--sal-gate-rgb),.05); }
.sal-el[data-wer="gate"]  .sal-mk{ background:rgba(var(--sal-gate-rgb),.15); color:#4b2f96; }
/* Die Pflichtansage traegt einen kraeftigen linken Balken statt nur eines
   Rahmens — sie soll beim Ueberfliegen der Spalte auffallen, nicht sich
   einreihen. */
.sal-el[data-wer="pflicht"]{ border-color:rgba(var(--sal-pflicht-rgb),.45);
  background:rgba(var(--sal-pflicht-rgb),.045); border-left-width:4px; }
.sal-el[data-wer="pflicht"] .sal-mk{ background:rgba(var(--sal-pflicht-rgb),.14); color:#8c1d18; }
.sal-el.pflicht.offen{ box-shadow:0 0 0 2px rgba(var(--sal-pflicht-rgb),.35); }
.sal-el.pflicht.gesagt .sal-zz{ background:#1f7a8c; box-shadow:0 2px 6px -1px rgba(31,122,140,.8); }
.sal-pfh{ display:inline-block; margin-left:6px; font-size:9px; font-weight:800; letter-spacing:.05em;
  text-transform:uppercase; padding:2px 6px; border-radius:4px;
  background:rgba(var(--sal-pflicht-rgb),.12); color:#8c1d18; }
.sal-el.pflicht.gesagt .sal-pfh{ background:rgba(31,122,140,.14); color:#155e6d; }
/* Vorwand gestrichelt, Einwand voll: ein Vorwand ist eine Abwehr und will
   umgangen werden, ein Einwand ein echter Grund und will beantwortet werden. */
.sal-el[data-art="vorwand"]{ border-style:dashed; }

/* ---------- Palette ---------- */
.sal-pal{ flex:none; width:224px; border-left:1px solid var(--sal-linie); background:#fff;
  padding:14px 12px; overflow-y:auto; }
.sal-pal[hidden]{ display:none; }
.sal-ph{ font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:#9fb0c4; margin:0 0 4px; }
.sal-ps{ font-size:11.5px; color:var(--sal-mut); margin:0 0 12px; line-height:1.45; }
.sal-pg{ display:flex; flex-direction:column; gap:7px; margin-bottom:16px; }
.sal-pi{ border:1px solid; border-radius:9px; padding:8px 10px; cursor:grab; display:flex;
  align-items:center; gap:8px; font-size:12.5px; font-weight:600; transition:.14s; }
.sal-pi:hover{ transform:translateX(2px); }
.sal-pi .material-symbols-rounded{ font-size:17px; }
.sal-pi[data-wer="ich"]   { border-color:rgba(var(--sal-ich-rgb),.42);   background:rgba(var(--sal-ich-rgb),.05);   color:#155e6d; }
.sal-pi[data-wer="kunde"] { border-color:rgba(var(--sal-kunde-rgb),.42); background:rgba(var(--sal-kunde-rgb),.055);color:#96500f; }
.sal-pi[data-wer="notiz"] { border-color:rgba(var(--sal-notiz-rgb),.32); background:rgba(var(--sal-notiz-rgb),.05); color:#4d5a68; }
.sal-pi[data-wer="gate"]  { border-color:rgba(var(--sal-gate-rgb),.42);   background:rgba(var(--sal-gate-rgb),.05);  color:#4b2f96; }
.sal-pi[data-wer="pflicht"]{ border-color:rgba(var(--sal-pflicht-rgb),.45); background:rgba(var(--sal-pflicht-rgb),.05); color:#8c1d18; border-left-width:4px; }
/* Ueberschriften in der Palette — sechzehn Formen ohne Gliederung sind eine Wand. */
.sal-pgh{ font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:#9fb0c4; margin:4px 2px 6px; }
.sal-pgh:first-of-type{ margin-top:0; }
.sal-pg{ margin-bottom:12px; }
.sal-pi[data-art="vorwand"]{ border-style:dashed; }
.sal-leg{ border-top:1px solid var(--sal-linie); padding-top:12px; font-size:11.5px;
  color:var(--sal-mut); line-height:1.55; }
.sal-leg b{ color:#12233a; }

/* ---------- Ansicht: Senkrecht ---------- */
.sal-senk{ padding:4px 20px 20px; max-width:760px; margin:0 auto; }
.sal-senk .vst{ position:relative; padding:0 0 0 44px; }
.sal-senk .sal-sh{ border-bottom:0; padding:14px 0 8px; }
.sal-senk .sal-snr{ position:absolute; left:4px; width:26px; height:26px; border-radius:8px;
  background:var(--accent,#2f7ad6); color:#fff; font-size:12px; z-index:2; }
.sal-senk .sal-sname{ font-size:14px; font-weight:800; }
/* Die Linie traegt die Reihenfolge — ohne sie waeren es gestapelte Kaesten. */
.sal-senk .vst::before{ content:""; position:absolute; left:16px; top:0; bottom:0; width:2px; background:var(--sal-linie2); }
.sal-senk .vst:first-child::before{ top:26px; }
.sal-senk .vst:last-of-type::before{ bottom:auto; height:26px; }
.sal-senk .sal-liste{ padding:0 0 10px; gap:8px; min-height:44px; }
.sal-senk .sal-add{ width:calc(100% - 44px); margin-left:44px; min-height:44px; margin-top:6px; align-self:auto; }

/* ---------- Ansicht: Verzweigung ---------- */
.sal-baum{ padding:8px 20px 20px; display:flex; flex-direction:column; gap:16px; }
.sal-baum .bst{ background:#fff; border:1px solid var(--sal-linie); border-radius:12px; padding:11px 13px; }
.sal-baum .sal-sh{ border-bottom:0; padding:0 0 10px; }
.sal-baum .sal-liste{ min-height:0; padding:0; margin-top:9px; }
.sal-baum .abl{ border:1.5px dashed var(--sal-linie2); border-radius:9px; padding:9px; text-align:center;
  font-size:11.5px; color:#a9b8c8; }

/* ---------- Ansicht: Dialog ---------- */
.sal-dia{ padding:4px 20px 20px; max-width:800px; margin:0 auto; }
.sal-dia .trenn{ display:flex; align-items:center; gap:11px; margin:14px 0 10px; }
.sal-dia .trenn .li{ flex:1; height:1px; background:var(--sal-linie2); }
.sal-dia .trenn .sal-sname{ flex:none; width:auto; font-size:11px; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; color:#9fb0c4; text-align:center; }
.sal-dia .sal-liste{ padding:0; gap:8px; min-height:40px; }
.sal-dia .sal-liste > .sal-el{ max-width:76%; }
.sal-dia .sal-liste > .sal-el[data-wer="ich"]{ align-self:flex-start; border-bottom-left-radius:3px; }
.sal-dia .sal-liste > .sal-el[data-wer="kunde"]{ align-self:flex-end; border-bottom-right-radius:3px; }
.sal-dia .sal-liste > .sal-el[data-wer="notiz"]{ align-self:center; max-width:64%; border-style:dotted; text-align:center; }
.sal-dia .sal-liste > .sal-el[data-wer="gate"]{ align-self:flex-end; border-bottom-right-radius:3px; }
.sal-dia .sal-liste > .sal-el[data-wer="pflicht"]{ align-self:center; max-width:70%; }

/* ---------- Ansicht: Fokus ---------- */
.sal-fokus{ display:flex; flex-direction:column; height:100%; }
.sal-fokus .pillen{ flex:none; display:flex; gap:6px; padding:10px 20px 8px; overflow-x:auto; }
.sal-fokus .pil{ flex:none; border:1px solid var(--sal-linie2); background:#fff; border-radius:16px;
  padding:6px 14px; font-size:12.5px; font-weight:700; color:#41556d; cursor:pointer; white-space:nowrap; transition:.14s; }
.sal-fokus .pil:hover{ border-color:var(--accent-dark, var(--accent,#2f7ad6)); color:var(--accent-dark, var(--accent,#2f7ad6)); }
.sal-fokus .pil.on{ background:var(--accent,#2f7ad6); border-color:var(--accent-dark, var(--accent,#2f7ad6)); color:#fff; }
.sal-fokus .pil .p{ display:inline-block; width:6px; height:6px; border-radius:50%; background:#cfdae7; margin-right:6px; }
.sal-fokus .pil.fertig .p{ background:#1f7a8c; }
.sal-fokus .pil.on .p{ background:#fff; }
.sal-fokus .fk{ flex:none; padding:2px 20px 6px; }
.sal-fokus .fk .sal-sh{ border-bottom:0; padding:0; }
.sal-fokus .fk .sal-snr{ width:24px; height:24px; font-size:12px; }
.sal-fokus .fk .sal-sname{ font-size:15px; font-weight:800; }
.sal-fokus .sal-liste{ flex:1; min-height:0; overflow-y:auto; padding:6px 20px 14px;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(272px,1fr)); gap:10px; align-content:start; }
.sal-fokus .sal-liste > .sal-el{ padding:13px 15px; }
.sal-fokus .sal-liste > .sal-el .sal-tx{ font-size:15px; line-height:1.45; }
.sal-fokus .blaettern{ flex:none; display:flex; gap:9px; padding:10px 20px;
  border-top:1px solid var(--sal-linie); background:#fff; }
.sal-fokus .blaettern .re{ margin-left:auto; }

/* ---------- Gespraech ---------- */
.sales-frame.live .sal-el{ cursor:pointer; }
.sales-frame.live .sal-el:hover{ box-shadow:0 0 0 3px rgba(var(--accent-rgb,47,122,214),.28); transform:translateY(-1px); }
.sales-frame.live .sal-elx, .sales-frame.live .sal-add{ display:none; }
.sales-frame.live .sal-tx{ pointer-events:none; }
.sal-el.gesagt{ box-shadow:inset 0 0 0 2px var(--accent,#2f7ad6); }
.sal-zz{ position:absolute; top:-7px; right:-7px; min-width:19px; height:19px; padding:0 5px;
  border-radius:10px; background:var(--accent,#2f7ad6); color:#fff; font-size:10.5px; font-weight:800;
  display:grid; place-items:center; box-shadow:0 2px 6px -1px rgba(var(--accent-rgb,47,122,214),.8); }

.sal-live{ flex:none; display:flex; align-items:center; gap:12px; padding:10px 20px;
  background:linear-gradient(90deg, rgba(var(--accent-rgb,47,122,214),.10), rgba(var(--accent-rgb,47,122,214),.04));
  border-bottom:1px solid rgba(var(--accent-rgb,47,122,214),.25); }
.sal-lpkt{ width:9px; height:9px; border-radius:50%; background:#e0564f; animation:salPuls 1.4s infinite; }
@keyframes salPuls{ 0%,100%{opacity:1} 50%{opacity:.3} }
.sal-lnm{ font-size:13.5px; font-weight:700; }
.sal-luhr{ font-size:13px; font-variant-numeric:tabular-nums; color:var(--sal-mut); }
.sal-lz{ margin-left:auto; display:flex; gap:12px; align-items:center; }
.sal-lzahl{ font-size:12px; color:var(--sal-mut); }
.sal-lzahl b{ color:#12233a; font-variant-numeric:tabular-nums; }

.sal-mit{ flex:none; width:270px; border-left:1px solid var(--sal-linie); background:#fff;
  display:flex; flex-direction:column; min-height:0; }
.sal-mit[hidden]{ display:none; }
.sal-mk2{ flex:none; padding:13px 14px 10px; border-bottom:1px solid var(--sal-linie); }
.sal-mk2 h3{ margin:0; font-size:13px; font-weight:800; }
.sal-mk2 p{ margin:2px 0 0; font-size:11.5px; color:var(--sal-mut); }
.sal-ml{ flex:1; overflow-y:auto; padding:11px 12px; display:flex; flex-direction:column; gap:8px; }
.sal-mz{ display:flex; gap:9px; font-size:12px; line-height:1.4; }
.sal-mt2{ flex:none; font-variant-numeric:tabular-nums; color:#a9b8c8; font-size:11px; padding-top:1px; }
.sal-mb{ flex:1; min-width:0; }
.sal-mb .w{ font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; display:block; }
.sal-mz[data-wer="ich"] .w{ color:#155e6d; }
.sal-mz[data-wer="kunde"] .w{ color:#96500f; }
.sal-mz[data-wer="notiz"] .w{ color:#4d5a68; }
.sal-mz[data-wer="gate"] .w{ color:#4b2f96; }
.sal-mz[data-wer="pflicht"] .w{ color:#8c1d18; }
.sal-mleer{ font-size:11.5px; color:#a9b8c8; text-align:center; padding:22px 10px; line-height:1.5; }

/* ---------- Uebersicht ---------- */
.sal-ueb{ flex:1; overflow-y:auto; padding:4px 20px 20px; }
.sal-kpi{ display:grid; grid-template-columns:repeat(auto-fit,minmax(158px,1fr)); gap:11px; margin-bottom:18px; }
.sal-kk{ background:#fff; border:1px solid var(--sal-linie); border-radius:11px; padding:13px 15px; }
.sal-kk b{ display:block; font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--sal-mut); margin-bottom:4px; }
.sal-kk span{ font-size:23px; font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.sal-kk .zu{ font-size:11.5px; color:var(--sal-mut); font-weight:500; margin-left:6px; }
.sal-th{ font-size:11px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:#9fb0c4; margin:0 0 9px; }
.sal-liste2{ background:#fff; border:1px solid var(--sal-linie); border-radius:11px; overflow:hidden; }
.sal-lz2{ display:grid; grid-template-columns:1fr 140px 108px 84px 112px 40px; gap:12px; align-items:center;
  padding:12px 15px; border-bottom:1px solid var(--sal-linie); font-size:13px; }
.sal-lz2:last-child{ border-bottom:0; }
.sal-lz2.kopf{ background:#f8fbfe; font-size:10.5px; font-weight:800; letter-spacing:.05em;
  text-transform:uppercase; color:var(--sal-mut); }
.sal-lz2 .nm{ font-weight:600; min-width:0; }
.sal-lz2 .nm small{ display:block; font-size:11px; color:var(--sal-mut); font-weight:400; }
.sal-lz2 .z{ font-variant-numeric:tabular-nums; color:var(--sal-mut); }
.sal-erg{ font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.04em;
  padding:3px 8px; border-radius:5px; justify-self:start; border:0; cursor:pointer; font-family:inherit; }
.sal-erg.termin{ background:rgba(31,122,140,.14); color:#155e6d; }
.sal-erg.offen{ background:rgba(194,105,26,.14); color:#96500f; }
.sal-erg.nein{ background:#eef1f5; color:#6b7a8c; }
.sal-leer2{ padding:34px 20px; text-align:center; color:var(--sal-mut); font-size:13px; line-height:1.6; }

/* ---------- Platzhalter ---------- */
.sal-platz{ flex:1; display:grid; place-items:center; padding:40px; }
.sal-platz-i{ text-align:center; max-width:44ch; }
.sal-platz-i .material-symbols-rounded{ font-size:44px; color:#c3d3e6; }
.sal-platz-i h3{ margin:12px 0 6px; font-size:16px; font-weight:800; }
.sal-platz-i p{ margin:0; font-size:13px; color:var(--sal-mut); line-height:1.55; }

/* ---------- Dialoge ---------- */
.sal-ov{ position:fixed; inset:0; background:rgba(10,20,35,.42); display:none; align-items:center;
  justify-content:center; z-index:2147482000; }
.sal-ov.on{ display:flex; }
.sal-dlg{ background:var(--panel); color:#12233a; border-radius:16px; width:min(432px,92vw); padding:22px;
  box-shadow:0 40px 100px -25px rgba(0,0,0,.55);
  font-family:'Roboto Flex','Roboto','Segoe UI',system-ui,sans-serif; }
.sal-dlg h3{ margin:0 0 4px; font-size:17px; font-weight:800; }
.sal-dlg .s{ margin:0 0 18px; font-size:13px; color:#8a97a8; line-height:1.5; }
.sal-dlg-f{ display:flex; justify-content:flex-end; gap:8px; margin-top:20px; }
.sal-zus{ width:min(680px,94vw); max-height:86vh; overflow-y:auto; }
.sal-zk{ display:grid; grid-template-columns:repeat(4,1fr); gap:9px; margin:16px 0; }
.sal-zk div{ background:#f8fbfe; border:1px solid #e7eef6; border-radius:9px; padding:9px 11px; }
.sal-zk b{ display:block; font-size:9.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:#8a97a8; margin-bottom:2px; }
.sal-zk span{ font-size:17px; font-weight:800; font-variant-numeric:tabular-nums; }
.sal-zab{ font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#9fb0c4; margin:16px 0 8px; }
.sal-zl{ display:flex; flex-direction:column; gap:7px; }
.sal-zz2{ display:flex; gap:10px; font-size:12.5px; border-left:2.5px solid; padding:5px 0 5px 10px; line-height:1.45; }
.sal-zz2[data-wer="ich"]{ border-color:#1f7a8c; }
.sal-zz2[data-wer="kunde"]{ border-color:#c2691a; }
.sal-zz2[data-wer="notiz"]{ border-color:#6b7a8c; }
.sal-zz2[data-wer="gate"]{ border-color:#6d4fc4; }
.sal-zz2[data-wer="pflicht"]{ border-color:#b3261e; }
.sal-zz2 .t{ flex:none; font-variant-numeric:tabular-nums; color:#a9b8c8; font-size:11px; }
.sal-zh{ background:#f8fbfe; border:1px solid #e7eef6; border-radius:9px; padding:11px 13px;
  font-size:12.5px; color:#41556d; line-height:1.5; margin-top:14px; }
.sal-zh b{ color:#12233a; }
/* Fehlt eine Pflichtangabe, ist das keine Randnotiz. */
.sal-zh.warn{ background:rgba(179,38,30,.06); border-color:rgba(179,38,30,.3); color:#8c1d18; }
.sal-zh.warn b{ color:#8c1d18; }

/* ---------- Ziehen per Zeiger ----------
   Das Schwebebild haengt an document.body, damit es nicht vom Ueberlauf der
   Liste beschnitten wird — es darf ueber Spaltengrenzen hinwegziehen. */
.sal-el, .sal-pi{ touch-action:none; }
.sal-el.zieht{ opacity:.35; }
body.sal-zieht{ cursor:grabbing; }
body.sal-zieht *{ cursor:grabbing !important; }
/* Das Schwebebild bringt seine Werte selbst mit (siehe geistBauen in
   sales-suite.js) — hier steht bewusst nichts mehr. Zwei Quellen fuer
   dasselbe Aussehen waren genau der Grund, warum es unsichtbar bleiben
   konnte, wenn eine davon nicht griff. */
/* Die Einfuegemarke sagt, WO die Karte landet — ohne sie raet man. */
/* Absolut positioniert: so verschiebt die Marke die Karten NICHT — sonst
   ergaebe die naechste Rechnung eine andere Stelle und es flackert. */
.sal-liste{ position:relative; }
.sal-marke{
  position:absolute; height:3px; border-radius:2px; background:var(--accent,#2f7ad6);
  box-shadow:0 0 0 3px rgba(var(--accent-rgb,47,122,214),.18); pointer-events:none; z-index:3;
}
.sal-marke.quer{ width:3px; height:auto; }

/* ---------- Eigene Bausteine ----------
   Der Stift liegt IM Baustein, erscheint aber erst beim Ueberfahren: die
   Palette soll nach Bausteinen aussehen, nicht nach einer Werkzeugleiste. */
.sal-pi{ position:relative; }
.sal-pinm{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sal-pedit{ flex:none; width:22px; height:22px; border:0; background:none; border-radius:6px;
  cursor:pointer; color:currentColor; opacity:0; display:grid; place-items:center; padding:0; }
.sal-pi:hover .sal-pedit{ opacity:.65; }
.sal-pedit:hover{ opacity:1 !important; background:rgba(255,255,255,.6); }
.sal-pedit .material-symbols-rounded{ font-size:15px; }
.sal-pneu{ border:1.5px dashed var(--sal-linie2); background:none; border-radius:9px; padding:7px 10px;
  cursor:pointer; display:flex; align-items:center; gap:8px; font:inherit; font-size:12px; font-weight:600;
  color:#9fb0c4; transition:.14s; }
.sal-pneu:hover{ border-color:var(--accent-dark, var(--accent,#2f7ad6)); color:var(--accent-dark, var(--accent,#2f7ad6));
  background:rgba(var(--accent-rgb,47,122,214),.04); }
.sal-pneu .material-symbols-rounded{ font-size:16px; }

/* ---------- Baustein-Editor ---------- */
.sal-bdlg{ width:min(560px,94vw); max-height:88vh; overflow-y:auto; }
.sal-bl{ font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:#8a97a8; margin:18px 0 8px; }
.sal-brow{ display:flex; gap:7px; flex-wrap:wrap; }
.sal-bopt{ border:1px solid #bcc7cc; background:#fff; border-radius:9px; padding:8px 13px; cursor:pointer;
  font:inherit; font-size:12.5px; font-weight:600; color:#41556d; transition:.13s; }
.sal-bopt:hover{ border-color:var(--accent-dark, var(--accent,#2f7ad6)); }
.sal-bopt.on{ background:rgba(var(--accent-rgb,47,122,214),.12); border-color:var(--accent-dark, var(--accent,#2f7ad6));
  color:var(--accent-dark, var(--accent,#2f7ad6)); }
/* Die Farbwahl zeigt die Farbe selbst — ein Wort allein saehe man nicht. */
.sal-bfarb{ border:1px solid #bcc7cc; background:#fff; border-radius:9px; padding:7px 12px 7px 9px;
  cursor:pointer; font:inherit; font-size:12.5px; font-weight:600; color:#41556d; transition:.13s;
  display:flex; align-items:center; gap:8px; }
.sal-bfarb i{ width:13px; height:13px; border-radius:4px; border:1.5px solid; flex:none; }
.sal-bfarb[data-wer="ich"] i     { border-color:rgba(31,122,140,.7);  background:rgba(31,122,140,.18); }
.sal-bfarb[data-wer="kunde"] i   { border-color:rgba(194,105,26,.7);  background:rgba(194,105,26,.18); }
.sal-bfarb[data-wer="gate"] i    { border-color:rgba(109,79,196,.7);  background:rgba(109,79,196,.18); }
.sal-bfarb[data-wer="notiz"] i   { border-color:rgba(107,122,140,.6); background:rgba(107,122,140,.18); }
.sal-bfarb[data-wer="pflicht"] i { border-color:rgba(179,38,30,.7);   background:rgba(179,38,30,.18); }
.sal-bfarb.on{ border-color:var(--accent-dark, var(--accent,#2f7ad6)); background:rgba(var(--accent-rgb,47,122,214),.10);
  color:var(--accent-dark, var(--accent,#2f7ad6)); }
.sal-bic{ display:grid; grid-template-columns:repeat(auto-fill,minmax(42px,1fr)); gap:5px;
  max-height:188px; overflow-y:auto; border:1px solid #e7eef6; border-radius:10px; padding:8px;
  background:#fbfdff; }
.sal-bicb{ height:38px; border:1px solid transparent; background:none; border-radius:8px; cursor:pointer;
  display:grid; place-items:center; color:#5f7280; transition:.12s; padding:0; }
.sal-bicb:hover{ background:#eef3f9; color:#12233a; }
.sal-bicb.on{ background:rgba(var(--accent-rgb,47,122,214),.14); border-color:var(--accent-dark, var(--accent,#2f7ad6));
  color:var(--accent-dark, var(--accent,#2f7ad6)); }
.sal-bicb .material-symbols-rounded{ font-size:21px; }
.sal-bchk{ display:flex; align-items:center; gap:9px; margin-top:16px; font-size:13px; cursor:pointer; }
.sal-bchk input{ width:17px; height:17px; accent-color:var(--accent-dark, var(--accent,#2f7ad6)); cursor:pointer; }
/* Scharf geschalteter Löschknopf: der zweite Klick löscht wirklich. */
#salBweg.scharf{ background:#ba1a1a !important; color:#fff !important; font-weight:700;
  border-radius:20px; padding-inline:14px; }

/* ---------- Ansicht: Ablaufbaum (senkrecht mit Verzweigung) ----------
   Gelesen wird von oben nach unten; verzweigt wird in die Breite. Die
   Verbindungslinien sind reine Pseudoelemente — ein SVG daneben muesste bei
   jeder Aenderung neu vermessen werden. */
.sal-fluss{ padding:8px 20px 24px; display:flex; flex-direction:column; gap:16px;
  align-items:stretch; min-width:min-content; }
.sal-fluss .fst{ background:#fff; border:1px solid var(--sal-linie); border-radius:12px;
  padding:11px 13px 15px; min-width:min-content; }
.sal-fluss .fst > .sal-sh{ border-bottom:0; padding:0 0 10px; }
.sal-fluss .sal-liste{ min-height:0; padding:0; margin-top:10px; }

/* Ganze Step-Flaeche als Ablage in den Baum-Ansichten. Eine Einfuegelinie
   gaebe es hier nicht ehrlich — die Karte haengt sich nach der Reihenfolge
   ein —, also hebt sich die ganze Flaeche hervor. */
.sal-baum .bst.ueber, .sal-fluss .fst.ueber{
  outline:2px dashed rgba(var(--accent-rgb,47,122,214),.5); outline-offset:-4px;
  background:rgba(var(--accent-rgb,47,122,214),.05);
}
.abl.anhang{ margin-top:10px; }
.sal-baum .bst.ueber .abl.anhang, .sal-fluss .fst.ueber .abl.anhang{
  border-color:var(--accent-dark, var(--accent,#2f7ad6)); color:var(--accent-dark, var(--accent,#2f7ad6));
}

/* ---------- Waehrend eines Zugs: alle moeglichen Stellen zeigen ----------
   Ohne das muss man raten, wo eine Karte landen darf. Zurueckhaltend
   gestrichelt; die Stelle unter dem Zeiger bekommt zusaetzlich Farbe. */
.zeigtZiele [data-salnach]{
  outline:1.5px dashed rgba(var(--accent-rgb,47,122,214),.35); outline-offset:3px; border-radius:10px;
}
.zeigtZiele .sal-liste,
.zeigtZiele .bst[data-salliste], .zeigtZiele .fst[data-salliste]{
  outline:1.5px dashed rgba(var(--accent-rgb,47,122,214),.28); outline-offset:-3px; border-radius:10px;
}
.zeigtZiele [data-salnach].ueber{
  outline:2px solid var(--accent,#2f7ad6); outline-offset:3px;
  background:rgba(var(--accent-rgb,47,122,214),.07);
}
/* Das Schwebebild traegt jetzt seine Farben mit — es haengt ausserhalb des
   Rahmens, deshalb stehen die Variablen auf :root. */


/* ---------- Step-Knopf: in den senkrechten Ansichten ueber die volle Breite ----------
   Als schmale Saeule ergibt er nur neben Spalten Sinn. Untereinander gelesen
   gehoert er quer unter den letzten Step. */
.sal-add{ gap:8px; font:inherit; font-size:12.5px; font-weight:600; }
.sal-senk .sal-add, .sal-baum .sal-add, .sal-fluss .sal-add, .sal-dia .sal-add{
  display:flex; align-items:center; justify-content:center;
  width:100%; min-height:46px; margin-top:6px; align-self:auto;
}
.sal-senk .sal-add{ width:calc(100% - 44px); margin-left:44px; }
/* Die Saeule in der Spalten-Ansicht bleibt schmal — dort ohne Beschriftung. */
.sal-brett > .sal-add .sal-addtxt{ display:none; }


/* ---------- Leerer Step und Ablage-Hinweis ----------
   Vorher standen beide als nackter Text untereinander — die Regel dafuer
   war auf .sal-baum beschraenkt und griff im Ablaufbaum gar nicht. */
.sal-leerstep{
  display:flex; flex-direction:column; align-items:center; gap:7px;
  padding:26px 16px; border:1.5px dashed var(--sal-linie2); border-radius:12px;
  text-align:center; color:#a9b8c8; background:rgba(15,23,42,.012);
}
.sal-leerstep .material-symbols-rounded{ font-size:26px; opacity:.55; }
.sal-leerstep b{ font-size:13px; font-weight:700; color:#8ea4bd; }
.sal-leerstep span:last-child{ font-size:11.5px; line-height:1.45; max-width:36ch; }

/* Der Ablage-Hinweis ist keine Dauereinblendung: er erscheint nur, solange
   ein Baustein in der Luft ist — dann aber deutlich. */
.abl.anhang{
  display:none; margin-top:14px; align-items:center; justify-content:center; gap:8px;
  border:1.5px dashed rgba(var(--accent-rgb,47,122,214),.45); border-radius:10px;
  padding:11px 12px; text-align:center; font-size:12px; font-weight:600;
  color:rgba(var(--accent-rgb,47,122,214),.95); background:rgba(var(--accent-rgb,47,122,214),.05);
}
.zeigtZiele .abl.anhang{ display:flex; }
.abl.anhang .material-symbols-rounded{ font-size:17px; }

/* ================= Anrufliste =================
   Dieselbe Listenform wie die Gespraechsuebersicht, aber mit einer eigenen
   Spaltenteilung: Name, Nummer, Notiz, faellig, Aktionen. */
.sal-lz3{ display:grid; grid-template-columns:1fr 132px minmax(0,1.1fr) 104px 168px; gap:12px;
  align-items:center; padding:11px 15px; border-bottom:1px solid var(--sal-linie); font-size:12.5px; }
.sal-lz3:last-child{ border-bottom:0; }
.sal-lz3.kopf{ background:#f8fbfe; font-size:10.5px; font-weight:800; letter-spacing:.05em;
  text-transform:uppercase; color:#9fb0c4; }
.sal-lz3 .nm{ font-weight:600; min-width:0; }
.sal-lz3 .nm small{ display:block; font-size:11px; color:var(--sal-mut); font-weight:400; }
.sal-lz3 .z{ font-variant-numeric:tabular-nums; color:var(--sal-mut); min-width:0; }
.sal-lz3 .nz{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-variant-numeric:normal; }
.sal-lz3 .akt{ display:flex; align-items:center; justify-content:flex-end; gap:2px; }
/* Faellig heisst: heute dran. Ein Streifen links reicht dafuer — eine
   zweite Farbe in der Zeile wuerde mit den Sprecherfarben streiten. */
.sal-lz3.faellig{ box-shadow:inset 3px 0 0 var(--sal-kunde); background:rgba(194,105,26,.035); }
.sal-lz3.fertig{ opacity:.5; }
.sal-fertig{ display:inline-flex; align-items:center; gap:5px; font-size:11.5px; color:var(--sal-ich);
  font-weight:600; font-variant-numeric:tabular-nums; }
.sal-fertig .material-symbols-rounded{ font-size:16px; }
.m3-btn.klein{ height:30px; padding:0 12px; font-size:12px; }
.m3-btn.klein .material-symbols-rounded{ font-size:17px; }
/* Zahl am Reiter: wie viele Anrufe heute noch offen sind. */
.sal-nzahl{ margin-left:auto; min-width:19px; height:19px; padding:0 5px; border-radius:10px;
  background:var(--sal-kunde); color:#fff; font-size:10.5px; font-weight:800; line-height:19px;
  text-align:center; font-variant-numeric:tabular-nums; }
/* Vier kurze Felder nebeneinander statt untereinander — der Dialog bleibt
   sonst laenger als der Bildschirm. */
.sal-af{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px; }

/* ================= Kennzahlen-Trichter =================
   Nicht drei Zahlen, sondern der Schwund dazwischen: die Prozentzahl steht
   fuer den Uebergang von der Stufe darueber, nicht fuer den Anteil am Ganzen. */
.sal-tr{ background:#fff; border:1px solid var(--sal-linie); border-radius:11px;
  padding:15px 17px; display:flex; flex-direction:column; gap:11px; margin-bottom:18px; }
.sal-trz{ display:grid; grid-template-columns:132px 1fr 96px; gap:14px; align-items:center; }
.sal-trz .nm{ font-size:12px; font-weight:600; color:#41556d; }
.sal-trz .bar{ height:9px; border-radius:5px; background:#eef3f9; overflow:hidden; }
.sal-trz .bar i{ display:block; height:100%; border-radius:5px;
  background:linear-gradient(90deg,var(--sal-ich),rgba(var(--sal-ich-rgb),.55)); }
.sal-trz .z{ text-align:right; font-variant-numeric:tabular-nums; }
.sal-trz .z b{ font-size:16px; font-weight:800; }
.sal-trz .z .qq{ font-size:11.5px; color:var(--sal-mut); margin-left:7px; }

/* ================= Einwand-Bibliothek =================
   Der Einwand steht oben, die Behandlungen darunter eingerueckt — die Form
   sagt schon, dass das eine auf das andere antwortet. */
.sal-eb{ background:#fff; border:1px solid var(--sal-linie); border-radius:11px;
  padding:13px 15px; margin-bottom:11px; }
.sal-ebk{ display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; }
.sal-ebk b{ font-size:13.5px; font-weight:700; }
.sal-ebt{ flex:none; font-size:10px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  padding:3px 8px; border-radius:6px; background:rgba(var(--sal-kunde-rgb),.14); color:#96500f; }
.sal-ebt.ich{ background:rgba(var(--sal-ich-rgb),.14); color:#155e6d; }
.sal-ebz{ margin-left:auto; font-size:11.5px; color:var(--sal-mut); font-variant-numeric:tabular-nums; }
.sal-ebl{ margin:11px 0 0 13px; padding-left:14px; border-left:2px solid var(--sal-linie2);
  display:flex; flex-direction:column; gap:7px; }
.sal-ebb{ display:flex; align-items:center; gap:9px; font-size:12.5px; }
.sal-ebb .tx{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#41556d; }
.sal-ebb .q{ flex:none; min-width:112px; text-align:right; font-size:11.5px; color:var(--sal-mut); font-variant-numeric:tabular-nums; }
/* Was zum Termin gefuehrt hat, hebt sich ab — genau dafuer ist die Seite da. */
.sal-ebb.wirkt .tx{ color:#12233a; font-weight:600; }
.sal-ebb.wirkt .q{ color:var(--sal-ich); font-weight:800; }
.sal-ebleer{ margin:9px 0 0 13px; padding-left:14px; border-left:2px dashed var(--sal-linie2);
  font-size:12px; color:var(--sal-mut); }

/* ================= Naechster Schritt ================= */
.sal-nx{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.sal-nx .m3-btn{ height:36px; font-size:12.5px; }
.sal-nxd{ display:flex; align-items:center; gap:7px; margin-left:auto;
  font-size:11.5px; color:var(--sal-mut); }
.sal-nxd input{ font:inherit; font-size:12.5px; color:#12233a; padding:7px 9px; border-radius:8px;
  border:1px solid var(--sal-linie2); background:#fff; font-variant-numeric:tabular-nums; }

/* ================= Startdialog mit Anrufliste =================
   Die Liste steht im Dialog, nicht daneben: wer von Hand tippt, kappt die
   Verbindung zum Listeneintrag, und das faellt erst Tage spaeter auf. */
.sal-start{ width:min(500px,92vw); }
.sal-start .sal-zab{ margin-top:0; }
.sal-swahl{ display:flex; flex-direction:column; gap:5px;
  max-height:236px; overflow-y:auto; margin-bottom:4px; }
.sal-sw{ all:unset; box-sizing:border-box; cursor:pointer; display:flex; align-items:center; gap:11px;
  padding:9px 12px; border:1px solid var(--sal-linie); border-radius:10px; background:#fff;
  font-size:12.5px; color:#12233a; }
.sal-sw:hover{ border-color:var(--accent-dark, var(--accent,#2f7ad6)); background:rgba(var(--accent-rgb,47,122,214),.05); }
.sal-sw:focus-visible{ outline:2px solid var(--accent,#2f7ad6); outline-offset:2px; }
.sal-sw .material-symbols-rounded{ font-size:19px; color:#a9b8c8; }
.sal-sw:hover .material-symbols-rounded{ color:var(--accent-dark, var(--accent,#2f7ad6)); }
.sal-sw .nm{ flex:1; min-width:0; font-weight:600; }
.sal-sw .nm small{ display:block; font-size:11px; color:var(--sal-mut); font-weight:400; }
.sal-sw .fa{ flex:none; font-size:11.5px; color:var(--sal-mut); font-variant-numeric:tabular-nums; }
/* Heute faellig: derselbe Streifen wie in der Anrufliste, damit die
   Auswahl hier nicht anders aussieht als dort. */
.sal-sw.faellig{ box-shadow:inset 3px 0 0 var(--sal-kunde); }
.sal-sw.faellig .fa{ color:var(--sal-kunde); font-weight:700; }
/* Trennung zwischen den beiden Wegen — nicht jeder Anruf steht auf der Liste. */
.sal-oder{ display:flex; align-items:center; gap:11px; margin:15px 0 13px;
  font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#b3c1d1; }
.sal-oder::before, .sal-oder::after{ content:""; flex:1; height:1px; background:var(--sal-linie); }

/* ================= Anrufliste befuellen =================
   Der Dialog wird breiter als die uebrigen: eine Vorschau mit fuenf Spalten
   ist in 432 px nicht lesbar, und ohne Vorschau muesste man raten. */
.sal-imp{ width:min(760px,94vw); }
.sal-impfeld{ width:100%; box-sizing:border-box; min-height:96px; max-height:190px; resize:vertical;
  font-family:'Roboto Mono','Consolas',monospace; font-size:12px; line-height:1.55; color:#12233a;
  padding:11px 13px; border:1px solid var(--sal-linie2); border-radius:10px; background:#fbfdff; }
.sal-impfeld:focus{ outline:none; border-color:var(--accent-dark, var(--accent,#2f7ad6));
  box-shadow:0 0 0 3px rgba(var(--accent-rgb,47,122,214),.14); }
.sal-impkopf{ display:flex; align-items:center; gap:14px; margin:15px 0 9px; flex-wrap:wrap; }
.sal-impchk{ display:flex; align-items:center; gap:7px; font-size:12.5px; cursor:pointer; }
.sal-impchk input{ accent-color:var(--accent-dark, var(--accent,#2f7ad6)); width:15px; height:15px; }
.sal-impzahl{ margin-left:auto; font-size:11.5px; color:var(--sal-mut); font-variant-numeric:tabular-nums; }
.sal-imptab{ border:1px solid var(--sal-linie); border-radius:10px; overflow:auto; max-height:214px; }
.sal-imptab table{ border-collapse:collapse; width:100%; font-size:12px; }
.sal-imptab th{ position:sticky; top:0; z-index:1; background:#f8fbfe; padding:7px 8px;
  border-bottom:1px solid var(--sal-linie); text-align:left; }
.sal-imptab td{ padding:7px 10px; border-bottom:1px solid var(--sal-linie);
  white-space:nowrap; max-width:210px; overflow:hidden; text-overflow:ellipsis; }
.sal-imptab tr:last-child td{ border-bottom:0; }
/* Was nicht zugeordnet ist, wird nicht uebernommen — und sieht auch so aus. */
.sal-imptab td.aus{ color:#b8c4d2; text-decoration:line-through; }
.sal-impsel{ font:inherit; font-size:11.5px; font-weight:700; color:#41556d; padding:4px 6px;
  border:1px solid var(--sal-linie2); border-radius:7px; background:#fff; width:100%; cursor:pointer; }
.sal-impmehr{ margin-top:8px; font-size:11.5px; color:var(--sal-mut); text-align:center; }
.sal-impleer{ margin-top:15px; padding:20px; border:1.5px dashed var(--sal-linie2); border-radius:10px;
  text-align:center; font-size:12.5px; color:var(--sal-mut); line-height:1.55; }
/* Wenn der Name aus mehreren Spalten kommt, gehoert das gesagt — sonst sieht
   es in der Auswahl wie ein Versehen aus. */
.sal-impwink{ margin:9px 0; padding:8px 11px; border-radius:8px; font-size:11.5px; line-height:1.5;
  color:#155e6d; background:rgba(var(--sal-ich-rgb),.09); border:1px solid rgba(var(--sal-ich-rgb),.22); }
/* Haengt eine Karte ausdruecklich unter einer anderen, kann man das hier
   loesen — sonst waere die Zuordnung nur durch Ziehen zu aendern. */
.sal-ell{ position:absolute; top:5px; right:29px; width:22px; height:22px; border:0; background:none;
  border-radius:5px; cursor:pointer; color:#b8c5d3; display:none; place-items:center; padding:0; }
.sal-el:hover .sal-ell{ display:grid; }
.sal-ell:hover{ background:rgba(var(--accent-rgb,47,122,214),.12); color:var(--accent-dark, var(--accent,#2f7ad6)); }
.sal-ell .material-symbols-rounded{ font-size:15px; }

/* ---------- Womit ein neuer Leitfaden anfaengt ----------
   Zwei Karten statt eines Auswahlfelds: was drinsteckt, soll man lesen
   koennen, bevor man sich entscheidet. */
.sal-wahl{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.sal-wk{ all:unset; box-sizing:border-box; cursor:pointer; display:flex; flex-direction:column; gap:5px;
  padding:13px 14px; border:1.5px solid var(--sal-linie2); border-radius:12px; background:#fff; }
.sal-wk:hover{ border-color:rgba(var(--accent-rgb,47,122,214),.5); background:rgba(var(--accent-rgb,47,122,214),.03); }
.sal-wk:focus-visible{ outline:2px solid var(--accent,#2f7ad6); outline-offset:2px; }
.sal-wk.on{ border-color:var(--accent-dark, var(--accent,#2f7ad6)); background:rgba(var(--accent-rgb,47,122,214),.07);
  box-shadow:0 0 0 3px rgba(var(--accent-rgb,47,122,214),.12); }
.sal-wk .material-symbols-rounded{ font-size:21px; color:#a9b8c8; }
.sal-wk.on .material-symbols-rounded{ color:var(--accent-dark, var(--accent,#2f7ad6)); }
.sal-wk b{ font-size:13px; font-weight:700; color:#12233a; }
.sal-wk span:last-child{ font-size:11.5px; line-height:1.45; color:var(--sal-mut); }

/* ---------- Eigene Einwaende ----------
   Ein selbst angelegter Eintrag bekommt einen Streifen: er ist vorbereitet,
   nicht erlebt. Sobald er im Gespraech vorkommt, zaehlt er wie jeder andere. */
.sal-eb.eigen{ box-shadow:inset 3px 0 0 rgba(var(--accent-rgb,47,122,214),.55); }
.sal-ebakt{ display:flex; gap:2px; margin-left:6px; opacity:0; transition:opacity .12s; }
.sal-eb:hover .sal-ebakt{ opacity:1; }
.sal-ebakt:focus-within{ opacity:1; }
.sal-bib{ width:min(620px,94vw); }
.sal-bibz{ display:flex; align-items:center; gap:8px; margin-bottom:7px; }
.sal-bibz.kopf{ margin-bottom:2px; }
.sal-bibsel{ flex:none; width:132px; font:inherit; font-size:11.5px; font-weight:700; color:#41556d;
  padding:8px 8px; border:1px solid var(--sal-linie2); border-radius:8px; background:#fff; cursor:pointer; }
.sal-bibtx{ flex:1; min-width:0; font:inherit; font-size:13px; color:#12233a; padding:8px 11px;
  border:1px solid var(--sal-linie2); border-radius:8px; background:#fff; }
.sal-bibtx:focus{ outline:none; border-color:var(--accent-dark, var(--accent,#2f7ad6));
  box-shadow:0 0 0 3px rgba(var(--accent-rgb,47,122,214),.13); }
.sal-bibz.kopf .sal-bibtx{ font-weight:600; }
.sal-bibplus{ all:unset; cursor:pointer; display:inline-flex; align-items:center; gap:6px; margin-top:3px;
  padding:7px 11px; border-radius:8px; font-size:12px; font-weight:600; color:var(--accent-dark, var(--accent,#2f7ad6)); }
.sal-bibplus:hover{ background:rgba(var(--accent-rgb,47,122,214),.09); }
.sal-bibplus .material-symbols-rounded{ font-size:17px; }
/* Das Ergebnis steht jetzt auch in der Anrufliste — Zeitpunkt darunter,
   damit die Zeile nicht breiter wird. */
.sal-fertig{ flex-direction:column; align-items:flex-end; gap:2px; }
.sal-fertig .wann{ font-size:10.5px; color:var(--sal-mut); font-weight:400; }
.sal-lz3 .sal-erg{ font-size:9.5px; padding:2px 7px; }

/* ================= Wenig Platz =================
   Angedockt ist die App oft nur halb so breit wie der Bildschirm. Dann
   fressen Navigation und Palette zusammen 440 px, und fuer den Leitfaden
   bleibt fast nichts. Der Rahmen misst sich selbst und raeumt auf. */
.sal-body{ position:relative; }
/* Knopf fuer die Palette — nur bei wenig Platz. */
.sal-pk{ display:none; width:30px; height:30px; border:0; background:none; border-radius:8px;
  cursor:pointer; color:#8ea4bd; place-items:center; padding:0; margin-right:2px; }
.sales-frame.eng .sal-pk{ display:grid; }
.sal-pk:hover{ background:#eef4fb; color:#41556d; }
.sales-frame.eng.palAuf .sal-pk{ background:rgba(var(--accent-rgb,47,122,214),.14); color:var(--accent-dark, var(--accent,#2f7ad6)); }
.sal-pk .material-symbols-rounded{ font-size:19px; }

/* Die Palette wird zur Lade. Sie faehrt in derselben Zeit ein wie die
   Andockfenster — dieselbe Bewegung, dasselbe Gefuehl. */
.sales-frame.eng .sal-pal{
  position:absolute; top:0; right:0; bottom:0; z-index:6;
  transform:translateX(100%); will-change:transform;
  transition:transform var(--dock-dur,320ms) cubic-bezier(.2,.9,.25,1);
  box-shadow:-20px 0 44px -20px rgba(15,23,42,.34);
}
.sales-frame.eng.palAuf .sal-pal{ transform:none; }
@media (prefers-reduced-motion: reduce){ .sales-frame.eng .sal-pal{ transition:none; } }

/* Noch enger: die Navigation behaelt nur ihre Symbole. Die Beschriftung
   bleibt im Markup (Vorleseprogramme lesen sie), sie wird nur beschnitten. */
.sales-frame.sehreng .sal-nav{ width:58px; padding:14px 7px; }
.sales-frame.sehreng .sal-nav-h{ display:none; }
.sales-frame.sehreng .sal-ni{ position:relative; gap:0; padding:11px 0; justify-content:center; }
/* Verborgen, aber vorlesbar — nicht per display:none, sonst faellt sie auch
   aus dem Bedienungsbaum. */
.sales-frame.sehreng .sal-nit{ position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap; }
.sales-frame.sehreng .sal-nzahl{ position:absolute; top:2px; right:4px; margin:0;
  min-width:16px; height:16px; line-height:16px; font-size:9.5px; padding:0 4px; }

/* ================= Vertriebstechniken =================
   Nachschlagewerk: Verzeichnis links, Artikel rechts. Man kommt hierher,
   weil man etwas sucht — nicht um zu stoebern. */
.sal-tk{ flex:1; display:flex; min-height:0; }
.sal-tkidx{ flex:none; width:286px; border-right:1px solid var(--sal-linie); background:#fff;
  display:flex; flex-direction:column; min-height:0; }
.sal-tks{ padding:12px 12px 9px; border-bottom:1px solid var(--sal-linie); }
.sal-tksf{ position:relative; }
.sal-tksf input{ width:100%; box-sizing:border-box; font:inherit; font-size:12.5px; color:#12233a;
  padding:8px 30px 8px 32px; border:1px solid var(--sal-linie2); border-radius:9px; background:#fbfdff; }
.sal-tksf input:focus{ outline:none; border-color:var(--accent-dark, var(--accent,#2f7ad6)); background:#fff;
  box-shadow:0 0 0 3px rgba(var(--accent-rgb,47,122,214),.13); }
.sal-tksf > .material-symbols-rounded{ position:absolute; left:9px; top:50%; transform:translateY(-50%);
  font-size:17px; color:#a9b8c8; pointer-events:none; }
.sal-tkx{ position:absolute; right:5px; top:50%; transform:translateY(-50%); width:22px; height:22px;
  border:0; background:none; border-radius:6px; cursor:pointer; color:#a9b8c8; display:grid; place-items:center; padding:0; }
.sal-tkx:hover{ background:#eef4fb; color:#41556d; }
.sal-tkx .material-symbols-rounded{ font-size:15px; }
/* Die Kategorien stehen als flache Marken unter der Suche — vierzehn Stueck
   sind zu viele fuer eine Reihe, deshalb umbrechend und klein. */
.sal-tkf{ display:flex; flex-wrap:wrap; gap:4px; margin-top:9px; }
.sal-tkc{ all:unset; cursor:pointer; display:inline-flex; align-items:center; gap:4px; padding:3px 8px;
  border:1px solid var(--sal-linie2); border-radius:999px; font-size:10.5px; font-weight:700;
  color:#5f7280; background:#fff; white-space:nowrap; }
.sal-tkc:hover{ border-color:#b8c9dc; color:#12233a; }
.sal-tkc.on{ color:#fff; background:var(--accent,#2f7ad6); border-color:transparent; }
.sal-tkc .z{ font-size:9.5px; opacity:.65; font-variant-numeric:tabular-nums; }
.sal-tkl{ flex:1; overflow-y:auto; padding:6px 8px 16px; }
.sal-tkg{ display:flex; align-items:center; gap:6px; font-size:9.5px; font-weight:800;
  letter-spacing:.09em; text-transform:uppercase; padding:12px 10px 4px; }
.sal-tkg .material-symbols-rounded{ font-size:14px; }
.sal-tkg .z{ margin-left:auto; opacity:.6; letter-spacing:0; }
.sal-tke{ all:unset; cursor:pointer; display:block; padding:6px 10px; border-radius:8px;
  font-size:12.5px; color:#41556d; line-height:1.35; }
.sal-tke:hover{ background:#f2f7fc; }
.sal-tke.on{ background:rgba(var(--accent-rgb,47,122,214),.12); color:var(--accent-dark, var(--accent,#2f7ad6)); font-weight:700; }
.sal-tkart{ flex:1; min-width:0; overflow-y:auto; padding:22px 30px 40px; }
.sal-tkt{ display:flex; align-items:center; gap:11px; flex-wrap:wrap; }
.sal-tkt h1{ margin:0; font-size:23px; font-weight:800; letter-spacing:-.02em; }
.sal-tkm{ flex:none; font-size:9.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  padding:3px 8px; border-radius:6px; white-space:nowrap; }
.sal-tkab{ font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:#9fb0c4; margin:18px 0 6px; }
.sal-tkart .lead{ margin:0; font-size:15px; line-height:1.62; color:#2c3e52; max-width:70ch; }
.sal-tkart .txt{ margin:0; font-size:13.5px; line-height:1.65; color:#41556d; max-width:70ch; }
.sal-tkb{ border-left:2px solid var(--sal-linie2); padding:3px 0 3px 13px; margin:8px 0;
  font-size:13.5px; color:#41556d; font-style:italic; max-width:70ch; }
.sal-tkw{ display:flex; gap:9px; align-items:flex-start; padding:10px 13px; border-radius:9px;
  max-width:70ch; background:rgba(var(--sal-kunde-rgb),.09); border:1px solid rgba(var(--sal-kunde-rgb),.22);
  font-size:12.5px; line-height:1.55; color:#96500f; }
.sal-tkw .material-symbols-rounded{ font-size:17px; flex:none; margin-top:1px; }
/* Bei wenig Platz schrumpft das Verzeichnis, statt den Artikel zu erdruecken. */
.sales-frame.eng .sal-tkidx{ width:236px; }
.sales-frame.eng .sal-tkart{ padding:18px 20px 32px; }
.sales-frame.sehreng .sal-tkidx{ width:198px; }
.sales-frame.sehreng .sal-tkf{ display:none; }

/* ============================================================
   Smart CRM in der Anrufliste
   ============================================================ */
.sal-nmz{ display:flex; align-items:center; gap:7px; min-width:0; }
.sal-nmt{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sal-crmmark{ all:unset; box-sizing:border-box; cursor:pointer; flex:none; display:inline-flex; align-items:center; gap:3px;
  height:19px; padding:0 7px 0 5px; border-radius:10px; background:rgba(47,111,196,.11); color:#2f6fc4;
  font-size:10.5px; font-weight:700; }
.sal-crmmark .material-symbols-rounded{ font-size:13px; }
.sal-crmmark:hover{ background:rgba(47,111,196,.2); }
.sal-crmmark:focus-visible{ outline:2px solid #2f6fc4; outline-offset:2px; }
.m3-btn.tonal.sal-crmknopf{ background:rgba(47,111,196,.12); color:#2f6fc4; }
.m3-btn.tonal.sal-crmknopf:hover{ background:rgba(47,111,196,.18); }
.sal-kein{ display:inline-flex; align-items:center; gap:5px; margin-right:6px; white-space:nowrap;
  font-size:11.5px; font-weight:700; color:var(--sal-pflicht); }
.sal-kein .material-symbols-rounded{ font-size:16px; }
.sal-lz3.neu{ animation:salNeu 2.4s ease-out; }
@keyframes salNeu{ 0%,25%{ background:rgba(47,111,196,.12); } 100%{ background:transparent; } }

/* Einschub von rechts: Auswahl aus dem CRM */
.sal-scrim{ position:absolute; inset:0; z-index:60; background:rgba(9,17,32,.34); opacity:0; pointer-events:none;
  transition:opacity .2s; }
.sal-scrim.an{ opacity:1; pointer-events:auto; }
.sal-schub{ position:absolute; top:0; right:0; bottom:0; z-index:61; width:470px; max-width:94%; background:#fff;
  display:flex; flex-direction:column; transform:translateX(102%); transition:transform .26s cubic-bezier(.2,.9,.25,1);
  box-shadow:-18px 0 44px -18px rgba(15,23,42,.45); }
.sal-schub.an{ transform:none; }
.sal-sch-k{ flex:none; display:flex; align-items:flex-start; gap:10px; padding:16px 14px 12px 20px; }
.sal-sch-ic{ width:34px; height:34px; border-radius:10px; flex:none; display:grid; place-items:center; color:#fff;
  background:linear-gradient(135deg,#2f7ad6,#22b8db); }
.sal-sch-ic .material-symbols-rounded{ font-size:19px; }
.sal-sch-k h3{ margin:0; font-size:16px; font-weight:800; letter-spacing:-.012em; }
.sal-sch-k p{ margin:1px 0 0; font-size:12.5px; color:var(--sal-mut); }
.sal-sch-k .sal-x{ margin-left:auto; }
.sal-sch-f{ flex:none; padding:0 20px 12px; display:flex; flex-direction:column; gap:10px; border-bottom:1px solid var(--sal-linie); }
.sal-sch-r{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.sal-sch-r .lbl, .sal-sch-fz .lbl{ font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--sal-mut); margin-right:4px; }
.sal-sch-r .m3-chip{ height:30px; padding-inline:11px; font-size:12.5px; gap:6px; }
.sal-sch-r .m3-chip .material-symbols-rounded{ font-size:16px; }
.sal-sch-r .m3-chip .n{ font-size:11px; font-weight:800; opacity:.65; }
.sal-sch-alle{ flex:none; display:flex; align-items:center; gap:10px; padding:9px 20px; border-bottom:1px solid var(--sal-linie);
  background:#fbfdff; font-size:12.5px; color:#41556d; }
.sal-sch-alle label{ display:flex; align-items:center; gap:10px; cursor:pointer; font-weight:600; }
.sal-sch-alle span{ margin-left:auto; color:var(--sal-mut); font-weight:600; }
.sal-kb{ width:18px; height:18px; margin:0; flex:none; cursor:pointer; accent-color:var(--accent-dark, var(--accent,#2f7ad6)); }
.sal-kb:disabled{ cursor:default; }
.sal-sch-l{ flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; }
.sal-wz{ display:flex; align-items:center; gap:11px; padding:9px 20px; border-bottom:1px solid var(--sal-linie); cursor:pointer; }
.sal-wz:hover{ background:#fafcfe; }
.sal-wz.gew{ background:rgba(var(--accent-rgb,47,122,214),.07); }
.sal-wz.aus{ cursor:default; }
.sal-wz.aus .sal-wt, .sal-wz.aus .sal-av{ opacity:.5; }
.sal-av{ width:34px; height:34px; border-radius:50%; flex:none; display:grid; place-items:center; color:#fff;
  font-size:12px; font-weight:800; letter-spacing:-.02em; }
.sal-wt{ flex:1; min-width:0; }
.sal-wn{ display:flex; align-items:baseline; gap:7px; min-width:0; font-weight:700; font-size:13px; }
.sal-wn .f{ font-weight:400; font-size:12px; color:var(--sal-mut); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sal-ww{ display:flex; align-items:center; gap:6px; min-width:0; margin-top:1px; font-size:12px; color:#41556d; }
.sal-ww .material-symbols-rounded{ font-size:14px; color:var(--sal-mut); }
.sal-ww .s{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sal-wtag{ flex:none; font-size:10.5px; font-weight:700; white-space:nowrap; color:var(--sal-mut); }
.sal-wtag.rot{ color:var(--sal-pflicht); }
.sal-wtag.orange{ color:var(--sal-kunde); }
.sal-wgrund{ flex:none; display:flex; align-items:center; gap:4px; white-space:nowrap; font-size:11px; font-weight:600; color:var(--sal-mut); }
.sal-wgrund .material-symbols-rounded{ font-size:15px; }
.sal-wgrund button{ all:unset; cursor:pointer; color:#2f6fc4; font-weight:700; }
.sal-wgrund button:hover{ text-decoration:underline; }
.sal-wgrund button:focus-visible{ outline:2px solid #2f6fc4; outline-offset:2px; }
.sal-wfuss{ display:flex; gap:7px; align-items:flex-start; padding:12px 20px 16px; font-size:11.5px; color:var(--sal-mut); }
.sal-wfuss .material-symbols-rounded{ font-size:16px; }
.sal-wleer{ padding:40px 24px; text-align:center; color:var(--sal-mut); font-size:13px; }
.sal-wleer .material-symbols-rounded{ font-size:32px; display:block; margin:0 auto 8px; opacity:.45; }
.sal-sch-fu{ flex:none; display:flex; flex-direction:column; gap:11px; padding:12px 16px 14px 20px;
  border-top:1px solid var(--sal-linie); background:#fff; }
.sal-sch-fz{ display:flex; align-items:center; gap:10px; }
.sal-seg{ display:inline-flex; border-radius:9px; box-shadow:inset 0 0 0 1px var(--sal-linie2); overflow:hidden; }
.sal-seg button{ all:unset; cursor:pointer; padding:6px 12px; font-size:12px; font-weight:600; color:#41556d; }
.sal-seg button + button{ box-shadow:inset 1px 0 0 var(--sal-linie2); }
.sal-seg button.on{ background:rgba(var(--accent-rgb,47,122,214),.14); color:var(--accent-dark, var(--accent,#2f7ad6)); }
.sal-seg button:focus-visible{ outline:2px solid var(--accent,#2f7ad6); outline-offset:-2px; }
.sal-sch-fk{ display:flex; gap:8px; align-items:center; justify-content:flex-end; }
.sal-sch-fk .hin{ margin-right:auto; max-width:24ch; font-size:11.5px; line-height:1.35; color:var(--sal-mut); }
@media (prefers-reduced-motion: reduce){ .sal-schub, .sal-scrim{ transition:none; } .sal-lz3.neu{ animation:none; } }

/* Anruf eintragen: steht die Person schon im CRM? */
.sal-treffer{ display:flex; align-items:flex-start; gap:10px; margin:0 0 14px; padding:10px 12px; border-radius:11px;
  font-size:12.5px; line-height:1.45; color:#23406a; background:rgba(47,111,196,.07); box-shadow:inset 0 0 0 1px rgba(47,111,196,.22); }
.sal-treffer > .material-symbols-rounded{ font-size:18px; color:#2f6fc4; flex:none; }
.sal-treffer .t{ flex:1; min-width:0; }
.sal-treffer .sal-seg{ display:flex; width:max-content; margin-top:8px; background:#fff; }
.sal-treffer.info{ color:#5a3a0f; background:rgba(194,105,26,.07); box-shadow:inset 0 0 0 1px rgba(194,105,26,.26); }
.sal-treffer.info > .material-symbols-rounded{ color:var(--sal-kunde); }
.sal-treffer.rot{ color:#5c1a15; background:rgba(179,38,30,.06); box-shadow:inset 0 0 0 1px rgba(179,38,30,.26); }
.sal-treffer.rot > .material-symbols-rounded{ color:var(--sal-pflicht); }
.sal-treffer.leise{ color:var(--sal-mut); background:#f6f8fb; box-shadow:none; }
.sal-treffer.leise > .material-symbols-rounded{ color:var(--sal-mut); }

/* ================= Kaltakquise =================
   Links vorbereiten und die Liste, rechts Tagesziel und beste Anrufzeit.
   Der Rahmen dockt an und ist oft schmal — deshalb Containerabfrage. */
.sal-inhalt{ container-type:inline-size; }
.sal-ka{ flex:1; min-height:0; overflow-y:auto; display:grid; grid-template-columns:minmax(0,1fr) 290px; gap:16px;
  align-items:start; padding:16px 20px 24px; }
/* Unterhalb dieser Breite reicht der Platz nicht fuer Tabelle UND Seitenleiste:
   die Karten wandern unter die Liste, nebeneinander. */
@container (max-width:1240px){
  .sal-ka{ grid-template-columns:minmax(0,1fr); }
  .sal-kas{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); align-items:start; }
}
.sal-kah{ min-width:0; display:flex; flex-direction:column; gap:14px; }
.sal-kas{ display:flex; flex-direction:column; gap:12px; }
.sal-karte{ background:#fff; border:1px solid var(--sal-linie); border-radius:12px; }
.sal-kpol{ padding:13px 15px 15px; }
.sal-setup{ padding:14px 16px 12px; }
.sal-kh{ margin:0 0 10px; display:flex; align-items:center; gap:6px; font-size:10.5px; font-weight:800; letter-spacing:.085em;
  text-transform:uppercase; color:var(--sal-mut); }
.sal-klein{ all:unset; cursor:pointer; margin-left:auto; width:26px; height:26px; border-radius:50%; display:grid; place-items:center; color:var(--sal-mut); }
.sal-klein:hover{ background:#eef3f8; color:#12233a; }
.sal-klein .material-symbols-rounded{ font-size:16px; }
.sal-klein:focus-visible{ outline:2px solid var(--accent,#f0862f); outline-offset:2px; }
.sal-kreihe{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; padding:7px 0; border-top:1px solid var(--sal-linie); }
.sal-kh + .sal-kreihe{ border-top:0; padding-top:0; }
.sal-klab{ width:84px; flex:none; font-size:11.5px; font-weight:700; color:#41556d; }
.sal-kchip{ all:unset; box-sizing:border-box; cursor:pointer; position:relative; display:inline-flex; flex-direction:column; justify-content:center;
  min-height:40px; padding:5px 11px; border-radius:10px; box-shadow:inset 0 0 0 1px var(--sal-linie2); font-size:12.5px; color:#12233a; overflow:hidden; }
.sal-kchip b{ font-weight:700; }
.sal-kchip small{ font-size:11px; color:var(--sal-mut); }
.sal-kchip:hover{ background:#fafcfe; }
.sal-kchip.an{ background:rgba(var(--accent-rgb,240,134,47),.1); box-shadow:inset 0 0 0 1.5px var(--accent,#f0862f); }
.sal-kchip.klein{ min-height:30px; flex-direction:row; align-items:center; gap:5px; font-weight:600; }
.sal-kchip .n{ color:var(--sal-mut); font-weight:700; }
.sal-kchip.neu{ flex-direction:row; align-items:center; gap:4px; color:var(--accent-dark,#a3530f); font-weight:700; box-shadow:none; border:1px dashed var(--sal-linie2); }
.sal-kchip.neu .material-symbols-rounded{ font-size:17px; }
.sal-kchip:focus-visible{ outline:2px solid var(--accent,#f0862f); outline-offset:2px; }
.sal-kpb{ position:absolute; left:0; right:0; bottom:0; height:3px; background:#eef3f8; }
.sal-kpb i{ display:block; height:100%; background:var(--sal-ich); }
.sal-kschalter{ display:inline-flex; align-items:center; gap:6px; margin-left:8px; font-size:12.5px; color:#41556d; cursor:pointer; }
.sal-kschalter input{ accent-color:var(--accent-dark, var(--accent,#f0862f)); width:16px; height:16px; }
.sal-kstart{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding-top:10px; border-top:1px solid var(--sal-linie); }
.sal-kstart p{ flex:1; min-width:220px; margin:0; font-size:12px; line-height:1.5; color:#41556d; }
.sal-kstart .rot{ color:var(--sal-pflicht); }
.sal-kwerk{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.sal-kwerk .sal-kh{ margin:0 auto 0 0; }
.sal-lz4{ display:grid; grid-template-columns:minmax(150px,1.4fr) minmax(0,1fr) 78px minmax(0,1fr) 84px auto; gap:10px;
  align-items:center; padding:10px 14px; border-bottom:1px solid var(--sal-linie); font-size:12.5px; }
.sal-lz4:last-child{ border-bottom:0; }
.sal-lz4.kopf{ background:#f8fbfe; font-size:10.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:#9fb0c4; }
.sal-lz4 .nm{ font-weight:600; min-width:0; }
.sal-lz4 .nm small{ display:block; font-size:11px; color:var(--sal-mut); font-weight:400; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sal-lz4 .z{ font-variant-numeric:tabular-nums; color:var(--sal-mut); }
.sal-lz4 .akt{ display:flex; align-items:center; justify-content:flex-end; gap:2px; }
.sal-lz4.faellig{ box-shadow:inset 3px 0 0 var(--sal-kunde); background:rgba(194,105,26,.035); }
.sal-lz4.fertig{ opacity:.5; }
.sal-lz4.neu{ animation:salNeu 2.4s ease-out; }
@container (max-width:760px){
  .sal-lz4{ grid-template-columns:minmax(0,1fr) auto; }
  .sal-lz4.kopf, .sal-lz4 .sal-khw, .sal-lz4 .sal-kprod, .sal-lz4 .sal-kvers{ display:none; }
}
.sal-kpkt{ width:8px; height:8px; border-radius:50%; flex:none; margin-right:6px; background:#d9e4f0; }
.sal-kpkt.heiss{ background:var(--sal-pflicht); }
.sal-kpkt.warm{ background:var(--sal-kunde); }
.sal-kpkt.kalt{ background:#2f7ad6; }
.sal-kwarn{ font-size:15px !important; margin-left:4px; color:var(--sal-pflicht); }
.sal-kwarn.gelb{ color:var(--sal-kunde); }
.sal-khw{ display:flex; align-items:center; gap:5px; min-width:0; color:#41556d; }
.sal-khw > span:last-child{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sal-khw .material-symbols-rounded{ font-size:15px; color:var(--sal-gate); flex:none; }
.sal-khw.vz{ color:var(--sal-gate); }
.sal-kvers{ font-size:11.5px; font-weight:700; color:var(--sal-mut); }
.sal-kvers.spaet{ color:var(--sal-pflicht); }
.sal-kprod{ display:flex; align-items:center; gap:5px; min-width:0; font-size:11.5px; color:#41556d; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.sal-kruhen{ background:#fff; border:1px solid var(--sal-linie); border-radius:12px; }
.sal-kruhen summary{ display:flex; align-items:center; gap:7px; padding:10px 14px; cursor:pointer; font-size:12.5px; font-weight:700; color:#41556d; }
.sal-kruhen summary .material-symbols-rounded{ font-size:18px; color:var(--sal-mut); }
.sal-kruht{ display:flex; align-items:center; gap:10px; padding:9px 14px; border-top:1px solid var(--sal-linie); font-size:12.5px; }
.sal-kruht .nm{ flex:1; min-width:0; font-weight:600; }
.sal-kruht .nm small{ display:block; font-size:11px; color:var(--sal-mut); font-weight:400; }
.sal-kruht .z{ font-size:11.5px; color:var(--sal-mut); }
/* Tagesziel */
.sal-ringw{ display:flex; align-items:center; gap:14px; }
.sal-ringw > div:last-child{ min-width:0; font-size:12.5px; display:flex; flex-direction:column; gap:2px; }
.sal-ringw small{ font-size:11.5px; color:var(--sal-mut); }
.sal-ring{ --p:0; width:76px; height:76px; flex:none; border-radius:50%; display:grid; place-items:center;
  background:conic-gradient(var(--sal-ich) calc(var(--p) * 1%), #eef3f8 0); }
.sal-ring > div{ width:60px; height:60px; border-radius:50%; background:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1.1; }
.sal-ring b{ font-size:19px; font-weight:800; font-variant-numeric:tabular-nums; }
.sal-ring small{ font-size:10px; }
.sal-serie{ display:inline-flex; align-items:center; gap:3px; font-size:12px; font-weight:700; color:var(--sal-kunde); }
.sal-serie .material-symbols-rounded{ font-size:16px; }
.sal-wbars{ display:grid; grid-template-columns:repeat(5,1fr); gap:6px; margin-top:12px; align-items:end; }
.sal-wbars > div{ display:flex; flex-direction:column; align-items:center; gap:3px; font-size:10.5px; color:var(--sal-mut); }
.sal-wbars span{ font-size:10.5px; font-weight:700; font-variant-numeric:tabular-nums; min-height:13px; }
.sal-wbars i{ display:block; width:100%; max-width:26px; min-height:2px; border-radius:4px 4px 0 0; background:#d9e4f0; }
.sal-wbars .heute i{ background:var(--sal-ich); }
.sal-wbars .heute{ color:#12233a; font-weight:700; }
/* Beste Anrufzeit */
.sal-zb{ display:grid; grid-template-columns:48px 1fr 40px; gap:8px; align-items:center; padding:3px 0; font-size:11.5px; font-variant-numeric:tabular-nums; color:#41556d; }
.sal-zb .b{ height:8px; border-radius:4px; background:#eef3f8; overflow:hidden; }
.sal-zb .b i{ display:block; height:100%; border-radius:4px; background:#9fb0c4; }
.sal-zb.best{ font-weight:800; color:var(--sal-ich); }
.sal-zb.best .b i{ background:var(--sal-ich); }
.sal-kleise{ margin:8px 0 0; font-size:12px; line-height:1.5; color:#41556d; }
.sal-kas .m3-btn.text{ justify-content:flex-start; width:100%; }
/* Dialoge */
.sal-kfeld{ display:flex; flex-direction:column; gap:4px; font-size:11.5px; font-weight:700; color:#41556d; margin-top:10px; }
.sal-kfeld .crs-sel, .sal-kfeld .crs-rsuche{ margin-bottom:0; }
.sal-impopt{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:0 12px; margin-top:6px; }
.sal-impopt [hidden]{ display:none; }
.sal-imphin{ margin:8px 0 0; font-size:11.5px; color:var(--sal-mut); }
.sal-lblock{ display:inline-flex; align-items:center; gap:4px; padding:2px 9px; border-radius:11px; font-size:11.5px; font-weight:700;
  background:rgba(var(--sal-ich-rgb),.12); color:var(--sal-ich); }
.sal-lblock .material-symbols-rounded{ font-size:15px; }
@media (prefers-reduced-motion: reduce){ .sal-lz4.neu{ animation:none; } }


/* ================= Verzweigungen =================
   Ein echter Baum: jede Karte kann Kinder haben, beliebig tief.
   Etiketten benennen einen Zweig — neutral fuer Varianten, gruen und rot
   fuer den Ausgang eines Gespraechs. */
:root{ --sal-et-neutral:#2e7d32; --sal-et-gut:#2e7d32; --sal-et-rot:#d64545; --sal-strich:#b7c4d2; }
/* Verzweigung (links nach rechts) */
.sal-hz{ display:flex; align-items:flex-start; gap:8px; margin-bottom:10px; }
.sal-hz:last-child{ margin-bottom:0; }
.sal-hk{ flex:none; width:250px; padding-top:10px; }
.sal-hz > .pf{ flex:none; margin-top:24px; color:#b8c5d3; font-size:18px; }
.sal-hkinder{ display:flex; flex-direction:column; min-width:0; padding-left:10px; border-left:2px solid var(--sal-linie2); }
.sal-baum .bst{ overflow-x:auto; }
/* Ablaufbaum (oben nach unten) */
.sal-fbaum{ display:flex; justify-content:center; min-width:max-content; padding:6px 4px 18px; }
.sal-fbaum ul{ display:flex; justify-content:center; margin:0; padding:26px 0 0; position:relative; list-style:none; }
/* Mehrere Anfaenge stehen untereinander, jeder fuer sich mittig — nicht
   nebeneinander, sonst sieht ein loser Baustein wie ein Zweig aus. */
.sal-fbaum > ul{ padding-top:0; flex-direction:column; align-items:center; gap:30px; }
.sal-fbaum li{ list-style:none; position:relative; display:flex; flex-direction:column; align-items:center; padding:26px 10px 0; }
.sal-fbaum > ul > li{ padding-top:0; }
.sal-fbaum ul ul > li::before, .sal-fbaum ul ul > li::after{ content:""; position:absolute; top:0; right:50%; width:50%; height:26px;
  border-top:2px solid var(--sal-strich); }
.sal-fbaum ul ul > li::after{ right:auto; left:50%; border-left:2px solid var(--sal-strich); }
/* Am aeusseren Kind zeichnet nur EIN Pseudoelement die Ecke. Behielt das
   andere seinen senkrechten Strich, lagen zwei Linien nebeneinander. */
.sal-fbaum ul ul > li:first-child::before, .sal-fbaum ul ul > li:last-child::after{ border:0 none; }
/* Um die Strichbreite versetzt, damit der Bogen genau ueber dem Pfeil endet. */
.sal-fbaum ul ul > li:last-child::before{ right:calc(50% - 2px); border-right:2px solid var(--sal-strich); border-radius:0 8px 0 0; }
.sal-fbaum ul ul > li:first-child::after{ border-radius:8px 0 0 0; }
/* Einziges Kind: nur der gerade Stich, ohne Querbalken. */
.sal-fbaum ul ul > li:only-child::before{ display:none; }
.sal-fbaum ul ul > li:only-child::after{ border:0 none; border-left:2px solid var(--sal-strich); border-radius:0; }
.sal-fbaum ul ul::before{ content:""; position:absolute; top:0; left:50%; height:26px; border-left:2px solid var(--sal-strich); }
.sal-fpfeil{ width:0; height:0; border-left:6px solid transparent; border-right:6px solid transparent; border-top:7px solid var(--sal-strich); margin:-1px 0 4px; }
.sal-fpfeil.et-gut{ border-top-color:var(--sal-et-gut); }
.sal-fpfeil.et-rot{ border-top-color:var(--sal-et-rot); }
.sal-fbaum > ul > li > .sal-fpfeil{ display:none; }
.sal-fk{ width:250px; padding-top:10px; }
.sal-fbaum > ul > li > .sal-fk{ padding-top:0; }
/* Varianten ganz oben: nebeneinander, ohne Striche und Pfeile. */
.sal-fbaum > ul > li.sal-fgr{ padding:0; }
.sal-fbaum ul.sal-frow{ padding-top:0; gap:20px; align-items:flex-start; }
.sal-fbaum ul.sal-frow::before, .sal-fbaum ul.sal-frow > li::before, .sal-fbaum ul.sal-frow > li::after{ display:none; }
.sal-fbaum ul.sal-frow > li{ padding:0; }
.sal-fbaum ul.sal-frow > li > .sal-fpfeil{ display:none; }
.sal-fbaum ul.sal-frow > li > .sal-fk{ padding-top:0; }
.sal-fk .sal-el[data-wer="kunde"], .sal-fk .sal-el[data-wer="gate"]{ text-align:center; }
.sal-fluss .fst{ overflow-x:auto; }
/* Etikett */
.sal-et{ all:unset; box-sizing:border-box; position:absolute; top:-10px; left:50%; transform:translateX(-50%); z-index:2; max-width:88%;
  padding:1px 9px; border-radius:6px; font-size:11px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer;
  background:var(--sal-et-neutral); color:#fff; }
.sal-et.et-gut{ background:#fff; color:#12233a; box-shadow:0 0 0 2px var(--sal-et-gut); }
.sal-et.et-rot{ background:#fff; color:#12233a; box-shadow:0 0 0 2px var(--sal-et-rot); }
.sal-et:focus-visible{ outline:2px solid var(--accent,#f0862f); outline-offset:2px; }
.live .sal-et{ cursor:default; }
.sal-el.mitEt{ margin-top:8px; padding-top:12px; }
.sal-el.et-gut{ box-shadow:0 0 0 1.5px rgba(46,125,50,.45); }
.sal-el.et-rot{ box-shadow:0 0 0 1.5px rgba(214,69,69,.5); }
/* Werkzeuge an der Karte */
.sal-elwerk{ display:none; position:absolute; left:50%; bottom:-13px; transform:translateX(-50%); z-index:6; gap:4px; white-space:nowrap; }
.sal-el:hover .sal-elwerk, .sal-el:focus-within .sal-elwerk, .sal-el.popAuf .sal-elwerk{ display:flex; }
.sal-elwerk button{ all:unset; box-sizing:border-box; cursor:pointer; display:inline-flex; align-items:center; gap:3px; height:24px; padding:0 7px;
  border-radius:12px; background:#fff; box-shadow:0 1px 3px rgba(20,40,70,.2), inset 0 0 0 1px var(--sal-linie2); font-size:11px; font-weight:700; color:#41556d; }
.sal-elwerk button:hover{ color:var(--accent-dark,#a3530f); box-shadow:0 1px 3px rgba(20,40,70,.2), inset 0 0 0 1.5px var(--accent,#f0862f); }
.sal-elwerk button:focus-visible{ outline:2px solid var(--accent,#f0862f); outline-offset:2px; }
.sal-elwerk .material-symbols-rounded{ font-size:15px; }
/* Nur in den Baum-Ansichten ist Platz fuer die Beschriftung. */
.sal-elwerk .tx{ display:none; }
.sal-fluss .sal-elwerk .tx, .sal-baum .sal-elwerk .tx{ display:inline; }
.sal-liste .sal-el{ margin-bottom:6px; }
.sal-el.frisch{ animation:salFrisch 1.4s ease-out; }
@keyframes salFrisch{ 0%,30%{ box-shadow:0 0 0 4px rgba(var(--accent-rgb,240,134,47),.55); } }
/* Menue am Brett */
.sal-pop{ position:fixed; z-index:2147482000; min-width:220px; max-width:280px; padding:6px; border-radius:12px; background:var(--panel); color:#12233a;
  box-shadow:0 14px 34px rgba(20,40,70,.24), 0 0 0 1px #e7eef6; font-family:"Roboto Flex","Segoe UI",system-ui,sans-serif; font-size:13px; }
.sal-popk{ padding:4px 8px 6px; font-size:10.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:#8a97a8; }
.sal-popl{ max-height:320px; overflow-y:auto; }
.sal-popi{ all:unset; box-sizing:border-box; cursor:pointer; display:flex; align-items:center; gap:8px; width:100%; padding:6px 8px; border-radius:8px; font-size:13px; }
.sal-popi:hover, .sal-popi:focus-visible{ background:#f3f6fa; }
.sal-popi .material-symbols-rounded{ font-size:17px; }
.sal-popi[data-wer="ich"] .material-symbols-rounded{ color:#1f7a8c; }
.sal-popi[data-wer="kunde"] .material-symbols-rounded{ color:#c2691a; }
.sal-popi[data-wer="gate"] .material-symbols-rounded{ color:#6d4fc4; }
.sal-popi[data-wer="notiz"] .material-symbols-rounded, .sal-popi[data-wer="pflicht"] .material-symbols-rounded{ color:#6b7a8c; }
.sal-popin{ width:100%; box-sizing:border-box; height:34px; border-radius:8px; border:1px solid #d9e4f0; padding:0 9px; font:inherit; font-size:13px; }
.sal-popin:focus{ outline:2px solid var(--accent,#f0862f); outline-offset:-1px; border-color:transparent; }
.sal-popf{ display:flex; gap:5px; margin:8px 0 4px; }
.sal-popf button{ all:unset; box-sizing:border-box; cursor:pointer; flex:1; display:flex; align-items:center; justify-content:center; gap:5px; height:30px;
  border-radius:8px; font-size:12px; font-weight:700; box-shadow:inset 0 0 0 1px #d9e4f0; }
.sal-popf button.on{ box-shadow:inset 0 0 0 2px var(--accent,#f0862f); background:rgba(var(--accent-rgb,240,134,47),.07); }
.sal-popf i{ width:10px; height:10px; border-radius:50%; }
.sal-popf i.et-neutral{ background:var(--sal-et-neutral); }
.sal-popf i.et-gut{ background:#fff; box-shadow:0 0 0 2px var(--sal-et-gut); }
.sal-popf i.et-rot{ background:#fff; box-shadow:0 0 0 2px var(--sal-et-rot); }
.sal-pophin{ margin:4px 4px 6px; font-size:11px; color:#8a97a8; line-height:1.4; }
.sal-popfu{ display:flex; align-items:center; gap:6px; }
/* Rueckgaengig nach dem Loeschen */
.sal-undo{ position:absolute; left:50%; bottom:18px; z-index:60; display:flex; align-items:center; gap:12px; padding:8px 8px 8px 16px; border-radius:10px;
  background:#1c2a3d; color:#fff; font-size:13px; opacity:0; pointer-events:none; transform:translateX(-50%) translateY(10px); transition:opacity .18s, transform .18s; }
.sal-undo.an{ opacity:1; pointer-events:auto; transform:translateX(-50%); }
.sal-undo button{ all:unset; cursor:pointer; padding:5px 9px; border-radius:7px; color:#ffc08c; font-weight:700; }
.sal-undo button:hover{ background:rgba(255,255,255,.08); }
.sal-undo button:focus-visible{ outline:2px solid #ffc08c; }
/* Platzhalter im Gespraech */
.sal-phf{ height:22px; min-width:52px; margin:0 1px; padding:0 5px; border:0; border-radius:5px; background:#fff; font:inherit; font-weight:700; color:#12233a; /* Stil siehe „Variablen im Text" */
  box-shadow:inset 0 0 0 1.5px var(--accent,#f0862f); vertical-align:1px; }
.sal-phf:focus{ outline:none; box-shadow:inset 0 0 0 2px var(--accent,#f0862f); }
.sal-phf::placeholder{ color:#b0bccb; font-weight:500; font-style:italic; }
.sal-psph{ display:flex; gap:6px; align-items:flex-start; }
.sal-psph .material-symbols-rounded{ font-size:16px; color:var(--accent-dark, var(--accent,#f0862f)); }
/* Wo stehe ich im Baum */
.sal-el.jetzt{ box-shadow:0 0 0 2.5px var(--accent,#f0862f), 0 6px 16px rgba(var(--accent-rgb,240,134,47),.22); }
.sal-el.verworfen{ opacity:.38; filter:saturate(.5); }
.sal-el.verworfen:hover{ opacity:.75; }
.sal-mzet{ display:inline-block; margin-right:5px; padding:0 6px; border-radius:5px; font-size:10.5px; font-weight:800; color:#fff; background:var(--sal-et-neutral); vertical-align:1px; }
.sal-mzet.et-gut{ background:var(--sal-et-gut); }
.sal-mzet.et-rot{ background:var(--sal-et-rot); }
@media (prefers-reduced-motion: reduce){ .sal-el.frisch{ animation:none; } .sal-undo{ transition:none; } }

/* Reaktion oben rechts an der Karte */
.sal-st{ all:unset; box-sizing:border-box; position:absolute; top:-10px; right:-10px; z-index:3; width:26px; height:26px; border-radius:50%;
  display:grid; place-items:center; background:#fff; box-shadow:0 1px 4px rgba(20,40,70,.22); cursor:pointer; }
.sal-st .material-symbols-rounded{ font-size:22px; font-variation-settings:'FILL' 1; }
.sal-st.st-pos .material-symbols-rounded{ color:#2e7d32; }
.sal-st.st-neu .material-symbols-rounded{ color:#c2891a; }
.sal-st.st-neg .material-symbols-rounded{ color:#d64545; }
.sal-st:focus-visible{ outline:2px solid var(--accent,#f0862f); outline-offset:2px; }
.live .sal-st{ cursor:default; }
.sal-el.mitSt .sal-elx{ right:22px; }
.sal-el.mitSt .sal-ell{ right:46px; }
.sal-el.mitSt .sal-zz{ right:auto; left:-7px; }
.sal-popst .material-symbols-rounded{ font-variation-settings:'FILL' 1; font-size:20px; }
.sal-popst.st-pos .material-symbols-rounded{ color:#2e7d32; }
.sal-popst.st-neu .material-symbols-rounded{ color:#c2891a; }
.sal-popst.st-neg .material-symbols-rounded{ color:#d64545; }
.sal-popi.on{ background:rgba(var(--accent-rgb,240,134,47),.1); }
.sal-mzst{ font-size:16px !important; margin-right:4px; vertical-align:-3px; font-variation-settings:'FILL' 1; }
.sal-mzst.st-pos{ color:#2e7d32; } .sal-mzst.st-neu{ color:#c2891a; } .sal-mzst.st-neg{ color:#d64545; }

/* Variablen in der Palette */
.sal-pvars{ display:flex; flex-wrap:wrap; gap:5px; margin-bottom:12px; }
.sal-pvar{ all:unset; box-sizing:border-box; cursor:grab; display:inline-flex; align-items:center; gap:4px; height:26px; padding:0 9px 0 7px; border-radius:7px;
  background:#fff; box-shadow:inset 0 0 0 1.5px rgba(var(--accent-rgb,240,134,47),.55); font-size:12px; font-weight:700; color:var(--accent-dark,#a3530f); user-select:none; }
.sal-pvar .material-symbols-rounded{ font-size:15px; }
.sal-pvar:hover{ background:rgba(var(--accent-rgb,240,134,47),.08); }
.sal-pvar:active{ cursor:grabbing; }
.sal-pvar:focus-visible{ outline:2px solid var(--accent,#f0862f); outline-offset:2px; }
.sal-vargeist{ position:fixed; left:0; top:0; z-index:2147483000; pointer-events:none; padding:3px 9px; border-radius:7px; background:#fff; color:#a3530f;
  font:700 12.5px "Roboto Flex","Segoe UI",system-ui,sans-serif; box-shadow:0 0 0 1.5px #f0862f, 0 10px 24px -8px rgba(15,23,42,.5); white-space:nowrap; }
.sal-tx.varziel{ background:rgba(var(--accent-rgb,240,134,47),.1); box-shadow:0 0 0 2px var(--accent,#f0862f); }

/* ================= Variablen im Text =================
   Beim Bauen: kleiner Chip mit { } — deutlich als Platzhalter, ohne Farbe im
   Satz. Im Gespraech: zart hinterlegtes Feld. Beide flacher als die Zeile,
   damit zwei Zeilen mit Variablen nicht aneinanderstossen. */
.sal-tx{ white-space:pre-wrap; }
.sal-txv{ cursor:text; line-height:1.72; }
.sal-var{ display:inline-flex; align-items:center; gap:2px; height:17px; padding:0 5px 0 3px; margin:0 1px; border-radius:5px; vertical-align:1px;
  background:#fff; box-shadow:inset 0 0 0 1px #d9e4f0; font-size:11.5px; font-weight:600; line-height:17px; color:#41556d; white-space:nowrap; }
.sal-var .sym{ font-family:"Roboto Mono",ui-monospace,Consolas,monospace; font-size:10px; font-weight:500; color:var(--accent-dark, var(--accent,#f0862f)); }
.live .sal-tx{ line-height:1.8; }
.sal-phf{ height:17px; line-height:17px; min-width:40px; padding:0 5px; margin:0 1px; border:0; border-radius:4px; vertical-align:0;
  background:rgba(var(--accent-rgb,240,134,47),.13); box-shadow:none; font-size:12px; font-weight:600; color:#12233a; }
.sal-phf:focus{ outline:none; background:#fff; box-shadow:inset 0 0 0 1.5px var(--accent,#f0862f); }
.sal-phf::placeholder{ color:#b39275; font-weight:500; font-style:italic; }

/* Gespraechsmodus: Kopf, Antworten, Notiz */
.sal-live .sal-lsel{ max-width:180px; }
.sal-live .crs-gwer{ max-width:320px; }
.sal-antw h3{ display:flex; align-items:center; gap:6px; }
.sal-antw h3 .material-symbols-rounded{ font-size:17px; color:#8a4fd6; }
.sal-aw{ all:unset; box-sizing:border-box; cursor:pointer; display:flex; flex-direction:column; gap:2px; width:100%; margin-top:6px; padding:7px 9px; border-radius:9px;
  box-shadow:inset 0 0 0 1px var(--sal-linie); font-size:12.5px; line-height:1.4; }
.sal-aw:hover{ background:#f7fafd; }
.sal-aw:focus-visible{ outline:2px solid var(--accent,#f0862f); outline-offset:2px; }
.sal-aw .w{ font-size:10.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--sal-mut); }
.sal-aw .q{ font-size:11px; color:var(--sal-mut); }
.sal-mnotiz{ flex:none; display:flex; gap:6px; align-items:center; padding:8px 10px 2px; border-top:1px solid var(--sal-linie); }
.sal-mnotiz .m3-input{ flex:1; min-width:0; height:32px; border:1px solid var(--sal-linie); border-radius:8px; padding:0 9px; font:inherit; font-size:12.5px; box-sizing:border-box; }
.sal-mnotiz .m3-input:focus{ outline:2px solid var(--accent,#f0862f); outline-offset:-1px; border-color:transparent; }
.sal-meinw{ flex:none; margin:2px 8px 8px; align-self:flex-start; }
.sal-zk5{ grid-template-columns:repeat(auto-fit,minmax(96px,1fr)); }
.sal-erg.unterlagen{ background:rgba(47,111,196,.12); color:#2f6fc4; }
.sal-erg.wieder{ background:rgba(194,105,26,.12); color:#96500f; }
.sal-erg.nicht{ background:#eef1f5; color:#6b7a8c; }
.sal-mit{ overflow-y:auto; }
.sal-mit .sal-ml{ flex:1 0 auto; min-height:140px; }
.sal-live{ flex-wrap:wrap; row-gap:6px; }
.sal-live .crs-gwer b{ white-space:nowrap; }


/* ---- SCHWARZ: Modale, Menues und Popups ---- */
/* Aus den hellen Regeln erzeugt, die Flaeche oder Schrift fest gesetzt
   hatten. Die hellen Regeln bleiben unveraendert — hier steht nur, was
   im Schwarzen anders sein muss. */
body.theme-dark .sal-dlg{ color:var(--text); }
body.theme-dark .sal-pop{ color:var(--text); }