feat: PWA + Mikrofon-Aufnahme + HTTPS via selbst-signiertem Cert

Frontend-Aufnahme (MediaRecorder):
- Aufnahme-Button im Upload-Form, große Touch-Targets
- Start / Pause / Fortsetzen / Stop mit Live-Timer
- Format-Auto-Detect (Opus/WebM, Safari nimmt M4A)
- Wake Lock damit iOS nicht ins Sleep geht
- Aufnahme-Datei landet als File-Objekt im Upload-Flow
- Beim Submit: aufgenommene Datei bevorzugt vor File-Input

PWA:
- manifest.webmanifest, icon.svg + PNG-Icons (192/512)
- apple-mobile-web-app-capable + theme-color
- "Zum Home-Bildschirm" hinzufügen verwandelt Seite in App

Mobile-Layout:
- Single-Column ab 700px, größere Buttons
- Header stapelt sich vertikal
- Tabelle scrollt horizontal statt zu zerquetschen
- Safe-Area-Insets für iPhone-Notch

HTTPS (Pflicht für Mikrofon-Zugriff):
- install.sh erzeugt selbst-signiertes Cert (4096 Bit, 825 Tage, mit
  SAN aus Hostname + LAN-IP)
- Nginx: HTTP → HTTPS Redirect, Cert unter /ssl/voice-agent.crt
  ungesichert abrufbar (für bequemen iOS-Profil-Import)

Backend:
- ALLOWED_EXTS um 'webm' erweitert

lxc-frontend/app/static/index.html

@@ -2,9 +2,17 @@
 <html lang="de">
 <head>
   <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+  <meta name="theme-color" content="#0f1115" />
   <title>Voice-Agent — Transkription</title>
   <link rel="stylesheet" href="/static/style.css" />
+  <link rel="manifest" href="/static/manifest.webmanifest" />
+  <link rel="icon" href="/static/icon.svg" type="image/svg+xml" />
+  <link rel="apple-touch-icon" href="/static/icon-192.png" />
+  <meta name="apple-mobile-web-app-capable" content="yes" />
+  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+  <meta name="apple-mobile-web-app-title" content="Voice-Agent" />
+  <meta name="mobile-web-app-capable" content="yes" />
 </head>
 <body>
   <header>
@@ -63,10 +71,33 @@
           <select id="profile-select"></select>
           <small class="muted">Standard: <span id="default-profile-name">—</span> (in Einstellungen änderbar)</small>
         </label>
-        <label>
-          Audiodatei (MP3, WAV, M4A, MP4, OGG, FLAC)
-          <input type="file" name="audio" id="audio" accept=".mp3,.wav,.m4a,.mp4,.ogg,.flac" required />
-        </label>
+        <div class="audio-source">
+          <label class="audio-file-label">
+            <span>Audiodatei wählen <small class="muted">(MP3, WAV, M4A, MP4, OGG, FLAC, WebM)</small></span>
+            <input type="file" name="audio" id="audio" accept="audio/*,.mp3,.wav,.m4a,.mp4,.ogg,.flac,.webm" />
+          </label>
+          <div class="audio-or muted">— oder —</div>
+          <button type="button" id="record-toggle" class="btn-record">
+            <span class="rec-dot"></span>
+            <span id="record-toggle-label">Aufnahme starten</span>
+          </button>
+        </div>
+
+        <div id="record-pane" class="record-pane hidden">
+          <div class="record-timer" id="record-timer">00:00</div>
+          <div class="record-status" id="record-status">Aufnahme läuft</div>
+          <div class="record-controls">
+            <button type="button" id="rec-pause" class="btn-record-ctrl">Pause</button>
+            <button type="button" id="rec-stop"  class="btn-record-ctrl danger">Stoppen</button>
+          </div>
+        </div>
+
+        <div id="record-result" class="record-result hidden">
+          <span class="muted">Aufnahme bereit:</span>
+          <span id="record-filename"></span>
+          <button type="button" id="record-discard" class="btn-link btn-danger">Verwerfen</button>
+        </div>
+
         <button type="submit" id="submit-btn">Hochladen &amp; verarbeiten</button>
       </form>
       <div id="upload-progress" class="hidden">