/** * Mega-Menü "Projekte": horizontaler Scroll-Slider per nativem CSS * Scroll-Snap (keine Carousel-Library). Betrifft zwei in Elementor bereits * manuell vergebene Klassen: * .mega-menu-projects-track – Flex-Container mit den Projekt-Items * .mega-menu-projects-item – einzelnes Projekt-Item * * Mobile Anpassung (unterhalb 1024px, identischer Breakpoint wie in * mobile-menu.css – siehe dortiger Kommentar zur Herkunft des Werts) ganz * unten in dieser Datei: 1,5 statt 3,5 Karten sichtbar, Zieh-Fortschritts- * balken ausgeblendet (Touch-Wischen auf den Bildern reicht auf Mobile, * ein feiner Ziehbalken ist dort fummelig zu bedienen). * * WICHTIG zu den !important-Regeln unten: Der Elementor-Container-Widget * ("e-con"/"e-con-full"/"elementor-element") setzt overflow, flex-basis, * flex-grow, flex-shrink und align-items selbst über CSS-Variablen * (frontend.min.css), mit derselben Selektor-Spezifität wie unsere Klassen * und lädt NACH unserem Stylesheet – ohne !important würde Elementors * Standard (overflow: visible, flex-basis: auto, align-items: center) unsere * Werte kommentarlos überschreiben und der Track hätte nie einen echten * Überlauf bzw. Bilder unterschiedlicher Höhe stünden nicht auf gleicher * Höhe (genau das waren die zuvor gemeldeten Fehler). */ .mega-menu-projects-track { display: flex; overflow-x: auto !important; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; /* iOS: weiches Touch-Scrolling */ /* Scroll-Verkettung unterbinden (added 2026-08-05). * * Ursache eines gemeldeten, schwer beschreibbaren Fehlers beim Wischen * über die Projekte auf dem Desktop: Ohne diese Zeile reicht der * Browser eine horizontale Wischbewegung, die am Anfang oder Ende der * Scrollstrecke ankommt, an das übergeordnete Element weiter – und * zuletzt an das Dokument selbst. macOS/Chrome und Safari deuten ein * horizontales Wischen auf Dokumentebene als Zurück-/Vorwärts-Geste: * Es erscheint der halbtransparente Navigationspfeil am Bildrand, die * Seite ruckt seitlich weg, und bei ausreichend langem Wischen * navigiert der Browser tatsächlich zur vorherigen Seite. Für die * Nutzerin sieht das aus wie ein Fehler im Menü, ist aber die normale * Overscroll-Weitergabe. * * "contain" hält das Scrollen im Track: Am Ende der Strecke passiert * schlicht nichts mehr, statt die Geste nach außen durchzureichen. * Der Gummiband-Effekt innerhalb des Tracks bleibt erhalten (dafür * wäre "none" nötig, das brauchen wir hier nicht). * * Betrifft Trackpad-Wischen ebenso wie Touch auf Mobilgeräten. */ overscroll-behavior-x: contain; /* Elementor zentriert Items unterschiedlicher Höhe standardmäßig vertikal (align-items: center) – dadurch stehen Bilder nicht mehr auf gleicher Höhe, sobald eine Bildunterschrift zweizeilig umbricht und das Item dadurch höher wird. flex-start hält alle Bilder oben bündig, unabhängig von der Caption-Länge der Nachbar-Items. */ align-items: flex-start !important; /* Bricht bewusst aus dem Padding der umgebenden Elementor-Container aus (siehe --mxm-bleed-* unten, von mega-menu-slider.js beim Init einmalig auf die tatsächlich gerenderte Lücke zum äußeren Menü-Rahmen .e-n-menu-wrapper gesetzt – nicht nur das direkte Elternelement, da auf Mobile mehrere verschachtelte Container mit je eigenem Padding zusammenkommen können), damit der Track wirklich randlos über die volle Breite geht – wichtig, damit beim Scrollen weitere Bilder nahtlos hereinkommen. padding-left erzeugt stattdessen einen bewussten Abstand nur vor dem ersten Bild (auf Mobile per Media Query weiter unten wieder auf 0 gesetzt); scroll-padding-left sorgt dafür, dass scroll-snap diesen Abstand nicht "wegkorrigiert" (sonst würde die Scroll-Position beim Öffnen sofort auf den nächsten Snap-Punkt hinter dem Abstand springen). */ --mxm-bleed-left: 0px; --mxm-bleed-right: 0px; margin-left: calc( -1 * var( --mxm-bleed-left ) ) !important; margin-right: calc( -1 * var( --mxm-bleed-right ) ) !important; width: calc( 100% + var( --mxm-bleed-left ) + var( --mxm-bleed-right ) ) !important; padding-left: var( --mxm-bleed-left ) !important; scroll-padding-left: var( --mxm-bleed-left ); /* Scrollbar unsichtbar, aber weiterhin per Trackpad/Touch/Tastatur scrollbar */ scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* Legacy Edge/IE */ /* Rand-Fade: blendet Bilder, die am linken/rechten Rand hart angeschnitten sind, sanft ins Transparente aus (~100px), statt sie hart abzuschneiden. --mxm-fade-left/-right werden von mega-menu-slider.js live beim Scrollen gesetzt (0px = kein Fade, weil auf der Seite gerade nichts verborgen ist – z.B. ganz am Anfang/Ende der Scrollstrecke). Default 0/0, damit ohne JS oder ohne Überlauf nichts gemaskt wird. */ --mxm-fade-left: 0px; --mxm-fade-right: 0px; -webkit-mask-image: linear-gradient( to right, transparent 0, black var( --mxm-fade-left ), black calc( 100% - var( --mxm-fade-right ) ), transparent 100% ); mask-image: linear-gradient( to right, transparent 0, black var( --mxm-fade-left ), black calc( 100% - var( --mxm-fade-right ) ), transparent 100% ); } .mega-menu-projects-track::-webkit-scrollbar { display: none; /* Chrome, Safari, neueres Edge */ } /* Smooth Scroll nur, wenn der Nutzer keine reduzierte Bewegung wünscht */ @media ( prefers-reduced-motion: no-preference ) { .mega-menu-projects-track { scroll-behavior: smooth; } } /* Item-Breite = genau 100% / 3.5 der Track-Breite: dadurch sind immer exakt 3,5 Items sichtbar (3 ganze + ein halb angeschnittenes als Scroll-Hinweis) UND die Reihe füllt die Track-Breite bei jeder Bildschirmgröße lückenlos aus – die Item-Größe skaliert einfach mit der verfügbaren Breite mit, ganz ohne clamp()/max-width-Kompromisse. Setzt voraus, dass der Track selbst keinen Gap zwischen den Items hat (hier der Fall, siehe .mega-menu-projects-track); käme in Elementor später ein Gap dazu, müsste die Formel entsprechend um die Gap-Breite reduziert werden. */ .mega-menu-projects-item { /* !important nötig, siehe Kommentar oben: Elementor setzt flex-basis/ -grow/-shrink über .elementor-element mit gleicher Spezifität, geladen nach unserem Stylesheet. */ flex: 0 0 calc( 100% / 3.5 ) !important; min-width: 0 !important; /* verhindert, dass Inhalte (Bilder etc.) das Item aufblähen */ scroll-snap-align: start; /* Das eigene Innen-Padding jedes Items (von style.css über die e-con-full-Klasse gesetzt) bewusst NICHT zurückgesetzt: der dadurch entstehende Abstand zwischen den Bildern ist gewünscht (siehe auch Kommentar oben zur 3.5er-Formel, die genau diesen ungebleedeten Zustand voraussetzt). */ } /* ----------------------------------------------------------------------- Fortschrittsbalken (wird per JS nur erzeugt/eingeblendet, wenn der Track tatsächlich mehr Items enthält, als sichtbar Platz haben). Rein dekorativ – zeigt wie ein Scrollbar-Thumb per Breite/Position, wie viel Prozent des Tracks sichtbar ist und wie weit bereits gescrollt wurde. Breite/Position von .mega-menu-projects-progress__bar werden von mega-menu-slider.js live beim Scrollen per Inline-Style gesetzt. ----------------------------------------------------------------------- */ .mega-menu-projects-progress { position: relative; width: 100%; height: 5px; margin-top: 12px; background-color: rgba( 0, 0, 0, 0.15 ); /* grauer Hintergrund-Balken */ border-radius: 2.5px; overflow: hidden; } .mega-menu-projects-progress__bar { position: absolute; top: 0; left: 0; height: 100%; background-color: #000; border-radius: 2.5px; /* Ziehbar per Maus/Touch/Stift (siehe mega-menu-slider.js: Pointer Events). touch-action: none verhindert, dass die Seite beim Ziehen auf Touch-/Stift-Geräten mitscrollt; user-select/-webkit-user-drag verhindern Text-Markierung bzw. den nativen Drag-Schatten während des Ziehens. */ cursor: grab; touch-action: none; user-select: none; -webkit-user-drag: none; } .mega-menu-projects-progress__bar.is-dragging { cursor: grabbing; } /* ----------------------------------------------------------------------- Mobile Anpassung (unterhalb 1024px, siehe Kommentar im Datei-Header). ----------------------------------------------------------------------- */ @media ( max-width: 1024px ) { /* Live geprüft: Elementor hat für diesen Container eine eigene responsive Container-Einstellung "--flex-wrap-mobile: wrap" hinterlegt (vermutlich aus der Editor-Konfiguration dieses Elements). Ohne diese Regel bricht der Track in eine vertikale Liste um, statt horizontal zu scrollen. */ .mega-menu-projects-track { flex-wrap: nowrap !important; } /* 1,5 statt 3,5 Karten sichtbar – gleiche Formel/Logik wie beim Desktop-Wert oben, nur mit anderem Divisor. */ .mega-menu-projects-item { flex: 0 0 calc( 100% / 1.5 ) !important; } /* Auf Touch-Geräten reicht das native Wischen auf den Bildern; ein feiner Ziehbalken ist auf kleinen Screens schwer präzise zu treffen. Wird ohnehin nur erzeugt, wenn der Track tatsächlich überläuft (siehe mega-menu-slider.js) – hier zusätzlich rein visuell ausgeblendet. */ .mega-menu-projects-progress { display: none; } /* Der bewusste Abstand vor dem ersten Bild (siehe Kommentar oben bei padding-left/scroll-padding-left) ist auf Desktop gewünscht, auf Mobile aber nicht – dort soll die Reihe auf Wunsch fast bis an den Rand gehen. scroll-padding-left auf denselben Wert mitsetzen, sonst würde scroll-snap die Position wieder auf den alten (Desktop-)Abstand "zurückkorrigieren" (siehe Erklärung oben). .mega-menu-projects-track wird 4x wiederholt: style.css hat eine Regel "...e-n-menu-content .e-con-full { padding-left: 20px !important }", die (da unser Track selbst die Klasse e-con-full trägt) ebenfalls zutrifft und mit 3 Klassen-Selektoren spezifischer ist als unsere einfache Klasse – live geprüft: ohne die zusätzliche Spezifität hätte diese Elementor-Regel gewonnen und der Abstand wäre trotz !important stehen geblieben. */ .mega-menu-projects-track.mega-menu-projects-track.mega-menu-projects-track.mega-menu-projects-track { padding-left: 0 !important; scroll-padding-left: 0 !important; } }