.bd-hero-block {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.bd-hero-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  height: 100%;
}

.bd-hero__bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bd-hero__logo {
  position: absolute;
  max-width: 30%;
  max-height: 30%;
  z-index: 2;
}

.bd-hero__logo--shadow {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

/* Aspect Ratios */
.ratio-initial img {
  aspect-ratio: auto;
}

.ratio-3by1 img.bd-hero__bg {
  aspect-ratio: 3 / 1;
}

.ratio-2by1 img.bd-hero__bg {
  aspect-ratio: 2 / 1;
}

.ratio-16by9 img.bd-hero__bg {
  aspect-ratio: 16 / 9;
}

.ratio-16by10 img.bd-hero__bg {
  aspect-ratio: 16 / 10;
}

.ratio-3by2 img.bd-hero__bg {
  aspect-ratio: 3 / 2;
}

.ratio-4by3 img.bd-hero__bg {
  aspect-ratio: 4 / 3;
}

.ratio-5by4 img.bd-hero__bg {
  aspect-ratio: 5 / 4;
}

.ratio-1by1 img.bd-hero__bg {
  aspect-ratio: 1 / 1;
}

/* Mobile Optimierung */
@media (max-width: 768px) {
  .bd-hero__logo {
    max-width: 50%;
    max-height: 50%;
  }
}