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

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

/***-------------------------------------------*** Hamburger ***-------------------------------------------***/
#nav-icon4 {
	cursor: pointer;
	width: 40px;
	height: 30px;
	position: relative;
	display: inline-block;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: .5s ease-in-out;
	-moz-transition: .5s ease-in-out;
	-o-transition: .5s ease-in-out;
	transition: .5s ease-in-out;
}
#nav-icon4 span {
	display: block;
	position: absolute;
	height: 5px;
	width: 100%;
	background: #FFFFFF;
	opacity: 1;
	left: 0;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: .25s ease-in-out;
	-moz-transition: .25s ease-in-out;
	-o-transition: .25s ease-in-out;
	transition: .25s ease-in-out;
}
#nav-icon4 span:nth-child(1),
#nav-icon4 span:nth-child(2),
#nav-icon4 span:nth-child(3) {
	-webkit-transform-origin: left center;
	-moz-transform-origin: left center;
	-o-transform-origin: left center;
	transform-origin: left center;
}
#nav-icon4 span:nth-child(1) { top: 0px; }
#nav-icon4 span:nth-child(2) { top: 12px; }
#nav-icon4 span:nth-child(3) { top: 25px; }
body.navi #nav-icon4 span:nth-child(1) {
	top: 0;
	left: 5px;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}
body.navi #nav-icon4 span:nth-child(2) { width: 0%; opacity: 0; }
body.navi #nav-icon4 span:nth-child(3) {
	top: 29px;
	left: 5px;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

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

/***-------------------------------------------*** Desktop ***-------------------------------------------***/
@media screen and (min-width: 1201px) {
	/* Start: Allgemein */
	header #hNavigation > ul { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; width: 100%; padding: 41px 0 0 352px; }
	header #hHamburger { display: none; }
	/* End: Allgemein */

	/* Start: First-Level */
	header #hNavigation > ul > li { position: relative; margin: 0 0 0 30px; }
	header #hNavigation > ul > li > a {
		position: relative;
		display: block;
		font-family: 'Raleway', sans-serif;
		font-weight: 400;
		font-size: 25px;
		line-height: 30px;
		color: #000000;
		text-align: left;
		white-space: nowrap;
		padding: 26px 0 13px 0;
	}
	header #hNavigation > ul > li:hover > a { color: #88704D; }
	header #hNavigation > ul > li.current > a { color: #88704D; }
	header #hNavigation > ul > li > a:before {
		content: "";
		position: absolute;
		z-index: 12;
		top: 0;
		left: 50%;
		-webkit-transform: translateX(-50%);
		-moz-transform: translateX(-50%);
		-o-transform: translateX(-50%);
		transform: translateX(-50%);
		width: 31px;
		height: 22px;
		background: url("/pages/img/schere.svg");
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
		visibility: hidden;
		opacity: 0;
		-webkit-transition: all .3s ease-in-out;
		-moz-transition: all .3s ease-in-out;
		-o-transition: all .3s ease-in-out;
		-ms-transition: all .3s ease-in-out;
		transition: all .3s ease-in-out;
	}
	header #hNavigation > ul > li:hover > a:before { visibility: visible; opacity: 1; }
	header #hNavigation > ul > li.current > a:before { visibility: visible; opacity: 1; }
	/* End: First-Level */

	/* Start: Second-Level */
	header #hNavigation > ul > li > ul {
		display: none;
		flex-wrap: wrap;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		position: absolute;
		top: 69px;
		left: 0;
		min-width: 100%;
		padding: 12px 15px 14px 15px;
		background: #88704D;
		border: 1px solid #88704D;
		border-radius: 0px 0px 25px 25px;
	}
	header #hNavigation > ul > li:hover > ul { display: flex; }
	header #hNavigation > ul > li > ul > li > a {
		position: relative;
		display: table;
		font-family: 'Raleway', sans-serif;
		font-weight: 400;
		font-size: 25px;
		line-height: 30px;
		color: #FFFFFF;
		text-align: left;
		white-space: nowrap;
		padding: 0 43px 0 0;
		margin: 3px 0;
	}
	header #hNavigation > ul > li > ul > li > a:before {
		content: "";
		position: absolute;
		z-index: 12;
		top: 4px;
		right: 0;
		width: 31px;
		height: 22px;
		background: url("/pages/img/schere_weiss.svg");
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
		visibility: hidden;
		opacity: 0;
		-webkit-transition: all .3s ease-in-out;
		-moz-transition: all .3s ease-in-out;
		-o-transition: all .3s ease-in-out;
		-ms-transition: all .3s ease-in-out;
		transition: all .3s ease-in-out;
	}
	header #hNavigation > ul > li > ul > li > a:hover:before { visibility: visible; opacity: 1; }
	header #hNavigation > ul > li > ul > li.active > a:before { visibility: visible; opacity: 1; }
	/* End: Second-Level */

	/* Start: Header Scrolled */
	body,
	header,
	header .cms_container_wide,
	header .cms_container,
	body #logo_container,
	header #hNavigation > ul {
		-webkit-transition: all .3s ease-in-out;
		-moz-transition: all .3s ease-in-out;
		-o-transition: all .3s ease-in-out;
		-ms-transition: all .3s ease-in-out;
		transition: all .3s ease-in-out;
	}
	body.scrolled { padding-top: 84px; }
	body.scrolled header { height: 84px; }
	body.scrolled header .cms_container_wide { height: 84px; }
	body.scrolled header .cms_container { height: 84px; }
	body.scrolled #logo_container { top: 7px; bottom: 7px; width: 275px; height: 70px; }
	body.scrolled header #hNavigation > ul { padding: 15px 0 0 352px; }
	/* End: Header Scrolled */
}

/***-------------------------------------------*** Tablet ***-------------------------------------------***/
@media screen and (min-width: 960px) and (max-width: 1200px) {
	/* Start: Allgemein */
	header #hNavigation	{ position: fixed; top: 142px; right: -100%; bottom: 0; overflow-y: auto; transition: all 0.3s; }
	body.navi header #hNavigation { right: 0; }
	header #hHamburger { position: absolute; right: 30px; bottom: 42px; width: 70px; height: 60px; padding: 15px; background: #88704D; }
	/* End: Allgemein */

	/* Start: First-Level */
	header #hNavigation > ul {
		display: flex;
		flex-wrap: wrap;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		min-width: 397px;
		width: 100%;
		padding: 12px 15px 14px 15px;
		background: #88704D;
		border: 1px solid #88704D;
		border-radius: 0px 0px 25px 25px;
	}
	header #hNavigation > ul > li { position: relative; display: block; width: 100%; padding: 0 50px 0 0; }
	header #hNavigation > ul > li > a {
		position: relative;
		display: table;
		font-family: 'Raleway', sans-serif;
		font-weight: 400;
		font-size: 25px;
		line-height: 30px;
		color: #FFFFFF;
		text-align: left;
		white-space: nowrap;
		padding: 0 43px 0 0;
		margin: 3px 0;
	}
	header #hNavigation > ul > li > a:before {
		content: "";
		position: absolute;
		z-index: 12;
		top: 4px;
		right: 0;
		width: 31px;
		height: 22px;
		background: url("/pages/img/schere_weiss.svg");
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
		visibility: hidden;
		opacity: 0;
		-webkit-transition: all .3s ease-in-out;
		-moz-transition: all .3s ease-in-out;
		-o-transition: all .3s ease-in-out;
		-ms-transition: all .3s ease-in-out;
		transition: all .3s ease-in-out;
	}
	header #hNavigation > ul > li > a:hover:before { visibility: visible; opacity: 1; }
	header #hNavigation > ul > li.active > a:before { visibility: visible; opacity: 1; }
	header #hNavigation > ul > li > div.toggler { display: block; position: absolute; top: 0; right: 15px; }
	header #hNavigation > ul > li > div.toggler:after {
		cursor: pointer;
		display: block;
		content: "\f078";
		border-radius: 50%;
		font-family: 'Font Awesome 5 Free';
		font-weight: 900;
		font-size: 22px;
		line-height: 36px;
		text-align: center;
		color: #FFFFFF;
	}
	header #hNavigation > ul > li.open > div.toggler { content: "\f077"; }
	/* End: First-Level */

	/* Start: Second-Level */
	header #hNavigation > ul > li > ul {
		display: none;
		flex-wrap: wrap;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		width: 100%;
		padding: 0 15px;
	}
	header #hNavigation > ul > li.current.open > ul { display: flex; }
	header #hNavigation > ul > li.open > ul { display: flex !important; }
	header #hNavigation > ul > li > ul > li > a {
		position: relative;
		display: table;
		font-family: 'Raleway', sans-serif;
		font-weight: 400;
		font-size: 25px;
		line-height: 30px;
		color: #FFFFFF;
		text-align: left;
		white-space: nowrap;
		padding: 0 43px 0 0;
		margin: 3px 0;
	}
	header #hNavigation > ul > li > ul > li:last-of-type > a { margin: 3px 0 0 0; }
	header #hNavigation > ul > li > ul > li > a:before {
		content: "";
		position: absolute;
		z-index: 12;
		top: 4px;
		right: 0;
		width: 31px;
		height: 22px;
		background: url("/pages/img/schere_weiss.svg");
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
		visibility: hidden;
		opacity: 0;
		-webkit-transition: all .3s ease-in-out;
		-moz-transition: all .3s ease-in-out;
		-o-transition: all .3s ease-in-out;
		-ms-transition: all .3s ease-in-out;
		transition: all .3s ease-in-out;
	}
	header #hNavigation > ul > li > ul > li > a:hover:before { visibility: visible; opacity: 1; }
	header #hNavigation > ul > li > ul > li.active > a:before { visibility: visible; opacity: 1; }
	/* End: Second-Level */

	/* Start: Header */
	body { padding-top: 142px; }
	header { height: 142px; }
	header .cms_container_wide { height: 142px; }
	header .cms_container { height: 142px; }
	body #logo_container { top: 30px; bottom: 30px; }
	body,
	header,
	header .cms_container_wide,
	header .cms_container,
	body #logo_container,
	header #hNavigation,
	header #hHamburger {
		-webkit-transition: all .3s ease-in-out;
		-moz-transition: all .3s ease-in-out;
		-o-transition: all .3s ease-in-out;
		-ms-transition: all .3s ease-in-out;
		transition: all .3s ease-in-out;
	}
	/* End: Header */

	/* Start: Header Scrolled */	
	body.scrolled { padding-top: 84px; }
	body.scrolled header { height: 84px; }
	body.scrolled header .cms_container_wide { height: 84px; }
	body.scrolled header .cms_container { height: 84px; }
	body.scrolled #logo_container { top: 7px; bottom: 7px; width: 275px; height: 70px; }
	body.scrolled header #hHamburger { bottom: 12px; }
	body.scrolled header #hNavigation { top: 84px; }
	/* End: Header Scrolled */
}

/***-------------------------------------------*** Smartphone ***-------------------------------------------***/
@media screen and (max-width: 959px) {
	/* Start: Allgemein */
	header #hNavigation	{ position: fixed; top: 142px; right: -100vW; bottom: 0; width: 100vW; overflow-y: auto; transition: all 0.3s; background: #88704D; }
	body.navi header #hNavigation { right: 0; }
	header #hHamburger { position: absolute; right: 30px; bottom: 42px; width: 70px; height: 60px; padding: 15px; background: #88704D; }
	/* End: Allgemein */

	/* Start: First-Level */
	header #hNavigation > ul {
		display: flex;
		flex-wrap: wrap;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		width: 100%;
		padding: 12px 15px 14px 15px;
	}
	header #hNavigation > ul > li { position: relative; display: block; width: 100%; padding: 0 50px 0 0; }
	header #hNavigation > ul > li > a {
		position: relative;
		display: table;
		font-family: 'Raleway', sans-serif;
		font-weight: 400;
		font-size: 25px;
		line-height: 30px;
		color: #FFFFFF;
		text-align: left;
		white-space: nowrap;
		padding: 0 43px 0 0;
		margin: 3px 0;
	}
	header #hNavigation > ul > li > a:before {
		content: "";
		position: absolute;
		z-index: 12;
		top: 4px;
		right: 0;
		width: 31px;
		height: 22px;
		background: url("/pages/img/schere_weiss.svg");
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
		visibility: hidden;
		opacity: 0;
		-webkit-transition: all .3s ease-in-out;
		-moz-transition: all .3s ease-in-out;
		-o-transition: all .3s ease-in-out;
		-ms-transition: all .3s ease-in-out;
		transition: all .3s ease-in-out;
	}
	header #hNavigation > ul > li > a:hover:before { visibility: visible; opacity: 1; }
	header #hNavigation > ul > li.active > a:before { visibility: visible; opacity: 1; }
	header #hNavigation > ul > li > div.toggler { display: block; position: absolute; top: 0; right: 15px; }
	header #hNavigation > ul > li > div.toggler:after {
		cursor: pointer;
		display: block;
		content: "\f078";
		border-radius: 50%;
		font-family: 'Font Awesome 5 Free';
		font-weight: 900;
		font-size: 22px;
		line-height: 36px;
		text-align: center;
		color: #FFFFFF;
	}
	header #hNavigation > ul > li.open > div.toggler { content: "\f077"; }
	/* End: First-Level */

	/* Start: Second-Level */
	header #hNavigation > ul > li > ul {
		display: none;
		flex-wrap: wrap;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		width: 100%;
		padding: 0 15px;
	}
	header #hNavigation > ul > li.current.open > ul { display: flex; }
	header #hNavigation > ul > li.open > ul { display: flex !important; }
	header #hNavigation > ul > li > ul > li { display: block; width: 100%; }
	header #hNavigation > ul > li > ul > li > a {
		position: relative;
		display: table;
		font-family: 'Raleway', sans-serif;
		font-weight: 400;
		font-size: 25px;
		line-height: 30px;
		color: #FFFFFF;
		text-align: left;
		white-space: nowrap;
		padding: 0 43px 0 0;
		margin: 3px 0;
	}
	header #hNavigation > ul > li > ul > li:last-of-type > a { margin: 3px 0 0 0; }
	header #hNavigation > ul > li > ul > li > a:before {
		content: "";
		position: absolute;
		z-index: 12;
		top: 4px;
		right: 0;
		width: 31px;
		height: 22px;
		background: url("/pages/img/schere_weiss.svg");
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
		visibility: hidden;
		opacity: 0;
		-webkit-transition: all .3s ease-in-out;
		-moz-transition: all .3s ease-in-out;
		-o-transition: all .3s ease-in-out;
		-ms-transition: all .3s ease-in-out;
		transition: all .3s ease-in-out;
	}
	header #hNavigation > ul > li > ul > li > a:hover:before { visibility: visible; opacity: 1; }
	header #hNavigation > ul > li > ul > li.active > a:before { visibility: visible; opacity: 1; }
	/* End: Second-Level */

	/* Start: Header */
	body { padding-top: 142px; }
	header { height: 142px; }
	header .cms_container_wide { height: 142px; }
	header .cms_container { height: 142px; }
	body #logo_container { top: 30px; bottom: 30px; }
	body,
	header,
	header .cms_container_wide,
	header .cms_container,
	body #logo_container,
	header #hNavigation,
	header #hHamburger {
		-webkit-transition: all .3s ease-in-out;
		-moz-transition: all .3s ease-in-out;
		-o-transition: all .3s ease-in-out;
		-ms-transition: all .3s ease-in-out;
		transition: all .3s ease-in-out;
	}
	/* End: Header */

	/* Start: Header Scrolled */	
	body.scrolled { padding-top: 84px; }
	body.scrolled header { height: 84px; }
	body.scrolled header .cms_container_wide { height: 84px; }
	body.scrolled header .cms_container { height: 84px; }
	body.scrolled #logo_container { top: 7px; bottom: 7px; width: 275px; height: 70px; }
	body.scrolled header #hHamburger { bottom: 12px; }
	body.scrolled header #hNavigation { top: 84px; }
	/* End: Header Scrolled */
}

@media screen and (max-width: 550px) {
	body { padding-top: 171px; }
	header { height: 171px; }
	header .cms_container_wide { height: 171px; }
	header .cms_container { height: 171px; }
	body #logo_container {
		top: 15px;
		bottom: auto;
		left: 50%;
		-webkit-transform: translateX(-50%);
		-moz-transform: translateX(-50%);
		-o-transform: translateX(-50%);
		transform: translateX(-50%);
		width: 260px;
		height: 66px;
	}
	header #hNavigation	{ top: 171px; }
	header #hHamburger {
		top: 96px;
		right: auto;
		bottom: auto;
		left: 50%;
		-webkit-transform: translateX(-50%);
		-moz-transform: translateX(-50%);
		-o-transform: translateX(-50%);
		transform: translateX(-50%);
	}
	body.scrolled { padding-top: 90px; }
	body.scrolled header { height: 90px; }
	body.scrolled header .cms_container_wide { height: 90px; }
	body.scrolled header .cms_container { height: 90px; }
	body.scrolled #logo_container { top: -66px; }
	body.scrolled header #hNavigation	{ top: 90px; }
	body.scrolled header #hHamburger { top: 15px; }
}