section.teaserContainer {
    padding-inline: 90px;
    padding-left: 90px;
    padding-right: 90px;

    padding-block: 90px;
    padding-top: 90px;
    padding-bottom: 90px;

    align-items: center;
    justify-content: center;

    min-height: 100vh;
    min-height: 100dvh;

    background-color: transparent;
}

    section.teaserContainer .audioMute {
        position: fixed;
        bottom: 25px;
        right: 25px;
        z-index: 9999;
        cursor: pointer;
        transition: 0.3s;

        width: 35px;
        height: 35px;

        -webkit-appearance: none;

           -moz-appearance: none;

                appearance: none;
        background-color: transparent;
        border: none;

        opacity: 0.7;

        /* &:hover {
            transform: scale(1.1);
            opacity: 1;

            &[muted="true"] {
                img.unmute {
                    display: none;
                }
            }
            &[muted="false"] {
                img.mute {
                    display: none;
                }
            }
        }

        &:not(:hover) {
            &[muted="true"] {
                img.mute {
                    display: none;
                }
            }
            &[muted="false"] {
                img.unmute {
                    display: none;
                }
            }
        } */
    }

    section.teaserContainer .audioMute img {
            width: 100%;
            height: 100%;
            -o-object-fit: contain;
               object-fit: contain;
        }

    section.teaserContainer .audioMute:is(:hover, :focus) {
            transform: scale(1.1);
            opacity: 1;
        }

    section.teaserContainer .audioMute[muted="true"] img.mute {
                display: none;
            }

    section.teaserContainer .audioMute[muted="false"] img.unmute {
                display: none;
            }

    section.teaserContainer:has(.UIContainer[videoTeaserShown]) .audioMute {
        display: none;
    }

    section.teaserContainer .UIContainer {
        display: flex;
        padding: 25px;
        box-sizing: border-box;
        gap: 30px;

        justify-content: space-around;
        align-items: center;
        flex-direction: column;

        border-radius: 25px;
        -webkit-backdrop-filter: blur(15px);
                backdrop-filter: blur(15px);
        box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.2);
        border: solid 1.5px rgb(41 152 219 / 12%);
        
        top: 350px;
        z-index: 999;
    }

    section.teaserContainer .UIContainer[videoTeaserShown] .UILogo {
                width: 5vw;
                min-width: 150px;
                height: auto;
                -o-object-fit: contain;
                   object-fit: contain;

                animation: none;
            }

    section.teaserContainer .UIContainer[videoTeaserShown] .textTeaser {
                display: none;
            }

    section.teaserContainer .UIContainer .UILogo {
            width: 20vw;
            min-width: 150px;
            height: auto;
            -o-object-fit: contain;
               object-fit: contain;

            animation: heartbeat 2s ease-in-out infinite both;

            transition: 0.3s;
        }

    section.teaserContainer .UIContainer .timerContainer {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 20px;
        }

    section.teaserContainer .UIContainer .timerContainer[glitched] {
                animation: glitch-effect 2.3s linear infinite !important;
            }

    /*&:before,
                &:after {
                    display: block;
                    content: attr(data-time);
                    position: absolute;
                    top: 0;*/

    section.teaserContainer .UIContainer .timerContainer[glitched] .timerCell {
                    transform: skewX(0deg) scaleY(1);
                    animation: glitching 2s linear infinite;
                }

    section.teaserContainer .UIContainer .timerContainer[glitched] .glitch-sample {
                    transform: scale(2.7);
                }

    section.teaserContainer .UIContainer .timerContainer .glitch-sample {
                position: absolute;
                width: 89%;
                opacity: 0.78;
                mix-blend-mode: overlay;
            }

    section.teaserContainer .UIContainer .timerContainer iframe {
                border-radius: 15px;

                width: 38vw;
                /* height: auto; */
                aspect-ratio: 16 / 9;

                filter: drop-shadow(0px 0px 15px rgba(0, 0, 0, 0.5));
                background-color: black;

                animation: scaleIn 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
            }

    section.teaserContainer .UIContainer .timerContainer .timerCell {
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;

                background-color: rgba(255, 255, 255, 0.08);
                border-radius: 10px;
                padding: 15px;
                width: 70px;
            }

    section.teaserContainer .UIContainer .timerContainer .timerCell .value {
                    display: block;
                    font-weight: 500;
                    font-size: 2.1875rem;
                    color: var(--openiera-color-main-second);
                }

    section.teaserContainer .UIContainer .timerContainer .timerCell .text {
                    font-size: 0.9375rem;
                    font-variant: petite-caps;
                }

    section.teaserContainer .UIContainer .textTeaser {
            text-align: center;
        }

    section.teaserContainer .UIContainer div.socialNetworks {
            display: flex;
            flex-direction: row;
            gap: 2vw;
            justify-content: center;
            align-items: center;
        }

    section.teaserContainer .UIContainer div.socialNetworks .social {
                height: 4vw;
                min-height: 20px;

                transition: 0.3s;
            }

    section.teaserContainer .UIContainer div.socialNetworks .social:is(a:focus *, :hover, :focus) {
                    transform: scale(1.1);
                }

    section.teaserContainer .copyright {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        margin-inline: auto;
        margin-left: auto;
        margin-right: auto;
        width: 90%;
        /* width: fit-content; */
        text-align: center;
        opacity: 0.7;
    }

@media (max-width: 68.75rem) {
            section.teaserContainer .UIContainer .timerContainer {
                gap: 10px;
            }
                                
                section.teaserContainer .UIContainer .timerContainer .timerCell {
                    padding: 12px;
                    width: 50px;
                }
                    
                    section.teaserContainer .UIContainer .timerContainer .timerCell .value {
                        font-size: 2rem;
                    }

                    section.teaserContainer .UIContainer .timerContainer .timerCell .text {
                        font-size: 0.875rem;
                    }

                section.teaserContainer .UIContainer .timerContainer iframe {
                    width: 65vw;
                }
}

@media (max-width: 54.375rem) {
        section.teaserContainer .audioMute {
            bottom: initial;
            top: 50px;
        }
}

@media (max-width: 34.375rem) {
    section.teaserContainer {
        padding-inline: 25px;
        padding-left: 25px;
        padding-right: 25px;

        padding-block: 25px;
        padding-top: 25px;
        padding-bottom: 25px;
    }
                section.teaserContainer .UIContainer .timerContainer iframe {
                    width: 75vw;
                }

        section.teaserContainer .copyright {
            font-size: 1.125rem;
        }
}

@media (max-width: 24.375rem) {
    section.teaserContainer {
        padding-inline: 15px;
        padding-left: 15px;
        padding-right: 15px;

        padding-block: 15px;
        padding-top: 15px;
        padding-bottom: 15px;
    }
            section.teaserContainer .UIContainer .timerContainer {
                gap: 8px;
            }
                                
                section.teaserContainer .UIContainer .timerContainer .timerCell {
                    padding: 10px;
                    width: 40px;
                }
                    
                    section.teaserContainer .UIContainer .timerContainer .timerCell .value {
                        font-size: 1.875rem;
                    }

                    section.teaserContainer .UIContainer .timerContainer .timerCell .text {
                        font-size: 0.75rem;
                    }

            section.teaserContainer .UIContainer .textTeaser {
                font-size: 1.125rem;
            }
}





/* animations */

@keyframes glitching {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 1;
    }
    56% {
        opacity: 0;
    }
    57% {
        opacity: 0;
    }
    58% {
        opacity: 1;
    }
    71% {
        transform: scaleY(1) skewX(0deg);
    }
    72% {
        transform: scaleY(3) skewX(-60deg);
    }
    73% {
        transform: scaleY(1) skewX(0deg);
    }
    80% {
        opacity: 1;
    }
    81% {
        opacity: 0;
    }
    84% {
        opacity: 0;
    }
    85% {
        opacity: 1;
    }
    91% {
        transform: scaleX(1) scaleY(1) skewX(0deg);
        color: white;
    }
    92% {
        transform: scaleX(1.5) scaleY(.2) skewX(80deg);
        color: green;
    }
    93% {
        transform: scaleX(1) scaleY(1) skewX(0deg);
        color: white;
    }
}

@keyframes glitch-effect {
    1% {
        transform: scaleY(1) skewX(0deg) translate(3px, 5px);
    }
    1.5% {
        transform: scaleY(3) skewX(-60deg) translate(6px, 3px);
    }
    2% {
        transform: scaleY(1) skewX(0deg) translate(5px, 4px);
    }
    51% {
        transform: scaleX(1) scaleY(1) skewX(0deg) translate(4px, 8px);
        clip: rect(120px, 9999px, 20px, 0);
    }
    52% {
        transform: scaleX(1.5) scaleY(.2) skewX(80deg) translate(8px, 6px);
    }
    53% {
        transform: scaleX(1) scaleY(1) skewX(0deg) translate(6px, 3px);
    }
}