/* workspace-bento-teamchat.css — Aussehen des Team-Chats in der Bento-Ansicht (Logik: workspace-bento-teamchat.js). Kurzbeschreibung (für Laien): Ralph, 24.10.2026. Die Raumliste nutzt die Bento-Bereichsvorlage (workspace-bento-seite.css: blaue Kopfkarte, Pillen, Kachel-Raster) — hier stehen nur die neuen Teile: Raum-Kacheln (letzte Nachricht einzeilig, Zahl ungelesen), der geöffnete Raum als drei Kacheln (Kopf, große Nachrichten-Kachel, Mitglieder), Nachrichten als Blasen (eigene grau rechts, andere weiß mit dünnem Rand links, wie im Chat), Eingabe mit lila Senden-Knopf, Mitglieder-Pillen und die Home-Kachel. Farben nur aus den Variablen der Marke bzw. der Bento-Vorlage — damit gilt der Dunkelmodus automatisch. Greift nur im Bereich „teamchat" und in der Kachel z-teamchat. */ /* ── Raumliste ── */ #bsBereich[data-bereich="teamchat"] .tc-k-beschr { font-size: 12px; color: var(--bs-leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #bsBereich[data-bereich="teamchat"] .tc-k-letzte { font-size: 13px; line-height: 1.45; color: var(--bs-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #bsBereich[data-bereich="teamchat"] .tc-k-letzte.leer { color: var(--bs-leise); } #bsBereich[data-bereich="teamchat"] .bs-kachel:not(.tc-neu-k) .tc-k-letzte { color: var(--bs-leise); } #bsBereich[data-bereich="teamchat"] .tc-badge { font-variant-numeric: tabular-nums; } /* ── Neu anlegen ── */ #bsBereich[data-bereich="teamchat"] .tc-neu { display: flex; flex-direction: column; gap: 16px; max-width: 720px; } #bsBereich[data-bereich="teamchat"] .tc-titel { margin: 0; font-size: 20px; font-weight: 700; color: var(--bs-text); letter-spacing: -.01em; } #bsBereich[data-bereich="teamchat"] .tc-feld { display: flex; flex-direction: column; gap: 6px; font-size: 13px; } #bsBereich[data-bereich="teamchat"] .tc-feld > span { font-weight: 600; color: var(--bs-text); } #bsBereich[data-bereich="teamchat"] .tc-feld .a4h-field, #bsBereich[data-bereich="teamchat"] .tc-bearbeiten { width: 100%; box-sizing: border-box; font: 400 14px var(--marke-schrift); } #bsBereich[data-bereich="teamchat"] .tc-knoepfe { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; } #bsBereich[data-bereich="teamchat"] .tc-knoepfe.klein { margin-top: 6px; } #bsBereich[data-bereich="teamchat"] .tc-knoepfe.klein .bs-hinweis { margin-right: auto; } #bsBereich[data-bereich="teamchat"] .tc-knoepfe.klein .bs-knopf { height: 28px; padding: 0 12px; font-size: 12px; } #bsBereich[data-bereich="teamchat"] .bs-knopf.tc-haupt { background: var(--marke-akzent); } #bsBereich[data-bereich="teamchat"] .bs-knopf.tc-haupt:hover { background: color-mix(in srgb, var(--marke-akzent) 86%, #000); } #bsBereich[data-bereich="teamchat"] .bs-knopf.tc-gefahr { color: var(--marke-gefahr); } #bsBereich[data-bereich="teamchat"] .tc-fehler { margin: 0; font-size: 13px; } #bsBereich[data-bereich="teamchat"] .tc-lade { min-height: 80px; } /* Mitglieder-Pillen (Auswahl wie die Filter: Blau der Seitenleiste = gewählt) */ #bsBereich[data-bereich="teamchat"] .tc-wahl { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; } #bsBereich[data-bereich="teamchat"] .tc-wahl-titel { font-size: 12px; font-weight: 500; color: var(--bs-leise); } #bsBereich[data-bereich="teamchat"] .tc-pillen { display: flex; flex-wrap: wrap; gap: 6px; } #bsBereich[data-bereich="teamchat"] .tc-pille { height: 28px; padding: 0 12px; border: 1px solid var(--bs-linie); border-radius: var(--marke-r-pill); background: var(--bs-karte); color: var(--bs-text); font: 600 12px var(--marke-schrift); cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s; } #bsBereich[data-bereich="teamchat"] .tc-pille:hover { background: var(--bs-weich); } #bsBereich[data-bereich="teamchat"] .tc-pille.an { background: var(--marke-nav-blau); border-color: var(--marke-nav-blau); color: #fff; } #bsBereich[data-bereich="teamchat"] .tc-pille:disabled { cursor: default; opacity: .8; } #bsBereich[data-bereich="teamchat"] .tc-pille:focus-visible, #bsBereich[data-bereich="teamchat"] .tc-mini:focus-visible, #bsBereich[data-bereich="teamchat"] .tc-senden:focus-visible { outline: 2px solid var(--marke-akzent); outline-offset: 2px; } /* ── Geöffneter Raum: drei Kacheln auf dem grauen Grund; die Kopfreihe der Liste weicht (der Raum hat seine eigene Kopfkarte) ── */ :root.bs-offen #bsBereich[data-bereich="teamchat"].bs-detail-auf { grid-template-rows: minmax(0, 1fr); } #bsBereich[data-bereich="teamchat"].bs-detail-auf > .bs-kopf { display: none; } #bsBereich[data-bereich="teamchat"].bs-detail-auf .bs-detail:not([data-bs-neu]) { background: transparent; box-shadow: none; padding: 0; overflow: hidden; } #bsBereich[data-bereich="teamchat"] .bs-detail:not([data-bs-neu]) > .bs-zurueck { margin: 0 0 12px; background: var(--bs-karte); } #bsBereich[data-bereich="teamchat"] .bs-detail[data-bs-neu] { background: var(--bs-karte); border-radius: var(--bs-r); } #bsBereich[data-bereich="teamchat"] .tc-raum { flex: 1 1 auto; min-height: 0; display: grid; gap: var(--bs-luft); grid-template-columns: minmax(0, 1fr) minmax(240px, 300px); grid-template-rows: auto minmax(0, 1fr); } #bsBereich[data-bereich="teamchat"] .tc-kopf { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 6px; padding: 18px 22px; border-radius: var(--bs-r); color: var(--wb-auf-farbe, #fff); box-shadow: var(--wbs-schatten); transition: box-shadow .25s, transform .25s; background: linear-gradient(135deg, var(--wb-akzent, var(--marke-nav-blau)) 30%, color-mix(in srgb, var(--wb-akzent, var(--marke-nav-blau)) 66%, var(--wb-verlauf-ziel, #fff))); } #bsBereich[data-bereich="teamchat"] .tc-kopf:hover { box-shadow: var(--wb-schatten-hover, 0 10px 26px rgba(15, 23, 42, .10)); transform: translateY(-3px); } #bsBereich[data-bereich="teamchat"] .tc-kopf h2 { margin: 0; font-size: clamp(20px, 2vw, 28px); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; overflow-wrap: anywhere; } #bsBereich[data-bereich="teamchat"] .tc-kopf p { margin: 0; font-size: 14px; color: var(--wb-auf-farbe-leise, rgba(255, 255, 255, .8)); overflow-wrap: anywhere; } #bsBereich[data-bereich="teamchat"] .tc-kreise { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; } #bsBereich[data-bereich="teamchat"] .tc-kreis { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 28px; height: 28px; border-radius: 50%; font-style: normal; font-size: 11px; font-weight: 700; background: var(--bs-weich); color: var(--bs-text); } #bsBereich[data-bereich="teamchat"] .tc-kreis { position: relative; } #bsBereich[data-bereich="teamchat"] .tc-kreis.on::after { content: ''; position: absolute; right: -2px; bottom: -2px; width: 9px; height: 9px; border-radius: 50%; background: var(--marke-ok); box-shadow: 0 0 0 2px var(--bs-karte, #fff); } #bsBereich[data-bereich="teamchat"] .tc-kopf .tc-kreis { background: color-mix(in srgb, #fff 22%, transparent); color: inherit; } #bsBereich[data-bereich="teamchat"] .tc-karte { display: flex; flex-direction: column; min-height: 0; min-width: 0; padding: 16px 18px; box-sizing: border-box; border-radius: var(--bs-r); background: var(--bs-karte); color: var(--bs-text); box-shadow: var(--wbs-schatten); } #bsBereich[data-bereich="teamchat"] .tc-mitglieder { overflow-y: auto; gap: 12px; transition: box-shadow .25s; } #bsBereich[data-bereich="teamchat"] .tc-mitglieder:hover, #bsBereich[data-bereich="teamchat"] .tc-gespraech:hover { box-shadow: var(--wb-schatten-hover, 0 10px 26px rgba(15, 23, 42, .10)); } #bsBereich[data-bereich="teamchat"] .tc-gespraech { transition: box-shadow .25s; } #bsBereich[data-bereich="teamchat"] .tc-h { margin: 0; font-size: 14px; font-weight: 700; color: var(--bs-text); display: flex; align-items: baseline; gap: 8px; } #bsBereich[data-bereich="teamchat"] .tc-h small { font-size: 12px; font-weight: 500; color: var(--bs-leise); } /* Verlauf */ #bsBereich[data-bereich="teamchat"] .tc-verlauf { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 10px; padding: 4px 2px 8px; } #bsBereich[data-bereich="teamchat"] .tc-aelter { align-self: center; height: 28px; font-size: 12px; } #bsBereich[data-bereich="teamchat"] .tc-tag { align-self: center; padding: 4px 10px; border-radius: var(--marke-r-pill); background: var(--bs-weich); font-size: 11px; font-weight: 600; color: var(--bs-leise); } #bsBereich[data-bereich="teamchat"] .tc-n { position: relative; display: flex; flex-direction: column; gap: 3px; max-width: min(78%, 640px); } #bsBereich[data-bereich="teamchat"] .tc-n.andere { align-self: flex-start; } #bsBereich[data-bereich="teamchat"] .tc-n.eigen { align-self: flex-end; align-items: flex-end; } #bsBereich[data-bereich="teamchat"] .tc-n-kopf { display: flex; align-items: baseline; gap: 8px; padding: 0 4px; font-size: 12px; color: var(--bs-leise); } #bsBereich[data-bereich="teamchat"] .tc-n-kopf b { font-weight: 700; color: var(--bs-text); } #bsBereich[data-bereich="teamchat"] .tc-n-kopf time { font-variant-numeric: tabular-nums; } #bsBereich[data-bereich="teamchat"] .tc-vermerk { font-style: italic; } #bsBereich[data-bereich="teamchat"] .tc-blase { padding: 9px 13px; border-radius: var(--marke-r-l, 12px); font-size: 14px; line-height: 1.5; max-width: 100%; box-sizing: border-box; } #bsBereich[data-bereich="teamchat"] .tc-n.andere .tc-blase { background: var(--bs-karte); border: 1px solid var(--bs-linie); border-top-left-radius: 4px; } #bsBereich[data-bereich="teamchat"] .tc-n.eigen .tc-blase { background: var(--bs-weich); border: 1px solid transparent; border-top-right-radius: 4px; } #bsBereich[data-bereich="teamchat"] .tc-n-text { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--bs-text); } #bsBereich[data-bereich="teamchat"] .tc-n.geloescht .tc-n-text { font-style: italic; color: var(--bs-leise); } #bsBereich[data-bereich="teamchat"] .tc-zitat { margin: 0 0 6px; padding: 4px 8px; border: 1px solid color-mix(in srgb, var(--marke-nav-blau) 40%, var(--marke-linie)); border-radius: 4px; background: color-mix(in srgb, var(--bs-text) 4%, transparent); font-size: 12px; color: var(--bs-leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #bsBereich[data-bereich="teamchat"] .tc-zitat b { color: var(--bs-text); font-weight: 600; } #bsBereich[data-bereich="teamchat"] .tc-n-akt { position: absolute; top: 14px; display: flex; gap: 2px; opacity: 0; transition: opacity .15s; } #bsBereich[data-bereich="teamchat"] .tc-n.andere .tc-n-akt { right: -66px; } #bsBereich[data-bereich="teamchat"] .tc-n.eigen .tc-n-akt { left: -66px; } #bsBereich[data-bereich="teamchat"] .tc-n:hover .tc-n-akt, #bsBereich[data-bereich="teamchat"] .tc-n:focus-within .tc-n-akt { opacity: 1; } #bsBereich[data-bereich="teamchat"] .tc-mini { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--marke-r-m); background: transparent; color: var(--bs-leise); cursor: pointer; transition: background .15s, color .15s; } #bsBereich[data-bereich="teamchat"] .tc-mini:hover { background: var(--bs-weich); color: var(--bs-text); } #bsBereich[data-bereich="teamchat"] .tc-mini svg, #bsBereich[data-bereich="teamchat"] .tc-senden svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } #bsBereich[data-bereich="teamchat"] .tc-leer { min-height: 120px; } /* Antwort-Leiste und Eingabe */ #bsBereich[data-bereich="teamchat"] .tc-antwort { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 6px 6px 6px 12px; border: 1px solid color-mix(in srgb, var(--marke-nav-blau) 40%, var(--marke-linie)); border-radius: var(--marke-r-m); background: var(--bs-weich); font-size: 12px; color: var(--bs-leise); } #bsBereich[data-bereich="teamchat"] .tc-antwort[hidden] { display: none; } #bsBereich[data-bereich="teamchat"] .tc-antwort-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #bsBereich[data-bereich="teamchat"] .tc-eingabe { display: flex; align-items: flex-end; gap: 8px; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--bs-linie); } #bsBereich[data-bereich="teamchat"] .tc-eingabe textarea { flex: 1; min-width: 0; min-height: 40px; max-height: 160px; resize: none; box-sizing: border-box; padding: 9px 12px; border-radius: var(--marke-r-m); font: 400 14px/1.45 var(--marke-schrift); } #bsBereich[data-bereich="teamchat"] .tc-senden { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: var(--marke-r-m); background: var(--marke-akzent); color: #fff; cursor: pointer; transition: background .15s; } #bsBereich[data-bereich="teamchat"] .tc-senden:hover { background: color-mix(in srgb, var(--marke-akzent) 86%, #000); } #bsBereich[data-bereich="teamchat"] .tc-senden:disabled { opacity: .55; cursor: default; } #bsBereich[data-bereich="teamchat"] .tc-tipp { margin: 6px 0 0; font-size: 11px; } /* Mitglieder */ #bsBereich[data-bereich="teamchat"] .tc-leute { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } #bsBereich[data-bereich="teamchat"] .tc-leute li { display: flex; align-items: center; gap: 10px; padding: 5px 6px; border-radius: var(--marke-r-m); font-size: 13px; transition: background .15s; } #bsBereich[data-bereich="teamchat"] .tc-leute li:hover { background: var(--bs-weich); } #bsBereich[data-bereich="teamchat"] .tc-leute li span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #bsBereich[data-bereich="teamchat"] .tc-leute li small { font-size: 11px; color: var(--bs-leise); white-space: nowrap; } #bsBereich[data-bereich="teamchat"] .tc-abt { display: flex; flex-wrap: wrap; gap: 6px; } #bsBereich[data-bereich="teamchat"] .tc-verwalten { display: flex; flex-wrap: wrap; gap: 6px; } #bsBereich[data-bereich="teamchat"] .tc-verwalten .bs-knopf { height: 30px; padding: 0 12px; font-size: 12px; } #bsBereich[data-bereich="teamchat"] .tc-frist { display: flex; flex-direction: column; gap: 8px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--bs-linie); } /* Handy und schmale Fenster: untereinander, Nachrichten-Kachel mit fester Höhe, Aktionen immer sichtbar */ @media (max-width: 900px) { #bsBereich[data-bereich="teamchat"] .tc-raum { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; } #bsBereich[data-bereich="teamchat"] .tc-gespraech { height: 68vh; min-height: 360px; } #bsBereich[data-bereich="teamchat"] .tc-kopf, #bsBereich[data-bereich="teamchat"] .tc-karte { border-radius: var(--bs-r-k); padding: 14px 16px; } #bsBereich[data-bereich="teamchat"] .tc-kopf:hover { transform: none; } #bsBereich[data-bereich="teamchat"] .tc-n { max-width: 88%; } #bsBereich[data-bereich="teamchat"] .tc-n-akt { position: static; opacity: 1; } #bsBereich[data-bereich="teamchat"] .tc-tipp { display: none; } #bsBereich[data-bereich="teamchat"].bs-detail-auf .bs-detail:not([data-bs-neu]) { overflow: visible; } } @media (prefers-reduced-motion: reduce) { #bsBereich[data-bereich="teamchat"] .tc-kopf:hover { transform: none; } } /* ── Home-Kachel ── */ .wb-k[data-id="z-teamchat"] .tc-zahl { margin-top: 4px; } .wb-k[data-id="z-teamchat"] .tc-heim-liste { margin-top: 8px; } .wb-k[data-id="z-teamchat"] .tc-heim-badge { flex: none; min-width: 22px; height: 20px; padding: 0 6px; box-sizing: border-box; border-radius: var(--marke-r-pill); display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; background: var(--marke-nav-blau); color: #fff; }