/*╔════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════╗*/
/*║ HEADER I                                                                                                                                                                                                                                              ║*/
/*╚════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════╝*/
/***-------------------------------------------*** Body ***-------------------------------------------***/
body:not(.home) { padding-top: 126px; }

/***-------------------------------------------*** Header ***-------------------------------------------***/
header { position: fixed; z-index: 1000; top: 0; right: 0; left: 0; height: 126px; }
body:not(.home) header { background: var(--black); }
body.home.scrolled header { background: var(--black); }
body.home.navi header { background: var(--black); }
body.home header:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 188px; background: linear-gradient(0deg, rgba(0, 0, 0, 0.00) 0%, #000 100%); transition: var(--transition); }
body.home.scrolled header:before { opacity: 0; visibility: hidden; }
body.home.navi header:before { opacity: 0; visibility: hidden; }
header li { list-style: none; }
header a { text-decoration: none; }
header .cms_container_wide { position: relative; height: 126px; padding: 0 30px; }

/***-------------------------------------------*** Hamburger ***-------------------------------------------***/
header #hHamburger { position: absolute; top: 50%; right: 30px; transform: translateY(-50%); width: 55px; height: 28px; }
#nav-icon4 { cursor: pointer; position: relative; width: 55px; height: 28px; transform: rotate(0deg); transition: var(--transition); }
#nav-icon4 span { position: absolute; left: 0; width: 100%; height: 2px; background: var(--white); opacity: 1; transform: rotate(0deg); transition: var(--transition); }
#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: 13px; }
#nav-icon4 span:nth-child(3) { top: 26px; }
/*body.navi #nav-icon4 span:nth-child(1) { top: 1px; left: 5.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: 27px; left: 5.5px; transform: rotate(-45deg); }*/

/***-------------------------------------------*** Logo ***-------------------------------------------***/
#hLogo { position: absolute; z-index: 1; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); display: flex; align-items: center; gap: 16px; }
#hLogoBee { width: 70px; height: 74px; background: center / contain no-repeat url("/pages/img/logo_bee.svg"); }
#hLogoTxt { width: 184px; height: 45px; background: center / contain no-repeat url("/pages/img/logo_text.svg"); }

/***-------------------------------------------*** Navigation ***-------------------------------------------***/
/* Start: vHeaderSpace */
header #hNavigation,
header #hClose { --vHeaderSpace: calc(calc(calc(100svw - 1630px) / 2) + 30px); }
/* End: vHeaderSpace */

/* Start: Allgemein */
header #hNavigation { position: fixed; z-index: 9999; top: 0; right: -100%; bottom: 0; padding: 147px max(30px,var(--vHeaderSpace)) 30px 60px; background: var(--white); box-shadow: 0px 4px 4px 3px rgba(0,0,0,0.25); overflow-y: auto; transition: var(--transition); }
body.navi header #hNavigation { right: 0; }
/* End: Allgemein */

/* Start: Close */
header #hClose { position: absolute; z-index: 1; top: 47px; right: max(30px,var(--vHeaderSpace)); display: flex; width: 34px; height: 30px; }
header #hClose > svg { display: flex; width: 34px; height: 30px; }
header #hClose > svg > line { stroke: var(--black); }
/* End: Close */

/* Start: First-Level */
header #hNavigation > ul { display: flex; flex-direction: column; gap: 46px; }
header #hNavigation > ul > li { display: block; }
header #hNavigation > ul > li > div { display: flex; align-items: center; }
header #hNavigation > ul > li > div > a {
	display: block;
	font-family: var(--font-family-primary);
	font-weight: 400;
	font-size: 32px;
	line-height: 32px;
	color: var(--black);
	text-align: left;
	white-space: nowrap;
	transition: var(--transition);
}
header #hNavigation > ul > li.current > div > a,
header #hNavigation > ul > li:hover > div > a { color: var(--primary); }
/* End: First-Level */

/* Start: Toggler */
header #hNavigation > ul > li > div > .toggler { display: flex; align-items: center; justify-content: flex-end; width: 46px; height: 32px; }
header #hNavigation > ul > li > div > .toggler > svg { display: flex; width: 16px; height: 9px; will-change: transform; }
header #hNavigation > ul > li.open > div > .toggler > svg { transform: rotate(180deg); }
header #hNavigation > ul > li > div > .toggler > svg > path { fill: var(--black); transition: var(--transition); }
header #hNavigation > ul > li.current > div > .toggler > svg > path,
header #hNavigation > ul > li:hover > div > .toggler > svg > path { fill: var(--primary); }
/* End: Toggler */

/* Start: Second-Level */
header #hNavigation > ul > li > ul { display: none; flex-direction: column; gap: 5px; margin: 16px 0 0 0; }
header #hNavigation > ul > li.open > ul { display: flex; }
header #hNavigation > ul > li > ul > li { display: inline-flex; }
header #hNavigation > ul > li > ul > li > a {
	position: relative;
	display: block;
	font-family: var(--font-family-secondary);
	font-weight: 300;
	font-size: 20px;
	line-height: 27px;
	color: var(--black);
	text-align: left;
	white-space: nowrap;
	padding: 0 0 0 14px;
	transition: var(--transition);
}
header #hNavigation > ul > li > ul > li.active > a,
header #hNavigation > ul > li > ul > li > a:hover { color: var(--primary); }
header #hNavigation > ul > li > ul > li > a > svg { position: absolute; z-index: 1; top: 50%; left: 0; transform: translateY(-50%); width: 5px; height: 9px; }
header #hNavigation > ul > li > ul > li > a > svg > path { fill: var(--black); transition: var(--transition); }
header #hNavigation > ul > li > ul > li.active > a > svg > path,
header #hNavigation > ul > li > ul > li > a:hover > svg > path { fill: var(--primary); }
/* End: Second-Level */

/***-------------------------------------------*** Scrolled > Smartphone ***-------------------------------------------***/
@media screen and (min-width: 960px) {
	/* Start: Scrolled */
	#hLogo { transition: var(--transition-long); will-change: transform; }
	body.scrolled:not(.navi) #hLogo { left: 30px; transform: translateX(0) translateY(-50%); }

	header,
	header .cms_container_wide,
	#hLogoBee,
	#hLogoTxt,
	header #hNavigation	{ transition: var(--transition); }

	body.scrolled:not(.navi) header { height: 90px; }
	body.scrolled:not(.navi) header .cms_container_wide { height: 90px; }
	body.scrolled:not(.navi) #hLogoBee { width: 59px; height: 62px; }
	body.scrolled:not(.navi) #hLogoTxt { opacity: 0; visibility: hidden; }
	/* End: Scrolled */
}

/***-------------------------------------------*** Smartphone ***-------------------------------------------***/
@media screen and (max-width: 959px) {
	/* Start: Header */
	body:not(.home) { padding-top: 87px; }
	/* Start: Header */

	/* Start: Header */
	header { height: 87px; }
	header .cms_container_wide { height: 87px; }
	/* Start: Header */

	/* Start: Logo */
	#hLogo { left: 30px; transform: translateX(0) translateY(-50%); gap: 12px; }
	#hLogoBee { width: 50px; height: 53px; }
	#hLogoTxt { width: 131px; height: 32px; }
	/* End: Logo */

	/* Start: Allgemein */
	header #hNavigation { right: -100vW; width: 100vW; padding: 107px 30px 30px 30px; }
	/* End: Allgemein */

	/* Start: Scrolled */
	header,
	header .cms_container_wide,
	#hLogo,
	#hLogoBee,
	#hLogoTxt,
	header #hNavigation { transition: var(--transition); }

	body.scrolled header { height: 65px; }
	body.scrolled header .cms_container_wide { height: 65px; }
	body.scrolled #hLogo { gap: 9px; }
	body.scrolled #hLogoBee { width: 38px; height: 40px; }
	body.scrolled #hLogoTxt { width: 98px; height: 24px; }
	/* End: Scrolled */
}