/* ═══════════════════════════════════════════════════════════════════
   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 — v3.3.1 ZERO-LAYOUT-IMPACT FIX ──────────────────
   Der Effekt darf NIEMALS Position, Größe, Padding, Margin oder
   Stacking-Context des Containers verändern. Nur visueller Overlay
   per ::before, exakt im Container-Rect (inset:0), keine isolation.
   ─────────────────────────────────────────────────────────────────── */

/* Keinerlei Box-Eigenschaften am Container ändern! position:relative
   reicht für absolute ::before — KEIN isolation:isolate (das ändert
   stacking + manchmal Layout durch new formatting context). */
[data-mup-effect*="sparkle"]:not([class*="is-style-mup-"]) {
  /* nur falls Container noch kein positioning hat → einen anchor geben.
     Bei wp-block-cover ist position:relative bereits Standard, dieses
     wird also faktisch No-Op. */
  position: relative;
}

/* Funken-Layer: EXAKT auf Container-Rect, kein Überlappen nach außen */
[data-mup-effect*="sparkle"]:not([class*="is-style-mup-"])::before {
  content: '';
  position: absolute;
  inset: 0;                 /* statt -20px außen — KEIN Overflow-Impact */
  pointer-events: none;
  z-index: 2;               /* unter Text-Layern, über Bild */
  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;
  /* drop-shadow weggelassen — das ist ein Filter, der einen neuen
     stacking context erzeugt und in manchen Browsern transformierte
     Kinder neu positioniert. Stattdessen: leichter Box-Glow via
     box-shadow direkt am ::before (kein Filter, kein Layout-Impact). */
}
@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 im Rahmen des figures, KEIN Außenrand */
.wp-block-image[class*="is-style-mup-"][data-mup-effect*="sparkle"],
.wp-block-image.is-style-rounded[data-mup-effect*="sparkle"] {
  position: relative;
  /* KEIN isolation:isolate — kann Position kaputtmachen */
}
.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: 0;  /* statt -30px außen */
  pointer-events: none;
  z-index: 1;  /* über Bild */
  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;
  /* drop-shadow weggelassen — wäre filter und ändert stacking context */
}
/* 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);
}