/*╔════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════╗*/
/*║ HEADER I                                                                                                                                                                                                                                              ║*/
/*╚════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════╝*/
/***-------------------------------------------*** Space for Header ***-------------------------------------------***/
#cmsgrid > div:first-of-type { padding-top: 190px; }

/***-------------------------------------------*** Header ***-------------------------------------------***/
header { position: fixed; z-index: 1000; top: 0; right: 0; left: 0; height: 190px; box-shadow: 0px 0px 100px 0px rgba(0,0,0,0.10); transition: var(--transition); }
/*body.scrolled header { box-shadow: 0px 1px 5px 2px #CCCCCC; }*/
header li { list-style: none; }
header a { text-decoration: none; }
header > div:first-of-type { background: var(--quaternary); }
header > div:last-of-type { background: var(--white); }
header > div > .cms_container_wide { position: relative; display: flex; justify-content: flex-end; padding: 0 30px; }

header > div:first-of-type > .cms_container_wide { align-items: center; }

header > div:first-of-type > .cms_container_wide { height: 40px; }
header > div:last-of-type > .cms_container_wide { height: 150px; }

/***-------------------------------------------*** Hamburger ***-------------------------------------------***/
header .hHamburger { cursor: pointer; position: absolute; }
header #hHamburger1 { top: 50%; right: 30px; transform: translateY(-50%); }
header #hHamburger2 { top: 30px; right: 30px; }
.nav-icon4 { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 26px; height: 22px; overflow: clip; transition: var(--transition); }
.nav-icon4 span { position: absolute; left: 0; display: block; width: 100%; height: 2px; background: var(--black); transition: var(--transition); will-change: transform; }
.nav-icon4 > span:first-of-type { top: 0px; }
.nav-icon4 > span:nth-of-type(2) { top: 10px; }
.nav-icon4 > span:nth-of-type(3) { top: 10px; }
.nav-icon4 span:last-of-type { top: 20px; }
body.navi .nav-icon4 > span:first-of-type { transform: translateX(100%); }
body.navi .nav-icon4 > span:nth-of-type(2) { transform: rotate(45deg); }
body.navi .nav-icon4 > span:nth-of-type(3) { transform: rotate(-45deg); }
body.navi .nav-icon4 span:last-of-type { transform: translateX(-100%); }

/***-------------------------------------------*** Logo ***-------------------------------------------***/
body #logo_container { position: absolute; top: 50%; left: 30px; transform: translateY(-50%); width: 368px; height: 97px; transition: var(--transition); }
body #logo_container > a { position: absolute; inset: 0; background: center left / contain no-repeat url("/pages/img/logo.svg"); }
body #logo_container_small { position: absolute; top: 50%; left: 30px; transform: translateY(-50%); width: 96px; height: 60px; opacity: 0; visibility: hidden; transition: var(--transition); }
body #logo_container_small > a { position: absolute; inset: 0; background: center left / contain no-repeat url("/pages/img/logo_small.svg"); }

/***-------------------------------------------*** Service Navigation ***-------------------------------------------***/
header #hService > ul { display: flex; align-items: center; gap: 50px; }
header #hService > ul > li { display: block; }
header #hService > ul > li > a { font-weight: 600; font-size: 16px; line-height: 19px; transition: var(--transition); }
header #hService > ul > li.current > a,
header #hService > ul > li > a:hover { color: var(--primary); }

/***-------------------------------------------*** Hidden until Mobile ***-------------------------------------------***/
@media screen and (min-width: 1141px) {
	.hServiceMobile,
	header .hHamburger,
	.cms_headerzusatz_box { display: none !important; }
}

/***-------------------------------------------*** Desktop ***-------------------------------------------***/
@media screen and (min-width: 1461px) {
	/* Start: Navi */
	header #hNavigation { width: 100%; padding: 0 0 0 398px; display: flex; justify-content: flex-end; }
	header #hNavigation > ul { display: flex; gap: 90px; }
	header #hNavigation > ul > li { position: relative; display: flex; align-items: center; }
	header #hNavigation > ul > li:before { content: ""; position: absolute; z-index: 1; bottom: -5px; left: 0; /*max-width: 63px;*/ width: 100%; height: 5px; background: var(--primary); opacity: 0; visibility: hidden; transition: var(--transition); }
	header #hNavigation > ul > li.current:before { opacity: 1; visibility: visible; }
	header #hNavigation > ul > li > a { display: block; font-weight: 600; font-size: 22px; line-height: 26px; text-align: center; white-space: nowrap; transition: var(--transition); }
	header #hNavigation > ul > li.current > a,
	header #hNavigation > ul > li:hover > a { color: var(--primary); }
	/* End: Navi */

	/* Start: Scrolled */
	/*#cmsgrid > div:first-of-type,*/
	header,
	header > div:last-of-type > .cms_container_wide,
	body #logo_container,
	body #logo_container_small,
	header #hNavigation,
	header #hNavigation > ul,
	header #hNavigation > ul > li > a { transition: var(--transition); }

	/*body.scrolled #cmsgrid > div:first-of-type { padding-top: 140px; }*/
	body.scrolled header { height: 140px; }
	body.scrolled header > div:last-of-type > .cms_container_wide { height: 100px; }
	body.scrolled #logo_container { opacity: 0; visibility: hidden; }
	body.scrolled #logo_container_small { opacity: 1; visibility: visible; }
	body.scrolled header #hNavigation { padding: 0 0 0 126px; }
	body.scrolled header #hNavigation > ul { gap: 80px; }
	body.scrolled header #hNavigation > ul > li > a { font-size: 19px; line-height: 23px; }
	/* End: Scrolled */
}

/***-------------------------------------------*** Tablet ***-------------------------------------------***/
@media screen and (min-width: 1141px) and (max-width: 1460px) {
	/* Start: Default Adjustments */
	#cmsgrid > div:first-of-type { padding-top: 160px; }
	header { height: 160px; }
	header > div:last-of-type > .cms_container_wide { height: 120px; }
	body #logo_container { width: 265px; height: 70px; }
	body #logo_container_small { width: 64px; height: 40px; }
	header #hService > ul { gap: 40px; }
	header #hService > ul > li > a { font-size: 15px; line-height: 18px; }
	/* End: Default Adjustments */

	/* Start: Navi */
	header #hNavigation { width: 100%; padding: 0 0 0 295px; display: flex; justify-content: flex-end; }
	header #hNavigation > ul { display: flex; align-items: center; gap: 60px; }
	header #hNavigation > ul > li { display: block; }
	header #hNavigation > ul > li > a { display: block; font-weight: 600; font-size: 17px; line-height: 20px; white-space: nowrap; transition: var(--transition); }
	header #hNavigation > ul > li.current > a,
	header #hNavigation > ul > li:hover > a { color: var(--primary); }
	/* End: Navi */

	/* Start: Scrolled */
	/*#cmsgrid > div:first-of-type,*/
	header,
	header > div:last-of-type > .cms_container_wide,
	body #logo_container,
	body #logo_container_small,
	header #hNavigation { transition: var(--transition); }

	/*body.scrolled #cmsgrid > div:first-of-type { padding-top: 120px; }*/
	body.scrolled header { height: 120px; }
	body.scrolled header > div:last-of-type > .cms_container_wide { height: 80px; }
	body.scrolled #logo_container { opacity: 0; visibility: hidden; }
	body.scrolled #logo_container_small { opacity: 1; visibility: visible; }
	body.scrolled header #hNavigation { padding: 0 0 0 94px; }
	/* End: Scrolled */
}

/***-------------------------------------------*** Smartphone ***-------------------------------------------***/
@media screen and (max-width: 1140px) {
	/* Start: Default Adjustments */
	#cmsgrid > div:first-of-type { padding-top: 80px; }
	header { height: 80px; }
	header > div:first-of-type { display: none; }
	header > div:last-of-type > .cms_container_wide { height: 80px; }
	header .hHamburger { display: block !important; }
	body #logo_container { width: 200px; height: 52px; }
	body #logo_container_small { width: 61px; height: 38px; }
	/* End: Default Adjustments */

	/* Start: Allgemein Navi */
	header #hNavigation	{ position: fixed; z-index: 1; top: 0; right: 0; bottom: 0; display: flex; flex-direction: column; width: 100vW; background: var(--quaternary); overflow-y: auto; opacity: 0; visibility: hidden; transition: var(--transition); }
	body.navi header #hNavigation { opacity: 1; visibility: visible; }
	header #hNavigation > ul { display: flex; flex-direction: column; align-items: flex-start; }
	header #hNavigation > ul > li { display: block; }
	header #hNavigation > ul > li > a { display: block; transition: var(--transition); }
	header #hNavigation > ul > li.current > a,
	header #hNavigation > ul > li:hover > a { color: var(--primary); }
	/* End: Allgemein Navi */

	/* Start: Navi */
	header #hNavigation > ul:first-of-type { gap: 25px; padding: 92px 30px 30px 30px; }
	header #hNavigation > ul:first-of-type > li > a { font-weight: 600; font-size: 36px; line-height: 43px; }
	/* End: Navi */

	/* Start: Service Mobile */
	header #hNavigation > ul:nth-of-type(2) { gap: 20px; padding: 10px 30px 30px 30px; }
	header #hNavigation > ul:nth-of-type(2) > li > a { font-weight: 700; font-size: 20px; line-height: 24px; }
	/* End: Service Mobile */

	/* Start: Headerzusatz */
	.cms_headerzusatz_box { display: block !important; padding: 10px 30px 30px 30px; margin: auto 0 0 0; }
	.cms_headerzusatz_box strong { font-weight: 700; }
	.cms_headerzusatz_box a { transition: var(--transition); }
	.cms_headerzusatz_box a:hover { color: var(--primary); }
	/* End: Headerzusatz */

	/* Start: Scrolled */
	/*#cmsgrid > div:first-of-type,*/
	header,
	header > div:last-of-type > .cms_container_wide,
	body #logo_container,
	body #logo_container_small { transition: var(--transition); }

	/*body.scrolled #cmsgrid > div:first-of-type { padding-top: 60px; }*/
	body.scrolled header { height: 60px; }
	body.scrolled header > div:last-of-type > .cms_container_wide { height: 60px; }
	body.scrolled #logo_container { opacity: 0; visibility: hidden; }
	body.scrolled #logo_container_small { opacity: 1; visibility: visible; }
	/* End: Scrolled */
}