/* =============================================
   THEME-BASIERTE OBJEKTE & ELEMENTE
   Halloween, Ostern, Sommer, etc. mit echten Objekten
   ============================================= */

/* ===== HALLOWEEN THEME - KÜRBISSE & GEISTER ===== */
[data-theme="halloween"] {
  /* Halloween Objekte ohne Spinnenweben */
  --pumpkin-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cellipse cx='20' cy='22' rx='15' ry='12' fill='%23ff6b35'/%3E%3Cpath d='M20 10C18 8 16 8 15 10C16 12 18 12 20 10Z' fill='%23228B22'/%3E%3Cpath d='M12 18L16 22L12 26' fill='%23000'/%3E%3Cpath d='M28 18L24 22L28 26' fill='%23000'/%3E%3Cpath d='M16 28L20 30L24 28' fill='%23000'/%3E%3C/svg%3E");
  
  --bat-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='20' viewBox='0 0 30 20'%3E%3Cpath d='M5 15C2 12 0 8 3 6C6 8 8 10 10 8C12 6 13 8 15 10C17 8 18 6 20 8C22 10 24 8 27 6C30 8 28 12 25 15C22 13 20 11 18 13C16 15 14 15 12 13C10 11 8 13 5 15Z' fill='%232a0a2e'/%3E%3C/svg%3E");
  
  --ghost-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='35' viewBox='0 0 30 35'%3E%3Cpath d='M15 5C20 5 25 10 25 15L25 30C25 32 23 33 22 31L20 28L18 31C17 33 13 33 12 31L10 28L8 31C7 33 5 32 5 30L5 15C5 10 10 5 15 5Z' fill='%23f8f8ff' opacity='0.9'/%3E%3Ccircle cx='12' cy='15' r='2' fill='%23000'/%3E%3Ccircle cx='18' cy='15' r='2' fill='%23000'/%3E%3Cellipse cx='15' cy='20' rx='3' ry='2' fill='%23000'/%3E%3C/svg%3E");
}

/* Kürbisse für Navigation - weniger störend positioniert */
[data-theme="halloween"] .nav-btn::before {
  content: '';
  position: absolute;
  top: -12px;
  right: -12px;
  width: 14px;
  height: 14px;
  background: var(--pumpkin-svg);
  background-size: contain;
  opacity: 0;
  transition: all 0.3s ease;
  z-index: 1;
}

[data-theme="halloween"] .nav-btn:hover::before {
  opacity: 0.5;
  transform: scale(1.05) rotate(3deg);
}

/* Fledermäuse für Songs - weniger störend positioniert */
[data-theme="halloween"] .song-item::before {
  content: '';
  position: absolute;
  top: 10px;
  right: 15px;
  width: 14px;
  height: 10px;
  background: var(--bat-svg);
  background-size: contain;
  opacity: 0;
  transition: all 0.4s ease;
  z-index: 1;
}

[data-theme="halloween"] .song-item:hover::before {
  opacity: 0.4;
  animation: batFly 2s ease-in-out infinite;
}

/* Geister für Player Controls - weniger störend positioniert */
[data-theme="halloween"] .control-btn::after {
  content: '';
  position: absolute;
  top: -25px;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 22px;
  background: var(--ghost-svg);
  background-size: contain;
  opacity: 0;
  transition: all 0.3s ease;
  pointer-events: none;
  z-index: 1;
}

[data-theme="halloween"] .control-btn:hover::after {
  opacity: 0.4;
  animation: ghostFloat 3s ease-in-out infinite;
}

/* ===== OSTERN THEME - HASEN & EIER ===== */
[data-theme="easter"] {
  --bunny-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='35' viewBox='0 0 30 35'%3E%3Cellipse cx='15' cy='25' rx='8' ry='10' fill='%23f5f5dc'/%3E%3Cellipse cx='15' cy='15' rx='6' ry='7' fill='%23f5f5dc'/%3E%3Cellipse cx='12' cy='8' rx='2' ry='6' fill='%23f5f5dc'/%3E%3Cellipse cx='18' cy='8' rx='2' ry='6' fill='%23f5f5dc'/%3E%3Ccircle cx='13' cy='13' r='1.5' fill='%23000'/%3E%3Ccircle cx='17' cy='13' r='1.5' fill='%23000'/%3E%3Cellipse cx='15' cy='16' rx='1' ry='0.5' fill='%23ff69b4'/%3E%3Cpath d='M14 17L15 18L16 17' stroke='%23000' stroke-width='0.5' fill='none'/%3E%3C/svg%3E");
  
  --egg-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='25' viewBox='0 0 20 25'%3E%3Cellipse cx='10' cy='15' rx='8' ry='10' fill='%23ff69b4'/%3E%3Cpath d='M5 10C8 8 12 8 15 10' stroke='%23ffff00' stroke-width='2' fill='none'/%3E%3Cpath d='M6 15C9 13 11 13 14 15' stroke='%2300ff00' stroke-width='1.5' fill='none'/%3E%3Cpath d='M7 20C9 18 11 18 13 20' stroke='%23ff0000' stroke-width='1' fill='none'/%3E%3C/svg%3E");
  
  --flower-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 25 25'%3E%3Ccircle cx='12.5' cy='8' r='3' fill='%23ff69b4'/%3E%3Ccircle cx='8' cy='12.5' r='3' fill='%23ff1493'/%3E%3Ccircle cx='17' cy='12.5' r='3' fill='%23ff1493'/%3E%3Ccircle cx='12.5' cy='17' r='3' fill='%23ff69b4'/%3E%3Ccircle cx='12.5' cy='12.5' r='2' fill='%23ffff00'/%3E%3C/svg%3E");
  
  --carrot-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='30' viewBox='0 0 15 30'%3E%3Cpath d='M7.5 10L10 25C10 27 8 28 7.5 28C7 28 5 27 5 25L7.5 10Z' fill='%23ff4500'/%3E%3Cpath d='M6 10L7 5L8 3L9 5L8 10' stroke='%23228B22' stroke-width='1' fill='%23228B22'/%3E%3C/svg%3E");
}

/* Hasen für Navigation - weniger störend positioniert */
[data-theme="easter"] .nav-btn::before {
  content: '';
  position: absolute;
  top: -12px;
  left: -12px;
  width: 18px;
  height: 22px;
  background: var(--bunny-svg);
  background-size: contain;
  opacity: 0;
  transition: all 0.3s ease;
  z-index: 1;
}

[data-theme="easter"] .nav-btn:hover::before {
  opacity: 0.5;
  animation: bunnyHop 1s ease-in-out infinite;
}

/* Ostereier für Songs - weniger störend positioniert */
[data-theme="easter"] .song-item::after {
  content: '';
  position: absolute;
  bottom: 10px;
  right: 15px;
  width: 10px;
  height: 14px;
  background: var(--egg-svg);
  background-size: contain;
  opacity: 0;
  transition: all 0.3s ease;
  z-index: 1;
}

[data-theme="easter"] .song-item:hover::after {
  opacity: 0.4;
  animation: eggWobble 2s ease-in-out infinite;
}

/* Blumen für Player Controls */
[data-theme="easter"] .control-btn::before {
  content: '';
  position: absolute;
  top: -25px;
  right: -25px;
  width: 18px;
  height: 18px;
  background: var(--flower-svg);
  background-size: contain;
  opacity: 0;
  transition: all 0.3s ease;
  pointer-events: none;
}

[data-theme="easter"] .control-btn:hover::before {
  opacity: 0.6;
  animation: flowerBloom 2s ease-in-out infinite;
}

/* Karotten für aktive Elemente */
[data-theme="easter"] .nav-btn.active::after {
  content: '';
  position: absolute;
  bottom: -5px;
  right: 0;
  width: 12px;
  height: 25px;
  background: var(--carrot-svg);
  background-size: contain;
  opacity: 0.8;
  animation: carrotGrow 1.5s ease-in-out infinite;
}

/* ===== SOMMER THEME - PALMEN & STRAND ===== */
[data-theme="summer"] {
  --palm-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='60' viewBox='0 0 40 60'%3E%3Cpath d='M20 40L20 55' stroke='%238B4513' stroke-width='3'/%3E%3Cpath d='M20 35C15 25 10 20 5 25C10 30 15 35 20 35Z' fill='%23228B22'/%3E%3Cpath d='M20 35C25 25 30 20 35 25C30 30 25 35 20 35Z' fill='%23228B22'/%3E%3Cpath d='M20 35C18 20 15 15 10 20C15 25 18 30 20 35Z' fill='%2332CD32'/%3E%3Cpath d='M20 35C22 20 25 15 30 20C25 25 22 30 20 35Z' fill='%2332CD32'/%3E%3Ccircle cx='18' cy='38' r='2' fill='%238B4513'/%3E%3C/svg%3E");
  
  --sun-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='8' fill='%23FFD700'/%3E%3Cpath d='M20 2L20 8M20 32L20 38M38 20L32 20M8 20L2 20M32.5 7.5L28.5 11.5M11.5 28.5L7.5 32.5M32.5 32.5L28.5 28.5M11.5 11.5L7.5 7.5' stroke='%23FFD700' stroke-width='2'/%3E%3C/svg%3E");
  
  --wave-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='20' viewBox='0 0 60 20'%3E%3Cpath d='M0 10C10 5 20 15 30 10C40 5 50 15 60 10L60 20L0 20Z' fill='%234169E1' opacity='0.6'/%3E%3C/svg%3E");
  
  --beach-ball-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 25 25'%3E%3Ccircle cx='12.5' cy='12.5' r='10' fill='%23fff'/%3E%3Cpath d='M12.5 2.5A10 10 0 0 1 12.5 22.5' fill='%23ff0000'/%3E%3Cpath d='M12.5 2.5A10 10 0 0 0 12.5 22.5' fill='%23ffff00'/%3E%3Cpath d='M2.5 12.5A10 10 0 0 1 22.5 12.5' fill='%2300ff00'/%3E%3Cpath d='M2.5 12.5A10 10 0 0 0 22.5 12.5' fill='%234169E1'/%3E%3C/svg%3E");
}

/* Palmen in den Ecken */
[data-theme="summer"] .main-content::before {
  content: '';
  position: fixed;
  bottom: 0;
  left: 20px;
  width: 35px;
  height: 55px;
  background: var(--palm-svg);
  background-size: contain;
  opacity: 0.7;
  pointer-events: none;
  z-index: 5;
  animation: palmSway 4s ease-in-out infinite;
}

[data-theme="summer"] .main-content::after {
  content: '';
  position: fixed;
  bottom: 0;
  right: 30px;
  width: 30px;
  height: 50px;
  background: var(--palm-svg);
  background-size: contain;
  opacity: 0.5;
  pointer-events: none;
  z-index: 5;
  transform: scaleX(-1);
  animation: palmSway 6s ease-in-out infinite reverse;
}

/* Sonne für Navigation */
[data-theme="summer"] .nav-btn::before {
  content: '';
  position: absolute;
  top: -18px;
  right: -18px;
  width: 28px;
  height: 28px;
  background: var(--sun-svg);
  background-size: contain;
  opacity: 0;
  transition: all 0.3s ease;
}

[data-theme="summer"] .nav-btn:hover::before {
  opacity: 0.7;
  animation: sunShine 2s ease-in-out infinite;
}

/* Wellen für Songs */
[data-theme="summer"] .song-item::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 15px;
  background: var(--wave-svg);
  background-size: cover;
  opacity: 0;
  transition: all 0.3s ease;
}

[data-theme="summer"] .song-item:hover::before {
  opacity: 0.5;
  animation: waveFlow 3s ease-in-out infinite;
}

/* Beach Balls für Player Controls */
[data-theme="summer"] .control-btn::after {
  content: '';
  position: absolute;
  top: -25px;
  left: -25px;
  width: 18px;
  height: 18px;
  background: var(--beach-ball-svg);
  background-size: contain;
  opacity: 0;
  transition: all 0.3s ease;
  pointer-events: none;
}

[data-theme="summer"] .control-btn:hover::after {
  opacity: 0.7;
  animation: beachBallBounce 2s ease-in-out infinite;
}

/* ===== WINTER THEME - SCHNEEFLOCKEN & EISZAPFEN ===== */
[data-theme="winter"] {
  --snowflake-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M10 0L10 20M0 10L20 10M3 3L17 17M17 3L3 17' stroke='%23ffffff' stroke-width='1'/%3E%3Ccircle cx='10' cy='10' r='1' fill='%23ffffff'/%3E%3Ccircle cx='5' cy='5' r='0.5' fill='%23ffffff'/%3E%3Ccircle cx='15' cy='5' r='0.5' fill='%23ffffff'/%3E%3Ccircle cx='5' cy='15' r='0.5' fill='%23ffffff'/%3E%3Ccircle cx='15' cy='15' r='0.5' fill='%23ffffff'/%3E%3C/svg%3E");
  
  --icicle-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='25' viewBox='0 0 8 25'%3E%3Cpath d='M4 0L6 15L4 25L2 15Z' fill='%23e6f3ff' opacity='0.8'/%3E%3C/svg%3E");
}

/* Schneeflocken für alle Elemente */
[data-theme="winter"] .nav-btn::before,
[data-theme="winter"] .song-item::before,
[data-theme="winter"] .control-btn::before {
  content: '';
  position: absolute;
  top: 8px;
  right: 8px;
  width: 13px;
  height: 13px;
  background: var(--snowflake-svg);
  background-size: contain;
  opacity: 0;
  transition: all 0.3s ease;
  pointer-events: none;
}

[data-theme="winter"] .nav-btn:hover::before,
[data-theme="winter"] .song-item:hover::before,
[data-theme="winter"] .control-btn:hover::before {
  opacity: 0.7;
  animation: snowflakeSpin 3s linear infinite;
}

/* ===== ANIMATIONEN ===== */
@keyframes batFly {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-5px) rotate(5deg); }
}

@keyframes ghostFloat {
  0%, 100% { transform: translateX(-50%) translateY(0) scale(1); }
  50% { transform: translateX(-50%) translateY(-10px) scale(1.1); }
}

@keyframes bunnyHop {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-8px) scale(1.1); }
}

@keyframes eggWobble {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(5deg); }
  75% { transform: rotate(-5deg); }
}

@keyframes flowerBloom {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.2) rotate(180deg); }
}

@keyframes carrotGrow {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(1.2); }
}

@keyframes palmSway {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(5deg); }
}

@keyframes sunShine {
  0%, 100% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.1); }
}

@keyframes waveFlow {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

@keyframes beachBallBounce {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(180deg); }
}

@keyframes snowflakeSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ===== RESPONSIVE ANPASSUNGEN ===== */
@media (max-width: 768px) {
  /* Objekte auf Mobile kleiner machen */
  [data-theme="halloween"] .main-content::before,
  [data-theme="halloween"] .main-content::after {
    width: 100px;
    height: 100px;
  }
  
  [data-theme="summer"] .main-content::before {
    width: 25px;
    height: 40px;
  }
  
  [data-theme="summer"] .main-content::after {
    width: 20px;
    height: 35px;
  }
  
  /* Hover-Effekte für Touch anpassen */
  [data-theme] .nav-btn::before,
  [data-theme] .song-item::before,
  [data-theme] .song-item::after,
  [data-theme] .control-btn::before,
  [data-theme] .control-btn::after {
    opacity: 0.3;
  }
}

/* Performance Mode - Animationen reduzieren */
body.performance-mode [data-theme] * {
  animation-duration: 0.1s !important;
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  [data-theme] *::before,
  [data-theme] *::after {
    animation: none !important;
    transition: opacity 0.3s ease !important;
  }
}