L5 Berichte & Unterschrift: Backoffice- und Mobil-Oberflächen

/reports mit Filtern (zur Prüfung zuerst), /reports/[id] mit Aktionen, Versionen und PDF-Link;
mobile Komponenten für Bericht, Prüfung und Unterschrift inkl. Signature-Pad; Texte de/en.

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

src/components/reports/step-indicator.tsx

@@ -0,0 +1,33 @@
+import { Check } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+/** Progress for the multi-step mobile completion (Brandbook §12.2). `current` is 1-based. */
+export function StepIndicator({ steps, current, label }: { steps: string[]; current: number; label: string }) {
+  return (
+    <nav aria-label={label}>
+      <ol className="flex items-center gap-1.5">
+        {steps.map((s, i) => {
+          const n = i + 1;
+          const done = n < current;
+          const active = n === current;
+          return (
+            <li key={s} className="flex min-w-0 flex-1 flex-col items-center gap-1" aria-current={active ? "step" : undefined}>
+              <span
+                className={cn(
+                  "grid size-7 place-items-center rounded-full border text-[12px] font-bold",
+                  done && "border-[var(--ok)] text-[var(--ok)]",
+                  active && "border-[var(--ui-accent)] bg-[var(--ui-accent)] text-[var(--ui-accent-foreground)]",
+                  !done && !active && "text-muted-foreground",
+                )}
+              >
+                {done ? <Check className="size-3.5" aria-hidden /> : n}
+              </span>
+              <span className={cn("truncate text-[11px]", active ? "font-semibold" : "text-muted-foreground")}>{s}</span>
+            </li>
+          );
+        })}
+      </ol>
+      <p className="sr-only">{label}</p>
+    </nav>
+  );
+}