/*
 * Molecule: Hauptnavigation (.nav, .nav__*) inkl. Desktop-Liste und
 * mobilem Vollbild-Menü (.nav__mobile-*).
 */

.nav {
	display: flex;
	gap: 1rem;
	font-weight: 600;
	align-items: center !important;
}


@media screen and (max-width: 1080px) {
	.nav__desktop {
		display: none;
	}
}

@media screen and (min-width: 1081px) {
	.nav__mobile {
		display: none;
	}
}

.nav__item {
	margin-right: 0.8rem;
	list-style: none;
}

.nav__link {
	text-decoration: none;
}

.nav__mobile-list {
	display: flex;
	position: fixed;
	top: 0;
	left: 100vw;
	width: 100vw;
	height: 100vh;
	transition: left 0.5s;
	align-items: center;
	justify-content: center;
	z-index: 3;
}

.nav__mobile-list--active {
	left: 0vw;
}

.nav__mobile-item {
	margin-bottom: 0.8rem;
	border-bottom: 1px solid transparent;
}

.nav__mobile-item.nav__item--active {
	border-bottom: 1px solid white !important;
}


nav.nav span.nav__mobile div.toggle button.toggle__button {
	position: absolute;
	top: 1rem;
	right: 1rem;
}




ul.nav__list li.nav__item.nav__item--active a.nav__link {
	border-bottom: 2px solid #5f6469 !important;
	font-style: normal;
}



li.nav__item a:hover,
li.nav__item a:active {
	color: #5f6469;
	border-bottom: 2px solid #5f6469 !important;
}

.nav ul li a {
	/*color: #cd0005;*/
	position: relative;
	text-decoration: none;
	transition: color 0.3s ease;
	font-style: normal;
	font-weight: 400;
	letter-spacing: 2px;
    font-size: 0.9rem;
    text-transform: uppercase;
}

.nav a:hover::after {
	width: 100%;
}

/* Aktiver Zustand */
.nav ul li a.active {
	color: green;
}

.nav a.active::after {
	width: 100%;
}



nav.nav ul li a {
	border-bottom: 2px solid transparent;
	padding-bottom: 5px;
	/* Abstand des Strichs zum Text hier einstellen */
	transition: border-color 0.3s ease;
	text-decoration: none !important;

	/* Standard-Unterstreichung entfernen */
}

/* 2. Hover- und Active-Zustand auf die gleiche Linie setzen */
nav.nav ul li a:hover,
.main-navigation ul li.current-menu-item>a,
.main-navigation ul li.current_page_item>a {
	border-bottom: 2px solid #5f6469;
	/* Hier deine gewünschte Farbe einfügen */
}

.nav__mobile-list {
	background-color: #4d0205;
	color: #fff !important;
	z-index: 4;
}

.nav__mobile-list a {
	color: #fff !important;
	font-size: 1.5rem !important;
  	line-height: 3.5rem;
}