/* Landau-webdesign.de Exact Wave Styles */

/* Wave Shape Divider - Bottom of Hero Section */
.custom-shape-divider-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  transform: rotate(180deg);
  z-index: 10;
}

.custom-shape-divider-bottom svg {
  position: relative;
  display: block;
  width: calc(100% + 1.3px);
  height: 150px;
}

.custom-shape-divider-bottom .shape-fill {
  fill: #FFFFFF;
}

/* Alternative for dark backgrounds */
.custom-shape-divider-bottom-dark {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  transform: rotate(180deg);
  z-index: 10;
}

.custom-shape-divider-bottom-dark svg {
  position: relative;
  display: block;
  width: calc(100% + 1.3px);
  height: 150px;
}

.custom-shape-divider-bottom-dark .shape-fill {
  fill: #1a1a1a;
}

/* Upward Wave (Top of Section) */
.custom-shape-divider-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  z-index: 10;
}

.custom-shape-divider-top svg {
  position: relative;
  display: block;
  width: calc(100% + 1.3px);
  height: 150px;
  transform: rotateY(180deg);
}

.custom-shape-divider-top .shape-fill {
  fill: #FFFFFF;
}

/* Responsive Heights */
@media (max-width: 1200px) {
  .custom-shape-divider-bottom svg,
  .custom-shape-divider-bottom-dark svg,
  .custom-shape-divider-top svg {
    height: 120px;
  }
}

@media (max-width: 768px) {
  .custom-shape-divider-bottom svg,
  .custom-shape-divider-bottom-dark svg,
  .custom-shape-divider-top svg {
    height: 80px;
  }
}

@media (max-width: 480px) {
  .custom-shape-divider-bottom svg,
  .custom-shape-divider-bottom-dark svg,
  .custom-shape-divider-top svg {
    height: 60px;
  }
}

/* Ensure hero section accommodates waves */
.hero-with-waves {
  position: relative;
  overflow: visible !important;
  padding-bottom: 150px !important;
}

@media (max-width: 1200px) {
  .hero-with-waves {
    padding-bottom: 120px !important;
  }
}

@media (max-width: 768px) {
  .hero-with-waves {
    padding-bottom: 80px !important;
  }
}

@media (max-width: 480px) {
  .hero-with-waves {
    padding-bottom: 60px !important;
  }
}