/* --- Grundlayout Header --- */

.nav-header {
    background-color: #000000c0;
    box-shadow: 0.2rem 0rem 0.2rem #261201;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99;
    overflow: visible; /* wichtig, damit das Logo rausgucken darf */
}


.nav-container {
    max-width: 1024px;
    margin: auto;
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Logo */
.nav-logo img {
    height: 110px;      /* Logo deutlich größer */
    position: absolute;
    top: -30px;         /* ragt oben heraus */
    left: 0;
}

.nav-logo {
    position: relative; /* Basis für das herausragende Logo */
    z-index: 200;
}


/* --- Desktop-Menü --- */

.nav-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;

    background: linear-gradient(135deg,
        #5a2d12 0%,
        #a85f32 25%,
        #d48a52 50%,
        #e0a46c 65%,
        #b56a34 85%,
        #6b3516 100%
    );
}

.nav-menu li a {
    display: block;
    padding: 20px 25px;
    text-decoration: none;
    color: #000;
}

.nav-menu li a span {
    color: #e4a518;
}

/* --- Hamburger Button --- */

.nav-toggle {
    display: none;
}

.nav-toggle-label {
    display: none;
    cursor: pointer;
    width: 30px;
    height: 25px;
    position: relative;
}

.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after {
    background: #fff;
    height: 3px;
    width: 100%;
    position: absolute;
    left: 0;
    transition: 0.3s;
    content: "";
}

.nav-toggle-label span {
    top: 50%;
    transform: translateY(-50%);
}

.nav-toggle-label span::before {
    top: -8px;
}

.nav-toggle-label span::after {
    top: 8px;
}

/* --- Mobile Menü --- */

@media (max-width: 934px) {

    .nav-toggle-label {
        display: block;
    }

    .nav-menu {
        position: absolute;
        top: 100%;
        right: 0; /* Menü rechts ausrichten */
        overflow: hidden;
        max-height: 0;
        transition: max-height 0.4s ease;
        width: auto; /* WICHTIG: nicht volle Breite */
    }

    .nav-menu ul {
        display: inline-block; /* Breite = Textbreite */
        flex-direction: column;
        text-align: left;
        padding: 0;
        margin: 0;

        background: linear-gradient(135deg,
            #5a2d12 0%,
            #a85f32 25%,
            #d48a52 50%,
            #e0a46c 65%,
            #b56a34 85%,
            #6b3516 100%
        );
    }

    .nav-menu li a {
        padding: 18px 25px;
        display: block;
        white-space: nowrap; /* verhindert Zeilenumbruch → Breite bleibt kompakt */
    }

    .nav-toggle:checked ~ .nav-menu {
        max-height: 600px;
    }

    .nav-toggle:checked + .nav-toggle-label span {
        background: transparent;
    }

    .nav-toggle:checked + .nav-toggle-label span::before {
        transform: rotate(45deg);
        top: 0;
    }

    .nav-toggle:checked + .nav-toggle-label span::after {
        transform: rotate(-45deg);
        top: 0;
    }
}

a {
    color: #000000;
    /* text-decoration-line: none; */
}

a:visited {
    color: #000000;
}

a:hover{
    text-decoration: underline;
    text-shadow: #ffffff 0.2em 0.2em 10px;
    color: #634502;
}

a:active {
    text-decoration: underline;
    text-shadow: #ffffff 0.2em 0.2em 10px;
    color: #634502;

}

ul li a span {
    color: #e4a518;
}