/* ================= MOBILE ================= */
@media (max-width: 600px){
  .hero h1{
    font-size: 22px;
  }

  .cover{
    width: 56px;
    height: 56px;
  }

  #progress{
    width: 70px;
  }

  /* Titel/Artist bleiben in EINER Reihe */
  .info strong{
    font-size: 16px;
    white-space: nowrap;
  }

  .meta{
    font-size: 14px;
    white-space: nowrap;
  }
}

/* ================= DESKTOP LAYOUT ABSTAND ================= */
@media (min-width: 768px) {
  .site-footer {
    padding-bottom: 180px;
  }

  main.chart {
    padding-bottom: 160px;
  }
}

/* ================= DESKTOP HISTORY FIX ================= */
@media (min-width: 768px) {

  .chart-history{
    max-width: 900px;
    margin: 24px auto 28px;
    padding: 0 12px;
  }

  .site-footer{
    margin-top: 0;
  }
}

/* ================= PLAYER VOLUME RESPONSIVE ================= */

/* Mobile kompakter */
@media (max-width:600px){
  #volume{
    width:70px;
  }
}

/* ================= DESKTOP ONLY ================= */
@media (max-width: 768px){
  .desktop-only{
    display:none !important;
  }
}