/* 
 * ####################################################################
 * 
 * Moving Background
 * 
 * ####################################################################
 */

.top {
    position: absolute;
    max-height: 80rem;
    max-width: 80rem;
    height: 100%;
    width: 100%;
    border-radius: 50%;

    opacity: 0.04;
    background: var(--blau);
    filter: blur(60px);
    /* animation: bottom 40s infinite; */
    top: -22%;
    right: -40%;
}

[data-theme="dark"] .top {
    opacity: 0.2;
}

@keyframes bottom {

    0%,
    100% {
        top: -10rem;
    }

    80% {
        top: 50rem;
    }
}

.bottom {
    position: absolute;
    max-height: 80rem;
    max-width: 80rem;
    height: 100%;
    width: 100%;
    right: 0;
    border-radius: 50%;
    opacity: 0.15;
    background: #1d936c;
    filter: blur(16rem);
    /* animation: bottom 70s infinite; */
    right: -20%;
}

[data-theme="dark"] .bottom {
    background: #1d936c;
    opacity: 0.2;
}

@keyframes top {

    0%,
    100% {
        bottom: -10rem;
        max-height: 100rem;
        max-width: 100rem;
    }

    80% {
        bottom: 50rem;
        max-height: 40rem;
        max-width: 40rem;
    }
}

.left {
    position: absolute;
    max-height: 60rem;
    max-width: 66rem;
    height: 100%;
    width: 100%;
    left: 0;
    border-radius: 50%;
    opacity: 0.15;
    background: var(--gelb);
    filter: blur(6rem);
    /* animation: left 80s infinite; */
    top: -10%;
    left: -18%;
}

[data-theme="dark"] .left {
    background: rgb(219, 159, 47);
    opacity: 0.1;
}

@keyframes left {

    0%,
    100% {
        left: -10rem;
    }

    80% {
        left: 80rem;
    }
}

.right {
    position: absolute;
    max-height: 200rem;
    max-width: 200rem;
    height: 100%;
    width: 100%;
    right: 0;
    border-radius: 50%;
    opacity: 0.07;
    background: var(--gelb);

    filter: blur(30px);
    /* animation: right 60s infinite; */
    bottom: -40%;
}

[data-theme="dark"] .right {
    background: rgb(113, 30, 30);
    opacity: 0.08;
}

@keyframes right {

    0%,
    100% {
        right: -10rem;
    }

    80% {
        right: 80rem;
    }
}

.bg-animation {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 110%;
    /* height: 100vh; */
    width: 100%;
    z-index: -1;
    overflow: hidden;
    opacity: 0%;
    transition: opacity 3s ease;
}



.set-opacity-100 {
    opacity: 100% !important;
    transition: opacity 3s ease;
}

/* 
 * ####################################################################
 * 
 * Strahlen Overlay
 * 
 * ####################################################################
 */

.strahlen-overlay {
    position: fixed;
    z-index: -2;
    left: 2px;
    right: 0;
    bottom: 0;
    height: 50vh;
    transform: scale(1.125) translate3d(0, 0, 0);

    /* transform: rotate(12deg); */

    user-select: none;
    /* Standard*/
    -webkit-user-select: none;
    /* Safari/Chrome*/
    -ms-user-select: none;
    /* ältere Edge*/
    -moz-user-select: none;
    /* Firefox*/
    touch-action: manipulation;
    /* Verhindert Doppeltippen*/
}

.strahlen-overlay svg {
    position: absolute;
    bottom: 0;
    width: 100vw;
    height: auto;
}

.strahlen-overlay svg path {
    fill: rgba(67, 36, 9, 0.1) !important;
}

[data-theme="dark"] .strahlen-overlay svg path {
    fill: rgba(67, 36, 9, 0.08) !important;
    fill: rgba(255, 215, 5, 0.66) !important;

}

@media screen and (max-width: 576px) {
    .strahlen-overlay {
        position: fixed;
        z-index: -2;
        left: 60px;
        right: 60%;
        bottom: 48%;
        height: 50vh;
        /* transform: rotate(15deg); */
        transform: scale(3);

        user-select: none;
        /* Standard*/
        -webkit-user-select: none;
        /* Safari/Chrome*/
        -ms-user-select: none;
        /* ältere Edge*/
        -moz-user-select: none;
        /* Firefox*/
        touch-action: manipulation;
        /* Verhindert Doppeltippen*/
    }

    [data-theme="dark"] .strahlen-overlay svg path {
        /* fill: rgba(67, 36, 9, 0.3) !important; */
        fill: rgba(255, 215, 5, 0.66) !important;

    }

    .strahlen-overlay svg path {
        fill: rgba(67, 36, 9, 0.2) !important;
    }
}

/* 
 * ####################################################################
 * 
 * Performance Bremse für Mobil abmildern
 * Später am besten einen Weiche, zwischen ios und Android ;)
 * 
 * ####################################################################
 */
@media (max-width: 768px) {
    * {
        backdrop-filter: none !important;
    }

    .mess-box-wrapper,
    #b-bar,
    #neuer-chat,
    .pc-sidebar-invisible-background {
        backdrop-filter: blur(0.15rem) !important;
        -webkit-backdrop-filter: blur(0.15rem) !important;
    }

    .mess-box-wrapper .mess-box-wrapper {
        backdrop-filter: none !important;
    }

    .bg-animation {
        display: none;
    }
}