/*
  workspace-organigramm.css — Ansicht „Organigramm" (Logik: workspace-organigramm.js).

  Kurzbeschreibung (für Laien): Links der Baum — Geschäftsführung oben, darunter die Mitarbeiter als Karten, verbunden mit
  dünnen Linien; die Farbe der Karte zeigt den Bereich. Rechts das Seitenfeld der angeklickten Person. Am Handy steht das
  Seitenfeld unter dem Baum und der Baum läuft untereinander. Farben nur aus marke.css bzw. den Bento-Werten, dunkel automatisch.
*/
#bsBereich[data-bereich="organigramm"] .bs-liste { background: transparent; box-shadow: none; }
:root #bsBereich[data-bereich="organigramm"] { row-gap: 0; }   /* der leere Kopf (Reiter stehen im Fensterkopf) lässt keinen Abstand: Oberkante y=152 wie überall */
:root.wb-menue-modus #bsBereich[data-bereich="organigramm"] .bs-liste { padding-top: 0; }
.og { --og-linie: var(--bs-linie, rgba(20, 20, 45, .16)); display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; font-family: var(--marke-schrift); color: var(--bs-text); }
.og-links, .og-panel { background: var(--bs-karte); border-radius: var(--bs-r); box-shadow: var(--wb-rand, none); min-width: 0; }
.og-links { padding: 16px 18px 22px; }
.og-panel { padding: 18px 18px 20px; position: sticky; top: 0; max-height: calc(100vh - 150px); overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.og-leiste { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.og-legende { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--bs-leise); }
.og-leg { display: inline-flex; align-items: center; gap: 6px; }
.og-leg i { width: 10px; height: 10px; border-radius: 50%; background: var(--og-ton); }

/* Farbe je Bereich (sechs Töne aus den Markenfarben) */
.t0 { --og-ton: var(--marke-nav-blau); } .t1 { --og-ton: var(--marke-ok); } .t2 { --og-ton: var(--marke-akzent); }
.t3 { --og-ton: var(--marke-warn); } .t4 { --og-ton: var(--marke-gefahr); } .t5 { --og-ton: var(--marke-grafit); } .tx { --og-ton: var(--bs-leise); }

/* Baum mit Linien */
.og-baum { overflow: auto; padding: 2px 2px 8px; }
.og-baum ul { display: flex; justify-content: center; gap: 0; margin: 0; padding: 22px 0 0; list-style: none; position: relative; }
.og-baum ul.og-wurzel { padding-top: 0; }
.og-baum li { position: relative; display: flex; flex-direction: column; align-items: center; padding: 22px 8px 0; min-width: 0; }
.og-baum .og-wurzel > li { padding-top: 0; }
.og-baum li::before, .og-baum li::after { content: ""; position: absolute; top: 0; width: 50%; height: 22px; border-top: 1px solid var(--og-linie); }
.og-baum li::before { right: 50%; }
.og-baum li::after { left: 50%; border-left: 1px solid var(--og-linie); }
.og-baum li:first-child::before, .og-baum li:last-child::after { border-top: 0; }
.og-baum li:first-child::after { border-top-left-radius: 8px; }
.og-baum li:last-child::before { border-right: 1px solid var(--og-linie); border-top-right-radius: 8px; }
.og-baum li:only-child::before { display: none; }
.og-baum li:only-child::after { border-top: 0; border-radius: 0; }
.og-baum .og-wurzel > li::before, .og-baum .og-wurzel > li::after { display: none; }
.og-baum ul ul::before { content: ""; position: absolute; top: 0; left: 50%; height: 22px; border-left: 1px solid var(--og-linie); }

.og-karte { position: relative; z-index: 1; width: 188px; max-width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; text-align: left; cursor: pointer;
  padding: 12px 12px 12px 14px; border: 0; border-radius: var(--bs-r-k); background: var(--bs-weich); color: var(--bs-text); font-family: var(--marke-schrift);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--og-ton, var(--bs-leise)) 40%, transparent); transition: box-shadow .2s, transform .2s, background .2s; }
.og-karte:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--og-ton, var(--bs-leise)) 40%, transparent), var(--wb-schatten-hover, 0 6px 18px rgba(20, 20, 45, .12)); }
.og-karte.an { background: color-mix(in srgb, var(--og-ton, var(--marke-nav-blau)) 12%, var(--bs-karte)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--og-ton, var(--bs-leise)) 40%, transparent), 0 0 0 2px var(--og-ton, var(--marke-akzent)); }
.og-karte:focus-visible { outline: 2px solid var(--marke-akzent); outline-offset: 2px; }
.og-karte.extern { border: 1px dashed var(--og-linie); }
.og-ini { position: relative; width: 36px; height: 36px; font-size: 13px; background: var(--og-ton, var(--bs-dunkel)); }
.og-ini.gross { width: 46px; height: 46px; font-size: 16px; }
.og-wer { display: flex; flex-direction: column; gap: 2px; min-width: 0; max-width: 100%; }
.og-wer b { font: 600 14px/1.25 var(--marke-schrift); overflow-wrap: anywhere; }
.og-wer small { font-size: 12px; line-height: 1.3; color: var(--bs-leise); overflow-wrap: anywhere; }
.og-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.og-tag { font-style: normal; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: var(--marke-r-pill); background: color-mix(in srgb, var(--og-ton, var(--bs-leise)) 16%, transparent); color: var(--bs-text); }
.og-tag.leer, .og-tag.ohne { background: transparent; box-shadow: inset 0 0 0 1px var(--og-linie); color: var(--bs-leise); font-weight: 500; }

/* Seitenfeld */
.og-kopf { display: flex; align-items: center; gap: 12px; }
.og-feld { display: flex; flex-direction: column; gap: 4px; }
.og-feld label, .og-gruppe h4 { font: 600 11px var(--marke-schrift); letter-spacing: .04em; text-transform: uppercase; color: var(--bs-leise); margin: 0; }
.og-gruppe h3 { font: 600 15px var(--marke-schrift); margin: 6px 0 0; }
.og-gruppe { display: flex; flex-direction: column; gap: 8px; }
.og-eingabe { width: 100%; box-sizing: border-box; padding: 9px 12px; border: 1px solid var(--bs-linie); border-radius: 10px; background: var(--bs-karte); color: var(--bs-text); font: 400 14px var(--marke-schrift); }
.og-eingabe:focus-visible { outline: 2px solid var(--marke-akzent); outline-offset: 1px; }
.og-themen { display: flex; flex-wrap: wrap; gap: 6px; }
.og-thema { display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px 4px 11px; border-radius: var(--marke-r-pill); background: var(--bs-weich); font-size: 12px; font-weight: 600; }
.og-thema button { border: 0; background: transparent; color: var(--bs-leise); width: 20px; height: 20px; border-radius: 50%; cursor: pointer; font-size: 14px; line-height: 1; }
.og-thema button:hover { background: var(--bs-linie); color: var(--bs-text); }
.og-recht { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px solid var(--bs-linie); font-size: 13px; }
.og-recht > span { display: flex; flex-direction: column; min-width: 0; }
.og-recht small { font-size: 11px; color: var(--bs-leise); }
.og-leise { font-size: 12px; color: var(--bs-leise); margin: 0; line-height: 1.45; }
.og-aktionen { display: flex; gap: 8px; flex-wrap: wrap; }
.og-knopf { border: 0; border-radius: var(--marke-r-pill); padding: 8px 14px; background: var(--bs-dunkel); color: #fff; font: 600 12px var(--marke-schrift); cursor: pointer; }
.og-knopf:hover { opacity: .88; }
.og-knopf.leise { background: var(--bs-weich); color: var(--bs-text); }
.og-knopf.gefahr { background: var(--marke-gefahr); color: #fff; }
.og-knopf:focus-visible { outline: 2px solid var(--marke-akzent); outline-offset: 2px; }
.og-fehler { padding: 24px; color: var(--bs-leise); }
.og-meldung { position: fixed; right: 24px; bottom: 24px; z-index: 50; padding: 10px 16px; border-radius: 12px; background: var(--bs-dunkel); color: #fff; font: 600 13px var(--marke-schrift); box-shadow: 0 8px 24px rgba(0, 0, 0, .25); }
.og-meldung.fehler { background: var(--marke-gefahr); }
.og-meldung[hidden] { display: none; }

@media (max-width: 1100px) { .og { grid-template-columns: minmax(0, 1fr); } .og-panel { position: static; max-height: none; } }
@media (max-width: 720px) {
  .og-baum ul { flex-direction: column; align-items: stretch; padding: 8px 0 0 18px; border-left: 1px solid var(--og-linie); margin-left: 18px; }
  .og-baum ul.og-wurzel { border-left: 0; margin-left: 0; padding-left: 0; }
  .og-baum li { align-items: stretch; padding: 8px 0 0 0; }
  .og-baum li::before, .og-baum li::after, .og-baum ul ul::before { display: none; }
  .og-karte { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .og-karte { transition: none; } .og-karte:hover { transform: none; } }

/* Leitung / Stellvertretung (Ralph, 07.11.2026): kleine Marke am Kürzel-Kreis + Rechtsklick-Menü */
.og-marke { position: absolute; right: -5px; bottom: -4px; min-width: 16px; height: 16px; padding: 0 3px; box-sizing: border-box; border-radius: var(--marke-r-pill); display: inline-flex; align-items: center; justify-content: center;
  font: 700 10px/1 var(--marke-schrift); font-style: normal; background: var(--bs-karte); color: var(--bs-text); box-shadow: 0 0 0 1.5px var(--og-ton, var(--bs-dunkel)); }
.og-marke.s { background: var(--marke-akzent); color: #fff; box-shadow: 0 0 0 1.5px var(--bs-karte); }
.og-marke.l { background: var(--bs-dunkel); color: #fff; box-shadow: 0 0 0 1.5px var(--bs-karte); }
.og-ini.gross .og-marke { right: -4px; bottom: -3px; }
.og-menue { position: fixed; z-index: 60; min-width: 220px; max-width: 280px; padding: 6px; border-radius: var(--marke-r-m, 12px); background: var(--bs-karte); color: var(--bs-text); box-shadow: 0 8px 28px rgba(20, 20, 45, .22), inset 0 0 0 1px var(--bs-linie); font-family: var(--marke-schrift); }
.og-menue-kopf { padding: 6px 10px 4px; font: 600 11px var(--marke-schrift); letter-spacing: .04em; text-transform: uppercase; color: var(--bs-leise); }
.og-menue button { display: block; width: 100%; text-align: left; border: 0; background: transparent; color: inherit; padding: 8px 10px; border-radius: 9px; font: 500 13px var(--marke-schrift); cursor: pointer; }
.og-menue button:hover, .og-menue button:focus-visible { background: var(--bs-weich); outline: none; }
.og-menue button[disabled] { color: var(--bs-leise); cursor: default; background: transparent; }
.og-menue small { display: block; padding: 2px 10px 6px; font-size: 11px; line-height: 1.4; color: var(--bs-leise); }
.og-position { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--bs-weich); font-size: 13px; }
.og-position span { display: flex; flex-direction: column; min-width: 0; }
.og-position small { font-size: 11px; color: var(--bs-leise); }