/* ############################################################
	PANELS
############################################################ */

/* Panels */
.bild__panel, .middle__panel, .hinweis__panel, .bottom__panel {
	position: relative;
	width: 100%;
}


/* Abstände */
.abstand-middlepanel, .abstand-hinweispanel, .abstand-bottompanel {
	padding-top: 45px;
}
.abstand-middlepanel, .abstand-hinweispanel {
	padding-bottom: 45px;
}

@media screen and (min-width: 768px) {
	.abstand-middlepanel, .abstand-hinweispanel, .abstand-bottompanel {
		padding-top: 100px;
	}
	.abstand-middlepanel, .abstand-hinweispanel {
		padding-bottom: 100px;
	}
}
@media screen and (min-width: 1400px) {
	.abstand-middlepanel {
		padding-top: 140px;
		padding-bottom: 150px;
	}
	.abstand-hinweispanel {
		padding-top: 150px;
		padding-bottom: 120px;
	}
	.abstand-bottompanel {
		padding-top: 120px;
	}
}


/* ############################################################
	MODUL-ABSTÄNDE
############################################################ */

@media screen and (min-width: 1200px) {
	.left-1 {
		padding-left: calc((1 * var(--col)) + (1 * var(--gap)));
	}
	.right-1 {
		padding-right: calc((1 * var(--col)) + (1 * var(--gap)));
	}
	.right-4 {
		padding-right: calc((4 * var(--col)) + (4 * var(--gap)));
	}
	.left-3 {
		padding-left: calc((2 * var(--col)) + (2 * var(--gap)));
	}
	.right-2 {
		padding-right: calc((1 * var(--col)) + (1 * var(--gap)));
	}
}
@media screen and (min-width: 1400px) {
	.left-3 {
		padding-left: calc((3 * var(--col)) + (3 * var(--gap)));
	}
	.right-2 {
		padding-right: calc((2 * var(--col)) + (2 * var(--gap)));
	}
}