/* ==========================================================================
   Header - Fixed with Directional Logo
   ========================================================================== */

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-xl) var(--space-3xl);
  z-index: 100;
  pointer-events: none;
}

/* ==========================================================================
   Logo - Left Side
   ========================================================================== */

.header__logo {
  pointer-events: auto;
  perspective: 400px;
}

.header__logo img {
  height: 60px;
  width: auto;
  transform-origin: top center;
}

/* ==========================================================================
   Burger Menu - Right Side
   ========================================================================== */

.header__burger {
  pointer-events: auto;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  width: 50px;
  height: 50px;
}

.header__burger-icon {
  width: 100%;
  height: 100%;
}

.header__burger-line {
  stroke: var(--color-gold);
  stroke-width: 5;
  stroke-linecap: round;
  transition: transform 0.4s cubic-bezier(0.68, -0.6, 0.32, 1.6),
              opacity 0.2s ease;
}

/* Jede Linie rotiert um ihre eigene Mitte */
.header__burger-line--top {
  transform-origin: 50px 30px;
}

.header__burger-line--mid {
  transform-origin: 50px 50px;
}

.header__burger-line--bot {
  transform-origin: 50px 70px;
}

/* Burger → X Animation */
.header__burger.is-open .header__burger-line--top {
  transform: translateY(20px) rotate(45deg);
}

.header__burger.is-open .header__burger-line--mid {
  opacity: 0;
}

.header__burger.is-open .header__burger-line--bot {
  transform: translateY(-20px) rotate(-45deg);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1024px) {
  .header {
    padding: var(--space-lg) var(--space-xl);
  }

  .header__logo img {
    height: 45px;
  }

  .header__burger {
    width: 42px;
    height: 42px;
  }
}

@media (max-width: 480px) {
  .header {
    padding: var(--space-md) var(--space-lg);
  }

  .header__logo img {
    height: 38px;
  }

  .header__burger {
    width: 36px;
    height: 36px;
  }
}

/* ==========================================================================
   Scrollbar Compensation - Menü offen
   ========================================================================== */

/* Kompensiere fehlende Body-Scrollbar wenn Menü offen */
body.menu-open .header {
  padding-right: calc(var(--space-3xl) + var(--scrollbar-width, 6px));
}

@media (max-width: 1024px) {
  body.menu-open .header {
    padding-right: calc(var(--space-xl) + var(--scrollbar-width, 6px));
  }
}

@media (max-width: 480px) {
  body.menu-open .header {
    padding-right: calc(var(--space-lg) + var(--scrollbar-width, 6px));
  }
}