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

/* Modul-Raster */
 .mdl-art-301 {
	/*overflow: hidden;*/
	position: relative;
	width: calc(100% - 20px);
	margin-left: 20px;
}
@media screen and (min-width: 768px) {
	.mdl-art-301 {
		width: calc(100% - 50px);
		margin-left: 50px;
	}
}
@media screen and (min-width: 1600px) {
	.mdl-art-301 {
		width: calc(100% - 140px);
		margin-left: 140px;
	}
}


/* OWL-Carousel */
.mdl301-carousel {
    height: auto;
}
	.mdl301-carousel .owl-stage .owl-item {
		float: left;
	}


/* Animtations-Geschwindigkeit */
.mdl301-carousel .animated {
	-webkit-animation-duration: 1000ms;
	animation-duration: 2000ms;
}


/* OWL-Dots, OWL-Play/-Stopp */
.mdl301-owl-nav {
	z-index: 3;
	position: absolute;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	top: calc(var(--mdl301-height, 1vh) * 100);
	left: calc(70px / 2);
	width: 24px;
	height: auto;
	padding-top: 18px;
	transform: translateX(-12px);
}
	/* OWL-Dots */
	.mdl301-owl-dots .owl-dot {
		cursor: pointer;
		display: block;
		width: 10px;
		height: 10px;
		margin-top: 18px;
		border: none;
		border-radius: 50%;
		background-color: var(--main-color-1);
	}
	.mdl301-owl-dots .owl-dot.active {
		background-color: var(--main-color-2);
	}
	/* Button Scroll Top */
	.mdl301-owl-nav .owl-stop, .mdl301-owl-nav .owl-play {
		cursor: pointer;
		display: block;
		width: 24px;
		height: 24px;
	}
	.mdl301-owl-nav .owl-play {
		display: none;
	}
		.mdl301-owl-nav .owl-stop svg {
			fill: var(--main-color-2);
		}
		.mdl301-owl-nav .owl-play svg {
			fill: var(--main-color-3);
		}
@media screen and (min-width: 768px) {
	.mdl301-owl-nav {
		left: calc(140px / 2);
	}
}
@media screen and (min-width: 992px) {
	.mdl301-owl-nav {
		justify-content: flex-start;
		top: calc(var(--mdl301-height, 1vh) * 100);
		left: calc((70px + (var(--gap) - 25px)) / 2);
	}
}
@media screen and (min-width: 1400px) {
	.mdl301-owl-nav {
		left: calc((91px + (var(--gap) - 35px)) / 2);
	}
}
@media screen and (min-width: 1600px) {
	.mdl301-owl-nav {
		justify-content: flex-end;
		top: 0;
		left: -54px;
		height: calc(var(--mdl301-height, 1vh) * 100);
		padding-top: 0;
		padding-bottom: 30px;
		transform: translateX(0);
	}
		.mdl301-owl-dots .owl-dot {
			margin-top: 20px;
		}
}


/* OWL-Items */
.mdl301-carousel .owl-item > .testimonial-item {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	color: var(--main-color-2);
}


/* Foto-Box */
.mdl301-carousel .picture-wrapper {
	z-index: 1;
	position: relative;
	display: block;
	width: 100%;
	height: 0;
	padding-top: 72.5%;
	border-top-left-radius: 20px;
	border-bottom-left-radius: 20px;
	overflow: hidden;
	font-size: 0;
	line-height: 0;
}
.mdl301-carousel .picture-wrapper.no-image {
	background-color: var(--main-color-2-20);
}
	.mdl301-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) {
	.mdl301-carousel .picture-wrapper {
		padding-top: calc(var(--mdl301-height, 1vh) * 100);
	}
}


/* Text-Boxen */
.mdl301-carousel .content-wrapper {
	z-index: 2;
	width: calc(100% - 70px);
	margin-left: 70px;
	margin-top: -50px;
	padding: 14px 30px 0 20px;
	border-top-left-radius: 10px;
	background-color: var(--main-color-white);
}
@media screen and (min-width: 768px) {
	.mdl301-carousel .content-wrapper {
		width: calc(100% - 140px);
		margin-top: -100px;
		margin-left: 140px;
		padding: 20px 25px 0;
		border-top-left-radius: 20px;
	}
}
@media screen and (min-width: 992px) {
	.mdl301-carousel .content-wrapper {
		width: calc((6.5 * var(--col-width-1)) + (5 * var(--gap)) + 50px); /* 50px = Padding left + right */
		margin-top: -95px;
		margin-left: calc(70px + (var(--gap) - 25px)); /* Abstand: 1 Spalte + Zwischenabstand - Padding left */
		border-top-right-radius: 20px;
	}
}
@media screen and (min-width: 1400px) {
	.mdl301-carousel .content-wrapper {
		width: calc((5.5 * var(--col-width-1)) + (4 * var(--gap)) + 70px); /* 70px = Padding left + right */
		margin-top: -110px;
		margin-left: calc(91px + (var(--gap) - 35px)); /* Abstand: 1 Spalte + Zwischenabstand - Padding left */
		padding: 27px 35px 0;
	}
}
@media screen and (min-width: 1600px) {
	.mdl301-carousel .content-wrapper {
		margin-top: -140px;
	}
}


/* Absätze */
.mdl301-carousel h3 + p {
	margin-top: 0;
	margin-bottom: 22px;
}
@media screen and (min-width: 768px) {
	.mdl301-carousel h3 + p {
		margin-bottom: 29px;
	}
}
@media screen and (min-width: 1400px) {
	.mdl301-carousel h3 + p {
		margin-bottom: 33px;
	}
}


/* Einleitung */
.mdl301-carousel p.limited-paragraph {
	overflow: hidden;
	text-overflow: ellipsis; /* Adds an ellipsis (...) at the end of the truncated text */
	display: -webkit-box; /* Required for -webkit-line-clamp to work */
	-webkit-line-clamp: 5; /* The desired number of lines to display */
	-webkit-box-orient: vertical; /* Required for -webkit-line-clamp to work */
	line-clamp: 5; /* Standard line-clamp property for better compatibility */
}


/* Button: weiterlesen */
.mdl301-carousel a.btn {
	display: inline-block;
	position: relative;
	padding: 6px 14px 7px;
	border-radius: 10px;
	background-color: var(--main-color-2);
	font-size: 0.875rem; /* 14px */
	color: var(--main-color-white);
}
@media screen and (min-width: 768px) {
	.mdl301-carousel a.btn {
		font-size: 1rem; /* 16px */
	}
}
@media screen and (min-width: 992px) {
	.mdl301-carousel a.btn {
		-o-transition: background 300ms var(--cubic-bezier);
		-ms-transition: background 300ms var(--cubic-bezier);
		-moz-transition: background 300ms var(--cubic-bezier);
		-webkit-transition: background 300ms var(--cubic-bezier);
		transition: background 300ms var(--cubic-bezier);
	}
	.mdl301-carousel a.btn:hover {
		background-color: var(--main-color-1);
	}
}
@media screen and (min-width: 1400px) {
	.mdl301-carousel a.btn {
		padding: 7px 16px 8px;
		font-size: 1.125rem; /* 18px */
	}
}