Die Knöpfe hatten Flächen, die es in der App nie gab

Ich habe nach dem Code gebaut und dabei das Wesentliche übersehen: In
PlayerView gibt es genau ein "background", und das ist die Abdunklung
über dem ganzen Bild. Die Knöpfe selbst sind blanke weiße Symbole.

Meine runden, hinterlegten Flächen waren eine Erfindung — und der Grund,
warum der Qualitätsknopf schief aussah: ein Wort passt in keinen Kreis.
Jetzt steht "Original" als das da, was es ist, nämlich Text.

Dazu die Spultasten als Kreispfeile mit der Sekundenzahl darin, wie
gobackward.10 und goforward.30 sie zeichnen, statt als "−10" und "+30"
in Textform. Und der Abspielpfeil in 52 Punkt, der Größe aus der App.

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

web/frontend/index.html

@@ -275,28 +275,26 @@ img { display: block; }
 }
 .pl-bottom { padding-bottom: calc(var(--s-loose) + env(safe-area-inset-bottom)); }
 
-/* Die Stufe als Text, deshalb kein rundes Feld. */
+/* Die Stufe als Text — jetzt ohne Kreis darum, also ohne Widerspruch. */
-.pl-quality {
+.pl-quality { font-size: 14px; font-weight: 600; white-space: nowrap; }
-  width: auto; padding: 0 var(--s-regular); border-radius: var(--r-control);
-  font-size: 13px; font-weight: 600; white-space: nowrap;
-}
 
 .pl-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
 .pl-title strong { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
 .pl-title span { font-size: 13px; color: var(--text-2); }
 
+/* **Keine Knopfflächen.** In der App sind das blanke weiße Symbole auf dem
+   Bild — der einzige Hintergrund ist die Abdunklung über allem. Runde
+   Flächen darunter waren meine Erfindung, und sie sind der Grund, warum
+   „Original" als Text darin schief aussah: ein Wort passt in keinen Kreis. */
 .pl-icon {
-  width: 38px; height: 38px; border-radius: 999px; flex: 0 0 auto;
+  background: none; border: none; color: #fff; flex: 0 0 auto;
-  background: rgba(20,20,23,.55); color: var(--text); font-size: 15px;
+  padding: var(--s-snug); font-size: 15px; border-radius: var(--r-control);
-  border: 1px solid rgba(255,255,255,.14);
+  opacity: .9; transition: opacity .15s ease, background .15s ease;
-  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
-  transition: background .15s ease;
 }
-.pl-icon:hover { background: rgba(40,40,46,.75); }
+.pl-icon:hover { opacity: 1; background: rgba(255,255,255,.12); }
 /* Eine Vorgabegröße für alle Symbole, damit sie zueinander passen; einzelne
    überschreiben sie über `icon(name, size)`. */
-.pl-icon svg, .pl-round svg, .tiny svg, .hero-nav svg { width: 18px; height: 18px; }
+.pl-icon svg, .tiny svg, .hero-nav svg { width: 22px; height: 22px; }
-.pl-round svg { width: 22px; height: 22px; }
 .btn svg { width: 15px; height: 15px; vertical-align: -2px; margin-right: 2px; }
 .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
 .tiny, .pl-icon, .pl-round, .hero-nav { display: inline-flex; align-items: center; justify-content: center; }
@@ -305,22 +303,17 @@ img { display: block; }
   display: flex; align-items: center; justify-content: center;
   gap: calc(var(--s-section) * 2);
 }
-/* Dunkel statt hell durchscheinend: über einer sonnigen Szene verschwanden
+/* Auch hier keine Fläche — nur das Symbol, wie in der App. Lesbar bleibt es
-   helle Knöpfe vollständig. Ein Schatten hebt sie zusätzlich ab. */
+   durch die Abdunklung, die über dem ganzen Bild liegt. */
 .pl-round {
-  position: relative; width: 58px; height: 58px; border-radius: 999px;
+  background: none; border: none; color: #fff; padding: var(--s-snug);
-  background: rgba(20,20,23,.55); color: var(--text); font-size: 22px;
+  opacity: .95; transition: opacity .15s ease, transform .15s ease;
-  border: 1px solid rgba(255,255,255,.14);
-  box-shadow: 0 4px 16px rgba(0,0,0,.45);
-  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
-  transition: background .15s ease, transform .15s ease;
 }
-.pl-round:hover { background: rgba(40,40,46,.8); transform: scale(1.06); }
+.pl-round:hover { opacity: 1; transform: scale(1.08); }
-.pl-round.pl-play { width: 84px; height: 84px; }
+
-.pl-round.pl-play svg { width: 34px; height: 34px; }
 /* Die Sekundenzahl als Text, nicht als Ziffer im Pfeil: übereinander war
    beides unlesbar, und die Zahl ist die eigentliche Auskunft. */
-#pl-back, #pl-fwd { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
+
 
 /* Wie in der App: der Regler über die **volle Breite**, die Zeiten darunter.
    Nebeneinander gestellt nimmt er in der Mitte Platz weg und wirkt wie ein
@@ -1609,9 +1602,9 @@ function openPlayer(item) {
       </div>
 
       <div class="pl-center">
-        <button class="pl-round" id="pl-back" aria-label="Zurückspulen">−${P.skipBackward}</button>
+        <button class="pl-round" id="pl-back" aria-label="Zurückspulen">${icon('goBack', 40, P.skipBackward)}</button>
-        <button class="pl-round pl-play" id="pl-toggle" aria-label="Abspielen">${icon('play', 30)}</button>
+        <button class="pl-round pl-play" id="pl-toggle" aria-label="Abspielen">${icon('play', 52)}</button>
-        <button class="pl-round" id="pl-fwd" aria-label="Vorspulen">+${P.skipForward}</button>
+        <button class="pl-round" id="pl-fwd" aria-label="Vorspulen">${icon('goFwd', 40, P.skipForward)}</button>
       </div>
 
       <div class="pl-bottom">
@@ -1664,7 +1657,7 @@ function openPlayer(item) {
   v.addEventListener('click', toggle);
 
   const paint = () => {
-    el2('pl-toggle').innerHTML = icon(v.paused ? 'play' : 'pause', 30);
+    el2('pl-toggle').innerHTML = icon(v.paused ? 'play' : 'pause', 52);
     el2('pl-toggle').setAttribute('aria-label', v.paused ? 'Abspielen' : 'Anhalten');
     show();
   };
@@ -2077,6 +2070,14 @@ const ICONS = {
   play: '<path d="M8 5.5v13l11-6.5z" fill="currentColor" stroke="none"/>',
   waveform: '<path d="M3 12h2M7 8v8M11 4.5v15M15 8v8M19 11h2"/>',
   speed: '<path d="M12 20a8 8 0 100-16 8 8 0 000 16z"/><path d="M12 12l4-3"/>',
+  // Kreispfeile mit der Sekundenzahl darin — dasselbe Bild wie
+  // `gobackward.10` und `goforward.30` auf dem iPad.
+  goBack: (n) => `<path d="M11.5 4.5L7 8l4.5 3.5" /><path d="M7 8h4.5a7.5 7.5 0 11-7.2 9.6"/>`
+    + `<text x="12" y="17.6" text-anchor="middle" font-size="7.5" font-weight="700"`
+    + ` fill="currentColor" stroke="none" font-family="inherit">${n}</text>`,
+  goFwd: (n) => `<path d="M12.5 4.5L17 8l-4.5 3.5"/><path d="M17 8h-4.5a7.5 7.5 0 107.2 9.6"/>`
+    + `<text x="12" y="17.6" text-anchor="middle" font-size="7.5" font-weight="700"`
+    + ` fill="currentColor" stroke="none" font-family="inherit">${n}</text>`,
   captions: '<rect x="3" y="5.5" width="18" height="13" rx="3"/><path d="M9.5 10.5a2.2 2.2 0 100 3M16 10.5a2.2 2.2 0 100 3"/>',
   captionsOn: '<rect x="3" y="5.5" width="18" height="13" rx="3" fill="currentColor" stroke="none"/><path d="M9.5 10.5a2.2 2.2 0 100 3M16 10.5a2.2 2.2 0 100 3" stroke="#0B0B0D"/>',
   check: '<path d="M5 12.5l4.5 4.5L19 7.5"/>',
@@ -2092,10 +2093,11 @@ const ICONS = {
 };
 
 /// Ein Symbol als Vektor. `size` nur, wo es von der Vorgabe abweicht.
-function icon(name, size) {
+function icon(name, size, arg) {
+  const inhalt = typeof ICONS[name] === 'function' ? ICONS[name](arg) : ICONS[name];
   return `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"
     stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"
-    ${size ? `style="width:${size}px;height:${size}px"` : ''}>${ICONS[name]}</svg>`;
+    ${size ? `style="width:${size}px;height:${size}px"` : ''}>${inhalt}</svg>`;
 }
 
 /* ---------- Kleinkram ---------- */