/* Anpassung des Burger-Menüs für Slide-in-Effekt von links */
.navbar-collapse {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 250px; /* Breite des Menüs */
    background-color: #1f2937; /* bg-gray-900 */
    transform: translateX(-100%); /* Menü startet außerhalb des Bildschirms (links) */
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* Sanfter Slide-in-Effekt */
    z-index: 1000;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.3); /* Leichter Schatten für Tiefe */
}

.navbar-collapse.show {
    transform: translateX(0); /* Menü fährt von links ein */
}

.navbar-nav {
    flex-direction: column; /* Vertikale Ausrichtung der Menüpunkte */
    padding: 1.5rem;
}

.nav-item {
    margin: 0.75rem 0;
    opacity: 0; /* Startet unsichtbar für den Slide-in-Effekt */
    transform: translateX(-20px); /* Leichter Versatz für Animation */
    transition: opacity 0.3s ease, transform 0.3s ease; /* Animation für Links */
}

.navbar-collapse.show .nav-item {
    opacity: 1;
    transform: translateX(0); /* Links sliden rein */
    transition-delay: calc(0.1s * var(--item-index)); /* Verzögerung für jeden Link */
}

.nav-link {
    color: #fff;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    transition: color 0.2s ease;
}

.nav-link:hover {
    color: #3b82f6; /* bg-blue-500 für Hover-Effekt */
}

.nav-link i {
    font-size: 1rem;
}

/* Overlay für den Hintergrund, wenn das Menü geöffnet ist */
.navbar-collapse.show::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.navbar-collapse.show::after {
    opacity: 1;
}

/* Anpassung für größere Bildschirme, wo das Menü nicht als Sidebar angezeigt wird */
@media (min-width: 992px) {
    .navbar-collapse {
        position: static;
        height: auto;
        width: auto;
        transform: none;
        background-color: transparent;
        box-shadow: none;
    }

    .navbar-nav {
        flex-direction: row;
        padding: 0;
    }

    .nav-item {
        margin: 0 1rem;
        opacity: 1;
        transform: none;
    }

    .navbar-collapse.show::after {
        display: none;
    }
}