/* ==========================================================================
   /ai-mitarbeiter/alle: Übersicht aller KI-Mitarbeiter ("km-" = KI-Mitarbeiter)
   --------------------------------------------------------------------------
   Schwesterdatei zu pages/loesungen-neu.css und bewusst auf ihr aufgebaut:
   Hero-Sprungmarken (.ln-jump*), Bausteine (.ln-baustein*), Abteilungs-Köpfe
   (.ln-dept*) und die geteilten Kacheln (.ln-shared*) sind dieselben
   Bauteile, damit Lösungs- und Rollenbereich sich gleich anfühlen. Diese
   Datei ergänzt nur, was der Rollen-Katalog zusätzlich braucht: die
   Stellen-Karte (drei je Reihe statt zwei) und die drei Ton-Familien, die
   loesungen-neu.css nicht kennt (flow, care).

   Beide Seiten-CSS werden in der Route NACH den globalen Stylesheets
   geladen. Responsive-Overrides liegen in assets/responsive.css.
   ========================================================================== */

/* ---------- Ton-Familien, die loesungen-neu.css nicht braucht ----------- */
/* Die Lösungen kennen vier Abteilungen, die Rollen sechs: flow (Logistik)
   und care (Service) kommen hier dazu. Tokens aus dept-tones.css. */

.ln-jump-chip.tone-flow { border-color: var(--dept-flow-tile); }
.ln-jump-chip.tone-flow svg { color: var(--dept-flow-ink); }
.ln-jump-chip.tone-flow:hover { border-color: var(--dept-flow-ink); }
.ln-jump-chip.tone-care { border-color: var(--dept-care-tile); }
.ln-jump-chip.tone-care svg { color: var(--dept-care-ink); }
.ln-jump-chip.tone-care:hover { border-color: var(--dept-care-ink); }

.ln-dept-icon.tone-flow { background: var(--dept-flow-tile); color: var(--dept-flow-ink); }
.ln-dept-icon.tone-care { background: var(--dept-care-tile); color: var(--dept-care-ink); }

.eyebrow.dept-flow { color: var(--dept-flow-ink); }
.eyebrow.dept-care { color: var(--dept-care-ink); }

/* ---------- Bauplan: die Kacheln sind hier Links ---------- */

.km-baustein { text-decoration: none; transition: border-color .16s, box-shadow .16s, transform .16s; }
.km-baustein:hover { transform: translateY(-2px); border-color: var(--primary);
  box-shadow: 0 6px 20px -8px rgba(124, 58, 237, .28); }
.km-baustein .ln-baustein-link { margin-top: auto; }

.km-bauplan-note { display: flex; align-items: flex-start; gap: 10px; margin: 28px auto 0;
  max-width: 72ch; padding: 16px 20px; border-radius: 14px; border: 1px solid var(--border-1);
  background: var(--paper); font-size: 14.5px; line-height: 1.6; color: var(--fg-2); }
.km-bauplan-note svg { flex-shrink: 0; margin-top: 3px; color: var(--primary); }
.km-bauplan-note a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600;
  color: var(--primary); text-decoration: none; white-space: nowrap; }
.km-bauplan-note a:hover { text-decoration: underline; }

/* ---------- Stellen-Karten ---------- */
/* Drei Stellen je Abteilung, deshalb drei Spalten und eine Kachel statt der
   Zeile aus dem Lösungs-Katalog: die Rolle braucht mehr Zeilen (Prozesse,
   Systeme, Übergaben, Lösungen) als eine Lösung. */

.km-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }

.km-card { display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-auto-rows: min-content;
  column-gap: 14px; row-gap: 0; padding: 22px 22px 20px; border-radius: 16px;
  border: 1px solid var(--border-1); background: var(--paper); text-decoration: none;
  transition: border-color .16s, box-shadow .16s, transform .16s; }
.km-card:hover { transform: translateY(-2px);
  box-shadow: var(--shadow-md, 0 6px 20px -8px rgba(17, 8, 34, .18)); }

.km-card-av { grid-column: 1; grid-row: 1 / 3; width: 44px; height: 44px; border-radius: 13px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: var(--primary); }
.km-card-count { grid-column: 2; grid-row: 1; justify-self: start; display: inline-flex;
  align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 10.5px;
  font-weight: 700; letter-spacing: .03em; padding: 3px 8px; border-radius: 100px;
  border: 1px solid var(--border-1); background: var(--page-bg-surface); color: var(--fg-2);
  white-space: nowrap; }
.km-card-count svg { flex-shrink: 0; }
.km-card-name { grid-column: 2; grid-row: 2; font-family: var(--font-serif); font-size: 19px;
  font-weight: 700; line-height: 1.25; letter-spacing: -.015em; color: var(--fg-1);
  margin-top: 6px; }
.km-card-task { grid-column: 1 / -1; font-size: 14.5px; line-height: 1.55; color: var(--fg-2);
  margin-top: 10px; }

.km-card-facts { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 5px;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-1); }
.km-card-fact { display: flex; align-items: flex-start; gap: 8px; min-width: 0;
  font-size: 12.5px; line-height: 1.45; color: var(--fg-2); }
.km-card-fact svg { flex-shrink: 0; margin-top: 3px; color: var(--fg-3); }
.km-card-fact > span { min-width: 0; }

.km-card-go { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 7px;
  margin-top: 16px; font-size: 13.5px; font-weight: 600; color: var(--primary); }
.km-card-go svg { transition: transform .16s; }
.km-card:hover .km-card-go svg { transform: translateX(3px); }

/* Abteilungston: Avatar-Kachel, Rahmen im Hover, Prozess-Zähler. */
.km-card.tone-collab .km-card-av { background: var(--dept-collab-tile); color: var(--dept-collab-ink); }
.km-card.tone-intel .km-card-av { background: var(--dept-intel-tile); color: var(--dept-intel-ink); }
.km-card.tone-automate .km-card-av { background: var(--dept-automate-tile); color: var(--dept-automate-ink); }
.km-card.tone-flow .km-card-av { background: var(--dept-flow-tile); color: var(--dept-flow-ink); }
.km-card.tone-people .km-card-av { background: var(--dept-people-tile); color: var(--dept-people-ink); }
.km-card.tone-care .km-card-av { background: var(--dept-care-tile); color: var(--dept-care-ink); }

.km-card.tone-collab:hover { border-color: var(--dept-collab-ink); }
.km-card.tone-intel:hover { border-color: var(--dept-intel-ink); }
.km-card.tone-automate:hover { border-color: var(--dept-automate-ink); }
.km-card.tone-flow:hover { border-color: var(--dept-flow-ink); }
.km-card.tone-people:hover { border-color: var(--dept-people-ink); }
.km-card.tone-care:hover { border-color: var(--dept-care-ink); }

.km-card.tone-collab .km-card-go { color: var(--dept-collab-ink); }
.km-card.tone-intel .km-card-go { color: var(--dept-intel-ink); }
.km-card.tone-automate .km-card-go { color: var(--dept-automate-ink); }
.km-card.tone-flow .km-card-go { color: var(--dept-flow-ink); }
.km-card.tone-people .km-card-go { color: var(--dept-people-ink); }
.km-card.tone-care .km-card-go { color: var(--dept-care-ink); }

/* Karten-Ton auch auf den Hover-Rahmen der path-cards: tone-care/flow fehlen
   im Export, dept-tones.css liefert die Tokens. */
.path-card.tone-care .path-icon { color: var(--dept-care-ink); }
.path-card.tone-flow .path-icon { color: var(--dept-flow-ink); }

/* ==========================================================================
   Version B des Katalogs: das Raster ("kr-" = KI-Mitarbeiter-Raster)
   --------------------------------------------------------------------------
   Achtzehn Kacheln ohne Abteilungstrennung, Symbol, Name, Aufgabe. Alles
   Weitere (Prozesse, Systeme, Uebergaben, Loesungen) oeffnet als Panel ueber
   der Seite: eine Kachel, die in der Reihe aufgeht, schoebe die anderen
   sechzehn weg.

   Die Abteilung steckt in der Farbe der Symbolkachel, dieselben --dept-*
   Tokens wie in der km-card darueber. Responsive-Overrides in
   assets/responsive.css.
   ========================================================================== */

.kr-head { margin-bottom: 40px; }

/* Die erste Kachel einer Abteilung traegt deren id (Sprungmarken im Hero). */
.kr-kachel[id] { scroll-margin-top: 150px; }

/* Die Spaltenbreite ist vom laengsten Namen her gerechnet, nicht geraten:
   "Einkaufssachbearbeiter:in" misst 217px, eine schmalere Kachel bricht ihn,
   und weil nach einem Doppelpunkt umbrochen werden darf, stuende ":in" allein
   in Zeile zwei. Bei 1440px ergeben sich vier Spalten, alle achtzehn Namen
   einzeilig. */
.kr-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
  gap: 14px; }

.kr-kachel { position: relative; min-width: 0; display: flex; flex-direction: column; align-items: flex-start;
  gap: 0; text-align: left; padding: 18px 16px 16px; border-radius: 15px;
  border: 1px solid var(--border-1); background: var(--paper); cursor: pointer;
  font-family: inherit; transition: border-color .16s, box-shadow .16s, transform .16s; }
.kr-kachel:hover { transform: translateY(-2px);
  box-shadow: var(--shadow-md, 0 6px 20px -8px rgba(17, 8, 34, .18)); }
.kr-kachel:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.kr-kachel-av { width: 38px; height: 38px; border-radius: 12px; display: inline-flex;
  align-items: center; justify-content: center; background: var(--accent); color: var(--primary);
  margin-bottom: 12px; }
.kr-kachel-name { font-family: var(--font-serif); font-size: 16.5px; font-weight: 700;
  line-height: 1.25; letter-spacing: -.015em; color: var(--fg-1); max-width: 100%;
  overflow-wrap: break-word; hyphens: auto; }
.kr-kachel-task { font-size: 13px; line-height: 1.45; color: var(--fg-2); margin-top: 6px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.kr-kachel-mehr { position: absolute; top: 14px; right: 14px; width: 22px; height: 22px;
  border-radius: 8px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--fg-3); background: var(--page-bg-surface); transition: color .16s, background .16s; }
.kr-kachel:hover .kr-kachel-mehr { color: var(--primary); background: var(--accent); }

.kr-kachel.tone-collab .kr-kachel-av { background: var(--dept-collab-tile); color: var(--dept-collab-ink); }
.kr-kachel.tone-intel .kr-kachel-av { background: var(--dept-intel-tile); color: var(--dept-intel-ink); }
.kr-kachel.tone-automate .kr-kachel-av { background: var(--dept-automate-tile); color: var(--dept-automate-ink); }
.kr-kachel.tone-flow .kr-kachel-av { background: var(--dept-flow-tile); color: var(--dept-flow-ink); }
.kr-kachel.tone-people .kr-kachel-av { background: var(--dept-people-tile); color: var(--dept-people-ink); }
.kr-kachel.tone-care .kr-kachel-av { background: var(--dept-care-tile); color: var(--dept-care-ink); }

.kr-kachel.tone-collab:hover, .kr-kachel.tone-collab.is-offen { border-color: var(--dept-collab-ink); }
.kr-kachel.tone-intel:hover, .kr-kachel.tone-intel.is-offen { border-color: var(--dept-intel-ink); }
.kr-kachel.tone-automate:hover, .kr-kachel.tone-automate.is-offen { border-color: var(--dept-automate-ink); }
.kr-kachel.tone-flow:hover, .kr-kachel.tone-flow.is-offen { border-color: var(--dept-flow-ink); }
.kr-kachel.tone-people:hover, .kr-kachel.tone-people.is-offen { border-color: var(--dept-people-ink); }
.kr-kachel.tone-care:hover, .kr-kachel.tone-care.is-offen { border-color: var(--dept-care-ink); }

.kr-fuss { display: flex; align-items: flex-start; gap: 10px; margin: 28px auto 0;
  max-width: 72ch; padding: 14px 18px; border-radius: 14px; border: 1px solid var(--border-1);
  background: var(--paper); font-size: 14px; line-height: 1.6; color: var(--fg-2); }
.kr-fuss svg { flex-shrink: 0; margin-top: 3px; color: var(--primary); }
.kr-fuss a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600;
  color: var(--primary); text-decoration: none; white-space: nowrap; }
.kr-fuss a:hover { text-decoration: underline; }

/* ---------- Das Panel ueber der Seite ---------- */
/* Haengt an document.body (Portal), weil scroll-reveal.js auf jeder Sektion
   will-change: transform setzt: darin klebt position: fixed an der Sektion
   statt am Viewport. Dieselbe Falle wie beim Auswahl-Sheet. */

.kr-lay { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center;
  justify-content: center; padding: 32px 20px;
  background: rgba(17, 8, 34, .46); backdrop-filter: blur(3px);
  animation: kr-ein .16s ease-out; }

.kr-panel { position: relative; width: 100%; max-width: 640px; max-height: calc(100vh - 64px);
  display: flex; flex-direction: column; border-radius: 20px; border: 1px solid var(--border-1);
  background: var(--paper); box-shadow: 0 28px 70px -24px rgba(17, 8, 34, .5);
  animation: kr-auf .18s cubic-bezier(.2, .7, .3, 1); }
.kr-panel:focus { outline: none; }

@keyframes kr-ein { from { opacity: 0; } }
@keyframes kr-auf { from { opacity: 0; transform: scale(.965) translateY(8px); } }
@media (prefers-reduced-motion: reduce) {
  .kr-lay, .kr-panel { animation: none; }
  .kr-kachel:hover { transform: none; }
}

.kr-panel-zu { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px;
  border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-1); background: var(--page-bg-surface); color: var(--fg-2);
  cursor: pointer; transition: color .16s, border-color .16s; }
.kr-panel-zu:hover { color: var(--fg-1); border-color: var(--fg-3); }

.kr-panel-kopf { display: flex; gap: 16px; padding: 26px 26px 20px; }
.kr-panel-av { flex-shrink: 0; width: 50px; height: 50px; border-radius: 15px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: var(--primary); }
.kr-panel-kopf-text { min-width: 0; padding-right: 34px; }
.kr-panel-dept { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px;
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-2); }
.kr-panel-name { font-family: var(--font-serif); font-size: 24px; font-weight: 700;
  line-height: 1.2; letter-spacing: -.02em; color: var(--fg-1); margin-top: 5px; }
.kr-panel-task { font-size: 14.5px; line-height: 1.55; color: var(--fg-2); margin-top: 7px; }

.kr-panel.tone-collab .kr-panel-av { background: var(--dept-collab-tile); color: var(--dept-collab-ink); }
.kr-panel.tone-intel .kr-panel-av { background: var(--dept-intel-tile); color: var(--dept-intel-ink); }
.kr-panel.tone-automate .kr-panel-av { background: var(--dept-automate-tile); color: var(--dept-automate-ink); }
.kr-panel.tone-flow .kr-panel-av { background: var(--dept-flow-tile); color: var(--dept-flow-ink); }
.kr-panel.tone-people .kr-panel-av { background: var(--dept-people-tile); color: var(--dept-people-ink); }
.kr-panel.tone-care .kr-panel-av { background: var(--dept-care-tile); color: var(--dept-care-ink); }

.kr-panel.tone-collab .kr-panel-dept { color: var(--dept-collab-ink); }
.kr-panel.tone-intel .kr-panel-dept { color: var(--dept-intel-ink); }
.kr-panel.tone-automate .kr-panel-dept { color: var(--dept-automate-ink); }
.kr-panel.tone-flow .kr-panel-dept { color: var(--dept-flow-ink); }
.kr-panel.tone-people .kr-panel-dept { color: var(--dept-people-ink); }
.kr-panel.tone-care .kr-panel-dept { color: var(--dept-care-ink); }

.kr-panel-body { overflow-y: auto; padding: 0 26px 4px; display: flex; flex-direction: column;
  gap: 18px; border-top: 1px solid var(--border-1); padding-top: 20px; }
.kr-block-lbl { display: flex; align-items: center; gap: 7px; font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--fg-2); margin-bottom: 9px; }
.kr-block-lbl svg { color: var(--fg-3); }
.kr-block-text { font-size: 14px; line-height: 1.55; color: var(--fg-2); }

.kr-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.kr-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px;
  border-radius: 100px; border: 1px solid var(--border-1); background: var(--page-bg-surface);
  font-size: 12.5px; font-weight: 600; line-height: 1.3; color: var(--fg-1); }
.kr-chip.is-still { font-family: var(--font-mono); font-weight: 500; font-size: 11.5px;
  color: var(--fg-2); }
.kr-chip.is-link { color: var(--primary); border-color: var(--accent); background: var(--accent);
  text-decoration: none; transition: border-color .16s; }
.kr-chip.is-link:hover { border-color: var(--primary); }

.kr-panel-fuss { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 18px 26px 22px; margin-top: 16px; border-top: 1px solid var(--border-1); }
.kr-panel-cta { flex-shrink: 0; }
.kr-panel-nav { display: flex; align-items: center; gap: 6px; }
.kr-panel-nav button { width: 32px; height: 32px; border-radius: 10px; display: inline-flex;
  align-items: center; justify-content: center; border: 1px solid var(--border-1);
  background: var(--paper); color: var(--fg-2); cursor: pointer;
  transition: color .16s, border-color .16s; }
.kr-panel-nav button:hover { color: var(--fg-1); border-color: var(--fg-3); }
.kr-panel-nav button:first-child svg { transform: rotate(180deg); }
.kr-panel-zaehler { font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-2);
  min-width: 46px; text-align: center; }