/* THUMNAIL GALLERY >>>>>>>>>>>> */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}




*, *:before, *:after {
    box-sizing: border-box;
}

.my-gallery {

    padding: 0;
    margin: 0;
    margin-top: 75px;
}

.thumbnail {
    width: 25%; /* Für 4 Spalten */
    position: relative; /* Damit der Titel absolut positioniert werden kann */
    overflow: hidden; /* Damit der Titel und andere Inhalte nicht über die Grenzen des Thumbnails hinausgehen */
    cursor: pointer; /* Cursor-Stil auf "Hand" setzen, um anzuzeigen, dass das Thumbnail klickbar ist */
    opacity: 0; /* Thumbnails standardmäßig ausblenden */
    animation-name: fadeIn; 
    animation-timing-function: ease-in;
    animation-duration: 1s; /* Dauer der Fade-In-Animation */
    animation-fill-mode: forwards; /* Stellen Sie sicher, dass das Element nach Abschluss der Animation sichtbar bleibt */
    overflow: hidden;  /* Dies verhindert, dass das Bild oder der Schatten über die Grenzen des Thumbnails hinausgeht */
    border: 10px solid transparent; /* Fügt einen transparenten Rand hinzu, um das Layout nicht zu beeinflussen */
    transition: border-color 0.3s ease; /* Sanfte Übergangsanimation für die Randfarbe */
    transition: border-radius 0.3s ease;
    margin-bottom: -4px;
    margin-top: -1px;
}


.thumbnail img {
    max-width: 100%; 
    height: auto; 
    display: block;
    transition: transform 10s ease-in-out, filter 0.5s ease-in-out;  /* Hier wurde filter hinzugefügt */
    transform: scale(1);  /* Das Bild beginnt in seiner normalen Größe */
}



.thumbnail:hover img {
    transform: scale(1.3);  /* Wenn Sie mit der Maus über das Bild fahren, wird es um 10% vergrößert */
}

.thumbnail-title {
    margin-top: 4px;
    position: absolute;
    font-family: 'Urbanist', sans-serif;
    font-size: 14px;
    top: 10px;  /* Abstand von oben */
    left: 10px;  /* Abstand von links */
    right: 10px;
    background-color: rgba(0, 0, 0, 0.5);  /* Hintergrundfarbe mit Transparenz, damit der Text sichtbar ist */
    background: linear-gradient(0deg, rgba(30,33,38,0.5) 0%, rgba(29,34,38,0.5) 100%);
    border-bottom: 1px solid #2b2b2b;
    border-left: 1px solid #888888;
    border-right: 1px solid #4a4a4a;
    border-top: 1px solid #888888;
    color: white;  /* Textfarbe */
    z-index: 1;  /* Stellen Sie sicher, dass er sich über dem Bild befindet */
    opacity: 0; /* Setzt die Transparenz des Titels auf 0, sodass er unsichtbar ist */
    transform: translateY(-100%); /* Verschiebt den Titel nach oben, sodass er außerhalb des Thumbnails liegt */
    transition: opacity 0.2s ease, transform 0.3s ease; /* Übergangsanimationen für Transparenz und Verschiebung */
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.636); /* äußerer Schatten nach rechts unten */
    border-radius: 25px;
}

.thumbnail:hover .thumbnail-title {
    opacity: 1; /* Setzt die Transparenz des Titels beim Überfahren mit der Maus auf 1, sodass er sichtbar ist */
    transform: translateY(0); /* Setzt die Verschiebung des Titels beim Überfahren mit der Maus zurück auf den Standardwert */
}

.jahres-links a {
    margin-right: 10px;
    cursor: pointer;
}

    /* Einkaufswaagen Icon */
        .shop-link-btn {
            display: inline-block;
            width: 30px;
            height: 30px;
            position: absolute;
            bottom: 20px;  /* Abstand vom unteren Rand */
            left: 50%;  /* Zentrieren Sie das Icon horizontal */
            transform: translateX(-50%);  /* Dies verschiebt das Icon zur Hälfte seiner Breite nach links, um es perfekt zu zentrieren */
            cursor: pointer;
            transition: transform 0.3s ease; /* bereits vorhanden */
            z-index: 3; /* oberhalb des .caption-Elements */
        
        }

        .shop-link-btn:hover {
            transform: translateX(-50%) scale(2.2);  /* 1.2 ist der Zoom-Faktor. Sie können diesen Wert anpassen. */
        }

        .shop-link-btn svg {
            width: 100%;
            height: 100%;
            fill: rgb(255, 255, 255);
        }


/* Hover-Effekt: Bild hervorheben und andere abdunkeln */
.thumbnail {
    transition: opacity 0.5s;
}

.my-gallery:hover .thumbnail {
    opacity: 0.1;
}

.my-gallery .thumbnail:hover {
    opacity: 1;
}


.my-gallery {
    position: relative;  /* Damit das Overlay absolut positioniert wird */
}

/* Overlay-Stil */
.my-gallery .gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.1s;
}

.my-gallery:hover .gallery-overlay {
    opacity: 1;
}

.my-gallery:hover .thumbnail:not(:hover) img {
    filter: brightness(20%);
}

/* Beschreibung-Stil */
.pswp__custom-caption {
    font-family: 'Urbanist', sans-serif;
    /*  background: rgba(0, 0, 0, 0.4);
    text-shadow: 2px 2px 4px rgb(255, 255, 255),-2px -2px 5px rgb(255, 255, 255); */
    background: rgba(30,33,38, 0.8);
    background: linear-gradient(0deg, rgba(30,33,38,0.8) 0%, rgba(29,34,38,0.8) 100%);
    border-bottom: 1px solid #2b2b2b;
    border-left: 1px solid #888888;
    border-right: 1px solid #4a4a4a;
    border-top: 1px solid #888888;
    border-radius: 25px;
    font-size: 26px;
    color: #ffffff;
    position: absolute;
    left: 150px; bottom: 50px; right: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.636); /* äußerer Schatten nach rechts unten */
}
    .pswp__custom-caption a {
    color: #fff;
    text-decoration: underline;
    }
    
    .hidden-caption-content {
    display: none;
    }
    
    .pswp__button--shop-icon path {
        fill: white !important;
    }
    


/* THUMNAIL GALLERY <<<<<<<<<<<< */


/* Flashlight */
.flashlight {
    position: absolute;
    width: 300px;  /* Größere Größe für mehr Unsicherheit */
    height: 300px;
    background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 100%); /* Weiter reduzierte Opazität */
    mix-blend-mode: screen;
    pointer-events: none;
    display: none;
    border-radius: 50%; 
    z-index: 10; 
    filter: blur(30px);  /* Blur hinzugefügt für mehr Unsicherheit */
}