/* responsive.css – Ergänzungen für Navigation & Scroll-Button ohne JavaScript */

/* Scroll-to-top: Inhalt sauber zentrieren (auch wenn es ein <a>-Element ist) */
.scroll-to-top {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
}

/* Verstecktes Checkbox-Element für die Navigation */
.nav-toggle {
    display: none;
}

/* Nur auf kleineren Bildschirmen gilt der Hamburger-Mechanismus */
@media (max-width: 768px) {
    /* Sicherstellen, dass der Hamburger-Button sichtbar ist */
    .hamburger {
        display: flex;
    }

    /* Wenn die Checkbox aktiviert ist, Menü von rechts einblenden */
    .nav-toggle:checked ~ .nav-menu {
        right: 0;
    }

    /* Burger-Linien zu einem "X" animieren, wenn das Menü geöffnet ist */
    .nav-toggle:checked + .hamburger span:nth-child(1) {
        transform: rotate(45deg) translate(8px, 8px);
    }

    .nav-toggle:checked + .hamburger span:nth-child(2) {
        opacity: 0;
    }

    .nav-toggle:checked + .hamburger span:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -7px);
    }

    /* Dropdown-Menü im Mobile-Menü immer geöffnet,
       damit es ohne JavaScript nutzbar ist */
    .nav-menu .dropdown {
        max-height: none;
        overflow: visible;
    }
}