/*
  workspace-team.css — Bereich „Team & Rechte" im Bento (Logik: workspace-team.js) und das Fenster „Sichtbar für …" (bento-rechte.js).

  Kurzbeschreibung (für Laien): Ralph, 24.10.2026 — „ausnahmslos Bento". Die Seite nutzt die Bereichs-Vorlage
  (workspace-bento-seite.css: blaue Kopfkarte, Umschalter-Kacheln, Kachel-Raster, groß geöffneter Eintrag). Hier steht,
  was dazukommt: das Raster wie auf Home (6 Spalten, Reihen 168 px, 16 px Luft; Handy 1 Spalte, 132 px, 12 px), die
  Personen-Kacheln mit Initialen, innen die Kacheln für Abteilung, Einladung und je Bereich ein Schalter „darf sehen".
  Unten die Teile des Fensters „Sichtbar für …" (Pillen, Felder, Knöpfe). Farben nur aus marke.css bzw. den Bento-Werten
  (--wb- und --bs-Werte), dunkel automatisch mit. Knöpfe behalten ihre eigene Farbe (Ralph): nie die Kachel- oder Textfarbe.
*/

/* ── Raster der Übersicht: wie Home ── */
#bsBereich[data-bereich="team"] .bs-kacheln { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 168px; gap: 16px; padding-top: 10px; }
#bsBereich[data-bereich="team"] .bs-kachel { grid-column: span 2; min-height: 0; gap: 8px; padding: 20px 22px; overflow: hidden; }
#bsBereich[data-bereich="team"] .bs-leer .a4h-spin { width: 30px !important; height: 30px !important; margin: 0 !important; }   /* Ladekreis allein: groß */
#bsBereich[data-bereich="team"] .tm-k-kopf { display: flex; align-items: center; gap: 12px; min-width: 0; }
#bsBereich[data-bereich="team"] .tm-k-wer { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#bsBereich[data-bereich="team"] .tm-k-rolle, #bsBereich[data-bereich="team"] .tm-k-mail { font-size: 12px; color: var(--bs-leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-ini { flex: none; width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--bs-dunkel); color: #fff; font: 700 14px var(--marke-schrift); letter-spacing: .02em; }
.tm-ini.offen { background: var(--wb-akzent-zart, var(--marke-nav-kachel)); color: var(--marke-grafit); }
.bs-etikett.tm-admin { background: var(--bs-dunkel); color: #fff; }
#bsBereich[data-bereich="team"] .tm-abt .tm-k-rolle { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
#bsBereich[data-bereich="team"] .tm-still { cursor: default; justify-content: center; }
#bsBereich[data-bereich="team"] .tm-still:hover { transform: none; }

/* ── Groß geöffnet: kein weißes Blatt, sondern Kacheln auf dem grauen Grund (wie Einstellungen) ── */
#bsBereich[data-bereich="team"][data-ansicht="raster"].bs-detail-auf .bs-detail { background: transparent; box-shadow: none; padding: 10px 2px 20px; }
.tm-raster { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: minmax(168px, auto); grid-auto-flow: dense; gap: 16px; }
.tm-raster > .tm-kopf { grid-column: span 2; min-height: 168px; }
.tm-raster > .tm-kopf h2 { overflow-wrap: anywhere; }
.tm-k { grid-column: span var(--b, 2); position: relative; display: flex; flex-direction: column; gap: 10px; 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(--wb-rand, none); font-family: var(--marke-schrift);
  transition: box-shadow .25s; }
.tm-k:hover { box-shadow: var(--wb-schatten-hover), var(--wb-rand, 0 0 0 0 transparent); }
.tm-k.tm-recht { padding: 16px 16px 14px; gap: 8px; }
.tm-k.tm-recht .bs-etikett { align-self: flex-start; }
.tm-k.tm-rot { background: color-mix(in srgb, var(--marke-gefahr) 7%, var(--bs-karte)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--marke-gefahr) 22%, transparent); }
.tm-k.tm-rot .tm-k-titel { color: var(--marke-gefahr); }
.tm-k-titel { margin: 0; font: 600 15px/1.3 var(--marke-schrift); color: var(--bs-text); }
.tm-satz { margin: 0; font-size: 13px; line-height: 1.45; color: var(--bs-leise); }
.tm-recht .tm-satz { font-size: 12px; }
.tm-k-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: auto; }
.tm-k-fuss + .tm-k-fuss { margin-top: 0; }
.tm-meldung { grid-column: 1 / -1; margin: -4px 0; font-size: 13px; }
.tm-meldung[hidden] { display: none; }
.tm-eingabe { width: 100%; height: 40px; padding: 0 16px; border: 0; border-radius: var(--marke-r-pill); background: var(--bs-weich); color: var(--bs-text);
  font: 400 13px var(--marke-schrift); outline: 0; box-sizing: border-box; }
.tm-fl { display: flex; flex-direction: column; gap: 4px; min-width: 0; font: 600 12px var(--marke-schrift); color: var(--bs-leise); }
.tm-eingabe:focus { box-shadow: 0 0 0 2px color-mix(in srgb, var(--bs-text) 30%, transparent); }
.tm-eingabe[hidden] { display: none; }
.tm-k .bs-sk-werte button:disabled { opacity: .55; cursor: default; }
.tm-k .bs-sk-werte button.an { cursor: pointer; }
.bs-knopf.tm-gefahr { background: var(--marke-gefahr); color: #fff; }
.bs-knopf.tm-gefahr:hover { background: color-mix(in srgb, var(--marke-gefahr) 86%, #000); }
.tm-sichtbar { border: 0; background: none; padding: 4px 6px; margin-left: auto; border-radius: var(--marke-r-pill); font: 600 12px var(--marke-schrift);
  color: var(--bs-leise); cursor: pointer; white-space: nowrap; }
.tm-sichtbar:hover { background: var(--bs-weich); color: var(--marke-grafit); }
:root[data-theme="dark"] .tm-sichtbar:hover { color: #fff; }
/* Schalter „darf sehen" (gleich wie .a4h-switch der Stil-Basis, hier ohne deren Anschluss) */
.tm-schalter { position: relative; width: 36px; height: 20px; flex: none; padding: 0; border: 0; border-radius: 999px; background: var(--marke-linie-stark); cursor: pointer; transition: background .15s; }
.tm-schalter::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: left .15s; }
.tm-schalter[aria-checked="true"] { background: var(--marke-nav-blau); }
.tm-schalter[aria-checked="true"]::after { left: 18px; }
.tm-schalter:disabled { opacity: .5; cursor: default; }
.tm-schalter:focus-visible { outline: 2px solid var(--marke-akzent); outline-offset: 2px; }
.tm-link { overflow-wrap: anywhere; user-select: all; }

@media (max-width: 1100px) {
  #bsBereich[data-bereich="team"] .bs-kacheln, .tm-raster { gap: 12px; }
  .tm-raster { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 699px) {
  #bsBereich[data-bereich="team"] .bs-kacheln { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 132px; gap: 12px; }
  #bsBereich[data-bereich="team"] .bs-kachel { grid-column: auto; padding: 14px 16px; gap: 6px; }
  .tm-ini { width: 34px; height: 34px; font-size: 12px; }
  .tm-raster { grid-template-columns: minmax(0, 1fr); grid-auto-rows: minmax(132px, auto); gap: 12px; }
  .tm-raster > .tm-kopf, .tm-k { grid-column: auto; }
  .tm-raster > .tm-kopf { min-height: 132px; }
  .tm-k { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) { .tm-k, .tm-schalter, .tm-schalter::after { transition: none; } }

/* ── Fenster „Sichtbar für …" (bento-rechte.js) und Rückfragen: Karte rund wie die Bento-Karten ── */
.tm-fenster .a4h-modal { border-radius: var(--marke-r-l, 12px); }
.tm-fenster .a4h-modal-body { display: flex; flex-direction: column; gap: 12px; font-size: 13px; color: var(--marke-text); }
.tm-fenster .a4h-modal-body p { margin: 0; }

.tm-knopf { height: 36px; padding: 0 16px; border: 0; border-radius: var(--marke-r-pill); background: var(--marke-grafit, #14141d); color: #fff;
  font: 600 13px var(--marke-schrift); cursor: pointer; white-space: nowrap; transition: background .2s; }
.tm-knopf:hover { background: color-mix(in srgb, var(--marke-grafit, #14141d) 84%, #fff); }
.tm-knopf.zweit { background: var(--marke-flaeche-2, #f0f0f7); color: var(--marke-grafit); }
:root[data-theme="dark"] .tm-knopf.zweit { color: #fff; }
.tm-knopf.zweit:hover { background: color-mix(in srgb, var(--marke-text) 10%, var(--marke-flaeche, #fff)); }
.tm-knopf:disabled { opacity: .55; cursor: default; }

/* Auswahl-Pillen (Abteilungen, Personen, Alle/Nur ausgewählte) */
.tm-wahl, .tm-pillen { display: flex; flex-wrap: wrap; gap: 4px; }
.tm-pille { border: 0; border-radius: var(--marke-r-pill); padding: 8px 12px; background: var(--marke-feld); color: var(--marke-text-2);
  font: 600 12px var(--marke-schrift); cursor: pointer; white-space: nowrap; transition: background .2s, color .2s; }
.tm-pille:hover { color: var(--marke-text); background: color-mix(in srgb, var(--marke-text) 8%, transparent); }
.tm-pille.an { background: var(--marke-grafit, #14141d); color: #fff; }
.tm-auswahl { display: flex; flex-direction: column; gap: 8px; }
.tm-auswahl[hidden] { display: none; }

.tm-ueber { margin: 16px 0 8px; font-size: 12px; font-weight: 600; color: var(--marke-text-2); }
.tm-fenster .tm-ueber { margin: 4px 0 0; }
.tm-leise { font-size: 12px; color: var(--marke-text-2); }
/* „Für alle“ + zuklappbare Abschnitte im Fenster „Sichtbar für …“ (07.11.2026, bento-rechte.js) */
.tm-fuer-alle { display: flex; flex-direction: column; gap: 8px; }
.tm-fuer-alle .tm-ueber { margin: 0; }
.tm-meld { margin: 0; font-size: 12px; color: var(--marke-text-2); }
.tm-meld[hidden] { display: none; }
.tm-rueck { border: 0; background: none; padding: 0; font: 600 12px var(--marke-schrift); color: var(--marke-text); text-decoration: underline; cursor: pointer; }
.tm-sek { display: flex; flex-direction: column; gap: 8px; }
.tm-sek-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tm-fenster .tm-sek-kopf .tm-ueber, .tm-sek-kopf .tm-ueber { margin: 4px 0 0; }
.tm-kurz { font-weight: 400; color: var(--marke-text-2); }
.tm-klapp { border: 0; background: none; padding: 4px 8px; border-radius: var(--marke-r-pill); font: 600 12px var(--marke-schrift); color: var(--marke-text-2); cursor: pointer; }
.tm-klapp:hover { color: var(--marke-text); background: color-mix(in srgb, var(--marke-text) 8%, transparent); }
.tm-sek-rumpf { display: flex; flex-direction: column; gap: 8px; }
.tm-sek-rumpf[hidden] { display: none; }
.tm-sek-rumpf .tm-leise { margin: 0; }

/* Fenster „Was der KI-Chat beantworten darf“ (workspace-rechte-ki-inhalte.js) */
.tm-ki-liste { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.tm-ki-zeile { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; border-radius: var(--marke-r-m, 9px); background: var(--marke-feld); }
.tm-ki-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 13px; color: var(--marke-text); }
.tm-ki-text small { font-size: 12px; color: var(--marke-text-2); }
.tm-ki-wer { font-size: 12px; font-weight: 600; color: var(--marke-text-2); }
.tm-ki-wer.eigen { color: var(--marke-text); }
.tm-fehler { font-size: 12px; color: var(--marke-gefahr); margin: 8px 0 0; }
.tm-fehler[hidden] { display: none; }

/* ── Bentos je Person / Abteilung (workspace-team-bentos.js, Ralph 25.10.2026): breite Kachel, Reiter-Pillen, Lupe,
      je Bento eine Zeile mit Pillen „Frei | Gesperrt" (wie die Einstellungen-Karten, .bs-sk-werte) ── */
.tm-k.tmb { grid-column: 1 / -1; gap: 12px; }
.tmb-kopf { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.tmb-kopf .tm-k-titel { margin-right: 4px; }
.tmb-lupe { margin-left: auto; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0;
  border-radius: var(--marke-r-pill); background: var(--bs-weich); color: var(--bs-text); cursor: pointer; }
.tmb-lupe:hover, .tmb-lupe[aria-expanded="true"] { background: var(--marke-feld); }
.tmb-lupe svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.tmb-koerper { display: flex; flex-direction: column; gap: 16px; }
.tmb-ueber { margin: 0 0 8px; font: 600 12px var(--marke-schrift); color: var(--bs-text); }
.tmb-ueber span { font-weight: 400; color: var(--bs-leise); margin-left: 4px; }
.tmb-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 8px; }
.tmb-zeile { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 8px 8px 8px 12px; border-radius: var(--bs-r-k); background: var(--bs-weich); }
.tmb-zeile.zu .tmb-name { color: var(--bs-leise); }
.tmb-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tmb-name { font: 600 13px var(--marke-schrift); color: var(--bs-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tmb-quelle { font-size: 11px; color: var(--bs-leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tmb-quelle.eigen { color: var(--marke-akzent); font-weight: 600; }
.tmb-zeile .bs-sk-werte { flex: none; flex-wrap: nowrap; }
.tmb-zeile .bs-sk-werte button { background: var(--bs-karte); padding: 6px 10px; }
.tmb-zeile .bs-sk-werte button.an { background: var(--bs-dunkel); color: #fff; }
.tmb-zeile .bs-sk-werte button[data-frei="0"].an { background: var(--marke-gefahr); }
.tmb-zeile .bs-sk-werte button:disabled { opacity: .55; cursor: default; }
.tmb-zeile .tm-sichtbar { margin-left: 0; }
@media (max-width: 699px) {
  .tm-k.tmb { grid-column: auto; }
  .tmb-zeile { flex-wrap: wrap; }
  .tmb-text { flex-basis: 100%; }
}

/* ── Personenliste rechts über den Baustein BentoSpalte (workspace-bento-team-spalte.js, Ralph 08.11.2026); Filter-Pillen oben in der Mitte ── */
:root.wb-menue-modus #bsBereich[data-bereich="team"][data-spalte] .bs-liste { display: none; }
:root.wb-menue-modus #bsBereich[data-bereich="team"] .wtm-spalte { grid-area: liste; min-height: 0; border-left: 1px solid var(--bsl-linie, var(--wb-linie)); width: 100%; padding-right: 0; }   /* Raster (Ralph 08.11.2026): Trennlinie am Spaltenanfang (x = 1196) wie auf Aufgaben, Spalte bis zum Kartenrand */
:root.wb-menue-modus #bsBereich[data-bereich="team"][data-spalte] .bs-detail { border-right: 0; padding-right: 0; }
:root.wb-menue-modus #bsBereich[data-bereich="team"] .wtm-spalte[hidden] { display: none; }
@media (min-width: 901px) {
  :root.wb-menue-modus #bsBereich[data-bereich="team"][data-spalte] > .bs-kopf { grid-column: 1; grid-row: 1; align-self: start; justify-self: start; position: relative; z-index: 1; padding: 0; }
  :root.wb-menue-modus #bsBereich[data-bereich="team"][data-spalte] .bs-detail { padding-top: 44px; }
  :root.wb-menue-modus #bsBereich[data-bereich="team"] .wtm-spalte { grid-row: 1 / -1; }   /* Spalte beginnt oben, nicht unter der Pillen-Zeile */
}
@media (max-width: 900px) { :root.wb-menue-modus #bsBereich[data-bereich="team"] .wtm-spalte { height: auto; } }
:root.wb-menue-modus #bsBereich[data-bereich="team"][data-spalte] .bs-plus { display: none; }   /* das ＋ steht jetzt in der Spalte */

/* ── Übersicht ohne Auswahl (Menü-Ansicht) ── */
#bsBereich[data-bereich="team"] .tm-ue { display: flex; flex-direction: column; gap: 16px; padding: 0 0 16px; max-width: 800px; }
#bsBereich[data-bereich="team"] .tm-ue-zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }
#bsBereich[data-bereich="team"] .tm-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="team"] .tm-ue-z b { font-size: 20px; font-weight: 700; color: var(--bs-text); font-variant-numeric: tabular-nums; }
#bsBereich[data-bereich="team"] .tm-ue-z span { font-size: 12px; color: var(--bs-leise); }
#bsBereich[data-bereich="team"] .tm-ue-fuss { display: flex; }

/* Raster (Ralph 08.11.2026): Reiter ohne Spalte (Abteilungen, Zugang …) beginnen bei y = 152 – die leere Kopfzeile oben schob sie wegen des Zeilenabstands um 16 px nach unten */
:root.wb-menue-modus #bsBereich[data-bereich="team"]:not([data-spalte]) { row-gap: 0; }