/* Styles für die intro-banner Web-Komponente */
intro-banner {
  display: block;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: -30px;
  overflow: hidden;
}

intro-banner h2 {
  font-family: "Caveat Brush", cursive;
  font-weight: 400;
  font-style: normal;
  font-size: 2.3rem;
  margin: 0 0 1rem 0;
  line-height: 1;
  transform: rotate(354deg);
  text-shadow:
    0 0 12px rgba(255, 255, 255, 0.6),
    0 0 12px rgba(255, 255, 255, 0.3);
}

intro-banner p.reduced-height {
  line-height: 1.2;
  margin-left: 8px;
  transform: translateY(12px);
}

intro-banner a.btn.btn-orange {
  position: relative;
  z-index: 2;
  text-decoration: none;
  transform: rotate(359.5deg);
  box-shadow:
    -2px 2px 2px rgba(0, 0, 0, 0.7),
    var(--c-orange-shadow);
  margin-top: 36px;
}

.intro-banner {
  position: relative;
  display: block;
  height: 350px;
}
.intro-banner-back,
.intro-banner-waves {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}
.intro-banner-back {
  height: 100%;
}
.intro-banner-top-wave {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  overflow: hidden;
}
.intro-banner-top-wave,
.intro-banner-waves {
  display: flex;
  justify-content: center;
}
.intro-banner-top-wave img,
.intro-banner-waves img {
  display: block;
  flex-shrink: 0;
}
.intro-banner-back img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.intro-banner-sections {
  --intro-banner-gradient-start: 25%;
  --intro-banner-gradient-color: #d6effa;
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: space-between;
}
.intro-banner-left-section,
.intro-banner-right-section {
  height: 100%;
  width: calc(100% / 3);
  flex-shrink: 0;
}
.intro-banner-left-section {
  background: linear-gradient(
    to left,
    transparent var(--intro-banner-gradient-start),
    var(--intro-banner-gradient-color)
  );
}
.intro-banner-left-section-content {
  position: relative;
  padding-top: 106px;
  padding-left: 36px;
}
.intro-banner-left-section img {
  display: block;
  max-height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.intro-banner-right-section {
  display: flex;
  justify-content: flex-end;
  background: linear-gradient(
    to right,
    transparent var(--intro-banner-gradient-start),
    var(--intro-banner-gradient-color)
  );
}
.intro-banner-right-section img {
  display: block;
  max-height: 100%;
  position: absolute;
  top: 0;
  right: 0;
}
.intro-banner-seahorse {
  scale: 0.8;
  transform-origin: right top;
  margin-top: 112px;
  margin-right: 83px;
  transform: rotate(7deg);
}
.intro-banner-splash-right {
  scale: 0.4;
  margin-top: 24px;
  margin-right: -52px;
}

@media (min-width: 1025px) {
  .intro-banner-left-section-content {
    padding-left: 83px;
  }
  .intro-banner-splash-right {
    margin-right: -16px;
  }
  .intro-banner-seahorse {
    margin-right: 132px;
    transform: rotate(7deg);
  }
  .intro-banner-left-section img {
    left: 50px;
  }
}

@media (max-width: 819px) {
  .intro-banner-splash-right,
  .intro-banner-splash-center {
    display: none !important;
  }
  .intro-banner-splash-left {
    scale: 0.4 !important;
    transform: rotate(10deg);
  }
  .intro-banner-seahorse {
    margin-right: 43px;
  }
  .intro-banner-left-section-content {
    scale: 0.8;
    padding-top: 86px;
    padding-left: 36px;
    min-width: 280px;
  }
}

@media (max-width: 719px) {
  .intro-banner-seahorse,
  .intro-banner-splash-left {
    display: none !important;
  }
  .intro-banner-splash-right {
    display: block !important;
    margin-top: -35px;
    margin-right: -25px;
  }
}

@media (max-width: 519px) {
  .intro-banner-splash-right {
    display: none !important;
  }
  .intro-banner-back img {
    object-position: calc(50% + var(--intro-banner-background-focus-offset))
      center;
  }
}

@media (max-width: 479px) {
  .intro-banner-left-section-content {
    padding-top: 35px;
    padding-left: 0px;
    min-width: 280px;
    text-shadow:
      0 0 12px rgba(255, 255, 255, 0.6),
      0 0 12px rgba(255, 255, 255, 0.3);
  }
}

.intro-banner-splash-center {
  scale: 0.33;
  margin-left: 160px;
  margin-top: -14px;
  transform: rotate(22deg);
}
.intro-banner-splash-left {
  display: block;
  scale: 0.5;
  transform-origin: left top;
}