/********** Soundwatch 2024 – Navigation **********/

#titel,
#navigation_schalter,
#navigation {
	position: fixed;
	display: block;
	margin: 0 0 0 0;
	user-select: none;
	/*
	mix-blend-mode: difference;
	*/
}
#titel,
#titel *,
#navigation,
#navigation *,
#navigation_schalter {
	/*
	color: rgba(0, 0, 0, 1);
	*/
	color: #FFF;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
#titel {
	z-index: 11;
	text-align: left!important;
}
#titel a {
	font-weight: 700;
	letter-spacing: 0.01em;
}
#titel span {
	font-weight: 400;
	/*
	opacity: 0.85;
	*/
}
#navigation {
	top: 0;
	z-index: 10;
	width: 100%;
}
#navigation.scroll {
	height: 100%!important;
	overflow-y: scroll!important;
}
#titel a,
#navigation a {
	position: relative;
	text-decoration: none;
}
#navigation a.gestrichen:before {
	content: "";
	display: block;
	position: absolute;
	left: -5px;
	width: calc(100% + 10px);
	background-color: #FFF;
	opacity: 0.8;
}


/***** Hauptnavigation *****/
#navigation ul.navigation_main {
	display: block;
	z-index: 11;
	margin: 0 0 0 0;
}
#navigation ul.navigation_main li {
	display: inline-block;
	position: relative;
}
#navigation ul.navigation_main li:hover {
	/*
	background-color: #E50051;
	*/
}



/***** Navigation Archiv *****/
#navigation li.archiv {
	overflow: visible!important;
	cursor: pointer;
}
#navigation li.archiv div {
	display: inline-block;
}
#navigation ul.navigation_archiv {
	display: none;
}
#navigation ul.navigation_archiv li {
	display: block;
	white-space: nowrap;
}



/***** Rest *****/
#navigation_abdeckung {
	display: none;
}
#navigation_kante {
	position: fixed;
	z-index: 9;
	top: -2px;
	width: 100%;
	/*
	background-color: rgba(0, 0, 0, 0.35);
	background-color: #EE0000;
	*/
	background-image: linear-gradient(to bottom, var(--farbe_1), transparent);
	mix-blend-mode: multiply;
	pointer-events: none;
}



/********** Navigation mobil **********/
@media screen and (max-width: 910px) {
	#titel,
	#navigation_schalter {
		top: 10px;
	}
	#titel,
	#titel *,
	#navigation_schalter {
		font-size: 20px;
		line-height: 20px;
	}
	#navigation,
	#navigation * {
		font-size: 26px;
		line-height: 26px;
	}
	#navigation {
		height: 0;
		overflow-y: hidden;
		transition: height 0.35s;
	}
	#navigation ul.navigation_main {
		position: absolute;
		z-index: 11;
		width: 100%;
		padding: 65px 0 45px 0;
	}
	#navigation ul.navigation_main.unten {
		bottom: 0;
	}
	#navigation ul.navigation_main.oben {
		top: 0!important;
	}
	#navigation ul.navigation_main li {
		display: block;
		width: 100%;
		text-align: center!important;
		margin-left: 0;
	}
	#navigation ul.navigation_main li + li {
		margin-top: 20px;
	}
	#navigation li.archiv div,
	#navigation a {
		display: inline-block;
		font-weight: 500;
		letter-spacing: 0.01em;
		color: rgba(255, 255, 255, 1);
		padding: 0 0 5px 0;
	}
	#navigation ul.navigation_archiv {
		position: relative;
		width: 100%;
		padding: 5px 0 0 0;
		margin: 0 0 -5px 0;
	}
	#navigation ul.navigation_archiv li {
		width: 100%;
		text-align: center!important;
		margin-left: 0;
	}
	#navigation ul.navigation_archiv li + li {
		margin-top: 6px;
	}
	#navigation ul.navigation_archiv li a {
		font-weight: 400!important;
		font-size: 18px!important;
		line-height: 18px!important;
	}
	#navigation a.gestrichen:before {
		top: 14px;
		height: 2px;
	}
	ul.navigation_archiv li:hover div,
	#navigation a:hover,
	#navigation a.aktiv {
		border-bottom: 2px solid rgba(255, 255, 255, 1);
		padding: 0 0 3px 0!important;
	}

	#navigation_hintergrund {
		display: block;
		position: sticky;
		z-index: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: var(--farbe_1);
		opacity: 1;
	}
	#navigation_schalter {
		display: block;
		position: fixed;
		z-index: 10;
		font-weight: 400;
		cursor: pointer;
		margin-right: -1px;
	}
	#navigation_schalter:before {
		content: "Menu";
	}
	#navigation_schalter.aktiv::after {
		content: "";
		display: block;
		position: absolute;
		z-index: 11;
		width: 116%;
		height: 0;
		left: -8%;
		top: 11px;
		border-top: 2px solid rgba(255, 255, 255, 0.7);
		transform: rotate(-14.25deg);
	}
	#navigation_abdeckung {
		position: fixed;
		z-index: 5;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.2);
		mix-blend-mode: multiply;
	}
	#navigation_kante {
		height: 50px;
	}
}



/********** Navigation Rest **********/
@media screen and (min-width: 911px) {
	#titel,
	#navigation,
	#navigation_schalter {
		top: 12px;
	}
	#titel,
	#titel *,
	#navigation,
	#navigation * {
		font-size: 20px;
		line-height: 20px;
	}
	#titel {
	}
	#navigation {
		text-align: right!important;
	}
	#navigation,
	#navigation * {
		font-weight: 400;
	}
	#navigation ul.navigation_main {
		position: relative;
		text-align: right!important;
	}
	#navigation ul.navigation_main li {
		display: inline-block;
	}
	#navigation ul.navigation_main li + li {
		margin: 0 0 0 25px;
	}
	#navigation li.archiv div,
	#navigation a {
		font-weight: 500;
		padding: 0 0 0 0;
	}
	#navigation li.archiv:hover div {
		padding-bottom: 10px!important;
	}
	#navigation li.archiv:hover ul.navigation_archiv {
		display: block!important;
	}
	#navigation ul.navigation_archiv {
		position: absolute;
		z-index: -1;
		top: 28px;
		right: -15px;
		padding: 12px 15px 15px 15px;
		background-color: var(--farbe_1);
		opacity: 1;
		border-radius: 0;
	}
	#navigation ul.navigation_archiv li,
	#navigation ul.navigation_archiv li * {
			font-size: 18px!important;
		line-height: 18px!important;
	}
	#navigation ul.navigation_archiv li + li {
		margin: 15px 0 0 0;
	}
	#navigation a.gestrichen:before {
		top: 12px;
		height: 1px;
	}
	#navigation a:hover,
	#navigation a.aktiv {
		border-bottom: 2px solid rgba(255, 255, 255, 1);
	}
	#navigation_hintergrund,
	#navigation_schalter {
		display: none;
	}
	#navigation_kante {
		height: 57px;
	}
}



/********** mid Screen **********/
@media screen and (max-width: 700px){
	#titel {
		left: 20px;
	}
	#navigation_schalter {
		right: 20px;
	}
}

/********** mid Screen **********/
@media screen and (min-width: 701px) and (max-width: 910px){
	#titel {
		left: 35px;
	}
	#navigation_schalter {
		right: 35px;
	}
	#navigation ul.navigation_main {
		padding-right: 35px;
	}
}

/********** mid Screen **********/
@media screen and (min-width: 911px) and (max-width: 1024px) {
	#titel {
		left: 35px;
	}
	#navigation ul.navigation_main {
		padding-right: 35px;
	}
}

/********** Big Screens **********/
@media screen and (min-width: 1025px) and (max-width: 1200px) {
	#titel {
		left: 7%;
	}
	#navigation ul.navigation_main {
		padding-right: 7%;
	}
}

/********** Very Big Screens **********/
@media screen and (min-width: 1201px) {
	#titel {
		left: 11%;
	}
	#navigation ul.navigation_main {
		padding-right: 11%;
	}
}