/* ══════════════════════════════════════════════════════════════════════
   KAMUI NAVIGATION: weiche Uebergaenge im Kopf
   ══════════════════════════════════════════════════════════════════════

   Im Kopf-CSS stand keine einzige transition-Regel (geprueft mit grep
   ueber kamui.css: null Treffer). Jede Zustandsaenderung sprang
   deshalb hart: Zeigen und Verbergen beim Scrollen, das Wechseln
   zwischen Signet und Wortmarke, Zeigerwechsel auf den Menuepunkten.

   Der auffaelligste Fall ist der Ruecksprung: kommt man ueber die
   Zurueck-Taste auf eine Seite, stellt der Browser den Kopf sofort in
   seinen Endzustand. Ohne Uebergang wirkt das wie ein Schnitt.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Der Kopf selbst ──────────────────────────────────────────────────
   Hintergrund, Hoehe und Schatten laufen gemeinsam. Die Kurve ist
   dieselbe wie beim Aufblenden der Abschnitte, damit die Seite eine
   Handschrift hat und nicht drei verschiedene. */
#brx-header,
#brx-header .brxe-section,
.fr-header-alpha,
.fr-header-alpha__inner {
  transition:
    background-color 0.42s cubic-bezier(0.22, 0.61, 0.36, 1),
    backdrop-filter 0.42s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 0.42s cubic-bezier(0.22, 0.61, 0.36, 1),
    padding 0.42s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.42s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Der dunkle Verlauf hinter dem Kopf blendet mit, statt zu springen. */
.fr-header-alpha.brxe-section::before {
  transition: opacity 0.42s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ── Marke im Kopf ────────────────────────────────────────────────────
   Signet und Wortmarke wechseln beim Scrollen. Ohne Uebergang
   erscheint das eine schlagartig, waehrend das andere verschwindet. */
.fr-header-alpha__logo,
.fr-header-alpha__logo img,
.kopf-wortmarke,
.art-logo-scroll {
  transition:
    opacity 0.38s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.38s cubic-bezier(0.22, 0.61, 0.36, 1),
    width 0.38s cubic-bezier(0.22, 0.61, 0.36, 1),
    max-width 0.38s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ── Menuepunkte ──────────────────────────────────────────────────────
   Farbe und Unterstrich laufen weich. Die Verzoegerung ist bewusst
   kurz: ein Zeigerwechsel darf nicht traege wirken. */
.bricks-nav-menu > li > a,
.bricks-nav-menu > li > .brx-submenu-toggle > a,
.bricks-nav-menu .sub-menu > li > a,
.art-footer__legal__navigation a {
  transition:
    color 0.24s ease,
    opacity 0.24s ease,
    border-color 0.24s ease;
}

/* Der Unterstrich unter dem aktiven Punkt waechst aus der Mitte,
   statt einfach da zu sein. */
.bricks-nav-menu > li > a::after,
.bricks-nav-menu > li > .brx-submenu-toggle > a::after {
  transition:
    transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 0.3s ease;
}

/* ── Untermenue ───────────────────────────────────────────────────────
   Das Klappmenue unter "Unser Angebot" erschien ohne Uebergang. */
.bricks-nav-menu .sub-menu {
  transition:
    opacity 0.26s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.26s cubic-bezier(0.22, 0.61, 0.36, 1),
    visibility 0.26s;
}

/* ── Schaltflaechen ───────────────────────────────────────────────────
   Betrifft auch die Kontakt-Schaltflaeche im Kopf. */
.bricks-button,
.brxe-button,
.art-header-button-scroll {
  transition:
    background-color 0.26s ease,
    color 0.26s ease,
    border-color 0.26s ease,
    transform 0.26s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ── Ruecksprung ──────────────────────────────────────────────────────
   Beim Zurueckgehen stellt der Browser die Seite aus dem
   Zwischenspeicher her. Der Kopf steht dann sofort im Endzustand.
   Diese Regel gibt ihm einen kurzen Anlauf, damit der Ruecksprung
   genauso weich aussieht wie der Hinweg.

   Das Attribut wird von bewegung.js gesetzt, wenn pageshow mit
   persisted meldet. */
html[data-kamui-rueck] #brx-header {
  animation: kamui-kopf-an 0.44s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes kamui-kopf-an {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: none; }
}

/* ── Ruhiger Modus ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  #brx-header,
  #brx-header *,
  .bricks-nav-menu > li > a,
  .bricks-button {
    transition: none !important;
    animation: none !important;
  }
}