feat(C): Phase C — Core UI prüfen, vervollständigen, testen

C-ERR-BOUNDARY: ErrorBoundary erweitert (trace_id, Fallback-UI, PluginErrorBoundary)
C-NOTIF: NotificationDropdown mit System-Channel-Link
C-DOCS: ApiDocs.tsx Seite (Swagger UI iframe)
C-A11Y: aria-label, min-h-touch, focus-visible ergänzt
C-FE-TEST: 29 neue Tests (ErrorBoundary, ApiDocs, PrintButton, themeStore, NotificationDropdown)
C-DOC: ui-design-guidelines.md aktualisiert

Verifiziert (keine Änderungen nötig):
- C-TAGS, C-CF, C-FILTER, C-DEDUP, C-ONBOARD, C-THEME, C-PWA, C-PRINT

TSC: 0 errors, Build: erfolgreich, Vitest: 29/29 passed

frontend/src/components/plugins/PluginLoader.tsx

@@ -1,5 +1,6 @@
 import React, { Suspense, lazy, Component, ReactNode } from 'react';
 import { Loader2 } from 'lucide-react';
+import { logError } from '@/utils/errorLogger';
 
 // ── Error Boundary ──────────────────────────────────────────────────────
 
@@ -10,20 +11,79 @@ interface PluginErrorBoundaryProps {
 
 interface PluginErrorBoundaryState {
   hasError: boolean;
+  error: Error | null;
+  traceId: string | null;
+}
+
+function generateTraceId(): string {
+  return 'plugin-err-' + Date.now().toString(36) + '-' + Math.random().toString(36).slice(2, 8);
 }
 
 class PluginErrorBoundary extends Component<PluginErrorBoundaryProps, PluginErrorBoundaryState> {
-  state = { hasError: false };
+  state: PluginErrorBoundaryState = { hasError: false, error: null, traceId: null };
 
-  static getDerivedStateFromError(): PluginErrorBoundaryState {
-    return { hasError: true };
+  static getDerivedStateFromError(error: Error): PluginErrorBoundaryState {
+    return { hasError: true, error, traceId: generateTraceId() };
   }
 
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {
+    logError(error, {
+      componentStack: errorInfo.componentStack,
+      pluginName: this.props.pluginName,
+      trace_id: this.state.traceId,
+      source: 'PluginErrorBoundary',
+    });
+  }
+
+  handleRetry = (): void => {
+    this.setState({ hasError: false, error: null, traceId: null });
+  };
+
   render() {
     if (this.state.hasError) {
       return (
-        <div className="p-4 text-sm text-red-600" role="alert">
-          Failed to load plugin: {this.props.pluginName}
+        <div
+          className="flex flex-col items-center justify-center min-h-[300px] p-8 text-center"
+          role="alert"
+          aria-live="assertive"
+        >
+          <div className="text-danger-500 text-4xl mb-3" aria-hidden="true">⚠️</div>
+          <h2 className="text-lg font-bold text-secondary-900 mb-2">
+            Plugin konnte nicht geladen werden
+          </h2>
+          <p className="text-sm text-secondary-600 mb-3">
+            Das Plugin „{this.props.pluginName}" hat einen Fehler verursacht.
+          </p>
+          {this.state.traceId && (
+            <p className="text-xs text-secondary-400 mb-3 font-mono" data-testid="plugin-error-trace-id">
+              Trace-ID: {this.state.traceId}
+            </p>
+          )}
+          {this.state.error && (
+            <details className="mb-4 max-w-lg text-left text-secondary-500">
+              <summary className="cursor-pointer text-sm hover:text-secondary-700">
+                Fehlerdetails
+              </summary>
+              <pre className="mt-2 p-3 bg-secondary-50 rounded text-xs overflow-auto max-h-32">
+                {this.state.error.message}
+                {this.state.error.stack ? `\n\n${this.state.error.stack}` : ''}
+              </pre>
+            </details>
+          )}
+          <div className="flex gap-3">
+            <button
+              onClick={this.handleRetry}
+              className="inline-flex items-center px-4 py-2 bg-primary-600 text-white text-sm font-medium rounded-md hover:bg-primary-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 transition-colors min-h-touch"
+            >
+              Erneut versuchen
+            </button>
+            <button
+              onClick={() => window.location.reload()}
+              className="inline-flex items-center px-4 py-2 bg-secondary-100 text-secondary-700 text-sm font-medium rounded-md hover:bg-secondary-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-secondary-400 transition-colors min-h-touch"
+            >
+              Neu laden
+            </button>
+          </div>
         </div>
       );
     }