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

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


/* Abstände */
.abstand-middlepanel {
	padding-top: 30px;
	padding-bottom: 50px;
}
@media (min-width: 1024px) {
	.abstand-middlepanel {
		padding-top: 50px;
		padding-bottom: 100px;
	}
}


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

/* Kopfzeile */
header {
	transition: top 300ms var(--cubic-bezier), background-color 300ms var(--cubic-bezier);
}
header.fixed {
	position: fixed;
	background-color: var(--main-color-2);
}
	header .header-inline {
		transition: border-bottom-color 0.3s var(--cubic-bezier);
		border-bottom: 1px solid transparent;
	}
	header.fixed .header-inline {
		border-bottom-color: var(--main-color-1);
	}

/* Reset ohne Animation */
header.no-anim,
header.no-anim *,
header.no-anim *::before,
header.no-anim *::after {
	transition: none !important;
	animation: none !important;
}

/* Inhalt */
body[class^="cms-"] main {
	padding-top: 51px;
}
body.cms-active main {
	padding-top: 122px;
}
@media (min-width: 1024px) {
	body.cms-active main {
		padding-top: 231px;
	}
}


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

/* Logo */
header a.link-logo {
	position: absolute;
	top: 17px;
	left: 19px;
	/* left: -11px; */
	width: 100px;
}
header.fixed a.link-logo {
	display: none;
	pointer-events: none;
}
header a.link-wortmarke {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 300ms var(--cubic-bezier), visibility 300ms var(--cubic-bezier);
}
header.fixed a.link-wortmarke {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}
@media (min-width: 1024px) {
	header a.link-logo {
		top: 30px;
		left: 40px;
		/* left: -8px; */
		width: 160px;
	}
}