/* Toggle-Button oben rechts – standardmäßig versteckt */
   #spotify-toggle {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
    background: #1DB954;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    color: #fff;
    cursor: pointer;
    transition: transform 0.3s;
    display: none; /* Anfangs ausgeblendet */
  }
  #spotify-toggle:hover {
    transform: scale(1.1);
  }
  /* Container für die Spotify Card – wird per Animation eingeblendet */
  #spotify-card-container {
    position: fixed;
    top: 20px;
    right: 80px;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
  }
  /* Wenn die Card geöffnet wird, erhält sie die Klasse .open */
  #spotify-card-container.open {
    visibility: visible;
    animation: cardOpen 0.8s forwards;
  }
  /* Beim Schließen wird .closing hinzugefügt */
  #spotify-card-container.closing {
    animation: cardClose 0.5s forwards;
  }
  @keyframes cardOpen {
    0% {
      opacity: 0;
      transform: scale(0.5) rotate(-10deg);
    }
    60% {
      opacity: 1;
      transform: scale(1.1) rotate(5deg);
    }
    80% {
      transform: scale(0.95) rotate(-3deg);
    }
    100% {
      opacity: 1;
      transform: scale(1) rotate(0deg);
    }
  }
  @keyframes cardClose {
    0% {
      opacity: 1;
      transform: scale(1) rotate(0deg);
    }
    100% {
      opacity: 0;
      transform: scale(0.5) rotate(-10deg);
    }
  }
  /* Grundstil der Card */
.app-container {
background: #1e1e1e;              /* Dunkler Hintergrund */
border-radius: 12px;              /* Abgerundete Ecken */
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
max-width: 400px;                 /* Breite der Card */
padding: 20px;
font-family: 'Helvetica Neue', sans-serif;
color: #fff;
}

.app-container h1 {
font-size: 1.6rem;
margin-bottom: 20px;
text-align: center;
border-bottom: 1px solid #333;   /* Unterstrich als optisches Trennelement */
padding-bottom: 10px;
}

/* Layout der Inhalte in der Card */
.card-container {
display: flex;
flex-direction: row;      /* Querformat: Bild links, Text rechts */
align-items: center;
gap: 15px;
}

.card {
background: #2c2c2c;
border-radius: 10px;
padding: 15px;
display: flex;
width: 100%;
align-items: center;
}

/* Bild der Karte */
.card-image img {
width: 100px;
height: 100px;
border-radius: 8px;
object-fit: cover;
}

/* Details zur aktuellen Wiedergabe */
.card-details {
flex: 1;
padding-right: 10px; /* Optionaler Abstand zum rechten Rand */
}
.card-track {
font-size: 1.2rem;
font-weight: 700;
margin: 0 0 5px 0;
color: #1DB954;
}

.card-artist,
.card-album,
.card-status {
font-size: 0.9rem;
margin: 2px 0;
}

.card-album {
font-style: italic;
color: #bbb;
}

/* Status-Anzeige: Je nach Wiedergabezustand */
.is-playing {
color: #1DB954;
}

.is-paused {
color: #f44336;
}

/* Fehlermeldung */
.error {
color: #f44336;
font-weight: bold;
text-align: center;
}
.card-image {
flex-shrink: 0;
margin-right: 20px; /* Erhöhter Abstand zum Text */
}

/* RESPONSIVE STYLES */
/* Bei kleineren Bildschirmen wird das Layout minimal angepasst */
@media (max-width: 768px) {
#spotify-card-container {
right: 10px; /* Reduziert den Abstand zum rechten Bildschirmrand */
left: 10px;  /* Falls du die Card zentrieren möchtest */
width: auto; /* Vermeidet, dass ein fester Wert verwendet wird */
top:70px;
}

.app-container {
max-width: calc(100% - 20px); /* 10px Rand links und rechts */
padding: 15px;
margin: 10px;             /* Zentriert die Card horizontal */
}

.card-container {
gap: 10px;
}

.card-image img {
width: 80px;
height: 80px;
}

.card-track {
font-size: 1.1rem;
}
}