feat(auth): Anmeldeseiten, TOTP-Einrichtung und Bestaetigung (#004)

Anmeldung, Einrichtung des zweiten Faktors fuer den Notfall-Admin,
erneute Bestaetigung vor kritischen Aktionen und die Seite fuer
fehlende Rechte. Die Huelle zeigt jetzt den echten Benutzer, und jede
Seite prueft die Sitzung selbst; ein struktureller Test haelt das fest.

Die Ablaeufe sind im gebauten Stand gegen den Mock-OIDC geprueft
(pnpm test:e2e): Admin, Konto ohne Gruppe, Notfall-Admin mit TOTP.

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

src/components/ui/Feld.tsx

@@ -0,0 +1,46 @@
+import type { ComponentProps } from "react";
+import { clsx } from "clsx";
+
+/** Eingabefeld mit Beschriftung (#004). Mindesthoehe 44 px wie alle Klickflaechen. */
+export function Feld({
+  beschriftung,
+  hinweis,
+  mono = false,
+  className,
+  id,
+  name,
+  ...rest
+}: ComponentProps<"input"> & { beschriftung: string; hinweis?: string; mono?: boolean }) {
+  const feldId = id ?? `feld-${name}`;
+  return (
+    <div className={clsx("flex flex-col gap-1.5", className)}>
+      <label htmlFor={feldId} className="text-muted text-[13px] font-medium">
+        {beschriftung}
+      </label>
+      <input
+        id={feldId}
+        name={name}
+        {...rest}
+        className={clsx(
+          "bg-bg border-border-strong text-text rounded-feld min-h-11 border px-3 text-[15px]",
+          "placeholder:text-muted/70 focus-visible:border-accent",
+          mono && "font-mono tracking-wide",
+        )}
+      />
+      {hinweis && <p className="text-muted text-[12.5px]">{hinweis}</p>}
+    </div>
+  );
+}
+
+/** Fehlermeldung eines Formulars – mit role=alert, damit Screenreader sie vorlesen. */
+export function Formularfehler({ text }: { text?: string }) {
+  if (!text) return null;
+  return (
+    <p
+      role="alert"
+      className="border-danger-border bg-danger-soft text-danger rounded-box border px-3 py-2.5 text-[14px]"
+    >
+      {text}
+    </p>
+  );
+}