/* === Nav-Transitions komplett ======================================== */
:root{
  --nav-dur: 300ms;
  --nav-ease: cubic-bezier(.22,.61,.36,1);
}

/* Basiszustand (docked) */
#site-nav{
  background-color: transparent;            /* statt 'background' → besser animierbar */
  height: 100px;
  padding: 10px 40px;

  transition:
    background-color var(--nav-dur) var(--nav-ease),
    height           var(--nav-dur) var(--nav-ease),
    padding          var(--nav-dur) var(--nav-ease),
    box-shadow       var(--nav-dur) var(--nav-ease),
    border-color     var(--nav-dur) var(--nav-ease);
}

/* Floating-Zustand */
#site-nav.black{
  background-color: #111725;
  height: 80px;
  padding: 16px 0;                  /* 00px → 0 */
  box-shadow: 0 8px 24px rgba(0,0,0,.30);
}

/* Link- & Iconfarben sollen ebenfalls weich wechseln */
#site-nav a,
#site-nav .fa-solid,
#site-nav .fa-brands,
#site-nav .fa-regular{
  color: #ffffff;
  transition:
    color   var(--nav-dur) var(--nav-ease),
    opacity var(--nav-dur) var(--nav-ease);
}
#site-nav.black a,
#site-nav.black .fa-solid,
#site-nav.black .fa-brands,
#site-nav.black .fa-regular{
  color: #fff;
}




#nav-spacer{ display:none; }

/* Optional: Barrierefreiheit – respektiert reduzierte Bewegungen */
@media (prefers-reduced-motion: reduce){
  #site-nav, #site-nav *{
    transition: none !important;
    animation: none !important;
  }
}