/* ════════════════════════════════════════════════════════════════
   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;
  }
}