/**
 * HEADER / NAVIGATION COMPONENT
 * Auto-Ankauf Website
 *
 * Fixed Navigation mit Desktop Menu und Mobile Hamburger
 */

/* ==========================================
   HEADER BASE
   ========================================== */

.header {
  position: fixed;
  top: 0 !important;
  left: 0;
  width: 100%;
  height: 70px;
  background: transparent;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  z-index: 1000;
  transform: none !important;
  transition: background var(--duration-normal) var(--ease-smooth),
              box-shadow var(--duration-normal) var(--ease-smooth),
              border-color var(--duration-normal) var(--ease-smooth);
}

.header.scrolled {
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
}

.header.scrolled .header__logo a {
  color: var(--color-black);
}

.header.scrolled .header__nav > .header__nav-link {
  color: var(--color-black);
}

.header.scrolled .header__nav > .header__nav-link:hover,
.header.scrolled .header__nav > .header__nav-link.active {
  color: var(--color-dark-gold);
}

.header.scrolled .header__hamburger-line {
  background: var(--color-black);
}

.header__container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}


/* ==========================================
   LOGO
   ========================================== */

.header__logo {
  display: flex;
  align-items: center;
  height: 40px;
  flex-shrink: 0;
}

.header__logo a {
  font-family: var(--font-primary);
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-smooth);
}

.header__logo a:hover {
  color: var(--color-light-gold);
}


/* ==========================================
   DESKTOP NAVIGATION
   ========================================== */

.header__nav {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
}

.header__nav-link {
  font-family: var(--font-primary);
  font-size: var(--font-size-paragraph);
  font-weight: var(--font-weight-medium);
  color: var(--color-white);
  text-decoration: none;
  position: relative;
  padding: 4px 0;
  transition: color var(--duration-fast) var(--ease-smooth);
}

.header__nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--gradient-button);
  transition: width var(--duration-normal) var(--ease-smooth);
}

.header__nav-link:hover,
.header__nav-link.active {
  color: var(--color-light-gold);
}

.header__nav-link:hover::after,
.header__nav-link.active::after {
  width: 100%;
}


/* ==========================================
   CTA BUTTON (Desktop)
   ========================================== */

.header__cta {
  flex-shrink: 0;
}

.header__cta .btn-small {
  animation: none;
}


/* ==========================================
   HAMBURGER MENU BUTTON
   ========================================== */

.header__hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  z-index: 1001;
}

.header__hamburger-line {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-white);
  border-radius: 2px;
  transition: transform var(--duration-normal) var(--ease-smooth),
              opacity var(--duration-normal) var(--ease-smooth),
              background var(--duration-normal) var(--ease-smooth);
}

.header__hamburger-line + .header__hamburger-line {
  margin-top: 6px;
}

/* Hamburger → X Animation */
.header__hamburger.active .header__hamburger-line:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.header__hamburger.active .header__hamburger-line:nth-child(2) {
  opacity: 0;
}

.header__hamburger.active .header__hamburger-line:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}


/* ==========================================
   MOBILE DROPDOWN MENU
   ========================================== */

.header__mobile-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: 95%;
  max-width: 500px;
  background: rgba(0, 0, 0, 1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 10px;
  flex-direction: column;
  align-items: center;
  gap: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--duration-slow) var(--ease-smooth);
}

.header__mobile-menu.open {
  max-height: 600px;
}

.header__mobile-menu .header__nav-link {
  font-size: var(--font-size-paragraph);
  font-weight: var(--font-weight-medium);
  width: 100%;
  text-align: center;
  padding: var(--spacing-md) var(--container-padding);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.header__mobile-menu .btn-small {
  margin: 16px 0px 25px 0px;
  animation: none;
}


/* ==========================================
   RESPONSIVE
   ========================================== */

@media (max-width: 991px) {
  .header__nav {
    display: none;
  }

  .header__cta {
    display: none;
  }

  .header__hamburger {
    display: flex;
  }

  .header__mobile-menu {
    display: flex;
  }
}

@media (max-width: 768px) {
  .header {
    height: 60px;
  }

  .header__logo a {
    font-size: var(--font-size-h6);
  }
}