/* ===================================================================================================================================
   Die Eule: animiertes Maskottchen (Markup: templates/eule_figur.html, Klassen setzt static/js/eule.js).
   Alles läuft nur über transform/opacity. Aufbau der Klassen am Element .eule:
     z-…   dauerhafter Zustand      (z-leerlauf, z-schlafen, z-froh, z-nachdenken, z-tipp, z-aufmuntern, z-erstaunt)
     a-…   einmalige Animation       (läuft --d Sekunden, danach nimmt eule.js die Klasse weg; .e-takt meldet das Ende)
     blick-…  Blickrichtung der Pupillen (3×3-Raster)      spricht  Schnabel klappt      pausiert  Seite unsichtbar
   Teile (SVG): .e-hub (Hüpfen) > .e-dreh (Kippen) > .e-atem (Atmen) > Körper, Flügel, .e-kopf > .e-kopfwipp > Gesicht …
   Requisiten (.e-req) sind unsichtbar und erscheinen nur innerhalb ihrer Animation.
   =================================================================================================================================== */

/* ---------- Anordnung ---------- */
.eule-box { display: flex; align-items: flex-end; gap: .6rem; min-width: 0; }
.eule-figur { position: relative; flex: none; width: 110px; cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none; touch-action: manipulation; }
.eule-klein .eule-figur { width: 58px; }
.eule-mittel .eule-figur { width: 110px; }
.eule-gross .eule-figur { width: 170px; }
.e-svg { display: block; width: 100%; height: auto; overflow: visible; }
.eule-rede { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: .45rem; align-self: flex-end; }
.eule-zusatz { display: flex; flex-wrap: wrap; gap: .4rem; }
.eule-box.eule-vertikal { flex-direction: column; align-items: center; gap: .9rem; }
.eule-vertikal .eule-rede { align-items: center; align-self: center; max-width: 36rem; }
.eule-vertikal .eule-blase { text-align: center; }
.eule-mitte { display: flex; justify-content: center; margin: .25rem 0 .9rem; }
.eule-aufgabe { margin-top: .75rem; }
@media (min-width: 576px) { .eule-aufgabe .eule-figur { width: 76px; } }
@media (min-width: 992px) { .eule-aufgabe .eule-figur { width: 88px; } }
.eule-still { flex: none; }
.eule-still .eule-blase { display: none; }
/* Die Eule fängt nur auf ihrer eigenen Fläche Berührungen ab – ihre Requisiten (die über den Rand hinausragen) liegen nie über Eingaben oder Knöpfen */
.e-svg, .e-svg * { pointer-events: none; }

/* ---------- Sprechblase (dunkle Schrift auf heller Fläche) ---------- */
.eule-blase {
  position: relative; flex: 0 1 auto; max-width: 100%; margin-bottom: 0; padding: .45rem .8rem; background: #fff; color: var(--ink);
  border: 3px solid var(--ink); border-radius: 1.1rem; box-shadow: 0 3px 0 var(--ink); font-size: 1.1rem; font-weight: 500; line-height: 1.25; cursor: pointer;
  transform-origin: 0 100%; animation: e-blase-auf .3s cubic-bezier(.2, 1.5, .4, 1);
}
.eule-blase::before {
  content: ""; position: absolute; left: -9px; bottom: 12px; width: 14px; height: 14px; background: #fff; border-left: 3px solid var(--ink); border-bottom: 3px solid var(--ink);
  transform: rotate(45deg);
}
.eule-vertikal .eule-blase::before { left: 50%; bottom: auto; top: -9px; margin-left: -7px; border: 0; border-top: 3px solid var(--ink); border-left: 3px solid var(--ink); }
.eule-vertikal .eule-blase { transform-origin: 50% 0; }
.eule-blase.eule-bewegt { animation: e-blase-auf .3s cubic-bezier(.2, 1.5, .4, 1); }
.eule-blase .eule-antwort { display: block; margin-top: .25rem; font-weight: 600; }
@keyframes e-blase-auf { from { transform: scale(.8); opacity: 0; } }
@media (max-width: 575.98px) { .eule-blase { font-size: 1rem; padding: .4rem .7rem; } }

/* ---------- Grundzustand ---------- */
.eule .e-req { opacity: 0; }
.eule .e-hub, .eule .e-dreh, .eule .e-atem, .eule .e-kopf, .eule .e-kopfwipp, .eule .e-fluegel, .eule .e-ohr, .eule .e-lid, .eule .e-pupille, .eule .e-gesicht,
.eule .e-schnabel-unten, .eule .e-braue, .eule .e-fuss, .eule .e-schatten { transition: transform .35s ease-out, opacity .25s; }
.eule .e-hub { transform-origin: 100px 214px; }
.eule .e-dreh { transform-origin: 100px 208px; }
.eule .e-atem { transform-origin: 100px 208px; }
.eule .e-kopf { transform-origin: 100px 116px; }
.eule .e-kopfwipp { transform-origin: 100px 116px; }
.eule .e-fluegel-l { transform-origin: 60px 122px; }
.eule .e-fluegel-r { transform-origin: 140px 122px; }
.eule .e-ohr-l { transform-origin: 66px 44px; }
.eule .e-ohr-r { transform-origin: 134px 44px; }
.eule .e-lid { transform: scaleY(0); }
.eule .e-lid-l { transform-origin: 74px 62px; }
.eule .e-lid-r { transform-origin: 126px 62px; }
.eule .e-lid-froh, .eule .e-wange, .eule .e-mund { opacity: 0; }
.eule .e-fuss-l { transform-origin: 80px 212px; }
.eule .e-fuss-r { transform-origin: 120px 212px; }
.eule .e-braue-l { transform-origin: 72px 56px; }
.eule .e-braue-r { transform-origin: 128px 56px; }
.eule .e-schatten { transform-origin: 100px 216px; }
.eule .e-gesicht { transform-origin: 100px 84px; }

/* Blickrichtung: 3×3-Raster (o = oben, u = unten, l = links, r = rechts, m = Mitte) */
.eule .e-pupille { transform: translate(0, 0); }
.eule.blick-ol .e-pupille { transform: translate(-6px, -6px); } .eule.blick-o .e-pupille { transform: translate(0, -7px); } .eule.blick-or .e-pupille { transform: translate(6px, -6px); }
.eule.blick-l .e-pupille { transform: translate(-7px, 0); }                                                    .eule.blick-r .e-pupille { transform: translate(7px, 0); }
.eule.blick-ul .e-pupille { transform: translate(-6px, 6px); } .eule.blick-u .e-pupille { transform: translate(0, 7px); } .eule.blick-ur .e-pupille { transform: translate(6px, 6px); }

/* ---------- Leerlauf: Atmen, Blinzeln, Kopfwippen, Ohrenzucken (laufen immer, bis auf Schlaf/ruhig) ---------- */
.eule .e-atem { animation: e-atmen 4.6s ease-in-out infinite; }
.eule .e-lid { animation: e-blinzeln 5.9s infinite; }
.eule .e-kopfwipp { animation: e-wippen 7.3s ease-in-out infinite; }
.eule .e-ohr-l { animation: e-ohrzucken 11s ease-in-out infinite; }
.eule .e-ohr-r { animation: e-ohrzucken 13s ease-in-out infinite 2s; }
.eule .e-schatten { animation: e-schatten-atmen 4.6s ease-in-out infinite; }
@keyframes e-atmen { 50% { transform: scaleY(1.018) scaleX(.994); } }
@keyframes e-schatten-atmen { 50% { transform: scaleX(.98); } }
@keyframes e-blinzeln { 0%, 90%, 100% { transform: scaleY(0); } 93%, 95% { transform: scaleY(1); } }
@keyframes e-wippen { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-1.6deg) translateY(.5px); } 65% { transform: rotate(1.4deg); } }
@keyframes e-ohrzucken { 0%, 92%, 100% { transform: rotate(0); } 94% { transform: rotate(-9deg); } 96% { transform: rotate(4deg); } 98% { transform: rotate(-3deg); } }

/* ---------- Dauerzustände ---------- */
/* Schlafen: Augen zu, Kopf sinkt, Zzz */
.eule.z-schlafen .e-lid { animation: none; transform: scaleY(1); }
.eule.z-schlafen .e-atem { animation-duration: 6s; }
.eule.z-schlafen .e-kopfwipp { animation: none; transform: rotate(5deg) translateY(4px); }
.eule.z-schlafen .e-zzz { opacity: 1; }
.eule.z-schlafen .e-z { animation: e-zzz 3.2s ease-in-out infinite; }
.eule.z-schlafen .e-z2 { animation-delay: .8s; } .eule.z-schlafen .e-z3 { animation-delay: 1.6s; }
@keyframes e-zzz { 0% { transform: translate(0, 10px) scale(.6); opacity: 0; } 25%, 70% { opacity: 1; } 100% { transform: translate(12px, -14px) scale(1); opacity: 0; } }
/* Froh: Augen als lachende Bögen, rote Bäckchen */
.eule.z-froh .e-lid, .eule.z-aufmuntern .e-lid { animation: none; transform: scaleY(1); }
.eule.z-froh .e-lid-zu, .eule.z-aufmuntern .e-lid-zu { opacity: 0; }
.eule.z-froh .e-lid-froh, .eule.z-aufmuntern .e-lid-froh { opacity: 1; }
.eule.z-froh .e-wange, .eule.z-aufmuntern .e-wange { opacity: .75; }
/* Nachdenken: Kopf schief, Blick nach oben links, ein Fragezeichen */
.eule.z-nachdenken .e-kopf { transform: rotate(-9deg) translateY(1px); }
.eule.z-nachdenken .e-braue-l { transform: translateY(-3px) rotate(-6deg); }
.eule.z-nachdenken .e-braue-r { transform: translateY(2px) rotate(-6deg); }
.eule.z-nachdenken .e-pupille { transform: translate(-5px, -6px); }
.eule.z-nachdenken .e-frage { opacity: 1; }
/* Tipp: Glühbirne */
.eule.z-tipp .e-glueh { opacity: 1; }
.eule.z-tipp .e-pupille { transform: translate(0, -7px); }
.eule.z-tipp .e-braue { transform: translateY(-3px); }
/* Aufmuntern: warm, Kopf leicht geneigt, Brauen „liebevoll“ */
.eule.z-aufmuntern .e-kopf { transform: rotate(5deg); }
.eule.z-aufmuntern .e-braue-l { transform: translateY(-2px) rotate(8deg); }
.eule.z-aufmuntern .e-braue-r { transform: translateY(-2px) rotate(-8deg); }
/* Erstaunt: Augen weit, Schnabel ein Stück offen */
.eule.z-erstaunt .e-braue { transform: translateY(-5px); }
.eule.z-erstaunt .e-ausruf { opacity: 1; }
.eule.z-erstaunt .e-schnabel-unten { transform: translateY(4px); }
.eule.z-erstaunt .e-mund { opacity: 1; }

/* Sprechen: der Schnabel klappt auf und zu */
.eule.spricht .e-schnabel-unten { animation: e-sprechen .46s ease-in-out infinite; }
.eule.spricht .e-mund { opacity: 1; }
.eule.spricht .e-kopfwipp { animation: e-sprechwippen .9s ease-in-out infinite; }
@keyframes e-sprechen { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@keyframes e-sprechwippen { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-1.8deg) translateY(1px); } }

/* Pause (Seite nicht sichtbar): alles anhalten */
.eule.pausiert * { animation-play-state: paused !important; }

/* Ruhig: nur Atmen und Blinzeln (zum Beispiel beim Schularbeit-Versuch) */
.eule.ruhig .e-kopfwipp, .eule.ruhig .e-ohr { animation: none; }

/* .e-takt: unsichtbarer Taktgeber – meldet per animationend das Ende einer Animation */
.eule .e-takt { opacity: 0; }
@keyframes e-takt { from { opacity: 0; } to { opacity: 0; } }
@keyframes e-sichtbar { 0% { opacity: 0; } 8%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes e-sichtbar-kurz { 0% { opacity: 0; } 15%, 80% { opacity: 1; } 100% { opacity: 0; } }

/* Jede Animation: --d ist ihre Länge */
.eule.laeuft .e-takt { animation: e-takt var(--d, 3s) linear both; }

/* ===================================================================================================================================
   Gemeinsame Bausteine der Animationen
   =================================================================================================================================== */

/* Augen zu (zusammengekniffen) für Dauer der Animation / Augen als lachende Bögen */
@keyframes e-augen-zu { 0%, 100% { transform: scaleY(0); } 8%, 92% { transform: scaleY(1); } }
@keyframes e-augen-zu-kurz { 0%, 100% { transform: scaleY(0); } 18%, 70% { transform: scaleY(1); } }
@keyframes e-froh-an { 0%, 100% { opacity: 0; } 8%, 92% { opacity: .75; } }
@keyframes e-bogen-zu { 0%, 100% { opacity: 1; } 8%, 92% { opacity: 0; } }
@keyframes e-bogen-froh { 0%, 100% { opacity: 0; } 8%, 92% { opacity: 1; } }

/* ===================================================================================================================================
   Leerlauf-Überraschungen (jede ist eine eigene kleine Szene)
   =================================================================================================================================== */

/* 1. Kopfdreh: das Gesicht wandert um den Kopf herum und kommt von der anderen Seite wieder */
.a-kopfdreh { --d: 3.6s; }
.a-kopfdreh .e-gesicht { animation: e-kopfdreh 3.6s ease-in-out both; }
.a-kopfdreh .e-kopf { animation: e-kopfdreh-kopf 3.6s ease-in-out both; }
.a-kopfdreh .e-ohr { animation: e-ohr-flattern 3.6s ease-in-out both; }
@keyframes e-kopfdreh { 0%, 10% { transform: translateX(0); } 20% { transform: translateX(-6px); } 52% { transform: translateX(135px); } 52.1% { transform: translateX(-135px); } 82% { transform: translateX(10px); } 90% { transform: translateX(-3px); } 100% { transform: translateX(0); } }
@keyframes e-kopfdreh-kopf { 0%, 100% { transform: rotate(0) scaleX(1); } 20% { transform: rotate(-4deg) scaleX(1.02); } 52% { transform: rotate(0) scaleX(.9); } 82% { transform: rotate(3deg) scaleX(1); } 90% { transform: rotate(-1deg); } }
@keyframes e-ohr-flattern { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(12deg); } 70% { transform: rotate(-8deg); } }

/* 2. Niesen: Kopf zurück … Hatschi! … Federn fliegen */
.a-niesen { --d: 3.4s; }
.a-niesen .e-kopf { animation: e-niesen-kopf 3.4s ease-in-out both; }
.a-niesen .e-lid { animation: e-niesen-lider 3.4s both; }
.a-niesen .e-schnabel-unten { animation: e-niesen-schnabel 3.4s both; }
.a-niesen .e-mund { animation: e-niesen-mund 3.4s both; }
.a-niesen .e-dreh { animation: e-niesen-dreh 3.4s both; }
.a-niesen .e-hatschi, .a-niesen .e-feder-gruppe { animation: e-sichtbar-ab 3.4s both; }
.a-niesen .e-feder { animation: e-feder-weg 1.6s 1.25s ease-out both; }
.a-niesen .e-feder1 { --x: -70px; --y: -40px; --r: -260deg; } .a-niesen .e-feder2 { --x: 80px; --y: -50px; --r: 300deg; } .a-niesen .e-feder3 { --x: -40px; --y: 70px; --r: 200deg; }
.a-niesen .e-feder4 { --x: 60px; --y: 60px; --r: -240deg; } .a-niesen .e-feder5 { --x: -90px; --y: 10px; --r: 320deg; } .a-niesen .e-feder6 { --x: 100px; --y: 0px; --r: -300deg; }
@keyframes e-niesen-kopf { 0%, 4% { transform: rotate(0); } 30% { transform: rotate(-9deg) translateY(-4px) scale(1.03); } 36% { transform: rotate(-9deg) translateY(-4px) scale(1.03); } 40% { transform: rotate(12deg) translateY(8px) scale(.97); } 52% { transform: rotate(10deg) translateY(6px); }
  66% { transform: rotate(-4deg); } 72% { transform: rotate(5deg); } 78% { transform: rotate(-3deg); } 86%, 100% { transform: rotate(0); } }
@keyframes e-niesen-dreh { 0%, 36%, 100% { transform: scale(1); } 40% { transform: scale(1.04, .95); } 48% { transform: scale(.99, 1.01); } }
@keyframes e-niesen-lider { 0%, 22% { transform: scaleY(0); } 28%, 60% { transform: scaleY(1); } 70%, 100% { transform: scaleY(0); } }
@keyframes e-niesen-schnabel { 0%, 34%, 56%, 100% { transform: translateY(0); } 40%, 50% { transform: translateY(10px); } }
@keyframes e-niesen-mund { 0%, 34%, 56%, 100% { opacity: 0; } 40%, 50% { opacity: 1; } }
@keyframes e-sichtbar-ab { 0%, 36% { opacity: 0; } 40%, 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes e-feder-weg { 0% { transform: translate(var(--fx, 0), 0) rotate(0); opacity: 1; } 100% { transform: translate(var(--x), var(--y)) rotate(var(--r)); opacity: 0; } }

/* 3. Jonglieren: 1, 2, 3 fliegen im Bogen von Flügel zu Flügel */
.a-jonglieren { --d: 5s; }
.a-jonglieren .e-jong { animation: e-sichtbar 5s both; }
.a-jonglieren .e-ball { animation: e-ball-x 1.5s linear infinite alternate; }
.a-jonglieren .e-ball > g { animation: e-ball-y 1.5s infinite; }
.a-jonglieren .e-ball-2, .a-jonglieren .e-ball-2 > g { animation-delay: -.5s; }
.a-jonglieren .e-ball-3, .a-jonglieren .e-ball-3 > g { animation-delay: -1s; }
.a-jonglieren .e-fluegel-l { animation: e-jong-fl-l 1.5s ease-in-out infinite; }
.a-jonglieren .e-fluegel-r { animation: e-jong-fl-r 1.5s ease-in-out infinite; }
.a-jonglieren .e-pupille { animation: e-jong-blick 1.5s ease-in-out infinite; }
.a-jonglieren .e-kopf { animation: e-jong-kopf 3s ease-in-out infinite; }
.a-jonglieren .e-lid-froh { opacity: 0; }
@keyframes e-ball-x { from { transform: translateX(-62px); } to { transform: translateX(62px); } }
@keyframes e-ball-y { 0%, 100% { transform: translateY(0); animation-timing-function: cubic-bezier(.2, .6, .4, 1); } 50% { transform: translateY(-124px); animation-timing-function: cubic-bezier(.6, 0, .8, .4); } }
@keyframes e-jong-fl-l { 0%, 100% { transform: rotate(70deg); } 50% { transform: rotate(36deg); } }
@keyframes e-jong-fl-r { 0%, 100% { transform: rotate(-36deg); } 50% { transform: rotate(-70deg); } }
@keyframes e-jong-blick { 0%, 100% { transform: translate(-6px, -4px); } 50% { transform: translate(6px, -4px); } }
@keyframes e-jong-kopf { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }

/* 4. Professor: Brille und Doktorhut, Tafel „1+1=2“ */
.a-professor { --d: 5s; }
.a-professor .e-brille { animation: e-prof-brille 5s both; }
.a-professor .e-doktorhut { animation: e-prof-hut 5s both; }
.a-professor .e-tafel { animation: e-prof-tafel 5s both; }
.a-professor .e-fluegel-r { animation: e-prof-zeigen 5s ease-in-out both; }
.a-professor .e-kopf { animation: e-prof-kopf 5s ease-in-out both; }
.a-professor .e-schnabel-unten { animation: e-prof-sprechen 5s both; }
.a-professor .e-pupille { animation: e-prof-blick 5s both; }
@keyframes e-prof-hut { 0% { opacity: 0; transform: translateY(-70px) rotate(-12deg); } 12% { opacity: 1; transform: translateY(-70px) rotate(-12deg); } 20% { transform: translateY(4px); } 25% { transform: translateY(-3px); } 29%, 88% { opacity: 1; transform: translateY(0); } 96%, 100% { opacity: 0; transform: translateY(-40px) rotate(10deg); } }
@keyframes e-prof-brille { 0% { opacity: 0; transform: translateY(-40px); } 28% { opacity: 0; transform: translateY(-40px); } 34% { opacity: 1; transform: translateY(3px); } 38%, 88% { opacity: 1; transform: translateY(0); } 96%, 100% { opacity: 0; transform: translateY(-20px); } }
@keyframes e-prof-tafel { 0%, 38% { opacity: 0; transform: scale(.4); } 46%, 88% { opacity: 1; transform: scale(1); } 96%, 100% { opacity: 0; transform: scale(.6); } }
.a-professor .e-tafel { transform-origin: 163px 171px; }
@keyframes e-prof-zeigen { 0%, 40% { transform: rotate(0); } 50%, 58% { transform: rotate(-75deg); } 54% { transform: rotate(-90deg); } 62% { transform: rotate(-75deg); } 66% { transform: rotate(-92deg); } 72%, 80% { transform: rotate(-75deg); } 90%, 100% { transform: rotate(0); } }
@keyframes e-prof-kopf { 0%, 100% { transform: rotate(0); } 45%, 80% { transform: rotate(4deg); } }
@keyframes e-prof-sprechen { 0%, 48%, 84%, 100% { transform: translateY(0); } 52% { transform: translateY(6px); } 58% { transform: translateY(0); } 64% { transform: translateY(6px); } 70% { transform: translateY(0); } 76% { transform: translateY(6px); } }
@keyframes e-prof-blick { 0%, 40%, 90%, 100% { transform: translate(0, 0); } 48%, 82% { transform: translate(7px, 0); } }

/* 5. Zauberer: Zauberhut, Zauberstab, Sternenregen */
.a-zauberer { --d: 5.2s; }
.a-zauberer .e-zauberhut { animation: e-zauber-hut 5.2s both; }
.a-zauberer .e-zauberstab { animation: e-sichtbar 5.2s both; }
.a-zauberer .e-fluegel-r { animation: e-zauber-arm 5.2s ease-in-out both; }
.a-zauberer .e-sterne { animation: e-sichtbar 5.2s both; }
.a-zauberer .e-stern { animation: e-stern-regen 1.7s linear infinite both; animation-delay: calc(var(--v) * 1s + 1.2s); }
.a-zauberer .e-glitzer { animation: e-sichtbar 5.2s both; }
.a-zauberer .e-glitz { animation: e-glitzern .8s ease-in-out infinite; }
.a-zauberer .e-glitz1 { transform: translate(176px, 100px); } .a-zauberer .e-glitz2 { transform: translate(184px, 70px); animation-delay: .25s; } .a-zauberer .e-glitz3 { transform: translate(168px, 60px); animation-delay: .5s; }
.a-zauberer .e-kopf { animation: e-zauber-kopf 5.2s ease-in-out both; }
.e-stern1 { --x: 30px; --v: .0; } .e-stern2 { --x: 58px; --v: .45; } .e-stern3 { --x: 86px; --v: .2; } .e-stern4 { --x: 114px; --v: .8; }
.e-stern5 { --x: 142px; --v: .35; } .e-stern6 { --x: 170px; --v: .65; } .e-stern7 { --x: 72px; --v: 1.0; } .e-stern8 { --x: 128px; --v: 1.2; }
@keyframes e-zauber-hut { 0% { opacity: 0; transform: translateY(-80px) rotate(14deg); } 8% { opacity: 1; transform: translateY(-80px) rotate(14deg); } 16% { transform: translateY(5px) rotate(-3deg); } 20%, 90% { opacity: 1; transform: translateY(0); } 98%, 100% { opacity: 0; transform: translateY(-60px) rotate(-10deg); } }
@keyframes e-zauber-arm { 0%, 18% { transform: rotate(0); } 28% { transform: rotate(-105deg); } 36% { transform: rotate(-80deg); } 44% { transform: rotate(-108deg); } 52% { transform: rotate(-78deg); } 60% { transform: rotate(-108deg); } 68%, 80% { transform: rotate(-90deg); } 92%, 100% { transform: rotate(0); } }
@keyframes e-zauber-kopf { 0%, 100% { transform: rotate(0); } 30%, 80% { transform: rotate(-4deg); } }
@keyframes e-stern-regen { 0% { transform: translate(var(--x), 10px) scale(.3) rotate(0); opacity: 0; } 12% { opacity: 1; } 100% { transform: translate(calc(var(--x) + 8px), 222px) scale(1) rotate(200deg); opacity: 0; } }
@keyframes e-glitzern { 0%, 100% { transform: scale(0); } 50% { transform: scale(1.2); } }

/* 6. Detektiv: Lupe, suchender Blick, Aha! */
.a-detektiv { --d: 4.8s; }
.a-detektiv .e-lupe { animation: e-det-lupe 4.8s ease-in-out both; }
.a-detektiv .e-pupille { animation: e-det-blick 4.8s ease-in-out both; }
.a-detektiv .e-braue { animation: e-det-braue 4.8s both; }
.a-detektiv .e-ausruf { animation: e-det-ausruf 4.8s both; }
.a-detektiv .e-kopf { animation: e-det-kopf 4.8s ease-in-out both; }
@keyframes e-det-lupe { 0% { opacity: 0; transform: translate(60px, 30px) scale(.5); } 12% { opacity: 1; transform: translate(0, 0) scale(1); } 28% { transform: translate(-30px, 8px); } 44% { transform: translate(-10px, -6px); } 60% { transform: translate(-36px, 10px) scale(1.08); } 76%, 80% { opacity: 1; transform: translate(-8px, 0); } 92%, 100% { opacity: 0; transform: translate(50px, 40px) scale(.5); } }
@keyframes e-det-blick { 0%, 8%, 94%, 100% { transform: translate(0, 0); } 18%, 28% { transform: translate(-6px, 3px); } 36%, 44% { transform: translate(5px, -3px); } 56%, 64% { transform: translate(-6px, 4px); } 76%, 86% { transform: translate(0, 0) scale(1.15); } }
@keyframes e-det-braue { 0%, 100% { transform: translateY(0); } 15%, 74% { transform: translateY(4px) rotate(0); } 80%, 88% { transform: translateY(-5px); } }
@keyframes e-det-ausruf { 0%, 76% { opacity: 0; transform: scale(.3); } 82%, 92% { opacity: 1; transform: scale(1.1); } 100% { opacity: 0; transform: scale(1); } }
.a-detektiv .e-ausruf { transform-origin: 160px 34px; }
@keyframes e-det-kopf { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-5deg); } 55% { transform: rotate(4deg); } }

/* 7. Cool: Sonnenbrille, Nicken im Takt */
.a-cool { --d: 4s; }
.a-cool .e-sonnenbrille { animation: e-cool-brille 4s both; }
.a-cool .e-glitzer { animation: e-sichtbar 4s both; }
.a-cool .e-glitz1 { transform: translate(60px, 66px); animation: e-glitzern 1s 1s 2 both; }
.a-cool .e-glitz2, .a-cool .e-glitz3 { transform: translate(140px, 62px); animation: e-glitzern 1s 1.4s 1 both; }
.a-cool .e-kopf { animation: e-cool-nicken 4s both; }
.a-cool .e-dreh { animation: e-cool-dreh 4s both; }
.a-cool .e-fluegel-r { animation: e-cool-arm 4s both; }
.a-cool .e-fluegel-l { animation: e-cool-arm-l 4s both; }
.a-cool .e-fuss-l { animation: e-cool-fuss 1s steps(1) 1.2s 3; }
@keyframes e-cool-brille { 0% { opacity: 0; transform: translateY(-70px); } 14% { opacity: 1; transform: translateY(-70px); } 22% { transform: translateY(4px); } 26%, 90% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-20px); } }
@keyframes e-cool-nicken { 0%, 30% { transform: rotate(0); } 38% { transform: rotate(5deg) translateY(2px); } 46% { transform: rotate(-2deg); } 54% { transform: rotate(5deg) translateY(2px); } 62% { transform: rotate(-2deg); } 70% { transform: rotate(5deg) translateY(2px); } 78% { transform: rotate(-2deg); } 90%, 100% { transform: rotate(0); } }
@keyframes e-cool-dreh { 0%, 30%, 100% { transform: rotate(0); } 40% { transform: rotate(2deg); } 55% { transform: rotate(-2deg); } 70% { transform: rotate(2deg); } 85% { transform: rotate(0); } }
@keyframes e-cool-arm { 0%, 40%, 100% { transform: rotate(0); } 50%, 80% { transform: rotate(-38deg); } }
@keyframes e-cool-arm-l { 0%, 40%, 100% { transform: rotate(0); } 50%, 80% { transform: rotate(14deg); } }
@keyframes e-cool-fuss { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* 8. Tanzen: schwingen, Füße heben, Konfetti */
.a-tanzen { --d: 4.4s; }
.a-tanzen .e-hub { animation: e-tanz-hub .55s ease-in-out infinite; }
.a-tanzen .e-dreh { animation: e-tanz-dreh 1.1s ease-in-out infinite; }
.a-tanzen .e-kopf { animation: e-tanz-kopf 1.1s ease-in-out infinite; }
.a-tanzen .e-fluegel-l { animation: e-tanz-fl-l 1.1s ease-in-out infinite; }
.a-tanzen .e-fluegel-r { animation: e-tanz-fl-r 1.1s ease-in-out infinite; }
.a-tanzen .e-fuss-l { animation: e-tanz-fuss 1.1s ease-in-out infinite; }
.a-tanzen .e-fuss-r { animation: e-tanz-fuss 1.1s ease-in-out infinite .55s; }
.a-tanzen .e-lid { animation: none; transform: scaleY(1); }
.a-tanzen .e-lid-zu { opacity: 0; } .a-tanzen .e-lid-froh { opacity: 1; } .a-tanzen .e-wange { opacity: .75; }
.a-tanzen .e-konfetti { animation: e-sichtbar 4.4s both; }
.a-tanzen .e-k, .a-feiern .e-k { animation: e-konf 2.2s linear infinite both; animation-delay: calc(var(--v) * 1s); }
.a-tanzen, .a-feiern, .a-konfetti, .a-doppelhupf, .a-jubel, .a-feuerwerk { --kd: 1; }
.e-k1 { --x: 20px; --dx: 14px; --v: 0; } .e-k2 { --x: 52px; --dx: -10px; --v: .35; } .e-k3 { --x: 84px; --dx: 12px; --v: .8; } .e-k4 { --x: 116px; --dx: -14px; --v: .15; }
.e-k5 { --x: 148px; --dx: 8px; --v: .6; } .e-k6 { --x: 176px; --dx: -12px; --v: 1.0; } .e-k7 { --x: 36px; --dx: -8px; --v: 1.3; } .e-k8 { --x: 68px; --dx: 16px; --v: 1.6; }
.e-k9 { --x: 100px; --dx: -12px; --v: 1.1; } .e-k10 { --x: 132px; --dx: 10px; --v: .45; } .e-k11 { --x: 160px; --dx: -16px; --v: 1.8; } .e-k12 { --x: 10px; --dx: 12px; --v: 1.45; }
@keyframes e-konf { 0% { transform: translate(var(--x), -14px) rotate(0); opacity: 0; } 8% { opacity: 1; } 100% { transform: translate(calc(var(--x) + var(--dx)), 232px) rotate(560deg); opacity: 1; } }
@keyframes e-tanz-hub { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes e-tanz-dreh { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
@keyframes e-tanz-kopf { 0%, 100% { transform: rotate(8deg); } 50% { transform: rotate(-8deg); } }
@keyframes e-tanz-fl-l { 0%, 100% { transform: rotate(120deg); } 50% { transform: rotate(10deg); } }
@keyframes e-tanz-fl-r { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(-120deg); } }
@keyframes e-tanz-fuss { 0%, 40%, 100% { transform: translateY(0); } 20% { transform: translateY(-6px); } }

/* 9. Fernglas: Ausschau halten */
.a-fernglas { --d: 4.6s; }
.a-fernglas .e-fernglas { animation: e-fern-glas 4.6s both; }
.a-fernglas .e-kopf { animation: e-fern-kopf 4.6s ease-in-out both; }
.a-fernglas .e-ausruf { animation: e-det-ausruf 4.6s both; }
.a-fernglas .e-fluegel-l { animation: e-fern-arm-l 4.6s ease-in-out both; }
.a-fernglas .e-fluegel-r { animation: e-fern-arm-r 4.6s ease-in-out both; }
.a-fernglas .e-ausruf { transform-origin: 160px 34px; }
@keyframes e-fern-glas { 0% { opacity: 0; transform: translateY(40px); } 12%, 84% { opacity: 1; transform: translateY(0); } 96%, 100% { opacity: 0; transform: translateY(40px); } }
@keyframes e-fern-kopf { 0%, 14% { transform: rotate(0) translateX(0); } 28%, 40% { transform: rotate(-9deg) translateX(-6px); } 54%, 68% { transform: rotate(9deg) translateX(6px); } 80%, 100% { transform: rotate(0) translateX(0) scale(1.04); } }
@keyframes e-fern-arm-l { 0%, 100% { transform: rotate(0); } 14%, 84% { transform: rotate(28deg); } }
@keyframes e-fern-arm-r { 0%, 100% { transform: rotate(0); } 14%, 84% { transform: rotate(-28deg); } }

/* 10. Strecken und Gähnen */
.a-gaehnen { --d: 4.2s; }
.a-gaehnen .e-fluegel-l { animation: e-gaehn-arm-l 4.2s ease-in-out both; }
.a-gaehnen .e-fluegel-r { animation: e-gaehn-arm-r 4.2s ease-in-out both; }
.a-gaehnen .e-kopf { animation: e-gaehn-kopf 4.2s ease-in-out both; }
.a-gaehnen .e-schnabel-unten { animation: e-gaehn-schnabel 4.2s ease-in-out both; }
.a-gaehnen .e-mund { animation: e-gaehn-mund 4.2s both; }
.a-gaehnen .e-lid { animation: e-gaehn-lider 4.2s both; }
.a-gaehnen .e-dreh { animation: e-gaehn-dreh 4.2s ease-in-out both; }
@keyframes e-gaehn-arm-l { 0%, 100% { transform: rotate(0); } 25%, 55% { transform: rotate(150deg); } 40% { transform: rotate(160deg); } }
@keyframes e-gaehn-arm-r { 0%, 100% { transform: rotate(0); } 25%, 55% { transform: rotate(-150deg); } 40% { transform: rotate(-160deg); } }
@keyframes e-gaehn-kopf { 0%, 100% { transform: rotate(0); } 25%, 55% { transform: rotate(-7deg) translateY(-3px); } 72% { transform: rotate(4deg); } 80% { transform: rotate(-3deg); } 88% { transform: rotate(0); } }
@keyframes e-gaehn-schnabel { 0%, 20%, 62%, 100% { transform: translateY(0); } 30%, 52% { transform: translateY(15px); } }
@keyframes e-gaehn-mund { 0%, 20%, 62%, 100% { opacity: 0; } 30%, 52% { opacity: 1; } }
@keyframes e-gaehn-lider { 0%, 18% { transform: scaleY(0); } 28%, 56% { transform: scaleY(1); } 66% { transform: scaleY(.5); } 72% { transform: scaleY(0); } 100% { transform: scaleY(0); } }
@keyframes e-gaehn-dreh { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.03, 1.05); } }

/* 11. Aufplustern und Schütteln */
.a-aufplustern { --d: 3.4s; }
.a-aufplustern .e-dreh { animation: e-plus-dreh 3.4s ease-in-out both; }
.a-aufplustern .e-fluegel-l { animation: e-plus-fl-l 3.4s ease-in-out both; }
.a-aufplustern .e-fluegel-r { animation: e-plus-fl-r 3.4s ease-in-out both; }
.a-aufplustern .e-kopf { animation: e-plus-kopf 3.4s ease-in-out both; }
.a-aufplustern .e-lid { animation: e-augen-zu-kurz 3.4s both; }
.a-aufplustern .e-feder-gruppe { animation: e-sichtbar-ab 3.4s both; }
.a-aufplustern .e-feder { animation: e-feder-weg 1.4s 1.5s ease-out both; --fx: 0; }
.a-aufplustern .e-feder1 { --x: -60px; --y: -20px; --r: -200deg; } .a-aufplustern .e-feder2 { --x: 70px; --y: -30px; --r: 240deg; } .a-aufplustern .e-feder3 { --x: -50px; --y: 40px; --r: 160deg; }
.a-aufplustern .e-feder4 { --x: 60px; --y: 30px; --r: -180deg; } .a-aufplustern .e-feder5 { --x: -80px; --y: 0px; --r: 260deg; } .a-aufplustern .e-feder6 { --x: 90px; --y: 10px; --r: -280deg; }
@keyframes e-plus-dreh { 0%, 100% { transform: scale(1); } 28%, 46% { transform: scale(1.16, 1.1); } 52% { transform: scale(1.16, 1.1) rotate(2deg); } 56% { transform: scale(1.16, 1.1) rotate(-2deg); } 60% { transform: scale(1.14, 1.09) rotate(2deg); } 64% { transform: scale(1.14, 1.09) rotate(-2deg); } 76% { transform: scale(.96, .98); } 88% { transform: scale(1); } }
@keyframes e-plus-fl-l { 0%, 100% { transform: rotate(0); } 28%, 62% { transform: rotate(30deg); } }
@keyframes e-plus-fl-r { 0%, 100% { transform: rotate(0); } 28%, 62% { transform: rotate(-30deg); } }
@keyframes e-plus-kopf { 0%, 100% { transform: translateY(0); } 28%, 62% { transform: translateY(-4px) scale(1.04); } 70% { transform: translateY(2px) scale(.98); } }

/* 12. Verbeugung mit Schwung */
.a-verbeugung { --d: 3.8s; }
.a-verbeugung .e-kopf { animation: e-verb-kopf 3.8s ease-in-out both; }
.a-verbeugung .e-dreh { animation: e-verb-dreh 3.8s ease-in-out both; }
.a-verbeugung .e-fluegel-r { animation: e-verb-arm 3.8s ease-in-out both; }
.a-verbeugung .e-fluegel-l { animation: e-verb-arm-l 3.8s ease-in-out both; }
.a-verbeugung .e-lid { animation: e-augen-zu-kurz 3.8s both; }
.a-verbeugung .e-lid-zu { animation: e-bogen-zu 3.8s both; } .a-verbeugung .e-lid-froh { animation: e-bogen-froh 3.8s both; }
.a-verbeugung .e-glitzer { animation: e-sichtbar 3.8s both; }
.a-verbeugung .e-glitz1 { transform: translate(40px, 70px); animation: e-glitzern 1s 1.8s 1 both; } .a-verbeugung .e-glitz2 { transform: translate(160px, 80px); animation: e-glitzern 1s 2.1s 1 both; } .a-verbeugung .e-glitz3 { transform: translate(100px, 20px); animation: e-glitzern 1s 2.4s 1 both; }
@keyframes e-verb-kopf { 0%, 20%, 80%, 100% { transform: rotate(0) translateY(0); } 40%, 62% { transform: rotate(0) translateY(13px) scale(.97); } }
@keyframes e-verb-dreh { 0%, 20%, 80%, 100% { transform: scale(1); } 40%, 62% { transform: scale(1.02, .96); } }
@keyframes e-verb-arm { 0%, 15%, 85%, 100% { transform: rotate(0); } 40%, 62% { transform: rotate(-70deg); } }
@keyframes e-verb-arm-l { 0%, 15%, 85%, 100% { transform: rotate(0); } 40%, 62% { transform: rotate(40deg); } }

/* 13. Folgt einem Zeiger (Stern) mit den Augen */
.a-fingerfolgen { --d: 5.2s; }
.a-fingerfolgen .e-sterne { animation: e-sichtbar 5.2s both; }
.a-fingerfolgen .e-stern1 { animation: e-zeiger 5.2s linear both; }
.a-fingerfolgen .e-stern2, .a-fingerfolgen .e-stern3, .a-fingerfolgen .e-stern4, .a-fingerfolgen .e-stern5, .a-fingerfolgen .e-stern6, .a-fingerfolgen .e-stern7, .a-fingerfolgen .e-stern8 { display: none; }
.a-fingerfolgen .e-pupille { animation: e-zeiger-blick 5.2s linear both; }
.a-fingerfolgen .e-kopf { animation: e-zeiger-kopf 5.2s ease-in-out both; }
@keyframes e-zeiger { 0% { transform: translate(24px, 80px) scale(1.3); } 14% { transform: translate(24px, 80px); } 28% { transform: translate(100px, 8px); } 42% { transform: translate(176px, 80px); } 56% { transform: translate(100px, 150px); } 70% { transform: translate(24px, 80px); } 84%, 100% { transform: translate(100px, 100px) scale(.2); } }
@keyframes e-zeiger-blick { 0%, 14%, 70% { transform: translate(-7px, 0); } 28% { transform: translate(0, -7px); } 42% { transform: translate(7px, 0); } 56% { transform: translate(0, 7px); } 84%, 100% { transform: translate(0, 0); } }
@keyframes e-zeiger-kopf { 0%, 100% { transform: rotate(0); } 14%, 70% { transform: rotate(-4deg); } 42% { transform: rotate(4deg); } 28%, 56% { transform: rotate(0); } }

/* 14. Flügel schlagen, abheben, sanft landen */
.a-abheben { --d: 4.6s; }
.a-abheben .e-hub { animation: e-abh-hub 4.6s both; }
.a-abheben .e-fluegel-l { animation: e-abh-fl-l .22s ease-in-out 12 alternate; animation-delay: .5s; }
.a-abheben .e-fluegel-r { animation: e-abh-fl-r .22s ease-in-out 12 alternate; animation-delay: .5s; }
.a-abheben .e-schatten { animation: e-abh-schatten 4.6s both; }
.a-abheben .e-dreh { animation: e-abh-dreh 4.6s both; }
.a-abheben .e-feder-gruppe { animation: e-sichtbar-ab 4.6s both; }
.a-abheben .e-feder { animation: e-feder-faellt 2.2s 1.2s ease-in both; }
.a-abheben .e-feder1 { --x: -50px; } .a-abheben .e-feder2 { --x: 60px; } .a-abheben .e-feder3 { --x: -20px; }
.a-abheben .e-feder4, .a-abheben .e-feder5, .a-abheben .e-feder6 { display: none; }
@keyframes e-abh-hub { 0%, 6% { transform: translateY(0); } 14% { transform: translateY(4px); } 34% { transform: translateY(-62px); } 44% { transform: translateY(-54px); } 54% { transform: translateY(-62px); } 64% { transform: translateY(-54px); } 74% { transform: translateY(-56px); } 90% { transform: translateY(0); } 94% { transform: translateY(2px); } 100% { transform: translateY(0); } }
@keyframes e-abh-fl-l { from { transform: rotate(95deg); } to { transform: rotate(35deg); } }
@keyframes e-abh-fl-r { from { transform: rotate(-95deg); } to { transform: rotate(-35deg); } }
@keyframes e-abh-schatten { 0%, 6%, 94%, 100% { transform: scale(1); opacity: 1; } 34%, 74% { transform: scale(.6); opacity: .5; } }
@keyframes e-abh-dreh { 0%, 6% { transform: scale(1); } 14% { transform: scale(1.04, .94); } 18% { transform: scale(.97, 1.04); } 24%, 90% { transform: scale(1); } 94% { transform: scale(1.04, .94); } 100% { transform: scale(1); } }
@keyframes e-feder-faellt { 0% { transform: translate(0, 40px) rotate(0); opacity: 1; } 100% { transform: translate(var(--x), 190px) rotate(300deg); opacity: 0; } }

/* 15. Schmetterling landet auf dem Schnabel (Schielen!) */
.a-schmetterling { --d: 6s; }
.a-schmetterling .e-falter { animation: e-falter-flug 6s linear both; }
.a-schmetterling .e-falter-fluegel { animation: e-falter-flattern .16s ease-in-out infinite alternate; transform-origin: 0 0; }
.a-schmetterling .e-pupille { animation: e-falter-blick 6s ease-in-out both; }
.a-schmetterling .e-kopf { animation: e-falter-kopf 6s ease-in-out both; }
.a-schmetterling .e-lid-froh { opacity: 0; }
@keyframes e-falter-flug { 0% { opacity: 0; transform: translate(10px, 40px); } 6% { opacity: 1; } 16% { transform: translate(40px, 10px); } 28% { transform: translate(150px, 30px); } 40% { transform: translate(170px, 90px); } 52% { transform: translate(60px, 60px); } 64%, 74% { transform: translate(100px, 96px); } 86% { opacity: 1; transform: translate(110px, 40px); } 100% { opacity: 0; transform: translate(190px, -30px); } }
@keyframes e-falter-flattern { from { transform: scaleX(1); } to { transform: scaleX(.35); } }
@keyframes e-falter-blick { 0%, 4% { transform: translate(0, 0); } 16% { transform: translate(-6px, -5px); } 28% { transform: translate(6px, -2px); } 40% { transform: translate(7px, 4px); } 52% { transform: translate(-4px, 2px); } 62%, 74% { transform: translate(5px, 6px) scale(1); } 86% { transform: translate(3px, -6px); } 100% { transform: translate(0, 0); } }
@keyframes e-falter-kopf { 0%, 100% { transform: rotate(0); } 28% { transform: rotate(5deg); } 52% { transform: rotate(-4deg); } 64%, 74% { transform: rotate(0) translateY(2px); } }

/* 16. Eis essen – und Hirnfrost */
.a-eis { --d: 5s; }
.a-eis .e-eis { animation: e-eis-zeigen 5s both; }
.a-eis .e-fluegel-r { animation: e-eis-arm 5s ease-in-out both; }
.a-eis .e-schnabel-unten { animation: e-eis-lecken 5s both; }
.a-eis .e-kopf { animation: e-eis-kopf 5s ease-in-out both; }
.a-eis .e-lid { animation: e-eis-lider 5s both; }
.a-eis .e-wange { animation: e-froh-an 5s both; }
@keyframes e-eis-zeigen { 0% { opacity: 0; transform: translate(20px, 20px) scale(.5); } 10% { opacity: 1; transform: translate(0, 0) scale(1); } 24% { transform: translate(0, 0); } 28% { transform: translate(-6px, 0); } 34% { transform: translate(0, 0); } 44% { transform: translate(-6px, 0); } 50% { transform: translate(0, 0); } 60% { transform: translate(-6px, 0); } 66%, 86% { opacity: 1; transform: translate(0, 0); } 96%, 100% { opacity: 0; transform: translate(10px, 10px) scale(.6); } }
@keyframes e-eis-arm { 0%, 6%, 90%, 100% { transform: rotate(0); } 18%, 78% { transform: rotate(-24deg); } }
@keyframes e-eis-lecken { 0%, 24%, 100% { transform: translateY(0); } 28% { transform: translateY(8px); } 34% { transform: translateY(0); } 44% { transform: translateY(8px); } 50% { transform: translateY(0); } 60% { transform: translateY(8px); } 66% { transform: translateY(0); } }
@keyframes e-eis-kopf { 0%, 20%, 100% { transform: rotate(0); } 28%, 62% { transform: rotate(-4deg) translateY(3px); } 72% { transform: rotate(0) translateY(0); } 76% { transform: rotate(-6deg); } 80% { transform: rotate(6deg); } 84% { transform: rotate(-5deg); } 90% { transform: rotate(0); } }
@keyframes e-eis-lider { 0%, 68% { transform: scaleY(0); } 72%, 86% { transform: scaleY(1); } 92%, 100% { transform: scaleY(0); } }

/* 17. Regenschirm: Wolke, Tropfen, Sonne kommt wieder */
.a-regenschirm { --d: 5.4s; }
.a-regenschirm .e-regen { animation: e-regen-an 5.4s both; }
.a-regenschirm .e-tropfen { animation: e-tropfen .6s linear infinite both; }
.a-regenschirm .e-tropfen3, .a-regenschirm .e-tropfen4 { animation-name: e-tropfen-kurz; }
.a-regenschirm .e-tropfen2 { animation-delay: .15s; } .a-regenschirm .e-tropfen3 { animation-delay: .3s; } .a-regenschirm .e-tropfen4 { animation-delay: .08s; }
.a-regenschirm .e-schirm { animation: e-schirm-auf 5.4s both; transform-origin: 100px -12px; }
.a-regenschirm .e-sonne { animation: e-sonne-da 5.4s both; }
.a-regenschirm .e-sonne-strahlen { animation: e-sonne-dreh 4s linear infinite; transform-origin: 164px 30px; }
.a-regenschirm .e-pupille { animation: e-regen-blick 5.4s both; }
.a-regenschirm .e-lid { animation: none; transform: scaleY(0); }
@keyframes e-regen-an { 0% { opacity: 0; transform: translateX(-50px); } 10% { opacity: 1; transform: translateX(0); } 60% { opacity: 1; transform: translateX(0); } 74%, 100% { opacity: 0; transform: translateX(-30px); } }
.a-regenschirm .e-wolke { transform: translateX(34px); }
@keyframes e-tropfen { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(190px); opacity: .3; } }
@keyframes e-tropfen-kurz { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(40px); opacity: 0; } }
@keyframes e-schirm-auf { 0%, 8% { opacity: 0; transform: scale(.1, .1); } 20% { opacity: 1; transform: scale(1.1, .9); } 26%, 60% { opacity: 1; transform: scale(1); } 70%, 74% { opacity: 1; transform: scale(.1, .2) translateY(-6px); } 76%, 100% { opacity: 0; transform: scale(.1); } }
@keyframes e-sonne-da { 0%, 58% { opacity: 0; transform: translate(50px, -30px) scale(.4); } 72%, 92% { opacity: 1; transform: translate(0, 0) scale(1); } 100% { opacity: 0; transform: translate(0, 0) scale(1); } }
@keyframes e-sonne-dreh { to { transform: rotate(360deg); } }
@keyframes e-regen-blick { 0%, 6%, 74%, 100% { transform: translate(0, 0); } 14%, 60% { transform: translate(0, -7px); } 84% { transform: translate(6px, -4px); } }
.a-regenschirm .e-lid-froh { transition: none; }

/* 18. Liest ein Buch */
.a-buch { --d: 5.6s; }
.a-buch .e-buch { animation: e-buch-auf 5.6s ease-out both; }
.a-buch .e-brille { animation: e-sichtbar 5.6s both; }
.a-buch .e-kopf { animation: e-buch-kopf 5.6s ease-in-out both; }
.a-buch .e-pupille { animation: e-buch-blick 5.6s steps(1) both; }
.a-buch .e-ausruf { animation: e-det-ausruf 5.6s both; transform-origin: 160px 34px; }
.a-buch .e-fluegel-l { animation: e-buch-arm-l 5.6s both; } .a-buch .e-fluegel-r { animation: e-buch-arm-r 5.6s both; }
@keyframes e-buch-auf { 0% { opacity: 0; transform: translateY(50px); } 12% { opacity: 1; transform: translateY(0); } 20%, 86% { opacity: 1; } 96%, 100% { opacity: 0; transform: translateY(40px); } }
@keyframes e-buch-kopf { 0%, 100% { transform: rotate(0) translateY(0); } 14%, 80% { transform: rotate(2deg) translateY(5px); } 40% { transform: rotate(-2deg) translateY(5px); } 60% { transform: rotate(3deg) translateY(6px); } }
@keyframes e-buch-blick { 0%, 14% { transform: translate(0, 0); } 18% { transform: translate(-6px, 6px); } 30% { transform: translate(6px, 6px); } 34% { transform: translate(-6px, 6px); } 46% { transform: translate(6px, 6px); } 50% { transform: translate(-6px, 6px); } 62% { transform: translate(6px, 6px); } 66% { transform: translate(-6px, 6px); } 78%, 100% { transform: translate(0, 0); } }
@keyframes e-buch-arm-l { 0%, 100% { transform: rotate(0); } 14%, 84% { transform: rotate(-14deg); } }
@keyframes e-buch-arm-r { 0%, 100% { transform: rotate(0); } 14%, 84% { transform: rotate(14deg); } }

/* 19. Nickerchen – und plötzlich „Huch!“ */
.a-nickerchen { --d: 5.6s; }
.a-nickerchen .e-lid { animation: e-nick-lider 5.6s both; }
.a-nickerchen .e-kopf { animation: e-nick-kopf 5.6s ease-in-out both; }
.a-nickerchen .e-zzz { animation: e-nick-zzz 5.6s both; }
.a-nickerchen .e-z { animation: e-zzz 2.6s ease-in-out infinite; } .a-nickerchen .e-z2 { animation-delay: .6s; } .a-nickerchen .e-z3 { animation-delay: 1.2s; }
.a-nickerchen .e-hub { animation: e-nick-hub 5.6s both; }
.a-nickerchen .e-ausruf { animation: e-nick-ausruf 5.6s both; transform-origin: 160px 34px; }
.a-nickerchen .e-fluegel-l { animation: e-nick-arm-l 5.6s both; } .a-nickerchen .e-fluegel-r { animation: e-nick-arm-r 5.6s both; }
@keyframes e-nick-lider { 0%, 10% { transform: scaleY(0); } 30%, 70% { transform: scaleY(1); } 74% { transform: scaleY(0); } 100% { transform: scaleY(0); } }
@keyframes e-nick-kopf { 0%, 8% { transform: rotate(0) translateY(0); } 34% { transform: rotate(10deg) translateY(8px); } 44% { transform: rotate(4deg) translateY(2px); } 54% { transform: rotate(13deg) translateY(10px); } 70% { transform: rotate(13deg) translateY(10px); } 74% { transform: rotate(-4deg) translateY(-4px); } 84%, 100% { transform: rotate(0) translateY(0); } }
@keyframes e-nick-zzz { 0%, 24% { opacity: 0; } 32%, 68% { opacity: 1; } 74%, 100% { opacity: 0; } }
@keyframes e-nick-hub { 0%, 72% { transform: translateY(0); } 76% { transform: translateY(-22px); } 84% { transform: translateY(0); } 87% { transform: translateY(-5px); } 90%, 100% { transform: translateY(0); } }
@keyframes e-nick-ausruf { 0%, 72% { opacity: 0; transform: scale(.3); } 76%, 88% { opacity: 1; transform: scale(1.1); } 96%, 100% { opacity: 0; } }
@keyframes e-nick-arm-l { 0%, 72% { transform: rotate(0); } 78%, 86% { transform: rotate(60deg); } 96%, 100% { transform: rotate(0); } }
@keyframes e-nick-arm-r { 0%, 72% { transform: rotate(0); } 78%, 86% { transform: rotate(-60deg); } 96%, 100% { transform: rotate(0); } }

/* 20. Seifenblasen */
.a-seifenblasen { --d: 5.2s; }
.a-seifenblasen .e-blasen { animation: e-sichtbar 5.2s both; }
.a-seifenblasen .e-blase { animation: e-blase-flug 3.2s ease-out infinite both; }
.a-seifenblasen .e-blase1 { --x: 40px; --y: -90px; } .a-seifenblasen .e-blase2 { --x: 70px; --y: -120px; animation-delay: .7s; } .a-seifenblasen .e-blase3 { --x: 20px; --y: -140px; animation-delay: 1.3s; }
.a-seifenblasen .e-blase4 { --x: 90px; --y: -80px; animation-delay: 1.8s; } .a-seifenblasen .e-blase5 { --x: 55px; --y: -150px; animation-delay: 2.3s; }
.a-seifenblasen .e-schnabel-unten { animation: e-seife-schnabel 1.2s ease-in-out infinite; }
.a-seifenblasen .e-kopf { animation: e-seife-kopf 1.2s ease-in-out infinite; }
.a-seifenblasen .e-braue { animation: none; transform: translateY(-2px); }
@keyframes e-blase-flug { 0% { transform: translate(100px, 112px) scale(.2); opacity: 0; } 12% { opacity: 1; } 80% { opacity: 1; transform: translate(calc(100px + var(--x)), calc(112px + var(--y) * .8)) scale(1.5); } 90% { transform: translate(calc(100px + var(--x)), calc(112px + var(--y) * .86)) scale(1.8); opacity: .8; } 100% { transform: translate(calc(100px + var(--x)), calc(112px + var(--y) * .9)) scale(2); opacity: 0; } }
@keyframes e-seife-schnabel { 0%, 100% { transform: translateY(2px); } 50% { transform: translateY(5px); } }
@keyframes e-seife-kopf { 0%, 100% { transform: rotate(0) scale(1); } 50% { transform: rotate(-2deg) scale(1.02); } }

/* 21. Rechenblitz: Zeichen wirbeln um den Kopf, dann geht ein Licht auf */
.a-rechenblitz { --d: 5s; }
.a-rechenblitz .e-zeichen { animation: e-sichtbar-rechnen 5s both; font-size: 32px; }
.a-rechenblitz .e-zeich { animation: e-zeich-kreis 2s linear infinite; }
.a-rechenblitz .e-zeich1 { animation-delay: 0s; } .a-rechenblitz .e-zeich2 { animation-delay: -.33s; } .a-rechenblitz .e-zeich3 { animation-delay: -.66s; }
.a-rechenblitz .e-zeich4 { animation-delay: -1s; } .a-rechenblitz .e-zeich5 { animation-delay: -1.33s; } .a-rechenblitz .e-zeich6 { animation-delay: -1.66s; }
.a-rechenblitz .e-pupille { animation: e-rechen-blick 1s linear 3 both; }
.a-rechenblitz .e-glueh { animation: e-rechen-glueh 5s both; }
.a-rechenblitz .e-glitzer { animation: e-rechen-glitz 5s both; }
.a-rechenblitz .e-glitz1 { transform: translate(60px, 30px); animation: e-glitzern .8s 3.4s 2 both; } .a-rechenblitz .e-glitz2 { transform: translate(140px, 28px); animation: e-glitzern .8s 3.6s 2 both; } .a-rechenblitz .e-glitz3 { transform: translate(100px, 10px); animation: e-glitzern .8s 3.8s 2 both; }
.a-rechenblitz .e-kopf { animation: e-rechen-kopf 5s ease-in-out both; }
@keyframes e-sichtbar-rechnen { 0% { opacity: 0; } 8%, 60% { opacity: 1; } 68%, 100% { opacity: 0; } }
@keyframes e-zeich-kreis { 0% { transform: translate(100px, 8px); } 25% { transform: translate(164px, 30px); } 50% { transform: translate(100px, 52px); } 75% { transform: translate(36px, 30px); } 100% { transform: translate(100px, 8px); } }
@keyframes e-rechen-blick { 0% { transform: translate(0, -7px); } 25% { transform: translate(7px, 0); } 50% { transform: translate(0, 7px); } 75% { transform: translate(-7px, 0); } 100% { transform: translate(0, -7px); } }
@keyframes e-rechen-glueh { 0%, 66% { opacity: 0; transform: scale(.3) translateY(20px); } 72% { opacity: 1; transform: scale(1.25) translateY(0); } 76%, 94% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }
.a-rechenblitz .e-glueh { transform-origin: 100px -10px; }
@keyframes e-rechen-glitz { 0%, 66% { opacity: 0; } 70%, 94% { opacity: 1; } 100% { opacity: 0; } }
@keyframes e-rechen-kopf { 0%, 100% { transform: rotate(0); } 10%, 60% { transform: rotate(-3deg); } 74% { transform: rotate(3deg) translateY(-3px); } }

/* 22. Winken */
.a-winken { --d: 3.4s; }
.a-winken .e-fluegel-r { animation: e-wink-arm 3.4s ease-in-out both; }
.a-winken .e-kopf { animation: e-wink-kopf 3.4s ease-in-out both; }
.a-winken .e-schnabel-unten { animation: e-wink-schnabel 3.4s both; }
.a-winken .e-lid { animation: none; transform: scaleY(1); } .a-winken .e-lid-zu { opacity: 0; } .a-winken .e-lid-froh { opacity: 1; } .a-winken .e-wange { opacity: .75; }
.a-winken .e-lid-l { animation: e-wink-lid 3.4s both; }
.a-winken .e-herzen { animation: e-sichtbar-ab 3.4s both; }
.a-winken .e-herz { animation: e-herz-auf 1.6s 1.6s ease-out both; }
.a-winken .e-herz1 { --x: -26px; } .a-winken .e-herz2 { --x: 10px; } .a-winken .e-herz3 { --x: 30px; }
@keyframes e-wink-arm { 0%, 8%, 94%, 100% { transform: rotate(0); } 22% { transform: rotate(-135deg); } 32% { transform: rotate(-112deg); } 42% { transform: rotate(-138deg); } 52% { transform: rotate(-112deg); } 62% { transform: rotate(-138deg); } 72% { transform: rotate(-112deg); } 82% { transform: rotate(-135deg); } }
@keyframes e-wink-kopf { 0%, 100% { transform: rotate(0); } 20%, 80% { transform: rotate(-6deg); } }
@keyframes e-wink-schnabel { 0%, 20%, 86%, 100% { transform: translateY(0); } 28% { transform: translateY(5px); } 34% { transform: translateY(0); } 48% { transform: translateY(5px); } 54% { transform: translateY(0); } 68% { transform: translateY(5px); } 74% { transform: translateY(0); } }
@keyframes e-wink-lid { 0%, 100% { transform: scaleY(0); } 20%, 80% { transform: scaleY(1); } }
@keyframes e-herz-auf { 0% { transform: translate(var(--x), 0) scale(.3); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(calc(var(--x) * 1.4), -40px) scale(1.1); opacity: 0; } }

/* 23. Purzelbaum */
.a-purzelbaum { --d: 2.6s; }
.a-purzelbaum .e-hub { animation: e-purz-hub 2.6s both; }
.a-purzelbaum .e-dreh { animation: e-purz-dreh 2.6s both; transform-origin: 100px 150px; }
.a-purzelbaum .e-lid { animation: none; transform: scaleY(1); } .a-purzelbaum .e-lid-zu { opacity: 0; } .a-purzelbaum .e-lid-froh { opacity: 1; } .a-purzelbaum .e-wange { opacity: .75; }
.a-purzelbaum .e-fluegel-l { animation: e-purz-fl-l 2.6s both; } .a-purzelbaum .e-fluegel-r { animation: e-purz-fl-r 2.6s both; }
@keyframes e-purz-hub { 0%, 14% { transform: translateY(0); } 22% { transform: translateY(4px); } 52% { transform: translateY(-58px); } 78% { transform: translateY(0); } 84% { transform: translateY(3px); } 92%, 100% { transform: translateY(0); } }
@keyframes e-purz-dreh { 0%, 22% { transform: rotate(0) scale(1); } 24% { transform: rotate(0) scale(1.05, .92); } 30% { transform: rotate(0); } 76% { transform: rotate(360deg); } 80% { transform: rotate(360deg) scale(1.05, .92); } 90%, 100% { transform: rotate(360deg) scale(1); } }
@keyframes e-purz-fl-l { 0%, 22%, 80%, 100% { transform: rotate(0); } 34%, 64% { transform: rotate(100deg); } }
@keyframes e-purz-fl-r { 0%, 22%, 80%, 100% { transform: rotate(0); } 34%, 64% { transform: rotate(-100deg); } }

/* 24. Sternschnuppe: Augen folgen, Wunsch */
.a-sternschnuppe { --d: 5s; }
.a-sternschnuppe .e-schnuppe { animation: e-schnuppe-flug 5s linear both; }
.a-sternschnuppe .e-pupille { animation: e-schnuppe-blick 5s ease-in-out both; }
.a-sternschnuppe .e-lid { animation: e-schnuppe-lid 5s both; }
.a-sternschnuppe .e-lid-zu { opacity: 0; } .a-sternschnuppe .e-lid-froh { opacity: 1; }
.a-sternschnuppe .e-glitzer { animation: e-rechen-glitz 5s both; }
.a-sternschnuppe .e-glitz1 { transform: translate(40px, 50px); animation: e-glitzern .8s 3.4s 2 both; } .a-sternschnuppe .e-glitz2 { transform: translate(160px, 40px); animation: e-glitzern .8s 3.7s 2 both; } .a-sternschnuppe .e-glitz3 { transform: translate(100px, 12px); animation: e-glitzern .8s 4s 2 both; }
.a-sternschnuppe .e-kopf { animation: e-schnuppe-kopf 5s ease-in-out both; }
.a-sternschnuppe .e-wange { animation: e-froh-an 5s both; }
@keyframes e-schnuppe-flug { 0%, 6% { opacity: 0; transform: translate(40px, -10px); } 10% { opacity: 1; } 44% { opacity: 1; transform: translate(190px, 70px); } 46%, 100% { opacity: 0; transform: translate(190px, 70px); } }
@keyframes e-schnuppe-blick { 0%, 6% { transform: translate(0, 0); } 12% { transform: translate(-6px, -6px); } 44% { transform: translate(7px, 3px); } 56%, 100% { transform: translate(0, 0); } }
@keyframes e-schnuppe-lid { 0%, 52% { transform: scaleY(0); } 58%, 86% { transform: scaleY(1); } 94%, 100% { transform: scaleY(0); } }
@keyframes e-schnuppe-kopf { 0%, 100% { transform: rotate(0); } 10%, 40% { transform: rotate(-6deg) translateY(-2px); } 62%, 84% { transform: rotate(0) translateY(-3px); } }

/* ===================================================================================================================================
   Besondere Auftritte (selten, länger, mit Requisiten)
   =================================================================================================================================== */

/* B1. Superheld */
.a-superheld { --d: 6.4s; }
.a-superheld .e-umhang { animation: e-held-umhang 6.4s both; transform-origin: 100px 104px; }
.a-superheld .e-maske { animation: e-held-maske 6.4s both; }
.a-superheld .e-hub { animation: e-held-hub 6.4s ease-in-out both; }
.a-superheld .e-dreh { animation: e-held-dreh 6.4s ease-in-out both; }
.a-superheld .e-fluegel-r { animation: e-held-arm-r 6.4s ease-in-out both; }
.a-superheld .e-fluegel-l { animation: e-held-arm-l 6.4s ease-in-out both; }
.a-superheld .e-sterne { animation: e-sichtbar 6.4s both; }
.a-superheld .e-stern { animation: e-stern-regen 1.7s linear infinite both; animation-delay: calc(var(--v) * 1s + 3s); }
.a-superheld .e-kopf { animation: e-held-kopf 6.4s ease-in-out both; }
.a-superheld .e-braue { animation: e-det-braue 6.4s both; }
@keyframes e-held-umhang { 0% { opacity: 0; transform: scale(.2); } 12% { opacity: 1; transform: scale(1.05); } 18%, 90% { opacity: 1; transform: scale(1); } 30% { transform: scale(1.04, .98) skewX(2deg); } 44% { transform: scale(1.06, 1) skewX(-3deg); } 58% { transform: scale(1.04, .98) skewX(3deg); } 72% { transform: scale(1.05, 1) skewX(-2deg); } 100% { opacity: 0; transform: scale(.5); } }
@keyframes e-held-maske { 0%, 14% { opacity: 0; transform: scale(1.3); } 22%, 88% { opacity: 1; transform: scale(1); } 96%, 100% { opacity: 0; } }
@keyframes e-held-hub { 0%, 20% { transform: translateY(0); } 32% { transform: translateY(-18px); } 44%, 70% { transform: translateY(-34px); } 82% { transform: translateY(-34px) rotate(0); } 94%, 100% { transform: translateY(0); } }
@keyframes e-held-dreh { 0%, 20% { transform: rotate(0) scale(1); } 34%, 70% { transform: rotate(-9deg) scale(1.05); } 82% { transform: rotate(0) scale(1.07); } 94%, 100% { transform: rotate(0) scale(1); } }
@keyframes e-held-arm-r { 0%, 20%, 100% { transform: rotate(0); } 34%, 82% { transform: rotate(-160deg); } }
@keyframes e-held-arm-l { 0%, 20%, 100% { transform: rotate(0); } 34%, 82% { transform: rotate(30deg); } }
@keyframes e-held-kopf { 0%, 20%, 100% { transform: rotate(0); } 34%, 70% { transform: rotate(5deg) translateY(-3px); } }

/* B2. Weltraum: schwerelos mit Astronautenhelm */
.a-weltraum { --d: 6.6s; }
.a-weltraum .e-helm { animation: e-welt-helm 6.6s both; }
.a-weltraum .e-sterne { animation: e-sichtbar 6.6s both; }
.a-weltraum .e-stern { animation: e-twinkeln 1.6s ease-in-out infinite both; }
.a-weltraum .e-stern1 { transform: translate(24px, 40px); } .a-weltraum .e-stern2 { transform: translate(176px, 60px); animation-delay: .3s; } .a-weltraum .e-stern3 { transform: translate(40px, 150px); animation-delay: .7s; }
.a-weltraum .e-stern4 { transform: translate(168px, 150px); animation-delay: .5s; } .a-weltraum .e-stern5 { transform: translate(100px, 4px); animation-delay: 1s; } .a-weltraum .e-stern6 { transform: translate(14px, 100px); animation-delay: 1.2s; }
.a-weltraum .e-stern7 { transform: translate(186px, 110px); animation-delay: .9s; } .a-weltraum .e-stern8 { transform: translate(120px, 190px); animation-delay: .15s; }
.a-weltraum .e-hub { animation: e-welt-hub 6.6s ease-in-out both; }
.a-weltraum .e-dreh { animation: e-welt-dreh 6.6s ease-in-out both; }
.a-weltraum .e-fluegel-l { animation: e-welt-fl-l 3.3s ease-in-out infinite; } .a-weltraum .e-fluegel-r { animation: e-welt-fl-r 3.3s ease-in-out infinite; }
.a-weltraum .e-schatten { animation: e-abh-schatten 6.6s both; }
.a-weltraum .e-pupille { animation: e-welt-blick 6.6s ease-in-out both; }
@keyframes e-welt-helm { 0% { opacity: 0; transform: scale(1.4); } 10%, 90% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.3); } }
@keyframes e-twinkeln { 0%, 100% { opacity: .2; transform: scale(.5); } 50% { opacity: 1; transform: scale(1.1); } }
@keyframes e-welt-hub { 0%, 8% { transform: translateY(0); } 24% { transform: translateY(-36px); } 50% { transform: translateY(-48px); } 76% { transform: translateY(-32px); } 94%, 100% { transform: translateY(0); } }
@keyframes e-welt-dreh { 0%, 8% { transform: rotate(0); } 30% { transform: rotate(10deg); } 56% { transform: rotate(-9deg); } 80% { transform: rotate(5deg); } 94%, 100% { transform: rotate(0); } }
@keyframes e-welt-fl-l { 0%, 100% { transform: rotate(30deg); } 50% { transform: rotate(55deg); } }
@keyframes e-welt-fl-r { 0%, 100% { transform: rotate(-30deg); } 50% { transform: rotate(-55deg); } }
@keyframes e-welt-blick { 0%, 100% { transform: translate(0, 0); } 20% { transform: translate(-6px, -4px); } 45% { transform: translate(6px, -6px); } 70% { transform: translate(-5px, 5px); } }

/* B3. Geburtstagstorte: Kerze auspusten */
.a-torte { --d: 6s; }
.a-torte .e-torte { animation: e-torte-da 6s both; }
.a-torte .e-flamme { animation: e-flamme 6s both; transform-origin: 100px 152px; }
.a-torte .e-konfetti { animation: e-torte-konf 6s both; }
.a-torte .e-k { animation: e-konf 2.2s linear infinite both; animation-delay: calc(var(--v) * 1s + 3.5s); }
.a-torte .e-schnabel-unten { animation: e-torte-schnabel 6s both; }
.a-torte .e-kopf { animation: e-torte-kopf 6s ease-in-out both; }
.a-torte .e-lid { animation: e-torte-lider 6s both; }
.a-torte .e-krone { animation: e-sichtbar 6s both; }
.a-torte .e-fluegel-l { animation: e-torte-arm-l 6s both; } .a-torte .e-fluegel-r { animation: e-torte-arm-r 6s both; }
@keyframes e-torte-da { 0% { opacity: 0; transform: translateY(40px) scale(.6); } 12%, 88% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 0; transform: translateY(30px); } }
.a-torte .e-torte { transform-origin: 100px 190px; }
@keyframes e-flamme { 0%, 14% { opacity: 0; transform: scale(.3); } 22% { opacity: 1; transform: scale(1); } 30% { transform: scale(1.1, .9); } 38% { transform: scale(.9, 1.1); } 46% { transform: scale(1.1, .9); } 52% { opacity: 1; transform: scale(1.3, .6) skewX(20deg); } 56%, 100% { opacity: 0; transform: scale(.2); } }
@keyframes e-torte-konf { 0%, 54% { opacity: 0; } 58%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes e-torte-schnabel { 0%, 40%, 58%, 100% { transform: translateY(0); } 46%, 52% { transform: translateY(6px); } }
@keyframes e-torte-kopf { 0%, 34%, 100% { transform: rotate(0); } 42%, 52% { transform: rotate(-5deg) translateY(8px) scale(.98); } 60% { transform: rotate(3deg); } 80% { transform: rotate(0); } }
@keyframes e-torte-lider { 0%, 38% { transform: scaleY(0); } 44%, 54% { transform: scaleY(1); } 60%, 100% { transform: scaleY(0); } }
@keyframes e-torte-arm-l { 0%, 56%, 100% { transform: rotate(0); } 64%, 84% { transform: rotate(120deg); } }
@keyframes e-torte-arm-r { 0%, 56%, 100% { transform: rotate(0); } 64%, 84% { transform: rotate(-120deg); } }

/* B4. Krönung zur Mathe-Königin: Krone, Medaille, Verbeugung vor dem Publikum */
.a-kroenung { --d: 6s; }
.a-kroenung .e-krone { animation: e-kro-krone 6s both; }
.a-kroenung .e-medaille { animation: e-kro-medaille 6s both; transform-origin: 100px 118px; }
.a-kroenung .e-herzen { animation: e-sichtbar-ab 6s both; }
.a-kroenung .e-herz { animation: e-herz-auf 1.8s 2.4s ease-out 2 both; }
.a-kroenung .e-herz1 { --x: -40px; } .a-kroenung .e-herz2 { --x: 20px; } .a-kroenung .e-herz3 { --x: 60px; }
.a-kroenung .e-glitzer { animation: e-sichtbar 6s both; }
.a-kroenung .e-glitz1 { transform: translate(46px, 64px); animation: e-glitzern .9s 2s 3 both; } .a-kroenung .e-glitz2 { transform: translate(154px, 58px); animation: e-glitzern .9s 2.3s 3 both; } .a-kroenung .e-glitz3 { transform: translate(100px, 6px); animation: e-glitzern .9s 2.6s 3 both; }
.a-kroenung .e-kopf { animation: e-kro-kopf 6s ease-in-out both; }
.a-kroenung .e-dreh { animation: e-kro-dreh 6s ease-in-out both; }
.a-kroenung .e-lid { animation: e-augen-zu 6s both; }
.a-kroenung .e-lid-zu { animation: e-bogen-zu 6s both; } .a-kroenung .e-lid-froh { animation: e-bogen-froh 6s both; }
.a-kroenung .e-fluegel-l { animation: e-kro-arm-l 6s both; } .a-kroenung .e-fluegel-r { animation: e-kro-arm-r 6s both; }
@keyframes e-kro-krone { 0% { opacity: 0; transform: translateY(-80px) rotate(20deg); } 10% { opacity: 1; transform: translateY(-80px) rotate(20deg); } 20% { transform: translateY(5px) rotate(-3deg); } 26%, 90% { opacity: 1; transform: translateY(0) rotate(0); } 100% { opacity: 0; transform: translateY(-40px); } }
@keyframes e-kro-medaille { 0%, 22% { opacity: 0; transform: scale(.2); } 34% { opacity: 1; transform: scale(1.3) rotate(8deg); } 42%, 90% { opacity: 1; transform: scale(1) rotate(0); } 52% { transform: rotate(-6deg); } 62% { transform: rotate(5deg); } 72% { transform: rotate(-3deg); } 100% { opacity: 0; } }
@keyframes e-kro-kopf { 0%, 22%, 100% { transform: rotate(0); } 34%, 44% { transform: rotate(-3deg) translateY(-3px); } 62%, 76% { transform: translateY(18px) scale(.95); } }
@keyframes e-kro-dreh { 0%, 60%, 80%, 100% { transform: scale(1); } 66%, 74% { transform: scale(1.02, .95); } }
@keyframes e-kro-arm-l { 0%, 56%, 100% { transform: rotate(0); } 64%, 76% { transform: rotate(60deg); } }
@keyframes e-kro-arm-r { 0%, 56%, 100% { transform: rotate(0); } 64%, 76% { transform: rotate(-60deg); } }

/* ===================================================================================================================================
   Reaktionen (Freude, Nachdenken, Tipp, Feier …) – kürzer und gezielt
   =================================================================================================================================== */
/* Freude klein: Hupfer */
.a-hupf { --d: 1.5s; }
.a-hupf .e-hub { animation: e-hupf 1.5s both; } .a-hupf .e-fluegel-l { animation: e-hupf-fl-l 1.5s both; } .a-hupf .e-fluegel-r { animation: e-hupf-fl-r 1.5s both; }
.a-hupf .e-lid { animation: e-augen-zu 1.5s both; } .a-hupf .e-lid-zu { animation: e-bogen-zu 1.5s both; } .a-hupf .e-lid-froh { animation: e-bogen-froh 1.5s both; } .a-hupf .e-wange { animation: e-froh-an 1.5s both; }
@keyframes e-hupf { 0%, 10% { transform: translateY(0); } 25% { transform: translateY(-28px); } 45% { transform: translateY(0); } 55% { transform: translateY(-14px); } 70%, 100% { transform: translateY(0); } }
@keyframes e-hupf-fl-l { 0%, 10%, 70%, 100% { transform: rotate(0); } 25% { transform: rotate(60deg); } }
@keyframes e-hupf-fl-r { 0%, 10%, 70%, 100% { transform: rotate(0); } 25% { transform: rotate(-60deg); } }
/* Freude klein: Flügel hoch */
.a-fluegel-hoch { --d: 1.8s; }
.a-fluegel-hoch .e-fluegel-l { animation: e-fh-l 1.8s ease-in-out both; } .a-fluegel-hoch .e-fluegel-r { animation: e-fh-r 1.8s ease-in-out both; }
.a-fluegel-hoch .e-kopf { animation: e-fh-kopf 1.8s ease-in-out both; } .a-fluegel-hoch .e-glitzer { animation: e-sichtbar 1.8s both; }
.a-fluegel-hoch .e-glitz1 { transform: translate(30px, 40px); animation: e-glitzern .7s .3s 2 both; } .a-fluegel-hoch .e-glitz2 { transform: translate(170px, 40px); animation: e-glitzern .7s .5s 2 both; } .a-fluegel-hoch .e-glitz3 { transform: translate(100px, 10px); animation: e-glitzern .7s .7s 2 both; }
.a-fluegel-hoch .e-lid { animation: e-augen-zu 1.8s both; } .a-fluegel-hoch .e-lid-zu { animation: e-bogen-zu 1.8s both; } .a-fluegel-hoch .e-lid-froh { animation: e-bogen-froh 1.8s both; } .a-fluegel-hoch .e-wange { animation: e-froh-an 1.8s both; }
@keyframes e-fh-l { 0%, 100% { transform: rotate(0); } 20%, 50% { transform: rotate(145deg); } 30% { transform: rotate(130deg); } 40% { transform: rotate(150deg); } 60% { transform: rotate(0); } }
@keyframes e-fh-r { 0%, 100% { transform: rotate(0); } 20%, 50% { transform: rotate(-145deg); } 30% { transform: rotate(-130deg); } 40% { transform: rotate(-150deg); } 60% { transform: rotate(0); } }
@keyframes e-fh-kopf { 0%, 100% { transform: rotate(0); } 25%, 45% { transform: rotate(-4deg) translateY(-3px); } }
/* Freude klein: Nicken */
.a-nicken { --d: 1.6s; }
.a-nicken .e-kopf { animation: e-nicken 1.6s ease-in-out both; } .a-nicken .e-dreh { animation: e-nicken-dreh 1.6s ease-in-out both; }
.a-nicken .e-lid { animation: e-augen-zu 1.6s both; } .a-nicken .e-lid-zu { animation: e-bogen-zu 1.6s both; } .a-nicken .e-lid-froh { animation: e-bogen-froh 1.6s both; } .a-nicken .e-wange { animation: e-froh-an 1.6s both; }
@keyframes e-nicken { 0%, 100% { transform: translateY(0) rotate(0); } 20% { transform: translateY(5px) rotate(3deg); } 40% { transform: translateY(-2px) rotate(0); } 60% { transform: translateY(5px) rotate(-3deg); } 80% { transform: translateY(0); } }
@keyframes e-nicken-dreh { 0%, 100% { transform: scale(1); } 20%, 60% { transform: scale(1.01, .98); } }
/* Freude klein: Wackeln */
.a-wackeln { --d: 1.5s; }
.a-wackeln .e-dreh { animation: e-wackeln 1.5s ease-in-out both; } .a-wackeln .e-ohr { animation: e-ohr-flattern 1.5s ease-in-out both; } .a-wackeln .e-kopf { animation: e-wackeln-kopf 1.5s ease-in-out both; }
.a-wackeln .e-lid { animation: e-augen-zu 1.5s both; } .a-wackeln .e-lid-zu { animation: e-bogen-zu 1.5s both; } .a-wackeln .e-lid-froh { animation: e-bogen-froh 1.5s both; } .a-wackeln .e-wange { animation: e-froh-an 1.5s both; }
@keyframes e-wackeln { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(-7deg); } 35% { transform: rotate(7deg); } 55% { transform: rotate(-6deg); } 75% { transform: rotate(5deg); } }
@keyframes e-wackeln-kopf { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(6deg); } 35% { transform: rotate(-6deg); } 55% { transform: rotate(5deg); } 75% { transform: rotate(-4deg); } }
/* Zwinkern */
.a-zwinkern { --d: 1.8s; }
.a-zwinkern .e-lid-l { animation: e-zwinkern 1.8s both; } .a-zwinkern .e-glitzer { animation: e-sichtbar 1.8s both; }
.a-zwinkern .e-glitz1 { transform: translate(44px, 70px); animation: e-glitzern .8s .5s 1 both; } .a-zwinkern .e-glitz2, .a-zwinkern .e-glitz3 { display: none; }
.a-zwinkern .e-kopf { animation: e-zwink-kopf 1.8s ease-in-out both; } .a-zwinkern .e-wange { animation: e-froh-an 1.8s both; }
.a-zwinkern .e-lid-l .e-lid-zu { opacity: 1; }
@keyframes e-zwinkern { 0%, 18%, 80%, 100% { transform: scaleY(0); } 28%, 62% { transform: scaleY(1); } }
@keyframes e-zwink-kopf { 0%, 100% { transform: rotate(0); } 25%, 65% { transform: rotate(5deg); } }
/* Freude groß: doppelter Hochsprung */
.a-doppelhupf { --d: 2.8s; }
.a-doppelhupf .e-hub { animation: e-doppelhupf 2.8s both; } .a-doppelhupf .e-fluegel-l { animation: e-dh-fl-l 2.8s both; } .a-doppelhupf .e-fluegel-r { animation: e-dh-fl-r 2.8s both; }
.a-doppelhupf .e-konfetti { animation: e-sichtbar 2.8s both; } .a-doppelhupf .e-k { animation: e-konf 1.8s linear infinite both; animation-delay: calc(var(--v) * .5s + .4s); }
.a-doppelhupf .e-lid { animation: e-augen-zu 2.8s both; } .a-doppelhupf .e-lid-zu { animation: e-bogen-zu 2.8s both; } .a-doppelhupf .e-lid-froh { animation: e-bogen-froh 2.8s both; } .a-doppelhupf .e-wange { animation: e-froh-an 2.8s both; }
@keyframes e-doppelhupf { 0%, 8% { transform: translateY(0); } 24% { transform: translateY(-46px); } 42% { transform: translateY(0); } 50% { transform: translateY(3px); } 64% { transform: translateY(-62px); } 84% { transform: translateY(0); } 90% { transform: translateY(3px); } 100% { transform: translateY(0); } }
@keyframes e-dh-fl-l { 0%, 8%, 90%, 100% { transform: rotate(0); } 24%, 64% { transform: rotate(150deg); } 42% { transform: rotate(20deg); } 84% { transform: rotate(40deg); } }
@keyframes e-dh-fl-r { 0%, 8%, 90%, 100% { transform: rotate(0); } 24%, 64% { transform: rotate(-150deg); } 42% { transform: rotate(-20deg); } 84% { transform: rotate(-40deg); } }
/* Freude groß: Konfetti-Kanone */
.a-konfetti { --d: 3.2s; }
.a-konfetti .e-konfetti { animation: e-sichtbar 3.2s both; } .a-konfetti .e-k { animation: e-konf 2s linear infinite both; animation-delay: calc(var(--v) * .5s); }
.a-konfetti .e-fluegel-l { animation: e-fh-l 3.2s ease-in-out both; } .a-konfetti .e-fluegel-r { animation: e-fh-r 3.2s ease-in-out both; }
.a-konfetti .e-hub { animation: e-hupf 3.2s both; } .a-konfetti .e-kopf { animation: e-fh-kopf 3.2s ease-in-out both; }
.a-konfetti .e-lid { animation: e-augen-zu 3.2s both; } .a-konfetti .e-lid-zu { animation: e-bogen-zu 3.2s both; } .a-konfetti .e-lid-froh { animation: e-bogen-froh 3.2s both; } .a-konfetti .e-wange { animation: e-froh-an 3.2s both; }
/* Freude groß: Jubel (Flügel im Wechsel + Füße) */
.a-jubel { --d: 2.6s; }
.a-jubel .e-fluegel-l { animation: e-jubel-l .65s ease-in-out 4; } .a-jubel .e-fluegel-r { animation: e-jubel-r .65s ease-in-out 4; }
.a-jubel .e-hub { animation: e-jubel-hub .65s ease-in-out 4; } .a-jubel .e-kopf { animation: e-jubel-kopf .65s ease-in-out 4; }
.a-jubel .e-lid { animation: e-augen-zu 2.6s both; } .a-jubel .e-lid-zu { animation: e-bogen-zu 2.6s both; } .a-jubel .e-lid-froh { animation: e-bogen-froh 2.6s both; } .a-jubel .e-wange { animation: e-froh-an 2.6s both; }
.a-jubel .e-glitzer { animation: e-sichtbar 2.6s both; }
.a-jubel .e-glitz1 { transform: translate(34px, 50px); animation: e-glitzern .7s .2s 3 both; } .a-jubel .e-glitz2 { transform: translate(166px, 50px); animation: e-glitzern .7s .45s 3 both; } .a-jubel .e-glitz3 { transform: translate(100px, 8px); animation: e-glitzern .7s .7s 3 both; }
@keyframes e-jubel-l { 0%, 100% { transform: rotate(150deg); } 50% { transform: rotate(10deg); } }
@keyframes e-jubel-r { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(-150deg); } }
@keyframes e-jubel-hub { 0%, 100% { transform: translateY(0); } 25% { transform: translateY(-12px); } 50% { transform: translateY(0); } 75% { transform: translateY(-12px); } }
@keyframes e-jubel-kopf { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
/* Freude groß: Herzen */
.a-herzen { --d: 3s; }
.a-herzen .e-herzen { animation: e-sichtbar-ab-herz 3s both; } .a-herzen .e-herz { animation: e-herz-auf 1.8s .2s ease-out 2 both; }
.a-herzen .e-herz1 { --x: -20px; } .a-herzen .e-herz2 { --x: 10px; animation-delay: .6s; } .a-herzen .e-herz3 { --x: 40px; animation-delay: 1s; }
.a-herzen .e-fluegel-l { animation: e-herz-arm-l 3s ease-in-out both; } .a-herzen .e-fluegel-r { animation: e-herz-arm-r 3s ease-in-out both; }
.a-herzen .e-kopf { animation: e-herz-kopf 3s ease-in-out both; } .a-herzen .e-dreh { animation: e-herz-dreh 3s ease-in-out both; }
.a-herzen .e-lid { animation: e-augen-zu 3s both; } .a-herzen .e-lid-zu { animation: e-bogen-zu 3s both; } .a-herzen .e-lid-froh { animation: e-bogen-froh 3s both; } .a-herzen .e-wange { animation: e-froh-an 3s both; }
@keyframes e-sichtbar-ab-herz { 0% { opacity: 0; } 4%, 90% { opacity: 1; } 100% { opacity: 0; } }
@keyframes e-herz-arm-l { 0%, 100% { transform: rotate(0); } 20%, 80% { transform: rotate(-24deg); } } @keyframes e-herz-arm-r { 0%, 100% { transform: rotate(0); } 20%, 80% { transform: rotate(24deg); } }
@keyframes e-herz-kopf { 0%, 100% { transform: rotate(0); } 25%, 75% { transform: rotate(-6deg) translateY(2px); } 50% { transform: rotate(6deg) translateY(2px); } }
@keyframes e-herz-dreh { 0%, 100% { transform: scale(1); } 30%, 70% { transform: scale(1.03, .98); } }
/* Freude mittel: Klatschen */
.a-klatschen { --d: 2.4s; }
.a-klatschen .e-fluegel-l { animation: e-klatsch-l .6s ease-in-out 4; } .a-klatschen .e-fluegel-r { animation: e-klatsch-r .6s ease-in-out 4; }
.a-klatschen .e-kopf { animation: e-nicken 2.4s ease-in-out both; }
.a-klatschen .e-lid { animation: e-augen-zu 2.4s both; } .a-klatschen .e-lid-zu { animation: e-bogen-zu 2.4s both; } .a-klatschen .e-lid-froh { animation: e-bogen-froh 2.4s both; } .a-klatschen .e-wange { animation: e-froh-an 2.4s both; }
.a-klatschen .e-glitzer { animation: e-sichtbar 2.4s both; }
.a-klatschen .e-glitz1 { transform: translate(100px, 150px); animation: e-glitzern .6s .3s 4 both; } .a-klatschen .e-glitz2, .a-klatschen .e-glitz3 { display: none; }
@keyframes e-klatsch-l { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(-38deg) translateX(10px); } }
@keyframes e-klatsch-r { 0%, 100% { transform: rotate(4deg); } 50% { transform: rotate(38deg) translateX(-10px); } }
/* Freude klein (1 Stern): Aufatmen */
.a-aufatmen { --d: 2.8s; }
.a-aufatmen .e-dreh { animation: e-aufatmen 2.8s ease-in-out both; } .a-aufatmen .e-fluegel-r { animation: e-aufatmen-stirn 2.8s ease-in-out both; }
.a-aufatmen .e-kopf { animation: e-aufatmen-kopf 2.8s ease-in-out both; }
.a-aufatmen .e-lid { animation: e-augen-zu-kurz 2.8s both; } .a-aufatmen .e-lid-zu { animation: e-bogen-zu 2.8s both; } .a-aufatmen .e-lid-froh { animation: e-bogen-froh 2.8s both; } .a-aufatmen .e-wange { animation: e-froh-an 2.8s both; }
.a-aufatmen .e-schnabel-unten { animation: e-aufatmen-schnabel 2.8s both; }
@keyframes e-aufatmen { 0%, 100% { transform: scale(1); } 25%, 35% { transform: scale(1.05, 1.07); } 60% { transform: scale(.97, .96); } 80% { transform: scale(1); } }
@keyframes e-aufatmen-stirn { 0%, 100% { transform: rotate(0); } 40%, 62% { transform: rotate(-150deg); } }
@keyframes e-aufatmen-kopf { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-4deg) translateY(-3px); } 60% { transform: rotate(3deg) translateY(2px); } }
@keyframes e-aufatmen-schnabel { 0%, 24%, 64%, 100% { transform: translateY(0); } 34%, 54% { transform: translateY(5px); } }

/* Nachdenken / Aufmuntern (nie vorwurfsvoll) */
.a-kopf-schief { --d: 2.6s; }
.a-kopf-schief .e-kopf { animation: e-ks-kopf 2.6s ease-in-out both; } .a-kopf-schief .e-frage { animation: e-ks-frage 2.6s both; transform-origin: 160px 34px; }
.a-kopf-schief .e-pupille { animation: e-ks-blick 2.6s both; } .a-kopf-schief .e-braue-l { animation: e-ks-braue 2.6s both; }
@keyframes e-ks-kopf { 0%, 100% { transform: rotate(0); } 25%, 75% { transform: rotate(-12deg) translateY(2px); } }
@keyframes e-ks-frage { 0%, 20% { opacity: 0; transform: scale(.3); } 32%, 80% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } }
@keyframes e-ks-blick { 0%, 100% { transform: translate(0, 0); } 25%, 75% { transform: translate(-5px, -6px); } }
@keyframes e-ks-braue { 0%, 100% { transform: translateY(0); } 25%, 75% { transform: translateY(-4px) rotate(-6deg); } }
.a-kratzen { --d: 2.8s; }
.a-kratzen .e-fluegel-l { animation: e-kratz-arm 2.8s ease-in-out both; } .a-kratzen .e-kopf { animation: e-kratz-kopf 2.8s ease-in-out both; } .a-kratzen .e-frage { animation: e-ks-frage 2.8s both; transform-origin: 160px 34px; }
.a-kratzen .e-pupille { animation: e-ks-blick 2.8s both; }
@keyframes e-kratz-arm { 0%, 10%, 100% { transform: rotate(0); } 28% { transform: rotate(138deg); } 38% { transform: rotate(150deg); } 48% { transform: rotate(136deg); } 58% { transform: rotate(150deg); } 68% { transform: rotate(138deg); } 82% { transform: rotate(0); } }
@keyframes e-kratz-kopf { 0%, 100% { transform: rotate(0); } 28%, 70% { transform: rotate(6deg); } }
.a-mut { --d: 2.6s; }
.a-mut .e-dreh { animation: e-mut-dreh 2.6s ease-in-out both; } .a-mut .e-fluegel-l { animation: e-mut-l 2.6s ease-in-out both; } .a-mut .e-fluegel-r { animation: e-mut-r 2.6s ease-in-out both; }
.a-mut .e-kopf { animation: e-mut-kopf 2.6s ease-in-out both; } .a-mut .e-glitzer { animation: e-sichtbar 2.6s both; }
.a-mut .e-glitz1 { transform: translate(40px, 150px); animation: e-glitzern .7s .7s 2 both; } .a-mut .e-glitz2 { transform: translate(160px, 150px); animation: e-glitzern .7s 1s 2 both; } .a-mut .e-glitz3 { display: none; }
.a-mut .e-lid-l { animation: e-zwinkern 2.6s 1.6s both; } .a-mut .e-wange { animation: e-froh-an 2.6s both; }
@keyframes e-mut-dreh { 0%, 100% { transform: scale(1); } 20%, 75% { transform: scale(1.06, 1.08); } }
@keyframes e-mut-l { 0%, 100% { transform: rotate(0); } 20%, 75% { transform: rotate(88deg); } 40% { transform: rotate(80deg); } 55% { transform: rotate(92deg); } }
@keyframes e-mut-r { 0%, 100% { transform: rotate(0); } 20%, 75% { transform: rotate(-88deg); } 40% { transform: rotate(-80deg); } 55% { transform: rotate(-92deg); } }
@keyframes e-mut-kopf { 0%, 100% { transform: rotate(0); } 20%, 75% { transform: translateY(-4px) rotate(3deg); } }
.a-lupe-kurz { --d: 3.2s; }
.a-lupe-kurz .e-lupe { animation: e-lupe-kurz 3.2s ease-in-out both; } .a-lupe-kurz .e-pupille { animation: e-lupe-blick 3.2s ease-in-out both; } .a-lupe-kurz .e-kopf { animation: e-ks-kopf 3.2s ease-in-out both; }
@keyframes e-lupe-kurz { 0% { opacity: 0; transform: translate(60px, 30px) scale(.5); } 14% { opacity: 1; transform: translate(0, 0) scale(1); } 40% { transform: translate(-34px, 6px); } 66% { transform: translate(-8px, 0); } 80% { opacity: 1; } 94%, 100% { opacity: 0; transform: translate(50px, 40px) scale(.5); } }
@keyframes e-lupe-blick { 0%, 10%, 90%, 100% { transform: translate(0, 0); } 20%, 40% { transform: translate(-6px, 3px); } 60%, 80% { transform: translate(5px, -3px); } }

/* Tipp */
.a-gluehbirne { --d: 2.8s; }
.a-gluehbirne .e-glueh { animation: e-gb 2.8s both; transform-origin: 100px -10px; } .a-gluehbirne .e-strahlen { animation: e-gb-strahl .5s ease-in-out 5; transform-origin: 100px -10px; }
.a-gluehbirne .e-pupille { animation: e-gb-blick 2.8s both; } .a-gluehbirne .e-braue { animation: e-gb-braue 2.8s both; } .a-gluehbirne .e-kopf { animation: e-gb-kopf 2.8s both; }
@keyframes e-gb { 0% { opacity: 0; transform: scale(.2) translateY(20px); } 16% { opacity: 1; transform: scale(1.25); } 24%, 86% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } }
@keyframes e-gb-strahl { 0%, 100% { opacity: .5; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes e-gb-blick { 0%, 100% { transform: translate(0, 0); } 15%, 80% { transform: translate(0, -7px); } }
@keyframes e-gb-braue { 0%, 100% { transform: translateY(0); } 15%, 80% { transform: translateY(-4px); } }
@keyframes e-gb-kopf { 0%, 100% { transform: rotate(0); } 15%, 80% { transform: rotate(-3deg) translateY(-2px); } }
.a-fluestern { --d: 3s; }
.a-fluestern .e-fluegel-r { animation: e-fl-arm 3s ease-in-out both; } .a-fluestern .e-kopf { animation: e-fl-kopf 3s ease-in-out both; }
.a-fluestern .e-glueh { animation: e-fl-bulb 3s both; transform-origin: 100px -10px; } .a-fluestern .e-pupille { animation: e-fl-blick 3s both; }
@keyframes e-fl-arm { 0%, 100% { transform: rotate(0); } 18%, 80% { transform: rotate(-128deg); } }
@keyframes e-fl-kopf { 0%, 100% { transform: rotate(0); } 18%, 80% { transform: rotate(8deg) translateX(3px); } }
@keyframes e-fl-bulb { 0%, 40% { opacity: 0; transform: scale(.2); } 52%, 84% { opacity: 1; transform: scale(.9); } 100% { opacity: 0; } }
@keyframes e-fl-blick { 0%, 100% { transform: translate(0, 0); } 18%, 38% { transform: translate(7px, 0); } 52%, 80% { transform: translate(0, -7px); } }
.a-lichtblick { --d: 3s; }
.a-lichtblick .e-glueh { animation: e-gb 3s both; transform-origin: 100px -10px; } .a-lichtblick .e-strahlen { animation: e-gb-strahl .5s ease-in-out 6; transform-origin: 100px -10px; }
.a-lichtblick .e-glitzer { animation: e-sichtbar 3s both; }
.a-lichtblick .e-glitz1 { transform: translate(50px, 40px); animation: e-glitzern .8s .5s 2 both; } .a-lichtblick .e-glitz2 { transform: translate(150px, 40px); animation: e-glitzern .8s .8s 2 both; } .a-lichtblick .e-glitz3 { transform: translate(100px, -12px); animation: e-glitzern .8s 1.1s 2 both; }
.a-lichtblick .e-lid { animation: e-augen-zu-kurz 3s both; } .a-lichtblick .e-lid-zu { animation: e-bogen-zu 3s both; } .a-lichtblick .e-lid-froh { animation: e-bogen-froh 3s both; }
.a-lichtblick .e-kopf { animation: e-gb-kopf 3s both; }

/* Lösung angeschaut: aufmunternd */
.a-sonne { --d: 3.4s; }
.a-sonne .e-sonne { animation: e-sonne-ganz 3.4s both; } .a-sonne .e-sonne-strahlen { animation: e-sonne-dreh 4s linear infinite; transform-origin: 164px 30px; }
.a-sonne .e-lid { animation: e-augen-zu 3.4s both; } .a-sonne .e-lid-zu { animation: e-bogen-zu 3.4s both; } .a-sonne .e-lid-froh { animation: e-bogen-froh 3.4s both; } .a-sonne .e-wange { animation: e-froh-an 3.4s both; }
.a-sonne .e-kopf { animation: e-herz-kopf 3.4s ease-in-out both; } .a-sonne .e-fluegel-r { animation: e-sonne-wink 3.4s ease-in-out both; }
@keyframes e-sonne-ganz { 0% { opacity: 0; transform: translate(40px, -30px) scale(.4); } 18%, 84% { opacity: 1; transform: translate(0, 0) scale(1); } 100% { opacity: 0; } }
@keyframes e-sonne-wink { 0%, 100% { transform: rotate(0); } 25%, 35% { transform: rotate(-110deg); } 45%, 80% { transform: rotate(-125deg); } 55% { transform: rotate(-108deg); } 65% { transform: rotate(-125deg); } }
.a-trost { --d: 3.2s; }
.a-trost .e-fluegel-l { animation: e-trost-l 3.2s ease-in-out both; } .a-trost .e-fluegel-r { animation: e-trost-r 3.2s ease-in-out both; }
.a-trost .e-herzen { animation: e-sichtbar-ab-herz 3.2s both; } .a-trost .e-herz { animation: e-herz-auf 1.8s .8s ease-out both; }
.a-trost .e-herz1 { --x: -16px; } .a-trost .e-herz2 { --x: 12px; } .a-trost .e-herz3 { --x: 38px; }
.a-trost .e-kopf { animation: e-herz-kopf 3.2s ease-in-out both; }
.a-trost .e-lid { animation: e-augen-zu 3.2s both; } .a-trost .e-lid-zu { animation: e-bogen-zu 3.2s both; } .a-trost .e-lid-froh { animation: e-bogen-froh 3.2s both; } .a-trost .e-wange { animation: e-froh-an 3.2s both; }
@keyframes e-trost-l { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(75deg); } 45%, 70% { transform: rotate(-30deg); } } @keyframes e-trost-r { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-75deg); } 45%, 70% { transform: rotate(30deg); } }

/* Feiern (Medaille, neue Stufe) */
.a-medaille-glanz { --d: 4s; }
.a-medaille-glanz .e-medaille { animation: e-kro-medaille 4s both; transform-origin: 100px 118px; }
.a-medaille-glanz .e-glitzer { animation: e-sichtbar 4s both; }
.a-medaille-glanz .e-glitz1 { transform: translate(100px, 150px); animation: e-glitzern .8s .8s 3 both; } .a-medaille-glanz .e-glitz2 { transform: translate(84px, 160px); animation: e-glitzern .8s 1.2s 3 both; } .a-medaille-glanz .e-glitz3 { transform: translate(116px, 144px); animation: e-glitzern .8s 1.5s 3 both; }
.a-medaille-glanz .e-hub { animation: e-hupf 4s both; } .a-medaille-glanz .e-fluegel-l { animation: e-hupf-fl-l 4s both; } .a-medaille-glanz .e-fluegel-r { animation: e-hupf-fl-r 4s both; }
.a-medaille-glanz .e-lid { animation: e-augen-zu 4s both; } .a-medaille-glanz .e-lid-zu { animation: e-bogen-zu 4s both; } .a-medaille-glanz .e-lid-froh { animation: e-bogen-froh 4s both; } .a-medaille-glanz .e-wange { animation: e-froh-an 4s both; }
.a-feuerwerk { --d: 4s; }
.a-feuerwerk .e-sterne { animation: e-sichtbar 4s both; } .a-feuerwerk .e-stern { animation: e-stern-knall 1.4s ease-out infinite both; }
.a-feuerwerk .e-stern1 { --x: -90px; --y: -70px; } .a-feuerwerk .e-stern2 { --x: 0px; --y: -110px; animation-delay: .1s; } .a-feuerwerk .e-stern3 { --x: 90px; --y: -70px; animation-delay: .2s; } .a-feuerwerk .e-stern4 { --x: -110px; --y: 10px; animation-delay: .3s; }
.a-feuerwerk .e-stern5 { --x: 110px; --y: 10px; animation-delay: .15s; } .a-feuerwerk .e-stern6 { --x: -60px; --y: -100px; animation-delay: .25s; } .a-feuerwerk .e-stern7 { --x: 60px; --y: -100px; animation-delay: .05s; } .a-feuerwerk .e-stern8 { --x: 0px; --y: 40px; animation-delay: .35s; }
.a-feuerwerk .e-konfetti { animation: e-sichtbar 4s both; } .a-feuerwerk .e-k { animation: e-konf 2.2s linear infinite both; animation-delay: calc(var(--v) * 1s + .6s); }
.a-feuerwerk .e-hub { animation: e-doppelhupf 4s both; } .a-feuerwerk .e-fluegel-l { animation: e-dh-fl-l 4s both; } .a-feuerwerk .e-fluegel-r { animation: e-dh-fl-r 4s both; }
.a-feuerwerk .e-lid { animation: e-augen-zu 4s both; } .a-feuerwerk .e-lid-zu { animation: e-bogen-zu 4s both; } .a-feuerwerk .e-lid-froh { animation: e-bogen-froh 4s both; } .a-feuerwerk .e-wange { animation: e-froh-an 4s both; }
@keyframes e-stern-knall { 0% { transform: translate(100px, 80px) scale(.2) rotate(0); opacity: 1; } 70% { opacity: 1; } 100% { transform: translate(calc(100px + var(--x)), calc(80px + var(--y))) scale(1.3) rotate(240deg); opacity: 0; } }

/* Pause: Tee trinken */
.a-tee { --d: 5s; }
.a-tee .e-tasse { animation: e-tee-tasse 5s both; } .a-tee .e-dampf { animation: e-tee-tasse 5s both; } .a-tee .e-dampf1, .a-tee .e-dampf2 { animation: e-dampf 1.6s ease-in-out infinite both; } .a-tee .e-dampf2 { animation-delay: .6s; }
.a-tee .e-fluegel-r { animation: e-eis-arm 5s ease-in-out both; } .a-tee .e-kopf { animation: e-tee-kopf 5s ease-in-out both; }
.a-tee .e-lid { animation: e-tee-lider 5s both; } .a-tee .e-lid-zu { animation: e-bogen-zu 5s both; } .a-tee .e-lid-froh { animation: e-bogen-froh 5s both; } .a-tee .e-wange { animation: e-froh-an 5s both; }
@keyframes e-tee-tasse { 0% { opacity: 0; transform: translate(20px, 20px); } 10% { opacity: 1; transform: translate(0, 0); } 36% { transform: translate(0, 0); } 46%, 62% { transform: translate(-8px, -14px) rotate(-14deg); } 72%, 88% { opacity: 1; transform: translate(0, 0); } 98%, 100% { opacity: 0; transform: translate(10px, 10px); } }
@keyframes e-dampf { 0% { opacity: 0; transform: translateY(8px); } 30% { opacity: .9; } 100% { opacity: 0; transform: translateY(-16px); } }
@keyframes e-tee-kopf { 0%, 30%, 100% { transform: rotate(0); } 46%, 62% { transform: rotate(-5deg) translateY(3px); } }
@keyframes e-tee-lider { 0%, 44% { transform: scaleY(0); } 50%, 60% { transform: scaleY(1); } 66%, 100% { transform: scaleY(0); } }

/* Tippen auf die Eule: Kichern, Staunen */
.a-kichern { --d: 2s; }
.a-kichern .e-dreh { animation: e-kichern .22s ease-in-out 8; } .a-kichern .e-kopf { animation: e-kichern-kopf .22s ease-in-out 8; }
.a-kichern .e-lid { animation: e-augen-zu 2s both; } .a-kichern .e-lid-zu { animation: e-bogen-zu 2s both; } .a-kichern .e-lid-froh { animation: e-bogen-froh 2s both; } .a-kichern .e-wange { animation: e-froh-an 2s both; }
.a-kichern .e-schnabel-unten { animation: e-sprechen .22s ease-in-out 8; } .a-kichern .e-mund { opacity: 1; }
@keyframes e-kichern { 0%, 100% { transform: translateX(0) rotate(0); } 25% { transform: translateX(-2px) rotate(-2deg); } 75% { transform: translateX(2px) rotate(2deg); } }
@keyframes e-kichern-kopf { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-3deg) translateY(1px); } }
.a-staunen { --d: 2.4s; }
.a-staunen .e-ausruf { animation: e-det-ausruf 2.4s both; transform-origin: 160px 34px; } .a-staunen .e-hub { animation: e-staunen-hub 2.4s both; }
.a-staunen .e-braue { animation: e-staunen-braue 2.4s both; } .a-staunen .e-schnabel-unten { animation: e-staunen-schnabel 2.4s both; } .a-staunen .e-mund { animation: e-staunen-mund 2.4s both; }
.a-staunen .e-fluegel-l { animation: e-staunen-l 2.4s both; } .a-staunen .e-fluegel-r { animation: e-staunen-r 2.4s both; } .a-staunen .e-ohr { animation: e-ohr-flattern 2.4s both; }
@keyframes e-staunen-hub { 0%, 6% { transform: translateY(0); } 16% { transform: translateY(-18px); } 28%, 100% { transform: translateY(0); } }
@keyframes e-staunen-braue { 0%, 100% { transform: translateY(0); } 12%, 80% { transform: translateY(-6px); } }
@keyframes e-staunen-schnabel { 0%, 100% { transform: translateY(0); } 12%, 80% { transform: translateY(5px); } }
@keyframes e-staunen-mund { 0%, 100% { opacity: 0; } 12%, 80% { opacity: 1; } }
@keyframes e-staunen-l { 0%, 100% { transform: rotate(0); } 12%, 70% { transform: rotate(40deg); } } @keyframes e-staunen-r { 0%, 100% { transform: rotate(0); } 12%, 70% { transform: rotate(-40deg); } }

/* ===================================================================================================================================
   Weniger Bewegung: keine Dauerbewegung und keine Szenen – nur ruhige Zustandswechsel (Augen zu/auf, Sprechblase).
   =================================================================================================================================== */
/* ===================================================================================================================================
   Tätigkeiten im Zimmer (Plätze und Möbel: siehe zimmer.py, static/zimmer.css). Nutzen dieselben Teile der Eule wie alle anderen Animationen.
   =================================================================================================================================== */
@keyframes e-note-auf { 0% { transform: translate(0, 0) scale(.5); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(var(--x, 20px), -70px) scale(1.1); opacity: 0; } }
@keyframes e-lachen-an { 0%, 100% { transform: scaleY(0); } 10%, 90% { transform: scaleY(1); } }

/* Klavier spielen: die Flügel tippen abwechselnd, der Kopf wippt im Takt, Noten steigen auf */
.a-klavier { --d: 5s; }
.a-klavier .e-fluegel-l { animation: e-klav-l .7s ease-in-out infinite; } .a-klavier .e-fluegel-r { animation: e-klav-r .7s ease-in-out infinite .35s; }
.a-klavier .e-kopf { animation: e-klav-kopf 1.4s ease-in-out infinite; }
.a-klavier .e-noten { animation: e-sichtbar 5s both; } .a-klavier .e-note { animation: e-note-auf 2s ease-out infinite both; }
.a-klavier .e-note1 { --x: -24px; } .a-klavier .e-note2 { --x: 10px; animation-delay: .7s; } .a-klavier .e-note3 { --x: 34px; animation-delay: 1.4s; }
.a-klavier .e-lid { animation: e-augen-zu 5s both; } .a-klavier .e-lid-zu { animation: e-bogen-zu 5s both; } .a-klavier .e-lid-froh { animation: e-bogen-froh 5s both; } .a-klavier .e-wange { animation: e-froh-an 5s both; }
@keyframes e-klav-l { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(-26deg); } } @keyframes e-klav-r { 0%, 100% { transform: rotate(6deg); } 50% { transform: rotate(26deg); } }
@keyframes e-klav-kopf { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg) translateY(2px); } }

/* Pflanze gießen: die Gießkanne kippt, Tropfen fallen */
.a-giessen { --d: 5s; }
.a-giessen .e-kanne { animation: e-kanne-zeigen 5s ease-in-out both; transform-origin: 150px 140px; }
.a-giessen .e-giess { animation: e-sichtbar 5s both; } .a-giessen .e-gtropf { animation: e-gtropf .6s linear infinite; animation-delay: calc(var(--v, 0) * 1s); }
.a-giessen .e-gtropf1 { --v: 0; } .a-giessen .e-gtropf2 { --v: -.2; } .a-giessen .e-gtropf3 { --v: -.4; }
.a-giessen .e-kopf { animation: e-giess-kopf 5s ease-in-out both; }
.a-giessen .e-lid { animation: e-augen-zu 5s both; } .a-giessen .e-lid-zu { animation: e-bogen-zu 5s both; } .a-giessen .e-lid-froh { animation: e-bogen-froh 5s both; } .a-giessen .e-wange { animation: e-froh-an 5s both; }
@keyframes e-kanne-zeigen { 0% { opacity: 0; transform: translate(20px, 20px); } 12% { opacity: 1; transform: translate(0, 0); } 30%, 84% { opacity: 1; transform: rotate(-24deg); } 96%, 100% { opacity: 0; transform: translate(0, 10px); } }
@keyframes e-gtropf { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(46px); opacity: .1; } }
@keyframes e-giess-kopf { 0%, 100% { transform: rotate(0); } 30%, 84% { transform: rotate(5deg) translateY(2px); } }

/* Schreiben und Malen: ein Stift im Flügel kritzelt, der Kopf neigt sich */
.a-schreiben { --d: 5s; }
.a-schreiben .e-stift { animation: e-sichtbar 5s both; }
.a-schreiben .e-fluegel-r { animation: e-schreib-arm .5s ease-in-out infinite; }
.a-schreiben .e-kopf { animation: e-schreib-kopf 5s ease-in-out both; } .a-schreiben .e-pupille { animation: e-schreib-blick 5s both; }
@keyframes e-schreib-arm { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(-22deg) translateX(-2px); } }
@keyframes e-schreib-kopf { 0%, 100% { transform: rotate(0); } 12%, 88% { transform: rotate(-6deg) translateY(4px); } }
@keyframes e-schreib-blick { 0%, 100% { transform: translate(0, 0); } 12%, 88% { transform: translate(5px, 6px); } }

/* Fische füttern: ein Flügel streut Futter, die Flocken sinken */
.a-fuettern { --d: 4.4s; }
.a-fuettern .e-fluegel-r { animation: e-fuett-arm 4.4s ease-in-out both; }
.a-fuettern .e-futter { animation: e-sichtbar 4.4s both; } .a-fuettern .e-flocke { animation: e-flocke 1.4s ease-in infinite both; animation-delay: calc(var(--v, 0) * 1s + .9s); }
.a-fuettern .e-flocke1 { --v: 0; } .a-fuettern .e-flocke2 { --v: .25; } .a-fuettern .e-flocke3 { --v: .5; } .a-fuettern .e-flocke4 { --v: .15; }
.a-fuettern .e-kopf { animation: e-nicken 4.4s ease-in-out both; }
@keyframes e-fuett-arm { 0%, 100% { transform: rotate(0); } 18% { transform: rotate(-62deg); } 30% { transform: rotate(-48deg); } 40% { transform: rotate(-64deg); } 52%, 70% { transform: rotate(-50deg); } }
@keyframes e-flocke { 0% { transform: translate(0, 0); opacity: 1; } 100% { transform: translate(8px, 70px); opacity: 0; } }

/* Vor dem Spiegel: Kopf dreht sich hin und her, ein Flügel richtet die Federn, Glitzer */
.a-spiegeln { --d: 5s; }
.a-spiegeln .e-kopf { animation: e-spiegel-kopf 5s ease-in-out both; } .a-spiegeln .e-dreh { animation: e-spiegel-dreh 5s ease-in-out both; }
.a-spiegeln .e-fluegel-l { animation: e-spiegel-arm 5s ease-in-out both; }
.a-spiegeln .e-glitzer { animation: e-sichtbar 5s both; }
.a-spiegeln .e-glitz1 { transform: translate(60px, 60px); animation: e-glitzern 1s 1.2s 2 both; } .a-spiegeln .e-glitz2 { transform: translate(140px, 70px); animation: e-glitzern 1s 2s 2 both; } .a-spiegeln .e-glitz3 { transform: translate(100px, 30px); animation: e-glitzern 1s 2.8s 1 both; }
.a-spiegeln .e-lid { animation: e-augen-zu-kurz 5s both; } .a-spiegeln .e-lid-zu { animation: e-bogen-zu 5s both; } .a-spiegeln .e-lid-froh { animation: e-bogen-froh 5s both; } .a-spiegeln .e-wange { animation: e-froh-an 5s both; }
@keyframes e-spiegel-kopf { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(-9deg); } 40% { transform: rotate(9deg); } 65% { transform: rotate(-5deg) translateY(2px); } 85% { transform: rotate(0); } }
@keyframes e-spiegel-dreh { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03, .99); } }
@keyframes e-spiegel-arm { 0%, 100% { transform: rotate(0); } 30%, 62% { transform: rotate(128deg); } 46% { transform: rotate(138deg); } }

/* Streicheln: der Flügel gleitet sanft nach vorn, Herzen steigen auf */
.a-streicheln { --d: 4s; }
.a-streicheln .e-fluegel-r { animation: e-streich-arm 1s ease-in-out 4; }
.a-streicheln .e-herzen { animation: e-sichtbar-ab-herz 4s both; } .a-streicheln .e-herz { animation: e-herz-auf 1.8s .2s ease-out 2 both; }
.a-streicheln .e-herz1 { --x: -20px; } .a-streicheln .e-herz2 { --x: 10px; animation-delay: .6s; } .a-streicheln .e-herz3 { --x: 40px; animation-delay: 1s; }
.a-streicheln .e-kopf { animation: e-streich-kopf 4s ease-in-out both; }
.a-streicheln .e-lid { animation: e-augen-zu 4s both; } .a-streicheln .e-lid-zu { animation: e-bogen-zu 4s both; } .a-streicheln .e-lid-froh { animation: e-bogen-froh 4s both; } .a-streicheln .e-wange { animation: e-froh-an 4s both; }
@keyframes e-streich-arm { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(-34deg); } }
@keyframes e-streich-kopf { 0%, 100% { transform: rotate(0); } 15%, 85% { transform: rotate(7deg) translateY(4px); } }

/* Naschen: ein Apfel wandert zum Schnabel, Kopf nickt zufrieden (Pflege: Hunger) */
.a-naschen { --d: 5s; }
.a-naschen .e-apfel { animation: e-eis-zeigen 5s both; }
.a-naschen .e-fluegel-r { animation: e-eis-arm 5s ease-in-out both; }
.a-naschen .e-schnabel-unten { animation: e-eis-lecken 5s both; }
.a-naschen .e-kopf { animation: e-nasch-kopf 5s ease-in-out both; }
.a-naschen .e-lid { animation: e-augen-zu-kurz 5s both; } .a-naschen .e-lid-zu { animation: e-bogen-zu 5s both; } .a-naschen .e-lid-froh { animation: e-bogen-froh 5s both; } .a-naschen .e-wange { animation: e-froh-an 5s both; }
@keyframes e-nasch-kopf { 0%, 20%, 100% { transform: rotate(0); } 28%, 62% { transform: rotate(-4deg) translateY(3px); } 72% { transform: rotate(3deg); } 80% { transform: rotate(-2deg); } }

/* Futter fliegt zur Eule (Mmh, lecker!): ein Symbol landet im Schnabel; nur transform/opacity */
.futter-flug { position: absolute; left: 50%; top: 45%; z-index: 5; font-size: 1.6rem; line-height: 1; pointer-events: none; animation: futter-zur-eule 1.3s ease-in forwards; }
@keyframes futter-zur-eule { 0% { opacity: 0; transform: translate(-260%, -230%) scale(1.4); } 15% { opacity: 1; } 80% { opacity: 1; transform: translate(-45%, -45%) scale(.9); } 100% { opacity: 0; transform: translate(-45%, -40%) scale(.3); } }
.zimmer-steh .futter-flug { font-size: 2.2rem; }

@media (prefers-reduced-motion: reduce) {
  .eule *, .eule-blase { animation: none !important; transition: none !important; }
  .futter-flug { display: none; }
}