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

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

/***-------------------------------------------*** Hamburger ***-------------------------------------------***/
#nav-icon4 { cursor: pointer; position: relative; display: inline-block; width: 49px; height: 34px; transform: rotate(0deg); transition: .5s ease-in-out; }
#nav-icon4 span { position: absolute; left: 0; display: block; width: 100%; height: 7px; background: #757D81; 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: -3.5px; left: 7px; transform: rotate(45deg); }
body.navi #nav-icon4 span:nth-child(2) { width: 0%; opacity: 0; }
body.navi #nav-icon4 span:nth-child(3) { top: 31px; left: 7px; transform: rotate(-45deg); }

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

/***-------------------------------------------*** Logo Mobile ***-------------------------------------------***/
body #logo_mobile_container { display: none; }

/***-------------------------------------------*** Desktop ***-------------------------------------------***/
@media screen and (min-width: 1125px) {
	/* Start: Allgemein */
	header #hHamburger { display: none; }
	header #hNavigation > ul > li > .toggler { display: none; }
	/* End: Allgemein */

	/* Start: First-Level */
	header #hNavigation > ul { display: flex; justify-content: flex-end; gap: 15px 47px; width: 100%; padding: 59px 0 0 368px; }
	header #hNavigation > ul > li { position: relative; display: block; }
	header #hNavigation > ul > li > a {
		display: block;
		font-family: neue-kabel, sans-serif;
		font-weight: 400;
		font-size: 21px;
		line-height: 27px;
		color: #000000;
		text-align: left;
		white-space: nowrap;
		padding: 0 0 14px 0;
		transition: all .3s ease-in-out;
	}
	header #hNavigation > ul > li.current > a,
	header #hNavigation > ul > li:hover > a { color: #008080; }
	/* End: First-Level */

	/* Start: Second-Level */
	header #hNavigation > ul > li > ul { display: none; flex-direction: column; position: absolute; top: 41px; left: 0; min-width: 100%; }
	header #hNavigation > ul > li:hover > ul { display: flex; }
	header #hNavigation > ul > li > ul > li	{ display: block; border-bottom: 1px solid #757D81; }
	header #hNavigation > ul > li > ul > li:last-of-type { border-bottom: none; }
	header #hNavigation > ul > li > ul > li > a {
		position: relative;
		display: block;
		font-family: neue-kabel, sans-serif;
		font-weight: 400;
		font-size: 21px;
		line-height: 27px;
		color: #000000;
		text-align: left;
		white-space: nowrap;
		padding: 8px 15px 10px 26px;
		background: #FFFFFF;
		transition: all .3s ease-in-out;
	}
	header #hNavigation > ul > li > ul > li.active > a,
	header #hNavigation > ul > li > ul > li > a:hover { color: #008080; }
	header #hNavigation > ul > li > ul > li > a > .hNavArrow { position: absolute; top: 17px; left: 12px; }
	header #hNavigation > ul > li > ul > li > a > .hNavArrow > path { stroke: #000000; transition: all .3s ease-in-out; }
	header #hNavigation > ul > li > ul > li.active > a > .hNavArrow > path,
	header #hNavigation > ul > li > ul > li > a:hover > .hNavArrow > path { stroke: #008080; }
	/* End: Second-Level */

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

	body.scrolled { padding-top: 77px; }
	body.scrolled header { height: 77px; }
	body.scrolled header .cms_container_wide { height: 77px; }
	body.scrolled #logo_container { top: 30px; }
	body.scrolled header #hNavigation > ul { padding: 30px 0 0 368px; }
	/* End: Scrolled */
}

/***-------------------------------------------*** Tablet ***-------------------------------------------***/
@media screen and (min-width: 960px) and (max-width: 1124px) {
	/* Start: Allgemein */
	header #hNavigation { position: fixed; top: 106px; right: -100%; bottom: 0; min-width: 400px; overflow-y: auto; transition: all 0.3s; }
	body.navi header #hNavigation { right: 0; }
	header #hHamburger { position: absolute; top: 36px; right: 30px; width: 49px; height: 34px; }
	/* End: Allgemein */

	/* Start: First-Level */
	header #hNavigation > ul { display: flex; flex-direction: column; padding: 30px; background: #FFFFFF; }
	header #hNavigation > ul > li { position: relative; display: block; border-width: 1px 0 0 0; border-style: solid; border-color: #757D81; }
	header #hNavigation > ul > li:last-of-type { border-width: 1px 0; }
	header #hNavigation > ul > li > a {
		display: block;
		font-family: neue-kabel, sans-serif;
		font-weight: 400;
		font-size: 23px;
		line-height: 29px;
		color: #000000;
		text-align: left;
		white-space: nowrap;
		padding: 15px 0;
		transition: all .3s ease-in-out;
	}
	header #hNavigation > ul > li.current > a,
	header #hNavigation > ul > li:hover > a { color: #008080; }
	header #hNavigation > ul > li > .toggler { cursor: pointer; position: absolute; top: 17.5px; right: 0; transition: all .3s ease-in-out; }
	header #hNavigation > ul > li.open > .toggler { transform: rotate(180deg); }
	header #hNavigation > ul > li > .toggler > svg > path { transition: all .3s ease-in-out; }
	header #hNavigation > ul > li.open > a + .toggler > svg > path,
	header #hNavigation > ul > li > .toggler:hover > svg > path { stroke: #008080; }
	/* End: First-Level */

	/* Start: Second-Level */
	header #hNavigation > ul > li > ul { display: none; flex-direction: column; gap: 14px; margin: 0 0 15px 0; }
	header #hNavigation > ul > li.open > ul { display: flex; }
	header #hNavigation > ul > li > ul > li { display: block; }
	header #hNavigation > ul > li > ul > li > a {
		position: relative;
		display: block;
		font-family: neue-kabel, sans-serif;
		font-weight: 400;
		font-size: 23px;
		line-height: 29px;
		color: #000000;
		text-align: left;
		white-space: nowrap;
		padding: 0 0 0 14px;
		transition: all .3s ease-in-out;
	}
	header #hNavigation > ul > li > ul > li.active > a,
	header #hNavigation > ul > li > ul > li > a:hover { color: #008080; }
	header #hNavigation > ul > li > ul > li > a > .hNavArrow { position: absolute; top: 9px; left: 0; }
	header #hNavigation > ul > li > ul > li > a > .hNavArrow > path { stroke: #000000; transition: all .3s ease-in-out; }
	header #hNavigation > ul > li > ul > li.active > a > .hNavArrow > path,
	header #hNavigation > ul > li > ul > li > a:hover > .hNavArrow > path { stroke: #008080; }
	/* End: Second-Level */

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

	body.scrolled { padding-top: 77px; }
	body.scrolled header { height: 77px; }
	body.scrolled header .cms_container_wide { height: 77px; }
	body.scrolled #logo_container { top: 30px; }
	body.scrolled header #hNavigation { top: 77px; }
	body.scrolled header #hHamburger { top: 21.5px; }
	/* End: Scrolled */
}

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

	/* Start: Header */
	body { padding-top: 73px; }
	header { height: 73px; }
	header .cms_container_wide { height: 73px; }
	body #logo_container { top: 38px; left: 18px; width: 243px; height: 43px; }
	/* End: Header */

	/* Start: Logo Mobile */
	body #logo_mobile_container {
		position: absolute;
		z-index: 1;
		/*top: 37px;
		left: 36px;*/
		top: 27px;
		left: 22px;
		display: block;
		/*width: 204px;
		height: 33px;*/
		width: 243px;
		height: 43px;
		overflow: hidden;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
	}
	body #logo_mobile_container > a {
		position: absolute;
		z-index: 2;
		inset: 0;
		/*background: url("/pages/img/logo_mobile.svg");*/
		background: url("/pages/img/logo_mobile.png");
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
	}
	/* End: Logo Mobile */

	/* Start: First-Level */
	header #hNavigation > ul { display: flex; flex-direction: column; }
	header #hNavigation > ul > li { position: relative; display: block; border-width: 1px 0 0 0; border-style: solid; border-color: #757D81; }
	header #hNavigation > ul > li:last-of-type { border-width: 1px 0; }
	header #hNavigation > ul > li > a {
		display: block;
		font-family: neue-kabel, sans-serif;
		font-weight: 400;
		font-size: 23px;
		line-height: 29px;
		color: #000000;
		text-align: left;
		white-space: nowrap;
		padding: 15px 0;
		transition: all .3s ease-in-out;
	}
	header #hNavigation > ul > li.current > a,
	header #hNavigation > ul > li:hover > a { color: #008080; }
	header #hNavigation > ul > li > .toggler { cursor: pointer; position: absolute; top: 17.5px; right: 0; transition: all .3s ease-in-out; }
	header #hNavigation > ul > li.open > .toggler { transform: rotate(180deg); }
	header #hNavigation > ul > li > .toggler > svg > path { transition: all .3s ease-in-out; }
	header #hNavigation > ul > li.open > a + .toggler > svg > path,
	header #hNavigation > ul > li > .toggler:hover > svg > path { stroke: #008080; }
	/* End: First-Level */

	/* Start: Second-Level */
	header #hNavigation > ul > li > ul { display: none; flex-direction: column; gap: 14px; margin: 0 0 15px 0; }
	header #hNavigation > ul > li.open > ul { display: flex; }
	header #hNavigation > ul > li > ul > li { display: block; }
	header #hNavigation > ul > li > ul > li > a {
		position: relative;
		display: block;
		font-family: neue-kabel, sans-serif;
		font-weight: 400;
		font-size: 23px;
		line-height: 29px;
		color: #000000;
		text-align: left;
		white-space: nowrap;
		padding: 0 0 0 14px;
		transition: all .3s ease-in-out;
	}
	header #hNavigation > ul > li > ul > li.active > a,
	header #hNavigation > ul > li > ul > li > a:hover { color: #008080; }
	header #hNavigation > ul > li > ul > li > a > .hNavArrow { position: absolute; top: 9px; left: 0; }
	header #hNavigation > ul > li > ul > li > a > .hNavArrow > path { stroke: #000000; transition: all .3s ease-in-out; }
	header #hNavigation > ul > li > ul > li.active > a > .hNavArrow > path,
	header #hNavigation > ul > li > ul > li > a:hover > .hNavArrow > path { stroke: #008080; }
	/* End: Second-Level */

	/* Start: Navi active */
	body #logo_container,
	body #logo_mobile_container { transition: all .3s ease-in-out; }

	body.navi #logo_container { opacity: 0; visibility: hidden; pointer-events: none; }
	body.navi #logo_mobile_container { opacity: 1; visibility: visible; pointer-events: auto; }
	/* End: Navi active */

	/* Start: Scrolled */
	/*No scrolled*/
	/* End: Scrolled */
}