/* * Leftnav Accordion - nur Dev (aam_preview) * Auf/Zu gleiten DOMAINS <-> APP, kein Full-Refresh am Kopf */ #menuRoot { box-sizing: border-box; overflow: visible; } /* * Waehrend Auf/Zu: kein Hover, keine Skin-Transitions (kein Weiss-Flash) */ #menuRoot.is-animating, #menuRoot.is-animating * { pointer-events: none !important; cursor: default !important; } /* Panel-Animation: kein Skin-Flash; Ausnahme: finales is-skin-fade */ #menuRoot.is-animating .leftnav-acc-section:not(.is-skin-fade), #menuRoot.is-animating .leftnav-acc-section:not(.is-skin-fade) > .domainsnav-head, #menuRoot.is-animating .leftnav-acc-section:not(.is-skin-fade) > a.domainsnav-head, #menuRoot.is-animating .leftnav-acc-section:not(.is-skin-fade) > .leftnav-app-toggle, #menuRoot.is-animating .leftnav-acc-section:not(.is-skin-fade) .domainsnav-head-count, #menuRoot.is-animating .leftnav-acc-section:not(.is-skin-fade) .domainsnav-head-text small, #menuRoot.is-animating .leftnav-acc-section:not(.is-skin-fade) .domainsnav-head-text strong, #menuRoot.is-animating .leftnav-acc-section:not(.is-skin-fade) .appnav-preview-count, #menuRoot.is-animating .leftnav-acc-section:not(.is-skin-fade) .appnav-preview-heading small, #menuRoot.is-animating .leftnav-acc-section:not(.is-skin-fade) .appnav-preview-heading strong { transition: none !important; } /* Finales Zurueck auf inaktiv: weich ueberblenden */ #menuRoot .leftnav-acc-section.is-skin-fade, #menuRoot .leftnav-acc-section.is-skin-fade > .domainsnav-head, #menuRoot .leftnav-acc-section.is-skin-fade > a.domainsnav-head, #menuRoot .leftnav-acc-section.is-skin-fade > .leftnav-app-toggle, #menuRoot .leftnav-acc-section.is-skin-fade > .appnav-preview-head { transition: background-color 0.38s cubic-bezier(0.33, 0, 0.2, 1) !important, background 0.38s cubic-bezier(0.33, 0, 0.2, 1) !important, color 0.38s cubic-bezier(0.33, 0, 0.2, 1) !important, border-color 0.38s cubic-bezier(0.33, 0, 0.2, 1) !important, box-shadow 0.38s cubic-bezier(0.33, 0, 0.2, 1) !important; } #menuRoot .leftnav-acc-section.is-skin-fade .domainsnav-head-count, #menuRoot .leftnav-acc-section.is-skin-fade .domainsnav-head-text small, #menuRoot .leftnav-acc-section.is-skin-fade .domainsnav-head-text strong, #menuRoot .leftnav-acc-section.is-skin-fade .appnav-preview-count, #menuRoot .leftnav-acc-section.is-skin-fade .leftnav-app-count, #menuRoot .leftnav-acc-section.is-skin-fade .appnav-preview-heading small, #menuRoot .leftnav-acc-section.is-skin-fade .appnav-preview-heading strong { transition: color 0.38s cubic-bezier(0.33, 0, 0.2, 1) !important, opacity 0.38s cubic-bezier(0.33, 0, 0.2, 1) !important, text-shadow 0.38s cubic-bezier(0.33, 0, 0.2, 1) !important, -webkit-text-fill-color 0.38s cubic-bezier(0.33, 0, 0.2, 1) !important; } /* * is-leaving: alte Kachel bleibt OPTISCH aktiv (rot/gelb) waehrend Panel zu * — auch wenn is-open spaeter entfernt wuerde */ #menuRoot .leftnav-acc-section.is-leaving { background: transparent !important; background-image: none !important; border-top-color: transparent !important; border-bottom-color: transparent !important; } #menuRoot .leftnav-acc-section.is-leaving > .domainsnav-head, #menuRoot .leftnav-acc-section.is-leaving > a.domainsnav-head, #menuRoot .leftnav-acc-section.is-leaving > .leftnav-app-toggle, #menuRoot .leftnav-acc-section.is-leaving > .appnav-preview-head { color: #ffad21 !important; background: linear-gradient( to bottom, #960000 0%, #6d0000 52%, #500000 100% ) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -7px 12px rgba(35, 0, 0, 0.34) !important; border-bottom: 1px solid #310000 !important; } #menuRoot .leftnav-acc-section.is-leaving .domainsnav-head-count, #menuRoot .leftnav-acc-section.is-leaving .appnav-preview-count, #menuRoot .leftnav-acc-section.is-leaving .leftnav-app-count { color: #ffad21 !important; text-shadow: 0 0 4px rgba(255, 160, 0, 0.4) !important; } #menuRoot .leftnav-acc-section.is-leaving .domainsnav-head-text small, #menuRoot .leftnav-acc-section.is-leaving .appnav-preview-heading small { color: #ffad21 !important; opacity: 0.9 !important; text-shadow: none !important; } #menuRoot .leftnav-acc-section.is-leaving .domainsnav-head-text strong, #menuRoot .leftnav-acc-section.is-leaving .domainsnav-head-text strong.warengruppe, #menuRoot .leftnav-acc-section.is-leaving .appnav-preview-heading strong { color: #ffad21 !important; -webkit-text-fill-color: #ffad21 !important; text-shadow: 0 1px 0 rgba(255, 215, 90, 0.28), 0 0 6px rgba(255, 120, 0, 0.2) !important; } #menuRoot .leftnav-acc-section { box-sizing: border-box; margin: 0 0 10px 0; } #menuRoot .leftnav-acc-section .appnav-preview-head[data-leftnav-toggle], #menuRoot .leftnav-acc-section .domainsnav-head[data-leftnav-toggle] { cursor: pointer; } /* * Panel-Gleiten: Animation steuert leftnav-accordion.js (scrollHeight). * CSS nur Basis — keine harten max-height-Spruenge (die ruckeln). */ #menuRoot .leftnav-acc-section > .leftnav-acc-panel { /* Offen: Layout von style.css / domains-nav */ will-change: max-height, opacity; } #menuRoot .leftnav-acc-section:not(.is-open) > .leftnav-acc-panel { pointer-events: none; overflow: hidden; } /* Geschlossen / locked: nie wieder voll sichtbar (Flash nach clearAnim) */ #menuRoot .leftnav-acc-panel[hidden], #menuRoot .leftnav-acc-panel.is-locked-closed { display: none !important; max-height: 0 !important; height: 0 !important; opacity: 0 !important; overflow: hidden !important; visibility: hidden !important; pointer-events: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; } #menuRoot .leftnav-acc-section.is-open:not(.is-leaving) > .leftnav-acc-panel:not([hidden]):not(.is-locked-closed) { pointer-events: auto; } #menuRoot .leftnav-acc-section.is-leaving > .leftnav-acc-panel { pointer-events: none !important; overflow: hidden !important; } /* * Klick = sofort .is-open (Struktur). * Hover → leuchtenderes Active: Farbe/Schatten ~0.3s soft. * Panel: weiter JS-Gleiten. */ #menuRoot { --leftnav-glow-ms: 300ms; --leftnav-glow-ease: cubic-bezier(0.33, 0, 0.2, 1); } #menuRoot .leftnav-acc-section, #menuRoot .leftnav-acc-section > .domainsnav-head, #menuRoot .leftnav-acc-section > a.domainsnav-head, #menuRoot .leftnav-acc-section > .leftnav-app-toggle, #menuRoot .leftnav-acc-section > .appnav-preview-head { transition: background-color var(--leftnav-glow-ms) var(--leftnav-glow-ease), background var(--leftnav-glow-ms) var(--leftnav-glow-ease), color var(--leftnav-glow-ms) var(--leftnav-glow-ease), border-color var(--leftnav-glow-ms) var(--leftnav-glow-ease), box-shadow var(--leftnav-glow-ms) var(--leftnav-glow-ease); } #menuRoot .leftnav-acc-section .domainsnav-head-count, #menuRoot .leftnav-acc-section .domainsnav-head-text small, #menuRoot .leftnav-acc-section .domainsnav-head-text strong, #menuRoot .leftnav-acc-section .domainsnav-head-text strong.warengruppe, #menuRoot .leftnav-acc-section .appnav-preview-count, #menuRoot .leftnav-acc-section .leftnav-app-count, #menuRoot .leftnav-acc-section .appnav-preview-heading small, #menuRoot .leftnav-acc-section .appnav-preview-heading strong, #menuRoot .leftnav-acc-section .appnav-preview-heading-compact small, #menuRoot .leftnav-acc-section .appnav-preview-heading-compact strong { transition: color var(--leftnav-glow-ms) var(--leftnav-glow-ease), opacity var(--leftnav-glow-ms) var(--leftnav-glow-ease), text-shadow var(--leftnav-glow-ms) var(--leftnav-glow-ease), -webkit-text-fill-color var(--leftnav-glow-ms) var(--leftnav-glow-ease); } /* Geschlossene Hauptkachel: Hover schnell, nicht 300ms */ #menuRoot .leftnav-acc-section:not(.is-open), #menuRoot .leftnav-acc-section:not(.is-open) > .domainsnav-head, #menuRoot .leftnav-acc-section:not(.is-open) > a.domainsnav-head, #menuRoot .leftnav-acc-section:not(.is-open) > .leftnav-app-toggle, #menuRoot .leftnav-acc-section:not(.is-open) > .appnav-preview-head { transition-duration: 70ms; transition-timing-function: ease-out; } #menuRoot .leftnav-acc-section:not(.is-open) .domainsnav-head-count, #menuRoot .leftnav-acc-section:not(.is-open) .domainsnav-head-text small, #menuRoot .leftnav-acc-section:not(.is-open) .domainsnav-head-text strong, #menuRoot .leftnav-acc-section:not(.is-open) .domainsnav-head-text strong.warengruppe, #menuRoot .leftnav-acc-section:not(.is-open) .appnav-preview-count, #menuRoot .leftnav-acc-section:not(.is-open) .leftnav-app-count, #menuRoot .leftnav-acc-section:not(.is-open) .appnav-preview-heading small, #menuRoot .leftnav-acc-section:not(.is-open) .appnav-preview-heading strong, #menuRoot .leftnav-acc-section:not(.is-open) .appnav-preview-heading-compact small, #menuRoot .leftnav-acc-section:not(.is-open) .appnav-preview-heading-compact strong { transition-duration: 70ms; transition-timing-function: ease-out; } /* * APP active LED = gruen wie Domain (nur im Dev-Root) * Schrift/Abstaende/Pfeil unveraendert (style.css / domains-nav) */ #menuRoot .appnav-preview-item.active .domainsnav-led, #menuRoot .appnav-preview-item.active .appnav-preview-led.domainsnav-led, #menuRoot .domainsnav-led.domainsnav-led-on { position: relative; display: block; box-sizing: border-box; width: 11px !important; height: 11px !important; border-radius: 50%; overflow: visible; border: 1px solid #1a4a22 !important; background: radial-gradient( circle at 32% 28%, #2a5a32 0%, #0d2814 50%, #041208 100% ) !important; box-shadow: inset 0 1px 1px rgba(180, 255, 190, 0.18), inset 0 -1px 2px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(0, 40, 10, 0.8), 0 0 4px 1px rgba(40, 255, 90, 0.55), 0 0 10px 2px rgba(20, 220, 70, 0.35), 0 0 16px 3px rgba(0, 180, 50, 0.18) !important; filter: none !important; } #menuRoot .appnav-preview-item:not(.active) .domainsnav-led { width: 9px; height: 9px; border: 0; background: none; box-shadow: none; } #menuRoot .domainsnav-led-core, #menuRoot .domainsnav-led-shine { display: none; pointer-events: none; } #menuRoot .appnav-preview-item.active .domainsnav-led-core { display: block; position: absolute; left: 1px; top: 1px; right: 1px; bottom: 1px; border-radius: 50%; background: radial-gradient( circle at 38% 30%, #e8ffe8 0%, #7dff7a 18%, #22e848 42%, #0aa828 68%, #046818 100% ); box-shadow: inset 0 0 3px rgba(255, 255, 220, 0.65), inset 0 -1px 2px rgba(0, 60, 20, 0.45), 0 0 3px rgba(80, 255, 120, 0.9); } #menuRoot .appnav-preview-item.active .domainsnav-led-shine { display: block; position: absolute; left: 22%; top: 16%; width: 38%; height: 30%; border-radius: 50%; z-index: 2; background: linear-gradient( to bottom, rgba(255, 255, 255, 0.78) 0%, rgba(220, 255, 220, 0.35) 45%, rgba(255, 255, 255, 0) 100% ); opacity: 0.95; } /* Orange Active-LED aus style.css im Dev-Root unterdruecken */ #menuRoot .appnav-preview-item.active .appnav-preview-led.domainsnav-led { border-color: #1a4a22; } /* * ============================================================ * EINE Geometrie fuer auf/zu — nur Farben/Chrome wechseln * Domains-Kopf = APP-Kopf-Metrik (70px), kein Springen * ============================================================ */ /* --- Shell inaktiv: weiss (set_select), aktiv: style.css shell --- */ #menuRoot .leftnav-acc-section:not(.is-open) { width: 164px; margin: 0 0 5px -4px; padding: 0; overflow: hidden; border: 0; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; border-radius: 5px; background-image: linear-gradient(to left, white 0%, #eeeeee 80%); background-color: transparent; box-shadow: none !important; filter: none !important; } #menuRoot .leftnav-acc-section:not(.is-open):not(:has(.appnav-preview-item.active)):hover { background-image: none; background-color: #550000; border-top-color: #fff; border-bottom-color: #fff; } #menuRoot .leftnav-acc-section.is-open { width: 164px; margin: 0 0 5px -4px; box-sizing: border-box; } /* ---------- DOMAINS: feste Kopf-Metrik (immer, auf + zu) ---------- */ #menuRoot .leftnav-acc-section[data-leftnav-section="domains"] > .domainsnav-head, #menuRoot .leftnav-acc-section[data-leftnav-section="domains"] > a.domainsnav-head, #menuRoot .leftnav-acc-section[data-leftnav-section="domains"] > .appnav-preview-head { position: relative !important; display: block !important; box-sizing: border-box !important; width: 100% !important; height: 70px !important; min-height: 70px !important; max-height: 70px !important; margin: 0 !important; padding: 8px 6px 6px 6px !important; overflow: hidden !important; border: 0 !important; border-radius: 0 !important; text-decoration: none !important; } #menuRoot .leftnav-acc-section[data-leftnav-section="domains"] .domainsnav-head-count { position: absolute !important; left: 6px !important; top: 36px !important; bottom: auto !important; float: none !important; display: block !important; width: auto !important; min-width: 18px !important; max-width: 36px !important; height: auto !important; margin: 0 !important; padding: 0 !important; font-size: 9px !important; font-weight: 500 !important; line-height: 1 !important; text-align: left !important; } #menuRoot .leftnav-acc-section[data-leftnav-section="domains"] .domainsnav-head-text { display: block !important; box-sizing: border-box !important; width: 100% !important; margin: 0 !important; padding: 2px 4px 0 24px !important; text-align: left !important; } #menuRoot .leftnav-acc-section[data-leftnav-section="domains"] .domainsnav-head-text small { display: block !important; margin: 0 0 6px 0 !important; padding: 0 !important; font: 500 9px/0.9 Arial, Helvetica, sans-serif !important; letter-spacing: 0.15em !important; white-space: nowrap !important; transform: none !important; } #menuRoot .leftnav-acc-section[data-leftnav-section="domains"] .domainsnav-head-text strong, #menuRoot .leftnav-acc-section[data-leftnav-section="domains"] .domainsnav-head-text strong.warengruppe { display: inline-block !important; margin: 0 !important; padding: 0 !important; font-family: maisp1, Arial, Helvetica, sans-serif !important; font-size: 42px !important; font-weight: bold !important; line-height: 0.95 !important; letter-spacing: 0.01em !important; transform: none !important; } /* Domains ZU: nur Farben (schwarz / blauer Count) */ #menuRoot .leftnav-acc-section[data-leftnav-section="domains"]:not(.is-open) > .domainsnav-head, #menuRoot .leftnav-acc-section[data-leftnav-section="domains"]:not(.is-open) > a.domainsnav-head { background: transparent !important; box-shadow: none !important; color: #000 !important; border-bottom: 0 !important; } #menuRoot .leftnav-acc-section[data-leftnav-section="domains"]:not(.is-open) .domainsnav-head-count { color: #006699 !important; text-shadow: none !important; } #menuRoot .leftnav-acc-section[data-leftnav-section="domains"]:not(.is-open) .domainsnav-head-text small { color: #4a4a4a !important; opacity: 1 !important; text-shadow: none !important; } #menuRoot .leftnav-acc-section[data-leftnav-section="domains"]:not(.is-open) .domainsnav-head-text strong, #menuRoot .leftnav-acc-section[data-leftnav-section="domains"]:not(.is-open) .domainsnav-head-text strong.warengruppe { color: #000 !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) !important; } /* * Domains ZU + Hover: AAM Domain-03-Badge * #174d73 → #003456 → #001b2d, Schrift #ffad21 */ #menuRoot .leftnav-acc-section[data-leftnav-section="domains"]:not(.is-open):not(:has(.appnav-preview-item.active)):hover { background-image: none !important; background: linear-gradient( to bottom, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.06) 18%, rgba(255, 255, 255, 0) 36% ), repeating-linear-gradient( 11deg, transparent 0 22px, rgba(150, 210, 255, 0.025) 22px 23px, transparent 23px 48px ), linear-gradient( 135deg, #174d73 0%, #003456 38%, #002843 70%, #001b2d 100% ) !important; border-top-color: #001f34 !important; border-bottom-color: #001f34 !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.20), inset 0 -1px 0 rgba(0, 20, 35, 0.52), 0 2px 4px rgba(0, 52, 86, 0.24) !important; } #menuRoot .leftnav-acc-section[data-leftnav-section="domains"]:not(.is-open):not(:has(.appnav-preview-item.active)):hover > .domainsnav-head, #menuRoot .leftnav-acc-section[data-leftnav-section="domains"]:not(.is-open):not(:has(.appnav-preview-item.active)):hover > a.domainsnav-head { background: transparent !important; color: #ffb014 !important; box-shadow: none !important; } #menuRoot .leftnav-acc-section[data-leftnav-section="domains"]:not(.is-open):not(:has(.appnav-preview-item.active)):hover .domainsnav-head-count { color: #ffb014 !important; text-shadow: none !important; } #menuRoot .leftnav-acc-section[data-leftnav-section="domains"]:not(.is-open):not(:has(.appnav-preview-item.active)):hover .domainsnav-head-text small { color: #ffb014 !important; opacity: 1 !important; text-shadow: none !important; } #menuRoot .leftnav-acc-section[data-leftnav-section="domains"]:not(.is-open):not(:has(.appnav-preview-item.active)):hover .domainsnav-head-text strong, #menuRoot .leftnav-acc-section[data-leftnav-section="domains"]:not(.is-open):not(:has(.appnav-preview-item.active)):hover .domainsnav-head-text strong.warengruppe { color: #ffb014 !important; -webkit-text-fill-color: #ffb014 !important; text-shadow: none !important; } /* * Sektion AUF (DOMAINS + APP): gemeinsame Farben #ffad21 * Geometrie je Sektion darunter / in domains-nav */ #menuRoot .leftnav-acc-section.is-open > .domainsnav-head, #menuRoot .leftnav-acc-section.is-open > a.domainsnav-head, #menuRoot .leftnav-acc-section.is-open > .leftnav-app-toggle, #menuRoot .leftnav-acc-section.is-open > .leftnav-app-toggle.appnav-preview-head { color: #ffad21 !important; background: linear-gradient( to bottom, #960000 0%, #6d0000 52%, #500000 100% ) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -7px 12px rgba(35, 0, 0, 0.34) !important; border-bottom: 1px solid #310000 !important; } #menuRoot .leftnav-acc-section.is-open > .domainsnav-head:hover, #menuRoot .leftnav-acc-section.is-open > a.domainsnav-head:hover, #menuRoot .leftnav-acc-section.is-open > .leftnav-app-toggle:hover { color: #ffad21 !important; background: linear-gradient( to bottom, #960000 0%, #6d0000 52%, #500000 100% ) !important; } #menuRoot .leftnav-acc-section.is-open .domainsnav-head-count, #menuRoot .leftnav-acc-section.is-open .appnav-preview-count, #menuRoot .leftnav-acc-section.is-open .leftnav-app-count { color: #ffad21 !important; text-shadow: 0 0 4px rgba(255, 160, 0, 0.4) !important; } #menuRoot .leftnav-acc-section.is-open .domainsnav-head-text small, #menuRoot .leftnav-acc-section.is-open .appnav-preview-heading small, #menuRoot .leftnav-acc-section.is-open .appnav-preview-heading-compact small { color: #ffad21 !important; opacity: 0.9 !important; text-shadow: none !important; } #menuRoot .leftnav-acc-section.is-open .domainsnav-head-text strong, #menuRoot .leftnav-acc-section.is-open .domainsnav-head-text strong.warengruppe, #menuRoot .leftnav-acc-section.is-open .appnav-preview-heading strong, #menuRoot .leftnav-acc-section.is-open .appnav-preview-heading-compact strong { color: #ffad21 !important; -webkit-text-fill-color: #ffad21 !important; text-shadow: 0 1px 0 rgba(255, 215, 90, 0.28), 0 0 6px rgba(255, 120, 0, 0.22) !important; } /* ---------- APP: feste Kopf-Metrik = appnav-preview-head (70px), immer ---------- */ #menuRoot .leftnav-acc-section[data-leftnav-section="app"] { width: 164px; max-width: 164px; box-sizing: border-box; overflow: hidden; } #menuRoot .leftnav-acc-section[data-leftnav-section="app"] > .leftnav-app-toggle { position: relative !important; display: block !important; box-sizing: border-box !important; width: 100% !important; height: 70px !important; min-height: 70px !important; max-height: 70px !important; margin: 0 !important; padding: 8px 7px 6px 7px !important; overflow: hidden !important; border: 0 !important; border-radius: 0 !important; text-decoration: none !important; } #menuRoot .leftnav-acc-section[data-leftnav-section="app"] .leftnav-app-count, #menuRoot .leftnav-acc-section[data-leftnav-section="app"] .appnav-preview-count { position: absolute !important; left: 8px !important; top: 34px !important; bottom: auto !important; float: none !important; display: block !important; width: 18px !important; height: auto !important; margin: 0 !important; padding: 0 !important; font-size: 9px !important; font-weight: 500 !important; line-height: 1 !important; text-align: left !important; } #menuRoot .leftnav-acc-section[data-leftnav-section="app"] .appnav-preview-heading, #menuRoot .leftnav-acc-section[data-leftnav-section="app"] .appnav-preview-heading-compact { position: relative !important; display: block !important; box-sizing: border-box !important; width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 !important; text-align: center !important; } #menuRoot .leftnav-acc-section[data-leftnav-section="app"] .appnav-preview-heading small, #menuRoot .leftnav-acc-section[data-leftnav-section="app"] .appnav-preview-heading-compact small { display: block !important; margin: 0 0 6px 21px !important; padding: 0 !important; font: 500 8px/1 Arial, Helvetica, sans-serif !important; letter-spacing: 1.22em !important; white-space: nowrap !important; } #menuRoot .leftnav-acc-section[data-leftnav-section="app"] .appnav-preview-heading strong, #menuRoot .leftnav-acc-section[data-leftnav-section="app"] .appnav-preview-heading-compact strong { display: inline-block !important; margin-left: 25px !important; padding: 0 !important; font-family: maisp1, Arial, Helvetica, sans-serif !important; font-size: 35px !important; font-weight: bold !important; line-height: 0.92 !important; letter-spacing: 0.1em !important; transform: scaleX(2) !important; transform-origin: center center !important; } /* APP ZU: nur Farben + weisser Rahmen (Geometrie = aktiv) */ #menuRoot .leftnav-acc-section[data-leftnav-section="app"]:not(.is-open) { background-image: linear-gradient(to left, white 0%, #eeeeee 80%) !important; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; border-radius: 5px; overflow: hidden !important; } #menuRoot .leftnav-acc-section[data-leftnav-section="app"]:not(.is-open) > .leftnav-app-toggle { background: transparent !important; box-shadow: none !important; color: #000 !important; } #menuRoot .leftnav-acc-section[data-leftnav-section="app"]:not(.is-open) .appnav-preview-count, #menuRoot .leftnav-acc-section[data-leftnav-section="app"]:not(.is-open) .leftnav-app-count { color: #c21818 !important; text-shadow: none !important; } /* HOSTING-Label zu — Korrektur live: voll schwarz (User 2026-08-05) */ #menuRoot .leftnav-acc-section[data-leftnav-section="app"]:not(.is-open) .appnav-preview-heading small, #menuRoot .leftnav-acc-section[data-leftnav-section="app"]:not(.is-open) .appnav-preview-heading-compact small { color: rgba(0, 0, 0, 1) !important; opacity: 1 !important; text-shadow: none !important; } #menuRoot .leftnav-acc-section[data-leftnav-section="app"]:not(.is-open) .appnav-preview-heading strong, #menuRoot .leftnav-acc-section[data-leftnav-section="app"]:not(.is-open) .appnav-preview-heading-compact strong { color: #000 !important; -webkit-text-fill-color: #000; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) !important; } /* * APP ZU + Hover: Bereichsfarbe Ruby + #ffad21 */ #menuRoot .leftnav-acc-section[data-leftnav-section="app"]:not(.is-open):not(:has(.appnav-preview-item.active)):hover { background-image: none !important; background: linear-gradient( to bottom, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.05) 18%, rgba(255, 255, 255, 0) 36% ), linear-gradient( to bottom, #960000 0%, #6d0000 52%, #500000 100% ) !important; border-top-color: #310000 !important; border-bottom-color: #310000 !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -7px 12px rgba(35, 0, 0, 0.34) !important; } #menuRoot .leftnav-acc-section[data-leftnav-section="app"]:not(.is-open):not(:has(.appnav-preview-item.active)):hover .appnav-preview-count, #menuRoot .leftnav-acc-section[data-leftnav-section="app"]:not(.is-open):not(:has(.appnav-preview-item.active)):hover .leftnav-app-count { color: #ffad21 !important; text-shadow: 0 0 4px rgba(255, 160, 0, 0.35) !important; } #menuRoot .leftnav-acc-section[data-leftnav-section="app"]:not(.is-open):not(:has(.appnav-preview-item.active)):hover .appnav-preview-heading small, #menuRoot .leftnav-acc-section[data-leftnav-section="app"]:not(.is-open):not(:has(.appnav-preview-item.active)):hover .appnav-preview-heading-compact small { color: #ffad21 !important; opacity: 0.88 !important; text-shadow: none !important; } #menuRoot .leftnav-acc-section[data-leftnav-section="app"]:not(.is-open):not(:has(.appnav-preview-item.active)):hover .appnav-preview-heading strong, #menuRoot .leftnav-acc-section[data-leftnav-section="app"]:not(.is-open):not(:has(.appnav-preview-item.active)):hover .appnav-preview-heading-compact strong { color: #ffad21 !important; -webkit-text-fill-color: #ffad21 !important; text-shadow: 0 1px 0 rgba(255, 215, 90, 0.22), 0 -1px 0 rgba(65, 0, 0, 0.45) !important; } /* * APP offen, Ruhe: weisse Main-Kachel + dezentes Metall 0-100-0 * Ruby nur noch beim geschlossenen Hover. */ #menuRoot .leftnav-acc-section[data-leftnav-section="app"].is-open, #menuRoot .leftnav-acc-section[data-leftnav-section="app"].is-open.appnav-preview-shell { width: 164px; margin: 0 0 5px -4px; padding: 0; overflow: hidden; border: 0 !important; border-top: 1px solid #ccc !important; border-bottom: 1px solid #ccc !important; border-radius: 5px; background: linear-gradient( to bottom, rgba(170, 170, 170, 0) 0%, rgba(170, 170, 170, 0.16) 50%, rgba(170, 170, 170, 0) 100% ), linear-gradient(to left, white 0%, #eeeeee 80%) !important; background-color: #fff !important; box-shadow: none !important; filter: none !important; } #menuRoot .leftnav-acc-section[data-leftnav-section="app"].is-open > .leftnav-app-toggle, #menuRoot .leftnav-acc-section[data-leftnav-section="app"].is-open > .leftnav-app-toggle.appnav-preview-head { color: #000 !important; background: transparent !important; box-shadow: none !important; border: 0 !important; border-bottom: 0 !important; } #menuRoot .leftnav-acc-section[data-leftnav-section="app"].is-open .appnav-preview-count, #menuRoot .leftnav-acc-section[data-leftnav-section="app"].is-open .leftnav-app-count { color: #c21818 !important; text-shadow: none !important; } #menuRoot .leftnav-acc-section[data-leftnav-section="app"].is-open .appnav-preview-heading small, #menuRoot .leftnav-acc-section[data-leftnav-section="app"].is-open .appnav-preview-heading-compact small { color: rgba(0, 0, 0, 1) !important; opacity: 1 !important; text-shadow: none !important; } #menuRoot .leftnav-acc-section[data-leftnav-section="app"].is-open .appnav-preview-heading strong, #menuRoot .leftnav-acc-section[data-leftnav-section="app"].is-open .appnav-preview-heading-compact strong { color: #000 !important; -webkit-text-fill-color: #000 !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) !important; } #menuRoot .leftnav-acc-section[data-leftnav-section="app"].is-open > .leftnav-app-toggle:hover { color: #000 !important; background: transparent !important; } #menuRoot .leftnav-acc-section[data-leftnav-section="app"].is-open > .leftnav-acc-panel, #menuRoot .leftnav-acc-section[data-leftnav-section="app"].is-open > .appnav-preview-list { border-top: 0 !important; background: transparent !important; box-shadow: none !important; } /* * APP offen, kein Subpunkt aktiv: Hover-Look bleibt (Ruby + Gelb). */ #menuRoot .leftnav-acc-section[data-leftnav-section="app"].is-open:not(:has(.appnav-preview-item.active)), #menuRoot .leftnav-acc-section[data-leftnav-section="app"].is-open:not(:has(.appnav-preview-item.active)).appnav-preview-shell { background: linear-gradient( to bottom, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.05) 18%, rgba(255, 255, 255, 0) 36% ) top / 100% 70px no-repeat, linear-gradient( to bottom, #960000 0%, #6d0000 52%, #500000 100% ) top / 100% 70px no-repeat, #500000 !important; border-top-color: #310000 !important; border-bottom-color: #310000 !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22) !important; } #menuRoot .leftnav-acc-section[data-leftnav-section="app"].is-open:not(:has(.appnav-preview-item.active)) > .leftnav-app-toggle, #menuRoot .leftnav-acc-section[data-leftnav-section="app"].is-open:not(:has(.appnav-preview-item.active)) > .leftnav-app-toggle.appnav-preview-head { color: #ffad21 !important; background: transparent !important; } #menuRoot .leftnav-acc-section[data-leftnav-section="app"].is-open:not(:has(.appnav-preview-item.active)) .appnav-preview-count, #menuRoot .leftnav-acc-section[data-leftnav-section="app"].is-open:not(:has(.appnav-preview-item.active)) .leftnav-app-count, #menuRoot .leftnav-acc-section[data-leftnav-section="app"].is-open:not(:has(.appnav-preview-item.active)) .appnav-preview-heading small, #menuRoot .leftnav-acc-section[data-leftnav-section="app"].is-open:not(:has(.appnav-preview-item.active)) .appnav-preview-heading-compact small, #menuRoot .leftnav-acc-section[data-leftnav-section="app"].is-open:not(:has(.appnav-preview-item.active)) .appnav-preview-heading strong, #menuRoot .leftnav-acc-section[data-leftnav-section="app"].is-open:not(:has(.appnav-preview-item.active)) .appnav-preview-heading-compact strong { color: #ffad21 !important; -webkit-text-fill-color: #ffad21 !important; opacity: 0.92 !important; text-shadow: 0 1px 0 rgba(255, 215, 90, 0.22), 0 -1px 0 rgba(65, 0, 0, 0.45) !important; } #menuRoot .leftnav-acc-section[data-leftnav-section="app"].is-leaving > .leftnav-app-toggle, #menuRoot .leftnav-acc-section[data-leftnav-section="app"].is-leaving > .appnav-preview-head { color: #000 !important; background: transparent !important; box-shadow: none !important; border-bottom: 0 !important; } #menuRoot .leftnav-acc-section[data-leftnav-section="app"].is-leaving .appnav-preview-count, #menuRoot .leftnav-acc-section[data-leftnav-section="app"].is-leaving .leftnav-app-count { color: #c21818 !important; text-shadow: none !important; } #menuRoot .leftnav-acc-section[data-leftnav-section="app"].is-leaving .appnav-preview-heading small, #menuRoot .leftnav-acc-section[data-leftnav-section="app"].is-leaving .appnav-preview-heading-compact small { color: #000 !important; opacity: 1 !important; } #menuRoot .leftnav-acc-section[data-leftnav-section="app"].is-leaving .appnav-preview-heading strong, #menuRoot .leftnav-acc-section[data-leftnav-section="app"].is-leaving .appnav-preview-heading-compact strong { color: #000 !important; -webkit-text-fill-color: #000 !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) !important; } /* Shell-Rahmen offen: APP bleibt Rubin-Rahmen aus style.css */ #menuRoot .leftnav-acc-section.is-open.appnav-preview-shell { border-color: #650000; } /* * DOMAINS offen, Ruhe: wie die anderen Main-Kacheln (weiss), * plus sehr dezenter Metall-Verlauf 0-100-0 vertikal. */ #menuRoot .leftnav-acc-section[data-leftnav-section="domains"].is-open, #menuRoot .leftnav-acc-section[data-leftnav-section="domains"].is-open.appnav-preview-shell, #menuRoot .leftnav-acc-section[data-leftnav-section="domains"].is-open.domainsnav-preview-shell { width: 164px; margin: 0 0 5px -4px; padding: 0; overflow: hidden; border: 0 !important; border-top: 1px solid #ccc !important; border-bottom: 1px solid #ccc !important; border-radius: 5px; background: linear-gradient( to bottom, rgba(170, 170, 170, 0) 0%, rgba(170, 170, 170, 0.16) 50%, rgba(170, 170, 170, 0) 100% ), linear-gradient(to left, white 0%, #eeeeee 80%) !important; background-color: #fff !important; box-shadow: none !important; filter: none !important; } #menuRoot .leftnav-acc-section[data-leftnav-section="domains"].is-open > .domainsnav-head, #menuRoot .leftnav-acc-section[data-leftnav-section="domains"].is-open > a.domainsnav-head, #menuRoot .leftnav-acc-section[data-leftnav-section="domains"].is-open > .domainsnav-head.appnav-preview-head, #menuRoot .leftnav-acc-section[data-leftnav-section="domains"].is-open > a.domainsnav-head.appnav-preview-head { color: #000 !important; background: transparent !important; box-shadow: none !important; border: 0 !important; border-bottom: 0 !important; } #menuRoot .leftnav-acc-section[data-leftnav-section="domains"].is-open .domainsnav-head-count { color: #006699 !important; text-shadow: none !important; } #menuRoot .leftnav-acc-section[data-leftnav-section="domains"].is-open .domainsnav-head-text small { color: #333 !important; opacity: 1 !important; text-shadow: none !important; } #menuRoot .leftnav-acc-section[data-leftnav-section="domains"].is-open .domainsnav-head-text strong, #menuRoot .leftnav-acc-section[data-leftnav-section="domains"].is-open .domainsnav-head-text strong.warengruppe { color: #000 !important; -webkit-text-fill-color: #000 !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) !important; } #menuRoot .leftnav-acc-section[data-leftnav-section="domains"].is-open > .domainsnav-head:hover, #menuRoot .leftnav-acc-section[data-leftnav-section="domains"].is-open > a.domainsnav-head:hover { color: #000 !important; background: transparent !important; } #menuRoot .leftnav-acc-section[data-leftnav-section="domains"].is-open > .leftnav-acc-panel, #menuRoot .leftnav-acc-section[data-leftnav-section="domains"].is-open > .appnav-preview-list { border-top: 0 !important; background: transparent !important; box-shadow: none !important; } /* * DOMAINS offen, kein Subpunkt aktiv: AAM-03-Blau + Gelb bleibt. */ #menuRoot .leftnav-acc-section[data-leftnav-section="domains"].is-open:not(:has(.appnav-preview-item.active)), #menuRoot .leftnav-acc-section[data-leftnav-section="domains"].is-open:not(:has(.appnav-preview-item.active)).appnav-preview-shell, #menuRoot .leftnav-acc-section[data-leftnav-section="domains"].is-open:not(:has(.appnav-preview-item.active)).domainsnav-preview-shell { background: linear-gradient( to bottom, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.06) 18%, rgba(255, 255, 255, 0) 36% ) top / 100% 70px no-repeat, repeating-linear-gradient( 11deg, transparent 0 22px, rgba(150, 210, 255, 0.025) 22px 23px, transparent 23px 48px ) top / 100% 70px no-repeat, linear-gradient( 135deg, #174d73 0%, #003456 38%, #002843 70%, #001b2d 100% ) top / 100% 70px no-repeat, #001b2d !important; border-top-color: #001f34 !important; border-bottom-color: #001f34 !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.20) !important; } #menuRoot .leftnav-acc-section[data-leftnav-section="domains"].is-open:not(:has(.appnav-preview-item.active)) > .domainsnav-head, #menuRoot .leftnav-acc-section[data-leftnav-section="domains"].is-open:not(:has(.appnav-preview-item.active)) > a.domainsnav-head { color: #ffb014 !important; background: transparent !important; } #menuRoot .leftnav-acc-section[data-leftnav-section="domains"].is-open:not(:has(.appnav-preview-item.active)) .domainsnav-head-count, #menuRoot .leftnav-acc-section[data-leftnav-section="domains"].is-open:not(:has(.appnav-preview-item.active)) .domainsnav-head-text small, #menuRoot .leftnav-acc-section[data-leftnav-section="domains"].is-open:not(:has(.appnav-preview-item.active)) .domainsnav-head-text strong, #menuRoot .leftnav-acc-section[data-leftnav-section="domains"].is-open:not(:has(.appnav-preview-item.active)) .domainsnav-head-text strong.warengruppe { color: #ffb014 !important; -webkit-text-fill-color: #ffb014 !important; opacity: 1 !important; text-shadow: none !important; } /* * Aktiver Punkt — Rot/Weiss versenkt. DOMAINS + APP. */ #menuRoot .leftnav-acc-section[data-leftnav-section="domains"] .appnav-preview-item.active, #menuRoot .leftnav-acc-section[data-leftnav-section="app"] .appnav-preview-item.active { border: 1px solid #760000 !important; background: linear-gradient( to bottom, #d00000 0%, #bb0000 48%, #920000 100% ) !important; color: #fff !important; box-shadow: inset 0 4px 8px rgba(70, 0, 0, 0.62), inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 1px 0 rgba(255, 255, 255, 0.9) !important; transform: translateY(2px) !important; } #menuRoot .leftnav-acc-section[data-leftnav-section="domains"] .appnav-preview-item.active:hover, #menuRoot .leftnav-acc-section[data-leftnav-section="app"] .appnav-preview-item.active:hover { border-color: #760000 !important; background: linear-gradient( to bottom, #d00000 0%, #bb0000 48%, #920000 100% ) !important; color: #fff !important; transform: translateY(2px) !important; } #menuRoot .leftnav-acc-section[data-leftnav-section="domains"] .appnav-preview-item.active .appnav-preview-copy strong, #menuRoot .leftnav-acc-section[data-leftnav-section="app"] .appnav-preview-item.active .appnav-preview-copy strong, #menuRoot .leftnav-acc-section[data-leftnav-section="domains"] .appnav-preview-item.active .leftnav-item-title, #menuRoot .leftnav-acc-section[data-leftnav-section="app"] .appnav-preview-item.active .leftnav-item-title { color: #fff !important; -webkit-text-fill-color: #fff !important; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.45) !important; } #menuRoot .leftnav-acc-section[data-leftnav-section="domains"] .appnav-preview-item.active .appnav-preview-copy small, #menuRoot .leftnav-acc-section[data-leftnav-section="app"] .appnav-preview-item.active .appnav-preview-copy small, #menuRoot .leftnav-acc-section[data-leftnav-section="domains"] .appnav-preview-item.active .leftnav-item-sub, #menuRoot .leftnav-acc-section[data-leftnav-section="app"] .appnav-preview-item.active .leftnav-item-sub { color: #fff !important; opacity: 0.92; } #menuRoot .leftnav-acc-section[data-leftnav-section="domains"] .appnav-preview-item.active .appnav-preview-arrow, #menuRoot .leftnav-acc-section[data-leftnav-section="app"] .appnav-preview-item.active .appnav-preview-arrow { color: #fff !important; } #menuRoot .leftnav-acc-section[data-leftnav-section="domains"] .appnav-preview-item.active .appnav-preview-arrow-active, #menuRoot .leftnav-acc-section[data-leftnav-section="app"] .appnav-preview-item.active .appnav-preview-arrow-active { display: block; filter: drop-shadow(0 1px 0 rgba(70, 0, 0, 0.55)); } #menuRoot .leftnav-acc-section[data-leftnav-section="domains"] .appnav-preview-item.active::after, #menuRoot .leftnav-acc-section[data-leftnav-section="app"] .appnav-preview-item.active::after { background: radial-gradient( circle, rgba(40, 0, 0, 0.82) 0, rgba(40, 0, 0, 0.82) 1px, transparent 1.35px ); background-size: 5px 5px; opacity: 0.88; } /* * Hover Subpunkt: weiss, fast auf Portal-Niveau versenkt. * LED sendet SOS (3 kurz / 3 lang / 3 kurz / 3 lang) — hat Angst. */ @keyframes leftnav-led-sos { /* S · · · */ 0%, 5% { opacity: 1; } 5%, 8% { opacity: 0.05; } 8%, 13% { opacity: 1; } 13%, 16% { opacity: 0.05; } 16%, 21% { opacity: 1; } 21%, 28% { opacity: 0.05; } /* O — — — */ 28%, 38% { opacity: 1; } 38%, 41% { opacity: 0.05; } 41%, 51% { opacity: 1; } 51%, 54% { opacity: 0.05; } 54%, 64% { opacity: 1; } 64%, 71% { opacity: 0.05; } /* S · · · */ 71%, 76% { opacity: 1; } 76%, 79% { opacity: 0.05; } 79%, 84% { opacity: 1; } 84%, 87% { opacity: 0.05; } 87%, 92% { opacity: 1; } 92%, 100% { opacity: 0.05; } } #menuRoot .leftnav-acc-section[data-leftnav-section="domains"] .appnav-preview-item:not(.active):hover:not(:active):not(.is-navigating), #menuRoot .leftnav-acc-section[data-leftnav-section="app"] .appnav-preview-item:not(.active):hover:not(:active):not(.is-navigating) { border-color: #c7c7c7 !important; background: linear-gradient( to bottom, #ffffff 0%, #f4f4f4 48%, #e7e7e7 100% ) !important; color: #080808 !important; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(0, 0, 0, 0.06) !important; transform: translateY(3px) !important; } #menuRoot .leftnav-acc-section[data-leftnav-section="domains"] .appnav-preview-item:not(.active):hover:not(:active):not(.is-navigating) .appnav-preview-copy strong, #menuRoot .leftnav-acc-section[data-leftnav-section="app"] .appnav-preview-item:not(.active):hover:not(:active):not(.is-navigating) .appnav-preview-copy strong, #menuRoot .leftnav-acc-section[data-leftnav-section="domains"] .appnav-preview-item:not(.active):hover:not(:active):not(.is-navigating) .leftnav-item-title, #menuRoot .leftnav-acc-section[data-leftnav-section="app"] .appnav-preview-item:not(.active):hover:not(:active):not(.is-navigating) .leftnav-item-title { color: #080808 !important; -webkit-text-fill-color: #080808 !important; text-shadow: none !important; } #menuRoot .leftnav-acc-section[data-leftnav-section="domains"] .appnav-preview-item:not(.active):hover:not(:active):not(.is-navigating) .appnav-preview-copy small, #menuRoot .leftnav-acc-section[data-leftnav-section="app"] .appnav-preview-item:not(.active):hover:not(:active):not(.is-navigating) .appnav-preview-copy small, #menuRoot .leftnav-acc-section[data-leftnav-section="domains"] .appnav-preview-item:not(.active):hover:not(:active):not(.is-navigating) .leftnav-item-sub, #menuRoot .leftnav-acc-section[data-leftnav-section="app"] .appnav-preview-item:not(.active):hover:not(:active):not(.is-navigating) .leftnav-item-sub { color: #555 !important; opacity: 1; } #menuRoot .leftnav-acc-section[data-leftnav-section="domains"] .appnav-preview-item:not(.active):hover:not(:active):not(.is-navigating) .appnav-preview-arrow, #menuRoot .leftnav-acc-section[data-leftnav-section="app"] .appnav-preview-item:not(.active):hover:not(:active):not(.is-navigating) .appnav-preview-arrow { color: #666 !important; } #menuRoot .leftnav-acc-section[data-leftnav-section="domains"] .appnav-preview-item:not(.active):hover:not(:active):not(.is-navigating) .domainsnav-led-core, #menuRoot .leftnav-acc-section[data-leftnav-section="app"] .appnav-preview-item:not(.active):hover:not(:active):not(.is-navigating) .domainsnav-led-core, #menuRoot .leftnav-acc-section[data-leftnav-section="domains"] .appnav-preview-item:not(.active):hover:not(:active):not(.is-navigating) .domainsnav-led-shine, #menuRoot .leftnav-acc-section[data-leftnav-section="app"] .appnav-preview-item:not(.active):hover:not(:active):not(.is-navigating) .domainsnav-led-shine { display: none !important; animation: none !important; } /* * Klick / Press: wie aktiv (rot, weiss, versenkt), * aber nur Spitzklammer. Doppelpfeil nur .active. */ #menuRoot .leftnav-acc-section[data-leftnav-section="domains"] .appnav-preview-item:not(.active):active, #menuRoot .leftnav-acc-section[data-leftnav-section="app"] .appnav-preview-item:not(.active):active, #menuRoot .leftnav-acc-section[data-leftnav-section="domains"] .appnav-preview-item:not(.active).is-navigating:not(.is-press-fadeout), #menuRoot .leftnav-acc-section[data-leftnav-section="app"] .appnav-preview-item:not(.active).is-navigating:not(.is-press-fadeout) { border: 1px solid #760000 !important; background: linear-gradient( to bottom, #d00000 0%, #bb0000 48%, #920000 100% ) !important; color: #fff !important; box-shadow: inset 0 3px 6px rgba(70, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 1px 0 rgba(255, 255, 255, 0.9) !important; transform: translateY(1px) !important; } #menuRoot .leftnav-acc-section[data-leftnav-section="domains"] .appnav-preview-item:not(.active):active .appnav-preview-copy strong, #menuRoot .leftnav-acc-section[data-leftnav-section="app"] .appnav-preview-item:not(.active):active .appnav-preview-copy strong, #menuRoot .leftnav-acc-section[data-leftnav-section="domains"] .appnav-preview-item:not(.active):active .leftnav-item-title, #menuRoot .leftnav-acc-section[data-leftnav-section="app"] .appnav-preview-item:not(.active):active .leftnav-item-title, #menuRoot .leftnav-acc-section[data-leftnav-section="domains"] .appnav-preview-item:not(.active).is-navigating:not(.is-press-fadeout) .appnav-preview-copy strong, #menuRoot .leftnav-acc-section[data-leftnav-section="app"] .appnav-preview-item:not(.active).is-navigating:not(.is-press-fadeout) .appnav-preview-copy strong, #menuRoot .leftnav-acc-section[data-leftnav-section="domains"] .appnav-preview-item:not(.active).is-navigating:not(.is-press-fadeout) .leftnav-item-title, #menuRoot .leftnav-acc-section[data-leftnav-section="app"] .appnav-preview-item:not(.active).is-navigating:not(.is-press-fadeout) .leftnav-item-title { color: #fff !important; -webkit-text-fill-color: #fff !important; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.45) !important; } #menuRoot .leftnav-acc-section[data-leftnav-section="domains"] .appnav-preview-item:not(.active):active .appnav-preview-copy small, #menuRoot .leftnav-acc-section[data-leftnav-section="app"] .appnav-preview-item:not(.active):active .appnav-preview-copy small, #menuRoot .leftnav-acc-section[data-leftnav-section="domains"] .appnav-preview-item:not(.active):active .leftnav-item-sub, #menuRoot .leftnav-acc-section[data-leftnav-section="app"] .appnav-preview-item:not(.active):active .leftnav-item-sub, #menuRoot .leftnav-acc-section[data-leftnav-section="domains"] .appnav-preview-item:not(.active).is-navigating:not(.is-press-fadeout) .appnav-preview-copy small, #menuRoot .leftnav-acc-section[data-leftnav-section="app"] .appnav-preview-item:not(.active).is-navigating:not(.is-press-fadeout) .appnav-preview-copy small, #menuRoot .leftnav-acc-section[data-leftnav-section="domains"] .appnav-preview-item:not(.active).is-navigating:not(.is-press-fadeout) .leftnav-item-sub, #menuRoot .leftnav-acc-section[data-leftnav-section="app"] .appnav-preview-item:not(.active).is-navigating:not(.is-press-fadeout) .leftnav-item-sub { color: #fff !important; opacity: 0.92; } #menuRoot .leftnav-acc-section[data-leftnav-section="domains"] .appnav-preview-item:not(.active):active .appnav-preview-arrow, #menuRoot .leftnav-acc-section[data-leftnav-section="app"] .appnav-preview-item:not(.active):active .appnav-preview-arrow, #menuRoot .leftnav-acc-section[data-leftnav-section="domains"] .appnav-preview-item:not(.active).is-navigating:not(.is-press-fadeout) .appnav-preview-arrow, #menuRoot .leftnav-acc-section[data-leftnav-section="app"] .appnav-preview-item:not(.active).is-navigating:not(.is-press-fadeout) .appnav-preview-arrow { color: #fff !important; } #menuRoot .leftnav-acc-section[data-leftnav-section="domains"] .appnav-preview-item:not(.active):active .appnav-preview-arrow-active, #menuRoot .leftnav-acc-section[data-leftnav-section="app"] .appnav-preview-item:not(.active):active .appnav-preview-arrow-active, #menuRoot .leftnav-acc-section[data-leftnav-section="domains"] .appnav-preview-item:not(.active).is-navigating .appnav-preview-arrow-active, #menuRoot .leftnav-acc-section[data-leftnav-section="app"] .appnav-preview-item:not(.active).is-navigating .appnav-preview-arrow-active { display: none !important; } #menuRoot .leftnav-acc-section[data-leftnav-section="domains"] .appnav-preview-item:not(.active):active .domainsnav-arrow-bar, #menuRoot .leftnav-acc-section[data-leftnav-section="app"] .appnav-preview-item:not(.active):active .domainsnav-arrow-bar, #menuRoot .leftnav-acc-section[data-leftnav-section="domains"] .appnav-preview-item:not(.active).is-navigating .domainsnav-arrow-bar, #menuRoot .leftnav-acc-section[data-leftnav-section="app"] .appnav-preview-item:not(.active).is-navigating .domainsnav-arrow-bar { display: none !important; } #menuRoot .leftnav-acc-section[data-leftnav-section="domains"] .appnav-preview-item:not(.active):active .domainsnav-arrow-tip, #menuRoot .leftnav-acc-section[data-leftnav-section="app"] .appnav-preview-item:not(.active):active .domainsnav-arrow-tip, #menuRoot .leftnav-acc-section[data-leftnav-section="domains"] .appnav-preview-item:not(.active).is-navigating .domainsnav-arrow-tip, #menuRoot .leftnav-acc-section[data-leftnav-section="app"] .appnav-preview-item:not(.active).is-navigating .domainsnav-arrow-tip { display: block !important; color: #fff !important; filter: none !important; } /* Schliessen: bleibt weisse Kachel, kein Farb-Flash */ #menuRoot .leftnav-acc-section[data-leftnav-section="domains"].is-leaving > .domainsnav-head, #menuRoot .leftnav-acc-section[data-leftnav-section="domains"].is-leaving > a.domainsnav-head, #menuRoot .leftnav-acc-section[data-leftnav-section="domains"].is-leaving > .appnav-preview-head { color: #000 !important; background: transparent !important; box-shadow: none !important; border-bottom: 0 !important; } #menuRoot .leftnav-acc-section[data-leftnav-section="domains"].is-leaving .domainsnav-head-count { color: #006699 !important; text-shadow: none !important; } #menuRoot .leftnav-acc-section[data-leftnav-section="domains"].is-leaving .domainsnav-head-text small { color: rgba(0, 0, 0, 0.42) !important; opacity: 0.45 !important; } #menuRoot .leftnav-acc-section[data-leftnav-section="domains"].is-leaving .domainsnav-head-text strong, #menuRoot .leftnav-acc-section[data-leftnav-section="domains"].is-leaving .domainsnav-head-text strong.warengruppe { color: #000 !important; -webkit-text-fill-color: #000 !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) !important; } /* * ============================================================ * Subitem PRESSED / NAVIGATING / YIELD / CANCEL * :active + .is-navigating → gruene LED, nur gelbe Spitzklammer * .is-yielding auf .active → soft zu Not-Active (woanders hin?) * .is-press-fadeout → gruene LED mittelschnell aus (Cancel) * cursor: pointer auf allen Subitems * Prioritaet: Commit-nav > press > yielding-active > hover > ruhe * ============================================================ */ #menuRoot { --leftnav-press-fade-ms: 280ms; --leftnav-yield-ms: 300ms; --leftnav-press-ease: cubic-bezier(0.33, 0, 0.2, 1); } /* 5) Submenue-Buttons immer pointer */ #menuRoot a.appnav-preview-item, #menuRoot .appnav-preview-item { cursor: pointer; } /* Weiche Uebergaenge an LED / Kachel fuer Press+Yield */ #menuRoot .appnav-preview-item .domainsnav-led, #menuRoot .appnav-preview-item .appnav-preview-led { transition: width var(--leftnav-press-fade-ms) var(--leftnav-press-ease), height var(--leftnav-press-fade-ms) var(--leftnav-press-ease), border-color var(--leftnav-press-fade-ms) var(--leftnav-press-ease), background var(--leftnav-press-fade-ms) var(--leftnav-press-ease), box-shadow var(--leftnav-press-fade-ms) var(--leftnav-press-ease), opacity var(--leftnav-press-fade-ms) var(--leftnav-press-ease); } #menuRoot .appnav-preview-item .domainsnav-led-core, #menuRoot .appnav-preview-item .domainsnav-led-shine { transition: opacity var(--leftnav-press-fade-ms) var(--leftnav-press-ease); } #menuRoot .appnav-preview-item.active { transition: background-color var(--leftnav-yield-ms) var(--leftnav-press-ease), background var(--leftnav-yield-ms) var(--leftnav-press-ease), border-color var(--leftnav-yield-ms) var(--leftnav-press-ease), box-shadow var(--leftnav-yield-ms) var(--leftnav-press-ease), color var(--leftnav-yield-ms) var(--leftnav-press-ease), transform var(--leftnav-yield-ms) var(--leftnav-press-ease); } #menuRoot .appnav-preview-item.active .appnav-preview-copy strong, #menuRoot .appnav-preview-item.active .appnav-preview-copy small, #menuRoot .appnav-preview-item.active .appnav-preview-arrow { transition: color var(--leftnav-yield-ms) var(--leftnav-press-ease), opacity var(--leftnav-yield-ms) var(--leftnav-press-ease), text-shadow var(--leftnav-yield-ms) var(--leftnav-press-ease); } /* Press: LED startet aus, fährt als LED 06 auf 100% (siehe Ignite unten). */ /* 1) Cancel: gruene LED mittelschnell aus (Core/Shine + Glow) */ #menuRoot .appnav-preview-item:not(.active).is-navigating.is-press-fadeout .domainsnav-led, #menuRoot .appnav-preview-item:not(.active).is-navigating.is-press-fadeout .appnav-preview-led.domainsnav-led { width: 9px !important; height: 9px !important; border: 0 !important; background: none !important; box-shadow: none !important; opacity: 1; } #menuRoot .appnav-preview-item:not(.active).is-navigating.is-press-fadeout .domainsnav-led-core, #menuRoot .appnav-preview-item:not(.active).is-navigating.is-press-fadeout .domainsnav-led-shine { opacity: 0 !important; } /* --- Pfeil: nur gelbe Spitzklammer (Hover-Doppelpfeil aus) --- */ #menuRoot .appnav-preview-item:not(.active):active .appnav-preview-arrow, #menuRoot .appnav-preview-item:not(.active).is-navigating .appnav-preview-arrow { color: #ffad21 !important; opacity: 1; } #menuRoot .appnav-preview-item:not(.active).is-navigating.is-press-fadeout .appnav-preview-arrow { color: #666 !important; opacity: 0.75; transition: color var(--leftnav-press-fade-ms) var(--leftnav-press-ease), opacity var(--leftnav-press-fade-ms) var(--leftnav-press-ease); } /* Doppelpfeil weg */ #menuRoot .appnav-preview-item:not(.active):active .appnav-preview-arrow-active, #menuRoot .appnav-preview-item:not(.active).is-navigating .appnav-preview-arrow-active { display: none !important; } /* Balken weg (nur Spitze) */ #menuRoot .appnav-preview-item:not(.active):active .domainsnav-arrow-bar, #menuRoot .appnav-preview-item:not(.active).is-navigating .domainsnav-arrow-bar { display: none !important; } /* Spitzklammer sichtbar — auch gegen Hover „normal aus“ */ #menuRoot .appnav-preview-item:not(.active):active .domainsnav-arrow-tip, #menuRoot .appnav-preview-item:not(.active).is-navigating .domainsnav-arrow-tip { display: block !important; stroke-width: 1 !important; filter: drop-shadow(0 0 2px rgba(255, 173, 33, 0.45)) !important; } #menuRoot .appnav-preview-item:not(.active).is-navigating.is-press-fadeout .domainsnav-arrow-tip { filter: none !important; } /* * 2) Active YIELD — „koenntest woanders hin“ * .active bleibt im DOM, Optik = Not-Active (soft) */ #menuRoot .appnav-preview-item.active.is-yielding { border-color: #c7c7c7 !important; background: linear-gradient( to bottom, #ffffff 0%, #f4f4f4 48%, #e7e7e7 100% ) !important; color: #080808 !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.98), inset 0 -1px 0 rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.32) !important; transform: none !important; } #menuRoot .appnav-preview-item.active.is-yielding .appnav-preview-copy strong, #menuRoot .appnav-preview-item.active.is-yielding .leftnav-item-title { color: #080808 !important; text-shadow: none !important; -webkit-text-fill-color: #080808 !important; } #menuRoot .appnav-preview-item.active.is-yielding .appnav-preview-copy small, #menuRoot .appnav-preview-item.active.is-yielding .leftnav-item-sub { color: #555 !important; opacity: 0.9; } /* LED grau wie inaktiv */ #menuRoot .appnav-preview-item.active.is-yielding .domainsnav-led, #menuRoot .appnav-preview-item.active.is-yielding .appnav-preview-led.domainsnav-led, #menuRoot .appnav-preview-item.active.is-yielding .domainsnav-led.domainsnav-led-on { width: 9px !important; height: 9px !important; border: 1px solid #cccccc !important; background: linear-gradient(to bottom, #ffffff 0%, #e8e8e8 100%) !important; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), 0 1px 0 rgba(255, 255, 255, 0.85) !important; filter: none !important; } #menuRoot .appnav-preview-item.active.is-yielding .domainsnav-led-core, #menuRoot .appnav-preview-item.active.is-yielding .domainsnav-led-shine { opacity: 0 !important; } /* Pfeil: Ruhe-Spitzklammer statt Doppelpfeil */ #menuRoot .appnav-preview-item.active.is-yielding .appnav-preview-arrow { color: #666 !important; opacity: 0.75; } #menuRoot .appnav-preview-item.active.is-yielding .appnav-preview-arrow-active { display: none !important; } #menuRoot .appnav-preview-item.active.is-yielding .domainsnav-arrow-bar { display: none !important; } #menuRoot .appnav-preview-item.active.is-yielding .domainsnav-arrow-tip, #menuRoot .appnav-preview-item.active.is-yielding .appnav-preview-arrow-normal.domainsnav-arrow-tip { display: block !important; stroke-width: 1 !important; filter: none !important; } #menuRoot .appnav-preview-item.active.is-yielding::after { background: radial-gradient( circle, rgba(90, 90, 90, 0.5) 0, rgba(90, 90, 90, 0.5) 1px, transparent 1.3px ); background-size: 5px 5px; } /* * Inaktiv: LED-Slot leer. Hover-Chevron (Studie 01) kommt per JS. * Aktiv: LED 06 Flush. */ #menuRoot .appnav-preview-item:not(.active) .domainsnav-led-spill, #menuRoot .appnav-preview-item:not(.active) .domainsnav-led-bezel, #menuRoot .appnav-preview-item:not(.active) .domainsnav-led-well, #menuRoot .appnav-preview-item:not(.active) .domainsnav-led-lens, #menuRoot .appnav-preview-item:not(.active) .domainsnav-led-core, #menuRoot .appnav-preview-item:not(.active) .domainsnav-led-shine { display: none !important; } #menuRoot .appnav-preview-item:not(.active) .domainsnav-led, #menuRoot .appnav-preview-item:not(.active) .appnav-preview-led.domainsnav-led { --led-s: 9px; position: relative !important; display: block !important; width: 9px !important; height: 9px !important; border: 0 !important; background: none !important; box-shadow: none !important; overflow: visible !important; } #menuRoot .appnav-preview-item:not(.active) { overflow: visible; } #menuRoot .appnav-preview-item:not(.active) .appnav-preview-arrow { will-change: transform, opacity; } #menuRoot .appnav-preview-item.active .domainsnav-led, #menuRoot .appnav-preview-item.active .appnav-preview-led.domainsnav-led, #menuRoot .appnav-preview-item:not(.active).is-navigating:not(.is-press-fadeout) .domainsnav-led, #menuRoot .appnav-preview-item:not(.active).is-navigating:not(.is-press-fadeout) .appnav-preview-led.domainsnav-led, #menuRoot .domainsnav-led.domainsnav-led-on { --led-s: 11px; position: relative !important; display: grid !important; place-items: center; width: calc(var(--led-s) * 1.22) !important; height: calc(var(--led-s) * 1.22) !important; background: none !important; border: 0 !important; box-shadow: none !important; overflow: visible !important; filter: none !important; } #menuRoot .appnav-preview-item.active .domainsnav-led-core, #menuRoot .appnav-preview-item.active .domainsnav-led-shine, #menuRoot .appnav-preview-item:not(.active).is-navigating:not(.is-press-fadeout) .domainsnav-led-core, #menuRoot .appnav-preview-item:not(.active).is-navigating:not(.is-press-fadeout) .domainsnav-led-shine { display: none !important; } #menuRoot .appnav-preview-item.active .domainsnav-led-spill, #menuRoot .appnav-preview-item.active .domainsnav-led-bezel, #menuRoot .appnav-preview-item.active .domainsnav-led-well, #menuRoot .appnav-preview-item.active .domainsnav-led-lens, #menuRoot .appnav-preview-item:not(.active).is-navigating:not(.is-press-fadeout) .domainsnav-led-spill, #menuRoot .appnav-preview-item:not(.active).is-navigating:not(.is-press-fadeout) .domainsnav-led-bezel, #menuRoot .appnav-preview-item:not(.active).is-navigating:not(.is-press-fadeout) .domainsnav-led-well, #menuRoot .appnav-preview-item:not(.active).is-navigating:not(.is-press-fadeout) .domainsnav-led-lens { position: absolute; pointer-events: none; display: block !important; } #menuRoot .appnav-preview-item.active .domainsnav-led-bezel, #menuRoot .appnav-preview-item:not(.active).is-navigating:not(.is-press-fadeout) .domainsnav-led-bezel { width: calc(var(--led-s) * 1.18); height: calc(var(--led-s) * 1.18); border-radius: 50%; background: radial-gradient( circle, #090909 0 47%, #1b1618 49% 62%, #4c333b 64% 68%, #13090c 70% 100% ); } #menuRoot .appnav-preview-item.active .domainsnav-led-well, #menuRoot .appnav-preview-item:not(.active).is-navigating:not(.is-press-fadeout) .domainsnav-led-well { width: calc(var(--led-s) * 0.82); height: calc(var(--led-s) * 0.82); border-radius: 50%; background: radial-gradient(circle, #071008 0 52%, #000 100%); } #menuRoot .appnav-preview-item.active .domainsnav-led-spill, #menuRoot .appnav-preview-item:not(.active).is-navigating:not(.is-press-fadeout) .domainsnav-led-spill { width: calc(var(--led-s) * 2.4); height: calc(var(--led-s) * 1.4); top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient( ellipse at center, rgba(80, 255, 100, 0.45) 0%, rgba(40, 255, 70, 0.18) 40%, transparent 72% ); filter: blur(4px); } #menuRoot .appnav-preview-item.active .domainsnav-led-lens, #menuRoot .appnav-preview-item:not(.active).is-navigating:not(.is-press-fadeout) .domainsnav-led-lens { width: calc(var(--led-s) * 0.62); height: calc(var(--led-s) * 0.62); border-radius: 50%; overflow: hidden; opacity: 1; background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.95) 0 6%, transparent 14%), radial-gradient(circle, #e8ffe8 0 8%, #7dff7a 22%, #22e848 48%, #0aa828 72%, #046818 100%); box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 0 3px #e8ffe8, 0 0 8px rgba(70, 255, 90, 0.95), 0 0 16px rgba(30, 255, 64, 0.45); } #menuRoot .appnav-preview-item.active .domainsnav-led-lens:before, #menuRoot .appnav-preview-item:not(.active).is-navigating:not(.is-press-fadeout) .domainsnav-led-lens:before { content: ""; position: absolute; width: 60%; height: 40%; left: 18%; top: 8%; border-radius: 50%; background: rgba(255, 255, 255, 0.55); transform: rotate(-10deg); } @keyframes leftnav-led-ignite { from { opacity: 0; } to { opacity: 1; } } #menuRoot .appnav-preview-item:not(.active).is-navigating:not(.is-press-fadeout) .domainsnav-led-spill, #menuRoot .appnav-preview-item:not(.active).is-navigating:not(.is-press-fadeout) .domainsnav-led-bezel, #menuRoot .appnav-preview-item:not(.active).is-navigating:not(.is-press-fadeout) .domainsnav-led-well, #menuRoot .appnav-preview-item:not(.active).is-navigating:not(.is-press-fadeout) .domainsnav-led-lens { opacity: 0; animation: leftnav-led-ignite 560ms cubic-bezier(0.33, 0, 0.2, 1) forwards; }