/* ==========================================================================
   Hauptmenü: automatisches Ausblenden beim Scrollen nach unten
   --------------------------------------------------------------------------
   Verhalten (auf ALLEN Auflösungen identisch):
     - Nutzer scrollt nach UNTEN  -> komplette Menüleiste fährt nach oben raus
     - Nutzer scrollt nach OBEN   -> Menü ist sofort wieder eingeblendet
     - ganz oben (< SCHWELLE px)  -> Menü immer sichtbar
     - offenes Burger-Panel oder aufgeklapptes Dropdown -> nicht ausblenden

   Wichtig: Die CSS-Regeln greifen NUR, wenn JS das Feature aktiviert hat
   (html.js-header-autohide). Ohne JavaScript bleibt die Leiste wie bisher
   dauerhaft sichtbar — es gibt bewusst KEINEN Ausgangszustand, der den Header
   unsichtbar machen könnte.
   ========================================================================== */

html.js-header-autohide header {
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

/* Nach oben aus dem Viewport geschoben. pointer-events: none, damit die
   unsichtbare Leiste keine Klicks/Touches abfängt. */
html.js-header-autohide header[data-header-state="hidden"] {
  transform: translateY(-100%);
  pointer-events: none;
}

/* Nutzer wünscht weniger Bewegung: aus- und einblenden ohne Animation */
@media (prefers-reduced-motion: reduce) {
  html.js-header-autohide header {
    transition: none;
  }
}