/* =====================================================================
   [ym_zusammenarbeit] · Zusammenarbeit (Wir für euch), Fassung Fable 03.10.2026
   Frau und Mann schieben zwei Puzzle-Pfeile zusammen. Quelle der Grafik:
   vorschau/zusammenarbeit-fable/bauen.mjs (SVG in assets/img/ym-zusammen.svg).
   Ohne JavaScript und bei „Bewegung reduzieren“ steht der Endzustand;
   die Startlage setzt ym-zusammen.js über .ist-bereit, den Ablauf über .ist-da.
   ===================================================================== */
.ym-zusammen { display: grid; justify-items: center; margin: 0 auto; }
.ym-zusammen__karte {
  width: min(288px, 100%);
  aspect-ratio: 1;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 1px 2px rgba(37, 56, 93, .05), 0 10px 30px rgba(37, 56, 93, .08);
  overflow: hidden;
}
.ym-zusammen .ymf { display: block; width: 100%; height: auto; }

/* Zusammenarbeit, Fassung Fable. Nur transform/opacity, eine Animation pro Gruppe. */
.ymf{display:block;width:100%;height:auto}
.ymf .tl,.ymf .tr,.ymf .heb,.ymf .pfeil,.ymf .rumpf,.ymf .zopf,.ymf .bh,.ymf .bv,.ymf .fk use{transform-box:view-box}
.ymf .tl{transform-origin:232px 522px}
.ymf .tr{transform-origin:368px 522px}
.ymf .heb{transform-origin:350px 300px}
.ymf .pfeil{transform-origin:300px 522px;transform:rotate(-2.5deg)}
.ymf .rumpf,.ymf .bh,.ymf .bv{transform-origin:0 0}
.ymf .fk use{opacity:0;--g:1}
.ymf .wusch,.ymf .sch{opacity:0}
.ymf .fk .s1{transform-origin:300px 56px}.ymf .fk .s2{transform-origin:342px 98px;--g:.55}.ymf .fk .s3{transform-origin:262px 112px;--g:.45}.ymf .fk .s5{transform-origin:300px 398px;--g:.5}.ymf .fk .s4{opacity:0}
/* Startlage, sobald das Skript bereit ist */
.ist-bereit .ymf .tl{transform:translate(-34px,0) rotate(-4deg)}
.ist-bereit .ymf .tr{transform:translate(34px,0) rotate(4deg)}
.ist-bereit .ymf .heb{transform:scale(1.06)}
.ist-bereit .ymf .sch{opacity:1}
.ist-bereit .ymf .fl{transform:translate(-26px,0)}
.ist-bereit .ymf .fr{transform:translate(26px,0)}
.ist-bereit .ymf .rumpf{transform:rotate(-6deg)}
.ist-da .ymf .tl{animation:ymf-l 3.8s cubic-bezier(.3,.6,.15,1) both}
.ist-da .ymf .tr{animation:ymf-r 3.8s cubic-bezier(.3,.6,.15,1) both}
.ist-da .ymf .fl{animation:ymf-fl 3.8s cubic-bezier(.3,.6,.15,1) both}
.ist-da .ymf .fr{animation:ymf-fr 3.8s cubic-bezier(.3,.6,.15,1) both}
.ist-da .ymf .heb{animation:ymf-heb 3.8s cubic-bezier(.45,0,.2,1) both}
.ist-da .ymf .sch{animation:ymf-sch 3.8s cubic-bezier(.45,0,.2,1) both}
.ist-da .ymf .rumpf{animation:ymf-rumpf 3.8s cubic-bezier(.45,0,.2,1) both}
.ist-da .ymf .zopf{animation:ymf-zopf 3.8s cubic-bezier(.45,0,.2,1) both}
.ist-da .ymf .bh{animation:ymf-bh 3.8s cubic-bezier(.45,0,.2,1) both}
.ist-da .ymf .bv{animation:ymf-bv 3.8s cubic-bezier(.45,0,.2,1) both}
.ist-da .ymf .pfeil{animation:ymf-klick 3.8s cubic-bezier(.45,0,.2,1) both}
.ist-da .ymf .wusch{animation:ymf-wusch 3.8s ease-out both}
.ist-da .ymf .fk use{animation:ymf-fk 1.1s cubic-bezier(.2,.7,.3,1) both}
.ist-da .ymf .fk .s4{animation:ymf-blitz .7s ease-out 3.002s both}
.ist-da .ymf .fk .s1{animation-delay:3.04s}.ist-da .ymf .fk .s2{animation-delay:3.22s}.ist-da .ymf .fk .s3{animation-delay:3.36s}.ist-da .ymf .fk .s5{animation-delay:3.002s}
@keyframes ymf-l{0%,11%{transform:translate(-34px,0) rotate(-4deg)}42%,53%{transform:translate(-14px,0) rotate(-1.5deg)}79%,100%{transform:none}}
@keyframes ymf-r{0%,11%{transform:translate(34px,0) rotate(4deg)}42%,53%{transform:translate(14px,0) rotate(1.5deg)}79%,100%{transform:none}}
@keyframes ymf-fl{0%,11%{transform:translate(-26px,0)}42%,53%{transform:translate(-14px,0)}79%,100%{transform:none}}
@keyframes ymf-fr{0%,11%{transform:translate(26px,0)}42%,53%{transform:translate(14px,0)}79%,100%{transform:none}}
@keyframes ymf-heb{0%,62%{transform:scale(1.06)}79%,100%{transform:none}}
@keyframes ymf-sch{0%,62%{opacity:1}79%,100%{opacity:0}}
@keyframes ymf-rumpf{0%,9%{transform:rotate(-6deg)}18%{transform:rotate(5deg)}40%{transform:rotate(3deg)}52%{transform:rotate(-2deg)}60%{transform:rotate(5deg)}78%{transform:rotate(3deg)}90%,100%{transform:none}}
@keyframes ymf-zopf{0%,11%{transform:none}22%{transform:rotate(-14deg)}42%{transform:rotate(-3deg)}53%{transform:rotate(4deg)}64%{transform:rotate(-14deg)}82%{transform:rotate(-2deg)}92%,100%{transform:none}}
@keyframes ymf-bh{0%,12%,26%,54%,68%,100%{transform:none}17%{transform:translate(6px,-24px) rotate(-13deg)}22%{transform:translate(8px,-9px) rotate(-16deg)}59%{transform:translate(6px,-24px) rotate(-13deg)}64%{transform:translate(8px,-9px) rotate(-16deg)}}
@keyframes ymf-bv{0%,27%,41%,69%,80%,100%{transform:none}31%{transform:translate(0,-18px) rotate(-12deg)}36%{transform:translate(0,-5px) rotate(-15deg)}73%{transform:translate(0,-18px) rotate(-12deg)}77%{transform:translate(0,-5px) rotate(-15deg)}}
@keyframes ymf-klick{0%,79%{transform:rotate(-2.5deg)}83%{transform:rotate(-2.5deg) scale(1,.982)}92%,100%{transform:rotate(-2.5deg)}}
@keyframes ymf-wusch{0%,12%{opacity:0;transform:translateX(0)}16%{opacity:1}38%{opacity:0;transform:translateX(0)}54%{opacity:0}58%{opacity:1}76%,100%{opacity:0}}
@keyframes ymf-fk{0%{opacity:0;transform:scale(0) rotate(0)}35%{opacity:1;transform:scale(calc(var(--g)*1.1)) rotate(25deg)}100%{opacity:0;transform:scale(calc(var(--g)*.3)) rotate(70deg)}}
@keyframes ymf-blitz{0%{opacity:0}30%{opacity:.5}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){
.ist-bereit .ymf .tl,.ist-bereit .ymf .tr,.ist-bereit .ymf .fl,.ist-bereit .ymf .fr,.ist-bereit .ymf .heb,.ist-bereit .ymf .rumpf,.ist-bereit .ymf .zopf,.ist-bereit .ymf .bh,.ist-bereit .ymf .bv{transform:none;animation:none}
.ist-bereit .ymf .sch,.ist-da .ymf .wusch,.ist-da .ymf .fk use{opacity:0;animation:none}
.ist-da .ymf .pfeil{animation:none}
}