/* =====================================================
   NAVIGATION.CSS
   -----------------------------------------------------
   Enthält:
   - Navigation
===================================================== */

/*******************************************************
*
*       Text
*
*******************************************************/

.menu li,
.menu li a {
	color: var(--color-muted);
	text-transform: uppercase;
	font-size: 0.9em;
	font-weight: 600;
}

.menu li a:hover {
	color: var(--color-hoveronlinks);
	text-decoration-color: var(--color-grey_light);
	text-underline-offset: 2px;
	text-decoration: underline solid;
	text-decoration-thickness: 2px;
	text-decoration-color: var(--color-grey_light_0);
	text-underline-offset: 6px;
}

/*******************************************************
*
*       Navigation
*
*******************************************************/

/* Navigationsleiste fixieren */
nav {
	height: var(--navheight);
	border-bottom: 1px var(--color-grey_light) solid;

	position: fixed;      /* bleibt beim Scrollen stehen */
    top: 0;               /* ganz oben */
    left: 0;
    width: 100%;          /* volle Breite */
	background-color: var(--color-surface);
    padding: 15px 20px;
    box-sizing: border-box;
}

/* Menü horizontal & rechts */
.menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-end;
}

.menu li,
.menu li a {
	padding-top: 0;
	padding-left: 0.8rem;
	transition: color 0.25s ease;
	transition: all 0.4s ease;
	cursor: pointer;
}


/* Burger-Menu */

.menu-icon {
	display: none;
}

@media (max-width: 800px) {
	nav ul {
		position: absolute;
		top: var(--navheight);
		margin-top: 1px; /*Top Margin for Border of Navigation*/
		right: 0;
		width: 35%;
		min-width: 180px;
		flex-direction: column;
		background-color: rgba(255, 255, 255, 0.95);
		box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
		transform: translateX(100%);
		transition: transform 0.5s ease;
	}
	nav hr {
		display: initial;
		margin: 0;
	}
	.menu-down {
		transform: translateX(0);
	}
	.menu li {
		width: 100%;
		text-decoration-color: var(--color-grey_light_0);
		padding-left: 0;
		padding-top: 1em;
		padding-bottom: 1em;
		text-align: center;
	}
	.menu a {
		display: block;
	}

	.menu li:hover {
		text-decoration-color: var(--color-grey_light_0);
	}
	.menu-icon {
		position: absolute;
		top: 10px;
		right: 10px;
	}
	.menu-icon:hover {
		cursor: pointer;
	}
	.menu-active {
		display: inline;
	}
	.menu-icon:not(.menu-active) {
		display: none;
	}
	#menuHide {
		margin-right: 5px;
	}
}