/* 3D Container full screen */
#container3D {
  width: 100%;
  height: 100vh;
  position: relative;
}

/* UI Overlay oben */
#uiControls {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;

  padding: 15px 20px;
  border-radius: 12px;

  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);

  z-index: 10;
}

/* Date Picker größer */
#datePicker {
  font-size: 18px;
  padding: 8px 12px;
  border-radius: 8px;
  border: none;
}

/* Slider Bereich */
#timeControls {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Slider */
#timeSlider {
  width: 250px;
}

/* Zeitanzeige */
#timeLabel {
  font-size: 18px;
  color: white;
  min-width: 60px;
  text-align: center;
}

/* MOBILE OPTIMIERUNG */
@media (max-width: 600px) {
  #uiControls {
    width: 90%;
    padding: 15px;
  }

  #timeSlider {
    width: 100%;
  }

  #timeLabel {
    font-size: 20px;
  }

  #datePicker {
    font-size: 20px;
  }
}