/* Grundlayout */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow-x: hidden;
  font-family: sans-serif;
}

/* Kamerabereich */
.kamera-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-color: black;
  perspective: 1200px;
}

/* Bild mit Kamerafahrt */
.kamera-bild {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  height: 120vh;
  object-fit: cover;
  transform: translate(-50%, -50%) scale(1) rotateY(0deg) rotateX(0deg);
  animation: einschweben 3s ease-out forwards, schwenkZoom 15s infinite ease-in-out;
  animation-delay: 0s, 3s;
  z-index: 1;
}

/* Text über dem Bild */
.bild-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%);
  text-align: center;
  color: white;
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.7);
  z-index: 1;
  opacity: 0;
  animation: textFade 3s ease-out forwards;
  animation-delay: 1s;
}

.bild-text h1 {
  margin: 0;
  font-size: 3em;
}

.bild-text h2 {
  margin: 0;
  font-size: 1.5em;
}

#header {
  position: relative;
  z-index: 10; /* höher als das Bild */
  background-color: white; /* oder transparent, je nach Design */
  width: 100%;
  height: auto;
    background-color: rgb(255, 255, 255);
}

/* Animationsdefinitionen */
@keyframes textFade {
  0% {
    opacity: 0;
    transform: translate(-50%, -60%);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

@keyframes einschweben {
  0% {
    opacity: 0;
    transform: translate(-50%, -30%) scale(0.95) rotateY(0deg) rotateX(0deg);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotateY(0deg) rotateX(0deg);
  }
}

@keyframes schwenkZoom {
  0% {
    transform: translate(-50%, -50%) scale(1) rotateY(0deg) rotateX(0deg);
  }
  25% {
    transform: translate(-50%, -50%) scale(1.05) rotateY(10deg) rotateX(5deg);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.1) rotateY(0deg) rotateX(0deg);
  }
  75% {
    transform: translate(-50%, -50%) scale(1.05) rotateY(-10deg) rotateX(-5deg);
  }
  100% {
    transform: translate(-50%, -50%) scale(1) rotateY(0deg) rotateX(0deg);
  }
}