/**
 * Moderatoren Background Styling
 * Gekachelter DIN-Format Hintergrund
 */

.moderators-bg-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
    opacity: 0.15;
}

.moderator-bg-tile {
    position: absolute;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: grayscale(50%);
    transition: opacity 0.5s ease;
    opacity: 0.9;
}

.moderator-bg-tile.fade-in {
    animation: bgFadeIn 0.5s ease forwards;
}

.moderator-bg-tile.fade-out {
    animation: bgFadeOut 0.5s ease forwards;
}

@keyframes bgFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 0.8;
    }
}

@keyframes bgFadeOut {
    from {
        opacity: 0.8;
    }
    to {
        opacity: 0;
    }
}