Renderer-Umschalter in die Settings; Nordstern als Default

Der WebGL2<->Nordstern-Umschalter wandert aus der Statusleiste in den
Settings-Dialog. Default ist jetzt Nordstern (WASM), sofern WebGPU
verfuegbar ist; WebGL2 nur noch als expliziter Fallback. So sieht man
nicht mehr versehentlich die Darstellungsfehler des WebGL2-Viewers.
styles.css: .sb-renderer-toggle align-self:flex-start, damit das Pill
im Settings-Dialog nicht auf volle Breite zieht.

src/ui/SettingsDialog.tsx

@@ -14,6 +14,7 @@ import { t } from "../i18n";
 import { ACCENT_SWATCHES } from "../theme/accents";
 import type { Project } from "../model/types";
 import { ColorHexField } from "./ColorHexField";
+import type { RendererMode } from "./StatusBar";
 
 export interface SettingsDialogProps {
   marqueeColor: string;
@@ -22,6 +23,15 @@ export interface SettingsDialogProps {
   onSnapColorChange: (hex: string) => void;
   project: Project;
   setProject: (next: Project | ((p: Project) => Project)) => void;
+  /** Aktuell gewählter Plan-Renderer (aus dem `?engine`-URL-Param abgeleitet). */
+  rendererMode: RendererMode;
+  /** Ist `navigator.gpu` vorhanden? Steuert, ob „Nordstern" wählbar ist. */
+  webGpuAvailable: boolean;
+  /**
+   * Renderer wechseln (setzt/entfernt den `engine`-URL-Param und lädt neu — kein
+   * Live-Remount der Renderer-Hooks).
+   */
+  onRendererModeChange: (mode: RendererMode) => void;
   onClose: () => void;
 }
 
@@ -32,6 +42,9 @@ export function SettingsDialog({
   onSnapColorChange,
   project,
   setProject,
+  rendererMode,
+  webGpuAvailable,
+  onRendererModeChange,
   onClose,
 }: SettingsDialogProps) {
   useEffect(() => {
@@ -85,6 +98,33 @@ export function SettingsDialog({
         </header>
 
         <div className="imp-body">
+          <section className="imp-section">
+            <div className="imp-section-title">{t("status.renderer")}</div>
+            <span className="sb-renderer-toggle" role="group" aria-label={t("status.renderer")}>
+              <button
+                type="button"
+                className={`sb-renderer-btn${rendererMode === "webgl2" ? " active" : ""}`}
+                aria-pressed={rendererMode === "webgl2"}
+                onClick={() => onRendererModeChange("webgl2")}
+              >
+                {t("status.rendererWebgl")}
+              </button>
+              <button
+                type="button"
+                className={`sb-renderer-btn${rendererMode === "wasm" ? " active" : ""}`}
+                aria-pressed={rendererMode === "wasm"}
+                disabled={!webGpuAvailable}
+                title={webGpuAvailable ? undefined : t("status.rendererWasmUnavailable")}
+                onClick={() => onRendererModeChange("wasm")}
+              >
+                {t("status.rendererWasm")}
+              </button>
+            </span>
+            {!webGpuAvailable && (
+              <div className="imp-note">{t("status.rendererWasmUnavailable")}</div>
+            )}
+          </section>
+
           <section className="imp-section">
             <div className="imp-section-title">{t("settings.section.display")}</div>
             <AccentColorField

src/ui/StatusBar.tsx

@@ -33,15 +33,6 @@ export interface StatusBarProps {
   activeFloor: string;
   /** Name der aktiven Ebene (Kategorie) oder „—". */
   activeLayer: string;
-  /** Aktuell gewählter Plan-Renderer (aus dem `?engine`-URL-Param abgeleitet). */
-  rendererMode: RendererMode;
-  /** Ist `navigator.gpu` vorhanden? Steuert, ob „Engine" wählbar ist. */
-  webGpuAvailable: boolean;
-  /**
-   * Renderer wechseln (setzt/entfernt den `engine`-URL-Param und lädt neu — kein
-   * Live-Remount der Renderer-Hooks).
-   */
-  onRendererModeChange: (mode: RendererMode) => void;
   /** Linien-Darstellung: „display" (Haarlinien) oder „print" (echte mm-Stärken). */
   lineMode: "display" | "print";
   /** Linien-Darstellung wechseln. */
@@ -264,9 +255,6 @@ export function StatusBar({
   referenceLinesEnabled,
   activeFloor,
   activeLayer,
-  rendererMode,
-  webGpuAvailable,
-  onRendererModeChange,
   lineMode,
   onLineModeChange,
   lineModeEnabled,
@@ -309,30 +297,6 @@ export function StatusBar({
           {t("status.referenceLines")}
         </button>
         <Sep />
-        <span className="sb-field">
-          <span className="sb-key">{t("status.renderer")}</span>
-          <span className="sb-renderer-toggle" role="group" aria-label={t("status.renderer")}>
-            <button
-              type="button"
-              className={`sb-renderer-btn${rendererMode === "webgl2" ? " active" : ""}`}
-              aria-pressed={rendererMode === "webgl2"}
-              onClick={() => onRendererModeChange("webgl2")}
-            >
-              {t("status.rendererWebgl")}
-            </button>
-            <button
-              type="button"
-              className={`sb-renderer-btn${rendererMode === "wasm" ? " active" : ""}`}
-              aria-pressed={rendererMode === "wasm"}
-              disabled={!webGpuAvailable}
-              title={webGpuAvailable ? undefined : t("status.rendererWasmUnavailable")}
-              onClick={() => onRendererModeChange("wasm")}
-            >
-              {t("status.rendererWasm")}
-            </button>
-          </span>
-        </span>
-        <Sep />
         <Field label={t("status.xy")} value={coords} />
         <Sep />
         <Field label={t("status.unit")} value={unit} />