.moving-mouth {
  position: relative;
  width: 70%;     
  max-width: var(--wp--style--global--wide-size); 
  margin: 2rem auto;
}

.moving-mouth__inner {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
}

.moving-mouth__splash,
.moving-mouth__rays,
.moving-mouth__mouth {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
}

/* Gelbe Fläche etwas nach unten & minimal kleiner */
.moving-mouth__splash {
  transform: translateX(5%) scale(0.85);
}

/* Türkise Strahlen etwas nach oben und etwas größer */
.moving-mouth__rays {
  transform: translate(0, -30%) scale(0.25);
}

/* Mund zentral, leicht nach unten */
.moving-mouth__mouth {
  transform-origin: 50% 60%;
  transform: translateX(10%) scale(0.60);
}

/* Animation (per Klasse zugeschaltet) */
.mouth-wiggle .moving-mouth__mouth {
  animation: mouth-wiggle 600ms ease-in-out 1;
}

@keyframes mouth-wiggle {
  0%   { transform: translateX(10%) scale(0.60) rotate(0deg); }
  20%  { transform: translateX(10%) scale(0.60) rotate(-10deg); }
  50%  { transform: translateX(10%) scale(0.60) rotate(10deg); }
  80%  { transform: translateX(10%) scale(0.60) rotate(-6deg); }
  100% { transform: translateX(10%) scale(0.60) rotate(0deg); }
}
