.ueber-container {
	
	
	}
.bild-container {
  /*position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;*/
  
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /*background-color: rgba(255, 255, 255, 0.1); /* Hier kannst du eine Hintergrundfarbe oder Transparenz einstellen */
  z-index: 999; /* Hier kannst du die Ebene bestimmen, auf der sich der Container befindet */

}

.bild1 {
  position: absolute;
  width: 357px;
  height: 204px;
  z-index:10;
}
.bild2 {
  position: absolute;
  width: 330px;
  height: 158px;
  z-index:2;
}
.bild3 {
  position: absolute;
  width: 338px;
  height: 244px;
  z-index:100;
}

.bild4 {
  position: absolute;
  width: 148px;
  height: 129px;
  z-index:5;
}


.bild1 {
  top: 0;
  right: 0;
  animation: bewegung1 10s cubic-bezier(1, 0, 0.5, 1) forwards;
}

.bild2 {
  bottom: 0;
  right: 0;
  animation: bewegung2 9s linear forwards, austausch 0s 8s forwards;;
}

.bild3 {
  /*opacity: 0;
  bottom: 0;
  left: 30px;
  animation: erscheinen 1.5s 7s forwards;*/
}

.bild4 {
  opacity: 0;
  bottom: 0;
  left: 50px;
  animation: erscheinen4 0.5s 7.7s forwards;
}


@keyframes bewegung1 {
  0% {
    top: 20%;
    right: 0;
    
  }
  100% {
    top: calc(100% - 200px);
    right: calc(100% - 200px);
    
  }
}

@keyframes bewegung2 {
  0% {
    bottom: 0;
    right: 0;
  }
  100% {
    bottom: 0;
    right: calc(100% - 100px);
  }
}

@keyframes erscheinen {
  0%, 50% {
    opacity: 0;
  }
  51%, 99% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes erscheinen4 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


@keyframes austausch {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}