
/* ############################################################
	211 - ANSPRECHPARTNER AUF MEHREREN SEITEN
############################################################ */

/* Modul-Abstände */
.middle__panel .mdl-art-211 {
	width: calc(100% + (2 * 20px));
	margin-left: -20px;
	padding: 50px 20px;
}
@media screen and (min-width: 768px) {
	.middle__panel .mdl-art-211 {
		width: calc(100% + (2 * 50px));
		margin-left: -50px;
		padding: 80px 50px;
	}
}
@media screen and (min-width: 1200px) {
	.middle__panel .mdl-art-211 {
		width: calc(100% + (2 * 80px));
		margin-left: -80px;
		padding: 105px 80px;
	}
}
@media screen and (min-width: 1600px) {
	.middle__panel .mdl-art-211 {
		width: calc(100% + (2 * 170px));
		margin-left: -170px;
		padding-left: 170px;
		padding-right: 170px;
	}
}


/* Modul-Box */
.mdl211-modul-box {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
}
@media screen and (min-width: 768px) {
	.mdl211-modul-box {
		flex-direction: row;
	}
}


/* Bild */
.mdl211-modul-box .picture-wrapper {
	position: relative;
	overflow: hidden;
	order: 1;
	width: calc((10 * var(--col-width-1)) + (9 * var(--gap)));
	height: calc((10 * var(--col-width-1)) + (9 * var(--gap)));
	margin-left: calc((2 * var(--col-width-1)) + (2 * var(--gap)));
	margin-top: 50px;
	border-radius: 50%;
}
	.mdl211-modul-box .picture-wrapper 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) {
	.mdl211-modul-box .picture-wrapper {
		order: 0;
		width: calc((4 * var(--col-width-1)) + (4 * var(--gap)));
		height: calc((4 * var(--col-width-1)) + (4 * var(--gap)));
		margin: 0;
	}
}
@media screen and (min-width: 1200px) {
	.mdl211-modul-box .picture-wrapper {
		width: calc((3 * var(--col-width-1)) + (3 * var(--gap)));
		height: calc((3 * var(--col-width-1)) + (3 * var(--gap)));
		margin-left: calc((1 * var(--col-width-1)) + (1 * var(--gap)));
	}
}


/* Text */
.mdl211-modul-box .content-wrapper {
	position: relative;
	order: 0;
	width: 100%;
}
	.mdl211-modul-box h2 {
		margin-bottom: 28px;
		font-family: "Canaro-Book";
		font-size: 1.75rem; /* 28px */
		line-height: 1.222;
	}
	.mdl211-modul-box h3 {
		margin-bottom: 5px;
	}
	.mdl211-modul-box p + p {
		margin-top: 12px;
	}
@media screen and (min-width: 768px) {
	.mdl211-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: 50px;
	}
}
@media screen and (min-width: 1200px) {
	.mdl211-modul-box .content-wrapper {
		width: calc((5 * var(--col-width-1)) + (4 * var(--gap)));
		margin-left: calc((1 * var(--col-width-1)) + (1 * var(--gap)));
		margin-top: 70px;
	}
		.mdl211-modul-box h2 {
			margin-bottom: 35px;
			font-size: 2.1875rem; /* 35px */
		}
}
@media screen and (min-width: 1600px) {
	.mdl211-modul-box .content-wrapper {
		width: calc((4 * var(--col-width-1)) + (3 * var(--gap)));
		margin-left: calc((1 * var(--col-width-1)) + (1 * var(--gap)));
	}
}


/* Element */
.mdl211-modul-box .element-wrapper {
	z-index: 0;
	position: absolute;
	bottom: -40px;
	left: -50px;
	width: calc((9 * var(--col-width-1)) + (8 * var(--gap)));
}
	.mdl211-modul-box .element-wrapper svg.color-1 {
		fill: var(--main-color-1);
	}
	.mdl211-modul-box .element-wrapper svg.color-2 {
		fill: var(--main-color-2);
	}
	.mdl211-modul-box .element-wrapper svg.color-3 {
		fill: var(--main-color-3);
	}
@media screen and (min-width: 768px) {
	.mdl211-modul-box .element-wrapper {
		bottom: auto;
		top: 90px;
		left: -80px;
		width: calc((4 * var(--col-width-1)) + (4 * var(--gap)));
	}
}
@media screen and (min-width: 1200px) {
	.mdl211-modul-box .element-wrapper {
		top: 40px;
		left: -30px;
		width: calc((3 * var(--col-width-1)) + (3 * var(--gap)));
	}
}

/* InstaPlan Logo */
img.mdl211-instaplan-logo {
	display: inline-block;
	width: 200px;
	height: 46px;
	margin-top: 20px;
}
@media screen and (min-width: 1200px) {
	img.mdl211-instaplan-logo {
		width: 230px;
		height: 53px;
		margin-top: 22px;
	}
}

