diff --git a/build/Dockerfile b/build/Dockerfile
index f1f0950..64c1ea9 100644
--- a/build/Dockerfile
+++ b/build/Dockerfile
@@ -4,7 +4,10 @@ WORKDIR /app/frontend
 COPY frontend/package*.json ./
 RUN npm ci
 COPY frontend/ ./
-RUN npm run build
+# Erst prüfen, dann bauen: Die Tests decken die Stellen ab, die sich ohne
+# Browser prüfen lassen – Reihenfolgen, Zoomstufen, Suche im Text. Sie laufen
+# in einer halben Sekunde; ein Abbild mit einer kaputten Sortierung kostet mehr.
+RUN npm test && npm run build
 
 # ── Stage 2: Backend build ────────────────────────────────────────────────────
 FROM golang:1.25-alpine AS backend-builder
diff --git a/frontend/src/components/FileInfoDialog.tsx b/frontend/src/components/FileInfoDialog.tsx
index f8fe621..eab9a5f 100644
--- a/frontend/src/components/FileInfoDialog.tsx
+++ b/frontend/src/components/FileInfoDialog.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react'
 import { filesApi, type Correspondent, type FileItem, type Tag } from '../api/client'
-import { formatBytes } from '../pages/FileBrowser'
+import { formatBytes } from '../format'
 import { useOverlayDismiss } from '../hooks/useOverlayDismiss'
 import TagChip from './TagChip'
 
diff --git a/frontend/src/components/FileViews.tsx b/frontend/src/components/FileViews.tsx
index 808d4a8..71378a0 100644
--- a/frontend/src/components/FileViews.tsx
+++ b/frontend/src/components/FileViews.tsx
@@ -5,7 +5,7 @@ import { TagRow } from './TagDialog'
 import TagChip from './TagChip'
 import { FileTypeIcon, FolderGlyph } from './icons'
 import FileCover, { FolderCover } from './FileCover'
-import { formatBytes } from '../pages/FileBrowser'
+import { formatBytes } from '../format'
 
 /**
  * Die beiden Darstellungen einer Ordnerliste: Kacheln und Zeilen.
diff --git a/frontend/src/components/PdfViewer.tsx b/frontend/src/components/PdfViewer.tsx
index b8b83ad..96c7bb4 100644
--- a/frontend/src/components/PdfViewer.tsx
+++ b/frontend/src/components/PdfViewer.tsx
@@ -3,6 +3,10 @@ import { filesApi } from '../api/client'
 import * as pdfjs from 'pdfjs-dist'
 import type { PDFDocumentProxy, PDFPageProxy } from 'pdfjs-dist'
 import workerUrl from 'pdfjs-dist/build/pdf.worker.min.mjs?url'
+import PdfToolbar from './pdf/PdfToolbar'
+import { commonWidth, padOf, pageGap, type PageSize } from './pdf/geometry'
+import { countIn, wordAround, type Hit } from './pdf/text'
+import { nextFine, nextStep } from './pdf/zoom'
 import './pdf.css'
 
 /**
@@ -23,6 +27,10 @@ import './pdf.css'
  * Was er absichtlich *nicht* kann: Anmerkungen, Formulare, Unterschriften.
  * Das Original wird in dieser Anwendung nie verändert – ein Betrachter, der
  * schreiben kann, wäre ein Widerspruch dazu.
+ *
+ * Hier steht, was am DOM hängt: laden, zeichnen, rollen, zoomen, färben. Was
+ * sich ohne Browser ausrechnen lässt, liegt daneben in `pdf/` – Zoomstufen,
+ * Seitenmaße, Suche im Text – und wird dort auch geprüft.
  */
 
 // Der Arbeiter kommt gebündelt aus node_modules und wird vom eigenen Server
@@ -39,63 +47,24 @@ pdfjs.GlobalWorkerOptions.workerSrc = workerUrl
  */
 const standardFontDataUrl = '/pdfjs/standard_fonts/'
 
-/** Zoomstufen der **Knöpfe**. „Fit" liegt außerhalb und wird gerechnet. */
-const zoomSteps = [0.5, 0.75, 1, 1.25, 1.5, 2, 3]
+/**
+ * Wie viele Seitenmaße gleichzeitig geholt werden.
+ *
+ * Vorher lief die Schleife streng nacheinander: Bei einem 200-seitigen Scan
+ * waren das 200 Runden, bevor überhaupt etwas zu sehen war. Alle auf einmal
+ * wäre das andere Extrem – PDF.js hält dann 200 Seitenobjekte zugleich.
+ */
+const sizeBatch = 24
 
 /**
- * Zoomschritt für Finger und Mausrad: **fünf Prozentpunkte**, auf runde
- * Zahlen gerastet – 65, 70, 75, 80 …
+ * Wartezeit, bevor eine Eingabe im Suchfeld das ganze Dokument durchsucht.
  *
- * Zuerst war es ein fester Faktor (fünf Prozent *vom aktuellen Wert*).
- * Rechnerisch ist das die sauberere Größe: Sie fühlt sich unten wie oben
- * gleich an. Abzulesen war sie aber nicht – die Anzeige sprang um drei
- * Punkte, dann um vier, dann um sechs. Wer eine Zahl sieht, erwartet ein
- * Raster, und das hier ist eines.
- *
- * Der Preis steht dazu: Bei 400 % ist ein Schritt gut ein Prozent, bei 25 %
- * ein Fünftel. Das gleicht die Geste aus, nicht die Rasterung – siehe unten.
+ * Ohne sie las jeder einzelne Tastendruck den Text **aller** Seiten neu aus.
+ * Wer „Rechnung" tippt, löste damit acht vollständige Durchläufe aus, von
+ * denen sieben schon veraltet waren, bevor sie fertig wurden. Ein Sechstel
+ * einer Sekunde bemerkt beim Tippen niemand.
  */
-const zoomStepPercent = 5
-const minScale = 0.25
-const maxScale = 4
-
-/**
- * Innenabstand der Seitenliste. Am Telefon fast keiner: Dort ist die Breite
- * das knappe Gut, und ein 16-Pixel-Rand links und rechts kostet zusammen mehr
- * als ein Zehntel der Darstellungsgröße.
- */
-function padOf(width: number): number {
-  return width < 560 ? 4 : 16
-}
-
-/**
- * Ab welcher Breite die Leiste als Dreispaltenraster taugt.
- *
- * Gerechnet, nicht geschätzt: Die Steuerung links braucht 275 Pixel
- * (zwei Knöpfe, Seitenzahl, Trenner, Zoom), die Suche in der Mitte 492 – und
- * die rechte Spalte ist genauso breit wie die linke, sonst säße die Suche
- * nicht mittig. Macht 2 × 275 + 492.
- *
- * **Vorher stand hier 720, und dazwischen war die Leiste kaputt:** Das Raster
- * gab der linken Spalte weniger, als ihr Inhalt braucht, und die Knöpfe
- * schrumpften mit. Gemessen bei 980 Pixeln Fensterbreite – erster Knopf 16
- * statt 28 Pixel, bei 760 die ganze Gruppe auf 108 statt 275. Am Ende war von
- * der Steuerung nichts mehr zu sehen.
- */
-const minGridWidth = 2 * 275 + 492
-
-/**
- * Breiten rechts vom Suchfeld – und damit das Maß für das Gegengewicht links.
- * Beide Seiten gleich breit heißt: Das Feld sitzt in der Mitte der Leiste.
- */
-const counterWidth = 54
-const hitButtonsWidth = 60
-/** Zähler + Knöpfe + die beiden Abstände dazwischen. */
-const hitsWidth = counterWidth + hitButtonsWidth + 6
-
-/** Abstand zwischen zwei Seiten, in Pixeln. Auch der Wert, mit dem gerechnet
- *  wird, wenn die sichtbare Seite bestimmt wird. */
-const pageGap = 12
+const searchDelay = 160
 
 interface Props {
   /** Adresse der Datei – dieselbe, die auch das <iframe> bekam. */
@@ -109,21 +78,10 @@ interface Props {
   searchTerm?: string
 }
 
-/**
- * Eine Fundstelle: Seite und die wievielte auf dieser Seite.
- *
- * `exact` unterscheidet die beiden Quellen. Bringt das PDF eigenen Text mit,
- * steht die Stelle im Dokument und lässt sich einfärben. Bei einem **Scan**
- * steht dort nur ein Bild; der Text kommt dann aus der Erkennung auf dem
- * Server, und der weiß zwar die Seite, aber nicht den Ort auf dem Blatt –
- * dafür müssten die Koordinaten der Erkennung aufbewahrt werden.
- */
-interface Hit { page: number; nth: number; exact: boolean }
-
 export default function PdfViewer({ url, fileId, searchTerm }: Props) {
   const [doc, setDoc] = useState<PDFDocumentProxy | null>(null)
   const [error, setError] = useState('')
-  const [sizes, setSizes] = useState<{ w: number; h: number }[]>([])
+  const [sizes, setSizes] = useState<PageSize[]>([])
   const [scale, setScale] = useState<number | 'fit'>('fit')
   const [fitScale, setFitScale] = useState(1)
   const [current, setCurrent] = useState(1)
@@ -147,10 +105,13 @@ export default function PdfViewer({ url, fileId, searchTerm }: Props) {
 
   useEffect(() => {
     let alive = true
-    let task: ReturnType<typeof pdfjs.getDocument> | null = null
     setDoc(null); setSizes([]); setError(''); setCurrent(1)
+    // Die Verweise auf die Seitenkästen gehören zum alten Dokument. Ohne das
+    // blieben bei einem kürzeren nächsten Dokument Einträge stehen, die auf
+    // längst entfernte Elemente zeigen.
+    pageRefs.current = []
 
-    task = pdfjs.getDocument({
+    const task = pdfjs.getDocument({
       url,
       // Same-Origin, die Sitzung steckt im Cookie – ohne das käme 401.
       withCredentials: true,
@@ -165,10 +126,15 @@ export default function PdfViewer({ url, fileId, searchTerm }: Props) {
         // Die Maße *aller* Seiten vorab: Sonst müsste die Liste mit einer
         // geschätzten Höhe beginnen und beim Zeichnen springen. Ein Dokument
         // mit gemischtem Hoch- und Querformat ist bei Scans der Normalfall.
-        const s: { w: number; h: number }[] = []
-        for (let i = 1; i <= d.numPages; i++) {
-          const v = (await d.getPage(i)).getViewport({ scale: 1 })
-          s.push({ w: v.width, h: v.height })
+        const s: PageSize[] = []
+        for (let from = 1; from <= d.numPages; from += sizeBatch) {
+          const to = Math.min(from + sizeBatch - 1, d.numPages)
+          const batch = await Promise.all(
+            Array.from({ length: to - from + 1 }, (_, i) =>
+              d.getPage(from + i).then(p => p.getViewport({ scale: 1 }))),
+          )
+          if (!alive) return
+          for (const v of batch) s.push({ w: v.width, h: v.height })
         }
         if (!alive) return
         setSizes(s)
@@ -185,7 +151,7 @@ export default function PdfViewer({ url, fileId, searchTerm }: Props) {
     )
     return () => {
       alive = false
-      task?.destroy()
+      task.destroy()
     }
   }, [url])
 
@@ -210,9 +176,6 @@ export default function PdfViewer({ url, fileId, searchTerm }: Props) {
    *
    * Am Telefon greift die Grenze von selbst nicht: Dort ist der Bildschirm
    * schmaler als das Blatt, die Breite also unter 100 %.
-   *
-   * Gerechnet wird gegen die **häufigste** Seitenbreite, nicht gegen die
-   * breiteste – warum, steht bei `commonWidth`.
    */
   const recomputeFit = useCallback(() => {
     const el = scrollRef.current
@@ -403,10 +366,12 @@ export default function PdfViewer({ url, fileId, searchTerm }: Props) {
    */
   useEffect(() => {
     const q = query.trim().toLowerCase()
-    if (!doc || q.length < 2) { setHits([]); setHitIndex(0); return }
+    if (!doc || q.length < 2) { setHits([]); setHitIndex(0); setSearching(false); return }
     let alive = true
     setSearching(true)
-    ;(async () => {
+
+    // Erst abwarten, ob noch ein Zeichen kommt – siehe `searchDelay`.
+    const timer = setTimeout(() => void (async () => {
       const found: Hit[] = []
       for (let n = 1; n <= doc.numPages; n++) {
         if (!alive) return
@@ -446,9 +411,9 @@ export default function PdfViewer({ url, fileId, searchTerm }: Props) {
       if (!alive) return
       setHits(found)
       setHitIndex(0)
-      setSearching(false)
-    })()
-    return () => { alive = false; setSearching(false) }
+    })().finally(() => { if (alive) setSearching(false) }), searchDelay)
+
+    return () => { alive = false; clearTimeout(timer) }
   }, [doc, query, fileId])
 
   /**
@@ -466,12 +431,10 @@ export default function PdfViewer({ url, fileId, searchTerm }: Props) {
    *   ab (`overflow: clip`). Daher „abgeschnitten und nicht gerade".
    *
    * Jetzt kommt die Geometrie **vollständig** aus der Auswahl – genau die
-   * Kästen, die der Browser auch beim Markieren mit der Maus malt. Das darf
-   * er jetzt auch: Unsere Ebene schneidet nichts ab, das war ja allein die
-   * Textebene.
+   * Kästen, die der Browser auch beim Markieren mit der Maus malt.
    *
    * Und markiert wird das **ganze Wort**, nicht der Buchstabenschnipsel –
-   * warum, steht bei `wordAround` unten.
+   * warum, steht bei `wordAround` in pdf/text.ts.
    *
    * Nebenbei bleibt die Schrift unberührt: Markieren und Kopieren gehen
    * währenddessen weiter, was beim Umbauen des Textes nicht mehr sicher war.
@@ -604,6 +567,14 @@ export default function PdfViewer({ url, fileId, searchTerm }: Props) {
   // Kommt der Betrachter aus einem Suchtreffer, steht das Wort schon da.
   useEffect(() => { setQuery(searchTerm ?? '') }, [searchTerm, url])
 
+  const stepHit = useCallback((delta: number) => {
+    // Ohne die Wache teilte der Rest durch null und der Zeiger stünde auf
+    // NaN. Die Leiste ruft das zwar nur mit Treffern, aber ein Zähler, der
+    // sich nicht mehr erholt, ist ein teurer Preis für eine Annahme.
+    if (hits.length === 0) return
+    setHitIndex(i => (i + delta + hits.length) % hits.length)
+  }, [hits.length])
+
   // ------------------------------------------------------------------ Zoom
 
   /**
@@ -625,6 +596,7 @@ export default function PdfViewer({ url, fileId, searchTerm }: Props) {
   /** Der aktuelle Maßstab, aus einem Zuhörer heraus lesbar. */
   const scaleRef = useRef(effScale)
   scaleRef.current = effScale
+
   useEffect(() => {
     const anchor = keepAnchor.current
     if (anchor) {
@@ -643,41 +615,21 @@ export default function PdfViewer({ url, fileId, searchTerm }: Props) {
     goToPage(n)
   }, [effScale, goToPage])
 
-  /** Die nächste Stufe in eine Richtung, oder undefined am Ende der Leiter. */
-  function nextStep(now: number, dir: 1 | -1): number | undefined {
-    return dir > 0
-      ? zoomSteps.find(s => s > now + 0.001)
-      : [...zoomSteps].reverse().find(s => s < now - 0.001)
-  }
+  /** Merkt den Punkt unter Zeiger oder Fingermitte, damit er dort bleibt. */
+  const anchorAt = useCallback((cx: number, cy: number, from: number) => {
+    const root = scrollRef.current
+    if (!root) return
+    const r = root.getBoundingClientRect()
+    keepAnchor.current = {
+      px: root.scrollLeft + (cx - r.left), py: root.scrollTop + (cy - r.top),
+      cx: cx - r.left, cy: cy - r.top, from,
+    }
+  }, [])
 
-  /**
-   * Die nächste runde Fünferzahl, für Finger und Mausrad. Undefined am
-   * Anschlag.
-   *
-   * Gerechnet wird in Prozentpunkten und nicht in Bruchteilen: Der Nutzer
-   * liest Prozente, und ein Raster, das nur *fast* auf 70 trifft, ist keins.
-   * Aus einer krummen Ausgangsgröße – „einpassen" ergibt zum Beispiel 65,3 %
-   * – führt der erste Schritt auf die nächste runde Zahl, danach geht es in
-   * Fünfern weiter.
-   */
-  function nextFine(now: number, dir: 1 | -1): number | undefined {
-    // **Gerundet, bevor gerechnet wird.** 1,1 × 100 ergibt in Fließkomma
-    // 110.00000000000001, und daraus wird die „nächste kleinere Fünferzahl"
-    // wieder 110 – der Zoom blieb dann stehen. Gemessen: Beim Zuziehen kam
-    // genau eine Stufe, danach nichts mehr.
-    const p = Math.round(now * 100 * 1e6) / 1e6
-    const step = zoomStepPercent
-    const raw = dir > 0
-      ? Math.floor(p / step + 1) * step
-      : Math.ceil(p / step - 1) * step
-    const next = Math.min(maxScale * 100, Math.max(minScale * 100, raw)) / 100
-    return Math.abs(next - now) < 0.001 ? undefined : next
-  }
-
-  function zoom(dir: 1 | -1) {
-    const next = nextStep(effScale, dir)
+  const zoom = useCallback((dir: 1 | -1) => {
+    const next = nextStep(scaleRef.current, dir)
     if (next) { keepPage.current = current; setScale(next) }
-  }
+  }, [current])
 
   /**
    * Strg + Mausrad zoomt – wie in jedem Betrachter, und wie in InkNote.
@@ -694,31 +646,22 @@ export default function PdfViewer({ url, fileId, searchTerm }: Props) {
       // Auch die Meta-Taste: Auf einem Mac ist sie die übliche.
       if (!e.ctrlKey && !e.metaKey) return
       e.preventDefault()
-      const root2 = scrollRef.current
-      if (!root2) return
-      const dir: 1 | -1 = e.deltaY < 0 ? 1 : -1
-      const next = nextFine(effScale, dir)
+      const from = scaleRef.current
+      const next = nextFine(from, e.deltaY < 0 ? 1 : -1)
       if (!next) return
-      const r = root2.getBoundingClientRect()
-      const cx = e.clientX - r.left
-      const cy = e.clientY - r.top
-      keepAnchor.current = {
-        px: root2.scrollLeft + cx, py: root2.scrollTop + cy,
-        cx, cy, from: effScale,
-      }
+      anchorAt(e.clientX, e.clientY, from)
       setScale(next)
     }
     root.addEventListener('wheel', onWheel, { passive: false })
     return () => root.removeEventListener('wheel', onWheel)
-  }, [effScale])
+  }, [anchorAt])
 
   /**
    * Zwei Finger zoomen das Dokument – nicht die Seite.
    *
    * Bisher vergrößerte die Zusammenziehgeste die **Anwendung**: Leiste,
    * Knöpfe und Suchfeld wuchsen mit, das PDF blieb so grob wie vorher, und
-   * hinterher stand alles verschoben. Das ist der Grund, aus dem am Telefon
-   * bisher nur die Knöpfe blieben.
+   * hinterher stand alles verschoben.
    *
    * Zwei Teile gehören dazu, und einer allein genügt nicht: `touch-action`
    * unten am Behälter nimmt dem Browser die eigene Zoomgeste (Ziehen mit
@@ -744,9 +687,7 @@ export default function PdfViewer({ url, fileId, searchTerm }: Props) {
     if (!root) return
 
     function distance(t: TouchList) {
-      const dx = t[0].clientX - t[1].clientX
-      const dy = t[0].clientY - t[1].clientY
-      return Math.hypot(dx, dy)
+      return Math.hypot(t[0].clientX - t[1].clientX, t[0].clientY - t[1].clientY)
     }
 
     function onStart(e: TouchEvent) {
@@ -783,17 +724,13 @@ export default function PdfViewer({ url, fileId, searchTerm }: Props) {
       if (dir < 0 && ratio > Math.min(0.98, needed)) return
 
       pinchBase.current = now
-      const root2 = scrollRef.current
-      if (!root2) return
       // Festgehalten wird die Mitte zwischen den Fingern – dieselbe Regel wie
       // beim Mausrad, nur dass der Zeiger hier aus zwei Punkten entsteht.
-      const r = root2.getBoundingClientRect()
-      const cx = (e.touches[0].clientX + e.touches[1].clientX) / 2 - r.left
-      const cy = (e.touches[0].clientY + e.touches[1].clientY) / 2 - r.top
-      keepAnchor.current = {
-        px: root2.scrollLeft + cx, py: root2.scrollTop + cy,
-        cx, cy, from,
-      }
+      anchorAt(
+        (e.touches[0].clientX + e.touches[1].clientX) / 2,
+        (e.touches[0].clientY + e.touches[1].clientY) / 2,
+        from,
+      )
       setScale(next)
     }
 
@@ -812,60 +749,14 @@ export default function PdfViewer({ url, fileId, searchTerm }: Props) {
       root.removeEventListener('touchend', onEnd)
       root.removeEventListener('touchcancel', onEnd)
     }
-    // Ohne Abhängigkeiten: Der Zuhörer meldet sich **einmal** an. Hinge er am
-    // Maßstab, meldete er sich nach jeder Stufe neu an – mitten in der Geste,
-    // und der gemerkte Fingerabstand wäre weg. Gemessen: Eine lange Geste kam
-    // dann über genau eine Stufe nicht hinaus.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
+    // `anchorAt` ist über useCallback stabil, der Zuhörer meldet sich also
+    // **einmal** an. Hinge er am Maßstab, meldete er sich nach jeder Stufe neu
+    // an – mitten in der Geste, und der gemerkte Fingerabstand wäre weg.
+    // Gemessen: Eine lange Geste kam dann über genau eine Stufe nicht hinaus.
+  }, [anchorAt])
 
   const pages = useMemo(() => sizes.map((_, i) => i + 1), [sizes])
 
-  /** Verkleinern, Prozentzahl (zugleich „einpassen"), Vergrößern. Einmal
-   *  beschrieben, an zwei Stellen gezeigt – breit rechts außen, schmal in der
-   *  ersten Zeile. */
-  const zoomGroup = (
-    <>
-      <ToolButton label="Zoom out" onClick={() => zoom(-1)} glyph="minus" />
-      {/* Zurück zur eingepassten Größe. Bewusst kein Umschalter zwischen
-          „Breite" und „100 %": Seit die Einpassung bei 100 % gedeckelt ist,
-          sind das am Schreibtisch oft dieselbe Zahl – ein Knopf, der nichts
-          tut, ist schlimmer als keiner. */}
-      <button
-        onClick={() => { keepPage.current = current; setScale('fit') }}
-        disabled={scale === 'fit'}
-        title="Fit width"
-        style={{
-          fontSize: 12, color: 'var(--color-text-muted)', minWidth: 52, flexShrink: 0,
-          border: 'none', background: 'none',
-          cursor: scale === 'fit' ? 'default' : 'pointer',
-          fontVariantNumeric: 'tabular-nums',
-        }}
-      >
-        {Math.round(effScale * 100)}%
-      </button>
-      <ToolButton label="Zoom in" onClick={() => zoom(1)} glyph="plus" />
-    </>
-  )
-  /**
-   * Reicht die Breite für drei Spalten? Unterhalb bricht die Leiste um, und
-   * ein Raster ergäbe eine gequetschte Suche neben gequetschten Knöpfen.
-   */
-  const barRef = useRef<HTMLDivElement>(null)
-  const [barNarrow, setBarNarrow] = useState(false)
-  useEffect(() => {
-    const el = barRef.current
-    if (!el) return
-    // Dieselbe Vorsicht wie bei der Einpassung: Breite null heißt „noch nicht
-    // sichtbar", nicht „schmal". Ohne die Prüfung stand die Leiste beim
-    // Aufgehen der Vorschau im Umbruch-Zustand und blieb dort.
-    const set = () => { if (el.clientWidth >= 50) setBarNarrow(el.clientWidth < minGridWidth) }
-    set()
-    const ro = new ResizeObserver(set)
-    ro.observe(el)
-    return () => ro.disconnect()
-  }, [])
-
   const [pad, setPad] = useState(16)
   useEffect(() => {
     const el = scrollRef.current
@@ -892,137 +783,22 @@ export default function PdfViewer({ url, fileId, searchTerm }: Props) {
       width: '100%', height: '100%', display: 'flex', flexDirection: 'column',
       borderRadius: 8, overflow: 'hidden', background: 'var(--color-surface)',
     }}>
-      {/*
-        Werkzeugleiste.
-
-        Am Schreibtisch ein **Dreispaltenraster**: Steuerung links, Suche in
-        der Mitte, rechts eine leere Spalte gleicher Breite. Erst dadurch sitzt
-        die Suche wirklich mittig – mit zwei Abstandhaltern in einer Reihe
-        teilen sich diese nur den *Rest* neben der Steuerung, und das Feld
-        landete gemessen 79 bzw. 142 Pixel daneben.
-
-        Am Telefon reicht die Breite für drei Spalten nicht; dort bleibt es
-        beim Umbruch, und die Suche steht in der zweiten Zeile.
-      */}
-      <div
-        ref={barRef}
-        style={{
-          display: barNarrow ? 'flex' : 'grid',
-          gridTemplateColumns: barNarrow ? undefined : 'minmax(0, 1fr) auto minmax(0, 1fr)',
-          alignItems: 'center', gap: 8, flexWrap: 'wrap',
-          padding: '6px 10px', flexShrink: 0,
-          borderBottom: '1px solid var(--color-border)',
-          background: 'var(--color-surface)',
-        }}
-      >
-        <div style={{ display: 'flex', alignItems: 'center', gap: 8, minWidth: 0 }}>
-        <ToolButton label="Previous page" disabled={current <= 1}
-                    onClick={() => goToPage(current - 1)} glyph="up" />
-        <span style={{
-          fontSize: 12, color: 'var(--color-text-muted)',
-          minWidth: 62, flexShrink: 0,
-          textAlign: 'center', fontVariantNumeric: 'tabular-nums',
-        }}>
-          {doc ? `${current} / ${doc.numPages}` : '…'}
-        </span>
-        <ToolButton label="Next page" disabled={!doc || current >= doc.numPages}
-                    onClick={() => goToPage(current + 1)} glyph="down" />
-        {barNarrow && (
-          <>
-            <span style={{ width: 1, height: 20, flexShrink: 0, background: 'var(--color-border)' }} />
-            {zoomGroup}
-          </>
-        )}
-        </div>
-
-        {/* Suche im Dokument – die mittlere Spalte. Sie ist der Grund, aus dem
-            es diesen Betrachter gibt; rechts an den Rand gedrängt sah sie aus
-            wie ein Zusatz, der nicht recht dazugehört. */}
-        <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
-          {/* Gegengewicht. Rechts vom Feld stehen Zähler und Sprungknöpfe;
-              ohne diesen Ausgleich säße die Gruppe zwar mittig, das **Feld**
-              aber 79 Pixel daneben – gemessen. Mittig soll das sein, was man
-              ansieht, nicht der Kasten drumherum.
-
-              Am Telefon fällt es weg: Dort gibt es nichts zu zentrieren, und
-              120 Pixel Leere hätten ein Drittel der Zeile gekostet – während
-              rechts der zweite Sprungknopf aus dem Bild fiel. */}
-          {!barNarrow && <span style={{ width: hitsWidth, flexShrink: 0 }} />}
-          <input
-            value={query}
-            onChange={e => setQuery(e.target.value)}
-            onKeyDown={e => {
-              if (e.key === 'Enter') {
-                e.preventDefault()
-                if (hits.length) setHitIndex(i => (i + (e.shiftKey ? -1 : 1) + hits.length) % hits.length)
-              }
-              // Escape gehört hier dem Feld, nicht dem Schließen der Vorschau.
-              if (e.key === 'Escape' && query) { e.stopPropagation(); setQuery('') }
-            }}
-            placeholder="Find in document"
-            style={{
-              // Breiter als die 150 vom Anfang: In der Mitte einer 1440 Pixel
-              // breiten Leiste sah ein Feld in Knopfbreite aus wie ein
-              // Restposten. Ein Suchbegriff wie „Zahlungsbedingungen" passt
-              // jetzt auch hinein, ohne zu wandern.
-              width: 240, minWidth: 0,
-              padding: '5px 8px', borderRadius: 8, fontSize: 12,
-              border: '1px solid var(--color-border)',
-              background: 'var(--color-background)', color: 'var(--color-text)',
-              outline: 'none',
-            }}
-          />
-          <span style={{
-            fontSize: 11, color: 'var(--color-text-muted)',
-            // Feste Breite, nicht Mindestbreite: Sonst wüchse die rechte Seite
-            // mit „Searching…" und das Feld rutschte beim Tippen hin und her.
-            width: counterWidth, flexShrink: 0,
-            overflow: 'hidden', whiteSpace: 'nowrap',
-            fontVariantNumeric: 'tabular-nums',
-          }}>
-            {searching ? 'Searching…'
-              : query.trim().length < 2 ? ''
-              : hits.length === 0 ? 'No hits'
-              : `${hitIndex + 1} / ${hits.length}${hits[0] && !hits[0].exact ? ' · page' : ''}`}
-          </span>
-          {/* Erst zeigen, wenn es etwas zu springen gibt. Ohne Suche stand
-              hier ein zweites Paar Winkel neben dem zum Blättern – zwei
-              gleich aussehende Knopfpaare für zwei ganz verschiedene Dinge. */}
-          {/* Der Platz für die beiden Knöpfe steht immer bereit, auch wenn
-              sie fehlen. Sonst rückte das Suchfeld beim ersten Treffer um
-              knapp dreißig Pixel zur Seite – ausgerechnet während man darin
-              tippt. Leerer Raum fällt niemandem auf, ein wanderndes Feld
-              schon. */}
-          <span style={{ width: hitButtonsWidth, flexShrink: 0, display: 'flex', gap: 4 }}>
-            {hits.length > 0 && (
-              <>
-                <ToolButton label="Previous hit" glyph="hitUp"
-                            onClick={() => setHitIndex(i => (i - 1 + hits.length) % hits.length)} />
-                <ToolButton label="Next hit" glyph="hitDown"
-                            onClick={() => setHitIndex(i => (i + 1) % hits.length)} />
-              </>
-            )}
-          </span>
-        </div>
-
-        {/* Die dritte Spalte: der Zoom, rechtsbündig – dieselbe Anordnung wie
-            in InkNote. Die Spalte war ohnehin nötig, damit „Mitte" die Mitte
-            der Leiste ist und nicht die Mitte des Restes; jetzt trägt sie
-            auch etwas.
-
-            Schmal steht der Zoom **nicht** hier, sondern oben neben der
-            Seitenzahl: Als eigene Zeile wäre die Leiste am Telefon dreizeilig
-            geworden – gemessen 190 statt 140 Pixel, und die gehen dem
-            Dokument ab. */}
-        {!barNarrow && (
-          <div style={{
-            display: 'flex', alignItems: 'center', gap: 8,
-            justifyContent: 'flex-end', minWidth: 0,
-          }}>
-            {zoomGroup}
-          </div>
-        )}
-      </div>
+      <PdfToolbar
+        page={current}
+        pageCount={doc?.numPages ?? null}
+        onGoPage={goToPage}
+        percent={Math.round(effScale * 100)}
+        isFit={scale === 'fit'}
+        onZoom={zoom}
+        onFit={() => { keepPage.current = current; setScale('fit') }}
+        query={query}
+        onQuery={setQuery}
+        searching={searching}
+        hitCount={hits.length}
+        hitIndex={hitIndex}
+        pageOnlyHits={!!hits[0] && !hits[0].exact}
+        onStepHit={stepHit}
+      />
 
       {/* Seiten */}
       <div
@@ -1070,124 +846,3 @@ export default function PdfViewer({ url, fileId, searchTerm }: Props) {
     </div>
   )
 }
-
-/**
- * Die häufigste Seitenbreite eines Dokuments.
- *
- * Vorher stand hier die **breiteste** Seite, mit dem Gedanken: Unterschiedlich
- * breite Seiten unterschiedlich zu skalieren sieht nach Fehler aus. Das
- * stimmt – nur ist der Preis höher als der Gewinn.
- *
- * Gemessen an einem zehnseitigen Dokument, in dem **eine** Seite quer liegt:
- * Die neun hochkanten Seiten standen dadurch auf 46 % statt 65 %. Auf einem
- * 412 Pixel breiten Telefon ist das der Unterschied zwischen lesbar und nicht.
- * Eine einzelne Querformat-Seite – ein Anhang, eine breite Tabelle – bestimmt
- * so die Darstellung des ganzen Dokuments.
- *
- * Jetzt entscheidet die Mehrheit. Die abweichende Seite ragt dann über den
- * Rand und lässt sich seitlich schieben; das ist genau das, was man bei ihr
- * ohnehin tun will.
- *
- * Bei Gleichstand gewinnt die breitere – dann ragt lieber nichts heraus.
- */
-function commonWidth(sizes: { w: number; h: number }[]): number {
-  const count = new Map<number, number>()
-  for (const s of sizes) {
-    const w = Math.round(s.w)
-    count.set(w, (count.get(w) ?? 0) + 1)
-  }
-  let best = 0, bestN = 0
-  for (const [w, n] of count) {
-    if (n > bestN || (n === bestN && w > best)) { best = w; bestN = n }
-  }
-  return best || 1
-}
-
-/**
- * Weitet eine Fundstelle auf das **ganze Wort** aus.
- *
- * Der Grund ist gemessen, nicht Geschmack. Über dem gemalten Bild liegt eine
- * unsichtbare *Ersatz*schrift – hier `sans-serif 13,5px` für eine
- * Serifenschrift im PDF. PDF.js dehnt sie über `--scale-x` (gemessen 0,937),
- * damit die **Zeile insgesamt** stimmt. Die Buchstaben *darin* sitzen deshalb
- * um ein bis drei Pixel anders als die gemalten.
- *
- * Bei einem ganzen Wort fällt das nicht auf. Bei „la" mitten in „Display"
- * schon: Der Kasten ist zehn Pixel breit, und drei Pixel Versatz sehen aus,
- * als läge er auf den falschen Buchstaben. Genau das war zu sehen.
- *
- * Gegenprobe im Browser: Unser Kasten und die Auswahl, die der Browser beim
- * Markieren mit der Maus malt, liegen auf demselben Pixel (357,08 / 10,38).
- * Der Versatz ist also nicht unser Fehler – er lässt sich nur nicht
- * wegrechnen, ohne die Schrift des Dokuments zu besitzen. Ihn zu *umgehen*
- * geht: ganze Wörter markieren, deren Ränder an Wortgrenzen liegen.
- *
- * Sehr lange „Wörter" (Adressen, Prüfsummen) bleiben ungedehnt – sonst wäre
- * eine halbe Zeile eingefärbt, weil irgendwo darin zwei Buchstaben passten.
- */
-const maxWordSnap = 40
-
-function wordAround(text: string, at: number, to: number): [number, number] {
-  const isWord = (c: string) => /[\p{L}\p{N}]/u.test(c)
-  let s = at, e = to
-  while (s > 0 && isWord(text[s - 1])) s--
-  while (e < text.length && isWord(text[e])) e++
-  return e - s > maxWordSnap ? [at, to] : [s, e]
-}
-
-/** Zählt die Fundstellen eines Suchworts in einem Stück Text. */
-function countIn(haystack: string, needle: string, page: number, exact: boolean): Hit[] {
-  const out: Hit[] = []
-  let from = 0, nth = 0
-  for (;;) {
-    const at = haystack.indexOf(needle, from)
-    if (at < 0) break
-    out.push({ page, nth: nth++, exact })
-    from = at + needle.length
-  }
-  return out
-}
-
-/**
- * Die Knöpfe der Werkzeugleiste steuern **zwei verschiedene** Dinge: links
- * die Seite, rechts die Fundstelle. Beide bewegen sich nach oben und unten –
- * und mit demselben Winkel-Zeichen sahen beide Paare gleich aus. Wer die
- * Leiste zum ersten Mal sieht, kann nicht wissen, welches welches ist.
- *
- * Deshalb zwei Formen: der schlanke Winkel blättert Seiten, der Pfeil mit
- * Schaft springt zur nächsten Fundstelle. Der Pfeil erscheint ohnehin erst,
- * wenn es Fundstellen gibt.
- */
-const glyphs: Record<string, string> = {
-  up: '18 15 12 9 6 15',
-  down: '6 9 12 15 18 9',
-}
-
-function ToolButton({ label, onClick, disabled, glyph }: {
-  label: string; onClick: () => void; disabled?: boolean
-  glyph: 'up' | 'down' | 'plus' | 'minus' | 'hitUp' | 'hitDown'
-}) {
-  return (
-    <button
-      onClick={onClick}
-      disabled={disabled}
-      title={label}
-      aria-label={label}
-      style={{
-        width: 28, height: 28, flexShrink: 0, borderRadius: 8, border: 'none',
-        background: 'none', color: 'var(--color-text-muted)',
-        cursor: disabled ? 'default' : 'pointer', opacity: disabled ? 0.35 : 1,
-        display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 0,
-      }}
-    >
-      <svg width="16" height="16" viewBox="0 0 24 24" fill="none"
-           stroke="currentColor" strokeWidth="2" strokeLinecap="round">
-        {glyph === 'plus' && <><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></>}
-        {glyph === 'minus' && <line x1="5" y1="12" x2="19" y2="12" />}
-        {(glyph === 'up' || glyph === 'down') && <polyline points={glyphs[glyph]} />}
-        {glyph === 'hitUp' && <><line x1="12" y1="19" x2="12" y2="6" /><polyline points="6 12 12 6 18 12" /></>}
-        {glyph === 'hitDown' && <><line x1="12" y1="5" x2="12" y2="18" /><polyline points="6 12 12 18 18 12" /></>}
-      </svg>
-    </button>
-  )
-}
diff --git a/frontend/src/components/Shell.tsx b/frontend/src/components/Shell.tsx
index a9168f9..5ae4614 100644
--- a/frontend/src/components/Shell.tsx
+++ b/frontend/src/components/Shell.tsx
@@ -124,7 +124,6 @@ export default function Shell({ user, onLogout, onUserChanged }: Props) {
       <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minWidth: 0, overflow: 'hidden' }}>
         {view === 'files' && (
           <FileBrowser
-            user={user}
             folderPath={folderPath}
             onNavigate={nav.setFolderPath}
             onUserChanged={onUserChanged}
diff --git a/frontend/src/components/VersionsDialog.tsx b/frontend/src/components/VersionsDialog.tsx
index 8da3a10..6c2d78d 100644
--- a/frontend/src/components/VersionsDialog.tsx
+++ b/frontend/src/components/VersionsDialog.tsx
@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react'
 import { versionsApi, type FileItem, type FileVersion } from '../api/client'
-import { formatBytes } from '../pages/FileBrowser'
+import { formatBytes } from '../format'
 import { useOverlayDismiss } from '../hooks/useOverlayDismiss'
 import { useAppSettings } from '../hooks/useAppSettings'
 
diff --git a/frontend/src/components/files/FileDialogs.tsx b/frontend/src/components/files/FileDialogs.tsx
new file mode 100644
index 0000000..598d796
--- /dev/null
+++ b/frontend/src/components/files/FileDialogs.tsx
@@ -0,0 +1,189 @@
+import type { Correspondent, FileItem, FolderItem, Tag } from '../../api/client'
+import InputDialog from '../Dialog'
+import ConfirmDialog from '../ConfirmDialog'
+import ShareDialog from '../ShareDialog'
+import ShareWithDialog from '../ShareWithDialog'
+import VersionsDialog from '../VersionsDialog'
+import FileInfoDialog from '../FileInfoDialog'
+import TagDialog from '../TagDialog'
+import MoveTo from '../MoveTo'
+
+/**
+ * Alle Dialoge des Dateibrowsers an einer Stelle.
+ *
+ * Es ist **immer höchstens einer** offen – das ist der Grund, warum sie einen
+ * gemeinsamen Zustand haben und hier eine gemeinsame Verzweigung. Am Ende der
+ * Seite standen dafür 150 Zeilen aus dreizehn fast gleich aussehenden Blöcken,
+ * hinter denen die eigentliche Anzeige verschwand.
+ *
+ * Die Verzweigung selbst bleibt, wie sie war: eine ausgezeichnete Vereinigung
+ * (`type`), keine dreizehn Wahrheitswerte. Ein Zustand, in dem zwei Dialoge
+ * zugleich „offen" sind, lässt sich so gar nicht erst hinschreiben.
+ */
+export type Dialog =
+  | { type: 'rename'; file: FileItem }
+  | { type: 'rename-folder'; folder: FolderItem }
+  | { type: 'confirm-delete-folder'; folder: FolderItem }
+  | { type: 'new-folder' }
+  | { type: 'share'; file: FileItem }
+  | { type: 'share-with'; resource: { type: 'folder' | 'file'; id: string; name: string } }
+  | { type: 'versions'; file: FileItem }
+  | { type: 'confirm-delete'; file: FileItem }
+  | { type: 'confirm-delete-many'; ids: string[] }
+  | { type: 'move-file'; file: FileItem }
+  | { type: 'move-folder'; folder: FolderItem }
+  | { type: 'tags'; file: FileItem }
+  | { type: 'info'; file: FileItem }
+
+interface Props {
+  dialog: Dialog | null
+  /** Abbrechen – bei jedem Dialog dieselbe Geste. */
+  onClose: () => void
+  fileTags: Record<string, Tag[]>
+  fileCorrespondents: Record<string, Correspondent>
+  renameFile(file: FileItem, name: string): void
+  renameFolder(folder: FolderItem, name: string): void
+  createFolder(name: string): void
+  deleteFile(file: FileItem): void
+  deleteFolder(folder: FolderItem): void
+  deleteMany(ids: string[]): void
+  moveFile(file: FileItem, targetId: string | null): void
+  moveFolder(folder: FolderItem, targetId: string | null): void
+  versionRestored(file: FileItem): void
+  tagsSaved(fileId: string, tags: Tag[]): void
+}
+
+export default function FileDialogs({
+  dialog, onClose, fileTags, fileCorrespondents,
+  renameFile, renameFolder, createFolder,
+  deleteFile, deleteFolder, deleteMany,
+  moveFile, moveFolder, versionRestored, tagsSaved,
+}: Props) {
+  if (!dialog) return null
+
+  switch (dialog.type) {
+    case 'rename':
+      return (
+        <InputDialog
+          title="Rename"
+          defaultValue={dialog.file.name}
+          confirmLabel="Rename"
+          onConfirm={name => renameFile(dialog.file, name)}
+          onCancel={onClose}
+        />
+      )
+
+    case 'rename-folder':
+      return (
+        <InputDialog
+          title="Rename folder"
+          defaultValue={dialog.folder.name}
+          confirmLabel="Rename"
+          onConfirm={name => renameFolder(dialog.folder, name)}
+          onCancel={onClose}
+        />
+      )
+
+    case 'new-folder':
+      return (
+        <InputDialog
+          title="New folder"
+          placeholder="Folder name"
+          confirmLabel="Create"
+          onConfirm={createFolder}
+          onCancel={onClose}
+        />
+      )
+
+    case 'confirm-delete-folder':
+      return (
+        <ConfirmDialog
+          title="Delete folder"
+          message={`Move "${dialog.folder.name}" and all its contents to the trash?`}
+          confirmLabel="Delete"
+          danger
+          onConfirm={() => deleteFolder(dialog.folder)}
+          onCancel={onClose}
+        />
+      )
+
+    case 'confirm-delete':
+      return (
+        <ConfirmDialog
+          title="Move to trash"
+          message={`Move "${dialog.file.name}" to the trash?`}
+          confirmLabel="Move to trash"
+          danger
+          onConfirm={() => deleteFile(dialog.file)}
+          onCancel={onClose}
+        />
+      )
+
+    case 'confirm-delete-many':
+      return (
+        <ConfirmDialog
+          title="Move to trash"
+          message={`Move ${dialog.ids.length} ${dialog.ids.length === 1 ? 'file' : 'files'} to the trash? You can restore them from there.`}
+          confirmLabel={`Move ${dialog.ids.length} to trash`}
+          danger
+          onConfirm={() => deleteMany(dialog.ids)}
+          onCancel={onClose}
+        />
+      )
+
+    case 'share':
+      return <ShareDialog file={dialog.file} onClose={onClose} />
+
+    case 'share-with':
+      return <ShareWithDialog resource={dialog.resource} onClose={onClose} />
+
+    case 'versions':
+      return (
+        <VersionsDialog
+          file={dialog.file}
+          onClose={onClose}
+          onRestored={versionRestored}
+        />
+      )
+
+    case 'info':
+      return (
+        <FileInfoDialog
+          file={dialog.file}
+          tags={fileTags[dialog.file.id] ?? []}
+          correspondent={fileCorrespondents[dialog.file.id]}
+          onClose={onClose}
+        />
+      )
+
+    case 'tags':
+      return (
+        <TagDialog
+          file={dialog.file}
+          current={fileTags[dialog.file.id] ?? []}
+          currentCorrespondent={fileCorrespondents[dialog.file.id]}
+          onClose={onClose}
+          onSaved={tags => tagsSaved(dialog.file.id, tags)}
+        />
+      )
+
+    case 'move-file':
+      return (
+        <MoveTo
+          title={`Move "${dialog.file.name}"`}
+          onConfirm={targetId => moveFile(dialog.file, targetId)}
+          onCancel={onClose}
+        />
+      )
+
+    case 'move-folder':
+      return (
+        <MoveTo
+          title={`Move "${dialog.folder.name}"`}
+          excludeId={dialog.folder.id}
+          onConfirm={targetId => moveFolder(dialog.folder, targetId)}
+          onCancel={onClose}
+        />
+      )
+  }
+}
diff --git a/frontend/src/components/files/FileToolbar.tsx b/frontend/src/components/files/FileToolbar.tsx
new file mode 100644
index 0000000..51d48c8
--- /dev/null
+++ b/frontend/src/components/files/FileToolbar.tsx
@@ -0,0 +1,147 @@
+import SearchBox from '../SearchBox'
+import { DownloadIcon, TrashIcon } from '../icons'
+import type { SearchHit } from '../../api/client'
+
+/**
+ * Die Bedienelemente rechts in der Kopfleiste des Dateibrowsers.
+ *
+ * Zwei Zustände, nicht zwei Leisten: Solange etwas ausgewählt ist, **ersetzt**
+ * die Auswahlleiste Suche und Sortierung. Sie danebenzustellen wäre auf einem
+ * schmalen Schirm eine dritte Zeile – und solange man auswählt, will man
+ * ohnehin nichts anderes.
+ */
+
+export type ViewMode = 'grid' | 'list'
+export type Sort = 'name-asc' | 'name-desc' | 'size-asc' | 'size-desc' | 'date-asc' | 'date-desc'
+
+export const sortLabels: Record<Sort, string> = {
+  'name-asc': 'Name A–Z',
+  'name-desc': 'Name Z–A',
+  'size-asc': 'Smallest first',
+  'size-desc': 'Largest first',
+  'date-asc': 'Oldest first',
+  'date-desc': 'Newest first',
+}
+
+interface Props {
+  selectedCount: number
+  onDownloadSelection: () => void
+  onTrashSelection: () => void
+  onClearSelection: () => void
+  onOpenFolder: (folderId: string | null, folderName: string) => void
+  onOpenFile: (hit: SearchHit, term: string) => void
+  sort: Sort
+  onSort: (s: Sort) => void
+  viewMode: ViewMode
+  onViewMode: (v: ViewMode) => void
+  onNewFolder: () => void
+  onUpload: () => void
+}
+
+export default function FileToolbar({
+  selectedCount, onDownloadSelection, onTrashSelection, onClearSelection,
+  onOpenFolder, onOpenFile, sort, onSort, viewMode, onViewMode,
+  onNewFolder, onUpload,
+}: Props) {
+  return (
+    <>
+      {selectedCount > 0 ? (
+        <div style={{ display: 'flex', alignItems: 'center', gap: 10, flex: 1, minWidth: 0 }}>
+          <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--color-text)', flexShrink: 0 }}>
+            {selectedCount} selected
+          </span>
+          <button onClick={onDownloadSelection} style={primaryButton}>
+            <DownloadIcon /> Download as ZIP
+          </button>
+          <button onClick={onTrashSelection} style={dangerButton}>
+            <TrashIcon /> Move to trash
+          </button>
+          <button onClick={onClearSelection} style={quietButton}>Clear</button>
+        </div>
+      ) : (
+        <SearchBox onOpenFolder={onOpenFolder} onOpenFile={onOpenFile} />
+      )}
+
+      <select
+        value={sort}
+        onChange={e => onSort(e.target.value as Sort)}
+        title="Sort by"
+        style={{
+          padding: '6px 8px', borderRadius: 8, fontSize: 12,
+          border: '1px solid var(--color-border)',
+          background: 'var(--color-surface-2)',
+          color: 'var(--color-text-muted)', cursor: 'pointer',
+        }}
+      >
+        {(Object.keys(sortLabels) as Sort[]).map(key => (
+          <option key={key} value={key}>{sortLabels[key]}</option>
+        ))}
+      </select>
+
+      <div style={{ display: 'flex', borderRadius: 8, overflow: 'hidden', border: '1px solid var(--color-border)' }}>
+        <button onClick={() => onViewMode('grid')} title="Grid view" style={toggleStyle(viewMode === 'grid')}>
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
+            <rect x="3" y="3" width="7" height="7" rx="1" /><rect x="14" y="3" width="7" height="7" rx="1" />
+            <rect x="3" y="14" width="7" height="7" rx="1" /><rect x="14" y="14" width="7" height="7" rx="1" />
+          </svg>
+        </button>
+        <button onClick={() => onViewMode('list')} title="List view" style={toggleStyle(viewMode === 'list')}>
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+            <line x1="8" y1="6" x2="21" y2="6" /><line x1="8" y1="12" x2="21" y2="12" /><line x1="8" y1="18" x2="21" y2="18" />
+            <circle cx="3" cy="6" r="1" fill="currentColor" /><circle cx="3" cy="12" r="1" fill="currentColor" /><circle cx="3" cy="18" r="1" fill="currentColor" />
+          </svg>
+        </button>
+      </div>
+
+      <button
+        onClick={onNewFolder}
+        title="New folder"
+        style={{
+          padding: '6px 14px', borderRadius: 8, border: '1px solid var(--color-border)',
+          background: 'transparent', color: 'var(--color-text-muted)', fontSize: 13, cursor: 'pointer',
+        }}
+      >
+        + Folder
+      </button>
+      <button
+        onClick={onUpload}
+        title="Upload files (drag & drop for folders)"
+        style={{
+          padding: '6px 14px', borderRadius: 8, border: 'none',
+          background: 'var(--color-primary)', color: '#fff', fontSize: 13, fontWeight: 600, cursor: 'pointer',
+        }}
+      >
+        Upload
+      </button>
+    </>
+  )
+}
+
+const primaryButton: React.CSSProperties = {
+  display: 'flex', alignItems: 'center', gap: 7,
+  padding: '6px 14px', borderRadius: 8, border: 'none', cursor: 'pointer',
+  fontSize: 12, fontWeight: 600, color: '#fff', background: 'var(--color-primary)',
+  flexShrink: 0,
+}
+
+const dangerButton: React.CSSProperties = {
+  display: 'flex', alignItems: 'center', gap: 7,
+  padding: '6px 14px', borderRadius: 8, cursor: 'pointer',
+  fontSize: 12, fontWeight: 600, flexShrink: 0,
+  border: '1px solid var(--color-danger)', background: 'transparent',
+  color: 'var(--color-danger)',
+}
+
+const quietButton: React.CSSProperties = {
+  padding: '6px 10px', borderRadius: 8, cursor: 'pointer', fontSize: 12,
+  border: '1px solid var(--color-border)', background: 'transparent',
+  color: 'var(--color-text-muted)', flexShrink: 0,
+}
+
+function toggleStyle(active: boolean): React.CSSProperties {
+  return {
+    padding: '6px 10px', border: 'none', cursor: 'pointer',
+    background: active ? 'var(--color-surface-2)' : 'transparent',
+    color: active ? 'var(--color-text)' : 'var(--color-text-muted)',
+  }
+}
diff --git a/frontend/src/components/files/menus.tsx b/frontend/src/components/files/menus.tsx
new file mode 100644
index 0000000..a0f8e86
--- /dev/null
+++ b/frontend/src/components/files/menus.tsx
@@ -0,0 +1,119 @@
+import type { MenuItem } from '../ContextMenu'
+import type { FileItem, FolderItem } from '../../api/client'
+import { isOfficeFile } from '../../api/client'
+import {
+  DownloadIcon, ShareIcon, HistoryIcon, RenameIcon, MoveIcon, TrashIcon,
+  FolderOpenIcon, StarIcon, CheckIcon, PeopleIcon, TagIcon, OfficeIcon, InfoIcon,
+} from '../icons'
+
+/**
+ * Die beiden Kontextmenüs des Dateibrowsers.
+ *
+ * Ausgelagert, weil sie **Beschreibung** sind und keine Ablaufsteuerung: eine
+ * Liste aus Beschriftung, Symbol und einem Ruf nach außen. Zwischen dem
+ * Hochladen und den Dialogen der Seite standen 120 Zeilen davon; hier lassen
+ * sie sich am Stück lesen – und die Reihenfolge der Einträge ist genau das,
+ * worüber man beim Lesen nachdenkt.
+ *
+ * Die Gruppierung ist Absicht und bleibt, wie sie war: erst, was man am
+ * häufigsten will, dann Teilen, dann Verwalten, ganz unten abgesetzt das
+ * Löschen.
+ */
+
+export interface FileActions {
+  /** Steht ein Office-Server bereit? Ohne ihn fehlt „Edit in Office". */
+  officeEnabled: boolean
+  download(file: FileItem): void
+  properties(file: FileItem): void
+  shareWithPeople(file: FileItem): void
+  shareLink(file: FileItem): void
+  organise(file: FileItem): void
+  editInOffice(file: FileItem): void
+  versionHistory(file: FileItem): void
+  setVersioning(file: FileItem, enabled: boolean): void
+  rename(file: FileItem): void
+  move(file: FileItem): void
+  remove(file: FileItem): void
+}
+
+export function fileMenuItems(file: FileItem, a: FileActions): MenuItem[] {
+  return [
+    { label: 'Download', icon: <DownloadIcon />, onClick: () => a.download(file) },
+    // Nachschlagen statt anfassen – deshalb direkt beim Herunterladen und
+    // nicht unten bei Umbenennen/Verschieben. Beantwortet Fragen, die die
+    // Kachel nicht beantwortet: Bildmaße, genaue Bytezahl, Prüfsumme.
+    { label: 'Properties…', icon: <InfoIcon />, onClick: () => a.properties(file) },
+    { separator: true },
+    { label: 'Share with people…', icon: <PeopleIcon />, onClick: () => a.shareWithPeople(file) },
+    { label: 'Share link…', icon: <ShareIcon />, onClick: () => a.shareLink(file) },
+    { separator: true },
+    // Zwischen Teilen und Verwalten: Etikettieren ist beides nicht ganz –
+    // es ordnet ein, ohne die Datei anzufassen.
+    // Hiess bis zum 23.08.2026 „Tags…". Der Dialog setzt inzwischen drei
+    // Dinge – Etiketten, Absender und Belegdatum –, und ein Menuepunkt,
+    // der nur eines davon nennt, laesst die anderen beiden unauffindbar.
+    { label: 'Organise…', icon: <TagIcon />, onClick: () => a.organise(file) },
+    // Nur bei passenden Dateien und nur, wenn es einen Office-Server gibt.
+    // Ein Punkt, der immer scheitert, ist schlimmer als keiner.
+    ...(a.officeEnabled && isOfficeFile(file.name)
+      ? [{ label: 'Edit in Office…', icon: <OfficeIcon />, onClick: () => a.editInOffice(file) }]
+      : []),
+    { separator: true },
+    { label: 'Version history…', icon: <HistoryIcon />, onClick: () => a.versionHistory(file) },
+    {
+      label: 'Keep versions',
+      icon: <CheckIcon />,
+      checked: file.versioning_enabled,
+      onClick: () => a.setVersioning(file, !file.versioning_enabled),
+    },
+    { separator: true },
+    { label: 'Rename…', icon: <RenameIcon />, onClick: () => a.rename(file) },
+    { label: 'Move to…', icon: <MoveIcon />, onClick: () => a.move(file) },
+    { separator: true },
+    { label: 'Delete', icon: <TrashIcon />, danger: true, onClick: () => a.remove(file) },
+  ]
+}
+
+export interface FolderActions {
+  isFavourite(folderId: string): boolean
+  open(folder: FolderItem): void
+  toggleFavourite(folder: FolderItem, isFav: boolean): void
+  shareWithPeople(folder: FolderItem): void
+  downloadZip(folder: FolderItem): void
+  rename(folder: FolderItem): void
+  move(folder: FolderItem): void
+  remove(folder: FolderItem): void
+}
+
+export function folderMenuItems(folder: FolderItem, a: FolderActions): MenuItem[] {
+  const isFav = a.isFavourite(folder.id)
+
+  // Ein Gruppenordner gehört der Gruppe, nicht dem, der ihn gerade offen hat.
+  // Umbenennen, Verschieben und Löschen fehlen deshalb ganz statt als
+  // Einträge, die nur eine Fehlermeldung liefern – der Server lehnt sie
+  // ohnehin ab. Alles *innerhalb* des Ordners bleibt normal bedienbar.
+  const isGroupFolder = folder.group_id !== null
+
+  return [
+    { label: 'Open', icon: <FolderOpenIcon />, onClick: () => a.open(folder) },
+    {
+      label: 'Favourite',
+      icon: <StarIcon filled={isFav} />,
+      checked: isFav,
+      onClick: () => a.toggleFavourite(folder, isFav),
+    },
+    ...(isGroupFolder ? [] : [
+      { separator: true as const },
+      { label: 'Share with people…', icon: <PeopleIcon />, onClick: () => a.shareWithPeople(folder) },
+      { separator: true as const },
+      // Ganzer Ordnerinhalt als Archiv – mit Unterordnern, ihre Struktur
+      // bleibt im Archiv erhalten.
+      { label: 'Download as ZIP', icon: <DownloadIcon />, onClick: () => a.downloadZip(folder) },
+      { separator: true as const },
+      { label: 'Rename…', icon: <RenameIcon />, onClick: () => a.rename(folder) },
+      { label: 'Move to…', icon: <MoveIcon />, onClick: () => a.move(folder) },
+      { separator: true as const },
+      { label: 'Delete', icon: <TrashIcon />, danger: true, onClick: () => a.remove(folder) },
+    ]),
+  ]
+}
diff --git a/frontend/src/components/files/sorting.test.ts b/frontend/src/components/files/sorting.test.ts
new file mode 100644
index 0000000..b17d982
--- /dev/null
+++ b/frontend/src/components/files/sorting.test.ts
@@ -0,0 +1,58 @@
+import { describe, expect, it } from 'vitest'
+import { sortFiles, sortFolders } from './sorting'
+import type { FileItem, FolderItem } from '../../api/client'
+
+function file(name: string, size: number, updated: string): FileItem {
+  return { id: name, name, size, updated_at: updated } as FileItem
+}
+function folder(name: string): FolderItem {
+  return { id: name, name } as FolderItem
+}
+
+const files = [
+  file('beta.txt', 300, '2026-01-03T00:00:00Z'),
+  file('alpha.txt', 100, '2026-01-02T00:00:00Z'),
+  file('gamma.txt', 200, '2026-01-01T00:00:00Z'),
+]
+
+const names = (list: { name: string }[]) => list.map(x => x.name)
+
+describe('sortFiles', () => {
+  it('sortiert nach Namen in beide Richtungen', () => {
+    expect(names(sortFiles(files, 'name-asc'))).toEqual(['alpha.txt', 'beta.txt', 'gamma.txt'])
+    expect(names(sortFiles(files, 'name-desc'))).toEqual(['gamma.txt', 'beta.txt', 'alpha.txt'])
+  })
+
+  it('sortiert nach Größe', () => {
+    expect(names(sortFiles(files, 'size-asc'))).toEqual(['alpha.txt', 'gamma.txt', 'beta.txt'])
+    expect(names(sortFiles(files, 'size-desc'))).toEqual(['beta.txt', 'gamma.txt', 'alpha.txt'])
+  })
+
+  it('sortiert nach Datum', () => {
+    expect(names(sortFiles(files, 'date-asc'))).toEqual(['gamma.txt', 'alpha.txt', 'beta.txt'])
+    expect(names(sortFiles(files, 'date-desc'))).toEqual(['beta.txt', 'alpha.txt', 'gamma.txt'])
+  })
+
+  it('lässt die übergebene Liste unangetastet', () => {
+    const before = names(files)
+    sortFiles(files, 'size-desc')
+    expect(names(files)).toEqual(before)
+  })
+})
+
+describe('sortFolders', () => {
+  const folders = [folder('Zeta'), folder('Alpha'), folder('Mitte')]
+
+  it('sortiert nach Namen', () => {
+    expect(names(sortFolders(folders, 'name-asc'))).toEqual(['Alpha', 'Mitte', 'Zeta'])
+    expect(names(sortFolders(folders, 'name-desc'))).toEqual(['Zeta', 'Mitte', 'Alpha'])
+  })
+
+  it('bleibt bei Größe und Datum aufsteigend beim Namen', () => {
+    // Ordner haben keine Größe und kein aussagekräftiges Datum – nach ihnen
+    // zu sortieren ergäbe eine zufällige Reihe, die nach Fehler aussieht.
+    for (const sort of ['size-asc', 'size-desc', 'date-asc', 'date-desc'] as const) {
+      expect(names(sortFolders(folders, sort))).toEqual(['Alpha', 'Mitte', 'Zeta'])
+    }
+  })
+})
diff --git a/frontend/src/components/files/sorting.ts b/frontend/src/components/files/sorting.ts
new file mode 100644
index 0000000..2680a22
--- /dev/null
+++ b/frontend/src/components/files/sorting.ts
@@ -0,0 +1,34 @@
+import type { FileItem, FolderItem } from '../../api/client'
+import type { Sort } from './FileToolbar'
+
+/**
+ * Die Reihenfolge in der Liste.
+ *
+ * Eigene Datei, weil das die einzigen Funktionen des Dateibrowsers sind, die
+ * man ohne Browser prüfen kann: hinein gehen Daten, heraus kommen Daten. Genau
+ * dafür gibt es Tests nebenan.
+ */
+
+/**
+ * Ordner haben keine Größe und kein Änderungsdatum, das in der Liste etwas
+ * aussagte – sie stehen deshalb **immer** nach Namen, nur die Richtung folgt
+ * der Einstellung. Nach „Größe" sortiert bliebe sonst eine Reihe Ordner in
+ * zufälliger Ordnung stehen, und das sieht nach Fehler aus.
+ */
+export function sortFolders(folders: FolderItem[], sort: Sort): FolderItem[] {
+  const desc = sort === 'name-desc'
+  return [...folders].sort((a, b) =>
+    desc ? b.name.localeCompare(a.name) : a.name.localeCompare(b.name))
+}
+
+export function sortFiles(files: FileItem[], sort: Sort): FileItem[] {
+  const [field, dir] = sort.split('-')
+  const factor = dir === 'desc' ? -1 : 1
+  return [...files].sort((a, b) => {
+    switch (field) {
+      case 'size': return (a.size - b.size) * factor
+      case 'date': return (new Date(a.updated_at).getTime() - new Date(b.updated_at).getTime()) * factor
+      default: return a.name.localeCompare(b.name) * factor
+    }
+  })
+}
diff --git a/frontend/src/components/pdf/PdfToolbar.tsx b/frontend/src/components/pdf/PdfToolbar.tsx
new file mode 100644
index 0000000..8f68740
--- /dev/null
+++ b/frontend/src/components/pdf/PdfToolbar.tsx
@@ -0,0 +1,279 @@
+/**
+ * Die Werkzeugleiste des PDF-Betrachters.
+ *
+ * Am Schreibtisch ein **Dreispaltenraster**: Steuerung links, Suche in der
+ * Mitte, Zoom rechts. Erst dadurch sitzt die Suche wirklich mittig – mit zwei
+ * Abstandhaltern in einer Reihe teilen sich diese nur den *Rest* neben der
+ * Steuerung, und das Feld landete gemessen 79 bzw. 142 Pixel daneben.
+ *
+ * Am Telefon reicht die Breite für drei Spalten nicht; dort bleibt es beim
+ * Umbruch, die Suche steht in der zweiten Zeile, und der Zoom rückt nach oben
+ * neben die Seitenzahl. Als eigene Zeile wäre die Leiste dreizeilig geworden –
+ * gemessen 190 statt 140 Pixel, und die gehen dem Dokument ab.
+ */
+import { useEffect, useRef, useState } from 'react'
+
+/**
+ * Ab welcher Breite die Leiste als Dreispaltenraster taugt.
+ *
+ * Gerechnet, nicht geschätzt: Die Steuerung links braucht 275 Pixel
+ * (zwei Knöpfe, Seitenzahl, Trenner, Zoom), die Suche in der Mitte 492 – und
+ * die rechte Spalte ist genauso breit wie die linke, sonst säße die Suche
+ * nicht mittig. Macht 2 × 275 + 492.
+ *
+ * **Vorher stand hier 720, und dazwischen war die Leiste kaputt:** Das Raster
+ * gab der linken Spalte weniger, als ihr Inhalt braucht, und die Knöpfe
+ * schrumpften mit. Gemessen bei 980 Pixeln Fensterbreite – erster Knopf 16
+ * statt 28 Pixel, bei 760 die ganze Gruppe auf 108 statt 275. Am Ende war von
+ * der Steuerung nichts mehr zu sehen.
+ */
+const minGridWidth = 2 * 275 + 492
+
+/**
+ * Breiten rechts vom Suchfeld – und damit das Maß für das Gegengewicht links.
+ * Beide Seiten gleich breit heißt: Das Feld sitzt in der Mitte der Leiste.
+ */
+const counterWidth = 54
+const hitButtonsWidth = 60
+/** Zähler + Knöpfe + die beiden Abstände dazwischen. */
+const hitsWidth = counterWidth + hitButtonsWidth + 6
+
+interface Props {
+  page: number
+  /** null, solange das Dokument noch lädt. */
+  pageCount: number | null
+  onGoPage: (n: number) => void
+
+  /** Angezeigte Zoomstufe in Prozent. */
+  percent: number
+  /** Steht der Zoom auf „einpassen"? Dann ist der Prozentknopf tot. */
+  isFit: boolean
+  onZoom: (dir: 1 | -1) => void
+  onFit: () => void
+
+  query: string
+  onQuery: (q: string) => void
+  searching: boolean
+  hitCount: number
+  hitIndex: number
+  /** Treffer aus der Texterkennung kennen nur die Seite, nicht die Stelle. */
+  pageOnlyHits: boolean
+  onStepHit: (delta: number) => void
+}
+
+export default function PdfToolbar({
+  page, pageCount, onGoPage,
+  percent, isFit, onZoom, onFit,
+  query, onQuery, searching, hitCount, hitIndex, pageOnlyHits, onStepHit,
+}: Props) {
+  const narrow = useNarrow()
+
+  /** Verkleinern, Prozentzahl (zugleich „einpassen"), Vergrößern. Einmal
+   *  beschrieben, an zwei Stellen gezeigt – breit rechts außen, schmal in der
+   *  ersten Zeile. */
+  const zoomGroup = (
+    <>
+      <ToolButton label="Zoom out" onClick={() => onZoom(-1)} glyph="minus" />
+      {/* Zurück zur eingepassten Größe. Bewusst kein Umschalter zwischen
+          „Breite" und „100 %": Seit die Einpassung bei 100 % gedeckelt ist,
+          sind das am Schreibtisch oft dieselbe Zahl – ein Knopf, der nichts
+          tut, ist schlimmer als keiner. */}
+      <button
+        onClick={onFit}
+        disabled={isFit}
+        title="Fit width"
+        style={{
+          fontSize: 12, color: 'var(--color-text-muted)', minWidth: 52, flexShrink: 0,
+          border: 'none', background: 'none',
+          cursor: isFit ? 'default' : 'pointer',
+          fontVariantNumeric: 'tabular-nums',
+        }}
+      >
+        {percent}%
+      </button>
+      <ToolButton label="Zoom in" onClick={() => onZoom(1)} glyph="plus" />
+    </>
+  )
+
+  return (
+    <div
+      ref={narrow.ref}
+      style={{
+        display: narrow.on ? 'flex' : 'grid',
+        gridTemplateColumns: narrow.on ? undefined : 'minmax(0, 1fr) auto minmax(0, 1fr)',
+        alignItems: 'center', gap: 8, flexWrap: 'wrap',
+        padding: '6px 10px', flexShrink: 0,
+        borderBottom: '1px solid var(--color-border)',
+        background: 'var(--color-surface)',
+      }}
+    >
+      <div style={{ display: 'flex', alignItems: 'center', gap: 8, minWidth: 0 }}>
+        <ToolButton label="Previous page" disabled={page <= 1}
+                    onClick={() => onGoPage(page - 1)} glyph="up" />
+        <span style={{
+          fontSize: 12, color: 'var(--color-text-muted)',
+          minWidth: 62, flexShrink: 0,
+          textAlign: 'center', fontVariantNumeric: 'tabular-nums',
+        }}>
+          {pageCount ? `${page} / ${pageCount}` : '…'}
+        </span>
+        <ToolButton label="Next page" disabled={!pageCount || page >= pageCount}
+                    onClick={() => onGoPage(page + 1)} glyph="down" />
+        {narrow.on && (
+          <>
+            <span style={{ width: 1, height: 20, flexShrink: 0, background: 'var(--color-border)' }} />
+            {zoomGroup}
+          </>
+        )}
+      </div>
+
+      {/* Suche im Dokument – die mittlere Spalte. Sie ist der Grund, aus dem
+          es diesen Betrachter gibt; rechts an den Rand gedrängt sah sie aus
+          wie ein Zusatz, der nicht recht dazugehört. */}
+      <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+        {/* Gegengewicht. Rechts vom Feld stehen Zähler und Sprungknöpfe;
+            ohne diesen Ausgleich säße die Gruppe zwar mittig, das **Feld**
+            aber 79 Pixel daneben – gemessen. Mittig soll das sein, was man
+            ansieht, nicht der Kasten drumherum.
+
+            Am Telefon fällt es weg: Dort gibt es nichts zu zentrieren, und
+            120 Pixel Leere hätten ein Drittel der Zeile gekostet – während
+            rechts der zweite Sprungknopf aus dem Bild fiel. */}
+        {!narrow.on && <span style={{ width: hitsWidth, flexShrink: 0 }} />}
+        <input
+          value={query}
+          onChange={e => onQuery(e.target.value)}
+          onKeyDown={e => {
+            if (e.key === 'Enter') {
+              e.preventDefault()
+              if (hitCount) onStepHit(e.shiftKey ? -1 : 1)
+            }
+            // Escape gehört hier dem Feld, nicht dem Schließen der Vorschau.
+            if (e.key === 'Escape' && query) { e.stopPropagation(); onQuery('') }
+          }}
+          placeholder="Find in document"
+          style={{
+            // Breiter als die 150 vom Anfang: In der Mitte einer 1440 Pixel
+            // breiten Leiste sah ein Feld in Knopfbreite aus wie ein
+            // Restposten. Ein Suchbegriff wie „Zahlungsbedingungen" passt
+            // jetzt auch hinein, ohne zu wandern.
+            width: 240, minWidth: 0,
+            padding: '5px 8px', borderRadius: 8, fontSize: 12,
+            border: '1px solid var(--color-border)',
+            background: 'var(--color-background)', color: 'var(--color-text)',
+            outline: 'none',
+          }}
+        />
+        <span style={{
+          fontSize: 11, color: 'var(--color-text-muted)',
+          // Feste Breite, nicht Mindestbreite: Sonst wüchse die rechte Seite
+          // mit „Searching…" und das Feld rutschte beim Tippen hin und her.
+          width: counterWidth, flexShrink: 0,
+          overflow: 'hidden', whiteSpace: 'nowrap',
+          fontVariantNumeric: 'tabular-nums',
+        }}>
+          {searching ? 'Searching…'
+            : query.trim().length < 2 ? ''
+            : hitCount === 0 ? 'No hits'
+            : `${hitIndex + 1} / ${hitCount}${pageOnlyHits ? ' · page' : ''}`}
+        </span>
+        {/* Der Platz für die beiden Knöpfe steht immer bereit, auch wenn sie
+            fehlen. Sonst rückte das Suchfeld beim ersten Treffer um knapp
+            dreißig Pixel zur Seite – ausgerechnet während man darin tippt.
+            Leerer Raum fällt niemandem auf, ein wanderndes Feld schon.
+
+            Erst zeigen, wenn es etwas zu springen gibt: Ohne Suche stünde
+            hier ein zweites Paar Winkel neben dem zum Blättern – zwei gleich
+            aussehende Knopfpaare für zwei ganz verschiedene Dinge. */}
+        <span style={{ width: hitButtonsWidth, flexShrink: 0, display: 'flex', gap: 4 }}>
+          {hitCount > 0 && (
+            <>
+              <ToolButton label="Previous hit" glyph="hitUp" onClick={() => onStepHit(-1)} />
+              <ToolButton label="Next hit" glyph="hitDown" onClick={() => onStepHit(1)} />
+            </>
+          )}
+        </span>
+      </div>
+
+      {/* Die dritte Spalte: der Zoom, rechtsbündig. Die Spalte war ohnehin
+          nötig, damit „Mitte" die Mitte der Leiste ist und nicht die Mitte
+          des Restes; jetzt trägt sie auch etwas. */}
+      {!narrow.on && (
+        <div style={{
+          display: 'flex', alignItems: 'center', gap: 8,
+          justifyContent: 'flex-end', minWidth: 0,
+        }}>
+          {zoomGroup}
+        </div>
+      )}
+    </div>
+  )
+}
+
+/**
+ * Reicht die Breite für drei Spalten?
+ *
+ * Gemessen wird die Leiste selbst, nicht das Fenster: Der Betrachter steht in
+ * einer Vorschau, die schmaler sein kann als der Bildschirm.
+ */
+function useNarrow() {
+  const ref = useRef<HTMLDivElement>(null)
+  const [on, setOn] = useState(false)
+  useEffect(() => {
+    const el = ref.current
+    if (!el) return
+    // Breite null heißt „noch nicht sichtbar", nicht „schmal". Ohne die
+    // Prüfung stand die Leiste beim Aufgehen der Vorschau im Umbruch-Zustand
+    // und blieb dort.
+    const set = () => { if (el.clientWidth >= 50) setOn(el.clientWidth < minGridWidth) }
+    set()
+    const ro = new ResizeObserver(set)
+    ro.observe(el)
+    return () => ro.disconnect()
+  }, [])
+  return { ref, on }
+}
+
+/**
+ * Die Knöpfe der Werkzeugleiste steuern **zwei verschiedene** Dinge: links
+ * die Seite, rechts die Fundstelle. Beide bewegen sich nach oben und unten –
+ * und mit demselben Winkel-Zeichen sahen beide Paare gleich aus. Wer die
+ * Leiste zum ersten Mal sieht, kann nicht wissen, welches welches ist.
+ *
+ * Deshalb zwei Formen: der schlanke Winkel blättert Seiten, der Pfeil mit
+ * Schaft springt zur nächsten Fundstelle. Der Pfeil erscheint ohnehin erst,
+ * wenn es Fundstellen gibt.
+ */
+const chevrons: Record<string, string> = {
+  up: '18 15 12 9 6 15',
+  down: '6 9 12 15 18 9',
+}
+
+function ToolButton({ label, onClick, disabled, glyph }: {
+  label: string; onClick: () => void; disabled?: boolean
+  glyph: 'up' | 'down' | 'plus' | 'minus' | 'hitUp' | 'hitDown'
+}) {
+  return (
+    <button
+      onClick={onClick}
+      disabled={disabled}
+      title={label}
+      aria-label={label}
+      style={{
+        width: 28, height: 28, flexShrink: 0, borderRadius: 8, border: 'none',
+        background: 'none', color: 'var(--color-text-muted)',
+        cursor: disabled ? 'default' : 'pointer', opacity: disabled ? 0.35 : 1,
+        display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 0,
+      }}
+    >
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none"
+           stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+        {glyph === 'plus' && <><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></>}
+        {glyph === 'minus' && <line x1="5" y1="12" x2="19" y2="12" />}
+        {(glyph === 'up' || glyph === 'down') && <polyline points={chevrons[glyph]} />}
+        {glyph === 'hitUp' && <><line x1="12" y1="19" x2="12" y2="6" /><polyline points="6 12 12 6 18 12" /></>}
+        {glyph === 'hitDown' && <><line x1="12" y1="5" x2="12" y2="18" /><polyline points="6 12 12 18 18 12" /></>}
+      </svg>
+    </button>
+  )
+}
diff --git a/frontend/src/components/pdf/geometry.test.ts b/frontend/src/components/pdf/geometry.test.ts
new file mode 100644
index 0000000..444ff5d
--- /dev/null
+++ b/frontend/src/components/pdf/geometry.test.ts
@@ -0,0 +1,38 @@
+import { describe, expect, it } from 'vitest'
+import { commonWidth, padOf } from './geometry'
+
+describe('padOf', () => {
+  it('gibt am Telefon fast keinen Rand', () => {
+    expect(padOf(412)).toBe(4)
+    expect(padOf(559)).toBe(4)
+  })
+  it('gibt am Schreibtisch den vollen Rand', () => {
+    expect(padOf(560)).toBe(16)
+    expect(padOf(1440)).toBe(16)
+  })
+})
+
+describe('commonWidth', () => {
+  it('nimmt die Mehrheit, nicht die breiteste Seite', () => {
+    // Neun hochkante Seiten und ein Anhang im Querformat: Nach der breitesten
+    // gerechnet standen die neun auf 46 % statt 65 % – auf einem 412 Pixel
+    // breiten Telefon der Unterschied zwischen lesbar und nicht.
+    const sizes = [
+      ...Array.from({ length: 9 }, () => ({ w: 595, h: 842 })),
+      { w: 842, h: 595 },
+    ]
+    expect(commonWidth(sizes)).toBe(595)
+  })
+
+  it('nimmt bei Gleichstand die breitere – dann ragt nichts heraus', () => {
+    expect(commonWidth([{ w: 595, h: 842 }, { w: 842, h: 595 }])).toBe(842)
+  })
+
+  it('rundet auf ganze Pixel, damit 594,96 und 595,04 dieselbe Breite sind', () => {
+    expect(commonWidth([{ w: 594.96, h: 842 }, { w: 595.04, h: 842 }])).toBe(595)
+  })
+
+  it('liefert nie null – damit niemand durch null teilt', () => {
+    expect(commonWidth([])).toBe(1)
+  })
+})
diff --git a/frontend/src/components/pdf/geometry.ts b/frontend/src/components/pdf/geometry.ts
new file mode 100644
index 0000000..cafc7f9
--- /dev/null
+++ b/frontend/src/components/pdf/geometry.ts
@@ -0,0 +1,50 @@
+/**
+ * Maße der Seitenliste: Ränder und die Breite, gegen die eingepasst wird.
+ */
+
+/** Abstand zwischen zwei Seiten, in Pixeln. Auch der Wert, mit dem gerechnet
+ *  wird, wenn die sichtbare Seite bestimmt wird. */
+export const pageGap = 12
+
+/**
+ * Innenabstand der Seitenliste. Am Telefon fast keiner: Dort ist die Breite
+ * das knappe Gut, und ein 16-Pixel-Rand links und rechts kostet zusammen mehr
+ * als ein Zehntel der Darstellungsgröße.
+ */
+export function padOf(width: number): number {
+  return width < 560 ? 4 : 16
+}
+
+export interface PageSize { w: number; h: number }
+
+/**
+ * Die häufigste Seitenbreite eines Dokuments.
+ *
+ * Vorher stand hier die **breiteste** Seite, mit dem Gedanken: Unterschiedlich
+ * breite Seiten unterschiedlich zu skalieren sieht nach Fehler aus. Das
+ * stimmt – nur ist der Preis höher als der Gewinn.
+ *
+ * Gemessen an einem zehnseitigen Dokument, in dem **eine** Seite quer liegt:
+ * Die neun hochkanten Seiten standen dadurch auf 46 % statt 65 %. Auf einem
+ * 412 Pixel breiten Telefon ist das der Unterschied zwischen lesbar und nicht.
+ * Eine einzelne Querformat-Seite – ein Anhang, eine breite Tabelle – bestimmt
+ * so die Darstellung des ganzen Dokuments.
+ *
+ * Jetzt entscheidet die Mehrheit. Die abweichende Seite ragt dann über den
+ * Rand und lässt sich seitlich schieben; das ist genau das, was man bei ihr
+ * ohnehin tun will.
+ *
+ * Bei Gleichstand gewinnt die breitere – dann ragt lieber nichts heraus.
+ */
+export function commonWidth(sizes: PageSize[]): number {
+  const count = new Map<number, number>()
+  for (const s of sizes) {
+    const w = Math.round(s.w)
+    count.set(w, (count.get(w) ?? 0) + 1)
+  }
+  let best = 0, bestN = 0
+  for (const [w, n] of count) {
+    if (n > bestN || (n === bestN && w > best)) { best = w; bestN = n }
+  }
+  return best || 1
+}
diff --git a/frontend/src/components/pdf/text.test.ts b/frontend/src/components/pdf/text.test.ts
new file mode 100644
index 0000000..686fd04
--- /dev/null
+++ b/frontend/src/components/pdf/text.test.ts
@@ -0,0 +1,54 @@
+import { describe, expect, it } from 'vitest'
+import { countIn, wordAround } from './text'
+
+describe('countIn', () => {
+  it('zählt jede Fundstelle mit laufender Nummer', () => {
+    expect(countIn('la la la', 'la', 3, true)).toEqual([
+      { page: 3, nth: 0, exact: true },
+      { page: 3, nth: 1, exact: true },
+      { page: 3, nth: 2, exact: true },
+    ])
+  })
+
+  it('überlappt nicht', () => {
+    // „aa" in „aaa" ist eine Fundstelle, nicht zwei – sonst zeigte der Zähler
+    // mehr Treffer, als sich anspringen lassen.
+    expect(countIn('aaa', 'aa', 1, true)).toHaveLength(1)
+  })
+
+  it('meldet leer, wenn nichts drinsteht', () => {
+    expect(countIn('Rechnung', 'quittung', 1, false)).toEqual([])
+  })
+
+  it('merkt sich die Quelle', () => {
+    expect(countIn('scan', 'scan', 7, false)[0]).toEqual({ page: 7, nth: 0, exact: false })
+  })
+})
+
+describe('wordAround', () => {
+  it('weitet auf das ganze Wort aus', () => {
+    const text = 'Display'
+    expect(wordAround(text, 3, 5)).toEqual([0, 7])
+  })
+
+  it('hört an Wortgrenzen auf', () => {
+    const text = 'Salat Löffel'
+    // „at" in „Salat" darf nicht über das Leerzeichen hinauslaufen.
+    expect(wordAround(text, 3, 5)).toEqual([0, 5])
+  })
+
+  it('zählt Ziffern und Umlaute zum Wort', () => {
+    expect(wordAround('Größe42', 2, 3)).toEqual([0, 7])
+  })
+
+  it('lässt sehr lange Zeichenketten ungedehnt', () => {
+    // Eine Prüfsumme ist ein „Wort" von sechzig Zeichen. Zwei Buchstaben darin
+    // dürfen nicht die halbe Zeile einfärben.
+    const long = 'a'.repeat(60)
+    expect(wordAround(long, 10, 12)).toEqual([10, 12])
+  })
+
+  it('lässt einen Treffer ohne Nachbarn, wie er ist', () => {
+    expect(wordAround('ab', 0, 2)).toEqual([0, 2])
+  })
+})
diff --git a/frontend/src/components/pdf/text.ts b/frontend/src/components/pdf/text.ts
new file mode 100644
index 0000000..c7b7b57
--- /dev/null
+++ b/frontend/src/components/pdf/text.ts
@@ -0,0 +1,61 @@
+/**
+ * Suchen im Text eines Dokuments – reine Zeichenkettenarbeit, ohne DOM.
+ */
+
+/**
+ * Eine Fundstelle: Seite und die wievielte auf dieser Seite.
+ *
+ * `exact` unterscheidet die beiden Quellen. Bringt das PDF eigenen Text mit,
+ * steht die Stelle im Dokument und lässt sich einfärben. Bei einem **Scan**
+ * steht dort nur ein Bild; der Text kommt dann aus der Erkennung auf dem
+ * Server, und der weiß zwar die Seite, aber nicht den Ort auf dem Blatt –
+ * dafür müssten die Koordinaten der Erkennung aufbewahrt werden.
+ */
+export interface Hit { page: number; nth: number; exact: boolean }
+
+/**
+ * Sehr lange „Wörter" (Adressen, Prüfsummen) bleiben ungedehnt – sonst wäre
+ * eine halbe Zeile eingefärbt, weil irgendwo darin zwei Buchstaben passten.
+ */
+const maxWordSnap = 40
+
+const isWordChar = (c: string) => /[\p{L}\p{N}]/u.test(c)
+
+/**
+ * Weitet eine Fundstelle auf das **ganze Wort** aus.
+ *
+ * Der Grund ist gemessen, nicht Geschmack. Über dem gemalten Bild liegt eine
+ * unsichtbare *Ersatz*schrift – hier `sans-serif 13,5px` für eine
+ * Serifenschrift im PDF. PDF.js dehnt sie über `--scale-x` (gemessen 0,937),
+ * damit die **Zeile insgesamt** stimmt. Die Buchstaben *darin* sitzen deshalb
+ * um ein bis drei Pixel anders als die gemalten.
+ *
+ * Bei einem ganzen Wort fällt das nicht auf. Bei „la" mitten in „Display"
+ * schon: Der Kasten ist zehn Pixel breit, und drei Pixel Versatz sehen aus,
+ * als läge er auf den falschen Buchstaben. Genau das war zu sehen.
+ *
+ * Gegenprobe im Browser: Unser Kasten und die Auswahl, die der Browser beim
+ * Markieren mit der Maus malt, liegen auf demselben Pixel (357,08 / 10,38).
+ * Der Versatz ist also nicht unser Fehler – er lässt sich nur nicht
+ * wegrechnen, ohne die Schrift des Dokuments zu besitzen. Ihn zu *umgehen*
+ * geht: ganze Wörter markieren, deren Ränder an Wortgrenzen liegen.
+ */
+export function wordAround(text: string, at: number, to: number): [number, number] {
+  let s = at, e = to
+  while (s > 0 && isWordChar(text[s - 1])) s--
+  while (e < text.length && isWordChar(text[e])) e++
+  return e - s > maxWordSnap ? [at, to] : [s, e]
+}
+
+/** Zählt die Fundstellen eines Suchworts in einem Stück Text. */
+export function countIn(haystack: string, needle: string, page: number, exact: boolean): Hit[] {
+  const out: Hit[] = []
+  let from = 0, nth = 0
+  for (;;) {
+    const at = haystack.indexOf(needle, from)
+    if (at < 0) break
+    out.push({ page, nth: nth++, exact })
+    from = at + needle.length
+  }
+  return out
+}
diff --git a/frontend/src/components/pdf/zoom.test.ts b/frontend/src/components/pdf/zoom.test.ts
new file mode 100644
index 0000000..6d58c35
--- /dev/null
+++ b/frontend/src/components/pdf/zoom.test.ts
@@ -0,0 +1,61 @@
+import { describe, expect, it } from 'vitest'
+import { maxScale, minScale, nextFine, nextStep, zoomSteps } from './zoom'
+
+describe('nextStep – die Leiter der Knöpfe', () => {
+  it('geht zur nächsten Stufe', () => {
+    expect(nextStep(1, 1)).toBe(1.25)
+    expect(nextStep(1, -1)).toBe(0.75)
+  })
+
+  it('überspringt eine krumme Zwischengröße nicht', () => {
+    // „Einpassen" liefert oft etwas wie 0,653 – der erste Schritt muss auf
+    // die nächste Sprosse führen, nicht auf die übernächste.
+    expect(nextStep(0.653, 1)).toBe(0.75)
+    expect(nextStep(0.653, -1)).toBe(0.5)
+  })
+
+  it('meldet am Ende der Leiter nichts', () => {
+    expect(nextStep(zoomSteps.at(-1)!, 1)).toBeUndefined()
+    expect(nextStep(zoomSteps[0], -1)).toBeUndefined()
+  })
+})
+
+describe('nextFine – das Fünferraster für Finger und Mausrad', () => {
+  it('rastet auf runde Fünferzahlen', () => {
+    expect(nextFine(1, 1)).toBeCloseTo(1.05)
+    expect(nextFine(1, -1)).toBeCloseTo(0.95)
+    expect(nextFine(0.653, 1)).toBeCloseTo(0.7)
+    expect(nextFine(0.653, -1)).toBeCloseTo(0.65)
+  })
+
+  it('bleibt bei 1,1 nicht stehen', () => {
+    // 1,1 × 100 ergibt in Fließkomma 110.00000000000001. Ohne die Rundung
+    // vorweg war die „nächste kleinere Fünferzahl" wieder 110 – gemessen kam
+    // beim Zuziehen genau eine Stufe, danach nichts mehr.
+    expect(nextFine(1.1, -1)).toBeCloseTo(1.05)
+    expect(nextFine(1.1, 1)).toBeCloseTo(1.15)
+  })
+
+  it('hält sich an die Grenzen', () => {
+    expect(nextFine(maxScale, 1)).toBeUndefined()
+    expect(nextFine(minScale, -1)).toBeUndefined()
+    expect(nextFine(3.98, 1)).toBeCloseTo(maxScale)
+  })
+
+  it('macht in jeder Richtung tatsächlich einen Schritt', () => {
+    // Von ganz unten bis an den Anschlag: Jeder Schritt muss echt nach oben
+    // gehen. Bliebe einer stehen, liefe die Schleife bis zur Obergrenze
+    // durch, ohne den Anschlag zu erreichen – genau der Fehler von 1,1.
+    let s = minScale
+    let steps = 0
+    for (; steps < 1000; steps++) {
+      const next = nextFine(s, 1)
+      if (next === undefined) break
+      expect(next).toBeGreaterThan(s)
+      s = next
+    }
+    expect(s).toBeCloseTo(maxScale)
+    // (4 − 0,25) / 0,05 = 75 Schritte, dazu einer für den Abbruch.
+    expect(steps).toBe(75)
+  })
+})
diff --git a/frontend/src/components/pdf/zoom.ts b/frontend/src/components/pdf/zoom.ts
new file mode 100644
index 0000000..2694eb4
--- /dev/null
+++ b/frontend/src/components/pdf/zoom.ts
@@ -0,0 +1,55 @@
+/**
+ * Die Zoomstufen des Betrachters – ohne DOM, ohne PDF.js, damit sie sich
+ * prüfen lassen. Die Regeln darin sind alle an echten Dokumenten gemessen
+ * worden, und genau solche Regeln verdienen einen Test.
+ */
+
+/** Zoomstufen der **Knöpfe**. „Fit" liegt außerhalb und wird gerechnet. */
+export const zoomSteps = [0.5, 0.75, 1, 1.25, 1.5, 2, 3]
+
+/**
+ * Zoomschritt für Finger und Mausrad: **fünf Prozentpunkte**, auf runde
+ * Zahlen gerastet – 65, 70, 75, 80 …
+ *
+ * Zuerst war es ein fester Faktor (fünf Prozent *vom aktuellen Wert*).
+ * Rechnerisch ist das die sauberere Größe: Sie fühlt sich unten wie oben
+ * gleich an. Abzulesen war sie aber nicht – die Anzeige sprang um drei
+ * Punkte, dann um vier, dann um sechs. Wer eine Zahl sieht, erwartet ein
+ * Raster, und das hier ist eines.
+ *
+ * Der Preis steht dazu: Bei 400 % ist ein Schritt gut ein Prozent, bei 25 %
+ * ein Fünftel. Das gleicht die Geste aus, nicht die Rasterung.
+ */
+export const zoomStepPercent = 5
+export const minScale = 0.25
+export const maxScale = 4
+
+/** Die nächste Stufe der Knopfleiter, oder undefined an ihrem Ende. */
+export function nextStep(now: number, dir: 1 | -1): number | undefined {
+  return dir > 0
+    ? zoomSteps.find(s => s > now + 0.001)
+    : [...zoomSteps].reverse().find(s => s < now - 0.001)
+}
+
+/**
+ * Die nächste runde Fünferzahl, für Finger und Mausrad. Undefined am
+ * Anschlag.
+ *
+ * Gerechnet wird in Prozentpunkten und nicht in Bruchteilen: Der Nutzer
+ * liest Prozente, und ein Raster, das nur *fast* auf 70 trifft, ist keins.
+ * Aus einer krummen Ausgangsgröße – „einpassen" ergibt zum Beispiel 65,3 %
+ * – führt der erste Schritt auf die nächste runde Zahl, danach geht es in
+ * Fünfern weiter.
+ */
+export function nextFine(now: number, dir: 1 | -1): number | undefined {
+  // **Gerundet, bevor gerechnet wird.** 1,1 × 100 ergibt in Fließkomma
+  // 110.00000000000001, und daraus wird die „nächste kleinere Fünferzahl"
+  // wieder 110 – der Zoom blieb dann stehen. Gemessen: Beim Zuziehen kam
+  // genau eine Stufe, danach nichts mehr.
+  const p = Math.round(now * 100 * 1e6) / 1e6
+  const raw = dir > 0
+    ? Math.floor(p / zoomStepPercent + 1) * zoomStepPercent
+    : Math.ceil(p / zoomStepPercent - 1) * zoomStepPercent
+  const next = Math.min(maxScale * 100, Math.max(minScale * 100, raw)) / 100
+  return Math.abs(next - now) < 0.001 ? undefined : next
+}
diff --git a/frontend/src/format.test.ts b/frontend/src/format.test.ts
new file mode 100644
index 0000000..8aaaade
--- /dev/null
+++ b/frontend/src/format.test.ts
@@ -0,0 +1,25 @@
+import { describe, expect, it } from 'vitest'
+import { formatBytes } from './format'
+
+describe('formatBytes', () => {
+  it('lässt kleine Zahlen als Bytes stehen', () => {
+    expect(formatBytes(0)).toBe('0 B')
+    expect(formatBytes(1023)).toBe('1023 B')
+  })
+
+  it('wechselt bei 1024 die Einheit, nicht bei 1000', () => {
+    expect(formatBytes(1000)).toBe('1000 B')
+    expect(formatBytes(1024)).toBe('1.0 KB')
+    expect(formatBytes(1024 ** 2)).toBe('1.0 MB')
+    expect(formatBytes(1024 ** 3)).toBe('1.0 GB')
+  })
+
+  it('rundet auf eine Nachkommastelle', () => {
+    expect(formatBytes(1536)).toBe('1.5 KB')
+    expect(formatBytes(1.44 * 1024 ** 2)).toBe('1.4 MB')
+  })
+
+  it('bleibt bei sehr großen Zahlen bei GB', () => {
+    expect(formatBytes(2048 * 1024 ** 3)).toBe('2048.0 GB')
+  })
+})
diff --git a/frontend/src/format.ts b/frontend/src/format.ts
new file mode 100644
index 0000000..2d82923
--- /dev/null
+++ b/frontend/src/format.ts
@@ -0,0 +1,23 @@
+/**
+ * Zahlen, wie ein Mensch sie liest.
+ *
+ * Stand bis hierher in `pages/FileBrowser.tsx` – und **fünf** Module holten
+ * sie von dort: Papierkorb, Etiketten, „Geteilt mit mir", Fassungen,
+ * Eigenschaften. Eine Seite als Fundort für eine Rechenfunktion heißt, dass
+ * jedes dieser Module am Dateibrowser hängt, samt allem, was der mitbringt.
+ * Zum Umbenennen einer Zahl musste man eine Seite anfassen.
+ */
+
+/**
+ * Byte-Zahl in Kilo, Mega, Giga.
+ *
+ * Tausend-vierundzwanzig, nicht tausend: Das ist die Einheit, in der
+ * Dateisysteme und Betriebssysteme rechnen – eine Datei, die dort „1,4 MB"
+ * heißt, soll hier nicht 1,5 heißen.
+ */
+export function formatBytes(n: number): string {
+  if (n < 1024) return `${n} B`
+  if (n < 1024 ** 2) return `${(n / 1024).toFixed(1)} KB`
+  if (n < 1024 ** 3) return `${(n / 1024 ** 2).toFixed(1)} MB`
+  return `${(n / 1024 ** 3).toFixed(1)} GB`
+}
diff --git a/frontend/src/hooks/useUploads.ts b/frontend/src/hooks/useUploads.ts
new file mode 100644
index 0000000..d5def0d
--- /dev/null
+++ b/frontend/src/hooks/useUploads.ts
@@ -0,0 +1,248 @@
+import { useCallback, useRef, useState, type DragEvent } from 'react'
+import { foldersApi, uploadWithProgress, APIError } from '../api/client'
+import type { UploadItem } from '../components/UploadQueue'
+import { useInternalDrag } from './useInternalDrag'
+
+/**
+ * Alles, was mit dem Hineinlegen von Dateien zu tun hat: die Warteschlange,
+ * das Hochladen einzelner Dateien, das Nachbauen eines ganzen Ordnerbaums und
+ * die Ablage-Gesten am Fenster.
+ *
+ * Stand bis hierher mitten im Dateibrowser – rund 180 Zeilen zwischen
+ * Kontextmenüs und Dialogen, die mit dem Anzeigen eines Ordners nichts zu tun
+ * haben. Sie hängen untereinander eng zusammen (die Warteschlange gehört zum
+ * Fortschritt, der Fortschritt zum Hochladen) und mit dem Rest der Seite fast
+ * gar nicht: heraus kommen eine Kennung, ein Zustand und ein „fertig".
+ *
+ * **Verhalten unverändert.** Verschoben, nicht umgeschrieben – bis auf die
+ * Stellen, die unten eigens vermerkt sind.
+ */
+
+/**
+ * Eine Kennung für die Warteschlange, ohne den Server zu fragen.
+ *
+ * `crypto.randomUUID` gibt es nur in einem sicheren Kontext (https oder
+ * localhost). Hinter einer weitergeleiteten Portnummer – VS Code, ein Tunnel –
+ * fehlt es, und ohne den Rückfall bräche das Hochladen dort mit einem
+ * Tippfehler-artigen Fehler ab.
+ */
+function uid(): string {
+  if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
+    return crypto.randomUUID()
+  }
+  return `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 10)}`
+}
+
+/** Wie viele Dateien gleichzeitig unterwegs sind. */
+const concurrency = 3
+
+interface Options {
+  /** Ordner, in den gelegt wird – undefined heißt Wurzelverzeichnis. */
+  folderId?: string
+  /** Läuft, wenn alles durch ist: Liste neu holen, Speicherbalken nachziehen. */
+  onFinished: () => Promise<void> | void
+}
+
+export function useUploads({ folderId, onFinished }: Options) {
+  const [items, setItems] = useState<UploadItem[]>([])
+  const [dragging, setDragging] = useState(false)
+  const isInternalDrag = useInternalDrag()
+
+  /**
+   * Der Zielordner in einem Ref – **nicht** in der Abhängigkeitsliste.
+   *
+   * Sonst zeigten die Ablage-Gesten bei jedem Ordnerwechsel auf neue
+   * Funktionen, und ein Zug, der über dem Fenster begonnen hat, liefe gegen
+   * einen abgemeldeten Zuhörer. Gelesen wird er erst, wenn wirklich abgelegt
+   * wird – dann ist er aktuell.
+   */
+  const folderRef = useRef(folderId)
+  folderRef.current = folderId
+
+  const dismiss = useCallback((id: string) => {
+    setItems(u => u.filter(x => x.id !== id))
+  }, [])
+
+  /** Fortschritt, Erfolg und Fehler einer einzelnen Zeile. */
+  const patch = useCallback((id: string, change: Partial<UploadItem>) => {
+    setItems(u => u.map(x => (x.id === id ? { ...x, ...change } : x)))
+  }, [])
+
+  /** Eine Datei hochladen und ihre Zeile nachführen. Wirft nicht. */
+  const send = useCallback(async (id: string, file: File, target: string | undefined) => {
+    try {
+      await uploadWithProgress(file, target, ({ percent }) => patch(id, { progress: percent }))
+      patch(id, { progress: 100, status: 'done' })
+    } catch (err) {
+      patch(id, { status: 'error', error: err instanceof APIError ? err.message : 'Upload failed' })
+    }
+  }, [patch])
+
+  /** Einzelne Dateien – aus dem Auswahlfenster oder per Ablage. */
+  const uploadFiles = useCallback(async (fileList: File[]) => {
+    const target = folderRef.current
+    const queued = fileList.map(file => ({ id: uid(), file }))
+    setItems(u => [...u, ...queued.map(({ id, file }) => ({
+      id, name: file.name, progress: 0, status: 'uploading' as const,
+    }))])
+
+    // Drei gleichzeitig: Ein Dutzend Belege auf einmal geht so spürbar
+    // schneller, ohne die Verbindung zu verstopfen.
+    const queue = [...queued]
+    await Promise.all(
+      Array.from({ length: Math.min(concurrency, queue.length) }, async () => {
+        while (queue.length > 0) {
+          const item = queue.shift()!
+          await send(item.id, item.file, target)
+        }
+      }),
+    )
+    await onFinished()
+  }, [send, onFinished])
+
+  /**
+   * Ein abgelegter Ordner: Der Baum wird unter dem aktuellen Ordner
+   * nachgebaut, dann werden die Dateien hineingelegt.
+   */
+  const uploadFolder = useCallback(async (entries: { file: File; relativePath: string }[]) => {
+    if (!entries.length) return
+    const target = folderRef.current
+
+    // "a/b" → Ordner-ID. Ohne den Merkzettel legte jede Datei ihren
+    // Elternordner erneut an.
+    const known = new Map<string, string>()
+
+    async function ensureFolder(relPath: string): Promise<string | undefined> {
+      if (!relPath) return target
+      const cached = known.get(relPath)
+      if (cached) return cached
+      let parent = target
+      let acc = ''
+      for (const part of relPath.split('/')) {
+        acc = acc ? `${acc}/${part}` : part
+        const hit = known.get(acc)
+        if (hit) { parent = hit; continue }
+        const f = await foldersApi.create(part, parent)
+        known.set(acc, f.id)
+        parent = f.id
+      }
+      return parent
+    }
+
+    // Nach Ordner gruppieren: So wird jeder Zweig einmal angelegt, nicht
+    // einmal je Datei darin.
+    const grouped = new Map<string, { file: File; relativePath: string }[]>()
+    for (const entry of entries) {
+      const parts = entry.relativePath.split('/')
+      parts.pop()
+      const key = parts.join('/')
+      const list = grouped.get(key)
+      if (list) list.push(entry)
+      else grouped.set(key, [entry])
+    }
+
+    const queued = entries.map(e => ({ id: uid(), entry: e }))
+    setItems(u => [...u, ...queued.map(({ id, entry }) => ({
+      id, name: entry.relativePath, progress: 0, status: 'uploading' as const,
+    }))])
+
+    // Die Zeilen stehen in der Reihenfolge von `entries`, hochgeladen wird
+    // nach Ordnern gruppiert. Der Zeiger sucht deshalb die Zeile zur Datei,
+    // statt mitzuzählen – vorher lief ein Zähler mit, und sobald die
+    // Gruppierung die Reihenfolge änderte, hing der Fortschritt an der
+    // falschen Zeile.
+    const idOf = new Map(queued.map(q => [q.entry, q.id]))
+
+    for (const [relPath, files] of grouped) {
+      const into = await ensureFolder(relPath).catch(() => target)
+      for (const entry of files) {
+        const id = idOf.get(entry)
+        if (id) await send(id, entry.file, into)
+      }
+    }
+    await onFinished()
+  }, [send, onFinished])
+
+  /**
+   * Ablage am Fenster.
+   *
+   * Was in dieser Seite losgezogen ist, ist **kein** Upload: Ein vom Browser
+   * begonnener Bild-Zug bringt `Files` mit, ohne dass jemand eine Datei
+   * hineinlegen wollte. Siehe hooks/useInternalDrag.
+   */
+  const onDrop = useCallback(async (e: DragEvent) => {
+    e.preventDefault()
+    setDragging(false)
+    const t = e.dataTransfer.types
+    if (t.includes('aether-file-id') || t.includes('aether-folder-id')) return
+    if (isInternalDrag()) return
+
+    // Synchron einsammeln: Die Liste gilt nur während des Ereignisses selbst,
+    // danach ist sie leer.
+    const entries: FileSystemEntry[] = []
+    const list = e.dataTransfer.items
+    for (let i = 0; i < (list?.length ?? 0); i++) {
+      const entry = list[i].webkitGetAsEntry?.()
+      if (entry) entries.push(entry)
+    }
+    const files = Array.from(e.dataTransfer.files)
+
+    if (entries.some(en => en.isDirectory)) {
+      const gathered = await gatherFromEntries(entries)
+      if (gathered.length) await uploadFolder(gathered)
+    } else if (files.length) {
+      await uploadFiles(files)
+    }
+  }, [isInternalDrag, uploadFiles, uploadFolder])
+
+  const onDragOver = useCallback((e: DragEvent) => {
+    e.preventDefault()
+    const t = e.dataTransfer.types
+    if (t.includes('Files') && !t.includes('aether-file-id') && !t.includes('aether-folder-id')
+        && !isInternalDrag()) setDragging(true)
+  }, [isInternalDrag])
+
+  const onDragLeave = useCallback((e: DragEvent) => {
+    if (!e.currentTarget.contains(e.relatedTarget as Node)) setDragging(false)
+  }, [])
+
+  return {
+    items, dismiss, dragging, uploadFiles,
+    /** Direkt an das äußerste Element der Seite hängen. */
+    dropProps: { onDragOver, onDragLeave, onDrop },
+  }
+}
+
+/**
+ * Einen abgelegten Ordnerbaum in Paare aus Datei und Pfad auflösen.
+ *
+ * `readEntries` liefert in Häppchen – solange nachfragen, bis nichts mehr
+ * kommt. Wer den ersten Aufruf für die ganze Liste hält, verliert bei einem
+ * Ordner mit mehr als hundert Einträgen den Rest, und zwar stumm.
+ */
+async function gatherFromEntries(entries: FileSystemEntry[]) {
+  const out: { file: File; relativePath: string }[] = []
+
+  async function walk(entry: FileSystemEntry, prefix: string): Promise<void> {
+    if (entry.isFile) {
+      const fe = entry as FileSystemFileEntry
+      out.push({
+        file: await new Promise<File>((res, rej) => fe.file(res, rej)),
+        relativePath: prefix + entry.name,
+      })
+      return
+    }
+    if (!entry.isDirectory) return
+    const reader = (entry as FileSystemDirectoryEntry).createReader()
+    const children: FileSystemEntry[] = []
+    for (;;) {
+      const batch: FileSystemEntry[] = await new Promise((res, rej) => reader.readEntries(res, rej))
+      if (batch.length === 0) break
+      children.push(...batch)
+    }
+    for (const child of children) await walk(child, prefix + entry.name + '/')
+  }
+
+  for (const entry of entries) await walk(entry, '')
+  return out
+}
diff --git a/frontend/src/pages/FileBrowser.tsx b/frontend/src/pages/FileBrowser.tsx
index 44023e9..b136d1e 100644
--- a/frontend/src/pages/FileBrowser.tsx
+++ b/frontend/src/pages/FileBrowser.tsx
@@ -1,31 +1,43 @@
-import React, { useState, useEffect, useCallback, useRef, type DragEvent } from 'react'
+import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react'
 import {
-  filesApi, foldersApi, versionsApi, uploadWithProgress, downloadZip,
-  tagsChangedEvent,
-  isOfficeFile, type Correspondent, type FileItem, type FolderItem, type SearchHit, type Tag, type User, APIError
+  filesApi, foldersApi, versionsApi, downloadZip, tagsChangedEvent,
+  isOfficeFile,
+  type Correspondent, type FileItem, type FolderItem, type SearchHit, type Tag,
 } from '../api/client'
 import Breadcrumb from '../components/Breadcrumb'
-import SearchBox from '../components/SearchBox'
 import PageHeader from '../components/PageHeader'
 import GridView, { ListView, useCoarsePointer } from '../components/FileViews'
 import FilePreview, { canPreview, kindOf } from '../components/FilePreview'
 import ContextMenu, { type MenuItem } from '../components/ContextMenu'
-import UploadQueue, { type UploadItem } from '../components/UploadQueue'
-import InputDialog from '../components/Dialog'
-import ShareDialog from '../components/ShareDialog'
-import ShareWithDialog from '../components/ShareWithDialog'
-import ConfirmDialog from '../components/ConfirmDialog'
-import VersionsDialog from '../components/VersionsDialog'
-import FileInfoDialog from '../components/FileInfoDialog'
-import MoveTo from '../components/MoveTo'
-import TagDialog from '../components/TagDialog'
+import UploadQueue from '../components/UploadQueue'
 import OfficeEditor from '../components/OfficeEditor'
+import FileToolbar, { type Sort, type ViewMode } from '../components/files/FileToolbar'
+import FileDialogs, { type Dialog } from '../components/files/FileDialogs'
+import { fileMenuItems, folderMenuItems } from '../components/files/menus'
+import { sortFiles, sortFolders } from '../components/files/sorting'
 import { useAppSettings } from '../hooks/useAppSettings'
-import { useInternalDrag } from '../hooks/useInternalDrag'
-import { DownloadIcon, ShareIcon, HistoryIcon, RenameIcon, MoveIcon, TrashIcon, FolderOpenIcon, StarIcon, CheckIcon, PeopleIcon, TagIcon, OfficeIcon, InfoIcon } from '../components/icons'
+import { useUploads } from '../hooks/useUploads'
+
+/**
+ * Der Dateibrowser: Ordner anzeigen, hineingehen, etwas damit tun.
+ *
+ * Was hier **nicht** mehr steht, weil es je für sich zusammenhängt und mit dem
+ * Anzeigen eines Ordners wenig zu tun hat:
+ *
+ *  * `hooks/useUploads` – Warteschlange, Fortschritt, Ordnerbäume, Ablage
+ *  * `components/files/FileToolbar` – Bedienelemente der Kopfleiste
+ *  * `components/files/FileDialogs` – die dreizehn Dialoge
+ *  * `components/files/menus` – die beiden Kontextmenüs
+ *  * `components/files/sorting` – die Reihenfolge (mit Tests daneben)
+ *
+ * Übrig bleibt, was die Seite wirklich ausmacht: der Bestand des Ordners, die
+ * Auswahl darin, und wer bei einer Änderung was neu holt.
+ */
+
+/** Wie lange eine aus der Suche angesprungene Datei umrandet bleibt. */
+const highlightMs = 2600
 
 interface Props {
-  user: User
   /** Ordnerkette – liegt im Verlauf des Browsers, nicht hier. */
   folderPath: FolderItem[]
   onNavigate: (path: FolderItem[]) => void
@@ -40,39 +52,16 @@ interface Props {
   reloadSignal?: number
 }
 
-// Robust client-side ID for upload-queue keys. crypto.randomUUID() only exists
-// in secure contexts (https/localhost); fall back so uploads work everywhere
-// (e.g. behind VS Code port forwarding).
-function uid(): string {
-  if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
-    return crypto.randomUUID()
-  }
-  return `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 10)}`
-}
-
-type Dialog =
-  | { type: 'rename'; file: FileItem }
-  | { type: 'rename-folder'; folder: FolderItem }
-  | { type: 'confirm-delete-folder'; folder: FolderItem }
-  | { type: 'new-folder' }
-  | { type: 'share'; file: FileItem }
-  | { type: 'share-with'; resource: { type: 'folder' | 'file'; id: string; name: string } }
-  | { type: 'versions'; file: FileItem }
-  | { type: 'confirm-delete'; file: FileItem }
-  | { type: 'confirm-delete-many'; ids: string[] }
-  | { type: 'move-file'; file: FileItem }
-  | { type: 'move-folder'; folder: FolderItem }
-  | { type: 'tags'; file: FileItem }
-  | { type: 'info'; file: FileItem }
-
 interface CtxMenu { x: number; y: number; items: MenuItem[] }
 
-/** Löst den Download aus, ohne einen Tab zu öffnen.
+/**
+ * Löst den Download aus, ohne einen Tab zu öffnen.
  *
- *  `window.open` erzeugte ein leeres Fenster, das je nach Browser stehen blieb
- *  oder kommentarlos zuklappte. Ein Klick auf ein Anker-Element mit
- *  `download`-Attribut ist keine Navigation – der Browser behandelt es direkt
- *  als Download und der Dateiname aus `Content-Disposition` bleibt erhalten. */
+ * `window.open` erzeugte ein leeres Fenster, das je nach Browser stehen blieb
+ * oder kommentarlos zuklappte. Ein Klick auf ein Anker-Element mit
+ * `download`-Attribut ist keine Navigation – der Browser behandelt es direkt
+ * als Download, und der Dateiname aus `Content-Disposition` bleibt erhalten.
+ */
 function downloadFile(file: FileItem) {
   const a = document.createElement('a')
   a.href = filesApi.download(file.id)
@@ -82,20 +71,11 @@ function downloadFile(file: FileItem) {
   a.remove()
 }
 
-type ViewMode = 'grid' | 'list'
-type Sort = 'name-asc' | 'name-desc' | 'size-asc' | 'size-desc' | 'date-asc' | 'date-desc'
-
-const sortLabels: Record<Sort, string> = {
-  'name-asc': 'Name A–Z',
-  'name-desc': 'Name Z–A',
-  'size-asc': 'Smallest first',
-  'size-desc': 'Largest first',
-  'date-asc': 'Oldest first',
-  'date-desc': 'Newest first',
-}
-
-/** Einstellungen im Browser des Nutzers. Ein privater Zwischenspeicher, der
- *  fehlen darf – deshalb überall abgesichert statt geprüft. */
+/**
+ * Einstellungen im Browser des Nutzers – ein privater Zwischenspeicher, der
+ * fehlen darf. Im privaten Fenster wirft der Zugriff, deshalb überall
+ * abgesichert statt geprüft.
+ */
 function loadPref<T extends string>(key: string, fallback: T): T {
   try {
     const v = localStorage.getItem(key)
@@ -106,45 +86,14 @@ function savePref(key: string, value: string) {
   try { localStorage.setItem(key, value) } catch { /* privates Fenster */ }
 }
 
-/** Ordner haben keine Größe und kein sinnvolles Änderungsdatum in der Liste –
- *  sie werden deshalb immer nach Namen sortiert, nur die Richtung zählt. */
-function sortFolders(folders: FolderItem[], sort: Sort): FolderItem[] {
-  const desc = sort.endsWith('-desc') && sort.startsWith('name')
-  return [...folders].sort((a, b) =>
-    desc ? b.name.localeCompare(a.name) : a.name.localeCompare(b.name))
-}
-
-function sortFiles(files: FileItem[], sort: Sort): FileItem[] {
-  const [field, dir] = sort.split('-')
-  const factor = dir === 'desc' ? -1 : 1
-  return [...files].sort((a, b) => {
-    switch (field) {
-      case 'size': return (a.size - b.size) * factor
-      case 'date': return (new Date(a.updated_at).getTime() - new Date(b.updated_at).getTime()) * factor
-      default: return a.name.localeCompare(b.name) * factor
-    }
-  })
-}
-
-export function formatBytes(n: number): string {
-  if (n < 1024) return `${n} B`
-  if (n < 1024 ** 2) return `${(n / 1024).toFixed(1)} KB`
-  if (n < 1024 ** 3) return `${(n / 1024 ** 2).toFixed(1)} MB`
-  return `${(n / 1024 ** 3).toFixed(1)} GB`
-}
-
-
 export default function FileBrowser({
-  user: _user, folderPath, onNavigate, onUserChanged, reloadSignal,
+  folderPath, onNavigate, onUserChanged, reloadSignal,
 }: Props) {
   const [files, setFiles] = useState<FileItem[]>([])
   const [folders, setFolders] = useState<FolderItem[]>([])
   const [loading, setLoading] = useState(true)
-  const [uploads, setUploads] = useState<UploadItem[]>([])
   const [ctxMenu, setCtxMenu] = useState<CtxMenu | null>(null)
   const [dialog, setDialog] = useState<Dialog | null>(null)
-  const [dragging, setDragging] = useState(false)
-  const isInternalDrag = useInternalDrag()
   const [dragOverFolder, setDragOverFolder] = useState<string | null>(null)
   const [viewMode, setViewMode] = useState<ViewMode>(() => loadPref('aether:view', 'grid'))
   const [sort, setSort] = useState<Sort>(() => loadPref('aether:sort', 'name-asc'))
@@ -158,9 +107,6 @@ export default function FileBrowser({
    *  Editor aufgeht. */
   const touchDevice = useCoarsePointer()
 
-  /** Datei, zu der gerade aus der Suche gesprungen wurde – siehe openHitFile.
-   *  Die Markierung verschwindet von selbst; ein Rahmen, der bleibt, sähe
-   *  irgendwann wie ein Zustand aus statt wie ein Hinweis. */
   /** Etiketten je Datei-ID – kommen mit der Ordnerliste in einer Abfrage mit,
    *  nicht einzeln je Kachel. */
   const [fileTags, setFileTags] = useState<Record<string, Tag[]>>({})
@@ -177,6 +123,9 @@ export default function FileBrowser({
   const [selected, setSelected] = useState<Set<string>>(() => new Set())
   const lastPicked = useRef<string | null>(null)
 
+  /** Datei, zu der gerade aus der Suche gesprungen wurde. Die Markierung
+   *  verschwindet von selbst; ein Rahmen, der bleibt, sähe irgendwann wie ein
+   *  Zustand aus statt wie ein Hinweis. */
   const [highlightId, setHighlightId] = useState<string | null>(null)
   /**
    * Das Wort, mit dem die zuletzt angesprungene Datei gefunden wurde.
@@ -189,7 +138,7 @@ export default function FileBrowser({
   const [hitTerm, setHitTerm] = useState<{ id: string; term: string } | null>(null)
   useEffect(() => {
     if (!highlightId) return
-    const t = setTimeout(() => setHighlightId(null), 2600)
+    const t = setTimeout(() => setHighlightId(null), highlightMs)
     return () => clearTimeout(t)
   }, [highlightId])
 
@@ -201,15 +150,7 @@ export default function FileBrowser({
 
   const currentFolderId = folderPath.at(-1)?.id
 
-  /** Nur die Absender-Zuordnung neu holen, ohne die ganze Dateiliste. */
-  const reloadCorrespondents = useCallback(async () => {
-    try {
-      const data = await filesApi.list(currentFolderId)
-      setFileCorrespondents(data.correspondents ?? {})
-    } catch {
-      /* die Kachel zeigt dann den alten Stand – kein Grund für eine Meldung */
-    }
-  }, [currentFolderId])
+  // ── Laden ──────────────────────────────────────────────────────────────────
 
   const load = useCallback(async () => {
     setLoading(true)
@@ -220,15 +161,27 @@ export default function FileBrowser({
       setFileTags(data.tags ?? {})
       setFileCorrespondents(data.correspondents ?? {})
     } catch {
-      // silent
+      /* die Liste bleibt stehen – beim nächsten Wechsel wird es neu versucht */
     } finally {
       setLoading(false)
     }
   }, [currentFolderId])
 
-  // Nach Änderungen am Bestand: Liste neu holen und den Speicherverbrauch
-  // nachziehen. Der Wert steckt im Nutzer-Objekt und wurde bisher nur beim
-  // Anmelden geholt – der Balken blieb deshalb bis zum nächsten Neuladen stehen.
+  /** Nur die Absender-Zuordnung nachziehen, ohne die Liste flackern zu lassen. */
+  const reloadCorrespondents = useCallback(async () => {
+    try {
+      const data = await filesApi.list(currentFolderId)
+      setFileCorrespondents(data.correspondents ?? {})
+    } catch {
+      /* die Kachel zeigt dann den alten Stand – kein Grund für eine Meldung */
+    }
+  }, [currentFolderId])
+
+  /**
+   * Nach Änderungen am Bestand: Liste neu holen und den Speicherverbrauch
+   * nachziehen. Der Wert steckt im Nutzer-Objekt und wurde bisher nur beim
+   * Anmelden geholt – der Balken blieb deshalb bis zum nächsten Neuladen stehen.
+   */
   const reload = useCallback(async () => {
     await load()
     await onUserChanged?.()
@@ -236,6 +189,8 @@ export default function FileBrowser({
 
   useEffect(() => { load() }, [load])
 
+  const uploads = useUploads({ folderId: currentFolderId, onFinished: reload })
+
   // Neu laden, wenn von außen gelöscht wurde. Der Vergleich mit dem letzten
   // Wert statt eines schlichten Effekts auf `reloadSignal`: Sonst liefe er
   // auch bei jedem Ordnerwechsel mit, weil `load` sich dabei ändert.
@@ -252,6 +207,19 @@ export default function FileBrowser({
   // sieht, aber beim Herunterladen mitkäme, wäre eine böse Überraschung.
   useEffect(() => { setSelected(new Set()); lastPicked.current = null }, [currentFolderId])
 
+  /**
+   * Nach einer Änderung an den Etiketten die Liste neu holen.
+   *
+   * Beim Setzen an *einer* Datei genügt es, deren Eintrag nachzuziehen – das
+   * macht der Dialog selbst. Beim Umbenennen oder Löschen betrifft es aber
+   * jede Datei, die das Etikett trägt: Ohne das stünde an den Kacheln noch
+   * der alte Name, und nach dem Löschen ein Aufkleber, den es nicht mehr gibt.
+   */
+  useEffect(() => {
+    window.addEventListener(tagsChangedEvent, load)
+    return () => window.removeEventListener(tagsChangedEvent, load)
+  }, [load])
+
   /**
    * Escape hebt die Auswahl auf.
    *
@@ -276,18 +244,57 @@ export default function FileBrowser({
     return () => window.removeEventListener('keydown', onKey)
   }, [selected.size, preview, dialog, ctxMenu])
 
+  // ── Reihenfolge und Auswahl ────────────────────────────────────────────────
+
   /**
-   * Nach einer Änderung an den Etiketten die Liste neu holen.
+   * Gemerkt, nicht bei jedem Bild neu sortiert.
    *
-   * Beim Setzen an *einer* Datei genügt es, deren Eintrag nachzuziehen – das
-   * macht der Dialog selbst. Beim Umbenennen oder Löschen betrifft es aber
-   * jede Datei, die das Etikett trägt: Ohne das stünde an den Kacheln noch
-   * der alte Name, und nach dem Löschen ein Aufkleber, den es nicht mehr gibt.
+   * Vorher liefen beide Sortierungen bei **jedem** Durchlauf – und Durchläufe
+   * gibt es reichlich: Der Rahmen, der beim Ziehen über einen Ordner
+   * aufleuchtet, ist einer je Mausbewegung. In einem Ordner mit fünfhundert
+   * Dateien sortierte das Ziehen also fünfhundert Einträge pro Bild.
    */
-  useEffect(() => {
-    window.addEventListener(tagsChangedEvent, load)
-    return () => window.removeEventListener(tagsChangedEvent, load)
-  }, [load])
+  const sortedFolders = useMemo(() => sortFolders(folders, sort), [folders, sort])
+  const sortedFiles = useMemo(() => sortFiles(files, sort), [files, sort])
+
+  /**
+   * Blättern in der Vorschau bleibt bei **einer** Art Datei: Wer Bilder
+   * durchsieht, will Bilder sehen und nicht mitten in der Reihe auf einem PDF
+   * landen, das ganz anders bedient wird (Seiten statt Dateien, eigene
+   * Zoomleiste). Solange nichts offen ist, zählt weiterhin alles Anzeigbare –
+   * sonst wäre die Liste leer, bevor sie gebraucht wird.
+   */
+  const previewable = useMemo(() => {
+    const kind = preview ? kindOf(preview.mime_type, preview.name) : null
+    return sortedFiles.filter(f =>
+      canPreview(f) && (kind === null || kindOf(f.mime_type, f.name) === kind))
+  }, [sortedFiles, preview])
+
+  function stepPreview(delta: number) {
+    if (!preview) return
+    const i = previewable.findIndex(f => f.id === preview.id)
+    if (i < 0) return
+    setPreview(previewable[(i + delta + previewable.length) % previewable.length])
+  }
+
+  function toggleSelect(id: string, range: boolean) {
+    setSelected(prev => {
+      const next = new Set(prev)
+      if (range && lastPicked.current) {
+        // Bereich zwischen dem zuletzt angeklickten und diesem Eintrag – in
+        // der *angezeigten* Reihenfolge, nicht in der Reihenfolge der Daten.
+        const a = sortedFiles.findIndex(f => f.id === lastPicked.current)
+        const b = sortedFiles.findIndex(f => f.id === id)
+        if (a >= 0 && b >= 0) {
+          for (let i = Math.min(a, b); i <= Math.max(a, b); i++) next.add(sortedFiles[i].id)
+          return next
+        }
+      }
+      next.has(id) ? next.delete(id) : next.add(id)
+      return next
+    })
+    lastPicked.current = id
+  }
 
   // ── Navigation ─────────────────────────────────────────────────────────────
 
@@ -303,10 +310,41 @@ export default function FileBrowser({
   }
 
   /**
-   * Doppelklick auf eine Datei: anschauen, wenn der Browser das kann – sonst
-   * herunterladen. Vorher lud ein Doppelklick immer herunter, was bei einem
-   * Bild ein Umweg über den Download-Ordner war.
+   * Sprung aus der Trefferliste. Die Kette darüber kennen wir nicht – es gibt
+   * keine Abfrage, die zu einer Ordner-ID die Vorfahren liefert –, deshalb
+   * fängt der Pfad beim Ziel selbst an. Dasselbe tut die Seitenleiste bei
+   * einem Favoriten.
    */
+  function openFromSearch(folderId: string | null, folderName: string) {
+    if (!folderId) { onNavigate([]); return }
+    onNavigate([{
+      id: folderId, owner_id: null, group_id: null, parent_id: null,
+      name: folderName, created_at: '',
+    }])
+  }
+
+  /**
+   * Treffer aus der Suche: **nur** zum Ordner springen, nicht öffnen.
+   *
+   * Bis zum 23.08.2026 ging zugleich die Vorschau auf. Das war verwirrend –
+   * ein Klick in einer Trefferliste ließ unangekündigt einen Betrachter über
+   * den Bildschirm klappen, und wer nur nachsehen wollte, *wo* die Datei liegt,
+   * musste ihn erst wieder schließen. Geöffnet wird jetzt dort, wo man es
+   * erwartet: mit einem Doppelklick auf die Datei selbst.
+   *
+   * Damit der Sprung trotzdem etwas taugt, wird die Datei kurz umrandet und in
+   * den sichtbaren Bereich geholt – in einem Ordner mit fünfzig Einträgen
+   * suchte man sonst von vorn.
+   */
+  function openHitFile(hit: SearchHit, term: string) {
+    openFromSearch(hit.folder_id, hit.folder_name)
+    setHighlightId(hit.id)
+    // Nur bei einem Inhaltstreffer: Wurde bloß der Dateiname getroffen, steht
+    // das Wort im Dokument womöglich nirgends, und die Suche im Betrachter
+    // meldete „keine Treffer" – ein Hinweis auf einen Fehler, wo keiner ist.
+    setHitTerm(hit.matched_content ? { id: hit.id, term } : null)
+  }
+
   /**
    * Doppelklick auf eine Datei.
    *
@@ -336,203 +374,7 @@ export default function FileBrowser({
     else downloadFile(file)
   }
 
-  const sortedFolders = sortFolders(folders, sort)
-  const sortedFiles = sortFiles(files, sort)
-
-  // Blättern in der Vorschau bleibt bei **einer** Art Datei: Wer Bilder
-  // durchsieht, will Bilder sehen und nicht mitten in der Reihe auf einem PDF
-  // landen, das ganz anders bedient wird (Seiten statt Dateien, eigene
-  // Zoomleiste). Solange nichts offen ist, zählt weiterhin alles Anzeigbare –
-  // sonst wäre die Liste leer, bevor sie gebraucht wird.
-  const previewKind = preview ? kindOf(preview.mime_type, preview.name) : null
-  const previewable = sortedFiles.filter(f =>
-    canPreview(f) && (previewKind === null || kindOf(f.mime_type, f.name) === previewKind))
-  function stepPreview(delta: number) {
-    if (!preview) return
-    const i = previewable.findIndex(f => f.id === preview.id)
-    if (i < 0) return
-    const next = previewable[(i + delta + previewable.length) % previewable.length]
-    setPreview(next)
-  }
-
-  /**
-   * Datei-Treffer: in den Ordner springen und die Datei gleich zeigen. Nur
-   * hinzuspringen und den Nutzer selbst suchen zu lassen wäre die halbe Sache –
-   * er hat sie ja gerade benannt.
-   */
-  /**
-   * Treffer aus der Suche: **nur** zum Ordner springen, nicht öffnen.
-   *
-   * Bis zum 23.08.2026 ging zugleich die Vorschau auf. Das war verwirrend –
-   * ein Klick in einer Trefferliste ließ unangekündigt einen Betrachter über
-   * den Bildschirm klappen, und wer nur nachsehen wollte, *wo* die Datei liegt,
-   * musste ihn erst wieder schließen. Geöffnet wird jetzt dort, wo man es
-   * erwartet: mit einem Doppelklick auf die Datei selbst.
-   *
-   * Damit der Sprung trotzdem etwas taugt, wird die Datei kurz umrandet und in
-   * den sichtbaren Bereich geholt – in einem Ordner mit fünfzig Einträgen
-   * suchte man sonst von vorn.
-   */
-  function toggleSelect(id: string, range: boolean) {
-    setSelected(prev => {
-      const next = new Set(prev)
-      const list = sortedFiles
-      if (range && lastPicked.current) {
-        // Bereich zwischen dem zuletzt angeklickten und diesem Eintrag – in
-        // der *angezeigten* Reihenfolge, nicht in der Reihenfolge der Daten.
-        const a = list.findIndex(f => f.id === lastPicked.current)
-        const b = list.findIndex(f => f.id === id)
-        if (a >= 0 && b >= 0) {
-          for (let i = Math.min(a, b); i <= Math.max(a, b); i++) next.add(list[i].id)
-          return next
-        }
-      }
-      next.has(id) ? next.delete(id) : next.add(id)
-      return next
-    })
-    lastPicked.current = id
-  }
-
-  /**
-   * Die Auswahl in den Papierkorb.
-   *
-   * Ohne das blieb nur: Rechtsklick, Löschen, Bestätigen – je Datei. Bei
-   * dreißig Belegen sind das neunzig Klicks für einen Vorgang, den man als
-   * einen denkt.
-   */
-  async function deleteSelection(ids: string[]) {
-    setDialog(null)
-    const { ok, failed } = await filesApi.deleteMany(ids)
-    const gone = new Set(ok)
-    setFiles(f => f.filter(x => !gone.has(x.id)))
-    // Fehlgeschlagene bleiben markiert – so sieht man, was übrig ist, statt
-    // eine Auswahl zu verlieren und raten zu müssen.
-    setSelected(new Set(failed))
-    lastPicked.current = null
-    await onUserChanged?.()
-    if (failed.length) await load()
-  }
-
-  function downloadSelection() {
-    const here = folderPath.at(-1)?.name
-    downloadZip({
-      fileIds: [...selected],
-      name: here ? `${here} (selection)` : 'selection',
-    })
-  }
-
-  function openHitFile(hit: SearchHit, term: string) {
-    openFromSearch(hit.folder_id, hit.folder_name)
-    setHighlightId(hit.id)
-    // Nur bei einem Inhaltstreffer: Wurde bloß der Dateiname getroffen, steht
-    // das Wort im Dokument womöglich nirgends, und die Suche im Betrachter
-    // meldete „keine Treffer" – ein Hinweis auf einen Fehler, wo keiner ist.
-    setHitTerm(hit.matched_content ? { id: hit.id, term } : null)
-  }
-
-  /**
-   * Sprung aus der Trefferliste. Die Kette darüber kennen wir nicht – es gibt
-   * keine Abfrage, die zu einer Ordner-ID die Vorfahren liefert –, deshalb
-   * fängt der Pfad beim Ziel selbst an. Dasselbe tut die Seitenleiste bei
-   * einem Favoriten.
-   */
-  function openFromSearch(folderId: string | null, folderName: string) {
-    if (!folderId) { onNavigate([]); return }
-    onNavigate([{
-      id: folderId, owner_id: null, group_id: null, parent_id: null,
-      name: folderName, created_at: '',
-    }])
-  }
-
-  // ── Upload ──────────────────────────────────────────────────────────────────
-
-  async function uploadFiles(fileList: File[]) {
-    const folderId = currentFolderId
-
-    // Register all items in the queue immediately
-    const items = fileList.map(file => ({ id: uid(), file }))
-    setUploads(u => [...u, ...items.map(({ id, file }) => ({
-      id, name: file.name, progress: 0, status: 'uploading' as const,
-    }))])
-
-    // Upload up to 3 files in parallel
-    const concurrency = 3
-    const queue = [...items]
-    const workers = Array.from({ length: Math.min(concurrency, queue.length) }, async () => {
-      while (queue.length > 0) {
-        const item = queue.shift()!
-        try {
-          await uploadWithProgress(item.file, folderId, ({ percent }) => {
-            setUploads(u => u.map(x => x.id === item.id ? { ...x, progress: percent } : x))
-          })
-          setUploads(u => u.map(x => x.id === item.id ? { ...x, progress: 100, status: 'done' } : x))
-        } catch (err) {
-          const msg = err instanceof APIError ? err.message : 'Upload failed'
-          setUploads(u => u.map(x => x.id === item.id ? { ...x, status: 'error', error: msg } : x))
-        }
-      }
-    })
-
-    await Promise.all(workers)
-    await reload()
-  }
-
-  async function onDrop(e: DragEvent) {
-    e.preventDefault()
-    setDragging(false)
-    const t = e.dataTransfer.types
-    if (t.includes('aether-file-id') || t.includes('aether-folder-id')) return  // internal move, not upload
-    // Alles, was in dieser Seite losgezogen ist, ist kein Upload – auch ein
-    // vom Browser begonnener Bild-Zug, der `Files` mitbringt, aber keine
-    // unserer Kennungen. Siehe hooks/useInternalDrag.
-    if (isInternalDrag()) return
-
-    // Capture FileSystemEntries synchronously – the DataTransferItemList is only
-    // valid during the drop event itself.
-    const entries: FileSystemEntry[] = []
-    const items = e.dataTransfer.items
-    if (items && items.length) {
-      for (let i = 0; i < items.length; i++) {
-        const entry = items[i].webkitGetAsEntry?.()
-        if (entry) entries.push(entry)
-      }
-    }
-    const fileList = Array.from(e.dataTransfer.files)
-
-    // If any dropped item is a directory, traverse it and upload as a folder tree.
-    if (entries.some(en => en.isDirectory)) {
-      const gathered = await gatherFromEntries(entries)
-      if (gathered.length) await uploadFolder(gathered)
-    } else if (fileList.length) {
-      uploadFiles(fileList)
-    }
-  }
-
-  // Recursively walk dropped FileSystemEntries into {file, relativePath} pairs.
-  async function gatherFromEntries(entries: FileSystemEntry[]): Promise<{ file: File; relativePath: string }[]> {
-    const out: { file: File; relativePath: string }[] = []
-
-    async function walk(entry: FileSystemEntry, prefix: string): Promise<void> {
-      if (entry.isFile) {
-        const fileEntry = entry as FileSystemFileEntry
-        const file = await new Promise<File>((res, rej) => fileEntry.file(res, rej))
-        out.push({ file, relativePath: prefix + entry.name })
-      } else if (entry.isDirectory) {
-        const reader = (entry as FileSystemDirectoryEntry).createReader()
-        const children: FileSystemEntry[] = []
-        // readEntries returns in batches – loop until it yields nothing.
-        for (;;) {
-          const batch: FileSystemEntry[] = await new Promise((res, rej) => reader.readEntries(res, rej))
-          if (batch.length === 0) break
-          children.push(...batch)
-        }
-        for (const child of children) await walk(child, prefix + entry.name + '/')
-      }
-    }
-
-    for (const entry of entries) await walk(entry, '')
-    return out
-  }
+  // ── Verschieben, Ändern, Löschen ───────────────────────────────────────────
 
   async function handleDropOnFolder(e: React.DragEvent, folder: FolderItem) {
     e.preventDefault()
@@ -557,6 +399,70 @@ export default function FileBrowser({
     }
   }
 
+  async function handleDelete(file: FileItem) {
+    setDialog(null)
+    try {
+      await filesApi.delete(file.id)
+      setFiles(f => f.filter(x => x.id !== file.id))
+      // Die Liste wird bewusst nur lokal angepasst (schneller), der belegte
+      // Speicher muss aber vom Server kommen – sonst bleibt der Balken stehen.
+      await onUserChanged?.()
+    } catch { /* die Datei bleibt stehen */ }
+  }
+
+  /**
+   * Die Auswahl in den Papierkorb.
+   *
+   * Ohne das blieb nur: Rechtsklick, Löschen, Bestätigen – je Datei. Bei
+   * dreißig Belegen sind das neunzig Klicks für einen Vorgang, den man als
+   * einen denkt.
+   */
+  async function deleteSelection(ids: string[]) {
+    setDialog(null)
+    const { ok, failed } = await filesApi.deleteMany(ids)
+    const gone = new Set(ok)
+    setFiles(f => f.filter(x => !gone.has(x.id)))
+    // Fehlgeschlagene bleiben markiert – so sieht man, was übrig ist, statt
+    // eine Auswahl zu verlieren und raten zu müssen.
+    setSelected(new Set(failed))
+    lastPicked.current = null
+    await onUserChanged?.()
+    if (failed.length) await load()
+  }
+
+  async function handleRename(file: FileItem, name: string) {
+    setDialog(null)
+    try {
+      const updated = await filesApi.rename(file.id, name)
+      setFiles(f => f.map(x => x.id === file.id ? updated : x))
+    } catch { /* der alte Name bleibt stehen */ }
+  }
+
+  async function handleCreateFolder(name: string) {
+    setDialog(null)
+    try {
+      const folder = await foldersApi.create(name, currentFolderId)
+      setFolders(f => [...f, folder])
+    } catch { /* nichts entstanden */ }
+  }
+
+  async function handleRenameFolder(folder: FolderItem, name: string) {
+    setDialog(null)
+    try {
+      const updated = await foldersApi.rename(folder.id, name)
+      setFolders(f => f.map(x => x.id === folder.id ? updated : x))
+    } catch { /* der alte Name bleibt stehen */ }
+  }
+
+  async function handleDeleteFolder(folder: FolderItem) {
+    setDialog(null)
+    try {
+      await foldersApi.delete(folder.id)
+      setFolders(f => f.filter(x => x.id !== folder.id))
+      await onUserChanged?.()
+    } catch { /* der Ordner bleibt stehen */ }
+  }
+
   async function handleMoveFile(file: FileItem, targetFolderId: string | null) {
     setDialog(null)
     try {
@@ -573,115 +479,6 @@ export default function FileBrowser({
     } catch { /* silent */ }
   }
 
-  async function uploadFolder(entries: { file: File; relativePath: string }[]) {
-    if (!entries.length) return
-    const folderId = currentFolderId
-
-    // relativePath looks like "TopFolder/sub/file.txt" — the full tree (including the
-    // dropped folder itself) is recreated under the current folder.
-    const folderCache = new Map<string, string>()  // "a/b" → folderId
-
-    async function ensureFolder(relPath: string): Promise<string | undefined> {
-      if (!relPath) return folderId
-      if (folderCache.has(relPath)) return folderCache.get(relPath)!
-      const parts = relPath.split('/')
-      let currentParent = folderId
-      let accumulated = ''
-      for (const part of parts) {
-        accumulated = accumulated ? `${accumulated}/${part}` : part
-        if (folderCache.has(accumulated)) {
-          currentParent = folderCache.get(accumulated)!
-        } else {
-          const f = await foldersApi.create(part, currentParent)
-          folderCache.set(accumulated, f.id)
-          currentParent = f.id
-        }
-      }
-      return currentParent
-    }
-
-    // Group files by their folder path (everything except the filename).
-    const grouped = new Map<string, { file: File; relativePath: string }[]>()
-    for (const entry of entries) {
-      const parts = entry.relativePath.split('/')
-      parts.pop()  // remove filename
-      const folderPart = parts.join('/')
-      if (!grouped.has(folderPart)) grouped.set(folderPart, [])
-      grouped.get(folderPart)!.push(entry)
-    }
-
-    // Register upload queue items
-    const queued = entries.map(e => ({ id: uid(), entry: e }))
-    setUploads(u => [...u, ...queued.map(({ id, entry }) => ({
-      id, name: entry.relativePath, progress: 0, status: 'uploading' as const,
-    }))])
-
-    let itemIdx = 0
-    for (const [relFolderPath, files] of grouped) {
-      const targetId = await ensureFolder(relFolderPath).catch(() => folderId)
-
-      for (const { file } of files) {
-        const uploadId = queued[itemIdx++]?.id
-        try {
-          await uploadWithProgress(file, targetId, ({ percent }) => {
-            if (uploadId) setUploads(u => u.map(x => x.id === uploadId ? { ...x, progress: percent } : x))
-          })
-          if (uploadId) setUploads(u => u.map(x => x.id === uploadId ? { ...x, progress: 100, status: 'done' } : x))
-        } catch (err) {
-          const msg = err instanceof APIError ? err.message : 'Upload failed'
-          if (uploadId) setUploads(u => u.map(x => x.id === uploadId ? { ...x, status: 'error', error: msg } : x))
-        }
-      }
-    }
-    await reload()
-  }
-
-  // ── Actions ────────────────────────────────────────────────────────────────
-
-  async function handleDelete(file: FileItem) {
-    try {
-      await filesApi.delete(file.id)
-      setFiles(f => f.filter(x => x.id !== file.id))
-      // Die Liste wird bewusst nur lokal angepasst (schneller), der belegte
-      // Speicher muss aber vom Server kommen – sonst bleibt der Balken stehen.
-      await onUserChanged?.()
-    } catch { /* todo: toast */ }
-    setDialog(null)
-  }
-
-  async function handleRename(file: FileItem, name: string) {
-    try {
-      const updated = await filesApi.rename(file.id, name)
-      setFiles(f => f.map(x => x.id === file.id ? updated : x))
-    } catch { /* todo: toast */ }
-    setDialog(null)
-  }
-
-  async function handleCreateFolder(name: string) {
-    try {
-      const folder = await foldersApi.create(name, currentFolderId)
-      setFolders(f => [...f, folder].sort((a, b) => a.name.localeCompare(b.name)))
-    } catch { /* todo: toast */ }
-    setDialog(null)
-  }
-
-  async function handleRenameFolder(folder: FolderItem, name: string) {
-    try {
-      const updated = await foldersApi.rename(folder.id, name)
-      setFolders(f => f.map(x => x.id === folder.id ? updated : x).sort((a, b) => a.name.localeCompare(b.name)))
-    } catch { /* todo: toast */ }
-    setDialog(null)
-  }
-
-  async function handleDeleteFolder(folder: FolderItem) {
-    try {
-      await foldersApi.delete(folder.id)
-      setFolders(f => f.filter(x => x.id !== folder.id))
-      await onUserChanged?.()
-    } catch { /* todo: toast */ }
-    setDialog(null)
-  }
-
   async function toggleVersioning(file: FileItem, enabled: boolean) {
     try {
       const updated = await versionsApi.setEnabled(file.id, enabled)
@@ -689,115 +486,88 @@ export default function FileBrowser({
     } catch { /* Zustand bleibt, wie er war */ }
   }
 
+  function downloadSelection() {
+    const here = folderPath.at(-1)?.name
+    downloadZip({
+      fileIds: [...selected],
+      name: here ? `${here} (selection)` : 'selection',
+    })
+  }
+
+  // ── Kontextmenüs ───────────────────────────────────────────────────────────
+
   function openFileMenu(e: React.MouseEvent, file: FileItem) {
     e.preventDefault()
     setCtxMenu({
       x: e.clientX, y: e.clientY,
-      // Nach Zweck gruppiert: erst was man am häufigsten will, dann Teilen,
-      // dann Verwalten, und ganz unten abgesetzt das Löschen.
-      items: [
-        { label: 'Download', icon: <DownloadIcon />, onClick: () => downloadFile(file) },
-        // Nachschlagen statt anfassen – deshalb direkt beim Herunterladen und
-        // nicht unten bei Umbenennen/Verschieben. Beantwortet Fragen, die die
-        // Kachel nicht beantwortet: Bildmaße, genaue Bytezahl, Prüfsumme.
-        { label: 'Properties…', icon: <InfoIcon />, onClick: () => setDialog({ type: 'info', file }) },
-        { separator: true },
-        {
-          label: 'Share with people…',
-          icon: <PeopleIcon />,
-          onClick: () => setDialog({ type: 'share-with', resource: { type: 'file', id: file.id, name: file.name } }),
-        },
-        { label: 'Share link…', icon: <ShareIcon />, onClick: () => setDialog({ type: 'share', file }) },
-        { separator: true },
-        // Zwischen Teilen und Verwalten: Etikettieren ist beides nicht ganz –
-        // es ordnet ein, ohne die Datei anzufassen.
-        // Hiess bis zum 23.08.2026 „Tags…". Der Dialog setzt inzwischen drei
-        // Dinge – Etiketten, Absender und Belegdatum –, und ein Menuepunkt,
-        // der nur eines davon nennt, laesst die anderen beiden unauffindbar.
-        { label: 'Organise…', icon: <TagIcon />, onClick: () => setDialog({ type: 'tags', file }) },
-        // Nur bei passenden Dateien und nur, wenn es einen Office-Server gibt.
-        // Ein Punkt, der immer scheitert, ist schlimmer als keiner.
-        ...(officeEnabled && isOfficeFile(file.name)
-          ? [{ label: 'Edit in Office…', icon: <OfficeIcon />, onClick: () => setEditing(file) }]
-          : []),
-        { separator: true },
-        { label: 'Version history…', icon: <HistoryIcon />, onClick: () => setDialog({ type: 'versions', file }) },
-        {
-          label: 'Keep versions',
-          icon: <CheckIcon />,
-          checked: file.versioning_enabled,
-          onClick: () => toggleVersioning(file, !file.versioning_enabled),
-        },
-        { separator: true },
-        { label: 'Rename…', icon: <RenameIcon />, onClick: () => setDialog({ type: 'rename', file }) },
-        { label: 'Move to…', icon: <MoveIcon />, onClick: () => setDialog({ type: 'move-file', file }) },
-        { separator: true },
-        { label: 'Delete', icon: <TrashIcon />, danger: true, onClick: () => setDialog({ type: 'confirm-delete', file }) },
-      ]
+      items: fileMenuItems(file, {
+        officeEnabled,
+        download: downloadFile,
+        properties: f => setDialog({ type: 'info', file: f }),
+        shareWithPeople: f => setDialog({
+          type: 'share-with', resource: { type: 'file', id: f.id, name: f.name },
+        }),
+        shareLink: f => setDialog({ type: 'share', file: f }),
+        organise: f => setDialog({ type: 'tags', file: f }),
+        editInOffice: setEditing,
+        versionHistory: f => setDialog({ type: 'versions', file: f }),
+        setVersioning: toggleVersioning,
+        rename: f => setDialog({ type: 'rename', file: f }),
+        move: f => setDialog({ type: 'move-file', file: f }),
+        remove: f => setDialog({ type: 'confirm-delete', file: f }),
+      }),
     })
   }
 
   function openFolderMenu(e: React.MouseEvent, folder: FolderItem) {
     e.preventDefault()
-    const isFav = (window as any).__aetherIsFavorite?.(folder.id) ?? false
-
-    // Ein Gruppenordner gehört der Gruppe, nicht dem, der ihn gerade offen hat.
-    // Umbenennen, Verschieben und Löschen fehlen deshalb ganz statt als
-    // Einträge, die nur eine Fehlermeldung liefern – der Server lehnt sie
-    // ohnehin ab. Alles *innerhalb* des Ordners bleibt normal bedienbar.
-    const isGroupFolder = folder.group_id !== null
-
     setCtxMenu({
       x: e.clientX, y: e.clientY,
-      items: [
-        { label: 'Open', icon: <FolderOpenIcon />, onClick: () => navigateTo(folder) },
-        {
-          label: 'Favourite',
-          icon: <StarIcon filled={isFav} />,
-          checked: isFav,
-          onClick: () => isFav
-            ? (window as any).__aetherRemoveFavorite?.(folder.id)
-            : (window as any).__aetherAddFavorite?.(folder),
-        },
-        ...(isGroupFolder ? [] : [
-          { separator: true as const },
-          {
-            label: 'Share with people…',
-            icon: <PeopleIcon />,
-            onClick: () => setDialog({ type: 'share-with', resource: { type: 'folder' as const, id: folder.id, name: folder.name } }),
-          },
-          { separator: true as const },
-          // Ganzer Ordnerinhalt als Archiv – mit Unterordnern, ihre Struktur
-          // bleibt im Archiv erhalten.
-          { label: 'Download as ZIP', icon: <DownloadIcon />, onClick: () => downloadZip({ folderId: folder.id, name: folder.name }) },
-          { separator: true as const },
-          { label: 'Rename…', icon: <RenameIcon />, onClick: () => setDialog({ type: 'rename-folder', folder }) },
-          { label: 'Move to…', icon: <MoveIcon />, onClick: () => setDialog({ type: 'move-folder', folder }) },
-          { separator: true as const },
-          { label: 'Delete', icon: <TrashIcon />, danger: true, onClick: () => setDialog({ type: 'confirm-delete-folder', folder }) },
-        ]),
-      ]
+      items: folderMenuItems(folder, {
+        // Die Seitenleiste hängt die drei Funktionen ans Fenster – sie ist ein
+        // Geschwister dieser Seite und kommt an ihren Zustand nicht heran.
+        isFavourite: id => (window as any).__aetherIsFavorite?.(id) ?? false,
+        open: navigateTo,
+        toggleFavourite: (f, isFav) => isFav
+          ? (window as any).__aetherRemoveFavorite?.(f.id)
+          : (window as any).__aetherAddFavorite?.(f),
+        shareWithPeople: f => setDialog({
+          type: 'share-with', resource: { type: 'folder', id: f.id, name: f.name },
+        }),
+        downloadZip: f => downloadZip({ folderId: f.id, name: f.name }),
+        rename: f => setDialog({ type: 'rename-folder', folder: f }),
+        move: f => setDialog({ type: 'move-folder', folder: f }),
+        remove: f => setDialog({ type: 'confirm-delete-folder', folder: f }),
+      }),
     })
   }
 
-  // ── Render ─────────────────────────────────────────────────────────────────
+  // ── Anzeige ────────────────────────────────────────────────────────────────
 
   const isEmpty = !loading && files.length === 0 && folders.length === 0
 
+  /** Was Kachel- und Listenansicht gleichermaßen brauchen. */
+  const viewProps = {
+    highlightId, fileTags, fileCorrespondents, selected,
+    onToggleSelect: toggleSelect,
+    folders: sortedFolders,
+    files: sortedFiles,
+    onFolderOpen: navigateTo,
+    onFolderMenu: openFolderMenu,
+    onFileMenu: openFileMenu,
+    onFileOpen: openFile,
+    onFileDownload: downloadFile,
+    onFolderDrop: handleDropOnFolder,
+    dragOverFolder,
+    onFolderDragOver: setDragOverFolder,
+  }
+
   return (
     <div
       style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}
-      onDragOver={e => {
-        e.preventDefault()
-        const t = e.dataTransfer.types
-        if (t.includes('Files') && !t.includes('aether-file-id') && !t.includes('aether-folder-id')
-            && !isInternalDrag()) setDragging(true)
-      }}
-      onDragLeave={e => { if (!e.currentTarget.contains(e.relatedTarget as Node)) setDragging(false) }}
-      onDrop={onDrop}
+      {...uploads.dropProps}
     >
-      {/* Drag overlay */}
-      {dragging && (
+      {uploads.dragging && (
         <div style={{
           position: 'fixed', inset: 0, zIndex: 100,
           background: 'rgba(var(--color-primary-rgb), 0.12)',
@@ -805,6 +575,8 @@ export default function FileBrowser({
           borderRadius: 16,
           margin: 8,
           display: 'flex', alignItems: 'center', justifyContent: 'center',
+          // Sonst läge die Fläche unter dem Zeiger und die Ablage ginge an
+          // sie statt an die Seite darunter.
           pointerEvents: 'none',
         }}>
           <div style={{ textAlign: 'center' }}>
@@ -816,125 +588,22 @@ export default function FileBrowser({
 
       {/* Kopfleiste – dieselbe Höhe wie in allen anderen Ansichten */}
       <PageHeader left={<Breadcrumb path={folderPath} onNavigate={navigateById} />}>
-        {/* Auswahlleiste: ersetzt Suche und Sortierung, solange etwas markiert
-            ist. Sie *neben* die anderen Elemente zu setzen wäre auf schmalen
-            Schirmen eine dritte Zeile – und solange man auswählt, will man
-            ohnehin nichts anderes. */}
-        {selected.size > 0 ? (
-          <div style={{ display: 'flex', alignItems: 'center', gap: 10, flex: 1, minWidth: 0 }}>
-            <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--color-text)', flexShrink: 0 }}>
-              {selected.size} selected
-            </span>
-            <button
-              onClick={downloadSelection}
-              style={{
-                display: 'flex', alignItems: 'center', gap: 7,
-                padding: '6px 14px', borderRadius: 8, border: 'none', cursor: 'pointer',
-                fontSize: 12, fontWeight: 600, color: '#fff', background: 'var(--color-primary)',
-                flexShrink: 0,
-              }}
-            >
-              <DownloadIcon /> Download as ZIP
-            </button>
-            <button
-              onClick={() => setDialog({ type: 'confirm-delete-many', ids: [...selected] })}
-              style={{
-                display: 'flex', alignItems: 'center', gap: 7,
-                padding: '6px 14px', borderRadius: 8, cursor: 'pointer',
-                fontSize: 12, fontWeight: 600, flexShrink: 0,
-                border: '1px solid var(--color-danger)', background: 'transparent',
-                color: 'var(--color-danger)',
-              }}
-            >
-              <TrashIcon /> Move to trash
-            </button>
-            <button
-              onClick={() => setSelected(new Set())}
-              style={{
-                padding: '6px 10px', borderRadius: 8, cursor: 'pointer', fontSize: 12,
-                border: '1px solid var(--color-border)', background: 'transparent',
-                color: 'var(--color-text-muted)', flexShrink: 0,
-              }}
-            >
-              Clear
-            </button>
-          </div>
-        ) : (
-          <SearchBox onOpenFolder={openFromSearch} onOpenFile={openHitFile} />
-        )}
-
-        {/* Sortierung */}
-        <select
-          value={sort}
-          onChange={e => setSort(e.target.value as Sort)}
-          title="Sort by"
-          style={{
-            padding: '6px 8px', borderRadius: 8, fontSize: 12,
-            border: '1px solid var(--color-border)',
-            background: 'var(--color-surface-2)',
-            color: 'var(--color-text-muted)', cursor: 'pointer',
-          }}
-        >
-          {(Object.keys(sortLabels) as Sort[]).map(key => (
-            <option key={key} value={key}>{sortLabels[key]}</option>
-          ))}
-        </select>
-
-        {/* View toggle */}
-        <div style={{ display: 'flex', borderRadius: 8, overflow: 'hidden', border: '1px solid var(--color-border)' }}>
-          <button
-            onClick={() => setViewMode('grid')}
-            style={{
-              padding: '6px 10px', border: 'none', cursor: 'pointer',
-              background: viewMode === 'grid' ? 'var(--color-surface-2)' : 'transparent',
-              color: viewMode === 'grid' ? 'var(--color-text)' : 'var(--color-text-muted)',
-            }}
-            title="Grid view"
-          >
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
-              <rect x="3" y="3" width="7" height="7" rx="1" /><rect x="14" y="3" width="7" height="7" rx="1" />
-              <rect x="3" y="14" width="7" height="7" rx="1" /><rect x="14" y="14" width="7" height="7" rx="1" />
-            </svg>
-          </button>
-          <button
-            onClick={() => setViewMode('list')}
-            style={{
-              padding: '6px 10px', border: 'none', cursor: 'pointer',
-              background: viewMode === 'list' ? 'var(--color-surface-2)' : 'transparent',
-              color: viewMode === 'list' ? 'var(--color-text)' : 'var(--color-text-muted)',
-            }}
-            title="List view"
-          >
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-              <line x1="8" y1="6" x2="21" y2="6" /><line x1="8" y1="12" x2="21" y2="12" /><line x1="8" y1="18" x2="21" y2="18" />
-              <circle cx="3" cy="6" r="1" fill="currentColor" /><circle cx="3" cy="12" r="1" fill="currentColor" /><circle cx="3" cy="18" r="1" fill="currentColor" />
-            </svg>
-          </button>
-        </div>
-
-        <button
-          onClick={() => setDialog({ type: 'new-folder' })}
-          style={{
-            padding: '6px 14px', borderRadius: 8, border: '1px solid var(--color-border)',
-            background: 'transparent', color: 'var(--color-text-muted)', fontSize: 13, cursor: 'pointer',
-          }}
-          title="New folder"
-        >
-          + Folder
-        </button>
-        <button
-          onClick={() => fileInputRef.current?.click()}
-          style={{
-            padding: '6px 14px', borderRadius: 8, border: 'none',
-            background: 'var(--color-primary)', color: '#fff', fontSize: 13, fontWeight: 600, cursor: 'pointer',
-          }}
-          title="Upload files (drag & drop for folders)"
-        >
-          Upload
-        </button>
+        <FileToolbar
+          selectedCount={selected.size}
+          onDownloadSelection={downloadSelection}
+          onTrashSelection={() => setDialog({ type: 'confirm-delete-many', ids: [...selected] })}
+          onClearSelection={() => setSelected(new Set())}
+          onOpenFolder={openFromSearch}
+          onOpenFile={openHitFile}
+          sort={sort}
+          onSort={setSort}
+          viewMode={viewMode}
+          onViewMode={setViewMode}
+          onNewFolder={() => setDialog({ type: 'new-folder' })}
+          onUpload={() => fileInputRef.current?.click()}
+        />
       </PageHeader>
 
-      {/* Content */}
       <div className="aether-content" style={{ flex: 1, overflowY: 'auto' }}>
         {loading && (
           <div style={{ display: 'flex', justifyContent: 'center', paddingTop: 80 }}>
@@ -957,44 +626,8 @@ export default function FileBrowser({
           </div>
         )}
 
-        {!loading && !isEmpty && viewMode === 'grid' && (
-          <GridView
-            highlightId={highlightId}
-            fileTags={fileTags}
-            fileCorrespondents={fileCorrespondents}
-            selected={selected}
-            onToggleSelect={toggleSelect}
-            folders={sortedFolders}
-            files={sortedFiles}
-            onFolderOpen={navigateTo}
-            onFolderMenu={openFolderMenu}
-            onFileMenu={openFileMenu}
-            onFileOpen={openFile}
-            onFileDownload={downloadFile}
-            onFolderDrop={handleDropOnFolder}
-            dragOverFolder={dragOverFolder}
-            onFolderDragOver={setDragOverFolder}
-          />
-        )}
-
-        {!loading && !isEmpty && viewMode === 'list' && (
-          <ListView
-            highlightId={highlightId}
-            fileTags={fileTags}
-            fileCorrespondents={fileCorrespondents}
-            selected={selected}
-            onToggleSelect={toggleSelect}
-            folders={sortedFolders}
-            files={sortedFiles}
-            onFolderOpen={navigateTo}
-            onFolderMenu={openFolderMenu}
-            onFileMenu={openFileMenu}
-            onFileOpen={openFile}
-            onFileDownload={downloadFile}
-            onFolderDrop={handleDropOnFolder}
-            dragOverFolder={dragOverFolder}
-            onFolderDragOver={setDragOverFolder}
-          />
+        {!loading && !isEmpty && (
+          viewMode === 'grid' ? <GridView {...viewProps} /> : <ListView {...viewProps} />
         )}
       </div>
 
@@ -1030,7 +663,6 @@ export default function FileBrowser({
         />
       )}
 
-      {/* Hidden file input */}
       <input
         ref={fileInputRef}
         type="file"
@@ -1038,140 +670,43 @@ export default function FileBrowser({
         style={{ display: 'none' }}
         onChange={e => {
           const list = Array.from(e.target.files ?? [])
-          if (list.length) uploadFiles(list)
+          if (list.length) void uploads.uploadFiles(list)
+          // Zurücksetzen, sonst löst dieselbe Datei ein zweites Mal nichts aus.
           e.target.value = ''
         }}
       />
 
-      <UploadQueue items={uploads} onDismiss={id => setUploads(u => u.filter(x => x.id !== id))} />
+      <UploadQueue items={uploads.items} onDismiss={uploads.dismiss} />
       {ctxMenu && <ContextMenu {...ctxMenu} onClose={() => setCtxMenu(null)} />}
 
-      {dialog?.type === 'rename' && (
-        <InputDialog
-          title="Rename"
-          defaultValue={dialog.file.name}
-          confirmLabel="Rename"
-          onConfirm={name => handleRename(dialog.file, name)}
-          onCancel={() => setDialog(null)}
-        />
-      )}
-      {dialog?.type === 'rename-folder' && (
-        <InputDialog
-          title="Rename folder"
-          defaultValue={dialog.folder.name}
-          confirmLabel="Rename"
-          onConfirm={name => handleRenameFolder(dialog.folder, name)}
-          onCancel={() => setDialog(null)}
-        />
-      )}
-      {dialog?.type === 'confirm-delete-folder' && (
-        <ConfirmDialog
-          title="Delete folder"
-          message={`Move "${dialog.folder.name}" and all its contents to the trash?`}
-          confirmLabel="Delete"
-          danger
-          onConfirm={() => handleDeleteFolder(dialog.folder)}
-          onCancel={() => setDialog(null)}
-        />
-      )}
-      {dialog?.type === 'new-folder' && (
-        <InputDialog
-          title="New folder"
-          placeholder="Folder name"
-          confirmLabel="Create"
-          onConfirm={handleCreateFolder}
-          onCancel={() => setDialog(null)}
-        />
-      )}
-      {dialog?.type === 'share-with' && (
-        <ShareWithDialog
-          resource={dialog.resource}
-          onClose={() => setDialog(null)}
-        />
-      )}
-      {dialog?.type === 'share' && (
-        <ShareDialog
-          file={dialog.file}
-          onClose={() => setDialog(null)}
-        />
-      )}
-      {dialog?.type === 'versions' && (
-        <VersionsDialog
-          file={dialog.file}
-          onClose={() => setDialog(null)}
-          onRestored={updated => {
-            setFiles(f => f.map(x => x.id === updated.id ? updated : x))
-            setDialog(null)
-          }}
-        />
-      )}
-      {dialog?.type === 'confirm-delete' && (
-        <ConfirmDialog
-          title="Move to trash"
-          message={`Move "${dialog.file.name}" to the trash?`}
-          confirmLabel="Move to trash"
-          danger
-          onConfirm={() => handleDelete(dialog.file)}
-          onCancel={() => setDialog(null)}
-        />
-      )}
-
-      {dialog?.type === 'confirm-delete-many' && (
-        <ConfirmDialog
-          title="Move to trash"
-          message={`Move ${dialog.ids.length} ${dialog.ids.length === 1 ? 'file' : 'files'} to the trash? You can restore them from there.`}
-          confirmLabel={`Move ${dialog.ids.length} to trash`}
-          danger
-          onConfirm={() => deleteSelection(dialog.ids)}
-          onCancel={() => setDialog(null)}
-        />
-      )}
-
-      {dialog?.type === 'info' && (
-        <FileInfoDialog
-          file={dialog.file}
-          tags={fileTags[dialog.file.id] ?? []}
-          correspondent={fileCorrespondents[dialog.file.id]}
-          onClose={() => setDialog(null)}
-        />
-      )}
-
-      {dialog?.type === 'tags' && (
-        <TagDialog
-          file={dialog.file}
-          current={fileTags[dialog.file.id] ?? []}
-          currentCorrespondent={fileCorrespondents[dialog.file.id]}
-          onClose={() => setDialog(null)}
-          onSaved={tags => {
-            // Nur die eine Datei nachziehen statt die ganze Liste neu zu holen.
-            setFileTags(prev => ({ ...prev, [dialog.file.id]: tags }))
-            // Der Absender kann dabei neu entstanden sein und hat dann eine ID,
-            // die hier niemand kennt. Deshalb einmal nachladen – sonst zeigte
-            // die Kachel den alten Absender, bis man den Ordner wechselt.
-            void reloadCorrespondents()
-          }}
-        />
-      )}
-
-      {dialog?.type === 'move-file' && (
-        <MoveTo
-          title={`Move "${dialog.file.name}"`}
-          onConfirm={targetId => handleMoveFile(dialog.file, targetId)}
-          onCancel={() => setDialog(null)}
-        />
-      )}
-      {dialog?.type === 'move-folder' && (
-        <MoveTo
-          title={`Move "${dialog.folder.name}"`}
-          excludeId={dialog.folder.id}
-          onConfirm={targetId => handleMoveFolder(dialog.folder, targetId)}
-          onCancel={() => setDialog(null)}
-        />
-      )}
+      <FileDialogs
+        dialog={dialog}
+        onClose={() => setDialog(null)}
+        fileTags={fileTags}
+        fileCorrespondents={fileCorrespondents}
+        renameFile={handleRename}
+        renameFolder={handleRenameFolder}
+        createFolder={handleCreateFolder}
+        deleteFile={handleDelete}
+        deleteFolder={handleDeleteFolder}
+        deleteMany={deleteSelection}
+        moveFile={handleMoveFile}
+        moveFolder={handleMoveFolder}
+        versionRestored={updated => {
+          setFiles(f => f.map(x => x.id === updated.id ? updated : x))
+          setDialog(null)
+        }}
+        tagsSaved={(fileId, tags) => {
+          // Nur die eine Datei nachziehen statt die ganze Liste neu zu holen.
+          setFileTags(prev => ({ ...prev, [fileId]: tags }))
+          // Der Absender kann dabei neu entstanden sein und hat dann eine ID,
+          // die hier niemand kennt. Deshalb einmal nachladen – sonst zeigte
+          // die Kachel den alten Absender, bis man den Ordner wechselt.
+          void reloadCorrespondents()
+        }}
+      />
 
       <style>{`@keyframes spin { to { transform: rotate(360deg); } }`}</style>
     </div>
   )
 }
-
-// ── Grid View ────────────────────────────────────────────────────────────────
diff --git a/frontend/src/pages/SharedWithMePage.tsx b/frontend/src/pages/SharedWithMePage.tsx
index 7fd8199..9a50e24 100644
--- a/frontend/src/pages/SharedWithMePage.tsx
+++ b/frontend/src/pages/SharedWithMePage.tsx
@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react'
 import { aclApi, filesApi, type SharedResource } from '../api/client'
-import { formatBytes } from './FileBrowser'
+import { formatBytes } from '../format'
 import PageHeader from '../components/PageHeader'
 import { FolderGlyph } from '../components/icons'
 
diff --git a/frontend/src/pages/TagsPage.tsx b/frontend/src/pages/TagsPage.tsx
index 09746d0..0ee7aa8 100644
--- a/frontend/src/pages/TagsPage.tsx
+++ b/frontend/src/pages/TagsPage.tsx
@@ -3,7 +3,7 @@ import { tagsApi, correspondentsApi, filesApi, downloadZip, type Correspondent,
 import PageHeader from '../components/PageHeader'
 import { FileTypeIcon } from '../components/icons'
 import TagChip, { tagColor } from '../components/TagChip'
-import { formatBytes } from './FileBrowser'
+import { formatBytes } from '../format'
 
 /**
  * Alles, was ein Etikett trägt – über Ordnergrenzen hinweg.
diff --git a/frontend/src/pages/TrashPage.tsx b/frontend/src/pages/TrashPage.tsx
index 2fb81db..eb044bd 100644
--- a/frontend/src/pages/TrashPage.tsx
+++ b/frontend/src/pages/TrashPage.tsx
@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react'
 import { trashApi, filesApi, type TrashItem } from '../api/client'
-import { formatBytes } from './FileBrowser'
+import { formatBytes } from '../format'
 import PageHeader from '../components/PageHeader'
 import ConfirmDialog from '../components/ConfirmDialog'
 
diff --git a/frontend/src/pages/admin/ui.tsx b/frontend/src/pages/admin/ui.tsx
index 3efe076..c5ecbf5 100644
--- a/frontend/src/pages/admin/ui.tsx
+++ b/frontend/src/pages/admin/ui.tsx
@@ -10,12 +10,10 @@ import { useOverlayDismiss } from '../../hooks/useOverlayDismiss'
  */
 
 
-export function formatBytes(n: number): string {
-  if (n < 1024) return `${n} B`
-  if (n < 1024 ** 2) return `${(n / 1024).toFixed(1)} KB`
-  if (n < 1024 ** 3) return `${(n / 1024 ** 2).toFixed(1)} MB`
-  return `${(n / 1024 ** 3).toFixed(1)} GB`
-}
+// Zeichengleiche zweite Fassung -- sie stand hier und noch einmal im
+// Dateibrowser. Jetzt eine Stelle, hier nur weitergereicht, damit die
+// Admin-Reiter ihre gewohnte Adresse behalten.
+export { formatBytes } from '../../format'
 
 export function bytesFromGB(gb: number): number {
   return Math.round(gb * 1024 ** 3)
diff --git a/frontend/src/test-setup.ts b/frontend/src/test-setup.ts
index bd6540c..8883f6b 100644
--- a/frontend/src/test-setup.ts
+++ b/frontend/src/test-setup.ts
@@ -1 +1,7 @@
-import '@testing-library/react'
+// Absichtlich leer.
+//
+// Hier stand `import '@testing-library/react'` – das setzt ein Fenster
+// voraus. Solange die Tests reine Funktionen prüfen (siehe vite.config.ts,
+// environment: 'node'), gäbe dieser Import nur einen Fehler beim Start.
+// Wer Komponenten prüft, holt die Bibliothek in seiner eigenen Datei.
+export {}
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index 1895c29..038ae37 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -137,7 +137,14 @@ export default defineConfig({
     },
   },
   test: {
-    environment: 'jsdom',
+    // **node, nicht jsdom.** Die Einstellung stand auf 'jsdom', ohne dass
+    // jsdom je installiert war – `npm test` brach deshalb ab, bevor es
+    // irgendetwas ausführte. Geprüft wird hier, was sich ohne Browser prüfen
+    // lässt: Reihenfolgen, Zoomstufen, Suche im Text, Einheiten.
+    //
+    // Wer eine Komponente prüfen will, schreibt `// @vitest-environment jsdom`
+    // an den Anfang seiner Datei und nimmt jsdom in die devDependencies auf.
+    environment: 'node',
     globals: true,
     setupFiles: './src/test-setup.ts',
   },