/* ════════════════════════════════════════════════════════════════
   Marstaller-Universum — Smart-UI v3.1.0
   ────────────────────────────────────────────────────────────────
   Smart-Header (Hide/Show beim Scrollen) + Back-to-Top-Pfeil.
   Targets crossThemen — Kadence, WP-Default, Block-Themes.
   ═══════════════════════════════════════════════════════════════ */

/* ─── SMART-HEADER ───────────────────────────────────────────── */
/* Selektor-Spektrum für maximale Theme-Kompatibilität:
   · Block-Themes: header.wp-block-template-part
   · Kadence: .site-header-wrap, .header-navigation, .kadence-header-wrap
   · TwentyTwenty*: #masthead, header.site-header
   · WP-Default: header[role="banner"] */

body.mup-smart-header-active header.site-header,
body.mup-smart-header-active header#masthead,
body.mup-smart-header-active header[role="banner"],
body.mup-smart-header-active header.wp-block-template-part,
body.mup-smart-header-active .site-header-wrap,
body.mup-smart-header-active .header-navigation,
body.mup-smart-header-active .kadence-header-wrap,
body.mup-smart-header-active #site-header,
body.mup-smart-header-active .site-header {
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.35s ease,
              background-color 0.35s ease,
              backdrop-filter 0.35s ease,
              box-shadow 0.35s ease !important;
  will-change: transform;
}

/* Page-Top oder Scroll-Down: Header weg */
body.mup-smart-header-active.mup-header-hidden header.site-header,
body.mup-smart-header-active.mup-header-hidden header#masthead,
body.mup-smart-header-active.mup-header-hidden header[role="banner"],
body.mup-smart-header-active.mup-header-hidden header.wp-block-template-part,
body.mup-smart-header-active.mup-header-hidden .site-header-wrap,
body.mup-smart-header-active.mup-header-hidden .header-navigation,
body.mup-smart-header-active.mup-header-hidden .kadence-header-wrap,
body.mup-smart-header-active.mup-header-hidden #site-header,
body.mup-smart-header-active.mup-header-hidden .site-header {
  transform: translateY(-105%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Scroll-Up nach Schwelle: Header sticky + Glas */
body.mup-smart-header-active.mup-header-visible header.site-header,
body.mup-smart-header-active.mup-header-visible header#masthead,
body.mup-smart-header-active.mup-header-visible header[role="banner"],
body.mup-smart-header-active.mup-header-visible header.wp-block-template-part,
body.mup-smart-header-active.mup-header-visible .site-header-wrap,
body.mup-smart-header-active.mup-header-visible .header-navigation,
body.mup-smart-header-active.mup-header-visible .kadence-header-wrap,
body.mup-smart-header-active.mup-header-visible #site-header,
body.mup-smart-header-active.mup-header-visible .site-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9990 !important;
  transform: translateY(0) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  background: rgba(248, 242, 230, 0.92) !important;
  backdrop-filter: blur(18px) saturate(170%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(170%) !important;
  box-shadow: 0 4px 28px -10px rgba(31, 26, 18, 0.18) !important;
  border-bottom: 1px solid rgba(201, 168, 76, 0.18) !important;
}

/* Kein Content-Sprung bei fixed-Header: Spacer nicht setzen,
   weil Header bei Top-of-Page nicht sichtbar ist. */

/* ─── BACK-TO-TOP ────────────────────────────────────────────── */
.mup-to-top {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  bottom: max(1.5rem, env(safe-area-inset-bottom, 0px));
  right: max(1.5rem, env(safe-area-inset-right, 0px));
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(31, 26, 18, 0.55);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid rgba(201, 168, 76, 0.4);
  color: rgba(248, 242, 230, 0.95);
  cursor: pointer;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9985;
  opacity: 0;
  transform: translateY(18px) scale(0.92);
  pointer-events: none;
  transition: opacity 0.4s ease,
              transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              background 0.25s ease,
              border-color 0.25s ease,
              color 0.25s ease;
  box-shadow: 0 10px 28px -10px rgba(0, 0, 0, 0.45);
  font-family: inherit;
  font-size: 0;
  line-height: 0;
}

body.mup-totop-visible .mup-to-top {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.mup-to-top:hover {
  background: rgba(31, 26, 18, 0.92);
  border-color: rgba(201, 168, 76, 0.92);
  color: #fffaf0;
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 14px 32px -10px rgba(0, 0, 0, 0.55);
}
.mup-to-top:active {
  transform: translateY(-1px) scale(1);
}
.mup-to-top:focus-visible {
  outline: 2px solid #c9a84c;
  outline-offset: 3px;
}
.mup-to-top svg {
  width: 18px;
  height: 18px;
  display: block;
  pointer-events: none;
}

@media (max-width: 640px) {
  .mup-to-top {
    width: 44px;
    height: 44px;
    bottom: 1rem;
    right: 1rem;
    bottom: max(1rem, env(safe-area-inset-bottom, 0px));
    right: max(1rem, env(safe-area-inset-right, 0px));
  }
  .mup-to-top svg { width: 16px; height: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  body.mup-smart-header-active header,
  body.mup-smart-header-active .site-header,
  body.mup-smart-header-active .kadence-header-wrap,
  body.mup-smart-header-active .site-header-wrap,
  .mup-to-top {
    transition: none !important;
  }
  .mup-to-top:hover,
  .mup-to-top:active {
    transform: none !important;
  }
}

/* ─── Print: alles weg ─────────────────────────────────────── */
@media print {
  .mup-to-top { display: none !important; }
  body.mup-smart-header-active.mup-header-hidden header,
  body.mup-smart-header-active.mup-header-visible header {
    position: static !important;
    transform: none !important;
    opacity: 1 !important;
    background: none !important;
    box-shadow: none !important;
  }
}
