/* ==========================================================================
   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/DH2 (20.09.2026): Desktop-Themenkatalog im Mega-Dropdown
   (layout/navbar/mega-dropdown.tpl + js/mega-tree.js).
   DH1: Baumansicht, Progressive Enhancement (kein hidden im Markup —
   mega-tree.js kollabiert Ebenen 3+ beim Init, html.navx-tree-js-Gate),
   aria-expanded-Spiegel + .is-open-Chevron-Drehung.
   DH2: Temu-Stil-Zweispalter — .navx-tumu-rail (Katalog-Nav links) schaltet
   über mega-tree.js [data-navx-preview]-Panels rechts (.navx-tumu-stage);
   roving tabindex + ↓↑→←-Steuerung.
   DH2b Light-Heilung: theme_3.css erzwingt im Light-Theme background:#fff
   !important (0,2,1) auf jedem .dropdown-menu — Farben laufen über --navx-*
   -Tokens, der Light-Block setzt sie mit (0,3,1) und gewinnt so jedes
   !important-Duell (css-cascade-5-Lektion). Vorschau-Titel explizit stark
   (navx-preview-title), Zeilen bleiben muted — klare Hierarchie statt
   Grau-in-Grau.
   ========================================================================== */
.navx-tree-pane {
  --navx-fg: #f8fafc;
  --navx-fg-muted: #94a3b8;
  --navx-fg-strong: #e2e8f0;
  --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.14);
  --navx-active-bg: rgba(6, 182, 212, 0.16);
  --navx-active-edge: #06b6d4;
  --navx-badge-bg: rgba(148, 163, 184, 0.18);
  --navx-warn: #fbbf24;
  width: min(900px, 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-fg-strong: #0f172a;
  --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-active-bg: rgba(6, 182, 212, 0.12);
  --navx-active-edge: #0891b2;
  --navx-badge-bg: #e2e8f0;
  --navx-warn: #b45309;
}
/* Light-Definition für Suchfeld & kbd-Chips (weiß-auf-weiß vermeiden) */
html[data-bs-theme="light"] .dropdown-menu.navx-tree-pane .navx-tree-search {
  background-color: #f8fafc;
}
.navx-tree-pane kbd {
  display: inline-block;
  min-width: 1.35em;
  padding: 0.05rem 0.3rem;
  margin: 0 0.1rem;
  font-size: 0.7rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  text-align: center;
  color: var(--navx-fg);
  background: var(--navx-badge-bg);
  border: 1px solid var(--navx-rule);
  border-bottom-width: 2px;
  border-radius: 4px;
}
.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; }

/* ── Temu-Zweispalter: Rail (links) + Stage (rechts) ─────────────────── */
.navx-tumu-wrap { min-height: 480px; }
.navx-tumu-rail {
  flex: 0 0 265px;
  max-width: 265px;
  max-height: min(64vh, 620px);
  overflow-y: auto;
  overscroll-behavior: contain;
  border-right: 1px solid var(--navx-rule);
  padding: 0.5rem 0.375rem;
}
.navx-rail-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.42rem 0.6rem;
  border-radius: 0.5rem;
  color: var(--navx-fg-strong);
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 600;
  position: relative;
}
.navx-rail-item + .navx-rail-item { margin-top: 1px; }
.navx-rail-item:hover { background: var(--navx-hover-bg); color: var(--navx-fg); }
.navx-rail-item.is-active { background: var(--navx-active-bg); color: var(--navx-fg); }
.navx-rail-item.is-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 15%;
  bottom: 15%;
  width: 3px;
  border-radius: 2px;
  background: var(--navx-active-edge);
}
.navx-rail-item:focus-visible {
  outline: 2px solid rgba(6, 182, 212, 0.9);
  outline-offset: -2px;
}
.navx-rail-ic { flex: 0 0 auto; font-size: 0.95rem; line-height: 1; }
.navx-rail-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.navx-rail-count { flex: 0 0 auto; font-size: 0.68rem; color: var(--navx-fg-muted); opacity: 0.9; }
.navx-rail-chev { flex: 0 0 auto; font-size: 0.65rem; color: var(--navx-fg-muted); }
.navx-tumu-stage { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.navx-preview { display: flex; flex-direction: column; min-height: 0; }
.navx-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.7rem 1rem 0.6rem;
  border-bottom: 1px solid var(--navx-rule);
}
.navx-preview-title { color: var(--navx-fg-strong); text-decoration: none; font-size: 0.95rem; display: inline-flex; align-items: center; }
.navx-preview-title:hover { color: var(--navx-fg); }
.navx-topics { padding: 0.6rem 1rem 0.35rem; border-bottom: 1px solid var(--navx-rule); }
.navx-topics-row { margin-top: 0.4rem; }
.navx-topic-chip:hover { color: var(--navx-fg); }
.navx-preview-scroll {
  flex: 1 1 auto;
  min-height: 0;
  max-height: min(56vh, 560px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding: 0.6rem 1rem 0.75rem;
}

/* ── Teilbaum-Zeilen (Ebenen 3+) ─────────────────────────────────────── */
.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.12rem 0;
  min-height: 24px;
}
.navx-tree-row .navx-tree-link { flex: 1 1 auto; min-width: 0; padding: 0.08rem 0.25rem; border-radius: 0.3rem; }
.navx-tree-row .navx-tree-link:focus-visible {
  outline: 2px solid rgba(6, 182, 212, 0.9);
  outline-offset: -1px;
}
.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; }
@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; }