UI: Avatar entfernt, Streaming-Topbar mit Labels

- DK-Avatar aus Header entfernt (kein Zweck)
- Streaming-Felder haben jetzt Ueberschriften: Name, Titel, Passwort, Qualitaet
- Passwort-Feld von 140px auf 180px verbreitert
- Topbar aligned an Feldunterkante (flex-end)

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

web/src/App.tsx

@@ -272,7 +272,6 @@ export default function App() {
             {'\u{1F511}'}
             {adminLoggedIn && <span className="hub-admin-green-dot" />}
           </button>
-          <div className="hub-avatar">DK</div>
         </div>
       </header>
 

web/src/plugins/streaming/StreamingTab.tsx

@@ -719,39 +719,50 @@ export default function StreamingTab({ data, isAdmin: isAdminProp = false }: { d
       )}
 
       <div className="stream-topbar">
-        <input
+        <label className="stream-field">
-          className="stream-input stream-input-name"
+          <span className="stream-field-label">Name</span>
-          placeholder="Dein Name"
+          <input
-          value={userName}
+            className="stream-input stream-input-name"
-          onChange={e => setUserName(e.target.value)}
+            placeholder="Dein Name"
-          disabled={isBroadcasting}
+            value={userName}
-        />
+            onChange={e => setUserName(e.target.value)}
-        <input
+            disabled={isBroadcasting}
-          className="stream-input stream-input-title"
+          />
-          placeholder="Stream-Titel"
+        </label>
-          value={streamTitle}
+        <label className="stream-field stream-field-grow">
-          onChange={e => setStreamTitle(e.target.value)}
+          <span className="stream-field-label">Titel</span>
-          disabled={isBroadcasting}
+          <input
-        />
+            className="stream-input stream-input-title"
-        <input
+            placeholder="Stream-Titel"
-          className="stream-input stream-input-password"
+            value={streamTitle}
-          type="password"
+            onChange={e => setStreamTitle(e.target.value)}
-          placeholder="Passwort (optional)"
+            disabled={isBroadcasting}
-          value={streamPassword}
+          />
-          onChange={e => setStreamPassword(e.target.value)}
+        </label>
-          disabled={isBroadcasting}
+        <label className="stream-field">
-        />
+          <span className="stream-field-label">Passwort</span>
-        <select
+          <input
-          className="stream-select-quality"
+            className="stream-input stream-input-password"
-          value={qualityIdx}
+            type="password"
-          onChange={e => setQualityIdx(Number(e.target.value))}
+            placeholder="optional"
-          disabled={isBroadcasting}
+            value={streamPassword}
-          title="Stream-Qualität"
+            onChange={e => setStreamPassword(e.target.value)}
-        >
+            disabled={isBroadcasting}
-          {QUALITY_PRESETS.map((p, i) => (
+          />
-            <option key={p.label} value={i}>{p.label}</option>
+        </label>
-          ))}
+        <label className="stream-field">
-        </select>
+          <span className="stream-field-label">Qualit{'\u00E4'}t</span>
+          <select
+            className="stream-select-quality"
+            value={qualityIdx}
+            onChange={e => setQualityIdx(Number(e.target.value))}
+            disabled={isBroadcasting}
+          >
+            {QUALITY_PRESETS.map((p, i) => (
+              <option key={p.label} value={i}>{p.label}</option>
+            ))}
+          </select>
+        </label>
         {isBroadcasting ? (
           <button className="stream-btn stream-btn-stop" onClick={stopBroadcast}>
             {'\u23F9'} Stream beenden

web/src/plugins/streaming/streaming.css

@@ -9,12 +9,27 @@
 /* ── Top Bar ── */
 .stream-topbar {
   display: flex;
-  align-items: center;
+  align-items: flex-end;
   gap: 10px;
   margin-bottom: 16px;
   flex-wrap: wrap;
 }
 
+.stream-field {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.stream-field-grow { flex: 1; min-width: 180px; }
+.stream-field-label {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--text-faint);
+  padding-left: 2px;
+}
+
 .stream-input {
   padding: 10px 14px;
   border: 1px solid var(--bg-tertiary);
@@ -25,11 +40,13 @@
   outline: none;
   transition: border-color var(--transition);
   min-width: 0;
+  width: 100%;
+  box-sizing: border-box;
 }
 .stream-input:focus { border-color: var(--accent); }
 .stream-input::placeholder { color: var(--text-faint); }
 .stream-input-name { width: 150px; }
-.stream-input-title { flex: 1; min-width: 180px; }
+.stream-input-title { width: 100%; }
 
 .stream-btn {
   padding: 10px 20px;
@@ -408,11 +425,12 @@
 
 /* ── Password input in topbar ── */
 .stream-input-password {
-  width: 140px;
+  width: 180px;
 }
 
 .stream-select-quality {
   width: 200px;
+  box-sizing: border-box;
   padding: 10px 14px;
   border: 1px solid var(--bg-tertiary);
   border-radius: var(--radius);