.wave-top,
.wave-bottom {
  position: relative;
  --wave-height: 70px;
}

.wave-top::before,
.wave-bottom::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: var(--wave-height);
  background: var(--wave-color);
  pointer-events: none;
}

.wave-top::before {
  top: calc(-1 * var(--wave-height));

  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M0,74 C180,58 360,44 540,46 C760,48 980,72 1160,70 C1280,69 1365,60 1440,54 L1440,120 L0,120 Z'/%3E%3C/svg%3E") no-repeat center / cover;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M0,74 C180,58 360,44 540,46 C760,48 980,72 1160,70 C1280,69 1365,60 1440,54 L1440,120 L0,120 Z'/%3E%3C/svg%3E") no-repeat center / cover;
}

.wave-bottom::after {
  bottom: calc(-1 * var(--wave-height));
  transform: scaleX(-1);
 -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M0,62 C170,76 360,80 540,72 C760,60 970,42 1170,44 C1270,45 1360,50 1440,56 L1440,0 L0,0 Z'/%3E%3C/svg%3E") no-repeat center / cover;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M0,62 C170,76 360,80 540,72 C760,60 970,42 1170,44 C1270,45 1360,50 1440,56 L1440,0 L0,0 Z'/%3E%3C/svg%3E") no-repeat center / cover;
}


.wave-top {
  margin-top: var(--wave-height);
}

/* Platz für untere Welle schaffen */
.wave-bottom {
  margin-bottom: var(--wave-height);
}