/* Vollständige 100% saisonale Anpassung ALLER Website-Elemente */

/* ================================
   FRÜHLING THEME - KOMPLETT
   ================================ */

body.theme-spring {
  /* Basis-Hintergrund */
  background: var(--bg-gradient);
}

/* Hauptpage Header */
body.theme-spring .header-animation {
  background: rgba(27, 67, 50, 0.8);
  border: 1px solid rgba(76, 175, 80, 0.3);
  box-shadow: 0 8px 32px rgba(76, 175, 80, 0.2);
}

/* Alle Buttons */
body.theme-spring .fancy-button,
body.theme-spring .btn,
body.theme-spring .control-btn,
body.theme-spring button {
  background: linear-gradient(45deg, var(--primary), var(--secondary));
  border: 1px solid var(--accent);
  box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
  color: white;
}

body.theme-spring .fancy-button:hover,
body.theme-spring .btn:hover,
body.theme-spring .control-btn:hover,
body.theme-spring button:hover {
  background: linear-gradient(45deg, var(--secondary), var(--primary));
  box-shadow: 0 6px 20px rgba(76, 175, 80, 0.4);
  transform: translateY(-2px);
}

/* Input Felder */
body.theme-spring input,
body.theme-spring textarea,
body.theme-spring select {
  background: rgba(45, 90, 65, 0.6);
  border: 1px solid var(--primary);
  color: var(--text);
  border-radius: 8px;
  padding: 8px 12px;
}

body.theme-spring input:focus,
body.theme-spring textarea:focus,
body.theme-spring select:focus {
  border-color: var(--secondary);
  box-shadow: 0 0 10px rgba(76, 175, 80, 0.3);
  outline: none;
}

/* Player Controls */
body.theme-spring .player-controls {
  background: rgba(27, 67, 50, 0.8);
  border: 1px solid var(--primary);
}

body.theme-spring .play-pause-btn {
  background: linear-gradient(45deg, var(--primary), var(--secondary));
  box-shadow: 0 0 20px rgba(76, 175, 80, 0.4);
}

/* Song Items */
body.theme-spring .song-item {
  background: rgba(45, 90, 65, 0.3);
  border-left: 3px solid transparent;
  border-radius: 8px;
  margin: 2px 0;
}

body.theme-spring .song-item:hover {
  background: rgba(76, 175, 80, 0.2);
  border-left-color: var(--primary);
  transform: translateX(5px);
}

body.theme-spring .song-item.active {
  background: rgba(76, 175, 80, 0.3);
  border-left-color: var(--secondary);
}

/* Progress Bars */
body.theme-spring .progress-bar {
  background: rgba(45, 90, 65, 0.5);
  border-radius: 10px;
}

body.theme-spring .progress {
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(76, 175, 80, 0.5);
}

/* Volume Control */
body.theme-spring .volume-bar {
  background: rgba(45, 90, 65, 0.5);
}

body.theme-spring .volume-current {
  background: linear-gradient(90deg, var(--primary), var(--secondary));
}

body.theme-spring .volume-handle {
  background: var(--primary);
  border: 2px solid var(--secondary);
  box-shadow: 0 0 10px rgba(76, 175, 80, 0.5);
}

/* Scrollbars */
body.theme-spring ::-webkit-scrollbar {
  width: 12px;
  background: rgba(45, 90, 65, 0.3);
}

body.theme-spring ::-webkit-scrollbar-thumb {
  background: linear-gradient(45deg, var(--primary), var(--secondary));
  border-radius: 6px;
  border: 1px solid var(--accent);
}

body.theme-spring ::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(45deg, var(--secondary), var(--primary));
}

/* Modals und Popups */
body.theme-spring .modal,
body.theme-spring .popup,
body.theme-spring .toast {
  background: rgba(27, 67, 50, 0.9);
  border: 1px solid var(--primary);
  box-shadow: 0 10px 30px rgba(76, 175, 80, 0.3);
}

/* Tabs */
body.theme-spring .category-tab {
  background: rgba(45, 90, 65, 0.4);
  border: 1px solid var(--primary);
  color: var(--text);
}

body.theme-spring .category-tab.active {
  background: var(--primary);
  color: white;
  box-shadow: 0 4px 15px rgba(76, 175, 80, 0.4);
}

/* Links */
body.theme-spring a {
  color: var(--primary);
  text-decoration: none;
}

body.theme-spring a:hover {
  color: var(--secondary);
  text-shadow: 0 0 5px rgba(76, 175, 80, 0.5);
}

/* ================================
   SOMMER THEME - KOMPLETT
   ================================ */

body.theme-summer {
  background: var(--bg-gradient);
}

body.theme-summer .header-animation {
  background: rgba(230, 81, 0, 0.3);
  border: 1px solid rgba(255, 152, 0, 0.4);
  box-shadow: 0 8px 32px rgba(255, 152, 0, 0.3);
}

body.theme-summer .fancy-button,
body.theme-summer .btn,
body.theme-summer .control-btn,
body.theme-summer button {
  background: linear-gradient(45deg, var(--primary), var(--accent));
  border: 1px solid var(--secondary);
  box-shadow: 0 4px 15px rgba(255, 152, 0, 0.4);
  color: white;
}

body.theme-summer .fancy-button:hover,
body.theme-summer .btn:hover,
body.theme-summer .control-btn:hover,
body.theme-summer button:hover {
  background: linear-gradient(45deg, var(--accent), var(--primary));
  box-shadow: 0 6px 20px rgba(255, 152, 0, 0.5);
  transform: translateY(-2px);
}

body.theme-summer input,
body.theme-summer textarea,
body.theme-summer select {
  background: rgba(255, 111, 0, 0.2);
  border: 1px solid var(--primary);
  color: var(--text);
  border-radius: 8px;
  padding: 8px 12px;
}

body.theme-summer input:focus,
body.theme-summer textarea:focus,
body.theme-summer select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 10px rgba(255, 152, 0, 0.4);
  outline: none;
}

body.theme-summer .player-controls {
  background: rgba(230, 81, 0, 0.4);
  border: 1px solid var(--primary);
}

body.theme-summer .play-pause-btn {
  background: linear-gradient(45deg, var(--primary), var(--accent));
  box-shadow: 0 0 20px rgba(255, 152, 0, 0.5);
}

body.theme-summer .song-item {
  background: rgba(255, 111, 0, 0.2);
  border-left: 3px solid transparent;
  border-radius: 8px;
  margin: 2px 0;
}

body.theme-summer .song-item:hover {
  background: rgba(255, 152, 0, 0.3);
  border-left-color: var(--primary);
  transform: translateX(5px);
}

body.theme-summer .song-item.active {
  background: rgba(255, 152, 0, 0.4);
  border-left-color: var(--accent);
}

body.theme-summer .progress-bar {
  background: rgba(255, 111, 0, 0.3);
  border-radius: 10px;
}

body.theme-summer .progress {
  background: linear-gradient(90deg, var(--primary), var(--accent));
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(255, 152, 0, 0.6);
}

body.theme-summer .volume-bar {
  background: rgba(255, 111, 0, 0.3);
}

body.theme-summer .volume-current {
  background: linear-gradient(90deg, var(--primary), var(--accent));
}

body.theme-summer .volume-handle {
  background: var(--primary);
  border: 2px solid var(--accent);
  box-shadow: 0 0 10px rgba(255, 152, 0, 0.6);
}

body.theme-summer ::-webkit-scrollbar {
  width: 12px;
  background: rgba(255, 111, 0, 0.2);
}

body.theme-summer ::-webkit-scrollbar-thumb {
  background: linear-gradient(45deg, var(--primary), var(--accent));
  border-radius: 6px;
  border: 1px solid var(--secondary);
}

body.theme-summer ::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(45deg, var(--accent), var(--primary));
}

body.theme-summer .modal,
body.theme-summer .popup,
body.theme-summer .toast {
  background: rgba(230, 81, 0, 0.9);
  border: 1px solid var(--primary);
  box-shadow: 0 10px 30px rgba(255, 152, 0, 0.4);
}

body.theme-summer .category-tab {
  background: rgba(255, 111, 0, 0.3);
  border: 1px solid var(--primary);
  color: var(--text);
}

body.theme-summer .category-tab.active {
  background: var(--primary);
  color: white;
  box-shadow: 0 4px 15px rgba(255, 152, 0, 0.5);
}

body.theme-summer a {
  color: var(--primary);
  text-decoration: none;
}

body.theme-summer a:hover {
  color: var(--accent);
  text-shadow: 0 0 5px rgba(255, 152, 0, 0.6);
}

/* ================================
   HERBST THEME - KOMPLETT
   ================================ */

body.theme-autumn {
  background: var(--bg-gradient);
}

body.theme-autumn .header-animation {
  background: rgba(62, 39, 35, 0.8);
  border: 1px solid rgba(255, 111, 0, 0.4);
  box-shadow: 0 8px 32px rgba(255, 111, 0, 0.3);
}

body.theme-autumn .fancy-button,
body.theme-autumn .btn,
body.theme-autumn .control-btn,
body.theme-autumn button {
  background: linear-gradient(45deg, var(--primary), var(--secondary));
  border: 1px solid var(--accent);
  box-shadow: 0 4px 15px rgba(255, 111, 0, 0.4);
  color: white;
}

body.theme-autumn .fancy-button:hover,
body.theme-autumn .btn:hover,
body.theme-autumn .control-btn:hover,
body.theme-autumn button:hover {
  background: linear-gradient(45deg, var(--secondary), var(--primary));
  box-shadow: 0 6px 20px rgba(255, 111, 0, 0.5);
  transform: translateY(-2px);
}

body.theme-autumn input,
body.theme-autumn textarea,
body.theme-autumn select {
  background: rgba(93, 64, 55, 0.6);
  border: 1px solid var(--primary);
  color: var(--text);
  border-radius: 8px;
  padding: 8px 12px;
}

body.theme-autumn input:focus,
body.theme-autumn textarea:focus,
body.theme-autumn select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 10px rgba(255, 111, 0, 0.4);
  outline: none;
}

body.theme-autumn .player-controls {
  background: rgba(62, 39, 35, 0.8);
  border: 1px solid var(--primary);
}

body.theme-autumn .play-pause-btn {
  background: linear-gradient(45deg, var(--primary), var(--secondary));
  box-shadow: 0 0 20px rgba(255, 111, 0, 0.5);
}

body.theme-autumn .song-item {
  background: rgba(93, 64, 55, 0.3);
  border-left: 3px solid transparent;
  border-radius: 8px;
  margin: 2px 0;
}

body.theme-autumn .song-item:hover {
  background: rgba(255, 111, 0, 0.2);
  border-left-color: var(--primary);
  transform: translateX(5px);
}

body.theme-autumn .song-item.active {
  background: rgba(255, 111, 0, 0.3);
  border-left-color: var(--accent);
}

body.theme-autumn .progress-bar {
  background: rgba(93, 64, 55, 0.5);
  border-radius: 10px;
}

body.theme-autumn .progress {
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(255, 111, 0, 0.6);
}

body.theme-autumn .volume-bar {
  background: rgba(93, 64, 55, 0.5);
}

body.theme-autumn .volume-current {
  background: linear-gradient(90deg, var(--primary), var(--secondary));
}

body.theme-autumn .volume-handle {
  background: var(--primary);
  border: 2px solid var(--accent);
  box-shadow: 0 0 10px rgba(255, 111, 0, 0.6);
}

body.theme-autumn ::-webkit-scrollbar {
  width: 12px;
  background: rgba(93, 64, 55, 0.3);
}

body.theme-autumn ::-webkit-scrollbar-thumb {
  background: linear-gradient(45deg, var(--primary), var(--secondary));
  border-radius: 6px;
  border: 1px solid var(--accent);
}

body.theme-autumn ::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(45deg, var(--secondary), var(--primary));
}

body.theme-autumn .modal,
body.theme-autumn .popup,
body.theme-autumn .toast {
  background: rgba(62, 39, 35, 0.9);
  border: 1px solid var(--primary);
  box-shadow: 0 10px 30px rgba(255, 111, 0, 0.4);
}

body.theme-autumn .category-tab {
  background: rgba(93, 64, 55, 0.4);
  border: 1px solid var(--primary);
  color: var(--text);
}

body.theme-autumn .category-tab.active {
  background: var(--primary);
  color: white;
  box-shadow: 0 4px 15px rgba(255, 111, 0, 0.5);
}

body.theme-autumn a {
  color: var(--primary);
  text-decoration: none;
}

body.theme-autumn a:hover {
  color: var(--accent);
  text-shadow: 0 0 5px rgba(255, 111, 0, 0.6);
}

/* ================================
   WINTER THEME - KOMPLETT
   ================================ */

body.theme-winter {
  background: var(--bg-gradient);
}

body.theme-winter .header-animation {
  background: rgba(13, 71, 161, 0.3);
  border: 1px solid rgba(33, 150, 243, 0.4);
  box-shadow: 0 8px 32px rgba(33, 150, 243, 0.3);
}

body.theme-winter .fancy-button,
body.theme-winter .btn,
body.theme-winter .control-btn,
body.theme-winter button {
  background: linear-gradient(45deg, var(--primary), var(--secondary));
  border: 1px solid var(--accent);
  box-shadow: 0 4px 15px rgba(33, 150, 243, 0.4);
  color: white;
}

body.theme-winter .fancy-button:hover,
body.theme-winter .btn:hover,
body.theme-winter .control-btn:hover,
body.theme-winter button:hover {
  background: linear-gradient(45deg, var(--secondary), var(--primary));
  box-shadow: 0 6px 20px rgba(33, 150, 243, 0.5);
  transform: translateY(-2px);
}

body.theme-winter input,
body.theme-winter textarea,
body.theme-winter select {
  background: rgba(21, 101, 192, 0.3);
  border: 1px solid var(--primary);
  color: var(--text);
  border-radius: 8px;
  padding: 8px 12px;
}

body.theme-winter input:focus,
body.theme-winter textarea:focus,
body.theme-winter select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 10px rgba(33, 150, 243, 0.4);
  outline: none;
}

body.theme-winter .player-controls {
  background: rgba(13, 71, 161, 0.4);
  border: 1px solid var(--primary);
}

body.theme-winter .play-pause-btn {
  background: linear-gradient(45deg, var(--primary), var(--secondary));
  box-shadow: 0 0 20px rgba(33, 150, 243, 0.5);
}

body.theme-winter .song-item {
  background: rgba(21, 101, 192, 0.2);
  border-left: 3px solid transparent;
  border-radius: 8px;
  margin: 2px 0;
}

body.theme-winter .song-item:hover {
  background: rgba(33, 150, 243, 0.3);
  border-left-color: var(--primary);
  transform: translateX(5px);
}

body.theme-winter .song-item.active {
  background: rgba(33, 150, 243, 0.4);
  border-left-color: var(--accent);
}

body.theme-winter .progress-bar {
  background: rgba(21, 101, 192, 0.3);
  border-radius: 10px;
}

body.theme-winter .progress {
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(33, 150, 243, 0.6);
}

body.theme-winter .volume-bar {
  background: rgba(21, 101, 192, 0.3);
}

body.theme-winter .volume-current {
  background: linear-gradient(90deg, var(--primary), var(--secondary));
}

body.theme-winter .volume-handle {
  background: var(--primary);
  border: 2px solid var(--accent);
  box-shadow: 0 0 10px rgba(33, 150, 243, 0.6);
}

body.theme-winter ::-webkit-scrollbar {
  width: 12px;
  background: rgba(21, 101, 192, 0.2);
}

body.theme-winter ::-webkit-scrollbar-thumb {
  background: linear-gradient(45deg, var(--primary), var(--secondary));
  border-radius: 6px;
  border: 1px solid var(--accent);
}

body.theme-winter ::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(45deg, var(--secondary), var(--primary));
}

body.theme-winter .modal,
body.theme-winter .popup,
body.theme-winter .toast {
  background: rgba(13, 71, 161, 0.9);
  border: 1px solid var(--primary);
  box-shadow: 0 10px 30px rgba(33, 150, 243, 0.4);
}

body.theme-winter .category-tab {
  background: rgba(21, 101, 192, 0.3);
  border: 1px solid var(--primary);
  color: var(--text);
}

body.theme-winter .category-tab.active {
  background: var(--primary);
  color: white;
  box-shadow: 0 4px 15px rgba(33, 150, 243, 0.5);
}

body.theme-winter a {
  color: var(--primary);
  text-decoration: none;
}

body.theme-winter a:hover {
  color: var(--secondary);
  text-shadow: 0 0 5px rgba(33, 150, 243, 0.6);
}

/* ================================
   HALLOWEEN THEME - KOMPLETT
   ================================ */

body.theme-halloween {
  background: var(--bg-gradient);
}

body.theme-halloween .header-animation {
  background: rgba(26, 10, 0, 0.9);
  border: 1px solid rgba(255, 102, 0, 0.5);
  box-shadow: 0 8px 32px rgba(255, 102, 0, 0.4);
  animation: halloweenGlow 3s ease-in-out infinite;
}

body.theme-halloween .fancy-button,
body.theme-halloween .btn,
body.theme-halloween .control-btn,
body.theme-halloween button {
  background: linear-gradient(45deg, var(--primary), var(--secondary));
  border: 1px solid var(--accent);
  box-shadow: 0 4px 15px rgba(255, 102, 0, 0.5);
  color: white;
  animation: halloweenButtonGlow 2s ease-in-out infinite alternate;
}

body.theme-halloween .fancy-button:hover,
body.theme-halloween .btn:hover,
body.theme-halloween .control-btn:hover,
body.theme-halloween button:hover {
  background: linear-gradient(45deg, var(--secondary), var(--primary));
  box-shadow: 0 8px 25px rgba(255, 102, 0, 0.8);
  transform: translateY(-2px) scale(1.05);
}

body.theme-halloween input,
body.theme-halloween textarea,
body.theme-halloween select {
  background: rgba(45, 28, 0, 0.8);
  border: 1px solid var(--primary);
  color: var(--text);
  border-radius: 8px;
  padding: 8px 12px;
  animation: halloweenInputGlow 3s ease-in-out infinite;
}

body.theme-halloween input:focus,
body.theme-halloween textarea:focus,
body.theme-halloween select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 15px rgba(255, 102, 0, 0.6);
  outline: none;
}

body.theme-halloween .player-controls {
  background: rgba(26, 10, 0, 0.9);
  border: 1px solid var(--primary);
  animation: halloweenControlsGlow 4s ease-in-out infinite;
}

body.theme-halloween .play-pause-btn {
  background: linear-gradient(45deg, var(--primary), var(--secondary));
  box-shadow: 0 0 25px rgba(255, 102, 0, 0.8);
  animation: halloweenPulse 1.5s ease-in-out infinite;
}

body.theme-halloween .song-item {
  background: rgba(45, 28, 0, 0.4);
  border-left: 3px solid transparent;
  border-radius: 8px;
  margin: 2px 0;
}

body.theme-halloween .song-item:hover {
  background: rgba(255, 102, 0, 0.3);
  border-left-color: var(--primary);
  transform: translateX(5px);
  animation: halloweenFlicker 0.5s ease-in-out;
}

body.theme-halloween .song-item.active {
  background: rgba(255, 102, 0, 0.4);
  border-left-color: var(--accent);
  animation: halloweenActiveGlow 2s ease-in-out infinite;
}

body.theme-halloween .progress-bar {
  background: rgba(45, 28, 0, 0.6);
  border-radius: 10px;
}

body.theme-halloween .progress {
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  border-radius: 10px;
  box-shadow: 0 0 15px rgba(255, 102, 0, 0.8);
  animation: halloweenProgressPulse 1s ease-in-out infinite;
}

body.theme-halloween .volume-bar {
  background: rgba(45, 28, 0, 0.6);
}

body.theme-halloween .volume-current {
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  animation: halloweenProgressPulse 1s ease-in-out infinite;
}

body.theme-halloween .volume-handle {
  background: var(--primary);
  border: 2px solid var(--accent);
  box-shadow: 0 0 15px rgba(255, 102, 0, 0.8);
  animation: halloweenHandleGlow 2s ease-in-out infinite;
}

body.theme-halloween ::-webkit-scrollbar {
  width: 12px;
  background: rgba(45, 28, 0, 0.4);
}

body.theme-halloween ::-webkit-scrollbar-thumb {
  background: linear-gradient(45deg, var(--primary), var(--secondary));
  border-radius: 6px;
  border: 1px solid var(--accent);
  animation: halloweenScrollGlow 2s ease-in-out infinite;
}

body.theme-halloween ::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(45deg, var(--secondary), var(--primary));
  box-shadow: 0 0 10px rgba(255, 102, 0, 0.8);
}

body.theme-halloween .modal,
body.theme-halloween .popup,
body.theme-halloween .toast {
  background: rgba(26, 10, 0, 0.95);
  border: 1px solid var(--primary);
  box-shadow: 0 10px 30px rgba(255, 102, 0, 0.5);
  animation: halloweenModalGlow 3s ease-in-out infinite;
}

body.theme-halloween .category-tab {
  background: rgba(45, 28, 0, 0.6);
  border: 1px solid var(--primary);
  color: var(--text);
}

body.theme-halloween .category-tab.active {
  background: var(--primary);
  color: white;
  box-shadow: 0 4px 15px rgba(255, 102, 0, 0.6);
  animation: halloweenTabPulse 2s ease-in-out infinite;
}

body.theme-halloween a {
  color: var(--primary);
  text-decoration: none;
}

body.theme-halloween a:hover {
  color: var(--accent);
  text-shadow: 0 0 8px rgba(255, 102, 0, 0.8);
  animation: halloweenLinkFlicker 1s ease-in-out infinite;
}

/* ================================
   OSTERN THEME - KOMPLETT
   ================================ */

body.theme-easter {
  background: var(--bg-gradient);
}

body.theme-easter .header-animation {
  background: rgba(74, 20, 140, 0.4);
  border: 1px solid rgba(233, 30, 99, 0.4);
  box-shadow: 0 8px 32px rgba(233, 30, 99, 0.3);
  animation: easterShine 3s ease-in-out infinite;
}

body.theme-easter .fancy-button,
body.theme-easter .btn,
body.theme-easter .control-btn,
body.theme-easter button {
  background: linear-gradient(45deg, var(--primary), var(--accent));
  border: 1px solid var(--secondary);
  box-shadow: 0 4px 15px rgba(233, 30, 99, 0.4);
  color: white;
  animation: easterButtonShine 3s ease-in-out infinite;
}

body.theme-easter .fancy-button:hover,
body.theme-easter .btn:hover,
body.theme-easter .control-btn:hover,
body.theme-easter button:hover {
  background: linear-gradient(45deg, var(--accent), var(--primary));
  box-shadow: 0 6px 20px rgba(156, 39, 176, 0.6);
  transform: translateY(-2px) scale(1.05);
}

body.theme-easter input,
body.theme-easter textarea,
body.theme-easter select {
  background: rgba(106, 27, 154, 0.3);
  border: 1px solid var(--primary);
  color: var(--text);
  border-radius: 8px;
  padding: 8px 12px;
}

body.theme-easter input:focus,
body.theme-easter textarea:focus,
body.theme-easter select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 12px rgba(233, 30, 99, 0.5);
  outline: none;
}

body.theme-easter .player-controls {
  background: rgba(74, 20, 140, 0.5);
  border: 1px solid var(--primary);
}

body.theme-easter .play-pause-btn {
  background: linear-gradient(45deg, var(--primary), var(--accent));
  box-shadow: 0 0 20px rgba(233, 30, 99, 0.6);
  animation: easterPlayButtonGlow 2s ease-in-out infinite;
}

body.theme-easter .song-item {
  background: rgba(106, 27, 154, 0.2);
  border-left: 3px solid transparent;
  border-radius: 8px;
  margin: 2px 0;
}

body.theme-easter .song-item:hover {
  background: rgba(233, 30, 99, 0.2);
  border-left-color: var(--primary);
  transform: translateX(5px);
  animation: easterBounce 0.6s ease-in-out;
}

body.theme-easter .song-item.active {
  background: rgba(233, 30, 99, 0.3);
  border-left-color: var(--accent);
  animation: easterActiveShine 2.5s ease-in-out infinite;
}

body.theme-easter .progress-bar {
  background: rgba(106, 27, 154, 0.3);
  border-radius: 10px;
}

body.theme-easter .progress {
  background: linear-gradient(90deg, var(--primary), var(--accent));
  border-radius: 10px;
  box-shadow: 0 0 12px rgba(233, 30, 99, 0.6);
  animation: easterProgressShimmer 2s ease-in-out infinite;
}

body.theme-easter .volume-bar {
  background: rgba(106, 27, 154, 0.3);
}

body.theme-easter .volume-current {
  background: linear-gradient(90deg, var(--primary), var(--accent));
  animation: easterProgressShimmer 2s ease-in-out infinite;
}

body.theme-easter .volume-handle {
  background: var(--primary);
  border: 2px solid var(--accent);
  box-shadow: 0 0 12px rgba(233, 30, 99, 0.6);
  animation: easterHandleBounce 1.5s ease-in-out infinite;
}

body.theme-easter ::-webkit-scrollbar {
  width: 12px;
  background: rgba(106, 27, 154, 0.2);
}

body.theme-easter ::-webkit-scrollbar-thumb {
  background: linear-gradient(45deg, var(--primary), var(--accent));
  border-radius: 6px;
  border: 1px solid var(--secondary);
  animation: easterScrollShine 2s ease-in-out infinite;
}

body.theme-easter ::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(45deg, var(--accent), var(--primary));
  box-shadow: 0 0 10px rgba(233, 30, 99, 0.6);
}

body.theme-easter .modal,
body.theme-easter .popup,
body.theme-easter .toast {
  background: rgba(74, 20, 140, 0.9);
  border: 1px solid var(--primary);
  box-shadow: 0 10px 30px rgba(233, 30, 99, 0.4);
  animation: easterModalGlow 3s ease-in-out infinite;
}

body.theme-easter .category-tab {
  background: rgba(106, 27, 154, 0.3);
  border: 1px solid var(--primary);
  color: var(--text);
}

body.theme-easter .category-tab.active {
  background: var(--primary);
  color: white;
  box-shadow: 0 4px 15px rgba(233, 30, 99, 0.5);
  animation: easterTabGlow 3s ease-in-out infinite;
}

body.theme-easter a {
  color: var(--primary);
  text-decoration: none;
}

body.theme-easter a:hover {
  color: var(--accent);
  text-shadow: 0 0 6px rgba(233, 30, 99, 0.7);
  animation: easterLinkShine 1.5s ease-in-out infinite;
}

/* ================================
   HALLOWEEN ANIMATIONEN
   ================================ */

@keyframes halloweenGlow {
  0%, 100% { box-shadow: 0 8px 32px rgba(255, 102, 0, 0.4); }
  50% { box-shadow: 0 12px 40px rgba(255, 102, 0, 0.7); }
}

@keyframes halloweenButtonGlow {
  0% { box-shadow: 0 4px 15px rgba(255, 102, 0, 0.5); }
  100% { box-shadow: 0 8px 25px rgba(255, 102, 0, 0.8); }
}

@keyframes halloweenInputGlow {
  0%, 100% { border-color: var(--primary); }
  50% { border-color: var(--accent); }
}

@keyframes halloweenControlsGlow {
  0%, 100% { border-color: var(--primary); }
  50% { border-color: var(--accent); }
}

@keyframes halloweenPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

@keyframes halloweenFlicker {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.8; }
}

@keyframes halloweenActiveGlow {
  0%, 100% { background: rgba(255, 102, 0, 0.4); }
  50% { background: rgba(255, 102, 0, 0.6); }
}

@keyframes halloweenProgressPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

@keyframes halloweenHandleGlow {
  0%, 100% { box-shadow: 0 0 15px rgba(255, 102, 0, 0.8); }
  50% { box-shadow: 0 0 25px rgba(255, 102, 0, 1); }
}

@keyframes halloweenScrollGlow {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; }
}

@keyframes halloweenModalGlow {
  0%, 100% { box-shadow: 0 10px 30px rgba(255, 102, 0, 0.5); }
  50% { box-shadow: 0 15px 40px rgba(255, 102, 0, 0.7); }
}

@keyframes halloweenTabPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

@keyframes halloweenLinkFlicker {
  0%, 100% { opacity: 1; }
  25% { opacity: 0.8; }
  50% { opacity: 1; }
  75% { opacity: 0.9; }
}

/* ================================
   OSTERN ANIMATIONEN
   ================================ */

@keyframes easterShine {
  0%, 100% { box-shadow: 0 8px 32px rgba(233, 30, 99, 0.3); }
  50% { box-shadow: 0 12px 40px rgba(156, 39, 176, 0.6); }
}

@keyframes easterButtonShine {
  0%, 100% { box-shadow: 0 4px 15px rgba(233, 30, 99, 0.4); }
  50% { box-shadow: 0 6px 20px rgba(156, 39, 176, 0.6); }
}

@keyframes easterPlayButtonGlow {
  0%, 100% { box-shadow: 0 0 20px rgba(233, 30, 99, 0.6); }
  50% { box-shadow: 0 0 30px rgba(156, 39, 176, 0.8); }
}

@keyframes easterBounce {
  0%, 100% { transform: translateX(5px) translateY(0px); }
  25% { transform: translateX(5px) translateY(-2px); }
  50% { transform: translateX(5px) translateY(-4px); }
  75% { transform: translateX(5px) translateY(-2px); }
}

@keyframes easterActiveShine {
  0%, 100% { background: rgba(233, 30, 99, 0.3); }
  50% { background: rgba(156, 39, 176, 0.4); }
}

@keyframes easterProgressShimmer {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.2); }
}

@keyframes easterHandleBounce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

@keyframes easterScrollShine {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; }
}

@keyframes easterModalGlow {
  0%, 100% { box-shadow: 0 10px 30px rgba(233, 30, 99, 0.4); }
  50% { box-shadow: 0 15px 40px rgba(156, 39, 176, 0.6); }
}

@keyframes easterTabGlow {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.15); }
}

@keyframes easterLinkShine {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.3); }
}

/* ================================
   DYNAMISCHE PARTIKEL-ANIMATION
   ================================ */

@keyframes particleFall {
  0% {
    transform: translateY(-20px) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(360deg);
    opacity: 0;
  }
}

.seasonal-particle {
  user-select: none;
  animation-timing-function: linear;
}

/* ================================
   RESPONSIVE DESIGN FÜR ALLE THEMES
   ================================ */

@media (max-width: 768px) {
  /* Mobile Anpassungen für alle saisonalen Themes */
  body.theme-spring .header-animation,
  body.theme-summer .header-animation,
  body.theme-autumn .header-animation,
  body.theme-winter .header-animation,
  body.theme-halloween .header-animation,
  body.theme-easter .header-animation {
    padding: 2rem;
    margin: 10px;
    font-size: 0.9rem;
  }

  body.theme-spring .fancy-button,
  body.theme-summer .fancy-button,
  body.theme-autumn .fancy-button,
  body.theme-winter .fancy-button,
  body.theme-halloween .fancy-button,
  body.theme-easter .fancy-button {
    padding: 12px 24px;
    margin: 8px 4px;
    font-size: 0.9rem;
  }

  /* Reduzierte Partikel-Anzahl auf mobilen Geräten */
  .seasonal-particle {
    font-size: 10px !important;
  }
}

@media (max-width: 480px) {
  /* Extra kleine Bildschirme */
  body.theme-spring .header-animation,
  body.theme-summer .header-animation,
  body.theme-autumn .header-animation,
  body.theme-winter .header-animation,
  body.theme-halloween .header-animation,
  body.theme-easter .header-animation {
    padding: 1.5rem;
    margin: 5px;
  }

  body.theme-spring .fancy-button,
  body.theme-summer .fancy-button,
  body.theme-autumn .fancy-button,
  body.theme-winter .fancy-button,
  body.theme-halloween .fancy-button,
  body.theme-easter .fancy-button {
    padding: 10px 20px;
    margin: 5px 2px;
    font-size: 0.8rem;
  }
}

/* ================================
   ACCESSIBILITY VERBESSERUNGEN
   ================================ */

@media (prefers-reduced-motion: reduce) {
  /* Reduzierte Animationen für Benutzer mit Motion-Sensitivität */
  body.theme-halloween .fancy-button,
  body.theme-halloween .btn,
  body.theme-halloween .control-btn,
  body.theme-halloween button,
  body.theme-halloween .progress,
  body.theme-halloween .volume-current,
  body.theme-halloween .volume-handle,
  body.theme-halloween .song-item.active,
  body.theme-easter .fancy-button,
  body.theme-easter .btn,
  body.theme-easter .control-btn,
  body.theme-easter button,
  body.theme-easter .progress,
  body.theme-easter .volume-current,
  body.theme-easter .volume-handle,
  body.theme-easter .song-item.active {
    animation: none !important;
  }

  .seasonal-particle {
    display: none !important;
  }
}

/* ================================
   HIGH CONTRAST MODE SUPPORT
   ================================ */

@media (prefers-contrast: high) {
  /* Verbesserte Kontraste für alle Themes */
  body.theme-spring,
  body.theme-summer,
  body.theme-autumn,
  body.theme-winter,
  body.theme-halloween,
  body.theme-easter {
    --text: #FFFFFF;
    --text-secondary: #E0E0E0;
  }

  body.theme-spring input,
  body.theme-summer input,
  body.theme-autumn input,
  body.theme-winter input,
  body.theme-halloween input,
  body.theme-easter input,
  body.theme-spring textarea,
  body.theme-summer textarea,
  body.theme-autumn textarea,
  body.theme-winter textarea,
  body.theme-halloween textarea,
  body.theme-easter textarea,
  body.theme-spring select,
  body.theme-summer select,
  body.theme-autumn select,
  body.theme-winter select,
  body.theme-halloween select,
  body.theme-easter select {
    border-width: 2px;
    color: #FFFFFF;
  }
}

/* ================================
   PRINT STYLES
   ================================ */

@media print {
  /* Entferne alle saisonalen Effekte beim Drucken */
  body.theme-spring,
  body.theme-summer,
  body.theme-autumn,
  body.theme-winter,
  body.theme-halloween,
  body.theme-easter {
    background: white !important;
    color: black !important;
  }

  body.theme-spring *,
  body.theme-summer *,
  body.theme-autumn *,
  body.theme-winter *,
  body.theme-halloween *,
  body.theme-easter * {
    background: transparent !important;
    color: black !important;
    box-shadow: none !important;
    animation: none !important;
  }

  .seasonal-particle {
    display: none !important;
  }
}