/* =========================================
   MINIMAL RESPONSIVE FIX FÜR PLAYER BAR
   ========================================= */

/* Sichere mobile Anpassungen für Player-Controls */
@media (max-width: 768px) {
  .player-controls {
    /* Basis-Layout beibehalten */
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 100 !important;
    
    /* Mobile Anpassungen */
    padding: 12px 15px !important;
    min-height: 90px !important;
    display: grid !important;
    grid-template-columns: 1fr 2fr 0.8fr !important;
    gap: 10px !important;
    align-items: center !important;
  }
  
  /* Now Playing Bereich kompakter */
  .now-playing {
    max-width: 200px !important;
    overflow: hidden !important;
  }
  
  #currentCover {
    width: 45px !important;
    height: 45px !important;
  }
  
  .track-info {
    min-width: 0 !important;
  }
  
  .track-title {
    font-size: 12px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  
  /* Control Buttons kompakter */
  .control-buttons {
    justify-content: center !important;
    gap: 8px !important;
  }
  
  .control-btn {
    width: 35px !important;
    height: 35px !important;
    font-size: 14px !important;
  }
  
  .control-btn.play {
    width: 45px !important;
    height: 45px !important;
    font-size: 18px !important;
  }
  
  /* Progress Bar anpassen */
  .progress {
    margin: 8px 0 0 0 !important;
    grid-column: 1 / -1 !important;
    order: 2 !important;
  }
  
  .current-time,
  .total-time {
    font-size: 11px !important;
  }
  
  /* Volume Control ausblenden bei sehr kleinen Screens */
  .volume-control {
    display: none !important;
  }
}

/* Tablet Anpassungen */
@media (min-width: 769px) and (max-width: 1024px) {
  .player-controls {
    padding: 15px 20px !important;
    min-height: 95px !important;
  }
  
  .now-playing {
    max-width: 250px !important;
  }
  
  #currentCover {
    width: 55px !important;
    height: 55px !important;
  }
  
  .control-btn {
    width: 40px !important;
    height: 40px !important;
  }
  
  .control-btn.play {
    width: 50px !important;
    height: 50px !important;
  }
}

/* Desktop - Original Layout beibehalten */
@media (min-width: 1025px) {
  .player-controls {
    /* Originale Desktop-Werte sicherstellen */
    padding: 1.2rem 2rem !important;
    min-height: 100px !important;
    grid-template-columns: 1fr 2fr 1fr !important;
    gap: 1.2rem !important;
  }
}