body {

    /* Verhindert horizontales Scrollen bei Padding-Korrektur */
    box-sizing: border-box; 
}

/* masthead
-------------------------------------------------------------- */
header#masthead { 
    margin-top: 2rem; 
}

header#masthead { 
    font-family: Seria Sans W05 Bold, Arial, sans-serif; 
    color: #999999; 
    line-height: 1; 
}

/* --- HEADER LAYOUT --- */
#masthead {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 1000;  
    line-height: 1;
}

/* Logo / Firmenname */
.logo a {
    text-decoration: none;
    display: block;  
    line-height: 1;
}

.logo span {
    font-weight: normal; 
}

/* --- NAVIGATION DESKTOP --- */

#main-nav a {
    text-decoration: none;
    transition: opacity 0.2s ease;  
    line-height: 1;
}

#main-nav a:hover {
    opacity: 0.7; text-decoration: underline;text-underline-offset: 8px;
}

.sep {
    color: #999;
    margin: 0 2px;
}

/* Menu Button (Standardmäßig ausgeblendet) */
#menu-toggle {
    display: none;
}

#main-nav { margin-top: -24px; }

/* --- MOBILE ANPASSUNGEN --- */
@media (max-width: 740px) { 
    header#masthead { margin-top: 1rem; line-height: 1 !important; } 
}        

/* --- MOBILE NAVIGATION (< 740px) --- */
@media (max-width: 739px) {



    /* Button Styling */
    #menu-toggle {
        display: block;
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
        width: 48px;
        height: 48px;
        /* WICHTIG: Höherer Z-Index als das Overlay #main-nav */
        z-index: 2000; 
        -webkit-tap-highlight-color: transparent;
        outline: none;
        position: relative; /* Damit z-index greift */
    }

    #menu-toggle svg {
        width: 100%;
        height: 100%;
        display: block;
        /* Verhindert Klicks auf SVG Elemente, Event bleibt beim Button */
        pointer-events: none; 
    }

    /* Icon Logik: Absolute Positionierung garantiert Deckungsgleichheit */
    #menu-toggle .icon-open,
    #menu-toggle .icon-close {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transition: opacity 0.2s ease, transform 0.2s ease;
    }



    #menu-toggle .icon-open, #menu-toggle .icon-close { fill: #ea5c45; stroke: #ea5c45; transition: fill 0.3s ease, stroke 0.3s ease;  }
    #menu-toggle:hover .icon-open, #menu-toggle:hover .icon-close { fill: #7a7a7a; stroke: #7a7a7a;}
  

    /* Standard Zustand */
    #menu-toggle .icon-open { opacity: 1; transform: scale(1); }
    #menu-toggle .icon-close { opacity: 0; transform: scale(0.8); }
    
    /* Geöffneter Zustand (Klasse .nav-open am Header) */
    .nav-open #menu-toggle .icon-open { opacity: 0; transform: scale(0.8); }
    .nav-open #menu-toggle .icon-close { opacity: 1; transform: scale(1); }

    /* Navigation Overlay */
    #main-nav {
        display: none; /* Standardmäßig aus */
        position: fixed; /* Fixiert über den ganzen Screen */
        top: 0; 
        left: 0;
        width: 100vw;
        height: 100vh;
        /* Die gewünschte Hintergrundfarbe */
        background-color: #f7fede; 
        opacity: .95;
        flex-direction: column;
        justify-content: center; /* Vertikal zentrieren */
        align-items: center;     /* Horizontal zentrieren */
       /*  padding: 20px; */
        /* Z-Index hoch, aber niedriger als der Button (2000) */
        z-index: 1500; 
        overflow-y: auto;
    }
    
    /* Höhe der Navigation verschieben
    #main-nav a:first-child {margin-top: -30rem; } */
    
    

    /* Wenn Nav offen ist */
    .nav-open #main-nav {
        display: flex;
        animation: fadeIn 0.3s ease-in-out;
    }

    .sep {
        display: none;
    }

    #main-nav a {
        display: block;
        padding: 15px 0;
        text-align: center;
        width: 100%;
        font-size: 2.8rem; /* Größere Schrift im Overlay */
        border: none;
    }
    
    #main-nav a:hover {
        opacity: 0.6;
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}