/* Musikbutton nur für index.html – runder Schalter */
.home-sound-control {
  position: fixed;
  isolation: isolate;
  left: 22px;
  bottom: 22px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  font-family: Arial, sans-serif;
}

#homeSoundToggle {
  width: 76px;
  height: 76px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(244, 196, 48, .65);
  border-radius: 50%;
  color: #fff;
  background: rgba(5, 28, 21, .94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 6px 22px rgba(0, 0, 0, .28);
  font-size: 30px;
  cursor: pointer;
  position: relative;
  isolation: isolate;
  overflow: visible;
  transition: background .35s, border-color .35s, transform .25s, box-shadow .35s;
}

/* Sanfte Aurora hinter dem runden Musikknopf – nur dieser Button */
#homeSoundToggle::before,
#homeSoundToggle::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
  opacity: .42;
  filter: blur(10px);
  transform: scale(.94);
  animation: soundAurora 5.5s ease-in-out infinite;
}

#homeSoundToggle::after {
  inset: -13px;
  filter: blur(16px);
  opacity: .24;
  animation: soundAurora 7.5s ease-in-out infinite reverse;
}

#homeSoundToggle.is-off {
  background: rgba(9, 29, 21, .95);
  border-color: rgba(244, 196, 48, .55);
}

#homeSoundToggle.is-playing {
  background: #13865b;
  border-color: #53d69a;
  box-shadow: 0 0 0 3px rgba(19, 134, 91, .16), 0 6px 22px rgba(0, 0, 0, .28);
}

#homeSoundToggle.is-playing::before {
  background: conic-gradient(from 0deg, transparent 0 12%, rgba(83, 214, 154, .9) 20%, rgba(244, 196, 48, .72) 34%, transparent 48% 62%, rgba(83, 214, 154, .72) 76%, transparent 90%);
  opacity: .72;
}

#homeSoundToggle.is-playing::after {
  background: radial-gradient(circle, rgba(19, 134, 91, .7), rgba(83, 214, 154, .28) 48%, transparent 72%);
  opacity: .55;
}

#homeSoundToggle.is-off::before {
  background: conic-gradient(from 20deg, transparent 0 18%, rgba(255, 119, 126, .75) 28%, rgba(244, 196, 48, .65) 40%, transparent 56% 72%, rgba(255, 119, 126, .55) 82%, transparent 94%);
  opacity: .38;
}

#homeSoundToggle.is-off::after {
  background: radial-gradient(circle, rgba(168, 47, 54, .58), rgba(244, 196, 48, .18) 48%, transparent 72%);
  opacity: .28;
}

@keyframes soundAurora {
  0%, 100% { transform: rotate(0deg) scale(.92); filter: blur(10px); }
  35% { transform: rotate(120deg) scale(1.06); filter: blur(13px); }
  68% { transform: rotate(245deg) scale(.98); filter: blur(9px); }
}

#homeSoundToggle:hover {
  transform: translateY(-2px);
}

#homeSoundToggle.is-off:hover {
  background: #a82f36;
  border-color: #f07c82;
}

#homeSoundToggle:focus-visible {
  outline: 2px solid #f4c430;
  outline-offset: 4px;
}

.home-sound-icon {
  font-size: 30px;
  line-height: 1;
}

.home-sound-status {
  display: block;
  min-width: 42px;
  text-align: center;
  font-size: 13px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #f2f2f2;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .8);
}

.home-sound-status.is-on {
  color: #53d69a;
}

.home-sound-status.is-off {
  color: #ff777e;
}

#homeSoundToggle.is-playing .home-sound-icon {
  animation: homeSoundPulse 2.8s ease-in-out infinite;
}

@keyframes homeSoundPulse {
  0%, 100% { opacity: .8; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.1); }
}

@media (max-width: 600px) {
  .home-sound-control { left: 12px; bottom: 12px; gap: 4px; }
  #homeSoundToggle { width: 62px; height: 62px; font-size: 25px; }
  .home-sound-icon { font-size: 25px; }
  .home-sound-status { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  #homeSoundToggle, #homeSoundToggle.is-playing .home-sound-icon,
  #homeSoundToggle::before, #homeSoundToggle::after { animation: none; transition: none; }
}