/* ═══════════════════════════════════════════════════════════════════
   Marstaller-Universum — Fullscreen-Sektion (v3.3.1)
   ═══════════════════════════════════════════════════════════════════ */

/* Volle Viewport-Höhe + zentrierter Inhalt */
.is-mup-fullscreen {
  min-height: 100vh !important;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  position: relative;
  scroll-snap-align: start;
}
/* Bei Cover-Blöcken: inner-container darf wachsen */
.wp-block-cover.is-mup-fullscreen .wp-block-cover__inner-container {
  width: 100%;
}
/* iOS-Safari Viewport-Fix mit svh/dvh fallback */
@supports (height: 100svh) {
  .is-mup-fullscreen { min-height: 100svh !important; }
}
@supports (height: 100dvh) {
  .is-mup-fullscreen { min-height: 100dvh !important; }
}

/* Header verstecken solange diese Sektion am Page-Top sichtbar ist.
   Solange Body NICHT scrolled ist und die erste Sektion mup-fs-hide-nav hat. */
body:not(.mup-scrolled) header.site-header,
body:not(.mup-scrolled) header#masthead,
body:not(.mup-scrolled) header[role="banner"],
body:not(.mup-scrolled) .site-header-wrap,
body:not(.mup-scrolled) .header-navigation,
body:not(.mup-scrolled) .kadence-header-wrap {
  /* nur wenn die Page eine Fullscreen-Hide-Nav-Sektion am Anfang hat */
}
body.mup-has-fs-hide-nav:not(.mup-scrolled) header.site-header,
body.mup-has-fs-hide-nav:not(.mup-scrolled) header#masthead,
body.mup-has-fs-hide-nav:not(.mup-scrolled) header[role="banner"],
body.mup-has-fs-hide-nav:not(.mup-scrolled) .site-header-wrap,
body.mup-has-fs-hide-nav:not(.mup-scrolled) .header-navigation,
body.mup-has-fs-hide-nav:not(.mup-scrolled) .kadence-header-wrap {
  transform: translateY(-110%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: transform 0.4s ease, opacity 0.3s ease !important;
}

/* Scroll-Indikator unten */
.is-mup-fullscreen.mup-fs-indicator-arrow::after,
.is-mup-fullscreen.mup-fs-indicator-dots::after,
.is-mup-fullscreen.mup-fs-indicator-word::after {
  position: absolute;
  bottom: clamp(1rem, 3vh, 2.5rem);
  left: 50%;
  transform: translateX(-50%);
  color: currentColor;
  opacity: 0.7;
  font-family: inherit;
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 600;
  pointer-events: none;
  z-index: 5;
}
.is-mup-fullscreen.mup-fs-indicator-arrow::after {
  content: "↓";
  font-size: 28px;
  animation: mup-fs-bounce 1.8s ease-in-out infinite;
}
.is-mup-fullscreen.mup-fs-indicator-dots::after {
  content: "• • •";
  letter-spacing: 4px;
  animation: mup-fs-fade 2s ease-in-out infinite;
}
.is-mup-fullscreen.mup-fs-indicator-word::after {
  content: "scrollen";
}
@keyframes mup-fs-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.55; }
  50%      { transform: translateX(-50%) translateY(8px); opacity: 1; }
}
@keyframes mup-fs-fade {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1; }
}

/* Indikator versteckt sobald gescrolled */
body.mup-scrolled .is-mup-fullscreen::after { opacity: 0; }

/* Editor-Marker: zeigt im Editor das Verhalten */
.editor-styles-wrapper .is-mup-fullscreen {
  min-height: 80vh !important;
  outline: 1px dashed rgba(201, 168, 76, 0.35);
}
.editor-styles-wrapper .is-mup-fullscreen::before {
  content: "🖥 Fullscreen-Sektion (100 vh) — Inhalt darunter erscheint beim Scrollen";
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(201, 168, 76, 0.95);
  color: #1f1a12;
  padding: 4px 10px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  z-index: 10;
  pointer-events: none;
}