/*╔════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════╗*/
/*║ HEADER I                                                                                                                                                                                                                                              ║*/
/*╚════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════╝*/
/***-------------------------------------------*** Body ***-------------------------------------------***/
body { padding-top: 130px; }

/***-------------------------------------------*** Header ***-------------------------------------------***/
header { position: fixed; z-index: 1000; top: 0; right: 0; left: 0; height: 130px; background: #FFFFFF; border-bottom: 6px solid #BD1220; }
header a { text-decoration: none; }
header li { list-style: none; }
header .cms_container_wide { position: relative; height: 124px; padding: 0 30px; }

/***-------------------------------------------*** Hamburger ***-------------------------------------------***/
#nav-icon4 {
	cursor: pointer;
	position: relative;
	display: inline-block;
	width: 40px;
	height: 30px;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: .5s ease-in-out;
	-moz-transition: .5s ease-in-out;
	-o-transition: .5s ease-in-out;
	transition: .5s ease-in-out;
}
#nav-icon4 span {
	position: absolute;
	left: 0;
	display: block;
	height: 5px;
	width: 100%;
	background: #FFFFFF;
	opacity: 1;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: .25s ease-in-out;
	-moz-transition: .25s ease-in-out;
	-o-transition: .25s ease-in-out;
	transition: .25s ease-in-out;
}
#nav-icon4 span:nth-child(1) { top: 0px; }
#nav-icon4 span:nth-child(2) { top: 12px; }
#nav-icon4 span:nth-child(3) { top: 25px; }
#nav-icon4 span:nth-child(1),
#nav-icon4 span:nth-child(2),
#nav-icon4 span:nth-child(3) {
	-webkit-transform-origin: left center;
	-moz-transform-origin: left center;
	-o-transform-origin: left center;
	transform-origin: left center;
}
body.navi #nav-icon4 span:nth-child(1) {
	top: 0;
	left: 5px;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}
body.navi #nav-icon4 span:nth-child(2) { width: 0%; opacity: 0; }
body.navi #nav-icon4 span:nth-child(3) {
	top: 29px;
	left: 5px;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

/***-------------------------------------------*** Logo ***-------------------------------------------***/
body #logo_container {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 30px;
	width: 426px;
	height: 288px;
	background: #FFFFFF;
	border-width: 0 6px 6px 6px;
	border-style: solid;
	border-color: #BD1220;
	border-radius: 0px 0px 40px 40px;
}
body #logo_container:before {
	content: "";
	position: absolute;
	z-index: 12 !important;
	top: 0;
	left: -6px;
	width: calc(100% + 12px);
	height: 124px;
	background: #FFFFFF;
}
body #logo_container > a {
	position: absolute;
	z-index: 14 !important;
	top: 16px;
	right: 42px;
	bottom: 14px;
	left: 40px;
	background: url("/pages/img/logo.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

/***-------------------------------------------*** Desktop ***-------------------------------------------***/
@media screen and (min-width: 1117px) {
	/* Start: Allgemein */
	header #hHamburger { display: none; }
	/* End: Allgemein */

	/* Start: First-Level */
	header #hNavigation > ul { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; width: 100%; padding: 67px 0 0 456px; }
	header #hNavigation > ul > li { margin: 0 55px 0 0; }
	header #hNavigation > ul > li:last-of-type { margin: 0; }
	header #hNavigation > ul > li > a {
		display: block;
		font-family: 'Fira Sans', sans-serif;
		font-weight: 700;
		font-size: 22px;
		line-height: 25px;
		color: #000000;
		text-align: left;
		white-space: nowrap;
		-webkit-transition: all .3s ease-in-out;
		-moz-transition: all .3s ease-in-out;
		-o-transition: all .3s ease-in-out;
		-ms-transition: all .3s ease-in-out;
		transition: all .3s ease-in-out;
	}
	header #hNavigation > ul > li.current > a { color: #BD1220; }
	header #hNavigation > ul > li:hover > a { color: #BD1220; }
	/* End: First-Level */

	/* Start: Scrolled */
	body,
	header,
	header .cms_container_wide,
	body #logo_container,
	body #logo_container:before,
	body #logo_container > a,
	header #hNavigation > ul {
		-webkit-transition: all .3s ease-in-out;
		-moz-transition: all .3s ease-in-out;
		-o-transition: all .3s ease-in-out;
		-ms-transition: all .3s ease-in-out;
		transition: all .3s ease-in-out;
	}
	body.scrolled { padding-top: 120px; }
	body.scrolled header { height: 120px; }
	body.scrolled header .cms_container_wide { height: 114px; }
	/*body.scrolled #logo_container { width: 158px; height: 120px; border-radius: 0; }*/
	body.scrolled #logo_container { width: 146px; height: 114px; border-radius: 0; border-width: 0; border-style: none; border-color: transparent; }
	body.scrolled #logo_container:before { height: 0; }
	body.scrolled #logo_container > a { top: 15px; right: 18px; bottom: 15px; left: 17px; }
	body.scrolled header #hNavigation > ul { padding: 47.5px 0 0 188px; }
	/* End: Scrolled */
}
@media screen and (min-width: 1117px) and (max-width: 1246px) {
	/* Start: Default */
	body #logo_container { width: 296px; height: 200px; }
	body #logo_container > a { top: 16px; right: 37px; bottom: 14px; left: 35px; }
	header #hNavigation > ul { padding: 67px 0 0 326px; }
	/* End: Default */
}

/***-------------------------------------------*** Tablet ***-------------------------------------------***/
@media screen and (min-width: 960px) and (max-width: 1116px) {
	/* Start: Allgemein */
	header #hNavigation	{ position: fixed; z-index: 8; top: 130px; right: -100%; bottom: 0; overflow-y: auto; transition: all 0.3s; }
	body.navi header #hNavigation { right: 0; }
	header #hHamburger { position: absolute; right: 30px; top: 32px; width: 70px; height: 60px; padding: 15px; background: #BD1220; }
	/* End: Allgemein */

	/* Start: First-Level */
	header #hNavigation > ul {
		display: block;
		padding: 10px 0;
		background: #FFFFFF;
		border-width: 0 6px 6px 6px;
		border-style: solid;
		border-color: #BD1220;
	}
	header #hNavigation > ul > li > a {
		display: block;
		font-family: 'Fira Sans', sans-serif;
		font-weight: 700;
		font-size: 22px;
		line-height: 25px;
		color: #000000;
		text-align: left;
		white-space: nowrap;
		padding: 5px 15px;
	}
	header #hNavigation > ul > li.current > a { color: #BD1220; }
	header #hNavigation > ul > li:hover > a { color: #BD1220; }
	/* End: First-Level */

	/* Start: Default */
	body #logo_container { width: 296px; height: 200px; }
	body #logo_container > a { top: 16px; right: 37px; bottom: 14px; left: 35px; }
	/* End: Default */

	/* Start: Scrolled */
	body,
	header,
	header .cms_container_wide,
	body #logo_container,
	body #logo_container:before,
	body #logo_container > a,
	header #hNavigation,
	header #hHamburger {
		-webkit-transition: all .3s ease-in-out;
		-moz-transition: all .3s ease-in-out;
		-o-transition: all .3s ease-in-out;
		-ms-transition: all .3s ease-in-out;
		transition: all .3s ease-in-out;
	}
	body.scrolled { padding-top: 120px; }
	body.scrolled header { height: 120px; }
	body.scrolled header .cms_container_wide { height: 114px; }
	/*body.scrolled #logo_container { width: 158px; height: 120px; border-radius: 0; }*/
	body.scrolled #logo_container { width: 146px; height: 114px; border-radius: 0; border-width: 0; border-style: none; border-color: transparent; }
	body.scrolled #logo_container:before { height: 0; }
	body.scrolled #logo_container > a { top: 15px; right: 18px; bottom: 15px; left: 17px; }
	body.scrolled header #hNavigation { top: 120px; }
	body.scrolled header #hHamburger { top: 27px; }
	/* End: Scrolled */
}

/***-------------------------------------------*** Smartphone ***-------------------------------------------***/
@media screen and (max-width: 959px) {
	/* Start: Allgemein */
	header #hNavigation	{
		position: fixed;
		z-index: 8;
		top: 130px;
		right: -100vW;
		bottom: 0;
		width: 100vW;
		overflow-y: auto;
		transition: all 0.3s;
		background: #FFFFFF;
		border-width: 0 6px 6px 6px;
		border-style: solid;
		border-color: #BD1220;
	}
	body.navi header #hNavigation { right: 0; }
	header #hHamburger { position: absolute; right: 30px; top: 32px; width: 70px; height: 60px; padding: 15px; background: #BD1220; }
	/* End: Allgemein */

	/* Start: First-Level */
	header #hNavigation > ul { display: block; padding: 10px 0; background: #FFFFFF; }
	header #hNavigation > ul > li > a {
		display: block;
		font-family: 'Fira Sans', sans-serif;
		font-weight: 700;
		font-size: 22px;
		line-height: 25px;
		color: #000000;
		text-align: left;
		white-space: nowrap;
		padding: 5px 15px;
	}
	header #hNavigation > ul > li.current > a { color: #BD1220; }
	header #hNavigation > ul > li:hover > a { color: #BD1220; }
	/* End: First-Level */

	/* Start: Default */
	body #logo_container { width: 296px; height: 200px; }
	body #logo_container > a { top: 16px; right: 37px; bottom: 14px; left: 35px; }
	/* End: Default */

	/* Start: Scrolled */
	body,
	header,
	header .cms_container_wide,
	body #logo_container,
	body #logo_container:before,
	body #logo_container > a,
	header #hNavigation,
	header #hHamburger {
		-webkit-transition: all .3s ease-in-out;
		-moz-transition: all .3s ease-in-out;
		-o-transition: all .3s ease-in-out;
		-ms-transition: all .3s ease-in-out;
		transition: all .3s ease-in-out;
	}
	body.scrolled { padding-top: 120px; }
	body.scrolled header { height: 120px; }
	body.scrolled header .cms_container_wide { height: 114px; }
	/*body.scrolled #logo_container { width: 158px; height: 120px; border-radius: 0; }*/
	body.scrolled #logo_container { width: 146px; height: 114px; border-radius: 0; border-width: 0; border-style: none; border-color: transparent; }
	body.scrolled #logo_container:before { height: 0; }
	body.scrolled #logo_container > a { top: 15px; right: 18px; bottom: 15px; left: 17px; }
	body.scrolled header #hNavigation { top: 120px; }
	body.scrolled header #hHamburger { top: 27px; }
	/* End: Scrolled */
}

@media screen and (max-width: 500px) {
	/* Start: Default */
	body { padding-top: 120px; }
	header { height: 120px; }
	header .cms_container_wide { height: 114px; }
	/*body #logo_container { width: 158px; height: 120px; border-radius: 0; }*/
	body #logo_container { width: 146px; height: 114px; border-radius: 0; border-width: 0; border-style: none; border-color: transparent; }
	body #logo_container:before { height: 0; }
	body #logo_container > a { top: 15px; right: 18px; bottom: 15px; left: 17px; }
	header #hNavigation { top: 120px; }
	header #hHamburger { top: 27px; }
	/* End: Default */

	/* Start: Scrolled */
	body.scrolled { padding-top: 90px; }
	body.scrolled header { height: 90px; }
	body.scrolled header .cms_container_wide { height: 84px; }
	/*body.scrolled #logo_container { top: -120px; }*/
	body.scrolled #logo_container { top: -114px; }
	body.scrolled header #hNavigation { top: 90px; }
	body.scrolled header #hHamburger {
		top: 15px;
		right: 50%;
		-webkit-transform: translateX(50%);
		-moz-transform: translateX(50%);
		-o-transform: translateX(50%);
		transform: translateX(50%);
	}
	/* End: Scrolled */
}