/* ================================================================
   LifeOn Central — layout.css
   App Shell, Topbar, Notifications, Tab Navigation, Profile
   ================================================================ */

/* ── Skip-Link (a11y) ──────────────────────────────────── */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: var(--z-popover-elevated);
  padding: var(--space-2) var(--space-4);
  background: var(--brand-default);
  color: var(--brand-text-on);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: var(--fw-semibold);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  text-decoration: none;
}
.skip-link:focus { top: 0; }

/* ══════════════════════════════════════════════════════════════════════════
   App Layout — Hybrid Icon-Rail + Page-Header
   ──────────────────────────────────────────────────────────────────────────
   Linear/Notion-Pattern:
     .app-shell       — flex row (Desktop ≥600px): Rail links + Frame rechts
     .nav-rail        — schmale dunkle Rail (56px), Modul-Wechsel via Icons
     .app-frame       — flex column: Page-Header oben + Content darunter
     .page-header     — hell, Modul-Label links + Header-Actions rechts

   IDs der Action-Buttons (#topbar-user, #topbar-avatar, #topbar-username,
   #topbar-burger, #topbar-kontext-btn, …) bleiben unveraendert, damit
   bestehender JS-Code (init.js, mein-tag.js u.a.) ohne Aenderung weiter-
   funktioniert. Nur die optische Schale wechselt: helle .topbar-btn auf
   weissem Page-Header statt heller .topbar-btn auf dunkler Topbar.
   ══════════════════════════════════════════════════════════════════════════ */
.app-shell {
  display: flex;
  flex-direction: row;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: var(--color-bg);
}
.app-frame {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
#main-content { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; position: relative; }

/* Safe-Area: Notch-Padding auf body statt auf einzelne Elemente.
   Im PWA-Standalone-Modus ist die App fullscreen — body braucht den Inset.
   Hintergrundfarbe = Rail-Farbe damit der Notch-Bereich dunkelblau ist. */
body {
  padding-top: env(safe-area-inset-top, 0px);
  background-color: var(--lod-blue-dark);
}

/* ══════════════════════════════════════════════════════════════════════════
   Icon-Rail (links, dunkel, 56px, ≥600px sichtbar)
   ══════════════════════════════════════════════════════════════════════════ */
.nav-rail {
  flex-shrink: 0;
  width: 56px;
  background: var(--lod-blue-dark);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-2) 0;
  gap: var(--space-1);
  min-height: 0;  /* Best-Practice: Flex-Column + overflow braucht min-height:0,
                     damit der Container in einem Flex-Parent (.app-shell) unter
                     seine Inhalt-Hoehe schrumpfen kann. */
  overflow-y: auto;
  overflow-x: visible;  /* Tooltips ragen nach rechts raus */
  scrollbar-width: none;
  z-index: var(--z-nav-rail);
}
.nav-rail::-webkit-scrollbar { display: none; }

.nav-rail-logo {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  background: #fff;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-3);
  text-decoration: none;
  transition: transform var(--duration-fast), box-shadow var(--duration-fast);
}
.nav-rail-logo:hover { transform: scale(1.04); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.15); }
.nav-rail-logo:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6); }
.nav-rail-logo-img { width: 28px; height: 28px; object-fit: contain; }

.nav-rail-items {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  width: 100%;
  /* stretch (nicht center) — Items werden via eigenes margin zentriert; so
     springen sie beim Ein-/Ausklappen nicht in die Panel-Mitte. */
  align-items: stretch;
}
.nav-rail-spacer { flex: 1; min-height: var(--space-3); }
.nav-rail-items--system { padding-bottom: env(safe-area-inset-bottom, 0px); }

.nav-rail-item {
  position: relative;
  /* Layout IDENTISCH in beiden Zustaenden: das Icon sitzt immer links-buendig an
     derselben X-Position (margin 8 + padding 10 = 18px ab Rail-Kante). Beim Ein-/
     Ausklappen waechst nur die Item-Breite mit der Rail mit (Container = stretch)
     — das Icon springt NICHT. Im 56px-Rail ergibt das margin ein zentriertes
     40px-Pill; das Label dahinter ist via max-width:0 ausgeblendet. */
  width: auto;
  height: 40px;
  border: none;
  background: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-3);
  margin: 0 var(--space-2);
  padding: 0 var(--space-2-5);
  color: rgba(255, 255, 255, 0.65);
  /* Routing-SSOT-Sweep 2026-05-07: Tab ist <a href> (Strg/Cmd-Klick → neuer Tab).
     UA-Default-Anchor-Underline neutralisieren. */
  text-decoration: none;
  transition: background var(--duration-fast), color var(--duration-fast);
}
.nav-rail-item > .ui-ico { flex-shrink: 0; display: inline-flex; }
.nav-rail-item > .ui-ico img {
  width: 20px;
  height: 20px;
  /* Weiss-Filter fuer Fluent-Icons (sind originaer dunkelblau) */
  filter: brightness(0) invert(1);
  opacity: 0.75;
  transition: opacity var(--duration-fast);
}
.nav-rail-item:hover { background: rgba(255, 255, 255, 0.10); color: #fff; }
.nav-rail-item:hover > .ui-ico img { opacity: 1; }
.nav-rail-item:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6); }
.nav-rail-item.active {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}
.nav-rail-item.active > .ui-ico img { opacity: 1; }
/* Aktiv-Indikator: linker farbiger Strich (Linear/Notion-Pattern) */
.nav-rail-item.active::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 22px;
  background: var(--brand-default);
  border-radius: 0 var(--radius-xxs) var(--radius-xxs) 0;
}

/* Hover-Tooltip ist ein Rich-Popup im Stil der Persona-Karte — gerendert via
   web/js/ui/nav-rail-tooltip.js (nutzt Popover-SSOT) mit eigenem Styling in
   styles/nav-rail-tooltip.css. Das
   data-tooltip-Attribut bleibt am DOM (Modul-Titel im Popup-Header), das
   alte CSS-::after-Pseudo ist entfallen. */

/* ══════════════════════════════════════════════════════════════════════════
   Ausklappbare Nav-Rail (Richtung A: Brand-Navy, expand-in-place)
   Collapsed (Default) = 56px Icon-Rail. .is-expanded = 256px Label-Panel mit
   statischen Gruppen-Labels (nicht klappbar). Zustand persistiert via prefs.js
   (Bereich 'nav'). Mobile <600px bleibt unveraendert (Rail versteckt, Burger).

   Motion (Premium-Reveal statt Hard-Cut): die Breite faehrt mit Decelerate-
   Ease auf (schneller Start, weiches Ausschwingen); Wortmarke, Gruppen-Labels
   und Item-Labels blenden LEICHT VERSETZT (gestaffelt) mit Fade + Slide ein —
   beim Einklappen verschwinden sie sofort (Delay nur im .is-expanded-State).
   ══════════════════════════════════════════════════════════════════════════ */
.nav-rail {
  width: var(--rail-w, 56px);
  transition: width var(--duration-spring) var(--ease-decelerate);
}
/* overflow-x: hidden im ausgeklappten Zustand — Labels spillen waehrend der
   Breiten-Animation nicht ueber die Rail-Kante. Eingeklappt bleibt visible
   (Basis-Regel), damit die Hover-Tooltips nach rechts ausragen koennen. */
.nav-rail.is-expanded { width: var(--rail-w-exp, 256px); align-items: stretch; overflow-x: hidden; }
.nav-rail.is-expanded .nav-rail-items { align-items: stretch; }

/* Kopf: Logo + Wortmarke + Toggle. Collapsed = gestapelt, expanded = Zeile.
   align-items: flex-start (NICHT center) + konstantes padding-left → das Logo
   sitzt in BEIDEN Zustaenden bei rail-x 8 (im 56px-Rail = zentriert via 8px
   Rand je Seite) und fliegt beim Einklappen NICHT in die Panel-Mitte. */
.nav-rail-head {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--space-1); width: 100%; flex-shrink: 0; margin-bottom: var(--space-2);
  padding: 0 var(--space-2);
}
/* Logo-Abstand managt jetzt der Head-Container (gap/margin) — Basis-margin neutralisieren */
.nav-rail-head .nav-rail-logo { margin-bottom: 0; }
.nav-rail.is-expanded .nav-rail-head {
  flex-direction: row; align-items: center; gap: var(--space-2);
  padding: 0 var(--space-2);
}
/* Wortmarke: im 56px-Rail kein Platz (display:none); expanded faehrt sie
   versetzt mit Fade + Slide ein. */
.nav-rail-wordmark {
  flex: 1; min-width: 0; color: #fff; font-weight: 700; font-size: 15px;
  letter-spacing: -0.01em; white-space: nowrap; overflow: hidden;
  opacity: 0; transform: translateX(-6px);
  transition: opacity var(--duration-fast) var(--ease-soft), transform var(--duration-fast) var(--ease-soft);
}
.nav-rail:not(.is-expanded) .nav-rail-wordmark { display: none; }
.nav-rail.is-expanded .nav-rail-wordmark {
  opacity: 1; transform: translateX(0);
  transition: opacity var(--duration-normal) var(--ease-soft) 90ms,
              transform var(--duration-spring) var(--ease-decelerate) 60ms;
}
.nav-rail-toggle {
  width: 40px; height: 40px; flex-shrink: 0; border: none; background: none;
  border-radius: var(--radius-md); cursor: pointer; padding: 0;
  color: rgba(255, 255, 255, 0.7); display: inline-flex;
  align-items: center; justify-content: center;
  transition: background var(--duration-fast), color var(--duration-fast);
}
.nav-rail.is-expanded .nav-rail-toggle { margin-left: auto; }
.nav-rail-toggle:hover { background: rgba(255, 255, 255, 0.10); color: #fff; }
.nav-rail-toggle:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6); }
.nav-rail-toggle > .ui-ico img { width: 20px; height: 20px; filter: brightness(0) invert(1); opacity: 0.8; }
.nav-rail-toggle:hover > .ui-ico img { opacity: 1; }

/* Gruppen-Container — align-items: stretch in BEIDEN Zustaenden, damit die
   Items NICHT zwischen "zentriert" (collapsed) und "links" (expanded) in die
   Panel-Mitte springen. Zentrierung im 56px-Rail kommt aus dem Item-margin. */
.nav-rail-group { display: flex; flex-direction: column; gap: var(--space-1); width: 100%; align-items: stretch; }
.nav-rail-group-items { display: flex; flex-direction: column; gap: var(--space-1); width: 100%; align-items: stretch; }
/* Trennlinie zwischen Gruppen NUR im eingeklappten Icon-Rail (statt Label) */
.nav-rail:not(.is-expanded) .nav-rail-group + .nav-rail-group {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: var(--space-1); padding-top: var(--space-2);
}

/* Gruppen-Label: statische Sektions-Ueberschrift (NICHT klappbar). Im
   eingeklappten Rail unsichtbar + ohne vertikalen Platz; expanded faehrt es ein.
   ALLE Box-Properties (Hoehe, margin-top, padding-bottom, opacity) werden
   gemeinsam animiert — sonst springt der vertikale Stack beim Einklappen. */
.nav-rail-group-head {
  box-sizing: border-box; height: 0; opacity: 0; overflow: hidden;
  margin: 0 var(--space-2); padding: 0 var(--space-3);
  display: flex; align-items: flex-end;
  font-size: 11px; font-weight: 700; letter-spacing: var(--ls-caps, 0.08em);
  text-transform: uppercase; color: rgba(255, 255, 255, 0.45);
  transition: height var(--duration-medium) var(--ease-decelerate),
              margin-top var(--duration-medium) var(--ease-decelerate),
              padding-bottom var(--duration-medium) var(--ease-decelerate),
              opacity var(--duration-fast) ease;
}
.nav-rail.is-expanded .nav-rail-group-head {
  height: 30px; opacity: 1; margin-top: var(--space-2); padding-bottom: 6px;
  transition: height var(--duration-spring) var(--ease-decelerate),
              margin-top var(--duration-spring) var(--ease-decelerate),
              padding-bottom var(--duration-spring) var(--ease-decelerate),
              opacity var(--duration-normal) ease 110ms;
}
.nav-rail-group-label { white-space: nowrap; }

/* Item-Label: Reveal via opacity + max-width + Slide (gestaffelt nach der
   Breite). Collapsed = max-width 0, damit das Icon perfekt zentriert bleibt.
   Beim Einklappen kein Delay (Basis-Regel) → verschwindet sofort, kein Nachhaengen. */
.nav-rail-lbl {
  font-size: 14px; font-weight: 500; white-space: nowrap;
  letter-spacing: -0.01em; line-height: 1; text-overflow: ellipsis;
  opacity: 0; max-width: 0; overflow: hidden; transform: translateX(-6px);
  transition: opacity var(--duration-fast) var(--ease-soft),
              max-width var(--duration-medium) var(--ease-decelerate),
              transform var(--duration-fast) var(--ease-soft);
}
.nav-rail.is-expanded .nav-rail-lbl {
  opacity: 1; max-width: 180px; transform: translateX(0);
  transition: opacity var(--duration-normal) var(--ease-soft) 80ms,
              max-width var(--duration-spring) var(--ease-decelerate) 40ms,
              transform var(--duration-spring) var(--ease-decelerate) 80ms;
}
/* Item-Layout (Breite/Padding/Icon-Position) ist in beiden Zustaenden gleich
   (Basis-Regel) — kein .is-expanded-Override noetig, damit nichts springt. */

/* Reduced-Motion: kein Reveal/keine Breiten-Animation — sofortiger Zustand */
@media (prefers-reduced-motion: reduce) {
  .nav-rail, .nav-rail-wordmark, .nav-rail-group-head, .nav-rail-lbl {
    transition: none;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   Page-Header (oben, hell, ersetzt optisch die alte dunkle Topbar)

   Layout: CSS-Grid mit fixer Title-Spalte, damit der ViewSwitcher in jeder
   Section an derselben X-Position startet. Die
   Title-Spalte ist ueber das Token `--page-header-module-width` zentral
   steuerbar (siehe tokens.css) — laengster Modul-Label heute "Mein Bereich"
   (12 Zeichen), Buffer eingerechnet.

   Named-Grid-Areas: jeder direkte Slot bekommt eine eigene Spalte (title,
   subtabs, primary, section-actions, header-actions). Wir nutzen
   `grid-template-columns` mit named lines + `grid-column` pro Kind, damit
   ein leerer Slot mit `display:none` NICHT die Position der nachfolgenden
   Slots verschiebt — sonst landen Header-Actions bei nicht-migrierten
   Sections (wo Primary leer ist) faelschlich in der falschen Spalte.

   Spalten (Primary ganz rechts vor Header-Actions, NICHT direkt nach den
   Subtabs):
     [title]         — fix (var(--page-header-module-width))
     [subtabs]       — auto (ViewSwitcher Content-Breite)
     [filler]        — 1fr (frisst Restraum, schiebt Primary + Header-Actions rechts)
     [section-acts]  — auto (optionale Zusatz-Aktionen, falls genutzt)
     [primary]       — auto ("+Neu"-Button rechtsbuendig)
     [header-acts]   — auto (Activity/Glocke/Avatar/Burger)
   ══════════════════════════════════════════════════════════════════════════ */
.page-header {
  position: relative;
  height: var(--topbar-height);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  display: grid;
  grid-template-columns:
    [title-start] var(--page-header-module-width, 220px)
    [subtabs-start] minmax(0, auto)
    [filler-start] 1fr
    [section-acts-start] auto
    [primary-start] auto
    [header-acts-start] auto
    [end];
  align-items: center;
  padding-left: var(--space-5);
  padding-right: var(--space-4);
  color: var(--color-text);
  gap: var(--space-4);
  flex-shrink: 0;
  z-index: var(--z-page-header);
}
/* Explizite Spaltenzuweisung pro Slot — schuetzt vor "Slot kollabiert mit
   display:none → naechster Slot rutscht eine Spalte nach links". Reihenfolge
   im DOM (index.html) kann dabei eine andere sein als im Grid: subtabs sitzt
   im DOM vor primary, im Grid steht primary aber rechts. */
.page-header > .page-header-title          { grid-column: title-start / subtabs-start; }
.page-header > .page-header-subtabs        { grid-column: subtabs-start / filler-start; }
.page-header > .page-header-section-actions { grid-column: section-acts-start / primary-start; }
.page-header > .page-header-primary        { grid-column: primary-start / header-acts-start; }
.page-header > .page-header-actions        { grid-column: header-acts-start / end; }

/* Page-Header links: Modul-Icon + Modul-Label (oder Mobile-Logo) */
.page-header-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

/* Mobile-Logo (≥600px versteckt — Rail uebernimmt dort die Brand-Anzeige) */
.page-header-logo-mobile {
  display: none;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  color: var(--color-text);
  white-space: nowrap;
  min-width: 0;
}
.page-header-logo-img { height: 28px; flex-shrink: 0; }
.page-header-logo-text {
  font-weight: var(--fw-semibold);
  font-size: var(--font-size-md);
  color: var(--color-text);
}

/* Modul-Anzeige (≥600px: Icon + Label, Mobile: versteckt — Logo uebernimmt) */
.page-header-module {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}
.page-header-module > .ui-ico img {
  width: 22px;
  height: 22px;
}
.page-header-module-label {
  font-size: var(--font-size-lg, 16px);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  margin: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

/* ──────────────────────────────────────────────────────────────────────────
   Sub-Tab-Slot: mountet ViewSwitcher (anfragen, kontingente, projekte) direkt
   im Page-Header. Trenner zwischen Modul-Label
   und Sub-Tabs ist eine vertikale 1px-Linie. Leere Slots haben `is-empty`-
   Klasse und werden komplett ausgeblendet (kein Trenner-Phantom).
   ────────────────────────────────────────────────────────────────────────── */
.page-header-subtabs {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  /* Trenner: vertikale Linie als border-left, leichtes padding-left.
     margin-left aus dem Flex-Layout (NAV-2.1) ist mit dem Grid-Layout
     (NAV-3) entfallen — der Gap zwischen Title-Spalte und Subtabs-Spalte
     liefert den horizontalen Abstand. */
  border-left: 1px solid var(--color-border);
  padding-left: var(--space-3);
  /* Scroll-Safety-Net (Stufe 2, siehe page-header-responsive.js): die Grid-Spalte
     ist minmax(0,auto) → dieser Slot darf unter seine Inhaltsbreite schrumpfen und
     die Pills scrollen horizontal, statt die rechten Header-Actions (Suche/Glocke/
     Avatar/+Neu) über die Kante zu schieben. Scrollbar ausgeblendet (app-weit). */
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.page-header-subtabs::-webkit-scrollbar { display: none; }
.page-header-subtabs.is-empty { display: none; }

/* Primary-Action-Slot — "+Neu"-Button der Section.
   Auf Desktop sitzt der Button hier; auf <600px wandert er ueber JS
   (LoD.SectionHeader._applyPrimaryMount) in die Section-Toolbar. Das CSS
   `display:none` im Mobile-Block ist Sicherheitsnetz, falls JS verzoegert. */
.page-header-primary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.page-header-primary.is-empty { display: none; }

/* Section-Action-Slot — Zusatz-Aktionen rechts neben Primary. Kein
   margin-left mehr noetig: die 1fr-Spalte im Grid uebernimmt das
   Filler-Verhalten und schiebt die Header-Actions ans rechte Ende. */
.page-header-section-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.page-header-section-actions.is-empty { display: none; }

/* ──────────────────────────────────────────────────────────────────────────
   Section-Mobile-Toolbar
   ──────────────────────────────────────────────────────────────────────────
   Schmale Toolbar-Leiste am Section-Anfang, sichtbar NUR auf <600px. Aufnahme-
   slot fuer Sub-Tab-Switcher die auf Mobile zu gross fuer den Page-Header
   waeren (Mein-Bereich 4 Tabs, Admin 3+ Tabs). LoD.PageHeader.setSubTabs(...,
   { mobileMount: 'switcher-button', mobileToolbarSlot: <hier> }) rendert
   den Board-Switcher-Trigger-Button hinein.
   Auf >=600px komplett unsichtbar — der Page-Header-Pill-Switcher ist sichtbar.
   ────────────────────────────────────────────────────────────────────────── */
.lod-section-mobile-toolbar {
  display: none;
}
@media (max-width: 599px) {
  .lod-section-mobile-toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
  }
  .lod-section-mobile-toolbar:empty { display: none; }
  /* Switcher-Button auf Mobile: volle Breite (statt fixed 300px) */
  .lod-section-mobile-toolbar .app-board-switcher {
    width: 100%;
  }
}

/* ViewSwitcher im Page-Header behaelt seine globalen Pill-Styles aus
   view-switcher.css (graue Pille, aktiver Button darkblue). Selektor-Erweite-
   rung dort matched jetzt auch `.page-header-subtabs`-Kontexte. Hier bleibt
   nur ein leerer Hook fuer eventuelle spaetere Layout-Anpassungen. */

/* Page-Header rechts: Header-Actions (Aktivitaet/Glocke/Avatar). Im Grid-
   Layout uebernimmt die 1fr-Section-Actions-Spalte das Right-Aligning.
   `margin-left: auto` bleibt als Sicherheitsnetz fuer den
   Mobile-Block, wo der Header weiter Flex-Layout nutzt (siehe unten). */
.page-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}

/* ══════════════════════════════════════════════════════════════════════════
   Page-Header Theme-SSOT
   ──────────────────────────────────────────────────────────────────────────
   Der Page-Header lebt in zwei Themes:
     - LIGHT  (Desktop ≥600px): weisser Hintergrund, dunkle Texte/Icons
     - DARK   (Mobile <600px): dunkelblauer Hintergrund, weisse Texte/Icons

   Beide Themes definieren denselben Property-Satz. Aenderungen MUESSEN in
   beiden Bloecken parallel gepflegt werden — sonst passieren Drift-Bugs
   (Icon weiss-auf-weiss, Username unlesbar etc.).

   Properties pro Theme:
     1. Container-Background, Border, Text-Color
     2. .topbar-btn: idle/hover/active background + color
     3. .topbar-btn .ui-ico img: filter (Icon-Faerbung)
     4. .topbar-user-btn: idle/hover/active background + color
     5. .has-kontext (Persona aktiv): subtiler Background-Indicator
     6. Logo/Module-Label-Text-Color
   ══════════════════════════════════════════════════════════════════════════ */

#topbar-avatar:empty { background: transparent; }
.topbar-user-btn {
  gap: var(--space-2);
}

/* Basis-Geometrie (Theme-unabhaengig) */
.topbar-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-2);
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--duration-fast), color var(--duration-fast);
  position: relative;
}
.topbar-btn > .ui-ico img { width: 20px; height: 20px; }
.topbar-btn:focus-visible { outline: none; }

/* ── LIGHT-THEME (Default: Desktop ≥600px) ─────────────────────────────── */
/* Page-Header Container-Properties (background/border/color) sind oben in der
   Haupt-Definition gesetzt — hier nur die Topbar-Btn-Variants. */
.page-header .topbar-btn {
  color: var(--color-text-muted);
}
.page-header .topbar-btn:hover {
  background: var(--color-bg-subtle);
  color: var(--color-text);
}
.page-header .topbar-btn:active {
  background: var(--color-border-hover);
}
.page-header .topbar-btn:focus-visible {
  box-shadow: 0 0 0 2px var(--brand-default);
}
/* Icon-Faerbung Light: dunkelblau (Brand-Default) — Standard-Filter aus
   base.css `.ui-ico img` greift bereits. Explizit gesetzt fuer Robustheit
   gegen Reihenfolge-Drift. */
.page-header .topbar-btn > .ui-ico img {
  filter: invert(13%) sepia(15%) saturate(1200%) hue-rotate(190deg) brightness(95%);
}
/* Avatar-Button Light: dezenter Default-Bg, sonst "schwebt" Avatar im Header */
.page-header .topbar-user-btn {
  background: var(--color-bg-subtle);
  color: var(--color-text);
}
.page-header .topbar-user-btn:hover {
  background: var(--color-border-hover);
  color: var(--color-text);
}
.page-header .topbar-user-btn:active {
  background: var(--color-border-pressed);
}
/* Persona-aktiv-Indicator Light: Brand-Light tinted Background (statt rgba
   weiss-auf-weiss = unsichtbar). Override gilt vor `.has-kontext` aus
   mein-tag.css, weil hier spezifischer gescoped. */
.page-header .topbar-kontext-btn.has-kontext {
  background: var(--brand-light);
  color: var(--brand-default);
}
.page-header .topbar-kontext-btn.has-kontext:hover {
  background: var(--color-border-hover);
}

/* Notifications Badge */
#notifications-badge, #activity-badge, #genehmigungen-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  background: var(--status-danger-fg);
  color: var(--brand-text-on);
  font-size: 10px;
  font-weight: var(--fw-semibold);
  border-radius: var(--radius-circular);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-xxs);
  line-height: 1;
  pointer-events: none;
}

/* Notifications-Dropdown wurde nach components/popups/topbar-dropdowns.css
   extrahiert. Diese Datei behaelt nur
   noch die Topbar-Logo-Notebook-Overrides, die in den selben Responsive-Block
   gehoeren wie der notif-dropdown-Notebook-Override. */
@media (max-width: 1399px) {
  /* Logo: Firmenname kürzen auf Notebook */
  .topbar-logo-text { display: none; }
  .topbar-logo-sep { display: none; }
  .topbar-logo-app { font-size: var(--font-size-sm); }
}

/* ── 404-Not-Found-Overlay ──────────────────────── */
.nf-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-error-overlay);
  /* Scrim-SSOT (tokens.css), --strong: Vollbild-Takeover, darf klar dominieren,
     Hintergrund bleibt aber erkennbar (frueher fast schwarz). */
  background: var(--lod-scrim-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(2px);
}
.nf-panel {
  max-width: 480px;
  padding: var(--space-6);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 48px rgba(0,0,0,0.25);
  text-align: center;
}
.nf-icon img { width: 56px; height: 56px; opacity: 0.6; }
.nf-title {
  margin: var(--space-3) 0 var(--space-2);
  font-size: var(--font-size-xl, 22px);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
}
.nf-desc { margin: 0 0 var(--space-4); color: var(--color-text-muted); font-size: var(--font-size-sm); line-height: 1.55; }
.nf-actions { display: flex; justify-content: center; gap: var(--space-2); flex-wrap: wrap; }

/* Copy-Link-Button in Detail-Panel-Headern */
.lod-copy-link-btn {
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  transition: background var(--duration-fast), color var(--duration-fast);
}
.lod-copy-link-btn:hover { background: var(--color-bg-subtle); color: var(--color-text); }

/* ── Hinweise-Glocke — Event-Section (Paket E5.0) ──────── */
.notif-section { padding: var(--space-1) 0 var(--space-2); }
.notif-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-4) var(--space-1);
}
.notif-section-title {
  font-size: var(--fs-badge);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}
.notif-markall-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--color-text);
  cursor: pointer;
  font-family: var(--font-sans);
  transition: background var(--duration-fast);
}
.notif-markall-btn:hover { background: var(--color-bg-subtle); }

.notif-divider {
  height: 1px;
  background: var(--color-border);
  margin: var(--space-2) 0;
}

.notif-event-item {
  display: grid;
  grid-template-columns: 4px 24px 1fr auto;
  align-items: start;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
  transition: background var(--duration-fast), opacity var(--duration-normal) var(--ease-soft);
  position: relative;
}
.notif-event-item:hover { background: var(--color-bg-subtle); }
.notif-event-item.is-unread { background: var(--color-bg-subtle); }
.notif-event-item.is-unread .notif-event-title { font-weight: var(--fw-semibold); color: var(--color-text); }
.notif-event-item.is-fading { opacity: 0; transform: translateX(8px); }

.notif-event-indicator {
  width: 4px;
  align-self: stretch;
  border-radius: var(--radius-xxs);
}
.notif-event-item:not(.is-unread) .notif-event-indicator { opacity: 0.25; }

.notif-event-icon {
  margin-top: var(--space-xxs);
  opacity: 0.85;
}
.notif-event-body { min-width: 0; }
.notif-event-title-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.notif-event-title {
  font-size: var(--font-size-sm);
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.notif-event-desc {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.notif-event-prio {
  font-size: var(--font-size-xs);
  font-weight: var(--fw-semibold);
  padding: var(--space-px) var(--space-1-5);
  border-radius: var(--radius-xs);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  flex-shrink: 0;
}
.notif-prio-low    { background: var(--color-bg-subtle);  color: var(--color-text-muted); }
.notif-prio-normal { background: var(--status-info-bg);   color: var(--status-info-fg); }
.notif-prio-high   { background: var(--status-danger-bg); color: var(--status-danger-fg); }

.notif-event-aside {
  /* Zeile statt Spalte (Benachrichtigungen V2.0): mit zwei Aktions-Buttons
     (gelesen + stummschalten) wuerde die Spalte das Item unnoetig hoch machen. */
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-1);
  min-width: 52px;
}
.notif-event-read-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-xxs);
  border-radius: var(--radius-sm);
  opacity: 0.55;
  transition: opacity var(--duration-fast), background var(--duration-fast);
}
.notif-event-read-btn:hover { opacity: 1; background: var(--color-surface); }
.notif-event-time {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* Computed-Section Tweaks */
.notif-computed-section { padding: var(--space-1) 0 var(--space-2); }
.notif-computed-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4) var(--space-1);
}
.notif-tag-link {
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-xxs);
  border-radius: var(--radius-sm);
  opacity: 0.6;
  transition: opacity var(--duration-fast), background var(--duration-fast);
}
.notif-tag-link:hover { opacity: 1; background: var(--color-bg-subtle); }

@media (max-width: 599px) {
  /* Fullscreen-Dialog fuer Hinweise auf Mobile: max-height volle Hoehe */
  #notifications-dropdown { max-height: 90vh; }
}
/* Mobile-Bottom-Sheet-Overlay + Pulse/Glow-Animationen wurden wurde nach components/popups/topbar-dropdowns.css extrahiert (eng
 verzahnt mit notif-dropdown). */

/* Topbar User — Avatar + Name.
   Kein eigener `color` auf #topbar-user: ID-Selektor hat hoehere Spezifitaet
   als die theme-bewussten .page-header-Bloecke (Light: dunkel, Dark: weiss)
   und wuerde sonst den Username-Text fixen. Color wird vom Theme-Block geerbt. */
#topbar-user {
  font-size: var(--font-size-sm);
  padding: var(--space-1) var(--space-2-5) var(--space-1) var(--space-1);
}
#topbar-username {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
  font-weight: var(--fw-medium);
}
@media (max-width: 1399px) {
  #topbar-username { max-width: 110px; }
}
@media (max-width: 999px) {
  #topbar-username { max-width: 80px; }
}

/* ── Tab-Navigation entfaellt ─────────
 Module wechseln jetzt ueber .nav-rail (Icon-Rail links). Die alte
 horizontale .tab-bar mit .tab-btn-Buttons wurde komplett entfernt.
 - .mitte-tab-btn (Mein-Tag-interne Sub-Tabs) lebt in mein-tag.css/s-mein-tag.html
 und ist KEIN Teil des Hauptnavigations-Patterns.
 - Mobile-Burger nutzt .mobile-nav-item (Section weiter unten).
*/

/* Tab Content */
.tab-content { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: var(--space-6); padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom, 0px)); }
.tab-content.hidden { display: none; }
#tab-content-mein-tag { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
#tab-content-mein-tag.hidden { display: none; }
#tab-content-projekte { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
#tab-content-projekte.hidden { display: none; }

/* ═════════════════════════════════════════════════════════════════════════
   Section-Layout SSOT (Phase Layout-SSOT 2026-05-01)
   ─────────────────────────────────────────────────────────────────────────
   Standard-Layout-Klassen fuer ALLE Tab-Sections. Loest historische
   Inkonsistenz (Projekte/Anfragen/Vertrieb/Kontingente hatten je eigene
   Wrapper-Hierarchien) und das Mobile-Scroll-Problem in einem Rutsch.

   HTML-Pattern (s-<name>.html):
     <div class="lod-section">
       <div class="lod-section-toolbar">  …Toolbar / Subtabs / Filter…  </div>
       <div class="lod-section-panel">
         <div class="lod-section-scroll">
           …Liste / Karten / Content…
         </div>
       </div>
     </div>

   Pflicht-Eigenschaften:
   - Root .lod-section: flex column + flex:1 + min-height:0 → Hoehe vom
     #main-content (das wiederum flex:1 vom <body>-Layout ist).
   - .lod-section-toolbar: flex-shrink:0 (klebt oben).
   - .lod-section-panel: flex:1 + min-height:0 (gibt dem Scroll-Kind Platz).
   - .lod-section-scroll: flex:1 + overflow-y:auto (scrollbar).

   Mobile-Behavior: Da .lod-section + .lod-section-scroll die Scroll-Chain
   intern korrekt aufbauen, ist KEIN @media-Patch fuer #tab-content-* mehr
   noetig. Die Tabs koennen ihren overflow:hidden behalten.
   ═════════════════════════════════════════════════════════════════════════ */
.lod-section {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  height: 100%;
  width: 100%;
  min-width: 0;
}
.lod-section-toolbar {
  flex-shrink: 0;
}
.lod-section-panel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.lod-section-panel.hidden {
  display: none;
}
.lod-section-scroll {
  flex: 1;
  min-height: 0;
  min-width: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-4);
  padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  /* Scroll-Affordance: dezente Fade-Schatten oben/unten, die NUR bei Überlauf
     erscheinen — Scrollbars sind app-weit ausgeblendet (base.css), daher signalisiert
     dieser Fade „mehr Inhalt". Lea-Verou-Technik: Cover-Gradients (local, in --color-bg)
     verdecken den Schatten am Anfang/Ende, Schatten-Gradients (scroll) bleiben sichtbar. */
  background:
    linear-gradient(var(--color-bg) 30%, transparent) top / 100% 22px no-repeat,
    linear-gradient(transparent, var(--color-bg) 70%) bottom / 100% 22px no-repeat,
    radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.09), transparent) top / 100% 7px no-repeat,
    radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.09), transparent) bottom / 100% 7px no-repeat;
  background-attachment: local, local, scroll, scroll;
}

/* Versteckte Scrollbar in den V2-Karten-Workspaces (Karten-Layout wirkt
   sauberer ohne sichtbaren Scrollbalken; Scroll-Affordance liefern die
   Fade-Schatten oben). Cross-Section-Regel — lebt deshalb hier im
   Section-Layout-SSOT, nicht in einer einzelnen Section-CSS. */
#tab-content-projekte > .app-scope .lod-section-scroll,
#tab-content-anfragen > .app-scope .lod-section-scroll,
#tab-content-vertrieb > .app-scope .lod-section-scroll,
#tab-content-kontingente > .app-scope .lod-section-scroll,
#tab-content-personal > .app-scope .lod-section-scroll,
#tab-content-wissen > .app-scope .lod-section-scroll {
  scrollbar-width: none;
}
#tab-content-projekte > .app-scope .lod-section-scroll::-webkit-scrollbar,
#tab-content-anfragen > .app-scope .lod-section-scroll::-webkit-scrollbar,
#tab-content-vertrieb > .app-scope .lod-section-scroll::-webkit-scrollbar,
#tab-content-kontingente > .app-scope .lod-section-scroll::-webkit-scrollbar,
#tab-content-personal > .app-scope .lod-section-scroll::-webkit-scrollbar,
#tab-content-wissen > .app-scope .lod-section-scroll::-webkit-scrollbar {
  display: none;
}
@media (max-width: 599px) {
  #tab-content-projekte > .app-scope .lod-section-scroll,
  #tab-content-anfragen > .app-scope .lod-section-scroll,
  #tab-content-vertrieb > .app-scope .lod-section-scroll,
  #tab-content-kontingente > .app-scope .lod-section-scroll,
  #tab-content-personal > .app-scope .lod-section-scroll,
  #tab-content-wissen > .app-scope .lod-section-scroll {
    padding: var(--space-3);
  }
}

/* Karten-Grid der V2-Workspaces (Projekte/Anfragen): responsive auto-fill-
   Spalten, unter 1000px einspaltig. Neutrale Utility — ehemals section-lokal
   als .pj-grid, wurde aber cross-section konsumiert. */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 360px));
  gap: var(--space-3);
}
@media (max-width: 999px) {
  .card-grid { grid-template-columns: 1fr; }
}

/* Section-Layout fuer V2-Sections (Projekte/Anfragen/Vertrieb/Kontingente/
   Wissen). ID-basierter Selektor pro Tab — eindeutig, keine Alias-Klassen. */
#tab-content-projekte > .app-scope,
#tab-content-anfragen > .app-scope,
#tab-content-vertrieb > .app-scope,
#tab-content-firmen > .app-scope,
#tab-content-kontingente > .app-scope,
#tab-content-abrechnung > .app-scope,
#tab-content-personal > .app-scope,
#tab-content-wissen > .app-scope {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  height: 100%;
  width: 100%;
  min-width: 0;
}
/* Kanban: bewusst kein Section-Layout-Skelett. Behaelt sein eigenes
   .app-page > .app-content > .app-board Layout. Auf Mobile (<600px)
   greift in app.css die Lane-Snap-UX. */

/* Tab-Content-Container fuer ALLE Sections: overflow:hidden + display:flex,
   damit das interne .lod-section / Alias den Scroll uebernimmt. Die alten
   #tab-content-mein-tag und #tab-content-projekte Spezial-Regeln bleiben
   oben unveraendert (gleiche Eigenschaften). Hier ergaenzen wir die anderen
   Sections, die heute keinen Spezial-Override haben.
   2026-05-01: Kanban hat ein eigenes horizontales Lane-Layout statt .lod-
   section, braucht aber ebenso padding:0 + overflow:hidden, damit das interne
   .app-page > .app-content > .app-board ihre flex-1-Hoehen-Chain korrekt
   ableiten koennen. Default .tab-content-Padding (var(--space-6)) hatte die
   Hoehen-Chain auf Mobile kaputtgemacht und vertikalen Scroll in den Spalten
   verhindert. */
#tab-content-anfragen,
#tab-content-vertrieb,
#tab-content-firmen,
#tab-content-kontingente,
#tab-content-abrechnung,
#tab-content-personal,
#tab-content-wissen,
#tab-content-kanban {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}

/* Profile-Dropdown wurde wurde nach components/popups/topbar-dropdowns.css extrahiert. */

/* ── SW Update-Banner ─────────────────────────────────────── */
.sw-update-banner {
  position: absolute;
  left: 0;
  right: 0;
  z-index: var(--z-modal-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  background: var(--brand-default);
  color: var(--brand-text-on);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: var(--fw-medium);
  box-shadow: var(--shadow-8);
}
.sw-update-banner-text { flex: 1; text-align: center; }
.sw-update-btn {
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--brand-text-on);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--brand-text-on);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  white-space: nowrap;
}
.sw-update-btn:hover { background: rgba(255, 255, 255, 0.15); }
.sw-update-close {
  border: none;
  background: none;
  color: var(--brand-text-on);
  cursor: pointer;
  padding: var(--space-1);
  line-height: 1;
  font-size: var(--font-size-lg);
  opacity: 0.8;
}
.sw-update-close:hover { opacity: 1; }

@media (max-width: 999px) {
  .sw-update-banner { font-size: var(--fs-badge); padding: var(--space-2) var(--space-3); gap: var(--space-2); }
}
@media (max-width: 599px) {
  .sw-update-banner { font-size: var(--fs-badge); padding: var(--space-2) var(--space-3); gap: var(--space-2); }
}

/* -- Responsive: Tablet (layout) -------------------------- */
@media (max-width: 999px) {
  .tab-content { padding: var(--space-3); }
}

/* ── Burger-Button (Desktop/Tablet versteckt) ──────────── */
.topbar-burger { display: none; }

/* ── Mobile Navigation Drawer ──────────────────────────── */
.mobile-nav-overlay {
  position: fixed;
  inset: 0;
  background: var(--lod-scrim);  /* Scrim-SSOT (tokens.css) */
  z-index: var(--z-bm-overlay);
  opacity: 0;
  transition: opacity var(--duration-normal, 200ms) var(--ease-default, ease);
  pointer-events: none;
}
.mobile-nav-overlay.open { opacity: 1; pointer-events: auto; }
.mobile-nav-overlay.hidden { display: none; }

.mobile-nav-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 280px;
  max-width: 80vw;
  background: var(--color-surface);
  z-index: var(--z-bm-modal);
  box-shadow: var(--shadow-64);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--duration-normal, 200ms) var(--ease-default, ease);
  padding-top: env(safe-area-inset-top, 0px);
  overscroll-behavior: contain;
}
.mobile-nav-drawer.open { transform: translateX(0); }
.mobile-nav-drawer.hidden { display: none; }

.mobile-nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}
.mobile-nav-title {
  font-size: var(--font-size-base);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
}
.mobile-nav-items { flex: 1; overflow-y: auto; padding: var(--space-2) 0; }

.mobile-nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  font-weight: var(--fw-regular);
  color: var(--color-text);
  /* Routing-SSOT-Sweep 2026-05-07: Item ist <a href> (Strg/Cmd-Klick → neuer Tab).
     UA-Default-Anchor-Underline neutralisieren. */
  text-decoration: none;
  cursor: pointer;
  transition: background var(--duration-fast);
  min-height: 48px;
}
.mobile-nav-item:hover { background: var(--color-bg-subtle); }
.mobile-nav-item:active { background: var(--color-bg-muted); }
.mobile-nav-item.active {
  color: var(--brand-default);
  font-weight: var(--fw-semibold);
  background: var(--brand-light);
  border-right: 3px solid var(--brand-default);
}
.mobile-nav-item .ui-ico img { opacity: 0.6; }
.mobile-nav-item.active .ui-ico img { opacity: 1; filter: brightness(0) saturate(100%) invert(25%) sepia(86%) saturate(2000%) hue-rotate(220deg) brightness(92%); }

/* -- Responsive: Tablet (page-header) ------------------------------ */
@media (max-width: 999px) {
  /* Modul-Label kann auf Tablet gekuerzt werden, Avatar-Username weg */
  #topbar-username { display: none; }
  #topbar-avatar > .avatar {
    width: 26px !important;
    height: 26px !important;
    font-size: 10px !important;
  }
}

/* -- Responsive: Mobile (<600px) -------------------
   Mobile <600px: Rail wird ausgeblendet, Page-Header bleibt dunkelblau
   (1:1 wie die alte Topbar — vermeidet Notch-Farbsprung im PWA-Standalone-
   Modus). Logo + Wortmarke "Central" links, Burger rechts oeffnet den
   Mobile-Nav-Drawer mit allen Tab-Eintraegen.
   Mein-Tag hat seine eigene Bottom-Tab-Bar (in mein-tag.css), die bleibt
   unveraendert.
   ────────────────────────────────────────────────────────────────────────- */
@media (max-width: 599px) {
  /* Rail komplett ausblenden — Burger uebernimmt */
  .nav-rail { display: none; }
  /* App-Frame nimmt volle Breite */
  .app-shell { flex-direction: column; }

  /* ── DARK-THEME (Mobile <600px) ─────────────────────────────────────────
     Notch-Konsistenz im PWA-Standalone-Modus: dunkelblauer Header durchgehend.
     Mirrort die Property-Reihenfolge des Light-Themes oben (Container, btn,
     ui-ico-Filter, user-btn, has-kontext). Wenn dort etwas ergaenzt wird,
     hier mitziehen. */

  /* (1) Container Dark — auf Mobile zurueck auf Flex-Layout (Grid bei <600px
     unnoetig: Title-Spalte versteckt, Subtabs/Primary versteckt — Logo links
     + Header-Actions rechts via `margin-left:auto`). */
  .page-header {
    display: flex;
    grid-template-columns: none;
    background: var(--lod-blue-dark);
    border-bottom: none;
    color: var(--brand-text-on);
    padding-left: var(--space-3);
    padding-right: var(--space-2);
    gap: var(--space-1);
  }
  .page-header-logo-mobile { display: inline-flex; color: var(--brand-text-on); }
  /* Wortmarke "Central" auf Mobile ausblenden: Logo-Icon reicht als Anker.
     Mit Wortmarke + bis zu 7 Header-Buttons (Suche/Aktivitaet/Hinweise/
     Neuigkeiten/Kontext/Avatar/Burger) lag der Mindestbedarf bei ~380-420px
     — auf 360er-Geraeten wurde der Burger aus dem Viewport gedrueckt. */
  .page-header-logo-text { display: none; }
  .page-header-module { display: none; }

  /* (2) topbar-btn Dark */
  .page-header .topbar-btn {
    color: var(--brand-text-on);
  }
  .page-header .topbar-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--brand-text-on);
  }
  .page-header .topbar-btn:active {
    background: rgba(255, 255, 255, 0.08);
  }
  .page-header .topbar-btn:focus-visible {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6);
  }

  /* (3) Icon-Faerbung Dark: weiss invertiert. Override des Light-Filters
     aus dem Hauptblock — `!important` nicht noetig, weil Media-Query-Regeln
     bei gleicher Spezifitaet spaeter im Stylesheet stehen. */
  .page-header .topbar-btn > .ui-ico img {
    filter: brightness(0) invert(1);
  }

  /* (4) Avatar-Button Dark: TRANSPARENT (kein grauer Rand wie im Light) —
     Avatar-Bild allein traegt die User-Identitaet. Hover bleibt subtil. */
  .page-header .topbar-user-btn {
    background: transparent;
    color: var(--brand-text-on);
  }
  .page-header .topbar-user-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--brand-text-on);
  }
  .page-header .topbar-user-btn:active {
    background: rgba(255, 255, 255, 0.08);
  }

  /* (5) Persona-aktiv-Indicator Dark: subtile weiss-Tint — wirkt sichtbar
     auf dunkelblauem Background. */
  .page-header .topbar-kontext-btn.has-kontext {
    background: rgba(255, 255, 255, 0.18);
    color: var(--brand-text-on);
  }
  .page-header .topbar-kontext-btn.has-kontext:hover {
    background: rgba(255, 255, 255, 0.25);
  }

  /* (6) Sub-Tab-Slot UND Primary-Slot auf Mobile komplett ausblenden —
 Sektionen mounten den ViewSwitcher per LoD.SectionHeader.set({...}) bzw.
 LoD.PageHeader.setSubTabs(el, { mobileMount: 'toolbar' }) stattdessen in
 ihre Section-Toolbar. SectionHeader verschiebt den Primary-Button
 analog in den `mobilePrimarySlot` der Toolbar. Das `display:none` hier
 ist Sicherheitsnetz — falls der JS-Listener verzoegert greift, sehen
 User keine Buttons im Dark-Header. */
  .page-header-subtabs { display: none; }
  .page-header-primary { display: none; }

  #topbar-username { display: none; }
  #topbar-user { padding: var(--space-1); }
  #topbar-avatar > .avatar {
    width: 26px !important;
    height: 26px !important;
    font-size: 10px !important;
  }

  /* Burger-Button sichtbar (war auf Desktop/Tablet versteckt) */
  .topbar-burger { display: inline-flex; }

  /* Page-Header-Actions: gleichmaessige Abstaende */
  .page-header-actions { gap: var(--space-1); }

  /* "Zu genehmigen"-Icon aktiv → potenziell 8. Topbar-Icon (Vorgesetzte/
     Management sehen gleichzeitig den Kontext-Button). Der 7-Icon-Grenzfall auf
     360px (Kommentar unten) kippt sonst in Überlauf: Gap enger ziehen, damit
     auch 8 Icons auf 360px-Viewports passen — Touch-Targets bleiben 36px, nur
     der Zwischenraum schrumpft von 4px auf 2px. Rein reaktiv über das
     hidden-Attribut des Wrappers, kein JS. */
  .page-header-actions:has(#genehmigungen-wrap:not([hidden])) { gap: var(--space-xxs); }

  /* Page-Header-Buttons: 36px Breite (App-Minimum fuer Touch-Targets) bei
     44px Hoehe — 40px Breite sprengte mit 7 Buttons die 360px-Viewports. */
  .topbar-btn { min-width: 36px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  #topbar-user { min-width: 44px; min-height: 44px; justify-content: center; }

  /* Badge-Position: weiter nach unten/innen, weg von Notch-Bereich */
  #notifications-badge, #activity-badge, #genehmigungen-badge { top: 6px; right: 4px; }

  /* Tab-Content: Seitenpadding entfernen — Sections haben eigenes Padding */
  .tab-content { padding: 0; padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 20px); }
}