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

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

/***-------------------------------------------*** Hamburger ***-------------------------------------------***/
#nav-icon4 { cursor: pointer; position: relative; display: inline-block; width: 57px; height: 46px; transform: rotate(0deg); transition: var(--transition); }
#nav-icon4 span { position: absolute; left: 0; display: block; width: 100%; height: 9px; opacity: 1; background: var(--primary); 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: 18.5px; }
#nav-icon4 span:nth-child(3) { top: 37px; }
body.navi #nav-icon4 span:nth-child(1) { top: -2px; left: 8.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: 38px; left: 8.5px; transform: rotate(-45deg); }

/***-------------------------------------------*** Logo ***-------------------------------------------***/
body #logo_container { position: absolute; z-index: 1; top: 0; left: 30px; width: 243px; height: 239px; background: #FFFFFF; box-shadow: 0px 3px 6px rgba(0,0,0,0.16); }
body #logo_container > a { position: absolute; z-index: 2; inset: 31px 21px 27px 22px; background: url("/pages/img/logo.svg"); background-repeat: no-repeat; background-position: center; background-size: contain; }

/***-------------------------------------------*** Service Navigation ***-------------------------------------------***/
header #hService { position: absolute; z-index: 1; top: 0; right: 30px; }
header #hService > ul { display: flex; align-items: center; gap: 6px; }
header #hService > ul > li { display: block; }
header #hService > ul > li > a {
	font-family: "Hind", sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 25px;
	color: #000000;
	padding: 3px 12px;
	background: #EBEBEB;
	border-radius: 10px 0;
	transition: var(--transition);
}
header #hService > ul > li:hover > a,
header #hService > ul > li.current > a { color: #FFFFFF; background: #C1D33A; }
header #hServiceMobile { display: none; }

/***-------------------------------------------*** Search ***-------------------------------------------***/
#hSearch { position: relative; display: block; width: 19px; height: 19px; transform: translateY(-4px); }
#hSearchSubmit { cursor: pointer; position: relative; z-index: 2; width: 19px; height: 19px; background: url("/pages/img/hSearchLupe.svg"); background-repeat: no-repeat; background-position: center; background-size: contain; }
#hSearchInput { position: absolute; z-index: 1; top: -8px; right: -8px; width: 206px; padding: 7px 10px 3px 10px; border: 1px solid #000000; opacity: 0; visibility: hidden; transition: var(--transition); }
#hSearch.active #hSearchInput { opacity: 1; visibility: visible; }

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

	/* Start: First-Level */
	header #hNavigation > .nano > .nano-content > ul { display: flex; justify-content: flex-end; align-items: center; gap: 32px; width: 100%; padding: 69px 0 0 273px; }
	header #hNavigation > .nano > .nano-content > ul > li { position: relative; display: block; }
	header #hNavigation > .nano > .nano-content > ul > li > a {
		display: block;
		font-family: "Hind", sans-serif;
		font-weight: 400;
		font-size: 21px;
		line-height: 33px;
		color: #000000;
		text-align: left;
		white-space: nowrap;
		padding: 0 0 8px 0;
		transition: var(--transition);
	}
	header #hNavigation > .nano > .nano-content > ul > li.current > a,
	header #hNavigation > .nano > .nano-content > ul > li:hover > a { color: var(--primary); }
	/* End: First-Level */

	/* Start: Second-Level */
	header #hNavigation > .nano > .nano-content > ul > li > ul { display: none; position: absolute; top: 41px; left: 0; flex-direction: column; min-width: 100%; background: #FFFFFF; border-top: 2px solid var(--line-color); box-shadow: 0px 3px 6px rgba(0,0,0,0.16); }
	header #hNavigation > .nano > .nano-content > ul > li:hover > ul { display: flex; }
	header #hNavigation > .nano > .nano-content > ul > li > ul > li { display: block; border-bottom: 1px solid #000000; }
	header #hNavigation > .nano > .nano-content > ul > li > ul > li:last-of-type { border-bottom: none; }
	header #hNavigation > .nano > .nano-content > ul > li > ul > li > a {
		display: block;
		font-family: "Hind", sans-serif;
		font-weight: 400;
		font-size: 21px;
		line-height: 33px;
		color: #000000;
		text-align: left;
		white-space: nowrap;
		padding: 3px 17px 1px 17px;
		transition: var(--transition);
	}
	header #hNavigation > .nano > .nano-content > ul > li > ul > li.active > a,
	header #hNavigation > .nano > .nano-content > ul > li > ul > li > a:hover { color: var(--primary); }
	/* End: Second-Level */

	/* Start: Scrolled */
	body,
	header,
	header .cms_container_wide,
	body #logo_container,
	body #logo_container > a,
	header #hNavigation > .nano > .nano-content > ul { transition: var(--transition); }

	body.scrolled { padding-top: 86px; }
	body.scrolled header { height: 86px; }
	body.scrolled header .cms_container_wide { height: 86px; }
	body.scrolled #logo_container { width: 129px; height: 127px; }
	body.scrolled #logo_container > a { inset: 16px 11px 14px 12px; }
	body.scrolled header #hNavigation > .nano > .nano-content > ul { padding: 45px 0 0 159px; }
	/* End: Scrolled */
}

/***-------------------------------------------*** Tablet ***-------------------------------------------***/
@media screen and (min-width: 960px) and (max-width: 1200px) {
	/* Start: Allgemein */
	header #hNavigation { position: fixed; top: 102px; right: -100%; bottom: 0; transition: var(--transition); }
	body.navi header #hNavigation { right: 30px; }
	header #hHamburger { position: absolute; top: 18.5px; right: 30px; display: flex; justify-content: center; align-items: center; width: 83px; height: 83px; background: #FFFFFF; border: 1px solid var(--primary); }
	/* End: Allgemein */

	/* Start: Service Navigation */
	header #hService { display: none; }
	/* End: Service Navigation */

	/* Start: Service Navigation Mobile */
	header #hServiceMobile { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
	header #hServiceMobile > a {
		font-family: "Hind", sans-serif;
		font-weight: 400;
		font-size: 16px;
		line-height: 25px;
		color: #000000;
		padding: 3px 12px;
		background: #EBEBEB;
		border-radius: 10px 0;
		transition: var(--transition);
	}
	header #hServiceMobile > a.current,
	header #hServiceMobile > a:hover { color: #FFFFFF; background: #C1D33A; }
	/* End: Service Navigation Mobile */

	/* Start: Search */
	#hSearch { grid-column: span 2; }
	#hSearch { display: flex; order: -1; width: 100%; height: auto; transform: none; }
	#hSearchInput { right: auto; left: -8px; width: calc(100% + 8px); }
	/* End: Search */

	/* Start: First-Level */
	header #hNavigation > .nano > .nano-content > ul { display: grid; gap: 38px 30px; grid-template-columns: repeat(2, 1fr); padding: 30px; background: #FFFFFF; border: 1px solid var(--line-color); box-shadow: 0px 3px 6px rgba(0,0,0,0.16); }
	header #hNavigation > .nano > .nano-content > ul > li { display: flex; flex-direction: column; gap: 7px; }
	/*header #hNavigation > .nano > .nano-content > ul > li:last-of-type:nth-child(odd) { grid-column: span 2; }*/
	header #hNavigation > .nano > .nano-content > ul > li > a {
		display: block;
		font-family: "Hind", sans-serif;
		font-weight: 400;
		font-size: 21px;
		line-height: 31px;
		color: #000000;
		text-align: left;
		white-space: nowrap;
		transition: var(--transition);
	}
	header #hNavigation > .nano > .nano-content > ul > li.current > a,
	header #hNavigation > .nano > .nano-content > ul > li:hover > a { color: var(--primary); }
	/* End: First-Level */

	/* Start: Second-Level */
	header #hNavigation > .nano > .nano-content > ul > li > ul { display: flex; flex-direction: column; background: #FFFFFF; border-top: 2px solid var(--line-color); box-shadow: 0px 3px 6px rgba(0,0,0,0.16); }
	header #hNavigation > .nano > .nano-content > ul > li > ul > li { display: flex; border-bottom: 1px solid var(--line-color); }
	header #hNavigation > .nano > .nano-content > ul > li > ul > li:last-of-type { border-bottom: none; }
	header #hNavigation > .nano > .nano-content > ul > li > ul > li > a {
		display: block;
		font-family: "Hind", sans-serif;
		font-weight: 400;
		font-size: 21px;
		line-height: 31px;
		color: #000000;
		text-align: left;
		white-space: nowrap;
		padding: 7px 18px 4px 18px;
		transition: var(--transition);
	}
	header #hNavigation > .nano > .nano-content > ul > li > ul > li.active > a,
	header #hNavigation > .nano > .nano-content > ul > li > ul > li > a:hover { color: var(--primary); }
	/* End: Second-Level */

	/* Start: Scrolled */
	body,
	header,
	header .cms_container_wide,
	body #logo_container,
	body #logo_container > a,
	header #hNavigation,
	header #hHamburger { transition: var(--transition); }

	body.scrolled { padding-top: 113px; }
	body.scrolled header { height: 113px; }
	body.scrolled header .cms_container_wide { height: 113px; }
	body.scrolled #logo_container { width: 129px; height: 127px; }
	body.scrolled #logo_container > a { inset: 16px 11px 14px 12px; }
	body.scrolled header #hNavigation { top: 98px; }
	body.scrolled header #hHamburger { top: 15px; }
	/* End: Scrolled */
}

/***-------------------------------------------*** Smartphone ***-------------------------------------------***/
@media screen and (max-width: 959px) {
	/* Start: Allgemein */
	header #hNavigation	{ position: fixed; top: 191px; right: -100vW; bottom: 0; width: 100vW; transition: var(--transition); background: #FFFFFF; }
	body.navi header #hNavigation { right: 0; }
	header #hNavigation:before { content: ""; position: absolute; top: -113px; left: 0; width: 100%; height: 113px; box-shadow: 0px 1px 5px 2px #ccc; opacity: 0; visibility: hidden; transition: var(--transition); }
	body.scrolled.navi header #hNavigation:before { opacity: 1; visibility: visible; }
	header #hHamburger { position: absolute; top: 81px; right: 30px; display: flex; justify-content: center; align-items: center; width: 83px; height: 83px; background: #FFFFFF; border: 1px solid var(--primary); }
	/* End: Allgemein */

	/* Start: Service Navigation */
	header #hService { display: none; }
	/* End: Service Navigation */

	/* Start: Service Navigation Mobile */
	header #hServiceMobile { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
	header #hServiceMobile > a {
		font-family: "Hind", sans-serif;
		font-weight: 400;
		font-size: 16px;
		line-height: 25px;
		color: #000000;
		padding: 3px 12px;
		background: #EBEBEB;
		border-radius: 10px 0;
		transition: var(--transition);
	}
	header #hServiceMobile > a.current,
	header #hServiceMobile > a:hover { color: #FFFFFF; background: #C1D33A; }
	/* End: Service Navigation Mobile */

	/* Start: Header */
	body { padding-top: 191px; }
	header { height: 191px; }
	header .cms_container_wide { height: 191px; }
	/* End: Header */

	/* Start: Logo */
	body #logo_container { width: 166px; height: 164px; }
	body #logo_container > a { inset: 21px 14px 19px 15px; }
	/* End: Logo */

	/* Start: Search */
	#hSearch { display: flex; order: -1; width: 100%; height: auto; transform: none; }
	#hSearchInput { right: auto; left: -8px; width: calc(100% + 8px); }
	/* End: Search */

	/* Start: First-Level */
	header #hNavigation > .nano > .nano-content > ul { display: flex; flex-direction: column; gap: 38px; padding: 30px; }
	header #hNavigation > .nano > .nano-content > ul > li { display: flex; flex-direction: column; gap: 7px; }
	header #hNavigation > .nano > .nano-content > ul > li > a {
		display: block;
		font-family: "Hind", sans-serif;
		font-weight: 400;
		font-size: 21px;
		line-height: 31px;
		color: #000000;
		text-align: left;
		white-space: nowrap;
		transition: var(--transition);
	}
	header #hNavigation > .nano > .nano-content > ul > li.current > a,
	header #hNavigation > .nano > .nano-content > ul > li:hover > a { color: var(--primary); }
	/* End: First-Level */

	/* Start: Second-Level */
	header #hNavigation > .nano > .nano-content > ul > li > ul { display: flex; flex-direction: column; background: #FFFFFF; border-top: 2px solid var(--line-color); box-shadow: 0px 3px 6px rgba(0,0,0,0.16); }
	header #hNavigation > .nano > .nano-content > ul > li > ul > li { display: flex; border-bottom: 1px solid var(--line-color); }
	header #hNavigation > .nano > .nano-content > ul > li > ul > li:last-of-type { border-bottom: none; }
	header #hNavigation > .nano > .nano-content > ul > li > ul > li > a {
		display: block;
		font-family: "Hind", sans-serif;
		font-weight: 400;
		font-size: 21px;
		line-height: 31px;
		color: #000000;
		text-align: left;
		white-space: nowrap;
		padding: 7px 18px 4px 18px;
		transition: var(--transition);
	}
	header #hNavigation > .nano > .nano-content > ul > li > ul > li.active > a,
	header #hNavigation > .nano > .nano-content > ul > li > ul > li > a:hover { color: var(--primary); }
	/* End: Second-Level */

	/* Start: Scrolled */
	body,
	header,
	header .cms_container_wide,
	body #logo_container,
	body #logo_container > a,
	header #hNavigation,
	header #hHamburger { transition: var(--transition); }

	body.scrolled { padding-top: 113px; }
	body.scrolled header { height: 113px; }
	body.scrolled header .cms_container_wide { height: 113px; }
	body.scrolled #logo_container { width: 166px; height: 164px; }
	body.scrolled #logo_container > a { inset: 21px 14px 19px 15px; }
	body.scrolled.navi #logo_container { width: 115px; height: 113px; }
	body.scrolled.navi #logo_container > a { inset: 14px 10px 12px 11px; }
	body.scrolled header #hNavigation { top: 113px; }
	body.scrolled header #hHamburger { top: 15px; }
	/* End: Scrolled */
}