/* ═══════════════════════════════════════════════════════════════════
   Marstaller-Universum v3.2.15 — Bug-Fixes + Erweiterungen
   ───────────────────────────────────────────────────────────────────
   1) Heading-Center bleibt responsive zentriert
   2) Glow/Sparkle/Shimmer respektieren is-style-mup-* shape variants
      via drop-shadow (kein eckiger Schatten mehr)
   3) Image-Shape-Styles funktionieren bei verkleinertem Bild
   4) Sparkle: echte Funken-Animation statt nur Pulse
   5) Background-Fixed Option für Cover (Parallax)
   6) Kadence Advanced Image (kadence/advancedimage) bekommt
      dieselben Shape-Styles + Effekte
   ═══════════════════════════════════════════════════════════════════ */

/* ─── 1) HEADING-CENTER FIX ─────────────────────────────────────── */
/* Problem: has-text-align-center wurde von responsive-polish.css mit
   Mobile-Override überschrieben. Nuclear-Fix: !important auf Headings. */
.has-text-align-center,
.wp-block-heading.has-text-align-center,
.wp-block-paragraph.has-text-align-center {
  text-align: center !important;
}
.has-text-align-left,
.wp-block-heading.has-text-align-left {
  text-align: left !important;
}
.has-text-align-right,
.wp-block-heading.has-text-align-right {
  text-align: right !important;
}
/* Mobile: Center bleibt Center */
@media (max-width: 768px) {
  .has-text-align-center,
  .wp-block-heading.has-text-align-center,
  .wp-block-cover .has-text-align-center {
    text-align: center !important;
  }
}

/* ─── 2) GLOW/SPARKLE/SHIMMER RESPEKTIEREN ALLE SHAPE-STYLES ──── */
/* Alle is-style-mup-* + is-style-rounded shape variants */
.wp-block-image[class*="is-style-mup-"][data-mup-effect*="glow"] img,
.wp-block-image.is-style-rounded[data-mup-effect*="glow"] img,
.kb-image[class*="is-style-mup-"][data-mup-effect*="glow"] img,
.wp-block-image[class*="is-style-mup-"].has-mup-effect-glow img,
.wp-block-image.is-style-rounded.has-mup-effect-glow img {
  animation: mup-glow-drop-v2 calc(3s / var(--sp-speed, 1)) ease-in-out infinite !important;
  box-shadow: none !important;
}
@keyframes mup-glow-drop-v2 {
  0%, 100% { filter: drop-shadow(0 0 0 transparent); }
  50%      { filter: drop-shadow(0 0 calc(24px * var(--sp-intensity, 1))
                                     var(--sp-color-strong, rgba(201, 168, 76, 0.65))); }
}

/* Shimmer: drop-shadow folgt der Form */
.wp-block-image[class*="is-style-mup-"][data-mup-effect*="shimmer"] img,
.wp-block-image.is-style-rounded[data-mup-effect*="shimmer"] img,
.kb-image[class*="is-style-mup-"][data-mup-effect*="shimmer"] img {
  animation: mup-shimmer-drop-v2 calc(4s / var(--sp-speed, 1)) ease-in-out infinite !important;
  box-shadow: none !important;
}
@keyframes mup-shimmer-drop-v2 {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(255,255,255,0.08)); }
  50%      { filter: drop-shadow(0 0 calc(16px * var(--sp-intensity, 1))
                                     var(--sp-color, rgba(255,255,255,0.4))); }
}

/* ─── 3) IMAGE-SHAPE-STYLES FUNKTIONIEREN BEI VERKLEINERTEN BILDERN ── */
/* Problem: figure hat max-width, aber das img drinnen springt nicht
   richtig auf circle/oval, weil aspect-ratio nur greift wenn img die
   volle Container-Breite einnimmt. Fix: img zwingen auf 100% des figures.  */
.wp-block-image.is-style-mup-circle,
.wp-block-image.is-style-mup-rund,
.wp-block-image.is-style-mup-oval,
.wp-block-image.is-style-mup-oval-portrait,
.wp-block-image.is-style-mup-blob,
.wp-block-image.is-style-mup-hex,
.wp-block-image.is-style-mup-soft {
  overflow: visible;
}
.wp-block-image.is-style-mup-circle img,
.wp-block-image.is-style-mup-rund img,
.wp-block-image.is-style-mup-oval img,
.wp-block-image.is-style-mup-oval-portrait img,
.wp-block-image.is-style-mup-blob img,
.wp-block-image.is-style-mup-hex img,
.wp-block-image.is-style-mup-soft img,
/* Auch für Kadence Advanced Image */
.kb-image.is-style-mup-circle .kt-image,
.kb-image.is-style-mup-rund .kt-image,
.kb-image.is-style-mup-oval .kt-image,
.kb-image.is-style-mup-oval-portrait .kt-image,
.kb-image.is-style-mup-blob .kt-image,
.kb-image.is-style-mup-hex .kt-image,
.kb-image.is-style-mup-soft .kt-image,
.kb-image.is-style-mup-circle img,
.kb-image.is-style-mup-oval img,
.kb-image.is-style-mup-blob img {
  width: 100% !important;
  height: auto;
  display: block;
}

/* ─── 4) SPARKLE — ECHTE FUNKEN-ANIMATION ───────────────────────── */
/* Bisher: pulsierender Glow. Neu: kleine Sterne pulsieren rundherum. */
.wp-block-image[data-mup-effect*="sparkle"]:not([class*="is-style-mup-"]) img,
.wp-block-image.has-mup-effect-sparkle:not([class*="is-style-mup-"]) img,
.wp-block-heading[data-mup-effect*="sparkle"],
.wp-block-paragraph[data-mup-effect*="sparkle"] {
  position: relative;
}
/* Container braucht position:relative + isolation */
[data-mup-effect*="sparkle"]:not([class*="is-style-mup-"]) {
  position: relative;
  isolation: isolate;
}
/* Funken via radial-gradient als ::before-Layer */
[data-mup-effect*="sparkle"]:not([class*="is-style-mup-"])::before {
  content: '';
  position: absolute;
  inset: -20px;
  pointer-events: none;
  background:
    radial-gradient(2px 2px at 12% 18%, var(--sp-color-strong, #fff5d0) 0, transparent 50%),
    radial-gradient(1.5px 1.5px at 88% 22%, var(--sp-color-strong, #fff5d0) 0, transparent 50%),
    radial-gradient(2px 2px at 24% 78%, var(--sp-color-strong, #fff5d0) 0, transparent 50%),
    radial-gradient(1.5px 1.5px at 76% 82%, var(--sp-color-strong, #fff5d0) 0, transparent 50%),
    radial-gradient(1.5px 1.5px at 45% 8%, var(--sp-color-strong, #fff5d0) 0, transparent 50%),
    radial-gradient(2px 2px at 92% 55%, var(--sp-color-strong, #fff5d0) 0, transparent 50%),
    radial-gradient(1.5px 1.5px at 8% 50%, var(--sp-color-strong, #fff5d0) 0, transparent 50%),
    radial-gradient(2px 2px at 55% 95%, var(--sp-color-strong, #fff5d0) 0, transparent 50%);
  animation: mup-sparkle-twinkle calc(3.5s / var(--sp-speed, 1)) ease-in-out infinite;
  filter: drop-shadow(0 0 4px var(--sp-color-strong, rgba(255, 245, 208, 0.8)));
  z-index: 1;
}
@keyframes mup-sparkle-twinkle {
  0%, 100% { opacity: 0.15; transform: scale(0.9); }
  25%      { opacity: 0.9;  transform: scale(1.1) rotate(8deg); }
  50%      { opacity: 0.45; transform: scale(0.95) rotate(-4deg); }
  75%      { opacity: 0.85; transform: scale(1.05) rotate(6deg); }
}

/* Sparkle auf shape variants — Funken außen um die Form */
.wp-block-image[class*="is-style-mup-"][data-mup-effect*="sparkle"],
.wp-block-image.is-style-rounded[data-mup-effect*="sparkle"] {
  position: relative;
  isolation: isolate;
}
.wp-block-image[class*="is-style-mup-"][data-mup-effect*="sparkle"]::after,
.wp-block-image.is-style-rounded[data-mup-effect*="sparkle"]::after {
  content: '';
  position: absolute;
  inset: -30px;
  pointer-events: none;
  background:
    radial-gradient(2.5px 2.5px at 10% 10%, var(--sp-color-strong, #fff5d0) 0, transparent 50%),
    radial-gradient(2px 2px at 90% 15%, var(--sp-color-strong, #fff5d0) 0, transparent 50%),
    radial-gradient(2.5px 2.5px at 20% 90%, var(--sp-color-strong, #fff5d0) 0, transparent 50%),
    radial-gradient(2px 2px at 85% 85%, var(--sp-color-strong, #fff5d0) 0, transparent 50%),
    radial-gradient(2px 2px at 5% 50%, var(--sp-color-strong, #fff5d0) 0, transparent 50%),
    radial-gradient(2.5px 2.5px at 95% 55%, var(--sp-color-strong, #fff5d0) 0, transparent 50%);
  animation: mup-sparkle-twinkle calc(3.5s / var(--sp-speed, 1)) ease-in-out infinite;
  filter: drop-shadow(0 0 5px var(--sp-color-strong, rgba(255, 245, 208, 0.9)));
  z-index: -1;
}
/* img-Animation auf Shape weglassen — sonst kämpfen Glow und Sparkle */
.wp-block-image[class*="is-style-mup-"][data-mup-effect*="sparkle"]:not([data-mup-effect*="glow"]) img {
  animation: none !important;
}

/* ─── 5) BACKGROUND-FIXED FÜR COVER (Parallax) ──────────────────── */
/* Setzt das Hintergrundbild fix beim Scrollen.
   Aktivierung: Cover-Block bekommt class is-mup-bg-fixed */
.wp-block-cover.is-mup-bg-fixed {
  background-attachment: fixed;
}
.wp-block-cover.is-mup-bg-fixed > img.wp-block-cover__image-background {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  /* Clip auf den Cover-Block */
  clip-path: inset(0);
}
/* iOS-Fallback: position:fixed funktioniert nicht in iOS Safari → simulieren */
@supports (-webkit-touch-callout: none) {
  .wp-block-cover.is-mup-bg-fixed > img.wp-block-cover__image-background {
    position: absolute;
    height: 100%;
    width: 100%;
  }
  .wp-block-cover.is-mup-bg-fixed {
    background-attachment: scroll;
  }
}
/* prefers-reduced-motion: kein Parallax */
@media (prefers-reduced-motion: reduce) {
  .wp-block-cover.is-mup-bg-fixed {
    background-attachment: scroll;
  }
  .wp-block-cover.is-mup-bg-fixed > img.wp-block-cover__image-background {
    position: absolute;
    height: 100%;
    width: 100%;
  }
}

/* ─── 6) KADENCE ADVANCED IMAGE BLOCK-STYLES ────────────────────── */
/* Kadence wraps img in .kb-image-content + verschiedene wrapper */
.kb-image.is-style-mup-circle .kb-image-content,
.kb-image.is-style-mup-circle img,
.kb-image.is-style-mup-rund img {
  border-radius: 50% !important;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  box-shadow: 0 18px 50px -20px rgba(31, 26, 18, 0.28);
}
.kb-image.is-style-mup-oval img,
.kb-image.is-style-mup-oval .kb-image-content {
  border-radius: 50% / 35% !important;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.kb-image.is-style-mup-oval-portrait img {
  border-radius: 50% / 38% !important;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}
.kb-image.is-style-mup-blob img {
  border-radius: 60% 40% 50% 50% / 50% 60% 40% 50% !important;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  animation: mup-blob-morph 18s ease-in-out infinite;
}
.kb-image.is-style-mup-hex img {
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.kb-image.is-style-mup-soft img {
  border-radius: 18px !important;
  box-shadow: 0 12px 36px -16px rgba(31, 26, 18, 0.22);
}