/* GALLERY ############## */
        
        /* Lightbox-Stile */
/* Lightbox-Stile */
.lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 9999;
    text-align: center;
    overflow: hidden; /* Verhindert Scrollen während der Lightbox-Anzeige */
}

.lightbox-content {
    display: inline-block;
    position: relative;
    max-width: 100%;
    max-height: 80vh; /* Maximale Höhe von 80% der Viewport-Höhe */
    margin: auto;
    opacity: 0; /* Anfangs unsichtbar */
    transition: opacity 0.3s ease; /* Einfadeeffekt */
}

.lightbox-img {
    max-width: 100%;
    max-height: 100%;
    display: block;
    margin: auto;
}

.lightbox-close {
    position: absolute;
    top: 10px;
    right: 10px;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
}

.gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 3px; /* Abstand zwischen den Bildern */
}

.gallery a {
    flex: 0 0 calc(20% - 10px); /* 20% Breite mit 10px Abstand */
    max-width: calc(20% - 10px); /* Maximalbreite mit 10px Abstand */
}

.gallery img {
    margin-top: -4px;
    width: 100%; /* Die Breite des Bildes auf 100% setzen */
    height: 150px; /* Die Höhe des Bildes auf 100% setzen */
    object-fit: cover; /* Das Bild so skalieren, dass es das gesamte verfügbare Platz im Container einnimmt, ohne das Seitenverhältnis zu verlieren */
    object-position: center; /* Das Bild zentriert positionieren */
    filter: grayscale(60%); /* Graustufen umwandeln bei Hover */
    transition: .3s
}
        
        .gallery a:hover img {
            filter: grayscale(0%); /* Graustufen umwandeln bei Hover */
            transition: .3s;
            box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}

        @media only screen and (max-width: 600px) {

    .gallery a {
        flex: 0 0 calc(50% - 5px); /* 50% Breite mit 10px Abstand */
        max-width: calc(50% - 5px); /* Maximalbreite mit 10px Abstand */
    }
}
        
        
        /* END GALLERY ########## */