/* App-Piktogramme, eine Familie für alle Apps (gewählt 05.10.2026): Raster 64, ein Strich mit runden Enden,
   der Kopf ist immer ein voller Punkt, je App genau eine Geste. Warm-up: Figur springt jubelnd. Cool-down: Kopf mit
   zwei Ringen, die atmen. Gameplan: Figur zeigt von oben nach unten auf die Aufgaben, jede wird abgehakt.
   Neue Apps: gleicher Bauplan, eigene Geste, Klassen pk-*.
   Bewegung nur, solange .spielt am Elternknoten steht (spiele() aus ui.js, 3,4 s); jede endet im Standbild. */
svg.piktogramm { fill: none; stroke: currentColor; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
svg.piktogramm circle:not(.voll) { fill: none; }
svg.piktogramm circle.voll { fill: currentColor; stroke: none; }
.piktogramm .leise { opacity: 0.55; }
.piktogramm * { transform-box: view-box; }

/* Warm-up: Figur (Füße bei y 48), Arme drehen in der Schulter */
.pk-figur { transform-origin: 32px 48px; }
.pk-arm-l, .pk-arm-r { transform-origin: 32px 23px; }
.pk-boden { transform-origin: 32px 57px; }
/* Cool-down: Ringe um den Kopf */
.pk-ring { transform-origin: 32px 26px; }
/* Gameplan: Arm dreht in der Schulter; die Haken sind gezogen (pathLength 1) */
.pk-zeiger { transform-origin: 13px 26px; transform: rotate(48deg); }
.pk-haken { stroke-dasharray: 1; stroke-dashoffset: 0; }

@media (prefers-reduced-motion: no-preference) {
  .spielt .pk-figur { animation: pk-sprung 1.6s cubic-bezier(0.4, 0, 0.3, 1) 2; }
  .spielt .pk-arm-l { animation: pk-arm-l 1.6s ease-in-out 2; }
  .spielt .pk-arm-r { animation: pk-arm-r 1.6s ease-in-out 2; }
  .spielt .pk-boden { animation: pk-boden 1.6s ease-in-out 2; }
  .spielt .pk-ring-innen { animation: pk-ring-innen 3.3s ease-in-out; }
  .spielt .pk-ring-aussen { animation: pk-ring-aussen 3.3s ease-in-out 0.25s; }
  .spielt .pk-ruhe { animation: pk-ruhe 3.3s ease-in-out; }
  .spielt .pk-zeiger { animation: pk-zeigen 3.3s cubic-bezier(0.5, 0, 0.3, 1); }
  .spielt .pk-haken-1 { animation: pk-haken-1 3.3s ease-out; }
  .spielt .pk-haken-2 { animation: pk-haken-2 3.3s ease-out; }
  .spielt .pk-haken-3 { animation: pk-haken-3 3.3s ease-out; }
}

/* Anlauf in die Knie (Arme unten), Sprung mit Jubelarmen, weiche Landung */
@keyframes pk-sprung {
  0% { transform: none; }
  20% { transform: translateY(2px) scaleY(0.88); }
  48% { transform: translateY(-9px) scaleY(1.04); }
  72% { transform: translateY(0) scaleY(0.93); }
  86%, 100% { transform: none; }
}
@keyframes pk-arm-l { 0%, 100% { transform: none; } 20% { transform: rotate(-80deg); } 48% { transform: rotate(6deg); } 72% { transform: rotate(-14deg); } }
@keyframes pk-arm-r { 0%, 100% { transform: none; } 20% { transform: rotate(80deg); } 48% { transform: rotate(-6deg); } 72% { transform: rotate(14deg); } }
@keyframes pk-boden { 0%, 100% { opacity: 0.55; transform: none; } 48% { opacity: 0.15; transform: scaleX(0.6); } }

/* Ein Atemzug: Ringe weiten sich, der Kopf hebt sich leicht, dann zurück */
@keyframes pk-ring-innen { 0%, 100% { transform: none; } 50% { transform: scale(1.22); opacity: 0.75; } }
@keyframes pk-ring-aussen { 0%, 100% { transform: none; } 50% { transform: scale(1.14); opacity: 0.25; } }
@keyframes pk-ruhe { 0%, 100% { transform: none; } 50% { transform: translateY(-1.5px); } }

/* Zeigen von oben nach unten: Zeile 1, 2, 3; der Haken zieht sich, sobald der Arm dort ist */
@keyframes pk-zeigen {
  0% { transform: rotate(48deg); }
  10%, 30% { transform: rotate(-28deg); }
  40%, 60% { transform: rotate(16deg); }
  70%, 100% { transform: rotate(48deg); }
}
@keyframes pk-haken-1 { 0%, 14% { stroke-dashoffset: 1; } 24%, 100% { stroke-dashoffset: 0; } }
@keyframes pk-haken-2 { 0%, 44% { stroke-dashoffset: 1; } 54%, 100% { stroke-dashoffset: 0; } }
@keyframes pk-haken-3 { 0%, 74% { stroke-dashoffset: 1; } 84%, 100% { stroke-dashoffset: 0; } }