/* ==========================================================================
   nav.css — Navigation 1:1 wie die Startseite (home.css).
   Eigenständig (feste Farben, keine Variablen-Abhängigkeit), damit die Nav
   auf Unterseiten exakt gleich aussieht. Wird als LETZTES geladen.
   Farben = home.css Werte: ink rgba(12,10,9,.72) · bone #F5F0EA · dim #9C938B
            · red #E11D2A · line rgba(245,240,234,.09) · line-2 rgba(245,240,234,.16)
   ========================================================================== */

.navbar{
  position:fixed !important;top:0 !important;left:0 !important;right:0 !important;
  z-index:100 !important;
  background:transparent !important;
  backdrop-filter:none !important;
  border-bottom:1px solid transparent !important;
  transition:background .3s cubic-bezier(.2,.7,.2,1),
             border-color .3s cubic-bezier(.2,.7,.2,1),
             backdrop-filter .3s cubic-bezier(.2,.7,.2,1) !important;
}
.navbar.scrolled{
  background:rgba(12,10,9,.72) !important;
  backdrop-filter:blur(14px) !important;
  border-bottom-color:rgba(245,240,234,.09) !important;
}

.nav-container{
  max-width:1280px !important;margin:0 auto !important;
  padding:18px 32px !important;height:auto !important;
  display:flex !important;align-items:center !important;
  justify-content:space-between !important;gap:24px !important;
}

.logo{display:flex !important;flex-direction:column !important;line-height:.9 !important}
.logo .logo-text,.logo-text{
  font-family:'Bricolage Grotesque','Inter',sans-serif !important;
  font-weight:800 !important;font-size:20px !important;letter-spacing:-.02em !important;
  line-height:.9 !important;display:block !important;
  color:#9C938B !important; /* = home --dim (Logo erbt dort die dim-Farbe vom Anchor) */
}
.logo .logo-subtitle,.logo-subtitle{
  font-family:'JetBrains Mono',monospace !important;font-size:10px !important;
  letter-spacing:.34em !important;color:#E11D2A !important;
  display:block !important;text-transform:uppercase !important;
}

.nav-menu{display:flex !important;align-items:center !important;gap:30px !important}
.nav-link{
  font-family:'Inter',system-ui,sans-serif !important;
  font-size:14px !important;font-weight:500 !important;letter-spacing:normal !important;
  color:#9C938B !important;text-decoration:none !important;
  transition:color .2s cubic-bezier(.2,.7,.2,1) !important;position:relative !important;
}
.nav-link:hover,.nav-link.active{color:#F5F0EA !important}
/* Basis-Unterstrich (style.css) deaktivieren — Startseite hat nur unter .active */
.nav-link::after{display:none !important}
.nav-link.active::after{
  content:"" !important;display:block !important;position:absolute !important;
  left:0 !important;right:0 !important;width:auto !important;bottom:-6px !important;
  height:2px !important;background:#E11D2A !important;
}

.nav-right{display:flex !important;align-items:center !important;gap:18px !important}
.language-switcher{
  display:flex !important;gap:4px !important;
  background:transparent !important;padding:0 !important;border:none !important;border-radius:0 !important;
}
.lang-btn{
  background:transparent !important;border:1px solid rgba(245,240,234,.16) !important;
  color:#9C938B !important;font-family:'JetBrains Mono',monospace !important;
  font-size:12px !important;font-weight:500 !important;letter-spacing:normal !important;
  padding:6px 10px !important;border-radius:0 !important;cursor:pointer !important;
  transition:all .2s cubic-bezier(.2,.7,.2,1) !important;opacity:1 !important;
}
.lang-btn:hover{color:#F5F0EA !important;background:transparent !important}
.lang-btn.active{background:#E11D2A !important;border-color:#E11D2A !important;color:#fff !important}

.mobile-menu-btn{
  display:none;flex-direction:column;gap:5px;background:none;border:none;padding:6px;cursor:pointer;
}
.mobile-menu-btn span{width:24px;height:2px;background:#F5F0EA;transition:.3s cubic-bezier(.2,.7,.2,1)}
.mobile-menu-btn.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.mobile-menu-btn.active span:nth-child(2){opacity:0}
.mobile-menu-btn.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:768px){
  .nav-container{padding:18px 20px !important}
  .mobile-menu-btn{display:flex !important}
  .nav-menu{
    /* top/right + height statt inset(bottom:0): robust, falls die gescrollte
       Navbar via backdrop-filter zum Containing-Block der fixed-Kinder wird */
    position:fixed !important;top:0 !important;right:0 !important;bottom:auto !important;left:auto !important;
    height:100vh !important;height:100dvh !important;width:min(80vw,320px) !important;
    background:#141010 !important;border-left:1px solid rgba(245,240,234,.09) !important;
    flex-direction:column !important;align-items:flex-start !important;justify-content:center !important;
    gap:26px !important;padding:40px !important;transform:translateX(100%) !important;
    transition:transform .35s cubic-bezier(.2,.7,.2,1) !important;z-index:90 !important;
  }
  .nav-menu.active{transform:translateX(0) !important}
  .nav-link{font-size:20px !important}
}