TopBar-Redesign: Marke, Zoom-Cluster, Datei-Menü, Fenstersteuerung, Dark-Theme fest

- Marke (DOSSIER-Wortmarke) + Ressourcen-Icon ganz links, wie im
  Rhino-Plugin; Settings-Icon folgt über den neuen Einstellungs-Dialog.
- Massstab/Zoom-Cluster bereinigt: doppelte Massstab-Dropdown entfernt,
  Zoom-Aktionen unter dem Massstab-Dropdown gestapelt (gleiche Breite),
  Ring bei "am Massstab" statt Flächen-Aufhellung.
- PDF/DXF-Export aus der Leiste raus, zusammen mit Speichern/Öffnen/
  Import in einem neuen Datei-Burger-Menü ganz rechts. Speichern/Öffnen
  sind echte JSON-Download/-Upload-Handler fürs ganze Projekt.
- Einstellungs-Fenster (neu): Accent-Palette, Auswahlrahmen-/Snap-Farbe
  editierbar (freier Picker + Presets), Projekt-Referenzhöhe (m ü. M.)
  als Feld.
- LayoutMenu auf die eigene Dropdown-Komponente umgestellt (war noch
  natives <select>).
- Custom Fenstersteuerung (_/□/X) für die randlose Electron-Shell via
  Preload+IPC, eigener Look statt OS-Chrome; Oberleiste als Drag-Region.
- Dark-Theme ist jetzt fester Standard (vorher an OS-Präferenz
  gekoppelt, zeigte je nach Umgebung fälschlich Light) — Light bleibt
  als Opt-in (`[data-theme="light"]`) für einen künftigen Umschalter.
  Alle Oberleisten-Pillen (Dropdown-Trigger, Segmente, Icon-Knöpfe,
  Ansichts-Icons) auf dieselbe dunkle Fläche wie das Kontextmenü
  vereinheitlicht. Panel-Köpfe nicht mehr separat aufgehellt, feste
  Höhe (40px) unabhängig von optionalem Darstellungsmodus-Dropdown.
- 2D-Zoom-Grenzen deutlich erweitert (20000x/0.005x statt 50x/0.2x).

src/ui/SettingsDialog.tsx

@@ -0,0 +1,173 @@
+// Einstellungs-Fenster (modal). HANDOVER-Backlog Punkt 4: Default-Farbe des
+// Auswahlrahmens (Marquee) + der Snap-/Endpunkt-Hervorhebung im Grundriss,
+// beide mit freiem Farbpicker + Akzent-Schnellauswahl; dazu ein Projekt-Feld
+// für die Referenzhöhe des Erdgeschosses (m ü. M.).
+//
+// Rein gesteuert: Marquee-/Snap-Farbe kommen aus der ViewSlice (App reicht
+// Wert + Setter durch), das MüM-Feld schreibt direkt ins Projekt über die
+// bestehende `setProject`-Aktion. Muster wie ExportDxfDialog (abgedunkeltes
+// Overlay, Klick auf Hintergrund + Esc schliessen).
+// Bezeichner englisch, UI-Text/Kommentare deutsch (CONVENTIONS.md).
+
+import { useEffect, useState } from "react";
+import { t } from "../i18n";
+import { ACCENT_SWATCHES } from "../theme/accents";
+import type { Project } from "../model/types";
+
+export interface SettingsDialogProps {
+  marqueeColor: string;
+  onMarqueeColorChange: (hex: string) => void;
+  snapColor: string;
+  onSnapColorChange: (hex: string) => void;
+  project: Project;
+  setProject: (next: Project | ((p: Project) => Project)) => void;
+  onClose: () => void;
+}
+
+export function SettingsDialog({
+  marqueeColor,
+  onMarqueeColorChange,
+  snapColor,
+  onSnapColorChange,
+  project,
+  setProject,
+  onClose,
+}: SettingsDialogProps) {
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [onClose]);
+
+  // Lokaler Textzustand fürs MüM-Feld: erlaubt Zwischenzustände beim Tippen
+  // (leer, "412." etc.), ohne bei jedem Tastendruck einen ungültigen/
+  // gerundeten Projektwert zu schreiben. Synchronisiert sich, wenn sich das
+  // Projekt von aussen ändert (z. B. Undo/Import).
+  const [elevationText, setElevationText] = useState(
+    project.referenceElevationMasl != null ? String(project.referenceElevationMasl) : "",
+  );
+  useEffect(() => {
+    setElevationText(
+      project.referenceElevationMasl != null ? String(project.referenceElevationMasl) : "",
+    );
+  }, [project.referenceElevationMasl]);
+
+  const commitElevation = (raw: string) => {
+    setElevationText(raw);
+    const trimmed = raw.trim();
+    if (trimmed === "") {
+      setProject((p) => ({ ...p, referenceElevationMasl: undefined }));
+      return;
+    }
+    const n = Number(trimmed);
+    if (Number.isFinite(n)) {
+      setProject((p) => ({ ...p, referenceElevationMasl: n }));
+    }
+  };
+
+  return (
+    <div className="imp-overlay" onClick={onClose}>
+      <div
+        className="imp-dialog"
+        role="dialog"
+        aria-modal="true"
+        aria-label={t("settings.title")}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <header className="imp-head">
+          <span className="imp-head-title">{t("settings.title")}</span>
+          <button className="imp-close" onClick={onClose} aria-label={t("export.close")}>
+            ×
+          </button>
+        </header>
+
+        <div className="imp-body">
+          <section className="imp-section">
+            <div className="imp-section-title">{t("settings.section.display")}</div>
+            <AccentColorField
+              label={t("settings.marqueeColor")}
+              hint={t("settings.marqueeColor.hint")}
+              value={marqueeColor}
+              onChange={onMarqueeColorChange}
+            />
+            <AccentColorField
+              label={t("settings.snapColor")}
+              hint={t("settings.snapColor.hint")}
+              value={snapColor}
+              onChange={onSnapColorChange}
+            />
+          </section>
+
+          <section className="imp-section">
+            <div className="imp-section-title">{t("settings.section.project")}</div>
+            <label className="settings-field-label" htmlFor="settings-reference-elevation">
+              {t("settings.referenceElevation")}
+            </label>
+            <input
+              id="settings-reference-elevation"
+              className="settings-num-input"
+              type="number"
+              step="0.1"
+              inputMode="decimal"
+              value={elevationText}
+              onChange={(e) => commitElevation(e.target.value)}
+              placeholder="0.0"
+            />
+            <div className="imp-note">{t("settings.referenceElevation.hint")}</div>
+          </section>
+        </div>
+
+        <footer className="imp-foot">
+          <button className="imp-btn primary" onClick={onClose}>
+            {t("export.close")}
+          </button>
+        </footer>
+      </div>
+    </div>
+  );
+}
+
+/** Farbfeld: freier Picker (Swatch + Hex) + Akzent-Presets als Schnellauswahl. */
+function AccentColorField({
+  label,
+  hint,
+  value,
+  onChange,
+}: {
+  label: string;
+  hint: string;
+  value: string;
+  onChange: (hex: string) => void;
+}) {
+  return (
+    <div className="settings-color-field">
+      <div className="settings-color-head">
+        <span className="settings-field-label">{label}</span>
+        <label className="attr-color">
+          <span className="attr-color-swatch" style={{ background: value }} />
+          <input type="color" value={value} onChange={(e) => onChange(e.target.value)} />
+          <span className="attr-color-hex">{value.toUpperCase()}</span>
+        </label>
+      </div>
+      <div className="settings-accent-presets" role="group" aria-label={label}>
+        {ACCENT_SWATCHES.map((a) => (
+          <button
+            key={a.id}
+            type="button"
+            className={`settings-accent-btn${
+              value.toLowerCase() === a.hex.toLowerCase() ? " active" : ""
+            }`}
+            style={{ background: a.hex }}
+            title={a.name}
+            aria-label={a.name}
+            aria-pressed={value.toLowerCase() === a.hex.toLowerCase()}
+            onClick={() => onChange(a.hex)}
+          />
+        ))}
+      </div>
+      <div className="imp-note">{hint}</div>
+    </div>
+  );
+}

src/ui/TopBar.tsx

@@ -14,6 +14,7 @@ import { t } from "../i18n";
 import { useEffect, useRef, useState } from "react";
 import { Dropdown } from "./Dropdown";
 import type { DropdownItem, DropdownOption } from "./Dropdown";
+import { WindowControls } from "./WindowControls";
 import {
   applyMark,
   applyPreset,
@@ -73,6 +74,12 @@ export type PlanColorMode = "color" | "mono";
  */
 export const SCALE_PRESETS: number[] = [1, 5, 10, 20, 50, 100, 200, 500, 1000];
 
+/**
+ * Gemeinsame Breite (px) von Massstab-Dropdown und Zoom-Segmentpille im
+ * Zoom-Cluster — beide sollen exakt gleich breit sein (Nutzer-Wunsch).
+ */
+const ZOOM_CLUSTER_WIDTH = 140;
+
 export interface TopBarProps {
   project: Project;
 
@@ -143,9 +150,20 @@ export interface TopBarProps {
   resourcesOpen: boolean;
   onToggleResources: () => void;
 
+  /** Öffnet das Einstellungs-Fenster (Darstellungsfarben, Projekt-Felder). */
+  onOpenSettings: () => void;
+
   /** Layout-Menü (von App geliefert, damit dessen Logik dort bleibt). */
   layoutMenu: ReactNode;
 
+  // ── Datei-Menü (Burger, ganz rechts) ───────────────────────────────────────
+  /** Öffnet den DXF/DWG-Import-Datei-Dialog. */
+  onImport: () => void;
+  /** Projekt als Datei speichern (JSON-Export des gesamten Projekts). */
+  onSaveProject: () => void;
+  /** Projekt aus einer Datei laden. */
+  onOpenProject: () => void;
+
   // ── Text-Gruppe (Stempel-/Text-Formatierung) ───────────────────────────────
   /**
    * Ziel der Text-Formatierung: `null` = nichts Text-artiges selektiert (die
@@ -813,6 +831,51 @@ function touchedParagraphs(doc: RichTextDoc, range: TextRange | null): number[]
   return out;
 }
 
+/**
+ * Datei-Menü der Oberleiste (Burger, ganz rechts): Speichern/Öffnen des
+ * Projekts sowie Import (DXF/DWG) und Export (PDF/DXF) — vorher eigene
+ * Icon-Pillen im Zoom-Bereich, jetzt gebündelt hinter einem Menü, damit die
+ * Leiste ruhiger bleibt (GTK-Burger-Stil).
+ */
+function AppMenu({
+  onImport,
+  onExportPdf,
+  onExportDxf,
+  onSaveProject,
+  onOpenProject,
+  onOpenSettings,
+  exportEnabled,
+}: {
+  onImport: () => void;
+  onExportPdf: () => void;
+  onExportDxf: () => void;
+  onSaveProject: () => void;
+  onOpenProject: () => void;
+  onOpenSettings: () => void;
+  exportEnabled: boolean;
+}) {
+  const items: DropdownItem[] = [
+    { label: t("file.save"), onSelect: onSaveProject },
+    { label: t("file.open"), onSelect: onOpenProject },
+    { divider: true },
+    { label: t("file.import"), onSelect: onImport },
+    { divider: true },
+    { label: t("file.exportPdf"), onSelect: onExportPdf, disabled: !exportEnabled },
+    { label: t("file.exportDxf"), onSelect: onExportDxf, disabled: !exportEnabled },
+    { divider: true },
+    { label: t("topbar.settings"), onSelect: onOpenSettings },
+  ];
+  return (
+    <Dropdown
+      items={items}
+      placeholder=""
+      title={t("file.menu")}
+      triggerClassName="tb-burger"
+      triggerSuffix={<TbIcon name="menu" />}
+    />
+  );
+}
+
 export function TopBar({
   project,
   viewToggleEnabled,
@@ -843,7 +906,11 @@ export function TopBar({
   combos,
   resourcesOpen,
   onToggleResources,
+  onOpenSettings,
   layoutMenu,
+  onImport,
+  onSaveProject,
+  onOpenProject,
   textTarget,
   onAddText,
 }: TopBarProps) {
@@ -899,10 +966,28 @@ export function TopBar({
 
   return (
     <header className="topbar" ref={headerRef}>
-      {/* Marke/Logo. */}
-      <div className="brand">
-        <span className="logo">▦</span> cad{" "}
-        <span className="tag">{t("brand.tag")}</span>
+      {/* Marke (DOSSIER-Wortmarke) + Settings/Ressourcen-Icons daneben,
+          gestapelt wie im Rhino-Plugin (ToolbarApp.jsx: Wortmarke links,
+          rechts daneben ein schmaler Icon-Stapel). */}
+      <div className="tb-brandgroup">
+        <div className="brand">
+          <span className="brand-word">
+            DOSSIER<span className="brand-dot">.</span>
+          </span>
+          <span className="tag">{t("brand.tag")}</span>
+        </div>
+        <div className="tb-brandicons">
+          <button
+            type="button"
+            className={`tb-brandicon${resourcesOpen ? " active" : ""}`}
+            onClick={onToggleResources}
+            aria-pressed={resourcesOpen}
+            aria-label={t("topbar.resources")}
+            title={`${t("topbar.resources")} — ${t("topbar.resources.hint")}`}
+          >
+            <TbIcon name="widgets" />
+          </button>
+        </div>
       </div>
 
       <Sep />
@@ -1017,9 +1102,9 @@ export function TopBar({
       {/* Detailgrad (grob/mittel/fein) — wirkt im Grundriss auf Symbole +
           Schraffuren/Linien. In der Perspektive (noch) ohne Wirkung → dort
           deaktiviert mit Tooltip statt stiller No-Op. */}
-      {/* Detailgrad + Massstab gestapelt — eine Spalte, platzsparend (wie die
-          Ebenen-/Zeichnungs-Kombis). */}
-      <div className="tb-group tb-stack" role="group" aria-label={t("topbar.detailGroup")}>
+      {/* Detailgrad — Massstab lebt nur noch EINMAL im Zoom-Cluster (die
+          Dropdown hier war ein redundantes Relikt der TopBar-Reorg). */}
+      <div className="tb-group" role="group" aria-label={t("topbar.detailGroup")}>
         <label className="tb-field tb-field-row">
           <span className="tb-label">{t("topbar.detail")}</span>
           <Dropdown
@@ -1038,17 +1123,6 @@ export function TopBar({
             ]}
           />
         </label>
-        <label className="tb-field tb-field-row">
-          <span className="tb-label">{t("topbar.scale")}</span>
-          <Dropdown
-            value={inPresets ? String(scaleDenominator) : "__current__"}
-            disabled={!zoomEnabled}
-            onChange={onScaleChange}
-            title={t("topbar.scale.apply")}
-            triggerClassName="tb-dd-mono"
-            options={scaleOptions}
-          />
-        </label>
       </div>
 
       <Sep />
@@ -1081,11 +1155,12 @@ export function TopBar({
             onChange={onScaleChange}
             title={t("topbar.scale.apply")}
             triggerClassName="tb-dd-mono"
-            width={140}
+            width={ZOOM_CLUSTER_WIDTH}
             options={scaleOptions}
           />
           <Segment
             ariaLabel={t("topbar.scaleGroup")}
+            style={{ width: ZOOM_CLUSTER_WIDTH }}
             cells={[
               {
                 key: "zoom100",
@@ -1113,31 +1188,6 @@ export function TopBar({
         </div>
       </div>
 
-      {/* Export als eigene kleine Pillen-Reihe (nicht mehr Teil des Zoom-Blocks,
-          damit der Cluster ruhig bleibt). */}
-      <div className="tb-group tb-btns" role="group" aria-label={t("topbar.exportPdf")}>
-        <button
-          type="button"
-          className="tb-iconbtn"
-          onClick={onExportPdf}
-          disabled={!zoomEnabled}
-          title={t("topbar.exportPdf.hint")}
-          aria-label={t("topbar.exportPdf")}
-        >
-          <TbIcon name="picture_as_pdf" />
-        </button>
-        <button
-          type="button"
-          className="tb-iconbtn"
-          onClick={onExportDxf}
-          disabled={!zoomEnabled}
-          title={t("topbar.exportDxf.hint")}
-          aria-label={t("topbar.exportDxf")}
-        >
-          <TbIcon name="download" />
-        </button>
-      </div>
-
       <Sep />
 
       {/* Darstellungsart (Vectorworks-Stil) — EIN Dropdown, dessen Optionen vom
@@ -1177,19 +1227,21 @@ export function TopBar({
 
       <Sep />
 
-      {/* Rechte Gruppe: Layout-Menü · Ressourcen · Projektname. */}
+      {/* Rechte Gruppe: Layout-Menü · Projektname · Datei-Burger (ganz rechts,
+          GTK-Stil) — Ressourcen sitzt jetzt bei der Marke (s. o.). */}
       <div className="topbar-right">
         {layoutMenu}
-        <button
-          className={`view-icon${resourcesOpen ? " active" : ""}`}
-          onClick={onToggleResources}
-          aria-pressed={resourcesOpen}
-          aria-label={t("topbar.resources")}
-          title={`${t("topbar.resources")} — ${t("topbar.resources.hint")}`}
-        >
-          <TbIcon name="widgets" />
-        </button>
         <span className="project-name">{project.name}</span>
+        <AppMenu
+          onImport={onImport}
+          onExportPdf={onExportPdf}
+          onExportDxf={onExportDxf}
+          onSaveProject={onSaveProject}
+          onOpenProject={onOpenProject}
+          onOpenSettings={onOpenSettings}
+          exportEnabled={zoomEnabled}
+        />
+        <WindowControls />
       </div>
     </header>
   );

src/ui/WindowControls.tsx

@@ -0,0 +1,107 @@
+// Eigene Fenstersteuerung (Minimieren/Maximieren/Schliessen) für das randlose
+// Electron-Fenster (frame:false, s. scripts/electron-main.cjs) — ohne native
+// Titelleiste gibt es sonst keine Möglichkeit, das Fenster zu steuern.
+//
+// Rendert NUR, wenn `window.dossierWindow` existiert (vom Preload-Skript
+// injiziert) — also nur unter Electron. In Tauri (native Fensterdekoration)
+// und im Browser-Dev-Modus (?vite) bleibt die Komponente unsichtbar (`null`),
+// dort steuert das Betriebssystem bzw. der Browser das Fenster.
+
+import { useEffect, useState } from "react";
+
+/** Von electron-preload.cjs via contextBridge injiziert (nur unter Electron). */
+interface DossierWindowApi {
+  minimize: () => void;
+  toggleMaximize: () => void;
+  close: () => void;
+  isMaximized: () => Promise<boolean>;
+  onMaximizedChange: (callback: (isMaximized: boolean) => void) => () => void;
+}
+
+declare global {
+  interface Window {
+    dossierWindow?: DossierWindowApi;
+  }
+}
+
+export function WindowControls() {
+  const api = window.dossierWindow;
+  const [maximized, setMaximized] = useState(false);
+
+  useEffect(() => {
+    if (!api) return;
+    let cancelled = false;
+    api.isMaximized().then((v) => {
+      if (!cancelled) setMaximized(v);
+    });
+    const unsubscribe = api.onMaximizedChange((v) => setMaximized(v));
+    return () => {
+      cancelled = true;
+      unsubscribe();
+    };
+  }, [api]);
+
+  if (!api) return null;
+
+  return (
+    <div className="win-controls" role="group" aria-label="Fenster">
+      <button
+        type="button"
+        className="win-btn"
+        onClick={() => api.minimize()}
+        title="Minimieren"
+        aria-label="Minimieren"
+      >
+        <svg width="10" height="10" viewBox="0 0 10 10" aria-hidden="true">
+          <path d="M1 5 L9 5" stroke="currentColor" strokeWidth="1.2" />
+        </svg>
+      </button>
+      <button
+        type="button"
+        className="win-btn"
+        onClick={() => api.toggleMaximize()}
+        title={maximized ? "Wiederherstellen" : "Maximieren"}
+        aria-label={maximized ? "Wiederherstellen" : "Maximieren"}
+      >
+        {maximized ? (
+          <svg width="10" height="10" viewBox="0 0 10 10" aria-hidden="true">
+            <path
+              d="M2.5 1.5 H8.5 V7.5 H2.5 Z M2.5 1.5 V3 M1.5 3 H2.5 M1.5 3 V9 H7.5 V7.5"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="1"
+            />
+          </svg>
+        ) : (
+          <svg width="10" height="10" viewBox="0 0 10 10" aria-hidden="true">
+            <rect
+              x="1.5"
+              y="1.5"
+              width="7"
+              height="7"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="1"
+            />
+          </svg>
+        )}
+      </button>
+      <button
+        type="button"
+        className="win-btn win-btn-close"
+        onClick={() => api.close()}
+        title="Schliessen"
+        aria-label="Schliessen"
+      >
+        <svg width="10" height="10" viewBox="0 0 10 10" aria-hidden="true">
+          <path
+            d="M1 1 L9 9 M9 1 L1 9"
+            stroke="currentColor"
+            strokeWidth="1.2"
+            strokeLinecap="round"
+          />
+        </svg>
+      </button>
+    </div>
+  );
+}