/* public/assets/css/landing.css */

/*--------------------------------------------------------------
# General / Body
--------------------------------------------------------------*/
body {
    /* Optional: Standard-Schriftart für Landing Page */
    /* font-family: 'Nunito', sans-serif; */ /* Beispiel Google Font */
    overflow-x: hidden; /* Verhindert horizontales Scrollen */
  }
  
  /*--------------------------------------------------------------
  # Navigation Bar
  --------------------------------------------------------------*/
  #mainNav {
    padding-top: 1rem;
    padding-bottom: 1rem;
    background-color: rgba(0, 0, 0, 0.7); /* Dunkler, halbtransparent initial */
    transition: background-color 0.3s ease-in-out, padding-top 0.3s ease-in-out, padding-bottom 0.3s ease-in-out;
  }
  
  #mainNav .navbar-brand {
    font-weight: 700;
    color: #fff;
  }
  #mainNav .navbar-nav .nav-item .nav-link {
    color: rgba(255, 255, 255, 0.7);
    padding: 0.75rem 0;
    font-weight: 600;
    letter-spacing: 0.05em;
  }
  #mainNav .navbar-nav .nav-item .nav-link.active,
  #mainNav .navbar-nav .nav-item .nav-link:hover {
    color: #fff;
  }
  
  /* Style für Navbar beim Scrollen (wird per JS hinzugefügt) */
  #mainNav.navbar-scrolled {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    background-color: #212529; /* Solides dunkles Grau */
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  }
  
  /*--------------------------------------------------------------
  # Hero Section mit Video
  --------------------------------------------------------------*/
  .hero-section {
    position: relative;
    width: 100%;
    height: 100vh; /* Volle Bildschirmhöhe */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  #bgvid {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    transform: translateX(-50%) translateY(-50%);
    background-size: cover;
  }
  
  .hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Dunkler Overlay für Lesbarkeit */
    z-index: -50;
  }
  
  .hero-content {
      z-index: 1; /* Stellt sicher, dass der Inhalt über dem Overlay liegt */
  }
  
  /*--------------------------------------------------------------
  # Parallax Section
  --------------------------------------------------------------*/
  .parallax-section {
    /* WICHTIG: Pfad zum Hintergrundbild anpassen! */
    background-image: url('../img/parallax_dummy.jpg'); /* Beispielpfad */
    min-height: 400px; /* Mindesthöhe für den Effekt */
    /* Parallax Effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative; /* Für Overlay */
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .parallax-overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Etwas stärkerer Overlay */
  }
  
  .parallax-content {
      position: relative; /* Über dem Overlay */
      z-index: 1;
  }
  
  /*--------------------------------------------------------------
  # Feature Icons (Services Section)
  --------------------------------------------------------------*/
  .feature {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 4rem;
    width: 4rem;
    font-size: 1.5rem;
  }
  
  /*--------------------------------------------------------------
  # Animationen (Fade In on Scroll)
  --------------------------------------------------------------*/
  .animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  }
  
  .animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
  
  /* Verzögerungen für gestaffelte Animationen */
  .animate-on-scroll.delay-1 { transition-delay: 0.1s; }
  .animate-on-scroll.delay-2 { transition-delay: 0.2s; }
  .animate-on-scroll.delay-3 { transition-delay: 0.3s; }
  .animate-on-scroll.delay-4 { transition-delay: 0.4s; }
  .animate-on-scroll.delay-5 { transition-delay: 0.5s; }
  .animate-on-scroll.delay-6 { transition-delay: 0.6s; }
  
  
  /*--------------------------------------------------------------
  # Scroll to Top Button
  --------------------------------------------------------------*/
  .scroll-to-top {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    width: 3rem;
    height: 3rem;
    text-align: center;
    color: #fff;
    background: rgba(33, 37, 41, 0.5); /* Dunkelgrau, halbtransparent */
    line-height: 3rem;
    z-index: 1040;
    transition: background-color 0.2s ease;
    border-radius: 50%;
    display: none; /* Initial versteckt */
  }
  .scroll-to-top i {
    font-size: 1.5rem;
    vertical-align: middle;
  }
  
  .scroll-to-top:hover {
    background: rgba(33, 37, 41, 0.8);
    color: #fff;
  }

  /* public/themes/theme2/css/landing.css */

/* ... (Bestehende Stile für Hero, Parallax etc.) ... */

/*--------------------------------------------------------------
# Statistik Karten (Showcase Section)
--------------------------------------------------------------*/
#showcase .card {
    border: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  #showcase .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
  }
  #showcase .card .display-4 {
    font-size: 3rem; /* Etwas kleiner als Standard display-4 */
  }
  
  /*--------------------------------------------------------------
  # Regenbogen-Effekt für Hero-Titel
  --------------------------------------------------------------*/
  .hero-content h1.rainbow-text {
    font-size: 5rem; /* Ggf. anpassen */
    font-weight: 900; /* Sehr fett für besseren Effekt */
    background: linear-gradient(90deg, violet, indigo, blue, green, yellow, orange, red, violet); /* Regenbogenverlauf */
    background-size: 200% 200%; /* Wichtig für Animation */
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    /* Animation */
    animation: rainbow-animation 10s ease infinite;
  }
  
  /* Keyframes für die Regenbogen-Animation */
  @keyframes rainbow-animation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }
  
  /* Optional: Fallback für Browser, die background-clip nicht unterstützen */
  /* @supports not (-webkit-background-clip: text) and not (background-clip: text) {
    .hero-content h1.rainbow-text {
      color: #fff; // Einfache weiße Schrift als Fallback
      -webkit-text-fill-color: initial;
    }
  } */
  
  /* Anpassung für kleinere Bildschirme */
  @media (max-width: 768px) {
      .hero-content h1.rainbow-text {
          font-size: 3.5rem;
      }
      #showcase .card .display-4 {
          font-size: 2.5rem;
      }
  }

  /*--------------------------------------------------------------
# Showcase Scroll Container (Home Page)
--------------------------------------------------------------*/
.showcase-scroll-container {
  -webkit-overflow-scrolling: touch; /* Smoother scrolling on iOS */
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: rgba(0,0,0,0.2) rgba(0,0,0,0.1); /* Firefox */
}

/* Webkit Scrollbar Styling */
.showcase-scroll-container::-webkit-scrollbar {
  height: 8px;
}

.showcase-scroll-container::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.1);
  border-radius: 4px;
}

.showcase-scroll-container::-webkit-scrollbar-thumb {
  background-color: rgba(0,0,0,0.3);
  border-radius: 4px;
}

.showcase-scroll-container::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0,0,0,0.5);
}

/* Verhindern, dass die Stretched-Link-Funktion der Karte den Scrollbar überlagert */
.showcase-scroll-container .card .stretched-link::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    content: "";
}