/* workspace-bento-crm.css — Zusatz-Gestaltung des Bereichs „CRM" in der Bento-Ansicht (Logik: workspace-bento-crm.js). Kurzbeschreibung (für Laien): Ralph, 24.10.2026. Der Bereich nutzt die gemeinsame Bereichs-Vorlage (workspace-bento-seite.css: Umschalter-Kacheln oben, Kachel-Raster, Detail groß darüber). Hier stehen nur die Teile, die das CRM zusätzlich braucht: die gleich großen Kontakt-/Firmen-Kacheln (Logo, Name, Rolle, Stufe, letzter Kontakt, „nachfassen", offene Aufgaben), im Detail eine Bento-Ansicht (blaue Kopf-Karte, Aktions-Kacheln Anrufen/E-Mail/Nachfassen/Aufgabe/Notiz/Firma, Karten für Daten, Status und Aktivitäten), das Rechtsklick-Menü einer Kontakt-Kachel, das Formular „Neuer Kontakt" und die Ansicht „Pipeline": Spalten als Bento-Kacheln (sie brechen um, nie seitlich scrollen), darin die Karten mit Logo/Initialen; auf dem Handy wählt eine eigene Kachel die Spalte. Greift nur im geöffneten CRM-Bereich. */ /* ── Kontakt-/Firmen-Kacheln: einheitlich groß, so viele nebeneinander wie bei 240 px passen ── */ /* Raster exakt wie die Startseite (.wb-raster: 6 Spalten, Reihen 168 px, 16 px Luft; ≤1100 px 4, <900 px 3, Handy 1 Spalte mit 132 px). Die Luft fürs Anheben über der ersten Reihe kommt aus der Liste der Vorlage (workspace-bento-seite.css). */ #bsBereich[data-bereich="crm"] .bs-kacheln { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 168px; gap: 16px; } #bsBereich[data-bereich="crm"] .bs-kachel { min-height: 0; padding: 20px 22px; gap: 10px; overflow: hidden; } @media (max-width: 1100px) { #bsBereich[data-bereich="crm"] .bs-kacheln { grid-template-columns: repeat(4, minmax(0, 1fr)); } } #bsBereich[data-bereich="crm"] .bc-k-kopf { display: flex; align-items: center; gap: 12px; min-width: 0; } #bsBereich[data-bereich="crm"] .bc-k-wer { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } #bsBereich[data-bereich="crm"] .bc-k-rolle { font-size: 12px; color: var(--bs-leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #bsBereich[data-bereich="crm"] .bc-k-zeit { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; color: var(--bs-leise); font-variant-numeric: tabular-nums; } #bsBereich[data-bereich="crm"] .bc-nachfassen { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: var(--marke-r-pill); font-size: 11px; font-weight: 700; background: color-mix(in srgb, var(--marke-gefahr) 12%, var(--bs-karte)); color: var(--marke-gefahr); } #bsBereich[data-bereich="crm"] .bs-kachel .bs-k-fuss { padding-top: 0; } #bsBereich[data-bereich="crm"] .bc-stufe .bc-punkt { width: 7px; height: 7px; } #bsBereich[data-bereich="crm"] .bs-kachel .bc-perle { background: var(--bs-weich); min-width: 22px; height: 22px; line-height: 22px; font-size: 12px; } #bsBereich[data-bereich="crm"] .bs-kachel .bc-perle.spaet { background: var(--marke-gefahr); color: #fff; } #bsBereich[data-bereich="crm"] .bc-logo.gross { width: 40px; height: 40px; font-size: 14px; } /* ── Detail: Pillen für Status und Pipeline-Stufe (keine Auswahlliste) ── */ #bsBereich[data-bereich="crm"] .bc-text { white-space: pre-wrap; } #bsBereich[data-bereich="crm"] .bc-wahlen { display: flex; flex-direction: column; gap: 8px; margin: 0 0 12px; } #bsBereich[data-bereich="crm"] .bc-wahl { margin: 0; display: flex; flex-direction: column; gap: 8px; } #bsBereich[data-bereich="crm"] .bc-wahl .bs-sk-werte button { background: var(--bs-karte); } #bsBereich[data-bereich="crm"] .bc-wahl .bs-sk-werte button.an { background: var(--bs-dunkel); color: #fff; } #bsBereich[data-bereich="crm"] .bc-wahl .bs-sk-werte button:disabled { opacity: .6; cursor: default; } #bsBereich[data-bereich="crm"] .bc-phase { margin: 0 0 4px; } /* ── Detail als Bento-Ansicht (Ralph 24.10.2026): auf grauem Grund wie Planer/Einstellungen — blaue Kopf-Karte links, Aktions-Kacheln rechts, darunter Karten für Daten, Status und Aktivitäten. Raster wie die Startseite (6/4/1 Spalten). ── */ #bsBereich[data-bereich="crm"][data-ansicht="raster"].bs-detail-auf .bs-detail:has(> .bc-d) { background: transparent; box-shadow: none; padding: 10px 2px 20px; } #bsBereich[data-bereich="crm"] .bs-detail:has(> .bc-d) > .bs-zurueck { align-self: flex-start; margin: 0 0 12px; } #bsBereich[data-bereich="crm"] .bc-d { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; align-items: start; padding-top: 4px; } #bsBereich[data-bereich="crm"] .bc-d-kopf, #bsBereich[data-bereich="crm"] .bc-d-k { transition: box-shadow .25s, transform .25s; } #bsBereich[data-bereich="crm"] .bc-d-kopf:hover, #bsBereich[data-bereich="crm"] .bc-d-k:hover { box-shadow: var(--wb-schatten-hover, 0 10px 26px rgba(15, 23, 42, .10)); } /* Kopf-Karte: Farbe wie die blaue Kopf-Karte der Bereiche (.bs-kopfkarte); Pillen darauf weiß mit dunkler Schrift */ #bsBereich[data-bereich="crm"] .bc-d-kopf { grid-column: span 4; align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; min-height: 200px; min-width: 0; box-sizing: border-box; padding: 24px 26px; border-radius: var(--bs-r); color: var(--wb-auf-farbe, #fff); box-shadow: var(--wbs-schatten); background: linear-gradient(135deg, var(--wb-akzent) 30%, color-mix(in srgb, var(--wb-akzent) 66%, var(--wb-verlauf-ziel))); } #bsBereich[data-bereich="crm"] .bc-d-wer { display: flex; align-items: center; gap: 18px; min-width: 0; } #bsBereich[data-bereich="crm"] .bc-logo.riesig { width: 72px; height: 72px; font-size: 24px; border: 0; } #bsBereich[data-bereich="crm"] .bc-d-kopf .bc-initialen.riesig { background: var(--wb-auf-farbe, #fff); color: var(--marke-grafit); } #bsBereich[data-bereich="crm"] .bc-d-name { min-width: 0; } #bsBereich[data-bereich="crm"] .bc-d-name h2 { margin: 0; font-size: clamp(22px, 2.2vw, 32px); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; overflow-wrap: anywhere; } #bsBereich[data-bereich="crm"] .bc-d-name p { margin: 6px 0 0; font-size: 14px; color: var(--wb-auf-farbe-leise, rgba(255, 255, 255, .78)); overflow-wrap: anywhere; } #bsBereich[data-bereich="crm"] .bc-d-pillen { display: flex; flex-wrap: wrap; gap: 6px; } #bsBereich[data-bereich="crm"] .bc-kp-pille { display: inline-flex; align-items: center; height: 26px; padding: 0 12px; border-radius: var(--marke-r-pill); font-size: 12px; font-weight: 600; background: var(--wb-auf-farbe, #fff); color: var(--marke-grafit); white-space: nowrap; } #bsBereich[data-bereich="crm"] .bc-kp-pille.rot { color: var(--marke-gefahr); } /* Aktions-Kacheln rechts: je Aktion eine kleine Kachel (Link bzw. Knopf), hebt sich beim Überfahren */ #bsBereich[data-bereich="crm"] .bc-d-aktionen { grid-column: span 2; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; align-content: start; } #bsBereich[data-bereich="crm"] .bc-ak { display: flex; align-items: center; gap: 12px; min-width: 0; box-sizing: border-box; padding: 12px 14px; border: 0; border-radius: var(--bs-r-k); background: var(--bs-karte); color: var(--bs-text); box-shadow: var(--wbs-schatten); text-align: left; text-decoration: none; cursor: pointer; font: inherit; transition: box-shadow .25s, transform .25s; } #bsBereich[data-bereich="crm"] .bc-ak:hover { box-shadow: var(--wb-schatten-hover, 0 10px 26px rgba(15, 23, 42, .10)); transform: translateY(-3px); } #bsBereich[data-bereich="crm"] .bc-ak:focus-visible { outline: 2px solid var(--marke-akzent); outline-offset: 2px; } #bsBereich[data-bereich="crm"] .bc-ak-sym { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--bs-weich); color: var(--bs-text); } #bsBereich[data-bereich="crm"] .bc-ak-sym svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } #bsBereich[data-bereich="crm"] .bc-ak.haupt .bc-ak-sym { background: var(--wb-akzent); color: var(--wb-auf-farbe, #fff); } #bsBereich[data-bereich="crm"] .bc-ak.rot .bc-ak-sym { background: color-mix(in srgb, var(--marke-gefahr) 12%, var(--bs-karte)); color: var(--marke-gefahr); } #bsBereich[data-bereich="crm"] .bc-ak-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } #bsBereich[data-bereich="crm"] .bc-ak-text b { font-size: 14px; font-weight: 600; } #bsBereich[data-bereich="crm"] .bc-ak-text small { font-size: 12px; color: var(--bs-leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #bsBereich[data-bereich="crm"] .bc-ak.rot .bc-ak-text small { color: var(--marke-gefahr); } /* Karten darunter */ #bsBereich[data-bereich="crm"] .bc-d-k { grid-column: span 3; display: flex; flex-direction: column; gap: 8px; min-width: 0; box-sizing: border-box; padding: 20px 22px; border-radius: var(--bs-r); background: var(--bs-karte); color: var(--bs-text); box-shadow: var(--wbs-schatten); } #bsBereich[data-bereich="crm"] .bc-d-breit { grid-column: 1 / -1; } #bsBereich[data-bereich="crm"] .bc-d-titel { margin: 0 0 4px; font: 600 15px/1.3 var(--marke-schrift); color: var(--bs-text); } #bsBereich[data-bereich="crm"] .bc-d-k .bs-d-meta { margin: 0; } #bsBereich[data-bereich="crm"] .bc-d-k .bs-d-meta a { color: inherit; text-decoration: underline; text-decoration-color: var(--bs-linie); text-underline-offset: 3px; } #bsBereich[data-bereich="crm"] .bc-d-k .bs-d-meta a:hover { text-decoration-color: currentColor; } #bsBereich[data-bereich="crm"] .bc-d-lade { display: flex; justify-content: center; padding: 16px 0; } #bsBereich[data-bereich="crm"] .bc-d-lade .a4h-spin { color: var(--marke-ladekreis); } #bsBereich[data-bereich="crm"] .bc-form:empty { display: none; } #bsBereich[data-bereich="crm"] .bc-form > .bc-d-k { grid-column: auto; } #bsBereich[data-bereich="crm"] .bc-d-formular textarea { min-height: 88px; } #bsBereich[data-bereich="crm"] .bc-d-formular input[type="date"] { max-width: 220px; } #bsBereich[data-bereich="crm"] .bc-d-k .bc-wahl .bs-sk-werte button { background: var(--bs-weich); } #bsBereich[data-bereich="crm"] .bc-d-k .bc-wahl .bs-sk-werte button:hover { background: var(--marke-feld); } #bsBereich[data-bereich="crm"] .bc-d-k .bc-wahl .bs-sk-werte button.an { background: var(--bs-dunkel); color: #fff; } #bsBereich[data-bereich="crm"] .bc-d-k .bc-wahl.bs-box { background: none; padding: 0; border-radius: 0; } #bsBereich[data-bereich="crm"] .bc-d-k .bc-wahlen { margin: 0; gap: 14px; } #bsBereich[data-bereich="crm"] .bc-wahlen:not(:empty) + .bc-ohne-stufe { display: none; } #bsBereich[data-bereich="crm"] .bc-wahlen-k:has(.bc-wahlen:empty):not(:has(.bc-ohne-stufe)) { display: none; } #bsBereich[data-bereich="crm"] .bc-mal { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: var(--marke-r-pill); background: var(--bs-weich); color: var(--bs-leise); font-size: 11px; font-weight: 700; line-height: 18px; font-variant-numeric: tabular-nums; } @media (max-width: 1100px) { #bsBereich[data-bereich="crm"] .bc-d { grid-template-columns: repeat(4, minmax(0, 1fr)); } #bsBereich[data-bereich="crm"] .bc-d-kopf { grid-column: span 2; } #bsBereich[data-bereich="crm"] .bc-d-k { grid-column: span 2; } } @media (max-width: 900px) { #bsBereich[data-bereich="crm"] .bc-d { grid-template-columns: minmax(0, 1fr); gap: 12px; } #bsBereich[data-bereich="crm"] .bc-d-kopf, #bsBereich[data-bereich="crm"] .bc-d-k, #bsBereich[data-bereich="crm"] .bc-d-aktionen { grid-column: 1 / -1; } #bsBereich[data-bereich="crm"] .bc-d-kopf { min-height: 0; padding: 18px; border-radius: var(--bs-r-k); } #bsBereich[data-bereich="crm"] .bc-d-k { padding: 16px 18px; border-radius: var(--bs-r-k); } #bsBereich[data-bereich="crm"] .bc-logo.riesig { width: 56px; height: 56px; font-size: 19px; } #bsBereich[data-bereich="crm"] .bc-d-aktionen { grid-template-columns: repeat(2, minmax(0, 1fr)); } #bsBereich[data-bereich="crm"] .bc-ak { padding: 10px 12px; gap: 10px; } #bsBereich[data-bereich="crm"][data-schalter][data-ansicht="raster"].bs-detail-auf .bs-detail:has(> .bc-d) { padding: 0 0 12px; } } @media (max-width: 420px) { #bsBereich[data-bereich="crm"] .bc-d-aktionen { grid-template-columns: minmax(0, 1fr); } } @media (prefers-reduced-motion: reduce) { #bsBereich[data-bereich="crm"] .bc-ak:hover { transform: none; } } /* Rechtsklick-Menü einer Kontakt-Kachel (BentoKernMenue, Klasse bc-menue): kleine Formulare in der Menü-Karte */ /* Im offenen Bereich ist der Kern (html.bt-an) nicht immer an — dann fehlen seine Farben: hier dieselbe Zuordnung wie workspace-bento-kern-start.css, nur für diese Menü-Karte */ .bt-menue.bc-menue { width: 300px; --bt-karte: var(--wb-karte, var(--marke-flaeche)); --bt-text: var(--marke-text); --bt-leise: var(--marke-text-2); --bt-linie: var(--marke-linie); --bt-linie-stark: var(--marke-linie-stark); --bt-weich: var(--marke-flaeche-2); --bt-feld: var(--marke-feld); --bt-dunkel: var(--wb-dunkel, var(--marke-grafit)); --bt-auf-dunkel: #fff; --bt-rot: var(--marke-gefahr); --bt-fokus-ring: var(--marke-akzent); --bt-schatten: var(--marke-schatten); --bt-rand: var(--wb-rand, 0 0 0 1px var(--marke-linie)); --bt-schrift: var(--marke-schrift); --bt-r: var(--wb-r, 22px); } .bc-menue .bc-mf { display: flex; flex-direction: column; gap: 8px; padding: 4px 6px 6px; } .bc-menue .bc-mf textarea { min-height: 88px; } .bc-menue .bc-mf label { display: flex; flex-direction: column; gap: 4px; } .bc-menue .bc-mf-text { margin: 0; font-size: 13px; line-height: 1.45; color: var(--bt-text); } .bc-menue .bc-mf-meldung { margin: 0; font-size: 12px; min-height: 0; } .bc-menue .bc-mf-meldung:empty { display: none; } .bc-menue .bc-zeile { display: flex; flex-wrap: wrap; gap: 8px; } .bc-menue .bs-knopf.gefahr { background: var(--marke-gefahr); } .bc-menue .bs-knopf.gefahr:hover { background: color-mix(in srgb, var(--marke-gefahr) 84%, #000); } .bc-menue .bs-rot { color: var(--marke-gefahr); } /* Verlauf / Kontakte einer Firma: Tabelle mit Kopf, ruhig, ohne Rahmen */ #bsBereich[data-bereich="crm"] .bc-verlauf { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 13px; margin-bottom: 8px; } #bsBereich[data-bereich="crm"] .bc-verlauf th { text-align: left; font-size: 12px; font-weight: 500; color: var(--bs-leise); padding: 4px 8px 6px 0; border-bottom: 1px solid var(--bs-linie); } #bsBereich[data-bereich="crm"] .bc-verlauf th:first-child { width: 88px; } #bsBereich[data-bereich="crm"] .bc-verlauf th:nth-child(2) { width: 132px; } #bsBereich[data-bereich="crm"] .bc-verlauf td { padding: 8px 8px 8px 0; vertical-align: top; overflow-wrap: anywhere; border-bottom: 1px solid var(--bs-linie); } #bsBereich[data-bereich="crm"] .bc-verlauf td.leise { color: var(--bs-leise); } #bsBereich[data-bereich="crm"] .bc-verlauf tr:last-child td { border-bottom: 0; } #bsBereich[data-bereich="crm"] .bc-klickbar th:first-child { width: auto; } #bsBereich[data-bereich="crm"] .bc-klickbar th:nth-child(3) { width: 112px; } #bsBereich[data-bereich="crm"] .bc-klickbar tbody tr { cursor: pointer; outline: 0; } #bsBereich[data-bereich="crm"] .bc-klickbar tbody tr:hover td, #bsBereich[data-bereich="crm"] .bc-klickbar tbody tr:focus-visible td { background: var(--bs-weich); } /* Eingaben: Notiz, Datum, neuer Kontakt */ #bsBereich[data-bereich="crm"] .bc-form .bs-box { margin: 0 0 12px; display: flex; flex-direction: column; gap: 8px; } #bsBereich[data-bereich="crm"] .bc-form textarea { min-height: 88px; } #bsBereich[data-bereich="crm"] .bc-form input[type="date"] { max-width: 220px; } #bsBereich[data-bereich="crm"] .bc-zeile { display: flex; flex-wrap: wrap; gap: 8px; } #bsBereich[data-bereich="crm"] .bc-neu { display: flex; flex-direction: column; gap: 6px; max-width: 520px; flex: 1 0 auto; } #bsBereich[data-bereich="crm"] .bc-neu .bc-wahl { margin-top: 10px; } #bsBereich[data-bereich="crm"] .bc-neu-meldung { font-size: 13px; min-height: 18px; } @media (max-width: 900px) { #bsBereich[data-bereich="crm"] .bs-kacheln { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } #bsBereich[data-bereich="crm"] .bs-kachel { gap: 8px; border-radius: var(--bs-r); } #bsBereich[data-bereich="crm"] .bc-k-kopf { gap: 8px; } #bsBereich[data-bereich="crm"] .bc-logo.gross { width: 32px; height: 32px; font-size: 12px; } #bsBereich[data-bereich="crm"] .bs-kachel .bs-k-name { font-size: 13px; } #bsBereich[data-bereich="crm"] .bc-verlauf th:nth-child(2) { width: 96px; } #bsBereich[data-bereich="crm"] .bs-d-aktion { position: static; margin-top: 8px; } } /* ── Pipeline (zweite Ansicht, Umschalter-Kachel „Ansicht") ── */ #bsBereich[data-bereich="crm"] .bc-pipe { display: flex; flex-direction: column; gap: var(--bs-luft); height: 100%; min-height: 0; } #bsBereich[data-bereich="crm"] .bc-pipe > .bs-leer { background: var(--bs-karte); border-radius: var(--bs-r); } /* Fehlermeldung beim Verschieben: eigene Kachel, nicht frei auf dem Grund */ #bsBereich[data-bereich="crm"] .bc-p-meldung { flex: none; padding: 12px 18px; border-radius: var(--bs-r); background: var(--bs-karte); box-shadow: var(--wbs-schatten); font-size: 13px; } /* Handy: Spalten-Wahl als eigene Kachel (wie die Umschalter-Kacheln) */ #bsBereich[data-bereich="crm"] .bc-p-spalten { display: none; flex: none; flex-direction: column; gap: 6px; padding: 10px; border-radius: var(--bs-r-k); background: var(--bs-karte); box-shadow: var(--wbs-schatten); } #bsBereich[data-bereich="crm"] .bc-p-spalten .bs-sk-werte button i { font-style: normal; font-weight: 500; opacity: .7; margin-left: 4px; font-variant-numeric: tabular-nums; } /* Brett: so viele Spalten nebeneinander, wie bei mindestens 150 px passen — sonst brechen sie in eine zweite Reihe um */ #bsBereich[data-bereich="crm"] .bc-board { flex: 1 1 auto; min-height: 0; display: grid; gap: var(--bs-luft); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); grid-auto-rows: minmax(280px, 1fr); overflow-y: auto; overflow-x: hidden; padding: 2px; margin: -2px; } /* Spalten bündig mit Home (20 px), 2 px Luft für den Schatten */ #bsBereich[data-bereich="crm"] .bc-spalte { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--bs-karte); border-radius: var(--bs-r); box-shadow: var(--wbs-schatten); transition: box-shadow .2s; } #bsBereich[data-bereich="crm"] .bc-spalte.ueber { box-shadow: 0 0 0 2px var(--bs-dunkel); } #bsBereich[data-bereich="crm"] .bc-sp-kopf { display: flex; align-items: center; gap: 8px; margin: 0; padding: 14px 14px 10px; font-size: 13px; font-weight: 600; min-width: 0; } #bsBereich[data-bereich="crm"] .bc-punkt { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--bs-leise); } #bsBereich[data-bereich="crm"] .bc-sp-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #bsBereich[data-bereich="crm"] .bc-sp-zahl { flex: none; font-size: 12px; font-weight: 600; color: var(--bs-leise); font-variant-numeric: tabular-nums; background: var(--bs-weich); border-radius: var(--marke-r-pill); padding: 2px 8px; } #bsBereich[data-bereich="crm"] .bc-karten { flex: 1 1 auto; min-height: 48px; overflow-y: auto; overflow-x: hidden; padding: 4px 8px 8px; display: flex; flex-direction: column; gap: 6px; } #bsBereich[data-bereich="crm"] .bc-sp-leer { margin: 8px 0; text-align: center; font-size: 12px; color: var(--bs-leise); } /* Karte: Logo bzw. Initialen + Name, Kennzeichnung als Strich links, offene Aufgaben als Perle */ #bsBereich[data-bereich="crm"] .bc-pk { flex: none; flex-direction: row; align-items: center; gap: 8px; min-height: 0; padding: 9px 10px; border-radius: var(--bs-r-k); background: var(--bs-weich); box-shadow: none; font-size: 13px; font-weight: 500; user-select: none; touch-action: manipulation; } #bsBereich[data-bereich="crm"] .bc-pk:hover { background: var(--bs-karte); box-shadow: var(--wb-schatten-hover, 0 6px 18px rgba(15, 23, 42, .10)); transform: translateY(-1px); } #bsBereich[data-bereich="crm"] .bc-pk.an { background: var(--bs-karte); box-shadow: 0 0 0 2px var(--bs-dunkel); } #bsBereich[data-bereich="crm"] .bc-pk.bc-weg { display: none; } #bsBereich[data-bereich="crm"] .bc-pk[class*="kz-"]{ outline: 1px solid color-mix(in srgb, var(--bc-kz) 45%, transparent); outline-offset: -1px; } #bsBereich[data-bereich="crm"] .bc-pk.kz-lead { --bc-kz: var(--marke-ok); } #bsBereich[data-bereich="crm"] .bc-pk.kz-partner { --bc-kz: var(--marke-akzent); } #bsBereich[data-bereich="crm"] .bc-pk.kz-lieferant { --bc-kz: var(--marke-warn); } #bsBereich[data-bereich="crm"] .bc-pk.kz-wettbewerb { --bc-kz: var(--marke-gefahr); } #bsBereich[data-bereich="crm"] .bc-pk.bc-zieht { opacity: .35; } #bsBereich[data-bereich="crm"] .bc-pk-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #bsBereich[data-bereich="crm"] .bc-logo { flex: none; width: 24px; height: 24px; border-radius: 50%; object-fit: contain; background: var(--bs-karte); box-sizing: border-box; border: 1px solid var(--bs-linie); -webkit-user-drag: none; } #bsBereich[data-bereich="crm"] .bc-initialen { display: inline-flex; align-items: center; justify-content: center; border: 0; background: var(--bs-dunkel); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: -.02em; } #bsBereich[data-bereich="crm"] .bc-perle { flex: none; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: var(--marke-r-pill); background: var(--bs-karte); color: var(--bs-leise); font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; } #bsBereich[data-bereich="crm"] .bc-perle.spaet { background: var(--marke-gefahr); color: #fff; } #bsBereich[data-bereich="crm"] .bc-linie { flex: none; height: 2px; margin: -2px 4px; border-radius: 2px; background: var(--bs-dunkel); pointer-events: none; } /* der mitgezogene Abdruck */ #bsBereich .bc-geist { position: fixed; left: 0; top: 0; z-index: 1000; pointer-events: none; margin: 0; background: var(--bs-karte); box-shadow: 0 14px 32px rgba(15, 23, 42, .18); transform-origin: 20% 50%; } #bsBereich .bc-geist:hover { transform: none; } @media (max-width: 900px) { #bsBereich[data-bereich="crm"] .bc-p-spalten { display: flex; } /* eine Spalte, so hoch wie ihre Karten — gescrollt wird der Bereich als Ganzes */ #bsBereich[data-bereich="crm"] .bc-pipe { height: auto; } #bsBereich[data-bereich="crm"] .bc-board { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; overflow: visible; flex: none; } #bsBereich[data-bereich="crm"] .bc-karten { overflow: visible; } #bsBereich[data-bereich="crm"] .bc-spalte:not(.mobil-an) { display: none; } #bsBereich[data-bereich="crm"] .bc-spalte { border-radius: var(--bs-r-k); } #bsBereich[data-bereich="crm"] .bc-pk { padding: 11px 12px; } } @media (max-width: 699px) { #bsBereich[data-bereich="crm"] .bs-kacheln { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 132px; } #bsBereich[data-bereich="crm"] .bs-kachel { padding: 16px 18px; } } @media (prefers-reduced-motion: reduce) { #bsBereich[data-bereich="crm"] .bc-pk:hover { transform: none; } } /* Namen in den Kontakt-Kacheln nicht schon nach dem Vornamen kürzen: bis zu zwei Zeilen (Ralph 28.10.2026) */ #bsBereich[data-bereich="crm"] .bs-kachel .bs-k-name { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; line-height: 1.25; } /* Rechte Spalte über den Baustein BentoSpalte (Ralph 08.11.2026): sie füllt die Listenfläche, nur sie scrollt; das ＋ liegt unten in ihr (das alte ＋ der Vorlage entfällt) */ :root.wb-menue-modus #bsBereich[data-bereich="crm"] .bs-liste:has(> .crm-spalte) { display: flex; flex-direction: column; overflow: hidden; padding: 0; min-height: 0; } :root.wb-menue-modus #bsBereich[data-bereich="crm"] .crm-spalte { flex: 1 1 auto; min-height: 0; border-left: 0; width: 100%; } :root.wb-menue-modus #bsBereich[data-bereich="crm"]:has(.crm-spalte) .bs-werkzeug { display: none; } /* ＋ sitzt in der Spalte; die leere Leiste schob den Seitenanfang nach unten */ :root.wb-menue-modus #bsBereich[data-bereich="crm"]:has(.crm-spalte) { row-gap: 0; } /* Seitenanfang wie überall (Kopf + 8 px): die leere Kennzahlenleiste nimmt keine Zeile mehr */ :root.wb-menue-modus #bsBereich[data-bereich="crm"]:has(.crm-spalte) > .bs-kopf { display: none; } :root.wb-menue-modus #bsBereich[data-bereich="crm"]:has(.bc-pipe) > .bs-kopf { display: none; } /* Pipeline: leere Kopfzeile + 16 px Abstand entfallen, Spalten beginnen bei y 152 */ :root.wb-menue-modus #bsBereich[data-bereich="crm"]:has(.bc-pipe) .bs-liste { padding-top: 0; } /* Übersicht, solange kein Eintrag gewählt ist (Ralph 08.11.2026): Zahlen, zuletzt bearbeitet, ein Knopf */ #bsBereich[data-bereich="crm"] .bc-ue { display: flex; flex-direction: column; gap: 16px; padding: 0 0 16px; max-width: 640px; } #bsBereich[data-bereich="crm"] .bc-ue-zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; } #bsBereich[data-bereich="crm"] .bc-ue-z { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 1px solid var(--bsl-linie, var(--wb-linie)); border-radius: 9px; background: var(--bs-karte); min-width: 0; } #bsBereich[data-bereich="crm"] .bc-ue-z b { font-size: 20px; font-weight: 700; color: var(--bs-text); font-variant-numeric: tabular-nums; } #bsBereich[data-bereich="crm"] .bc-ue-z span { font-size: 12px; color: var(--bs-leise); } #bsBereich[data-bereich="crm"] .bc-ue-z.rot b { color: var(--marke-gefahr); } #bsBereich[data-bereich="crm"] .bc-ue-titel { margin: 8px 0 0; font-size: 13px; font-weight: 700; color: var(--bs-text); } #bsBereich[data-bereich="crm"] .bc-ue-liste { display: flex; flex-direction: column; gap: 2px; } #bsBereich[data-bereich="crm"] .bc-ue-zeile { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 10px; border: 0; border-radius: 9px; background: transparent; font: inherit; font-size: 13px; text-align: left; cursor: pointer; color: var(--bs-text); min-width: 0; } #bsBereich[data-bereich="crm"] .bc-ue-zeile:hover { background: var(--bs-weich); } #bsBereich[data-bereich="crm"] .bc-ue-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #bsBereich[data-bereich="crm"] .bc-ue-meta { flex: none; font-size: 12px; color: var(--bs-leise); } #bsBereich[data-bereich="crm"] .bc-ue-knopf { margin-top: 8px; } /* Trennlinie wie überall (Ralph 08.11.2026): Sie sitzt am linken Rand der Spalte (x = 1196 bei 1440 px), nicht 24 px davor */ @media (min-width: 901px) { :root.wb-menue-modus #bsBereich.wbm-seite[data-bereich="crm"]:not([data-ansicht="raster"]) { column-gap: 0; } }