/* =====================================================
   LANA – Homepage Fullscreen Video Hero (Luxury)
   Path: /php/homepage-hero/homepage-hero.css
   ===================================================== */

/* ==========================================
   HEADER HEIGHT (HIER ANPASSEN WENN NÖTIG)
   ========================================== */

:root{
  --lana-header-height-desktop: 90px; /* Desktop Header Höhe */
  --lana-header-height-mobile: 70px;  /* Mobile Header Höhe */
}

/* ==========================================
   HERO CONTAINER
   ========================================== */

.lana-home-hero{
  position: relative !important;
  width: 100% !important;

  /* Bildschirmhöhe minus Header */
  height: calc(100vh - var(--lana-header-height-desktop)) !important;
  min-height: calc(100vh - var(--lana-header-height-desktop)) !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden !important;
  isolation: isolate !important;
}

/* Mobile Fix (iOS Browser Height Bug) */
@media (max-width: 768px){

  .lana-home-hero{
    height: calc(100svh - var(--lana-header-height-mobile)) !important;
    min-height: calc(100svh - var(--lana-header-height-mobile)) !important;
  }

}

/* ==========================================
   VIDEO BACKGROUND
   ========================================== */

.lana-home-hero__video{
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;

  width: 100% !important;
  height: 100% !important;

  object-fit: cover !important;
  z-index: 1 !important;

  transform: scale(1.04) !important;
  filter: saturate(1.02) contrast(1.03) brightness(0.98) !important;

  animation: lanaHeroZoom 18s ease-in-out infinite !important;
  will-change: transform !important;
}

@keyframes lanaHeroZoom{
  0%   { transform: scale(1.04) translate3d(0,0,0) !important; }
  50%  { transform: scale(1.08) translate3d(0,-1.5%,0) !important; }
  100% { transform: scale(1.04) translate3d(0,0,0) !important; }
}

/* Desktop / Mobile Switch */
.lana-home-hero__video--mobile{
  display: none !important;
}

@media (max-width: 768px){
  .lana-home-hero__video--desktop{
    display: none !important;
  }
  .lana-home-hero__video--mobile{
    display: block !important;
  }
}

/* ==========================================
   OVERLAY (Mobil)
   ========================================== */

.lana-home-hero__overlay{
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;

  background:
    radial-gradient(
      80% 70% at 50% 45%,
      rgba(0,0,0,0.18) 0%,
      rgba(0,0,0,0.35) 70%,
      rgba(0,0,0,0.45) 100%
    ),
    linear-gradient(
      180deg,
      rgba(0,0,0,0.28) 0%,
      rgba(0,0,0,0.32) 55%,
      rgba(0,0,0,0.38) 100%
    ) !important;
}

/* ==========================================
   DESKTOP: DUNKLERES OVERLAY
   ========================================== */

@media (min-width: 1025px){

  .lana-home-hero__overlay{
    background:
      radial-gradient(
        80% 70% at 50% 45%,
        rgba(0,0,0,0.28) 0%,
        rgba(0,0,0,0.50) 70%,
        rgba(0,0,0,0.60) 100%
      ),
      linear-gradient(
        180deg,
        rgba(0,0,0,0.40) 0%,
        rgba(0,0,0,0.45) 55%,
        rgba(0,0,0,0.55) 100%
      ) !important;
  }

}

/* ==========================================
   CONTENT CENTERING
   ========================================== */

.lana-home-hero__content{
  position: relative !important;
  z-index: 3 !important;

  height: 100% !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;

  text-align: center !important;
  padding: 22px !important;

  color: #fff !important;

  transform: translate3d(0,0,0) !important;
  will-change: transform !important;
}

/* ==========================================
   TYPOGRAPHY
   ========================================== */

.lana-home-hero__title{
  font-family: Manrope, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  font-size: 40px !important;   /* FIX 40px */
  font-weight: 650 !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 16px 0 !important;

  color: #ffffff !important;   /* Weiß */
  text-shadow: none !important; /* optional: sauberer Look */
}

.lana-home-hero__subtitle{
  font-family: Manrope, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  font-size: clamp(15px, 1.2vw, 20px) !important;
  line-height: 1.62 !important;
  font-weight: 450 !important;

  max-width: 860px !important;
  margin: 0 0 30px 0 !important;

  opacity: 0.94 !important;
  text-shadow: 0 10px 24px rgba(0,0,0,0.55) !important;
}

/* ==========================================
   BUTTON (Luxury Gold)
   ========================================== */

.lana-home-hero__btn{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 14px 26px !important;
  border-radius: 3px !important;

  background: #F1EBE4 !important;   /* deine Farbe */
  color: #191818 !important;        /* Schriftfarbe */

  border: 1px solid #F1EBE4 !important;

  font-family: Manrope, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 650 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;

  box-shadow: none !important;  /* optional cleaner look */

  transition: transform .25s ease, background .25s ease !important;
}

.lana-home-hero__btn:hover{
  background: #E8DFD5 !important;
  transform: translateY(-1px) !important;
}

  box-shadow:
    0 22px 56px rgba(0,0,0,0.50),
    0 0 0 1px rgba(255,255,255,0.12) inset !important;
}

/* ==========================================
   REDUCED MOTION SUPPORT
   ========================================== */

@media (prefers-reduced-motion: reduce){
  .lana-home-hero__video{
    animation: none !important;
  }
  .lana-home-hero__content{
    transform: none !important;
  }
}

@media (max-width: 768px){
  .lana-home-hero__video{
    animation: none !important;
    transform: none !important;
    filter: saturate(1.02) contrast(1.03) brightness(1.02) !important;
  }
}