/* ==========================================================================
   Abteilungs-Farbsystem (Ergänzung 2026-08)
   --------------------------------------------------------------------------
   Zwei Probleme des Exports, die hier zusammen gelöst werden.

   1. Zu wenige Töne. Der Export kannte drei Familien, collab, intel,
      automate. Die Navigation zeigt aber vier Lösungs-Abteilungen und sechs
      KI-Mitarbeiter-Abteilungen, also liefen Töne doppelt: „Personal &
      Service" trug denselben Ton wie Einkauf und mischte in seinen vier
      Links zwei Farben, „Logistik" wiederholte Einkauf, „Service"
      wiederholte Vertrieb. Farbe war kein Hinweis mehr, sondern Rauschen.
      Ergänzt werden deshalb: flow (Logistik), people (Personal / die
      Sammelspalte „Personal & Service"), care (Service).

   2. Zwei verschiedene Bedeutungen derselben Klasse. `--state-collab` ist
      global Violett, im Mega-Menü wird `tone-collab` aber auf Grün
      überschrieben, dieselbe Klasse hieß in der Nav Einkauf und auf einer
      Seite irgendwas anderes. Die `--dept-*`-Tokens unten sind die eine
      verbindliche Abteilungsfarbe; Nav und Seiten ziehen beide daraus.
      Die alten `--state-*`-Tokens bleiben unberührt, damit der Rest des
      Exports unverändert weiterläuft.

   Regel: Eine Abteilung = eine Farbe, site-weit. Innerhalb einer
   Abteilungsspalte tragen alle Links den Ton der Spalte.

   Verlinkt im Root-Layout nach den Export-Stylesheets. site.css, nav2.css
   und loesungen*.css bleiben 1:1 aus dem Export.
   ========================================================================== */

:root {
  /* Einkauf, grün */
  --dept-collab-ink: hsl(152 68% 26%);
  --dept-collab-tile: hsl(150 62% 91%);
  --dept-collab-on-dark: hsl(150 55% 62%);
  /* Finanzen, violett */
  --dept-intel-ink: #6D28D9;
  --dept-intel-tile: hsl(262 78% 93%);
  --dept-intel-on-dark: hsl(262 85% 76%);
  /* Vertrieb, blau */
  --dept-automate-ink: hsl(221 83% 42%);
  --dept-automate-tile: hsl(220 85% 93%);
  --dept-automate-on-dark: hsl(220 90% 74%);
  /* Logistik, cyan */
  --dept-flow-ink: hsl(193 82% 28%);
  --dept-flow-tile: hsl(190 74% 91%);
  --dept-flow-on-dark: hsl(191 85% 62%);
  /* Personal (und „Personal & Service" in den Lösungen), amber */
  --dept-people-ink: hsl(28 86% 33%);
  --dept-people-tile: hsl(44 93% 88%);
  --dept-people-on-dark: hsl(38 94% 62%);
  /* Service, rosé */
  --dept-care-ink: hsl(336 74% 38%);
  --dept-care-tile: hsl(342 87% 94%);
  --dept-care-on-dark: hsl(340 90% 70%);
}

/* --- Spaltentitel im Mega-Menü ----------------------------------------- */
/* Über dem Hero (dunkler Grund) belegte der Export dieselben Spalten anders
   als im hellen Zustand: Einkauf war oben violett und unten grün, Finanzen
   oben pink und unten violett. Beide Zustände ziehen jetzt aus denselben
   --dept-*-Tokens. `.nav` davor, damit die Regel gegen die !important-Regeln
   in nav2.css gewinnt (nav2.css wird zur Laufzeit nachgeladen). */
.nav .mega .mega-col-title.dept-collab { color: var(--dept-collab-on-dark) !important; }
.nav .mega .mega-col-title.dept-intel { color: var(--dept-intel-on-dark) !important; }
.nav .mega .mega-col-title.dept-automate { color: var(--dept-automate-on-dark) !important; }
.nav .mega .mega-col-title.dept-flow { color: var(--dept-flow-on-dark) !important; }
.nav .mega .mega-col-title.dept-people { color: var(--dept-people-on-dark) !important; }
.nav .mega .mega-col-title.dept-care { color: var(--dept-care-on-dark) !important; }

.nav:not(.over-hero) .mega .mega-col-title.dept-collab { color: var(--dept-collab-ink) !important; }
.nav:not(.over-hero) .mega .mega-col-title.dept-intel { color: var(--dept-intel-ink) !important; }
.nav:not(.over-hero) .mega .mega-col-title.dept-automate { color: var(--dept-automate-ink) !important; }
.nav:not(.over-hero) .mega .mega-col-title.dept-flow { color: var(--dept-flow-ink) !important; }
.nav:not(.over-hero) .mega .mega-col-title.dept-people { color: var(--dept-people-ink) !important; }
.nav:not(.over-hero) .mega .mega-col-title.dept-care { color: var(--dept-care-ink) !important; }

/* --- Mega-Links: Icon-Kachel ------------------------------------------- */
/* Die Kachel bringt ihren eigenen hellen Grund mit und funktioniert damit
   in beiden Nav-Zuständen, dasselbe Muster wie tone-collab im Export. */
.mega-link.tone-flow .ml-icon { background: var(--dept-flow-tile); color: var(--dept-flow-ink); }
.mega-link.tone-people .ml-icon { background: var(--dept-people-tile); color: var(--dept-people-ink); }
.mega-link.tone-care .ml-icon { background: var(--dept-care-tile); color: var(--dept-care-ink); }

/* nav2.css setzt im hellen Zustand `.nav:not(.over-hero) .mega-link .ml-icon`
   auf Violett, das ist spezifischer als die Ton-Regeln oben und würde die
   neuen Familien überschreiben. Deshalb hier auf derselben Stufe wiederholen. */
.nav:not(.over-hero) .mega-link.tone-flow .ml-icon { background: var(--dept-flow-tile); color: var(--dept-flow-ink); }
.nav:not(.over-hero) .mega-link.tone-people .ml-icon { background: var(--dept-people-tile); color: var(--dept-people-ink); }
.nav:not(.over-hero) .mega-link.tone-care .ml-icon { background: var(--dept-care-tile); color: var(--dept-care-ink); }

/* --- KI-Mitarbeiter: Abteilungs-Schiene -------------------------------- */
/* nav2.css zieht im hellen Zustand alle drei alten Ton-Klassen der Schiene
   auf ein einheitliches Violett (Sättigungs-Fix v2.1, Zeilen 678–681), die
   sechs Abteilungen waren dort also farblich gar nicht unterscheidbar.
   Hier bekommen alle sechs ihre Abteilungsfarbe, in beiden Nav-Zuständen.
   nav2.css wird von nav2.js zur Laufzeit nachgeladen und steht damit im
   Dokument NACH dieser Datei: die Regeln unten brauchen deshalb eine Stufe
   mehr Spezifität (`.mega` davor), um bei Gleichstand nicht zu verlieren.

   Die Rollen-Kacheln (.et-av) bleiben absichtlich unangetastet, ihr
   Avatar ist im Export bewusst der Brand-Gradient, unabhängig vom Ton. */

.mega .empb-item.t-collab .empb-ic { color: var(--dept-collab-on-dark); }
.mega .empb-item.t-intel .empb-ic { color: var(--dept-intel-on-dark); }
.mega .empb-item.t-automate .empb-ic { color: var(--dept-automate-on-dark); }
.mega .empb-item.t-flow .empb-ic { color: var(--dept-flow-on-dark); }
.mega .empb-item.t-people .empb-ic { color: var(--dept-people-on-dark); }
.mega .empb-item.t-care .empb-ic { color: var(--dept-care-on-dark); }

.nav:not(.over-hero) .mega .empb-item.t-collab .empb-ic { background: var(--dept-collab-tile); color: var(--dept-collab-ink); }
.nav:not(.over-hero) .mega .empb-item.t-intel .empb-ic { background: var(--dept-intel-tile); color: var(--dept-intel-ink); }
.nav:not(.over-hero) .mega .empb-item.t-automate .empb-ic { background: var(--dept-automate-tile); color: var(--dept-automate-ink); }
.nav:not(.over-hero) .mega .empb-item.t-flow .empb-ic { background: var(--dept-flow-tile); color: var(--dept-flow-ink); }
.nav:not(.over-hero) .mega .empb-item.t-people .empb-ic { background: var(--dept-people-tile); color: var(--dept-people-ink); }
.nav:not(.over-hero) .mega .empb-item.t-care .empb-ic { background: var(--dept-care-tile); color: var(--dept-care-ink); }

/* Aktive Abteilung bleibt der violette Voll-Chip aus dem Export. */
.nav:not(.over-hero) .mega .empb-item.is-on .empb-ic { background: var(--primary); color: #fff; }

/* --- Lösungs-Detailseiten ---------------------------------------------- */
/* Breadcrumb und Eyebrows der Detailseiten folgen jetzt der Abteilungsfarbe
   des Mega-Menüs statt den global anders belegten --state-*-Tokens. Sonst
   heißt Grün in der Navigation „Einkauf" und auf der Seite dahinter nichts. */
.det-breadcrumb.tone-collab { color: var(--dept-collab-ink); }
.det-breadcrumb.tone-intel { color: var(--dept-intel-ink); }
.det-breadcrumb.tone-automate { color: var(--dept-automate-ink); }
.det-breadcrumb.tone-flow { color: var(--dept-flow-ink); }
.det-breadcrumb.tone-people { color: var(--dept-people-ink); }
.det-breadcrumb.tone-care { color: var(--dept-care-ink); }

.det-hero-pill.tone-collab svg { color: var(--dept-collab-ink); }
.det-hero-pill.tone-intel svg { color: var(--dept-intel-ink); }
.det-hero-pill.tone-automate svg { color: var(--dept-automate-ink); }
.det-hero-pill.tone-flow svg { color: var(--dept-flow-ink); }
.det-hero-pill.tone-people svg { color: var(--dept-people-ink); }
.det-hero-pill.tone-care svg { color: var(--dept-care-ink); }

.det-sec-eyebrow.tone-flow { color: var(--dept-flow-ink); }
.det-sec-eyebrow.tone-people { color: var(--dept-people-ink); }
.det-sec-eyebrow.tone-care { color: var(--dept-care-ink); }

/* --- Karten und Chips auf Übersichtsseiten ----------------------------- */
.path-card.tone-flow { --path-color: var(--dept-flow-ink); --path-bg: var(--dept-flow-tile); --path-border: var(--dept-flow-tile); }
.path-card.tone-people { --path-color: var(--dept-people-ink); --path-bg: var(--dept-people-tile); --path-border: var(--dept-people-tile); }
.path-card.tone-care { --path-color: var(--dept-care-ink); --path-bg: var(--dept-care-tile); --path-border: var(--dept-care-tile); }