/* ############################################################
	MODULRASTER
############################################################ */

/* Modul-Abstände */
.middle__panel .mdl-art-200 {
	overflow: hidden;
	width: calc(100% + 40px);
	margin-left: -20px;
	padding: 50px 20px;
}
.middle__panel .mdl-art-200.home {
	padding-top: 0;
}
@media screen and (min-width: 768px) {
	.middle__panel .mdl-art-200 {
		width: calc(100% + 100px);
		margin-left: -50px;
		padding: 115px 50px;
	}
	.middle__panel .mdl-art-200.home {
		padding-top: 35px;
	}
}
@media screen and (min-width: 1200px) {
	.middle__panel .mdl-art-200 {
		width: calc(100% + 160px);
		margin-left: -80px;
		padding: 180px 80px;
	}
	.middle__panel .mdl-art-200.home {
		padding-top: 55px;
	}
}
@media screen and (min-width: 1600px) {
	.middle__panel .mdl-art-200 {
		width: calc(100% + 340px);
		margin-left: -170px;
		padding-left: 170px;
		padding-right: 170px;
	}
}


/* Modultitel */
.mdl-art-200 h2.modultitel {
	margin-bottom: 23px;
	font-size: 1.5625rem; /* 25px */
	line-height: 1.354;
}
@media screen and (min-width: 1200px) {
	.mdl-art-200 h2.modultitel {
		display: inline-block;
		margin-bottom: 0;
		font-size: 1.9375rem; /* 31px */
	}
}


/* Header: Modultitel und OWL-Navigation */
.mdl200-header {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	width: 100%;
	margin-bottom: 30px;
}
@media screen and (min-width: 1200px) {
	.mdl200-header {
		flex-direction: row;
		align-items: center;
		margin-bottom: 40px;
	}
}


/* OWL-Carousel */
.mdl200-carousel {
    max-width: 100vw;
    height: auto;
}
	.mdl200-carousel .owl-stage-outer {
		overflow: visible;
		width: 100vw;
	}
		.mdl200-carousel .owl-stage {
			padding-left: 0 !important;
			display: inline-flex;
			justify-content: left;
		}
			.mdl200-carousel .owl-stage > .owl-item {
				float: none;
				border-radius: 24px;
				overflow: hidden;
				background-color: var(--main-color-white);
			}
				.mdl200-carousel .owl-item > a {
					display: flex;
					flex-direction: column;
					justify-content: flex-start;
					flex-wrap: wrap;
					width: 100%;
					height: 100%;
					margin: 0;
					padding: 0;
					font-size: 1.125rem; /* 18px */
					line-height: 1.2;
					color: var(--main-color-1);
				}
				.mdl200-carousel .owl-item > a:hover {
					color: var(--main-color-1);
				}
				.mdl200-carousel .owl-item > a.bg-color-2,
				.mdl200-carousel .owl-item > a.bg-color-2:hover {
					color: var(--main-color-white);
				}
@media screen and (min-width: 1200px) {
	.mdl200-carousel .owl-item > a {
		font-size: 1.25rem; /* 20px */
	}
}


/* Navigation */
/* Reset */
.mdl200-owl-nav button {
	background: none;
	color: inherit;
	border: none;
	padding: 0 !important;
	font: inherit;
}
.mdl200-owl-nav {
	position: relative;
	display: flex;
	justify-content: flex-start;
	width: 126px;
	height: 38px;
	font-size: 0;
	line-height: 0;
}
	.mdl200-owl-nav .owl-next {
		margin-left: 25px;
	}
	.mdl200-owl-nav .owl-prev {
		transform: rotate(180deg);
	}
		.mdl200-owl-nav .owl-prev span, .mdl200-owl-nav .owl-next span {
			cursor: pointer;
			display: inline-block;
			width: 38px;
			height: 38px;
			border-radius: 50%;
			background-color: var(--main-color-1);
			background-image: url("../../evogt/Images/Elemente/Button_Arrow_Transparent.svg");
			background-position: center;
			background-repeat: no-repeat;
			background-size: contain;
			color: transparent;
		}
		.mdl200-owl-nav .owl-prev.disabled span, .mdl200-owl-nav .owl-next.disabled span {
			cursor: default;
			background-color: var(--main-color-4);
		}
@media screen and (min-width: 992px) {
	.mdl200-owl-nav .owl-prev span, .mdl200-owl-nav .owl-next span {
		-o-transition: all 300ms var(--cubic-bezier);
		-ms-transition: all 300ms var(--cubic-bezier);
		-moz-transition: all 300ms var(--cubic-bezier);
		-webkit-transition: all 300ms var(--cubic-bezier);
		transition: all 300ms var(--cubic-bezier);
	}
	.mdl200-owl-nav .owl-prev:not([class~="disabled"]):hover span, .mdl200-owl-nav .owl-next:not([class~="disabled"]):hover span {
		-webkit-transform: scale(0.955);
		-moz-transform: scale(0.955);
		-ms-transform: scale(0.955);
		-o-transform: scale(0.955);
		transform: scale(0.955);
	}
}
@media screen and (min-width: 1200px) {
	.mdl200-owl-nav {
		justify-content: flex-end;
		width: 170px;
		height: 45px;
		margin-left: auto;
	}
		.mdl200-owl-nav .owl-next {
			margin-left: 40px;
		}
			.mdl200-owl-nav .owl-prev span, .mdl200-owl-nav .owl-next span {
				width: 45px;
				height: 45px;
			}
}


/* Text-Box */
.mdl200-carousel .content-wrapper {
	padding: 20px 25px 30px 25px;
	transform-origin: top left;
}

	/* Titel */
	.mdl200-carousel h3 {
		margin-bottom: 7px;
		font-size: 1.625rem; /* 26px */
		line-height: 1.2;
		letter-spacing: normal;
	}
	
	/* Absätze */
	.mdl200-carousel h3 + p {
		margin-top: 2px;
	}
@media screen and (min-width: 992px) {
	.mdl200-carousel .content-wrapper {
		-o-transition: all 300ms var(--cubic-bezier);
		-ms-transition: all 300ms var(--cubic-bezier);
		-moz-transition: all 300ms var(--cubic-bezier);
		-webkit-transition: all 300ms var(--cubic-bezier);
		transition: all 300ms var(--cubic-bezier);
	}
	.mdl200-carousel .link-item:hover .content-wrapper {
		-webkit-transform: scale(0.955);
		-moz-transform: scale(0.955);
		-ms-transform: scale(0.955);
		-o-transform: scale(0.955);
		transform: scale(0.955);
	}
}
@media screen and (min-width: 1200px) {
	.mdl200-carousel .content-wrapper {
		padding: 30px 35px 38px 35px;
	}
	
		/* Titel */
		.mdl200-carousel h3 {
			margin-bottom: 10px;
			font-size: 1.875rem; /* 30px */
		}
	
		/* Absätze */
		.mdl200-carousel h3 + p {
			margin-top: 2px;
		}
}


/* Icon */
.mdl200-carousel .content-wrapper .icon {
	display: block;
	width: auto;
	height: 33px;
	margin-bottom: 24px;
}
	.mdl200-carousel .content-wrapper .icon svg {
		display: inline-block;
		width: auto;
		height: 33px;
		fill: var(--main-color-2);
	}
@media screen and (min-width: 1200px) {
	.mdl200-carousel .content-wrapper .icon {
		height: 38px;
		margin-bottom: 17px;
	}
		.mdl200-carousel .content-wrapper .icon svg {
			height: 38px;
		}
}


/* Button: Pfeil */
.mdl200-carousel .btn {
	display: inline-block;
	position: absolute;
	right: 25px;
	bottom: 25px;
	width: 14px;
	height: 14px;
	font-size: 0;
	line-height: 0;
	transform-origin: bottom right;
}
	.mdl200-carousel .btn svg {
		display: block;
		width: 16px;
		height: 16px;
		fill: var(--main-color-white);
	}
@media screen and (min-width: 992px) {
	.mdl200-carousel .btn, .mdl200-carousel .btn svg {
		-o-transition: all 300ms var(--cubic-bezier);
		-ms-transition: all 300ms var(--cubic-bezier);
		-moz-transition: all 300ms var(--cubic-bezier);
		-webkit-transition: all 300ms var(--cubic-bezier);
		transition: all 300ms var(--cubic-bezier);
	}
	.mdl200-carousel .link-item:hover .btn {
		-webkit-transform: scale(1.125);
		-moz-transform: scale(1.125);
		-ms-transform: scale(1.125);
		-o-transform: scale(1.125);
		transform: scale(1.125);
	}
}
@media screen and (min-width: 1200px) {
	.mdl200-carousel .btn {
		right: 35px;
		bottom: 35px;
		width: 16px;
		height: 16px;
	}
}


/* Foto-Box */
.mdl200-carousel .picture-wrapper {
	position: relative;
	display: block;
	width: 100%;
	height: 0;
	margin-top: auto;
	padding-top: 90%;
	border-top-left-radius: 24px;
	border-top-right-radius: 24px;
	overflow: hidden;
	transform-origin: center center;
}
	.mdl200-carousel .picture-wrapper img {
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
@media screen and (min-width: 992px) {
	.mdl200-carousel .picture-wrapper img {
		-o-transition: all 300ms var(--cubic-bezier);
		-ms-transition: all 300ms var(--cubic-bezier);
		-moz-transition: all 300ms var(--cubic-bezier);
		-webkit-transition: all 300ms var(--cubic-bezier);
		transition: all 300ms var(--cubic-bezier);
	}
	.mdl200-carousel .link-item:hover .picture-wrapper img {
		-webkit-transform: scale(1.125);
		-moz-transform: scale(1.125);
		-ms-transform: scale(1.125);
		-o-transform: scale(1.125);
		transform: scale(1.125);
	}
}