* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent; /* Verhindert das blaue Highlight auf Mobilgeräten */
}

body {
    /* 1. Visuelle Basis: Full-Screen Background */
    background: #000 url("Online Radio fm V4.png") center/cover no-repeat;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: relative;
    /* Verhindert Textmarkierungen und Dragging für echtes App-Feeling */
    user-select: none;
    -webkit-user-drag: none;
}

/* 2. Steuerungsdeck für die interaktiven Hotspots */
.control-deck {
    position: absolute;
    left: 48%; /* Feinkorrektur zwischen 45.5% und 51% */
    bottom: 16%;  /* Zwingt die gesamte Kette weiter nach unten */
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3vmin; /* Kleinerer, präziserer Abstand zwischen den Elementen */
}

/* Unsichtbare Klickzonen */
.hotspot {
    background: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    border-radius: 50%;
}

/* Alle Elemente bekommen jetzt die gleiche, gezielte Touch-Zone */
#btnStop, #btnPause, #playBtn {
    width: 11vmin;
    height: 11vmin;
    will-change: transform, opacity, box-shadow, filter;
    transition: transform 0.2s cubic-bezier(0.1, 0.8, 0.3, 1);
}

#btnStop:active, #btnPause:active, #playBtn:active {
    transform: scale(0.95);
}

/* Falls nötig, kannst du mit einem minimalen 'margin-left' beim #playBtn nachjustieren */
#playBtn {
    margin-left: 1vmin; 
}

/* Kinetische Effekte entfernt, um Skalierungsprobleme auf Smartphones/Tablets zu vermeiden. */

@media (max-width: 768px) {
    body {
        /* Verhindert das Abschneiden der Ränder auf Hochkant-Displays */
        background-size: contain !important;
        background-position: center center !important;
        background-color: #000000; /* Schwarze Letterbox-Balken oben/unten für den echten Kino-/Konsolen-Look */
    }

    /* Da die Grafik jetzt per 'contain' mitskaliert, müssen wir sicherstellen, 
       dass der umschließende Container für unsere Hotspots exakt die gleichen 
       Proportionen wie das Hintergrundbild annimmt! */
    .player-container {
        position: absolute;
        width: 100vw;
        height: calc(100vw * (9 / 16)); /* Erzwingt das exakte 16:9 Verhältnis der Grafik auf dem Screen */
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    /* Setze das Control-Deck JETZT relativ in diesen perfekt skalierten Container, 
       damit die Hotspots auf JEDEM Smartphone millimetergenau über den Symbolen einfrieren! */
    .control-deck {
        position: absolute;
        left: 48%;  /* Deine ermittelte Links-Rechts-Feinjustierung */
        bottom: 5%;   /* Passe diesen Wert kurz an, bis es perfekt auf den Symbolen sitzt */
        transform: translateX(-50%);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 3vmin;
    }

    #btnStop, #btnPause, #playBtn {
        width: 11vmin;
        height: 11vmin;
        border-radius: 50%;
    }
}