/* --- SCHRIFTART --- */
@font-face { 
    font-family: 'Single Sleeve Regular'; 
    src: local('Single Sleeve Regular'), url(sing_14l.woff) format('woff'); 
}

/* --- RESET & BASIS --- */
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
}

body, html { 
    width: 100%; 
    height: 100%; 
    overflow: hidden; 
    background-color: #000; 
    font-family: 'Single Sleeve Regular', Arial, sans-serif; 
}

/* --- DESKTOP LOOK (ORIGINAL) --- */
body {
    background: url("Gifs/Musicback2.jpg") no-repeat center center fixed;
    background-size: cover;
}

/* Musik-Videos auf Desktop: Füllen den ganzen Bildschirm */
video:not(#bg-video-mobile) {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; 
    display: none;
    z-index: 50; 
}

video.active {
    display: block !important;
}

.desktop-balken {
    position: fixed;
    left: 0;
    width: 100%;
    height: 12%;
    background: #000;
    z-index: 80;
}
.balken-oben { top: 0; }
.balken-unten { bottom: 0; height: 15%; }

#bg-video-mobile { 
    display: none; 
}

/* Desktop-Buttons Styling */
#desktop-buttons button, #Pfeil3 {
    position: fixed; 
    top: 88%; 
    height: 11%; 
    z-index: 100;
    background: transparent; 
    border: 0; 
    cursor: pointer;
    transition: transform 0.3s ease-in-out;
}

#desktop-buttons button:hover, #Pfeil3:hover {
    transform: scale(1.15);
}

/* Desktop Button Positionen */
#Ghost2 { left: 3%; width: 8%; }
#Cat2 { left: 12%; width: 7%; }
#Stcb { left: 20%; width: 6%; }
#Wet { left: 27%; width: 8%; }
#Pfeil3 { left: 37%; width: 28%; }
#Moon { left: 67%; width: 9%; }
#Crack { left: 77%; width: 9%; }
#Montego { left: 87%; width: 9%; }

#desktop-buttons img { 
    width: 100%; 
    height: 100%; 
    object-fit: contain; 
}

#mobile-menu { 
    display: none; 
}

/* --- SMARTPHONE LOOK (Portrait) --- */
@media screen and (max-width: 768px) and (orientation: portrait) {
    
    body { 
        background-image: none !important; 
        background-color: #000 !important;
    }
    
    .desktop-balken { display: none; }
    #desktop-buttons { display: none !important; }

    /* Hintergrund-Video: Fest oben im 9:16 Format */
    #bg-video-mobile {
        display: block !important;
        position: fixed;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100vw;
        height: auto;
        aspect-ratio: 9 / 16;
        z-index: 1;
        object-fit: contain;
    }

    /* Musik-Videos auf Mobile: Exakt so groß wie das Hintergrund-Video */
    video:not(#bg-video-mobile).active {
        display: block !important;
        position: fixed;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100vw; /* Begrenzt auf Bildschirmbreite */
        height: auto;
        aspect-ratio: 9 / 16;
        z-index: 10; /* Über dem BG-Video */
        object-fit: contain;
        background: transparent;
    }

    /* Mobile Menü: Bleibt unten am Rand */
    #mobile-menu {
        display: flex !important;
        position: fixed; 
        bottom: 3px !important; 
        left: 0; 
        width: 100%;
        flex-direction: column; 
        align-items: center; 
        z-index: 200; 
    }

    .m-group-bottom { 
        width: 100%; 
        display: flex; 
        flex-direction: column; 
        gap: 15px; 
        padding: 13px; 
        align-items: center;
    }

    .m-row { 
        display: flex; 
        justify-content: center; 
        gap: 15px; 
        width: 100%; 
    }

    .m-btn { 
        background: transparent !important; 
        color: #aaa; 
        border: 1px solid rgba(255, 255, 255, 0.4); 
        width: 46%; 
        height: 34px; 
        font-size: 22px; 
        letter-spacing: 1px;
        text-transform: uppercase; 
        border-radius: 50px; 
        display: flex; 
        align-items: center; 
        justify-content: center;
        font-family: inherit; 
        cursor: pointer; 
        text-decoration: none;
        transition: transform 0.2s ease, background 0.3s;
    }

    .m-btn:active, .m-btn:hover {
        transform: scale(1.05);
        background: rgba(255, 255, 255, 0.1);
        color: #fff;
    }

    /* Sonderfarbe für ZURÜCK Button */
    .m-btn[style*="color: #ff3333"] {
        border-color: #8B0000 !important;
    }
}