/* ============================================================================ MusikBlog — Header & Konto ---------------------------------------------------------------------------- Rechter Icon-/Konto-Cluster, Such-Overlay, Konto-Dropdown + Theming für Nav-Band & Logo. Werte aus dem Design-System (colors_and_type.css). Dark/Light folgt dem SITE-Toggle `body.mb-dark` (kein data-theme). Die Tokens werden NUR auf die Header-Region gescoped (nicht global auf :root) → keine Nebenwirkungen auf den Rest der Seite, Dark-Farben unangetastet. ============================================================================ */ /* ---- Design-Tokens, gescoped auf die Header-Region (Light = Default) ------ */ .elementor-location-header, [data-mb-header], .mb-account, .mb-search, .mb-navband, .woocommerce-account { --bg: #FFFFFF; --surface: #F5F5F5; --surface-2: #E9E9E9; --surface-3: #DDDDDD; --overlay: rgba(34, 34, 39, 0.45); --fg: #222227; --fg-2: #55555E; --fg-3: #84848E; --border: rgba(34, 34, 39, 0.14); --border-strong: rgba(34, 34, 39, 0.55); --accent: #C22BF7; --accent-hover: #BC16F8; --accent-weak: rgba(194, 43, 247, 0.12); --fg-on-accent: #FFFFFF; --mb-ink-800: #222227; --shadow-md: 0 8px 22px rgba(34, 34, 39, 0.10); --shadow-lg: 0 22px 54px rgba(34, 34, 39, 0.16); --r-xs: 2px; --r-md: 5px; --r-pill: 999px; --ease: cubic-bezier(0.2, 0.6, 0.2, 1); --dur: 200ms; --dur-fast: 120ms; --dur-slow: 320ms; --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif; /* Genau 3 Schriftgrößen für die ganze Kontoseite */ --fs-sm: 0.875rem; /* Meta, Labels, Tabellenköpfe, Pillen — Schrift-Boden 14px (§9.2) */ --fs-base: 0.9rem; /* Fließtext, Inputs, Buttons, Tabellenzellen, Nav */ --fs-lg: 1.15rem; /* Überschriften */ } body.mb-dark .elementor-location-header, body.mb-dark [data-mb-header], body.mb-dark .mb-account, body.mb-dark .mb-search, body.mb-dark .mb-navband, body.mb-dark.woocommerce-account { --bg: #222227; --surface: #2A2A30; --surface-2: #33333B; --surface-3: #45454F; --overlay: rgba(0, 0, 0, 0.62); --fg: #F5F5F7; --fg-2: #B6B6BE; --fg-3: #84848E; --border: rgba(255, 255, 255, 0.12); --border-strong: rgba(255, 255, 255, 0.30); --accent-weak: rgba(194, 43, 247, 0.18); --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.45); --shadow-lg: 0 20px 52px rgba(0, 0, 0, 0.58); } .mb-ic { display: inline-flex; flex: none; vertical-align: middle; } /* Header „sticky": klebt oben, liegt über dem Inhalt. Pro-frei (reines CSS, kein Editor-Schritt). Das Sticky MUSS auf den Header-Location-Wrapper (sein Elternteil ist hoch genug) — auf der inneren Flexbox klebt es nicht (deren Eltern-

ist nur header-hoch). Gescoped via :has auf unsere mb-header-Klasse. !important, weil Elementor `position: relative` sonst gewinnt. */ .elementor-location-header:has(.mb-header) { position: sticky !important; top: 0; z-index: 100; } /* ============================================================================ Rechter Cluster ============================================================================ */ .mb-hdr-actions { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-body); -webkit-tap-highlight-color: transparent; } /* Hohe Spezifität + !important: setzt den globalen Magenta-Button-Stil des Themes zurück, der sonst die