/* 
 * galerie.css
 * Stile für Galerie und Bilder
 */

/* Galerie-Layout */
.galerie {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.4%;
    padding: 0;
}

.galerie__item {
    position: relative;
    margin-bottom: 0.2%;
    padding: 0.45% 0;
    transition: transform 0.3s ease;
}

/* Overlay-Container für Bilder */
.overlay__container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* Bild innerhalb des Overlay-Containers */
.bild__ueberlagern {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.3s ease;
}

.bild__ueberlagern img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.3s ease;
}

/* Allgemeine Overlay-Stile */
.overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    color: var(--farbe-weiss);
    padding: 0.5rem;
    transition: transform 0.3s ease, opacity 0.3s ease;
    z-index: 10;
}

/* Text innerhalb des Overlays */
.overlay__text {
    text-align: center;
    font-size: 1rem;
    padding: 0.3rem 0;
}

/* Links im Overlay */
.overlay__text a {
    color: var(--farbe-weiss);
    text-decoration: none;
    display: block;
    width: 100%;
    transition: color 0.3s ease;
}

.overlay__text a:hover {
    color: var(--farbe-blau-hell);
}

/* Hover-Effekte für Overlay-Container */
.overlay__container:hover .overlay {
    transform: translateY(0);
    opacity: 1;
}

/* Zusätzliche Styles für Fullscreen-Modus */
.galerie.galerie--fullscreen {
    display: block;
    gap: 0;
}

.galerie--fullscreen .galerie__item:not(.aktiv) {
    opacity: 0;
    height: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

.galerie--fullscreen .galerie__item.aktiv {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
}

.galerie--fullscreen .galerie__item.aktiv img {
    max-width: 100%;
    width: 100%;
    height: auto;
}

/* Spezielle Stile für die Kategorieübersicht */
.fotos__uebersicht .galerie__item {
    cursor: pointer;
    transition: transform 0.3s ease;
}

.fotos__uebersicht .galerie__item:hover {
    transform: scale(1.02);
}

.fotos__uebersicht .bild__ueberlagern img {
    transition: all 0.3s ease;
}

.fotos__uebersicht .galerie__item:hover .bild__ueberlagern img {
    transform: scale(1.05);
}

/* Responsive Anpassungen */
@media screen and (max-width: 768px) {
    /* Smartphone */
    .galerie__item:not(.aktiv) {
        flex: 0 0 49.8%;
        max-width: 49.8%;
        padding: 0.1% 0;
    }

    .galerie--fullscreen .galerie__item {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .overlay__bild {
        height: 60vh;
    }
    
    .overlay__text {
        font-size: 0.9rem;
    }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
    /* Tablet */
    .galerie__item:not(.aktiv) {
        flex: 0 0 49.55%;
        max-width: 49.55%;
    }

    .galerie--fullscreen .galerie__item {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .overlay__bild {
        height: 65vh;
    }
}

@media screen and (min-width: 1025px) and (max-width: 1200px) {
    .galerie__item:not(.aktiv) {
        flex: 0 0 49.55%;
        max-width: 49.55%;
    }

    .galerie--fullscreen .galerie__item {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .overlay__bild {
        height: 75vh;
    }
}

@media screen and (min-width: 1201px) and (max-width: 1600px) {
    .galerie__item:not(.aktiv) {
        flex: 0 0 32.33%;
        max-width: 32.33%;
    }

    .galerie--fullscreen .galerie__item {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .overlay__bild {
        height: 75vh;
    }
}

@media screen and (min-width: 1601px) {
    .galerie__item:not(.aktiv) {
        flex: 0 0 24.325%;
        max-width: 24.325%;
        margin-bottom: 0;
    }

    .galerie--fullscreen .galerie__item {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .overlay__bild {
        width: 100% !important;
        aspect-ratio: 16/9 !important;
        object-fit: cover !important;
        height: auto;
    }

    .galerie__startseite .galerie__item {
        flex: 0 0 12.15%;
        max-width: 12.15%;
        margin-bottom: 0;
    }
}