.unfassbar-container {
  width: 100%; /* Full width of the exhibit */
  max-width: 100vh; /* Ensure it doesn't exceed the viewport height */
  aspect-ratio: 1 / 1; /* Maintain a square shape */
  display: flex;
  justify-content: center;
  align-items: flex-end; /* Align content to the bottom */
  position: relative; /* For absolute positioning of children */
  overflow: hidden; /* Prevent overflow of child elements */
}

/* Speaker Icon Positioned at Middle Bottom */
.loudspeaker {
  position: absolute;
  bottom: 5%; /* Align to the bottom of the container */
  left: 50%; /* Start in the middle horizontally */
  transform: translateX(-50%); /* Center the speaker horizontally */
  width: 60%; /* 30% of the container's width */
  aspect-ratio: 1 / 1; /* Maintain square proportions */
  background-image: url('/files/unfassbar/speaker.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Audio Controls Positioned at Top Left */
.audio-controls {
  position: absolute;
  top: 10px; /* Fixed position relative to the container */
  left: 10px; /* Fixed position relative to the container */
  display: flex;
  align-items: center;
  gap: 10px; /* Add space between the button and slider */
}

/* Play Button */
.audio-control {
  background: none;
  border: none;
  width: 24px;
  height: 24px;
  cursor: pointer;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Play Icon (Triangle) */
.audio-control.play::before {
  content: '';
  width: 0;
  height: 0;
  border-left: 12px solid white; /* Triangle pointing right */
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}

/* Pause Icon (Two Bars) */
.audio-control.pause::before,
.audio-control.pause::after {
  content: '';
  width: 4px; /* Width of each bar */
  height: 14px; /* Height of the bars */
  background-color: white;
  position: relative;
  display: inline-block;
}

.audio-control.pause::before {
  margin-right: 4px; /* Space between the bars */
}

/* Slider */
.time-slider {
  width: 150px; /* Fixed width for the slider */
  height: 4px; /* Adjust height to match the thumb */
  background: gray;
  appearance: none;
}

.time-slider::-webkit-slider-thumb {
  background: white;
  border: 1px solid black;
  border-radius: 50%;
  width: 12px;
  height: 12px;
  cursor: pointer;
  margin-top: -6px; /* Centers the thumb on the track */
}

.time-slider::-webkit-slider-runnable-track {
  background: gray;
  height: 4px;
  border-radius: 2px;
}


/* Head (Ghost-like Effect) */
.headman {
  z-index: 999;
  position: absolute;
  top: 50%; /* Center vertically */
  left: 50%; /* Center horizontally */
  transform: translate(-50%, -50%);
  
  width: 25vh; /* Use viewport height for width */
  height: 25vh; /* Use viewport height for height to maintain aspect ratio */
  max-width: 200px; /* Max width to prevent it from growing too large */
  background-image: url('/files/unfassbar/head.png');
  background-size: contain; /* Ensure the image fits the element */
  background-repeat: no-repeat;
  background-position: center;

  /* Debugging: Add border to check visibility */

  /* Smooth animation */


  animation: ghostEffect 80s infinite linear; /* Continuous animation with linear timing */
}

/* Keyframe Animation for Ghost Effect */
@keyframes ghostEffect {
  0% {
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
    opacity: 1;
  }
  10% {
    transform: translate(calc(-100% + 130px), calc(100% + 110px)) rotate(45deg) scale(1.1);
    opacity: 0.5;
  }
  30% {
    transform: translate(calc(-100% - 150px), calc(100% + 170px)) rotate(120deg) scale(1.2);
    opacity: 1;
  }
  40% {
    
    opacity: 0.2;
  }
  50% {
    transform: translate(calc(-100% + 180px), calc(100% - 160px)) rotate(40deg) scale(0.8);
    opacity: 0;
  }
  70% {
    transform: translate(calc(-150% - 130px), calc(-150% - 150px)) rotate(30deg) scale(1.3);
    opacity: 1;
  }
  90% {
    transform: translate(calc(-100% + 170px), calc(100% + 180px)) rotate(180deg) scale(1.2);
    opacity: .4;
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg) scale(1);
    opacity: 1;
  }
}