/*
  workspace-bento-team-bento.css — Gestaltung des Bentos „Team" und der Team-Seite (Logik: workspace-bento-team-bento.js).

  Kurzbeschreibung (für Laien): Ralph, 25.10.2026 — „Teamkarte: mein Team anklicken und mit einzelnen Mitarbeitern
  interagieren". Je Person eine Karte mit Initialen-Kreis, Name und rotem Punkt bei ungelesenen Nachrichten; geöffnet
  Chat (Sprechblasen wie im Team-Chat: eigene rechts, andere links), Aufgabe geben und Ordner teilen. Kein neuer Look:
  Knöpfe, Pillen, Felder und Listen kommen aus workspace-bento-kacheln.css und workspace-bento-innenlisten.css; hier
  stehen nur Kreis, Personen-Karte und Chat-Verlauf. Farben nur über Marken-Variablen. Nie seitlich scrollen.
*/

/* Titel: Klick öffnet die volle Team-Seite (wie bei Aufgaben/Kontakten) */
.wb-k[data-id="z-team"] .wk-h > span:first-child { cursor: pointer; text-decoration: underline transparent; text-underline-offset: 3px; transition: text-decoration-color .15s; }
.wb-k[data-id="z-team"] .wk-h > span:first-child:hover { text-decoration-color: currentColor; }
.teb-neu { color: var(--wb-rot, var(--marke-gefahr)); font-weight: 700; }

/* Initialen-Kreis */
.teb-kreis { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--marke-nav-blau); color: #fff; font: 700 12px var(--marke-schrift); letter-spacing: .02em; }
.teb-kreis.gross { width: 40px; height: 40px; font-size: 14px; }
.teb-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(--wb-karte, #fff); }
.teb-punkt { position: absolute; top: -1px; right: -1px; width: 10px; height: 10px; border-radius: 50%; background: var(--marke-gefahr); box-shadow: 0 0 0 2px var(--wb-karte, #fff); }
.wb-k:is(.kraeftig, .blau, .dunkel, .zart, .frei) .teb-kreis { background: #fff; color: var(--marke-grafit); }
.teb-kreise { display: flex; gap: 4px; margin-top: auto; flex-wrap: wrap; }
.teb-kreise .teb-kreis { width: 28px; height: 28px; font-size: 11px; }

/* Personen-Karten in der Übersicht */
.teb-raster { display: grid; grid-template-columns: repeat(var(--teb-spalten, 2), minmax(0, 1fr)); gap: 8px; }
.teb-karte { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px; border: 0; border-radius: var(--marke-r-l); background: var(--wb-weich);
  color: var(--wb-text); font: 400 13px var(--marke-schrift); text-align: left; cursor: pointer; transition: background .15s, box-shadow .15s; }
.teb-karte:hover { background: color-mix(in srgb, var(--wb-text) 8%, var(--wb-karte)); }
.teb-karte:focus-visible { outline: 0; box-shadow: 0 0 0 2px var(--marke-akzent); }
.teb-karte .teb-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.teb-n-name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.teb-karte small { font-size: 12px; color: var(--wb-leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wb-k:is(.kraeftig, .blau, .dunkel, .zart, .frei) .teb-karte { background: #fff; color: var(--marke-grafit); }
.wb-k:is(.kraeftig, .blau, .dunkel, .zart, .frei) .teb-karte:hover { background: color-mix(in srgb, #fff 86%, var(--marke-grafit)); }
.wb-k:is(.kraeftig, .blau, .dunkel, .zart, .frei) .teb-karte small { color: var(--marke-text-2); }
/* Auf farbigen Bentos: Karten sind weiße Pillen mit dunkler Schrift, der Kreis darin bleibt blau; Rot nur auf Weiß */
.wb-k:is(.kraeftig, .blau, .dunkel, .zart, .frei) .teb-karte .teb-n-name { color: var(--marke-grafit); }
.wb-k:is(.kraeftig, .blau, .dunkel, .zart, .frei) .teb-karte .teb-kreis { background: var(--marke-nav-blau); color: #fff; }
.wb-k:is(.kraeftig, .blau, .dunkel, .zart, .frei) .teb-karte .teb-neu { color: var(--marke-gefahr); }
.wb-k:is(.kraeftig, .blau, .dunkel, .zart, .frei) .teb-neu { color: var(--wb-text); }
.wb-k:is(.kraeftig, .blau, .dunkel, .zart, .frei) .teb-punkt { box-shadow: 0 0 0 2px #fff; }
.teb-reihe { flex-direction: row; align-items: center; gap: 6px; flex-wrap: nowrap; }
.teb-karte.kompakt { padding: 4px 10px 4px 4px; border-radius: var(--marke-r-pill); flex: 0 1 auto; }
.teb-uebersicht > .zk-knopf { align-self: flex-start; }

/* Detail: Kopf, Reiter, Chat */
.teb-detail { gap: 8px; }
.teb-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.teb-reiter { flex: none; }
.teb-verlauf { flex: 1 1 auto; min-height: 64px; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 8px; padding: 4px 2px; }
.teb-verlauf > .il-mitte { flex: 1; }
.teb-leer { margin: auto 0; text-align: center; }
.teb-n { display: flex; flex-direction: column; gap: 2px; max-width: 85%; }
.teb-n.andere { align-self: flex-start; }
.teb-n.eigen { align-self: flex-end; align-items: flex-end; }
.teb-blase { padding: 6px 10px; border-radius: var(--marke-r-l); font-size: 13px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--wb-text); }
.teb-n.andere .teb-blase { background: var(--wb-karte); border: 1px solid var(--wb-linie); border-top-left-radius: 4px; }
.teb-n.eigen .teb-blase { background: var(--wb-weich); border: 1px solid transparent; border-top-right-radius: 4px; }
.teb-n.geloescht .teb-blase { font-style: italic; color: var(--wb-leise); }
.teb-n small { font-size: 11px; color: var(--wb-leise); padding: 0 4px; font-variant-numeric: tabular-nums; }
.wb-k:is(.kraeftig, .blau, .dunkel, .zart, .frei) .teb-blase { background: #fff; color: var(--marke-grafit); border-color: transparent; }
.wb-k:is(.kraeftig, .blau, .dunkel, .zart, .frei) .teb-n small { color: inherit; opacity: .8; }
.teb-eingabe { flex: none; display: flex; align-items: flex-end; gap: 8px; }
.teb-eingabe textarea.il-feld { min-height: 36px; max-height: 120px; resize: none; }
.teb-eingabe .zk-knopf { flex: none; height: 36px; }
.teb-ordner .zk-knopf { flex: none; }
.teb-detail .ib-msg:empty { display: none; }

/* Team-Seite: Karte im Raster und großes Detail */
.teb-skarte { display: flex; align-items: center; gap: 12px; min-width: 0; }
.teb-skarte .teb-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.teb-skarte b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.teb-skarte small { font-size: 12px; color: var(--bs-leise, var(--wb-leise)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.teb-seite { height: 100%; min-height: 360px; --wb-karte: var(--bs-karte, #fff); --wb-weich: var(--bs-weich, var(--marke-flaeche)); --wb-text: var(--bs-text, var(--marke-text));
  --wb-leise: var(--bs-leise, var(--marke-text-3)); --wb-linie: var(--bs-linie, var(--marke-linie)); --wb-rot: var(--marke-gefahr); --wb-gruen: var(--marke-ok); --wb-dunkel: var(--marke-grafit); }
.teb-seite .teb-verlauf { min-height: 200px; }
.teb-seite .teb-blase { font-size: 14px; }