/* ============================================================
   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); }

/* ============================================================
   Nachrichtenvorlagen (Praefix cvl) — Bereich Marketing.
   Links die Vorlagen, rechts die offene. Die Vorschau steht unter dem
   Text, nicht daneben: man schreibt und sieht sofort, was ankommt.
   ============================================================ */
.cvl-raum{ display:flex; flex-direction:column; min-height:0; height:100%; }
.cvl-kopf{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
.cvl-schub{ flex:1; }
.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-btn{ all:unset; box-sizing:border-box; cursor:pointer; display:inline-flex; align-items:center; gap:7px;
  height:34px; padding:0 14px; border-radius:17px; font-size:13px; font-weight:700;
  background:#fff; color:#41556d; box-shadow:inset 0 0 0 1px var(--scrm-linie2,#d9e4f0); }
.cvl-btn:hover{ background:#f6f9fc; }
.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-mut,#8a97a8); }
.cvl-btn.weg:hover{ color:var(--scrm-kalt,#b3261e); box-shadow:inset 0 0 0 1px rgba(var(--scrm-kalt-rgb,179,38,30),.35); }
.cvl-btn .material-symbols-rounded{ font-size:18px; }
.cvl-btn:focus-visible{ outline:2px solid var(--accent,#f0862f); outline-offset:2px; }

.cvl-zwei{ flex:1; min-height:0; display:grid; grid-template-columns:288px minmax(0,1fr); gap:14px; }
.cvl-liste{ min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:7px; padding-right:2px; }
.cvl-k{ all:unset; box-sizing:border-box; cursor:pointer; display:block; position:relative;
  background:#fff; border-radius:11px; padding:11px 12px 12px;
  box-shadow:inset 0 0 0 1px var(--scrm-linie,#e7eef6); }
.cvl-k:hover{ box-shadow:inset 0 0 0 1px var(--scrm-linie2,#d9e4f0); }
.cvl-k.an{ box-shadow:inset 0 0 0 2px var(--accent,#f0862f); }
.cvl-k:focus-visible{ outline:2px solid var(--accent,#f0862f); outline-offset:2px; }
.cvl-kt{ font-size:13.5px; font-weight:800; letter-spacing:-.01em; color:#12233a; }
.cvl-kb{ font-size:12px; color:#41556d; margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cvl-kv{ font-size:11.5px; color:var(--scrm-mut,#8a97a8); margin-top:5px; line-height:1.45; }
.cvl-kk{ display:inline-block; margin-top:8px; font-size:10px; font-weight:800; letter-spacing:.03em;
  text-transform:uppercase; padding:2px 8px; border-radius:20px;
  background:#eef2f7; color:#5d6f83; }
.cvl-k.an .cvl-kk{ background:rgba(var(--accent-rgb,240,134,47),.16); color:var(--accent-dark,#a3530f); }
.cvl-leer{ padding:30px 12px; text-align:center; color:var(--scrm-mut,#8a97a8); font-size:13px; line-height:1.5; }

.cvl-blatt{ min-height:0; overflow-y:auto; background:#fff; border-radius:12px; padding:16px;
  box-shadow:inset 0 0 0 1px var(--scrm-linie,#e7eef6); display:flex; flex-direction:column; }
.cvl-nichts{ margin:auto; text-align:center; color:var(--scrm-mut,#8a97a8); }
.cvl-nichts .material-symbols-rounded{ font-size:42px; opacity:.45; }
.cvl-nichts p{ margin:8px 0 0; font-size:13px; max-width:34ch; line-height:1.5; }

.cvl-feld{ display:flex; flex-direction:column; gap:5px; margin-bottom:12px; }
.cvl-feld.breit{ flex:1; }
.cvl-reihe{ display:flex; gap:12px; align-items:flex-end; }
.cvl-feld label{ font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  color:var(--scrm-mut,#8a97a8); }
.cvl-feld input, .cvl-feld select, .cvl-feld textarea{
  font:inherit; font-size:13.5px; color:#12233a; background:#f6f9fc;
  border:0; border-radius:9px; padding:9px 11px; outline:0;
  box-shadow:inset 0 0 0 1px var(--scrm-linie,#e7eef6); }
.cvl-feld input:focus, .cvl-feld select:focus, .cvl-feld textarea:focus{
  background:#fff; box-shadow:inset 0 0 0 2px var(--accent,#f0862f); }
.cvl-feld textarea{ resize:vertical; line-height:1.55; min-height:150px; }
.cvl-feld select{ cursor:pointer; }

.cvl-phleiste{ display:flex; gap:4px; flex-wrap:wrap; margin-bottom:2px; }
.cvl-ph{ all:unset; box-sizing:border-box; cursor:pointer; font-size:11px; font-weight:700;
  font-family:ui-monospace,Consolas,monospace; padding:3px 8px; border-radius:7px;
  background:#eef3f8; color:#41556d; }
.cvl-ph: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-vorschau{ background:#f6f9fc; border-radius:11px; padding:12px 13px; margin-bottom:12px;
  box-shadow:inset 0 0 0 1px var(--scrm-linie,#e7eef6); }
.cvl-vk{ display:flex; align-items:center; gap:7px; font-size:11px; font-weight:800; letter-spacing:.04em;
  text-transform:uppercase; color:var(--scrm-mut,#8a97a8); margin-bottom:8px; }
.cvl-vk .material-symbols-rounded{ font-size:16px; }
.cvl-vk small{ margin-left:auto; text-transform:none; letter-spacing:0; font-weight:600; font-size:11px; }
.cvl-vb{ font-size:13.5px; font-weight:700; color:#12233a; margin-bottom:6px; }
.cvl-vt{ font-size:13px; color:#41556d; line-height:1.6; white-space:pre-wrap; }

.cvl-fuss{ display:flex; align-items:center; gap:8px; margin-top:auto; padding-top:14px;
  border-top:1px solid var(--scrm-linie,#e7eef6); }