@font-face {
    font-family: "WaveFM_Font";
    src: url("./shapiro-95-super-extd.ttf");
}

body {
    background-color: #101010;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column; /* Änderung: Anordnung der Kinder in einer Spalte */
    height: 100vh;
    margin: 0;
    background-image: url(./media/backgroundpattern.png), linear-gradient(#101010, #101010);
    background-size: 146px;
}

::-moz-selection { /* Code for Firefox */
    color: rgb(255, 255, 255);
    background: rgba(0, 0, 0, 0.5);
  }
  
  ::selection {
    color: rgb(255, 255, 255);
    background: rgba(0, 0, 0, 0.5);
}

#favouritestar {
    color: #c7c7c761;
    scale: 0.7;
    top: 90px;
    right: 63px;
    position: fixed;
    z-index: 1;
    opacity: 0;
    transition: 0.5s;
}

#favouritestar:hover {
    cursor: pointer;
    text-shadow: 0 0 10px #f1cd2e9d, 0 0 20px #fdbb0688;
}

#favouritestarsortiment {
    color: #c7c7c761;
    scale: 1.5;
    z-index: 1;
    transition: all 0.5s ease 0s;
    float: right;
    top: 10px;
    right: 10px;
    position: relative;
}

#favouritestarsortiment:hover {
    cursor: pointer;
    text-shadow: 0 0 10px #f1cd2e9d, 0 0 20px #fdbb0688;
}


#radio-info {
    text-align: center;
    scale: 3;
    position: relative;
    top: 50px;
    width: 270px;
    transition: 2s;
}

#radio-name {
    font-size: 24px;
    color: #fff;
    text-transform: uppercase;
    font-family: system-ui;
    border-bottom: 1px solid #fff;
    padding-bottom: 0px;
    width: 270px;
    margin-top: 50px;
    transition: 2s;
}

#radio-logo {
    width: 150px;
    height: auto;
    margin-bottom: 20px; /* Abstand unter dem Logo */
    margin-top: -10px;
    border-radius: 15px;
    transition: 1s;
    pointer-events: none;
}

#radio-logo-background {
    width: 150px;
    height: 150px;
    margin-bottom: 20px;
    margin-top: -175px;
    border-radius: 15px;
    transition: 1s;
    pointer-events: none;
    filter: blur(20px);
    z-index: -1;
    position: fixed;
}

#prev-btn,
#next-btn {
    cursor: pointer;
    background: #000000c7;
    opacity: 0.7;
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 0px 40px;
    transition: background 0.3s ease;
}

#prev-btn:hover,
#next-btn:hover {
    background: #000000; /* Hintergrundfarbe der Buttons bei Hover */
    opacity: 1;
}

#prevnext_btns {
    scale: 3;
    position: relative;
    top: 55px;
    transition: 1s;
}

#radio-stream {
    display: none !important;
}

#volume-slider {
    scale: 3;
    width: 150px;
    height: 5px;
    max-height: 5px;
    -webkit-appearance: none;
    appearance: none;
    background: #000000a8;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
    border-radius: 5px;
    margin-top: 270px;
    overflow: hidden;
}

#volume-slider:hover {
    opacity: 1;
    background: #0000009d;
}

#volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 15px;
    height: 5px;
    background: #fff;
    cursor: pointer;
    border-radius: 5px;
    box-shadow: -80px 0px 0px 70px rgb(0, 0, 0);
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/2/21/Speaker_Icon.svg/500px-Speaker_Icon.svg.png?20190828181118');
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
}

#volume-slider::-moz-range-thumb {
    width: 15px;
    height: 5px;
    background: #fff;
    cursor: pointer;
    border-radius: 5px;
}


/* Füge die folgenden CSS-Stile hinzu */
#play-button-container {
    position: relative;
    display: inline-block;
    transition: 1s;
    height: 130px;
}

#play-button {
    position: absolute;
    top: 52%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    display: none;
    width: 40px;
    height: 40px;
    transition: 1s;
    z-index: 1;
}

#play-button-container:hover #radio-logo {
    filter: brightness(0.5); /* Dunkle das Logo beim Hover ein wenig ab */
    background-color: #00000075;
    transition: 1s;
}

#play-button-container:hover #play-button {
    display: block;
}

#play-button:hover {
    filter: brightness(0.5); /* Dunkle das Logo beim Hover ein wenig ab */
    transition: 1s;
}



/* Füge die Styles für die Vorschau-Container hinzu */
#prevnext-preview {
    display: flex;
    justify-content: space-between;
    width: 200px;
    margin: 0 auto;
    scale: 6;
    position: relative;
    top: -300px;
    z-index: -1;
    transition: 1s;
}

#prev-preview,
#next-preview {
    width: 50px; /* Passe die Breite der einzelnen Vorschau-Elemente an */
    height: 50px; /* Passe die Höhe der einzelnen Vorschau-Elemente an */
    background-size: cover;
    cursor: pointer;
    background-color: #0000004a;
    border-radius: 5px;
    opacity: 0.5;
}

#prev-preview {
    background-image: url("./media/defaultstationlogo.png"); /* Füge das Bild für die vorherige Station hinzu */
}

#next-preview {
    background-image: url("./media/defaultstationlogo.png"); /* Füge das Bild für die nächste Station hinzu */
}



.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to right top, #0b0b0b, #111113, #15161a, #181a20, #1b1f26, #1a2027, #192029, #18212a, #141e27, #111a24, #0d1722, #08131f);
    z-index: 9999;
    opacity: 1; /* volle Deckkraft */
    transition: opacity 1s ease-in-out; /* Übergangsanimation */
}

.overlay.hide {
    opacity: 0; /* transparent */
}

.overlayimg {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1); /* initial scale set to 1 */
    max-width: 50%;
    pointer-events: none;
    transition: transform 5s ease-in-out; /* Zoom-Animation für 3 Sekunden */
}

.overlay.hide .overlayimg {
    transform: translate(-50%, -50%) scale(50); /* final scale set to 1.5 when hiding */
}


#wavefmlogo {
    position: fixed;
    right: 10px;
    top: 10px;
    width: 150px;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    opacity: 0; /* Anfangs unsichtbar */
    transition: opacity 1s ease-in-out; /* Übergangsanimation für die Opacity-Eigenschaft */
}

#wavefmlogo.visible {
    opacity: 1; /* Sichtbar */
}

#clock {
    position: fixed;
    text-align: center;
    font-family: 'WaveFM_Font';
    font-size: 20px;
    background-clip: text;
    color: rgba(0,0,0,0);
    top: 14px;
    left: 10px;
    z-index: 1;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    width: 150px;
    pointer-events: none;
}

#clock.visible {
    opacity: 1; /* Sichtbar */
}

#clockbackground {
    background-color: #ffffff;
    display: flex;
    width: 150px;
    height: 21px;
    position: fixed;
    top: 11px;
    left: 10px;
    border: ridge;
    border-width: 0.5px;
    opacity: 0; /* Anfangs unsichtbar */
    transition: opacity 1s ease-in-out; /* Übergangsanimation für die Opacity-Eigenschaft */
}

#clockbackground.visible {
    opacity: 1; /* Sichtbar */
}

#logobackground {
    background-color: #ff0000;
    display: flex;
    width: 142px;
    height: 18px;
    position: fixed;
    top: 13px;
    right: 14px;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    z-index: -1;
}

#logobackground.visible {
    opacity: 1; /* Sichtbar */
}

#loading {
    width: 150px;
    height: 150px;
    position: fixed;
    animation: rotate 5s linear infinite;
    transform: translate(-50%, -50%);
    display: none;
    top: 92px;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

@keyframes rotate {
    from {
        transform: rotate(0deg); /* Startposition: kein Drehwinkel (0 Grad) */
    }
    to {
        transform: rotate(360deg); /* Endposition: volle Drehung (360 Grad) */
    }
}


#hide-overlay-btn {
    /* CSS-Stil für den "Hide Overlay" Button */
    position: fixed;
    bottom: 10px;
    right: 10px;
    padding: 10px;
    background-color: #00000025;
    color: #fff;
    border: rgb(34, 34, 34) solid 0.1px;
    border-radius: 5px;
    cursor: pointer;
    transition: 1s;
}





/* Mobile */
@media only screen and (max-width: 1205px) {
    #radio-info {
        scale: 3;
        width: 200px;
    }

    #radio-name {
        scale: 0.7;
        position: relative;
        right: 21.3%;
        width: 285px;
    }

    #play-button-container {
        scale: 0.6;
    }

    #volume-slider {
        scale: 2;
        margin-top: 220px;
    }

    #prevnext_btns {
        scale: 2;
        top: 30px;
    }

    #prevnext-preview {
        scale: 3;
        width: 200px;
        position: relative;
        top: -220px;
    }

    #loading {
        top: -5px;
    }

    #sortiment-overlay {
        width: 27% !important;
    }

    #favouritestar {
        color: #c7c7c761;
        scale: 0.7;
        top: 100px;
        right: 40px;
    }
}

@media only screen and (max-width: 605px) {
    #radio-info {
        scale: 1.7;
        width: 200px;
    }

    #radio-name {
        scale: 0.7;
        position: relative;
        right: 21.3%;
        width: 285px;
    }

    #play-button-container {
        scale: 0.6;
    }

    #volume-slider {
        scale: 2;
        margin-top: 130px;
    }

    #prevnext_btns {
        scale: 2;
        top: 30px;
    }

    #prevnext-preview {
        scale: 2;
        width: 180px;
        position: relative;
        top: -200px;
    }

    #loading {
        top: -5px;
    }

    #sortiment-overlay {
        width: 50% !important;
    }

    #favouritestar {
        color: #c7c7c761;
        scale: 1;
        top: 100px;
        right: 40px;
    }
}

@media only screen and (max-width: 700px) {
    #radioContainerDiv {
        font-size: 14px;
    }
}

@media only screen and (max-width: 365px) {
    #radio-info {
        scale: 1.4;
        width: 200px;
        top: 100px;
    }

    #radio-name {
        scale: 0.7;
        margin-bottom: -15px;
        position: relative;
        right: 21.3%;
        width: 285px;
        top: -25px;
    }

    #play-button-container {
        scale: 0.6;
    }

    #volume-slider {
        scale: 2;
        margin-top: 120px;
    }

    #prevnext_btns {
        scale: 2;
        top: 30px;
    }

    #prev-btn {
        padding: 0px 33px;
    }

    #next-btn {
        padding: 0px 33px;
    }

    #prevnext-preview {
        scale: 1.7;
        width: 180px;
        position: relative;
        top: -165px;
    }

    #loading {
        top: -5px;
    }

    #sortiment-overlay-container {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        max-height: 100%;
        overflow-y: auto;
        justify-content: space-between;
        margin-top: 0px;
    }

    #sortiment-overlay {
        width: 75% !important;
    }

    #favouritestar {
        color: #c7c7c761;
        scale: 1.2;
        top: 65px;
        right: 35px;
    }
}









#sortiment-overlay {
    position: fixed;
    top: 50%;
    right: 0;
    transform: translate(0%, -50%);
    width: 20%;
    height: 100%;
    background: #141414;
    display: none;
    justify-content: center;
    align-items: center;
    border-bottom-left-radius: 20px;
    border-top-left-radius: 20px;
    z-index: 2;
    filter: drop-shadow(2px 4px 6px black);
    overflow: hidden;
    transition: 1s;
}

#sortiment-overlay-container {
    display: flex;
    width: 100%;
    max-height: 100%;
    overflow-y: auto;
    justify-content: space-between;
    flex-direction: column;
    transition: 1s;
    flex-wrap: nowrap;
}

#sortiment-overlay-btn {
    position: fixed;
    bottom: 10px;
    right: 55px;
    padding: 10px 12px;
    background-color: #00000025;
    color: #fff;
    border: rgb(34, 34, 34) solid 0.1px;
    border-radius: 5px;
    cursor: pointer;
    transition: 1s;
    z-index: 2;
}

#sortiment-overlay-container::-webkit-scrollbar {
    width: 8px;
}

#sortiment-overlay-container::-webkit-scrollbar-thumb {
    background-color: #424242;
    border-radius: 45px;
    transition: 0.5s;
    cursor: pointer;
}

#sortiment-overlay-container::-webkit-scrollbar-thumb:hover {
    background-color: #222222;
    border-radius: 45px;
    transition: 0.5s;
}

#sortiment-overlay-container::-webkit-scrollbar-track {
    background-color: #2b2b2b;
}

#sortimentTitle {
    font-family: 'system-ui';
    font-weight: 700;
    position: relative;
    color: white;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
    background-color: #2d2d2d;

    border-bottom: 1px solid white;
}


.radio-container {
    flex-basis: calc(33.33% - 20px);
    margin: 8px;
    text-align: center;
    cursor: pointer;
    color: #fff;
    text-decoration: none;
    transition: 0.5s;
    border-radius: 20px;
    border: 0.1px solid #0e0e0e;
    background-color: #060606;
}

.radio-container img {
    max-width: 50%;
    height: auto;
    border-radius: 10px;
    margin-bottom: 5px;
    position: relative;
    left: 10px;
}

.radio-container:hover {
    filter: opacity(0.7);
    transition: 0.5s;

}

#radioContainerDiv {
    font-family: 'system-ui';
    font-weight: 700;
    top: -10px;
    position: relative;
}

#sortiment-overlay-background {
    z-index: 1;
    background-color: #000000ad;
    width: 100%;
    height: 100%;
    position: absolute;
    pointer-events: none;
    cursor: pointer;
    filter: blur(200px);
    opacity: 0;
    transition: 1s;
}