/* HERO header background image */
.hero{
  position: relative;
  overflow: hidden;

  /* Fullscreen Landing */
  height: 100vh;
  box-sizing: border-box;

  /* Platz für fixe Topbar */
  padding-top: var(--topbarH);

  /* schützt vor zu kleinen Screens */
  min-height: 620px;

  isolation: isolate;
}

@media (max-width: 640px){
  .hero{ min-height: 520px; }
}


.hero::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(7,6,7,var(--heroOverlay)), rgba(7,6,7,var(--heroOverlay))),
    url("../../media/img/header_background.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1.02);
  filter: saturate(.95) contrast(1.05);
  z-index: 0;
}

.hero::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(circle at 50% 35%, rgba(0,0,0,.08), rgba(0,0,0,.68) 75%);
  z-index: 1;
}

/* HERO right-side photo (aligned to full hero height, flush right) */
.hero-photo{
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;

  height: auto;              /* height comes from top/bottom */
  max-height: none;

  display: flex;
  align-items: flex-end;
  justify-content: flex-end;

  pointer-events: none;
  z-index: 10;               /* above ::before and ::after */

  opacity: .82;
  filter: brightness(.80) contrast(1.05) saturate(.95)
        drop-shadow(0 18px 40px rgba(0,0,0,.55));
}

.hero-photo img{
  height: 100%;
  width: auto;
  object-fit: contain;
  display: block;

  /* bottom fade (smooth) */
  -webkit-mask-image: linear-gradient(to bottom,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 78%,
    rgba(0,0,0,0) 100%
  );
  mask-image: linear-gradient(to bottom,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 78%,
    rgba(0,0,0,0) 100%
  );

  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* Keep the centered text above everything */
.hero .mx-auto{
  position: relative;
  z-index: 11;
}

@media (max-width: 1024px){
  .hero-photo{
    opacity: .75;
    filter: brightness(.70) contrast(1.05) saturate(.95)
            drop-shadow(0 16px 34px rgba(0,0,0,.55));
  }
}

@media (max-width: 640px){
  .hero-photo{ display: none; }
}



.hero .hero-logo{
  width: clamp(405px, 54vw, 708px);
  height: auto;
  display: block;
  margin: 0 auto;

  /* mehr Brillanz + Glow zurück */
  filter:
    brightness(1.02)
    saturate(1.14)
    contrast(1.14)
    drop-shadow(0 0 4px rgba(216,245,255,.22))
    drop-shadow(0 0 12px rgba(64,185,235,.20))
    drop-shadow(0 0 28px rgba(64,185,235,.14));

  opacity: 1;
}