feat: Suchseite und Titel-Detailseite

Die Suchanfrage steht in der URL: Treffer sind teilbar, der Zurück-Knopf
funktioniert, und die Suche selbst bleibt eine Server-Komponente.

Posterkacheln zeigen bei fehlendem Bild die Bildmarke über dem
Signaturverlauf. Die Rückfalldarstellung liegt dauerhaft unter dem Bild —
ein onError-Handler hilft nicht, wenn das Bild schon vor der Hydration
scheitert, und der Browser zeigt dann sein kaputtes Bildsymbol.

src/app/suche/page.tsx

@@ -0,0 +1,154 @@
+import Link from "next/link";
+import type { Metadata } from "next";
+import { requireUser } from "@/lib/auth";
+import { getSettings } from "@/lib/settings";
+import { env } from "@/lib/env";
+import { searchMovies, searchMulti, searchSeries, type TmdbSearchResult } from "@/lib/tmdb";
+import { AppShell } from "@/components/AppShell";
+import { Poster } from "@/components/Poster";
+import { SearchField } from "@/components/SearchField";
+
+export const metadata: Metadata = { title: "Suchen" };
+
+type Filter = "alle" | "serien" | "filme";
+
+const FILTERS: { key: Filter; label: string }[] = [
+  { key: "alle", label: "Alles" },
+  { key: "serien", label: "Serien" },
+  { key: "filme", label: "Filme" },
+];
+
+/** Normalisiert die drei TMDB-Antwortformen auf eine gemeinsame Darstellung. */
+function normalize(item: TmdbSearchResult, fallbackType: "tv" | "movie") {
+  const type = item.media_type === "tv" || item.media_type === "movie" ? item.media_type : fallbackType;
+  const date = type === "tv" ? item.first_air_date : item.release_date;
+  return {
+    tmdbId: item.id,
+    type,
+    title: (type === "tv" ? item.name : item.title) ?? item.original_name ?? item.original_title ?? "Ohne Titel",
+    overview: item.overview ?? "",
+    posterPath: item.poster_path ?? null,
+    year: date ? date.slice(0, 4) : null,
+    rating: item.vote_average ?? null,
+  };
+}
+
+export default async function SearchPage({
+  searchParams,
+}: {
+  searchParams: Promise<{ q?: string; typ?: string }>;
+}) {
+  const user = await requireUser("/suche");
+  const settings = await getSettings();
+
+  const params = await searchParams;
+  const query = (params.q ?? "").trim();
+  const filter: Filter = FILTERS.some((f) => f.key === params.typ) ? (params.typ as Filter) : "alle";
+
+  return (
+    <AppShell user={user} instanceName={settings.instanceName}>
+      <header className="mb-6">
+        <h1 className="text-2xl font-semibold tracking-tight sm:text-3xl">Suchen</h1>
+        <p className="mt-1 text-sm text-[var(--fl-muted)]">
+          Serien und Filme aus der TMDB-Datenbank — mit Postern, Staffeln und Episoden.
+        </p>
+      </header>
+
+      <SearchField initialQuery={query} filter={filter} filters={FILTERS} />
+
+      <div className="mt-8">
+        {!env.tmdb.isConfigured ? (
+          <Notice tone="warning">
+            Ohne TMDB-Schlüssel kann Flimmer nicht suchen. Trage <code>TMDB_API_KEY</code> in der{" "}
+            <code>.env</code> ein und starte die Instanz neu.
+          </Notice>
+        ) : query.length < 2 ? (
+          <Notice>Gib mindestens zwei Zeichen ein, um zu suchen.</Notice>
+        ) : (
+          <Results query={query} filter={filter} />
+        )}
+      </div>
+    </AppShell>
+  );
+}
+
+async function Results({ query, filter }: { query: string; filter: Filter }) {
+  let items: ReturnType<typeof normalize>[];
+
+  try {
+    if (filter === "serien") {
+      const data = await searchSeries(query);
+      items = data.results.map((item) => normalize(item, "tv"));
+    } else if (filter === "filme") {
+      const data = await searchMovies(query);
+      items = data.results.map((item) => normalize(item, "movie"));
+    } else {
+      const data = await searchMulti(query);
+      items = data.results.map((item) => normalize(item, "movie"));
+    }
+  } catch (error) {
+    return (
+      <Notice tone="danger">
+        {error instanceof Error ? error.message : "Die Suche bei TMDB ist fehlgeschlagen."}
+      </Notice>
+    );
+  }
+
+  if (items.length === 0) {
+    return <Notice>Zu „{query}" hat TMDB nichts gefunden.</Notice>;
+  }
+
+  return (
+    <>
+      <p className="mb-4 text-sm text-[var(--fl-faint)]">
+        {items.length} {items.length === 1 ? "Treffer" : "Treffer"} zu „{query}"
+      </p>
+      <ul className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6">
+        {items.map((item) => (
+          <li key={`${item.type}-${item.tmdbId}`}>
+            <Link
+              href={`/titel/${item.type === "tv" ? "serie" : "film"}/${item.tmdbId}`}
+              className="fl-poster-card group block focus:outline-none"
+            >
+              <Poster path={item.posterPath} alt={item.title} size="w342" />
+              <div className="mt-2 space-y-0.5">
+                <p className="line-clamp-2 text-sm font-medium leading-snug group-hover:text-[var(--fl-text)]">
+                  {item.title}
+                </p>
+                <p className="text-xs text-[var(--fl-faint)]">
+                  {item.type === "tv" ? "Serie" : "Film"}
+                  {item.year ? ` · ${item.year}` : ""}
+                </p>
+              </div>
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </>
+  );
+}
+
+function Notice({
+  children,
+  tone = "neutral",
+}: {
+  children: React.ReactNode;
+  tone?: "neutral" | "warning" | "danger";
+}) {
+  const color =
+    tone === "warning" ? "var(--fl-warning)" : tone === "danger" ? "var(--fl-danger)" : "var(--fl-muted)";
+  return (
+    <p
+      className="fl-card px-4 py-3 text-sm"
+      style={{
+        color,
+        borderColor:
+          tone === "neutral" ? undefined : `color-mix(in oklab, ${color} 45%, transparent)`,
+        backgroundColor:
+          tone === "neutral" ? undefined : `color-mix(in oklab, ${color} 10%, transparent)`,
+      }}
+    >
+      {children}
+    </p>
+  );
+}

src/app/titel/[art]/[tmdbId]/page.tsx

@@ -0,0 +1,219 @@
+import Link from "next/link";
+import { notFound } from "next/navigation";
+import type { Metadata } from "next";
+import { requireUser } from "@/lib/auth";
+import { getSettings } from "@/lib/settings";
+import { prisma } from "@/lib/db";
+import { ensureTitle } from "@/lib/catalog";
+import { TmdbError, TmdbNotConfiguredError } from "@/lib/tmdb";
+import { AppShell } from "@/components/AppShell";
+import { Backdrop, Poster } from "@/components/Poster";
+import { ProviderList, type ProviderBadgeData, type ProviderKindKey } from "@/components/ProviderBadges";
+import { SeasonList, type SeasonData } from "@/components/SeasonList";
+import type { TitleType } from "@/generated/prisma/client";
+
+/** URL-Segment auf den Titeltyp abbilden — /titel/serie/1396 bzw. /titel/film/550. */
+const ART_TO_TYPE: Record<string, TitleType> = { serie: "SERIES", film: "MOVIE" };
+
+type Params = Promise<{ art: string; tmdbId: string }>;
+
+export async function generateMetadata({ params }: { params: Params }): Promise<Metadata> {
+  const { art, tmdbId } = await params;
+  const type = ART_TO_TYPE[art];
+  if (!type) return { title: "Nicht gefunden" };
+
+  const title = await prisma.title.findUnique({
+    where: { type_tmdbId: { type, tmdbId: Number(tmdbId) } },
+    select: { title: true },
+  });
+  return { title: title?.title ?? "Titel" };
+}
+
+export default async function TitlePage({ params }: { params: Params }) {
+  const user = await requireUser();
+  const settings = await getSettings();
+
+  const { art, tmdbId: rawId } = await params;
+  const type = ART_TO_TYPE[art];
+  const tmdbId = Number.parseInt(rawId, 10);
+  if (!type || !Number.isFinite(tmdbId)) notFound();
+
+  let importError: string | null = null;
+  try {
+    await ensureTitle(type, tmdbId, { region: user.region });
+  } catch (error) {
+    if (error instanceof TmdbError && error.status === 404) notFound();
+    importError =
+      error instanceof TmdbNotConfiguredError
+        ? error.message
+        : error instanceof Error
+          ? error.message
+          : "Der Titel konnte nicht von TMDB geladen werden.";
+  }
+
+  const title = await prisma.title.findUnique({
+    where: { type_tmdbId: { type, tmdbId } },
+    include: {
+      seasons: {
+        orderBy: { seasonNumber: "asc" },
+        include: { episodes: { orderBy: { episodeNumber: "asc" } } },
+      },
+      providers: {
+        where: { region: user.region },
+        include: { provider: true },
+      },
+    },
+  });
+
+  if (!title) {
+    return (
+      <AppShell user={user} instanceName={settings.instanceName}>
+        <div className="fl-card p-6">
+          <h1 className="text-xl font-semibold">Titel nicht verfügbar</h1>
+          <p className="mt-2 text-sm text-[var(--fl-muted)]">
+            {importError ?? "Zu dieser Kennung liegt nichts vor."}
+          </p>
+          <Link href="/suche" className="fl-btn fl-btn-ghost mt-4">
+            Zurück zur Suche
+          </Link>
+        </div>
+      </AppShell>
+    );
+  }
+
+  const year = title.releaseDate?.getFullYear() ?? null;
+  const providerGroups: Partial<Record<ProviderKindKey, ProviderBadgeData[]>> = {};
+  for (const row of title.providers) {
+    const kind = row.kind as ProviderKindKey;
+    (providerGroups[kind] ??= []).push({
+      id: row.provider.id,
+      name: row.provider.name,
+      logoPath: row.provider.logoPath,
+      color: row.provider.color,
+    });
+  }
+
+  const seasons: SeasonData[] = title.seasons.map((season) => ({
+    id: season.id,
+    seasonNumber: season.seasonNumber,
+    name: season.name,
+    overview: season.overview,
+    airDate: season.airDate?.toISOString() ?? null,
+    episodes: season.episodes.map((episode) => ({
+      id: episode.id,
+      episodeNumber: episode.episodeNumber,
+      name: episode.name,
+      overview: episode.overview,
+      airDate: episode.airDate?.toISOString() ?? null,
+      runtime: episode.runtime,
+    })),
+  }));
+
+  return (
+    <AppShell user={user} instanceName={settings.instanceName}>
+      <article className="relative">
+        <div className="fl-card relative overflow-hidden">
+          <Backdrop path={title.backdropPath} alt="" />
+
+          <div className="relative flex flex-col gap-6 p-5 sm:flex-row sm:p-7">
+            <div className="w-36 shrink-0 sm:w-48">
+              <Poster path={title.posterPath} alt={title.title} size="w500" priority />
+            </div>
+
+            <div className="min-w-0 flex-1">
+              <p className="text-xs font-semibold uppercase tracking-wide text-[var(--fl-faint)]">
+                {title.type === "SERIES" ? "Serie" : "Film"}
+                {year ? ` · ${year}` : ""}
+                {title.status ? ` · ${title.status}` : ""}
+              </p>
+
+              <h1 className="mt-1 text-2xl font-semibold tracking-tight sm:text-3xl">
+                {title.title}
+              </h1>
+              {title.originalTitle && title.originalTitle !== title.title && (
+                <p className="mt-0.5 text-sm text-[var(--fl-faint)]">{title.originalTitle}</p>
+              )}
+              {title.tagline && (
+                <p className="mt-2 text-sm italic text-[var(--fl-muted)]">„{title.tagline}"</p>
+              )}
+
+              <dl className="mt-4 flex flex-wrap gap-x-6 gap-y-2 text-sm">
+                {title.type === "SERIES" ? (
+                  <Fact label="Umfang">
+                    {title.seasonCount} {title.seasonCount === 1 ? "Staffel" : "Staffeln"} ·{" "}
+                    {title.episodeCount} Episoden
+                  </Fact>
+                ) : null}
+                {title.runtime ? (
+                  <Fact label={title.type === "SERIES" ? "Pro Episode" : "Laufzeit"}>
+                    {title.runtime} min
+                  </Fact>
+                ) : null}
+                {title.voteAverage ? (
+                  <Fact label="TMDB">{title.voteAverage.toFixed(1)} / 10</Fact>
+                ) : null}
+              </dl>
+
+              {title.genres.length > 0 && (
+                <ul className="mt-4 flex flex-wrap gap-1.5">
+                  {title.genres.map((genre) => (
+                    <li
+                      key={genre}
+                      className="rounded-full border border-[var(--fl-border)] px-2.5 py-0.5 text-xs text-[var(--fl-muted)]"
+                    >
+                      {genre}
+                    </li>
+                  ))}
+                </ul>
+              )}
+
+              {title.overview && (
+                <p className="mt-4 max-w-2xl text-sm leading-relaxed text-[var(--fl-muted)]">
+                  {title.overview}
+                </p>
+              )}
+
+              <p className="mt-5 rounded-xl border border-dashed border-[var(--fl-border)] px-3 py-2 text-xs text-[var(--fl-faint)]">
+                Die Bibliothek kommt in der nächsten Etappe — dann lässt sich der Titel von hier
+                aus aufnehmen und der Fortschritt abhaken.
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <section className="mt-6">
+          <h2 className="mb-3 text-lg font-semibold">Wo läuft das?</h2>
+          <div className="fl-card p-4">
+            <ProviderList groups={providerGroups} region={user.region} />
+            <p className="mt-3 text-xs text-[var(--fl-faint)]">
+              Verfügbarkeitsdaten von JustWatch über TMDB, Region {user.region}.
+            </p>
+          </div>
+        </section>
+
+        {title.type === "SERIES" && (
+          <section className="mt-6">
+            <h2 className="mb-3 text-lg font-semibold">Staffeln</h2>
+            <SeasonList seasons={seasons} />
+          </section>
+        )}
+
+        {importError && (
+          <p className="mt-6 text-xs text-[var(--fl-warning)]">
+            Hinweis: Die Daten stammen aus dem lokalen Katalog — die Auffrischung bei TMDB ist
+            fehlgeschlagen ({importError}).
+          </p>
+        )}
+      </article>
+    </AppShell>
+  );
+}
+
+function Fact({ label, children }: { label: string; children: React.ReactNode }) {
+  return (
+    <div>
+      <dt className="text-xs uppercase tracking-wide text-[var(--fl-faint)]">{label}</dt>
+      <dd className="mt-0.5 font-medium">{children}</dd>
+    </div>
+  );
+}

src/components/Poster.tsx

@@ -0,0 +1,97 @@
+import { clsx } from "clsx";
+import { posterUrl, type ImageSize } from "@/lib/images";
+import { FlimmerMark } from "@/components/brand/FlimmerLogo";
+
+/**
+ * Posterbild mit Rückfallebene.
+ *
+ * Nicht jeder Titel hat bei TMDB ein Poster, manuell angelegte schon gar
+ * nicht, und einzelne Pfade verschwinden mit der Zeit.
+ *
+ * Die Rückfallkachel liegt deshalb **dauerhaft darunter**, das Bild darüber:
+ * lädt es, verdeckt es die Kachel; lädt es nicht, bleibt die Kachel stehen.
+ * Bewusst ohne onError-Handler — ein Bild kann schon fehlschlagen, bevor React
+ * den Handler überhaupt angehängt hat. Das leere alt-Attribut sorgt dafür,
+ * dass ein kaputtes Bild in sich zusammenfällt statt ein Symbol zu zeigen;
+ * den Titel trägt der Container als aria-label.
+ */
+export function Poster({
+  path,
+  alt,
+  size = "w342",
+  className,
+  sizes = "(min-width: 1024px) 12rem, 40vw",
+  priority = false,
+}: {
+  path: string | null | undefined;
+  alt: string;
+  size?: ImageSize;
+  className?: string;
+  sizes?: string;
+  priority?: boolean;
+}) {
+  const url = posterUrl(path, size);
+
+  return (
+    <div
+      role="img"
+      aria-label={alt}
+      className={clsx(
+        "relative aspect-[2/3] w-full overflow-hidden rounded-[var(--radius-poster,0.875rem)] bg-[var(--fl-surface-2)]",
+        className,
+      )}
+    >
+      <div
+        aria-hidden
+        className="absolute inset-0 flex flex-col items-center justify-center gap-2 p-3 text-center"
+        style={{ backgroundImage: "var(--fl-gradient-soft)" }}
+      >
+        <FlimmerMark className="h-8 w-8 opacity-70" flat />
+        <span className="line-clamp-3 text-xs text-[var(--fl-muted)]">{alt}</span>
+      </div>
+
+      {url && (
+        // Bewusst <img> statt next/image: die Bilder laufen bereits über den
+        // eigenen Cache-Endpunkt, eine zweite Optimierungsschicht brächte dem
+        // selbst gehosteten Server nur zusätzliche Last.
+        // eslint-disable-next-line @next/next/no-img-element
+        <img
+          src={url}
+          alt=""
+          sizes={sizes}
+          loading={priority ? "eager" : "lazy"}
+          decoding="async"
+          className="absolute inset-0 h-full w-full object-cover"
+        />
+      )}
+    </div>
+  );
+}
+
+/** Breitbild-Variante für Kopfbereiche (Backdrop). */
+export function Backdrop({
+  path,
+  alt,
+  className,
+}: {
+  path: string | null | undefined;
+  alt: string;
+  className?: string;
+}) {
+  const url = posterUrl(path, "w1280");
+  if (!url) return null;
+
+  return (
+    <div className={clsx("absolute inset-0 overflow-hidden", className)} aria-hidden>
+      {/* eslint-disable-next-line @next/next/no-img-element */}
+      <img src={url} alt="" className="h-full w-full object-cover opacity-25" />
+      <div
+        className="absolute inset-0"
+        style={{
+          background:
+            "linear-gradient(to top, var(--fl-bg) 8%, color-mix(in oklab, var(--fl-bg) 70%, transparent) 55%, color-mix(in oklab, var(--fl-bg) 30%, transparent) 100%)",
+        }}
+      />
+    </div>
+  );
+}

src/components/ProviderBadges.tsx

@@ -0,0 +1,96 @@
+import { posterUrl } from "@/lib/images";
+
+/**
+ * Streamingdienste als Badges.
+ *
+ * Farbe und Logo kommen aus dem Katalog; Dienste ohne hinterlegte Akzentfarbe
+ * bekommen einen neutralen Ton, damit die Reihe trotzdem ruhig aussieht.
+ */
+
+export type ProviderBadgeData = {
+  id: string;
+  name: string;
+  logoPath: string | null;
+  color: string | null;
+};
+
+const KIND_LABEL = {
+  FLATRATE: "Im Abo",
+  FREE: "Kostenlos",
+  ADS: "Mit Werbung",
+  RENT: "Leihen",
+  BUY: "Kaufen",
+} as const;
+
+export type ProviderKindKey = keyof typeof KIND_LABEL;
+
+export function ProviderBadge({ provider }: { provider: ProviderBadgeData }) {
+  const logo = posterUrl(provider.logoPath, "w92");
+  const accent = provider.color ?? "var(--fl-border-strong)";
+
+  return (
+    <span
+      className="inline-flex items-center gap-1.5 rounded-full border py-1 pl-1 pr-3 text-xs font-medium"
+      style={{
+        borderColor: `color-mix(in oklab, ${accent} 55%, transparent)`,
+        backgroundColor: `color-mix(in oklab, ${accent} 14%, transparent)`,
+      }}
+    >
+      {/* Farbpunkt liegt darunter; ein Logo, das nicht lädt, fällt in sich
+          zusammen und gibt ihn wieder frei. */}
+      <span className="relative h-5 w-5 shrink-0">
+        <span
+          aria-hidden
+          className="absolute inset-0 rounded-full"
+          style={{ backgroundColor: accent }}
+        />
+        {logo && (
+          // eslint-disable-next-line @next/next/no-img-element
+          <img
+            src={logo}
+            alt=""
+            loading="lazy"
+            decoding="async"
+            className="absolute inset-0 h-5 w-5 rounded-full object-cover"
+          />
+        )}
+      </span>
+      <span className="text-[var(--fl-text)]">{provider.name}</span>
+    </span>
+  );
+}
+
+/** Alle Verfügbarkeiten eines Titels, nach Art gruppiert. */
+export function ProviderList({
+  groups,
+  region,
+}: {
+  groups: Partial<Record<ProviderKindKey, ProviderBadgeData[]>>;
+  region: string;
+}) {
+  const order: ProviderKindKey[] = ["FLATRATE", "FREE", "ADS", "RENT", "BUY"];
+  const present = order.filter((kind) => (groups[kind]?.length ?? 0) > 0);
+
+  if (present.length === 0) {
+    return (
+      <p className="text-sm text-[var(--fl-faint)]">
+        Für die Region {region} meldet TMDB derzeit keinen Streamingdienst.
+      </p>
+    );
+  }
+
+  return (
+    <div className="space-y-3">
+      {present.map((kind) => (
+        <div key={kind} className="flex flex-wrap items-center gap-2">
+          <span className="w-24 shrink-0 text-xs font-semibold uppercase tracking-wide text-[var(--fl-faint)]">
+            {KIND_LABEL[kind]}
+          </span>
+          {groups[kind]?.map((provider) => (
+            <ProviderBadge key={`${kind}-${provider.id}`} provider={provider} />
+          ))}
+        </div>
+      ))}
+    </div>
+  );
+}

src/components/SearchField.tsx

@@ -0,0 +1,118 @@
+"use client";
+
+import { useEffect, useRef, useState, useTransition } from "react";
+import { usePathname, useRouter } from "next/navigation";
+import { clsx } from "clsx";
+
+/**
+ * Suchfeld mit Typfilter.
+ *
+ * Die Anfrage steht in der URL — damit sind Treffer teilbar, der Zurück-Knopf
+ * funktioniert und die Suche selbst bleibt eine Server-Komponente. Getippte
+ * Eingaben werden kurz gesammelt, bevor die Adresse fortgeschrieben wird.
+ */
+export function SearchField({
+  initialQuery,
+  filter,
+  filters,
+}: {
+  initialQuery: string;
+  filter: string;
+  filters: { key: string; label: string }[];
+}) {
+  const router = useRouter();
+  const pathname = usePathname();
+  const [value, setValue] = useState(initialQuery);
+  const [pending, startTransition] = useTransition();
+  const first = useRef(true);
+
+  useEffect(() => {
+    // Beim ersten Rendern nichts tun — sonst ersetzt die Komponente die
+    // gerade geladene URL durch eine identische.
+    if (first.current) {
+      first.current = false;
+      return;
+    }
+
+    const timer = setTimeout(() => {
+      const params = new URLSearchParams();
+      if (value.trim()) params.set("q", value.trim());
+      if (filter !== "alle") params.set("typ", filter);
+      startTransition(() => {
+        router.replace(`${pathname}?${params.toString()}`, { scroll: false });
+      });
+    }, 350);
+
+    return () => clearTimeout(timer);
+  }, [value, filter, pathname, router]);
+
+  function selectFilter(key: string) {
+    const params = new URLSearchParams();
+    if (value.trim()) params.set("q", value.trim());
+    if (key !== "alle") params.set("typ", key);
+    startTransition(() => {
+      router.replace(`${pathname}?${params.toString()}`, { scroll: false });
+    });
+  }
+
+  return (
+    <div className="space-y-3">
+      <div className="relative">
+        <SearchIcon />
+        <input
+          type="search"
+          value={value}
+          onChange={(event) => setValue(event.target.value)}
+          placeholder="Serie oder Film suchen …"
+          aria-label="Suchbegriff"
+          autoFocus
+          className="fl-input pl-10 text-base"
+        />
+        {pending && (
+          <span
+            className="absolute right-3 top-1/2 -translate-y-1/2 text-xs text-[var(--fl-faint)]"
+            role="status"
+          >
+            sucht …
+          </span>
+        )}
+      </div>
+
+      <div className="flex flex-wrap gap-2" role="group" aria-label="Nach Typ filtern">
+        {filters.map((item) => (
+          <button
+            key={item.key}
+            type="button"
+            onClick={() => selectFilter(item.key)}
+            aria-pressed={filter === item.key}
+            className={clsx(
+              "rounded-full border px-3.5 py-1.5 text-sm font-medium transition-colors",
+              filter === item.key
+                ? "border-transparent text-[var(--fl-on-accent)]"
+                : "border-[var(--fl-border)] text-[var(--fl-muted)] hover:border-[var(--fl-border-strong)] hover:text-[var(--fl-text)]",
+            )}
+            style={filter === item.key ? { backgroundImage: "var(--fl-gradient)" } : undefined}
+          >
+            {item.label}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function SearchIcon() {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      className="pointer-events-none absolute left-3.5 top-1/2 h-4 w-4 -translate-y-1/2 text-[var(--fl-faint)]"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      aria-hidden
+    >
+      <circle cx="11" cy="11" r="6.5" />
+      <path d="m16 16 4.5 4.5" strokeLinecap="round" />
+    </svg>
+  );
+}

src/components/SeasonList.tsx

@@ -0,0 +1,137 @@
+"use client";
+
+import { useState } from "react";
+import { clsx } from "clsx";
+
+/**
+ * Staffel- und Episodenliste.
+ *
+ * Staffeln sind eingeklappt, damit eine Serie mit zwanzig Staffeln die Seite
+ * nicht sprengt; die erste reguläre Staffel steht offen. In Etappe 3 kommen
+ * hier die Häkchen für den Fortschritt dazu.
+ */
+
+export type EpisodeData = {
+  id: string;
+  episodeNumber: number;
+  name: string;
+  overview: string | null;
+  airDate: string | null;
+  runtime: number | null;
+};
+
+export type SeasonData = {
+  id: string;
+  seasonNumber: number;
+  name: string;
+  overview: string | null;
+  airDate: string | null;
+  episodes: EpisodeData[];
+};
+
+function formatDate(value: string | null): string | null {
+  if (!value) return null;
+  return new Date(value).toLocaleDateString("de-DE", {
+    day: "2-digit",
+    month: "2-digit",
+    year: "numeric",
+  });
+}
+
+export function SeasonList({ seasons }: { seasons: SeasonData[] }) {
+  const firstRegular = seasons.find((season) => season.seasonNumber > 0) ?? seasons[0];
+  const [open, setOpen] = useState<string[]>(firstRegular ? [firstRegular.id] : []);
+
+  function toggle(id: string) {
+    setOpen((current) =>
+      current.includes(id) ? current.filter((entry) => entry !== id) : [...current, id],
+    );
+  }
+
+  if (seasons.length === 0) {
+    return <p className="text-sm text-[var(--fl-faint)]">Zu dieser Serie liegen keine Staffeln vor.</p>;
+  }
+
+  return (
+    <div className="space-y-2">
+      {seasons.map((season) => {
+        const isOpen = open.includes(season.id);
+        const air = formatDate(season.airDate);
+
+        return (
+          <section key={season.id} className="fl-card overflow-hidden">
+            <h3>
+              <button
+                type="button"
+                onClick={() => toggle(season.id)}
+                aria-expanded={isOpen}
+                className="flex w-full items-center gap-3 px-4 py-3 text-left transition-colors hover:bg-[var(--fl-surface-2)]"
+              >
+                <Chevron open={isOpen} />
+                <span className="flex-1">
+                  <span className="font-medium">{season.name}</span>
+                  <span className="ml-2 text-sm text-[var(--fl-faint)]">
+                    {season.episodes.length}{" "}
+                    {season.episodes.length === 1 ? "Episode" : "Episoden"}
+                    {air ? ` · ab ${air}` : ""}
+                  </span>
+                </span>
+              </button>
+            </h3>
+
+            {isOpen && (
+              <ol className="border-t border-[var(--fl-border)]">
+                {season.episodes.map((episode) => (
+                  <li
+                    key={episode.id}
+                    className="flex gap-3 border-b border-[var(--fl-border)] px-4 py-2.5 last:border-b-0"
+                  >
+                    <span className="w-14 shrink-0 pt-0.5 font-mono text-xs text-[var(--fl-faint)]">
+                      S{String(season.seasonNumber).padStart(2, "0")}E
+                      {String(episode.episodeNumber).padStart(2, "0")}
+                    </span>
+                    <span className="min-w-0 flex-1">
+                      <span className="block text-sm font-medium">{episode.name}</span>
+                      {episode.overview && (
+                        <span className="mt-0.5 line-clamp-2 block text-xs text-[var(--fl-faint)]">
+                          {episode.overview}
+                        </span>
+                      )}
+                    </span>
+                    <span className="shrink-0 pt-0.5 text-right text-xs text-[var(--fl-faint)]">
+                      {formatDate(episode.airDate) ?? "—"}
+                      {episode.runtime ? <span className="block">{episode.runtime} min</span> : null}
+                    </span>
+                  </li>
+                ))}
+                {season.episodes.length === 0 && (
+                  <li className="px-4 py-3 text-sm text-[var(--fl-faint)]">
+                    Für diese Staffel liegen noch keine Episoden vor.
+                  </li>
+                )}
+              </ol>
+            )}
+          </section>
+        );
+      })}
+    </div>
+  );
+}
+
+function Chevron({ open }: { open: boolean }) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      className={clsx(
+        "h-4 w-4 shrink-0 text-[var(--fl-muted)] transition-transform duration-200",
+        open && "rotate-90",
+      )}
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      aria-hidden
+    >
+      <path d="m9 6 6 6-6 6" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}