/* ==================================================
   SOUNDBRIDGE – TAGESZEIT-HEADER
   DATEI: time-header.css
   KORRIGIERTE VERSION
================================================== */

html,
body {
    min-height: 100%;
}

html {
    background: #000;
}

body {
    position: relative;
    isolation: isolate;
    margin: 0;
    background: transparent !important;
}


/* ==================================================
   HINTERGRUND-EBENE
================================================== */

#timeHeaderBackground {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background-color: #000;
}


/* ==================================================
   UEBERBLEND-EBENEN
================================================== */

#timeHeaderBackground .time-header-layer {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: transparent;

    opacity: 0;
    transition: opacity 2.5s ease;

    will-change: opacity;
    backface-visibility: hidden;
    transform: translateZ(0);
}

#timeHeaderBackground .time-header-layer.is-visible {
    opacity: 1;
}


/* ==================================================
   THEME-EFFEKT-EBENE
================================================== */

#seasonEffectsLayer {
    position: fixed;
    inset: 0;
    z-index: 20;
    overflow: hidden;
    pointer-events: none;
    background: transparent;
}


/* ==================================================
   SEITENINHALTE
================================================== */

.hero,
.footer,
#content,
.content-wrapper,
.content-box,
.dashboard-box,
.profile-box,
.admin-box,
.modi-box {
    position: relative;
    z-index: 30;
}

/*
 * WICHTIG:
 * Keine position-Angabe fuer Navbar und Player.
 * Sonst wird deren vorhandene feste Positionierung
 * ueberschrieben.
 */
.navbar {
    z-index: 1000;
}

.radio-widget {
    z-index: 900;
}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 768px) {

    #timeHeaderBackground .time-header-layer {
        background-position: center top;
        background-size: cover;
    }
}


/* ==================================================
   REDUZIERTE BEWEGUNG
================================================== */

@media (prefers-reduced-motion: reduce) {

    #timeHeaderBackground .time-header-layer {
        transition: none !important;
    }
}