/* 🌌 INTERGALACTIC ATMOSPHERIC THEME WORLDS
 * ==========================================
 * Vollständig immersive, themenspezifische Welten mit galaktischem Hintergrund
 * Halloween: Gruselig mit Spinnenweben, Geistern, Schatten
 * Ostern: Hasen, Eier, Blumenwiesen
 * Sommer: Strand, Wasser, Palmen, Wärme
 * Alle Themes: Intergalaktischer Weltraum-Hintergrund
 */

/* ================================================
 * 🌌 GALACTIC BASE - INTERGALAKTISCHER HINTERGRUND
 * ================================================ */

body {
  background: radial-gradient(ellipse at center, 
    var(--galaxy-core-color, #1a0d3d) 0%,
    var(--galaxy-mid-color, #0a0a1f) 60%,
    var(--galaxy-outer-color, #000012) 100%);
  position: relative;
  overflow-x: hidden;
}

/* Galactic Base Layer - Sternenfeld */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(2px 2px at 20px 30px, var(--star-color-1, #fff), transparent),
    radial-gradient(2px 2px at 40px 70px, var(--star-color-2, #ff0), transparent),
    radial-gradient(1px 1px at 90px 40px, var(--star-color-3, #ff0080), transparent),
    radial-gradient(1px 1px at 130px 80px, var(--star-color-4, #00ff80), transparent),
    radial-gradient(2px 2px at 160px 30px, var(--star-color-1, #fff), transparent);
  background-repeat: repeat;
  background-size: 200px 200px;
  animation: starField 120s linear infinite;
  z-index: 1;
  pointer-events: none;
}

@keyframes starField {
  from { transform: translateY(0); }
  to { transform: translateY(-200px); }
}

/* Galactic Spiral Arms */
body::after {
  content: '';
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(from 0deg,
    transparent 0deg,
    var(--galaxy-arm-color, rgba(138, 43, 226, 0.1)) 30deg,
    transparent 60deg,
    var(--galaxy-arm-color, rgba(138, 43, 226, 0.1)) 120deg,
    transparent 150deg,
    var(--galaxy-arm-color, rgba(138, 43, 226, 0.1)) 210deg,
    transparent 240deg,
    var(--galaxy-arm-color, rgba(138, 43, 226, 0.1)) 300deg,
    transparent 330deg
  );
  animation: galaxyRotation 300s linear infinite;
  z-index: 2;
  pointer-events: none;
}

@keyframes galaxyRotation {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ================================================
 * 🎃 HALLOWEEN - GRUSELIGE INTERGALAKTISCHE WELT
 * ================================================ */

body.theme-halloween {
  --galaxy-core-color: #2d0a00;      /* Tiefes Rot-Schwarz */
  --galaxy-mid-color: #1a0600;       /* Blut-Schwarz */
  --galaxy-outer-color: #0f0300;     /* Absolute Finsternis */
  --galaxy-arm-color: rgba(255, 69, 0, 0.15);
  
  --star-color-1: #ff4500;           /* Orangerot */
  --star-color-2: #ff6b35;           /* Kürbis-Orange */
  --star-color-3: #8b0000;           /* Dunkelrot */
  --star-color-4: #ffa500;           /* Orange */
  
  /* Spezielle Halloween-Effekte */
  --spider-web-color: rgba(139, 139, 139, 0.6);
  --ghost-glow: rgba(255, 255, 255, 0.3);
  --blood-red: #8b0000;
  --pumpkin-orange: #ff6b35;
  --shadow-black: #000000;
}

/* Halloween: Schwebende Geister */
body.theme-halloween .ghost {
  position: fixed;
  width: 40px;
  height: 60px;
  background: radial-gradient(ellipse at center, var(--ghost-glow), transparent);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  animation: ghostFloat 15s ease-in-out infinite;
  z-index: 3;
  pointer-events: none;
}

body.theme-halloween .ghost::before {
  content: '👻';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 18px;
  animation: ghostGlow 3s ease-in-out infinite;
}

/* Geister weiter auseinander positioniert und weniger störend */
.ghost:nth-child(1) { top: 12%; left: 8%; animation-delay: 0s; }
.ghost:nth-child(2) { top: 75%; left: 85%; animation-delay: 5s; }
.ghost:nth-child(3) { top: 40%; left: 30%; animation-delay: 10s; }

@keyframes ghostFloat {
  0%, 100% { transform: translateY(0) translateX(0) rotate(0deg); opacity: 0.3; }
  25% { transform: translateY(-20px) translateX(15px) rotate(3deg); opacity: 0.5; }
  50% { transform: translateY(-8px) translateX(-10px) rotate(-2deg); opacity: 0.4; }
  75% { transform: translateY(-18px) translateX(8px) rotate(3deg); opacity: 0.5; }
}

@keyframes ghostGlow {
  0%, 100% { text-shadow: 0 0 8px var(--ghost-glow); }
  50% { text-shadow: 0 0 15px var(--ghost-glow), 0 0 25px var(--pumpkin-orange); }
}

/* Halloween: Fledermäuse */
body.theme-halloween .bats {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
  pointer-events: none;
}

body.theme-halloween .bat {
  position: absolute;
  font-size: 16px;
  animation: batFly 30s linear infinite;
  opacity: 0.6;
}

/* Fledermäuse weniger häufig und weiter auseinander */
.bat:nth-child(1) { left: -50px; top: 20%; animation-delay: 0s; }
.bat:nth-child(2) { left: -50px; top: 65%; animation-delay: 15s; }
.bat:nth-child(3) { left: -50px; top: 85%; animation-delay: 30s; }

@keyframes batFly {
  from { 
    transform: translateX(0) translateY(0) rotateZ(0deg);
    opacity: 0;
  }
  10% { opacity: 1; }
  90% { opacity: 1; }
  to { 
    transform: translateX(calc(100vw + 100px)) translateY(-100px) rotateZ(360deg);
    opacity: 0;
  }
}

/* ================================================
 * 🐰 OSTERN - GALAKTISCHE FRÜHLINGSWIESE
 * ================================================ */

body.theme-easter {
  --galaxy-core-color: #e8d5ff;      /* Lavendel-Kern */
  --galaxy-mid-color: #d1c4e9;       /* Pastell-Violett */
  --galaxy-outer-color: #f3e5f5;     /* Hellstes Violett */
  --galaxy-arm-color: rgba(156, 39, 176, 0.2);
  
  --star-color-1: #ffb3e6;           /* Rosa */
  --star-color-2: #e1bee7;           /* Helles Violett */
  --star-color-3: #f8bbd9;           /* Pastell-Pink */
  --star-color-4: #dcedc8;           /* Helles Grün */
  
  /* Oster-spezifische Farben */
  --bunny-white: #ffffff;
  --egg-colors: #ff69b4, #00bfff, #ffd700, #98fb98;
  --flower-pink: #ffc0cb;
  --grass-green: #90ee90;
}

/* Ostern: Galaktische Blumenwiese */
body.theme-easter::before {
  background-image: 
    radial-gradient(2px 2px at 20px 30px, var(--star-color-1), transparent),
    radial-gradient(1px 1px at 40px 70px, var(--star-color-2), transparent),
    radial-gradient(3px 3px at 90px 40px, var(--flower-pink), transparent),
    radial-gradient(2px 2px at 130px 80px, var(--star-color-4), transparent),
    linear-gradient(0deg, var(--grass-green) 0%, transparent 20%);
}

/* Ostern: Schwebende Oster-Eier - weniger störend */
body.theme-easter .easter-egg {
  position: fixed;
  width: 24px;
  height: 32px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  animation: eggFloat 25s ease-in-out infinite;
  z-index: 2;
  pointer-events: none;
  opacity: 0.7;
}

/* Oster-Eier weiter auseinander positioniert */
.easter-egg:nth-child(1) { 
  background: linear-gradient(45deg, #ff69b4, #ff1493);
  top: 8%; left: 88%; animation-delay: 0s; 
}
.easter-egg:nth-child(2) { 
  background: linear-gradient(45deg, #00bfff, #0087bd);
  top: 78%; left: 5%; animation-delay: 10s; 
}
.easter-egg:nth-child(3) { 
  background: linear-gradient(45deg, #ffd700, #ffb347);
  top: 45%; left: 82%; animation-delay: 20s; 
}
.easter-egg:nth-child(4) { 
  background: linear-gradient(45deg, #98fb98, #7cfc00);
  top: 25%; left: 20%; animation-delay: 18s; 
}

@keyframes eggFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.7; }
  25% { transform: translateY(-20px) rotate(90deg); opacity: 0.9; }
  50% { transform: translateY(-40px) rotate(180deg); opacity: 0.8; }
  75% { transform: translateY(-20px) rotate(270deg); opacity: 0.9; }
}

/* Ostern: Galaktische Hasen */
body.theme-easter .space-bunny {
  position: fixed;
  font-size: 40px;
  animation: bunnyHop 18s ease-in-out infinite;
  z-index: 4;
  pointer-events: none;
  filter: drop-shadow(0 0 10px var(--bunny-white));
}

.space-bunny:nth-child(1) { bottom: 8%; left: 3%; animation-delay: 0s; }
.space-bunny:nth-child(2) { bottom: 15%; right: 7%; animation-delay: 12s; }

@keyframes bunnyHop {
  0%, 100% { transform: translateY(0) scale(1); }
  10% { transform: translateY(-30px) scale(1.1); }
  20% { transform: translateY(0) scale(1); }
  30% { transform: translateY(-50px) scale(1.2); }
  40% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-20px) scale(1.05); }
  60% { transform: translateY(0) scale(1); }
}

/* ================================================
 * ☀️ SOMMER - GALAKTISCHER STRAND-PLANET
 * ================================================ */

body.theme-summer {
  --galaxy-core-color: #fff8dc;      /* Sandfarben-Kern */
  --galaxy-mid-color: #f0e68c;       /* Helles Gold */
  --galaxy-outer-color: #ffffe0;     /* Helles Gelb */
  --galaxy-arm-color: rgba(255, 165, 0, 0.3);
  
  --star-color-1: #ffd700;           /* Gold */
  --star-color-2: #ff8c00;           /* Dunkles Orange */
  --star-color-3: #ffb347;           /* Pfirsich */
  --star-color-4: #87ceeb;           /* Himmelblau */
  
  /* Sommer-spezifische Farben */
  --sun-yellow: #ffd700;
  --ocean-blue: #006994;
  --sand-beige: #c2b280;
  --palm-green: #228b22;
  --wave-white: #f0f8ff;
}

/* Sommer: Galaktische Sonne */
body.theme-summer .galactic-sun {
  position: fixed;
  top: 10%;
  right: 10%;
  width: 80px;
  height: 80px;
  background: radial-gradient(circle, var(--sun-yellow) 0%, #ff8c00 100%);
  border-radius: 50%;
  animation: sunPulse 8s ease-in-out infinite;
  z-index: 3;
  pointer-events: none;
  box-shadow: 
    0 0 60px var(--sun-yellow),
    0 0 120px rgba(255, 215, 0, 0.5);
}

.galactic-sun::before {
  content: '☀️';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 48px;
  animation: sunRotate 20s linear infinite;
}

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

@keyframes sunRotate {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Sommer: Galaktische Palmen */
body.theme-summer .space-palm {
  position: fixed;
  bottom: 0;
  font-size: 60px;
  animation: palmSway 12s ease-in-out infinite;
  z-index: 3;
  pointer-events: none;
  filter: drop-shadow(0 0 15px var(--palm-green));
}

.space-palm:nth-child(1) { left: 2%; animation-delay: 0s; }
.space-palm:nth-child(2) { right: 4%; animation-delay: 8s; }

@keyframes palmSway {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  25% { transform: translateX(10px) rotate(3deg); }
  50% { transform: translateX(0) rotate(0deg); }
  75% { transform: translateX(-10px) rotate(-3deg); }
}

/* Sommer: Galaktische Wellen */
body.theme-summer .cosmic-waves {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background: linear-gradient(0deg, 
    var(--ocean-blue) 0%,
    rgba(0, 105, 148, 0.8) 30%,
    rgba(135, 206, 235, 0.6) 60%,
    transparent 100%);
  animation: waveMotion 6s ease-in-out infinite;
  z-index: 2;
  pointer-events: none;
}

.cosmic-waves::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 100%;
  background: repeating-linear-gradient(90deg,
    transparent 0%,
    var(--wave-white) 2%,
    transparent 4%);
  animation: waveFlow 4s linear infinite;
}

@keyframes waveMotion {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes waveFlow {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ================================================
 * 🌸 FRÜHLING - GALAKTISCHER GARTEN-PLANET
 * ================================================ */

body.theme-spring {
  --galaxy-core-color: #f0fff0;      /* Honigmelone */
  --galaxy-mid-color: #e0ffe0;       /* Hellgrün */
  --galaxy-outer-color: #f5fffa;     /* Mintcreme */
  --galaxy-arm-color: rgba(34, 139, 34, 0.2);
  
  --star-color-1: #90ee90;           /* Hellgrün */
  --star-color-2: #98fb98;           /* Blassgrün */
  --star-color-3: #ffb6c1;           /* Hellrosa */
  --star-color-4: #f0e68c;           /* Khaki */
  
  /* Frühlings-spezifische Farben */
  --blossom-pink: #ffc0cb;
  --leaf-green: #32cd32;
  --flower-white: #ffffff;
  --butterfly-colors: #ff69b4, #8a2be2, #00bfff;
}

/* Frühling: Galaktische Blütenblätter */
body.theme-spring .cosmic-petal {
  position: fixed;
  width: 12px;
  height: 12px;
  background: var(--blossom-pink);
  border-radius: 50% 0;
  animation: petalFall 15s linear infinite;
  z-index: 3;
  pointer-events: none;
}

.cosmic-petal:nth-child(odd) { 
  background: var(--flower-white);
  animation-duration: 12s;
}

@keyframes petalFall {
  from { 
    transform: translateY(-100vh) rotate(0deg);
    opacity: 1;
  }
  to { 
    transform: translateY(100vh) rotate(720deg);
    opacity: 0;
  }
}

/* Frühling: Galaktische Schmetterlinge */
body.theme-spring .space-butterfly {
  position: fixed;
  font-size: 24px;
  animation: butterflyDance 20s ease-in-out infinite;
  z-index: 4;
  pointer-events: none;
}

.space-butterfly:nth-child(1) { 
  top: 25%; left: 15%; 
  animation-delay: 0s;
  color: var(--butterfly-colors);
}
.space-butterfly:nth-child(2) { 
  top: 68%; right: 18%; 
  animation-delay: 12s;
  color: #8a2be2;
}

@keyframes butterflyDance {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(50px, -30px) rotate(15deg); }
  50% { transform: translate(-20px, -60px) rotate(-10deg); }
  75% { transform: translate(30px, -20px) rotate(20deg); }
}

/* ================================================
 * ❄️ WINTER - GALAKTISCHER EIS-PLANET
 * ================================================ */

body.theme-winter {
  --galaxy-core-color: #e6f3ff;      /* Eisblau */
  --galaxy-mid-color: #b3d9ff;       /* Helles Blau */
  --galaxy-outer-color: #f0f8ff;     /* Alice Blue */
  --galaxy-arm-color: rgba(70, 130, 180, 0.2);
  
  --star-color-1: #e0ffff;           /* Helles Cyan */
  --star-color-2: #b0e0e6;           /* Powder Blue */
  --star-color-3: #ffffff;           /* Weiß */
  --star-color-4: #afeeee;           /* Pale Turquoise */
  
  /* Winter-spezifische Farben */
  --snow-white: #ffffff;
  --ice-blue: #87ceeb;
  --crystal-clear: rgba(255, 255, 255, 0.8);
  --frost-silver: #c0c0c0;
}

/* Winter: Galaktische Schneeflocken */
body.theme-winter .cosmic-snowflake {
  position: fixed;
  color: var(--snow-white);
  font-size: 20px;
  animation: snowfall 10s linear infinite;
  z-index: 3;
  pointer-events: none;
  text-shadow: 0 0 10px var(--crystal-clear);
}

.cosmic-snowflake:nth-child(odd) { animation-duration: 8s; }
.cosmic-snowflake:nth-child(even) { animation-duration: 12s; }

@keyframes snowfall {
  from { 
    transform: translateY(-100vh) rotate(0deg);
    opacity: 1;
  }
  to { 
    transform: translateY(100vh) rotate(360deg);
    opacity: 0;
  }
}

/* Winter: Galaktische Eiskristalle */
body.theme-winter .space-crystal {
  position: fixed;
  width: 20px;
  height: 20px;
  background: linear-gradient(45deg, var(--crystal-clear), var(--ice-blue));
  transform: rotate(45deg);
  animation: crystalShimmer 6s ease-in-out infinite;
  z-index: 3;
  pointer-events: none;
  box-shadow: 0 0 15px var(--crystal-clear);
}

.space-crystal:nth-child(1) { top: 18%; left: 12%; animation-delay: 0s; }
.space-crystal:nth-child(2) { top: 72%; right: 15%; animation-delay: 3s; }
.space-crystal:nth-child(3) { top: 42%; left: 75%; animation-delay: 6s; }

@keyframes crystalShimmer {
  0%, 100% { opacity: 0.6; transform: rotate(45deg) scale(1); }
  50% { opacity: 1; transform: rotate(45deg) scale(1.2); }
}

/* ================================================
 * 🍂 HERBST - GALAKTISCHER WALD-PLANET
 * ================================================ */

body.theme-autumn {
  --galaxy-core-color: #faf0e6;      /* Leinen */
  --galaxy-mid-color: #deb887;       /* Burlywood */
  --galaxy-outer-color: #f5deb3;     /* Wheat */
  --galaxy-arm-color: rgba(139, 69, 19, 0.2);
  
  --star-color-1: #cd853f;           /* Peru */
  --star-color-2: #d2691e;           /* Chocolate */
  --star-color-3: #ff8c00;           /* Dunkles Orange */
  --star-color-4: #daa520;           /* Goldenrod */
  
  /* Herbst-spezifische Farben */
  --maple-red: #ff6347;
  --oak-brown: #8b4513;
  --golden-yellow: #ffd700;
  --russet-orange: #cd853f;
}

/* Herbst: Galaktische Blätter - weniger störend */
body.theme-autumn .cosmic-leaf {
  position: fixed;
  font-size: 16px;
  animation: leafDrift 15s ease-in-out infinite;
  z-index: 2;
  pointer-events: none;
  opacity: 0.6;
}

/* Weniger Blätter und weiter auseinander positioniert */
.cosmic-leaf:nth-child(1) { 
  color: var(--maple-red);
  top: 5%; left: 88%;
  animation-delay: 0s;
}
.cosmic-leaf:nth-child(2) { 
  color: var(--golden-yellow);
  top: 38%; left: 8%;
  animation-delay: 10s;
}

@keyframes leafDrift {
  0% { transform: translateY(-20px) rotate(0deg); }
  25% { transform: translateY(20px) rotate(90deg); }
  50% { transform: translateY(100px) rotate(180deg); }
  75% { transform: translateY(150px) rotate(270deg); }
  100% { transform: translateY(200px) rotate(360deg); }
}

/* ================================================
 * 🎮 DISCORD BOT & JAM-TOGETHER INTEGRATION
 * ================================================ */

/* Discord Bot Bereich - Theme-spezifische Anpassungen */
.discord-container,
.jam-container {
  background: var(--bg-glass);
  backdrop-filter: blur(20px);
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  box-shadow: var(--shadow-strong);
  position: relative;
  z-index: 10;
}

/* Halloween: Discord wird zum Geister-Chat */
body.theme-halloween .discord-container {
  background: linear-gradient(135deg, 
    rgba(139, 0, 0, 0.2), 
    rgba(255, 107, 53, 0.1));
  border-color: var(--pumpkin-orange);
  box-shadow: 
    0 0 30px rgba(255, 107, 53, 0.3),
    inset 0 0 20px rgba(139, 0, 0, 0.2);
}

body.theme-halloween .discord-container::before {
  content: '👻🎃💀';
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 24px;
  animation: spookyFloat 4s ease-in-out infinite;
}

/* Ostern: Discord wird zum Hasen-Chat */
body.theme-easter .discord-container {
  background: linear-gradient(135deg, 
    rgba(255, 182, 193, 0.2), 
    rgba(221, 160, 221, 0.1));
  border-color: var(--flower-pink);
}

body.theme-easter .discord-container::before {
  content: '🐰🥚🌸';
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 24px;
  animation: easterBounce 3s ease-in-out infinite;
}

/* Sommer: Discord wird zum Beach-Chat */
body.theme-summer .discord-container {
  background: linear-gradient(135deg, 
    rgba(255, 215, 0, 0.2), 
    rgba(0, 191, 255, 0.1));
  border-color: var(--sun-yellow);
}

body.theme-summer .discord-container::before {
  content: '🏖️🌊☀️';
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 24px;
  animation: beachWave 5s ease-in-out infinite;
}

/* JAM-TOGETHER: Galaktische Musik-Session */
.jam-container {
  border: 2px solid var(--accent);
  background: radial-gradient(ellipse at center,
    var(--bg-glass),
    rgba(138, 43, 226, 0.1));
}

.jam-container::after {
  content: '🎵🚀🎶';
  position: absolute;
  top: 50%;
  right: -15px;
  transform: translateY(-50%);
  font-size: 20px;
  animation: musicFloat 3s ease-in-out infinite;
}

/* Animationen für spezielle Bereiche */
@keyframes spookyFloat {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-10px); }
}

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

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

@keyframes musicFloat {
  0%, 100% { transform: translateY(-50%) scale(1); }
  50% { transform: translateY(-50%) scale(1.2); }
}

/* ================================================
 * 📱 RESPONSIVE ATMOSPHERIC ADJUSTMENTS
 * ================================================ */

@media (max-width: 768px) {
  /* Kleinere Effekte auf Mobile */
  .galactic-sun { width: 50px; height: 50px; }
  .galactic-sun::before { font-size: 32px; }
  .space-palm { font-size: 40px; }
  .ghost { width: 30px; height: 45px; }
  .ghost::before { font-size: 18px; }
  .cosmic-snowflake { font-size: 16px; }
  .space-butterfly { font-size: 20px; }
  
  /* Reduzierte Animation-Komplexität */
  body::after { animation-duration: 600s; }
  
  /* Deaktiviere schwere Effekte bei reduzierten Bewegungen */
  @media (prefers-reduced-motion: reduce) {
    .ghost, .cosmic-leaf, .cosmic-snowflake, 
    .space-butterfly, .cosmic-petal, 
    .easter-egg, .bat { display: none; }
  }
}

/* ================================================
 * 🎨 DYNAMIC CONTENT INJECTION
 * ================================================ */

/* JavaScript wird diese Elemente dynamisch erstellen */
.theme-halloween .atmospheric-effects { content: 'ghosts bats webs'; }
.theme-easter .atmospheric-effects { content: 'eggs bunnies petals'; }
.theme-summer .atmospheric-effects { content: 'sun palms waves'; }
.theme-spring .atmospheric-effects { content: 'flowers butterflies petals'; }
.theme-winter .atmospheric-effects { content: 'snowflakes crystals frost'; }
.theme-autumn .atmospheric-effects { content: 'leaves wind harvest'; }