body {
    background-color: #ffffff;
}

h1 {
    text-align: center;
    margin-top: 20rem;
    margin-bottom: 20rem;
}

@font-face {
    font-family: snb;
    src: url(/assets/fonts/StickNoBills-VariableFont_wght.ttf);
}

@font-face {
    font-family: wosa;
    src: url(/assets/fonts/Work_Sans/WorkSans-VariableFont_wght.ttf);
}


.banner {
    position: relative; /* Wichtig: Ermöglicht die absolute Positionierung des Kindelements */
    display: inline-block; /* Oder block, je nachdem, wie dein Bild im Layout ist */
}

.banner img {
    display: block; /* Entfernt zusätzlichen Platz unter dem Bild */
    max-width: 100%; /* Stellt sicher, dass das Bild responsiv ist */
    height: auto;
    margin-bottom: 2rem;
}

/* --- Audio-Player Container --- */
.audio-player-container {
    background-color: #ffffff;
    border-radius: 12px;
    /*box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);*/
    padding: 25px;
    text-align: center;
    max-width: 100%; /* Maximale Breite des Players */
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* --- Audio-Cover Bild --- */
.audio-cover {
    
    width: 100%;
    height: auto;
    max-width: 300px; /* Maximale Breite des Covers */
    border-radius: 8px;
    margin-bottom: 40px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out;
}

.audio-cover:hover {
    transform: scale(1.02);
}

/* --- Songtitel und Künstler --- */
.song-info h2 {
    margin-top: 0;
    margin-bottom: 5px;
    font-size: 1.8em;
    color: #333;
}

.song-info p {
    margin-top: 0;
    font-size: 1.1em;
    color: #666;
}

/* --- Audio-Element Steuerung --- */
/* Das Standard <audio>-Element wird verwendet, um die nativen Steuerelemente anzuzeigen.
Sein Styling ist begrenzt, aber wir können es im Container anpassen. */
audio {
    width: 50%; /* Passt die Breite an den Container an */
    margin-top: 20px;
/* Browser-spezifisches Styling kann schwierig sein, aber grundlegende Farben gehen */
    accent-color: #4CAF50; /* Farbe für den Fortschrittsbalken etc. */
}

/* Optional: Wenn du das Standard-Audio-Element verstecken und eigene Steuerelemente bauen möchtest,
würde das hier über JavaScript geschehen. Für dieses Beispiel nutzen wir die nativen Controls. */

/* --- Responsivität --- */

@media (max-width: 500px) {
    .audio-player-container {
        padding: 15px;
    }

    .song-info h2 {
        font-size: 1.5em;
    }

    .song-info p {
        font-size: 1em;
    }

    .audio-cover {
        max-width: 250px;
    }
}

/* Feedback */

h6 {
    font-weight: normal;
    text-align: center;
    font-size: 1.1rem;
    width: 60%;
    margin: auto;
    font-family: wosa;
    margin-bottom: 3rem;
}