/**
 * Intranet Shell - Trialog Intranet Design
 * Ported from the approved intranet.html design prototype (repo root).
 * All classes and custom properties carry the `in-` prefix so the shell can
 * coexist with the legacy screen stylesheets (.sidebar, .nav-item, .card and
 * friends are already taken by layout.css / components.css).
 * The shell is mounted once by src/main.js; screens render into .in-page.
 */

:root {
  --in-navy-900: #0d1a38;
  --in-navy-800: #132548;
  --in-navy-700: #1b3160;
  --in-navy-600: #26417d;
  --in-navy-500: #33559b;
  --in-blue-500: #3b6fd4;
  /* Dasselbe Blau, zwei Punkte dunkler - ausschliesslich fuer SCHRIFT auf
     hellem Grund. #3b6fd4 erreicht dort 4,40:1 und verfehlt die geforderten
     4,5:1 (WCAG AA, siehe CLAUDE.md) um Haaresbreite; als Flaechenfarbe ist
     es unveraendert richtig. Der Unterschied ist mit blossem Auge nicht zu
     sehen, in der Messung aber der zwischen bestanden und nicht bestanden. */
  --in-blue-text: #396cce;
  --in-blue-400: #5b8ae6;
  --in-blue-100: #e7effb;
  --in-blue-50: #f2f7fd;
  --in-gold: #c9a24b;
  --in-gold-soft: #f3ead4;
  --in-green: #2f9e6b;
  /* Signalfarben fuer SCHRIFT auf hellem Grund. Die Originaltoene daneben
     sind fuer Flaechen, Ampeln und Symbole richtig (dort genuegen 3:1), als
     Fliesstext verfehlen sie die geforderten 4,5:1 deutlich - Gruen kam auf
     2,98:1. Deshalb zwei Toene statt einem, nicht ein dunklerer fuer alles:
     Ein abgedunkeltes Gruen an der Status-Ampel des Organigramms waere ein
     anderes Signal. */
  --in-green-text: #237750;
  --in-green-soft: #e4f5ec;
  --in-red: #d1495b;
  --in-red-text: #b6404f;
  --in-amber: #e0a43b;
  --in-amber-soft: #fcf1dc;
  --in-purple: #7a5cc9;
  --in-purple-soft: #efeafb;
  --in-teal: #0e9488;
  --in-teal-soft: #dcf3f0;
  --in-ink-900: #141b2b;
  --in-ink-700: #3a4459;
  /* 4,63:1 auf allen hellen Flaechen des Hauses. Der Vorgaenger #697389
     lag bei 4,40:1 und blieb damit unter der Anforderung fuer Fliesstext. */
  --in-ink-500: #667085;
  --in-ink-400: #8b93a5;
  --in-line: #e5e9f0;
  --in-line-soft: #eef1f6;
  --in-bg: #f4f6fb;
  --in-card: #ffffff;
  --in-radius: 16px;
  --in-radius-sm: 11px;
  --in-shadow-sm: 0 1px 2px rgba(19, 37, 72, 0.06), 0 1px 3px rgba(19, 37, 72, 0.05);
  --in-shadow-md: 0 6px 20px rgba(19, 37, 72, 0.09);
  --in-shadow-lg: 0 18px 46px rgba(19, 37, 72, 0.16);
  --in-sidebar-w: 264px;
  --in-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif;
  --in-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia,
    "Times New Roman", serif;
}

/* ========================================
   APP FRAME
   ======================================== */

.in-app {
  display: flex;
  height: 100vh;
  background: var(--in-bg);
  font-family: var(--in-font);
  font-size: 15px;
  line-height: 1.5;
  color: var(--in-ink-900);
  -webkit-font-smoothing: antialiased;
}

/* Element resets stay scoped to the shell's own components - a bare
   `.in-app button` would outrank the legacy screens' .btn classes. */
.in-nav-item,
.in-qa,
.in-side-user {
  color: inherit;
  text-decoration: none;
}

.in-hamburger,
.in-side-user {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
  padding: 0;
}

.in-nav-item:focus-visible,
.in-qa:focus-visible,
.in-hamburger:focus-visible {
  outline: 2.5px solid var(--in-blue-500);
  outline-offset: 2px;
  border-radius: 9px;
}

.in-nav-item:focus-visible,
.in-side-user:focus-visible {
  outline-color: #9fc0ff;
  outline-offset: -2px;
}

.in-scroll::-webkit-scrollbar,
.in-search-panel::-webkit-scrollbar,
.in-invite-dialog--wide::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

.in-scroll::-webkit-scrollbar-thumb,
.in-search-panel::-webkit-scrollbar-thumb,
.in-invite-dialog--wide::-webkit-scrollbar-thumb {
  background: #cdd5e2;
  border-radius: 20px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.in-scroll::-webkit-scrollbar-thumb:hover,
.in-search-panel::-webkit-scrollbar-thumb:hover,
.in-invite-dialog--wide::-webkit-scrollbar-thumb:hover {
  background: #b6c0d2;
  background-clip: padding-box;
}

.in-scroll,
.in-search-panel,
.in-invite-dialog--wide {
  scrollbar-width: thin;
  scrollbar-color: #cdd5e2 transparent;
}

/* The dark sidebar needs a matching dark thumb. */
.in-sidebar.in-scroll::-webkit-scrollbar-thumb,
.in-nav.in-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  background-clip: padding-box;
}

.in-sidebar.in-scroll::-webkit-scrollbar-thumb:hover,
.in-nav.in-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
  background-clip: padding-box;
}

.in-sidebar.in-scroll,
.in-nav.in-scroll {
  scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}

@media (prefers-reduced-motion: reduce) {
  .in-app *,
  .in-sidebar,
  .in-overlay,
  .in-toast,
  .in-toast-ic,
  .in-offline-banner,
  .in-invite-overlay,
  .in-invite-dialog,
  .in-search-panel {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  /* Der Universalselektor oben erfasst KEINE Pseudo-Elemente - der Lichtpuls
     unter der Wortmarke liefe sonst weiter. Er wird hier ganz angehalten und
     auf den ruhenden Goldstrich zurueckgesetzt; der Schein entfaellt. */
  .in-brand::after {
    animation: none !important;
    background-position: 200% 0, 0 0;
    box-shadow: none;
    opacity: 0.85;
    transform: translateX(-50%);
  }

  .in-brand::before {
    animation: none !important;
    opacity: 0;
  }
}

/* ========================================
   SIDEBAR
   ======================================== */

.in-sidebar {
  width: var(--in-sidebar-w);
  background: linear-gradient(180deg, var(--in-navy-800), var(--in-navy-900));
  color: #dfe6f2;
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: 0 auto 0 0;
  height: 100vh;
  z-index: 60;
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.in-brand {
  padding: 26px 24px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
  position: relative;
}

/* ----------------------------------------------------------------------
   GOLDENER LICHTPULS unter der Wortmarke - die Signatur des Hauses.
   ----------------------------------------------------------------------
   Ein Zyklus, kein Blinken: Der Strich laedt sich auf, ein helles Licht
   wandert einmal hindurch, dann klingt er ab und RUHT mehrere Sekunden.
   Die Pause ist der eigentliche Grund, warum das hochwertig wirkt - ein
   Element, das ununterbrochen pulsiert, liest sich als Warnung.

   Aufgeteilt auf zwei Ebenen, damit echtes Licht entsteht und nicht nur ein
   heller Balken:
     ::before  weicher Schein, der in die Flaeche ausstrahlt
     ::after   der Strich selbst, durch den das Licht laeuft

   Beide teilen dieselbe Dauer und denselben Versatz, damit Schein und
   Lichtwanderung als EIN Vorgang gelesen werden.

   Der Lauf entsteht ueber background-position auf einer zweiten
   Farbebene - kein wanderndes Kindelement, das man erst wieder
   zurechtschneiden muesste, und die Ebene laesst sich weich auslaufen. */

.in-brand::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: 54px;
  height: 2px;
  border-radius: 2px;
  /* Obere Ebene: der wandernde Lichtkern. Untere: der ruhende Goldverlauf.
     Der Kern hat VIELE Stuetzstellen statt der ueblichen drei - ein
     dreistufiger Verlauf faellt linear ab und bekommt dadurch sichtbare
     Kanten. Die Abstufung hier ahmt einen weichen Lichtabfall nach, sodass
     nirgends eine Grenze zu erkennen ist. */
  background-image:
    linear-gradient(
      90deg,
      rgba(255, 250, 238, 0) 26%,
      rgba(255, 250, 238, 0.06) 33%,
      rgba(255, 250, 238, 0.22) 39%,
      rgba(255, 250, 238, 0.55) 45%,
      rgba(255, 252, 244, 0.92) 50%,
      rgba(255, 250, 238, 0.55) 55%,
      rgba(255, 250, 238, 0.22) 61%,
      rgba(255, 250, 238, 0.06) 67%,
      rgba(255, 250, 238, 0) 74%
    ),
    linear-gradient(90deg, transparent, var(--in-gold), transparent);
  background-size: 220% 100%, 100% 100%;
  background-position: -130% 0, 0 0;
  background-repeat: no-repeat;
  /* ENTSCHEIDEND fuer den weichen Ein- und Auslauf: Ohne Maske trifft der
     Lichtkern die harte Kante des Strichs und erscheint dort schlagartig -
     man sieht genau, wo er anfaengt und aufhoert. Die Maske blendet beide
     Ebenen zu den Enden hin aus, sodass das Licht aus dem Nichts kommt und
     ins Nichts geht. */
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 0, 0, 0.35) 8%,
    #000 26%,
    #000 74%,
    rgba(0, 0, 0, 0.35) 92%,
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 0, 0, 0.35) 8%,
    #000 26%,
    #000 74%,
    rgba(0, 0, 0, 0.35) 92%,
    transparent 100%
  );
  transform: translateX(-50%);
  opacity: 0.85;
  animation: in-brand-lichtpuls 7.2s cubic-bezier(0.37, 0, 0.28, 1) infinite;
  will-change: background-position, box-shadow, transform;
}

/* Der Schein hinter dem Strich. Liegt bewusst UNTER der Wortmarke (z-index 0
   gegen den Text) und traegt keine eigene Farbe ins Layout - er verschwindet
   in der Ruhephase vollstaendig. */
.in-brand::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -7px;
  width: 132px;
  height: 15px;
  transform: translateX(-50%);
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    rgba(201, 162, 75, 0.5) 0%,
    rgba(201, 162, 75, 0.16) 42%,
    rgba(201, 162, 75, 0) 72%
  );
  opacity: 0;
  animation: in-brand-schein 7.2s cubic-bezier(0.37, 0, 0.28, 1) infinite;
}

/* Der Strich: das Licht zieht von 0 bis 46 % in EINEM Zug hindurch, danach
   klingt der Schimmer aus, ab 62 % liegt der Strich still.

   background-position steht bewusst nur an den beiden Enden dieses Zugs.
   Wuerde die Eigenschaft auch in den Zwischenschritten gesetzt, liefe die
   Beschleunigungskurve mehrfach hintereinander an - das Licht wuerde auf
   halber Strecke bremsen und wieder anziehen. Genau daher ruehrt der
   abgehackte Eindruck. So bleibt es ein einziger, durchgehender Zug.

   Die minimale Dehnung ueber scaleX laesst den Strich atmen, ohne dass sich
   das Layout bewegt. */
@keyframes in-brand-lichtpuls {
  0% {
    background-position: -130% 0, 0 0;
    box-shadow: 0 0 4px rgba(201, 162, 75, 0.14);
    opacity: 0.7;
    transform: translateX(-50%) scaleX(1);
  }
  16% {
    box-shadow: 0 0 10px rgba(201, 162, 75, 0.34);
    opacity: 0.9;
    transform: translateX(-50%) scaleX(1.04);
  }
  30% {
    box-shadow:
      0 0 20px rgba(201, 162, 75, 0.6),
      0 0 36px rgba(201, 162, 75, 0.19);
    opacity: 1;
    transform: translateX(-50%) scaleX(1.09);
  }
  46% {
    background-position: 230% 0, 0 0;
    box-shadow: 0 0 14px rgba(201, 162, 75, 0.42);
    opacity: 0.95;
    transform: translateX(-50%) scaleX(1.04);
  }
  62%,
  100% {
    background-position: 230% 0, 0 0;
    box-shadow: 0 0 4px rgba(201, 162, 75, 0.14);
    opacity: 0.7;
    transform: translateX(-50%) scaleX(1);
  }
}

/* Der Schein laeuft dem Strich einen Hauch nach - Licht breitet sich aus,
   es erscheint nicht gleichzeitig. Genau diese Verzoegerung nimmt dem
   Vorgang das Mechanische. */
@keyframes in-brand-schein {
  0% {
    opacity: 0;
    transform: translateX(-50%) scale(0.82);
  }
  20% {
    opacity: 0.32;
  }
  34% {
    opacity: 0.85;
    transform: translateX(-50%) scale(1.06);
  }
  52% {
    opacity: 0.28;
  }
  66%,
  100% {
    opacity: 0;
    transform: translateX(-50%) scale(0.82);
  }
}

.in-brand .in-brand-mark {
  font-family: var(--in-serif);
  font-size: 26px;
  letter-spacing: 2px;
  color: #fff;
  font-weight: 600;
  line-height: 1;
}

.in-brand .in-brand-sub {
  font-size: 10.5px;
  letter-spacing: 2.5px;
  color: #8fa3c8;
  text-transform: uppercase;
  margin-top: 4px;
}

.in-nav {
  padding: 16px 14px;
  flex: 1;
  overflow-y: auto;
}

.in-nav-label {
  display: block;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #7488ad;
  padding: 14px 12px 8px;
  font-weight: 600;
}

.in-nav-item {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 11px 13px;
  border-radius: 11px;
  color: #c2cde2;
  font-weight: 500;
  font-size: 14.5px;
  position: relative;
  transition: background 0.22s ease, color 0.22s ease, transform 0.22s ease;
  margin-bottom: 2px;
  cursor: pointer;
}

.in-nav-item svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  opacity: 0.9;
  transition: transform 0.22s ease, opacity 0.22s ease;
}

.in-nav-item:hover {
  background: rgba(255, 255, 255, 0.11);
  color: #fff;
  transform: translateX(2px);
}

.in-nav-item:hover svg {
  opacity: 1;
  transform: scale(1.06);
}

.in-nav-item.active {
  background: linear-gradient(90deg, rgba(91, 138, 230, 0.26), rgba(91, 138, 230, 0.14));
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.in-nav-item.active svg {
  opacity: 1;
}

.in-nav-item.active::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 22px;
  border-radius: 0 4px 4px 0;
  background: linear-gradient(180deg, #ddba62, var(--in-gold));
  box-shadow: 0 0 10px rgba(201, 162, 75, 0.45);
  animation: inNavIndicator 0.22s ease;
}

@keyframes inNavIndicator {
  from {
    transform: translateY(-50%) scaleY(0.3);
    opacity: 0;
  }
  to {
    transform: translateY(-50%) scaleY(1);
    opacity: 1;
  }
}

.in-side-foot {
  padding: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.in-side-user {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 10px;
  border-radius: 12px;
  transition: 0.16s;
  cursor: pointer;
  width: 100%;
  text-align: left;
}

.in-side-user:hover {
  background: rgba(255, 255, 255, 0.07);
}

.in-side-user .in-user-name {
  font-size: 13.5px;
  color: #fff;
  font-weight: 600;
  line-height: 1.2;
}

.in-side-user .in-user-role {
  font-size: 11.5px;
  color: #8fa3c8;
}

/* Initials avatar - the prototype's photo avatar is replaced app-wide. */
.in-av {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--in-blue-500), var(--in-navy-600));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  border: 2px solid rgba(255, 255, 255, 0.25);
  flex-shrink: 0;
}

/* ========================================
   MAIN COLUMN & TOPBAR
   ======================================== */

.in-main {
  flex: 1;
  margin-left: var(--in-sidebar-w);
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100vh;
  min-height: 0;
  overflow: hidden;
}

.in-topbar {
  height: 70px;
  background: #fff;
  border-bottom: 1px solid var(--in-line);
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 30px;
  position: sticky;
  top: 0;
  z-index: 40;
  /* Soft edge towards the scrolling content column below. */
  box-shadow: 0 2px 10px rgba(13, 26, 56, 0.04);
}

.in-hamburger {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 11px;
  align-items: center;
  justify-content: center;
  color: var(--in-navy-800);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.in-hamburger:hover {
  background: var(--in-line-soft);
}

.in-search {
  position: relative;
  flex: 1;
  max-width: 440px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--in-bg);
  border: 1px solid var(--in-line);
  border-radius: 12px;
  padding: 0 14px;
  height: 42px;
  transition: 0.16s;
}

.in-search:focus-within {
  border-color: var(--in-blue-400);
  background: #fff;
  box-shadow: 0 0 0 3px var(--in-blue-100), 0 4px 14px rgba(13, 26, 56, 0.06);
}

.in-search:focus-within svg {
  color: var(--in-blue-500);
}

.in-search input {
  border: none;
  background: none;
  outline: none;
  flex: 1;
  color: var(--in-ink-900);
  font-family: inherit;
  font-size: 14.5px;
}

.in-search input:disabled {
  cursor: default;
}

.in-search svg {
  width: 18px;
  height: 18px;
  color: var(--in-ink-500);
  flex-shrink: 0;
}

.in-top-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* Kontomenue in der hellen Topbar.
   Die Grundgestaltung (.user-menu, layout.css) stammt vom dunklen Kopf des
   Organigramms: Name, Rollenschild und Pfeil sind dort weiss. In der weissen
   Topbar waren sie dadurch unsichtbar - sichtbar blieb nur das Kuerzel, der
   Rest wirkte wie eine leere Flaeche. */
.in-topbar .user-menu-trigger {
  color: var(--in-ink-900);
  height: 42px;
}

.in-topbar .user-menu-trigger:hover,
.in-topbar .user-menu.open .user-menu-trigger {
  background: var(--in-line-soft);
}

.in-topbar .user-name {
  color: var(--in-ink-900);
  font-size: 13.5px;
  max-width: 160px;
}

.in-topbar .user-menu .user-badge {
  color: var(--in-blue-text);
  background: var(--in-blue-50);
}

.in-topbar .user-menu-arrow {
  border-top-color: var(--in-ink-500);
}

.in-topbar .user-avatar {
  border-radius: 10px;
}

/* ========================================
   CONTENT AREA
   ======================================== */

.in-content {
  padding: 30px;
  /* Volle Breite statt zentrierter 1280er-Spalte: Auf breiten Schirmen blieb
     links und rechts Flaeche liegen, waehrend Tabellen und Baeume innen
     gedraengt standen (Vorgabe Daniel Lippa, 27.07.2026). */
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  /* base.css sets body{overflow:hidden} for the legacy full-screen views,
     so the content column is the intranet's scroll container. */
  min-height: 0;
  overflow-y: auto;
}

/* Full-bleed mode for legacy full-screen views (org chart, revenue, catalog,
   profile) that bring their own headers and page chrome. */
.in-content.in-content--flush {
  padding: 0;
  max-width: none;
  margin: 0;
}

.in-page {
  animation: inFade 0.35s ease;
  flex: 1;
  min-width: 0;
}

@keyframes inFade {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.in-page-head {
  margin-bottom: 24px;
}

.in-page-head h1 {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.4px;
  color: var(--in-ink-900);
}

.in-page-head p {
  color: var(--in-ink-500);
  margin-top: 4px;
  font-size: 14.5px;
}

/* ---------------------------------------------------------------------------
   Kopfzeile mit Zusatz: Begruessung links, eigene Stufe rechts.

   Die Klasse setzt IntranetShell nur, wenn ein Zusatz uebergeben wurde -
   alle anderen Seiten behalten die flache Kopfzeile. Deshalb steht die
   Zweispaltigkeit hier und nicht in .in-page-head selbst.
   --------------------------------------------------------------------------- */

.in-page-head--mit-zusatz {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}

.in-page-head-text {
  min-width: 0;
}

/* Der Behaelter bleibt leer, solange das Profil laedt - und bleibt es auch,
   wenn keine Stufe gepflegt ist. :empty haelt in dem Fall den Abstand
   heraus, den flex sonst umsonst reserviert. */
.in-kopf-stufe:empty {
  display: none;
}

/* Blaues Feld, derselbe Verlauf wie die Hero-Karten im Karriere-Reiter -
   das Emblem steht dort auf Navy und soll hier nicht anders wirken. Der
   vorherige Aufheller lag bei 4 % Deckkraft und las sich als grauer
   Schleier statt als Feld. */
.in-kopf-stufe {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
  padding: 12px 18px 12px 14px;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(135deg, var(--in-navy-800), var(--in-navy-600));
  box-shadow: var(--in-shadow-md);
}

.in-kopf-stufe-emblem {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}

.in-kopf-stufe-text {
  min-width: 168px;
}

.in-kopf-stufe-name {
  font-size: 14.5px;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
}

.in-kopf-stufe-sub {
  font-size: 11.5px;
  color: #9db4dd;
  margin-top: 1px;
}

.in-kopf-stufe-balken {
  height: 6px;
  margin-top: 7px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

.in-kopf-stufe-balken > span {
  display: block;
  height: 100%;
  border-radius: 20px;
  background: linear-gradient(90deg, #2f6bd6, #82b2ff);
  box-shadow: 0 0 8px rgba(130, 178, 255, 0.7);
}

.in-kopf-stufe-ziel {
  font-size: 11.5px;
  font-weight: 600;
  color: #b9c8e6;
  margin-top: 5px;
}

/* Auf schmalen Fenstern rutscht der Zusatz unter die Begruessung und nimmt
   die volle Breite - nebeneinander quetschte er die Ueberschrift um. */
@media (max-width: 720px) {
  .in-page-head--mit-zusatz {
    gap: 16px;
  }

  .in-kopf-stufe {
    width: 100%;
  }
}

.in-eyebrow {
  font-size: 12px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--in-blue-text);
  font-weight: 700;
  margin-bottom: 6px;
}

/* ========================================
   CARDS & DASHBOARD BUILDING BLOCKS
   ======================================== */

.in-card {
  background: var(--in-card);
  border: 1px solid var(--in-line);
  border-radius: var(--in-radius);
  box-shadow: var(--in-shadow-sm);
}

.in-card-pad {
  padding: 22px;
}

.in-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--in-line-soft);
}

.in-card-head h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--in-ink-900);
}

.in-sec {
  margin-bottom: 22px;
}

.in-sec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.in-sec-head h2 {
  font-size: 16px;
  font-weight: 700;
  color: var(--in-ink-900);
}

.in-sec-head .in-sec-hint {
  font-size: 13px;
  color: var(--in-ink-500);
}

/* Quick-access cards (dashboard) */
.in-qa-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.in-qa {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--in-line);
  border-radius: var(--in-radius-sm);
  background: #fff;
  text-align: left;
  transition: 0.16s;
  cursor: pointer;
}

.in-qa:hover {
  border-color: var(--in-blue-400);
  box-shadow: var(--in-shadow-md);
  transform: translateY(-2px);
}

.in-qa .in-qa-ic {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.in-qa .in-qa-ic svg {
  width: 20px;
  height: 20px;
}

.in-qa .in-qa-t {
  font-weight: 650;
  font-size: 14px;
  color: var(--in-ink-900);
}

.in-qa .in-qa-d {
  font-size: 12.5px;
  color: var(--in-ink-500);
}

.in-qa-ic.tone-blue {
  background: var(--in-blue-100);
  color: var(--in-blue-500);
}

.in-qa-ic.tone-gold {
  background: var(--in-gold-soft);
  color: var(--in-gold);
}

.in-qa-ic.tone-green {
  background: var(--in-green-soft);
  color: var(--in-green-text);
}

.in-qa-ic.tone-purple {
  background: var(--in-purple-soft);
  color: var(--in-purple);
}

.in-qa-ic.tone-teal {
  background: var(--in-teal-soft);
  color: var(--in-teal);
}

/* ========================================
   MOBILE
   ======================================== */

.in-overlay {
  position: fixed;
  inset: 0;
  background: rgba(13, 26, 56, 0.4);
  z-index: 55;
  opacity: 0;
  visibility: hidden;
  transition: 0.2s;
}

.in-overlay.show {
  opacity: 1;
  visibility: visible;
}

@media (max-width: 1080px) {
  .in-qa-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {
  .in-sidebar {
    transform: translateX(-100%);
  }

  .in-sidebar.open {
    transform: none;
  }

  .in-main {
    margin-left: 0;
  }

  .in-hamburger {
    display: flex;
  }

  .in-content {
    padding: 20px;
  }

  .in-content.in-content--flush {
    padding: 0;
  }
}

@media (max-width: 640px) {
  .in-qa-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   Global search dropdown (topbar) + offline banner
   ============================================================ */

.in-search-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--in-line);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(13, 26, 56, 0.06), 0 16px 40px rgba(13, 26, 56, 0.16);
  max-height: min(420px, 60vh);
  overflow-y: auto;
  z-index: 60;
  padding: 6px;
  transform-origin: top center;
  animation: inPanelIn 0.18s ease;
}
@keyframes inPanelIn {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.in-search-group {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--in-ink-500);
  padding: 10px 10px 5px;
}
.in-search-group:not(:first-child) {
  margin-top: 5px;
  padding-top: 11px;
  border-top: 1px solid var(--in-line-soft);
}
.in-search-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.16s ease;
}
.in-search-item:hover,
.in-search-item.active {
  background: var(--in-blue-50);
}
.in-search-item.active {
  box-shadow: inset 2.5px 0 0 var(--in-blue-400);
}
.in-search-item.active .in-search-title {
  color: var(--in-navy-700);
}
.in-search-item:focus-visible {
  outline: 2px solid var(--in-blue-400);
  outline-offset: -2px;
}
.in-search-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--in-ink-900);
}
.in-search-sub {
  font-size: 12px;
  color: var(--in-ink-500);
}
.in-search-empty {
  padding: 18px 12px 16px;
  font-size: 13.5px;
  color: var(--in-ink-500);
  text-align: center;
}
.in-search-empty::before {
  content: "· · ·";
  display: block;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--in-ink-500);
  margin-bottom: 4px;
}

.in-offline-banner {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--in-navy-800);
  color: #fff;
  font-size: 13.5px;
  padding: 10px 18px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 1px 2px rgba(13, 26, 56, 0.2), 0 10px 28px rgba(13, 26, 56, 0.28);
  z-index: 120;
  max-width: min(92vw, 560px);
  text-align: center;
  animation: inBannerIn 0.25s ease;
}

@keyframes inBannerIn {
  from {
    opacity: 0;
    transform: translate(-50%, 10px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

/* ============================================================
   Einladungs-Dialog (Admin-Versand über Microsoft-365-Postfach)
   ============================================================ */

.in-invite-overlay {
  position: fixed;
  inset: 0;
  background: rgba(13, 26, 56, 0.45);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  /* --z-modal (500), nicht ein eigener Wert: Ein Modal muss ueber ALLEM
     liegen. Bei den frueheren 140 lag es unter der Zoom-Bedienung des
     Organigramms (z-index 199) - beim Oeffnen der Akte standen deren
     Schaltflaechen mitten im abgedunkelten Feld. Dieselbe Stufe benutzen
     bereits die Modals in knowledge-base.css und learning-library.css. */
  z-index: var(--z-modal);
  padding: 16px;
  animation: inOverlayIn 0.2s ease;
}
@keyframes inOverlayIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.in-invite-dialog {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(13, 26, 56, 0.08), 0 24px 64px rgba(13, 26, 56, 0.3);
  padding: 24px;
  width: min(480px, 100%);
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: inDialogIn 0.22s ease;
}
@keyframes inDialogIn {
  from {
    opacity: 0;
    transform: scale(0.98) translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.in-invite-dialog h3 {
  font-size: 18px;
  color: var(--in-ink-900);
}
.in-invite-hint {
  font-size: 13.5px;
  color: var(--in-ink-500);
  line-height: 1.5;
}
.in-invite-input,
.in-invite-note {
  border: 1px solid var(--in-line);
  border-radius: 10px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 14px;
  color: var(--in-ink-900);
  resize: vertical;
}
.in-invite-input:focus,
.in-invite-note:focus {
  outline: none;
  border-color: var(--in-blue-400);
  box-shadow: 0 0 0 3px var(--in-blue-100);
}
.in-invite-error {
  font-size: 13px;
  color: var(--in-red-text);
}
.in-invite-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.in-invite-cancel {
  border: 1px solid var(--in-line);
  background: #fff;
  color: var(--in-ink-700);
  border-radius: 10px;
  padding: 9px 16px;
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease;
}
.in-invite-cancel:hover {
  background: var(--in-blue-50);
  border-color: var(--in-blue-400);
}
.in-invite-cancel:focus-visible,
.in-invite-mailto:focus-visible,
.in-invite-reset:focus-visible {
  outline: 2px solid var(--in-blue-400);
  outline-offset: 2px;
  border-radius: 6px;
}
.in-invite-mailto {
  border: none;
  background: none;
  color: var(--in-ink-500);
  font-family: inherit;
  font-size: 12.5px;
  text-decoration: underline;
  cursor: pointer;
  align-self: center;
}
.in-invite-mailto:hover {
  color: var(--in-blue-500);
}

/* Erweiterter Einladungs-Dialog: bearbeitbare E-Mail-Vorlage */
.in-invite-dialog--wide {
  width: min(640px, 100%);
  max-height: min(86vh, 780px);
  overflow-y: auto;
}
.in-invite-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.in-invite-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--in-ink-500);
}
.in-invite-body {
  border: 1px solid var(--in-line);
  border-radius: 10px;
  padding: 12px;
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--in-ink-900);
  resize: vertical;
  min-height: 220px;
}
.in-invite-body:focus {
  outline: none;
  border-color: var(--in-blue-400);
  box-shadow: 0 0 0 3px var(--in-blue-100);
}
.in-invite-reset {
  border: none;
  background: none;
  color: var(--in-ink-500);
  font-family: inherit;
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}
.in-invite-reset:hover {
  color: var(--in-blue-500);
}
.in-invite-actions-spacer {
  flex: 1;
}

/* Profilbild in Sidebar-Footer und Nutzermenü */
.in-av img,
.user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

/* ============================================================
   Registrierungen — Freigabe eingereichter Selbstauskuenfte
   (FreigabeDialog.js; nutzt den Rahmen der in-invite-Dialoge)
   ============================================================ */

.fg-liste { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 14px; }

.fg-karte {
  border: 1px solid var(--in-line, #e5e9f0); border-radius: 10px;
  padding: 12px 14px; background: #fff;
}
/* Wartende Registrierungen sind das, wofuer man den Dialog oeffnet. */
.fg-karte.ist-wartend { border-color: #c9a24b; background: #fffdf7; }

.fg-kopf {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
}
.fg-name { font-weight: 700; font-size: 14px; color: var(--in-navy-800, #132548); }
.fg-unter { font-size: 12px; color: var(--in-ink-500, #697389); margin-top: 2px; }

.fg-marke {
  flex: 0 0 auto; font-size: 11px; font-weight: 600; padding: 3px 9px;
  border-radius: 999px; white-space: nowrap;
}
.fg-marke--warte { background: #fdf6e7; color: #8a6d1f; }
.fg-marke--ok { background: #eefaf4; color: #1d6647; }
.fg-marke--offen { background: #eef3fc; color: #2f5aa8; }
.fg-marke--aus { background: #f2f4f7; color: var(--in-ink-500); }

.fg-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

.fg-angaben {
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--in-line, #e5e9f0);
}
.fg-eingereicht { font-size: 12px; color: var(--in-ink-500, #697389); margin: 0 0 8px; }
.fg-angaben h4 {
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--in-blue-500, #3b6fd4); margin: 12px 0 5px;
}
.fg-daten { margin: 0; display: grid; gap: 0; }
.fg-daten > div {
  display: grid; grid-template-columns: minmax(120px, 38%) 1fr; gap: 10px;
  padding: 4px 0; border-bottom: 1px solid #f1f4f8; font-size: 12.5px;
}
.fg-daten > div:last-child { border-bottom: 0; }
.fg-daten dt { color: var(--in-ink-500, #697389); margin: 0; }
.fg-daten dd { margin: 0; overflow-wrap: anywhere; }

/* ============================================================
   Glocke — Benachrichtigungen in der Kopfzeile
   ============================================================ */

.in-glocke-huelle { position: relative; display: inline-flex; }

.in-glocke {
  position: relative; display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 10px;
  border: 1px solid var(--in-line, #e5e9f0); background: #fff;
  color: var(--in-navy-800, #132548); cursor: pointer;
}
.in-glocke:hover { background: #f6f8fb; }

/* Die Zahl ist der ganze Zweck der Glocke - sie sitzt auf der Kante, damit
   sie auch bei fluechtigem Blick auffaellt. */
.in-glocke-zahl {
  position: absolute; top: -6px; right: -6px;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: #d1495b; color: #fff;
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
  box-shadow: 0 0 0 2px #fff;
}

.in-glocke-tafel {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 300;
  width: min(400px, calc(100vw - 32px));
  background: #fff; border: 1px solid var(--in-line, #e5e9f0);
  border-radius: 12px; box-shadow: 0 18px 44px rgba(13, 26, 56, .18);
  overflow: hidden;
}
.in-glocke-kopf {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 14px; border-bottom: 1px solid var(--in-line, #e5e9f0);
  font-size: 12px; font-weight: 600; color: var(--in-ink-500, #697389);
}
.in-glocke-gelesen {
  border: 0; background: none; padding: 0; font: inherit; font-weight: 600;
  color: var(--in-blue-500, #3b6fd4); cursor: pointer; text-decoration: underline;
  text-underline-offset: 2px;
}

.in-glocke-liste { max-height: min(60vh, 480px); overflow-y: auto; }
.in-glocke-leer {
  margin: 0; padding: 22px 14px; text-align: center;
  font-size: 13px; color: var(--in-ink-500);
}

.in-glocke-zeile {
  display: grid; grid-template-columns: auto 1fr; gap: 2px 9px;
  width: 100%; text-align: left; border: 0; background: none;
  padding: 11px 14px; border-bottom: 1px solid #f1f4f8; cursor: pointer;
  font: inherit;
}
.in-glocke-zeile:last-child { border-bottom: 0; }
.in-glocke-zeile:hover:not(:disabled) { background: #f6f8fb; }
.in-glocke-zeile:disabled { cursor: default; }

.in-glocke-art {
  grid-row: 1 / 2; align-self: center;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  padding: 2px 7px; border-radius: 999px; white-space: nowrap;
}
.in-glocke-zeile--partner .in-glocke-art { background: #eefaf4; color: #1d6647; }
.in-glocke-zeile--umsatz  .in-glocke-art { background: #fdf6e7; color: #8a6d1f; }
.in-glocke-zeile--artikel .in-glocke-art { background: #eef3fc; color: #2f5aa8; }

.in-glocke-titel {
  grid-column: 2; font-size: 13px; font-weight: 600;
  color: var(--in-ink-900, #141b2b);
}
.in-glocke-text {
  grid-column: 2; font-size: 12px; color: var(--in-ink-500, #697389); line-height: 1.4;
}
.in-glocke-zeit {
  grid-column: 2; font-size: 11px; color: var(--in-ink-500); margin-top: 2px;
}