feat(ui): Marke und Grundkomponenten (#002)

Bildmarke als Inline-SVG und Wortmarke, dazu Karte, Button, Badge,
Statuspunkt, Tabelle, Kennzahl, Diff-Box, Breadcrumb, Seitenkopf,
Leerzustand und MonoKopieren. Die Bausteine kapseln die Designregeln
(44 px Klickflaeche, Status nie nur ueber Farbe, Tabellen scrollen im
eigenen Container), damit spaetere Seiten sie nicht neu erfinden.
Nur MonoKopieren ist Client-Komponente, weil sie die Zwischenablage
braucht.

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

src/components/ui/Breadcrumb.tsx

@@ -0,0 +1,38 @@
+import { ChevronRight } from "lucide-react";
+import Link from "next/link";
+import { Fragment } from "react";
+
+export type BreadcrumbEintrag = { titel: string; href?: string };
+
+/** Brotkrumen-Navigation; der letzte Eintrag ist die aktuelle Seite (#002). */
+export function Breadcrumb({ pfad }: { pfad: BreadcrumbEintrag[] }) {
+  return (
+    <nav aria-label="Brotkrumen" className="text-muted text-[13.5px]">
+      <ol className="flex flex-wrap items-center gap-x-1 gap-y-1">
+        {pfad.map((e, i) => {
+          const letzter = i === pfad.length - 1;
+          return (
+            <Fragment key={i}>
+              <li className="min-w-0">
+                {e.href && !letzter ? (
+                  <Link href={e.href} className="hover:text-text rounded transition-colors">
+                    {e.titel}
+                  </Link>
+                ) : (
+                  <span aria-current={letzter ? "page" : undefined} className={letzter ? "text-text" : ""}>
+                    {e.titel}
+                  </span>
+                )}
+              </li>
+              {!letzter && (
+                <li aria-hidden className="flex">
+                  <ChevronRight className="size-3.5" />
+                </li>
+              )}
+            </Fragment>
+          );
+        })}
+      </ol>
+    </nav>
+  );
+}