Player overlay v2: now/next with programme progress, audio track switching

- Overlay shows current programme (title, time range, EPG progress) and
  what's next; resurfaces briefly on programme change, hides after 5s.
- Audio tracks: listed from the stream, switchable via D-pad left/right
  on live streams (seek keeps left/right on seekable media), via chips
  in the overlay and from the phone remote (set_audio message).
- Main UI font switches to Inter; Space Grotesk stays for the wordmark.

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

app/src/main/assets/remote/index.html

@@ -71,6 +71,14 @@
   .btn-main:disabled { opacity: .35; box-shadow: none; }
 
   .volrow { display: flex; align-items: center; gap: 16px; padding: 0 8px; }
+  .audiorow { display: none; flex-wrap: wrap; align-items: center; gap: 8px; padding: 14px 8px 0; }
+  .audiorow.on { display: flex; }
+  .audiorow .lbl { color: #6b717a; font-size: 11px; letter-spacing: 2px; margin-right: 4px; }
+  .achip {
+    border: 1px solid #23262b; background: transparent; color: #9aa0a8;
+    border-radius: 999px; padding: 7px 14px; font-size: 13px; font-family: inherit;
+  }
+  .achip.sel { background: #5fd4c4; border-color: #5fd4c4; color: #07110f; font-weight: 600; }
   input[type=range] { flex: 1; appearance: none; -webkit-appearance: none; height: 3px;
     border-radius: 2px; background: #1e2126; outline: none; }
   input[type=range]::-webkit-slider-thumb { appearance: none; -webkit-appearance: none;
@@ -210,6 +218,7 @@
       <input type="range" id="volume" min="0" max="100" value="50" aria-label="Lautstärke">
       <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#6b717a" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M11 5L6 9H2v6h4l5 4V5z"/><path d="M15.5 8.5a5 5 0 010 7"/><path d="M18.4 5.6a9 9 0 010 12.8"/></svg>
     </div>
+    <div class="audiorow" id="audiorow"><span class="lbl">TON</span></div>
   </section>
 
   <!-- Sender -->
@@ -411,6 +420,19 @@
     if (!state.volumeDragging && typeof s.volume === 'number') {
       $('volume').value = Math.round(s.volume * 100);
     }
+    const tracks = s.audioTracks || [];
+    const row = $('audiorow');
+    row.classList.toggle('on', hasMedia && tracks.length > 1);
+    while (row.children.length > 1) row.removeChild(row.lastChild);
+    if (tracks.length > 1) {
+      tracks.forEach((label, i) => {
+        const chip = document.createElement('button');
+        chip.className = 'achip' + (i === s.audioSelected ? ' sel' : '');
+        chip.textContent = label;
+        chip.addEventListener('click', () => send({ type: 'set_audio', index: i }));
+        row.appendChild(chip);
+      });
+    }
   }
 
   function renderChannels() {