/* ############################################################
	015 - TEXT/HTML mit Foto
############################################################ */

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


/* Hack: Um weisse Linie zu kaschieren */
.middle__panel .mdl-art-015.nmb-2 {
	margin-top: -1px;
}
.middle__panel .mdl-art-015.nmb-3 {
	margin-top: -2px;
}
.middle__panel .mdl-art-015.nmb-4 {
	margin-top: -3px;
}
.middle__panel .mdl-art-015.nmb-5 {
	margin-top: -4px;
}
.middle__panel .mdl-art-015.nmb-6 {
	margin-top: -5px;
}
.middle__panel .mdl-art-015.nmb-7 {
	margin-top: -6px;
}
.middle__panel .mdl-art-015.nmb-8 {
	margin-top: -7px;
}
.middle__panel .mdl-art-015.nmb-9 {
	margin-top: -8px;
}
.middle__panel .mdl-art-015.nmb-10 {
	margin-top: -9px;
}
.middle__panel .mdl-art-015.nmb-11 {
	margin-top: -10px;
}
.middle__panel .mdl-art-015.nmb-12 {
	margin-top: -11px;
}
.middle__panel .mdl-art-015.nmb-13 {
	margin-top: -12px;
}
.middle__panel .mdl-art-015.nmb-14 {
	margin-top: -13px;
}
.middle__panel .mdl-art-015.nmb-15 {
	margin-top: -14px;
}
.middle__panel .mdl-art-015.nmb-16 {
	margin-top: -15px;
}
.middle__panel .mdl-art-015.nmb-17 {
	margin-top: -16px;
}
.middle__panel .mdl-art-015.nmb-18 {
	margin-top: -17px;
}
.middle__panel .mdl-art-015.nmb-19 {
	margin-top: -18px;
}
.middle__panel .mdl-art-015.nmb-20 {
	margin-top: -19px;
}



/* Modul-Box */
.mdl015-modul-box {
	position: relative;
	display: flex;
	flex-direction: column;
}
@media screen and (min-width: 768px) {
	.mdl015-modul-box {
		flex-direction: row;
	}
}


/* Bild */
.mdl015-modul-box .picture-wrapper {
	z-index: 2;
	position: relative;
	order: 1;
	width: 100%;
	margin-top: 50px;
}
	.mdl015-modul-box .picture-wrapper-inline {
		position: relative;
		overflow: hidden;
		width: 100%;
		height: 0;
		padding-top: 75%;
		border-radius: 24px;
	}
	.mdl015-modul-box .picture-wrapper.hoch .picture-wrapper-inline {
		padding-top: 133%; /* 75% */
	}
		.mdl015-modul-box .picture-wrapper-inline img {
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
			object-position: center center;
		}
@media screen and (min-width: 768px) {
	.mdl015-modul-box .picture-wrapper {
		order: 0;
		width: calc((5 * var(--col-width-1)) + (5 * var(--gap)));
		margin-top: 0;
	}
	.mdl015-modul-box.right .picture-wrapper {
		order: 1;
		margin-left: calc((1 * var(--col-width-1)) + (1 * var(--gap)));
	}
	/* Bildformat: Hoch */
	.mdl015-modul-box .picture-wrapper.hoch {
		width: calc((4 * var(--col-width-1)) + (4 * var(--gap)));
	}
}
@media screen and (min-width: 1600px) {
	.mdl015-modul-box.right .picture-wrapper {
		margin-left: calc((2 * var(--col-width-1)) + (2 * var(--gap)));
	}
}


/* Text */
.mdl015-modul-box .content-wrapper {
	z-index: 2;
	position: relative;
	order: 0;
	width: 100%;
}
@media screen and (min-width: 768px) {
	.mdl015-modul-box .content-wrapper {
		order: 1;
		width: calc((6 * var(--col-width-1)) + (5 * var(--gap)));
		margin-left: calc((1 * var(--col-width-1)) + (1 * var(--gap)));
		margin-top: 40px;
	}
	/* Bildformat: Hoch */
	.mdl015-modul-box .content-wrapper.hoch {
		margin-left: calc((2 * var(--col-width-1)) + (2 * var(--gap)));
	}
	.mdl015-modul-box.right .content-wrapper {
		order: 0;
		margin-left: 0;
	}
}
@media screen and (min-width: 1200px) {
	.mdl015-modul-box .content-wrapper {
		margin-top: 60px;
	}
}
@media screen and (min-width: 1600px) {
	.mdl015-modul-box .content-wrapper {
		width: calc((5 * var(--col-width-1)) + (4 * var(--gap)));
		margin-top: 100px;
	}
}


/* Element */
.mdl015-modul-box .element-wrapper {
	z-index: 1;
	position: absolute;
	bottom: calc((((12 * var(--col-width-1)) + (11 * var(--gap))) / 6) * -1);
	left: -20px;
	width: calc(100% + 40px);
	overflow-x: hidden;
}
	.mdl015-modul-box .element-wrapper svg {
		width: calc((12 * var(--col-width-1)) + (11 * var(--gap)) + 60px);
		margin-left: calc(((4 * var(--col-width-1)) + (3 * var(--gap)) + 30px) * -1);
	}
	.mdl015-modul-box .element-wrapper svg.color-2 {
		fill: var(--main-color-2);
	}
	.mdl015-modul-box .element-wrapper svg.color-3 {
		fill: var(--main-color-3);
	}

/* Rechts */
.mdl015-modul-box.right .element-wrapper {
	bottom: calc((((12 * var(--col-width-1)) + (11 * var(--gap))) / 6) * -1);
}
	.mdl015-modul-box.right .element-wrapper svg {
		width: calc((((7 * var(--col-width-1)) + (7 * var(--gap))) + 20px) * 2);
		margin-left: calc((5 * var(--col-width-1)) + (4 * var(--gap)));
	}
@media screen and (min-width: 768px) {
	/* Links */
	.mdl015-modul-box .element-wrapper {
		bottom: auto;
		top: 50px;
		left: -50px;
		width: calc((3 * var(--col-width-1)) + (2 * var(--gap)) + 50px);
	}
	.mdl015-modul-box .element-wrapper.hoch {
		top: calc(((4 * var(--col-width-1)) + (4 * var(--gap))) / 2);
	}
		.mdl015-modul-box .element-wrapper svg {
			width: calc((6 * var(--col-width-1)) + (6 * var(--gap)));
			margin-left: calc((((3 * var(--col-width-1)) + (4 * var(--gap))) - 50px) * -1);
		}
	
	/* Rechts */
	.mdl015-modul-box.right .element-wrapper {
		left: auto;
		bottom: auto;
		top: 100px;
		right: -50px;
		width: calc((3.5 * var(--col-width-1)) + (3 * var(--gap)) + 50px);
	}
	.mdl015-modul-box.right .element-wrapper.hoch {
		top: calc(((4 * var(--col-width-1)) + (4 * var(--gap))) / 2);
	}
		.mdl015-modul-box.right .element-wrapper svg {
			width: calc((5.5 * var(--col-width-1)) + (5 * var(--gap)) - 50px);
			margin-left: 0;
		}
}
@media screen and (min-width: 992px) {
	/* Links */
	.mdl015-modul-box .element-wrapper {
		top: 40px;
	}
	.mdl015-modul-box .element-wrapper.hoch {
		top: calc(((4 * var(--col-width-1)) + (4 * var(--gap))) / 2.5);
	}
	
	/* Rechts */
	.mdl015-modul-box.right .element-wrapper {
		top: 60px;
	}
	.mdl015-modul-box.right .element-wrapper.hoch {
		top: calc(((4 * var(--col-width-1)) + (4 * var(--gap))) / 2.5);
	}
}
@media screen and (min-width: 1200px) {
	/* Links */
	.mdl015-modul-box .element-wrapper {
		top: 40px;
		left: -80px;
		width: calc((3 * var(--col-width-1)) + (2 * var(--gap)) + 80px);
	}
		.mdl015-modul-box .element-wrapper svg {
			margin-left: calc((((3 * var(--col-width-1)) + (4 * var(--gap))) - 80px) * -1);
		}
	
	/* Rechts */
	.mdl015-modul-box.right .element-wrapper {
		top: 40px;
		right: -80px;
		width: calc((3.5 * var(--col-width-1)) + (3 * var(--gap)) + 80px);
	}
		.mdl015-modul-box.right .element-wrapper svg {
			width: calc((5.5 * var(--col-width-1)) + (5 * var(--gap)) - 80px);
		}
}
@media screen and (min-width: 1600px) {
	/* Links */
	.mdl015-modul-box .element-wrapper {
		top: 0;
		left: -170px;
		width: calc((3 * var(--col-width-1)) + (2 * var(--gap)) + 170px);
	}
		.mdl015-modul-box .element-wrapper svg {
			margin-left: calc((((3 * var(--col-width-1)) + (4 * var(--gap))) - 170px) * -1);
		}
	
	/* Rechts */
	.mdl015-modul-box.right .element-wrapper {
		top: 0;
		right: -170px;
		width: calc((3.5 * var(--col-width-1)) + (3 * var(--gap)) + 170px);
	}
		.mdl015-modul-box.right .element-wrapper svg {
			width: calc((5.5 * var(--col-width-1)) + (5 * var(--gap)));
		}
}