/* ############################################################
	MOBILE-NAVIGATION
############################################################ */

/* Navigation Aktiv */
html.open,
body.open {
	overflow: hidden;
}


/* Hamburger */
.nav-button-box {
	z-index: 11;
	position: absolute;
	/*position: fixed;*/
	display: inline-block;
	top: 0;
	left: 0;
	width: 90px;
	height: 81px;
}
body[class^="cms-"] .nav-button-box {
	z-index: 211;
	top: 51px;
}
	.nav-button {
		position: absolute;
		display: inline-block;
		top: 50px;
		left: 25px;
		width: 64px;
		height: 31px;
	}
	.nav-button:hover {
		cursor: pointer;
	}
		.nav-button span {
			display: block;
			position: absolute;
			height: 1px;
			background-color: var(--main-color-2);
			-o-transition: all 0.3s ease;
			-ms-transition: all 0.3s ease;
			-moz-transition: all 0.3s ease;
			-webkit-transition: all 0.3s ease;
			transition: all 0.3s ease;
		}
		.nav-button span:nth-child(1) {
			top: 0;
			left: 0;
			width: 64px;
		}
		.nav-button span:nth-child(2) {
			top: calc(50% - 0.5px);
			left: 0;
			width: 40px;
		}
		.nav-button span:nth-child(3) {
			bottom: 0;
			left: 0;
			width: 64px;
		}

			/* Schliessen */
			.nav-button.open span {
				background-color: var(--main-color-white);
			}
			.nav-button.open span:nth-child(1) {
				top: 50%;
				left: -4px;
				width: 58px;
				-o-transform: rotate(31.79891deg);
				-ms-transform: rotate(31.79891deg);
				-moz-transform: rotate(31.79891deg);
				-webkit-transform: rotate(31.79891deg);
				transform: rotate(31.79891deg);
			}
			.nav-button.open span:nth-child(3) {
				bottom: 50%;
				left: -4px;
				width: 58px;
				-o-transform: rotate(-31.79891deg);
				-ms-transform: rotate(-31.79891deg);
				-moz-transform: rotate(-31.79891deg);
				-webkit-transform: rotate(-31.79891deg);
				transform: rotate(-31.79891deg);
			}
			.nav-button.open span:nth-child(2) {
				width: 0;
				opacity: 0;
			}
@media (min-width: 1020px) {
	.nav-button-box {
		position: fixed;
		width: 105px;
		height: 250px;
	}
		.nav-button {
			top: 141px;
			left: 27px;
			width: 50px;
			height: 25px;
		}
			.nav-button span {
				background-color: var(--main-color-white);
			}
			.nav-button:hover span,
			.nav-button.open:hover span {
				background-color: var(--main-color-1);
			}
			.nav-button span:nth-child(1),
			.nav-button span:nth-child(3) {
				width: 50px;
			}
			.nav-button span:nth-child(2) {
				width: 30px;
			}
			.nav-button:hover span:nth-child(2) {
				width: 62px;
			}

			/* Schliessen */
			.nav-button.open span:nth-child(1),
			.nav-button.open span:nth-child(3) {
				left: 0;
				width: 47px;
			}
}
@media (min-width: 1440px) {
	.nav-button-box {
		width: 135px;
		height: 250px;
	}
		.nav-button {
			left: 35px;
			width: 64px;
			height: 31px;
		}
			.nav-button span:nth-child(1),
			.nav-button span:nth-child(3) {
				width: 64px;
			}
			.nav-button span:nth-child(2) {
				width: 40px;
			}
			.nav-button:hover span:nth-child(2) {
				width: 80px;
			}

			/* Schliessen */
			.nav-button.open span:nth-child(1),
			.nav-button.open span:nth-child(3) {
				width: 58px;
			}
}


/* Text */
.nav-text {
	position: absolute;
	display: inline-block;
	top: 214px;
	left: 32px;
	font-size: 1rem; /* 16px */
	line-height: 1.625rem; /* 26px */
	color: var(--main-color-white);
}
@media (min-width: 1440px) {
	.nav-text {
		top: 220px;
		left: 41px;
	}
}