/* navigation.css - Alle Navigation-bezogenen Styles */

/* ========================================
   MOBILE LANDSCAPE FIXES
======================================== */

/* Mobile Landscape spezifische Styles */
@media screen and (max-height: 500px) and (orientation: landscape) {
  /* Navigation kompakter machen */
  #main-nav {
    padding: 0.25rem 0 !important; /* py-1 statt py-2 */
  }

  /* Logo kleiner machen */
  .logo-responsive {
    height: 40px !important;
  }

  .logo-responsive img {
    height: 40px !important;
    max-height: 40px !important;
  }

  /* Hamburger Menu sichtbar und funktional */
  #menu-toggle {
    display: flex !important;
    z-index: 60;
    padding: 0.5rem;
    position: relative;
  }

  /* Desktop Navigation komplett ausblenden im Landscape */
  #nav-links {
    display: none !important;
  }

  /* Mobile Menu anpassen für Landscape */
  #mobile-menu {
    padding-top: 60px; /* Weniger Padding oben */
    overflow-y: auto;
    max-height: 100vh;
  }

  /* Mobile Menu Links kompakter */
  #mobile-menu a {
    padding: 0.75rem 0 !important; /* py-3 statt py-2 */
    font-size: 1rem !important;
  }

  /* Telefonnummer im Mobile Menu kleiner */
  #mobile-menu .text-2xl {
    font-size: 1.25rem !important;
  }

  /* Header anpassen */
  #header {
    min-height: 80vh !important; /* Kleiner als 100vh */
    padding: 3rem 0 !important;
  }

  #header h1 {
    font-size: 2.5rem !important; /* Kleiner */
    margin-top: 2rem !important;
  }
}

/* Sehr kleine Landscape Geräte (iPhone SE landscape etc.) */
@media screen and (max-height: 400px) and (orientation: landscape) {
  #main-nav {
    padding: 0.125rem 0 !important;
  }

  .logo-responsive {
    height: 35px !important;
  }

  .logo-responsive img {
    height: 35px !important;
    max-height: 35px !important;
  }

  #mobile-menu {
    padding-top: 50px;
  }

  #mobile-menu a {
    padding: 0.5rem 0 !important;
    font-size: 0.9rem !important;
  }

  #header {
    min-height: 70vh !important;
    padding: 2rem 0 !important;
  }

  #header h1 {
    font-size: 2rem !important;
    margin-top: 1rem !important;
  }
}

/* ========================================
   ALLGEMEINE MOBILE VERBESSERUNGEN
======================================== */

/* Mobile Menu Button immer sichtbar auf kleinen Bildschirmen */
@media screen and (max-width: 768px) {
  #menu-toggle {
    display: flex !important;
  }

  /* Sicherstellen dass Desktop Nav ausgeblendet ist */
  #nav-links {
    display: none !important;
  }

  /* Mobile Menu Backdrop für bessere Sichtbarkeit */
  #mobile-menu {
    background-color: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
  }
}

/* ========================================
   HAUPTNAVIGATION HOVER STYLES
======================================== */

/* Standard Hover für transparente Navigation (weiße Links) */
#main-nav.bg-transparent #nav-links a:hover {
  color: rgb(229, 231, 235) !important; /* text-gray-200 */
  border-bottom-color: rgb(255, 255, 255) !important; /* hover:border-white */
}

/* Hover für weiße Navigation (schwarze Links) */
#main-nav:not(.bg-transparent) #nav-links a:hover {
  font-weight: 500 !important;
  color: rgb(185, 28, 28) !important; /* text-red-700 */
  border-bottom-color: rgb(185, 28, 28) !important;
}

#main-nav #nav-links a {
  border-bottom: 2px solid transparent;
}

#phone-trigger {
  border-bottom: none !important;
}

#phone-trigger:hover {
  border-bottom: none !important;
}

/* ========================================
   AKTIVE NAVIGATION STYLES
======================================== */

/* Aktiver Hauptnavigationspunkt - Transparente Navigation */
#main-nav.bg-transparent #nav-links a.active {
  font-weight: 500 !important;
  color: rgb(255, 255, 255) !important; /* Weiß */
  border-bottom: 2px solid rgb(255, 255, 255) !important;
}

/* Aktiver Hauptnavigationspunkt - Weiße Navigation */
#main-nav:not(.bg-transparent) #nav-links a.active {
  font-weight: 500 !important;
  color: rgb(185, 28, 28) !important; /* text-red-700 */
  border-bottom: 2px solid rgb(185, 28, 28) !important;
}

/* ========================================
   UNTERNAVIGATION STYLES
======================================== */

/* Aktiver Untermenü-Link mit weißem Hintergrund */
#subnav:not(.bg-transparent) a.active {
  font-weight: 700 !important;
  color: rgb(185, 28, 28) !important; /* text-red-900 */
  background-color: rgba(185, 28, 28, 0.1);
  border-radius: 0.25rem;
}

/* Aktiver Untermenü-Link mit transparentem Hintergrund */
#subnav.bg-transparent a.active {
  color: white !important;
  background-color: rgba(255, 255, 255, 0.2);
  text-shadow: none;
  font-weight: 300;
}

/* Hoverstatus für Links im Untermenü - Weißer Hintergrund */
#subnav:not(.bg-transparent) a:hover {
  color: rgb(185, 28, 28) !important; /* text-red-900 */
  font-weight: 300;
  background-color: rgba(185, 28, 28, 0.05);
}

/* Hoverstatus für Links im Untermenü - Transparenter Hintergrund */
#subnav.bg-transparent a {
  color: white;
  text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
}

#subnav.bg-transparent a:hover {
  color: white !important;
  background-color: rgba(255, 255, 255, 0.2);
  text-shadow: none;
}

/* ========================================
   LAYOUT & ANIMATION
======================================== */

/* Hamburger Button größer machen */
#menu-toggle span {
  width: 2rem; /* 32px - w-8 */
  height: 0.25rem; /* 4px - h-1 */
  margin-bottom: 0.5rem; /* 8px - space-y-2 */
  transition: all 0.3s ease;
}

/* Subnav-Position und Animation anpassen */
#subnav {
  top: 5.5rem; /* Direkt unter der Navigation */
  transform: translateY(0) translateY(-100%);
  transition: transform 0.3s ease, opacity 0.2s ease;
}

#subnav.translate-y-0 {
  transform: translateY(0);
}

/* Sicherstellen, dass die Links im Untermenü klickbar sind */
#subnav.pointer-events-none [data-parent] {
  pointer-events: none;
}

#subnav:not(.pointer-events-none) [data-parent] {
  pointer-events: auto;
}

/* ========================================
   JUMP-TO-TOP BUTTON STYLES
======================================== */

#jump-to-top {
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(20px) !important;
  transition: all 0.3s ease !important;
}

#jump-to-top.show {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}