/* --- NEU: Header & Hamburger Menu --- */
header {
    display: none; /* Standardmäßig auf Desktops versteckt */
}

@media (max-width: 992px) { /* Bootstrap's lg breakpoint */
    header {
        width: 100%;
        padding: 15px 20px; /* Angepasstes Padding */
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center;
        z-index: 1000; 
    }

    .logo {
        display: flex;
        flex-direction: column;
    }

    .logo span {
        font-size: 1.2rem;
        font-weight: bold;
    }

    .logo small {
        font-size: 0.7rem;
        color: #a0a0a0;
        letter-spacing: 1px;
    }

    #menu-toggle {
        background: none;
        border: none;
        cursor: pointer;
        padding: 10px;
        z-index: 1001;
        display: flex;
        flex-direction: column;
        gap: 6px; /* Abstand zwischen den Strichen */
    }

    #menu-toggle span {
        display: block;
        width: 30px;
        height: 2px;
        background-color: black; /* Angepasst für hellen Hintergrund */
        transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    }

    /* Animation des Hamburger-Icons zu einem "X" */
    body.menu-open #menu-toggle span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    body.menu-open #menu-toggle span:nth-child(2) {
        opacity: 0;
    }

    body.menu-open #menu-toggle span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }


    /* --- NEU: Navigations-Overlay --- */
    .nav-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.95); /* Heller Hintergrund */
        z-index: 999;
        display: flex;
        justify-content: center;
        align-items: center;
        opacity: 0;
        visibility: hidden; /* Versteckt das Element für Screenreader und Klicks */
        transform: translateY(-20px);
        transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s ease;
    }

    .nav-overlay.open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .nav-overlay nav ul {
        list-style: none;
        padding: 0;
        margin: 0;
        text-align: center;
    }

    .nav-overlay nav li {
        margin: 20px 0;
    }

    .nav-overlay nav a {
        color: #333; /* Dunkler Text für hellen Hintergrund */
        text-decoration: none;
        font-size: 2.2rem;
        font-weight: 500;
        letter-spacing: 1px;
        transition: color 0.3s ease;
    }

    .nav-overlay nav a:hover {
        color: #777;
    }

    /* Bestehende Desktop-Navbar auf mobilen Geräten ausblenden */
    .navbar {
        display: none !important;
    }

    /* Body overflow hidden when menu is open */
    body.menu-open {
        overflow: hidden;
    }

    .carousel-control-prev-icon {
      background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;
    }

    .carousel-control-next-icon {
      background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;
    }

    .carousel-caption h5,
    .carousel-caption p {
      color: black !important; /* Makes the caption text black */
    }
}