Phase 3 abgeschlossen: Vorlagen, Abschnitte, Schwärzung, Diff

Eine Vorlage ist eine geordnete Liste von Bausteinen: Eingabefelder und feste
Textbausteine mit Platzhaltern. Damit trägt dieselbe Struktur den
Vorfallsbericht und den Sonderarbeitsvertrag. Die Startvorlagen bilden jetzt
den echten Bericht der Abteilung ab, samt Berichtsart, Gefahreneinschätzung
und Foundation-Freigabe - letztere als gewöhnliches Feld ohne Wirkung auf den
Zugriff.

Abschnitte werden gerendert und bearbeitet, Entwürfe alle zwei Sekunden lokal
gesichert. Gespeichert wird auf Knopfdruck: ein Abschnitt ist der Sachstand
der Akte, kein Chatbeitrag. Die geladene Version geht mit; weicht sie ab, gibt
es kein stilles Überschreiben, sondern beide Fassungen nebeneinander mit
"Meine übernehmen" und "Fremde übernehmen".

Felder über der Stufe des Lesers werden serverseitig durch einen Platzhalter
ersetzt, Schwärzungen im Fliesstext kommen als Segmente. Beides so, dass der
echte Wert den Server nicht verlässt - nicht als Ausblenden im Client.

Der Wortdiff ist selbst geschrieben statt eingekauft: ein Dutzend Zeilen gegen
30 kB im Bündel für etwas, das nur serverseitig läuft.

Beim Bauen des Vorlagen-Editors riss das Bündel-Budget auf 127,9 kB, weil zod
über das Vorlagenmodul in den Client geriet. Typen und Validierung sind jetzt
getrennt: fields.ts ohne zod für Client und Server, schema.ts nur
serverseitig. Wieder bei 111,9 kB von 120.

85 Tests, 22 E2E.

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

@@ -10,6 +10,9 @@ import { de } from '@/lib/i18n/de'
 import { StampMark, classificationEdgeStyle } from '@/components/StampMark'
 import { SkeletonLine } from '@/components/Skeleton'
 import { EntryComposer } from './EntryComposer'
+import { Sections } from './Sections'
+import { loadSections } from '@/lib/cases/sectionService'
+import { canEditCase } from '@/lib/access/caseWrite'
 import { CaseActions } from './CaseActions'
 import { EntryActions } from './EntryActions'
 import { allowedTargets, type CaseStatusName } from '@/lib/cases/lifecycle'
@@ -129,6 +132,23 @@ async function Timeline({
   )
 }
 
+async function SectionBlock({
+  caseId,
+  caseNumber,
+  templateId,
+  permissions,
+  canEdit,
+}: {
+  caseId: string
+  caseNumber: string
+  templateId: string
+  permissions: EffectivePermissions
+  canEdit: boolean
+}) {
+  const sections = await loadSections(permissions, caseId, templateId)
+  return <Sections caseNumber={caseNumber} sections={sections} canEdit={canEdit} />
+}
+
 export default async function CasePage({
   params,
 }: {
@@ -192,7 +212,31 @@ export default async function CasePage({
         />
       </header>
 
-      <nav className="mt-8 flex gap-4 border-b border-line pb-2 font-condensed text-xs">
+      <section className="mt-10">
+        <h2 className="font-condensed">{de.section.heading}</h2>
+        <div className="mt-4">
+          <Suspense
+            fallback={
+              <div className="space-y-6">
+                <SkeletonLine width="10rem" />
+                <SkeletonLine />
+                <SkeletonLine width="12rem" />
+                <SkeletonLine />
+              </div>
+            }
+          >
+            <SectionBlock
+              caseId={akte.id}
+              caseNumber={akte.caseNumber}
+              templateId={akte.templateId}
+              permissions={user.permissions}
+              canEdit={canEditCase(user.permissions, akte).ok}
+            />
+          </Suspense>
+        </div>
+      </section>
+
+      <nav className="mt-10 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>
       </nav>