/* ############################################################
	PANELS
############################################################ */

/* Panels */
.bild__panel, .top__panel, .middle__panel, .bottom__panel {
	position: relative;
	width: 100%;
}


/* Abstände */
.abstand-toppanel {
	padding-top: 80px;
	padding-bottom: 90px;
}
.abstand-middlepanel,
.abstand-bottompanel {
	padding-top: 60px;
	padding-bottom: 60px;
}
@media (min-width: 1020px) {
	.abstand-toppanel {
		padding-top: 120px;
		padding-bottom: 180px;
	}
	.abstand-middlepanel,
	.abstand-bottompanel {
		padding-top: 90px;
		padding-bottom: 90px;
	}
}


/* ############################################################
	ANKERNAVIGATION
############################################################ */

/* Navigationsbox */
.navankerbox-filter-box {
	width: calc(100% + 50px);
	height: 40px;
	margin-top: -15px;
	margin-left: -25px;
	padding-left: 25px;
	padding-right: 25px;
	background-color: var(--main-color-white);
}
@media (min-width: 760px) {
	.navankerbox-filter-box {
		width: calc(100% + 80px);
		margin-top: -40px;
		margin-left: -40px;
		padding-left: 40px;
		padding-right: 40px;
	}
}
@media (min-width: 1020px) {
	.navankerbox-filter-box {
		width: calc(100% + 160px);
		height: 47px;
		margin-top: -47px;
		margin-left: -80px;
		padding-left: 80px;
		padding-right: 80px;
	}
}
@media (min-width: 1440px) {
	.navankerbox-filter-box {
		width: calc(100% + 320px);
		margin-left: -160px;
	}
}


/* Mobile */
.nav-anker-mobile {
	opacity: 0;
	animation: come-in-show 1s ease forwards;
	animation-delay: 1.2s;
}
	.nav-anker-mobile select {
		position: relative;
		display: block;
		cursor: pointer;
		width: 100%;
		height: 40px;
		margin: 0;
		padding: 0 25px 0 0;
		border: none;
		border-radius: 0;
		background-color: transparent;
		background-image: url("../../fctriesenberg/Images/Elemente/Icon_Arrow_Down_13x8.svg");
		background-position: right center;
		background-repeat: no-repeat;
		background-size: 13px 8px;
		font-size: 0.8125rem; /* 13px */
		line-height: 1.7;
		letter-spacing: 0.13px;
		color: var(--main-color-1);
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		-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-anker-mobile select:focus,
	.nav-anker-mobile select:active {
		outline: none;
	}
	.nav-anker-mobile select option {
		color: var(--main-color-1);
	}
	.nav-anker-mobile select::-ms-expand {
		display: none;
	}
	.nav-anker-mobile select:focus::-ms-value {
		background-color: transparent;
	}
@media (min-width: 1020px) {
	/* Desktop */
	.nav-anker-desktop {
		display: flex;
		justify-content: flex-start;
		align-items: top;
		height: 47px;
		font-size: 0.875rem; /* 14px */
		line-height: 1.7;
		letter-spacing: 0.14px;
	}
		.nav-anker-item {
			display: inline-block;
			position: relative;
			transform: translateX(50px);
			opacity: 0;
			animation: come-in-horizontal 1s ease forwards;
			animation-delay: 1.2s;
			text-decoration: none;
			color: var(--main-color-1);
		}
		.nav-anker-item:hover {
			text-decoration: none;
			color: var(--main-color-1);
		}
		.nav-anker-item:not(:first-child) {
			margin-left: 40px;
		}
		.nav-anker-item:nth-child(2) {
			animation-delay: 1.3s;
		}
		.nav-anker-item:nth-child(3) {
			animation-delay: 1.4s;
		}
		.nav-anker-item:nth-child(4) {
			animation-delay: 1.5s;
		}
		.nav-anker-item:nth-child(5) {
			animation-delay: 1.6s;
		}
		.nav-anker-item:nth-child(6) {
			animation-delay: 1.7s;
		}
		.nav-anker-item:nth-child(7) {
			animation-delay: 1.8s;
		}
		.nav-anker-item:nth-child(9) {
			animation-delay: 1.9s;
		}
		.nav-anker-item:nth-child(10) {
			animation-delay: 2.0s;
		}
		
		/* Link-Animation */
		.nav-anker-item {
			display: inline-block;
			position: relative;
		}
		.nav-anker-item:after {
			content: "";
			position: absolute;
			left: 0;
			bottom: 0;
			width: 0;
			height: 0;
			border-bottom: 2px solid var(--main-color-1);
			-o-transition: width 0.3s ease-in-out;
			-ms-transition: width 0.3s ease-in-out;
			-moz-transition: width 0.3s ease-in-out;
			-webkit-transition: width 0.3s ease-in-out;
			transition: width 0.3s ease-in-out;
		}
		.nav-anker-item:hover:after,
		.nav-anker-item.active:after {
			width: 100%;
			-o-transition: width 0.3s ease-in-out;
			-ms-transition: width 0.3s ease-in-out;
			-moz-transition: width 0.3s ease-in-out;
			-webkit-transition: width 0.3s ease-in-out;
			transition: width 0.3s ease-in-out;
		}
}