/* 🌙 Rahmen bei Touch (kurz aufleuchtend) */
#moon-img.flash-border {
  outline: 3px solid #ffcc00;
  outline-offset: 4px;
  border-radius: 8px;
  animation: flash-border 0.6s ease-out;
}

@keyframes flash-border {
  0% {
    outline-color: rgba(255, 204, 0, 0.8);
    outline-width: 3px;
  }
  50% {
    outline-color: rgba(255, 204, 0, 0.0);
    outline-width: 6px;
  }
  100% {
    outline-color: rgba(255, 204, 0, 0);
    outline-width: 0px;
  }
}

/* 🌙 Rahmen bei Hover (dauerhaft sichtbar) */
#moon-img.hover-border {
  outline: 3px solid #ffcc00;
  outline-offset: 4px;
  border-radius: 8px;
  transition: outline 0.3s ease;
}

/* 🌙 Tooltip-Box */
.moon-tooltip {
  position: absolute;
  background: rgba(0, 0, 0, 1.00);
  color: #fff;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 12px;
  max-width: 180px;
  min-width: 110px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  transform: translateX(-10%);
  white-space: normal;
  overflow-wrap: break-word;
  word-break: keep-all;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (hover: hover) and (pointer: fine) {
  #moon-img:hover {
    outline: 3px solid #ffcc00;
    outline-offset: 4px;
    border-radius: 8px;
    transition: outline 0.3s ease;
  }
}