/* 1. Grund-Einstellungen */
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
}

body { 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; 
    line-height: 1.6; 
    color: #fff; 
    background-color: #3b3d41; /* Dein gewünschter Body-Grauton */
    scroll-behavior: smooth;
    overflow-x: hidden;
}

/* 2. Header & Logo-Einstellungen */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 5%; /* 5% Seitenabstand als Ankerpunkt */
    background-color: #000000; /* Tiefschwarz */
    border-bottom: 1px solid #4a4d52;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.logo-area img {
    height: 60px; /* Präsent auf Desktop */
    width: auto;
    display: block;
}

/* 3. Navigation Desktop */
.menu { 
    display: flex; 
    list-style: none; 
    gap: 30px; 
}

.menu a { 
    text-decoration: none; 
    color: #fff; 
    font-weight: 600; 
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Versteckt das technische Hilfsmittel (Checkbox) komplett */
#menu-toggle { 
    display: none !important; 
    visibility: hidden;
}

/* Hamburger Icon */
.hamburger { 
    color: #fff; 
    display: none; 
    font-size: 2rem; 
    cursor: pointer; 
}

/* 4. Mobile Anpassungen (Rechtsbündig & Logo-Größe) */
@media (max-width: 768px) {
    .logo-area img {
        height: 45px; /* Kompakter für Smartphones */
    }

    .hamburger { 
        display: block; 
    }

    .menu.main-nav {
        display: none; 
        flex-direction: column; 
        position: absolute;
        top: 100%; 
        right: 0; 
        width: 220px; 
        background: #000;
        padding: 20px 5% 30px 0; 
        text-align: right; /* Rechtsbündige Ausrichtung */
        border-bottom: 1px solid #4a4d52;
        border-left: 1px solid #4a4d52;
        gap: 20px; 
    }
    
    #menu-toggle:checked ~ .menu.main-nav { 
        display: flex; 
    }
}

/* 5. Slider - Breite angepasst & Spalt-Killer integriert */
main { 
    display: flex; 
    justify-content: center; 
    padding: 40px 0; 
}

.slider-container { 
    position: relative; 
    width: 90%; /* Bündig mit dem 5% Header-Padding */
    max-width: 900px; 
}

.content-slider {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    /* Spalt-Killer: Verhindert weiße Blitzer */
    background-color: #3b3d41; 
    border: none;
    outline: none;
}

.content-slider::-webkit-scrollbar { 
    display: none; 
}

.slide { 
    min-width: 100%; 
    scroll-snap-align: start; 
    display: flex; 
    flex-direction: column; 
    background-color: #3b3d41;
    border: none;
    overflow: hidden;
}

.slide img, .slide video { 
    width: 100%; 
    height: auto; 
    display: block; 
    object-fit: cover; /* Korrigiert Rundungsfehler bei der Breite */
    border: none;
    margin: 0;
    padding: 0;
}

/* Bildunterschrift & Textgrößen (konsistent zum Impressum) */
.slide-caption, .footer-content p, #impressum-box p {
    padding: 15px 0;
    font-size: 0.95rem;
    font-weight: 400;
    color: #ccc; /* Dezentes Grau für Text auf Dunkel */
    text-align: left;
}

/* Pfeile - Weiß mit Schatten für Sichtbarkeit auf jedem Bild */
.arrow {
    position: absolute; 
    top: 45%; 
    transform: translateY(-50%);
    background: transparent; 
    border: none;
    font-size: 2.5rem; 
    color: #fff;
    cursor: pointer; 
    z-index: 20;
    text-shadow: 0px 0px 10px rgba(0,0,0,0.7); 
}

.arrow-left { left: -40px; } /* Desktop: Außerhalb des Bildes */
.arrow-right { right: -40px; }

@media (max-width: 1100px) {
    .arrow-left { left: 10px; } /* Mobile/Tablet: Auf dem Bild */
    .arrow-right { right: 10px; }
}

/* 6. Footer & Kontakt */
footer { 
    padding: 60px 5%; 
    background-color: #3b3d41; 
    border-top: 1px solid #4a4d52; 
}

.footer-content h3, #impressum-box strong {
    font-size: 1rem;
    color: #fff;
    letter-spacing: 2px;
    margin-bottom: 15px;
    text-transform: uppercase;
    display: block;
}

/* Mail-Link Style ohne Standard-Blau */
.footer-content a {
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid #666;
}

#impressum-box { 
    background-color: rgba(0,0,0,0.2); /* Dezent abgesetzte Box */
    padding: 30px; 
    margin-top: 50px; 
}