/* Siehe header.css */
.layout-container {
  .header-banner {
    background: linear-gradient(180deg, #067BAF 0%, #00364E 100%);
    padding-top: 76px;
    position: relative;
  }

  .header-banner .background-icons {
    position: absolute;
    top: 40%;
    right: 5%;
  }

  @media (min-width: 446px) {
    .header-banner .background-icons {
      top: 48%;
      right: 14%;
    }
  }
  @media (min-width: 778px) {
    .header-banner .background-icons {
      top: 18%;
      left: 59%;
      right: unset;
    }
  }
  @media (min-width: 1046px) {
    .header-banner .background-icons {
      top: 32%;
      left: 53%;
    }
  }

  .header-banner .background-icon {
    position: absolute;
  }

  .header-banner .background-icon-berge {
    top: 328px;
    right: 44px;
  }

  .header-banner .background-icon-flieger {
    top: 0;
    right: 0;
  }

  .header-banner .background-icon-liege {
    top: 20px;
    right: 35px;
  }

  /* Weisse Kurve */

  .header-banner > svg {
    margin-top: 136px;
  }

  /* Wide-Width Container */

  .header-banner > div {
    max-width: var(--wide-width);
    margin: 0 auto;

    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    flex-direction: column-reverse;

    /* Das ist wichtig damit der Inhalt über den Background Icons liegt.
      Der z-index von den Background Icons kann nicht kleiner gemacht werden da sie dann hinter dem
      Hintergrund von div.header-banner liegen. */
    position: relative;
    z-index: 1;

    font-size: var(--font-size-xxl);
  }

  @media (min-width: 778px) {
    .header-banner > div {
      flex-direction: row;
      font-size: var(--font-size-xl);
    }
  }

  /* Texte */

  .header-banner p {
    font-size: var(--font-size-xxl);
    font-weight: var(--font-weight-bold);
    line-height: 1.3;
    color: white;
    margin: 0;
  }

  @media (min-width: 778px) {
    .header-banner p {
      flex-direction: row;
      font-size: var(--font-size-xl);
    }
  }

  /* Button */

  .header-banner .wp-block-buttons {
    margin-top: 20px;
  }

  /* Bilder Container */

  .header-banner > div > div:last-child {
    position: relative;
    z-index: -1;
    margin-bottom: 9vw;
  }

  @media (min-width: 778px) {
    .header-banner > div > div:last-child {
      position: absolute;
      right: 0;
      top: 0;
      width: unset;
    }
  }

  .header-banner figure[data-banner-bild-id] {
    border: 5px white solid;
    border-radius: 10px;
    box-shadow: 0 0 #00000029;

    position: absolute;
  }

  .header-banner figure[data-banner-bild-id] > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .header-banner figure[data-banner-bild-id="0"] {
    position: relative;
    width: clamp(100%, 80vw, 790px);
    z-index: 3;
    top: 6%;
    left: 50%;
    transform: translateX(-50%);
  }

  .header-banner figure[data-banner-bild-id="1"] {
    height: clamp(72%, 39vw, 400px);
    z-index: 2;
    top: 20%;
    left: 7%;
    transform: rotate(-8deg);
  }

  .header-banner figure[data-banner-bild-id="2"] {
    height: clamp(76%, 51vw, 430px);
    z-index: 1;
    bottom: 5%;
    left: 15%;
    transform: rotate(6deg);
  }

  @media (min-width: 778px) {
    .header-banner figure[data-banner-bild-id="0"] {
      width: clamp(300px, 38vw, 790px);
      left: unset;
      transform: translateX(0);
    }

    .header-banner figure[data-banner-bild-id="1"] {
      height: clamp(100px, 16vw, 400px);
      top: 28%;
      left: 4%;
    }

    .header-banner figure[data-banner-bild-id="2"] {
      height: clamp(130px, 20vw, 430px);
      bottom: 10%;
      left: 15%;
    }
  }
}