/* SHIFT11 Nav-Fix
   - Desktop-Nav wird nie zweizeilig; bei <1024px sofort Burger-Modus.
   - Burger animiert zu X im offenen Zustand.
   - Sprachumschalter (.lang-switch-mobile-fixed) bleibt im Mobile-Header
     immer sichtbar, links vom Burger.
   - WICHTIG: Vorhandenes .mobile-nav CSS wird NICHT überschrieben – stattdessen
     nur die .open-Klasse genutzt. Für Seiten ohne eigenes Mobile-Nav (blog,
     impressum) gibt es .mobile-nav-auto als Fallback-Styling.
*/

/* Desktop: nie wrappen */
nav .nav-links { flex-wrap: nowrap !important; white-space: nowrap; }

/* ---- Mobile-Header lang-switch (immer sichtbar links vom Burger) ---- */
.lang-switch-mobile-fixed {
  display: none;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-left: auto;
  margin-right: 14px;
}
.lang-switch-mobile-fixed a,
.lang-switch-mobile-fixed span {
  text-decoration: none;
  padding: 4px 6px;
  border-radius: 3px;
  color: var(--light-muted, #8a7e8a);
}
.lang-switch-mobile-fixed a:hover { color: var(--red, #ff0037); }
.lang-switch-mobile-fixed .current { color: var(--bb, #230523); pointer-events: none; }
.lang-switch-mobile-fixed .sep { opacity: 0.4; padding: 4px 0; }

/* Burger-Position absichern (sitzt auf der Header-Rechtsseite) */
nav .burger {
  position: relative;
  z-index: 1100;
}

/* ---- Burger → X Animation ---- */
nav .burger.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
nav .burger.open span:nth-child(2) {
  opacity: 0;
}
nav .burger.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---- Breakpoint hochgezogen: <1024px → Burger-Modus ---- */
@media (max-width: 1023px) {
  nav .nav-links { display: none !important; }
  nav .burger {
    display: flex !important;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
  }
  nav .burger span {
    width: 24px;
    height: 2px;
    background: var(--bb, #230523);
    transition: transform .3s, opacity .25s;
    transform-origin: center;
  }
  .lang-switch-mobile-fixed { display: inline-flex; }

  /* Versteckt den Desktop-internen lang-switch im Burger-Modus */
  nav .lang-switch { display: none !important; }
}

/* ---- Auto-generiertes Mobile-Nav (nur für Seiten ohne eigenes Mobile-Menü) ---- */
.mobile-nav-auto {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 420px;
  background: var(--white, #fff);
  z-index: 1050;
  padding: 90px 32px 40px;
  flex-direction: column;
  gap: 6px;
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(.16,1,.3,1);
  box-shadow: -12px 0 40px rgba(35,5,35,0.08);
  overflow-y: auto;
}
.mobile-nav-auto.open {
  display: flex;
  transform: translateX(0);
}
.mobile-nav-auto > a {
  font-size: 22px;
  font-weight: 700;
  color: var(--bb, #230523);
  text-decoration: none;
  padding: 14px 0;
  border-bottom: 1px solid var(--line, rgba(26,10,26,0.1));
  transition: color .2s;
}
.mobile-nav-auto > a:hover { color: var(--red, #ff0037); }
.mobile-nav-auto .mob-cta-wrap { margin-top: 18px; }
.mobile-nav-auto .mob-cta {
  display: inline-block;
  background: var(--red, #ff0037);
  color: #fff !important;
  padding: 14px 24px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
}

/* Backdrop wenn Mobile-Nav offen */
body.menu-open {
  overflow: hidden;
}