/* Dark-Theme für Menü-Dropdown (Desktop) und Mobiles Flyout - 2026-07-20, auf Wunsch von Dr. Gellner. Vorher natives, unverändertes Avada-Styling (weißer Hintergrund, dunkle Schrift #141617) - Stilbruch mit dem sonst durchgängig dunklen Ember-Farbschema der Seite (siehe Docker/color-schemes/WECHSEL.md). Verwendet dieselbe Palette wie der Rest des Child-Themes: Surface (Panel-Hintergrund): #1A1816 Surface Alt (Hover/aktiv): #242120 Untermenü-Ebene (leicht dunkler): #141210 Text Primär: #EDE8E3 Text Sekundär (Platzhalter): #B8A99A Akzent (Hover/aktiv/Fokus): #FF6D00 Border/Trennlinie: #2A2825 Kontrastwerte gegen WCAG 2.1 AA geprüft (Normaltext braucht 4.5:1, UI-Komponenten/große Schrift 3:1): Text Primär auf Surface: 14.55:1 Akzent auf Surface: 6.27:1 Text Sekundär auf Surface: 7.74:1 Text Primär auf Surface Alt: 12.60:1 Akzent auf Surface Alt: 5.43:1 Alle Werte liegen deutlich über der Anforderung, siehe Berechnung mit der Standard-WCAG-Relativluminanz-Formel. !important auf den meisten Deklarationen nötig - etabliertes Muster in diesem Child-Theme (siehe drg-header-secondary.css, Durchgang 46): Avadas eigene dynamische CSS-Ausgabe für Menü-Theme-Optionen lädt im NACH diesem Stylesheet und gewinnt sonst bei gleicher Selektor-Spezifität durch spätere Ladeposition. Tap-Target-Größe im Mobile-Flyout auf min. 48px Höhe angehoben (Google Lighthouse "Tap Targets"-Audit empfiehlt 48x48px, WCAG 2.5.5 verlangt mind. 44x44px als AAA-Kriterium) - vorher 42px. Fokus-Sichtbarkeit: eigener :focus-visible-Ring in Akzentfarbe ergänzt (WCAG 2.4.7) - Avadas Default-Fokusstil war auf hellem Hintergrund ausgelegt und auf dem neuen dunklen Panel kaum sichtbar. :focus-visible statt :focus verwendet, damit der Ring nur bei Tastaturnavigation erscheint, nicht bei jedem Mausklick (kein optisches "Flackern" für Maus-/Touch-Nutzer, aber weiterhin normkonform für Tastatur-Nutzer). */ /* ===== Desktop-Dropdown ("Themen"-Untermenü) ===== */ .fusion-main-menu .sub-menu { background-color: #1A1816 !important; border: 1px solid #2A2825 !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55) !important; } .fusion-main-menu .sub-menu a { color: #EDE8E3 !important; transition: color 0.2s ease, background-color 0.2s ease; } .fusion-main-menu .sub-menu li:hover > a { color: #FF6D00 !important; background-color: rgba(255, 109, 0, 0.1) !important; } .fusion-main-menu .sub-menu a:focus-visible { color: #FF6D00 !important; background-color: rgba(255, 109, 0, 0.1) !important; outline: 2px solid #FF6D00; outline-offset: -2px; } /* 2026-07-20, Nachbesserung: Avada gibt dem aktuell aktiven Untermenü- Eintrag (".current_page_item"/".current-menu-item", z.B. "Cybersecurity" waehrend man auf /cybersecurity/ ist) nativ einen fast weissen Hintergrund (rgb(242,243,245)), unabhaengig von Hover - kombiniert mit dem hellen Standardtext (#EDE8E3) praktisch unlesbar (Kontrast ~1:1). Von Dr. Gellner zurueckgemeldet ("nahezu weisse Flaeche, greller Text, hebt sich nicht ab"). Eigener dauerhafter Aktiv-Zustand ergaenzt, klar unterscheidbar vom (staerkeren) Hover-Zustand, damit "aktuelle Seite" weiterhin erkennbar bleibt, aber lesbar. */ .fusion-main-menu .sub-menu li.current_page_item > a, .fusion-main-menu .sub-menu li.current-menu-item > a { background-color: rgba(255, 109, 0, 0.16) !important; color: #FF6D00 !important; } .fusion-main-menu .sub-menu li.current_page_item:hover > a, .fusion-main-menu .sub-menu li.current-menu-item:hover > a { /* 20% statt eines staerkeren Werts wie beim normalen Hover (0.26/0.1) - bei Text und Hintergrund in derselben Akzentfarbe sinkt der Kontrast mit steigendem Alpha-Wert (beide naehern sich demselben Farbton an). 20% ist das Maximum, das noch 4.5:1 (WCAG AA) haelt - siehe Kontrast-Sweep in der Session-Doku. */ background-color: rgba(255, 109, 0, 0.2) !important; } /* ===== Mobiles Menü-Flyout ===== */ .fusion-mobile-selector { background-color: #1A1816 !important; color: #EDE8E3 !important; border: 1px solid #2A2825 !important; } .fusion-mobile-nav-holder .fusion-mobile-menu { border-color: #2A2825 !important; } .fusion-mobile-selector:focus-visible { outline: 2px solid #FF6D00; outline-offset: -2px; } .fusion-mobile-selector .fusion-selector-down { color: #EDE8E3 !important; } .fusion-mobile-nav-holder .fusion-bar-highlight { background-color: #1A1816 !important; color: #EDE8E3 !important; border-bottom: 1px solid #2A2825 !important; min-height: 48px !important; transition: color 0.2s ease, background-color 0.2s ease; } .fusion-mobile-nav-holder .fusion-bar-highlight:hover, .fusion-mobile-nav-holder li.fusion-mobile-current-nav-item > .fusion-bar-highlight { background-color: #242120 !important; color: #FF6D00 !important; } .fusion-mobile-nav-holder .fusion-bar-highlight:focus-visible { background-color: #242120 !important; color: #FF6D00 !important; outline: 2px solid #FF6D00; outline-offset: -2px; } /* Untermenü (Themen-Kinder) minimal dunkler abgesetzt, damit die Hierarchie auch ohne die Einrückung allein erkennbar bleibt */ .fusion-mobile-nav-holder .sub-menu .fusion-bar-highlight { background-color: #141210 !important; } .fusion-mobile-nav-holder .sub-menu .fusion-bar-highlight:hover, .fusion-mobile-nav-holder .sub-menu .fusion-bar-highlight:focus-visible { background-color: #242120 !important; } .fusion-open-submenu { color: #EDE8E3 !important; background-color: transparent !important; min-width: 48px !important; min-height: 48px !important; } .fusion-open-submenu:hover, .fusion-open-submenu:focus-visible { color: #FF6D00 !important; } .fusion-open-submenu:focus-visible { outline: 2px solid #FF6D00; outline-offset: -2px; } /* Suchfeld im Mobile-Flyout */ .fusion-mobile-menu-search input.s, .fusion-mobile-menu-search input[type="search"] { background-color: #1A1816 !important; color: #EDE8E3 !important; border: 1px solid #2A2825 !important; } .fusion-mobile-menu-search input.s::placeholder, .fusion-mobile-menu-search input[type="search"]::placeholder { color: #B8A99A !important; opacity: 1; } .fusion-mobile-menu-search input.s:focus-visible, .fusion-mobile-menu-search input[type="search"]:focus-visible { outline: 2px solid #FF6D00; outline-offset: -2px; } @media (prefers-reduced-motion: reduce) { .fusion-main-menu .sub-menu a, .fusion-mobile-nav-holder .fusion-bar-highlight { transition: none; } }