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

/***-------------------------------------------*** Header ***-------------------------------------------***/
header { position: fixed; z-index: 1000; top: 0; right: 0; left: 0; height: 142px; background: #FFFFFF; }
header li { list-style: none; }
header a { text-decoration: none; }
#hBox1 { display: flex; align-items: center; height: 42px; background: #E8E7E8; }
#hBox2 { height: 100px; }
header .cms_container_wide { position: relative; padding: 0 30px; }

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

/***-------------------------------------------*** Logo ***-------------------------------------------***/
body #logo_container { position: absolute; z-index: 1; top: 20px; left: 30px; width: 400px; height: 60px; overflow: hidden; }
/*body #logo_container > a { position: absolute; z-index: 2; inset: 0; background: center / contain no-repeat url("/pages/img/logo.png"); }*/
body #logo_container > a { position: absolute; z-index: 2; inset: 0; background: center / contain no-repeat url("/pages/img/logo.svg"); }

/***-------------------------------------------*** Service Navigation ***-------------------------------------------***/
header #hService { display: flex; justify-content: flex-end; }
header #hService > ul { display: flex; align-items: center; gap: 20px; }
header #hService > ul > li { display: block; }
header #hService > ul > li > a {
	display: block;
	font-family: 'Mulish', sans-serif;
	font-weight: 600;
	font-size: 16px;
	line-height: 20px;
	color: #000000;
	text-align: left;
	transition: all .3s ease-in-out;
}
header #hService > ul > li.current > a { color: #007DC5; }
header #hService > ul > li > a:hover { color: #007DC5; }
header #hNavigation > ul#hServiceMobile { display: none !important; }

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

	/* Start: First-Level */
	header #hNavigation > ul { display: flex; justify-content: flex-end; align-items: center; width: 100%; padding: 44px 0 0 430px; }
	header #hNavigation > ul > li { position: relative; display: block; padding: 0 32px 0 33px; }
	header #hNavigation > ul > li:first-of-type { padding: 0 32px 0 0; }
	header #hNavigation > ul > li:last-of-type { padding: 0 0 0 33px; }
	header #hNavigation > ul > li:before { content: ""; position: absolute; z-index: 1; bottom: -26px; left: 0; width: 1px; height: 34.5px; background: #000000; }
	header #hNavigation > ul > li:first-of-type:before { content: none !important; }
	header #hNavigation > ul > li > a {
		display: block;
		font-family: 'Mulish', sans-serif;
		font-weight: 700;
		font-size: 24px;
		line-height: 30px;
		color: #000000;
		text-align: left;
		white-space: nowrap;
		transition: all .3s ease-in-out;
	}
	header #hNavigation > ul > li.current > a { color: #F36F23; }
	header #hNavigation > ul > li:hover > a { color: #F36F23; }
	/* End: First-Level */

	/* Start: Scrolled */
	body,
	header,
	#hBox1,
	#hBox2,
	body #logo_container,
	header #hNavigation > ul,
	header #hNavigation > ul > li:before { transition: all .3s ease-in-out; }

	body.scrolled { padding-top: 112px; }
	body.scrolled header { height: 112px; }
	body.scrolled #hBox1 { height: 42px; }
	body.scrolled #hBox2 { height: 70px; }
	body.scrolled #logo_container { top: 10px; width: 333px; height: 50px; }
	body.scrolled header #hNavigation > ul { padding: 20px 0 0 363px; }
	body.scrolled header #hNavigation > ul > li:before { bottom: -20px; height: 27px; }
	/* End: Scrolled */
}

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

	/* Start: First-Level */
	header #hNavigation > ul { display: flex; flex-direction: column; gap: 10px; padding: 15px; background: #FFFFFF; border: 1px solid #F36F23; }
	header #hNavigation > ul > li { display: block; }
	header #hNavigation > ul > li > a {
		display: block;
		font-family: 'Mulish', sans-serif;
		font-weight: 700;
		font-size: 24px;
		line-height: 30px;
		color: #000000;
		text-align: left;
		white-space: nowrap;
		padding: 5px 15px;
		border: 1px solid #000000;
		transition: all .3s ease-in-out;
	}
	header #hNavigation > ul > li.current > a { color: #FFFFFF; background: #F36F23; border: 1px solid #F36F23; }
	header #hNavigation > ul > li:hover > a { color: #FFFFFF; background: #F36F23; border: 1px solid #F36F23; }
	/* End: First-Level */

	/* Start: Scrolled */
	body,
	header,
	#hBox1,
	#hBox2,
	body #logo_container,
	header #hNavigation,
	header #hHamburger { transition: all .3s ease-in-out; }

	body.scrolled { padding-top: 122px; }
	body.scrolled header { height: 122px; }
	body.scrolled #hBox1 { height: 42px; }
	body.scrolled #hBox2 { height: 80px; }
	body.scrolled #logo_container { top: 15px; width: 333px; height: 50px; }
	body.scrolled header #hNavigation { top: 122px; }
	body.scrolled header #hHamburger { top: 10px; }
	/* End: Scrolled */
}

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

	/* Start: Logo */
	body #logo_container { top: 40.5px; width: 260px; height: 39px; }
	/* End: Logo */

	/* Start: Header */
	body { padding-top: 120px; }
	header { height: 120px; }
	#hBox1 { display: none; }
	#hBox2 { height: 120px; }
	/* End: Header */

	/* Start: Service-Navigation Mobile */
	header #hNavigation > ul#hServiceMobile { display: flex !important; }
	header #hNavigation > ul#hServiceMobile > li > a { font-weight: 600; font-size: 16px; line-height: 20px; }
	/* End: Service-Navigation Mobile */

	/* Start: First-Level */
	header #hNavigation > ul { display: flex; flex-direction: column; gap: 10px; padding: 15px; }
	header #hNavigation > ul > li { display: block; }
	header #hNavigation > ul > li > a {
		display: block;
		font-family: 'Mulish', sans-serif;
		font-weight: 700;
		font-size: 24px;
		line-height: 30px;
		color: #000000;
		text-align: left;
		white-space: nowrap;
		padding: 5px 15px;
		border: 1px solid #000000;
		transition: all .3s ease-in-out;
	}
	header #hNavigation > ul > li.current > a { color: #FFFFFF; background: #F36F23; border: 1px solid #F36F23; }
	header #hNavigation > ul > li:hover > a { color: #FFFFFF; background: #F36F23; border: 1px solid #F36F23; }
	/* End: First-Level */

	/* Start: Scrolled */
	body,
	header,
	#hBox2,
	body #logo_container,
	header #hNavigation,
	header #hHamburger { transition: all .3s ease-in-out; }

	body.scrolled { padding-top: 90px; }
	body.scrolled header { height: 90px; }
	body.scrolled #hBox2 { height: 90px; }
	body.scrolled #logo_container { top: 25.5px; width: 260px; height: 39px; }
	body.scrolled header #hNavigation { top: 90px; }
	body.scrolled header #hHamburger { top: 15px; }
	/* End: Scrolled */
}

@media screen and (max-width: 400px) {
	body { padding-top: 159px; }
	header { height: 159px; }
	#hBox2 { height: 159px; }
	body #logo_container { top: 15px; left: 50%; transform: translateX(-50%); width: 260px; height: 39px; }
	header #hNavigation { top: 159px; }
	header #hHamburger { top: 84px; right: auto; left: 50%; transform: translateX(-50%); }

	body.scrolled { padding-top: 90px; }
	body.scrolled header { height: 90px; }
	body.scrolled #hBox2 { height: 90px; }
	body.scrolled #logo_container { top: -39px; }
	body.scrolled header #hNavigation { top: 90px; }
	body.scrolled header #hHamburger { top: 15px; }
}