/* * Hinweis zu den doppelten Selektoren mit -yes: * Die Schalter setzen ihre Klasse seit 1.9.65 ueber prefix_class, Elementor * haengt dabei den gespeicherten Wert an ("mk-pfeil-rund-yes"). Die alte, in * before_render gesetzte Form ohne Suffix bleibt bestehen, damit bereits * ausgelieferte Seiten unveraendert weiterlaufen - deshalb steht jede Regel * fuer beide Schreibweisen. */ /* ------------------------------------------------------------------ * Sicherheitsnetz gegen waagerechte Scrollbalken * * Ein Elementor-Karussell legt alle Slides nebeneinander ins DOM - bei * einem Bilderkarussell schnell ueber 3000px breit. Zurueckgehalten wird * das durch eine einzige fremde Regel: .swiper { overflow: hidden } aus * swiper.min.css. * * Gemessen am 09.09.2026 auf systemfaktor.de/karriere (iPhone-Breite 390): * mit dieser Regel scrollWidth 390, ohne sie 3221 - also 2831px Ueberhang. * Zwischen dem Slider und dem body steht KEIN Vorfahre mit overflow-x, * der das auffangen wuerde. Faellt swiper.min.css aus oder kommt es * verzoegert - Used-CSS- und Delay-Optimierungen, ein JS-Fehler, eine * langsame Verbindung -, reisst die Seite entsprechend weit auf. Auf dem * Telefon laesst sich die Seite dann nach rechts wegschieben und zeigt * neben dem Inhalt eine leere Flaeche. * * Deshalb steht dieselbe Regel hier noch einmal. Sie kostet nichts, * solange Swipers Stylesheet da ist, und faengt den Ausfall ab. * * Bewusst als eigene Zeile ganz oben: die Anschnitt-Regeln weiter unten * heben overflow fuer .mk-bleed-next gezielt wieder auf und stehen * danach - bei gleicher Spezifitaet gewinnt die spaetere Regel, der * Anschnitt bleibt also unberuehrt. * ------------------------------------------------------------------ */ .elementor .swiper { overflow: hidden; } /* ------------------------------------------------------------------ * Der Anschnitt darf die Seite nicht scrollbar machen * * Jede Anschnitt-Art oeffnet die rechte Kante des .swiper und laesst den * naechsten Slide darueber hinausragen. Versteckt wird der Rest per * clip-path - und genau hier liegt die Falle: clip-path wirkt rein * optisch und veraendert die scrollbare Flaeche NICHT. Der Slide bleibt * also scrollbar, obwohl man ihn nicht sieht. Auffangen kann das nur ein * Vorfahre mit overflow-x, nichts am .swiper selbst - auch overflow:clip * mit grosszuegigem overflow-clip-margin nicht, denn was sichtbar bleibt, * ragt weiterhin in den Vorfahren. * * Gemessen am 09.09.2026 auf markoon-druckproduktion (Viewport 1425, * Modus "pfeil"): scrollWidth 2486 statt 1425, also 1061px waagerechter * Scrollbereich. Auf dem Telefon laesst sich die Seite damit nach rechts * wegschieben und zeigt neben dem Inhalt eine leere Flaeche. * * Vorher stand diese Absicherung dreimal da - je Breakpoint und nur fuer * die Art "aussen". Die Arten "innen" und "pfeil" waren nicht abgedeckt, * obwohl auch sie overflow oeffnen. Jetzt eine Regel fuer alle Arten und * alle Breite. Nebeneffekt: ein :has() statt dreien, was den Editor * entlastet - :has() wird bei jeder DOM-Aenderung neu bewertet. * * Der oberste Container ist der einzige Vorfahre, der zuverlaessig ueber * die volle Fensterbreite geht; bei einem Boxed-Container ist das der * aeussere Teil. Deshalb bleibt der Anschnitt bis zum Fensterrand * sichtbar und wird erst dort abgeschnitten. * ------------------------------------------------------------------ */ .elementor > .e-con:has(.mk-bleed-next), .elementor > .elementor-section:has(.mk-bleed-next) { overflow-x: clip; } /** * Slider-Anschnitt nach rechts. * * Der naechste Slide liegt bereits im DOM rechts neben dem sichtbaren * Bereich und wird nur von overflow: hidden am .swiper abgeschnitten. Statt * Slidebreiten oder slidesPerView zu aendern - was Swipers Transform- * Berechnung stoert - wird hier nur diese Kante geoeffnet. * * clip-path: inset(0 -100vw 0 0) schneidet oben, unten und links buendig ab * und laesst ausschliesslich rechts offen. Ohne das wuerde auch der * vorherige Slide links in den Weissraum ragen. * * Der oberste Container schneidet am Fensterrand ab, sonst entsteht eine * horizontale Scrollbar. Er ist der einzige Vorfahre, der zuverlaessig ueber * die volle Fensterbreite geht - auch bei einem Boxed-Container, dessen * innerer Teil auf das Raster begrenzt ist. * * Drei Arten, jede mit eigener Klasse am Widget-Wrapper: * * .mk-bleed-next--aussen Kante bis zum Fensterrand oeffnen. * .mk-bleed-next--innen Slider bleibt im Raster, Slides werden schmaler. * Hier oeffnet das CSS nichts, sonst laeuft der * Anschnitt doppelt und ueber die Pfeilbuttons. * .mk-bleed-next--pfeil Anschnitt endet vor dem Pfeilbutton. Wie weit die * Kante geoeffnet wird (--mk-bleed-peek) und ob die * Flaeche rechts zurueckgenommen werden muss * (--mk-bleed-inset), misst das JS je Widget. * * Die Modi haben bewusst je eine eigene Klasse, statt einander per :not() * auszuschliessen: die Ausschluesse standen mit im :has() des obersten * Containers, und :has() wird bei jeder DOM-Aenderung neu bewertet - im * Elementor-Editor, der staendig neu rendert, kostet das spuerbar Zeit. * * Swipers eigenes Stylesheet setzt auf .swiper margin-left/right: auto. Eine * zurueckgenommene Breite wuerde dadurch auf beide Seiten verteilt und der * Slider auch links einruecken - deshalb margin-left: 0. */ /* ---------------------------------------------------------------- Desktop */ /* Geraete: desktop, laptop, widescreen (Elementor-Geraetemodus statt Media-Query) */ body[data-elementor-device-mode="desktop"] .mk-bleed-next--aussen.mk-bleed-next--desktop .swiper, body[data-elementor-device-mode="laptop"] .mk-bleed-next--aussen.mk-bleed-next--desktop .swiper, body[data-elementor-device-mode="widescreen"] .mk-bleed-next--aussen.mk-bleed-next--desktop .swiper { overflow: visible; clip-path: inset(0 -100vw 0 0); } body[data-elementor-device-mode="desktop"] .mk-bleed-next--pfeil.mk-bleed-next--desktop .swiper, body[data-elementor-device-mode="laptop"] .mk-bleed-next--pfeil.mk-bleed-next--desktop .swiper, body[data-elementor-device-mode="widescreen"] .mk-bleed-next--pfeil.mk-bleed-next--desktop .swiper { width: calc(100% - var(--mk-bleed-inset, 0px)); margin-left: 0; margin-right: auto; overflow: visible; clip-path: inset(0 calc(-1 * var(--mk-bleed-peek, 0px)) 0 0); } body[data-elementor-device-mode="desktop"] .mk-bleed-next--desktop[data-mk-bleed-fade] .swiper, body[data-elementor-device-mode="laptop"] .mk-bleed-next--desktop[data-mk-bleed-fade] .swiper, body[data-elementor-device-mode="widescreen"] .mk-bleed-next--desktop[data-mk-bleed-fade] .swiper { -webkit-mask-image: var(--mk-bleed-verlauf); mask-image: var(--mk-bleed-verlauf); -webkit-mask-size: var(--mk-bleed-maskbreite) 100%; mask-size: var(--mk-bleed-maskbreite) 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: left top; mask-position: left top; } /* ---------------------------------------------------------------- Tablet */ /* Geraete: tablet, tablet_extra (Elementor-Geraetemodus statt Media-Query) */ body[data-elementor-device-mode="tablet"] .mk-bleed-next--aussen.mk-bleed-next--tablet .swiper, body[data-elementor-device-mode="tablet_extra"] .mk-bleed-next--aussen.mk-bleed-next--tablet .swiper { overflow: visible; clip-path: inset(0 -100vw 0 0); } body[data-elementor-device-mode="tablet"] .mk-bleed-next--pfeil.mk-bleed-next--tablet .swiper, body[data-elementor-device-mode="tablet_extra"] .mk-bleed-next--pfeil.mk-bleed-next--tablet .swiper { width: calc(100% - var(--mk-bleed-inset, 0px)); margin-left: 0; margin-right: auto; overflow: visible; clip-path: inset(0 calc(-1 * var(--mk-bleed-peek, 0px)) 0 0); } body[data-elementor-device-mode="tablet"] .mk-bleed-next--tablet[data-mk-bleed-fade] .swiper, body[data-elementor-device-mode="tablet_extra"] .mk-bleed-next--tablet[data-mk-bleed-fade] .swiper { -webkit-mask-image: var(--mk-bleed-verlauf); mask-image: var(--mk-bleed-verlauf); -webkit-mask-size: var(--mk-bleed-maskbreite) 100%; mask-size: var(--mk-bleed-maskbreite) 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: left top; mask-position: left top; } /* ---------------------------------------------------------------- Mobil */ /* Geraete: mobile, mobile_extra (Elementor-Geraetemodus statt Media-Query) */ body[data-elementor-device-mode="mobile"] .mk-bleed-next--aussen.mk-bleed-next--mobile .swiper, body[data-elementor-device-mode="mobile_extra"] .mk-bleed-next--aussen.mk-bleed-next--mobile .swiper { overflow: visible; clip-path: inset(0 -100vw 0 0); } body[data-elementor-device-mode="mobile"] .mk-bleed-next--pfeil.mk-bleed-next--mobile .swiper, body[data-elementor-device-mode="mobile_extra"] .mk-bleed-next--pfeil.mk-bleed-next--mobile .swiper { width: calc(100% - var(--mk-bleed-inset, 0px)); margin-left: 0; margin-right: auto; overflow: visible; clip-path: inset(0 calc(-1 * var(--mk-bleed-peek, 0px)) 0 0); } body[data-elementor-device-mode="mobile"] .mk-bleed-next--mobile[data-mk-bleed-fade] .swiper, body[data-elementor-device-mode="mobile_extra"] .mk-bleed-next--mobile[data-mk-bleed-fade] .swiper { -webkit-mask-image: var(--mk-bleed-verlauf); mask-image: var(--mk-bleed-verlauf); -webkit-mask-size: var(--mk-bleed-maskbreite) 100%; mask-size: var(--mk-bleed-maskbreite) 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: left top; mask-position: left top; } /* * Maske und Maskenbreite an einer Stelle, damit die drei Geraeteblocks oben * nur noch zuweisen. Die Maske ist so breit wie der Slider plus dem Stueck, * das rechts aus ihm herausragt (--mk-bleed-peek) - sonst laege der Verlauf * an der Kante des Sliders statt am Ende des Anschnitts. */ .mk-bleed-next[data-mk-bleed-fade] { --mk-bleed-verlauf: linear-gradient( to right, #000 0, #000 calc(100% - var(--mk-bleed-fade, 80px)), transparent 100% ); --mk-bleed-maskbreite: calc(100% + var(--mk-bleed-peek, 0px)); } /* * Alle Slides gleich hoch. * * Swiper gibt jedem Slide eine feste Hoehe (height: 100%), womit sich jeder * Slide auf seinen eigenen Inhalt zusammenzieht. Mit height: auto greift * stattdessen die Streckung des Flex-Wrappers, und alle Slides bekommen die * Hoehe des hoechsten. Der Inhalt im Slide - bei Elementor ein Container - * muss die geerbte Hoehe dann noch ausfuellen, sonst steht die Karte weiter * oben im gestreckten Slide. */ .mk-slides-gleich .swiper-wrapper, .mk-slides-gleich-yes .swiper-wrapper { align-items: stretch; } .mk-slides-gleich .swiper-slide, .mk-slides-gleich-yes .swiper-slide { height: auto; } .mk-slides-gleich .swiper-slide > *, .mk-slides-gleich-yes .swiper-slide > * { height: 100%; } /* * Im Editor wird das Widget in einem eigenen Rahmen dargestellt; dort wuerde * der Anschnitt nach aussen ueber die Arbeitsflaeche laufen. Die Vorschau * bleibt deshalb beschnitten, das Frontend nicht. Der Anschnitt bis vor den * Pfeil bleibt sichtbar - der haelt sich ohnehin im Raster. */ .elementor-editor-active .mk-bleed-next--aussen .swiper { clip-path: inset(0 0 0 0); } /* ------------------------------------------------------------------ * Runde Pfeile, eigenes Icon und Scrollleiste * * Vorbild ist der Produkt-Slider von xxxlutz.de: runder Button mit * duennem Rand auf hellem Grund, der auf der Kachelkante liegt, und * darunter eine schmale Leiste als Fortschritt. * ------------------------------------------------------------------ */ .mk-pfeil-rund, .mk-pfeil-rund-yes { --mk-arrow-size: 44px; } .mk-pfeil-rund .elementor-swiper-button, .mk-pfeil-rund-yes .elementor-swiper-button, .mk-pfeil-rund .swiper-button-prev, .mk-pfeil-rund-yes .swiper-button-prev, .mk-pfeil-rund .swiper-button-next, .mk-pfeil-rund-yes .swiper-button-next { width: var(--mk-arrow-size); height: var(--mk-arrow-size); border-radius: 50%; background: #fff; border: 1px solid rgba(0, 0, 0, 0.15); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); display: flex; align-items: center; justify-content: center; /* Swiper setzt bei seinen eigenen Buttons eine feste Groesse per Pseudo-Element. */ margin-top: calc(var(--mk-arrow-size) / -2); transition: background-color 0.15s ease, border-color 0.15s ease; } .mk-pfeil-rund .elementor-swiper-button:hover, .mk-pfeil-rund-yes .elementor-swiper-button:hover, .mk-pfeil-rund .swiper-button-prev:hover, .mk-pfeil-rund-yes .swiper-button-prev:hover, .mk-pfeil-rund .swiper-button-next:hover, .mk-pfeil-rund-yes .swiper-button-next:hover { background: #f5f5f5; border-color: rgba(0, 0, 0, 0.3); } /* * Swipers eigene Pfeile zeichnen ihr Zeichen ueber ein Pseudo-Element mit * eigener Schriftgroesse. Das wuerde neben dem gewaehlten Icon doppelt * erscheinen - deshalb weg, sobald ein eigenes Icon gesetzt ist. */ .mk-pfeil-rund .swiper-button-prev[data-mk-icon]::after, .mk-pfeil-rund-yes .swiper-button-prev[data-mk-icon]::after, .mk-pfeil-rund .swiper-button-next[data-mk-icon]::after, .mk-pfeil-rund-yes .swiper-button-next[data-mk-icon]::after, .swiper-button-prev[data-mk-icon]::after, .swiper-button-next[data-mk-icon]::after { content: none; } .mk-pfeil-icon { display: block; font-size: calc(var(--mk-arrow-size, 44px) * 0.36); line-height: 1; width: auto; height: auto; max-width: 60%; max-height: 60%; } /* Scrollleiste unter dem Slider. */ .mk-leiste { position: relative; height: 3px; margin-top: 16px; border-radius: 3px; background: rgba(0, 0, 0, 0.1); overflow: hidden; } .mk-leiste__daumen { position: absolute; top: 0; bottom: 0; left: 0; width: 30%; border-radius: inherit; background: rgba(0, 0, 0, 0.55); } /* ------------------------------------------------------------------ * Paginierung im Modus "Bis vor den Pfeil" unter die sichtbaren Slides * * Der Modus kuerzt den .swiper rechts um --mk-bleed-inset (Platz fuer den * Pfeil). Die Punkte zentriert Elementor aber am Widget, nicht am .swiper - * sie sassen deshalb um den halben Inset rechts neben der Mitte der Karten * (gemessen meventa startseite-neu 25.09.2026: 3/7/21px). Das JS setzt die * Variable am Widget und entfernt sie, wenn der Modus nicht greift; der * Rueckfallwert 0 laesst dann alles unveraendert. * * Gilt fuer zentrierte Punkte (Elementor-Standard). Bei links oder rechts * ausgerichteten Punkten verschiebt es sie ebenfalls um den halben Inset. * ------------------------------------------------------------------ */ .mk-bleed-next--pfeil > .swiper-pagination-bullets.swiper-pagination-horizontal { margin-left: calc(var(--mk-bleed-inset, 0px) / -2); } /* ------------------------------------------------------------------ * Endlos-Modus: kopierte Slides nicht unsichtbar lassen * * Im Loop-Modus klont Swiper Slides, nachdem Elementor die Einblend- * Animationen bereits an die Originale gebunden hat. Die Klone behalten * dadurch dauerhaft .elementor-invisible - beim Weiterblaettern ueber das * Ende hinaus erscheinen weisse Flaechen statt Karten (meventa * ueber-uns-neu, 28.09.2026). Klone werden ohne Einblendung sofort gezeigt. * ------------------------------------------------------------------ */ .swiper-slide-duplicate .elementor-invisible { visibility: visible; }