/* Organigramm als Bereichs-Chart – Form wie „Organigramm Stand 07.2026.png".
   Gemeinsam genutzt von der Startseite und dem Betriebshandbuch, damit es das
   Chart nur EINMAL im Code gibt.

   Warum Bereichsspalten und kein klassischer Baum: 21 Personen nebeneinander
   sind breiter als jeder Monitor. Nach Bereichen gruppiert stapeln sie sich in
   sechs schmalen Spalten und passen auf einen Bildschirm. */

/* Bereichsfarben wie im PNG. --bf färbt Rahmen und Kopf einer Spalte. */
.org-chart { --bf: var(--akzent); }
.org-bereich[data-i="0"] { --bf: #0d5c33; }  /* Marketing */
.org-bereich[data-i="1"] { --bf: #12727f; }  /* Engineering */
.org-bereich[data-i="2"] { --bf: #e2541f; }  /* Sales */
.org-bereich[data-i="3"] { --bf: #1e3080; }  /* Finanzen & HR */
.org-bereich[data-i="4"] { --bf: #1a7a34; }  /* Produktion */
.org-bereich[data-i="5"] { --bf: var(--muted); }  /* Fuhrpark – kein PNG-Bereich */
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) .org-bereich[data-i="0"] { --bf: #2f9c62; }
  :root:where(:not([data-theme="light"])) .org-bereich[data-i="1"] { --bf: #34a3b2; }
  :root:where(:not([data-theme="light"])) .org-bereich[data-i="2"] { --bf: #f4763f; }
  :root:where(:not([data-theme="light"])) .org-bereich[data-i="3"] { --bf: #5470d8; }
  :root:where(:not([data-theme="light"])) .org-bereich[data-i="4"] { --bf: #3aa055; }
}
:root[data-theme="dark"] .org-bereich[data-i="0"] { --bf: #2f9c62; }
:root[data-theme="dark"] .org-bereich[data-i="1"] { --bf: #34a3b2; }
:root[data-theme="dark"] .org-bereich[data-i="2"] { --bf: #f4763f; }
:root[data-theme="dark"] .org-bereich[data-i="3"] { --bf: #5470d8; }
:root[data-theme="dark"] .org-bereich[data-i="4"] { --bf: #3aa055; }

/* Breite Inhalte scrollen in ihrem eigenen Kasten – die Seite selbst darf
   nicht waagerecht scrollen. */
.org-scroll { overflow-x: auto; padding-bottom: 6px; }

.org-chart { min-width: 780px; }

/* --- Spitze: Geschäftsführung --------------------------------------------- */
.org-spitze { display: flex; justify-content: center; }
.org-spitze .org-person { min-width: 230px; border-color: var(--bf); border-width: 2px; }

/* Senkrechte von der Spitze zur waagerechten Sammelschiene */
.org-stiel { height: 18px; width: 1px; background: var(--grid); margin: 0 auto; }

/* --- Bereichsspalten ------------------------------------------------------ */
.org-bereiche { display: flex; gap: 14px; align-items: flex-start;
                border-top: 1px solid var(--grid); padding-top: 0; }
.org-bereich { flex: 1 1 0; min-width: 150px; }
/* Kurze Senkrechte von der Sammelschiene in jeden Bereichskopf */
.org-bereich::before { content: ""; display: block; height: 16px; width: 1px;
                       background: var(--grid); margin: 0 auto; }

/* Der Spaltenkopf hat KEINEN eigenen Rahmen mehr. Vorher lag ein Kasten um die
   Kachel der Leitung – zwei Rahmen ineinander, und weil der äußere mitwuchs,
   war jede Spalte anders hoch. Jetzt trägt allein die Kachel den Rahmen, und
   der Bereichsname steht als Beschriftung darüber. */
.org-kopf { margin-bottom: 8px; }
.org-kopf .org-bereich-name {
  display: flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 700; color: var(--bf);
  text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: 5px; min-height: 26px;
}
/* Kurzer Farbbalken statt des früheren 4px-Rahmens links am Kasten. */
.org-kopf .org-bereich-name::before {
  content: ""; flex: none; width: 3px; height: 13px; border-radius: 2px;
  background: var(--bf);
}
.org-kopf .org-leitung { font-size: 13px; margin-top: 2px; padding: 9px 11px;
                         border: 1px dashed var(--ring); border-radius: 10px; }

/* Die Kachel der Leitung: gleiche Bauart wie jede andere, nur kräftigerer
   Rahmen und eine feste Mindesthöhe – damit stehen alle sechs Spaltenköpfe
   auf einer Linie, egal wie lang Name und Funktion sind. */
.org-person.org-ist-leitung {
  border-width: 2px; border-radius: 10px; padding: 9px 11px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.org-person.org-ist-leitung .org-avatar { width: 34px; height: 34px; }
.org-person.org-ist-leitung .org-nm { font-size: 13.5px; }
/* Die Funktion wird auf zwei Zeilen gekappt. Ohne diese Grenze wachsen die
   Kacheln unterschiedlich hoch – „Leitung Engineering & Produktmanagement" ist
   dreimal so lang wie „Fuhrparkmanager". Die vollständige Funktion steht beim
   Klick in der Detailtafel, hier zählt die gemeinsame Linie. */
.org-person.org-ist-leitung .org-rl {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  /* Zwei Zeilen werden immer reserviert, auch bei kurzer Funktion. Damit sind
     alle sechs Kacheln gleich hoch, ohne eine Pixelhöhe festzunageln – die
     würde bei anderer Schriftgröße wieder auseinanderlaufen. */
  /* line-height ausdrücklich setzen und die Mindesthöhe genau darauf rechnen:
     2 x 1.35 = 2.7em. Ohne festes line-height passt die reservierte Höhe nicht
     exakt zu zwei echten Zeilen, und es bleiben ein paar Pixel Unterschied. */
  line-height: 1.35;
  min-height: 2.7em;
}

.org-liste { display: flex; flex-direction: column; gap: 6px; margin-top: 8px;
             padding-left: 12px; border-left: 1px solid var(--grid); }

/* --- Gebietsgruppen (nur Sales) ------------------------------------------ */
.org-gruppe { border: 1px solid var(--ring); border-radius: 9px; padding: 7px 8px;
              background: var(--plane); }
.org-gruppe > .org-gruppe-name { font-size: 10.5px; font-weight: 700; color: var(--ink-2);
                                 text-transform: uppercase; letter-spacing: .05em;
                                 margin-bottom: 5px; }
.org-gruppe .org-person { margin-bottom: 4px; }
.org-gruppe .org-person:last-child { margin-bottom: 0; }

/* --- Personenkarte ------------------------------------------------------- */
/* Hintergrund nach Art: intern grün, KI orange, extern weiß. Die Farbe ist
   nicht die einzige Unterscheidung – extern bleibt zusätzlich gestrichelt und
   trägt die Beschriftung „extern", KI die Beschriftung „KI". Wer Farben
   schlecht unterscheidet, erkennt es weiterhin. */
:root {
  --p-intern: #e4f3e9; --p-intern-rand: #7cc294;
  --p-ki: #fdf3cf; --p-ki-rand: #d6ad35;
  --p-extern: #ffffff; --p-extern-rand: #b9b7ae;
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    /* Gedeckte Varianten – die hellen Töne würden im Dunkelmodus blenden und
       den Text unter den Kontrastwert drücken. */
    --p-intern: #17301f; --p-intern-rand: #2f7a4b;
    --p-ki: #322b16; --p-ki-rand: #93791f;
    --p-extern: #232322; --p-extern-rand: #55534d;
  }
}
:root[data-theme="dark"] {
  --p-intern: #17301f; --p-intern-rand: #2f7a4b;
  --p-ki: #322b16; --p-ki-rand: #93791f;
  --p-extern: #232322; --p-extern-rand: #55534d;
}

.org-person { border: 1px solid var(--ring); border-radius: 8px; padding: 7px 9px;
              background: var(--surface-1); cursor: pointer; text-align: left; }
.org-person.intern { background: var(--p-intern); border-color: var(--p-intern-rand); }
.org-person.ki     { background: var(--p-ki);     border-color: var(--p-ki-rand); }
.org-person.extern { background: var(--p-extern); border-color: var(--p-extern-rand);
                     border-style: dashed; }
.org-person:hover { border-color: var(--bf); }
.org-person.aktiv { border-color: var(--bf); box-shadow: 0 0 0 2px color-mix(in srgb, var(--bf) 25%, transparent); }
.org-person .org-tag-ki { font-size: 10.5px; font-weight: 700; color: var(--p-ki-rand); }

.org-punkt { width: 10px; height: 10px; border-radius: 3px; display: inline-block;
             border: 1px solid var(--ring); }
.org-punkt.intern { background: var(--p-intern); border-color: var(--p-intern-rand); }
.org-punkt.ki     { background: var(--p-ki);     border-color: var(--p-ki-rand); }
.org-punkt.extern { background: var(--p-extern); border-color: var(--p-extern-rand);
                    border-style: dashed; }
.org-person .org-nm { font-size: 13px; font-weight: 600; display: block; }
.org-person .org-rl { font-size: 11.5px; color: var(--ink-2); display: block; }
.org-person .org-tag { font-size: 10.5px; color: var(--extern); }
.org-person .org-frage { font-size: 10.5px; color: var(--warn); }

/* Legende steht ÜBER dem Chart – man braucht sie zum Lesen, nicht danach. */
.org-legende { display: flex; gap: 8px 18px; flex-wrap: wrap; align-items: center;
               font-size: 12px; color: var(--ink-2); margin: 0 0 14px;
               padding: 9px 12px; background: var(--plane);
               border: 1px solid var(--ring); border-radius: 9px; }
.org-legende span { display: inline-flex; align-items: center; gap: 7px; }
.org-legende .farbe { font-weight: 600; }

/* --- Detailtafel --------------------------------------------------------- */
.org-details { margin-top: 14px; border: 1px solid var(--ring); border-radius: 10px;
               padding: 14px; background: var(--plane); }
/* Den Abstand nach oben beim Sprung auf die Tafel rechnet organigramm.js selbst
   (orgRolleZu) – hier steht dazu bewusst nichts, sonst gälten zwei Werte. */
.org-details .badge { display: inline-block; font-size: 11px; padding: 2px 8px;
                      border-radius: 999px; border: 1px solid var(--ring);
                      color: var(--ink-2); margin-left: 6px; }
.org-bereich-knopf { margin-top: 14px; padding-top: 12px;
                     border-top: 1px solid var(--ring); }
.org-bereich-knopf a { text-decoration: none; }

/* --- Porträts von unitechnics.com --------------------------------------- */
/* Verlinkt, nicht kopiert: die Website ist die pflegende Stelle. Ein neues
   Foto dort wirkt sofort auch hier. Fällt die Website aus, greift das
   onerror in organigramm.js und es erscheinen die Initialen. */
.org-avatar {
  display: block; width: 30px; height: 30px; border-radius: 50%;
  object-fit: cover; object-position: center top;
  margin-bottom: 5px; background: var(--surface-1);
  border: 1px solid var(--ring);
}
.org-initialen {
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  color: var(--ink-2);
  position: relative; overflow: hidden;
}
/* Das Foto liegt über den Initialen und deckt sie zu, sobald es geladen ist. */
.org-initialen > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
}
.org-portrait-link { float: right; margin: 0 0 8px 12px; text-decoration: none; }
.org-portrait {
  display: block; width: 92px; height: 92px; border-radius: 10px;
  object-fit: cover; object-position: center top;
  border: 1px solid var(--ring);
}
.org-portrait-link:hover .org-portrait { border-color: var(--bf); }

/* Die Leitung trägt dieselbe Kachel wie alle anderen. Nur ein kräftigerer
   Rahmen zeigt, dass sie den Bereich führt – Größe, Farbe und Aufbau bleiben
   gleich, damit man Führungskräfte und Mitarbeitende direkt vergleichen kann. */
.org-person.org-ist-leitung { border-width: 2px; }