/* ════════════════════════════════════════════════════════════════
   ZWZR — Spielereien v3 (Universal-Effekt-System)
   ─────────────────────────────────────────────────────────────────
   Alle Effekte sind über CSS-Variablen anpassbar:

   Block-Style anwenden:    „Sparkle", „Glow", „Shimmer", „Focus-Pull",
                            „Fade-Up", „Scroll-Reveal"
   ODER: CSS-Klasse selbst   .mup-eff-sparkle / -glow / -shimmer …

   Backend-Steuerung über zusätzliche CSS-Klassen
   (Block-Einstellungen → Erweitert → Zusätzliche CSS-Klasse):

   FARBE       mup-eff-color-gold / cream / rot / weiss / blau / gruen / violett / silber
   GESCHWINDIG mup-eff-speed-xfast / fast / normal / slow / xslow
   HINTERGRUND mup-eff-bg-transparent / dunkel / hell / cream / gold-soft

   Beispiel:   mup-eff-shimmer mup-eff-color-gold mup-eff-speed-slow mup-eff-bg-transparent
   ════════════════════════════════════════════════════════════════ */

:root {
  /* Defaults — vom Theme überschreibbar */
  --sp-color:        rgba(201, 168, 76, 0.65);   /* Gold (Default) */
  --sp-color-strong: rgba(201, 168, 76, 0.95);
  --sp-speed:        1;                           /* Animations-Multiplikator */
  --sp-bg:           transparent;
  --sp-intensity:    1;                           /* Leuchtkraft-Multiplikator */
  --sp-padding:      0;                           /* Innenpolster (px) */
}

/* ─── FARB-MODIFIER (auf alle Effekte anwendbar) ─────────────── */
.mup-eff-color-gold      { --sp-color: rgba(201, 168, 76, 0.65);  --sp-color-strong: rgba(201, 168, 76, 0.95); }
.mup-eff-color-cream     { --sp-color: rgba(245, 240, 232, 0.75); --sp-color-strong: rgba(245, 240, 232, 0.98); }
.mup-eff-color-rot       { --sp-color: rgba(200, 37, 44, 0.65);   --sp-color-strong: rgba(200, 37, 44, 0.95); }
.mup-eff-color-weiss     { --sp-color: rgba(255, 255, 255, 0.85); --sp-color-strong: rgba(255, 255, 255, 1); }
.mup-eff-color-blau      { --sp-color: rgba(74, 144, 226, 0.65);  --sp-color-strong: rgba(74, 144, 226, 0.95); }
.mup-eff-color-gruen     { --sp-color: rgba(126, 186, 130, 0.65); --sp-color-strong: rgba(126, 186, 130, 0.95); }
.mup-eff-color-violett   { --sp-color: rgba(155, 89, 182, 0.65);  --sp-color-strong: rgba(155, 89, 182, 0.95); }
.mup-eff-color-silber    { --sp-color: rgba(190, 190, 200, 0.7);  --sp-color-strong: rgba(220, 220, 230, 1); }
.mup-eff-color-pink      { --sp-color: rgba(232, 90, 149, 0.65);  --sp-color-strong: rgba(232, 90, 149, 0.95); }
.mup-eff-color-clay      { --sp-color: rgba(194, 91, 65, 0.65);   --sp-color-strong: rgba(194, 91, 65, 0.95); }

/* ─── GESCHWINDIGKEITS-MODIFIER (Multiplikator) ──────────────── */
.mup-eff-speed-xfast     { --sp-speed: 0.35; }
.mup-eff-speed-fast      { --sp-speed: 0.65; }
.mup-eff-speed-normal    { --sp-speed: 1; }
.mup-eff-speed-slow      { --sp-speed: 1.7; }
.mup-eff-speed-xslow     { --sp-speed: 2.8; }

/* ─── HINTERGRUND-MODIFIER (v.a. für Shimmer) ────────────────── */
.mup-eff-bg-transparent  { --sp-bg: transparent; }
.mup-eff-bg-dunkel       { --sp-bg: rgba(13, 13, 13, 0.7); }
.mup-eff-bg-hell         { --sp-bg: rgba(255, 255, 255, 0.85); }
.mup-eff-bg-cream        { --sp-bg: #F5F0E8; }
.mup-eff-bg-gold-soft    { --sp-bg: rgba(201, 168, 76, 0.12); }
.mup-eff-bg-noir         { --sp-bg: #0D0D0D; }

/* ═══════════════════════════════════════════════════════════════
   KEYFRAMES
   ═══════════════════════════════════════════════════════════════ */
@keyframes sp-sparkle-drift {
  0%   { background-position: 0 0, 0 0, 0 0, 0 0, 0 0; }
  100% { background-position: 280px 280px, -280px 280px, 280px -280px, -280px -280px, 140px 140px; }
}
@keyframes sp-focus-pull {
  0%   { filter: blur(8px) brightness(1.15) saturate(0.9); transform: scale(1.02); }
  100% { filter: blur(0)   brightness(1)    saturate(1);    transform: scale(1); }
}
@keyframes sp-shimmer-sweep {
  /* 0–25 %: Sweep läuft über das Element.
     25–100 %: Streifen sitzt offscreen, opacity 0 → echte Pause.
     Damit ist das Element 75 % der Zeit komplett unverändert. */
  0%   { transform: translateX(-110%) skewX(-12deg); opacity: 0; }
  2%   { opacity: 1; }
  22%  { transform: translateX(110%) skewX(-12deg); opacity: 1; }
  25%  { transform: translateX(110%) skewX(-12deg); opacity: 0; }
  100% { transform: translateX(110%) skewX(-12deg); opacity: 0; }
}
@keyframes sp-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--sp-color); }
  50%      { box-shadow: 0 0 calc(32px * var(--sp-intensity)) calc(6px * var(--sp-intensity)) var(--sp-color-strong); }
}
@keyframes sp-fade-up {
  0%   { opacity: 0; transform: translateY(30px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════════
   1. SPARKLE — Diamant-Schimmer mit konfigurierbarer Farbe/Speed
   ═══════════════════════════════════════════════════════════════ */
.is-style-spielerei-sparkle,
.mup-eff-sparkle {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: var(--sp-padding, 0);
}
.is-style-spielerei-sparkle::after,
.mup-eff-sparkle::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle 3px at 8% 12%,  var(--sp-color-strong), transparent 70%),
    radial-gradient(circle 2px at 82% 18%, var(--sp-color-strong), transparent 70%),
    radial-gradient(circle 4px at 28% 72%, var(--sp-color),        transparent 70%),
    radial-gradient(circle 3px at 92% 82%, var(--sp-color-strong), transparent 70%),
    radial-gradient(circle 3px at 48% 32%, var(--sp-color),        transparent 70%);
  background-size: 280px 280px;
  animation: sp-sparkle-drift calc(14s * var(--sp-speed)) linear infinite;
  mix-blend-mode: screen;
  z-index: 2;
}

/* ═══════════════════════════════════════════════════════════════
   2. FOCUS-PULL — Unscharf → scharf (für Bilder + Hintergründe)
   ═══════════════════════════════════════════════════════════════ */
.is-style-spielerei-focus,
.mup-eff-focus {
  /* Für Container ohne Bild: Effekt direkt auf das Element */
  animation: sp-focus-pull calc(2.5s * var(--sp-speed)) ease-out forwards;
  transform-origin: center;
}
/* Für Bilder im Bild/Cover-Block: Effekt aufs <img> umleiten */
figure.wp-block-image.is-style-spielerei-focus,
figure.wp-block-image.mup-eff-focus,
.wp-block-cover.is-style-spielerei-focus,
.wp-block-cover.mup-eff-focus {
  animation: none;
}
figure.wp-block-image.is-style-spielerei-focus img,
figure.wp-block-image.mup-eff-focus img,
.wp-block-cover.is-style-spielerei-focus .wp-block-cover__image-background,
.wp-block-cover.mup-eff-focus .wp-block-cover__image-background {
  animation: sp-focus-pull calc(2.5s * var(--sp-speed)) ease-out forwards;
  transform-origin: center;
}

/* ═══════════════════════════════════════════════════════════════
   3. SHIMMER — Licht-Streifen läuft durch, OHNE grauen Hintergrund
   Standard: transparenter Hintergrund, leichter Soft-Blur am Streifen
   ═══════════════════════════════════════════════════════════════ */
.is-style-spielerei-shimmer,
.mup-eff-shimmer {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--sp-bg);
  padding: var(--sp-padding, 0);
}
.is-style-spielerei-shimmer::before,
.mup-eff-shimmer::before {
  content: "";
  position: absolute;
  top: -25%;
  bottom: -25%;
  left: 0;
  right: 0;
  background: linear-gradient(
    105deg,
    transparent 30%,
    var(--sp-color) 45%,
    var(--sp-color-strong) 50%,
    var(--sp-color) 55%,
    transparent 70%
  );
  transform: translateX(-110%) skewX(-12deg);
  /* Cycle = 6s → Sweep läuft 0–1.5s, Pause 1.5–6s. Mit speed-Multiplier skalierbar. */
  animation: sp-shimmer-sweep calc(6s * var(--sp-speed)) ease-in-out 0.4s infinite;
  pointer-events: none;
  z-index: 2;
  mix-blend-mode: screen;
  filter: blur(3px);
  opacity: 0;
}
/* Einmal-Variante: läuft nur einmal */
.mup-eff-shimmer-once::before,
.is-style-spielerei-shimmer-once::before {
  animation: sp-shimmer-sweep calc(2.4s * var(--sp-speed)) ease-out 0.6s forwards !important;
}

/* ═══════════════════════════════════════════════════════════════
   4. GLOW — pulsierende Aura mit konfigurierbarer Farbe + Speed
   ═══════════════════════════════════════════════════════════════ */
.is-style-spielerei-glow,
.mup-eff-glow {
  animation: sp-pulse calc(4s * var(--sp-speed)) ease-in-out infinite;
  border-radius: 4px;
  padding: var(--sp-padding, 0);
}
/* Für Text-Glow — Intensität skaliert Blur-Radien */
.mup-eff-glow-text,
p.is-style-spielerei-glow,
h1.is-style-spielerei-glow, h2.is-style-spielerei-glow,
h3.is-style-spielerei-glow, h4.is-style-spielerei-glow,
h5.is-style-spielerei-glow, h6.is-style-spielerei-glow,
p.mup-eff-glow, h1.mup-eff-glow, h2.mup-eff-glow,
h3.mup-eff-glow, h4.mup-eff-glow, h5.mup-eff-glow, h6.mup-eff-glow {
  animation: none;
  text-shadow:
    0 0 calc( 8px * var(--sp-intensity)) var(--sp-color),
    0 0 calc(16px * var(--sp-intensity)) var(--sp-color),
    0 0 calc(24px * var(--sp-intensity)) var(--sp-color-strong);
}

/* ═══════════════════════════════════════════════════════════════
   5. FADE-UP — sanftes Aufsteigen beim Laden
   ═══════════════════════════════════════════════════════════════ */
.is-style-spielerei-fade-up,
.mup-eff-fade-up {
  opacity: 0;
  transform: translateY(30px);
  animation: sp-fade-up calc(1.2s * var(--sp-speed)) ease-out 0.2s forwards;
}

/* ═══════════════════════════════════════════════════════════════
   6. SCROLL-REVEAL — fliegt beim Scrollen rein (per JS aktiviert)
   ═══════════════════════════════════════════════════════════════ */
.is-style-spielerei-scroll-reveal,
.mup-eff-scroll-reveal {
  --reveal-start: 0.4;
  --reveal-shift: 60px;
  opacity: var(--reveal-start);
  transform: translateY(var(--reveal-shift));
  transition:
    opacity   calc(1.2s * var(--sp-speed)) cubic-bezier(0.22, 1, 0.36, 1),
    transform calc(1.2s * var(--sp-speed)) cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.is-style-spielerei-scroll-reveal.is-revealed,
.mup-eff-scroll-reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ═══════════════════════════════════════════════════════════════
   7. HANDSCHRIFT — Caveat-Schriftvariante (separater Effekt)
   ═══════════════════════════════════════════════════════════════ */
.is-style-handschrift,
.mup-eff-handschrift,
.is-style-handschrift p, .is-style-handschrift h1, .is-style-handschrift h2,
.is-style-handschrift h3, .is-style-handschrift h4,
.mup-eff-handschrift p, .mup-eff-handschrift h1, .mup-eff-handschrift h2,
.mup-eff-handschrift h3, .mup-eff-handschrift h4 {
  font-family: 'Caveat', 'Brush Script MT', cursive !important;
  font-weight: 500;
  letter-spacing: 0.3px;
  font-style: normal !important;
}

/* ═══════════════════════════════════════════════════════════════
   REDUCE-MOTION: keine Animationen
   ═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .is-style-spielerei-sparkle::after,         .mup-eff-sparkle::after,
  .is-style-spielerei-focus,                  .mup-eff-focus,
  figure.wp-block-image.is-style-spielerei-focus img,
  figure.wp-block-image.mup-eff-focus img,
  .wp-block-cover.is-style-spielerei-focus .wp-block-cover__image-background,
  .wp-block-cover.mup-eff-focus .wp-block-cover__image-background,
  .is-style-spielerei-shimmer::before,        .mup-eff-shimmer::before,
  .is-style-spielerei-glow,                   .mup-eff-glow,
  .is-style-spielerei-fade-up,                .mup-eff-fade-up,
  .is-style-spielerei-scroll-reveal,          .mup-eff-scroll-reveal {
    animation: none !important;
    transition: none !important;
  }
  .is-style-spielerei-fade-up,
  .mup-eff-fade-up,
  .is-style-spielerei-scroll-reveal,
  .mup-eff-scroll-reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   INLINE-FORMATE (Selektion in Text-Blöcken)
   Wirkt zeilenweise/wortweise, applied über Toolbar-Buttons.
   ═══════════════════════════════════════════════════════════════ */

/* Handschrift — Caveat-Cursive auf markierten Text */
.zzr-inline-handschrift {
  font-family: 'Caveat', 'Brush Script MT', cursive !important;
  font-style: normal !important;
  font-weight: 500;
  letter-spacing: 0.3px;
  font-size: 1.25em;  /* leicht größer wegen handschriftlicher Optik */
  color: inherit;
}

/* Glow-Text — leuchtender Text-Schatten */
.zzr-inline-glow {
  text-shadow:
    0 0 6px var(--sp-color, rgba(201, 168, 76, 0.6)),
    0 0 14px var(--sp-color, rgba(201, 168, 76, 0.45)),
    0 0 22px var(--sp-color, rgba(201, 168, 76, 0.3));
}

/* Goldmarker — Highlight-Textmarker */
.zzr-inline-marker {
  background: linear-gradient(180deg, transparent 50%, rgba(201, 168, 76, 0.45) 50%);
  padding: 0 0.1em;
  color: inherit;
}

/* Akzent — Cormorant-italic Akzentuierung */
.zzr-inline-akzent {
  font-family: var(--zzr-font-display, 'Cormorant Garamond', serif);
  font-style: italic;
  font-weight: 500;
  color: var(--zzr-gold, #C9A84C);
}

/* ═══════════════════════════════════════════════════════════════
   INLINE-FORMATE (Selektion in Text-Blöcken — wortweise)
   ═══════════════════════════════════════════════════════════════ */
.mup-inline-handschrift,
.zzr-inline-handschrift {
  font-family: 'Caveat', 'Brush Script MT', cursive !important;
  font-style: normal !important;
  font-weight: 500;
  letter-spacing: 0.3px;
  font-size: 1.25em;
  color: inherit;
}
.mup-inline-glow,
.zzr-inline-glow {
  text-shadow:
    0 0 6px var(--sp-color, rgba(201, 168, 76, 0.6)),
    0 0 14px var(--sp-color, rgba(201, 168, 76, 0.45)),
    0 0 22px var(--sp-color, rgba(201, 168, 76, 0.3));
}
.mup-inline-marker,
.zzr-inline-marker {
  background: linear-gradient(180deg, transparent 50%, rgba(201, 168, 76, 0.45) 50%);
  padding: 0 0.1em;
  color: inherit;
}
.mup-inline-akzent,
.zzr-inline-akzent {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  color: #C9A84C;
}

/* ═══════════════════════════════════════════════════════════════
   EDITOR-PANEL — Heading-Style
   ═══════════════════════════════════════════════════════════════ */
.editor-styles-wrapper .mup-eff-shimmer::before,
.editor-styles-wrapper .is-style-spielerei-shimmer::before {
  animation-iteration-count: 3 !important; /* Im Editor nicht endlos */
}

/* ═══════════════════════════════════════════════════════════════
   8. HANDSCHRIFT — Buchstabe für Buchstabe, wie echte Schrift
   ═══════════════════════════════════════════════════════════════ */
@keyframes mup-handwrite-in {
  0%   { opacity: 0; transform: translateY(-6px) rotate(-4deg) scale(0.85); }
  50%  { opacity: 0.7; transform: translateY(-2px) rotate(-2deg) scale(0.95); }
  100% { opacity: 1; transform: translateY(0) rotate(0deg) scale(1); }
}

.mup-eff-handwriting,
.is-style-spielerei-handwriting {
  font-family: 'Caveat', 'Brush Script MT', 'Marker Felt', cursive !important;
  font-style: normal !important;
  font-weight: 500;
  letter-spacing: 0.5px;
  line-height: 1.4;
  /* Größer machen weil Caveat schmaler ist als der Standard */
  font-size: 1.35em;
}

.mup-eff-handwriting .mup-hw-char,
.is-style-spielerei-handwriting .mup-hw-char {
  display: inline-block;
  opacity: 0;
  will-change: opacity, transform;
}

/* Speed-Anpassung: kürzeres step-delay über CSS-Var */
.mup-eff-handwriting[data-mup-speed],
.is-style-spielerei-handwriting[data-mup-speed] {
  /* JS liest data-mup-handwriting-step; speed wirkt nur, wenn JS explizit angepasst */
}

/* Reduce-Motion: alle Zeichen sofort sichtbar */
@media (prefers-reduced-motion: reduce) {
  .mup-eff-handwriting .mup-hw-char,
  .is-style-spielerei-handwriting .mup-hw-char {
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   9. CINEMASCOPE — Letterbox + Cinematic Grade
   ═══════════════════════════════════════════════════════════════ */
.mup-eff-cinemascope,
.is-style-spielerei-cinemascope {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  filter: contrast(1.08) saturate(0.85) brightness(0.97);
}
.mup-eff-cinemascope::before,
.is-style-spielerei-cinemascope::before,
.mup-eff-cinemascope::after,
.is-style-spielerei-cinemascope::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: calc(8% * var(--sp-intensity, 1));
  background: #000;
  pointer-events: none;
  z-index: 10;
  animation: sp-letterbox-in calc(1.5s * var(--sp-speed, 1)) cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.mup-eff-cinemascope::before, .is-style-spielerei-cinemascope::before { top: 0; transform-origin: top; }
.mup-eff-cinemascope::after,  .is-style-spielerei-cinemascope::after  { bottom: 0; transform-origin: bottom; }
@keyframes sp-letterbox-in {
  0%   { transform: scaleY(0); }
  100% { transform: scaleY(1); }
}

/* ═══════════════════════════════════════════════════════════════
   10. VINTAGE-FILM — Sepia + Grain + Vignette
   ═══════════════════════════════════════════════════════════════ */
.mup-eff-vintage,
.is-style-spielerei-vintage {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  filter: sepia(calc(0.45 * var(--sp-intensity, 1))) contrast(1.05) brightness(0.95) saturate(0.9);
}
/* Grain-Layer */
.mup-eff-vintage::before,
.is-style-spielerei-vintage::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 8;
  opacity: calc(0.25 * var(--sp-intensity, 1));
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 0.6 0 0 0 0 0.5 0 0 0 0 0.4 0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: sp-grain-shift calc(0.3s * var(--sp-speed, 1)) steps(4) infinite;
}
@keyframes sp-grain-shift {
  0%, 100% { transform: translate(0, 0); }
  25%      { transform: translate(-3px, 2px); }
  50%      { transform: translate(2px, -2px); }
  75%      { transform: translate(-1px, 1px); }
}
/* Vignette-Layer */
.mup-eff-vintage::after,
.is-style-spielerei-vintage::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 9;
  background: radial-gradient(ellipse at center,
    transparent 40%,
    rgba(0,0,0, calc(0.4 * var(--sp-intensity, 1))) 100%);
}

/* ═══════════════════════════════════════════════════════════════
   11. SPOTLIGHT — Bühnenlicht-Vignette mit warmem Zentrum
   ═══════════════════════════════════════════════════════════════ */
.mup-eff-spotlight,
.is-style-spielerei-spotlight {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: var(--sp-padding, 0);
}
.mup-eff-spotlight::before,
.is-style-spielerei-spotlight::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    radial-gradient(ellipse 45% 60% at 50% 50%,
      transparent 0%,
      transparent calc(35% / var(--sp-intensity, 1)),
      rgba(0,0,0, 0.55) 70%,
      rgba(0,0,0, 0.92) 100%);
  animation: sp-spotlight-breath calc(8s * var(--sp-speed, 1)) ease-in-out infinite;
}
.mup-eff-spotlight::after,
.is-style-spielerei-spotlight::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 2;
  background: radial-gradient(circle 35% at 50% 30%,
    var(--sp-color-strong, rgba(201, 168, 76, 0.95)) 0%,
    var(--sp-color, rgba(201, 168, 76, 0.65)) 25%,
    transparent 65%);
  mix-blend-mode: screen;
  opacity: calc(0.95 * var(--sp-intensity, 1));
}
@keyframes sp-spotlight-breath {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}
.mup-eff-spotlight > * { position: relative; z-index: 3; }

@media (prefers-reduced-motion: reduce) {
  .mup-eff-cinemascope::before, .mup-eff-cinemascope::after,
  .is-style-spielerei-cinemascope::before, .is-style-spielerei-cinemascope::after,
  .mup-eff-vintage::before, .is-style-spielerei-vintage::before,
  .mup-eff-spotlight::before, .is-style-spielerei-spotlight::before {
    animation: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   TEXT-EFFEKTE: Effekt hugt nur den Text, nicht die volle Block-Breite
   ─────────────────────────────────────────────────────────────────
   Bei Überschriften, Absätzen, Zitaten: Element wird inline-block,
   damit Sparkle/Glow/Shimmer-Hülle die Textbreite nimmt, nicht die
   Container-Breite. Text-Align des Parents bleibt erhalten.
   ═══════════════════════════════════════════════════════════════ */

h1.mup-eff-sparkle, h2.mup-eff-sparkle, h3.mup-eff-sparkle,
h4.mup-eff-sparkle, h5.mup-eff-sparkle, h6.mup-eff-sparkle,
p.mup-eff-sparkle, blockquote.mup-eff-sparkle,
h1.is-style-spielerei-sparkle, h2.is-style-spielerei-sparkle,
h3.is-style-spielerei-sparkle, h4.is-style-spielerei-sparkle,
h5.is-style-spielerei-sparkle, h6.is-style-spielerei-sparkle,
p.is-style-spielerei-sparkle, blockquote.is-style-spielerei-sparkle,

h1.mup-eff-shimmer, h2.mup-eff-shimmer, h3.mup-eff-shimmer,
h4.mup-eff-shimmer, h5.mup-eff-shimmer, h6.mup-eff-shimmer,
p.mup-eff-shimmer, blockquote.mup-eff-shimmer,
h1.is-style-spielerei-shimmer, h2.is-style-spielerei-shimmer,
h3.is-style-spielerei-shimmer, h4.is-style-spielerei-shimmer,
h5.is-style-spielerei-shimmer, h6.is-style-spielerei-shimmer,
p.is-style-spielerei-shimmer, blockquote.is-style-spielerei-shimmer,

h1.mup-eff-spotlight, h2.mup-eff-spotlight, h3.mup-eff-spotlight,
h4.mup-eff-spotlight, h5.mup-eff-spotlight, h6.mup-eff-spotlight,
p.mup-eff-spotlight,
h1.is-style-spielerei-spotlight, h2.is-style-spielerei-spotlight,
h3.is-style-spielerei-spotlight, h4.is-style-spielerei-spotlight,
h5.is-style-spielerei-spotlight, h6.is-style-spielerei-spotlight,
p.is-style-spielerei-spotlight,

h1.mup-eff-cinemascope, h2.mup-eff-cinemascope, h3.mup-eff-cinemascope,
h4.mup-eff-cinemascope, h5.mup-eff-cinemascope, h6.mup-eff-cinemascope,
p.mup-eff-cinemascope,
h1.is-style-spielerei-cinemascope, h2.is-style-spielerei-cinemascope,
h3.is-style-spielerei-cinemascope, h4.is-style-spielerei-cinemascope,
h5.is-style-spielerei-cinemascope, h6.is-style-spielerei-cinemascope,
p.is-style-spielerei-cinemascope,

h1.mup-eff-vintage, h2.mup-eff-vintage, h3.mup-eff-vintage,
h4.mup-eff-vintage, h5.mup-eff-vintage, h6.mup-eff-vintage,
p.mup-eff-vintage,
h1.is-style-spielerei-vintage, h2.is-style-spielerei-vintage,
h3.is-style-spielerei-vintage, h4.is-style-spielerei-vintage,
h5.is-style-spielerei-vintage, h6.is-style-spielerei-vintage,
p.is-style-spielerei-vintage {
  display: inline-block !important;
  max-width: 100%;
}

/* Bei Glow auf Headings/Paragraphs: Text-Shadow statt Box-Shadow
   (Glyphen leuchten, nicht das Rechteck) — bereits oben in Punkt 4 definiert.
   Aber wir setzen sicherheitshalber animation:none nochmal explizit, falls
   die generische Glow-Regel zuerst zieht. */
h1.mup-eff-glow, h2.mup-eff-glow, h3.mup-eff-glow,
h4.mup-eff-glow, h5.mup-eff-glow, h6.mup-eff-glow,
p.mup-eff-glow, blockquote.mup-eff-glow {
  display: inline-block !important;
  max-width: 100%;
  animation: none !important;
  box-shadow: none !important;
  text-shadow:
    0 0 calc( 8px * var(--sp-intensity, 1)) var(--sp-color),
    0 0 calc(16px * var(--sp-intensity, 1)) var(--sp-color),
    0 0 calc(24px * var(--sp-intensity, 1)) var(--sp-color-strong);
}

/* ═══════════════════════════════════════════════════════════════
   FIX v2.3.8: Text-Effekte respektieren has-text-align-center
   ─────────────────────────────────────────────────────────────────
   Vorher: display:inline-block ließ Heading am linken Rand kleben,
   weil `has-text-align-center` auf dem Heading selbst sitzt — nicht
   auf dem Parent. Jetzt: display:block + width:fit-content + auto-
   margin, je nach Align-Klasse.
   ═══════════════════════════════════════════════════════════════ */
h1.mup-eff-sparkle,    h2.mup-eff-sparkle,    h3.mup-eff-sparkle,
h4.mup-eff-sparkle,    h5.mup-eff-sparkle,    h6.mup-eff-sparkle,
p.mup-eff-sparkle,     blockquote.mup-eff-sparkle,

h1.mup-eff-glow,       h2.mup-eff-glow,       h3.mup-eff-glow,
h4.mup-eff-glow,       h5.mup-eff-glow,       h6.mup-eff-glow,
p.mup-eff-glow,        blockquote.mup-eff-glow,

h1.mup-eff-shimmer,    h2.mup-eff-shimmer,    h3.mup-eff-shimmer,
h4.mup-eff-shimmer,    h5.mup-eff-shimmer,    h6.mup-eff-shimmer,
p.mup-eff-shimmer,     blockquote.mup-eff-shimmer,

h1.is-style-spielerei-sparkle,    h2.is-style-spielerei-sparkle,
h3.is-style-spielerei-sparkle,    h4.is-style-spielerei-sparkle,
h5.is-style-spielerei-sparkle,    h6.is-style-spielerei-sparkle,
p.is-style-spielerei-sparkle,     blockquote.is-style-spielerei-sparkle,

h1.is-style-spielerei-glow,       h2.is-style-spielerei-glow,
h3.is-style-spielerei-glow,       h4.is-style-spielerei-glow,
h5.is-style-spielerei-glow,       h6.is-style-spielerei-glow,
p.is-style-spielerei-glow,        blockquote.is-style-spielerei-glow,

h1.is-style-spielerei-shimmer,    h2.is-style-spielerei-shimmer,
h3.is-style-spielerei-shimmer,    h4.is-style-spielerei-shimmer,
h5.is-style-spielerei-shimmer,    h6.is-style-spielerei-shimmer,
p.is-style-spielerei-shimmer,     blockquote.is-style-spielerei-shimmer {
  display: block !important;
  width: fit-content;
  width: -moz-fit-content;
  max-width: 100%;
  margin-left: 0;
  margin-right: auto;
}

/* v2.4.3-FIX: Spotlight, Cinemascope, Vintage NICHT auf fit-content zwingen
   — sie brauchen die volle Block-Breite, damit Vignette/Letterbox/Sepia
   sichtbar werden. Bei Headings/Paragraphen also volle Container-Breite. */
h1.mup-eff-spotlight, h2.mup-eff-spotlight, h3.mup-eff-spotlight,
h4.mup-eff-spotlight, h5.mup-eff-spotlight, h6.mup-eff-spotlight,
p.mup-eff-spotlight,
h1.mup-eff-cinemascope, h2.mup-eff-cinemascope, h3.mup-eff-cinemascope,
h4.mup-eff-cinemascope, h5.mup-eff-cinemascope, h6.mup-eff-cinemascope,
p.mup-eff-cinemascope,
h1.mup-eff-vintage, h2.mup-eff-vintage, h3.mup-eff-vintage,
h4.mup-eff-vintage, h5.mup-eff-vintage, h6.mup-eff-vintage,
p.mup-eff-vintage,
h1.is-style-spielerei-spotlight, h2.is-style-spielerei-spotlight,
h3.is-style-spielerei-spotlight, h4.is-style-spielerei-spotlight,
h5.is-style-spielerei-spotlight, h6.is-style-spielerei-spotlight,
p.is-style-spielerei-spotlight,
h1.is-style-spielerei-cinemascope, h2.is-style-spielerei-cinemascope,
h3.is-style-spielerei-cinemascope, h4.is-style-spielerei-cinemascope,
h5.is-style-spielerei-cinemascope, h6.is-style-spielerei-cinemascope,
p.is-style-spielerei-cinemascope,
h1.is-style-spielerei-vintage, h2.is-style-spielerei-vintage,
h3.is-style-spielerei-vintage, h4.is-style-spielerei-vintage,
h5.is-style-spielerei-vintage, h6.is-style-spielerei-vintage,
p.is-style-spielerei-vintage {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  /* Mindesthöhe, damit Spotlight-Vignette + Letterbox sichtbar werden */
  min-height: 1.5em;
  padding: clamp(20px, 4vh, 60px) clamp(20px, 5%, 60px);
  box-sizing: border-box;
}

/* Wenn das Element zentriert ist → auch der Effekt-Container zentrieren */
h1.has-text-align-center.mup-eff-sparkle,     h2.has-text-align-center.mup-eff-sparkle,
h3.has-text-align-center.mup-eff-sparkle,     h4.has-text-align-center.mup-eff-sparkle,
h5.has-text-align-center.mup-eff-sparkle,     h6.has-text-align-center.mup-eff-sparkle,
p.has-text-align-center.mup-eff-sparkle,      blockquote.has-text-align-center.mup-eff-sparkle,
h1.has-text-align-center.mup-eff-glow,        h2.has-text-align-center.mup-eff-glow,
h3.has-text-align-center.mup-eff-glow,        h4.has-text-align-center.mup-eff-glow,
h5.has-text-align-center.mup-eff-glow,        h6.has-text-align-center.mup-eff-glow,
p.has-text-align-center.mup-eff-glow,         blockquote.has-text-align-center.mup-eff-glow,
h1.has-text-align-center.mup-eff-shimmer,     h2.has-text-align-center.mup-eff-shimmer,
h3.has-text-align-center.mup-eff-shimmer,     h4.has-text-align-center.mup-eff-shimmer,
h5.has-text-align-center.mup-eff-shimmer,     h6.has-text-align-center.mup-eff-shimmer,
p.has-text-align-center.mup-eff-shimmer,      blockquote.has-text-align-center.mup-eff-shimmer,
h1.has-text-align-center.mup-eff-spotlight,   h2.has-text-align-center.mup-eff-spotlight,
h3.has-text-align-center.mup-eff-spotlight,   h4.has-text-align-center.mup-eff-spotlight,
h5.has-text-align-center.mup-eff-spotlight,   h6.has-text-align-center.mup-eff-spotlight,
p.has-text-align-center.mup-eff-spotlight,
h1.has-text-align-center.mup-eff-cinemascope, h2.has-text-align-center.mup-eff-cinemascope,
h3.has-text-align-center.mup-eff-cinemascope, h4.has-text-align-center.mup-eff-cinemascope,
h5.has-text-align-center.mup-eff-cinemascope, h6.has-text-align-center.mup-eff-cinemascope,
p.has-text-align-center.mup-eff-cinemascope,
h1.has-text-align-center.mup-eff-vintage,     h2.has-text-align-center.mup-eff-vintage,
h3.has-text-align-center.mup-eff-vintage,     h4.has-text-align-center.mup-eff-vintage,
h5.has-text-align-center.mup-eff-vintage,     h6.has-text-align-center.mup-eff-vintage,
p.has-text-align-center.mup-eff-vintage,
h1.has-text-align-center.is-style-spielerei-sparkle, h2.has-text-align-center.is-style-spielerei-sparkle,
h3.has-text-align-center.is-style-spielerei-sparkle, h4.has-text-align-center.is-style-spielerei-sparkle,
h5.has-text-align-center.is-style-spielerei-sparkle, h6.has-text-align-center.is-style-spielerei-sparkle,
p.has-text-align-center.is-style-spielerei-sparkle,
h1.has-text-align-center.is-style-spielerei-glow,    h2.has-text-align-center.is-style-spielerei-glow,
h3.has-text-align-center.is-style-spielerei-glow,    h4.has-text-align-center.is-style-spielerei-glow,
h5.has-text-align-center.is-style-spielerei-glow,    h6.has-text-align-center.is-style-spielerei-glow,
p.has-text-align-center.is-style-spielerei-glow,
h1.has-text-align-center.is-style-spielerei-shimmer, h2.has-text-align-center.is-style-spielerei-shimmer,
h3.has-text-align-center.is-style-spielerei-shimmer, h4.has-text-align-center.is-style-spielerei-shimmer,
h5.has-text-align-center.is-style-spielerei-shimmer, h6.has-text-align-center.is-style-spielerei-shimmer,
p.has-text-align-center.is-style-spielerei-shimmer,
h1.has-text-align-center.is-style-spielerei-spotlight, h2.has-text-align-center.is-style-spielerei-spotlight,
h3.has-text-align-center.is-style-spielerei-spotlight, h4.has-text-align-center.is-style-spielerei-spotlight,
h5.has-text-align-center.is-style-spielerei-spotlight, h6.has-text-align-center.is-style-spielerei-spotlight,
p.has-text-align-center.is-style-spielerei-spotlight,
h1.has-text-align-center.is-style-spielerei-cinemascope, h2.has-text-align-center.is-style-spielerei-cinemascope,
h3.has-text-align-center.is-style-spielerei-cinemascope, h4.has-text-align-center.is-style-spielerei-cinemascope,
h5.has-text-align-center.is-style-spielerei-cinemascope, h6.has-text-align-center.is-style-spielerei-cinemascope,
p.has-text-align-center.is-style-spielerei-cinemascope,
h1.has-text-align-center.is-style-spielerei-vintage, h2.has-text-align-center.is-style-spielerei-vintage,
h3.has-text-align-center.is-style-spielerei-vintage, h4.has-text-align-center.is-style-spielerei-vintage,
h5.has-text-align-center.is-style-spielerei-vintage, h6.has-text-align-center.is-style-spielerei-vintage,
p.has-text-align-center.is-style-spielerei-vintage {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Right-aligned → an den rechten Rand */
[class*="mup-eff-"].has-text-align-right,
[class*="is-style-spielerei-"].has-text-align-right {
  margin-left: auto !important;
  margin-right: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════
   FIX v2.4.2: Bilder schrumpfen nicht, wenn Effekt aktiviert wird
   ─────────────────────────────────────────────────────────────────
   Vorher: bei Glow/Sparkle/Shimmer auf wp:image wurde Padding aus
   --sp-padding (% der Box) addiert, das Bild blieb klein im Padding-
   Frame. Jetzt: für figure.wp-block-image / .wp-block-cover Padding
   IMMER auf 0 erzwingen — der Effekt (Glow-Halo, Sparkle, Shimmer-
   Sweep) wirkt um/über das Bild, nicht durch Padding-Schrumpfung.
   Das Bild bleibt voll dimensioniert.
   ═══════════════════════════════════════════════════════════════ */
figure.wp-block-image[class*="mup-eff-"],
figure.wp-block-image[class*="is-style-spielerei-"],
.wp-block-cover[class*="mup-eff-"],
.wp-block-cover[class*="is-style-spielerei-"] {
  padding: 0 !important;
  width: 100%;
  max-width: 100%;
  display: block !important;
  /* Margin-auto-Override aus dem Center-Fix neutralisieren — bei Bildern
     kümmert sich Gutenberg/Theme um Zentrierung. */
  margin-left: revert !important;
  margin-right: revert !important;
}
figure.wp-block-image[class*="mup-eff-"] img,
figure.wp-block-image[class*="is-style-spielerei-"] img {
  width: 100%;
  height: auto;
  display: block;
}

/* ═══════════════════════════════════════════════════════════════
   12. RANDOM-SHIMMER — auf einem Container (Grid/Übersicht)
   ─────────────────────────────────────────────────────────────────
   Anwendung: Klasse `mup-eff-random-shimmer` auf einem Container
   (z.B. wp:columns, wp:gallery oder die Ensemble-Karten-Grid).
   JS pickt nacheinander zufällige Kind-Bilder aus und lässt sie
   kurz „aufleuchten". Frequenz/Farbe steuerbar über CSS-Vars.
   ═══════════════════════════════════════════════════════════════ */
@keyframes mup-rand-pulse-anim {
  0%   { box-shadow: 0 0 0 0 transparent;
         filter: brightness(1); }
  35%  { box-shadow: 0 0 calc(48px * var(--sp-intensity, 1))
                          calc(6px  * var(--sp-intensity, 1))
                          var(--sp-color-strong, rgba(201, 168, 76, 0.9));
         filter: brightness(calc(1 + 0.15 * var(--sp-intensity, 1))); }
  100% { box-shadow: 0 0 0 0 transparent;
         filter: brightness(1); }
}
.mup-rand-pulse {
  animation: mup-rand-pulse-anim 1.8s cubic-bezier(0.4, 0, 0.6, 1);
  border-radius: 4px;
  z-index: 5;
  position: relative;
}
/* Sichtbares Signal nur, dass der Container aktiv ist — keine eigene Optik */
.mup-eff-random-shimmer { position: relative; isolation: isolate; }

/* ═══════════════════════════════════════════════════════════════
   13. HOVER-TRIGGER — Effekte erst bei Mausover starten
   ─────────────────────────────────────────────────────────────────
   Anwendung: Klasse `mup-trigger-hover` zusätzlich zu einer beliebigen
   Effekt-Klasse (`mup-eff-glow`, `mup-eff-shimmer`, `mup-eff-sparkle`,
   `mup-eff-spotlight`, `mup-eff-vintage`, `mup-eff-cinemascope`).
   Effekt-Animation läuft NICHT automatisch, erst wenn Maus drüber.
   Mehrere Effekte gleichzeitig sind möglich — alle warten auf Hover.
   ═══════════════════════════════════════════════════════════════ */

/* Glow: Box-Shadow-Pulse pausiert, läuft bei :hover */
.mup-trigger-hover.mup-eff-glow,
.mup-trigger-hover.mup-eff-glow * {
  animation-play-state: paused !important;
}
.mup-trigger-hover.mup-eff-glow {
  box-shadow: none !important;
  text-shadow: none !important;
}
.mup-trigger-hover.mup-eff-glow:hover {
  animation-play-state: running !important;
}
/* Text-Glow im Hover-Modus: Text-Shadow erst bei :hover */
h1.mup-trigger-hover.mup-eff-glow:hover, h2.mup-trigger-hover.mup-eff-glow:hover,
h3.mup-trigger-hover.mup-eff-glow:hover, h4.mup-trigger-hover.mup-eff-glow:hover,
h5.mup-trigger-hover.mup-eff-glow:hover, h6.mup-trigger-hover.mup-eff-glow:hover,
p.mup-trigger-hover.mup-eff-glow:hover, blockquote.mup-trigger-hover.mup-eff-glow:hover,
figure.mup-trigger-hover.mup-eff-glow:hover {
  text-shadow:
    0 0 calc( 8px * var(--sp-intensity, 1)) var(--sp-color),
    0 0 calc(16px * var(--sp-intensity, 1)) var(--sp-color),
    0 0 calc(24px * var(--sp-intensity, 1)) var(--sp-color-strong) !important;
  animation: sp-pulse calc(4s * var(--sp-speed, 1)) ease-in-out infinite !important;
}

/* Shimmer: Sweep-Streifen versteckt, läuft bei :hover einmal */
.mup-trigger-hover.mup-eff-shimmer::before {
  opacity: 0 !important;
  animation: none !important;
}
.mup-trigger-hover.mup-eff-shimmer:hover::before {
  animation: sp-shimmer-sweep calc(2s * var(--sp-speed, 1)) ease-out forwards !important;
  opacity: 1 !important;
}

/* Sparkle: Drift pausiert, läuft bei :hover */
.mup-trigger-hover.mup-eff-sparkle::after {
  animation-play-state: paused !important;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.mup-trigger-hover.mup-eff-sparkle:hover::after {
  animation-play-state: running !important;
  opacity: 1;
}

/* Spotlight: Vignette + Atmen pausiert, läuft bei :hover */
.mup-trigger-hover.mup-eff-spotlight::before,
.mup-trigger-hover.mup-eff-spotlight::after {
  animation-play-state: paused !important;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.mup-trigger-hover.mup-eff-spotlight:hover::before,
.mup-trigger-hover.mup-eff-spotlight:hover::after {
  animation-play-state: running !important;
  opacity: 1;
}

/* Vintage: Grain + Sepia pausiert, erscheint bei :hover */
.mup-trigger-hover.mup-eff-vintage {
  filter: none !important;
  transition: filter 0.4s ease;
}
.mup-trigger-hover.mup-eff-vintage::before,
.mup-trigger-hover.mup-eff-vintage::after {
  opacity: 0 !important;
  transition: opacity 0.4s ease;
}
.mup-trigger-hover.mup-eff-vintage:hover {
  filter: sepia(calc(0.45 * var(--sp-intensity, 1))) contrast(1.05) brightness(0.95) saturate(0.9) !important;
}
.mup-trigger-hover.mup-eff-vintage:hover::before {
  opacity: calc(0.25 * var(--sp-intensity, 1)) !important;
  animation-play-state: running !important;
}
.mup-trigger-hover.mup-eff-vintage:hover::after {
  opacity: 1 !important;
}

/* Cinemascope: Letterbox-Balken eingeklappt, klappen aus bei :hover */
.mup-trigger-hover.mup-eff-cinemascope::before,
.mup-trigger-hover.mup-eff-cinemascope::after {
  transform: scaleY(0) !important;
  animation: none !important;
  transition: transform calc(0.6s * var(--sp-speed, 1)) cubic-bezier(0.22, 1, 0.36, 1);
}
.mup-trigger-hover.mup-eff-cinemascope:hover::before,
.mup-trigger-hover.mup-eff-cinemascope:hover::after {
  transform: scaleY(1) !important;
}
.mup-trigger-hover.mup-eff-cinemascope {
  filter: none;
  transition: filter 0.4s ease;
}
.mup-trigger-hover.mup-eff-cinemascope:hover {
  filter: contrast(1.08) saturate(0.85) brightness(0.97);
}

/* Reduce-Motion: Hover-Trigger respektieren */
@media (prefers-reduced-motion: reduce) {
  .mup-trigger-hover[class*="mup-eff-"]:hover,
  .mup-trigger-hover[class*="mup-eff-"]:hover::before,
  .mup-trigger-hover[class*="mup-eff-"]:hover::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   v2.4.10 — H1-Center NUCLEAR-FIX (Final, Frontend-bulletproof)
   ─────────────────────────────────────────────────────────────────
   Problem v2.4.9: `:where(:root)`-Hard-Fix griff im Editor, aber
   nicht im Frontend bei:
     • Headings im Cover-Block (Kadence-Wrapper-Specifity)
     • Headings mit inline-style="text-align: center" (ohne Klasse)
     • Headings, wo Theme-CSS `.wp-block-cover h1 { margin-left:0 }`
       die Effekt-Regel überschreibt
   Lösung: Mehrfach-Selektoren mit höchstmöglicher Spezifität via
   `html body`-Prefix + alle drei Center-Indikatoren abgedeckt.
   ═══════════════════════════════════════════════════════════════ */

/* (A) Standard-Effekte (sparkle/glow/shimmer/…) — width: fit-content + margin auto */
html body :is(h1,h2,h3,h4,h5,h6,p,blockquote).has-text-align-center[class*="mup-eff-"],
html body :is(h1,h2,h3,h4,h5,h6,p,blockquote).has-text-align-center[class*="is-style-spielerei-"],
html body :is(h1,h2,h3,h4,h5,h6,p,blockquote)[class*="mup-eff-"][style*="text-align:center"],
html body :is(h1,h2,h3,h4,h5,h6,p,blockquote)[class*="mup-eff-"][style*="text-align: center"],
html body :is(h1,h2,h3,h4,h5,h6,p,blockquote)[class*="is-style-spielerei-"][style*="text-align:center"],
html body :is(h1,h2,h3,h4,h5,h6,p,blockquote)[class*="is-style-spielerei-"][style*="text-align: center"] {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

/* ════════════════════════════════════════════════════════════════
   v2.4.11 — KILL fit-content für sparkle/glow/shimmer bei center
   ─────────────────────────────────────────────────────────────────
   Problem: v2.3.8 setzt für sparkle/glow/shimmer `width: fit-content`.
   Bei mehrzeiligen Überschriften = Breite der längsten Zeile.
   Mit margin: auto auto wird der Container zentriert — ABER nur,
   wenn der Parent das zulässt. Bei Cover-Blocks mit eigenem Layout
   bleibt das Element trotzdem links. Lösung: `width: 100%` + `text-align: center`
   zwingt den Heading auf volle Breite, der Inhalt wird per `text-align` zentriert.
   spotlight/cinemascope/vintage haben das schon — sparkle/glow/shimmer fehlte.
   ═══════════════════════════════════════════════════════════════ */
html body :is(h1,h2,h3,h4,h5,h6,p,blockquote).has-text-align-center.mup-eff-sparkle,
html body :is(h1,h2,h3,h4,h5,h6,p,blockquote).has-text-align-center.mup-eff-glow,
html body :is(h1,h2,h3,h4,h5,h6,p,blockquote).has-text-align-center.mup-eff-shimmer,
html body :is(h1,h2,h3,h4,h5,h6,p,blockquote).has-text-align-center.is-style-spielerei-sparkle,
html body :is(h1,h2,h3,h4,h5,h6,p,blockquote).has-text-align-center.is-style-spielerei-glow,
html body :is(h1,h2,h3,h4,h5,h6,p,blockquote).has-text-align-center.is-style-spielerei-shimmer,
html body :is(h1,h2,h3,h4,h5,h6,p,blockquote)[class*="mup-eff-sparkle"][style*="text-align:center"],
html body :is(h1,h2,h3,h4,h5,h6,p,blockquote)[class*="mup-eff-sparkle"][style*="text-align: center"],
html body :is(h1,h2,h3,h4,h5,h6,p,blockquote)[class*="mup-eff-glow"][style*="text-align:center"],
html body :is(h1,h2,h3,h4,h5,h6,p,blockquote)[class*="mup-eff-glow"][style*="text-align: center"],
html body :is(h1,h2,h3,h4,h5,h6,p,blockquote)[class*="mup-eff-shimmer"][style*="text-align:center"],
html body :is(h1,h2,h3,h4,h5,h6,p,blockquote)[class*="mup-eff-shimmer"][style*="text-align: center"] {
  width: 100% !important;
  max-width: 100% !important;
  text-align: center !important;
  /* margin 0 statt auto, weil width:100% schon den ganzen Container füllt */
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ════════════════════════════════════════════════════════════════
   v2.4.12 — Kadence-Heading-Center FINAL
   ─────────────────────────────────────────────────────────────────
   Problem: Kadence Advanced Heading (.wp-block-kadence-advancedheading)
   setzt `text-align: center` über die BLOCK-eigene Klasse
   (.kt-adv-heading...), NICHT über `has-text-align-center` oder inline.
   v2.4.11 hat das nicht erfasst → Heading blieb fit-content + links.
   Lösung: width-Beschränkung für sparkle/glow/shimmer GANZ aufheben —
   egal ob center oder links. Heading wird normales Block-Element und
   erbt text-align vom Block-CSS bzw. Parent. Effekte (text-shadow,
   ::before-Sweep, ::after-Sparkle) funktionieren bei voller Breite.
   ═══════════════════════════════════════════════════════════════ */
html body :is(h1,h2,h3,h4,h5,h6,p,blockquote)[class*="mup-eff-sparkle"],
html body :is(h1,h2,h3,h4,h5,h6,p,blockquote)[class*="mup-eff-glow"],
html body :is(h1,h2,h3,h4,h5,h6,p,blockquote)[class*="mup-eff-shimmer"],
html body :is(h1,h2,h3,h4,h5,h6,p,blockquote)[class*="is-style-spielerei-sparkle"],
html body :is(h1,h2,h3,h4,h5,h6,p,blockquote)[class*="is-style-spielerei-glow"],
html body :is(h1,h2,h3,h4,h5,h6,p,blockquote)[class*="is-style-spielerei-shimmer"] {
  width: auto !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  /* text-align NICHT erzwingen — Block-CSS / Parent / has-text-align-* gewinnt */
}

/* (B) Spotlight / Cinemascope / Vintage — width:100%, center via text-align */
html body :is(h1,h2,h3,h4,h5,h6,p).has-text-align-center.mup-eff-spotlight,
html body :is(h1,h2,h3,h4,h5,h6,p).has-text-align-center.mup-eff-cinemascope,
html body :is(h1,h2,h3,h4,h5,h6,p).has-text-align-center.mup-eff-vintage,
html body :is(h1,h2,h3,h4,h5,h6,p).has-text-align-center.is-style-spielerei-spotlight,
html body :is(h1,h2,h3,h4,h5,h6,p).has-text-align-center.is-style-spielerei-cinemascope,
html body :is(h1,h2,h3,h4,h5,h6,p).has-text-align-center.is-style-spielerei-vintage {
  width: 100% !important;
  text-align: center !important;
}

/* (C) Cover-Block-Headings — Kadence wrapt anders, eigene Specificity-Stufe */
html body .wp-block-cover :is(h1,h2,h3,h4,h5,h6,p)[class*="mup-eff-"].has-text-align-center,
html body .wp-block-cover :is(h1,h2,h3,h4,h5,h6,p)[class*="is-style-spielerei-"].has-text-align-center,
html body .wp-block-cover__inner-container :is(h1,h2,h3,h4,h5,h6,p)[class*="mup-eff-"].has-text-align-center,
html body .wp-block-cover__inner-container :is(h1,h2,h3,h4,h5,h6,p)[class*="is-style-spielerei-"].has-text-align-center,
html body .wp-block-cover :is(h1,h2,h3,h4,h5,h6,p)[class*="mup-eff-"][style*="text-align"],
html body .wp-block-cover__inner-container :is(h1,h2,h3,h4,h5,h6,p)[class*="mup-eff-"][style*="text-align"] {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
  left: auto !important;
  right: auto !important;
}

/* (D) Genereller Schutz: wenn Parent (Group/Column) center setzt,
       darf das Effekt-Heading nicht nach links rutschen. */
html body :is(.has-text-align-center, [style*="text-align:center"], [style*="text-align: center"]) > :is(h1,h2,h3,h4,h5,h6,p,blockquote)[class*="mup-eff-"],
html body :is(.has-text-align-center, [style*="text-align:center"], [style*="text-align: center"]) > :is(h1,h2,h3,h4,h5,h6,p,blockquote)[class*="is-style-spielerei-"] {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

/* ════════════════════════════════════════════════════════════════
   v2.4.9 — BOKEH-HOVER-EFFEKT
   ─────────────────────────────────────────────────────────────────
   Container mit Klasse `mup-eff-bokeh-hover` (auf wp:columns,
   wp:gallery, Kadence Advanced Gallery, oder einem Group).
   Default: alle Bilder scharf. Mouseover: alle Kinder werden
   weichgezeichnet, nur das gehoverte bleibt scharf — wie eine
   echte Tiefenschärfe.
   Mobile/Touch: kein Hover-State → bleibt alles scharf.

   v2.4.15 — Selektoren erweitert für Kadence Advanced Gallery
   (.kb-gallery-ul li, .kb-gallery-figure) sowie wp:gallery
   nested figures, Splide-Slides, gm-actor-card.
   ═══════════════════════════════════════════════════════════════ */
.mup-eff-bokeh-hover {
  --bokeh-blur: 6px;
  --bokeh-dim:  0.55;
}
@media (hover: hover) {
  .mup-eff-bokeh-hover figure.wp-block-image,
  .mup-eff-bokeh-hover .wp-block-gallery figure.wp-block-image,
  .mup-eff-bokeh-hover .wp-block-cover,
  .mup-eff-bokeh-hover .wp-block-column,
  .mup-eff-bokeh-hover .zzr-actor-card,
  .mup-eff-bokeh-hover .gm-actor-card,
  .mup-eff-bokeh-hover .kb-gallery-ul > li,
  .mup-eff-bokeh-hover .kb-gallery-figure,
  .mup-eff-bokeh-hover .kb-gallery-item,
  .mup-eff-bokeh-hover .splide__slide,
  .mup-eff-bokeh-hover.wp-block-gallery > figure.wp-block-image,
  .mup-eff-bokeh-hover.kb-gallery-ul > li,
  .mup-eff-bokeh-hover.wp-block-columns > .wp-block-column {
    transition: filter 0.45s ease, opacity 0.45s ease;
  }
  .mup-eff-bokeh-hover:hover figure.wp-block-image,
  .mup-eff-bokeh-hover:hover .wp-block-gallery figure.wp-block-image,
  .mup-eff-bokeh-hover:hover .wp-block-cover,
  .mup-eff-bokeh-hover:hover .wp-block-column,
  .mup-eff-bokeh-hover:hover .zzr-actor-card,
  .mup-eff-bokeh-hover:hover .gm-actor-card,
  .mup-eff-bokeh-hover:hover .kb-gallery-ul > li,
  .mup-eff-bokeh-hover:hover .kb-gallery-figure,
  .mup-eff-bokeh-hover:hover .kb-gallery-item,
  .mup-eff-bokeh-hover:hover .splide__slide,
  .mup-eff-bokeh-hover.wp-block-gallery:hover > figure.wp-block-image,
  .mup-eff-bokeh-hover.kb-gallery-ul:hover > li,
  .mup-eff-bokeh-hover.wp-block-columns:hover > .wp-block-column {
    filter: blur(var(--bokeh-blur)) saturate(0.7);
    opacity: var(--bokeh-dim);
  }
  .mup-eff-bokeh-hover figure.wp-block-image:hover,
  .mup-eff-bokeh-hover .wp-block-gallery figure.wp-block-image:hover,
  .mup-eff-bokeh-hover .wp-block-cover:hover,
  .mup-eff-bokeh-hover .wp-block-column:hover,
  .mup-eff-bokeh-hover .zzr-actor-card:hover,
  .mup-eff-bokeh-hover .gm-actor-card:hover,
  .mup-eff-bokeh-hover .kb-gallery-ul > li:hover,
  .mup-eff-bokeh-hover .kb-gallery-figure:hover,
  .mup-eff-bokeh-hover .kb-gallery-item:hover,
  .mup-eff-bokeh-hover .splide__slide:hover,
  .mup-eff-bokeh-hover.wp-block-gallery > figure.wp-block-image:hover,
  .mup-eff-bokeh-hover.kb-gallery-ul > li:hover,
  .mup-eff-bokeh-hover.wp-block-columns > .wp-block-column:hover {
    filter: none !important;
    opacity: 1 !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mup-eff-bokeh-hover *,
  .mup-eff-bokeh-hover:hover * {
    transition: none !important;
    filter: none !important;
    opacity: 1 !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   v2.4.18 — GALLERY-LIGHTBOX (mup-gallery-lightbox)
   ─────────────────────────────────────────────────────────────────
   Universelles Lightbox-Overlay, das auf Kadence Advanced Gallery,
   Core wp:gallery und einzelne wp:image-Blöcke greift. Pfeile,
   Esc-Schließen, Touch-Swipe, Caption + Counter unten.
   Klassen-Trigger: .mup-gallery-lightbox auf den Galerie-Block.
   ═══════════════════════════════════════════════════════════════ */
.mup-gallery-lightbox img { cursor: zoom-in; }

.mup-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(14, 11, 8, 0.95);
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.mup-lightbox.is-open { display: flex; animation: mup-lb-fade 0.25s ease; }
@keyframes mup-lb-fade { from { opacity: 0; } to { opacity: 1; } }

.mup-lb-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 92vw;
  max-height: 82vh;
}
.mup-lb-stage img {
  max-width: 92vw;
  max-height: 82vh;
  object-fit: contain;
  display: block;
  cursor: default;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.6);
  border-radius: 2px;
}

.mup-lb-caption {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  color: #f8f2e6;
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-size: 1.05rem;
  text-align: center;
  max-width: 80vw;
  pointer-events: none;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}
.mup-lb-counter {
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  color: rgba(248,242,230,0.7);
  font-family: 'Jost', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  pointer-events: none;
}

.mup-lb-close, .mup-lb-prev, .mup-lb-next {
  position: absolute;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  color: #f8f2e6;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  line-height: 1;
  padding: 0;
  transition: background 0.25s, transform 0.25s;
  font-family: 'Jost', sans-serif;
}
.mup-lb-close { top: 1.5rem; right: 1.5rem; font-size: 1.7rem; }
.mup-lb-prev  { left: 1.5rem; top: 50%; transform: translateY(-50%); }
.mup-lb-next  { right: 1.5rem; top: 50%; transform: translateY(-50%); }
.mup-lb-close:hover { background: rgba(255,255,255,0.18); transform: scale(1.08); }
.mup-lb-prev:hover  { background: rgba(255,255,255,0.18); transform: translateY(-50%) translateX(-4px); }
.mup-lb-next:hover  { background: rgba(255,255,255,0.18); transform: translateY(-50%) translateX(4px); }

@media (max-width: 640px) {
  .mup-lb-close, .mup-lb-prev, .mup-lb-next { width: 40px; height: 40px; font-size: 1.4rem; }
  .mup-lb-close { top: 1rem; right: 1rem; }
  .mup-lb-prev  { left: 0.75rem; }
  .mup-lb-next  { right: 0.75rem; }
  .mup-lb-caption { font-size: 0.92rem; bottom: 4rem; }
  .mup-lb-counter { top: 1rem; left: 1rem; }
}