/*=============== NAVIGATION Hamburger-Menü ===============*/
.hamburger-menu {
	position: fixed;
	top: 0;
	right: 10;
	width: 100%;
	background-color: #333;
	color: white;
	padding: 10px;
	z-index: 1000;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

/* Website-Logo und Name */
.site-branding {
	display: flex;
	align-items: center;
}

.site-branding img {
	height: 40px; /* Höhe des Logos anpassen */
	margin-right: 10px;
}

.site-branding span {
	font-size: 24px;
	font-weight: bold;
}

/* Styling für das Hamburger-Icon */
.hamburger-menu .icon {
	font-size: 30px;
	cursor: pointer;
}

.menu-items {
	display: none;
            flex-direction: column;
            position: absolute;
            top: 60px; /* Position unterhalb des Hamburger-Menüs */
            right: 10px; /* Rechts unter dem Hamburger-Icon */
            background-color: #333;
            z-index: 2000;
            width: auto; /* Passt sich an den längsten Menüpunkt an */
}

.menu-items a {
	padding: 10px;
            text-decoration: none;
            color: white;
            text-align: left; /* Links ausgerichtet */
            white-space: nowrap; /* Keine Zeilenumbrüche */
}

.menu-items a:hover {
	background-color: var(--black-color-light);
}

/* Für mobile Geräte: Menü auf 100% Breite anzeigen */
@media (max-width: 768px) {
	.menu-items {
		width: 100%;
		right: 0;
		left: 0;
	}

	.menu-items a {
		text-align: center;
	}
}

/* Wenn das Menü geöffnet ist */
.menu-items.open {
	display: flex;
    width: auto; /* Passt die Breite an den längsten Menüpunkt an */
}