/* ============================================================
   CRM Suite — Rahmen und Navigation links.
   Der Rahmen heisst .crs-frame und steht so auch in DOCK_REG,
   sonst findet der Resizer ihn nicht. Die Inhalte bringen ihre
   eigenen Blaetter mit (crm.css, sales-suite.css); hier steht nur,
   was den gemeinsamen Rahmen ausmacht.
   HELL zuerst — der Inhalt der Workstation ist immer hell.
   ============================================================ */
#crsOverlay{ position:fixed; inset:0; z-index:1400; display:none; }
#crsOverlay[data-open="true"]{ display:block; }
#crsOverlay .material-symbols-rounded{ vertical-align:middle; line-height:1; }

.crs-frame{ display:grid; grid-template-columns:240px minmax(0,1fr); overflow:hidden;
  background:var(--scrm-grund,#f5f8fc); color:#12233a; position:relative;
  transition:grid-template-columns .22s cubic-bezier(.2,.8,.2,1); }
.crs-frame *{ box-sizing:border-box; }
.crs-frame.eng{ grid-template-columns:76px minmax(0,1fr); }
@media (prefers-reduced-motion: reduce){ .crs-frame{ transition:none; } }

/* ---------- Navigation ---------- */
.crs-nav{ position:relative; display:flex; flex-direction:column; min-height:0; overflow:hidden;
  background:#fff; padding:12px 10px; }
/* Angedockt: ein feiner Ring mit leichtem Schatten, damit die runden Ecken
   auch vor einer hellen Zelle als rund zu sehen sind. */
body #crsOverlay > .crs-frame{
  box-shadow:inset 1px 0 0 0 rgba(var(--ck-tint-rgb, 47,122,214), .32), 0 0 0 1px rgba(18,35,58,.10), -10px 0 26px -14px rgba(18,35,58,.38);
}
body.cellapp-solo #crsOverlay > .crs-frame{ box-shadow:none; }
.crs-marke{ display:flex; align-items:center; gap:10px; padding:4px 6px 14px; min-width:0; }
.crs-logo{ width:36px; height:36px; border-radius:11px; flex:none; display:grid; place-items:center; color:#fff;
  background:linear-gradient(135deg,var(--accent,#f0862f),#e0564f); }
.crs-logo .material-symbols-rounded{ font-size:21px; }
.crs-mt{ min-width:0; }
.crs-mt b{ display:block; font-size:15.5px; font-weight:800; letter-spacing:-.015em; white-space:nowrap; }
.crs-mt small{ display:block; font-size:10px; color:var(--scrm-mut,#8a97a8); white-space:nowrap; }
.crs-mt small em{ font-style:normal; font-weight:700; color:var(--accent-dark,#a3530f); }
.crs-navliste{ flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; }
/* Umsortieren: nichts davon ist zu sehen, solange niemand zieht. */
.crs-navliste{ position:relative; }
.crs-nv.crs-zieht{ position:relative; z-index:3; opacity:.96; background:rgba(255,255,255,.92);
  box-shadow:0 10px 24px -10px rgba(16,35,60,.5); cursor:grabbing; }
.crs-nvmarke{ position:absolute; left:8px; right:8px; height:2px; border-radius:2px; z-index:2;
  background:rgb(var(--crs-tint, 47,122,214)); pointer-events:none; }
.crs-gruppe{ all:unset; box-sizing:border-box; cursor:pointer; display:flex; align-items:center; gap:4px; width:calc(100% - 12px);
  margin:10px 6px 5px; padding:3px 6px; border-radius:7px; font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:#a6b2c1; white-space:nowrap; }
.crs-gruppe > span:first-child{ flex:1; overflow:hidden; text-overflow:ellipsis; }
/* Ohne das wuerde die Grossschreibung aus dem Symbol den Text EXPAND_MORE machen. */
.crs-gruppe .material-symbols-rounded{ flex:none; font-size:16px; text-transform:none; letter-spacing:normal; transition:transform .15s; }
.crs-gruppe.zu .material-symbols-rounded{ transform:rotate(-90deg); }
.crs-gruppe:hover{ color:#5b6b7d; background:#f2f6fa; }
.crs-gruppe:focus-visible{ outline:2px solid var(--accent,#f0862f); outline-offset:1px; }
.crs-navliste > .crs-nv:first-child{ margin-top:6px; }
@media (prefers-reduced-motion:reduce){ .crs-gruppe .material-symbols-rounded{ transition:none; } }
.crs-nv{ all:unset; box-sizing:border-box; cursor:pointer; position:relative; display:flex; align-items:center; gap:12px;
  width:100%; height:42px; padding:0 12px; margin-bottom:2px; border-radius:21px;
  font-size:13.5px; font-weight:600; color:#41556d; white-space:nowrap; }
.crs-nv .material-symbols-rounded{ font-size:21px; color:#8ea4bd; flex:none; }
.crs-nv:hover{ background:#f2f6fa; color:#12233a; }
.crs-nv.an{ background:rgba(var(--accent-rgb,240,134,47),.15); color:var(--accent-dark,#a3530f); }
.crs-nv.an .material-symbols-rounded{ color:var(--accent-dark,#a3530f); font-variation-settings:'FILL' 1; }
.crs-nv:focus-visible{ outline:2px solid var(--accent,#f0862f); outline-offset:2px; }
.crs-nz{ margin-left:auto; min-width:20px; height:20px; padding:0 6px; border-radius:10px; display:grid; place-items:center;
  font-size:11px; font-weight:800; background:rgba(var(--accent-rgb,240,134,47),.16); color:var(--accent-dark,#a3530f); }
.crs-nz[hidden]{ display:none; }
.crs-navfuss{ padding-top:8px; border-top:1px solid var(--scrm-linie,#e7eef6); }
.crs-frame.eng .crs-mt,
.crs-frame.eng .crs-gruppe,
.crs-frame.eng .crs-nt{ display:none; }
.crs-frame.eng .crs-nv{ justify-content:center; padding:0; }
.crs-frame.eng .crs-nz{ position:absolute; top:3px; right:6px; min-width:16px; height:16px; font-size:9.5px; padding:0 4px; }
.crs-frame.eng .crs-marke{ justify-content:center; padding-inline:0; }

/* ---------- Kopf ---------- */
/* Wie die Workstation selbst: Navigation und Kopfzeile sind eine weisse
   Flaeche ohne Trennstrich, der graue Inhalt setzt mit runder Ecke ein. */
.crs-haupt{ display:flex; flex-direction:column; min-width:0; min-height:0; background:#fff; }
.crs-kopf{ position:relative; z-index:46; flex:none; display:flex; align-items:center; gap:12px; min-height:64px; padding:8px 12px 8px 16px; background:#fff; }
.crs-kopf .crs-x{ margin-left:auto; }
/* Suche ueber die ganze Suite */
.crs-gsuche{ position:relative; flex:1; max-width:620px; min-width:0; }
.crs-gs-feld{ display:flex; align-items:center; gap:9px; height:42px; padding:0 10px 0 14px; border-radius:21px; background:#f1f5f9; color:#8a97a8; }
.crs-gs-feld:focus-within{ background:#fff; box-shadow:inset 0 0 0 2px var(--accent,#f0862f); }
.crs-gs-feld .material-symbols-rounded{ font-size:20px; }
.crs-gs-feld input{ flex:1; min-width:0; height:100%; border:0; outline:0; background:transparent; font:inherit; font-size:14px; color:#12233a; }
.crs-gs-feld input::-webkit-search-cancel-button{ cursor:pointer; }
.crs-gs-feld kbd{ font:inherit; font-size:10.5px; font-weight:700; padding:1px 6px; border-radius:5px; background:#e3e9f0; color:#5b6b7d; }
.crs-gs-feld:focus-within kbd{ display:none; }
.crs-gs-erg{ position:absolute; left:0; right:0; top:calc(100% + 6px); max-height:min(70vh,560px); overflow:auto; padding:6px; border-radius:14px;
  background:#fff; box-shadow:0 18px 44px -14px rgba(18,35,58,.32), 0 0 0 1px var(--scrm-linie,#e7eef6); }
.crs-gs-erg[hidden]{ display:none; }
.crs-gs-g + .crs-gs-g{ margin-top:4px; padding-top:4px; border-top:1px solid var(--scrm-linie,#e7eef6); }
.crs-gs-k{ display:flex; align-items:center; gap:6px; padding:6px 10px 4px; font-size:10.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:#8a97a8; }
.crs-gs-k .material-symbols-rounded{ font-size:15px; text-transform:none; letter-spacing:normal; }
.crs-gs-k em{ font-style:normal; margin-left:auto; font-weight:700; letter-spacing:0; }
.crs-gs-z{ all:unset; box-sizing:border-box; cursor:pointer; display:flex; align-items:center; gap:10px; width:100%; min-height:44px; padding:5px 10px; border-radius:10px; }
.crs-gs-z:hover{ background:#f2f6fa; }
.crs-gs-z.an{ background:rgba(var(--accent-rgb,240,134,47),.12); }
.crs-gs-av, .crs-gs-ic{ flex:none; width:30px; height:30px; border-radius:50%; display:grid; place-items:center; }
.crs-gs-av{ background:#2f6fc4; color:#fff; font-size:11px; font-weight:800; }
.crs-gs-ic{ border-radius:9px; background:#eef3f8; color:#41556d; }
.crs-gs-ic .material-symbols-rounded{ font-size:18px; }
.crs-gs-t{ flex:1; min-width:0; display:flex; flex-direction:column; }
.crs-gs-t b{ font-size:13.5px; font-weight:700; color:#12233a; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.crs-gs-t small{ font-size:12px; color:#8a97a8; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.crs-gs-t mark{ background:rgba(var(--accent-rgb,240,134,47),.22); color:inherit; border-radius:3px; padding:0 1px; }
.crs-gs-mehr{ padding:2px 10px 6px 50px; font-size:11.5px; color:#8a97a8; }
.crs-gs-leer{ padding:22px; text-align:center; color:#8a97a8; font-size:13px; }
.crs-gs-leer .material-symbols-rounded{ display:block; font-size:28px; opacity:.5; margin:0 auto 6px; }
.crs-gs-fuss{ margin-top:4px; padding:8px 10px 4px; border-top:1px solid var(--scrm-linie,#e7eef6); font-size:11.5px; color:#8a97a8; }
.crs-gs-fuss kbd{ font:inherit; font-size:10.5px; font-weight:700; padding:1px 5px; border-radius:5px; background:#eef2f7; color:#5b6b7d; }
.crs-gs-z:focus-visible{ outline:2px solid var(--accent,#f0862f); outline-offset:-2px; }
/* Seitenkopf im Inhalt */
.crs-seitenkopf{ flex:none; display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap; padding:16px 20px 4px; }
.crs-seitenkopf[hidden]{ display:none; }
.crs-seitenkopf h1{ margin:0; font-size:19px; font-weight:800; letter-spacing:-.015em; color:#12233a; }
.crs-seitenkopf .crs-akt{ margin-left:auto; }
.crs-wirte{ flex:1; min-height:0; display:flex; }
.crs-kt{ min-width:0; }
.crs-kt h2{ margin:0; font-size:17px; font-weight:800; letter-spacing:-.015em; white-space:nowrap; }
.crs-sub{ font-size:12px; color:var(--scrm-mut,#8a97a8); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.crs-suche{ margin-left:auto; width:min(320px,30vw); }
.crs-suche[hidden]{ display:none; }
.crs-akt{ display:flex; align-items:center; gap:8px; margin-left:auto; }
.crs-suche + .crs-akt{ margin-left:0; }
.crs-x{ all:unset; box-sizing:border-box; cursor:pointer; flex:none; width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center; color:var(--scrm-mut,#8a97a8); }
.crs-x:hover{ background:#eef3f8; color:#12233a; }
.crs-x:focus-visible{ outline:2px solid var(--accent,#f0862f); outline-offset:2px; }

/* ---------- Wirt: eine Maschine zeichnet, die andere wartet ---------- */
.crs-body{ position:relative; flex:1; min-height:0; display:flex; flex-direction:column; overflow:hidden; border-top-left-radius:18px; background:var(--scrm-grund,#f5f8fc); }
.crs-body::after{ content:""; position:absolute; inset:0; z-index:39; border-top-left-radius:18px; pointer-events:none;
  box-shadow:inset 1px 1px 0 var(--scrm-linie,#e7eef6); }
.crs-frame.eng .crs-body{ border-top-left-radius:18px; }
.crs-wirt{ flex:1; min-width:0; min-height:0; }
.crs-wirt[hidden]{ display:none; }
/* Die beiden Maschinen brachten ihren eigenen Kopf mit. Im gemeinsamen
   Rahmen gibt es nur einen — ihre Koepfe und Navigationen bleiben weg. */
#crsOverlay .scrm-frame{ height:100%; border-radius:0; }
/* :not([hidden]) ist noetig: die Regel ist staerker als .crs-wirt[hidden],
   sonst bliebe der wartende Wirt sichtbar und beide staenden nebeneinander. */
#crsOverlay .sales-frame.imrahmen:not([hidden]){ display:flex; flex-direction:column; height:100%; border-radius:0; background:var(--sal-grund,#f5f8fc); }
#crsOverlay .sales-frame.imrahmen > .sal-body{ flex:1; min-height:0; }
/* Beide Maschinen brachten eigene Koepfe und Reiter mit. Es gibt nur noch
   die Navigation links. */
#crsOverlay .sal-head, #crsOverlay .sal-nav, #crsOverlay .scrm-tabs{ display:none; }
#crsOverlay .crs-seitenkopf .sal-akt{ display:flex; align-items:center; gap:8px; }
#crsOverlay .crs-seitenkopf .sal-pk{ all:unset; box-sizing:border-box; cursor:pointer; width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center; color:#41556d; }
#crsOverlay .crs-seitenkopf .sal-pk:hover{ background:#eef3f8; }
/* Eng und sehreng setzt die Sales-Maschine selbst an #salFrame — sie misst
   ihren Rahmen, und der ist hier der Wirt. */

/* ===== Gaeste: E-Mail und Kalender im Inhalt =====================
   Das Fenster der App legt sich ueber #crsGast. Dort bleibt nur der
   Hinweis, falls die App gerade im eigenen Fenster laeuft. */
.crs-wirt.crs-gast{ position:relative; min-height:0; }
.crs-gastmeld{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  height:100%; padding:30px; text-align:center; color:var(--crs-leise); }
.crs-gastmeld .material-symbols-rounded{ font-size:34px; color:var(--crs-ic); }
.crs-gastmeld p{ margin:0; font-size:14px; max-width:420px; }
/* Das Fenster des Gastes: keine Abdunklung, kein eigener Rahmen — es sitzt
   passgenau auf der Inhaltsflaeche der Suite. */
/* inset NICHT als Kurzform setzen: mit !important schluege es die Masse,
   die gastPlatzieren() direkt am Element setzt. */
.crs-imrahmen{ position:fixed !important; right:auto !important; bottom:auto !important; display:block !important;
  background:transparent !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; z-index:1450 !important; }
/* Das Andock-System setzt den Rahmen selbst fest (top:60px, right:var(--dock-right)).
   Im Gastbetrieb fuellt er stattdessen das Fenster, das ueber der Inhaltsflaeche liegt. */
.crs-imrahmen > .email-frame, .crs-imrahmen > .kal-frame{
  position:absolute !important; inset:0 !important; width:auto !important; height:auto !important;
  max-width:none !important; max-height:none !important; margin:0 !important; padding-left:0 !important;
  transform:none !important; border-radius:0 0 0 var(--ir-ecke, 18px) !important; box-shadow:none !important; outline:0 !important; }
.crs-imrahmen .kal-topbar{ display:none !important; }
/* Von der Kopfzeile der E-Mail bleibt nur die Suche — oben in der Suite steht
   die Suche ueber die Suite, hier die ueber das Postfach. */
.crs-imrahmen .email-topbar{ display:flex !important; min-height:0 !important; height:auto !important;
  padding:10px 14px 2px !important; border:0 !important; background:transparent !important; box-shadow:none !important; }
.crs-imrahmen .email-topbar > *:not(.em-kopfsuche){ display:none !important; }
.crs-imrahmen .em-kopfsuche{ margin:0 !important; max-width:none !important; }

/* ============================================================
   Eigene Ansichten: Firmen, Produkte, Vertraege
   ============================================================ */
.crs-eigen{ display:flex; min-height:0; overflow:hidden; padding:14px; gap:14px; }
.crs-eigen[hidden]{ display:none; }
.crs-zwei{ display:grid; grid-template-columns:minmax(240px,300px) minmax(0,1fr); gap:14px; width:100%; min-height:0; }
.crs-spalte{ display:flex; flex-direction:column; min-height:0; overflow:hidden; }
.crs-srumpf{ flex:1; min-height:0; overflow-y:auto; }
.crs-srumpf.polster{ padding:14px; }
.crs-zeile{ all:unset; box-sizing:border-box; cursor:pointer; display:flex; align-items:center; gap:10px; width:100%;
  padding:9px 12px; border-bottom:1px solid var(--scrm-linie,#e7eef6); position:relative; }
.crs-zeile:hover{ background:#fafcfe; }
.crs-zeile.an{ background:rgba(var(--accent-rgb,240,134,47),.12); }
.crs-zeile.an::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--accent,#f0862f); }
.crs-zeile.leise{ opacity:.55; }
.crs-zeile:focus-visible{ outline:2px solid var(--accent,#f0862f); outline-offset:-2px; }
.crs-zt{ flex:1; min-width:0; display:block; }
.crs-zt b{ display:block; font-size:13px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.crs-zt small{ display:block; font-size:11.5px; color:var(--scrm-mut,#8a97a8); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.crs-fav{ width:34px; height:34px; flex:none; border-radius:10px; display:grid; place-items:center; font-weight:800; font-size:13px;
  background:#eef3f8; color:#41556d; }
.crs-fav.gross{ width:48px; height:48px; border-radius:14px; font-size:17px; }
.crs-pic{ --pr:47,111,196; width:34px; height:34px; flex:none; border-radius:10px; display:grid; place-items:center;
  background:rgba(var(--pr),.13); color:rgb(var(--pr)); }
.crs-pic .material-symbols-rounded{ font-size:20px; }
.crs-pic.gross{ width:48px; height:48px; border-radius:14px; }
.crs-pic.gross .material-symbols-rounded{ font-size:26px; }
.crs-kunde{ flex:none; font-size:11.5px; font-weight:700; color:var(--scrm-gut,#0e7c6b); white-space:nowrap; font-variant-numeric:tabular-nums; }
.crs-bk{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.crs-bn{ font-size:19px; font-weight:800; letter-spacing:-.018em; }
.crs-bf{ font-size:12.5px; color:var(--scrm-mut,#8a97a8); }
.crs-luecke{ flex:1; }
.crs-ptext{ margin:0 0 14px; font-size:13px; line-height:1.6; color:#41556d; max-width:70ch; }
.crs-kzs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin-bottom:16px; }
.crs-kz{ background:#fff; border:1px solid var(--scrm-linie,#e7eef6); border-radius:11px; padding:11px 13px; }
.crs-kz b{ display:block; font-size:20px; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.crs-kz span{ font-size:11.5px; color:var(--scrm-mut,#8a97a8); }
.crs-kz.gut b{ color:var(--scrm-gut,#0e7c6b); }
.crs-liste{ background:#fff; border:1px solid var(--scrm-linie,#e7eef6); border-radius:11px; overflow:hidden; }
.crs-vtr{ display:flex; align-items:center; gap:12px; padding:10px 13px; border-bottom:1px solid var(--scrm-linie,#e7eef6); cursor:pointer; }
.crs-vtr:last-child{ border-bottom:0; }
.crs-vtr:hover{ background:#fafcfe; }
.crs-vtr.ge{ background:rgba(var(--scrm-kalt-rgb,179,38,30),.03); }
.crs-vsp{ flex:none; width:150px; font-size:12.5px; font-variant-numeric:tabular-nums; }
.crs-vsp b{ display:block; }
.crs-vsp b.rot{ color:var(--scrm-kalt,#b3261e); }
.crs-vsp small{ font-size:11px; color:var(--scrm-mut,#8a97a8); }
.crs-reihe{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:8px; }
.crs-xsell{ display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:12.5px; color:var(--scrm-warm,#c2691a); font-weight:700; }
.crs-xsell .material-symbols-rounded{ font-size:17px; }
.crs-pchip{ --pr:47,111,196; display:inline-flex; align-items:center; gap:4px; height:22px; padding:0 8px 0 6px; border-radius:11px;
  background:rgba(var(--pr),.12); color:rgb(var(--pr)); font-size:11px; font-weight:800; white-space:nowrap; }
.crs-pchip .material-symbols-rounded{ font-size:14px; }
.crs-gitter{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:10px; }
.crs-apk{ all:unset; box-sizing:border-box; cursor:pointer; display:flex; align-items:center; gap:10px; padding:10px 12px;
  background:#fff; border:1px solid var(--scrm-linie,#e7eef6); border-radius:11px; }
.crs-apk:hover{ border-color:var(--accent-dark, var(--accent,#f0862f)); }
.crs-apk:focus-visible{ outline:2px solid var(--accent,#f0862f); outline-offset:2px; }
.crs-vk{ all:unset; box-sizing:border-box; cursor:pointer; display:flex; flex-direction:column; gap:6px; padding:11px 12px;
  background:#fff; border:1px solid var(--scrm-linie,#e7eef6); border-radius:11px; }
.crs-vk:hover{ border-color:var(--accent-dark, var(--accent,#f0862f)); }
.crs-vk:focus-visible{ outline:2px solid var(--accent,#f0862f); outline-offset:2px; }
.crs-vkt{ font-size:13px; font-weight:700; }
.crs-vkp{ display:flex; gap:4px; flex-wrap:wrap; }
.crs-vkf{ display:flex; align-items:baseline; gap:5px; font-variant-numeric:tabular-nums; }
.crs-vkf b{ font-size:14px; font-weight:800; }
.crs-vkf span{ font-size:11px; color:var(--scrm-mut,#8a97a8); }

/* ---------- Dialog ---------- */
.crs-dlgov{ position:absolute; inset:0; z-index:40; display:none; align-items:center; justify-content:center; background:rgba(9,17,32,.42); }
.crs-dlgov.an{ display:flex; }
.crs-dlg{ width:520px; max-width:calc(100% - 32px); max-height:calc(100% - 40px); overflow:auto; padding:20px;
  border-radius:16px; background:var(--panel); box-shadow:0 26px 60px -18px rgba(9,17,32,.5); }
.crs-dlg.breit{ width:680px; }
.crs-dlg h3{ margin:0 0 4px; font-size:17px; font-weight:800; letter-spacing:-.01em; }
.crs-s{ margin:0 0 14px; font-size:13px; color:var(--scrm-mut,#8a97a8); }
.crs-fgrid{ display:grid; grid-template-columns:1fr 1fr; gap:10px 12px; }
.crs-feld{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.crs-feld.voll{ grid-column:1 / -1; }
.crs-feld > span{ font-size:11.5px; font-weight:700; color:#41556d; }
.crs-feld .m3-input.roh, .crs-sel{ height:40px; border:1px solid var(--scrm-linie2,#d9e4f0); border-radius:10px; padding:0 10px;
  font:inherit; font-size:13.5px; color:#12233a; background:#fff; width:100%; box-sizing:border-box; }
.crs-feld .m3-input.roh:focus, .crs-sel:focus{ outline:2px solid var(--accent,#f0862f); outline-offset:-1px; border-color:transparent; }
.crs-schalter{ display:inline-flex; align-items:center; gap:8px; margin-top:12px; font-size:13px; color:#41556d; cursor:pointer; }
.crs-schalter input{ accent-color:var(--accent-dark, var(--accent,#f0862f)); width:16px; height:16px; }
.crs-dlgf{ display:flex; align-items:center; gap:8px; margin-top:18px; }
.crs-dlgf .m3-btn.rot{ color:var(--scrm-kalt,#b3261e); }
@container (max-width: 900px){ .crs-fgrid{ grid-template-columns:1fr; } }

/* ---------- Positionen im Chance-Dialog ---------- */
.crs-posz{ display:grid; grid-template-columns:minmax(0,1.6fr) 84px 104px 110px 36px; gap:8px; align-items:center; margin-bottom:6px; }
.crs-posz.kopf{ font-size:10.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:#9fb0c4; margin-bottom:4px; }
.crs-posz.kopf .re{ text-align:right; }
.crs-posz .m3-input.roh, .crs-posz .crs-sel{ height:36px; }
.crs-possum{ text-align:right; font-size:12.5px; font-weight:700; font-variant-numeric:tabular-nums; }
.crs-summen{ font-size:12.5px; color:#41556d; font-variant-numeric:tabular-nums; }
.crs-summen b{ font-size:14px; color:#12233a; }
.crs-chips{ display:flex; gap:6px; flex-wrap:wrap; }
.crs-chip{ all:unset; box-sizing:border-box; cursor:pointer; height:32px; padding:0 12px; border-radius:8px; font-size:12.5px; font-weight:600;
  color:#41556d; box-shadow:inset 0 0 0 1px var(--scrm-linie2,#d9e4f0); }
.crs-chip:hover{ background:#f4f8fc; }
.crs-chip.an{ background:rgba(var(--accent-rgb,240,134,47),.14); color:var(--accent-dark,#a3530f); box-shadow:inset 0 0 0 1.5px rgba(var(--accent-rgb,240,134,47),.5); }
.crs-chip:focus-visible{ outline:2px solid var(--accent,#f0862f); outline-offset:2px; }
.crs-vermerk{ display:flex; gap:9px; align-items:flex-start; margin-top:12px; padding:10px 12px; border-radius:10px;
  background:rgba(var(--scrm-gut-rgb,14,124,107),.08); color:var(--scrm-gut,#0e7c6b); font-size:12.5px; font-weight:600; line-height:1.45; }
.crs-vermerk .material-symbols-rounded{ font-size:18px; flex:none; }
.crs-dlgf .m3-btn.gut{ color:var(--scrm-gut,#0e7c6b); }
.crs-dlgf .m3-btn.rot{ color:var(--scrm-kalt,#b3261e); }
.crs-dlgf .m3-btn.filled.rotf{ background:var(--scrm-kalt,#b3261e); color:#fff; }
/* ============================================================
   Kaufrunde — am Kontakt, an der Firma, im Gespraech
   ============================================================ */
.crs-rolle{ display:inline-flex; align-items:center; gap:4px; height:21px; padding:0 8px; border-radius:6px; flex:none;
  font-size:10.5px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; white-space:nowrap; }
.crs-rolle .material-symbols-rounded{ font-size:13px; }
.crs-rolle.nurics{ padding:0 4px; }
.crs-rolle.r-entscheider{ background:rgba(109,79,196,.12); color:#5b3fb0; }
.crs-rolle.r-beeinflusser{ background:rgba(47,122,214,.12); color:#1f5fae; }
.crs-rolle.r-anwender{ background:rgba(var(--scrm-gut-rgb,14,124,107),.11); color:var(--scrm-gut,#0e7c6b); }
.crs-rolle.r-vorzimmer{ background:#eef3f8; color:#41556d; }
.scrm-bnz .crs-rolle{ margin:0 4px 0 8px; }
.crs-haltung{ all:unset; box-sizing:border-box; cursor:pointer; flex:none; display:inline-flex; align-items:center; gap:3px;
  height:24px; padding:0 9px; border-radius:12px; font-size:11px; font-weight:700; white-space:nowrap; }
.crs-haltung .material-symbols-rounded{ font-size:14px; }
.crs-haltung.h-dafuer{ background:rgba(var(--scrm-gut-rgb,14,124,107),.1); color:var(--scrm-gut,#0e7c6b); }
.crs-haltung.h-neutral{ background:#eef3f8; color:#41556d; }
.crs-haltung.h-skeptisch{ background:rgba(var(--scrm-kalt-rgb,179,38,30),.09); color:var(--scrm-kalt,#b3261e); }
.crs-haltung:hover{ filter:brightness(.95); }
.crs-haltung:focus-visible{ outline:2px solid var(--accent,#f0862f); outline-offset:2px; }
.crs-rz{ display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--scrm-linie,#e7eef6); }
.crs-rz:last-of-type{ border-bottom:0; }
.crs-rz.ich{ margin:0 -8px; padding:8px; border-radius:9px; border-bottom-color:transparent; background:rgba(var(--accent-rgb,240,134,47),.08); }
.crs-rz.leer{ border-bottom-style:dashed; }
.crs-rzt{ flex:1; min-width:0; }
.crs-rzt b{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:13px; }
.crs-rzt small{ display:block; margin-top:1px; font-size:11.5px; color:var(--scrm-mut,#8a97a8); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.crs-rzn{ all:unset; font-weight:700; }
button.crs-rzn{ cursor:pointer; }
button.crs-rzn:hover{ text-decoration:underline; }
button.crs-rzn:focus-visible{ outline:2px solid var(--accent,#f0862f); outline-offset:2px; }
.crs-rzneu{ all:unset; cursor:pointer; display:inline-flex; align-items:center; gap:4px; font-size:12.5px; font-weight:600;
  color:var(--accent-dark,#a3530f); }
.crs-rzneu .material-symbols-rounded{ font-size:17px; }
.crs-rzneu:hover{ text-decoration:underline; }
.crs-rzneu:focus-visible{ outline:2px solid var(--accent,#f0862f); outline-offset:2px; }
.crs-hinweis{ display:flex; gap:8px; align-items:flex-start; margin-top:10px; padding:9px 11px; border-radius:10px;
  font-size:12.5px; line-height:1.45; }
.crs-hinweis .material-symbols-rounded{ font-size:18px; flex:none; }
.crs-hinweis.warn{ background:rgba(var(--accent-rgb,240,134,47),.1); color:var(--accent-dark,#a3530f); }
.crs-hinweis.rot{ background:rgba(var(--scrm-kalt-rgb,179,38,30),.07); color:var(--scrm-kalt,#b3261e); }
.crs-hinweis.gut{ background:rgba(var(--scrm-gut-rgb,14,124,107),.08); color:var(--scrm-gut,#0e7c6b); }
.crs-rkarte{ padding:12px 14px 14px; margin-top:16px; }
.crs-rkarte > .scrm-nh{ display:flex; align-items:center; gap:7px; }
/* Im Gespraech: ueber der Mitschrift */
.crs-rgespraech{ padding:12px 14px; border-bottom:1px solid var(--scrm-linie,#e7eef6); background:#fff; }
.crs-rgespraech .crs-rzt small{ white-space:normal; }
/* Dialog */
.crs-dlgl{ margin:14px 0 6px; font-size:10.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:#8a97a8; }
.crs-dlgk{ margin-top:6px; font-size:11.5px; color:var(--scrm-mut,#8a97a8); }
.crs-chip{ display:inline-flex; align-items:center; gap:4px; }
.crs-chip .material-symbols-rounded{ font-size:16px; }
.crs-rsuche{ height:40px; border:1px solid var(--scrm-linie2,#d9e4f0); border-radius:10px; padding:0 10px; font:inherit; font-size:13.5px;
  width:100%; box-sizing:border-box; margin-bottom:8px; }
.crs-rsuche:focus{ outline:2px solid var(--accent,#f0862f); outline-offset:-1px; border-color:transparent; }
.crs-wahlliste{ display:flex; flex-direction:column; gap:6px; max-height:250px; overflow-y:auto; padding:2px; }
.crs-wgr{ margin:4px 0 0; font-size:10.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:#8a97a8; }
.crs-wahl{ all:unset; box-sizing:border-box; cursor:pointer; display:flex; align-items:center; gap:10px; padding:8px 10px;
  border-radius:10px; box-shadow:inset 0 0 0 1px var(--scrm-linie2,#d9e4f0); }
.crs-wahl:hover{ background:#fafcfe; }
.crs-wahl.an{ background:rgba(var(--accent-rgb,240,134,47),.07); box-shadow:inset 0 0 0 2px var(--accent,#f0862f); }
.crs-wahl:focus-visible{ outline:2px solid var(--accent,#f0862f); outline-offset:2px; }
.crs-voll{ align-items:flex-start; }
.crs-voll b{ display:block; font-weight:600; color:#12233a; }
.crs-voll small{ display:block; margin-top:2px; font-size:11.5px; color:var(--scrm-mut,#8a97a8); line-height:1.45; }
.crs-voll input{ margin-top:2px; }

/* ============================================================
   Anforderungen — Katalog, Wuensche, Aufnehmen
   ============================================================ */
.crs-z{ display:inline-flex; align-items:center; gap:3px; height:21px; padding:0 8px; border-radius:11px; flex:none;
  font-size:11px; font-weight:700; white-space:nowrap; background:#eef3f8; color:#41556d; }
.crs-z .material-symbols-rounded{ font-size:13px; }
.crs-z.z-lila{ background:rgba(109,79,196,.12); color:#5b3fb0; }
.crs-z.z-orange{ background:rgba(var(--accent-rgb,240,134,47),.14); color:var(--accent-dark,#a3530f); }
.crs-z.z-gruen{ background:rgba(var(--scrm-gut-rgb,14,124,107),.11); color:var(--scrm-gut,#0e7c6b); }
.crs-z.z-rot{ background:rgba(var(--scrm-kalt-rgb,179,38,30),.09); color:var(--scrm-kalt,#b3261e); }
.crs-achips{ display:flex; align-items:center; gap:5px; flex-wrap:wrap; margin:3px 0; }
.crs-afilter{ flex:none; display:flex; flex-direction:column; gap:6px; padding:9px 12px; border-bottom:1px solid var(--scrm-linie,#e7eef6); }
.crs-freihe{ display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.crs-flbl{ font-size:11px; font-weight:700; color:var(--scrm-mut,#8a97a8); margin-right:2px; }
.crs-fchip{ all:unset; box-sizing:border-box; cursor:pointer; height:22px; padding:0 8px; border-radius:6px; background:#eef3f8;
  font-size:11px; font-weight:700; color:#41556d; white-space:nowrap; }
.crs-fchip:hover{ background:#e3eaf2; }
.crs-fchip.an{ background:#12233a; color:#fff; }
.crs-fchip:focus-visible{ outline:2px solid var(--accent,#f0862f); outline-offset:2px; }
.crs-azeile{ align-items:flex-start; }
.crs-azeile .crs-zt b{ white-space:normal; }
.crs-kunde.neutral{ color:#12233a; }
.crs-akopf{ align-items:flex-start; flex-wrap:wrap; }
.crs-zreihe{ align-items:center; }
.crs-version{ display:inline-flex; align-items:center; gap:8px; margin-left:8px; font-size:12px; font-weight:700; color:#41556d; }
.crs-version .m3-input.roh{ width:90px; height:32px; border:1px solid var(--scrm-linie2,#d9e4f0); border-radius:8px; padding:0 8px; font:inherit; font-size:13px; }
.crs-version .m3-input.roh:focus{ outline:2px solid var(--accent,#f0862f); outline-offset:-1px; border-color:transparent; }
.crs-kz.rot b{ color:var(--scrm-kalt,#b3261e); }
.crs-vermerk.grau{ background:#f4f7fb; color:#41556d; font-weight:500; }
.crs-nennung{ padding:10px 12px; margin-bottom:8px; border-radius:11px; background:#fff; border:1px solid var(--scrm-linie,#e7eef6); }
.crs-nq{ display:inline-flex; align-items:center; gap:3px; font-size:11.5px; color:var(--scrm-mut,#8a97a8); }
.crs-nq .material-symbols-rounded{ font-size:15px; }
.crs-nwer{ margin-left:auto; font-size:12px; color:#41556d; }
.crs-ton{ margin:7px 0 5px; padding:1px 0 1px 11px; border-left:3px solid rgba(var(--accent-rgb,240,134,47),.45);
  font-size:13.5px; font-style:italic; color:#12233a; line-height:1.5; }
.crs-nchance{ display:flex; align-items:center; gap:5px; font-size:11.5px; color:var(--scrm-mut,#8a97a8); }
.crs-nchance .material-symbols-rounded{ font-size:15px; }
.crs-awarte{ flex:none; display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600; color:var(--scrm-gut,#0e7c6b); }
.crs-awarte.rot{ color:var(--scrm-kalt,#b3261e); }
.crs-awarte .material-symbols-rounded{ font-size:16px; }
.crs-zapp{ display:flex; gap:10px; align-items:flex-start; padding:9px 11px; margin-bottom:6px; border-radius:10px; cursor:pointer;
  box-shadow:inset 0 0 0 1px var(--scrm-linie2,#d9e4f0); font-size:13px; }
.crs-zapp input{ margin-top:2px; accent-color:var(--accent-dark, var(--accent,#f0862f)); width:16px; height:16px; flex:none; }
.crs-zapp span{ flex:1; min-width:0; }
.crs-zapp small{ display:block; margin-top:3px; font-size:11.5px; color:var(--scrm-mut,#8a97a8); line-height:1.4; }
.crs-zapp.aus{ cursor:default; background:#fafbfd; color:#6b7a8c; }
.crs-zapp.aus > .material-symbols-rounded{ font-size:17px; color:var(--scrm-kalt,#b3261e); }
.crs-alz{ all:unset; box-sizing:border-box; display:grid; grid-template-columns:minmax(0,1.6fr) 110px 84px 70px 110px; gap:8px; align-items:center;
  width:100%; padding:9px 13px; border-bottom:1px solid var(--scrm-linie,#e7eef6); font-size:12.5px; font-variant-numeric:tabular-nums; cursor:pointer; }
.crs-alz:last-child{ border-bottom:0; }
.crs-alz:hover{ background:#fafcfe; }
.crs-alz:focus-visible{ outline:2px solid var(--accent,#f0862f); outline-offset:-2px; }
.crs-alz.kopf{ cursor:default; font-size:10.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:#9fb0c4; }
.crs-alz.kopf:hover{ background:none; }
.crs-alz .re{ text-align:right; }
.crs-alzt{ font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Aufnehmen */
.crs-awidget{ display:flex; flex-direction:column; gap:8px; }
.crs-aein{ height:38px; border:1px solid var(--scrm-linie2,#d9e4f0); border-radius:10px; padding:0 10px; font:inherit; font-size:13px; width:100%; box-sizing:border-box; }
.crs-aein:focus{ outline:2px solid var(--accent,#f0862f); outline-offset:-1px; border-color:transparent; }
.crs-ahinweis{ font-size:11.5px; color:var(--scrm-mut,#8a97a8); }
.crs-avor{ display:flex; flex-direction:column; gap:4px; }
.crs-av{ all:unset; box-sizing:border-box; cursor:pointer; display:flex; align-items:center; gap:8px; padding:6px 9px; border-radius:9px;
  font-size:12.5px; box-shadow:inset 0 0 0 1px var(--scrm-linie2,#d9e4f0); }
.crs-av > span:not(.crs-pchip){ flex:1; min-width:0; }
.crs-av small{ display:block; font-size:11px; color:var(--scrm-mut,#8a97a8); }
.crs-av > .material-symbols-rounded{ font-size:17px; color:var(--scrm-mut,#8a97a8); }
.crs-av.an{ box-shadow:inset 0 0 0 2px var(--accent,#f0862f); background:rgba(var(--accent-rgb,240,134,47),.05); }
.crs-av.an > .material-symbols-rounded{ color:var(--accent-dark,#a3530f); }
.crs-av:focus-visible{ outline:2px solid var(--accent,#f0862f); outline-offset:2px; }
.crs-arow{ display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
.crs-sel.klein{ height:30px; width:auto; max-width:160px; font-size:12px; padding:0 6px; }
.crs-chip.klein{ height:28px; padding:0 9px; font-size:12px; }
.crs-schalter.klein{ margin-top:0; font-size:12px; }
.crs-abisher{ display:flex; flex-direction:column; gap:4px; margin-bottom:8px; }
.crs-abisher div{ display:flex; align-items:center; gap:6px; font-size:12px; color:#41556d; }
.crs-abisher div > span:nth-child(2){ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.crs-abisher .material-symbols-rounded{ font-size:15px; color:#6d4fc4; }
.crs-rgespraech .crs-arow .m3-btn{ margin-left:auto; }
/* Wuensche am Kontakt */
.crs-wunsch{ padding:9px 11px; margin-bottom:7px; border-radius:10px; background:#fff; border:1px solid var(--scrm-linie,#e7eef6); }
.crs-wt{ all:unset; cursor:pointer; font-size:13px; font-weight:700; }
.crs-wt:hover{ text-decoration:underline; }
.crs-wt:focus-visible{ outline:2px solid var(--accent,#f0862f); outline-offset:2px; }
.crs-wv{ all:unset; box-sizing:border-box; cursor:pointer; display:inline-flex; align-items:center; gap:5px; height:26px; margin-top:2px; padding:0 10px;
  border-radius:13px; font-size:11.5px; font-weight:700; color:#41556d; box-shadow:inset 0 0 0 1px var(--scrm-linie2,#d9e4f0); }
.crs-wv .material-symbols-rounded{ font-size:15px; }
.crs-wv.an{ background:rgba(109,79,196,.1); color:#5b3fb0; box-shadow:none; }
.crs-wv:focus-visible{ outline:2px solid var(--accent,#f0862f); outline-offset:2px; }

/* Der Stellknopf an der Chance-Karte: er erscheint, wenn man hinzeigt. */
.scrm-vk{ position:relative; }
.scrm-vkedit{ all:unset; box-sizing:border-box; cursor:pointer; position:absolute; top:6px; right:6px; width:28px; height:28px;
  border-radius:50%; display:grid; place-items:center; color:var(--scrm-mut,#8a97a8); opacity:0; transition:opacity .12s; }
.scrm-vk:hover .scrm-vkedit, .scrm-vkedit:focus-visible{ opacity:1; }
.scrm-vkedit:hover{ background:#eef3f8; color:#12233a; }
.scrm-vkedit .material-symbols-rounded{ font-size:17px; }

/* Firma loeschen: laufende Vertraege */
.crs-fwarn{ display:flex; gap:9px; align-items:flex-start; margin-top:10px; padding:10px 12px; border-radius:10px;
  background:rgba(186,26,26,.06); color:#8c1d18; font-size:12.5px; line-height:1.5; }
.crs-fwarn .material-symbols-rounded{ font-size:18px; color:#ba1a1a; flex:none; }

/* ============================================================
   Gespraechsmodus: Ergebnis, Mailbox, Anlass, Heute, Nachbereitung
   ============================================================ */
.crs-dlg.breit.crs-gdlg{ width:740px; }
.crs-gsub{ margin:0 0 14px; font-size:13px; color:var(--scrm-mut,#8a97a8); }
.crs-gdlg kbd{ font:inherit; font-size:10.5px; font-weight:700; padding:1px 5px; border-radius:5px; background:#eef2f7; color:#5b6b7d; }
.crs-gdlg kbd.hell{ background:rgba(255,255,255,.25); color:#fff; margin-left:4px; }
.crs-ergwahl{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:7px; margin-bottom:4px; }
.crs-ergk{ all:unset; box-sizing:border-box; cursor:pointer; position:relative; display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:12px 6px 10px; border-radius:12px; box-shadow:inset 0 0 0 1px var(--scrm-linie2,#d9e4f0); text-align:center; }
.crs-ergk b{ font-size:12.5px; font-weight:700; color:#12233a; }
.crs-ergk small{ font-size:10.5px; color:var(--scrm-mut,#8a97a8); line-height:1.3; }
.crs-ergk .material-symbols-rounded{ font-size:22px; }
.crs-ergk kbd{ position:absolute; top:5px; right:6px; }
.crs-ergk:hover{ background:#f7fafd; }
.crs-ergk.an{ box-shadow:inset 0 0 0 2px var(--accent,#f0862f); background:rgba(var(--accent-rgb,240,134,47),.06); }
.crs-ergk:focus-visible{ outline:2px solid var(--accent,#f0862f); outline-offset:2px; }
.crs-ergk.termin .material-symbols-rounded{ color:var(--scrm-gut,#0e7c6b); }
.crs-ergk.unterlagen .material-symbols-rounded{ color:#2f6fc4; }
.crs-ergk.wieder .material-symbols-rounded{ color:var(--scrm-warm,#c2691a); }
.crs-ergk.nicht .material-symbols-rounded{ color:var(--scrm-mut,#8a97a8); }
.crs-ergk.nein .material-symbols-rounded{ color:var(--scrm-kalt,#b3261e); }
.crs-gteil{ min-height:120px; }
.crs-gzwei{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px 16px; }
.crs-slots{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.crs-slots h6{ margin:0 0 6px; font-size:12px; font-weight:800; color:#41556d; }
.crs-slot{ all:unset; box-sizing:border-box; display:block; width:100%; margin-bottom:5px; padding:6px 0; border-radius:8px; text-align:center; cursor:pointer;
  font-size:12.5px; font-weight:600; font-variant-numeric:tabular-nums; box-shadow:inset 0 0 0 1px var(--scrm-linie2,#d9e4f0); }
.crs-slot:hover{ background:#f4f8fc; }
.crs-slot.belegt{ cursor:default; color:#b4bfcc; background:#f5f7fa; box-shadow:none; text-decoration:line-through; }
.crs-slot.an{ background:var(--accent,#f0862f); color:#fff; box-shadow:none; }
.crs-slot:focus-visible{ outline:2px solid var(--accent,#f0862f); outline-offset:2px; }
.crs-glaedt{ display:flex; align-items:center; gap:6px; margin:-2px 0 8px; font-size:12px; color:var(--scrm-mut,#8a97a8); }
.crs-glaedt .material-symbols-rounded{ font-size:16px; }
.crs-gfeld{ display:block; width:100%; height:36px; margin-top:6px; border:1px solid var(--scrm-linie2,#d9e4f0); border-radius:9px; padding:0 10px;
  font:inherit; font-size:13px; color:#12233a; background:#fff; box-sizing:border-box; }
.crs-gtext{ display:block; width:100%; min-height:72px; border:1px solid var(--scrm-linie2,#d9e4f0); border-radius:9px; padding:9px 10px;
  font:inherit; font-size:13px; color:#12233a; background:#fff; box-sizing:border-box; resize:vertical; }
.crs-gfeld:focus, .crs-gtext:focus, .crs-gzeit:focus, .crs-gmenge:focus{ outline:2px solid var(--accent,#f0862f); outline-offset:-1px; border-color:transparent; }
.crs-gzeit, .crs-gmenge{ height:32px; border:1px solid var(--scrm-linie2,#d9e4f0); border-radius:8px; padding:0 8px; font:inherit; font-size:12.5px; color:#12233a; background:#fff; }
.crs-gmenge{ width:72px; box-sizing:border-box; }
.crs-chips .crs-gleise{ align-self:center; }
.crs-gdoc{ display:flex; align-items:center; gap:8px; padding:4px 0; font-size:13px; cursor:pointer; min-width:0; }
.crs-gdoc input{ accent-color:var(--accent-dark, var(--accent,#f0862f)); width:16px; height:16px; margin:0; flex:none; }
.crs-gdoc .material-symbols-rounded{ font-size:18px; color:#b3261e; flex:none; }
.crs-gdoc span:last-child{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.crs-gleise{ font-size:12.5px; color:var(--scrm-mut,#8a97a8); line-height:1.45; }
.crs-gleise b{ color:#12233a; }
.crs-gmail{ padding:10px 12px; border-radius:10px; background:#f7f9fc; box-shadow:inset 0 0 0 1px var(--scrm-linie,#e7eef6);
  font-size:12.5px; line-height:1.55; color:#41556d; white-space:pre-line; }
.crs-gmail b{ color:#12233a; }
.crs-gmail.gross{ font-size:14px; line-height:1.6; }
.crs-gbest{ display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:700; color:var(--scrm-gut,#0e7c6b); }
.crs-gbest .material-symbols-rounded{ font-size:16px; }
.crs-gverm{ display:flex; gap:9px; align-items:flex-start; margin-top:12px; padding:10px 12px; border-radius:10px;
  background:rgba(var(--accent-rgb,240,134,47),.08); color:var(--accent-dark,#a3530f); font-size:12.5px; font-weight:600; line-height:1.45; }
.crs-gverm .material-symbols-rounded{ font-size:18px; flex:none; }
.crs-gverm.gut{ background:rgba(var(--scrm-gut-rgb,14,124,107),.08); color:var(--scrm-gut,#0e7c6b); }
.crs-gverm.gelb{ background:rgba(var(--scrm-warm-rgb,194,105,26),.09); color:#8a4a10; }
.crs-gverm.rot{ background:rgba(var(--scrm-kalt-rgb,179,38,30),.07); color:var(--scrm-kalt,#b3261e); }
.crs-gverm.klein{ margin:0 0 8px; padding:7px 9px; font-size:12px; }
.crs-gdlg .crs-dlgf .m3-btn[disabled]{ opacity:.55; pointer-events:none; }

/* Im Gespraech: Kopf und Seitenleiste */
.crs-gav{ width:30px; height:30px; border-radius:50%; flex:none; display:grid; place-items:center; background:#2f6fc4; color:#fff; font-size:11.5px; font-weight:800; }
.crs-gwer{ display:flex; flex-direction:column; min-width:0; }
.crs-gwer b{ font-size:14px; font-weight:800; }
.crs-gwer small{ font-size:11.5px; color:var(--scrm-mut,#8a97a8); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.crs-grecht{ display:flex; gap:8px; align-items:flex-start; padding:10px 14px; background:rgba(var(--scrm-kalt-rgb,179,38,30),.07);
  color:var(--scrm-kalt,#b3261e); font-size:12.5px; font-weight:600; border-bottom:1px solid var(--scrm-linie,#e7eef6); }
.crs-grecht.gelb{ background:rgba(var(--scrm-warm-rgb,194,105,26),.09); color:#8a4a10; }
.crs-grecht .material-symbols-rounded{ font-size:18px; flex:none; }
.crs-gchance{ display:flex; flex-direction:column; gap:1px; padding:8px 10px; border-radius:9px; background:#f7f9fc; box-shadow:inset 0 0 0 1px var(--scrm-linie,#e7eef6); }
.crs-gchance small{ font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-dark,#a3530f); }
.crs-gchance b{ font-size:13px; }
.crs-gchance span{ font-size:11.5px; color:var(--scrm-mut,#8a97a8); }
.crs-gzul{ display:flex; gap:7px; align-items:flex-start; padding:4px 0; font-size:12px; }
.crs-gzul .material-symbols-rounded{ font-size:16px; color:var(--scrm-mut,#8a97a8); flex:none; margin-top:1px; }
.crs-gzul span{ display:flex; flex-direction:column; min-width:0; flex:1; }
.crs-gzul small{ color:var(--scrm-mut,#8a97a8); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.crs-gzul em{ font-style:normal; font-size:11px; color:var(--scrm-mut,#8a97a8); font-variant-numeric:tabular-nums; }
.crs-gblock div{ display:flex; align-items:center; gap:6px; padding:3px 0; font-size:12.5px; color:#8a97a8; }
.crs-gblock .material-symbols-rounded{ font-size:16px; }
.crs-gblock .jetzt{ color:#12233a; font-weight:700; }
.crs-gblock .jetzt .material-symbols-rounded{ color:var(--accent-dark, var(--accent,#f0862f)); }
.crs-gblock .fertig .material-symbols-rounded{ color:var(--scrm-gut,#0e7c6b); }
.sal-mit .scrm-quali{ grid-template-columns:minmax(0,1fr); gap:3px; }
.sal-mit .scrm-quali .k{ margin-top:4px; font-size:11px; }
.sal-mit .scrm-seg button{ height:26px; padding:0 8px; font-size:11.5px; }

/* Heute: Termine und Anrufe */
.crs-hzwei{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:4px 18px; margin-top:16px; }
.crs-hkarte{ margin-bottom:10px; }
.crs-hz{ display:flex; align-items:center; gap:12px; padding:10px 14px; border-bottom:1px solid var(--scrm-linie,#e7eef6); }
.crs-hz:last-child{ border-bottom:0; }
.crs-hz.heute{ background:rgba(var(--accent-rgb,240,134,47),.05); }
.crs-hzeit{ display:flex; flex-direction:column; align-items:center; width:48px; flex:none; font-variant-numeric:tabular-nums; }
.crs-hzeit b{ font-size:14px; }
.crs-hzeit small{ font-size:11px; color:var(--scrm-mut,#8a97a8); }
.crs-hm{ display:flex; flex-direction:column; min-width:0; flex:1; }
.crs-hm b{ font-size:13px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.crs-hm b span{ font-weight:500; color:var(--scrm-mut,#8a97a8); margin-left:6px; }
.crs-hm small{ display:flex; align-items:center; gap:4px; font-size:12px; color:#5b6b7d; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.crs-hm small .material-symbols-rounded{ font-size:15px; }
.crs-hw{ font-size:12px; font-weight:700; color:#41556d; font-variant-numeric:tabular-nums; }

/* Produkt: fuer das Gespraech */
.crs-pdocs{ padding:6px 10px 8px; }
.crs-pdz{ display:flex; align-items:center; gap:8px; padding:6px 4px; font-size:13px; border-bottom:1px solid var(--scrm-linie,#e7eef6); }
.crs-pdz .material-symbols-rounded{ font-size:18px; color:#5b6b7d; flex:none; }
.crs-pdz span{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.crs-pdhin{ padding:8px 4px 2px; font-size:12px; }
.crs-gdlg .m3-input.roh.crs-gfeld, .crs-gdlg .m3-input.roh.crs-gtext, .crs-gdlg .m3-input.roh.crs-gmenge{ border:1px solid var(--scrm-linie2,#d9e4f0); background:var(--panel); }

/* Dashboard mit Unterpunkten */
.crs-nveltern{ position:relative; margin-top:6px; }
.crs-nveltern .crs-nv{ padding-right:40px; }
.crs-nvauf{ all:unset; box-sizing:border-box; position:absolute; right:8px; top:9px; width:24px; height:24px; border-radius:7px;
  display:grid; place-items:center; cursor:pointer; color:#8ea4bd; }
.crs-nvauf .material-symbols-rounded{ font-size:18px; transition:transform .15s; }
.crs-nvauf.zu .material-symbols-rounded{ transform:rotate(-90deg); }
.crs-nvauf:hover{ background:rgba(16,24,40,.07); color:#41556d; }
.crs-nvauf:focus-visible{ outline:2px solid var(--accent,#f0862f); outline-offset:1px; }
.crs-nv.kind{ height:36px; padding-left:30px; font-size:13px; }
.crs-nv.kind .material-symbols-rounded{ font-size:19px; }
.crs-frame.eng .crs-nv.kind{ height:42px; padding:0; }
@media (prefers-reduced-motion:reduce){ .crs-nvauf .material-symbols-rounded{ transition:none; } }

/* ---------- Menue „Mehr": zweispaltig neben der Navigation, im selben Weiss wie sie ---------- */
.crs-mehrknopf .crs-mehrpfeil{ margin-left:auto; font-size:19px; color:#a6b2c1; }
.crs-frame.eng .crs-mehrpfeil{ display:none; }
/* Das Menue haengt am <body> und muss ueber dem Gastfenster liegen
   (E-Mail/Kalender im Rahmen der Suite: z-index 1450). */
.crs-mehr{ position:fixed; z-index:1500; display:grid; grid-template-columns:220px 250px; padding:8px; border-radius:14px;
  background:var(--panel); color:#41556d; box-shadow:0 18px 44px -14px rgba(18,35,58,.32), 0 0 0 1px var(--scrm-linie,#e7eef6);
  font-size:13.5px; font-weight:600; animation:crsMehrAuf .14s cubic-bezier(.2,.8,.2,1); }
/* Am body erbt das Menue die Farben des Rahmens nicht — hier noch einmal. */
.crs-mehr{ --crs-tint:var(--ir-tint, 47,122,214); --crs-text:var(--ir-text); --crs-ic:var(--ir-ic); --crs-leise:var(--ir-leise); }
@keyframes crsMehrAuf{ from{ opacity:0; transform:translateX(-6px); } to{ opacity:1; transform:none; } }
.crs-mehr-l{ display:flex; flex-direction:column; gap:2px; padding-right:8px; border-right:1px solid var(--scrm-linie,#e7eef6); }
.crs-mehr-r{ display:flex; flex-direction:column; gap:2px; padding-left:8px; }
.crs-mk{ all:unset; box-sizing:border-box; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:8px; height:40px; padding:0 8px 0 14px;
  border-radius:20px; color:#41556d; }
.crs-mk .material-symbols-rounded{ font-size:19px; color:#8ea4bd; }
.crs-mk:hover{ background:#f2f6fa; color:#12233a; }
.crs-mk.an{ background:#eef3f8; color:#12233a; }
.crs-mi{ position:relative; display:flex; align-items:center; border-radius:20px; }
.crs-mi:hover{ background:#f2f6fa; }
.crs-mi.an{ background:rgba(var(--accent-rgb,240,134,47),.15); }
.crs-mig{ all:unset; box-sizing:border-box; cursor:pointer; flex:1; display:flex; align-items:center; gap:12px; height:40px; padding:0 6px 0 12px; border-radius:20px; color:#41556d; min-width:0; }
.crs-mi:hover .crs-mig{ color:#12233a; }
.crs-mi.an .crs-mig{ color:var(--accent-dark,#a3530f); }
.crs-mig span:last-child{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.crs-mig .material-symbols-rounded{ font-size:21px; color:#8ea4bd; }
.crs-mi.an .crs-mig .material-symbols-rounded{ color:var(--accent-dark,#a3530f); font-variation-settings:'FILL' 1; }
.crs-pin{ all:unset; box-sizing:border-box; cursor:pointer; flex:none; width:32px; height:32px; margin-right:4px; border-radius:50%; display:grid; place-items:center; color:#b4bfcc; }
.crs-pin .material-symbols-rounded{ font-size:17px; transform:rotate(45deg); }
.crs-pin:hover{ background:rgba(16,24,40,.07); color:#41556d; }
.crs-pin.an{ color:var(--accent-dark,#a3530f); }
.crs-pin.an .material-symbols-rounded{ font-variation-settings:'FILL' 1; transform:none; }
.crs-mk:focus-visible, .crs-mig:focus-visible, .crs-pin:focus-visible{ outline:2px solid var(--accent,#f0862f); outline-offset:-2px; }
@media (prefers-reduced-motion:reduce){ .crs-mehr{ animation:none; } }

/* ---------- Abheben: Navigation und Kopfzeile im Verlauf der Designfarbe ----------
   Wie die Workstation selbst: Navigation und Kopfzeile sind eine getoente
   Flaeche, der Inhalt liegt darauf. Die Farbe kommt aus dem gewaehlten
   Workstation-Design (--ck-tint-rgb, gesetzt in main.js) und zieht bei jedem
   Designwechsel mit. Oben ca. 22 %, nach unten auslaufend auf 13 %.
   Vorlage: previews/crm-aufgaben.html, Variante 2 „Verlauf". */
/* Farben und Verlauf kommen aus intentio-rahmen.css — derselbe Look wie in allen Intentio-Apps. */
.crs-frame{ --crs-tint:var(--ir-tint, 47,122,214); background:var(--ir-verlauf); }
.crs-nav, .crs-haupt, .crs-kopf{ background:transparent; }
.crs-body::after{ box-shadow:inset 1px 1px 0 rgba(var(--crs-tint), .26); }
.crs-navfuss{ border-top-color:rgba(var(--crs-tint), .16); }
/* Navigation: die Toene des Rahmens statt der alten Graublautoene. Die waren
   fuer weissen Grund gemacht; auf dem Verlauf kamen die Symbole auf 1,9:1 und
   die Gruppen-Ueberschrift auf 1,6:1. Jetzt 6,4 und 5,3 — und sie ziehen beim
   Designwechsel mit, statt immer blaugrau zu bleiben. */
.crs-nv{ color:var(--ir-text); }
.crs-nv .material-symbols-rounded{ color:var(--ir-ic); }
.crs-gruppe{ color:var(--ir-leise); }
.crs-gruppe:hover{ color:var(--ir-text); background:rgba(var(--crs-tint), .10); }
.crs-mt small{ color:var(--ir-leise); }
.crs-nv:hover{ background:var(--ir-hover, rgba(var(--crs-tint), .10)); color:var(--ir-text); }
/* Der aktive Punkt mischte seine Farbe mit #0b1726 — auf einer schwarzen
   Flaeche ergab das Schwarz auf Schwarz (1,3:1). Jetzt traegt er die Rolle
   des Rahmens, die in hellen wie dunklen Designs stimmt. */
.crs-nv.an{ background:var(--ir-gewaehlt, rgba(var(--crs-tint), .18)); color:var(--ir-aktiv); }
.crs-nv.an .material-symbols-rounded{ color:inherit; }
/* Das Suchfeld war fest weiss. In einem dunklen Design stand darin weisse
   Schrift auf weissem Grund. */
.crs-gs-feld{ background:var(--ir-feld); box-shadow:inset 0 0 0 1px var(--ir-feldkante); color:var(--ir-text); }
.crs-gs-feld input{ color:var(--ir-text); }
.crs-gs-feld input::placeholder{ color:var(--ir-leise); }
.crs-gs-feld .material-symbols-rounded{ color:var(--ir-ic); }
.crs-gs-feld:focus-within{ box-shadow:inset 0 0 0 2px var(--ir-kante); }
.crs-x:hover{ background:rgba(var(--crs-tint), .10); }
.crs-mi.an{ background:rgba(var(--crs-tint), .14); }
.crs-mi.an .crs-mig, .crs-mi.an .crs-mig .material-symbols-rounded{ color:var(--ir-aktiv); }
.crs-mk.an{ background:rgba(var(--crs-tint), .08); }
/* Das Menue „Mehr" traegt denselben Verlauf wie Navigation und Kopfzeile. */
.crs-mehr{ background:var(--ir-verlauf);
  box-shadow:0 18px 44px -14px rgba(18,35,58,.32), 0 0 0 1px rgba(var(--crs-tint), .22); }
.crs-mehr-l{ border-right-color:rgba(var(--crs-tint), .2); }
.crs-mk:hover, .crs-mi:hover{ background:rgba(var(--crs-tint), .10); }
.crs-mk.an{ background:rgba(var(--crs-tint), .16); }
.crs-mi.an{ background:rgba(var(--crs-tint), .18); }
.crs-pin:hover{ background:rgba(var(--crs-tint), .12); }
/* Schrift und Icons auf dem Verlauf: dunkel in der Designfarbe getoent, damit
   Navigation, Kopfzeile und Menue wie aus einem Guss wirken. Der Kontrast
   bleibt bei jeder Designfarbe ueber 7:1 (heller Verlauf, dunkle Schrift). */
.crs-frame{ --crs-text:var(--ir-text); --crs-ic:var(--ir-ic); --crs-leise:var(--ir-leise); }
.crs-nv, .crs-nv:hover{ color:var(--crs-text); }
.crs-nv .material-symbols-rounded, .crs-mehrknopf .crs-mehrpfeil{ color:var(--crs-ic); }
/* Der aktive Punkt mischte mit #0b1726 — bei schwarzer Flaeche Schwarz auf
   Schwarz. Die Rolle des Rahmens stimmt in hellen wie dunklen Designs. */
.crs-nv.an, .crs-nv.an .material-symbols-rounded{ color:var(--ir-aktiv); }
.crs-mt b{ color:var(--crs-text); }
.crs-mt small{ color:var(--crs-leise); }
.crs-x{ color:var(--crs-ic); }
.crs-x:hover{ color:var(--crs-text); }
.crs-gs-feld{ color:var(--crs-ic); }
.crs-gs-feld input{ color:var(--crs-text); }
.crs-gs-feld input::placeholder{ color:var(--crs-leise); }
.crs-gs-feld kbd{ background:rgba(var(--crs-tint), .14); color:var(--crs-text); }
.crs-mehr{ color:var(--crs-text); }
.crs-mk, .crs-mig{ color:var(--crs-text); }
.crs-mk .material-symbols-rounded, .crs-mig .material-symbols-rounded{ color:var(--crs-ic); }
.crs-pin{ color:var(--crs-leise); }
.crs-mi:hover .crs-mig, .crs-mk:hover, .crs-mk.an{ color:var(--crs-text); }
.crs-mi.an .crs-mig, .crs-mi.an .crs-mig .material-symbols-rounded{ color:var(--ir-aktiv); }

/* ---------- Mails im Kontaktverlauf (Etappe 6) ----------
   Eintraege aus dem lokalen Index. Sie sehen aus wie jedes andere Ereignis,
   lassen sich aber anklicken — darum der Zeiger und die leichte Hebung. */
#crsOverlay .scrm-eridx{ cursor:pointer; border-radius:10px; margin-left:-6px; padding-left:6px; }
#crsOverlay .scrm-eridx:hover{ background:rgba(127,150,190,.10); }
#crsOverlay .scrm-eridx .scrm-erq{ color:var(--muted); }
/* Der Hinweis, wenn die Erfassung aus ist: er steht unter der Liste, nicht
   darueber — er erklaert eine Luecke, er kuendigt nichts an. */
#crsOverlay .scrm-erfhin{ margin-top:12px; padding-top:10px; border-top:1px solid var(--line); font-size:12px; }


/* ---- 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 .crs-gdlg kbd{ background:var(--field); }

/* ============================================================
   VORLAGEN (Praefix cvl) — Bereich Tools.

   Eine Tabelle, keine Liste: Vorlagen vergleicht man. Masse wie
   bei Kontakten und Firmen - 52 px Zeilen, 42 px Kopfzeile,
   16 px Polster, EINE Linie je Zeile, keine Streifen und keine
   Zellrahmen. Ein Gitter zeichnet die Tabelle, nicht die Daten.

   Bearbeitet wird in einer Schublade von rechts; die Tabelle
   bleibt daneben stehen.
   ============================================================ */
/* flex:1 ist hier KEINE Zierde: .crs-eigen ist ein Flex-Container
   in Zeilenrichtung, und ein Flex-Item ohne Wachstum bekommt nur
   die Breite seines Inhalts. Die Tabelle stand dadurch als
   schmale Spalte am linken Rand statt ueber die ganze Flaeche. */
.cvl-raum{ flex:1 1 auto; min-width:0; width:100%;
  display:flex; flex-direction:column; min-height:0; height:100%; position:relative; }

/* ---------- Filterleiste ---------- */
.cvl-fleiste{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:14px; flex:none; }
.cvl-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,#e7eef6); }
.cvl-chip:hover{ background:#f6f9fc; }
.cvl-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); }
.cvl-chip:focus-visible{ outline:2px solid var(--accent,#f0862f); outline-offset:2px; }
.cvl-n{ display:inline-grid; place-items:center; min-width:17px; height:17px; padding:0 4px; border-radius:9px;
  background:#e4ebf3; color:#5d6f83; font-size:10px; font-weight:800; }
.cvl-chip.an .cvl-n{ background:rgba(var(--accent-rgb,240,134,47),.25); color:var(--accent-dark,#a3530f); }
.cvl-ftr{ width:1px; height:20px; background:var(--scrm-linie2,#d9e4f0); margin:0 5px; }
.cvl-suche{ display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 11px;
  border-radius:15px; background:#fff; box-shadow:inset 0 0 0 1px var(--scrm-linie,#e7eef6); }
.cvl-suche .material-symbols-rounded{ font-size:16px; color:var(--scrm-mut,#8a97a8); }
.cvl-suche input{ all:unset; width:180px; font-size:12.5px; color:#12233a; }

/* ---------- Die Leiste fuer die Auswahl ----------
   Sie ERSETZT die Filterzeile, solange etwas gewaehlt ist: zwei
   Leisten uebereinander waeren zwei Angebote fuer denselben
   Augenblick. */
.cvl-wahlleiste{ display:flex; align-items:center; gap:8px; flex:none; height:44px; margin-bottom:14px;
  padding:0 12px; border-radius:14px; background:rgba(var(--accent-rgb,240,134,47),.12);
  box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb,240,134,47),.35); }
.cvl-wahlleiste b{ font-size:13px; color:#12233a; }
.cvl-wknopf{ all:unset; box-sizing:border-box; cursor:pointer; display:inline-flex; align-items:center; gap:6px;
  height:30px; padding:0 12px; border-radius:9px; font-size:12.5px; font-weight:600;
  background:#fff; color:#12233a; box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb,240,134,47),.35); }
.cvl-wknopf:hover{ filter:brightness(.98); }
.cvl-wknopf .material-symbols-rounded{ font-size:16px; }
.cvl-wknopf.weg{ color:var(--scrm-kalt,#b3261e); }
.cvl-wschub{ flex:1; }
.cvl-wmenue{ position:relative; }
.cvl-wliste{ position:absolute; left:0; top:36px; z-index:30; width:200px; display:none;
  background:#fff; border-radius:12px; padding:5px;
  box-shadow:0 14px 34px rgba(18,35,58,.16), inset 0 0 0 1px var(--scrm-linie,#e7eef6); }
.cvl-wliste.auf{ display:block; }
.cvl-wliste button{ all:unset; box-sizing:border-box; cursor:pointer; display:flex; align-items:center;
  gap:9px; width:100%; height:32px; padding:0 9px; border-radius:8px; font-size:13px; }
.cvl-wliste button:hover{ background:#f7f9fc; }

/* ---------- Die Tabelle ---------- */
.cvl-tabkarte{ flex:1; min-height:0; background:#fff; border-radius:16px; overflow:auto;
  box-shadow:inset 0 0 0 1px var(--scrm-linie,#e7eef6); }
.cvl-tab{ width:100%; border-collapse:separate; border-spacing:0; table-layout:fixed; }
.cvl-tab th{ position:sticky; top:0; z-index:2; height:42px; padding:0; background:#f7f9fc;
  border-bottom:1px solid var(--scrm-linie,#e7eef6); text-align:left; vertical-align:middle; user-select:none; }
.cvl-tab th:first-child{ border-top-left-radius:16px; }
.cvl-tab th:last-child{ border-top-right-radius:16px; }
.cvl-tab th:hover{ background:#eef3f8; }
.cvl-thbtn{ all:unset; box-sizing:border-box; cursor:pointer; display:flex; align-items:center; gap:4px;
  width:100%; height:42px; padding:0 16px; font-size:11px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--scrm-mut,#8a97a8); }
.cvl-tab th.rechts .cvl-thbtn{ justify-content:flex-end; flex-direction:row-reverse; }
.cvl-tab th:hover .cvl-thbtn, .cvl-tab th.sortiert .cvl-thbtn{ color:#12233a; }
.cvl-pfeil{ font-size:16px; opacity:0; transition:opacity .12s, transform .12s; }
.cvl-tab th:hover .cvl-pfeil{ opacity:.4; }
.cvl-tab th.sortiert .cvl-pfeil{ opacity:1; color:var(--accent-dark,#a3530f); }
.cvl-tab th.sortiert.ab .cvl-pfeil{ transform:rotate(180deg); }
.cvl-zeile{ cursor:pointer; }
.cvl-zeile:hover > td{ background:#f5f9fd; }
.cvl-zeile.offen > td{ background:rgba(var(--accent-rgb,240,134,47),.1); }
.cvl-tab td{ height:52px; padding:0 16px; border-bottom:1px solid rgba(18,35,58,.06);
  font-size:13px; color:#12233a; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  transition:background .1s; }
.cvl-tab td.rechts{ text-align:right; }
.cvl-zahl{ font-variant-numeric:tabular-nums; font-weight:600; }
/* Ein fehlender Wert ist ein Strich, kein leeres Feld. Leer sieht
   aus wie ein Fehler der Anzeige; der Strich sagt: steht nicht da. */
.cvl-ohne{ color:#c6d0da; }
.cvl-tdname{ display:flex; align-items:center; gap:10px; }
.cvl-tdname b{ font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cvl-sym{ flex:none; width:30px; height:30px; border-radius:9px; display:grid; place-items:center;
  background:#eef3f9; color:#5d6f83; }
.cvl-sym .material-symbols-rounded{ font-size:17px; }
.cvl-zeile.offen .cvl-sym{ background:rgba(var(--accent-rgb,240,134,47),.18); color:var(--accent-dark,#a3530f); }
.cvl-kat{ font-size:10.5px; font-weight:700; padding:3px 8px; border-radius:7px; white-space:nowrap; }
.cvl-kat.erstkontakt{ background:#e2eefb; color:#15618f; }
.cvl-kat.nachfassen { background:#fdf0e3; color:#c2691a; }
.cvl-kat.angebot    { background:#e6f4f1; color:#0e7c6b; }
.cvl-kat.termin     { background:#eee9fb; color:#5a42a8; }
.cvl-kat.absage     { background:#eef3f9; color:#8a97a8; }
.cvl-phz{ font:700 11px/1 ui-monospace,Consolas,monospace; padding:3px 7px; border-radius:6px;
  background:rgba(21,97,143,.1); color:#15618f; }

/* ---------- Auswahl ---------- */
.cvl-tab th.wahl, .cvl-tab td.wahl{ width:46px; padding-left:16px; padding-right:0; }
.cvl-haken{ all:unset; box-sizing:border-box; cursor:pointer; width:18px; height:18px; border-radius:5px;
  display:grid; place-items:center; background:#fff;
  box-shadow:inset 0 0 0 1.5px var(--scrm-linie2,#d9e4f0); }
.cvl-haken .material-symbols-rounded{ font-size:15px; color:#fff; opacity:0; }
.cvl-haken.an{ background:var(--accent,#f0862f); box-shadow:inset 0 0 0 1.5px var(--accent,#f0862f); }
.cvl-haken.an .material-symbols-rounded{ opacity:1; }
.cvl-haken.halb{ background:rgba(var(--accent-rgb,240,134,47),.18);
  box-shadow:inset 0 0 0 1.5px var(--accent,#f0862f); }
.cvl-haken.halb .material-symbols-rounded{ opacity:1; color:var(--accent-dark,#a3530f); }
.cvl-haken:focus-visible{ outline:2px solid var(--accent,#f0862f); outline-offset:2px; }

.cvl-leer{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  padding:60px 10px; text-align:center; color:var(--scrm-mut,#8a97a8); }
.cvl-leer .material-symbols-rounded{ font-size:28px; color:var(--scrm-linie2,#d9e4f0); }
.cvl-leer b{ font-size:13.5px; color:#12233a; }

/* ============================================================
   DIE SCHUBLADE

   Bearbeitet wird rechts, die Tabelle bleibt daneben stehen -
   man sieht weiter, wo man ist, und kann mit den Pfeiltasten
   durch die Zeilen gehen, ohne sie zu schliessen.
   ============================================================ */
.cvl-scrim{ position:fixed; inset:0; background:rgba(18,35,58,.18); opacity:0; pointer-events:none;
  transition:opacity .2s; z-index:40; }
.cvl-scrim.auf{ opacity:1; pointer-events:auto; }
.cvl-schub{ position:fixed; top:0; right:0; bottom:0; width:min(640px,52vw); z-index:41;
  background:#fff; box-shadow:-18px 0 48px rgba(18,35,58,.16), inset 1px 0 0 var(--scrm-linie,#e7eef6);
  transform:translateX(100%); transition:transform .24s cubic-bezier(.2,.7,.3,1);
  display:flex; flex-direction:column; }
.cvl-schub.auf{ transform:none; }
.cvl-schkopf{ flex:none; padding:16px 18px 0; }
.cvl-schchips{ display:flex; align-items:center; gap:8px; margin-bottom:9px; }
.cvl-schmini{ font-size:11.5px; color:var(--scrm-mut,#8a97a8); flex:1; }
.cvl-ibtn{ all:unset; box-sizing:border-box; cursor:pointer; width:30px; height:30px; border-radius:9px;
  display:grid; place-items:center; color:var(--scrm-mut,#8a97a8); }
.cvl-ibtn:hover{ background:#f7f9fc; color:#12233a; }
.cvl-schname{ all:unset; box-sizing:border-box; display:block; width:100%; font-size:19px; font-weight:700;
  letter-spacing:-.015em; line-height:1.3; color:#12233a; padding:3px 7px; margin-left:-7px; border-radius:8px; }
.cvl-schname:hover{ background:#f7f9fc; }
.cvl-schname:focus{ box-shadow:inset 0 0 0 2px rgba(var(--accent-rgb,240,134,47),.45); }
.cvl-schzeile{ display:flex; align-items:center; gap:9px; margin-top:10px; flex-wrap:wrap; }
.cvl-lbl{ font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--scrm-mut,#8a97a8); flex:none; }
.cvl-schzeile input[type=text]{ all:unset; box-sizing:border-box; flex:1; min-width:160px; font-size:13.5px;
  font-weight:600; color:#12233a; padding:6px 9px; border-radius:9px;
  box-shadow:inset 0 0 0 1px var(--scrm-linie,#e7eef6); }
.cvl-schzeile input:focus{ box-shadow:inset 0 0 0 2px rgba(var(--accent-rgb,240,134,47),.45); }
.cvl-schzeile select{ all:unset; cursor:pointer; font-size:12px; font-weight:700; color:#5d6f83;
  padding:6px 10px; border-radius:9px; box-shadow:inset 0 0 0 1px var(--scrm-linie,#e7eef6); }
.cvl-schrollt{ flex:1; min-height:0; overflow:auto; padding:14px 18px 0; }
.cvl-block{ margin-bottom:14px; }
.cvl-bk{ display:flex; align-items:center; gap:10px; margin-bottom:9px; flex-wrap:wrap; }
.cvl-bk h3{ margin:0; font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--scrm-mut,#8a97a8); }
.cvl-bk .l{ flex:1; }
.cvl-bk small{ font-size:11.5px; color:#5d6f83; }

/* ---------- Das Schreibfeld ----------
   Spiegel UNTEN, Schreibfeld darueber: laege der Spiegel oben,
   verdeckte sein Grund die Schreibmarke. Und KEIN all:unset auf
   dem Textfeld - es stuende nach dieser Regel und raeumte Lage,
   Schrift und Innenabstand wieder ab; dann liefe die Farbe neben
   dem Text her. */
.cvl-schreib{ position:relative; height:230px; }
.cvl-schreib .cvl-spiegel, .cvl-schreib textarea{
  position:absolute; inset:0; display:block; margin:0; padding:12px 14px;
  font-family:inherit; font-size:13.5px; font-weight:400; line-height:1.7;
  letter-spacing:normal; word-spacing:normal; tab-size:4;
  white-space:pre-wrap; overflow-wrap:break-word;
  border:0; border-radius:11px; overflow:auto; }
.cvl-schreib .cvl-spiegel{ background:#f7f9fc; color:#12233a; pointer-events:none;
  box-shadow:inset 0 0 0 1px var(--scrm-linie,#e7eef6); }
.cvl-schreib textarea{ outline:none; resize:none; background:none;
  color:transparent; caret-color:var(--accent,#f0862f); }
.cvl-schreib textarea::placeholder{ color:var(--scrm-mut,#8a97a8); }
.cvl-schreib.fokus .cvl-spiegel{ background:#fff;
  box-shadow:inset 0 0 0 2px rgba(var(--accent-rgb,240,134,47),.4); }
/* Eine Marke darf die Zeilenhoehe nicht aendern, sonst schiebt
   sich der Spiegel gegen das Schreibfeld. */
.cvl-mk{ line-height:inherit; border-radius:4px; padding:1px 2px; font-weight:600; }
.cvl-mk.empf{ background:rgba(21,97,143,.13); color:#15618f; }
.cvl-mk.allg{ background:#eef3f9; color:#5d6f83; }
.cvl-mk.tot { background:#fdecea; color:#b3261e; text-decoration:line-through; }

.cvl-phleiste{ display:flex; align-items:center; gap:4px; flex-wrap:wrap; margin-top:9px; }
.cvl-ph{ all:unset; box-sizing:border-box; cursor:pointer; font:600 11.5px/1 ui-monospace,Consolas,monospace;
  padding:5px 7px; border-radius:6px; color:#5d6f83; background:#eef3f9; }
.cvl-ph.empf{ color:#15618f; background:rgba(21,97,143,.1); }
.cvl-ph:hover, .cvl-ph.empf:hover{ background:rgba(var(--accent-rgb,240,134,47),.16);
  color:var(--accent-dark,#a3530f); }
.cvl-ph:focus-visible{ outline:2px solid var(--accent,#f0862f); outline-offset:1px; }
.cvl-ltr{ width:1px; height:16px; background:var(--scrm-linie2,#d9e4f0); margin:0 4px; }

/* ---------- Die Vorschau ---------- */
.cvl-ech{ all:unset; box-sizing:border-box; cursor:pointer; font-size:11.5px; font-weight:600;
  padding:4px 9px; border-radius:8px; color:#5d6f83; box-shadow:inset 0 0 0 1px var(--scrm-linie2,#d9e4f0); }
.cvl-ech:hover{ background:#f7f9fc; }
.cvl-ech.an{ background:#e2eefb; color:#15618f; box-shadow:inset 0 0 0 1px rgba(21,97,143,.3); }
.cvl-papier{ padding:16px 18px; background:#fff; border-radius:12px;
  box-shadow:inset 0 0 0 1px var(--scrm-linie,#e7eef6); }
.cvl-pan{ font-size:11.5px; color:var(--scrm-mut,#8a97a8); }
.cvl-pan b{ font-weight:600; color:#5d6f83; font-size:12.5px; }
.cvl-pbetreff{ font-size:15px; font-weight:700; line-height:1.35; color:#12233a; margin:8px 0 12px;
  padding-bottom:12px; border-bottom:1px solid var(--scrm-linie,#e7eef6); }
.cvl-ptext{ font-size:13.5px; line-height:1.7; color:#12233a; white-space:pre-wrap; overflow-wrap:break-word; }
.cvl-pleer{ color:var(--scrm-mut,#8a97a8); font-style:italic; }
.cvl-fuell{ border-radius:3px; padding:0 1px; background:rgba(21,97,143,.1); }

.cvl-schfuss{ flex:none; display:flex; align-items:center; gap:8px; padding:12px 18px;
  border-top:1px solid var(--scrm-linie,#e7eef6); }
.cvl-schub2{ flex:1; }
.cvl-btn{ all:unset; box-sizing:border-box; cursor:pointer; display:inline-flex; align-items:center; gap:6px;
  height:32px; padding:0 13px; border-radius:9px; font-size:12.5px; font-weight:600;
  background:#fff; color:#12233a; box-shadow:inset 0 0 0 1px var(--scrm-linie2,#d9e4f0); }
.cvl-btn:hover{ background:#f7f9fc; }
.cvl-btn.voll{ background:var(--accent,#f0862f); color:#fff; box-shadow:none; }
.cvl-btn.voll:hover{ filter:brightness(.94); }
.cvl-btn.weg{ color:var(--scrm-kalt,#b3261e); }
.cvl-btn.weg:hover{ background:#fdecea; }
.cvl-btn .material-symbols-rounded{ font-size:17px; }
.cvl-btn:focus-visible{ outline:2px solid var(--accent,#f0862f); outline-offset:2px; }

/* Gespeichert. Kein Knopf mehr, sondern eine Auskunft: blass,
   ohne Hand, nicht anklickbar. Wer darauf zielt, hat nichts zu
   tun - und soll das sehen, bevor er klickt. */
.cvl-btn.fertig{ cursor:default; color:#0e7c6b; background:#e6f4f1; box-shadow:none; }
.cvl-btn.fertig:hover{ background:#e6f4f1; filter:none; }
/* Noch nichts da, was man speichern koennte. */
.cvl-btn.leer{ cursor:default; color:#c6d0da; background:none; box-shadow:inset 0 0 0 1px var(--scrm-linie,#e7eef6); }
.cvl-btn.leer:hover{ background:none; filter:none; }

/* ============================================================
   SNIPPETS

   Dieselbe Seite wie die Vorlagen, nur kuerzer: Tabelle links,
   Schublade rechts. Beide Formen kommen aus dem cvl-Block
   darueber - hier steht nur, was ein Snippet mehr hat als eine
   Vorlage: das Kuerzel.

   Das Kuerzel ist technischer Text, kein Satz. Es steht darum
   in einer festen Schrift: so sieht man, dass #ang und #ANG
   nicht dasselbe sind, und ein l ist kein 1.
   ============================================================ */
.csn-kuerzel{ font:700 11.5px/1 ui-monospace,Consolas,monospace; padding:4px 8px; border-radius:7px;
  background:#e2eefb; color:#15618f; white-space:nowrap; }
/* Spezifisch genug, um gegen .cvl-schzeile input[type=text] anzukommen -
   sonst wird das Feld so breit wie die ganze Zeile, obwohl ein Kuerzel
   nie laenger als ein Wort ist. */
.cvl-schzeile input.csn-kfeld{ font:700 13px/1 ui-monospace,Consolas,monospace;
  flex:0 0 auto; width:180px; min-width:120px; }

/* Der Blitz im Zeilenkopf. Die Vorlagen haben dort ein Blatt;
   dass die beiden Seiten verschiedene Symbole fuehren, ist der
   einzige Weg, sie in einer Liste auseinanderzuhalten. */
.csn-sym{ background:#eef3f9; color:#5d6f83; }
.cvl-zeile.offen .csn-sym{ background:rgba(var(--accent-rgb,240,134,47),.18); color:var(--accent-dark,#a3530f); }

/* Wie oft der Baustein in einer Vorlage steckt. Nicht grau wie
   die Platzhalterzahl: eine Null hier heisst, dass der Baustein
   nirgends gebraucht wird. */
.csn-drin{ font:700 11px/1 ui-monospace,Consolas,monospace; padding:3px 7px; border-radius:6px;
  background:#e6f4f1; color:#0e7c6b; }

/* Der Zaehler oben links laesst sich nicht abwaehlen - es gibt
   nur eine Liste. Er sieht aus wie ein Filter, ist aber keiner,
   also zeigt er auch keine Hand. */
.csn-fest{ cursor:default; }

/* Ein Platzhalter, den das Snippet nicht kennt. Bei den Vorlagen
   waere das ein Fehler (cvl-mk.tot, rot durchgestrichen) - hier
   nicht: die Vorlage, in die der Baustein spaeter rutscht, kann
   ihn durchaus fuellen. Also stehen lassen und kenntlich machen,
   nicht anstreichen. */
.cvl-mk.weiter{ background:#eee9fb; color:#5a42a8; }
.csn-weiter{ border-radius:3px; padding:0 2px; background:#eee9fb; color:#5a42a8;
  font-weight:600; }

/* Die drei Wege, einen Baustein einzusetzen. Steht in der
   Schublade unter der Vorschau: eine Zeile je Weg, Symbol links,
   Name und Erklaerung rechts. */
.csn-wz{ display:flex; align-items:flex-start; gap:10px; padding:10px 12px; border-radius:11px;
  background:#f7f9fc; margin-bottom:6px; }
.csn-wz .material-symbols-rounded{ flex:none; font-size:18px; color:var(--scrm-mut,#8a97a8);
  margin-top:1px; }
.csn-wz span{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.csn-wz b{ font-size:12.5px; font-weight:700; color:#12233a; }
.csn-wz small{ font-size:11.5px; line-height:1.5; color:#5d6f83; }
.csn-wz code{ font:700 11.5px/1 ui-monospace,Consolas,monospace; padding:1px 5px; border-radius:5px;
  background:#e2eefb; color:#15618f; }
.csn-steckt{ font-size:11.5px; line-height:1.6; color:#5d6f83; padding:8px 12px; border-radius:11px;
  background:rgba(var(--accent-rgb,240,134,47),.08); }
.csn-steckt b{ font-weight:700; color:#12233a; }

/* Die Beschreibung einer Anforderung: im Dialog und im Blatt
   dasselbe Feld. Nur senkrecht groesser zu ziehen - waagerecht
   wuerde es aus seiner Spalte laufen. */
.crs-abesch{
  width:100%; box-sizing:border-box;
  resize:vertical; min-height:62px; line-height:1.55;
  font:inherit; font-size:13.5px;
}


/* ============================================================
   DAS PRODUKTBLATT

   Zweispaltig: links die Stammdaten (produkt-arten.css),
   rechts die Zahlen. Gestaltet wie das Dashboard - weisse
   Karten, feine Linien, Farbe nur wo sie etwas bedeutet.
   ============================================================ */
.crs-pzwei {
  display: grid; grid-template-columns: 300px minmax(0, 1fr);
  gap: 14px; align-items: start;
  /* flex:1 1 auto, weil #crsEigen ein Flex-Kasten ist: ohne das
     nimmt das Raster die Breite seines Inhalts und laesst die
     halbe Seite leer. Gemessen: 623 von 1429 Pixeln. */
  flex: 1 1 auto; width: 100%;
  min-width: 0; min-height: 0; overflow-y: auto; padding-right: 2px;
}
/* min-width:0 am Kind: ohne das nimmt die rechte Spalte die
   Mindestbreite ihres breitesten Inhalts und sprengt das
   Raster. */
.crs-prechts { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
@media (max-width: 1150px) { .crs-pzwei { grid-template-columns: 1fr; } }

/* ---------- Die vier Kennzahlen ---------- */
.crs-pkzs { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 12px; }
.crs-pk {
  background: #fff; border: 1px solid var(--scrm-linie, #e7eef6);
  border-radius: 14px; padding: 13px 15px 14px; min-width: 0;
}
.crs-pkt { display: flex; align-items: flex-start; gap: 8px; }
.crs-pkt b { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; }
.crs-pkic {
  width: 26px; height: 26px; border-radius: 8px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--ci-soft, #eef3f9); color: var(--ci-mut, #647089);
}
.crs-pkic .material-symbols-rounded { font-size: 15px; }
.crs-pku { font-size: 11.5px; color: var(--ci-mut, #647089); margin-top: 1px; }
.crs-pkz {
  font-size: 28px; font-weight: 800; letter-spacing: -.03em; line-height: 1.05;
  margin-top: 9px; font-variant-numeric: tabular-nums;
}
.crs-pkz em { font-size: 13px; font-weight: 600; font-style: normal;
  color: var(--ci-faint, #8a97a8); margin-left: 4px; }
.crs-pkf { font-size: 11.5px; color: var(--ci-mut, #647089); margin-top: 7px; }
.crs-pkf b { color: var(--scrm-tinte, #12233a); font-weight: 600; }
.crs-pk.warm .crs-pkic { background: #fdf0e3; color: #c2691a; }
.crs-pk.warm .crs-pkz { color: #c2691a; }
/* GENAU EINE traegt die Designfarbe vollflaechig: die Zahl,
   die jeden Monat wiederkommt. Zwei waeren zwei Blickfaenge,
   und dann ist keiner mehr einer. */
.crs-pk.voll { background: var(--accent, #f0862f); border-color: var(--accent, #f0862f); }
.crs-pk.voll .crs-pkt b, .crs-pk.voll .crs-pkz { color: #fff; }
.crs-pk.voll .crs-pku, .crs-pk.voll .crs-pkf { color: rgba(255,255,255,.82); }
.crs-pk.voll .crs-pkf b { color: #fff; }
.crs-pk.voll .crs-pkz em { color: rgba(255,255,255,.72); }
.crs-pk.voll .crs-pkic { background: rgba(255,255,255,.22); }
.crs-pk.voll .crs-pkic .material-symbols-rounded { color: #fff; }

/* ---------- Ein Block mit Kopfzeile ---------- */
.crs-pblock { padding: 15px 17px 17px; border-radius: 16px; }
.crs-pbk { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.crs-pbk h3 {
  margin: 0; font-size: 10.5px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ci-faint, #8a97a8);
}
.crs-pbz {
  font-size: 11.5px; font-weight: 700; color: var(--ci-mut, #647089);
  background: var(--ci-soft, #eef3f9); border-radius: 999px; padding: 1px 8px;
}

/* ---------- Zeile mit Balken ----------
   Der Balken ist der Anteil am Monatsumsatz. Eine Liste mit
   Betraegen sagt dasselbe, aber man muss sie lesen. */
.crs-pzl { display: flex; flex-direction: column; }
.crs-pz {
  display: flex; align-items: center; gap: 10px;
  height: 34px; border-top: 1px solid var(--scrm-linie, #e7eef6);
  font-size: 13px; min-width: 0;
}
.crs-pz:first-child { border-top: 0; }
.crs-pzn { flex: 0 1 42%; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.crs-pbahn { flex: 1; min-width: 0; height: 8px; border-radius: 999px;
  background: var(--ci-soft, #eef3f9); overflow: hidden; }
.crs-pbahn i { display: block; height: 100%; border-radius: 999px;
  background: var(--scrm-linie2, #d9e4f0); }
.crs-pbahn i.akz { background: var(--accent, #f0862f); }
.crs-pbahn i.kalt { background: #b3261e; }
.crs-ppl {
  flex: none; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 7px;
  background: var(--ci-soft, #eef3f9); color: var(--ci-mut, #647089);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.crs-ppl.akz { background: rgba(var(--accent-rgb, 240,134,47), .14); color: var(--accent-dark, #a3530f); }
.crs-ppl.kalt { background: #fdecea; color: #b3261e; }

/* ---------- Trichter ----------
   Dieselbe Form wie im Dashboard: die Saettigung waechst nach
   unten, die Zahl steht IM Balken. */
.crs-ptri { display: flex; flex-direction: column; gap: 6px; }
.crs-ptz { display: grid; grid-template-columns: 112px 1fr auto;
  align-items: center; gap: 11px; min-width: 0; }
.crs-ptn { font-size: 12px; color: var(--ci-mut, #647089);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crs-ptb {
  display: flex; align-items: center; justify-content: flex-end;
  height: 26px; border-radius: 7px; min-width: 34px;
  background: rgba(var(--accent-rgb, 240,134,47), calc(.28 + var(--i, 0) * .17));
}
.crs-ptb b { color: #fff; font-size: 12px; font-weight: 700; padding-right: 10px;
  font-variant-numeric: tabular-nums; }
.crs-ptw { font-size: 11px; font-weight: 600; color: var(--ci-faint, #8a97a8);
  white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Der Knopf rechts in der Kopfzeile eines Blocks. Flach und in
   der Designfarbe: er ist eine Nebenhandlung, kein Hauptknopf. */
.crs-pbl { flex: 1; }
.crs-pbtun {
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  border: 0; background: none; color: var(--accent-dark, #a3530f);
  padding: 4px 8px; border-radius: 8px;
}
.crs-pbtun:hover { background: rgba(var(--accent-rgb, 240,134,47), .1); }

/* Das Gespraech sitzt jetzt IN der Karte, nicht in einer
   zweiten darin. */
.crs-pblock .crs-pdocs { background: none; border: 0; padding: 0; }


/* ============================================================
   DIE ANFORDERUNGSSEITE
   aus previews/anforderungen-neu.html

   Die Filter stehen OBEN, waagerecht, nach dem Muster der Leads
   (.cld-filter in crm.css). In der linken Spalte nahmen sie drei
   Reihen und damit ein Drittel der Liste weg - und man las sie
   bei jedem Blick mit.
   ============================================================ */
.crs-awrap {
  display: flex; flex-direction: column; gap: 0;
  flex: 1 1 auto; min-width: 0; min-height: 0; width: 100%;
}

.crs-akopf { display: flex; align-items: baseline; gap: 12px; flex: 0 0 auto; }
.crs-akopf h2 {
  margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.02em;
  color: var(--scrm-tinte, #12233a);
}
.crs-akz { font-size: 13px; color: var(--ci-mut, #647089); }
.crs-aschub { flex: 1; }
.crs-asub { font-size: 12.5px; color: var(--ci-mut, #647089); margin: 2px 0 14px; flex: 0 0 auto; }

/* Die eine Handlung gehoert zur SEITE, nicht zu den Filtern. */
.crs-aneu {
  all: unset; box-sizing: border-box; cursor: pointer; align-self: center;
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 13px; border-radius: 15px;
  font-size: 12.5px; font-weight: 700;
  background: var(--accent, #f0862f); color: #fff;
}
.crs-aneu:hover { filter: brightness(.94); }
.crs-aneu:focus-visible { outline: 2px solid var(--accent, #f0862f); outline-offset: 2px; }
.crs-aneu .material-symbols-rounded { font-size: 17px; }

/* ---------- Die Filterleiste ---------- */
.crs-afl {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-bottom: 14px; flex: 0 0 auto;
}
.crs-afch {
  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, #e7eef6);
}
.crs-afch:hover { background: #f6f9fc; }
.crs-afch.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);
}
.crs-afch:focus-visible { outline: 2px solid var(--accent, #f0862f); outline-offset: 2px; }
/* Die Zahl dahinter: eine Null sagt "hier ist noch nichts", und
   das ist die nuetzlichste Auskunft, die dieser Knopf geben
   kann. */
.crs-afch i {
  font-style: normal; font-size: 11px; font-weight: 800;
  opacity: .6; margin-left: 1px;
}
.crs-afch.an i { opacity: .85; }
.crs-afpkt { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.crs-aftr { width: 1px; height: 20px; background: var(--scrm-linie2, #d9e4f0); margin: 0 5px; }
.crs-aflbl {
  font-size: 11px; font-weight: 700; color: var(--ci-faint, #8a97a8);
  text-transform: uppercase; letter-spacing: .05em; margin: 0 2px 0 4px;
}

/* ---------- Der Rahmen ---------- */
.crs-azwei {
  display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: 14px; align-items: start;
  flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: 2px;
  overscroll-behavior: contain; scrollbar-gutter: stable;
}
@media (max-width: 1150px) { .crs-azwei { grid-template-columns: 1fr; } }

/* ---------- Die Liste ---------- */
.crs-aliste { padding: 8px; border-radius: 16px; align-self: start; }
.crs-alz {
  all: unset; box-sizing: border-box; cursor: pointer;
  display: block; width: 100%;
  padding: 10px 11px; border-radius: 11px;
}
.crs-alz:hover { background: var(--ci-soft, #eef3f9); }
.crs-alz.an {
  background: rgba(var(--accent-rgb, 240,134,47), .1);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb, 240,134,47), .3);
}
.crs-alz:focus-visible { outline: 2px solid var(--accent, #f0862f); outline-offset: -2px; }
.crs-alzt { display: flex; align-items: baseline; gap: 8px; }
.crs-alzt b {
  flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; line-height: 1.35;
  color: var(--scrm-tinte, #12233a);
}
.crs-alzg {
  flex: none; font-size: 12.5px; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--scrm-tinte, #12233a);
}
.crs-alzu { display: flex; align-items: center; gap: 6px; margin-top: 5px; flex-wrap: wrap; }
.crs-alzp {
  font-size: 10.5px; font-weight: 600; color: var(--ci-mut, #647089);
  display: inline-flex; align-items: center; gap: 4px;
}
.crs-alzw {
  font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 7px;
  background: #e2eefb; color: #15618f;
}
/* Der Balken ist der Anteil am groessten gebundenen Wert - so
   sieht man die Rangfolge, ohne die Zahlen zu lesen. */
.crs-alzb {
  display: block; height: 5px; border-radius: 999px; margin-top: 7px;
  background: var(--ci-soft, #eef3f9); overflow: hidden;
}
.crs-alzb i { display: block; height: 100%; border-radius: 999px; background: var(--scrm-linie2, #d9e4f0); }
.crs-alzb i.an { background: var(--accent, #f0862f); }
.crs-aleer { padding: 26px 10px; text-align: center; color: var(--ci-mut, #647089); font-size: 13px; }

/* ---------- Das Blatt ---------- */
.crs-ablatt { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.crs-abkopf { padding: 16px 18px; border-radius: 16px; }
.crs-abchips { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 8px; }
.crs-abname {
  font-size: 19px; font-weight: 700; letter-spacing: -.015em; line-height: 1.3;
  color: var(--scrm-tinte, #12233a);
}
/* Die Beschreibung steht gleich unter dem Namen und ist dort
   aenderbar - wer das Blatt oeffnet, will zuerst wissen, worum
   es geht. */
.crs-abbesch {
  display: block; width: 100%; box-sizing: border-box; margin: 10px 0 0;
  font: inherit; font-size: 13px; line-height: 1.6; color: var(--ci-mut, #647089);
  background: transparent; border: 1px solid transparent; border-radius: 9px;
  padding: 7px 9px; resize: vertical; min-height: 62px;
}
.crs-abbesch:hover { border-color: var(--scrm-linie, #e7eef6); }
.crs-abbesch:focus {
  outline: 0; border-color: var(--accent, #f0862f);
  background: #fff; color: var(--scrm-tinte, #12233a);
}
.crs-abreihe { display: flex; align-items: center; gap: 7px; margin-top: 12px; flex-wrap: wrap; }
.crs-abver { display: inline-flex; align-items: center; gap: 7px; margin-left: 4px; }
.crs-abver span { font-size: 11.5px; color: var(--ci-faint, #8a97a8); }
.crs-abver input { width: 76px; font-size: 12.5px; }
.crs-abknopf {
  all: unset; box-sizing: border-box; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 13px; border-radius: 9px;
  font-size: 12.5px; font-weight: 600; color: var(--scrm-tinte, #12233a);
  box-shadow: inset 0 0 0 1px var(--scrm-linie2, #d9e4f0); background: #fff;
}
.crs-abknopf:hover { background: var(--ci-soft, #eef3f9); }
.crs-abknopf:focus-visible { outline: 2px solid var(--accent, #f0862f); outline-offset: 2px; }
.crs-abknopf .material-symbols-rounded { font-size: 17px; }
.crs-abknopf.voll { background: var(--accent, #f0862f); color: #fff; box-shadow: none; }
.crs-abknopf.voll:hover { filter: brightness(.94); }

/* ---------- Kennzahlen ---------- */
.crs-akzs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.crs-akzl {
  background: #fff; border: 1px solid var(--scrm-linie, #e7eef6);
  border-radius: 14px; padding: 12px 14px 13px; min-width: 0;
}
.crs-akzt { display: flex; align-items: flex-start; gap: 8px; }
.crs-akzt b { flex: 1; min-width: 0; font-size: 12px; font-weight: 600; }
.crs-akzic {
  width: 24px; height: 24px; border-radius: 7px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--ci-soft, #eef3f9); color: var(--ci-mut, #647089);
}
.crs-akzic .material-symbols-rounded { font-size: 14px; }
.crs-akzz {
  font-size: 26px; font-weight: 800; letter-spacing: -.03em; line-height: 1.05;
  margin-top: 8px; font-variant-numeric: tabular-nums;
}
.crs-akzf { font-size: 11.5px; color: var(--ci-mut, #647089); margin-top: 6px; }
.crs-akzl.kalt .crs-akzz { color: #b3261e; }
.crs-akzl.kalt .crs-akzic { background: #fdecea; color: #b3261e; }
/* GENAU EINE traegt die Designfarbe: der gebundene Wert ist das
   Argument, mit dem eine Anforderung in die Planung kommt. */
.crs-akzl.voll { background: var(--accent, #f0862f); border-color: var(--accent, #f0862f); }
.crs-akzl.voll .crs-akzt b, .crs-akzl.voll .crs-akzz { color: #fff; }
.crs-akzl.voll .crs-akzf { color: rgba(255,255,255,.82); }
.crs-akzl.voll .crs-akzic { background: rgba(255,255,255,.22); }
.crs-akzl.voll .crs-akzic .material-symbols-rounded { color: #fff; }

/* ---------- Eine Nennung ---------- */
.crs-ann { padding: 11px 0; border-top: 1px solid var(--scrm-linie, #e7eef6); }
.crs-ann:first-of-type { border-top: 0; }
.crs-annk { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.crs-annq {
  font-size: 11.5px; color: var(--ci-faint, #8a97a8);
  display: inline-flex; align-items: center; gap: 4px;
}
.crs-annq .material-symbols-rounded { font-size: 14px; }
.crs-annwer { flex: 1; min-width: 0; font-size: 12.5px; text-align: right; color: var(--ci-mut, #647089); }
.crs-annton {
  margin: 8px 0 0; padding: 9px 12px;
  border-left: 3px solid var(--scrm-linie2, #d9e4f0);
  background: var(--ci-soft, #f7f9fc); border-radius: 0 9px 9px 0;
  font-size: 13px; line-height: 1.55; color: var(--scrm-tinte, #12233a);
}
.crs-annch {
  margin-top: 7px; font-size: 11.5px; color: var(--ci-mut, #647089);
  display: inline-flex; align-items: center; gap: 5px;
}
.crs-annch .material-symbols-rounded { font-size: 14px; }
.crs-avermerk {
  display: flex; align-items: flex-start; gap: 9px; margin-top: 12px;
  padding: 10px 12px; border-radius: 10px;
  background: var(--ci-soft, #eef3f9); font-size: 12.5px; color: var(--ci-mut, #647089);
}
.crs-avermerk .material-symbols-rounded { font-size: 18px; flex: none; }

/* ---------- Wer wartet ---------- */
.crs-awz {
  display: flex; align-items: center; gap: 10px; height: 34px;
  border-top: 1px solid var(--scrm-linie, #e7eef6); font-size: 13px;
  min-width: 0; cursor: pointer;
}
.crs-awz:first-of-type { border-top: 0; }
.crs-awz:hover .crs-awzn { color: var(--accent-dark, #a3530f); }
.crs-awz.ge { opacity: .7; cursor: default; }
.crs-awzn { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crs-awzf { flex: 1; min-width: 0; font-size: 11.5px; color: var(--ci-faint, #8a97a8);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crs-awzs {
  flex: none; font-size: 11.5px; font-weight: 600; color: var(--ci-mut, #647089);
  display: inline-flex; align-items: center; gap: 4px;
}
.crs-awzs .material-symbols-rounded { font-size: 15px; }
.crs-awzs.rot { color: #b3261e; }

/* ============================================================
   LIVE-CHAT (clc-)

   Die Seite benutzt das Geruest der Vorlagen- und Snippetseite:
   .cvl-fleiste, .cvl-chip, .cvl-tabkarte, .cvl-tab, .cvl-schub,
   .cvl-block, .cvl-btn. Hier steht nur, was dazukommt — der
   Verlauf, das Antwortfeld und die Vorschau des Widgets.
   ============================================================ */
.clc-raum{ flex:1 1 auto; min-width:0; width:100%;
  display:flex; flex-direction:column; min-height:0; height:100%; position:relative; }
.clc-hinweis{ font-size:12px; color:var(--scrm-mut,#8a97a8); }

/* ---------- Tabelle ---------- */
.clc-av{ width:32px; height:32px; border-radius:50%; flex:none; display:grid; place-items:center;
  font-size:11.5px; font-weight:800; background:#e4edf7; color:#41556d; }
.clc-av .material-symbols-rounded{ font-size:18px; }
.clc-av.anon{ background:#f0f3f7; color:#a6b2c1; }
.clc-av.gross{ width:40px; height:40px; font-size:13px; }
/* Der ungelesene Punkt steht VOR dem Namen, nicht als Zahl dahinter:
   in einer Tabelle zaehlt die Spur von oben nach unten. */
.clc-punkt{ width:7px; height:7px; border-radius:50%; background:var(--accent,#f0862f); flex:none; }
.cvl-zeile.neu td{ font-weight:600; }
.clc-vor{ color:#5d6f83; }
.cvl-zeile.neu .clc-vor{ color:#12233a; }
.clc-quellic{ font-size:15px; color:var(--scrm-mut,#8a97a8); }
.clc-st{ display:inline-flex; align-items:center; gap:5px; height:22px; padding:0 9px; border-radius:11px;
  font-size:11px; font-weight:800; }
.clc-st.wartet{ background:rgba(179,38,30,.1); color:var(--scrm-kalt,#b3261e); }
.clc-st.offen{ background:rgba(var(--accent-rgb,240,134,47),.14); color:var(--accent-dark,#a3530f); }
.clc-st.erledigt{ background:#eef2f7; color:#5d6f83; }
.clc-st.aktiv{ background:rgba(14,124,107,.12); color:var(--scrm-gut,#0e7c6b); }
.clc-st.aus{ background:#eef2f7; color:#8a97a8; }
.crs-nz.clc-rot{ background:rgba(179,38,30,.14); color:var(--scrm-kalt,#b3261e); }

/* ---------- Schublade: Unterhaltung ---------- */
.clc-wer{ display:flex; align-items:center; gap:11px; }
.clc-wer b{ font-size:19px; font-weight:700; letter-spacing:-.015em; }
.clc-werzeile{ font-size:11.5px; color:var(--scrm-mut,#8a97a8); }
.clc-tun{ gap:6px; }
.clc-tun .cvl-chip.clc-fest{ cursor:default; }
.clc-tun .cvl-chip.clc-gefahr{ color:var(--scrm-kalt,#b3261e); }
.clc-verlauf{ flex:1; min-height:0; overflow-y:auto; padding:14px 18px 4px; background:#fbfcfe; }
.clc-bl{ max-width:76%; padding:9px 12px; border-radius:14px; font-size:13px; margin-bottom:9px;
  white-space:pre-wrap; word-break:break-word; }
.clc-bl.gast{ background:#fff; box-shadow:inset 0 0 0 1px var(--scrm-linie,#e7eef6); border-bottom-left-radius:5px; }
.clc-bl.wir{ background:var(--accent,#f0862f); color:#fff; margin-left:auto; border-bottom-right-radius:5px; }
.clc-bl .z{ display:block; font-size:10px; margin-top:4px; opacity:.65; font-weight:600; }
.clc-sys{ text-align:center; font-size:11px; color:var(--scrm-mut,#8a97a8); margin:10px 0 12px; font-weight:600; }
.clc-sys .material-symbols-rounded{ font-size:13px; margin-right:3px; vertical-align:-2px; }

.clc-antwort{ flex:none; border-top:1px solid var(--scrm-linie,#e7eef6); padding:9px 14px 12px; }
.clc-antwort.aus{ opacity:.5; pointer-events:none; }
.clc-werkzeug{ display:flex; gap:4px; margin-bottom:7px; position:relative; }
.clc-werkzeug .cvl-ibtn{ box-shadow:inset 0 0 0 1px var(--scrm-linie,#e7eef6); }
.clc-feld{ display:flex; align-items:flex-end; gap:8px; }
.clc-feld textarea{ flex:1; resize:none; border:0; outline:0; box-shadow:inset 0 0 0 1px var(--scrm-linie,#e7eef6);
  border-radius:12px; padding:9px 11px; font:inherit; font-size:13px; min-height:40px; max-height:110px; color:#12233a; }
.clc-feld textarea:focus{ box-shadow:inset 0 0 0 2px rgba(var(--accent-rgb,240,134,47),.45); }
.clc-senden{ all:unset; cursor:pointer; background:var(--accent,#f0862f); color:#fff; width:40px; height:40px;
  border-radius:20px; display:grid; place-items:center; flex:none; }
.clc-senden[disabled]{ background:#dde5ee; cursor:default; }
.clc-hint{ font-size:10.5px; color:var(--scrm-mut,#8a97a8); margin-top:6px; }

.clc-bausteine{ position:absolute; bottom:44px; left:0; width:300px; background:#fff;
  box-shadow:0 18px 44px -14px rgba(18,35,58,.32), 0 0 0 1px var(--scrm-linie,#e7eef6);
  border-radius:12px; padding:6px; z-index:30; display:none; }
.clc-bausteine.an{ display:block; }
.clc-bausteine .tt{ font-size:10.5px; font-weight:800; color:var(--scrm-mut,#8a97a8); padding:5px 8px 3px;
  text-transform:uppercase; letter-spacing:.04em; }
.clc-bausteine button{ all:unset; box-sizing:border-box; cursor:pointer; display:flex; width:100%;
  align-items:center; gap:8px; padding:7px 8px; border-radius:8px; font-size:12.5px; }
.clc-bausteine button:hover{ background:#f2f7fc; }
.clc-bausteine .kb{ background:#eef3f9; color:#5d6f83; font-size:10.5px; font-weight:800; border-radius:5px;
  padding:1px 5px; font-family:ui-monospace,Consolas,monospace; }
.clc-bausteine .leer, .clc-bnote{ padding:4px 8px 7px; font-size:11px; color:var(--scrm-mut,#8a97a8); }

/* ---------- Schublade: Website ----------
   Die Vorschau klebt oben. Wer Farbe, Avatar oder Begruessung
   aendert, sieht es sofort — und waehlt den Zustand, den er
   pruefen will. */
.clc-vsstreifen{ position:sticky; top:0; z-index:5; background:#f1f5f9; padding:12px 18px 14px;
  border-bottom:1px solid var(--scrm-linie,#e7eef6); }
.clc-vskopfzeile{ display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.clc-vskopfzeile .cvl-lbl{ flex:1; }
.clc-vswahl{ display:flex; gap:3px; background:#e2e8f1; border-radius:9px; padding:3px; }
.clc-vswahl button{ all:unset; cursor:pointer; border-radius:7px; padding:4px 9px; font-size:11.5px;
  font-weight:700; color:#5d6f83; }
.clc-vswahl button.an{ background:#fff; color:#12233a; box-shadow:0 1px 2px rgba(18,35,58,.12); }
.clc-vs{ position:relative; height:290px; border-radius:12px; overflow:hidden; background:#fff;
  box-shadow:inset 0 0 0 1px var(--scrm-linie,#e7eef6);
  background-image:linear-gradient(rgba(18,35,58,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18,35,58,.035) 1px, transparent 1px);
  background-size:22px 22px; }
.clc-vs.aus .clc-vsecke{ opacity:.4; filter:grayscale(.5); }
.clc-vsaus{ position:absolute; left:0; right:0; top:0; background:#eef2f7; color:#5d6f83; font-size:11.5px;
  font-weight:700; text-align:center; padding:6px 10px; box-shadow:inset 0 -1px 0 var(--scrm-linie,#e7eef6); z-index:2; }
.clc-vsaus .material-symbols-rounded{ font-size:14px; margin-right:4px; vertical-align:-3px; }
.clc-vsecke{ position:absolute; right:14px; bottom:14px; display:flex; flex-direction:column;
  align-items:flex-end; gap:9px; }
.clc-vs.links .clc-vsecke{ right:auto; left:14px; align-items:flex-start; }
.clc-vsblase{ height:52px; min-width:52px; border-radius:26px; background:var(--vf,#1a9bdb); color:#fff;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  box-shadow:0 6px 18px rgba(18,35,58,.24); font-size:13.5px; font-weight:700; }
.clc-vsblase.pille{ padding:0 20px 0 17px; }
.clc-vsblase .material-symbols-rounded{ font-size:24px; }
.clc-vsruf{ background:#fff; border-radius:13px; box-shadow:0 8px 26px rgba(18,35,58,.18); padding:10px 12px;
  max-width:230px; font-size:12px; line-height:1.45; }
.clc-vsfenster{ width:268px; height:240px; background:#fff; border-radius:14px; overflow:hidden;
  box-shadow:0 10px 30px rgba(18,35,58,.22); display:flex; flex-direction:column; }
.clc-vskopf{ background:var(--vf,#1a9bdb); color:#fff; padding:10px 11px; display:flex; align-items:center; gap:9px; }
.clc-vsav{ width:32px; height:32px; border-radius:50%; flex:none; display:grid; place-items:center;
  font-size:11.5px; font-weight:800; background:rgba(255,255,255,.24); }
.clc-vsav .material-symbols-rounded{ font-size:20px; }
.clc-vsav.foto{ background:#d7e3f0; color:#5d6f83; }
.clc-vsav.logo{ background:#fff; color:var(--vf,#1a9bdb); }
.clc-vskopf b{ display:block; font-size:12.5px; font-weight:800; }
.clc-vskopf small{ display:block; font-size:10.5px; opacity:.9; }
.clc-vskopf .x{ margin-left:auto; opacity:.85; }
.clc-vskopf .x .material-symbols-rounded{ font-size:18px; }
.clc-vskoerper{ flex:1; min-height:0; padding:11px 10px; background:#fbfcfe; overflow:hidden; }
.clc-vsgruss{ background:#fff; box-shadow:inset 0 0 0 1px var(--scrm-linie,#e7eef6); border-radius:12px;
  border-bottom-left-radius:4px; padding:8px 10px; font-size:11.5px; line-height:1.45; max-width:86%; }
.clc-vsmail{ margin-top:8px; background:#fff; box-shadow:inset 0 0 0 1px var(--scrm-linie,#e7eef6);
  border-radius:10px; padding:7px 9px; font-size:11px; color:var(--scrm-mut,#8a97a8);
  display:flex; align-items:center; gap:6px; }
.clc-vsmail .material-symbols-rounded{ font-size:15px; }
.clc-vseingabe{ border-top:1px solid var(--scrm-linie,#e7eef6); padding:7px 9px;
  display:flex; align-items:center; gap:7px; }
.clc-vseingabe .f{ flex:1; font-size:11px; color:var(--scrm-mut,#8a97a8); }
.clc-vseingabe .snd{ width:28px; height:28px; border-radius:9px; background:var(--vf,#1a9bdb); color:#fff;
  display:grid; place-items:center; }
.clc-vseingabe .snd .material-symbols-rounded{ font-size:15px; }
.clc-vsform{ padding:11px 10px; font-size:11.5px; }
.clc-vsform b{ display:block; font-size:12.5px; margin-bottom:3px; }
.clc-vsform p{ margin:0 0 8px; color:var(--scrm-mut,#8a97a8); font-size:11px; line-height:1.4; }
.clc-vsform .feld{ background:#fff; box-shadow:inset 0 0 0 1px var(--scrm-linie,#e7eef6); border-radius:8px;
  padding:6px 8px; font-size:11px; color:var(--scrm-mut,#8a97a8); margin-bottom:6px; }
.clc-vsform .feld.hoch{ height:34px; }
.clc-vsform .knopf{ background:var(--vf,#1a9bdb); color:#fff; border-radius:9px; padding:7px;
  text-align:center; font-size:11.5px; font-weight:800; }
.clc-vsfuss{ font-size:9px; color:var(--scrm-mut,#8a97a8); text-align:center; padding:4px 0 6px; }

/* ---------- Einstellungsteile ---------- */
.cvl-schzeile.hoch{ align-items:flex-start; }
.cvl-schzeile.hoch .cvl-lbl{ margin-top:8px; }
.clc-farben{ display:flex; gap:7px; flex-wrap:wrap; align-items:center; }
.clc-farbe{ width:30px; height:30px; border-radius:9px; border:2px solid transparent; cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(18,35,58,.08); }
.clc-farbe.an{ border-color:#12233a; }
.clc-wahl{ display:flex; gap:4px; background:#eef3f9; border-radius:10px; padding:3px; flex-wrap:wrap; }
.clc-wahl button{ all:unset; cursor:pointer; border-radius:8px; padding:5px 11px; font-size:12px;
  font-weight:700; color:#5d6f83; }
.clc-wahl button.an{ background:#fff; color:#12233a; box-shadow:0 1px 2px rgba(18,35,58,.1); }
.clc-schieb{ display:flex; align-items:center; gap:10px; padding:7px 0; font-size:12.5px; cursor:pointer; }
.clc-schieb .sp{ width:38px; height:21px; border-radius:999px; background:#d4dde8; position:relative;
  flex:none; transition:background .15s; }
.clc-schieb .sp::after{ content:""; position:absolute; top:2px; left:2px; width:17px; height:17px;
  border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(18,35,58,.25); transition:transform .15s; }
.clc-schieb.an .sp{ background:var(--accent,#f0862f); }
.clc-schieb.an .sp::after{ transform:translateX(17px); }
.clc-schieb b{ display:block; font-weight:700; }
.clc-schieb small{ color:var(--scrm-mut,#8a97a8); font-size:11px; }
.clc-domains{ display:flex; flex-direction:column; gap:6px; margin-bottom:9px; }
.clc-domain{ display:flex; align-items:center; gap:8px; background:#f7f9fc; border-radius:9px;
  box-shadow:inset 0 0 0 1px var(--scrm-linie,#e7eef6); padding:6px 8px 6px 10px; font-size:12.5px; }
.clc-domain .material-symbols-rounded{ font-size:15px; color:var(--scrm-gut,#0e7c6b); }
.clc-domain.kalt{ color:var(--scrm-kalt,#b3261e); }
.clc-domain.kalt .material-symbols-rounded{ color:var(--scrm-kalt,#b3261e); }
.clc-domain code{ flex:1; font-family:ui-monospace,Consolas,monospace; font-size:11.5px; }
.clc-tage{ display:flex; gap:4px; }
.clc-tage button{ all:unset; cursor:pointer; box-shadow:inset 0 0 0 1px var(--scrm-linie,#e7eef6); width:31px;
  height:31px; border-radius:9px; font-size:11.5px; font-weight:700; color:#5d6f83; display:grid; place-items:center; }
.clc-tage button.an{ background:var(--accent,#f0862f); box-shadow:none; color:#fff; }
.clc-bis{ color:var(--scrm-mut,#8a97a8); font-size:12px; }
.clc-ta{ flex:1; min-width:200px; border:0; outline:0; box-shadow:inset 0 0 0 1px var(--scrm-linie,#e7eef6);
  border-radius:9px; padding:7px 9px; font:inherit; font-size:13px; resize:none; min-height:54px; color:#12233a; }
.clc-ta:focus{ box-shadow:inset 0 0 0 2px rgba(var(--accent-rgb,240,134,47),.45); }
.cvl-schzeile input.clc-kurz{ flex:none; max-width:170px; }
.clc-avwahl{ display:flex; gap:8px; flex-wrap:wrap; }
.clc-avel{ all:unset; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:5px;
  padding:7px 10px; border-radius:11px; box-shadow:inset 0 0 0 1px var(--scrm-linie,#e7eef6); min-width:74px; }
.clc-avel.an{ box-shadow:inset 0 0 0 2px var(--accent,#f0862f); background:rgba(var(--accent-rgb,240,134,47),.06); }
.clc-avel .k{ width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  font-size:12px; font-weight:800; }
.clc-avel .k.foto{ background:#d7e3f0; color:#5d6f83; }
.clc-avel .k.logo{ background:#eef3f8; }
.clc-avel .k .material-symbols-rounded{ font-size:20px; }
.clc-avel small{ font-size:10.5px; font-weight:700; color:#5d6f83; }
.clc-zahl{ display:inline-flex; align-items:center; gap:6px; }
.clc-zahl input{ all:unset; width:44px; text-align:center; font-size:13px; font-weight:700;
  padding:6px 4px; border-radius:9px; box-shadow:inset 0 0 0 1px var(--scrm-linie,#e7eef6); }
.clc-zahl input:focus{ box-shadow:inset 0 0 0 2px rgba(var(--accent-rgb,240,134,47),.45); }
.clc-zahl small{ font-size:12px; color:var(--scrm-mut,#8a97a8); }
.clc-pfade{ display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; }
.clc-pfad{ display:inline-flex; align-items:center; gap:5px; background:#f7f9fc; border-radius:8px;
  box-shadow:inset 0 0 0 1px var(--scrm-linie,#e7eef6); padding:4px 6px 4px 9px;
  font:11.5px ui-monospace,Consolas,monospace; }
.clc-pfad button{ all:unset; cursor:pointer; color:var(--scrm-mut,#8a97a8); display:grid; place-items:center; }
.clc-pfad button .material-symbols-rounded{ font-size:14px; }
.clc-code{ background:#16233a; color:#cfe3f5; border-radius:11px; padding:11px 12px;
  font:11.5px/1.6 ui-monospace,Consolas,monospace; white-space:pre-wrap; word-break:break-all; }
.clc-code .tok{ color:#7fd4c1; }
.clc-code .att{ color:#ffc08a; }
.clc-merk{ display:flex; gap:9px; align-items:flex-start; background:#fff8ec; border-radius:11px;
  box-shadow:inset 0 0 0 1px #f3e2c6; padding:10px 12px; font-size:11.5px; color:#6d5325; line-height:1.5; }
.clc-merk .material-symbols-rounded{ font-size:16px; color:#c2691a; flex:none; }

/* ---------- Rueckfrage ----------
   Sie liegt im selben Scrim wie die Schublade: ein zweiter waere
   ein zweiter Stapel, und dann liegt die Frage irgendwann hinter
   dem, was sie fragt. */
.cvl-scrim.dlg{ display:grid; place-items:center; padding:20px; }
.clc-dlg{ background:#fff; border-radius:18px; box-shadow:0 24px 60px rgba(18,35,58,.3); width:390px;
  max-width:100%; overflow:hidden; cursor:default; }
.clc-dlg .dk{ padding:16px 18px 12px; }
.clc-dlg h3{ margin:0 0 3px; font-size:15px; font-weight:800; }
.clc-dlg p{ margin:0; font-size:12.5px; color:#5d6f83; }
.clc-dlg .dl{ padding:4px 10px 10px; max-height:260px; overflow-y:auto; }
.clc-dlg .dl button{ all:unset; cursor:pointer; display:flex; width:100%; align-items:center; gap:10px;
  padding:9px 10px; border-radius:10px; }
.clc-dlg .dl button:hover{ background:#f2f7fc; }
.clc-dlg .dl small{ font-size:11.5px; color:#5d6f83; }
.clc-dlg .df{ display:flex; justify-content:flex-end; gap:8px; padding:10px 14px 14px;
  border-top:1px solid var(--scrm-linie,#e7eef6); }
.clc-dlg .m3-btn.clc-rotbtn{ color:var(--scrm-kalt,#b3261e); }
.clc-dlg .m3-btn.filled.clc-rotbtn{ background:var(--scrm-kalt,#b3261e); color:#fff; }
.m3-btn.tonal.weg{ background:#eef2f7; color:#5d6f83; }

/* ---------- Seitenwechsel ----------
   Der neue Wirt steht sofort da, sein Inhalt wird aber erst
   danach getauscht. Ohne das hier sieht man eine Hundertstel-
   sekunde lang die vorige Seite.

   Bewusst opacity und nicht display:none oder visibility: der
   Wirt muss waehrenddessen im Layout bleiben, sonst misst alles,
   was sich beim Zeichnen an Groessen orientiert, Null. */
.crs-wirt.crs-tauscht, #salFrame.crs-tauscht { opacity: 0; }