/* ==========================================================================
   navbar_extras.css — CD-A3b (18.09.2026)
   Ersetzt die statischen style="-Attribute der Navbar-Familie (navbar.tpl,
   mega/cms/blog-dropdown.tpl) durch navx-*-Klassen — Werte 1:1, unlayered
   (CD-A3b-Muster). Die Reading-Progress-Bar behält width:0% als Klassen-
   Startwert: reading-progress.js animiert per Inline style.width — Inline
   schlägt Klasse, Verhalten identisch.
   ========================================================================== */
.navx-brand-text { max-width: min(150px, 40vw); }
.navx-progress {
  position: absolute; bottom: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, #f5a623, #06b6d4);
  z-index: 1050; transition: width 0.08s linear; pointer-events: none;
  box-shadow: 0 0 8px rgba(6, 182, 212, 0.6);
}
.navx-menu-mega { width: min(680px, 95vw); max-width: 95vw; background: rgba(15, 23, 42, 0.96); backdrop-filter: blur(20px); }
.navx-menu-blog { min-width: 240px; background: rgba(15, 23, 42, 0.96); backdrop-filter: blur(20px); }
.navx-menu-cms { min-width: 220px; background: rgba(15, 23, 42, 0.96); backdrop-filter: blur(20px); }
.navx-link-max { max-width: 200px; }

/* CD-A3b (18.09.2026, Welle 18): utilities.tpl (10 style=) + offcanvas.tpl (4)
   — Werte 1:1. nvu-badge-hide: display:none als Klassenwert, JS toggt per
   Inline style.display (Inline schlägt Klasse — Muster wie mbn-badge-bm). */
.nvu-btn-44 { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
.nvu-btn-min44 { min-width: 44px; min-height: 44px; }
.nvu-badge-hide { display: none; font-size: 0.65rem; }
.nvu-menu-360 { min-width: min(92vw, 360px); }
.nvu-list-scroll { max-height: 320px; overflow-y: auto; }
.nvu-toggler-icon { width: 1.1em; height: 1.1em; }
.nvo-shell { width: min(380px, 86vw); }
.nvo-tree-scroll { max-height: calc(100vh - 280px); max-height: calc(100dvh - 280px); }
.nvo-link-trunc { max-width: 190px; }
.nvo-modal-860 { max-width: 860px; }

/* ==========================================================================
   navx-tree — DH1 (20.09.2026): Desktop-Baumansicht im Themenkatalog-
   Mega-Dropdown (layout/navbar/mega-dropdown.tpl + js/mega-tree.js).
   Vertrag:
   - Progressive Enhancement: ohne JS bleibt der Baum vollständig entfaltet
     (kein hidden im Markup); mega-tree.js kollabiert Ebenen 3+ beim Init
     und spiegelt den Zustand in aria-expanded + .is-open (Chevron-Drehung).
   - .navx-tree-hide = Suchfilter-Ausblendung (nur mit aktivem Term gesetzt).
   - DH1b THEME-FAHIG: theme_3.css erzwingt im Light-Theme auf JEDEM
     .dropdown-menu background:#fff !important (Selektor-Stärke (0,2,1)) —
     die alte dropdown-menu-dark/text-white-Kombi stand weiß-auf-weiß.
     Gegenwehr: alle Farben laufen über --navx-*-Tokens dieser Sektion;
     der Light-Block setzt sie mit (0,3,1) und gewinnt damit jedes
     !important-Duell gegen theme_3 (css-cascade-5-Lektion). Der harte
     Light-Hintergrund selbst kommt weiterhin aus theme_3 (#ffffff) —
     identisch mit --navx-surface im Light.
   ========================================================================== */
.navx-tree-pane {
  --navx-fg: #f8fafc;
  --navx-fg-muted: #94a3b8;
  --navx-surface: rgba(15, 23, 42, 0.96);
  --navx-card: rgba(15, 23, 42, 0.6);
  --navx-card-border: rgba(148, 163, 184, 0.2);
  --navx-border: rgba(173, 181, 189, 0.4);
  --navx-rule: rgba(148, 163, 184, 0.28);
  --navx-hover-bg: rgba(148, 163, 184, 0.12);
  --navx-badge-bg: rgba(148, 163, 184, 0.18);
  --navx-warn: #fbbf24;
  width: min(880px, 94vw);
  background: var(--navx-surface);
  color: var(--navx-fg);
  border-color: var(--navx-border);
}
html[data-bs-theme="light"] .dropdown-menu.navx-tree-pane {
  --navx-fg: #0f172a;
  --navx-fg-muted: #475569;
  --navx-surface: #ffffff;
  --navx-card: #f1f5f9;
  --navx-card-border: rgba(15, 23, 42, 0.12);
  --navx-border: #cbd5e1;
  --navx-rule: rgba(15, 23, 42, 0.14);
  --navx-hover-bg: rgba(15, 23, 42, 0.06);
  --navx-badge-bg: #e2e8f0;
  --navx-warn: #b45309;
}
.navx-tree-title { color: var(--navx-fg); }
.navx-tree-muted { color: var(--navx-fg-muted); }
.navx-tree-dyncol { color: var(--navx-fg-muted); }
.navx-tree-dyncol:hover { color: var(--navx-fg); }
.navx-tree-rule { border-color: var(--navx-rule) !important; }
.navx-tree-badge { background: var(--navx-badge-bg); color: var(--navx-fg-muted); }
.navx-tree-empty { color: var(--navx-warn); }
.navx-tree-search { max-width: 210px; }
.navx-tree-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.75rem;
  align-items: start;
  max-height: min(62vh, 600px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding: 1px 2px 2px;
}
.navx-tree-card {
  min-width: 0;
  padding: 0.75rem;
  border-radius: 0.75rem;
  background: var(--navx-card);
  border: 1px solid var(--navx-card-border);
}
.navx-tree-card > a { min-width: 0; }
.navx-tree-list, .navx-tree-sub { list-style: none; margin: 0; padding: 0; }
.navx-tree-sub {
  margin-left: 0.55rem;
  padding-left: 0.75rem;
  border-left: 1px solid var(--navx-rule);
}
.navx-tree-row {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.1rem 0;
  min-height: 24px;
}
.navx-tree-row .navx-tree-link { flex: 1 1 auto; min-width: 0; }
.navx-tree-count { flex: 0 0 auto; font-size: 0.7rem; opacity: 0.85; white-space: nowrap; color: var(--navx-fg-muted); }
.navx-tree-toggle {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 4px;
  color: var(--navx-fg-muted);
  cursor: pointer;
}
.navx-tree-toggle:hover { color: var(--navx-fg); background: var(--navx-hover-bg); }
.navx-tree-toggle:focus-visible { outline: 2px solid rgba(6, 182, 212, 0.9); outline-offset: 1px; }
.navx-chev { font-size: 0.7rem; line-height: 1; transition: transform 0.15s ease; }
.navx-tree-node.is-open > .navx-tree-row .navx-chev { transform: rotate(90deg); }
.navx-tree-leafdot { flex: 0 0 24px; display: inline-flex; justify-content: center; }
.navx-tree-leafdot::before {
  content: "";
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--navx-rule);
}
.navx-tree-hide { display: none !important; }
.navx-tree-chip:hover { color: var(--navx-fg); }
@media (prefers-reduced-motion: reduce) { .navx-chev { transition: none; } }

/* DH1-Rest (20.09.2026): Notification-Center-Pane (utilities.tpl) — dasselbe
   theme_3-Light-Muster wie das Themenkatalog-Pane: Der Custom-Header erbt
   die Dual-Dark-Menütextfarbe (#dee2e6) auf weißem Grund, der Alle-lesen-
   Button in text-info kommt auf ~2:1. Überschreibung über die Pane-Klasse
   (nvu-menu-360 — seit DH1-Rest echte Klasse, vorher totes Attribut, die
   min-width-Regel oben matchete nie). */
html[data-bs-theme="light"] .dropdown-menu.nvu-menu-360 { --bs-dropdown-color: #1e293b; }
html[data-bs-theme="light"] .dropdown-menu.nvu-menu-360 .text-info { color: #0e7490 !important; }