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

/* Allgemein */
:root {
	--mdl015-width-full: calc((12 * var(--col-width-1)) + (11 * var(--gap)));
	--mdl015-width-half: calc((12 * var(--col-width-1)) + (11 * var(--gap)));
	--mdl015-height-top-small: calc(var(--mdl015-width-full) * 0.6);
	--mdl015-height-top-medium: var(--mdl015-height-top-small);
	--mdl015-height-lr: var(--mdl015-height-top-small);
}
@media screen and (min-width: 768px) {
	:root {
		--mdl015-width-half: calc((6 * var(--col-width-1)) + (5 * var(--gap)));
		--mdl015-height-top-small: calc(var(--mdl015-width-full) * 0.35);
		--mdl015-height-top-medium: calc(var(--mdl015-width-full) * 0.41);
		--mdl015-height-lr: calc(var(--mdl015-width-half) * 0.77);
	}
}


/* Layout */
.mdl015-modul-box {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
}
@media screen and (min-width: 768px) {
	.mdl015-modul-box.left, .mdl015-modul-box.right {
		flex-direction: row;
	}
}


/* Bild */
.mdl015-modul-box .picture-wrapper {
	flex: 0 0 auto;
	position: relative;
	width: 100%;
	overflow: hidden;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
.mdl015-modul-box.top .picture-wrapper {
	height: var(--mdl015-height-top-medium);
}
.mdl015-modul-box.top .picture-wrapper.small {
	height: var(--mdl015-height-top-small);
}
.mdl015-modul-box.left .picture-wrapper, .mdl015-modul-box.right .picture-wrapper {
	width: var(--mdl015-width-half);
	height: var(--mdl015-height-lr);
}
@media screen and (min-width: 768px) {
	.mdl015-modul-box.left .picture-wrapper, .mdl015-modul-box.right .picture-wrapper {
		height: auto;
		min-height: var(--mdl015-height-lr);
	}
}


/* Bildausschnitte */
/*.mdl015-modul-box.top .picture-wrapper, .mdl015-modul-box.left .picture-wrapper, .mdl015-modul-box.right .picture-wrapper {
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30px), calc(50% + 30px) calc(100% - 30px), 50% 100%, calc(50% - 30px) calc(100% - 30px), 0 calc(100% - 30px));
}
@media screen and (min-width: 768px) {
	.mdl015-modul-box.left .picture-wrapper {
		clip-path: polygon(0 0, calc(100% - 30px) 0, calc(100% - 30px) calc(50% - 30px), 100% 50%, calc(100% - 30px) calc(50% + 30px), calc(100% - 30px) 100%, 0 100%);
	}
	.mdl015-modul-box.right .picture-wrapper {
		order: 1;
		clip-path: polygon(0 50%, 30px calc(50% - 30px), 30px 0, 100% 0, 100% 100%, 30px 100%, 30px calc(50% + 30px));
	}
}
@media screen and (min-width: 1200px) {
	.mdl015-modul-box.top .picture-wrapper {
		clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), calc(50% + 40px) calc(100% - 40px), 50% 100%, calc(50% - 40px) calc(100% - 40px), 0 calc(100% - 40px));
	}
	.mdl015-modul-box.left .picture-wrapper {
		clip-path: polygon(0 0, calc(100% - 40px) 0, calc(100% - 40px) calc(50% - 40px), 100% 50%, calc(100% - 40px) calc(50% + 40px), calc(100% - 40px) 100%, 0 100%);
	}
	.mdl015-modul-box.right .picture-wrapper {
		clip-path: polygon(0 50%, 40px calc(50% - 40px), 40px 0, 100% 0, 100% 100%, 40px 100%, 40px calc(50% + 40px));
	}
}*/


/* Text */
.mdl015-modul-box .content-wrapper {
	flex: 0 0 auto;
	width: 100%;
}
.mdl015-modul-box .content-wrapper {
	padding-top: 25px;
}
.mdl-container.mdl-art-015.bg-color-2 .mdl015-modul-box .content-wrapper {
	padding: 25px 16px 23px;
}
@media screen and (min-width: 768px) {
	.mdl015-modul-box.top .content-wrapper {
		padding: 50px 38px 0;
	}
	.mdl-container.mdl-art-015.bg-color-2 .mdl015-modul-box.top .content-wrapper {
		padding: 50px 38px 70px;
	}
	.mdl-container.mdl-art-015.bg-color-2 .mdl015-modul-box.left .content-wrapper {
		width: calc((5 * var(--col-width-1)) + (4 * var(--gap)));
		margin-left: var(--gap);
		padding: 70px 0 50px;
	}
	.mdl015-modul-box.right .content-wrapper, .mdl-container.mdl-art-015.bg-color-2 .mdl015-modul-box.right .content-wrapper {
		order: 0;
		width: calc((5 * var(--col-width-1)) + (4 * var(--gap)));
		margin-left: calc((1 * var(--col-width-1)) + (1 * var(--gap)));
		margin-right: var(--gap);
		padding: 70px 0 50px;
	}
}
@media screen and (min-width: 1200px) {
	.mdl015-modul-box.top .content-wrapper {
		padding: 100px calc((1 * var(--col-width-1)) + (1 * var(--gap))) 0;
	}
	.mdl-container.mdl-art-015.bg-color-2 .mdl015-modul-box.top .content-wrapper {
		padding: 100px calc((1 * var(--col-width-1)) + (1 * var(--gap))) 140px;
	}
	.mdl015-modul-box.left .content-wrapper, .mdl-container.mdl-art-015.bg-color-2 .mdl015-modul-box.left .content-wrapper,
	.mdl015-modul-box.right .content-wrapper, .mdl-container.mdl-art-015.bg-color-2 .mdl015-modul-box.right .content-wrapper {
		padding: 140px 0 100px;
	}
}