Fallakte in Reiter geteilt

Akte, Beteiligte, Dokumente, Änderungen, Export — als eigene Seiten unter
einem gemeinsamen Layout, nicht als umgeschaltete Blöcke. Ein Reiter, der im
Client nur ein- und ausgeblendet wird, kostet dasselbe wie vorher; nur eigene
Seiten trennen den Code wirklich.

Der Schnitt folgt der Fachlichkeit: die drei Ebenen aus docs/05 — Kopfdaten,
Abschnitte, Verlauf — bleiben zusammen, samt Aktenchat. Das Umfeld der Akte
braucht man selten gleichzeitig mit dem Sachstand.

Kopf, Stempel und die Knöpfe für Status und Umklassifizierung stehen im
Layout und damit auf jedem Reiter.

Grösste Route 116,2 statt 119,8 von 120 kB, die neuen Reiter bei 110,7 und
110,9. Damit ist wieder Luft für Phase 9.

48 e2e-Tests, 178 im Web-Paket unverändert grün.

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

TASKS.md

@@ -131,8 +131,8 @@ Das ist der schwierigste Teil. Wenn er steht, ist der Rest Formularbau.
 - [x] Freigabeverfahren ab Stufe 3
 - [x] Einzeldokument als PDF, ohne Verlauf, Aussehen aus der Vorlage
 - [x] ZIP-Sammelexport und JSON-Vollexport für Admins
-- [ ] Entscheidung offen: Fallakte aufteilen, das Bündelbudget ist aufgebraucht
+- [x] Fallakte in Reiter geteilt, Bündelbudget wieder eingehalten
-      (119,8 von 120 kB) — siehe docs/13-entscheidungen.md
+      (116,2 statt 119,8 von 120 kB)
 
 ## Phase 9 — Schliff
 

docs/13-entscheidungen.md

@@ -811,11 +811,22 @@ Die Fallakte liegt bei **119,8 kB** gegen 120 erlaubte. In dieser Phase kostete
 Verschieben der Exporttexte in eine eigene i18n-Datei den Unterschied zwischen 120,3 und
 119,8 — der Export selbst hat eine eigene Seite und trägt nichts zur Fallakte bei.
 
-Damit ist Schluss mit dem Kürzen: die nächste Insel auf dieser Seite reisst das Budget, und es
+Damit war Schluss mit dem Kürzen. Die Seite ist deshalb in **Reiter** geteilt worden, und zwar
-gibt nichts Offensichtliches mehr wegzunehmen. Der nächste Schritt ist, die Seite zu teilen —
+in eigene Seiten, nicht in umgeschaltete Blöcke: nur so wird der Code getrennt geladen. Ein
-Beteiligte, Verknüpfungen, Dokumente und Anhänge gehören fachlich zusammen und könnten hinter
+Reiter, der im Client nur ein- und ausgeblendet wird, kostet dasselbe wie vorher.
-einen Reiter oder auf eine eigene Unterseite. Das ist eine Änderung an der Bedienung und
+
-sollte deshalb bewusst entschieden werden, nicht nebenbei beim nächsten Feature.
+| Reiter | Inhalt | Bündel |
+|---|---|---|
+| Akte | Abschnitte, Verlauf, Aktenchat | 116,2 kB |
+| Beteiligte | Beteiligte, Verknüpfungen | 110,7 kB |
+| Dokumente | Dokumente, Anhänge | 110,9 kB |
+
+Kopfdaten, Stempel und die Knöpfe für Status und Umklassifizierung stehen im gemeinsamen
+Layout und damit auf jedem Reiter.
+
+Der Schnitt folgt der Fachlichkeit, nicht dem Bündel: die drei Ebenen aus
+`docs/05-akten-und-vorlagen.md` — Kopfdaten, Abschnitte, Verlauf — gehören zusammen und
+bleiben zusammen. Das Umfeld der Akte braucht man selten gleichzeitig mit dem Sachstand.
 
 ## Ein Verweis in der Datenbank ist kein Beweis für eine Datei
 

web/app/(app)/faelle/[caseNumber]/aenderungen/page.tsx

@@ -1,5 +1,4 @@
 import type { Metadata } from 'next'
-import Link from 'next/link'
 import { notFound } from 'next/navigation'
 import { db } from '@/lib/db'
 import { requireUser } from '@/lib/auth/current'
@@ -41,11 +40,10 @@ export default async function ChangesPage({
   )
 
   return (
-    <main className="mx-auto max-w-5xl px-6 py-10">
+    <>
-      <p className="font-mono text-xs text-text-dim">
+      {/* Aktenzeichen und Titel stehen im Layout, hier nur noch die Überschrift
-        <Link href={`/faelle/${akte.caseNumber}`}>{akte.caseNumber}</Link>
+          des Reiters. */}
-      </p>
+      <h2 className="font-condensed">{de.entry.changesHeading}</h2>
-      <h1 className="mt-2 font-condensed">{de.entry.changesHeading}</h1>
       <p className="mt-2 max-w-(--container-measure) text-text-dim">{de.entry.changesIntro}</p>
 
       {versionen.length === 0 ? (
@@ -94,6 +92,6 @@ export default async function ChangesPage({
           ))}
         </ol>
       )}
-    </main>
+    </>
   )
 }

web/app/(app)/faelle/[caseNumber]/beteiligte/page.tsx

@@ -0,0 +1,84 @@
+import type { Metadata } from 'next'
+import { notFound } from 'next/navigation'
+import { db } from '@/lib/db'
+import { requireUser } from '@/lib/auth/current'
+import { visiblePersonnelWhere } from '@/lib/access/personnelFilter'
+import { canEditCase } from '@/lib/access/caseWrite'
+import { loadVisibleCase } from '@/lib/cases/service'
+import { listParticipants } from '@/lib/cases/participants'
+import { listLinks } from '@/lib/cases/links'
+import { de } from '@/lib/i18n/de'
+import { Participants } from '../Participants'
+import { CaseLinks } from '../CaseLinks'
+
+export const metadata: Metadata = { title: de.case.tabRelations }
+export const dynamic = 'force-dynamic'
+
+/**
+ * Wer und was an dieser Akte hängt.
+ *
+ * Eigener Reiter, weil beides selten zugleich mit dem Sachstand gebraucht wird
+ * und die Fallakte sonst das Bündelbudget reisst. Siehe das Layout daneben.
+ */
+export default async function CaseRelationsPage({
+  params,
+}: {
+  params: Promise<{ caseNumber: string }>
+}) {
+  const user = await requireUser()
+  const { caseNumber } = await params
+
+  const akte = await loadVisibleCase(user.permissions, caseNumber)
+  if (!akte) notFound()
+
+  const canEdit = canEditCase(user.permissions, akte).ok
+  const darfPersonal =
+    user.permissions.isAdmin || user.permissions.permissions.has('personnel.read')
+
+  const [participants, links, members, files] = await Promise.all([
+    listParticipants(user.permissions, akte.id),
+    listLinks(user.permissions, akte.id),
+    canEdit
+      ? db.user.findMany({
+          where: { isActive: true },
+          orderBy: { displayName: 'asc' },
+          take: 200,
+          select: { id: true, displayName: true },
+        })
+      : Promise.resolve([]),
+    // Nur Personalakten, die der Eintragende sehen darf, und nur mit dem Recht
+    // dazu: sonst verriete die Auswahlliste ihre Existenz.
+    canEdit && darfPersonal
+      ? db.personnelFile.findMany({
+          where: visiblePersonnelWhere(user.permissions),
+          orderBy: { displayName: 'asc' },
+          take: 200,
+          select: { id: true, displayName: true },
+        })
+      : Promise.resolve([]),
+  ])
+
+  return (
+    <div className="grid gap-10 md:grid-cols-2">
+      <section>
+        <h2 className="font-condensed">{de.participant.heading}</h2>
+        <div className="mt-4">
+          <Participants
+            caseNumber={akte.caseNumber}
+            participants={participants}
+            canEdit={canEdit}
+            members={members}
+            files={files}
+          />
+        </div>
+      </section>
+
+      <section>
+        <h2 className="font-condensed">{de.link.heading}</h2>
+        <div className="mt-4">
+          <CaseLinks caseNumber={akte.caseNumber} links={links} canEdit={canEdit} />
+        </div>
+      </section>
+    </div>
+  )
+}

web/app/(app)/faelle/[caseNumber]/dokumente/page.tsx

@@ -0,0 +1,75 @@
+import type { Metadata } from 'next'
+import { notFound } from 'next/navigation'
+import { db } from '@/lib/db'
+import { requireUser } from '@/lib/auth/current'
+import { canEditCase } from '@/lib/access/caseWrite'
+import { loadVisibleCase } from '@/lib/cases/service'
+import { listDocuments, listTemplatesFor } from '@/lib/documents/service'
+import { listAttachments } from '@/lib/files/service'
+import { toAttachmentViews } from '@/lib/files/view'
+import { de } from '@/lib/i18n/de'
+import { DocumentList } from '@/components/documents/DocumentList'
+import { NewDocument } from '@/components/documents/NewDocument'
+import { Attachments } from '@/components/files/Attachments'
+
+export const metadata: Metadata = { title: de.document.heading }
+export const dynamic = 'force-dynamic'
+
+/**
+ * Was der Akte beiliegt: erzeugte Dokumente und hochgeladene Dateien.
+ */
+export default async function CaseDocumentsPage({
+  params,
+}: {
+  params: Promise<{ caseNumber: string }>
+}) {
+  const user = await requireUser()
+  const { caseNumber } = await params
+
+  const akte = await loadVisibleCase(user.permissions, caseNumber)
+  if (!akte) notFound()
+
+  const canEdit = canEditCase(user.permissions, akte).ok
+
+  const [documents, anhaenge, templates, levels] = await Promise.all([
+    listDocuments(user.permissions, { caseId: akte.id }),
+    listAttachments(user.permissions, { caseId: akte.id }),
+    canEdit ? listTemplatesFor('CASE_DOCUMENT') : Promise.resolve([]),
+    db.clearanceLevelConfig.findMany({ orderBy: { level: 'asc' } }),
+  ])
+
+  return (
+    <div className="space-y-10">
+      <section>
+        <h2 className="font-condensed">{de.document.heading}</h2>
+        <div className="mt-4 space-y-4">
+          <DocumentList
+            documents={documents}
+            levelName={new Map(levels.map((l) => [l.level, l.name]))}
+          />
+          {canEdit ? (
+            <NewDocument
+              templates={templates}
+              levels={levels.filter((l) => l.level <= user.permissions.clearanceLevel)}
+              defaultLevel={Math.min(akte.classification, user.permissions.clearanceLevel)}
+              caseNumber={akte.caseNumber}
+            />
+          ) : null}
+        </div>
+      </section>
+
+      <section>
+        <h2 className="font-condensed">{de.attachment.heading}</h2>
+        <div className="mt-4">
+          <Attachments
+            target={{ caseNumber: akte.caseNumber }}
+            topic={`case:${akte.id}`}
+            initial={toAttachmentViews(anhaenge)}
+            canUpload={canEdit}
+            canRelease={user.permissions.isAdmin}
+          />
+        </div>
+      </section>
+    </div>
+  )
+}

web/app/(app)/faelle/[caseNumber]/export/page.tsx

@@ -29,10 +29,8 @@ export default async function CaseExportPage({
   if (!akte) notFound()
 
   return (
-    <main className="mx-auto max-w-(--container-measure) px-6 py-10">
+    <div className="max-w-(--container-measure)">
-      <p className="font-mono text-xs text-text-dim">{akte.caseNumber}</p>
+      <h2 className="font-condensed">{de.export.heading}</h2>
-      <h1 className="mt-1 font-condensed">{de.export.heading}</h1>
-
       <p className="mt-3 text-sm text-text-dim">{de.export.coverNote}</p>
 
       <div className="mt-6">
@@ -46,10 +44,9 @@ export default async function CaseExportPage({
         <p className="mt-4 text-2xs text-stamp-3">{de.export.waitingApprovalHint}</p>
       ) : null}
 
-      <nav className="mt-8 flex gap-4 font-condensed text-xs">
+      <p className="mt-8 font-condensed text-xs">
-        <Link href={`/faelle/${akte.caseNumber}`}>{akte.caseNumber}</Link>
         <Link href={`/faelle/${akte.caseNumber}/druck`}>{de.export.print}</Link>
-      </nav>
+      </p>
-    </main>
+    </div>
   )
 }

web/app/(app)/faelle/[caseNumber]/layout.tsx

@@ -0,0 +1,100 @@
+import type { ReactNode } from 'react'
+import Link from 'next/link'
+import { notFound } from 'next/navigation'
+import { db } from '@/lib/db'
+import { requireUser } from '@/lib/auth/current'
+import { loadVisibleCase } from '@/lib/cases/service'
+import { de } from '@/lib/i18n/de'
+import { StampMark, classificationEdgeStyle } from '@/components/StampMark'
+import { allowedTargets, type CaseStatusName } from '@/lib/cases/lifecycle'
+import { CaseActions } from './CaseActions'
+
+export const dynamic = 'force-dynamic'
+
+/**
+ * Kopf und Reiter einer Fallakte.
+ *
+ * Die Akte ist in Reiter geteilt, und zwar in **eigene Seiten**, nicht in
+ * umgeschaltete Blöcke: nur so wird der Code getrennt geladen. Die Fallakte
+ * war die dichteste Seite der Anwendung und hatte das Bündelbudget aus
+ * docs/09-performance-und-ux.md aufgebraucht — Beteiligte, Verknüpfungen,
+ * Dokumente und Anhänge lagen mit auf der Seite, obwohl man sie selten
+ * gleichzeitig braucht.
+ *
+ * Fachlich passt der Schnitt ohnehin: die drei Ebenen aus
+ * docs/05-akten-und-vorlagen.md — Kopfdaten, Abschnitte, Verlauf — bleiben
+ * zusammen, das Umfeld der Akte bekommt seinen eigenen Platz.
+ */
+export default async function CaseLayout({
+  children,
+  params,
+}: {
+  children: ReactNode
+  params: Promise<{ caseNumber: string }>
+}) {
+  const user = await requireUser()
+  const { caseNumber } = await params
+
+  const akte = await loadVisibleCase(user.permissions, caseNumber)
+  // Kein Zugriff heisst 404, nicht 403: die Existenz ist selbst eine Information.
+  if (!akte) notFound()
+
+  const levels = await db.clearanceLevelConfig.findMany({ orderBy: { level: 'asc' } })
+  const level = levels.find((l) => l.level === akte.classification)
+
+  const reiter = [
+    { href: '', label: de.case.tabFile },
+    { href: '/beteiligte', label: de.case.tabRelations },
+    { href: '/dokumente', label: de.case.tabDocuments },
+    { href: '/aenderungen', label: de.case.changes },
+    { href: '/export', label: de.export.heading },
+  ]
+
+  return (
+    <main className="mx-auto max-w-5xl px-6 py-10">
+      <header className="pl-3" style={classificationEdgeStyle(akte.classification)}>
+        <div className="flex flex-wrap items-baseline gap-x-4 gap-y-2">
+          <span className="font-mono text-xs text-text-dim">{akte.caseNumber}</span>
+          <StampMark level={akte.classification} name={level?.name ?? de.common.unknown} />
+        </div>
+        <h1 className="mt-2 font-condensed">{akte.title}</h1>
+        <dl className="mt-3 flex flex-wrap gap-x-8 gap-y-1 text-xs text-text-dim">
+          <div className="flex gap-2">
+            <dt className="font-condensed">{de.case.status}</dt>
+            <dd>{de.case.statusNames[akte.status]}</dd>
+          </div>
+          <div className="flex gap-2">
+            <dt className="font-condensed">{de.case.type}</dt>
+            <dd>{akte.templateKey}</dd>
+          </div>
+          {akte.dueAt ? (
+            <div className="flex gap-2">
+              <dt className="font-condensed">{de.case.dueAt}</dt>
+              <dd>{akte.dueAt.toLocaleDateString('de-DE')}</dd>
+            </div>
+          ) : null}
+        </dl>
+
+        {/* Statuswechsel und Umklassifizierung gehören zum Kopf und stehen
+            deshalb auf jedem Reiter zur Verfügung. */}
+        <CaseActions
+          caseNumber={akte.caseNumber}
+          classification={akte.classification}
+          statusTargets={allowedTargets(akte.status as CaseStatusName)}
+          levels={levels.map((l) => ({ level: l.level, name: l.name }))}
+          maxLevel={user.permissions.clearanceLevel}
+        />
+      </header>
+
+      <nav className="mt-8 flex flex-wrap gap-4 border-b border-line pb-2 font-condensed text-xs">
+        {reiter.map((eintrag) => (
+          <Link key={eintrag.href} href={`/faelle/${akte.caseNumber}${eintrag.href}`}>
+            {eintrag.label}
+          </Link>
+        ))}
+      </nav>
+
+      <div className="mt-8">{children}</div>
+    </main>
+  )
+}

web/app/(app)/faelle/[caseNumber]/page.tsx

@@ -1,37 +1,23 @@
 import type { Metadata } from 'next'
 import { Suspense } from 'react'
 import { notFound } from 'next/navigation'
+import Link from 'next/link'
 import { db } from '@/lib/db'
 import { requireUser } from '@/lib/auth/current'
 import { visibleEntryWhere } from '@/lib/access/caseFilter'
 import { loadVisibleCase } from '@/lib/cases/service'
 import { recordRead, READ_AUDIT_FROM_LEVEL } from '@/lib/audit'
 import { de } from '@/lib/i18n/de'
-import { StampMark, classificationEdgeStyle } from '@/components/StampMark'
 import { SkeletonLine } from '@/components/Skeleton'
 import { EntryComposer } from './EntryComposer'
 import { Sections } from '@/components/sections/Sections'
 import { saveSectionAction } from './sectionActions'
 import { loadSections } from '@/lib/cases/sectionService'
 import { canEditCase } from '@/lib/access/caseWrite'
-import { CaseActions } from './CaseActions'
 import { EntryActions } from './EntryActions'
-import { Participants } from './Participants'
-import { CaseLinks } from './CaseLinks'
-import { listParticipants } from '@/lib/cases/participants'
-import { listLinks } from '@/lib/cases/links'
-import { listDocuments, listTemplatesFor } from '@/lib/documents/service'
-import { visiblePersonnelWhere } from '@/lib/access/personnelFilter'
-import { DocumentList } from '@/components/documents/DocumentList'
-import { NewDocument } from '@/components/documents/NewDocument'
-import { Attachments } from '@/components/files/Attachments'
 import { ChatLazy } from '@/components/chat/ChatLazy'
 import { loadChatView } from '@/lib/chat/load'
-import { listAttachments } from '@/lib/files/service'
-import { toAttachmentViews } from '@/lib/files/view'
-import { allowedTargets, type CaseStatusName } from '@/lib/cases/lifecycle'
 import { evaluateEntryEdit, canRetract } from '@/lib/cases/entryPolicy'
-import Link from 'next/link'
 import type { EffectivePermissions } from '@/lib/auth/permissions'
 
 export const dynamic = 'force-dynamic'
@@ -45,11 +31,6 @@ export async function generateMetadata({
   return { title: caseNumber }
 }
 
-/**
- * Der Verlauf hängt in einer eigenen Suspense-Grenze und streamt nach. Die
- * Kopfdaten stehen sofort, der Nutzer liest schon, während der Rest lädt.
- * Siehe docs/09-performance-und-ux.md.
- */
 async function Timeline({
   caseId,
   caseNumber,
@@ -146,102 +127,31 @@ async function Timeline({
   )
 }
 
-/**
+async function SectionBlock({
- * Beteiligte, Verknüpfungen und Dokumente hängen in einer gemeinsamen
+  caseId,
- * Suspense-Grenze: drei kleine Abfragen, die zusammen einen Block ergeben.
+  caseNumber,
- * Getrennt zu streamen liesse den Kasten dreimal springen.
+  templateId,
- */
-async function Relations({
-  akte,
   permissions,
   canEdit,
 }: {
-  akte: { id: string; caseNumber: string; classification: number }
+  caseId: string
+  caseNumber: string
+  templateId: string
   permissions: EffectivePermissions
   canEdit: boolean
 }) {
-  const [participants, links, documents, anhaenge, templates, levels, members, files] =
+  const sections = await loadSections(permissions, caseId, templateId)
-    await Promise.all([
-    listParticipants(permissions, akte.id),
-    listLinks(permissions, akte.id),
-    listDocuments(permissions, { caseId: akte.id }),
-    listAttachments(permissions, { caseId: akte.id }),
-    canEdit ? listTemplatesFor('CASE_DOCUMENT') : Promise.resolve([]),
-    db.clearanceLevelConfig.findMany({ orderBy: { level: 'asc' } }),
-    canEdit
-      ? db.user.findMany({
-          orderBy: { displayName: 'asc' },
-          take: 200,
-          select: { id: true, displayName: true },
-        })
-      : Promise.resolve([]),
-    // Nur Personalakten, die der Eintragende sehen darf, und nur, wenn er sie
-    // überhaupt lesen darf: sonst verriete die Auswahlliste ihre Existenz.
-    canEdit && (permissions.isAdmin || permissions.permissions.has('personnel.read'))
-      ? db.personnelFile.findMany({
-          where: visiblePersonnelWhere(permissions),
-          orderBy: { displayName: 'asc' },
-          take: 200,
-          select: { id: true, displayName: true },
-        })
-      : Promise.resolve([]),
-  ])
-
-  const levelName = new Map(levels.map((l) => [l.level, l.name]))
-
   return (
-    <div className="grid gap-10 md:grid-cols-2">
+    <Sections
-      <section>
+      scope={`fall:${caseNumber}`}
-        <h2 className="font-condensed">{de.participant.heading}</h2>
+      save={saveSectionAction.bind(null, caseNumber)}
-        <div className="mt-4">
+      sections={sections}
-          <Participants
+      canEdit={canEdit}
-            caseNumber={akte.caseNumber}
+    />
-            participants={participants}
-            canEdit={canEdit}
-            members={members}
-            files={files}
-          />
-        </div>
-      </section>
-
-      <section>
-        <h2 className="font-condensed">{de.link.heading}</h2>
-        <div className="mt-4">
-          <CaseLinks caseNumber={akte.caseNumber} links={links} canEdit={canEdit} />
-        </div>
-      </section>
-
-      <section className="md:col-span-2">
-        <h2 className="font-condensed">{de.attachment.heading}</h2>
-        <div className="mt-4">
-          <Attachments
-            target={{ caseNumber: akte.caseNumber }}
-            topic={`case:${akte.id}`}
-            initial={toAttachmentViews(anhaenge)}
-            canUpload={canEdit}
-            canRelease={permissions.isAdmin}
-          />
-        </div>
-      </section>
-
-      <section className="md:col-span-2">
-        <h2 className="font-condensed">{de.document.heading}</h2>
-        <div className="mt-4 space-y-4">
-          <DocumentList documents={documents} levelName={levelName} />
-          {canEdit ? (
-            <NewDocument
-              templates={templates}
-              levels={levels.filter((l) => l.level <= permissions.clearanceLevel)}
-              defaultLevel={Math.min(akte.classification, permissions.clearanceLevel)}
-              caseNumber={akte.caseNumber}
-            />
-          ) : null}
-        </div>
-      </section>
-    </div>
   )
 }
 
+
 /**
  * Der Aktenchat. Eigene Suspense-Grenze, weil er die meisten Abfragen macht
  * und der Rest der Seite nicht auf ihn warten soll.
@@ -272,30 +182,11 @@ async function ChatBlock({
   )
 }
 
-async function SectionBlock({
+/**
-  caseId,
+ * Der Reiter „Akte": die drei Ebenen aus docs/05-akten-und-vorlagen.md, die
-  caseNumber,
+ * zusammengehören — Abschnitte als Sachstand, Verlauf als Chronologie, dazu
-  templateId,
+ * der formlose Aktenchat. Kopfdaten und Reiterleiste stehen im Layout.
-  permissions,
+ */
-  canEdit,
-}: {
-  caseId: string
-  caseNumber: string
-  templateId: string
-  permissions: EffectivePermissions
-  canEdit: boolean
-}) {
-  const sections = await loadSections(permissions, caseId, templateId)
-  return (
-    <Sections
-      scope={`fall:${caseNumber}`}
-      save={saveSectionAction.bind(null, caseNumber)}
-      sections={sections}
-      canEdit={canEdit}
-    />
-  )
-}
-
 export default async function CasePage({
   params,
 }: {
@@ -320,46 +211,9 @@ export default async function CasePage({
     })
   }
 
-  const levels = await db.clearanceLevelConfig.findMany({ orderBy: { level: 'asc' } })
-  const level = levels.find((l) => l.level === akte.classification)
-
   return (
-    <main className="mx-auto max-w-5xl px-6 py-10">
+    <>
-      <header
+      <section>
-        className="pl-3"
-        style={classificationEdgeStyle(akte.classification)}
-      >
-        <div className="flex flex-wrap items-baseline gap-x-4 gap-y-2">
-          <span className="font-mono text-xs text-text-dim">{akte.caseNumber}</span>
-          <StampMark level={akte.classification} name={level?.name ?? de.common.unknown} />
-        </div>
-        <h1 className="mt-2 font-condensed">{akte.title}</h1>
-        <dl className="mt-3 flex flex-wrap gap-x-8 gap-y-1 text-xs text-text-dim">
-          <div className="flex gap-2">
-            <dt className="font-condensed">{de.case.status}</dt>
-            <dd>{de.case.statusNames[akte.status]}</dd>
-          </div>
-          <div className="flex gap-2">
-            <dt className="font-condensed">{de.case.type}</dt>
-            <dd>{akte.templateKey}</dd>
-          </div>
-          {akte.dueAt ? (
-            <div className="flex gap-2">
-              <dt className="font-condensed">{de.case.dueAt}</dt>
-              <dd>{akte.dueAt.toLocaleDateString('de-DE')}</dd>
-            </div>
-          ) : null}
-        </dl>
-        <CaseActions
-          caseNumber={akte.caseNumber}
-          classification={akte.classification}
-          statusTargets={allowedTargets(akte.status as CaseStatusName)}
-          levels={levels.map((l) => ({ level: l.level, name: l.name }))}
-          maxLevel={user.permissions.clearanceLevel}
-        />
-      </header>
-
-      <section className="mt-10">
         <h2 className="font-condensed">{de.section.heading}</h2>
         <div className="mt-4">
           <Suspense
@@ -383,50 +237,14 @@ export default async function CasePage({
         </div>
       </section>
 
-      <div className="mt-12">
-        <Suspense
-          fallback={
-            <div className="grid gap-10 md:grid-cols-2">
-              <div className="space-y-3">
-                <SkeletonLine width="8rem" />
-                <SkeletonLine width="70%" />
-              </div>
-              <div className="space-y-3">
-                <SkeletonLine width="9rem" />
-                <SkeletonLine width="65%" />
-              </div>
-            </div>
-          }
-        >
-          <Relations
-            akte={akte}
-            permissions={user.permissions}
-            canEdit={canEditCase(user.permissions, akte).ok}
-          />
-        </Suspense>
-      </div>
-
       <section className="mt-12">
-        <Suspense
+        <div className="flex flex-wrap items-baseline justify-between gap-4">
-          fallback={
+          <h2 className="font-condensed">{de.case.timeline}</h2>
-            <div className="space-y-3 border border-line p-4">
+          <Link href={`/faelle/${akte.caseNumber}/aenderungen`} className="text-xs">
-              <SkeletonLine width="8rem" />
+            {de.case.changes}
-              <SkeletonLine width="70%" />
+          </Link>
-              <SkeletonLine width="55%" />
+        </div>
-            </div>
-          }
-        >
-          <ChatBlock akte={akte} user={user} />
-        </Suspense>
-      </section>
 
-      <nav className="mt-12 flex gap-4 border-b border-line pb-2 font-condensed text-xs">
-        <span className="text-text-dim">{de.case.timeline}</span>
-        <Link href={`/faelle/${akte.caseNumber}/aenderungen`}>{de.case.changes}</Link>
-        <Link href={`/faelle/${akte.caseNumber}/export`}>{de.export.heading}</Link>
-      </nav>
-
-      <section className="mt-6">
         <div className="mt-4">
           <EntryComposer caseNumber={akte.caseNumber} />
         </div>
@@ -452,6 +270,20 @@ export default async function CasePage({
           </Suspense>
         </div>
       </section>
-    </main>
+
+      <section className="mt-12">
+        <Suspense
+          fallback={
+            <div className="space-y-3 border border-line p-4">
+              <SkeletonLine width="8rem" />
+              <SkeletonLine width="70%" />
+              <SkeletonLine width="55%" />
+            </div>
+          }
+        >
+          <ChatBlock akte={akte} user={user} />
+        </Suspense>
+      </section>
+    </>
   )
 }

web/e2e/smoke.spec.ts

@@ -36,6 +36,8 @@ test.describe('Geschuetzte Bereiche', () => {
     '/kanaele',
     '/suche',
     '/faelle/AfiS-2026-0001/export',
+    '/faelle/AfiS-2026-0001/beteiligte',
+    '/faelle/AfiS-2026-0001/dokumente',
     '/einstellungen',
     '/dokumente/AfiS-2026-0001',
     '/admin/rollen',

web/lib/i18n/cases.ts

@@ -24,6 +24,9 @@ export const caseText = {
   sections: 'Abschnitte',
   chat: 'Aktenchat',
   changes: 'Änderungen',
+  tabFile: 'Akte',
+  tabRelations: 'Beteiligte',
+  tabDocuments: 'Dokumente',
   participants: 'Beteiligte',
   links: 'Verknüpfungen',
   attachments: 'Anhänge',