#player-container {
 max-width: 1200px;
 margin: auto;
 background: #fff;
 border: 1px solid #ddd;
 border-radius: 12px;
 padding: 50px;
 box-shadow: 0 3px 10px rgba(0,0,0,0.08);
}

/* Aktueller Titel */
#current-title {
 text-align: center;
 font-size: 32px;
 font-weight: 600;
 margin-bottom: 30px;
 color: #111;
}

/* Controls */
#controls {
 display: flex;
 justify-content: center;
 gap: 60px;
 margin-bottom: 40px;
}

#controls button {
 background-color: #222; /* dunkelgrau */
 border: none;
 padding: 20px;
 border-radius: 10px;
 cursor: pointer;
 transition: background-color 0.2s;
}

#controls button:hover {
 background-color: #444;
}

#controls button svg {
 width: 40px;
 height: 40px;
 fill: #fff; /* Weiß für Sichtbarkeit */
}

/* Progress */
#progress-container {
 width: 100%;
 height: 22px;
 background: #eee;
 border-radius: 11px;
 cursor: pointer;
 margin-bottom: 12px;
}

#progress {
 height: 100%;
 width: 0%;
 background: #000;
 border-radius: 11px;
}

#time {
 text-align: right;
 font-size: 18px;
 margin-bottom: 20px;
 color: #666;
}

/* Lautstärkeregler */
#volume-container {
 width: 200px;
 margin: 0 auto 40px auto;
 display: flex;
 align-items: center;
 gap: 10px;
}

#volume-slider {
 width: 100%;
}

/* Playlist */

#playlist {
 list-style: none;
 padding: 0;
 margin-top: 30px;
}

#playlist li {
 padding: 20px;
 font-size: 20px;
 border-bottom: 1px solid #eee;
 cursor: pointer;
 transition: background-color 0.2s;
}

#playlist li:hover {
 background-color: #f5f5f5;
}

#playlist li.active {
 background-color: #000;
 color: white;
}