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

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


/* Abstände */
.main-content {
	padding-bottom: 90px; /* Abstand: BottomPanel + Footer */
}
	.abstand-middlepanel, .abstand-bottompanel {
		padding-top: 45px;
		padding-bottom: 45px;
	}
	.abstand-bottompanel {
		padding-top: 45px;
	}
@media screen and (min-width: 768px) {
	.abstand-middlepanel {
		padding-top: 62px;
		padding-bottom: 100px;
	}
	.abstand-middlepanel.no-bildpanel {
		padding-top: 88px;
	}
	.abstand-bottompanel {
		padding-top: 70px;
	}
}
@media screen and (min-width: 1200px) {
	.main-content {
		padding-bottom: 170px; /* Abstand: BottomPanel + Footer */
	}
		.abstand-middlepanel.cms {
			padding-bottom: 250px;
		}
}
@media screen and (min-width: 1400px) {
	.main-content {
		padding-bottom: 280px; /* Abstand: BottomPanel + Footer */
	}
		.abstand-middlepanel {
			padding-top: 100px;
			padding-bottom: 160px;
		}
		.abstand-middlepanel.no-bildpanel {
			padding-top: 140px;
		}
		.abstand-bottompanel {
			padding-top: 110px;
		}
}


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

@media screen and (min-width: 1200px) {
	/* Inhalt */
	main {
		display: flex;
	}
		.main-nav {
			position: sticky;
			align-self: flex-start;
			top: 215px;
			width: 308px;
			margin-left: 50px;
			padding-top: 40px;
		}
		body[class^="cms-"] .main-nav {
			top: 266px;
		}
		.main-content {
			width: calc(100% - 308px - 50px - var(--gap));
			margin-left: var(--gap);
		}
			.main-top {
				border-top-left-radius: 20px;
				border-bottom-left-radius: 20px;
				overflow: hidden;
			}
				.main-top .content-inline {
					max-width: 1078px;
				}
				.main-bottom .content-box {
					padding-left: 0;
				}
				.main-bottom .content-inline {
					max-width: 1219px;
				}
	
	/* Fusszeile */
	footer {
		padding-top: 0;
	}
}
@media screen and (min-width: 1400px) {
	/* Inhalt */
	.main-nav {
		width: 373px;
		padding-top: 128px;
	}
	.main-content {
		width: calc(100% - 373px - 50px - var(--gap));
	}

	/* Fusszeile */
	footer {
		padding-top: 0;
	}
}
@media screen and (min-width: 1600px) {
	/* Inhalt */
	.main-nav {
		margin-left: 140px;
	}
	.main-content {
		width: calc(100% - 373px - 140px - var(--gap));
	}
}


/* Viewport: Browser-Höhe */
@media screen and (max-height: 1024px) {
	/* Inhalt */
	.main-nav {
		padding-top: 40px;
	}
}


/* ############################################################
BILDER/ICONS
############################################################ */

/* Logo */
body[class^="cms-"] a.link-logo {
	top: 85px;
}
@media screen and (min-width: 1200px) {
	a.link-logo {
		position: fixed;
		top: 96px;
		left: 50px;
	}
	body[class^="cms-"] a.link-logo {
		top: 147px;
	}
	.bg-logo {
		position: fixed;
		top: 0;
		left: calc(50px - 10px);
		width: calc(308px + 20px);
		height: 215px;
		background-color: var(--main-color-white);
	}
	body[class^="cms-"] .bg-logo {
		top: 51px;
	}
}
@media screen and (min-width: 1400px) {
	a.link-logo {
		top: 81px;
	}
	body[class^="cms-"] a.link-logo {
		top: 132px;
	}
	.bg-logo {
		width: calc(373px + 20px);
	}
}
@media screen and (min-width: 1600px) {
	a.link-logo {
		left: 140px;
	}
	.bg-logo {
		left: calc(140px - 10px);
	}
}