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

:root{
  --scrm-linie:#e7eef6; --scrm-linie2:#d9e4f0; --scrm-mut:#8a97a8; --scrm-grund:#f5f8fc;
  --scrm-warm:#c2691a;  --scrm-warm-rgb:194,105,26;
  --scrm-kalt:#b3261e;  --scrm-kalt-rgb:179,38,30;
  --scrm-gut:#0e7c6b;   --scrm-gut-rgb:14,124,107;
}
.scrm-frame{ display:flex; flex-direction:column; overflow:hidden;
  background:var(--scrm-grund); color:#12233a; position:relative; }
.scrm-frame *{ box-sizing:border-box; }

/* ---------- Kopf ---------- */
.scrm-head{ flex:none; display:flex; align-items:center; gap:11px; padding:12px 16px;
  background:#fff; border-bottom:1px solid var(--scrm-linie); }
.scrm-logo{ width:36px; height:36px; border-radius:10px; display:grid; place-items:center; color:#fff; flex:none;
  background:linear-gradient(135deg,#2f7ad6,#22b8db); }
.scrm-logo .material-symbols-rounded{ font-size:21px; }
.scrm-ht h2{ margin:0; font-size:16px; font-weight:800; letter-spacing:-.012em; }
.scrm-pw{ font-size:11px; color:var(--scrm-mut); }
.scrm-pw b{ color:var(--accent-dark, var(--accent,#2f7ad6)); font-weight:700; }
.scrm-suche{ margin-left:20px; width:min(340px,34vw); }
.scrm-akt{ margin-left:auto; display:flex; align-items:center; gap:8px; }
.scrm-x{ width:34px; height:34px; border-radius:9px; display:grid; place-items:center; cursor:pointer;
  color:var(--scrm-mut); border:0; background:none; }
.scrm-x:hover{ background:#eef3f8; color:#12233a; }

/* ---------- Reiter ---------- */
.scrm-tabs{ flex:none; display:flex; gap:2px; padding:0 12px; background:#fff; border-bottom:1px solid var(--scrm-linie); }
.scrm-tab{ all:unset; cursor:pointer; padding:11px 16px 12px; font-size:13.5px; font-weight:700; color:var(--scrm-mut);
  position:relative; display:inline-flex; align-items:center; gap:8px; border-radius:8px 8px 0 0; }
.scrm-tab .material-symbols-rounded{ font-size:19px; }
.scrm-tab:hover{ color:#12233a; background:rgba(15,23,42,.03); }
.scrm-tab.an{ color:var(--accent-dark, var(--accent,#2f7ad6)); }
.scrm-tab.an::after{ content:""; position:absolute; left:10px; right:10px; bottom:0; height:3px;
  border-radius:3px 3px 0 0; background:var(--accent,#2f7ad6); }
.scrm-tab .zahl{ min-width:20px; height:20px; padding:0 6px; border-radius:10px; font-size:11px; font-weight:800;
  display:grid; place-items:center; background:rgba(var(--accent-rgb,47,122,214),.14); color:var(--accent-dark, var(--accent,#2f7ad6)); }
.scrm-tab.an .zahl{ background:var(--accent,#2f7ad6); color:#fff; }

.scrm-body{ flex:1; min-height:0; overflow:auto; padding:16px; }
.scrm-fuss{ flex:none; display:flex; align-items:center; gap:14px; padding:8px 16px; background:#fff;
  border-top:1px solid var(--scrm-linie); font-size:11.5px; color:var(--scrm-mut); }
.scrm-fuss kbd{ font:inherit; font-weight:700; font-size:11px; background:#eef3f8; border-radius:4px;
  padding:2px 6px; color:#41556d; }
.scrm-fuss .sp{ flex:1; }

/* ---------- Bausteine ---------- */
.scrm-karte{ background:#fff; border-radius:12px; box-shadow:inset 0 0 0 1px var(--scrm-linie); }
.scrm-abschnitt{ margin-bottom:18px; }
.scrm-abschnitt > h3{ margin:0 0 9px; font-size:11px; font-weight:800; letter-spacing:.085em; text-transform:uppercase;
  color:var(--scrm-mut); display:flex; align-items:center; gap:8px; }
.scrm-abschnitt > h3 .n{ color:var(--accent-dark, var(--accent,#2f7ad6)); }
.scrm-leer{ padding:26px 20px; text-align:center; color:var(--scrm-mut); font-size:13px; }
.scrm-leer .material-symbols-rounded{ font-size:34px; display:block; margin:0 auto 8px; opacity:.4; }

.scrm-av{ width:38px; height:38px; border-radius:50%; flex:none; display:grid; place-items:center;
  font-size:13px; font-weight:800; color:#fff; letter-spacing:-.02em; }
.scrm-av.klein{ width:28px; height:28px; font-size:11px; }

/* ---------- Heute ---------- */
.scrm-kz{ background:#fff; border-radius:12px; padding:12px 14px; box-shadow:inset 0 0 0 1px var(--scrm-linie); }


/* Die Schleife: erledigt → was kommt danach */
.scrm-danach{ padding:13px 14px 14px; background:rgba(var(--scrm-gut-rgb),.05); border-bottom:1px solid var(--scrm-linie);
  animation:scrmAuf .18s cubic-bezier(.2,.9,.25,1); }
@keyframes scrmAuf{ from{ opacity:0; transform:translateY(-5px); } to{ opacity:1; transform:none; } }
.scrm-dh{ font-size:12.5px; font-weight:700; color:var(--scrm-gut); margin-bottom:9px;
  display:flex; align-items:center; gap:7px; }
.scrm-dz{ display:flex; gap:8px; align-items:flex-start; }
.scrm-dz .m3-field{ flex:1; }
.scrm-dchips{ display:flex; gap:6px; margin-top:9px; flex-wrap:wrap; }

/* ---------- Kontakte ---------- */
/* Drei Spalten ueber die volle Hoehe. Der Rahmen dockt rechts an und ist
   oft schmaler als das Fenster — deshalb Container- statt Medienabfrage. */
.scrm-body.voll{ overflow:hidden; display:flex; flex-direction:column; container-type:inline-size; }
.scrm-spalte{ display:flex; flex-direction:column; min-height:0; overflow:hidden; }
.scrm-skopf{ flex:none; display:flex; align-items:center; gap:8px; min-height:48px; padding:6px 8px 6px 16px;
  border-bottom:1px solid var(--scrm-linie); }
.scrm-skopf .scrm-nh{ margin:0; display:flex; align-items:center; gap:7px; }
.scrm-skopf > button{ margin-left:auto; }
.scrm-skn{ margin-left:auto; display:flex; align-items:center; gap:2px; }
.scrm-nz{ color:var(--accent-dark, var(--accent,#2f7ad6)); letter-spacing:0; }
.scrm-srumpf{ flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; }
.scrm-srumpf.polster{ padding:14px 16px; }
.scrm-ds{ margin-top:auto; padding-top:18px; }
.scrm-leise{ font-size:12.5px; color:var(--scrm-mut); }
.scrm-band{ flex:none; border-bottom:1px solid var(--scrm-linie); }
.scrm-band .scrm-schritt{ margin:4px 16px 14px; }
.scrm-band .scrm-danach{ border-bottom:0; border-top:1px solid var(--scrm-linie); }
.scrm-spalte > .scrm-bk{ border-bottom:0; padding-bottom:12px; }
/* Steht auf der Anrufliste / wuenscht keinen Kontakt — ein Zustand, kein Knopf. */
.scrm-drauf{ display:inline-flex; align-items:center; gap:6px; height:40px; padding:0 14px; border-radius:20px;
  font-size:13px; font-weight:600; white-space:nowrap; color:var(--scrm-gut); background:rgba(var(--scrm-gut-rgb),.09); }
.scrm-drauf.aus{ color:var(--scrm-kalt); background:rgba(var(--scrm-kalt-rgb),.07); }
.scrm-drauf .material-symbols-rounded{ font-size:18px; }
/* Im schmaleren Blatt nehmen die drei Knoepfe dem Namen sonst den Platz,
   und Telefon, Mail und Herkunft stapeln sich einzeln. Lieber brechen die
   Knoepfe in eine eigene Zeile um. */
.scrm-spalte > .scrm-bk{ flex-wrap:wrap; row-gap:10px; }
.scrm-spalte > .scrm-bk > div:nth-child(2){ flex:1 1 auto; }
/* ============================================================
   Das Kontaktblatt faehrt von rechts herein

   Es gab hier einmal ein Zwei-Spalten-Raster (.scrm-zwei), Liste
   links und Blatt rechts. Das ist weg: die Tabelle kann mehr als
   die Liste konnte, und der Einzelne liest sich im Blatt besser
   als in einer Spalte von 280 Pixeln.

   40 Prozent der Fensterbreite, wie Flo es wollte. Die
   Untergrenze greift erst unter etwa 1050 Pixeln -- dort waeren
   40 Prozent keine 420 Pixel mehr, und die Kaufrunden-Kacheln im
   Blatt brauchen so viel. Die Obergrenze ist fuer das Telefon.
   ============================================================ */
#scrmBlattRaum{ position:fixed; inset:0; z-index:1600; pointer-events:none; }
#scrmBlattRaum:not(.an){ visibility:hidden; }

.scrm-blscrim{ position:absolute; inset:0; background:rgba(9,17,32,.4);
  opacity:0; transition:opacity .2s; pointer-events:none; }
#scrmBlattRaum.an .scrm-blscrim{ opacity:1; pointer-events:auto; }

.scrm-blraum{ position:absolute; inset-block:0; inset-inline-end:0;
  width:40vw;
  display:flex; flex-direction:column; background:#fff;
  box-shadow:-14px 0 40px -18px rgba(18,35,58,.6);
  transform:translateX(100%); transition:transform .26s cubic-bezier(.2,0,0,1);
  pointer-events:auto; }
#scrmBlattRaum.an .scrm-blraum{ transform:translateX(0); }
@media (prefers-reduced-motion: reduce){ .scrm-blraum{ transition:none; } }
/* Auf schmalen Schirmen ganz: 40 Prozent waeren dort ein
   Streifen, und was daneben stehen bliebe, kann man ohnehin
   nicht lesen. Dieselbe Schwelle wie beim Firmenblatt. */
@media (max-width:1100px){ .scrm-blraum{ width:100%; } }

/* Die Karte darin FUELLT das Blatt: Rundung und Rahmen waeren
   eine Karte in einer Karte, und die Hoehe muss stehen, damit
   .scrm-srumpf darin rollen kann statt ueberzulaufen. */
.scrm-blraum > .scrm-blatt{ flex:1; min-height:0; border-radius:0; box-shadow:none; }

/* Schliessen sitzt am rechten Rand der Kopfzeile. */
.scrm-blzu{ margin-inline-start:auto; }

.scrm-blatt > .scrm-bk{ border-bottom:0; }
.scrm-ktabs{ flex:none; display:flex; gap:2px; padding:0 10px; border-bottom:1px solid var(--scrm-linie);
  overflow-x:auto; scrollbar-width:none; }
.scrm-ktab{ all:unset; box-sizing:border-box; cursor:pointer; position:relative; display:inline-flex; align-items:center; gap:6px;
  height:42px; padding:0 12px; font-size:13px; font-weight:700; color:var(--scrm-mut); white-space:nowrap; }
.scrm-ktab:hover{ color:#12233a; }
.scrm-ktab.an{ color:var(--accent-dark,var(--accent,#2f7ad6)); }
.scrm-ktab.an::after{ content:""; position:absolute; left:8px; right:8px; bottom:0; height:3px; border-radius:3px 3px 0 0;
  background:var(--accent,#2f7ad6); }
.scrm-ktab .n{ min-width:18px; height:18px; padding:0 5px; border-radius:9px; display:grid; place-items:center;
  font-size:10.5px; font-weight:800; background:#eef3f8; color:#41556d; }
.scrm-ktab.an .n{ background:rgba(var(--accent-rgb,47,122,214),.16); color:var(--accent-dark,var(--accent,#2f7ad6)); }
.scrm-ktab:focus-visible{ outline:2px solid var(--accent,#2f7ad6); outline-offset:-2px; }
.scrm-kinhalt{ background:var(--scrm-grund); }
.scrm-kinhalt > .scrm-band{ background:#fff; }
.scrm-kinhalt > .scrm-band .scrm-schritt{ margin:14px 16px; }
.scrm-kinhalt > .scrm-band .scrm-sperre{ margin-top:14px; }
.scrm-kpol{ padding:14px 16px; }
.scrm-kzwei{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:14px; align-items:start; }
.scrm-kkarte{ padding:12px 14px 14px; }
.scrm-kschmal{ max-width:820px; }
.scrm-kkopf{ display:flex; align-items:center; gap:8px; min-height:30px; margin-bottom:8px; }
.scrm-kkopf .scrm-nh{ margin:0; }
.scrm-kkopf > :nth-child(2){ margin-left:auto; }
.scrm-kzus{ font-size:11.5px; color:var(--scrm-mut); text-align:right; }
.scrm-kgitter{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:10px; }
.scrm-kgitter .scrm-vk{ margin-bottom:0; }
.scrm-kmehr{ margin-top:8px; }
.scrm-kinhalt .scrm-ds{ margin-top:0; padding-top:12px; }
.scrm-dsknoepfe{ display:flex; gap:8px; flex-wrap:wrap; }
/* Score, Rechtsgrundlage, Schlagworte, Qualifizierung */
.scrm-score{ display:inline-flex; align-items:center; gap:4px; height:21px; margin-left:8px; padding:0 8px; border-radius:11px; flex:none;
  font-size:10.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
.scrm-score .material-symbols-rounded{ font-size:13px; }
.scrm-score.heiss{ background:rgba(var(--scrm-kalt-rgb),.1); color:var(--scrm-kalt); }
.scrm-score.warm{ background:rgba(var(--scrm-warm-rgb),.13); color:var(--scrm-warm); }
.scrm-score.kalt{ background:rgba(47,122,214,.11); color:#1f5fae; }
.scrm-score.offen{ background:#eef3f8; color:var(--scrm-mut); }
.scrm-kkopf .scrm-score{ margin-left:auto; }
.scrm-btags{ align-items:center; }
.scrm-basis{ all:unset; box-sizing:border-box; cursor:pointer; display:inline-flex; align-items:center; gap:4px; height:24px; padding:0 10px;
  border-radius:12px; font-size:11.5px; font-weight:700; background:#eef3f8; color:#41556d; }
.scrm-basis .material-symbols-rounded{ font-size:15px; }
.scrm-basis.gut{ background:rgba(var(--scrm-gut-rgb),.1); color:var(--scrm-gut); }
.scrm-basis.warn{ background:rgba(var(--scrm-warm-rgb),.12); color:var(--scrm-warm); }
.scrm-basis.rot{ background:rgba(var(--scrm-kalt-rgb),.09); color:var(--scrm-kalt); }
.scrm-basis.offen{ background:none; box-shadow:inset 0 0 0 1px var(--scrm-linie2); color:var(--scrm-mut); }
.scrm-basis:focus-visible{ outline:2px solid var(--accent,#2f7ad6); outline-offset:2px; }
.scrm-tag{ all:unset; box-sizing:border-box; display:inline-flex; align-items:center; gap:3px; height:24px; padding:0 9px; border-radius:6px;
  background:#eef3f8; font-size:11.5px; font-weight:700; color:#41556d; white-space:nowrap; cursor:pointer; }
.scrm-tag .material-symbols-rounded{ font-size:14px; }
.scrm-tag.an{ background:#12233a; color:#fff; }
.scrm-tag.fest{ cursor:default; padding-right:3px; }
.scrm-tag.fest button{ all:unset; cursor:pointer; display:grid; place-items:center; width:18px; height:18px; border-radius:50%; color:var(--scrm-mut); }
.scrm-tag.fest button:hover{ background:#dde5ee; color:#12233a; }
.scrm-tag.neu{ background:none; box-shadow:inset 0 0 0 1px var(--scrm-linie2); color:var(--scrm-mut); }
.scrm-tag:focus-visible, .scrm-tag.fest button:focus-visible{ outline:2px solid var(--accent,#2f7ad6); outline-offset:2px; }
.scrm-tagfeld{ height:26px; width:140px; border-radius:6px; border:1px solid var(--accent,#2f7ad6); padding:0 8px; font:inherit; font-size:12px; }
.scrm-tagleiste{ flex:none; display:flex; gap:4px; flex-wrap:wrap; padding:8px 12px; border-bottom:1px solid var(--scrm-linie); }
.scrm-tagleiste .scrm-tag{ height:22px; font-size:11px; padding:0 8px; }
.scrm-rnkein.gelb{ color:var(--scrm-warm); }
.scrm-quali{ display:grid; grid-template-columns:96px minmax(0,1fr); gap:8px 10px; align-items:center; }
.scrm-quali .k{ font-size:12px; font-weight:700; color:var(--scrm-mut); }
.scrm-seg{ display:inline-flex; border-radius:9px; box-shadow:inset 0 0 0 1px var(--scrm-linie2); overflow:hidden; width:max-content; max-width:100%; }
.scrm-seg button{ all:unset; box-sizing:border-box; cursor:pointer; height:30px; padding:0 12px; font-size:12.5px; font-weight:600; color:#41556d;
  border-left:1px solid var(--scrm-linie2); }
.scrm-seg button:first-child{ border-left:0; }
.scrm-seg button:hover{ background:#f4f8fc; }
.scrm-seg button.an{ background:rgba(var(--accent-rgb,47,122,214),.16); color:var(--accent-dark,var(--accent,#2f7ad6)); }
.scrm-seg button:focus-visible{ outline:2px solid var(--accent,#2f7ad6); outline-offset:-2px; }

.scrm-row{ display:flex; align-items:center; gap:11px; padding:10px 13px; border-bottom:1px solid var(--scrm-linie);
  cursor:pointer; position:relative; }
.scrm-row:last-child{ border-bottom:0; }
.scrm-row:hover{ background:#fafcfe; }
.scrm-row.an{ background:rgba(var(--accent-rgb,47,122,214),.14); }
.scrm-row.an::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--accent,#2f7ad6); }
.scrm-rt{ flex:1; min-width:0; }
.scrm-rn{ font-weight:700; font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.scrm-rf{ font-size:12px; color:var(--scrm-mut); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.scrm-punkt{ width:7px; height:7px; border-radius:50%; flex:none; }
.scrm-punkt.kalt{ background:var(--scrm-kalt); }
.scrm-punkt.warm{ background:var(--scrm-warm); }
.scrm-punkt.gut{ background:var(--scrm-gut); }

/* ---------- Kontaktblatt ---------- */
.scrm-bk{ display:flex; align-items:flex-start; gap:14px; padding:16px 18px; border-bottom:1px solid var(--scrm-linie); }
.scrm-bk .scrm-av{ width:52px; height:52px; font-size:17px; }
.scrm-bn{ font-size:19px; font-weight:800; letter-spacing:-.018em; }
.scrm-bf{ font-size:13px; color:var(--scrm-mut); margin-top:1px; }
.scrm-bchips{ display:flex; gap:6px; margin-top:9px; flex-wrap:wrap; }
.scrm-bakt{ margin-left:auto; display:flex; gap:7px; flex-wrap:wrap; justify-content:flex-end; }
.scrm-schritt{ margin:14px 18px; padding:13px 15px; border-radius:11px;
  background:rgba(var(--accent-rgb,47,122,214),.06);
  box-shadow:inset 0 0 0 1.5px rgba(var(--accent-rgb,47,122,214),.28);
  display:flex; align-items:center; gap:12px; }
.scrm-schritt.faellig{ background:rgba(var(--scrm-kalt-rgb),.05); box-shadow:inset 0 0 0 1.5px rgba(var(--scrm-kalt-rgb),.3); }
.scrm-sh{ font-size:10.5px; font-weight:800; letter-spacing:.085em; text-transform:uppercase; color:var(--accent-dark, var(--accent,#2f7ad6)); }
.scrm-schritt.faellig .scrm-sh{ color:var(--scrm-kalt); }
.scrm-st{ font-size:14.5px; font-weight:700; margin-top:2px; letter-spacing:-.01em; }
.scrm-sw{ font-size:12px; color:var(--scrm-mut); margin-top:1px; }
.scrm-nh{ font-size:10.5px; font-weight:800; letter-spacing:.085em; text-transform:uppercase; color:var(--scrm-mut); margin:0 0 8px; }
.scrm-nh + .scrm-nh{ margin-top:16px; }

.scrm-er{ display:flex; gap:11px; padding-bottom:15px; position:relative; }
.scrm-er:not(:last-child)::before{ content:""; position:absolute; left:14px; top:30px; bottom:0; width:2px; background:var(--scrm-linie); }
.scrm-eric{ width:28px; height:28px; border-radius:9px; flex:none; display:grid; place-items:center;
  background:#eef3f8; color:var(--scrm-mut); z-index:1; }
.scrm-eric .material-symbols-rounded{ font-size:16px; }
.scrm-eric.mail{ background:rgba(47,122,214,.13); color:#2f7ad6; }
.scrm-eric.anruf{ background:rgba(var(--scrm-gut-rgb),.13); color:var(--scrm-gut); }
.scrm-eric.termin{ background:rgba(109,79,196,.13); color:#6d4fc4; }
.scrm-eric.notiz{ background:#eef1f6; color:#6b7a8c; }
.scrm-ert{ flex:1; min-width:0; }
.scrm-erk{ display:flex; align-items:baseline; gap:8px; }
.scrm-erb{ font-weight:700; font-size:13.5px; }
.scrm-erw{ font-size:11.5px; color:var(--scrm-mut); margin-left:auto; white-space:nowrap; }
.scrm-eri{ font-size:12.5px; color:#41556d; margin-top:2px; }
.scrm-erq{ font-size:11px; color:var(--scrm-mut); margin-top:3px; display:inline-flex; align-items:center; gap:5px; cursor:pointer; }
.scrm-erq:hover{ color:var(--accent-dark, var(--accent,#2f7ad6)); }
.scrm-erq .material-symbols-rounded{ font-size:13px; }

/* ---------- Pipeline ---------- */
.scrm-bahnen{ display:grid; grid-template-columns:repeat(5,minmax(172px,1fr)); gap:10px; align-items:start; }
@media(max-width:1240px){ .scrm-bahnen{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:880px){ .scrm-bahnen{ grid-template-columns:repeat(2,1fr); } }
.scrm-bahn{ background:#eef3f8; border-radius:12px; padding:9px; transition:background .14s, box-shadow .14s; }
.scrm-bahn.vor{ background:transparent; box-shadow:inset 0 0 0 1.5px var(--scrm-linie2); }
.scrm-bahn.vor .scrm-vk{ box-shadow:inset 0 0 0 1px var(--scrm-linie2); background:#fbfdff; }
.scrm-bahn.ziel{ background:rgba(var(--accent-rgb,47,122,214),.10);
  box-shadow:inset 0 0 0 2px rgba(var(--accent-rgb,47,122,214),.45); }
.scrm-bh{ display:flex; align-items:baseline; gap:7px; padding:3px 6px 9px; font-size:12px; font-weight:800; }
.scrm-bh .s{ margin-left:auto; font-size:11.5px; font-weight:800; color:var(--scrm-mut); font-variant-numeric:tabular-nums; }
.scrm-bh .s.aus{ color:#b8c4d2; font-weight:600; }
.scrm-vk{ background:#fff; border-radius:10px; padding:11px 12px; box-shadow:inset 0 0 0 1px var(--scrm-linie);
  margin-bottom:8px; cursor:grab; transition:box-shadow .12s, opacity .12s, transform .12s; }
.scrm-vk:last-of-type{ margin-bottom:0; }
.scrm-vk:hover{ box-shadow:inset 0 0 0 1.5px var(--accent,#2f7ad6); }
.scrm-vk.hebt{ box-shadow:inset 0 0 0 2px var(--accent,#2f7ad6); animation:scrmHebt 2.2s ease-out; }
@keyframes scrmHebt{ 0%,18%{ background:#e8f3fd; } 100%{ background:#fff; } }
@media (prefers-reduced-motion: reduce){ .scrm-vk.hebt{ animation:none; } }
.scrm-vk.zieht{ opacity:.4; transform:scale(.97); cursor:grabbing; }
.scrm-vkt{ font-weight:700; font-size:13px; letter-spacing:-.008em; }
.scrm-vkw{ font-size:12px; color:var(--scrm-mut); margin-top:2px; display:flex; align-items:center; gap:6px; }
.scrm-vkf{ display:flex; align-items:center; gap:8px; margin-top:8px; }
.scrm-vkwert{ font-weight:800; font-size:13px; font-variant-numeric:tabular-nums; }
.scrm-vktag{ margin-left:auto; font-size:11px; font-weight:700; color:var(--scrm-mut); }
.scrm-vktag.rot{ color:var(--scrm-kalt); }
.scrm-badd{ width:100%; margin-top:2px; justify-content:center; color:var(--scrm-mut)!important; }
.scrm-badd:hover{ color:var(--accent-dark, var(--accent,#2f7ad6))!important; }

/* ---------- Schub: schmales Blatt von rechts ---------- */
.scrm-scrim{ position:absolute; inset:0; background:rgba(9,17,32,.34); z-index:40; opacity:0; pointer-events:none;
  transition:opacity .2s; }
.scrm-scrim.an{ opacity:1; pointer-events:auto; }
.scrm-schub{ position:absolute; top:0; right:0; bottom:0; width:392px; max-width:92%; background:#fff; z-index:41;
  display:flex; flex-direction:column; box-shadow:-22px 0 60px -30px rgba(9,17,32,.6);
  transform:translateX(102%); transition:transform .24s cubic-bezier(.2,.9,.25,1); }
.scrm-schub.an{ transform:none; }
.scrm-sk{ flex:none; display:flex; align-items:center; gap:11px; padding:15px 18px; border-bottom:1px solid var(--scrm-linie); }
.scrm-sk h3{ margin:0; font-size:16px; font-weight:800; letter-spacing:-.014em; flex:1; }
.scrm-sb{ flex:1; min-height:0; overflow:auto; padding:18px; }
.scrm-sf{ flex:none; display:flex; gap:9px; padding:13px 18px; border-top:1px solid var(--scrm-linie); background:#fbfdff; }
.scrm-sf .m3-btn{ flex:1; }
.scrm-gruppe{ display:flex; flex-direction:column; gap:15px; margin-bottom:20px; }
.scrm-gruppe.zwei{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.scrm-gh{ font-size:10.5px; font-weight:800; letter-spacing:.085em; text-transform:uppercase; color:var(--scrm-mut); margin:0 0 10px; }
.scrm-gh .zusatz{ font-weight:600; text-transform:none; letter-spacing:0; }
.scrm-rat{ display:flex; align-items:center; gap:8px; margin-top:-7px; font-size:12px; color:var(--scrm-mut); flex-wrap:wrap; }
.scrm-rat .m3-chip{ height:26px; font-size:11.5px; }

/* ============================================================
   Kontaktpflege und Datenschutz
   ============================================================ */
.scrm-bnz{ display:flex; align-items:center; gap:2px; }
.scrm-rnkein{ font-size:15px; color:var(--scrm-kalt); vertical-align:-3px; margin-left:4px; }
.scrm-sperre{ display:flex; align-items:flex-start; gap:10px; margin:4px 16px 10px; padding:11px 13px; border-radius:11px;
  font-size:12.5px; line-height:1.45; color:#5c1a15; background:rgba(var(--scrm-kalt-rgb),.06);
  box-shadow:inset 0 0 0 1.5px rgba(var(--scrm-kalt-rgb),.28); }
.scrm-sperre .material-symbols-rounded{ font-size:19px; color:var(--scrm-kalt); }
.scrm-sperre b{ color:var(--scrm-kalt); }
.scrm-band .scrm-sperre + .scrm-schritt{ margin-top:0; }
.scrm-ds{ display:flex; flex-direction:column; gap:9px; }
.scrm-ds > .scrm-nh{ margin:0; }
.scrm-dsb{ background:#fff; border-radius:11px; box-shadow:inset 0 0 0 1px var(--scrm-linie); padding:10px 12px; }
.scrm-dszweck{ font-size:11.5px; color:#41556d; line-height:1.55; }
.scrm-dszweck span{ color:var(--scrm-mut); }
.scrm-link{ all:unset; cursor:pointer; color:var(--accent-dark, var(--accent,#2f7ad6)); font-weight:700; }
.scrm-link:hover{ text-decoration:underline; }
.scrm-link:focus-visible{ outline:2px solid var(--accent,#2f7ad6); outline-offset:2px; }
.scrm-dsz{ display:flex; align-items:flex-start; gap:10px; }
.scrm-dsz .t{ flex:1; min-width:0; }
.scrm-dsz b{ display:block; font-size:12.5px; }
.scrm-dsz small{ display:block; margin-top:2px; font-size:11.5px; line-height:1.4; color:var(--scrm-mut); }
/* MD3-Schalter */
.scrm-schalter{ all:unset; box-sizing:border-box; cursor:pointer; flex:none; position:relative; width:46px; height:28px;
  margin-top:2px; border-radius:14px; background:#e3e9f0; box-shadow:inset 0 0 0 2px #b9c6d4; transition:background .15s; }
.scrm-schalter::after{ content:""; position:absolute; top:6px; left:6px; width:16px; height:16px; border-radius:50%;
  background:#7d8da0; transition:all .15s; }
.scrm-schalter[aria-checked="true"]{ background:var(--scrm-kalt); box-shadow:none; }
.scrm-schalter[aria-checked="true"]::after{ top:4px; left:22px; width:20px; height:20px; background:#fff; }
.scrm-schalter:focus-visible{ outline:2px solid var(--accent,#2f7ad6); outline-offset:2px; }
.m3-btn.scrm-gefahr{ color:#ba1a1a; }
.m3-btn.scrm-gefahr:hover{ background:rgba(186,26,26,.07); }
.m3-btn.scrm-rot{ background:#ba1a1a; color:#fff; }

/* Papierkorb */
.scrm-korbzeile{ all:unset; box-sizing:border-box; flex:none; display:flex; align-items:center; gap:9px; padding:10px 14px;
  border-top:1px solid var(--scrm-linie); background:#fbfdff; font-size:12.5px; font-weight:600; color:#41556d; cursor:pointer; }
.scrm-korbzeile:hover{ background:#f4f8fc; }
.scrm-korbzeile:focus-visible{ outline:2px solid var(--accent,#2f7ad6); outline-offset:-2px; }
.scrm-korbzeile .material-symbols-rounded{ font-size:18px; color:var(--scrm-mut); }
.scrm-korbzeile .n{ margin-left:auto; min-width:20px; height:20px; padding:0 6px; border-radius:10px; background:#eef3f8;
  font-size:11px; font-weight:800; display:grid; place-items:center; }
.scrm-korbhin{ flex:none; padding:11px 14px; border-bottom:1px solid var(--scrm-linie); background:#fff8f1;
  font-size:12px; line-height:1.45; color:#41556d; }
.scrm-kz{ padding:11px 14px; border-bottom:1px solid var(--scrm-linie); }
.scrm-kzw{ margin:3px 0 8px; font-size:11px; color:var(--scrm-mut); }
.scrm-kza{ display:flex; gap:6px; flex-wrap:wrap; }

/* Dialog im Rahmen — sieht aus wie vkFrage */
.scrm-dlgov{ position:absolute; inset:0; z-index:60; display:none; align-items:center; justify-content:center;
  background:rgba(9,17,32,.42); }
.scrm-dlgov.an{ display:flex; }
.scrm-dlg{ width:460px; max-width:calc(100% - 32px); padding:20px 20px 15px; border-radius:16px; background:var(--panel);
  box-shadow:0 26px 60px -18px rgba(9,17,32,.5); }
.scrm-dlgk{ display:flex; gap:13px; align-items:flex-start; }
.scrm-dlgic{ width:38px; height:38px; border-radius:11px; flex:none; display:grid; place-items:center;
  background:rgba(186,26,26,.11); color:#ba1a1a; }
.scrm-dlgic.ruhig{ background:rgba(var(--accent-rgb,47,122,214),.13); color:var(--accent-dark, var(--accent,#2f7ad6)); }
.scrm-dlgic .material-symbols-rounded{ font-size:21px; }
.scrm-dlgt{ margin:1px 0 5px; font-size:15.5px; font-weight:800; letter-spacing:-.01em; text-wrap:balance; }
.scrm-dlgu{ margin:0; font-size:13px; line-height:1.5; color:#64748b; }
.scrm-umfang{ margin-top:12px; padding:10px 12px; border-radius:10px; background:#f6f8fb; font-size:12.5px; line-height:1.55; color:#41556d; }
.scrm-wahl{ display:flex; flex-direction:column; gap:8px; margin-top:12px; }
.scrm-wz{ display:flex; gap:11px; align-items:flex-start; padding:11px 12px; border-radius:11px; cursor:pointer;
  box-shadow:inset 0 0 0 1px var(--scrm-linie2); }
.scrm-wz:hover{ background:#fafcfe; }
.scrm-wz.an{ background:rgba(var(--accent-rgb,47,122,214),.05); box-shadow:inset 0 0 0 2px var(--accent,#2f7ad6); }
.scrm-wz.rot.an{ background:rgba(186,26,26,.04); box-shadow:inset 0 0 0 2px #ba1a1a; }
.scrm-wz input{ flex:none; width:17px; height:17px; margin:2px 0 0; accent-color:var(--accent-dark, var(--accent,#2f7ad6)); }
.scrm-wz.rot input{ accent-color:#ba1a1a; }
.scrm-wz b{ display:block; font-size:13px; }
.scrm-wz small{ display:block; margin-top:2px; font-size:12px; line-height:1.45; color:#64748b; }
.scrm-dlgf{ display:flex; align-items:center; gap:8px; margin-top:16px; }
.scrm-tast{ margin-right:auto; font-size:11px; color:#94a3b8; }
.scrm-tast kbd{ font:inherit; font-weight:700; padding:2px 5px; border-radius:5px; background:#f1f3f8; color:#64748b; }

/* Leiste mit Rueckgaengig — die Meldungen der Workstation koennen keinen Knopf */
.scrm-snack{ position:absolute; left:50%; bottom:52px; z-index:70; display:flex; align-items:center; gap:14px;
  max-width:calc(100% - 40px); 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; }
.scrm-snack.an{ opacity:1; pointer-events:auto; transform:translateX(-50%); }
.scrm-snack button{ all:unset; cursor:pointer; padding:6px 10px; border-radius:7px; color:#ffc08c; font-weight:700; }
.scrm-snack button:hover{ background:rgba(255,255,255,.08); }
.scrm-snack button:focus-visible{ outline:2px solid #ffc08c; outline-offset:1px; }
.scrm-snack button[hidden]{ display:none; }
@media (prefers-reduced-motion: reduce){ .scrm-schalter, .scrm-schalter::after, .scrm-snack{ transition:none; } }

/* Heute: wie viele Schritte wegen Widerspruch ruhen */
.scrm-ruhen{ display:flex; align-items:center; gap:8px; margin-top:4px; padding:10px 14px; border-radius:11px;
  font-size:12.5px; color:#5c1a15; background:rgba(var(--scrm-kalt-rgb),.05); box-shadow:inset 0 0 0 1px rgba(var(--scrm-kalt-rgb),.18); }
.scrm-ruhen .material-symbols-rounded{ font-size:18px; color:var(--scrm-kalt); }

/* Papierkorb: Gruppen fuer Kontakte, Firmen und Leitfaeden */
.scrm-korbgr{ padding:12px 14px 6px; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--scrm-mut); }
.scrm-korbgr .n{ font-weight:700; letter-spacing:0; margin-left:4px; }
/* Loeschen im Kopf: ruhig, rot erst beim Hinzeigen */
.m3-icon-btn.scrm-weg{ color:var(--scrm-mut); }
.m3-icon-btn.scrm-weg:hover{ color:#ba1a1a; background:rgba(186,26,26,.08); }

/* Mehrfachauswahl in der Kontaktliste */
.scrm-rcheck{ all:unset; box-sizing:border-box; flex:none; width:24px; height:24px; margin:0 -4px 0 -6px; border-radius:6px; display:grid; place-items:center;
  cursor:pointer; color:#b4bfcc; }
.scrm-rcheck .material-symbols-rounded{ font-size:20px; }
.scrm-rcheck:hover{ color:#5b6b7d; background:rgba(16,24,40,.05); }
.scrm-rcheck.an, .scrm-rcheck.teil{ color:var(--accent-dark, var(--accent,#2f7ad6)); }
.scrm-rcheck:focus-visible{ outline:2px solid var(--accent,#2f7ad6); outline-offset:1px; }
.scrm-rcheck[disabled]{ visibility:hidden; }
.scrm-skopf .scrm-rcheck{ margin:0 2px 0 -8px; }
.scrm-row.markiert{ background:rgba(var(--accent-rgb,47,122,214),.07); }
.scrm-row.markiert.an{ background:rgba(var(--accent-rgb,47,122,214),.16); }
.scrm-wahlkopf{ background:rgba(var(--accent-rgb,47,122,214),.08); }
.scrm-wahlzahl{ font-size:13px; font-weight:700; color:#12233a; white-space:nowrap; }
.scrm-wahlkopf .scrm-skn{ gap:0; }
.scrm-mfeld{ display:flex; flex-direction:column; gap:5px; margin-top:14px; font-size:11.5px; font-weight:700; color:#41556d; }
.scrm-mtag{ display:block; width:100%; height:38px; margin-top:14px; border:1px solid var(--scrm-linie2); border-radius:10px; padding:0 10px;
  font:inherit; font-size:13.5px; box-sizing:border-box; background:#fff; }
.scrm-mtag:focus{ outline:2px solid var(--accent,#2f7ad6); outline-offset:-1px; border-color:transparent; }
.scrm-mtags{ padding:8px 0 0; border:0; background:none; }
.scrm-wahlkopf{ flex-wrap:wrap; row-gap:2px; }

/* ============================================================
   Leads / Deals  (Praefix cld)
   Die Seite ersetzt die fruehere Pipeline. Der Trichter zaehlt Leads und
   die fuenf Phasen in EINER Reihe; darunter zwei Reiter. Die Bahnen und
   die Dealkarte darin sind unveraendert (siehe .scrm-bahnen / .scrm-vk).
   ============================================================ */
.cld-trichter{ display:flex; align-items:stretch; gap:6px; margin:0 0 12px; }
.cld-ts{ all:unset; box-sizing:border-box; cursor:pointer; flex:1; min-width:0; position:relative;
  background:#fff; border-radius:11px; padding:10px 12px; box-shadow:inset 0 0 0 1px var(--scrm-linie); }
.cld-ts:hover{ box-shadow:inset 0 0 0 1px var(--scrm-linie2); }
.cld-ts:focus-visible{ outline:2px solid var(--accent,#f0862f); outline-offset:2px; }
.cld-ts .n{ font-size:11px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; color:var(--scrm-mut); }
.cld-ts .z{ font-size:22px; font-weight:800; letter-spacing:-.02em; margin-top:3px; font-variant-numeric:tabular-nums; }
.cld-ts .w{ font-size:11.5px; font-weight:700; color:var(--scrm-mut); font-variant-numeric:tabular-nums; }
.cld-ts.lead .z{ color:#2f7ad6; }
.cld-ts.gew .z{ color:#1f7a4d; }
.cld-ts .pf{ position:absolute; right:-9px; top:50%; transform:translateY(-50%); z-index:2;
  width:18px; height:18px; border-radius:50%; background:var(--scrm-grund); display:grid; place-items:center; color:#b8c6d6; }
.cld-ts:last-child .pf{ display:none; }
.cld-ts .pf .material-symbols-rounded{ font-size:15px; }

.cld-tabs{ display:flex; gap:2px; border-bottom:1px solid var(--scrm-linie); margin-bottom:14px; }
.cld-tab{ all:unset; cursor:pointer; padding:11px 16px 12px; font-size:13.5px; font-weight:700;
  color:var(--scrm-mut); position:relative; }
.cld-tab:hover{ color:#12233a; }
.cld-tab.an{ color:var(--accent-dark, var(--accent,#2f7ad6)); }
.cld-tab.an::after{ content:""; position:absolute; left:10px; right:10px; bottom:0; height:3px;
  border-radius:3px 3px 0 0; background:var(--accent,#2f7ad6); }
.cld-tab:focus-visible{ outline:2px solid var(--accent,#f0862f); outline-offset:-3px; }
.cld-tab .k{ display:inline-grid; place-items:center; min-width:19px; height:19px; padding:0 5px; margin-left:7px;
  border-radius:10px; background:#e4ebf3; color:#5d6f83; font-size:10.5px; font-weight:800; }
.cld-tab.an .k{ background:rgba(var(--accent-rgb,240,134,47),.18); color:var(--accent-dark,#a3530f); }

.cld-filter{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
.cld-chip{ all:unset; box-sizing:border-box; cursor:pointer; display:inline-flex; align-items:center; gap:6px;
  height:30px; padding:0 12px; border-radius:15px; font-size:12.5px; font-weight:700; color:#5d6f83;
  background:#fff; box-shadow:inset 0 0 0 1px var(--scrm-linie); }
.cld-chip:hover{ background:#f6f9fc; }
.cld-chip.an{ background:rgba(var(--accent-rgb,240,134,47),.15); color:var(--accent-dark,#a3530f);
  box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb,240,134,47),.4); }
.cld-chip .material-symbols-rounded{ font-size:16px; }
.cld-chip:focus-visible{ outline:2px solid var(--accent,#f0862f); outline-offset:2px; }
.cld-tr{ width:1px; height:20px; background:var(--scrm-linie2); margin:0 5px; }

/* Die Liste. Spalte 1 ist die Quelle, Spalte 6 der geschaetzte Jahreswert -
   die Kopfzeile sagt genau das, sonst zeigt sie auf die falsche Spalte. */
.cld-liste{ background:#fff; border-radius:12px; box-shadow:inset 0 0 0 1px var(--scrm-linie); overflow:hidden; }
.cld-kopf, .cld-z{ display:grid;
  grid-template-columns:58px minmax(150px,1.5fr) minmax(120px,1.2fr) minmax(104px,1fr) 92px 92px 122px;
  gap:10px; align-items:center; }
.cld-kopf{ padding:9px 14px; background:#f3f7fb; border-bottom:1px solid var(--scrm-linie);
  font-size:10.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--scrm-mut); }
.cld-z{ padding:11px 14px; border-bottom:1px solid var(--scrm-linie); font-size:13px; cursor:pointer; }
.cld-z:last-child{ border-bottom:0; }
.cld-z:hover{ background:#f8fbfe; }
.cld-z.aus{ opacity:.55; }
.cld-qic{ width:30px; height:30px; border-radius:9px; display:grid; place-items:center; color:#fff; }
.cld-qic .material-symbols-rounded{ font-size:17px; }
.cld-qic.q-web{ background:#2f7ad6; } .cld-qic.q-messe{ background:#7a58c8; }
.cld-qic.q-empf{ background:#1f7a4d; } .cld-qic.q-anruf{ background:#c2691a; }
.cld-qic.q-import{ background:#5d6f83; }
.cld-fn{ font-weight:700; letter-spacing:-.008em; }
.cld-sub{ font-size:11.5px; color:var(--scrm-mut); }
.cld-thema{ color:#41556d; }
.cld-zeit{ font-size:12px; color:var(--scrm-mut); font-variant-numeric:tabular-nums; }
.cld-wert{ font-size:12.5px; font-weight:700; font-variant-numeric:tabular-nums; }
.cld-score{ display:inline-grid; place-items:center; width:17px; height:17px; border-radius:5px;
  margin-left:7px; vertical-align:1px; font-size:10px; font-weight:800; }
.cld-score.a{ background:rgba(31,122,77,.14); color:#1f7a4d; }
.cld-score.b{ background:rgba(var(--accent-rgb,240,134,47),.16); color:var(--accent-dark,#a3530f); }
.cld-score.c{ background:#eef2f7; color:#7d8ea1; }
.cld-stat{ font-size:11px; font-weight:800; padding:2px 8px; border-radius:20px; }
.cld-stat.neu{ background:rgba(47,122,214,.14); color:#2f7ad6; }
.cld-stat.pruef{ background:rgba(var(--accent-rgb,240,134,47),.16); color:var(--accent-dark,#a3530f); }
.cld-stat.weg{ background:#eef2f7; color:var(--scrm-mut); }
.cld-tat{ display:flex; gap:5px; justify-content:flex-end; }
.cld-leer{ padding:34px 14px; text-align:center; color:var(--scrm-mut); font-size:13px; }
.cld-leer.klein{ padding:18px 8px; font-size:12.5px; }

.cld-mini{ all:unset; box-sizing:border-box; cursor:pointer; height:28px; padding:0 10px; border-radius:14px;
  font-size:12px; font-weight:700; display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }
.cld-mini.gut{ background:var(--accent,#f0862f); color:#fff; }
.cld-mini.gut:hover{ filter:brightness(.94); }
.cld-mini.weg{ color:var(--scrm-mut); box-shadow:inset 0 0 0 1px var(--scrm-linie2); background:#fff; }
.cld-mini.weg:hover{ color:var(--scrm-kalt); box-shadow:inset 0 0 0 1px rgba(var(--scrm-kalt-rgb),.35); }
.cld-mini .material-symbols-rounded{ font-size:15px; }
.cld-mini:focus-visible{ outline:2px solid var(--accent,#f0862f); outline-offset:2px; }

/* Das Zeichen hinter dem Firmennamen: verknuepft, Dublette, neu. */
.cld-m{ display:inline-flex; align-items:center; gap:3px; margin-left:7px; vertical-align:1px;
  font-size:10px; font-weight:800; border-radius:11px; padding:2px 7px 2px 5px; }
.cld-m .material-symbols-rounded{ font-size:13px; }
.cld-m.an{ background:rgba(31,122,77,.13); color:#1f7a4d; }
.cld-m.tipp{ background:rgba(var(--accent-rgb,240,134,47),.16); color:var(--accent-dark,#a3530f); }
.cld-m.neu{ background:#eef2f7; color:var(--scrm-mut); }

/* Verknuepfung im Schub */
.cld-vkbox{ display:flex; flex-direction:column; gap:7px; margin-bottom:6px; }
.cld-vz{ display:flex; align-items:center; gap:10px; padding:10px 11px; border-radius:10px;
  background:#f6f9fc; box-shadow:inset 0 0 0 1px var(--scrm-linie); }
.cld-vz > .material-symbols-rounded{ font-size:20px; color:#8ea4bd; flex:none; }
.cld-vz.an{ background:rgba(31,122,77,.07); box-shadow:inset 0 0 0 1px rgba(31,122,77,.28); }
.cld-vz.an > .material-symbols-rounded{ color:#1f7a4d; }
.cld-vz.tipp{ background:rgba(var(--accent-rgb,240,134,47),.09);
  box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb,240,134,47),.4); }
.cld-vz.tipp > .material-symbols-rounded{ color:var(--accent-dark,#a3530f); }
.cld-vz.aus{ opacity:.6; }
.cld-vn{ min-width:0; flex:1; }
.cld-vn b{ display:block; font-size:13px; font-weight:700; letter-spacing:-.008em; }
.cld-vn small{ display:block; font-size:11.5px; color:var(--scrm-mut); margin-top:1px; }
.cld-feld{ display:flex; gap:10px; padding:9px 0; border-bottom:1px solid var(--scrm-linie); font-size:13px; }
.cld-feld .b{ width:130px; flex:none; color:var(--scrm-mut); font-size:12px; font-weight:600; }
.cld-feld .v{ min-width:0; }
.cld-notiz{ margin-top:14px; background:#f6f9fc; border-radius:10px; padding:11px 12px;
  font-size:12.5px; color:#41556d; line-height:1.55; }
.cld-hint{ margin:0 0 12px; font-size:13px; color:var(--scrm-mut); line-height:1.5; }

/* Auswahl aus dem Bestand */
.cld-pickfeld{ display:flex; align-items:center; gap:8px; height:40px; padding:0 12px; margin-bottom:10px;
  border-radius:20px; background:#f1f5f9; color:var(--scrm-mut); }
.cld-pickfeld .material-symbols-rounded{ font-size:19px; }
.cld-pickfeld input{ flex:1; min-width:0; border:0; outline:0; background:transparent; font:inherit;
  font-size:13.5px; color:#12233a; }
.cld-pickliste{ max-height:320px; overflow:auto; display:flex; flex-direction:column; gap:3px; }
.cld-pz{ all:unset; box-sizing:border-box; cursor:pointer; display:flex; align-items:center; gap:10px;
  padding:9px 10px; border-radius:9px; }
.cld-pz:hover{ background:#f2f6fa; }
.cld-pz:focus-visible{ outline:2px solid var(--accent,#f0862f); outline-offset:-2px; }
.cld-pz > .material-symbols-rounded:first-child{ font-size:19px; color:#8ea4bd; flex:none; }
.cld-pz > .material-symbols-rounded:last-child{ font-size:18px; color:#c2cedb; flex:none; }
.cld-wahl{ display:flex; flex-direction:column; gap:5px; }
.cld-wahl button{ all:unset; cursor:pointer; padding:9px 11px; border-radius:9px; font-size:13px;
  font-weight:600; color:#41556d; }
.cld-wahl button:hover{ background:#f2f6fa; }
.cld-wahl button.an{ background:rgba(var(--accent-rgb,240,134,47),.15);
  color:var(--accent-dark,#a3530f); font-weight:700; }

.cld-schub{ flex:1; }


/* ============================================================
   DER KONTAKT-UEBERBLICK
   previews/kontakt-ueberblick.html, Flo am 11.11.2026

   Zwei Haelften mit verschiedenem Charakter: oben Gemessenes,
   das wie eine Tabelle aussieht, weil es Zahlen sind -- unten
   Freitexte, die wie Textfelder aussehen, weil man
   hineinschreibt. Wer das gleich gestaltet, laedt zum
   Hineinschreiben ins Gemessene ein.
   ============================================================ */

/* ---------- Gemessen ---------- */
.scrm-mess{ display:grid; gap:1px; background:var(--scrm-linie);
  border:1px solid var(--scrm-linie); border-radius:9px; overflow:hidden; }
.scrm-mz{ display:grid; grid-template-columns:26px 108px minmax(0,1fr); gap:9px;
  align-items:baseline; padding:9px 11px; background:#fff; }
.scrm-mz > .material-symbols-rounded{ font-size:17px; color:var(--scrm-mut); align-self:center; }
.scrm-mk{ font-size:11.5px; color:var(--scrm-mut); }
.scrm-mw{ font-size:13px; min-width:0; }
.scrm-mw b{ font-weight:700; }
.scrm-mw .neben{ color:var(--scrm-mut); font-weight:400; }
/* Nur zwei Zustaende faerben sich: nie geantwortet und
   Funkstille. Faerbte man mehr, hiesse rot nichts mehr. */
.scrm-mw.achtung b{ color:var(--scrm-kalt,#b3261e); }
.scrm-zahlen{ font-variant-numeric:tabular-nums; }

/* ---------- Die Kaufrunde: eine Zeile ----------
   Gestrichelt, weil sie zu etwas anderem gehoert -- zum Deal.
   Hier steht nur, DASS es sie gibt. */
.scrm-kr{ margin-top:9px; display:flex; align-items:center; gap:8px; padding:8px 11px;
  border:1px dashed var(--scrm-linie2,#cfe0ee); border-radius:9px;
  font-size:12.5px; color:var(--scrm-text2,#36506b); }
.scrm-kr > .material-symbols-rounded{ font-size:17px; color:var(--scrm-mut); flex:none; }
.scrm-kr > span{ min-width:0; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.scrm-krbtn{ all:unset; cursor:pointer; margin-left:auto; white-space:nowrap;
  font-size:12px; font-weight:650; color:var(--accent-dark,var(--accent,#2f7ad6));
  padding:3px 6px; border-radius:6px; }
.scrm-krbtn:hover{ background:rgba(var(--accent-rgb,47,122,214),.1); }

/* ---------- Einschaetzung: Freitext ---------- */
.scrm-ein{ display:grid; gap:9px; }
/* Der Kasten muss AUSSEHEN wie etwas, in das man schreibt.
   Flo am 11.11.: 'wo kann ich das erfassen' -- mit Pfeilen auf
   alle vier. Sie waren nie kaputt, sie sahen nur aus wie
   Beschriftungen mit grauem Text darunter. */
.scrm-ef{ border:1px solid var(--scrm-linie); border-radius:9px; overflow:hidden;
  background:#fff; cursor:text; transition:border-color .12s, background .12s; }
.scrm-ef:hover{ border-color:rgba(var(--accent-rgb,47,122,214),.5);
  background:rgba(var(--accent-rgb,47,122,214),.025); }
.scrm-ef:focus-within{ border-color:var(--accent,#2f7ad6);
  background:#fff; box-shadow:0 0 0 3px rgba(var(--accent-rgb,47,122,214),.1); }

/* Solange nichts drinsteht: die Aufforderung. Sie verschwindet,
   sobald der Cursor im Feld ist -- dann weiss man es ja. */
.scrm-efneu{ margin-left:auto; display:inline-flex; align-items:center; gap:3px;
  font-size:10.5px; font-weight:700; letter-spacing:.01em;
  color:var(--accent-dark,var(--accent,#2f7ad6)); opacity:.8; transition:opacity .12s; }
.scrm-efneu .material-symbols-rounded{ font-size:13px; }
.scrm-ef:hover .scrm-efneu{ opacity:1; }
.scrm-ef:focus-within .scrm-efneu{ opacity:0; }
.scrm-efk{ display:flex; align-items:center; gap:7px; padding:8px 11px 0; }
.scrm-efk .t{ font-size:11.5px; font-weight:700; color:var(--scrm-text2,#36506b); }
.scrm-efk .wann{ margin-left:auto; font-size:10.5px; color:var(--scrm-mut); }
/* Ueber sechzig Tage faerbt sich das Datum. Eine Einschaetzung
   von vorletztem Jahr ist schlimmer als gar keine: man glaubt
   ihr, ohne zu pruefen. */
.scrm-efk .wann.alt{ color:var(--scrm-warn,#b45309); font-weight:650; }
.scrm-ef textarea{ display:block; width:100%; min-height:40px; padding:4px 11px 10px;
  border:0; outline:0; resize:none; font:inherit; font-size:13px; line-height:1.5;
  color:var(--scrm-tinte,#12233a); background:transparent; overflow:hidden; }
.scrm-ef textarea::placeholder{ color:#b6c7d6; }
.scrm-einfuss{ margin-top:12px; padding-top:10px; border-top:1px solid var(--scrm-linie);
  display:flex; align-items:center; gap:7px; font-size:11.5px; color:var(--scrm-mut); }
.scrm-einfuss .material-symbols-rounded{ font-size:15px; }