/*
  workspace-rechte-matrix.css — „Übersicht" der Seite „Berechtigungen" (Logik: workspace-rechte-matrix.js).

  Kurzbeschreibung (für Laien): Ralph, 26.10.2026 — die Gesamt-Tabelle „wer darf was". Tabelle nach marke/bausteine/31
  (a4h-table, ohne Zebra, Linie als Trenner), erste Spalte bleibt beim Scrollen stehen, oben die Namen. Je Feld ein kleines
  rundes Zeichen: Haken = darf (Markengrün), Kreuz = gesperrt (Gefahr-Rot); kräftig = eigens eingestellt, blass = Vorgabe,
  Schloss = fest. Spalten = Abteilungen (schmal, Kurzname), Personen per Pfeil daneben aufgeklappt (leicht getönt).
  Zu breit: erst zoom bis 75 %, dann scrollt nur der Tabellenbereich waagerecht (Ausnahme unten begründet), nie die Seite.
  Ausgewählt = Blau (--wb-auswahl). Farben nur aus marke.css / Bento-Werten; Dunkelmodus über deren Variablen.
*/
.bv-ansicht { margin: 0 0 12px; }
.rm { display: flex; flex-direction: column; gap: 12px; min-width: 0; font-family: var(--marke-schrift); }
.rm-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rm-leiste .bs-sk-werte { margin-right: auto; }
.rm-leiste .tm-sichtbar.an { background: var(--wb-auswahl, var(--marke-nav-blau)); color: #fff; }
.rm-hilfe { margin: 0; }
.rm-sammel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--marke-r-m);
  background: color-mix(in srgb, var(--marke-akzent) 8%, var(--bs-karte)); font-size: 13px; }
.rm-sammel > span { margin-right: auto; }
.rm-sammel .bs-knopf { height: 32px; font-size: 12px; }
.rm-sammel .bs-knopf[disabled] { opacity: .45; cursor: default; }

/* marke-ausnahme: Vollseite „Berechtigungen“ – Ralph 26.10.2026: passt die Tabelle nach dem Einpassen (zoom bis 75 %) nicht,
   darf NUR dieser Tabellenbereich waagerecht scrollen (Kopf + erste Spalte bleiben stehen), die Seite selbst nie. */
.rm-huelle { width: 100%; max-height: calc(100vh - 260px); overflow: auto; overscroll-behavior-x: contain; border-radius: var(--marke-r-m); }
.rm-tab.a4h-table { border-collapse: separate; border-spacing: 0; width: 100%; min-width: max-content; table-layout: auto; }   /* kompakt: Spalten nah an den Namen statt über die ganze Breite gezogen (Befund 28.10.2026) */
.rm-tab thead th { position: sticky; top: 0; z-index: 2; background: var(--bs-karte); vertical-align: bottom; text-transform: none; letter-spacing: 0; }
.rm-tab th.rm-ecke { left: 0; z-index: 3; text-align: left; min-width: 220px; }
.rm-tab th.rm-ecke span { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--bs-leise); }
.rm-sp { width: 84px; min-width: 84px; max-width: 84px; padding: 6px 4px; text-align: center; }
.rm-sp.rm-pers { width: 104px; min-width: 104px; max-width: 104px; }
.rm-sp b, .rm-sp small { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-sp b { white-space: normal; overflow-wrap: normal; hyphens: auto; -webkit-hyphens: auto; text-overflow: clip; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.rm-sp b { font-size: 11px; font-weight: 600; color: var(--bs-text); }
.rm-sp small { font-size: 11px; font-weight: 400; color: var(--bs-leise); }
.rm-sp .tm-ini { width: 28px; height: 28px; font-size: 11px; margin: 0 auto 4px; }
.rm-sp.abt .tm-ini { background: var(--marke-nav-blau); }
.rm-sp.rm-adm .tm-ini { background: var(--bs-dunkel); }
.rm-spwahl { display: flex; flex-direction: column; align-items: center; width: 100%; padding: 4px 2px; border: 0; border-radius: var(--marke-r-s);
  background: transparent; font: inherit; color: inherit; cursor: pointer; }
.rm-spwahl:hover { background: var(--bs-weich); }
.rm-sp.gewaehlt .rm-spwahl { box-shadow: inset 0 0 0 2px var(--wb-auswahl, var(--marke-nav-blau)); background: color-mix(in srgb, var(--wb-auswahl, var(--marke-nav-blau)) 10%, var(--bs-karte)); }
.rm-sp.leer .rm-spwahl { cursor: default; }
.rm-sp.leer b { color: var(--bs-leise); }

/* Akkordeon: Pfeil an der Abteilung → Personen daneben (leicht getönt, damit man sieht, wozu sie gehören) */
.rm-auf { display: inline-flex; align-items: center; gap: 2px; margin: 0 auto 4px; height: 22px; padding: 0 8px 0 4px; border: 0; border-radius: var(--marke-r-pill);
  background: var(--bs-weich); color: var(--bs-leise); font: 600 11px var(--marke-schrift); cursor: pointer; }
.rm-auf svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.rm-sp .rm-auf small { display: inline; color: inherit; font-size: 11px; }
.rm-auf:hover { color: var(--bs-text); box-shadow: 0 0 0 1px var(--marke-linie-stark); }
.rm-auf[aria-expanded="true"] { background: var(--wb-auswahl, var(--marke-nav-blau)); color: #fff; }
.rm-auf[aria-expanded="true"] svg { transform: rotate(180deg); }
.rm-tab .rm-pers { background: color-mix(in srgb, var(--wb-auswahl, var(--marke-nav-blau)) 4%, var(--bs-karte)); }
.rm-tab .rm-offen { background: color-mix(in srgb, var(--wb-auswahl, var(--marke-nav-blau)) 8%, transparent); }
.rm-sp.rm-pers .tm-ini { width: 24px; height: 24px; font-size: 10px; }
.rm-z.fest.leer { background: transparent; color: var(--bs-linie); }
.rm-handy { display: flex; flex-direction: column; gap: 4px; }
.rm-handy .tm-satz { margin: 0; }

.rm-tab tbody td, .rm-tab tbody th { padding: 4px; border-bottom: 1px solid var(--bs-linie); }
.rm-tab tbody tr:hover td, .rm-tab tbody tr:hover th { background: var(--bs-weich); }
.rm-zeile { position: sticky; left: 0; z-index: 1; background: var(--bs-karte); text-align: left; font-weight: 400; }
.rm-zeile-in { display: flex; align-items: center; gap: 8px; min-width: 220px; max-width: 300px; }
.rm-titel { font-size: 13px; color: var(--bs-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-gruppe th { position: static; padding: 12px 4px 4px; text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .02em; color: var(--bs-leise); background: transparent; border-bottom: 1px solid var(--marke-linie-stark); }
.rm-gruppe th span { text-transform: none; font-weight: 400; letter-spacing: 0; }
.rm-gruppe-in { position: sticky; left: 4px; display: inline-flex; align-items: center; gap: 6px; }
.rm-gklapp { display: inline-flex; align-items: center; gap: 4px; border: 0; background: transparent; padding: 2px 6px 2px 0; border-radius: var(--marke-r-s);
  font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; }
.rm-gklapp:hover { color: var(--bs-text); }
.rm-gklapp svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transform: rotate(90deg); transition: transform .15s; }
.rm-gklapp[aria-expanded="false"] svg { transform: none; }
.rm-gklapp small { font-weight: 500; }
.rm-tab tbody tr.rm-gruppe:hover th { background: transparent; }
.rm-tab tr.gewaehlt th.rm-zeile { background: color-mix(in srgb, var(--wb-auswahl, var(--marke-nav-blau)) 12%, transparent); }
.rm-zwahl { flex: none; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; padding: 0;
  border: 1.5px solid var(--marke-linie-stark); border-radius: var(--marke-r-s); background: var(--bs-karte); color: #fff; cursor: pointer; }
.rm-zwahl[aria-pressed="true"] { background: var(--wb-auswahl, var(--marke-nav-blau)); border-color: var(--wb-auswahl, var(--marke-nav-blau)); }
.rm-zwahl.leer { border: 0; background: transparent; color: var(--bs-leise); cursor: default; }
.rm-zwahl svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.rm-f { text-align: center; }
.rm-z { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: var(--marke-r-pill);
  vertical-align: middle; cursor: pointer; user-select: none; touch-action: manipulation; transition: transform .12s, box-shadow .12s; }
.rm-z svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.rm-z.ja { background: color-mix(in srgb, var(--marke-ok) 14%, var(--bs-karte)); color: var(--marke-ok); }
.rm-z.ja.eigen { background: var(--marke-ok); color: #fff; }
.rm-z.nein { background: color-mix(in srgb, var(--marke-gefahr) 14%, var(--bs-karte)); color: var(--marke-gefahr); }
.rm-z.nein.eigen { background: var(--marke-gefahr); color: #fff; }
.rm-z.ueber { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--marke-gefahr) 16%, var(--bs-karte)) 0 4px, var(--bs-karte) 4px 8px); }
.rm-z.fest { background: var(--bs-weich); color: var(--bs-leise); cursor: default; }
.rm-z.fest svg { width: 14px; height: 14px; stroke-width: 2.2; }
.rm-z.fest.ja { color: var(--marke-ok); }
button.rm-z:hover { box-shadow: 0 0 0 2px var(--marke-linie-stark); }
button.rm-z:focus-visible { outline: 2px solid var(--marke-akzent); outline-offset: 2px; }
.rm-z.malt { box-shadow: 0 0 0 2px var(--marke-akzent); transform: scale(1.12); }
.rm-regel { min-width: 40px; height: 24px; padding: 0 8px; border: 0; border-radius: var(--marke-r-pill); background: var(--bs-weich); color: var(--bs-leise);
  font: 600 11px var(--marke-schrift); cursor: pointer; }
.rm-regel:hover { background: var(--marke-feld); color: var(--bs-text); }
.rm-regel.an { background: color-mix(in srgb, var(--marke-nav-blau) 16%, var(--bs-karte)); color: var(--marke-nav-blau); }
.rm-legende { align-items: center; gap: 6px; font-size: 12px; color: var(--bs-leise); }
.rm-legende .rm-z { width: 20px; height: 20px; cursor: default; }
.rm-legende .rm-z svg { width: 12px; height: 12px; }

.rm-verlauf { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-height: 60vh; overflow-y: auto; }
.rm-v { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--bs-linie, var(--marke-linie)); font-size: 13px; }
.rm-v small { color: var(--marke-text-3); font-size: 12px; white-space: nowrap; }

@media (max-width: 899px) {
  .rm-huelle { max-height: none; }
  .rm-tab th.rm-ecke, .rm-zeile-in { min-width: 150px; max-width: 180px; }
  .rm-sp { width: 64px; min-width: 64px; max-width: 64px; }
  .rm-sp small { display: none; }
}
@media (prefers-reduced-motion: reduce) { .rm-z, .rm-auf svg, .rm-gklapp svg { transition: none; } }
@media (max-width: 720px) { .rm-huelle { overflow-x: hidden; } }
/* Sprungziel aus den Einstellungen (Rechtsklick auf eine Karte): Zeile kurz hervorheben */
.rm-tab tr > * { transition: background-color .6s ease; }
.rm-tab tr.rm-ziel > th, .rm-tab tr.rm-ziel > td { background: color-mix(in srgb, var(--marke-akzent) 12%, transparent); }

/* Nur Leitung (inkl. Stellvertretung), Ralph 07.11.2026: Marke „L“ am Feld */
.rm-z.nl { position: relative; }
.rm-nl { position: absolute; right: -4px; bottom: -4px; min-width: 14px; height: 14px; padding: 0 2px; box-sizing: border-box; border-radius: var(--marke-r-pill); display: inline-flex; align-items: center; justify-content: center;
  font: 700 9px/1 var(--marke-schrift); font-style: normal; background: var(--marke-akzent); color: #fff; box-shadow: 0 0 0 1.5px var(--bs-karte); }