/* === GALLERY STYLES === */

/* Gallery Container - Hauptcontainer für die gesamte Galerie */
.gallery-container {
    padding: 20px 0; /* Vertikaler Innenabstand: 20px oben/unten, 0px links/rechts */
}

/* Gallery Grid Layout - Grid-Container für die Galerie-Elemente */
.gallery-grid {
    display: grid; /* Aktiviert CSS Grid Layout */
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* Automatische Spalten mit Mindestbreite 250px */
    gap: 20px; /* Abstand zwischen den Grid-Elementen */
    margin-top: 20px; /* Abstand nach oben zum vorherigen Element */
}

/* Gallery Item - Stil für einzelne Galerie-Elemente (Bilder-Container) */
.gallery-item {
    position: relative; /* Relative Positionierung für eventuelle absolute Kindelemente */
    overflow: hidden; /* Versteckt überlaufende Inhalte (wichtig für Animationen) */
    border-radius: 10px; /* Abgerundete Ecken mit 10px Radius */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Leichter Schatten für Tiefeneffekt */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Sanfte Übergänge für Transform und Schatten */
    cursor: pointer; /* Zeiger-Cursor beim Überfahren (zeigt Klickbarkeit an) */
    aspect-ratio: 3 / 2; /* Feste Seitenverhältnis von 3:2 für alle Bilder */
}

/* Hover-Effekt für Galerie-Elemente */
.gallery-item:hover {
    transform: translateY(-5px); /* Bewegt Element 5px nach oben beim Überfahren */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); /* Verstärkter Schatten beim Überfahren */
}

/* Stil für Bilder innerhalb der Galerie-Elemente */
.gallery-item img {
    width: 100%; /* Volle Breite des Containers */
    height: 100%; /* Volle Höhe des Containers */
    object-fit: cover; /* Bild füllt Container ohne Verzerrung (beschnitten) */
    transition: transform 0.5s ease; /* Sanfte Zoom-Animation beim Überfahren */
}

/* Hover-Effekt für Bilder - leichter Zoom */
.gallery-item:hover img {
    transform: scale(1.05); /* Bild um 5% vergrößern beim Überfahren */
}

/* Lightbox Modal - Overlay für die Lightbox (wird per JS ein-/ausgeblendet) */
.lightbox {
    display: none; /* Standardmäßig ausgeblendet */
    position: fixed; /* Feste Positionierung über allem Inhalt */
    z-index: 1000; /* Hoher z-index für Überlappung anderer Elemente */
    left: 0; /* Linke Ausrichtung am Viewport */
    top: 0; /* Obere Ausrichtung am Viewport */
    width: 100%; /* Volle Viewport-Breite */
    height: 100%; /* Volle Viewport-Höhe */
    background-color: rgba(0, 0, 0, 0.9); /* Fast undurchsichtiger schwarzer Hintergrund */
    overflow: auto; /* Scrollbalken falls Inhalt zu groß */
    padding-top: 60px; /* Oberer Innenabstand für Close-Button */
    animation: fadeIn 0.3s; /* Einblend-Animation beim Öffnen */
}

/* Einblend-Animation für Lightbox */
@keyframes fadeIn {
    from { opacity: 0; } /* Startet unsichtbar */
    to { opacity: 1; }   /* Endet voll sichtbar */
}

/* Container für den Lightbox-Inhalt (Bild + Beschriftung) */
.lightbox-content {
    position: relative; /* Relative Positionierung für absolute Navigationselemente */
    margin: auto; /* Automatische Zentrierung horizontal */
    display: block; /* Block-Element für eigene Zeile */
    max-width: 90%; /* Maximale Breite von 90% des Viewports */
    max-height: 80vh; /* Maximale Höhe von 80% des Viewports */
    text-align: center; /* Zentriert den Inhalt */
}

/* Stil für das Bild in der Lightbox */
#lightbox-image {
    max-width: 100%; /* Maximale Breite von 100% des Containers */
    max-height: 80vh; /* Maximale Höhe von 80% des Viewports */
    object-fit: contain; /* Vollständiges Bild anzeigen ohne Beschnitt */
    border-radius: 8px; /* Leicht abgerundete Ecken */
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.5); /* Deutlicher Schatten für Tiefeneffekt */
}

/* Beschriftungstext unter dem Lightbox-Bild */
#lightbox-caption {
    margin: 10px auto; /* 10px Abstand oben/unten, auto zentriert horizontal */
    width: 80%; /* Breite von 80% des Containers */
    max-width: 700px; /* Maximale Breite von 700px begrenzen */
    text-align: center; /* Text zentrieren */
    color: #ccc; /* Hellgraue Textfarbe */
    font-size: 16px; /* Schriftgröße von 16px */
    padding: 10px 0; /* Vertikaler Innenabstand von 10px */
}

/* Lightbox Navigation - Allgemeine Stile für Navigationsbuttons */
.lightbox-close,
.lightbox-prev,
.lightbox-next {
    position: absolute; /* Absolute Positionierung im Lightbox-Container */
    color: #f1f1f1; /* Hellgraue/Weiße Textfarbe */
    font-size: 40px; /* Große Schriftgröße für gute Sichtbarkeit */
    font-weight: bold; /* Fettgedruckter Text */
    cursor: pointer; /* Zeiger-Cursor beim Überfahren */
    transition: 0.3s; /* Farbe-Übergang bei Hover */
    user-select: none; /* Verhindert Textauswahl der Buttons */
}

/* Spezifischer Stil für den Schließen-Button */
.lightbox-close {
    top: 15px; /* 15px Abstand von oben */
    right: 35px; /* 35px Abstand von rechts */
}

/* Gemeinsame Stile für Vor- und Zurück-Buttons */
.lightbox-prev,
.lightbox-next {
    top: 50%; /* Vertikal in der Mitte beginnen */
    transform: translateY(-50%); /* Vertikal um die Hälfte der eigenen Höhe verschieben (perfekte Zentrierung) */
    padding: 16px; /* Innenabstand für bessere Klickbarkeit */
}

/* Spezifischer Stil für den Zurück-Button */
.lightbox-prev {
    left: 0; /* Linke Ausrichtung */
}

/* Spezifischer Stil für den Weiter-Button */
.lightbox-next {
    right: 0; /* Rechte Ausrichtung */
}

/* Hover-Effekt für alle Navigationsbuttons */
.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover {
    color: #e9932b; /* Orange Farbe beim Überfahren (Corporate Color) */
}

/* Responsive Styles - Anpassungen für Tablets und kleinere Bildschirme */
@media (max-width: 768px) {
    .gallery-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* Kleinere Mindestbreite für Spalten */
        gap: 15px; /* Reduzierter Abstand zwischen Elementen */
    }
    
    /* Kleinere Navigationsbuttons auf mobilen Geräten */
    .lightbox-prev,
    .lightbox-next {
        font-size: 30px; /* Kleinere Schriftgröße */
    }
    
    /* Anpassungen für Schließen-Button auf mobilen Geräten */
    .lightbox-close {
        top: 10px; /* Weniger Abstand von oben */
        right: 25px; /* Weniger Abstand von rechts */
        font-size: 35px; /* Kleinere Schriftgröße */
    }
}