﻿
/* ############################################################
	015 - TEXT/HTML mit Foto
############################################################ */

/* Modul-Abstände */
.middle__panel .mdl-art-015, .bottom__panel .mdl-art-015 {
	width: calc(100% + (2 * 20px));
	margin-left: -20px;
	padding: 20px 20px 20px;
}
@media screen and (min-width: 768px) {
	.middle__panel .mdl-art-015, .bottom__panel .mdl-art-015 {
		width: calc(100% + (2 * 80px));
		margin-left: -80px;
		padding: 140px 80px;
	}
}
@media screen and (min-width: 1200px) {
	.middle__panel .mdl-art-015, .bottom__panel .mdl-art-015 {
		padding-top: 220px;
		padding-bottom: 220px;
	}
}
@media screen and (min-width: 1600px) {
	.middle__panel .mdl-art-015, .bottom__panel .mdl-art-015 {
		width: calc(100% + (2 * 170px));
		margin-left: -170px;
		padding-left: 170px;
		padding-right: 170px;
	}
}


/* 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 {
	position: relative;
	order: 0;
	width: 100%;
	height: auto;
	font-size: 0;
	line-height: 0;
}
.mdl015-modul-box.right .picture-wrapper {
	order: 1;
	margin-top: 60px;
}
@media screen and (min-width: 768px) {
	.mdl015-modul-box .picture-wrapper {
		width: calc((5 * var(--col-width-1)) + (4 * var(--gap)));
	}
	.mdl015-modul-box.right .picture-wrapper {
		margin-left: calc((1 * var(--col-width-1)) + (2 * var(--gap)));
		margin-top: 0;
	}
}
@media screen and (min-width: 1200px) {
	.mdl015-modul-box .picture-wrapper {
		margin-left: calc((1 * var(--col-width-1)) + (1 * var(--gap)));
	}
}


/* Text */
.mdl015-modul-box .content-wrapper {
	position: relative;
	order: 1;
	width: 100%;
	margin-top: 60px;
	margin-bottom: 40px;
}
.mdl015-modul-box.right .content-wrapper {
	order: 0;
	margin-bottom: 0;
}
@media screen and (min-width: 768px) {
	.mdl015-modul-box .content-wrapper {
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: calc((6 * var(--col-width-1)) + (5 * var(--gap)));
		margin-left: calc((1 * var(--col-width-1)) + (2 * var(--gap)));
		margin-top: 0;
		margin-bottom: 0;
	}
	.mdl015-modul-box.right .content-wrapper {
		margin-left: 0;
	}
}
@media screen and (min-width: 1200px) {
	.mdl015-modul-box .content-wrapper {
		width: calc((4 * var(--col-width-1)) + (3 * var(--gap)));
	}
	.mdl015-modul-box.right .content-wrapper {
		margin-left: calc((1 * var(--col-width-1)) + (1 * var(--gap)));
	}
}

