/* ############################################################
	206 - NAVIGATION: BOX
############################################################ */

/* Modul-Abstände */
.middle__panel .mdl-art-206 {
	width: calc(100% + (2 * 20px));
	margin-left: -20px;
	padding: 50px 20px;
}
@media screen and (min-width: 768px) {
	.middle__panel .mdl-art-206 {
		width: calc(100% + (2 * 50px));
		margin-left: -50px;
		padding: 80px 50px;
	}
}
@media screen and (min-width: 1200px) {
	.middle__panel .mdl-art-206 {
		width: calc(100% + (2 * 80px));
		margin-left: -80px;
		padding: 125px 80px;
	}
}
@media screen and (min-width: 1600px) {
	.middle__panel .mdl-art-206 {
		width: calc(100% + (2 * 170px));
		margin-left: -170px;
		padding-left: 170px;
		padding-right: 170px;
	}
}


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


/* Modulbox */
.mdl206-modul-box {
	position: relative;
	width: 100%;
}
	.mdl206-modul-box .content-wrapper {
		transform-origin: top left;
	}
@media screen and (min-width: 992px) {
	.mdl206-modul-box .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);
	}
	.mdl206-modul-box .flex-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);
	}
}


/* Titel, Schriftgrösse */
.mdl206-modul-box h3 {
	margin-bottom: 5px;
	font-size: 1.4375rem; /* 23px */
	line-height: 1.222;
}
.mdl206-modul-box p {
	font-size: 1.1875rem; /* 19px */
	line-height: 1.263;
}
@media screen and (min-width: 1200px) {
	.mdl206-modul-box h3 {
		margin-bottom: 13px;
		font-size: 1.6875rem; /* 27px */
	}
	.mdl206-modul-box p {
		line-height: 1.368;
	}
}


/* Einleitung */
.mdl206-modul-box 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: 6; /* The desired number of lines to display */
	-webkit-box-orient: vertical; /* Required for -webkit-line-clamp to work */
	line-clamp: 6; /* Standard line-clamp property for better compatibility */
}


/* Button: Pfeil */
.mdl206-modul-box .btn {
	display: inline-block;
	position: absolute;
	right: 25px;
	bottom: 25px;
	width: 14px;
	height: 14px;
	font-size: 0;
	line-height: 0;
	transform-origin: bottom right;
}
	.mdl206-modul-box .btn svg {
		display: block;
		width: 16px;
		height: 16px;
		fill: var(--main-color-3);
	}
@media screen and (min-width: 992px) {
	.mdl206-modul-box .btn, .mdl206-modul-box .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);
	}
	.mdl206-modul-box .flex-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) {
	.mdl206-modul-box .btn {
		right: 29px;
		bottom: 28px;
		width: 16px;
		height: 16px;
	}
}


/* ############################################################
	RASTER
############################################################ */

/* Rastersystem */
.mdl206-modul-box > .flex-container {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: left;
	width: 100%;
}
	.mdl206-modul-box > .flex-container > .flex-item {
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		flex-wrap: wrap;
		margin: 20px var(--gap) 0 0;
		padding: 25px 64px 30px 25px;
		border-radius: 24px;
		background-color: var(--main-color-4);
		color: var(--main-color-1);
	}
	.mdl-art-206.bg-color-4 .mdl206-modul-box > .flex-container > .flex-item {
		background-color: var(--main-color-white);
	}
@media screen and (max-width: 767.98px) {
	/* 1/1  - 1 columns per row */
	.mdl206-modul-box > .flex-container > .flex-item {
		width: 100%;
		margin-right: 0;
	}
	.mdl206-modul-box > .flex-container > .flex-item:nth-child(-n+1) {
		margin-top: 0;
	}
}
@media screen and (min-width: 768px) and (max-width: 1599.98px) {
	/* 1/2  - 2 columns per row */
	.mdl206-modul-box > .flex-container > .flex-item {
		width: calc(1/2*100% - (1 - 1/2)*var(--gap));
		margin-top: 40px;
	}
	.mdl206-modul-box > .flex-container > .flex-item:nth-child(2n),
	.mdl206-modul-box > .flex-container > .flex-item:last-child {
		margin-right: 0;
	}
	.mdl206-modul-box > .flex-container > .flex-item:nth-child(-n+2) {
		margin-top: 0;
	}
}
@media screen and (min-width: 1600px) {
	/* 1/4  - 4 columns per row */
	.mdl206-modul-box > .flex-container > .flex-item {
		width: calc(1/4*100% - (1 - 1/4)*var(--gap));
		margin-top: 40px;
		padding: 47px 45px 51px 45px;
	}
	.mdl206-modul-box > .flex-container > .flex-item:nth-child(4n),
	.mdl206-modul-box > .flex-container > .flex-item:last-child {
		margin-right: 0;
	}
	.mdl206-modul-box > .flex-container > .flex-item:nth-child(-n+4) {
		margin-top: 0;
	}
}