/* Hilfsbiene final: Bewegung (Greta, 2026-10-02, für Ida).
   Die Bewegungsklasse steht schon im Kopf jeder SVG-Datei (zum Beispiel class="biene-final bf-huepft").
   Jede bewegte Ebene hat eine innere Hülle mit der Klasse a-NAME, der Bügelrand bewegt sich mit.
   Linien: Biene und Requisiten 8 E, Mimik 6 E, Effekt-Icons, Bewegungsstriche, kleine Teile 4 E (1 E = Bienenbreite / 233).
   Stand 2026-10-02: Flügel exakt wie im Logo (fluegel-links liegt vorn, fluegel-rechts dahinter), keine eigenen Flügelwinkel mehr. */

svg.biene-final [class^="a-"], svg.biene-final [class*=" a-"] { transform-box: view-box; }
svg.biene-final .a-biene { transform-origin: 116px 158px; }
/* Flügel wie im Logo: der linke liegt vorn, der rechte dahinter. Der Flügelschlag dreht um den Ansatz (Mitte der Flügelbasis auf der Rückenlinie). */
svg.biene-final .a-fluegel-rechts { transform-origin: 116.16px 73px; }
svg.biene-final .a-fluegel-links { transform-origin: 75.84px 73px; }
svg.biene-final .a-lupe { transform-origin: 178px 108px; }
svg.biene-final .a-bogen { transform-origin: 244px 130px; }
svg.biene-final .a-warenkorb { transform-origin: 294px 158px; }
/* Teile mit eigener Position (Herz, Stern, Funke, Wolke, Z, Würfel, Dose, kleiner Bogen, Haken) sind um ihren Mittelpunkt gezeichnet: Ursprung 0 0 genügt */

/* beide Flügel spiegelgleich im Takt: erst zueinander, dann nach außen */
@keyframes bf-flatter-r { from { transform: rotate(-8deg); } to { transform: rotate(10deg); } }
@keyframes bf-flatter-l { from { transform: rotate(8deg); } to { transform: rotate(-10deg); } }
@keyframes bf-funkeln { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.15) rotate(8deg); } }
@keyframes bf-gleiten { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(10px); } }
@keyframes bf-dampf { 0% { transform: translate(-4px, 10px) scale(0); } 30% { transform: translate(-1px, 0) scale(0.9); } 80% { transform: translate(5px, -18px) scale(1); } 100% { transform: translate(6px, -22px) scale(0); } }
@keyframes bf-huepf { 0%, 100% { transform: translateY(0) scaleY(1); } 15% { transform: translateY(2px) scaleY(0.96); } 50% { transform: translateY(-16px) scaleY(1.02); } }
@keyframes bf-schwung { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-5px); } }
@keyframes bf-wiegen { 0%, 100% { transform: rotate(-1.5deg); } 50% { transform: rotate(1.5deg); } }
@keyframes bf-scannen { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
@keyframes bf-lupe-wackeln { 0%, 45%, 100% { transform: rotate(0); } 10% { transform: rotate(-12deg); } 20% { transform: rotate(10deg); } 30% { transform: rotate(-6deg); } 38% { transform: rotate(3deg); } }
/* bf-leuchten und bf-blinken entfallen (Deckkraft), die Ampel steht still */
@keyframes bf-schuetteln { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-3deg); } 40% { transform: rotate(3deg); } 60% { transform: rotate(-2deg); } 80% { transform: rotate(1deg); } }
@keyframes bf-dose { 0%, 22% { transform: translateX(-44px); } 33%, 55% { transform: translateX(-22px); } 66%, 100% { transform: translateX(0); } }
@keyframes bf-stufe-b { 0%, 32% { visibility: hidden; } 33%, 100% { visibility: visible; } }
@keyframes bf-stufe-c { 0%, 65% { visibility: hidden; } 66%, 100% { visibility: visible; } }
@keyframes bf-zahl-50 { 0%, 29% { visibility: visible; } 30%, 100% { visibility: hidden; } }
@keyframes bf-zahl-100 { 0%, 32% { visibility: hidden; } 33%, 62% { visibility: visible; } 63%, 100% { visibility: hidden; } }
@keyframes bf-zahl-150 { 0%, 65% { visibility: hidden; } 66%, 100% { visibility: visible; } }
@keyframes bf-wuerfeln { 0% { transform: translateY(0) rotate(0); } 40% { transform: translateY(-14px) rotate(90deg); } 70%, 100% { transform: translateY(0) rotate(180deg); } }
@keyframes bf-rein { 0% { transform: translate(-110px, -70px) rotate(-20deg); visibility: visible; } 55% { transform: translate(0, 0) rotate(0); } 72% { transform: translate(0, 26px); visibility: visible; } 73%, 100% { transform: translate(0, 26px); visibility: hidden; } }
@keyframes bf-haken { 0%, 70% { transform: scale(0); } 80% { transform: scale(1.2); } 88%, 96% { transform: scale(1); } 100% { transform: scale(0); } }
@keyframes bf-raus { 0% { transform: translate(8px, 44px) scale(0) rotate(-10deg); } 15% { transform: translate(6px, 34px) scale(0.6) rotate(-8deg); } 60%, 100% { transform: translate(0, 0) scale(1) rotate(0); } }
@keyframes bf-wellen { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-4px); } }
@keyframes bf-wackeln { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-3deg); } }
@keyframes bf-zett { 0% { transform: translate(-12px, 14px) scale(0); } 25% { transform: translate(-6px, 4px) scale(1); } 80% { transform: translate(6px, -12px) scale(1); } 100% { transform: translate(8px, -14px) scale(0); } }
@keyframes bf-treiben { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }
@keyframes bf-atmen { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.025); } }
@keyframes bf-aufpusten { 0%, 100% { transform: scale(0.87); } 50% { transform: scale(1); } }
@keyframes bf-pfeil-l { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-6px); } }
@keyframes bf-pfeil-r { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }
@keyframes bf-wachsen { from { transform: scale(0.82); } to { transform: scale(1); } }

/* 01 begrüßt: Flügel flattern, Zeichen funkeln */
.bf-flattert .a-fluegel-rechts { animation: bf-flatter-r 520ms ease-in-out infinite alternate; }
.bf-flattert .a-fluegel-links { animation: bf-flatter-l 520ms ease-in-out infinite alternate; }
.bf-funkelt .a-stern-gelb { animation: bf-funkeln 2.4s ease-in-out infinite; }
.bf-funkelt .a-herz { animation: bf-funkeln 2.4s ease-in-out 0.6s infinite; }
.bf-funkelt .a-stern-tuerkis { animation: bf-funkeln 2.4s ease-in-out 1.2s infinite; }
.bf-funkelt .a-funke { animation: bf-funkeln 2.4s ease-in-out 1.8s infinite; }

/* 02 arbeitet: Biene gleitet hin und her, Dampf steigt aus der Sohle */
.bf-buegelt .a-biene { animation: bf-gleiten 1.6s ease-in-out infinite; }
.bf-buegelt .a-fluegel-rechts { animation: bf-flatter-r 200ms ease-in-out infinite alternate; }
.bf-buegelt .a-fluegel-links { animation: bf-flatter-l 200ms ease-in-out infinite alternate; }
.bf-buegelt .a-dampf-1 { animation: bf-dampf 1.8s ease-out infinite; }
.bf-buegelt .a-dampf-2 { animation: bf-dampf 1.8s ease-out 0.6s infinite; }
.bf-buegelt .a-dampf-3 { animation: bf-dampf 1.8s ease-out 1.2s infinite; }

/* 03 freut sich: hüpft, Herzen und Sterne funkeln */
.bf-huepft .a-biene { animation: bf-huepf 1.1s cubic-bezier(0.25, 1, 0.5, 1) infinite; }
.bf-huepft .a-schwung { animation: bf-schwung 1.1s ease-in-out infinite; }
.bf-huepft .a-herz-1, .bf-huepft .a-stern-2 { animation: bf-funkeln 2.2s ease-in-out infinite; }
.bf-huepft .a-stern-1, .bf-huepft .a-herz-3 { animation: bf-funkeln 2.2s ease-in-out 0.7s infinite; }
.bf-huepft .a-herz-2 { animation: bf-funkeln 2.2s ease-in-out 1.4s infinite; }

/* 04 Druckcheck grün: zufrieden, wiegt sich leicht, Grün leuchtet ruhig */
.bf-passt .a-biene { animation: bf-wiegen 3s ease-in-out infinite; }
/* 04 Druckcheck orange: Lupe wandert, Die Lupe wackelt kurz (kein Blinken). Das ist zugleich "prüft gerade". */
.bf-prueft .a-lupe { animation: bf-lupe-wackeln 2.4s ease-in-out infinite; }
/* 04 Druckcheck rot: schüttelt freundlich den Kopf, Rot pulsiert, das Schloss bleibt */
.bf-sorgt .a-biene { animation: bf-schuetteln 1.8s ease-in-out infinite; }

/* 06 Bogen wächst: Dose rollt in drei Stufen, das Band läuft aus, die Zahl steigt (50, 100, 150) */
.bf-waechst .a-dose { animation: bf-dose 4.5s ease-in-out infinite; }
.bf-waechst .a-band-b { animation: bf-stufe-b 4.5s ease-in-out infinite; }
.bf-waechst .a-band-c { animation: bf-stufe-c 4.5s ease-in-out infinite; }
.bf-waechst .a-zahl-50 { animation: bf-zahl-50 4.5s ease-in-out infinite; }
.bf-waechst .a-zahl-100 { animation: bf-zahl-100 4.5s ease-in-out infinite; }
.bf-waechst .a-zahl-150 { animation: bf-zahl-150 4.5s ease-in-out infinite; }

/* 07 würfelt: Würfel springen und drehen sich */
.bf-wuerfelt .a-wuerfel-gross { animation: bf-wuerfeln 1.6s ease-in-out infinite; }
.bf-wuerfelt .a-wuerfel-klein { animation: bf-wuerfeln 1.6s ease-in-out 0.4s infinite; }
.bf-wuerfelt .a-stern, .bf-wuerfelt .a-funke { animation: bf-funkeln 2.4s ease-in-out infinite; }

/* 08 speichert: der kleine Bogen fliegt in die Mappe, danach erscheint der Haken */
.bf-speichert .a-mini-bogen { animation: bf-rein 2.6s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
.bf-speichert .a-haken { animation: bf-haken 2.6s ease-out infinite; }

/* 09 Warenkorb: winkt mit den Flügeln, Wellen pulsieren, der Wagen wackelt */
.bf-winkt .a-fluegel-rechts { animation: bf-flatter-r 300ms ease-in-out infinite alternate; }
.bf-winkt .a-fluegel-links { animation: bf-flatter-l 300ms ease-in-out infinite alternate; }
.bf-winkt .a-winken { animation: bf-wellen 600ms ease-in-out infinite; }
.bf-winkt .a-warenkorb { animation: bf-wackeln 1.2s ease-in-out infinite; }

/* 10 Leerlauf: atmet ruhig, die Z steigen nacheinander auf, die zwei Wolken treiben langsam */
.bf-schlaeft .a-biene { animation: bf-atmen 4s ease-in-out infinite; }
.bf-schlaeft .a-wolke-links { animation: bf-treiben 7s ease-in-out infinite; }
.bf-schlaeft .a-wolke-rechts { animation: bf-treiben 7s ease-in-out -3.5s infinite; }
.bf-schlaeft .a-z-1 { animation: bf-zett 3s ease-out infinite; }
.bf-schlaeft .a-z-2 { animation: bf-zett 3s ease-out 1s infinite; }
.bf-schlaeft .a-z-3 { animation: bf-zett 3s ease-out 2s infinite; }

/* 12 öffnet: der kleine Bogen steigt aus der Mappe, die Funken blitzen */
.bf-oeffnet .a-mini-bogen { animation: bf-raus 2.2s cubic-bezier(0.25, 1, 0.5, 1) infinite; }
.bf-oeffnet .a-funke-1 { animation: bf-funkeln 2.2s ease-in-out 0.6s infinite; }
.bf-oeffnet .a-funke-2 { animation: bf-funkeln 2.2s ease-in-out 1.1s infinite; }

/* verworfene Skizzen zu 06, nur für die Vergleichsseite */
.bf-waechst-a .a-biene { animation: bf-aufpusten 2s ease-in-out infinite; }
.bf-waechst-a .a-pfeil-links { animation: bf-pfeil-l 2s ease-in-out infinite; }
.bf-waechst-a .a-pfeil-rechts { animation: bf-pfeil-r 2s ease-in-out infinite; }
.bf-waechst-b .a-bogen { animation: bf-wachsen 1.8s ease-out infinite alternate; }
.bf-waechst-b .a-pfeil-ecke { animation: bf-pfeil-r 1.8s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  svg.biene-final * { animation: none !important; }
}
.ruhig svg.biene-final * { animation: none !important; }

/* Im Designer: Bewegung endet nach 5 Sekunden von selbst (WCAG 2.2.2) */
.bn-svg.bn-ruhe * { animation: none !important; }

/* Ruhestand (nach 5 s, bei "weniger Bewegung"): Zustand 06 zeigt nur das Endbild (Band bis 150), nicht alle drei Zahlen übereinander */
.bn-svg.bn-ruhe.bf-waechst .a-zahl-50, .bn-svg.bn-ruhe.bf-waechst .a-zahl-100 { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .bn-svg.bf-waechst .a-zahl-50, .bn-svg.bf-waechst .a-zahl-100 { visibility: hidden; } }