.wave-container {
  position: relative;
  width: 100%;
  height: 200px; /*  Oder eine andere Höhe */
  overflow: hidden; /* Verhindert, dass überhängende Elemente sichtbar sind */
}

.wave {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%; /* Macht die Welle breiter als der Container */
  height: 100%;
  background-color: #64b5f6; /* Beispiel-Blau */
  border-radius: 50%;
  transform: translateX(-25%); /* Verschiebt die Welle leicht nach links */
}

.wave::before,
.wave::after {
  content: "";
  position: absolute;
  width: 50%;
  height: 100%;
  background-color: inherit; /* Erbt die Farbe vom übergeordneten Element */
  border-radius: inherit;
}

.wave::before {
  left: 0;
  transform: translateX(-50%); /* Verschiebt das erste Oval nach links */
}

.wave::after {
  right: 0;
  transform: translateX(50%); /* Verschiebt das zweite Oval nach rechts */
}