/* Fade-Animation für schwebende Elemente */

/* Base visibility class */
.fade-element {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

/* Show state with quick fade-in */
.fade-element.visible {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
}

/* Auto-hide state with slow fade-out */
.fade-element.auto-hide {
  opacity: 0;
  visibility: hidden;
  transition: opacity 2s ease-in-out, visibility 2s ease-in-out;
}

/* Hover state to prevent hiding */
.fade-element.auto-hide:hover {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
}

/* Force visible state (e.g. during user interaction) */
.fade-element.force-visible {
  opacity: 1 !important;
  visibility: visible !important;
  transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
}