/* NAVBAR */
.navbar {
    padding: 1rem 2rem; /* macht navbar hoch genug 1rem, Links abstand vom Rand des Fensters 2rem */
    display: flex; /* Logo, Links, Hamburger  automatisch nebeneinander angeordnet*/
    justify-content: space-between; /* Logo links, Links rechts */
    align-items: center; /* alles mittig in nav */
    background: #5ca174;
    color: white; /* Text weiß */
    position: sticky; /* bleibt oben beim Scrollen */
    top: 0; /* Sticky ab oberen Rand */
    z-index: 1000;/* Navbar über anderem Content */
}

/* Logo */
.logo {
    font-size: 1.3rem; /* Schriftgröße Logo */
    font-weight: bold; /* fette Schrift */
    flex: 1;
    min-width: 0;
}

/* Links */
.nav-links {
    list-style: none; /* keine Aufzählungszeichen */
    display: flex; /* Links nebeneinander */
    gap: 1.6rem; /* Abstand zwischen Links */
}

.nav-links a {
    color: white; /* Linkfarbe */
}

/* Hamburger */
.menu-toggle {
    display: none; /* nur Mobile sichtbar */
    flex-direction: column; /* 3 Striche übereinander */
    justify-content: space-between; /* Abstand zwischen Strichen */
    width: 32px; /* Breite Hamburger */
    height: 22px; /* Höhe Hamburger */
    cursor: pointer; /* Mauszeiger Hand */
}

.menu-toggle span {
    height: 4px; /* Strichhöhe */
    background: white; /* Farbe Striche */
    border-radius: 5px; /* abgerundete Striche */
    transition: 0.3s; /* sanfte Animation */
}

.menu-checkbox {
    display: none; /* unsichtbar */
}

/* Menü sichtbar, wenn Checkbox gecheckt */
.menu-checkbox:checked ~ .nav-links {
    display: flex;
}

/* Hamburger Animation */
.menu-checkbox:checked + .nav-links + .menu-toggle span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}
.menu-checkbox:checked + .nav-links + .menu-toggle span:nth-child(2) {
    opacity: 0;
}
.menu-checkbox:checked + .nav-links + .menu-toggle span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}

/* MOBILE */
@media (max-width: 1024px) {
    navbar {
        position: sticky;
        top: 0;
        z-index: 1000;
    }
    .menu-toggle {
        display: flex; /* Hamburger sichtbar */
    }

    .nav-links {
        display: none; /* links zuerst versteckt */
        position: absolute; /* über anderen Content */
        top: 70px; /* unter Navbar */
        right: 20px; /* rechts positioniert*/
        flex-direction: column; /* vertikal anordnen */
        background: white; /* Hintergrund Dropdown */
        padding: 1.2rem; /* Innenabstand Dropdown */
        width: 220px; /* Breite Dropdown */
        border-radius: 14px; /* abgerundete Ecken */
        gap: 1rem; /* Abstand Links im Dropdown */
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.12); /* Schatten */
        z-index: 1100; /* Navbar über anderem Content */
    }

    .nav-links a {
        color: #5ca174; /* Linkfarbe Mobile */
        font-weight: 600; /* etwas dicker */
    }
}
@media (max-width: 768px) {
    .navbar {
        padding: 1rem;
        gap: 0.8rem;
    }

    .logo {
        font-size: 1rem;
    }

    .nav-links {
        right: 10px;
        width: min(220px, calc(100vw - 20px));
    }
}