#cdu-circle {
  z-index: 1;
  position: relative;
  /*margin-top: -50%;*/
  margin-left: -20%;
  padding: 2rem;
  /*-webkit-animation: spin 10s linear infinite;*/
  /*-moz-animation: spin 10s linear infinite;*/
  /*animation: spin 10s linear infinite;*/
  overflow-x: hidden;
}

@keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
  }
}

.opener-titel {
  z-index: 4;
  position: absolute;
  top: 50%;
  left: 20%;
  width: fit-content;
}

@media (max-width: 576px) {
  .opener-container {
    transform: translateY(25vh);
  }
}

@media (min-width:769px) {
  .opener-titel .h1-weiss {
    font-size: 58px;
  }
}

@media (min-width:769px) {
  #cdu-circle {
    width: 600px;
    transform: translateX(250px);
  }
}

@media (min-width:769px) {
  #opener {
    height: 100vh;
  }
}

@media (max-width:768px) {
  .opener-titel {
    left: 10%;
  }
}

@media (max-width:768px) {
  #opener {
    height: 100vh;
  }
}

@media (max-width:768px) {
  .opener-titel .h1-weiss {
    font-size: 50px;
  }
}

@media (max-width:768px) {
  #cdu-circle {
    width: 600px;
    transform: translateX(250px);
  }
}

@media (max-width:576px) {
  .opener-titel .h1-weiss {
    font-size: 35px;
  }
}

@media (max-width:576px) {
  #cdu-circle {
    width: 350px;
    transform: translateX(50px);
  }
}

@media (max-width:576px) {
  .opener-titel .h1-weiss {
    font-size: 35px;
  }
}

@media (max-width:576px) {
  #cdu-circle {
    width: 350px;
    transform: translateX(50px);
  }
}

@media (max-width:360px) {
  .opener-titel .h1-weiss {
    font-size: 20px;
  }
}

@media (max-width:360px) {
  #cdu-circle {
    width: 150px;
    transform: translateX(50px);
  }
}

@media (min-width:992px) {
  #cdu-circle {
    width: 800px;
    transform: translateX(200px);
  }
}

#opener div img {
  z-index: 0;
  position: relative;
}

.opener-container {
  position: relative;
}