@charset "utf-8";
/* FILTER COLLECTION */

.active {
    opacity: 1;
    z-index: 2;
    position: relative;
}

.blurry {
    filter: blur(50px); /* Fügt eine Unschärfe von 50px hinzu */
}

.contrast {
    filter: contrast(400%); /* Erhöht den Kontrast um das Vierfache */
}

.saturate {
    filter: saturate(200%); /* Erhöht die Sättigung um das Doppelte */
}

.hue-rotate {
    filter: hue-rotate(90deg); /* Dreht den Farbton um 90 Grad */
}

.drop-shadow {
    filter: drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.4)); /* Schatten mit x- und y-Verschiebung */
}

.brightness {
    filter: brightness(150%); /* Erhöht die Helligkeit um 50% */
}

.sepia {
    filter: sepia(100%); /* Erzeugt einen vollständigen Sepia-Effekt */
}

.grayscale {
    filter: grayscale(100%); /* Macht das Bild vollständig grau */
}

.invert {
    filter: invert(1) brightness(0.5); /* Invertiert Farben und reduziert Helligkeit */
}

.blurred-sides {
    background: #000;
    position: relative;
    display: inline-block;
    mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0) 100%);
    -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0) 100%);
}

.transparent-sides-bg {
    position: relative;
    display: inline-block;
    background-color: #000; /* Hintergrundfarbe für die transparenten Seiten */
    mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0) 100%);
    -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0) 100%);
}
.transparent-sides-bg img {
    display: block;
    width: 100%;
    height: auto;
}

/* BLUR COMBINATIONS */

.img-comb-00, .img-comb-01, .img-comb-03 {
    transition: filter 1s ease; /* Weicher Übergang des Filtereffekts */
}

.img-comb-00 {
    filter: blur(10px) brightness(1.5) contrast(2);
}

.img-comb-00:hover {
    filter: blur(0) brightness(1) contrast(1);
}

.img-comb-01 {
    filter: blur(20px) brightness(1.5) contrast(3) invert(1);
}

.img-comb-01:hover {
    filter: blur(0) brightness(1) contrast(1);
}

.img-comb-02 {
    filter: blur(20px) brightness(1.5) contrast(3);
    animation: filterOut 2s ease forwards; /* Animation zum Ausblenden des Filters */
}

.img-comb-03 {
    filter: blur(40px) brightness(2) contrast(3);
    animation: filterOut 3s ease forwards; /* Animation zum Ausblenden des Filters */
}

@keyframes filterOut {
    0% {
        filter: blur(20px) brightness(1.5) contrast(3); /* Anfangsfilter */
    }
    100% {
        filter: blur(0) brightness(1) contrast(1); /* Endfilter */
    }
}

.img-comb-03 {
    filter: blur(20px) brightness(1.5) contrast(3);
}

.img-comb-03:hover {
    filter: blur(0) brightness(1) contrast(1);
}

/* BLUR VARIANTS */

.blurry-01 {
    filter: blur(50px); /* Fügt einen Unschärfeeffekt von 50px hinzu */
}

.blurry-01:hover {
    filter: blur(0) brightness(1) contrast(1);
}

.blurry-02 {
    filter: blur(6px); /* Blur am Anfang */
    transition: filter 1s ease; /* Weicher Übergang des Filtereffekts */
}

.blurry-02:hover {
    filter: blur(0); /* Beim Hover wird der Blur-Effekt deaktiviert */
}

.blurry-03 {
    filter: blur(0px); /* Kein Blur am Anfang */
    transition: filter 1s ease; /* Weicher Übergang des Filtereffekts */
}

.blurry-03:hover {
    filter: blur(30px); /* Beim Hover wird der Blur-Effekt aktiviert */
}
