Ein Kreisel ist kein Pausenknopf

Während der Player auf Daten wartete, stand im mittleren Knopf das
Abspieldreieck und der Ladekreis lag dahinter. Das las sich als
„angehalten": man drückte auf Abspielen, und es geschah nichts — es lief
ja bereits, es kam nur nichts an.

Jetzt sitzt der Kreisel **im** Knopf, dort wo sonst das Symbol steht. Der
freistehende Kreisel in der Bildmitte bleibt für den Fall, dass die
Bedienelemente ausgeblendet sind. Zwei übereinander gibt es nicht mehr.

`togglePlayPause` zählt das Warten jetzt zum Laufen. Vorher führte ein
Tipp in diesem Moment zu `play()` auf etwas, das schon spielte.

Dazu auf dem Mac, wie im Browser auch:

- Ein Klick ins Bild hält an, statt erst die Bedienelemente zu holen. Die
  kommen dort von allein, sobald sich der Zeiger regt.
- Leertaste hält an, Pfeil links und rechts springen.

Mit dem Finger bleibt es beim Alten: ohne Zeiger gibt es keine Bewegung
ohne Berührung, und ein Tipp, der sofort anhält, nähme den einzigen Weg
zu Scrubber, Tonspur und Qualität.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

web/app/src/style.css

@@ -341,19 +341,28 @@ img { display: block; }
 
 /* Während geladen wird, treten die Transportknöpfe zurück: sie tun ohnehin
    nichts, und der Kreisel lag vorher genau hinter dem größten von ihnen. */
-#player.loading .pl-center { opacity: 0; pointer-events: none; }
+/* Während des ersten Ladens haben Vor- und Zurückspulen keine Wirkung — es
+   gibt noch keine Zeitachse. Der mittlere Knopf bleibt stehen: er trägt
+   jetzt selbst den Kreisel. */
+#player.loading .pl-center > :not(.pl-play) { opacity: 0; pointer-events: none; }
 .pl-center { transition: opacity .2s ease; }
 
 .pl-busy {
   position: absolute; display: none; pointer-events: none;
 }
 .pl-busy.on { display: block; }
-.pl-busy i {
+.pl-busy i, .pl-wait {
   display: block; width: 44px; height: 44px; border-radius: 999px;
   border: 3px solid rgba(255,255,255,.2); border-top-color: var(--accent);
   animation: spin .8s linear infinite;
 }
 
+/* Feste Größe für den mittleren Knopf, damit die beiden daneben stehen
+   bleiben: der Kreisel ist schmaler als das Symbol, das er vertritt, und
+   ohne diese Zeile rückten Zurück- und Vorspulen bei jedem Wechsel
+   zusammen. */
+.pl-round.pl-play { width: 68px; height: 68px; }
+
 .pl-error {
   position: absolute; max-width: 460px; padding: var(--s-section);
   background: var(--elevated); border: 1px solid rgba(229,72,77,.35);