/**
 * Maple Schräge Bild/Text Sektion v1.3.0
 * Robuster Clip-Path-Aufbau:
 * - Der obere Hintergrund wird als eigene Fläche geclippt.
 * - Der Inhalt selbst wird nicht geclippt, damit das Überlappungsbild sauber über dem unteren Bild liegen kann.
 * - Die Containerbreite wird per --maple-sit-container auf 1275px begrenzt und bleibt VC-kompatibel.
 */

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

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

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

.maple-sit__top {
	position: relative;
	z-index: 3;
	padding-top: var(--maple-sit-padding-top);
	padding-bottom: var(--maple-sit-padding-bottom);
	overflow: visible;
}

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

.maple-sit__top-bg--top-left_high {
	--maple-sit-top-left-y: 0px;
	--maple-sit-top-right-y: var(--maple-sit-slant-height);
}

.maple-sit__top-bg--top-right_high {
	--maple-sit-top-left-y: var(--maple-sit-slant-height);
	--maple-sit-top-right-y: 0px;
}

.maple-sit__top-bg--top-none {
	--maple-sit-top-left-y: 0px;
	--maple-sit-top-right-y: 0px;
}

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

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

.maple-sit__container {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--maple-sit-container);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--maple-sit-container-padding);
	padding-right: var(--maple-sit-container-padding);
}

.maple-sit--container-fluid .maple-sit__container {
	max-width: none;
}

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

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

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

/* Der eigentliche Inhaltsbereich bleibt als VC-Zeile/-Spalte gerendert, die Modulbreite wird aber exakt über --maple-sit-container gesteuert. */
.maple-sit__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
	align-items: stretch;
	gap: var(--maple-sit-content-gap);
}

.maple-sit__left,
.maple-sit__right {
	min-width: 0;
}

.maple-sit__left {
	display: flex;
	flex-direction: column;
}

.maple-sit__heading {
	max-width: 100%;	
	text-transform: uppercase;
	text-wrap: balance;
}

.maple-sit__top--heading-black .maple-sit__heading {
	color: #050505;
}

.maple-sit__top--heading-white .maple-sit__heading {
	color: #ffffff;
}

.maple-sit__overlap-image-wrap {
	width: min(100%, var(--maple-sit-overlap-image-width));
	margin: auto 0 calc(-1 * (var(--maple-sit-overlap-image-overlap) + var(--maple-sit-slant-height)));
	position: relative;
	z-index: 8;
}

.maple-sit__overlap-image {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	object-fit: cover;
}

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

.maple-sit__right {
	display: flex;
	align-items: center;
}

.maple-sit__right a {
	background-color: var(--black);
	color: #fff;
	text-decoration: none;
	padding: 20px 20px 17px;
	font-size: 24px;
	display: inline-block;
	text-align: center;
	border-radius: 50px;
	text-transform: uppercase;
	font-weight: 700;
}

.maple-sit__right a:hover {
	background-color: var(--aqua-4);
	color: #000;
}

.site-main .maple-sit__right {
	--bullet-color: var(--black);
}

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

.maple-sit__content p,
.maple-sit__content li {
	color: var(--black);
}

.maple-sit__content ul,
.maple-sit__content ol {
	padding-left: 1.25em;
}

.maple-sit__bottom {
	--maple-sit-bottom-top-left-y: 0px;
	--maple-sit-bottom-top-right-y: 0px;
	--maple-sit-bottom-bottom-right-y: 100%;
	--maple-sit-bottom-bottom-left-y: 100%;
	position: relative;
	z-index: 1;
	min-height: calc(var(--maple-sit-bottom-height) + var(--maple-sit-slant-height));
	margin-top: calc(-1 * var(--maple-sit-slant-height));	
	background-image: var(--maple-sit-bottom-bg-image);
	background-position: var(--maple-sit-bottom-bg-position);
	background-size: cover;
	background-repeat: no-repeat;
	clip-path: polygon(
		0 var(--maple-sit-bottom-top-left-y),
		100% var(--maple-sit-bottom-top-right-y),
		100% var(--maple-sit-bottom-bottom-right-y),
		0 var(--maple-sit-bottom-bottom-left-y)
	);
	filter: grayscale(1);
	transition: filter 0.5s;
}

.maple-sit__bottom:hover {	
	filter: grayscale(0);
}

.maple-sit__bottom--top-left_high {
	--maple-sit-bottom-top-left-y: 0px;
	--maple-sit-bottom-top-right-y: var(--maple-sit-slant-height);
}

.maple-sit__bottom--top-right_high {
	--maple-sit-bottom-top-left-y: var(--maple-sit-slant-height);
	--maple-sit-bottom-top-right-y: 0px;
}

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

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

.maple-sit__bottom--bottom-none {
	--maple-sit-bottom-bottom-left-y: 100%;
	--maple-sit-bottom-bottom-right-y: 100%;
}

@media (max-width: 991.98px) {
	.maple-sit {
		--maple-sit-padding-top: clamp(96px, 12vw, 130px);
		--maple-sit-padding-bottom: clamp(120px, 16vw, 170px);
	}

	.maple-sit__grid {
		grid-template-columns: 1fr;
	}

	.maple-sit__right {
		order: 3;
	}

	.maple-sit__left {
		display: block;
	}

	.maple-sit__overlap-image-wrap {			
		margin-top: 0;
		margin-bottom: 0;	
	}
}

@media (max-width: 575.98px) {
	.maple-sit {
		--maple-sit-slant-height: clamp(28px, 9vw, 56px);
		--maple-sit-padding-top: 86px;
		--maple-sit-padding-bottom: 120px;
		--maple-sit-overlap-image-overlap: 72px;
		--maple-sit-bottom-height: 300px;
	}

	.maple-sit__heading {
		font-size: clamp(2.25rem, 12vw, 3.7rem);
	}
}

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

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

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

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