:root {
    --player-bg: rgba(0, 0, 0, 0.65);
    --player-blur: blur(12px);
    --progress: 0%; /* Wird vom JS gesteuert */
}
     
body, html {
    margin: 0;
    padding: 0;
    min-height: 100%;
    background-color: #000;
    color: white;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* =====================================================
   BACKGROUND (Mobilfreundlich ohne z-index: -1)
===================================================== */
.background-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-image: url('/img/PLD_bg.jpg'); 
    background-size: cover; 
    background-position: center center;
    background-repeat: no-repeat;
}

/* Haupt-Content-Wrapper - Schiebt sich über den Hintergrund */
.main-content {
    position: relative;
    z-index: 5; 
    background: transparent !important; 
}

.radiosender {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; }


/* =====================================================
   NAVIGATION
===================================================== */
.navbar {
    background: transparent !important;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
}

#menuLinks {
    background-color: rgba(0, 0, 0, 0.9);
    padding: 1rem;
    border-radius: 0.25rem;
}

/* =====================================================
   PLAYER STRUCT (Standard / Desktop)
===================================================== */
.player-container {
    position: fixed;
    top: 62vh; 
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 550px;
    z-index: 10;
    transition: all 0.3s ease;
}

.player-card.stage {
    background: var(--player-bg);
    backdrop-filter: var(--player-blur);
    -webkit-backdrop-filter: var(--player-blur);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    padding: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
}

.cover-container {
    position: relative;
    flex: 1;
    max-width: 200px;
    aspect-ratio: 1/1;
    overflow: hidden;
    border-radius: 12px;
}

.cover-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Standard-Overlay für Desktop */
.overlay-text {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.6);
    padding: 8px;
    text-align: center;
}

.controls-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    justify-content: center;
}

/* ZEITRING */
.progress-circle {
    width: 70px; 
    height: 70px;
    border-radius: 50%;
    position: relative;
    background: rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 15px 2px rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
}

.progress-circle::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    border-radius: 50%;
    background: conic-gradient(#007bff var(--progress, 0%), transparent var(--progress, 0%) 100%);
    mask: radial-gradient(circle at center, transparent 26px, #000 27px);
    -webkit-mask: radial-gradient(circle at center, transparent 26px, #000 27px);
    z-index: 1;
}

.progress-circle::after {
    content: "";
    position: absolute;
    width: 54px; height: 54px;
    background: #111;
    border-radius: 50%;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

.progress-circle-value { position: relative; z-index: 3; }
.timeRemaining { font-size: 0.85rem; font-weight: bold; color: #fff; font-variant-numeric: tabular-nums; }

/* PLAY BUTTON */
#playPauseBtn {
    width: 75px; height: 75px;
    border-radius: 50%;
    background: linear-gradient(to top, #0056b3, #007bff);
    display: flex; align-items: center; justify-content: center;
    border: none; cursor: pointer;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 0 12px 2px rgba(255, 255, 255, 0.3);
}

.start-btn i, .pause-btn i { font-size: 2.8rem; color: white; }
.artist { font-size: 0.9rem; margin: 0; font-weight: bold; }
.title { font-size: 0.75rem; margin: 3px 0 0 0; opacity: 0.9; }


/* Modal */

.modal-content { background-color: #080707;}

/* =====================================================
   A) BREAKPOINT: MOBILE PORTRAIT (Feintuning anhand Screenshot 1)
===================================================== */
@media screen and (max-width: 768px) and (orientation: portrait) {
    
    .background-container {
        height: 100vh;
        /* Verhindert das harte Abschneiden links/rechts: Grafik passt sich exakt der Displaybreite an */
        background-size: 100% auto;
        background-position: center top;
        background-color: #000;
    }

    .player-container {
        position: relative;
        top: 0; left: 0;
        transform: none;
        width: 92%;
        /* Drückt den Player unter die kritische Mitte der Grafik (Schutz des Logos) */
        margin: 38vh auto 30px auto; 
    }

    .player-card.stage {
        flex-direction: column; 
        text-align: center;
        padding: 20px;
    }

    .cover-container {
        max-width: 220px;
        width: 100%;
    }
    
    .overlay-text {
        background: rgba(0, 0, 0, 0.75); /* Auf Mobilgeräten etwas lesbarer */
    }

    .controls-container {
        flex-direction: row; 
        gap: 40px;
        margin-top: 15px;
    }
}


/* =====================================================
   FIX: SMARTPHONES IM QUERFORMAT (Landscape)
===================================================== */
@media screen and (min-width: 480px) and (max-width: 932px) and (orientation: landscape) {

    /* Hintergrund-Eigenschaften beibehalten */
    .background-container {
        height: 100vh !important;
        background-size: cover !important;
        background-position: center center !important;
    }

    /* Player-Container fixiert am unteren Rand positionieren */
    .player-container {
        position: fixed !important;
        top: auto !important;
        bottom: 12px !important; 
        left: 50% !important;
        transform: translateX(-50%) scale(0.85) !important;
        transform-origin: bottom center !important;
        width: 95% !important;
        max-width: 650px !important;
        height: auto !important;
        display: flex !important;
        justify-content: center !important;
        z-index: 10 !important;
    }

    /* 1. Die gesamte Player-Karte wird zur flexiblen Zeile */
    .player-card.stage {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        min-width: 480px;
        padding: 10px 15px !important;
        height: 110px !important; /* Überschreibt die alten 30px / 300px Limits */
        max-height: 110px !important;
        gap: 15px !important;
        background: rgba(0, 0, 0, 0.65) !important;
    }

    /* 2. Der Cover-Container wird geweitet, damit Bild UND Text nebeneinander passen! */
    .cover-container {
        display: flex !important;
        flex-direction: row !important; /* Bild und Text nebeneinander */
        align-items: center !important;
        flex: 2 !important; /* Nimmt sich den Hauptplatz in der Mitte */
        max-width: 60% !important; /* Schützt vor Überlappung mit den Controls */
        height: 90px !important;
        max-height: 90px !important;
        overflow: visible !important; /* Wichtig: Text darf jetzt rechts herausragen */
        gap: 12px !important;
        margin-left: 0 !important; /* Setzt eventuelle Mobil-Paddings zurück */
    }

    /* Das eigentliche quadratische Cover-Bild */
    .cover-container img {
        width: 90px !important;
        height: 90px !important;
        max-height: 90px !important;
        object-fit: cover !important;
        border-radius: 8px !important;
        flex-shrink: 0 !important; /* Verhindert Stauchung */
        opacity: 1 !important;
    }

    /* 3. TEXT-RETTUNG: Wandert aus dem Cover heraus nach rechts in die Lücke */
    .overlay-text {
        position: relative !important; /* Löst die Box vom Cover-Boden */
        bottom: auto !important;
        left: auto !important;
        width: auto !important;
        max-width: 100% !important;
        background: transparent !important; /* Dunkler Kasten weg */
        padding: 0 !important;
        text-align: left !important; /* Schön linksbündig neben dem Bild */
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }

    /* Text-Styling für exzellente Lesbarkeit vor dem Studio-Hintergrund */
    .artist {
        font-size: 0.95rem !important;
        font-weight: bold !important;
        color: #ffffff !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important; /* Schneidet bei langen Namen mit ... ab */
        text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.9) !important;
        margin: 0 !important;
    }

    .title {
        font-size: 0.8rem !important;
        color: rgba(255, 255, 255, 0.85) !important;
        margin-top: 2px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.9) !important;
        margin-bottom: 0 !important;
    }

    /* 4. CONTROLS (Zeitring + Play-Button) wandern ganz nach rechts */
    .controls-container {
        display: flex !important;
        flex-direction: row !important; /* Elemente horizontal nebeneinander */
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 20px !important;
        flex: 1 !important;
        margin-right: 0 !important; /* Nutzt den Platz bis zum rechten Rand */
    }

    /* Zeitring kompakter im Querformat */
    .progress-circle {
        width: 55px !important;
        height: 55px !important;
        box-shadow: 0 0 15px 2px rgba(255, 255, 255, 0.2) !important;
    }
    
    .progress-circle::before {
        /* Radien angepasst: Schneidet jetzt exakt ein Loch hinein, sodass ein 3px breiter Ring stehen bleibt */
        mask: radial-gradient(circle at center, transparent 24px, #000 25px) !important;
        -webkit-mask: radial-gradient(circle at center, transparent 24px, #000 25px) !important;
    }
    
    .progress-circle::after {
        /* Der innere schwarze Kern wird minimal kleiner (49px), damit er perfekt im Ring sitzt */
        width: 49px !important;
        height: 49px !important;
        background: #000 !important;
    }
    
    .timeRemaining {
        font-size: 0.75rem !important;
    }

    /* Play Button kompakter */
    #playPauseBtn {
        width: 55px !important;
        height: 55px !important;
        box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.2) !important;
        background: linear-gradient(to top, #0056b3, #007bff) !important;
    }

    .start-btn i, .pause-btn i {
        font-size: 2rem !important;
    }
    
    .start-btn i {
        margin-left: 4px !important; /* Korrektur für das Play-Dreieck */
    }
}