/* =========================================================
   11. AMC HERO – FOTO-WELLE
   Organischer Übergang vom Hero zum Folgeinhalt
   ========================================================= */

.amc-hero-wave {
  --amc-wave-color: #fcfbf8;

  position: relative;
  z-index: 5;

  /* Aus dem Enfold-Inhaltscontainer
     auf die volle Browserbreite ziehen */
  width: 100vw;
  max-width: none;

  left: 50%;
  transform: translateX(-50%);

  /* Höhe der Welle */
  height: 88px;

  /* Welle nach oben über den Hero schieben */
  margin-top: -88px;

  overflow: visible;
  pointer-events: none;
}

.amc-hero-wave svg {
  display: block;

  width: 100%;
  height: 100%;
}

.amc-hero-wave path {
  fill: var(--amc-wave-color);
}

/* Haarlinien-Schutz am Übergang zum Folgeinhalt */
.amc-hero-wave::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 3px;
  background: var(--amc-wave-color);
}

/* =========================================================
   11.1 AMC HERO – FOTO-WELLE / TABLET
   ========================================================= */

@media only screen and (max-width: 989px) {

  .amc-hero-wave {
    height: 72px;
    margin-top: -72px;
  }

}


/* =========================================================
   11.2 AMC HERO – FOTO-WELLE / MOBILE
   ========================================================= */

@media only screen and (max-width: 767px) {

  .amc-hero-wave {
    height: 54px;
    margin-top: -54px;
  }

}

/* =========================================================
   11.3 AMC HERO – FOTO-WELLE
   ENFOLD CODE-BLOCK NEUTRALISIEREN
   ---------------------------------------------------------
   Der Code-Block der Welle soll keinerlei eigenen
   Platz zwischen Hero und Folgesektion beanspruchen.
   ========================================================= */

#top .avia_codeblock_section:has(.amc-hero-wave),
#top .avia_codeblock:has(.amc-hero-wave) {
  margin: 0 !important;
  padding: 0 !important;

  min-height: 0 !important;
  height: 0 !important;

  line-height: 0 !important;

  overflow: visible !important;
}

