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

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

/***-------------------------------------------*** Hamburger ***-------------------------------------------***/
#nav-icon4 { cursor: pointer; position: relative; display: inline-block; width: 52px; height: 30px; transform: rotate(0deg); transition: .5s ease-in-out; }
#nav-icon4 span { position: absolute; left: 0; display: block; width: 100%; height: 5px; background: #335091; 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: 12.5px; }
#nav-icon4 span:nth-child(3) { top: 25px; }
body.navi #nav-icon4 span:nth-child(1) { top: -6.5px; left: 7.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: 31px; left: 7.5px; transform: rotate(-45deg); }

/***-------------------------------------------*** Logo ***-------------------------------------------***/
body #logo_container { position: absolute; z-index: 1; top: 52px; left: 30px; width: 443px; height: 63px; overflow: hidden; }
body #logo_container > a {
	position: absolute;
	z-index: 2;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: url("/pages/img/wf_region_zofingen.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

/***-------------------------------------------*** Service Navigation ***-------------------------------------------***/
header #hService { display: flex; justify-content: flex-end; }
header #hService > ul { display: flex; align-items: center; }
header #hService > ul > li { display: flex; align-items: center; margin: 0 4px 0 0; }
header #hService > ul > li:last-of-type { margin: 0; }
header #hService > ul > li > a {
	display: inline-flex;
	align-items: center;
	font-family: "Heebo", sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
	color: #000000;
	text-align: left;
	padding: 11px 12px 2px 12px;
	background: #E8E7E8;
	transition: all .3s ease-in-out;
}
header #hService > ul > li.current > a { color: #FFFFFF; background: #335091; }
header #hService > ul > li:hover > a { color: #FFFFFF; background: #335091; }
header #hService > ul > li > a > i { display: inline-flex; font-size: 16px; line-height: 24px; color: #000000; margin: 0 10px 0 0; transition: all .3s ease-in-out; }
header #hService > ul > li:hover > a > i { color: #FFFFFF; }
header #hNavigation > ul#hServiceMobile { display: none; }

/***-------------------------------------------*** Search ***-------------------------------------------***/
header #hSearch { margin: 0 4px 0 0; }
header #hSearch,
header #hSearch > a,
header #hSearch > a > svg { display: flex; width: 20px; height: 20px; }
header #hSearch > a > svg > path { stroke: #495057; transition: all .3s ease-in-out; }
header #hSearch:hover > a > svg > path { stroke: #335091; }
@media screen and (max-width: 959px) { header #hSearch { display: none; } }

/***-------------------------------------------*** Search Mobile ***-------------------------------------------***/
header #hSearchMobile { display: inline-flex; margin: 22px 0 0 0; }
header #hSearchMobile > a { display: flex; align-items: center; gap: 5px; background: #335091; border: 1px solid #335091; border-radius: 0; padding: 3px 15px; }
header #hSearchMobile > a > svg { display: flex; width: 12px; height: 12px; }
header #hSearchMobile > a > svg > path { stroke: #FFFFFF; }
header #hSearchMobile > a > span { font-weight: 400; font-size: 13px; line-height: 22px; color: #FFFFFF; }
@media screen and (min-width: 960px) { header #hSearchMobile { display: none; } }

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

	/* Start: First-Level */
	header #hNavigation > ul { display: flex; justify-content: flex-end; align-items: center; width: 100%; padding: 54px 0 0 473px; }
	header #hNavigation > ul > li { position: relative; display: inline-flex; padding: 0 0 6px 0; margin: 0 41px 0 0; }
	header #hNavigation > ul > li:last-of-type { margin: 0; }
	header #hNavigation > ul > li > a {
		display: block;
		font-family: "Heebo", sans-serif;
		font-weight: 400;
		font-size: 21px;
		line-height: 31px;
		color: #495057;
		text-align: left;
		white-space: nowrap;
		transition: all .3s ease-in-out;
	}
	header #hNavigation > ul > li.current > a { color: #335091; }
	header #hNavigation > ul > li:hover > a { color: #335091; }
	/* End: First-Level */

	/* Start: Second-Level */
	header #hNavigation > ul > li > ul { position: absolute; top: 37px; left: 0; display: none; min-width: 100%; background: #FFFFFF; }
	header #hNavigation > ul > li:hover > ul { display: flex; flex-direction: column; align-items: flex-start; }
	header #hNavigation > ul > li > ul > li { display: block; width: 100%; border-bottom: 1px solid #495057; }
	header #hNavigation > ul > li > ul > li:last-of-type { border-bottom: none; }
	header #hNavigation > ul > li > ul > li > a {
		display: block;
		font-family: "Heebo", sans-serif;
		font-weight: 400;
		font-size: 21px;
		line-height: 31px;
		color: #495057;
		text-align: left;
		white-space: nowrap;
		padding: 9px 20px;
		transition: all .3s ease-in-out;
	}
	header #hNavigation > ul > li > ul > li.active > a { color: #335091; }
	header #hNavigation > ul > li > ul > li > a:hover { color: #335091; }
	/* 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: 120px; }
	body.scrolled header { height: 120px; }
	body.scrolled header .cms_container_wide { height: 120px; }
	body.scrolled #logo_container { top: 28.5px; }
	body.scrolled header #hNavigation > ul { padding: 30px 0 0 473px; }
	/* End: Scrolled */
}

@media screen and (min-width: 1201px) and (max-width: 1814px) { header #hNavigation > ul > li:last-of-type > ul { right: 0; left: auto; } }

/***-------------------------------------------*** Tablet ***-------------------------------------------***/
@media screen and (min-width: 960px) and (max-width: 1200px) {
	/* Start: Allgemein */
	header #hNavigation { position: fixed; z-index: 2; top: 143px; right: -100%; bottom: 0; overflow-y: auto; transition: all 0.3s; }
	body.navi header #hNavigation { right: 30px; }
	header #hHamburger { position: absolute; top: 98px; right: 30px; width: 52px; height: 30px; }
	/* End: Allgemein */

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

	/* Start: Logo */
	body #logo_container { top: 40px; width: 443px; height: 63px; }
	/* End: Logo */

	/* Start: First-Level */
	header #hNavigation > ul { display: flex; flex-direction: column; align-items: flex-start; background: #FFFFFF; padding: 15px; border: 2px solid #335091; }
	header #hNavigation > ul > li { position: relative; display: block; width: 100%; margin: 0 0 30px 0; }
	header #hNavigation > ul > li:last-of-type { margin: 0; }
	header #hNavigation > ul > li > a {
		cursor: pointer;
		display: block;
		font-family: "Heebo", sans-serif;
		font-weight: 600;
		font-size: 21px;
		line-height: 31px;
		color: #335091;
		text-align: left;
		transition: all .3s ease-in-out;
	}
	header #hNavigation > ul > li.current > a { color: #335091; }
	header #hNavigation > ul > li:hover > a { color: #335091; }
	/* End: First-Level */

	/* Start: Second-Level */
	header #hNavigation > ul > li > ul { display: flex; flex-direction: column; align-items: flex-start; background: #FFFFFF; margin: 14px 0 0 0; }
	header #hNavigation > ul > li > ul > li { display: block; width: 100%; border-bottom: 1px solid #495057; }
	header #hNavigation > ul > li > ul > li:first-of-type { border-top: 1px solid #495057; }
	header #hNavigation > ul > li > ul > li > a {
		cursor: pointer;
		display: block;
		font-family: "Heebo", sans-serif;
		font-weight: 400;
		font-size: 21px;
		line-height: 31px;
		color: #495057;
		text-align: left;
		padding: 7px 14px;
		transition: all .3s ease-in-out;
	}
	header #hNavigation > ul > li > ul > li.active > a { color: #335091; }
	header #hNavigation > ul > li > ul > li > a:hover { color: #335091; }
	/* End: Second-Level */

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

	body.scrolled { padding-top: 90px; }
	body.scrolled header { height: 90px; }
	body.scrolled header .cms_container_wide { height: 90px; }
	body.scrolled #logo_container { top: 15px; width: 422px; height: 60px; }
	body.scrolled header #hService { transform: translateY(-37px); }
	body.scrolled header #hNavigation { top: 90px; }
	body.scrolled header #hHamburger { top: 30px; }
	/* End: Scrolled */
}

/***-------------------------------------------*** Smartphone ***-------------------------------------------***/
@media screen and (max-width: 959px) {
	/* Start: Allgemein */
	header #hNavigation { position: fixed; z-index: 2; top: 120px; right: -100vW; bottom: 0; display: flex; flex-direction: column; width: 100vW; background: #FFFFFF; overflow-y: auto; transition: all 0.3s; }
	body.navi header #hNavigation { right: 0; }
	header #hHamburger { position: absolute; top: 45px; right: 30px; width: 52px; height: 30px; }
	/* End: Allgemein */

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

	/* Start: Logo */
	body #logo_container { top: 30px; width: 422px; height: 60px; }
	/* End: Logo */

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

	/* Start: First-Level */
	header #hNavigation > ul { display: flex; flex-direction: column; align-items: flex-start; padding: 30px; }
	header #hNavigation > ul > li { position: relative; display: block; width: 100%; margin: 0 0 30px 0; }
	header #hNavigation > ul > li:last-of-type { margin: 0; }
	header #hNavigation > ul > li > a {
		cursor: pointer;
		display: block;
		font-family: "Heebo", sans-serif;
		font-weight: 600;
		font-size: 21px;
		line-height: 31px;
		color: #335091;
		text-align: left;
		transition: all .3s ease-in-out;
	}
	header #hNavigation > ul > li.current > a { color: #335091; }
	header #hNavigation > ul > li:hover > a { color: #335091; }
	/* End: First-Level */

	/* Start: Second-Level */
	header #hNavigation > ul > li > ul { display: flex; flex-direction: column; align-items: flex-start; background: #FFFFFF; margin: 14px 0 0 0; }
	header #hNavigation > ul > li > ul > li { display: block; width: 100%; border-bottom: 1px solid #495057; }
	header #hNavigation > ul > li > ul > li:first-of-type { border-top: 1px solid #495057; }
	header #hNavigation > ul > li > ul > li > a {
		cursor: pointer;
		display: block;
		font-family: "Heebo", sans-serif;
		font-weight: 400;
		font-size: 21px;
		line-height: 31px;
		color: #495057;
		text-align: left;
		padding: 7px 14px;
		transition: all .3s ease-in-out;
	}
	header #hNavigation > ul > li > ul > li.active > a { color: #335091; }
	header #hNavigation > ul > li > ul > li > a:hover { color: #335091; }
	/* End: Second-Level */

	/* Start: Service Navigation Mobile */
	header #hNavigation > ul#hServiceMobile { display: flex; width: 100%; background: #E8E7E8; padding: 30px 30px 42px 30px; margin: auto 0 0 0; }
	header #hNavigation > ul#hServiceMobile > li { margin: 0 0 22px 0; }
	header #hNavigation > ul#hServiceMobile > li:last-of-type { margin: 0; }
	header #hNavigation > ul#hServiceMobile > li > a { font-weight: 400; color: #000000; }
	header #hNavigation > ul#hServiceMobile > li.current > a { color: #335091; }
	header #hNavigation > ul#hServiceMobile > li:hover > a { color: #335091; }
	/* End: Service Navigation Mobile */

	/* 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: 90px; }
	body.scrolled header { height: 90px; }
	body.scrolled header .cms_container_wide { height: 90px; }
	body.scrolled #logo_container { top: 15px; width: 422px; height: 60px; }
	body.scrolled header #hNavigation { top: 90px; }
	body.scrolled header #hHamburger { top: 30px; }
	/* End: Scrolled */
}

@media screen and (max-width: 600px) {
	body { padding-top: 92px; }
	header { height: 92px; }
	header .cms_container_wide { height: 92px; }
	body #logo_container { top: 28px; width: 257px; height: 37px; }
	header #hNavigation { top: 92px; }
	header #hNavigation > ul { padding: 14px 30px 30px 30px; }
	header #hHamburger { top: 31px; }

	body.scrolled { padding-top: 92px; }
	body.scrolled header { height: 92px; }
	body.scrolled header .cms_container_wide { height: 92px; }
	body.scrolled #logo_container { top: 28px; width: 257px; height: 37px; }
	body.scrolled header #hNavigation { top: 92px; }
	body.scrolled header #hHamburger { top: 31px; }
}

@media screen and (max-width: 385px) {
	body { padding-top: 127px; }
	header { height: 127px; }
	header .cms_container_wide { height: 127px; }
	body #logo_container { top: 15px; left: 50%; transform: translateX(-50%); }
	header #hNavigation { top: 127px; }
	header #hHamburger { top: 82px; right: auto; left: 50%; transform: translateX(-50%); }

	body.scrolled { padding-top: 90px; }
	body.scrolled header { height: 90px; }
	body.scrolled header .cms_container_wide { height: 90px; }
	body.scrolled #logo_container { top: -37px; }
	body.scrolled header #hNavigation { top: 90px; }
	body.scrolled header #hHamburger { top: 30px; }
}