@font-face {
font-family: 'Roboto'; 
src: url('/Roboto/Roboto-Regular.ttf') format('truetype'); 

font-weight: normal;
font-style: normal;
}

.menu-text {
margin-left: 10px;
font-family: 'Roboto', sans-serif; /* Schriftart festlegen */
font-size: 18px; /* Schriftgröße auf 18 Pixel setzen */
background: linear-gradient(to right, #07a5f5, #25ed9f); /* Hintergrund mit Farbverlauf */
-webkit-background-clip: text; /* Anwenden des Farbverlaufs auf den Text (Webkit-Browser) */
background-clip: text; /* Anwenden des Farbverlaufs auf den Text (moderne Browser) */
color: transparent; /* Textfarbe auf transparent setzen */
}



.marienberg-logo{
width: 90%;
height: 90%;
}

.navbar-title {
font-size: 30px; /* Schriftgröße verdoppeln */
padding: 10px; /* Innenabstand anpassen */
background: linear-gradient(to right, #07a5f5, #25ed9f); /* Hintergrundgradient von links nach rechts */
background-clip: text; /* Textclip-Eigenschaft für den Farbverlauf */
-webkit-background-clip: text; /* Für Browser-Kompatibilität */
color: transparent; /* Text transparent machen, um den Hintergrundgradienten anzuzeigen */
display: inline-block; /* Inline-Block, damit der Text den Farbverlauf umgibt */
position: relative; /* Position relativ für die Anordnung der Formen */
margin-left: 20px; /* Abstand zur linken Seite der Navbar anpassen */
z-index: 2; /* Z-Index erhöhen, um über den Formen zu liegen */
}

.nav-link {
display: flex;
align-items: center; /* Vertikale Ausrichtung der Inhalte zentrieren */
}


.menu-container {
max-height: 600px; /* Legen Sie die maximale Höhe für den Container fest */
overflow-y: auto; /* Aktiviert das Scrollen, wenn die Liste zu lang ist */
}
.menu-container::-webkit-scrollbar {
width: 12px; /* Adjust the width as needed */
}
.menu-container::-webkit-scrollbar-thumb {
background-color: rgba(255, 255, 255, 0.328);
box-shadow: 0 0 40px rgba(8,7,16,0.6);
border-radius: 6px; /* Rounded corners of the thumb */
}
.menu-container::-webkit-scrollbar-track {
background-color:#050505; /* Background color of the track */
display: none;
}/* Stile für die Navigation */

nav {
z-index: 50;
width: 400px; /* Breite der Navigation anpassen */
backdrop-filter: blur(10px);
box-shadow: 0 0 40px rgba(8,7,16,0.6);
background-color: rgba(255, 255, 255, 0.059);
color: #fff; /* Textfarbe */
position: fixed; /* Die Navigation wird fixiert, um sie sichtbar zu halten, wenn der Bildlauf erfolgt */
top: 0; /* Die Navigation wird oben am Bildschirm positioniert */
bottom: 0; /* Die Navigation wird bis zum unteren Rand des Bildschirms angezeigt */
left: 0; /* Die Navigation wird an der linken Seite positioniert */
padding-top: 40px; /* Oberer Innenabstand der Navigation */
}
nav ul {
list-style: none; /* Listenpunkte entfernen */
padding: 0; /* Innerer Abstand der Liste entfernen */
}
nav ul li {
padding: 30px 0; /* Oberen und unteren Innenabstand für jeden Listenpunkt erhöhen */
text-align: left; /* Text links ausrichten */
position: relative; /* Position relativ setzen, um den Strich zu platzieren */
}
nav ul li::after {
content: ""; /* Leeres Inhaltsattribut für den Strich */
position: absolute; /* Position absolut setzen, um den Strich genau zu positionieren */
top: 0; /* Den Strich oben im Listenpunkt positionieren */
left: 5%; /* Den Strich rechts im Listenpunkt positionieren */
width: 30%; /* Breite des Strichs auf 75% der Listenpunkt-Breite festlegen */
border-bottom: 2px solid #e6e6e6; /* Strich-Stil und Farbe festlegen */
}
nav a {
text-decoration: none; /* Unterstreichungen entfernen */
color: #fff; /* Textfarbe für Links */
padding-left: 15px; /* Link-Text von links einrücken, um Platz für den Strich zu lassen */
}
/* Hervorhebung des aktiven Links (falls erforderlich) */
nav a.active {
font-weight: bold; /* Fettdruck für den aktiven Link */
background-color: #555; /* Hintergrundfarbe für den aktiven Link */
}

.navbar-logo{
width: 10%;
transition: transform 0.3s;
}

.navbar-logo:hover {
transform: scale(1.2);
}







.logout-button-icon{
margin-top: 50px;
width: 10%;
height: 10%;
transition: transform 0.3s;
}
.logout-button-icon:hover {
transform: scale(1.2);
}