/* Eine Bewegungssprache: kurz, ease-out, unter prefers-reduced-motion aus (siehe reset.css). */
@layer grundlage {
  @keyframes einblenden { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
  @keyframes hochkommen { from { opacity: 0; transform: translateY(1rem); } to { opacity: 1; transform: none; } }
  @keyframes erscheinen-dann-weg { 0%, 100% { opacity: 0; transform: translateY(-.5rem); } 8%, 80% { opacity: 1; transform: none; } }
  @keyframes wackeln { 0%, 100% { transform: translate(0, 0); } 10% { transform: translate(-6px, 3px); } 20% { transform: translate(6px, -3px); } 30% { transform: translate(-5px, -4px); } 40% { transform: translate(5px, 4px); } 50% { transform: translate(-4px, 2px); } 60% { transform: translate(4px, -2px); } 70% { transform: translate(-3px, 3px); } 80% { transform: translate(3px, -3px); } 90% { transform: translate(-2px, 1px); } }
  @keyframes aufbluehen { 0% { transform: scale(.4) rotate(-40deg); opacity: .3; } 55% { transform: scale(1.9) rotate(10deg); filter: drop-shadow(0 0 6px currentColor); } 100% { transform: scale(1) rotate(0); } }
  @keyframes leuchten { 0%, 100% { filter: drop-shadow(0 0 3px var(--achtung)); } 50% { filter: drop-shadow(0 0 7px #fbbf24) drop-shadow(0 0 12px var(--achtung)); } }
  @keyframes blinken { 50% { opacity: .35; } }
  body.wackelt { animation: wackeln .6s ease-in-out; }
}