/** Styles for Hero Element **/

.wp-block-uagb-container.hero {
  height: calc(100dvh + var(--header-height));
  width: 100dvw !important;
  transform: translateY(calc(var(--header-height) * -1));
  margin-bottom: var(--gap-m) !important;
  position: relative;

}

.wp-block-uagb-container.hero::before {
  content: "";
  top: 0;
  opacity: 0.3;
  background-color: var(--ast-global-color-2);
  background-repeat: no-repeat;
  width: 100vw;
  height: 100%;
  display: block;
  z-index: 9;
  position: absolute;
}

.wp-block-uagb-container.hero .wp-block-uagb-image,
.wp-block-uagb-container.hero .wp-block-uagb-image figure,
.wp-block-uagb-container.hero .wp-block-uagb-image figure img
 {
  height: 100%
}

.wp-block-uagb-container.hero img {
  height: 100dvh;
  width: 100dvw !important;
  object-fit: cover;
}

.wp-block-uagb-container.hero.hero-klein {
  height: 70vh;
}
.wp-block-uagb-container.hero.hero-klein img{
  height: 70vh;
  background-position: top;
}



.wp-block-uagb-container.hero .hero-txt {
 position: absolute;
 z-index: 99;
 top: 30%;
 max-width: 87vw !important;
}

.wp-block-uagb-container.hero .hero-txt.links {
  left: var(--cont-gap);
  bottom: calc(var(--cont-gap) * 2);
  top: unset;
 }
 

.wp-block-uagb-container.hero .hero-txt * {
  color: var(--ast-global-color-5) !important;

}

.wp-block-uagb-container.hero .hero-txt .heading-xxl .uagb-heading-text {
  font-size: 2.1rem !important;
  font-family: var(--headlinefont);

}

.wp-block-uagb-container.hero .hero-txt p {
  font-size: 1.4rem !important;
}



@media (max-width: 768px) {
  .wp-block-uagb-container.hero .hero-txt .heading-xxl .uagb-heading-text {
    font-size: 2rem !important;
   
}

.wp-block-uagb-container.hero .hero-txt.links {
  left: var(--gap-m);
 
}
}