/* 🌌 Allgemeines Layout */
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  color: white;
  transition: background 1s ease, color 1s ease;
}

/* 🌟 Glassmorphism */
.glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
}

/* ✨ Loader */
#loader {
  position: fixed;
  inset: 0;
  background: #0d0d0d;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}
#loader img { width: 120px; margin-bottom: 20px; }
.loader-spinner {
  border: 6px solid rgba(255, 255, 255, 0.2);
  border-top: 6px solid #ff0080;
  border-radius: 50%;
  width: 50px; height: 50px;
  animation: spin 1s linear infinite;
}
@keyframes spin { 100% { transform: rotate(360deg); } }
#loader p { margin-top: 15px; font-size: 1rem; color: #bbb; }

/* ✨ Header Animation */
@keyframes slideDownFade {
  0% { transform: translateY(-100%); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
.animate-header { animation: slideDownFade 1s ease forwards; }
.header-small { backdrop-filter: blur(20px); padding: 0.3rem !important; transition: all 0.3s ease; }

/* Navigation */
.nav-link {
  color: white; position: relative; transition: color 0.3s ease;
}
.nav-link::after {
  content: ""; position: absolute; bottom: -5px; left: 0;
  width: 0%; height: 2px;
  background: linear-gradient(90deg, #ff0080, #00eaff);
  transition: width 0.3s ease;
}
.nav-link:hover { color: #ff80e0; }
.nav-link:hover::after { width: 100%; }

/* 🎨 Theme Button */
.theme-btn {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid white;
  cursor: pointer;
  background: conic-gradient(#ff0080, #ff0, #0ff, #00f, #f0f, #ff0080);
  background-size: 200% 200%;
  animation: spinColors 5s linear infinite;
  box-shadow: 0 0 8px rgba(255,255,255,0.6);
}
@keyframes spinColors {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* Sidebar */
.sidebar { position: fixed; top: 0; right: -320px; width: 300px; height: 100%; padding: 20px; transition: right 0.4s ease; z-index: 10000; }
.sidebar.open { right: 0; }

/* 🌈 Cards */
.card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(0,0,0,0.4);
}

/* 🎠 Sender-Karussell */
.carousel { display: flex; overflow-x: auto; gap: 20px; padding: 20px; scroll-snap-type: x mandatory; }
.carousel::-webkit-scrollbar { display: none; }
.carousel-item { flex: 0 0 auto; width: 250px; scroll-snap-align: center; text-align: center; }
.carousel-item img { width: 100%; border-radius: 16px; margin-bottom: 10px; transition: transform 0.3s ease; }
.carousel-item img:hover { transform: scale(1.05); }

/* Glow Effekt */
.glow {
  box-shadow: 0 0 15px rgba(255, 0, 128, 0.6), 0 0 30px rgba(0, 234, 255, 0.4);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.glow:hover {
  transform: scale(1.05);
  box-shadow: 0 0 25px rgba(255, 0, 128, 0.9), 0 0 50px rgba(0, 234, 255, 0.6);
}

/* 🦩 Flamingo Game */
#flamingoCanvas {
  display: block; margin: 30px auto;
  border: 2px solid #ff0080; border-radius: 12px;
  background: linear-gradient(180deg, #87ceeb, #f0e68c);
  box-shadow: 0 0 20px rgba(255, 0, 128, 0.6);
}
#game-controls { text-align: center; margin-top: 15px; }
#game-controls button {
  background: linear-gradient(90deg, #ff0080, #ff8c00);
  border: none; padding: 10px 20px; border-radius: 12px;
  font-size: 1rem; color: white; cursor: pointer;
  transition: transform 0.3s ease, background 0.3s ease;
}
#game-controls button:hover { transform: scale(1.1); background: linear-gradient(90deg, #ff2aa3, #ffa500); }

/* 🌦 Wetter + News */
#weather, #news { font-size: 0.9rem; line-height: 1.4; }
#news a { color: #00eaff; font-weight: bold; }
#news a:hover { color: #ff80e0; }
#weather .glass, #news .glass { padding: 12px; border-radius: 12px; }
#news p, #weather p { margin: 4px 0; }

/* 🔮 Footer Animation */
@keyframes gradientFlow { 0%{background-position:0% 50%;} 50%{background-position:100% 50%;} 100%{background-position:0% 50%;} }
.animate-gradient { background-size:200% 200%; animation:gradientFlow 10s ease infinite; }
@keyframes bounceSlow { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-5px);} }
.animate-bounce-slow { animation:bounceSlow 3s infinite; }
.fade-in { opacity:0; transform:translateY(20px); animation:fadeIn 1s ease forwards; }
@keyframes fadeIn { to {opacity:1; transform:translateY(0);} }

/* ⚖️ Legal Bar */
#legal-bar { background:rgba(20,20,20,0.9); backdrop-filter:blur(10px); border-top:1px solid rgba(255,255,255,0.1); z-index:9998; }

/* ======================= */
/* 🌙 DARKMODE             */
/* ======================= */
.theme-dark { background: linear-gradient(135deg,#1a0033,#0d1b3d,#000); color:white; }
.theme-dark .card { background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.15); }
.theme-dark .carousel-item img { box-shadow:0 0 12px rgba(255,0,128,0.5); }
.theme-dark #flamingoCanvas { background:linear-gradient(180deg,#87ceeb,#f0e68c); }

/* 💜 NEONMODE */
.theme-neon { background:radial-gradient(circle at top left,#ff00cc,#3333ff,#000); color:#e0e0ff; }
.theme-neon .card { background:rgba(255,0,128,0.15); border:1px solid rgba(0,255,255,0.3); box-shadow:0 0 20px rgba(255,0,255,0.4); }
.theme-neon .carousel-item img { box-shadow:0 0 18px rgba(0,255,255,0.8); }
.theme-neon #flamingoCanvas { background:linear-gradient(180deg,#000428,#004e92); border-color:#0ff; box-shadow:0 0 25px rgba(0,255,255,0.7); }

/* 🌴 CHILLMODE */
.theme-chill { background:linear-gradient(135deg,#88d498,#06beb6,#1f4037); color:#102a1d; }
.theme-chill .card { background:rgba(255,255,255,0.3); border:1px solid rgba(16,42,29,0.3); box-shadow:0 0 15px rgba(16,42,29,0.3); }
.theme-chill .carousel-item img { box-shadow:0 0 12px rgba(16,42,29,0.4); }
.theme-chill #flamingoCanvas { background:linear-gradient(180deg,#b2fefa,#0ed2f7); border-color:#14532d; box-shadow:0 0 20px rgba(20,83,45,0.6); }

/* 🎵 Now Playing Bereich */
#now-playing {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
#now-playing-cover {
  width: 220px;
  height: 220px;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 0 25px rgba(255,0,128,0.7);
  margin-bottom: 8px;
}

/* 🎵 Equalizer Animation */
.equalizer {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 14px;
  margin-left: 6px;
}
.equalizer span {
  display: block;
  width: 3px;
  background: #ff0080;
  animation: bounce 1s infinite ease-in-out;
}
.equalizer span:nth-child(1){animation-delay:0s}
.equalizer span:nth-child(2){animation-delay:.2s}
.equalizer span:nth-child(3){animation-delay:.4s}
.equalizer span:nth-child(4){animation-delay:.6s}
.equalizer span:nth-child(5){animation-delay:.8s}

@keyframes bounce {
  0%,100%{height:4px}
  50%{height:14px}
}

/* 🎵 Audio Player Styling */
audio {
  width: 100%;
  border-radius: 12px;
  background: rgba(0,0,0,0.3);
  backdrop-filter: blur(6px);
}
audio::-webkit-media-controls-panel {
  background: rgba(0,0,0,0.4);
}

/* 📱 Mobile Anpassung */
@media (max-width: 640px) {
  .carousel-item { width: 180px; }
  #now-playing-cover { width: 160px; height: 160px; }
}