/**
 * Maple Schräge Slider Sektion v1.0.2
 * Parent/Child-Slider mit SplideJS und echter Clip-Path-Fläche.
 */

.maple-sls {
	--maple-sls-bg-color: #67e8c4;
	--maple-sls-bg-image: none;
	--maple-sls-bg-position: center center;
	--maple-sls-bg-size: cover;
	--maple-sls-text-color: inherit;
	--maple-sls-slant-height: clamp(30px, 5vw, 150px);
	--maple-sls-overlap-previous: 80px;
	--maple-sls-overlap-next: 80px;
	--maple-sls-padding-top: 140px;
	--maple-sls-padding-bottom: 140px;
	--maple-sls-container: 1275px;
	--maple-sls-container-padding: 15px;
	--maple-sls-content-gap: 20px;
	--maple-sls-slider-gap: 20px;
	position: relative;
	z-index: 1;
	margin: 0;
	isolation: isolate;
	overflow: visible;
}

.maple-sls--overlap-previous {
	margin-top: calc(-1 * var(--maple-sls-overlap-previous));
}

.maple-sls--overlap-next {
	margin-bottom: calc(-1 * var(--maple-sls-overlap-next));
}

.maple-sls__bg {
	--maple-sls-top-left-y: 0px;
	--maple-sls-top-right-y: 0px;
	--maple-sls-bottom-right-y: 100%;
	--maple-sls-bottom-left-y: 100%;
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-color: var(--maple-sls-bg-color);
	background-image: var(--maple-sls-bg-image);
	background-position: var(--maple-sls-bg-position);
	background-size: var(--maple-sls-bg-size);
	background-repeat: no-repeat;
	clip-path: polygon(
		0 var(--maple-sls-top-left-y),
		100% var(--maple-sls-top-right-y),
		100% var(--maple-sls-bottom-right-y),
		0 var(--maple-sls-bottom-left-y)
	);
}

.maple-sls__bg--top-left_high {
	--maple-sls-top-left-y: 0px;
	--maple-sls-top-right-y: var(--maple-sls-slant-height);
}

.maple-sls__bg--top-right_high {
	--maple-sls-top-left-y: var(--maple-sls-slant-height);
	--maple-sls-top-right-y: 0px;
}

.maple-sls__bg--top-none {
	--maple-sls-top-left-y: 0px;
	--maple-sls-top-right-y: 0px;
}

.maple-sls__bg--bottom-left_high {
	--maple-sls-bottom-left-y: calc(100% - var(--maple-sls-slant-height));
	--maple-sls-bottom-right-y: 100%;
}

.maple-sls__bg--bottom-right_high {
	--maple-sls-bottom-left-y: 100%;
	--maple-sls-bottom-right-y: calc(100% - var(--maple-sls-slant-height));
}

.maple-sls__bg--bottom-none {
	--maple-sls-bottom-left-y: 100%;
	--maple-sls-bottom-right-y: 100%;
}

.maple-sls__container {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--maple-sls-container);
	margin-left: auto;
	margin-right: auto;
	padding: var(--maple-sls-padding-top) var(--maple-sls-container-padding) var(--maple-sls-padding-bottom);
	color: inherit;
}

.maple-sls--container-fluid .maple-sls__container {
	max-width: none;
}

.maple-sls--text-light {
	--maple-sls-text-color: #000;
}

.maple-sls--text-light a:not(.vc_btn3):not(.wp-block-button__link),
.maple-sls--text-light .wpb_text_column,
.maple-sls--text-light .wpb_text_column p,
.maple-sls--text-light h1,
.maple-sls--text-light h2,
.maple-sls--text-light h3,
.maple-sls--text-light h4,
.maple-sls--text-light h5,
.maple-sls--text-light h6,
.maple-sls--text-light li {
	color: var(--maple-sls-text-color);
}

.maple-sls__vc-row,
.maple-sls__vc-col,
.maple-sls__wpb-wrapper {
	position: relative;
	z-index: 2;
}

.maple-sls__vc-row.vc_row {
	margin-left: 0;
	margin-right: 0;
}

.maple-sls__vc-col.wpb_column.vc_column_container > .vc_column-inner {
	padding-left: 0;
	padding-right: 0;
}

.maple-sls__splide {
	position: relative;
	visibility: visible;
}

.maple-sls__splide:not(.is-initialized) .splide__list {
	display: flex;
	gap: var(--maple-sls-slider-gap);
	overflow: hidden;
}

.maple-sls__splide:not(.is-initialized) .splide__slide {
	flex: 0 0 100%;
}

.maple-sls-slide {
	min-width: 0;
}

.maple-sls-slide__inner {
	min-width: 0;
}

.maple-sls-slide__inner > :first-child {
	margin-top: 0;
}

.maple-sls-slide__inner > :last-child {
	margin-bottom: 0;
}

.maple-sls-slide__inner .vc_row {
	max-width: 100%;
}

.maple-sls .splide__arrow {
	z-index: 10;
}

.maple-sls .splide__pagination {
	bottom: -2.5rem;
}

.maple-sls  .splide__track--fade>.splide__list>.splide__slide {
	padding-left: 0 !important;
}

/* Backend: Slide-Inhalte im WPBakery-Editor bearbeitbar halten. */
.vc_editor .maple-sls__splide .splide__track,
.compose-mode .maple-sls__splide .splide__track {
	overflow: visible;
}

.vc_editor .maple-sls__splide:not(.is-initialized) .splide__list,
.compose-mode .maple-sls__splide:not(.is-initialized) .splide__list {
	display: block;
}

.vc_editor .maple-sls__splide:not(.is-initialized) .splide__slide,
.compose-mode .maple-sls__splide:not(.is-initialized) .splide__slide {
	margin-bottom: var(--maple-sls-content-gap);
	border: 1px dashed rgba(0, 0, 0, 0.2);
	padding: 15px;
}

@media (max-width: 991.98px) {
	.maple-sls {
		--maple-sls-padding-top: clamp(70px, 10vw, 110px);
		--maple-sls-padding-bottom: clamp(70px, 10vw, 110px);
	}
}

@media (max-width: 767.98px) {
	.maple-sls {
		--maple-sls-container-padding: 15px;
	}

	.maple-sls .splide__pagination {
		bottom: -2rem;
	}
}

@media (min-width: 576px) {		
	.maple-sls__container {
		max-width: 540px;
	}
}

@media (min-width: 768px) {	
	.maple-sls__container {
		max-width: 720px;
	}
}

@media (min-width: 992px) {	
	.maple-sls__container {
		max-width: 960px;
	}
}	
	
@media (min-width: 1200px) {
	.maple-sls__container {
		max-width: 1140px;
	}
}

@media (min-width: 1400px) {
	.maple-sls__container {
		max-width: var(--maple-sls-container);
	}
}

.maple-sls--text-light  .splide__pagination li button {
	background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M-3.27835e-07 7.5L4.95442 4.95442L7.5 6.25839e-07L10.0456 4.95442L15 7.5L10.0456 10.0456L7.5 15L4.95442 10.0456L-3.27835e-07 7.5Z' fill='%23000'/%3E%3C/svg%3E");		
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: 50%;
}

.maple-sls--text-light .splide__arrow svg {	
	transition: 0.2s;
	fill: #000;
}