/**
 * 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 */
@media (min-width: 1025px) {
	.mk-bleed-next--aussen.mk-bleed-next--desktop .swiper {
		overflow: visible;
		clip-path: inset(0 -100vw 0 0);
	}

	.elementor > .e-con:has(.mk-bleed-next--aussen.mk-bleed-next--desktop),
	.elementor > .elementor-section:has(.mk-bleed-next--aussen.mk-bleed-next--desktop) {
		overflow-x: clip;
	}

	.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);
	}

	.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 */
@media (min-width: 768px) and (max-width: 1024px) {
	.mk-bleed-next--aussen.mk-bleed-next--tablet .swiper {
		overflow: visible;
		clip-path: inset(0 -100vw 0 0);
	}

	.elementor > .e-con:has(.mk-bleed-next--aussen.mk-bleed-next--tablet),
	.elementor > .elementor-section:has(.mk-bleed-next--aussen.mk-bleed-next--tablet) {
		overflow-x: clip;
	}

	.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);
	}

	.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 */
@media (max-width: 767px) {
	.mk-bleed-next--aussen.mk-bleed-next--mobile .swiper {
		overflow: visible;
		clip-path: inset(0 -100vw 0 0);
	}

	.elementor > .e-con:has(.mk-bleed-next--aussen.mk-bleed-next--mobile),
	.elementor > .elementor-section:has(.mk-bleed-next--aussen.mk-bleed-next--mobile) {
		overflow-x: clip;
	}

	.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);
	}

	.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 {
	align-items: stretch;
}

.mk-slides-gleich .swiper-slide {
	height: auto;
}

.mk-slides-gleich .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);
}