@media screen and (max-width: 1020px) {
  body:has(.hero-header) .top-logo {
    left: 0;
    transform: translateX(50%);
  }
}
.hero-header {
  position: relative;
  height: 100vh;
  width: auto;
}
.hero-header__new-badge {
  top: 0;
  right: 2rem;
  position: absolute;
  z-index: 10;
}
.hero-header__new-badge img {
  width: 80%;
  height: auto;
}
@media screen and (max-width: 1366px) {
  .hero-header__new-badge img {
    width: 60%;
    margin-left: 20%;
  }
}
@media screen and (max-width: 1020px) {
  .hero-header__new-badge--desktop-only {
    display: none;
  }
}
.hero-header__image {
  height: 100vh;
  width: 100%;
}
.hero-header__image img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.hero-header__image--desktop, .hero-header__image--mobile {
  display: block;
  height: 100vh;
  width: 100%;
}
.hero-header__image--desktop img, .hero-header__image--desktop picture, .hero-header__image--desktop > *, .hero-header__image--mobile img, .hero-header__image--mobile picture, .hero-header__image--mobile > * {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.hero-header__image--desktop {
  display: block;
}
.hero-header__image--mobile {
  display: none;
}
.hero-header__content {
  display: flex;
  position: absolute;
  top: 0;
  z-index: 2;
  height: 100%;
  width: 100%;
  margin: 0 auto;
}
.hero-header__content .container {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.hero-header__content .text {
  margin-bottom: 10vh;
}
.hero-header__content .text p {
  font-family: "Avenir, sans-serif";
  color: black;
  font-size: calc(clamp(3.5rem, 1.7419rem + 7.4026vw, 10.625rem));
  line-height: 100%;
  text-transform: uppercase;
  letter-spacing: 1.7px;
  margin: 0;
  margin-bottom: 2rem;
  margin-left: -1rem;
}
@media screen and (max-width: 1020px) {
  .hero-header__content .text p {
    margin-left: 0;
  }
}
.hero-header__content .text.white p {
  color: white;
}
.hero-header__product {
  width: 50%;
}
.hero-header__product img {
  width: 100%;
  height: auto;
}
.hero-header__headline {
  font-family: "Avenir, sans-serif";
  color: black;
  font-size: calc(clamp(1.375rem, 1.1591rem + 0.9091vw, 2.25rem));
  font-weight: 400;
}
.hero-header__headline.white {
  color: white;
}
@media screen and (max-width: 1020px) {
  .hero-header__image--desktop {
    display: none;
  }
  .hero-header__image--mobile {
    display: block;
  }
  .hero-header__new-badge {
    width: 50%;
  }
  .hero-header__image img {
    object-position: center right;
  }
  .hero-header__content {
    align-items: flex-end;
  }
  .hero-header__content .container {
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
  }
  .hero-header__content .text {
    margin-bottom: 3rem;
  }
  .hero-header__product {
    width: 50%;
  }
}
@media screen and (max-width: 480px) {
  .hero-header {
    /* swap visibility: show mobile image, hide desktop image */
  }
  .hero-header__image--desktop {
    display: none;
  }
  .hero-header__image--mobile {
    display: block;
  }
  .hero-header__new-badge {
    width: 50%;
  }
  .hero-header__image img {
    object-position: center right;
  }
  .hero-header__content {
    align-items: flex-end;
  }
  .hero-header__content .container {
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
  }
  .hero-header__content .text {
    margin-bottom: 3rem;
  }
  .hero-header__product {
    width: 80%;
  }
}
/*# sourceMappingURL=data:application/json,%7B%22version%22%3A3%2C%22sources%22%3A%5B%22var%2Fwww%2Fvhosts%2Feasyputz.de%2Fhttpdocs%2Fvendor%2Fvonheldenundgestalten%2Feasyputz-basic%2Fsrc%2FResources%2Fpublic%2Fcss%2Felements%2Fhero-header.scss%22%5D%2C%22names%22%3A%5B%5D%2C%22mappings%22%3A%22AAII%3BAACE%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAQN%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAKE%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAME%3BAAAA%3BAAAA%3BAAAA%3BAAIE%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAOA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAMJ%3BAAAA%3BAAAA%3BAAAA%3BAAIE%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAOF%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAME%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAASF%3BAAAA%3BAAAA%3BAAGA%3BAAAA%3BAAAA%3BAAIA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAASE%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAMA%3BAAAA%3BAAAA%3BAAGE%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAQE%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAMA%3BAAAA%3BAAAA%3BAAON%3BAAAA%3BAAAA%3BAAGE%3BAAAA%3BAAAA%3BAAAA%3BAAMF%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAGE%3BAAAA%3BAAAA%3BAAKF%3BAACE%3BAAAA%3BAAAA%3BAAGA%3BAAAA%3BAAAA%3BAAIA%3BAAAA%3BAAAA%3BAAKE%3BAAAA%3BAAAA%3BAAKF%3BAAAA%3BAAAA%3BAAGE%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAMA%3BAAAA%3BAAAA%3BAAKF%3BAAAA%3BAAAA%3BAAAA%3BAAKF%3BAAAA%3BAAAA%3BAAAA%3BAAEE%3BAAAA%3BAAAA%3BAAGA%3BAAAA%3BAAAA%3BAAIA%3BAAAA%3BAAAA%3BAAKE%3BAAAA%3BAAAA%3BAAKF%3BAAAA%3BAAAA%3BAAGE%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAMA%3BAAAA%3BAAAA%3BAAKF%3BAAAA%3BAAAA%3BAAAA%22%7D */