/* Keyframe-Demo (nur diese Seite) – gleiche Keyframes wie im angezeigten Code */
.kf-stage{ display:flex; align-items:center; justify-content:center; min-height:220px; overflow:hidden; border-radius:12px; background:var(--black-soft); }
.kf-target{ width:140px; height:140px; display:flex; align-items:center; justify-content:center; border-radius:16px; background:var(--red); color:var(--white); font-family:var(--font-display); font-weight:700; }
.kf-buttons{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.kf-buttons .tu-copy[aria-pressed="true"]{ background:var(--red); border-color:var(--red); color:var(--white); }
.kf-type-css{ font-family:monospace, monospace; font-size:1.3em; white-space:nowrap; overflow:hidden; color:var(--white); border-right:3px solid var(--glow); width:36ch; max-width:100%; animation:kfTyping 4s steps(36) infinite alternate, kfCaret .75s step-end infinite; }
@keyframes kfTyping{ from{ width:0 } to{ width:36ch } }
@keyframes kfCaret{ 50%{ border-color:transparent } }
.kf-type-js{ font-family:monospace, monospace; font-size:1.3em; color:var(--white); min-height:1.6em; }
.kf-type-js::after{ content:'|'; color:var(--glow); animation:kfCaret .75s step-end infinite; }
@media (prefers-reduced-motion: reduce){ .kf-type-css{ animation:none; width:auto; } }
.kf-target.fade-in {
  animation: kfFadeIn 1s ease-out both;
}
@keyframes kfFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.kf-target.flip {
  animation: kfFlip 1s ease-in-out both;
}
@keyframes kfFlip {
  from { transform: perspective(400px) rotateY(0); }
  to { transform: perspective(400px) rotateY(360deg); }
}
.kf-target.zoom-in {
  animation: kfZoomIn 0.6s ease-out both;
}
@keyframes kfZoomIn {
  from { opacity: 0; transform: scale(0.3); }
  to { opacity: 1; transform: scale(1); }
}
.kf-target.zoom-out {
  animation: kfZoomOut 0.6s ease-in both;
}
@keyframes kfZoomOut {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(0.3); }
}
.kf-target.shake {
  animation: kfShake 0.6s ease-in-out both;
}
@keyframes kfShake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-10px); }
  40%, 80% { transform: translateX(10px); }
}
.kf-target.pulse {
  animation: kfPulse 1.2s ease-in-out infinite;
}
@keyframes kfPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.1); opacity: 0.7; }
}
.kf-target.spin-infinite {
  animation: kfSpin 1.5s linear infinite;
}
@keyframes kfSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.kf-target.bounce-in {
  animation: kfBounceIn 0.8s cubic-bezier(.2,.8,.3,1.2) both;
}
@keyframes kfBounceIn {
  0% { opacity: 0; transform: scale(0.3); }
  50% { opacity: 1; transform: scale(1.08); }
  70% { transform: scale(0.95); }
  100% { transform: scale(1); }
}
.kf-target.slide-in-left {
  animation: kfSlideInLeft 0.6s ease-out both;
}
@keyframes kfSlideInLeft {
  from { opacity: 0; transform: translateX(-100px); }
  to { opacity: 1; transform: translateX(0); }
}
.kf-target.slide-in-right {
  animation: kfSlideInRight 0.6s ease-out both;
}
@keyframes kfSlideInRight {
  from { opacity: 0; transform: translateX(100px); }
  to { opacity: 1; transform: translateX(0); }
}
.kf-target.slide-in-top {
  animation: kfSlideInTop 0.6s ease-out both;
}
@keyframes kfSlideInTop {
  from { opacity: 0; transform: translateY(-80px); }
  to { opacity: 1; transform: translateY(0); }
}
.kf-target.slide-in-bottom {
  animation: kfSlideInBottom 0.6s ease-out both;
}
@keyframes kfSlideInBottom {
  from { opacity: 0; transform: translateY(80px); }
  to { opacity: 1; transform: translateY(0); }
}
.kf-target.color-change {
  animation: kfColorChange 4s linear infinite;
}
@keyframes kfColorChange {
  0%, 100% { background-color: #4c7300; }
  33% { background-color: #0073aa; }
  66% { background-color: #a83500; }
}
.kf-target.blinking {
  animation: kfBlink 1s step-end infinite;
}
@keyframes kfBlink {
  50% { opacity: 0; }
}
.kf-target.flashing {
  animation: kfFlash 1.5s ease-in-out infinite;
}
@keyframes kfFlash {
  0%, 50%, 100% { opacity: 1; }
  25%, 75% { opacity: 0.1; }
}
.kf-target.flip-vertical {
  animation: kfFlipVertical 1s ease-in-out both;
}
@keyframes kfFlipVertical {
  from { transform: perspective(400px) rotateX(0); }
  to { transform: perspective(400px) rotateX(360deg); }
}
.kf-target.flip-horizontal {
  animation: kfFlipHorizontal 1s ease-in-out both;
}
@keyframes kfFlipHorizontal {
  from { transform: perspective(400px) rotateY(0); }
  to { transform: perspective(400px) rotateY(-360deg); }
}
.kf-target.slide-fade-in {
  animation: kfSlideFadeIn 0.8s ease-out both;
}
@keyframes kfSlideFadeIn {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: translateX(0); }
}
.kf-target.scale-up {
  animation: kfScaleUp 0.4s ease-out both;
}
@keyframes kfScaleUp {
  from { transform: scale(1); }
  to { transform: scale(1.25); }
}
.kf-target.scale-down {
  animation: kfScaleDown 0.4s ease-out both;
}
@keyframes kfScaleDown {
  from { transform: scale(1); }
  to { transform: scale(0.75); }
}
.kf-target.heartbeat {
  animation: kfHeartbeat 1.3s ease-in-out infinite;
}
@keyframes kfHeartbeat {
  0%, 40%, 100% { transform: scale(1); }
  10%, 30% { transform: scale(1.15); }
  20% { transform: scale(1.05); }
}
.kf-target.wiggle {
  animation: kfWiggle 0.8s ease-in-out both;
}
@keyframes kfWiggle {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-8deg) translateX(-4px); }
  40% { transform: rotate(6deg) translateX(4px); }
  60% { transform: rotate(-4deg); }
  80% { transform: rotate(2deg); }
}
.kf-target.zoom-pulse {
  animation: kfZoomPulse 1.6s ease-in-out infinite;
}
@keyframes kfZoomPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); box-shadow: 0 0 0 14px rgba(153,204,0,0.25); }
}