/** * Mobiles Vollbild-Menü für das native Elementor "Nav Menu"-Widget * (.e-n-menu-toggle / .e-n-menu-wrapper / .e-n-menu-heading). Das Widget * selbst hat keinen echten Vollbild-/Zentriert-Modus – dieses CSS ergänzt * genau das, unterhalb des Elementor-Breakpoints "Tablet Hochformat". * * Breakpoint-Wert 1024px live geprüft (nicht geraten): identisch mit * elementorFrontendConfig.responsive.breakpoints.tablet.value UND mit der * @media (max-width:1024px)-Regel, die Elementor selbst für die Klasse * .e-n-menu-tablet generiert (widget-mega-menu.min.css). Derselbe Wert wird * auch in mega-menu-slider.css für den mobilen Projekte-Slider verwendet. * * Eigene Datei statt Ergänzung in mega-menu-slider.css: Diese Datei betrifft * das gesamte Menü-Widget (alle Top-Level-Punkte: Expertise, Vision & * Dialog, Projekte, Kontakt), mega-menu-slider.css nur den "Projekte"-Slider * im Inneren – beides in einer Datei zu mischen würde die klare Trennung * der Feature-Dateien in diesem Theme aufweichen. * * Body-Scroll-Lock und Fokus-Falle dafür liegen in * assets/js/mobile-menu-scroll-lock.js. * * WICHTIG zu den !important-Regeln unten: Elementors eigene, unbedingt * geltende Regel für .e-n-menu-wrapper (nicht in einer Media Query, in * widget-mega-menu.min.css, lädt NACH diesem Stylesheet) setzt position, * overflow, top/right, width, height und background-color bereits über * einen Selektor mit höherer Spezifität als unserer einfache Klasse – ohne * !important würde jede dieser Eigenschaften dort kommentarlos * überschrieben (per Cascade-Check live bestätigt). justify-content/ * align-items sind dagegen neue, nicht kollidierende Werte – hier bewusst * OHNE !important, wie gefordert nicht blockweise verwendet. * * WICHTIG zum Anzeige-Mechanismus (display/visibility/transform): Frühere * Version hier hatte "display: flex !important" NUR auf ".mxm-menu-open" * (Elementors eigenes display:var(--n-menu-wrapper-display) steuerte den * Rest) – live als Fehler entdeckt: ein bedingungsloses "display: flex" * ohne jede andere Versteck-Eigenschaft macht das Menü DAUERHAFT sichtbar, * auch geschlossen. Für den jetzt gewünschten Slide-In/Slide-Out-Effekt * MUSS "display" aber durchgehend flex bleiben – ein Wechsel zwischen * display:none und display:flex lässt sich nicht animieren/transitionieren. * Das Verstecken im geschlossenen Zustand übernimmt stattdessen * "visibility: hidden" + "transform: translateY(-100%)" (Panel oberhalb des * sichtbaren Bereichs geparkt) – das ist genauso wie display:none aus dem * Tastatur-Fokus/der Screenreader-Ausgabe entfernt (CSS-Spec-Verhalten), * verhindert also denselben Fehler wie zuvor, erlaubt aber eine Transition. * "visibility" bekommt dafür eine transition-delay: beim Schließen erst * NACH der Slide-Animation unsichtbar (sonst springt der Inhalt weg, bevor * er rausgeschoben ist), beim Öffnen sofort sichtbar (sonst wäre er kurz * unsichtbar UND schon an Position 0). Elementor bietet für den * offen/geschlossen-Zustand selbst keinen Klassen-Hook auf dem Wrapper (nur * aria-expanded auf dem separaten Toggle-Button ändert sich), daher spiegelt * mobile-menu-scroll-lock.js diesen Zustand als Klasse "mxm-menu-open" auf * den Wrapper. */ @media ( max-width: 1024px ) { .e-n-menu-wrapper { position: fixed !important; top: 0 !important; right: 0 !important; left: 0 !important; bottom: auto !important; width: 100vw !important; /* Höhe = genau der Inhalt (Wunsch), von oben herab – passend zum Toggle-Button, der oben im Header sitzt. max-height bleibt als Sicherheitsnetz stehen, falls der Inhalt (z.B. aufgeklapptes "Projekte"-Akkordeon) doch mal höher ist als der Viewport – sonst würde das Panel unten aus dem Bildschirm herauslaufen. dvh berücksichtigt mobile Adressleisten korrekt, vh bleibt als Fallback für Browser ohne dvh-Unterstützung stehen. */ height: auto !important; max-height: 100vh !important; max-height: 100dvh !important; display: flex !important; justify-content: center; align-items: flex-start; /* Abstand vom oberen Rand (Platz für den Toggle-Button/Close-Icon) und unten Luft zum Inhalt. Platzhalter-Wert (laut Wunsch noch offen/TBD) – bitte nach Augenmaß anpassen, an dieser einen Stelle. BEWUSST kein horizontales Padding hier: live geprüft, .e-n-menu-heading (der eigentliche Menü-Block) übernimmt seine Breite fix von Elementor (volle Viewport-Breite) und schrumpft NICHT automatisch um ein Padding auf diesem Wrapper – ein horizontales Padding hätte den Inhalt dadurch nur nach rechts verschoben statt ihn symmetrisch einzurücken (live als Fehler gefunden). Seitlicher Abstand müsste stattdessen direkt am Menü-Inhalt selbst (Elementor-Editor) gesetzt werden. */ --mxm-mobile-menu-padding-top: 96px; padding: var( --mxm-mobile-menu-padding-top ) 0 40px; /* Intern scrollbar, falls der Inhalt höher als max-height ist – sonst wäre der untere Teil unerreichbar. flex-direction: column liefert Elementor hier bereits selbst (live geprüft), daher hier nicht erneut gesetzt. */ overflow-y: auto !important; /* Elementor liefert für dieses Element aktuell KEINEN eigenen Hintergrund (background-color: transparent, live geprüft) – ohne eigenen Wert wäre das Menü durchsichtig und der Seiteninhalt dahinter weiterhin sichtbar. Als Variable ausgelagert, damit sich die Farbe an einer Stelle austauschen lässt. Frosted-Glass-Optik wie im Desktop-Header (style.css .site-header, dort ebenfalls 0.95) – zwischenzeitlich testweise auf 0.75 (transparenter) gesetzt, auf Wunsch wieder zurück auf 0.95: bei 0.75 schien Hintergrundinhalt (z.B. große Überschriften) durch den Blur zu stark durch. */ --mxm-mobile-menu-bg: rgba( 255, 255, 255, 0.95 ); background-color: var( --mxm-mobile-menu-bg ) !important; backdrop-filter: blur( 8px ) !important; -webkit-backdrop-filter: blur( 8px ) !important; /* Geschlossen: nach oben aus dem sichtbaren Bereich geschoben und unsichtbar/nicht fokussierbar (siehe Erklärung im Dateikopf). */ visibility: hidden; transform: translateY( -100% ); transition: transform 0.35s ease, visibility 0s linear 0.35s; /* Eigener z-index für den Wrapper selbst NICHT nötig: Elementor liefert hier bereits einen sehr hohen Wert (2147483640, live geprüft) – das liegt schon über Header und Seiteninhalt. ABER: genau dieser hohe Wert + der jetzt undurchsichtige Hintergrund übermalen den Toggle-Button (z-index 1000, liegt aber DOM-unabhängig als eigenständiges Geschwisterelement daneben) – live getestet: Ohne die Regel unten verschwindet der Schließen-Button komplett unter dem Overlay. Deshalb den Toggle gezielt höher stellen, siehe unten. */ } /* Offen: eingeblendet und an Position 0 geschoben – sofort sichtbar (visibility ohne Delay), damit beim Öffnen nichts "nachhinkt". */ .e-n-menu-wrapper.mxm-menu-open { visibility: visible; transform: translateY( 0 ); transition: transform 0.35s ease, visibility 0s linear 0s; } /* Barrierefreiheit: Nutzer:innen mit "reduzierte Bewegung" bekommen das Menü ohne Slide-Animation, direktes Ein-/Ausblenden reicht. */ @media ( prefers-reduced-motion: reduce ) { .e-n-menu-wrapper, .e-n-menu-wrapper.mxm-menu-open { transition: none; } } /* Muss über dem Wrapper-Overlay liegen bleiben (siehe Kommentar oben), sonst ist der Schließen-Button unsichtbar/unklickbar, sobald das Menü offen ist. */ .e-n-menu-toggle { z-index: 2147483647 !important; } /* Weißer Kasten hinter jedem Menüpunkt (z.B. "Expertise") entfernen: kommt nicht von uns, sondern von Elementor selbst (live geprüft, widget-mega-menu.min.css: ".e-n-menu[data-layout='dropdown'] .e-n-menu-title { background-color: rgb(255,255,255) }" – Elementors eigenes Standard-Styling für die mobile Dropdown-Ansicht). Diese Elementor-Regel setzt kein !important, unsere gewinnt daher trotz niedrigerer Selektor-Spezifität automatisch (Wichtigkeit schlägt Spezifität). */ .e-n-menu-wrapper .e-n-menu-title, .e-n-menu-wrapper .elementor-item { background-color: transparent !important; } /* Close-Icon (X) beim offenen Menü fest auf Schwarz – unabhängig von Startseite/Scroll-Status. Vorher griff hier dieselbe Regel wie beim Hamburger-Icon weiter unten (.e-n-menu-toggle-icon svg, ohne Unterscheidung offen/geschlossen), wodurch das X auf dem jetzt hellen, transparenten Menü-Hintergrund unsichtbar/kontrastarm wurde (live geprüft: weißes X auf hellem Blur-Hintergrund). aria-expanded spiegelt den echten Offen-Zustand direkt am Toggle-Button (siehe mobile-menu-scroll-lock.js) – zuverlässiger als über die Wrapper- Klasse, da Toggle und Wrapper DOM-unabhängige Geschwister sind (siehe Kommentar weiter oben). Höhere Spezifität als die .home/.scrolled-Regeln unten, gewinnt daher unabhängig vom Seiten-/Scroll-Zustand, solange das Menü offen ist. */ .e-n-menu-toggle[aria-expanded="true"] .e-n-menu-toggle-icon.e-close svg, .e-n-menu-toggle[aria-expanded="true"] .e-n-menu-toggle-icon.e-close path { fill: #000 !important; } /* Der Abstand zwischen den Top-Level-Punkten ist bereits im Elementor-Editor konfiguriert (Style-Tab → Menü Elemente → "Abstand zwischen den Elementen", responsive; wird technisch über row-gap ausgegeben) – hier bewusst NICHT erneut gesetzt. Ohne diese Regel bleibt .e-n-menu-heading bei "row + wrap" (Elementor-Standard, live geprüft) und die Punkte würden nebeneinander umbrechen statt sauber untereinander zu stehen – nur die Richtung wird hier also korrigiert, der Abstand selbst kommt weiterhin aus row-gap. */ .e-n-menu-heading { flex-direction: column !important; flex-wrap: nowrap !important; } /* Textfarbe im Vollbild-Menü fest auf Schwarz setzen (passend zum weißen --mxm-mobile-menu-bg oben). Hintergrund: style.css steuert die Menü-Textfarbe abhängig von Seite/Scroll-Status – auf der Startseite ungescrollt ist sie WEISS (damit sie auf dem dunklen Hero-Bild lesbar ist, siehe .home .site-header .e-n-menu-title-text), sonst schwarz. Live geprüft: das Vollbild-Menü würde in genau diesem – häufigen – Fall (Startseite, Menü direkt beim Laden öffnen) weiß auf weißem Hintergrund landen und unlesbar sein. Da das Menü jetzt einen eigenen, undurchsichtigen Hintergrund hat, ist die "auf dem Hero mitlaufen"-Logik hier ohnehin nicht mehr sinnvoll – die Farbe wird deshalb bewusst von der Scroll-/Seiten-Logik entkoppelt und fest auf Schwarz gesetzt. .e-n-menu-wrapper wird zusätzlich wiederholt, um style.css' spezifischste Regel (.home .site-header.scrolled .e-n-menu-title-text, 4 Klassen-Selektoren) sicher zu überstimmen – style.css lädt nach dieser Datei und arbeitet ebenfalls mit !important, daher reicht !important allein hier nicht, es muss auch die Spezifität stimmen. .mxm-menu-open sorgt zusätzlich dafür, dass diese Regel nur im offenen Zustand greift (siehe Kommentar im Datei-Header). */ .e-n-menu-wrapper.e-n-menu-wrapper.e-n-menu-wrapper.mxm-menu-open .e-n-menu-title-text, .e-n-menu-wrapper.e-n-menu-wrapper.e-n-menu-wrapper.mxm-menu-open .e-n-menu-title, .e-n-menu-wrapper.e-n-menu-wrapper.e-n-menu-wrapper.mxm-menu-open .elementor-item { color: #000 !important; } /* "+"/"-"-Icon von "Projekte" (Auf-/Zuklapp-Hinweis): style.css macht dieses Icon auf der Startseite weiß (.home .site-header .e-n-menu-dropdown-icon svg { fill: #fff !important }), passend zum dunklen Hero-Bild. Live geprüft: im Vollbild-Menü mit weißem Hintergrund war das Icon dadurch unsichtbar (weiß auf weiß) – aus demselben Grund wie bei der Textfarbe oben deshalb ebenfalls fest auf Schwarz gesetzt, sobald das Menü offen ist. */ .e-n-menu-wrapper.e-n-menu-wrapper.e-n-menu-wrapper.mxm-menu-open .e-n-menu-dropdown-icon svg, .e-n-menu-wrapper.e-n-menu-wrapper.e-n-menu-wrapper.mxm-menu-open .e-n-menu-dropdown-icon path { fill: #000 !important; } /* Hamburger-Icon (geschlossener Zustand, sitzt noch auf dem normalen Seitenhintergrund – nicht auf dem Vollbild-Overlay): soll sich wie Logo und Navigationstext verhalten, die in style.css bereits zwischen Startseite/ungescrollt (weiß, auf dunklem Hero) und sonst/gescrollt (schwarz) wechseln – das Hamburger-Icon war dort bisher nicht mit eingebunden und blieb live geprüft immer dunkel, auch auf dem dunklen Hero-Bild. Bewusst nach demselben .home/ .scrolled-Muster ergänzt statt fest auf eine Farbe gesetzt, da das Icon je nach Hintergrund mal hell, mal dunkel sein muss. */ .home .site-header .e-n-menu-toggle-icon svg, .home .site-header .e-n-menu-toggle-icon path { fill: #fff !important; } .home .site-header.scrolled .e-n-menu-toggle-icon svg, .home .site-header.scrolled .e-n-menu-toggle-icon path { fill: #000 !important; } /* ======================================== FIX: Zu kleine Tap-Targets im Vollbild-Menü ======================================== */ /* * Ursache 1 (live nachgewiesen, Hauptgrund für "Projekte braucht * mehrere Klicks"): style.css setzt für den Dropdown-Pfeil * (".site-header .e-n-menu-dropdown-icon") "height: auto; min-height: 0" * für einen Pixel-Shift auf dem DESKTOP-Dropdown ("DROPDOWN ICON FIX", * dort als "MANUELLER PIXEL-SHIFT" kommentiert). Diese Regel ist nicht * auf Desktop begrenzt und wirkt daher auch hier im mobilen * Vollbild-Menü mit (.e-n-menu-wrapper hängt ebenfalls unter * .site-header .e-n-menu, live per DOM-Kette bestätigt) – der * "+"/"-"-Button für "Projekte" schrumpft dadurch auf exakt die * SVG-Eigengröße (10×10px, live gemessen), weit unter jeder * brauchbaren Touch-Ziel-Größe (WCAG 2.5.5 empfiehlt min. 44×44px). * * Ursache 2 (live nachgewiesen, Ursache für "Expertise manchmal nicht * klickbar"): der eigentliche Link/Klick-Bereich * (.e-n-menu-title-container) ist nur so breit wie sein Text (z.B. * 64×23px bei "Expertise"), obwohl die ganze Zeile optisch 390px breit * wirkt – der Rand ringsum SIEHT anklickbar aus, ist es aber nicht, * Finger landen dadurch leicht daneben. * * ERSTER Lösungsversuch (per Padding/min-height auf den echten Elementen) * hat einen neuen, sichtbaren Fehler verursacht: die eigene Box des * Dropdown-Pfeils wurde dadurch selbst auf 44×44px vergrößert – das SVG * blieb aber klein und wurde INNERHALB dieser größeren Box zentriert, * wodurch optisch ein großer Abstand zum Wort "Projekte" entstand samt * leichtem Versatz nach unten (live vom Kunden gemeldet und bestätigt). * * Korrigierter Fix: die sichtbaren Boxen bleiben unangetastet (keine * Breiten-/Höhen-/Padding-Änderung an den echten Elementen mehr – daher * auch keine !important-Überschreibung von style.css mehr nötig). Die * größere Tap-Fläche kommt stattdessen von einem unsichtbaren * ::before-Pseudo-Element (44×44px, zentriert über dem jeweils * sichtbaren Element) – Klicks darauf zählen als Klick auf das Element * selbst (Pseudo-Elemente sind Teil der Box ihres Hosts), ohne dass * sich am Layout/Abstand irgendetwas sichtbar ändert. */ .e-n-menu-wrapper .e-n-menu-dropdown-icon { position: relative; /* schon aus style.css geerbt, hier nur zur Absicherung für ::before */ } .e-n-menu-wrapper .e-n-menu-dropdown-icon::before { content: ''; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate( -50%, -50% ); } .e-n-menu-wrapper .e-n-menu-title-container { position: relative; } .e-n-menu-wrapper .e-n-menu-title-container::before { content: ''; position: absolute; top: 50%; left: 50%; width: 100%; min-width: 44px; height: 44px; transform: translate( -50%, -50% ); } /* ======================================== Abstand zwischen den Menüpunkten verringern ======================================== */ /* * Der Zeilenabstand kommt normalerweise aus Elementor selbst (Style-Tab * → Menü Elemente → "Abstand zwischen den Elementen", live gemessen: * 42px auf Mobile) – auf Kundenwunsch hier gezielt nur für das mobile * Vollbild-Menü reduziert, ohne die Elementor-Einstellung selbst * (die auch den Desktop-Header betrifft) zu verändern. Erst auf 24px * gesetzt, auf Wunsch danach wieder leicht erhöht auf 32px. */ .e-n-menu-wrapper .e-n-menu-heading { row-gap: 32px !important; } /* ======================================== Leerraum über/unter den Projekt-Bildern entfernen ======================================== */ /* * Ursache (live nachgewiesen): der direkte Eltern-Container von * .mega-menu-projects-track (Elementor-Element ohne eigene, stabile * Klasse – daher Auswahl relational per :has() statt über die * auto-generierte ID) hat ein festes "min-height: 295px", vermutlich * für die Desktop-Ansicht gesetzt. Der Track selbst ist mobil aber nur * 185px hoch – durch "justify-content: center" auf diesem Container * wird der Track in der Mitte der 295px zentriert, was oben UND unten * je ca. 55px leeren Raum erzeugt ("Padding-Optik", technisch aber * Zentrierung in einer überhöhten Box). * * Fix: min-height auf Mobile zurücksetzen, Container schrumpft auf die * tatsächliche Bildhöhe. Bewusst :has() statt der Elementor-eigenen ID * (elementor-element-5175d12): bleibt stabil, falls das Element im * Editor neu aufgebaut wird und dadurch eine neue ID bekommt – die * Beziehung "direkter Elternteil von .mega-menu-projects-track" bleibt * gleich. Live getestet: Höhe des Containers sinkt dadurch von 295px * auf 185px, Bilder/Slider-Funktion unverändert. * * Auf Wunsch danach oben ein kleines padding-top von 12px ergänzt, damit * die Bilder nicht direkt ohne jeden Abstand am Menüpunkt "Projekte" * kleben – unten bewusst kein Padding, das war ausdrücklich nicht * gewünscht. */ .e-n-menu-wrapper *:has( > .mega-menu-projects-track ) { min-height: auto !important; padding-top: 12px; box-sizing: border-box; } /* ======================================== Blauer Fokus-Rahmen beim automatischen Öffnen-Fokus ======================================== */ /* * mobile-menu-scroll-lock.js setzt beim Öffnen des Menüs den Fokus * automatisch auf das erste fokussierbare Element (aktuell "Expertise") * – Absicht: Tastatur-/Screenreader-Nutzer:innen landen sofort im * geöffneten Menü (siehe Kommentar im Dateikopf der JS-Datei). Der * native Browser-Fokus-Rahmen (bei iOS Safari blau) macht das aber auch * bei ganz normaler Maus-/Touch-Bedienung sichtbar, wo er optisch nicht * gewünscht ist (Kunden-Feedback). * * ERSTER Versuch war ein reines CSS-":focus-visible"-Fix ohne JS – auf * einem echten iOS-Gerät live getestet NICHT wirksam (Rahmen blieb nach * Cache-Leerung weiter sichtbar). Safari stuft diesen Fokus trotz * JS-Auslösung offenbar als "focus-visible" ein (vermutlich, weil * .focus() dort asynchron aus einem MutationObserver heraus läuft statt * synchron im Klick-Handler). Daher jetzt stattdessen eine Klasse, die * mobile-menu-scroll-lock.js exakt für diesen einen automatischen Fokus * setzt und beim nächsten Fokus-Wechsel (Tab, Klick auf Menüpunkt, * Schließen, ...) selbst wieder entfernt – funktioniert unabhängig von * Browser-Heuristiken zuverlässig, ohne die Barrierefreiheit für echte * Tastatur-Navigation (jeden anderen Fokus-Wechsel) einzuschränken. */ .mxm-no-auto-focus-ring:focus { outline: none; } }