diff --git a/src/app/_components/media/focal-point-picker.tsx b/src/app/_components/media/focal-point-picker.tsx
new file mode 100644
index 00000000..aeadcd8b
--- /dev/null
+++ b/src/app/_components/media/focal-point-picker.tsx
@@ -0,0 +1,126 @@
+"use client";
+
+import { useCallback, useRef } from "react";
+import ImageWithFallback from "@/app/_components/ui/image-with-fallback";
+import { Button } from "@/app/_components/ui";
+import { CrosshairIcon } from "lucide-react";
+
+/**
+ * Fokuspunkt eines Bildes setzen: der Punkt, der sichtbar bleibt, wenn das Bild
+ * irgendwo als `object-cover` beschnitten wird (Kartenkopf, Karussell, Kachel).
+ *
+ * Die Spalten gab es schon, nur keinen Weg sie zu setzen — bis hierher blieb
+ * als einziges Mittel, das Bild neu zuzuschneiden und damit das Original zu
+ * verlieren. Der Fokuspunkt lässt die Datei in Ruhe.
+ */
+export function FocalPointPicker({
+  url,
+  alt,
+  x,
+  y,
+  onChange,
+}: {
+  url: string;
+  alt: string;
+  x: number | null;
+  y: number | null;
+  onChange: (next: { x: number | null; y: number | null }) => void;
+}) {
+  const frameRef = useRef<HTMLDivElement>(null);
+
+  const setFromEvent = useCallback(
+    (clientX: number, clientY: number) => {
+      const frame = frameRef.current?.getBoundingClientRect();
+      if (!frame || frame.width === 0 || frame.height === 0) return;
+      const nextX = ((clientX - frame.left) / frame.width) * 100;
+      const nextY = ((clientY - frame.top) / frame.height) * 100;
+      onChange({
+        x: Math.round(Math.min(100, Math.max(0, nextX))),
+        y: Math.round(Math.min(100, Math.max(0, nextY))),
+      });
+    },
+    [onChange],
+  );
+
+  const hasFocalPoint = x != null && y != null;
+
+  return (
+    <div className="space-y-2">
+      <div
+        ref={frameRef}
+        // Kein <button>: der Klick trägt eine Position, keine Ja/Nein-Auswahl.
+        // Für die Tastatur stehen darunter die beiden Zahlenfelder.
+        onClick={(event) => setFromEvent(event.clientX, event.clientY)}
+        className="dark:border-dark-border relative aspect-video w-full cursor-crosshair overflow-hidden rounded-lg border border-gray-200 bg-gray-100 dark:bg-gray-800"
+        title="Klicken, um den Bildmittelpunkt zu setzen"
+      >
+        <ImageWithFallback
+          src={url}
+          alt={alt}
+          fill
+          className="object-contain"
+          sizes="(max-width: 768px) 90vw, 420px"
+        />
+        {hasFocalPoint && (
+          <span
+            className="pointer-events-none absolute h-6 w-6 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white bg-black/40 ring-2 ring-black/50"
+            style={{ left: `${x}%`, top: `${y}%` }}
+            aria-hidden
+          />
+        )}
+      </div>
+
+      <div className="flex flex-wrap items-end gap-2">
+        <label className="flex items-center gap-1.5 text-xs text-gray-600 dark:text-gray-400">
+          X&nbsp;%
+          <input
+            type="number"
+            min={0}
+            max={100}
+            value={x ?? ""}
+            onChange={(event) =>
+              onChange({
+                x:
+                  event.target.value === "" ? null : Number(event.target.value),
+                y: y ?? 50,
+              })
+            }
+            className="dark:border-dark-border dark:bg-dark-background-secondary dark:text-dark-text w-16 rounded-md border border-gray-300 px-2 py-1 tabular-nums"
+          />
+        </label>
+        <label className="flex items-center gap-1.5 text-xs text-gray-600 dark:text-gray-400">
+          Y&nbsp;%
+          <input
+            type="number"
+            min={0}
+            max={100}
+            value={y ?? ""}
+            onChange={(event) =>
+              onChange({
+                x: x ?? 50,
+                y:
+                  event.target.value === "" ? null : Number(event.target.value),
+              })
+            }
+            className="dark:border-dark-border dark:bg-dark-background-secondary dark:text-dark-text w-16 rounded-md border border-gray-300 px-2 py-1 tabular-nums"
+          />
+        </label>
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          disabled={!hasFocalPoint}
+          onClick={() => onChange({ x: null, y: null })}
+        >
+          <CrosshairIcon className="mr-1.5 h-4 w-4" />
+          Zurücksetzen
+        </Button>
+      </div>
+      <p className="dark:text-dark-muted text-xs text-gray-500">
+        Bestimmt, welcher Bildausschnitt sichtbar bleibt, wenn das Bild
+        beschnitten dargestellt wird. Ohne Fokuspunkt wird die Bildmitte
+        verwendet.
+      </p>
+    </div>
+  );
+}
diff --git a/src/app/_components/media/media-delete-dialog.tsx b/src/app/_components/media/media-delete-dialog.tsx
new file mode 100644
index 00000000..8322b8d1
--- /dev/null
+++ b/src/app/_components/media/media-delete-dialog.tsx
@@ -0,0 +1,164 @@
+"use client";
+
+import { api } from "@/trpc/react";
+import ImageWithFallback from "@/app/_components/ui/image-with-fallback";
+import { Button } from "@/app/_components/ui";
+import {
+  ScrollableModal,
+  ScrollableModalCard,
+  ScrollableModalBody,
+  ScrollableModalFooter,
+} from "@/app/_components/ui/scrollable-modal";
+import { AlertTriangleIcon } from "lucide-react";
+import {
+  formatFileSize,
+  getMimeTypeIcon,
+  type MediaItem,
+} from "./media-shared";
+
+/**
+ * Löschdialog mit Verwendungsnachweis.
+ *
+ * Der vorherige Dialog fragte nur „bist du sicher?“ und nannte nicht einmal die
+ * Datei. Das war vor allem deshalb heikel, weil zwei Beziehungen auf
+ * `onDelete: Cascade` stehen: mit dem Bild verschwand stillschweigend das ganze
+ * Bläserheft bzw. die Karussell-Folie.
+ */
+export function MediaDeleteDialog({
+  media,
+  onClose,
+  onConfirm,
+  isDeleting,
+}: {
+  media: MediaItem;
+  onClose: () => void;
+  onConfirm: () => void;
+  isDeleting: boolean;
+}) {
+  const { data: usage, isLoading } = api.media.getUsage.useQuery({
+    id: media.id,
+  });
+
+  const cascades = usage?.usages.filter((entry) => entry.cascade) ?? [];
+  const references = usage?.usages.filter((entry) => !entry.cascade) ?? [];
+
+  return (
+    <ScrollableModal onClose={isDeleting ? undefined : onClose}>
+      <ScrollableModalCard maxW="lg">
+        <ScrollableModalBody className="space-y-4">
+          <h3 className="dark:text-dark-text text-lg font-semibold text-gray-900">
+            Medium löschen
+          </h3>
+
+          <div className="dark:border-dark-border flex items-center gap-3 rounded-lg border border-gray-200 p-3">
+            <div className="relative h-14 w-14 shrink-0 overflow-hidden rounded bg-gray-100 dark:bg-gray-800">
+              {media.mimeType.startsWith("image/") ? (
+                <ImageWithFallback
+                  src={media.url}
+                  alt={media.name}
+                  fill
+                  className="object-cover"
+                  sizes="56px"
+                />
+              ) : (
+                <span className="flex h-full items-center justify-center text-2xl">
+                  {getMimeTypeIcon(media.mimeType)}
+                </span>
+              )}
+            </div>
+            <div className="min-w-0">
+              <p className="dark:text-dark-text truncate font-medium text-gray-900">
+                {media.name}
+              </p>
+              <p className="dark:text-dark-muted text-xs text-gray-500">
+                {formatFileSize(media.size)}
+              </p>
+            </div>
+          </div>
+
+          {isLoading ? (
+            <p className="dark:text-dark-muted text-sm text-gray-500">
+              Verwendung wird geprüft …
+            </p>
+          ) : cascades.length > 0 ? (
+            <div className="rounded-lg border border-red-300 bg-red-50 p-3 dark:border-red-900/50 dark:bg-red-900/20">
+              <p className="flex items-start gap-2 text-sm font-semibold text-red-800 dark:text-red-300">
+                <AlertTriangleIcon className="mt-0.5 h-4 w-4 shrink-0" />
+                Achtung: Es werden weitere Einträge mitgelöscht
+              </p>
+              <ul className="mt-2 space-y-1 text-sm text-red-800 dark:text-red-300">
+                {cascades.map((entry, index) => (
+                  <li key={`${entry.kind}-${index}`}>
+                    <span className="font-medium">{entry.kind}:</span>{" "}
+                    {entry.label}
+                  </li>
+                ))}
+              </ul>
+              <p className="mt-2 text-xs text-red-700 dark:text-red-400">
+                Diese Einträge hängen unmittelbar an der Datei und verschwinden
+                mit ihr. Tausche das Bild dort zuerst aus, wenn der Eintrag
+                bleiben soll.
+              </p>
+            </div>
+          ) : null}
+
+          {references.length > 0 && (
+            <div className="dark:border-dark-border dark:bg-dark-background rounded-lg border border-gray-200 bg-gray-50 p-3">
+              <p className="dark:text-dark-text text-sm font-medium text-gray-900">
+                Wird an {references.length}{" "}
+                {references.length === 1 ? "Stelle" : "Stellen"} verwendet
+              </p>
+              <ul className="dark:text-dark-muted mt-1.5 space-y-1 text-sm text-gray-600">
+                {references.slice(0, 8).map((entry, index) => (
+                  <li key={`${entry.kind}-${index}`}>
+                    <span className="font-medium">{entry.kind}:</span>{" "}
+                    {entry.label}
+                  </li>
+                ))}
+                {references.length > 8 && (
+                  <li>… und {references.length - 8} weitere</li>
+                )}
+              </ul>
+              <p className="dark:text-dark-muted mt-2 text-xs text-gray-500">
+                Dort bleibt der Eintrag bestehen, verliert aber sein Bild.
+              </p>
+            </div>
+          )}
+
+          {!isLoading && usage?.total === 0 && (
+            <p className="dark:text-dark-muted text-sm text-gray-600">
+              Das Medium wird derzeit nirgendwo verwendet.
+            </p>
+          )}
+
+          <p className="dark:text-dark-muted text-sm text-gray-600">
+            Die Datei wird auch von der Festplatte entfernt. Diese Aktion kann
+            nicht rückgängig gemacht werden.
+          </p>
+        </ScrollableModalBody>
+
+        <ScrollableModalFooter>
+          <div className="flex justify-end gap-3">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={onClose}
+              disabled={isDeleting}
+            >
+              Abbrechen
+            </Button>
+            <Button
+              variant="danger"
+              size="sm"
+              onClick={onConfirm}
+              disabled={isDeleting || isLoading}
+              isLoading={isDeleting}
+            >
+              Endgültig löschen
+            </Button>
+          </div>
+        </ScrollableModalFooter>
+      </ScrollableModalCard>
+    </ScrollableModal>
+  );
+}
diff --git a/src/app/_components/media/media-edit-modal.tsx b/src/app/_components/media/media-edit-modal.tsx
new file mode 100644
index 00000000..4bab007c
--- /dev/null
+++ b/src/app/_components/media/media-edit-modal.tsx
@@ -0,0 +1,374 @@
+"use client";
+
+import { useState } from "react";
+import { api } from "@/trpc/react";
+import { useToast } from "@/app/_components/ui/toast";
+import {
+  Button,
+  Input,
+  Label,
+  Textarea,
+  Checkbox,
+  Badge,
+} from "@/app/_components/ui";
+import {
+  ScrollableModal,
+  ScrollableModalCard,
+  ScrollableModalHeader,
+  ScrollableModalBody,
+  ScrollableModalFooter,
+} from "@/app/_components/ui/scrollable-modal";
+import { CropIcon, DownloadIcon } from "lucide-react";
+import ImageCropEditor from "@/app/_components/posts/image-crop-editor";
+import { splitMediaTags } from "@/lib/media-tags";
+import { FocalPointPicker } from "./focal-point-picker";
+import { useMediaDownload } from "./use-media-download";
+import { useReplaceMediaFile } from "./use-replace-media-file";
+import {
+  formatDate,
+  formatFileSize,
+  getMimeTypeIcon,
+  getMimeTypeLabel,
+  statusColors,
+  statusLabels,
+  type MediaItem,
+} from "./media-shared";
+
+/**
+ * Der Formularzustand, wie ihn der Dialog beim Öffnen aus dem Medium zieht.
+ * Strings bleiben Strings — die Umwandlung leerer Felder zu `null` passiert
+ * erst beim Speichern, damit die Eingabe sich normal bedienen lässt.
+ */
+type EditForm = {
+  name: string;
+  alt: string;
+  title: string;
+  caption: string;
+  copyright: string;
+  creator: string;
+  tags: string;
+  isPublic: boolean;
+  focalPointX: number | null;
+  focalPointY: number | null;
+};
+
+function toForm(media: MediaItem): EditForm {
+  return {
+    name: media.name,
+    alt: media.alt ?? "",
+    title: media.title ?? "",
+    caption: media.caption ?? "",
+    copyright: media.copyright ?? "",
+    creator: media.creator ?? "",
+    tags: media.tags.join(", "),
+    isPublic: media.isPublic,
+    focalPointX: media.focalPointX,
+    focalPointY: media.focalPointY,
+  };
+}
+
+export function MediaEditModal({
+  media,
+  onClose,
+}: {
+  media: MediaItem;
+  onClose: () => void;
+}) {
+  const toast = useToast();
+  const utils = api.useUtils();
+  const { downloadOne } = useMediaDownload();
+
+  const [form, setForm] = useState<EditForm>(() => toForm(media));
+  const [error, setError] = useState("");
+  const [isCropping, setIsCropping] = useState(false);
+
+  /**
+   * Der Zuschnitt läuft *über* diesem Dialog, nicht an seiner Stelle: „Abbrechen“
+   * im Zuschneide-Fenster führt damit zurück ins Formular, und die bereits
+   * getippten Angaben stehen noch da.
+   */
+  const { replace, isBusy: isReplacing } = useReplaceMediaFile(() => {
+    setIsCropping(false);
+    // Der Server verwirft den Fokuspunkt beim Ersetzen — er zeigte auf einen
+    // Ausschnitt, den es nicht mehr gibt. Das Formular muss mitziehen, sonst
+    // schriebe „Speichern“ den alten Punkt wieder zurück.
+    setForm((current) => ({
+      ...current,
+      focalPointX: null,
+      focalPointY: null,
+    }));
+  });
+
+  const updateMutation = api.media.update.useMutation({
+    onSuccess: () => {
+      void utils.media.getAll.invalidate();
+      void utils.media.getStatistics.invalidate();
+      toast.success("Änderungen gespeichert");
+      onClose();
+    },
+    onError: (mutationError) => {
+      setError(mutationError.message);
+      toast.error(mutationError.message);
+    },
+  });
+
+  const isImage = media.mimeType.startsWith("image/");
+
+  const set = <K extends keyof EditForm>(key: K, value: EditForm[K]) =>
+    setForm((current) => ({ ...current, [key]: value }));
+
+  const handleSave = () => {
+    const name = form.name.trim();
+    if (!name) {
+      setError("Der Name darf nicht leer sein.");
+      return;
+    }
+
+    updateMutation.mutate({
+      id: media.id,
+      name,
+      // `|| null` statt `|| undefined`: ein geleertes Feld soll die Spalte
+      // leeren. Mit `undefined` ließe Prisma den alten Wert stehen, und der
+      // Dialog meldete eine Änderung, die nie stattgefunden hat.
+      alt: form.alt.trim() || null,
+      title: form.title.trim() || null,
+      caption: form.caption.trim() || null,
+      copyright: form.copyright.trim() || null,
+      creator: form.creator.trim() || null,
+      tags: splitMediaTags(form.tags),
+      isPublic: form.isPublic,
+      focalPointX: form.focalPointX,
+      focalPointY: form.focalPointY,
+    });
+  };
+
+  return (
+    <ScrollableModal onClose={isCropping ? undefined : onClose}>
+      <ScrollableModalCard maxW="4xl">
+        <ScrollableModalHeader>
+          <div className="flex flex-wrap items-center justify-between gap-3">
+            <h2 className="dark:text-dark-text text-xl font-semibold text-gray-900">
+              Medium bearbeiten
+            </h2>
+            <span
+              className={`inline-flex rounded-full px-2.5 py-1 text-xs font-medium ${statusColors[media.status]}`}
+            >
+              {statusLabels[media.status]}
+            </span>
+          </div>
+        </ScrollableModalHeader>
+
+        <ScrollableModalBody>
+          {/* Links das Bild samt Werkzeugen, rechts die Metadaten: das
+              Formular ist der eigentliche Zweck des Dialogs und bekommt die
+              Spalte, die nicht scrollen muss. */}
+          <div className="grid gap-6 md:grid-cols-[minmax(0,360px)_minmax(0,1fr)]">
+            <div className="space-y-3">
+              {isImage ? (
+                <FocalPointPicker
+                  url={media.url}
+                  alt={media.alt ?? media.name}
+                  x={form.focalPointX}
+                  y={form.focalPointY}
+                  onChange={({ x, y }) =>
+                    setForm((current) => ({
+                      ...current,
+                      focalPointX: x,
+                      focalPointY: y,
+                    }))
+                  }
+                />
+              ) : (
+                <div className="dark:border-dark-border flex aspect-video items-center justify-center rounded-lg border border-gray-200 bg-gray-100 text-5xl dark:bg-gray-800">
+                  {getMimeTypeIcon(media.mimeType)}
+                </div>
+              )}
+
+              <div className="flex flex-wrap gap-2">
+                {isImage && (
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="sm"
+                    onClick={() => setIsCropping(true)}
+                  >
+                    <CropIcon className="mr-1.5 h-4 w-4" />
+                    Zuschneiden
+                  </Button>
+                )}
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  onClick={() => downloadOne(media)}
+                >
+                  <DownloadIcon className="mr-1.5 h-4 w-4" />
+                  Herunterladen
+                </Button>
+              </div>
+
+              <dl className="dark:text-dark-muted space-y-1 text-xs text-gray-500">
+                <div className="flex justify-between gap-4">
+                  <dt>Typ</dt>
+                  <dd>{getMimeTypeLabel(media.mimeType)}</dd>
+                </div>
+                <div className="flex justify-between gap-4">
+                  <dt>Größe</dt>
+                  <dd className="tabular-nums">
+                    {formatFileSize(media.size)}
+                    {media.width && media.height
+                      ? ` · ${media.width}×${media.height}`
+                      : ""}
+                  </dd>
+                </div>
+                <div className="flex justify-between gap-4">
+                  <dt>Hochgeladen</dt>
+                  <dd>{formatDate(media.createdAt)}</dd>
+                </div>
+                {media.uploadedBy && (
+                  <div className="flex justify-between gap-4">
+                    <dt>Von</dt>
+                    <dd className="truncate">{media.uploadedBy.displayName}</dd>
+                  </div>
+                )}
+                <div className="flex justify-between gap-4">
+                  <dt>Dateiname</dt>
+                  <dd className="truncate font-mono" title={media.filename}>
+                    {media.filename}
+                  </dd>
+                </div>
+              </dl>
+            </div>
+
+            <div className="space-y-4">
+              <div>
+                <Label htmlFor="mediaName" required>
+                  Name
+                </Label>
+                <Input
+                  id="mediaName"
+                  value={form.name}
+                  onChange={(event) => set("name", event.target.value)}
+                  error={!form.name.trim()}
+                />
+                <p className="dark:text-dark-muted mt-1 text-xs text-gray-500">
+                  Interne Bezeichnung in der Medienübersicht und im Download.
+                </p>
+              </div>
+
+              <div>
+                <Label htmlFor="mediaAlt">Alt-Text</Label>
+                <Input
+                  id="mediaAlt"
+                  value={form.alt}
+                  onChange={(event) => set("alt", event.target.value)}
+                  placeholder="Beschreibung für Screenreader"
+                />
+              </div>
+
+              <div>
+                <Label htmlFor="mediaTitle">Titel</Label>
+                <Input
+                  id="mediaTitle"
+                  value={form.title}
+                  onChange={(event) => set("title", event.target.value)}
+                  placeholder="Anzeigetitel"
+                />
+              </div>
+
+              <div>
+                <Label htmlFor="mediaCaption">Bildunterschrift</Label>
+                <Textarea
+                  id="mediaCaption"
+                  rows={2}
+                  value={form.caption}
+                  onChange={(event) => set("caption", event.target.value)}
+                  placeholder="Optionale Bildunterschrift"
+                />
+              </div>
+
+              <div className="grid gap-4 sm:grid-cols-2">
+                <div>
+                  <Label htmlFor="mediaCopyright">Copyright</Label>
+                  <Input
+                    id="mediaCopyright"
+                    value={form.copyright}
+                    onChange={(event) => set("copyright", event.target.value)}
+                    placeholder="z. B. © 2025 Posaunenwerk"
+                  />
+                </div>
+                <div>
+                  <Label htmlFor="mediaCreator">Fotograf:in</Label>
+                  <Input
+                    id="mediaCreator"
+                    value={form.creator}
+                    onChange={(event) => set("creator", event.target.value)}
+                    placeholder="Name der Urheberin"
+                  />
+                </div>
+              </div>
+
+              <div>
+                <Label htmlFor="mediaTags">Tags</Label>
+                <Input
+                  id="mediaTags"
+                  value={form.tags}
+                  onChange={(event) => set("tags", event.target.value)}
+                  placeholder="Kommagetrennte Tags"
+                />
+                {splitMediaTags(form.tags).length > 0 && (
+                  <div className="mt-2 flex flex-wrap gap-1.5">
+                    {splitMediaTags(form.tags).map((tag) => (
+                      <Badge key={tag} size="sm" variant="default">
+                        {tag}
+                      </Badge>
+                    ))}
+                  </div>
+                )}
+              </div>
+
+              <div className="flex items-center gap-3">
+                <Checkbox
+                  id="mediaIsPublic"
+                  checked={form.isPublic}
+                  onChange={(event) => set("isPublic", event.target.checked)}
+                />
+                <Label htmlFor="mediaIsPublic" className="mb-0">
+                  Öffentlich sichtbar
+                </Label>
+              </div>
+
+              {error && <p className="text-sm text-red-600">{error}</p>}
+            </div>
+          </div>
+        </ScrollableModalBody>
+
+        <ScrollableModalFooter>
+          <div className="flex justify-end gap-3">
+            <Button variant="outline" size="sm" onClick={onClose}>
+              Abbrechen
+            </Button>
+            <Button
+              size="sm"
+              onClick={handleSave}
+              disabled={updateMutation.isPending || isReplacing}
+              isLoading={updateMutation.isPending}
+            >
+              Speichern
+            </Button>
+          </div>
+        </ScrollableModalFooter>
+      </ScrollableModalCard>
+
+      {isCropping && (
+        <ImageCropEditor
+          imageUrl={media.url}
+          onClose={() => setIsCropping(false)}
+          onCropComplete={(blob, filename, width, height) =>
+            replace(media.id, blob, filename, width, height)
+          }
+        />
+      )}
+    </ScrollableModal>
+  );
+}
diff --git a/src/app/_components/media/media-grid.tsx b/src/app/_components/media/media-grid.tsx
new file mode 100644
index 00000000..55dcb52c
--- /dev/null
+++ b/src/app/_components/media/media-grid.tsx
@@ -0,0 +1,220 @@
+"use client";
+
+import ImageWithFallback from "@/app/_components/ui/image-with-fallback";
+import { Checkbox } from "@/app/_components/ui";
+import { ContentStatus } from "~/generated/prisma/enums";
+import {
+  CheckIcon,
+  CropIcon,
+  DownloadIcon,
+  EditIcon,
+  TrashIcon,
+} from "lucide-react";
+import {
+  focalPointStyle,
+  formatFileSize,
+  getMimeTypeIcon,
+  getMimeTypeLabel,
+  statusColors,
+  statusLabels,
+  type MediaItem,
+} from "./media-shared";
+
+/**
+ * Eine Aktion in der Fußzeile der Kachel.
+ *
+ * Die Schaltflächen lagen früher als schwebende Leiste über dem Bild und waren
+ * am Desktop bis zum Hover unsichtbar — man musste wissen, dass es sie gibt.
+ * Jetzt stehen sie in einer eigenen Zeile unter den Angaben, immer sichtbar.
+ */
+function CardAction({
+  label,
+  icon: Icon,
+  onClick,
+  tone = "neutral",
+}: {
+  label: string;
+  icon: typeof EditIcon;
+  onClick: () => void;
+  tone?: "neutral" | "success" | "danger";
+}) {
+  const tones = {
+    neutral:
+      "text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-100",
+    success:
+      "text-green-600 hover:bg-green-50 dark:text-green-400 dark:hover:bg-green-900/30",
+    danger:
+      "text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-900/30",
+  } as const;
+
+  return (
+    <button
+      type="button"
+      title={label}
+      aria-label={label}
+      onClick={(event) => {
+        event.stopPropagation();
+        onClick();
+      }}
+      className={`rounded-md p-1.5 transition-colors ${tones[tone]}`}
+    >
+      <Icon className="h-4 w-4" />
+    </button>
+  );
+}
+
+export function MediaGrid({
+  media,
+  selectedIds,
+  onToggleSelect,
+  onPreview,
+  onEdit,
+  onRecrop,
+  onDelete,
+  onApprove,
+  onDownload,
+  canEdit,
+  canDelete,
+  canApprove,
+}: {
+  media: MediaItem[];
+  selectedIds: Set<string>;
+  onToggleSelect: (id: string) => void;
+  onPreview: (item: MediaItem) => void;
+  onEdit: (item: MediaItem) => void;
+  onRecrop: (item: MediaItem) => void;
+  onDelete: (item: MediaItem) => void;
+  onApprove: (item: MediaItem) => void;
+  onDownload: (item: MediaItem) => void;
+  canEdit: boolean;
+  canDelete: boolean;
+  canApprove: boolean;
+}) {
+  return (
+    <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
+      {media.map((item) => {
+        const isSelected = selectedIds.has(item.id);
+        const isImage = item.mimeType.startsWith("image/");
+
+        return (
+          <div
+            key={item.id}
+            className={`dark:bg-dark-surface group relative flex flex-col overflow-hidden rounded-lg border bg-white shadow-sm transition-shadow hover:shadow-md ${
+              isSelected
+                ? "border-primary ring-primary/40 ring-2"
+                : "dark:border-dark-border border-gray-200"
+            }`}
+          >
+            <div
+              role="button"
+              tabIndex={0}
+              onClick={() => onPreview(item)}
+              onKeyDown={(event) => {
+                if (event.key === "Enter" || event.key === " ") {
+                  event.preventDefault();
+                  onPreview(item);
+                }
+              }}
+              className="relative aspect-square cursor-pointer overflow-hidden bg-gray-100 dark:bg-gray-800"
+            >
+              {isImage ? (
+                <ImageWithFallback
+                  src={item.url}
+                  alt={item.alt ?? item.name}
+                  fill
+                  className="object-cover transition-transform group-hover:scale-105"
+                  style={focalPointStyle(item)}
+                  sizes="(max-width: 640px) 50vw, (max-width: 1280px) 25vw, 20vw"
+                />
+              ) : (
+                <div className="flex h-full items-center justify-center text-4xl">
+                  {getMimeTypeIcon(item.mimeType)}
+                </div>
+              )}
+
+              <span
+                className={`absolute top-2 left-8 inline-flex rounded-full px-2 py-0.5 text-xs font-medium ${statusColors[item.status]}`}
+              >
+                {statusLabels[item.status]}
+              </span>
+
+              {/* Ohne Alt-Text ist das Bild für Screenreader stumm — in einer
+                  Übersicht, in der genau das gepflegt wird, gehört der Hinweis
+                  auf die Kachel und nicht in ein Untermenü. */}
+              {isImage && !item.alt && (
+                <span
+                  className="absolute right-2 bottom-2 rounded bg-amber-500/90 px-1.5 py-0.5 text-[10px] font-semibold text-white"
+                  title="Kein Alt-Text hinterlegt"
+                >
+                  Alt fehlt
+                </span>
+              )}
+            </div>
+
+            <label
+              className="absolute top-2 left-2 flex cursor-pointer items-center rounded bg-white/80 p-0.5 backdrop-blur-sm dark:bg-black/50"
+              onClick={(event) => event.stopPropagation()}
+            >
+              <Checkbox
+                checked={isSelected}
+                onChange={() => onToggleSelect(item.id)}
+                aria-label={`${item.name} auswählen`}
+              />
+            </label>
+
+            <div className="flex min-w-0 flex-1 flex-col p-3">
+              <p
+                className="dark:text-dark-text truncate text-sm font-medium text-gray-900"
+                title={item.name}
+              >
+                {item.name}
+              </p>
+              <p className="dark:text-dark-muted text-xs text-gray-500">
+                {getMimeTypeLabel(item.mimeType)}
+                {item.size ? ` · ${formatFileSize(item.size)}` : ""}
+              </p>
+
+              <div className="dark:border-dark-border mt-2 flex items-center gap-0.5 border-t border-gray-100 pt-2">
+                <CardAction
+                  label="Herunterladen"
+                  icon={DownloadIcon}
+                  onClick={() => onDownload(item)}
+                />
+                {canEdit && (
+                  <CardAction
+                    label="Bearbeiten"
+                    icon={EditIcon}
+                    onClick={() => onEdit(item)}
+                  />
+                )}
+                {canEdit && isImage && (
+                  <CardAction
+                    label="Zuschneiden"
+                    icon={CropIcon}
+                    onClick={() => onRecrop(item)}
+                  />
+                )}
+                {canApprove && item.status === ContentStatus.PENDING && (
+                  <CardAction
+                    label="Freigeben"
+                    icon={CheckIcon}
+                    tone="success"
+                    onClick={() => onApprove(item)}
+                  />
+                )}
+                {canDelete && (
+                  <CardAction
+                    label="Löschen"
+                    icon={TrashIcon}
+                    tone="danger"
+                    onClick={() => onDelete(item)}
+                  />
+                )}
+              </div>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/src/app/_components/media/media-preview-modal.tsx b/src/app/_components/media/media-preview-modal.tsx
new file mode 100644
index 00000000..0a6c6f5e
--- /dev/null
+++ b/src/app/_components/media/media-preview-modal.tsx
@@ -0,0 +1,121 @@
+"use client";
+
+import ImageWithFallback from "@/app/_components/ui/image-with-fallback";
+import { ScrollableModal } from "@/app/_components/ui/scrollable-modal";
+import { Button } from "@/app/_components/ui";
+import { DownloadIcon, EditIcon, XIcon } from "lucide-react";
+import { useMediaDownload } from "./use-media-download";
+import {
+  focalPointStyle,
+  formatFileSize,
+  getMimeTypeIcon,
+  getMimeTypeLabel,
+  statusColors,
+  statusLabels,
+  type MediaItem,
+} from "./media-shared";
+
+export function MediaPreviewModal({
+  media,
+  onClose,
+  onEdit,
+  canEdit,
+}: {
+  media: MediaItem;
+  onClose: () => void;
+  onEdit: () => void;
+  canEdit: boolean;
+}) {
+  const { downloadOne } = useMediaDownload();
+
+  return (
+    <ScrollableModal onClose={onClose} className="bg-black/80">
+      <div
+        className="relative w-full max-w-4xl"
+        onClick={(event) => event.stopPropagation()}
+      >
+        <div className="dark:bg-dark-surface overflow-hidden rounded-lg bg-white">
+          <div className="relative flex max-h-[65vh] min-h-[240px] items-center justify-center bg-black">
+            {media.mimeType.startsWith("image/") ? (
+              <ImageWithFallback
+                src={media.url}
+                alt={media.alt ?? media.name}
+                width={media.width ?? 1200}
+                height={media.height ?? 800}
+                className="max-h-[65vh] w-auto object-contain"
+                style={focalPointStyle(media)}
+              />
+            ) : media.mimeType.startsWith("video/") ? (
+              <video src={media.url} controls className="max-h-[65vh]" />
+            ) : media.mimeType.startsWith("audio/") ? (
+              <audio src={media.url} controls className="w-96" />
+            ) : (
+              <div className="p-12 text-center text-white">
+                <span className="text-6xl">
+                  {getMimeTypeIcon(media.mimeType)}
+                </span>
+                <p className="mt-4 text-lg font-medium">{media.name}</p>
+              </div>
+            )}
+          </div>
+
+          <div className="flex flex-wrap items-start justify-between gap-4 p-4">
+            <div className="min-w-0">
+              <p className="dark:text-dark-text font-medium text-gray-900">
+                {media.name}
+              </p>
+              <p className="dark:text-dark-muted text-sm text-gray-500">
+                {getMimeTypeLabel(media.mimeType)}
+                {media.size ? ` · ${formatFileSize(media.size)}` : ""}
+                {media.width && media.height
+                  ? ` · ${media.width}×${media.height}`
+                  : ""}
+                {media.uploadedBy ? ` · ${media.uploadedBy.displayName}` : ""}
+              </p>
+              {(media.copyright ?? media.creator) && (
+                <p className="dark:text-dark-muted mt-1 text-xs text-gray-500">
+                  {[media.copyright, media.creator].filter(Boolean).join(" · ")}
+                </p>
+              )}
+              {media.caption && (
+                <p className="dark:text-dark-text mt-2 max-w-prose text-sm text-gray-700">
+                  {media.caption}
+                </p>
+              )}
+            </div>
+
+            <div className="flex shrink-0 flex-wrap items-center gap-2">
+              <span
+                className={`inline-flex rounded-full px-2.5 py-1 text-xs font-medium ${statusColors[media.status]}`}
+              >
+                {statusLabels[media.status]}
+              </span>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => downloadOne(media)}
+              >
+                <DownloadIcon className="mr-1.5 h-4 w-4" />
+                Herunterladen
+              </Button>
+              {canEdit && (
+                <Button variant="secondary" size="sm" onClick={onEdit}>
+                  <EditIcon className="mr-1.5 h-4 w-4" />
+                  Bearbeiten
+                </Button>
+              )}
+            </div>
+          </div>
+        </div>
+
+        <button
+          onClick={onClose}
+          title="Schließen"
+          className="absolute -top-3 -right-3 rounded-full bg-white p-2 shadow-lg hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700"
+        >
+          <XIcon className="h-5 w-5" />
+        </button>
+      </div>
+    </ScrollableModal>
+  );
+}
diff --git a/src/app/_components/media/media-shared.ts b/src/app/_components/media/media-shared.ts
index d6f5b816..130f7234 100644
--- a/src/app/_components/media/media-shared.ts
+++ b/src/app/_components/media/media-shared.ts
@@ -1,11 +1,77 @@
+import { ContentStatus } from "~/generated/prisma/enums";
 import type { RouterOutputs } from "@/trpc/react";
 
 export type MediaItem = RouterOutputs["media"]["getAll"]["media"][number];
 
+export const statusLabels: Record<ContentStatus, string> = {
+  DRAFT: "Entwurf",
+  PENDING: "Ausstehend",
+  APPROVED: "Freigegeben",
+  REJECTED: "Abgelehnt",
+  ARCHIVED: "Archiviert",
+};
+
+export const statusColors: Record<ContentStatus, string> = {
+  DRAFT: "bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300",
+  PENDING:
+    "bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400",
+  APPROVED:
+    "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400",
+  REJECTED: "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400",
+  ARCHIVED: "bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-400",
+};
+
+export const STATUS_ORDER: ContentStatus[] = [
+  ContentStatus.PENDING,
+  ContentStatus.APPROVED,
+  ContentStatus.DRAFT,
+  ContentStatus.REJECTED,
+  ContentStatus.ARCHIVED,
+];
+
+export function formatFileSize(bytes: number | null): string {
+  if (!bytes) return "";
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+export function getMimeTypeIcon(mimeType: string): string {
+  if (mimeType.startsWith("image/")) return "🖼️";
+  if (mimeType.startsWith("video/")) return "🎬";
+  if (mimeType.startsWith("audio/")) return "🎵";
+  if (mimeType === "application/pdf") return "📄";
+  return "📎";
+}
+
+export function getMimeTypeLabel(mimeType: string): string {
+  if (mimeType.startsWith("image/")) return "Bild";
+  if (mimeType.startsWith("video/")) return "Video";
+  if (mimeType.startsWith("audio/")) return "Audio";
+  if (mimeType === "application/pdf") return "PDF";
+  return "Datei";
+}
+
+export function formatDate(value: Date | string): string {
+  return new Intl.DateTimeFormat("de-DE", {
+    day: "2-digit",
+    month: "2-digit",
+    year: "numeric",
+  }).format(new Date(value));
+}
+
+/** `object-position` aus dem gespeicherten Fokuspunkt, sonst die Vorgabe. */
+export function focalPointStyle(item: {
+  focalPointX: number | null;
+  focalPointY: number | null;
+}): React.CSSProperties | undefined {
+  if (item.focalPointX == null || item.focalPointY == null) return undefined;
+  return { objectPosition: `${item.focalPointX}% ${item.focalPointY}%` };
+}
+
 /**
  * Der Name, unter dem eine Datei im Downloads-Ordner landen soll: der gepflegte
- * Medienname plus die Endung der tatsächlichen Datei. Auf der Platte steht der
- * entstellte Speichername ("bild-DFbip-176….jpg"), den niemand wiederfindet.
+ * Medienname plus die Endung der tatsächlichen Datei.
  */
 export function downloadFileName(item: {
   name: string;
diff --git a/src/app/_components/media/media-upload-modal.tsx b/src/app/_components/media/media-upload-modal.tsx
new file mode 100644
index 00000000..26a7dfb0
--- /dev/null
+++ b/src/app/_components/media/media-upload-modal.tsx
@@ -0,0 +1,403 @@
+"use client";
+
+import { useCallback, useRef, useState } from "react";
+import { api } from "@/trpc/react";
+import { useToast } from "@/app/_components/ui/toast";
+import { Button, Input, Label } from "@/app/_components/ui";
+import {
+  ScrollableModal,
+  ScrollableModalCard,
+  ScrollableModalHeader,
+  ScrollableModalBody,
+  ScrollableModalFooter,
+} from "@/app/_components/ui/scrollable-modal";
+import { ArrowUpIcon, CheckIcon, Loader2Icon, XIcon } from "lucide-react";
+import {
+  MEDIA_UPLOAD_ACCEPT,
+  MEDIA_UPLOAD_EXTENSIONS_LABEL,
+  MEDIA_UPLOAD_MAX_BYTES,
+  MEDIA_UPLOAD_MAX_LABEL,
+  isAllowedMediaUpload,
+} from "@/lib/media-upload";
+import { formatFileSize } from "./media-shared";
+
+type UploadedFile = {
+  url: string;
+  path: string;
+  filename: string;
+  size: number;
+  mimeType: string;
+  extension: string;
+  width?: number;
+  height?: number;
+};
+
+/**
+ * Eine Datei in der Warteschlange. `name` ist bearbeitbar, weil er später der
+ * Medienname ist — der Dateiname aus der Kamera ("AG5Y9644.JPG") sagt niemandem
+ * etwas.
+ */
+type QueueEntry = {
+  id: string;
+  name: string;
+  previewUrl: string;
+  state: "uploading" | "ready" | "error" | "saved";
+  error?: string;
+  uploaded?: UploadedFile;
+};
+
+export function MediaUploadModal({ onClose }: { onClose: () => void }) {
+  const toast = useToast();
+  const utils = api.useUtils();
+
+  const [queue, setQueue] = useState<QueueEntry[]>([]);
+  const [copyright, setCopyright] = useState("");
+  const [creator, setCreator] = useState("");
+  const [isSaving, setIsSaving] = useState(false);
+  const [isDragging, setIsDragging] = useState(false);
+  const dragCounterRef = useRef(0);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const createMutation = api.media.create.useMutation();
+
+  const patch = useCallback((id: string, changes: Partial<QueueEntry>) => {
+    setQueue((current) =>
+      current.map((entry) =>
+        entry.id === id ? { ...entry, ...changes } : entry,
+      ),
+    );
+  }, []);
+
+  const uploadFile = useCallback(
+    async (file: File, id: string) => {
+      try {
+        const formData = new FormData();
+        formData.append("file", file);
+        formData.append("folder", "media");
+
+        const response = await fetch("/api/upload", {
+          method: "POST",
+          body: formData,
+        });
+        const payload = (await response.json()) as UploadedFile & {
+          error?: string;
+        };
+
+        if (!response.ok) {
+          // Die Route sagt genau, was nicht stimmt (Typ, Größe, Inhalt) —
+          // diese Meldung war bisher verloren und wurde zu einem pauschalen
+          // „Upload fehlgeschlagen“.
+          throw new Error(payload.error ?? "Upload fehlgeschlagen");
+        }
+
+        patch(id, { state: "ready", uploaded: payload });
+      } catch (error) {
+        patch(id, {
+          state: "error",
+          error:
+            error instanceof Error ? error.message : "Upload fehlgeschlagen",
+        });
+      }
+    },
+    [patch],
+  );
+
+  const addFiles = useCallback(
+    (files: File[]) => {
+      const accepted: { file: File; entry: QueueEntry }[] = [];
+
+      for (const file of files) {
+        const id = `${file.name}-${file.size}-${crypto.randomUUID()}`;
+        const base: QueueEntry = {
+          id,
+          name: file.name.replace(/\.[^/.]+$/, ""),
+          previewUrl: URL.createObjectURL(file),
+          state: "uploading",
+        };
+
+        if (!isAllowedMediaUpload(file.type)) {
+          accepted.push({
+            file,
+            entry: {
+              ...base,
+              state: "error",
+              error: `Nicht unterstützt (${file.type || "unbekannt"}). Erlaubt: ${MEDIA_UPLOAD_EXTENSIONS_LABEL}.`,
+            },
+          });
+          continue;
+        }
+        if (file.size > MEDIA_UPLOAD_MAX_BYTES) {
+          accepted.push({
+            file,
+            entry: {
+              ...base,
+              state: "error",
+              error: `Zu groß (${formatFileSize(file.size)}). Maximal ${MEDIA_UPLOAD_MAX_LABEL}.`,
+            },
+          });
+          continue;
+        }
+        accepted.push({ file, entry: base });
+      }
+
+      setQueue((current) => [
+        ...current,
+        ...accepted.map((item) => item.entry),
+      ]);
+
+      for (const item of accepted) {
+        if (item.entry.state === "uploading") {
+          void uploadFile(item.file, item.entry.id);
+        }
+      }
+    },
+    [uploadFile],
+  );
+
+  const handleDrop = useCallback(
+    (event: React.DragEvent) => {
+      event.preventDefault();
+      event.stopPropagation();
+      setIsDragging(false);
+      dragCounterRef.current = 0;
+      const files = Array.from(event.dataTransfer.files ?? []);
+      if (files.length > 0) addFiles(files);
+    },
+    [addFiles],
+  );
+
+  const removeEntry = (id: string) => {
+    setQueue((current) => {
+      const entry = current.find((item) => item.id === id);
+      if (entry) URL.revokeObjectURL(entry.previewUrl);
+      return current.filter((item) => item.id !== id);
+    });
+  };
+
+  const savable = queue.filter(
+    (entry) => entry.state === "ready" && entry.name.trim(),
+  );
+
+  const handleSaveAll = async () => {
+    if (savable.length === 0) return;
+    setIsSaving(true);
+
+    let saved = 0;
+    // Nacheinander statt parallel: `filename` ist in der Datenbank eindeutig,
+    // und gesammelte Fehler lassen sich so der richtigen Zeile zuordnen.
+    for (const entry of savable) {
+      try {
+        await createMutation.mutateAsync({
+          name: entry.name.trim(),
+          filename: entry.uploaded!.filename,
+          url: entry.uploaded!.url,
+          path: entry.uploaded!.path,
+          mimeType: entry.uploaded!.mimeType,
+          size: entry.uploaded!.size,
+          extension: entry.uploaded!.extension,
+          width: entry.uploaded!.width,
+          height: entry.uploaded!.height,
+          copyright: copyright.trim() || undefined,
+          creator: creator.trim() || undefined,
+        });
+        patch(entry.id, { state: "saved" });
+        saved += 1;
+      } catch (error) {
+        patch(entry.id, {
+          state: "error",
+          error:
+            error instanceof Error ? error.message : "Speichern fehlgeschlagen",
+        });
+      }
+    }
+
+    setIsSaving(false);
+    void utils.media.getAll.invalidate();
+    void utils.media.getStatistics.invalidate();
+
+    if (saved > 0) {
+      toast.success(
+        saved === 1 ? "Medium hochgeladen" : `${saved} Medien hochgeladen`,
+      );
+    }
+    // Nur schließen, wenn nichts mehr offen ist — sonst verschwände die
+    // Fehlermeldung zu den Dateien, die es nicht geschafft haben.
+    if (saved === savable.length) onClose();
+  };
+
+  const pendingUploads = queue.some((entry) => entry.state === "uploading");
+
+  return (
+    <ScrollableModal onClose={isSaving ? undefined : onClose}>
+      <ScrollableModalCard maxW="2xl">
+        <ScrollableModalHeader>
+          <h2 className="dark:text-dark-text text-xl font-semibold text-gray-900">
+            Medien hochladen
+          </h2>
+        </ScrollableModalHeader>
+
+        <ScrollableModalBody className="space-y-4">
+          <div
+            onDragEnter={(event) => {
+              event.preventDefault();
+              dragCounterRef.current += 1;
+              if (event.dataTransfer.types.includes("Files"))
+                setIsDragging(true);
+            }}
+            onDragLeave={(event) => {
+              event.preventDefault();
+              dragCounterRef.current -= 1;
+              if (dragCounterRef.current === 0) setIsDragging(false);
+            }}
+            onDragOver={(event) => {
+              event.preventDefault();
+              event.dataTransfer.dropEffect = "copy";
+            }}
+            onDrop={handleDrop}
+            className={`rounded-lg border-2 border-dashed p-6 text-center transition-colors ${
+              isDragging
+                ? "border-primary bg-primary/5"
+                : "dark:border-dark-border border-gray-300"
+            }`}
+          >
+            <ArrowUpIcon className="mx-auto h-8 w-8 text-gray-400" />
+            <p className="dark:text-dark-text mt-2 text-sm font-medium text-gray-900">
+              Dateien hierher ziehen
+            </p>
+            <p className="dark:text-dark-muted mt-1 text-xs text-gray-500">
+              {MEDIA_UPLOAD_EXTENSIONS_LABEL}, bis {MEDIA_UPLOAD_MAX_LABEL} je
+              Datei
+            </p>
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              className="mt-3"
+              onClick={() => fileInputRef.current?.click()}
+            >
+              Dateien auswählen
+            </Button>
+            <input
+              ref={fileInputRef}
+              type="file"
+              multiple
+              accept={MEDIA_UPLOAD_ACCEPT}
+              className="hidden"
+              onChange={(event) => {
+                const files = Array.from(event.target.files ?? []);
+                if (files.length > 0) addFiles(files);
+                event.target.value = "";
+              }}
+            />
+          </div>
+
+          {queue.length > 0 && (
+            <ul className="space-y-2">
+              {queue.map((entry) => (
+                <li
+                  key={entry.id}
+                  className="dark:border-dark-border flex items-center gap-3 rounded-lg border border-gray-200 p-2"
+                >
+                  <div className="relative h-12 w-12 shrink-0 overflow-hidden rounded bg-gray-100 dark:bg-gray-800">
+                    {/* Lokale Vorschau aus dem Blob — next/image kann object
+                        URLs nicht optimieren, hier also bewusst ein <img>. */}
+                    {/* eslint-disable-next-line @next/next/no-img-element */}
+                    <img
+                      src={entry.previewUrl}
+                      alt=""
+                      className="h-full w-full object-cover"
+                    />
+                  </div>
+
+                  <div className="min-w-0 flex-1">
+                    <Input
+                      value={entry.name}
+                      onChange={(event) =>
+                        patch(entry.id, { name: event.target.value })
+                      }
+                      disabled={entry.state === "saved"}
+                      aria-label="Name des Mediums"
+                      className="py-1 text-sm"
+                    />
+                    {entry.error && (
+                      <p className="mt-1 text-xs text-red-600">{entry.error}</p>
+                    )}
+                  </div>
+
+                  <div className="flex w-8 shrink-0 justify-center">
+                    {entry.state === "uploading" && (
+                      <Loader2Icon className="h-4 w-4 animate-spin text-gray-400" />
+                    )}
+                    {entry.state === "saved" && (
+                      <CheckIcon className="h-4 w-4 text-green-600" />
+                    )}
+                    {(entry.state === "ready" || entry.state === "error") && (
+                      <button
+                        type="button"
+                        onClick={() => removeEntry(entry.id)}
+                        title="Entfernen"
+                        className="rounded p-1 text-gray-400 hover:bg-gray-100 hover:text-gray-700 dark:hover:bg-gray-700"
+                      >
+                        <XIcon className="h-4 w-4" />
+                      </button>
+                    )}
+                  </div>
+                </li>
+              ))}
+            </ul>
+          )}
+
+          {queue.length > 0 && (
+            <div className="dark:border-dark-border grid gap-4 border-t border-gray-200 pt-4 sm:grid-cols-2">
+              <div>
+                <Label htmlFor="uploadCopyright">Copyright</Label>
+                <Input
+                  id="uploadCopyright"
+                  value={copyright}
+                  onChange={(event) => setCopyright(event.target.value)}
+                  placeholder="z. B. © 2025 Posaunenwerk"
+                />
+              </div>
+              <div>
+                <Label htmlFor="uploadCreator">Fotograf:in</Label>
+                <Input
+                  id="uploadCreator"
+                  value={creator}
+                  onChange={(event) => setCreator(event.target.value)}
+                  placeholder="Name der Urheberin"
+                />
+              </div>
+              <p className="dark:text-dark-muted text-xs text-gray-500 sm:col-span-2">
+                Gilt für alle Dateien in dieser Liste; einzeln anpassen lässt es
+                sich danach über „Bearbeiten“.
+              </p>
+            </div>
+          )}
+        </ScrollableModalBody>
+
+        <ScrollableModalFooter>
+          <div className="flex items-center justify-end gap-3">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={onClose}
+              disabled={isSaving}
+            >
+              Abbrechen
+            </Button>
+            <Button
+              size="sm"
+              onClick={() => void handleSaveAll()}
+              disabled={savable.length === 0 || pendingUploads || isSaving}
+              isLoading={isSaving}
+            >
+              {savable.length > 1
+                ? `${savable.length} Medien speichern`
+                : "Speichern"}
+            </Button>
+          </div>
+        </ScrollableModalFooter>
+      </ScrollableModalCard>
+    </ScrollableModal>
+  );
+}
diff --git a/src/app/_components/media/use-replace-media-file.ts b/src/app/_components/media/use-replace-media-file.ts
new file mode 100644
index 00000000..d88889bc
--- /dev/null
+++ b/src/app/_components/media/use-replace-media-file.ts
@@ -0,0 +1,86 @@
+"use client";
+
+import { useCallback, useState } from "react";
+import { api } from "@/trpc/react";
+import { useToast } from "@/app/_components/ui/toast";
+
+type UploadResponse = {
+  url: string;
+  path: string;
+  filename: string;
+  size: number;
+  mimeType: string;
+  extension: string;
+  error?: string;
+};
+
+/**
+ * Zugeschnittenes Bild hochladen und die alte Datei ersetzen.
+ *
+ * Als Hook, weil der Zuschnitt an zwei Stellen angeboten wird: als eigene
+ * Aktion an der Kachel und innerhalb des Bearbeiten-Dialogs. Der Server setzt
+ * dabei den Fokuspunkt zurück — er zeigte auf einen Ausschnitt, den es nach dem
+ * Zuschneiden nicht mehr gibt. `onReplaced` gibt dem Aufrufer die Gelegenheit,
+ * ein offenes Formular nachzuziehen.
+ */
+export function useReplaceMediaFile(onReplaced?: () => void) {
+  const toast = useToast();
+  const utils = api.useUtils();
+  const [isUploading, setIsUploading] = useState(false);
+
+  const replaceFileMutation = api.media.replaceFile.useMutation({
+    onSuccess: () => {
+      void utils.media.getAll.invalidate();
+      toast.success("Bild wurde zugeschnitten und ersetzt");
+      onReplaced?.();
+    },
+    onError: (error) => toast.error(error.message),
+    onSettled: () => setIsUploading(false),
+  });
+
+  const replace = useCallback(
+    async (
+      id: string,
+      blob: Blob,
+      suggestedFilename: string,
+      width: number,
+      height: number,
+    ) => {
+      setIsUploading(true);
+      try {
+        const formData = new FormData();
+        formData.append("file", blob, suggestedFilename);
+        formData.append("folder", "media");
+
+        const response = await fetch("/api/upload", {
+          method: "POST",
+          body: formData,
+        });
+        const payload = (await response.json()) as UploadResponse;
+        if (!response.ok) {
+          throw new Error(payload.error ?? "Upload fehlgeschlagen");
+        }
+
+        replaceFileMutation.mutate({
+          id,
+          url: payload.url,
+          path: payload.path,
+          filename: payload.filename,
+          size: payload.size,
+          mimeType: payload.mimeType,
+          extension: payload.extension,
+          width,
+          height,
+        });
+      } catch (error) {
+        setIsUploading(false);
+        toast.error(
+          error instanceof Error ? error.message : "Fehler beim Hochladen",
+        );
+      }
+    },
+    [replaceFileMutation, toast],
+  );
+
+  return { replace, isBusy: isUploading || replaceFileMutation.isPending };
+}
diff --git a/src/app/_components/ui/scrollable-modal.tsx b/src/app/_components/ui/scrollable-modal.tsx
index d63041ac..ec6f3fab 100644
--- a/src/app/_components/ui/scrollable-modal.tsx
+++ b/src/app/_components/ui/scrollable-modal.tsx
@@ -1,5 +1,7 @@
 "use client";
 
+import { useEffect } from "react";
+
 /**
  * Mobile-first modal: overlay scrolls when content is tall, inner card is
  * max-h-[90vh] with scrollable body and sticky footer so actions stay visible.
@@ -9,18 +11,34 @@ const Z_DEFAULT = "z-50";
 export function ScrollableModal({
   children,
   onBackdropClick,
+  onClose,
   className = "",
   zIndex = Z_DEFAULT,
 }: {
   children: React.ReactNode;
   onBackdropClick?: () => void;
+  /**
+   * Schließt den Dialog per Klick auf den Hintergrund *und* per Escape. Wo nur
+   * `onBackdropClick` gesetzt ist, bleibt es beim bisherigen Verhalten — ein
+   * Formular mit ungesicherten Eingaben soll nicht versehentlich weggehen.
+   */
+  onClose?: () => void;
   className?: string;
   zIndex?: string;
 }) {
+  useEffect(() => {
+    if (!onClose) return;
+    function handleKeyDown(event: KeyboardEvent) {
+      if (event.key === "Escape") onClose!();
+    }
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [onClose]);
+
   return (
     <div
       className={`fixed inset-0 ${zIndex} flex min-h-full items-start justify-center overflow-y-auto bg-black/50 p-4 py-6 sm:items-center sm:py-4 ${className}`}
-      onClick={onBackdropClick}
+      onClick={onBackdropClick ?? onClose}
     >
       {children}
     </div>
diff --git a/src/app/dashboard/media/page.tsx b/src/app/dashboard/media/page.tsx
index 73f88627..3476b6f9 100644
--- a/src/app/dashboard/media/page.tsx
+++ b/src/app/dashboard/media/page.tsx
@@ -2,125 +2,114 @@
 
 import { useSession } from "@/lib/auth";
 import { redirect } from "next/navigation";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { api } from "@/trpc/react";
 import { usePermissions } from "@/lib/use-permissions";
-import type { PermissionKey } from "@/lib/permissions";
-import Image from "next/image";
+import { PERMISSIONS } from "@/lib/permissions";
 import { DashboardPage } from "@/app/_components/dashboard";
+import {
+  DashboardListViewToggle,
+  useDashboardListView,
+} from "@/app/_components/dashboard/dashboard-list-view";
 import { ContentStatus } from "~/generated/prisma/enums";
 import { useToast } from "@/app/_components/ui/toast";
-import { CheckIcon, DownloadIcon, ImageIcon, PlusIcon } from "lucide-react";
-import { CropIcon, EditIcon, XIcon } from "lucide-react";
-import { TrashIcon } from "lucide-react";
+import { Button, Checkbox, Select } from "@/app/_components/ui";
+import {
+  DataTable,
+  createDataTableColumnHelper,
+  type DataTableColumn,
+} from "@/app/_components/ui/data-table";
+import ImageWithFallback from "@/app/_components/ui/image-with-fallback";
 import ImageCropEditor from "@/app/_components/posts/image-crop-editor";
-import { Button, Input, Label, Select } from "@/app/_components/ui";
-import { formatMediaTags, splitMediaTags } from "@/lib/media-tags";
-import { useMediaDownload } from "@/app/_components/media/use-media-download";
 import {
-  MEDIA_UPLOAD_ACCEPT,
-  MEDIA_UPLOAD_EXTENSIONS_LABEL,
-  MEDIA_UPLOAD_MAX_BYTES,
-  MEDIA_UPLOAD_MAX_LABEL,
-} from "@/lib/media-upload";
+  CheckIcon,
+  DownloadIcon,
+  EditIcon,
+  EyeIcon,
+  ImageIcon,
+  PlusIcon,
+  TrashIcon,
+  XIcon,
+} from "lucide-react";
+import type { PaginationState, SortingState } from "@tanstack/react-table";
+
+import { MediaGrid } from "@/app/_components/media/media-grid";
+import { MediaEditModal } from "@/app/_components/media/media-edit-modal";
+import { MediaUploadModal } from "@/app/_components/media/media-upload-modal";
+import { MediaPreviewModal } from "@/app/_components/media/media-preview-modal";
+import { MediaDeleteDialog } from "@/app/_components/media/media-delete-dialog";
+import { useMediaDownload } from "@/app/_components/media/use-media-download";
+import { useReplaceMediaFile } from "@/app/_components/media/use-replace-media-file";
 import {
-  ScrollableModal,
-  ScrollableModalCard,
-  ScrollableModalHeader,
-  ScrollableModalBody,
-  ScrollableModalFooter,
-} from "@/app/_components/ui/scrollable-modal";
-
-// Dashboard access is now controlled by permissions
-
-const statusLabels: Record<ContentStatus, string> = {
-  DRAFT: "Entwurf",
-  PENDING: "Ausstehend",
-  APPROVED: "Freigegeben",
-  REJECTED: "Abgelehnt",
-  ARCHIVED: "Archiviert",
-};
-
-const statusColors: Record<ContentStatus, string> = {
-  DRAFT: "bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300",
-  PENDING:
-    "bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400",
-  APPROVED:
-    "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400",
-  REJECTED: "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400",
-  ARCHIVED: "bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-400",
-};
-
-function formatFileSize(bytes: number | null): string {
-  if (!bytes) return "";
-  if (bytes < 1024) return `${bytes} B`;
-  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
-  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
-}
-
-function getMimeTypeIcon(mimeType: string): string {
-  if (mimeType.startsWith("image/")) return "🖼️";
-  if (mimeType.startsWith("video/")) return "🎬";
-  if (mimeType.startsWith("audio/")) return "🎵";
-  if (mimeType === "application/pdf") return "📄";
-  return "📎";
-}
-
-function getMimeTypeLabel(mimeType: string): string {
-  if (mimeType.startsWith("image/")) return "Bild";
-  if (mimeType.startsWith("video/")) return "Video";
-  if (mimeType.startsWith("audio/")) return "Audio";
-  if (mimeType === "application/pdf") return "PDF";
-  return "Datei";
-}
+  STATUS_ORDER,
+  formatDate,
+  formatFileSize,
+  getMimeTypeIcon,
+  getMimeTypeLabel,
+  statusColors,
+  statusLabels,
+  type MediaItem,
+} from "@/app/_components/media/media-shared";
+
+const column = createDataTableColumnHelper<MediaItem>();
+
+/** Die Spalten, nach denen der Server sortieren kann. */
+const SORTABLE_COLUMNS = {
+  createdAt: "createdAt",
+  name: "name",
+  size: "size",
+  status: "status",
+} as const;
+
+type SortableColumn = keyof typeof SORTABLE_COLUMNS;
+
+/**
+ * Schnellfilter der Redaktion. Die zwei „fehlt noch“-Filter laufen auf dem
+ * Server, damit sie über den gesamten Bestand greifen und nicht nur über die
+ * gerade geladene Seite.
+ */
+type QuickFilter = "all" | "pending" | "missingAlt" | "missingCopyright";
+
+const QUICK_FILTERS: { value: QuickFilter; label: string }[] = [
+  { value: "all", label: "Alle" },
+  { value: "pending", label: "Ausstehend" },
+  { value: "missingAlt", label: "Ohne Alt-Text" },
+  { value: "missingCopyright", label: "Ohne Urheberangabe" },
+];
 
 export default function DashboardMediaPage() {
   const { data: session, isPending } = useSession();
   const hasRedirected = useRef(false);
   const toast = useToast();
-  const { downloadOne } = useMediaDownload();
+  const utils = api.useUtils();
+  const { downloadOne, downloadMany, isBundling } = useMediaDownload();
+
+  const [view, setView] = useDashboardListView("dashboard:media:view", "cards");
 
   const [search, setSearch] = useState("");
   const [mimeTypeFilter, setMimeTypeFilter] = useState("");
   const [statusFilter, setStatusFilter] = useState<ContentStatus | "">("");
-  const [page, setPage] = useState(1);
-  const limit = 20;
-
-  const [showUploadModal, setShowUploadModal] = useState(false);
-  const [showDeleteModal, setShowDeleteModal] = useState<string | null>(null);
-  const [showPreviewModal, setShowPreviewModal] = useState<string | null>(null);
-  const [showEditModal, setShowEditModal] = useState<string | null>(null);
-  const [showRecropModal, setShowRecropModal] = useState<string | null>(null);
+  const [quickFilter, setQuickFilter] = useState<QuickFilter>("all");
+  const [folderFilter, setFolderFilter] = useState("");
+  const [sorting, setSorting] = useState<SortingState>([
+    { id: "createdAt", desc: true },
+  ]);
+  const [pagination, setPagination] = useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: 24,
+  });
 
-  const [isUploading, setIsUploading] = useState(false);
-  const [uploadError, setUploadError] = useState("");
-  const [newName, setNewName] = useState("");
-  const [newCopyright, setNewCopyright] = useState("");
-  const [newCreator, setNewCreator] = useState("");
-  const [uploadedFile, setUploadedFile] = useState<{
-    url: string;
-    filename: string;
-    size: number;
-    mimeType: string;
-    path: string;
-    extension: string;
-  } | null>(null);
-  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
 
-  const [editName, setEditName] = useState("");
-  const [editAlt, setEditAlt] = useState("");
-  const [editCaption, setEditCaption] = useState("");
-  const [editTitle, setEditTitle] = useState("");
-  const [editCopyright, setEditCopyright] = useState("");
-  const [editCreator, setEditCreator] = useState("");
-  const [editTags, setEditTags] = useState("");
-  const [editIsPublic, setEditIsPublic] = useState(true);
-  const [editError, setEditError] = useState("");
+  const [showUploadModal, setShowUploadModal] = useState(false);
+  const [deleteId, setDeleteId] = useState<string | null>(null);
+  const [previewId, setPreviewId] = useState<string | null>(null);
+  const [editId, setEditId] = useState<string | null>(null);
+  const [recropId, setRecropId] = useState<string | null>(null);
+  const [bulkDeleteOpen, setBulkDeleteOpen] = useState(false);
 
   const { data: profile, isLoading: profileLoading } =
-    api.users.getMyProfile.useQuery(undefined, {
-      enabled: !!session?.user,
-    });
+    api.users.getMyProfile.useQuery(undefined, { enabled: !!session?.user });
 
   const {
     hasDashboardAccess,
@@ -128,83 +117,104 @@ export default function DashboardMediaPage() {
     isLoading: permissionsLoading,
   } = usePermissions();
 
-  const hasApprovePermission = hasPermission("media.approve" as PermissionKey);
-  const hasDeletePermission =
-    hasPermission("media.delete" as PermissionKey) ||
-    hasPermission("media.manage" as PermissionKey);
-
-  const utils = api.useUtils();
+  const canApprove = hasPermission(PERMISSIONS.MEDIA_APPROVE);
+  const canDelete = hasPermission(PERMISSIONS.MEDIA_DELETE) || canApprove;
+  const canEdit = hasPermission(PERMISSIONS.MEDIA_EDIT) || canApprove;
+
+  /**
+   * Status- und „fehlt noch“-Filter gehen als Abfrageparameter mit. Früher
+   * filterte die Seite die geladenen Zeilen im Browser — bei 20 Zeilen pro
+   * Seite blieb „Ausstehend“ dann leer, obwohl auf Seite 3 welche lagen.
+   */
+  const statusArgument = useMemo(() => {
+    if (quickFilter === "pending") return [ContentStatus.PENDING];
+    if (statusFilter) return [statusFilter];
+    return undefined;
+  }, [quickFilter, statusFilter]);
+
+  const sortBy = (sorting[0]?.id ?? "createdAt") as SortableColumn;
+
+  const queryInput = {
+    page: pagination.pageIndex + 1,
+    limit: pagination.pageSize,
+    mimeType: mimeTypeFilter || undefined,
+    folder: folderFilter || undefined,
+    search: search || undefined,
+    status: statusArgument,
+    missing:
+      quickFilter === "missingAlt"
+        ? ("alt" as const)
+        : quickFilter === "missingCopyright"
+          ? ("copyright" as const)
+          : undefined,
+    sortBy: SORTABLE_COLUMNS[sortBy] ?? ("createdAt" as const),
+    sortOrder: (sorting[0]?.desc === false ? "asc" : "desc") as "asc" | "desc",
+    includeAll: true,
+  };
 
-  const { data, isLoading } = api.media.getAll.useQuery(
-    {
-      page,
-      limit,
-      mimeType: mimeTypeFilter || undefined,
-      search: search || undefined,
-      // Der Statusfilter läuft auf dem Server. Im Browser angewandt betraf er
-      // nur die geladene Seite: "Ausstehend" blieb leer, obwohl auf Seite 3
-      // welche lagen, und die Seitenzahl darunter zählte trotzdem alle.
-      status: statusFilter ? [statusFilter] : undefined,
-      includeAll: true,
-    },
-    { enabled: !!profile },
-  );
+  const { data, isLoading } = api.media.getAll.useQuery(queryInput, {
+    enabled: !!profile,
+  });
 
   const { data: statistics } = api.media.getStatistics.useQuery(undefined, {
     enabled: !!profile,
   });
-
-  const createMutation = api.media.create.useMutation({
-    onSuccess: () => {
-      void utils.media.getAll.invalidate();
-      void utils.media.getStatistics.invalidate();
-      resetUploadForm();
-      setShowUploadModal(false);
-      toast.success("Medium erfolgreich hochgeladen");
-    },
-    onError: (error) => {
-      setUploadError(error.message);
-      toast.error(error.message);
-    },
+  const { data: folders } = api.media.getFolders.useQuery(undefined, {
+    enabled: !!profile,
   });
 
+  const mediaList = useMemo(() => data?.media ?? [], [data]);
+
+  const invalidate = () => {
+    void utils.media.getAll.invalidate();
+    void utils.media.getStatistics.invalidate();
+  };
+
   const deleteMutation = api.media.delete.useMutation({
     onSuccess: () => {
-      void utils.media.getAll.invalidate();
-      void utils.media.getStatistics.invalidate();
-      setShowDeleteModal(null);
+      invalidate();
+      setDeleteId(null);
       toast.success("Medium gelöscht");
     },
+    onError: (error) => toast.error(error.message),
+  });
+
+  const bulkDeleteMutation = api.media.bulkDelete.useMutation({
+    onSuccess: (result) => {
+      invalidate();
+      setSelectedIds(new Set());
+      setBulkDeleteOpen(false);
+      toast.success(
+        result.skipped > 0
+          ? `${result.deleted} gelöscht, ${result.skipped} ohne Berechtigung übersprungen`
+          : `${result.deleted} Medien gelöscht`,
+      );
+    },
+    onError: (error) => toast.error(error.message),
   });
 
   const reviewMutation = api.media.review.useMutation({
     onSuccess: () => {
-      void utils.media.getAll.invalidate();
+      invalidate();
       toast.success("Status aktualisiert");
     },
+    onError: (error) => toast.error(error.message),
   });
 
-  const updateMutation = api.media.update.useMutation({
-    onSuccess: () => {
-      void utils.media.getAll.invalidate();
-      setShowEditModal(null);
-      toast.success("Änderungen gespeichert");
-    },
-    onError: (error) => {
-      setEditError(error.message);
-      toast.error(error.message);
+  const bulkReviewMutation = api.media.bulkReview.useMutation({
+    onSuccess: (result) => {
+      invalidate();
+      setSelectedIds(new Set());
+      toast.success(`${result.updated} Medien aktualisiert`);
     },
+    onError: (error) => toast.error(error.message),
   });
 
-  const replaceFileMutation = api.media.replaceFile.useMutation({
-    onSuccess: () => {
-      void utils.media.getAll.invalidate();
-      setShowRecropModal(null);
-      toast.success("Bild wurde zugeschnitten und ersetzt");
-    },
-    onError: (error) => {
-      toast.error(error.message ?? "Ersetzen fehlgeschlagen");
-    },
+  // Zuschnitt direkt aus der Übersicht (Kachel oder Tabellenzeile). Im
+  // Bearbeiten-Dialog steckt derselbe Hook, dort aber über dem Formular.
+  const { replace: replaceFile } = useReplaceMediaFile(() => {
+    invalidate();
+    setRecropId(null);
   });
 
   useEffect(() => {
@@ -221,184 +231,224 @@ export default function DashboardMediaPage() {
     }
   }, [permissionsLoading, hasDashboardAccess]);
 
-  const resetUploadForm = () => {
-    setNewName("");
-    setNewCopyright("");
-    setNewCreator("");
-    setUploadedFile(null);
-    setUploadError("");
-    setIsUploading(false);
-    if (fileInputRef.current) {
-      fileInputRef.current.value = "";
-    }
-  };
-
-  const openEditModal = (media: NonNullable<typeof data>["media"][number]) => {
-    setEditName(media.name);
-    setEditAlt(media.alt ?? "");
-    setEditCaption(media.caption ?? "");
-    setEditTitle(media.title ?? "");
-    setEditCopyright(media.copyright ?? "");
-    setEditCreator(media.creator ?? "");
-    setEditTags(formatMediaTags(media.tags));
-    setEditIsPublic(media.isPublic);
-    setEditError("");
-    setShowEditModal(media.id);
-  };
-
-  const handleUpdate = () => {
-    if (!showEditModal) return;
-
-    const name = editName.trim();
-    if (!name) {
-      setEditError("Der Name darf nicht leer sein.");
-      return;
-    }
-
-    updateMutation.mutate({
-      id: showEditModal,
-      name,
-      // `|| null` statt `|| undefined`: ein geleertes Feld soll die Spalte
-      // leeren. `undefined` heißt für Prisma "nicht anfassen" — der Dialog
-      // meldete deshalb eine Änderung, die nie stattgefunden hat.
-      alt: editAlt.trim() || null,
-      caption: editCaption.trim() || null,
-      title: editTitle.trim() || null,
-      copyright: editCopyright.trim() || null,
-      creator: editCreator.trim() || null,
-      tags: splitMediaTags(editTags),
-      isPublic: editIsPublic,
+  const previewItem = mediaList.find((item) => item.id === previewId) ?? null;
+  const editItem = mediaList.find((item) => item.id === editId) ?? null;
+  const recropItem = mediaList.find((item) => item.id === recropId) ?? null;
+  const deleteItem = mediaList.find((item) => item.id === deleteId) ?? null;
+  const selectedItems = mediaList.filter((item) => selectedIds.has(item.id));
+
+  const toggleSelect = (id: string) => {
+    setSelectedIds((current) => {
+      const next = new Set(current);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
     });
   };
 
-  const recropItem = showRecropModal
-    ? data?.media.find((m) => m.id === showRecropModal)
-    : null;
+  const allOnPageSelected =
+    mediaList.length > 0 && mediaList.every((item) => selectedIds.has(item.id));
 
-  const handleCropComplete = async (
-    blob: Blob,
-    suggestedFilename: string,
-    width: number,
-    height: number,
-  ) => {
-    if (!showRecropModal) return;
-    try {
-      const formData = new FormData();
-      formData.append("file", blob, suggestedFilename);
-      formData.append("folder", "media");
-      const res = await fetch("/api/upload", {
-        method: "POST",
-        body: formData,
-      });
-      if (!res.ok) {
-        const err = await res.json().catch(() => ({}));
-        throw new Error(
-          (err as { error?: string }).error ?? "Upload fehlgeschlagen",
-        );
+  const toggleSelectPage = () => {
+    setSelectedIds((current) => {
+      const next = new Set(current);
+      if (allOnPageSelected) {
+        mediaList.forEach((item) => next.delete(item.id));
+      } else {
+        mediaList.forEach((item) => next.add(item.id));
       }
-      const uploadData = (await res.json()) as {
-        url: string;
-        path: string;
-        filename: string;
-        size: number;
-        mimeType: string;
-        extension: string;
-      };
-      replaceFileMutation.mutate({
-        id: showRecropModal,
-        url: uploadData.url,
-        path: uploadData.path,
-        filename: uploadData.filename,
-        size: uploadData.size,
-        mimeType: uploadData.mimeType,
-        extension: uploadData.extension,
-        width,
-        height,
-      });
-    } catch (e) {
-      toast.error(e instanceof Error ? e.message : "Fehler beim Hochladen");
-    }
-  };
-
-  const handleFileUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
-    const file = e.target.files?.[0];
-    if (!file) return;
-
-    if (file.size > MEDIA_UPLOAD_MAX_BYTES) {
-      setUploadError(
-        `Die Datei ist zu groß. Maximal ${MEDIA_UPLOAD_MAX_LABEL} erlaubt.`,
-      );
-      return;
-    }
-
-    setUploadError("");
-    setIsUploading(true);
-
-    try {
-      const formData = new FormData();
-      formData.append("file", file);
-      formData.append("folder", "media");
-
-      const response = await fetch("/api/upload", {
-        method: "POST",
-        body: formData,
-      });
-
-      const data = (await response.json()) as {
-        url: string;
-        filename: string;
-        size: number;
-        mimeType: string;
-        path: string;
-        extension: string;
-        error?: string;
-      };
-
-      if (!response.ok) {
-        // Die Route sagt genau, was nicht stimmt (Typ, Größe, Inhalt). Diese
-        // Meldung ging bisher verloren und wurde zu einem pauschalen
-        // "Upload fehlgeschlagen".
-        throw new Error(data.error ?? "Upload fehlgeschlagen");
-      }
-
-      setUploadedFile({
-        url: data.url,
-        filename: data.filename,
-        size: data.size,
-        mimeType: data.mimeType || file.type,
-        path: data.path || data.url,
-        extension: data.extension || file.name.split(".").pop() || "",
-      });
-
-      if (!newName) {
-        const baseName = file.name.replace(/\.[^/.]+$/, "");
-        setNewName(baseName);
-      }
-    } catch (error) {
-      setUploadError(
-        error instanceof Error ? error.message : "Upload fehlgeschlagen",
-      );
-    } finally {
-      setIsUploading(false);
-    }
-  };
-
-  const handleCreate = () => {
-    if (!uploadedFile || !newName) return;
-
-    createMutation.mutate({
-      name: newName,
-      filename: uploadedFile.filename,
-      url: uploadedFile.url,
-      path: uploadedFile.path,
-      mimeType: uploadedFile.mimeType,
-      size: uploadedFile.size,
-      extension: uploadedFile.extension,
-      copyright: newCopyright || undefined,
-      creator: newCreator || undefined,
+      return next;
     });
   };
 
+  const resetPage = () =>
+    setPagination((current) => ({ ...current, pageIndex: 0 }));
+
+  const columns = useMemo<DataTableColumn<MediaItem>[]>(
+    () =>
+      column.columns([
+        column.display({
+          id: "select",
+          header: () => (
+            <Checkbox
+              checked={allOnPageSelected}
+              onChange={toggleSelectPage}
+              aria-label="Alle auf dieser Seite auswählen"
+            />
+          ),
+          cell: ({ row }) => (
+            <Checkbox
+              checked={selectedIds.has(row.original.id)}
+              onChange={() => toggleSelect(row.original.id)}
+              aria-label={`${row.original.name} auswählen`}
+            />
+          ),
+          meta: { alwaysVisible: true, headerClassName: "w-10" },
+        }),
+        column.display({
+          id: "preview",
+          header: "",
+          cell: ({ row }) => (
+            <div className="relative h-10 w-10 overflow-hidden rounded bg-gray-100 dark:bg-gray-800">
+              {row.original.mimeType.startsWith("image/") ? (
+                <ImageWithFallback
+                  src={row.original.url}
+                  alt=""
+                  fill
+                  className="object-cover"
+                  sizes="40px"
+                />
+              ) : (
+                <span className="flex h-full items-center justify-center text-lg">
+                  {getMimeTypeIcon(row.original.mimeType)}
+                </span>
+              )}
+            </div>
+          ),
+          meta: { alwaysVisible: true, headerClassName: "w-14" },
+        }),
+        column.accessor((item) => item.name, {
+          id: "name",
+          header: "Name",
+          enableColumnFilter: false,
+          meta: { alwaysVisible: true },
+          cell: ({ row }) => (
+            <button
+              type="button"
+              onClick={() => setPreviewId(row.original.id)}
+              className="hover:text-primary max-w-[22ch] truncate text-left font-medium"
+              title={row.original.name}
+            >
+              {row.original.name}
+            </button>
+          ),
+        }),
+        column.accessor((item) => item.status, {
+          id: "status",
+          header: "Status",
+          enableColumnFilter: false,
+          cell: ({ row }) => (
+            <span
+              className={`inline-flex rounded-full px-2 py-0.5 text-xs font-medium ${statusColors[row.original.status]}`}
+            >
+              {statusLabels[row.original.status]}
+            </span>
+          ),
+        }),
+        column.accessor((item) => item.alt, {
+          id: "alt",
+          header: "Alt-Text",
+          enableSorting: false,
+          enableColumnFilter: false,
+          cell: ({ row }) =>
+            row.original.alt ? (
+              <span className="block max-w-[24ch] truncate">
+                {row.original.alt}
+              </span>
+            ) : (
+              <span className="text-xs font-medium text-amber-600 dark:text-amber-400">
+                fehlt
+              </span>
+            ),
+        }),
+        column.accessor(
+          (item) => [item.copyright, item.creator].filter(Boolean).join(" · "),
+          {
+            id: "rights",
+            header: "Urheber",
+            enableSorting: false,
+            enableColumnFilter: false,
+            cell: ({ getValue }) =>
+              getValue() ? (
+                <span className="block max-w-[22ch] truncate">
+                  {getValue()}
+                </span>
+              ) : (
+                <span className="text-xs font-medium text-amber-600 dark:text-amber-400">
+                  fehlt
+                </span>
+              ),
+          },
+        ),
+        column.accessor((item) => item.mimeType, {
+          id: "type",
+          header: "Typ",
+          enableSorting: false,
+          enableColumnFilter: false,
+          cell: ({ getValue }) => getMimeTypeLabel(getValue()),
+        }),
+        column.accessor((item) => item.size, {
+          id: "size",
+          header: "Größe",
+          enableColumnFilter: false,
+          meta: { align: "right", cellClassName: "tabular-nums" },
+          cell: ({ getValue }) => formatFileSize(getValue()),
+        }),
+        column.accessor((item) => item.uploadedBy?.displayName ?? "—", {
+          id: "uploadedBy",
+          header: "Hochgeladen von",
+          enableSorting: false,
+          enableColumnFilter: false,
+        }),
+        column.accessor((item) => item.createdAt, {
+          id: "createdAt",
+          header: "Datum",
+          enableColumnFilter: false,
+          meta: { cellClassName: "whitespace-nowrap tabular-nums" },
+          cell: ({ getValue }) => formatDate(getValue()),
+        }),
+        column.display({
+          id: "actions",
+          header: "",
+          cell: ({ row }) => (
+            <div className="flex justify-end gap-0.5">
+              <IconAction
+                label="Vorschau"
+                icon={EyeIcon}
+                onClick={() => setPreviewId(row.original.id)}
+              />
+              <IconAction
+                label="Herunterladen"
+                icon={DownloadIcon}
+                onClick={() => downloadOne(row.original)}
+              />
+              {canEdit && (
+                <IconAction
+                  label="Bearbeiten"
+                  icon={EditIcon}
+                  onClick={() => setEditId(row.original.id)}
+                />
+              )}
+              {canApprove && row.original.status === ContentStatus.PENDING && (
+                <IconAction
+                  label="Freigeben"
+                  icon={CheckIcon}
+                  tone="success"
+                  onClick={() =>
+                    reviewMutation.mutate({
+                      id: row.original.id,
+                      status: ContentStatus.APPROVED,
+                    })
+                  }
+                />
+              )}
+              {canDelete && (
+                <IconAction
+                  label="Löschen"
+                  icon={TrashIcon}
+                  tone="danger"
+                  onClick={() => setDeleteId(row.original.id)}
+                />
+              )}
+            </div>
+          ),
+          meta: { alwaysVisible: true, align: "right" },
+        }),
+      ]),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [selectedIds, allOnPageSelected, canEdit, canDelete, canApprove, mediaList],
+  );
+
   if (isPending || profileLoading || permissionsLoading) {
     return (
       <div className="dark:bg-dark-background flex min-h-screen items-center justify-center bg-gray-50">
@@ -407,743 +457,505 @@ export default function DashboardMediaPage() {
     );
   }
 
-  if (!session || !profile || !hasDashboardAccess) {
-    return null;
-  }
-
-  const filteredMedia = data?.media;
-
-  const isReviewer = hasApprovePermission;
-  const canDelete = hasDeletePermission;
-
-  const previewItem = showPreviewModal
-    ? data?.media.find((m) => m.id === showPreviewModal)
-    : null;
+  if (!session || !profile || !hasDashboardAccess) return null;
 
   return (
     <>
       <DashboardPage
         title="Medien verwalten"
-        description="Lade Bilder und andere Medien hoch"
+        description="Bilder hochladen, beschreiben und freigeben"
         breadcrumbs={[
           { label: "Dashboard", href: "/dashboard" },
-          { label: "Media" },
+          { label: "Medien" },
         ]}
         actions={
-          <button
-            onClick={() => setShowUploadModal(true)}
-            className="bg-primary hover:bg-primary/90 inline-flex items-center gap-2 rounded-md px-4 py-2 text-sm font-medium text-white transition-colors"
-          >
-            <PlusIcon className="h-5 w-5" />
-            Neues Medium
-          </button>
+          <Button onClick={() => setShowUploadModal(true)}>
+            <PlusIcon className="mr-1.5 h-5 w-5" />
+            Medien hochladen
+          </Button>
         }
       >
-        {/* Statistics */}
         {statistics && (
-          <div className="mb-6 grid grid-cols-2 gap-4 sm:grid-cols-4">
-            <div className="dark:bg-dark-surface dark:border-dark-border rounded-lg border border-gray-200 bg-white p-4 shadow-sm">
-              <p className="dark:text-dark-muted text-sm text-gray-500">
-                Gesamt
-              </p>
-              <p className="dark:text-dark-text text-2xl font-bold text-gray-900">
-                {statistics.totalMedia}
-              </p>
-            </div>
-            <div className="dark:bg-dark-surface dark:border-dark-border rounded-lg border border-gray-200 bg-white p-4 shadow-sm">
-              <p className="dark:text-dark-muted text-sm text-gray-500">
-                Bilder
-              </p>
-              <p className="dark:text-dark-text text-2xl font-bold text-gray-900">
-                {statistics.imageCount}
-              </p>
-            </div>
-            <div className="dark:bg-dark-surface dark:border-dark-border rounded-lg border border-gray-200 bg-white p-4 shadow-sm">
-              <p className="dark:text-dark-muted text-sm text-gray-500">
-                Videos
-              </p>
-              <p className="dark:text-dark-text text-2xl font-bold text-gray-900">
-                {statistics.videoCount}
-              </p>
-            </div>
-            <div className="dark:bg-dark-surface dark:border-dark-border rounded-lg border border-gray-200 bg-white p-4 shadow-sm">
-              <p className="dark:text-dark-muted text-sm text-gray-500">
-                Speicher
-              </p>
-              <p className="dark:text-dark-text text-2xl font-bold text-gray-900">
-                {formatFileSize(statistics.totalSize)}
-              </p>
-            </div>
+          <div className="mb-6 grid grid-cols-2 gap-3 sm:grid-cols-4">
+            <StatCard label="Gesamt" value={statistics.totalMedia} />
+            <StatCard
+              label="Speicher"
+              value={formatFileSize(statistics.totalSize)}
+            />
+            <StatCard
+              label="Ausstehend"
+              value={statistics.pendingCount}
+              tone={statistics.pendingCount > 0 ? "warning" : "default"}
+              onClick={() => {
+                setQuickFilter("pending");
+                setStatusFilter("");
+                resetPage();
+              }}
+            />
+            <StatCard
+              label="Ohne Alt-Text"
+              value={statistics.missingAltCount}
+              tone={statistics.missingAltCount > 0 ? "warning" : "default"}
+              onClick={() => {
+                setQuickFilter("missingAlt");
+                setStatusFilter("");
+                resetPage();
+              }}
+            />
           </div>
         )}
 
-        {/* Filters */}
-        <div className="dark:bg-dark-surface dark:border-dark-border mb-6 rounded-lg border border-gray-200 bg-white p-4 shadow-sm">
-          <div className="flex flex-col gap-4 sm:flex-row sm:items-center">
-            {/* Search */}
-            <div className="flex-1">
-              <input
-                type="text"
-                placeholder="Suchen..."
-                value={search}
-                onChange={(e) => {
-                  setSearch(e.target.value);
-                  setPage(1);
-                }}
-                className="dark:bg-dark-background dark:border-dark-border dark:text-dark-text focus:border-primary focus:ring-primary w-full rounded-lg border border-gray-300 px-4 py-2 focus:ring-1 focus:outline-none"
-              />
-            </div>
-
-            {/* MIME Type Filter */}
-            <Select
-              value={mimeTypeFilter}
-              onChange={(e) => {
-                setMimeTypeFilter(e.target.value);
-                setPage(1);
+        {/* Filterleiste. Die Auswahlfelder tragen eine feste Breite: als reine
+            `w-full`-Elemente in einer Flex-Zeile drängten sie das Suchfeld auf
+            34 Pixel zusammen. */}
+        <div className="dark:bg-dark-surface dark:border-dark-border mb-4 space-y-3 rounded-lg border border-gray-200 bg-white p-4 shadow-sm">
+          <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
+            <input
+              type="text"
+              placeholder="Suchen …"
+              value={search}
+              onChange={(event) => {
+                setSearch(event.target.value);
+                resetPage();
               }}
-              className="dark:bg-dark-background dark:border-dark-border dark:text-dark-text focus:border-primary focus:ring-primary rounded-lg border border-gray-300 px-4 py-2 focus:ring-1 focus:outline-none"
-            >
-              <option value="">Alle Typen</option>
-              <option value="image">Bilder</option>
-              <option value="video">Videos</option>
-              <option value="audio">Audio</option>
-              <option value="application/pdf">PDF</option>
-            </Select>
-
-            {/* Status Filter */}
-            {isReviewer && (
-              <Select
-                value={statusFilter}
-                onChange={(e) => {
-                  setStatusFilter(e.target.value as ContentStatus | "");
-                  setPage(1);
-                }}
-                className="dark:bg-dark-background dark:border-dark-border dark:text-dark-text focus:border-primary focus:ring-primary rounded-lg border border-gray-300 px-4 py-2 focus:ring-1 focus:outline-none"
-              >
-                <option value="">Alle Status</option>
-                {Object.entries(statusLabels).map(([value, label]) => (
-                  <option key={value} value={value}>
-                    {label}
-                  </option>
-                ))}
-              </Select>
-            )}
-          </div>
-        </div>
-
-        {/* Media Grid */}
-        {isLoading ? (
-          <div className="flex items-center justify-center py-12">
-            <div className="border-primary h-8 w-8 animate-spin rounded-full border-b-2" />
-          </div>
-        ) : !filteredMedia?.length ? (
-          <div className="dark:bg-dark-surface dark:border-dark-border rounded-lg border border-gray-200 bg-white p-12 text-center shadow-sm">
-            <ImageIcon className="mx-auto h-12 w-12 text-gray-400" />
-            <p className="dark:text-dark-muted mt-4 text-gray-500">
-              Keine Medien gefunden
-            </p>
-          </div>
-        ) : (
-          <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
-            {filteredMedia.map((media) => (
-              <div
-                key={media.id}
-                className="dark:bg-dark-surface dark:border-dark-border group relative overflow-hidden rounded-lg border border-gray-200 bg-white shadow-sm transition-shadow hover:shadow-md"
-              >
-                {/* Preview */}
-                <div
-                  className="relative aspect-square cursor-pointer overflow-hidden bg-gray-100 dark:bg-gray-800"
-                  onClick={() => setShowPreviewModal(media.id)}
+              className="dark:bg-dark-background dark:border-dark-border dark:text-dark-text focus:border-primary focus:ring-primary min-w-0 flex-1 rounded-lg border border-gray-300 px-4 py-2 focus:ring-1 focus:outline-none"
+            />
+            <div className="flex shrink-0 flex-wrap items-center gap-3">
+              <div className="w-40">
+                <Select
+                  value={mimeTypeFilter}
+                  onChange={(event) => {
+                    setMimeTypeFilter(event.target.value);
+                    resetPage();
+                  }}
                 >
-                  {media.mimeType.startsWith("image/") ? (
-                    <Image
-                      src={media.url}
-                      alt={media.name}
-                      fill
-                      className="object-cover transition-transform group-hover:scale-105"
-                      style={
-                        media.focalPointX != null && media.focalPointY != null
-                          ? {
-                              objectPosition: `${media.focalPointX}% ${media.focalPointY}%`,
-                            }
-                          : undefined
-                      }
-                      sizes="(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 20vw"
-                    />
-                  ) : (
-                    <div className="flex h-full items-center justify-center text-4xl">
-                      {getMimeTypeIcon(media.mimeType)}
-                    </div>
-                  )}
-                  {/* Status Badge */}
-                  <div className="absolute top-2 left-2">
-                    <span
-                      className={`inline-flex rounded-full px-2 py-0.5 text-xs font-medium ${statusColors[media.status]}`}
-                    >
-                      {statusLabels[media.status]}
-                    </span>
-                  </div>
-                </div>
+                  <option value="">Alle Typen</option>
+                  <option value="image">Bilder</option>
+                  <option value="video">Videos</option>
+                  <option value="audio">Audio</option>
+                  <option value="application/pdf">PDF</option>
+                </Select>
+              </div>
 
-                {/* Info */}
-                <div className="p-3">
-                  <p
-                    className="dark:text-dark-text truncate text-sm font-medium text-gray-900"
-                    title={media.name}
+              {canApprove && (
+                <div className="w-40">
+                  <Select
+                    value={statusFilter}
+                    onChange={(event) => {
+                      setStatusFilter(event.target.value as ContentStatus | "");
+                      setQuickFilter("all");
+                      resetPage();
+                    }}
                   >
-                    {media.name}
-                  </p>
-                  <p className="dark:text-dark-muted text-xs text-gray-500">
-                    {getMimeTypeLabel(media.mimeType)}
-                    {media.size && ` • ${formatFileSize(media.size)}`}
-                  </p>
+                    <option value="">Alle Status</option>
+                    {STATUS_ORDER.map((status) => (
+                      <option key={status} value={status}>
+                        {statusLabels[status]}
+                      </option>
+                    ))}
+                  </Select>
                 </div>
+              )}
 
-                {/* Actions Overlay: always visible on touch/mobile, hover on desktop */}
-                <div className="absolute right-2 bottom-14 flex gap-1 opacity-100 transition-opacity md:opacity-0 md:group-hover:opacity-100">
-                  {/* Download der Originaldatei */}
-                  <Button
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      downloadOne(media);
+              {folders && folders.length > 0 && (
+                <div className="w-40">
+                  <Select
+                    value={folderFilter}
+                    onChange={(event) => {
+                      setFolderFilter(event.target.value);
+                      resetPage();
                     }}
-                    variant="secondary"
-                    size="icon"
-                    title="Herunterladen"
                   >
-                    <DownloadIcon className="h-4 w-4" />
-                  </Button>
-                  {/* Re-crop (real crop) for images */}
-                  {media.mimeType.startsWith("image/") && isReviewer && (
-                    <Button
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        setShowRecropModal(media.id);
-                      }}
-                      variant="secondary"
-                      size="icon"
-                      title="Bild zuschneiden"
-                    >
-                      <CropIcon className="h-4 w-4" />
-                    </Button>
-                  )}
-                  {/* Edit button for reviewers */}
-                  {isReviewer && (
-                    <Button
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        openEditModal(media);
-                      }}
-                      variant="secondary"
-                      size="icon"
-                      className="bg-gray-600 hover:bg-gray-700"
-                      title="Bearbeiten"
-                    >
-                      <EditIcon className="h-4 w-4" />
-                    </Button>
-                  )}
+                    <option value="">Alle Ordner</option>
+                    {folders.map((folder) => (
+                      <option key={folder} value={folder}>
+                        {folder}
+                      </option>
+                    ))}
+                  </Select>
+                </div>
+              )}
 
-                  {/* Approve button for reviewers */}
-                  {isReviewer && media.status === ContentStatus.PENDING && (
-                    <Button
-                      onClick={() =>
-                        reviewMutation.mutate({
-                          id: media.id,
-                          status: ContentStatus.APPROVED,
-                        })
-                      }
-                      disabled={reviewMutation.isPending}
-                      variant="success"
-                      size="icon"
-                      title="Freigeben"
-                    >
-                      <CheckIcon className="h-4 w-4" />
-                    </Button>
-                  )}
+              <DashboardListViewToggle view={view} onChange={setView} />
+            </div>
+          </div>
 
-                  {/* Delete button */}
-                  {canDelete && (
-                    <Button
-                      onClick={() => setShowDeleteModal(media.id)}
-                      variant="danger"
-                      size="icon"
-                      title="Löschen"
-                    >
-                      <TrashIcon className="h-4 w-4" />
-                    </Button>
-                  )}
-                </div>
-              </div>
+          <div className="flex flex-wrap gap-1.5">
+            {QUICK_FILTERS.map((filter) => (
+              <button
+                key={filter.value}
+                type="button"
+                onClick={() => {
+                  setQuickFilter(filter.value);
+                  if (filter.value !== "all") setStatusFilter("");
+                  resetPage();
+                }}
+                className={`rounded-full px-3 py-1 text-xs font-medium transition-colors ${
+                  quickFilter === filter.value
+                    ? "bg-primary text-white"
+                    : "dark:border-dark-border dark:text-dark-muted border border-gray-300 text-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700"
+                }`}
+              >
+                {filter.label}
+              </button>
             ))}
           </div>
-        )}
+        </div>
 
-        {/* Pagination */}
-        {data && data.pages > 1 && (
-          <div className="mt-6 flex items-center justify-between">
-            <p className="dark:text-dark-muted text-sm text-gray-600">
-              Seite {page} von {data.pages} ({data.total} Medien)
-            </p>
-            <div className="flex gap-2">
+        {/* Sammelaktionen. Erscheint nur mit Auswahl, damit die Leiste sonst
+            keinen Platz kostet. */}
+        {selectedIds.size > 0 && (
+          <div className="dark:bg-dark-surface dark:border-dark-border mb-4 flex flex-wrap items-center gap-3 rounded-lg border border-gray-200 bg-white p-3 shadow-sm">
+            <span className="dark:text-dark-text text-sm font-medium text-gray-900">
+              {selectedIds.size} ausgewählt
+            </span>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => void downloadMany(selectedItems)}
+              disabled={isBundling || selectedItems.length === 0}
+              isLoading={isBundling}
+            >
+              <DownloadIcon className="mr-1.5 h-4 w-4" />
+              Herunterladen
+            </Button>
+            {canApprove && (
               <Button
-                onClick={() => setPage((p) => Math.max(1, p - 1))}
-                disabled={page === 1}
-                variant="outline"
+                variant="success"
                 size="sm"
+                onClick={() =>
+                  bulkReviewMutation.mutate({
+                    ids: [...selectedIds],
+                    status: ContentStatus.APPROVED,
+                  })
+                }
+                disabled={bulkReviewMutation.isPending}
               >
-                Zurück
+                <CheckIcon className="mr-1.5 h-4 w-4" />
+                Freigeben
               </Button>
+            )}
+            {canDelete && (
               <Button
-                onClick={() => setPage((p) => Math.min(data.pages, p + 1))}
-                disabled={page === data.pages}
-                variant="outline"
+                variant="danger"
                 size="sm"
+                onClick={() => setBulkDeleteOpen(true)}
               >
-                Weiter
+                <TrashIcon className="mr-1.5 h-4 w-4" />
+                Löschen
               </Button>
-            </div>
+            )}
+            <Button
+              variant="outline"
+              size="sm"
+              className="ml-auto"
+              onClick={() => setSelectedIds(new Set())}
+            >
+              <XIcon className="mr-1.5 h-4 w-4" />
+              Auswahl aufheben
+            </Button>
           </div>
         )}
-      </DashboardPage>
 
-      {/* Upload Modal */}
-      {showUploadModal && (
-        <ScrollableModal>
-          <ScrollableModalCard>
-            <ScrollableModalHeader>
-              <h2 className="dark:text-dark-text text-xl font-semibold text-gray-900">
-                Neues Medium
-              </h2>
-            </ScrollableModalHeader>
-            <ScrollableModalBody className="space-y-4">
-              {/* File Upload */}
-              <div>
-                <Label>Datei</Label>
-                <input
-                  ref={fileInputRef}
-                  type="file"
-                  onChange={handleFileUpload}
-                  accept={MEDIA_UPLOAD_ACCEPT}
-                  className="dark:bg-dark-background dark:border-dark-border dark:text-dark-text w-full rounded-lg border border-gray-300 px-4 py-2"
-                />
-                <p className="dark:text-dark-muted mt-1 text-xs text-gray-500">
-                  {MEDIA_UPLOAD_EXTENSIONS_LABEL}, bis {MEDIA_UPLOAD_MAX_LABEL}
-                </p>
-                {isUploading && (
-                  <p className="mt-1 text-sm text-gray-500">Lädt hoch...</p>
-                )}
-                {uploadedFile && (
-                  <div className="mt-2">
-                    <p className="text-sm text-green-600">
-                      ✓ Datei hochgeladen
-                    </p>
-                    {uploadedFile.mimeType.startsWith("image/") && (
-                      <div className="relative mt-2 h-32 w-32 overflow-hidden rounded-lg">
-                        <Image
-                          src={uploadedFile.url}
-                          alt="Preview"
-                          fill
-                          className="object-cover"
-                        />
-                      </div>
-                    )}
-                  </div>
-                )}
-              </div>
-
-              {/* Name */}
-              <div>
-                <Label required>Name</Label>
-                <Input
-                  type="text"
-                  value={newName}
-                  onChange={(e) => setNewName(e.target.value)}
-                />
-              </div>
-
-              {/* Copyright */}
-              <div>
-                <Label>Copyright / Urheberrecht</Label>
-                <Input
-                  type="text"
-                  value={newCopyright}
-                  onChange={(e) => setNewCopyright(e.target.value)}
-                  placeholder="z. B. © 2025 Posaunenwerk"
-                  className="dark:bg-dark-background dark:border-dark-border dark:text-dark-text focus:border-primary focus:ring-primary"
-                />
-              </div>
-
-              {/* Creator / Photographer */}
-              <div>
-                <Label>Fotograf:in / Urheber:in</Label>
-                <Input
-                  type="text"
-                  value={newCreator}
-                  onChange={(e) => setNewCreator(e.target.value)}
-                  placeholder="Name des Fotografen oder der Fotografin"
-                  className="dark:bg-dark-background dark:border-dark-border dark:text-dark-text focus:border-primary focus:ring-primary"
+        {view === "table" ? (
+          <DataTable
+            data={mediaList}
+            columns={columns}
+            getRowId={(item) => item.id}
+            isLoading={isLoading}
+            rowNoun={["Medium", "Medien"]}
+            searchable={false}
+            pageSizeOptions={[24, 48, 96]}
+            emptyState={
+              <span className="flex flex-col items-center gap-2 text-gray-500 dark:text-gray-400">
+                <ImageIcon className="h-8 w-8" />
+                Keine Medien gefunden.
+              </span>
+            }
+            sorting={sorting}
+            onSortingChange={setSorting}
+            manualSorting
+            manualFiltering
+            pagination={pagination}
+            onPaginationChange={setPagination}
+            manualPagination
+            rowCount={data?.total ?? 0}
+          />
+        ) : isLoading ? (
+          <div className="flex items-center justify-center py-12">
+            <div className="border-primary h-8 w-8 animate-spin rounded-full border-b-2" />
+          </div>
+        ) : mediaList.length === 0 ? (
+          <div className="dark:bg-dark-surface dark:border-dark-border rounded-lg border border-gray-200 bg-white p-12 text-center shadow-sm">
+            <ImageIcon className="mx-auto h-12 w-12 text-gray-400" />
+            <p className="dark:text-dark-muted mt-4 text-gray-500">
+              Keine Medien gefunden
+            </p>
+          </div>
+        ) : (
+          <>
+            <div className="mb-3 flex items-center gap-3">
+              <label className="dark:text-dark-muted flex cursor-pointer items-center gap-2 text-sm text-gray-600">
+                <Checkbox
+                  checked={allOnPageSelected}
+                  onChange={toggleSelectPage}
                 />
-              </div>
-
-              {uploadError && (
-                <p className="text-sm text-red-600">{uploadError}</p>
-              )}
-            </ScrollableModalBody>
-            <ScrollableModalFooter>
-              <div className="flex justify-end gap-3">
-                <Button
-                  onClick={() => {
-                    resetUploadForm();
-                    setShowUploadModal(false);
-                  }}
-                  variant="outline"
-                  size="sm"
-                >
-                  Abbrechen
-                </Button>
-                <Button
-                  onClick={handleCreate}
-                  disabled={
-                    !uploadedFile || !newName || createMutation.isPending
-                  }
-                  isLoading={createMutation.isPending}
-                  size="sm"
-                >
-                  Speichern
-                </Button>
-              </div>
-            </ScrollableModalFooter>
-          </ScrollableModalCard>
-        </ScrollableModal>
-      )}
+                Alle auf dieser Seite
+              </label>
+            </div>
 
-      {/* Preview Modal */}
-      {showPreviewModal && previewItem && (
-        <ScrollableModal
-          onBackdropClick={() => setShowPreviewModal(null)}
-          className="bg-black/80"
-        >
-          <div
-            className="relative max-h-[90vh] max-w-[90vw]"
-            onClick={(e) => e.stopPropagation()}
-          >
-            {previewItem.mimeType.startsWith("image/") ? (
-              <Image
-                src={previewItem.url}
-                alt={previewItem.name}
-                width={1200}
-                height={800}
-                className="max-h-[80vh] w-auto rounded-lg object-contain"
-                style={
-                  previewItem.focalPointX != null &&
-                  previewItem.focalPointY != null
-                    ? {
-                        objectPosition: `${previewItem.focalPointX}% ${previewItem.focalPointY}%`,
-                      }
-                    : undefined
-                }
-              />
-            ) : previewItem.mimeType.startsWith("video/") ? (
-              <video
-                src={previewItem.url}
-                controls
-                className="max-h-[80vh] max-w-full rounded-lg"
-              />
-            ) : previewItem.mimeType.startsWith("audio/") ? (
-              <audio src={previewItem.url} controls className="w-96" />
-            ) : (
-              <div className="dark:bg-dark-surface rounded-lg bg-white p-8 text-center">
-                <span className="text-6xl">
-                  {getMimeTypeIcon(previewItem.mimeType)}
-                </span>
-                <p className="dark:text-dark-text mt-4 text-lg font-medium">
-                  {previewItem.name}
+            <MediaGrid
+              media={mediaList}
+              selectedIds={selectedIds}
+              onToggleSelect={toggleSelect}
+              onPreview={(item) => setPreviewId(item.id)}
+              onEdit={(item) => setEditId(item.id)}
+              onRecrop={(item) => setRecropId(item.id)}
+              onDelete={(item) => setDeleteId(item.id)}
+              onDownload={(item) => downloadOne(item)}
+              onApprove={(item) =>
+                reviewMutation.mutate({
+                  id: item.id,
+                  status: ContentStatus.APPROVED,
+                })
+              }
+              canEdit={canEdit}
+              canDelete={canDelete}
+              canApprove={canApprove}
+            />
+
+            {data && data.pages > 1 && (
+              <div className="mt-6 flex items-center justify-between">
+                <p className="dark:text-dark-muted text-sm text-gray-600">
+                  Seite {pagination.pageIndex + 1} von {data.pages} (
+                  {data.total} Medien)
                 </p>
-                <button
-                  onClick={() => downloadOne(previewItem)}
-                  className="text-primary mt-2 inline-block hover:underline"
-                >
-                  Herunterladen
-                </button>
-              </div>
-            )}
-
-            {/* Info */}
-            <div className="dark:bg-dark-surface absolute right-0 bottom-0 left-0 rounded-b-lg bg-white/90 p-4 backdrop-blur-sm">
-              <div className="flex items-center justify-between">
-                <div>
-                  <p className="dark:text-dark-text font-medium text-gray-900">
-                    {previewItem.name}
-                  </p>
-                  <p className="dark:text-dark-muted text-sm text-gray-500">
-                    {getMimeTypeLabel(previewItem.mimeType)}
-                    {previewItem.size &&
-                      ` • ${formatFileSize(previewItem.size)}`}
-                    {previewItem.uploadedBy &&
-                      ` • ${previewItem.uploadedBy.displayName}`}
-                  </p>
-                  {(previewItem.copyright || previewItem.creator) && (
-                    <p className="dark:text-dark-muted mt-1 text-xs text-gray-500">
-                      {[previewItem.copyright, previewItem.creator]
-                        .filter(Boolean)
-                        .join(" • ")}
-                    </p>
-                  )}
+                <div className="flex gap-2">
+                  <Button
+                    onClick={() =>
+                      setPagination((current) => ({
+                        ...current,
+                        pageIndex: Math.max(0, current.pageIndex - 1),
+                      }))
+                    }
+                    disabled={pagination.pageIndex === 0}
+                    variant="outline"
+                    size="sm"
+                  >
+                    Zurück
+                  </Button>
+                  <Button
+                    onClick={() =>
+                      setPagination((current) => ({
+                        ...current,
+                        pageIndex: Math.min(
+                          data.pages - 1,
+                          current.pageIndex + 1,
+                        ),
+                      }))
+                    }
+                    disabled={pagination.pageIndex >= data.pages - 1}
+                    variant="outline"
+                    size="sm"
+                  >
+                    Weiter
+                  </Button>
                 </div>
-                <span
-                  className={`inline-flex rounded-full px-2 py-1 text-xs font-medium ${statusColors[previewItem.status]}`}
-                >
-                  {statusLabels[previewItem.status]}
-                </span>
               </div>
-            </div>
+            )}
+          </>
+        )}
+      </DashboardPage>
 
-            {/* Close button */}
-            <button
-              onClick={() => setShowPreviewModal(null)}
-              className="absolute -top-2 -right-2 rounded-full bg-white p-2 shadow-lg hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700"
-            >
-              <XIcon className="h-5 w-5" />
-            </button>
-          </div>
-        </ScrollableModal>
+      {showUploadModal && (
+        <MediaUploadModal onClose={() => setShowUploadModal(false)} />
       )}
 
-      {/* Delete Confirmation Modal */}
-      {showDeleteModal && (
-        <ScrollableModal>
-          <ScrollableModalCard maxW="md">
-            <ScrollableModalBody>
-              <h3 className="dark:text-dark-text mb-4 text-lg font-semibold text-gray-900">
-                Medium löschen
-              </h3>
-              <p className="dark:text-dark-muted mb-4 text-gray-600">
-                Bist du sicher, dass du dieses Medium löschen möchtest? Diese
-                Aktion kann nicht rückgängig gemacht werden.
-              </p>
-            </ScrollableModalBody>
-            <ScrollableModalFooter>
-              <div className="flex justify-end gap-3">
-                <button
-                  onClick={() => setShowDeleteModal(null)}
-                  className="dark:border-dark-border dark:text-dark-text dark:hover:bg-dark-border rounded-lg border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
-                >
-                  Abbrechen
-                </button>
-                <button
-                  onClick={() => deleteMutation.mutate({ id: showDeleteModal })}
-                  disabled={deleteMutation.isPending}
-                  className="rounded-lg bg-red-600 px-4 py-2 text-sm font-medium text-white hover:bg-red-700 disabled:opacity-50"
-                >
-                  {deleteMutation.isPending ? "Löschen..." : "Löschen"}
-                </button>
-              </div>
-            </ScrollableModalFooter>
-          </ScrollableModalCard>
-        </ScrollableModal>
+      {previewItem && (
+        <MediaPreviewModal
+          media={previewItem}
+          canEdit={canEdit}
+          onClose={() => setPreviewId(null)}
+          onEdit={() => {
+            setPreviewId(null);
+            setEditId(previewItem.id);
+          }}
+        />
       )}
 
-      {/* Edit Modal */}
-      {showEditModal && (
-        <ScrollableModal>
-          <ScrollableModalCard>
-            <ScrollableModalHeader>
-              <h2 className="dark:text-dark-text text-xl font-semibold text-gray-900">
-                Medium bearbeiten
-              </h2>
-            </ScrollableModalHeader>
-            <ScrollableModalBody className="space-y-4">
-              {/* Preview */}
-              {(() => {
-                const editItem = data?.media.find(
-                  (m) => m.id === showEditModal,
-                );
-                if (editItem?.mimeType.startsWith("image/")) {
-                  return (
-                    <div className="flex flex-col gap-2">
-                      <div className="relative mx-auto h-32 w-32 overflow-hidden rounded-lg">
-                        <Image
-                          src={editItem.url}
-                          alt={editItem.name}
-                          fill
-                          className="object-cover"
-                          style={
-                            editItem.focalPointX != null &&
-                            editItem.focalPointY != null
-                              ? {
-                                  objectPosition: `${editItem.focalPointX}% ${editItem.focalPointY}%`,
-                                }
-                              : undefined
-                          }
-                        />
-                      </div>
-                      <Button
-                        type="button"
-                        variant="outline"
-                        size="sm"
-                        onClick={() => {
-                          setShowEditModal(null);
-                          setShowRecropModal(editItem.id);
-                        }}
-                        className="w-fit"
-                      >
-                        <CropIcon className="mr-1.5 h-4 w-4" />
-                        Bild zuschneiden
-                      </Button>
-                    </div>
-                  );
-                }
-                return null;
-              })()}
-
-              {/* Name */}
-              <div>
-                <label className="dark:text-dark-text mb-1 block text-sm font-medium text-gray-700">
-                  Name
-                </label>
-                <input
-                  type="text"
-                  value={editName}
-                  onChange={(e) => setEditName(e.target.value)}
-                  className="dark:bg-dark-background dark:border-dark-border dark:text-dark-text focus:border-primary focus:ring-primary w-full rounded-lg border border-gray-300 px-4 py-2 focus:ring-1 focus:outline-none"
-                />
-              </div>
-
-              {/* Alt Text */}
-              <div>
-                <label className="dark:text-dark-text mb-1 block text-sm font-medium text-gray-700">
-                  Alt-Text
-                </label>
-                <input
-                  type="text"
-                  value={editAlt}
-                  onChange={(e) => setEditAlt(e.target.value)}
-                  placeholder="Beschreibung für Screenreader"
-                  className="dark:bg-dark-background dark:border-dark-border dark:text-dark-text focus:border-primary focus:ring-primary w-full rounded-lg border border-gray-300 px-4 py-2 focus:ring-1 focus:outline-none"
-                />
-              </div>
-
-              {/* Title */}
-              <div>
-                <label className="dark:text-dark-text mb-1 block text-sm font-medium text-gray-700">
-                  Titel
-                </label>
-                <input
-                  type="text"
-                  value={editTitle}
-                  onChange={(e) => setEditTitle(e.target.value)}
-                  placeholder="Anzeigetitel"
-                  className="dark:bg-dark-background dark:border-dark-border dark:text-dark-text focus:border-primary focus:ring-primary w-full rounded-lg border border-gray-300 px-4 py-2 focus:ring-1 focus:outline-none"
-                />
-              </div>
-
-              {/* Caption */}
-              <div>
-                <label className="dark:text-dark-text mb-1 block text-sm font-medium text-gray-700">
-                  Bildunterschrift
-                </label>
-                <textarea
-                  value={editCaption}
-                  onChange={(e) => setEditCaption(e.target.value)}
-                  rows={2}
-                  placeholder="Optionale Bildunterschrift"
-                  className="dark:bg-dark-background dark:border-dark-border dark:text-dark-text focus:border-primary focus:ring-primary w-full rounded-lg border border-gray-300 px-4 py-2 focus:ring-1 focus:outline-none"
-                />
-              </div>
-
-              {/* Copyright */}
-              <div>
-                <label className="dark:text-dark-text mb-1 block text-sm font-medium text-gray-700">
-                  Copyright / Urheberrecht
-                </label>
-                <input
-                  type="text"
-                  value={editCopyright}
-                  onChange={(e) => setEditCopyright(e.target.value)}
-                  placeholder="z. B. © 2025 Posaunenwerk"
-                  className="dark:bg-dark-background dark:border-dark-border dark:text-dark-text focus:border-primary focus:ring-primary w-full rounded-lg border border-gray-300 px-4 py-2 focus:ring-1 focus:outline-none"
-                />
-              </div>
-
-              {/* Creator / Photographer */}
-              <div>
-                <label className="dark:text-dark-text mb-1 block text-sm font-medium text-gray-700">
-                  Fotograf:in / Urheber:in
-                </label>
-                <input
-                  type="text"
-                  value={editCreator}
-                  onChange={(e) => setEditCreator(e.target.value)}
-                  placeholder="Name des Fotografen oder der Fotografin"
-                  className="dark:bg-dark-background dark:border-dark-border dark:text-dark-text focus:border-primary focus:ring-primary w-full rounded-lg border border-gray-300 px-4 py-2 focus:ring-1 focus:outline-none"
-                />
-              </div>
-
-              {/* Tags */}
-              <div>
-                <label className="dark:text-dark-text mb-1 block text-sm font-medium text-gray-700">
-                  Tags
-                </label>
-                <input
-                  type="text"
-                  value={editTags}
-                  onChange={(e) => setEditTags(e.target.value)}
-                  placeholder="Kommagetrennte Tags"
-                  className="dark:bg-dark-background dark:border-dark-border dark:text-dark-text focus:border-primary focus:ring-primary w-full rounded-lg border border-gray-300 px-4 py-2 focus:ring-1 focus:outline-none"
-                />
-                <p className="dark:text-dark-muted mt-1 text-xs text-gray-500">
-                  Mehrere Tags mit Komma trennen
-                </p>
-              </div>
+      {editItem && (
+        <MediaEditModal media={editItem} onClose={() => setEditId(null)} />
+      )}
 
-              {/* Public Toggle */}
-              <div className="flex items-center gap-3">
-                <input
-                  type="checkbox"
-                  id="editMediaIsPublic"
-                  checked={editIsPublic}
-                  onChange={(e) => setEditIsPublic(e.target.checked)}
-                  className="text-primary focus:ring-primary h-4 w-4 rounded border-gray-300"
-                />
-                <label
-                  htmlFor="editMediaIsPublic"
-                  className="dark:text-dark-text text-sm font-medium text-gray-700"
-                >
-                  Öffentlich sichtbar
-                </label>
-              </div>
+      {deleteItem && (
+        <MediaDeleteDialog
+          media={deleteItem}
+          isDeleting={deleteMutation.isPending}
+          onClose={() => setDeleteId(null)}
+          onConfirm={() => deleteMutation.mutate({ id: deleteItem.id })}
+        />
+      )}
 
-              {editError && <p className="text-sm text-red-600">{editError}</p>}
-            </ScrollableModalBody>
-            <ScrollableModalFooter>
-              <div className="flex justify-end gap-3">
-                <button
-                  onClick={() => setShowEditModal(null)}
-                  className="dark:border-dark-border dark:text-dark-text dark:hover:bg-dark-border rounded-lg border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
-                >
-                  Abbrechen
-                </button>
-                <button
-                  onClick={handleUpdate}
-                  disabled={updateMutation.isPending}
-                  className="bg-primary hover:bg-primary/90 rounded-lg px-4 py-2 text-sm font-medium text-white disabled:opacity-50"
-                >
-                  {updateMutation.isPending ? "Speichern..." : "Speichern"}
-                </button>
-              </div>
-            </ScrollableModalFooter>
-          </ScrollableModalCard>
-        </ScrollableModal>
+      {bulkDeleteOpen && (
+        <BulkDeleteDialog
+          count={selectedIds.size}
+          isDeleting={bulkDeleteMutation.isPending}
+          onClose={() => setBulkDeleteOpen(false)}
+          onConfirm={() => bulkDeleteMutation.mutate({ ids: [...selectedIds] })}
+        />
       )}
 
-      {/* Re-crop (real crop) modal */}
-      {showRecropModal && recropItem?.mimeType.startsWith("image/") && (
+      {recropItem?.mimeType.startsWith("image/") && (
         <ImageCropEditor
           imageUrl={recropItem.url}
-          onCropComplete={handleCropComplete}
-          onClose={() => setShowRecropModal(null)}
+          onCropComplete={(blob, filename, width, height) =>
+            replaceFile(recropItem.id, blob, filename, width, height)
+          }
+          onClose={() => setRecropId(null)}
         />
       )}
     </>
   );
 }
+
+function StatCard({
+  label,
+  value,
+  tone = "default",
+  onClick,
+}: {
+  label: string;
+  value: string | number;
+  tone?: "default" | "warning";
+  onClick?: () => void;
+}) {
+  const content = (
+    <>
+      <p className="dark:text-dark-muted text-sm text-gray-500">{label}</p>
+      <p
+        className={`text-2xl font-bold ${
+          tone === "warning"
+            ? "text-amber-600 dark:text-amber-400"
+            : "dark:text-dark-text text-gray-900"
+        }`}
+      >
+        {value}
+      </p>
+    </>
+  );
+
+  const className =
+    "dark:bg-dark-surface dark:border-dark-border rounded-lg border border-gray-200 bg-white p-4 text-left shadow-sm";
+
+  return onClick ? (
+    <button
+      type="button"
+      onClick={onClick}
+      className={`${className} hover:border-primary transition-colors`}
+    >
+      {content}
+    </button>
+  ) : (
+    <div className={className}>{content}</div>
+  );
+}
+
+function IconAction({
+  label,
+  icon: Icon,
+  onClick,
+  tone = "neutral",
+}: {
+  label: string;
+  icon: typeof EditIcon;
+  onClick: () => void;
+  tone?: "neutral" | "success" | "danger";
+}) {
+  const tones = {
+    neutral:
+      "text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-700",
+    success:
+      "text-green-600 hover:bg-green-50 dark:text-green-400 dark:hover:bg-green-900/30",
+    danger:
+      "text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-900/30",
+  } as const;
+
+  return (
+    <button
+      type="button"
+      title={label}
+      aria-label={label}
+      onClick={onClick}
+      className={`rounded-md p-1.5 transition-colors ${tones[tone]}`}
+    >
+      <Icon className="h-4 w-4" />
+    </button>
+  );
+}
+
+function BulkDeleteDialog({
+  count,
+  onClose,
+  onConfirm,
+  isDeleting,
+}: {
+  count: number;
+  onClose: () => void;
+  onConfirm: () => void;
+  isDeleting: boolean;
+}) {
+  return (
+    <ScrollableModalShell onClose={isDeleting ? undefined : onClose}>
+      <h3 className="dark:text-dark-text mb-3 text-lg font-semibold text-gray-900">
+        {count} Medien löschen
+      </h3>
+      <p className="dark:text-dark-muted mb-4 text-sm text-gray-600">
+        Die Dateien werden auch von der Festplatte entfernt. Einträge, die
+        unmittelbar an einem Bild hängen — Bläserhefte und Folien des
+        Startseiten-Karussells — verschwinden mit. Diese Aktion kann nicht
+        rückgängig gemacht werden.
+      </p>
+      <div className="flex justify-end gap-3">
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={onClose}
+          disabled={isDeleting}
+        >
+          Abbrechen
+        </Button>
+        <Button
+          variant="danger"
+          size="sm"
+          onClick={onConfirm}
+          disabled={isDeleting}
+          isLoading={isDeleting}
+        >
+          Endgültig löschen
+        </Button>
+      </div>
+    </ScrollableModalShell>
+  );
+}
+
+function ScrollableModalShell({
+  children,
+  onClose,
+}: {
+  children: React.ReactNode;
+  onClose?: () => void;
+}) {
+  return (
+    <div
+      className="fixed inset-0 z-50 flex min-h-full items-center justify-center overflow-y-auto bg-black/50 p-4"
+      onClick={onClose}
+    >
+      <div
+        className="dark:bg-dark-surface w-full max-w-md rounded-lg bg-white p-6 shadow-xl"
+        onClick={(event) => event.stopPropagation()}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}
diff --git a/src/server/api/routers/media.ts b/src/server/api/routers/media.ts
index 9a3ad0b1..635f92ad 100644
--- a/src/server/api/routers/media.ts
+++ b/src/server/api/routers/media.ts
@@ -617,6 +617,88 @@ export const mediaRouter = createTRPCRouter({
       return { success: true };
     }),
 
+  /** Mehrfachauswahl aus der Übersicht — eine Bestätigung statt zwanzig. */
+  bulkDelete: protectedProcedure
+    .input(z.object({ ids: z.array(z.string()).min(1).max(200) }))
+    .mutation(async ({ ctx, input }) => {
+      const canDeleteMedia = await userHasPermission(
+        ctx.session.user.id,
+        PERMISSIONS.MEDIA_DELETE,
+        ctx.permissionCache,
+      );
+
+      const items = await ctx.db.media.findMany({
+        where: { id: { in: input.ids } },
+        select: { id: true, path: true, uploadedById: true },
+      });
+
+      const deletable = items.filter(
+        (item) => canDeleteMedia || item.uploadedById === ctx.session.user.id,
+      );
+
+      if (deletable.length === 0) {
+        throw new TRPCError({
+          code: "FORBIDDEN",
+          message: "Insufficient permissions",
+        });
+      }
+
+      await ctx.db.media.deleteMany({
+        where: { id: { in: deletable.map((item) => item.id) } },
+      });
+      await Promise.all(deletable.map((item) => unlinkMediaFile(item.path)));
+
+      return {
+        deleted: deletable.length,
+        skipped: input.ids.length - deletable.length,
+      };
+    }),
+
+  bulkReview: permissionProcedure(PERMISSIONS.MEDIA_APPROVE)
+    .input(
+      z.object({
+        ids: z.array(z.string()).min(1).max(200),
+        status: z.enum([ContentStatus.APPROVED, ContentStatus.REJECTED]),
+      }),
+    )
+    .mutation(async ({ ctx, input }) => {
+      const result = await ctx.db.media.updateMany({
+        where: { id: { in: input.ids } },
+        data: { status: input.status },
+      });
+      return { updated: result.count };
+    }),
+
+  bulkSetPublic: protectedProcedure
+    .input(
+      z.object({
+        ids: z.array(z.string()).min(1).max(200),
+        isPublic: z.boolean(),
+      }),
+    )
+    .mutation(async ({ ctx, input }) => {
+      const canEditMedia =
+        (await userHasPermission(
+          ctx.session.user.id,
+          PERMISSIONS.MEDIA_EDIT,
+          ctx.permissionCache,
+        )) ||
+        (await userHasPermission(
+          ctx.session.user.id,
+          PERMISSIONS.MEDIA_APPROVE,
+          ctx.permissionCache,
+        ));
+
+      const result = await ctx.db.media.updateMany({
+        where: {
+          id: { in: input.ids },
+          ...(canEditMedia ? {} : { uploadedById: ctx.session.user.id }),
+        },
+        data: { isPublic: input.isPublic },
+      });
+      return { updated: result.count };
+    }),
+
   review: permissionProcedure(PERMISSIONS.MEDIA_APPROVE)
     .input(
       z.object({