/* Numka-Tiere: Animationen fuer die SVG-Tiere aus tiere/svg/.
   Gilt nur fuer inline eingesetzte SVGs (NumkaTiere.zeigen). Als <img> bleiben sie still.
   Ruhe-Animationen laufen von selbst; die Antipp-Aktion startet mit der Klasse t-los am <svg>
   (setzt NumkaTiere.aktion). t-ruhig am <svg> schaltet alle Bewegung ab. */

.tier{display:block;width:100%;height:100%;overflow:visible}
/* Drehpunkt nur dort, wo das Bild ihn angibt (--o). Wichtig: Teile mit eigener transform-Angabe
   (z.B. das schraeg gestellte Feuer) muessen den Standard-Ursprung 0 0 behalten, sonst verrutschen sie. */
.tier [style*="--o"]{transform-box:view-box;transform-origin:var(--o)}
.tier .t-schall,.tier .t-funke{transform-box:fill-box;transform-origin:center}
.tier .t-aktion,.tier .t-normal{transition:opacity .18s ease}

/* ---------- Ruhe ---------- */
.tier .t-augen{transform-box:fill-box;transform-origin:center;animation:t-blinzeln 4.6s infinite}
.tier-stufe-2 .t-augen{animation-delay:.9s}.tier-stufe-3 .t-augen{animation-delay:1.8s}.tier-stufe-4 .t-augen{animation-delay:2.6s}
.tier .t-fluegel{transform-box:fill-box;transform-origin:var(--o,0% 72%);animation:t-flattern 1.8s ease-in-out infinite}
.tier .t-schwanz{animation:t-schwanz 2.8s ease-in-out infinite}
.tier .t-wedeln{animation:t-wedeln 1.5s ease-in-out infinite}
.tier .t-ohr{animation:t-ohr 6s ease-in-out infinite}
.tier .t-funkeln{transform-box:fill-box;transform-origin:center;animation:t-funkeln 1.9s ease-in-out infinite}
.tier .t-glut{animation:t-glut 2.8s ease-in-out infinite}
.tier .t-schweben{animation:t-schweben 3.2s ease-in-out infinite}
.tier .t-blasen{animation:t-blasen 3.6s ease-in infinite;animation-delay:var(--v,0s)}
.tier .t-tentakel{animation:t-tentakel 3.2s ease-in-out infinite;animation-delay:var(--v,0s)}
.tier .t-maehne{animation:t-maehne 3.6s ease-in-out infinite}
.tier .t-schaukeln{animation:t-schaukeln 2.8s ease-in-out infinite}
.tier .t-glibber{animation:t-glibber 2.2s ease-in-out infinite}
.tier .t-pulsieren{animation:t-pulsieren 1.8s ease-in-out infinite}
.tier .t-ufo{animation:t-ufo 3s ease-in-out infinite}
.tier .t-ufolicht{animation:t-ufolicht 1s steps(2) infinite;animation-delay:var(--v,0s)}
.tier .t-winken{animation:t-winken 2.4s ease-in-out infinite}
.tier .t-flosse{animation:t-flosse 2.2s ease-in-out infinite}
.tier .t-hornlicht{transform-box:fill-box;transform-origin:center;animation:t-glut 2.4s ease-in-out infinite}

.tier .t-maus{animation:t-maus 12s linear infinite}
@keyframes t-maus{0%,64%{opacity:0;transform:translateX(30px)}66%{opacity:1;transform:translateX(20px)}84%{opacity:1;transform:translateX(-200px)}86%,100%{opacity:0;transform:translateX(-210px)}}
@keyframes t-blinzeln{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.08)}}
@keyframes t-flattern{0%,100%{transform:rotate(0)}50%{transform:rotate(-9deg)}}
@keyframes t-schwanz{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(5deg)}}
@keyframes t-wedeln{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(9deg)}}
@keyframes t-ohr{0%,86%,100%{transform:rotate(0)}90%{transform:rotate(-9deg)}94%{transform:rotate(5deg)}}
@keyframes t-funkeln{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.45);opacity:.45}}
@keyframes t-glut{0%,100%{opacity:.75}50%{opacity:1}}
@keyframes t-schweben{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes t-blasen{0%{transform:translateY(0);opacity:0}15%{opacity:1}100%{transform:translateY(-26px);opacity:0}}
@keyframes t-tentakel{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(4deg)}}
@keyframes t-maehne{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
@keyframes t-schaukeln{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
@keyframes t-glibber{0%,100%{transform:scale(1,1)}40%{transform:scale(1.05,.95)}70%{transform:scale(.97,1.03)}}
@keyframes t-pulsieren{0%,100%{transform:scale(.92);opacity:.55}50%{transform:scale(1.06);opacity:1}}
@keyframes t-ufo{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-4px) rotate(-3deg)}}
@keyframes t-ufolicht{0%{opacity:1}100%{opacity:.25}}
@keyframes t-winken{0%,100%{transform:rotate(0)}50%{transform:rotate(-14deg)}}
@keyframes t-flosse{0%,100%{transform:rotate(0)}50%{transform:rotate(8deg)}}

/* ---------- Details der Stufen (Kind, Teenager, Legende) ----------
   t-auftritt: kommt ab und zu vorbei. Im Bild ist es ausgeblendet, die Animation blendet es ein.
   Was von aussen hereinfliegt (Maus, Frisbee, Fischschwarm), ist im Bild auf den Rahmen beschnitten. */
.tier .t-rauch,.tier .t-noten{transform-box:fill-box;transform-origin:center}
.tier .t-rauch{animation:t-rauch 6s ease-out infinite;animation-delay:var(--v,0s)}
.tier .t-fuenkchen{animation:t-fuenkchen 7s ease-in-out infinite}
.tier .t-knaeuel{animation:t-rollen 3s ease-in-out infinite}
.tier .t-falter{animation:t-falter 6s ease-in-out infinite}
.tier .t-falterfluegel{animation:t-falterschlag .3s ease-in-out infinite alternate}
.tier .t-ball{animation:t-huepfen 3.6s ease-in-out infinite}
.tier .t-frisbee{animation:t-frisbee 9s linear infinite}
.tier .t-frisbeebogen{transform-box:fill-box;transform-origin:center;animation:t-frisbeebogen 9s ease-in-out infinite}
.tier .t-blick{animation:t-blick 9s ease-in-out infinite}
.tier .t-nachschauen{animation:t-nachschauen 9s ease-in-out infinite}
.tier .t-gluehwurm{animation:t-gluehwurm 6s ease-in-out infinite}
.tier .t-mond{transform-box:fill-box;transform-origin:center;animation:t-schaukeln 7s ease-in-out infinite}
.tier .t-sternschnuppe{animation:t-sternschnuppe 8s ease-in infinite}
.tier .t-fischfreund{animation:t-fischfreund 9s ease-in-out infinite}
.tier .t-muscheldeckel{animation:t-muschel 6s ease-in-out infinite}
.tier .t-schwarm{animation:t-schwarm 11s linear infinite}
.tier .t-kokos,.tier .t-wackelei{animation:t-wackeln 3.4s ease-in-out infinite;animation-delay:var(--v,0s)}
.tier .t-glocke{animation:t-glocke 2.6s ease-in-out infinite}
.tier .t-noten{animation:t-noten 5s ease-out infinite;animation-delay:var(--v,0s)}
.tier .t-seestern{animation:t-schaukeln 4s ease-in-out infinite}
.tier .t-stift{animation:t-schreiben 1.4s ease-in-out infinite}
.tier .t-jonglieren{animation:t-jonglieren 2.4s linear infinite;animation-delay:var(--v,0s)}
.tier .t-kaugummi{animation:t-kaugummi 7s ease-in-out infinite}
.tier .t-rakete{animation:t-rakete 5s ease-in-out infinite}
.tier .t-flamme{animation:t-flamme .22s ease-in-out infinite alternate}
.tier .t-phaserstrahl{animation:t-phaser 5s ease-out infinite;animation-delay:var(--v,0s)}
.tier .t-farn{animation:t-schaukeln 3.6s ease-in-out infinite}
.tier .t-skatefahrt{animation:t-skatefahrt 9s ease-in-out infinite}
.tier .t-strum{animation:t-strum 6s ease-in-out infinite}
.tier .t-rocknote{transform-box:fill-box;transform-origin:center;animation:t-rocknote 6s ease-out infinite;animation-delay:var(--v,0s)}
.tier .t-herzchen{transform-box:fill-box;transform-origin:center;animation:t-herzchen 6s ease-out infinite;animation-delay:var(--v,0s)}
.tier .t-taenzeln{animation:t-taenzeln 5s ease-in-out infinite}

@keyframes t-rauch{0%{opacity:0;transform:translate(0,0) scale(.5)}8%{opacity:.9}40%,100%{opacity:0;transform:translate(var(--dx,3px),var(--dy,-20px)) scale(1.6)}}
@keyframes t-fuenkchen{0%,72%{opacity:0;transform:scale(.3)}76%{opacity:1;transform:scale(1)}84%{opacity:1;transform:scale(1.08)}90%,100%{opacity:0;transform:scale(.5)}}
@keyframes t-rollen{0%,100%{transform:translateX(-3px) rotate(-30deg)}50%{transform:translateX(3px) rotate(30deg)}}
@keyframes t-falter{0%,100%{transform:translate(0,0) rotate(0)}25%{transform:translate(-9px,-7px) rotate(-10deg)}50%{transform:translate(-3px,-14px) rotate(4deg)}75%{transform:translate(7px,-6px) rotate(10deg)}}
@keyframes t-falterschlag{0%{transform:scaleX(1)}100%{transform:scaleX(.3)}}
@keyframes t-huepfen{0%,50%,100%{transform:translateY(0)}12%{transform:translateY(-16px)}25%{transform:translateY(0)}33%{transform:translateY(-6px)}41%{transform:translateY(0)}}
@keyframes t-frisbee{0%,66%{opacity:0;transform:translateX(26px)}68%,92%{opacity:1}94%,100%{opacity:0;transform:translateX(-204px)}}
@keyframes t-frisbeebogen{0%,66%{transform:translateY(10px) rotate(-8deg)}80%{transform:translateY(-12px) rotate(4deg)}94%,100%{transform:translateY(6px) rotate(-6deg)}}
@keyframes t-blick{0%,63%,100%{transform:translate(0,0)}69%{transform:translate(2.8px,-2.2px)}80%{transform:translate(0,-3px)}91%{transform:translate(-2.8px,-1.8px)}97%{transform:translate(0,0)}}
@keyframes t-nachschauen{0%,63%,100%{transform:rotate(0)}69%{transform:rotate(5deg)}80%{transform:rotate(0)}91%{transform:rotate(-5deg)}97%{transform:rotate(0)}}
@keyframes t-gluehwurm{0%,100%{transform:translate(0,0)}20%{transform:translate(-10px,-8px)}40%{transform:translate(-4px,-18px)}60%{transform:translate(9px,-13px)}80%{transform:translate(7px,-2px)}}
@keyframes t-sternschnuppe{0%,78%{opacity:0;transform:translate(30px,-14px)}81%{opacity:1}93%{opacity:1;transform:translate(-2px,1px)}96%,100%{opacity:0;transform:translate(-5px,2.5px)}}
@keyframes t-fischfreund{0%{transform:translate(0,0) scaleX(1)}45%{transform:translate(-86px,-6px) scaleX(1)}50%{transform:translate(-86px,-6px) scaleX(-1)}95%{transform:translate(0,0) scaleX(-1)}100%{transform:translate(0,0) scaleX(1)}}
@keyframes t-muschel{0%,55%,100%{transform:rotate(0)}64%,84%{transform:rotate(-34deg)}}
@keyframes t-schwarm{0%,60%{opacity:0;transform:translateX(0)}62%{opacity:1}96%{opacity:1;transform:translateX(-250px)}98%,100%{opacity:0;transform:translateX(-260px)}}
@keyframes t-wackeln{0%,58%,100%{transform:rotate(0)}66%{transform:rotate(-9deg)}74%{transform:rotate(7deg)}82%{transform:rotate(-4deg)}90%{transform:rotate(0)}}
@keyframes t-glocke{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(9deg)}}
@keyframes t-noten{0%{opacity:0;transform:translate(0,0)}10%{opacity:1}50%,100%{opacity:0;transform:translate(9px,-24px)}}
@keyframes t-schreiben{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(4deg) translateX(2px)}}
@keyframes t-jonglieren{0%,100%{transform:translate(0,0)}10%{transform:translate(3.7px,-11px)}20%{transform:translate(7.3px,-17.7px)}30%{transform:translate(11px,-20px)}40%{transform:translate(14.7px,-17.7px)}50%{transform:translate(18.3px,-11px)}60%{transform:translate(22px,0)}70%{transform:translate(16.5px,3.5px)}80%{transform:translate(11px,4.5px)}90%{transform:translate(5.5px,3.5px)}}
@keyframes t-kaugummi{0%,55%{opacity:0;transform:scale(.1)}58%{opacity:1;transform:scale(.3)}80%{opacity:1;transform:scale(1)}83%{opacity:1;transform:scale(1.1)}84%,100%{opacity:0;transform:scale(1.25)}}
@keyframes t-rakete{0%,64%,100%{transform:translateY(0)}74%{transform:translateY(-10px)}82%{transform:translateY(-8px)}92%{transform:translateY(0)}}
@keyframes t-flamme{0%{transform:scaleY(1)}100%{transform:scaleY(.55)}}
@keyframes t-skatefahrt{0%,62%,100%{transform:translateX(0)}71%{transform:translateX(10px)}81%{transform:translateX(-8px)}89%{transform:translateX(3px)}95%{transform:translateX(0)}}
@keyframes t-strum{0%,70%,100%{transform:rotate(0)}74%{transform:rotate(-7deg)}78%{transform:rotate(2deg)}82%{transform:rotate(-7deg)}86%{transform:rotate(2deg)}90%{transform:rotate(0)}}
@keyframes t-rocknote{0%,73%{opacity:0;transform:translate(0,0)}77%{opacity:1}100%{opacity:0;transform:translate(10px,-24px)}}
@keyframes t-herzchen{0%,70%{opacity:0;transform:translate(0,0) scale(.6)}74%{opacity:1;transform:translate(0,-2px) scale(1)}100%{opacity:0;transform:translate(4px,-18px) scale(1.1)}}
@keyframes t-taenzeln{0%,60%,100%{transform:rotate(0)}68%{transform:rotate(-12deg)}76%{transform:rotate(4deg)}84%{transform:rotate(-10deg)}92%{transform:rotate(0)}}
@keyframes t-phaser{0%,70%{opacity:0;transform:translateX(0)}72%{opacity:1}86%,100%{opacity:0;transform:translateX(12px)}}

/* ---------- Antipp-Aktion (Legende) ---------- */
.tier.t-los .t-aktion{opacity:1}
.tier.t-los .t-normal{opacity:0}

/* Drache: Feuer */
.tier-drache.t-los .t-feuer-gruppe{animation:t-feuerzeigen 1.9s ease forwards}
.tier-drache.t-los .t-feuer{transform-box:fill-box;transform-origin:0% 50%;animation:t-ausstoss .3s ease-out,t-flackern .38s .3s ease-in-out infinite alternate}
.tier-drache.t-los .t-kopf{animation:t-kopfhoch 1.9s ease}
@keyframes t-kopfhoch{0%,100%{transform:rotate(0)}12%,80%{transform:rotate(-6deg)}}
@keyframes t-feuerzeigen{0%{opacity:0}10%,80%{opacity:1}100%{opacity:0}}
@keyframes t-ausstoss{0%{transform:scale(.2,.5)}100%{transform:scale(1,1)}}
@keyframes t-flackern{0%{transform:scale(1,1)}100%{transform:scale(1.06,.92)}}
.tier-drache.t-los .t-glutfunke{transform-box:fill-box;transform-origin:center;animation:t-glutfunke .5s ease-in-out infinite alternate}
@keyframes t-glutfunke{0%{opacity:.4;transform:scale(.6)}100%{opacity:1;transform:scale(1.2)}}

/* Katze: eingerollt schnurren */
.tier-katze.t-los .t-schnurr{animation:t-schnurren .12s linear infinite}
.tier-katze.t-los .t-schnurrwelle{animation:t-welle 1s ease-out infinite;animation-delay:var(--v,0s)}
@keyframes t-schnurren{0%,100%{transform:translate(0,0)}50%{transform:translate(.5px,-.4px)}}
@keyframes t-welle{0%{transform:translate(0,0);opacity:0}30%{opacity:.8}100%{transform:translate(6px,-8px);opacity:0}}

/* Hund, Affe, Dino: Schallbogen */
.tier.t-los .t-schall{animation:t-schall .8s ease-out infinite;animation-delay:var(--v,0s)}
@keyframes t-schall{0%{opacity:0;transform:scale(.8)}40%{opacity:.75}100%{opacity:0;transform:scale(1.15)}}

/* Eule: Kopf dreht sich fast ganz herum */
.tier-eule.t-los .t-kopf{animation:t-kopfneigen 2.4s ease-in-out}
.tier-eule.t-los .t-gesicht,.tier-eule.t-los .t-hinterkopf,.tier-eule.t-los .t-ohrendreh{transform-box:fill-box;transform-origin:center}
.tier-eule.t-los .t-gesicht{animation:t-gesichtdreh 2.4s ease-in-out}
.tier-eule.t-los .t-hinterkopf{animation:t-hinterdreh 2.4s ease-in-out}
.tier-eule.t-los .t-ohrendreh{animation:t-ohrendreh 2.4s ease-in-out}
@keyframes t-kopfneigen{0%,100%{transform:rotate(0)}20%{transform:rotate(-8deg)}40%,60%{transform:rotate(4deg)}80%{transform:rotate(-8deg)}}
@keyframes t-gesichtdreh{0%,100%{transform:translateX(0) scaleX(1);opacity:1}10%,90%{transform:translateX(-22px) scaleX(.7);opacity:1}18%,82%{transform:translateX(-31px) scaleX(.18);opacity:1}20%,80%{transform:translateX(-32px) scaleX(.1);opacity:0}}
@keyframes t-hinterdreh{0%,20%,80%,100%{transform:translateX(32px) scaleX(.1);opacity:0}22%,78%{transform:translateX(31px) scaleX(.18);opacity:1}30%,70%{transform:translateX(22px) scaleX(.7);opacity:1}40%,60%{transform:translateX(0) scaleX(1);opacity:1}}
@keyframes t-ohrendreh{0%,40%,60%,100%{transform:scaleX(1)}20%,80%{transform:scaleX(.3)}}

/* Hai: schnappt vor und zeigt die Zaehne */
.tier-fisch.t-los .t-schweben{animation:t-schnappen .8s ease-in-out 2}
@keyframes t-schnappen{0%,100%{transform:translateX(0) scale(1)}40%{transform:translateX(5px) scale(1.04)}}

/* Gorilla: trommelt */
.tier-affe.t-los .t-trommel{animation:t-trommeln .28s ease-in-out infinite alternate;animation-delay:var(--v,0s)}
@keyframes t-trommeln{0%{transform:translateY(0)}100%{transform:translateY(-7px)}}

/* Krake: Tintenwolke */
.tier-krake.t-los .t-normal-weich{animation:t-verblassen 2.6s ease-in-out}
.tier-krake.t-los .t-tintenball{transform-box:fill-box;transform-origin:center;animation:t-tinte 2.6s ease-out both;animation-delay:var(--v,0s)}
@keyframes t-verblassen{0%,100%{opacity:1}30%,70%{opacity:.3}}
@keyframes t-tinte{0%{transform:scale(.3);opacity:0}25%{transform:scale(1);opacity:.95}70%{opacity:.85}100%{transform:scale(1.25);opacity:0}}

/* Einhorn: Horn leuchtet, Funken spruehen */
.tier-einhorn.t-los .t-hornlicht{animation:t-hornglut .35s ease-in-out infinite alternate}
.tier-einhorn.t-los .t-funke{animation:t-funke 1.4s ease-out both;animation-delay:var(--v,0s)}
@keyframes t-hornglut{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.45);opacity:1}}
@keyframes t-funke{0%{transform:translate(0,0) scale(.3);opacity:0}20%{opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(1.1);opacity:0}}

/* Alien: Teleport */
.tier-alien.t-los .t-figur{animation:t-teleport 2.2s ease-in-out}
.tier-alien.t-los .t-strahl{animation:t-strahl 2.2s ease-in-out}
/* Alien wird im Ufo-Strahl hochgebeamt (zum Ufo oben rechts) und kommt wieder herunter */
@keyframes t-teleport{0%,100%{transform:translate(0,0) scale(1);opacity:1}10%{transform:translate(0,-6px) scale(1);opacity:1}18%{opacity:.8}44%{transform:translate(66px,-134px) scale(.22);opacity:.9}50%,62%{transform:translate(66px,-134px) scale(.2);opacity:0}68%{transform:translate(66px,-134px) scale(.22);opacity:.9}92%{transform:translate(0,-4px) scale(1);opacity:1}}
@keyframes t-strahl{0%,100%{opacity:0}12%,86%{opacity:1}}

/* Dino: Bruellen, der Boden bebt */
.tier-dino.t-los .t-beben{animation:t-beben .09s linear infinite}
.tier-dino.t-los .t-staub{transform-box:fill-box;transform-origin:center;animation:t-staub 1.4s ease-out both;animation-delay:var(--v,0s)}
@keyframes t-beben{0%,100%{transform:translate(0,0)}25%{transform:translate(-1.5px,.8px)}75%{transform:translate(1.5px,-.8px)}}
@keyframes t-staub{0%{transform:scale(.4);opacity:0}30%{opacity:.9}100%{transform:scale(1.3) translateY(-6px);opacity:0}}

/* Monster: Grimasse, das Fell straeubt sich */
.tier-monster.t-los .t-fellauf{transform-box:fill-box;transform-origin:center;animation:t-straeuben .22s ease-in-out infinite alternate}
.tier-monster.t-los .t-fell{animation:t-zittern .1s linear infinite}
@keyframes t-straeuben{0%{transform:scale(1)}100%{transform:scale(1.04)}}
@keyframes t-zittern{0%,100%{transform:translate(0,0)}50%{transform:translate(.8px,-.6px)}}

/* Ruhig: Einstellung "Weniger Bewegung" der App oder des Systems */
.tier.t-ruhig *{animation:none!important}
@media (prefers-reduced-motion:reduce){.tier *{animation:none!important}}