diff --git a/.dockerignore b/.dockerignore
new file mode 100644
index 0000000..4aaca97
--- /dev/null
+++ b/.dockerignore
@@ -0,0 +1,26 @@
+# Der Bau-Kontext ist die Wurzel des Projekts, seit die Oberfläche
+# mitgebaut wird. Diese Datei gehört deshalb hierher und nicht nach server/ —
+# Docker sucht sie neben dem Kontext, nicht neben dem Dockerfile.
+
+# **Der Grund für diese Datei.** Ohne sie überschreibt `COPY server/ ./server/`
+# die obj/-Verzeichnisse, die `dotnet restore` im Container gerade angelegt
+# hat, mit denen vom Arbeitsrechner. Die zeigen auf osx-arm64, der Bau will
+# linux-arm64, und `dotnet publish` bricht mit NETSDK1047 ab.
+**/bin/
+**/obj/
+**/*.user
+
+# Gebaute Oberfläche und ihre Abhängigkeiten: der web-Abschnitt baut beides neu.
+**/node_modules/
+web/app/dist/
+
+# Laufzeitdaten eines lokalen Starts.
+server/data/
+server/cache/
+server/transcode/
+
+# Was im Server-Image nichts verloren hat.
+.git/
+.build/
+DerivedData/
+*.xcodeproj/
diff --git a/server/.dockerignore b/server/.dockerignore
deleted file mode 100644
index 2e264a2..0000000
--- a/server/.dockerignore
+++ /dev/null
@@ -1,6 +0,0 @@
-**/bin/
-**/obj/
-**/*.user
-data/
-cache/
-transcode/
diff --git a/server/Dockerfile b/server/Dockerfile
index 14d8cdf..a94b1de 100644
--- a/server/Dockerfile
+++ b/server/Dockerfile
@@ -1,5 +1,15 @@
 # syntax=docker/dockerfile:1
 
+# Die Oberfläche zuerst, in einem eigenen Abschnitt: sie braucht Node, der
+# Server nicht. So landet Node nie im fertigen Image.
+FROM --platform=$BUILDPLATFORM node:22-alpine AS web
+WORKDIR /web
+COPY web/app/package.json web/app/package-lock.json ./
+RUN npm ci
+COPY web/app/ ./
+RUN npm run build
+
+
 # Gebaut wird auf der Architektur des Bauwirts, übersetzt wird für die des
 # Ziels — `dotnet publish -a` kann das. Ohne diese Trennung liefe der Bau für
 # arm64 unter Emulation und dauerte ein Vielfaches.
@@ -13,11 +23,11 @@ WORKDIR /src
 # `--parents` behält die Verzeichnisse bei. **Ein Muster statt einer Liste**,
 # weil eine Liste bei jedem neuen Projekt vergessen wird — und dann scheitert
 # erst der Bau im Container, nicht der auf dem Arbeitsrechner.
-COPY --parents src/*/*.csproj ./
-RUN dotnet restore src/Flaro.Api/Flaro.Api.csproj -a $TARGETARCH
+COPY --parents server/src/*/*.csproj ./
+RUN dotnet restore server/src/Flaro.Api/Flaro.Api.csproj -a $TARGETARCH
 
-COPY . .
-RUN dotnet publish src/Flaro.Api/Flaro.Api.csproj -a $TARGETARCH -c Release -o /app --no-restore
+COPY server/ ./server/
+RUN dotnet publish server/src/Flaro.Api/Flaro.Api.csproj -a $TARGETARCH -c Release -o /app --no-restore
 
 
 FROM mcr.microsoft.com/dotnet/aspnet:10.0 AS runtime
@@ -65,6 +75,7 @@ ENV FLARO_DATA=/config \
 
 WORKDIR /app
 COPY --from=build /app .
+COPY --from=web /web/dist ./wwwroot
 
 EXPOSE 8080
 VOLUME ["/config", "/cache", "/transcode"]
diff --git a/server/README.md b/server/README.md
index 70e89f3..5f13bff 100644
--- a/server/README.md
+++ b/server/README.md
@@ -65,10 +65,34 @@ in Software; das ist langsamer, aber es läuft. **Zum blossen Umpacken wird gar
 keine Hardware gebraucht**, und das ist der Weg, der den meisten Beständen
 hilft.
 
+## Weboberfläche
+
+Der Server liefert sie selbst aus, unter derselben Adresse wie die
+Schnittstelle. Kein Proxy davor, kein CORS, kein Mischmasch aus http und
+https. Gebaut wird sie im Image mit; wer nur an ihr arbeitet, nimmt Vite:
+
+```bash
+cd ../web/app
+npm install
+FLARO_SERVER=http://localhost:18080 npm run dev   # auf http://localhost:5173
+```
+
+Vite reicht `/api` an den Server weiter, damit die Herkunft dieselbe bleibt
+wie im Betrieb.
+
+**Der Zugang liegt in einem Cookie, nicht nur in der Kopfzeile.** Ein
+`<img>`, ein `<video>` und ein Download-Link senden keine eigenen
+Kopfzeilen; das Token stattdessen in die Adresse zu schreiben hiesse, es in
+jedes Zugriffsprotokoll und jeden weitergegebenen Link zu setzen. Das Cookie
+ist `HttpOnly` und `SameSite=Strict`, `Secure` nur über https — sonst liesse
+sich die Oberfläche im Heimnetz gar nicht benutzen. Die Apps benutzen
+weiterhin die Kopfzeile: ein zweiter Weg zum selben Token, kein zweites
+Verfahren.
+
 ## Entwickeln
 
 ```bash
-dotnet test                       # 293 Tests
+dotnet test                       # 313 Tests
 dotnet run --project src/Flaro.Api # auf http://localhost:5000
 ```
 
@@ -76,8 +100,14 @@ Ohne gesetzte Variablen legt der Server `data/`, `cache/` und `transcode/`
 neben dem Programm an.
 
 ```bash
-# Image bauen, beide Architekturen
-docker buildx build --platform linux/amd64,linux/arm64 -t flaro:dev .
+# Image bauen, beide Architekturen.
+# **Aus der Wurzel des Projekts**, nicht aus server/: der Bau braucht
+# web/app für die Oberfläche.
+cd .. && docker buildx build --platform linux/amd64,linux/arm64 \
+    -f server/Dockerfile -t flaro:dev .
+
+# Ein lokaler Server mit Beispielmedien zum Ausprobieren
+Tools/demo-medien.sh && docker compose -f server/docker-compose.local.yml up -d --build
 
 # Eine Migration nach einer Modelländerung
 dotnet ef migrations add <Name> --project src/Flaro.Data --startup-project src/Flaro.Api --output-dir Migrations
diff --git a/server/src/Flaro.Api/Auth/TokenAuthentication.cs b/server/src/Flaro.Api/Auth/TokenAuthentication.cs
index 6104973..e47bc83 100644
--- a/server/src/Flaro.Api/Auth/TokenAuthentication.cs
+++ b/server/src/Flaro.Api/Auth/TokenAuthentication.cs
@@ -32,16 +32,41 @@ public sealed class TokenAuthenticationHandler(
     public const string SchemeName = "FlaroToken";
     public const string DeviceTokenIdClaim = "flaro:device";
 
-    protected override async Task<AuthenticateResult> HandleAuthenticateAsync()
+    /// <summary>Derselbe Zugang, nur für den Browser.</summary>
+    ///
+    /// <remarks>
+    /// <para>
+    /// <b>Weil <c>&lt;img&gt;</c>, <c>&lt;video&gt;</c> und ein Download-Link
+    /// keine Kopfzeile setzen können.</b> Ohne Cookie müsste die Oberfläche
+    /// jedes Plakat und jeden Film über <c>fetch</c> holen und im
+    /// Arbeitsspeicher halten — bei einem Film ist das keine Lösung, und ein
+    /// Token in der Adresse stünde in jedem Zugriffsprotokoll.
+    /// </para>
+    /// <para>
+    /// <c>HttpOnly</c>, damit kein Skript herankommt, und
+    /// <c>SameSite=Strict</c> gegen Anfragen von fremden Seiten. Apps benutzen
+    /// weiterhin die Kopfzeile; das Cookie ist ein zweiter Weg zum selben
+    /// Token, kein zweites Verfahren.
+    /// </para>
+    /// </remarks>
+    public const string CookieName = "flaro_session";
+
+    private string? AusKopfzeile()
     {
-        if (!Request.Headers.TryGetValue("Authorization", out var kopfzeile)) return AuthenticateResult.NoResult();
+        if (!Request.Headers.TryGetValue("Authorization", out var kopfzeile)) return null;
 
         var roh = kopfzeile.ToString();
         const string vorsatz = "Bearer ";
-        if (!roh.StartsWith(vorsatz, StringComparison.OrdinalIgnoreCase)) return AuthenticateResult.NoResult();
+        if (!roh.StartsWith(vorsatz, StringComparison.OrdinalIgnoreCase)) return null;
 
         var token = roh[vorsatz.Length..].Trim();
-        if (token.Length == 0) return AuthenticateResult.NoResult();
+        return token.Length == 0 ? null : token;
+    }
+
+    protected override async Task<AuthenticateResult> HandleAuthenticateAsync()
+    {
+        var token = AusKopfzeile() ?? Request.Cookies[CookieName];
+        if (string.IsNullOrEmpty(token)) return AuthenticateResult.NoResult();
 
         var fingerabdruck = Secrets.Fingerprint(token);
         var eintrag = await db.DeviceTokens.FirstOrDefaultAsync(t => t.TokenFingerprint == fingerabdruck);
diff --git a/server/src/Flaro.Api/Endpoints/AuthEndpoints.cs b/server/src/Flaro.Api/Endpoints/AuthEndpoints.cs
index 4ee009f..d26792a 100644
--- a/server/src/Flaro.Api/Endpoints/AuthEndpoints.cs
+++ b/server/src/Flaro.Api/Endpoints/AuthEndpoints.cs
@@ -23,7 +23,7 @@ public static class AuthEndpoints
     public static void MapAuth(this IEndpointRouteBuilder app)
     {
         app.MapPost("/api/v1/auth/login", async (
-            LoginRequest anfrage, FlaroContext db, TimeProvider clock) =>
+            LoginRequest anfrage, FlaroContext db, TimeProvider clock, HttpContext zusammenhang) =>
         {
             var name = anfrage.UserName.Trim();
             var benutzer = await db.Users.FirstOrDefaultAsync(u => u.UserName == name);
@@ -45,11 +45,14 @@ public static class AuthEndpoints
 
             var antwort = await TokenAusstellen(db, clock, benutzer, anfrage.DeviceName, anfrage.DeviceId);
             await db.SaveChangesAsync();
+            CookieSetzen(zusammenhang, antwort.Token);
             return Results.Ok(antwort);
         }).AllowAnonymous().RequireRateLimiting(FlaroRateLimits.SignIn);
 
-        app.MapPost("/api/v1/auth/logout", async (ClaimsPrincipal wer, FlaroContext db, TimeProvider clock) =>
+        app.MapPost("/api/v1/auth/logout", async (
+            ClaimsPrincipal wer, FlaroContext db, TimeProvider clock, HttpContext zusammenhang) =>
         {
+            zusammenhang.Response.Cookies.Delete(FlaroTokenCookie);
             if (!Guid.TryParse(wer.FindFirstValue(TokenAuthenticationHandler.DeviceTokenIdClaim), out var id))
                 return Results.Unauthorized();
 
@@ -178,6 +181,27 @@ public static class AuthEndpoints
         return new LoginResponse(token, new AuthenticatedUser(benutzer.Id, benutzer.UserName, benutzer.IsAdministrator));
     }
 
+    private const string FlaroTokenCookie = TokenAuthenticationHandler.CookieName;
+
+    /// <summary>Legt dasselbe Token als Cookie ab — für den Browser.</summary>
+    ///
+    /// <remarks>
+    /// <c>HttpOnly</c>: kein Skript kommt heran, also auch keines, das sich
+    /// über eine Lücke in der Oberfläche eingeschlichen hat. <c>Strict</c>:
+    /// eine fremde Seite kann damit nichts auslösen. <c>Secure</c> nur bei
+    /// HTTPS, sonst liesse sich die Oberfläche im Heimnetz über http gar
+    /// nicht benutzen.
+    /// </remarks>
+    private static void CookieSetzen(HttpContext zusammenhang, string token) =>
+        zusammenhang.Response.Cookies.Append(FlaroTokenCookie, token, new CookieOptions
+        {
+            HttpOnly = true,
+            SameSite = SameSiteMode.Strict,
+            Secure = zusammenhang.Request.IsHttps,
+            Path = "/",
+            MaxAge = TimeSpan.FromDays(365),
+        });
+
     /// <summary>Eine Antwort, die nicht verrät, welche Hälfte falsch war.</summary>
     private static IResult Abgelehnt() =>
         Results.Problem("Benutzername oder Passwort stimmt nicht.", statusCode: StatusCodes.Status401Unauthorized);
diff --git a/server/src/Flaro.Api/Program.cs b/server/src/Flaro.Api/Program.cs
index a7dc27d..225db8b 100644
--- a/server/src/Flaro.Api/Program.cs
+++ b/server/src/Flaro.Api/Program.cs
@@ -106,6 +106,27 @@ using (var bereich = app.Services.CreateScope())
 app.UseExceptionHandler();
 app.UseStatusCodePages();
 app.UseRateLimiter();
+
+// --- Die Oberfläche -------------------------------------------------------
+//
+// **Vom Server selbst ausgeliefert, nicht von einem Proxy davor.** Damit
+// liegen Seite und Schnittstelle unter derselben Adresse: kein CORS, kein
+// Mischmasch aus http und https, und der Zugang bleibt beim Server statt im
+// Browser. Der Node-Proxy aus der Jellyfin-Zeit wird dadurch überflüssig.
+//
+// **Vor der Anmeldung, und das ist kein Versehen.** Die Rückfallregel weiter
+// oben verlangt für jede Anfrage ohne eigenen Endpunkt einen angemeldeten
+// Benutzer — und `/assets/index.js` hat keinen. Stünde das hier unter der
+// Anmeldung, bekäme ein neuer Besucher 401 auf genau das Skript, das ihm die
+// Anmeldemaske zeichnen soll. Die Seite selbst ist kein Geheimnis; sie zeigt
+// ohne gültigen Zugang nichts als ein Anmeldefeld.
+var oberfläche = Path.Combine(app.Environment.ContentRootPath, "wwwroot");
+if (Directory.Exists(oberfläche))
+{
+    app.UseDefaultFiles();
+    app.UseStaticFiles();
+}
+
 app.UseAuthentication();
 app.UseAuthorization();
 
@@ -118,6 +139,14 @@ app.MapImages();
 app.MapDelivery();
 app.MapMatching();
 
+// Alles, was keine Schnittstelle ist, bekommt die Seite — der Router läuft
+// im Browser. Ohne das endet ein Neuladen auf /admin in einem 404.
+if (Directory.Exists(oberfläche))
+{
+    app.MapFallback(() => Results.File(Path.Combine(oberfläche, "index.html"), "text/html"))
+        .AllowAnonymous();
+}
+
 app.Run();
 
 /// <summary>Damit die Tests den Server hochfahren können.</summary>
diff --git a/server/tests/Flaro.Api.Tests/CodeSignInTests.cs b/server/tests/Flaro.Api.Tests/CodeSignInTests.cs
index 07372f8..a93229c 100644
--- a/server/tests/Flaro.Api.Tests/CodeSignInTests.cs
+++ b/server/tests/Flaro.Api.Tests/CodeSignInTests.cs
@@ -104,7 +104,10 @@ public class CodeSignInTests
         await server.SetUpAndSignIn();
         var angefordert = await (await CodeAnfordern(server)).Content.ReadFromJsonAsync<CodeResponse>();
 
-        var versuch = await server.Client.PostAsync($"/api/v1/auth/code/{angefordert!.Code}", null);
+        // **Ohne Gedächtnis, weil der Client nach der Anmeldung ein Cookie
+        // hält.** Sonst prüfte dieser Test nicht den Unangemeldeten, sondern
+        // den Angemeldeten — und bestünde nie wieder.
+        var versuch = await server.OhneGedaechtnis().PostAsync($"/api/v1/auth/code/{angefordert!.Code}", null);
         Assert.That(versuch.StatusCode, Is.EqualTo(HttpStatusCode.Unauthorized));
 
         var danach = await server.Client.GetFromJsonAsync<CodeState>($"/api/v1/auth/code/{angefordert.Handle}");
diff --git a/server/tests/Flaro.Api.Tests/DeliveryTests.cs b/server/tests/Flaro.Api.Tests/DeliveryTests.cs
index 548f45b..28a57b6 100644
--- a/server/tests/Flaro.Api.Tests/DeliveryTests.cs
+++ b/server/tests/Flaro.Api.Tests/DeliveryTests.cs
@@ -186,7 +186,10 @@ public class DeliveryTests
         Film("Geschuetzt (2020)", "mp4");
         var (_, datei) = await Eingelesen();
 
-        var antwort = await _server!.Client.GetAsync($"/api/v1/files/{datei.Id}/download");
+        // **Ohne Gedächtnis, weil der Client nach der Anmeldung ein Cookie
+        // hält.** Sonst prüfte dieser Test nicht den Unangemeldeten, sondern
+        // den Angemeldeten — und bestünde nie wieder.
+        var antwort = await _server!.OhneGedaechtnis().GetAsync($"/api/v1/files/{datei.Id}/download");
         Assert.That(antwort.StatusCode, Is.EqualTo(HttpStatusCode.Unauthorized));
     }
 }
diff --git a/server/tests/Flaro.Api.Tests/FlaroServer.cs b/server/tests/Flaro.Api.Tests/FlaroServer.cs
index e0b99cc..dad5b54 100644
--- a/server/tests/Flaro.Api.Tests/FlaroServer.cs
+++ b/server/tests/Flaro.Api.Tests/FlaroServer.cs
@@ -1,6 +1,7 @@
 using System.Net.Http.Headers;
 using System.Net.Http.Json;
 using Flaro.Api.Endpoints;
+using Microsoft.AspNetCore.Hosting;
 using Microsoft.AspNetCore.Mvc.Testing;
 using Microsoft.Extensions.DependencyInjection;
 using Microsoft.Extensions.Hosting;
@@ -24,7 +25,12 @@ public sealed class FlaroServer : IDisposable
 
     public HttpClient Client { get; }
 
-    public FlaroServer(Action<IServiceCollection>? dienste = null)
+    /// <param name="inhaltswurzel">
+    /// Ein anderes Stammverzeichnis für den Server — nur nötig, wenn ein Test
+    /// eine ausgelieferte Oberfläche braucht, denn die sucht der Server unter
+    /// <c>wwwroot</c> neben sich.
+    /// </param>
+    public FlaroServer(Action<IServiceCollection>? dienste = null, string? inhaltswurzel = null)
     {
         _verzeichnis = Path.Combine(Path.GetTempPath(), "flaro-test-" + Guid.CreateVersion7().ToString("N"));
         Environment.SetEnvironmentVariable("FLARO_DATA", Path.Combine(_verzeichnis, "config"));
@@ -36,27 +42,32 @@ public sealed class FlaroServer : IDisposable
         Environment.SetEnvironmentVariable("FLARO_RATELIMIT_SIGNIN", "10000");
 
         _grundlage = new WebApplicationFactory<Program>();
-        _fabrik = _grundlage.WithWebHostBuilder(b => b.ConfigureServices(sammlung =>
+        _fabrik = _grundlage.WithWebHostBuilder(b =>
         {
-            // **Ohne das dauert der ganze Lauf eine Viertelstunde.** Ein Host
-            // wartet beim Herunterfahren fünf Sekunden auf seine Dienste, und
-            // bei einem Testserver je Test summiert sich das auf mehr Zeit,
-            // als sämtliche Prüfungen zusammen brauchen. Hier gibt es nichts,
-            // worauf zu warten wäre.
-            sammlung.Configure<HostOptions>(o => o.ShutdownTimeout = TimeSpan.FromMilliseconds(50));
+            if (inhaltswurzel is not null) b.UseContentRoot(inhaltswurzel);
 
-            // **Keine Anfragen nach draussen, solange ein Test es nicht
-            // ausdrücklich will.** Seit ein Schlüssel mitgeliefert wird, würde
-            // jeder Scan sonst wirklich bei TMDB nachfragen: die Tests hingen
-            // am WLAN, und ihre Erwartungen an fremden Daten. „Der Untergang"
-            // hiess prompt „Downfall", weil die Voreinstellung Englisch ist.
-            //
-            // Vor `dienste`, damit ein Test seinen eigenen Anbieter
-            // nachschieben kann — die spätere Eintragung gewinnt.
-            sammlung.AddScoped<IMetadataProvider, AbgeschalteterAnbieter>();
+            b.ConfigureServices(sammlung =>
+            {
+                // **Ohne das dauert der ganze Lauf eine Viertelstunde.** Ein Host
+                // wartet beim Herunterfahren fünf Sekunden auf seine Dienste, und
+                // bei einem Testserver je Test summiert sich das auf mehr Zeit,
+                // als sämtliche Prüfungen zusammen brauchen. Hier gibt es nichts,
+                // worauf zu warten wäre.
+                sammlung.Configure<HostOptions>(o => o.ShutdownTimeout = TimeSpan.FromMilliseconds(50));
 
-            dienste?.Invoke(sammlung);
-        }));
+                // **Keine Anfragen nach draussen, solange ein Test es nicht
+                // ausdrücklich will.** Seit ein Schlüssel mitgeliefert wird, würde
+                // jeder Scan sonst wirklich bei TMDB nachfragen: die Tests hingen
+                // am WLAN, und ihre Erwartungen an fremden Daten. „Der Untergang"
+                // hiess prompt „Downfall", weil die Voreinstellung Englisch ist.
+                //
+                // Vor `dienste`, damit ein Test seinen eigenen Anbieter
+                // nachschieben kann — die spätere Eintragung gewinnt.
+                sammlung.AddScoped<IMetadataProvider, AbgeschalteterAnbieter>();
+
+                dienste?.Invoke(sammlung);
+            });
+        });
         Client = _fabrik.CreateClient();
     }
 
@@ -84,6 +95,16 @@ public sealed class FlaroServer : IDisposable
         return client;
     }
 
+    /// <summary>Ein Client, der Cookies weder behält noch mitschickt.</summary>
+    ///
+    /// <remarks>
+    /// Der gewöhnliche Testclient führt im Hintergrund einen Cookie-Behälter
+    /// mit. Wer prüfen will, <i>ob</i> ein Cookie wirkt, darf sich nicht
+    /// darauf verlassen — sonst prüft er den Behälter, nicht den Server.
+    /// </remarks>
+    public HttpClient OhneGedaechtnis() =>
+        _fabrik.CreateClient(new WebApplicationFactoryClientOptions { HandleCookies = false });
+
     public void Dispose()
     {
         _fabrik.Dispose();
diff --git a/server/tests/Flaro.Api.Tests/MetadataTests.cs b/server/tests/Flaro.Api.Tests/MetadataTests.cs
index a4c8b48..4ed5cf3 100644
--- a/server/tests/Flaro.Api.Tests/MetadataTests.cs
+++ b/server/tests/Flaro.Api.Tests/MetadataTests.cs
@@ -383,7 +383,10 @@ public class ImageEndpointTests
         using var server = new FlaroServer();
         await server.SetUpAndSignIn();
 
-        var antwort = await server.Client.GetAsync($"/api/v1/images/{new string('a', 64)}");
+        // **Ohne Gedächtnis, weil der Client nach der Anmeldung ein Cookie
+        // hält.** Sonst prüfte dieser Test nicht den Unangemeldeten, sondern
+        // den Angemeldeten — und bestünde nie wieder.
+        var antwort = await server.OhneGedaechtnis().GetAsync($"/api/v1/images/{new string('a', 64)}");
         Assert.That(antwort.StatusCode, Is.EqualTo(HttpStatusCode.Unauthorized));
     }
 
diff --git a/server/tests/Flaro.Api.Tests/SignInTests.cs b/server/tests/Flaro.Api.Tests/SignInTests.cs
index 480219b..b3ba02e 100644
--- a/server/tests/Flaro.Api.Tests/SignInTests.cs
+++ b/server/tests/Flaro.Api.Tests/SignInTests.cs
@@ -71,7 +71,10 @@ public class SignInTests
         using var server = new FlaroServer();
         await server.SetUpAndSignIn();
 
-        var antwort = await server.Client.GetAsync("/api/v1/auth/me");
+        // **Ohne Gedächtnis, weil der Client nach der Anmeldung ein Cookie
+        // hält.** Sonst prüfte dieser Test nicht den Unangemeldeten, sondern
+        // den Angemeldeten — und bestünde nie wieder.
+        var antwort = await server.OhneGedaechtnis().GetAsync("/api/v1/auth/me");
         Assert.That(antwort.StatusCode, Is.EqualTo(HttpStatusCode.Unauthorized));
     }
 
diff --git a/server/tests/Flaro.Api.Tests/WebInterfaceTests.cs b/server/tests/Flaro.Api.Tests/WebInterfaceTests.cs
new file mode 100644
index 0000000..935adaa
--- /dev/null
+++ b/server/tests/Flaro.Api.Tests/WebInterfaceTests.cs
@@ -0,0 +1,146 @@
+using System.Net;
+using System.Net.Http.Json;
+using Flaro.Api.Auth;
+using Flaro.Api.Endpoints;
+
+namespace Flaro.Api.Tests;
+
+/// <summary>Was der Browser braucht und die Apps nicht.</summary>
+///
+/// <remarks>
+/// Eine App legt ihr Token in jede Anfrage. Ein Browser kann das nicht:
+/// <c>&lt;img&gt;</c>, <c>&lt;video&gt;</c> und ein Download-Link senden keine
+/// eigenen Kopfzeilen. Das Token in die Adresse zu schreiben wäre der
+/// naheliegende Ausweg — und stünde danach in jedem Zugriffsprotokoll, in
+/// jedem Verlauf und in jedem weitergegebenen Link. Also ein Cookie.
+/// </remarks>
+[TestFixture]
+public sealed class WebInterfaceTests
+{
+    [Test]
+    public async Task Anmeldung_legt_ein_Cookie_ab()
+    {
+        using var server = new FlaroServer();
+        await server.SetUpAndSignIn();
+
+        var antwort = await server.OhneGedaechtnis().PostAsJsonAsync("/api/v1/auth/login",
+            new LoginRequest("guido", "ein-langes-passwort", "Browser", "browser-1"));
+
+        var gesetzt = antwort.Headers.GetValues("Set-Cookie").Single();
+
+        Assert.Multiple(() =>
+        {
+            Assert.That(gesetzt, Does.StartWith($"{TokenAuthenticationHandler.CookieName}="));
+            // Kein Skript kommt heran, auch keines, das sich eingeschlichen hat.
+            Assert.That(gesetzt, Does.Contain("httponly").IgnoreCase);
+            // Eine fremde Seite kann damit nichts auslösen.
+            Assert.That(gesetzt, Does.Contain("samesite=strict").IgnoreCase);
+            // Über http wäre „secure" ein Cookie, das der Browser nie schickt —
+            // und damit eine Oberfläche, die sich im Heimnetz nicht bedienen lässt.
+            Assert.That(gesetzt, Does.Not.Contain("secure").IgnoreCase);
+        });
+    }
+
+    [Test]
+    public async Task Cookie_allein_genuegt_fuer_eine_Anfrage()
+    {
+        using var server = new FlaroServer();
+        await server.SetUpAndSignIn();
+
+        var client = server.OhneGedaechtnis();
+        var angemeldet = await client.PostAsJsonAsync("/api/v1/auth/login",
+            new LoginRequest("guido", "ein-langes-passwort", "Browser", "browser-1"));
+        var keks = Keks(angemeldet);
+
+        // Ohne Kopfzeile — genau so, wie ein <img> fragt.
+        var anfrage = new HttpRequestMessage(HttpMethod.Get, "/api/v1/movies");
+        anfrage.Headers.Add("Cookie", keks);
+        var antwort = await client.SendAsync(anfrage);
+
+        Assert.That(antwort.StatusCode, Is.EqualTo(HttpStatusCode.OK));
+    }
+
+    [Test]
+    public async Task Ohne_Cookie_und_ohne_Kopfzeile_bleibt_es_bei_401()
+    {
+        using var server = new FlaroServer();
+        await server.SetUpAndSignIn();
+
+        var antwort = await server.OhneGedaechtnis().GetAsync("/api/v1/movies");
+
+        Assert.That(antwort.StatusCode, Is.EqualTo(HttpStatusCode.Unauthorized));
+    }
+
+    [Test]
+    public async Task Abmelden_entwertet_das_Cookie()
+    {
+        using var server = new FlaroServer();
+        await server.SetUpAndSignIn();
+
+        var client = server.OhneGedaechtnis();
+        var angemeldet = await client.PostAsJsonAsync("/api/v1/auth/login",
+            new LoginRequest("guido", "ein-langes-passwort", "Browser", "browser-1"));
+        var keks = Keks(angemeldet);
+
+        var abmelden = new HttpRequestMessage(HttpMethod.Post, "/api/v1/auth/logout");
+        abmelden.Headers.Add("Cookie", keks);
+        (await client.SendAsync(abmelden)).EnsureSuccessStatusCode();
+
+        // **Das Token muss serverseitig weg sein, nicht nur das Cookie im
+        // Browser.** Ein gelöschtes Cookie schützt niemanden, der den Wert
+        // vorher mitgeschrieben hat.
+        var danach = new HttpRequestMessage(HttpMethod.Get, "/api/v1/movies");
+        danach.Headers.Add("Cookie", keks);
+
+        Assert.That((await client.SendAsync(danach)).StatusCode,
+            Is.EqualTo(HttpStatusCode.Unauthorized));
+    }
+
+    /// <summary>Die Oberfläche kommt heraus, bevor jemand angemeldet ist.</summary>
+    ///
+    /// <remarks>
+    /// <b>Der Fehler, den dieser Test festhält.</b> Die Rückfallregel verlangt
+    /// für jede Anfrage ohne eigenen Endpunkt einen angemeldeten Benutzer, und
+    /// <c>/assets/index.js</c> hat keinen. Standen die statischen Dateien unter
+    /// <c>UseAuthorization</c>, bekam ein neuer Besucher 401 auf genau das
+    /// Skript, das ihm die Anmeldemaske zeichnen sollte: eine weisse Seite,
+    /// ohne Hinweis worauf.
+    /// </remarks>
+    [Test]
+    public async Task Die_Oberflaeche_braucht_keine_Anmeldung()
+    {
+        var wurzel = Path.Combine(Path.GetTempPath(), "flaro-www-" + Guid.CreateVersion7().ToString("N"));
+        Directory.CreateDirectory(Path.Combine(wurzel, "wwwroot", "assets"));
+        await File.WriteAllTextAsync(Path.Combine(wurzel, "wwwroot", "index.html"), "<!doctype html><title>Flaro</title>");
+        await File.WriteAllTextAsync(Path.Combine(wurzel, "wwwroot", "assets", "app.js"), "export const da = true;");
+
+        try
+        {
+            using var server = new FlaroServer(inhaltswurzel: wurzel);
+            var client = server.OhneGedaechtnis();
+
+            var seite = await client.GetAsync("/");
+            var skript = await client.GetAsync("/assets/app.js");
+            // Der Router läuft im Browser: ein Neuladen auf einer Unterseite
+            // darf nicht in einem 404 enden.
+            var unterseite = await client.GetAsync("/verwaltung");
+
+            Assert.Multiple(() =>
+            {
+                Assert.That(seite.StatusCode, Is.EqualTo(HttpStatusCode.OK));
+                Assert.That(skript.StatusCode, Is.EqualTo(HttpStatusCode.OK));
+                Assert.That(unterseite.StatusCode, Is.EqualTo(HttpStatusCode.OK));
+            });
+
+            Assert.That(await skript.Content.ReadAsStringAsync(), Is.EqualTo("export const da = true;"));
+        }
+        finally
+        {
+            try { Directory.Delete(wurzel, recursive: true); } catch (IOException) { /* Aufräumen ist Kür */ }
+        }
+    }
+
+    /// <summary>Nimmt den Namen und den Wert aus der Set-Cookie-Kopfzeile.</summary>
+    private static string Keks(HttpResponseMessage antwort) =>
+        antwort.Headers.GetValues("Set-Cookie").Single().Split(';')[0];
+}
diff --git a/web/app/index.html b/web/app/index.html
index 6d2119e..a587552 100644
--- a/web/app/index.html
+++ b/web/app/index.html
@@ -3,12 +3,13 @@
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+<meta name="theme-color" content="#0B0B0D">
 <title>Flaro</title>
 </head>
 <body>
   <section id="login"></section>
   <div id="app" class="hidden">
-    <nav id="chrome"><div class="island" id="island"></div></nav>
+    <nav id="chrome"></nav>
     <main id="content"></main>
   </div>
   <script type="module" src="/src/main.ts"></script>
diff --git a/web/app/src/api.ts b/web/app/src/api.ts
index e15c18e..451280b 100644
--- a/web/app/src/api.ts
+++ b/web/app/src/api.ts
@@ -1,151 +1,219 @@
-import type { Wiedergabeauskunft } from './types';
+/* Die Schnittstelle von Flaro, wie der Browser sie sieht.
+ *
+ * Eine Datei, weil es eine Schnittstelle ist: wer wissen will, was der Server
+ * kann, liest hier und nicht in fünf Ansichten nach. */
 
-/* Der Draht zum Server.
-   ----------------------------------------------------------------------------
-   **Alles geht über `/api`, nicht über die Adresse des Medienservers.** Das
-   ist der Grund, warum es diesen Server überhaupt gibt: Er reicht die
-   Anfragen weiter, und damit haben Seite und Daten dieselbe Herkunft. Kein
-   CORS, kein Ärger mit gemischtem HTTP und HTTPS, und der Zugangsschlüssel
-   bleibt beim Server statt im Browser zu liegen.
+export type Rolle = { id: string; userName: string; isAdministrator: boolean };
+export type Spur = {
+  index: number; kind: 'Video' | 'Audio' | 'Subtitle';
+  codec: string | null; language: string | null; title: string | null;
+  isDefault: boolean; isForced: boolean;
+  channels: number | null; width: number | null; height: number | null;
+};
+export type Datei = {
+  id: string; fileName: string; sizeBytes: number;
+  container: string | null; durationSeconds: number | null; streams: Spur[];
+};
+export type Film = {
+  id: string; title: string; year: number | null; overview: string | null;
+  posterImage: string | null; backdropImage: string | null; files: Datei[];
+};
+export type Serie = {
+  id: string; title: string; year: number | null; overview: string | null;
+  posterImage: string | null; backdropImage: string | null;
+  episodeCount: number; seasons: number[];
+};
+export type Folge = {
+  id: string; season: number; episode: number;
+  title: string | null; overview: string | null; stillImage: string | null; files: Datei[];
+};
+export type Bibliothek = { id: string; name: string; kind: string; path: string };
+export type Seite<T> = { items: T[]; total: number };
+export type Lieferung = {
+  method: 'directFile' | 'remux'; reasons: string[];
+  audioToEncode: number[]; subtitlesDropped: number[];
+  packageState: string; progress: number; error: string | null;
+};
+export type Scanstand = {
+  state: string; filesFound: number | null; added: number | null;
+  removed: number | null; unrecognised: number | null; probed: number | null;
+  problems: { path: string; reason: string }[] | null; error: string | null;
+  metadata: { moviesMatched: number; seriesMatched: number; episodesMatched: number;
+              skipped: boolean; error: string | null } | null;
+};
+export type Vorschlag = {
+  tmdbId: number; title: string; year: number | null;
+  overview: string | null; posterUrl: string | null;
+};
+export type Hinweis = { text: string; logoUrl: string; url: string };
 
-   Die Endpunkte selbst sind dieselben, die auch die App benutzt — übernommen
-   aus JellyfinKit, nicht geraten. */
+/* ---------- Sitzung ---------- */
 
-const BASIS = '/api';
+const SCHLUESSEL = 'flaro.session';
 
-export const sitzung = {
-  token: localStorage.getItem('flaro.token') ?? '',
-  userId: localStorage.getItem('flaro.user') ?? '',
-  geraet:
-    localStorage.getItem('flaro.device') ??
-    (() => {
-      const id = 'flaro-web-' + Math.random().toString(36).slice(2, 12);
-      localStorage.setItem('flaro.device', id);
-      return id;
-    })(),
+export const sitzung: { token: string | null; wer: Rolle | null } = {
+  token: null, wer: null,
 };
 
-/** Die Kopfzeile, mit oder ohne Schlüssel.
- *
- *  Die Anführungszeichen sind Pflicht, auch um Werte ohne Leerzeichen —
- *  Jellyfin zerlegt die Zeile sonst falsch und meldet, man sei nicht
- *  angemeldet, obwohl der Schlüssel stimmt. */
-function kopfzeile(): string {
-  const teile = [
-    'Client="Flaro Web"',
-    'Device="Browser"',
-    `DeviceId="${sitzung.geraet}"`,
-    'Version="0.1"',
-  ];
-  if (sitzung.token) teile.push(`Token="${sitzung.token}"`);
-  return 'MediaBrowser ' + teile.join(', ');
+try {
+  const roh = localStorage.getItem(SCHLUESSEL);
+  if (roh) Object.assign(sitzung, JSON.parse(roh));
+} catch { /* Privates Fenster oder gesperrter Speicher — dann eben anmelden. */ }
+
+function merken(): void {
+  try {
+    if (sitzung.token) localStorage.setItem(SCHLUESSEL, JSON.stringify(sitzung));
+    else localStorage.removeItem(SCHLUESSEL);
+  } catch { /* Nicht schlimm: die Sitzung gilt dann nur bis zum Neuladen. */ }
 }
 
-export class ServerFehler extends Error {
-  constructor(public status: number, text: string) {
-    super(text);
+export const angemeldet = (): boolean => Boolean(sitzung.token);
+export const istAdmin = (): boolean => Boolean(sitzung.wer?.isAdministrator);
+
+/* ---------- Anfragen ---------- */
+
+export class ApiFehler extends Error {
+  constructor(public status: number, nachricht: string) { super(nachricht); }
+}
+
+async function anfrage<T>(pfad: string, opts: RequestInit = {}): Promise<T> {
+  const kopf = new Headers(opts.headers);
+  if (sitzung.token) kopf.set('Authorization', `Bearer ${sitzung.token}`);
+  if (opts.body && !kopf.has('Content-Type')) kopf.set('Content-Type', 'application/json');
+
+  const antwort = await fetch(`/api/v1${pfad}`, { ...opts, headers: kopf });
+
+  // 401 heisst: das Token gilt nicht mehr. Weiterzumachen, als wäre nichts,
+  // führt zu einer Oberfläche, die bei jedem Klick stumm scheitert.
+  if (antwort.status === 401 && sitzung.token) { abmelden(); location.reload(); }
+
+  if (!antwort.ok) {
+    let text = `${antwort.status}`;
+    try {
+      const fehler = await antwort.json();
+      text = fehler.detail ?? fehler.title
+        ?? Object.values(fehler.errors ?? {}).flat().join(' ') ?? text;
+    } catch { /* Keine JSON-Antwort — dann bleibt der Status. */ }
+    throw new ApiFehler(antwort.status, text);
   }
+
+  return antwort.status === 204 ? (undefined as T) : antwort.json();
 }
 
-export async function api<T = unknown>(pfad: string, opts: RequestInit = {}): Promise<T> {
-  const res = await fetch(BASIS + pfad, {
-    ...opts,
-    headers: {
-      Authorization: kopfzeile(),
-      Accept: 'application/json',
-      ...(opts.body ? { 'Content-Type': 'application/json' } : {}),
-      ...opts.headers,
-    },
+/* ---------- Bilder ---------- */
+
+/** Die Adresse eines Bildes.
+ *
+ * Schlicht ein Pfad, denn der Browser weist sich über das Sitzungs-Cookie
+ * aus — `<img>`, `<video>` und ein Download-Link können das von sich aus.
+ * Ohne das Cookie müsste jedes Plakat über fetch kommen und im
+ * Arbeitsspeicher liegen. */
+export const bildAdresse = (schluessel: string | null): string | null =>
+  schluessel ? `/api/v1/images/${schluessel}` : null;
+
+/* ---------- System und Anmeldung ---------- */
+
+export const systemauskunft = () =>
+  anfrage<{ version: string; needsSetup: boolean; attributions: Hinweis[] }>('/system/info');
+
+export const einrichten = (benutzer: string, passwort: string) =>
+  anfrage<Rolle>('/system/setup', {
+    method: 'POST', body: JSON.stringify({ userName: benutzer, password: passwort }),
   });
 
-  if (!res.ok) {
-    throw new ServerFehler(
-      res.status,
-      res.status === 401 ? 'Nicht angemeldet' : `HTTP ${res.status}`,
-    );
-  }
-  return res.status === 204 ? (null as T) : ((await res.json()) as T);
-}
-
-/** Eine Adresse für das <video>-Element oder ein <img>.
- *
- *  Beide schicken keine Kopfzeilen mit, deshalb hängt der Schlüssel in der
- *  Adresse. Denselben Umweg geht die App. */
-export function medienURL(pfad: string, query: Record<string, string | number> = {}): string {
-  const u = new URL(BASIS + pfad, location.origin);
-  for (const [k, v] of Object.entries(query)) {
-    if (v !== '' && v != null) u.searchParams.set(k, String(v));
-  }
-  if (sitzung.token) u.searchParams.set('api_key', sitzung.token);
-  return u.href;
-}
-
-/* ---------- Anmeldung ---------- */
-
 export async function anmelden(benutzer: string, passwort: string): Promise<void> {
-  sitzung.token = '';
-  const r = await api<{ AccessToken: string; User: { Id: string } }>(
-    '/Users/AuthenticateByName',
-    { method: 'POST', body: JSON.stringify({ Username: benutzer, Pw: passwort }) },
-  );
-  sitzung.token = r.AccessToken;
-  sitzung.userId = r.User.Id;
-  localStorage.setItem('flaro.token', sitzung.token);
-  localStorage.setItem('flaro.user', sitzung.userId);
+  const antwort = await anfrage<{ token: string; user: Rolle }>('/auth/login', {
+    method: 'POST',
+    body: JSON.stringify({
+      userName: benutzer, password: passwort,
+      deviceName: geraetename(), deviceId: geraetekennung(),
+    }),
+  });
+  sitzung.token = antwort.token;
+  sitzung.wer = antwort.user;
+  merken();
 }
 
 export function abmelden(): void {
-  localStorage.removeItem('flaro.token');
-  localStorage.removeItem('flaro.user');
-  location.reload();
+  if (sitzung.token) anfrage('/auth/logout', { method: 'POST' }).catch(() => {});
+  sitzung.token = null; sitzung.wer = null;
+  merken();
 }
 
-export const angemeldet = (): boolean => Boolean(sitzung.token && sitzung.userId);
-
-/* ---------- Wiedergabe ---------- */
-
-/** Handelt mit dem Server aus, wie abgespielt wird.
- *
- *  Das Geräteprofil sagt, was dieses Ende kann; die Antwort sagt, was daraus
- *  folgt. Leere `DirectPlayProfiles` heißt: nichts geht unverändert, rechne
- *  um. Im Browser ist das die ehrliche Auskunft — ein <video>-Element kann
- *  kein MKV und kein DTS. */
-export function wiedergabeauskunft(
-  itemID: string,
-  wahl: { quality?: number; audio?: number | null; subtitle?: number | null } = {},
-): Promise<Wiedergabeauskunft> {
-  const grenze = (wahl.quality ?? 0) > 0 ? wahl.quality! : 20000;
-  const profil = {
-    MaxStreamingBitrate: grenze * 1000,
-    DirectPlayProfiles: [],
-    TranscodingProfiles: [
-      {
-        Type: 'Video', Container: 'ts', Protocol: 'hls', VideoCodec: 'h264',
-        AudioCodec: 'aac,mp3', Context: 'Streaming', MaxAudioChannels: '2',
-        MinSegments: 1, BreakOnNonKeyFrames: true,
-      },
-    ],
-    SubtitleProfiles: [
-      { Format: 'vtt', Method: 'Hls' },
-      { Format: 'srt', Method: 'External' },
-    ],
-  };
-
-  return api<Wiedergabeauskunft>(
-    `/Items/${itemID}/PlaybackInfo?` + new URLSearchParams({ userId: sitzung.userId }),
-    {
-      method: 'POST',
-      body: JSON.stringify({
-        DeviceProfile: profil,
-        UserId: sitzung.userId,
-        MaxStreamingBitrate: profil.MaxStreamingBitrate,
-        EnableDirectPlay: false,
-        EnableDirectStream: false,
-        EnableTranscoding: true,
-        AutoOpenLiveStream: true,
-        ...(wahl.audio != null ? { AudioStreamIndex: wahl.audio } : {}),
-        ...((wahl.subtitle ?? -1) >= 0 ? { SubtitleStreamIndex: wahl.subtitle } : {}),
-      }),
-    },
-  );
+function geraetename(): string {
+  const u = navigator.userAgent;
+  const was = /iPhone/.test(u) ? 'iPhone' : /iPad/.test(u) ? 'iPad'
+    : /Macintosh/.test(u) ? 'Mac' : /Windows/.test(u) ? 'Windows' : 'Browser';
+  return `${was} · ${/Firefox/.test(u) ? 'Firefox' : /Chrome/.test(u) ? 'Chrome' : 'Safari'}`;
+}
+
+/** Bleibt gleich, damit derselbe Browser nicht als zehn Geräte dasteht. */
+function geraetekennung(): string {
+  const name = 'flaro.device';
+  try {
+    let vorhanden = localStorage.getItem(name);
+    if (!vorhanden) { vorhanden = crypto.randomUUID(); localStorage.setItem(name, vorhanden); }
+    return vorhanden;
+  } catch { return crypto.randomUUID(); }
+}
+
+/* ---------- Mediathek ---------- */
+
+export const filme = (q: { search?: string; skip?: number; take?: number } = {}) =>
+  anfrage<Seite<Film>>(`/movies${abfrage(q)}`);
+
+export const serien = (q: { search?: string; skip?: number; take?: number } = {}) =>
+  anfrage<Seite<Serie>>(`/series${abfrage(q)}`);
+
+export const folgen = (serie: string, staffel?: number) =>
+  anfrage<Seite<Folge>>(`/series/${serie}/episodes${abfrage({ season: staffel })}`);
+
+export const lieferung = (datei: string) => anfrage<Lieferung>(`/files/${datei}/delivery`);
+
+export const downloadAdresse = (datei: string) => `/api/v1/files/${datei}/download`;
+
+/* ---------- Verwaltung ---------- */
+
+export const bibliotheken = () => anfrage<Bibliothek[]>('/libraries');
+
+export const bibliothekAnlegen = (name: string, art: string, pfad: string) =>
+  anfrage<Bibliothek>('/libraries', {
+    method: 'POST', body: JSON.stringify({ name, kind: art, path: pfad }),
+  });
+
+export const scanStarten = (id: string) =>
+  anfrage<unknown>(`/libraries/${id}/scan`, { method: 'POST' });
+
+export const scanstand = (id: string) => anfrage<Scanstand>(`/libraries/${id}/scan`);
+
+export const benutzer = () => anfrage<Rolle[]>('/users');
+
+export const benutzerAnlegen = (name: string, passwort: string, admin: boolean) =>
+  anfrage<Rolle>('/users', {
+    method: 'POST',
+    body: JSON.stringify({ userName: name, password: passwort, isAdministrator: admin }),
+  });
+
+export const metadatenEinstellung = () =>
+  anfrage<{ hasApiKey: boolean; language: string; usingProjectKey: boolean }>('/settings/metadata');
+
+export const metadatenSetzen = (werte: { apiKey?: string; language?: string }) =>
+  anfrage<void>('/settings/metadata', { method: 'PUT', body: JSON.stringify(werte) });
+
+/* ---------- Zuordnung ---------- */
+
+export const vorschlaege = (art: 'movies' | 'series', id: string, suche?: string, jahr?: number) =>
+  anfrage<Vorschlag[]>(`/${art}/${id}/matches${abfrage({ query: suche, year: jahr })}`);
+
+export const zuordnen = (art: 'movies' | 'series', id: string, tmdbId: number) =>
+  anfrage<{ tmdbId: number; imdbId: string | null; locked: boolean; title: string; year: number | null }>(
+    `/${art}/${id}/match`, { method: 'PUT', body: JSON.stringify({ tmdbId }) });
+
+/* ---------- Hilfsmittel ---------- */
+
+function abfrage(werte: Record<string, string | number | undefined>): string {
+  const teile = Object.entries(werte)
+    .filter(([, v]) => v !== undefined && v !== '')
+    .map(([k, v]) => `${k}=${encodeURIComponent(String(v))}`);
+  return teile.length ? `?${teile.join('&')}` : '';
 }
diff --git a/web/app/src/contrast.ts b/web/app/src/contrast.ts
deleted file mode 100644
index c73d27f..0000000
--- a/web/app/src/contrast.ts
+++ /dev/null
@@ -1,97 +0,0 @@
-/* Kontrastrechnung nach WCAG 2.1 — dieselbe wie in der App.
-   ----------------------------------------------------------------------------
-   Flaro lässt jede Farbe zu, aber ein dunkles Marineblau auf fast schwarzem
-   Grund ist als Schrift unlesbar. Solche Farben werden angehoben, bis sie den
-   geforderten Kontrast erreichen — und es wird gesagt, statt die Farbe
-   stillschweigend zu verändern.
-
-   Zuerst die Helligkeit, weil das den Farbton erhält: eine gewählte
-   Akzentfarbe soll erkennbar dieselbe bleiben. Reicht selbst volle Helligkeit
-   nicht, wird die Sättigung zurückgenommen, und die Farbe wandert Richtung
-   Weiß. */
-
-export type RGB = [number, number, number];
-
-const MINDESTENS = 4.5;
-
-export function leuchtdichte([r, g, b]: RGB): number {
-  // Der Knick bei 0,03928 ist kein Rundungsfehler, sondern Teil der
-  // sRGB-Definition: unterhalb davon ist die Kurve linear.
-  const linear = (c: number): number =>
-    c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
-  return 0.2126 * linear(r) + 0.7152 * linear(g) + 0.0722 * linear(b);
-}
-
-export function verhaeltnis(a: RGB, b: RGB): number {
-  const la = leuchtdichte(a);
-  const lb = leuchtdichte(b);
-  return (Math.max(la, lb) + 0.05) / (Math.min(la, lb) + 0.05);
-}
-
-export function lesbarMachen(farbe: RGB, grund: RGB): { farbe: RGB; geaendert: boolean } {
-  if (verhaeltnis(farbe, grund) >= MINDESTENS) return { farbe, geaendert: false };
-
-  const [h, s, v] = zuHSV(farbe);
-  // Beide Schritte sind monoton — mehr Helligkeit und weniger Sättigung
-  // erhöhen die Leuchtdichte immer. Deshalb genügt eine binäre Suche, und
-  // sie endet garantiert.
-  const suche = (tief: number, hoch: number, bauen: (x: number) => RGB): RGB | null => {
-    if (verhaeltnis(bauen(hoch), grund) < MINDESTENS) return null;
-    let u = tief;
-    let o = hoch;
-    for (let i = 0; i < 24; i++) {
-      const mitte = (u + o) / 2;
-      if (verhaeltnis(bauen(mitte), grund) >= MINDESTENS) o = mitte;
-      else u = mitte;
-    }
-    return bauen(o);
-  };
-
-  const heller = suche(v, 1, (x) => ausHSV(h, s, x));
-  if (heller) return { farbe: heller, geaendert: true };
-
-  const blasser = suche(s, 0, (x) => ausHSV(h, x, 1));
-  return { farbe: blasser ?? [1, 1, 1], geaendert: true };
-}
-
-function zuHSV([r, g, b]: RGB): RGB {
-  const max = Math.max(r, g, b);
-  const min = Math.min(r, g, b);
-  const d = max - min;
-  let h = 0;
-  if (d) {
-    if (max === r) h = ((g - b) / d) % 6;
-    else if (max === g) h = (b - r) / d + 2;
-    else h = (r - g) / d + 4;
-    h /= 6;
-    if (h < 0) h += 1;
-  }
-  return [h, max ? d / max : 0, max];
-}
-
-function ausHSV(h: number, s: number, v: number): RGB {
-  const i = Math.floor(h * 6);
-  const f = h * 6 - i;
-  const p = v * (1 - s);
-  const q = v * (1 - f * s);
-  const t = v * (1 - (1 - f) * s);
-  const saetze: RGB[] = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]];
-  return saetze[i % 6]!;
-}
-
-export function ausHex(hex: string): RGB | null {
-  const m = /^#?([0-9a-f]{6})$/i.exec(hex.trim());
-  if (!m) return null;
-  const n = parseInt(m[1]!, 16);
-  return [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255];
-}
-
-export function alsHex([r, g, b]: RGB): string {
-  return (
-    '#' +
-    [r, g, b]
-      .map((c) => Math.round(Math.min(Math.max(c, 0), 1) * 255).toString(16).padStart(2, '0'))
-      .join('')
-      .toUpperCase()
-  );
-}
diff --git a/web/app/src/main.ts b/web/app/src/main.ts
index 7f9419c..557b55c 100644
--- a/web/app/src/main.ts
+++ b/web/app/src/main.ts
@@ -1,193 +1,140 @@
 import './style.css';
-import type { Item, Seite } from './types';
-import { api, sitzung, angemeldet, abmelden } from './api';
-import { P, anwenden, setzen } from './prefs';
-import { icon } from './icons';
-import { esc, FELDER } from './util';
+import {
+  systemauskunft, angemeldet, istAdmin, abmelden, sitzung, type Hinweis,
+} from './api';
+import { einrichtung } from './views/setup';
 import { anmeldung } from './views/login';
 import { startseite } from './views/home';
 import { mediathek } from './views/library';
-import { einstellungen } from './views/settings';
-import { blatt } from './views/cards';
-import { playerOeffnen } from './views/player';
+import { detailseite } from './views/detail';
+import { verwaltung } from './views/admin';
+import { esc } from './util';
 
+const anmeldeflaeche = document.getElementById('login')!;
 const app = document.getElementById('app')!;
+const leiste = document.getElementById('chrome')!;
 const inhalt = document.getElementById('content')!;
-const insel = document.getElementById('island')!;
-const chrome = document.getElementById('chrome')!;
 
-let ansichten: Item[] = [];
-let wo = 'home';
+let hinweise: Hinweis[] = [];
 
-/* ---------- Navigation ---------- */
+/* ---------- Start ---------- */
 
-function inselBauen(): void {
-  insel.innerHTML = '';
+void hochfahren();
 
-  // Der Umschalter zuerst, wie auf dem iPad: an der Seite oben in der Ecke,
-  // oben ganz links vor den Einträgen.
-  const nav = document.createElement('button');
-  nav.className = 'toggle-nav';
-  nav.title = P.nav === 'side' ? 'Leiste nach oben' : 'Leiste an die Seite';
-  nav.setAttribute('aria-label', nav.title);
-  nav.innerHTML = icon(P.nav === 'side' ? 'barTop' : 'barSide', 18);
-  nav.onclick = () => leisteUmziehen(P.nav === 'side' ? 'top' : 'side');
-  insel.appendChild(nav);
+async function hochfahren(): Promise<void> {
+  try {
+    const auskunft = await systemauskunft();
+    hinweise = auskunft.attributions;
 
-  const stueck = (klasse: string, text?: string): void => {
+    if (auskunft.needsSetup) { zeigeAnmeldung(einrichtung(() => location.reload())); return; }
+    if (!angemeldet()) { zeigeAnmeldung(anmeldung(() => location.reload())); return; }
+
+    anmeldeflaeche.classList.add('hidden');
+    app.classList.remove('hidden');
+    leisteBauen();
+    window.addEventListener('hashchange', zeichnen);
+    zeichnen();
+  } catch (fehler) {
+    // Der Server ist nicht erreichbar. Die Anmeldemaske zu zeigen wäre eine
+    // Lüge — sie würde bei jedem Versuch scheitern.
+    anmeldeflaeche.innerHTML =
+      `<div class="login-card"><h1>Flaro</h1>`
+      + `<div class="error">Der Server antwortet nicht: ${esc((fehler as Error).message)}</div>`
+      + `<div class="hint">Läuft er? Stimmt die Adresse?</div></div>`;
+  }
+}
+
+function zeigeAnmeldung(karte: HTMLElement): void {
+  anmeldeflaeche.innerHTML = '';
+  anmeldeflaeche.appendChild(karte);
+  anmeldeflaeche.classList.remove('hidden');
+  app.classList.add('hidden');
+}
+
+/* ---------- Seitenleiste ---------- */
+
+function leisteBauen(): void {
+  leiste.innerHTML = '';
+
+  const marke = document.createElement('div');
+  marke.className = 'marke';
+  marke.textContent = 'Flaro';
+  leiste.appendChild(marke);
+
+  gruppe('Mediathek');
+  eintrag('Start', '#/');
+  eintrag('Filme', '#/filme');
+  eintrag('Serien', '#/serien');
+
+  if (istAdmin()) { gruppe('Server'); eintrag('Verwaltung', '#/verwaltung'); }
+
+  const fuss = document.createElement('div');
+  fuss.className = 'nav-fuss';
+  const ab = document.createElement('button');
+  ab.textContent = `Abmelden · ${sitzung.wer?.userName ?? ''}`;
+  ab.onclick = () => { abmelden(); location.reload(); };
+  fuss.appendChild(ab);
+  leiste.appendChild(fuss);
+
+  function gruppe(text: string): void {
     const d = document.createElement('div');
-    d.className = klasse;
-    if (text) d.textContent = text;
-    insel.appendChild(d);
-  };
-  const eintrag = (text: string, ziel: string): void => {
+    d.className = 'nav-gruppe';
+    d.textContent = text;
+    leiste.appendChild(d);
+  }
+  function eintrag(text: string, ziel: string): void {
     const b = document.createElement('button');
     b.textContent = text;
-    b.dataset.key = ziel;
-    b.onclick = () => gehe(ziel);
-    insel.appendChild(b);
-  };
-
-  stueck('brand', 'Flaro');
-  eintrag('Start', 'home');
-  eintrag('Einstellungen', 'settings');
-
-  if (ansichten.length) {
-    stueck('sep');
-    stueck('group-label', 'Mediatheken');
-    for (const v of ansichten) eintrag(v.Name ?? '—', 'lib:' + v.Id);
-  }
-  stueck('sep');
-  eintrag('Abmelden', 'out');
-
-  [...insel.querySelectorAll('button[data-key]')].forEach((b) =>
-    b.classList.toggle('active', (b as HTMLElement).dataset.key === wo));
-}
-
-/* Lässt die Leiste von ihrer alten Lage in die neue fahren.
-   ----------------------------------------------------------------------------
-   **Zwei Züge, nicht einer.** Ein reiner Weg von A nach B sieht aus, als würde
-   ein Kasten verschoben. Die Leiste zieht sich erst *in sich* zusammen und
-   zieht dann erst um — wie ein Gummiband, das sich sammelt, bevor es schnellt.
-
-   Gemacht mit FLIP: alte Lage messen, umbauen, neue Lage messen, und vom alten
-   Zustand in den neuen fahren. Über CSS allein ginge das nicht — `right: auto`
-   und `bottom: auto` lassen sich nicht animieren, und genau die wechseln. */
-function leisteUmziehen(nach: 'top' | 'side'): void {
-  const vorher = insel.getBoundingClientRect();
-  const sparsam = matchMedia('(prefers-reduced-motion: reduce)').matches;
-
-  setzen('nav', nach);
-  inselBauen();
-
-  if (sparsam) return;
-  const nachher = insel.getBoundingClientRect();
-  if (!vorher.width || !nachher.width) return;
-
-  const dx = vorher.left - nachher.left;
-  const dy = vorher.top - nachher.top;
-  const sx = vorher.width / nachher.width;
-  const sy = vorher.height / nachher.height;
-
-  // Welche Richtung sich zuerst sammelt, hängt davon ab, wohin es geht: Wer
-  // nach oben zieht, wird flach — also klappt zuerst die Höhe zusammen.
-  const gesammelt = nach === 'top'
-    ? `translate(${dx}px, ${dy}px) scale(${sx}, 1)`
-    : `translate(${dx}px, ${dy}px) scale(1, ${sy})`;
-
-  insel.animate(
-    [
-      { transformOrigin: 'top left', transform: `translate(${dx}px, ${dy}px) scale(${sx}, ${sy})`,
-        easing: 'cubic-bezier(.5,0,.75,0)', offset: 0 },
-      { transformOrigin: 'top left', transform: gesammelt,
-        easing: 'cubic-bezier(.22,1,.36,1)', offset: 0.42 },
-      { transformOrigin: 'top left', transform: 'none', offset: 1 },
-    ],
-    { duration: 520 },
-  );
-  insel.animate([{ opacity: 0.35 }, { opacity: 0.5, offset: 0.42 }, { opacity: 1 }],
-    { duration: 420, easing: 'ease-out' });
-}
-
-function gehe(ziel: string): void {
-  if (ziel === 'out') return abmelden();
-  wo = ziel;
-  [...insel.querySelectorAll('button[data-key]')].forEach((b) =>
-    b.classList.toggle('active', (b as HTMLElement).dataset.key === ziel));
-  scrollTo({ top: 0 });
-  inhalt.classList.remove('pad-top');
-
-  if (ziel === 'home') void startseite(inhalt, ansichten, tippen);
-  else if (ziel === 'settings') einstellungen(inhalt, () => gehe('home'));
-  else void mediathek(inhalt, ziel.slice(4), tippen);
-}
-
-/* ---------- Was beim Antippen geschieht ---------- */
-
-function tippen(item: Item): void {
-  blatt(item, starten);
-}
-
-/** Startet — und bei einer Serie die Folge, die als Nächstes dran ist.
- *
- *  Eine Serie gar nicht abzuspielen war die falsche Antwort: die
- *  offensichtliche Erwartung ist, dass es losgeht. */
-async function starten(item: Item): Promise<void> {
-  const ordner = ['Series', 'Season'].includes(item.Type ?? '');
-  const ziel = ordner ? await naechsteFolge(item) : item;
-  if (!ziel) return;
-  playerOeffnen(ziel, () => { if (wo === 'home') void startseite(inhalt, ansichten, tippen); });
-}
-
-async function naechsteFolge(item: Item): Promise<Item | null> {
-  const serie = item.Type === 'Season' ? (item.SeriesId ?? item.Id) : item.Id;
-  try {
-    // Erst „Als Nächstes": wer eine Serie anfängt und zurückkommt, meint die
-    // Folge, bei der er stehengeblieben ist — nicht die erste.
-    const weiter = await api<Seite>('/Shows/NextUp?' + new URLSearchParams({
-      userId: sitzung.userId, seriesId: serie, Limit: '1', Fields: FELDER,
-    }));
-    const folge = weiter.Items?.[0];
-    if (folge && (item.Type !== 'Season' || folge.SeasonId === item.Id)) return folge;
-  } catch { /* dann eben die erste */ }
-
-  try {
-    const q: Record<string, string> = { userId: sitzung.userId, Limit: '1', Fields: FELDER };
-    if (item.Type === 'Season') q.seasonId = item.Id;
-    const alle = await api<Seite>(`/Shows/${serie}/Episodes?` + new URLSearchParams(q));
-    return alle.Items?.[0] ?? null;
-  } catch {
-    return null;
+    b.dataset.ziel = ziel;
+    b.onclick = () => { location.hash = ziel; };
+    leiste.appendChild(b);
   }
 }
 
-/* ---------- Los ---------- */
+/* ---------- Router ---------- */
 
-async function starte(): Promise<void> {
-  document.getElementById('login')!.classList.add('hidden');
-  app.classList.remove('hidden');
-  anwenden();
-  inhalt.innerHTML = '<div class="spinner"></div>';
+function zeichnen(): void {
+  const weg = location.hash.replace(/^#\/?/, '');
+  const teile = weg.split('/').filter(Boolean);
 
-  try {
-    const r = await api<Seite>(`/Users/${sitzung.userId}/Views`);
-    ansichten = (r.Items ?? []).filter((v) => ['movies', 'tvshows'].includes(v.CollectionType ?? ''));
-    inselBauen();
-    gehe('home');
-  } catch (e) {
-    inhalt.innerHTML = `<div class="empty pad-top">${esc((e as Error).message)}<br><br>
-      <button class="btn" id="raus">Abmelden</button></div>`;
-    document.getElementById('raus')!.onclick = abmelden;
+  leiste.querySelectorAll('button[data-ziel]').forEach(b => {
+    const ziel = (b as HTMLElement).dataset.ziel!.replace(/^#\/?/, '');
+    b.classList.toggle('check', ziel === (teile[0] ?? ''));
+  });
+
+  inhalt.innerHTML = '';
+  inhalt.scrollTo?.(0, 0);
+  window.scrollTo(0, 0);
+
+  const oeffnen = (art: 'filme' | 'serien', id: string) => { location.hash = `#/${art}/${id}`; };
+
+  const art = teile[0] === 'filme' || teile[0] === 'serien' ? teile[0] : null;
+  const kennung = teile[1];
+
+  if (art && kennung) {
+    inhalt.appendChild(detailseite(art, kennung, () => history.back()));
+  } else if (art) {
+    inhalt.appendChild(mediathek(art, oeffnen));
+  } else if (teile[0] === 'verwaltung' && istAdmin()) {
+    inhalt.appendChild(verwaltung());
+  } else {
+    inhalt.appendChild(startseite(oeffnen));
   }
+
+  inhalt.appendChild(hinweisleiste());
 }
 
-// Die Insel oben fährt beim Scrollen weg und kommt zurück, sobald man wieder
-// oben steht. An der Seite bleibt sie stehen — dort nimmt sie niemandem etwas.
-addEventListener('scroll', () => {
-  if (P.nav === 'side') return;
-  chrome.classList.toggle('away', scrollY > 8);
-}, { passive: true });
-
-anwenden();
-if (angemeldet()) void starte();
-else anmeldung(document.getElementById('login')!, () => void starte());
+/** Der Pflichthinweis auf TMDB — Bedingung ihrer Lizenz, nicht Höflichkeit. */
+function hinweisleiste(): HTMLElement {
+  const d = document.createElement('div');
+  d.className = 'attribution';
+  hinweise.forEach(h => {
+    const a = document.createElement('a');
+    a.href = h.url;
+    a.target = '_blank';
+    a.rel = 'noreferrer';
+    a.innerHTML = `<img src="${esc(h.logoUrl)}" alt="TMDB">`;
+    d.append(a, document.createTextNode(h.text));
+  });
+  return d;
+}
diff --git a/web/app/src/prefs.ts b/web/app/src/prefs.ts
deleted file mode 100644
index 26be3de..0000000
--- a/web/app/src/prefs.ts
+++ /dev/null
@@ -1,144 +0,0 @@
-/* Die Einstellungen.
-   ----------------------------------------------------------------------------
-   **Pro Gerät, nicht über den Server.** Am Fernseher will man größere Kacheln
-   als am Laptop, und das eine soll das andere nicht umstellen. Dieselbe
-   Entscheidung wie in der App, dort nachzulesen in der Spec zum Abgleich.
-
-   Namen und Wertebereiche decken sich mit denen der App — ein Regler von
-   70 bis 180 Prozent heißt auf beiden Seiten dasselbe. Nur der Speicherort
-   unterscheidet sich, hier localStorage statt UserDefaults. */
-
-export type Navigation = 'top' | 'side';
-export type Aufmacherquelle = 'continueFirst' | 'latestOnly';
-
-interface Einstellungen {
-  accent: string;
-  nav: Navigation;
-  cardW: number;
-  heroSource: Aufmacherquelle;
-  heroCount: number;
-  heroHeight: number;
-  combineContinue: boolean;
-  hideWatched: boolean;
-  hiddenRows: string[];
-  rowOrder: string[];
-  rate: number;
-  skipForward: number;
-  skipBackward: number;
-  quality: number;
-  audioLanguage: string;
-  subtitleLanguage: string;
-}
-
-const vorgabe: Einstellungen = {
-  accent: '#C04AC9',
-  nav: 'top',
-  cardW: 150,
-  heroSource: 'continueFirst',
-  heroCount: 5,
-  heroHeight: 82,
-  combineContinue: true,
-  hideWatched: false,
-  hiddenRows: [],
-  rowOrder: [],
-  rate: 1,
-  skipForward: 30,
-  skipBackward: 10,
-  quality: 0,
-  audioLanguage: '',
-  subtitleLanguage: '',
-};
-
-function lesen<K extends keyof Einstellungen>(schluessel: K): Einstellungen[K] {
-  const roh = localStorage.getItem('flaro.' + schluessel);
-  if (roh == null) return vorgabe[schluessel];
-  const art = typeof vorgabe[schluessel];
-  if (Array.isArray(vorgabe[schluessel])) {
-    try {
-      return JSON.parse(roh) as Einstellungen[K];
-    } catch {
-      return vorgabe[schluessel];
-    }
-  }
-  if (art === 'number') return Number(roh) as Einstellungen[K];
-  if (art === 'boolean') return (roh === 'true') as Einstellungen[K];
-  return roh as Einstellungen[K];
-}
-
-/* Ausgeschrieben statt über `Object.fromEntries` zusammengesetzt: dort geht
-   der Typ jedes einzelnen Feldes verloren, und es bliebe nur ein doppelter
-   Cast, der die Prüfung stilllegt statt sie zu bestehen. */
-export const P: Einstellungen = {
-  accent: lesen('accent'),
-  nav: lesen('nav'),
-  cardW: lesen('cardW'),
-  heroSource: lesen('heroSource'),
-  heroCount: lesen('heroCount'),
-  heroHeight: lesen('heroHeight'),
-  combineContinue: lesen('combineContinue'),
-  hideWatched: lesen('hideWatched'),
-  hiddenRows: lesen('hiddenRows'),
-  rowOrder: lesen('rowOrder'),
-  rate: lesen('rate'),
-  skipForward: lesen('skipForward'),
-  skipBackward: lesen('skipBackward'),
-  quality: lesen('quality'),
-  audioLanguage: lesen('audioLanguage'),
-  subtitleLanguage: lesen('subtitleLanguage'),
-};
-
-export function setzen<K extends keyof Einstellungen>(schluessel: K, wert: Einstellungen[K]): void {
-  P[schluessel] = wert;
-  // Listen müssen als JSON abgelegt werden — ein Array landete sonst als
-  // "a,b,c" im Speicher und käme als Zeichenkette zurück.
-  localStorage.setItem(
-    'flaro.' + schluessel,
-    Array.isArray(wert) ? JSON.stringify(wert) : String(wert),
-  );
-  anwenden();
-}
-
-export function anwenden(): void {
-  const r = document.documentElement.style;
-  r.setProperty('--accent', P.accent);
-  r.setProperty('--card-w', P.cardW + 'px');
-  r.setProperty('--hero-h', P.heroHeight + 'vh');
-  document.getElementById('app')?.classList.toggle('side', P.nav === 'side');
-}
-
-/** Die Palette der App, damit die Farben sich decken. */
-export const PALETTE: readonly [string, string][] = [
-  ['Ember', '#E5484D'], ['Tangerine', '#F76B15'], ['Amber', '#FFB224'],
-  ['Lime', '#99D52A'], ['Mint', '#3DD68C'], ['Teal', '#12A594'],
-  ['Sky', '#52A9FF'], ['Indigo', '#7C77E8'], ['Orchid', '#C04AC9'],
-  ['Rose', '#F76190'],
-];
-
-export const RATES = [0.75, 1.0, 1.25, 1.5, 1.75, 2.0] as const;
-export const SKIPS = [5, 10, 15, 30, 45] as const;
-export const QUALITIES: readonly [number, string][] = [
-  [0, 'Original'], [12000, 'Hoch — 12 Mbit/s'], [8000, 'Mittel — 8 Mbit/s'],
-  [4000, 'Niedrig — 4 Mbit/s'], [2000, 'Sparsam — 2 Mbit/s'],
-];
-export const LANGUAGES: readonly [string, string][] = [
-  ['', 'Serverstandard'], ['ger', 'Deutsch'], ['eng', 'Englisch'],
-  ['fre', 'Französisch'], ['spa', 'Spanisch'], ['ita', 'Italienisch'],
-  ['jpn', 'Japanisch'], ['kor', 'Koreanisch'],
-];
-
-/* Anordnung der Reihen — dieselbe Rechnung wie `Arrangement` in MediaKit,
-   samt ihrer wichtigsten Eigenschaft: **unbekannte Einträge landen am Ende
-   statt zu verschwinden.** Sie zu verwerfen wäre die einfachere Regel — und
-   der Grund dafür, dass eine neu angelegte Mediathek nie aufgetaucht wäre. */
-export function anordnen<T extends { id: string }>(reihen: T[]): T[] {
-  const sichtbar = reihen.filter((r) => !P.hiddenRows.includes(r.id));
-  if (!P.rowOrder.length) return sichtbar;
-
-  const platz = new Map(P.rowOrder.map((id, i) => [id, i]));
-  return sichtbar
-    .map((reihe, i) => ({ reihe, rang: platz.get(reihe.id) ?? Infinity, i }))
-    // Bei gleichem Rang gilt die ursprüngliche Folge — sonst springen zwei
-    // unbekannte Reihen bei jedem Laden gegeneinander.
-    .sort((a, b) => a.rang - b.rang || a.i - b.i)
-    .map((x) => x.reihe);
-}
diff --git a/web/app/src/style.css b/web/app/src/style.css
index 313c629..39832a9 100644
--- a/web/app/src/style.css
+++ b/web/app/src/style.css
@@ -1,558 +1,246 @@
-/* ============================================================================
-   Flaro Web — ein Frontend für Jellyfin
-   ----------------------------------------------------------------------------
-   Die Werte stammen aus FlaroDesign, nicht aus dem Augenmaß: dieselben
-   Flächen, dieselben Radien, dieselben Abstände wie in der App.
-   ========================================================================= */
+/* Flaro — Weboberfläche
+ *
+ * Der Aufbau folgt Plex: Seitenleiste links, Inhalt als waagerechte Reihen,
+ * Detailseite mit grossem unscharfem Hintergrund. Die Farben nicht — Orchid
+ * stimmt mit der iOS-App überein, und Plex' Orange ist deren Marke.
+ */
+
 :root {
-  --accent: #C04AC9;          /* Orchid — wie auf dem iPad eingestellt */
+  --accent: #C04AC9;
+  --accent-dim: #8E3595;
   --canvas: #0B0B0D;
   --surface: #141417;
   --elevated: #1D1D21;
   --placeholder: #26262B;
   --text: #F5F5F7;
-  --text-2: #A0A0A8;
-  --text-3: #6E6E76;
-  --separator: rgba(255,255,255,.10);
+  --text-dim: #A1A1A8;
+  --text-faint: #6E6E76;
+  --separator: rgba(255, 255, 255, .10);
 
-  --r-card: 8px;
-  --r-control: 10px;
-  --r-sheet: 16px;
-  --r-panel: 22px;
+  --r-card: 6px;
+  --r-control: 8px;
+  --r-panel: 14px;
 
   --s-tight: 4px; --s-snug: 8px; --s-regular: 12px;
-  --s-loose: 16px; --s-section: 24px; --s-margin: 16px;
+  --s-loose: 16px; --s-section: 28px;
 
-  /* Die Kachelbreite. Der Regler in den Einstellungen verstellt genau diese
-     eine Zahl — Reihen, Raster und Querformat rechnen sich daraus ab. */
   --card-w: 150px;
-  --sidebar-w: 235px;
+  --sidebar-w: 240px;
 
-  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text",
-          "Segoe UI Variable Text", "Segoe UI", system-ui, Roboto, sans-serif;
+  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
+  color-scheme: dark;
 }
 
-* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
+* { box-sizing: border-box; }
 
 html, body {
   margin: 0; padding: 0; height: 100%;
   background: var(--canvas); color: var(--text);
-  font-family: var(--font); font-size: 15px; line-height: 1.4;
+  font-family: var(--font); font-size: 14px; line-height: 1.45;
   -webkit-font-smoothing: antialiased;
 }
 
-body { overflow-x: hidden; }
-button { font-family: inherit; cursor: pointer; border: none; }
-img { display: block; }
-
+button, input, select { font: inherit; color: inherit; }
 .hidden { display: none !important; }
 
-/* ---- Anmeldung ----------------------------------------------------------- */
+/* ---------- Gerüst ---------- */
+
+#app { display: flex; min-height: 100%; }
+
+#chrome {
+  width: var(--sidebar-w); flex: 0 0 var(--sidebar-w);
+  background: var(--surface);
+  border-right: 1px solid var(--separator);
+  padding: var(--s-loose) 0;
+  display: flex; flex-direction: column; gap: var(--s-tight);
+  position: sticky; top: 0; height: 100vh; overflow-y: auto;
+}
+
+.marke {
+  font-size: 20px; font-weight: 700; letter-spacing: -.02em;
+  padding: 0 var(--s-loose) var(--s-loose);
+  color: var(--accent);
+}
+
+.nav-gruppe {
+  font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
+  color: var(--text-faint); padding: var(--s-loose) var(--s-loose) var(--s-tight);
+}
+
+#chrome button {
+  display: block; width: calc(100% - var(--s-regular)); margin: 0 var(--s-snug);
+  text-align: left; background: none; border: 0; cursor: pointer;
+  padding: var(--s-snug) var(--s-regular); border-radius: var(--r-control);
+  color: var(--text-dim); font-size: 14px;
+}
+#chrome button:hover { background: var(--elevated); color: var(--text); }
+#chrome button.check { background: var(--accent-dim); color: #fff; }
+
+.nav-fuss { margin-top: auto; padding-top: var(--s-loose); }
+
+#content { flex: 1; min-width: 0; padding: var(--s-section); }
+
+/* ---------- Anmeldung ---------- */
+
 #login {
-  min-height: 100dvh; display: grid; place-items: center; padding: var(--s-loose);
+  display: flex; align-items: center; justify-content: center;
+  min-height: 100vh; padding: var(--s-loose);
 }
 .login-card {
-  width: min(400px, 100%); display: flex; flex-direction: column; gap: var(--s-regular);
+  width: 100%; max-width: 360px; background: var(--surface);
+  border: 1px solid var(--separator); border-radius: var(--r-panel);
+  padding: var(--s-section); display: flex; flex-direction: column; gap: var(--s-regular);
 }
-.login-card h1 {
-  font-size: 34px; font-weight: 700; margin: 0 0 var(--s-tight);
-  letter-spacing: -.02em; text-align: center;
+.login-card h1 { margin: 0; font-size: 26px; letter-spacing: -.02em; }
+
+/* ---------- Bedienelemente ---------- */
+
+.field {
+  width: 100%; background: var(--elevated); border: 1px solid var(--separator);
+  border-radius: var(--r-control); padding: 10px var(--s-regular); outline: none;
 }
-.login-card .sub {
-  color: var(--text-2); text-align: center; margin: 0 0 var(--s-section);
-}
-.field { display: flex; flex-direction: column; gap: 6px; }
-.field label { font-size: 13px; color: var(--text-2); }
-.field input {
-  background: var(--elevated); border: 1px solid var(--separator);
-  border-radius: var(--r-control); color: var(--text);
-  padding: 11px var(--s-regular); font-size: 15px; font-family: inherit;
-}
-.field input:focus { outline: none; border-color: var(--accent); }
+.field:focus { border-color: var(--accent); }
 
 .btn {
-  border-radius: 999px; padding: 12px var(--s-section); font-size: 15px;
-  font-weight: 600; background: var(--elevated); color: var(--text);
-  transition: filter .15s ease;
+  background: var(--elevated); border: 1px solid var(--separator);
+  border-radius: var(--r-control); padding: 9px var(--s-loose);
+  cursor: pointer; white-space: nowrap;
 }
-.btn:hover { filter: brightness(1.25); }
-.btn-primary { background: var(--accent); color: #fff; }
-.btn-row { display: flex; gap: var(--s-regular); flex-wrap: wrap; }
+.btn:hover:not(:disabled) { background: #2A2A30; }
+.btn:disabled { opacity: .5; cursor: default; }
+.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
+.btn-primary:hover:not(:disabled) { background: #CB5BD3; }
+.btn-row { display: flex; gap: var(--s-snug); flex-wrap: wrap; align-items: center; }
 
-.error {
-  color: #F08A8D; font-size: 13px; min-height: 18px; text-align: center;
+.seg { display: inline-flex; background: var(--elevated); border-radius: var(--r-control); padding: 2px; }
+.seg button {
+  background: none; border: 0; cursor: pointer; color: var(--text-dim);
+  padding: 6px var(--s-loose); border-radius: 6px;
 }
-.note { color: var(--text-3); font-size: 12px; text-align: center; margin-top: var(--s-snug); }
+.seg button.check { background: var(--accent); color: #fff; }
 
-/* ---- Die schwebende Navigationsinsel -------------------------------------
-   Das Merkmal der App: eine Fläche mit Abstand ringsum, hinter der der
-   Inhalt durchläuft. Sie blendet beim Scrollen aus und kommt zurück, sobald
-   man wieder oben steht — genau wie in der App. */
-#chrome {
-  position: fixed; top: calc(10px + env(safe-area-inset-top)); left: 0; right: 0;
-  z-index: 50; display: flex; justify-content: center;
-  transition: transform .28s cubic-bezier(.32,.72,0,1), opacity .28s ease;
-  pointer-events: none;
-}
-#chrome.away { transform: translateY(-140%); opacity: 0; }
+.seitentitel { margin: 0; font-size: 24px; letter-spacing: -.02em; }
+.row { display: flex; gap: var(--s-regular); align-items: center; margin-bottom: var(--s-section); }
+.row .field { max-width: 280px; margin-left: auto; }
 
-.island {
-  pointer-events: auto;
-  display: flex; align-items: center; gap: var(--s-tight);
-  padding: var(--s-snug);
-  background: rgba(20,20,23,.72);
-  backdrop-filter: saturate(180%) blur(20px);
-  -webkit-backdrop-filter: saturate(180%) blur(20px);
-  border: 1px solid var(--separator);
-  border-radius: var(--r-panel);
-  box-shadow: 0 8px 24px rgba(0,0,0,.45);
-  max-width: calc(100vw - 24px); overflow-x: auto; scrollbar-width: none;
-}
-.island::-webkit-scrollbar { display: none; }
+/* ---------- Karten und Raster ---------- */
 
-.island button {
-  background: none; color: var(--text); font-size: 15px; white-space: nowrap;
-  padding: var(--s-snug) var(--s-loose); border-radius: 999px;
+.grid {
+  display: grid; gap: var(--s-loose);
+  grid-template-columns: repeat(auto-fill, minmax(var(--card-w), 1fr));
 }
-.island button.active { background: var(--elevated); color: var(--accent); }
-.island .sep { width: 1px; height: 22px; background: var(--separator); margin: 0 var(--s-tight); }
 
-/* Der Umschalter zwischen oben und seitlich — wie auf dem iPad ein Knopf in
-   der Leiste selbst. Ihn in die Einstellungen zu verbannen hieße, für einen
-   Handgriff zwei Ebenen tief zu gehen. */
-.island .toggle-nav {
-  padding: var(--s-snug); color: var(--text-2); display: flex; align-items: center;
-  border-radius: var(--r-control); flex: 0 0 auto;
-}
-.island .toggle-nav:hover { color: var(--text); background: var(--elevated); }
-.island .toggle-nav svg { width: 18px; height: 18px; display: block; }
-#app.side .island .toggle-nav { align-self: flex-end; margin: 0 var(--s-snug) var(--s-snug); }
-
-/* ---- Aufmacher -----------------------------------------------------------
-   Randlos bis an den oberen Rand, die Insel schwebt darüber. Genau die
-   Entscheidung, die in der App getroffen wurde. */
-#hero {
-  position: relative; height: var(--hero-h, 82vh); min-height: 380px; overflow: hidden;
-}
-#hero .shot {
-  position: absolute; inset: 0; background-size: cover; background-position: center;
-  opacity: 0; transition: opacity .55s ease;
-}
-#hero .shot.on { opacity: 1; }
-#hero .veil {
-  position: absolute; inset: 0;
-  background:
-    linear-gradient(to bottom, rgba(0,0,0,.45) 0, rgba(0,0,0,0) 150px),
-    linear-gradient(to bottom, rgba(11,11,13,0) 45%, rgba(11,11,13,.75) 78%, var(--canvas) 100%);
-}
-#hero .body {
-  position: absolute; left: 0; right: 0; bottom: 0;
-  padding: 0 var(--s-margin) var(--s-section);
+.card {
+  background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
   display: flex; flex-direction: column; gap: var(--s-snug);
 }
-#hero .logo { max-width: 286px; max-height: 84px; object-fit: contain; }  /* 10 % über der App-Größe, auf Wunsch */
-#hero h2 { font-size: 34px; font-weight: 700; margin: 0; letter-spacing: -.02em; }
-#hero .meta { color: var(--text-2); font-size: 13px; }
-#hero .summary {
-  color: var(--text-2); font-size: 13px; max-width: 640px;
-  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
-}
-#hero .actions { display: flex; gap: var(--s-regular); margin-top: var(--s-tight); }
-.dots { display: flex; gap: var(--s-snug); justify-content: center; padding: var(--s-regular) 0 var(--s-section); }
-.dots button {
-  width: 6px; height: 6px; border-radius: 999px; background: rgba(255,255,255,.35);
-  padding: 0; transition: width .25s ease, background .25s ease;
-}
-.dots button:hover { background: rgba(255,255,255,.6); }
-.dots button.on { width: 18px; background: var(--accent); }
+.card:hover .poster { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,.5); }
 
-/* Blättern von Hand. Die Pfeile liegen auf dem Bild und halten sich zurück,
-   bis der Zeiger da ist — auf einem Zeigegerät. Wer wischt, braucht sie nicht. */
-.hero-nav {
-  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
-  width: 44px; height: 44px; border-radius: 999px; padding: 0;
-  background: rgba(20,20,23,.55); color: var(--text); font-size: 20px;
-  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
-  border: 1px solid var(--separator); opacity: 0; transition: opacity .2s ease;
+.poster {
+  aspect-ratio: 2 / 3; width: 100%; background: var(--placeholder);
+  border-radius: var(--r-card); overflow: hidden; position: relative;
+  transition: transform .15s ease, box-shadow .15s ease;
 }
-#hero:hover .hero-nav { opacity: 1; }
-.hero-nav.prev { left: var(--s-margin); }
-.hero-nav.next { right: var(--s-margin); }
-@media (hover: none) { .hero-nav { display: none; } }
+.poster img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .2s; }
+.poster.geladen img { opacity: 1; }
 
-/* ---- Reihen -------------------------------------------------------------- */
-.row { margin-bottom: var(--s-section); }
-.row h3 {
+.rowline { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
+.rowline strong { font-weight: 500; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+/* ---------- Waagerechte Reihen, wie bei Plex ---------- */
+
+.reihe { margin-bottom: var(--s-section); }
+.reihe h2 {
   font-size: 17px; font-weight: 600; margin: 0 0 var(--s-regular);
-  padding: 0 var(--s-margin); letter-spacing: -.01em;
+  letter-spacing: -.01em;
 }
 .strip {
-  display: flex; gap: var(--s-regular); overflow-x: auto;
-  padding: 0 var(--s-margin) var(--s-tight); scroll-snap-type: x proximity;
-  scrollbar-width: none;
+  display: grid; grid-auto-flow: column; grid-auto-columns: var(--card-w);
+  gap: var(--s-loose); overflow-x: auto; padding-bottom: var(--s-snug);
+  scrollbar-width: thin; scroll-snap-type: x proximity;
 }
-.strip::-webkit-scrollbar { display: none; }
+.strip > * { scroll-snap-align: start; }
+.strip::-webkit-scrollbar { height: 8px; }
+.strip::-webkit-scrollbar-thumb { background: var(--elevated); border-radius: 4px; }
 
-.card { flex: 0 0 auto; width: var(--card-w); scroll-snap-align: start; background: none; padding: 0; text-align: left; }
-.card.wide { width: calc(var(--card-w) * 1.73); }
-.card .art {
-  width: 100%; aspect-ratio: 2/3; border-radius: var(--r-card);
-  background: var(--placeholder) center/cover no-repeat;
-  position: relative; overflow: hidden;
-}
-.card.wide .art { aspect-ratio: 16/9; }
-.card .title {
-  font-size: 13px; color: var(--text); margin-top: 6px;
-  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
-}
-.card .sub { font-size: 12px; color: var(--text-3); }
-.card .bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.2); }
-.card .bar span { display: block; height: 100%; background: var(--accent); }
+/* ---------- Detailseite ---------- */
 
-/* ---- Raster (Mediathek) -------------------------------------------------- */
-.grid {
-  display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--card-w) * .75), 1fr));
-  gap: var(--s-loose) var(--s-regular); padding: 0 var(--s-margin) var(--s-section);
+.detail-head {
+  position: relative; margin: calc(var(--s-section) * -1) calc(var(--s-section) * -1) var(--s-section);
+  padding: var(--s-section); overflow: hidden;
 }
-.grid .card { width: auto; }
+/* Der unscharfe Hintergrund, der die Seite trägt — Plex' auffälligster Zug. */
+.detail-head::before {
+  content: ''; position: absolute; inset: -40px;
+  background-image: var(--backdrop); background-size: cover; background-position: center;
+  filter: blur(28px) saturate(1.2); opacity: .35; z-index: 0;
+}
+.detail-head::after {
+  content: ''; position: absolute; inset: 0; z-index: 0;
+  background: linear-gradient(to bottom, rgba(11,11,13,.3), var(--canvas));
+}
+.detail-head > * { position: relative; z-index: 1; }
 
-/* ---- Detailblatt --------------------------------------------------------- */
-#sheet {
-  position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.55);
-  display: grid; place-items: center; padding: var(--s-loose);
-  backdrop-filter: blur(8px);
-}
-#sheet .panel {
-  background: var(--elevated); border: 1px solid var(--separator);
-  border-radius: var(--r-sheet); width: min(680px, 100%);
-  max-height: 86dvh; overflow: auto; padding: var(--s-section);
-}
-#sheet h2 { margin: 0 0 var(--s-snug); font-size: 24px; letter-spacing: -.02em; }
-#sheet .meta { color: var(--text-2); font-size: 13px; margin-bottom: var(--s-regular); }
-#sheet p { color: var(--text-2); font-size: 14px; }
-/* ---- Der Player ----------------------------------------------------------
-   Vollbild und schwarz. Ein Film nimmt den Bildschirm ein — alles andere ist
-   ein Vorschaufenster. */
-#player {
-  position: fixed; inset: 0; z-index: 100; background: #000;
-  display: grid; place-items: center; overflow: hidden;
-}
-#player video { width: 100%; height: 100%; object-fit: contain; background: #000; cursor: pointer; }
+.detail-inner { display: flex; gap: var(--s-section); margin-top: var(--s-loose); align-items: flex-start; }
+.detail-inner .poster { width: 200px; flex: 0 0 200px; }
+.detail-text h1 { margin: 0 0 var(--s-snug); font-size: 30px; letter-spacing: -.02em; }
+.detail-text p { margin: 0; color: var(--text-dim); max-width: 60ch; }
 
-/* **Die Fläche selbst nimmt keine Klicks entgegen, nur ihre Knöpfe.**
-   Sonst liegt sie über dem Bild und schluckt jeden Klick — und „ins Bild
-   tippen hält an" funktioniert genau dann nicht, wenn die Bedienung zu
-   sehen ist, also fast immer. */
-.pl-chrome {
-  position: absolute; inset: 0; opacity: 0; pointer-events: none;
-  transition: opacity .25s ease;
-  display: grid; grid-template-rows: auto 1fr auto;
-}
-.pl-chrome.on { opacity: 1; }
-.pl-chrome.on button,
-.pl-chrome.on .pl-track,
-.pl-chrome.on select { pointer-events: auto; }
+.detail h2 { font-size: 17px; margin: var(--s-section) 0 var(--s-regular); }
 
-/* Zwei Verläufe statt einer Fläche: die Mitte bleibt frei, und genau dort
-   ist das Bild. */
-/* Eine gleichmäßige Abdunklung über allem, wie in der App: „genug, damit
-   weiße Schrift auf hellen Szenen lesbar bleibt, wenig genug, dass das Bild
-   nicht verfälscht wirkt." Zwei Verläufe an den Rändern taten das nicht —
-   in der Mitte stehen die Transportknöpfe und hatten nichts hinter sich. */
-.pl-chrome { background: rgba(0,0,0,.35); }
+/* ---------- Listen und Einstellungen ---------- */
 
-.pl-top, .pl-bottom { padding: var(--s-loose) var(--s-section); }
-.pl-top {
-  display: flex; align-items: center; gap: var(--s-regular);
-  padding-top: calc(var(--s-loose) + env(safe-area-inset-top));
-}
-.pl-bottom { padding-bottom: calc(var(--s-loose) + env(safe-area-inset-bottom)); }
-
-/* Die Stufe als Text — jetzt ohne Kreis darum, also ohne Widerspruch. */
-.pl-quality { font-size: 14px; 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 {
-  background: none; border: none; color: #fff; flex: 0 0 auto;
-  padding: var(--s-snug); font-size: 15px; border-radius: var(--r-control);
-  opacity: .9; transition: opacity .15s ease, background .15s ease;
-}
-.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, .tiny svg, .hero-nav 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; }
-
-.pl-center {
-  display: flex; align-items: center; justify-content: center;
-  gap: calc(var(--s-section) * 2);
-}
-/* Auch hier keine Fläche — nur das Symbol, wie in der App. Lesbar bleibt es
-   durch die Abdunklung, die über dem ganzen Bild liegt. */
-.pl-round {
-  background: none; border: none; color: #fff; padding: var(--s-snug);
-  opacity: .95; transition: opacity .15s ease, transform .15s ease;
-}
-.pl-round:hover { opacity: 1; transform: scale(1.08); }
-
-/* Die Sekundenzahl als Text, nicht als Ziffer im Pfeil: übereinander war
-   beides unlesbar, und die Zahl ist die eigentliche Auskunft. */
-
-
-/* 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
-   Formularfeld zwischen zwei Beschriftungen. */
-.pl-times {
-  display: flex; justify-content: space-between;
-  margin-top: var(--s-tight);
-  font-size: 13px; color: rgba(255,255,255,.8);
-  font-variant-numeric: tabular-nums;
-}
-
-.pl-track {
-  position: relative; width: 100%; height: 22px; cursor: pointer;
-  display: flex; align-items: center;
-}
-.pl-track::before {
-  content: ''; position: absolute; left: 0; right: 0; height: 4px;
-  background: rgba(0,0,0,.45); border-radius: 999px;
-  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
-}
-.pl-buf, .pl-fill { position: absolute; left: 0; height: 4px; border-radius: 999px; }
-.pl-buf { background: rgba(255,255,255,.3); width: 0; }
-.pl-fill { background: var(--accent); width: 0; }
-.pl-track i {
-  position: absolute; width: 13px; height: 13px; border-radius: 999px;
-  background: var(--accent); transform: translateX(-50%);
-  box-shadow: 0 1px 4px rgba(0,0,0,.6); transition: transform .12s ease;
-}
-.pl-track:hover i { transform: translateX(-50%) scale(1.25); }
-
-.pl-spacer { flex: 1; }
-
-/* 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. */
-/* 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-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);
-  border-radius: var(--r-sheet); display: flex; flex-direction: column; gap: var(--s-regular);
-  box-shadow: 0 20px 60px rgba(0,0,0,.6);
-}
-.pl-error strong { color: #F08A8D; font-size: 16px; font-weight: 600; }
-.pl-error span { color: var(--text-2); font-size: 14px; }
-.pl-error .btn { align-self: flex-start; }
-/* Das Menü für Qualität und Spuren — über der Leiste, nicht als Blatt.
-   Ein Blatt würde das Bild verdecken, und man stellt hier etwas ein, das man
-   am Bild beurteilen will. */
-.pl-menu {
-  position: fixed; z-index: 4;
-  min-width: 232px; max-width: 320px; max-height: 60vh; overflow-y: auto;
-  background: rgba(20,20,23,.92); border: 1px solid var(--separator);
-  border-radius: var(--r-sheet); padding: var(--s-snug);
-  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
-  box-shadow: 0 16px 48px rgba(0,0,0,.6);
-}
-.pl-group {
-  font-size: 11px; font-weight: 600; color: var(--text-3);
-  text-transform: uppercase; letter-spacing: .06em;
-  padding: var(--s-regular) var(--s-regular) var(--s-tight);
-}
-.pl-group:first-child { padding-top: var(--s-snug); }
-.pl-item {
-  display: flex; align-items: center; justify-content: space-between; gap: var(--s-regular);
-  width: 100%; padding: 9px var(--s-regular); border-radius: var(--r-control);
-  background: none; color: var(--text); font-size: 14px; text-align: left;
-}
-.pl-item:hover { background: rgba(255,255,255,.08); }
-.pl-item.on { color: var(--accent); }
-.pl-item svg { width: 16px; height: 16px; flex: 0 0 auto; }
-.pl-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-
-.pl-error code {
-  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px;
-  color: var(--text-3); background: rgba(0,0,0,.4); padding: var(--s-snug);
-  border-radius: 6px; word-break: break-all; line-height: 1.5;
-}
-
-@media (max-width: 600px) {
-  .pl-top, .pl-bottom { padding-left: var(--s-loose); padding-right: var(--s-loose); }
-  .pl-round { width: 50px; height: 50px; }
-  .pl-round.pl-play { width: 64px; height: 64px; }
-  .pl-rate, .pl-tools input[type=range] { display: none; }
-}
-
-/* ---- Die Navigation an der Seite -----------------------------------------
-   Dieselbe Wahl wie in der App: die Leiste sitzt oben als Insel oder links
-   als Spalte. Links bleibt sie stehen, statt beim Scrollen wegzufahren —
-   dort nimmt sie niemandem etwas weg. */
-#app.side #chrome {
-  top: 0; bottom: 0; left: 0; right: auto; width: calc(var(--sidebar-w) + 24px);
-  align-items: stretch; padding: 12px; transform: none !important; opacity: 1 !important;
-}
-#app.side .island {
-  flex-direction: column; align-items: stretch; gap: 2px;
-  width: 100%; max-width: none; overflow-y: auto; overflow-x: hidden;
-  padding: var(--s-regular) var(--s-snug);
-}
-#app.side .island button { text-align: left; border-radius: var(--r-control); }
-#app.side .island .sep { width: auto; height: 1px; margin: var(--s-snug); }
-#app.side #content { margin-left: calc(var(--sidebar-w) + 24px); }
-
-/* ---- Der Umzug der Leiste -----------------------------------------------
-   Sie **zieht um**, sie verschwindet nicht und taucht woanders wieder auf.
-   Das ist der Unterschied zwischen einer Leiste, die man mit den Augen
-   verfolgt, und zweien, von denen eine geht und eine kommt — und es ist das,
-   was Mac und iPad tun.
-
-   Gemacht wird das mit FLIP: die alte Lage messen, umbauen, die neue Lage
-   messen, und das Element vom alten Zustand in den neuen fahren lassen. Der
-   Weg dazwischen ist eine einzige Bewegung, obwohl der Aufbau in der Mitte
-   ausgetauscht wurde. Über CSS allein ginge das nicht — `right: auto` und
-   `bottom: auto` lassen sich nicht animieren, und genau die wechseln hier.
-
-   Der Inhalt rückt gleichzeitig nach; ohne das bliebe links ein Loch stehen,
-   bis die Leiste angekommen ist. */
-#content { transition: margin-left .42s cubic-bezier(.32,.72,0,1); }
-
-/* Wer Bewegung nicht mag, bekommt keine. */
-@media (prefers-reduced-motion: reduce) {
-  #content, .card .art, .shot, .island { transition: none !important; }
-}
-#app.side .pad-top { padding-top: var(--s-loose); }
-
-.island .brand {
-  display: none; font-size: 20px; font-weight: 700; letter-spacing: -.02em;
-  padding: var(--s-snug) var(--s-loose) var(--s-regular); color: var(--text);
-}
-#app.side .island .brand { display: block; }
-.island .group-label {
-  display: none; font-size: 12px; color: var(--text-3);
-  padding: var(--s-regular) var(--s-loose) var(--s-tight);
-}
-#app.side .island .group-label { display: block; }
-
-/* ---- Einstellungen -------------------------------------------------------- */
-.settings { max-width: 620px; margin: 0 auto; padding: 0 var(--s-margin) var(--s-section); }
-.settings h2 { font-size: 28px; letter-spacing: -.02em; margin: 0 0 var(--s-section); }
-.settings .group {
-  font-size: 13px; font-weight: 600; color: var(--text-3);
-  text-transform: uppercase; letter-spacing: .06em;
-  margin: var(--s-section) 0 var(--s-snug); padding-left: var(--s-tight);
-}
-.settings .group:first-of-type { margin-top: 0; }
-.hexrow { display: flex; gap: var(--s-snug); margin-top: var(--s-regular); }
-.hexrow input {
-  flex: 1; background: var(--elevated); border: 1px solid var(--separator);
-  border-radius: var(--r-control); color: var(--text); padding: 9px var(--s-regular);
-  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 14px;
-}
-.hexrow input:focus { outline: none; border-color: var(--accent); }
-.hint { font-size: 12px; color: var(--text-3); margin: var(--s-snug) 0 0; min-height: 16px; }
-.rowline {
-  display: flex; align-items: center; gap: var(--s-snug);
-  padding: var(--s-snug) 0; border-bottom: 1px solid var(--separator);
-}
-.rowline:last-child { border-bottom: none; }
-.rowline.off span { color: var(--text-3); text-decoration: line-through; }
-.tiny {
-  width: 30px; height: 30px; border-radius: var(--r-control);
-  background: var(--elevated); color: var(--text-2); font-size: 14px; padding: 0;
-}
-.tiny:hover:not(:disabled) { color: var(--text); }
-.tiny:disabled { opacity: .3; cursor: default; }
-.pick {
-  background: var(--elevated); border: 1px solid var(--separator);
-  border-radius: var(--r-control); color: var(--text);
-  padding: 9px var(--s-regular); font-family: inherit; font-size: 14px; width: 100%;
-}
-.pick:focus { outline: none; border-color: var(--accent); }
-.pickrow { display: flex; gap: var(--s-regular); flex-wrap: wrap; }
-.pickrow label { flex: 1; min-width: 160px; font-size: 13px; color: var(--text-2); }
-.pickrow .pick { margin-top: 6px; }
+.settings { display: flex; flex-direction: column; gap: var(--s-regular); }
 .setting {
   background: var(--surface); border: 1px solid var(--separator);
-  border-radius: var(--r-sheet); padding: var(--s-loose); margin-bottom: var(--s-regular);
+  border-radius: var(--r-panel); padding: var(--s-loose);
+  display: flex; flex-direction: column; gap: var(--s-snug);
 }
-.setting h4 { margin: 0 0 var(--s-snug); font-size: 15px; font-weight: 600; }
-.setting p { margin: 0 0 var(--s-regular); color: var(--text-2); font-size: 13px; }
-.swatches { display: flex; flex-wrap: wrap; gap: var(--s-regular); }
-.swatch {
-  width: 34px; height: 34px; border-radius: 999px; padding: 0;
-  border: 2px solid transparent; transition: transform .12s ease;
+button.setting { cursor: pointer; text-align: left; width: 100%; }
+button.setting:hover { background: var(--elevated); }
+
+.hint { color: var(--text-dim); font-size: 13px; }
+.tiny { color: var(--text-faint); font-size: 12px; }
+.note { color: var(--text-faint); font-size: 12px; }
+
+.error {
+  background: rgba(220, 60, 60, .14); border: 1px solid rgba(220, 60, 60, .4);
+  color: #FF9A9A; border-radius: var(--r-control); padding: var(--s-regular);
 }
-.swatch:hover { transform: scale(1.12); }
-.swatch.on { border-color: var(--text); }
-.seg { display: flex; gap: var(--s-snug); }
-.seg button { flex: 1; background: var(--elevated); color: var(--text-2); border-radius: var(--r-control); padding: 10px; }
-.seg button.on { background: var(--accent); color: #fff; }
-input[type=range] { width: 100%; accent-color: var(--accent); }
-.range-row { display: flex; align-items: center; gap: var(--s-regular); }
-.range-row output { min-width: 82px; text-align: right; color: var(--text-2); font-size: 13px; }
-.check {
-  display: flex; align-items: center; gap: var(--s-snug);
-  padding: var(--s-snug) 0; font-size: 14px; color: var(--text-2); cursor: pointer;
-}
-.check input { accent-color: var(--accent); width: 17px; height: 17px; }
+.empty { color: var(--text-faint); padding: var(--s-section) 0; grid-column: 1 / -1; }
 
-/* ---- Zustände ------------------------------------------------------------ */
-#content { padding-bottom: var(--s-section); }
-
-/* Ein Seitenwechsel soll nicht schlagen. Kurz und flach — was länger dauert,
-   fühlt sich nach Warten an statt nach Bewegung. */
-@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
-.row, .grid, .settings, #hero { animation: rise .32s cubic-bezier(.32,.72,0,1) both; }
-/* Die Reihen kommen gestaffelt — die erste zuerst, dann nach unten weg. */
-.row:nth-of-type(2) { animation-delay: .04s; }
-.row:nth-of-type(3) { animation-delay: .08s; }
-.row:nth-of-type(4) { animation-delay: .12s; }
-.row:nth-of-type(n+5) { animation-delay: .16s; }
-
-/* Kacheln heben sich beim Überfahren leicht an. */
-.card .art { transition: transform .2s cubic-bezier(.32,.72,0,1), box-shadow .2s ease; }
-.card:hover .art { transform: scale(1.04); box-shadow: 0 10px 24px rgba(0,0,0,.5); }
-.pad-top { padding-top: calc(84px + env(safe-area-inset-top)); }
 .spinner {
-  width: 26px; height: 26px; border: 2px solid var(--separator);
-  border-top-color: var(--accent); border-radius: 999px;
-  animation: spin .8s linear infinite; margin: 60px auto;
+  width: 22px; height: 22px; margin: var(--s-section) auto;
+  border: 2px solid var(--separator); border-top-color: var(--accent);
+  border-radius: 50%; animation: dreh .7s linear infinite;
 }
-@keyframes spin { to { transform: rotate(360deg); } }
-.empty { text-align: center; color: var(--text-2); padding: 60px var(--s-margin); }
+@keyframes dreh { to { transform: rotate(360deg); } }
 
-@media (max-width: 600px) {
-  #hero { height: 70vh; }
-  #hero h2 { font-size: 26px; }
-  .card { width: 120px; }
-  .card.wide { width: 200px; }
+/* ---------- Abspielen ---------- */
+
+.pl-fill { position: fixed; inset: 0; background: #000; z-index: 50; }
+
+/* ---------- Hinweis auf TMDB ---------- */
+
+.attribution {
+  margin-top: var(--s-section); padding-top: var(--s-loose);
+  border-top: 1px solid var(--separator);
+  color: var(--text-faint); font-size: 11px; display: flex; gap: var(--s-snug); align-items: center;
+}
+.attribution img { height: 14px; opacity: .7; }
+
+/* ---------- Schmale Fenster ---------- */
+
+@media (max-width: 760px) {
+  #app { flex-direction: column; }
+  #chrome {
+    width: 100%; flex: none; height: auto; position: static;
+    flex-direction: row; overflow-x: auto; padding: var(--s-snug);
+    border-right: 0; border-bottom: 1px solid var(--separator);
+  }
+  .marke, .nav-gruppe { display: none; }
+  .nav-fuss { margin: 0; padding: 0; display: flex; }
+  #content { padding: var(--s-loose); }
+  .detail-inner { flex-direction: column; }
+  .detail-inner .poster { width: 140px; flex: none; }
 }
diff --git a/web/app/src/types.ts b/web/app/src/types.ts
deleted file mode 100644
index 70d18a4..0000000
--- a/web/app/src/types.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-/** Was Jellyfin über einen Eintrag schickt — nur das, was wir lesen. */
-export interface Item {
-  Id: string;
-  Name?: string;
-  Type?: string;
-  Overview?: string;
-  ProductionYear?: number;
-  RunTimeTicks?: number;
-  OfficialRating?: string;
-  IndexNumber?: number;
-  ParentIndexNumber?: number;
-  SeriesName?: string;
-  SeriesId?: string;
-  SeasonId?: string;
-  CollectionType?: string;
-  ImageTags?: Record<string, string>;
-  BackdropImageTags?: string[];
-  ParentBackdropItemId?: string;
-  ParentBackdropImageTags?: string[];
-  SeriesPrimaryImageTag?: string;
-  UserData?: { PlayedPercentage?: number; Played?: boolean };
-}
-
-export interface Seite<T = Item> {
-  Items?: T[];
-  TotalRecordCount?: number;
-}
-
-/** Eine Spur, wie der Server sie in der Wiedergabe-Auskunft nennt. */
-export interface Spur {
-  Type: 'Video' | 'Audio' | 'Subtitle';
-  Index: number;
-  DisplayTitle?: string;
-  Language?: string;
-}
-
-export interface Quelle {
-  Id?: string;
-  Container?: string;
-  TranscodingUrl?: string;
-  SupportsTranscoding?: boolean;
-  MediaStreams?: Spur[];
-  DefaultAudioStreamIndex?: number;
-  DefaultSubtitleStreamIndex?: number;
-}
-
-export interface Wiedergabeauskunft {
-  PlaySessionId?: string;
-  MediaSources?: Quelle[];
-}
-
-/** Eine Reihe auf der Startseite. */
-export interface Reihe {
-  id: string;
-  title: string;
-  items: Item[];
-  wide?: boolean;
-}
diff --git a/web/app/src/util.ts b/web/app/src/util.ts
index a956e68..a520e72 100644
--- a/web/app/src/util.ts
+++ b/web/app/src/util.ts
@@ -1,74 +1,74 @@
-import type { Item } from './types';
-import { medienURL } from './api';
+import { bildAdresse } from './api';
 
-/** Entschärft Text, der in HTML landet. */
 export function esc(wert: unknown): string {
-  return String(wert ?? '').replace(/[&<>"']/g, (c) =>
-    ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[c]!);
+  return String(wert ?? '').replace(/[&<>"']/g, z =>
+    ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[z]!));
 }
 
-/** Laufzeit als „2 Std 16 Min" oder „46 Min". */
-export function laufzeit(item: Item): string {
-  if (!item.RunTimeTicks) return '';
-  const min = Math.round(item.RunTimeTicks / 600_000_000);
-  return min >= 60 ? `${Math.floor(min / 60)} Std ${min % 60} Min` : `${min} Min`;
+/** Sekunden als 1:02:03 oder 2:03. */
+export function dauer(sekunden: number | null): string {
+  if (!sekunden || sekunden <= 0) return '';
+  const s = Math.round(sekunden);
+  const h = Math.floor(s / 3600), m = Math.floor((s % 3600) / 60);
+  return h > 0 ? `${h}:${String(m).padStart(2, '0')}:${String(s % 60).padStart(2, '0')}`
+               : `${m}:${String(s % 60).padStart(2, '0')}`;
 }
 
-/** Zeit als Uhrwerk: „1:02:03" oder „7:15". */
-export function uhr(sekunden: number): string {
-  if (!isFinite(sekunden)) return '–:--';
-  const s = Math.max(0, Math.floor(sekunden));
-  const h = Math.floor(s / 3600);
-  const m = Math.floor((s % 3600) / 60);
-  const r = s % 60;
-  return (h ? `${h}:${String(m).padStart(2, '0')}` : `${m}`) + ':' + String(r).padStart(2, '0');
+export function groesse(bytes: number): string {
+  if (bytes >= 1024 ** 3) return `${(bytes / 1024 ** 3).toFixed(1)} GB`;
+  if (bytes >= 1024 ** 2) return `${Math.round(bytes / 1024 ** 2)} MB`;
+  return `${Math.round(bytes / 1024)} KB`;
 }
 
-/** Der Folgentitel: „S2:E4 · Der Fall". */
-export function folgentitel(item: Item): string {
-  const nummer =
-    item.ParentIndexNumber != null && item.IndexNumber != null
-      ? `S${item.ParentIndexNumber}:E${item.IndexNumber}`
-      : '';
-  return [nummer, item.Name].filter(Boolean).join(' · ');
-}
-
-/** Ob ein Eintrag ein Bild dieser Art hat. */
-export function hatBild(item: Item, art: 'Primary' | 'Backdrop'): boolean {
-  return art === 'Backdrop'
-    ? Boolean(item.BackdropImageTags?.length || item.ParentBackdropImageTags?.length)
-    : Boolean(item.ImageTags?.[art]);
-}
-
-/** Das Bild eines Eintrags — mit den Ersatzwegen, die Jellyfin nötig macht.
+/** Ein Plakat mit Platzhalter dahinter.
  *
- *  Eine Folge hat selten ein eigenes Hintergrundbild, aber ihre Serie hat
- *  eins. Ohne diese Kette bliebe die halbe Startseite grau. */
-export function bild(item: Item, art: 'Primary' | 'Backdrop', breite = 400): string {
-  if (art === 'Backdrop') {
-    if (item.BackdropImageTags?.length) {
-      return medienURL(`/Items/${item.Id}/Images/Backdrop`, {
-        tag: item.BackdropImageTags[0]!, maxWidth: breite, quality: 90,
-      });
-    }
-    if (item.ParentBackdropItemId) {
-      return medienURL(`/Items/${item.ParentBackdropItemId}/Images/Backdrop`, {
-        tag: item.ParentBackdropImageTags?.[0] ?? '', maxWidth: breite, quality: 90,
-      });
-    }
+ * Der Platzhalter hält die Fläche frei, bis das Bild da ist — ohne ihn
+ * springt das Raster beim Nachladen jedes Mal um. */
+export function plakat(schluessel: string | null, beschriftung: string): HTMLElement {
+  const rahmen = document.createElement('div');
+  rahmen.className = 'poster';
+  rahmen.setAttribute('role', 'img');
+  rahmen.setAttribute('aria-label', beschriftung);
+
+  const adresse = bildAdresse(schluessel);
+  if (adresse) {
+    const img = document.createElement('img');
+    img.src = adresse;
+    img.alt = '';
+    img.loading = 'lazy';
+    // Erst einblenden, wenn es da ist — sonst blitzt der Platzhalter durch.
+    img.onload = () => rahmen.classList.add('geladen');
+    rahmen.appendChild(img);
   }
-  if (item.ImageTags?.Primary) {
-    return medienURL(`/Items/${item.Id}/Images/Primary`, {
-      tag: item.ImageTags.Primary, maxWidth: breite, quality: 90,
-    });
-  }
-  if (item.SeriesPrimaryImageTag && item.SeriesId) {
-    return medienURL(`/Items/${item.SeriesId}/Images/Primary`, {
-      tag: item.SeriesPrimaryImageTag, maxWidth: breite, quality: 90,
-    });
-  }
-  return '';
+  return rahmen;
 }
 
-/** Die Felder, die die Startseite braucht. */
-export const FELDER = 'Overview,Genres,MediaSources,ParentBackdropItemId,ParentBackdropImageTags';
+export function knopf(text: string, klasse = 'btn'): HTMLButtonElement {
+  const b = document.createElement('button');
+  b.className = klasse;
+  b.textContent = text;
+  return b;
+}
+
+export function feld(platzhalter: string, art = 'text'): HTMLInputElement {
+  const i = document.createElement('input');
+  i.className = 'field';
+  i.type = art;
+  i.placeholder = platzhalter;
+  return i;
+}
+
+/** Zeigt einen Fehler, ohne die Seite zu verlassen. */
+export function fehlerzeile(text: string): HTMLElement {
+  const d = document.createElement('div');
+  d.className = 'error';
+  d.textContent = text;
+  return d;
+}
+
+export function leer(text: string): HTMLElement {
+  const d = document.createElement('div');
+  d.className = 'empty';
+  d.textContent = text;
+  return d;
+}
diff --git a/web/app/src/views/admin.ts b/web/app/src/views/admin.ts
new file mode 100644
index 0000000..10e2e08
--- /dev/null
+++ b/web/app/src/views/admin.ts
@@ -0,0 +1,230 @@
+import {
+  bibliotheken, bibliothekAnlegen, scanStarten, scanstand,
+  benutzer, benutzerAnlegen, metadatenEinstellung, metadatenSetzen,
+  type Bibliothek,
+} from '../api';
+import { esc, knopf, feld, fehlerzeile, leer } from '../util';
+
+export function verwaltung(): HTMLElement {
+  const wurzel = document.createElement('div');
+  wurzel.append(bibliotheksbereich(), benutzerbereich(), metadatenbereich());
+  return wurzel;
+}
+
+/* ---------- Bibliotheken ---------- */
+
+function bibliotheksbereich(): HTMLElement {
+  const bereich = document.createElement('section');
+  const h = document.createElement('h2');
+  h.textContent = 'Bibliotheken';
+
+  const liste = document.createElement('div');
+  liste.className = 'settings';
+  bereich.append(h, liste, anlegeform());
+  void laden();
+
+  async function laden(): Promise<void> {
+    liste.innerHTML = '<div class="spinner"></div>';
+    try {
+      const alle = await bibliotheken();
+      liste.innerHTML = '';
+      if (alle.length === 0) {
+        liste.appendChild(leer('Noch keine Bibliothek. Lege unten eine an — der Pfad ist '
+          + 'der **im Container**, also etwa /media/Filme, nicht der auf dem NAS.'));
+        return;
+      }
+      alle.forEach(b => liste.appendChild(block(b)));
+    } catch (fehler) {
+      liste.innerHTML = '';
+      liste.appendChild(fehlerzeile((fehler as Error).message));
+    }
+  }
+
+  function block(b: Bibliothek): HTMLElement {
+    const d = document.createElement('div');
+    d.className = 'setting';
+    d.innerHTML = `<div class="rowline"><strong>${esc(b.name)}</strong>`
+      + `<span class="tiny">${esc(b.kind)} · ${esc(b.path)}</span></div>`;
+
+    const stand = document.createElement('div');
+    stand.className = 'hint';
+    const los = knopf('Scannen', 'btn');
+
+    los.onclick = async () => {
+      los.disabled = true;
+      try {
+        await scanStarten(b.id);
+        await verfolgen();
+      } catch (fehler) { stand.textContent = (fehler as Error).message; }
+      los.disabled = false;
+    };
+
+    /** Fragt nach, bis der Lauf durch ist — der Scan läuft im Hintergrund. */
+    async function verfolgen(): Promise<void> {
+      for (let i = 0; i < 900; i++) {
+        const s = await scanstand(b.id);
+        if (s.state === 'running') stand.textContent = 'Wird durchsucht…';
+        else if (s.state === 'enriching') stand.textContent = 'Metadaten werden geholt…';
+        else if (s.state === 'failed') { stand.textContent = s.error ?? 'Gescheitert.'; return; }
+        else if (s.state === 'finished') {
+          const teile = [`${s.filesFound} Dateien`, `${s.added} neu`, `${s.removed} entfernt`];
+          if (s.unrecognised) teile.push(`${s.unrecognised} ohne Folgennummer`);
+          if (s.metadata?.skipped) teile.push('Metadaten übersprungen');
+          else if (s.metadata) teile.push(`${s.metadata.moviesMatched + s.metadata.seriesMatched} zugeordnet`);
+          if (s.metadata?.error) teile.push(s.metadata.error);
+          stand.textContent = teile.join(' · ');
+          return;
+        }
+        await new Promise(r => setTimeout(r, 1000));
+      }
+    }
+
+    d.append(los, stand);
+    void verfolgen();
+    return d;
+  }
+
+  function anlegeform(): HTMLElement {
+    const form = document.createElement('div');
+    form.className = 'setting';
+
+    const name = feld('Name, etwa Filme');
+    const pfad = feld('Pfad im Container, etwa /media/Filme');
+    const art = document.createElement('select');
+    art.className = 'field';
+    art.innerHTML = '<option value="Movies">Filme</option><option value="Shows">Serien</option>';
+    const los = knopf('Anlegen', 'btn btn-primary');
+
+    const reihe = document.createElement('div');
+    reihe.className = 'btn-row';
+    reihe.append(name, art, pfad, los);
+    form.append(reihe);
+
+    los.onclick = async () => {
+      form.querySelector('.error')?.remove();
+      los.disabled = true;
+      try {
+        await bibliothekAnlegen(name.value.trim(), art.value, pfad.value.trim());
+        name.value = ''; pfad.value = '';
+        await laden();
+      } catch (fehler) { form.appendChild(fehlerzeile((fehler as Error).message)); }
+      los.disabled = false;
+    };
+    return form;
+  }
+
+  return bereich;
+}
+
+/* ---------- Benutzer ---------- */
+
+function benutzerbereich(): HTMLElement {
+  const bereich = document.createElement('section');
+  const h = document.createElement('h2');
+  h.textContent = 'Benutzer';
+  const liste = document.createElement('div');
+  liste.className = 'settings';
+
+  const name = feld('Benutzername');
+  const passwort = feld('Passwort, mindestens 8 Zeichen', 'password');
+  const admin = document.createElement('label');
+  admin.className = 'hint';
+  const haken = document.createElement('input');
+  haken.type = 'checkbox';
+  admin.append(haken, document.createTextNode(' Administrator'));
+  const los = knopf('Anlegen', 'btn');
+
+  const form = document.createElement('div');
+  form.className = 'setting';
+  const reihe = document.createElement('div');
+  reihe.className = 'btn-row';
+  reihe.append(name, passwort, admin, los);
+  form.append(reihe);
+
+  bereich.append(h, liste, form);
+  void laden();
+
+  async function laden(): Promise<void> {
+    liste.innerHTML = '<div class="spinner"></div>';
+    try {
+      const alle = await benutzer();
+      liste.innerHTML = '';
+      alle.forEach(b => {
+        const d = document.createElement('div');
+        d.className = 'setting';
+        d.innerHTML = `<div class="rowline"><strong>${esc(b.userName)}</strong>`
+          + `<span class="tiny">${b.isAdministrator ? 'Administrator' : 'Benutzer'}</span></div>`;
+        liste.appendChild(d);
+      });
+    } catch (fehler) {
+      liste.innerHTML = '';
+      liste.appendChild(fehlerzeile((fehler as Error).message));
+    }
+  }
+
+  los.onclick = async () => {
+    form.querySelector('.error')?.remove();
+    los.disabled = true;
+    try {
+      await benutzerAnlegen(name.value.trim(), passwort.value, haken.checked);
+      name.value = ''; passwort.value = ''; haken.checked = false;
+      await laden();
+    } catch (fehler) { form.appendChild(fehlerzeile((fehler as Error).message)); }
+    los.disabled = false;
+  };
+
+  return bereich;
+}
+
+/* ---------- Metadaten ---------- */
+
+function metadatenbereich(): HTMLElement {
+  const bereich = document.createElement('section');
+  const h = document.createElement('h2');
+  h.textContent = 'Metadaten';
+  const block = document.createElement('div');
+  block.className = 'setting';
+  bereich.append(h, block);
+
+  void (async () => {
+    try {
+      const stand = await metadatenEinstellung();
+
+      const auskunft = document.createElement('div');
+      auskunft.className = 'hint';
+      auskunft.textContent = stand.usingProjectKey
+        ? 'Es wird der mitgelieferte TMDB-Zugang benutzt. Ein eigener löst ihn ab.'
+        : stand.hasApiKey ? 'Ein eigener TMDB-Zugang ist hinterlegt.'
+        : 'Kein Zugang hinterlegt — die Titel bleiben bei den Dateinamen.';
+
+      const schluessel = feld('Eigener TMDB-Zugang (Read Access Token oder API Key)', 'password');
+      const sprache = feld('Sprache, etwa de-DE');
+      sprache.value = stand.language;
+      const los = knopf('Speichern', 'btn');
+
+      const reihe = document.createElement('div');
+      reihe.className = 'btn-row';
+      reihe.append(schluessel, sprache, los);
+
+      los.onclick = async () => {
+        block.querySelector('.error')?.remove();
+        los.disabled = true;
+        try {
+          await metadatenSetzen({
+            apiKey: schluessel.value.trim() || undefined,
+            language: sprache.value.trim() || undefined,
+          });
+          schluessel.value = '';
+          auskunft.textContent = 'Gespeichert. Der nächste Scan benutzt die neuen Angaben.';
+        } catch (fehler) { block.appendChild(fehlerzeile((fehler as Error).message)); }
+        los.disabled = false;
+      };
+
+      block.append(auskunft, reihe);
+    } catch (fehler) {
+      block.appendChild(fehlerzeile((fehler as Error).message));
+    }
+  })();
+
+  return bereich;
+}
diff --git a/web/app/src/views/cards.ts b/web/app/src/views/cards.ts
deleted file mode 100644
index 84264be..0000000
--- a/web/app/src/views/cards.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-import type { Item } from '../types';
-import { esc, bild, laufzeit } from '../util';
-
-/** Eine Kachel. Querformat für Angefangenes, hochkant für alles andere —
- *  dieselbe Entscheidung wie in der App, und sie ist keine Einstellung:
- *  Angefangenes erkennt man am Szenenbild wieder, Neues sucht man nach
- *  Plakaten aus. */
-export function kachel(item: Item, quer: boolean, beimTippen: (item: Item) => void): HTMLElement {
-  const b = document.createElement('button');
-  b.className = 'card' + (quer ? ' wide' : '');
-  const anteil = item.UserData?.PlayedPercentage;
-  const art = bild(item, quer ? 'Backdrop' : 'Primary', quer ? 500 : 300);
-
-  b.innerHTML = `
-    <div class="art" ${art ? `style="background-image:url('${art}')"` : ''}>
-      ${anteil ? `<div class="bar"><span style="width:${Math.min(anteil, 100)}%"></span></div>` : ''}
-    </div>
-    <div class="title">${esc(item.SeriesName || item.Name)}</div>
-    <div class="sub">${esc(unterzeile(item))}</div>`;
-  b.onclick = () => beimTippen(item);
-  return b;
-}
-
-function unterzeile(item: Item): string {
-  if (item.Type === 'Episode' && item.ParentIndexNumber != null) {
-    return `S${item.ParentIndexNumber}:E${item.IndexNumber} · ${item.Name}`;
-  }
-  return String(item.ProductionYear ?? '');
-}
-
-/** Das Blatt zu einem Titel. */
-export function blatt(item: Item, starten: (item: Item) => void): void {
-  const hinten = document.createElement('div');
-  hinten.id = 'sheet';
-
-  // Serien und Staffeln sind Ordner — abgespielt wird trotzdem, nur eben
-  // nicht der Ordner, sondern die Folge, die als Nächstes dran ist.
-  const ordner = ['Series', 'Season'].includes(item.Type ?? '');
-  const spielbar = ordner || !['BoxSet', 'Folder', 'CollectionFolder'].includes(item.Type ?? '');
-  const teile = [item.ProductionYear, laufzeit(item), item.OfficialRating].filter(Boolean);
-
-  hinten.innerHTML = `
-    <div class="panel">
-      <h2>${esc(item.SeriesName ? item.SeriesName + ' — ' + item.Name : item.Name)}</h2>
-      <div class="meta">${teile.join(' · ')}</div>
-      <p>${esc(item.Overview ?? '')}</p>
-      <div class="btn-row">
-        ${spielbar ? '<button class="btn btn-primary" id="sheet-play"></button>' : ''}
-        <button class="btn" id="sheet-close">Schließen</button>
-      </div>
-    </div>`;
-  hinten.onclick = (e) => { if (e.target === hinten) hinten.remove(); };
-  document.body.appendChild(hinten);
-  hinten.querySelector<HTMLElement>('#sheet-close')!.onclick = () => hinten.remove();
-
-  if (!spielbar) return;
-  const knopf = hinten.querySelector<HTMLButtonElement>('#sheet-play')!;
-  knopf.textContent = ordner ? '▶ Weiterschauen' : '▶ Abspielen';
-  knopf.onclick = () => { starten(item); hinten.remove(); };
-}
diff --git a/web/app/src/views/detail.ts b/web/app/src/views/detail.ts
new file mode 100644
index 0000000..fc91eaa
--- /dev/null
+++ b/web/app/src/views/detail.ts
@@ -0,0 +1,297 @@
+import {
+  filme, serien, folgen, lieferung, downloadAdresse, vorschlaege, zuordnen,
+  bildAdresse, istAdmin,
+  type Film, type Serie, type Folge, type Datei, type Lieferung,
+} from '../api';
+import { esc, dauer, groesse, plakat, knopf, feld, fehlerzeile, leer } from '../util';
+
+type Art = 'filme' | 'serien';
+
+export function detailseite(art: Art, id: string, zurueck: () => void): HTMLElement {
+  const wurzel = document.createElement('div');
+  wurzel.className = 'detail';
+  void laden();
+
+  async function laden(): Promise<void> {
+    wurzel.innerHTML = '<div class="spinner"></div>';
+    try {
+      if (art === 'filme') {
+        const seite = await filme({ take: 200 });
+        const film = seite.items.find(f => f.id === id);
+        if (!film) { wurzel.innerHTML = ''; wurzel.appendChild(leer('Diesen Film gibt es nicht mehr.')); return; }
+        wurzel.innerHTML = '';
+        wurzel.append(kopfbereich(film), dateiliste(film.files), zuordnungsbereich(film.title, film.year));
+      } else {
+        const seite = await serien({ take: 200 });
+        const serie = seite.items.find(s => s.id === id);
+        if (!serie) { wurzel.innerHTML = ''; wurzel.appendChild(leer('Diese Serie gibt es nicht mehr.')); return; }
+        wurzel.innerHTML = '';
+        wurzel.append(kopfbereich(serie), await staffeln(serie), zuordnungsbereich(serie.title, serie.year));
+      }
+    } catch (fehler) {
+      wurzel.innerHTML = '';
+      wurzel.appendChild(fehlerzeile((fehler as Error).message));
+    }
+  }
+
+  /* ---------- Kopf ---------- */
+
+  function kopfbereich(eintrag: Film | Serie): HTMLElement {
+    const kopf = document.createElement('header');
+    kopf.className = 'detail-head';
+
+    const hintergrund = bildAdresse(eintrag.backdropImage);
+    if (hintergrund) kopf.style.setProperty('--backdrop', `url("${hintergrund}")`);
+
+    const zurueckKnopf = knopf('Zurück', 'btn');
+    zurueckKnopf.onclick = zurueck;
+
+    const text = document.createElement('div');
+    text.className = 'detail-text';
+    const jahr = eintrag.year ? ` (${eintrag.year})` : '';
+    text.innerHTML =
+      `<h1>${esc(eintrag.title)}${esc(jahr)}</h1>` +
+      `<p>${esc(eintrag.overview ?? 'Keine Beschreibung.')}</p>`;
+
+    const innen = document.createElement('div');
+    innen.className = 'detail-inner';
+    innen.append(plakat(eintrag.posterImage, eintrag.title), text);
+
+    kopf.append(zurueckKnopf, innen);
+    return kopf;
+  }
+
+  /* ---------- Dateien und Spuren ---------- */
+
+  function dateiliste(dateien: Datei[]): HTMLElement {
+    const bereich = document.createElement('section');
+    bereich.className = 'settings';
+
+    if (dateien.length === 0) { bereich.appendChild(leer('Keine Datei hinterlegt.')); return bereich; }
+
+    dateien.forEach(datei => {
+      const block = document.createElement('div');
+      block.className = 'setting';
+
+      const zeile = document.createElement('div');
+      zeile.className = 'rowline';
+      zeile.innerHTML =
+        `<strong>${esc(datei.fileName)}</strong>` +
+        `<span class="tiny">${esc([datei.container?.toUpperCase(), groesse(datei.sizeBytes),
+          dauer(datei.durationSeconds)].filter(Boolean).join(' · '))}</span>`;
+      block.appendChild(zeile);
+
+      const spuren = document.createElement('div');
+      spuren.className = 'hint';
+      spuren.innerHTML = datei.streams.map(s => {
+        const was = s.kind === 'Video' ? `Bild ${s.width}×${s.height}`
+          : s.kind === 'Audio' ? `Ton${s.channels ? ` ${s.channels}.0` : ''}`
+          : 'Text';
+        const name = [s.language?.toUpperCase(), s.title].filter(Boolean).join(' · ');
+        return `<div>${esc(was)} — ${esc(s.codec ?? '?')}${name ? ` — ${esc(name)}` : ''}</div>`;
+      }).join('');
+      block.appendChild(spuren);
+
+      block.appendChild(aktionen(datei));
+      bereich.appendChild(block);
+    });
+    return bereich;
+  }
+
+  function aktionen(datei: Datei): HTMLElement {
+    const reihe = document.createElement('div');
+    reihe.className = 'btn-row';
+    const stand = document.createElement('div');
+    stand.className = 'hint';
+
+    const abspielen = knopf('Abspielen', 'btn btn-primary');
+    const herunterladen = knopf('Herunterladen', 'btn');
+
+    /** Sorgt dafür, dass die Datei abholbereit ist — packt um, falls nötig. */
+    async function bereitstellen(): Promise<boolean> {
+      let auskunft: Lieferung;
+      try { auskunft = await lieferung(datei.id); }
+      catch (fehler) { stand.textContent = (fehler as Error).message; return false; }
+
+      if (auskunft.method === 'directFile') return true;
+      if (auskunft.packageState === 'ready') return true;
+
+      // **Hier steht, was passieren wird, bevor es passiert.** Welche Spuren
+      // neu gerechnet werden, welche Untertitel nicht mitkönnen.
+      const gruende: string[] = [];
+      if (auskunft.audioToEncode.length) gruende.push(`${auskunft.audioToEncode.length} Tonspur(en) werden neu gerechnet`);
+      if (auskunft.subtitlesDropped.length) gruende.push(`${auskunft.subtitlesDropped.length} Bilduntertitel können nicht mit`);
+      stand.textContent = `Wird in eine MP4 umgepackt${gruende.length ? ` — ${gruende.join(', ')}` : ''}…`;
+
+      // Der erste Abruf stösst an, danach wird nachgefragt.
+      for (let i = 0; i < 600; i++) {
+        const antwort = await fetch(downloadAdresse(datei.id), { method: 'HEAD' });
+        if (antwort.ok) { stand.textContent = ''; return true; }
+        if (antwort.status !== 202) { stand.textContent = `Umpacken gescheitert (${antwort.status}).`; return false; }
+
+        const wie = await lieferung(datei.id);
+        if (wie.error) { stand.textContent = wie.error; return false; }
+        stand.textContent = `Wird umgepackt… ${Math.round(wie.progress * 100)} %`;
+        await new Promise(r => setTimeout(r, 1000));
+      }
+      stand.textContent = 'Das Umpacken dauert ungewöhnlich lange.';
+      return false;
+    }
+
+    abspielen.onclick = async () => {
+      abspielen.disabled = true;
+      if (await bereitstellen()) spieler(downloadAdresse(datei.id));
+      abspielen.disabled = false;
+    };
+
+    herunterladen.onclick = async () => {
+      herunterladen.disabled = true;
+      if (await bereitstellen()) {
+        // Ein echter Link, kein Blob: der Browser lädt im Hintergrund und
+        // kann fortsetzen, statt den ganzen Film in den Speicher zu nehmen.
+        const a = document.createElement('a');
+        a.href = downloadAdresse(datei.id);
+        a.download = '';
+        a.click();
+      }
+      herunterladen.disabled = false;
+    };
+
+    reihe.append(abspielen, herunterladen);
+    const huelle = document.createElement('div');
+    huelle.append(reihe, stand);
+    return huelle;
+  }
+
+  /* ---------- Staffeln und Folgen ---------- */
+
+  async function staffeln(serie: Serie): Promise<HTMLElement> {
+    const bereich = document.createElement('section');
+    const alle = await folgen(serie.id);
+
+    serie.seasons.forEach(nummer => {
+      const titel = document.createElement('h2');
+      titel.textContent = `Staffel ${nummer}`;
+      bereich.appendChild(titel);
+
+      const liste = document.createElement('div');
+      liste.className = 'settings';
+      alle.items.filter(f => f.season === nummer).forEach(folge => {
+        liste.appendChild(folgenblock(folge));
+      });
+      bereich.appendChild(liste);
+    });
+    return bereich;
+  }
+
+  function folgenblock(folge: Folge): HTMLElement {
+    const block = document.createElement('div');
+    block.className = 'setting';
+    const zeile = document.createElement('div');
+    zeile.className = 'rowline';
+    zeile.innerHTML =
+      `<strong>${String(folge.episode).padStart(2, '0')} · ${esc(folge.title ?? 'Ohne Titel')}</strong>`;
+    block.appendChild(zeile);
+
+    if (folge.overview) {
+      const text = document.createElement('div');
+      text.className = 'hint';
+      text.textContent = folge.overview;
+      block.appendChild(text);
+    }
+    folge.files.forEach(datei => block.appendChild(aktionen(datei)));
+    return block;
+  }
+
+  /* ---------- Zuordnung korrigieren ---------- */
+
+  function zuordnungsbereich(titel: string, jahr: number | null): HTMLElement {
+    const bereich = document.createElement('section');
+    if (!istAdmin()) return bereich;
+
+    const oeffner = knopf('Zuordnung korrigieren', 'btn');
+    bereich.appendChild(oeffner);
+
+    oeffner.onclick = () => {
+      oeffner.remove();
+      bereich.appendChild(zuordnungsmaske(titel, jahr));
+    };
+    return bereich;
+  }
+
+  function zuordnungsmaske(titel: string, jahr: number | null): HTMLElement {
+    const maske = document.createElement('div');
+    maske.className = 'settings';
+
+    const suche = feld('Anderer Suchbegriff');
+    suche.value = titel;
+    const jahrfeld = feld('Jahr', 'number');
+    if (jahr) jahrfeld.value = String(jahr);
+    const suchen = knopf('Suchen', 'btn');
+
+    const reihe = document.createElement('div');
+    reihe.className = 'btn-row';
+    reihe.append(suche, jahrfeld, suchen);
+
+    const treffer = document.createElement('div');
+    maske.append(reihe, treffer);
+
+    async function fragen(): Promise<void> {
+      treffer.innerHTML = '<div class="spinner"></div>';
+      try {
+        const liste = await vorschlaege(art === 'filme' ? 'movies' : 'series', id,
+          suche.value.trim(), jahrfeld.value ? Number(jahrfeld.value) : undefined);
+
+        treffer.innerHTML = '';
+        if (liste.length === 0) { treffer.appendChild(leer('Nichts gefunden.')); return; }
+
+        liste.forEach(v => {
+          const zeile = document.createElement('button');
+          zeile.className = 'setting pick';
+          zeile.innerHTML =
+            `<strong>${esc(v.title)}</strong> <span class="tiny">${esc(v.year ?? '')} · TMDB ${v.tmdbId}</span>` +
+            `<div class="hint">${esc((v.overview ?? '').slice(0, 160))}</div>`;
+          zeile.onclick = async () => {
+            zeile.disabled = true;
+            try {
+              await zuordnen(art === 'filme' ? 'movies' : 'series', id, v.tmdbId);
+              await laden();
+            } catch (fehler) { treffer.appendChild(fehlerzeile((fehler as Error).message)); }
+          };
+          treffer.appendChild(zeile);
+        });
+      } catch (fehler) {
+        treffer.innerHTML = '';
+        treffer.appendChild(fehlerzeile((fehler as Error).message));
+      }
+    }
+
+    suchen.onclick = () => void fragen();
+    void fragen();
+    return maske;
+  }
+
+  return wurzel;
+}
+
+/* ---------- Abspielen ---------- */
+
+function spieler(adresse: string): void {
+  const schicht = document.createElement('div');
+  schicht.className = 'pl-fill';
+
+  const video = document.createElement('video');
+  video.src = adresse;
+  video.controls = true;
+  video.autoplay = true;
+  video.style.cssText = 'width:100%;height:100%;background:#000';
+
+  const schliessen = knopf('Schliessen', 'btn');
+  schliessen.style.cssText = 'position:absolute;top:16px;right:16px;z-index:2';
+  schliessen.onclick = () => { video.pause(); schicht.remove(); };
+
+  schicht.append(video, schliessen);
+  schicht.onkeydown = e => { if (e.key === 'Escape') schliessen.click(); };
+  document.body.appendChild(schicht);
+  video.focus();
+}
diff --git a/web/app/src/views/home.ts b/web/app/src/views/home.ts
index 7f9b807..b877945 100644
--- a/web/app/src/views/home.ts
+++ b/web/app/src/views/home.ts
@@ -1,207 +1,60 @@
-import type { Item, Reihe, Seite } from '../types';
-import { api, sitzung } from '../api';
-import { P, anordnen } from '../prefs';
-import { icon } from '../icons';
-import { esc, bild, laufzeit, hatBild, FELDER } from '../util';
-import { kachel } from './cards';
+import { filme, serien, type Film, type Serie } from '../api';
+import { esc, plakat, leer, fehlerzeile } from '../util';
 
-/** Welche Reihen es bei diesem Server gibt — für die Einstellungen. */
-export let bekannteReihen: { id: string; title: string }[] = [];
-
-export async function startseite(
-  wurzel: HTMLElement,
-  ansichten: Item[],
-  oeffnen: (item: Item) => void,
-): Promise<void> {
+/** Die Startseite: je eine waagerechte Reihe, wie bei Plex.
+ *
+ * Noch ohne „Weiterschauen" — dafür braucht es den Sehfortschritt, und der
+ * kommt erst in Stufe 4. Eine leere Reihe mit diesem Namen wäre eine Zusage,
+ * die niemand einlöst. */
+export function startseite(oeffnen: (art: 'filme' | 'serien', id: string) => void): HTMLElement {
+  const wurzel = document.createElement('div');
   wurzel.innerHTML = '<div class="spinner"></div>';
 
-  const hole = async (pfad: string, q: Record<string, string> = {}): Promise<Item[]> => {
+  void (async () => {
     try {
-      const r = await api<Seite | Item[]>(
-        pfad + '?' + new URLSearchParams({ Fields: FELDER, Limit: '20', ...q }),
-      );
-      // „Latest" liefert ein blankes Feld, alles andere eine Seite mit Items.
-      return Array.isArray(r) ? r : (r.Items ?? []);
-    } catch {
-      return [];
+      const [f, s] = await Promise.all([filme({ take: 24 }), serien({ take: 24 })]);
+      wurzel.innerHTML = '';
+
+      if (f.total === 0 && s.total === 0) {
+        wurzel.appendChild(leer('Noch nichts da. Lege unter Verwaltung eine Bibliothek an '
+          + 'und starte einen Scan.'));
+        return;
+      }
+      if (f.total > 0) wurzel.appendChild(reihe(`Filme · ${f.total}`, f.items, 'filme'));
+      if (s.total > 0) wurzel.appendChild(reihe(`Serien · ${s.total}`, s.items, 'serien'));
+    } catch (fehler) {
+      wurzel.innerHTML = '';
+      wurzel.appendChild(fehlerzeile((fehler as Error).message));
     }
-  };
+  })();
 
-  const [weiter, naechstes, ...neues] = await Promise.all([
-    hole(`/Users/${sitzung.userId}/Items/Resume`, { MediaTypes: 'Video' }),
-    hole('/Shows/NextUp', { userId: sitzung.userId }),
-    ...ansichten.map((v) => hole(`/Users/${sitzung.userId}/Items/Latest`, { ParentId: v.Id })),
-  ]);
+  function reihe(titel: string, eintraege: (Film | Serie)[], art: 'filme' | 'serien'): HTMLElement {
+    const bereich = document.createElement('section');
+    bereich.className = 'reihe';
 
-  let reihen: Reihe[];
-  if (P.combineContinue) {
-    const gesehen = new Set<string>();
-    const zusammen = [...weiter!, ...naechstes!].filter((i) => !gesehen.has(i.Id) && gesehen.add(i.Id));
-    // Die zusammengelegte Reihe behält die Kennung der ersten — sonst wäre sie
-    // für die gespeicherte Reihenfolge eine neue und stünde wieder unten.
-    reihen = [{ id: 'resume', title: 'Weiterschauen', items: zusammen, wide: true }];
-  } else {
-    reihen = [
-      { id: 'resume', title: 'Weiterschauen', items: weiter!, wide: true },
-      { id: 'nextup', title: 'Als Nächstes', items: naechstes!, wide: true },
-    ];
+    const h = document.createElement('h2');
+    h.textContent = titel;
+
+    const streifen = document.createElement('div');
+    streifen.className = 'strip';
+
+    eintraege.forEach(eintrag => {
+      const k = document.createElement('button');
+      k.className = 'card';
+      k.appendChild(plakat(eintrag.posterImage, eintrag.title));
+
+      const unten = document.createElement('div');
+      unten.className = 'rowline';
+      unten.innerHTML = `<strong>${esc(eintrag.title)}</strong>`
+        + `<span class="tiny">${esc(eintrag.year ?? '')}</span>`;
+      k.appendChild(unten);
+      k.onclick = () => oeffnen(art, eintrag.id);
+      streifen.appendChild(k);
+    });
+
+    bereich.append(h, streifen);
+    return bereich;
   }
 
-  reihen.push(...ansichten.map((v, i) => ({
-    id: 'latest.' + v.Id,
-    title: `Neu in ${v.Name}`,
-    // Gesehenes ausblenden gilt nur für Neuzugänge: in „Weiterschauen" wäre
-    // es sinnlos, dort ist alles angefangen.
-    items: (neues[i] ?? []).filter((it) => !P.hideWatched || !it.UserData?.Played),
-  })));
-  reihen = reihen.filter((r) => r.items.length);
-
-  // **Vor** dem Ausblenden merken: die Einstellungen müssen auch die Reihen
-  // anbieten, die gerade versteckt sind.
-  bekannteReihen = reihen.map((r) => ({ id: r.id, title: r.title }));
-  reihen = anordnen(reihen);
-
-  const auswahl = P.heroSource === 'latestOnly'
-    ? neues.flat()
-    : [...weiter!, ...naechstes!, ...neues.flat()];
-  const oben = aufmacherWahl(auswahl);
-
-  wurzel.innerHTML = '';
-  wurzel.classList.toggle('pad-top', oben.length === 0);
-  if (oben.length) wurzel.appendChild(aufmacher(oben, oeffnen));
-  for (const r of reihen) wurzel.appendChild(reihe(r, oeffnen));
-
-  if (!reihen.length && !oben.length) {
-    wurzel.innerHTML = '<div class="empty pad-top">Hier ist noch nichts.</div>';
-  }
-}
-
-/* Wählt aus, was oben groß steht — dieselbe Regel wie in der App.
-   ----------------------------------------------------------------------------
-   Die Auswahl wechselt alle sechs Stunden, und ein Titel ohne Hintergrundbild
-   zieht ein schlechteres Los. Bei jedem Laden zu würfeln wäre unruhig — man
-   tippt auf etwas, geht zurück, und es ist weg. Einmal täglich wäre zu träge. */
-function aufmacherWahl(items: Item[]): Item[] {
-  let keim = (Math.floor(Date.now() / (6 * 3600 * 1000)) * 2654435761) % 2147483647;
-  const wuerfeln = (): number => (keim = (keim * 16807) % 2147483647) / 2147483647;
-
-  const gesehen = new Set<string>();
-  return items
-    .filter((it) => !gesehen.has(it.Id) && gesehen.add(it.Id))
-    // Wer ein Hintergrundbild hat, zieht aus [0,1) — wer keines hat, nur aus
-    // [0,0.2). Solange es genug mit Bild gibt, kommt er nicht nach vorn; gibt
-    // es wenige, hat er seine Chance.
-    .map((it) => ({ it, los: wuerfeln() * (hatBild(it, 'Backdrop') ? 1 : 0.2) }))
-    .sort((a, b) => b.los - a.los)
-    .slice(0, P.heroCount)
-    .map((x) => x.it);
-}
-
-function aufmacher(items: Item[], oeffnen: (item: Item) => void): HTMLElement {
-  const aussen = document.createElement('div');
-  const rahmen = document.createElement('section');
-  rahmen.id = 'hero';
-
-  const bilder = items.map((it, i) => {
-    const d = document.createElement('div');
-    d.className = 'shot' + (i === 0 ? ' on' : '');
-    d.style.backgroundImage = `url("${bild(it, 'Backdrop', 1600)}")`;
-    return d;
-  });
-  bilder.forEach((b) => rahmen.appendChild(b));
-  rahmen.insertAdjacentHTML('beforeend', '<div class="veil"></div>');
-
-  const koerper = document.createElement('div');
-  koerper.className = 'body';
-  rahmen.appendChild(koerper);
-
-  const punkte = document.createElement('div');
-  punkte.className = 'dots';
-
-  let bei = 0;
-  let uhr: ReturnType<typeof setInterval> | null = null;
-  const anhalten = (): void => { if (uhr) { clearInterval(uhr); uhr = null; } };
-  const schritt = (um: number): void => {
-    anhalten();
-    bei = (bei + um + items.length) % items.length;
-    malen();
-  };
-
-  items.forEach((_, i) => {
-    const d = document.createElement('button');
-    d.className = i ? '' : 'on';
-    d.setAttribute('aria-label', `Titel ${i + 1}`);
-    d.onclick = () => { anhalten(); bei = i; malen(); };
-    punkte.appendChild(d);
-  });
-
-  function malen(): void {
-    const it = items[bei]!;
-    const teile = [it.ProductionYear, laufzeit(it), it.OfficialRating].filter(Boolean);
-    const zeichen = it.ImageTags?.Logo ? bild(it, 'Primary', 600) : '';
-    koerper.innerHTML = `
-      ${zeichen && it.ImageTags?.Logo ? `<img class="logo" src="${zeichen}" alt="${esc(it.Name)}">`
-        : `<h2>${esc(it.Name)}</h2>`}
-      <div class="meta">${teile.join(' · ')}</div>
-      <div class="summary">${esc(it.Overview ?? '')}</div>
-      <div class="actions">
-        <button class="btn btn-primary">${icon('play', 15)} Abspielen</button>
-        <button class="btn">Details</button>
-      </div>`;
-    const knoepfe = koerper.querySelectorAll('.btn');
-    (knoepfe[0] as HTMLElement).onclick = () => oeffnen(it);
-    (knoepfe[1] as HTMLElement).onclick = () => oeffnen(it);
-    bilder.forEach((b, i) => b.classList.toggle('on', i === bei));
-    [...punkte.children].forEach((d, i) => d.classList.toggle('on', i === bei));
-  }
-  malen();
-
-  if (items.length > 1) {
-    const zurueck = document.createElement('button');
-    zurueck.className = 'hero-nav prev';
-    zurueck.innerHTML = icon('left', 22);
-    zurueck.setAttribute('aria-label', 'Vorheriger Titel');
-    zurueck.onclick = () => schritt(-1);
-
-    const vor = document.createElement('button');
-    vor.className = 'hero-nav next';
-    vor.innerHTML = icon('right', 22);
-    vor.setAttribute('aria-label', 'Nächster Titel');
-    vor.onclick = () => schritt(1);
-    rahmen.append(zurueck, vor);
-
-    // Wischen — erst ab einem ordentlichen Weg und nur, wenn es waagerecht
-    // gemeint ist. Sonst nimmt die Geste dem Scrollen den Vortritt.
-    let x0: number | null = null;
-    let y0 = 0;
-    rahmen.addEventListener('touchstart', (e) => {
-      x0 = e.touches[0]!.clientX; y0 = e.touches[0]!.clientY;
-    }, { passive: true });
-    rahmen.addEventListener('touchend', (e) => {
-      if (x0 == null) return;
-      const dx = e.changedTouches[0]!.clientX - x0;
-      const dy = e.changedTouches[0]!.clientY - y0;
-      if (Math.abs(dx) > 48 && Math.abs(dx) > Math.abs(dy)) schritt(dx < 0 ? 1 : -1);
-      x0 = null;
-    }, { passive: true });
-
-    // Sieben Sekunden — lang genug, um den Satz zu Ende zu lesen.
-    uhr = setInterval(() => {
-      if (!document.body.contains(rahmen)) return anhalten();
-      bei = (bei + 1) % items.length;
-      malen();
-    }, 7000);
-  }
-
-  aussen.append(rahmen, punkte);
-  return aussen;
-}
-
-function reihe(r: Reihe, oeffnen: (item: Item) => void): HTMLElement {
-  const abschnitt = document.createElement('section');
-  abschnitt.className = 'row';
-  abschnitt.innerHTML = `<h3>${esc(r.title)}</h3><div class="strip"></div>`;
-  const streifen = abschnitt.querySelector('.strip')!;
-  for (const it of r.items) streifen.appendChild(kachel(it, Boolean(r.wide), oeffnen));
-  return abschnitt;
+  return wurzel;
 }
diff --git a/web/app/src/views/library.ts b/web/app/src/views/library.ts
index 6f9e46c..44e9f47 100644
--- a/web/app/src/views/library.ts
+++ b/web/app/src/views/library.ts
@@ -1,28 +1,95 @@
-import type { Item, Seite } from '../types';
-import { api, sitzung } from '../api';
-import { esc, FELDER } from '../util';
-import { kachel } from './cards';
+import { filme, serien, type Film, type Serie } from '../api';
+import { esc, plakat, leer, fehlerzeile } from '../util';
 
-export async function mediathek(
-  wurzel: HTMLElement,
-  id: string,
-  oeffnen: (item: Item) => void,
-): Promise<void> {
-  wurzel.classList.add('pad-top');
-  wurzel.innerHTML = '<div class="spinner"></div>';
+type Art = 'filme' | 'serien';
 
-  try {
-    const r = await api<Seite>(
-      `/Users/${sitzung.userId}/Items?` + new URLSearchParams({
-        ParentId: id, Recursive: 'true', IncludeItemTypes: 'Movie,Series',
-        SortBy: 'SortName', SortOrder: 'Ascending', Limit: '200', Fields: FELDER,
-      }),
-    );
-    const items = r.Items ?? [];
-    wurzel.innerHTML = items.length ? '<div class="grid"></div>' : '<div class="empty">Leer.</div>';
-    const raster = wurzel.querySelector('.grid');
-    if (raster) for (const it of items) raster.appendChild(kachel(it, false, oeffnen));
-  } catch (e) {
-    wurzel.innerHTML = `<div class="empty">${esc((e as Error).message)}</div>`;
+/** Eine Bibliothek als Raster.
+ *
+ * Welche Art gezeigt wird, entscheidet die Seitenleiste — wie bei Plex, wo
+ * jede Bibliothek ihr eigener Punkt in der Navigation ist. Eine zweite
+ * Umschaltung innerhalb der Seite wäre dieselbe Entscheidung an zwei Orten.
+ *
+ * Gesucht wird am Server, nicht im Browser: bei zehntausend Titeln wäre
+ * alles zu laden und dann zu filtern der falsche Weg. */
+export function mediathek(art: Art, oeffnen: (art: Art, id: string) => void): HTMLElement {
+  const wurzel = document.createElement('div');
+  let suche = '';
+  let tippt: number | undefined;
+
+  const kopf = document.createElement('div');
+  kopf.className = 'row';
+
+  const titel = document.createElement('h1');
+  titel.className = 'seitentitel';
+  titel.textContent = art === 'filme' ? 'Filme' : 'Serien';
+
+  const suchfeld = document.createElement('input');
+  suchfeld.className = 'field';
+  suchfeld.type = 'search';
+  suchfeld.placeholder = 'Suchen';
+  suchfeld.oninput = () => {
+    // Nicht bei jedem Tastendruck fragen: das wären bei „Untergang" neun
+    // Anfragen, von denen acht niemanden interessieren.
+    window.clearTimeout(tippt);
+    tippt = window.setTimeout(() => { suche = suchfeld.value.trim(); void laden(); }, 250);
+  };
+
+  kopf.append(titel, suchfeld);
+
+  const raster = document.createElement('div');
+  raster.className = 'grid';
+
+  wurzel.append(kopf, raster);
+
+  async function laden(): Promise<void> {
+    raster.innerHTML = '';
+    raster.appendChild(ladeanzeige());
+    try {
+      const seite = art === 'filme'
+        ? await filme({ search: suche, take: 100 })
+        : await serien({ search: suche, take: 100 });
+
+      raster.innerHTML = '';
+      if (seite.items.length === 0) {
+        raster.appendChild(leer(suche
+          ? `Nichts gefunden für „${suche}“.`
+          : 'Noch nichts da. Lege unter Verwaltung eine Bibliothek an und starte einen Scan.'));
+        return;
+      }
+      seite.items.forEach(eintrag => raster.appendChild(karte(eintrag)));
+    } catch (fehler) {
+      raster.innerHTML = '';
+      raster.appendChild(fehlerzeile((fehler as Error).message));
+    }
   }
+
+  function karte(eintrag: Film | Serie): HTMLElement {
+    const k = document.createElement('button');
+    k.className = 'card';
+    k.appendChild(plakat(eintrag.posterImage, eintrag.title));
+
+    const unten = document.createElement('div');
+    unten.className = 'rowline';
+    // Zusammengesetzt aus dem, was da ist — ein fest verdrahtetes „ · " davor
+    // hinterlässt bei fehlendem Jahr einen Punkt ohne Angabe.
+    const teile = [
+      eintrag.year ? String(eintrag.year) : null,
+      'episodeCount' in eintrag ? `${eintrag.episodeCount} Folgen` : null,
+    ].filter(Boolean);
+    unten.innerHTML = `<strong>${esc(eintrag.title)}</strong>`
+      + `<span class="tiny">${esc(teile.join(' · '))}</span>`;
+    k.appendChild(unten);
+
+    k.onclick = () => oeffnen(art, eintrag.id);
+    return k;
+  }
+
+  void laden();
+  return wurzel;
+}
+
+function ladeanzeige(): HTMLElement {
+  const d = document.createElement('div');
+  d.className = 'spinner';
+  return d;
 }
diff --git a/web/app/src/views/login.ts b/web/app/src/views/login.ts
index b428e98..a932383 100644
--- a/web/app/src/views/login.ts
+++ b/web/app/src/views/login.ts
@@ -1,50 +1,36 @@
 import { anmelden } from '../api';
-import { esc } from '../util';
+import { knopf, feld, fehlerzeile } from '../util';
 
-export function anmeldung(wurzel: HTMLElement, fertig: () => void): void {
-  wurzel.innerHTML = `
-    <form class="login-card" id="login-form">
-      <h1>Flaro</h1>
-      <p class="sub">Deine Mediathek, schöner.</p>
-      <div class="field">
-        <label for="user">Benutzer</label>
-        <input id="user" type="text" autocomplete="username" required>
-      </div>
-      <div class="field">
-        <label for="pass">Passwort</label>
-        <input id="pass" type="password" autocomplete="current-password">
-      </div>
-      <p class="error" id="login-error"></p>
-      <button class="btn btn-primary" type="submit" id="login-btn">Anmelden</button>
-      <p class="note">
-        Der Zugangsschlüssel bleibt in diesem Browser. Das Passwort geht an
-        deinen eigenen Server und wird nirgends gespeichert.
-      </p>
-    </form>`;
+export function anmeldung(fertig: () => void): HTMLElement {
+  const karte = document.createElement('div');
+  karte.className = 'login-card';
 
-  const form = wurzel.querySelector<HTMLFormElement>('#login-form')!;
-  const knopf = wurzel.querySelector<HTMLButtonElement>('#login-btn')!;
-  const fehler = wurzel.querySelector<HTMLElement>('#login-error')!;
+  const titel = document.createElement('h1');
+  titel.textContent = 'Flaro';
 
-  form.onsubmit = async (e) => {
-    e.preventDefault();
-    knopf.disabled = true;
-    knopf.textContent = 'Verbinde …';
-    fehler.textContent = '';
+  const name = feld('Benutzername');
+  name.autocomplete = 'username';
+  const passwort = feld('Passwort', 'password');
+  passwort.autocomplete = 'current-password';
+  const los = knopf('Anmelden', 'btn btn-primary');
+
+  karte.append(titel, name, passwort, los);
+
+  async function absenden(): Promise<void> {
+    karte.querySelector('.error')?.remove();
+    los.disabled = true;
     try {
-      await anmelden(
-        wurzel.querySelector<HTMLInputElement>('#user')!.value,
-        wurzel.querySelector<HTMLInputElement>('#pass')!.value,
-      );
+      await anmelden(name.value.trim(), passwort.value);
       fertig();
-    } catch (e2) {
-      // Die Serveradresse steht nicht mehr hier, sondern beim Server davor —
-      // deshalb kann sie auch nicht mehr falsch eingetippt sein. Bleibt die
-      // Anmeldung selbst, oder ein Server, der nicht läuft.
-      fehler.textContent = 'Anmeldung fehlgeschlagen: ' + esc((e2 as Error).message);
-    } finally {
-      knopf.disabled = false;
-      knopf.textContent = 'Anmelden';
+    } catch (fehler) {
+      karte.appendChild(fehlerzeile((fehler as Error).message));
+      los.disabled = false;
+      passwort.select();
     }
-  };
+  }
+
+  los.onclick = () => void absenden();
+  passwort.onkeydown = e => { if (e.key === 'Enter') void absenden(); };
+  setTimeout(() => name.focus(), 50);
+  return karte;
 }
diff --git a/web/app/src/views/player.ts b/web/app/src/views/player.ts
deleted file mode 100644
index 0685496..0000000
--- a/web/app/src/views/player.ts
+++ /dev/null
@@ -1,499 +0,0 @@
-import type HlsTyp from 'hls.js';
-import type { Item, Quelle, Spur } from '../types';
-import { api, medienURL, sitzung, wiedergabeauskunft } from '../api';
-import { P, QUALITIES, RATES } from '../prefs';
-import { icon } from '../icons';
-import { esc, folgentitel, uhr } from '../util';
-
-/* Der Player.
-   ----------------------------------------------------------------------------
-   Vollbild und eigene Bedienung, nach dem Bauplan der iPad-App: Titel und die
-   Wahl oben, Transport in der Mitte, unten **nur** der Regler mit den beiden
-   Zeiten. Und keine Knopfflächen — dort sind es blanke weiße Symbole, der
-   einzige Hintergrund ist die Abdunklung über dem ganzen Bild. */
-
-interface Lauf {
-  quality: number;
-  audio: number | null;
-  subtitle: number | null;
-  streams: Spur[];
-  stelle: number;
-  sitzung?: Sitzungsmeldung;
-}
-
-interface Sitzungsmeldung {
-  id?: string;
-  quelleID: string;
-  itemID: string;
-  stelle: number;
-  melden: (weg: string, stelle?: number, extra?: Record<string, unknown>) => void;
-}
-
-export function playerOeffnen(item: Item, beimSchliessen?: () => void): void {
-  document.getElementById('player')?.remove();
-
-  const ebene = document.createElement('div');
-  ebene.id = 'player';
-  ebene.innerHTML = `
-    <video playsinline></video>
-    <div class="pl-chrome">
-      <div class="pl-top">
-        <button class="pl-icon" id="pl-close" aria-label="Schließen">${icon('close')}</button>
-        <div class="pl-title">
-          <strong>${esc(item.SeriesName || item.Name)}</strong>
-          ${item.SeriesName ? `<span>${esc(folgentitel(item))}</span>` : ''}
-        </div>
-        <span class="pl-spacer"></span>
-        <button class="pl-icon" id="pl-audio" aria-label="Tonspur" hidden>${icon('waveform')}</button>
-        <button class="pl-icon" id="pl-subs" aria-label="Untertitel" hidden>${icon('captions')}</button>
-        <button class="pl-icon pl-quality" id="pl-qual" aria-label="Qualität">Original</button>
-        <button class="pl-icon" id="pl-speed" aria-label="Geschwindigkeit">${icon('speed')}</button>
-        <button class="pl-icon" id="pl-mute" aria-label="Ton">${icon('sound')}</button>
-        <button class="pl-icon" id="pl-full" aria-label="Vollbild">${icon('expand')}</button>
-      </div>
-      <div class="pl-center">
-        <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', 52)}</button>
-        <button class="pl-round" id="pl-fwd" aria-label="Vorspulen">${icon('goFwd', 40, P.skipForward)}</button>
-      </div>
-      <div class="pl-bottom">
-        <div class="pl-track" id="pl-track"><div class="pl-buf"></div><div class="pl-fill"></div><i></i></div>
-        <div class="pl-times"><span id="pl-now">0:00</span><span id="pl-left">–:--</span></div>
-      </div>
-    </div>
-    <div class="pl-menu" id="pl-menu" hidden></div>
-    <div class="pl-busy" id="pl-busy"><i></i></div>`;
-  document.body.appendChild(ebene);
-  document.body.style.overflow = 'hidden';
-
-  const v = ebene.querySelector('video')!;
-  const chrome = ebene.querySelector('.pl-chrome')!;
-  const el = <T extends HTMLElement>(id: string): T => ebene.querySelector('#' + id) as T;
-
-  const lauf: Lauf = {
-    quality: P.quality, audio: null, subtitle: null, streams: [], stelle: 0,
-  };
-
-  /* ---------- Fehler sichtbar machen ---------- */
-  let hls: HlsTyp | null = null;
-  /** Ob gerade auf Daten gewartet wird — am Anfang immer. */
-  let wartet = true;
-
-  const scheitern = (satz: string, hinweis?: string, adresse?: string): void => {
-    ebene.classList.remove('loading');
-    el('pl-busy').classList.remove('on');
-    // Sonst dreht sich der Kreisel im Knopf hinter dem Fehlerkasten weiter,
-    // als käme noch etwas.
-    wartet = false;
-    malen();
-    ebene.querySelector('.pl-error')?.remove();
-    const kasten = document.createElement('div');
-    kasten.className = 'pl-error';
-    kasten.innerHTML = `<strong>${esc(satz)}</strong>${hinweis ? `<span>${esc(hinweis)}</span>` : ''}
-      ${adresse ? `<code>${esc(adresse.replace(/api_key=[^&]*/, 'api_key=…'))}</code>` : ''}
-      <button class="btn">Schließen</button>`;
-    kasten.querySelector('button')!.onclick = schliessen;
-    ebene.appendChild(kasten);
-  };
-
-  const diagnose = { text: '', url: '' };
-  v.addEventListener('error', () => {
-    const c = v.error?.code;
-    scheitern('Der Browser kann diesen Strom nicht abspielen.',
-      (c === 4 ? 'Das Format wird nicht unterstützt. ' : `Fehlercode ${c ?? '?'}. `) + diagnose.text,
-      diagnose.url);
-  });
-
-  /* ---------- Bedienung ein- und ausblenden ---------- */
-  let ausblenden: ReturnType<typeof setTimeout>;
-  const zeigen = (): void => {
-    chrome.classList.add('on');
-    clearTimeout(ausblenden);
-    // Solange etwas steht, bleibt die Bedienung: sie auszublenden, während
-    // niemand spielt, versteckt den einzigen Knopf, der weiterhilft.
-    if (!v.paused) {
-      ausblenden = setTimeout(() => {
-        chrome.classList.remove('on');
-        kreisel();
-      }, 3000);
-    }
-    kreisel();
-  };
-
-  /** Der freistehende Kreisel — nur, wenn die Bedienung aus ist.
-   *
-   *  Sonst stünden zwei übereinander: einer in der Mitte des Bildes und einer
-   *  im Abspielknopf, der genau davor sitzt. Genau so sah es vorher aus. */
-  const kreisel = (): void => {
-    el('pl-busy').classList.toggle('on', wartet && !chrome.classList.contains('on'));
-  };
-  ebene.addEventListener('mousemove', zeigen);
-  ebene.addEventListener('touchstart', zeigen, { passive: true });
-
-  /* ---------- Transport ---------- */
-  const umschalten = (): void => { void (v.paused ? v.play() : v.pause()); };
-  el('pl-toggle').onclick = umschalten;
-  el('pl-back').onclick = () => { v.currentTime = Math.max(0, v.currentTime - P.skipBackward); zeigen(); };
-  el('pl-fwd').onclick = () => { v.currentTime = Math.min(v.duration || 1e9, v.currentTime + P.skipForward); zeigen(); };
-  v.addEventListener('click', umschalten);
-
-  /** Zeichnet den mittleren Knopf: Kreisel, Dreieck oder Doppelbalken.
-   *
-   *  Solange auf Daten gewartet wird, steht dort der Kreisel — **kein**
-   *  Dreieck. Ein Dreieck heißt „angehalten, drück mich", und beides stimmte
-   *  nicht: es lief bereits, und der Klick bewirkte nichts. */
-  const malen = (): void => {
-    const knopf = el('pl-toggle');
-    knopf.innerHTML = wartet ? '<i class="pl-wait"></i>' : icon(v.paused ? 'play' : 'pause', 52);
-    knopf.setAttribute('aria-label', wartet ? 'Lädt' : v.paused ? 'Abspielen' : 'Anhalten');
-  };
-
-  const warten = (an: boolean): void => {
-    wartet = an;
-    malen();
-    kreisel();
-  };
-
-  v.addEventListener('play', () => { malen(); zeigen(); });
-  v.addEventListener('pause', () => { warten(false); zeigen(); });
-  v.addEventListener('waiting', () => warten(true));
-  v.addEventListener('playing', () => {
-    warten(false);
-    ebene.classList.remove('loading');
-  });
-
-  /* ---------- Fortschrittsleiste ---------- */
-  const spur = el('pl-track');
-  v.addEventListener('timeupdate', () => {
-    const teil = v.duration ? v.currentTime / v.duration : 0;
-    spur.querySelector<HTMLElement>('.pl-fill')!.style.width = teil * 100 + '%';
-    spur.querySelector<HTMLElement>('i')!.style.left = teil * 100 + '%';
-    el('pl-now').textContent = uhr(v.currentTime);
-    // Restzeit statt Gesamtlänge: „noch 42 Minuten" beantwortet die Frage,
-    // die man sich beim Schauen tatsächlich stellt.
-    el('pl-left').textContent = '−' + uhr((v.duration || 0) - v.currentTime);
-  });
-  v.addEventListener('progress', () => {
-    if (!v.buffered.length || !v.duration) return;
-    spur.querySelector<HTMLElement>('.pl-buf')!.style.width =
-      (v.buffered.end(v.buffered.length - 1) / v.duration) * 100 + '%';
-  });
-
-  const springen = (e: MouseEvent | TouchEvent): void => {
-    const r = spur.getBoundingClientRect();
-    const x = ((e instanceof MouseEvent ? e.clientX : e.touches[0]!.clientX) - r.left) / r.width;
-    if (v.duration) v.currentTime = Math.min(Math.max(x, 0), 1) * v.duration;
-    zeigen();
-  };
-  spur.onclick = springen;
-  spur.onmousedown = (e) => {
-    springen(e);
-    const ziehen = (ev: MouseEvent): void => springen(ev);
-    const los = (): void => {
-      removeEventListener('mousemove', ziehen);
-      removeEventListener('mouseup', los);
-    };
-    addEventListener('mousemove', ziehen);
-    addEventListener('mouseup', los);
-  };
-
-  /* ---------- Die drei Listen ----------
-     Getrennt, weil es drei verschiedene Fragen sind: die Tonspur stellt man
-     einmal am Anfang um, die Untertitel mitten im Film, die Qualität, wenn es
-     hakt. Eine gemeinsame Liste hieße jedes Mal an den anderen vorbeisuchen. */
-  const menue = el('pl-menu');
-  const menueZu = (): void => { menue.hidden = true; };
-  const spuren = (art: Spur['Type']): Spur[] => lauf.streams.filter((x) => x.Type === art);
-  const nenne = (t: Spur): string => t.DisplayTitle || t.Language || `Spur ${t.Index}`;
-
-  interface Eintrag { text: string; gewaehlt: boolean; waehlen: () => void }
-
-  function liste(knopf: HTMLElement, titel: string, eintraege: Eintrag[]): void {
-    if (!menue.hidden && menue.dataset.von === knopf.id) return menueZu();
-    menue.dataset.von = knopf.id;
-    menue.innerHTML = `<div class="pl-group">${esc(titel)}</div>`;
-
-    for (const { text, gewaehlt, waehlen } of eintraege) {
-      const b = document.createElement('button');
-      b.className = 'pl-item' + (gewaehlt ? ' on' : '');
-      b.innerHTML = `<span>${esc(text)}</span>${gewaehlt ? icon('check', 16) : ''}`;
-      b.onclick = () => (gewaehlt ? menueZu() : waehlen());
-      menue.appendChild(b);
-    }
-
-    // Unter seinem Knopf, nicht in der Mitte: so ist zu sehen, wozu die Liste
-    // gehört, wenn mehrere davon nebeneinander sitzen.
-    const r = knopf.getBoundingClientRect();
-    menue.style.right = Math.max(12, innerWidth - r.right) + 'px';
-    menue.style.top = r.bottom + 8 + 'px';
-    menue.hidden = false;
-    zeigen();
-  }
-
-  const neuLaden = (): void => {
-    lauf.stelle = v.currentTime || 0;
-    ebene.querySelector('.pl-error')?.remove();
-    ebene.classList.add('loading');
-    warten(true);
-    menueZu();
-    void strom();
-  };
-
-  el('pl-audio').onclick = () => liste(el('pl-audio'), 'Tonspur',
-    spuren('Audio').map((t) => ({
-      text: nenne(t), gewaehlt: lauf.audio === t.Index,
-      waehlen: () => { lauf.audio = t.Index; neuLaden(); },
-    })));
-
-  el('pl-subs').onclick = () => liste(el('pl-subs'), 'Untertitel', [
-    { text: 'Aus', gewaehlt: (lauf.subtitle ?? -1) < 0, waehlen: () => { lauf.subtitle = -1; neuLaden(); } },
-    ...spuren('Subtitle').map((t) => ({
-      text: nenne(t), gewaehlt: lauf.subtitle === t.Index,
-      waehlen: () => { lauf.subtitle = t.Index; neuLaden(); },
-    })),
-  ]);
-
-  el('pl-qual').onclick = () => liste(el('pl-qual'), 'Qualität',
-    QUALITIES.map(([wert, text]) => ({
-      text, gewaehlt: lauf.quality === wert,
-      waehlen: () => { lauf.quality = wert; neuLaden(); },
-    })));
-
-  el('pl-speed').onclick = () => liste(el('pl-speed'), 'Geschwindigkeit',
-    RATES.map((r) => ({
-      text: r === 1 ? 'Normal' : r + '×',
-      gewaehlt: Math.abs(v.playbackRate - r) < 0.01,
-      waehlen: () => { v.playbackRate = r; menueZu(); zeigen(); },
-    })));
-
-  ebene.addEventListener('click', (e) => {
-    const ziel = e.target as HTMLElement;
-    if (menue.hidden || menue.contains(ziel) || ziel.closest('.pl-icon')) return;
-    menueZu();
-  });
-
-  /* ---------- Ton ---------- */
-  const tonMalen = (): void => {
-    el('pl-mute').innerHTML = icon(v.muted || v.volume === 0 ? 'muted' : 'sound');
-    el('pl-mute').title = `Lautstärke ${Math.round(v.volume * 100)} %`;
-  };
-  el('pl-mute').onclick = () => { v.muted = !v.muted; tonMalen(); };
-  el('pl-mute').addEventListener('wheel', (e) => {
-    e.preventDefault();
-    v.volume = Math.min(1, Math.max(0, v.volume - Math.sign(e.deltaY) * 0.05));
-    v.muted = v.volume === 0;
-    tonMalen();
-  }, { passive: false });
-
-  el('pl-full').onclick = () => {
-    void (document.fullscreenElement ? document.exitFullscreen() : ebene.requestFullscreen?.());
-  };
-
-  /* ---------- Tastatur ---------- */
-  const tasten = (e: KeyboardEvent): void => {
-    const ziel = e.target as HTMLElement;
-    if (ziel.tagName === 'SELECT' || ziel.tagName === 'INPUT') return;
-    const wege: Record<string, () => void> = {
-      ' ': umschalten, k: umschalten,
-      ArrowLeft: () => { v.currentTime -= P.skipBackward; },
-      ArrowRight: () => { v.currentTime += P.skipForward; },
-      ArrowUp: () => { v.volume = Math.min(1, v.volume + 0.1); tonMalen(); },
-      ArrowDown: () => { v.volume = Math.max(0, v.volume - 0.1); tonMalen(); },
-      f: () => el('pl-full').click(),
-      Escape: () => schliessen(),
-    };
-    const tun = wege[e.key];
-    if (!tun) return;
-    e.preventDefault();
-    tun();
-    zeigen();
-  };
-  addEventListener('keydown', tasten);
-
-  /* ---------- Zurück aus dem Hintergrund ----------
-     Wer die Anwendung wechselt, kommt zu einem stehenden Bild bei laufendem
-     Ton zurück: der Browser hält das Entpacken an, während der Tab verdeckt
-     ist, und hls.js findet danach nicht von selbst in den Puffer zurück. */
-  const zurueck = (): void => {
-    if (document.hidden || v.paused || !hls) return;
-    const stelle = v.currentTime;
-    hls.startLoad(stelle);
-    // Ein winziger Sprung erzwingt einen neuen Schlüsselbildpunkt. Ohne ihn
-    // bleibt das zuletzt gezeigte Bild stehen, obwohl Segmente ankommen.
-    if (stelle > 0.5) v.currentTime = stelle - 0.1;
-  };
-  document.addEventListener('visibilitychange', zurueck);
-
-  /* ---------- Schließen ---------- */
-  function schliessen(): void {
-    removeEventListener('keydown', tasten);
-    document.removeEventListener('visibilitychange', zurueck);
-    clearTimeout(ausblenden);
-    if (document.fullscreenElement) void document.exitFullscreen?.();
-
-    // **Erst melden, dann abräumen.** Andersherum steht die Stelle schon auf
-    // null, wenn die Meldung hinausgeht — und Jellyfin löscht daraufhin den
-    // Fortschritt, statt ihn zu speichern.
-    lauf.sitzung?.melden('/Sessions/Playing/Stopped');
-
-    hls?.destroy();
-    hls = null;
-    v.pause();
-    v.removeAttribute('src');
-    v.load();
-    ebene.remove();
-    document.body.style.overflow = '';
-    beimSchliessen?.();
-  }
-  el('pl-close').onclick = schliessen;
-
-  /* ---------- Der Strom ---------- */
-  async function strom(): Promise<void> {
-    hls?.destroy();
-    hls = null;
-
-    let auskunft;
-    try {
-      auskunft = await wiedergabeauskunft(item.Id, lauf);
-    } catch (e) {
-      return scheitern('Der Server hat die Wiedergabe abgelehnt.', (e as Error).message);
-    }
-
-    const quelle: Quelle | undefined = auskunft.MediaSources?.[0];
-    if (!quelle) return scheitern('Der Server nennt keine abspielbare Quelle.');
-
-    // Was zur Auswahl steht, weiß man erst jetzt. Beim ersten Lauf gilt die
-    // Vorauswahl des Servers.
-    lauf.streams = quelle.MediaStreams ?? [];
-    if (lauf.audio == null) {
-      lauf.audio = quelle.DefaultAudioStreamIndex ?? spuren('Audio')[0]?.Index ?? null;
-    }
-    if (lauf.subtitle == null) lauf.subtitle = quelle.DefaultSubtitleStreamIndex ?? -1;
-    spurenBekannt();
-
-    // **Die Adresse kommt vom Server.** Nennt er keine, wird ausdrücklich ein
-    // HLS-Strom verlangt — nicht die Rohdatei. Ein MKV mit DTS ist für einen
-    // Browser unlesbar, und genau dieser Rückfall war der Grund, warum lange
-    // gar nichts lief.
-    const adresse = quelle.TranscodingUrl
-      ? new URL(quelle.TranscodingUrl, location.origin + '/api').href
-      : medienURL(`/Videos/${item.Id}/master.m3u8`, {
-          mediaSourceId: quelle.Id ?? item.Id,
-          PlaySessionId: auskunft.PlaySessionId ?? '',
-          DeviceId: sitzung.geraet,
-          VideoCodec: 'h264', AudioCodec: 'aac,mp3',
-          TranscodingMaxAudioChannels: '2', SegmentContainer: 'ts',
-          MinSegments: '1', BreakOnNonKeyFrames: 'true', TranscodingProtocol: 'hls',
-          ...(lauf.audio != null ? { AudioStreamIndex: lauf.audio } : {}),
-          ...((lauf.subtitle ?? -1) >= 0 ? { SubtitleStreamIndex: lauf.subtitle! } : {}),
-          ...(lauf.quality > 0 ? { MaxStreamingBitrate: lauf.quality * 1000 } : {}),
-        });
-
-    diagnose.text = [
-      quelle.TranscodingUrl ? 'Server nannte eine Adresse' : 'Server nannte keine Adresse (Rückfall auf HLS)',
-      quelle.Container ? `Container ${quelle.Container}` : null,
-    ].filter(Boolean).join(' · ');
-    diagnose.url = adresse;
-
-    v.addEventListener('loadedmetadata', () => {
-      v.playbackRate = P.rate;
-      // Zurück an die Stelle, an der umgeschaltet wurde — sonst begänne jeder
-      // Wechsel der Tonspur den Film von vorn.
-      if (lauf.stelle > 1) v.currentTime = lauf.stelle;
-      void v.play();
-    }, { once: true });
-
-    lauf.sitzung = fortschritt(v, {
-      id: auskunft.PlaySessionId,
-      quelleID: quelle.Id ?? item.Id,
-      itemID: item.Id,
-    });
-
-    if (v.canPlayType('application/vnd.apple.mpegurl')) {
-      v.src = adresse;
-      return;
-    }
-
-    // **Erst hier geladen.** hls.js ist größer als der ganze Rest zusammen,
-    // und wer nur stöbert, braucht es nie. Safari schon gar nicht — dort
-    // sind wir oben schon heraus.
-    const { default: Hls } = await import('hls.js');
-    const h = new Hls();
-    hls = h;
-    h.on(Hls.Events.ERROR, (_e, daten) => {
-      if (!daten.fatal) return;
-      scheitern('Die Wiedergabe ist abgebrochen.',
-        `${daten.type}: ${daten.details}` +
-        (daten.response?.code ? ` (HTTP ${daten.response.code})` : ''));
-      h.destroy();
-    });
-    h.loadSource(adresse);
-    h.attachMedia(v);
-  }
-
-  function spurenBekannt(): void {
-    el('pl-audio').hidden = spuren('Audio').length === 0;
-    el('pl-subs').hidden = spuren('Subtitle').length === 0;
-    // Gefülltes Symbol, solange Untertitel laufen — wie auf dem iPad.
-    el('pl-subs').innerHTML = icon((lauf.subtitle ?? -1) >= 0 ? 'captionsOn' : 'captions');
-    el('pl-qual').textContent =
-      (QUALITIES.find(([w]) => w === lauf.quality)?.[1] ?? 'Original').split(' — ').pop()!;
-  }
-
-  zeigen();
-  tonMalen();
-  ebene.classList.add('loading');
-  warten(true);
-  void strom();
-}
-
-/* Meldet dem Server, wo man steht.
-   ----------------------------------------------------------------------------
-   Die Stelle wird **getrennt vom Element** gehalten. Beim Schließen fällt
-   `currentTime` auf null, und stünde die Meldung erst danach an, bekäme
-   Jellyfin „gestoppt bei 0:00" und löschte den Fortschritt.
-
-   Nicht ohne Hinsehen: ein verschlucktes `catch` hat lange verborgen, ob die
-   Meldungen überhaupt ankommen. */
-function fortschritt(
-  video: HTMLVideoElement,
-  sitz: { id?: string; quelleID: string; itemID: string },
-): Sitzungsmeldung {
-  const s: Sitzungsmeldung = {
-    ...sitz,
-    stelle: 0,
-    melden: (weg, stelle, extra = {}) => {
-      const wo = stelle ?? s.stelle;
-      void api(weg, {
-        method: 'POST',
-        body: JSON.stringify({
-          ItemId: s.itemID, PlaySessionId: s.id, MediaSourceId: s.quelleID,
-          PositionTicks: Math.round(wo * 10_000_000),
-          // Ohne die ordnet Jellyfin die Meldung keiner Wiedergabe zu.
-          PlayMethod: 'Transcode', CanSeek: true,
-          ...extra,
-        }),
-      })
-        .then(() => console.debug(`[Flaro] ${weg} → ${(wo / 60).toFixed(1)} min angenommen`))
-        .catch((e: Error) => console.warn(`[Flaro] ${weg} abgelehnt: ${e.message}`));
-    },
-  };
-
-  video.addEventListener('playing', () => s.melden('/Sessions/Playing'), { once: true });
-
-  let zuletzt = 0;
-  video.addEventListener('timeupdate', () => {
-    if (video.currentTime > 0) s.stelle = video.currentTime;
-    if (video.currentTime - zuletzt < 10) return;
-    zuletzt = video.currentTime;
-    s.melden('/Sessions/Playing/Progress', s.stelle, { IsPaused: video.paused });
-  });
-
-  // Anhalten sofort melden: wer pausiert und weggeht, hatte sonst bis zur
-  // nächsten Zehn-Sekunden-Marke nichts hinterlassen.
-  video.addEventListener('pause', () => s.melden('/Sessions/Playing/Progress', s.stelle, { IsPaused: true }));
-  video.addEventListener('play', () => s.melden('/Sessions/Playing/Progress', s.stelle, { IsPaused: false }));
-  video.addEventListener('ended', () => s.melden('/Sessions/Playing/Stopped', video.duration || s.stelle));
-
-  return s;
-}
diff --git a/web/app/src/views/settings.ts b/web/app/src/views/settings.ts
deleted file mode 100644
index e8e16b9..0000000
--- a/web/app/src/views/settings.ts
+++ /dev/null
@@ -1,246 +0,0 @@
-import { P, PALETTE, QUALITIES, RATES, SKIPS, LANGUAGES, setzen, anordnen } from '../prefs';
-import { abmelden } from '../api';
-import { icon } from '../icons';
-import { esc } from '../util';
-import { bekannteReihen } from './home';
-import { lesbarMachen, alsHex, ausHex } from '../contrast';
-
-/* Die Einstellungen.
-   ----------------------------------------------------------------------------
-   Dieselben fünf Abschnitte in derselben Reihenfolge wie in der App:
-   Darstellung, Startseite, Wiedergabe, Sprachen, Server. Downloads und
-   Diagnose fehlen — dort fehlt die Funktion, nicht die Einstellung. */
-export function einstellungen(wurzel: HTMLElement, neuZeichnen: () => void): void {
-  wurzel.classList.add('pad-top');
-  wurzel.innerHTML = `
-    <div class="settings">
-      <h2>Einstellungen</h2>
-
-      <h3 class="group">Darstellung</h3>
-      <div class="setting">
-        <h4>Akzentfarbe</h4>
-        <p>Dieselbe Palette wie in der App.</p>
-        <div class="swatches" id="set-accent"></div>
-        <div class="hexrow">
-          <input type="text" id="set-hex" placeholder="#C04AC9" maxlength="7" spellcheck="false">
-          <button class="btn" id="set-hex-apply">Übernehmen</button>
-        </div>
-        <p class="hint" id="set-hex-note"></p>
-      </div>
-      <div class="setting">
-        <h4>Kachelgröße</h4>
-        <p>Wie groß Plakate und Vorschaubilder erscheinen — auf der Startseite
-           und in den Mediatheken. Gilt nur auf diesem Gerät.</p>
-        <div class="range-row"><input type="range" id="set-zoom" min="100" max="280" step="10"><output id="set-zoom-out"></output></div>
-      </div>
-
-      <h3 class="group">Startseite</h3>
-      <div class="setting">
-        <h4>Aufmacher</h4>
-        <p>Woher die Titel oben kommen. Die Auswahl wechselt alle sechs Stunden;
-           Titel ohne Hintergrundbild ziehen dabei ein schlechteres Los.</p>
-        <div class="seg" id="set-herosource">
-          <button data-v="continueFirst">Angefangenes zuerst</button>
-          <button data-v="latestOnly">Nur Neuzugänge</button>
-        </div>
-        <div class="range-row"><input type="range" id="set-herocount" min="1" max="10" step="1"><output id="set-herocount-out"></output></div>
-        <div class="range-row"><input type="range" id="set-heroheight" min="40" max="95" step="5"><output id="set-heroheight-out"></output></div>
-      </div>
-      <div class="setting">
-        <h4>Reihen</h4>
-        <label class="check"><input type="checkbox" id="set-combine"><span>„Weiterschauen“ und „Als Nächstes“ zusammenlegen</span></label>
-        <label class="check"><input type="checkbox" id="set-hidewatched"><span>Gesehenes aus den Neuzugängen ausblenden</span></label>
-      </div>
-      <div class="setting">
-        <h4>Reihen der Startseite</h4>
-        <p>Welche Reihen erscheinen und in welcher Folge. Was der Server neu
-           anlegt, kommt ans Ende, statt zu fehlen.</p>
-        <div id="set-rows"></div>
-      </div>
-
-      <h3 class="group">Wiedergabe</h3>
-      <div class="setting">
-        <h4>Geschwindigkeit</h4>
-        <p>Womit ein Titel beginnt. Im Player lässt sie sich jederzeit ändern.</p>
-        <select id="set-rate" class="pick"></select>
-      </div>
-      <div class="setting">
-        <h4>Spulweite</h4>
-        <div class="pickrow">
-          <label>Zurück <select id="set-skipback" class="pick"></select></label>
-          <label>Vor <select id="set-skipfwd" class="pick"></select></label>
-        </div>
-      </div>
-      <div class="setting">
-        <h4>Qualität</h4>
-        <p>„Original“ schickt die Datei unverändert, alles andere lässt den
-           Server umrechnen. Die App unterscheidet WLAN und Mobilfunk — im
-           Browser lässt sich das nicht verlässlich feststellen, deshalb eine
-           Stufe.</p>
-        <select id="set-quality" class="pick"></select>
-      </div>
-
-      <h3 class="group">Sprachen</h3>
-      <div class="setting">
-        <h4>Bevorzugte Sprachen</h4>
-        <p>Welche Spur beim Start gewählt wird, sofern der Titel sie mitbringt.</p>
-        <div class="pickrow">
-          <label>Ton <select id="set-audio" class="pick"></select></label>
-          <label>Untertitel <select id="set-subs" class="pick"></select></label>
-        </div>
-      </div>
-
-      <h3 class="group">Server</h3>
-      <div class="setting">
-        <h4>Verbindung</h4>
-        <p>Die Adresse steht beim Server, der diese Seite ausliefert — nicht im
-           Browser.</p>
-        <button class="btn" id="set-signout">Abmelden</button>
-      </div>
-    </div>`;
-
-  /* ---- Akzentfarbe ---- */
-  const felder = wurzel.querySelector('#set-accent')!;
-  for (const [name, hex] of PALETTE) {
-    const b = document.createElement('button');
-    b.className = 'swatch' + (hex.toLowerCase() === P.accent.toLowerCase() ? ' on' : '');
-    b.style.background = hex;
-    b.title = name;
-    b.dataset.hex = hex;
-    b.onclick = () => { setzen('accent', hex); einstellungen(wurzel, neuZeichnen); };
-    felder.appendChild(b);
-  }
-
-  const hex = wurzel.querySelector<HTMLInputElement>('#set-hex')!;
-  const notiz = wurzel.querySelector<HTMLElement>('#set-hex-note')!;
-  hex.value = P.accent;
-  const uebernehmen = (): void => {
-    const rgb = ausHex(hex.value);
-    if (!rgb) { notiz.textContent = 'Das ist kein Farbwert — erwartet wird etwa #C04AC9.'; return; }
-    const { farbe, geaendert } = lesbarMachen(rgb, ausHex('#0B0B0D')!);
-    const wert = alsHex(farbe);
-    setzen('accent', wert);
-    hex.value = wert;
-    notiz.textContent = geaendert
-      ? `Auf ${wert} aufgehellt — die gewählte Farbe wäre auf dem dunklen Grund nicht lesbar gewesen.`
-      : '';
-    felder.querySelectorAll<HTMLElement>('.swatch')
-      .forEach((b) => b.classList.toggle('on', b.dataset.hex === wert));
-  };
-  wurzel.querySelector<HTMLElement>('#set-hex-apply')!.onclick = uebernehmen;
-  hex.onkeydown = (e) => { if (e.key === 'Enter') { e.preventDefault(); uebernehmen(); } };
-
-  /* ---- Die wiederkehrenden Bauteile ---- */
-  const regler = (id: string, feld: 'cardW' | 'heroCount' | 'heroHeight', einheit: string): void => {
-    const r = wurzel.querySelector<HTMLInputElement>('#' + id)!;
-    const o = wurzel.querySelector<HTMLOutputElement>('#' + id + '-out')!;
-    r.value = String(P[feld]);
-    o.textContent = P[feld] + einheit;
-    r.oninput = () => { o.textContent = r.value + einheit; setzen(feld, Number(r.value)); };
-  };
-  regler('set-zoom', 'cardW', ' px');
-  regler('set-herocount', 'heroCount', ' Titel');
-  regler('set-heroheight', 'heroHeight', ' % Höhe');
-
-  const schalter = wurzel.querySelector('#set-herosource')!;
-  [...schalter.children].forEach((b) => {
-    const el = b as HTMLElement;
-    el.classList.toggle('on', el.dataset.v === P.heroSource);
-    el.onclick = () => {
-      setzen('heroSource', el.dataset.v as typeof P.heroSource);
-      einstellungen(wurzel, neuZeichnen);
-    };
-  });
-
-  const haken = (id: string, feld: 'combineContinue' | 'hideWatched'): void => {
-    const c = wurzel.querySelector<HTMLInputElement>('#' + id)!;
-    c.checked = P[feld];
-    c.onchange = () => setzen(feld, c.checked);
-  };
-  haken('set-combine', 'combineContinue');
-  haken('set-hidewatched', 'hideWatched');
-
-  const auswahl = (id: string, feld: keyof typeof P, werte: readonly (readonly [string | number, string])[]): void => {
-    const s = wurzel.querySelector<HTMLSelectElement>('#' + id)!;
-    s.innerHTML = '';
-    for (const [wert, text] of werte) {
-      const o = document.createElement('option');
-      o.value = String(wert);
-      o.textContent = text;
-      o.selected = String(wert) === String(P[feld]);
-      s.appendChild(o);
-    }
-    s.onchange = () => {
-      const roh = typeof P[feld] === 'number' ? Number(s.value) : s.value;
-      setzen(feld as never, roh as never);
-    };
-  };
-  auswahl('set-rate', 'rate', RATES.map((r) => [r, r === 1 ? 'Normal' : r + '×'] as const));
-  auswahl('set-skipback', 'skipBackward', SKIPS.map((n) => [n, n + ' s'] as const));
-  auswahl('set-skipfwd', 'skipForward', SKIPS.map((n) => [n, n + ' s'] as const));
-  auswahl('set-quality', 'quality', QUALITIES);
-  auswahl('set-audio', 'audioLanguage', LANGUAGES);
-  auswahl('set-subs', 'subtitleLanguage', LANGUAGES);
-
-  wurzel.querySelector<HTMLElement>('#set-signout')!.onclick = abmelden;
-  reihenListe(wurzel, neuZeichnen);
-}
-
-/* Welche Reihen erscheinen und in welcher Folge.
-   ----------------------------------------------------------------------------
-   Knöpfe statt Ziehen: auf dem Zeigegerät ist Ziehen schöner, auf einem
-   Trackpad fummelig und mit der Tastatur gar nicht zu machen. Zwei Pfeile
-   können alle drei. */
-function reihenListe(wurzel: HTMLElement, neuZeichnen: () => void): void {
-  const ort = wurzel.querySelector('#set-rows');
-  if (!ort) return;
-
-  if (!bekannteReihen.length) {
-    ort.innerHTML = '<p class="hint">Erst sichtbar, wenn die Startseite einmal geladen war.</p>';
-    return;
-  }
-
-  // Ausgeblendete hinten dran, damit man sie wiederfindet.
-  const geordnet = [
-    ...anordnen(bekannteReihen),
-    ...bekannteReihen.filter((r) => P.hiddenRows.includes(r.id)),
-  ];
-
-  ort.innerHTML = '';
-  geordnet.forEach((reihe, stelle) => {
-    const aus = P.hiddenRows.includes(reihe.id);
-    const zeile = document.createElement('div');
-    zeile.className = 'rowline' + (aus ? ' off' : '');
-    zeile.innerHTML = `
-      <label class="check" style="flex:1;padding:0">
-        <input type="checkbox" ${aus ? '' : 'checked'}>
-        <span>${esc(reihe.title)}</span>
-      </label>
-      <button class="tiny" aria-label="Nach oben" ${stelle === 0 ? 'disabled' : ''}>${icon('up', 16)}</button>
-      <button class="tiny" aria-label="Nach unten" ${stelle === geordnet.length - 1 ? 'disabled' : ''}>${icon('down', 16)}</button>`;
-
-    zeile.querySelector('input')!.onchange = (e) => {
-      const an = (e.target as HTMLInputElement).checked;
-      setzen('hiddenRows', an
-        ? P.hiddenRows.filter((id) => id !== reihe.id)
-        : [...P.hiddenRows, reihe.id]);
-      reihenListe(wurzel, neuZeichnen);
-      neuZeichnen();
-    };
-
-    const schieben = (um: number): void => {
-      // Die aktuelle Folge festschreiben, bevor darin verschoben wird.
-      const ids = geordnet.map((r) => r.id);
-      const nach = stelle + um;
-      if (nach < 0 || nach >= ids.length) return;
-      [ids[stelle], ids[nach]] = [ids[nach]!, ids[stelle]!];
-      setzen('rowOrder', ids);
-      reihenListe(wurzel, neuZeichnen);
-      neuZeichnen();
-    };
-    const [hoch, runter] = zeile.querySelectorAll('button');
-    (hoch as HTMLElement).onclick = () => schieben(-1);
-    (runter as HTMLElement).onclick = () => schieben(1);
-    ort.appendChild(zeile);
-  });
-}
diff --git a/web/app/src/views/setup.ts b/web/app/src/views/setup.ts
new file mode 100644
index 0000000..9682def
--- /dev/null
+++ b/web/app/src/views/setup.ts
@@ -0,0 +1,44 @@
+import { einrichten, anmelden } from '../api';
+import { knopf, feld, fehlerzeile } from '../util';
+
+/** Der erste Start: ein Administrator muss angelegt werden.
+ *
+ * **Die einzige Stelle, an der jemand ohne Anmeldung etwas ändern darf** —
+ * und sie verschliesst sich selbst, sobald ein Benutzer existiert. */
+export function einrichtung(fertig: () => void): HTMLElement {
+  const karte = document.createElement('div');
+  karte.className = 'login-card';
+
+  const titel = document.createElement('h1');
+  titel.textContent = 'Flaro einrichten';
+  const text = document.createElement('p');
+  text.className = 'hint';
+  text.textContent = 'Lege das erste Konto an. Es wird Administrator und kann '
+    + 'später Bibliotheken und weitere Benutzer verwalten.';
+
+  const name = feld('Benutzername');
+  name.autocomplete = 'username';
+  const passwort = feld('Passwort, mindestens 8 Zeichen', 'password');
+  passwort.autocomplete = 'new-password';
+  const los = knopf('Anlegen und anmelden', 'btn btn-primary');
+
+  karte.append(titel, text, name, passwort, los);
+
+  async function absenden(): Promise<void> {
+    karte.querySelector('.error')?.remove();
+    los.disabled = true;
+    try {
+      await einrichten(name.value.trim(), passwort.value);
+      await anmelden(name.value.trim(), passwort.value);
+      fertig();
+    } catch (fehler) {
+      karte.appendChild(fehlerzeile((fehler as Error).message));
+      los.disabled = false;
+    }
+  }
+
+  los.onclick = () => void absenden();
+  passwort.onkeydown = e => { if (e.key === 'Enter') void absenden(); };
+  setTimeout(() => name.focus(), 50);
+  return karte;
+}
diff --git a/web/app/vite.config.ts b/web/app/vite.config.ts
index 99818d9..86ccc66 100644
--- a/web/app/vite.config.ts
+++ b/web/app/vite.config.ts
@@ -6,11 +6,11 @@ export default defineConfig({
     // Im Entwicklungsbetrieb übernimmt Vite, was sonst der eigene Server tut:
     // Anfragen an /api gehen an den Medienserver weiter. Damit ist die
     // Herkunft dieselbe wie die der Seite — und CORS nie wieder ein Thema.
+    // Der Pfad bleibt unverändert: Flaro bedient /api/v1 selbst.
     proxy: {
       '/api': {
-        target: process.env.FLARO_SERVER ?? 'http://localhost:8096',
+        target: process.env.FLARO_SERVER ?? 'http://localhost:18080',
         changeOrigin: true,
-        rewrite: (pfad) => pfad.replace(/^\/api/, ''),
       },
     },
   },