/* 0. Theme-Variablen */
:root {
  --clr-bg: #111;
  --clr-text: #eee;
  --clr-muted: #c2c0c0;
  --clr-card-overlay: rgba(0,0,0,0.4);
  --clr-hover: rgba(65, 64, 64, 0.7);
  --clr-active-bg: rgba(255, 255, 255, 0.7); /* 0.3 = 30 % Deckkraft */
  --clr-active-text: #000;
  --border-radius: 6px;
  --transition-fast: 0.2s ease;
  --transition-medium: 0.4s ease;
  user-select: none; 
}
/* 1. Reset & Grundlayout */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
	*, *::before, *::after {
  box-sizing: border-box;
}
html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}
body {
  background-color: var(--clr-bg);
  color: var(--clr-text);
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 100vh;
  padding: 20px;
  /*overflow:hidden;*/
  margin: 0;
  background: 
  rgba(0,0,0,0.6)                  /* Abdunkelung */
  url('img/bg.jpg')   /* Bildpfad */
  center/cover no-repeat;
  background-blend-mode: darken;      /* mischt Farbe & Bild */
  color: white;                       /* Textfarbe auf dunklem Grund */
}
/* Unsichtbar, aber Platz bleibt */
.button-hidden {
  visibility: hidden;
  opacity: 0;                /* komplett transparent */
  transition: opacity 0.4s ease; /* sanftes Ein-/Ausblenden */
}

/* Sichtbarer Zustand */
#toggleAlbumsBtn {
  opacity: 1;
  transition: opacity 0.4s ease;
}
.album-toggle-btn {
  /*position: sticky;*/
  top: 0;
  display:block;
  z-index: 10;
  background-color: #222;
  color: var(--clr-text);
  border: none;
  padding: 8px 16px;
  font-size: 1rem;
  border-radius: var(--border-radius);
  cursor: pointer;
  margin: 10px auto 20px auto; /* zentriert + Abstand */
  display: block;
  transition: background var(--transition-fast);
  text-align: center;
}
.album-toggle-btn:hover {
  background-color: var(--clr-hover);
}
.player-container {
  display: flex;
  flex-direction: column;
  height: 100vh;   /* volle Höhe des Browserfensters */
  width: 100%;
  max-width: 800px;
  overflow: hidden;
}
#playlist-section {
  display: flex;
  overflow-y: auto;
  flex:1;
  flex-direction: column;
  align-items: center;     /* horizontal zentrieren */
  max-width: 800px;        /* begrenzt die Breite auf großen Bildschirmen */
  margin: 0 auto;          /*zentriert den ganzen Block */
  padding: 10px;
  box-sizing: border-box;
}
	
	@media (max-width: 480px) {
  #playlist-section {
    align-items: stretch;  /* statt center → füllt volle Breite */
    max-width: none;
    padding: 0;
    margin: 0;
    width: 100%;
  }
}
/* 2. Album-Grid */
#album-selection h2 {
  margin-bottom: 30px;
}

#albums {
  display: grid;
  padding: 20px;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 15px;
  margin-bottom: 20px;
}
@media (max-width: 600px) {
  #albums {
   grid-template-columns: repeat(3, 1fr); /* feste 3 Spalten */
    gap: 10px; /* etwas kompakterer Abstand */
  }
}
/* 3. Album-Card */
/* --- Album-Auswahlbereich mit sanfter Animation --- */
#album-selection {
  display: block;
  overflow: hidden;
  max-height: 1000px;
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  transition:
  max-height 0.4s ease,
  opacity 0.4s ease,
  transform 0.4s ease,
  filter 0.4s ease;
}

/* --- Versteckt-Zustand mit sanftem Einklappen --- */
#album-selection.album-hidden {
  max-height: 0;
  opacity: 0;
  transform: translateY(-20px);
  filter: blur(5px); /* optional für soften Ausblendeffekt */
}

/* --- Albumkarten mit Stagger-Effekt --- */
.album-card {
  cursor: pointer;
  border-radius: var(--border-radius);
  overflow: hidden;
  position: relative;
  transition:
  transform var(--transition-fast),
  box-shadow var(--transition-fast),
  opacity 0.4s ease;

  /* Startzustand für Stagger */
  opacity: 0;
  transform: translateY(20px);
  
}

.album-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.album-card img {
  width: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-medium);
}

.album-card:hover img {
  transform: scale(1.05);
}

.album-card .album-title {
  position: absolute;
  bottom: 4px;
  left: 4px;
  right: 4px;
  background-color: var(--clr-card-overlay);
  padding: 4px;
  font-size: 0.9rem;
  text-align: center;
}

/* --- Sichtbar-Zustand für Stagger-Effekt --- */
#album-selection.show-cards .album-card {
  opacity: 1;
  transform: translateY(0);
}

/* --- Zeitversatz pro Karte --- */
#album-selection.show-cards .album-card:nth-child(1) { transition-delay: 0.05s; }
#album-selection.show-cards .album-card:nth-child(2) { transition-delay: 0.1s; }
#album-selection.show-cards .album-card:nth-child(3) { transition-delay: 0.15s; }
#album-selection.show-cards .album-card:nth-child(4) { transition-delay: 0.2s; }
#album-selection.show-cards .album-card:nth-child(5) { transition-delay: 0.25s; }
/* Bei Bedarf weiterführen */

/* 4. Controls */
#controls {
  display: flex;
  flex-wrap: wrap;
  /*align-items: center;*/
  justify-content: center;
  gap: 10px;
  padding-bottom: 10px;

}
#controls button {
  background-color: #222;
  border: none;
  color: var(--clr-text);
  width: 48px;               /* feste Breite für ALLE Buttons */
  height: 48px;              /* feste Höhe für ALLE Buttons */
  display: flex;             /* Icon zentrieren */
  align-items: center;
  justify-content: center;
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: background var(--transition-fast);
  padding: 0;                /* Padding entfernen, Höhe/Breite sind fix */
}
#controls button i {
  font-size: 1.5rem;         /* Icons gleich groß darstellen */
  line-height: 1;
  transition: color var(--transition-fast);
}
#controls button:hover {
  background-color: var(--clr-hover);
}
#controls button.active i,
#controls button:hover i {
  color: var(--clr-text);
}
/* Play/Pause Button fixieren */
#play-pause {
  width: 48px;   /* feste Breite */
  height: 48px;  /* feste Höhe */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Icons übereinander */
#play-pause i {
  position: absolute;
  font-size: 1.2rem;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

/* Startzustand: nur Play sichtbar */
#play-pause.play .icon-play {
  opacity: 1;
  transform: scale(1);
}
#play-pause.play .icon-pause {
  opacity: 0;
  transform: scale(0.6);
}
/* Pausezustand: nur Pause sichtbar */
#play-pause.pause .icon-play {
  opacity: 0;
  transform: scale(0.6);
}
#play-pause.pause .icon-pause {
  opacity: 1;
  transform: scale(1);
}
#range-selector {
  display:flex;
  flex-direction: column;
  align-items:center;
  gap:12px;
  margin-bottom:10px;
  width: 100%;
  box-sizing: border-box;
}
/* Gemeinsame Basis für alle Slider */
input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  background: transparent; /* Hintergrund transparent, wir stylen selbst */
  width: 100%;
  touch-action: none;       /* verhindert Scrollen/Zoomen beim Ziehen auf Mobile */
  cursor: pointer;
}
/* Gemeinsame Basis für beide Regler */
#volume,
#progress {
  background: linear-gradient(
    to right,
    #9b9b9b 0%,
    #9b9b9b var(--val, 0%),
    #333    var(--val, 0%),
    #333    100%
  );
}
#volume::-webkit-slider-runnable-track,
#progress::-webkit-slider-runnable-track {
  height: 4px;
  background: transparent;
  border-radius: 2px;
}
#volume::-moz-range-track,
#progress::-moz-range-track {
  height: 4px;
  background: transparent;
  border-radius: 2px;
}
/* Einheitlicher Thumb */
#volume::-webkit-slider-thumb,
#progress::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -5px; /* mittig auf 4px Track */
  border-radius: 50%;
  background: #fff;
  border: 1px solid #999;
  transition: transform 0.2s ease, filter 0.2s ease;
}
#volume:active::-webkit-slider-thumb,
#progress:active::-webkit-slider-thumb {
  transform: scale(1.15);
  filter: brightness(1.1);
}
#volume::-moz-range-thumb,
#progress::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #999;
  transition: transform 0.2s ease, filter 0.2s ease;
}
#volume:active::-moz-range-thumb,
#progress:active::-moz-range-thumb {
  transform: scale(1.15);
  filter: brightness(1.1);
}

.progress-slider,
.volume-slider {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 600px; /* auf Desktop großzügiger */
  margin: 0 auto;
	border-radius: 3px; 
}
.progress-slider input,
.volume-slider input {
  flex: 1;
  min-width: 0;
}
#volume::-webkit-slider-runnable-track,
#progress::-webkit-slider-runnable-track {
  height: 6px;                 /* etwas dicker */
  background: transparent;
  border-radius: 3px;          /* halbe Höhe → runde Enden */
}
#volume::-moz-range-track,
#progress::-moz-range-track {
  height: 6px;
  background: transparent;
  border-radius: 3px;
}
#volume,
#progress {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(
    to right,
    #9b9b9b 0%,
    #9b9b9b var(--val, 0%),
    #333    var(--val, 0%),
    #333    100%
  );
}
/* 6. Now Playing */
.now-playing {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 15px;
}
.now-playing img {
  width: 150px;
  justify-content: center;
  object-fit: cover;
  border-radius: 6px;
  transition: transform var(--transition-medium);
  display:block;
}

/* 7. Playlist-Info */
#album-info {
  margin-top: 20px;
  font-size: 1.1rem;
  font-weight: bold;
  color: var(--clr-muted);
}
#full-track-info {
  margin-top: 15px;
  margin-bottom: 15px;
  font-size: 1.1rem;
  font-weight: bold;
  color: #66655b;
  min-width: 260px;         /* verhindert Schrumpfen */
  max-width: 300px;         /* optional: verhindert zu große Ausdehnung */
  text-align: center;       /* Text mittig */
  white-space: nowrap;      /* kein automatischer Umbruch */
  overflow: hidden;         /* Überlauf verstecken */
  text-overflow: ellipsis;  /* bei Überlänge "…" anhängen */
}
/* Scrollbar Styling kann bleiben */
#track-list::-webkit-scrollbar {
  width: 6px;
}
#track-list::-webkit-scrollbar-thumb {
  background-color: rgba(0,0,0,0.2);
  border-radius: 3px;
}
/* Desktop-Stil wie gehabt */
#track-list {
  position: relative;
  color: white;
  width: 400px;
  max-width: 400px;
  min-width: 400px;
  margin: 0 auto;
  max-height: 300px;
  overflow-y: auto;
  list-style: none;
  text-align: left;
  box-sizing: border-box;
  /* ✨ Innenabstand für Hintergrund-Rand */
  padding-top: 10px;     
  padding-bottom: 10px;  
  padding-left: 10px;    
  padding-right: 6px;
  border-radius: 10px;
}
#track-list li {
  width: 100%;
  box-sizing: border-box;
  padding: 6px 8px;
  margin: 0;
  cursor: pointer;
transition: background var(--transition-fast);
}
#track-list li:hover {
  background-color: var(--clr-hover);
}
#track-list li.active {
  background-color: var(--clr-active-bg);
  color: var(--clr-active-text);
}
/* 📱 Ab hier volle Breite auf Mobile */
@media (max-width: 480px) {
body  { padding:0;}
  #track-list {
    width: calc(100% - 30px);
    max-width: 100%;
    min-width: 0;
	margin-left: 15px;             /* Abstand vom linken Rand */
    margin-right: 15px;            /* Abstand vom rechten Rand */
    padding-left: 30px;
    padding-right: 30px;
	box-sizing: border-box;
	overflow-y: auto;  
	overflow-x: hidden;
  }
}
@media (min-width: 1024px) {
  #track-list {
    width: 600px;
    max-width: 800px;
    max-height: 400px;
  }
}
/* Visualizer Container */
 /* Wrapper für Cover + Visualizer */
.cover-visual-wrapper {
  position: relative;
  width: 150px; /* Coverbreite – hier einfach anpassen */
  overflow: hidden;
  height: auto;
}
/* Cover selbst */
.cover-visual-wrapper img {
  display: block;
  width: 100%;   /* immer volle Wrapperbreite */
  height: auto;
  transition: filter 0.6s ease;
}

/* Effekt aktiv */
.cover-visual-wrapper.with-visuals img {
  filter: blur(4px) brightness(0.6);
}
/* Visualizer als Overlay genau mittig */
.cover-visual-wrapper #visualizer {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  display: flex;
  padding-top:20px;
  justify-content: center;
  gap: 4px;
  pointer-events: none; /* Klicks gehen durchs Overlay */
}
/* Balken-Layout */
.bars {
  display: flex;
  top: 10px;
  justify-content: center;
  gap: 3px;
  border-radius: 3px 3px 0 0;
  align-items: flex-end;
  height: 70px;
  /* kompletter Fade für alle Bars */
  opacity: 0;
  transition: opacity 0.5s ease;
}

/* Alle Spans starten klein & unsichtbar */
.bars span {
  width: 12px;
  height: 45px;
  background-color: #9c9200;
  border-radius: 3px; /* ⬅️ Rundung */
  transform-origin: bottom;
  transform: scaleY(0.4);
  opacity: 0;
  animation: pulse 1s infinite ease-in-out;
  transition: transform 0.6s ease, opacity 0.6s ease;
}

/* Visualizer OFF */
.bars.viz-off {
  opacity: 0;
}
.bars.viz-off span {
  animation-play-state: paused;
  transform: scaleY(0.4);
  opacity: 0.3; /* leicht verblasst im Stopp */
}

/* Visualizer ON → Gesamt-FadeIn + Bars hochfahren */
.bars:not(.viz-off) {
  opacity: 1;
}
.bars:not(.viz-off) span {
  opacity: 1;
  transform: scaleY(1);
}

/* Keyframes ohne Transparenz-Verlauf */
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scaleY(1); }
  50%      { opacity: 1; transform:scaleY(var(--scale,2));}
}
/* Verzögerungen wie gehabt */
.bars span:nth-child(1) { animation-delay: 0s;    animation-duration: 1.9s; }
.bars span:nth-child(2) { animation-delay: 0.15s; animation-duration: 1.05s; }
.bars span:nth-child(3) { animation-delay: 0.3s;  animation-duration: 1.1s; }
.bars span:nth-child(4) { animation-delay: 0.5s; animation-duration: 0.75s; }
.bars span:nth-child(5) { animation-delay: 0.45s; animation-duration: 1.15s; }
.bars span:nth-child(6) { animation-delay: 0.45s; animation-duration: 0.65s; }
.bars span:nth-child(7) { animation-delay: 0.45s; animation-duration: 1.25s; }

/* 10. Hidden Utility */
.hidden {
  display: none !important;
}
	
	@media (max-width: 480px) {
  #range-selector {
    padding-left: 30px;   /* Luft links */
    padding-right: 30px;  /* Luft rechts */
    box-sizing: border-box;
  }

  /* Falls du auch zwischen den Slidern und dem Rand der Sektion Luft willst */
  .progress-slider,
  .volume-slider {
    padding-left: 8px;
    padding-right: 8px;
  }
}

	@media (max-width: 480px) {
  #player-info { 
    width: 100%;              /* Container nicht einschränken */
  }
  #full-track-info {
    width: 100%;
    max-width: none;
    min-width: 0;             /* wichtig in Flex-Layouts */
    padding: 0 10px;          /* etwas Luft links/rechts */
    text-align: center;

    white-space: nowrap;      /* einzeilig behalten */
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 1rem;          /* optional etwas kleiner auf Mobile */
  }
}
	
	@media (max-width: 480px) {
  #player-info { min-width: 0; }
}

@media (max-width: 480px) {
  /* Player-Container und Album-Section voll aufziehen */
  .player-container,
  #album-selection {
    align-items: stretch;
    max-width: none;
    margin: 0;
    width: 100%;
  }

  /* Überschrift einrücken */
  #album-selection h2 {
    margin-bottom:10px;
	padding:20px;
    box-sizing: border-box;
  }

  /* Grid innen einrücken */
  #albums.album-grid {
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
    width: 100%;
  }
}