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

/***-------------------------------------------*** Header ***-------------------------------------------***/
header { position: fixed; z-index: 1000; height: 199px; inset: 0 0 auto 0; }
header li { list-style: none; }
header a { text-decoration: none; }
header .cms_container_wide { position: relative; height: 199px; padding: 0 30px; }

/***-------------------------------------------*** Hamburger ***-------------------------------------------***/
header #hHamburger { cursor: pointer; position: absolute; top: 43px; right: 30px; display: none; justify-content: center; align-items: center; width: 50px; height: 50px; border-radius: 10px; background: var(--color-green-primary); }
header #hHamburgerLst { position: relative; width: 30px; height: 21px; }
header #hHamburgerLst > span { position: absolute; z-index: 1; left: 0; width: 100%; height: 3px; background: var(--white); border-radius: 10px; transition: var(--transition); }
header #hHamburgerLst > span:first-of-type { top: 0; }
header #hHamburgerLst > span:nth-of-type(2) { top: 9px; }
header #hHamburgerLst > span:last-of-type { top: 18px; }
body.navi header #hHamburgerLst > span:first-of-type,
body.navi header #hHamburgerLst > span:last-of-type { top: 9px; }
body.navi header #hHamburgerLst > span:first-of-type { transform: rotate(45deg); }
body.navi header #hHamburgerLst > span:nth-of-type(2) { opacity: 0; visibility: hidden; }
body.navi header #hHamburgerLst > span:last-of-type { transform: rotate(-45deg); }

/***-------------------------------------------*** Close ***-------------------------------------------***/
header #hClose { cursor: pointer; position: absolute; top: 21px; right: 30px; display: none; justify-content: center; align-items: center; width: 50px; height: 50px; border-radius: 10px; background: var(--color-green-primary); }
header #hCloseLst { position: relative; width: 30px; height: 21px; }
header #hCloseLst > span { position: absolute; z-index: 1; top: 9px; left: 0; width: 100%; height: 3px; background: var(--white); border-radius: 10px; }
header #hCloseLst > span:first-of-type { transform: rotate(45deg); }
header #hCloseLst > span:last-of-type { transform: rotate(-45deg); }

/***-------------------------------------------*** Logo ***-------------------------------------------***/
header #hLogo { position: absolute; z-index: 1; top: 29px; right: 30px; }
header #hLogo > a,
header #hLogo > a > svg { display: flex; width: 238px; height: 141px; }
@media screen and (min-width: 1201px) { body.home header #hLogo { display: none; } }

/***-------------------------------------------*** Mobile Logo ***-------------------------------------------***/
header #hMobileLogo { position: absolute; z-index: 1; top: -10px; left: -56px; display: none; }
header #hMobileLogo > a,
header #hMobileLogo > a > svg { display: flex; width: 175px; height: 106px; }
header #hMobileLogo .hideOnScroll { display: none; }

/***-------------------------------------------*** Desktop ***-------------------------------------------***/
@media screen and (min-width: 1201px) {
	/* Start: Allgemein */
	header #hNavigation { display: flex; width: 100%; padding: 0 268px 0 0; justify-content: flex-start; }
	/* End: Allgemein */

	/* Start: First-Level */
	header #hNavigation > ul { display: flex; align-items: center; gap: 26px; padding: 12px 22px 0 22px; background: var(--color-green-primary); border-radius: 0 0 20px 20px; box-shadow: 0 4px 4px 0 rgba(0,0,0,0.25); }
	header #hNavigation > ul > li { position: relative; display: block; padding: 0 0 12px 0; }
	header #hNavigation > ul > li:not(:last-of-type):before { content: ""; position: absolute; z-index: 1; top: 50%; right: -14px; transform: translateY(calc(-50% - 6px)); width: 1px; height: 14px; background: var(--white); }
	header #hNavigation > ul > li > .toggler { display: none; }
	header #hNavigation > ul > li > a { display: block; font-weight: 400; font-size: 18px; line-height: 27px; color: var(--white); white-space: nowrap; transition: var(--transition); }
	header #hNavigation > ul > li > a:before { display: block; content: attr(title); font-weight: 700; height: 0; overflow: hidden; visibility: hidden; }
	header #hNavigation > ul > li.current > a,
	header #hNavigation > ul > li:hover > a { font-weight: 700; }
	/* End: First-Level */

	/* Start: Second-Level */
	header #hNavigation > ul > li > ul { position: absolute; left: 0; top: 39px; display: none; flex-direction: column; gap: 14px; min-width: max-content; padding: 14px 18px 18px 18px; background: var(--color-green-secondary); border-radius: 0 0 20px 20px; }
	header #hNavigation > ul > li:hover > ul { display: flex; }
	header #hNavigation > ul > li > ul > li { display: block; }
	header #hNavigation > ul > li > ul > li > a { display: block; font-weight: 400; font-size: 18px; line-height: 27px; color: var(--black); white-space: nowrap; transition: var(--transition); }
	header #hNavigation > ul > li > ul > li > a:before { display: block; content: attr(title); font-weight: 700; height: 0; overflow: hidden; visibility: hidden; }
	header #hNavigation > ul > li > ul > li.current > a,
	header #hNavigation > ul > li > ul > li:hover > a { font-weight: 700; }
	/* End: Second-Level */

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

	body.scrolled header { height: 115px; }
	body.scrolled header .cms_container_wide { height: 115px; }
	body.scrolled header #hLogo { top: -15px; }
	body.scrolled header #hLogo .hideOnScroll { opacity: 0; visibility: hidden; }
	/* End: Scrolled */
}

/***-------------------------------------------*** Tablet ***-------------------------------------------***/
@media screen and (min-width: 960px) and (max-width: 1200px) {
	/* Start: Header */
	body { padding-top: 163px; }
	header { height: 163px; }
	header .cms_container_wide { height: 163px; }
	header #hHamburger { display: flex; top: 56.5px; }
	header #hLogo { top: 15px; right: auto; left: 30px; }
	header #hLogo > a,
	header #hLogo > a > svg { width: 220px; height: 133px; }
	/* End: Header */

	/* Start: Allgemein */
	header #hNavigation { position: fixed; top: 114px; right: -100%; bottom: 0; overflow-y: auto; transition: var(--transition); }
	body.navi header #hNavigation { right: 0; }
	/* End: Allgemein */

	/* Start: First-Level */
	header #hNavigation > ul { display: flex; flex-direction: column; gap: 15px; padding: 15px; background: var(--white); border: 1px solid var(--color-green-primary); border-radius: 10px; }
	header #hNavigation > ul > li { position: relative; display: block; background: var(--color-green-secondary); border-radius: 10px; }
	header #hNavigation > ul > li > a { display: block; font-weight: 400; font-size: 27px; line-height: 38px; color: var(--white); white-space: nowrap; padding: 7px 57px 7px 15px; background: var(--color-green-primary); border-radius: 10px; transition: var(--transition); }
	header #hNavigation > ul > li > a:before { display: block; content: attr(title); font-weight: 700; height: 0; overflow: hidden; visibility: hidden; }
	header #hNavigation > ul > li.current > a,
	header #hNavigation > ul > li:hover > a { font-weight: 700; }
	/* End: First-Level */

	/* Start: Toggler */
	header #hNavigation > ul > li > .toggler { cursor: pointer; position: absolute; z-index: 1; top: 0; right: 0; display: flex; align-items: center; width: 42px; height: 52px; }
	header #hNavigation > ul > li > .toggler > svg { display: flex; width: 21px; height: 12px; }
	header #hNavigation > ul > li.open > .toggler > svg { transform: rotate(180deg); }
	header #hNavigation > ul > li > .toggler > svg > path { fill: var(--white); }
	/* End: Toggler */

	/* Start: Second-Level */
	header #hNavigation > ul > li > ul { display: none; flex-direction: column; gap: 7px; padding: 15px 30px; }
	header #hNavigation > ul > li.open > ul { display: flex; }
	header #hNavigation > ul > li > ul > li { display: block; }
	header #hNavigation > ul > li > ul > li > a { display: block; font-weight: 400; font-size: 22px; line-height: 32px; color: var(--black); white-space: nowrap; transition: var(--transition); }
	header #hNavigation > ul > li > ul > li > a:before { display: block; content: attr(title); font-weight: 700; height: 0; overflow: hidden; visibility: hidden; }
	header #hNavigation > ul > li > ul > li.current > a,
	header #hNavigation > ul > li > ul > li:hover > a { font-weight: 700; }
	/* End: Second-Level */

	/* Start: Scrolled */
	header,
	header .cms_container_wide,
	header #hLogo,
	header #hLogo .hideOnScroll,
	header #hHamburger { transition: var(--transition); }

	body.scrolled header { height: 110px; background: transparent linear-gradient(0deg, #FFFFFF00 0%, #FFFFFFE0 43%, #FFFFFF 100%) 0% 0% no-repeat padding-box; }
	body.scrolled header .cms_container_wide { height: 110px; }
	body.scrolled header #hLogo { top: -14px; left: -78px; }
	body.scrolled header #hLogo .hideOnScroll { opacity: 0; visibility: hidden; }
	body.scrolled header #hHamburger { top: 30px; }
	/* End: Scrolled */

	/* Start: Home */
	body.home header #hLogo { opacity: 0; visibility: hidden; }
	body.home header #hLogo .hideOnScroll { opacity: 0; visibility: hidden; }
	body.home header #hLogo { top: -14px; left: -78px; }
	body.home.scrolled header #hLogo { opacity: 1; visibility: visible; }
	/* End: Home */
}

/***-------------------------------------------*** Smartphone ***-------------------------------------------***/
@media screen and (max-width: 959px) {
	/* Start: Header */
	body { padding-top: 136px; }
	header { height: 136px; }
	header .cms_container_wide { height: 136px; }
	header #hHamburger { display: flex; }
	header #hClose { display: flex; }
	header #hLogo { top: 15px; right: auto; left: 30px; }
	header #hLogo > a,
	header #hLogo > a > svg { width: 175px; height: 106px; }
	/* End: Header */

	/* Start: Mobile Logo */
	header #hMobileLogo { display: block; }
	/* End: Mobile Logo */

	/* Start: Allgemein */
	header #hNavigation { position: fixed; z-index: 12; top: 0; right: -100vW; bottom: 0; width: 100vW; overflow-y: auto; background: var(--white); transition: var(--transition); }
	body.navi header #hNavigation { right: 0; }
	/* End: Allgemein */

	/* Start: First-Level */
	header #hNavigation > ul { display: flex; flex-direction: column; gap: 15px; padding: 133px 30px 30px 30px; }
	header #hNavigation > ul > li { position: relative; display: block; background: var(--color-green-secondary); border-radius: 10px; }
	header #hNavigation > ul > li > a { display: block; font-weight: 400; font-size: 27px; line-height: 38px; color: var(--white); white-space: nowrap; padding: 7px 57px 7px 15px; background: var(--color-green-primary); border-radius: 10px; transition: var(--transition); }
	header #hNavigation > ul > li > a:before { display: block; content: attr(title); font-weight: 700; height: 0; overflow: hidden; visibility: hidden; }
	header #hNavigation > ul > li.current > a,
	header #hNavigation > ul > li:hover > a { font-weight: 700; }
	/* End: First-Level */

	/* Start: Toggler */
	header #hNavigation > ul > li > .toggler { cursor: pointer; position: absolute; z-index: 1; top: 0; right: 0; display: flex; align-items: center; width: 42px; height: 52px; }
	header #hNavigation > ul > li > .toggler > svg { display: flex; width: 21px; height: 12px; }
	header #hNavigation > ul > li.open > .toggler > svg { transform: rotate(180deg); }
	header #hNavigation > ul > li > .toggler > svg > path { fill: var(--white); }
	/* End: Toggler */

	/* Start: Second-Level */
	header #hNavigation > ul > li > ul { display: none; flex-direction: column; gap: 7px; padding: 15px 30px; }
	header #hNavigation > ul > li.open > ul { display: flex; }
	header #hNavigation > ul > li > ul > li { display: block; }
	header #hNavigation > ul > li > ul > li > a { display: block; font-weight: 400; font-size: 22px; line-height: 32px; color: var(--black); white-space: nowrap; transition: var(--transition); }
	header #hNavigation > ul > li > ul > li > a:before { display: block; content: attr(title); font-weight: 700; height: 0; overflow: hidden; visibility: hidden; }
	header #hNavigation > ul > li > ul > li.current > a,
	header #hNavigation > ul > li > ul > li:hover > a { font-weight: 700; }
	/* End: Second-Level */

	/* Start: Scrolled */
	header,
	header .cms_container_wide,
	header #hLogo,
	header #hLogo .hideOnScroll,
	header #hHamburger { transition: var(--transition); }

	body.scrolled header { height: 94px; background: transparent linear-gradient(0deg, #FFFFFF00 0%, #FFFFFFE0 43%, #FFFFFF 100%) 0% 0% no-repeat padding-box; }
	body.scrolled header .cms_container_wide { height: 94px; }
	body.scrolled header #hLogo { top: -8px; left: -56px; }
	body.scrolled header #hLogo .hideOnScroll { opacity: 0; visibility: hidden; }
	body.scrolled header #hHamburger { top: 22px; }
	/* End: Scrolled */

	/* Start: Home */
	body.home header #hLogo { opacity: 0; visibility: hidden; }
	body.home header #hLogo .hideOnScroll { opacity: 0; visibility: hidden; }
	body.home header #hLogo { top: -8px; left: -56px; }
	body.home.scrolled header #hLogo { opacity: 1; visibility: visible; }
	/* End: Home */
}