/* Transparent / leicht dunkler Hintergrund über Video */
.uk-navbar-container.uk-navbar-transparent {
    background-color: rgba(0,0,0,0.1); /* 10% Deckkraft */
    backdrop-filter: blur(5px);        /* optional: leichter Blur */
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 10;                       /* über Video */
}

/* Desktop-Menü Links/Rechts */
.uk-navbar-right ul.uk-navbar-nav li a,
.uk-navbar-left ul.uk-navbar-nav li a {
    color: #fff;                       /* weiße Schrift über Video */
}
/* Normaler Abstand zwischen allen Punkten */
.uk-navbar-right ul.uk-navbar-nav > li {
    margin-left: 20px;  /* Abstand zwischen den Punkten */
}

/* Letzter Menüpunkt: zusätzlicher Abstand zum Bildschirmrand */
.uk-navbar-right ul.uk-navbar-nav > li:last-child {
    margin-right: 40px; /* z. B. 40px Abstand rechts, anpassen nach Wunsch */
}
/* Hover-Effekt */
.uk-navbar-right ul.uk-navbar-nav li a:hover,
.uk-navbar-left ul.uk-navbar-nav li a:hover {
    color: #ffd700;                    /* optional: goldene Schrift beim Hover */
}

/* =========================
   VIDEO HERO HEADER
   ========================= */
#videoHeroModule {
  position: relative;   /* wichtig für absolute Positionierung des Logos */
  width: 100%;
  height: 70vh;         /* Desktop-Höhe, anpassbar */
  overflow: hidden;
}

/* Video */
#videoHeroModule .video-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;        /* volle Breite */
  height: 100%;        /* Höhe füllt Container */
  object-fit: cover;   /* proportional skalieren */
  transform: translate(-50%, -50%);
  opacity: 1;
  transition: opacity 0.5s ease-in-out; /* Fade-Effekt */
  z-index: 0;
}

/* Fade-Out-Klasse für sanften Übergang */
#videoHeroModule .fade-out {
  opacity: 0;
}



/* Text über Video */
#videoHeroModule .uk-position-center {
  z-index: 2;
  text-align: center;
  color: #ffffff;
}

/* =========================
   FIXIERTES LOGO OBEN LINKS
   ========================= */
#logoDirect {
  position: absolute; /* Fixiert über Video */
  top: 25%;
  left: 40px;
  z-index: 10;        /* über Video + Overlay + Text */
}

#logoDirect img {
  display: block;
  max-width: 400px;   /* Desktop */
  height: auto;
}

/* =========================
   MOBILE ANPASSUNG
   ========================= */
@media (max-width: 960px) {
  #videoHeroModule {
    height: 35vh; /* kleinere Höhe auf Mobile */
  }

  #videoHeroModule .uk-position-center h1 {
    font-size: 1.5rem; /* kleinere Überschrift */
  }

  #videoHeroModule .uk-position-center p {
    font-size: 1rem; /* kleinere Beschreibung */
  }

  #logoDirect {
    top: 10px;
    left: 10px;
  }

  #logoDirect img {
    max-width: 120px; /* Mobile-Logo */
  }
}

/* =========================
   FALLBACK / RESPONSIVE IMAGE
   ========================= */
@media (max-width: 600px) {
  #videoHeroModule .video-bg {
    display: none; /* Video auf sehr kleinen Geräten ausblenden */
  }

  #videoHeroModule {
    background: url('/images/video/fallback.jpg') center center / cover no-repeat;
  }
}

/* =========================
   SMOOTH SCROLL (optional)
   ========================= */
html {
  scroll-behavior: smooth;
}